/* ============================================================
GLOBAL DESIGN SYSTEM v2 — Sacred Nocturne
Цветовая схема: глубокий ночной фон + античное золото + медь
============================================================ */
/* ===== 1. CSS CUSTOM PROPERTIES ===== */
:root {
/* Backgrounds — ночная глубина с тёплым подтоном */
--bg-primary: #080a0e; /* Главный фон: глубокий тёмно-синий, почти чёрный */
--bg-secondary: #0d1117; /* Фон секций: графитово-индиго */
--bg-card: #131921; /* Карточки: угольно-синий */
--bg-elevated: #1a2230; /* Поднятые элементы, hover */
--bg-glass: rgba(19, 25, 33, 0.65);
/* Accents — античные металлы */
--accent-gold: #d4a843; /* Античное золото: тёплое, насыщенное, как старые часы */
--accent-gold-light: #e8c870; /* Светлое золото для градиентов */
--accent-gold-dark: #a67c2e; /* Тёмное золото для теней */
--accent-copper: #b8735a; /* Медно-терракотовый: земной, женственный, глубокий */
--accent-copper-soft: rgba(184, 115, 90, 0.12);
--accent-moon: #7a9a8e; /* Лунный мох: приглушённый, исцеляющий */
/* Text — тёплые жемчужные тона */
--text-primary: #ede8df; /* Основной: тёплый жемчужный белый */
--text-secondary: #a8a29e; /* Вторичный: приглушённый песочно-серый */
--text-muted: #5f5a55; /* Мутный: тёмный хаки */
/* Gradients */
--gradient-hero: linear-gradient(160deg, #080a0e 0%, #0f1620 40%, #140f1a 100%);
--gradient-gold: linear-gradient(135deg, #d4a843 0%, #e8c870 50%, #a67c2e 100%);
--gradient-warm: linear-gradient(135deg, rgba(212,168,67,0.08), rgba(184,115,90,0.05));
--gradient-card: linear-gradient(180deg, rgba(26,34,48,0.95) 0%, rgba(19,25,33,0.98) 100%);
/* Typography */
--font-heading: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* Spacing */
--space-xs: 0.5rem;
--space-sm: 1rem;
--space-md: 2rem;
--space-lg: 4rem;
--space-xl: 6rem;
--space-2xl: 8rem;
/* Radius */
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 28px;
--radius-full: 999px;
/* Shadows — мягкие, как при свете свечи */
--shadow-gold: 0 4px 28px rgba(212, 168, 67, 0.12);
--shadow-gold-strong: 0 8px 40px rgba(212, 168, 67, 0.18);
--shadow-card: 0 12px 40px rgba(0, 0, 0, 0.35);
--shadow-soft: 0 2px 16px rgba(0, 0, 0, 0.25);
--shadow-inner: inset 0 1px 0 rgba(212, 168, 67, 0.06);
}
/* ===== 2. Reset & Base ===== */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: var(--font-body);
background: var(--bg-primary);
color: var(--text-primary);
line-height: 1.7;
font-weight: 300;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: rgba(212, 168, 67, 0.25);
color: var(--text-primary);
}
/* ===== 3. Typography ===== */
h1, h2, h3, h4 {
font-family: var(--font-heading);
font-weight: 400;
line-height: 1.15;
color: var(--text-primary);
text-wrap: balance;
}
h1 {
font-size: clamp(2.8rem, 6.5vw, 5.5rem);
letter-spacing: -0.025em;
}
h2 {
font-size: clamp(1.9rem, 4.2vw, 3.2rem);
letter-spacing: 0.015em;
text-transform: uppercase;
}
h3 {
font-size: clamp(1.25rem, 2.2vw, 1.7rem);
font-weight: 400;
}
p, li {
font-size: clamp(0.95rem, 1.15vw, 1.05rem);
color: var(--text-secondary);
}
a {
color: var(--accent-gold);
text-decoration: none;
transition: color 0.3s ease;
}
a:hover {
color: var(--accent-gold-light);
}
/* ===== 4. Utilities ===== */
.text-gold { color: var(--accent-gold); }
.text-copper { color: var(--accent-copper); }
.text-moon { color: var(--accent-moon); }
.text-muted { color: var(--text-muted); }
/* ===== 5. Buttons — свечение как у горящей свечи ===== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
padding: 1.1rem 2.8rem;
font-family: var(--font-body);
font-size: 0.82rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
text-decoration: none;
border-radius: var(--radius-sm);
transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
border: none;
position: relative;
overflow: hidden;
}
/* Золотая кнопка с внутренним свечением */
.btn-primary {
background: var(--gradient-gold);
color: #080a0e;
box-shadow: var(--shadow-gold);
}
.btn-primary::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(255,255,255,0.15), transparent 60%);
opacity: 0.6;
transition: opacity 0.3s ease;
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-gold-strong);
filter: brightness(1.08);
}
.btn-primary:hover::before {
opacity: 0.9;
}
/* Прозрачная кнопка с медной рамкой */
.btn-outline {
background: transparent;
color: var(--accent-gold);
border: 1.5px solid rgba(212, 168, 67, 0.35);
backdrop-filter: blur(4px);
}
.btn-outline:hover {
background: rgba(212, 168, 67, 0.08);
border-color: var(--accent-gold);
color: var(--accent-gold-light);
transform: translateY(-3px);
}
/* Медная кнопка для второстепенных действий */
.btn-copper {
background: rgba(184, 115, 90, 0.1);
color: var(--accent-copper);
border: 1.5px solid rgba(184, 115, 90, 0.3);
}
.btn-copper:hover {
background: rgba(184, 115, 90, 0.18);
border-color: var(--accent-copper);
transform: translateY(-2px);
}
/* ===== 6. Layout ===== */
.section {
width: 100%;
padding: var(--space-xl) var(--space-md);
position: relative;
overflow: hidden;
}
.container {
max-width: 1180px;
margin: 0 auto;
position: relative;
z-index: 2;
}
/* Заголовок секции — маленький капс */
.label {
display: inline-block;
font-family: var(--font-body);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--accent-gold);
margin-bottom: var(--space-sm);
padding: 0.5rem 1.1rem;
border: 1px solid rgba(212, 168, 67, 0.18);
border-radius: var(--radius-full);
background: rgba(212, 168, 67, 0.04);
}
/* Разделители — тонкие, как волос */
.divider-gold {
width: 70px;
height: 1px;
background: var(--gradient-gold);
margin: var(--space-sm) auto;
opacity: 0.8;
}
.divider-gold-wide {
width: 140px;
height: 1px;
background: var(--gradient-gold);
margin: var(--space-md) auto;
opacity: 0.6;
}
.divider-copper {
width: 60px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--accent-copper), transparent);
margin: var(--space-sm) auto;
}
/* ===== 7. Card — глубокая тень, тёплые края ===== */
.card {
background: var(--gradient-card);
border: 1px solid rgba(212, 168, 67, 0.07);
border-radius: var(--radius-md);
padding: var(--space-md);
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
box-shadow: var(--shadow-soft);
position: relative;
}
.card::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 1px 1px rgba(212, 168, 67, 0.04);
pointer-events: none;
}
.card:hover {
border-color: rgba(212, 168, 67, 0.2);
transform: translateY(-6px);
box-shadow: var(--shadow-card), var(--shadow-gold);
}
/* ===== 8. Glow Effects ===== */
.glow-gold { box-shadow: 0 0 50px rgba(212, 168, 67, 0.09); }
.glow-copper{ box-shadow: 0 0 50px rgba(184, 115, 90, 0.09); }
/* ===== 9. Grain Overlay — тёплый шум плёнки ===== */
.grain::before {
content: "";
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 1;
}
/* ===== 10. Forms (если понадобятся) ===== */
input, textarea {
background: rgba(19, 25, 33, 0.6);
border: 1px solid rgba(212, 168, 67, 0.12);
border-radius: var(--radius-sm);
padding: 0.9rem 1.2rem;
color: var(--text-primary);
font-family: var(--font-body);
font-size: 0.95rem;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
width: 100%;
}
input:focus, textarea:focus {
outline: none;
border-color: rgba(212, 168, 67, 0.35);
box-shadow: 0 0 0 3px rgba(212, 168, 67, 0.06);
}
input::placeholder, textarea::placeholder {
color: var(--text-muted);
}
/* ===== 11. Responsive ===== */
@media (max-width: 768px) {
.section {
padding: var(--space-lg) var(--space-sm);
}
.btn {
padding: 0.95rem 2rem;
font-size: 0.75rem;
letter-spacing: 0.15em;
}
.container {
padding: 0 1.25rem;
}
}
@media (max-width: 480px) {
h1 { font-size: clamp(2.2rem, 8vw, 3rem); }
h2 { font-size: clamp(1.6rem, 6vw, 2.2rem); }
.btn { width: 100%; justify-content: center; }
}