diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-22 12:42:56 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-22 12:42:56 +0200 |
| commit | 631547a75142326a7c71bdf123e1475217a5ad73 (patch) | |
| tree | f3cfef6b3c5b42bf626fc823ddcf63b8dcf4cdbb /assets/css/components/hero.css | |
| parent | 77ccbe72fad5a4870185fff374f75471c16a9043 (diff) | |
| download | danixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.tar.gz danixxyz-theme-631547a75142326a7c71bdf123e1475217a5ad73.zip | |
chore: replace with extracted danix.xyz-hacker theme (danix2-hugo-theme)
Diffstat (limited to 'assets/css/components/hero.css')
| -rw-r--r-- | assets/css/components/hero.css | 354 |
1 files changed, 0 insertions, 354 deletions
diff --git a/assets/css/components/hero.css b/assets/css/components/hero.css deleted file mode 100644 index 53f30b3..0000000 --- a/assets/css/components/hero.css +++ /dev/null @@ -1,354 +0,0 @@ -/* hero.css */ - -.hero { - position: relative; - height: 100vh; - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: stretch; - padding: 6rem 2rem 2rem; - overflow: hidden; -} - -.hero-container { - position: relative; - z-index: 2; - display: flex; - align-items: center; - gap: 3rem; - max-width: 1080px; - width: 100%; - margin: 0 auto; - flex: 1; -} - -#matrix-canvas { - position: absolute; - inset: 0; - opacity: 0.13; - pointer-events: none; - z-index: 1; -} - -html.theme-light #matrix-canvas { - opacity: 0.08; -} - -html.theme-light #matrix-canvas { - opacity: 0.08; -} - -.hero-left { - flex: 1; - min-width: 0; -} - -.hero-prompt { - font-size: 0.75rem; - letter-spacing: 0.16em; - text-transform: uppercase; - color: var(--accent); - margin-bottom: 0.5rem; - font-weight: 500; - font-family: var(--font-mono); -} - -.hero-name { - font-family: var(--font-head); - font-size: clamp(3rem, 12vw, 7rem); - font-weight: 800; - letter-spacing: -0.04em; - line-height: 1; - margin-bottom: 1rem; - position: relative; - display: inline-block; -} - -/* Glitch effect on hero name */ -.hero-name::before, -.hero-name::after { - content: attr(data-text); - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - opacity: 0; - pointer-events: none; - overflow: hidden; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - letter-spacing: inherit; - line-height: inherit; -} - -.hero-name::before { - color: #ff2b6d; -} - -.hero-name::after { - color: #00e5ff; -} - -.hero-name.is-glitching::before { - opacity: 0.8; - animation: glitch-red 0.45s steps(3) forwards; -} - -.hero-name.is-glitching::after { - opacity: 0.8; - animation: glitch-cyn 0.45s steps(3) forwards; -} - -@keyframes glitch-red { - 0% { clip-path: inset(0 0 0 0); transform: translate(0); } - 20% { clip-path: inset(0 0 65% 0); transform: translate(-0.05em, -0.03em); } - 40% { clip-path: inset(28% 0 58% 0); transform: translate(0.05em, 0.03em); } - 60% { clip-path: inset(44% 0 58% 0); transform: translate(-0.05em, -0.02em); } - 80% { clip-path: inset(12% 0 85% 0); transform: translate(0.05em, 0.02em); } - 100% { clip-path: inset(0 0 0 0); transform: translate(0); } -} - -@keyframes glitch-cyn { - 0% { clip-path: inset(0 0 0 0); transform: translate(0); } - 20% { clip-path: inset(0 0 60% 0); transform: translate(0.05em, 0.02em); } - 40% { clip-path: inset(38% 0 58% 0); transform: translate(-0.05em, 0.01em); } - 60% { clip-path: inset(19% 0 40% 0); transform: translate(0.025em, -0.02em); } - 80% { clip-path: inset(1% 0 58% 0); transform: translate(-0.05em, -0.02em); } - 100% { clip-path: inset(0 0 0 0); transform: translate(0); } -} - -.hero-role { - font-size: clamp(0.85rem, 3vw, 1rem); - letter-spacing: 0.05em; - margin-bottom: 1.5rem; - color: var(--accent); - font-weight: 400; - min-height: 1.5em; - font-family: var(--font-mono); -} - -.cursor { - display: inline-block; - width: 0.15em; - height: 1em; - background: var(--accent); - margin-left: 0.1em; - animation: cursor-blink 1s step-end infinite; -} - -@keyframes cursor-blink { - 0%, 49% { opacity: 1; } - 50%, 100% { opacity: 0; } -} - -.hero-tagline { - font-family: var(--font-body); - font-size: 1rem; - font-weight: 400; - line-height: 1.95; - color: var(--text-dim); - margin-bottom: 2rem; - max-width: 90%; -} - -/* Buttons */ -.hero-buttons { - display: flex; - gap: 1rem; - flex-wrap: wrap; - margin-bottom: 2rem; -} - -.btn { - padding: 0.75rem 1.5rem; - font-size: 0.8rem; - font-family: var(--font-mono); - letter-spacing: 0.1em; - text-transform: uppercase; - font-weight: 500; - cursor: pointer; - border: none; - transition: all var(--duration-base) ease; - text-decoration: none; - display: inline-block; - border-radius: 0; -} - -.btn-primary { - background: var(--accent); - color: #000; - font-weight: 600; -} - -.btn-primary:hover { - box-shadow: 0 0 24px rgba(168, 85, 247, 0.45); - transform: translate(0, -2px); -} - -.btn-outline { - background: transparent; - color: var(--accent); - border: 1px solid var(--border); -} - -.btn-outline:hover { - background: var(--accent); - color: #000; - box-shadow: 0 0 24px rgba(168, 85, 247, 0.45); -} - -/* Right column: terminal widget */ -.hero-right { - flex: 0 0 auto; - width: 320px; - display: none; -} - -@media (min-width: 900px) { - .hero-right { - display: block; - } -} - -.hero-terminal { - background: rgba(6, 11, 16, 0.85); - border: 1px solid rgba(168, 85, 247, 0.3); - border-radius: 8px; - overflow: hidden; - font-size: 0.75rem; - line-height: 1.7; -} - -.terminal-bar { - background: var(--surface); - padding: 0.5rem 1rem; - border-bottom: 1px solid var(--border); - display: flex; - align-items: center; - gap: 0.75rem; -} - -.terminal-dot { - width: 12px; - height: 12px; - border-radius: 50%; - display: inline-block; -} - -.terminal-title { - margin-left: auto; - font-family: var(--font-mono); - font-size: 0.7rem; - color: var(--text-dim); -} - -.terminal-content { - padding: 1rem; - font-family: var(--font-mono); - color: var(--terminal-text); - font-size: 0.75rem; - line-height: 1.7; -} - -.terminal-content .tl { - white-space: nowrap; - word-wrap: break-word; -} - -/* Terminal color classes */ -.tc-dim { color: var(--muted); } -.tc-ok { color: var(--accent2); } -.tc-key { color: var(--accent); } - -/* Terminal stagger animation */ -@keyframes terminal-fade-in { - from { - opacity: 0; - transform: translateY(4px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - -.tl { - opacity: 0; - animation: terminal-fade-in 0.4s ease forwards; -} - -.tl-d1 { animation-delay: 0ms; } -.tl-d2 { animation-delay: 150ms; } -.tl-d3 { animation-delay: 300ms; } -.tl-d4 { animation-delay: 450ms; } -.tl-d5 { animation-delay: 600ms; } -.tl-d6 { animation-delay: 750ms; } -.tl-d7 { animation-delay: 900ms; } -.tl-d8 { animation-delay: 1050ms; } -.tl-d9 { animation-delay: 1200ms; } - -.terminal-prompt { - color: var(--terminal-prompt); -} - -/* Scroll Indicator */ -.scroll-indicator { - position: absolute; - bottom: 2rem; - left: 50%; - transform: translateX(-50%); - display: flex; - flex-direction: column; - align-items: center; - gap: 0.5rem; - font-family: var(--font-mono); - font-size: 0.7rem; - letter-spacing: 0.1em; - text-transform: uppercase; - color: var(--text-dim); - z-index: 2; -} - -.scroll-line { - width: 1px; - height: 40px; - background: var(--accent); - animation: scroll-line-pulse 2s ease-in-out infinite; -} - -@keyframes scroll-line-pulse { - 0%, 100% { opacity: 0.3; transform: scaleY(1); } - 50% { opacity: 1; transform: scaleY(1.15); } -} - -/* Mobile */ -@media (max-width: 900px) { - .hero { - height: auto; - min-height: 100vh; - padding-top: 6rem; - } - - .hero-container { - flex-direction: column; - } - - .hero-tagline { - max-width: 100%; - } - - .scroll-indicator { - display: none; - } -} - -@media (prefers-reduced-motion: reduce) { - .hero-name.is-glitching::before, - .hero-name.is-glitching::after { animation: none; } - .cursor { animation: none; } - .scroll-line { animation: none; opacity: 0.6; } - .tl { animation: none; opacity: 1; } -} |
