DataScope26/WEB

1/* ─── HEADER ────────────────────────────────────────────────────────────────── */2 3.header {4    position: fixed;5    top: 0;6    z-index: 100;7    width: 100%;8    height: var(--header-h);9    background: var(--surface-2);10    border-bottom: 0.1875rem solid var(--green);11    display: grid;12    grid-template-columns: auto 1fr auto;13    align-items: center;14    gap: 1.5rem;15    padding: 0 3rem;16    transition: box-shadow 0.3s, height 0.25s ease;17}18 19.header--scrolled {20    box-shadow: 0 0.25rem 1.5rem rgba(0, 0, 0, 0.5);21}22 23.header__logo {24    height: 4.375rem;25    object-fit: contain;26}27 28.header__logo-text {29    font-family: 'Space Grotesk', sans-serif;30    font-size: 1.375rem;31    font-weight: 700;32    color: var(--green);33    letter-spacing: -0.03em;34}35 36.header nav {37    display: flex;38    justify-content: center;39    align-items: center;40}41 42.header__nav {43    display: flex;44    gap: 3rem;45    list-style: none;46    margin: 0;47    padding: 0;48    justify-content: center;49    align-items: center;50}51 52.header__nav a {53    font-family: 'Roboto', sans-serif;54    font-size: 1.25rem;55    font-weight: 500;56    color: var(--green);57    text-decoration: none;58    letter-spacing: -0.02em;59    transition: opacity 0.2s;60    position: relative;61    padding-bottom: 0.375rem;62}63 64.header__nav a:hover {65    opacity: 0.65;66}67 68.header__nav a::after {69    content: "";70    position: absolute;71    left: 50%;72    transform: translateX(-50%);73    transform-origin: center;74    bottom: 0;75    height: 8%;76    width: 60%;77    background: var(--green);78    opacity: 0;79    transition: transform 320ms cubic-bezier(.2, .9, .2, 1), opacity 220ms ease, width 320ms ease;80}81 82.header__nav a.header__nav-active {83    font-weight: 700;84    color: var(--green);85}86 87.header__nav a.header__nav-active::after {88    transform: translateX(-50%);89    opacity: 1;90    width: 100%;91}92 93.header__profile-link {94    display: inline-flex;95    align-items: center;96    justify-content: flex-start;97    gap: 0.75rem;98    text-decoration: none;99}100 101.header__profile-menu-container {102    position: relative;103    display: inline-flex;104    align-items: center;105    flex-direction: column;106    z-index: 1000;107}108 109.header__profile-img {110    width: 2.875rem;111    height: 2.875rem;112    border-radius: 50%;113    object-fit: cover;114}115 116.header__profile-text {117    margin: 0;118    font-size: 1.125rem;119    font-weight: 600;120    color: var(--green);121    max-width: 10rem;122    overflow: hidden;123    text-overflow: ellipsis;124    font-family: 'Roboto', 'Space Grotesk', sans-serif;125}126 127.header__profile-menu {128    display: none;129    position: absolute;130    top: calc(100% + 0.5rem);131    left: 50%;132    transform: translateX(-50%) translateY(-15%);133    background: var(--surface-2, #ffffff);134    border: 0.0625rem solid rgba(0, 0, 0, 0.12);135    border-radius: 0.75rem;136    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.12);137    padding: 0.625rem;138    min-width: 10rem;139    z-index: 999;140    text-align: center;141}142 143.header__profile-menu-container:hover .header__profile-menu {144    display: block;145}146 147.header__profile-menu-button {148    padding: 6% 0;149    border-radius: 5rem;150}151 152.header__nav-active {153    font-weight: 700;154    color: var(--green);155    padding-bottom: 0.125rem;156    border-bottom: none;157}158 159.header__actions {160    display: inline-flex;161    align-items: center;162    flex-direction: row-reverse;163    gap: 1.375rem;164    margin-left: auto;165}166 167.header__mail-link {168    display: inline-flex;169    align-items: center;170    justify-content: center;171    width: 2.1875rem;172    height: 2.1875rem;173    border-radius: 50%;174    background: transparent;175    border: 0.125rem solid transparent;176    transition: background 0.2s, border-color 0.2s, transform 0.15s;177}178 179.header__mail-link:hover {180    background: rgba(46, 232, 138, 0.15);181}182 183.header__mail-link--active {184    background: rgba(46, 232, 138, 0.15);185    border-color: var(--green);186}187 188.header__auth-actions {189    display: flex;190    align-items: center;191    justify-content: center;192    gap: 0.875rem;193    margin-left: auto;194}195 196.btn--login {197  padding: 0.625rem 1.75rem;198  font-size: 1.125rem;199}200 201.btn--waitlist {202  padding: 0.625rem 1.25rem;203  font-size: 0.9375rem;204  border: 0.0625rem solid var(--green);205  background: transparent;206}207 208@media (max-width: 48rem) {209    .header {210        padding: 0 1.25rem;211    }212 213    .header__nav {214        display: none;215    }216 217    .header__logo {218        height: 2.625rem;219    }220 221    .header__actions {222        gap: 0.75rem;223    }224 225    .header__profile-img {226        width: 2.25rem;227        height: 2.25rem;228    }229 230    .header__profile-text {231        display: none;232    }233 234    .header__mail-link {235        width: 1.875rem;236        height: 1.875rem;237    }238 239    .btn--login {240        padding: 0.5rem 1.125rem;241        font-size: 0.9375rem;242    }243 244    .btn--waitlist {245        padding: 0.5rem 0.875rem;246        font-size: 0.8125rem;247    }248 249    .header__profile-menu {250        min-width: 8.75rem;251        padding: 0.5rem;252    }253 254    .header__profile-menu-button {255        font-size: 0.875rem;256        padding: 0.625rem 0;257    }258}259 260@media (max-width: 25rem) {261    .header {262        padding: 0 0.75rem;263    }264 265    .header__logo {266        height: 2.25rem;267    }268 269    .header__auth-actions {270        gap: 0.5rem;271    }272 273    .btn--waitlist {274        padding: 0.4375rem 0.625rem;275        font-size: 0.6875rem;276    }277}