/* ============================================================ LAB412 Whitepapers — Visual System Mission control aesthetic. Cold, precise, unhurried. ============================================================ */ /* 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; } } /* --- CSS Variables / Theme System --- */ /* Matched to LAB412 site palette (v13) */ :root { /* Dark theme (default) — matches site obsidian/midnight */ --bg-primary: #0A0E14; --bg-secondary: #101A2B; --bg-tertiary: #13233B; --bg-card: #0D1219; --bg-card-hover: #111926; --text-primary: #E8EDF3; --text-secondary: rgba(199, 209, 221, 0.55); --text-tertiary: rgba(199, 209, 221, 0.35); --text-muted: rgba(199, 209, 221, 0.22); --border-primary: rgba(199, 209, 221, 0.10); --border-secondary: rgba(199, 209, 221, 0.18); --accent: #5E7FA6; --accent-dim: rgba(94, 127, 166, 0.25); --font-mono: "JetBrains Mono", "SF Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --transition-theme: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease; } /* Light reading mode — cool paper, easy on the eyes */ [data-theme="light"] { --bg-primary: #F8FBFF; --bg-secondary: #F0F3F8; --bg-tertiary: #E6EBF2; --bg-card: #FFFFFF; --bg-card-hover: #F5F8FC; --text-primary: #1A2030; --text-secondary: rgba(26, 32, 48, 0.55); --text-tertiary: rgba(26, 32, 48, 0.35); --text-muted: rgba(26, 32, 48, 0.20); --border-primary: rgba(26, 32, 48, 0.10); --border-secondary: rgba(26, 32, 48, 0.16); --accent: #4A6B8A; --accent-dim: rgba(74, 107, 138, 0.15); } /* --- 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-sans); background-color: var(--bg-primary); color: var(--text-primary); line-height: 1.7; transition: var(--transition-theme); min-height: 100vh; } a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; } a:hover { color: var(--text-primary); } /* --- Layout --- */ .container { max-width: 880px; margin: 0 auto; padding: 0 32px; } .container--wide { max-width: 960px; } /* --- Header / Nav --- */ .site-header { padding: 48px 0 0; margin-bottom: 72px; } .site-header__inner { display: flex; justify-content: space-between; align-items: baseline; } .site-logo { font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; } .site-logo__lab { color: var(--text-secondary); transition: color 0.2s ease; } .site-logo__lab:hover { color: var(--text-primary); } .site-logo__section { color: var(--text-tertiary); font-weight: 300; transition: color 0.2s ease; } .site-logo__section:hover { color: var(--text-secondary); } /* When hovering WHITEPAPERS, also highlight LAB412 */ .site-logo:has(.site-logo__section:hover) .site-logo__lab { color: var(--text-primary); } .site-nav { display: flex; align-items: center; gap: 20px; } /* --- Theme Toggle --- */ .theme-toggle { background: none; border: none; color: var(--text-secondary); /* тёмная тема (default): яркость как у логотипа LAB412 */ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; padding: 0; cursor: pointer; transition: var(--transition-theme), color 0.2s ease; border-radius: 0; position: relative; overflow: hidden; } /* светлая тема — переключатель остаётся приглушённым */ [data-theme="light"] .theme-toggle { color: var(--text-muted); } /* Shimmer hint animation */ .theme-toggle::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; 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% ); pointer-events: none; opacity: 0; } .theme-toggle.shimmer::after { opacity: 1; animation: shimmer-pass 1.2s ease-in-out; } @keyframes shimmer-pass { 0% { left: -100%; } 100% { left: 100%; } } .theme-toggle:hover { color: var(--text-secondary); border-color: var(--border-secondary); } /* --- Page Title Area --- */ .page-title { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-tertiary); margin-bottom: 48px; padding-bottom: 16px; border-bottom: 1px solid var(--border-primary); } /* --- List Header --- */ .wp-list-header { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-tertiary); opacity: 0.7; margin-bottom: 0; } /* --- Whitepaper List --- */ .wp-list { list-style: none; } .wp-item:first-child { padding-top: 20px; } .wp-item { padding: 40px 0; transition: var(--transition-theme); } .wp-item__link { display: flex; flex-direction: column; } .wp-item__title { order: -2; } .wp-item__snippet { order: -1; } .wp-item__meta { order: 0; } .wp-item__link:hover .wp-item__title { color: var(--text-primary); } .wp-item__link:hover .wp-item__meta, .wp-item__link:hover .wp-item__tag { color: var(--text-secondary); } .wp-item__link:hover .wp-item__snippet { color: var(--text-primary); } .wp-item__meta { display: flex; align-items: center; gap: 18px; margin-bottom: 0; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); transition: color 0.3s ease; } .wp-item__tag { color: var(--text-secondary); transition: color 0.35s ease; } .wp-item__tag::before { content: '·'; margin-right: 4px; } .wp-item__tag:first-child::before { display: none; } .wp-item__title { font-family: var(--font-sans); font-size: 20px; font-weight: 400; color: var(--text-primary); margin-bottom: 10px; line-height: 1.4; transition: var(--transition-theme), color 0.45s ease; } .wp-item__snippet { font-size: 14.5px; color: var(--text-secondary); line-height: 1.65; margin-bottom: 10px; transition: color 0.3s ease; } /* --- Single Whitepaper --- */ .wp-header { margin-bottom: 64px; } .wp-header__back { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-tertiary); display: inline-block; margin-bottom: 40px; transition: color 0.2s ease; } .wp-header__back:hover { color: var(--text-secondary); } .wp-header__back::before { content: '←'; margin-right: 6px; } .wp-header__title { font-family: var(--font-sans); font-size: 32px; font-weight: 400; line-height: 1.3; color: var(--text-primary); margin-bottom: 14px; transition: var(--transition-theme); } .wp-header__subtitle { font-size: 17px; color: var(--text-secondary); margin-bottom: 24px; line-height: 1.6; } .wp-header__meta { display: flex; flex-wrap: wrap; gap: 12px 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--text-tertiary); padding-top: 20px; border-top: 1px solid var(--border-primary); } .wp-header__meta-item { display: flex; align-items: center; gap: 6px; } .wp-header__meta-label { color: var(--text-muted); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; } /* --- Content Renderer --- */ .wp-content { font-size: 16px; line-height: 1.8; max-width: 720px; color: var(--text-primary); transition: var(--transition-theme); } .wp-content h2 { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); margin: 56px 0 24px; padding-bottom: 8px; border-bottom: 1px solid var(--border-primary); } .wp-content h3 { font-size: 17px; font-weight: 500; color: var(--text-primary); margin: 36px 0 14px; } .wp-content p { margin-bottom: 24px; color: var(--text-primary); } .wp-content strong, .wp-content b { font-weight: 500; } .wp-content em, .wp-content i { font-style: italic; color: var(--text-secondary); } .wp-content a { color: var(--text-secondary); border-bottom: 1px solid var(--border-secondary); transition: color 0.2s, border-color 0.2s; } .wp-content a:hover { color: var(--text-primary); border-color: var(--text-tertiary); } /* Image block */ .wp-content__image { margin: 36px 0; } .wp-content__image img { width: 100%; display: block; border: 1px solid var(--border-primary); transition: var(--transition-theme); } .wp-content__image-caption { font-family: var(--font-mono); font-size: 12px; color: var(--text-tertiary); margin-top: 10px; letter-spacing: 0.02em; } /* Quote / Insight block */ .wp-content__quote { border-left: 2px solid var(--border-secondary); padding: 20px 24px; margin: 32px 0; background: var(--bg-secondary); transition: var(--transition-theme); } .wp-content__quote p { font-size: 15px; color: var(--text-secondary); margin: 0; font-style: italic; } .wp-content__quote cite { display: block; margin-top: 10px; font-family: var(--font-mono); font-size: 11px; font-style: normal; color: var(--text-tertiary); letter-spacing: 0.02em; } .wp-content__quote cite::before { content: '— '; } /* Delimiter */ .wp-content__delimiter { text-align: center; margin: 48px 0; color: var(--text-muted); font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.5em; } /* List inside content */ .wp-content ul, .wp-content ol { margin: 0 0 20px 24px; } .wp-content li { margin-bottom: 8px; } /* --- Footer --- */ /* нота после последнего кейса — шрифт как у футера, с отступом от списка */ .wp-outro { margin-top: 110px; font-family: var(--font-mono); font-size: 11px; line-height: 1.6; color: var(--text-muted); letter-spacing: 0.04em; text-align: center; transition: var(--transition-theme); } .site-footer { margin-top: 56px; padding: 40px 0; font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); letter-spacing: 0.04em; text-align: center; transition: var(--transition-theme); } .site-footer__link { color: var(--text-muted); transition: color 0.2s ease; } .site-footer__link:hover { color: var(--text-tertiary); } /* --- Loading State --- */ .loading { text-align: center; padding: 80px 0; font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: 0.06em; } /* --- Empty State --- */ .empty-state { text-align: center; padding: 80px 0; color: var(--text-tertiary); font-size: 14px; } /* --- Status Badges --- */ .status-badge { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 2px 8px; border: 1px solid var(--border-primary); color: var(--text-tertiary); } .status-badge--ongoing { border-color: var(--accent-dim); color: var(--accent); } /* --- Responsive --- */ @media (max-width: 640px) { .site-header { padding: 32px 0 0; margin-bottom: 40px; } .wp-header__title { font-size: 24px; } .container { padding: 0 20px; } .wp-content { font-size: 15px; } }