From 6ea02184272a26b5fedf35a87f9f206e82b02b06 Mon Sep 17 00:00:00 2001 From: Alejandro Veras Date: Thu, 1 Oct 2026 13:13:07 -0400 Subject: [PATCH] Make the venture 3D panel follow the light theme Co-Authored-By: Claude Opus 5.5 --- static/assets/home.css | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/static/assets/home.css b/static/assets/home.css index 192f115..6d62e6f 100644 --- a/static/assets/home.css +++ b/static/assets/home.css @@ -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; } }