62 lines
1.4 KiB
SCSS
62 lines
1.4 KiB
SCSS
@use 'variables' as *;
|
|
|
|
// Responsive helper
|
|
@mixin respond($bp) {
|
|
@if $bp == sm { @media (max-width: #{$bp-sm}) { @content; } }
|
|
@if $bp == md { @media (max-width: #{$bp-md}) { @content; } }
|
|
@if $bp == lg { @media (max-width: #{$bp-lg}) { @content; } }
|
|
@if $bp == xl { @media (max-width: #{$bp-xl}) { @content; } }
|
|
}
|
|
|
|
// Accent underline on links / headings
|
|
@mixin accent-underline($height: 2px) {
|
|
position: relative;
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: -3px; left: 0;
|
|
width: 100%; height: $height;
|
|
background: var(--accent);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.3s ease;
|
|
border-radius: 999px;
|
|
}
|
|
&:hover::after, &.active::after { transform: scaleX(1); }
|
|
}
|
|
|
|
// Frosted glass (dark)
|
|
@mixin glass($alpha: 0.9) {
|
|
background: rgba(26, 29, 33, $alpha);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
}
|
|
|
|
// Container
|
|
@mixin container {
|
|
width: 100%;
|
|
max-width: 1100px;
|
|
margin-inline: auto;
|
|
padding-inline: clamp(1rem, 5vw, 2.5rem);
|
|
}
|
|
|
|
// Section spacing (responsive)
|
|
@mixin section {
|
|
padding-block: clamp(3rem, 8vw, 6rem);
|
|
}
|
|
|
|
// Flex center
|
|
@mixin flex-center {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
// Card base
|
|
@mixin card {
|
|
background: var(--bg);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-lg);
|
|
transition: border-color var(--transition), transform var(--transition);
|
|
}
|