Памятник Петру и Февронии
Скульптурная композиция, посвящённая святым Петру и Февронии Муромским, расположена в исторической части Иркутска. Памятник органично включён в прогулочный маршрут между храмами и набережной.
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 @@
Скульптурная композиция, посвящённая святым Петру и Февронии Муромским, расположена в исторической части Иркутска. Памятник органично включён в прогулочный маршрут между храмами и набережной. Один из старейших каменных храмов города. Каменный собор был заложен в 1718 году на месте сгоревшей деревянной церкви и долгое время являлся кафедральным собором Иркутской епархии. Его фасады отличаются ярким декором и чертами сибирского барокко. Римско-католический храм Успения Девы Марии был построен польской общиной после того, как прежний деревянный костёл сгорел в пожаре 1879 года. Каменное здание возвели в 1880-х годах в неоготическом стиле. Сейчас здесь расположен Органный зал Иркутской областной филармонии. От Собора Богоявления маршрут выходит к Ангаре. Нижняя набережная связана с местом основания Иркутска и старой городской пристанью. Здесь установлен памятник казаку Якову Похабову — основателю Иркутского острога. От Собора Богоявления маршрут выходит к Ангаре. Нижняя набережная связана с местом основания Иркутска и старой городской пристанью. Здесь установлен памятник казаку Якову Похабову — основателю Иркутского острога. Триумфальная арка появилась в Иркутске в 1811 году в честь десятилетия восшествия Александра I на престол и отмечала въезд в город со стороны Московского тракта. Исторические ворота были разобраны в 1928 году, а к 350-летию Иркутска их воссоздали на Нижней набережной. Один из самых выразительных банковских домов дореволюционного Иркутска. Здание узнаётся по угловой башне с куполом и богатому декору фасадов. После революционных событий помещения использовались советскими органами власти. Особняк связан с городским архитектором Владимиром Рассушиным. Дом начала XX века сохранил характерный силуэт деревянной городской усадьбы; семья Рассушиных жила здесь до 1920 года. Позднее здание приспособили под учебные нужды. Здание построено в 1894–1897 годах по проекту петербургского архитектора В. А. Шрётера на месте сгоревшего деревянного театра. Средства на строительство собирали горожане. Театр стал одной из главных архитектурных доминант улицы. В начале XX века этот дом был заметным культурным и издательским центром Иркутска. Здесь работали книжный магазин и типография П. И. Макушина и В. М. Посохина; здание также связано с историей движения типографских рабочих. Комплекс относится к застройке конца 1870-х — начала 1880-х годов. Эта часть улицы хорошо показывает, как после пожара 1879 года традиционная усадебная структура постепенно уступала место более плотной городской застройке с торговыми функциями. Комплекс относится к застройке конца 1870-х — начала 1880-х годов. Эта часть улицы хорошо показывает, как после пожара 1879 года традиционная усадебная структура постепенно уступала место более плотной городской застройке с торговыми функциями. Часть здания возникла в конце XIX века и первоначально принадлежала купчихе В. П. Кельх. В 1896 году недвижимость приобрёл Сибирский торговый банк — один из заметных коммерческих банков Российской империи. В 1920–1934 годах здесь размещалось иркутское отделение Госбанка. Здание связано с ранней историей кинематографа в Иркутске. В начале XX века «иллюзионы» были новым городским развлечением, и Карла Маркса стала одной из улиц, где формировалась современная культурная жизнь города. Позднее здесь работал кинотеатр «Художественный». Историческое административное здание связано с промышленником А. Б. Воллернером. В конце XIX века один из корпусов в этой части улицы сдавался в аренду железнодорожным учреждениям, что отражает рост роли Иркутска как транспортного центра Сибири. Торговая застройка Большой улицы напоминает о времени, когда здесь концентрировались магазины, представительства фирм и городская деловая жизнь. Дом фирмы «Треугольник» относится к числу объектов культурного наследия исторического центра. Историческое административное здание связано с промышленником А. Б. Воллернером. В конце XIX века один из корпусов в этой части улицы сдавался в аренду железнодорожным учреждениям, что отражает рост роли Иркутска как транспортного центра Сибири. Торговая застройка Большой улицы напоминает о времени, когда здесь концентрировались магазины, представительства фирм и городская деловая жизнь. Дом фирмы «Треугольник» относится к числу объектов культурного наследия исторического центра. Второвы — известная купеческая семья, чья деятельность была связана с крупной сибирской торговлей. Мануфактурный магазин на Большой улице — напоминание о масштабах коммерческой жизни Иркутска рубежа XIX–XX веков. Здание связано с железнодорожной инфраструктурой и издательским делом. Появление подобных учреждений в центре города отражает значение Транссибирской магистрали для Иркутска и быстрый рост деловой активности на рубеже веков. Один из главных монументальных акцентов набережной Ангары. Памятник посвящён императору Александру III и связан с историей строительства Великого Сибирского пути. Отсюда удобно продолжить прогулку вдоль реки к островам. Одна из самых узнаваемых прогулочных территорий Иркутска. Остров связан с городом пешеходными мостами и воспринимается как спокойное продолжение набережной: здесь много зелени, открытых видов на Ангару и мест для короткой остановки. Зелёная территория рядом с Юностью, где городской маршрут становится более природным. Здесь открываются широкие виды на русло Ангары, берега и мосты; прогулка проходит среди деревьев и более свободного ландшафта. Современная туристическая зона, созданная вокруг восстановленной и перенесённой деревянной застройки. Здесь историческая архитектура Иркутска соединена с кафе, ресторанами, музеями, магазинами и общественными пространствами. Одна из самых узнаваемых прогулочных территорий Иркутска. Остров связан с городом пешеходными мостами и воспринимается как спокойное продолжение набережной: здесь много зелени, открытых видов на Ангару и мест для короткой остановки. Зелёная территория рядом с Юностью, где городской маршрут становится более природным. Здесь открываются широкие виды на русло Ангары, берега и мосты; прогулка проходит среди деревьев и более свободного ландшафта. Современная туристическая зона, созданная вокруг восстановленной и перенесённой деревянной застройки. Здесь историческая архитектура Иркутска соединена с кафе, ресторанами, музеями, магазинами и общественными пространствами. Бабр — символ Иркутска и один из самых популярных городских образов. Скульптура установлена у входа в 130-й квартал и стала естественной финальной точкой маршрута по историческому центру.Памятник Петру и Февронии
Собор Богоявления
Польский костёл
Нижняя набережная и памятник Якову Похабову
Нижняя набережная и памятник Якову Похабову
Московские ворота
Русско-Азиатский банк
Дом архитектора В. А. Рассушина
Драматический театр им. Н. П. Охлопкова
Книжный магазин и типография Макушина и Посохина
Усадьба С. Н. Верхоленцева
Усадьба С. Н. Верхоленцева
Сибирский торговый банк
Театр-иллюзион Яджоглу
Дом Воллернера
Торговый дом фирмы «Треугольник»
Дом Воллернера
Торговый дом фирмы «Треугольник»
Мануфактурный магазин Второвых
Типография Восточно-Сибирской железной дороги
Памятник Александру III
Остров Юность
Остров Конный
130-й квартал
Остров Юность
Остров Конный
130-й квартал
Скульптура Бабра
Три остановки для кофе и десертов по ходу прогулки по центру Иркутска.
Кофейня для короткой остановки в центре: кофе, десерты и спокойный формат между прогулочными точками.
Кофейня-кондитерская на 3 Июля: удобна перед входом в 130-й квартал или после прогулки по нему.
Городская кофейня в центральной части Иркутска — для завтрака, кофе навынос или небольшой паузы во время маршрута.
Три остановки для кофе и десертов по ходу прогулки по центру Иркутска.
Кофейня для короткой остановки в центре: кофе, десерты и спокойный формат между прогулочными + точками.
+Кофейня-кондитерская на 3 Июля: удобна перед входом в 130-й квартал или после прогулки по + нему.
+Городская кофейня в центральной части Иркутска — для завтрака, кофе навынос или небольшой паузы + во время маршрута.
+Четыре понятных варианта для обеда и ужина: грузинская, мясная, японская и авторская европейская кухня.
Грузинская кухня: хачапури, хинкали, мясные блюда и большие застольные позиции. Подходит для плотного обеда или ужина.
Ресторан с акцентом на мясные блюда, стейки и понятную европейскую кухню. Хороший вариант для тех, кто хочет классический ресторанный ужин без привязки к региональной тематике.
Удобная остановка в 130-м квартале для суши, роллов и блюд азиатского направления. Можно включить в финальную часть прогулки по кварталу.
Ресторан в историческом центре с авторской европейской кухней и выразительной подачей. Подходит для более спокойного и торжественного ужина.
Пять вариантов для обеда и ужина: грузинская, мясная, японская и авторская европейская + кухня.
Грузинская кухня: хачапури, хинкали, мясные блюда и большие застольные позиции. Подходит для + плотного обеда или ужина.
+Ресторан с акцентом на мясные блюда, стейки и понятную европейскую кухню. Хороший вариант для + тех, кто хочет классический ресторанный ужин без привязки к региональной тематике.
+Удобная остановка в 130-м квартале для суши, роллов и блюд азиатского направления. Можно включить + в финальную часть прогулки по кварталу.
+Ресторан в историческом центре с авторской европейской кухней и выразительной подачей. Подходит + для более спокойного и торжественного ужина.
+Ресторан кавказской кухни с хинкали, хачапури и блюдами на гриле. В меню также есть европейские + позиции; подходит для сытного обеда или ужина.
+ +Рестораны, где знакомство с регионом продолжается через байкальские, сибирские и локальные продукты.
Современная байкальская кухня с акцентом на продукты и традиции народов Прибайкалья. Авторская подача и локальные продукты делают ресторан отдельным гастрономическим впечатлением.
Демократичный формат с сибирской кухней: пельмени, буузы, мясные блюда, завтраки и сезонные предложения.
Ресторан сибирской кухни в стилистике купеческой усадьбы. В меню — локальные продукты и блюда, которые хорошо завершают прогулку по 130-му кварталу.
Рестораны, где знакомство с регионом продолжается через байкальские, сибирские и локальные продукты.
+Современная байкальская кухня с акцентом на продукты и традиции народов Прибайкалья. Авторская + подача и локальные продукты делают ресторан отдельным гастрономическим впечатлением.
+Демократичный формат с сибирской кухней: пельмени, буузы, мясные блюда, завтраки и сезонные + предложения.
+Ресторан сибирской кухни в стилистике купеческой усадьбы. В меню — локальные продукты и блюда, + которые хорошо завершают прогулку по 130-му кварталу.
+