133 lines
2.4 KiB
SCSS
133 lines
2.4 KiB
SCSS
|
*,
|
||
|
|
*::before,
|
||
|
|
*::after {
|
||
|
|
box-sizing: border-box;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
font-size: 14px;
|
||
|
|
line-height: 1.6;
|
||
|
|
scroll-behavior: smooth;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
font-family: $font-ui;
|
||
|
|
background: var(--bg-primary);
|
||
|
|
color: var(--text-primary);
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
|
||
|
|
a {
|
||
|
|
color: var(--accent-primary);
|
||
|
|
text-decoration: none;
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
color: var(--accent-hover);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
font-family: $font-code;
|
||
|
|
background: var(--code-bg);
|
||
|
|
padding: 2px 6px;
|
||
|
|
border-radius: $radius-sm;
|
||
|
|
font-size: 0.9em;
|
||
|
|
}
|
||
|
|
|
||
|
|
pre {
|
||
|
|
code {
|
||
|
|
display: block;
|
||
|
|
padding: 16px;
|
||
|
|
border-radius: $radius-md;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.section {
|
||
|
|
max-width: 1120px;
|
||
|
|
margin: 0 auto;
|
||
|
|
padding: 80px 24px;
|
||
|
|
|
||
|
|
@media (max-width: $breakpoint-mobile) {
|
||
|
|
padding: 48px 16px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-title {
|
||
|
|
font-size: 32px;
|
||
|
|
font-weight: 700;
|
||
|
|
text-align: center;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
color: var(--text-primary);
|
||
|
|
|
||
|
|
@media (max-width: $breakpoint-mobile) {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.section-desc {
|
||
|
|
text-align: center;
|
||
|
|
color: var(--text-secondary);
|
||
|
|
font-size: 16px;
|
||
|
|
max-width: 640px;
|
||
|
|
margin: 0 auto 48px;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ─── Scroll reveal animations ────────────────────────────
|
||
|
|
|
||
|
|
.reveal {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(24px);
|
||
|
|
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
|
|
|
||
|
|
&.revealed {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.reveal-delay-1 { transition-delay: 0.08s; }
|
||
|
|
.reveal-delay-2 { transition-delay: 0.16s; }
|
||
|
|
.reveal-delay-3 { transition-delay: 0.24s; }
|
||
|
|
.reveal-delay-4 { transition-delay: 0.32s; }
|
||
|
|
|
||
|
|
// ─── Keyframes ────────────────────────────────────────────
|
||
|
|
|
||
|
|
@keyframes fade-in-up {
|
||
|
|
from {
|
||
|
|
opacity: 0;
|
||
|
|
transform: translateY(32px);
|
||
|
|
}
|
||
|
|
to {
|
||
|
|
opacity: 1;
|
||
|
|
transform: translateY(0);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes fade-in {
|
||
|
|
from { opacity: 0; }
|
||
|
|
to { opacity: 1; }
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes pulse-border {
|
||
|
|
0%, 100% { border-color: var(--border-color); }
|
||
|
|
50% { border-color: var(--text-muted); }
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-fade-in-up {
|
||
|
|
animation: fade-in-up 0.7s ease both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-fade-in {
|
||
|
|
animation: fade-in 0.5s ease both;
|
||
|
|
}
|
||
|
|
|
||
|
|
.animate-delay-1 { animation-delay: 0.1s; }
|
||
|
|
.animate-delay-2 { animation-delay: 0.2s; }
|
||
|
|
.animate-delay-3 { animation-delay: 0.3s; }
|
||
|
|
.animate-delay-4 { animation-delay: 0.4s; }
|
||
|
|
.animate-delay-5 { animation-delay: 0.5s; }
|