G360Pmk/dylanmazzei-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make the venture 3D panel follow the light theme

Browse Source 
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Alejandro Veras
2026-10-01 13:13:07 -04:00
parent a7d8e4968e
commit 6ea0218427
1 changed files with 11 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/assets/home.css
+11 -8
View File
@@ -114,19 +114,22 @@
.vtabs button { padding: .55rem 1rem; border: 0; border-radius: 10px; background: none; font: 500 .88rem var(--font-sans); color: var(--o2-muted); white-space: nowrap; cursor: pointer; transition: all .25s; }
.vtabs button:hover { color: var(--ink); }
.vtabs button[aria-selected="true"] { background: var(--ink); color: var(--porcelain); }
.vpanel { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 22px; color: #f3f7ff;
background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), #070b16; overflow: hidden; --ac: #1fb7ff; }
.vpanel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 75% 50%, color-mix(in srgb, var(--ac) 40%, transparent), transparent 70%); transition: background .6s; pointer-events: none; }
.vpanel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px) 0 0 / 100% 38px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.vpanel { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 480px; border: 1px solid var(--bd); border-radius: 22px; color: #f3f7ff; overflow: hidden; --ac: #1fb7ff;
--vp-title: #f3f7ff; --vp-text: #b3c0da; --vp-num: #55627f; --vp-lines: rgba(255, 255, 255, .04); --vp-glow: 40%; --vp-arrow-bg: rgba(10, 14, 26, .7); --vp-arrow-fg: #fff; --vp-arrow-bd: rgba(255, 255, 255, .09);
background: linear-gradient(135deg, rgba(255, 255, 255, .04), rgba(255, 255, 255, .01)), #070b16; }
:root[data-theme="light"] .vpanel { --vp-title: #0b1220; --vp-text: #4a5873; --vp-num: #8896b3; --vp-lines: rgba(15, 23, 42, .05); --vp-glow: 28%; --vp-arrow-bg: rgba(255, 255, 255, .85); --vp-arrow-fg: #0b1220; --vp-arrow-bd: rgba(15, 23, 42, .12);
background: linear-gradient(135deg, #ffffff, #eef4fd); box-shadow: 0 30px 60px -40px rgba(15, 23, 42, .35); }
.vpanel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 75% 50%, color-mix(in srgb, var(--ac) var(--vp-glow), transparent), transparent 70%); transition: background .6s; pointer-events: none; }
.vpanel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(var(--vp-lines) 1px, transparent 1px) 0 0 / 100% 38px; -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000); mask-image: linear-gradient(90deg, transparent 30%, #000); }
.vinfo { position: relative; z-index: 2; padding: 2.4rem; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.vnum { font-size: .9rem; color: #55627f; font-variant-numeric: tabular-nums; }
.vinfo h3 { font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.045em; margin-bottom: 1rem; color: #f3f7ff; }
.vinfo p { color: #b3c0da; font-size: 1.08rem; max-width: 34ch; }
.vnum { font-size: .9rem; color: var(--vp-num); font-variant-numeric: tabular-nums; }
.vinfo h3 { font-weight: 500; font-size: clamp(1.8rem, 3.4vw, 3rem); line-height: 1.05; letter-spacing: -0.045em; margin-bottom: 1rem; color: var(--vp-title); }
.vinfo p { color: var(--vp-text); font-size: 1.08rem; max-width: 34ch; }
.vinfo .vt { transition: opacity .3s, transform .3s; }
.vinfo .vt.out { opacity: 0; transform: translateY(10px); }
#vcanvas { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 340px; cursor: grab; }
.varrows { position: absolute; z-index: 3; right: 1.2rem; bottom: 1.2rem; display: flex; gap: .5rem; }
.varrows button { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .09); border-radius: 10px; background: rgba(10, 14, 26, .7); color: #fff; backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; transition: border-color .2s; }
.varrows button { width: 44px; height: 44px; border: 1px solid var(--vp-arrow-bd); border-radius: 10px; background: var(--vp-arrow-bg); color: var(--vp-arrow-fg); backdrop-filter: blur(8px); display: grid; place-items: center; cursor: pointer; transition: border-color .2s; }
.varrows button:hover { border-color: #1fb7ff; }
.varrows svg { width: 16px; height: 16px; }
@media (max-width: 860px) { .vpanel { grid-template-columns: 1fr; grid-template-rows: 280px auto; } #vcanvas { order: -1; min-height: 280px; } .vinfo { padding: 1.6rem 1.6rem 4.6rem; } }