/* kpv-aud.com — clean flat design in the spirit of the original blog. Three themes via [data-theme] on : light (default), dark, sepia. */ :root, [data-theme="light"] { --bg: #ffffff; --text: #15171a; --muted: #738a94; --border: #e9eef0; --link: #3b6fd6; --panel: #f6f8f9; } [data-theme="dark"] { --bg: #121417; --text: #e6e9ec; --muted: #8b98a5; --border: #272d33; --link: #82aae8; --panel: #1a1f24; } [data-theme="sepia"] { --bg: #f4ecd8; --text: #433423; --muted: #8a7a5f; --border: #e2d6ba; --link: #704214; --panel: #ede2c6; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color .2s ease, color .2s ease; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } .wrap { max-width: 820px; margin: 0 auto; padding: 0 24px; } /* --- nav --- */ .topnav { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--border); } .navwrap { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; padding-bottom: 14px; } .site-title { font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); } a.site-title:hover { text-decoration: none; color: var(--link); } .navlinks { display: flex; align-items: center; gap: 20px; } .navlinks a { color: var(--muted); font-size: 0.95rem; } .navlinks a:hover, .navlinks a.active { color: var(--text); text-decoration: none; } .theme-btn { font: inherit; font-size: 0.82rem; cursor: pointer; background: transparent; color: var(--muted); border: 1px solid var(--border); border-radius: 20px; padding: 4px 12px; } .theme-btn:hover { border-color: var(--link); color: var(--text); } /* --- intro --- */ .intro { text-align: center; padding: 56px 0 44px; border-bottom: 1px solid var(--border); } .portrait { width: 124px; height: 124px; border-radius: 50%; border: 1px solid var(--border); object-fit: cover; background: var(--panel); } .intro h1 { font-size: 2.6rem; margin: 18px 0 10px; letter-spacing: -0.03em; } .tagline { color: var(--muted); font-size: 1.15rem; margin: 0; } .bio { text-align: left; max-width: 660px; margin: 28px auto 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.08rem; } .bio p { margin: 0 0 14px; } .bio p:last-child { margin-bottom: 0; } /* --- sections (collapsible) --- */ section { padding: 40px 0 8px; } section h2 { display: flex; align-items: center; justify-content: space-between; font-size: 1.6rem; letter-spacing: -0.02em; margin: 0; padding-bottom: 12px; border-bottom: 1px solid var(--border); } section h2::after { content: "▾"; font-size: 1rem; color: var(--muted); transition: transform .15s ease; } details.sec > summary { list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none; } details.sec > summary::-webkit-details-marker { display: none; } details.sec > summary:hover h2::after { color: var(--link); } details.sec:not([open]) h2::after { transform: rotate(-90deg); } .sec-body { padding-top: 22px; } /* --- project cards --- */ .cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; } .card { display: block; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; color: var(--text); background: var(--bg); transition: border-color .15s ease, transform .15s ease; } .card:hover { border-color: var(--link); transform: translateY(-2px); text-decoration: none; } .card-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-bottom: 1px solid var(--border); background: var(--panel); } .card-pad { padding: 18px 20px; } .card h3 { margin: 0 0 6px; font-size: 1.2rem; letter-spacing: -0.02em; } .card p { margin: 0 0 12px; color: var(--muted); font-size: 0.95rem; } .card .domain { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.78rem; color: var(--muted); } .badge { display: inline-block; font-size: 0.72rem; font-weight: 600; background: var(--panel); color: var(--muted); border-radius: 20px; padding: 3px 9px; margin-left: 8px; vertical-align: 2px; } /* --- blog list --- */ .postlist { display: flex; flex-direction: column; } .post-item { display: block; padding: 24px 0; border-bottom: 1px solid var(--border); color: var(--text); } .post-item:hover { text-decoration: none; } .post-item:hover h3 { color: var(--link); } .post-item h3 { margin: 0 0 6px; font-size: 1.4rem; letter-spacing: -0.02em; } .post-item .post-date { margin: 0 0 6px; } .post-item p { margin: 0; color: var(--muted); } .post-date { color: var(--muted); font-size: 0.875rem; } .empty-note { color: var(--muted); font-style: italic; } /* --- linktree --- */ .linktree { display: flex; flex-direction: column; gap: 10px; max-width: 440px; margin: 0 auto; padding-bottom: 24px; } .tree-link { display: block; text-align: center; border: 1px solid var(--border); border-radius: 10px; padding: 12px 18px; color: var(--link); font-weight: 500; transition: border-color .15s ease, transform .15s ease; } .tree-link:hover { border-color: var(--link); transform: translateY(-1px); text-decoration: none; } /* --- post page --- */ .post-page { max-width: 720px; padding-top: 40px; } .post-page article h1 { font-size: 2.4rem; letter-spacing: -0.03em; margin: 6px 0 24px; } .post-body { font-family: Georgia, "Times New Roman", serif; font-size: 1.12rem; } .post-body p { margin: 0 0 16px; } .post-body h2, .post-body h3 { margin: 1.8em 0 0.6em; letter-spacing: -0.02em; } .post-body blockquote { border-left: 3px solid var(--border); margin: 1.4em 0; padding-left: 20px; color: var(--muted); } .post-body ul, .post-body ol { margin: 0 0 16px; padding-left: 28px; } .post-body hr { border: none; border-top: 1px solid var(--border); margin: 28px 0; } .post-body img { border-radius: 6px; } .backlink { margin: 36px 0 0; } /* --- footer --- */ .site-footer { border-top: 1px solid var(--border); margin-top: 64px; padding: 24px 0; color: var(--muted); font-size: 0.875rem; text-align: center; } /* --- small screens --- */ @media (max-width: 640px) { .intro h1 { font-size: 2rem; } .navlinks { gap: 12px; } .navlinks a { font-size: 0.9rem; } }