website refactor
This commit is contained in:
@@ -6,13 +6,29 @@
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--color-deep-graphite: #0E0F11;
|
||||
--color-iron-gray: #181B1F;
|
||||
--color-charcoal-outline: #22262A;
|
||||
--color-primary-blue: #198CFF;
|
||||
--color-performance-green: #6FE37A;
|
||||
--color-warning-amber: #FFC556;
|
||||
--color-neon-aqua: #43C9E6;
|
||||
/* Core Theme Colors (from THEME.md) */
|
||||
--color-base: #0C0D0F;
|
||||
--color-surface: #141619;
|
||||
--color-outline: #23272B;
|
||||
--color-primary: #198CFF;
|
||||
--color-telemetry: #4ED4E0;
|
||||
--color-warning: #FFBE4D;
|
||||
--color-success: #6FE37A;
|
||||
--color-critical: #E35C5C;
|
||||
|
||||
/* Text Colors */
|
||||
--color-text-high: #FFFFFF;
|
||||
--color-text-med: #A1A1AA;
|
||||
--color-text-low: #71717A;
|
||||
|
||||
/* Selection */
|
||||
--color-selection-bg: rgba(25, 140, 255, 0.3);
|
||||
--color-selection-text: #FFFFFF;
|
||||
|
||||
/* Focus */
|
||||
--color-focus-ring: rgba(25, 140, 255, 0.5);
|
||||
|
||||
/* Safe Area Insets */
|
||||
--sat: env(safe-area-inset-top);
|
||||
--sar: env(safe-area-inset-right);
|
||||
--sab: env(safe-area-inset-bottom);
|
||||
@@ -21,192 +37,146 @@
|
||||
|
||||
* {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
border-color: var(--color-outline);
|
||||
}
|
||||
|
||||
html {
|
||||
overscroll-behavior: none;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
background-color: var(--color-base);
|
||||
color: var(--color-text-high);
|
||||
font-family: 'Inter', system-ui, sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-deep-graphite text-white antialiased;
|
||||
background-color: var(--color-base);
|
||||
color: var(--color-text-high);
|
||||
line-height: 1.5;
|
||||
overscroll-behavior: none;
|
||||
}
|
||||
|
||||
button, a {
|
||||
::selection {
|
||||
background-color: var(--color-selection-bg);
|
||||
color: var(--color-selection-text);
|
||||
}
|
||||
|
||||
/* Focus States */
|
||||
:focus-visible {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: 2px;
|
||||
box-shadow: 0 0 0 4px var(--color-focus-ring);
|
||||
}
|
||||
|
||||
/* Scrollbars */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background: var(--color-base);
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background: var(--color-outline);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--color-text-low);
|
||||
}
|
||||
|
||||
/* Typography Scale & Smoothing */
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--color-text-high);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
|
||||
h1 { font-size: 2.25rem; }
|
||||
h2 { font-size: 1.875rem; }
|
||||
h3 { font-size: 1.5rem; }
|
||||
h4 { font-size: 1.25rem; }
|
||||
h5 { font-size: 1.125rem; }
|
||||
h6 { font-size: 1rem; }
|
||||
|
||||
p {
|
||||
color: var(--color-text-med);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* Link Styles */
|
||||
a {
|
||||
color: var(--color-primary);
|
||||
text-decoration: none;
|
||||
transition: opacity 0.2s ease;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
-webkit-overflow-scrolling: touch;
|
||||
scroll-behavior: smooth;
|
||||
a:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
/* Mobile typography optimization - lighter and more spacious */
|
||||
button {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: manipulation;
|
||||
}
|
||||
|
||||
/* Mobile typography optimization */
|
||||
@media (max-width: 640px) {
|
||||
h1 {
|
||||
font-size: clamp(1.5rem, 6vw, 2rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: clamp(1.125rem, 4.5vw, 1.5rem);
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 0.8125rem; /* 13px */
|
||||
line-height: 1.6;
|
||||
}
|
||||
h1 { font-size: clamp(1.5rem, 6vw, 2rem); }
|
||||
h2 { font-size: clamp(1.125rem, 4.5vw, 1.5rem); }
|
||||
h3 { font-size: 1.25rem; }
|
||||
p { font-size: 0.875rem; }
|
||||
}
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
.animate-spring {
|
||||
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
/* Precision Racing Utilities */
|
||||
.glass-panel {
|
||||
background: rgba(20, 22, 25, 0.7);
|
||||
backdrop-filter: blur(12px);
|
||||
border: 1px solid var(--color-outline);
|
||||
}
|
||||
|
||||
/* Racing stripe patterns */
|
||||
.racing-stripes {
|
||||
background: linear-gradient(
|
||||
45deg,
|
||||
transparent 25%,
|
||||
rgba(25, 140, 255, 0.03) 25%,
|
||||
rgba(25, 140, 255, 0.03) 50%,
|
||||
transparent 50%,
|
||||
transparent 75%,
|
||||
rgba(25, 140, 255, 0.03) 75%
|
||||
);
|
||||
background-size: 60px 60px;
|
||||
|
||||
.subtle-gradient {
|
||||
background: linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 100%);
|
||||
}
|
||||
|
||||
/* Checkered flag pattern */
|
||||
.checkered-pattern {
|
||||
background-image:
|
||||
linear-gradient(45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
|
||||
linear-gradient(-45deg, rgba(255,255,255,0.02) 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, rgba(255,255,255,0.02) 75%),
|
||||
linear-gradient(-45deg, transparent 75%, rgba(255,255,255,0.02) 75%);
|
||||
background-size: 20px 20px;
|
||||
background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
|
||||
}
|
||||
|
||||
/* Speed lines animation */
|
||||
@keyframes speed-lines {
|
||||
0% {
|
||||
transform: translateX(0) scaleX(0);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.3;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100px) scaleX(1);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.animate-speed-lines {
|
||||
animation: speed-lines 1.5s ease-out infinite;
|
||||
}
|
||||
|
||||
/* Racing accent line */
|
||||
.racing-accent {
|
||||
|
||||
.racing-border {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.racing-accent::before {
|
||||
|
||||
.racing-border::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -16px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 3px;
|
||||
background: linear-gradient(to bottom, #FF0000, #198CFF);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
/* Carbon fiber texture */
|
||||
.carbon-fiber {
|
||||
background-image:
|
||||
linear-gradient(27deg, rgba(255,255,255,0.02) 5%, transparent 5%),
|
||||
linear-gradient(207deg, rgba(255,255,255,0.02) 5%, transparent 5%),
|
||||
linear-gradient(27deg, rgba(0,0,0,0.05) 5%, transparent 5%),
|
||||
linear-gradient(207deg, rgba(0,0,0,0.05) 5%, transparent 5%);
|
||||
background-size: 10px 10px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg, var(--color-primary) 0%, transparent 100%);
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
/* Racing red-white-blue animated gradient */
|
||||
@keyframes racing-gradient {
|
||||
0% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
50% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0% 50%;
|
||||
}
|
||||
/* Instrument-grade glows */
|
||||
.glow-primary {
|
||||
box-shadow: 0 0 20px -5px rgba(25, 140, 255, 0.3);
|
||||
}
|
||||
|
||||
.animate-racing-gradient {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#DC0000 0%,
|
||||
#FFFFFF 25%,
|
||||
#0066FF 50%,
|
||||
#DC0000 75%,
|
||||
#FFFFFF 100%
|
||||
);
|
||||
background-size: 300% 100%;
|
||||
animation: racing-gradient 12s linear infinite;
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
/* Static red-white-blue gradient (no animation) */
|
||||
.static-racing-gradient {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
#DC0000 0%,
|
||||
#FFFFFF 50%,
|
||||
#2563eb 100%
|
||||
);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-racing-gradient {
|
||||
animation: none;
|
||||
}
|
||||
.glow-telemetry {
|
||||
box-shadow: 0 0 20px -5px rgba(78, 212, 224, 0.3);
|
||||
}
|
||||
|
||||
/* Entrance animations */
|
||||
@keyframes fade-in-up {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -215,19 +185,14 @@
|
||||
}
|
||||
|
||||
.animate-fade-in-up {
|
||||
animation: fade-in-up 0.6s ease-out forwards;
|
||||
}
|
||||
|
||||
.animate-fade-in {
|
||||
animation: fade-in 0.4s ease-out forwards;
|
||||
animation: fade-in-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.animate-fade-in-up,
|
||||
.animate-fade-in {
|
||||
.animate-fade-in-up {
|
||||
animation: none;
|
||||
opacity: 1;
|
||||
transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user