:root { --full-logo-size-ratio: 25; --full-logo-size: min(24rem, 45vmin); --logo-bg-color: #051c2c60; --logo-shadow-color: #051c2ccc; --logo-fg-color: #242424; --backdrop-filter-logo: blur(20px); --logo-elements-shadow: 2pt 2pt 3pt var(--logo-shadow-color); --logo-font-size: calc(var(--full-logo-size) / var(--full-logo-size-ratio)); --mp-logo: calc(var(--logo-font-size) * .33); --header-logo-size: calc(var(--logo-font-size) * 3); --logo-borders: calc(var(--logo-font-size) / 8) solid var(--logo-fg-color); } .logo_on_cover, .logo_box { text-align: center; font-weight: 400; min-height: 25%; display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; transition: var(--transition-fast); animation: slide_from_bottom 1s ease forwards !important; animation-delay: 2s; margin: auto; } .logo_on_cover, .logo_box { width: -moz-fit-content; width: fit-content; } .logo_on_cover { height: 100%; } .logo_box { height: -moz-fit-content; height: fit-content; } .logo_box span { font-family: var(--ui-font); font-size: calc(var(--logo-font-size) * 1); -webkit-text-stroke-width: none; -webkit-text-stroke-color: none; font-weight: 100 !important; text-transform: uppercase; } .logo_box .tagline { font-size: calc(var(--logo-font-size) * 1); line-height: calc(var(--logo-font-size) * 1); padding: calc(var(--mp-logo) * 2); border-radius: calc(var(--mp-logo) * 1); } .logo_box .page_tagline { font-size: calc(var(--logo-font-size) * 2); padding: calc(var(--mp-logo) * 2); border-radius: calc(var(--mp-logo) * 1); position: relative; font-weight: 300 !important; text-shadow: var(--logo-elements-shadow); word-break: break-all; } .logo_box .logo { filter: drop-shadow(var(--logo-elements-shadow)); } .logo_box .logo, .logo_box .logo path, .logo_box .logo svg { fill: var(--logo-fg-color) !important; stroke: var(--logo-fg-color) !important; stroke-width: 1px; } .logo_full_container_fade, .logo_full_container { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; opacity: 1; margin-top: calc(var(--full-logo-size) / 6); width: var(--full-logo-size); height: var(--full-logo-size); transition: var(--transition-fast); pointer-events: none !important; } .logo_full_container { border-radius: var(--mp-logo); border: calc(var(--logo-font-size) / 6) solid var(--elements-fg-color-flat); box-shadow: var(--box-shadow-soft); } .logo_full_container_fade { position: absolute; } .logo_full_container:hover { } .logo_full_container { fill: var(--elements-fg-color-flat); stroke: var(--elements-fg-color-flat); } .logo_full_container path, .logo_full_container svg { fill: var(--elements-fg-color-flat); stroke: var(--elements-fg-color-flat); } .logo_full { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; flex-direction: column; } .logo_full .logo { margin-bottom: calc(var(--logo-font-size) * 1); overflow: visible; flex: 1; width: calc(var(--full-logo-size) / 2) !important; height: fit-content !important; } div.logo_brand_name span, div.logo_brand_name { padding: calc(var(--mp-logo) * 0); --font-mult: 9.2; font-size: calc(var(--logo-font-size) * var(--font-mult)); line-height: calc(var(--logo-font-size) * (var(--font-mult) * .9)); font-family: var(--logo-font); font-weight: 700 !important; } div.logo_brand_name span { } div.logo_tagline_owner, div.logo_tagline_top, div.logo_tagline_bottom { padding-top: calc(var(--mp-logo) * 0); font-family: var(--logo-font); text-transform: lowercase; } div.logo_tagline_top, div.logo_tagline_bottom { font-size: calc(var(--logo-font-size) * 2.5); font-weight: 500; } div.logo_tagline_top { border-top: var(--logo-borders); border-bottom: var(--logo-borders); margin-bottom: calc(var(--mp-logo) * .75); } div.logo_tagline_owner { border-top: var(--logo-borders); white-space: nowrap !important; word-break: keep-all; font-size: calc(var(--logo-font-size) * 1.20); line-height: calc(var(--logo-font-size) * 2.2); } .logo_tagline_bottom { position: relative; white-space: nowrap !important; word-break: keep-all; font-weight: 300; z-index: 100 !important; display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; padding: calc(var(--mp) * 2); } .header .logo { width: var(--header-logo-size); height: -moz-fit-content; height: fit-content; padding: 0px; margin: 0px; } .header .logo path, .header .logo svg { fill: var(--logo-fg-color) !important; fill: var(--logo-fg-color) !important; stroke: var(--logo-fg-color) !important; } .logo_on_cover * svg, .logo_on_cover * path, .logo_on_cover * { fill: var(--logo-fg-color) !important; stroke: var(--logo-fg-color) !important; } .logo_on_cover .logo_full_container { box-sizing: content-box !important; box-shadow: none !important; opacity: .75; } .logo_on_cover .logo_full_container:hover { opacity: .5; transition: var(--transition-fast); } .logo_on_cover { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .logo_in_menu { display: flex; align-items: center; align-content: center; justify-items: center; justify-content: center; } @media screen and (min-width:721px) { .header_at_bottom .logo_in_cover { opacity: 1 !important; } .logo_in_cover { transition: var(--transition-fast); opacity: 0; height: fit-content !important; margin-bottom: calc(var(--header-bar-height) + var(--footer-page-bottom-stripe-height)); } } @media screen and (max-width:720px) { .logo_box { padding-top: 0px !important; } .logo_in_cover { display: none; } .logo_full_container { border-width: calc(var(--mp-logo) * .25) !important; } .logo_animation_wrapper, .logo_animation_wrapper * { transform-style: preserve-3d !important; } .logo_animation_wrapper { opacity: 0; animation: from_the_abyss; animation-duration: 2s; animation-delay: 0s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; animation-direction: normal; animation-iteration-count: 1; } .logo_full_envelop { padding: calc(var(--mp-logo) * 10) !important; animation: float_on_the_sea; animation-duration: 5s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-direction: alternate; animation-iteration-count: infinite; } .logo_mobile_header { display: flex; align-items: center !important; align-content: center !important; justify-items: center !important; justify-content: center !important; margin-left: calc(var(--mp-logo) * 2); } .logo_on_cover .logo_full_container { background-color: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-color: transparent !important; } .logo_on_cover .logo_full_container_fade { position: absolute; border-radius: 50%; background: var(--elements-bg-color-trans) !important; z-index: 0; border: 4rem solid white !important; transform: translateY(15%) scale(1.25); mix-blend-mode: overlay !important; } .logo_box .logo_tagline_bottom { font-size: 175% !important; } } .logo_box { position: fixed !important; top: 0vmin !important; width: 100%; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; } .logo_box * { color: var(--logo-fg-color); transition: var(--transition-fast); font-weight: 800 !important; letter-spacing: -.15rem; } .logo_box .logo_tagline_bottom, .logo_tagline_bottom { -webkit-text-stroke: 1pt white; } .logo_box .logo_letter_single, .logo_letter_color_single { position:relative; z-index:10; color: inherit !important; transform-origin: 50% 100%; letter-spacing: -25%; border-radius: 50%; margin-left: -.2rem; margin-right: -.2rem; -webkit-text-stroke: 2pt white; } .logo_box .logo_letter_color_first, .logo_letter_color_first { position:relative; display: inline-flex; color: #006ab1 !important; z-index:100; transform-origin: 50% 100%; } .logo_box .logo_letter_color_last, .logo_letter_color_last { display: inline-flex; color: #363636; } .logo_box .logo_letter_zoom, .logo_letter_zoom { position:relative; display: inline-flex; color: #cc0000 !important; transition: var(--transition-slow); transform-origin: 50% 90%; transform: scale(1); z-index: -1 !important; font-size: 135%; } .logo_box .ycircle { display: inline-flex; border-radius: 50%; border: 2pt solid white; background-color: rgb(255, 153, 0); box-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; position: absolute; color: transparent; z-index: -1 !important; font-size: 100%; height:100%; width:100%; transform-origin:50% 100%; } .logo_box .logo_tagline_bottom:hover, .logo_tagline_bottom:hover, .logo_box .logo_letter_single:hover, .logo_letter_color_single:hover { animation: bounce_local; animation-duration: .33s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-direction: alternate; animation-iteration-count: infinite; } .logo_box:hover .logo_letter_zoom { animation: smash_and_jump; animation-duration: .6s; animation-timing-function: ease-in-out; animation-fill-mode: both; animation-direction: alternate; animation-iteration-count: infinite; z-Index: 1000 !important; } .vanish_logo { } .vanish_logo_add { }