diff options
Diffstat (limited to '')
| -rw-r--r-- | styles.css | 53 |
1 files changed, 44 insertions, 9 deletions
| @@ -1,21 +1,52 @@ | |||
| 1 | /* Base Styles */ | 1 | /* Base Styles */ |
| 2 | :root { | 2 | :root { |
| 3 | --primary: #3b82f6; | 3 | --cursor-x: 50%; |
| 4 | --primary-hover: #60a5fa; | 4 | --cursor-y: 50%; |
| 5 | --text: #e5e7eb; | ||
| 6 | --text-secondary: #9ca3af; | ||
| 7 | --bg: #111827; | 5 | --bg: #111827; |
| 8 | --bg-secondary: #1f2937; | 6 | --bg-secondary: #1f2937; |
| 9 | --bg-tertiary: #374151; | 7 | --bg-tertiary: #374151; |
| 8 | --text: #f9fafb; | ||
| 9 | --text-secondary: #d1d5db; | ||
| 10 | --primary: #3b82f6; | ||
| 11 | --primary-hover: #2563eb; | ||
| 10 | --border: #374151; | 12 | --border: #374151; |
| 13 | --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | ||
| 11 | --white: #ffffff; | 14 | --white: #ffffff; |
| 12 | --black: #111827; | 15 | --black: #111827; |
| 13 | } | 16 | } |
| 14 | 17 | ||
| 15 | * { | 18 | /* Base background and cursor light effect */ |
| 19 | html, body { | ||
| 20 | min-height: 100%; | ||
| 16 | margin: 0; | 21 | margin: 0; |
| 17 | padding: 0; | 22 | padding: 0; |
| 18 | box-sizing: border-box; | 23 | background: #111827; /* Base dark background */ |
| 24 | overflow-x: hidden; | ||
| 25 | /* Default cursor is now visible */ | ||
| 26 | } | ||
| 27 | |||
| 28 | /* Cursor light effect */ | ||
| 29 | body::before { | ||
| 30 | content: ''; | ||
| 31 | position: fixed; | ||
| 32 | top: 0; | ||
| 33 | left: 0; | ||
| 34 | width: 100%; | ||
| 35 | height: 100%; | ||
| 36 | background: radial-gradient( | ||
| 37 | circle at var(--cursor-x, 50%) var(--cursor-y, 50%), | ||
| 38 | rgba(31, 41, 55, 0.8) 0%, | ||
| 39 | rgba(17, 24, 39, 0.95) 70%, | ||
| 40 | #111827 100% | ||
| 41 | ); | ||
| 42 | pointer-events: none; | ||
| 43 | z-index: 0; | ||
| 44 | } | ||
| 45 | |||
| 46 | /* Ensure content is above the cursor effect */ | ||
| 47 | body > * { | ||
| 48 | position: relative; | ||
| 49 | z-index: 1; | ||
| 19 | } | 50 | } |
| 20 | 51 | ||
| 21 | body { | 52 | body { |
| @@ -75,7 +106,9 @@ nav { | |||
| 75 | display: flex; | 106 | display: flex; |
| 76 | align-items: center; | 107 | align-items: center; |
| 77 | padding: 8rem 0 4rem; | 108 | padding: 8rem 0 4rem; |
| 78 | background: linear-gradient(135deg, #111827 0%, #1f2937 100%); | 109 | position: relative; |
| 110 | overflow: hidden; | ||
| 111 | background: transparent; | ||
| 79 | } | 112 | } |
| 80 | 113 | ||
| 81 | .hero-content { | 114 | .hero-content { |
| @@ -179,7 +212,9 @@ section { | |||
| 179 | /* About Section */ | 212 | /* About Section */ |
| 180 | .about { | 213 | .about { |
| 181 | padding: 6rem 0; | 214 | padding: 6rem 0; |
| 182 | background-color: var(--bg); | 215 | background: transparent; |
| 216 | position: relative; | ||
| 217 | z-index: 1; | ||
| 183 | } | 218 | } |
| 184 | 219 | ||
| 185 | .about-content { | 220 | .about-content { |
| @@ -220,7 +255,7 @@ section { | |||
| 220 | 255 | ||
| 221 | /* Projects Section */ | 256 | /* Projects Section */ |
| 222 | .projects { | 257 | .projects { |
| 223 | background-color: var(--bg); | 258 | background: transparent; |
| 224 | padding: 6rem 0; | 259 | padding: 6rem 0; |
| 225 | } | 260 | } |
| 226 | 261 | ||
