diff --git a/assets/images/130.webp b/assets/images/130.webp new file mode 100644 index 0000000..ab2ab8d Binary files /dev/null and b/assets/images/130.webp differ diff --git a/assets/images/b0dfbe41-a2ed-460e-84f6-981b17a5598a.webp b/assets/images/b0dfbe41-a2ed-460e-84f6-981b17a5598a.webp new file mode 100644 index 0000000..2a64ee8 Binary files /dev/null and b/assets/images/b0dfbe41-a2ed-460e-84f6-981b17a5598a.webp differ diff --git a/assets/images/givi.webp b/assets/images/givi.webp new file mode 100644 index 0000000..4d56b45 Binary files /dev/null and b/assets/images/givi.webp differ diff --git a/assets/images/image-b93ca6a7ef18.webp b/assets/images/image-b93ca6a7ef18.webp index 1d7d7ae..439ab4e 100644 Binary files a/assets/images/image-b93ca6a7ef18.webp and b/assets/images/image-b93ca6a7ef18.webp differ diff --git a/assets/images/image-fd156ca504d5.webp b/assets/images/image-fd156ca504d5.webp index c1cc466..5bb3358 100644 Binary files a/assets/images/image-fd156ca504d5.webp and b/assets/images/image-fd156ca504d5.webp differ diff --git a/assets/images/kon.webp b/assets/images/kon.webp new file mode 100644 index 0000000..df45c54 Binary files /dev/null and b/assets/images/kon.webp differ diff --git a/assets/images/remote-85be3d37b82e92d2.webp b/assets/images/remote-85be3d37b82e92d2.webp index 17f0932..9b00ae7 100644 Binary files a/assets/images/remote-85be3d37b82e92d2.webp and b/assets/images/remote-85be3d37b82e92d2.webp differ diff --git a/assets/images/triangle.webp b/assets/images/triangle.webp new file mode 100644 index 0000000..aa81fcd Binary files /dev/null and b/assets/images/triangle.webp differ diff --git a/assets/images/vollerner.webp b/assets/images/vollerner.webp new file mode 100644 index 0000000..5ad95f3 Binary files /dev/null and b/assets/images/vollerner.webp differ diff --git a/assets/images/yakov.webp b/assets/images/yakov.webp new file mode 100644 index 0000000..599336b Binary files /dev/null and b/assets/images/yakov.webp differ diff --git a/assets/images/yun.webp b/assets/images/yun.webp new file mode 100644 index 0000000..286eecc Binary files /dev/null and b/assets/images/yun.webp differ diff --git a/assets/site.css b/assets/site.css index b136aca..cb1b118 100644 --- a/assets/site.css +++ b/assets/site.css @@ -1,1745 +1,4341 @@ -:root{--navy:#072442;--navy2:#0c365d;--cream:#f4e6d6;--cream2:#fbf4ea;--gold:#c6924d;--brown:#6f4f3f;--ink:#0b2948;--line:rgba(198,146,77,.42)} -*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream2);color:var(--ink);font-family:Arial,"Helvetica Neue",sans-serif}a{color:inherit;text-decoration:none} -.hero{min-height:92vh;background:linear-gradient(90deg,rgba(244,230,214,.95) 0 33%,rgba(244,230,214,.28) 55%,rgba(7,36,66,.14)),url(images/image-029dc98bc55c.webp) center/cover no-repeat;position:relative;display:flex;align-items:center;overflow:hidden} -.hero:after{content:"";position:absolute;inset:auto 0 0;height:165px;background:var(--navy);clip-path:path('M0 70 C180 30 330 135 520 95 C690 62 785 28 955 74 C1150 126 1250 25 1440 66 L1440 165 L0 165 Z')} -.hero-inner{position:relative;z-index:2;width:min(1240px,92%);margin:auto;padding:45px 0 140px}.kicker{display:inline-flex;align-items:center;gap:13px;color:var(--brown);font-size:18px;letter-spacing:.03em}.kicker:before{content:"";width:52px;height:1px;background:var(--gold)}.kicker:after{content:"◆";font-size:10px;color:var(--gold);margin-left:-15px} -.hero h1{font-size:clamp(74px,11vw,165px);line-height:.8;margin:24px 0 18px;text-transform:uppercase;letter-spacing:-.06em;color:var(--navy);max-width:760px}.hero h2{font-size:clamp(28px,4vw,54px);line-height:1.08;font-weight:500;text-transform:uppercase;margin:0;max-width:550px}.hero .meta{margin-top:50px;color:var(--gold);letter-spacing:.16em;text-transform:uppercase} -.nav{position:sticky;top:0;z-index:100;background:rgba(7,36,66,.96);backdrop-filter:blur(10px)}.nav-inner{width:min(1240px,94%);margin:auto;display:flex;gap:24px;overflow:auto;padding:14px 0;color:#fff;font-size:14px;text-transform:uppercase;letter-spacing:.08em}.nav a{white-space:nowrap;opacity:.86}.nav a:hover{opacity:1;color:#e7bb78} -.page{width:min(1240px,92%);margin:auto;padding:86px 0}.page-title{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:end;margin-bottom:42px}.page-title h3{margin:0;font-size:clamp(44px,6vw,78px);line-height:.95;letter-spacing:-.045em;text-transform:uppercase}.page-title p{margin:0;color:#5f5149;font-size:18px;line-height:1.6} -.route-wrap{background:var(--cream);position:relative;overflow:hidden}.route-wrap:before,.architecture:before{content:"";position:absolute;left:-5%;right:-5%;height:150px;background:var(--navy);opacity:.98;bottom:-70px;border-radius:50% 55% 0 0/45% 55% 0 0;transform:rotate(-1.5deg)}.route-wrap:after{content:"";position:absolute;left:-8%;right:-8%;height:110px;border-top:2px solid rgba(198,146,77,.65);bottom:10px;border-radius:50%;transform:rotate(2deg)} -.map-card{position:relative;z-index:2;background:#fff8ef;border:1px solid rgba(198,146,77,.45);border-radius:28px;padding:18px;box-shadow:0 20px 60px rgba(47,34,24,.12)}.route-map-frame{height:min(72vh,760px);min-height:560px;border-radius:20px;overflow:hidden;background:#fff}.route-map-frame iframe{display:block;width:100%;height:100%;border:0}.map-legend,.map-chip{display:none!important} -.architecture{position:relative;background:linear-gradient(180deg,#fffaf3 0,#f5e7d8 78%,#e6d1bd 100%);overflow:hidden}.architecture .page{position:relative;z-index:2;padding-bottom:180px}.arch-intro{max-width:820px;font-size:19px;line-height:1.7;color:#67554a;margin:-10px 0 48px} -.arch-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:460px;margin:0 0 30px;background:rgba(255,250,244,.93);border:1px solid rgba(198,146,77,.35);border-radius:30px;overflow:hidden;box-shadow:0 20px 48px rgba(44,31,22,.10)}.arch-card:nth-child(even){grid-template-columns:.95fr 1.05fr}.arch-card:nth-child(even) .arch-photo{order:2}.arch-photo{position:relative;background:#d8c4ae center/cover no-repeat;min-height:390px}.arch-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(7,36,66,.42))}.arch-num{position:absolute;z-index:2;left:24px;top:22px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:700;border:2px solid rgba(255,255,255,.7)}.arch-text{padding:44px 44px 40px;display:flex;flex-direction:column;justify-content:center}.address{color:var(--gold);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.12em;margin-bottom:12px}.arch-text h4{font-size:34px;line-height:1.04;margin:0 0 18px;letter-spacing:-.03em}.arch-text p{font-size:17px;line-height:1.65;margin:0;color:#5f5149}.fact{margin-top:22px;padding-top:18px;border-top:1px solid var(--line);font-size:14px;color:#78634f}.fact b{color:var(--navy)} -.section-wave{height:155px;background:var(--navy);position:relative;overflow:hidden}.section-wave:before{content:"";position:absolute;left:-5%;right:-5%;top:-72px;height:125px;background:#f5e7d8;border-radius:0 0 50% 50%/0 0 55% 55%;transform:rotate(1deg)}.section-wave:after{content:"";position:absolute;left:-10%;right:-10%;top:32px;border-top:2px solid rgba(219,172,105,.75);height:90px;border-radius:50%;transform:rotate(-2deg)} -.simple{background:var(--navy);color:#fff}.simple .page-title p{color:#c9d7e4}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.tile{background:#fff;color:var(--ink);padding:26px;border-radius:22px;min-height:160px}.tile h4{font-size:24px;margin:0 0 10px} .tile p{margin:0;line-height:1.55;color:#5b514b} -.food-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7eadc 0%,#fff9f2 62%,#e7d2bc 100%)} -.food-section:before{content:"";position:absolute;left:-8%;right:-8%;bottom:-85px;height:190px;background:var(--navy);border-radius:50% 50% 0 0/55% 55% 0 0;transform:rotate(-1.3deg)} -.food-section:after{content:"";position:absolute;left:-10%;right:-10%;bottom:34px;height:90px;border-top:2px solid rgba(198,146,77,.72);border-radius:50%;transform:rotate(1.8deg)} -.food-section .page{position:relative;z-index:2;padding-bottom:190px}.food-note{margin:-18px 0 42px;color:#7a6759;font-size:14px;line-height:1.55} -.restaurant-list{display:grid;gap:30px}.restaurant-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:430px;background:rgba(255,250,244,.96);border:1px solid rgba(198,146,77,.38);border-radius:30px;overflow:hidden;box-shadow:0 20px 48px rgba(44,31,22,.10)} -.restaurant-card:nth-child(even){grid-template-columns:.95fr 1.05fr}.restaurant-card:nth-child(even) .restaurant-photo{order:2}.restaurant-photo{position:relative;min-height:360px;background:linear-gradient(135deg,#123a60,#7f5b3a);background-position:center;background-size:cover}.restaurant-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(7,36,66,.58))}.restaurant-num{position:absolute;z-index:2;left:24px;top:22px;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:700;border:2px solid rgba(255,255,255,.72)} -.restaurant-body{padding:40px 44px;display:flex;flex-direction:column;justify-content:center}.restaurant-kicker{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:13px;margin-bottom:10px}.restaurant-body h4{font-size:36px;line-height:1.03;letter-spacing:-.03em;margin:0 0 13px}.restaurant-address{font-size:14px;color:#796555;margin-bottom:20px}.restaurant-body p{font-size:16px;line-height:1.65;color:#5f5149;margin:0 0 20px}.restaurant-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.rmeta{padding:13px 14px;background:#f3e5d5;border:1px solid rgba(198,146,77,.28);border-radius:14px}.rmeta b{display:block;color:var(--navy);font-size:18px;margin-bottom:3px}.rmeta span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:#8a735d}.price-mid{color:#855d2e}.price-high{color:#6f3f25}.restaurant-source{margin-top:17px;font-size:11px;color:#9a8879}.footer{padding:48px 20px;text-align:center;background:#041c34;color:#bfd0df}.footer b{color:#e4b36b} -.leaflet-popup-content-wrapper{border-radius:14px}.leaflet-popup-content{font-family:Arial,sans-serif;line-height:1.35}.route-marker{background:var(--navy);color:white;border:3px solid #fff;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.25)} -@media(max-width:850px){.hero{min-height:78vh;background-position:62% center}.hero-inner{padding-bottom:120px}.page{padding:64px 0}.page-title{grid-template-columns:1fr;gap:14px}.arch-card,.arch-card:nth-child(even),.restaurant-card,.restaurant-card:nth-child(even){grid-template-columns:1fr}.arch-card:nth-child(even) .arch-photo,.restaurant-card:nth-child(even) .restaurant-photo{order:0}.arch-text,.restaurant-body{padding:30px}.restaurant-meta{grid-template-columns:1fr 1fr}.grid{grid-template-columns:1fr}.route-map-frame{min-height:470px}} +:root { + --navy: #072442; + --navy2: #0c365d; + --cream: #f4e6d6; + --cream2: #fbf4ea; + --gold: #c6924d; + --brown: #6f4f3f; + --ink: #0b2948; + --line: rgba(198, 146, 77, .42) +} + +* { + box-sizing: border-box +} + +html { + scroll-behavior: smooth +} + +body { + margin: 0; + background: var(--cream2); + color: var(--ink); + font-family: Arial, "Helvetica Neue", sans-serif +} + +a { + color: inherit; + text-decoration: none +} + +.hero { + min-height: 92vh; + background: linear-gradient(90deg, rgba(244, 230, 214, .95) 0 33%, rgba(244, 230, 214, .28) 55%, rgba(7, 36, 66, .14)), url(images/image-029dc98bc55c.webp) center/cover no-repeat; + position: relative; + display: flex; + align-items: center; + overflow: hidden +} + +.hero:after { + content: ""; + position: absolute; + inset: auto 0 0; + height: 165px; + background: var(--navy); + clip-path: path('M0 70 C180 30 330 135 520 95 C690 62 785 28 955 74 C1150 126 1250 25 1440 66 L1440 165 L0 165 Z') +} + +.hero-inner { + position: relative; + z-index: 2; + width: min(1240px, 92%); + margin: auto; + padding: 45px 0 140px +} + +.kicker { + display: inline-flex; + align-items: center; + gap: 13px; + color: var(--brown); + font-size: 18px; + letter-spacing: .03em +} + +.kicker:before { + content: ""; + width: 52px; + height: 1px; + background: var(--gold) +} + +.kicker:after { + content: "◆"; + font-size: 10px; + color: var(--gold); + margin-left: -15px +} + +.hero h1 { + font-size: clamp(74px, 11vw, 165px); + line-height: .8; + margin: 24px 0 18px; + text-transform: uppercase; + letter-spacing: -.06em; + color: var(--navy); + max-width: 760px +} + +.hero h2 { + font-size: clamp(28px, 4vw, 54px); + line-height: 1.08; + font-weight: 500; + text-transform: uppercase; + margin: 0; + max-width: 550px +} + +.hero .meta { + margin-top: 50px; + color: var(--gold); + letter-spacing: .16em; + text-transform: uppercase +} + +.nav { + position: sticky; + top: 0; + z-index: 100; + background: rgba(7, 36, 66, .96); + backdrop-filter: blur(10px) +} + +.nav-inner { + width: min(1240px, 94%); + margin: auto; + display: flex; + gap: 24px; + overflow: auto; + padding: 14px 0; + color: #fff; + font-size: 14px; + text-transform: uppercase; + letter-spacing: .08em +} + +.nav a { + white-space: nowrap; + opacity: .86 +} + +.nav a:hover { + opacity: 1; + color: #e7bb78 +} + +.page { + width: min(1240px, 92%); + margin: auto; + padding: 86px 0 +} + +.page-title { + display: grid; + grid-template-columns:1.15fr .85fr; + gap: 44px; + align-items: end; + margin-bottom: 42px +} + +.page-title h3 { + margin: 0; + font-size: clamp(44px, 6vw, 78px); + line-height: .95; + letter-spacing: -.045em; + text-transform: uppercase +} + +.page-title p { + margin: 0; + color: #5f5149; + font-size: 18px; + line-height: 1.6 +} + +.route-wrap { + background: var(--cream); + position: relative; + overflow: hidden +} + +.route-wrap:before, .architecture:before { + content: ""; + position: absolute; + left: -5%; + right: -5%; + height: 150px; + background: var(--navy); + opacity: .98; + bottom: -70px; + border-radius: 50% 55% 0 0/45% 55% 0 0; + transform: rotate(-1.5deg) +} + +.route-wrap:after { + content: ""; + position: absolute; + left: -8%; + right: -8%; + height: 110px; + border-top: 2px solid rgba(198, 146, 77, .65); + bottom: 10px; + border-radius: 50%; + transform: rotate(2deg) +} + +.map-card { + position: relative; + z-index: 2; + background: #fff8ef; + border: 1px solid rgba(198, 146, 77, .45); + border-radius: 28px; + padding: 18px; + box-shadow: 0 20px 60px rgba(47, 34, 24, .12) +} + +.route-map-frame { + height: min(72vh, 760px); + min-height: 560px; + border-radius: 20px; + overflow: hidden; + background: #fff +} + +.route-map-frame iframe { + display: block; + width: 100%; + height: 100%; + border: 0 +} + +.map-legend, .map-chip { + display: none !important +} + +.architecture { + position: relative; + background: linear-gradient(180deg, #fffaf3 0, #f5e7d8 78%, #e6d1bd 100%); + overflow: hidden +} + +.architecture .page { + position: relative; + z-index: 2; + padding-bottom: 180px +} + +.arch-intro { + max-width: 820px; + font-size: 19px; + line-height: 1.7; + color: #67554a; + margin: -10px 0 48px +} + +.arch-card { + display: grid; + grid-template-columns:1.05fr .95fr; + min-height: 460px; + margin: 0 0 30px; + background: rgba(255, 250, 244, .93); + border: 1px solid rgba(198, 146, 77, .35); + border-radius: 30px; + overflow: hidden; + box-shadow: 0 20px 48px rgba(44, 31, 22, .10) +} + +.arch-card:nth-child(even) { + grid-template-columns:.95fr 1.05fr +} + +.arch-card:nth-child(even) .arch-photo { + order: 2 +} + +.arch-photo { + position: relative; + background: #d8c4ae center/cover no-repeat; + min-height: 390px +} + +.arch-photo:after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 55%, rgba(7, 36, 66, .42)) +} + +.arch-num { + position: absolute; + z-index: 2; + left: 24px; + top: 22px; + width: 58px; + height: 58px; + border-radius: 50%; + display: grid; + place-items: center; + background: var(--navy); + color: #fff; + font-weight: 700; + border: 2px solid rgba(255, 255, 255, .7) +} + +.arch-text { + padding: 44px 44px 40px; + display: flex; + flex-direction: column; + justify-content: center +} + +.address { + color: var(--gold); + font-size: 14px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: .12em; + margin-bottom: 12px +} + +.arch-text h4 { + font-size: 34px; + line-height: 1.04; + margin: 0 0 18px; + letter-spacing: -.03em +} + +.arch-text p { + font-size: 17px; + line-height: 1.65; + margin: 0; + color: #5f5149 +} + +.fact { + margin-top: 22px; + padding-top: 18px; + border-top: 1px solid var(--line); + font-size: 14px; + color: #78634f +} + +.fact b { + color: var(--navy) +} + +.section-wave { + height: 155px; + background: var(--navy); + position: relative; + overflow: hidden +} + +.section-wave:before { + content: ""; + position: absolute; + left: -5%; + right: -5%; + top: -72px; + height: 125px; + background: #f5e7d8; + border-radius: 0 0 50% 50%/0 0 55% 55%; + transform: rotate(1deg) +} + +.section-wave:after { + content: ""; + position: absolute; + left: -10%; + right: -10%; + top: 32px; + border-top: 2px solid rgba(219, 172, 105, .75); + height: 90px; + border-radius: 50%; + transform: rotate(-2deg) +} + +.simple { + background: var(--navy); + color: #fff +} + +.simple .page-title p { + color: #c9d7e4 +} + +.grid { + display: grid; + grid-template-columns:repeat(3, 1fr); + gap: 18px +} + +.tile { + background: #fff; + color: var(--ink); + padding: 26px; + border-radius: 22px; + min-height: 160px +} + +.tile h4 { + font-size: 24px; + margin: 0 0 10px +} + +.tile p { + margin: 0; + line-height: 1.55; + color: #5b514b +} + +.food-section { + position: relative; + overflow: hidden; + background: linear-gradient(180deg, #f7eadc 0%, #fff9f2 62%, #e7d2bc 100%) +} + +.food-section:before { + content: ""; + position: absolute; + left: -8%; + right: -8%; + bottom: -85px; + height: 190px; + background: var(--navy); + border-radius: 50% 50% 0 0/55% 55% 0 0; + transform: rotate(-1.3deg) +} + +.food-section:after { + content: ""; + position: absolute; + left: -10%; + right: -10%; + bottom: 34px; + height: 90px; + border-top: 2px solid rgba(198, 146, 77, .72); + border-radius: 50%; + transform: rotate(1.8deg) +} + +.food-section .page { + position: relative; + z-index: 2; + padding-bottom: 190px +} + +.food-note { + margin: -18px 0 42px; + color: #7a6759; + font-size: 14px; + line-height: 1.55 +} + +.restaurant-list { + display: grid; + gap: 30px +} + +.restaurant-card { + display: grid; + grid-template-columns:1.05fr .95fr; + min-height: 430px; + background: rgba(255, 250, 244, .96); + border: 1px solid rgba(198, 146, 77, .38); + border-radius: 30px; + overflow: hidden; + box-shadow: 0 20px 48px rgba(44, 31, 22, .10) +} + +.restaurant-card:nth-child(even) { + grid-template-columns:.95fr 1.05fr +} + +.restaurant-card:nth-child(even) .restaurant-photo { + order: 2 +} + +.restaurant-photo { + position: relative; + min-height: 360px; + background: linear-gradient(135deg, #123a60, #7f5b3a); + background-position: center; + background-size: cover +} + +.restaurant-photo:after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 48%, rgba(7, 36, 66, .58)) +} + +.restaurant-num { + position: absolute; + z-index: 2; + left: 24px; + top: 22px; + width: 58px; + height: 58px; + border-radius: 50%; + display: grid; + place-items: center; + background: var(--navy); + color: #fff; + font-weight: 700; + border: 2px solid rgba(255, 255, 255, .72) +} + +.restaurant-body { + padding: 40px 44px; + display: flex; + flex-direction: column; + justify-content: center +} + +.restaurant-kicker { + color: var(--gold); + font-weight: 700; + text-transform: uppercase; + letter-spacing: .12em; + font-size: 13px; + margin-bottom: 10px +} + +.restaurant-body h4 { + font-size: 36px; + line-height: 1.03; + letter-spacing: -.03em; + margin: 0 0 13px +} + +.restaurant-address { + font-size: 14px; + color: #796555; + margin-bottom: 20px +} + +.restaurant-body p { + font-size: 16px; + line-height: 1.65; + color: #5f5149; + margin: 0 0 20px +} + +.restaurant-meta { + display: flex; + justify-content: end; +} + +.rmeta { + padding: 13px 14px; + background: #f3e5d5; + border: 1px solid rgba(198, 146, 77, .28); + border-radius: 14px +} + +.rmeta .title { + display: block; + color: var(--navy); + font-size: 20px; + margin-bottom: 3px +} + +.rmeta span.content { + font-size: 30px; + text-transform: uppercase; + letter-spacing: .06em; + color: #8a735d; + font-weight: 800; +} + +.price-mid { + color: #855d2e +} + +.price-high { + color: #6f3f25 +} + +.restaurant-source { + margin-top: 17px; + font-size: 11px; + color: #9a8879 +} + +.footer { + padding: 48px 20px; + text-align: center; + background: #041c34; + color: #bfd0df +} + +.footer b { + color: #e4b36b +} + +.leaflet-popup-content-wrapper { + border-radius: 14px +} + +.leaflet-popup-content { + font-family: Arial, sans-serif; + line-height: 1.35 +} + +.route-marker { + background: var(--navy); + color: white; + border: 3px solid #fff; + width: 34px; + height: 34px; + border-radius: 50%; + display: grid; + place-items: center; + font-weight: 700; + box-shadow: 0 3px 10px rgba(0, 0, 0, .25) +} + +@media (max-width: 850px) { + .hero { + min-height: 78vh; + background-position: 62% center + } + + .hero-inner { + padding-bottom: 120px + } + + .page { + padding: 64px 0 + } + + .page-title { + grid-template-columns:1fr; + gap: 14px + } + + .arch-card, .arch-card:nth-child(even), .restaurant-card, .restaurant-card:nth-child(even) { + grid-template-columns:1fr + } + + .arch-card:nth-child(even) .arch-photo, .restaurant-card:nth-child(even) .restaurant-photo { + order: 0 + } + + .arch-text, .restaurant-body { + padding: 30px + } + + .restaurant-meta { + grid-template-columns:1fr 1fr + } + + .grid { + grid-template-columns:1fr + } + + .route-map-frame { + min-height: 470px + } +} /* тонкий орнамент иркутских деревянных наличников */ -.window-ornament{position:relative;height:118px;margin:16px 0 34px;opacity:.86;overflow:hidden} -.window-ornament svg{display:block;width:100%;height:100%}.window-ornament .goldline{fill:none;stroke:var(--gold);stroke-width:1.25;vector-effect:non-scaling-stroke}.window-ornament .soft{opacity:.42}.window-corner{position:absolute;width:150px;height:210px;pointer-events:none;opacity:.24;z-index:1}.window-corner.left{left:10px;top:110px}.window-corner.right{right:10px;bottom:150px;transform:scaleX(-1)} -.regional-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#082846 0%,#0c365d 48%,#072442 100%);color:#fff}.regional-section .page{position:relative;z-index:2;padding-bottom:150px}.regional-section .page-title p{color:#c9d7e4}.regional-section:before{content:"";position:absolute;left:-12%;right:-12%;top:130px;height:170px;border-top:1px solid rgba(198,146,77,.46);border-radius:50%;transform:rotate(-2deg)} -.regional-section:after{content:"";position:absolute;left:-12%;right:-12%;bottom:40px;height:170px;border-top:2px solid rgba(198,146,77,.62);border-radius:50%;transform:rotate(2deg)} -.regional-section .restaurant-card{background:rgba(251,244,234,.98);color:var(--ink)} -.travel-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#f7eadc,#fffaf4 72%,#ead7c4);padding-bottom:30px}.travel-grid{display:grid;gap:30px}.travel-card{display:grid;grid-template-columns:1.08fr .92fr;min-height:500px;border:1px solid rgba(198,146,77,.4);border-radius:32px;overflow:hidden;background:rgba(255,250,244,.97);box-shadow:0 22px 54px rgba(39,28,20,.11)}.travel-card:nth-child(even){grid-template-columns:.92fr 1.08fr}.travel-card:nth-child(even) .travel-photo{order:2}.travel-photo{min-height:420px;background-position:center;background-size:cover;position:relative}.travel-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,36,66,.52))}.travel-body{padding:46px;display:flex;flex-direction:column;justify-content:center}.travel-kicker{color:var(--gold);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}.travel-body h4{font-size:38px;line-height:1.02;margin:0 0 17px;letter-spacing:-.03em}.travel-body p{font-size:17px;line-height:1.65;color:#5f5149;margin:0 0 18px}.travel-points{display:grid;gap:9px;margin-top:8px}.travel-points div{padding:10px 0;border-top:1px solid rgba(198,146,77,.28);font-size:14px;color:#6b5849}.travel-points b{color:var(--navy)} -@media(max-width:850px){.travel-card,.travel-card:nth-child(even){grid-template-columns:1fr}.travel-card:nth-child(even) .travel-photo{order:0}.travel-body{padding:30px}.window-ornament{height:88px}} +.window-ornament { + position: relative; + height: 118px; + margin: 16px 0 34px; + opacity: .86; + overflow: hidden +} + +.window-ornament svg { + display: block; + width: 100%; + height: 100% +} + +.window-ornament .goldline { + fill: none; + stroke: var(--gold); + stroke-width: 1.25; + vector-effect: non-scaling-stroke +} + +.window-ornament .soft { + opacity: .42 +} + +.window-corner { + position: absolute; + width: 150px; + height: 210px; + pointer-events: none; + opacity: .24; + z-index: 1 +} + +.window-corner.left { + left: 10px; + top: 110px +} + +.window-corner.right { + right: 10px; + bottom: 150px; + transform: scaleX(-1) +} + +.regional-section { + position: relative; + overflow: hidden; + background: linear-gradient(180deg, #082846 0%, #0c365d 48%, #072442 100%); + color: #fff +} + +.regional-section .page { + position: relative; + z-index: 2; + padding-bottom: 150px +} + +.regional-section .page-title p { + color: #c9d7e4 +} + +.regional-section:before { + content: ""; + position: absolute; + left: -12%; + right: -12%; + top: 130px; + height: 170px; + border-top: 1px solid rgba(198, 146, 77, .46); + border-radius: 50%; + transform: rotate(-2deg) +} + +.regional-section:after { + content: ""; + position: absolute; + left: -12%; + right: -12%; + bottom: 40px; + height: 170px; + border-top: 2px solid rgba(198, 146, 77, .62); + border-radius: 50%; + transform: rotate(2deg) +} + +.regional-section .restaurant-card { + background: rgba(251, 244, 234, .98); + color: var(--ink) +} + +.travel-section { + position: relative; + overflow: hidden; + background: linear-gradient(180deg, #f7eadc, #fffaf4 72%, #ead7c4); + padding-bottom: 30px +} + +.travel-grid { + display: grid; + gap: 30px +} + +.travel-card { + display: grid; + grid-template-columns:1.08fr .92fr; + min-height: 500px; + border: 1px solid rgba(198, 146, 77, .4); + border-radius: 32px; + overflow: hidden; + background: rgba(255, 250, 244, .97); + box-shadow: 0 22px 54px rgba(39, 28, 20, .11) +} + +.travel-card:nth-child(even) { + grid-template-columns:.92fr 1.08fr +} + +.travel-card:nth-child(even) .travel-photo { + order: 2 +} + +.travel-photo { + min-height: 420px; + background-position: center; + background-size: cover; + position: relative +} + +.travel-photo:after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 50%, rgba(7, 36, 66, .52)) +} + +.travel-body { + padding: 46px; + display: flex; + flex-direction: column; + justify-content: center +} + +.travel-kicker { + color: var(--gold); + font-size: 13px; + font-weight: 700; + letter-spacing: .12em; + text-transform: uppercase; + margin-bottom: 10px +} + +.travel-body h4 { + font-size: 38px; + line-height: 1.02; + margin: 0 0 17px; + letter-spacing: -.03em +} + +.travel-body p { + font-size: 17px; + line-height: 1.65; + color: #5f5149; + margin: 0 0 18px +} + +.travel-points { + display: grid; + gap: 9px; + margin-top: 8px +} + +.travel-points div { + padding: 10px 0; + border-top: 1px solid rgba(198, 146, 77, .28); + font-size: 14px; + color: #6b5849 +} + +.travel-points b { + color: var(--navy) +} + +@media (max-width: 850px) { + .travel-card, .travel-card:nth-child(even) { + grid-template-columns:1fr + } + + .travel-card:nth-child(even) .travel-photo { + order: 0 + } + + .travel-body { + padding: 30px + } + + .window-ornament { + height: 88px + } +} /* refined cover — clean image, no baked-in text */ -.hero{min-height:900px;background:linear-gradient(90deg,#f8eee1 0 44%,#f8eee1 44%,#f0dfcd 100%);position:relative;display:flex;align-items:stretch;overflow:hidden;border-bottom:1px solid rgba(198,146,77,.38)} -.hero-photo{position:absolute;z-index:0;top:0;right:0;width:61%;height:100%;background-image:linear-gradient(90deg,rgba(248,238,225,.96) 0%,rgba(248,238,225,.42) 15%,rgba(248,238,225,0) 34%),url(images/image-95626fbe7811.webp);background-size:cover;background-position:center center;background-repeat:no-repeat;filter:saturate(.93) contrast(1.02)} -.hero:before{content:"";position:absolute;z-index:1;left:-4%;right:-4%;bottom:-58px;height:210px;background:#082b4f;clip-path:polygon(0 45%,7% 53%,15% 61%,24% 68%,34% 72%,44% 69%,55% 61%,65% 58%,75% 62%,84% 71%,92% 77%,100% 72%,100% 100%,0 100%)} -.hero:after{content:"";position:absolute;z-index:2;left:-3%;right:-3%;bottom:73px;height:118px;border-top:3px solid rgba(210,164,96,.95);border-radius:50%;transform:rotate(1.8deg);background:transparent;clip-path:none} -.hero-inner{position:relative;z-index:3;width:min(1240px,92%);margin:auto;padding:105px 0 155px;display:flex;flex-direction:column;justify-content:space-between;min-height:900px} -.hero-copy{width:min(560px,46vw);padding-left:34px} -.hero h1{font-size:clamp(92px,10.8vw,165px);line-height:.82;margin:0 0 28px;text-transform:uppercase;letter-spacing:-.065em;color:#073056;max-width:none} -.hero h2{font-size:clamp(34px,3.25vw,56px);line-height:1.12;font-weight:500;text-transform:uppercase;margin:0 0 36px;max-width:520px;letter-spacing:.01em;color:#0b3158} -.hero .kicker{display:flex;align-items:center;gap:14px;color:#7a5b3d;font-size:18px;letter-spacing:.025em} -.hero .kicker:before{content:"";width:56px;height:1px;background:#b98a4d} -.hero .kicker:after{content:"◆";font-size:9px;color:#b98a4d;margin-left:-16px} -.hero .meta{align-self:center;margin:0 0 -42px;color:#c7944f;letter-spacing:.18em;text-transform:uppercase;font-size:16px} -.hero-ornament{position:absolute;z-index:2;left:0;top:0;width:82px;height:72%;background:#0a3157;border-right:1px solid rgba(205,159,91,.7);box-shadow:16px 0 42px rgba(7,36,66,.08)} -.hero-ornament svg{width:100%;height:100%;padding:12px 10px;fill:none;stroke:#d4a55d;stroke-width:1.25;opacity:.84} -@media(max-width:900px){ - .hero{min-height:760px;background:#f8eee1} - .hero-photo{width:100%;height:46%;top:auto;bottom:120px;background-image:linear-gradient(180deg,#f8eee1 0%,rgba(248,238,225,.08) 30%),url(images/image-95626fbe7811.webp);background-position:center 42%} - .hero-inner{min-height:760px;padding:82px 0 130px} - .hero-copy{width:100%;padding-left:54px} - .hero h1{font-size:clamp(68px,18vw,110px)} - .hero h2{font-size:clamp(28px,7vw,42px);max-width:430px} - .hero .kicker{font-size:15px} - .hero-ornament{width:48px;height:48%} - .hero .meta{margin-bottom:-34px;font-size:13px} +.hero { + min-height: 900px; + background: linear-gradient(90deg, #f8eee1 0 44%, #f8eee1 44%, #f0dfcd 100%); + position: relative; + display: flex; + align-items: stretch; + overflow: hidden; + border-bottom: 1px solid rgba(198, 146, 77, .38) +} + +.hero-photo { + position: absolute; + z-index: 0; + top: 0; + right: 0; + width: 61%; + height: 100%; + background-image: linear-gradient(90deg, rgba(248, 238, 225, .96) 0%, rgba(248, 238, 225, .42) 15%, rgba(248, 238, 225, 0) 34%), url(images/image-95626fbe7811.webp); + background-size: cover; + background-position: center center; + background-repeat: no-repeat; + filter: saturate(.93) contrast(1.02) +} + +.hero:before { + content: ""; + position: absolute; + z-index: 1; + left: -4%; + right: -4%; + bottom: -58px; + height: 210px; + background: #082b4f; + clip-path: polygon(0 45%, 7% 53%, 15% 61%, 24% 68%, 34% 72%, 44% 69%, 55% 61%, 65% 58%, 75% 62%, 84% 71%, 92% 77%, 100% 72%, 100% 100%, 0 100%) +} + +.hero:after { + content: ""; + position: absolute; + z-index: 2; + left: -3%; + right: -3%; + bottom: 73px; + height: 118px; + border-top: 3px solid rgba(210, 164, 96, .95); + border-radius: 50%; + transform: rotate(1.8deg); + background: transparent; + clip-path: none +} + +.hero-inner { + position: relative; + z-index: 3; + width: min(1240px, 92%); + margin: auto; + padding: 105px 0 155px; + display: flex; + flex-direction: column; + justify-content: space-between; + min-height: 900px +} + +.hero-copy { + width: min(560px, 46vw); + padding-left: 34px +} + +.hero h1 { + font-size: clamp(92px, 10.8vw, 165px); + line-height: .82; + margin: 0 0 28px; + text-transform: uppercase; + letter-spacing: -.065em; + color: #073056; + max-width: none +} + +.hero h2 { + font-size: clamp(34px, 3.25vw, 56px); + line-height: 1.12; + font-weight: 500; + text-transform: uppercase; + margin: 0 0 36px; + max-width: 520px; + letter-spacing: .01em; + color: #0b3158 +} + +.hero .kicker { + display: flex; + align-items: center; + gap: 14px; + color: #7a5b3d; + font-size: 18px; + letter-spacing: .025em +} + +.hero .kicker:before { + content: ""; + width: 56px; + height: 1px; + background: #b98a4d +} + +.hero .kicker:after { + content: "◆"; + font-size: 9px; + color: #b98a4d; + margin-left: -16px +} + +.hero .meta { + align-self: center; + margin: 0 0 -42px; + color: #c7944f; + letter-spacing: .18em; + text-transform: uppercase; + font-size: 16px +} + +.hero-ornament { + position: absolute; + z-index: 2; + left: 0; + top: 0; + width: 82px; + height: 72%; + background: #0a3157; + border-right: 1px solid rgba(205, 159, 91, .7); + box-shadow: 16px 0 42px rgba(7, 36, 66, .08) +} + +.hero-ornament svg { + width: 100%; + height: 100%; + padding: 12px 10px; + fill: none; + stroke: #d4a55d; + stroke-width: 1.25; + opacity: .84 +} + +@media (max-width: 900px) { + .hero { + min-height: 760px; + background: #f8eee1 + } + + .hero-photo { + width: 100%; + height: 46%; + top: auto; + bottom: 120px; + background-image: linear-gradient(180deg, #f8eee1 0%, rgba(248, 238, 225, .08) 30%), url(images/image-95626fbe7811.webp); + background-position: center 42% + } + + .hero-inner { + min-height: 760px; + padding: 82px 0 130px + } + + .hero-copy { + width: 100%; + padding-left: 54px + } + + .hero h1 { + font-size: clamp(68px, 18vw, 110px) + } + + .hero h2 { + font-size: clamp(28px, 7vw, 42px); + max-width: 430px + } + + .hero .kicker { + font-size: 15px + } + + .hero-ornament { + width: 48px; + height: 48% + } + + .hero .meta { + margin-bottom: -34px; + font-size: 13px + } } /* v6: обложка-шапка по референсу + золотая рыбка у иркутских окон */ -.hero.hero-poster{display:block!important;min-height:0!important;height:auto!important;padding:0!important;background:none!important;overflow:hidden!important;position:relative!important} -.hero.hero-poster:before,.hero.hero-poster:after{display:none!important;content:none!important} -.hero-poster-img{display:block;width:100%;height:auto;max-height:none;object-fit:contain;background:#f7eadc} -.window-ornament{position:relative} -.window-ornament:after{content:"";position:absolute;right:8%;top:48%;width:92px;height:44px;transform:translateY(-50%);opacity:.9;background-repeat:no-repeat;background-size:contain;background-position:center;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 80'%3E%3Cg fill='none' stroke='%23c6924d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 41c22-24 54-31 84-19 15 6 27 17 35 29-10 7-22 14-36 17-31 7-60-2-83-27z'/%3E%3Cpath d='M137 51l27-18-3 29zM77 20l-9-14 23 9M79 65l-9 12 24-8M40 34c8 8 8 16 0 23'/%3E%3Ccircle cx='113' cy='36' r='2.8' fill='%23c6924d'/%3E%3Cpath d='M22 41H5'/%3E%3C/g%3E%3C/svg%3E")} -@media(max-width:700px){.window-ornament:after{width:68px;height:34px;right:3%}.hero-poster-img{min-height:360px;object-fit:cover;object-position:center}} +.hero.hero-poster { + display: block !important; + min-height: 0 !important; + height: auto !important; + padding: 0 !important; + background: none !important; + overflow: hidden !important; + position: relative !important +} + +.hero.hero-poster:before, .hero.hero-poster:after { + display: none !important; + content: none !important +} + +.hero-poster-img { + display: block; + width: 100%; + height: auto; + max-height: none; + object-fit: contain; + background: #f7eadc +} + +.window-ornament { + position: relative +} + +.window-ornament:after { + content: ""; + position: absolute; + right: 8%; + top: 48%; + width: 92px; + height: 44px; + transform: translateY(-50%); + opacity: .9; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 80'%3E%3Cg fill='none' stroke='%23c6924d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 41c22-24 54-31 84-19 15 6 27 17 35 29-10 7-22 14-36 17-31 7-60-2-83-27z'/%3E%3Cpath d='M137 51l27-18-3 29zM77 20l-9-14 23 9M79 65l-9 12 24-8M40 34c8 8 8 16 0 23'/%3E%3Ccircle cx='113' cy='36' r='2.8' fill='%23c6924d'/%3E%3Cpath d='M22 41H5'/%3E%3C/g%3E%3C/svg%3E") +} + +@media (max-width: 700px) { + .window-ornament:after { + width: 68px; + height: 34px; + right: 3% + } + + .hero-poster-img { + min-height: 360px; + object-fit: cover; + object-position: center + } +} /* ===== ЕДИНЫЙ ВИЗУАЛЬНЫЙ ЯЗЫК: ИРКУТСК · БАЙКАЛ · ПРИАНГАРЬЕ ===== */ -body{ - background: - radial-gradient(circle at 14% 7%,rgba(198,146,77,.08),transparent 24%), - radial-gradient(circle at 86% 48%,rgba(12,54,93,.06),transparent 25%), +body { + background: radial-gradient(circle at 14% 7%, rgba(198, 146, 77, .08), transparent 24%), + radial-gradient(circle at 86% 48%, rgba(12, 54, 93, .06), transparent 25%), #fbf4ea; } /* Шапка компактнее: меню видно сразу на большинстве ноутбуков */ -.hero.hero-poster{ - min-height:0!important; - height:clamp(430px,58vh,610px)!important; - max-height:610px!important; - background:#f7eadc!important; +.hero.hero-poster { + min-height: 0 !important; + height: clamp(430px, 58vh, 610px) !important; + max-height: 610px !important; + background: #f7eadc !important; } -.hero-poster-img{ - width:100%!important; - height:100%!important; - max-height:610px!important; - object-fit:cover!important; - object-position:center 47%!important; + +.hero-poster-img { + width: 100% !important; + height: 100% !important; + max-height: 610px !important; + object-fit: cover !important; + object-position: center 47% !important; } /* Навигация ближе к журнальному макету обложки */ -.nav{ - background:rgba(251,244,234,.97)!important; - border-bottom:1px solid rgba(198,146,77,.44); - box-shadow:0 8px 24px rgba(7,36,66,.07); +.nav { + background: rgba(251, 244, 234, .97) !important; + border-bottom: 1px solid rgba(198, 146, 77, .44); + box-shadow: 0 8px 24px rgba(7, 36, 66, .07); } -.nav-inner{ - color:var(--navy)!important; - padding:13px 0!important; - font-weight:700; - letter-spacing:.055em!important; + +.nav-inner { + color: var(--navy) !important; + padding: 13px 0 !important; + font-weight: 700; + letter-spacing: .055em !important; +} + +.nav a { + opacity: .92 !important +} + +.nav a:hover { + color: var(--gold) !important } -.nav a{opacity:.92!important} -.nav a:hover{color:var(--gold)!important} /* Заголовки разделов: тонкая линия, бурятский ромб и маленькая рыбка */ -.page-title{ - position:relative; - padding-top:26px; - border-top:1px solid rgba(198,146,77,.38); +.page-title { + position: relative; + padding-top: 26px; + border-top: 1px solid rgba(198, 146, 77, .38); } -.page-title:before{ - content:"◇ ◆ ◇"; - position:absolute; - top:-9px; - left:28px; - padding:0 10px; - color:var(--gold); - background:inherit; - font-size:15px; - letter-spacing:.22em; + +.page-title:before { + content: "◇ ◆ ◇"; + position: absolute; + top: -9px; + left: 28px; + padding: 0 10px; + color: var(--gold); + background: inherit; + font-size: 15px; + letter-spacing: .22em; } -.page-title:after{ - content:""; - position:absolute; - top:-18px; - right:18px; - width:86px; - height:38px; - opacity:.8; - background-repeat:no-repeat; - background-size:contain; - background-position:center; - background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 80'%3E%3Cg fill='none' stroke='%23c6924d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 41c22-24 54-31 84-19 15 6 27 17 35 29-10 7-22 14-36 17-31 7-60-2-83-27z'/%3E%3Cpath d='M137 51l27-18-3 29zM77 20l-9-14 23 9M79 65l-9 12 24-8M40 34c8 8 8 16 0 23'/%3E%3Ccircle cx='113' cy='36' r='2.8' fill='%23c6924d'/%3E%3C/g%3E%3C/svg%3E"); + +.page-title:after { + content: ""; + position: absolute; + top: -18px; + right: 18px; + width: 86px; + height: 38px; + opacity: .8; + background-repeat: no-repeat; + background-size: contain; + background-position: center; + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 80'%3E%3Cg fill='none' stroke='%23c6924d' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 41c22-24 54-31 84-19 15 6 27 17 35 29-10 7-22 14-36 17-31 7-60-2-83-27z'/%3E%3Cpath d='M137 51l27-18-3 29zM77 20l-9-14 23 9M79 65l-9 12 24-8M40 34c8 8 8 16 0 23'/%3E%3Ccircle cx='113' cy='36' r='2.8' fill='%23c6924d'/%3E%3C/g%3E%3C/svg%3E"); } /* Общая декоративная рамка для ключевых карточек */ -.arch-card,.restaurant-card,.museum-card,.map-card{ - border:1px solid rgba(198,146,77,.48)!important; - box-shadow:0 20px 54px rgba(7,36,66,.09)!important; +.arch-card, .restaurant-card, .museum-card, .map-card { + border: 1px solid rgba(198, 146, 77, .48) !important; + box-shadow: 0 20px 54px rgba(7, 36, 66, .09) !important; } -.arch-card,.restaurant-card,.museum-card{ - position:relative; + +.arch-card, .restaurant-card, .museum-card { + position: relative; } -.arch-card:after,.restaurant-card:after,.museum-card:after{ - content:""; - position:absolute; - pointer-events:none; - inset:9px; - border:1px solid rgba(198,146,77,.13); - border-radius:23px; + +.arch-card:after, .restaurant-card:after, .museum-card:after { + content: ""; + position: absolute; + pointer-events: none; + inset: 9px; + border: 1px solid rgba(198, 146, 77, .13); + border-radius: 23px; } /* Мягкие волны Ангары между разделами */ -.route-wrap,.architecture,.food-section,.museums-section{ - background-image: - radial-gradient(ellipse at 15% 0%,rgba(198,146,77,.09),transparent 35%), - linear-gradient(180deg,#fffaf3 0%,#f7eadc 100%); +.route-wrap, .architecture, .food-section, .museums-section { + background-image: radial-gradient(ellipse at 15% 0%, rgba(198, 146, 77, .09), transparent 35%), + linear-gradient(180deg, #fffaf3 0%, #f7eadc 100%); } -.route-wrap .page,.architecture .page,.food-section .page,.museums-section .page{ - position:relative; + +.route-wrap .page, .architecture .page, .food-section .page, .museums-section .page { + position: relative; } -.route-wrap .page:after,.food-section .page:after,.museums-section .page:after{ - content:""; - position:absolute; - left:2%; - right:2%; - bottom:24px; - height:62px; - opacity:.34; - pointer-events:none; - background: - radial-gradient(90% 65% at 20% 100%,transparent 63%,rgba(198,146,77,.75) 64%,transparent 66%), - radial-gradient(80% 65% at 70% 100%,transparent 63%,rgba(7,36,66,.45) 64%,transparent 66%); + +.route-wrap .page:after, .food-section .page:after, .museums-section .page:after { + content: ""; + position: absolute; + left: 2%; + right: 2%; + bottom: 24px; + height: 62px; + opacity: .34; + pointer-events: none; + background: radial-gradient(90% 65% at 20% 100%, transparent 63%, rgba(198, 146, 77, .75) 64%, transparent 66%), + radial-gradient(80% 65% at 70% 100%, transparent 63%, rgba(7, 36, 66, .45) 64%, transparent 66%); } /* Бурятские геометрические детали — тонко, как орнамент, а не этно-плакат */ -.regional-section .page:before,.museums-section .page:before{ - content:"◇ ◆ ◇ ◆ ◇ ◆ ◇"; - position:absolute; - right:0; - top:28px; - color:rgba(198,146,77,.45); - letter-spacing:.34em; - font-size:13px; +.regional-section .page:before, .museums-section .page:before { + content: "◇ ◆ ◇ ◆ ◇ ◆ ◇"; + position: absolute; + right: 0; + top: 28px; + color: rgba(198, 146, 77, .45); + letter-spacing: .34em; + font-size: 13px; } -.regional-section{ - background: - linear-gradient(135deg,rgba(198,146,77,.07) 0 1px,transparent 1px 22px), - linear-gradient(45deg,rgba(198,146,77,.05) 0 1px,transparent 1px 22px), - linear-gradient(180deg,#082846,#0c365d 50%,#072442)!important; - background-size:22px 22px,22px 22px,auto!important; + +.regional-section { + background: linear-gradient(135deg, rgba(198, 146, 77, .07) 0 1px, transparent 1px 22px), + linear-gradient(45deg, rgba(198, 146, 77, .05) 0 1px, transparent 1px 22px), + linear-gradient(180deg, #082846, #0c365d 50%, #072442) !important; + background-size: 22px 22px, 22px 22px, auto !important; } /* ===== МУЗЕИ КАК ПОЛНОЦЕННЫЕ ИСТОРИЧЕСКИЕ БЛОКИ ===== */ -.museums-section{ - position:relative; - overflow:hidden; - background: - linear-gradient(180deg,#072442 0%,#0b3154 15%,#f7eadc 15%,#fffaf3 100%)!important; - padding-top:1px; +.museums-section { + position: relative; + overflow: hidden; + background: linear-gradient(180deg, #072442 0%, #0b3154 15%, #f7eadc 15%, #fffaf3 100%) !important; + padding-top: 1px; } -.museums-section .page-title{ - color:#fff; - border-top-color:rgba(198,146,77,.62); + +.museums-section .page-title { + color: #fff; + border-top-color: rgba(198, 146, 77, .62); } -.museums-section .page-title p{color:#d6e0e8} -.museums-section .page-title:before{background:#082846} -.museum-ornament{margin-top:4px} -.museum-list{display:grid;gap:30px;margin-top:8px} -.museum-card{ - display:grid; - grid-template-columns:1.05fr .95fr; - min-height:455px; - background:rgba(255,250,244,.98); - border-radius:30px; - overflow:hidden; + +.museums-section .page-title p { + color: #d6e0e8 } -.museum-card:nth-child(even){grid-template-columns:.95fr 1.05fr} -.museum-card:nth-child(even) .museum-photo{order:2} -.museum-photo{ - min-height:390px; - background-position:center; - background-size:cover; - position:relative; + +.museums-section .page-title:before { + background: #082846 } -.museum-photo:before{ - content:""; - position:absolute; - inset:0; - background:linear-gradient(180deg,transparent 48%,rgba(7,36,66,.58)); + +.museum-ornament { + margin-top: 4px } -.museum-num{ - position:absolute; - z-index:2; - top:22px; - left:24px; - width:58px; - height:58px; - border-radius:50%; - display:grid; - place-items:center; - background:var(--navy); - color:#fff; - border:2px solid var(--gold); - font-weight:800; - font-size:18px; + +.museum-list { + display: grid; + gap: 30px; + margin-top: 8px } -.museum-body{ - position:relative; - z-index:2; - padding:42px 44px; - display:flex; - flex-direction:column; - justify-content:center; + +.museum-card { + display: grid; + grid-template-columns:1.05fr .95fr; + min-height: 455px; + background: rgba(255, 250, 244, .98); + border-radius: 30px; + overflow: hidden; } -.museum-kicker{ - color:var(--gold); - text-transform:uppercase; - letter-spacing:.12em; - font-size:13px; - font-weight:800; - margin-bottom:10px; + +.museum-card:nth-child(even) { + grid-template-columns:.95fr 1.05fr } -.museum-body h4{ - color:var(--navy); - font-size:34px; - line-height:1.06; - margin:0 0 14px; - letter-spacing:-.03em; + +.museum-card:nth-child(even) .museum-photo { + order: 2 } -.museum-address{ - color:#8b6a43; - font-size:14px; - font-weight:700; - margin-bottom:16px; + +.museum-photo { + min-height: 390px; + background-position: center; + background-size: cover; + position: relative; } -.museum-body p{ - margin:0; - color:#5f5149; - font-size:17px; - line-height:1.66; + +.museum-photo:before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(180deg, transparent 48%, rgba(7, 36, 66, .58)); } -.museum-fact{ - margin-top:22px; - padding-top:17px; - border-top:1px solid rgba(198,146,77,.34); - color:#75614f; - font-size:14px; - line-height:1.55; + +.museum-num { + position: absolute; + z-index: 2; + top: 22px; + left: 24px; + width: 58px; + height: 58px; + border-radius: 50%; + display: grid; + place-items: center; + background: var(--navy); + color: #fff; + border: 2px solid var(--gold); + font-weight: 800; + font-size: 18px; +} + +.museum-body { + position: relative; + z-index: 2; + padding: 42px 44px; + display: flex; + flex-direction: column; + justify-content: center; +} + +.museum-kicker { + color: var(--gold); + text-transform: uppercase; + letter-spacing: .12em; + font-size: 13px; + font-weight: 800; + margin-bottom: 10px; +} + +.museum-body h4 { + color: var(--navy); + font-size: 34px; + line-height: 1.06; + margin: 0 0 14px; + letter-spacing: -.03em; +} + +.museum-address { + color: #8b6a43; + font-size: 14px; + font-weight: 700; + margin-bottom: 16px; +} + +.museum-body p { + margin: 0; + color: #5f5149; + font-size: 17px; + line-height: 1.66; +} + +.museum-fact { + margin-top: 22px; + padding-top: 17px; + border-top: 1px solid rgba(198, 146, 77, .34); + color: #75614f; + font-size: 14px; + line-height: 1.55; +} + +.museum-fact b { + color: var(--navy) } -.museum-fact b{color:var(--navy)} /* Наличники + рыба остаются повторяющимся мотивом */ -.window-ornament{ - filter:drop-shadow(0 5px 12px rgba(198,146,77,.08)); +.window-ornament { + filter: drop-shadow(0 5px 12px rgba(198, 146, 77, .08)); } -.window-ornament:before{ - content:"◇"; - position:absolute; - left:8%; - top:40%; - transform:translateY(-50%); - color:var(--gold); - opacity:.65; - font-size:28px; + +.window-ornament:before { + content: "◇"; + position: absolute; + left: 8%; + top: 40%; + transform: translateY(-50%); + color: var(--gold); + opacity: .65; + font-size: 28px; } /* Финал без отдельного блока Байкала */ -.regional-footer{ - position:relative; - overflow:hidden; - padding:54px 8% 50px!important; - text-align:center; - color:#f7eadc!important; - background:linear-gradient(180deg,#0c365d,#072442)!important; - border-top:2px solid var(--gold); +.regional-footer { + position: relative; + overflow: hidden; + padding: 54px 8% 50px !important; + text-align: center; + color: #f7eadc !important; + background: linear-gradient(180deg, #0c365d, #072442) !important; + border-top: 2px solid var(--gold); } -.regional-footer:before,.regional-footer:after{ - content:""; - position:absolute; - left:-10%; - right:-10%; - height:70px; - border-top:1px solid rgba(198,146,77,.55); - border-radius:50%; + +.regional-footer:before, .regional-footer:after { + content: ""; + position: absolute; + left: -10%; + right: -10%; + height: 70px; + border-top: 1px solid rgba(198, 146, 77, .55); + border-radius: 50%; } -.regional-footer:before{top:20px;transform:rotate(-2deg)} -.regional-footer:after{bottom:-30px;transform:rotate(2deg)} -.footer-lineart{ - color:var(--gold); - display:flex; - align-items:center; - justify-content:center; - gap:24px; - margin-bottom:14px; - font-size:22px; - letter-spacing:.15em; + +.regional-footer:before { + top: 20px; + transform: rotate(-2deg) +} + +.regional-footer:after { + bottom: -30px; + transform: rotate(2deg) +} + +.footer-lineart { + color: var(--gold); + display: flex; + align-items: center; + justify-content: center; + gap: 24px; + margin-bottom: 14px; + font-size: 22px; + letter-spacing: .15em; +} + +.footer-window { + font-size: 32px +} + +.footer-fish { + font-size: 24px +} + +.regional-footer small { + display: block; + margin-top: 9px; + opacity: .8; + letter-spacing: .06em } -.footer-window{font-size:32px} -.footer-fish{font-size:24px} -.regional-footer small{display:block;margin-top:9px;opacity:.8;letter-spacing:.06em} /* Адаптация */ -@media(max-width:900px){ - .hero.hero-poster{height:430px!important} - .hero-poster-img{max-height:430px!important;object-position:center 47%!important} - .museum-card,.museum-card:nth-child(even){grid-template-columns:1fr} - .museum-card:nth-child(even) .museum-photo{order:0} - .museum-body{padding:30px} - .museum-photo{min-height:300px} - .page-title:after{width:64px;right:0} +@media (max-width: 900px) { + .hero.hero-poster { + height: 430px !important + } + + .hero-poster-img { + max-height: 430px !important; + object-position: center 47% !important + } + + .museum-card, .museum-card:nth-child(even) { + grid-template-columns:1fr + } + + .museum-card:nth-child(even) .museum-photo { + order: 0 + } + + .museum-body { + padding: 30px + } + + .museum-photo { + min-height: 300px + } + + .page-title:after { + width: 64px; + right: 0 + } } -@media(max-width:600px){ - .hero.hero-poster{height:360px!important} - .hero-poster-img{max-height:360px!important} - .page-title:after{display:none} + +@media (max-width: 600px) { + .hero.hero-poster { + height: 360px !important + } + + .hero-poster-img { + max-height: 360px !important + } + + .page-title:after { + display: none + } } /* ===== PREMIUM HERO V8 ===== */ -.premium-topbar{ - position:relative; - z-index:50; - height:76px; - background:rgba(251,246,238,.96); - backdrop-filter:blur(16px); - border-bottom:1px solid rgba(198,146,77,.26); - box-shadow:0 10px 34px rgba(7,36,66,.06); -} -.premium-nav-inner{ - width:min(1320px,92%); - height:100%; - margin:auto; - display:flex; - align-items:center; - justify-content:space-between; - gap:30px; -} -.premium-brand{ - display:flex; - align-items:center; - gap:12px; - color:var(--navy); - min-width:220px; -} -.brand-mark{width:42px;height:42px;display:grid;place-items:center;color:var(--gold)} -.brand-mark svg{width:100%;height:100%} -.premium-brand b{ - display:block; - font-family:Georgia,"Times New Roman",serif; - font-size:23px; - letter-spacing:.05em; - line-height:1; -} -.premium-brand small{ - display:block; - margin-top:4px; - font-size:8px; - letter-spacing:.16em; - font-weight:800; -} -.premium-menu{ - display:flex; - align-items:center; - gap:28px; - font-size:13px; - font-weight:700; - color:var(--navy); -} -.premium-menu a{ - position:relative; - padding:28px 0 24px; - opacity:.9; - transition:.25s ease; -} -.premium-menu a:after{ - content:""; - position:absolute; - left:50%; - bottom:15px; - width:0; - height:2px; - background:var(--gold); - transform:translateX(-50%); - transition:.25s ease; -} -.premium-menu a:hover{color:var(--gold)} -.premium-menu a:hover:after{width:70%} - -.premium-hero{ - position:relative; - min-height:0; - height:clamp(540px,68vh,720px); - overflow:hidden; - isolation:isolate; - background:#e9d7c3; -} -.hero-photo{ - position:absolute; - inset:0; - z-index:-5; - background-size:cover; - background-position:center 47%; - transform:scale(1.035); - animation:heroPhotoBreath 16s ease-in-out infinite alternate; -} -.hero-photo-shade{ - position:absolute; - inset:0; - z-index:-4; - background: - linear-gradient(90deg,rgba(248,238,226,.18) 0 34%,rgba(248,238,226,.02) 53%,rgba(7,36,66,.08) 100%), - linear-gradient(180deg,rgba(7,36,66,.04),rgba(7,36,66,.08)); -} -.hero-cream{ - position:absolute; - z-index:-3; - left:0; - top:0; - bottom:0; - width:49%; - background: - radial-gradient(circle at 30% 28%,rgba(255,255,255,.84),transparent 25%), - linear-gradient(90deg,#fbf4ea 0%,rgba(251,244,234,.97) 60%,rgba(251,244,234,.82) 79%,rgba(251,244,234,0) 100%); -} -.hero-cream:after{ - content:""; - position:absolute; - inset:0; - opacity:.25; - background-image:radial-gradient(rgba(111,79,63,.17) .6px,transparent .6px); - background-size:5px 5px; - mask-image:linear-gradient(90deg,#000 0 70%,transparent); -} -.window-lace{ - position:absolute; - z-index:3; - top:0; - bottom:110px; - color:rgba(198,146,77,.63); - pointer-events:none; -} -.window-lace-left{left:0;width:88px} -.window-lace svg{width:100%;height:100%} -.hero-copy{ - position:absolute; - z-index:8; - top:12%; - left:max(8.5%,calc((100vw - 1320px)/2 + 40px)); - width:min(540px,42vw); - color:var(--navy); -} -.hero-eyebrow{ - margin-bottom:16px; - font-size:14px; - letter-spacing:.28em; - font-weight:700; - opacity:.82; - animation:fadeUp .75s ease both .1s; -} -.hero-copy h1{ - margin:0; - font-family:Georgia,"Times New Roman",serif; - font-size:clamp(76px,8vw,128px); - line-height:.84; - letter-spacing:-.055em; - font-weight:700; - animation:fadeUp .9s ease both .2s; -} -.hero-copy h2{ - margin:18px 0 0; - font-size:clamp(29px,3.1vw,48px); - line-height:1.08; - letter-spacing:.055em; - font-weight:500; - animation:fadeUp .9s ease both .32s; -} -.hero-note{ - display:flex; - align-items:center; - gap:10px; - margin-top:22px; - color:#9b743c; - font-size:17px; - letter-spacing:.045em; - animation:fadeUp .9s ease both .44s; -} -.hero-note span{width:76px;height:1px;background:var(--gold)} -.hero-note i{ - width:9px;height:9px; - background:var(--gold); - transform:rotate(45deg); - margin-left:-15px; -} -.hero-actions{ - display:flex; - gap:12px; - margin-top:24px; - animation:fadeUp .9s ease both .56s; -} -.hero-btn{ - min-height:48px; - padding:0 23px; - border-radius:999px; - display:inline-flex; - align-items:center; - justify-content:center; - gap:10px; - font-size:14px; - font-weight:700; - transition:.25s ease; -} -.hero-btn-primary{ - color:white; - background:linear-gradient(135deg,#0b426e,#072442); - box-shadow:0 12px 30px rgba(7,36,66,.22); - border:1px solid rgba(255,255,255,.14); -} -.hero-btn-light{ - background:rgba(251,244,234,.78); - border:1px solid rgba(198,146,77,.72); - color:var(--navy); - backdrop-filter:blur(8px); -} -.hero-btn:hover{transform:translateY(-2px)} -.hero-btn-primary:hover{box-shadow:0 16px 34px rgba(7,36,66,.28)} -.hero-quote{ - position:absolute; - z-index:8; - right:7%; - top:17%; - width:285px; - color:#0b3154; - text-shadow:0 1px 14px rgba(255,248,238,.75); - animation:fadeIn 1.2s ease both .75s; -} -.hero-quote blockquote{ - margin:0; - font-family:Georgia,"Times New Roman",serif; - font-size:24px; - line-height:1.32; - font-style:italic; -} -.quote-line{ - margin:18px 0 0 auto; - width:78px; - height:18px; - border-top:2px solid var(--gold); - border-radius:50%; - transform:rotate(-7deg); -} -.angara-badge{ - position:absolute; - right:5.2%; - bottom:72px; - z-index:10; - width:146px; - height:146px; - border-radius:50%; - display:flex; - flex-direction:column; - align-items:center; - justify-content:center; - color:#f6dfb3; - background:rgba(7,36,66,.64); - border:1px solid rgba(198,146,77,.8); - backdrop-filter:blur(8px); - box-shadow:0 18px 40px rgba(7,36,66,.22); - letter-spacing:.12em; - animation:floatBadge 4.2s ease-in-out infinite; -} -.angara-badge span{font-size:18px;margin-bottom:6px} -.angara-badge b{font-size:13px} -.angara-badge small{font-size:9px;margin-top:4px} -.angara-badge a{ - position:absolute; - bottom:10px; - width:30px;height:30px;border-radius:50%; - border:1px solid rgba(246,223,179,.8); - display:grid;place-items:center; - font-size:18px; -} -.hero-waves{ - position:absolute; - z-index:6; - left:0;right:0;bottom:-1px; - height:190px; - pointer-events:none; -} -.hero-waves svg{position:absolute;inset:0;width:100%;height:100%} -.wave1{fill:#082846;opacity:.98} -.wave2{fill:#0e4b79;opacity:.68} -.wave-line{fill:none;stroke:#d0a466;stroke-width:2;opacity:.75} -.wave-line-2{fill:none;stroke:#f2d8ae;stroke-width:1.5;opacity:.7} -.gold-fish{ - position:absolute; - left:24%; - bottom:48px; - width:126px; - color:#c6924d; - animation:fishDrift 7s ease-in-out infinite; -} -.gold-fish svg{position:static;width:100%;height:auto} -.hero-feature-strip{ - min-height:135px; - display:grid; - grid-template-columns:repeat(5,1fr); - background:#fbf4ea; - border-bottom:1px solid rgba(198,146,77,.25); - box-shadow:0 10px 30px rgba(7,36,66,.045); -} -.hero-feature-strip a{ - min-width:0; - padding:24px 20px 20px; - text-align:center; - position:relative; - transition:.25s ease; -} -.hero-feature-strip a:not(:last-child):after{ - content:""; - position:absolute;right:0;top:27%;bottom:27%; - width:1px;background:rgba(198,146,77,.28); -} -.hero-feature-strip a:hover{background:rgba(198,146,77,.055)} -.feature-icon{ - display:block; - height:28px; - color:var(--gold); - font-size:26px; - line-height:1; - margin-bottom:8px; -} -.hero-feature-strip b{ - display:block; - color:var(--navy); - font-size:13px; - letter-spacing:.04em; -} -.hero-feature-strip small{ - display:block; - margin-top:6px; - color:#6c5a4d; - font-size:11px; - line-height:1.35; +.premium-topbar { + position: relative; + z-index: 50; + height: 76px; + background: rgba(251, 246, 238, .96); + backdrop-filter: blur(16px); + border-bottom: 1px solid rgba(198, 146, 77, .26); + box-shadow: 0 10px 34px rgba(7, 36, 66, .06); } -@keyframes heroPhotoBreath{ - from{transform:scale(1.035) translate3d(0,0,0)} - to{transform:scale(1.07) translate3d(-.4%,.3%,0)} -} -@keyframes fadeUp{ - from{opacity:0;transform:translateY(18px)} - to{opacity:1;transform:translateY(0)} -} -@keyframes fadeIn{ - from{opacity:0} - to{opacity:1} -} -@keyframes floatBadge{ - 0%,100%{transform:translateY(0)} - 50%{transform:translateY(-7px)} -} -@keyframes fishDrift{ - 0%,100%{transform:translateX(0) rotate(-2deg)} - 50%{transform:translateX(24px) rotate(2deg)} +.premium-nav-inner { + width: min(1320px, 92%); + height: 100%; + margin: auto; + display: flex; + align-items: center; + justify-content: space-between; + gap: 30px; } -@media(max-width:1120px){ - .premium-menu{gap:16px;font-size:12px} - .premium-brand{min-width:185px} - .hero-quote{display:none} - .hero-copy{left:8%;width:48vw} -} -@media(max-width:850px){ - .premium-topbar{height:auto} - .premium-nav-inner{padding:12px 0;flex-wrap:wrap} - .premium-menu{width:100%;overflow:auto;padding-bottom:3px} - .premium-menu a{padding:7px 0 9px;white-space:nowrap} - .premium-menu a:after{bottom:2px} - .premium-hero{height:610px} - .hero-cream{width:70%} - .hero-copy{left:9%;top:10%;width:70vw} - .hero-copy h1{font-size:72px} - .hero-copy h2{font-size:31px} - .angara-badge{right:4%;bottom:68px;width:116px;height:116px} - .hero-feature-strip{grid-template-columns:repeat(2,1fr)} - .hero-feature-strip a:last-child{grid-column:1/-1} -} -@media(max-width:560px){ - .premium-brand small{display:none} - .premium-menu{gap:18px} - .premium-hero{height:565px} - .hero-photo{background-position:59% center} - .hero-cream{width:88%} - .window-lace{opacity:.45;width:54px} - .hero-copy{left:11%;top:8%;width:80vw} - .hero-eyebrow{font-size:10px} - .hero-copy h1{font-size:54px} - .hero-copy h2{font-size:24px} - .hero-note{font-size:13px} - .hero-note span{width:44px} - .hero-actions{flex-direction:column;align-items:flex-start} - .hero-btn{min-height:44px} - .angara-badge{display:none} - .gold-fish{left:11%;width:96px} - .hero-feature-strip{grid-template-columns:1fr} - .hero-feature-strip a:not(:last-child):after{top:auto;left:14%;right:14%;bottom:0;width:auto;height:1px} - .hero-feature-strip a:last-child{grid-column:auto} -} -@media(prefers-reduced-motion:reduce){ - .hero-photo,.hero-eyebrow,.hero-copy h1,.hero-copy h2,.hero-note,.hero-actions,.hero-quote,.angara-badge,.gold-fish{ - animation:none!important; - } +.premium-brand { + display: flex; + align-items: center; + gap: 12px; + color: var(--navy); + min-width: 220px; } +.brand-mark { + width: 42px; + height: 42px; + display: grid; + place-items: center; + color: var(--gold) +} + +.brand-mark svg { + width: 100%; + height: 100% +} + +.premium-brand b { + display: block; + font-family: Georgia, "Times New Roman", serif; + font-size: 23px; + letter-spacing: .05em; + line-height: 1; +} + +.premium-brand small { + display: block; + margin-top: 4px; + font-size: 8px; + letter-spacing: .16em; + font-weight: 800; +} + +.premium-menu { + display: flex; + align-items: center; + gap: 28px; + font-size: 13px; + font-weight: 700; + color: var(--navy); +} + +.premium-menu a { + position: relative; + padding: 28px 0 24px; + opacity: .9; + transition: .25s ease; +} + +.premium-menu a:after { + content: ""; + position: absolute; + left: 50%; + bottom: 15px; + width: 0; + height: 2px; + background: var(--gold); + transform: translateX(-50%); + transition: .25s ease; +} + +.premium-menu a:hover { + color: var(--gold) +} + +.premium-menu a:hover:after { + width: 70% +} + +.premium-hero { + position: relative; + min-height: 0; + height: clamp(540px, 68vh, 720px); + overflow: hidden; + isolation: isolate; + background: #e9d7c3; +} + +.hero-photo { + position: absolute; + inset: 0; + z-index: -5; + background-size: cover; + background-position: center 47%; + transform: scale(1.035); + animation: heroPhotoBreath 16s ease-in-out infinite alternate; +} + +.hero-photo-shade { + position: absolute; + inset: 0; + z-index: -4; + background: linear-gradient(90deg, rgba(248, 238, 226, .18) 0 34%, rgba(248, 238, 226, .02) 53%, rgba(7, 36, 66, .08) 100%), + linear-gradient(180deg, rgba(7, 36, 66, .04), rgba(7, 36, 66, .08)); +} + +.hero-cream { + position: absolute; + z-index: -3; + left: 0; + top: 0; + bottom: 0; + width: 49%; + background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, .84), transparent 25%), + linear-gradient(90deg, #fbf4ea 0%, rgba(251, 244, 234, .97) 60%, rgba(251, 244, 234, .82) 79%, rgba(251, 244, 234, 0) 100%); +} + +.hero-cream:after { + content: ""; + position: absolute; + inset: 0; + opacity: .25; + background-image: radial-gradient(rgba(111, 79, 63, .17) .6px, transparent .6px); + background-size: 5px 5px; + mask-image: linear-gradient(90deg, #000 0 70%, transparent); +} + +.window-lace { + position: absolute; + z-index: 3; + top: 0; + bottom: 110px; + color: rgba(198, 146, 77, .63); + pointer-events: none; +} + +.window-lace-left { + left: 0; + width: 88px +} + +.window-lace svg { + width: 100%; + height: 100% +} + +.hero-copy { + position: absolute; + z-index: 8; + top: 12%; + left: max(8.5%, calc((100vw - 1320px) / 2 + 40px)); + width: min(540px, 42vw); + color: var(--navy); +} + +.hero-eyebrow { + margin-bottom: 16px; + font-size: 14px; + letter-spacing: .28em; + font-weight: 700; + opacity: .82; + animation: fadeUp .75s ease both .1s; +} + +.hero-copy h1 { + margin: 0; + font-family: Georgia, "Times New Roman", serif; + font-size: clamp(76px, 8vw, 128px); + line-height: .84; + letter-spacing: -.055em; + font-weight: 700; + animation: fadeUp .9s ease both .2s; +} + +.hero-copy h2 { + margin: 18px 0 0; + font-size: clamp(29px, 3.1vw, 48px); + line-height: 1.08; + letter-spacing: .055em; + font-weight: 500; + animation: fadeUp .9s ease both .32s; +} + +.hero-note { + display: flex; + align-items: center; + gap: 10px; + margin-top: 22px; + color: #9b743c; + font-size: 17px; + letter-spacing: .045em; + animation: fadeUp .9s ease both .44s; +} + +.hero-note span { + width: 76px; + height: 1px; + background: var(--gold) +} + +.hero-note i { + width: 9px; + height: 9px; + background: var(--gold); + transform: rotate(45deg); + margin-left: -15px; +} + +.hero-actions { + display: flex; + gap: 12px; + margin-top: 24px; + animation: fadeUp .9s ease both .56s; +} + +.hero-btn { + min-height: 48px; + padding: 0 23px; + border-radius: 999px; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 10px; + font-size: 14px; + font-weight: 700; + transition: .25s ease; +} + +.hero-btn-primary { + color: white; + background: linear-gradient(135deg, #0b426e, #072442); + box-shadow: 0 12px 30px rgba(7, 36, 66, .22); + border: 1px solid rgba(255, 255, 255, .14); +} + +.hero-btn-light { + background: rgba(251, 244, 234, .78); + border: 1px solid rgba(198, 146, 77, .72); + color: var(--navy); + backdrop-filter: blur(8px); +} + +.hero-btn:hover { + transform: translateY(-2px) +} + +.hero-btn-primary:hover { + box-shadow: 0 16px 34px rgba(7, 36, 66, .28) +} + +.hero-quote { + position: absolute; + z-index: 8; + right: 7%; + top: 17%; + width: 285px; + color: #0b3154; + text-shadow: 0 1px 14px rgba(255, 248, 238, .75); + animation: fadeIn 1.2s ease both .75s; +} + +.hero-quote blockquote { + margin: 0; + font-family: Georgia, "Times New Roman", serif; + font-size: 24px; + line-height: 1.32; + font-style: italic; +} + +.quote-line { + margin: 18px 0 0 auto; + width: 78px; + height: 18px; + border-top: 2px solid var(--gold); + border-radius: 50%; + transform: rotate(-7deg); +} + +.angara-badge { + position: absolute; + right: 5.2%; + bottom: 72px; + z-index: 10; + width: 146px; + height: 146px; + border-radius: 50%; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + color: #f6dfb3; + background: rgba(7, 36, 66, .64); + border: 1px solid rgba(198, 146, 77, .8); + backdrop-filter: blur(8px); + box-shadow: 0 18px 40px rgba(7, 36, 66, .22); + letter-spacing: .12em; + animation: floatBadge 4.2s ease-in-out infinite; +} + +.angara-badge span { + font-size: 18px; + margin-bottom: 6px +} + +.angara-badge b { + font-size: 13px +} + +.angara-badge small { + font-size: 9px; + margin-top: 4px +} + +.angara-badge a { + position: absolute; + bottom: 10px; + width: 30px; + height: 30px; + border-radius: 50%; + border: 1px solid rgba(246, 223, 179, .8); + display: grid; + place-items: center; + font-size: 18px; +} + +.hero-waves { + position: absolute; + z-index: 6; + left: 0; + right: 0; + bottom: -1px; + height: 190px; + pointer-events: none; +} + +.hero-waves svg { + position: absolute; + inset: 0; + width: 100%; + height: 100% +} + +.wave1 { + fill: #082846; + opacity: .98 +} + +.wave2 { + fill: #0e4b79; + opacity: .68 +} + +.wave-line { + fill: none; + stroke: #d0a466; + stroke-width: 2; + opacity: .75 +} + +.wave-line-2 { + fill: none; + stroke: #f2d8ae; + stroke-width: 1.5; + opacity: .7 +} + +.gold-fish { + position: absolute; + left: 24%; + bottom: 48px; + width: 126px; + color: #c6924d; + animation: fishDrift 7s ease-in-out infinite; +} + +.gold-fish svg { + position: static; + width: 100%; + height: auto +} + +.hero-feature-strip { + min-height: 135px; + display: grid; + grid-template-columns:repeat(5, 1fr); + background: #fbf4ea; + border-bottom: 1px solid rgba(198, 146, 77, .25); + box-shadow: 0 10px 30px rgba(7, 36, 66, .045); +} + +.hero-feature-strip a { + min-width: 0; + padding: 24px 20px 20px; + text-align: center; + position: relative; + transition: .25s ease; +} + +.hero-feature-strip a:not(:last-child):after { + content: ""; + position: absolute; + right: 0; + top: 27%; + bottom: 27%; + width: 1px; + background: rgba(198, 146, 77, .28); +} + +.hero-feature-strip a:hover { + background: rgba(198, 146, 77, .055) +} + +.feature-icon { + display: block; + height: 28px; + color: var(--gold); + font-size: 26px; + line-height: 1; + margin-bottom: 8px; +} + +.hero-feature-strip b { + display: block; + color: var(--navy); + font-size: 13px; + letter-spacing: .04em; +} + +.hero-feature-strip small { + display: block; + margin-top: 6px; + color: #6c5a4d; + font-size: 11px; + line-height: 1.35; +} + +@keyframes heroPhotoBreath { + from { + transform: scale(1.035) translate3d(0, 0, 0) + } + to { + transform: scale(1.07) translate3d(-.4%, .3%, 0) + } +} + +@keyframes fadeUp { + from { + opacity: 0; + transform: translateY(18px) + } + to { + opacity: 1; + transform: translateY(0) + } +} + +@keyframes fadeIn { + from { + opacity: 0 + } + to { + opacity: 1 + } +} + +@keyframes floatBadge { + 0%, 100% { + transform: translateY(0) + } + 50% { + transform: translateY(-7px) + } +} + +@keyframes fishDrift { + 0%, 100% { + transform: translateX(0) rotate(-2deg) + } + 50% { + transform: translateX(24px) rotate(2deg) + } +} + +@media (max-width: 1120px) { + .premium-menu { + gap: 16px; + font-size: 12px + } + + .premium-brand { + min-width: 185px + } + + .hero-quote { + display: none + } + + .hero-copy { + left: 8%; + width: 48vw + } +} + +@media (max-width: 850px) { + .premium-topbar { + height: auto + } + + .premium-nav-inner { + padding: 12px 0; + flex-wrap: wrap + } + + .premium-menu { + width: 100%; + overflow: auto; + padding-bottom: 3px + } + + .premium-menu a { + padding: 7px 0 9px; + white-space: nowrap + } + + .premium-menu a:after { + bottom: 2px + } + + .premium-hero { + height: 610px + } + + .hero-cream { + width: 70% + } + + .hero-copy { + left: 9%; + top: 10%; + width: 70vw + } + + .hero-copy h1 { + font-size: 72px + } + + .hero-copy h2 { + font-size: 31px + } + + .angara-badge { + right: 4%; + bottom: 68px; + width: 116px; + height: 116px + } + + .hero-feature-strip { + grid-template-columns:repeat(2, 1fr) + } + + .hero-feature-strip a:last-child { + grid-column: 1/-1 + } +} + +@media (max-width: 560px) { + .premium-brand small { + display: none + } + + .premium-menu { + gap: 18px + } + + .premium-hero { + height: 565px + } + + .hero-photo { + background-position: 59% center + } + + .hero-cream { + width: 88% + } + + .window-lace { + opacity: .45; + width: 54px + } + + .hero-copy { + left: 11%; + top: 8%; + width: 80vw + } + + .hero-eyebrow { + font-size: 10px + } + + .hero-copy h1 { + font-size: 54px + } + + .hero-copy h2 { + font-size: 24px + } + + .hero-note { + font-size: 13px + } + + .hero-note span { + width: 44px + } + + .hero-actions { + flex-direction: column; + align-items: flex-start + } + + .hero-btn { + min-height: 44px + } + + .angara-badge { + display: none + } + + .gold-fish { + left: 11%; + width: 96px + } + + .hero-feature-strip { + grid-template-columns:1fr + } + + .hero-feature-strip a:not(:last-child):after { + top: auto; + left: 14%; + right: 14%; + bottom: 0; + width: auto; + height: 1px + } + + .hero-feature-strip a:last-child { + grid-column: auto + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-photo, .hero-eyebrow, .hero-copy h1, .hero-copy h2, .hero-note, .hero-actions, .hero-quote, .angara-badge, .gold-fish { + animation: none !important; + } +} /* ===== V10: БАЙКАЛ + ИРКУТСК — РЫБЫ ТОЛЬКО В ШАПКЕ ===== */ -.premium-hero .hero-photo{ - background-size:cover!important; - background-position:center 43%!important; - filter:saturate(1.04) contrast(1.03); +.premium-hero .hero-photo { + background-size: cover !important; + background-position: center 43% !important; + filter: saturate(1.04) contrast(1.03); } /* Лёгкая водная дымка: ощущение Байкала поверх городского пейзажа */ -.premium-hero:before{ - content:""; - position:absolute; - inset:0; - z-index:1; - pointer-events:none; - background: - radial-gradient(ellipse at 58% 14%,rgba(255,255,255,.12),transparent 26%), - linear-gradient(180deg,rgba(7,56,94,.16) 0%,rgba(7,56,94,.05) 28%,transparent 52%); - mix-blend-mode:soft-light; +.premium-hero:before { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + background: radial-gradient(ellipse at 58% 14%, rgba(255, 255, 255, .12), transparent 26%), + linear-gradient(180deg, rgba(7, 56, 94, .16) 0%, rgba(7, 56, 94, .05) 28%, transparent 52%); + mix-blend-mode: soft-light; } /* Рыбы существуют только внутри hero */ -.hero-water-fish{ - position:absolute; - inset:0; - z-index:7; - overflow:hidden; - pointer-events:none; - mask-image:linear-gradient(180deg,#000 0%,#000 82%,transparent 100%); +.hero-water-fish { + position: absolute; + inset: 0; + z-index: 7; + overflow: hidden; + pointer-events: none; + mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%); } -.hero-fish{ - position:absolute; - display:block; - color:rgba(214,166,96,.68); - filter:drop-shadow(0 4px 8px rgba(3,29,51,.16)); - opacity:0; - will-change:transform,opacity; + +.hero-fish { + position: absolute; + display: block; + color: rgba(214, 166, 96, .68); + filter: drop-shadow(0 4px 8px rgba(3, 29, 51, .16)); + opacity: 0; + will-change: transform, opacity; +} + +.hero-fish svg { + display: block; + width: 100%; + height: auto } -.hero-fish svg{display:block;width:100%;height:auto} /* Разные глубины, размеры и направления */ -.hf1{width:118px;top:15%;left:-16%;animation:diveRight1 17s linear infinite 0s} -.hf2{width:78px;top:28%;left:-14%;animation:diveRight2 21s linear infinite 4s;color:rgba(240,196,126,.58)} -.hf3{width:142px;top:42%;right:-18%;animation:diveLeft1 24s linear infinite 2s} -.hf4{width:64px;top:54%;left:-12%;animation:diveRight3 19s linear infinite 8s;color:rgba(14,67,104,.62)} -.hf5{width:96px;top:67%;right:-14%;animation:diveLeft2 22s linear infinite 11s;color:rgba(238,190,113,.54)} -.hf6{width:52px;top:36%;right:-12%;animation:diveLeft3 16s linear infinite 6s;color:rgba(14,67,104,.48)} +.hf1 { + width: 118px; + top: 15%; + left: -16%; + animation: diveRight1 17s linear infinite 0s +} -@keyframes diveRight1{ - 0%{transform:translate3d(-8vw,-18px,0) rotate(-7deg) scale(.92);opacity:0} - 8%{opacity:.72} - 28%{transform:translate3d(28vw,10px,0) rotate(5deg) scale(1)} - 52%{transform:translate3d(58vw,62px,0) rotate(12deg) scale(.94);opacity:.78} - 74%{transform:translate3d(84vw,16px,0) rotate(-4deg) scale(1.02)} - 92%{opacity:.64} - 100%{transform:translate3d(124vw,-36px,0) rotate(-9deg) scale(.9);opacity:0} +.hf2 { + width: 78px; + top: 28%; + left: -14%; + animation: diveRight2 21s linear infinite 4s; + color: rgba(240, 196, 126, .58) } -@keyframes diveRight2{ - 0%{transform:translate3d(-10vw,34px,0) rotate(9deg) scale(.8);opacity:0} - 10%{opacity:.55} - 36%{transform:translate3d(34vw,-26px,0) rotate(-10deg) scale(.92)} - 64%{transform:translate3d(74vw,42px,0) rotate(13deg) scale(.86);opacity:.62} - 100%{transform:translate3d(122vw,-12px,0) rotate(-5deg) scale(.78);opacity:0} + +.hf3 { + width: 142px; + top: 42%; + right: -18%; + animation: diveLeft1 24s linear infinite 2s } -@keyframes diveRight3{ - 0%{transform:translate3d(-12vw,-12px,0) rotate(-4deg);opacity:0} - 12%{opacity:.48} - 46%{transform:translate3d(48vw,40px,0) rotate(11deg)} - 76%{transform:translate3d(86vw,-32px,0) rotate(-9deg);opacity:.5} - 100%{transform:translate3d(122vw,12px,0) rotate(4deg);opacity:0} + +.hf4 { + width: 64px; + top: 54%; + left: -12%; + animation: diveRight3 19s linear infinite 8s; + color: rgba(14, 67, 104, .62) } -@keyframes diveLeft1{ - 0%{transform:translate3d(12vw,-28px,0) scaleX(-1) rotate(-6deg);opacity:0} - 10%{opacity:.7} - 32%{transform:translate3d(-28vw,20px,0) scaleX(-1) rotate(8deg)} - 58%{transform:translate3d(-62vw,76px,0) scaleX(-1) rotate(14deg);opacity:.76} - 82%{transform:translate3d(-92vw,4px,0) scaleX(-1) rotate(-5deg)} - 100%{transform:translate3d(-126vw,-40px,0) scaleX(-1) rotate(-10deg);opacity:0} + +.hf5 { + width: 96px; + top: 67%; + right: -14%; + animation: diveLeft2 22s linear infinite 11s; + color: rgba(238, 190, 113, .54) } -@keyframes diveLeft2{ - 0%{transform:translate3d(10vw,18px,0) scaleX(-1) rotate(8deg);opacity:0} - 12%{opacity:.52} - 44%{transform:translate3d(-42vw,-30px,0) scaleX(-1) rotate(-11deg)} - 70%{transform:translate3d(-78vw,44px,0) scaleX(-1) rotate(13deg);opacity:.56} - 100%{transform:translate3d(-124vw,-8px,0) scaleX(-1) rotate(-5deg);opacity:0} + +.hf6 { + width: 52px; + top: 36%; + right: -12%; + animation: diveLeft3 16s linear infinite 6s; + color: rgba(14, 67, 104, .48) } -@keyframes diveLeft3{ - 0%{transform:translate3d(12vw,-8px,0) scaleX(-1) rotate(-4deg);opacity:0} - 14%{opacity:.42} - 50%{transform:translate3d(-48vw,34px,0) scaleX(-1) rotate(10deg)} - 78%{transform:translate3d(-88vw,-22px,0) scaleX(-1) rotate(-8deg);opacity:.46} - 100%{transform:translate3d(-122vw,6px,0) scaleX(-1) rotate(3deg);opacity:0} + +@keyframes diveRight1 { + 0% { + transform: translate3d(-8vw, -18px, 0) rotate(-7deg) scale(.92); + opacity: 0 + } + 8% { + opacity: .72 + } + 28% { + transform: translate3d(28vw, 10px, 0) rotate(5deg) scale(1) + } + 52% { + transform: translate3d(58vw, 62px, 0) rotate(12deg) scale(.94); + opacity: .78 + } + 74% { + transform: translate3d(84vw, 16px, 0) rotate(-4deg) scale(1.02) + } + 92% { + opacity: .64 + } + 100% { + transform: translate3d(124vw, -36px, 0) rotate(-9deg) scale(.9); + opacity: 0 + } +} + +@keyframes diveRight2 { + 0% { + transform: translate3d(-10vw, 34px, 0) rotate(9deg) scale(.8); + opacity: 0 + } + 10% { + opacity: .55 + } + 36% { + transform: translate3d(34vw, -26px, 0) rotate(-10deg) scale(.92) + } + 64% { + transform: translate3d(74vw, 42px, 0) rotate(13deg) scale(.86); + opacity: .62 + } + 100% { + transform: translate3d(122vw, -12px, 0) rotate(-5deg) scale(.78); + opacity: 0 + } +} + +@keyframes diveRight3 { + 0% { + transform: translate3d(-12vw, -12px, 0) rotate(-4deg); + opacity: 0 + } + 12% { + opacity: .48 + } + 46% { + transform: translate3d(48vw, 40px, 0) rotate(11deg) + } + 76% { + transform: translate3d(86vw, -32px, 0) rotate(-9deg); + opacity: .5 + } + 100% { + transform: translate3d(122vw, 12px, 0) rotate(4deg); + opacity: 0 + } +} + +@keyframes diveLeft1 { + 0% { + transform: translate3d(12vw, -28px, 0) scaleX(-1) rotate(-6deg); + opacity: 0 + } + 10% { + opacity: .7 + } + 32% { + transform: translate3d(-28vw, 20px, 0) scaleX(-1) rotate(8deg) + } + 58% { + transform: translate3d(-62vw, 76px, 0) scaleX(-1) rotate(14deg); + opacity: .76 + } + 82% { + transform: translate3d(-92vw, 4px, 0) scaleX(-1) rotate(-5deg) + } + 100% { + transform: translate3d(-126vw, -40px, 0) scaleX(-1) rotate(-10deg); + opacity: 0 + } +} + +@keyframes diveLeft2 { + 0% { + transform: translate3d(10vw, 18px, 0) scaleX(-1) rotate(8deg); + opacity: 0 + } + 12% { + opacity: .52 + } + 44% { + transform: translate3d(-42vw, -30px, 0) scaleX(-1) rotate(-11deg) + } + 70% { + transform: translate3d(-78vw, 44px, 0) scaleX(-1) rotate(13deg); + opacity: .56 + } + 100% { + transform: translate3d(-124vw, -8px, 0) scaleX(-1) rotate(-5deg); + opacity: 0 + } +} + +@keyframes diveLeft3 { + 0% { + transform: translate3d(12vw, -8px, 0) scaleX(-1) rotate(-4deg); + opacity: 0 + } + 14% { + opacity: .42 + } + 50% { + transform: translate3d(-48vw, 34px, 0) scaleX(-1) rotate(10deg) + } + 78% { + transform: translate3d(-88vw, -22px, 0) scaleX(-1) rotate(-8deg); + opacity: .46 + } + 100% { + transform: translate3d(-122vw, 6px, 0) scaleX(-1) rotate(3deg); + opacity: 0 + } } /* Рыбы не перекрывают текст: слева они чуть тише */ -.hero-water-fish:after{ - content:""; - position:absolute; - inset:0; - pointer-events:none; - background:linear-gradient(90deg,rgba(251,244,234,.42) 0 32%,transparent 52%); +.hero-water-fish:after { + content: ""; + position: absolute; + inset: 0; + pointer-events: none; + background: linear-gradient(90deg, rgba(251, 244, 234, .42) 0 32%, transparent 52%); } /* На мобильных оставляем только три рыбы */ -@media(max-width:700px){ - .hf2,.hf5,.hf6{display:none} - .hf1{width:86px} - .hf3{width:102px} - .hf4{width:54px} +@media (max-width: 700px) { + .hf2, .hf5, .hf6 { + display: none + } + + .hf1 { + width: 86px + } + + .hf3 { + width: 102px + } + + .hf4 { + width: 54px + } } /* Для пользователей с отключённой анимацией */ -@media(prefers-reduced-motion:reduce){ - .hero-fish{animation:none!important;opacity:.12} +@media (prefers-reduced-motion: reduce) { + .hero-fish { + animation: none !important; + opacity: .12 + } } /* ===== V11 — ШАПКА "БАЙКАЛ + ИРКУТСК" ПО РЕФЕРЕНСУ ===== */ -.lux-topbar{ - position:relative;z-index:100;height:76px;background:#fbf4ea; - border-bottom:1px solid rgba(198,146,77,.25);box-shadow:0 10px 30px rgba(7,36,66,.05) +.lux-topbar { + position: relative; + z-index: 100; + height: 76px; + background: #fbf4ea; + border-bottom: 1px solid rgba(198, 146, 77, .25); + box-shadow: 0 10px 30px rgba(7, 36, 66, .05) } -.lux-topbar-inner{width:min(1340px,94%);height:100%;margin:auto;display:flex;align-items:center;gap:28px} -.lux-brand{display:flex;align-items:center;gap:10px;min-width:220px;color:var(--navy)} -.lux-brand-icon{width:42px;height:42px;color:var(--navy)}.lux-brand-icon svg{width:100%;height:100%} -.lux-brand-copy b{display:block;font:700 24px/1 Georgia,serif;letter-spacing:.04em} -.lux-brand-copy small{display:block;margin-top:4px;font-size:8px;letter-spacing:.14em;font-weight:800} -.lux-menu{display:flex;align-items:center;gap:24px;flex:1;justify-content:center;font-size:13px;font-weight:700} -.lux-menu a{position:relative;padding:28px 0 24px}.lux-menu a:after{content:"";position:absolute;left:50%;bottom:15px;width:0;height:2px;background:var(--gold);transform:translateX(-50%);transition:.25s}.lux-menu a:hover:after,.lux-menu a.active:after{width:75%} -.lux-actions{display:flex;gap:10px;align-items:center}.lux-circle,.lux-save{height:42px;border:1px solid rgba(198,146,77,.75);display:flex;align-items:center;justify-content:center;background:#fffaf3}.lux-circle{width:42px;border-radius:50%;font-size:22px}.lux-save{border-radius:999px;padding:0 18px;gap:8px} -.lux-hero{position:relative;height:650px;overflow:hidden;isolation:isolate;background:#e9d7c3} -.lux-city-photo{position:absolute;inset:0;z-index:-6;background-size:cover!important;background-position:center 45%!important;transform:scale(1.015);animation:luxPhoto 18s ease-in-out infinite alternate} -.lux-city-overlay{position:absolute;inset:0;z-index:-5;background:linear-gradient(90deg,rgba(251,244,234,.12) 0 34%,rgba(251,244,234,0) 56%),linear-gradient(180deg,rgba(7,36,66,.03),rgba(7,36,66,.08))} -.lux-cream-panel{position:absolute;left:0;top:110px;bottom:80px;width:46%;z-index:-2;background:linear-gradient(90deg,#fbf4ea 0%,rgba(251,244,234,.98) 62%,rgba(251,244,234,.82) 80%,rgba(251,244,234,0) 100%)} -.lux-lace{position:absolute;left:0;top:95px;bottom:95px;width:82px;z-index:8;color:rgba(198,146,77,.7)}.lux-lace svg{width:100%;height:100%} - -.lux-water-zone{position:absolute;left:0;right:0;top:0;height:235px;z-index:9;overflow:hidden;background:linear-gradient(180deg,rgba(5,47,82,.97),rgba(6,60,99,.86) 58%,rgba(7,54,91,.55) 82%,rgba(7,54,91,0))} -.lux-water-zone:after{content:"";position:absolute;inset:auto 0 0;height:90px;background:linear-gradient(180deg,transparent,rgba(7,36,66,.04))} -.water-surface{position:absolute;left:-8%;width:116%;height:68px;border-radius:50%;border-top:3px solid rgba(255,236,201,.78);filter:drop-shadow(0 4px 12px rgba(255,214,149,.2))} -.surface-a{top:8px;animation:surfaceShift 7s ease-in-out infinite}.surface-b{top:34px;opacity:.65;animation:surfaceShift2 10s ease-in-out infinite} -.water-rays{position:absolute;inset:0;background:radial-gradient(ellipse at 60% 0%,rgba(255,223,169,.35),transparent 32%),repeating-linear-gradient(103deg,transparent 0 8%,rgba(255,241,214,.05) 9%,transparent 10%);mix-blend-mode:screen;animation:raysPulse 5s ease-in-out infinite} -.bubble-field i{position:absolute;bottom:-18px;left:var(--x);width:var(--s);height:var(--s);border:1px solid rgba(255,255,255,.52);border-radius:50%;animation:bubbleRise 8s linear infinite var(--d)} -.lux-fish{position:absolute;color:rgba(214,164,89,.92);will-change:transform;filter:drop-shadow(0 3px 5px rgba(0,0,0,.14))} -.lux-fish svg{width:100%;height:auto;display:block} -.lf1{width:120px;top:62px;left:-14%;animation:fishR 15s linear infinite} -.lf2{width:78px;top:118px;right:-10%;animation:fishL 18s linear infinite 3s} -.lf3{width:150px;top:134px;left:-16%;animation:fishRdeep 22s linear infinite 6s} -.lf4{width:66px;top:80px;right:-10%;animation:fishLdeep 16s linear infinite 8s} -.lf5{width:92px;top:154px;left:-12%;animation:fishR 20s linear infinite 10s;color:rgba(241,201,131,.68)} -.lux-water-phrase{position:absolute;right:9%;top:105px;color:#e2b16e;font:700 18px/1.35 Georgia,serif;letter-spacing:.06em} - -.lux-copy{position:absolute;z-index:12;left:max(9%,calc((100vw - 1340px)/2 + 24px));top:245px;width:min(560px,44vw);color:var(--navy)} -.lux-eyebrow{color:#9b743c;font:700 15px/1.2 Georgia,serif;letter-spacing:.08em;margin-bottom:14px;animation:fadeUp .7s ease both .1s} -.lux-copy h1{margin:0;font:700 clamp(74px,7.4vw,118px)/.84 Georgia,serif;letter-spacing:-.055em;animation:fadeUp .85s ease both .2s} -.lux-copy h2{margin:19px 0 0;font:500 clamp(28px,2.8vw,44px)/1.08 Georgia,serif;letter-spacing:.025em;animation:fadeUp .85s ease both .3s} -.lux-note{margin-top:22px;color:#9b743c;font:700 15px/1.2 Georgia,serif;letter-spacing:.04em;animation:fadeUp .85s ease both .4s} -.lux-buttons{display:flex;gap:12px;margin-top:22px;animation:fadeUp .85s ease both .5s} -.lux-primary,.lux-secondary{height:50px;padding:0 25px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} -.lux-primary{background:linear-gradient(135deg,#0a426f,#072442);color:white;box-shadow:0 12px 28px rgba(7,36,66,.22)} -.lux-secondary{background:rgba(251,244,234,.82);border:1px solid rgba(198,146,77,.7);backdrop-filter:blur(8px)} - -.lux-badge{position:absolute;right:5%;bottom:82px;z-index:14;width:150px;height:150px;border-radius:50%;background:rgba(7,36,66,.72);border:1px solid rgba(198,146,77,.85);color:#f0cf95;display:flex;flex-direction:column;align-items:center;justify-content:center;letter-spacing:.1em;backdrop-filter:blur(8px);animation:badgeFloat 4s ease-in-out infinite} -.lux-badge span{margin-bottom:7px}.lux-badge b{font:700 16px/1 Georgia,serif}.lux-badge small{font-size:9px;margin-top:7px}.lux-badge a{position:absolute;bottom:10px;width:32px;height:32px;border:1px solid #f0cf95;border-radius:50%;display:grid;place-items:center} -.lux-bottom-waves{position:absolute;left:0;right:0;bottom:-1px;height:150px;z-index:11}.lux-bottom-waves svg{width:100%;height:100%}.bw1{fill:#082846}.bw2{fill:#0d4a77;opacity:.68}.bwline{fill:none;stroke:#d0a466;stroke-width:2}.bwline2{stroke:#f1d4a9;stroke-width:1.4} - -.lux-feature-strip{min-height:137px;display:grid;grid-template-columns:repeat(5,1fr);background:#fbf4ea;border-bottom:1px solid rgba(198,146,77,.24)} -.lux-feature-strip a{text-align:center;padding:24px 18px 20px;position:relative}.lux-feature-strip a:not(:last-child):after{content:"";position:absolute;right:0;top:28%;bottom:28%;width:1px;background:rgba(198,146,77,.3)} -.lux-feature-strip span{display:block;color:var(--gold);font-size:25px;margin-bottom:8px}.lux-feature-strip b{display:block;color:var(--navy);font:700 16px/1 Georgia,serif}.lux-feature-strip small{display:block;margin-top:7px;color:#5f5149;font-size:12px;line-height:1.35} - -@keyframes luxPhoto{from{transform:scale(1.015)}to{transform:scale(1.055) translateX(-.4%)}} -@keyframes surfaceShift{0%,100%{transform:translateX(-1%) rotate(-1deg)}50%{transform:translateX(1.5%) rotate(1deg)}} -@keyframes surfaceShift2{0%,100%{transform:translateX(2%) rotate(1deg)}50%{transform:translateX(-1%) rotate(-1deg)}} -@keyframes raysPulse{0%,100%{opacity:.62}50%{opacity:1}} -@keyframes bubbleRise{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.7}100%{transform:translateY(-250px) scale(1.15);opacity:0}} -@keyframes fishR{0%{transform:translate3d(-12vw,0,0) rotate(-3deg);opacity:0}10%{opacity:1}45%{transform:translate3d(48vw,24px,0) rotate(6deg)}75%{transform:translate3d(82vw,-14px,0) rotate(-4deg)}100%{transform:translate3d(124vw,8px,0);opacity:0}} -@keyframes fishL{0%{transform:translate3d(12vw,0,0) scaleX(-1);opacity:0}10%{opacity:1}50%{transform:translate3d(-52vw,28px,0) scaleX(-1) rotate(7deg)}100%{transform:translate3d(-124vw,-8px,0) scaleX(-1);opacity:0}} -@keyframes fishRdeep{0%{transform:translate3d(-12vw,18px,0) rotate(7deg);opacity:0}12%{opacity:.9}52%{transform:translate3d(55vw,-10px,0) rotate(-8deg)}100%{transform:translate3d(126vw,22px,0) rotate(5deg);opacity:0}} -@keyframes fishLdeep{0%{transform:translate3d(10vw,10px,0) scaleX(-1);opacity:0}15%{opacity:.8}55%{transform:translate3d(-58vw,-18px,0) scaleX(-1) rotate(-6deg)}100%{transform:translate3d(-123vw,14px,0) scaleX(-1);opacity:0}} -@keyframes badgeFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}} - -@media(max-width:1080px){ - .lux-menu{gap:14px;font-size:12px}.lux-actions{display:none}.lux-copy{width:52vw}.lux-water-phrase{display:none} +.lux-topbar-inner { + width: min(1340px, 94%); + height: 100%; + margin: auto; + display: flex; + align-items: center; + gap: 28px } -@media(max-width:800px){ - .lux-topbar{height:auto}.lux-topbar-inner{padding:12px 0;flex-wrap:wrap}.lux-menu{order:3;width:100%;overflow:auto;justify-content:flex-start}.lux-menu a{white-space:nowrap;padding:8px 0 10px} - .lux-hero{height:620px}.lux-water-zone{height:205px}.lux-copy{left:10%;top:225px;width:78vw}.lux-copy h1{font-size:66px}.lux-copy h2{font-size:29px}.lux-cream-panel{width:78%;top:95px}.lux-badge{display:none}.lux-feature-strip{grid-template-columns:repeat(2,1fr)}.lux-feature-strip a:last-child{grid-column:1/-1} + +.lux-brand { + display: flex; + align-items: center; + gap: 10px; + min-width: 220px; + color: var(--navy) } -@media(max-width:560px){ - .lux-brand-copy small{display:none}.lux-hero{height:580px}.lux-water-zone{height:185px}.lux-copy{top:207px}.lux-copy h1{font-size:52px}.lux-copy h2{font-size:23px}.lux-buttons{flex-direction:column;align-items:flex-start}.lf2,.lf4{display:none}.lux-feature-strip{grid-template-columns:1fr}.lux-feature-strip a:last-child{grid-column:auto} + +.lux-brand-icon { + width: 42px; + height: 42px; + color: var(--navy) } -@media(prefers-reduced-motion:reduce){ - .lux-city-photo,.water-surface,.water-rays,.bubble-field i,.lux-fish,.lux-badge,.lux-eyebrow,.lux-copy h1,.lux-copy h2,.lux-note,.lux-buttons{animation:none!important} + +.lux-brand-icon svg { + width: 100%; + height: 100% +} + +.lux-brand-copy b { + display: block; + font: 700 24px/1 Georgia, serif; + letter-spacing: .04em +} + +.lux-brand-copy small { + display: block; + margin-top: 4px; + font-size: 8px; + letter-spacing: .14em; + font-weight: 800 +} + +.lux-menu { + display: flex; + align-items: center; + gap: 24px; + flex: 1; + justify-content: center; + font-size: 13px; + font-weight: 700 +} + +.lux-menu a { + position: relative; + padding: 28px 0 24px +} + +.lux-menu a:after { + content: ""; + position: absolute; + left: 50%; + bottom: 15px; + width: 0; + height: 2px; + background: var(--gold); + transform: translateX(-50%); + transition: .25s +} + +.lux-menu a:hover:after, .lux-menu a.active:after { + width: 75% +} + +.lux-actions { + display: flex; + gap: 10px; + align-items: center +} + +.lux-circle, .lux-save { + height: 42px; + border: 1px solid rgba(198, 146, 77, .75); + display: flex; + align-items: center; + justify-content: center; + background: #fffaf3 +} + +.lux-circle { + width: 42px; + border-radius: 50%; + font-size: 22px +} + +.lux-save { + border-radius: 999px; + padding: 0 18px; + gap: 8px +} + +.lux-hero { + position: relative; + height: 650px; + overflow: hidden; + isolation: isolate; + background: #e9d7c3 +} + +.lux-city-photo { + position: absolute; + inset: 0; + z-index: -6; + background-size: cover !important; + background-position: center 45% !important; + transform: scale(1.015); + animation: luxPhoto 18s ease-in-out infinite alternate +} + +.lux-city-overlay { + position: absolute; + inset: 0; + z-index: -5; + background: linear-gradient(90deg, rgba(251, 244, 234, .12) 0 34%, rgba(251, 244, 234, 0) 56%), linear-gradient(180deg, rgba(7, 36, 66, .03), rgba(7, 36, 66, .08)) +} + +.lux-cream-panel { + position: absolute; + left: 0; + top: 110px; + bottom: 80px; + width: 46%; + z-index: -2; + background: linear-gradient(90deg, #fbf4ea 0%, rgba(251, 244, 234, .98) 62%, rgba(251, 244, 234, .82) 80%, rgba(251, 244, 234, 0) 100%) +} + +.lux-lace { + position: absolute; + left: 0; + top: 95px; + bottom: 95px; + width: 82px; + z-index: 8; + color: rgba(198, 146, 77, .7) +} + +.lux-lace svg { + width: 100%; + height: 100% +} + +.lux-water-zone { + position: absolute; + left: 0; + right: 0; + top: 0; + height: 235px; + z-index: 9; + overflow: hidden; + background: linear-gradient(180deg, rgba(5, 47, 82, .97), rgba(6, 60, 99, .86) 58%, rgba(7, 54, 91, .55) 82%, rgba(7, 54, 91, 0)) +} + +.lux-water-zone:after { + content: ""; + position: absolute; + inset: auto 0 0; + height: 90px; + background: linear-gradient(180deg, transparent, rgba(7, 36, 66, .04)) +} + +.water-surface { + position: absolute; + left: -8%; + width: 116%; + height: 68px; + border-radius: 50%; + border-top: 3px solid rgba(255, 236, 201, .78); + filter: drop-shadow(0 4px 12px rgba(255, 214, 149, .2)) +} + +.surface-a { + top: 8px; + animation: surfaceShift 7s ease-in-out infinite +} + +.surface-b { + top: 34px; + opacity: .65; + animation: surfaceShift2 10s ease-in-out infinite +} + +.water-rays { + position: absolute; + inset: 0; + background: radial-gradient(ellipse at 60% 0%, rgba(255, 223, 169, .35), transparent 32%), repeating-linear-gradient(103deg, transparent 0 8%, rgba(255, 241, 214, .05) 9%, transparent 10%); + mix-blend-mode: screen; + animation: raysPulse 5s ease-in-out infinite +} + +.bubble-field i { + position: absolute; + bottom: -18px; + left: var(--x); + width: var(--s); + height: var(--s); + border: 1px solid rgba(255, 255, 255, .52); + border-radius: 50%; + animation: bubbleRise 8s linear infinite var(--d) +} + +.lux-fish { + position: absolute; + color: rgba(214, 164, 89, .92); + will-change: transform; + filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .14)) +} + +.lux-fish svg { + width: 100%; + height: auto; + display: block +} + +.lf1 { + width: 120px; + top: 62px; + left: -14%; + animation: fishR 15s linear infinite +} + +.lf2 { + width: 78px; + top: 118px; + right: -10%; + animation: fishL 18s linear infinite 3s +} + +.lf3 { + width: 150px; + top: 134px; + left: -16%; + animation: fishRdeep 22s linear infinite 6s +} + +.lf4 { + width: 66px; + top: 80px; + right: -10%; + animation: fishLdeep 16s linear infinite 8s +} + +.lf5 { + width: 92px; + top: 154px; + left: -12%; + animation: fishR 20s linear infinite 10s; + color: rgba(241, 201, 131, .68) +} + +.lux-water-phrase { + position: absolute; + right: 9%; + top: 105px; + color: #e2b16e; + font: 700 18px/1.35 Georgia, serif; + letter-spacing: .06em +} + +.lux-copy { + position: absolute; + z-index: 12; + left: max(9%, calc((100vw - 1340px) / 2 + 24px)); + top: 245px; + width: min(560px, 44vw); + color: var(--navy) +} + +.lux-eyebrow { + color: #9b743c; + font: 700 15px/1.2 Georgia, serif; + letter-spacing: .08em; + margin-bottom: 14px; + animation: fadeUp .7s ease both .1s +} + +.lux-copy h1 { + margin: 0; + font: 700 clamp(74px, 7.4vw, 118px)/.84 Georgia, serif; + letter-spacing: -.055em; + animation: fadeUp .85s ease both .2s +} + +.lux-copy h2 { + margin: 19px 0 0; + font: 500 clamp(28px, 2.8vw, 44px)/1.08 Georgia, serif; + letter-spacing: .025em; + animation: fadeUp .85s ease both .3s +} + +.lux-note { + margin-top: 22px; + color: #9b743c; + font: 700 15px/1.2 Georgia, serif; + letter-spacing: .04em; + animation: fadeUp .85s ease both .4s +} + +.lux-buttons { + display: flex; + gap: 12px; + margin-top: 22px; + animation: fadeUp .85s ease both .5s +} + +.lux-primary, .lux-secondary { + height: 50px; + padding: 0 25px; + border-radius: 999px; + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: 700; + font-size: 14px +} + +.lux-primary { + background: linear-gradient(135deg, #0a426f, #072442); + color: white; + box-shadow: 0 12px 28px rgba(7, 36, 66, .22) +} + +.lux-secondary { + background: rgba(251, 244, 234, .82); + border: 1px solid rgba(198, 146, 77, .7); + backdrop-filter: blur(8px) +} + +.lux-badge { + position: absolute; + right: 5%; + bottom: 82px; + z-index: 14; + width: 150px; + height: 150px; + border-radius: 50%; + background: rgba(7, 36, 66, .72); + border: 1px solid rgba(198, 146, 77, .85); + color: #f0cf95; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + letter-spacing: .1em; + backdrop-filter: blur(8px); + animation: badgeFloat 4s ease-in-out infinite +} + +.lux-badge span { + margin-bottom: 7px +} + +.lux-badge b { + font: 700 16px/1 Georgia, serif +} + +.lux-badge small { + font-size: 9px; + margin-top: 7px +} + +.lux-badge a { + position: absolute; + bottom: 10px; + width: 32px; + height: 32px; + border: 1px solid #f0cf95; + border-radius: 50%; + display: grid; + place-items: center +} + +.lux-bottom-waves { + position: absolute; + left: 0; + right: 0; + bottom: -1px; + height: 150px; + z-index: 11 +} + +.lux-bottom-waves svg { + width: 100%; + height: 100% +} + +.bw1 { + fill: #082846 +} + +.bw2 { + fill: #0d4a77; + opacity: .68 +} + +.bwline { + fill: none; + stroke: #d0a466; + stroke-width: 2 +} + +.bwline2 { + stroke: #f1d4a9; + stroke-width: 1.4 +} + +.lux-feature-strip { + min-height: 137px; + display: grid; + grid-template-columns:repeat(5, 1fr); + background: #fbf4ea; + border-bottom: 1px solid rgba(198, 146, 77, .24) +} + +.lux-feature-strip a { + text-align: center; + padding: 24px 18px 20px; + position: relative +} + +.lux-feature-strip a:not(:last-child):after { + content: ""; + position: absolute; + right: 0; + top: 28%; + bottom: 28%; + width: 1px; + background: rgba(198, 146, 77, .3) +} + +.lux-feature-strip span { + display: block; + color: var(--gold); + font-size: 25px; + margin-bottom: 8px +} + +.lux-feature-strip b { + display: block; + color: var(--navy); + font: 700 16px/1 Georgia, serif +} + +.lux-feature-strip small { + display: block; + margin-top: 7px; + color: #5f5149; + font-size: 12px; + line-height: 1.35 +} + +@keyframes luxPhoto { + from { + transform: scale(1.015) + } + to { + transform: scale(1.055) translateX(-.4%) + } +} + +@keyframes surfaceShift { + 0%, 100% { + transform: translateX(-1%) rotate(-1deg) + } + 50% { + transform: translateX(1.5%) rotate(1deg) + } +} + +@keyframes surfaceShift2 { + 0%, 100% { + transform: translateX(2%) rotate(1deg) + } + 50% { + transform: translateX(-1%) rotate(-1deg) + } +} + +@keyframes raysPulse { + 0%, 100% { + opacity: .62 + } + 50% { + opacity: 1 + } +} + +@keyframes bubbleRise { + 0% { + transform: translateY(0) scale(.6); + opacity: 0 + } + 15% { + opacity: .7 + } + 100% { + transform: translateY(-250px) scale(1.15); + opacity: 0 + } +} + +@keyframes fishR { + 0% { + transform: translate3d(-12vw, 0, 0) rotate(-3deg); + opacity: 0 + } + 10% { + opacity: 1 + } + 45% { + transform: translate3d(48vw, 24px, 0) rotate(6deg) + } + 75% { + transform: translate3d(82vw, -14px, 0) rotate(-4deg) + } + 100% { + transform: translate3d(124vw, 8px, 0); + opacity: 0 + } +} + +@keyframes fishL { + 0% { + transform: translate3d(12vw, 0, 0) scaleX(-1); + opacity: 0 + } + 10% { + opacity: 1 + } + 50% { + transform: translate3d(-52vw, 28px, 0) scaleX(-1) rotate(7deg) + } + 100% { + transform: translate3d(-124vw, -8px, 0) scaleX(-1); + opacity: 0 + } +} + +@keyframes fishRdeep { + 0% { + transform: translate3d(-12vw, 18px, 0) rotate(7deg); + opacity: 0 + } + 12% { + opacity: .9 + } + 52% { + transform: translate3d(55vw, -10px, 0) rotate(-8deg) + } + 100% { + transform: translate3d(126vw, 22px, 0) rotate(5deg); + opacity: 0 + } +} + +@keyframes fishLdeep { + 0% { + transform: translate3d(10vw, 10px, 0) scaleX(-1); + opacity: 0 + } + 15% { + opacity: .8 + } + 55% { + transform: translate3d(-58vw, -18px, 0) scaleX(-1) rotate(-6deg) + } + 100% { + transform: translate3d(-123vw, 14px, 0) scaleX(-1); + opacity: 0 + } +} + +@keyframes badgeFloat { + 0%, 100% { + transform: translateY(0) + } + 50% { + transform: translateY(-7px) + } +} + +@media (max-width: 1080px) { + .lux-menu { + gap: 14px; + font-size: 12px + } + + .lux-actions { + display: none + } + + .lux-copy { + width: 52vw + } + + .lux-water-phrase { + display: none + } +} + +@media (max-width: 800px) { + .lux-topbar { + height: auto + } + + .lux-topbar-inner { + padding: 12px 0; + flex-wrap: wrap + } + + .lux-menu { + order: 3; + width: 100%; + overflow: auto; + justify-content: flex-start + } + + .lux-menu a { + white-space: nowrap; + padding: 8px 0 10px + } + + .lux-hero { + height: 620px + } + + .lux-water-zone { + height: 205px + } + + .lux-copy { + left: 10%; + top: 225px; + width: 78vw + } + + .lux-copy h1 { + font-size: 66px + } + + .lux-copy h2 { + font-size: 29px + } + + .lux-cream-panel { + width: 78%; + top: 95px + } + + .lux-badge { + display: none + } + + .lux-feature-strip { + grid-template-columns:repeat(2, 1fr) + } + + .lux-feature-strip a:last-child { + grid-column: 1/-1 + } +} + +@media (max-width: 560px) { + .lux-brand-copy small { + display: none + } + + .lux-hero { + height: 580px + } + + .lux-water-zone { + height: 185px + } + + .lux-copy { + top: 207px + } + + .lux-copy h1 { + font-size: 52px + } + + .lux-copy h2 { + font-size: 23px + } + + .lux-buttons { + flex-direction: column; + align-items: flex-start + } + + .lf2, .lf4 { + display: none + } + + .lux-feature-strip { + grid-template-columns:1fr + } + + .lux-feature-strip a:last-child { + grid-column: auto + } +} + +@media (prefers-reduced-motion: reduce) { + .lux-city-photo, .water-surface, .water-rays, .bubble-field i, .lux-fish, .lux-badge, .lux-eyebrow, .lux-copy h1, .lux-copy h2, .lux-note, .lux-buttons { + animation: none !important + } } /* ===== V12 FIXES ===== */ /* Возвращаем изображению главный вес в шапке */ -.lux-hero{ - height:680px!important; +.lux-hero { + height: 680px !important; } -.lux-city-photo{ - inset:0!important; - background-size:cover!important; - background-position:center 44%!important; - transform:scale(1.005)!important; - animation:luxPhotoFixed 20s ease-in-out infinite alternate!important; + +.lux-city-photo { + inset: 0 !important; + background-size: cover !important; + background-position: center 44% !important; + transform: scale(1.005) !important; + animation: luxPhotoFixed 20s ease-in-out infinite alternate !important; } -.lux-city-overlay{ - background: - linear-gradient(90deg,rgba(251,244,234,.11) 0 31%,rgba(251,244,234,.025) 50%,rgba(7,36,66,.05) 100%), - linear-gradient(180deg,rgba(7,36,66,.02),rgba(7,36,66,.055))!important; + +.lux-city-overlay { + background: linear-gradient(90deg, rgba(251, 244, 234, .11) 0 31%, rgba(251, 244, 234, .025) 50%, rgba(7, 36, 66, .05) 100%), + linear-gradient(180deg, rgba(7, 36, 66, .02), rgba(7, 36, 66, .055)) !important; } /* Вода больше не перекрывает слишком большую часть фото */ -.lux-water-zone{ - height:190px!important; - background: - linear-gradient(180deg,rgba(5,47,82,.96) 0%,rgba(6,60,99,.80) 52%,rgba(7,54,91,.46) 78%,rgba(7,54,91,0) 100%)!important; +.lux-water-zone { + height: 190px !important; + background: linear-gradient(180deg, rgba(5, 47, 82, .96) 0%, rgba(6, 60, 99, .80) 52%, rgba(7, 54, 91, .46) 78%, rgba(7, 54, 91, 0) 100%) !important; } -.lux-cream-panel{ - top:92px!important; - bottom:86px!important; - width:46%!important; + +.lux-cream-panel { + top: 92px !important; + bottom: 86px !important; + width: 46% !important; } -.lux-copy{ - top:214px!important; + +.lux-copy { + top: 214px !important; } -.lux-water-phrase{ - top:104px!important; - right:8%!important; - color:#efc27b!important; - font:700 18px/1.32 Georgia,serif!important; - letter-spacing:.055em!important; - text-align:left; - text-shadow:0 2px 12px rgba(7,36,66,.28); + +.lux-water-phrase { + top: 104px !important; + right: 8% !important; + color: #efc27b !important; + font: 700 18px/1.32 Georgia, serif !important; + letter-spacing: .055em !important; + text-align: left; + text-shadow: 0 2px 12px rgba(7, 36, 66, .28); } /* Меньше декоративной воды внизу, чтобы не съедала арку и набережную */ -.lux-bottom-waves{ - height:118px!important; +.lux-bottom-waves { + height: 118px !important; } /* Рыбы плывут носом вперёд: вправо — обычные, влево — зеркальные */ -.lf1,.lf3,.lf5{ - transform-origin:center; +.lf1, .lf3, .lf5 { + transform-origin: center; } -.lf2,.lf4{ - transform-origin:center; + +.lf2, .lf4 { + transform-origin: center; } /* Более плавные, длинные траектории */ -.lf1{animation:fishForwardRight1 26s linear infinite 0s!important} -.lf2{animation:fishForwardLeft1 31s linear infinite 4s!important} -.lf3{animation:fishForwardRight2 34s linear infinite 7s!important} -.lf4{animation:fishForwardLeft2 28s linear infinite 11s!important} -.lf5{animation:fishForwardRight3 38s linear infinite 15s!important} +.lf1 { + animation: fishForwardRight1 26s linear infinite 0s !important +} -@keyframes fishForwardRight1{ - 0%{transform:translate3d(-18vw,0,0) rotate(-2deg);opacity:0} - 8%{opacity:.82} - 25%{transform:translate3d(18vw,7px,0) rotate(1deg)} - 50%{transform:translate3d(52vw,18px,0) rotate(3deg)} - 75%{transform:translate3d(86vw,2px,0) rotate(-1deg)} - 92%{opacity:.82} - 100%{transform:translate3d(124vw,-6px,0) rotate(-2deg);opacity:0} +.lf2 { + animation: fishForwardLeft1 31s linear infinite 4s !important } -@keyframes fishForwardLeft1{ - 0%{transform:translate3d(18vw,0,0) scaleX(-1) rotate(2deg);opacity:0} - 8%{opacity:.8} - 28%{transform:translate3d(-18vw,8px,0) scaleX(-1) rotate(-1deg)} - 55%{transform:translate3d(-56vw,16px,0) scaleX(-1) rotate(-3deg)} - 82%{transform:translate3d(-92vw,0,0) scaleX(-1) rotate(1deg)} - 100%{transform:translate3d(-126vw,-5px,0) scaleX(-1) rotate(2deg);opacity:0} + +.lf3 { + animation: fishForwardRight2 34s linear infinite 7s !important } -@keyframes fishForwardRight2{ - 0%{transform:translate3d(-20vw,10px,0) rotate(2deg);opacity:0} - 10%{opacity:.72} - 32%{transform:translate3d(22vw,-6px,0) rotate(-2deg)} - 60%{transform:translate3d(62vw,12px,0) rotate(2deg)} - 86%{transform:translate3d(98vw,-2px,0) rotate(-1deg)} - 100%{transform:translate3d(128vw,5px,0) rotate(1deg);opacity:0} + +.lf4 { + animation: fishForwardLeft2 28s linear infinite 11s !important } -@keyframes fishForwardLeft2{ - 0%{transform:translate3d(18vw,6px,0) scaleX(-1) rotate(-2deg);opacity:0} - 10%{opacity:.7} - 35%{transform:translate3d(-24vw,-5px,0) scaleX(-1) rotate(2deg)} - 65%{transform:translate3d(-68vw,11px,0) scaleX(-1) rotate(-1deg)} - 90%{transform:translate3d(-106vw,-3px,0) scaleX(-1) rotate(1deg)} - 100%{transform:translate3d(-130vw,4px,0) scaleX(-1) rotate(-1deg);opacity:0} + +.lf5 { + animation: fishForwardRight3 38s linear infinite 15s !important } -@keyframes fishForwardRight3{ - 0%{transform:translate3d(-16vw,6px,0) rotate(-1deg);opacity:0} - 10%{opacity:.58} - 35%{transform:translate3d(26vw,0,0) rotate(1deg)} - 68%{transform:translate3d(74vw,10px,0) rotate(2deg)} - 90%{transform:translate3d(106vw,-2px,0) rotate(-1deg)} - 100%{transform:translate3d(126vw,3px,0) rotate(0deg);opacity:0} + +@keyframes fishForwardRight1 { + 0% { + transform: translate3d(-18vw, 0, 0) rotate(-2deg); + opacity: 0 + } + 8% { + opacity: .82 + } + 25% { + transform: translate3d(18vw, 7px, 0) rotate(1deg) + } + 50% { + transform: translate3d(52vw, 18px, 0) rotate(3deg) + } + 75% { + transform: translate3d(86vw, 2px, 0) rotate(-1deg) + } + 92% { + opacity: .82 + } + 100% { + transform: translate3d(124vw, -6px, 0) rotate(-2deg); + opacity: 0 + } +} + +@keyframes fishForwardLeft1 { + 0% { + transform: translate3d(18vw, 0, 0) scaleX(-1) rotate(2deg); + opacity: 0 + } + 8% { + opacity: .8 + } + 28% { + transform: translate3d(-18vw, 8px, 0) scaleX(-1) rotate(-1deg) + } + 55% { + transform: translate3d(-56vw, 16px, 0) scaleX(-1) rotate(-3deg) + } + 82% { + transform: translate3d(-92vw, 0, 0) scaleX(-1) rotate(1deg) + } + 100% { + transform: translate3d(-126vw, -5px, 0) scaleX(-1) rotate(2deg); + opacity: 0 + } +} + +@keyframes fishForwardRight2 { + 0% { + transform: translate3d(-20vw, 10px, 0) rotate(2deg); + opacity: 0 + } + 10% { + opacity: .72 + } + 32% { + transform: translate3d(22vw, -6px, 0) rotate(-2deg) + } + 60% { + transform: translate3d(62vw, 12px, 0) rotate(2deg) + } + 86% { + transform: translate3d(98vw, -2px, 0) rotate(-1deg) + } + 100% { + transform: translate3d(128vw, 5px, 0) rotate(1deg); + opacity: 0 + } +} + +@keyframes fishForwardLeft2 { + 0% { + transform: translate3d(18vw, 6px, 0) scaleX(-1) rotate(-2deg); + opacity: 0 + } + 10% { + opacity: .7 + } + 35% { + transform: translate3d(-24vw, -5px, 0) scaleX(-1) rotate(2deg) + } + 65% { + transform: translate3d(-68vw, 11px, 0) scaleX(-1) rotate(-1deg) + } + 90% { + transform: translate3d(-106vw, -3px, 0) scaleX(-1) rotate(1deg) + } + 100% { + transform: translate3d(-130vw, 4px, 0) scaleX(-1) rotate(-1deg); + opacity: 0 + } +} + +@keyframes fishForwardRight3 { + 0% { + transform: translate3d(-16vw, 6px, 0) rotate(-1deg); + opacity: 0 + } + 10% { + opacity: .58 + } + 35% { + transform: translate3d(26vw, 0, 0) rotate(1deg) + } + 68% { + transform: translate3d(74vw, 10px, 0) rotate(2deg) + } + 90% { + transform: translate3d(106vw, -2px, 0) rotate(-1deg) + } + 100% { + transform: translate3d(126vw, 3px, 0) rotate(0deg); + opacity: 0 + } } /* Плавнее сама вода и фото */ -@keyframes luxPhotoFixed{ - from{transform:scale(1.005) translate3d(0,0,0)} - to{transform:scale(1.025) translate3d(-.18%,.08%,0)} -} -.surface-a{animation:surfaceShiftFixed 12s ease-in-out infinite!important} -.surface-b{animation:surfaceShiftFixed2 16s ease-in-out infinite!important} -.water-rays{animation:raysPulseFixed 8s ease-in-out infinite!important} - -@keyframes surfaceShiftFixed{ - 0%,100%{transform:translateX(-.6%) rotate(-.5deg)} - 50%{transform:translateX(.8%) rotate(.5deg)} -} -@keyframes surfaceShiftFixed2{ - 0%,100%{transform:translateX(.8%) rotate(.45deg)} - 50%{transform:translateX(-.6%) rotate(-.45deg)} -} -@keyframes raysPulseFixed{ - 0%,100%{opacity:.52} - 50%{opacity:.78} +@keyframes luxPhotoFixed { + from { + transform: scale(1.005) translate3d(0, 0, 0) + } + to { + transform: scale(1.025) translate3d(-.18%, .08%, 0) + } } -@media(max-width:800px){ - .lux-hero{height:620px!important} - .lux-water-zone{height:170px!important} - .lux-copy{top:195px!important} - .lux-city-photo{background-position:58% 44%!important} +.surface-a { + animation: surfaceShiftFixed 12s ease-in-out infinite !important +} + +.surface-b { + animation: surfaceShiftFixed2 16s ease-in-out infinite !important +} + +.water-rays { + animation: raysPulseFixed 8s ease-in-out infinite !important +} + +@keyframes surfaceShiftFixed { + 0%, 100% { + transform: translateX(-.6%) rotate(-.5deg) + } + 50% { + transform: translateX(.8%) rotate(.5deg) + } +} + +@keyframes surfaceShiftFixed2 { + 0%, 100% { + transform: translateX(.8%) rotate(.45deg) + } + 50% { + transform: translateX(-.6%) rotate(-.45deg) + } +} + +@keyframes raysPulseFixed { + 0%, 100% { + opacity: .52 + } + 50% { + opacity: .78 + } +} + +@media (max-width: 800px) { + .lux-hero { + height: 620px !important + } + + .lux-water-zone { + height: 170px !important + } + + .lux-copy { + top: 195px !important + } + + .lux-city-photo { + background-position: 58% 44% !important + } } /* ===== V13: БЕЗ ФОТО + РЫБЫ В ДРУГУЮ СТОРОНУ + ПУЗЫРЬКИ ПО ВСЕМУ САЙТУ ===== */ /* Полностью убираем фотографию из шапки */ -.lux-city-photo{ - background-image:none!important; - animation:none!important; - transform:none!important; +.lux-city-photo { + background-image: none !important; + animation: none !important; + transform: none !important; } -.lux-hero{ - background: - radial-gradient(circle at 72% 42%,rgba(246,196,126,.28),transparent 22%), - radial-gradient(circle at 78% 48%,rgba(255,225,173,.18),transparent 30%), - linear-gradient(180deg,#0c385e 0 28%,#154d78 28% 43%,#f0d7b9 43% 61%,#fbf4ea 61% 100%)!important; + +.lux-hero { + background: radial-gradient(circle at 72% 42%, rgba(246, 196, 126, .28), transparent 22%), + radial-gradient(circle at 78% 48%, rgba(255, 225, 173, .18), transparent 30%), + linear-gradient(180deg, #0c385e 0 28%, #154d78 28% 43%, #f0d7b9 43% 61%, #fbf4ea 61% 100%) !important; } -.lux-city-overlay{ - background: - linear-gradient(180deg,rgba(7,36,66,.06),rgba(7,36,66,.02) 45%,rgba(251,244,234,.16))!important; + +.lux-city-overlay { + background: linear-gradient(180deg, rgba(7, 36, 66, .06), rgba(7, 36, 66, .02) 45%, rgba(251, 244, 234, .16)) !important; } -.lux-cream-panel{ - background: - linear-gradient(90deg,#fbf4ea 0%,rgba(251,244,234,.99) 66%,rgba(251,244,234,.82) 83%,rgba(251,244,234,0) 100%)!important; + +.lux-cream-panel { + background: linear-gradient(90deg, #fbf4ea 0%, rgba(251, 244, 234, .99) 66%, rgba(251, 244, 234, .82) 83%, rgba(251, 244, 234, 0) 100%) !important; } /* Рыбы теперь все идут справа налево и смотрят носом в сторону движения */ -.lf1,.lf2,.lf3,.lf4,.lf5{ - left:auto!important; - right:-18%!important; - transform-origin:center!important; +.lf1, .lf2, .lf3, .lf4, .lf5 { + left: auto !important; + right: -18% !important; + transform-origin: center !important; } -.lf1{animation:allFishLeft1 30s linear infinite 0s!important} -.lf2{animation:allFishLeft2 36s linear infinite 5s!important} -.lf3{animation:allFishLeft3 42s linear infinite 9s!important} -.lf4{animation:allFishLeft2 33s linear infinite 13s!important} -.lf5{animation:allFishLeft1 46s linear infinite 17s!important} -@keyframes allFishLeft1{ - 0%{transform:translate3d(14vw,0,0) scaleX(-1) rotate(1deg);opacity:0} - 8%{opacity:.82} - 28%{transform:translate3d(-22vw,8px,0) scaleX(-1) rotate(-1deg)} - 56%{transform:translate3d(-58vw,16px,0) scaleX(-1) rotate(-2deg)} - 82%{transform:translate3d(-94vw,2px,0) scaleX(-1) rotate(1deg)} - 100%{transform:translate3d(-126vw,-5px,0) scaleX(-1) rotate(0deg);opacity:0} +.lf1 { + animation: allFishLeft1 30s linear infinite 0s !important } -@keyframes allFishLeft2{ - 0%{transform:translate3d(16vw,6px,0) scaleX(-1) rotate(-1deg);opacity:0} - 10%{opacity:.7} - 35%{transform:translate3d(-24vw,-5px,0) scaleX(-1) rotate(2deg)} - 65%{transform:translate3d(-70vw,11px,0) scaleX(-1) rotate(-1deg)} - 90%{transform:translate3d(-108vw,-3px,0) scaleX(-1) rotate(1deg)} - 100%{transform:translate3d(-132vw,4px,0) scaleX(-1) rotate(0deg);opacity:0} + +.lf2 { + animation: allFishLeft2 36s linear infinite 5s !important } -@keyframes allFishLeft3{ - 0%{transform:translate3d(18vw,-4px,0) scaleX(-1) rotate(1deg);opacity:0} - 12%{opacity:.62} - 40%{transform:translate3d(-30vw,6px,0) scaleX(-1) rotate(-1deg)} - 72%{transform:translate3d(-78vw,15px,0) scaleX(-1) rotate(-2deg)} - 92%{transform:translate3d(-110vw,0,0) scaleX(-1) rotate(1deg)} - 100%{transform:translate3d(-134vw,-4px,0) scaleX(-1) rotate(0deg);opacity:0} + +.lf3 { + animation: allFishLeft3 42s linear infinite 9s !important +} + +.lf4 { + animation: allFishLeft2 33s linear infinite 13s !important +} + +.lf5 { + animation: allFishLeft1 46s linear infinite 17s !important +} + +@keyframes allFishLeft1 { + 0% { + transform: translate3d(14vw, 0, 0) scaleX(-1) rotate(1deg); + opacity: 0 + } + 8% { + opacity: .82 + } + 28% { + transform: translate3d(-22vw, 8px, 0) scaleX(-1) rotate(-1deg) + } + 56% { + transform: translate3d(-58vw, 16px, 0) scaleX(-1) rotate(-2deg) + } + 82% { + transform: translate3d(-94vw, 2px, 0) scaleX(-1) rotate(1deg) + } + 100% { + transform: translate3d(-126vw, -5px, 0) scaleX(-1) rotate(0deg); + opacity: 0 + } +} + +@keyframes allFishLeft2 { + 0% { + transform: translate3d(16vw, 6px, 0) scaleX(-1) rotate(-1deg); + opacity: 0 + } + 10% { + opacity: .7 + } + 35% { + transform: translate3d(-24vw, -5px, 0) scaleX(-1) rotate(2deg) + } + 65% { + transform: translate3d(-70vw, 11px, 0) scaleX(-1) rotate(-1deg) + } + 90% { + transform: translate3d(-108vw, -3px, 0) scaleX(-1) rotate(1deg) + } + 100% { + transform: translate3d(-132vw, 4px, 0) scaleX(-1) rotate(0deg); + opacity: 0 + } +} + +@keyframes allFishLeft3 { + 0% { + transform: translate3d(18vw, -4px, 0) scaleX(-1) rotate(1deg); + opacity: 0 + } + 12% { + opacity: .62 + } + 40% { + transform: translate3d(-30vw, 6px, 0) scaleX(-1) rotate(-1deg) + } + 72% { + transform: translate3d(-78vw, 15px, 0) scaleX(-1) rotate(-2deg) + } + 92% { + transform: translate3d(-110vw, 0, 0) scaleX(-1) rotate(1deg) + } + 100% { + transform: translate3d(-134vw, -4px, 0) scaleX(-1) rotate(0deg); + opacity: 0 + } } /* Пузырьки по всему сайту */ -.site-bubbles{ - position:fixed; - inset:0; - z-index:6; - pointer-events:none; - overflow:hidden; +.site-bubbles { + position: fixed; + inset: 0; + z-index: 6; + pointer-events: none; + overflow: hidden; } -.site-bubbles i{ - position:absolute; - left:var(--x); - bottom:-40px; - width:var(--s); - height:var(--s); - border-radius:50%; - border:1px solid rgba(34,88,126,.18); - background:rgba(255,255,255,.12); - box-shadow: - inset 0 0 0 1px rgba(255,255,255,.16), - 0 0 9px rgba(34,88,126,.05); - animation:siteBubbleUp var(--t) linear infinite var(--d); + +.site-bubbles i { + position: absolute; + left: var(--x); + bottom: -40px; + width: var(--s); + height: var(--s); + border-radius: 50%; + border: 1px solid rgba(34, 88, 126, .18); + background: rgba(255, 255, 255, .12); + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), + 0 0 9px rgba(34, 88, 126, .05); + animation: siteBubbleUp var(--t) linear infinite var(--d); } -@keyframes siteBubbleUp{ - 0%{ - transform:translate3d(0,0,0) scale(.72); - opacity:0; - } - 10%{opacity:.28} - 45%{ - transform:translate3d(12px,-50vh,0) scale(.92); - opacity:.24; - } - 75%{ - transform:translate3d(-8px,-82vh,0) scale(1.04); - opacity:.18; - } - 100%{ - transform:translate3d(6px,-115vh,0) scale(1.12); - opacity:0; - } + +@keyframes siteBubbleUp { + 0% { + transform: translate3d(0, 0, 0) scale(.72); + opacity: 0; + } + 10% { + opacity: .28 + } + 45% { + transform: translate3d(12px, -50vh, 0) scale(.92); + opacity: .24; + } + 75% { + transform: translate3d(-8px, -82vh, 0) scale(1.04); + opacity: .18; + } + 100% { + transform: translate3d(6px, -115vh, 0) scale(1.12); + opacity: 0; + } } /* Чтобы пузыри не мешали чтению карточек */ -.page,.lux-copy,.lux-topbar,.lux-feature-strip,.arch-card,.museum-card,.restaurant-card,.map-card,.regional-footer{ - position:relative; - z-index:8; +.page, .lux-copy, .lux-topbar, .lux-feature-strip, .arch-card, .museum-card, .restaurant-card, .map-card, .regional-footer { + position: relative; + z-index: 8; } -@media(max-width:700px){ - .site-bubbles{opacity:.55} - .site-bubbles i:nth-child(2n){display:none} +@media (max-width: 700px) { + .site-bubbles { + opacity: .55 + } + + .site-bubbles i:nth-child(2n) { + display: none + } } -@media(prefers-reduced-motion:reduce){ - .site-bubbles i,.lux-fish{animation:none!important;opacity:.08} +@media (prefers-reduced-motion: reduce) { + .site-bubbles i, .lux-fish { + animation: none !important; + opacity: .08 + } } /* ===== V14: ТЕКСТ + ЗАМЕТНЫЕ ПУЗЫРИ + РЫБЫ НОСОМ ВПЕРЁД ===== */ /* Заголовок под новую формулировку */ -.lux-copy h2{ - font-size:clamp(24px,2.45vw,39px)!important; - line-height:1.08!important; - max-width:590px; +.lux-copy h2 { + font-size: clamp(24px, 2.45vw, 39px) !important; + line-height: 1.08 !important; + max-width: 590px; } /* Пузырьков больше и они заметнее */ -.site-bubbles i{ - border:1.35px solid rgba(34,88,126,.32)!important; - background: - radial-gradient(circle at 32% 28%,rgba(255,255,255,.56) 0 12%,rgba(255,255,255,.16) 16%,rgba(90,151,190,.10) 55%,rgba(255,255,255,.03) 72%)!important; - box-shadow: - inset -2px -2px 5px rgba(34,88,126,.10), - inset 2px 2px 4px rgba(255,255,255,.34), - 0 0 10px rgba(34,88,126,.10)!important; +.site-bubbles i { + border: 1.35px solid rgba(34, 88, 126, .32) !important; + background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .56) 0 12%, rgba(255, 255, 255, .16) 16%, rgba(90, 151, 190, .10) 55%, rgba(255, 255, 255, .03) 72%) !important; + box-shadow: inset -2px -2px 5px rgba(34, 88, 126, .10), + inset 2px 2px 4px rgba(255, 255, 255, .34), + 0 0 10px rgba(34, 88, 126, .10) !important; } -@keyframes siteBubbleUp{ - 0%{ - transform:translate3d(0,0,0) scale(.68); - opacity:0; - } - 8%{opacity:.52} - 38%{ - transform:translate3d(14px,-42vh,0) scale(.9); - opacity:.46; - } - 68%{ - transform:translate3d(-10px,-78vh,0) scale(1.04); - opacity:.38; - } - 100%{ - transform:translate3d(8px,-118vh,0) scale(1.16); - opacity:0; - } + +@keyframes siteBubbleUp { + 0% { + transform: translate3d(0, 0, 0) scale(.68); + opacity: 0; + } + 8% { + opacity: .52 + } + 38% { + transform: translate3d(14px, -42vh, 0) scale(.9); + opacity: .46; + } + 68% { + transform: translate3d(-10px, -78vh, 0) scale(1.04); + opacity: .38; + } + 100% { + transform: translate3d(8px, -118vh, 0) scale(1.16); + opacity: 0; + } } /* Рыбы: движение только слева направо, без scaleX(-1) */ -.lf1,.lf2,.lf3,.lf4,.lf5{ - left:-18%!important; - right:auto!important; - transform-origin:center!important; -} -.lf1{animation:fishNoseForward1 32s linear infinite 0s!important} -.lf2{animation:fishNoseForward2 38s linear infinite 5s!important} -.lf3{animation:fishNoseForward3 44s linear infinite 9s!important} -.lf4{animation:fishNoseForward2 35s linear infinite 13s!important} -.lf5{animation:fishNoseForward1 48s linear infinite 17s!important} - -@keyframes fishNoseForward1{ - 0%{transform:translate3d(-16vw,0,0) rotate(-1deg);opacity:0} - 8%{opacity:.84} - 30%{transform:translate3d(24vw,7px,0) rotate(1deg)} - 58%{transform:translate3d(62vw,14px,0) rotate(2deg)} - 84%{transform:translate3d(98vw,2px,0) rotate(-1deg)} - 100%{transform:translate3d(128vw,-4px,0) rotate(0deg);opacity:0} -} -@keyframes fishNoseForward2{ - 0%{transform:translate3d(-18vw,5px,0) rotate(1deg);opacity:0} - 10%{opacity:.72} - 34%{transform:translate3d(28vw,-4px,0) rotate(-1deg)} - 65%{transform:translate3d(72vw,10px,0) rotate(1deg)} - 90%{transform:translate3d(108vw,-2px,0) rotate(-1deg)} - 100%{transform:translate3d(132vw,3px,0) rotate(0deg);opacity:0} -} -@keyframes fishNoseForward3{ - 0%{transform:translate3d(-20vw,-4px,0) rotate(-1deg);opacity:0} - 12%{opacity:.64} - 40%{transform:translate3d(32vw,5px,0) rotate(1deg)} - 72%{transform:translate3d(80vw,12px,0) rotate(2deg)} - 92%{transform:translate3d(112vw,0,0) rotate(-1deg)} - 100%{transform:translate3d(134vw,-3px,0) rotate(0deg);opacity:0} +.lf1, .lf2, .lf3, .lf4, .lf5 { + left: -18% !important; + right: auto !important; + transform-origin: center !important; } -@media(max-width:700px){ - .site-bubbles{opacity:.82!important} +.lf1 { + animation: fishNoseForward1 32s linear infinite 0s !important +} + +.lf2 { + animation: fishNoseForward2 38s linear infinite 5s !important +} + +.lf3 { + animation: fishNoseForward3 44s linear infinite 9s !important +} + +.lf4 { + animation: fishNoseForward2 35s linear infinite 13s !important +} + +.lf5 { + animation: fishNoseForward1 48s linear infinite 17s !important +} + +@keyframes fishNoseForward1 { + 0% { + transform: translate3d(-16vw, 0, 0) rotate(-1deg); + opacity: 0 + } + 8% { + opacity: .84 + } + 30% { + transform: translate3d(24vw, 7px, 0) rotate(1deg) + } + 58% { + transform: translate3d(62vw, 14px, 0) rotate(2deg) + } + 84% { + transform: translate3d(98vw, 2px, 0) rotate(-1deg) + } + 100% { + transform: translate3d(128vw, -4px, 0) rotate(0deg); + opacity: 0 + } +} + +@keyframes fishNoseForward2 { + 0% { + transform: translate3d(-18vw, 5px, 0) rotate(1deg); + opacity: 0 + } + 10% { + opacity: .72 + } + 34% { + transform: translate3d(28vw, -4px, 0) rotate(-1deg) + } + 65% { + transform: translate3d(72vw, 10px, 0) rotate(1deg) + } + 90% { + transform: translate3d(108vw, -2px, 0) rotate(-1deg) + } + 100% { + transform: translate3d(132vw, 3px, 0) rotate(0deg); + opacity: 0 + } +} + +@keyframes fishNoseForward3 { + 0% { + transform: translate3d(-20vw, -4px, 0) rotate(-1deg); + opacity: 0 + } + 12% { + opacity: .64 + } + 40% { + transform: translate3d(32vw, 5px, 0) rotate(1deg) + } + 72% { + transform: translate3d(80vw, 12px, 0) rotate(2deg) + } + 92% { + transform: translate3d(112vw, 0, 0) rotate(-1deg) + } + 100% { + transform: translate3d(134vw, -3px, 0) rotate(0deg); + opacity: 0 + } +} + +@media (max-width: 700px) { + .site-bubbles { + opacity: .82 !important + } } /* ===== V15: БЕЗ РЫБ + РЕЗНЫЕ ИРКУТСКИЕ ОКОШКИ ПО БОКАМ ===== */ /* Рыб больше нет */ -.lux-fish,.hf1,.hf2,.hf3,.hf4,.hf5,.hf6,.hero-fish,.gold-fish{ - display:none!important; +.lux-fish, .hf1, .hf2, .hf3, .hf4, .hf5, .hf6, .hero-fish, .gold-fish { + display: none !important; } /* Боковые резные наличники */ -.irkutsk-side-windows{ - position:fixed; - top:0; - bottom:0; - width:76px; - z-index:5; - pointer-events:none; - color:rgba(198,146,77,.34); - opacity:.95; +.irkutsk-side-windows { + position: fixed; + top: 0; + bottom: 0; + width: 76px; + z-index: 5; + pointer-events: none; + color: rgba(198, 146, 77, .34); + opacity: .95; } -.irkutsk-side-windows svg{ - width:100%; - height:100%; - display:block; - filter:drop-shadow(0 1px 3px rgba(7,36,66,.03)); + +.irkutsk-side-windows svg { + width: 100%; + height: 100%; + display: block; + filter: drop-shadow(0 1px 3px rgba(7, 36, 66, .03)); +} + +.left-windows { + left: 0 +} + +.right-windows { + right: 0; + transform: scaleX(-1) } -.left-windows{left:0} -.right-windows{right:0;transform:scaleX(-1)} /* Очень тонкое затухание, чтобы рамка не спорила с контентом */ -.irkutsk-side-windows{ - -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%); - mask-image:linear-gradient(180deg,transparent 0,#000 5%,#000 95%,transparent 100%); +.irkutsk-side-windows { + -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); + mask-image: linear-gradient(180deg, transparent 0, #000 5%, #000 95%, transparent 100%); } /* Чуть больше воздуха от боковых декоративных рамок */ -@media(min-width:1200px){ - .page, - .lux-topbar-inner{ - width:min(1320px,86%)!important; - } +@media (min-width: 1200px) { + .page, + .lux-topbar-inner { + width: min(1320px, 86%) !important; + } } /* На тёмных секциях наличники чуть светлее визуально за счёт blend */ .regional-section, .regional-footer, -.museums-section{ - isolation:isolate; +.museums-section { + isolation: isolate; } /* На мобильных не перегружаем экран */ -@media(max-width:900px){ - .irkutsk-side-windows{ - width:46px; - color:rgba(198,146,77,.22); - } +@media (max-width: 900px) { + .irkutsk-side-windows { + width: 46px; + color: rgba(198, 146, 77, .22); + } } -@media(max-width:620px){ - .irkutsk-side-windows{ - display:none; - } + +@media (max-width: 620px) { + .irkutsk-side-windows { + display: none; + } } /* ===== V16: СТАТИЧНОЕ ИСТОРИЧЕСКОЕ ОФОРМЛЕНИЕ ПО БОКАМ САЙТА ===== */ /* Старые боковые рамки полностью отключены */ -.irkutsk-side-windows{display:none!important} +.irkutsk-side-windows { + display: none !important +} /* Слой начинается ПОСЛЕ шапки и скроллится вместе со страницей */ -body{position:relative} -.historic-side-frame{ - position:absolute; - left:0; - right:0; - top:893px; - bottom:0; - z-index:3; - pointer-events:none; - overflow:hidden; +body { + position: relative } -.historic-rail{ - position:absolute; - top:0; - bottom:0; - width:94px; - opacity:.72; - color:#b98545; - background: - linear-gradient(90deg,transparent 0 25%,rgba(198,146,77,.22) 26% 27%,transparent 28% 72%,rgba(198,146,77,.22) 73% 74%,transparent 75%), + +.historic-side-frame { + position: absolute; + left: 0; + right: 0; + top: 893px; + bottom: 0; + z-index: 3; + pointer-events: none; + overflow: hidden; +} + +.historic-rail { + position: absolute; + top: 0; + bottom: 0; + width: 94px; + opacity: .72; + color: #b98545; + background: linear-gradient(90deg, transparent 0 25%, rgba(198, 146, 77, .22) 26% 27%, transparent 28% 72%, rgba(198, 146, 77, .22) 73% 74%, transparent 75%), repeating-linear-gradient(180deg, - transparent 0 86px, - rgba(198,146,77,.22) 87px 88px, - transparent 89px 174px); -} -.historic-left{left:0} -.historic-right{right:0;transform:scaleX(-1)} - -.carved-window{ - position:absolute; - left:13px; - width:68px; - height:132px; - border:1.4px solid rgba(185,133,69,.55); - border-radius:34px 34px 6px 6px; - background: - linear-gradient(90deg,transparent 49%,rgba(185,133,69,.48) 50% 51%,transparent 52%), - linear-gradient(180deg,transparent 49%,rgba(185,133,69,.48) 50% 51%,transparent 52%); - box-shadow: - inset 0 0 0 7px rgba(244,230,214,.22), - 0 0 0 1px rgba(185,133,69,.10); -} -.carved-window:before{ - content:""; - position:absolute; - left:-9px; - right:-9px; - top:-27px; - height:43px; - clip-path:polygon(0 100%,10% 55%,20% 82%,30% 33%,40% 69%,50% 4%,60% 69%,70% 33%,80% 82%,90% 55%,100% 100%); - background:rgba(185,133,69,.45); -} -.carved-window:after{ - content:""; - position:absolute; - left:-7px; - right:-7px; - bottom:-17px; - height:12px; - border-top:1.4px solid rgba(185,133,69,.55); - border-bottom:1.4px solid rgba(185,133,69,.35); + transparent 0 86px, + rgba(198, 146, 77, .22) 87px 88px, + transparent 89px 174px); } -.cw1{top:90px}.cw2{top:23%}.cw3{top:45%}.cw4{top:67%}.cw5{top:88%} - -.carved-rosette{ - position:absolute; - left:29px; - width:36px; - height:36px; - border:1.4px solid rgba(185,133,69,.50); - transform:rotate(45deg); +.historic-left { + left: 0 } + +.historic-right { + right: 0; + transform: scaleX(-1) +} + +.carved-window { + position: absolute; + left: 13px; + width: 68px; + height: 132px; + border: 1.4px solid rgba(185, 133, 69, .55); + border-radius: 34px 34px 6px 6px; + background: linear-gradient(90deg, transparent 49%, rgba(185, 133, 69, .48) 50% 51%, transparent 52%), + linear-gradient(180deg, transparent 49%, rgba(185, 133, 69, .48) 50% 51%, transparent 52%); + box-shadow: inset 0 0 0 7px rgba(244, 230, 214, .22), + 0 0 0 1px rgba(185, 133, 69, .10); +} + +.carved-window:before { + content: ""; + position: absolute; + left: -9px; + right: -9px; + top: -27px; + height: 43px; + clip-path: polygon(0 100%, 10% 55%, 20% 82%, 30% 33%, 40% 69%, 50% 4%, 60% 69%, 70% 33%, 80% 82%, 90% 55%, 100% 100%); + background: rgba(185, 133, 69, .45); +} + +.carved-window:after { + content: ""; + position: absolute; + left: -7px; + right: -7px; + bottom: -17px; + height: 12px; + border-top: 1.4px solid rgba(185, 133, 69, .55); + border-bottom: 1.4px solid rgba(185, 133, 69, .35); +} + +.cw1 { + top: 90px +} + +.cw2 { + top: 23% +} + +.cw3 { + top: 45% +} + +.cw4 { + top: 67% +} + +.cw5 { + top: 88% +} + +.carved-rosette { + position: absolute; + left: 29px; + width: 36px; + height: 36px; + border: 1.4px solid rgba(185, 133, 69, .50); + transform: rotate(45deg); +} + .carved-rosette:before, -.carved-rosette:after{ - content:""; - position:absolute; - inset:7px; - border:1px solid rgba(185,133,69,.45); - border-radius:50%; +.carved-rosette:after { + content: ""; + position: absolute; + inset: 7px; + border: 1px solid rgba(185, 133, 69, .45); + border-radius: 50%; } -.carved-rosette:after{ - inset:14px; - background:rgba(185,133,69,.38); - border:0; -} -.historic-rail .carved-rosette:nth-of-type(2){top:16%} -.historic-rail .carved-rosette:nth-of-type(6){top:60%} -.carved-diamond-band{ - position:absolute; - left:15px; - width:64px; - height:72px; - background: - linear-gradient(45deg,transparent 42%,rgba(185,133,69,.40) 43% 46%,transparent 47% 100%) 0 0/20px 20px, - linear-gradient(-45deg,transparent 42%,rgba(185,133,69,.40) 43% 46%,transparent 47% 100%) 0 0/20px 20px; - opacity:.82; +.carved-rosette:after { + inset: 14px; + background: rgba(185, 133, 69, .38); + border: 0; +} + +.historic-rail .carved-rosette:nth-of-type(2) { + top: 16% +} + +.historic-rail .carved-rosette:nth-of-type(6) { + top: 60% +} + +.carved-diamond-band { + position: absolute; + left: 15px; + width: 64px; + height: 72px; + background: linear-gradient(45deg, transparent 42%, rgba(185, 133, 69, .40) 43% 46%, transparent 47% 100%) 0 0/20px 20px, + linear-gradient(-45deg, transparent 42%, rgba(185, 133, 69, .40) 43% 46%, transparent 47% 100%) 0 0/20px 20px; + opacity: .82; +} + +.historic-rail .carved-diamond-band:nth-of-type(4) { + top: 35% +} + +.historic-rail .carved-diamond-band:nth-of-type(8) { + top: 79% } -.historic-rail .carved-diamond-band:nth-of-type(4){top:35%} -.historic-rail .carved-diamond-band:nth-of-type(8){top:79%} /* Дополнительная историческая резьба у заголовков разделов */ .page-title:before, -.section-title:before{ - content:""; - display:inline-block; - width:42px; - height:18px; - margin-right:12px; - vertical-align:middle; - background: - linear-gradient(135deg,transparent 38%,rgba(198,146,77,.8) 39% 45%,transparent 46%) 0 0/14px 14px, - linear-gradient(45deg,transparent 38%,rgba(198,146,77,.8) 39% 45%,transparent 46%) 7px 0/14px 14px; - opacity:.78; +.section-title:before { + content: ""; + display: inline-block; + width: 42px; + height: 18px; + margin-right: 12px; + vertical-align: middle; + background: linear-gradient(135deg, transparent 38%, rgba(198, 146, 77, .8) 39% 45%, transparent 46%) 0 0/14px 14px, + linear-gradient(45deg, transparent 38%, rgba(198, 146, 77, .8) 39% 45%, transparent 46%) 7px 0/14px 14px; + opacity: .78; } /* Тонкая декоративная линия в духе деревянного наличника */ .page-title:after, -.section-title:after{ - content:""; - display:block; - width:88px; - height:5px; - margin-top:12px; - background: - repeating-linear-gradient(90deg, - rgba(198,146,77,.8) 0 8px, - transparent 8px 13px, - rgba(198,146,77,.5) 13px 16px, - transparent 16px 22px); - border-radius:99px; +.section-title:after { + content: ""; + display: block; + width: 88px; + height: 5px; + margin-top: 12px; + background: repeating-linear-gradient(90deg, + rgba(198, 146, 77, .8) 0 8px, + transparent 8px 13px, + rgba(198, 146, 77, .5) 13px 16px, + transparent 16px 22px); + border-radius: 99px; } /* На шапке декора боковых наличников нет */ .lux-topbar, .lux-hero, -.lux-feature-strip{ - position:relative; - z-index:10; +.lux-feature-strip { + position: relative; + z-index: 10; } /* На узких экранах резьба становится тоньше */ -@media(max-width:1100px){ - .historic-rail{width:64px;opacity:.46} - .carved-window{left:10px;width:45px;height:94px} - .carved-rosette{left:19px;width:28px;height:28px} - .carved-diamond-band{left:9px;width:48px} +@media (max-width: 1100px) { + .historic-rail { + width: 64px; + opacity: .46 + } + + .carved-window { + left: 10px; + width: 45px; + height: 94px + } + + .carved-rosette { + left: 19px; + width: 28px; + height: 28px + } + + .carved-diamond-band { + left: 9px; + width: 48px + } } -@media(max-width:760px){ - .historic-side-frame{display:none} + +@media (max-width: 760px) { + .historic-side-frame { + display: none + } } /* Никакого движения декора при наведении или движении мыши */ .historic-side-frame, -.historic-side-frame *{ - animation:none!important; - transition:none!important; - transform-origin:center; +.historic-side-frame * { + animation: none !important; + transition: none !important; + transform-origin: center; +} + +.historic-right { + transform: scaleX(-1) !important } -.historic-right{transform:scaleX(-1)!important} /* ===== V17 — СОВРЕМЕННАЯ ПОЛНОСТЬЮ СИНЯЯ ШАПКА ===== */ /* Верхняя навигация */ -.lux-topbar{ - background:#072f52!important; - border-bottom:1px solid rgba(255,255,255,.12)!important; - box-shadow:none!important; - color:#fff!important; +.lux-topbar { + background: #072f52 !important; + border-bottom: 1px solid rgba(255, 255, 255, .12) !important; + box-shadow: none !important; + color: #fff !important; } + .lux-brand, .lux-brand-icon, -.lux-menu a{ - color:#fff!important; +.lux-menu a { + color: #fff !important; } -.lux-brand-copy b{ - font-family:Arial,Helvetica,sans-serif!important; - font-size:22px!important; - font-weight:700!important; - letter-spacing:.08em!important; + +.lux-brand-copy b { + font-family: Arial, Helvetica, sans-serif !important; + font-size: 22px !important; + font-weight: 700 !important; + letter-spacing: .08em !important; } -.lux-brand-copy small{ - color:rgba(255,255,255,.66)!important; - font-family:Arial,Helvetica,sans-serif!important; - font-size:8px!important; - letter-spacing:.18em!important; + +.lux-brand-copy small { + color: rgba(255, 255, 255, .66) !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: 8px !important; + letter-spacing: .18em !important; } -.lux-menu{ - font-family:Arial,Helvetica,sans-serif!important; - font-size:12px!important; - font-weight:500!important; - letter-spacing:.015em!important; + +.lux-menu { + font-family: Arial, Helvetica, sans-serif !important; + font-size: 12px !important; + font-weight: 500 !important; + letter-spacing: .015em !important; } -.lux-menu a:after{ - background:#d3a45f!important; + +.lux-menu a:after { + background: #d3a45f !important; } -.lux-circle,.lux-save{ - color:#fff!important; - background:rgba(255,255,255,.06)!important; - border-color:rgba(255,255,255,.28)!important; - backdrop-filter:blur(8px); + +.lux-circle, .lux-save { + color: #fff !important; + background: rgba(255, 255, 255, .06) !important; + border-color: rgba(255, 255, 255, .28) !important; + backdrop-filter: blur(8px); } /* Вся hero-шапка — единый синий цвет, без градиентов */ -.lux-hero{ - height:630px!important; - background:#07365d!important; +.lux-hero { + height: 630px !important; + background: #07365d !important; } -.lux-city-photo{ - display:none!important; - background:none!important; + +.lux-city-photo { + display: none !important; + background: none !important; } -.lux-city-overlay{ - display:none!important; + +.lux-city-overlay { + display: none !important; } -.lux-cream-panel{ - display:none!important; + +.lux-cream-panel { + display: none !important; } /* Водная зона больше не отдельный градиент */ -.lux-water-zone{ - height:190px!important; - background:#07365d!important; - border-bottom:1px solid rgba(255,255,255,.06); +.lux-water-zone { + height: 190px !important; + background: #07365d !important; + border-bottom: 1px solid rgba(255, 255, 255, .06); } -.lux-water-zone:after{ - display:none!important; + +.lux-water-zone:after { + display: none !important; } -.water-rays{ - opacity:.12!important; - background:repeating-linear-gradient( - 104deg, - transparent 0 10%, - rgba(255,255,255,.06) 10.5%, - transparent 11.5% - )!important; + +.water-rays { + opacity: .12 !important; + background: repeating-linear-gradient( + 104deg, + transparent 0 10%, + rgba(255, 255, 255, .06) 10.5%, + transparent 11.5% + ) !important; } -.water-surface{ - border-top-color:rgba(255,255,255,.22)!important; - filter:none!important; + +.water-surface { + border-top-color: rgba(255, 255, 255, .22) !important; + filter: none !important; } -.lux-water-phrase{ - color:#d9ad69!important; - font-family:Arial,Helvetica,sans-serif!important; - font-size:13px!important; - font-weight:600!important; - line-height:1.4!important; - letter-spacing:.13em!important; - text-transform:uppercase; - text-shadow:none!important; + +.lux-water-phrase { + color: #d9ad69 !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: 13px !important; + font-weight: 600 !important; + line-height: 1.4 !important; + letter-spacing: .13em !important; + text-transform: uppercase; + text-shadow: none !important; } /* Основной текст — более современная типографика */ -.lux-copy{ - top:222px!important; - width:min(670px,55vw)!important; - color:#fff!important; +.lux-copy { + top: 222px !important; + width: min(670px, 55vw) !important; + color: #fff !important; } -.lux-eyebrow{ - margin-bottom:16px!important; - color:#d9ad69!important; - font-family:Arial,Helvetica,sans-serif!important; - font-size:12px!important; - font-weight:600!important; - letter-spacing:.16em!important; + +.lux-eyebrow { + margin-bottom: 16px !important; + color: #d9ad69 !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: 12px !important; + font-weight: 600 !important; + letter-spacing: .16em !important; } -.lux-copy h1{ - color:#fff!important; - font-family:Arial,Helvetica,sans-serif!important; - font-size:clamp(68px,7vw,108px)!important; - font-weight:700!important; - line-height:.88!important; - letter-spacing:-.055em!important; + +.lux-copy h1 { + color: #fff !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: clamp(68px, 7vw, 108px) !important; + font-weight: 700 !important; + line-height: .88 !important; + letter-spacing: -.055em !important; } -.lux-copy h2{ - max-width:620px!important; - margin-top:22px!important; - color:#f8f2e9!important; - font-family:Arial,Helvetica,sans-serif!important; - font-size:clamp(25px,2.3vw,36px)!important; - font-weight:400!important; - line-height:1.08!important; - letter-spacing:-.025em!important; + +.lux-copy h2 { + max-width: 620px !important; + margin-top: 22px !important; + color: #f8f2e9 !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: clamp(25px, 2.3vw, 36px) !important; + font-weight: 400 !important; + line-height: 1.08 !important; + letter-spacing: -.025em !important; } -.lux-note{ - margin-top:21px!important; - color:#d9ad69!important; - font-family:Arial,Helvetica,sans-serif!important; - font-size:11px!important; - font-weight:600!important; - letter-spacing:.14em!important; + +.lux-note { + margin-top: 21px !important; + color: #d9ad69 !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: 11px !important; + font-weight: 600 !important; + letter-spacing: .14em !important; } -.lux-buttons{ - margin-top:25px!important; + +.lux-buttons { + margin-top: 25px !important; } -.lux-primary,.lux-secondary{ - height:48px!important; - border-radius:7px!important; - font-family:Arial,Helvetica,sans-serif!important; - font-size:12px!important; - font-weight:600!important; - letter-spacing:.035em!important; + +.lux-primary, .lux-secondary { + height: 48px !important; + border-radius: 7px !important; + font-family: Arial, Helvetica, sans-serif !important; + font-size: 12px !important; + font-weight: 600 !important; + letter-spacing: .035em !important; } -.lux-primary{ - background:#d09a51!important; - color:#072f52!important; - box-shadow:none!important; + +.lux-primary { + background: #d09a51 !important; + color: #072f52 !important; + box-shadow: none !important; } -.lux-primary:hover{ - background:#dfad68!important; + +.lux-primary:hover { + background: #dfad68 !important; } -.lux-secondary{ - color:#fff!important; - background:transparent!important; - border:1px solid rgba(255,255,255,.38)!important; - backdrop-filter:none!important; + +.lux-secondary { + color: #fff !important; + background: transparent !important; + border: 1px solid rgba(255, 255, 255, .38) !important; + backdrop-filter: none !important; } /* Убираем резное окно именно из шапки */ -.lux-lace{ - display:none!important; +.lux-lace { + display: none !important; } /* Нижняя часть шапки — тоже синяя, без цветового градиента */ -.lux-bottom-waves{ - height:105px!important; +.lux-bottom-waves { + height: 105px !important; } -.lux-bottom-waves .bw1{ - fill:#062b4b!important; + +.lux-bottom-waves .bw1 { + fill: #062b4b !important; } -.lux-bottom-waves .bw2{ - fill:#07365d!important; - opacity:1!important; + +.lux-bottom-waves .bw2 { + fill: #07365d !important; + opacity: 1 !important; } -.lux-bottom-waves .bwline{ - stroke:rgba(217,173,105,.62)!important; + +.lux-bottom-waves .bwline { + stroke: rgba(217, 173, 105, .62) !important; } -.lux-bottom-waves .bwline2{ - stroke:rgba(255,255,255,.20)!important; + +.lux-bottom-waves .bwline2 { + stroke: rgba(255, 255, 255, .20) !important; } /* Бейдж — чище и проще */ -.lux-badge{ - width:132px!important; - height:132px!important; - bottom:78px!important; - background:#062b4b!important; - border:1px solid rgba(217,173,105,.72)!important; - box-shadow:none!important; - backdrop-filter:none!important; +.lux-badge { + width: 132px !important; + height: 132px !important; + bottom: 78px !important; + background: #062b4b !important; + border: 1px solid rgba(217, 173, 105, .72) !important; + box-shadow: none !important; + backdrop-filter: none !important; } -.lux-badge b{ - font-family:Arial,Helvetica,sans-serif!important; - font-size:13px!important; - letter-spacing:.14em!important; + +.lux-badge b { + font-family: Arial, Helvetica, sans-serif !important; + font-size: 13px !important; + letter-spacing: .14em !important; } -.lux-badge small{ - font-family:Arial,Helvetica,sans-serif!important; - color:rgba(255,255,255,.66)!important; + +.lux-badge small { + font-family: Arial, Helvetica, sans-serif !important; + color: rgba(255, 255, 255, .66) !important; } /* Блок под шапкой оставляем светлым для контраста */ -.lux-feature-strip{ - background:#fbf4ea!important; +.lux-feature-strip { + background: #fbf4ea !important; } /* Пузырьки в самой шапке чуть спокойнее */ -.lux-hero .bubble-field i{ - border-color:rgba(255,255,255,.28)!important; - opacity:.65; +.lux-hero .bubble-field i { + border-color: rgba(255, 255, 255, .28) !important; + opacity: .65; } -@media(max-width:800px){ - .lux-hero{height:590px!important} - .lux-copy{top:205px!important;width:80vw!important} - .lux-copy h1{font-size:62px!important} - .lux-copy h2{font-size:25px!important} +@media (max-width: 800px) { + .lux-hero { + height: 590px !important + } + + .lux-copy { + top: 205px !important; + width: 80vw !important + } + + .lux-copy h1 { + font-size: 62px !important + } + + .lux-copy h2 { + font-size: 25px !important + } } -@media(max-width:560px){ - .lux-copy h1{font-size:49px!important} - .lux-copy h2{font-size:21px!important} + +@media (max-width: 560px) { + .lux-copy h1 { + font-size: 49px !important + } + + .lux-copy h2 { + font-size: 21px !important + } } @@ -1748,112 +4344,126 @@ body{position:relative} /* Скрываем прежнюю шапку целиком */ .lux-topbar, .lux-hero, -.lux-feature-strip{ - display:none!important; +.lux-feature-strip { + display: none !important; } /* Точная визуальная шапка по референсу */ -.exact-reference-header{ - position:relative; - z-index:30; - width:100%; - background:#062b4b; - overflow:hidden; +.exact-reference-header { + position: relative; + z-index: 30; + width: 100%; + background: #062b4b; + overflow: hidden; } -.exact-reference-visual{ - width:100%; - line-height:0; - background:#062b4b; + +.exact-reference-visual { + width: 100%; + line-height: 0; + background: #062b4b; } -.exact-reference-visual img{ - display:block; - width:100%; - height:auto; - object-fit:cover; + +.exact-reference-visual img { + display: block; + width: 100%; + height: auto; + object-fit: cover; } /* Нижняя синяя навигационная плашка */ -.exact-reference-nav{ - min-height:54px; - display:flex; - align-items:center; - justify-content:center; - gap:38px; - padding:0 28px; - background:#082a48; - border-top:1px solid rgba(235,211,178,.72); - white-space:nowrap; - overflow-x:auto; - scrollbar-width:none; +.exact-reference-nav { + min-height: 54px; + display: flex; + align-items: center; + justify-content: center; + gap: 38px; + padding: 0 28px; + background: #082a48; + border-top: 1px solid rgba(235, 211, 178, .72); + white-space: nowrap; + overflow-x: auto; + scrollbar-width: none; } -.exact-reference-nav::-webkit-scrollbar{display:none} -.exact-reference-nav a{ - position:relative; - color:#f4e6d6!important; - text-decoration:none; - font-family:Arial,Helvetica,sans-serif!important; - font-size:13px; - font-weight:600; - letter-spacing:.08em; - line-height:54px; - opacity:.92; + +.exact-reference-nav::-webkit-scrollbar { + display: none } -.exact-reference-nav a:after{ - content:""; - position:absolute; - left:0; - right:0; - bottom:8px; - height:1px; - background:#c6924d; - transform:scaleX(0); - transform-origin:center; - transition:transform .22s ease; + +.exact-reference-nav a { + position: relative; + color: #f4e6d6 !important; + text-decoration: none; + font-family: Arial, Helvetica, sans-serif !important; + font-size: 13px; + font-weight: 600; + letter-spacing: .08em; + line-height: 54px; + opacity: .92; +} + +.exact-reference-nav a:after { + content: ""; + position: absolute; + left: 0; + right: 0; + bottom: 8px; + height: 1px; + background: #c6924d; + transform: scaleX(0); + transform-origin: center; + transition: transform .22s ease; +} + +.exact-reference-nav a:hover:after { + transform: scaleX(1) } -.exact-reference-nav a:hover:after{transform:scaleX(1)} /* Старое absolute-оформление начиналось с фиксированной высоты прежней шапки: теперь запускаем его ниже референсной шапки */ -.historic-side-frame{ - top:calc(100vw * 0.4107 + 54px)!important; +.historic-side-frame { + top: calc(100vw * 0.4107 + 54px) !important; } /* Пузырьки оставляем на сайте, но не поверх самой шапки */ -.exact-reference-header{ - isolation:isolate; +.exact-reference-header { + isolation: isolate; } + .exact-reference-header ~ .site-bubbles, -.site-bubbles{ - z-index:6; +.site-bubbles { + z-index: 6; } -.exact-reference-header{ - z-index:40; + +.exact-reference-header { + z-index: 40; } /* Адаптация: сохраняем весь дизайн, ничего не режем */ -@media(max-width:900px){ - .exact-reference-nav{ - justify-content:flex-start; - gap:28px; - min-height:50px; - } - .exact-reference-nav a{ - font-size:11px; - line-height:50px; - } -} -@media(max-width:560px){ - .exact-reference-nav{ - min-height:46px; - gap:22px; - padding:0 16px; - } - .exact-reference-nav a{ - font-size:10px; - line-height:46px; - } +@media (max-width: 900px) { + .exact-reference-nav { + justify-content: flex-start; + gap: 28px; + min-height: 50px; + } + + .exact-reference-nav a { + font-size: 11px; + line-height: 50px; + } } +@media (max-width: 560px) { + .exact-reference-nav { + min-height: 46px; + gap: 22px; + padding: 0 16px; + } + + .exact-reference-nav a { + font-size: 10px; + line-height: 46px; + } +} /* ===== V19: ИРКУТСК + БАЙКАЛ, ПОЛНОСТЬЮ HTML/CSS/SVG ===== */ @@ -1865,1527 +4475,3455 @@ body{position:relative} .lux-feature-strip, .premium-topbar, .premium-hero, -.hero-feature-strip{ - display:none!important; +.hero-feature-strip { + display: none !important; } /* Основная сцена */ -.baikal-header{ - --deep:#052c4d; - --deep2:#06365e; - --blue:#0c4c78; - --blue2:#2c739f; - --cream:#f7ebdc; - --gold:#c99552; - position:relative; - min-height:760px; - overflow:hidden; - isolation:isolate; - color:var(--cream); - background: - radial-gradient(circle at 77% 39%,rgba(41,108,151,.30),transparent 28%), - radial-gradient(circle at 58% 18%,rgba(15,79,121,.38),transparent 36%), +.baikal-header { + --deep: #052c4d; + --deep2: #06365e; + --blue: #0c4c78; + --blue2: #2c739f; + --cream: #f7ebdc; + --gold: #c99552; + position: relative; + min-height: 760px; + overflow: hidden; + isolation: isolate; + color: var(--cream); + background: radial-gradient(circle at 77% 39%, rgba(41, 108, 151, .30), transparent 28%), + radial-gradient(circle at 58% 18%, rgba(15, 79, 121, .38), transparent 36%), #052f52; } /* Небольшая водная глубина без использования изображений */ -.baikal-header:before{ - content:""; - position:absolute; - inset:0; - z-index:-3; - background: - repeating-linear-gradient(104deg,transparent 0 11%,rgba(119,178,210,.032) 11.3%,transparent 12.2%), - repeating-linear-gradient(0deg,transparent 0 72px,rgba(255,255,255,.017) 73px,transparent 74px); +.baikal-header:before { + content: ""; + position: absolute; + inset: 0; + z-index: -3; + background: repeating-linear-gradient(104deg, transparent 0 11%, rgba(119, 178, 210, .032) 11.3%, transparent 12.2%), + repeating-linear-gradient(0deg, transparent 0 72px, rgba(255, 255, 255, .017) 73px, transparent 74px); } /* Навигация */ -.baikal-nav-wrap{ - position:relative; - z-index:20; - height:88px; - display:flex; - align-items:center; - gap:36px; - width:min(1480px,92%); - margin:0 auto; - border-bottom:1px solid rgba(247,235,220,.10); +.baikal-nav-wrap { + position: relative; + z-index: 20; + height: 88px; + display: flex; + align-items: center; + gap: 36px; + width: min(1480px, 92%); + margin: 0 auto; + border-bottom: 1px solid rgba(247, 235, 220, .10); } -.baikal-brand{ - flex:0 0 auto; - display:flex; - align-items:center; - gap:11px; - color:var(--cream); + +.baikal-brand { + flex: 0 0 auto; + display: flex; + align-items: center; + gap: 11px; + color: var(--cream); } -.brand-window{ - width:38px;height:38px; - fill:none;stroke:var(--gold);stroke-width:1.55; + +.brand-window { + width: 38px; + height: 38px; + fill: none; + stroke: var(--gold); + stroke-width: 1.55; } -.baikal-brand span{display:flex;flex-direction:column} -.baikal-brand b{ - font:700 20px/1 Georgia,"Times New Roman",serif; - letter-spacing:.08em; + +.baikal-brand span { + display: flex; + flex-direction: column } -.baikal-brand small{ - margin-top:5px; - font:600 7.5px/1 Arial,sans-serif; - letter-spacing:.18em; - color:rgba(247,235,220,.62); + +.baikal-brand b { + font: 700 20px/1 Georgia, "Times New Roman", serif; + letter-spacing: .08em; } -.baikal-nav{ - display:flex; - align-items:center; - justify-content:center; - gap:27px; - flex:1; - min-width:0; + +.baikal-brand small { + margin-top: 5px; + font: 600 7.5px/1 Arial, sans-serif; + letter-spacing: .18em; + color: rgba(247, 235, 220, .62); } -.baikal-nav a{ - position:relative; - padding:34px 0 30px; - color:rgba(247,235,220,.82); - font:500 11px/1 Arial,sans-serif; - letter-spacing:.015em; - white-space:nowrap; + +.baikal-nav { + display: flex; + align-items: center; + justify-content: center; + gap: 27px; + flex: 1; + min-width: 0; } -.baikal-nav a:after{ - content:""; - position:absolute; - left:50%;right:50%;bottom:20px;height:1px; - background:var(--gold); - transition:left .25s ease,right .25s ease; + +.baikal-nav a { + position: relative; + padding: 34px 0 30px; + color: rgba(247, 235, 220, .82); + font: 500 11px/1 Arial, sans-serif; + letter-spacing: .015em; + white-space: nowrap; } -.baikal-nav a:before{ - content:"◇"; - position:absolute; - left:50%;bottom:12px; - transform:translateX(-50%) scale(.5); - color:var(--gold); - opacity:0; - transition:opacity .2s ease,transform .2s ease; + +.baikal-nav a:after { + content: ""; + position: absolute; + left: 50%; + right: 50%; + bottom: 20px; + height: 1px; + background: var(--gold); + transition: left .25s ease, right .25s ease; } -.baikal-nav a:hover:after{left:0;right:0} -.baikal-nav a:hover:before{opacity:1;transform:translateX(-50%) scale(.72)} -.baikal-nav-actions{display:flex;align-items:center;gap:12px} -.nav-circle,.nav-save{ - height:40px; - display:flex;align-items:center;justify-content:center; - border:1px solid rgba(201,149,82,.60); - color:var(--cream); + +.baikal-nav a:before { + content: "◇"; + position: absolute; + left: 50%; + bottom: 12px; + transform: translateX(-50%) scale(.5); + color: var(--gold); + opacity: 0; + transition: opacity .2s ease, transform .2s ease; } -.nav-circle{width:40px;border-radius:50%;font-size:17px} -.nav-save{ - border-radius:999px;padding:0 17px; - font:500 10px Arial,sans-serif;gap:7px; + +.baikal-nav a:hover:after { + left: 0; + right: 0 +} + +.baikal-nav a:hover:before { + opacity: 1; + transform: translateX(-50%) scale(.72) +} + +.baikal-nav-actions { + display: flex; + align-items: center; + gap: 12px +} + +.nav-circle, .nav-save { + height: 40px; + display: flex; + align-items: center; + justify-content: center; + border: 1px solid rgba(201, 149, 82, .60); + color: var(--cream); +} + +.nav-circle { + width: 40px; + border-radius: 50%; + font-size: 17px +} + +.nav-save { + border-radius: 999px; + padding: 0 17px; + font: 500 10px Arial, sans-serif; + gap: 7px; } /* Крупная резьба */ -.carved-left{ - position:absolute; - left:-18px; - top:74px; - height:690px; - width:310px; - z-index:5; - color:rgba(247,235,220,.86); - filter:drop-shadow(0 10px 22px rgba(0,0,0,.16)); +.carved-left { + position: absolute; + left: -18px; + top: 74px; + height: 690px; + width: 310px; + z-index: 5; + color: rgba(247, 235, 220, .86); + filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .16)); } -.carved-left:after{content:""} -.carved-corner{ - position:absolute;z-index:4; - color:rgba(247,235,220,.72); + +.carved-left:after { + content: "" +} + +.carved-corner { + position: absolute; + z-index: 4; + color: rgba(247, 235, 220, .72); +} + +.carved-corner-top { + right: -10px; + top: 74px; + width: 230px; + height: 230px } -.carved-corner-top{right:-10px;top:74px;width:230px;height:230px} /* Текст */ -.hero-copy{ - position:relative; - z-index:12; - width:min(690px,47vw); - margin-left:max(330px,18vw); - padding-top:86px; +.hero-copy { + position: relative; + z-index: 12; + width: min(690px, 47vw); + margin-left: max(330px, 18vw); + padding-top: 86px; } -.hero-eyebrow{ - display:flex;align-items:center;gap:14px; - color:var(--gold); - font:600 11px/1 Arial,sans-serif; - letter-spacing:.27em; + +.hero-eyebrow { + display: flex; + align-items: center; + gap: 14px; + color: var(--gold); + font: 600 11px/1 Arial, sans-serif; + letter-spacing: .27em; } -.hero-eyebrow span{width:42px;height:1px;background:var(--gold)} -.hero-copy h1{ - margin:20px 0 6px; - color:var(--cream); - font:500 clamp(76px,7.6vw,126px)/.84 Georgia,"Times New Roman",serif; - letter-spacing:-.055em; + +.hero-eyebrow span { + width: 42px; + height: 1px; + background: var(--gold) } -.hero-copy h2{ - margin:22px 0 0; - color:#f5e6d2; - font:400 clamp(24px,2.1vw,36px)/1.08 Arial,sans-serif; - letter-spacing:-.025em; + +.hero-copy h1 { + margin: 20px 0 6px; + color: var(--cream); + font: 500 clamp(76px, 7.6vw, 126px)/.84 Georgia, "Times New Roman", serif; + letter-spacing: -.055em; } -.hero-copy p{ - max-width:560px; - margin:20px 0 0; - color:rgba(247,235,220,.67); - font:400 13px/1.65 Arial,sans-serif; + +.hero-copy h2 { + margin: 22px 0 0; + color: #f5e6d2; + font: 400 clamp(24px, 2.1vw, 36px)/1.08 Arial, sans-serif; + letter-spacing: -.025em; } -.hero-actions{display:flex;gap:13px;margin-top:26px} -.hero-actions a{ - height:48px;display:inline-flex;align-items:center;justify-content:center; - border-radius:999px;padding:0 23px; - font:600 11px Arial,sans-serif; + +.hero-copy p { + max-width: 560px; + margin: 20px 0 0; + color: rgba(247, 235, 220, .67); + font: 400 13px/1.65 Arial, sans-serif; } -.hero-primary{ - background:linear-gradient(180deg,#d9ac68,#c9914e); - color:#082b4a; - box-shadow:0 8px 24px rgba(0,0,0,.13); + +.hero-actions { + display: flex; + gap: 13px; + margin-top: 26px +} + +.hero-actions a { + height: 48px; + display: inline-flex; + align-items: center; + justify-content: center; + border-radius: 999px; + padding: 0 23px; + font: 600 11px Arial, sans-serif; +} + +.hero-primary { + background: linear-gradient(180deg, #d9ac68, #c9914e); + color: #082b4a; + box-shadow: 0 8px 24px rgba(0, 0, 0, .13); +} + +.hero-primary b { + font-size: 18px; + margin-left: 18px +} + +.hero-primary { + text-transform: uppercase +} + +.hero-primary-arrow { + width: 1.25em; + height: 1.25em; + margin-left: 14px; + fill: none; + stroke: currentColor; + stroke-width: 1.8; + stroke-linecap: round; + stroke-linejoin: round; + flex: none } -.hero-primary b{font-size:18px;margin-left:18px} -.hero-primary{text-transform:uppercase} -.hero-primary-arrow{width:1.25em;height:1.25em;margin-left:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none} /* Читаемая шапка: навигация не должна выглядеть как подпись к логотипу. */ -.baikal-nav-wrap{height:118px!important;gap:30px!important} -.brand-window{width:44px;height:44px} -.baikal-brand b{font-size:24px!important} -.baikal-brand small{font-size:9px!important} -.baikal-nav{gap:20px!important} -.baikal-nav a{font-size:13px!important;padding:38px 0 34px!important} -.menu-toggle{display:none;border:0;background:transparent;color:var(--cream);padding:10px;cursor:pointer} -.menu-toggle span{display:block;width:25px;height:2px;margin:5px 0;background:currentColor;border-radius:2px;transition:transform .2s ease,opacity .2s ease} - -@media(max-width:1200px){ - .baikal-nav-wrap{height:108px!important;gap:22px!important} - .baikal-brand b{font-size:22px!important} - .baikal-nav{gap:14px!important} - .baikal-nav a{font-size:12px!important} +.baikal-nav-wrap { + height: 118px !important; + gap: 30px !important } -@media(max-width:900px){ - .baikal-nav-wrap{height:96px!important;gap:14px!important} - .baikal-brand b{font-size:20px!important} - .baikal-nav{gap:9px!important} - .baikal-nav a{font-size:11px!important;padding:28px 0 24px!important} +.brand-window { + width: 44px; + height: 44px } -.hero-secondary{ - border:1px solid rgba(201,149,82,.72); - color:var(--cream); + +.baikal-brand b { + font-size: 24px !important +} + +.baikal-brand small { + font-size: 9px !important +} + +.baikal-nav { + gap: 20px !important +} + +.baikal-nav a { + font-size: 13px !important; + padding: 38px 0 34px !important +} + +.menu-toggle { + display: none; + border: 0; + background: transparent; + color: var(--cream); + padding: 10px; + cursor: pointer +} + +.menu-toggle span { + display: block; + width: 25px; + height: 2px; + margin: 5px 0; + background: currentColor; + border-radius: 2px; + transition: transform .2s ease, opacity .2s ease +} + +@media (max-width: 1200px) { + .baikal-nav-wrap { + height: 108px !important; + gap: 22px !important + } + + .baikal-brand b { + font-size: 22px !important + } + + .baikal-nav { + gap: 14px !important + } + + .baikal-nav a { + font-size: 12px !important + } +} + +@media (max-width: 900px) { + .baikal-nav-wrap { + height: 96px !important; + gap: 14px !important + } + + .baikal-brand b { + font-size: 20px !important + } + + .baikal-nav { + gap: 9px !important + } + + .baikal-nav a { + font-size: 11px !important; + padding: 28px 0 24px !important + } +} + +.hero-secondary { + border: 1px solid rgba(201, 149, 82, .72); + color: var(--cream); } /* Байкальский пейзаж справа */ -.baikal-landscape{ - position:absolute; - z-index:3; - right:-4%; - bottom:120px; - width:58%; - height:46%; - opacity:.90; +.baikal-landscape { + position: absolute; + z-index: 3; + right: -4%; + bottom: 120px; + width: 58%; + height: 46%; + opacity: .90; } -.deep-label{ - position:absolute;z-index:10; - right:7%;top:155px; - display:flex;gap:12px;align-items:flex-start; - color:var(--gold); - font:600 11px/1.45 Arial,sans-serif; - letter-spacing:.13em; + +.deep-label { + position: absolute; + z-index: 10; + right: 7%; + top: 155px; + display: flex; + gap: 12px; + align-items: flex-start; + color: var(--gold); + font: 600 11px/1.45 Arial, sans-serif; + letter-spacing: .13em; +} + +.deep-label span { + width: 36px; + height: 1px; + background: var(--gold); + margin-top: 7px } -.deep-label span{width:36px;height:1px;background:var(--gold);margin-top:7px} /* Рыба */ -.fish-lane{ - position:absolute; - z-index:11; - left:28%;right:6%; - top:205px; - height:150px; - pointer-events:none; +.fish-lane { + position: absolute; + z-index: 11; + left: 28%; + right: 6%; + top: 205px; + height: 150px; + pointer-events: none; } -.fish-swimmer{ - position:absolute; - width:170px;height:72px; - color:#d1a15e; - animation:fishRoundTrip 28s linear infinite; - will-change:transform,opacity; + +.fish-swimmer { + position: absolute; + width: 170px; + height: 72px; + color: #d1a15e; + animation: fishRoundTrip 28s linear infinite; + will-change: transform, opacity; } -.baikal-fish{width:170px;height:72px;display:block} -.fish-trail{position:absolute;left:-18px;top:29px;width:35px;height:20px} -.fish-trail i{ - position:absolute; - border:1px solid rgba(215,236,246,.58); - border-radius:50%; - background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.55),rgba(255,255,255,.04) 35%,transparent 70%); - animation:trailBubble 2.8s ease-out infinite; + +.baikal-fish { + width: 170px; + height: 72px; + display: block } -.fish-trail i:nth-child(1){width:5px;height:5px;left:18px;top:8px;animation-delay:0s} -.fish-trail i:nth-child(2){width:7px;height:7px;left:10px;top:3px;animation-delay:.45s} -.fish-trail i:nth-child(3){width:4px;height:4px;left:2px;top:10px;animation-delay:.9s} -.fish-trail i:nth-child(4){width:6px;height:6px;left:15px;top:14px;animation-delay:1.35s} -.fish-trail i:nth-child(5){width:3px;height:3px;left:5px;top:2px;animation-delay:1.8s} -@keyframes fishRoundTrip{ - 0%{transform:translate3d(-8vw,0,0) scaleX(1) rotate(-1deg);opacity:0} - 5%{opacity:.86} - 45%{transform:translate3d(48vw,18px,0) scaleX(1) rotate(1deg);opacity:.86} - 49%{transform:translate3d(53vw,22px,0) scaleX(1) rotate(0deg);opacity:0} - 50%{transform:translate3d(53vw,22px,0) scaleX(-1) rotate(0deg);opacity:0} - 55%{opacity:.86} - 95%{transform:translate3d(-8vw,-3px,0) scaleX(-1) rotate(-1deg);opacity:.86} - 100%{transform:translate3d(-8vw,-3px,0) scaleX(-1) rotate(0deg);opacity:0} + +.fish-trail { + position: absolute; + left: -18px; + top: 29px; + width: 35px; + height: 20px } -@keyframes trailBubble{ - 0%{transform:translate3d(0,0,0) scale(.65);opacity:0} - 18%{opacity:.68} - 100%{transform:translate3d(-15px,-20px,0) scale(1.15);opacity:0} + +.fish-trail i { + position: absolute; + border: 1px solid rgba(215, 236, 246, .58); + border-radius: 50%; + background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .55), rgba(255, 255, 255, .04) 35%, transparent 70%); + animation: trailBubble 2.8s ease-out infinite; +} + +.fish-trail i:nth-child(1) { + width: 5px; + height: 5px; + left: 18px; + top: 8px; + animation-delay: 0s +} + +.fish-trail i:nth-child(2) { + width: 7px; + height: 7px; + left: 10px; + top: 3px; + animation-delay: .45s +} + +.fish-trail i:nth-child(3) { + width: 4px; + height: 4px; + left: 2px; + top: 10px; + animation-delay: .9s +} + +.fish-trail i:nth-child(4) { + width: 6px; + height: 6px; + left: 15px; + top: 14px; + animation-delay: 1.35s +} + +.fish-trail i:nth-child(5) { + width: 3px; + height: 3px; + left: 5px; + top: 2px; + animation-delay: 1.8s +} + +@keyframes fishRoundTrip { + 0% { + transform: translate3d(-8vw, 0, 0) scaleX(1) rotate(-1deg); + opacity: 0 + } + 5% { + opacity: .86 + } + 45% { + transform: translate3d(48vw, 18px, 0) scaleX(1) rotate(1deg); + opacity: .86 + } + 49% { + transform: translate3d(53vw, 22px, 0) scaleX(1) rotate(0deg); + opacity: 0 + } + 50% { + transform: translate3d(53vw, 22px, 0) scaleX(-1) rotate(0deg); + opacity: 0 + } + 55% { + opacity: .86 + } + 95% { + transform: translate3d(-8vw, -3px, 0) scaleX(-1) rotate(-1deg); + opacity: .86 + } + 100% { + transform: translate3d(-8vw, -3px, 0) scaleX(-1) rotate(0deg); + opacity: 0 + } +} + +@keyframes trailBubble { + 0% { + transform: translate3d(0, 0, 0) scale(.65); + opacity: 0 + } + 18% { + opacity: .68 + } + 100% { + transform: translate3d(-15px, -20px, 0) scale(1.15); + opacity: 0 + } } /* Волны и переход */ -.baikal-waves{ - position:absolute; - z-index:9; - left:0;right:0;bottom:-1px; - width:100%;height:235px; +.baikal-waves { + position: absolute; + z-index: 9; + left: 0; + right: 0; + bottom: -1px; + width: 100%; + height: 235px; +} + +.baikal-waves .w1 { + fill: #0b4a75 +} + +.baikal-waves .w2 { + fill: #07395f +} + +.baikal-waves .w3 { + fill: #052a49 +} + +.baikal-waves .gold-line { + fill: none; + stroke: #c99552; + stroke-width: 2.2; + opacity: .82 +} + +.baikal-waves .gold-line.thin { + stroke-width: 1.15; + opacity: .55 +} + +.baikal-waves .cream-transition { + fill: #f8eddf } -.baikal-waves .w1{fill:#0b4a75} -.baikal-waves .w2{fill:#07395f} -.baikal-waves .w3{fill:#052a49} -.baikal-waves .gold-line{fill:none;stroke:#c99552;stroke-width:2.2;opacity:.82} -.baikal-waves .gold-line.thin{stroke-width:1.15;opacity:.55} -.baikal-waves .cream-transition{fill:#f8eddf} /* Нижняя светлая панель */ -.baikal-feature-strip{ - position:relative; - z-index:15; - display:grid; - grid-template-columns:repeat(5,1fr); - gap:0; - min-height:135px; - padding:18px max(6vw,70px) 28px; - background:#f8eddf; - color:#082b4a; +.baikal-feature-strip { + position: relative; + z-index: 15; + display: grid; + grid-template-columns:repeat(5, 1fr); + gap: 0; + min-height: 135px; + padding: 18px max(6vw, 70px) 28px; + background: #f8eddf; + color: #082b4a; } -.baikal-feature-strip a{ - position:relative; - display:flex;flex-direction:column; - align-items:center;text-align:center; - justify-content:center; - padding:12px 28px; + +.baikal-feature-strip a { + position: relative; + display: flex; + flex-direction: column; + align-items: center; + text-align: center; + justify-content: center; + padding: 12px 28px; } -.baikal-feature-strip a:not(:last-child):after{ - content:""; - position:absolute;right:0;top:25%;bottom:15%; - width:1px;background:rgba(201,149,82,.35); + +.baikal-feature-strip a:not(:last-child):after { + content: ""; + position: absolute; + right: 0; + top: 25%; + bottom: 15%; + width: 1px; + background: rgba(201, 149, 82, .35); } -.baikal-feature-strip b{ - color:#0a3153; - font:700 12px/1 Arial,sans-serif; - letter-spacing:.04em; + +.baikal-feature-strip b { + color: #0a3153; + font: 700 12px/1 Arial, sans-serif; + letter-spacing: .04em; } -.baikal-feature-strip span{ - margin-top:8px; - color:#37546d; - font:400 11px/1.45 Arial,sans-serif; + +.baikal-feature-strip span { + margin-top: 8px; + color: #37546d; + font: 400 11px/1.45 Arial, sans-serif; } -.baikal-feature-strip a:before{ - content:"◇"; - color:#c99552; - font-size:23px; - margin-bottom:7px; + +.baikal-feature-strip a:before { + content: "◇"; + color: #c99552; + font-size: 23px; + margin-bottom: 7px; } /* 30 естественных пузырьков по всему сайту */ -.site-bubbles{ - position:fixed; - inset:0; - z-index:18; - overflow:hidden; - pointer-events:none; +.site-bubbles { + position: fixed; + inset: 0; + z-index: 18; + overflow: hidden; + pointer-events: none; } -.site-bubbles i{ - position:absolute; - left:var(--x); - bottom:-24px; - width:var(--s);height:var(--s); - border-radius:50%; - border:1px solid rgba(220,241,250,.46); - background: - radial-gradient(circle at 29% 24%,rgba(255,255,255,.72) 0 10%,rgba(255,255,255,.16) 15%,transparent 40%), - radial-gradient(circle at 62% 68%,rgba(110,176,208,.16),transparent 62%); - box-shadow: - inset -1px -1px 3px rgba(20,83,116,.16), - 0 0 8px rgba(88,157,191,.08); - filter:blur(var(--blur)); - opacity:0; - animation:bubbleRise var(--dur) linear infinite var(--delay); - will-change:transform,opacity; + +.site-bubbles i { + position: absolute; + left: var(--x); + bottom: -24px; + width: var(--s); + height: var(--s); + border-radius: 50%; + border: 1px solid rgba(220, 241, 250, .46); + background: radial-gradient(circle at 29% 24%, rgba(255, 255, 255, .72) 0 10%, rgba(255, 255, 255, .16) 15%, transparent 40%), + radial-gradient(circle at 62% 68%, rgba(110, 176, 208, .16), transparent 62%); + box-shadow: inset -1px -1px 3px rgba(20, 83, 116, .16), + 0 0 8px rgba(88, 157, 191, .08); + filter: blur(var(--blur)); + opacity: 0; + animation: bubbleRise var(--dur) linear infinite var(--delay); + will-change: transform, opacity; } -@keyframes bubbleRise{ - 0%{transform:translate3d(0,0,0) scale(.72);opacity:0} - 8%{opacity:var(--op)} - 38%{transform:translate3d(calc(var(--drift)*.35),-42vh,0) scale(.92);opacity:var(--op)} - 72%{transform:translate3d(calc(var(--drift)*-.2),-82vh,0) scale(1.04);opacity:calc(var(--op)*.8)} - 100%{transform:translate3d(var(--drift),-116vh,0) scale(var(--grow));opacity:0} + +@keyframes bubbleRise { + 0% { + transform: translate3d(0, 0, 0) scale(.72); + opacity: 0 + } + 8% { + opacity: var(--op) + } + 38% { + transform: translate3d(calc(var(--drift) * .35), -42vh, 0) scale(.92); + opacity: var(--op) + } + 72% { + transform: translate3d(calc(var(--drift) * -.2), -82vh, 0) scale(1.04); + opacity: calc(var(--op) * .8) + } + 100% { + transform: translate3d(var(--drift), -116vh, 0) scale(var(--grow)); + opacity: 0 + } } /* Боковой исторический декор не должен залезать в новую шапку */ -.historic-side-frame{top:895px!important} +.historic-side-frame { + top: 895px !important +} /* Адаптация */ -@media(max-width:1180px){ - .baikal-nav{gap:16px} - .baikal-nav a{font-size:10px} - .hero-copy{margin-left:260px;width:55vw} - .carved-left{width:250px;left:-30px} -} -@media(max-width:900px){ - .baikal-header{min-height:700px} - .baikal-nav{display:none} - .baikal-nav-wrap{justify-content:space-between;height:74px} - .hero-copy{margin-left:80px;width:72vw;padding-top:110px} - .carved-left{width:190px;left:-95px;opacity:.72} - .baikal-landscape{width:72%;opacity:.55} - .fish-lane{left:20%;right:3%;top:210px} - .deep-label{display:none} - .baikal-feature-strip{grid-template-columns:1fr 1fr;padding:18px 25px} - .baikal-feature-strip a:nth-child(5){grid-column:1 / -1} -} -@media(max-width:620px){ - .baikal-header{min-height:670px} - .baikal-brand small,.nav-save span{display:none} - .hero-copy{margin-left:28px;width:84vw;padding-top:108px} - .hero-copy h1{font-size:58px} - .hero-copy h2{font-size:22px} - .hero-copy p{font-size:12px} - .carved-left{width:140px;left:-95px;opacity:.55} - .carved-corner{opacity:.45} - .fish-lane{top:185px;left:22%} - .fish-swimmer,.baikal-fish{width:128px;height:56px} - .baikal-landscape{right:-18%;width:105%;bottom:125px} - .baikal-feature-strip{grid-template-columns:1fr} - .baikal-feature-strip a:nth-child(5){grid-column:auto} - .baikal-feature-strip a:after{display:none} +@media (max-width: 1180px) { + .baikal-nav { + gap: 16px + } + + .baikal-nav a { + font-size: 10px + } + + .hero-copy { + margin-left: 260px; + width: 55vw + } + + .carved-left { + width: 250px; + left: -30px + } } -@media(prefers-reduced-motion:reduce){ - .fish-swimmer,.fish-trail i,.site-bubbles i{ - animation:none!important; - } - .fish-swimmer{transform:translate3d(26vw,10px,0) scaleX(1)!important;opacity:.72} - .site-bubbles i{opacity:.12} +@media (max-width: 900px) { + .baikal-header { + min-height: 700px + } + + .baikal-nav { + display: none + } + + .baikal-nav-wrap { + justify-content: space-between; + height: 74px + } + + .hero-copy { + margin-left: 80px; + width: 72vw; + padding-top: 110px + } + + .carved-left { + width: 190px; + left: -95px; + opacity: .72 + } + + .baikal-landscape { + width: 72%; + opacity: .55 + } + + .fish-lane { + left: 20%; + right: 3%; + top: 210px + } + + .deep-label { + display: none + } + + .baikal-feature-strip { + grid-template-columns:1fr 1fr; + padding: 18px 25px + } + + .baikal-feature-strip a:nth-child(5) { + grid-column: 1 / -1 + } } +@media (max-width: 620px) { + .baikal-header { + min-height: 670px + } + + .baikal-brand small, .nav-save span { + display: none + } + + .hero-copy { + margin-left: 28px; + width: 84vw; + padding-top: 108px + } + + .hero-copy h1 { + font-size: 58px + } + + .hero-copy h2 { + font-size: 22px + } + + .hero-copy p { + font-size: 12px + } + + .carved-left { + width: 140px; + left: -95px; + opacity: .55 + } + + .carved-corner { + opacity: .45 + } + + .fish-lane { + top: 185px; + left: 22% + } + + .fish-swimmer, .baikal-fish { + width: 128px; + height: 56px + } + + .baikal-landscape { + right: -18%; + width: 105%; + bottom: 125px + } + + .baikal-feature-strip { + grid-template-columns:1fr + } + + .baikal-feature-strip a:nth-child(5) { + grid-column: auto + } + + .baikal-feature-strip a:after { + display: none + } +} + +@media (prefers-reduced-motion: reduce) { + .fish-swimmer, .fish-trail i, .site-bubbles i { + animation: none !important; + } + + .fish-swimmer { + transform: translate3d(26vw, 10px, 0) scaleX(1) !important; + opacity: .72 + } + + .site-bubbles i { + opacity: .12 + } +} /* ===== V20: ДВЕ РЫБЫ + "ПОГРУЗИТЬСЯ" + ПЕРЕНОС DEEP LABEL ===== */ /* Одна кнопка вместо двух */ -.hero-actions{ - margin-top:28px!important; +.hero-actions { + margin-top: 28px !important; } -.hero-secondary{ - display:none!important; + +.hero-secondary { + display: none !important; } -.hero-primary{ - min-width:190px; - justify-content:space-between!important; - padding:0 24px!important; + +.hero-primary { + min-width: 190px; + justify-content: space-between !important; + padding: 0 24px !important; } /* "Глубже, чем кажется" — крупнее и в свободной зоне */ -.deep-label{ - right:5.5%!important; - top:112px!important; - gap:16px!important; - max-width:210px; - color:#d7a65f!important; - font-size:16px!important; - line-height:1.25!important; - font-weight:600!important; - letter-spacing:.10em!important; - text-align:left; +.deep-label { + right: 5.5% !important; + top: 112px !important; + gap: 16px !important; + max-width: 210px; + color: #d7a65f !important; + font-size: 16px !important; + line-height: 1.25 !important; + font-weight: 600 !important; + letter-spacing: .10em !important; + text-align: left; } -.deep-label span{ - width:44px!important; - margin-top:10px!important; - flex:0 0 44px; + +.deep-label span { + width: 44px !important; + margin-top: 10px !important; + flex: 0 0 44px; } /* Две разные дорожки рыб */ -.fish-lane{ - position:absolute; - z-index:11; - pointer-events:none; - height:110px; -} -.fish-lane-one{ - left:34%; - right:6%; - top:228px; -} -.fish-lane-two{ - left:46%; - right:10%; - top:346px; +.fish-lane { + position: absolute; + z-index: 11; + pointer-events: none; + height: 110px; } -.fish-one{ - animation:fishRoundTripOne 30s linear infinite!important; +.fish-lane-one { + left: 34%; + right: 6%; + top: 228px; } -.fish-two{ - width:142px!important; - height:62px!important; - animation:fishRoundTripTwo 36s linear infinite 7s!important; - opacity:.82; + +.fish-lane-two { + left: 46%; + right: 10%; + top: 346px; } -.fish-two .baikal-fish{ - width:142px!important; - height:62px!important; + +.fish-one { + animation: fishRoundTripOne 30s linear infinite !important; +} + +.fish-two { + width: 142px !important; + height: 62px !important; + animation: fishRoundTripTwo 36s linear infinite 7s !important; + opacity: .82; +} + +.fish-two .baikal-fish { + width: 142px !important; + height: 62px !important; } /* Рыба 1: головой вперед в обе стороны */ -@keyframes fishRoundTripOne{ - 0%{ - transform:translate3d(-10vw,2px,0) scaleX(1) rotate(-1deg); - opacity:0; - } - 5%{opacity:.88} - 44%{ - transform:translate3d(44vw,14px,0) scaleX(1) rotate(1deg); - opacity:.88; - } - 48%{ - transform:translate3d(49vw,18px,0) scaleX(1) rotate(0deg); - opacity:0; - } - 50%{ - transform:translate3d(49vw,18px,0) scaleX(-1) rotate(0deg); - opacity:0; - } - 55%{opacity:.88} - 94%{ - transform:translate3d(-10vw,-4px,0) scaleX(-1) rotate(-1deg); - opacity:.88; - } - 100%{ - transform:translate3d(-10vw,-4px,0) scaleX(-1) rotate(0deg); - opacity:0; - } +@keyframes fishRoundTripOne { + 0% { + transform: translate3d(-10vw, 2px, 0) scaleX(1) rotate(-1deg); + opacity: 0; + } + 5% { + opacity: .88 + } + 44% { + transform: translate3d(44vw, 14px, 0) scaleX(1) rotate(1deg); + opacity: .88; + } + 48% { + transform: translate3d(49vw, 18px, 0) scaleX(1) rotate(0deg); + opacity: 0; + } + 50% { + transform: translate3d(49vw, 18px, 0) scaleX(-1) rotate(0deg); + opacity: 0; + } + 55% { + opacity: .88 + } + 94% { + transform: translate3d(-10vw, -4px, 0) scaleX(-1) rotate(-1deg); + opacity: .88; + } + 100% { + transform: translate3d(-10vw, -4px, 0) scaleX(-1) rotate(0deg); + opacity: 0; + } } /* Рыба 2: другая скорость и траектория */ -@keyframes fishRoundTripTwo{ - 0%{ - transform:translate3d(37vw,0,0) scaleX(-1) rotate(1deg); - opacity:0; - } - 7%{opacity:.72} - 45%{ - transform:translate3d(-4vw,12px,0) scaleX(-1) rotate(-1deg); - opacity:.72; - } - 49%{ - transform:translate3d(-8vw,14px,0) scaleX(-1) rotate(0deg); - opacity:0; - } - 50%{ - transform:translate3d(-8vw,14px,0) scaleX(1) rotate(0deg); - opacity:0; - } - 57%{opacity:.72} - 95%{ - transform:translate3d(37vw,-3px,0) scaleX(1) rotate(1deg); - opacity:.72; - } - 100%{ - transform:translate3d(37vw,-3px,0) scaleX(1) rotate(0deg); - opacity:0; - } +@keyframes fishRoundTripTwo { + 0% { + transform: translate3d(37vw, 0, 0) scaleX(-1) rotate(1deg); + opacity: 0; + } + 7% { + opacity: .72 + } + 45% { + transform: translate3d(-4vw, 12px, 0) scaleX(-1) rotate(-1deg); + opacity: .72; + } + 49% { + transform: translate3d(-8vw, 14px, 0) scaleX(-1) rotate(0deg); + opacity: 0; + } + 50% { + transform: translate3d(-8vw, 14px, 0) scaleX(1) rotate(0deg); + opacity: 0; + } + 57% { + opacity: .72 + } + 95% { + transform: translate3d(37vw, -3px, 0) scaleX(1) rotate(1deg); + opacity: .72; + } + 100% { + transform: translate3d(37vw, -3px, 0) scaleX(1) rotate(0deg); + opacity: 0; + } } /* У второй рыбки собственный чуть более редкий шлейф */ .fish-two .fish-trail i:nth-child(2), -.fish-two .fish-trail i:nth-child(5){ - opacity:.55; +.fish-two .fish-trail i:nth-child(5) { + opacity: .55; } -@media(max-width:900px){ - .deep-label{ - right:4%!important; - top:100px!important; - font-size:13px!important; - } - .fish-lane-one{left:28%;top:225px} - .fish-lane-two{left:38%;top:330px} -} -@media(max-width:620px){ - .deep-label{ - display:none!important; - } - .fish-lane-one{ - left:28%!important; - top:205px!important; - } - .fish-lane-two{ - left:42%!important; - top:305px!important; - } - .fish-two,.fish-two .baikal-fish{ - width:108px!important; - height:48px!important; - } +@media (max-width: 900px) { + .deep-label { + right: 4% !important; + top: 100px !important; + font-size: 13px !important; + } + + .fish-lane-one { + left: 28%; + top: 225px + } + + .fish-lane-two { + left: 38%; + top: 330px + } } -@media(prefers-reduced-motion:reduce){ - .fish-one,.fish-two{ - animation:none!important; - } - .fish-one{ - transform:translate3d(24vw,6px,0) scaleX(1)!important; - opacity:.65!important; - } - .fish-two{ - transform:translate3d(9vw,0,0) scaleX(-1)!important; - opacity:.48!important; - } +@media (max-width: 620px) { + .deep-label { + display: none !important; + } + + .fish-lane-one { + left: 28% !important; + top: 205px !important; + } + + .fish-lane-two { + left: 42% !important; + top: 305px !important; + } + + .fish-two, .fish-two .baikal-fish { + width: 108px !important; + height: 48px !important; + } } +@media (prefers-reduced-motion: reduce) { + .fish-one, .fish-two { + animation: none !important; + } + + .fish-one { + transform: translate3d(24vw, 6px, 0) scaleX(1) !important; + opacity: .65 !important; + } + + .fish-two { + transform: translate3d(9vw, 0, 0) scaleX(-1) !important; + opacity: .48 !important; + } +} /* ===== V21: OFFSET-PATH — РЫБА + БАЙКАЛЬСКАЯ НЕРПА + ГЛУБИНЫ ===== */ -.baikal-carved-hero{ - /* Траектории вынесены в отдельные параметры: их можно менять независимо. */ - --fishPath: path("M -170 485 C 80 470, 180 415, 335 405 C 500 395, 585 455, 735 435 C 905 412, 1000 340, 1160 355 C 1325 370, 1430 440, 1770 410"); - --sealPath: path("M 1760 525 C 1510 520, 1435 470, 1350 430 C 1240 375, 1115 380, 1040 425 C 980 462, 1000 505, 1090 518 C 1210 535, 1390 500, 1540 455 C 1650 422, 1740 445, 1810 500"); +.baikal-carved-hero { + /* Траектории вынесены в отдельные параметры: их можно менять независимо. */ + --fishPath: path("M -170 485 C 80 470, 180 415, 335 405 C 500 395, 585 455, 735 435 C 905 412, 1000 340, 1160 355 C 1325 370, 1430 440, 1770 410"); + --sealPath: path("M 1760 525 C 1510 520, 1435 470, 1350 430 C 1240 375, 1115 380, 1040 425 C 980 462, 1000 505, 1090 518 C 1210 535, 1390 500, 1540 455 C 1650 422, 1740 445, 1810 500"); } /* Старые V20-дорожки полностью выключаем, если браузер сохранил их правила. */ -.fish-lane-one,.fish-lane-two{display:none!important} +.fish-lane-one, .fish-lane-two { + display: none !important +} -.underwater-scene{ - position:absolute; - inset:0; - z-index:10; - overflow:hidden; - pointer-events:none; +.underwater-scene { + position: absolute; + inset: 0; + z-index: 10; + overflow: hidden; + pointer-events: none; } /* Текст, наличник и CTA всегда выше живых объектов. */ -.carved-window,.hero-copy,.hero-actions,.deep-label{ - position:relative; - z-index:24!important; +.carved-window, .hero-copy, .hero-actions, .deep-label { + position: relative; + z-index: 24 !important; +} + +.baikal-waves { + z-index: 16 !important } -.baikal-waves{z-index:16!important} /* Общая механика motion-path */ -.motion-creature{ - position:absolute; - left:0; - top:0; - width:1px; - height:1px; - offset-distance:0%; - offset-rotate:auto 0deg; - will-change:offset-distance,opacity; +.motion-creature { + position: absolute; + left: 0; + top: 0; + width: 1px; + height: 1px; + offset-distance: 0%; + offset-rotate: auto 0deg; + will-change: offset-distance, opacity; } /* Рыба: средний план, один проход ~22 сек + пауза внутри цикла. */ -.fish-motion{ - z-index:12; - offset-path:var(--fishPath); - -webkit-offset-path:var(--fishPath); - animation:fishPathTravel 26s linear infinite; +.fish-motion { + z-index: 12; + offset-path: var(--fishPath); + -webkit-offset-path: var(--fishPath); + animation: fishPathTravel 26s linear infinite; } -.fish-body{ - position:absolute; - left:-82px; - top:-34px; - width:164px; - height:68px; - color:#d3a05a; - filter:drop-shadow(0 5px 8px rgba(2,28,50,.16)); - animation:fishBodyFloat 3.8s ease-in-out infinite; - transform-origin:55% 50%; -} -.motion-fish-svg{width:100%;height:100%;overflow:visible} -.motion-fish-svg g{stroke-width:2.15} -.fish-outline{stroke:#e0b36d;stroke-width:2.5} -.fish-pattern{opacity:.68} -.fish-tail{ - transform-box:fill-box; - transform-origin:right center; - animation:fishTailWag .95s ease-in-out infinite; -} -.fish-fin{ - transform-box:fill-box; - transform-origin:center bottom; - animation:fishFinMove 1.8s ease-in-out infinite; -} -.fish-fin-bottom{animation-delay:-.7s} -@keyframes fishPathTravel{ - 0%{offset-distance:0%;opacity:0} - 4%{opacity:.9} - 84%{offset-distance:100%;opacity:.9} - 89%{offset-distance:100%;opacity:0} - 100%{offset-distance:100%;opacity:0} +.fish-body { + position: absolute; + left: -82px; + top: -34px; + width: 164px; + height: 68px; + color: #d3a05a; + filter: drop-shadow(0 5px 8px rgba(2, 28, 50, .16)); + animation: fishBodyFloat 3.8s ease-in-out infinite; + transform-origin: 55% 50%; } -@keyframes fishBodyFloat{ - 0%,100%{transform:rotate(-1.2deg) translateY(0)} - 50%{transform:rotate(1.3deg) translateY(-3px)} + +.motion-fish-svg { + width: 100%; + height: 100%; + overflow: visible } -@keyframes fishTailWag{ - 0%,100%{transform:rotate(-7deg) scaleY(.94)} - 50%{transform:rotate(8deg) scaleY(1.05)} + +.motion-fish-svg g { + stroke-width: 2.15 } -@keyframes fishFinMove{ - 0%,100%{transform:rotate(-4deg)} - 50%{transform:rotate(6deg)} + +.fish-outline { + stroke: #e0b36d; + stroke-width: 2.5 +} + +.fish-pattern { + opacity: .68 +} + +.fish-tail { + transform-box: fill-box; + transform-origin: right center; + animation: fishTailWag .95s ease-in-out infinite; +} + +.fish-fin { + transform-box: fill-box; + transform-origin: center bottom; + animation: fishFinMove 1.8s ease-in-out infinite; +} + +.fish-fin-bottom { + animation-delay: -.7s +} + +@keyframes fishPathTravel { + 0% { + offset-distance: 0%; + opacity: 0 + } + 4% { + opacity: .9 + } + 84% { + offset-distance: 100%; + opacity: .9 + } + 89% { + offset-distance: 100%; + opacity: 0 + } + 100% { + offset-distance: 100%; + opacity: 0 + } +} + +@keyframes fishBodyFloat { + 0%, 100% { + transform: rotate(-1.2deg) translateY(0) + } + 50% { + transform: rotate(1.3deg) translateY(-3px) + } +} + +@keyframes fishTailWag { + 0%, 100% { + transform: rotate(-7deg) scaleY(.94) + } + 50% { + transform: rotate(8deg) scaleY(1.05) + } +} + +@keyframes fishFinMove { + 0%, 100% { + transform: rotate(-4deg) + } + 50% { + transform: rotate(6deg) + } } /* Нерпа: более глубокий слой, медленнее, стартует с задержкой. */ -.seal-motion{ - z-index:9; - offset-path:var(--sealPath); - -webkit-offset-path:var(--sealPath); - animation:sealPathTravel 34s cubic-bezier(.45,.02,.55,.98) infinite; - animation-delay:-7s; -} -.seal-body{ - position:absolute; - left:-96px; - top:-47px; - width:192px; - height:94px; - color:#c99a58; - opacity:.72; - filter:drop-shadow(0 7px 12px rgba(2,24,45,.12)); - animation:sealBodyFloat 5.2s ease-in-out infinite; - transform-origin:55% 55%; -} -.motion-seal-svg{width:100%;height:100%;overflow:visible} -.motion-seal-svg g{stroke-width:2} -.seal-outline{stroke:#d9ad68;stroke-width:2.45} -.seal-pattern{opacity:.42} -.seal-flipper{ - transform-box:fill-box; - transform-origin:center top; - animation:sealFlipper 2.6s ease-in-out infinite; -} -.seal-flipper-bottom{animation-delay:-1.15s} -.seal-tail{ - transform-box:fill-box; - transform-origin:right center; - animation:sealTail 3.2s ease-in-out infinite; +.seal-motion { + z-index: 9; + offset-path: var(--sealPath); + -webkit-offset-path: var(--sealPath); + animation: sealPathTravel 34s cubic-bezier(.45, .02, .55, .98) infinite; + animation-delay: -7s; } -@keyframes sealPathTravel{ - 0%{offset-distance:0%;opacity:0} - 7%{opacity:.7} - 43%{offset-distance:46%;opacity:.72} - /* мягкая "задержка" в центральной правой зоне */ - 51%{offset-distance:49%;opacity:.74} - 59%{offset-distance:52%;opacity:.72} - 88%{offset-distance:100%;opacity:.65} - 93%{offset-distance:100%;opacity:0} - 100%{offset-distance:100%;opacity:0} +.seal-body { + position: absolute; + left: -96px; + top: -47px; + width: 192px; + height: 94px; + color: #c99a58; + opacity: .72; + filter: drop-shadow(0 7px 12px rgba(2, 24, 45, .12)); + animation: sealBodyFloat 5.2s ease-in-out infinite; + transform-origin: 55% 55%; } -@keyframes sealBodyFloat{ - 0%,100%{transform:rotate(-2deg) translateY(0)} - 50%{transform:rotate(2deg) translateY(-5px)} + +.motion-seal-svg { + width: 100%; + height: 100%; + overflow: visible } -@keyframes sealFlipper{ - 0%,100%{transform:rotate(-5deg)} - 50%{transform:rotate(8deg)} + +.motion-seal-svg g { + stroke-width: 2 } -@keyframes sealTail{ - 0%,100%{transform:rotate(-2deg)} - 50%{transform:rotate(4deg)} + +.seal-outline { + stroke: #d9ad68; + stroke-width: 2.45 +} + +.seal-pattern { + opacity: .42 +} + +.seal-flipper { + transform-box: fill-box; + transform-origin: center top; + animation: sealFlipper 2.6s ease-in-out infinite; +} + +.seal-flipper-bottom { + animation-delay: -1.15s +} + +.seal-tail { + transform-box: fill-box; + transform-origin: right center; + animation: sealTail 3.2s ease-in-out infinite; +} + +@keyframes sealPathTravel { + 0% { + offset-distance: 0%; + opacity: 0 + } + 7% { + opacity: .7 + } + 43% { + offset-distance: 46%; + opacity: .72 + } + /* мягкая "задержка" в центральной правой зоне */ + 51% { + offset-distance: 49%; + opacity: .74 + } + 59% { + offset-distance: 52%; + opacity: .72 + } + 88% { + offset-distance: 100%; + opacity: .65 + } + 93% { + offset-distance: 100%; + opacity: 0 + } + 100% { + offset-distance: 100%; + opacity: 0 + } +} + +@keyframes sealBodyFloat { + 0%, 100% { + transform: rotate(-2deg) translateY(0) + } + 50% { + transform: rotate(2deg) translateY(-5px) + } +} + +@keyframes sealFlipper { + 0%, 100% { + transform: rotate(-5deg) + } + 50% { + transform: rotate(8deg) + } +} + +@keyframes sealTail { + 0%, 100% { + transform: rotate(-2deg) + } + 50% { + transform: rotate(4deg) + } } /* Пузырьки непосредственно у хвоста рыбы/нерпы */ -.tail-bubbles{ - position:absolute; - left:-12px; - top:50%; - width:20px; - height:20px; - transform:translateY(-50%); - z-index:-1; +.tail-bubbles { + position: absolute; + left: -12px; + top: 50%; + width: 20px; + height: 20px; + transform: translateY(-50%); + z-index: -1; } -.tail-bubbles i{ - position:absolute; - display:block; - border:1px solid rgba(244,230,214,.62); - border-radius:50%; - opacity:0; - animation:tailBubbleRise 3.3s ease-out infinite; + +.tail-bubbles i { + position: absolute; + display: block; + border: 1px solid rgba(244, 230, 214, .62); + border-radius: 50%; + opacity: 0; + animation: tailBubbleRise 3.3s ease-out infinite; } -.fish-tail-bubbles i:nth-child(1){width:5px;height:5px;left:2px;animation-delay:.1s} -.fish-tail-bubbles i:nth-child(2){width:8px;height:8px;left:-4px;animation-delay:1.05s} -.fish-tail-bubbles i:nth-child(3){width:4px;height:4px;left:6px;animation-delay:1.8s} -.fish-tail-bubbles i:nth-child(4){width:6px;height:6px;left:0;animation-delay:2.55s} -.seal-bubbles{left:-8px;top:54%} -.seal-bubbles i:nth-child(1){width:5px;height:5px;left:1px;animation-delay:.2s} -.seal-bubbles i:nth-child(2){width:9px;height:9px;left:-6px;animation-delay:1.4s} -.seal-bubbles i:nth-child(3){width:4px;height:4px;left:8px;animation-delay:2.7s} -.seal-bubbles i:nth-child(4){width:7px;height:7px;left:1px;animation-delay:3.8s} -.seal-bubbles i:nth-child(5){width:4px;height:4px;left:-3px;animation-delay:4.8s} -.seal-bubbles i{animation-duration:5.4s} +.fish-tail-bubbles i:nth-child(1) { + width: 5px; + height: 5px; + left: 2px; + animation-delay: .1s +} -@keyframes tailBubbleRise{ - 0%{transform:translate(0,0) scale(.7);opacity:0} - 15%{opacity:.72} - 70%{opacity:.38} - 100%{transform:translate(-12px,-62px) scale(1.25);opacity:0} +.fish-tail-bubbles i:nth-child(2) { + width: 8px; + height: 8px; + left: -4px; + animation-delay: 1.05s +} + +.fish-tail-bubbles i:nth-child(3) { + width: 4px; + height: 4px; + left: 6px; + animation-delay: 1.8s +} + +.fish-tail-bubbles i:nth-child(4) { + width: 6px; + height: 6px; + left: 0; + animation-delay: 2.55s +} + +.seal-bubbles { + left: -8px; + top: 54% +} + +.seal-bubbles i:nth-child(1) { + width: 5px; + height: 5px; + left: 1px; + animation-delay: .2s +} + +.seal-bubbles i:nth-child(2) { + width: 9px; + height: 9px; + left: -6px; + animation-delay: 1.4s +} + +.seal-bubbles i:nth-child(3) { + width: 4px; + height: 4px; + left: 8px; + animation-delay: 2.7s +} + +.seal-bubbles i:nth-child(4) { + width: 7px; + height: 7px; + left: 1px; + animation-delay: 3.8s +} + +.seal-bubbles i:nth-child(5) { + width: 4px; + height: 4px; + left: -3px; + animation-delay: 4.8s +} + +.seal-bubbles i { + animation-duration: 5.4s +} + +@keyframes tailBubbleRise { + 0% { + transform: translate(0, 0) scale(.7); + opacity: 0 + } + 15% { + opacity: .72 + } + 70% { + opacity: .38 + } + 100% { + transform: translate(-12px, -62px) scale(1.25); + opacity: 0 + } } /* Несколько глубин пузырьков: задние медленнее/мельче, передние крупнее. */ -.depth-bubbles{ - position:absolute; - inset:0; - overflow:hidden; +.depth-bubbles { + position: absolute; + inset: 0; + overflow: hidden; } -.depth-bubbles i{ - position:absolute; - bottom:-28px; - border-radius:50%; - border:1px solid rgba(238,224,203,.45); - opacity:0; - animation:bubbleParallax linear infinite; + +.depth-bubbles i { + position: absolute; + bottom: -28px; + border-radius: 50%; + border: 1px solid rgba(238, 224, 203, .45); + opacity: 0; + animation: bubbleParallax linear infinite; } -.depth-bubbles-back{z-index:6;filter:blur(.15px)} -.depth-bubbles-back i:nth-child(1){left:19%;width:5px;height:5px;animation-duration:18s;animation-delay:-3s} -.depth-bubbles-back i:nth-child(2){left:33%;width:7px;height:7px;animation-duration:22s;animation-delay:-11s} -.depth-bubbles-back i:nth-child(3){left:53%;width:4px;height:4px;animation-duration:19s;animation-delay:-7s} -.depth-bubbles-back i:nth-child(4){left:67%;width:6px;height:6px;animation-duration:24s;animation-delay:-16s} -.depth-bubbles-back i:nth-child(5){left:79%;width:4px;height:4px;animation-duration:20s;animation-delay:-4s} -.depth-bubbles-back i:nth-child(6){left:88%;width:8px;height:8px;animation-duration:25s;animation-delay:-14s} -.depth-bubbles-back i:nth-child(7){left:44%;width:5px;height:5px;animation-duration:21s;animation-delay:-18s} -.depth-bubbles-front{z-index:14} -.depth-bubbles-front i{border-color:rgba(255,244,226,.55);filter:blur(.05px)} -.depth-bubbles-front i:nth-child(1){left:38%;width:13px;height:13px;animation-duration:13s;animation-delay:-4s} -.depth-bubbles-front i:nth-child(2){left:59%;width:17px;height:17px;animation-duration:15s;animation-delay:-10s} -.depth-bubbles-front i:nth-child(3){left:72%;width:11px;height:11px;animation-duration:12s;animation-delay:-7s} -.depth-bubbles-front i:nth-child(4){left:86%;width:15px;height:15px;animation-duration:16s;animation-delay:-2s} -.depth-bubbles-front i:nth-child(5){left:49%;width:9px;height:9px;animation-duration:14s;animation-delay:-12s} +.depth-bubbles-back { + z-index: 6; + filter: blur(.15px) +} -@keyframes bubbleParallax{ - 0%{transform:translate3d(0,0,0) scale(.75);opacity:0} - 10%{opacity:.45} - 65%{opacity:.32} - 100%{transform:translate3d(18px,-590px,0) scale(1.18);opacity:0} +.depth-bubbles-back i:nth-child(1) { + left: 19%; + width: 5px; + height: 5px; + animation-duration: 18s; + animation-delay: -3s +} + +.depth-bubbles-back i:nth-child(2) { + left: 33%; + width: 7px; + height: 7px; + animation-duration: 22s; + animation-delay: -11s +} + +.depth-bubbles-back i:nth-child(3) { + left: 53%; + width: 4px; + height: 4px; + animation-duration: 19s; + animation-delay: -7s +} + +.depth-bubbles-back i:nth-child(4) { + left: 67%; + width: 6px; + height: 6px; + animation-duration: 24s; + animation-delay: -16s +} + +.depth-bubbles-back i:nth-child(5) { + left: 79%; + width: 4px; + height: 4px; + animation-duration: 20s; + animation-delay: -4s +} + +.depth-bubbles-back i:nth-child(6) { + left: 88%; + width: 8px; + height: 8px; + animation-duration: 25s; + animation-delay: -14s +} + +.depth-bubbles-back i:nth-child(7) { + left: 44%; + width: 5px; + height: 5px; + animation-duration: 21s; + animation-delay: -18s +} + +.depth-bubbles-front { + z-index: 14 +} + +.depth-bubbles-front i { + border-color: rgba(255, 244, 226, .55); + filter: blur(.05px) +} + +.depth-bubbles-front i:nth-child(1) { + left: 38%; + width: 13px; + height: 13px; + animation-duration: 13s; + animation-delay: -4s +} + +.depth-bubbles-front i:nth-child(2) { + left: 59%; + width: 17px; + height: 17px; + animation-duration: 15s; + animation-delay: -10s +} + +.depth-bubbles-front i:nth-child(3) { + left: 72%; + width: 11px; + height: 11px; + animation-duration: 12s; + animation-delay: -7s +} + +.depth-bubbles-front i:nth-child(4) { + left: 86%; + width: 15px; + height: 15px; + animation-duration: 16s; + animation-delay: -2s +} + +.depth-bubbles-front i:nth-child(5) { + left: 49%; + width: 9px; + height: 9px; + animation-duration: 14s; + animation-delay: -12s +} + +@keyframes bubbleParallax { + 0% { + transform: translate3d(0, 0, 0) scale(.75); + opacity: 0 + } + 10% { + opacity: .45 + } + 65% { + opacity: .32 + } + 100% { + transform: translate3d(18px, -590px, 0) scale(1.18); + opacity: 0 + } } /* Важные элементы композиции остаются чистыми и читаемыми. */ -.deep-label{ - z-index:25!important; - right:4.5%!important; - top:102px!important; - max-width:230px!important; - font-size:18px!important; - line-height:1.22!important; +.deep-label { + z-index: 25 !important; + right: 4.5% !important; + top: 102px !important; + max-width: 230px !important; + font-size: 18px !important; + line-height: 1.22 !important; } -.hero-actions{ - z-index:25!important; + +.hero-actions { + z-index: 25 !important; } /* Современный fallback: если motion path не поддерживается, объекты остаются декоративными. */ -@supports not (offset-path:path("M0 0 L1 1")){ - .fish-motion{left:61%;top:405px;animation:none} - .seal-motion{left:79%;top:475px;animation:none} - .fish-body{opacity:.72} - .seal-body{opacity:.5} +@supports not (offset-path:path("M0 0 L1 1")) { + .fish-motion { + left: 61%; + top: 405px; + animation: none + } + + .seal-motion { + left: 79%; + top: 475px; + animation: none + } + + .fish-body { + opacity: .72 + } + + .seal-body { + opacity: .5 + } } /* Адаптивно сохраняем свободной текстовую зону. */ -@media(max-width:1000px){ - .baikal-carved-hero{ - --fishPath:path("M -150 455 C 80 450, 190 405, 340 410 C 500 420, 630 455, 820 430 C 980 410, 1120 390, 1260 420"); - --sealPath:path("M 1280 505 C 1110 500, 1010 460, 930 430 C 850 400, 790 420, 780 458 C 775 486, 850 505, 980 480 C 1090 460, 1190 465, 1300 500"); - } - .fish-body{width:145px;height:61px} - .seal-body{width:165px;height:82px} -} -@media(max-width:700px){ - .seal-motion{display:none} - .depth-bubbles-front i:nth-child(n+4){display:none} - .baikal-carved-hero{ - --fishPath:path("M -120 410 C 80 405, 170 375, 285 382 C 420 390, 520 430, 760 405"); - } - .fish-body{width:118px;height:50px} -} -@media(prefers-reduced-motion:reduce){ - .fish-motion,.seal-motion,.fish-body,.seal-body,.fish-tail,.fish-fin,.seal-flipper,.seal-tail, - .tail-bubbles i,.depth-bubbles i{ - animation:none!important; - } - .fish-motion{offset-distance:67%;opacity:.55} - .seal-motion{offset-distance:42%;opacity:.4} +@media (max-width: 1000px) { + .baikal-carved-hero { + --fishPath: path("M -150 455 C 80 450, 190 405, 340 410 C 500 420, 630 455, 820 430 C 980 410, 1120 390, 1260 420"); + --sealPath: path("M 1280 505 C 1110 500, 1010 460, 930 430 C 850 400, 790 420, 780 458 C 775 486, 850 505, 980 480 C 1090 460, 1190 465, 1300 500"); + } + + .fish-body { + width: 145px; + height: 61px + } + + .seal-body { + width: 165px; + height: 82px + } } +@media (max-width: 700px) { + .seal-motion { + display: none + } + + .depth-bubbles-front i:nth-child(n+4) { + display: none + } + + .baikal-carved-hero { + --fishPath: path("M -120 410 C 80 405, 170 375, 285 382 C 420 390, 520 430, 760 405"); + } + + .fish-body { + width: 118px; + height: 50px + } +} + +@media (prefers-reduced-motion: reduce) { + .fish-motion, .seal-motion, .fish-body, .seal-body, .fish-tail, .fish-fin, .seal-flipper, .seal-tail, + .tail-bubbles i, .depth-bubbles i { + animation: none !important; + } + + .fish-motion { + offset-distance: 67%; + opacity: .55 + } + + .seal-motion { + offset-distance: 42%; + opacity: .4 + } +} /* ===== V22: ШКОЛА РЫБ + НЕРПА ТОЛЬКО В НИЖНЕЙ ЗОНЕ БАЙКАЛА ===== */ -.baikal-carved-hero{ - --schoolPathA:path("M -180 505 C 120 490, 260 535, 430 520 C 625 503, 760 550, 965 532 C 1180 513, 1350 550, 1780 520"); - --schoolPathB:path("M -180 555 C 125 538, 270 580, 460 560 C 640 541, 825 586, 1030 564 C 1235 542, 1435 575, 1780 553"); - --schoolPathC:path("M -180 605 C 130 590, 310 624, 490 610 C 695 594, 840 632, 1070 610 C 1300 588, 1480 620, 1780 603"); - --sealSchoolPath:path("M 1780 590 C 1510 572, 1370 620, 1180 600 C 995 580, 870 615, 690 603 C 500 590, 320 620, -190 595"); +.baikal-carved-hero { + --schoolPathA: path("M -180 505 C 120 490, 260 535, 430 520 C 625 503, 760 550, 965 532 C 1180 513, 1350 550, 1780 520"); + --schoolPathB: path("M -180 555 C 125 538, 270 580, 460 560 C 640 541, 825 586, 1030 564 C 1235 542, 1435 575, 1780 553"); + --schoolPathC: path("M -180 605 C 130 590, 310 624, 490 610 C 695 594, 840 632, 1070 610 C 1300 588, 1480 620, 1780 603"); + --sealSchoolPath: path("M 1780 590 C 1510 572, 1370 620, 1180 600 C 995 580, 870 615, 690 603 C 500 590, 320 620, -190 595"); } /* Реальный контейнер анимации: животные появляются только из-за краев. */ -.lower-baikal-zone{ - position:absolute!important; - left:0!important; - right:0!important; - top:47%!important; - bottom:0!important; - z-index:12!important; - overflow:hidden!important; - pointer-events:none!important; +.lower-baikal-zone { + position: absolute !important; + left: 0 !important; + right: 0 !important; + top: 47% !important; + bottom: 0 !important; + z-index: 12 !important; + overflow: hidden !important; + pointer-events: none !important; } /* Никаких животных в верхней части. */ -.lower-baikal-zone .school-creature{ - position:absolute; - left:0; - top:0; - width:1px; - height:1px; - offset-distance:0%; - offset-rotate:auto 0deg; - will-change:offset-distance,opacity; +.lower-baikal-zone .school-creature { + position: absolute; + left: 0; + top: 0; + width: 1px; + height: 1px; + offset-distance: 0%; + offset-rotate: auto 0deg; + will-change: offset-distance, opacity; } /* Волны дают ощущение воды: часть дальнего плана проходит за ними. */ -.baikal-waves{z-index:13!important} -.depth-far{z-index:10} -.depth-mid{z-index:14} -.depth-near{z-index:15} -.seal-school{z-index:11} -.depth-bubbles-back{z-index:8} -.depth-bubbles-front{z-index:16} +.baikal-waves { + z-index: 13 !important +} + +.depth-far { + z-index: 10 +} + +.depth-mid { + z-index: 14 +} + +.depth-near { + z-index: 15 +} + +.seal-school { + z-index: 11 +} + +.depth-bubbles-back { + z-index: 8 +} + +.depth-bubbles-front { + z-index: 16 +} /* Базовая рыба */ -.school-fish-body{ - position:absolute; - left:-78px; - top:-32px; - width:156px; - height:64px; - color:#d0a05d; - transform-origin:52% 50%; - animation:schoolFishFloat 3.6s ease-in-out infinite, fishFacingA 28s steps(1,end) infinite; +.school-fish-body { + position: absolute; + left: -78px; + top: -32px; + width: 156px; + height: 64px; + color: #d0a05d; + transform-origin: 52% 50%; + animation: schoolFishFloat 3.6s ease-in-out infinite, fishFacingA 28s steps(1, end) infinite; } -.school-fish-svg{width:100%;height:100%;overflow:visible} -.school-fish-svg g{stroke-width:2} -.school-fish-svg .fish-outline{stroke:#d9ab67;stroke-width:2.35} -.school-fish-svg .fish-pattern{opacity:.52} -.school-fish-svg .fish-tail{ - transform-box:fill-box; - transform-origin:right center; - animation:schoolTailWag .9s ease-in-out infinite; + +.school-fish-svg { + width: 100%; + height: 100%; + overflow: visible } -.school-fish-svg .fish-fin{ - transform-box:fill-box; - transform-origin:center bottom; - animation:schoolFinMove 1.7s ease-in-out infinite; + +.school-fish-svg g { + stroke-width: 2 +} + +.school-fish-svg .fish-outline { + stroke: #d9ab67; + stroke-width: 2.35 +} + +.school-fish-svg .fish-pattern { + opacity: .52 +} + +.school-fish-svg .fish-tail { + transform-box: fill-box; + transform-origin: right center; + animation: schoolTailWag .9s ease-in-out infinite; +} + +.school-fish-svg .fish-fin { + transform-box: fill-box; + transform-origin: center bottom; + animation: schoolFinMove 1.7s ease-in-out infinite; +} + +.school-fish-svg .fish-fin-bottom { + animation-delay: -.6s } -.school-fish-svg .fish-fin-bottom{animation-delay:-.6s} /* Не одинаковые копии: разные формы, размеры, глубина и контраст */ -.fish-type-b .fish-outline{stroke-width:2.1} -.fish-type-c .fish-pattern{opacity:.65} - -.depth-far .school-fish-body{ - opacity:.42; - filter:blur(.15px); +.fish-type-b .fish-outline { + stroke-width: 2.1 } -.depth-mid .school-fish-body{opacity:.68} -.depth-near .school-fish-body{ - opacity:.9; - filter:drop-shadow(0 5px 9px rgba(2,27,48,.13)); + +.fish-type-c .fish-pattern { + opacity: .65 +} + +.depth-far .school-fish-body { + opacity: .42; + filter: blur(.15px); +} + +.depth-mid .school-fish-body { + opacity: .68 +} + +.depth-near .school-fish-body { + opacity: .9; + filter: drop-shadow(0 5px 9px rgba(2, 27, 48, .13)); } /* 7 рыб, три близкие волнообразные траектории. Разворот тела происходит только когда offset-distance уже 0% или 100% — то есть за краем. */ -.fish-1{ - offset-path:var(--schoolPathA); - animation:fishRun1 22s linear infinite -13s; +.fish-1 { + offset-path: var(--schoolPathA); + animation: fishRun1 22s linear infinite -13s; } -.fish-1 .school-fish-body{width:88px;height:38px;left:-44px;top:-19px;animation-duration:3.1s,22s} -.fish-2{ - offset-path:var(--schoolPathB); - animation:fishRun2 27s linear infinite -3s; +.fish-1 .school-fish-body { + width: 88px; + height: 38px; + left: -44px; + top: -19px; + animation-duration: 3.1s, 22s } -.fish-2 .school-fish-body{width:122px;height:51px;left:-61px;top:-25px;animation-duration:3.8s,27s} -.fish-3{ - offset-path:var(--schoolPathC); - animation:fishRun3 34s linear infinite -21s; +.fish-2 { + offset-path: var(--schoolPathB); + animation: fishRun2 27s linear infinite -3s; } -.fish-3 .school-fish-body{width:184px;height:76px;left:-92px;top:-38px;animation-duration:4.5s,34s} -.fish-4{ - offset-path:var(--schoolPathC); - animation:fishRun4 19s linear infinite -8s; +.fish-2 .school-fish-body { + width: 122px; + height: 51px; + left: -61px; + top: -25px; + animation-duration: 3.8s, 27s } -.fish-4 .school-fish-body{width:74px;height:32px;left:-37px;top:-16px;animation-duration:2.8s,19s} -.fish-5{ - offset-path:var(--schoolPathA); - animation:fishRun5 25s linear infinite -17s; +.fish-3 { + offset-path: var(--schoolPathC); + animation: fishRun3 34s linear infinite -21s; } -.fish-5 .school-fish-body{width:108px;height:46px;left:-54px;top:-23px;animation-duration:3.4s,25s} -.fish-6{ - offset-path:var(--schoolPathB); - animation:fishRun6 31s linear infinite -6s; +.fish-3 .school-fish-body { + width: 184px; + height: 76px; + left: -92px; + top: -38px; + animation-duration: 4.5s, 34s } -.fish-6 .school-fish-body{width:168px;height:70px;left:-84px;top:-35px;animation-duration:4.2s,31s} -.fish-7{ - offset-path:var(--schoolPathC); - animation:fishRun7 24s linear infinite -23s; +.fish-4 { + offset-path: var(--schoolPathC); + animation: fishRun4 19s linear infinite -8s; +} + +.fish-4 .school-fish-body { + width: 74px; + height: 32px; + left: -37px; + top: -16px; + animation-duration: 2.8s, 19s +} + +.fish-5 { + offset-path: var(--schoolPathA); + animation: fishRun5 25s linear infinite -17s; +} + +.fish-5 .school-fish-body { + width: 108px; + height: 46px; + left: -54px; + top: -23px; + animation-duration: 3.4s, 25s +} + +.fish-6 { + offset-path: var(--schoolPathB); + animation: fishRun6 31s linear infinite -6s; +} + +.fish-6 .school-fish-body { + width: 168px; + height: 70px; + left: -84px; + top: -35px; + animation-duration: 4.2s, 31s +} + +.fish-7 { + offset-path: var(--schoolPathC); + animation: fishRun7 24s linear infinite -23s; +} + +.fish-7 .school-fish-body { + width: 96px; + height: 41px; + left: -48px; + top: -20px; + animation-duration: 3.2s, 24s } -.fish-7 .school-fish-body{width:96px;height:41px;left:-48px;top:-20px;animation-duration:3.2s,24s} /* Общая логика движения туда-обратно: 0→46%: полностью слева → полностью справа; 46–50%: объект уже за правым краем, там меняется scaleX; 50→96%: справа → слева; 96–100%: за левым краем возвращается исходная ориентация. */ -@keyframes fishRun1{0%{offset-distance:0%;opacity:0}3%{opacity:.65}46%{offset-distance:100%;opacity:.65}48%,50%{offset-distance:100%;opacity:0}53%{opacity:.65}96%{offset-distance:0%;opacity:.65}98%,100%{offset-distance:0%;opacity:0}} -@keyframes fishRun2{0%{offset-distance:0%;opacity:0}3%{opacity:.72}46%{offset-distance:100%;opacity:.72}48%,50%{offset-distance:100%;opacity:0}53%{opacity:.72}96%{offset-distance:0%;opacity:.72}98%,100%{offset-distance:0%;opacity:0}} -@keyframes fishRun3{0%{offset-distance:0%;opacity:0}3%{opacity:.82}46%{offset-distance:100%;opacity:.82}48%,50%{offset-distance:100%;opacity:0}53%{opacity:.82}96%{offset-distance:0%;opacity:.82}98%,100%{offset-distance:0%;opacity:0}} -@keyframes fishRun4{0%{offset-distance:0%;opacity:0}3%{opacity:.48}46%{offset-distance:100%;opacity:.48}48%,50%{offset-distance:100%;opacity:0}53%{opacity:.48}96%{offset-distance:0%;opacity:.48}98%,100%{offset-distance:0%;opacity:0}} -@keyframes fishRun5{0%{offset-distance:0%;opacity:0}3%{opacity:.66}46%{offset-distance:100%;opacity:.66}48%,50%{offset-distance:100%;opacity:0}53%{opacity:.66}96%{offset-distance:0%;opacity:.66}98%,100%{offset-distance:0%;opacity:0}} -@keyframes fishRun6{0%{offset-distance:0%;opacity:0}3%{opacity:.88}46%{offset-distance:100%;opacity:.88}48%,50%{offset-distance:100%;opacity:0}53%{opacity:.88}96%{offset-distance:0%;opacity:.88}98%,100%{offset-distance:0%;opacity:0}} -@keyframes fishRun7{0%{offset-distance:0%;opacity:0}3%{opacity:.62}46%{offset-distance:100%;opacity:.62}48%,50%{offset-distance:100%;opacity:0}53%{opacity:.62}96%{offset-distance:0%;opacity:.62}98%,100%{offset-distance:0%;opacity:0}} +@keyframes fishRun1 { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .65 + } + 46% { + offset-distance: 100%; + opacity: .65 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .65 + } + 96% { + offset-distance: 0%; + opacity: .65 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} + +@keyframes fishRun2 { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .72 + } + 46% { + offset-distance: 100%; + opacity: .72 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .72 + } + 96% { + offset-distance: 0%; + opacity: .72 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} + +@keyframes fishRun3 { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .82 + } + 46% { + offset-distance: 100%; + opacity: .82 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .82 + } + 96% { + offset-distance: 0%; + opacity: .82 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} + +@keyframes fishRun4 { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .48 + } + 46% { + offset-distance: 100%; + opacity: .48 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .48 + } + 96% { + offset-distance: 0%; + opacity: .48 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} + +@keyframes fishRun5 { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .66 + } + 46% { + offset-distance: 100%; + opacity: .66 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .66 + } + 96% { + offset-distance: 0%; + opacity: .66 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} + +@keyframes fishRun6 { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .88 + } + 46% { + offset-distance: 100%; + opacity: .88 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .88 + } + 96% { + offset-distance: 0%; + opacity: .88 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} + +@keyframes fishRun7 { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .62 + } + 46% { + offset-distance: 100%; + opacity: .62 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .62 + } + 96% { + offset-distance: 0%; + opacity: .62 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} /* Зеркальный разворот после полного выхода за границу. На обратном ходе path tangent остается направлен вправо, поэтому зеркалим только внутренний SVG-контейнер. */ -@keyframes fishFacingA{ - 0%,47.9%{scale:1 1} - 48%,97.9%{scale:-1 1} - 98%,100%{scale:1 1} +@keyframes fishFacingA { + 0%, 47.9% { + scale: 1 1 + } + 48%, 97.9% { + scale: -1 1 + } + 98%, 100% { + scale: 1 1 + } } -@keyframes schoolFishFloat{ - 0%,100%{rotate:-1.2deg;translate:0 0} - 50%{rotate:1.3deg;translate:0 -3px} + +@keyframes schoolFishFloat { + 0%, 100% { + rotate: -1.2deg; + translate: 0 0 + } + 50% { + rotate: 1.3deg; + translate: 0 -3px + } } -@keyframes schoolTailWag{ - 0%,100%{transform:rotate(-7deg) scaleY(.94)} - 50%{transform:rotate(8deg) scaleY(1.05)} + +@keyframes schoolTailWag { + 0%, 100% { + transform: rotate(-7deg) scaleY(.94) + } + 50% { + transform: rotate(8deg) scaleY(1.05) + } } -@keyframes schoolFinMove{ - 0%,100%{transform:rotate(-4deg)} - 50%{transform:rotate(6deg)} + +@keyframes schoolFinMove { + 0%, 100% { + transform: rotate(-4deg) + } + 50% { + transform: rotate(6deg) + } } /* Нерпа — тот же нижний коридор, заметно медленнее. */ -.seal-school{ - offset-path:var(--sealSchoolPath); - animation:sealSchoolRun 72s linear infinite -29s; +.seal-school { + offset-path: var(--sealSchoolPath); + animation: sealSchoolRun 72s linear infinite -29s; } -.seal-school-body{ - position:absolute; - left:-102px; - top:-48px; - width:204px; - height:96px; - color:#c89655; - opacity:.72; - transform-origin:52% 54%; - animation:sealSchoolFloat 5.4s ease-in-out infinite, sealFacing 72s steps(1,end) infinite -29s; - filter:drop-shadow(0 7px 12px rgba(2,24,45,.12)); + +.seal-school-body { + position: absolute; + left: -102px; + top: -48px; + width: 204px; + height: 96px; + color: #c89655; + opacity: .72; + transform-origin: 52% 54%; + animation: sealSchoolFloat 5.4s ease-in-out infinite, sealFacing 72s steps(1, end) infinite -29s; + filter: drop-shadow(0 7px 12px rgba(2, 24, 45, .12)); } -.school-seal-svg{width:100%;height:100%;overflow:visible} -.school-seal-svg g{stroke-width:2} -.school-seal-svg .seal-outline{stroke:#d5a660;stroke-width:2.4} -.school-seal-svg .seal-pattern{opacity:.38} -.school-seal-svg .seal-flipper{ - transform-box:fill-box; - transform-origin:center top; - animation:sealSchoolFlipper 2.8s ease-in-out infinite; + +.school-seal-svg { + width: 100%; + height: 100%; + overflow: visible } -.school-seal-svg .seal-flipper-bottom{animation-delay:-1.2s} -.school-seal-svg .seal-tail{ - transform-box:fill-box; - transform-origin:right center; - animation:sealSchoolTail 3.4s ease-in-out infinite; + +.school-seal-svg g { + stroke-width: 2 } -@keyframes sealSchoolRun{ - 0%{offset-distance:0%;opacity:0} - 3%{opacity:.68} - 46%{offset-distance:100%;opacity:.68} - 48%,50%{offset-distance:100%;opacity:0} - 53%{opacity:.68} - 96%{offset-distance:0%;opacity:.68} - 98%,100%{offset-distance:0%;opacity:0} + +.school-seal-svg .seal-outline { + stroke: #d5a660; + stroke-width: 2.4 } -@keyframes sealFacing{ - 0%,47.9%{scale:1 1} - 48%,97.9%{scale:-1 1} - 98%,100%{scale:1 1} + +.school-seal-svg .seal-pattern { + opacity: .38 } -@keyframes sealSchoolFloat{ - 0%,100%{rotate:-1.5deg;translate:0 0} - 50%{rotate:1.5deg;translate:0 -4px} + +.school-seal-svg .seal-flipper { + transform-box: fill-box; + transform-origin: center top; + animation: sealSchoolFlipper 2.8s ease-in-out infinite; } -@keyframes sealSchoolFlipper{ - 0%,100%{transform:rotate(-5deg)} - 50%{transform:rotate(8deg)} + +.school-seal-svg .seal-flipper-bottom { + animation-delay: -1.2s } -@keyframes sealSchoolTail{ - 0%,100%{transform:rotate(-2deg)} - 50%{transform:rotate(4deg)} + +.school-seal-svg .seal-tail { + transform-box: fill-box; + transform-origin: right center; + animation: sealSchoolTail 3.4s ease-in-out infinite; +} + +@keyframes sealSchoolRun { + 0% { + offset-distance: 0%; + opacity: 0 + } + 3% { + opacity: .68 + } + 46% { + offset-distance: 100%; + opacity: .68 + } + 48%, 50% { + offset-distance: 100%; + opacity: 0 + } + 53% { + opacity: .68 + } + 96% { + offset-distance: 0%; + opacity: .68 + } + 98%, 100% { + offset-distance: 0%; + opacity: 0 + } +} + +@keyframes sealFacing { + 0%, 47.9% { + scale: 1 1 + } + 48%, 97.9% { + scale: -1 1 + } + 98%, 100% { + scale: 1 1 + } +} + +@keyframes sealSchoolFloat { + 0%, 100% { + rotate: -1.5deg; + translate: 0 0 + } + 50% { + rotate: 1.5deg; + translate: 0 -4px + } +} + +@keyframes sealSchoolFlipper { + 0%, 100% { + transform: rotate(-5deg) + } + 50% { + transform: rotate(8deg) + } +} + +@keyframes sealSchoolTail { + 0%, 100% { + transform: rotate(-2deg) + } + 50% { + transform: rotate(4deg) + } } /* Пузырьки у хвостов и нерпы */ -.lower-baikal-zone .tail-bubbles{ - position:absolute; - left:-8px; - top:50%; - width:18px; - height:18px; - transform:translateY(-50%); +.lower-baikal-zone .tail-bubbles { + position: absolute; + left: -8px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); } -.lower-baikal-zone .tail-bubbles i{ - position:absolute; - border-radius:50%; - border:1px solid rgba(238,230,214,.56); - background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.46),transparent 38%); - opacity:0; - animation:schoolTailBubble 3.1s ease-out infinite; + +.lower-baikal-zone .tail-bubbles i { + position: absolute; + border-radius: 50%; + border: 1px solid rgba(238, 230, 214, .56); + background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .46), transparent 38%); + opacity: 0; + animation: schoolTailBubble 3.1s ease-out infinite; } -.lower-baikal-zone .tail-bubbles i:nth-child(1){width:4px;height:4px;left:3px;animation-delay:.1s} -.lower-baikal-zone .tail-bubbles i:nth-child(2){width:7px;height:7px;left:-3px;animation-delay:.9s} -.lower-baikal-zone .tail-bubbles i:nth-child(3){width:5px;height:5px;left:5px;animation-delay:1.7s} -.lower-baikal-zone .tail-bubbles i:nth-child(4){width:3px;height:3px;left:0;animation-delay:2.4s} -.lower-baikal-zone .seal-bubbles i{animation-duration:4.7s} -@keyframes schoolTailBubble{ - 0%{transform:translate3d(0,0,0) scale(.7);opacity:0} - 15%{opacity:.6} - 100%{transform:translate3d(-10px,-50px,0) scale(1.22);opacity:0} + +.lower-baikal-zone .tail-bubbles i:nth-child(1) { + width: 4px; + height: 4px; + left: 3px; + animation-delay: .1s +} + +.lower-baikal-zone .tail-bubbles i:nth-child(2) { + width: 7px; + height: 7px; + left: -3px; + animation-delay: .9s +} + +.lower-baikal-zone .tail-bubbles i:nth-child(3) { + width: 5px; + height: 5px; + left: 5px; + animation-delay: 1.7s +} + +.lower-baikal-zone .tail-bubbles i:nth-child(4) { + width: 3px; + height: 3px; + left: 0; + animation-delay: 2.4s +} + +.lower-baikal-zone .seal-bubbles i { + animation-duration: 4.7s +} + +@keyframes schoolTailBubble { + 0% { + transform: translate3d(0, 0, 0) scale(.7); + opacity: 0 + } + 15% { + opacity: .6 + } + 100% { + transform: translate3d(-10px, -50px, 0) scale(1.22); + opacity: 0 + } } /* Параллакс пузырьков внутри шапки */ -.lower-baikal-zone .depth-bubbles{ - position:absolute;inset:0;overflow:hidden; +.lower-baikal-zone .depth-bubbles { + position: absolute; + inset: 0; + overflow: hidden; } -.lower-baikal-zone .depth-bubbles i{ - position:absolute; - bottom:-20px; - border-radius:50%; - border:1px solid rgba(238,224,203,.42); - background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.45),transparent 37%); - opacity:0; - animation:lowerBubbleRise linear infinite; -} -.lower-baikal-zone .depth-bubbles-back i:nth-child(1){left:12%;width:4px;height:4px;animation-duration:17s;animation-delay:-5s} -.lower-baikal-zone .depth-bubbles-back i:nth-child(2){left:26%;width:6px;height:6px;animation-duration:21s;animation-delay:-13s} -.lower-baikal-zone .depth-bubbles-back i:nth-child(3){left:39%;width:4px;height:4px;animation-duration:19s;animation-delay:-7s} -.lower-baikal-zone .depth-bubbles-back i:nth-child(4){left:53%;width:7px;height:7px;animation-duration:24s;animation-delay:-17s} -.lower-baikal-zone .depth-bubbles-back i:nth-child(5){left:66%;width:5px;height:5px;animation-duration:18s;animation-delay:-2s} -.lower-baikal-zone .depth-bubbles-back i:nth-child(6){left:77%;width:4px;height:4px;animation-duration:22s;animation-delay:-10s} -.lower-baikal-zone .depth-bubbles-back i:nth-child(7){left:88%;width:7px;height:7px;animation-duration:25s;animation-delay:-20s} -.lower-baikal-zone .depth-bubbles-back i:nth-child(8){left:95%;width:5px;height:5px;animation-duration:20s;animation-delay:-8s} -.lower-baikal-zone .depth-bubbles-front i:nth-child(1){left:18%;width:12px;height:12px;animation-duration:12s;animation-delay:-3s} -.lower-baikal-zone .depth-bubbles-front i:nth-child(2){left:34%;width:15px;height:15px;animation-duration:15s;animation-delay:-10s} -.lower-baikal-zone .depth-bubbles-front i:nth-child(3){left:51%;width:10px;height:10px;animation-duration:13s;animation-delay:-6s} -.lower-baikal-zone .depth-bubbles-front i:nth-child(4){left:69%;width:14px;height:14px;animation-duration:16s;animation-delay:-12s} -.lower-baikal-zone .depth-bubbles-front i:nth-child(5){left:82%;width:11px;height:11px;animation-duration:14s;animation-delay:-8s} -.lower-baikal-zone .depth-bubbles-front i:nth-child(6){left:93%;width:16px;height:16px;animation-duration:17s;animation-delay:-4s} -@keyframes lowerBubbleRise{ - 0%{transform:translate3d(0,0,0) scale(.72);opacity:0} - 12%{opacity:.42} - 100%{transform:translate3d(16px,-330px,0) scale(1.15);opacity:0} +.lower-baikal-zone .depth-bubbles i { + position: absolute; + bottom: -20px; + border-radius: 50%; + border: 1px solid rgba(238, 224, 203, .42); + background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .45), transparent 37%); + opacity: 0; + animation: lowerBubbleRise linear infinite; +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(1) { + left: 12%; + width: 4px; + height: 4px; + animation-duration: 17s; + animation-delay: -5s +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(2) { + left: 26%; + width: 6px; + height: 6px; + animation-duration: 21s; + animation-delay: -13s +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(3) { + left: 39%; + width: 4px; + height: 4px; + animation-duration: 19s; + animation-delay: -7s +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(4) { + left: 53%; + width: 7px; + height: 7px; + animation-duration: 24s; + animation-delay: -17s +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(5) { + left: 66%; + width: 5px; + height: 5px; + animation-duration: 18s; + animation-delay: -2s +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(6) { + left: 77%; + width: 4px; + height: 4px; + animation-duration: 22s; + animation-delay: -10s +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(7) { + left: 88%; + width: 7px; + height: 7px; + animation-duration: 25s; + animation-delay: -20s +} + +.lower-baikal-zone .depth-bubbles-back i:nth-child(8) { + left: 95%; + width: 5px; + height: 5px; + animation-duration: 20s; + animation-delay: -8s +} + +.lower-baikal-zone .depth-bubbles-front i:nth-child(1) { + left: 18%; + width: 12px; + height: 12px; + animation-duration: 12s; + animation-delay: -3s +} + +.lower-baikal-zone .depth-bubbles-front i:nth-child(2) { + left: 34%; + width: 15px; + height: 15px; + animation-duration: 15s; + animation-delay: -10s +} + +.lower-baikal-zone .depth-bubbles-front i:nth-child(3) { + left: 51%; + width: 10px; + height: 10px; + animation-duration: 13s; + animation-delay: -6s +} + +.lower-baikal-zone .depth-bubbles-front i:nth-child(4) { + left: 69%; + width: 14px; + height: 14px; + animation-duration: 16s; + animation-delay: -12s +} + +.lower-baikal-zone .depth-bubbles-front i:nth-child(5) { + left: 82%; + width: 11px; + height: 11px; + animation-duration: 14s; + animation-delay: -8s +} + +.lower-baikal-zone .depth-bubbles-front i:nth-child(6) { + left: 93%; + width: 16px; + height: 16px; + animation-duration: 17s; + animation-delay: -4s +} + +@keyframes lowerBubbleRise { + 0% { + transform: translate3d(0, 0, 0) scale(.72); + opacity: 0 + } + 12% { + opacity: .42 + } + 100% { + transform: translate3d(16px, -330px, 0) scale(1.15); + opacity: 0 + } } /* Заголовок, меню, описание и CTA остаются в спокойной верхней зоне. */ -.baikal-nav-wrap,.hero-copy,.deep-label,.carved-left,.carved-corner{z-index:30!important} +.baikal-nav-wrap, .hero-copy, .deep-label, .carved-left, .carved-corner { + z-index: 30 !important +} /* На узких экранах уменьшаем стаю, но оставляем анимацию только внизу. */ -@media(max-width:1000px){ - .baikal-carved-hero{ - --schoolPathA:path("M -140 360 C 120 350, 260 385, 450 370 C 650 354, 850 390, 1180 365"); - --schoolPathB:path("M -140 400 C 120 390, 280 420, 470 405 C 680 390, 860 425, 1180 402"); - --schoolPathC:path("M -140 438 C 130 430, 290 455, 500 442 C 720 428, 900 458, 1180 440"); - --sealSchoolPath:path("M 1180 435 C 940 420, 790 450, 620 438 C 430 425, 260 455, -150 440"); - } - .lower-baikal-zone{top:48%!important} - .seal-school-body{width:170px;height:82px;left:-85px;top:-41px} - .fish-3 .school-fish-body{width:150px;height:62px;left:-75px;top:-31px} - .fish-6 .school-fish-body{width:140px;height:58px;left:-70px;top:-29px} +@media (max-width: 1000px) { + .baikal-carved-hero { + --schoolPathA: path("M -140 360 C 120 350, 260 385, 450 370 C 650 354, 850 390, 1180 365"); + --schoolPathB: path("M -140 400 C 120 390, 280 420, 470 405 C 680 390, 860 425, 1180 402"); + --schoolPathC: path("M -140 438 C 130 430, 290 455, 500 442 C 720 428, 900 458, 1180 440"); + --sealSchoolPath: path("M 1180 435 C 940 420, 790 450, 620 438 C 430 425, 260 455, -150 440"); + } + + .lower-baikal-zone { + top: 48% !important + } + + .seal-school-body { + width: 170px; + height: 82px; + left: -85px; + top: -41px + } + + .fish-3 .school-fish-body { + width: 150px; + height: 62px; + left: -75px; + top: -31px + } + + .fish-6 .school-fish-body { + width: 140px; + height: 58px; + left: -70px; + top: -29px + } } -@media(max-width:700px){ - .fish-1,.fish-4{display:none} - .seal-school-body{width:138px;height:67px;left:-69px;top:-33px} - .lower-baikal-zone{top:51%!important} + +@media (max-width: 700px) { + .fish-1, .fish-4 { + display: none + } + + .seal-school-body { + width: 138px; + height: 67px; + left: -69px; + top: -33px + } + + .lower-baikal-zone { + top: 51% !important + } } /* При reduced motion животные статичны в нижней части, а не возле текста. */ -@media(prefers-reduced-motion:reduce){ - .lower-baikal-zone .school-creature, - .school-fish-body,.seal-school-body, - .school-fish-svg .fish-tail,.school-fish-svg .fish-fin, - .school-seal-svg .seal-tail,.school-seal-svg .seal-flipper, - .lower-baikal-zone .tail-bubbles i, - .lower-baikal-zone .depth-bubbles i{ - animation:none!important; - } - .fish-2{offset-distance:26%;opacity:.4} - .fish-3{offset-distance:58%;opacity:.45} - .fish-5{offset-distance:76%;opacity:.35} - .fish-6{offset-distance:40%;opacity:.5} - .seal-school{offset-distance:23%;opacity:.35} - .fish-1,.fish-4,.fish-7{display:none} -} +@media (prefers-reduced-motion: reduce) { + .lower-baikal-zone .school-creature, + .school-fish-body, .seal-school-body, + .school-fish-svg .fish-tail, .school-fish-svg .fish-fin, + .school-seal-svg .seal-tail, .school-seal-svg .seal-flipper, + .lower-baikal-zone .tail-bubbles i, + .lower-baikal-zone .depth-bubbles i { + animation: none !important; + } + .fish-2 { + offset-distance: 26%; + opacity: .4 + } + + .fish-3 { + offset-distance: 58%; + opacity: .45 + } + + .fish-5 { + offset-distance: 76%; + opacity: .35 + } + + .fish-6 { + offset-distance: 40%; + opacity: .5 + } + + .seal-school { + offset-distance: 23%; + opacity: .35 + } + + .fish-1, .fish-4, .fish-7 { + display: none + } +} /* ===== V23: ПОЛНОШИРИННАЯ АНИМАЦИЯ ЧЕРЕЗ translateX ===== */ /* Чёткая иерархия слоёв */ -.baikal-header{position:relative!important;overflow:hidden!important} +.baikal-header { + position: relative !important; + overflow: hidden !important +} + .baikal-header:before, .baikal-landscape, -.baikal-waves{z-index:1!important} -.water-animation-layer{z-index:2!important} -.carved-left,.carved-corner{z-index:3!important} -.hero-copy,.deep-label,.baikal-nav-wrap,.hero-actions{z-index:5!important} +.baikal-waves { + z-index: 1 !important +} + +.water-animation-layer { + z-index: 2 !important +} + +.carved-left, .carved-corner { + z-index: 3 !important +} + +.hero-copy, .deep-label, .baikal-nav-wrap, .hero-actions { + z-index: 5 !important +} /* Главный контейнер действительно занимает всю hero-секцию */ -.water-animation-layer{ - position:absolute!important; - left:0!important; - right:0!important; - bottom:0!important; - width:100%!important; - height:45%!important; - overflow:hidden!important; - pointer-events:none!important; - isolation:isolate; +.water-animation-layer { + position: absolute !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 45% !important; + overflow: hidden !important; + pointer-events: none !important; + isolation: isolate; } /* Отключаем старую offset-path механику */ .school-creature, .motion-creature, -.lower-baikal-zone{ - display:none!important; +.lower-baikal-zone { + display: none !important; } /* Рыбы: абсолютное позиционирование относительно ВСЕЙ ширины hero */ .free-fish, -.free-seal{ - position:absolute; - left:-15vw; - width:auto; - height:auto; - will-change:transform,opacity; +.free-seal { + position: absolute; + left: -15vw; + width: auto; + height: auto; + will-change: transform, opacity; } /* Размеры и вертикальные уровни */ -.fish-1{bottom:12%; animation:fishAcross1 36s linear infinite -11s} -.fish-2{bottom:22%; animation:fishAcross2 48s linear infinite -19s} -.fish-3{bottom:32%; animation:fishAcross3 58s linear infinite -7s} -.fish-4{bottom:17%; animation:fishAcross4 42s linear infinite -25s} -.fish-5{bottom:38%; animation:fishAcross5 64s linear infinite -31s} -.fish-6{bottom:27%; animation:fishAcross6 54s linear infinite -3s} -.fish-7{bottom:8%; animation:fishAcross7 46s linear infinite -37s} +.fish-1 { + bottom: 12%; + animation: fishAcross1 36s linear infinite -11s +} + +.fish-2 { + bottom: 22%; + animation: fishAcross2 48s linear infinite -19s +} + +.fish-3 { + bottom: 32%; + animation: fishAcross3 58s linear infinite -7s +} + +.fish-4 { + bottom: 17%; + animation: fishAcross4 42s linear infinite -25s +} + +.fish-5 { + bottom: 38%; + animation: fishAcross5 64s linear infinite -31s +} + +.fish-6 { + bottom: 27%; + animation: fishAcross6 54s linear infinite -3s +} + +.fish-7 { + bottom: 8%; + animation: fishAcross7 46s linear infinite -37s +} /* Один цикл = проход туда + возврат. Разворот происходит только в невидимой зоне после полного выхода за край. */ -@keyframes fishAcross1{ - 0%{transform:translate3d(0,0,0);opacity:0} - 2%{opacity:.46} - 22%{transform:translate3d(52vw,-20px,0);opacity:.46} - 46%{transform:translate3d(145vw,8px,0);opacity:.46} - 48%{transform:translate3d(145vw,8px,0);opacity:0} - 50%{transform:translate3d(145vw,8px,0) scaleX(-1);opacity:0} - 52%{opacity:.46} - 74%{transform:translate3d(74vw,-16px,0) scaleX(-1);opacity:.46} - 96%{transform:translate3d(0,4px,0) scaleX(-1);opacity:.46} - 98%,100%{transform:translate3d(0,4px,0) scaleX(-1);opacity:0} +@keyframes fishAcross1 { + 0% { + transform: translate3d(0, 0, 0); + opacity: 0 + } + 2% { + opacity: .46 + } + 22% { + transform: translate3d(52vw, -20px, 0); + opacity: .46 + } + 46% { + transform: translate3d(145vw, 8px, 0); + opacity: .46 + } + 48% { + transform: translate3d(145vw, 8px, 0); + opacity: 0 + } + 50% { + transform: translate3d(145vw, 8px, 0) scaleX(-1); + opacity: 0 + } + 52% { + opacity: .46 + } + 74% { + transform: translate3d(74vw, -16px, 0) scaleX(-1); + opacity: .46 + } + 96% { + transform: translate3d(0, 4px, 0) scaleX(-1); + opacity: .46 + } + 98%, 100% { + transform: translate3d(0, 4px, 0) scaleX(-1); + opacity: 0 + } } -@keyframes fishAcross2{ - 0%{transform:translate3d(0,0,0);opacity:0} - 2%{opacity:.66} - 23%{transform:translate3d(55vw,18px,0);opacity:.66} - 46%{transform:translate3d(145vw,-8px,0);opacity:.66} - 48%{opacity:0} - 50%{transform:translate3d(145vw,-8px,0) scaleX(-1);opacity:0} - 52%{opacity:.66} - 73%{transform:translate3d(75vw,20px,0) scaleX(-1);opacity:.66} - 96%{transform:translate3d(0,-6px,0) scaleX(-1);opacity:.66} - 98%,100%{opacity:0} + +@keyframes fishAcross2 { + 0% { + transform: translate3d(0, 0, 0); + opacity: 0 + } + 2% { + opacity: .66 + } + 23% { + transform: translate3d(55vw, 18px, 0); + opacity: .66 + } + 46% { + transform: translate3d(145vw, -8px, 0); + opacity: .66 + } + 48% { + opacity: 0 + } + 50% { + transform: translate3d(145vw, -8px, 0) scaleX(-1); + opacity: 0 + } + 52% { + opacity: .66 + } + 73% { + transform: translate3d(75vw, 20px, 0) scaleX(-1); + opacity: .66 + } + 96% { + transform: translate3d(0, -6px, 0) scaleX(-1); + opacity: .66 + } + 98%, 100% { + opacity: 0 + } } -@keyframes fishAcross3{ - 0%{transform:translate3d(0,0,0);opacity:0} - 2%{opacity:.88} - 23%{transform:translate3d(50vw,-28px,0);opacity:.88} - 46%{transform:translate3d(145vw,10px,0);opacity:.88} - 48%{opacity:0} - 50%{transform:translate3d(145vw,10px,0) scaleX(-1);opacity:0} - 52%{opacity:.88} - 72%{transform:translate3d(82vw,-22px,0) scaleX(-1);opacity:.88} - 96%{transform:translate3d(0,6px,0) scaleX(-1);opacity:.88} - 98%,100%{opacity:0} + +@keyframes fishAcross3 { + 0% { + transform: translate3d(0, 0, 0); + opacity: 0 + } + 2% { + opacity: .88 + } + 23% { + transform: translate3d(50vw, -28px, 0); + opacity: .88 + } + 46% { + transform: translate3d(145vw, 10px, 0); + opacity: .88 + } + 48% { + opacity: 0 + } + 50% { + transform: translate3d(145vw, 10px, 0) scaleX(-1); + opacity: 0 + } + 52% { + opacity: .88 + } + 72% { + transform: translate3d(82vw, -22px, 0) scaleX(-1); + opacity: .88 + } + 96% { + transform: translate3d(0, 6px, 0) scaleX(-1); + opacity: .88 + } + 98%, 100% { + opacity: 0 + } } -@keyframes fishAcross4{ - 0%{transform:translate3d(0,0,0);opacity:0} - 2%{opacity:.40} - 22%{transform:translate3d(48vw,16px,0);opacity:.40} - 46%{transform:translate3d(145vw,-16px,0);opacity:.40} - 48%{opacity:0} - 50%{transform:translate3d(145vw,-16px,0) scaleX(-1);opacity:0} - 52%{opacity:.40} - 74%{transform:translate3d(72vw,12px,0) scaleX(-1);opacity:.40} - 96%{transform:translate3d(0,-4px,0) scaleX(-1);opacity:.40} - 98%,100%{opacity:0} + +@keyframes fishAcross4 { + 0% { + transform: translate3d(0, 0, 0); + opacity: 0 + } + 2% { + opacity: .40 + } + 22% { + transform: translate3d(48vw, 16px, 0); + opacity: .40 + } + 46% { + transform: translate3d(145vw, -16px, 0); + opacity: .40 + } + 48% { + opacity: 0 + } + 50% { + transform: translate3d(145vw, -16px, 0) scaleX(-1); + opacity: 0 + } + 52% { + opacity: .40 + } + 74% { + transform: translate3d(72vw, 12px, 0) scaleX(-1); + opacity: .40 + } + 96% { + transform: translate3d(0, -4px, 0) scaleX(-1); + opacity: .40 + } + 98%, 100% { + opacity: 0 + } } -@keyframes fishAcross5{ - 0%{transform:translate3d(0,0,0);opacity:0} - 2%{opacity:.60} - 24%{transform:translate3d(56vw,-18px,0);opacity:.60} - 46%{transform:translate3d(145vw,14px,0);opacity:.60} - 48%{opacity:0} - 50%{transform:translate3d(145vw,14px,0) scaleX(-1);opacity:0} - 52%{opacity:.60} - 73%{transform:translate3d(78vw,-26px,0) scaleX(-1);opacity:.60} - 96%{transform:translate3d(0,7px,0) scaleX(-1);opacity:.60} - 98%,100%{opacity:0} + +@keyframes fishAcross5 { + 0% { + transform: translate3d(0, 0, 0); + opacity: 0 + } + 2% { + opacity: .60 + } + 24% { + transform: translate3d(56vw, -18px, 0); + opacity: .60 + } + 46% { + transform: translate3d(145vw, 14px, 0); + opacity: .60 + } + 48% { + opacity: 0 + } + 50% { + transform: translate3d(145vw, 14px, 0) scaleX(-1); + opacity: 0 + } + 52% { + opacity: .60 + } + 73% { + transform: translate3d(78vw, -26px, 0) scaleX(-1); + opacity: .60 + } + 96% { + transform: translate3d(0, 7px, 0) scaleX(-1); + opacity: .60 + } + 98%, 100% { + opacity: 0 + } } -@keyframes fishAcross6{ - 0%{transform:translate3d(0,0,0);opacity:0} - 2%{opacity:.84} - 22%{transform:translate3d(53vw,24px,0);opacity:.84} - 46%{transform:translate3d(145vw,-10px,0);opacity:.84} - 48%{opacity:0} - 50%{transform:translate3d(145vw,-10px,0) scaleX(-1);opacity:0} - 52%{opacity:.84} - 75%{transform:translate3d(76vw,20px,0) scaleX(-1);opacity:.84} - 96%{transform:translate3d(0,-8px,0) scaleX(-1);opacity:.84} - 98%,100%{opacity:0} + +@keyframes fishAcross6 { + 0% { + transform: translate3d(0, 0, 0); + opacity: 0 + } + 2% { + opacity: .84 + } + 22% { + transform: translate3d(53vw, 24px, 0); + opacity: .84 + } + 46% { + transform: translate3d(145vw, -10px, 0); + opacity: .84 + } + 48% { + opacity: 0 + } + 50% { + transform: translate3d(145vw, -10px, 0) scaleX(-1); + opacity: 0 + } + 52% { + opacity: .84 + } + 75% { + transform: translate3d(76vw, 20px, 0) scaleX(-1); + opacity: .84 + } + 96% { + transform: translate3d(0, -8px, 0) scaleX(-1); + opacity: .84 + } + 98%, 100% { + opacity: 0 + } } -@keyframes fishAcross7{ - 0%{transform:translate3d(0,0,0);opacity:0} - 2%{opacity:.58} - 23%{transform:translate3d(51vw,-14px,0);opacity:.58} - 46%{transform:translate3d(145vw,18px,0);opacity:.58} - 48%{opacity:0} - 50%{transform:translate3d(145vw,18px,0) scaleX(-1);opacity:0} - 52%{opacity:.58} - 72%{transform:translate3d(80vw,-12px,0) scaleX(-1);opacity:.58} - 96%{transform:translate3d(0,5px,0) scaleX(-1);opacity:.58} - 98%,100%{opacity:0} + +@keyframes fishAcross7 { + 0% { + transform: translate3d(0, 0, 0); + opacity: 0 + } + 2% { + opacity: .58 + } + 23% { + transform: translate3d(51vw, -14px, 0); + opacity: .58 + } + 46% { + transform: translate3d(145vw, 18px, 0); + opacity: .58 + } + 48% { + opacity: 0 + } + 50% { + transform: translate3d(145vw, 18px, 0) scaleX(-1); + opacity: 0 + } + 52% { + opacity: .58 + } + 72% { + transform: translate3d(80vw, -12px, 0) scaleX(-1); + opacity: .58 + } + 96% { + transform: translate3d(0, 5px, 0) scaleX(-1); + opacity: .58 + } + 98%, 100% { + opacity: 0 + } } /* SVG-рыбы */ -.free-fish-inner{ - position:relative; - color:#d1a15f; - animation:freeFishBob 3.5s ease-in-out infinite; - transform-origin:center; +.free-fish-inner { + position: relative; + color: #d1a15f; + animation: freeFishBob 3.5s ease-in-out infinite; + transform-origin: center; } -.free-fish svg{display:block;width:100%;height:100%;overflow:visible} -.free-fish svg g{stroke-width:2} -.free-fish .fish-outline{stroke:#d9aa66;stroke-width:2.35} -.free-fish .fish-tail{ - transform-box:fill-box; - transform-origin:right center; - animation:freeTail .9s ease-in-out infinite; + +.free-fish svg { + display: block; + width: 100%; + height: 100%; + overflow: visible } -.free-fish .fish-fin{ - transform-box:fill-box; - transform-origin:center bottom; - animation:freeFin 1.7s ease-in-out infinite; + +.free-fish svg g { + stroke-width: 2 +} + +.free-fish .fish-outline { + stroke: #d9aa66; + stroke-width: 2.35 +} + +.free-fish .fish-tail { + transform-box: fill-box; + transform-origin: right center; + animation: freeTail .9s ease-in-out infinite; +} + +.free-fish .fish-fin { + transform-box: fill-box; + transform-origin: center bottom; + animation: freeFin 1.7s ease-in-out infinite; } /* размеры: small 35–55, medium 60–90, large 100–140 */ -.fish-1 .free-fish-inner{width:46px;height:46px;opacity:.42} -.fish-2 .free-fish-inner{width:78px;height:52px;opacity:.68} -.fish-3 .free-fish-inner{width:132px;height:74px;opacity:.92} -.fish-4 .free-fish-inner{width:38px;height:38px;opacity:.36} -.fish-5 .free-fish-inner{width:88px;height:58px;opacity:.62} -.fish-6 .free-fish-inner{width:118px;height:68px;opacity:.86} -.fish-7 .free-fish-inner{width:64px;height:46px;opacity:.58} +.fish-1 .free-fish-inner { + width: 46px; + height: 46px; + opacity: .42 +} -@keyframes freeFishBob{ - 0%,100%{rotate:-1.2deg} - 50%{rotate:1.4deg} +.fish-2 .free-fish-inner { + width: 78px; + height: 52px; + opacity: .68 } -@keyframes freeTail{ - 0%,100%{transform:rotate(-8deg) scaleY(.94)} - 50%{transform:rotate(8deg) scaleY(1.05)} + +.fish-3 .free-fish-inner { + width: 132px; + height: 74px; + opacity: .92 } -@keyframes freeFin{ - 0%,100%{transform:rotate(-4deg)} - 50%{transform:rotate(6deg)} + +.fish-4 .free-fish-inner { + width: 38px; + height: 38px; + opacity: .36 +} + +.fish-5 .free-fish-inner { + width: 88px; + height: 58px; + opacity: .62 +} + +.fish-6 .free-fish-inner { + width: 118px; + height: 68px; + opacity: .86 +} + +.fish-7 .free-fish-inner { + width: 64px; + height: 46px; + opacity: .58 +} + +@keyframes freeFishBob { + 0%, 100% { + rotate: -1.2deg + } + 50% { + rotate: 1.4deg + } +} + +@keyframes freeTail { + 0%, 100% { + transform: rotate(-8deg) scaleY(.94) + } + 50% { + transform: rotate(8deg) scaleY(1.05) + } +} + +@keyframes freeFin { + 0%, 100% { + transform: rotate(-4deg) + } + 50% { + transform: rotate(6deg) + } } /* Нерпа в той же полноширинной зоне */ -.free-seal{ - bottom:18%; - animation:sealAcross 74s linear infinite -29s; -} -.free-seal-inner{ - position:relative; - width:165px; - height:92px; - color:#c99757; - opacity:.74; - animation:sealBob 5.4s ease-in-out infinite; -} -.free-seal svg{display:block;width:100%;height:100%;overflow:visible} -.free-seal svg g{stroke-width:2} -.free-seal .seal-outline{stroke:#d7a965;stroke-width:2.35} -.free-seal .seal-tail{ - transform-box:fill-box; - transform-origin:right center; - animation:sealTailMove 3.2s ease-in-out infinite; -} -.free-seal .seal-flipper{ - transform-box:fill-box; - transform-origin:center top; - animation:sealFlipperMove 2.7s ease-in-out infinite; +.free-seal { + bottom: 18%; + animation: sealAcross 74s linear infinite -29s; } -@keyframes sealAcross{ - 0%{transform:translate3d(145vw,0,0) scaleX(-1);opacity:0} - 2%{opacity:.72} - 23%{transform:translate3d(82vw,-24px,0) scaleX(-1);opacity:.72} - 46%{transform:translate3d(0,12px,0) scaleX(-1);opacity:.72} - 48%{opacity:0} - 50%{transform:translate3d(0,12px,0) scaleX(1);opacity:0} - 52%{opacity:.72} - 74%{transform:translate3d(73vw,-18px,0) scaleX(1);opacity:.72} - 96%{transform:translate3d(145vw,8px,0) scaleX(1);opacity:.72} - 98%,100%{opacity:0} +.free-seal-inner { + position: relative; + width: 165px; + height: 92px; + color: #c99757; + opacity: .74; + animation: sealBob 5.4s ease-in-out infinite; } -@keyframes sealBob{ - 0%,100%{rotate:-1.4deg} - 50%{rotate:1.4deg} + +.free-seal svg { + display: block; + width: 100%; + height: 100%; + overflow: visible } -@keyframes sealTailMove{ - 0%,100%{transform:rotate(-2deg)} - 50%{transform:rotate(4deg)} + +.free-seal svg g { + stroke-width: 2 } -@keyframes sealFlipperMove{ - 0%,100%{transform:rotate(-5deg)} - 50%{transform:rotate(8deg)} + +.free-seal .seal-outline { + stroke: #d7a965; + stroke-width: 2.35 +} + +.free-seal .seal-tail { + transform-box: fill-box; + transform-origin: right center; + animation: sealTailMove 3.2s ease-in-out infinite; +} + +.free-seal .seal-flipper { + transform-box: fill-box; + transform-origin: center top; + animation: sealFlipperMove 2.7s ease-in-out infinite; +} + +@keyframes sealAcross { + 0% { + transform: translate3d(145vw, 0, 0) scaleX(-1); + opacity: 0 + } + 2% { + opacity: .72 + } + 23% { + transform: translate3d(82vw, -24px, 0) scaleX(-1); + opacity: .72 + } + 46% { + transform: translate3d(0, 12px, 0) scaleX(-1); + opacity: .72 + } + 48% { + opacity: 0 + } + 50% { + transform: translate3d(0, 12px, 0) scaleX(1); + opacity: 0 + } + 52% { + opacity: .72 + } + 74% { + transform: translate3d(73vw, -18px, 0) scaleX(1); + opacity: .72 + } + 96% { + transform: translate3d(145vw, 8px, 0) scaleX(1); + opacity: .72 + } + 98%, 100% { + opacity: 0 + } +} + +@keyframes sealBob { + 0%, 100% { + rotate: -1.4deg + } + 50% { + rotate: 1.4deg + } +} + +@keyframes sealTailMove { + 0%, 100% { + transform: rotate(-2deg) + } + 50% { + transform: rotate(4deg) + } +} + +@keyframes sealFlipperMove { + 0%, 100% { + transform: rotate(-5deg) + } + 50% { + transform: rotate(8deg) + } } /* Пузырьки у животных */ -.water-animation-layer .tail-bubbles{ - position:absolute; - left:-8px; - top:50%; - width:18px;height:18px; - transform:translateY(-50%); - pointer-events:none; +.water-animation-layer .tail-bubbles { + position: absolute; + left: -8px; + top: 50%; + width: 18px; + height: 18px; + transform: translateY(-50%); + pointer-events: none; } -.water-animation-layer .tail-bubbles i{ - position:absolute; - border-radius:50%; - border:1px solid rgba(240,232,217,.52); - background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.42),transparent 40%); - opacity:0; - animation:animalBubble 3.2s ease-out infinite; + +.water-animation-layer .tail-bubbles i { + position: absolute; + border-radius: 50%; + border: 1px solid rgba(240, 232, 217, .52); + background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .42), transparent 40%); + opacity: 0; + animation: animalBubble 3.2s ease-out infinite; } -.water-animation-layer .tail-bubbles i:nth-child(1){width:4px;height:4px;left:3px;animation-delay:.1s} -.water-animation-layer .tail-bubbles i:nth-child(2){width:7px;height:7px;left:-3px;animation-delay:.9s} -.water-animation-layer .tail-bubbles i:nth-child(3){width:5px;height:5px;left:5px;animation-delay:1.7s} -.water-animation-layer .tail-bubbles i:nth-child(4){width:3px;height:3px;left:0;animation-delay:2.4s} -.water-animation-layer .seal-bubbles i{animation-duration:4.6s} -@keyframes animalBubble{ - 0%{transform:translate3d(0,0,0) scale(.7);opacity:0} - 15%{opacity:.58} - 100%{transform:translate3d(-9px,-48px,0) scale(1.2);opacity:0} + +.water-animation-layer .tail-bubbles i:nth-child(1) { + width: 4px; + height: 4px; + left: 3px; + animation-delay: .1s +} + +.water-animation-layer .tail-bubbles i:nth-child(2) { + width: 7px; + height: 7px; + left: -3px; + animation-delay: .9s +} + +.water-animation-layer .tail-bubbles i:nth-child(3) { + width: 5px; + height: 5px; + left: 5px; + animation-delay: 1.7s +} + +.water-animation-layer .tail-bubbles i:nth-child(4) { + width: 3px; + height: 3px; + left: 0; + animation-delay: 2.4s +} + +.water-animation-layer .seal-bubbles i { + animation-duration: 4.6s +} + +@keyframes animalBubble { + 0% { + transform: translate3d(0, 0, 0) scale(.7); + opacity: 0 + } + 15% { + opacity: .58 + } + 100% { + transform: translate3d(-9px, -48px, 0) scale(1.2); + opacity: 0 + } } /* Пузырьки по всей ширине hero, не привязаны к наличнику */ -.hero-bubbles{ - position:absolute; - inset:0; - width:100%; - height:100%; - pointer-events:none; - overflow:hidden; +.hero-bubbles { + position: absolute; + inset: 0; + width: 100%; + height: 100%; + pointer-events: none; + overflow: hidden; } -.hero-bubbles i{ - position:absolute; - bottom:-20px; - border-radius:50%; - border:1px solid rgba(238,225,206,.45); - background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.5),transparent 38%); - opacity:0; - animation:heroBubbleRise linear infinite; + +.hero-bubbles i { + position: absolute; + bottom: -20px; + border-radius: 50%; + border: 1px solid rgba(238, 225, 206, .45); + background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .5), transparent 38%); + opacity: 0; + animation: heroBubbleRise linear infinite; } -.hero-bubbles-back{z-index:-1} -.hero-bubbles-front{z-index:20} -.hero-bubbles-back i:nth-child(1){left:5%;width:4px;height:4px;animation-duration:18s;animation-delay:-6s} -.hero-bubbles-back i:nth-child(2){left:16%;width:6px;height:6px;animation-duration:22s;animation-delay:-12s} -.hero-bubbles-back i:nth-child(3){left:28%;width:5px;height:5px;animation-duration:20s;animation-delay:-3s} -.hero-bubbles-back i:nth-child(4){left:39%;width:7px;height:7px;animation-duration:24s;animation-delay:-15s} -.hero-bubbles-back i:nth-child(5){left:51%;width:4px;height:4px;animation-duration:19s;animation-delay:-8s} -.hero-bubbles-back i:nth-child(6){left:63%;width:6px;height:6px;animation-duration:23s;animation-delay:-17s} -.hero-bubbles-back i:nth-child(7){left:72%;width:5px;height:5px;animation-duration:21s;animation-delay:-5s} -.hero-bubbles-back i:nth-child(8){left:81%;width:7px;height:7px;animation-duration:25s;animation-delay:-19s} -.hero-bubbles-back i:nth-child(9){left:90%;width:4px;height:4px;animation-duration:18s;animation-delay:-10s} -.hero-bubbles-back i:nth-child(10){left:97%;width:6px;height:6px;animation-duration:22s;animation-delay:-14s} +.hero-bubbles-back { + z-index: -1 +} -.hero-bubbles-front i:nth-child(1){left:9%;width:12px;height:12px;animation-duration:13s;animation-delay:-3s} -.hero-bubbles-front i:nth-child(2){left:23%;width:15px;height:15px;animation-duration:15s;animation-delay:-9s} -.hero-bubbles-front i:nth-child(3){left:36%;width:10px;height:10px;animation-duration:12s;animation-delay:-5s} -.hero-bubbles-front i:nth-child(4){left:49%;width:14px;height:14px;animation-duration:16s;animation-delay:-11s} -.hero-bubbles-front i:nth-child(5){left:61%;width:11px;height:11px;animation-duration:14s;animation-delay:-7s} -.hero-bubbles-front i:nth-child(6){left:73%;width:16px;height:16px;animation-duration:17s;animation-delay:-13s} -.hero-bubbles-front i:nth-child(7){left:84%;width:12px;height:12px;animation-duration:13s;animation-delay:-4s} -.hero-bubbles-front i:nth-child(8){left:94%;width:15px;height:15px;animation-duration:16s;animation-delay:-10s} +.hero-bubbles-front { + z-index: 20 +} -@keyframes heroBubbleRise{ - 0%{transform:translate3d(0,0,0) scale(.72);opacity:0} - 10%{opacity:.42} - 100%{transform:translate3d(18px,-310px,0) scale(1.15);opacity:0} +.hero-bubbles-back i:nth-child(1) { + left: 5%; + width: 4px; + height: 4px; + animation-duration: 18s; + animation-delay: -6s +} + +.hero-bubbles-back i:nth-child(2) { + left: 16%; + width: 6px; + height: 6px; + animation-duration: 22s; + animation-delay: -12s +} + +.hero-bubbles-back i:nth-child(3) { + left: 28%; + width: 5px; + height: 5px; + animation-duration: 20s; + animation-delay: -3s +} + +.hero-bubbles-back i:nth-child(4) { + left: 39%; + width: 7px; + height: 7px; + animation-duration: 24s; + animation-delay: -15s +} + +.hero-bubbles-back i:nth-child(5) { + left: 51%; + width: 4px; + height: 4px; + animation-duration: 19s; + animation-delay: -8s +} + +.hero-bubbles-back i:nth-child(6) { + left: 63%; + width: 6px; + height: 6px; + animation-duration: 23s; + animation-delay: -17s +} + +.hero-bubbles-back i:nth-child(7) { + left: 72%; + width: 5px; + height: 5px; + animation-duration: 21s; + animation-delay: -5s +} + +.hero-bubbles-back i:nth-child(8) { + left: 81%; + width: 7px; + height: 7px; + animation-duration: 25s; + animation-delay: -19s +} + +.hero-bubbles-back i:nth-child(9) { + left: 90%; + width: 4px; + height: 4px; + animation-duration: 18s; + animation-delay: -10s +} + +.hero-bubbles-back i:nth-child(10) { + left: 97%; + width: 6px; + height: 6px; + animation-duration: 22s; + animation-delay: -14s +} + +.hero-bubbles-front i:nth-child(1) { + left: 9%; + width: 12px; + height: 12px; + animation-duration: 13s; + animation-delay: -3s +} + +.hero-bubbles-front i:nth-child(2) { + left: 23%; + width: 15px; + height: 15px; + animation-duration: 15s; + animation-delay: -9s +} + +.hero-bubbles-front i:nth-child(3) { + left: 36%; + width: 10px; + height: 10px; + animation-duration: 12s; + animation-delay: -5s +} + +.hero-bubbles-front i:nth-child(4) { + left: 49%; + width: 14px; + height: 14px; + animation-duration: 16s; + animation-delay: -11s +} + +.hero-bubbles-front i:nth-child(5) { + left: 61%; + width: 11px; + height: 11px; + animation-duration: 14s; + animation-delay: -7s +} + +.hero-bubbles-front i:nth-child(6) { + left: 73%; + width: 16px; + height: 16px; + animation-duration: 17s; + animation-delay: -13s +} + +.hero-bubbles-front i:nth-child(7) { + left: 84%; + width: 12px; + height: 12px; + animation-duration: 13s; + animation-delay: -4s +} + +.hero-bubbles-front i:nth-child(8) { + left: 94%; + width: 15px; + height: 15px; + animation-duration: 16s; + animation-delay: -10s +} + +@keyframes heroBubbleRise { + 0% { + transform: translate3d(0, 0, 0) scale(.72); + opacity: 0 + } + 10% { + opacity: .42 + } + 100% { + transform: translate3d(18px, -310px, 0) scale(1.15); + opacity: 0 + } } /* На мобильных сохраняется full-width логика */ -@media(max-width:800px){ - .water-animation-layer{height:42%!important} - .fish-3 .free-fish-inner{width:104px;height:60px} - .fish-6 .free-fish-inner{width:96px;height:58px} - .free-seal-inner{width:140px;height:78px} +@media (max-width: 800px) { + .water-animation-layer { + height: 42% !important + } + + .fish-3 .free-fish-inner { + width: 104px; + height: 60px + } + + .fish-6 .free-fish-inner { + width: 96px; + height: 58px + } + + .free-seal-inner { + width: 140px; + height: 78px + } } -@media(max-width:560px){ - .fish-1,.fish-4{display:none} - .water-animation-layer{height:40%!important} - .free-seal-inner{width:120px;height:70px} + +@media (max-width: 560px) { + .fish-1, .fish-4 { + display: none + } + + .water-animation-layer { + height: 40% !important + } + + .free-seal-inner { + width: 120px; + height: 70px + } } /* reduced motion */ -@media(prefers-reduced-motion:reduce){ - .free-fish,.free-seal,.free-fish-inner,.free-seal-inner, - .free-fish .fish-tail,.free-fish .fish-fin, - .free-seal .seal-tail,.free-seal .seal-flipper, - .water-animation-layer .tail-bubbles i,.hero-bubbles i{ - animation:none!important; - } - .fish-2{transform:translateX(28vw);opacity:.38} - .fish-3{transform:translateX(57vw);opacity:.45} - .fish-5{transform:translateX(75vw);opacity:.34} - .fish-6{transform:translateX(41vw);opacity:.42} - .free-seal{transform:translateX(69vw);opacity:.3} +@media (prefers-reduced-motion: reduce) { + .free-fish, .free-seal, .free-fish-inner, .free-seal-inner, + .free-fish .fish-tail, .free-fish .fish-fin, + .free-seal .seal-tail, .free-seal .seal-flipper, + .water-animation-layer .tail-bubbles i, .hero-bubbles i { + animation: none !important; + } + + .fish-2 { + transform: translateX(28vw); + opacity: .38 + } + + .fish-3 { + transform: translateX(57vw); + opacity: .45 + } + + .fish-5 { + transform: translateX(75vw); + opacity: .34 + } + + .fish-6 { + transform: translateX(41vw); + opacity: .42 + } + + .free-seal { + transform: translateX(69vw); + opacity: .3 + } } @@ -3393,120 +7931,402 @@ body{position:relative} V25 — ГЛУБОКИЙ PURPLE/BLUE HERO + СВЕТЯЩИЙСЯ ИРКУТСК Визуальный слой собран поверх существующего hero; рыбки остаются живыми SVG. ========================================================= */ -.baikal-header{ - min-height:clamp(760px,92vh,980px)!important; - background: - radial-gradient(circle at 78% 30%,rgba(86,64,165,.20),transparent 28%), - radial-gradient(circle at 58% 42%,rgba(18,83,145,.18),transparent 34%), - linear-gradient(135deg,#050b24 0%,#09153a 37%,#101449 67%,#07102e 100%)!important; - color:#f6f1e9!important; - isolation:isolate; +.baikal-header { + min-height: clamp(760px, 92vh, 980px) !important; + background: radial-gradient(circle at 78% 30%, rgba(86, 64, 165, .20), transparent 28%), + radial-gradient(circle at 58% 42%, rgba(18, 83, 145, .18), transparent 34%), + linear-gradient(135deg, #050b24 0%, #09153a 37%, #101449 67%, #07102e 100%) !important; + color: #f6f1e9 !important; + isolation: isolate; } -.baikal-header:before{ - content:""!important;position:absolute!important;inset:0!important;z-index:0!important; - background: - linear-gradient(90deg,rgba(4,9,31,.96) 0%,rgba(5,12,36,.86) 31%,rgba(8,15,43,.26) 56%,rgba(8,12,35,.10) 78%,rgba(6,10,29,.52) 100%), - linear-gradient(180deg,rgba(4,7,23,.55) 0%,transparent 22%,transparent 68%,rgba(4,9,28,.62) 100%)!important; - pointer-events:none!important; + +.baikal-header:before { + content: "" !important; + position: absolute !important; + inset: 0 !important; + z-index: 0 !important; + background: linear-gradient(90deg, rgba(4, 9, 31, .96) 0%, rgba(5, 12, 36, .86) 31%, rgba(8, 15, 43, .26) 56%, rgba(8, 12, 35, .10) 78%, rgba(6, 10, 29, .52) 100%), + linear-gradient(180deg, rgba(4, 7, 23, .55) 0%, transparent 22%, transparent 68%, rgba(4, 9, 28, .62) 100%) !important; + pointer-events: none !important; } -.v25-scene-art{ - position:absolute;z-index:1;left:31%;right:-2%;top:94px;bottom:175px; - background-image:url("images/image-b99c51de35dc.webp"); - background-repeat:no-repeat;background-size:1580px auto;background-position:68% 48%; - filter:saturate(.88) contrast(1.06) brightness(.92); - opacity:.96;pointer-events:none;overflow:hidden; - -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 8%,#000 82%,transparent 100%); - -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 10%,#000 80%,transparent 100%); + +.v25-scene-art { + position: absolute; + z-index: 1; + left: 31%; + right: -2%; + top: 94px; + bottom: 175px; + background-image: url("images/image-b99c51de35dc.webp"); + background-repeat: no-repeat; + background-size: 1580px auto; + background-position: 68% 48%; + filter: saturate(.88) contrast(1.06) brightness(.92); + opacity: .96; + pointer-events: none; + overflow: hidden; + -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 78%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 8%, #000 82%, transparent 100%); + -webkit-mask-composite: source-in; + mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 80%, transparent 100%); +} + +.v25-scene-art:after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(90deg, rgba(7, 13, 38, .45), transparent 24%, transparent 78%, rgba(7, 12, 34, .62)); +} + +.carved-left, .carved-corner, .baikal-landscape { + display: none !important +} + +.v25-flow-lines { + position: absolute; + z-index: 2; + left: 0; + top: 75px; + width: 100%; + height: 430px; + overflow: visible; + pointer-events: none; + opacity: .65 +} + +.v25-flow-lines path { + fill: none; + stroke: #4d63bb; + stroke-width: 1.4; + opacity: .42 +} + +.v25-flow-lines .gold { + stroke: #d7a45b; + stroke-width: 1.5; + opacity: .8; + filter: drop-shadow(0 0 5px rgba(215, 164, 91, .2)) +} + +.v25-moon-ring { + position: absolute; + z-index: 2; + right: 26%; + top: 150px; + width: 150px; + height: 150px; + border: 1.5px solid rgba(220, 169, 91, .72); + border-radius: 50%; + box-shadow: 0 0 36px rgba(91, 76, 174, .11); + pointer-events: none +} + +.baikal-nav-wrap { + z-index: 8 !important; + width: min(1480px, 92vw) !important; + height: 105px !important; + border-bottom: 1px solid rgba(214, 166, 94, .18) !important +} + +.baikal-brand { + color: #f5eee4 !important +} + +.baikal-brand .brand-window { + color: #d5a35d !important; + filter: drop-shadow(0 0 7px rgba(215, 164, 91, .25)) +} + +.baikal-brand b { + letter-spacing: .08em !important +} + +.baikal-brand small { + color: #d5a35d !important; + opacity: .9 !important +} + +.baikal-nav a { + color: rgba(249, 245, 239, .87) !important +} + +.baikal-nav a:hover { + color: #e2b36d !important } -.v25-scene-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,13,38,.45),transparent 24%,transparent 78%,rgba(7,12,34,.62));} -.carved-left,.carved-corner,.baikal-landscape{display:none!important} -.v25-flow-lines{position:absolute;z-index:2;left:0;top:75px;width:100%;height:430px;overflow:visible;pointer-events:none;opacity:.65} -.v25-flow-lines path{fill:none;stroke:#4d63bb;stroke-width:1.4;opacity:.42} -.v25-flow-lines .gold{stroke:#d7a45b;stroke-width:1.5;opacity:.8;filter:drop-shadow(0 0 5px rgba(215,164,91,.2))} -.v25-moon-ring{position:absolute;z-index:2;right:26%;top:150px;width:150px;height:150px;border:1.5px solid rgba(220,169,91,.72);border-radius:50%;box-shadow:0 0 36px rgba(91,76,174,.11);pointer-events:none} -.baikal-nav-wrap{z-index:8!important;width:min(1480px,92vw)!important;height:105px!important;border-bottom:1px solid rgba(214,166,94,.18)!important} -.baikal-brand{color:#f5eee4!important} -.baikal-brand .brand-window{color:#d5a35d!important;filter:drop-shadow(0 0 7px rgba(215,164,91,.25))} -.baikal-brand b{letter-spacing:.08em!important} -.baikal-brand small{color:#d5a35d!important;opacity:.9!important} -.baikal-nav a{color:rgba(249,245,239,.87)!important} -.baikal-nav a:hover{color:#e2b36d!important} /* Хедер остаётся доступным при прокрутке всей страницы. */ -.baikal-header{padding-top:118px!important} -.baikal-nav-wrap{ - position:fixed!important; - top:0!important; - width:100%!important; - max-width:none!important; - height:118px!important; - margin:0!important; - padding:0 max(4vw,24px)!important; - background:rgba(4,13,39,.82)!important; - border-bottom:1px solid rgba(214,166,94,.28)!important; - box-shadow:0 8px 24px rgba(0,0,0,.18)!important; - backdrop-filter:blur(14px); - -webkit-backdrop-filter:blur(14px); - z-index:1002!important; +.baikal-header { + padding-top: 118px !important } + +.baikal-nav-wrap { + position: fixed !important; + top: 0 !important; + width: 100% !important; + max-width: none !important; + height: 118px !important; + margin: 0 !important; + padding: 0 max(4vw, 24px) !important; + background: rgba(4, 13, 39, .82) !important; + border-bottom: 1px solid rgba(214, 166, 94, .28) !important; + box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important; + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); + z-index: 1002 !important; +} + /* Фиксированная панель не должна выглядеть отдельной рамкой. */ -.baikal-nav-wrap{ - background:rgba(4,13,39,.82)!important; - border-bottom:1px solid rgba(214,166,94,.28)!important; - box-shadow:none!important; - backdrop-filter:blur(14px); - -webkit-backdrop-filter:blur(14px); +.baikal-nav-wrap { + background: rgba(4, 13, 39, .82) !important; + border-bottom: 1px solid rgba(214, 166, 94, .28) !important; + box-shadow: none !important; + backdrop-filter: blur(14px); + -webkit-backdrop-filter: blur(14px); } -@media(max-width:1200px){ - .baikal-header{padding-top:108px!important} - .baikal-nav-wrap{height:108px!important} + +@media (max-width: 1200px) { + .baikal-header { + padding-top: 108px !important + } + + .baikal-nav-wrap { + height: 108px !important + } } -@media(max-width:900px){ - .baikal-header{padding-top:96px!important} - .baikal-nav-wrap{height:96px!important} + +@media (max-width: 900px) { + .baikal-header { + padding-top: 96px !important + } + + .baikal-nav-wrap { + height: 96px !important + } } -.baikal-nav-actions a{border-color:rgba(215,164,91,.72)!important;color:#e1b066!important;background:rgba(6,11,34,.42)!important;backdrop-filter:blur(8px)} -.hero-copy{z-index:7!important;left:6.5%!important;top:50%!important;transform:translateY(-45%)!important;width:min(610px,42vw)!important;max-width:none!important} -.hero-copy .hero-eyebrow{color:#d9ab67!important;letter-spacing:.24em!important;font-size:11px!important} -.hero-copy h1{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(86px,9.6vw,160px)!important;line-height:.84!important;font-weight:500!important;letter-spacing:-.045em!important;color:#fffaf3!important;text-shadow:0 14px 40px rgba(0,0,0,.2)!important;margin:14px 0 24px!important} -.hero-copy h2{font-size:clamp(24px,2.05vw,34px)!important;line-height:1.08!important;font-weight:400!important;letter-spacing:.09em!important;color:#dfac62!important;margin:0 0 22px!important} -.hero-copy p{font-size:15px!important;line-height:1.55!important;max-width:480px!important;color:rgba(246,242,236,.82)!important} -.hero-primary{background:linear-gradient(135deg,#e0b568,#cf9d4f)!important;color:#091431!important;border:1px solid rgba(255,225,166,.55)!important;box-shadow:0 12px 34px rgba(0,0,0,.22)!important;padding:16px 28px!important} -.hero-primary:hover{transform:translateY(-2px)!important;box-shadow:0 16px 38px rgba(0,0,0,.3)!important} -.deep-label{z-index:8!important;color:#f2eee7!important;right:4.8%!important;bottom:78px!important} -.deep-label:after{background:#d5a35d!important} -.baikal-waves{z-index:4!important;height:250px!important;bottom:-2px!important;filter:drop-shadow(0 -9px 24px rgba(0,0,0,.18))} -.baikal-waves .w1{fill:#0d2350!important} -.baikal-waves .w2{fill:#0a1a43!important} -.baikal-waves .w3{fill:#071535!important} -.baikal-waves .gold-line{stroke:#d4a05b!important;opacity:.84!important} -.baikal-waves .cream-transition{fill:#08142f!important;opacity:1!important} -.water-animation-layer{z-index:6!important;left:0!important;right:0!important;bottom:0!important;height:58%!important;overflow:hidden!important} -.free-fish-inner{color:#79bce5!important;filter:drop-shadow(0 0 8px rgba(65,162,222,.25))} -.free-fish .fish-outline{stroke:#8dd0f0!important} -.free-fish svg g{stroke:#6fafd8!important} -.water-animation-layer .tail-bubbles i,.hero-bubbles i{border-color:rgba(153,211,241,.42)!important} -.free-seal{display:none!important} -.baikal-feature-strip{background:linear-gradient(180deg,#f8efe4,#f4e7d8)!important;border-top:1px solid rgba(198,146,77,.2)!important} -@media(max-width:1100px){ - .v25-scene-art{left:30%;right:-18%;background-position:72% 48%;opacity:.72} - .v25-moon-ring{right:14%;width:120px;height:120px} - .hero-copy{left:5%!important;width:min(620px,58vw)!important} - .baikal-nav a:nth-child(n+5){display:none!important} + +.baikal-nav-actions a { + border-color: rgba(215, 164, 91, .72) !important; + color: #e1b066 !important; + background: rgba(6, 11, 34, .42) !important; + backdrop-filter: blur(8px) } -@media(max-width:760px){ - .baikal-header{min-height:760px!important} - .v25-scene-art{left:8%;right:-45%;top:190px;bottom:170px;background-size:1350px auto;background-position:75% 55%;opacity:.48} - .v25-flow-lines{top:130px;height:300px} - .v25-moon-ring{right:8%;top:170px;width:92px;height:92px;opacity:.7} - .hero-copy{left:6%!important;top:47%!important;width:88vw!important} - .hero-copy h1{font-size:clamp(70px,20vw,104px)!important} - .hero-copy h2{font-size:20px!important;max-width:84vw!important} - .hero-copy p{font-size:13px!important;max-width:80vw!important} - .water-animation-layer{height:50%!important} - .baikal-nav{display:none!important} - .baikal-nav-wrap{height:82px!important} - .baikal-nav-actions .nav-save span{display:none!important} + +.hero-copy { + z-index: 7 !important; + left: 6.5% !important; + top: 50% !important; + transform: translateY(-45%) !important; + width: min(610px, 42vw) !important; + max-width: none !important +} + +.hero-copy .hero-eyebrow { + color: #d9ab67 !important; + letter-spacing: .24em !important; + font-size: 11px !important +} + +.hero-copy h1 { + font-family: Georgia, 'Times New Roman', serif !important; + font-size: clamp(86px, 9.6vw, 160px) !important; + line-height: .84 !important; + font-weight: 500 !important; + letter-spacing: -.045em !important; + color: #fffaf3 !important; + text-shadow: 0 14px 40px rgba(0, 0, 0, .2) !important; + margin: 14px 0 24px !important +} + +.hero-copy h2 { + font-size: clamp(24px, 2.05vw, 34px) !important; + line-height: 1.08 !important; + font-weight: 400 !important; + letter-spacing: .09em !important; + color: #dfac62 !important; + margin: 0 0 22px !important +} + +.hero-copy p { + font-size: 15px !important; + line-height: 1.55 !important; + max-width: 480px !important; + color: rgba(246, 242, 236, .82) !important +} + +.hero-primary { + background: linear-gradient(135deg, #e0b568, #cf9d4f) !important; + color: #091431 !important; + border: 1px solid rgba(255, 225, 166, .55) !important; + box-shadow: 0 12px 34px rgba(0, 0, 0, .22) !important; + padding: 16px 28px !important +} + +.hero-primary:hover { + transform: translateY(-2px) !important; + box-shadow: 0 16px 38px rgba(0, 0, 0, .3) !important +} + +.deep-label { + z-index: 8 !important; + color: #f2eee7 !important; + right: 4.8% !important; + bottom: 78px !important +} + +.deep-label:after { + background: #d5a35d !important +} + +.baikal-waves { + z-index: 4 !important; + height: 250px !important; + bottom: -2px !important; + filter: drop-shadow(0 -9px 24px rgba(0, 0, 0, .18)) +} + +.baikal-waves .w1 { + fill: #0d2350 !important +} + +.baikal-waves .w2 { + fill: #0a1a43 !important +} + +.baikal-waves .w3 { + fill: #071535 !important +} + +.baikal-waves .gold-line { + stroke: #d4a05b !important; + opacity: .84 !important +} + +.baikal-waves .cream-transition { + fill: #08142f !important; + opacity: 1 !important +} + +.water-animation-layer { + z-index: 6 !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + height: 58% !important; + overflow: hidden !important +} + +.free-fish-inner { + color: #79bce5 !important; + filter: drop-shadow(0 0 8px rgba(65, 162, 222, .25)) +} + +.free-fish .fish-outline { + stroke: #8dd0f0 !important +} + +.free-fish svg g { + stroke: #6fafd8 !important +} + +.water-animation-layer .tail-bubbles i, .hero-bubbles i { + border-color: rgba(153, 211, 241, .42) !important +} + +.free-seal { + display: none !important +} + +.baikal-feature-strip { + background: linear-gradient(180deg, #f8efe4, #f4e7d8) !important; + border-top: 1px solid rgba(198, 146, 77, .2) !important +} + +@media (max-width: 1100px) { + .v25-scene-art { + left: 30%; + right: -18%; + background-position: 72% 48%; + opacity: .72 + } + + .v25-moon-ring { + right: 14%; + width: 120px; + height: 120px + } + + .hero-copy { + left: 5% !important; + width: min(620px, 58vw) !important + } + + .baikal-nav a:nth-child(n+5) { + display: none !important + } +} + +@media (max-width: 760px) { + .baikal-header { + min-height: 760px !important + } + + .v25-scene-art { + left: 8%; + right: -45%; + top: 190px; + bottom: 170px; + background-size: 1350px auto; + background-position: 75% 55%; + opacity: .48 + } + + .v25-flow-lines { + top: 130px; + height: 300px + } + + .v25-moon-ring { + right: 8%; + top: 170px; + width: 92px; + height: 92px; + opacity: .7 + } + + .hero-copy { + left: 6% !important; + top: 47% !important; + width: 88vw !important + } + + .hero-copy h1 { + font-size: clamp(70px, 20vw, 104px) !important + } + + .hero-copy h2 { + font-size: 20px !important; + max-width: 84vw !important + } + + .hero-copy p { + font-size: 13px !important; + max-width: 80vw !important + } + + .water-animation-layer { + height: 50% !important + } + + .baikal-nav { + display: none !important + } + + .baikal-nav-wrap { + height: 82px !important + } + + .baikal-nav-actions .nav-save span { + display: none !important + } } @@ -3515,160 +8335,194 @@ body{position:relative} Фоновая иллюстрация больше не определяет размеры hero. Дизайн, контент, рыбки и декоративные слои не изменяются. ========================================================= */ -html,body{ - max-width:100%; - overflow-x:hidden; +html, body { + max-width: 100%; + overflow-x: hidden; } -.baikal-header{ - position:relative!important; - width:100%!important; - max-width:100vw!important; - overflow:hidden!important; - min-height:clamp(720px,88vh,920px)!important; + +.baikal-header { + position: relative !important; + width: 100% !important; + max-width: 100vw !important; + overflow: hidden !important; + min-height: clamp(720px, 88vh, 920px) !important; } -.v25-scene-art{ - position:absolute!important; - inset:0!important; - width:100%!important; - height:100%!important; - max-width:none!important; - background-repeat:no-repeat!important; - background-size:cover!important; - background-position:right center!important; - overflow:hidden!important; - pointer-events:none!important; - z-index:1!important; - opacity:.96!important; - filter:saturate(.88) contrast(1.06) brightness(.92)!important; - -webkit-mask-image:none!important; - mask-image:none!important; + +.v25-scene-art { + position: absolute !important; + inset: 0 !important; + width: 100% !important; + height: 100% !important; + max-width: none !important; + background-repeat: no-repeat !important; + background-size: cover !important; + background-position: right center !important; + overflow: hidden !important; + pointer-events: none !important; + z-index: 1 !important; + opacity: .96 !important; + filter: saturate(.88) contrast(1.06) brightness(.92) !important; + -webkit-mask-image: none !important; + mask-image: none !important; } -.v25-scene-art:after{ - content:""; - position:absolute; - inset:0; - background: - linear-gradient(90deg,rgba(7,13,38,.58) 0%,rgba(7,13,38,.34) 27%,rgba(7,13,38,.05) 56%,rgba(7,12,34,.18) 100%), - linear-gradient(180deg,rgba(5,9,29,.18),transparent 28%,transparent 70%,rgba(5,9,29,.32)); - pointer-events:none; + +.v25-scene-art:after { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient(90deg, rgba(7, 13, 38, .58) 0%, rgba(7, 13, 38, .34) 27%, rgba(7, 13, 38, .05) 56%, rgba(7, 12, 34, .18) 100%), + linear-gradient(180deg, rgba(5, 9, 29, .18), transparent 28%, transparent 70%, rgba(5, 9, 29, .32)); + pointer-events: none; } + .baikal-nav-wrap, .hero-copy, .v25-flow-lines, .v25-moon-ring, .water-animation-layer, .baikal-waves, -.deep-label{ - position:absolute; +.deep-label { + position: absolute; } -.baikal-nav-wrap{position:relative!important} -@media (max-width:1440px){ - .v25-scene-art{ - inset:0!important; - background-size:cover!important; - background-position:68% center!important; - opacity:.92!important; - } +.baikal-nav-wrap { + position: relative !important } -@media (max-width:1100px){ - .baikal-header{min-height:clamp(700px,86vh,860px)!important} - .v25-scene-art{ - inset:0!important; - background-size:cover!important; - background-position:72% center!important; - opacity:.76!important; - } + +@media (max-width: 1440px) { + .v25-scene-art { + inset: 0 !important; + background-size: cover !important; + background-position: 68% center !important; + opacity: .92 !important; + } } -@media (max-width:760px){ - .baikal-header{min-height:720px!important} - .v25-scene-art{ - inset:0!important; - width:100%!important; - height:100%!important; - background-size:cover!important; - background-position:76% center!important; - opacity:.52!important; - } + +@media (max-width: 1100px) { + .baikal-header { + min-height: clamp(700px, 86vh, 860px) !important + } + + .v25-scene-art { + inset: 0 !important; + background-size: cover !important; + background-position: 72% center !important; + opacity: .76 !important; + } } -@media (max-width:480px){ - .baikal-header{min-height:700px!important} - .v25-scene-art{background-position:79% center!important} + +@media (max-width: 760px) { + .baikal-header { + min-height: 720px !important + } + + .v25-scene-art { + inset: 0 !important; + width: 100% !important; + height: 100% !important; + background-size: cover !important; + background-position: 76% center !important; + opacity: .52 !important; + } +} + +@media (max-width: 480px) { + .baikal-header { + min-height: 700px !important + } + + .v25-scene-art { + background-position: 79% center !important + } } /* ===== V27: НОВАЯ НОЧНАЯ ИЛЛЮСТРАЦИЯ HERO — ЕДИНСТВЕННЫЙ ФОН ===== */ -.baikal-header{ - position:relative!important; - min-height:100svh!important; - height:auto!important; - overflow:hidden!important; - isolation:isolate!important; - color:#f7ebdc!important; - background-image:url("images/image-ef4cae8a5d1e.webp")!important; - background-size:cover!important; - background-repeat:no-repeat!important; - background-position:58% center!important; +.baikal-header { + position: relative !important; + min-height: 100svh !important; + height: auto !important; + overflow: hidden !important; + isolation: isolate !important; + color: #f7ebdc !important; + background-image: url("images/image-ef4cae8a5d1e.webp") !important; + background-size: cover !important; + background-repeat: no-repeat !important; + background-position: 58% center !important; } -.baikal-header::before{content:none!important} -.baikal-header::after{ - content:""; - position:absolute; - inset:0; - z-index:1; - pointer-events:none; - background:linear-gradient(90deg, - rgba(3,8,35,.88) 0%, - rgba(3,8,35,.74) 24%, - rgba(3,8,35,.42) 40%, - rgba(3,8,35,.12) 54%, - rgba(3,8,35,0) 70%); + +.baikal-header::before { + content: none !important } -.baikal-header .baikal-nav-wrap{ - position:relative!important; - z-index:5!important; - width:min(1480px,92%)!important; - margin:0 auto!important; - background:transparent!important; + +.baikal-header::after { + content: ""; + position: absolute; + inset: 0; + z-index: 1; + pointer-events: none; + background: linear-gradient(90deg, + rgba(3, 8, 35, .88) 0%, + rgba(3, 8, 35, .74) 24%, + rgba(3, 8, 35, .42) 40%, + rgba(3, 8, 35, .12) 54%, + rgba(3, 8, 35, 0) 70%); } -.baikal-header .hero-copy{ - position:relative!important; - z-index:5!important; - width:min(600px,42vw)!important; - margin-left:max(78px,7vw)!important; - padding-top:clamp(92px,13vh,150px)!important; + +.baikal-header .baikal-nav-wrap { + position: relative !important; + z-index: 5 !important; + width: min(1480px, 92%) !important; + margin: 0 auto !important; + background: transparent !important; } -.baikal-header .hero-copy h1{ - margin:0 0 22px!important; - max-width:100%!important; - color:#fffaf1!important; - font:500 clamp(74px,7vw,118px)/.86 Georgia,"Times New Roman",serif!important; - letter-spacing:-.055em!important; - text-shadow:0 4px 24px rgba(0,0,0,.28)!important; + +.baikal-header .hero-copy { + position: relative !important; + z-index: 5 !important; + width: min(600px, 42vw) !important; + margin-left: max(78px, 7vw) !important; + padding-top: clamp(92px, 13vh, 150px) !important; } -.baikal-header .hero-copy h2{ - margin:0!important; - max-width:560px!important; - color:#e7b66d!important; - font:500 clamp(24px,2vw,34px)/1.12 Arial,sans-serif!important; - letter-spacing:-.02em!important; - text-transform:uppercase!important; + +.baikal-header .hero-copy h1 { + margin: 0 0 22px !important; + max-width: 100% !important; + color: #fffaf1 !important; + font: 500 clamp(74px, 7vw, 118px)/.86 Georgia, "Times New Roman", serif !important; + letter-spacing: -.055em !important; + text-shadow: 0 4px 24px rgba(0, 0, 0, .28) !important; } -.baikal-header .hero-copy p{ - max-width:525px!important; - margin:22px 0 0!important; - color:rgba(255,250,241,.88)!important; - font:400 15px/1.65 Arial,sans-serif!important; - text-shadow:0 2px 14px rgba(0,0,0,.35)!important; + +.baikal-header .hero-copy h2 { + margin: 0 !important; + max-width: 560px !important; + color: #e7b66d !important; + font: 500 clamp(24px, 2vw, 34px)/1.12 Arial, sans-serif !important; + letter-spacing: -.02em !important; + text-transform: uppercase !important; } -.baikal-header .hero-actions{margin-top:28px!important} -.baikal-header .hero-primary{ - min-width:170px!important; - height:50px!important; - background:linear-gradient(180deg,#e1b56d,#c8944e)!important; - color:#071632!important; - box-shadow:0 12px 30px rgba(0,0,0,.22)!important; + +.baikal-header .hero-copy p { + max-width: 525px !important; + margin: 22px 0 0 !important; + color: rgba(255, 250, 241, .88) !important; + font: 400 15px/1.65 Arial, sans-serif !important; + text-shadow: 0 2px 14px rgba(0, 0, 0, .35) !important; } + +.baikal-header .hero-actions { + margin-top: 28px !important +} + +.baikal-header .hero-primary { + min-width: 170px !important; + height: 50px !important; + background: linear-gradient(180deg, #e1b56d, #c8944e) !important; + color: #071632 !important; + box-shadow: 0 12px 30px rgba(0, 0, 0, .22) !important; +} + /* Никаких старых декоративных слоёв поверх новой иллюстрации */ .baikal-header .v25-scene-art, .baikal-header .v25-flow-lines, @@ -3678,538 +8532,1301 @@ html,body{ .baikal-header .baikal-landscape, .baikal-header .water-animation-layer, .baikal-header .deep-label, -.baikal-header .baikal-waves{display:none!important} +.baikal-header .baikal-waves { + display: none !important +} -@media(max-width:1200px){ - .baikal-header{background-position:62% center!important} - .baikal-header .hero-copy{ - width:min(540px,48vw)!important; - margin-left:6vw!important; - padding-top:clamp(78px,11vh,120px)!important; - } - .baikal-header .hero-copy p{font-size:14px!important} +@media (max-width: 1200px) { + .baikal-header { + background-position: 62% center !important + } + + .baikal-header .hero-copy { + width: min(540px, 48vw) !important; + margin-left: 6vw !important; + padding-top: clamp(78px, 11vh, 120px) !important; + } + + .baikal-header .hero-copy p { + font-size: 14px !important + } } -@media(max-width:900px){ - .baikal-header{ - min-height:760px!important; - background-position:68% center!important; - } - .baikal-header::after{ - background:linear-gradient(90deg, - rgba(3,8,35,.91) 0%, - rgba(3,8,35,.78) 42%, - rgba(3,8,35,.34) 66%, - rgba(3,8,35,0) 86%); - } - .baikal-header .hero-copy{ - width:min(520px,68vw)!important; - margin-left:6vw!important; - padding-top:105px!important; - } + +@media (max-width: 900px) { + .baikal-header { + min-height: 760px !important; + background-position: 68% center !important; + } + + .baikal-header::after { + background: linear-gradient(90deg, + rgba(3, 8, 35, .91) 0%, + rgba(3, 8, 35, .78) 42%, + rgba(3, 8, 35, .34) 66%, + rgba(3, 8, 35, 0) 86%); + } + + .baikal-header .hero-copy { + width: min(520px, 68vw) !important; + margin-left: 6vw !important; + padding-top: 105px !important; + } } -@media(max-width:620px){ - .baikal-header{ - min-height:720px!important; - background-position:72% center!important; - } - .baikal-header::after{ - background:linear-gradient(90deg, - rgba(3,8,35,.94) 0%, - rgba(3,8,35,.82) 58%, - rgba(3,8,35,.35) 82%, - rgba(3,8,35,.08) 100%); - } - .baikal-header .hero-copy{ - width:min(86vw,470px)!important; - margin-left:7vw!important; - padding-top:88px!important; - } - .baikal-header .hero-copy h1{font-size:clamp(54px,17vw,78px)!important;margin-bottom:18px!important} - .baikal-header .hero-copy h2{font-size:clamp(20px,5.5vw,26px)!important} - .baikal-header .hero-copy p{font-size:13px!important;line-height:1.55!important;max-width:88%!important} + +@media (max-width: 620px) { + .baikal-header { + min-height: 720px !important; + background-position: 72% center !important; + } + + .baikal-header::after { + background: linear-gradient(90deg, + rgba(3, 8, 35, .94) 0%, + rgba(3, 8, 35, .82) 58%, + rgba(3, 8, 35, .35) 82%, + rgba(3, 8, 35, .08) 100%); + } + + .baikal-header .hero-copy { + width: min(86vw, 470px) !important; + margin-left: 7vw !important; + padding-top: 88px !important; + } + + .baikal-header .hero-copy h1 { + font-size: clamp(54px, 17vw, 78px) !important; + margin-bottom: 18px !important + } + + .baikal-header .hero-copy h2 { + font-size: clamp(20px, 5.5vw, 26px) !important + } + + .baikal-header .hero-copy p { + font-size: 13px !important; + line-height: 1.55 !important; + max-width: 88% !important + } } /* ===== V28: корректировка hero — воздух, рыбы, многослойный переход ===== */ -.baikal-header{ - position:relative!important; - overflow:hidden!important; +.baikal-header { + position: relative !important; + overflow: hidden !important; } -.baikal-header .hero-copy{ - position:absolute!important; - top:20%!important; - left:max(78px,7vw)!important; - z-index:7!important; - width:min(600px,42vw)!important; - margin:0!important; - padding:0!important; + +.baikal-header .hero-copy { + position: absolute !important; + top: 20% !important; + left: max(78px, 7vw) !important; + z-index: 7 !important; + width: min(600px, 42vw) !important; + margin: 0 !important; + padding: 0 !important; } -.baikal-header .hero-copy h1{ - font-size:clamp(68px,6.2vw,108px)!important; - line-height:.9!important; + +.baikal-header .hero-copy h1 { + font-size: clamp(68px, 6.2vw, 108px) !important; + line-height: .9 !important; +} + +.baikal-header .baikal-nav-wrap { + z-index: 9 !important } -.baikal-header .baikal-nav-wrap{z-index:9!important} /* Рыбы поверх фона, независимо от фоновой иллюстрации */ -.hero-fish-layer{ - position:absolute; - inset:0; - z-index:5; - pointer-events:none; - overflow:hidden; +.hero-fish-layer { + position: absolute; + inset: 0; + z-index: 5; + pointer-events: none; + overflow: hidden; } -.hero-fish{ - position:absolute; - left:-14vw; - width:clamp(72px,7vw,132px); - height:auto; - opacity:.72; - will-change:transform; - filter:drop-shadow(0 5px 10px rgba(0,13,42,.28)); + +.hero-fish { + position: absolute; + left: -14vw; + width: clamp(72px, 7vw, 132px); + height: auto; + opacity: .72; + will-change: transform; + filter: drop-shadow(0 5px 10px rgba(0, 13, 42, .28)); } -.hero-fish svg{display:block;width:100%;height:auto;overflow:visible} -.hero-fish .body{fill:rgba(115,188,225,.22);stroke:#9ed7f2;stroke-width:1.5} -.hero-fish .detail{fill:none;stroke:rgba(232,190,118,.9);stroke-width:1.25;stroke-linecap:round} -.hero-fish .eye{fill:#f2c273} -.hero-fish.f1{bottom:17%;animation:heroFishLTR 34s linear infinite -11s} -.hero-fish.f2{bottom:25%;width:clamp(58px,5.5vw,104px);opacity:.58;animation:heroFishRTL 43s linear infinite -20s} -.hero-fish.f3{bottom:31%;width:clamp(86px,8vw,150px);opacity:.66;animation:heroFishLTR 52s linear infinite -7s} -.hero-fish.f4{bottom:13%;width:clamp(62px,6.2vw,116px);opacity:.54;animation:heroFishRTL 38s linear infinite -28s} -.hero-fish.f5{bottom:22%;width:clamp(76px,7.2vw,136px);opacity:.64;animation:heroFishLTR 47s linear infinite -33s} -@keyframes heroFishLTR{ - 0%{transform:translate3d(-8vw,0,0)} - 25%{transform:translate3d(30vw,-9px,0)} - 55%{transform:translate3d(78vw,7px,0)} - 100%{transform:translate3d(132vw,-4px,0)} + +.hero-fish svg { + display: block; + width: 100%; + height: auto; + overflow: visible } -@keyframes heroFishRTL{ - 0%{transform:translate3d(132vw,0,0) scaleX(-1)} - 30%{transform:translate3d(88vw,8px,0) scaleX(-1)} - 60%{transform:translate3d(43vw,-7px,0) scaleX(-1)} - 100%{transform:translate3d(-8vw,3px,0) scaleX(-1)} + +.hero-fish .body { + fill: rgba(115, 188, 225, .22); + stroke: #9ed7f2; + stroke-width: 1.5 +} + +.hero-fish .detail { + fill: none; + stroke: rgba(232, 190, 118, .9); + stroke-width: 1.25; + stroke-linecap: round +} + +.hero-fish .eye { + fill: #f2c273 +} + +.hero-fish.f1 { + bottom: 17%; + animation: heroFishLTR 34s linear infinite -11s +} + +.hero-fish.f2 { + bottom: 25%; + width: clamp(58px, 5.5vw, 104px); + opacity: .58; + animation: heroFishRTL 43s linear infinite -20s +} + +.hero-fish.f3 { + bottom: 31%; + width: clamp(86px, 8vw, 150px); + opacity: .66; + animation: heroFishLTR 52s linear infinite -7s +} + +.hero-fish.f4 { + bottom: 13%; + width: clamp(62px, 6.2vw, 116px); + opacity: .54; + animation: heroFishRTL 38s linear infinite -28s +} + +.hero-fish.f5 { + bottom: 22%; + width: clamp(76px, 7.2vw, 136px); + opacity: .64; + animation: heroFishLTR 47s linear infinite -33s +} + +@keyframes heroFishLTR { + 0% { + transform: translate3d(-8vw, 0, 0) + } + 25% { + transform: translate3d(30vw, -9px, 0) + } + 55% { + transform: translate3d(78vw, 7px, 0) + } + 100% { + transform: translate3d(132vw, -4px, 0) + } +} + +@keyframes heroFishRTL { + 0% { + transform: translate3d(132vw, 0, 0) scaleX(-1) + } + 30% { + transform: translate3d(88vw, 8px, 0) scaleX(-1) + } + 60% { + transform: translate3d(43vw, -7px, 0) scaleX(-1) + } + 100% { + transform: translate3d(-8vw, 3px, 0) scaleX(-1) + } } /* Многослойный тёмный переход к светлой секции */ -.hero-transition-waves{ - position:absolute; - left:0; - right:0; - bottom:-1px; - width:100%; - height:clamp(195px,22vw,250px); - z-index:6; - pointer-events:none; +.hero-transition-waves { + position: absolute; + left: 0; + right: 0; + bottom: -1px; + width: 100%; + height: clamp(195px, 22vw, 250px); + z-index: 6; + pointer-events: none; } -.hero-transition-waves svg{display:block;width:100%;height:100%;overflow:visible} -.hero-transition-waves .wave-back{fill:#071c45;fill-opacity:.84} -.hero-transition-waves .wave-mid{fill:#061632;fill-opacity:.96} -.hero-transition-waves .wave-front{fill:#041226} -.hero-transition-waves .wave-gold{fill:none;stroke:#c99552;stroke-width:1.35;vector-effect:non-scaling-stroke;opacity:.92} -.hero-transition-waves .wave-blue{fill:none;stroke:#4ba6d3;stroke-width:1;vector-effect:non-scaling-stroke;opacity:.48} -.hero-transition-waves .wave-light{fill:#fbf4ea} -.baikal-feature-strip{position:relative!important;z-index:7!important;margin-top:-1px!important} -@media(max-width:1200px){ - .baikal-header .hero-copy{top:20%!important;left:6vw!important;width:min(540px,48vw)!important} +.hero-transition-waves svg { + display: block; + width: 100%; + height: 100%; + overflow: visible } -@media(max-width:900px){ - .baikal-header .hero-copy{top:18%!important;left:6vw!important;width:min(520px,68vw)!important;padding:0!important} - .hero-transition-waves{height:210px} - .hero-fish.f3{display:none} + +.hero-transition-waves .wave-back { + fill: #071c45; + fill-opacity: .84 } -@media(max-width:620px){ - .baikal-header .hero-copy{top:17%!important;left:7vw!important;width:min(86vw,470px)!important;padding:0!important} - .baikal-header .hero-copy h1{font-size:clamp(52px,15vw,72px)!important} - .hero-transition-waves{height:185px} - .hero-fish.f2,.hero-fish.f4{display:none} - .hero-fish.f1{bottom:15%}.hero-fish.f5{bottom:22%} + +.hero-transition-waves .wave-mid { + fill: #061632; + fill-opacity: .96 } -@media(prefers-reduced-motion:reduce){ - .hero-fish{animation:none!important} + +.hero-transition-waves .wave-front { + fill: #041226 +} + +.hero-transition-waves .wave-gold { + fill: none; + stroke: #c99552; + stroke-width: 1.35; + vector-effect: non-scaling-stroke; + opacity: .92 +} + +.hero-transition-waves .wave-blue { + fill: none; + stroke: #4ba6d3; + stroke-width: 1; + vector-effect: non-scaling-stroke; + opacity: .48 +} + +.hero-transition-waves .wave-light { + fill: #fbf4ea +} + +.baikal-feature-strip { + position: relative !important; + z-index: 7 !important; + margin-top: -1px !important +} + +@media (max-width: 1200px) { + .baikal-header .hero-copy { + top: 20% !important; + left: 6vw !important; + width: min(540px, 48vw) !important + } +} + +@media (max-width: 900px) { + .baikal-header .hero-copy { + top: 18% !important; + left: 6vw !important; + width: min(520px, 68vw) !important; + padding: 0 !important + } + + .hero-transition-waves { + height: 210px + } + + .hero-fish.f3 { + display: none + } +} + +@media (max-width: 620px) { + .baikal-header .hero-copy { + top: 17% !important; + left: 7vw !important; + width: min(86vw, 470px) !important; + padding: 0 !important + } + + .baikal-header .hero-copy h1 { + font-size: clamp(52px, 15vw, 72px) !important + } + + .hero-transition-waves { + height: 185px + } + + .hero-fish.f2, .hero-fish.f4 { + display: none + } + + .hero-fish.f1 { + bottom: 15% + } + + .hero-fish.f5 { + bottom: 22% + } +} + +@media (prefers-reduced-motion: reduce) { + .hero-fish { + animation: none !important + } } /* ===== V29: только положение hero-copy + возврат оригинальной V23-анимации рыб ===== */ -.baikal-header .hero-copy{ - position:relative!important; - top:auto!important; - right:auto!important; - bottom:auto!important; - left:auto!important; - transform:none!important; - z-index:10!important; - width:min(600px,42vw)!important; - margin:52px 0 0 max(78px,7vw)!important; - padding:0!important; +.baikal-header .hero-copy { + position: relative !important; + top: auto !important; + right: auto !important; + bottom: auto !important; + left: auto !important; + transform: none !important; + z-index: 10 !important; + width: min(600px, 42vw) !important; + margin: 52px 0 0 max(78px, 7vw) !important; + padding: 0 !important; } -.baikal-header .baikal-nav-wrap{z-index:12!important} -.baikal-header .water-animation-layer{ - display:block!important; - position:absolute!important; - left:0!important; - right:0!important; - bottom:0!important; - width:100%!important; - height:48%!important; - z-index:7!important; - overflow:hidden!important; - pointer-events:none!important; - opacity:1!important; - visibility:visible!important; - isolation:isolate!important; + +.baikal-header .baikal-nav-wrap { + z-index: 12 !important } -.baikal-header .water-animation-layer .free-fish{ - display:block!important; - visibility:visible!important; - pointer-events:none!important; + +.baikal-header .water-animation-layer { + display: block !important; + position: absolute !important; + left: 0 !important; + right: 0 !important; + bottom: 0 !important; + width: 100% !important; + height: 48% !important; + z-index: 7 !important; + overflow: hidden !important; + pointer-events: none !important; + opacity: 1 !important; + visibility: visible !important; + isolation: isolate !important; } -.baikal-header .water-animation-layer .free-fish-inner{ - visibility:visible!important; - filter:drop-shadow(0 5px 12px rgba(0,10,38,.34)); + +.baikal-header .water-animation-layer .free-fish { + display: block !important; + visibility: visible !important; + pointer-events: none !important; } -.baikal-header .water-animation-layer .fish-outline{ - stroke:#f0c875!important; - stroke-width:2.5!important; - fill:#c7923f!important; + +.baikal-header .water-animation-layer .free-fish-inner { + visibility: visible !important; + filter: drop-shadow(0 5px 12px rgba(0, 10, 38, .34)); } -.baikal-header .water-animation-layer .fish-tail{ - fill:#9f692d!important; - stroke:#f0c875!important; + +.baikal-header .water-animation-layer .fish-outline { + stroke: #f0c875 !important; + stroke-width: 2.5 !important; + fill: #c7923f !important; } -.baikal-header .water-animation-layer .fish-fin{ - fill:#e0b466!important; - stroke:#f0c875!important; + +.baikal-header .water-animation-layer .fish-tail { + fill: #9f692d !important; + stroke: #f0c875 !important; } -.baikal-header .water-animation-layer .free-fish svg g{ - color:#f0c875; + +.baikal-header .water-animation-layer .fish-fin { + fill: #e0b466 !important; + stroke: #f0c875 !important; } -.baikal-header .water-animation-layer .free-fish svg circle{ - fill:#f0e5d2!important; - stroke:#d8ad63!important; - stroke-width:1!important; + +.baikal-header .water-animation-layer .free-fish svg g { + color: #f0c875; } -.baikal-header .water-animation-layer .hero-bubbles{ - display:block!important; - visibility:visible!important; + +.baikal-header .water-animation-layer .free-fish svg circle { + fill: #f0e5d2 !important; + stroke: #d8ad63 !important; + stroke-width: 1 !important; +} + +.baikal-header .water-animation-layer .hero-bubbles { + display: block !important; + visibility: visible !important; +} + +.baikal-header .hero-transition-waves { + z-index: 6 !important +} + +.baikal-header .hero-copy { + z-index: 10 !important } -.baikal-header .hero-transition-waves{z-index:6!important} -.baikal-header .hero-copy{z-index:10!important} /* На высоких мониторах hero не должен растягиваться на всю высоту viewport. */ -@media(min-width:1201px){ - .baikal-header{ - min-height:clamp(720px,88vh,980px)!important; - height:clamp(720px,88vh,980px)!important; - } - .baikal-header .hero-copy h1{font-size:clamp(78px,6.5vw,132px)!important} - .baikal-header .hero-copy h2{font-size:clamp(26px,2vw,38px)!important} - .baikal-header .hero-copy p{font-size:clamp(14px,1vw,16px)!important} - .baikal-header .hero-primary{height:clamp(50px,4vw,58px)!important;padding:0 clamp(20px,1.8vw,30px)!important;font-size:clamp(14px,1vw,16px)!important} - .baikal-header .hero-primary b{font-size:clamp(18px,1.3vw,21px)!important} - .page-title h3{font-size:clamp(52px,4.8vw,82px)} - .page-title p{font-size:clamp(16px,1.2vw,19px)} - .arch-intro{font-size:clamp(16px,1.15vw,19px)} - .baikal-nav a{font-size:13px} +@media (min-width: 1201px) { + .baikal-header { + min-height: clamp(720px, 88vh, 980px) !important; + height: clamp(720px, 88vh, 980px) !important; + } + + .baikal-header .hero-copy h1 { + font-size: clamp(78px, 6.5vw, 132px) !important + } + + .baikal-header .hero-copy h2 { + font-size: clamp(26px, 2vw, 38px) !important + } + + .baikal-header .hero-copy p { + font-size: clamp(14px, 1vw, 16px) !important + } + + .baikal-header .hero-primary { + height: clamp(50px, 4vw, 58px) !important; + padding: 0 clamp(20px, 1.8vw, 30px) !important; + font-size: clamp(14px, 1vw, 16px) !important + } + + .baikal-header .hero-primary b { + font-size: clamp(18px, 1.3vw, 21px) !important + } + + .page-title h3 { + font-size: clamp(52px, 4.8vw, 82px) + } + + .page-title p { + font-size: clamp(16px, 1.2vw, 19px) + } + + .arch-intro { + font-size: clamp(16px, 1.15vw, 19px) + } + + .baikal-nav a { + font-size: 13px + } } -@media(max-width:1200px){ - .baikal-header .hero-copy{width:min(540px,48vw)!important;margin:50px 0 0 6vw!important} - .baikal-header .hero-copy h1{font-size:clamp(62px,8vw,100px)!important} - .baikal-header .hero-copy h2{font-size:clamp(22px,3vw,32px)!important} - .baikal-header .hero-copy p{font-size:clamp(14px,1.6vw,15px)!important} - .baikal-header .hero-primary{height:52px!important;padding:0 22px!important;font-size:14px!important} -} -@media(max-width:900px){ - .baikal-header .hero-copy{width:min(520px,68vw)!important;margin:46px 0 0 6vw!important;padding:0!important} - .baikal-header .hero-copy h1{font-size:clamp(46px,8vw,64px)!important} - .baikal-header .hero-copy h2{font-size:clamp(20px,3.6vw,28px)!important} - .baikal-header .hero-copy p{font-size:14px!important} - .baikal-header .hero-primary{height:50px!important;padding:0 20px!important;font-size:13px!important} - .baikal-nav-wrap{gap:16px} - .baikal-nav{display:flex;gap:10px} - .baikal-nav a{font-size:10px;padding:26px 0 22px} - .baikal-header .water-animation-layer{height:45%!important} - .baikal-header .water-animation-layer .fish-1{display:none!important} -} -@media(max-width:620px){ - .baikal-header .hero-copy{width:min(86vw,470px)!important;margin:38px 0 0 7vw!important;padding:0!important} - .baikal-header .hero-copy h1{font-size:clamp(40px,12vw,58px)!important} - .baikal-header .hero-copy h2{font-size:clamp(18px,5.5vw,24px)!important} - .baikal-header .hero-copy p{font-size:13px!important} - .baikal-header .hero-primary{height:48px!important;padding:0 18px!important;font-size:13px!important} - .baikal-nav{display:none} - .menu-toggle{display:block;margin-left:auto;z-index:2} - .baikal-nav.is-open{display:flex!important;position:absolute;top:82px;left:0;right:0;z-index:30;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px;background:rgba(5,23,49,.98);border:1px solid rgba(201,149,82,.45);box-shadow:0 14px 28px rgba(0,0,0,.25)} - .baikal-nav.is-open a{padding:13px 4px!important;font-size:14px!important;line-height:1.2;border-bottom:1px solid rgba(247,235,220,.14)} - .baikal-nav.is-open a:last-child{border-bottom:0} - .baikal-header .water-animation-layer{height:42%!important} - .baikal-header .water-animation-layer .fish-1, - .baikal-header .water-animation-layer .fish-4, - .baikal-header .water-animation-layer .fish-5{display:none!important} +@media (max-width: 1200px) { + .baikal-header .hero-copy { + width: min(540px, 48vw) !important; + margin: 50px 0 0 6vw !important + } + + .baikal-header .hero-copy h1 { + font-size: clamp(62px, 8vw, 100px) !important + } + + .baikal-header .hero-copy h2 { + font-size: clamp(22px, 3vw, 32px) !important + } + + .baikal-header .hero-copy p { + font-size: clamp(14px, 1.6vw, 15px) !important + } + + .baikal-header .hero-primary { + height: 52px !important; + padding: 0 22px !important; + font-size: 14px !important + } } -@media(max-width:900px){ - .page-title h3{font-size:clamp(36px,8vw,58px)} - .page-title p{font-size:clamp(15px,2.2vw,18px)} - .arch-intro{font-size:clamp(16px,2.3vw,18px)} -} -@media(max-width:620px){ - .page-title h3{font-size:clamp(32px,10vw,46px)} - .page-title p{font-size:15px} - .arch-intro{font-size:16px;line-height:1.6} +@media (max-width: 900px) { + .baikal-header .hero-copy { + width: min(520px, 68vw) !important; + margin: 46px 0 0 6vw !important; + padding: 0 !important + } + + .baikal-header .hero-copy h1 { + font-size: clamp(46px, 8vw, 64px) !important + } + + .baikal-header .hero-copy h2 { + font-size: clamp(20px, 3.6vw, 28px) !important + } + + .baikal-header .hero-copy p { + font-size: 14px !important + } + + .baikal-header .hero-primary { + height: 50px !important; + padding: 0 20px !important; + font-size: 13px !important + } + + .baikal-nav-wrap { + gap: 16px + } + + .baikal-nav { + display: flex; + gap: 10px + } + + .baikal-nav a { + font-size: 10px; + padding: 26px 0 22px + } + + .baikal-header .water-animation-layer { + height: 45% !important + } + + .baikal-header .water-animation-layer .fish-1 { + display: none !important + } } -.cafes-section{position:relative;overflow:hidden;background:linear-gradient(180deg,#fff9f2 0%,#f4e6d6 100%)} -.cafes-section .page{position:relative;z-index:2;padding-bottom:150px} -.cafes-section:before{content:"";position:absolute;left:-10%;right:-10%;bottom:-92px;height:180px;background:#0b2948;border-radius:50% 50% 0 0/55% 55% 0 0;transform:rotate(1deg);opacity:.96} -.cafes-section:after{content:"";position:absolute;left:-10%;right:-10%;bottom:20px;height:92px;border-top:2px solid rgba(198,146,77,.72);border-radius:50%;transform:rotate(-1.6deg)} -.cafes-section .page-title p{color:#6f6459} +@media (max-width: 620px) { + .baikal-header .hero-copy { + width: min(86vw, 470px) !important; + margin: 38px 0 0 7vw !important; + padding: 0 !important + } + + .baikal-header .hero-copy h1 { + font-size: clamp(40px, 12vw, 58px) !important + } + + .baikal-header .hero-copy h2 { + font-size: clamp(18px, 5.5vw, 24px) !important + } + + .baikal-header .hero-copy p { + font-size: 13px !important + } + + .baikal-header .hero-primary { + height: 48px !important; + padding: 0 18px !important; + font-size: 13px !important + } + + .baikal-nav { + display: none + } + + .menu-toggle { + display: block; + margin-left: auto; + z-index: 2 + } + + .baikal-nav.is-open { + display: flex !important; + position: absolute; + top: 82px; + left: 0; + right: 0; + z-index: 30; + flex-direction: column; + align-items: stretch; + gap: 0; + padding: 8px 16px; + background: rgba(5, 23, 49, .98); + border: 1px solid rgba(201, 149, 82, .45); + box-shadow: 0 14px 28px rgba(0, 0, 0, .25) + } + + .baikal-nav.is-open a { + padding: 13px 4px !important; + font-size: 14px !important; + line-height: 1.2; + border-bottom: 1px solid rgba(247, 235, 220, .14) + } + + .baikal-nav.is-open a:last-child { + border-bottom: 0 + } + + .baikal-header .water-animation-layer { + height: 42% !important + } + + .baikal-header .water-animation-layer .fish-1, + .baikal-header .water-animation-layer .fish-4, + .baikal-header .water-animation-layer .fish-5 { + display: none !important + } +} + +@media (max-width: 900px) { + .page-title h3 { + font-size: clamp(36px, 8vw, 58px) + } + + .page-title p { + font-size: clamp(15px, 2.2vw, 18px) + } + + .arch-intro { + font-size: clamp(16px, 2.3vw, 18px) + } +} + +@media (max-width: 620px) { + .page-title h3 { + font-size: clamp(32px, 10vw, 46px) + } + + .page-title p { + font-size: 15px + } + + .arch-intro { + font-size: 16px; + line-height: 1.6 + } +} + +.cafes-section { + position: relative; + overflow: hidden; + background: linear-gradient(180deg, #fff9f2 0%, #f4e6d6 100%) +} + +.cafes-section .page { + position: relative; + z-index: 2; + padding-bottom: 150px +} + +.cafes-section:before { + content: ""; + position: absolute; + left: -10%; + right: -10%; + bottom: -92px; + height: 180px; + background: #0b2948; + border-radius: 50% 50% 0 0/55% 55% 0 0; + transform: rotate(1deg); + opacity: .96 +} + +.cafes-section:after { + content: ""; + position: absolute; + left: -10%; + right: -10%; + bottom: 20px; + height: 92px; + border-top: 2px solid rgba(198, 146, 77, .72); + border-radius: 50%; + transform: rotate(-1.6deg) +} + +.cafes-section .page-title p { + color: #6f6459 +} /* Единое полноэкранное меню для desktop и mobile. */ -body.menu-open{overflow:hidden} -.baikal-header:has(.baikal-nav.is-open){z-index:1000!important} -.menu-toggle{display:block!important;position:relative;z-index:1002;margin-left:auto;color:var(--cream)} -.menu-toggle span{transform-origin:center;transition:transform .25s ease,opacity .2s ease} -.menu-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)} -.menu-toggle[aria-expanded="true"] span:nth-child(2){opacity:0} -.menu-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} -.baikal-header:has(.baikal-nav.is-open){overflow:visible!important} +body.menu-open { + overflow: hidden +} + +.baikal-header:has(.baikal-nav.is-open) { + z-index: 1000 !important +} + +.menu-toggle { + display: block !important; + position: relative; + z-index: 1002; + margin-left: auto; + color: var(--cream) +} + +.menu-toggle span { + transform-origin: center; + transition: transform .25s ease, opacity .2s ease +} + +.menu-toggle[aria-expanded="true"] span:nth-child(1) { + transform: translateY(7px) rotate(45deg) +} + +.menu-toggle[aria-expanded="true"] span:nth-child(2) { + opacity: 0 +} + +.menu-toggle[aria-expanded="true"] span:nth-child(3) { + transform: translateY(-7px) rotate(-45deg) +} + +.baikal-header:has(.baikal-nav.is-open) { + overflow: visible !important +} + .baikal-nav, -.baikal-nav.is-open{ - display:flex!important; - position:fixed!important; - inset:0!important; - z-index:1001!important; - width:100%!important; - height:100dvh!important; - margin:0!important; - padding:120px 32px 60px!important; - flex-direction:column!important; - align-items:center!important; - justify-content:center!important; - gap:22px!important; - background:linear-gradient(135deg,rgba(4,13,39,.98),rgba(7,54,93,.98))!important; - border:0!important; - opacity:0!important; - visibility:hidden!important; - transform:translateY(-18px)!important; - transition:opacity .3s ease,transform .3s ease,visibility .3s ease!important; +.baikal-nav.is-open { + display: flex !important; + position: fixed !important; + inset: 0 !important; + z-index: 1001 !important; + width: 100% !important; + height: 100dvh !important; + margin: 0 !important; + padding: 120px 32px 60px !important; + flex-direction: column !important; + align-items: center !important; + justify-content: center !important; + gap: 22px !important; + background: linear-gradient(135deg, rgba(4, 13, 39, .98), rgba(7, 54, 93, .98)) !important; + border: 0 !important; + opacity: 0 !important; + visibility: hidden !important; + transform: translateY(-18px) !important; + transition: opacity .3s ease, transform .3s ease, visibility .3s ease !important; } -.baikal-nav.is-open{opacity:1!important;visibility:visible!important;transform:translateY(0)!important} + +.baikal-nav.is-open { + opacity: 1 !important; + visibility: visible !important; + transform: translateY(0) !important +} + .baikal-nav a, -.baikal-nav.is-open a{ - padding:10px!important; - color:#f7ebdc!important; - font-size:clamp(24px,3vw,52px)!important; - line-height:1.15!important; - letter-spacing:.02em!important; - opacity:0; - transform:translateY(12px); - transition:opacity .25s ease,transform .25s ease,color .2s ease!important; +.baikal-nav.is-open a { + padding: 10px !important; + color: #f7ebdc !important; + font-size: clamp(24px, 3vw, 52px) !important; + line-height: 1.15 !important; + letter-spacing: .02em !important; + opacity: 0; + transform: translateY(12px); + transition: opacity .25s ease, transform .25s ease, color .2s ease !important; +} + +.baikal-nav.is-open a { + opacity: 1; + transform: translateY(0) +} + +.baikal-nav.is-open a:nth-child(2) { + transition-delay: .03s !important +} + +.baikal-nav.is-open a:nth-child(3) { + transition-delay: .06s !important } -.baikal-nav.is-open a{opacity:1;transform:translateY(0)} -.baikal-nav.is-open a:nth-child(2){transition-delay:.03s!important} -.baikal-nav.is-open a:nth-child(3){transition-delay:.06s!important} /* Финальное правило: верхняя панель всегда закреплена относительно viewport. */ -.baikal-nav-wrap{ - position:fixed!important; - top:0!important; - right:0!important; - left:0!important; - width:100%!important; - max-width:none!important; - margin:0!important; - z-index:1002!important; +.baikal-nav-wrap { + position: fixed !important; + top: 0 !important; + right: 0 !important; + left: 0 !important; + width: 100% !important; + max-width: none !important; + margin: 0 !important; + z-index: 1002 !important; } /* На мобильных вводный текст центрируется в свободной части hero, а иллюстрация остаётся внизу. */ -@media(max-width:620px){ - .baikal-header{ - display:flex!important; - flex-direction:column!important; - justify-content:center!important; - padding-top:96px!important; - padding-bottom:150px!important; - } - .baikal-header .hero-copy{ - position:relative!important; - top:auto!important; - left:auto!important; - margin:0 auto!important; - align-self:center!important; - width:min(86vw,470px)!important; - } +@media (max-width: 620px) { + .baikal-header { + display: flex !important; + flex-direction: column !important; + justify-content: center !important; + padding-top: 96px !important; + padding-bottom: 150px !important; + } + + .baikal-header .hero-copy { + position: relative !important; + top: auto !important; + left: auto !important; + margin: 0 auto !important; + align-self: center !important; + width: min(86vw, 470px) !important; + } } /* Лёгкая анимация и плавное появление контента без сторонних библиотек. */ -.baikal-header .hero-copy{ - animation:heroCopyIn .7s cubic-bezier(.22,.8,.28,1) both; -} -.baikal-brand{ - animation:brandIn .55s ease-out .08s both; -} -.reveal{ - opacity:0; - transform:translateY(22px); - transition:opacity .65s ease,transform .65s cubic-bezier(.22,.8,.28,1); -} -.reveal.is-visible{ - opacity:1; - transform:translateY(0); -} -.arch-card,.restaurant-card,.museum-card{ - transition:opacity .75s ease,transform .75s cubic-bezier(.22,.8,.28,1),box-shadow .35s ease; - will-change:opacity,transform; -} -.arch-card:hover,.restaurant-card:hover,.museum-card:hover{ - transform:translateY(-5px); - box-shadow:0 26px 58px rgba(39,28,20,.16); -} -[data-bg]{ - background-image:linear-gradient(135deg,#123a60,#7f5b3a); -} -[data-bg].bg-loaded{ - animation:backgroundIn .55s ease-out both; -} -@keyframes heroCopyIn{ - from{opacity:0;transform:translateY(18px)} - to{opacity:1;transform:translateY(0)} -} -@keyframes brandIn{ - from{opacity:0;transform:translateY(-10px)} - to{opacity:1;transform:translateY(0)} -} -@keyframes backgroundIn{ - from{opacity:.6} - to{opacity:1} -} -@media(prefers-reduced-motion:reduce){ - .baikal-header .hero-copy,.baikal-brand,.baikal-brand .brand-window,.baikal-brand span{animation:none} - .reveal{opacity:1;transform:none;transition:none} - .arch-card,.restaurant-card,.museum-card{transition:none} +.baikal-header .hero-copy { + animation: heroCopyIn .7s cubic-bezier(.22, .8, .28, 1) both; } -@media(max-width:620px) and (prefers-reduced-motion:no-preference){ - .reveal{ - transition:opacity .8s ease,transform .8s cubic-bezier(.22,.8,.28,1)!important; - } +.baikal-brand { + animation: brandIn .55s ease-out .08s both; +} + +.reveal { + opacity: 0; + transform: translateY(22px); + transition: opacity .65s ease, transform .65s cubic-bezier(.22, .8, .28, 1); +} + +.reveal.is-visible { + opacity: 1; + transform: translateY(0); +} + +.arch-card, .restaurant-card, .museum-card { + transition: opacity .75s ease, transform .75s cubic-bezier(.22, .8, .28, 1), box-shadow .35s ease; + will-change: opacity, transform; +} + +.arch-card:hover, .restaurant-card:hover, .museum-card:hover { + transform: translateY(-5px); + box-shadow: 0 26px 58px rgba(39, 28, 20, .16); +} + +[data-bg] { + background-image: linear-gradient(135deg, #123a60, #7f5b3a); +} + +[data-bg].bg-loaded { + animation: backgroundIn .55s ease-out both; +} + +@keyframes heroCopyIn { + from { + opacity: 0; + transform: translateY(18px) + } + to { + opacity: 1; + transform: translateY(0) + } +} + +@keyframes brandIn { + from { + opacity: 0; + transform: translateY(-10px) + } + to { + opacity: 1; + transform: translateY(0) + } +} + +@keyframes backgroundIn { + from { + opacity: .6 + } + to { + opacity: 1 + } +} + +@media (prefers-reduced-motion: reduce) { + .baikal-header .hero-copy, .baikal-brand, .baikal-brand .brand-window, .baikal-brand span { + animation: none + } + + .reveal { + opacity: 1; + transform: none; + transition: none + } + + .arch-card, .restaurant-card, .museum-card { + transition: none + } +} + +@media (max-width: 620px) and (prefers-reduced-motion: no-preference) { + .reveal { + transition: opacity .8s ease, transform .8s cubic-bezier(.22, .8, .28, 1) !important; + } } /* Логотип всегда по центру панели, бургер — по правому краю и по вертикальному центру. */ -.baikal-nav-wrap{ - justify-content:center!important; - align-items:center!important; +.baikal-nav-wrap { + justify-content: center !important; + align-items: center !important; } -.baikal-brand{ - position:absolute!important; - left:50%!important; - top:50%!important; - max-width:calc(100% - 96px)!important; - transform:translate(-50%,-50%)!important; - will-change:opacity,transform; - animation:brandCenteredIn .85s cubic-bezier(.16,1,.3,1) .08s both!important; + +.baikal-brand { + position: absolute !important; + left: 50% !important; + top: 50% !important; + max-width: calc(100% - 96px) !important; + transform: translate(-50%, -50%) !important; + will-change: opacity, transform; + animation: brandCenteredIn .85s cubic-bezier(.16, 1, .3, 1) .08s both !important; } -.baikal-brand .brand-window{ - will-change:opacity,transform; - animation:logoMarkIn .9s cubic-bezier(.16,1,.3,1) .16s both; + +.baikal-brand .brand-window { + will-change: opacity, transform; + animation: logoMarkIn .9s cubic-bezier(.16, 1, .3, 1) .16s both; } -.baikal-brand span{ - will-change:opacity,transform; - animation:logoTextIn .7s cubic-bezier(.16,1,.3,1) .24s both; + +.baikal-brand span { + will-change: opacity, transform; + animation: logoTextIn .7s cubic-bezier(.16, 1, .3, 1) .24s both; } -.menu-toggle{ - position:absolute!important; - top:50%!important; - right:max(4vw,24px)!important; - margin:0!important; - transform:translateY(-50%)!important; + +.menu-toggle { + position: absolute !important; + top: 50% !important; + right: max(4vw, 24px) !important; + margin: 0 !important; + transform: translateY(-50%) !important; } -@keyframes brandCenteredIn{ - from{opacity:0;transform:translate(-50%,calc(-50% - 14px)) scale(.96)} - to{opacity:1;transform:translate(-50%,-50%)} + +@keyframes brandCenteredIn { + from { + opacity: 0; + transform: translate(-50%, calc(-50% - 14px)) scale(.96) + } + to { + opacity: 1; + transform: translate(-50%, -50%) + } } -@keyframes logoMarkIn{ - from{opacity:0;transform:translateX(-8px) rotate(-8deg) scale(.86)} - to{opacity:1;transform:translateX(0) rotate(0) scale(1)} + +@keyframes logoMarkIn { + from { + opacity: 0; + transform: translateX(-8px) rotate(-8deg) scale(.86) + } + to { + opacity: 1; + transform: translateX(0) rotate(0) scale(1) + } } -@keyframes logoTextIn{ - from{opacity:0;transform:translateX(8px)} - to{opacity:1;transform:translateX(0)} + +@keyframes logoTextIn { + from { + opacity: 0; + transform: translateX(8px) + } + to { + opacity: 1; + transform: translateX(0) + } +} + +.baikal-nav.is-open a:nth-child(4) { + transition-delay: .09s !important +} + +.baikal-nav.is-open a:nth-child(5) { + transition-delay: .12s !important +} + +.baikal-nav.is-open a:nth-child(6) { + transition-delay: .15s !important +} + +.baikal-nav.is-open a:nth-child(7) { + transition-delay: .18s !important +} + +.baikal-nav a:after, .baikal-nav a:before { + display: none !important +} + +.baikal-nav a:hover { + color: #e2b36d !important } -.baikal-nav.is-open a:nth-child(4){transition-delay:.09s!important} -.baikal-nav.is-open a:nth-child(5){transition-delay:.12s!important} -.baikal-nav.is-open a:nth-child(6){transition-delay:.15s!important} -.baikal-nav.is-open a:nth-child(7){transition-delay:.18s!important} -.baikal-nav a:after,.baikal-nav a:before{display:none!important} -.baikal-nav a:hover{color:#e2b36d!important} /* Самостоятельный SVG: старые стили плавающих нерп не влияют на рисунок. */ -.baikal-header .hero-nerpa{ - position:absolute; - right:5%; - bottom:7%; - display:block; - width:clamp(200px,19vw,290px); - height:auto; - z-index:8; - pointer-events:none; +.baikal-header .hero-nerpa { + position: absolute; + right: 5%; + bottom: 7%; + display: block; + width: clamp(200px, 19vw, 290px); + height: auto; + z-index: 8; + pointer-events: none; } /* Карта маршрута на OpenStreetMap в палитре сайта. */ -.route-map-frame{background:#153b55;position:relative} -.route-map-frame #irkutsk-route-map{width:100%;height:100%;min-height:inherit;background:#153b55} -.route-map-frame .leaflet-tile-pane{filter:saturate(.72) sepia(.18) hue-rotate(158deg) brightness(.78) contrast(1.04)} -.route-map-frame .leaflet-control-zoom{border:1px solid rgba(216,166,83,.72)!important;border-radius:12px!important;overflow:hidden;box-shadow:0 8px 20px rgba(5,22,41,.28)!important} -.route-map-frame .leaflet-control-zoom a{width:34px;height:34px;line-height:34px;color:#f0d08c;background:#102d48;border-color:rgba(216,166,83,.45);font-family:Arial,sans-serif} -.route-map-frame .leaflet-control-zoom a:hover{color:#102d48;background:#f0d08c} -.route-map-frame .leaflet-control-attribution{color:#d8e1d7;background:rgba(8,31,52,.78);font-size:10px} -.route-map-frame .leaflet-control-attribution a{color:#f0d08c} -.route-map-frame .leaflet-attribution-flag{display:none!important} -.route-marker-wrap{background:transparent;border:0} -.route-marker{display:grid;place-items:center;width:32px;height:32px;border:2px solid #f0d08c;border-radius:50%;background:#0c2c49;color:#f7e4bb;font:700 13px/1 Arial,sans-serif;box-shadow:0 3px 10px rgba(4,20,37,.4)} -.route-map-frame .leaflet-popup-content-wrapper,.route-map-frame .leaflet-popup-tip{background:#102d48;color:#f5ead7} -.route-map-frame .leaflet-popup-content{margin:13px 16px;font:13px/1.4 Arial,sans-serif} -.route-map-frame .leaflet-popup-content strong{color:#f0d08c} -.route-map-frame .leaflet-popup-close-button{color:#f0d08c!important} - -@media print{ - @page{size:A4;margin:14mm 13mm} - body{background:#fff;color:#1d2d38;font:11pt/1.45 Arial,sans-serif;-webkit-print-color-adjust:exact;print-color-adjust:exact} - body>*{display:none!important} - body>.route-wrap,body>.architecture{display:block!important;background:#fff!important;color:#1d2d38!important} - .route-wrap{break-after:page} - .route-wrap .page,.architecture .page{max-width:none;padding:0} - .route-wrap .page-title{display:block;margin:0 0 7mm} - .route-wrap .page-title h3{font-size:20pt;color:#102d48;margin:0 0 3mm} - .route-wrap .page-title p{font-size:10pt;color:#4d5a5f;max-width:none} - .map-card{display:block!important;padding:0;background:#fff;border:0;box-shadow:none} - .route-map-frame{height:175mm;min-height:0;border:1px solid #c6a66c;border-radius:5mm;overflow:hidden} - .route-map-frame #irkutsk-route-map{height:100%;min-height:0} - .route-map-frame .leaflet-tile-pane{filter:none} - .route-map-frame .leaflet-control-zoom,.route-map-frame .leaflet-control-attribution{display:none} - .map-note{font-size:8pt;color:#52646b;padding:3mm 0 0} - .architecture .page-title{display:block;margin:0 0 6mm} - .architecture .page-title h3{font-size:20pt;color:#102d48;margin:0 0 3mm} - .architecture .page-title p,.arch-intro{font-size:10pt;color:#4d5a5f;max-width:none} - .window-ornament{display:none!important} - .arch-list{display:block} - .arch-card,.arch-card:nth-child(even){display:grid;grid-template-columns:30mm 1fr;min-height:0;margin:0;padding:4mm 0;border:0;border-bottom:1px solid #d7c5ae;border-radius:0;box-shadow:none;break-inside:avoid;background:#fff} - .arch-photo,.arch-card:nth-child(even) .arch-photo{display:block;order:0;min-height:30mm;height:30mm;background-position:center;background-size:cover;border-radius:3mm;align-self:start} - .arch-photo:after{display:none} - .arch-num{left:2mm;top:2mm;width:9mm;height:9mm;border:1px solid #f0d08c;background:#102d48;color:#f0d08c;font-size:9pt} - .arch-text{padding:0 0 0 5mm;display:block} - .address{font-size:8pt;margin:0 0 1mm;color:#9a6c27} - .arch-text h4{font-size:13pt;line-height:1.15;margin:0 0 2mm;color:#102d48} - .arch-text p{font-size:9.5pt;line-height:1.4;margin:0 0 2mm;color:#35464d} - .fact{font-size:8.5pt;line-height:1.35;margin:0;padding:0;border:0;color:#59686b} - .fact b{color:#102d48} +.route-map-frame { + background: #153b55; + position: relative +} + +.route-map-frame #irkutsk-route-map { + width: 100%; + height: 100%; + min-height: inherit; + background: #153b55 +} + +.route-map-frame .leaflet-tile-pane { + filter: saturate(.72) sepia(.18) hue-rotate(158deg) brightness(.78) contrast(1.04) +} + +.route-map-frame .leaflet-control-zoom { + border: 1px solid rgba(216, 166, 83, .72) !important; + border-radius: 12px !important; + overflow: hidden; + box-shadow: 0 8px 20px rgba(5, 22, 41, .28) !important +} + +.route-map-frame .leaflet-control-zoom a { + width: 34px; + height: 34px; + line-height: 34px; + color: #f0d08c; + background: #102d48; + border-color: rgba(216, 166, 83, .45); + font-family: Arial, sans-serif +} + +.route-map-frame .leaflet-control-zoom a:hover { + color: #102d48; + background: #f0d08c +} + +.route-map-frame .leaflet-control-attribution { + color: #d8e1d7; + background: rgba(8, 31, 52, .78); + font-size: 10px +} + +.route-map-frame .leaflet-control-attribution a { + color: #f0d08c +} + +.route-map-frame .leaflet-attribution-flag { + display: none !important +} + +.route-marker-wrap { + background: transparent; + border: 0 +} + +.route-marker { + display: grid; + place-items: center; + width: 32px; + height: 32px; + border: 2px solid #f0d08c; + border-radius: 50%; + background: #0c2c49; + color: #f7e4bb; + font: 700 13px/1 Arial, sans-serif; + box-shadow: 0 3px 10px rgba(4, 20, 37, .4) +} + +.route-map-frame .leaflet-popup-content-wrapper, .route-map-frame .leaflet-popup-tip { + background: #102d48; + color: #f5ead7 +} + +.route-map-frame .leaflet-popup-content { + margin: 13px 16px; + font: 13px/1.4 Arial, sans-serif +} + +.route-map-frame .leaflet-popup-content strong { + color: #f0d08c +} + +.route-map-frame .leaflet-popup-close-button { + color: #f0d08c !important +} + +@media print { + @page { + size: A4; + margin: 14mm 13mm + } + + body { + background: #fff; + color: #1d2d38; + font: 11pt/1.45 Arial, sans-serif; + -webkit-print-color-adjust: exact; + print-color-adjust: exact + } + + body > * { + display: none !important + } + + body > .route-wrap, body > .architecture { + display: block !important; + background: #fff !important; + color: #1d2d38 !important + } + + .route-wrap { + break-after: page + } + + .route-wrap .page, .architecture .page { + max-width: none; + padding: 0 + } + + .route-wrap .page-title { + display: block; + margin: 0 0 7mm + } + + .route-wrap .page-title h3 { + font-size: 20pt; + color: #102d48; + margin: 0 0 3mm + } + + .route-wrap .page-title p { + font-size: 10pt; + color: #4d5a5f; + max-width: none + } + + .map-card { + display: block !important; + padding: 0; + background: #fff; + border: 0; + box-shadow: none + } + + .route-map-frame { + height: 175mm; + min-height: 0; + border: 1px solid #c6a66c; + border-radius: 5mm; + overflow: hidden + } + + .route-map-frame #irkutsk-route-map { + height: 100%; + min-height: 0 + } + + .route-map-frame .leaflet-tile-pane { + filter: none + } + + .route-map-frame .leaflet-control-zoom, .route-map-frame .leaflet-control-attribution { + display: none + } + + .map-note { + font-size: 8pt; + color: #52646b; + padding: 3mm 0 0 + } + + .architecture .page-title { + display: block; + margin: 0 0 6mm + } + + .architecture .page-title h3 { + font-size: 20pt; + color: #102d48; + margin: 0 0 3mm + } + + .architecture .page-title p, .arch-intro { + font-size: 10pt; + color: #4d5a5f; + max-width: none + } + + .window-ornament { + display: none !important + } + + .arch-list { + display: block + } + + .arch-card, .arch-card:nth-child(even) { + display: grid; + grid-template-columns:30mm 1fr; + min-height: 0; + margin: 0; + padding: 4mm 0; + border: 0; + border-bottom: 1px solid #d7c5ae; + border-radius: 0; + box-shadow: none; + break-inside: avoid; + background: #fff + } + + .arch-photo, .arch-card:nth-child(even) .arch-photo { + display: block; + order: 0; + min-height: 30mm; + height: 30mm; + background-position: center; + background-size: cover; + border-radius: 3mm; + align-self: start + } + + .arch-photo:after { + display: none + } + + .arch-num { + left: 2mm; + top: 2mm; + width: 9mm; + height: 9mm; + border: 1px solid #f0d08c; + background: #102d48; + color: #f0d08c; + font-size: 9pt + } + + .arch-text { + padding: 0 0 0 5mm; + display: block + } + + .address { + font-size: 8pt; + margin: 0 0 1mm; + color: #9a6c27 + } + + .arch-text h4 { + font-size: 13pt; + line-height: 1.15; + margin: 0 0 2mm; + color: #102d48 + } + + .arch-text p { + font-size: 9.5pt; + line-height: 1.4; + margin: 0 0 2mm; + color: #35464d + } + + .fact { + font-size: 8.5pt; + line-height: 1.35; + margin: 0; + padding: 0; + border: 0; + color: #59686b + } + + .fact b { + color: #102d48 + } +} + +.map-note { + display: flex; + align-items: center; + gap: 10px; + padding: 12px 4px 1px; + color: #6d7f82; + font-size: 12px; + letter-spacing: .04em +} + +.map-note-line { + display: block; + width: 28px; + height: 3px; + border-radius: 4px; + background: #d8a653; + box-shadow: 0 0 0 1px rgba(216, 166, 83, .12) } -.map-note{display:flex;align-items:center;gap:10px;padding:12px 4px 1px;color:#6d7f82;font-size:12px;letter-spacing:.04em} -.map-note-line{display:block;width:28px;height:3px;border-radius:4px;background:#d8a653;box-shadow:0 0 0 1px rgba(216,166,83,.12)} /* Простая версия шапки: оставляем только фон, логотип и меню. */ -.baikal-header{min-height:640px!important;padding-top:82px!important} +.baikal-header { + min-height: 640px !important; + padding-top: 82px !important +} + .baikal-header .site-bubbles, .baikal-header .water-animation-layer, .baikal-header .v25-scene-art, @@ -4219,24 +9836,67 @@ body.menu-open{overflow:hidden} .baikal-header .carved-corner, .baikal-header .baikal-landscape, .baikal-header .baikal-waves, -.baikal-header .hero-nerpa{display:none!important} -.baikal-nav-wrap{height:82px!important;border-bottom:1px solid rgba(247,235,220,.18)!important;background:rgba(7,36,66,.88)!important;backdrop-filter:blur(8px)} -.baikal-nav{display:none!important} -.baikal-nav.is-open{display:flex!important} -.baikal-nav-actions{display:none!important} -.baikal-brand small{display:none!important} -.baikal-brand{font-size:18px!important} -.menu-toggle{display:block!important} +.baikal-header .hero-nerpa { + display: none !important +} + +.baikal-nav-wrap { + height: 82px !important; + border-bottom: 1px solid rgba(247, 235, 220, .18) !important; + background: rgba(7, 36, 66, .88) !important; + backdrop-filter: blur(8px) +} + +.baikal-nav { + display: none !important +} + +.baikal-nav.is-open { + display: flex !important +} + +.baikal-nav-actions { + display: none !important +} + +.baikal-brand small { + display: none !important +} + +.baikal-brand { + font-size: 18px !important +} + +.menu-toggle { + display: block !important +} /* Возвращаем персонажей в упрощённую шапку без лишнего декора. */ -.baikal-header .water-animation-layer{display:block!important;height:42%!important} -.baikal-header .hero-bubbles,.baikal-header .hero-bubbles-back,.baikal-header .tail-bubbles{display:none!important} -.baikal-header .hero-nerpa{display:block!important;right:6%;bottom:7%;width:clamp(150px,18vw,240px);z-index:8} -.baikal-header .free-fish-inner{filter:none!important} -@media(max-width:620px){ - .baikal-header .hero-nerpa{ - right:1%; - bottom:5%; - width:clamp(132px,38vw,175px); - } +.baikal-header .water-animation-layer { + display: block !important; + height: 42% !important +} + +.baikal-header .hero-bubbles, .baikal-header .hero-bubbles-back, .baikal-header .tail-bubbles { + display: none !important +} + +.baikal-header .hero-nerpa { + display: block !important; + right: 6%; + bottom: 7%; + width: clamp(150px, 18vw, 240px); + z-index: 8 +} + +.baikal-header .free-fish-inner { + filter: none !important +} + +@media (max-width: 620px) { + .baikal-header .hero-nerpa { + right: 1%; + bottom: 5%; + width: clamp(132px, 38vw, 175px); + } } diff --git a/fragments/architecture.php b/fragments/architecture.php index a4c5006..ab61841 100644 --- a/fragments/architecture.php +++ b/fragments/architecture.php @@ -5,22 +5,22 @@
4
Исторический центр · рядом со Спасской церковью

Памятник Петру и Февронии

Скульптурная композиция, посвящённая святым Петру и Февронии Муромским, расположена в исторической части Иркутска. Памятник органично включён в прогулочный маршрут между храмами и набережной.

По пути: остановка сразу после Спасской церкви добавляет маршруту камерный скульптурный акцент перед дальнейшим знакомством с храмовым ансамблем.
5
Нижняя Набережная, 2

Собор Богоявления

Один из старейших каменных храмов города. Каменный собор был заложен в 1718 году на месте сгоревшей деревянной церкви и долгое время являлся кафедральным собором Иркутской епархии. Его фасады отличаются ярким декором и чертами сибирского барокко.

Интересно: собор вместе со Спасской церковью формирует один из самых узнаваемых исторических ансамблей Иркутска.
6
Сухэ-Батора, 1

Польский костёл

Римско-католический храм Успения Девы Марии был построен польской общиной после того, как прежний деревянный костёл сгорел в пожаре 1879 года. Каменное здание возвели в 1880-х годах в неоготическом стиле. Сейчас здесь расположен Органный зал Иркутской областной филармонии.

На что смотреть: стрельчатые окна, высокий вертикальный силуэт и контраст неоготики с соседними православными храмами.
-
7
Берег Ангары

Нижняя набережная и памятник Якову Похабову

От Собора Богоявления маршрут выходит к Ангаре. Нижняя набережная связана с местом основания Иркутска и старой городской пристанью. Здесь установлен памятник казаку Якову Похабову — основателю Иркутского острога.

Лучший ракурс: от памятника открывается вид на Ангару, исторические храмы и линию Нижней набережной.
+
7
Берег Ангары

Нижняя набережная и памятник Якову Похабову

От Собора Богоявления маршрут выходит к Ангаре. Нижняя набережная связана с местом основания Иркутска и старой городской пристанью. Здесь установлен памятник казаку Якову Похабову — основателю Иркутского острога.

Лучший ракурс: от памятника открывается вид на Ангару, исторические храмы и линию Нижней набережной.
8
Нижняя набережная

Московские ворота

Триумфальная арка появилась в Иркутске в 1811 году в честь десятилетия восшествия Александра I на престол и отмечала въезд в город со стороны Московского тракта. Исторические ворота были разобраны в 1928 году, а к 350-летию Иркутска их воссоздали на Нижней набережной.

Дальше по маршруту: после Московских ворот прогулка поворачивает к улице Карла Маркса и её архитектурным памятникам.
9
Ленина, 38 / угол Карла Маркса

Русско-Азиатский банк

Один из самых выразительных банковских домов дореволюционного Иркутска. Здание узнаётся по угловой башне с куполом и богатому декору фасадов. После революционных событий помещения использовались советскими органами власти.

На что смотреть: угловая ротонда, лепные символы торговли и финансов, металлические балконы.
10
Карла Маркса, 10

Дом архитектора В. А. Рассушина

Особняк связан с городским архитектором Владимиром Рассушиным. Дом начала XX века сохранил характерный силуэт деревянной городской усадьбы; семья Рассушиных жила здесь до 1920 года. Позднее здание приспособили под учебные нужды.

Деталь маршрута: хороший контраст между деревянной архитектурой и каменной парадной застройкой улицы.
11
Карла Маркса, 14

Драматический театр им. Н. П. Охлопкова

Здание построено в 1894–1897 годах по проекту петербургского архитектора В. А. Шрётера на месте сгоревшего деревянного театра. Средства на строительство собирали горожане. Театр стал одной из главных архитектурных доминант улицы.

Интересно: исторический зрительный зал имеет многоярусную структуру; с театром связаны имена Н. Охлопкова, А. Вампилова и других деятелей культуры.
12
Карла Маркса, 11

Книжный магазин и типография Макушина и Посохина

В начале XX века этот дом был заметным культурным и издательским центром Иркутска. Здесь работали книжный магазин и типография П. И. Макушина и В. М. Посохина; здание также связано с историей движения типографских рабочих.

Сегодня: исторический фасад остаётся частью цельного ансамбля Большой улицы.
-
13
Карла Маркса, 19

Усадьба С. Н. Верхоленцева

Комплекс относится к застройке конца 1870-х — начала 1880-х годов. Эта часть улицы хорошо показывает, как после пожара 1879 года традиционная усадебная структура постепенно уступала место более плотной городской застройке с торговыми функциями.

По пути: обратить внимание на масштаб усадьбы и соседство домов разных периодов.
+
13
Карла Маркса, 19

Усадьба С. Н. Верхоленцева

Комплекс относится к застройке конца 1870-х — начала 1880-х годов. Эта часть улицы хорошо показывает, как после пожара 1879 года традиционная усадебная структура постепенно уступала место более плотной городской застройке с торговыми функциями.

По пути: обратить внимание на масштаб усадьбы и соседство домов разных периодов.
14
Карла Маркса, 23

Сибирский торговый банк

Часть здания возникла в конце XIX века и первоначально принадлежала купчихе В. П. Кельх. В 1896 году недвижимость приобрёл Сибирский торговый банк — один из заметных коммерческих банков Российской империи. В 1920–1934 годах здесь размещалось иркутское отделение Госбанка.

Сегодня: комплекс используется Иркутским областным художественным музеем.
15
Карла Маркса, 24

Театр-иллюзион Яджоглу

Здание связано с ранней историей кинематографа в Иркутске. В начале XX века «иллюзионы» были новым городским развлечением, и Карла Маркса стала одной из улиц, где формировалась современная культурная жизнь города. Позднее здесь работал кинотеатр «Художественный».

На что смотреть: исторический объём здания и его место в линии парадных фасадов улицы.
-
16
Карла Маркса, 25

Дом Воллернера

Историческое административное здание связано с промышленником А. Б. Воллернером. В конце XIX века один из корпусов в этой части улицы сдавался в аренду железнодорожным учреждениям, что отражает рост роли Иркутска как транспортного центра Сибири.

В маршруте: эта остановка хорошо связывает торговую историю улицы с развитием железной дороги.
-
17
Карла Маркса, 28

Торговый дом фирмы «Треугольник»

Торговая застройка Большой улицы напоминает о времени, когда здесь концентрировались магазины, представительства фирм и городская деловая жизнь. Дом фирмы «Треугольник» относится к числу объектов культурного наследия исторического центра.

Акцент: показать гостям, что Карла Маркса была не только административной, но и главной торговой улицей.
+
16
Карла Маркса, 25

Дом Воллернера

Историческое административное здание связано с промышленником А. Б. Воллернером. В конце XIX века один из корпусов в этой части улицы сдавался в аренду железнодорожным учреждениям, что отражает рост роли Иркутска как транспортного центра Сибири.

В маршруте: эта остановка хорошо связывает торговую историю улицы с развитием железной дороги.
+
17
Карла Маркса, 28

Торговый дом фирмы «Треугольник»

Торговая застройка Большой улицы напоминает о времени, когда здесь концентрировались магазины, представительства фирм и городская деловая жизнь. Дом фирмы «Треугольник» относится к числу объектов культурного наследия исторического центра.

Акцент: показать гостям, что Карла Маркса была не только административной, но и главной торговой улицей.
18
Карла Маркса, 29/1

Мануфактурный магазин Второвых

Второвы — известная купеческая семья, чья деятельность была связана с крупной сибирской торговлей. Мануфактурный магазин на Большой улице — напоминание о масштабах коммерческой жизни Иркутска рубежа XIX–XX веков.

По пути: удобно рассказать о роли купечества в развитии городской архитектуры.
19
Карла Маркса, 7

Типография Восточно-Сибирской железной дороги

Здание связано с железнодорожной инфраструктурой и издательским делом. Появление подобных учреждений в центре города отражает значение Транссибирской магистрали для Иркутска и быстрый рост деловой активности на рубеже веков.

Дальше: от Карла Маркса маршрут идёт к памятнику Александру III и набережной Ангары.
20
Бульвар Гагарина

Памятник Александру III

Один из главных монументальных акцентов набережной Ангары. Памятник посвящён императору Александру III и связан с историей строительства Великого Сибирского пути. Отсюда удобно продолжить прогулку вдоль реки к островам.

Посмотреть: панораму Ангары, старую застройку бульвара и вид на пешеходные мосты.
-
21
Ангара · пешеходная зона

Остров Юность

Одна из самых узнаваемых прогулочных территорий Иркутска. Остров связан с городом пешеходными мостами и воспринимается как спокойное продолжение набережной: здесь много зелени, открытых видов на Ангару и мест для короткой остановки.

Атмосфера: прогулки у воды, фотографии с Ангарой и неспешный отдых в центре города.
-
22
Ангара · островная часть

Остров Конный

Зелёная территория рядом с Юностью, где городской маршрут становится более природным. Здесь открываются широкие виды на русло Ангары, берега и мосты; прогулка проходит среди деревьев и более свободного ландшафта.

Лучше всего: использовать остров как переход от городской архитектуры к панорамной прогулке вдоль воды.
-
23
Иркутская слобода

130-й квартал

Современная туристическая зона, созданная вокруг восстановленной и перенесённой деревянной застройки. Здесь историческая архитектура Иркутска соединена с кафе, ресторанами, музеями, магазинами и общественными пространствами.

Финальная прогулка: пройти квартал целиком лучше без спешки — детали деревянных фасадов особенно хорошо читаются вблизи.
+
21
Ангара · пешеходная зона

Остров Юность

Одна из самых узнаваемых прогулочных территорий Иркутска. Остров связан с городом пешеходными мостами и воспринимается как спокойное продолжение набережной: здесь много зелени, открытых видов на Ангару и мест для короткой остановки.

Атмосфера: прогулки у воды, фотографии с Ангарой и неспешный отдых в центре города.
+
22
Ангара · островная часть

Остров Конный

Зелёная территория рядом с Юностью, где городской маршрут становится более природным. Здесь открываются широкие виды на русло Ангары, берега и мосты; прогулка проходит среди деревьев и более свободного ландшафта.

Лучше всего: использовать остров как переход от городской архитектуры к панорамной прогулке вдоль воды.
+
23
Иркутская слобода

130-й квартал

Современная туристическая зона, созданная вокруг восстановленной и перенесённой деревянной застройки. Здесь историческая архитектура Иркутска соединена с кафе, ресторанами, музеями, магазинами и общественными пространствами.

Финальная прогулка: пройти квартал целиком лучше без спешки — детали деревянных фасадов особенно хорошо читаются вблизи.
24
130-й квартал

Скульптура Бабра

Бабр — символ Иркутска и один из самых популярных городских образов. Скульптура установлена у входа в 130-й квартал и стала естественной финальной точкой маршрута по историческому центру.

Для фото: лучше снимать скульптуру вместе с перспективой квартала, чтобы в кадре осталась деревянная архитектура.
diff --git a/fragments/cafes.php b/fragments/cafes.php index 4062b51..c08e4a6 100644 --- a/fragments/cafes.php +++ b/fragments/cafes.php @@ -1 +1,51 @@ -

Кофейни

Три остановки для кофе и десертов по ходу прогулки по центру Иркутска.

1
Кофе · десерты

Блис

около стадиона «Труд»

Кофейня для короткой остановки в центре: кофе, десерты и спокойный формат между прогулочными точками.

Городская подборкаформат
Уточнить при бронированиисредний чек
Среднийценовой сегмент
2
Кофе · десерты · выпечка

Cake Home

ул. 3 Июля

Кофейня-кондитерская на 3 Июля: удобна перед входом в 130-й квартал или после прогулки по нему.

Городская подборкаформат
Уточнить при бронированиисредний чек
Среднийценовой сегмент
3
Кофе · городская кофейня

Центральная кофейня

центр Иркутска

Городская кофейня в центральной части Иркутска — для завтрака, кофе навынос или небольшой паузы во время маршрута.

Городская подборкаформат
Уточнить при бронированиисредний чек
Среднийценовой сегмент
+
+
+

Кофейни

+

Три остановки для кофе и десертов по ходу прогулки по центру Иркутска.

+ +
+
+
1
+
+
Кофе · десерты
+

Блис

+
около стадиона «Труд»
+

Кофейня для короткой остановки в центре: кофе, десерты и спокойный формат между прогулочными + точками.

+
+
+
+
2
+
+
Кофе · десерты · выпечка
+

Cake Home

+
ул. 3 Июля
+

Кофейня-кондитерская на 3 Июля: удобна перед входом в 130-й квартал или после прогулки по + нему.

+
+
+
+
3
+
+
Кофе · городская кофейня
+

Центральная кофейня

+
центр Иркутска
+

Городская кофейня в центральной части Иркутска — для завтрака, кофе навынос или небольшой паузы + во время маршрута.

+
+
+
+
+
diff --git a/fragments/food.php b/fragments/food.php index cbe1245..602078c 100644 --- a/fragments/food.php +++ b/fragments/food.php @@ -1 +1,77 @@ -

Рестораны общей кухни

Четыре понятных варианта для обеда и ужина: грузинская, мясная, японская и авторская европейская кухня.

1
Грузинская · кавказская

Хочу Пури

ул. Советская, 58/1 · МТЦ «Новый», 3 этаж

Грузинская кухня: хачапури, хинкали, мясные блюда и большие застольные позиции. Подходит для плотного обеда или ужина.

Городская подборкаформат
Уточнить при бронированиисредний чек
Среднийценовой сегмент
2
Мясной ресторан · европейская кухня

Антрекот

Иркутск · центр города

Ресторан с акцентом на мясные блюда, стейки и понятную европейскую кухню. Хороший вариант для тех, кто хочет классический ресторанный ужин без привязки к региональной тематике.

Городская подборкаформат
Уточнить при бронированиисредний чек
Среднийценовой сегмент
3
Японская · азиатская

Суши Студио

130-й квартал

Удобная остановка в 130-м квартале для суши, роллов и блюд азиатского направления. Можно включить в финальную часть прогулки по кварталу.

Городская подборкаформат
Уточнить при бронированиисредний чек
Среднийценовой сегмент
4
Авторская · европейская · морепродукты

Князь Гвидон

ул. Сухэ-Батора, 18 · отель «Пушкин»

Ресторан в историческом центре с авторской европейской кухней и выразительной подачей. Подходит для более спокойного и торжественного ужина.

Городская подборкаформат
Уточнить при бронированиисредний чек
Выше среднегоценовой сегмент
+
+
+

Рестораны общей кухни

+

Пять вариантов для обеда и ужина: грузинская, мясная, японская и авторская европейская + кухня.

+ +
+
+
1
+
+
Грузинская · кавказская
+

Хочу Пури

+
ул. Советская, 58/1 · МТЦ «Новый», 3 этаж
+

Грузинская кухня: хачапури, хинкали, мясные блюда и большие застольные позиции. Подходит для + плотного обеда или ужина.

+
+
+
+
2
+
+
Мясной ресторан · европейская кухня
+

Антрекот

+
ул. Советская, 130
+

Ресторан с акцентом на мясные блюда, стейки и понятную европейскую кухню. Хороший вариант для + тех, кто хочет классический ресторанный ужин без привязки к региональной тематике.

+
+
+
+
3
+
+
Японская · азиатская
+

Суши Студио

+
ул. Седова, 18
+

Удобная остановка в 130-м квартале для суши, роллов и блюд азиатского направления. Можно включить + в финальную часть прогулки по кварталу.

+
+
+
+
4
+
+
Авторская · европейская · морепродукты
+

Князь Гвидон

+
ул. Сухэ-Батора, 18 · отель «Пушкин»
+

Ресторан в историческом центре с авторской европейской кухней и выразительной подачей. Подходит + для более спокойного и торжественного ужина.

+
+
+
+
5
+
+
Грузинская · кавказская
+

Гиви Ту Ю

+
ул. Верхняя Набережная, 10 · ТРЦ «ЯркоМолл», 3 этаж
+

Ресторан кавказской кухни с хинкали, хачапури и блюдами на гриле. В меню также есть европейские + позиции; подходит для сытного обеда или ужина.

+
+
Участникам «Академии профилактики» скидка 10%
+
+
+
+
+
+
diff --git a/fragments/regional-food.php b/fragments/regional-food.php index 1350c30..873d4be 100644 --- a/fragments/regional-food.php +++ b/fragments/regional-food.php @@ -1 +1,52 @@ -

Кухня Приангарья

Рестораны, где знакомство с регионом продолжается через байкальские, сибирские и локальные продукты.

1
Байкальская · сибирская · авторская

Лама

ул. Красных Мадьяр, 50/2

Современная байкальская кухня с акцентом на продукты и традиции народов Прибайкалья. Авторская подача и локальные продукты делают ресторан отдельным гастрономическим впечатлением.

Городская подборкаформат
Уточнить при бронированиисредний чек
Выше среднегоценовой сегмент
2
Сибирская · русская

Тайга

ул. Красноармейская, 18

Демократичный формат с сибирской кухней: пельмени, буузы, мясные блюда, завтраки и сезонные предложения.

Городская подборкаформат
Уточнить при бронированиисредний чек
Среднийценовой сегмент
3
Сибирская · русская · локальные продукты

Партизан

ул. Седова, 8 · 130-й квартал

Ресторан сибирской кухни в стилистике купеческой усадьбы. В меню — локальные продукты и блюда, которые хорошо завершают прогулку по 130-му кварталу.

Городская подборкаформат
Уточнить при бронированиисредний чек
Выше среднегоценовой сегмент
+
+
+

Кухня Приангарья

+

Рестораны, где знакомство с регионом продолжается через байкальские, сибирские и локальные продукты.

+
+ +
+
+
1
+
+
Байкальская · сибирская · авторская
+

Лама

+
ул. Красных Мадьяр, 50/2
+

Современная байкальская кухня с акцентом на продукты и традиции народов Прибайкалья. Авторская + подача и локальные продукты делают ресторан отдельным гастрономическим впечатлением.

+
+
+
+
2
+
+
Сибирская · русская
+

Тайга

+
ул. Красноармейская, 18
+

Демократичный формат с сибирской кухней: пельмени, буузы, мясные блюда, завтраки и сезонные + предложения.

+
+
+
+
3
+
+
Сибирская · русская · локальные продукты
+

Партизан

+
ул. Седова, 8 · 130-й квартал
+

Ресторан сибирской кухни в стилистике купеческой усадьбы. В меню — локальные продукты и блюда, + которые хорошо завершают прогулку по 130-му кварталу.

+
+
+
+
+
diff --git a/fragments/route.php b/fragments/route.php index 4da6bde..48e4f31 100644 --- a/fragments/route.php +++ b/fragments/route.php @@ -8,7 +8,6 @@
-
Номера на карте совпадают с порядком остановок ниже
@@ -48,8 +47,10 @@ .catch(() => {}); const bounds = L.latLngBounds(coordinates); stops.forEach(([title,lat,lng],index) => { + if(index == 0 || index == 23){ const marker = L.marker([lat,lng],{icon:L.divIcon({className:'route-marker-wrap',html:`${index+1}`,iconSize:[36,36],iconAnchor:[18,18]})}).addTo(routeMap); marker.bindPopup(`${index+1}. ${title}
Пешеходный маршрут по Иркутску`); + } }); routeMap.fitBounds(bounds,{padding:[28,28]}); window.addEventListener('resize',()=>routeMap.invalidateSize(),{passive:true});