314 lines
8.7 KiB
CSS
314 lines
8.7 KiB
CSS
@import "tailwindcss";
|
|
|
|
:root {
|
|
/* Windows 11 Light Theme - Clean, bright, airy with transparency */
|
|
--fluent-bg: #f3f3f3; /* light neutral background */
|
|
--fluent-surface: rgba(
|
|
254,
|
|
254,
|
|
254,
|
|
0.25
|
|
); /* ultra translucent for stronger glass effect */
|
|
--fluent-surface-secondary: rgba(249, 249, 249, 0.3); /* subtle variation */
|
|
--fluent-accent: #0067c0; /* Windows 11 blue accent */
|
|
--fluent-accent-hover: #005a9e; /* darker accent for hover */
|
|
--fluent-accent-light: rgba(0, 103, 192, 0.08); /* subtle accent tint */
|
|
--fluent-text: #1f1f1f; /* primary text - soft black */
|
|
--fluent-text-secondary: #605e5c; /* secondary text - warm gray */
|
|
--fluent-text-tertiary: #8a8886; /* tertiary text - lighter gray */
|
|
--fluent-border: rgba(230, 230, 230, 0.4); /* more translucent borders */
|
|
--fluent-border-strong: rgba(209, 209, 209, 0.6); /* stronger borders */
|
|
--fluent-divider: rgba(
|
|
220,
|
|
220,
|
|
220,
|
|
0.35
|
|
); /* more translucent divider lines */
|
|
|
|
/* Windows 11 Light Gradients - Subtle, sophisticated */
|
|
--gradient-primary-start: #0078d4; /* MS blue */
|
|
--gradient-primary-end: #106ebe; /* deeper blue */
|
|
--gradient-cta-start: #0086f0; /* vibrant blue */
|
|
--gradient-cta-mid: #1490df; /* cyan blue */
|
|
--gradient-cta-end: #00b7c3; /* aqua */
|
|
--gradient-feature-1-start: #0078d4; /* blue */
|
|
--gradient-feature-1-end: #00bcf2; /* cyan */
|
|
--gradient-feature-2-start: #00cc6a; /* green */
|
|
--gradient-feature-2-end: #10893e; /* forest green */
|
|
--gradient-feature-3-start: #ffb900; /* gold */
|
|
--gradient-feature-3-end: #ff8c00; /* orange */
|
|
|
|
/* Shadows - layered depth */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
--shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.08), 0 4px 8px 0 rgba(0, 0, 0, 0.04);
|
|
--shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 8px 16px 0 rgba(0, 0, 0, 0.06);
|
|
--shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.14),
|
|
0 12px 24px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.dark {
|
|
/* Windows 11 Dark Theme - Rich, deep, contrasty */
|
|
--fluent-bg: #202020; /* dark neutral background */
|
|
--fluent-surface: #2c2c2c; /* elevated surfaces */
|
|
--fluent-surface-secondary: #282828; /* subtle variation */
|
|
--fluent-accent: #60cdff; /* Windows 11 cyan accent */
|
|
--fluent-accent-hover: #4db8e8; /* darker accent for hover */
|
|
--fluent-accent-light: rgba(96, 205, 255, 0.15); /* subtle accent tint */
|
|
--fluent-text: #fafafa; /* primary text - almost white but not pure */
|
|
--fluent-text-secondary: #c8c8c8; /* secondary text - light gray */
|
|
--fluent-text-tertiary: #9d9d9d; /* tertiary text - medium gray */
|
|
--fluent-border: #3d3d3d; /* subtle borders */
|
|
--fluent-border-strong: #505050; /* stronger borders */
|
|
--fluent-divider: #3b3b3b; /* divider lines */
|
|
|
|
/* Windows 11 Dark Gradients - Vibrant, energetic */
|
|
--gradient-primary-start: #4cc2ff; /* bright cyan */
|
|
--gradient-primary-end: #0078d4; /* MS blue */
|
|
--gradient-cta-start: #60cdff; /* cyan */
|
|
--gradient-cta-mid: #4db8e8; /* blue cyan */
|
|
--gradient-cta-end: #3aa0d1; /* deep cyan */
|
|
--gradient-feature-1-start: #60cdff; /* cyan */
|
|
--gradient-feature-1-end: #00b7c3; /* aqua */
|
|
--gradient-feature-2-start: #6bcf7f; /* bright green */
|
|
--gradient-feature-2-end: #00cc6a; /* green */
|
|
--gradient-feature-3-start: #ffd666; /* bright gold */
|
|
--gradient-feature-3-end: #ffb900; /* gold */
|
|
|
|
/* Shadows - stronger for dark mode */
|
|
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-md: 0 2px 4px 0 rgba(0, 0, 0, 0.4), 0 4px 8px 0 rgba(0, 0, 0, 0.2);
|
|
--shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 8px 16px 0 rgba(0, 0, 0, 0.3);
|
|
--shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.6), 0 12px 24px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Enhanced Glass / Acrylic effects - iOS inspired */
|
|
.acrylic {
|
|
background: rgba(254, 254, 254, 0.2);
|
|
backdrop-filter: blur(80px) saturate(200%) brightness(1.08);
|
|
-webkit-backdrop-filter: blur(80px) saturate(200%) brightness(1.08);
|
|
border: 1px solid rgba(250, 250, 250, 0.5);
|
|
box-shadow: inset 0 1px 1px 0 rgba(254, 254, 254, 0.8),
|
|
0 4px 12px 0 rgba(0, 0, 0, 0.08), 0 12px 32px 0 rgba(0, 0, 0, 0.06);
|
|
}
|
|
|
|
.dark .acrylic {
|
|
background: rgba(44, 44, 44, 0.65);
|
|
backdrop-filter: blur(80px) saturate(200%) brightness(0.95);
|
|
-webkit-backdrop-filter: blur(80px) saturate(200%) brightness(0.95);
|
|
border: 1px solid rgba(250, 250, 250, 0.1);
|
|
box-shadow: inset 0 1px 1px 0 rgba(250, 250, 250, 0.05),
|
|
0 2px 8px 0 rgba(0, 0, 0, 0.3), 0 8px 24px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.acrylic-strong {
|
|
background: rgba(254, 254, 254, 0.35);
|
|
backdrop-filter: blur(80px) saturate(200%) brightness(1.12);
|
|
-webkit-backdrop-filter: blur(80px) saturate(200%) brightness(1.12);
|
|
border: 1px solid rgba(250, 250, 250, 0.7);
|
|
box-shadow: inset 0 1px 2px 0 rgba(254, 254, 254, 0.9),
|
|
0 6px 16px 0 rgba(0, 0, 0, 0.1), 0 16px 48px 0 rgba(0, 0, 0, 0.08);
|
|
}
|
|
|
|
.dark .acrylic-strong {
|
|
background: rgba(44, 44, 44, 0.85);
|
|
backdrop-filter: blur(80px) saturate(200%) brightness(0.92);
|
|
-webkit-backdrop-filter: blur(80px) saturate(200%) brightness(0.92);
|
|
border: 1px solid rgba(250, 250, 250, 0.15);
|
|
box-shadow: inset 0 1px 2px 0 rgba(250, 250, 250, 0.08),
|
|
0 4px 12px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
/* Mica material - subtle background texture */
|
|
.mica {
|
|
background-color: var(--fluent-surface);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.dark .mica {
|
|
background-color: var(--fluent-surface);
|
|
}
|
|
|
|
/* Custom scrollbar */
|
|
.scrollbar-hide {
|
|
-ms-overflow-style: none;
|
|
scrollbar-width: none;
|
|
}
|
|
|
|
.scrollbar-hide::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
|
|
/* Gradient text */
|
|
.gradient-text {
|
|
background: linear-gradient(to right, rgb(37 99 235), rgb(147 51 234));
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
/* Animated gradient background */
|
|
@keyframes gradient-shift {
|
|
0%,
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
}
|
|
|
|
.animate-gradient {
|
|
background-size: 200% 200%;
|
|
animation: gradient-shift 3s ease infinite;
|
|
}
|
|
|
|
/* Slide down animation for mobile menu */
|
|
@keyframes slideDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
/* Smooth transitions */
|
|
.transition-smooth {
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
/* Hover glow effect - Fluent style with glass morphism */
|
|
.hover-glow {
|
|
transition: all 0.3s cubic-bezier(0.33, 0, 0.67, 1);
|
|
}
|
|
|
|
.hover-glow:hover {
|
|
box-shadow: var(--shadow-lg);
|
|
transform: translateY(-2px) scale(1.02);
|
|
backdrop-filter: blur(25px) saturate(200%) brightness(1.1);
|
|
-webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.1);
|
|
}
|
|
|
|
.dark .hover-glow:hover {
|
|
backdrop-filter: blur(25px) saturate(200%) brightness(1.15);
|
|
-webkit-backdrop-filter: blur(25px) saturate(200%) brightness(1.15);
|
|
}
|
|
|
|
/* Windows 11 reveal effect on hover - Enhanced for light mode */
|
|
.reveal-effect {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.reveal-effect::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(250, 250, 250, 0.15) 0%,
|
|
transparent 70%
|
|
);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.reveal-effect:hover::before {
|
|
opacity: 1;
|
|
}
|
|
|
|
.dark .reveal-effect::before {
|
|
background: radial-gradient(
|
|
circle at center,
|
|
rgba(250, 250, 250, 0.1) 0%,
|
|
transparent 70%
|
|
);
|
|
}
|
|
|
|
body {
|
|
background-color: var(--fluent-bg);
|
|
color: var(--fluent-text);
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
/* Site navigation surface tuned to variables */
|
|
.site-nav {
|
|
background-color: var(--fluent-surface);
|
|
border-bottom: 1px solid var(--fluent-border);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* Ensure links and headings inherit our text colors by default */
|
|
a,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
h5,
|
|
h6,
|
|
p,
|
|
span,
|
|
li {
|
|
color: inherit;
|
|
}
|
|
|
|
/* Utility classes for using CSS variables with Tailwind where needed */
|
|
.text-fluent {
|
|
color: var(--fluent-text) !important;
|
|
}
|
|
.text-fluent-secondary {
|
|
color: var(--fluent-text-secondary) !important;
|
|
}
|
|
.bg-fluent-surface {
|
|
background-color: var(--fluent-surface) !important;
|
|
}
|
|
|
|
/* Theme-aware gradient backgrounds */
|
|
.gradient-primary {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--gradient-primary-start),
|
|
var(--gradient-primary-end)
|
|
);
|
|
}
|
|
|
|
.gradient-cta {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--gradient-cta-start),
|
|
var(--gradient-cta-mid),
|
|
var(--gradient-cta-end)
|
|
);
|
|
}
|
|
|
|
.gradient-feature-1 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--gradient-feature-1-start),
|
|
var(--gradient-feature-1-end)
|
|
);
|
|
}
|
|
|
|
.gradient-feature-2 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--gradient-feature-2-start),
|
|
var(--gradient-feature-2-end)
|
|
);
|
|
}
|
|
|
|
.gradient-feature-3 {
|
|
background: linear-gradient(
|
|
135deg,
|
|
var(--gradient-feature-3-start),
|
|
var(--gradient-feature-3-end)
|
|
);
|
|
}
|