[TSM.ID].[11031972] PXE : Platform X Ecosystem I [118 Module -LIVE-]
This commit is contained in:
TSM.ID
@@ -0,0 +1,220 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-brand: #0b5cff;
|
||||
--color-brand-glow: rgba(11, 92, 255, 0.4);
|
||||
--color-dark-100: #f5f5f5;
|
||||
--color-dark-200: #eaeaea;
|
||||
--color-dark-300: #d4d4d4;
|
||||
|
||||
--font-sans: 'Inter', system-ui, sans-serif;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: #f8fafc; /* Premium Light Gray/Blue */
|
||||
--foreground: #0f172a; /* Slate 900 */
|
||||
--glass-bg: rgba(255, 255, 255, 0.7);
|
||||
--glass-border: rgba(15, 23, 42, 0.1);
|
||||
--panel-bg: #ffffff;
|
||||
--panel-border: rgba(15, 23, 42, 0.05);
|
||||
--color-brand: #0b5cff;
|
||||
--accent-emerald: #10b981;
|
||||
--accent-amber: #f59e0b;
|
||||
--accent-red: #ef4444;
|
||||
--safe-top: env(safe-area-inset-top);
|
||||
--safe-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
|
||||
[data-theme="dark"] {
|
||||
--background: #050b14; /* Deep space navy */
|
||||
--foreground: #f8fafc;
|
||||
--glass-bg: rgba(10, 16, 29, 0.7);
|
||||
--glass-border: rgba(255, 255, 255, 0.08);
|
||||
--panel-bg: #111b21;
|
||||
--panel-border: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
/* Advanced Quantum Mesh & Ultra-Modern Effects */
|
||||
.quantum-mesh {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
background: radial-gradient(circle at 50% 50%, #1e293b 0%, #050b14 100%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.quantum-mesh::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: conic-gradient(
|
||||
from 180deg at 50% 50%,
|
||||
transparent 0deg,
|
||||
var(--color-brand) 90deg,
|
||||
transparent 180deg,
|
||||
var(--accent-emerald) 270deg,
|
||||
transparent 360deg
|
||||
);
|
||||
animation: rotate-mesh 20s linear infinite;
|
||||
opacity: 0.15;
|
||||
filter: blur(80px);
|
||||
}
|
||||
|
||||
@keyframes rotate-mesh {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.glass-card {
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
box-shadow:
|
||||
0 25px 50px -12px rgba(0, 0, 0, 0.5),
|
||||
inset 0 0 20px rgba(255, 255, 255, 0.05);
|
||||
border-radius: 24px;
|
||||
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.glass-card:hover {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
transform: translateY(-5px);
|
||||
box-shadow:
|
||||
0 35px 60px -15px rgba(0, 0, 0, 0.6),
|
||||
0 0 30px rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.input-ambient {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.input-ambient:focus {
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border-color: var(--color-brand);
|
||||
box-shadow: 0 0 20px rgba(11, 92, 255, 0.2);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.btn-ultra {
|
||||
background: linear-gradient(135deg, var(--color-brand) 0%, #00d2ff 100%);
|
||||
color: white;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-ultra::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transform: rotate(45deg);
|
||||
transition: 0.5s;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.btn-ultra:hover::after {
|
||||
left: 120%;
|
||||
}
|
||||
|
||||
.btn-ultra:hover {
|
||||
transform: scale(1.02);
|
||||
box-shadow: 0 10px 25px rgba(11, 92, 255, 0.4);
|
||||
}
|
||||
|
||||
/* HarmonyOS, Samsung, Safari & Global Browser Parity Optimization */
|
||||
html, body {
|
||||
height: 100%;
|
||||
min-height: -webkit-fill-available;
|
||||
overflow-x: hidden;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
-moz-text-size-adjust: 100%;
|
||||
-ms-text-size-adjust: 100%;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
scroll-behavior: smooth;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--background);
|
||||
color: var(--foreground);
|
||||
font-family: var(--font-sans);
|
||||
margin: 0;
|
||||
padding: var(--safe-top) 0 var(--safe-bottom) 0;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
touch-action: manipulation;
|
||||
overscroll-behavior-y: none; /* Prevents pull-to-refresh quirks in Chrome/Samsung */
|
||||
}
|
||||
|
||||
/* Touch-Optimized Interactions */
|
||||
button, a, input, select, textarea {
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
}
|
||||
|
||||
input[type="text"], input[type="password"], input[type="email"] {
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.text-gradient {
|
||||
background: linear-gradient(to right, #ffffff, #94a3b8);
|
||||
-webkit-background-clip: text;
|
||||
background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
/* Custom Scrollbar for Premium Feel - Cross Browser */
|
||||
::-webkit-scrollbar { width: 6px; height: 6px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 10px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
|
||||
|
||||
/* Firefox Scrollbar */
|
||||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: rgba(255, 255, 255, 0.1) transparent;
|
||||
}
|
||||
|
||||
/* Android/Huawei/Samsung Input Reset */
|
||||
input:-webkit-autofill,
|
||||
input:-webkit-autofill:hover,
|
||||
input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: white !important;
|
||||
-webkit-box-shadow: 0 0 0px 1000px #050b14 inset !important;
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
|
||||
/* Safari Specific Fixes */
|
||||
@supports (-webkit-hyphens:none) {
|
||||
.glass-card {
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
}
|
||||
}
|
||||
|
||||
/* Huawei Browser Optimization */
|
||||
@media screen and (max-width: 480px) {
|
||||
.glass-card {
|
||||
border-radius: 16px; /* Slightly sharper for smaller mobile screens */
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user