Upload styles.css

styles.css

@@ -1,11 +1,15 @@
-/* ======  CSS VARIABLES  ====== */
+/* ======  GOLDEN GRADIENT THEME  ====== */
 :root {
-  --bg: #0a0a0f;
+  --bg: #0f0f0f;                    /* deep black base   */
   --surface: rgba(255, 255, 255, 0.05);
   --border: rgba(255, 255, 255, 0.08);
-  --accent: #6366f1;
+
+  /* golden-copper gradient palette */
+  --accent: linear-gradient(135deg, #ffb347 0%, #ffcc33 50%, #d2691e 100%);
+  --accent-solid: #ffb347;
+
   --text: #ffffff;
-  --text2: #a1a1aa;
+  --text2: #d2b48c;                /* tan / light gold   */
   --radius: 16px;
   --font: "Inter", sans-serif;
   --mono: "JetBrains Mono", monospace;
@@ -22,22 +26,27 @@ body {
   overflow-x: hidden;
 }
 
-/* ======  DIV BUTTON  ====== */
-.btn-copy {
+/* ======  BUTTONS / INPUTS  ====== */
+.btn-copy,
+.cta,
+.load-more,
+.pill.active {
   background: var(--accent);
-  color: #fff;
+  color: #000;
   border: none;
-  padding: .5rem 1rem;
-  border-radius: 50px;
-  font-size: .85rem;
-  cursor: pointer;
-  transition: opacity .2s;
-  text-decoration: none;
-  display: inline-block;
+  font-weight: 600;
+  transition: all .25s ease;
+}
+.btn-copy:hover,
+.cta:hover,
+.load-more:hover,
+.pill:hover {
+  filter: brightness(1.15);
+  transform: translateY(-3px);
+  box-shadow: 0 8px 25px rgba(255, 179, 71, 0.35);
 }
-.btn-copy:hover { opacity: .85; }
 
-/* ======  LIQUID BACKGROUND  ====== */
+/* ======  LIQUID GOLD BACKGROUND  ====== */
 .liquid-bg {
   position: fixed;
   inset: 0;
@@ -48,27 +57,17 @@ body {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
-  opacity: .65;
+  opacity: 0.7;
   animation: drift 20s infinite ease-in-out;
 }
-.orb-1 { width: 50vw; height: 50vw; top: -15%; left: -15%; background: #6366f1; }
-.orb-2 { width: 40vw; height: 40vw; bottom: -15%; right: -15%; background: #06b6d4; }
-.orb-3 { width: 30vw; height: 30vw; top: 30%; left: 30%; background: #a855f7; }
+.orb-1 { width: 50vw; height: 50vw; top: -15%; left: -15%; background: #ffb347; }
+.orb-2 { width: 40vw; height: 40vw; bottom: -15%; right: -15%; background: #ff8c00; }
+.orb-3 { width: 30vw; height: 30vw; top: 30%; left: 30%; background: #d2691e; }
 
 @keyframes drift {
-  0%   { transform: translate(0,0) scale(1); }
-  50%  { transform: translate(40px,-40px) scale(1.15); }
-  100% { transform: translate(0,0) scale(1); }
-}
-
-/* ======  TAP / HOVER MAGIC  ====== */
-.stat-card {
-  transition: transform 0.25s ease, box-shadow 0.25s ease;
-}
-.stat-card:hover,
-.stat-card:active {
-  transform: translateY(-6px);
-  box-shadow: 0 12px 28px rgba(99, 102, 241, 0.35);
+  0%   { transform: translate(0, 0) scale(1); }
+  50%  { transform: translate(40px, -40px) scale(1.15); }
+  100% { transform: translate(0, 0) scale(1); }
 }
 
 /* ======  HEADER  ====== */
@@ -90,19 +89,11 @@ body {
   display: flex;
   align-items: center;
   gap: .5rem;
-  color: var(--accent);
-}
-nav {
-  display: flex;
-  gap: 1.2rem;
-}
-nav a {
-  color: var(--text2);
-  font-weight: 500;
-  text-decoration: none;
-  transition: color .2s;
+  color: var(--accent-solid);
 }
-nav a:hover { color: var(--accent); }
+nav { display: flex; gap: 1.2rem; }
+nav a { color: var(--text2); font-weight: 500; text-decoration: none; transition: color .2s; }
+nav a:hover { color: var(--accent-solid); }
 
 /* ======  HERO  ====== */
 .hero {
@@ -118,22 +109,12 @@ nav a:hover { color: var(--accent); }
   font-size: clamp(2.2rem, 6vw, 3.5rem);
   font-weight: 800;
 }
-.hero-title .accent { color: var(--accent); }
-.hero-sub {
-  margin: .75rem 0 2rem;
-  color: var(--text2);
-}
-.cta {
+.hero-title .accent {
   background: var(--accent);
-  color: #fff;
-  border: none;
-  padding: .9rem 2rem;
-  border-radius: 50px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: transform .2s, box-shadow .2s;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
 }
-.cta:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(99,102,241,.35); }
+.hero-sub { margin: .75rem 0 2rem; color: var(--text2); }
 
 /* ======  STATS  ====== */
 .stats {
@@ -151,8 +132,21 @@ nav a:hover { color: var(--accent); }
   text-align: center;
   min-width: 150px;
   backdrop-filter: blur(20px);
+  transition: transform .25s ease, box-shadow .25s ease;
+}
+.stat-card:hover,
+.stat-card:active {
+  transform: translateY(-6px);
+  box-shadow: 0 12px 28px rgba(255, 179, 71, 0.35);
+}
+.stat-card i {
+  display: block;
+  font-size: 1.5rem;
+  background: var(--accent);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  margin-bottom: .4rem;
 }
-.stat-card i { display: block; font-size: 1.5rem; color: var(--accent); margin-bottom: .4rem; }
 .stat-card span { font-size: 1.4rem; font-weight: 700; }
 .stat-card small { color: var(--text2); }
 
@@ -183,10 +177,14 @@ nav a:hover { color: var(--accent); }
   background: transparent;
   color: var(--text2);
   cursor: pointer;
-  transition: all .2s;
+  transition: all .25s ease;
+}
+.pill:hover,
+.pill.active {
+  background: var(--accent);
+  color: #000;
+  border-color: var(--accent-solid);
 }
-.pill.active,
-.pill:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
 
 /* ======  GRID  ====== */
 .grid {
@@ -199,20 +197,20 @@ nav a:hover { color: var(--accent); }
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 1.5rem;
-  transition: transform .25s, box-shadow .25s;
+  transition: transform .25s ease, box-shadow .25s ease;
   cursor: pointer;
   position: relative;
 }
 .card:hover {
   transform: translateY(-5px);
-  box-shadow: 0 12px 30px rgba(0,0,0,.4);
+  box-shadow: 0 12px 30px rgba(255, 179, 71, 0.4);
 }
 .card h4 { margin-bottom: .5rem; font-size: 1.1rem; }
 .card .cat {
   display: inline-block;
   font-size: .7rem;
   background: var(--accent);
-  color: #fff;
+  color: #000;
   padding: .2rem .6rem;
   border-radius: 20px;
   margin-bottom: .7rem;
@@ -224,24 +222,26 @@ nav a:hover { color: var(--accent); }
   right: 1rem;
   font-family: var(--mono);
   font-size: .7rem;
-  background: rgba(16,185,129,.2);
-  color: #10b981;
+  background: rgba(255, 179, 71, 0.2);
+  color: #ffb347;
   padding: .15rem .4rem;
   border-radius: 4px;
 }
-
 .load-more {
   display: block;
   margin: 2.5rem auto 0;
   padding: .75rem 2rem;
-  border: 1px solid var(--accent);
+  border: 1px solid var(--accent-solid);
   border-radius: 50px;
-  color: var(--accent);
+  color: var(--accent-solid);
   background: transparent;
   cursor: pointer;
-  transition: all .2s;
+  transition: all .25s ease;
+}
+.load-more:hover {
+  background: var(--accent);
+  color: #000;
 }
-.load-more:hover { background: var(--accent); color: #fff; }
 
 /* ======  DOCS  ====== */
 .docs {
@@ -265,7 +265,7 @@ nav a:hover { color: var(--accent); }
   background: var(--accent);
   display: grid; place-items: center;
   font-size: 1.5rem;
-  color: #fff;
+  color: #000;
 }
 article h3 { font-size: 1.1rem; margin-bottom: .5rem; }
 article p { color: var(--text2); }
@@ -287,7 +287,7 @@ footer {
   font-size: 1.3rem;
   transition: color .2s;
 }
-.social a:hover { color: var(--accent); }
+.social a:hover { color: var(--accent-solid); }
 
 /* ======  MODAL  ====== */
 .modal {
@@ -338,5 +338,5 @@ footer {
 /* ======  RESPONSIVE  ====== */
 @media (max-width: 600px) {
   .header { padding: 1rem; }
-  nav { display: none; } /* simple for now */
+  nav { display: none; }
 }