@font-face { font-family: 'TT Norms'; src: url('/assets/fonts/TTNorms-Regular.woff2') format('woff2'), url('/assets/fonts/TTNorms-Regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'TT Norms'; src: url('/assets/fonts/TTNorms-Bold.woff2') format('woff2'), url('/assets/fonts/TTNorms-Bold.woff') format('woff'); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-display: 'Unbounded', 'TT Norms', sans-serif; } .talents__item-wrapper { position: relative; } .talents__item-photo { top: 50% !important; } .gl-catalog__card-title-mark { align-self: flex-start; } .gl-catalog__card-title-marks { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; align-self: flex-start; max-width: 50%; } .footer__social-link-wrapper + .footer__social-link-wrapper::before { content: '·'; padding: 1rem 0; color: rgba(250, 250, 250, 0.5); } .gl-catalog__card-title-wrapper.no-content { display: none; } .gl-catalog__card-title-text { color: white; } .header__control.mod-no-active, .header__control.no-hover, .header__control:not(.mod-active) { opacity: 1; } .header__sort-btn { opacity: 1; } .header__logo { width: 100%; height: auto; } .header__contacts-row { display: flex; align-items: flex-start; } .talents { overflow: visible !important; } html, body { background-color: #000; } #site-main { display: flex; flex-direction: column; flex: 1 0 auto; width: 100%; min-height: 100vh; background-color: transparent; position: relative; z-index: 1; } .layout-wrapper { overflow: hidden !important; position: relative; z-index: 1; background: transparent !important; background-color: transparent !important; } /* Shared starfield: fixed to viewport on — never a flex child of body */ #starfield-root { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; z-index: 0 !important; pointer-events: none !important; overflow: hidden !important; display: block !important; transform: translateZ(0); -webkit-transform: translateZ(0); } /* If anything still injects into body flex, take zero flex space */ body > #starfield-root, body > #starfield-canvas { position: fixed !important; flex: 0 0 0 !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 0 !important; width: 100% !important; height: 0 !important; min-height: 0 !important; max-height: 0 !important; overflow: visible !important; align-self: flex-start !important; order: -9999 !important; } #starfield-root .starfield, #starfield-canvas.starfield { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; pointer-events: none !important; z-index: 0 !important; max-width: none !important; max-height: none !important; } body.mod-starfield { background: #000 !important; } /* Content above stars; keep theme black fill transparent so stars show through */ body.mod-starfield #site-main, body.mod-starfield .layout-wrapper { position: relative; z-index: 1; background: transparent !important; background-color: transparent !important; } body.mod-starfield .layout-content, body.mod-starfield .footer { position: relative; z-index: 1; } body.mod-starfield .header { position: relative; z-index: 20; pointer-events: auto; } body.mod-starfield .header a, body.mod-starfield .header button { pointer-events: auto; } body:not([data-layout="admin"]) .footer:empty { display: none; } /* Return-to-logo control */ .logo-return-btn { position: fixed; right: max(1.6rem, env(safe-area-inset-right)); bottom: max(1.6rem, env(safe-area-inset-bottom)); z-index: 2147483001 !important; border: 1px solid rgba(255, 255, 255, 0.28); background: rgba(0, 0, 0, 0.45); color: rgba(255, 255, 255, 0.75); padding: 0.85rem 1.1rem; font-family: 'TT Norms', sans-serif; font-size: 1.1rem; letter-spacing: 0.22em; line-height: 1; cursor: pointer; backdrop-filter: blur(8px); transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease, opacity 0.3s ease; } .logo-return-btn:hover, .logo-return-btn:focus-visible { color: #fff; border-color: rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.65); outline: none; } body.mod-splash-active .logo-return-btn, body.mod-logo-returning .logo-return-btn { opacity: 0; pointer-events: none; } .logo-return-overlay { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 2147483000 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; transform: translateZ(0); -webkit-transform: translateZ(0); } .logo-return-canvas { display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; } #site-main.mod-return-hide, .layout-wrapper.mod-return-hide { opacity: 0 !important; transition: opacity 0.55s cubic-bezier(0.33, 0, 0.2, 1); pointer-events: none; } /* Soft crossfade to services bg when assembling logo off the home page */ .logo-return-bg-fade { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; z-index: 2147482990 !important; pointer-events: none !important; margin: 0 !important; padding: 0 !important; background-color: #0a0a0a; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.7s cubic-bezier(0.33, 0, 0.2, 1); transform: translateZ(0); -webkit-transform: translateZ(0); } .logo-return-bg-fade.mod-visible { opacity: 1; } /* Was solid black — too abrupt vs other page photos; keep hold transparent */ .logo-return-overlay.mod-handoff-hold { background: transparent; } html.splash-boot, html.splash-boot body { background: transparent !important; } /* Keep page background layer visible under splash logo */ html.splash-boot body::before { opacity: 1 !important; } html.splash-boot body > *:not(#splash):not(#starfield-root):not(#starfield-canvas):not(.logo-return-overlay) { opacity: 0 !important; pointer-events: none !important; } html.splash-boot #splash { opacity: 1 !important; visibility: visible !important; } @media screen and (max-width: 640px) { .header { position: relative; } .header__contacts-row { display: flex; flex-direction: column; align-items: stretch; } .header__menu-wrapper { flex-direction: column; } .header__menu-wrapper.mod-show { max-height: 23rem; } }