/* ============================================================ LAB412 Notes — Visual System Editorial. Printed. Unhurried thought. ============================================================ */ /* fonts.css loaded via in HTML — no @import to avoid waterfall */ /* --- Smooth Page Transitions (View Transitions API) --- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: vt-fade-out 150ms ease; } ::view-transition-new(root) { animation: vt-fade-in 150ms ease; } @keyframes vt-fade-out { from { opacity: 1; } to { opacity: 0; } } @keyframes vt-fade-in { from { opacity: 0; } to { opacity: 1; } } /* --- Theme System --- */ :root { --bg: #FCFCFA; --bg-hover: #F5F5F1; --text: #1C1C1C; --text-secondary: #555555; --text-tertiary: #888888; --text-muted: #B0B0B0; --border: rgba(0, 0, 0, 0.10); --border-strong: rgba(0, 0, 0, 0.18); --accent: #5E7FA6; --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; --transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; } [data-theme="dark"] { --bg: #0A0E14; --bg-hover: #111926; --text: #D8DDE5; --text-secondary: rgba(199, 209, 221, 0.55); --text-tertiary: rgba(199, 209, 221, 0.32); --text-muted: rgba(199, 209, 221, 0.18); --border: rgba(199, 209, 221, 0.08); --border-strong: rgba(199, 209, 221, 0.15); --accent: #5E7FA6; } /* --- Reset & Base --- */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-serif); background: var(--bg); color: var(--text); line-height: 1.7; transition: var(--transition); min-height: 100vh; } a { color: inherit; text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--text-secondary); } /* --- Layout --- */ .container { max-width: 728px; margin: 0 auto; padding: 0 28px; } /* --- Header --- */ .site-header { padding: 56px 0 0; margin-bottom: 72px; } .site-header__inner { display: flex; justify-content: space-between; align-items: baseline; } .site-logo { font-family: var(--font-sans); font-size: 13px; font-weight: 400; letter-spacing: 0.06em; text-transform: uppercase; } .site-logo__lab { color: var(--text-tertiary); transition: color 0.2s ease; } .site-logo__lab:hover { color: var(--text); } .site-logo__section { color: var(--text-muted); font-weight: 300; transition: color 0.2s ease; } .site-logo__section:hover { color: var(--text-tertiary); } .site-logo:has(.site-logo__section:hover) .site-logo__lab { color: var(--text); } .site-nav { display: flex; align-items: center; gap: 20px; } /* --- Theme Toggle --- */ .theme-toggle { background: none; border: none; color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 0; cursor: pointer; transition: var(--transition), color 0.2s ease; border-radius: 0; position: relative; overflow: hidden; } /* тёмная тема — яркость как у логотипа LAB412 (на notes это --text-tertiary); светлая остаётся приглушённой */ [data-theme="dark"] .theme-toggle { color: var(--text-tertiary); } .theme-toggle:hover { color: var(--text-secondary); border-color: var(--border-strong); } /* Shimmer */ .theme-toggle::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.06) 40%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.06) 60%, transparent 100%); pointer-events: none; opacity: 0; } [data-theme="dark"] .theme-toggle::after { background: linear-gradient(90deg, transparent 0%, rgba(199,209,221,0.12) 40%, rgba(199,209,221,0.2) 50%, rgba(199,209,221,0.12) 60%, transparent 100%); } .theme-toggle.shimmer::after { opacity: 1; animation: shimmer-pass 1.2s ease-in-out; } @keyframes shimmer-pass { 0% { left: -100%; } 100% { left: 100%; } } /* --- Notes List Header (subtitle) --- */ .notes-list-header { font-family: var(--font-sans); font-size: 13px; font-weight: 300; letter-spacing: 0.02em; color: var(--text-tertiary); margin-bottom: 32px; transition: var(--transition); } /* --- Notes List --- */ .notes-list { list-style: none; } .note-item { padding: 20px 0; } .note-item + .note-item { margin-top: 8px; } .note-item__link { display: block; text-decoration: none; color: inherit; } .note-item__title { font-family: var(--font-serif); font-size: 24px; font-weight: 400; line-height: 1.35; color: var(--text); margin-bottom: 8px; transition: color 0.2s; } .note-item__excerpt { font-family: var(--font-serif); font-size: 16px; font-weight: 400; line-height: 1.6; color: var(--text-tertiary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 10px; transition: var(--transition); } .note-item__date { font-family: var(--font-sans); font-size: 12px; font-weight: 300; color: var(--text-muted); letter-spacing: 0.02em; transition: var(--transition); } /* --- Single Note: Back --- */ .note-back { font-family: var(--font-sans); font-size: 13px; font-weight: 300; color: var(--text-tertiary); margin-bottom: 48px; display: inline-block; transition: color 0.2s; } .note-back:hover { color: var(--text-secondary); } .note-back::before { content: '←'; margin-right: 8px; } /* --- Single Note: Header --- */ .note-header { margin-bottom: 56px; } .note-header__date { font-family: var(--font-sans); font-size: 12px; font-weight: 300; color: var(--text-tertiary); letter-spacing: 0.02em; margin-bottom: 16px; } .note-header__title { font-family: var(--font-serif); font-size: 32px; font-weight: 400; line-height: 1.3; color: var(--text); transition: var(--transition); } /* --- Single Note: Content --- */ .note-content { font-family: var(--font-serif); font-size: 20px; line-height: 1.58; color: var(--text); transition: var(--transition); } .note-content p { margin-bottom: 28px; } /* Drop cap on first paragraph only (not inside quotes) */ .note-content > p:first-child::first-letter { font-size: 3.2em; float: left; line-height: 0.85; margin: 4px 10px 0 -2px; font-weight: 400; color: var(--text); } .note-content h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: var(--text); margin: 56px 0 24px; line-height: 1.35; } .note-content h3 { font-family: var(--font-serif); font-size: 19px; font-weight: 500; color: var(--text); margin: 40px 0 16px; line-height: 1.4; } .note-content strong { font-weight: 500; } .note-content em { font-style: italic; } .note-content a { color: var(--text-secondary); border-bottom: 1px solid var(--border-strong); transition: color 0.2s, border-color 0.2s; } .note-content a:hover { color: var(--text); border-color: var(--text-tertiary); } /* Pull quote — centered, italic, no background */ .note-content__quote { margin: 48px 0; padding: 0; border: none; font-size: 21px; line-height: 1.55; color: var(--text-secondary); font-style: italic; text-align: center; max-width: 520px; margin-left: auto; margin-right: auto; } .note-content__quote cite { display: block; margin-top: 12px; font-family: var(--font-sans); font-size: 14px; font-style: normal; color: var(--text-muted); } .note-content__quote cite::before { content: '— '; } .note-content__quote p { margin: 0; font-size: inherit; line-height: inherit; color: inherit; font-style: inherit; } /* Delimiter */ .note-content__delimiter { text-align: center; margin: 28px 0; color: var(--text-muted); font-size: 20px; letter-spacing: 0.3em; } /* Image */ .note-content__image { margin: 40px 0; } .note-content__image img { width: 100%; display: block; } .note-content__image-caption { font-family: var(--font-sans); font-size: 12px; font-weight: 300; color: var(--text-tertiary); margin-top: 12px; text-align: center; } /* Lists */ .note-content ul, .note-content ol { margin: 0 0 28px 24px; } .note-content li { margin-bottom: 8px; } /* --- Footer --- */ .site-footer { margin-top: 56px; padding: 32px 0 48px; font-family: var(--font-sans); font-size: 11px; color: var(--text-muted); letter-spacing: 0.03em; text-align: center; transition: var(--transition); } .site-footer__link { color: var(--text-muted); transition: color 0.2s ease; } .site-footer__link:hover { color: var(--text-tertiary); } /* --- Empty / Loading --- */ .loading { text-align: center; padding: 80px 0; font-family: var(--font-sans); font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; } .empty-state { text-align: center; padding: 80px 0; color: var(--text-tertiary); font-family: var(--font-sans); font-size: 14px; } /* --- Responsive --- */ @media (max-width: 720px) { .site-header { padding: 36px 0 0; margin-bottom: 48px; } .note-header__title { font-size: 26px; } .note-item__title { font-size: 21px; } .note-content { font-size: 18px; line-height: 1.55; } .note-content blockquote, .note-content__quote { font-size: 19px; } .note-content p:first-child::first-letter { font-size: 2.8em; } .container { padding: 0 20px; } }