67 lines
1.4 KiB
SCSS
67 lines
1.4 KiB
SCSS
// Brand palette derived from public/images/logo.png (teal key/globe on dark navy)
|
|
$brand-teal: #2f8fae;
|
|
$brand-teal-dark: #1c5a70;
|
|
$brand-teal-light:#6fb8d1;
|
|
$brand-navy: #0d1f26;
|
|
$brand-navy-soft: #16323f;
|
|
$brand-bg: #f4f8f9;
|
|
|
|
// Bootstrap variable overrides (must come before the bootstrap import)
|
|
$primary: $brand-teal;
|
|
$secondary: $brand-navy-soft;
|
|
$dark: $brand-navy;
|
|
$body-bg: $brand-bg;
|
|
$body-color: $brand-navy-soft;
|
|
$link-color: $brand-teal;
|
|
$link-hover-color: $brand-teal-dark;
|
|
$border-radius: .5rem;
|
|
|
|
@import "bootstrap/scss/bootstrap";
|
|
@import "bootstrap-icons/font/bootstrap-icons.css";
|
|
|
|
:root {
|
|
--brand-teal: #{$brand-teal};
|
|
--brand-teal-dark: #{$brand-teal-dark};
|
|
--brand-navy: #{$brand-navy};
|
|
--brand-navy-soft: #{$brand-navy-soft};
|
|
--brand-bg: #{$brand-bg};
|
|
}
|
|
|
|
body {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.site-main {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.site-header {
|
|
background: linear-gradient(90deg, $brand-navy, $brand-navy-soft);
|
|
}
|
|
|
|
.site-header .navbar-brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: .5rem;
|
|
font-weight: 700;
|
|
letter-spacing: .02em;
|
|
}
|
|
|
|
.site-header .navbar-brand img {
|
|
height: 36px;
|
|
width: auto;
|
|
}
|
|
|
|
.site-footer {
|
|
flex-shrink: 0;
|
|
background: $brand-navy;
|
|
color: rgba(255, 255, 255, .65);
|
|
}
|
|
|
|
.auth-card {
|
|
max-width: 440px;
|
|
margin: 3rem auto;
|
|
}
|