← back to Rentv 2026
logo: make it genuinely LIQUID — animated specular sweep + flowing tint + frosted glass
ba9f632d572d73668c831d0405343878480d90f5 · 2026-08-06 10:21:09 -0700 · Steve Abrams
Steve feedback: shipped logo read as a static glossy pill, 'no liquid'. Added real motion:
- rentv-flow: slow flowing gradient tint (9s loop)
- rentv-sweep: a specular light band glides across the capsule (5.5s loop) — the liquid signal
- backdrop-filter frost + glass meniscus highlight; respects prefers-reduced-motion
Centering preserved (a.brand.rentv-logo re-asserted; transform not animated). Verified via 3-frame + 12-frame GIF render.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit ba9f632d572d73668c831d0405343878480d90f5
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Thu Aug 6 10:21:09 2026 -0700
logo: make it genuinely LIQUID — animated specular sweep + flowing tint + frosted glass
Steve feedback: shipped logo read as a static glossy pill, 'no liquid'. Added real motion:
- rentv-flow: slow flowing gradient tint (9s loop)
- rentv-sweep: a specular light band glides across the capsule (5.5s loop) — the liquid signal
- backdrop-filter frost + glass meniscus highlight; respects prefers-reduced-motion
Centering preserved (a.brand.rentv-logo re-asserted; transform not animated). Verified via 3-frame + 12-frame GIF render.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
public/rentv-logo.css | 69 ++++++++++++++++++++++++++++++++-------------------
1 file changed, 43 insertions(+), 26 deletions(-)
diff --git a/public/rentv-logo.css b/public/rentv-logo.css
index c6b047ac..878bf715 100644
--- a/public/rentv-logo.css
+++ b/public/rentv-logo.css
@@ -1,46 +1,63 @@
-/* rentv-logo.css — RENTV.com brand mark, refreshed for 2026 as a liquid-glass capsule.
- Faithful to the source rentv.com logo (blue capsule · "REN" white + "TV" gold ·
- "Real Estate News & Media" tagline), recreated in scalable CSS — no hotlinked JPG.
+/* rentv-logo.css — RENTV.com brand mark, 2026 LIQUID-GLASS (animated).
+ Faithful to rentv.com (blue capsule · REN white + TV gold · "Real Estate News & Media"),
+ recreated as scalable CSS — no hotlinked JPG. Now genuinely liquid: a specular light
+ SWEEPS across on a loop, the tint slowly FLOWS, and glassy highlights refract the edges.
Applied site-wide by rentv-nav.js (upgrades a.brand + masthead a.logo). */
.rentv-logo{
display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
- padding:5px 16px 6px;border-radius:999px;line-height:1;text-decoration:none;position:relative;
+ padding:5px 17px 6px;border-radius:999px;line-height:1;text-decoration:none;position:relative;
isolation:isolate;overflow:hidden;
- background:linear-gradient(157deg,#2b83e4 0%,#1668ce 42%,#0a49a2 78%,#08397f 100%);
- box-shadow:0 4px 16px rgba(8,44,104,.34), 0 1px 2px rgba(8,44,104,.4),
- inset 0 1px 0 rgba(255,255,255,.55), inset 0 -7px 15px rgba(4,24,64,.5),
- inset 0 0 0 1px rgba(255,255,255,.14);
+ /* flowing liquid tint (animated background-position over an oversized gradient) */
+ background:linear-gradient(120deg,#2f8bec 0%,#1b6fd0 30%,#0d54ad 55%,#1b6fd0 78%,#2f8bec 100%);
+ background-size:220% 220%;
+ animation:rentv-flow 9s ease-in-out infinite;
+ /* frosted glass over whatever is behind the header */
+ -webkit-backdrop-filter:blur(6px) saturate(1.35);backdrop-filter:blur(6px) saturate(1.35);
+ box-shadow:
+ 0 4px 16px rgba(8,44,104,.34), 0 1px 2px rgba(8,44,104,.4),
+ inset 0 1px 0 rgba(255,255,255,.6), inset 0 -7px 16px rgba(4,24,64,.5),
+ inset 0 0 0 1px rgba(255,255,255,.18);
}
-/* Keep the header brand CENTERED: .brand centers via absolute+left:50%, but .rentv-logo's own
- position:relative would clobber it. Re-assert absolute centering (higher specificity), which
- also still serves as the positioning context for the ::before/::after glass layers. */
-a.brand.rentv-logo{position:absolute;left:50%;transform:translateX(-50%)}
-/* the "liquid glass" top sheen — a bright meniscus that fades into the body */
+@keyframes rentv-flow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
+
+/* the LIQUID light — a bright specular band that glides across the capsule on a loop */
.rentv-logo::before{
- content:"";position:absolute;left:0;right:0;top:0;height:58%;border-radius:inherit;
- background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.12) 55%,transparent);
- mix-blend-mode:screen;pointer-events:none;
+ content:"";position:absolute;top:-60%;left:-75%;width:45%;height:220%;z-index:2;
+ background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.15) 40%,rgba(255,255,255,.7) 50%,rgba(255,255,255,.15) 60%,transparent 100%);
+ transform:skewX(-18deg);pointer-events:none;mix-blend-mode:screen;
+ animation:rentv-sweep 5.5s cubic-bezier(.5,0,.3,1) infinite;
}
-/* a soft caustic glow pooling at the base, so it reads as liquid, not flat plastic */
+@keyframes rentv-sweep{0%{left:-75%}60%{left:135%}100%{left:135%}}
+
+/* glass meniscus — a static top sheen + a soft caustic pool at the base for depth */
.rentv-logo::after{
- content:"";position:absolute;left:12%;right:12%;bottom:-40%;height:70%;border-radius:50%;
- background:radial-gradient(ellipse at center,rgba(120,190,255,.5),transparent 70%);
- filter:blur(6px);pointer-events:none;
+ content:"";position:absolute;left:0;right:0;top:0;height:56%;border-radius:inherit;z-index:1;
+ background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.1) 55%,transparent);
+ mix-blend-mode:screen;pointer-events:none;
}
+.rentv-logo .wm,.rentv-logo .tag{position:relative;z-index:3}
.rentv-logo .wm{
font-family:'Inter',system-ui,sans-serif;font-weight:800;font-size:21px;letter-spacing:.005em;
- display:inline-flex;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,20,60,.5));
+ display:inline-flex;filter:drop-shadow(0 1px 1px rgba(0,20,60,.5));
}
.rentv-logo .wm .ren{color:#fff}
.rentv-logo .wm .tv{
- color:#ffc233; /* fallback for no background-clip support */
+ color:#ffc233;
background:linear-gradient(180deg,#ffe07a 0%,#ffc233 48%,#f0a000 100%);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.rentv-logo .tag{
font-family:'Inter',system-ui,sans-serif;font-weight:600;font-size:7.5px;letter-spacing:.16em;
- text-transform:uppercase;color:rgba(255,255,255,.92);white-space:nowrap;position:relative;z-index:1;
- margin-top:1px;
+ text-transform:uppercase;color:rgba(255,255,255,.92);white-space:nowrap;margin-top:1px;
+}
+
+/* NB: .brand already centers itself via left:50% + translateX(-50%); re-assert it (higher specificity)
+ so the .rentv-logo rules can't drop the centering — and never animate the brand's transform. */
+a.brand.rentv-logo{position:absolute;left:50%;transform:translateX(-50%)}
+
+/* Respect reduced-motion: keep the glass, drop the movement. */
+@media(prefers-reduced-motion:reduce){
+ .rentv-logo{animation:none}
+ .rentv-logo::before{animation:none;opacity:.35;left:20%}
}
-/* NB: .brand already centers itself via left:50% + translateX(-50%); do NOT override transform here. */
-@media(max-width:520px){ .rentv-logo{padding:5px 12px}.rentv-logo .wm{font-size:18px}.rentv-logo .tag{font-size:6.8px;letter-spacing:.13em} }
+@media(max-width:520px){ .rentv-logo{padding:5px 13px}.rentv-logo .wm{font-size:18px}.rentv-logo .tag{font-size:6.8px;letter-spacing:.13em} }
← 4600ddf8 auto-data-snapshot: 2026-08-06T10:13:41 (7 data files) — dat
·
back to Rentv 2026
·
Split nav into TWO hamburgers: upper-left (Explore+Regions) 2837beed →