/* ========================================================================= Царство Небесное — colors_and_type.css Две темы: .theme-day (дневная) и .theme-night (ночная, по умолчанию). Подключение: ... ========================================================================= */ /* ---------------- Web fonts (Google Fonts) ---------------- Cinzel — display / акцидент Cormorant Garamond — заголовки Montserrat — тело / UI JetBrains Mono — mono ---------------------------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Montserrat:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap'); :root { /* ---------- Type families ---------- */ --font-display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif; --font-serif: 'Cormorant Garamond', 'Times New Roman', serif; --font-sans: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* ---------- Type scale (1.25 modular) ---------- */ --fs-12: 0.75rem; --fs-14: 0.875rem; --fs-16: 1rem; /* base */ --fs-18: 1.125rem; --fs-22: 1.375rem; --fs-28: 1.75rem; --fs-36: 2.25rem; --fs-48: 3rem; --fs-64: 4rem; --fs-88: 5.5rem; --lh-tight: 1.15; --lh-snug: 1.3; --lh-normal: 1.5; --lh-loose: 1.7; --ls-tight: -0.01em; --ls-normal: 0; --ls-wide: 0.04em; --ls-capital: 0.12em; /* ---------- Spacing scale ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; /* ---------- Radii ---------- */ --radius-0: 0px; /* строгие панели, устав */ --radius-1: 4px; --radius-2: 8px; --radius-3: 12px; --radius-4: 16px; --radius-5: 24px; --radius-full: 999px; /* ---------- Container + breakpoints (informational) ---------- */ --container: 1280px; --container-narrow: 880px; --bp-sm: 480px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ---------- Motion ---------- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 160ms; --dur-base: 220ms; --dur-slow: 400ms; --dur-page: 600ms; /* ---------- Z-index ---------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-modal: 500; --z-toast: 600; /* ---------- Brand gold gradient (shared by both themes) ---------- */ --gold-gradient: linear-gradient(180deg, #8A5A1E 0%, #F2C662 25%, #FFE79A 50%, #F2C662 75%, #8A5A1E 100%); --gold-gradient-h: linear-gradient(90deg, #8A5A1E 0%, #F2C662 25%, #FFE79A 50%, #F2C662 75%, #8A5A1E 100%); /* For text with background-clip: use this instead of the box-fill gradient. Night theme keeps the light cream midpoint for glow on dark bg. Day theme overrides with darker stops so gold text reads on light bg. */ --gold-text-gradient: var(--gold-gradient-h); } /* ========================================================================= THEME: DAY — светлая, бело-голубая, солнечно-золотая ========================================================================= */ .theme-day { /* brand palette (from moodboard) */ --c-fog: #EFF4FF; /* page bg */ --c-sky-light: #DCE5FF; --c-sky: #B5F0FF; --c-sky-deep: #87CEFF; --c-azure: #7FB6FF; --c-azure-deep:#3B6BD6; --c-gold: #F2C662; --c-gold-warm: #FAAF37; --c-gold-soft: #FFE3A2; --c-parchment: #FFF7E4; --c-parchment-deep: #B78D7E; --c-white: #FFFFFF; --c-ink: #0B1B3A; --c-ink-mid: #25325C; --c-ink-soft: #5B6B99; /* ---- semantic surfaces ---- */ --bg: var(--c-fog); --bg-elevated: #FFFFFF; --bg-overlay: rgba(255, 255, 255, 0.75); --bg-sunken: #E3EAF8; /* ---- text ---- */ --fg-1: var(--c-ink); /* primary */ --fg-2: var(--c-ink-mid); /* secondary */ --fg-muted: var(--c-ink-soft); /* meta, captions */ --fg-inverse: #FFFFFF; --fg-on-gold: #2A1A05; --fg-link: var(--c-azure-deep); --fg-link-hover: #1E4FB5; /* ---- accent (gold is the only warm accent) ---- */ --accent: var(--c-gold-warm); --accent-soft: var(--c-gold-soft); --accent-ink: #6B4410; /* ---- borders ---- */ --border-1: rgba(11, 27, 58, 0.12); --border-2: rgba(11, 27, 58, 0.22); --border-gold: rgba(250, 175, 55, 0.55); --border-gold-strong: #D9A23E; /* ---- semantic ---- */ --success: #2E9E6A; --warning: #E8A02F; --danger: #C24545; --info: var(--c-azure-deep); /* fallback под аватарки (когда картинка ещё/не загрузилась) */ --avatar-bg: var(--c-sky-light); /* ---- shadows ---- */ --shadow-1: 0 1px 2px rgba(11, 27, 58, 0.08), 0 1px 1px rgba(11, 27, 58, 0.04); --shadow-2: 0 6px 20px rgba(11, 27, 58, 0.10), 0 2px 6px rgba(11, 27, 58, 0.06); --shadow-3: 0 20px 60px rgba(11, 27, 58, 0.20), 0 8px 20px rgba(11, 27, 58, 0.10); --glow-gold: 0 0 24px rgba(250, 175, 55, 0.35); --inner-gold: inset 0 0 0 1px rgba(250, 175, 55, 0.45); /* ---- hero gradients ---- */ --hero-veil: linear-gradient(180deg, rgba(239,244,255,0) 0%, rgba(239,244,255,0.6) 70%, var(--c-fog) 100%); --hero-sheen: radial-gradient(ellipse at top, rgba(255, 231, 154, 0.45) 0%, rgba(255,231,154,0) 60%); /* Darker bronze-gold gradient for text-on-light-bg */ --gold-text-gradient: linear-gradient(90deg, #6B4410 0%, #A07020 28%, #C69028 50%, #A07020 72%, #6B4410 100%); color-scheme: light; } /* ========================================================================= THEME: NIGHT — тёмная, глубокий синий, космос, луна, золото ========================================================================= */ .theme-night { --c-abyss: #081424; /* page bg */ --c-deep: #0E103A; --c-indigo: #1531BC; --c-cerulean: #1362A6; --c-laser: #2FABFF; --c-moon: #D9E8FF; --c-gold: #FAAF37; --c-gold-light:#F2C662; --c-gold-soft: #FFE79A; --c-white: #FFFFFF; --c-ink: #EAF0FF; --bg: var(--c-abyss); --bg-elevated: #0F1D38; --bg-overlay: rgba(11, 22, 44, 0.72); --bg-sunken: #050C17; --fg-1: #F3F6FF; --fg-2: #BCC7DE; --fg-muted: #7E8CAE; --fg-inverse: #0B1B3A; --fg-on-gold: #2A1A05; --fg-link: var(--c-laser); --fg-link-hover: var(--c-gold-light); --accent: var(--c-gold); --accent-soft: var(--c-gold-soft); --accent-ink: #3D2607; --border-1: rgba(255, 255, 255, 0.08); --border-2: rgba(255, 255, 255, 0.16); --border-gold: rgba(250, 175, 55, 0.45); --border-gold-strong: #C98A22; --success: #38C58A; --warning: #F2C662; --danger: #E26565; --info: var(--c-laser); /* fallback под аватарки (когда картинка ещё/не загрузилась) */ --avatar-bg: var(--c-deep); --shadow-1: 0 2px 4px rgba(0, 0, 0, 0.35); --shadow-2: 0 8px 28px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30); --shadow-3: 0 24px 80px rgba(0, 0, 0, 0.65), 0 12px 24px rgba(0, 0, 0, 0.45); --glow-gold: 0 0 28px rgba(250, 175, 55, 0.45); --glow-blue: 0 0 36px rgba(47, 171, 255, 0.45); --inner-gold: inset 0 0 0 1px rgba(250, 175, 55, 0.40); --hero-veil: linear-gradient(180deg, rgba(8,20,36,0) 0%, rgba(8,20,36,0.65) 70%, var(--c-abyss) 100%); --hero-sheen: radial-gradient(ellipse at top, rgba(47, 171, 255, 0.25) 0%, rgba(47,171,255,0) 60%); color-scheme: dark; } /* ========================================================================= BASE ELEMENTS ========================================================================= */ body { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg-1); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ----- Headings ----- */ h1, .h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-48); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--fg-1); margin: 0 0 var(--space-5); } h2, .h2 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-36); line-height: var(--lh-tight); color: var(--fg-1); margin: 0 0 var(--space-4); } h3, .h3 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-22); line-height: var(--lh-snug); color: var(--fg-1); margin: 0 0 var(--space-3); } h4, .h4 { font-family: var(--font-serif); font-weight: 600; font-size: var(--fs-22); line-height: var(--lh-snug); color: var(--fg-1); margin: 0 0 var(--space-3); } h5, .h5 { font-family: var(--font-sans); font-weight: 600; font-size: var(--fs-16); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-2); margin: 0 0 var(--space-2); } /* ----- Display (hero) ----- */ .display { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-88); line-height: 1.05; letter-spacing: var(--ls-tight); } /* ----- Eyebrow / meta label ----- */ .eyebrow { font-family: var(--font-sans); font-size: var(--fs-12); font-weight: 600; letter-spacing: var(--ls-capital); text-transform: uppercase; color: var(--fg-muted); } /* ----- Paragraphs ----- */ p { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-normal); color: var(--fg-2); margin: 0 0 var(--space-4); text-wrap: pretty; } .lead { font-family: var(--font-serif); font-style: italic; font-size: var(--fs-22); line-height: var(--lh-snug); color: var(--fg-1); } small, .small { font-size: var(--fs-14); color: var(--fg-muted); } /* ----- Links ----- */ a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-base) var(--ease); } a:hover { color: var(--fg-link-hover); text-decoration: underline; text-underline-offset: 3px; } /* ----- Code ----- */ code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; padding: 2px 6px; border-radius: var(--radius-1); background: var(--bg-sunken); color: var(--fg-1); border: 1px solid var(--border-1); } /* ----- Gold text (accent headline, CTA label) ----- */ .gold-text { background: var(--gold-gradient-h); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ----- HR / ornament divider ----- */ hr { border: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--border-gold), transparent); margin: var(--space-6) 0; } /* ----- Focus ring (accessibility — always gold) ----- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-1); }