diff options
Diffstat (limited to 'base.css')
| -rw-r--r-- | base.css | 183 |
1 files changed, 183 insertions, 0 deletions
diff --git a/base.css b/base.css new file mode 100644 index 0000000..dc8d1f0 --- /dev/null +++ b/base.css @@ -0,0 +1,183 @@ +/* Morse Hero Base Styles */ +:root { + --primary-color: #3498db; + --primary-dark: #2980b9; + --secondary-color: #f39c12; + --secondary-dark: #e67e22; + --accent-color: #e74c3c; + --accent-dark: #c0392b; + --success-color: #2ecc71; + --success-dark: #27ae60; + --bg-dark: #2c3e50; + --bg-darker: #1a2530; + --bg-light: #34495e; + --text-light: #ecf0f1; + --text-dim: rgba(255, 255, 255, 0.7); + --border-radius-sm: 12px; + --border-radius-md: 20px; + --border-radius-lg: 30px; + --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.1); + --shadow-md: 0 10px 20px rgba(0, 0, 0, 0.15); + --shadow-lg: 0 15px 30px rgba(0, 0, 0, 0.2); + --transition-fast: 0.2s ease; + --transition-normal: 0.3s ease; +} + +* { + box-sizing: border-box; + margin: 0; + padding: 0; +} + +body { + font-family: 'Poppins', 'Fredoka', sans-serif; + margin: 0; + padding: 0; + background: radial-gradient(ellipse at top, var(--bg-dark) 0%, var(--bg-darker) 100%); + color: var(--text-light); + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: 18px; + line-height: 1.6; +} + +.container { + max-width: 900px; + margin: 0 auto; + padding: 30px 20px; + text-align: center; + width: 100%; +} + +h1 { + color: var(--secondary-color); + text-shadow: 3px 3px 0px rgba(0, 0, 0, 0.3), + 0 0 15px rgba(243, 156, 18, 0.5); + margin-bottom: 20px; + font-family: 'Fredoka', sans-serif; + font-weight: 600; + position: relative; + display: inline-block; +} + +h1::after { + content: ""; + position: absolute; + bottom: -10px; + left: 50%; + transform: translateX(-50%); + width: 60px; + height: 4px; + background: linear-gradient(90deg, var(--accent-color), var(--secondary-color)); + border-radius: 2px; +} + +button { + cursor: pointer; + font-family: 'Poppins', 'Fredoka', sans-serif; + transition: all var(--transition-normal); + font-weight: 600; + letter-spacing: 1px; + text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); + border: none; + outline: none; + position: relative; + overflow: hidden; +} + +button::after { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); + opacity: 0; + transition: opacity var(--transition-fast); +} + +button:hover::after { + opacity: 1; +} + +.title-link { + color: inherit; + text-decoration: none; + transition: all var(--transition-normal); + position: relative; + display: inline-block; +} + +.title-link:hover { + color: var(--secondary-color); + text-shadow: 0 0 15px rgba(243, 156, 18, 0.6); +} + +.footer { + margin-top: 40px; + padding: 20px; + text-align: center; + font-size: 16px; + color: var(--text-dim); + width: 100%; + border-top: 1px solid rgba(255, 255, 255, 0.1); +} + +.footer a { + color: var(--primary-color); + text-decoration: none; + font-weight: bold; + transition: color var(--transition-normal); + position: relative; +} + +.footer a::after { + content: ''; + position: absolute; + width: 100%; + transform: scaleX(0); + height: 2px; + bottom: -2px; + left: 0; + background-color: var(--primary-color); + transform-origin: bottom right; + transition: transform 0.3s ease-out; +} + +.footer a:hover { + color: var(--secondary-color); +} + +.footer a:hover::after { + transform: scaleX(1); + transform-origin: bottom left; +} + +/* Common Media Queries */ +@media (max-width: 768px) { + .container { + padding: 20px 15px; + } + + h1 { + font-size: 36px; + } + + button { + font-size: 16px; + } +} + +@media (max-width: 480px) { + h1 { + font-size: 28px; + } + + .container { + padding: 15px 10px; + } +}
\ No newline at end of file |