/*
  Global Tilda header/footer restyle for maksimarkatov.com

  Intended for the existing Tilda blocks:
  - Header: T456 / #t-header / .t456
  - Footer: T345 / #t-footer / .t345

  Paste into Tilda Site Settings -> More -> HTML code for HEAD -> CSS,
  or into the project/page custom CSS area.
*/

:root {
  --ma-ui-text: rgba(232, 227, 219, 0.78);
  --ma-ui-muted: rgba(232, 227, 219, 0.54);
  --ma-ui-dim: rgba(232, 227, 219, 0.4);
  --ma-ui-line: rgba(232, 227, 219, 0.07);
  --ma-black: #050505;
  --ma-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html {
  background: var(--ma-black);
}

body.t-body {
  background: var(--ma-black) !important;
  color: var(--ma-ui-text);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Header */

#t-header {
  position: relative;
  z-index: 9999;
}

#t-header .t456 {
  height: 72px !important;
  background:
    linear-gradient(
      to bottom,
      rgba(10, 10, 10, 0.62),
      rgba(5, 5, 5, 0.26) 48%,
      rgba(5, 5, 5, 0)
    ) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: blur(12px) saturate(112%) contrast(1.02);
  backdrop-filter: blur(12px) saturate(112%) contrast(1.02);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 100%);
}

#t-header .t456__maincontainer {
  height: 72px !important;
  padding: 0 clamp(18px, 2.4vw, 34px) !important;
}

#t-header .t456__leftwrapper {
  padding-left: 0 !important;
}

#t-header .t456__rightwrapper {
  padding-right: 0 !important;
}

#t-header .t456__logowrapper,
#t-header .t456__logowrapper a,
#t-header .t456__logo,
#t-header .t456__logo * {
  color: var(--ma-ui-text) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-weight: 200 !important;
  letter-spacing: 0.05em !important;
}

#t-header .t456__logo {
  text-transform: uppercase;
}

#t-header .t456__logo br {
  display: block;
}

#t-header .t456__list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 34px);
}

#t-header .t456__list_item {
  padding: 0 !important;
}

#t-header a.t-menu__link-item {
  color: var(--ma-ui-muted) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 11px !important;
  font-weight: 300 !important;
  letter-spacing: 0.13em !important;
  line-height: 1 !important;
  text-transform: uppercase;
  opacity: 0.76;
  transition: opacity 700ms var(--ma-ease), color 700ms var(--ma-ease) !important;
}

#t-header a.t-menu__link-item:hover,
#t-header a.t-menu__link-item:focus-visible,
#t-header a.t-menu__link-item.t-active {
  color: var(--ma-ui-text) !important;
  opacity: 1;
}

/* Footer */

#t-footer {
  position: fixed !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9998 !important;
}

#t-footer .t-rec,
#t-footer .t345 {
  background:
    linear-gradient(to top, rgba(12, 12, 12, 0.72), rgba(5, 5, 5, 0.42)),
    rgba(5, 5, 5, 0.38) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) contrast(1.04);
  backdrop-filter: blur(18px) saturate(118%) contrast(1.04);
}

#t-footer .t345-wrapper {
  border-top: 1px solid var(--ma-ui-line) !important;
}

#t-footer .t345-container {
  max-width: none !important;
  width: 100% !important;
  padding: 0 clamp(18px, 2.4vw, 34px) !important;
}

#t-footer .t345-content {
  min-height: 64px !important;
  height: 64px !important;
}

#t-footer .t345-text,
#t-footer .t345-text *,
#t-footer .t-sociallinks__item a {
  color: rgba(232, 227, 219, 0.5) !important;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 10px !important;
  font-weight: 300 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase;
}

#t-footer .t-sociallinks__wrapper {
  display: flex !important;
  align-items: center;
  gap: clamp(18px, 3vw, 42px);
}

#t-footer .t-sociallinks__item {
  margin: 0 !important;
}

#t-footer .t-sociallinks__item a {
  width: auto !important;
  height: auto !important;
  opacity: 0.82;
  transition: opacity 700ms var(--ma-ease), color 700ms var(--ma-ease) !important;
}

#t-footer .t-sociallinks__item a:hover,
#t-footer .t-sociallinks__item a:focus-visible {
  color: var(--ma-ui-text) !important;
  opacity: 1;
}

#t-footer .t-sociallinks__svg {
  width: 18px !important;
  height: 18px !important;
  opacity: 0.82;
}

#t-footer .t-sociallinks__svg path {
  fill: rgba(232, 227, 219, 0.62) !important;
}

body {
  padding-bottom: 80px !important;
}

@media screen and (max-width: 980px) {
  #t-header .t456 {
    height: auto !important;
    
    /* Paste at the end of Tilda custom CSS if the footer looks too solid. */

.site-footer,
.ma-global-footer,
#t-footer .t-rec,
#t-footer .t345 {
  border-top-color: rgba(232, 227, 219, 0.045) !important;
  background:
    linear-gradient(to top, rgba(12, 12, 12, 0.48), rgba(5, 5, 5, 0.16) 72%, rgba(5, 5, 5, 0.02)),
    rgba(5, 5, 5, 0.12) !important;
  -webkit-backdrop-filter: blur(18px) saturate(118%) contrast(1.04) !important;
  backdrop-filter: blur(18px) saturate(118%) contrast(1.04) !important;
}