/* ===== Светлая Память — цифровой мемориал ===== Тема: «СВЕТЛАЯ ЧЁРНАЯ» — тёплый айвори/пергамент фон + чернильно-чёрный акцент. Светлая тема по умолчанию (:root), тёмная — html.dark (единый переключатель в шапке). Акцент — ink/графит (НЕ золото). Тёплая сепия — только тонким штрихом. Шрифты: EB Garamond (заголовки) + Nunito Sans (текст), подключаются в . */ :root{ --bg:#f7f2e8; /* тёплый пергамент */ --bg-card:#fffdf8; /* карточка */ --bg-alt:#f0eadd; /* чередующиеся секции */ --ink:#1f1b16; /* основной текст — тёплый почти-чёрный */ --ink-soft:#6b6259; /* приглушённый тёплый */ --line:#e6ddcd; /* границы/линии */ --accent:#211d18; /* чернильно-чёрный акцент (кнопки, активное) */ --accent-soft:#3a332b; /* ink на ховере */ --on-accent:#f7f2e8; /* текст на тёмной заливке */ --gold:#211d18; /* ALIAS акцента — ink (var(--gold) в разметке = чернила) */ --gold-dark:#8a7250; /* тёплая сепия — тонкие мелкие акценты (eyebrow, годы, роли) */ --green:#5a7a5a; /* мягкий сейдж для «галочек»/преимуществ */ --head-bg:rgba(247,242,232,.86); --shadow:0 8px 30px rgba(60,50,35,.10); --shadow-soft:0 4px 18px rgba(60,50,35,.07); --serif:'EB Garamond',Georgia,'Times New Roman',serif; --sans:'Nunito Sans','Segoe UI',system-ui,-apple-system,Roboto,Arial,sans-serif; --maxw:1160px; } /* ===== ТЁМНАЯ ТЕМА — элегантный тёплый уголь ===== */ html.dark{ --bg:#16140f; --bg-card:#201d17; --bg-alt:#1b1813; --ink:#efe9dd; --ink-soft:#b3a994; --line:#33302a; --accent:#ecdfc6; /* в тёмной теме акцент инвертируется в тёплый светлый */ --accent-soft:#d8c8a6; --on-accent:#1f1b16; /* тёмный текст на светлой заливке */ --gold:#ecdfc6; --gold-dark:#caa46a; /* тёплая сепия чуть ярче для читаемости на тёмном */ --green:#9ab98f; --head-bg:rgba(22,20,15,.86); --shadow:0 10px 34px rgba(0,0,0,.5); --shadow-soft:0 6px 22px rgba(0,0,0,.4); } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--sans);line-height:1.7;font-size:17px; transition:background .35s ease,color .35s ease; -webkit-font-smoothing:antialiased; } h1,h2,h3,.serif{font-family:var(--serif);font-weight:600;letter-spacing:.1px;color:var(--ink)} h1{font-size:clamp(2.2rem,5vw,3.7rem);line-height:1.12;margin:0 0 .35em} h2{font-size:clamp(1.6rem,3.2vw,2.5rem);line-height:1.2;margin:0 0 .55em} h3{font-size:1.3rem;margin:0 0 .4em} p{margin:0 0 1em;color:var(--ink-soft)} a{color:var(--accent-soft);text-decoration:none} em,.accent-word{font-style:italic;color:var(--gold-dark)} /* «навсегда» — тёплый курсив */ img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px} .eyebrow{text-transform:uppercase;letter-spacing:3px;font-size:.72rem; color:var(--gold-dark);font-weight:700;margin-bottom:.7em;display:block} .center{text-align:center} .muted{color:var(--ink-soft)} .lead{max-width:700px;margin:0 auto 42px;font-size:1.08rem} /* ===== HEADER ===== */ .site-head{position:sticky;top:0;z-index:30;background:var(--head-bg); backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .site-head .wrap{display:flex;align-items:center;gap:22px;height:70px} .brand{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--ink); display:flex;align-items:center;gap:9px} .brand .flame{font-size:1.15rem;filter:saturate(.9)} .nav{display:flex;gap:22px;margin-left:auto;align-items:center} .nav a{color:var(--ink-soft);font-size:.96rem;transition:color .15s} .nav a:hover{color:var(--ink)} /* переключатель тем в шапке (солнце/луна) */ .theme-toggle{width:40px;height:40px;border-radius:50%;border:1px solid var(--line); background:var(--bg-card);color:var(--ink);cursor:pointer;font-size:1.05rem;line-height:1; display:inline-flex;align-items:center;justify-content:center;transition:.18s;flex:0 0 auto} .theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)} .theme-toggle .i-sun{display:none} .theme-toggle .i-moon{display:inline} html.dark .theme-toggle .i-sun{display:inline} html.dark .theme-toggle .i-moon{display:none} /* старый плавающий переключатель (легаси) — скрыт, заменён шапочным */ .theme-switch{display:none !important} /* ===== BUTTONS ===== */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; padding:13px 26px;border-radius:8px;font-weight:700;font-family:var(--sans); font-size:1rem;cursor:pointer;border:1px solid transparent;transition:.16s;text-align:center} .btn-gold{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-soft)} .btn-gold:hover{background:var(--accent-soft);transform:translateY(-2px);box-shadow:var(--shadow)} .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink)} .btn-ghost:hover{border-color:var(--accent);background:rgba(0,0,0,.02)} html.dark .btn-ghost:hover{background:rgba(255,255,255,.04)} .btn-lg{padding:16px 34px;font-size:1.08rem} /* ===== HERO ===== */ .hero{padding:84px 0 76px;position:relative;overflow:hidden; background: radial-gradient(1100px 520px at 16% -10%, #fffdf8 0%, rgba(255,253,248,0) 60%), radial-gradient(900px 600px at 100% 0%, #efe7d6 0%, rgba(239,231,214,0) 55%), linear-gradient(180deg,#f5f0e6,var(--bg))} html.dark .hero{ background: radial-gradient(1000px 520px at 16% -10%, #221e16 0%, rgba(34,30,22,0) 60%), radial-gradient(900px 600px at 100% 0%, #1d1a13 0%, rgba(29,26,19,0) 55%), linear-gradient(180deg,#1a1711,var(--bg))} .hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--line)} .hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center;position:relative;z-index:1} .hero h1{margin-bottom:.25em} .hero p{font-size:1.12rem;max-width:30em} .hero-buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px} .hero-list{list-style:none;padding:0;margin:24px 0 0} .hero-list li{padding:7px 0 7px 30px;position:relative;color:var(--ink)} .hero-list li::before{content:"✦";position:absolute;left:0;color:var(--gold-dark)} /* hero media — крупное реалистичное фото памятника с QR + мини-телефон со страницей памяти */ .hero-media{position:relative;width:100%;max-width:520px;margin:0 auto} .hero-photo{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px; border:1px solid var(--line);box-shadow:0 26px 70px rgba(60,45,25,.28)} html.dark .hero-photo{box-shadow:0 26px 70px rgba(0,0,0,.55)} .hero-photo-ph{width:100%;aspect-ratio:4/5;border-radius:18px;border:1px solid var(--line); background:linear-gradient(160deg,#efe7d6,#d8ccb4);display:flex;align-items:center;justify-content:center; color:#8a7250;font-family:var(--serif);font-style:italic;text-align:center;padding:24px} .hero-cap{position:absolute;left:16px;bottom:16px;right:16px; background:rgba(247,242,232,.92);backdrop-filter:blur(6px);border:1px solid var(--line); border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:12px;box-shadow:var(--shadow-soft)} html.dark .hero-cap{background:rgba(22,20,15,.9)} .hero-cap .qr{width:46px;height:46px;flex:0 0 auto;border-radius:8px;background:#fff;border:1px solid var(--line);padding:5px} .hero-cap .qr svg{width:100%;height:100%;display:block} .hero-cap .t{font-size:.86rem;line-height:1.4;color:var(--ink)} .hero-cap .t b{font-family:var(--serif)} /* мини-телефон-мокап (используется на лендинге и как превью) */ .phone{position:relative;width:230px;margin:0 auto;background:#1f1e1c;border-radius:32px; padding:11px;box-shadow:0 22px 60px rgba(60,45,25,.28);border:1px solid #34322e} .phone::before{content:"";position:absolute;top:16px;left:50%;transform:translateX(-50%); width:58px;height:6px;border-radius:6px;background:#3a3833;z-index:2} .phone-screen{background:var(--bg-card);border-radius:22px;overflow:hidden;text-align:center} .phone-top{background:linear-gradient(160deg,#2c2a26,#403b34);color:#f3efe7;padding:30px 16px 20px} .phone-top .portrait{width:78px;height:78px;border-radius:50%;margin:0 auto 11px; border:3px solid rgba(255,255,255,.25);background:linear-gradient(135deg,#ded3c0,#b59a72); display:flex;align-items:center;justify-content:center;font-family:var(--serif);font-size:1.5rem;color:#fff} .phone-top h4{font-family:var(--serif);margin:0;font-size:1rem;color:#fff} .phone-top .d{font-size:.8rem;color:#d8cfbf;margin-top:3px} .phone-body{padding:14px 14px 18px} .phone-body .ln{height:7px;border-radius:4px;background:var(--line);margin:8px 12px} .phone-body .ln.s{width:60%;margin-left:auto;margin-right:auto} .qr-mock{width:80px;height:80px;margin:13px auto 4px;border-radius:8px; background:#fff;border:1px solid var(--line);padding:8px} .scan-badge{position:absolute;left:-14px;bottom:50px;background:var(--accent);color:var(--on-accent); font-size:.78rem;font-weight:700;padding:8px 14px;border-radius:30px;box-shadow:var(--shadow);z-index:3} /* ===== SECTIONS ===== */ section{padding:74px 0} .sec-alt{background:var(--bg-alt)} .section-head{max-width:720px;margin:0 auto 44px;text-align:center} /* steps */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} .steps.s3{grid-template-columns:repeat(3,1fr)} .step{background:var(--bg-card);border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:var(--shadow-soft)} .step .num{font-family:var(--serif);font-size:2.4rem;color:var(--gold-dark);line-height:1;margin-bottom:.2em} .step h3{font-size:1.15rem} /* packages */ .packages{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch} .pkg{background:var(--bg-card);border:1px solid var(--line);border-radius:16px; padding:32px 28px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-soft);transition:.2s} .pkg:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .pkg.featured{border-color:var(--accent);border-width:2px;box-shadow:var(--shadow)} .pkg .tier{font-size:.78rem;text-transform:uppercase;letter-spacing:2px;color:var(--gold-dark);font-weight:700} .pkg .badge{position:absolute;top:-14px;left:50%;transform:translateX(-50%); background:var(--accent);color:var(--on-accent);font-size:.72rem;font-weight:700;letter-spacing:1px; padding:6px 16px;border-radius:20px;text-transform:uppercase;white-space:nowrap} .pkg h3{margin:.15em 0 .1em;font-size:1.7rem} .pkg .price{font-family:var(--serif);font-size:2.3rem;color:var(--ink);margin:.15em 0;line-height:1.1} .pkg .price small{font-size:.92rem;color:var(--ink-soft);font-weight:400;font-family:var(--sans)} .pkg .from{font-size:.82rem;color:var(--ink-soft)} .pkg ul{list-style:none;padding:0;margin:20px 0 26px;flex:1} .pkg li{padding:8px 0 8px 27px;position:relative;font-size:.95rem;border-bottom:1px dashed var(--line);color:var(--ink)} .pkg li:last-child{border-bottom:none} .pkg li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800} .pkg li.plus::before{content:"+";color:var(--gold-dark);font-weight:800} .pkg .master{font-size:.85rem;color:var(--gold-dark);margin-top:10px;text-align:center} /* переключатель оплаты */ .pay-toggle{display:inline-flex;background:var(--bg-card);border:1px solid var(--line);border-radius:30px; padding:5px;margin:6px auto 30px;gap:4px} .pay-toggle button{border:none;background:transparent;color:var(--ink-soft);font-family:var(--sans); font-weight:700;font-size:.9rem;padding:9px 20px;border-radius:24px;cursor:pointer;transition:.15s} .pay-toggle button.active{background:var(--accent);color:var(--on-accent)} /* features grid */ .features{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .feat{padding:26px;border-radius:14px;background:var(--bg-card);border:1px solid var(--line);box-shadow:var(--shadow-soft)} .feat .ico{font-size:1.8rem;margin-bottom:10px;line-height:1} .feat h3{font-size:1.12rem} .feat p{margin:0;font-size:.95rem} /* честное хранение — блок доверия */ .trust{background:var(--bg-card);border:1px solid var(--line);border-radius:18px; padding:44px;box-shadow:var(--shadow);max-width:980px;margin:0 auto;position:relative;overflow:hidden} .trust::before{content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent)} .trust-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px 34px;margin-top:24px} .trust-item{display:flex;gap:14px;align-items:flex-start} .trust-item .ck{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent); display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;margin-top:2px} .trust-item p{margin:0;color:var(--ink)} .trust-note{margin-top:26px;padding-top:20px;border-top:1px solid var(--line); font-family:var(--serif);font-style:italic;font-size:1.12rem;color:var(--ink)} /* допы — компактная строка */ .addons{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;max-width:920px;margin:0 auto} .addon{background:var(--bg-card);border:1px solid var(--line);border-radius:30px;padding:11px 20px; font-size:.92rem;color:var(--ink)} .addon b{color:var(--gold-dark);font-family:var(--serif)} /* compare table */ .cmp{width:100%;border-collapse:collapse;background:var(--bg-card);border-radius:14px;overflow:hidden;box-shadow:var(--shadow);margin-top:20px} .cmp th,.cmp td{padding:15px 20px;text-align:left;border-bottom:1px solid var(--line);font-size:.96rem} .cmp th{background:var(--bg-alt);font-family:var(--serif);font-size:1.05rem} .cmp tr:last-child td{border-bottom:none} .cmp td.win{color:var(--green);font-weight:700} /* teaser «пример страницы памяти» */ .teaser{display:grid;grid-template-columns:.9fr 1.1fr;gap:44px;align-items:center; background:var(--bg-card);border:1px solid var(--line);border-radius:20px;padding:40px;box-shadow:var(--shadow);max-width:1000px;margin:0 auto} .teaser .phone{margin:0} /* CTA / form */ .cta{background:linear-gradient(135deg,#2c2a26,#1f1b16);color:#f6f3ee;border-radius:20px;padding:52px;text-align:center} html.dark .cta{background:linear-gradient(135deg,#262219,#15130e);border:1px solid var(--line)} .cta h2{color:#fff} .cta p{color:#d8d2c6} .cta .eyebrow{color:var(--gold-dark)} .form{max-width:540px;margin:26px auto 0;display:grid;gap:13px;text-align:left} .form input,.form textarea,.form select{width:100%;padding:14px 16px;border-radius:9px;border:1px solid #565049; background:rgba(255,255,255,.06);color:#f6f3ee;font-family:var(--sans);font-size:1rem} .form input::placeholder,.form textarea::placeholder{color:#a9a294} .form textarea{min-height:92px;resize:vertical} .form .agree{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;color:#bdb6a8} .form .agree input{width:auto;margin-top:3px} /* footer */ .foot{padding:54px 0 40px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:.92rem;background:var(--bg-alt)} .foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px;margin-bottom:26px} .foot h4{font-family:var(--serif);color:var(--ink);font-size:1.05rem;margin:0 0 12px} .foot a{color:var(--ink-soft);display:block;margin:7px 0;transition:color .15s} .foot a:hover{color:var(--ink)} .foot .brand{margin-bottom:12px} .foot .copy{text-align:center;padding-top:22px;border-top:1px solid var(--line);font-size:.86rem} /* ===================================================================== ===== СТРАНИЦА ПАМЯТИ (memorial.html) =============================== ===================================================================== */ /* звёздный фон — только в тёмной теме */ .starfield{position:fixed;inset:0;z-index:-2;pointer-events:none;display:none} html.dark .starfield{display:block; background: radial-gradient(1px 1px at 20% 30%, rgba(255,248,228,.9), transparent), radial-gradient(1px 1px at 70% 20%, rgba(255,248,228,.6), transparent), radial-gradient(1px 1px at 40% 70%, rgba(255,248,228,.7), transparent), radial-gradient(1px 1px at 85% 60%, rgba(255,248,228,.5), transparent), radial-gradient(1px 1px at 15% 85%, rgba(255,248,228,.6), transparent), radial-gradient(2px 2px at 60% 45%, rgba(255,244,214,.4), transparent), radial-gradient(1px 1px at 90% 90%, rgba(255,248,228,.5), transparent), radial-gradient(1px 1px at 33% 15%, rgba(255,248,228,.6), transparent), radial-gradient(circle at 50% 0%, #221d15, #16140f 60%); animation:twinkle 6s ease-in-out infinite alternate} @keyframes twinkle{0%{opacity:.55}100%{opacity:1}} /* hero страницы памяти */ .mem-hero{position:relative;overflow:hidden;text-align:center;padding:72px 0 60px; background:radial-gradient(130% 90% at 50% -10%, rgba(138,114,80,.12), transparent 60%), linear-gradient(180deg,#faf7f0,#efe9dc)} html.dark .mem-hero{ background:radial-gradient(120% 90% at 50% -20%, rgba(203,179,135,.16), rgba(0,0,0,0) 60%), linear-gradient(165deg,#221d15 0%,#2c2820 55%,#1b1813 100%)} .mem-hero .wrap{position:relative;z-index:1} .mem-hero .portrait{width:clamp(200px,26vw,260px);height:clamp(240px,32vw,320px);border-radius:20px; margin:0 auto 24px;overflow:hidden;border:5px solid var(--bg-card); box-shadow:0 0 0 1px var(--line),0 20px 55px rgba(60,45,25,.25)} html.dark .mem-hero .portrait{border-color:rgba(236,223,198,.18); box-shadow:0 0 50px rgba(203,179,135,.25),0 20px 60px rgba(0,0,0,.6)} .mem-hero .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;border-radius:14px} .mem-hero h1{margin-bottom:.12em} .mem-hero .dates{font-size:1.2rem;color:var(--ink-soft);letter-spacing:.5px} .mem-hero .orn{color:var(--gold-dark);letter-spacing:8px;font-size:1rem;margin:14px 0 0;opacity:.75} /* орнаментальная рамка эпитафии */ .epitaph-box{position:relative;max-width:680px;margin:24px auto 0;padding:24px 32px; background:linear-gradient(110deg,rgba(255,255,255,.4),rgba(138,114,80,.06),rgba(255,255,255,.4)); border:1px solid rgba(138,114,80,.4);border-radius:8px} html.dark .epitaph-box{background:linear-gradient(110deg,rgba(0,0,0,.3),rgba(203,179,135,.06),rgba(0,0,0,.3)); border-color:rgba(203,179,135,.4)} .epitaph-box .corner{position:absolute;width:20px;height:20px;border:2px solid var(--gold-dark)} .epitaph-box .tl{top:8px;left:8px;border-right:none;border-bottom:none} .epitaph-box .tr{top:8px;right:8px;border-left:none;border-bottom:none} .epitaph-box .bl{bottom:8px;left:8px;border-right:none;border-top:none} .epitaph-box .br{bottom:8px;right:8px;border-left:none;border-top:none} .epitaph-box .txt{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.25rem;margin:0} /* секции страницы памяти */ .mem-section{padding:34px 0} .mem-section h2{text-align:center;color:var(--ink);font-size:1.7rem} .mem-section h2 .sub{display:block;font-family:var(--sans);font-size:.7rem;letter-spacing:3px; text-transform:uppercase;color:var(--gold-dark);margin-bottom:8px;font-weight:700} .mem-card{max-width:1000px;margin:0 auto;background:var(--bg-card);border:1px solid var(--line); border-radius:18px;padding:40px 36px;box-shadow:var(--shadow);position:relative} html.dark .mem-card{background:linear-gradient(180deg,rgba(32,29,23,.96),rgba(27,24,19,.96)); border-color:rgba(203,179,135,.22);box-shadow:0 18px 50px rgba(0,0,0,.5)} .bio{max-width:760px;margin:0 auto} .bio p{color:var(--ink-soft)} .bio h3{color:var(--ink);margin-top:1.5em} /* таймлайн жизни — смысловой центр (вау-элемент) */ .timeline{max-width:760px;margin:0 auto;position:relative;padding-left:36px} .timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px; background:linear-gradient(var(--accent),transparent)} .tl-item{position:relative;margin-bottom:28px} .tl-item:last-child{margin-bottom:0} .tl-item::before{content:"";position:absolute;left:-33px;top:5px;width:14px;height:14px;border-radius:50%; background:var(--accent);border:3px solid var(--bg-card);box-shadow:0 0 0 1px var(--line)} .tl-year{font-family:var(--serif);color:var(--gold-dark);font-size:1.2rem;font-weight:700} .tl-item p{margin:.2em 0 0;color:var(--ink-soft)} /* фотогалерея-карусель */ .carousel{position:relative;max-width:760px;margin:0 auto} .carousel-track{overflow:hidden;border-radius:14px;border:1px solid var(--line);box-shadow:var(--shadow)} .carousel-track .slides{display:flex;transition:transform .45s ease} .carousel-slide{min-width:100%;position:relative} .carousel-slide .photo{aspect-ratio:4/3} .carousel-slide img{width:100%;height:100%;object-fit:cover;display:block;aspect-ratio:4/3} .carousel-cap{position:absolute;left:0;right:0;bottom:0;padding:16px; background:linear-gradient(transparent,rgba(0,0,0,.78));color:#fff;font-family:var(--serif);font-style:italic} .carousel-btn{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%; background:rgba(31,27,22,.78);border:1px solid rgba(255,255,255,.5);color:#fff;font-size:1.4rem;cursor:pointer;z-index:2; display:flex;align-items:center;justify-content:center;transition:.15s} .carousel-btn:hover{background:var(--accent)} .carousel-btn.prev{left:-12px}.carousel-btn.next{right:-12px} .carousel-dots{display:flex;gap:8px;justify-content:center;margin-top:16px} .carousel-dots span{width:9px;height:9px;border-radius:50%;background:var(--line);cursor:pointer;transition:.15s} .carousel-dots span.active{background:var(--accent)} /* фото-рамка-плейсхолдер (демо без файла) */ .photo{position:relative;background:linear-gradient(135deg,#e8ddc8,#cdb99a 60%,#bda782); border-radius:8px;overflow:hidden;aspect-ratio:4/3} .photo::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 120% at 30% 20%, rgba(255,250,240,.35), rgba(60,45,25,.22) 80%)} .photo .silh{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center} .photo .silh svg{width:55%;height:auto;opacity:.4;fill:#5a4a32} .photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:2} /* семейное древо */ .ftree{max-width:760px;margin:0 auto;display:flex;flex-direction:column;align-items:center} .ftree-row{display:flex;gap:26px;justify-content:center;flex-wrap:wrap} .ftree-conn{width:2px;height:30px;background:var(--accent);opacity:.5} .ftree-couple{display:flex;align-items:center;gap:0} .ftree-couple .bond{width:30px;height:2px;background:var(--accent);opacity:.5} .fnode{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:14px; text-align:center;min-width:160px;box-shadow:var(--shadow-soft);cursor:pointer; transition:transform .2s,box-shadow .2s,border-color .2s} .fnode:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:var(--shadow)} .fnode.dead{border-color:var(--accent);background:linear-gradient(180deg,var(--bg-card),var(--bg-alt))} .fnode .av{width:50px;height:50px;border-radius:50%;margin:0 auto 8px;overflow:hidden; background:linear-gradient(135deg,#ded3c0,#b59a72);display:flex;align-items:center;justify-content:center; font-family:var(--serif);color:#fff;font-size:1.05rem;transition:box-shadow .2s} .fnode:hover .av{box-shadow:0 0 0 3px rgba(33,29,24,.25)} .fnode .av img{width:100%;height:100%;object-fit:cover} .fnode .role{font-size:.7rem;text-transform:uppercase;letter-spacing:1px;color:var(--gold-dark)} .fnode .nm{font-family:var(--serif);font-size:.98rem;margin:3px 0;color:var(--ink)} .fnode .dt{font-size:.78rem;color:var(--ink-soft)} /* карта */ .map-embed{width:100%;height:340px;border:1px solid var(--line);border-radius:14px;overflow:hidden} .map-embed iframe{width:100%;height:100%;border:0} .grave{max-width:760px;margin:0 auto} .grave .row{display:flex;gap:14px;padding:11px 0;border-bottom:1px dashed var(--line)} .grave .row:last-child{border-bottom:none} .grave .row b{min-width:160px;color:var(--ink)} .grave .row span{color:var(--ink-soft)} /* гостевая книга */ .guest{max-width:720px;margin:0 auto} .msg{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-bottom:14px;box-shadow:var(--shadow-soft)} .msg .who{font-family:var(--serif);font-weight:700;color:var(--ink)} .msg .rel-tag{font-size:.82rem;color:var(--ink-soft)} .msg .ok{color:var(--green);font-size:.8rem;float:right;font-weight:700} .msg p{color:var(--ink-soft)} /* свеча со свечением */ .candle-stage{display:flex;flex-direction:column;align-items:center;gap:6px} .candle{position:relative;width:90px;height:170px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end} .candle .halo{position:absolute;top:-30px;left:50%;transform:translateX(-50%);width:150px;height:150px; border-radius:50%;background:radial-gradient(circle,rgba(255,180,70,.45),rgba(255,150,40,.12) 45%,transparent 70%); animation:halo 3s ease-in-out infinite;pointer-events:none} @keyframes halo{0%,100%{opacity:.75;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.12)}} .candle .flame{position:relative;width:22px;height:46px;border-radius:50% 50% 48% 48%/65% 65% 40% 40%; background:radial-gradient(ellipse at 50% 75%, #fff8d4 0%, #ffd24a 32%, #ff9a1f 62%, #ff5e1a 100%); box-shadow:0 0 22px 8px rgba(255,170,60,.6),0 0 50px 18px rgba(255,140,40,.35); transform-origin:50% 90%;animation:flick 2.4s ease-in-out infinite;margin-bottom:-4px;z-index:2} .candle .flame::after{content:"";position:absolute;left:50%;bottom:6px;transform:translateX(-50%); width:9px;height:20px;border-radius:50%;background:radial-gradient(ellipse,#bfe0ff 0%,#7db8ff 60%,transparent 75%);opacity:.7} @keyframes flick{0%{transform:rotate(-3deg) scaleY(1) scaleX(1)}25%{transform:rotate(2deg) scaleY(1.08) scaleX(.96)} 50%{transform:rotate(-1deg) scaleY(.97) scaleX(1.03)}75%{transform:rotate(3deg) scaleY(1.05) scaleX(.98)}100%{transform:rotate(-2deg) scaleY(1) scaleX(1)}} .candle .wick{width:3px;height:8px;background:#3a2a18;margin-bottom:-2px;z-index:1} .candle .body{width:46px;height:104px;border-radius:8px 8px 6px 6px;position:relative; background:linear-gradient(90deg,#d8cdb6,#fffefb 35%,#fff 52%,#efe6d2 80%,#cdc0a4); box-shadow:inset 0 6px 10px rgba(255,255,255,.6),inset 0 -10px 14px rgba(120,100,70,.25)} .candle .body::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:30px;height:7px; border-radius:50%;background:radial-gradient(circle,#7a5f3a,#cbb88f 70%,transparent)} .candle-pop{position:absolute;font-family:var(--serif);color:var(--gold-dark);font-size:1.4rem;font-weight:700;pointer-events:none;opacity:0} .candle-count{font-family:var(--serif);font-size:2.6rem;color:var(--ink)} /* ===== МОДАЛКА ===== */ .modal-overlay{position:fixed;inset:0;background:rgba(20,16,10,.72);backdrop-filter:blur(4px); display:none;align-items:center;justify-content:center;z-index:100;padding:20px} .modal-overlay.open{display:flex} .modal{background:var(--bg-card);color:var(--ink);border:1px solid var(--line);border-radius:16px; max-width:460px;width:100%;padding:32px;box-shadow:0 30px 80px rgba(0,0,0,.5);position:relative} .modal h3{font-family:var(--serif);color:var(--ink);margin:0 0 4px;font-size:1.45rem} .modal .x{position:absolute;top:14px;right:16px;cursor:pointer;font-size:1.5rem;color:var(--ink-soft);background:none;border:none} .modal label{display:block;font-size:.78rem;text-transform:uppercase;letter-spacing:1px;color:var(--ink-soft);margin:14px 0 5px} .modal input,.modal textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:8px; font-family:var(--sans);font-size:1rem;background:var(--bg);color:var(--ink)} .modal textarea{min-height:90px;resize:vertical} .modal.photo-modal{max-width:380px;text-align:center} .modal .big-av{width:160px;height:160px;border-radius:50%;margin:6px auto 14px; background:linear-gradient(135deg,#ded3c0,#b59a72);display:flex;align-items:center;justify-content:center; font-family:var(--serif);color:#fff;font-size:3rem;overflow:hidden} .modal .big-av img{width:100%;height:100%;object-fit:cover} /* ===== info-кнопка и подсказки ===== */ .info,.info-inline{display:inline-flex;align-items:center;justify-content:center; width:18px;height:18px;border-radius:50%;border:1px solid var(--gold-dark); background:transparent;color:var(--gold-dark);font-family:var(--serif);font-style:italic; font-size:.82rem;line-height:1;cursor:pointer;vertical-align:middle;margin-left:5px;padding:0; transition:.15s;flex:0 0 auto} .info:hover{background:var(--gold-dark);color:var(--bg-card)} .info-inline{cursor:default;transform:translateY(-1px)} /* модалка-подсказка с картинкой */ .info-modal{max-width:440px} .info-modal h3{color:var(--ink);margin-bottom:.3em} .info-modal .info-img{margin:-6px 0 16px;border-radius:12px;overflow:hidden;border:1px solid var(--line)} .info-modal .info-img img{width:100%;display:block} .info-modal p{color:var(--ink-soft);font-size:1rem;margin:0;line-height:1.6} /* ===== два способа оплаты ===== */ .pay-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:920px;margin:0 auto} .pay-card{background:var(--bg-card);border:1px solid var(--line);border-radius:16px;padding:30px 28px;box-shadow:var(--shadow-soft)} .pay-card .pay-ico{font-size:2rem;line-height:1;margin-bottom:8px} .pay-card h3{font-size:1.5rem;margin-bottom:.1em} .pay-card .pay-lead{font-family:var(--serif);font-size:1.18rem;color:var(--ink);margin:.1em 0 .9em} .pay-card ul{list-style:none;padding:0;margin:0 0 16px} .pay-card li{padding:9px 0 9px 28px;position:relative;color:var(--ink);border-bottom:1px dashed var(--line)} .pay-card li:last-child{border-bottom:none} .pay-card li::before{content:"✓";position:absolute;left:0;color:var(--green);font-weight:800} .pay-card .pay-fit{margin:0;font-size:.92rem} /* ===== богатый телефон-мокап (блок «пример памяти») ===== */ .phone-rich .phone-top{padding:24px 16px 16px} .phone-rich .phone-top .portrait{width:76px;height:76px;overflow:hidden;border:3px solid rgba(255,255,255,.3)} .phone-rich .phone-top .portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%} .phone-epitaph{font-family:var(--serif);font-style:italic;color:var(--ink-soft);font-size:.9rem;margin:4px 14px 12px;text-align:center} .phone-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin:0 14px 12px} .phone-gallery span{aspect-ratio:1;border-radius:5px;background:linear-gradient(135deg,#e8ddc8,#c9b596)} .phone-row{font-size:.82rem;color:var(--ink-soft);margin:0 14px 12px;text-align:center} .phone-row b{color:var(--ink);font-family:var(--serif)} .phone-cta{display:block;margin:2px 14px 6px;background:var(--accent);color:var(--on-accent); border-radius:8px;padding:10px;font-size:.82rem;font-weight:700;text-align:center} .phone-rich .scan-badge{bottom:auto;top:96px;left:-16px} /* ===== FAQ ===== */ .faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px} .faq details{background:var(--bg-card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-soft);overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:18px 22px;font-family:var(--serif);font-size:1.12rem;color:var(--ink); display:flex;align-items:center;justify-content:space-between;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-family:var(--sans);font-size:1.5rem;line-height:1;color:var(--gold-dark);transition:transform .2s;flex:0 0 auto} .faq details[open] summary::after{transform:rotate(45deg)} .faq details[open] summary{border-bottom:1px solid var(--line)} .faq .faq-a{padding:16px 22px 20px;margin:0;color:var(--ink-soft)} /* ===== ADAPTIVE ===== */ @media(max-width:980px){ .hero .wrap{grid-template-columns:1fr;gap:36px} .hero-media{max-width:440px} .steps,.steps.s3{grid-template-columns:repeat(2,1fr)} .packages,.features,.trust-grid,.pay-cards{grid-template-columns:1fr} .teaser{grid-template-columns:1fr;text-align:center} .teaser .phone{margin:0 auto} .foot .cols{grid-template-columns:1fr 1fr} } @media(max-width:620px){ .nav a:not(.btn){display:none} .steps,.steps.s3{grid-template-columns:1fr} .foot .cols{grid-template-columns:1fr} .trust,.cta,.mem-card{padding:28px} section{padding:54px 0} }