Mediusa/FlockRadar
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(branding): add high-res logo emblem, multi-platform favicon suite, and Open Graph social sharing card

Browse Source
This commit is contained in:
Mediusa
2026-09-12 10:02:51 -07:00
parent 19a1108384
commit 31fdb8b7be
14 changed files with 237 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/styles.css
+38 -22
View File
@@ -117,32 +117,46 @@ body {
color: var(--text-main);
}
.radar-icon-box {
width: 36px;
height: 36px;
border-radius: var(--radius-md);
background: linear-gradient(135deg, rgba(239, 68, 68, 0.2), rgba(6, 182, 212, 0.2));
border: 1px solid rgba(239, 68, 68, 0.4);
.brand-logo-emblem {
position: relative;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: var(--shadow-radar);
flex-shrink: 0;
}
.pulse-dot {
.brand-logo-img {
width: 100%;
height: 100%;
border-radius: 10px;
box-shadow: 0 0 16px rgba(6, 182, 212, 0.35), 0 0 4px rgba(56, 189, 248, 0.5);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
.brand-wrapper:hover .brand-logo-img {
transform: scale(1.08) rotate(2deg);
box-shadow: 0 0 24px rgba(6, 182, 212, 0.6), 0 0 8px rgba(244, 63, 94, 0.5);
}
.brand-radar-ping {
position: absolute;
width: 8px;
height: 8px;
background-color: var(--accent-radar);
top: -2px;
right: -2px;
width: 9px;
height: 9px;
background: #f43f5e;
border: 1.5px solid #07090e;
border-radius: 50%;
animation: radar-pulse 2s infinite;
box-shadow: 0 0 8px #f43f5e;
animation: brand-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes radar-pulse {
0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7); }
70% { transform: scale(1.4); box-shadow: 0 0 0 10px rgba(239, 68, 68, 0); }
100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
@keyframes brand-ping {
0% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0.8); }
70% { transform: scale(1.3); box-shadow: 0 0 0 8px rgba(244, 63, 94, 0); }
100% { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
}
.brand-text {
@@ -152,19 +166,21 @@ body {
.brand-title {
font-family: var(--font-heading);
font-size: 1.15rem;
font-size: 1.22rem;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(to right, #ffffff, #94a3b8);
letter-spacing: 0.04em;
background: linear-gradient(135deg, #ffffff 0%, #38bdf8 55%, #06b6d4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: 0 2px 14px rgba(56, 189, 248, 0.2);
}
.brand-tagline {
font-size: 0.7rem;
font-size: 0.66rem;
color: var(--accent-cyan);
font-family: var(--font-mono);
letter-spacing: 0.05em;
letter-spacing: 0.08em;
font-weight: 600;
text-transform: uppercase;
}