diff --git a/components/form.html b/components/form.html index 0454713..c4098ac 100644 --- a/components/form.html +++ b/components/form.html @@ -1,73 +1,78 @@ - - - Contact — APS_X + + + Form Component - - +
+
+

Contact Form

+

Fill out the form below

+
-
-
-
-

Contact Us

-

Have questions, feedback or an idea? Send us a message and our team will get back to you soon. We aim to reply within 2 business days.

+
+
+ + +
-

Prefer email? Write to sample@example.com

+
+ + +
-
-

Office: 1212344556

+
+ +
- -
-
- - -
+
+ + +
-
- - +
+ +
+
+ + +
+
+ + +
+
+ +
+
-
- - -
- -
- - -
+
+ + +
-
- We don't spam — your info is safe. - +
+
+
+ + +
- -
-
+
+ + + \ No newline at end of file diff --git a/index.html b/index.html index 6402a1d..5297642 100644 --- a/index.html +++ b/index.html @@ -1,179 +1,156 @@ - - - - Hacktoberfest CSS Playground - - - - - - - -
-
- - - - - -
- + + + + Hacktoberfest CSS Playground + + + + + +
+
+ + + + +
- - -
-

🎉 Hacktoberfest CSS Playground 🎉

-

- Explore awesome components built with HTML & CSS! -

-
-
-
-

Sample Component

- -
-
- -
- - - -
-

Hacktoberfest

-

This card looks good in both light and dark themes.

