Oliver/app.derez.ai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
oliver
2026-06-08 09:02:07 -03:00
parent 6684e500aa
commit f5c9bb6a35
4 changed files with 823 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files
styles.css
+312 -50
View File
@@ -7,37 +7,34 @@
padding: 0;
}
/* ─── Design tokens ──────────────────────────────────────────── */
/* ─── Design tokens — THEME 01: DIGITAL GRID (Tron-inspired) ── */
:root {
--bg: #0f1117;
--bg-card: #1a1d27;
--bg-inner: #141720;
--bg-hover: #22263a;
--bg-input: #12151f;
--border: #2a2f45;
--border-hi: rgba(79, 142, 247, 0.28);
--accent: #4f8ef7;
--accent-dim: #1a2d5e;
--danger: #e05252;
--danger-dim: #5a1f1f;
--success: #3fc97e;
--warning: #f0a04b;
--text: #e4e8f5;
--text-muted: #7a82a0;
--bg: #000810;
--bg-card: #010f20;
--bg-inner: #000d1a;
--bg-hover: #001a30;
--bg-input: #000813;
--border: #0a3060;
--border-hi: rgba(0, 245, 255, 0.45);
--accent: #00f5ff;
--accent-dim: #002535;
--danger: #ff3b3b;
--danger-dim: #3b0000;
--success: #00ff88;
--warning: #ffaa00;
--text: #c8f0ff;
--text-muted: #2e6a80;
--radius: 8px;
--shadow:
0 28px 72px rgba(0, 0, 0, 0.72), 0 0 0 1px rgba(79, 142, 247, 0.06);
0 0 0 1px rgba(0, 245, 255, 0.25), 0 0 60px rgba(0, 245, 255, 0.12),
0 28px 72px rgba(0, 0, 0, 0.9);
}
/* ─── Base ───────────────────────────────────────────────────── */
html,
body {
height: 100%;
font-family:
"Segoe UI",
system-ui,
-apple-system,
sans-serif;
font-family: "Courier New", Courier, monospace;
background: var(--bg);
color: var(--text);
font-size: 14px;
@@ -47,26 +44,271 @@ body {
justify-content: center;
}
/* Subtle ambient glow in background */
/* Digital grid — star field, ambient glow, horizon line */
body::before {
content: "";
position: fixed;
inset: 0;
background:
/* ── Stars: solid-core dots, varied size & tint ── */
/* Row 1 — bright feature stars (y 3–12 %) */
radial-gradient(
ellipse 60% 50% at 25% 30%,
rgba(79, 142, 247, 0.07) 0%,
transparent 70%
circle 5px at 5% 8%,
white 0%,
white 40%,
rgba(180, 245, 255, 0.3) 72%,
transparent 100%
),
radial-gradient(
ellipse 50% 60% at 75% 70%,
rgba(100, 50, 200, 0.05) 0%,
transparent 70%
circle 3px at 15% 5%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 3px at 22% 12%,
rgba(180, 235, 255, 1) 0%,
rgba(180, 235, 255, 1) 42%,
transparent 100%
),
radial-gradient(
circle 6px at 31% 4%,
white 0%,
white 38%,
rgba(150, 220, 255, 0.35) 70%,
transparent 100%
),
radial-gradient(
circle 3px at 40% 9%,
rgba(160, 230, 255, 1) 0%,
rgba(160, 230, 255, 1) 42%,
transparent 100%
),
radial-gradient(
circle 3px at 47% 6%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 4px at 54% 3%,
rgba(190, 245, 255, 1) 0%,
rgba(190, 245, 255, 1) 42%,
rgba(190, 245, 255, 0.3) 72%,
transparent 100%
),
radial-gradient(
circle 3px at 63% 11%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 5px at 71% 7%,
white 0%,
white 40%,
rgba(180, 245, 255, 0.28) 70%,
transparent 100%
),
radial-gradient(
circle 3px at 79% 4%,
rgba(150, 215, 255, 1) 0%,
rgba(150, 215, 255, 1) 42%,
transparent 100%
),
radial-gradient(
circle 3px at 87% 9%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 4px at 94% 5%,
rgba(190, 245, 255, 1) 0%,
rgba(190, 245, 255, 1) 42%,
rgba(190, 245, 255, 0.28) 70%,
transparent 100%
),
/* Row 2 — mid brightness (y 14–26 %) */
radial-gradient(
circle 2px at 9% 19%,
rgba(255, 255, 255, 0.65) 0%,
rgba(255, 255, 255, 0.65) 45%,
transparent 100%
),
radial-gradient(
circle 3px at 18% 16%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 2px at 27% 22%,
rgba(180, 240, 255, 0.7) 0%,
rgba(180, 240, 255, 0.7) 45%,
transparent 100%
),
radial-gradient(
circle 3px at 37% 14%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 2px at 50% 25%,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 45%,
transparent 100%
),
radial-gradient(
circle 4px at 57% 17%,
rgba(180, 240, 255, 1) 0%,
rgba(180, 240, 255, 1) 42%,
rgba(180, 240, 255, 0.28) 70%,
transparent 100%
),
radial-gradient(
circle 2px at 66% 23%,
rgba(255, 255, 255, 0.55) 0%,
rgba(255, 255, 255, 0.55) 45%,
transparent 100%
),
radial-gradient(
circle 3px at 75% 15%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 2px at 83% 20%,
rgba(160, 225, 255, 0.7) 0%,
rgba(160, 225, 255, 0.7) 45%,
transparent 100%
),
radial-gradient(
circle 2px at 91% 17%,
rgba(255, 255, 255, 0.6) 0%,
rgba(255, 255, 255, 0.6) 45%,
transparent 100%
),
radial-gradient(
circle 3px at 98% 24%,
rgba(180, 240, 255, 1) 0%,
rgba(180, 240, 255, 1) 42%,
transparent 100%
),
/* Row 3 — dim background stars (y 28–42 %) */
radial-gradient(
circle 2px at 3% 33%,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.4) 45%,
transparent 100%
),
radial-gradient(
circle 2px at 13% 38%,
rgba(180, 235, 255, 0.45) 0%,
rgba(180, 235, 255, 0.45) 45%,
transparent 100%
),
radial-gradient(
circle 2px at 24% 30%,
rgba(255, 255, 255, 0.38) 0%,
rgba(255, 255, 255, 0.38) 45%,
transparent 100%
),
radial-gradient(
circle 3px at 33% 40%,
rgba(170, 230, 255, 0.55) 0%,
rgba(170, 230, 255, 0.55) 42%,
transparent 100%
),
radial-gradient(
circle 2px at 44% 34%,
rgba(255, 255, 255, 0.38) 0%,
rgba(255, 255, 255, 0.38) 45%,
transparent 100%
),
radial-gradient(
circle 2px at 53% 42%,
rgba(255, 255, 255, 0.35) 0%,
rgba(255, 255, 255, 0.35) 45%,
transparent 100%
),
radial-gradient(
circle 2px at 62% 31%,
rgba(180, 240, 255, 0.45) 0%,
rgba(180, 240, 255, 0.45) 45%,
transparent 100%
),
radial-gradient(
circle 3px at 69% 38%,
white 0%,
white 42%,
transparent 100%
),
radial-gradient(
circle 2px at 77% 29%,
rgba(255, 255, 255, 0.4) 0%,
rgba(255, 255, 255, 0.4) 45%,
transparent 100%
),
radial-gradient(
circle 2px at 85% 36%,
rgba(180, 235, 255, 0.42) 0%,
rgba(180, 235, 255, 0.42) 45%,
transparent 100%
),
radial-gradient(
circle 2px at 96% 32%,
rgba(255, 255, 255, 0.38) 0%,
rgba(255, 255, 255, 0.38) 45%,
transparent 100%
),
/* ── Ambient glow + horizon line ── */
radial-gradient(
ellipse 70% 55% at 50% 48%,
rgba(0, 120, 200, 0.18) 0%,
transparent 68%
),
radial-gradient(
ellipse 100% 4% at 50% 50%,
rgba(0, 245, 255, 0.22) 0%,
transparent 100%
);
pointer-events: none;
z-index: 0;
}
/* 3-D perspective grid floor — recedes to vanishing point */
body::after {
content: "";
position: fixed;
left: -100%;
width: 300%;
height: 62%;
bottom: -8%;
background-image:
linear-gradient(rgba(0, 245, 255, 0.28) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 245, 255, 0.16) 1px, transparent 1px);
background-size: 80px 40px;
transform: perspective(520px) rotateX(75deg);
transform-origin: center 0%;
-webkit-mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.55) 22%,
black 50%
);
mask-image: linear-gradient(
to bottom,
transparent 0%,
rgba(0, 0, 0, 0.55) 22%,
black 50%
);
pointer-events: none;
z-index: 0;
}
/* ─── AUTH CARD ─────────────────────────────────────────────── */
.auth-card {
position: relative;
@@ -74,20 +316,22 @@ body::before {
width: min(440px, calc(100vw - 24px));
background: var(--bg-card);
border: 1px solid var(--border-hi);
border-radius: 18px;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
animation: fadeUp 0.3s ease both;
animation: fadeUp 1s cubic-bezier(0.65, 0, 0.85, 0.05) 1 both;
}
@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(18px);
transform: scale(0);
filter: blur(6px);
}
to {
opacity: 1;
transform: translateY(0);
transform: scale(1);
filter: blur(0);
}
}
@@ -202,10 +446,10 @@ body::before {
height: min(780px, calc(100vh - 16px));
background: var(--bg-card);
border: 1px solid var(--border-hi);
border-radius: 18px;
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
animation: fadeUp 0.25s ease both;
animation: fadeUp 1s cubic-bezier(0.65, 0, 0.85, 0.05) 1 both;
}
/* App header */
@@ -215,10 +459,10 @@ body::before {
justify-content: space-between;
height: 54px;
padding: 0 22px;
border-bottom: 1px solid var(--border);
border-bottom: 1px solid var(--border-hi);
background: linear-gradient(
90deg,
rgba(79, 142, 247, 0.06) 0%,
rgba(0, 245, 255, 0.08) 0%,
transparent 60%
);
flex-shrink: 0;
@@ -232,7 +476,8 @@ body::before {
font-weight: 700;
font-size: 15px;
color: var(--accent);
letter-spacing: 0.2px;
letter-spacing: 1.5px;
text-shadow: 0 0 14px rgba(0, 245, 255, 0.85);
flex-shrink: 0;
}
@@ -892,6 +1137,8 @@ body::before {
transition:
opacity 0.15s,
background 0.15s,
box-shadow 0.15s,
border-color 0.15s,
transform 0.1s;
flex-shrink: 0;
}
@@ -910,8 +1157,21 @@ body::before {
}
.btn-primary {
background: var(--accent);
background: transparent;
color: #fff;
border: 1px solid var(--accent);
box-shadow:
0 0 8px rgba(0, 245, 255, 0.35),
inset 0 0 8px rgba(0, 245, 255, 0.04);
}
.btn-primary:hover {
opacity: 1;
background: rgba(0, 245, 255, 0.08);
border-color: var(--accent);
box-shadow:
0 0 18px rgba(0, 245, 255, 0.55),
inset 0 0 12px rgba(0, 245, 255, 0.07);
}
.btn-danger {
background: var(--danger);
@@ -1209,9 +1469,10 @@ body::before {
/* ─── Talk to Us panel ──────────────────────────────────────────── */
.talk-wrap {
border-top: 2px solid var(--accent);
border-top: 1px solid var(--border-hi);
flex-shrink: 0;
background: var(--bg-inner);
box-shadow: 0 -4px 20px rgba(0, 245, 255, 0.08);
}
.talk-toggle {
width: 100%;
@@ -1221,7 +1482,7 @@ body::before {
padding: 9px 22px;
background: linear-gradient(
90deg,
rgba(79, 142, 247, 0.08) 0%,
rgba(0, 245, 255, 0.08) 0%,
transparent 70%
);
border: none;
@@ -1237,7 +1498,7 @@ body::before {
.talk-toggle:hover {
background: linear-gradient(
90deg,
rgba(79, 142, 247, 0.16) 0%,
rgba(0, 245, 255, 0.16) 0%,
transparent 70%
);
color: var(--text);
@@ -1246,7 +1507,7 @@ body::before {
color: var(--text);
background: linear-gradient(
90deg,
rgba(79, 142, 247, 0.14) 0%,
rgba(0, 245, 255, 0.14) 0%,
transparent 70%
);
}
@@ -1444,8 +1705,8 @@ body.auth-layout .pricing-badge {
margin: 20px 24px 0;
padding: 14px 20px;
background: var(--accent-dim);
border: 1px solid rgba(79, 142, 247, 0.35);
border-radius: 12px;
border: 1px solid rgba(0, 245, 255, 0.35);
border-radius: var(--radius);
}
.pricing-amount {
font-size: 22px;
@@ -1561,6 +1822,7 @@ body.auth-layout #signin-btn {
width: min(1060px, calc(100vw - 16px));
height: min(500px, calc(100vh - 360px));
flex-shrink: 0;
animation: none; /* prevent double-play alongside auth-card */
}
#app-shell.demo-mode .app-header,
@@ -1624,17 +1886,17 @@ body.auth-layout #signin-btn {
@keyframes shellEnter {
from {
opacity: 0;
transform: translateY(22px);
filter: blur(10px);
transform: scale(0);
filter: blur(6px);
}
to {
opacity: 1;
transform: none;
filter: none;
transform: scale(1);
filter: blur(0);
}
}
#app-shell.app-entering {
animation: shellEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation: shellEnter 1s cubic-bezier(0.65, 0, 0.85, 0.05) 1 forwards;
}
/* On screens too narrow for the dual layout, fall back to single column */