Skip to content

Commit b7f176c

Browse files
p4gsclaudehappy-otter
committed
feat: frosted glass panels with orange-blue gradient borders
- Reduce blur (20→12px sections, 16→10px cards) for subtler frost - Switch backgrounds to white-tinted rgba(255,255,255,0.03-0.04) for true frost - Add orange→blue gradient borders via mask-composite technique - Add inset highlight (box-shadow inset) for glass depth - Gradient borders brighten on hover for interactivity Generated with [Claude Code](https://claude.ai/code) via [Happy](https://happy.engineering) Co-Authored-By: Claude <noreply@anthropic.com> Co-Authored-By: Happy <yesreply@happy.engineering>
1 parent de76b52 commit b7f176c

File tree

1 file changed

+107
-42
lines changed

1 file changed

+107
-42
lines changed

‎docs/projects/nthpartyfinder/index.html‎

Lines changed: 107 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -86,10 +86,10 @@
8686
/* ── NAV ── */
8787
.nav {
8888
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
89-
background: rgba(6, 6, 15, 0.65);
90-
backdrop-filter: blur(20px);
91-
-webkit-backdrop-filter: blur(20px);
92-
border-bottom: 1px solid var(--border);
89+
background: rgba(255, 255, 255, 0.03);
90+
backdrop-filter: blur(14px) saturate(1.4);
91+
-webkit-backdrop-filter: blur(14px) saturate(1.4);
92+
border-bottom: 1px solid rgba(255, 168, 79, 0.2);
9393
padding: 16px 0;
9494
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
9595
}
@@ -180,10 +180,10 @@
180180
top: 100%;
181181
left: 0;
182182
right: 0;
183-
background: rgba(6, 6, 15, 0.85);
184-
backdrop-filter: blur(20px);
185-
-webkit-backdrop-filter: blur(20px);
186-
border-bottom: 1px solid var(--border);
183+
background: rgba(6, 6, 15, 0.75);
184+
backdrop-filter: blur(14px) saturate(1.4);
185+
-webkit-backdrop-filter: blur(14px) saturate(1.4);
186+
border-bottom: 1px solid rgba(255, 168, 79, 0.2);
187187
padding: 16px 0;
188188
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
189189
}
@@ -474,15 +474,29 @@
474474
gap: 20px;
475475
}
476476
.feature-card {
477-
background: rgba(30, 30, 60, 0.25);
478-
backdrop-filter: blur(16px) saturate(1.2);
479-
-webkit-backdrop-filter: blur(16px) saturate(1.2);
480-
border: 1px solid rgba(255, 255, 255, 0.15);
477+
background: rgba(255, 255, 255, 0.04);
478+
backdrop-filter: blur(10px) saturate(1.4);
479+
-webkit-backdrop-filter: blur(10px) saturate(1.4);
480+
border: 1px solid transparent;
481481
border-radius: 6px;
482482
padding: 32px;
483483
transition: all .3s ease;
484484
position: relative;
485485
overflow: hidden;
486+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
487+
}
488+
.feature-card::after {
489+
content: '';
490+
position: absolute;
491+
inset: 0;
492+
border-radius: 6px;
493+
padding: 1px;
494+
background: linear-gradient(135deg, rgba(255, 168, 79, 0.3), rgba(27, 149, 193, 0.3));
495+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
496+
-webkit-mask-composite: xor;
497+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
498+
mask-composite: exclude;
499+
pointer-events: none;
486500
}
487501
.feature-card::before {
488502
content: '';
@@ -494,10 +508,12 @@
494508
transition: opacity .3s;
495509
}
496510
.feature-card:hover {
497-
border-color: var(--border-hover);
498511
transform: translateY(-4px);
499512
box-shadow: 0 8px 40px rgba(255,168,79,.08);
500513
}
514+
.feature-card:hover::after {
515+
background: linear-gradient(135deg, rgba(255, 168, 79, 0.5), rgba(27, 149, 193, 0.5));
516+
}
501517
.feature-card:hover::before { opacity: 1; }
502518
.feature-icon {
503519
margin-bottom: 16px;
@@ -539,9 +555,9 @@
539555
}
540556
.step-num {
541557
min-width: 48px; height: 48px;
542-
background: rgba(30, 30, 60, 0.3);
543-
backdrop-filter: blur(12px) saturate(1.2);
544-
-webkit-backdrop-filter: blur(12px) saturate(1.2);
558+
background: rgba(255, 255, 255, 0.04);
559+
backdrop-filter: blur(8px) saturate(1.4);
560+
-webkit-backdrop-filter: blur(8px) saturate(1.4);
545561
border: 1px solid var(--neon-pink);
546562
border-radius: 50%;
547563
display: flex; align-items: center; justify-content: center;
@@ -566,21 +582,36 @@
566582

567583
/* ── TERMINAL ── */
568584
.terminal {
569-
background: rgba(20, 20, 45, 0.3);
570-
backdrop-filter: blur(16px) saturate(1.2);
571-
-webkit-backdrop-filter: blur(16px) saturate(1.2);
572-
border: 1px solid rgba(255, 255, 255, 0.15);
585+
background: rgba(255, 255, 255, 0.03);
586+
backdrop-filter: blur(10px) saturate(1.4);
587+
-webkit-backdrop-filter: blur(10px) saturate(1.4);
588+
border: 1px solid transparent;
573589
border-radius: 8px;
590+
position: relative;
574591
max-width: 720px;
575592
margin: 48px auto 0;
576593
overflow: hidden;
577-
box-shadow: 0 0 60px rgba(255,168,79,.06);
594+
box-shadow: 0 0 60px rgba(255,168,79,.06), inset 0 1px 0 rgba(255, 255, 255, 0.06);
595+
}
596+
.terminal::before {
597+
content: '';
598+
position: absolute;
599+
inset: 0;
600+
border-radius: 8px;
601+
padding: 1px;
602+
background: linear-gradient(135deg, rgba(255, 168, 79, 0.3), rgba(27, 149, 193, 0.3));
603+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
604+
-webkit-mask-composite: xor;
605+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
606+
mask-composite: exclude;
607+
pointer-events: none;
608+
z-index: 1;
578609
}
579610
.terminal-bar {
580-
background: rgba(30, 30, 60, 0.3);
611+
background: rgba(255, 255, 255, 0.03);
581612
padding: 12px 16px;
582613
display: flex; gap: 8px; align-items: center;
583-
border-bottom: 1px solid rgba(255, 255, 255, 0.12);
614+
border-bottom: 1px solid rgba(255, 168, 79, 0.15);
584615
}
585616
.terminal-dot { width: 10px; height: 10px; border-radius: 50%; }
586617
.terminal-title {
@@ -615,10 +646,10 @@
615646
font-family: var(--font-mono);
616647
font-size: 0.8rem;
617648
padding: 8px 20px;
618-
background: rgba(30, 30, 60, 0.25);
619-
backdrop-filter: blur(12px) saturate(1.2);
620-
-webkit-backdrop-filter: blur(12px) saturate(1.2);
621-
border: 1px solid rgba(255, 255, 255, 0.15);
649+
background: rgba(255, 255, 255, 0.04);
650+
backdrop-filter: blur(8px) saturate(1.4);
651+
-webkit-backdrop-filter: blur(8px) saturate(1.4);
652+
border: 1px solid rgba(255, 168, 79, 0.2);
622653
border-radius: 2px;
623654
color: var(--text-dim);
624655
letter-spacing: 1px;
@@ -637,16 +668,32 @@
637668
gap: 20px;
638669
}
639670
.install-card {
640-
background: rgba(30, 30, 60, 0.25);
641-
backdrop-filter: blur(16px) saturate(1.2);
642-
-webkit-backdrop-filter: blur(16px) saturate(1.2);
643-
border: 1px solid rgba(255, 255, 255, 0.15);
671+
background: rgba(255, 255, 255, 0.04);
672+
backdrop-filter: blur(10px) saturate(1.4);
673+
-webkit-backdrop-filter: blur(10px) saturate(1.4);
674+
border: 1px solid transparent;
644675
border-radius: 6px;
645676
padding: 28px;
646677
transition: all .3s;
678+
position: relative;
679+
overflow: hidden;
680+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
681+
}
682+
.install-card::before {
683+
content: '';
684+
position: absolute;
685+
inset: 0;
686+
border-radius: 6px;
687+
padding: 1px;
688+
background: linear-gradient(135deg, rgba(255, 168, 79, 0.3), rgba(27, 149, 193, 0.3));
689+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
690+
-webkit-mask-composite: xor;
691+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
692+
mask-composite: exclude;
693+
pointer-events: none;
647694
}
648-
.install-card:hover {
649-
border-color: rgba(27,149,193,.4);
695+
.install-card:hover::before {
696+
background: linear-gradient(135deg, rgba(255, 168, 79, 0.5), rgba(27, 149, 193, 0.5));
650697
}
651698
.install-card h3 {
652699
font-family: var(--font-body);
@@ -670,14 +717,14 @@
670717
margin: 8px 0;
671718
}
672719
.install-card pre {
673-
background: rgba(15, 15, 35, 0.35);
674-
backdrop-filter: blur(10px);
675-
-webkit-backdrop-filter: blur(10px);
720+
background: rgba(255, 255, 255, 0.02);
721+
backdrop-filter: blur(6px);
722+
-webkit-backdrop-filter: blur(6px);
676723
padding: 16px;
677724
border-radius: 4px;
678725
overflow-x: auto;
679726
margin-top: 12px;
680-
border: 1px solid rgba(255,255,255,.12);
727+
border: 1px solid rgba(255, 168, 79, 0.12);
681728
}
682729
.install-card pre code {
683730
font-family: var(--font-mono);
@@ -716,7 +763,7 @@
716763

717764
/* ── FOOTER ── */
718765
.footer {
719-
border-top: 1px solid rgba(255, 255, 255, 0.12);
766+
border-top: 1px solid rgba(255, 168, 79, 0.15);
720767
padding: 24px 0;
721768
text-align: center;
722769
}
@@ -791,13 +838,31 @@
791838
.hero > .container,
792839
.bottom-cta > .container,
793840
.footer > .container {
794-
background: rgba(20, 20, 45, 0.3);
795-
backdrop-filter: blur(20px) saturate(1.3);
796-
-webkit-backdrop-filter: blur(20px) saturate(1.3);
797-
border: 1px solid rgba(255, 255, 255, 0.14);
841+
background: rgba(255, 255, 255, 0.04);
842+
backdrop-filter: blur(12px) saturate(1.4);
843+
-webkit-backdrop-filter: blur(12px) saturate(1.4);
844+
border: 1px solid transparent;
798845
border-radius: 16px;
799846
padding-top: 40px;
800847
padding-bottom: 40px;
848+
position: relative;
849+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
850+
}
851+
section > .container::before,
852+
.hero > .container::before,
853+
.bottom-cta > .container::before,
854+
.footer > .container::before {
855+
content: '';
856+
position: absolute;
857+
inset: 0;
858+
border-radius: 16px;
859+
padding: 1px;
860+
background: linear-gradient(135deg, rgba(255, 168, 79, 0.35), rgba(27, 149, 193, 0.35));
861+
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
862+
-webkit-mask-composite: xor;
863+
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
864+
mask-composite: exclude;
865+
pointer-events: none;
801866
}
802867
</style>
803868
<script type="importmap">

0 commit comments

Comments
 (0)