body {
font-family: ‘Cormorant Garamond’, serif;
background: var(–ivory);
color: var(–ink);
overflow-x: hidden;
line-height: 1.6;
}
/* ===== ANIMATION OVERLAY (открытие конверта) ===== */
.intro-overlay {
position: fixed;
inset: 0;
background: var(–ivory-warm);
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
cursor: pointer;
transition: opacity 1.2s ease, visibility 1.2s ease;
}
.intro-overlay.hidden { opacity: 0; visibility: hidden; }
.envelope {
width: 280px;
height: 200px;
position: relative;
background: var(–ivory);
border: 1px solid var(–gold);
box-shadow: 0 20px 60px rgba(160, 132, 66, 0.2);
transition: transform 0.6s ease;
}
.envelope::before {
content: ‘’;
position: absolute;
inset: 0;
background: linear-gradient(135deg, transparent 49.5%, var(–gold) 49.5%, var(–gold) 50.5%, transparent 50.5%),
linear-gradient(45deg, transparent 49.5%, var(–gold) 49.5%, var(–gold) 50.5%, transparent 50.5%);
opacity: 0.3;
}
.envelope-seal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60px;
height: 60px;
background: var(–gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: ‘Italiana’, serif;
color: var(–ivory);
font-size: 28px;
box-shadow: 0 4px 12px rgba(160, 132, 66, 0.4);
}
.intro-text {
margin-top: 32px;
font-family: ‘Italiana’, serif;
color: var(–ink-soft);
font-size: 14px;
letter-spacing: 4px;
text-transform: uppercase;
animation: pulse 2s ease infinite;
}
@keyframes pulse {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}
.intro-overlay:hover .envelope { transform: scale(1.05) rotate(-2deg); }
/* ===== ORNAMENTAL DIVIDER ===== */
.ornament {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
margin: 40px auto;
max-width: 300px;
}
.ornament-line {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(–gold), transparent);
}
.ornament-symbol {
color: var(–gold);
font-family: ‘Italiana’, serif;
font-size: 20px;
}
/* ===== HERO ===== */
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: 80px 24px;
position: relative;
background:
radial-gradient(ellipse at top, var(–cream) 0%, transparent 60%),
radial-gradient(ellipse at bottom, var(–ivory-warm) 0%, var(–ivory) 70%);
}
.hero::before, .hero::after {
content: ‘’;
position: absolute;
width: 200px;
height: 200px;
border: 1px solid var(–gold);
opacity: 0.2;
}
.hero::before {
top: 40px; left: 40px;
border-right: none; border-bottom: none;
}
.hero::after {
bottom: 40px; right: 40px;
border-left: none; border-top: none;
}
.hero-content { max-width: 600px; opacity: 0; animation: fadeUp 1.4s 0.4s ease forwards; }
@keyframes fadeUp {
from { opacity: 0; transform: translateY(30px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-label {
font-family: ‘Italiana’, serif;
letter-spacing: 8px;
font-size: 13px;
color: var(–gold-dark);
text-transform: uppercase;
margin-bottom: 32px;
}
.hero-name {
font-family: ‘Italiana’, serif;
font-size: clamp(56px, 12vw, 120px);
line-height: 1;
color: var(–ink);
margin-bottom: 24px;
font-weight: 400;
}
.hero-italic {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-size: clamp(20px, 3vw, 28px);
color: var(–ink-soft);
margin-bottom: 40px;
}
.hero-date {
font-family: ‘Marcellus’, serif;
font-size: 18px;
letter-spacing: 6px;
color: var(–gold-dark);
padding: 16px 32px;
border-top: 1px solid var(–gold);
border-bottom: 1px solid var(–gold);
display: inline-block;
}
/* ===== SECTION BASE ===== */
section { padding: 100px 24px; position: relative; }
.container { max-width: 720px; margin: 0 auto; text-align: center; }
.section-label {
font-family: ‘Italiana’, serif;
letter-spacing: 6px;
font-size: 12px;
color: var(–gold-dark);
text-transform: uppercase;
margin-bottom: 16px;
}
.section-title {
font-family: ‘Italiana’, serif;
font-size: clamp(36px, 6vw, 56px);
color: var(–ink);
margin-bottom: 32px;
line-height: 1.2;
}
/* ===== ҚҰРМЕТТІ ҚОНАҚ ===== */
.greeting { background: var(–ivory); }
.greeting-text {
font-family: ‘Cormorant Garamond’, serif;
font-size: 22px;
font-style: italic;
color: var(–ink-soft);
line-height: 1.8;
max-width: 560px;
margin: 0 auto;
}
/* ===== АТА-АНА ===== */
.parents { background: var(–ivory-warm); }
.parents-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: center;
margin-top: 40px;
}
.parent-side {
font-family: ‘Cormorant Garamond’, serif;
}
.parent-label {
font-family: ‘Italiana’, serif;
font-size: 12px;
letter-spacing: 4px;
color: var(–gold-dark);
text-transform: uppercase;
margin-bottom: 12px;
}
.parent-names {
font-size: 22px;
color: var(–ink);
line-height: 1.5;
}
.parents-divider {
width: 1px;
height: 80px;
background: var(–gold);
position: relative;
}
.parents-divider::before {
content: ‘◆’;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: var(–ivory-warm);
color: var(–gold);
padding: 4px;
font-size: 10px;
}
/* ===== СЧЁТЧИК ===== */
.countdown { background: var(–ink); color: var(–ivory); }
.countdown .section-title { color: var(–ivory); }
.countdown .section-label { color: var(–gold-light); }
.countdown-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
max-width: 600px;
margin: 40px auto 0;
}
.countdown-item {
padding: 24px 8px;
border: 1px solid var(–gold);
position: relative;
}
.countdown-item::before, .countdown-item::after {
content: ‘’;
position: absolute;
width: 12px; height: 12px;
border: 1px solid var(–gold);
}
.countdown-item::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.countdown-item::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.countdown-num {
font-family: ‘Italiana’, serif;
font-size: clamp(32px, 6vw, 48px);
color: var(–gold-light);
display: block;
line-height: 1;
}
.countdown-label {
font-family: ‘Cormorant Garamond’, serif;
font-size: 13px;
letter-spacing: 2px;
text-transform: uppercase;
margin-top: 8px;
opacity: 0.7;
}
/* ===== ПРОГРАММА ===== */
.program { background: var(–ivory); }
.program-list {
margin-top: 40px;
text-align: left;
}
.program-item {
display: grid;
grid-template-columns: 100px 1fr;
gap: 32px;
padding: 28px 0;
border-bottom: 1px solid rgba(201, 169, 97, 0.3);
align-items: center;
}
.program-item:last-child { border-bottom: none; }
.program-time {
font-family: ‘Italiana’, serif;
font-size: 24px;
color: var(–gold-dark);
}
.program-title {
font-family: ‘Marcellus’, serif;
font-size: 20px;
color: var(–ink);
margin-bottom: 4px;
}
.program-desc {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
color: var(–ink-soft);
font-size: 16px;
}
/* ===== ЛОКАЦИЯ ===== */
.location { background: var(–ivory-warm); }
.location-name {
font-family: ‘Marcellus’, serif;
font-size: 28px;
color: var(–ink);
margin-bottom: 8px;
}
.location-address {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
color: var(–ink-soft);
font-size: 18px;
margin-bottom: 32px;
}
.location-map {
width: 100%;
height: 320px;
background: var(–cream);
border: 1px solid var(–gold);
margin-bottom: 24px;
display: flex;
align-items: center;
justify-content: center;
color: var(–ink-soft);
font-style: italic;
}
.location-button {
display: inline-block;
padding: 14px 36px;
background: transparent;
color: var(–ink);
border: 1px solid var(–gold);
font-family: ‘Italiana’, serif;
letter-spacing: 4px;
font-size: 13px;
text-transform: uppercase;
text-decoration: none;
transition: all 0.3s ease;
}
.location-button:hover {
background: var(–gold);
color: var(–ivory);
}
/* ===== РАССАДКА ===== */
.seating { background: var(–ivory); }
.seating-search {
margin-top: 32px;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.seating-input {
width: 100%;
padding: 16px 20px;
background: transparent;
border: 1px solid var(–gold);
font-family: ‘Cormorant Garamond’, serif;
font-size: 18px;
color: var(–ink);
text-align: center;
outline: none;
transition: border-color 0.3s ease;
}
.seating-input:focus { border-color: var(–gold-dark); }
.seating-input::placeholder { color: var(–ink-soft); font-style: italic; }
.seating-result {
margin-top: 24px;
padding: 24px;
background: var(–ivory-warm);
border: 1px solid var(–gold);
display: none;
font-family: ‘Cormorant Garamond’, serif;
}
.seating-result.show { display: block; }
.seating-result-name {
font-family: ‘Marcellus’, serif;
font-size: 22px;
color: var(–ink);
margin-bottom: 8px;
}
.seating-result-table {
font-family: ‘Italiana’, serif;
font-size: 32px;
color: var(–gold-dark);
letter-spacing: 4px;
}
.seating-not-found {
color: var(–ink-soft);
font-style: italic;
}
/* ===== ДРЕСС-КОД ===== */
.dresscode { background: var(–ivory-warm); }
.dresscode-colors {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 32px;
flex-wrap: wrap;
}
.dresscode-color {
width: 80px;
text-align: center;
}
.dresscode-circle {
width: 80px;
height: 80px;
border-radius: 50%;
border: 1px solid var(–gold);
margin-bottom: 12px;
}
.dresscode-name {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-size: 14px;
color: var(–ink-soft);
}
/* ===== RSVP ===== */
.rsvp { background: var(–ink); color: var(–ivory); }
.rsvp .section-title { color: var(–ivory); }
.rsvp .section-label { color: var(–gold-light); }
.rsvp-text {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-size: 18px;
opacity: 0.85;
margin-bottom: 40px;
}
.rsvp-form {
max-width: 480px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 16px;
}
.rsvp-input, .rsvp-select {
padding: 16px 20px;
background: transparent;
border: 1px solid var(–gold);
color: var(–ivory);
font-family: ‘Cormorant Garamond’, serif;
font-size: 17px;
outline: none;
}
.rsvp-input::placeholder { color: rgba(250, 246, 238, 0.5); font-style: italic; }
.rsvp-select option { background: var(–ink); color: var(–ivory); }
.rsvp-button {
padding: 18px;
background: var(–gold);
color: var(–ink);
border: none;
font-family: ‘Italiana’, serif;
letter-spacing: 4px;
font-size: 14px;
text-transform: uppercase;
cursor: pointer;
margin-top: 8px;
transition: background 0.3s ease;
}
.rsvp-button:hover { background: var(–gold-light); }
.rsvp-success {
display: none;
text-align: center;
padding: 32px;
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
font-size: 20px;
color: var(–gold-light);
}
.rsvp-success.show { display: block; }
/* ===== FOOTER ===== */
footer {
padding: 60px 24px;
text-align: center;
background: var(–ivory);
}
.footer-symbol {
font-family: ‘Italiana’, serif;
font-size: 24px;
color: var(–gold);
margin-bottom: 16px;
}
.footer-text {
font-family: ‘Cormorant Garamond’, serif;
font-style: italic;
color: var(–ink-soft);
}
/* ===== АДАПТИВ ===== */
@media (max-width: 640px) {
section { padding: 70px 20px; }
.parents-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.parents-divider {
width: 80px;
height: 1px;
margin: 0 auto;
background: var(–gold);
}
.parents-divider::before { display: none; }
.countdown-grid {
grid-template-columns: repeat(2, 1fr);
}
.program-item {
grid-template-columns: 80px 1fr;
gap: 16px;
}
.program-time { font-size: 20px; }
.hero::before, .hero::after {
width: 100px; height: 100px;
}
}
/* Музыка */
.music-toggle {
position: fixed;
bottom: 24px;
right: 24px;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(–gold);
color: var(–ivory);
border: none;
cursor: pointer;
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
box-shadow: 0 4px 16px rgba(160, 132, 66, 0.4);
transition: transform 0.3s ease;
}
.music-toggle:hover { transform: scale(1.1); }
Шақыруды ашу үшін басыңыз
Ұзату тойы
Айгерім
құрметті қонақтарды күтеді
15 · ҚЫРКҮЙЕК · 2026
Қайырлы күн
◈
Қымбатты туыстар мен достар!
Қызымыздың өміріндегі ең әдемі күнді
сіздермен бірге тойлауға шақырамыз.
Той бағдарламасы
Күн тәртібі
17:00
Қонақтарды қарсы алу
Welcome-аймақ, фотосессия
18:00
Той бастау
Дастархан, құттықтаулар
20:00
Концерттік бағдарлама
Әртістер мен билер
22:00
Қыз ұзату салты
Дәстүрлі рәсім
Өткізілетін орын
Той мекенжайы
«Алтын Орда» мейрамханасы
Алматы қ., Достық даңғ. 240
[ Картаны Tilda-да 2GIS немесе Google Maps блогімен ауыстырыңыз ]
Жол сілтеу Қонақ орны
Үстел іздеу
Атыңызды енгізіп, өз үстеліңізді табыңыз
Dress code
Киім үлгісі
Кешіміздің әсемдігін сақтау үшін келесі түстерді ұсынамыз
Растау
Сізді күтеміз
Қатысуыңызды растауыңызды сұраймыз
Рақмет! Жауабыңыз қабылданды ◈
