diff --git a/assets/site.css b/assets/site.css index 33174f4..ca12a51 100644 --- a/assets/site.css +++ b/assets/site.css @@ -4067,7 +4067,7 @@ body.menu-open{overflow:hidden} to{opacity:1} } @media(prefers-reduced-motion:reduce){ - .baikal-header .hero-copy,.baikal-brand{animation:none} + .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} } @@ -4083,7 +4083,16 @@ body.menu-open{overflow:hidden} top:50%!important; max-width:calc(100% - 96px)!important; transform:translate(-50%,-50%)!important; - animation:brandCenteredIn .55s ease-out .08s both!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 span{ + will-change:opacity,transform; + animation:logoTextIn .7s cubic-bezier(.16,1,.3,1) .24s both; } .menu-toggle{ position:absolute!important; @@ -4093,9 +4102,17 @@ body.menu-open{overflow:hidden} transform:translateY(-50%)!important; } @keyframes brandCenteredIn{ - from{opacity:0;transform:translate(-50%,calc(-50% - 10px))} + 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 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}