70 lines
1.5 KiB
SCSS
70 lines
1.5 KiB
SCSS
@use 'variables' as v;
|
|
@use 'mixins';
|
|
@use 'typography';
|
|
@use 'animations';
|
|
|
|
:root {
|
|
--bg: #{v.$color-bg};
|
|
--bg-2: #{v.$color-bg-2};
|
|
--bg-3: #{v.$color-bg-3};
|
|
--border: #{v.$color-border};
|
|
--border-light: #{v.$color-border-light};
|
|
--text: #{v.$color-text};
|
|
--text-2: #{v.$color-text-2};
|
|
--text-3: #{v.$color-text-3};
|
|
--accent: #{v.$color-accent};
|
|
--accent-dark: #{v.$color-accent-dark};
|
|
--accent-alpha: #{v.$color-accent-alpha};
|
|
--radius: 8px;
|
|
--radius-lg: 14px;
|
|
--transition: 0.25s ease;
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
font-size: clamp(15px, 2vw, 16px);
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
body {
|
|
font-family: var(--font-body, 'DM Sans', sans-serif);
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.7;
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow-x: hidden;
|
|
min-width: 0;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--accent-alpha);
|
|
color: var(--accent-dark);
|
|
}
|
|
|
|
a { color: inherit; text-decoration: none; }
|
|
|
|
img, video { max-width: 100%; display: block; }
|
|
|
|
button { cursor: pointer; font: inherit; }
|
|
|
|
.skipLink {
|
|
position: absolute;
|
|
top: -100px;
|
|
left: 0.5rem;
|
|
z-index: 9999;
|
|
padding: 0.5rem 1rem;
|
|
background: var(--accent);
|
|
color: #fff;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
border-radius: var(--radius);
|
|
transition: top 0.2s ease;
|
|
}
|
|
.skipLink:focus {
|
|
top: 0.5rem;
|
|
outline: 2px solid var(--text);
|
|
outline-offset: 2px;
|
|
}
|