138 lines
2.6 KiB
SCSS
138 lines
2.6 KiB
SCSS
html {
|
|
font: #{$base-font-size}/1.2 $font-sans;
|
|
font-weight: 400;
|
|
color: #fff;
|
|
min-width: 320px;
|
|
word-break: normal;
|
|
|
|
&.block-scroll {
|
|
overflow: hidden;
|
|
}
|
|
}
|
|
body {
|
|
@include font-smooth;
|
|
background: $color-primary;
|
|
color: #fff;
|
|
cursor: default;
|
|
overflow-x: hidden;
|
|
overscroll-behavior: none;
|
|
|
|
&.is-loading * {
|
|
cursor: wait !important;
|
|
}
|
|
}
|
|
*, *:before, *:after {
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
strong {
|
|
font-weight: 600;
|
|
}
|
|
em {
|
|
font-style: normal;
|
|
}
|
|
figure, p, dl, dt, dd, ul, ol, li {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
figure, picture {
|
|
display: block;
|
|
}
|
|
nav li:before {
|
|
display: none;
|
|
}
|
|
label {
|
|
cursor: pointer;
|
|
}
|
|
button {
|
|
background: none;
|
|
border: none;
|
|
cursor: pointer;
|
|
|
|
&:global([disabled]) {
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
|
|
// Scrollbar
|
|
html {
|
|
scrollbar-width: thin;
|
|
scrollbar-color: rgba($color-tertiary, 0.6) $color-primary-darker;
|
|
}
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
::-webkit-scrollbar-track {
|
|
background: $color-primary-darker;
|
|
}
|
|
::-webkit-scrollbar-thumb {
|
|
background: rgba($color-tertiary, 0.6);
|
|
border: 4px solid $color-primary-darker;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
// Accessibility outline
|
|
// Remove default focus styles for mouse users if :focus-visible is supported
|
|
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
|
|
outline: none;
|
|
}
|
|
[data-focus-visible-added], *:focus-visible {
|
|
outline: 1px dashed $color-secondary;
|
|
}
|
|
input[type="text"], input[type="email"], input[type="password"] {
|
|
outline: none;
|
|
}
|
|
|
|
// Selection
|
|
::selection { color: #fff; background: $color-secondary; }
|
|
::-moz-selection { color: #fff; background: $color-secondary; }
|
|
|
|
// Images glitches fix
|
|
// img {backface-visibility: hidden;}
|
|
|
|
|
|
|
|
/* Titles
|
|
========================================================================== */
|
|
#{headings(1,6)} {
|
|
margin: 0;
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
|
|
/* Global elements
|
|
========================================================================== */
|
|
// Split text elements
|
|
.word, .char {
|
|
display: inline-block;
|
|
transform-style: preserve-3d;
|
|
will-change: transform;
|
|
}
|
|
.text-split {
|
|
span, &__line {
|
|
display: inline-block;
|
|
transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
|
|
}
|
|
}
|
|
|
|
// Mask for animations
|
|
.mask {
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
// Page loading overlay
|
|
.page-loading {
|
|
position: fixed;
|
|
z-index: 2000;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
cursor: wait;
|
|
} |