generated from eddie/corp_base
Initial commit
This commit is contained in:
6792
rss/css/main.css
Normal file
6792
rss/css/main.css
Normal file
File diff suppressed because it is too large
Load Diff
1
rss/css/main.css.map
Normal file
1
rss/css/main.css.map
Normal file
File diff suppressed because one or more lines are too long
873
rss/css/main.scss
Normal file
873
rss/css/main.scss
Normal file
@@ -0,0 +1,873 @@
|
||||
@import 'variables';
|
||||
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Reset + Base */
|
||||
/* ========================================================================== */
|
||||
*,
|
||||
*::before,
|
||||
*::after { margin: 0; padding: 0; box-sizing: border-box; }
|
||||
|
||||
html, body { height: 100%; }
|
||||
|
||||
body {
|
||||
font-family: $font-family-base;
|
||||
font-size: map-get($font-sizes, base);
|
||||
line-height: map-get($line-heights, normal);
|
||||
color: map-get($colors, dark);
|
||||
background: map-get($colors, white);
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Typography Utilities */
|
||||
/* ========================================================================== */
|
||||
@each $k, $v in $font-sizes { .text-#{$k} { font-size: $v; } }
|
||||
@each $k, $v in $font-weights { .fw-#{$k} { font-weight: $v; } }
|
||||
@each $k, $v in $line-heights { .lh-#{$k} { line-height: $v; } }
|
||||
|
||||
.text-left { text-align: left; }
|
||||
.text-center { text-align: center; }
|
||||
.text-right { text-align: right; }
|
||||
.text-uppercase { text-transform: uppercase; }
|
||||
.text-lowercase { text-transform: lowercase; }
|
||||
.text-capitalize { text-transform: capitalize; }
|
||||
.text-underline { text-decoration: underline; }
|
||||
.text-line-through { text-decoration: line-through; }
|
||||
.text-no-decoration { text-decoration: none; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Color Utilities */
|
||||
/* ========================================================================== */
|
||||
@each $name, $color in $colors {
|
||||
.text-#{$name} { color: $color !important; }
|
||||
.bg-#{$name} { background-color: $color !important; }
|
||||
.border-#{$name} { border-color: $color !important; }
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Spacing Utilities (Margin / Padding) */
|
||||
/* ========================================================================== */
|
||||
@each $k, $v in $space {
|
||||
.m-#{$k} { margin: $v !important; }
|
||||
.mt-#{$k} { margin-top: $v !important; }
|
||||
.mr-#{$k} { margin-right: $v !important; }
|
||||
.mb-#{$k} { margin-bottom: $v !important; }
|
||||
.ml-#{$k} { margin-left: $v !important; }
|
||||
.mx-#{$k} { margin-left: $v !important; margin-right: $v !important; }
|
||||
.my-#{$k} { margin-top: $v !important; margin-bottom: $v !important; }
|
||||
|
||||
.p-#{$k} { padding: $v !important; }
|
||||
.pt-#{$k} { padding-top: $v !important; }
|
||||
.pr-#{$k} { padding-right: $v !important; }
|
||||
.pb-#{$k} { padding-bottom: $v !important; }
|
||||
.pl-#{$k} { padding-left: $v !important; }
|
||||
.px-#{$k} { padding-left: $v !important; padding-right: $v !important; }
|
||||
.py-#{$k} { padding-top: $v !important; padding-bottom: $v !important; }
|
||||
}
|
||||
|
||||
/* Responsive spacing */
|
||||
@each $bp, $w in $breakpoints {
|
||||
@media (min-width: $w) {
|
||||
@each $k, $v in $space {
|
||||
.#{$bp}-m-#{$k} { margin: $v !important; }
|
||||
.#{$bp}-mt-#{$k} { margin-top: $v !important; }
|
||||
.#{$bp}-mr-#{$k} { margin-right: $v !important; }
|
||||
.#{$bp}-mb-#{$k} { margin-bottom: $v !important; }
|
||||
.#{$bp}-ml-#{$k} { margin-left: $v !important; }
|
||||
.#{$bp}-mx-#{$k} { margin-left: $v !important; margin-right: $v !important; }
|
||||
.#{$bp}-my-#{$k} { margin-top: $v !important; margin-bottom: $v !important; }
|
||||
|
||||
.#{$bp}-p-#{$k} { padding: $v !important; }
|
||||
.#{$bp}-pt-#{$k} { padding-top: $v !important; }
|
||||
.#{$bp}-pr-#{$k} { padding-right: $v !important; }
|
||||
.#{$bp}-pb-#{$k} { padding-bottom: $v !important; }
|
||||
.#{$bp}-pl-#{$k} { padding-left: $v !important; }
|
||||
.#{$bp}-px-#{$k} { padding-left: $v !important; padding-right: $v !important; }
|
||||
.#{$bp}-py-#{$k} { padding-top: $v !important; padding-bottom: $v !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Sizing Utilities (Width / Height) */
|
||||
/* ========================================================================== */
|
||||
@each $k, $v in $size-percent { .w-#{$k} { width: $v; } .h-#{$k} { height: $v; } }
|
||||
@each $k, $v in $size-px { .wpx-#{$k} { width: $v; } .hpx-#{$k} { height: $v; } }
|
||||
@each $k, $v in $size-rem { .wrem-#{$k} { width: $v; } .hrem-#{$k} { height: $v; } }
|
||||
@each $k, $v in $size-vw { .wvw-#{$k} { width: $v; } }
|
||||
@each $k, $v in $size-vh { .hvh-#{$k} { height: $v; } }
|
||||
@each $k, $v in $size-dvh { .hdvh-#{$k} { height: $v; } }
|
||||
@each $k, $v in $size-svh { .hsvh-#{$k} { height: $v; } }
|
||||
@each $k, $v in $size-lvh { .hlvh-#{$k} { height: $v; } }
|
||||
|
||||
/* Responsive sizing */
|
||||
@each $bp, $w in $breakpoints {
|
||||
@media (min-width: $w) {
|
||||
@each $k, $v in $size-percent { .#{$bp}-w-#{$k} { width: $v; } .#{$bp}-h-#{$k} { height: $v; } }
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Display + Layout */
|
||||
/* ========================================================================== */
|
||||
@each $t in $display-types { .d-#{$t} { display: $t !important; } }
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
@each $bp, $mw in $container-max-widths {
|
||||
@media (min-width: map-get($breakpoints, $bp)) { max-width: $mw; }
|
||||
}
|
||||
}
|
||||
|
||||
/* Container variants */
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.container-bleed {
|
||||
width: 100vw;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.container-narrow {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: clamp(36rem, 70vw, 56rem);
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: clamp(72rem, 92vw, 100rem);
|
||||
}
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.container-bleed {
|
||||
width: 100vw;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.container-narrow {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: clamp(36rem, 70vw, 56rem);
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: clamp(72rem, 92vw, 100rem);
|
||||
}
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.container-bleed {
|
||||
width: 100vw;
|
||||
margin-left: 50%;
|
||||
transform: translateX(-50%);
|
||||
padding-inline: 0;
|
||||
}
|
||||
|
||||
.container-narrow {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: clamp(36rem, 70vw, 56rem);
|
||||
}
|
||||
|
||||
.container-wide {
|
||||
width: 100%;
|
||||
margin-inline: auto;
|
||||
padding-inline: $container-padding;
|
||||
max-width: clamp(72rem, 92vw, 100rem);
|
||||
}
|
||||
|
||||
/* Flex grid */
|
||||
.row {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-inline: map-get($gutters, 3);
|
||||
margin-block: map-get($gutters, 3);
|
||||
}
|
||||
.col { flex: 1 0 0%; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||||
.col-auto { flex: 0 0 auto; width: auto; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||||
|
||||
@for $i from 1 through $grid-columns {
|
||||
.col-#{$i} {
|
||||
flex: 0 0 percentage($i / $grid-columns);
|
||||
max-width: percentage($i / $grid-columns);
|
||||
padding-inline: map-get($gutters, 3);
|
||||
padding-block: map-get($gutters, 3);
|
||||
}
|
||||
}
|
||||
@each $bp, $w in $breakpoints {
|
||||
@media (min-width: $w) {
|
||||
.col-#{$bp} { flex: 1 0 0%; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||||
.col-#{$bp}-auto { flex: 0 0 auto; width: auto; padding-inline: map-get($gutters, 3); padding-block: map-get($gutters, 3); }
|
||||
@for $i from 1 through $grid-columns {
|
||||
.col-#{$bp}-#{$i} {
|
||||
flex: 0 0 percentage($i / $grid-columns);
|
||||
max-width: percentage($i / $grid-columns);
|
||||
padding-inline: map-get($gutters, 3);
|
||||
padding-block: map-get($gutters, 3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Flex helpers */
|
||||
.flex { display: flex; }
|
||||
.inline-flex { display: inline-flex; }
|
||||
@each $k, $v in $flex-directions { .flex-#{$k} { display: flex; flex-direction: $v; } }
|
||||
@each $k, $v in $justify-content-values { .justify-#{$k} { display: flex; justify-content: $v; } }
|
||||
@each $k, $v in $align-items-values { .items-#{$k} { display: flex; align-items: $v; } }
|
||||
|
||||
/* Borders + Radius + Shadows */
|
||||
@each $k, $v in $border-widths { .border-#{$k} { border-width: $v; border-style: solid; border-color: currentColor; } }
|
||||
.border { border: 1px solid currentColor; }
|
||||
.border-top { border-top: 1px solid currentColor; }
|
||||
.border-right { border-right: 1px solid currentColor; }
|
||||
.border-bottom { border-bottom: 1px solid currentColor; }
|
||||
.border-left { border-left: 1px solid currentColor; }
|
||||
|
||||
@each $k, $v in $radii { .rounded-#{$k} { border-radius: $v; } }
|
||||
.rounded { border-radius: map-get($radii, md); }
|
||||
.rounded-top { border-top-left-radius: map-get($radii, md); border-top-right-radius: map-get($radii, md); }
|
||||
.rounded-bottom { border-bottom-left-radius: map-get($radii, md); border-bottom-right-radius: map-get($radii, md); }
|
||||
.rounded-left { border-top-left-radius: map-get($radii, md); border-bottom-left-radius: map-get($radii, md); }
|
||||
.rounded-right { border-top-right-radius: map-get($radii, md); border-bottom-right-radius: map-get($radii, md); }
|
||||
|
||||
@each $k, $v in $shadows { .shadow-#{$k} { box-shadow: $v !important; } }
|
||||
@each $k, $v in $drop-shadows { .drop-shadow-#{$k} { box-shadow: $v !important; } }
|
||||
|
||||
/* Z-Index */
|
||||
.z-base { z-index: map-get($z, base); }
|
||||
.z-dropdown { z-index: map-get($z, dropdown); }
|
||||
.z-overlay { z-index: map-get($z, overlay); }
|
||||
.z-modal { z-index: map-get($z, modal); }
|
||||
.z-toast { z-index: map-get($z, toast); }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Grid System (CSS Grid Utilities) */
|
||||
/* ========================================================================== */
|
||||
.grid { display: grid !important; }
|
||||
.inline-grid { display: inline-grid !important; }
|
||||
|
||||
@for $i from 1 through 12 { .grid-cols-#{$i} { grid-template-columns: repeat($i, 1fr) !important; } }
|
||||
.grid-cols-none { grid-template-columns: none !important; }
|
||||
|
||||
@each $bp, $width in $breakpoints {
|
||||
@media (min-width: $width) {
|
||||
@for $i from 1 through 12 {
|
||||
.#{$bp}-grid-cols-#{$i} { grid-template-columns: repeat($i, 1fr) !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through 12 { .grid-rows-#{$i} { grid-template-rows: repeat($i, 1fr) !important; } }
|
||||
.grid-rows-none { grid-template-rows: none !important; }
|
||||
|
||||
.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; }
|
||||
.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; }
|
||||
.grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important; }
|
||||
.grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important; }
|
||||
.grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important; }
|
||||
.grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important; }
|
||||
|
||||
.grid-align-center { align-items: center !important; justify-items: center !important; }
|
||||
.grid-align-start { align-items: start !important; justify-items: start !important; }
|
||||
.grid-align-end { align-items: end !important; justify-items: end !important; }
|
||||
.grid-align-stretch { align-items: stretch !important; justify-items: stretch !important; }
|
||||
|
||||
.place-self-center { place-self: center !important; }
|
||||
.place-self-start { place-self: start !important; }
|
||||
.place-self-end { place-self: end !important; }
|
||||
.place-self-stretch { place-self: stretch !important; }
|
||||
|
||||
.grid-flow-row { grid-auto-flow: row !important; }
|
||||
.grid-flow-col { grid-auto-flow: column !important; }
|
||||
.grid-flow-row-dense { grid-auto-flow: row dense !important; }
|
||||
.grid-flow-col-dense { grid-auto-flow: column dense !important; }
|
||||
|
||||
/* Auto rows/cols sizing */
|
||||
.grid-auto-cols-min { grid-auto-columns: min-content !important; }
|
||||
.grid-auto-cols-max { grid-auto-columns: max-content !important; }
|
||||
.grid-auto-cols-fr { grid-auto-columns: 1fr !important; }
|
||||
.grid-auto-rows-min { grid-auto-rows: min-content !important; }
|
||||
.grid-auto-rows-max { grid-auto-rows: max-content !important; }
|
||||
.grid-auto-rows-fr { grid-auto-rows: 1fr !important; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Control Blueprints (shared by inputs/buttons/etc.) */
|
||||
/* ========================================================================== */
|
||||
@mixin control-base {
|
||||
appearance: none;
|
||||
border-style: map-get($control-border, style);
|
||||
border-width: map-get($control-border, width);
|
||||
border-color: map-get($control-colors, border);
|
||||
background-color: map-get($control-colors, bg);
|
||||
color: map-get($control-colors, fg);
|
||||
outline: 0;
|
||||
transition:
|
||||
background-color map-get($timings, base) map-get($easings, in-out),
|
||||
color map-get($timings, base) map-get($easings, in-out),
|
||||
border-color map-get($timings, base) map-get($easings, in-out),
|
||||
box-shadow map-get($timings, base) map-get($easings, in-out),
|
||||
transform map-get($timings, fast) map-get($easings, out);
|
||||
}
|
||||
|
||||
@mixin control-size($size) {
|
||||
$props: map-get($control-sizes, $size);
|
||||
font-size: map-get($props, font-size);
|
||||
line-height: map-get($props, line-height);
|
||||
padding: map-get($props, py) map-get($props, px);
|
||||
border-radius: map-get($props, radius);
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.input, select, textarea {
|
||||
@include control-base;
|
||||
width: 100%;
|
||||
&:focus {
|
||||
border-color: map-get($control-colors, focus);
|
||||
box-shadow: 0 0 0 3px map-get($control-colors, ring);
|
||||
background-color: map-get($colors, white);
|
||||
}
|
||||
&:disabled {
|
||||
background-color: map-get($control-colors, disabled-bg);
|
||||
opacity: .6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
&::placeholder { color: map-get($control-colors, placeholder); }
|
||||
}
|
||||
@each $size, $props in $control-sizes { .input-#{$size} { @include control-size($size); } }
|
||||
|
||||
/* Buttons */
|
||||
.btn {
|
||||
@include control-base;
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
box-shadow: map-get($shadows, 1);
|
||||
&:focus-visible {
|
||||
border-color: map-get($control-colors, focus);
|
||||
box-shadow: 0 0 0 3px map-get($control-colors, ring), map-get($shadows, 2);
|
||||
}
|
||||
&:active { transform: translateY(1px); box-shadow: map-get($shadows, 3); }
|
||||
&:disabled { opacity: .6; cursor: not-allowed; pointer-events: none; }
|
||||
}
|
||||
@each $size, $props in $control-sizes { .btn-#{$size} { @include control-size($size); } }
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.btn-#{$name} {
|
||||
background-color: $color;
|
||||
color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, white));
|
||||
border-color: transparent;
|
||||
&:hover { background-color: darken($color, 8%); box-shadow: map-get($shadows, 2); }
|
||||
}
|
||||
.btn-outline-#{$name} {
|
||||
background-color: transparent;
|
||||
color: $color;
|
||||
border-color: $color;
|
||||
&:hover { background-color: $color; color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, white)); }
|
||||
}
|
||||
.btn-ghost-#{$name} {
|
||||
background-color: transparent;
|
||||
color: $color;
|
||||
border-color: transparent;
|
||||
&:hover { background-color: rgba($color, .12); }
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Alerts */
|
||||
/* ========================================================================== */
|
||||
.alert {
|
||||
padding: map-get($space, 2) map-get($space, 3);
|
||||
border-radius: map-get($radii, md);
|
||||
border: 1px solid map-get($control-colors, border);
|
||||
background: map-get($colors, accent-white);
|
||||
}
|
||||
@each $name, $color in $colors {
|
||||
.alert-#{$name} {
|
||||
background: mix($color, map-get($colors, white), 12%);
|
||||
border-color: $color;
|
||||
color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, dark));
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Cards (with custom borders and shadows) */
|
||||
/* ========================================================================== */
|
||||
.card {
|
||||
background: map-get($colors, white);
|
||||
border: 1px solid map-get($control-colors, border);
|
||||
border-radius: map-get($radii, lg);
|
||||
box-shadow: map-get($shadows, 1);
|
||||
transition: box-shadow map-get($timings, base) map-get($easings, in-out);
|
||||
}
|
||||
.card-hover:hover { box-shadow: map-get($shadows, 3); }
|
||||
|
||||
@each $k, $v in $shadows { .card-shadow-#{$k} { box-shadow: $v; } }
|
||||
@each $name, $color in $colors {
|
||||
.card-border-#{$name} { border-color: $color; }
|
||||
.card-bg-#{$name} { background-color: $color; }
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Modals */
|
||||
/* ========================================================================== */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: map-get($space, 3);
|
||||
z-index: map-get($z, modal);
|
||||
}
|
||||
.modal.open { display: flex; }
|
||||
|
||||
.modal__overlay { position: absolute; inset: 0; background: rgba(map-get($colors, black), .5); }
|
||||
|
||||
.modal__dialog {
|
||||
position: relative;
|
||||
width: min(720px, 100%);
|
||||
background: map-get($colors, white);
|
||||
border: 1px solid map-get($control-colors, border);
|
||||
border-radius: map-get($radii, lg);
|
||||
box-shadow: map-get($shadows, 5);
|
||||
padding: map-get($space, 3);
|
||||
}
|
||||
|
||||
.modal__header { display: flex; align-items: center; justify-content: space-between; gap: map-get($space, 2); margin-bottom: map-get($space, 2); }
|
||||
.modal__title { font-size: map-get($font-sizes, lg); font-weight: map-get($font-weights, semibold); }
|
||||
.modal__close { @extend .btn; @extend .btn-sm; background: transparent; box-shadow: none; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Pills */
|
||||
/* ========================================================================== */
|
||||
.pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: map-get($space, 1);
|
||||
padding: map-get($space, 1) map-get($space, 2);
|
||||
border-radius: map-get($radii, full);
|
||||
border: 1px solid map-get($control-colors, border);
|
||||
background: map-get($colors, accent-white);
|
||||
font-size: map-get($font-sizes, sm);
|
||||
line-height: map-get($line-heights, normal);
|
||||
}
|
||||
@each $name, $color in $colors {
|
||||
.pill-#{$name} {
|
||||
background: mix($color, map-get($colors, white), 12%);
|
||||
color: if(lightness($color) > 60%, map-get($colors, dark), map-get($colors, white));
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Accordions */
|
||||
/* ========================================================================== */
|
||||
.accordion { border: 1px solid map-get($control-colors, border); border-radius: map-get($radii, lg); overflow: hidden; }
|
||||
.accordion__item + .accordion__item { border-top: 1px solid map-get($control-colors, border); }
|
||||
|
||||
.accordion__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: map-get($space, 2);
|
||||
padding: map-get($space, 2) map-get($space, 3);
|
||||
cursor: pointer;
|
||||
background: map-get($colors, accent-white);
|
||||
border: none;
|
||||
}
|
||||
.accordion__title { font-weight: map-get($font-weights, medium); }
|
||||
.accordion__icon { transition: transform map-get($timings, base) map-get($easings, in-out); }
|
||||
|
||||
.accordion__panel {
|
||||
display: grid;
|
||||
grid-template-rows: 0fr;
|
||||
transition: grid-template-rows map-get($timings, base) map-get($easings, in-out);
|
||||
}
|
||||
.accordion__content { overflow: hidden; padding: 0 map-get($space, 3); }
|
||||
|
||||
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
|
||||
.accordion__item.is-open .accordion__content { padding: map-get($space, 2) map-get($space, 3) map-get($space, 3); }
|
||||
.accordion__item.is-open .accordion__icon { transform: rotate(180deg); }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Stack Utilities */
|
||||
/* ========================================================================== */
|
||||
.stack > * + * { margin-top: map-get($space, 3); }
|
||||
@each $k, $v in $space { .stack-#{$k} > * + * { margin-top: $v; } }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Transitions & Animations */
|
||||
/* ========================================================================== */
|
||||
.transition-all { transition: all map-get($timings, base) map-get($easings, in-out); }
|
||||
.transition-fast { transition-duration: map-get($timings, fast); }
|
||||
.transition-slow { transition-duration: map-get($timings, slow); }
|
||||
|
||||
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
|
||||
@keyframes slide-up { from { transform: translateY(10px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
|
||||
|
||||
.animate-fade-in { animation: fade-in .3s map-get($easings, out) both; }
|
||||
.animate-slide-up { animation: slide-up .35s map-get($easings, out) both; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Tooltips */
|
||||
/* ========================================================================== */
|
||||
.tooltip { position: relative; display: inline-block; cursor: help; }
|
||||
.tooltip::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute;
|
||||
bottom: calc(100% + 6px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: map-get($colors, dark);
|
||||
color: map-get($colors, white);
|
||||
padding: .25rem .5rem;
|
||||
font-size: map-get($font-sizes, sm);
|
||||
border-radius: map-get($radii, sm);
|
||||
white-space: nowrap;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity map-get($timings, base) map-get($easings, in-out);
|
||||
z-index: map-get($z, dropdown);
|
||||
}
|
||||
.tooltip:hover::after { opacity: 1; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Tabs */
|
||||
/* ========================================================================== */
|
||||
.tabs { display: flex; gap: map-get($space, 2); border-bottom: 1px solid map-get($control-colors, border); }
|
||||
.tab {
|
||||
padding: map-get($space, 2) map-get($space, 3);
|
||||
cursor: pointer;
|
||||
border-bottom: 2px solid transparent;
|
||||
transition:
|
||||
border-color map-get($timings, base) map-get($easings, in-out),
|
||||
color map-get($timings, base) map-get($easings, in-out);
|
||||
}
|
||||
.tab.active { border-color: map-get($colors, primary); color: map-get($colors, primary); }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Transform & Scale Utilities */
|
||||
/* ========================================================================== */
|
||||
.scale-90 { transform: scale(.9); }
|
||||
.scale-95 { transform: scale(.95); }
|
||||
.scale-100 { transform: scale(1); }
|
||||
.scale-105 { transform: scale(1.05); }
|
||||
.scale-110 { transform: scale(1.1); }
|
||||
|
||||
.rotate-90 { transform: rotate(90deg); }
|
||||
.rotate-180 { transform: rotate(180deg); }
|
||||
.rotate-270 { transform: rotate(270deg); }
|
||||
|
||||
.skew-x-6 { transform: skewX(6deg); }
|
||||
.skew-y-6 { transform: skewY(6deg); }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Shadow, Blur, and Glow Utilities */
|
||||
/* ========================================================================== */
|
||||
.shadow-none { box-shadow: none !important; }
|
||||
.blur-sm { filter: blur(2px); }
|
||||
.blur-md { filter: blur(4px); }
|
||||
.blur-lg { filter: blur(8px); }
|
||||
.glow { box-shadow: 0 0 12px rgba(map-get($colors, accent), .5); }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Dark Mode (opt-in via .theme-dark) */
|
||||
/* ========================================================================== */
|
||||
.theme-dark { background: map-get($colors, dark); color: map-get($colors, light); }
|
||||
.theme-dark .card,
|
||||
.theme-dark .modal__dialog {
|
||||
background: map-get($colors, secondary);
|
||||
border-color: map-get($colors, muted);
|
||||
color: map-get($colors, light);
|
||||
}
|
||||
.theme-dark .input,
|
||||
.theme-dark select,
|
||||
.theme-dark textarea {
|
||||
background: map-get($colors, secondary);
|
||||
color: map-get($colors, light);
|
||||
border-color: map-get($colors, muted);
|
||||
}
|
||||
.theme-dark .tabs { border-bottom-color: map-get($colors, muted); }
|
||||
.theme-dark .tab.active { border-color: map-get($colors, primary); color: map-get($colors, primary); }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Scroll Utilities */
|
||||
/* ========================================================================== */
|
||||
.scroll-y { overflow-y: auto !important; }
|
||||
.scroll-x { overflow-x: auto !important; }
|
||||
.scroll-hidden { overflow: hidden !important; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Spinner */
|
||||
/* ========================================================================== */
|
||||
@keyframes ui-spinner { to { transform: rotate(360deg); } }
|
||||
|
||||
.spinner {
|
||||
display: inline-block;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
border-radius: 50%;
|
||||
border-style: solid;
|
||||
border-width: 2px;
|
||||
border-color: map-get($colors, dark);
|
||||
border-left-color: transparent !important;
|
||||
animation: ui-spinner 1s linear infinite;
|
||||
}
|
||||
@each $name, $color in $colors {
|
||||
.spinner-#{$name} { border-color: $color; border-left-color: transparent !important; }
|
||||
}
|
||||
.spinner-sm { width: .875rem; height: .875rem; border-width: 2px; }
|
||||
.spinner-md { width: 1.25rem; height: 1.25rem; border-width: 2px; }
|
||||
.spinner-lg { width: 1.75rem; height: 1.75rem; border-width: 3px; }
|
||||
.spinner-xl { width: 2.25rem; height: 2.25rem; border-width: 4px; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Visibility + Accessibility */
|
||||
/* ========================================================================== */
|
||||
.visible { visibility: visible !important; }
|
||||
.invisible { visibility: hidden !important; }
|
||||
|
||||
.sr-only {
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
margin: -1px !important;
|
||||
overflow: hidden !important;
|
||||
clip: rect(0, 0, 0, 0) !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Overflow + Text Truncation */
|
||||
/* ========================================================================== */
|
||||
.overflow-hidden { overflow: hidden !important; }
|
||||
.overflow-auto { overflow: auto !important; }
|
||||
.overflow-scroll { overflow: scroll !important; }
|
||||
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Opacity */
|
||||
/* ========================================================================== */
|
||||
.opacity-0 { opacity: 0; }
|
||||
.opacity-25 { opacity: .25; }
|
||||
.opacity-50 { opacity: .5; }
|
||||
.opacity-75 { opacity: .75; }
|
||||
.opacity-100 { opacity: 1; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Cursor + Pointer Events */
|
||||
/* ========================================================================== */
|
||||
.cursor-default { cursor: default !important; }
|
||||
.cursor-pointer { cursor: pointer !important; }
|
||||
.cursor-not-allowed { cursor: not-allowed !important; }
|
||||
.pointer-none { pointer-events: none !important; }
|
||||
.pointer-auto { pointer-events: auto !important; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Position + Inset */
|
||||
/* ========================================================================== */
|
||||
.relative { position: relative !important; }
|
||||
.absolute { position: absolute !important; }
|
||||
.fixed { position: fixed !important; }
|
||||
.sticky { position: sticky !important; }
|
||||
|
||||
.inset-0 { inset: 0 !important; }
|
||||
.top-0 { top: 0 !important; }
|
||||
.right-0 { right: 0 !important; }
|
||||
.bottom-0 { bottom: 0 !important; }
|
||||
.left-0 { left: 0 !important; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Flex Wrapping + Gap */
|
||||
/* ========================================================================== */
|
||||
.wrap { flex-wrap: wrap !important; }
|
||||
.nowrap { flex-wrap: nowrap !important; }
|
||||
.wrap-reverse { flex-wrap: wrap-reverse !important; }
|
||||
|
||||
@each $k, $v in $space {
|
||||
.gap-#{$k} { gap: $v !important; }
|
||||
.row-gap-#{$k} { row-gap: $v !important; }
|
||||
.col-gap-#{$k} { column-gap: $v !important; }
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Responsive Reverse (small-down) */
|
||||
/* ========================================================================== */
|
||||
.sm-reverse {
|
||||
@media (max-width: map-get($breakpoints, md)) {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Aspect Ratios + Object Fit */
|
||||
/* ========================================================================== */
|
||||
.ratio { position: relative; width: 100%; height: 0; overflow: hidden; }
|
||||
.ratio > * { position: absolute; inset: 0; width: 100%; height: 100%; }
|
||||
|
||||
.ratio-16x9 { padding-bottom: 56.25%; }
|
||||
.ratio-4x3 { padding-bottom: 75%; }
|
||||
.ratio-1x1 { padding-bottom: 100%; }
|
||||
|
||||
.object-contain { object-fit: contain !important; }
|
||||
.object-cover { object-fit: cover !important; }
|
||||
.object-fill { object-fit: fill !important; }
|
||||
.object-none { object-fit: none !important; }
|
||||
.object-scale-down { object-fit: scale-down !important; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Hover Motion Helpers */
|
||||
/* ========================================================================== */
|
||||
.hover-raise { transition: transform map-get($timings, base) map-get($easings, in-out), box-shadow map-get($timings, base) map-get($easings, in-out); }
|
||||
.hover-raise:hover { transform: translateY(-2px); box-shadow: map-get($shadows, 2); }
|
||||
|
||||
.hover-glow { transition: box-shadow map-get($timings, base) map-get($easings, in-out); }
|
||||
.hover-glow:hover { box-shadow: 0 0 0 3px map-get($control-colors, ring), map-get($shadows, 2); }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Divider Utilities */
|
||||
/* ========================================================================== */
|
||||
.hr { width: 100%; height: 1px; background: map-get($control-colors, border); border: 0; }
|
||||
.hr-dashed { height: 1px; border-top: 1px dashed map-get($control-colors, border); background: transparent; }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Utility Badges (aliases of pills) */
|
||||
/* ========================================================================== */
|
||||
.badge { @extend .pill; }
|
||||
@each $name, $color in $colors { .badge-#{$name} { @extend .pill-#{$name}; } }
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Quick Utility Aliases */
|
||||
/* ========================================================================== */
|
||||
.rel { position: relative; }
|
||||
.no-click { pointer-events: none; }
|
||||
.center { display: grid; place-items: center; }
|
||||
.full-height { height: 100vh; }
|
||||
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Flex Grid Extensions */
|
||||
/* ========================================================================== */
|
||||
|
||||
.row.no-gutter {
|
||||
margin-inline: 0;
|
||||
margin-block: 0;
|
||||
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-inline: 0;
|
||||
padding-block: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row.gx-0 {
|
||||
margin-right: 0;
|
||||
margin-left: 0;
|
||||
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-right: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row.gy-0 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
> .col,
|
||||
> [class^="col-"] {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.row-bleed {
|
||||
margin-right: calc(#{$container-padding} * -1);
|
||||
margin-left: calc(#{$container-padding} * -1);
|
||||
}
|
||||
|
||||
@each $bp, $width in $breakpoints {
|
||||
@media (min-width: $width) {
|
||||
.#{$bp}-row-center { justify-content: center; }
|
||||
.#{$bp}-row-between { justify-content: space-between; }
|
||||
.#{$bp}-row-around { justify-content: space-around; }
|
||||
.#{$bp}-row-evenly { justify-content: space-evenly; }
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ========================================================================== */
|
||||
/* CSS Grid Enhancements */
|
||||
/* ========================================================================== */
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.grid-cols-#{$i} { grid-template-columns: repeat($i, 1fr) !important; }
|
||||
}
|
||||
|
||||
.grid-cols-none { grid-template-columns: none !important; }
|
||||
|
||||
@for $i from 1 through 12 {
|
||||
.grid-rows-#{$i} { grid-template-rows: repeat($i, 1fr) !important; }
|
||||
}
|
||||
|
||||
.grid-rows-none { grid-template-rows: none !important; }
|
||||
|
||||
.grid-auto-fit-sm { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)) !important; }
|
||||
.grid-auto-fit-md { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)) !important; }
|
||||
.grid-auto-fit-lg { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)) !important; }
|
||||
|
||||
.grid-auto-fill-sm { grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)) !important; }
|
||||
.grid-auto-fill-md { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)) !important; }
|
||||
.grid-auto-fill-lg { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)) !important; }
|
||||
|
||||
.grid-align-center { align-items: center !important; justify-items: center !important; }
|
||||
.grid-align-start { align-items: start !important; justify-items: start !important; }
|
||||
.grid-align-end { align-items: end !important; justify-items: end !important; }
|
||||
.grid-align-stretch { align-items: stretch !important; justify-items: stretch !important; }
|
||||
|
||||
.grid-flow-row { grid-auto-flow: row !important; }
|
||||
.grid-flow-col { grid-auto-flow: column !important; }
|
||||
.grid-flow-row-dense { grid-auto-flow: row dense !important; }
|
||||
.grid-flow-col-dense { grid-auto-flow: column dense !important; }
|
||||
528
rss/css/theme.css
Normal file
528
rss/css/theme.css
Normal file
@@ -0,0 +1,528 @@
|
||||
/* Grid system */
|
||||
/* Breakpoints */
|
||||
/* Display types */
|
||||
/* Color palette */
|
||||
/* Spacing scale */
|
||||
/* Shadows (soft shadows) */
|
||||
/* Flex utilities */
|
||||
/* Button component variables */
|
||||
/* Typography */
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.7rem 2rem;
|
||||
background-color: #ffffff;
|
||||
align-items: center;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
font-family: "Nunito", sans-serif;
|
||||
background-color: #fff;
|
||||
}
|
||||
header .logo {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
}
|
||||
header .logo img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
header nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
header nav {
|
||||
top: -200%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
header nav.open {
|
||||
top: 99%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
background-color: #fff;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
header nav.open a {
|
||||
padding: 7px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
header nav .menu-item {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: color 0.3s;
|
||||
font-size: 16px;
|
||||
}
|
||||
header nav .menu-item.active {
|
||||
font-weight: bold;
|
||||
}
|
||||
header nav .menu-item::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #aa0b3d;
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
header nav .menu-item:hover {
|
||||
color: #aa0b3d;
|
||||
cursor: pointer;
|
||||
}
|
||||
header nav .menu-item:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
header .mobile-toggler {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
}
|
||||
@media (min-width: 769px) {
|
||||
header .mobile-toggler {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.home-banner {
|
||||
height: calc(100vh - 55px);
|
||||
padding: 50px 0;
|
||||
display: flex;
|
||||
background-color: #ffffff;
|
||||
opacity: 0;
|
||||
animation: slideUp 1s ease-in-out forwards;
|
||||
}
|
||||
.home-banner.no-height {
|
||||
height: auto !important;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-banner {
|
||||
height: 100vh;
|
||||
}
|
||||
}
|
||||
.home-banner .home-banner-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
.home-banner .home-banner-inner .container {
|
||||
height: 100%;
|
||||
}
|
||||
.home-banner .home-banner-inner .inner-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-banner .home-banner-inner .inner-row {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.home-banner .home-banner-inner .image-col {
|
||||
flex: 0 0 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
}
|
||||
.home-banner .home-banner-inner .image-col img {
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
|
||||
}
|
||||
.home-banner .home-banner-inner .text-col {
|
||||
flex: 0 0 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-banner .home-banner-inner .text-col {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
}
|
||||
}
|
||||
.home-banner .home-banner-inner .text-col .title {
|
||||
font-weight: 800;
|
||||
font-size: 3.7rem;
|
||||
line-height: 1.2;
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-banner .home-banner-inner .text-col .title {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
}
|
||||
.home-banner .home-banner-inner .text-col .lead {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-banner .home-banner-inner .text-col .lead {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
.home-banner .home-banner-inner .text-col .cta-btn {
|
||||
padding: 10px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
.home-banner .home-banner-inner .text-col .login-text {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
font-weight: 400;
|
||||
}
|
||||
.home-banner .home-banner-inner .text-col .login-text .login-link {
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
.home-banner .home-banner-inner .image-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.home-banner .home-banner-inner .image-wrapper {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0.1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.home-banner .home-banner-inner .image-wrapper img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.display-banner {
|
||||
width: 100%;
|
||||
padding: 120px 0px;
|
||||
}
|
||||
.display-banner.wedding-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/wedding.jpg");
|
||||
padding: 180px 0px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.display-banner.kissing-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/couple-kissing.jpg");
|
||||
padding: 180px 0px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
.display-banner.moving-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("/rss/img/couple.jpg");
|
||||
background-position: center 40%;
|
||||
background-size: cover;
|
||||
padding: 180px 0px;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #212529;
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 25px 0px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
}
|
||||
footer .logo {
|
||||
width: 125px;
|
||||
cursor: pointer;
|
||||
}
|
||||
footer ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.features-section h2 {
|
||||
font-size: 1.8rem;
|
||||
color: #212529;
|
||||
}
|
||||
.features-section .theme-card {
|
||||
border-radius: 0.25rem;
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
.features-section .theme-card .card-header {
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
.features-section .theme-card .card-header img {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.features-section .theme-card .card-header img.object-left {
|
||||
-o-object-position: left center;
|
||||
object-position: left center;
|
||||
}
|
||||
.features-section .theme-card .card-header img.object-center {
|
||||
-o-object-position: center center;
|
||||
object-position: center center;
|
||||
}
|
||||
.features-section .theme-card .card-header img.object-bottom {
|
||||
-o-object-position: bottom center;
|
||||
object-position: bottom center;
|
||||
}
|
||||
.features-section .theme-card .card-body {
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.styled-title {
|
||||
font-family: "Nunito", sans-serif;
|
||||
}
|
||||
.styled-title.fw-900 {
|
||||
font-weight: 900;
|
||||
}
|
||||
.styled-title.fw-600 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.filter-section {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background-color: #ffffff;
|
||||
border-radius: 0.25rem;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
|
||||
padding: 1rem;
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #aa0b3d;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: #212529;
|
||||
}
|
||||
|
||||
.filter-text {
|
||||
font-size: 1rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.filter-card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
.filter-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
.filter-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
.rounded-col-image {
|
||||
height: 450px;
|
||||
width: 450px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
@media (max-width: 1200px) {
|
||||
.rounded-col-image {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 920px) {
|
||||
.rounded-col-image {
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
}
|
||||
}
|
||||
.rounded-col-image:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
box-shadow: inset 0px 0px 27px -5px rgb(2, 2, 2);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.rounded-col-image img {
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
-o-object-position: right;
|
||||
object-position: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
section h3 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
section p {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
section .bolder {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.section-animation {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
|
||||
.section-animation.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.user-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 110px);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.user-container {
|
||||
height: auto;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.user-container.alt .user-card {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
.user-container .user-card {
|
||||
border-radius: 12px;
|
||||
background-color: rgba(255, 255, 255, 0.9058823529);
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.user-container .user-card {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
.user-container .user-card .form {
|
||||
background-color: #FFF;
|
||||
padding: 20px 0px;
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
|
||||
border-radius: 12px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.user-container .user-card .form {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.16);
|
||||
}
|
||||
}
|
||||
.user-container .user-card .form .user-form {
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
}
|
||||
.user-container .user-card .text-col {
|
||||
flex: 60%;
|
||||
max-width: 60%;
|
||||
padding: 30px 20px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.user-container .user-card .text-col {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
.user-container .user-card .text-col .logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
.user-container .user-card .text-col .logo img {
|
||||
width: 180px;
|
||||
}
|
||||
.user-container .user-card .text-col .text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.section-animation {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}/*# sourceMappingURL=theme.css.map */
|
||||
1
rss/css/theme.css.map
Normal file
1
rss/css/theme.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["variables.scss","theme.scss","theme.css"],"names":[],"mappings":"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","file":"theme.css"}
|
||||
604
rss/css/theme.scss
Normal file
604
rss/css/theme.scss
Normal file
@@ -0,0 +1,604 @@
|
||||
@import 'variables';
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0.7rem 2rem;
|
||||
background-color: #ffffff;
|
||||
align-items: center;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
position: relative;
|
||||
z-index: 999;
|
||||
font-family: "Nunito", sans-serif;
|
||||
background-color: #fff;
|
||||
|
||||
@media(max-width:768px) {
|
||||
// height: 48px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
z-index: 999;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
position: relative;
|
||||
z-index: -1;
|
||||
|
||||
@media(max-width:768px) {
|
||||
top: -200%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transition: all 0.3s;
|
||||
|
||||
&.open {
|
||||
top: 99%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: all 0.3s;
|
||||
// padding: 5px 10px;
|
||||
background-color: #fff;
|
||||
height: auto;
|
||||
z-index: -1;
|
||||
opacity: 1;
|
||||
transition: all 0.3s;
|
||||
box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.12);
|
||||
|
||||
a {
|
||||
padding: 7px 10px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.menu-item {
|
||||
color: #000000;
|
||||
font-weight: 500;
|
||||
margin-right: 15px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
transition: color 0.3s;
|
||||
font-size: 16px;
|
||||
|
||||
&.active {
|
||||
font-weight: bold;
|
||||
// color: #your-brand-color;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 120%;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
background: #{map-get($colors, primary)};
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #{map-get($colors, primary)};
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-toggler {
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
|
||||
@media(min-width: 769px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.home-banner {
|
||||
height: calc(100vh - 55px);
|
||||
padding: 50px 0;
|
||||
display: flex;
|
||||
background-color: #{map-get($colors, white)};
|
||||
opacity: 0;
|
||||
animation: slideUp 1s ease-in-out forwards;
|
||||
// animation-delay: 0.2s;
|
||||
|
||||
&.no-height{
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
@media(max-width:768px) {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.home-banner-inner {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
|
||||
|
||||
.container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.inner-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: stretch;
|
||||
height: 100%;
|
||||
|
||||
@media(max-width:768px) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.image-col {
|
||||
flex: 0 0 45%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
border-radius: 12px;
|
||||
box-shadow: #{map-get($shadows, 3)};
|
||||
}
|
||||
}
|
||||
|
||||
.text-col {
|
||||
flex: 0 0 40%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
gap: 10px;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
flex: 0 0 100%;
|
||||
max-width: 100%;
|
||||
text-align: center;
|
||||
z-index: 9;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
font-size: 3.7rem;
|
||||
line-height: 1.2;
|
||||
font-family: $font-family-base;
|
||||
|
||||
@media(max-width:768px) {
|
||||
font-size: 3.2rem;
|
||||
}
|
||||
}
|
||||
|
||||
.lead {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 400;
|
||||
|
||||
@media(max-width:768px) {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
}
|
||||
|
||||
.cta-btn {
|
||||
padding: 10px;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
.login-text {
|
||||
display: inline-flex;
|
||||
gap: 5px;
|
||||
font-weight: 400;
|
||||
|
||||
.login-link {
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 999;
|
||||
height: 100%;
|
||||
z-index: 1;
|
||||
opacity: 0.1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Banners
|
||||
.display-banner {
|
||||
width: 100%;
|
||||
padding: 120px 0px;
|
||||
|
||||
&.wedding-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
|
||||
url('/rss/img/wedding.jpg');
|
||||
padding: 180px 0px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.kissing-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
|
||||
url('/rss/img/couple-kissing.jpg');
|
||||
padding: 180px 0px;
|
||||
background-position: center center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
&.moving-banner {
|
||||
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
|
||||
url('/rss/img/couple.jpg');
|
||||
background-position: center 40%;
|
||||
background-size: cover;
|
||||
padding: 180px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
// Footer
|
||||
footer {
|
||||
background-color: #{map-get($colors, 'dark')};
|
||||
color: #fff;
|
||||
display: flex;
|
||||
padding: 25px 0px;
|
||||
font-size: 14px;
|
||||
font-weight: 300;
|
||||
|
||||
.logo {
|
||||
width: 125px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.features-section {
|
||||
|
||||
h2 {
|
||||
font-size: map-get($font-sizes, xl);
|
||||
color: map-get($colors, dark);
|
||||
}
|
||||
|
||||
.theme-card {
|
||||
border-radius: map-get($border-radius-sizes, md);
|
||||
overflow: hidden;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
|
||||
.card-header {
|
||||
padding: #{map-get($spacing, "2")};
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
border-radius: 50%;
|
||||
box-shadow: map-get($shadows, 2);
|
||||
object-fit: cover;
|
||||
margin: 0 auto;
|
||||
|
||||
&.object-left {
|
||||
object-position: left center;
|
||||
}
|
||||
|
||||
&.object-center {
|
||||
object-position: center center;
|
||||
}
|
||||
|
||||
&.object-bottom {
|
||||
object-position: bottom center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: #{map-get($spacing, "3")};
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix before release
|
||||
// Theme fonts
|
||||
.styled-title {
|
||||
font-family: "Nunito", sans-serif;
|
||||
|
||||
&.fw-900 {
|
||||
font-weight: 900;
|
||||
}
|
||||
|
||||
&.fw-600 {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.filter-section {
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.filter-card {
|
||||
background-color: #{map-get($colors, white)};
|
||||
border-radius: map-get($border-radius-sizes, md);
|
||||
box-shadow: map-get($shadows, 2);
|
||||
padding: #{map-get($spacing, "3")};
|
||||
text-align: center;
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
height: 100%;
|
||||
margin: 15px 0px;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
color: #{map-get($colors, primary)};
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.5rem;
|
||||
color: map-get($colors, dark);
|
||||
}
|
||||
|
||||
.filter-text {
|
||||
font-size: 1rem;
|
||||
color: map-get($colors, gray);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.filter-card {
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.filter-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.filter-title {
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// Images
|
||||
|
||||
// Rounded col images
|
||||
.rounded-col-image {
|
||||
height: 450px;
|
||||
width: 450px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
@media(max-width:1200px) {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
@media(max-width:920px) {
|
||||
width: 225px;
|
||||
height: 225px;
|
||||
}
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
-webkit-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
-moz-box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
box-shadow: inset 0px 0px 27px -5px rgba(2, 2, 2, 1);
|
||||
z-index: 1;
|
||||
pointer-events: none;
|
||||
|
||||
}
|
||||
|
||||
img {
|
||||
object-fit: cover;
|
||||
object-position: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
section {
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.6rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 400;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.bolder {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
.section-animation {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: opacity 0.8s ease-out, transform 0.8s ease-out;
|
||||
}
|
||||
|
||||
.section-animation.visible {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
.user-container {
|
||||
width: 100%;
|
||||
height: calc(100vh - 110px);
|
||||
// background-image: url('/rss/img/happy-kissing.jpg');
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
height: auto;
|
||||
padding: 20px 0px;
|
||||
}
|
||||
|
||||
&.alt {
|
||||
// background-image: url('/rss/img/happy-kissing-2.jpg') !important;
|
||||
|
||||
.user-card {
|
||||
|
||||
@media(max-width: 768px) {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card {
|
||||
border-radius: 12px;
|
||||
background-color: #ffffffe7;
|
||||
// box-shadow: #{map-get($shadows, 3)};
|
||||
display: flex;
|
||||
// min-height: 60vh;
|
||||
// height: 60vh;
|
||||
width: 100%;
|
||||
flex-direction: row;
|
||||
// overflow: hidden;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
flex-direction: column;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.form {
|
||||
background-color: #FFF;
|
||||
padding: 20px 0px;
|
||||
// height: 100%;
|
||||
flex: 40%;
|
||||
max-width: 40%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-shadow: #{map-get($shadows, 3)};
|
||||
border-radius: 12px;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
border-radius: 12px;
|
||||
box-shadow: #{map-get($shadows, 2)};
|
||||
}
|
||||
|
||||
.user-form {
|
||||
padding: 10px 15px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text-col {
|
||||
flex: 60%;
|
||||
max-width: 60%;
|
||||
padding: 30px 20px;
|
||||
|
||||
@media(max-width: 768px) {
|
||||
flex: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
margin-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.section-animation {
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
transform: translateY(50px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
3
rss/css/variables.css
Normal file
3
rss/css/variables.css
Normal file
@@ -0,0 +1,3 @@
|
||||
/* ========================================================================== */
|
||||
/* Flexbox Maps */
|
||||
/* ========================================================================== *//*# sourceMappingURL=variables.css.map */
|
||||
1
rss/css/variables.css.map
Normal file
1
rss/css/variables.css.map
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"sources":["variables.scss"],"names":[],"mappings":"AAwHA,+EAAA;AACA,+EAAA;AACA,+EAAA","file":"variables.css"}
|
||||
348
rss/css/variables.scss
Normal file
348
rss/css/variables.scss
Normal file
@@ -0,0 +1,348 @@
|
||||
$font-family-base: "Nunito", sans-serif;
|
||||
$font-family-mono: Menlo, Monaco, Consolas, "Courier New", monospace;
|
||||
|
||||
$font-sizes: (
|
||||
xs: 0.75rem,
|
||||
sm: 0.875rem,
|
||||
base: 1.1rem,
|
||||
lg: 1.35rem,
|
||||
xl: 1.8rem,
|
||||
xxl: 2.2rem
|
||||
);
|
||||
|
||||
$font-weights: (
|
||||
light: 300,
|
||||
normal: 400,
|
||||
medium: 500,
|
||||
semibold: 600,
|
||||
bold: 700
|
||||
);
|
||||
|
||||
$line-heights: (
|
||||
tight: 1,
|
||||
normal: 1.3,
|
||||
heading: 1.5
|
||||
);
|
||||
|
||||
$colors: (
|
||||
primary: #aa0b3d,
|
||||
primary-alt: #aa0b3da8,
|
||||
alt: #b5451896,
|
||||
secondary: #333333,
|
||||
success: #34b97b,
|
||||
warning: #ffc107,
|
||||
danger: #dc3545,
|
||||
info: #0dcaf0,
|
||||
light: #e5e5e5,
|
||||
dark: #212529,
|
||||
white: #ffffff,
|
||||
black: #000000,
|
||||
muted: #c7c7c7,
|
||||
gray: #6c757d,
|
||||
accent-white: #f7f7f7,
|
||||
accent: #08bbbb,
|
||||
transparent: transparent
|
||||
);
|
||||
|
||||
$space: (
|
||||
0: 0,
|
||||
1: 0.25rem,
|
||||
2: 0.5rem,
|
||||
3: 1rem,
|
||||
4: 1.5rem,
|
||||
5: 3rem
|
||||
);
|
||||
|
||||
$radii: (
|
||||
none: 0,
|
||||
sm: 0.125rem,
|
||||
md: 0.25rem,
|
||||
lg: 0.5rem,
|
||||
xl: 1rem,
|
||||
full: 9999px
|
||||
);
|
||||
|
||||
$border-widths: (
|
||||
0: 0,
|
||||
1: 1px,
|
||||
2: 2px,
|
||||
3: 3px
|
||||
);
|
||||
|
||||
$shadows: (
|
||||
1: 0 1px 3px rgba(0, 0, 0, 0.12),
|
||||
2: 0 2px 6px rgba(0, 0, 0, 0.16),
|
||||
3: 0 4px 10px rgba(0, 0, 0, 0.18),
|
||||
4: 0 6px 15px rgba(0, 0, 0, 0.20),
|
||||
5: 0 10px 24px rgba(0, 0, 0, 0.22)
|
||||
);
|
||||
|
||||
$drop-shadows: (
|
||||
1: 0 2px 4px rgba(0, 0, 0, 0.14),
|
||||
2: 0 4px 8px rgba(0, 0, 0, 0.18),
|
||||
3: 0 8px 16px rgba(0, 0, 0, 0.20),
|
||||
4: 0 12px 24px rgba(0, 0, 0, 0.22),
|
||||
5: 0 20px 40px rgba(0, 0, 0, 0.24)
|
||||
);
|
||||
|
||||
$timings: (
|
||||
fast: 0.15s,
|
||||
base: 0.25s,
|
||||
slow: 0.4s
|
||||
);
|
||||
|
||||
$easings: (
|
||||
in-out: cubic-bezier(.4, 0, .2, 1),
|
||||
out: cubic-bezier(0, 0, .2, 1),
|
||||
in: cubic-bezier(.4, 0, 1, 1)
|
||||
);
|
||||
|
||||
$grid-columns: 12;
|
||||
$container-padding: 1rem;
|
||||
|
||||
$breakpoints: (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 992px,
|
||||
xl: 1200px,
|
||||
xxl: 1400px,
|
||||
xxxl: 1600px
|
||||
);
|
||||
|
||||
$container-max-widths: (
|
||||
sm: 540px,
|
||||
md: 720px,
|
||||
lg: 960px,
|
||||
xl: 1140px,
|
||||
xxl: 1320px,
|
||||
xxxl: 1520px
|
||||
);
|
||||
|
||||
/* ========================================================================== */
|
||||
/* Flexbox Maps */
|
||||
/* ========================================================================== */
|
||||
$flex-directions: (
|
||||
row: row,
|
||||
row-reverse: row-reverse,
|
||||
column: column,
|
||||
column-reverse: column-reverse
|
||||
);
|
||||
|
||||
$justify-content-values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
evenly: space-evenly
|
||||
);
|
||||
|
||||
$align-items-values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch
|
||||
);
|
||||
|
||||
$align-content-values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
stretch: stretch
|
||||
);
|
||||
|
||||
|
||||
$gutters: (
|
||||
0: map-get($space, 0),
|
||||
1: map-get($space, 1),
|
||||
2: map-get($space, 2),
|
||||
3: map-get($space, 3),
|
||||
4: map-get($space, 4),
|
||||
5: map-get($space, 5)
|
||||
);
|
||||
|
||||
$display-types: block, flex, inline, inline-block, inline-flex, grid, none;
|
||||
|
||||
$z: (
|
||||
base: 1,
|
||||
dropdown: 1000,
|
||||
overlay: 1100,
|
||||
modal: 1200,
|
||||
toast: 1300
|
||||
);
|
||||
|
||||
$control-colors: (
|
||||
bg: #fdfdfd,
|
||||
fg: map-get($colors, secondary),
|
||||
border: map-get($colors, muted),
|
||||
border-hover: map-get($colors, secondary),
|
||||
focus: map-get($colors, primary),
|
||||
ring: rgba(map-get($colors, primary), 0.2),
|
||||
placeholder: map-get($colors, gray),
|
||||
disabled-bg: map-get($colors, light)
|
||||
);
|
||||
|
||||
$control-sizes: (
|
||||
sm: (
|
||||
font-size: map-get($font-sizes, sm),
|
||||
line-height: map-get($line-heights, normal),
|
||||
px: 0.5rem,
|
||||
py: 0.25rem,
|
||||
radius: map-get($radii, md)
|
||||
),
|
||||
md: (
|
||||
font-size: map-get($font-sizes, base),
|
||||
line-height: map-get($line-heights, normal),
|
||||
px: 0.75rem,
|
||||
py: 0.375rem,
|
||||
radius: map-get($radii, md)
|
||||
),
|
||||
lg: (
|
||||
font-size: map-get($font-sizes, lg),
|
||||
line-height: map-get($line-heights, normal),
|
||||
px: 1rem,
|
||||
py: 0.5rem,
|
||||
radius: map-get($radii, lg)
|
||||
),
|
||||
xl: (
|
||||
font-size: map-get($font-sizes, xl),
|
||||
line-height: map-get($line-heights, heading),
|
||||
px: 1.25rem,
|
||||
py: 0.75rem,
|
||||
radius: map-get($radii, lg)
|
||||
)
|
||||
);
|
||||
|
||||
$control-border: (
|
||||
width: map-get($border-widths, 1),
|
||||
style: solid
|
||||
);
|
||||
|
||||
$size-px: (
|
||||
0: 0px,
|
||||
1: 1px,
|
||||
2: 2px,
|
||||
4: 4px,
|
||||
8: 8px,
|
||||
12: 12px,
|
||||
16: 16px,
|
||||
20: 20px,
|
||||
24: 24px,
|
||||
32: 32px,
|
||||
40: 40px,
|
||||
48: 48px,
|
||||
56: 56px,
|
||||
64: 64px,
|
||||
80: 80px,
|
||||
96: 96px,
|
||||
112: 112px,
|
||||
128: 128px,
|
||||
160: 160px,
|
||||
192: 192px,
|
||||
224: 224px,
|
||||
256: 256px,
|
||||
320: 320px,
|
||||
384: 384px,
|
||||
448: 448px,
|
||||
512: 512px
|
||||
);
|
||||
|
||||
$size-percent: (
|
||||
0: 0%,
|
||||
25: 25%,
|
||||
33: 33.3333%,
|
||||
50: 50%,
|
||||
66: 66.6667%,
|
||||
75: 75%,
|
||||
100: 100%
|
||||
);
|
||||
|
||||
$size-rem: (
|
||||
0: 0,
|
||||
1: 0.25rem,
|
||||
2: 0.5rem,
|
||||
3: 1rem,
|
||||
4: 1.5rem,
|
||||
5: 2rem,
|
||||
6: 3rem,
|
||||
7: 4rem,
|
||||
8: 6rem
|
||||
);
|
||||
|
||||
$size-vw: (
|
||||
10: 10vw,
|
||||
20: 20vw,
|
||||
25: 25vw,
|
||||
33: 33vw,
|
||||
40: 40vw,
|
||||
50: 50vw,
|
||||
60: 60vw,
|
||||
66: 66vw,
|
||||
75: 75vw,
|
||||
80: 80vw,
|
||||
90: 90vw,
|
||||
100: 100vw
|
||||
);
|
||||
|
||||
$size-vh: (
|
||||
10: 10vh,
|
||||
20: 20vh,
|
||||
25: 25vh,
|
||||
33: 33vh,
|
||||
40: 40vh,
|
||||
50: 50vh,
|
||||
60: 60vh,
|
||||
66: 66vh,
|
||||
75: 75vh,
|
||||
80: 80vh,
|
||||
90: 90vh,
|
||||
100: 100vh
|
||||
);
|
||||
|
||||
$size-dvh: (
|
||||
10: 10dvh,
|
||||
20: 20dvh,
|
||||
25: 25dvh,
|
||||
33: 33dvh,
|
||||
40: 40dvh,
|
||||
50: 50dvh,
|
||||
60: 60dvh,
|
||||
66: 66dvh,
|
||||
75: 75dvh,
|
||||
80: 80dvh,
|
||||
90: 90dvh,
|
||||
100: 100dvh
|
||||
);
|
||||
|
||||
$size-svh: (
|
||||
10: 10svh,
|
||||
20: 20svh,
|
||||
25: 25svh,
|
||||
33: 33svh,
|
||||
40: 40svh,
|
||||
50: 50svh,
|
||||
60: 60svh,
|
||||
66: 66svh,
|
||||
75: 75svh,
|
||||
80: 80svh,
|
||||
90: 90svh,
|
||||
100: 100svh
|
||||
);
|
||||
|
||||
$size-lvh: (
|
||||
10: 10lvh,
|
||||
20: 20lvh,
|
||||
25: 25lvh,
|
||||
33: 33lvh,
|
||||
40: 40lvh,
|
||||
50: 50lvh,
|
||||
60: 60lvh,
|
||||
66: 66lvh,
|
||||
75: 75lvh,
|
||||
80: 80lvh,
|
||||
90: 90lvh,
|
||||
100: 100lvh
|
||||
);
|
||||
Reference in New Issue
Block a user