diff --git a/core/templates/base.html b/core/templates/base.html index fa396d0..1cdcc47 100644 --- a/core/templates/base.html +++ b/core/templates/base.html @@ -25,9 +25,23 @@ - + diff --git a/static/css/custom.css b/static/css/custom.css index 2b8e2e3..d3815e6 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -67,24 +67,191 @@ a { text-decoration: none; } z-index: 2000; display: grid; place-items: center; - gap: 1rem; - background: radial-gradient(circle, #0b3149, var(--navy)); - color: #dff8ff; - animation: loaderExit .9s ease 1.35s forwards; + overflow: hidden; + color: #e9fbff; + background: + radial-gradient(circle at 18% 16%, rgba(0, 209, 255, .26), transparent 28rem), + radial-gradient(circle at 86% 78%, rgba(0, 242, 169, .22), transparent 26rem), + linear-gradient(135deg, #061724 0%, #082c43 58%, #031019 100%); + isolation: isolate; pointer-events: none; + animation: loaderAutoExit .7s ease 3s forwards; } -.loader-orb { - width: 5rem; - height: 5rem; +.tech-loader::before, +.tech-loader::after { + content: ""; + position: absolute; + inset: -18%; + z-index: -1; +} +.tech-loader::before { + opacity: .2; + background-image: + linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); + background-size: 46px 46px; + transform: perspective(720px) rotateX(62deg) scale(1.15); + animation: loaderGridMove 5.5s linear infinite; +} +.tech-loader::after { + opacity: .55; + background: linear-gradient(180deg, transparent 0%, rgba(0, 209, 255, .16) 48%, rgba(0, 242, 169, .12) 52%, transparent 100%); + height: 32%; + top: -34%; + animation: loaderSweep 2.2s ease-in-out infinite; +} +.tech-loader.is-hidden { + opacity: 0; + visibility: hidden; + transform: scale(1.015); + transition: opacity .55s ease, visibility .55s ease, transform .55s ease; +} +.loader-grid { + position: absolute; + inset: 0; + background: + radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.5px) 0 0 / 34px 34px, + linear-gradient(120deg, transparent 40%, rgba(0,209,255,.10), transparent 60%); + mask-image: radial-gradient(circle at center, #000 0%, transparent 72%); + opacity: .32; +} +.loader-card { + position: relative; + width: min(90vw, 440px); + padding: 2rem; + text-align: center; + border: 1px solid rgba(255,255,255,.16); + border-radius: 2rem; + background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); + box-shadow: 0 28px 90px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.18); + backdrop-filter: blur(20px); +} +.loader-brand { + display: inline-flex; + align-items: center; + gap: .7rem; + margin-bottom: 1.25rem; + font-family: 'Space Grotesk', 'Manrope', sans-serif; + font-weight: 800; + letter-spacing: -.03em; +} +.loader-logo { + display: inline-grid; + place-items: center; + width: 2.8rem; + height: 2.8rem; + border-radius: 1rem; + color: var(--navy); + background: linear-gradient(135deg, var(--secondary), var(--primary)); + box-shadow: 0 0 34px rgba(0, 209, 255, .42); + font-size: .85rem; +} +.loader-core { + position: relative; + display: grid; + place-items: center; + width: 9.8rem; + height: 9.8rem; + margin: 0 auto 1.25rem; +} +.loader-core::before { + content: ""; + position: absolute; + inset: 16%; border-radius: 50%; - border: 2px solid rgba(255,255,255,.15); - background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent, var(--primary)); - mask: radial-gradient(circle, transparent 48%, #000 50%); - animation: spin 1s linear infinite; + background: radial-gradient(circle, rgba(0, 209, 255, .32), transparent 66%); + filter: blur(8px); + animation: loaderPulse 1.8s ease-in-out infinite; } -.tech-loader span { margin-top: 7rem; position: absolute; font-weight: 800; letter-spacing: .02em; } +.loader-ring { + position: absolute; + border-radius: 50%; + background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent 34%, var(--accent), var(--primary)); + -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%); + mask: radial-gradient(circle, transparent 56%, #000 58%); +} +.loader-ring-outer { inset: 0; animation: spin 1.25s linear infinite; } +.loader-ring-inner { inset: 1.45rem; opacity: .72; animation: spinReverse 1.8s linear infinite; } +.loader-scan { + position: absolute; + inset: 2.35rem; + border: 1px solid rgba(0, 242, 169, .55); + border-radius: 1.35rem; + background: + linear-gradient(90deg, transparent, rgba(0, 242, 169, .22), transparent), + rgba(6, 23, 36, .58); + box-shadow: inset 0 0 22px rgba(0, 242, 169, .18); + animation: loaderScan 1.6s ease-in-out infinite; +} +.loader-chip { + position: relative; + display: grid; + place-items: center; + width: 3.8rem; + height: 3.8rem; + border-radius: 1.15rem; + color: var(--navy); + background: linear-gradient(135deg, var(--accent), var(--secondary)); + box-shadow: 0 0 34px rgba(0, 242, 169, .38); + font-size: 1.55rem; + animation: chipFloat 1.9s ease-in-out infinite; +} +.loader-title { + margin: 0; + color: #fff; + font-family: 'Space Grotesk', 'Manrope', sans-serif; + font-size: clamp(1.25rem, 4vw, 1.75rem); + font-weight: 800; + letter-spacing: -.04em; +} +.loader-copy { + margin: .45rem auto 1.25rem; + max-width: 30ch; + color: rgba(233, 251, 255, .76); + font-size: .96rem; +} +.loader-progress { + width: 100%; + height: .52rem; + overflow: hidden; + border-radius: 999px; + background: rgba(255,255,255,.11); +} +.loader-progress span { + display: block; + width: 46%; + height: 100%; + border-radius: inherit; + background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent)); + box-shadow: 0 0 22px rgba(0, 209, 255, .42); + animation: loaderProgress 1.55s ease-in-out infinite; +} +.loader-particles span { + position: absolute; + width: .55rem; + height: .55rem; + border-radius: 50%; + background: var(--primary); + box-shadow: 0 0 22px currentColor; + opacity: .7; + animation: particleFloat 4.5s ease-in-out infinite; +} +.loader-particles span:nth-child(1) { left: 14%; top: 22%; color: var(--primary); animation-delay: 0s; } +.loader-particles span:nth-child(2) { left: 78%; top: 18%; color: var(--secondary); animation-delay: .35s; } +.loader-particles span:nth-child(3) { left: 18%; top: 78%; color: var(--accent); animation-delay: .75s; } +.loader-particles span:nth-child(4) { left: 84%; top: 70%; color: var(--primary); animation-delay: 1s; } +.loader-particles span:nth-child(5) { left: 49%; top: 10%; color: var(--secondary); animation-delay: 1.25s; } +.loader-particles span:nth-child(6) { left: 52%; top: 88%; color: var(--accent); animation-delay: 1.55s; } @keyframes spin { to { transform: rotate(360deg); } } -@keyframes loaderExit { to { opacity: 0; visibility: hidden; } } +@keyframes spinReverse { to { transform: rotate(-360deg); } } +@keyframes loaderGridMove { to { background-position: 92px 92px; } } +@keyframes loaderSweep { 0% { transform: translateY(0); } 100% { transform: translateY(460%); } } +@keyframes loaderPulse { 50% { transform: scale(1.12); opacity: .65; } } +@keyframes loaderScan { 50% { transform: scale(.92); border-radius: 50%; } } +@keyframes chipFloat { 50% { transform: translateY(-6px) scale(1.04); } } +@keyframes particleFloat { 50% { transform: translate3d(18px, -24px, 0) scale(1.45); opacity: 1; } } +@keyframes loaderProgress { 0% { transform: translateX(-115%); } 100% { transform: translateX(235%); } } +@keyframes loaderAutoExit { to { opacity: 0; visibility: hidden; } } .hero-section { position: relative; diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css index 2b8e2e3..d3815e6 100644 --- a/staticfiles/css/custom.css +++ b/staticfiles/css/custom.css @@ -67,24 +67,191 @@ a { text-decoration: none; } z-index: 2000; display: grid; place-items: center; - gap: 1rem; - background: radial-gradient(circle, #0b3149, var(--navy)); - color: #dff8ff; - animation: loaderExit .9s ease 1.35s forwards; + overflow: hidden; + color: #e9fbff; + background: + radial-gradient(circle at 18% 16%, rgba(0, 209, 255, .26), transparent 28rem), + radial-gradient(circle at 86% 78%, rgba(0, 242, 169, .22), transparent 26rem), + linear-gradient(135deg, #061724 0%, #082c43 58%, #031019 100%); + isolation: isolate; pointer-events: none; + animation: loaderAutoExit .7s ease 3s forwards; } -.loader-orb { - width: 5rem; - height: 5rem; +.tech-loader::before, +.tech-loader::after { + content: ""; + position: absolute; + inset: -18%; + z-index: -1; +} +.tech-loader::before { + opacity: .2; + background-image: + linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), + linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px); + background-size: 46px 46px; + transform: perspective(720px) rotateX(62deg) scale(1.15); + animation: loaderGridMove 5.5s linear infinite; +} +.tech-loader::after { + opacity: .55; + background: linear-gradient(180deg, transparent 0%, rgba(0, 209, 255, .16) 48%, rgba(0, 242, 169, .12) 52%, transparent 100%); + height: 32%; + top: -34%; + animation: loaderSweep 2.2s ease-in-out infinite; +} +.tech-loader.is-hidden { + opacity: 0; + visibility: hidden; + transform: scale(1.015); + transition: opacity .55s ease, visibility .55s ease, transform .55s ease; +} +.loader-grid { + position: absolute; + inset: 0; + background: + radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1.5px) 0 0 / 34px 34px, + linear-gradient(120deg, transparent 40%, rgba(0,209,255,.10), transparent 60%); + mask-image: radial-gradient(circle at center, #000 0%, transparent 72%); + opacity: .32; +} +.loader-card { + position: relative; + width: min(90vw, 440px); + padding: 2rem; + text-align: center; + border: 1px solid rgba(255,255,255,.16); + border-radius: 2rem; + background: linear-gradient(145deg, rgba(255,255,255,.14), rgba(255,255,255,.055)); + box-shadow: 0 28px 90px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.18); + backdrop-filter: blur(20px); +} +.loader-brand { + display: inline-flex; + align-items: center; + gap: .7rem; + margin-bottom: 1.25rem; + font-family: 'Space Grotesk', 'Manrope', sans-serif; + font-weight: 800; + letter-spacing: -.03em; +} +.loader-logo { + display: inline-grid; + place-items: center; + width: 2.8rem; + height: 2.8rem; + border-radius: 1rem; + color: var(--navy); + background: linear-gradient(135deg, var(--secondary), var(--primary)); + box-shadow: 0 0 34px rgba(0, 209, 255, .42); + font-size: .85rem; +} +.loader-core { + position: relative; + display: grid; + place-items: center; + width: 9.8rem; + height: 9.8rem; + margin: 0 auto 1.25rem; +} +.loader-core::before { + content: ""; + position: absolute; + inset: 16%; border-radius: 50%; - border: 2px solid rgba(255,255,255,.15); - background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent, var(--primary)); - mask: radial-gradient(circle, transparent 48%, #000 50%); - animation: spin 1s linear infinite; + background: radial-gradient(circle, rgba(0, 209, 255, .32), transparent 66%); + filter: blur(8px); + animation: loaderPulse 1.8s ease-in-out infinite; } -.tech-loader span { margin-top: 7rem; position: absolute; font-weight: 800; letter-spacing: .02em; } +.loader-ring { + position: absolute; + border-radius: 50%; + background: conic-gradient(from 0deg, var(--primary), var(--secondary), transparent 34%, var(--accent), var(--primary)); + -webkit-mask: radial-gradient(circle, transparent 56%, #000 58%); + mask: radial-gradient(circle, transparent 56%, #000 58%); +} +.loader-ring-outer { inset: 0; animation: spin 1.25s linear infinite; } +.loader-ring-inner { inset: 1.45rem; opacity: .72; animation: spinReverse 1.8s linear infinite; } +.loader-scan { + position: absolute; + inset: 2.35rem; + border: 1px solid rgba(0, 242, 169, .55); + border-radius: 1.35rem; + background: + linear-gradient(90deg, transparent, rgba(0, 242, 169, .22), transparent), + rgba(6, 23, 36, .58); + box-shadow: inset 0 0 22px rgba(0, 242, 169, .18); + animation: loaderScan 1.6s ease-in-out infinite; +} +.loader-chip { + position: relative; + display: grid; + place-items: center; + width: 3.8rem; + height: 3.8rem; + border-radius: 1.15rem; + color: var(--navy); + background: linear-gradient(135deg, var(--accent), var(--secondary)); + box-shadow: 0 0 34px rgba(0, 242, 169, .38); + font-size: 1.55rem; + animation: chipFloat 1.9s ease-in-out infinite; +} +.loader-title { + margin: 0; + color: #fff; + font-family: 'Space Grotesk', 'Manrope', sans-serif; + font-size: clamp(1.25rem, 4vw, 1.75rem); + font-weight: 800; + letter-spacing: -.04em; +} +.loader-copy { + margin: .45rem auto 1.25rem; + max-width: 30ch; + color: rgba(233, 251, 255, .76); + font-size: .96rem; +} +.loader-progress { + width: 100%; + height: .52rem; + overflow: hidden; + border-radius: 999px; + background: rgba(255,255,255,.11); +} +.loader-progress span { + display: block; + width: 46%; + height: 100%; + border-radius: inherit; + background: linear-gradient(90deg, var(--secondary), var(--primary), var(--accent)); + box-shadow: 0 0 22px rgba(0, 209, 255, .42); + animation: loaderProgress 1.55s ease-in-out infinite; +} +.loader-particles span { + position: absolute; + width: .55rem; + height: .55rem; + border-radius: 50%; + background: var(--primary); + box-shadow: 0 0 22px currentColor; + opacity: .7; + animation: particleFloat 4.5s ease-in-out infinite; +} +.loader-particles span:nth-child(1) { left: 14%; top: 22%; color: var(--primary); animation-delay: 0s; } +.loader-particles span:nth-child(2) { left: 78%; top: 18%; color: var(--secondary); animation-delay: .35s; } +.loader-particles span:nth-child(3) { left: 18%; top: 78%; color: var(--accent); animation-delay: .75s; } +.loader-particles span:nth-child(4) { left: 84%; top: 70%; color: var(--primary); animation-delay: 1s; } +.loader-particles span:nth-child(5) { left: 49%; top: 10%; color: var(--secondary); animation-delay: 1.25s; } +.loader-particles span:nth-child(6) { left: 52%; top: 88%; color: var(--accent); animation-delay: 1.55s; } @keyframes spin { to { transform: rotate(360deg); } } -@keyframes loaderExit { to { opacity: 0; visibility: hidden; } } +@keyframes spinReverse { to { transform: rotate(-360deg); } } +@keyframes loaderGridMove { to { background-position: 92px 92px; } } +@keyframes loaderSweep { 0% { transform: translateY(0); } 100% { transform: translateY(460%); } } +@keyframes loaderPulse { 50% { transform: scale(1.12); opacity: .65; } } +@keyframes loaderScan { 50% { transform: scale(.92); border-radius: 50%; } } +@keyframes chipFloat { 50% { transform: translateY(-6px) scale(1.04); } } +@keyframes particleFloat { 50% { transform: translate3d(18px, -24px, 0) scale(1.45); opacity: 1; } } +@keyframes loaderProgress { 0% { transform: translateX(-115%); } 100% { transform: translateX(235%); } } +@keyframes loaderAutoExit { to { opacity: 0; visibility: hidden; } } .hero-section { position: relative;