78 lines
2.3 KiB
Sass
78 lines
2.3 KiB
Sass
#biglogo
|
|
position: relative
|
|
display: inline-block
|
|
padding: 20px 0
|
|
border-radius: 0 // Keep it sharp, no curves
|
|
overflow: hidden
|
|
|
|
&::before
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
bottom: 0
|
|
background-image: linear-gradient(rgba(0, 255, 0, 0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.02) 1px, transparent 1px)
|
|
background-size: 20px 20px
|
|
opacity: 0.1 // Subtle grid/matrix rain hint
|
|
pointer-events: none
|
|
|
|
// Scan lines for extra flicker
|
|
&::after
|
|
content: ''
|
|
position: absolute
|
|
top: 0
|
|
left: 0
|
|
right: 0
|
|
height: 1px
|
|
background: linear-gradient(90deg, transparent, #00ff00, transparent)
|
|
opacity: 0.05
|
|
animation: scan 3s linear infinite
|
|
|
|
.main
|
|
display: block
|
|
font-family: 'Orbitron', sans-serif // Cyberpunk geometric punch
|
|
font-size: 4.5rem // Chunky figlet scale
|
|
font-weight: 900 // Black weight for max angular depth
|
|
color: #fff
|
|
letter-spacing: 0.1em // Slightly looser for Orbitron's geometry
|
|
line-height: 0.85 // Compact height like figlet blocks
|
|
text-transform: uppercase
|
|
|
|
// Multi-layer shadow to mimic ansishadow's depth: base shadow + edge glow
|
|
text-shadow: 4px 4px 0 #222, 5px 5px 0 #111, -1px -1px 0 #00ff00, 1px 1px 20px rgba(0, 255, 0, 0.3) // Main drop shadow, deeper offset, subtle green edge highlight for cyber pop, glow for security flair
|
|
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.8)) // Browser shadow boost
|
|
|
|
.sub
|
|
display: block
|
|
font-family: 'Orbitron', sans-serif // Match for cohesion, or swap to monospace if you want contrast
|
|
font-size: 2.5rem
|
|
font-weight: 700 // Bold but not overpowering
|
|
color: #fff
|
|
letter-spacing: 0.15em // Wider for emphasis
|
|
margin-top: 0.5rem
|
|
text-shadow: 2px 2px 0 #222, -1px -1px 0 #00ff00, 1px 1px 10px rgba(0, 255, 0, 0.2) // Lighter shadow, subtle green edge, glow
|
|
filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.6))
|
|
|
|
// Optional: Glitch animation on hover for that hacked feel
|
|
&:hover
|
|
.main
|
|
animation: glitch 0.3s infinite
|
|
|
|
@keyframes scan
|
|
0%
|
|
top: -1px
|
|
100%
|
|
top: 100%
|
|
|
|
@keyframes glitch
|
|
0%, 100%
|
|
transform: translate(0)
|
|
20%
|
|
transform: translate(-2px, 2px)
|
|
40%
|
|
transform: translate(-2px, -2px)
|
|
60%
|
|
transform: translate(2px, 2px)
|
|
80%
|
|
transform: translate(2px, -2px) |