/* NapkinNote - Modern Academic Excellence Design System */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&family=Crimson+Text:wght@400;600&display=swap');
/* === Color Variables === */
:root {
--primary-deep-blue: #1F3A5F;
--secondary-sky-blue: #3D7EC9;
--accent-soft-yellow: #F6AE2D;
--accent-color: #EF6461;
--accent-secondary: #2EC4B6;
--background-white: #FFFFFF;
--background-muted: #F4F6FB;
--neutral-gray: #6B7280;
--heading-dark: #1F2933;
--text-muted: #4B5563;
--light-gray: #EEF2F7;
--border-light: #D9E2EC;
--surface-color: #FFFFFF;
--surface-alt: #F7FAFF;
--shadow-sm: 0 2px 4px rgba(31, 58, 95, 0.08);
--shadow-md: 0 6px 16px rgba(31, 58, 95, 0.14);
--shadow-lg: 0 12px 32px rgba(31, 58, 95, 0.18);
}
/* === Reset & Base === */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
font-weight: 400;
line-height: 1.6;
color: var(--text-muted);
background-color: var(--background-muted);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
}
/* === Improved Spacing System === */
.container {
padding-left: 1.5rem;
padding-right: 1.5rem;
max-width: 1200px;
margin: 0 auto;
}
.container-fluid {
padding-left: 2rem;
padding-right: 2rem;
}
.row {
margin-left: -0.75rem;
margin-right: -0.75rem;
}
.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
.col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
.col-sm, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
.col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
.col-md, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
.col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
.col-lg, .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
.col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
/* === Enhanced Typography with Better Spacing === */
h1, h2, h3, h4, h5, h6 {
font-family: 'Crimson Text', serif;
font-weight: 600;
line-height: 1.3;
color: var(--heading-dark);
margin-bottom: 1rem;
margin-top: 0;
}
/* === Search Page Specific Styles === */
.search-filters {
position: sticky;
top: 20px;
z-index: 100;
}
.search-filters .card {
border: none;
box-shadow: var(--shadow-md);
border-radius: 12px;
}
.search-filters .card-header {
background-color: var(--primary-deep-blue);
color: white;
border-radius: 12px 12px 0 0 !important;
border: none;
}
.search-results-summary {
background-color: #f8f9fa;
border: none;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.search-results-summary .card-body {
padding: 1.25rem;
}
.note-card-search {
transition: all 0.3s ease;
border: none;
border-radius: 12px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.note-card-search:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.note-card-search .card-header {
background-color: #f8f9fa;
border-bottom: 1px solid var(--border-light);
}
.note-card-search .card-footer {
background: transparent;
border-top: 1px solid var(--border-light);
}
.search-pagination .page-link {
border: none;
color: var(--primary-deep-blue);
padding: 0.75rem 1rem;
margin: 0 2px;
border-radius: 8px;
transition: all 0.3s ease;
}
.search-pagination .page-link:hover {
background-color: var(--primary-deep-blue);
color: white;
transform: translateY(-2px);
}
.search-pagination .page-item.active .page-link {
background-color: var(--primary-deep-blue);
color: white;
box-shadow: var(--shadow-sm);
}
.like-btn {
transition: all 0.3s ease;
border-radius: 8px;
}
.like-btn:hover {
transform: scale(1.1);
}
.like-btn.btn-danger {
background-color: #dc3545;
border: none;
}
.like-btn.btn-outline-danger:hover {
background-color: #dc3545;
border: none;
}
/* Enhanced form controls for search */
.search-filters .form-control,
.search-filters .form-select {
border: 2px solid var(--border-light);
border-radius: 8px;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.search-filters .form-control:focus,
.search-filters .form-select:focus {
border-color: var(--primary-deep-blue);
box-shadow: 0 0 0 0.2rem rgba(29, 53, 87, 0.25);
transform: translateY(-1px);
}
.search-filters .form-check-input:checked {
background-color: var(--primary-deep-blue);
border-color: var(--primary-deep-blue);
}
/* Quick stats styling */
.quick-stats .text-primary {
color: var(--primary-deep-blue) !important;
}
.quick-stats .text-success {
color: var(--secondary-sky-blue) !important;
}
/* Responsive adjustments for search page */
@media (max-width: 768px) {
.search-filters {
position: static;
margin-bottom: 2rem;
}
.search-filters .card {
margin-bottom: 1rem;
}
.note-card-search {
margin-bottom: 1rem;
}
}
h1 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
}
h2 {
font-size: 2rem;
margin-bottom: 1.25rem;
}
h3 {
font-size: 1.5rem;
margin-bottom: 1rem;
}
h4 {
font-size: 1.25rem;
margin-bottom: 0.875rem;
}
h5 {
font-size: 1.125rem;
margin-bottom: 0.75rem;
}
h6 {
font-size: 1rem;
margin-bottom: 0.625rem;
}
p {
margin-bottom: 1.25rem;
color: var(--heading-dark);
line-height: 1.7;
}
/* === Enhanced Card Spacing === */
.card {
border: none;
border-radius: 1rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
background-color: var(--background-white);
overflow: hidden;
margin-bottom: 1.5rem;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.card-header {
background-color: var(--light-gray);
border-bottom: 2px solid var(--border-light);
padding: 1.75rem;
font-weight: 600;
color: var(--primary-deep-blue);
}
.card-body {
padding: 2rem;
}
.card-footer {
background-color: var(--light-gray);
border-top: 1px solid var(--border-light);
padding: 1.5rem 2rem;
}
/* === Enhanced Button Spacing === */
.btn {
font-weight: 600;
padding: 0.875rem 1.75rem;
border-radius: 0.75rem;
border: none;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.625rem;
cursor: pointer;
font-family: 'Inter', sans-serif;
margin: 0.25rem;
}
.btn-sm {
padding: 0.625rem 1.25rem;
font-size: 0.875rem;
margin: 0.125rem;
}
.btn-lg {
padding: 1.25rem 2.5rem;
font-size: 1.125rem;
margin: 0.375rem;
}
/* === Enhanced Form Spacing === */
.form-control {
border: 2px solid var(--border-light);
border-radius: 0.75rem;
padding: 1rem 1.25rem;
font-size: 1rem;
transition: all 0.2s ease;
background-color: var(--background-white);
color: var(--heading-dark);
margin-bottom: 1.25rem;
}
.form-control:focus {
border-color: var(--secondary-sky-blue);
box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.1);
outline: none;
}
.form-label {
font-weight: 600;
color: var(--primary-deep-blue);
margin-bottom: 0.75rem;
display: block;
}
.form-group {
margin-bottom: 1.5rem;
}
/* === Enhanced Section Spacing === */
.section {
padding: 4rem 0;
}
.section-sm {
padding: 2rem 0;
}
.section-lg {
padding: 6rem 0;
}
/* === Enhanced Grid Spacing === */
.row.g-2 {
margin-left: -0.5rem;
margin-right: -0.5rem;
}
.row.g-2 > * {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.row.g-3 {
margin-left: -1rem;
margin-right: -1rem;
}
.row.g-3 > * {
padding-left: 1rem;
padding-right: 1rem;
}
.row.g-4 {
margin-left: -1.5rem;
margin-right: -1.5rem;
}
.row.g-4 > * {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
/* === Enhanced Margin Utilities === */
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: 0.25rem !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: 0.25rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-3 { margin-top: 1rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }
.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: 0.25rem !important; }
.ml-2 { margin-left: 0.5rem !important; }
.ml-3 { margin-left: 1rem !important; }
.ml-4 { margin-left: 1.5rem !important; }
.ml-5 { margin-left: 3rem !important; }
.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: 0.25rem !important; }
.mr-2 { margin-right: 0.5rem !important; }
.mr-3 { margin-right: 1rem !important; }
.mr-4 { margin-right: 1.5rem !important; }
.mr-5 { margin-right: 3rem !important; }
/* === Enhanced Padding Utilities === */
.p-0 { padding: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: 0.25rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.pl-3 { padding-left: 1rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.pl-5 { padding-left: 3rem !important; }
.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pr-5 { padding-right: 3rem !important; }
/* === Enhanced Responsive Spacing === */
@media (max-width: 768px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
.container-fluid {
padding-left: 1rem;
padding-right: 1rem;
}
.card-body {
padding: 1.5rem;
}
.card-header {
padding: 1.25rem;
}
.card-footer {
padding: 1.25rem 1.5rem;
}
.btn {
padding: 0.75rem 1.5rem;
margin: 0.125rem;
}
.btn-lg {
padding: 1rem 2rem;
}
.form-control {
padding: 0.875rem 1rem;
margin-bottom: 1rem;
}
h1 { font-size: 2rem; margin-bottom: 1.25rem; }
h2 { font-size: 1.75rem; margin-bottom: 1rem; }
h3 { font-size: 1.375rem; margin-bottom: 0.875rem; }
.section { padding: 3rem 0; }
.section-sm { padding: 1.5rem 0; }
.section-lg { padding: 4rem 0; }
}
@media (max-width: 576px) {
.container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.container-fluid {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.card-body {
padding: 1.25rem;
}
.card-header {
padding: 1rem;
}
.card-footer {
padding: 1rem 1.25rem;
}
.btn {
padding: 0.625rem 1.25rem;
font-size: 0.9rem;
}
.form-control {
padding: 0.75rem 0.875rem;
font-size: 16px; /* Prevent zoom on iOS */
}
h1 { font-size: 1.75rem; margin-bottom: 1rem; }
h2 { font-size: 1.5rem; margin-bottom: 0.875rem; }
h3 { font-size: 1.25rem; margin-bottom: 0.75rem; }
.section { padding: 2rem 0; }
.section-sm { padding: 1rem 0; }
.section-lg { padding: 3rem 0; }
}
/* === Typography === */
h1, h2, h3, h4, h5, h6 {
font-family: 'Crimson Text', serif;
font-weight: 600;
line-height: 1.3;
color: var(--heading-dark);
margin-bottom: 0.5em;
}
h1 {
font-size: 2.5rem;
font-weight: 700;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1.125rem;
}
h6 {
font-size: 1rem;
}
p {
margin-bottom: 1rem;
color: var(--heading-dark);
}
a {
color: var(--secondary-sky-blue);
text-decoration: none;
transition: all 0.2s ease;
}
a:hover {
color: var(--primary-deep-blue);
text-decoration: underline;
}
/* === Loading Overlay === */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--primary-deep-blue);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
transition: opacity 1.5s ease, visibility 1.5s ease;
}
.loading-overlay.hidden {
opacity: 0;
visibility: hidden;
}
.loading-spinner {
text-align: center;
color: var(--background-white);
position: relative;
}
.loading-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
}
.loading-logo {
display: inline-block;
width: 120px;
height: 120px;
background: rgba(255, 255, 255, 0.1);
border-radius: 30px;
padding: 20px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 2px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
animation: logoFloat 3s ease-in-out infinite;
}
.loading-brand-logo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 20px;
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.spinner-ring {
width: 80px;
height: 80px;
border: 4px solid rgba(255, 255, 255, 0.1);
border-top: 4px solid var(--accent-soft-yellow);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
position: relative;
}
.loading-text {
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 1.2rem;
margin: 0;
opacity: 0.95;
letter-spacing: 0.5px;
animation: textPulse 2s ease-in-out infinite;
}
.loading-dots {
display: flex;
gap: 8px;
margin-top: 1rem;
justify-content: center;
}
.loading-dots span {
width: 8px;
height: 8px;
background: var(--accent-soft-yellow);
border-radius: 50%;
animation: dotsBounce 1.4s ease-in-out infinite both;
}
.loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.loading-dots span:nth-child(2) { animation-delay: -0.16s; }
.loading-dots span:nth-child(3) { animation-delay: 0s; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes logoFloat {
0%, 100% {
transform: translateY(0px) scale(1);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
50% {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}
}
@keyframes textPulse {
0%, 100% { opacity: 0.95; }
50% { opacity: 0.7; }
}
@keyframes dotsBounce {
0%, 80%, 100% {
transform: scale(0);
opacity: 0.5;
}
40% {
transform: scale(1);
opacity: 1;
}
}
/* Loading responsive adjustments */
@media (max-width: 768px) {
.loading-logo {
width: 100px;
height: 100px;
padding: 16px;
border-radius: 25px;
}
.loading-text {
font-size: 1.1rem;
}
.spinner-ring {
width: 70px;
height: 70px;
}
.loading-content {
padding: 1.5rem;
}
}
@media (max-width: 480px) {
.loading-logo {
width: 80px;
height: 80px;
padding: 12px;
border-radius: 20px;
}
.loading-text {
font-size: 1rem;
}
.spinner-ring {
width: 60px;
height: 60px;
}
}
/* === Navigation === */
.navbar-glass {
background-color: rgba(31, 58, 95, 0.95);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
padding: 1rem 0;
transition: all 0.3s ease;
z-index: 1030;
}
.navbar-glass.scrolled {
background-color: rgba(31, 58, 95, 0.98);
-webkit-backdrop-filter: blur(18px);
backdrop-filter: blur(18px);
padding: 0.7rem 0;
box-shadow: 0 4px 20px rgba(29, 53, 87, 0.3);
}
.modern-brand {
text-decoration: none !important;
transition: transform 0.3s ease;
}
.modern-brand:hover {
transform: scale(1.05);
}
.brand-container {
display: flex;
align-items: center;
gap: 0.75rem;
}
.brand-icon {
width: 45px;
height: 45px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
padding: 8px;
}
.brand-logo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 12px;
}
.login-logo {
display: inline-block;
width: 90px;
height: 90px;
border-radius: 25px;
padding: 8px;
}
.login-brand-logo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 18px;
}
.brand-text {
display: flex;
flex-direction: column;
}
.brand-name {
font-family: 'Crimson Text', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--background-white);
line-height: 1;
margin: 0;
}
.brand-tagline {
font-family: 'Poppins', sans-serif;
font-size: 0.75rem;
font-weight: 400;
color: var(--accent-soft-yellow);
text-transform: uppercase;
letter-spacing: 1px;
line-height: 1;
margin: 0;
}
.modern-toggler {
border: none;
padding: 4px;
width: 30px;
height: 30px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: transparent;
}
.modern-toggler span {
width: 20px;
height: 2px;
background: var(--background-white);
margin: 2px 0;
transition: 0.3s;
border-radius: 1px;
}
.modern-nav .nav-item {
margin: 0 0.25rem;
}
.modern-nav .nav-link {
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 500;
padding: 0.75rem 1rem !important;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
position: relative;
overflow: hidden;
}
.modern-nav .nav-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
transition: left 0.5s;
}
.modern-nav .nav-link:hover::before {
left: 100%;
}
.modern-nav .nav-link:hover {
background: rgba(255, 255, 255, 0.1);
color: var(--background-white) !important;
transform: translateY(-2px);
}
.nav-icon {
font-size: 0.9rem;
opacity: 0.8;
}
.nav-icon-logo {
width: 18px;
height: 18px;
object-fit: contain;
border-radius: 5px;
opacity: 0.8;
transition: all 0.2s ease;
}
.btn-icon-logo {
width: 20px;
height: 20px;
object-fit: contain;
border-radius: 5px;
filter: brightness(0) invert(1);
}
.stat-icon-logo {
width: 36px;
height: 36px;
object-fit: contain;
border-radius: 10px;
padding: 6px;
}
.admin-btn-icon {
width: 18px;
height: 18px;
object-fit: contain;
border-radius: 5px;
filter: opacity(0.8);
}
.bookmark-title-logo {
width: 28px;
height: 28px;
object-fit: contain;
border-radius: 8px;
padding: 4px;
}
.upload-title-logo {
width: 28px;
height: 28px;
object-fit: contain;
border-radius: 8px;
padding: 4px;
}
.modern-dropdown {
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: none;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
padding: 0.5rem;
margin-top: 0.5rem;
min-width: 180px;
}
.modern-dropdown .dropdown-item {
padding: 0.75rem 1rem;
border-radius: 8px;
font-weight: 500;
color: var(--heading-dark);
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.75rem;
}
.modern-dropdown .dropdown-item:hover {
background: var(--light-gray);
color: var(--primary-deep-blue);
transform: translateX(5px);
}
.navbar-actions {
display: flex;
align-items: center;
gap: 1rem;
}
.user-menu-container {
display: flex;
align-items: center;
gap: 1rem;
}
.user-stats .user-points {
background: linear-gradient(135deg, var(--accent-soft-yellow) 0%, #F9A825 100%);
color: var(--primary-deep-blue);
padding: 0.5rem 0.75rem;
border-radius: 20px;
font-weight: 600;
font-size: 0.85rem;
display: flex;
align-items: center;
gap: 0.25rem;
box-shadow: 0 2px 8px rgba(251, 192, 45, 0.3);
}
.user-profile-link {
display: flex !important;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem !important;
border-radius: 25px;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
text-decoration: none;
}
.user-profile-link:hover {
background: rgba(255, 255, 255, 0.15);
transform: translateY(-1px);
}
.user-avatar-container {
position: relative;
}
.user-avatar {
width: 38px;
height: 38px;
border-radius: 50%;
border: 2px solid var(--accent-soft-yellow);
object-fit: cover;
}
.status-indicator {
position: absolute;
bottom: 2px;
right: 2px;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid var(--primary-deep-blue);
}
.status-indicator.online {
background: #10B981;
}
.user-info {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.user-name {
font-weight: 600;
color: var(--background-white);
font-size: 0.9rem;
line-height: 1;
}
.user-role {
font-size: 0.75rem;
color: var(--accent-soft-yellow);
font-weight: 400;
line-height: 1;
}
.dropdown-arrow {
font-size: 0.7rem;
color: rgba(255, 255, 255, 0.7);
transition: transform 0.3s ease;
}
.user-dropdown.show .dropdown-arrow {
transform: rotate(180deg);
}
.user-dropdown-menu {
background: rgba(255, 255, 255, 0.95);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
border: none;
border-radius: 16px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
padding: 0.5rem;
margin-top: 0.5rem;
min-width: 280px;
}
.dropdown-header {
padding: 1rem;
border-bottom: 1px solid var(--border-light);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.header-avatar img {
width: 45px;
height: 45px;
border-radius: 50%;
border: 2px solid var(--accent-soft-yellow);
}
.header-info h6 {
margin: 0;
font-weight: 600;
color: var(--primary-deep-blue);
}
.header-info p {
margin: 0;
font-size: 0.8rem;
color: var(--neutral-gray);
}
.user-dropdown-menu .dropdown-item {
padding: 0.75rem 1rem;
border-radius: 10px;
font-weight: 500;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.25rem;
}
.user-dropdown-menu .dropdown-item:hover {
background: var(--light-gray);
transform: translateX(5px);
}
.admin-link {
background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
color: white !important;
border-radius: 10px;
}
.admin-link:hover {
background: linear-gradient(135deg, #D97706 0%, #B45309 100%);
color: white !important;
transform: translateX(5px) scale(1.02);
}
.logout-link {
color: #DC2626 !important;
border: 1px solid #FECACA;
background: #FEF2F2;
}
.logout-link:hover {
background: #FEE2E2;
border-color: #FBBF24;
transform: translateX(5px);
}
.auth-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
flex: none !important;
width: auto !important;
min-width: auto !important;
max-width: none !important;
}
.auth-buttons .btn-modern {
flex: none !important;
flex-grow: 0 !important;
flex-shrink: 0 !important;
width: auto !important;
min-width: auto !important;
max-width: none !important;
}
.btn-modern {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 25px;
border: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
text-decoration: none;
font-size: 0.9rem;
position: relative;
overflow: hidden;
width: auto !important;
flex: none !important;
white-space: nowrap !important;
min-width: fit-content;
box-sizing: border-box;
}
.btn-modern::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.5s;
}
.btn-modern:hover::before {
left: 100%;
}
.btn-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.btn-modern:active,
.btn-modern:focus,
.btn-modern:focus-visible,
.btn-modern.active {
transform: translateY(-1px) !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
outline: none !important;
border: none !important;
}
.btn-modern:not(:hover):not(:active):not(:focus) {
transform: translateY(0px) !important;
transition: all 0.3s ease !important;
}
/* Simple button size control */
.btn-modern {
width: auto !important;
flex: none !important;
white-space: nowrap !important;
}
.btn-outline-primary.btn-modern {
border: 2px solid rgba(255, 255, 255, 0.8);
color: var(--background-white);
background: transparent;
}
.btn-outline-primary.btn-modern:hover {
background: var(--background-white);
color: var(--primary-deep-blue);
}
.btn-primary.btn-modern {
background: linear-gradient(135deg, var(--accent-soft-yellow) 0%, #F9A825 100%);
color: var(--primary-deep-blue);
box-shadow: 0 4px 15px rgba(251, 192, 45, 0.4);
}
.btn-primary.btn-modern:hover {
background: linear-gradient(135deg, #F9A825 0%, #F57F17 100%);
color: var(--primary-deep-blue);
box-shadow: 0 8px 25px rgba(251, 192, 45, 0.6);
}
/* Ripple effect styles */
.ripple {
position: absolute;
border-radius: 50%;
background: rgba(255, 255, 255, 0.6);
transform: scale(0);
animation: ripple-animation 0.6s linear;
pointer-events: none;
}
@keyframes ripple-animation {
to {
transform: scale(4);
opacity: 0;
}
}
/* Fix collapse button icon rotation */
.toggle-section i {
transition: transform 0.3s ease;
}
.toggle-section[aria-expanded="true"] i {
transform: rotate(90deg);
}
.navbar-brand {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--background-white) !important;
display: flex;
align-items: center;
}
.navbar-brand i {
color: var(--accent-soft-yellow);
margin-right: 0.5rem;
font-size: 1.25rem;
}
.navbar-nav .nav-link {
color: rgba(255, 255, 255, 0.9) !important;
font-weight: 500;
margin: 0 0.5rem;
padding: 0.5rem 1rem !important;
border-radius: 0.5rem;
transition: all 0.2s ease;
}
.navbar-nav .nav-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--background-white) !important;
transform: translateY(-1px);
}
.user-avatar {
display: flex;
align-items: center;
gap: 0.5rem;
}
.avatar-img {
width: 32px;
height: 32px;
border-radius: 50%;
border: 2px solid var(--accent-soft-yellow);
}
.user-name {
font-weight: 500;
color: var(--background-white);
}
.dropdown-menu {
border: none;
box-shadow: var(--shadow-lg);
border-radius: 0.75rem;
padding: 0.5rem;
margin-top: 0.5rem;
}
.dropdown-item {
padding: 0.75rem 1rem;
border-radius: 0.5rem;
margin-bottom: 0.25rem;
font-weight: 500;
transition: all 0.2s ease;
}
.dropdown-item:hover {
background-color: var(--light-gray);
color: var(--primary-deep-blue);
}
/* === Buttons === */
.btn {
font-weight: 600;
padding: 0.75rem 1.5rem;
border-radius: 0.75rem;
border: none;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
font-family: 'Inter', sans-serif;
}
.btn-primary {
background-color: var(--primary-deep-blue);
color: var(--background-white);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
color: var(--background-white);
}
.btn-secondary {
background-color: var(--neutral-gray);
color: var(--background-white);
}
.btn-secondary:hover {
background-color: var(--heading-dark);
color: var(--background-white);
}
.btn-outline-primary {
border: 2px solid var(--secondary-sky-blue);
color: var(--secondary-sky-blue);
background-color: transparent;
}
.btn-outline-primary:hover {
background-color: var(--secondary-sky-blue);
color: var(--background-white);
transform: translateY(-2px);
}
.btn-warning {
background-color: var(--accent-soft-yellow);
color: var(--heading-dark);
font-weight: 600;
}
.btn-warning:hover {
background-color: #F9A825;
color: var(--heading-dark);
transform: translateY(-2px);
}
.btn-sm {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.btn-lg {
padding: 1rem 2rem;
font-size: 1.125rem;
}
/* === Cards === */
.card {
border: none;
border-radius: 1rem;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
background-color: var(--background-white);
overflow: hidden;
}
/* Remove blue focus outlines from cards */
.card:focus,
.card:focus-within,
.card:focus-visible {
outline: none !important;
box-shadow: var(--shadow-sm) !important;
}
.card:hover:focus,
.card:hover:focus-within,
.card:hover:focus-visible {
outline: none !important;
box-shadow: var(--shadow-lg) !important;
}
.card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.card-header {
background-color: var(--light-gray);
border-bottom: 2px solid var(--border-light);
padding: 1.5rem;
font-weight: 600;
color: var(--primary-deep-blue);
}
.card-body {
padding: 1.5rem;
}
.card-footer {
background-color: var(--light-gray);
border-top: 1px solid var(--border-light);
padding: 1rem 1.5rem;
}
/* === Hero Sections === */
.hero {
background-color: var(--primary-deep-blue);
color: var(--background-white);
padding: 4rem 0;
margin-bottom: 3rem;
border-radius: 0 0 2rem 2rem;
}
/* === Jumbotron Sections === */
.jumbotron {
background-color: var(--primary-deep-blue);
position: relative;
overflow: hidden;
margin: 0 15px; /* Add margins to prevent full-width extension */
border-radius: 20px !important; /* Make it more rounded */
box-shadow: var(--shadow-lg);
padding: 1rem 1.5rem !important; /* Much smaller padding */
margin-top: 0.25rem !important; /* Almost no top margin */
margin-bottom: 1rem !important; /* Minimal bottom margin */
}
/* Make all text in jumbotron white for better visibility */
.jumbotron,
.jumbotron h1,
.jumbotron h2,
.jumbotron h3,
.jumbotron h4,
.jumbotron h5,
.jumbotron h6,
.jumbotron p,
.jumbotron .lead,
.jumbotron .display-4 {
color: white !important;
}
/* Override gradient text in jumbotron to be white */
.jumbotron .gradient-text {
background: none !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
-webkit-text-fill-color: white !important;
color: white !important;
}
/* Reduce internal spacing in jumbotron */
.jumbotron .display-4 {
font-size: 2.5rem !important; /* Smaller than default display-4 */
margin-bottom: 0.5rem !important; /* Much less margin */
line-height: 1.2 !important;
margin-top: 0 !important; /* No top margin */
}
.jumbotron .lead {
margin-bottom: 0.5rem !important;
font-size: 1.1rem !important;
}
.jumbotron h1 {
margin-bottom: 0.5rem !important;
margin-top: 0 !important; /* No top margin */
}
.jumbotron .mb-3 {
margin-bottom: 0.5rem !important;
}
/* Remove spacing from position-relative container */
.jumbotron .position-relative {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Hide or minimize decorative elements that take up space */
.jumbotron .wave-animation,
.jumbotron .blob {
position: absolute !important;
z-index: 0 !important;
}
/* Ensure content is above decorative elements */
.jumbotron .position-relative {
z-index: 1 !important;
}
@media (max-width: 768px) {
.jumbotron {
margin: 0 10px;
padding: 0.75rem 1rem !important; /* Much smaller padding on mobile */
}
}
@media (max-width: 576px) {
.jumbotron {
margin: 0 5px;
}
/* Improve mobile typography */
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
/* Better mobile spacing */
.container {
padding-left: 10px;
padding-right: 10px;
}
/* Mobile-friendly buttons */
.btn {
min-height: 44px; /* iOS minimum touch target */
font-size: 16px; /* Prevent zoom on iOS */
}
/* Improve mobile navigation */
.navbar-nav {
text-align: center;
}
.navbar-nav .nav-link {
padding: 0.75rem 1rem;
}
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
opacity: 0.1;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero h1 {
color: var(--background-white);
font-size: 3rem;
margin-bottom: 1rem;
}
.hero-highlight {
color: var(--accent-soft-yellow);
font-weight: 700;
}
.hero p {
color: rgba(255, 255, 255, 0.9);
font-size: 1.125rem;
max-width: 600px;
margin: 0 auto 2rem auto;
}
/* === Forms === */
.form-control {
border: 2px solid var(--border-light);
border-radius: 0.75rem;
padding: 0.75rem 1rem;
font-size: 1rem;
transition: all 0.2s ease;
background-color: var(--background-white);
color: var(--heading-dark);
}
.form-control:focus {
border-color: var(--secondary-sky-blue);
box-shadow: 0 0 0 3px rgba(69, 123, 157, 0.1);
outline: none;
}
.form-label {
font-weight: 600;
color: var(--primary-deep-blue);
margin-bottom: 0.5rem;
}
.input-group {
border-radius: 0.75rem;
overflow: hidden;
}
/* === Flash Messages === */
.flash-messages-container {
position: fixed;
top: 80px;
right: 20px;
z-index: 1050;
max-width: 400px;
width: 100%;
}
.modern-alert {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
border-radius: 12px;
border: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
animation: slideInRight 0.5s ease-out;
}
.alert-icon {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
}
.alert-content {
flex: 1;
}
.alert-message {
font-weight: 500;
line-height: 1.5;
}
.modern-close {
background: none;
border: none;
color: inherit;
opacity: 0.7;
padding: 0.5rem;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}
.modern-close:hover {
opacity: 1;
background: rgba(0, 0, 0, 0.1);
transform: scale(1.1);
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* === Progress Bar === */
.scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0%;
height: 3px;
background-color: var(--accent-soft-yellow);
z-index: 1060;
transition: width 0.1s ease;
}
/* === Back to Top Button === */
.back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: var(--primary-deep-blue);
color: var(--background-white);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
z-index: 1040;
box-shadow: 0 4px 15px rgba(29, 53, 87, 0.3);
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
transform: translateY(-5px) scale(1.1);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.4);
}
/* === Alerts === */
.alert {
border: none;
border-radius: 0.75rem;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
font-weight: 500;
border-left: 4px solid;
}
.alert-success {
background-color: #D4F6D4;
color: #0F5132;
border-left-color: #198754;
}
.alert-danger {
background-color: #F8D7DA;
color: #721C24;
border-left-color: #DC3545;
}
.alert-warning {
background-color: #FFF3CD;
color: #664D03;
border-left-color: var(--accent-soft-yellow);
}
.alert-info {
background-color: #CCE7F0;
color: #055160;
border-left-color: var(--secondary-sky-blue);
}
/* === Badges === */
.badge {
font-weight: 600;
padding: 0.5rem 1rem;
border-radius: 2rem;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-primary {
background-color: var(--primary-deep-blue);
color: var(--background-white);
}
.badge-warning {
background-color: var(--accent-soft-yellow);
color: var(--heading-dark);
}
.badge-secondary {
background-color: var(--neutral-gray);
color: var(--background-white);
}
/* === Stats Cards === */
.stats-card {
background-color: var(--background-white);
border-radius: 1rem;
padding: 2rem;
text-align: center;
border: 2px solid var(--border-light);
transition: all 0.3s ease;
}
.stats-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
border-color: var(--secondary-sky-blue);
}
.stats-number {
font-family: 'Playfair Display', serif;
font-size: 3rem;
font-weight: 700;
color: var(--primary-deep-blue);
line-height: 1;
margin-bottom: 0.5rem;
}
.stats-label {
color: var(--neutral-gray);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 0.875rem;
}
/* === Feature Cards === */
.feature-card {
background-color: var(--background-white);
border-radius: 1rem;
padding: 2rem;
text-align: center;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
border: 1px solid var(--border-light);
height: 100%;
}
.feature-card:hover {
transform: translateY(-8px);
box-shadow: var(--shadow-lg);
border-color: var(--accent-soft-yellow);
}
.feature-icon {
width: 80px;
height: 80px;
margin: 0 auto 1.5rem auto;
background-color: var(--secondary-sky-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 2rem;
}
.feature-card h4 {
color: var(--primary-deep-blue);
margin-bottom: 1rem;
}
.feature-card p {
color: var(--neutral-gray);
line-height: 1.6;
}
/* === Modern Footer === */
.modern-footer {
background-color: var(--primary-deep-blue);
color: var(--background-white);
margin-top: 5rem;
position: relative;
overflow: hidden;
}
.newsletter-section {
background-color: var(--secondary-sky-blue);
padding: 4rem 0;
position: relative;
}
.newsletter-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
opacity: 0.3;
}
.newsletter-content {
position: relative;
z-index: 2;
}
.newsletter-title {
font-family: 'Crimson Text', serif;
font-size: 2.5rem;
font-weight: 600;
color: var(--background-white);
margin-bottom: 1rem;
}
.newsletter-subtitle {
font-size: 1.125rem;
color: rgba(255, 255, 255, 0.9);
margin: 0;
line-height: 1.6;
}
.newsletter-form-modern {
position: relative;
z-index: 2;
}
.input-container {
display: flex;
background: rgba(255, 255, 255, 0.95);
border-radius: 50px;
padding: 6px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.newsletter-input {
flex: 1;
border: none;
background: transparent;
padding: 1rem 1.5rem;
font-size: 1rem;
color: var(--heading-dark);
border-radius: 50px;
}
.newsletter-input:focus {
outline: none;
box-shadow: none;
}
.newsletter-input::placeholder {
color: var(--neutral-gray);
}
.newsletter-btn {
background-color: var(--accent-soft-yellow);
color: var(--primary-deep-blue);
border: none;
border-radius: 50px;
padding: 1rem 2rem;
font-weight: 600;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
cursor: pointer;
white-space: nowrap;
}
.newsletter-btn:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(251, 192, 45, 0.4);
}
.newsletter-privacy {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.7);
margin-top: 0.75rem;
text-align: center;
}
.footer-main {
padding: 4rem 0 3rem;
position: relative;
z-index: 2;
}
.footer-brand-section {
margin-bottom: 2rem;
}
.footer-brand {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.brand-logo {
width: 55px;
height: 55px;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
}
.footer-brand-logo {
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 12px;
}
.brand-info .brand-name {
font-family: 'Crimson Text', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--background-white);
margin: 0;
line-height: 1;
}
.brand-info .brand-tagline {
font-family: 'Poppins', sans-serif;
font-size: 0.8rem;
font-weight: 400;
color: var(--accent-soft-yellow);
text-transform: uppercase;
letter-spacing: 1px;
margin: 0;
}
.brand-description {
color: rgba(255, 255, 255, 0.85);
line-height: 1.7;
margin-bottom: 2rem;
font-size: 1rem;
}
.social-title {
font-size: 1rem;
font-weight: 600;
color: var(--accent-soft-yellow);
margin-bottom: 1rem;
}
.social-links {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.social-link {
width: 45px;
height: 45px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 1.1rem;
transition: all 0.3s ease;
text-decoration: none;
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 12px;
opacity: 0;
transition: opacity 0.3s ease;
}
.social-link:hover {
transform: translateY(-3px);
color: var(--background-white);
}
.social-link i {
position: relative;
z-index: 2;
}
.social-link.twitter::before { background-color: #1DA1F2; }
.social-link.facebook::before { background-color: #1877F2; }
.social-link.instagram::before { background-color: #E4405F; }
.social-link.linkedin::before { background-color: #0077B5; }
.social-link.discord::before { background-color: #7289DA; }
.social-link.tiktok::before { background-color: #000000; }
.social-link:hover::before {
opacity: 1;
}
.footer-column {
margin-bottom: 2rem;
}
.footer-title {
font-family: 'Poppins', sans-serif;
font-size: 1.1rem;
font-weight: 600;
color: var(--accent-soft-yellow);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 0.75rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.85);
text-decoration: none;
font-weight: 400;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
padding: 0.25rem 0;
}
.footer-links a:hover {
color: var(--accent-soft-yellow);
text-decoration: none;
transform: translateX(5px);
}
.footer-stats {
display: flex;
flex-direction: column;
gap: 1rem;
}
.stat-item {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 1rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 10px;
border-left: 3px solid var(--accent-soft-yellow);
transition: all 0.3s ease;
}
.stat-item:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateX(5px);
}
.stat-number {
font-family: 'Crimson Text', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--accent-soft-yellow);
line-height: 1;
}
.stat-label {
font-size: 0.85rem;
color: rgba(255, 255, 255, 0.8);
font-weight: 500;
}
.footer-bottom {
background: rgba(0, 0, 0, 0.2);
padding: 2rem 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.copyright p {
margin: 0;
font-size: 0.95rem;
color: rgba(255, 255, 255, 0.8);
}
.footer-credits {
text-align: right;
}
.footer-credits p {
margin: 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.7);
}
.heart-pulse {
color: #EF4444;
animation: heartbeat 2s ease-in-out infinite;
display: inline-block;
}
@keyframes heartbeat {
0%, 50%, 100% { transform: scale(1); }
25%, 75% { transform: scale(1.2); }
}
.separator {
margin: 0 0.5rem;
opacity: 0.5;
}
.credits-link {
color: var(--accent-soft-yellow);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.credits-link:hover {
color: #F9A825;
text-decoration: underline;
}
.footer-floating-elements {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
overflow: hidden;
}
.floating-shape {
position: absolute;
border-radius: 50%;
background: rgba(251, 192, 45, 0.1);
animation: float 6s ease-in-out infinite;
}
.floating-shape.shape-1 {
width: 100px;
height: 100px;
top: 20%;
left: 10%;
animation-delay: 0s;
}
.floating-shape.shape-2 {
width: 60px;
height: 60px;
top: 60%;
right: 15%;
animation-delay: 2s;
}
.floating-shape.shape-3 {
width: 80px;
height: 80px;
bottom: 30%;
left: 70%;
animation-delay: 4s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.7;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 0.3;
}
}
.footer h5 {
color: var(--accent-soft-yellow);
font-family: 'Playfair Display', serif;
margin-bottom: 1rem;
}
.footer a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: all 0.2s ease;
}
.footer a:hover {
color: var(--accent-soft-yellow);
text-decoration: none;
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
margin-top: 2rem;
padding-top: 1rem;
text-align: center;
color: rgba(255, 255, 255, 0.7);
}
/* === Accordion (FAQ) === */
.accordion-item {
border: 1px solid var(--border-light);
border-radius: 0.75rem;
margin-bottom: 1rem;
overflow: hidden;
}
.accordion-header {
margin: 0;
}
.accordion-button {
background-color: var(--background-white);
color: var(--primary-deep-blue);
border: none;
padding: 1.25rem 1.5rem;
font-weight: 600;
font-size: 1.125rem;
transition: all 0.2s ease;
}
.accordion-button:not(.collapsed) {
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
color: var(--background-white);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: var(--secondary-sky-blue);
}
.accordion-body {
padding: 1.5rem;
background-color: var(--light-gray);
color: var(--heading-dark);
line-height: 1.7;
}
/* === Note Cards === */
.note-card {
border-radius: 1rem;
border: 1px solid var(--border-light);
overflow: hidden;
transition: all 0.3s ease;
background-color: var(--background-white);
margin-bottom: 1.5rem;
}
.note-card:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--secondary-sky-blue);
}
.note-header {
background: linear-gradient(135deg, var(--light-gray) 0%, var(--background-white) 100%);
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-light);
}
.note-author {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.5rem;
}
.note-author img {
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid var(--border-light);
}
.note-title {
color: var(--primary-deep-blue);
font-family: 'Playfair Display', serif;
font-weight: 600;
font-size: 1.25rem;
margin-bottom: 1rem;
}
.note-content {
padding: 1.5rem;
color: var(--heading-dark);
line-height: 1.7;
}
.note-footer {
background-color: var(--light-gray);
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-light);
display: flex;
justify-content: between;
align-items: center;
gap: 1rem;
}
/* === Marketplace Cards === */
.listing-card {
border-radius: 1rem;
overflow: hidden;
box-shadow: var(--shadow-sm);
transition: all 0.3s ease;
background-color: var(--background-white);
border: 1px solid var(--border-light);
}
.listing-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.listing-image {
width: 100%;
height: 200px;
object-fit: cover;
border-bottom: 1px solid var(--border-light);
}
.listing-content {
padding: 1.5rem;
}
.listing-price {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 700;
color: var(--accent-soft-yellow);
background-color: var(--primary-deep-blue);
padding: 0.25rem 0.75rem;
border-radius: 2rem;
display: inline-block;
margin-bottom: 1rem;
}
.listing-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--primary-deep-blue);
margin-bottom: 0.5rem;
}
/* === Responsive Design === */
@media (max-width: 768px) {
.hero h1 {
font-size: 2rem;
}
.hero p {
font-size: 1rem;
}
.stats-number {
font-size: 2rem;
}
.btn {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.card-body {
padding: 1rem;
}
.feature-card {
padding: 1.5rem;
}
.note-content,
.listing-content {
padding: 1rem;
}
}
/* === Utilities === */
.text-primary {
color: var(--primary-deep-blue) !important;
}
.text-secondary {
color: var(--secondary-sky-blue) !important;
}
.text-accent {
color: var(--accent-soft-yellow) !important;
}
.bg-primary {
background-color: var(--primary-deep-blue) !important;
}
.bg-secondary {
background-color: var(--secondary-sky-blue) !important;
}
.bg-accent {
background-color: var(--accent-soft-yellow) !important;
}
.border-accent {
border-color: var(--accent-soft-yellow) !important;
}
.shadow-sm {
box-shadow: var(--shadow-sm) !important;
}
.shadow-md {
box-shadow: var(--shadow-md) !important;
}
.shadow-lg {
box-shadow: var(--shadow-lg) !important;
}
.rounded-lg {
border-radius: 1rem !important;
}
.rounded-xl {
border-radius: 1.5rem !important;
}
/* === Modern Hero Section === */
.hero-modern {
position: relative;
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
overflow: hidden;
}
.hero-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.hero-particles {
position: absolute;
width: 100%;
height: 100%;
background-image: radial-gradient(2px 2px at 20px 30px, rgba(255, 255, 255, 0.1), transparent),
radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.1), transparent),
radial-gradient(1px 1px at 90px 40px, rgba(255, 255, 255, 0.1), transparent);
background-size: 150px 150px;
animation: particles 20s linear infinite;
}
@keyframes particles {
0% { background-position: 0 0, 0 0, 0 0; }
100% { background-position: 150px 150px, -150px 150px, 150px -150px; }
}
.hero-shapes .floating-shape {
position: absolute;
border-radius: 50%;
background: rgba(251, 192, 45, 0.1);
}
.hero-shapes .shape-1 {
width: 200px;
height: 200px;
top: 10%;
right: 10%;
animation: float 8s ease-in-out infinite;
}
.hero-shapes .shape-2 {
width: 150px;
height: 150px;
bottom: 20%;
left: 5%;
animation: float 6s ease-in-out infinite 2s;
}
.hero-shapes .shape-3 {
width: 100px;
height: 100px;
top: 60%;
right: 5%;
animation: float 10s ease-in-out infinite 1s;
}
.hero-content {
position: relative;
z-index: 2;
padding: 2rem 0;
}
.hero-badge {
display: inline-flex;
align-items: center;
padding: 0.75rem 1.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 50px;
color: var(--background-white);
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 2rem;
border: 1px solid rgba(255, 255, 255, 0.2);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.hero-badge-logo {
width: 22px;
height: 22px;
object-fit: contain;
border-radius: 6px;
}
.hero-title {
font-family: 'Crimson Text', serif;
font-size: 3.5rem;
font-weight: 600;
color: var(--background-white);
line-height: 1.2;
margin-bottom: 1.5rem;
}
.hero-highlight {
color: var(--accent-soft-yellow);
position: relative;
}
.hero-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, transparent, var(--accent-soft-yellow), transparent);
animation: glow 2s ease-in-out infinite alternate;
}
@keyframes glow {
0% { opacity: 0.5; transform: scaleX(0.8); }
100% { opacity: 1; transform: scaleX(1); }
}
.hero-description {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.9);
line-height: 1.7;
margin-bottom: 2.5rem;
max-width: 600px;
}
.hero-actions {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}
.btn-hero-primary,
.btn-hero-secondary {
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
display: flex;
align-items: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-hero-primary {
background: linear-gradient(135deg, var(--accent-soft-yellow) 0%, #F9A825 100%);
color: var(--primary-deep-blue);
border: none;
box-shadow: 0 8px 25px rgba(251, 192, 45, 0.4);
}
.btn-hero-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(251, 192, 45, 0.6);
color: var(--primary-deep-blue);
}
.btn-hero-secondary {
background: transparent;
color: var(--background-white);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.btn-hero-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.6);
color: var(--background-white);
transform: translateY(-3px);
}
.hero-stats {
display: flex;
gap: 2rem;
}
.hero-stats .stat {
text-align: center;
}
.hero-stats .stat-number {
font-family: 'Crimson Text', serif;
font-size: 2rem;
font-weight: 600;
color: var(--accent-soft-yellow);
line-height: 1;
}
.hero-stats .stat-label {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
margin-top: 0.5rem;
}
.hero-visual {
position: relative;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
.hero-mockup {
background: rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 2rem;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
max-width: 500px;
}
.mockup-window {
background: var(--background-white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.window-header {
background: #F5F5F5;
padding: 1rem;
display: flex;
align-items: center;
}
.window-controls {
display: flex;
gap: 0.5rem;
}
.window-controls span {
width: 12px;
height: 12px;
border-radius: 50%;
}
.window-controls span:nth-child(1) { background: #FF5F57; }
.window-controls span:nth-child(2) { background: #FFBD2E; }
.window-controls span:nth-child(3) { background: #28CA42; }
.window-content {
padding: 1.5rem;
}
.demo-search-bar {
display: flex;
align-items: center;
background: var(--light-gray);
padding: 1rem;
border-radius: 25px;
margin-bottom: 1.5rem;
gap: 1rem;
}
.demo-search-bar i {
color: var(--neutral-gray);
}
.typing-animation {
color: var(--heading-dark);
position: relative;
}
.typing-animation::after {
content: '|';
animation: blink 1s infinite;
}
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.demo-results {
display: flex;
flex-direction: column;
gap: 1rem;
}
.demo-note-card {
display: flex;
align-items: center;
padding: 1rem;
background: var(--background-white);
border-radius: 12px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
gap: 1rem;
}
.demo-note-card.active {
border-color: var(--secondary-sky-blue);
box-shadow: 0 4px 15px rgba(69, 123, 157, 0.2);
}
.note-avatar {
width: 40px;
height: 40px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 50%;
}
.note-info {
flex: 1;
}
.note-title {
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 0.25rem;
}
.note-meta {
font-size: 0.85rem;
color: var(--neutral-gray);
}
.download-btn {
padding: 0.5rem 1rem;
background: var(--accent-soft-yellow);
color: var(--primary-deep-blue);
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.download-btn:hover {
transform: scale(1.05);
}
/* === Modern Sections === */
.features-modern,
.how-it-works-modern,
.testimonials-modern,
.stats-modern,
.cta-modern {
padding: 5rem 0;
position: relative;
}
.features-modern {
background: var(--light-gray);
}
.section-header {
margin-bottom: 4rem;
}
.section-badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
color: var(--background-white);
border-radius: 50px;
font-weight: 500;
font-size: 0.9rem;
margin-bottom: 1rem;
}
.section-title {
font-family: 'Crimson Text', serif;
font-size: 2.2rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 1rem;
line-height: 1.3;
}
.section-description {
font-size: 1.125rem;
color: var(--neutral-gray);
line-height: 1.7;
max-width: 600px;
margin: 0 auto;
}
.feature-card-modern {
background: var(--background-white);
border-radius: 20px;
padding: 2.5rem;
height: 100%;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.feature-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.feature-card-modern:hover::before {
transform: scaleX(1);
}
.feature-card-modern:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(29, 53, 87, 0.15);
}
.feature-card-modern.featured {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
transform: scale(1.05);
}
.feature-card-modern.featured .feature-icon {
background: var(--accent-soft-yellow);
color: var(--primary-deep-blue);
}
.feature-card-modern.featured .feature-title,
.feature-card-modern.featured .feature-description,
.feature-card-modern.featured .feature-benefits,
.feature-card-modern.featured .feature-benefits li {
color: var(--background-white) !important;
}
.feature-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent-soft-yellow);
color: var(--primary-deep-blue);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.feature-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 8px 25px rgba(69, 123, 157, 0.3);
}
.feature-title {
font-family: 'Crimson Text', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 1rem;
}
.feature-description {
color: var(--neutral-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.feature-benefits {
list-style: none;
padding: 0;
margin: 0;
}
.feature-benefits li {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
color: var(--heading-dark);
}
.feature-benefits i {
color: #10B981;
font-size: 0.9rem;
}
/* === Timeline === */
.timeline-container {
position: relative;
max-width: 800px;
margin: 0 auto;
}
.timeline-line {
position: absolute;
left: 50%;
top: 0;
bottom: 0;
width: 2px;
background: linear-gradient(180deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
transform: translateX(-50%);
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
display: flex;
align-items: center;
gap: 2rem;
}
.timeline-item-reverse {
flex-direction: row-reverse;
}
.timeline-marker {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--accent-soft-yellow) 0%, #F9A825 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(251, 192, 45, 0.4);
z-index: 2;
}
.timeline-number {
font-weight: 700;
color: var(--primary-deep-blue);
font-size: 1.1rem;
}
.timeline-content {
background: var(--background-white);
border-radius: 15px;
padding: 2rem;
flex: 1;
max-width: 350px;
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.1);
border: 1px solid var(--border-light);
position: relative;
}
.timeline-content::before {
content: '';
position: absolute;
top: 50%;
width: 0;
height: 0;
border: 15px solid transparent;
transform: translateY(-50%);
}
.timeline-item:not(.timeline-item-reverse) .timeline-content::before {
right: -30px;
border-left-color: var(--background-white);
}
.timeline-item-reverse .timeline-content::before {
left: -30px;
border-right-color: var(--background-white);
}
.timeline-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 1.5rem;
margin-bottom: 1rem;
}
.timeline-title {
font-family: 'Crimson Text', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 0.75rem;
}
.timeline-description {
color: var(--neutral-gray);
line-height: 1.6;
}
/* === Testimonials === */
.testimonials-modern {
background: var(--light-gray);
}
.testimonial-card {
background: var(--background-white);
border-radius: 20px;
padding: 2rem;
height: 100%;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.testimonial-card.featured {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
transform: scale(1.05);
}
.testimonial-card.featured .testimonial-text,
.testimonial-card.featured .author-name {
color: var(--background-white);
}
.testimonial-card.featured .author-title {
color: rgba(255, 255, 255, 0.8);
}
.testimonial-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(29, 53, 87, 0.15);
}
.testimonial-content {
margin-bottom: 1.5rem;
}
.testimonial-rating {
display: flex;
gap: 0.25rem;
margin-bottom: 1rem;
color: var(--accent-soft-yellow);
}
.testimonial-text {
font-style: italic;
line-height: 1.7;
color: var(--heading-dark);
position: relative;
}
.testimonial-text::before {
content: '"';
font-size: 3rem;
color: var(--accent-soft-yellow);
position: absolute;
top: -10px;
left: -20px;
font-family: 'Crimson Text', serif;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1rem;
}
.author-avatar img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--border-light);
}
.author-name {
font-weight: 600;
color: var(--heading-dark);
margin: 0;
}
.author-title {
font-size: 0.9rem;
color: var(--neutral-gray);
margin: 0;
}
/* === Stats === */
.stats-modern {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
position: relative;
overflow: hidden;
}
.stats-background {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
opacity: 0.3;
}
.stats-modern .stat-item {
position: relative;
z-index: 2;
}
.stats-modern .stat-icon {
width: 60px;
height: 60px;
background: var(--accent-soft-yellow);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-deep-blue);
font-size: 1.5rem;
margin: 0 auto 1rem auto;
}
.stats-modern .stat-number {
font-family: 'Crimson Text', serif;
font-size: 3rem;
font-weight: 700;
color: var(--background-white);
line-height: 1;
}
.stats-modern .stat-label {
font-size: 1rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
}
/* === CTA === */
.cta-modern {
background: var(--background-white);
text-align: center;
}
.cta-content {
max-width: 800px;
margin: 0 auto;
}
.cta-badge {
display: inline-flex;
align-items: center;
padding: 0.5rem 1rem;
background: linear-gradient(135deg, var(--accent-soft-yellow) 0%, #F9A825 100%);
color: var(--primary-deep-blue);
border-radius: 50px;
font-weight: 600;
font-size: 0.9rem;
margin-bottom: 1.5rem;
}
.cta-title {
font-family: 'Crimson Text', serif;
font-size: 2.5rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 1rem;
}
.cta-description {
font-size: 1.125rem;
color: var(--neutral-gray);
line-height: 1.7;
margin-bottom: 2.5rem;
}
.cta-actions {
display: flex;
gap: 1rem;
justify-content: center;
margin-bottom: 1.5rem;
}
.btn-cta-primary,
.btn-cta-secondary {
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 600;
font-size: 1.1rem;
text-decoration: none;
display: flex;
align-items: center;
transition: all 0.3s ease;
}
.btn-cta-primary {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
border: none;
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.3);
}
.btn-cta-primary:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(29, 53, 87, 0.4);
color: var(--background-white);
}
.btn-cta-secondary {
background: transparent;
color: var(--primary-deep-blue);
border: 2px solid var(--border-light);
}
.btn-cta-secondary:hover {
background: var(--light-gray);
border-color: var(--secondary-sky-blue);
color: var(--primary-deep-blue);
transform: translateY(-3px);
}
.cta-guarantee {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
color: var(--neutral-gray);
font-size: 0.9rem;
}
/* === Animation Classes === */
.fade-in {
animation: fadeIn 0.6s ease-in;
}
.slide-up {
animation: slideUp 0.6s ease-out;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.7;
}
50% {
transform: translateY(-20px) rotate(180deg);
opacity: 0.3;
}
}
/* === Enhanced Responsive Design === */
@media (max-width: 1200px) {
.hero-title {
font-size: 3rem;
}
.section-title {
font-size: 2rem;
}
.hero-mockup {
max-width: 400px;
}
}
@media (max-width: 992px) {
.hero-title {
font-size: 2.5rem;
}
.section-title {
font-size: 1.8rem;
}
.hero-actions {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.hero-stats {
gap: 1.5rem;
justify-content: center;
}
.timeline-line {
display: none;
}
.timeline-item,
.timeline-item-reverse {
flex-direction: column;
text-align: center;
}
.timeline-marker {
position: static;
transform: none;
margin-bottom: 1rem;
}
.timeline-content {
max-width: 100%;
}
.timeline-content::before {
display: none;
}
.cta-actions {
flex-direction: column;
align-items: center;
gap: 0.75rem;
}
.hero-mockup {
max-width: 350px;
padding: 1.5rem;
}
.feature-card-modern {
padding: 2rem;
}
.testimonial-card {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.hero-title {
font-size: 2.2rem;
}
.section-title {
font-size: 1.6rem;
}
.hero-description {
font-size: 1.1rem;
}
.section-description {
font-size: 1rem;
}
.hero-stats {
flex-direction: column;
gap: 1rem;
align-items: center;
text-align: center;
}
.hero-mockup {
margin-top: 2rem;
padding: 1rem;
max-width: 300px;
}
.window-content {
padding: 1rem;
}
.demo-search-bar {
padding: 0.75rem;
font-size: 0.9rem;
}
.feature-card-modern {
padding: 1.5rem;
}
.feature-card-modern.featured {
transform: none;
}
.feature-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.btn-hero-primary,
.btn-hero-secondary,
.btn-cta-primary,
.btn-cta-secondary {
padding: 0.8rem 1.5rem;
font-size: 1rem;
}
.navbar-actions {
gap: 0.5rem;
}
.auth-buttons {
flex-direction: row;
gap: 0.5rem;
width: auto;
}
.btn-modern {
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
width: auto;
}
}
@media (max-width: 576px) {
.hero-title {
font-size: 1.8rem;
}
.section-title {
font-size: 1.4rem;
}
.hero-description {
font-size: 1rem;
}
.hero-badge {
padding: 0.5rem 1rem;
font-size: 0.8rem;
}
.section-badge {
padding: 0.4rem 0.8rem;
font-size: 0.8rem;
}
.hero-mockup {
max-width: 280px;
padding: 0.75rem;
}
.mockup-window {
border-radius: 8px;
}
.window-content {
padding: 0.75rem;
}
.demo-note-card {
padding: 0.75rem;
gap: 0.75rem;
}
.note-title {
font-size: 0.9rem;
}
.note-meta {
font-size: 0.75rem;
}
.download-btn {
padding: 0.4rem 0.8rem;
font-size: 0.75rem;
}
.feature-card-modern,
.testimonial-card,
.team-card {
padding: 1.25rem;
}
.btn-hero-primary,
.btn-hero-secondary,
.btn-cta-primary,
.btn-cta-secondary {
padding: 0.7rem 1.2rem;
font-size: 0.9rem;
width: auto;
justify-content: center;
}
.stats-modern .stat-number {
font-size: 2.5rem;
}
.impact-stats .stat-number {
font-size: 2rem;
}
.container-fluid {
padding-left: 1rem;
padding-right: 1rem;
}
.hero-actions {
width: 100%;
}
.cta-actions {
width: 100%;
}
}
/* === About Page Specific Styles === */
.about-hero {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
position: relative;
overflow: hidden;
padding: 5rem 0;
}
.min-vh-75 {
min-height: 75vh;
}
/* === Mission & Vision === */
.mission-vision {
padding: 5rem 0;
background: var(--light-gray);
}
.value-card {
background: var(--background-white);
border-radius: 20px;
padding: 2.5rem;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.value-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.value-card:hover::before {
transform: scaleX(1);
}
.value-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(29, 53, 87, 0.15);
}
.value-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 8px 25px rgba(69, 123, 157, 0.3);
}
.value-title {
font-family: 'Crimson Text', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 1rem;
}
.value-description {
color: var(--neutral-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.value-points {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.point-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: var(--heading-dark);
font-weight: 500;
}
.point-item i {
color: #10B981;
font-size: 1rem;
}
/* === Our Story === */
.our-story {
padding: 5rem 0;
background: var(--background-white);
}
.story-visual {
display: flex;
justify-content: center;
align-items: center;
}
.story-mockup {
background: var(--light-gray);
border-radius: 20px;
padding: 3rem;
border: 2px dashed var(--border-light);
max-width: 400px;
position: relative;
}
.napkin-sketch {
position: relative;
background: #FFFEF7;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
transform: rotate(-3deg);
}
.sketch-lines {
position: absolute;
top: 1rem;
left: 1rem;
right: 1rem;
bottom: 1rem;
}
.sketch-line {
height: 2px;
background: #DDD;
margin-bottom: 0.5rem;
width: 0;
transition: width 0.8s ease;
border-radius: 1px;
}
.sketch-line.line-1 { width: 80%; }
.sketch-line.line-2 { width: 60%; }
.sketch-line.line-3 { width: 90%; }
.sketch-line.line-4 { width: 45%; }
.sketch-text {
font-family: 'Crimson Text', serif;
font-size: 1.8rem;
font-weight: 600;
color: var(--primary-deep-blue);
text-align: center;
margin: 1rem 0;
opacity: 0;
transition: opacity 0.5s ease;
position: relative;
z-index: 2;
}
.sketch-arrow {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-top: 20px solid var(--accent-soft-yellow);
margin: 0.5rem auto;
opacity: 0;
transition: opacity 0.5s ease;
}
.sketch-idea {
font-family: 'Poppins', sans-serif;
font-size: 1rem;
font-weight: 600;
color: var(--accent-soft-yellow);
text-align: center;
opacity: 0;
transition: opacity 0.5s ease;
position: relative;
z-index: 2;
}
.story-timeline {
display: flex;
flex-direction: column;
gap: 2rem;
}
.story-timeline .timeline-item {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.story-timeline .timeline-marker {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--accent-soft-yellow) 0%, #F9A825 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-deep-blue);
font-size: 1.2rem;
font-weight: 600;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(251, 192, 45, 0.4);
}
.story-timeline .timeline-content h4 {
font-family: 'Crimson Text', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 0.5rem;
}
.story-timeline .timeline-content p {
color: var(--neutral-gray);
line-height: 1.6;
margin: 0;
}
/* === Meet the Team === */
.meet-team {
padding: 5rem 0;
background: var(--light-gray);
}
.team-card {
background: var(--background-white);
border-radius: 20px;
padding: 2rem;
height: 100%;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
text-align: center;
position: relative;
overflow: hidden;
}
.team-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.team-card:hover::before {
transform: scaleX(1);
}
.team-avatar {
position: relative;
margin-bottom: 1.5rem;
display: inline-block;
}
.avatar-placeholder {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 2.5rem;
margin: 0 auto;
position: relative;
z-index: 2;
}
.avatar-ring {
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
border: 3px solid var(--accent-soft-yellow);
border-radius: 50%;
opacity: 0.6;
transition: all 0.3s ease;
}
.team-name {
font-family: 'Crimson Text', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 0.5rem;
}
.team-role {
color: var(--secondary-sky-blue);
font-weight: 600;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.team-bio {
color: var(--neutral-gray);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.team-skills {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.skill-tag {
background: var(--light-gray);
color: var(--heading-dark);
padding: 0.25rem 0.75rem;
border-radius: 15px;
font-size: 0.75rem;
font-weight: 500;
border: 1px solid var(--border-light);
}
/* === Core Values === */
.core-values {
padding: 5rem 0;
background: var(--background-white);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.value-item {
text-align: center;
padding: 2rem;
background: var(--background-white);
border-radius: 20px;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.value-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--secondary-sky-blue) 0%, var(--accent-soft-yellow) 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.value-item:hover::before {
transform: scaleX(1);
}
.value-item:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(29, 53, 87, 0.15);
}
.value-icon-modern {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 2rem;
margin: 0 auto 1.5rem auto;
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.3);
}
.value-name {
font-family: 'Crimson Text', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 1rem;
}
.value-text {
color: var(--neutral-gray);
line-height: 1.6;
font-size: 0.95rem;
}
/* === Impact Stats === */
.impact-stats {
padding: 5rem 0;
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
position: relative;
overflow: hidden;
}
.impact-stats::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml;utf8,');
opacity: 0.3;
}
.stats-content {
position: relative;
z-index: 2;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.impact-stats .stat-card {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 20px;
padding: 2rem;
text-align: center;
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
}
.impact-stats .stat-card:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.15);
}
.impact-stats .stat-icon {
width: 60px;
height: 60px;
background: var(--accent-soft-yellow);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-deep-blue);
font-size: 1.5rem;
margin: 0 auto 1rem auto;
}
.impact-stats .stat-number {
font-family: 'Crimson Text', serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--background-white);
line-height: 1;
margin-bottom: 0.5rem;
}
.impact-stats .stat-label {
font-size: 1.1rem;
color: var(--background-white);
font-weight: 600;
margin-bottom: 0.5rem;
}
.stat-description {
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
line-height: 1.5;
}
/* === Join Mission === */
.join-mission {
padding: 5rem 0;
background: var(--background-white);
}
/* === Responsive Design for About Page === */
@media (max-width: 992px) {
.values-grid {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.stats-grid {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.story-timeline .timeline-item {
flex-direction: column;
text-align: center;
}
.value-card {
padding: 2rem;
}
.team-card {
padding: 1.5rem;
}
.story-mockup {
padding: 2rem;
max-width: 350px;
}
}
@media (max-width: 768px) {
.values-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.stats-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.napkin-sketch {
padding: 1.25rem;
transform: rotate(-1deg);
}
.sketch-text {
font-size: 1.4rem;
}
.team-skills {
justify-content: center;
}
.about-hero {
padding: 2.5rem 0;
}
.mission-vision,
.our-story,
.meet-team,
.core-values,
.impact-stats,
.join-mission {
padding: 2.5rem 0;
}
.value-card {
padding: 1.5rem;
}
.team-card {
padding: 1.25rem;
}
.value-icon,
.value-icon-modern {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.story-mockup {
padding: 1.5rem;
max-width: 300px;
}
.impact-stats .stat-card {
padding: 1.5rem;
}
}
@media (max-width: 576px) {
.values-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.stats-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.napkin-sketch {
padding: 1rem;
transform: rotate(-1deg);
}
.sketch-text {
font-size: 1.2rem;
}
.about-hero {
padding: 2rem 0;
}
.mission-vision,
.our-story,
.meet-team,
.core-values,
.impact-stats,
.join-mission {
padding: 2rem 0;
}
.value-card {
padding: 1.25rem;
}
.team-card {
padding: 1rem;
}
.avatar-placeholder {
width: 80px;
height: 80px;
font-size: 2rem;
}
.team-name {
font-size: 1.1rem;
}
.team-bio {
font-size: 0.85rem;
}
.story-mockup {
padding: 1rem;
max-width: 280px;
}
.story-timeline .timeline-marker {
width: 40px;
height: 40px;
font-size: 1rem;
}
.impact-stats .stat-card {
padding: 1.25rem;
}
.impact-stats .stat-number {
font-size: 2rem;
}
.impact-stats .stat-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
}
}
/* === Bootstrap Modal Fixes === */
.modal-dialog {
max-width: 500px !important;
margin: 1.75rem auto !important;
}
.modal-content {
border-radius: 15px !important;
border: none !important;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15) !important;
}
.modal-header {
border-bottom: 1px solid var(--border-light) !important;
border-radius: 15px 15px 0 0 !important;
padding: 1.5rem !important;
}
.modal-body {
padding: 1.5rem !important;
}
.modal-footer {
border-top: 1px solid var(--border-light) !important;
border-radius: 0 0 15px 15px !important;
padding: 1rem 1.5rem !important;
}
.modal-title {
font-family: 'Crimson Text', serif !important;
font-size: 1.5rem !important;
font-weight: 600 !important;
color: var(--heading-dark) !important;
}
/* Fix form inputs in modals */
.modal .form-control {
border-radius: 8px !important;
border: 1px solid var(--border-light) !important;
padding: 0.75rem 1rem !important;
font-size: 1rem !important;
}
.modal .form-control:focus {
border-color: var(--secondary-sky-blue) !important;
box-shadow: 0 0 0 0.2rem rgba(69, 123, 157, 0.25) !important;
}
.modal .btn {
border-radius: 8px !important;
padding: 0.75rem 1.5rem !important;
font-weight: 500 !important;
}
/* Responsive modal sizing */
@media (max-width: 768px) {
.modal-dialog {
max-width: 95% !important;
margin: 1rem auto !important;
}
.modal-header,
.modal-body,
.modal-footer {
padding: 1rem !important;
}
.modal-title {
font-size: 1.25rem !important;
}
}
@media (max-width: 576px) {
.modal-dialog {
max-width: 98% !important;
margin: 0.5rem auto !important;
}
.modal-header,
.modal-body {
padding: 0.75rem !important;
}
.modal-footer {
padding: 0.5rem 0.75rem !important;
}
}
/* === Contact Page Specific Styles === */
.contact-hero {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
position: relative;
overflow: hidden;
padding: 4rem 0;
}
.min-vh-60 {
min-height: 60vh;
}
/* === Contact Methods === */
.contact-methods {
padding: 5rem 0;
background: var(--light-gray);
}
.contact-method-card {
background: var(--background-white);
border-radius: 20px;
padding: 2.5rem;
height: 100%;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-align: center;
}
.contact-method-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.contact-method-card:hover::before {
transform: scaleX(1);
}
.contact-method-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(29, 53, 87, 0.15);
}
.contact-method-card.featured {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
transform: scale(1.05);
}
.contact-method-card.featured .method-title,
.contact-method-card.featured .method-description,
.contact-method-card.featured .info-label,
.contact-method-card.featured .info-value {
color: var(--background-white);
}
.contact-method-card.featured .method-icon {
background: var(--accent-soft-yellow);
color: var(--primary-deep-blue);
}
.method-badge {
position: absolute;
top: 1rem;
right: 1rem;
background: var(--accent-soft-yellow);
color: var(--primary-deep-blue);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
}
.method-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 2rem;
margin: 0 auto 1.5rem auto;
box-shadow: 0 8px 25px rgba(69, 123, 157, 0.3);
}
.method-title {
font-family: 'Crimson Text', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 1rem;
}
.method-description {
color: var(--neutral-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
}
.method-info {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--light-gray);
border-radius: 10px;
margin-bottom: 1.5rem;
}
.contact-method-card.featured .method-info {
background: rgba(255, 255, 255, 0.1);
}
.info-label {
font-weight: 500;
color: var(--neutral-gray);
}
.info-value {
font-weight: 600;
color: var(--secondary-sky-blue);
}
.contact-method-card.featured .info-value {
color: var(--accent-soft-yellow);
}
.btn-method {
background: var(--secondary-sky-blue);
color: var(--background-white);
border: none;
border-radius: 25px;
padding: 0.75rem 1.5rem;
font-weight: 600;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s ease;
}
.btn-method:hover {
background: var(--primary-deep-blue);
color: var(--background-white);
transform: translateY(-2px);
}
.contact-method-card.featured .btn-method {
background: var(--accent-soft-yellow);
color: var(--primary-deep-blue);
}
.contact-method-card.featured .btn-method:hover {
background: #F9A825;
color: var(--primary-deep-blue);
}
/* === Contact Form === */
.contact-form-section {
padding: 5rem 0;
background: var(--background-white);
}
.contact-form-card {
background: var(--background-white);
border-radius: 20px;
padding: 3rem;
border: 1px solid var(--border-light);
box-shadow: 0 10px 30px rgba(29, 53, 87, 0.1);
}
.form-header {
text-align: center;
margin-bottom: 2.5rem;
}
.form-title {
font-family: 'Crimson Text', serif;
font-size: 2rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 1rem;
}
.form-description {
color: var(--neutral-gray);
font-size: 1.1rem;
line-height: 1.6;
}
.modern-form .form-group {
margin-bottom: 1.5rem;
}
.modern-form .form-label {
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 0.5rem;
display: block;
}
.input-wrapper,
.select-wrapper,
.textarea-wrapper {
position: relative;
}
.modern-input,
.modern-select,
.modern-textarea {
border: 2px solid var(--border-light);
border-radius: 12px;
padding: 1rem 3rem 1rem 1rem;
font-size: 1rem;
transition: all 0.3s ease;
background: var(--background-white);
width: 100%;
}
.modern-input:focus,
.modern-select:focus,
.modern-textarea:focus {
border-color: var(--secondary-sky-blue);
box-shadow: 0 0 0 0.2rem rgba(69, 123, 157, 0.25);
outline: none;
}
.input-icon,
.select-icon,
.textarea-icon {
position: absolute;
right: 1rem;
top: 50%;
transform: translateY(-50%);
color: var(--neutral-gray);
pointer-events: none;
transition: all 0.3s ease;
}
.textarea-icon {
top: 1rem;
transform: none;
}
.input-wrapper.focused .input-icon,
.select-wrapper.focused .select-icon,
.textarea-wrapper.focused .textarea-icon {
color: var(--secondary-sky-blue);
}
.modern-textarea {
min-height: 120px;
resize: vertical;
padding-right: 3rem;
}
.form-actions {
text-align: center;
margin-top: 2rem;
}
.btn-submit {
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
border: none;
border-radius: 25px;
padding: 1rem 2.5rem;
font-size: 1.1rem;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.3);
color: var(--background-white);
}
.btn-submit.loading span {
opacity: 0;
}
.btn-submit .btn-loading {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
transition: opacity 0.3s ease;
}
.btn-submit.loading .btn-loading {
opacity: 1;
}
.form-note {
margin-top: 1rem;
color: var(--neutral-gray);
font-size: 0.9rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
/* === Contact Info === */
.contact-info {
padding: 5rem 0;
background: var(--light-gray);
}
.contact-info-card {
background: var(--background-white);
border-radius: 20px;
padding: 2rem;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
text-align: center;
height: 100%;
}
.contact-info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(29, 53, 87, 0.15);
}
.info-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 1.5rem;
margin: 0 auto 1.5rem auto;
}
.info-title {
font-family: 'Crimson Text', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 0.5rem;
}
.info-description {
color: var(--neutral-gray);
margin-bottom: 1rem;
font-size: 0.95rem;
}
.info-link {
color: var(--secondary-sky-blue);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.info-link:hover {
color: var(--primary-deep-blue);
text-decoration: underline;
}
/* === Team Section === */
.contact-team {
padding: 5rem 0;
background: var(--background-white);
}
.team-member-card {
background: var(--background-white);
border-radius: 20px;
padding: 2rem;
border: 1px solid var(--border-light);
transition: all 0.3s ease;
text-align: center;
height: 100%;
position: relative;
overflow: hidden;
}
.team-member-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--secondary-sky-blue) 0%, var(--accent-soft-yellow) 100%);
transform: scaleX(0);
transition: transform 0.3s ease;
}
.team-member-card:hover::before {
transform: scaleX(1);
}
.team-member-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(29, 53, 87, 0.15);
}
.member-avatar {
margin-bottom: 1.5rem;
}
.member-avatar .avatar-placeholder {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
font-size: 2rem;
margin: 0 auto;
}
.member-name {
font-family: 'Crimson Text', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--heading-dark);
margin-bottom: 0.5rem;
}
.member-role {
color: var(--secondary-sky-blue);
font-weight: 600;
margin-bottom: 1rem;
font-size: 0.9rem;
}
.member-bio {
color: var(--neutral-gray);
line-height: 1.6;
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.member-contact {
display: flex;
justify-content: center;
}
.contact-link {
width: 40px;
height: 40px;
background: var(--secondary-sky-blue);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--background-white);
text-decoration: none;
transition: all 0.3s ease;
}
.contact-link:hover {
background: var(--primary-deep-blue);
color: var(--background-white);
transform: scale(1.1);
}
/* === Response Promise === */
.response-promise {
padding: 5rem 0;
background: linear-gradient(135deg, var(--primary-deep-blue) 0%, var(--secondary-sky-blue) 100%);
color: var(--background-white);
}
.promise-card {
max-width: 800px;
margin: 0 auto;
}
.promise-icon {
width: 80px;
height: 80px;
background: var(--accent-soft-yellow);
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-deep-blue);
font-size: 2rem;
margin: 0 auto 2rem auto;
}
.promise-title {
font-family: 'Crimson Text', serif;
font-size: 2rem;
font-weight: 600;
margin-bottom: 1rem;
}
.promise-description {
font-size: 1.1rem;
line-height: 1.7;
margin-bottom: 3rem;
opacity: 0.9;
}
.response-times {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.response-item {
text-align: center;
padding: 1.5rem;
background: rgba(255, 255, 255, 0.1);
border-radius: 15px;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.response-time {
font-family: 'Crimson Text', serif;
font-size: 2rem;
font-weight: 700;
color: var(--accent-soft-yellow);
margin-bottom: 0.5rem;
}
.response-type {
font-weight: 500;
opacity: 0.9;
}
/* === Responsive Design for Contact Page === */
@media (max-width: 992px) {
.contact-method-card.featured {
transform: none;
}
.contact-form-card {
padding: 2rem;
}
.response-times {
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.contact-hero {
padding: 3rem 0;
}
.contact-methods,
.contact-form-section,
.contact-info,
.contact-team,
.response-promise {
padding: 3rem 0;
}
.contact-form-card {
padding: 1.5rem;
}
.form-title {
font-size: 1.6rem;
}
.method-icon {
width: 60px;
height: 60px;
font-size: 1.5rem;
}
.method-title {
font-size: 1.25rem;
}
.btn-submit {
width: 100%;
justify-content: center;
}
.response-times {
grid-template-columns: 1fr;
gap: 1rem;
}
.response-item {
padding: 1rem;
}
.response-time {
font-size: 1.5rem;
}
}
@media (max-width: 576px) {
.contact-form-card {
padding: 1rem;
}
.form-header {
margin-bottom: 2rem;
}
.form-title {
font-size: 1.4rem;
}
.modern-input,
.modern-select,
.modern-textarea {
padding: 0.8rem 2.5rem 0.8rem 0.8rem;
}
.btn-submit {
padding: 0.8rem 2rem;
font-size: 1rem;
}
.contact-method-card,
.contact-info-card,
.team-member-card {
padding: 1.5rem;
}
.promise-title {
font-size: 1.6rem;
}
.promise-description {
font-size: 1rem;
}
}
/* === Specific Component Overrides === */
.pagination {
justify-content: center;
margin-top: 2rem;
}
.pagination .page-link {
color: var(--secondary-sky-blue);
border: 1px solid var(--border-light);
border-radius: 0.5rem;
margin: 0 0.25rem;
padding: 0.5rem 1rem;
font-weight: 500;
}
.pagination .page-link:hover {
background-color: var(--secondary-sky-blue);
color: var(--background-white);
border-color: var(--secondary-sky-blue);
}
.pagination .active .page-link {
background-color: var(--primary-deep-blue);
border-color: var(--primary-deep-blue);
color: var(--background-white);
}
/* === Loading States === */
.loading {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid var(--border-light);
border-top: 2px solid var(--primary-deep-blue);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Search Section */
.search-section .card {
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(69, 123, 157, 0.2);
}
.search-input-wrapper {
position: relative;
}
.search-input-wrapper input {
padding-left: 3rem;
border-radius: 25px;
background: rgba(255, 255, 255, 0.7);
transition: all 0.3s ease;
}
.search-input-wrapper input:focus {
background: var(--background-white);
box-shadow: 0 4px 15px rgba(69, 123, 157, 0.2);
}
/* Quick Navigation */
.quick-nav .nav-card {
transition: all 0.3s ease;
}
.quick-nav .nav-card:hover {
transform: translateY(-5px);
}
.quick-nav .card {
background: rgba(255, 255, 255, 0.9);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border: 1px solid rgba(69, 123, 157, 0.2);
transition: all 0.3s ease;
}
.quick-nav .card:hover {
background: var(--background-white);
border-color: var(--secondary-sky-blue);
}
/* FAQ Content Styling */
.steps-container {
margin: 1.5rem 0;
}
.step-item {
background: var(--light-gray);
border-radius: 10px;
padding: 1rem;
margin-bottom: 1rem;
}
.step-number {
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
color: var(--background-white);
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
margin-right: 1rem;
flex-shrink: 0;
}
.step-content h6 {
margin-bottom: 0.5rem;
color: var(--primary-deep-blue);
}
.requirement-box, .limits-info, .safety-info, .help-note, .response-promise {
border-radius: 15px;
border: 2px solid transparent;
background-clip: padding-box;
}
.requirement-box {
background: rgba(29, 53, 87, 0.1);
border-color: rgba(29, 53, 87, 0.3);
}
.limits-info {
background: rgba(69, 123, 157, 0.1);
border-color: rgba(69, 123, 157, 0.3);
}
.safety-info {
background: rgba(251, 192, 45, 0.1);
border-color: rgba(251, 192, 45, 0.3);
}
.help-note {
background: rgba(69, 123, 157, 0.1);
border-color: rgba(69, 123, 157, 0.3);
}
.response-promise {
background: rgba(40, 167, 69, 0.1);
border-color: rgba(40, 167, 69, 0.3);
}
/* File Type Cards */
.file-type-card {
transition: all 0.3s ease;
background: var(--background-white);
}
.file-type-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
/* Process Flow */
.process-flow {
margin: 2rem 0;
}
.process-step {
padding: 1.5rem 1rem;
}
.process-icon {
margin-bottom: 1rem;
}
/* App Status Cards */
.app-status .status-card {
background: var(--background-white);
transition: all 0.3s ease;
}
.app-status .status-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
.status-icon {
margin-bottom: 1rem;
}
/* Current Features */
.current-features {
background: var(--light-gray);
padding: 1.5rem;
border-radius: 15px;
}
.future-plans {
border-radius: 15px;
}
/* Reporting Options */
.reporting-options .option-card {
background: var(--background-white);
transition: all 0.3s ease;
text-align: center;
}
.reporting-options .option-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
.option-icon {
margin-bottom: 1rem;
}
/* Contact Methods */
.contact-methods .contact-method {
background: var(--background-white);
transition: all 0.3s ease;
color: inherit;
}
.contact-methods .contact-method:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
text-decoration: none;
color: inherit;
}
/* Selling Steps */
.selling-steps .step-card {
background: var(--background-white);
transition: all 0.3s ease;
text-align: center;
}
.selling-steps .step-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
.step-icon {
margin-bottom: 1rem;
}
/* Reset Steps */
.reset-steps .step-item {
background: var(--light-gray);
border-radius: 10px;
transition: all 0.3s ease;
}
.reset-steps .step-item:hover {
background: rgba(69, 123, 157, 0.1);
}
.step-icon {
flex-shrink: 0;
}
/* Trust Badge */
.trust-badge {
margin-bottom: 2rem;
}
.trust-badge .badge {
border-radius: 25px;
padding: 1rem 2rem;
}
/* Safety Features */
.safety-feature {
background: var(--background-white);
transition: all 0.3s ease;
}
.safety-feature:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.1);
}
/* Report Section */
.report-section {
border-radius: 15px;
}
/* Support Section */
.support-section .support-icon {
margin-bottom: 1.5rem;
}
.support-stats {
margin: 2rem 0;
}
.stat-badge {
text-align: center;
padding: 1rem;
}
.stat-number {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.9rem;
color: var(--neutral-gray);
}
.support-actions {
margin: 2rem 0;
}
.support-promise {
border-radius: 15px;
}
@media (max-width: 768px) {
.section-title {
font-size: 1.5rem;
}
.step-number {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.process-step {
padding: 1rem 0.5rem;
}
.support-actions .btn {
width: 100%;
margin-bottom: 0.5rem;
}
}
/* === Help Center Styles === */
.help-section {
margin-bottom: 4rem;
}
.search-box {
max-width: 600px;
margin: 0 auto;
}
.search-box input {
border-radius: 25px;
padding-right: 4rem;
border: 2px solid var(--border-light);
transition: all 0.3s ease;
}
.search-box input:focus {
border-color: var(--secondary-sky-blue);
box-shadow: 0 0 0 0.2rem rgba(69, 123, 157, 0.25);
}
.search-box .btn {
border-radius: 20px;
padding: 0.5rem 1rem;
}
/* Popular Topics */
.popular-topics .help-topic-card {
transition: all 0.3s ease;
color: inherit;
}
.popular-topics .help-topic-card:hover {
color: inherit;
text-decoration: none;
}
.popular-topics .help-topic-card:hover .card {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
.topic-icon {
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--light-gray) 0%, rgba(255, 255, 255, 0.8) 100%);
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 1.5rem;
}
.topic-title {
color: var(--primary-deep-blue);
font-weight: 600;
margin-bottom: 0.5rem;
}
.topic-description {
color: var(--neutral-gray);
font-size: 0.9rem;
margin-bottom: 1rem;
}
.topic-meta .badge {
font-size: 0.75rem;
padding: 0.4rem 0.8rem;
border-radius: 20px;
}
/* Getting Started Timeline */
.getting-started-timeline {
position: relative;
max-width: 900px;
margin: 0 auto;
}
.timeline-container {
position: relative;
}
.timeline-container::before {
content: '';
position: absolute;
left: 30px;
top: 0;
bottom: 0;
width: 3px;
background: linear-gradient(to bottom, var(--secondary-sky-blue), var(--primary-deep-blue));
border-radius: 2px;
}
.timeline-item {
position: relative;
margin-bottom: 3rem;
padding-left: 80px;
}
.timeline-marker {
position: absolute;
left: 0;
top: 1.5rem;
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 15px rgba(29, 53, 87, 0.3);
z-index: 2;
}
.timeline-marker .step-number {
color: var(--background-white);
font-size: 1.2rem;
font-weight: 700;
}
.timeline-content {
position: relative;
}
.timeline-content .card {
transition: all 0.3s ease;
}
.timeline-content .card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
.checklist .checklist-item {
margin-bottom: 0.5rem;
padding: 0.25rem 0;
}
.feature-box {
transition: all 0.3s ease;
}
.feature-box:hover {
background-color: rgba(69, 123, 157, 0.1) !important;
}
/* Sharing Notes Styles */
.upload-steps {
background: var(--light-gray);
border-radius: 15px;
padding: 1.5rem;
}
.step-badge {
flex-shrink: 0;
}
.step-badge .badge {
width: 35px;
height: 35px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.format-grid {
text-align: left;
}
.format-item {
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-light);
}
.format-item:last-child {
border-bottom: none;
}
/* Marketplace Tabs */
.marketplace-tabs .nav-pills .nav-link {
background: transparent;
border: 2px solid var(--border-light);
color: var(--primary-deep-blue);
border-radius: 25px;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
}
.marketplace-tabs .nav-pills .nav-link:hover {
background: rgba(69, 123, 157, 0.1);
border-color: var(--secondary-sky-blue);
}
.marketplace-tabs .nav-pills .nav-link.active {
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-color: var(--primary-deep-blue);
color: var(--background-white);
}
.selling-checklist .checklist-section {
border-bottom: 1px solid var(--border-light);
padding-bottom: 1rem;
}
.selling-checklist .checklist-section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.price-range {
border-radius: 10px;
transition: all 0.3s ease;
}
.price-range:hover {
transform: scale(1.05);
}
/* Account Settings */
.profile-features .feature-item {
transition: all 0.3s ease;
background: var(--background-white) !important;
}
.profile-features .feature-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(29, 53, 87, 0.1);
}
.preference-category {
border-bottom: 1px solid var(--border-light);
padding-bottom: 1rem;
}
.preference-category:last-child {
border-bottom: none;
padding-bottom: 0;
}
.theme-options .form-check-label {
cursor: pointer;
padding: 0.5rem 1rem;
border-radius: 20px;
transition: all 0.3s ease;
}
.theme-options .form-check-input:checked + .form-check-label {
background: rgba(69, 123, 157, 0.1);
color: var(--secondary-sky-blue);
}
.notification-settings .form-check {
margin-bottom: 0.5rem;
}
.security-options .btn {
margin-bottom: 0.5rem;
}
/* Support Resources */
.support-resources .support-icon {
margin-bottom: 2rem;
}
.support-stats {
margin: 2rem 0;
}
.additional-resources .resource-card {
transition: all 0.3s ease;
text-align: center;
background: var(--background-white);
color: inherit;
}
.additional-resources .resource-link {
color: inherit;
}
.additional-resources .resource-link:hover {
color: inherit;
text-decoration: none;
}
.additional-resources .resource-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
border-color: var(--secondary-sky-blue) !important;
}
/* Responsive Design for Help Center */
@media (max-width: 768px) {
.timeline-container::before {
left: 20px;
}
.timeline-item {
padding-left: 60px;
}
.timeline-marker {
width: 40px;
height: 40px;
left: 0;
}
.timeline-marker .step-number {
font-size: 1rem;
}
.marketplace-tabs .nav-pills .nav-link {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.support-actions .btn {
width: 100%;
margin-bottom: 0.5rem;
}
.additional-resources .col-md-3 {
margin-bottom: 1rem;
}
}
/* === How It Works Styles === */
.napkin-sketch {
display: inline-block;
margin: 0 auto;
}
.napkin-svg {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}
.sketch-line {
stroke-dasharray: 0;
stroke-dashoffset: 0;
}
.sketch-dot {
opacity: 0;
}
/* Process Timeline */
.process-timeline {
position: relative;
margin: 2rem 0;
}
.process-step {
margin-bottom: 2rem;
transition: all 0.3s ease;
}
.process-step:hover {
transform: translateY(-5px);
}
.step-wrapper {
position: relative;
}
.step-icon-container {
position: relative;
margin-bottom: 2rem;
}
.step-number {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
color: var(--background-white);
width: 30px;
height: 30px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
font-size: 0.9rem;
z-index: 3;
box-shadow: 0 2px 8px rgba(29, 53, 87, 0.3);
}
.step-icon {
width: 80px;
height: 80px;
background: linear-gradient(135deg, var(--light-gray) 0%, rgba(255, 255, 255, 0.9) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
font-size: 1.8rem;
color: var(--primary-deep-blue);
box-shadow: 0 4px 15px rgba(29, 53, 87, 0.1);
position: relative;
z-index: 2;
transition: all 0.3s ease;
}
.step-icon:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(29, 53, 87, 0.2);
}
.step-connector {
position: absolute;
top: 50%;
left: 100%;
width: calc(100% - 40px);
height: 3px;
background: linear-gradient(to right, var(--secondary-sky-blue), var(--primary-deep-blue));
z-index: 1;
border-radius: 2px;
}
.step-connector::after {
content: '';
position: absolute;
right: -8px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
border-left: 8px solid var(--primary-deep-blue);
border-top: 4px solid transparent;
border-bottom: 4px solid transparent;
}
.col-lg-4:last-child .step-connector {
display: none;
}
.step-content {
text-align: center;
}
.step-title {
color: var(--primary-deep-blue);
font-weight: 600;
margin-bottom: 1rem;
}
.step-description {
color: var(--neutral-gray);
margin-bottom: 1.5rem;
line-height: 1.6;
}
.step-features {
margin-bottom: 1.5rem;
}
.feature-item {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
font-size: 0.9rem;
}
/* Feature Tabs */
.feature-tabs .nav-pills .nav-link {
background: transparent;
border: 2px solid var(--border-light);
color: var(--primary-deep-blue);
border-radius: 25px;
padding: 0.75rem 1.5rem;
font-weight: 600;
transition: all 0.3s ease;
margin: 0 0.25rem;
}
.feature-tabs .nav-pills .nav-link:hover {
background: rgba(69, 123, 157, 0.1);
border-color: var(--secondary-sky-blue);
}
.feature-tabs .nav-pills .nav-link.active {
background: linear-gradient(135deg, var(--secondary-sky-blue) 0%, var(--primary-deep-blue) 100%);
border-color: var(--primary-deep-blue);
color: var(--background-white);
}
.feature-showcase {
margin-bottom: 2rem;
}
.showcase-header {
text-align: center;
}
/* Demo Mockups */
.demo-mockup {
background: var(--background-white);
border: 2px solid var(--border-light);
box-shadow: 0 4px 15px rgba(29, 53, 87, 0.1);
transition: all 0.3s ease;
}
.demo-mockup:hover {
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
.mockup-header {
border-bottom: 1px solid var(--border-light);
padding-bottom: 1rem;
}
.mockup-tabs .tab {
padding: 0.5rem 1rem;
background: var(--light-gray);
border-radius: 15px;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.3s ease;
}
.mockup-tabs .tab.active {
background: var(--secondary-sky-blue);
color: var(--background-white);
}
.note-item {
transition: all 0.3s ease;
border: 1px solid transparent !important;
}
.note-item:hover {
border-color: var(--secondary-sky-blue) !important;
transform: translateX(5px);
}
.note-title {
color: var(--primary-deep-blue);
}
.note-meta {
color: var(--neutral-gray);
}
/* Feature Highlights */
.feature-highlights .highlight-item {
transition: all 0.3s ease;
border: 2px solid transparent;
}
.feature-highlights .highlight-item:hover {
border-color: rgba(69, 123, 157, 0.3);
transform: translateY(-3px);
}
/* Benefits List */
.benefits-list .d-flex {
transition: all 0.3s ease;
padding: 0.5rem;
border-radius: 8px;
}
.benefits-list .d-flex:hover {
background: rgba(69, 123, 157, 0.05);
transform: translateX(5px);
}
/* Marketplace Demo */
.marketplace-demo {
margin: 2rem 0;
}
.listing-card {
transition: all 0.3s ease;
cursor: pointer;
}
.listing-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
.listing-image {
transition: all 0.3s ease;
}
.listing-card:hover .listing-image {
background: rgba(69, 123, 157, 0.1) !important;
}
.listing-title {
color: var(--primary-deep-blue);
font-weight: 600;
}
.listing-price {
font-size: 1.1rem;
}
/* Safety Features */
.safety-features {
margin: 2rem 0;
}
.safety-item {
transition: all 0.3s ease;
cursor: pointer;
}
.safety-item:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
/* Community Features */
.community-features .community-card {
transition: all 0.3s ease;
background: var(--background-white);
}
.community-features .community-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(29, 53, 87, 0.15);
}
/* Stat Cards */
.stat-cards .stat-card {
transition: all 0.3s ease;
cursor: pointer;
}
.stat-cards .stat-card:hover {
transform: scale(1.05);
}
.stat-number {
line-height: 1;
}
.stat-label {
font-weight: 600;
color: var(--primary-deep-blue);
margin-bottom: 0.25rem;
}
/* Community Stats */
.community-stats .community-benefits .d-flex {
transition: all 0.3s ease;
padding: 0.75rem;
border-radius: 10px;
}
.community-stats .community-benefits .d-flex:hover {
background: rgba(69, 123, 157, 0.05);
transform: translateX(5px);
}
.benefit-icon {
flex-shrink: 0;
}
/* Guidelines */
.guidelines-container .guidelines-card {
transition: all 0.3s ease;
}
.guidelines-container .guidelines-card:hover {
transform: translateY(-3px);
}
.guideline-item {
transition: all 0.3s ease;
background: var(--background-white) !important;
}
.guideline-item:hover {
background: rgba(69, 123, 157, 0.05) !important;
transform: translateX(3px);
}
.enforcement-info {
border: 2px solid transparent;
transition: all 0.3s ease;
}
.enforcement-info:hover {
border-color: rgba(251, 192, 45, 0.3);
}
/* Success Stories */
.success-stories .story-card {
transition: all 0.3s ease;
}
.success-stories .story-card:hover {
transform: translateY(-5px);
}
.story-quote {
position: relative;
}
.story-quote i {
position: absolute;
top: -10px;
left: -10px;
}
.author-avatar {
flex-shrink: 0;
}
/* CTA Section */
.cta-section {
background: linear-gradient(135deg, rgba(69, 123, 157, 0.05) 0%, rgba(29, 53, 87, 0.05) 100%);
border-radius: 20px;
margin: 2rem 0;
}
.cta-title {
color: var(--primary-deep-blue);
font-weight: 700;
}
.cta-subtitle {
font-size: 1.1rem;
line-height: 1.6;
}
.cta-stats {
margin: 2rem 0;
}
.cta-stat {
text-align: center;
padding: 1rem;
}
.cta-stat .stat-number {
font-size: 2rem;
font-weight: 700;
line-height: 1;
margin-bottom: 0.5rem;
}
.cta-stat .stat-label {
font-size: 0.9rem;
color: var(--neutral-gray);
font-weight: 500;
}
.rocket-animation {
transition: all 0.3s ease;
}
.rocket-animation:hover {
transform: scale(1.1);
}
/* Responsive Design for How It Works */
@media (max-width: 992px) {
.step-connector {
display: none;
}
.step-icon-container {
margin-bottom: 1.5rem;
}
.feature-tabs .nav-pills .nav-link {
padding: 0.5rem 1rem;
font-size: 0.9rem;
margin: 0.25rem;
}
}
@media (max-width: 768px) {
.napkin-svg {
width: 150px;
height: 90px;
}
.step-icon {
width: 60px;
height: 60px;
font-size: 1.4rem;
}
.step-number {
width: 25px;
height: 25px;
font-size: 0.8rem;
}
.demo-mockup {
padding: 1rem !important;
}
.mockup-tabs {
flex-wrap: wrap;
gap: 0.5rem;
}
.cta-stat .stat-number {
font-size: 1.5rem;
}
.cta-actions .btn {
width: 100%;
margin-bottom: 0.5rem;
}
}
/* === Improved Layout Constraints === */
/* Add consistent side margins and max-widths to prevent content from being too spread out */
/* Container improvements */
.container {
max-width: 1100px;
padding-left: 2rem;
padding-right: 2rem;
}
/* Hero sections should be slightly constrained */
.hero-section .container {
max-width: 1000px;
}
/* Content sections get comfortable reading width */
.content-section {
max-width: 980px;
margin-left: auto;
margin-right: auto;
padding-left: 2rem;
padding-right: 2rem;
}
/* Individual page content wrappers */
.page-wrapper {
max-width: 1000px;
margin: 0 auto;
padding: 0 2rem;
}
/* Help Center specific constraints */
.help-section,
.feature-tabs,
.guidelines-container {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* Process timeline gets comfortable width */
.process-timeline,
.getting-started-timeline {
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
/* Cards and feature sections */
.features-section,
.popular-topics,
.marketplace-tabs {
max-width: 980px;
margin-left: auto;
margin-right: auto;
}
/* Success stories and testimonials */
.success-stories,
.cta-section {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
/* Responsive layout adjustments */
@media (max-width: 1200px) {
.container {
max-width: 960px;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.hero-section .container {
max-width: 900px;
}
.content-section,
.page-wrapper {
max-width: 880px;
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
@media (max-width: 992px) {
.container {
max-width: 720px;
padding-left: 1rem;
padding-right: 1rem;
}
.hero-section .container {
max-width: 700px;
}
.content-section,
.page-wrapper {
max-width: 700px;
padding-left: 1rem;
padding-right: 1rem;
}
.faq-accordion,
.help-section,
.process-timeline,
.getting-started-timeline,
.features-section,
.popular-topics,
.marketplace-tabs,
.success-stories,
.cta-section {
max-width: 100%;
padding-left: 0.5rem;
padding-right: 0.5rem;
}
}
@media (max-width: 768px) {
.container {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.content-section,
.page-wrapper {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
}
/* Responsive Design for FAQ */
@media (max-width: 768px) {
.faq-question {
font-size: 1rem;
}
.faq-preview {
font-size: 0.8rem;
}
.section-title {
font-size: 1.5rem;
}
.step-number {
width: 35px;
height: 35px;
font-size: 0.9rem;
}
.process-step {
padding: 1rem 0.5rem;
}
.support-actions .btn {
width: 100%;
margin-bottom: 0.5rem;
}
}
/* === Markdown Content Styling === */
.note-content {
line-height: 1.7;
color: var(--heading-dark);
}
.note-content h1,
.note-content h2,
.note-content h3,
.note-content h4,
.note-content h5,
.note-content h6 {
font-family: 'Crimson Text', serif;
font-weight: 600;
color: var(--primary-deep-blue);
margin-top: 1.5rem;
margin-bottom: 1rem;
}
.note-content h1 { font-size: 1.8rem; }
.note-content h2 { font-size: 1.6rem; }
.note-content h3 { font-size: 1.4rem; }
.note-content h4 { font-size: 1.2rem; }
.note-content h5 { font-size: 1.1rem; }
.note-content h6 { font-size: 1rem; }
.note-content p {
margin-bottom: 1rem;
line-height: 1.7;
}
.note-content ul,
.note-content ol {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.note-content li {
margin-bottom: 0.5rem;
line-height: 1.6;
}
.note-content blockquote {
border-left: 4px solid var(--secondary-sky-blue);
padding-left: 1rem;
margin: 1.5rem 0;
font-style: italic;
color: var(--neutral-gray);
background: var(--light-gray);
padding: 1rem;
border-radius: 0.5rem;
}
.note-content code {
background: var(--light-gray);
padding: 0.2rem 0.4rem;
border-radius: 0.25rem;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: var(--primary-deep-blue);
}
.note-content pre {
background: var(--light-gray);
padding: 1rem;
border-radius: 0.5rem;
overflow-x: auto;
margin: 1rem 0;
border: 1px solid var(--border-light);
}
.note-content pre code {
background: none;
padding: 0;
color: inherit;
}
.note-content table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
background: var(--background-white);
border-radius: 0.5rem;
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.note-content th,
.note-content td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid var(--border-light);
}
.note-content th {
background: var(--light-gray);
font-weight: 600;
color: var(--primary-deep-blue);
}
.note-content tr:hover {
background: rgba(69, 123, 157, 0.05);
}
.note-content a {
color: var(--secondary-sky-blue);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease;
}
.note-content a:hover {
border-bottom-color: var(--secondary-sky-blue);
text-decoration: none;
}
.note-content img {
max-width: 100%;
height: auto;
border-radius: 0.5rem;
margin: 1rem 0;
box-shadow: var(--shadow-sm);
}
.note-content strong {
font-weight: 600;
color: var(--heading-dark);
}
.note-content em {
font-style: italic;
color: var(--heading-dark);
}
.note-content u {
text-decoration: underline;
text-decoration-color: var(--accent-soft-yellow);
text-decoration-thickness: 2px;
}
/* Comment content styling */
.comment-content {
line-height: 1.6;
color: var(--heading-dark);
}
.comment-content h1,
.comment-content h2,
.comment-content h3,
.comment-content h4,
.comment-content h5,
.comment-content h6 {
font-size: 1rem;
margin-top: 0.75rem;
margin-bottom: 0.5rem;
}
.comment-content p {
margin-bottom: 0.75rem;
}
.comment-content ul,
.comment-content ol {
margin-bottom: 0.75rem;
padding-left: 1rem;
}
.comment-content li {
margin-bottom: 0.25rem;
}
.comment-content blockquote {
border-left: 3px solid var(--secondary-sky-blue);
padding-left: 0.75rem;
margin: 0.75rem 0;
font-style: italic;
color: var(--neutral-gray);
background: var(--light-gray);
padding: 0.75rem;
border-radius: 0.25rem;
}
.comment-content code {
background: var(--light-gray);
padding: 0.1rem 0.3rem;
border-radius: 0.2rem;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
}
.comment-content pre {
background: var(--light-gray);
padding: 0.75rem;
border-radius: 0.25rem;
overflow-x: auto;
margin: 0.75rem 0;
font-size: 0.85rem;
}
.comment-content table {
font-size: 0.85rem;
margin: 0.75rem 0;
}
.comment-content th,
.comment-content td {
padding: 0.5rem;
}
/* Responsive markdown content */
@media (max-width: 768px) {
.note-content h1 { font-size: 1.5rem; }
.note-content h2 { font-size: 1.3rem; }
.note-content h3 { font-size: 1.2rem; }
.note-content h4 { font-size: 1.1rem; }
.note-content h5 { font-size: 1rem; }
.note-content h6 { font-size: 0.95rem; }
.note-content pre {
padding: 0.75rem;
font-size: 0.85rem;
}
.note-content table {
font-size: 0.85rem;
}
.note-content th,
.note-content td {
padding: 0.5rem;
}
}
/* === Additional Spacing Improvements === */
.main-content {
padding-top: 120px;
min-height: calc(100vh - 120px);
}
.content-wrapper {
padding: 2rem 0;
}
/* Enhanced section spacing */
.section-spacing {
padding: 4rem 0;
}
.section-spacing-sm {
padding: 2rem 0;
}
.section-spacing-lg {
padding: 6rem 0;
}
/* Better card spacing */
.card-spacing {
margin-bottom: 2rem;
}
.card-spacing-sm {
margin-bottom: 1rem;
}
.card-spacing-lg {
margin-bottom: 3rem;
}
/* Enhanced form spacing */
.form-spacing {
margin-bottom: 2rem;
}
.form-spacing-sm {
margin-bottom: 1rem;
}
.form-spacing-lg {
margin-bottom: 3rem;
}
/* Better button spacing */
.btn-spacing {
margin: 0.5rem;
}
.btn-spacing-sm {
margin: 0.25rem;
}
.btn-spacing-lg {
margin: 0.75rem;
}
/* Enhanced list spacing */
.list-spacing li {
margin-bottom: 0.75rem;
}
.list-spacing-sm li {
margin-bottom: 0.5rem;
}
.list-spacing-lg li {
margin-bottom: 1rem;
}
/* Better table spacing */
.table-spacing th,
.table-spacing td {
padding: 1rem;
}
.table-spacing-sm th,
.table-spacing-sm td {
padding: 0.75rem;
}
.table-spacing-lg th,
.table-spacing-lg td {
padding: 1.25rem;
}
/* Enhanced modal spacing */
.modal-spacing .modal-header {
padding: 1.5rem;
}
.modal-spacing .modal-body {
padding: 2rem;
}
.modal-spacing .modal-footer {
padding: 1.5rem;
}
/* Better alert spacing */
.alert-spacing {
margin-bottom: 1.5rem;
padding: 1.25rem;
}
.alert-spacing-sm {
margin-bottom: 1rem;
padding: 1rem;
}
.alert-spacing-lg {
margin-bottom: 2rem;
padding: 1.5rem;
}
/* Enhanced navigation spacing */
.nav-spacing .nav-item {
margin: 0 0.5rem;
}
.nav-spacing .nav-link {
padding: 0.75rem 1rem;
}
/* Better footer spacing */
.footer-spacing {
margin-top: 4rem;
padding: 3rem 0;
}
.footer-spacing-sm {
margin-top: 2rem;
padding: 2rem 0;
}
.footer-spacing-lg {
margin-top: 6rem;
padding: 4rem 0;
}
/* Responsive spacing adjustments */
@media (max-width: 768px) {
.content-wrapper {
padding: 1.5rem 0;
}
.section-spacing {
padding: 3rem 0;
}
.section-spacing-sm {
padding: 1.5rem 0;
}
.section-spacing-lg {
padding: 4rem 0;
}
.card-spacing {
margin-bottom: 1.5rem;
}
.form-spacing {
margin-bottom: 1.5rem;
}
.btn-spacing {
margin: 0.25rem;
}
.modal-spacing .modal-header,
.modal-spacing .modal-body,
.modal-spacing .modal-footer {
padding: 1rem;
}
.alert-spacing {
margin-bottom: 1rem;
padding: 1rem;
}
.footer-spacing {
margin-top: 2rem;
padding: 2rem 0;
}
}
@media (max-width: 576px) {
.content-wrapper {
padding: 1rem 0;
}
.section-spacing {
padding: 2rem 0;
}
.section-spacing-sm {
padding: 1rem 0;
}
.section-spacing-lg {
padding: 3rem 0;
}
.card-spacing {
margin-bottom: 1rem;
}
.form-spacing {
margin-bottom: 1rem;
}
.btn-spacing {
margin: 0.125rem;
}
.modal-spacing .modal-header,
.modal-spacing .modal-body,
.modal-spacing .modal-footer {
padding: 0.75rem;
}
.alert-spacing {
margin-bottom: 0.75rem;
padding: 0.75rem;
}
.footer-spacing {
margin-top: 1.5rem;
padding: 1.5rem 0;
}
}
/* === Search Page Specific Styles === */
.search-filters {
position: sticky;
top: 20px;
z-index: 100;
}
.search-filters .card {
border: none;
box-shadow: var(--shadow-md);
border-radius: 12px;
}
.search-filters .card-header {
background-color: var(--primary-deep-blue);
color: white;
border-radius: 12px 12px 0 0 !important;
border: none;
}
.search-results-summary {
background-color: #f8f9fa;
border: none;
border-radius: 12px;
box-shadow: var(--shadow-sm);
}
.search-results-summary .card-body {
padding: 1.25rem;
}
.note-card-search {
transition: all 0.3s ease;
border: none;
border-radius: 12px;
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.note-card-search:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
.note-card-search .card-header {
background-color: #f8f9fa;
border-bottom: 1px solid var(--border-light);
}
.note-card-search .card-footer {
background: transparent;
border-top: 1px solid var(--border-light);
}
.search-pagination .page-link {
border: none;
color: var(--primary-deep-blue);
padding: 0.75rem 1rem;
margin: 0 2px;
border-radius: 8px;
transition: all 0.3s ease;
}
.search-pagination .page-link:hover {
background-color: var(--primary-deep-blue);
color: white;
transform: translateY(-2px);
}
.search-pagination .page-item.active .page-link {
background-color: var(--primary-deep-blue);
color: white;
box-shadow: var(--shadow-sm);
}
.like-btn {
transition: all 0.3s ease;
border-radius: 8px;
}
.like-btn:hover {
transform: scale(1.1);
}
.like-btn.btn-danger {
background-color: #dc3545;
border: none;
}
.like-btn.btn-outline-danger:hover {
background-color: #dc3545;
border: none;
}
/* Enhanced form controls for search */
.search-filters .form-control,
.search-filters .form-select {
border: 2px solid var(--border-light);
border-radius: 8px;
padding: 0.75rem 1rem;
transition: all 0.3s ease;
font-size: 0.95rem;
}
.search-filters .form-control:focus,
.search-filters .form-select:focus {
border-color: var(--primary-deep-blue);
box-shadow: 0 0 0 0.2rem rgba(29, 53, 87, 0.25);
transform: translateY(-1px);
}
.search-filters .form-check-input:checked {
background-color: var(--primary-deep-blue);
border-color: var(--primary-deep-blue);
}
/* Quick stats styling */
.quick-stats .text-primary {
color: var(--primary-deep-blue) !important;
}
.quick-stats .text-success {
color: var(--secondary-sky-blue) !important;
}
/* Responsive adjustments for search page */
@media (max-width: 768px) {
.search-filters {
position: static;
margin-bottom: 2rem;
}
.search-filters .card {
margin-bottom: 1rem;
}
.note-card-search {
margin-bottom: 1rem;
}
}
/* Enhanced Note Search Styles */
.note-title {
font-size: 1.25rem;
line-height: 1.4;
font-weight: 600;
color: var(--primary-deep-blue);
transition: color 0.3s ease;
}
.note-title:hover {
color: var(--secondary-sky-blue);
}
.cursor-pointer {
cursor: pointer;
}
/* Enhanced card styling */
.card-enhanced {
border: 1px solid var(--border-light);
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
box-shadow: var(--shadow-sm);
}
.card-enhanced:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-lg);
}
/* Hero section styling */
.jumbotron {
position: relative;
overflow: hidden;
}
.gradient-text {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.stat-card {
background: rgba(255, 255, 255, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 12px;
padding: 1rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* Animation classes */
.fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
.fade-in-up-2 {
animation: fadeInUp 0.8s ease-out 0.2s both;
}
.float-animation {
animation: float 3s ease-in-out infinite;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
/* Course dropdown styling */
.course-dropdown {
border: 1px solid var(--border-light);
box-shadow: var(--shadow-lg);
border-radius: 8px;
}
.course-dropdown .course-item {
transition: background-color 0.2s ease;
}
/* Responsive improvements for search page */
@media (max-width: 768px) {
.jumbotron .d-flex {
flex-direction: column;
text-align: center;
}
.jumbotron .text-end {
margin-top: 2rem;
}
.note-title {
font-size: 1.1rem;
}
.stat-card {
margin-top: 1rem;
}
}
/* === Remove Blue Focus Outlines === */
/* Remove blue focus outlines from all cards */
.card:focus,
.card:focus-within,
.card:focus-visible,
.card-enhanced:focus,
.card-enhanced:focus-within,
.card-enhanced:focus-visible,
.stat-card:focus,
.stat-card:focus-within,
.stat-card:focus-visible {
outline: none !important;
box-shadow: var(--shadow-sm) !important;
}
.card:hover:focus,
.card:hover:focus-within,
.card:hover:focus-visible,
.card-enhanced:hover:focus,
.card-enhanced:hover:focus-within,
.card-enhanced:hover:focus-visible,
.stat-card:hover:focus,
.stat-card:hover:focus-within,
.stat-card:hover:focus-visible {
outline: none !important;
box-shadow: var(--shadow-lg) !important;
}
/* Remove blue focus outlines from buttons and interactive elements */
.btn:focus,
.btn:focus-visible,
.btn-modern:focus,
.btn-modern:focus-visible,
.nav-link:focus,
.nav-link:focus-visible,
.dropdown-item:focus,
.dropdown-item:focus-visible {
outline: none !important;
box-shadow: none !important;
}
/* Remove blue focus outlines from form elements */
.form-control:focus,
.form-select:focus,
.modern-input:focus,
.modern-select:focus,
.modern-textarea:focus {
outline: none !important;
border-color: var(--secondary-sky-blue) !important;
box-shadow: 0 0 0 0.2rem rgba(69, 123, 157, 0.25) !important;
}
/* Remove blue focus outlines from links */
a:focus,
a:focus-visible {
outline: none !important;
text-decoration: none !important;
}
/* Remove blue focus outlines from all interactive elements */
*:focus {
outline: none !important;
}
*:focus-visible {
outline: none !important;
}