Оптимизировать изображения и загрузку страницы
This commit is contained in:
+242
-4
@@ -1,6 +1,6 @@
|
||||
: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.png) center/cover no-repeat;position:relative;display:flex;align-items:center;overflow:hidden}
|
||||
.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}
|
||||
@@ -34,7 +34,7 @@
|
||||
|
||||
/* 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.jpg);background-size:cover;background-position:center center;background-repeat:no-repeat;filter:saturate(.93) contrast(1.02)}
|
||||
.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}
|
||||
@@ -49,7 +49,7 @@
|
||||
.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.jpg);background-position:center 42%}
|
||||
.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)}
|
||||
@@ -2043,6 +2043,32 @@ body{position:relative}
|
||||
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}
|
||||
|
||||
/* Читаемая шапка: навигация не должна выглядеть как подпись к логотипу. */
|
||||
.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}
|
||||
}
|
||||
|
||||
@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);
|
||||
@@ -3385,7 +3411,7 @@ body{position:relative}
|
||||
}
|
||||
.v25-scene-art{
|
||||
position:absolute;z-index:1;left:31%;right:-2%;top:94px;bottom:175px;
|
||||
background-image:url("images/image-b99c51de35dc.png");
|
||||
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;
|
||||
@@ -3405,6 +3431,40 @@ body{position:relative}
|
||||
.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-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: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}
|
||||
@@ -3817,25 +3877,203 @@ html,body{
|
||||
}
|
||||
.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(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: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}
|
||||
.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{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{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;
|
||||
}
|
||||
|
||||
/* На мобильных вводный текст центрируется в свободной части 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;
|
||||
}
|
||||
}
|
||||
|
||||
/* Лёгкая анимация и плавное появление контента без сторонних библиотек. */
|
||||
.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:transform .35s ease,box-shadow .35s ease;
|
||||
}
|
||||
.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{animation:none}
|
||||
.reveal{opacity:1;transform:none;transition:none}
|
||||
.arch-card,.restaurant-card,.museum-card{transition:none}
|
||||
}
|
||||
.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}
|
||||
|
||||
Reference in New Issue
Block a user