summaryrefslogtreecommitdiff
path: root/examples/cosmic.css
diff options
context:
space:
mode:
Diffstat (limited to 'examples/cosmic.css')
-rw-r--r--examples/cosmic.css536
1 files changed, 536 insertions, 0 deletions
diff --git a/examples/cosmic.css b/examples/cosmic.css
new file mode 100644
index 0000000..177fe10
--- /dev/null
+++ b/examples/cosmic.css
@@ -0,0 +1,536 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=Space+Grotesk:wght@400;600;700&display=swap");
+
+:root {
+ --glass-bg: rgba(255, 255, 255, 0.05);
+ --glass-border: rgba(255, 255, 255, 0.1);
+ --glass-shadow: rgba(0, 0, 0, 0.3);
+ --accent-purple: #8b5cf6;
+ --accent-blue: #06b6d4;
+ --accent-pink: #ec4899;
+ --accent-orange: #f59e0b;
+ --text-primary: #ffffff;
+ --text-muted: rgba(255, 255, 255, 0.7);
+ --dark-space: #0f0f23;
+ --darker-space: #050510;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+body {
+ font-family: "Inter", sans-serif;
+ background: radial-gradient(
+ ellipse at top,
+ #1e1b4b 0%,
+ var(--dark-space) 50%,
+ var(--darker-space) 100%
+ );
+ color: var(--text-primary);
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ overflow-x: hidden;
+ position: relative;
+}
+
+/* Cosmic background with moving stars */
+body::before {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 200%;
+ height: 200%;
+ background-image:
+ radial-gradient(
+ 2px 2px at 20px 30px,
+ rgba(255, 255, 255, 0.8),
+ transparent
+ ),
+ radial-gradient(
+ 1px 1px at 40px 70px,
+ rgba(255, 255, 255, 0.4),
+ transparent
+ ),
+ radial-gradient(
+ 1px 1px at 90px 40px,
+ rgba(255, 255, 255, 0.6),
+ transparent
+ ),
+ radial-gradient(
+ 2px 2px at 130px 80px,
+ rgba(255, 255, 255, 0.3),
+ transparent
+ ),
+ radial-gradient(
+ 1px 1px at 160px 30px,
+ rgba(255, 255, 255, 0.5),
+ transparent
+ );
+ background-repeat: repeat;
+ background-size: 200px 200px;
+ z-index: -2;
+ animation: starField 60s linear infinite;
+}
+
+/* Nebula clouds */
+body::after {
+ content: "";
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background:
+ radial-gradient(
+ ellipse 800px 600px at 10% 20%,
+ rgba(139, 92, 246, 0.05) 0%,
+ transparent 50%
+ ),
+ radial-gradient(
+ ellipse 600px 800px at 90% 80%,
+ rgba(6, 182, 212, 0.05) 0%,
+ transparent 50%
+ ),
+ radial-gradient(
+ ellipse 400px 400px at 50% 10%,
+ rgba(236, 72, 153, 0.03) 0%,
+ transparent 50%
+ );
+ z-index: -1;
+ animation: nebulaDrift 40s ease-in-out infinite;
+}
+
+@keyframes starField {
+ 0% {
+ transform: translateY(0) translateX(0);
+ }
+ 100% {
+ transform: translateY(-200px) translateX(-200px);
+ }
+}
+
+@keyframes nebulaDrift {
+ 0%,
+ 100% {
+ transform: scale(1) rotate(0deg);
+ }
+ 33% {
+ transform: scale(1.1) rotate(1deg);
+ }
+ 66% {
+ transform: scale(0.9) rotate(-1deg);
+ }
+}
+
+h1 {
+ font-family: "Space Grotesk", sans-serif;
+ font-size: clamp(3rem, 10vw, 6rem);
+ font-weight: 700;
+ text-align: center;
+ margin: 80px 0 60px 0;
+ background: linear-gradient(
+ 135deg,
+ var(--accent-purple) 0%,
+ var(--accent-blue) 50%,
+ var(--accent-pink) 100%
+ );
+ -webkit-background-clip: text;
+ background-clip: text;
+ -webkit-text-fill-color: transparent;
+ position: relative;
+ filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.3));
+ animation: titleGlow 4s ease-in-out infinite alternate;
+}
+
+/* Floating orbs using h1 pseudo-elements */
+h1::before {
+ content: "";
+ position: fixed;
+ width: 300px;
+ height: 300px;
+ background: radial-gradient(
+ circle at 30% 30%,
+ rgba(139, 92, 246, 0.1),
+ transparent
+ );
+ top: 10%;
+ right: 10%;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: -1;
+ animation: float1 20s ease-in-out infinite;
+}
+
+h1::after {
+ content: "";
+ position: fixed;
+ width: 200px;
+ height: 200px;
+ background: radial-gradient(
+ circle at 70% 70%,
+ rgba(6, 182, 212, 0.1),
+ transparent
+ );
+ bottom: 20%;
+ left: 10%;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: -1;
+ animation: float2 25s ease-in-out infinite;
+}
+
+@keyframes float1 {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 33% {
+ transform: translate(-50px, -30px) scale(1.1);
+ }
+ 66% {
+ transform: translate(30px, -60px) scale(0.9);
+ }
+}
+
+@keyframes float2 {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 50% {
+ transform: translate(40px, -40px) scale(1.2);
+ }
+}
+
+@keyframes titleGlow {
+ 0% {
+ filter: drop-shadow(0 0 30px rgba(139, 92, 246, 0.3));
+ }
+ 100% {
+ filter: drop-shadow(0 0 50px rgba(6, 182, 212, 0.4));
+ }
+}
+
+.cards-container {
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+ gap: 40px;
+ margin: 60px auto;
+ max-width: 1400px;
+ padding: 0 40px;
+ perspective: 1200px;
+}
+
+/* Additional floating orb using cards-container */
+.cards-container::before {
+ content: "";
+ position: fixed;
+ width: 150px;
+ height: 150px;
+ background: radial-gradient(
+ circle at 50% 50%,
+ rgba(236, 72, 153, 0.1),
+ transparent
+ );
+ top: 60%;
+ right: 20%;
+ border-radius: 50%;
+ pointer-events: none;
+ z-index: -1;
+ animation: float3 30s ease-in-out infinite;
+}
+
+@keyframes float3 {
+ 0%,
+ 100% {
+ transform: translate(0, 0) scale(1);
+ }
+ 25% {
+ transform: translate(-20px, 30px) scale(0.8);
+ }
+ 75% {
+ transform: translate(20px, -20px) scale(1.1);
+ }
+}
+
+.card {
+ background: var(--glass-bg);
+ backdrop-filter: blur(20px);
+ -webkit-backdrop-filter: blur(20px);
+ border: 1px solid var(--glass-border);
+ border-radius: 24px;
+ padding: 35px 30px;
+ position: relative;
+ transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
+ transform-style: preserve-3d;
+ overflow: hidden;
+}
+
+/* Glass reflection effect */
+.card::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: -50%;
+ width: 50%;
+ height: 100%;
+ background: linear-gradient(
+ 90deg,
+ transparent,
+ rgba(255, 255, 255, 0.1),
+ transparent
+ );
+ transform: skewX(-25deg);
+ transition: left 0.6s ease;
+ opacity: 0;
+}
+
+.card:hover::before {
+ left: 150%;
+ opacity: 1;
+}
+
+/* Floating shadow */
+.card::after {
+ content: "";
+ position: absolute;
+ top: 100%;
+ left: 50%;
+ width: 80%;
+ height: 20px;
+ background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3), transparent);
+ transform: translateX(-50%);
+ border-radius: 50%;
+ transition: all 0.5s ease;
+ z-index: -1;
+}
+
+.card:hover {
+ transform: translateY(-20px) rotateX(8deg) rotateY(-2deg);
+ border-color: rgba(255, 255, 255, 0.2);
+ box-shadow:
+ 0 40px 80px rgba(0, 0, 0, 0.4),
+ 0 0 0 1px rgba(255, 255, 255, 0.05),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1);
+}
+
+.card:hover::after {
+ top: 120%;
+ width: 90%;
+ height: 30px;
+ background: radial-gradient(ellipse, rgba(0, 0, 0, 0.5), transparent);
+}
+
+h2 {
+ font-family: "Space Grotesk", sans-serif;
+ color: var(--text-primary);
+ margin: 0 0 30px 0;
+ font-size: 1.8rem;
+ font-weight: 600;
+ text-align: center;
+ position: relative;
+ text-transform: uppercase;
+ letter-spacing: 1px;
+}
+
+/* Animated underline */
+h2::after {
+ content: "";
+ position: absolute;
+ bottom: -15px;
+ left: 50%;
+ transform: translateX(-50%);
+ width: 0;
+ height: 3px;
+ background: linear-gradient(
+ 90deg,
+ var(--accent-purple),
+ var(--accent-blue),
+ var(--accent-pink)
+ );
+ border-radius: 2px;
+ transition: width 0.4s ease;
+}
+
+.card:hover h2::after {
+ width: 80%;
+}
+
+a {
+ color: var(--text-muted);
+ display: flex;
+ align-items: center;
+ margin: 16px 0;
+ text-decoration: none;
+ padding: 18px 24px;
+ border-radius: 16px;
+ transition: all 0.4s ease;
+ position: relative;
+ font-weight: 400;
+ font-size: 1.1rem;
+ background: rgba(255, 255, 255, 0.03);
+ border: 1px solid rgba(255, 255, 255, 0.05);
+ backdrop-filter: blur(10px);
+ -webkit-backdrop-filter: blur(10px);
+ overflow: hidden;
+}
+
+/* Gradient hover effect */
+a::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: linear-gradient(
+ 135deg,
+ rgba(139, 92, 246, 0.1) 0%,
+ rgba(6, 182, 212, 0.1) 50%,
+ rgba(236, 72, 153, 0.1) 100%
+ );
+ opacity: 0;
+ transition: opacity 0.4s ease;
+ border-radius: 16px;
+}
+
+/* Icon placeholder */
+a::after {
+ content: "→";
+ margin-left: auto;
+ font-size: 1.2rem;
+ font-weight: bold;
+ transition: transform 0.3s ease;
+ opacity: 0.6;
+}
+
+a:hover {
+ color: var(--text-primary);
+ transform: translateX(8px) translateZ(10px);
+ border-color: rgba(255, 255, 255, 0.15);
+ box-shadow:
+ 0 20px 40px rgba(0, 0, 0, 0.3),
+ inset 0 1px 0 rgba(255, 255, 255, 0.2);
+}
+
+a:hover::before {
+ opacity: 1;
+}
+
+a:hover::after {
+ transform: translateX(8px);
+ opacity: 1;
+}
+
+/* Magnetic effect */
+a:active {
+ transform: translateX(4px) translateZ(5px) scale(0.98);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+ .cards-container {
+ grid-template-columns: 1fr;
+ gap: 30px;
+ padding: 0 20px;
+ }
+
+ .card {
+ padding: 30px 25px;
+ }
+
+ h1 {
+ margin: 60px 0 40px 0;
+ }
+}
+
+/* Card entrance animations */
+.card {
+ opacity: 0;
+ animation: cardEnter 0.8s ease forwards;
+}
+
+.card:nth-child(1) {
+ animation-delay: 0.1s;
+}
+.card:nth-child(2) {
+ animation-delay: 0.2s;
+}
+.card:nth-child(3) {
+ animation-delay: 0.3s;
+}
+.card:nth-child(4) {
+ animation-delay: 0.4s;
+}
+.card:nth-child(5) {
+ animation-delay: 0.5s;
+}
+.card:nth-child(6) {
+ animation-delay: 0.6s;
+}
+.card:nth-child(7) {
+ animation-delay: 0.7s;
+}
+
+@keyframes cardEnter {
+ 0% {
+ opacity: 0;
+ transform: translateY(100px) rotateX(-15deg) scale(0.8);
+ filter: blur(10px);
+ }
+ 100% {
+ opacity: 1;
+ transform: translateY(0) rotateX(0) scale(1);
+ filter: blur(0);
+ }
+}
+
+/* Custom scrollbar */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-track {
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: linear-gradient(
+ 135deg,
+ var(--accent-purple),
+ var(--accent-blue)
+ );
+ border-radius: 4px;
+ backdrop-filter: blur(10px);
+}
+
+::-webkit-scrollbar-thumb:hover {
+ background: linear-gradient(135deg, var(--accent-blue), var(--accent-pink));
+}
+
+/* Selection styling */
+::selection {
+ background: rgba(139, 92, 246, 0.3);
+ color: var(--text-primary);
+}
+
+/* Page load animation */
+@keyframes pageLoad {
+ 0% {
+ opacity: 0;
+ transform: scale(1.1);
+ filter: blur(20px);
+ }
+ 100% {
+ opacity: 1;
+ transform: scale(1);
+ filter: blur(0);
+ }
+}
+
+body {
+ animation: pageLoad 1.2s ease-out;
+}
generated by cgit v1.2.3 (git 2.25.1) at 2026-01-16 02:39:37 +0000