107 lines
3.3 KiB
SCSS
107 lines
3.3 KiB
SCSS
@use './variables' as *;
|
|
|
|
// ========== Reusable SCSS mixins for layout and styling ==========
|
|
|
|
@mixin flex-center {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
@mixin flex-between {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
@mixin gradient-text($from: $accent-orange, $to: $accent-orange-light) {
|
|
background: linear-gradient(135deg, $from, $to);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
@mixin card-style {
|
|
background: $neutral-white;
|
|
border-radius: $radius-lg;
|
|
box-shadow: $shadow-md;
|
|
transition: transform $transition-normal, box-shadow $transition-normal;
|
|
|
|
&:hover {
|
|
transform: translateY(-2px);
|
|
box-shadow: $shadow-lg;
|
|
}
|
|
}
|
|
|
|
@mixin section-padding($top: $spacing-3xl, $bottom: $spacing-3xl) {
|
|
padding-top: $top;
|
|
padding-bottom: $bottom;
|
|
}
|
|
|
|
@mixin responsive($breakpoint) {
|
|
@if $breakpoint == sm { @media (max-width: ($bp-sm - 1px)) { @content; } }
|
|
@if $breakpoint == md { @media (max-width: ($bp-md - 1px)) { @content; } }
|
|
@if $breakpoint == lg { @media (max-width: ($bp-lg - 1px)) { @content; } }
|
|
@if $breakpoint == xl { @media (max-width: ($bp-xl - 1px)) { @content; } }
|
|
}
|
|
|
|
@mixin button-style($bg: $accent-orange, $text: $neutral-white, $hover-bg: $accent-orange-dark) {
|
|
background: $bg;
|
|
color: $text;
|
|
border: none;
|
|
border-radius: $radius-md;
|
|
padding: $spacing-sm $spacing-lg;
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: background $transition-fast, transform $transition-fast;
|
|
|
|
&:hover {
|
|
background: $hover-bg;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
&:active {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@mixin mountain-divider($color: $primary-blue, $height: 80px) {
|
|
content: '';
|
|
display: block;
|
|
width: 100%;
|
|
height: $height;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%231a3a5c' fill-opacity='1' d='M0,224L48,213.3C96,203,192,181,288,181.3C384,181,480,203,576,218.7C672,235,768,245,864,234.7C960,224,1056,192,1152,186.7C1248,181,1344,203,1392,213.3L1440,224L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'%3E%3C/path%3E%3C/svg%3E") no-repeat center bottom;
|
|
background-size: cover;
|
|
margin-top: -$height;
|
|
}
|
|
|
|
@mixin flowery-border($color: $accent-orange) {
|
|
position: relative;
|
|
|
|
&::after {
|
|
content: '';
|
|
display: block;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin: $spacing-md auto 0;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='35' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='35' cy='50' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='65' cy='50' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='40' cy='62' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='60' cy='62' r='12' fill='%23e87a2e'/%3E%3Ccircle cx='50' cy='50' r='8' fill='%23f0a86a'/%3E%3C/svg%3E") no-repeat center;
|
|
background-size: contain;
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
|
|
@mixin fade-in {
|
|
animation: fadeIn 0.6s ease-in;
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
@keyframes float {
|
|
0%, 100% { transform: translateY(0); }
|
|
50% { transform: translateY(-8px); }
|
|
}
|