Refactor theme styles for improved accessibility and consistency
- Updated light and dark themes across contact, hero, projects, services, skills SCSS files to enhance color contrast for better readability. - Replaced gradients with solid colors where necessary to ensure AAA compliance. - Adjusted button and text colors for improved visibility and user experience. - Introduced a new logo SVG asset for branding consistency. - Modified global color variables to align with the new design scheme.
This commit is contained in:
Sascha
parent
0f4a379716
commit
ed093e8027
|
|
@ -0,0 +1,14 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 60" width="640" height="120">
|
||||
<defs>
|
||||
<style>
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&display=swap');
|
||||
</style>
|
||||
</defs>
|
||||
|
||||
<rect x="12" y="10" width="20" height="36" rx="2" fill="none" stroke="#E6F1FB" stroke-width="2.5"/>
|
||||
<rect x="21" y="10" width="11" height="36" rx="1.5" fill="#E6F1FB"/>
|
||||
<circle cx="19.5" cy="28" r="2" fill="#EF9F27"/>
|
||||
|
||||
<text x="42" y="29" font-family="Comfortaa, Georgia, serif" font-size="24" font-weight="600" fill="#E6F1FB">Sascha Bach</text>
|
||||
<text x="43" y="46" font-family="Comfortaa, Arial, sans-serif" font-size="8.5" font-weight="600" fill="#FAC775" letter-spacing="1.8">BARRIEREFREIE WEBENTWICKLUNG</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 763 B |
|
|
@ -4,6 +4,7 @@ import ThemeToggle from '../ThemeToggle';
|
|||
import LanguageToggle from '../LanguageToggle';
|
||||
import MobileMenu from './MobileMenu';
|
||||
import { personalConfig } from '../../config/personal';
|
||||
import logoUrl from '../../assets/logo.svg';
|
||||
import { useLanguage } from '../../contexts/LanguageContext';
|
||||
import { scrollToSection } from '../../utils/scrollUtils';
|
||||
import type { Theme } from '../../data/types';
|
||||
|
|
@ -74,7 +75,7 @@ export default function Navbar({
|
|||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}}
|
||||
>
|
||||
{personalConfig.name}
|
||||
<img src={logoUrl} alt={texts.navigation.logoAlt} className="navbar__logo" />
|
||||
</Link>
|
||||
<div className="navbar__container">
|
||||
{menuItems.map((item) => (
|
||||
|
|
|
|||
|
|
@ -17,4 +17,5 @@ export const navigation = {
|
|||
{ section: 'Contact', label: 'Kontakt' },
|
||||
],
|
||||
mobileMenuAriaLabel: 'Menü öffnen',
|
||||
logoAlt: 'Sascha Bach – Barrierefreie Webentwicklung',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ export interface TextConfig {
|
|||
menuItems: MenuItem[];
|
||||
landingMenuItems: MenuItem[];
|
||||
mobileMenuAriaLabel: string;
|
||||
logoAlt: string;
|
||||
};
|
||||
|
||||
// Theme Toggle
|
||||
|
|
|
|||
|
|
@ -16,5 +16,6 @@ export const navigation = {
|
|||
{ section: 'References', label: 'References' },
|
||||
{ section: 'Contact', label: 'Contact' },
|
||||
],
|
||||
mobileMenuAriaLabel: 'Menü öffnen',
|
||||
mobileMenuAriaLabel: 'Open menu',
|
||||
logoAlt: 'Sascha Bach – Accessible Web Development',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -5,9 +5,8 @@ import { useEffect, useRef } from 'react';
|
|||
* `.is-visible` when they enter the viewport, triggering the CSS transition
|
||||
* defined in globals.scss.
|
||||
*
|
||||
* The observer only starts after the first user interaction (scroll, keydown,
|
||||
* or pointer event), so elements already in the viewport on load stay hidden
|
||||
* until the user actually engages with the page.
|
||||
* The observer starts immediately so that elements already in the viewport
|
||||
* become visible right away — including after language-change remounts.
|
||||
*/
|
||||
export function useScrollReveal() {
|
||||
const ref = useRef<HTMLElement>(null);
|
||||
|
|
@ -16,42 +15,23 @@ export function useScrollReveal() {
|
|||
const container = ref.current;
|
||||
if (!container) return;
|
||||
|
||||
let observer: IntersectionObserver | null = null;
|
||||
|
||||
const startObserving = () => {
|
||||
if (observer) return; // already started
|
||||
|
||||
observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
observer!.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.12 }
|
||||
);
|
||||
|
||||
const items = container.querySelectorAll('.reveal-item');
|
||||
items.forEach((el) => observer!.observe(el));
|
||||
|
||||
// Clean up interaction listeners once started
|
||||
INTERACTION_EVENTS.forEach((event) =>
|
||||
window.removeEventListener(event, startObserving, { capture: true })
|
||||
);
|
||||
};
|
||||
|
||||
const INTERACTION_EVENTS = ['scroll', 'keydown', 'pointerdown', 'touchstart'] as const;
|
||||
INTERACTION_EVENTS.forEach((event) =>
|
||||
window.addEventListener(event, startObserving, { once: false, capture: true, passive: true })
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
entries.forEach((entry) => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('is-visible');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
},
|
||||
{ threshold: 0.12 }
|
||||
);
|
||||
|
||||
const items = container.querySelectorAll('.reveal-item');
|
||||
items.forEach((el) => observer.observe(el));
|
||||
|
||||
return () => {
|
||||
observer?.disconnect();
|
||||
INTERACTION_EVENTS.forEach((event) =>
|
||||
window.removeEventListener(event, startObserving, { capture: true })
|
||||
);
|
||||
observer.disconnect();
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
|
|
|||
|
|
@ -12,8 +12,7 @@
|
|||
// Component styles
|
||||
@use 'components/back-to-top';
|
||||
|
||||
// Import Geist font from Google Fonts or local files
|
||||
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100;200;300;400;500;600;700;800;900&display=swap');
|
||||
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@600&family=Quicksand:wght@400;500&display=swap');
|
||||
|
||||
// CSS Reset - Add this
|
||||
* {
|
||||
|
|
@ -69,115 +68,292 @@
|
|||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
|
||||
// Shadows (light)
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
|
||||
--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.12);
|
||||
// Shadows (light) – brand-tinted
|
||||
--shadow-xs: 0 1px 2px rgba(4, 44, 83, 0.05);
|
||||
--shadow-sm: 0 2px 8px rgba(4, 44, 83, 0.08);
|
||||
--shadow-md: 0 4px 16px rgba(4, 44, 83, 0.08);
|
||||
--shadow-hover: 0 8px 24px rgba(4, 44, 83, 0.12);
|
||||
|
||||
// Transitions
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 200ms ease;
|
||||
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
// Landing section background gradients (light) – vivid & saturated
|
||||
--bg-reasons: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%);
|
||||
--bg-winnings: linear-gradient(160deg, #ede9fe 0%, #e0e7ff 100%);
|
||||
--bg-experience: linear-gradient(160deg, #e0f2fe 0%, #ede9fe 100%);
|
||||
--bg-processes: linear-gradient(160deg, #e0e7ff 0%, #dbeafe 100%);
|
||||
--bg-references: linear-gradient(160deg, #ede9fe 0%, #dbeafe 100%);
|
||||
// Brand accent & text-on-dark
|
||||
--color-accent-text: #412402;
|
||||
--color-accent-deco: #ef9f27;
|
||||
--color-text-on-dark: #e6f1fb;
|
||||
--font-headline: 'Comfortaa', sans-serif;
|
||||
--font-body: 'Quicksand', sans-serif;
|
||||
--contact-button-bg: #042c53;
|
||||
--contact-button-text: #e6f1fb;
|
||||
--contact-button-hover-bg: #0c447c;
|
||||
|
||||
// Landing section backgrounds (light) – flat brand
|
||||
--bg-reasons: #ffffff;
|
||||
--bg-winnings: #f1efe8;
|
||||
--bg-experience: #ffffff;
|
||||
--bg-processes: #f1efe8;
|
||||
--bg-references: #ffffff;
|
||||
|
||||
// Reused section backgrounds (light)
|
||||
--about-background: linear-gradient(160deg, #f0f9ff 0%, #dbeafe 100%);
|
||||
--projects-background: linear-gradient(160deg, #dbeafe 0%, #ede9fe 100%);
|
||||
--contact-background: linear-gradient(160deg, #ede9fe 0%, #e0f2fe 100%);
|
||||
--about-background: #ffffff;
|
||||
--projects-background: #ffffff;
|
||||
--contact-background: #f1efe8;
|
||||
|
||||
// Tech section backgrounds (light)
|
||||
--hero-background: linear-gradient(
|
||||
160deg,
|
||||
#f8faff 0%,
|
||||
#f1f3ff 50%,
|
||||
#f5f0ff 100%
|
||||
);
|
||||
--services-background: linear-gradient(160deg, #ede9fe 0%, #dbeafe 100%);
|
||||
--skills-background: linear-gradient(160deg, #dbeafe 0%, #e0f2fe 100%);
|
||||
--certifications-background: linear-gradient(
|
||||
160deg,
|
||||
#e0e7ff 0%,
|
||||
#ede9fe 100%
|
||||
);
|
||||
--hero-background: #f1efe8;
|
||||
--services-background: #f1efe8;
|
||||
--skills-background: #ffffff;
|
||||
--certifications-background: #f1efe8;
|
||||
|
||||
// Glassmorphism card tokens (light)
|
||||
--card-glass-bg: rgba(255, 255, 255, 0.65);
|
||||
--card-glass-border: rgba(255, 255, 255, 0.9);
|
||||
// Card tokens (light)
|
||||
--card-glass-bg: #ffffff;
|
||||
--card-glass-border: rgba(4, 44, 83, 0.12);
|
||||
|
||||
// Glow shadows (light)
|
||||
// Functional shadows
|
||||
--shadow-glow:
|
||||
0 0 0 1px rgba(99, 102, 241, 0.12), 0 8px 24px rgba(99, 102, 241, 0.1);
|
||||
0 0 0 1px rgba(4, 44, 83, 0.1), 0 8px 24px rgba(4, 44, 83, 0.08);
|
||||
--shadow-glow-hover:
|
||||
0 0 0 1px rgba(99, 102, 241, 0.28), 0 16px 48px rgba(99, 102, 241, 0.2);
|
||||
0 0 0 1px rgba(4, 44, 83, 0.2), 0 16px 48px rgba(4, 44, 83, 0.15);
|
||||
}
|
||||
|
||||
// Dark theme + shadow overrides
|
||||
[data-theme='dark'] {
|
||||
@include t.theme-vars(t.$dark-theme);
|
||||
|
||||
--shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35);
|
||||
// Core colors
|
||||
--color-primary: #e6f1fb;
|
||||
--color-secondary: #b5d4f4;
|
||||
--color-accent-text: #fac775;
|
||||
--color-accent-deco: #ef9f27;
|
||||
--color-background: #021829;
|
||||
--color-surface: #042c53;
|
||||
--color-text: #e6f1fb;
|
||||
--color-text-muted: #b5d4f4;
|
||||
--color-text-on-dark: #e6f1fb;
|
||||
--color-border: rgba(230, 241, 251, 0.12);
|
||||
--color-focus-ring: #ef9f27;
|
||||
|
||||
// Section backgrounds
|
||||
--hero-background: #021829;
|
||||
--about-background: #042c53;
|
||||
--services-background: #021829;
|
||||
--skills-background: #042c53;
|
||||
--certifications-background: #021829;
|
||||
--projects-background: #042c53;
|
||||
--contact-background: #021829;
|
||||
--bg-reasons: #042c53;
|
||||
--bg-winnings: #021829;
|
||||
--bg-experience: #042c53;
|
||||
--bg-processes: #021829;
|
||||
--bg-references: #042c53;
|
||||
|
||||
// Cards + shadows
|
||||
--card-glass-bg: rgba(12, 68, 124, 0.5);
|
||||
--card-glass-border: rgba(230, 241, 251, 0.1);
|
||||
--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
|
||||
--shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4);
|
||||
--shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.5);
|
||||
|
||||
// Landing section backgrounds (dark) – cinematic deep
|
||||
--bg-reasons: linear-gradient(160deg, #0f172a 0%, #1a0f2e 100%);
|
||||
--bg-winnings: linear-gradient(160deg, #1a0f2e 0%, #0d1a2e 100%);
|
||||
--bg-experience: linear-gradient(160deg, #0d1a2e 0%, #0f172a 100%);
|
||||
--bg-processes: linear-gradient(160deg, #0f172a 0%, #190b2e 100%);
|
||||
--bg-references: linear-gradient(160deg, #190b2e 0%, #0f172a 100%);
|
||||
|
||||
// Reused section backgrounds (dark)
|
||||
--about-background: linear-gradient(160deg, #111827 0%, #0f172a 100%);
|
||||
--projects-background: linear-gradient(160deg, #0f172a 0%, #1a0f2e 100%);
|
||||
--contact-background: linear-gradient(160deg, #1a0f2e 0%, #0d1a2e 100%);
|
||||
|
||||
// Tech section backgrounds (dark) – full cinematic
|
||||
--hero-background: linear-gradient(
|
||||
160deg,
|
||||
#06080f 0%,
|
||||
#0c1220 50%,
|
||||
#120720 100%
|
||||
);
|
||||
--services-background: linear-gradient(160deg, #190b2e 0%, #0f172a 100%);
|
||||
--skills-background: linear-gradient(160deg, #0f172a 0%, #0d1a2e 100%);
|
||||
--certifications-background: linear-gradient(
|
||||
160deg,
|
||||
#0d1a2e 0%,
|
||||
#190b2e 100%
|
||||
);
|
||||
|
||||
// Glassmorphism card tokens (dark)
|
||||
--card-glass-bg: rgba(139, 92, 246, 0.06);
|
||||
--card-glass-border: rgba(139, 92, 246, 0.22);
|
||||
|
||||
// Glow shadows (dark)
|
||||
--shadow-glow:
|
||||
0 0 0 1px rgba(139, 92, 246, 0.2), 0 8px 32px rgba(139, 92, 246, 0.18);
|
||||
0 0 0 1px rgba(239, 159, 39, 0.15), 0 8px 24px rgba(0, 0, 0, 0.25);
|
||||
--shadow-glow-hover:
|
||||
0 0 0 1px rgba(139, 92, 246, 0.45), 0 16px 56px rgba(139, 92, 246, 0.32);
|
||||
0 0 0 1px rgba(239, 159, 39, 0.3), 0 16px 48px rgba(0, 0, 0, 0.4);
|
||||
|
||||
// Buttons
|
||||
--contact-button-bg: #ef9f27;
|
||||
--contact-button-text: #042c53;
|
||||
--contact-button-hover-bg: #fac775;
|
||||
|
||||
// Form inputs
|
||||
--contact-input-bg: #042c53;
|
||||
--contact-input-border: rgba(230, 241, 251, 0.2);
|
||||
--contact-input-focus-ring: rgba(239, 159, 39, 0.3);
|
||||
|
||||
// Stat cards
|
||||
--stat-primary-bg: rgba(12, 68, 124, 0.4);
|
||||
--stat-primary-value: #e6f1fb;
|
||||
--stat-primary-label: #b5d4f4;
|
||||
--stat-secondary-bg: rgba(12, 68, 124, 0.4);
|
||||
--stat-secondary-value: #e6f1fb;
|
||||
--stat-secondary-label: #b5d4f4;
|
||||
--stat-tertiary-bg: rgba(12, 68, 124, 0.4);
|
||||
--stat-tertiary-value: #e6f1fb;
|
||||
--stat-tertiary-label: #b5d4f4;
|
||||
--stat-quaternary-bg: rgba(12, 68, 124, 0.4);
|
||||
--stat-quaternary-value: #e6f1fb;
|
||||
--stat-quaternary-label: #b5d4f4;
|
||||
|
||||
// Service cards
|
||||
--service-card-primary-bg: rgba(12, 68, 124, 0.5);
|
||||
--service-card-secondary-bg: rgba(4, 44, 83, 0.8);
|
||||
--service-card-tertiary-bg: rgba(12, 68, 124, 0.5);
|
||||
--service-card-quaternary-bg: rgba(4, 44, 83, 0.8);
|
||||
--service-card-quinary-bg: rgba(12, 68, 124, 0.5);
|
||||
--service-card-senary-bg: rgba(4, 44, 83, 0.8);
|
||||
--service-icon-primary: #ef9f27;
|
||||
--service-icon-secondary: #ef9f27;
|
||||
--service-icon-tertiary: #ef9f27;
|
||||
--service-icon-quaternary: #ef9f27;
|
||||
--service-icon-quinary: #ef9f27;
|
||||
--service-icon-senary: #ef9f27;
|
||||
--service-title-primary: #e6f1fb;
|
||||
--service-title-secondary: #e6f1fb;
|
||||
--service-title-tertiary: #e6f1fb;
|
||||
--service-title-quaternary: #e6f1fb;
|
||||
--service-title-quinary: #e6f1fb;
|
||||
--service-title-senary: #e6f1fb;
|
||||
--service-description-primary: #b5d4f4;
|
||||
--service-description-secondary: #b5d4f4;
|
||||
--service-description-tertiary: #b5d4f4;
|
||||
--service-description-quaternary: #b5d4f4;
|
||||
--service-description-quinary: #b5d4f4;
|
||||
--service-description-senary: #b5d4f4;
|
||||
|
||||
// Skills
|
||||
--skills-category-bg: rgba(12, 68, 124, 0.4);
|
||||
--skills-category-border: rgba(230, 241, 251, 0.1);
|
||||
--skills-skill-name-color: #e6f1fb;
|
||||
--skills-skill-level-color: #b5d4f4;
|
||||
--skills-skill-percentage-color: #b5d4f4;
|
||||
--skills-progress-bg: rgba(230, 241, 251, 0.1);
|
||||
--skills-category-bg-primary: rgba(12, 68, 124, 0.5);
|
||||
--skills-category-bg-secondary: rgba(12, 68, 124, 0.5);
|
||||
--skills-category-bg-tertiary: rgba(12, 68, 124, 0.5);
|
||||
--skills-category-bg-quaternary: rgba(12, 68, 124, 0.5);
|
||||
--skills-category-bg-quinary: rgba(12, 68, 124, 0.5);
|
||||
--skills-category-bg-senary: rgba(12, 68, 124, 0.5);
|
||||
--skills-progress-primary: #ef9f27;
|
||||
--skills-progress-secondary: #ef9f27;
|
||||
--skills-progress-tertiary: #ef9f27;
|
||||
--skills-progress-quaternary: #ef9f27;
|
||||
--skills-progress-quinary: #ef9f27;
|
||||
--skills-progress-senary: #ef9f27;
|
||||
|
||||
// Certifications
|
||||
--certifications-card-background: #042c53;
|
||||
--certifications-badge-background: rgba(239, 159, 39, 0.15);
|
||||
--certifications-badge-border: rgba(239, 159, 39, 0.3);
|
||||
--color-certifications-badge-text: #fac775;
|
||||
|
||||
// Projects
|
||||
--projects-card-background: #042c53;
|
||||
--projects-card-border: rgba(239, 159, 39, 0.15);
|
||||
--projects-button-primary-bg: #ef9f27;
|
||||
--projects-button-primary-text: #042c53;
|
||||
--projects-button-primary-border: rgba(239, 159, 39, 0.3);
|
||||
--projects-button-primary-hover-bg: #fac775;
|
||||
--projects-button-secondary-bg: #0c447c;
|
||||
--projects-button-secondary-text: #e6f1fb;
|
||||
--projects-button-secondary-border: rgba(230, 241, 251, 0.15);
|
||||
--projects-button-secondary-hover-bg: #185fa5;
|
||||
--projects-tech-badge-bg: rgba(12, 68, 124, 0.6);
|
||||
--projects-tech-badge-text: #e6f1fb;
|
||||
--projects-tech-badge-border: rgba(239, 159, 39, 0.2);
|
||||
|
||||
// Contact
|
||||
--contact-social-bg: #042c53;
|
||||
--contact-social-text: #e6f1fb;
|
||||
--contact-social-border: rgba(239, 159, 39, 0.3);
|
||||
--contact-social-hover-bg: #0c447c;
|
||||
--contact-social-hover-border: #ef9f27;
|
||||
--contact-status-success-bg: rgba(4, 44, 83, 0.5);
|
||||
--contact-status-success-border: #ef9f27;
|
||||
--contact-status-success-text: #fac775;
|
||||
|
||||
// Page backgrounds
|
||||
--bg-primary: #021829;
|
||||
--bg-secondary: #042c53;
|
||||
--border-color: rgba(230, 241, 251, 0.12);
|
||||
|
||||
// Skill badges
|
||||
--skill-badge-primary-bg: rgba(12, 68, 124, 0.5);
|
||||
--skill-badge-primary-text: #e6f1fb;
|
||||
--skill-badge-secondary-bg: rgba(12, 68, 124, 0.5);
|
||||
--skill-badge-secondary-text: #e6f1fb;
|
||||
--skill-badge-tertiary-bg: rgba(12, 68, 124, 0.5);
|
||||
--skill-badge-tertiary-text: #e6f1fb;
|
||||
--skill-badge-quaternary-bg: rgba(65, 36, 2, 0.4);
|
||||
--skill-badge-quaternary-text: #fac775;
|
||||
|
||||
// Feature cards
|
||||
--feature-card-primary-bg: rgba(12, 68, 124, 0.4);
|
||||
--feature-card-secondary-bg: rgba(4, 44, 83, 0.6);
|
||||
--feature-card-tertiary-bg: rgba(12, 68, 124, 0.4);
|
||||
--feature-icon-primary: #ef9f27;
|
||||
--feature-icon-secondary: #ef9f27;
|
||||
--feature-icon-tertiary: #ef9f27;
|
||||
--feature-title-primary: #e6f1fb;
|
||||
--feature-title-secondary: #e6f1fb;
|
||||
--feature-title-tertiary: #e6f1fb;
|
||||
--feature-description-primary: #b5d4f4;
|
||||
--feature-description-secondary: #b5d4f4;
|
||||
--feature-description-tertiary: #b5d4f4;
|
||||
|
||||
// Remove gradients
|
||||
--gradient-primary: #ef9f27;
|
||||
}
|
||||
|
||||
// Dark mode: override hardcoded SASS-compiled colors on section headings
|
||||
[data-theme='dark'] {
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
color: #e6f1fb;
|
||||
}
|
||||
|
||||
.about-section__greeting {
|
||||
color: #e6f1fb;
|
||||
}
|
||||
|
||||
.skills-section__category-title {
|
||||
color: #e6f1fb;
|
||||
}
|
||||
|
||||
// Border-left accent colors
|
||||
.reasons-section__item,
|
||||
.references-section__item,
|
||||
.experience-section__paragraph--outro,
|
||||
.reasons-section__outro {
|
||||
border-left-color: #ef9f27;
|
||||
}
|
||||
|
||||
.winnings-section__item,
|
||||
.processes-section__item {
|
||||
border-left-color: #b5d4f4;
|
||||
}
|
||||
|
||||
// Stat numbers in reasons section
|
||||
.reasons-section__stat {
|
||||
color: #ef9f27;
|
||||
}
|
||||
|
||||
// Navbar deepens in dark mode
|
||||
.navbar {
|
||||
background: #021829;
|
||||
border-bottom: 1px solid rgba(230, 241, 251, 0.08);
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
font-family:
|
||||
'Geist',
|
||||
system-ui,
|
||||
-apple-system,
|
||||
BlinkMacSystemFont,
|
||||
'Segoe UI',
|
||||
'Roboto',
|
||||
sans-serif;
|
||||
font-family: 'Quicksand', sans-serif;
|
||||
font-weight: 400;
|
||||
font-size: 1rem;
|
||||
background-color: var(--color-background);
|
||||
color: var(--color-text);
|
||||
margin: 0; // Explicitly remove body margin
|
||||
padding: 0; // Explicitly remove body padding
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4 {
|
||||
font-family: 'Comfortaa', sans-serif;
|
||||
font-weight: 600;
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
section {
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: var(--color-primary);
|
||||
color: #000000;
|
||||
color: var(--color-text-on-dark); // #E6F1FB – white on dark navy
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -5,21 +5,25 @@
|
|||
|
||||
// Global CSS custom properties for accessibility
|
||||
:root {
|
||||
--color-primary: #2563eb;
|
||||
--color-secondary: #60a5fa;
|
||||
--color-focus-ring: #2563eb;
|
||||
--color-text-aaa-light: #111827;
|
||||
--color-text-aaa-dark: #ffffff;
|
||||
--box-shadow-hover: rgba(0, 0, 0, 0.15);
|
||||
--color-primary: #042c53;
|
||||
--color-secondary: #0c447c;
|
||||
--color-accent-text: #412402;
|
||||
--color-accent-deco: #ef9f27;
|
||||
--color-text-on-dark: #e6f1fb;
|
||||
--color-focus-ring: #042c53;
|
||||
--color-text-aaa-light: #1a1a1a;
|
||||
--color-text-aaa-dark: #e6f1fb;
|
||||
--box-shadow-hover: rgba(4, 44, 83, 0.15);
|
||||
--font-headline: 'Comfortaa', sans-serif;
|
||||
--font-body: 'Quicksand', sans-serif;
|
||||
--contact-button-bg: #042c53;
|
||||
--contact-button-text: #e6f1fb;
|
||||
--contact-button-hover-bg: #0c447c;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--color-primary: #60a5fa;
|
||||
--color-secondary: #93c5fd;
|
||||
--color-focus-ring: #60a5fa;
|
||||
}
|
||||
}
|
||||
// Dark mode is controlled via [data-theme='dark'] attribute on <html>.
|
||||
// OS-level prefers-color-scheme is intentionally NOT used here to avoid
|
||||
// --color-primary flipping to #E6F1FB, which breaks the always-dark navbar.
|
||||
|
||||
// Screen Reader Only Classes - Central Definition
|
||||
.sr-only {
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
display: flex;
|
||||
gap: 0.25rem;
|
||||
background: transparent;
|
||||
border: 1px solid var(--color-text-muted);
|
||||
border: 1px solid rgba(230, 241, 251, 0.35); // light on always-dark navbar
|
||||
border-radius: $border-radius-sm;
|
||||
padding: 0.25rem;
|
||||
|
||||
|
|
@ -16,33 +16,32 @@
|
|||
border: none;
|
||||
border-radius: 0.25rem;
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
color: var(--color-text-on-dark); // #E6F1FB – 10:1 on #042C53 navbar
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
@extend %hover-lift;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text);
|
||||
background: rgba(230, 241, 251, 0.1);
|
||||
color: var(--color-text-on-dark);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline: 2px solid var(--color-accent-deco); // ochre – always visible on dark
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 2px 4px var(--box-shadow-active);
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: var(--color-primary);
|
||||
color: #000000;
|
||||
background: var(--color-text-on-dark); // #E6F1FB bg → 10:1 contrast
|
||||
color: #042c53; // night-blue text on light bg → AAA
|
||||
font-weight: 600;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-primary);
|
||||
color: #000000;
|
||||
background: var(--color-text-on-dark);
|
||||
color: #042c53;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,18 +2,17 @@
|
|||
@use '../variables';
|
||||
|
||||
.footer {
|
||||
background-color: var(--color-background-muted);
|
||||
margin-top: auto; // Push footer to bottom if using flexbox layout
|
||||
background-color: var(--color-surface);
|
||||
border-top: 1px solid var(--color-border);
|
||||
margin-top: auto;
|
||||
|
||||
&__container {
|
||||
margin: 0 auto;
|
||||
padding: 0 1rem;
|
||||
padding: 2rem 1rem 1.5rem;
|
||||
}
|
||||
|
||||
&__separator {
|
||||
height: 1px;
|
||||
background-color: var(--color-border);
|
||||
margin-bottom: 2rem;
|
||||
display: none; // border-top on .footer replaces this
|
||||
}
|
||||
|
||||
&__content {
|
||||
|
|
@ -38,7 +37,7 @@
|
|||
}
|
||||
|
||||
&__link {
|
||||
color: var(--color-text-muted);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem;
|
||||
|
|
@ -46,21 +45,22 @@
|
|||
transition: all 0.2s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-primary);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline: 2px solid var(--color-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__copyright {
|
||||
color: var(--color-text-muted);
|
||||
color: var(--color-text);
|
||||
font-size: 0.875rem;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&__social {
|
||||
|
|
@ -75,20 +75,22 @@
|
|||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 0.375rem;
|
||||
color: var(--color-text-muted);
|
||||
color: var(--color-text);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background-hover);
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-primary);
|
||||
color: var(--color-text-on-dark);
|
||||
border-color: var(--color-primary);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline: 2px solid var(--color-focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -4,21 +4,32 @@
|
|||
@include globals.flex-center();
|
||||
justify-content: space-between;
|
||||
padding: 1em;
|
||||
background: var(--color-background);
|
||||
color: var(--color-text);
|
||||
background: #042c53; // always night-blue – independent of --color-primary cascade
|
||||
color: var(--color-text-on-dark);
|
||||
height: 65px;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 8px rgba(4, 44, 83, 0.2);
|
||||
|
||||
&__name {
|
||||
font-weight: bold;
|
||||
font-size: 1.25rem;
|
||||
color: var(--color-text);
|
||||
color: var(--color-text-on-dark);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&__logo {
|
||||
height: 65px;
|
||||
max-height: calc(65px - 0.5rem); // stay within navbar height minus padding
|
||||
width: auto;
|
||||
display: block;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
height: 48px;
|
||||
}
|
||||
}
|
||||
|
||||
&__container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -29,18 +40,31 @@
|
|||
@extend %hover-lift;
|
||||
padding: 0.6rem 1.2rem;
|
||||
border-radius: 8px;
|
||||
color: var(--color-text-on-dark);
|
||||
transition:
|
||||
color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-accent-deco);
|
||||
box-shadow: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 2px 4px var(--box-shadow-active);
|
||||
box-shadow: none;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
&--active {
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
|
||||
background: var(--box-shadow-hover, rgba(0, 0, 0, 0.05));
|
||||
color: var(
|
||||
--color-text-on-dark
|
||||
); // #E6F1FB – 10:1 contrast, same as default
|
||||
box-shadow: none;
|
||||
background: rgba(230, 241, 251, 0.12);
|
||||
border-bottom: 2px solid var(--color-accent-deco); // ochre underline as accent indicator
|
||||
border-radius: 8px 8px 4px 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -60,14 +84,14 @@
|
|||
display: block;
|
||||
height: 3px;
|
||||
width: 100%;
|
||||
background-color: var(--color-text);
|
||||
background-color: var(--color-text-on-dark); // light on dark navy bg
|
||||
border-radius: 2px;
|
||||
transition: all 0.3s ease;
|
||||
margin: 1px 0;
|
||||
}
|
||||
|
||||
&:hover &__item {
|
||||
background-color: var(--color-primary);
|
||||
background-color: var(--color-accent-deco); // ochre accent on hover
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
|
|||
|
|
@ -85,8 +85,10 @@
|
|||
&__email-icon {
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
color: var(--primary-color);
|
||||
background: rgba(147, 51, 234, 0.1);
|
||||
color: var(
|
||||
--color-primary
|
||||
); // #042C53 light / #E6F1FB dark – high contrast in both
|
||||
background: rgba(4, 44, 83, 0.08);
|
||||
border-radius: 0.75rem;
|
||||
padding: 0.5rem;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -225,7 +227,11 @@
|
|||
&__status-text {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
color: #22c55e;
|
||||
color: #065f46; // dark emerald – 7.4:1 on white; light-mode accessible
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: #34d399; // light mint – high contrast on dark bg
|
||||
}
|
||||
}
|
||||
|
||||
&__quick-facts {
|
||||
|
|
@ -351,17 +357,10 @@
|
|||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
// Brand-specific icon colors with better contrast
|
||||
&--email .contact-section__social-icon {
|
||||
color: var(--social-icon-email, #2563eb); // Use theme variable
|
||||
}
|
||||
|
||||
&--github .contact-section__social-icon {
|
||||
color: var(--social-icon-github, #1f2937); // Use theme variable
|
||||
}
|
||||
|
||||
&--linkedin .contact-section__social-icon {
|
||||
color: var(--social-icon-linkedin, #0d67b5); // Use theme variable
|
||||
// Icons inherit color from parent button's var(--contact-social-text)
|
||||
// which is #042C53 (light) / #E6F1FB (dark) – both high contrast
|
||||
.contact-section__social-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -578,7 +577,7 @@
|
|||
&__email-card-icon {
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
color: var(--primary-color);
|
||||
color: var(--color-primary); // #042C53 light / #E6F1FB dark – high contrast
|
||||
margin: 0 auto 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -599,39 +598,19 @@
|
|||
margin: var(--card-padding-sm) 0;
|
||||
text-decoration: none;
|
||||
color: var(--contact-button-text);
|
||||
box-shadow:
|
||||
0 4px 14px 0 rgba(37, 99, 235, 0.25),
|
||||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
box-shadow: none;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&::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 ease;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--contact-button-hover-bg);
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 8px 25px 0 rgba(37, 99, 235, 0.35),
|
||||
0 4px 6px -2px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&::before {
|
||||
left: 100%;
|
||||
}
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:active {
|
||||
|
|
@ -661,7 +640,7 @@
|
|||
line-height: 1.5;
|
||||
|
||||
strong {
|
||||
color: var(--primary-color);
|
||||
color: var(--color-primary);
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
|
@ -753,6 +732,99 @@
|
|||
}
|
||||
}
|
||||
|
||||
// ── Dark mode explicit overrides ─────────────────────────────────────────────
|
||||
// CSS vars can silently fall back to light values in certain cascade scenarios.
|
||||
// These scoped rules guarantee correct dark appearance regardless.
|
||||
[data-theme='dark'] {
|
||||
.contact-section {
|
||||
// Card / form backgrounds
|
||||
&__connect-card,
|
||||
&__social-card,
|
||||
&__info-card,
|
||||
&__email-card,
|
||||
&__form-card {
|
||||
background: #042c53;
|
||||
border-color: rgba(230, 241, 251, 0.12);
|
||||
}
|
||||
|
||||
// Email button – ochre fill, navy text
|
||||
&__email-button {
|
||||
background: #ef9f27;
|
||||
color: #042c53;
|
||||
|
||||
&:hover {
|
||||
background: #fac775;
|
||||
color: #042c53;
|
||||
}
|
||||
}
|
||||
|
||||
// Form submit button
|
||||
&__form-button {
|
||||
background: #ef9f27;
|
||||
color: #042c53;
|
||||
|
||||
&:hover:not(:disabled) {
|
||||
background: #fac775;
|
||||
}
|
||||
}
|
||||
|
||||
// Social list icons (Globe, Linkedin) and links
|
||||
&__social-icon {
|
||||
color: #e6f1fb;
|
||||
}
|
||||
|
||||
&__detail-item {
|
||||
color: #e6f1fb;
|
||||
}
|
||||
|
||||
&__detail-link {
|
||||
color: #e6f1fb;
|
||||
|
||||
&:hover {
|
||||
text-decoration-color: #e6f1fb;
|
||||
}
|
||||
}
|
||||
|
||||
// Appointment hint block
|
||||
&__appointment-hint {
|
||||
background: rgba(12, 68, 124, 0.5);
|
||||
border-color: rgba(230, 241, 251, 0.12);
|
||||
}
|
||||
|
||||
&__appointment-icon,
|
||||
&__appointment-link,
|
||||
&__appointment-text {
|
||||
color: #e6f1fb;
|
||||
}
|
||||
|
||||
// Email icon in header
|
||||
&__email-icon {
|
||||
color: #ef9f27;
|
||||
background: rgba(239, 159, 39, 0.15);
|
||||
}
|
||||
|
||||
// Titles within cards (compiled from $color-heading)
|
||||
&__email-title,
|
||||
&__connect-title,
|
||||
&__social-title,
|
||||
&__form-title {
|
||||
color: #e6f1fb;
|
||||
}
|
||||
|
||||
// Inputs
|
||||
&__form-input,
|
||||
&__form-textarea {
|
||||
background: #021829;
|
||||
color: #e6f1fb;
|
||||
border-color: rgba(230, 241, 251, 0.2);
|
||||
|
||||
&::placeholder {
|
||||
color: #b5d4f4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// High contrast mode support
|
||||
@media (prefers-contrast: high) {
|
||||
.contact-section__social-button {
|
||||
|
|
|
|||
|
|
@ -68,7 +68,7 @@
|
|||
padding: var(--space-5) var(--space-6);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--card-glass-border);
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-left: 4px solid var(--color-secondary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,26 +23,38 @@
|
|||
background: var(--hero-background);
|
||||
position: relative;
|
||||
|
||||
// Subtle radial glow at center for cinematic depth
|
||||
// Mid-Century geometric circle decoration
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(
|
||||
ellipse 80% 60% at 50% 40%,
|
||||
rgba(99, 102, 241, 0.12) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
top: -80px;
|
||||
right: -80px;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid rgba(12, 68, 124, 0.15);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 40px;
|
||||
left: -60px;
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
border-radius: 50%;
|
||||
background: rgba(239, 159, 39, 0.08);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
[data-theme='dark'] & {
|
||||
&::before {
|
||||
background: radial-gradient(
|
||||
ellipse 80% 60% at 50% 40%,
|
||||
rgba(139, 92, 246, 0.22) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
border-color: rgba(230, 241, 251, 0.1);
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: rgba(239, 159, 39, 0.05);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -86,27 +98,31 @@
|
|||
|
||||
&--primary,
|
||||
&--tertiary {
|
||||
background: var(--gradient-primary);
|
||||
color: var(--color-background);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-dark);
|
||||
font-family: var(--font-headline);
|
||||
font-weight: 600;
|
||||
border-radius: 8px;
|
||||
|
||||
&:hover {
|
||||
background: var(--color-secondary);
|
||||
box-shadow: none;
|
||||
filter: none;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background: transparent;
|
||||
color: var(--color-text);
|
||||
border: 2px solid $color-primary;
|
||||
color: var(--color-primary);
|
||||
border: 2px solid var(--color-primary);
|
||||
padding: calc(#{$spacing-sm} - 2px) $spacing-xl;
|
||||
|
||||
&:hover {
|
||||
background: $color-primary;
|
||||
color: var(--color-background);
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-on-dark);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: var(--box-shadow-sm);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -149,7 +149,7 @@
|
|||
margin-bottom: 1rem;
|
||||
padding: 1rem;
|
||||
background: var(--bg-primary);
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-left: 4px solid var(--color-secondary);
|
||||
border-radius: 0 0.5rem 0.5rem 0;
|
||||
font-weight: 500;
|
||||
text-decoration: underline;
|
||||
|
|
|
|||
|
|
@ -80,7 +80,7 @@
|
|||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--card-glass-border);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
border-left: 3px solid var(--color-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-4) var(--space-5);
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
|
@ -102,10 +102,16 @@
|
|||
&__stat {
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: 800;
|
||||
color: var(--color-primary);
|
||||
color: $color-heading; // compiled literal – immune to CSS var cascade issues
|
||||
line-height: var(--leading-normal);
|
||||
white-space: nowrap;
|
||||
letter-spacing: var(--tracking-tight);
|
||||
|
||||
[data-theme='dark'] & {
|
||||
color: var(
|
||||
--color-text-on-dark
|
||||
); // #E6F1FB – always defined in globals, never overridden
|
||||
}
|
||||
}
|
||||
|
||||
&__text {
|
||||
|
|
@ -127,7 +133,7 @@
|
|||
padding: var(--space-5) var(--space-6);
|
||||
border-radius: var(--radius-xl);
|
||||
border: 1px solid var(--card-glass-border);
|
||||
border-left: 4px solid var(--color-primary);
|
||||
border-left: 4px solid var(--color-secondary);
|
||||
box-shadow: var(--shadow-glow);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--card-glass-border);
|
||||
border-left: 3px solid var(--color-primary);
|
||||
border-left: 3px solid var(--color-secondary);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--space-6);
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
|
|
|||
|
|
@ -358,67 +358,34 @@
|
|||
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
|
||||
// Shimmer disabled for flat design
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
rgba(255, 255, 255, 0.4),
|
||||
transparent
|
||||
);
|
||||
transform: translateX(-100%);
|
||||
animation: shimmer 2s infinite;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Semantic hierarchy classes with enhanced gradients
|
||||
// Semantic hierarchy classes — flat brand colors via theme vars
|
||||
&--primary {
|
||||
background: var(--skills-progress-primary);
|
||||
box-shadow: 0 0 8px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
&--secondary {
|
||||
background: var(--skills-progress-secondary);
|
||||
box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
|
||||
}
|
||||
|
||||
&--tertiary {
|
||||
background: var(--skills-progress-tertiary);
|
||||
box-shadow: 0 0 8px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
&--quaternary {
|
||||
background: var(--skills-progress-quaternary);
|
||||
box-shadow: 0 0 8px rgba(6, 182, 212, 0.3);
|
||||
}
|
||||
|
||||
&--quinary {
|
||||
background: var(--skills-progress-quinary);
|
||||
box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
|
||||
}
|
||||
|
||||
&--senary {
|
||||
background: var(--skills-progress-senary);
|
||||
box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Enhanced shimmer animation
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
transform: translateX(-100%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -64,119 +64,63 @@ $text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
|
|||
$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
|
||||
|
||||
$about-light-theme: (
|
||||
// About section colors
|
||||
about-background:
|
||||
linear-gradient(135deg, $about-bg-light-start 0%, $about-bg-light-end 100%),
|
||||
gradient-about-title: linear-gradient(90deg, $green-primary, $teal-primary),
|
||||
about-greeting-color: $green-secondary,
|
||||
gradient-image-overlay:
|
||||
linear-gradient(
|
||||
45deg,
|
||||
rgba($blue-primary, $alpha-overlay),
|
||||
rgba($purple-primary, $alpha-overlay)
|
||||
),
|
||||
// Skill badge colors - FIXED for AAA contrast
|
||||
skill-badge-primary-bg: $blue-lightest,
|
||||
skill-badge-primary-text: $text-aaa-light,
|
||||
// Changed from $blue-tertiary for AAA contrast
|
||||
skill-badge-secondary-bg: $green-ultralight,
|
||||
skill-badge-secondary-text: $text-aaa-light,
|
||||
// Changed from $green-tertiary for AAA contrast
|
||||
skill-badge-tertiary-bg: $purple-lightest,
|
||||
skill-badge-tertiary-text: $text-aaa-light,
|
||||
// Changed from $orange-tertiary for AAA contrast
|
||||
skill-badge-quaternary-bg: $orange-lighter,
|
||||
skill-badge-quaternary-text: $text-aaa-light,
|
||||
about-background: #ffffff,
|
||||
gradient-about-title: #042c53,
|
||||
about-greeting-color: #042c53,
|
||||
gradient-image-overlay: rgba(4, 44, 83, 0.1),
|
||||
// Skill badge colors
|
||||
skill-badge-primary-bg: #e6f1fb,
|
||||
skill-badge-primary-text: #042c53,
|
||||
skill-badge-secondary-bg: #f1efe8,
|
||||
skill-badge-secondary-text: #042c53,
|
||||
skill-badge-tertiary-bg: #e6f1fb,
|
||||
skill-badge-tertiary-text: #042c53,
|
||||
skill-badge-quaternary-bg: #faeeda,
|
||||
skill-badge-quaternary-text: #412402,
|
||||
|
||||
// Changed from $orange-secondary for AAA contrast
|
||||
// Feature card colors - FIXED for AAA contrast
|
||||
feature-card-primary-bg:
|
||||
linear-gradient(135deg, $blue-lightest, $blue-ultralight),
|
||||
feature-card-secondary-bg:
|
||||
linear-gradient(135deg, $purple-lightest, $purple-ultralight),
|
||||
feature-card-tertiary-bg:
|
||||
linear-gradient(135deg, $teal-lightest, $teal-lighter),
|
||||
feature-icon-primary: $blue-primary,
|
||||
feature-icon-secondary: $purple-primary,
|
||||
feature-icon-tertiary: $teal-primary,
|
||||
// Feature card colors
|
||||
feature-card-primary-bg: #f1efe8,
|
||||
feature-card-secondary-bg: #ffffff,
|
||||
feature-card-tertiary-bg: #f1efe8,
|
||||
feature-icon-primary: #042c53,
|
||||
feature-icon-secondary: #0c447c,
|
||||
feature-icon-tertiary: #ef9f27,
|
||||
|
||||
// Text colors - FIXED for AAA contrast
|
||||
feature-title-primary: $text-aaa-light,
|
||||
// Changed from $blue-tertiary for AAA contrast
|
||||
feature-title-secondary: $text-aaa-light,
|
||||
// Changed from $purple-tertiary for AAA contrast
|
||||
feature-title-tertiary: $text-aaa-light,
|
||||
|
||||
// Changed from $teal-tertiary for AAA contrast
|
||||
feature-description-primary: $text-aaa-light,
|
||||
// Changed from $blue-secondary for AAA contrast
|
||||
feature-description-secondary: $text-aaa-light,
|
||||
// Changed from $purple-secondary for AAA contrast
|
||||
feature-description-tertiary: $text-aaa-light
|
||||
// Changed from $teal-dark for AAA contrast
|
||||
feature-title-primary: #042c53,
|
||||
feature-title-secondary: #042c53,
|
||||
feature-title-tertiary: #042c53,
|
||||
feature-description-primary: #1a1a1a,
|
||||
feature-description-secondary: #1a1a1a,
|
||||
feature-description-tertiary: #1a1a1a,
|
||||
);
|
||||
|
||||
$about-dark-theme: (
|
||||
// About section colors
|
||||
about-background:
|
||||
linear-gradient(135deg, $about-bg-dark-start 0%, $about-bg-dark-end 100%),
|
||||
gradient-about-title: linear-gradient(90deg, $green-light, $teal-secondary),
|
||||
about-greeting-color: $green-lighter,
|
||||
gradient-image-overlay:
|
||||
linear-gradient(
|
||||
45deg,
|
||||
rgba($blue-primary, $alpha-overlay),
|
||||
rgba($purple-primary, $alpha-overlay)
|
||||
),
|
||||
// Skill badge colors - FIXED for AAA contrast
|
||||
skill-badge-primary-bg: rgba($blue-dark, $alpha-bg-low),
|
||||
skill-badge-primary-text: $text-aaa-dark,
|
||||
// Changed from $blue-lighter for AAA contrast
|
||||
skill-badge-secondary-bg: rgba($green-dark, $alpha-bg-low),
|
||||
skill-badge-secondary-text: $text-aaa-dark,
|
||||
// Changed from $green-lightest for AAA contrast
|
||||
skill-badge-tertiary-bg: rgba($purple-dark, $alpha-bg-low),
|
||||
skill-badge-tertiary-text: $text-aaa-dark,
|
||||
// Changed from $purple-lighter for AAA contrast
|
||||
skill-badge-quaternary-bg: rgba($orange-darker, $alpha-bg-low),
|
||||
skill-badge-quaternary-text: $text-aaa-dark,
|
||||
about-background: #0c447c,
|
||||
gradient-about-title: #e6f1fb,
|
||||
about-greeting-color: #e6f1fb,
|
||||
gradient-image-overlay: rgba(230, 241, 251, 0.1),
|
||||
// Skill badge colors (dark)
|
||||
skill-badge-primary-bg: rgba(230, 241, 251, 0.15),
|
||||
skill-badge-primary-text: #e6f1fb,
|
||||
skill-badge-secondary-bg: rgba(230, 241, 251, 0.1),
|
||||
skill-badge-secondary-text: #e6f1fb,
|
||||
skill-badge-tertiary-bg: rgba(230, 241, 251, 0.15),
|
||||
skill-badge-tertiary-text: #e6f1fb,
|
||||
skill-badge-quaternary-bg: rgba(239, 159, 39, 0.15),
|
||||
skill-badge-quaternary-text: #ef9f27,
|
||||
|
||||
// Changed from $orange-light for AAA contrast
|
||||
// Feature card colors - Enhanced for better contrast
|
||||
feature-card-primary-bg:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($blue-dark, $alpha-bg-low),
|
||||
rgba($blue-darker, $alpha-bg-low)
|
||||
),
|
||||
feature-card-secondary-bg:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($purple-dark, $alpha-bg-low),
|
||||
rgba($purple-darker, $alpha-bg-low)
|
||||
),
|
||||
feature-card-tertiary-bg:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($teal-dark, $alpha-bg-low),
|
||||
rgba($teal-darker, $alpha-bg-low)
|
||||
),
|
||||
feature-icon-primary: $blue-light,
|
||||
feature-icon-secondary: $purple-light,
|
||||
feature-icon-tertiary: $teal-secondary,
|
||||
// Feature card colors (dark)
|
||||
feature-card-primary-bg: rgba(12, 68, 124, 0.8),
|
||||
feature-card-secondary-bg: rgba(4, 44, 83, 0.9),
|
||||
feature-card-tertiary-bg: rgba(12, 68, 124, 0.8),
|
||||
feature-icon-primary: #ef9f27,
|
||||
feature-icon-secondary: #ef9f27,
|
||||
feature-icon-tertiary: #ef9f27,
|
||||
|
||||
// Text colors - FIXED for AAA contrast
|
||||
feature-title-primary: $text-aaa-dark,
|
||||
// Changed from $blue-lighter for AAA contrast
|
||||
feature-title-secondary: $text-aaa-dark,
|
||||
// Changed from $purple-lighter for AAA contrast
|
||||
feature-title-tertiary: $text-aaa-dark,
|
||||
|
||||
// Changed from $teal-light for AAA contrast
|
||||
feature-description-primary: $text-aaa-dark,
|
||||
// Changed from $blue-lightest for AAA contrast
|
||||
feature-description-secondary: $text-aaa-dark,
|
||||
// Changed from $purple-lightest for AAA contrast
|
||||
feature-description-tertiary: $text-aaa-dark
|
||||
// Changed from $teal-lightest for AAA contrast
|
||||
feature-title-primary: #e6f1fb,
|
||||
feature-title-secondary: #e6f1fb,
|
||||
feature-title-tertiary: #e6f1fb,
|
||||
feature-description-primary: #b5d4f4,
|
||||
feature-description-secondary: #b5d4f4,
|
||||
feature-description-tertiary: #b5d4f4,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
|
||||
// Base colors and variables that are used across sections
|
||||
$base-light-theme: (
|
||||
primary: #800000,
|
||||
background: #ffffff,
|
||||
text: #000000,
|
||||
text-muted: #2b2b2b,
|
||||
active-box-shadow: rgba(0, 0, 0, 0.6),
|
||||
hover-box-shadow: rgba(0, 0, 0, 0.9),
|
||||
gradient-primary: $gradient-primary,
|
||||
primary: #042c53,
|
||||
background: #f1efe8,
|
||||
text: #1a1a1a,
|
||||
text-muted: #412402,
|
||||
active-box-shadow: rgba(4, 44, 83, 0.2),
|
||||
hover-box-shadow: rgba(4, 44, 83, 0.15),
|
||||
gradient-primary: #042c53,
|
||||
gradient-text: $gradient-text-light,
|
||||
|
||||
// Shadow variables
|
||||
|
|
@ -36,10 +36,10 @@ $base-light-theme: (
|
|||
|
||||
// Form and text variables
|
||||
form-background: #ffffff,
|
||||
form-border: #e5e7eb,
|
||||
text-primary: #111827,
|
||||
text-secondary: #484c56,
|
||||
primary-color: #9333ea,
|
||||
form-border: rgba(4, 44, 83, 0.15),
|
||||
text-primary: #1a1a1a,
|
||||
text-secondary: #412402,
|
||||
primary-color: #042c53,
|
||||
|
||||
// Contact status colors (light theme)
|
||||
contact-status-success-bg: #d1fae5,
|
||||
|
|
@ -50,25 +50,24 @@ $base-light-theme: (
|
|||
contact-status-error-text: #991b1b,
|
||||
|
||||
// Additional missing variables
|
||||
box-shadow-hover: rgba(0, 0, 0, 0.15),
|
||||
box-shadow-hover: rgba(4, 44, 83, 0.15),
|
||||
bg-primary: #ffffff,
|
||||
bg-secondary: #f9fafb,
|
||||
border-color: #e5e7eb,
|
||||
|
||||
bg-secondary: #f1efe8,
|
||||
border-color: rgba(4, 44, 83, 0.15),
|
||||
// Design system semantic tokens
|
||||
surface: #f8fafc,
|
||||
border: #e5e7eb,
|
||||
secondary: #2563eb,
|
||||
surface: #ffffff,
|
||||
border: rgba(4, 44, 83, 0.15),
|
||||
secondary: #0c447c,
|
||||
);
|
||||
|
||||
$base-dark-theme: (
|
||||
primary: #9333ea,
|
||||
background: #1f2937,
|
||||
text: #ffffff,
|
||||
text-muted: #ffffff,
|
||||
active-box-shadow: rgba(255, 255, 255, 0.1),
|
||||
hover-box-shadow: rgba(255, 255, 255, 0.15),
|
||||
gradient-primary: $gradient-primary,
|
||||
primary: #e6f1fb,
|
||||
background: #021829,
|
||||
text: #e6f1fb,
|
||||
text-muted: #b5d4f4,
|
||||
active-box-shadow: rgba(230, 241, 251, 0.1),
|
||||
hover-box-shadow: rgba(230, 241, 251, 0.15),
|
||||
gradient-primary: #ef9f27,
|
||||
gradient-text: $gradient-text-dark,
|
||||
|
||||
// Shadow variables
|
||||
|
|
@ -93,30 +92,27 @@ $base-dark-theme: (
|
|||
transition-fast: #{$transition-fast},
|
||||
|
||||
// Form and text variables (dark theme)
|
||||
form-background: #374151,
|
||||
form-border: #4b5563,
|
||||
text-primary: #f9fafb,
|
||||
text-secondary: #9ca3af,
|
||||
primary-color: #9333ea,
|
||||
form-background: #042c53,
|
||||
form-border: rgba(230, 241, 251, 0.15),
|
||||
text-primary: #e6f1fb,
|
||||
text-secondary: #b5d4f4,
|
||||
primary-color: #ef9f27,
|
||||
|
||||
// Contact status colors (dark theme)
|
||||
contact-status-success-bg: #064e3b,
|
||||
contact-status-success-border: #059669,
|
||||
contact-status-success-text: #a7f3d0,
|
||||
contact-status-error-bg: #7f1d1d,
|
||||
contact-status-success-bg: rgba(4, 44, 83, 0.5),
|
||||
contact-status-success-border: #ef9f27,
|
||||
contact-status-success-text: #fac775,
|
||||
contact-status-error-bg: rgba(127, 29, 29, 0.3),
|
||||
contact-status-error-border: #dc2626,
|
||||
contact-status-error-text: #fecaca,
|
||||
|
||||
// Additional missing variables (dark theme)
|
||||
box-shadow-hover: rgba(255, 255, 255, 0.15),
|
||||
bg-primary: #1f2937,
|
||||
bg-secondary: #374151,
|
||||
border-color: #4b5563,
|
||||
|
||||
box-shadow-hover: rgba(239, 159, 39, 0.15),
|
||||
bg-primary: #021829,
|
||||
bg-secondary: #042c53,
|
||||
border-color: rgba(230, 241, 251, 0.12),
|
||||
// Design system semantic tokens
|
||||
// surface is a subtle step above background — not a stark jump.
|
||||
// Kept close to background so dark sections feel like one canvas.
|
||||
surface: #232f3e,
|
||||
border: #374151,
|
||||
secondary: #60a5fa,
|
||||
surface: #042c53,
|
||||
border: rgba(230, 241, 251, 0.12),
|
||||
secondary: #b5d4f4,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -47,74 +47,39 @@ $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
|
|||
|
||||
$certifications-light-theme: (
|
||||
// Certifications section background
|
||||
'certifications-background':
|
||||
linear-gradient(135deg, $cert-bg-light-start 0%, $cert-bg-light-end 100%),
|
||||
'gradient-certifications-title':
|
||||
linear-gradient(to right, $purple-primary, $pink-primary),
|
||||
'color-certifications-primary': $purple-primary,
|
||||
'certifications-background': #f1efe8,
|
||||
'gradient-certifications-title': #042c53,
|
||||
'color-certifications-primary': #ef9f27,
|
||||
|
||||
// Card styling
|
||||
'certifications-card-background':
|
||||
linear-gradient(135deg, $white 0%, $gray-50 100%),
|
||||
'certifications-card-background': #ffffff,
|
||||
'certifications-card-shadow': $shadow-card-light,
|
||||
'certifications-card-shadow-hover': $shadow-card-light-hover,
|
||||
'certifications-card-overlay':
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($purple-primary, $alpha-overlay-light) 0%,
|
||||
rgba($pink-primary, $alpha-overlay-light) 100%
|
||||
),
|
||||
// Badge styling - FIXED for AAA contrast
|
||||
'certifications-badge-background':
|
||||
linear-gradient(to right, $purple-lightest, $pink-lightest),
|
||||
'certifications-badge-border': rgba($purple-primary, $alpha-border-light),
|
||||
'color-certifications-badge-text': $text-aaa-light,
|
||||
'certifications-card-overlay': rgba(4, 44, 83, 0.04),
|
||||
'certifications-badge-background': #e6f1fb,
|
||||
'certifications-badge-border': rgba(4, 44, 83, 0.15),
|
||||
'color-certifications-badge-text': #042c53,
|
||||
|
||||
// Changed from $purple-secondary for AAA contrast
|
||||
// Text styling for AAA compliance
|
||||
'certifications-card-title': $text-aaa-light,
|
||||
'certifications-card-description': $text-aaa-light,
|
||||
'certifications-card-date': $text-aaa-light,
|
||||
// Medium gray for secondary text
|
||||
'certifications-card-title': #042c53,
|
||||
'certifications-card-description': #1a1a1a,
|
||||
'certifications-card-date': #412402
|
||||
);
|
||||
|
||||
$certifications-dark-theme: (
|
||||
// Certifications section background (dark purple/pink gradient)
|
||||
'certifications-background':
|
||||
linear-gradient(135deg, $cert-bg-dark-start 0%, $cert-bg-dark-end 100%),
|
||||
// Certifications title gradient (brighter purple to pink for dark mode)
|
||||
'gradient-certifications-title':
|
||||
linear-gradient(to right, $purple-light, $pink-light),
|
||||
// Primary color for icons (lighter purple)
|
||||
'color-certifications-primary': $purple-light,
|
||||
'certifications-background': #042c53,
|
||||
'gradient-certifications-title': #e6f1fb,
|
||||
'color-certifications-primary': #ef9f27,
|
||||
|
||||
// Card styling (dark theme)
|
||||
'certifications-card-background':
|
||||
linear-gradient(135deg, $gray-900 0%, $gray-800 100%),
|
||||
'certifications-card-background': rgba(12, 68, 124, 0.6),
|
||||
'certifications-card-shadow': $shadow-card-dark,
|
||||
'certifications-card-shadow-hover': $shadow-card-dark-hover,
|
||||
'certifications-card-overlay':
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($purple-light, $alpha-overlay-dark) 0%,
|
||||
rgba($pink-light, $alpha-overlay-dark) 100%
|
||||
),
|
||||
// Badge styling (dark theme) - FIXED for AAA contrast
|
||||
'certifications-badge-background':
|
||||
linear-gradient(
|
||||
to right,
|
||||
rgba($purple-dark, $alpha-border-dark),
|
||||
rgba($pink-dark, $alpha-border-dark)
|
||||
),
|
||||
'certifications-badge-border': rgba($purple-light, $alpha-border-dark),
|
||||
'color-certifications-badge-text': $text-aaa-dark,
|
||||
'certifications-card-overlay': rgba(239, 159, 39, 0.04),
|
||||
'certifications-badge-background': rgba(239, 159, 39, 0.15),
|
||||
'certifications-badge-border': rgba(239, 159, 39, 0.3),
|
||||
'color-certifications-badge-text': #ef9f27,
|
||||
|
||||
// Changed from $purple-lighter for AAA contrast
|
||||
// Text styling for AAA compliance
|
||||
'certifications-card-title': $text-aaa-dark,
|
||||
'certifications-card-description': $text-aaa-dark,
|
||||
'certifications-card-date': #d1d5db,
|
||||
// Light gray for secondary text in dark mode
|
||||
'certifications-card-title': #e6f1fb,
|
||||
'certifications-card-description': #b5d4f4,
|
||||
'certifications-card-date': #b5d4f4,
|
||||
);
|
||||
|
||||
// Card layout styling
|
||||
|
|
|
|||
|
|
@ -72,148 +72,87 @@ $text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
|
|||
|
||||
$contact-light-theme: (
|
||||
// Contact section background (light indigo/purple tones)
|
||||
'contact-background':
|
||||
linear-gradient(
|
||||
135deg,
|
||||
$contact-bg-light-start 0%,
|
||||
$contact-bg-light-end 100%
|
||||
),
|
||||
// Contact title gradient (indigo to purple)
|
||||
'gradient-contact-title':
|
||||
linear-gradient(to right, $indigo-primary, $indigo-secondary),
|
||||
// Primary color for icons (indigo)
|
||||
'color-contact-primary': $indigo-primary,
|
||||
'contact-background': #f1efe8,
|
||||
'gradient-contact-title': #042c53,
|
||||
'color-contact-primary': #042c53,
|
||||
|
||||
// Form styling - warm cream/peach to complement cool blue background
|
||||
'contact-form-bg':
|
||||
linear-gradient(135deg, $orange-lightest 0%, $orange-lighter 100%),
|
||||
'contact-form-border': rgba($orange-primary, $alpha-border-light),
|
||||
'contact-form-bg': #ffffff,
|
||||
'contact-form-border': rgba(4, 44, 83, 0.15),
|
||||
'contact-form-shadow': $shadow-light,
|
||||
|
||||
// Input styling - warm background to complement form
|
||||
'contact-input-bg': $amber-primary,
|
||||
'contact-input-border': rgba($orange-primary, $alpha-border-medium),
|
||||
'contact-input-focus-ring': rgba($orange-primary, $alpha-border-light),
|
||||
'contact-input-text': $text-aaa-light,
|
||||
// Added for AAA compliance
|
||||
'contact-input-placeholder': $text-input-placeholder-light,
|
||||
'contact-input-bg': #f1efe8,
|
||||
'contact-input-border': rgba(4, 44, 83, 0.2),
|
||||
'contact-input-focus-ring': rgba(4, 44, 83, 0.3),
|
||||
'contact-input-text': #1a1a1a,
|
||||
'contact-input-placeholder': #412402,
|
||||
|
||||
// Added for form accessibility
|
||||
// Button styling - improved contrast and readability
|
||||
'contact-button-bg':
|
||||
linear-gradient(135deg, $blue-primary 0%, $blue-secondary 100%),
|
||||
'contact-button-text': $text-aaa-dark,
|
||||
// Changed to ensure AAA contrast
|
||||
'contact-button-hover-bg':
|
||||
linear-gradient(135deg, $blue-dark 0%, $blue-darker 100%),
|
||||
// Social button styling - FIXED for AAA contrast
|
||||
'contact-social-bg': $orange-lighter,
|
||||
'contact-social-text': $text-aaa-light,
|
||||
// Changed from $orange-dark for AAA contrast
|
||||
'contact-social-border': $orange-primary,
|
||||
'contact-social-hover-bg': $orange-light,
|
||||
'contact-social-hover-border': $orange-secondary,
|
||||
'contact-button-bg': #042c53,
|
||||
'contact-button-text': #e6f1fb,
|
||||
'contact-button-hover-bg': #0c447c,
|
||||
|
||||
// Status message styling (light theme) - improved readability
|
||||
'contact-status-success-bg': $green-lightest,
|
||||
'contact-status-success-border': $green-primary,
|
||||
'contact-status-success-text': $green-secondary,
|
||||
'contact-status-error-bg': $red-lightest,
|
||||
'contact-status-error-border': $red-primary,
|
||||
'contact-status-error-text': $red-secondary,
|
||||
'contact-social-bg': #f1efe8,
|
||||
'contact-social-text': #042c53,
|
||||
'contact-social-border': rgba(4, 44, 83, 0.15),
|
||||
'contact-social-hover-bg': #e6f1fb,
|
||||
'contact-social-hover-border': #0c447c,
|
||||
|
||||
// Text colors for AAA compliance
|
||||
'color-text': $text-aaa-light,
|
||||
// Near black for AAA contrast
|
||||
'color-text-muted': $gray-neutral-light,
|
||||
// Gray for secondary text
|
||||
'primary-color': $indigo-primary,
|
||||
// Indigo primary
|
||||
'text-primary': $text-aaa-light,
|
||||
// Main text color
|
||||
'text-secondary': $gray-neutral-light,
|
||||
'contact-status-success-bg': #d1fae5,
|
||||
'contact-status-success-border': #10b981,
|
||||
'contact-status-success-text': #065f46,
|
||||
'contact-status-error-bg': #fee2e2,
|
||||
'contact-status-error-border': #ef4444,
|
||||
'contact-status-error-text': #991b1b,
|
||||
|
||||
// Secondary text color
|
||||
// Enhanced social button colors for AAA compliance
|
||||
'social-icon-email': $text-aaa-light,
|
||||
// Dark for better contrast
|
||||
'social-icon-github': $text-aaa-light,
|
||||
// Dark for better contrast
|
||||
'social-icon-linkedin': $text-aaa-light,
|
||||
// Dark for better contrast
|
||||
'color-text': #1a1a1a,
|
||||
'color-text-muted': #412402,
|
||||
'primary-color': #042c53,
|
||||
'text-primary': #1a1a1a,
|
||||
'text-secondary': #412402,
|
||||
|
||||
'social-icon-email': #042c53,
|
||||
'social-icon-github': #042c53,
|
||||
'social-icon-linkedin': #042c53
|
||||
);
|
||||
|
||||
$contact-dark-theme: (
|
||||
// Contact section background (dark indigo/purple tones)
|
||||
'contact-background':
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($indigo-light, $alpha-border-light) 0%,
|
||||
rgba($purple-primary, $alpha-border-light) 100%
|
||||
),
|
||||
// Contact title gradient (brighter indigo to purple for dark mode)
|
||||
'gradient-contact-title':
|
||||
linear-gradient(to right, $indigo-light, $purple-primary),
|
||||
// Primary color for icons (lighter indigo)
|
||||
'color-contact-primary': $indigo-light,
|
||||
'contact-background': #021829,
|
||||
'gradient-contact-title': #e6f1fb,
|
||||
'color-contact-primary': #ef9f27,
|
||||
|
||||
// Form styling (dark theme) - warm dark tones to complement cool purple/indigo
|
||||
'contact-form-bg':
|
||||
linear-gradient(135deg, $orange-darkest 0%, $orange-darker 100%),
|
||||
'contact-form-border': rgba($orange-primary, $alpha-border-medium),
|
||||
'contact-form-bg': #042c53,
|
||||
'contact-form-border': rgba(230, 241, 251, 0.12),
|
||||
'contact-form-shadow': $shadow-dark,
|
||||
|
||||
// Input styling (dark theme) - FIXED for AAA contrast
|
||||
'contact-input-bg': $gray-neutral-dark,
|
||||
// Changed to neutral dark gray
|
||||
'contact-input-border': rgba($orange-primary, $alpha-border-heavy),
|
||||
'contact-input-focus-ring': rgba($orange-primary, $alpha-border-medium),
|
||||
'contact-input-text': $text-aaa-dark,
|
||||
// White text for AAA contrast
|
||||
'contact-input-placeholder': $gray-neutral-lighter,
|
||||
'contact-input-bg': #042c53,
|
||||
'contact-input-border': rgba(230, 241, 251, 0.2),
|
||||
'contact-input-focus-ring': rgba(239, 159, 39, 0.3),
|
||||
'contact-input-text': #e6f1fb,
|
||||
'contact-input-placeholder': #b5d4f4,
|
||||
|
||||
// Light gray for placeholder
|
||||
// Button styling (dark theme) - improved contrast
|
||||
'contact-button-bg':
|
||||
linear-gradient(135deg, $blue-light 0%, $blue-primary 100%),
|
||||
'contact-button-text': $text-aaa-dark,
|
||||
'contact-button-hover-bg':
|
||||
linear-gradient(135deg, $blue-lighter 0%, $blue-light 100%),
|
||||
// Social button styling (dark theme) - FIXED for AAA contrast
|
||||
'contact-social-bg': $gray-neutral-medium,
|
||||
// Changed to neutral dark background
|
||||
'contact-social-text': $text-aaa-dark,
|
||||
// White text for AAA contrast
|
||||
'contact-social-border': $orange-secondary,
|
||||
'contact-social-hover-bg': $gray-neutral-dark,
|
||||
// Slightly lighter on hover
|
||||
'contact-social-hover-border': $orange-primary,
|
||||
'contact-button-bg': #ef9f27,
|
||||
'contact-button-text': #042c53,
|
||||
'contact-button-hover-bg': #fac775,
|
||||
|
||||
// Status message styling (dark theme) - improved readability
|
||||
'contact-status-success-bg': rgba($green-primary, $alpha-low),
|
||||
'contact-status-success-border': $green-light,
|
||||
'contact-status-success-text': $green-lighter,
|
||||
'contact-status-error-bg': rgba($red-light, $alpha-low),
|
||||
'contact-status-error-border': $red-light,
|
||||
'contact-status-error-text': $red-lighter,
|
||||
'contact-social-bg': #042c53,
|
||||
'contact-social-text': #e6f1fb,
|
||||
'contact-social-border': rgba(239, 159, 39, 0.3),
|
||||
'contact-social-hover-bg': #0c447c,
|
||||
'contact-social-hover-border': #ef9f27,
|
||||
|
||||
// Text colors for AAA compliance - ALL WHITE in dark mode
|
||||
'color-text': $text-aaa-dark,
|
||||
// White for AAA contrast on dark
|
||||
'color-text-muted': $text-aaa-dark,
|
||||
// Changed to white for consistency
|
||||
'primary-color': $indigo-light,
|
||||
// Lighter indigo for dark mode
|
||||
'text-primary': $text-aaa-dark,
|
||||
// Main text color
|
||||
'text-secondary': $text-aaa-dark,
|
||||
// Changed to white for consistency
|
||||
// Secondary text color
|
||||
// Enhanced social button colors for AAA compliance
|
||||
'social-icon-email': $text-aaa-dark,
|
||||
// White for better contrast
|
||||
'social-icon-github': $text-aaa-dark,
|
||||
// White for better contrast
|
||||
'social-icon-linkedin': $text-aaa-dark,
|
||||
// White for better contrast
|
||||
'contact-status-success-bg': rgba(4, 44, 83, 0.5),
|
||||
'contact-status-success-border': #ef9f27,
|
||||
'contact-status-success-text': #fac775,
|
||||
'contact-status-error-bg': rgba(127, 29, 29, 0.3),
|
||||
'contact-status-error-border': #dc2626,
|
||||
'contact-status-error-text': #fecaca,
|
||||
|
||||
'color-text': #e6f1fb,
|
||||
'color-text-muted': #b5d4f4,
|
||||
'primary-color': #ef9f27,
|
||||
'text-primary': #e6f1fb,
|
||||
'text-secondary': #b5d4f4,
|
||||
|
||||
'social-icon-email': #e6f1fb,
|
||||
'social-icon-github': #e6f1fb,
|
||||
'social-icon-linkedin': #e6f1fb,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -45,88 +45,41 @@ $text-aaa-light: #111827; // Near black for AAA contrast on light backgrounds
|
|||
$text-aaa-dark: #ffffff; // Pure white for AAA contrast on dark backgrounds
|
||||
|
||||
$hero-light-theme: (
|
||||
hero-background:
|
||||
linear-gradient(135deg, $hero-bg-light-start 0%, $hero-bg-light-end 100%),
|
||||
// Stat colors - FIXED for AAA contrast
|
||||
stat-primary-bg: linear-gradient(135deg, $blue-lighter, $blue-lightest),
|
||||
stat-primary-value: $text-aaa-light,
|
||||
// Changed from $blue-primary for AAA contrast
|
||||
stat-primary-label: $text-aaa-light,
|
||||
hero-background: #f1efe8,
|
||||
// Stat card backgrounds – flat brand tones
|
||||
stat-primary-bg: #e6f1fb,
|
||||
stat-primary-value: #042c53,
|
||||
stat-primary-label: #042c53,
|
||||
|
||||
// Changed from $blue-secondary for AAA contrast
|
||||
stat-secondary-bg: linear-gradient(135deg, $green-lighter, $green-lightest),
|
||||
stat-secondary-value: $text-aaa-light,
|
||||
// Changed from $green-primary for AAA contrast
|
||||
stat-secondary-label: $text-aaa-light,
|
||||
stat-secondary-bg: #f1efe8,
|
||||
stat-secondary-value: #042c53,
|
||||
stat-secondary-label: #042c53,
|
||||
|
||||
// Changed from $green-secondary for AAA contrast
|
||||
stat-tertiary-bg: linear-gradient(135deg, $teal-lighter, $teal-lightest),
|
||||
stat-tertiary-value: $text-aaa-light,
|
||||
// Changed from $teal-primary for AAA contrast
|
||||
stat-tertiary-label: $text-aaa-light,
|
||||
stat-tertiary-bg: #e6f1fb,
|
||||
stat-tertiary-value: #042c53,
|
||||
stat-tertiary-label: #042c53,
|
||||
|
||||
// Changed from $teal-secondary for AAA contrast
|
||||
stat-quaternary-bg: linear-gradient(
|
||||
135deg,
|
||||
$purple-lighter,
|
||||
$purple-lightest
|
||||
),
|
||||
stat-quaternary-value: $text-aaa-light,
|
||||
// Changed from $purple-primary for AAA contrast
|
||||
stat-quaternary-label: $text-aaa-light,
|
||||
// Changed from $purple-secondary for AAA contrast
|
||||
stat-quaternary-bg: #faeeda,
|
||||
stat-quaternary-value: #412402,
|
||||
stat-quaternary-label: #412402,
|
||||
);
|
||||
|
||||
$hero-dark-theme: (
|
||||
hero-background:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($blue-dark, $alpha-bg-low) 0%,
|
||||
rgba($purple-dark, $alpha-bg-low) 50%,
|
||||
rgba($purple-darker, $alpha-bg-low) 100%
|
||||
),
|
||||
// Stat colors - Enhanced contrast for AAA compliance
|
||||
stat-primary-bg:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($blue-dark, $alpha-bg-low),
|
||||
rgba($blue-darker, $alpha-bg-low)
|
||||
),
|
||||
stat-primary-value: $text-aaa-dark,
|
||||
// Changed from $blue-primary to white for AAA contrast
|
||||
stat-primary-label: $text-aaa-dark,
|
||||
hero-background: #042c53,
|
||||
// Stat card backgrounds – flat brand tones for dark
|
||||
stat-primary-bg: rgba(12, 68, 124, 0.6),
|
||||
stat-primary-value: #e6f1fb,
|
||||
stat-primary-label: #b5d4f4,
|
||||
|
||||
// Changed from $blue-light to white for better contrast
|
||||
stat-secondary-bg:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($green-dark, $alpha-bg-low),
|
||||
rgba($green-darker, $alpha-bg-low)
|
||||
),
|
||||
stat-secondary-value: $text-aaa-dark,
|
||||
// Changed from $green-primary to white for AAA contrast
|
||||
stat-secondary-label: $text-aaa-dark,
|
||||
stat-secondary-bg: rgba(12, 68, 124, 0.4),
|
||||
stat-secondary-value: #e6f1fb,
|
||||
stat-secondary-label: #b5d4f4,
|
||||
|
||||
// Changed from $green-light to white for better contrast
|
||||
stat-tertiary-bg:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($teal-dark, $alpha-bg-low),
|
||||
rgba($teal-darker, $alpha-bg-low)
|
||||
),
|
||||
stat-tertiary-value: $text-aaa-dark,
|
||||
// Changed from $teal-primary to white for AAA contrast
|
||||
stat-tertiary-label: $text-aaa-dark,
|
||||
stat-tertiary-bg: rgba(12, 68, 124, 0.6),
|
||||
stat-tertiary-value: #e6f1fb,
|
||||
stat-tertiary-label: #b5d4f4,
|
||||
|
||||
// Changed from $teal-light to white for better contrast
|
||||
stat-quaternary-bg:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($purple-dark, $alpha-bg-low),
|
||||
rgba($purple-darker, $alpha-bg-low)
|
||||
),
|
||||
stat-quaternary-value: $text-aaa-dark,
|
||||
// Changed from $purple-primary to white for AAA contrast
|
||||
stat-quaternary-label: $text-aaa-dark,
|
||||
// Changed from $purple-light to white for better contrast
|
||||
stat-quaternary-bg: rgba(239, 159, 39, 0.15),
|
||||
stat-quaternary-value: #ef9f27,
|
||||
stat-quaternary-label: #e6f1fb,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -57,76 +57,43 @@ $text-aaa-dark: $white; // #ffffff - ensures AAA contrast on dark backgrounds
|
|||
|
||||
$projects-light-theme: (
|
||||
// Projects section background
|
||||
'projects-background':
|
||||
linear-gradient(135deg, $bg-light-start 0%, $bg-light-end 100%),
|
||||
// Projects title gradient
|
||||
'gradient-projects-title':
|
||||
linear-gradient(to right, $orange-primary, $red-primary),
|
||||
// Card styling
|
||||
'projects-card-background':
|
||||
linear-gradient(135deg, $card-light-start 0%, $card-light-end 100%),
|
||||
'projects-card-border': rgba($orange-primary, $alpha-border-light),
|
||||
'projects-background': #ffffff,
|
||||
'gradient-projects-title': #042c53,
|
||||
'projects-card-background': #ffffff,
|
||||
'projects-card-border': rgba(4, 44, 83, 0.12),
|
||||
'projects-card-shadow': $shadow-light,
|
||||
'projects-card-shadow-hover': $shadow-light-hover,
|
||||
// Overlay styling
|
||||
'projects-overlay-background': rgba($black, $alpha-overlay-light),
|
||||
// Button styling
|
||||
'projects-button-primary-bg':
|
||||
linear-gradient(135deg, $orange-primary 0%, $red-primary 100%),
|
||||
'projects-button-primary-text': $text-aaa-dark,
|
||||
// Changed to ensure AAA contrast
|
||||
'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy),
|
||||
'projects-button-primary-hover-bg':
|
||||
linear-gradient(135deg, $red-primary 0%, $red-secondary 100%),
|
||||
'projects-button-secondary-bg': $white,
|
||||
'projects-button-secondary-text': $text-aaa-light,
|
||||
// Changed from $gray-800 for AAA compliance
|
||||
'projects-button-secondary-border': rgba($gray-300, $alpha-border-medium),
|
||||
'projects-button-secondary-hover-bg': $gray-50,
|
||||
// Changed from $white for subtle hover effect
|
||||
// Tech badge styling - FIXED for AAA contrast
|
||||
'projects-tech-badge-bg': $gray-100,
|
||||
// Changed to solid light gray instead of gradient
|
||||
'projects-tech-badge-text': $text-aaa-light,
|
||||
// Changed to dark text for AAA contrast
|
||||
'projects-tech-badge-border': rgba($orange-primary, $alpha-border-medium)
|
||||
'projects-overlay-background': rgba(0, 0, 0, 0.6),
|
||||
'projects-button-primary-bg': #042c53,
|
||||
'projects-button-primary-text': #e6f1fb,
|
||||
'projects-button-primary-border': rgba(4, 44, 83, 0.3),
|
||||
'projects-button-primary-hover-bg': #0c447c,
|
||||
'projects-button-secondary-bg': #ffffff,
|
||||
'projects-button-secondary-text': #042c53,
|
||||
'projects-button-secondary-border': rgba(4, 44, 83, 0.2),
|
||||
'projects-button-secondary-hover-bg': #f1efe8,
|
||||
'projects-tech-badge-bg': #f1efe8,
|
||||
'projects-tech-badge-text': #042c53,
|
||||
'projects-tech-badge-border': rgba(4, 44, 83, 0.15)
|
||||
);
|
||||
|
||||
$projects-dark-theme: (
|
||||
// Projects section background - using variables instead of hardcoded rgba
|
||||
'projects-background':
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($brown-primary, $alpha-border-medium) 0%,
|
||||
rgba($brown-secondary, $alpha-border-medium) 100%
|
||||
),
|
||||
// Projects title gradient
|
||||
'gradient-projects-title':
|
||||
linear-gradient(to right, $orange-secondary, $red-light),
|
||||
// Card styling
|
||||
'projects-card-background':
|
||||
linear-gradient(135deg, $gray-900 0%, $gray-800 100%),
|
||||
'projects-card-border': rgba($orange-secondary, $alpha-border-medium),
|
||||
'projects-background': #0c447c,
|
||||
'gradient-projects-title': #e6f1fb,
|
||||
'projects-card-background': rgba(12, 68, 124, 0.6),
|
||||
'projects-card-border': rgba(230, 241, 251, 0.12),
|
||||
'projects-card-shadow': $shadow-dark,
|
||||
'projects-card-shadow-hover': $shadow-dark-hover,
|
||||
// Overlay styling
|
||||
'projects-overlay-background': rgba($black, $alpha-overlay-dark),
|
||||
// Button styling
|
||||
'projects-button-primary-bg':
|
||||
linear-gradient(135deg, $orange-primary 0%, $red-primary 100%),
|
||||
'projects-button-primary-text': $text-aaa-dark,
|
||||
'projects-button-primary-border': rgba($orange-primary, $alpha-border-heavy),
|
||||
'projects-button-primary-hover-bg':
|
||||
linear-gradient(135deg, $orange-secondary 0%, $red-light 100%),
|
||||
'projects-button-secondary-bg': rgba($gray-800, $alpha-bg-light),
|
||||
'projects-button-secondary-text': $text-aaa-dark,
|
||||
// Changed from $gray-200 for AAA compliance
|
||||
'projects-button-secondary-border': rgba($gray-600, $alpha-border-heavy),
|
||||
'projects-button-secondary-hover-bg': $gray-700,
|
||||
// Tech badge styling - FIXED for AAA contrast
|
||||
'projects-tech-badge-bg': $gray-800,
|
||||
// Changed to solid dark background
|
||||
'projects-tech-badge-text': $text-aaa-dark,
|
||||
// White text for AAA contrast
|
||||
'projects-tech-badge-border': rgba($orange-secondary, $alpha-border-heavy)
|
||||
'projects-overlay-background': rgba(0, 0, 0, 0.7),
|
||||
'projects-button-primary-bg': #ef9f27,
|
||||
'projects-button-primary-text': #042c53,
|
||||
'projects-button-primary-border': rgba(239, 159, 39, 0.3),
|
||||
'projects-button-primary-hover-bg': #ba7517,
|
||||
'projects-button-secondary-bg': rgba(12, 68, 124, 0.8),
|
||||
'projects-button-secondary-text': #e6f1fb,
|
||||
'projects-button-secondary-border': rgba(230, 241, 251, 0.3),
|
||||
'projects-button-secondary-hover-bg': rgba(4, 44, 83, 0.9),
|
||||
'projects-tech-badge-bg': rgba(4, 44, 83, 0.8),
|
||||
'projects-tech-badge-text': #e6f1fb,
|
||||
'projects-tech-badge-border': rgba(230, 241, 251, 0.2),
|
||||
);
|
||||
|
|
|
|||
|
|
@ -148,77 +148,66 @@ $dark-senary-title: #fca5a5; // Medium red
|
|||
// ================================
|
||||
|
||||
$services-light-theme: (
|
||||
// Section backgrounds
|
||||
services-background: $light-services-bg,
|
||||
gradient-services-title: $light-title-gradient,
|
||||
services-background: #f1efe8,
|
||||
gradient-services-title: #042c53,
|
||||
|
||||
// Card backgrounds
|
||||
service-card-primary-bg: $light-card-primary-bg,
|
||||
service-card-secondary-bg: $light-card-secondary-bg,
|
||||
service-card-tertiary-bg: $light-card-tertiary-bg,
|
||||
service-card-quaternary-bg: $light-card-quaternary-bg,
|
||||
service-card-quinary-bg: $light-card-quinary-bg,
|
||||
service-card-senary-bg: $light-card-senary-bg,
|
||||
service-card-primary-bg: #ffffff,
|
||||
service-card-secondary-bg: #f1efe8,
|
||||
service-card-tertiary-bg: #ffffff,
|
||||
service-card-quaternary-bg: #f1efe8,
|
||||
service-card-quinary-bg: #ffffff,
|
||||
service-card-senary-bg: #f1efe8,
|
||||
|
||||
// Icons - using same color for consistency
|
||||
service-icon-primary: $light-text-primary,
|
||||
service-icon-secondary: $light-text-primary,
|
||||
service-icon-tertiary: $light-text-primary,
|
||||
service-icon-quaternary: $light-text-primary,
|
||||
service-icon-quinary: $light-text-primary,
|
||||
service-icon-senary: $light-text-primary,
|
||||
service-icon-primary: #ef9f27,
|
||||
service-icon-secondary: #ef9f27,
|
||||
service-icon-tertiary: #ef9f27,
|
||||
service-icon-quaternary: #ef9f27,
|
||||
service-icon-quinary: #ef9f27,
|
||||
service-icon-senary: #ef9f27,
|
||||
|
||||
// Titles - using same color as icons
|
||||
service-title-primary: $light-text-primary,
|
||||
service-title-secondary: $light-text-primary,
|
||||
service-title-tertiary: $light-text-primary,
|
||||
service-title-quaternary: $light-text-primary,
|
||||
service-title-quinary: $light-text-primary,
|
||||
service-title-senary: $light-text-primary,
|
||||
service-title-primary: #042c53,
|
||||
service-title-secondary: #042c53,
|
||||
service-title-tertiary: #042c53,
|
||||
service-title-quaternary: #042c53,
|
||||
service-title-quinary: #042c53,
|
||||
service-title-senary: #042c53,
|
||||
|
||||
// Descriptions - using same color as icons and titles
|
||||
service-description-primary: $light-text-primary,
|
||||
service-description-secondary: $light-text-primary,
|
||||
service-description-tertiary: $light-text-primary,
|
||||
service-description-quaternary: $light-text-primary,
|
||||
service-description-quinary: $light-text-primary,
|
||||
service-description-senary: $light-text-primary
|
||||
service-description-primary: #1a1a1a,
|
||||
service-description-secondary: #1a1a1a,
|
||||
service-description-tertiary: #1a1a1a,
|
||||
service-description-quaternary: #1a1a1a,
|
||||
service-description-quinary: #1a1a1a,
|
||||
service-description-senary: #1a1a1a,
|
||||
);
|
||||
|
||||
$services-dark-theme: (
|
||||
// Section backgrounds
|
||||
services-background: $dark-services-bg,
|
||||
gradient-services-title: $dark-title-gradient,
|
||||
services-background: #042c53,
|
||||
gradient-services-title: #e6f1fb,
|
||||
|
||||
// Card backgrounds
|
||||
service-card-primary-bg: $dark-card-primary-bg,
|
||||
service-card-secondary-bg: $dark-card-secondary-bg,
|
||||
service-card-tertiary-bg: $dark-card-tertiary-bg,
|
||||
service-card-quaternary-bg: $dark-card-quaternary-bg,
|
||||
service-card-quinary-bg: $dark-card-quinary-bg,
|
||||
service-card-senary-bg: $dark-card-senary-bg,
|
||||
service-card-primary-bg: rgba(12, 68, 124, 0.6),
|
||||
service-card-secondary-bg: rgba(4, 44, 83, 0.8),
|
||||
service-card-tertiary-bg: rgba(12, 68, 124, 0.6),
|
||||
service-card-quaternary-bg: rgba(4, 44, 83, 0.8),
|
||||
service-card-quinary-bg: rgba(12, 68, 124, 0.6),
|
||||
service-card-senary-bg: rgba(4, 44, 83, 0.8),
|
||||
service-icon-primary: #ef9f27,
|
||||
service-icon-secondary: #ef9f27,
|
||||
service-icon-tertiary: #ef9f27,
|
||||
service-icon-quaternary: #ef9f27,
|
||||
service-icon-quinary: #ef9f27,
|
||||
service-icon-senary: #ef9f27,
|
||||
|
||||
// Icons - all using pure white
|
||||
service-icon-primary: #ffffff,
|
||||
service-icon-secondary: #ffffff,
|
||||
service-icon-tertiary: #ffffff,
|
||||
service-icon-quaternary: #ffffff,
|
||||
service-icon-quinary: #ffffff,
|
||||
service-icon-senary: #ffffff,
|
||||
service-title-primary: #e6f1fb,
|
||||
service-title-secondary: #e6f1fb,
|
||||
service-title-tertiary: #e6f1fb,
|
||||
service-title-quaternary: #e6f1fb,
|
||||
service-title-quinary: #e6f1fb,
|
||||
service-title-senary: #e6f1fb,
|
||||
|
||||
// Titles - all using pure white
|
||||
service-title-primary: #ffffff,
|
||||
service-title-secondary: #ffffff,
|
||||
service-title-tertiary: #ffffff,
|
||||
service-title-quaternary: #ffffff,
|
||||
service-title-quinary: #ffffff,
|
||||
service-title-senary: #ffffff,
|
||||
|
||||
// Descriptions - all using pure white
|
||||
service-description-primary: #ffffff,
|
||||
service-description-secondary: #ffffff,
|
||||
service-description-tertiary: #ffffff,
|
||||
service-description-quaternary: #ffffff,
|
||||
service-description-quinary: #ffffff,
|
||||
service-description-senary: #ffffff
|
||||
service-description-primary: #b5d4f4,
|
||||
service-description-secondary: #b5d4f4,
|
||||
service-description-tertiary: #b5d4f4,
|
||||
service-description-quaternary: #b5d4f4,
|
||||
service-description-quinary: #b5d4f4,
|
||||
service-description-senary: #b5d4f4,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -52,245 +52,99 @@ $alpha-bg-card-strong: 0.95;
|
|||
|
||||
$skills-light-theme: (
|
||||
// Skills section colors
|
||||
skills-background: linear-gradient(135deg, #e0e7ef 0%, #bae6fd 100%),
|
||||
skills-background-pattern:
|
||||
radial-gradient(circle at 25% 25%, $blue-primary, transparent 50%),
|
||||
gradient-skills-title:
|
||||
linear-gradient(90deg, $blue-tertiary, $blue-primary, $green-primary),
|
||||
skills-category-bg: rgba($slate-50, $alpha-bg),
|
||||
skills-category-border: rgba($slate-400, $alpha-medium),
|
||||
skills-category-title-color: $slate-800,
|
||||
skills-skill-name-color: $slate-700,
|
||||
skills-skill-level-color: $slate-900,
|
||||
skills-skill-percentage-color: $slate-600,
|
||||
skills-progress-bg: rgba($slate-200, $alpha-bg-card),
|
||||
// Card 1 - Web Frameworks (Blue theme)
|
||||
skills-category-bg-primary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(239, 246, 255, $alpha-bg-card-alt),
|
||||
rgba(219, 234, 254, $alpha-bg-card-strong)
|
||||
),
|
||||
skills-category-border-primary: rgba($blue-primary, $alpha-medium),
|
||||
skills-gradient-primary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($blue-primary, $alpha-light),
|
||||
rgba($blue-secondary, 0.05)
|
||||
),
|
||||
skills-accent-primary: $blue-primary,
|
||||
skills-background: #ffffff,
|
||||
skills-background-pattern: none,
|
||||
gradient-skills-title: #042c53,
|
||||
skills-category-bg: #ffffff,
|
||||
skills-category-border: rgba(4, 44, 83, 0.12),
|
||||
skills-category-title-color: #042c53,
|
||||
skills-skill-name-color: #1a1a1a,
|
||||
skills-skill-level-color: #1a1a1a,
|
||||
skills-skill-percentage-color: #412402,
|
||||
skills-progress-bg: rgba(4, 44, 83, 0.06),
|
||||
skills-category-bg-primary: #ffffff,
|
||||
skills-category-border-primary: rgba(4, 44, 83, 0.12),
|
||||
skills-gradient-primary: transparent,
|
||||
skills-accent-primary: #042c53,
|
||||
|
||||
// Card 2 - Styling & Design (Green theme)
|
||||
skills-category-bg-secondary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(236, 253, 245, $alpha-bg-card-alt),
|
||||
rgba(209, 250, 229, $alpha-bg-card-strong)
|
||||
),
|
||||
skills-category-border-secondary: rgba($green-primary, $alpha-medium),
|
||||
skills-gradient-secondary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($green-primary, $alpha-light),
|
||||
rgba($green-secondary, 0.05)
|
||||
),
|
||||
skills-accent-secondary: $green-primary,
|
||||
skills-category-bg-secondary: #f1efe8,
|
||||
skills-category-border-secondary: rgba(4, 44, 83, 0.12),
|
||||
skills-gradient-secondary: transparent,
|
||||
skills-accent-secondary: #042c53,
|
||||
|
||||
// Card 3 - Backend Development (Purple theme)
|
||||
skills-category-bg-tertiary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(245, 243, 255, $alpha-bg-card-alt),
|
||||
rgba(237, 233, 254, $alpha-bg-card-strong)
|
||||
),
|
||||
skills-category-border-tertiary: rgba($purple-primary, $alpha-medium),
|
||||
skills-gradient-tertiary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($purple-primary, $alpha-light),
|
||||
rgba($purple-secondary, 0.05)
|
||||
),
|
||||
skills-accent-tertiary: $purple-primary,
|
||||
skills-category-bg-tertiary: #ffffff,
|
||||
skills-category-border-tertiary: rgba(4, 44, 83, 0.12),
|
||||
skills-gradient-tertiary: transparent,
|
||||
skills-accent-tertiary: #042c53,
|
||||
|
||||
// Card 4 - Development Tools (Teal theme)
|
||||
skills-category-bg-quaternary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(240, 253, 250, $alpha-bg-card-alt),
|
||||
rgba(204, 251, 241, $alpha-bg-card-strong)
|
||||
),
|
||||
skills-category-border-quaternary: rgba($teal-primary, $alpha-medium),
|
||||
skills-gradient-quaternary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($teal-primary, $alpha-light),
|
||||
rgba($teal-secondary, 0.05)
|
||||
),
|
||||
skills-accent-quaternary: $teal-primary,
|
||||
skills-category-bg-quaternary: #f1efe8,
|
||||
skills-category-border-quaternary: rgba(4, 44, 83, 0.12),
|
||||
skills-gradient-quaternary: transparent,
|
||||
skills-accent-quaternary: #042c53,
|
||||
|
||||
// Card 5 - Testing & Quality (Orange theme)
|
||||
skills-category-bg-quinary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(255, 251, 235, $alpha-bg-card-alt),
|
||||
rgba(254, 243, 199, $alpha-bg-card-strong)
|
||||
),
|
||||
skills-category-border-quinary: rgba($orange-primary, $alpha-medium),
|
||||
skills-gradient-quinary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($orange-primary, $alpha-light),
|
||||
rgba($orange-secondary, 0.05)
|
||||
),
|
||||
skills-accent-quinary: $orange-primary,
|
||||
skills-category-bg-quinary: #ffffff,
|
||||
skills-category-border-quinary: rgba(4, 44, 83, 0.12),
|
||||
skills-gradient-quinary: transparent,
|
||||
skills-accent-quinary: #042c53,
|
||||
|
||||
// Card 6 - AI-Tools (Indigo theme)
|
||||
skills-category-bg-senary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(238, 242, 255, $alpha-bg-card-alt),
|
||||
rgba(224, 231, 255, $alpha-bg-card-strong)
|
||||
),
|
||||
skills-category-border-senary: rgba($indigo-primary, $alpha-medium),
|
||||
skills-gradient-senary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($indigo-primary, $alpha-light),
|
||||
rgba($indigo-secondary, 0.05)
|
||||
),
|
||||
skills-accent-senary: $indigo-primary,
|
||||
skills-category-bg-senary: #f1efe8,
|
||||
skills-category-border-senary: rgba(4, 44, 83, 0.12),
|
||||
skills-gradient-senary: transparent,
|
||||
skills-accent-senary: #042c53,
|
||||
|
||||
// Progress bar gradients
|
||||
skills-progress-primary:
|
||||
linear-gradient(90deg, $blue-primary, $blue-secondary, $blue-tertiary),
|
||||
skills-progress-secondary:
|
||||
linear-gradient(90deg, $green-primary, $green-secondary, $green-tertiary),
|
||||
skills-progress-tertiary:
|
||||
linear-gradient(90deg, $purple-primary, $purple-tertiary, $purple-secondary),
|
||||
skills-progress-quaternary:
|
||||
linear-gradient(90deg, $teal-primary, $teal-secondary, $teal-tertiary),
|
||||
skills-progress-quinary:
|
||||
linear-gradient(90deg, $orange-primary, $orange-secondary, $orange-tertiary),
|
||||
skills-progress-senary:
|
||||
linear-gradient(90deg, $indigo-primary, $indigo-secondary, $indigo-tertiary)
|
||||
skills-progress-primary: #042c53,
|
||||
skills-progress-secondary: #042c53,
|
||||
skills-progress-tertiary: #042c53,
|
||||
skills-progress-quaternary: #042c53,
|
||||
skills-progress-quinary: #042c53,
|
||||
skills-progress-senary: #042c53
|
||||
);
|
||||
|
||||
$skills-dark-theme: (
|
||||
// Skills section colors
|
||||
skills-background: linear-gradient(135deg, $slate-800 0%, #0ea5e9 100%),
|
||||
skills-background-pattern:
|
||||
radial-gradient(circle at 25% 25%, $blue-tertiary, transparent 50%),
|
||||
gradient-skills-title:
|
||||
linear-gradient(90deg, $blue-light, $green-light, $purple-light),
|
||||
skills-category-bg: rgba($slate-800, $alpha-bg-card),
|
||||
skills-category-border: rgba($slate-600, $alpha-heavy),
|
||||
skills-category-title-color: #ffffff,
|
||||
skills-skill-name-color: #ffffff,
|
||||
skills-skill-level-color: #ffffff,
|
||||
skills-skill-percentage-color: #ffffff,
|
||||
skills-progress-bg: rgba($slate-700, $alpha-bg-card),
|
||||
// Dark theme card backgrounds
|
||||
skills-category-bg-primary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(30, 58, 138, 0.4),
|
||||
rgba(29, 78, 216, $alpha-heavy)
|
||||
),
|
||||
skills-category-border-primary: rgba($blue-light, $alpha-heavy),
|
||||
skills-gradient-primary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($blue-light, $alpha-light),
|
||||
rgba($blue-primary, 0.05)
|
||||
),
|
||||
skills-accent-primary: $blue-light,
|
||||
skills-background: #0c447c,
|
||||
skills-background-pattern: none,
|
||||
gradient-skills-title: #e6f1fb,
|
||||
skills-category-bg: rgba(12, 68, 124, 0.6),
|
||||
skills-category-border: rgba(230, 241, 251, 0.12),
|
||||
skills-category-title-color: #e6f1fb,
|
||||
skills-skill-name-color: #e6f1fb,
|
||||
skills-skill-level-color: #e6f1fb,
|
||||
skills-skill-percentage-color: #b5d4f4,
|
||||
skills-progress-bg: rgba(230, 241, 251, 0.1),
|
||||
skills-category-bg-primary: rgba(12, 68, 124, 0.6),
|
||||
skills-category-border-primary: rgba(230, 241, 251, 0.12),
|
||||
skills-gradient-primary: transparent,
|
||||
skills-accent-primary: #ef9f27,
|
||||
|
||||
skills-category-bg-secondary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(6, 95, 70, 0.4),
|
||||
rgba(4, 120, 87, $alpha-heavy)
|
||||
),
|
||||
skills-category-border-secondary: rgba($green-light, $alpha-heavy),
|
||||
skills-gradient-secondary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($green-light, $alpha-light),
|
||||
rgba($green-primary, 0.05)
|
||||
),
|
||||
skills-accent-secondary: $green-light,
|
||||
skills-category-bg-secondary: rgba(4, 44, 83, 0.8),
|
||||
skills-category-border-secondary: rgba(230, 241, 251, 0.12),
|
||||
skills-gradient-secondary: transparent,
|
||||
skills-accent-secondary: #ef9f27,
|
||||
|
||||
skills-category-bg-tertiary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(88, 28, 135, 0.4),
|
||||
rgba(109, 40, 217, $alpha-heavy)
|
||||
),
|
||||
skills-category-border-tertiary: rgba($purple-light, $alpha-heavy),
|
||||
skills-gradient-tertiary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($purple-light, $alpha-light),
|
||||
rgba($purple-primary, 0.05)
|
||||
),
|
||||
skills-accent-tertiary: $purple-light,
|
||||
skills-category-bg-tertiary: rgba(12, 68, 124, 0.6),
|
||||
skills-category-border-tertiary: rgba(230, 241, 251, 0.12),
|
||||
skills-gradient-tertiary: transparent,
|
||||
skills-accent-tertiary: #ef9f27,
|
||||
|
||||
skills-category-bg-quaternary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(15, 118, 110, 0.4),
|
||||
rgba(17, 94, 89, $alpha-heavy)
|
||||
),
|
||||
skills-category-border-quaternary: rgba($teal-light, $alpha-heavy),
|
||||
skills-gradient-quaternary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($teal-light, $alpha-light),
|
||||
rgba($teal-primary, 0.05)
|
||||
),
|
||||
skills-accent-quaternary: $teal-light,
|
||||
skills-category-bg-quaternary: rgba(4, 44, 83, 0.8),
|
||||
skills-category-border-quaternary: rgba(230, 241, 251, 0.12),
|
||||
skills-gradient-quaternary: transparent,
|
||||
skills-accent-quaternary: #ef9f27,
|
||||
|
||||
skills-category-bg-quinary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(180, 83, 9, 0.4),
|
||||
rgba(217, 119, 6, $alpha-heavy)
|
||||
),
|
||||
skills-category-border-quinary: rgba($orange-light, $alpha-heavy),
|
||||
skills-gradient-quinary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($orange-light, $alpha-light),
|
||||
rgba($orange-primary, 0.05)
|
||||
),
|
||||
skills-accent-quinary: $orange-light,
|
||||
skills-category-bg-quinary: rgba(12, 68, 124, 0.6),
|
||||
skills-category-border-quinary: rgba(230, 241, 251, 0.12),
|
||||
skills-gradient-quinary: transparent,
|
||||
skills-accent-quinary: #ef9f27,
|
||||
|
||||
skills-category-bg-senary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba(67, 56, 202, 0.4),
|
||||
rgba(79, 70, 229, $alpha-heavy)
|
||||
),
|
||||
skills-category-border-senary: rgba($indigo-light, $alpha-heavy),
|
||||
skills-gradient-senary:
|
||||
linear-gradient(
|
||||
135deg,
|
||||
rgba($indigo-light, $alpha-light),
|
||||
rgba($indigo-primary, 0.05)
|
||||
),
|
||||
skills-accent-senary: $indigo-light,
|
||||
skills-category-bg-senary: rgba(4, 44, 83, 0.8),
|
||||
skills-category-border-senary: rgba(230, 241, 251, 0.12),
|
||||
skills-gradient-senary: transparent,
|
||||
skills-accent-senary: #ef9f27,
|
||||
|
||||
// Progress bars for dark theme
|
||||
skills-progress-primary:
|
||||
linear-gradient(90deg, $blue-light, $blue-primary, $blue-secondary),
|
||||
skills-progress-secondary:
|
||||
linear-gradient(90deg, $green-light, $green-primary, $green-secondary),
|
||||
skills-progress-tertiary:
|
||||
linear-gradient(90deg, $purple-light, $purple-primary, $purple-tertiary),
|
||||
skills-progress-quaternary:
|
||||
linear-gradient(90deg, $teal-light, $teal-primary, $teal-secondary),
|
||||
skills-progress-quinary:
|
||||
linear-gradient(90deg, $orange-light, $orange-primary, $orange-secondary),
|
||||
skills-progress-senary:
|
||||
linear-gradient(90deg, $indigo-light, $indigo-primary, $indigo-secondary)
|
||||
skills-progress-primary: #ef9f27,
|
||||
skills-progress-secondary: #ef9f27,
|
||||
skills-progress-tertiary: #ef9f27,
|
||||
skills-progress-quaternary: #ef9f27,
|
||||
skills-progress-quinary: #ef9f27,
|
||||
skills-progress-senary: #ef9f27,
|
||||
);
|
||||
|
|
|
|||
|
|
@ -3,9 +3,9 @@ $mobile-breakpoint: 768px;
|
|||
$desktop-breakpoint: 769px;
|
||||
|
||||
// Color variables
|
||||
$color-primary: #9333ea;
|
||||
$color-secondary: #2563eb;
|
||||
$color-heading: #0f4d46;
|
||||
$color-primary: #042c53;
|
||||
$color-secondary: #0c447c;
|
||||
$color-heading: #042c53;
|
||||
|
||||
// Shadow variables
|
||||
$shadow-sm: 0 4px 12px;
|
||||
|
|
@ -63,22 +63,17 @@ $shadow-button:
|
|||
0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
|
||||
// Gradient variables
|
||||
$gradient-primary: linear-gradient(
|
||||
90deg,
|
||||
$color-secondary 0%,
|
||||
$color-primary 100%
|
||||
);
|
||||
$gradient-primary: #042c53;
|
||||
|
||||
// Light theme gradient (keep original)
|
||||
// Light theme gradient
|
||||
$gradient-text-light: linear-gradient(
|
||||
to right,
|
||||
$color-secondary,
|
||||
$color-primary,
|
||||
#0d9488
|
||||
$color-primary
|
||||
);
|
||||
|
||||
// Dark theme gradient (white to light purple for hero title)
|
||||
$gradient-text-dark: linear-gradient(to right, #ffffff, #c4b5fd, #a78bfa);
|
||||
// Dark theme gradient
|
||||
$gradient-text-dark: linear-gradient(to right, #e6f1fb, #b5d4f4);
|
||||
|
||||
// Default gradient for backwards compatibility
|
||||
$gradient-text: $gradient-text-light;
|
||||
|
|
|
|||
Loading…
Reference in New Issue