/* ═══ Океан-фон «Погружение» — общий для страниц с ═══ Разметку .ocean-bg инъектит assets/js/ocean.js. */ .ocean-page { background:#02121c; } .ocean-page > main, .ocean-page > footer, .ocean-page > section { position:relative; z-index:1; } /* Шапку НЕ опускаем до z-index:1 — иначе мобильное меню (fixed внутри header) оказывается под контентом main и не открывается. Держим её высоко. */ .ocean-page > header { position:relative; z-index:120; } .ocean-bg { position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; } .ocean-bg__water { position:absolute; inset:0; background:linear-gradient(180deg,var(--wt,#1a4a63) 0%,var(--wm,#123a54) 46%,var(--wd,#0c2740) 100%); transition:background .2s linear; } .ocean-bg__vig { position:absolute; inset:0; background:radial-gradient(120% 80% at 50% 0%,transparent 42%,rgba(2,12,20,.5) 100%); } .ocean-bg__depth { position:absolute; inset:0; background:#010a12; opacity:0; } .ocean-bg__motes span, .ocean-bg__bub span { position:absolute; border-radius:50%; } .ocean-bg__bub span { background:radial-gradient(circle at 35% 30%,rgba(230,255,255,.85),rgba(180,240,240,.12) 60%,transparent 70%); bottom:-40px; animation:obRise linear infinite; } @keyframes obRise { 0%{transform:translateY(0) scale(.7);opacity:0} 12%{opacity:.6} 100%{transform:translateY(-108vh) translateX(18px) scale(1);opacity:0} } .ocean-bg__motes span { background:rgba(200,240,255,.5); animation:obDrift linear infinite; } @keyframes obDrift { 0%{transform:translate(0,0);opacity:0} 20%{opacity:.45} 100%{transform:translate(28px,-56px);opacity:0} } .ocean-bg__fish g { animation:obSwim linear infinite; opacity:.2; } @keyframes obSwim { from{transform:translateX(-14vw)} to{transform:translateX(118vw)} } .ocean-bg__reef { position:absolute; left:0; right:0; bottom:0; width:100%; height:42vh; opacity:0; transition:opacity .5s ease; } @keyframes obReefGlow { 0%,100%{opacity:.4} 50%{opacity:1} } .ocean-bg__reef .rg { animation:obReefGlow 3.2s ease-in-out infinite; } /* Секции прозрачные — сквозь них виден океан */ .ocean-page main { background:transparent !important; } .ocean-page main > section:not(#about):not(.keep-bg) { background:transparent !important; } .ocean-page .site-footer { background:transparent !important; border-top:1px solid rgba(150,225,240,.12); } /* читаемость текста над тёмной водой */ .ocean-page .section-header h2, .ocean-page .service-hero-title { text-shadow:0 2px 24px rgba(0,0,0,.45); } /* «Забота на каждой детали» — стеклянные карточки, иконка в одну строку, свечение в кадре */ .ocean-page .feature-grid .feature-card { display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:8px; align-items:center; background:rgba(8,26,38,.42); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); border-color:rgba(150,225,240,.16); box-shadow:none; transition:opacity .6s ease, transform .6s ease, border-color .6s ease, box-shadow .6s ease; } .ocean-page .feature-grid .feature-icon { width:40px; height:40px; margin:0; grid-column:1; grid-row:1; } .ocean-page .feature-grid .feature-title { margin:0; grid-column:2; grid-row:1; align-self:center; } .ocean-page .feature-grid .feature-text { grid-column:1 / -1; grid-row:2; margin:0; } .ocean-page .feature-card:nth-child(3n+1){ --glow:rgba(47,224,196,.5); } .ocean-page .feature-card:nth-child(3n+2){ --glow:rgba(255,177,77,.45); } .ocean-page .feature-card:nth-child(3n+3){ --glow:rgba(120,180,255,.45); } .ocean-page .feature-card.ob-lit { border-color:rgba(140,235,215,.45); box-shadow:0 0 62px -12px var(--glow,rgba(47,224,196,.45)); } /* «Наши услуги» — коралловая подсветка */ .ocean-page #services .section-header { position:relative; } .ocean-page #services .section-header::before { content:''; position:absolute; left:50%; top:-14%; width:min(720px,88vw); height:360px; transform:translateX(-50%); background:radial-gradient(closest-side, rgba(47,224,196,.20), rgba(120,180,255,.08) 55%, transparent 74%); opacity:0; transition:opacity 1s ease; pointer-events:none; } .ocean-page #services.ob-lit .section-header::before { opacity:1; } .ocean-page .service-card { transition:box-shadow .7s ease, border-color .7s ease; } .ocean-page .service-card:nth-child(3n+1){ --glow:rgba(47,224,196,.5); } .ocean-page .service-card:nth-child(3n+2){ --glow:rgba(255,177,77,.45); } .ocean-page .service-card:nth-child(3n+3){ --glow:rgba(120,180,255,.45); } .ocean-page .service-card.ob-lit { box-shadow:0 0 58px -14px var(--glow,rgba(47,224,196,.5)); } /* Стеклянные блоки контента (туры / прочие страницы) над океаном */ .ocean-page .tour-info-row__col, .ocean-page .about-hero__intro, .ocean-page .block-text, .ocean-page .gallery-grid, .ocean-page .contact-card, .ocean-page .team-card, .ocean-page .info-card { position:relative; } .ocean-page .cta-join-us.ob-lit { box-shadow:0 0 70px -14px rgba(47,224,196,.45); } @media (prefers-reduced-motion:reduce){ .ocean-bg__bub span,.ocean-bg__motes span,.ocean-bg__fish g,.ocean-bg__reef .rg{animation:none!important} }