+
-
- -
-
- - - - - - - + - - - + }); + })(); + + + \ No newline at end of file diff --git a/style.css b/style.css index 0e5ad58..f3c349e 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,6 @@ +@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Sans+Pro:wght@300;400;600;700&display=swap"); @import url("./css/variables.css"); -/* --- Color Palettes --- */ + :root { --background-color: #f9f9f9; --surface-color: #fff; @@ -12,7 +13,6 @@ --radius-main: 16px; } -/* Sunset Palette */ body.palette-sunset { --background-color: #db8030; --surface-color: #e19915; @@ -24,7 +24,6 @@ body.palette-sunset { --shadow-color: rgba(255, 111, 97, 0.15); } -/* Ocean Palette */ body.palette-ocean { --background-color: #4fcedf; --surface-color: #b2ebf2; @@ -33,13 +32,12 @@ body.palette-ocean { --accent-color: #26c6da; --text-color: #002f52; --primary-contrast: #6f8add; - --radius-main: 26px; /* Updated to use the canonical value */ + --radius-main: 26px; } -/* Forest Palette */ body.palette-forest { --background-color: #81ed56; - border-radius: var(--radius); /* Updated to use the project's radius variable */ + border-radius: var(--radius); --primary-color: #388e3c; --secondary-color: #43a047; --accent-color: #8bc34a; @@ -48,11 +46,10 @@ body.palette-forest { --shadow-color: rgba(56, 142, 60, 0.15); } -/* Lavender Palette */ body.palette-lavender { --background-color: #7f55ab; --surface-color: #e1bee7; - border-radius: var(--radius-sm); /* Updated to use the project's radius variable */ + border-radius: var(--radius-sm); --secondary-color: #ba68c8; --accent-color: #ce93d8; --text-color: #4a148c; @@ -60,12 +57,10 @@ body.palette-lavender { --shadow-color: rgba(142, 36, 170, 0.15); } - border-radius: var(--radius); /* Updated to use the project's radius variable */ body.palette-dark, body.dark-theme { --background-color: #181a2a; --surface-color: #23263a; - /* --radius-main is defined in css/variables.css (canonical). */ --secondary-color: #667eea; --accent-color: #f9a826; --text-color: #f3f3f3; @@ -73,7 +68,6 @@ body.dark-theme { --shadow-color: rgba(0,0,0,0.5); } - border-radius: var(--radius-main); /* Updated to use the project's radius variable */ @media (prefers-color-scheme: dark) { :root { --background-color: #181a2a; @@ -87,7 +81,16 @@ body.dark-theme { } } -/* --- Base Styles --- */ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + scroll-behavior: smooth; +} + body { font-family: 'Source Sans Pro', Arial, sans-serif; background: var(--background-color); @@ -95,100 +98,72 @@ body { margin: 0; padding: 0; transition: background 0.3s, color 0.3s; -} - -/* Header - palette-aware using CSS variables */ -header { - background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); - color: var(--primary-contrast); - padding: 3rem 1rem; text-align: center; - border-radius: 0 0 var(--radius-main) var(--radius-main); + background: linear-gradient(120deg, #a6c4d3 0%, #0d205c 100%); + line-height: 1.6; + font-size: 1.1rem; } -/* Improve header legibility on darker surfaces */ -body.palette-dark header, -body.dark-theme header { - color: var(--primary-contrast); - text-shadow: 0 2px 8px rgba(0,0,0,0.45); +body.dark-theme { + background-color: #2cb3bc; + color: #eeeeee; } -@media (max-width: 600px) { - header { padding: 2rem 1rem; } +h1, h2, h3, h4, h5, h6 { + font-family: "Playfair Display", serif; + color: #2c3e50; + line-height: 1.2; + margin-bottom: 0.75rem; + font-weight: 700; + letter-spacing: 0.5px; } -/* Palette-specific header fine-tuning */ -body.palette-ocean header { - /* subtle darker overlay for ocean */ - background: linear-gradient(135deg, #0d8fae, #26c6da); - color: #fff; -} -body.palette-forest header { - background: linear-gradient(135deg, #2e7d32, #66bb6a); - color: #fff; +h1 { + font-size: 3rem; + font-weight: 900; + margin: 0; } -body.palette-sunset header { - background: linear-gradient(135deg, #ff6f61, #ffb347); - color: #fff; + +h2 { + font-size: 2.5rem; + font-weight: 700; } -body.palette-lavender header { - background: linear-gradient(135deg, #8e24aa, #ba68c8); - color: #fff; + +h3 { + font-size: 2rem; + font-weight: 700; } -/* Theme toggle (moon/star) alignment and visual styles */ -#theme-toggle, -.theme-toggle-btn { - padding: 6px 10px; - font-size: 0.95rem; - line-height: 1; - background: rgba(255,255,255,0.06); - color: var(--primary-contrast); - border: 1px solid rgba(255,255,255,0.06); - border-radius: var(--radius-pill); - cursor: pointer; - box-shadow: 0 4px 12px rgba(0,0,0,0.12); - transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease; - display: inline-flex; - align-items: center; - gap: 6px; +a { + color: #0056b3; + text-decoration: underline; + font-weight: 600; } -#theme-toggle:focus, -.theme-toggle-btn:focus { - outline: none; - box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 3px rgba(98,0,234,0.08); +a:visited { + color: #003366; } -#theme-toggle:hover, -.theme-toggle-btn:hover { - transform: translateY(-2px) scale(1.03); - background: rgba(255,255,255,0.09); +a:hover, a:focus { + color: #ff9800; + background: #222; + outline: 2px solid #ff9800; } -/* Per-palette tint on the toggle for visual cohesion */ -body.palette-ocean #theme-toggle, -body.palette-ocean .theme-toggle-btn { background: rgba(3,155,229,0.12); box-shadow: 0 6px 18px rgba(3,155,229,0.12); } -body.palette-forest #theme-toggle, -body.palette-forest .theme-toggle-btn { background: rgba(56,142,60,0.12); box-shadow: 0 6px 18px rgba(56,142,60,0.12); } -body.palette-sunset #theme-toggle, -body.palette-sunset .theme-toggle-btn { background: rgba(255,111,97,0.12); box-shadow: 0 6px 18px rgba(255,111,97,0.12); } -body.palette-lavender #theme-toggle, -body.palette-lavender .theme-toggle-btn { background: rgba(142,36,170,0.12); box-shadow: 0 6px 18px rgba(142,36,170,0.12); } -body.palette-dark #theme-toggle, -body.dark-theme #theme-toggle, -body.palette-dark .theme-toggle-btn, -body.dark-theme .theme-toggle-btn { background: rgba(255,255,255,0.06); color: var(--primary-contrast); box-shadow: 0 6px 18px rgba(0,0,0,0.45); } +.topbar { + width: 100%; + background: rgba(0,0,0,0.03); + padding: 0.35rem 1rem; + display: flex; + justify-content: center; + align-items: center; +} -/* Ensure toggle doesn't cover mobile nav icon by shifting when viewport small */ -@media (max-width: 600px) { - .topbar { padding: 0.25rem 0.5rem; } - .palette-controls { gap: 0.35rem; } - #theme-toggle, .theme-toggle-btn { padding: 5px 8px; font-size: 0.9rem; } +.topbar .palette-controls { + width: auto; + justify-content: center; } -/* Palette controls in header */ -/* palette-controls are styled inside the navbar section */ .palette-btn { appearance: none; -webkit-appearance: none; @@ -202,335 +177,245 @@ body.dark-theme .theme-toggle-btn { background: rgba(255,255,255,0.06); color: v box-shadow: 0 4px 12px rgba(0,0,0,0.12); transition: transform 0.12s ease, background 0.12s ease, box-shadow 0.12s ease; } -.palette-btn:hover { transform: translateY(-2px); } -.palette-btn:focus { outline: none; box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 0 0 3px rgba(98,0,234,0.06); } -/* per-button tinting to match the palette */ -.palette-btn:nth-child(1) { /* Ocean - light */ background: linear-gradient(90deg,#dff7fa,#bfeef6); color: #025b66; } -.palette-btn:nth-child(2) { /* Forest - light */ background: linear-gradient(90deg,#eaf9ea,#d6f0d6); color: #1b5e20; } -.palette-btn:nth-child(3) { /* Lavender - light */ background: linear-gradient(90deg,#f6eaff,#ecd9f7); color: #5b2a86; } -.palette-btn:nth-child(4) { /* Sunset - light */ background: linear-gradient(90deg,#fff0e6,#ffe1cc); color: #9c2d1f; } -.palette-btn:nth-child(5) { /* Dark - light */ background: linear-gradient(90deg,#f0f3f7,#e6e9ef); color: #212529; } +.palette-btn:hover { + transform: translateY(-2px); +} -/* Active state for palette button */ -.palette-btn.active { - box-shadow: 0 8px 22px rgba(0,0,0,0.28); - transform: translateY(-2px) scale(1.02); - outline: 2px solid rgba(255,255,255,0.08); +.palette-btn:focus { + outline: none; + box-shadow: 0 4px 12px rgba(0,0,0,0.22), 0 0 0 3px rgba(98,0,234,0.06); } -@media (max-width: 480px) { - .palette-controls { gap: 0.35rem; } - .palette-btn { padding: 5px 8px; font-size: 0.85rem; } +.palette-btn:nth-child(1) { + background: linear-gradient(90deg,#dff7fa,#bfeef6); + color: #025b66; } -/* Reserve space at the top of the page for controls so they don't overlap header text */ -header { padding-top: 4.5rem; } +.palette-btn:nth-child(2) { + background: linear-gradient(90deg,#eaf9ea,#d6f0d6); + color: #1b5e20; +} -main { - padding: 2rem; +.palette-btn:nth-child(3) { + background: linear-gradient(90deg,#f6eaff,#ecd9f7); + color: #5b2a86; } -.card { - background: var(--surface-color); - color: var(--text-color); - border-radius: var(--radius-main); - box-shadow: 0 2px 8px var(--shadow-color); - padding: 1.5rem; - margin: 2rem auto; - max-width: 350px; - width: 100%; - transition: background 0.3s, color 0.3s; +.palette-btn:nth-child(4) { + background: linear-gradient(90deg,#fff0e6,#ffe1cc); + color: #9c2d1f; } -.btn { - background: var(--secondary-color); - color: var(--primary-contrast); - border: none; - border-radius: var(--radius-main); +.palette-btn:nth-child(5) { + background: linear-gradient(90deg,#f0f3f7,#e6e9ef); + color: #212529; +} + +.palette-btn.active { + box-shadow: 0 8px 22px rgba(0,0,0,0.28); + transform: translateY(-2px) scale(1.02); + outline: 2px solid rgba(255,255,255,0.08); +} + +.navbar { + display: flex; + align-items: center; + justify-content: space-between; + background: var(--nav-bg-color); padding: 0.75rem 2rem; + box-shadow: 0 2px 8px var(--shadow-color); + position: relative; font-size: 1.1rem; - font-weight: 600; + flex-wrap: wrap; + gap: 0.25rem; +} + +.navbar.dark-theme { + background-color: #121212; + color: #f9f9f9; +} + +.mysite { + font-weight: bold; + color: var(--primary-color); + font-size: 1.5rem; + letter-spacing: 1px; cursor: pointer; - box-shadow: 0 2px 8px var(--shadow-color); - transition: background 0.2s, box-shadow 0.2s, transform 0.2s; + order: 1; + font-weight: 600; } -.btn:hover, -.btn:focus { - background: var(--primary-color); +.mysite:hover { color: var(--accent-color); - transform: translateY(-2px) scale(1.04); } -.modalBox { - background: var(--surface-color); +.nav_links { + list-style: none; + display: flex; + gap: 2rem; + margin: 0; + padding: 0.25rem; + background: transparent; + border-radius: calc(var(--radius-main) / 1.6); +} + +.nav_links li a { + text-decoration: none; color: var(--text-color); - border-radius: var(--radius-main); - box-shadow: 0 10px 25px var(--shadow-color); - padding: 1rem; - width: 300px; - margin: 2rem auto; - transition: background 0.3s, color 0.3s; + padding: 0.5rem 0.9rem; + border-radius: var(--radius-pill); + transition: background 0.18s, color 0.18s, transform 0.12s; + font-weight: 600; } -footer { - background: linear-gradient(120deg, var(--primary-color), var(--secondary-color)); +.nav_links li a:hover, +.nav_links li a:focus { + background: var(--primary-color); color: var(--primary-contrast); - padding: 2rem; - text-align: center; - border-radius: var(--radius-main) var(--radius-main) 0 0; + transform: translateY(-2px); } -/* Responsive */ -@media (max-width: 600px) { - .card, .modalBox { - max-width: 98vw; - padding: 1rem; - } - main { - padding: 1rem; - } +.nav_toggle { + display: none; } -/* Theme toggle button */ -.theme-toggle-btn { - position: fixed; - top: 10px; - right: 10px; - padding: 10px 20px; - background: var(--primary-color); - color: var(--primary-contrast); - border: none; - border-radius: var(--radius-main); +.nav_icon { + display: none; + flex-direction: column; cursor: pointer; - box-shadow: 0 4px 6px var(--shadow-color); - transition: background 0.3s; + width: 32px; + height: 28px; + justify-content: center; + gap: 5px; } -.theme-toggle-btn:hover { - background: var(--secondary-color); +.nav_icon span { + display: block; + height: 4px; + width: 100%; + background: var(--primary-color); + border-radius: 2px; + transition: 0.3s; } -/* Example for gallery items */ -.gallery-item { - background: var(--surface-color); - color: var(--text-color); - border-radius: var(--radius-main); - box-shadow: 0 2px 12px var(--shadow-color); - transition: box-shadow 0.2s, transform 0.2s; +.navbar .palette-controls { + display: inline-flex; } -html { - scroll-behavior: smooth; +header { + background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); + color: var(--primary-contrast); + padding: 4rem 2rem; + text-align: center; + border-radius: 0 0 var(--radius-main) var(--radius-main); + padding-top: 4.5rem; + border-radius: var(--radius-main); + overflow: hidden; } -/* Light / Dark theme fallbacks (kept from an embedded block) */ -/* Card uses project radius variable for consistency */ -.card { - padding: 1rem; - margin: 2rem auto; - width: 300px; - border-radius: var(--radius); - box-shadow: 0 2px 8px rgba(0,0,0,0.1); - background: #f5f5f5; -} - -@media (prefers-color-scheme: dark) { - body { - background-color: #29bbc9; - color: #eeeeee; - } - .card { - background: #239ccf; - box-shadow: 0 2px 8px rgba(255, 255, 255, 0.582); - } -} - -body.dark-theme { - background-color: #2cb3bc; - color: #eeeeee; -} -body.dark-theme .card { - background: #1a75ae; - box-shadow: 0 2px 8px rgba(255,255,255,0.1); +body.palette-dark header, +body.dark-theme header { + color: var(--primary-contrast); + text-shadow: 0 2px 8px rgba(0,0,0,0.45); } -.theme-toggle { - margin: 1rem; - padding: 0.5rem 1rem; - border: none; - border-radius: var(--radius-sm); - cursor: pointer; +body.palette-ocean header { + background: linear-gradient(135deg, #0d8fae, #26c6da); + color: #fff; } - -:root { - --radius-main: 26px; +body.palette-forest header { + background: linear-gradient(135deg, #2e7d32, #66bb6a); + color: #fff; } - -body { - font-family: var(--font-sans); - margin: 0; - padding: 0; - text-align: center; - background: var(--background-color); - color: var(--text-color); - background: linear-gradient(120deg, #a6c4d3 0%, #0d205c 100%); - color: #333; - } -html{ - scroll-behavior: smooth; -} -.navbar { - display: flex; - align-items: center; - justify-content: space-between; - background: var(--nav-bg-color); - padding: 0.75rem 2rem; - box-shadow: 0 2px 8px var(--shadow-color); - position: relative; - font-size: 1.1rem; +body.palette-sunset header { + background: linear-gradient(135deg, #ff6f61, #ffb347); + color: #fff; } -.mysite { - font-weight: bold; - color: var(--primary-color); - font-size: 1.4rem; - letter-spacing: 1px; - cursor:pointer; +body.palette-lavender header { + background: linear-gradient(135deg, #8e24aa, #ba68c8); + color: #fff; } -.mysite:hover{ - color: var(--accent-color); -} -.nav_links { - list-style: none; - display: flex; - gap: 2rem; - margin: 0; - padding: 0; +header p { + font-size: 1.25rem; + font-weight: 300; + margin-top: 1rem; } -.nav_links li a { - text-decoration: none; - color: var(--text-color); - padding: 0.5rem 1rem; - border-radius: var(--radius-lg); - transition: background 0.2s, color 0.2s; +main { + padding: 2rem; } -.nav_links li a:hover, -.nav_links li a:focus { - background: var(--primary-color); - color: var(--primary-contrast); +section h2 { + margin-bottom: 1.5rem; } -.nav_toggle { - display: none; +iframe { + width: 80%; + height: 300px; + border: 1px solid #ccc; + border-radius: var(--radius); } -.nav_icon { - display: none; - flex-direction: column; - cursor: pointer; - width: 32px; - height: 28px; - justify-content: center; - gap: 5px; +.price-table { + border-top: 50px; } -.nav_icon span { - display: block; - height: 4px; +.card { + background: var(--surface-color); + color: var(--text-color); + border-radius: var(--radius-main); + box-shadow: 0 2px 8px var(--shadow-color); + padding: 1.5rem; + margin: 2rem auto; + max-width: 350px; width: 100%; - background: var(--primary-color); - border-radius: 2px; - transition: 0.3s; -} -.price-table{ - border-top: 50px; + transition: background 0.3s, color 0.3s; } -@media (max-width: 800px) { - .navbar { - padding: 0.75rem 1rem; +@media (prefers-color-scheme: dark) { + body { + background-color: #29bbc9; + color: #eeeeee; } - .navbar-links { - gap: 1rem; + .card { + background: #239ccf; + box-shadow: 0 2px 8px rgba(255, 255, 255, 0.582); } } -@media (max-width: 600px) { - .navbar { - flex-wrap: wrap; - padding: 0.75rem 1rem; - } - .nav_icon { - display: flex; - margin-left: auto; - } - .nav_links { - flex-direction: column; - width: 100%; - position: absolute; - top: 100%; - left: 0; - background: #fff; - box-shadow: 0 4px 16px rgba(98,0,234,0.08); - max-height: 0; - overflow: hidden; - transition: max-height 0.3s; - z-index: 10; - } - .nav_links li { - text-align: left; - margin: 0.5rem 0; - } - .nav_toggle:checked ~ .nav_links { - max-height: 300px; - padding-bottom: 0.5rem; - } +body.dark-theme .card { + background: #1a75ae; + box-shadow: 0 2px 8px rgba(255,255,255,0.1); } -/* (other header variants removed in favor of palette-driven header above) */ - - h1 { - margin: 0; - } - - main { - padding: 2rem; - } - - iframe { - width: 80%; - height: 300px; - border: 1px solid #ccc; - border-radius: var(--radius); - } - - .btn_container { +.btn_container { display: flex; justify-content: center; align-items: center; height: 100%; min-height: 200px; border-radius: var(--radius-main); + text-align: center; + margin: 2rem 0; } .btn { - padding: 0.75rem 2rem; - font-size: 1.1rem; - font-weight: 600; - color: var(--primary-contrast); background: var(--secondary-color); + color: var(--primary-contrast); border: none; -border-radius: var(--radius-main); - box-shadow: 0 2px 8px rgba(3, 218, 198, 0.15); + border-radius: var(--radius-main); + padding: 0.75rem 2rem; + font-size: 1.1rem; + font-weight: 700; cursor: pointer; + box-shadow: 0 2px 8px rgba(3, 218, 198, 0.15); transition: background 0.2s, box-shadow 0.2s, transform 0.2s; + font-family: "Source Sans Pro", sans-serif; } .btn:hover, @@ -539,6 +424,7 @@ border-radius: var(--radius-main); box-shadow: 0 6px 24px rgba(3, 218, 198, 0.25); transform: translateY(-2px) scale(1.04); outline: none; + color: var(--accent-color); } .btn:active { @@ -547,82 +433,81 @@ border-radius: var(--radius-main); transform: translateY(1px) scale(0.98); } -@media (max-width: 600px) { - .btn { - width: 90%; - font-size: 1rem; - padding: 0.75rem 0; - } - .btn_container { - min-height: 120px; - border-radius: var(--radius-main); - } -} -@media (max-width: 600px) { - main { - padding: 1rem; - margin: 1rem 0; - } - .card, .typewriter-card { - padding: 1rem; - } -} - -.modalBox{ +.modalBox { + background: var(--surface-color); + color: var(--text-color); + border-radius: var(--radius-main); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25); + padding: 5px; + width: 300px; + height: 200px; + margin: 2rem auto; position: absolute; left: 600px; - bottom:250px; + bottom: 250px; display: none; flex-direction: column; justify-content: space-between; - padding: 5px; -border-radius: var(--radius-main); - width: 300px; - height: 200px; background-color: rgb(255, 255, 255); transition: all 0.05s ease-in; margin: 5px 0; } -.modalBox:target{ +.modalBox:target { display: flex; } -.modalBox:hover{ +.modalBox:hover { scale: 1.01; - } -.modalBox hr{ + +.modalBox hr { color: white; } -.modalBox .modalTitle{ +.modalBox .modalTitle { padding: 2px; - font-family:Playfair Display; + font-family: Playfair Display; font-size: 20px; font-weight: 700; color: rgba(0, 0, 0, 0.759); border-radius: var(--radius-main); - } - -.modalBox .modalContent{ +.modalBox .modalContent { font-size: 16px; padding: 5px; } - - -.modalBox p a{ +.modalBox p a { color: rgb(211, 84, 84); text-decoration: none; } -.modalBox p a:hover{ +.modalBox p a:hover { color: rgb(255, 0, 0); } + +.typewriter-card { + text-align: center; + padding: 2rem; +} + +.typewriter-text { + overflow: hidden; + border-right: .15em solid var(--primary-color); + white-space: nowrap; + margin: 0 auto; + letter-spacing: 2px; + display: inline-block; + animation: typing 4s steps(60, end), blink-cursor 0.75s step-end infinite; +} + +@keyframes blink-cursor { + from, to { border-color: transparent } + 50% { border-color: var(--primary-color); } +} + .flip-card { background: transparent; width: 320px; @@ -674,299 +559,98 @@ border-radius: var(--radius-main); transform: rotateY(180deg); } -/* Responsive */ -@media (max-width: 500px) { - .flip-card { - width: 98vw; - height: 160px; - } - .flip-card-front, - .flip-card-back { - font-size: 1rem; - padding: 1rem; - } +.theme-toggle { + margin: 1rem; + padding: 0.5rem 1rem; + border: none; + border-radius: 5px; + cursor: pointer; } -footer { - - background: var(--footer-bg-color); - color: var(--primary-contrast); - padding: 1rem; - margin-top: 2rem; - - } - - footer a{ - color: rgba(220, 219, 219, 0.595); - text-decoration: none; - } - - footer a:hover{ - color: white; - } - -.linkToFest{ - margin-left:12px ; - font-size: 18px; - color: var(--border-color); - text-align: left; - - } - - .linkToFest span{ - font-size: 20px; - } - -.linkToFest span a{ - color: var(--accent-color); - } - - .linkToFest span a:hover{ - color: var(--primary-color); - } - - .footerMiddle{ - display: flex; - } - - .linkToSocials{ - width: 300px; - text-align: left; - - - } - - .linkToSocials > p{ - - padding-left: 12px; - color: #ccc; - } - - .linkToSocials ul{ - margin: 8px 0; - padding-left: 10px; - list-style-type: none; - } - - .linkToSocials ul li{ - padding: 2px; - } - - .contactUs{ - width: 300px; - text-align: left; - margin-right: 1rem; - - } - - .contactUs > p{ - padding-left: 12px; - color: #ccc; - } - - .contactUs ul{ - padding-left: 10px; - margin: 8px 0; - list-style-type: none; - } - - .contactUs ul li{ - padding:2px; - color: rgba(220, 219, 219, 0.595); - } - - @media screen and (max-width: 600px) { - - .modalBox{ - left: 50px; - bottom: 50px; - } - footer { - margin-bottom: 50px; - } - .footerMiddle{ - flex-direction: column; - } - -} - -/* Google Fonts Import (alternative if not using HTML link) */ -@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700;900&family=Source+Sans+Pro:wght@300;400;600;700&display=swap"); - -/* Reset */ -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -/* Base Typography */ -body, .navbar a, .btn, p, li { - font-family: "Source Sans Pro", Arial, sans-serif; - color: #333; - line-height: 1.6; -} - -/* Headings */ -h1, h2, h3, h4, h5, h6 { - font-family: "Playfair Display", serif; - color: #2c3e50; - line-height: 1.2; - margin-bottom: 0.75rem; -} - -h1 { - font-size: 3rem; - font-weight: 900; -} - -h2 { - font-size: 2.5rem; - font-weight: 700; -} - -h3 { - font-size: 2rem; - font-weight: 700; -} - -/* Navbar */ -.navbar { - display: flex; - align-items: center; - justify-content: space-between; - background: #f8f9fa; - padding: 1rem 2rem; - border-radius: var(--radius-main); -} - -/* Round the nav links container and give links a pill appearance */ -.nav_links { - background: transparent; - padding: 0.25rem; - border-radius: calc(var(--radius-main) / 1.6); -} -.nav_links li a { - padding: 0.5rem 0.9rem; - border-radius: var(--radius-pill); - transition: background 0.18s, color 0.18s, transform 0.12s; -} -.nav_links li a:hover { - transform: translateY(-2px); -} - -/* Round the header bar that contains title and subtitle */ -header { +#theme-toggle, +.theme-toggle-btn { + position: fixed; + top: 10px; + right: 10px; + padding: 10px 20px; + background: var(--primary-color); + color: var(--primary-contrast); + border: none; border-radius: var(--radius-main); - overflow: hidden; -} - -/* Place palette controls inside the navbar */ -.navbar .mysite { order: 1; } - -/* Default: palette controls occupy their own row above the nav links so they don't overlap */ -.navbar { flex-wrap: wrap; gap: 0.25rem; } -/* keep nav-specific palette rule minimal in case of duplication */ -.navbar .palette-controls { display: inline-flex; } - -/* On wider screens, keep palette controls inline next to brand */ -@media (min-width: 900px) { - .navbar { flex-wrap: nowrap; } - .navbar .mysite { margin-right: 1rem; } -} - -/* Topbar - separate strip above navbar for palette controls */ -.topbar { - width: 100%; - background: rgba(0,0,0,0.03); - padding: 0.35rem 1rem; - display: flex; - justify-content: center; + cursor: pointer; + box-shadow: 0 4px 12px rgba(0,0,0,0.12); + transition: transform 0.12s ease, background 0.18s ease, box-shadow 0.18s ease; + display: inline-flex; align-items: center; -} -.topbar .palette-controls { width: auto; justify-content: center; } - -@media (max-width: 480px) { - .topbar { padding: 0.25rem 0.5rem; } - .palette-btn { padding: 5px 8px; } + gap: 6px; + font-size: 0.95rem; + line-height: 1; } -.mysite { - font-size: 1.5rem; - font-weight: 600; +#theme-toggle:focus, +.theme-toggle-btn:focus { + outline: none; + box-shadow: 0 6px 18px rgba(0,0,0,0.28), 0 0 0 3px rgba(98,0,234,0.08); } -/* Nav Links */ -.nav_links { - list-style: none; - display: flex; - gap: 1.5rem; +#theme-toggle:hover, +.theme-toggle-btn:hover { + transform: translateY(-2px) scale(1.03); + background: var(--secondary-color); } -.nav_links a { - text-decoration: none; - font-weight: 600; - transition: color 0.3s; +body.palette-ocean #theme-toggle, +body.palette-ocean .theme-toggle-btn { + background: rgba(3,155,229,0.12); + box-shadow: 0 6px 18px rgba(3,155,229,0.12); } -.nav_links a:hover { - color: #007bff; +body.palette-forest #theme-toggle, +body.palette-forest .theme-toggle-btn { + background: rgba(56,142,60,0.12); + box-shadow: 0 6px 18px rgba(56,142,60,0.12); } -/* single header block above handles palette variations via the CSS variables declared at :root and palette classes */ - -header p { - font-size: 1.25rem; - font-weight: 300; - margin-top: 1rem; +body.palette-sunset #theme-toggle, +body.palette-sunset .theme-toggle-btn { + background: rgba(255,111,97,0.12); + box-shadow: 0 6px 18px rgba(255,111,97,0.12); } -/* Main Content */ -main { - padding: 2rem; - background: linear-gradient(120deg, #d7d6dc 0%, #28514f 100%); - border-radius: var(--radius-main); - box-shadow: 0 2px 12px var(--shadow-color); - margin: 2rem auto; - padding: 2rem; - max-width: 1200px; +body.palette-lavender #theme-toggle, +body.palette-lavender .theme-toggle-btn { + background: rgba(142,36,170,0.12); + box-shadow: 0 6px 18px rgba(142,36,170,0.12); } -section h2 { - margin-bottom: 1.5rem; +body.palette-dark #theme-toggle, +body.dark-theme #theme-toggle, +body.palette-dark .theme-toggle-btn, +body.dark-theme .theme-toggle-btn { + background: rgba(255,255,255,0.06); + color: var(--primary-contrast); + box-shadow: 0 6px 18px rgba(0,0,0,0.45); } -/* Button */ -.btn_container { +footer { + background: linear-gradient(120deg, var(--primary-color), var(--secondary-color)); + color: var(--primary-contrast); + padding: 2rem 1rem; text-align: center; - margin: 2rem 0; -} - -.btn { - font-family: "Source Sans Pro", sans-serif; - font-size: 1rem; - font-weight: 600; - padding: 0.75rem 1.5rem; - background: #007bff; - color: #fff; - border: none; -border-radius: var(--radius-main); - cursor: pointer; - transition: background 0.3s; + border-radius: var(--radius-main) var(--radius-main) 0 0; + font-size: 0.9rem; } -.btn:hover { - background: #0056b3; +footer a { + color: rgba(220, 219, 219, 0.595); + text-decoration: none; + transition: color 0.3s; } -/* Footer (centralized, responsive, variable-driven) */ -footer { - background: linear-gradient(120deg, rgba(0,0,0,0.08), rgba(0,0,0,0.02)), var(--footer-bg-color); - color: var(--primary-contrast); - padding: 2rem 1rem; +footer a:hover { + color: white; } -/* inner wrapper to constrain width */ .footerInner { max-width: 1200px; margin: 0 auto; @@ -985,11 +669,19 @@ footer { margin-bottom: 0.5rem; text-align: center; } + +.linkToFest span { + font-size: 20px; +} + .linkToFest .mainLink a { color: var(--accent-color); text-decoration: none; } -.linkToFest .mainLink a:hover { color: var(--primary-color); } + +.linkToFest .mainLink a:hover { + color: var(--primary-color); +} .footerMiddle { display: flex; @@ -997,6 +689,7 @@ footer { gap: 2rem; flex-wrap: wrap; align-items: flex-start; + margin: 1.5rem 0; } .footerMiddle > div { @@ -1004,268 +697,353 @@ footer { min-width: 200px; } -.linkToSocials, .contactUs { - padding: 0 0.5rem; -} - -.linkToSocials > p, .contactUs > p { +.footerMiddle p { font-weight: 700; color: var(--primary-contrast); margin-bottom: 0.5rem; + padding-left: 12px; } -.linkToSocials ul, .contactUs ul { list-style: none; padding: 0; margin: 0; } -.linkToSocials li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; } -.linkToSocials img { width: 20px; height: 20px; object-fit: cover; border-radius: var(--radius-sm); } - -.footerMiddle a { color: var(--primary-contrast); text-decoration: none; } -.footerMiddle a:hover { color: var(--accent-color); text-decoration: underline; } - -.footerBottom { - text-align: center; - margin-top: 1rem; - font-size: 0.95rem; - color: rgba(255,255,255,0.9); -} - -/* Responsive footer */ -@media (max-width: 768px) { - .footerMiddle { flex-direction: column; align-items: center; } - .footerMiddle > div { width: 100%; max-width: 420px; } - .linkToFest { text-align: center; } -} -/* Progress bar component (responsive, CSS-only animation) */ - -.progress-bar { - --height: 12px; - --radius: 999px; - --bg: rgba(0,0,0,0.08); - --fill: linear-gradient(90deg, #4f46e5, #06b6d4); /* purple -> teal */ - --duration: 1.6s; - - width: 100%; - max-width: 720px; /* container limit; adjust as needed */ - margin: 0.75rem 0; - box-sizing: border-box; - font-family: inherit; +.footerMiddle ul { + list-style: none; + padding: 0; + margin: 0; + padding-left: 10px; + margin-top: 0.5rem; } -.progress-meta { +.footerMiddle li { display: flex; - justify-content: space-between; align-items: center; - margin-bottom: 0.45rem; gap: 0.5rem; + margin-bottom: 0.4rem; + padding: 2px; } -.progress-title { - font-size: 0.95rem; - font-weight: 600; - color: #111827; +.footerMiddle a { + color: var(--primary-contrast); + text-decoration: none; + transition: color 0.3s; } -.progress-percent { - font-size: 0.9rem; - color: #374151; - min-width: 3.2ch; - text-align: right; +.footerMiddle a:hover { + color: var(--accent-color); + text-decoration: underline; } -/* Track */ -.progress-track { - width: 100%; - background: var(--bg); - border-radius: var(--radius); - overflow: hidden; - height: var(--height); - box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); +.linkToSocials, +.contactUs { + width: 300px; + text-align: left; + padding: 0 0.5rem; } -/* Fill */ -.progress-fill { - height: 100%; - width: 0%; /* starts from 0 and animates to --value */ - background: var(--fill); - border-radius: var(--radius); - transform-origin: left center; - - /* animation from 0 -> var(--value) */ - animation: fillToVar var(--duration) cubic-bezier(.2,.9,.2,1) forwards; +.linkToSocials img { + width: 20px; + height: 20px; + object-fit: cover; + border-radius: var(--radius-sm); } -/* Keyframes: animate width to the CSS property value */ -@keyframes fillToVar { - from { width: 0%; } - to { width: calc(var(--value, 0) * 1%); } +.contactUs { + margin-right: 1rem; } -/* Make percent text reflect same animation visually (optional): fade-in */ -.progress-percent { - opacity: 0; - animation: percentFade 0.6s ease forwards; - animation-delay: calc(var(--duration) - 0.5s); +.contactUs ul li { + color: rgba(220, 219, 219, 0.595); } -@keyframes percentFade { to { opacity: 1; } } -/* Accessibility / reduced motion */ -@media (prefers-reduced-motion: reduce) { - .progress-fill { animation: none; width: calc(var(--value, 0) * 1%); } - .progress-percent { animation: none; opacity: 1; } +.footerBottom { + text-align: center; + margin-top: 1rem; + font-size: 0.95rem; + color: rgba(255,255,255,0.9); } -/* Responsive tweaks */ -@media (max-width: 480px) { - .progress-bar { max-width: 100%; } - .progress-title { font-size: 0.9rem; } - .progress-percent { font-size: 0.85rem; } - .progress-bar { --height: 10px; } -} -/* --- Sliding Menu --- */ .menu-toggle { - display: none; + display: none; } .menu-btn { - font-size: 2rem; - cursor: pointer; - position: fixed; - top: 1rem; - left: 1rem; - z-index: 1001; - background-color: var(--accent-color); - color: #222; - padding: 0.5rem 1rem; - border-radius: var(--radius-main); + font-size: 2rem; + cursor: pointer; + position: fixed; + top: 1rem; + left: 1rem; + z-index: 1001; + background-color: var(--accent-color); + color: #222; + padding: 0.5rem 1rem; + border-radius: var(--radius-main); +} .sliding-menu { - position: fixed; - top: 0; - left: -250px; /* hidden by default */ - width: 250px; - height: 100%; - background-color: var(--surface-2-color); - box-shadow: 2px 0 10px var(--shadow-color); - transition: left 0.3s ease; - padding-top: 4rem; - z-index: 1000; - border-radius: var(--radius-main); + position: fixed; + top: 0; + left: -250px; + width: 250px; + height: 100%; + background-color: var(--surface-2-color); + box-shadow: 2px 0 10px var(--shadow-color); + transition: left 0.3s ease; + padding-top: 4rem; + z-index: 1000; + border-radius: var(--radius-main); } .sliding-menu ul { - list-style: none; - padding: 0; + list-style: none; + padding: 0; } .sliding-menu li { - margin: 1rem 0; + margin: 1rem 0; } .sliding-menu a { - text-decoration: none; - color: var(--secondary-dark); - font-weight: 600; - padding: 0.5rem 1rem; - display: block; - transition: background-color 0.2s; + text-decoration: none; + color: var(--secondary-dark); + font-weight: 600; + padding: 0.5rem 1rem; + display: block; + transition: background-color 0.2s; } .sliding-menu a:hover { - background-color: var(--primary-color); - color: white; - border-radius: var(--radius-main); + background-color: var(--primary-color); + color: white; + border-radius: var(--radius-main); } -/* Toggle menu */ .menu-toggle:checked ~ .sliding-menu { - left: 0; + left: 0; } -/* Push content when menu opens */ .menu-toggle:checked ~ .content { - margin-left: 250px; - transition: margin-left 0.3s ease; + margin-left: 250px; + transition: margin-left 0.3s ease; } -/* Content area */ .content { - padding: 2rem; + padding: 2rem; + background: linear-gradient(120deg, #d7d6dc 0%, #28514f 100%); + border-radius: var(--radius-main); + box-shadow: 0 2px 12px var(--shadow-color); + margin: 2rem auto; + max-width: 1200px; } -/* Responsive adjustments */ -@media (max-width: 768px) { - .menu-btn { - font-size: 1.5rem; - padding: 0.3rem 0.8rem; - } - .sliding-menu { - width: 200px; - left: -200px; - } - .menu-toggle:checked ~ .content { - margin-left: 200px; - } -} -/* --- Typewriter Effect --- */ .typewriter-container { - display: flex; - justify-content: center; - align-items: center; - height: 100vh; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } .typewriter { - font-family: 'Poppins', sans-serif; - font-size: 2rem; - border-right: 3px solid var(--primary-color); /* use your primary color */ - white-space: nowrap; - overflow: hidden; - width: 22ch; /* adjust to text length */ - animation: typing 4s steps(22), blink 0.75s step-end infinite; + font-family: 'Poppins', sans-serif; + font-size: 2rem; + border-right: 3px solid #6200ea; + white-space: nowrap; + overflow: hidden; + width: 22ch; + animation: typing 4s steps(22), blink 0.75s step-end infinite; } @keyframes typing { - from { width: 0; } - to { width: 22ch; } + from { width: 0; } + to { width: 22ch; } +} + +@keyframes blink { + 50% { border-color: transparent; } +} + +.form-container { + background: #fff; + border-radius: 16px; + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15); + padding: 2.5rem; + width: 100%; + max-width: 600px; + margin: 2rem auto; +} + +.form-header { + text-align: center; + margin-bottom: 2rem; +} + +.form-header h2 { + font-family: "Playfair Display", serif; + color: #6200ea; + font-size: 2rem; + margin-bottom: 0.5rem; +} + +.form-header p { + color: #666; + font-size: 1rem; +} + +.form-group { + margin-bottom: 1.5rem; +} + +.form-label { + display: block; + font-weight: 600; + color: #333; + margin-bottom: 0.5rem; + font-size: 0.95rem; + text-align: left; +} + +.form-input, +.form-select, +.form-textarea { + width: 100%; + padding: 0.875rem 1rem; + border: 2px solid #e0e0e0; + border-radius: 8px; + font-size: 1rem; + font-family: "Source Sans Pro", Arial, sans-serif; + transition: border-color 0.3s, box-shadow 0.3s; + background: #fafafa; +} + +.form-input:focus, +.form-select:focus, +.form-textarea:focus { + outline: none; + border-color: #6200ea; + background: #fff; + box-shadow: 0 0 0 3px rgba(98, 0, 234, 0.1); +} + +.form-textarea { + resize: vertical; + min-height: 120px; +} + +.form-radio-group, +.form-checkbox-group { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 0.5rem; +} + +.form-radio-item, +.form-checkbox-item { + display: flex; + align-items: center; + gap: 0.5rem; +} + +.form-radio-input, +.form-checkbox-input { + width: 18px; + height: 18px; + cursor: pointer; + accent-color: #6200ea; +} + +.form-radio-label, +.form-checkbox-label { + cursor: pointer; + font-size: 0.95rem; + color: #555; +} + +.form-submit-btn { + width: 100%; + padding: 1rem 2rem; + background: linear-gradient(135deg, #6200ea, #764ba2); + color: #fff; + border: none; + border-radius: 50px; + font-size: 1.1rem; + font-weight: 600; + cursor: pointer; + transition: transform 0.2s, box-shadow 0.3s; + box-shadow: 0 4px 15px rgba(98, 0, 234, 0.3); + margin-top: 1rem; +} + +.form-submit-btn:hover { + transform: translateY(-2px); + box-shadow: 0 6px 25px rgba(98, 0, 234, 0.4); +} + +.form-submit-btn:active { + transform: translateY(0); + box-shadow: 0 2px 10px rgba(98, 0, 234, 0.3); +} + +.progress-bar { + --height: 12px; + --radius: 999px; + --bg: rgba(0,0,0,0.08); + --fill: linear-gradient(90deg, #4f46e5, #06b6d4); + --duration: 1.6s; + width: 100%; + max-width: 720px; + margin: 0.75rem 0; + box-sizing: border-box; + font-family: inherit; +} + +.progress-meta { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 0.45rem; + gap: 0.5rem; } -@keyframes blink { - 50% { border-color: transparent; } -} -/* --- Typewriter Effect for paragraph --- */ -.typewriter-card { - text-align: center; - padding: 2rem; +.progress-title { + font-size: 0.95rem; + font-weight: 600; + color: #111827; } -.typewriter-text { - overflow: hidden; - border-right: .15em solid var(--primary-color); - white-space: nowrap; - margin: 0 auto; - letter-spacing: 2px; - display: inline-block; - animation: typing 4s steps(60, end), blink-cursor 0.75s step-end infinite; +.progress-percent { + font-size: 0.9rem; + color: #374151; + min-width: 3.2ch; + text-align: right; + opacity: 0; + animation: percentFade 0.6s ease forwards; + animation-delay: calc(var(--duration) - 0.5s); } -@keyframes typing { - from { width: 0 } - to { width: 100% } +.progress-track { + width: 100%; + background: var(--bg); + border-radius: var(--radius); + overflow: hidden; + height: var(--height); + box-shadow: inset 0 1px 2px rgba(0,0,0,0.04); } -@keyframes blink-cursor { - from, to { border-color: transparent } - 50% { border-color: var(--primary-color); } +.progress-fill { + height: 100%; + width: 0%; + background: var(--fill); + border-radius: var(--radius); + transform-origin: left center; + animation: fillToVar var(--duration) cubic-bezier(.2,.9,.2,1) forwards; } -/* Responsive for smaller screens */ -@media (max-width: 992px) { - .typewriter-text { - font-size: 1rem; - } +@keyframes fillToVar { + from { width: 0%; } + to { width: calc(var(--value, 0) * 1%); } } - - +@keyframes percentFade { + to { opacity: 1; } +} .fade-in { opacity: 0; @@ -1275,7 +1053,6 @@ footer { animation-range: entry 0% cover 40%; } -/* Keyframes for fade-in */ @keyframes fadeInUp { from { opacity: 0; @@ -1285,7 +1062,6 @@ footer { opacity: 1; transform: translateY(0); } - } .image-gallery { @@ -1326,6 +1102,22 @@ footer { filter: brightness(0.95) saturate(1.2); } +@media (prefers-reduced-motion: reduce) { + .progress-fill { animation: none; width: calc(var(--value, 0) * 1%); } + .progress-percent { animation: none; opacity: 1; } +} + +@media (min-width: 900px) { + .navbar { flex-wrap: nowrap; } + .navbar .mysite { margin-right: 1rem; } +} + +@media (max-width: 992px) { + .typewriter-text { + font-size: 1rem; + } +} + @media (max-width: 900px) { .image-gallery { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); @@ -1336,7 +1128,125 @@ footer { } } +@media (max-width: 800px) { + .navbar { + padding: 0.75rem 1rem; + } + .navbar-links { + gap: 1rem; + } +} + +@media (max-width: 768px) { + .navbar { + flex-direction: column; + gap: 1rem; + } + .footerMiddle { + flex-direction: column; + gap: 1rem; + align-items: center; + } + .footerMiddle > div { + width: 100%; + max-width: 420px; + } + .linkToFest { + text-align: center; + } + .menu-btn { + font-size: 1.5rem; + padding: 0.3rem 0.8rem; + } + .sliding-menu { + width: 200px; + left: -200px; + } + .menu-toggle:checked ~ .content { + margin-left: 200px; + } + .form-container { + padding: 2rem 1.5rem; + margin: 1.5rem auto; + } + .form-header h2 { + font-size: 1.75rem; + } + .form-input, + .form-select, + .form-textarea { + padding: 0.75rem; + font-size: 0.95rem; + } + .form-radio-group, + .form-checkbox-group { + flex-direction: column; + gap: 0.75rem; + } + .form-submit-btn { + font-size: 1rem; + } +} + @media (max-width: 600px) { + header { + padding: 2rem 1rem; + } + .navbar { + flex-wrap: wrap; + padding: 0.75rem 1rem; + } + .nav_icon { + display: flex; + margin-left: auto; + } + .nav_links { + flex-direction: column; + width: 100%; + position: absolute; + top: 100%; + left: 0; + background: #fff; + box-shadow: 0 4px 16px rgba(98,0,234,0.08); + max-height: 0; + overflow: hidden; + transition: max-height 0.3s; + z-index: 10; + } + .nav_links li { + text-align: left; + margin: 0.5rem 0; + } + .nav_toggle:checked ~ .nav_links { + max-height: 300px; + padding-bottom: 0.5rem; + } + .btn { + width: 90%; + font-size: 1rem; + padding: 0.75rem 0; + } + .btn_container { + min-height: 120px; + } + .modalBox { + left: 50px; + bottom: 50px; + } + .card, .modalBox { + max-width: 98vw; + padding: 1rem; + } + main { + padding: 1rem; + margin: 1rem 0; + } + .card, .typewriter-card { + padding: 1rem; + } + footer { + margin-bottom: 50px; + } .image-gallery { grid-template-columns: 1fr 1fr; gap: 0.7rem; @@ -1345,114 +1255,96 @@ footer { .gallery-item img { height: 110px; } + .topbar { + padding: 0.25rem 0.5rem; + } + .palette-controls { + gap: 0.35rem; + } + #theme-toggle, .theme-toggle-btn { + padding: 5px 8px; + font-size: 0.9rem; + } } -/* Default Theme */ -body { - background-color: #f9f9f9; - color: #333; -} - -/* Dark Theme */ -body.dark-theme { - background-color: #121212; - color: #f9f9f9; -} -.navbar.dark-theme { - background-color: #121212; - color: #f9f9f9; -} - -.theme-toggle-btn { - position: fixed; - top: 10px; - right: 10px; - padding: 10px 20px; - background-color: #6200ea; - color: #fff; - border: none; -border-radius: var(--radius-main); - cursor: pointer; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.theme-toggle-btn:hover { - background-color: #3700b3; -} - -body { - font-size: 1.1rem; - font-family: 'Segoe UI', Arial, sans-serif; - line-height: 1.7; - background: #fff; - color: #222; -} - -h1, h2, h3, h4, h5, h6 { - color: #111; - font-weight: 700; - letter-spacing: 0.5px; -} - -h1 { font-size: 2.5rem; } -h2 { font-size: 2rem; } -h3 { font-size: 1.5rem; } - -a { - color: #0056b3; - text-decoration: underline; - font-weight: 600; -} - -a:visited { - color: #003366; -} - -a:hover, a:focus { - color: #ff9800; - background: #222; - outline: 2px solid #ff9800; -} - -.btn, .theme-toggle-btn { - background: #0056b3; - color: #fff; - font-size: 1.1rem; - padding: 0.7em 1.5em; - border: none; - border-radius: 5px; - font-weight: 700; - cursor: pointer; - transition: background 0.2s; -} - -.btn:hover, .theme-toggle-btn:hover { - background: #ff9800; - color: #222; -} - -.navbar { - background: #222; - color: #fff; -} - -.navbar__brand { - color: #fff; - font-size: 1.5rem; - font-weight: 700; - letter-spacing: 1px; +@media (max-width: 500px) { + .flip-card { + width: 98vw; + height: 160px; + } + .flip-card-front, + .flip-card-back { + font-size: 1rem; + padding: 1rem; + } } -.navbar__link { - color: #fff; - font-size: 1.1rem; - text-decoration: underline; - font-weight: 600; - padding: 0.5em 1em; +@media (max-width: 480px) { + .topbar { + padding: 0.25rem 0.5rem; + } + .palette-controls { + gap: 0.35rem; + } + .palette-btn { + padding: 5px 8px; + font-size: 0.85rem; + } + .form-container { + padding: 1.5rem 1rem; + border-radius: 12px; + margin: 1rem auto; + } + .form-header h2 { + font-size: 1.5rem; + } + .form-header p { + font-size: 0.9rem; + } + .form-group { + margin-bottom: 1.25rem; + } + .form-label { + font-size: 0.9rem; + } + .form-input, + .form-select, + .form-textarea { + padding: 0.625rem; + font-size: 0.9rem; + } + .form-submit-btn { + padding: 0.875rem 1.5rem; + font-size: 1rem; + } + .form-radio-label, + .form-checkbox-label { + font-size: 0.875rem; + } + .progress-bar { + max-width: 100%; + } + .progress-title { + font-size: 0.9rem; + } + .progress-percent { + font-size: 0.85rem; + } + .progress-bar { + --height: 10px; + } } -.navbar__link:focus, .navbar__link:hover { - color: #ff9800; - background: #333; - outline: 2px solid #ff9800; +@media (max-width: 360px) { + .form-container { + padding: 1.25rem 0.875rem; + } + .form-header h2 { + font-size: 1.35rem; + } + .form-input, + .form-select, + .form-textarea { + font-size: 0.875rem; + } } \ No newline at end of file