diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 000000000..c95a3aed5 Binary files /dev/null and b/.DS_Store differ diff --git a/README.md b/README.md index a15b0ecb9..ea50f40d3 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# js-project-business-site \ No newline at end of file +# walantu +African portal for handymen and women diff --git a/images/.DS_Store b/images/.DS_Store new file mode 100644 index 000000000..b96b7bbca Binary files /dev/null and b/images/.DS_Store differ diff --git a/images/Thank-1.jpg b/images/Thank-1.jpg new file mode 100644 index 000000000..bc63e7f6e Binary files /dev/null and b/images/Thank-1.jpg differ diff --git a/images/Thank-2.jpg b/images/Thank-2.jpg new file mode 100644 index 000000000..f38542b96 Binary files /dev/null and b/images/Thank-2.jpg differ diff --git a/images/head-1.jpg b/images/head-1.jpg new file mode 100644 index 000000000..16ecb67ca Binary files /dev/null and b/images/head-1.jpg differ diff --git a/images/head-2.jpg b/images/head-2.jpg new file mode 100644 index 000000000..288547202 Binary files /dev/null and b/images/head-2.jpg differ diff --git a/images/logo.png b/images/logo.png new file mode 100644 index 000000000..219d2816a Binary files /dev/null and b/images/logo.png differ diff --git a/images/logoBlk.png b/images/logoBlk.png new file mode 100644 index 000000000..c9b72b3f2 Binary files /dev/null and b/images/logoBlk.png differ diff --git a/images/logoFull.png b/images/logoFull.png new file mode 100644 index 000000000..7fc219e51 Binary files /dev/null and b/images/logoFull.png differ diff --git a/images/man-1.jpg b/images/man-1.jpg new file mode 100644 index 000000000..909d752f1 Binary files /dev/null and b/images/man-1.jpg differ diff --git a/images/man-2.jpg b/images/man-2.jpg new file mode 100644 index 000000000..9dea3595b Binary files /dev/null and b/images/man-2.jpg differ diff --git a/images/man-3.jpg b/images/man-3.jpg new file mode 100644 index 000000000..062f1f541 Binary files /dev/null and b/images/man-3.jpg differ diff --git a/images/man-4.jpg b/images/man-4.jpg new file mode 100644 index 000000000..4c6c56645 Binary files /dev/null and b/images/man-4.jpg differ diff --git a/images/tap-1.jpg b/images/tap-1.jpg new file mode 100644 index 000000000..479f2715a Binary files /dev/null and b/images/tap-1.jpg differ diff --git a/images/walantu-logo.jpg b/images/walantu-logo.jpg new file mode 100644 index 000000000..40dfef7f1 Binary files /dev/null and b/images/walantu-logo.jpg differ diff --git a/images/workers-1.jpg b/images/workers-1.jpg new file mode 100644 index 000000000..0324d0843 Binary files /dev/null and b/images/workers-1.jpg differ diff --git a/images/workers-2.jpg b/images/workers-2.jpg new file mode 100644 index 000000000..f38c33920 Binary files /dev/null and b/images/workers-2.jpg differ diff --git a/images/workers-3.jpg b/images/workers-3.jpg new file mode 100644 index 000000000..83bf9f0a0 Binary files /dev/null and b/images/workers-3.jpg differ diff --git a/images/workers-4.jpg b/images/workers-4.jpg new file mode 100644 index 000000000..b3a64dc07 Binary files /dev/null and b/images/workers-4.jpg differ diff --git a/images/workmen-banner-1.jpg b/images/workmen-banner-1.jpg new file mode 100644 index 000000000..592b0940f Binary files /dev/null and b/images/workmen-banner-1.jpg differ diff --git a/images/workmen-banner-2.jpg b/images/workmen-banner-2.jpg new file mode 100644 index 000000000..64ac6da99 Binary files /dev/null and b/images/workmen-banner-2.jpg differ diff --git a/images/workmen.jpg b/images/workmen.jpg new file mode 100644 index 000000000..e9a88b322 Binary files /dev/null and b/images/workmen.jpg differ diff --git a/index reseve.html b/index reseve.html new file mode 100644 index 000000000..1d24a4461 --- /dev/null +++ b/index reseve.html @@ -0,0 +1,241 @@ + + + + + + + + Walantu - Find Trusted Professionals + + + + + + + + + + + + + + + + +
+ + + +
+

Your trusted platform for professional services

+

We get the job done

+

Your one-stop platform for finding trusted professionals across various services. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam totam maiores + inventore omnis optio quis, unde dolor recusandae, obcaecati ullam molestiae + blanditiis voluptate vitae dolorum similique repudiandae cum? In, consectetur.

+
+ +
+ + +
+
+
+

Trusted professional delivery

+

Your one-stop platform for finding trusted professionals across various services. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam totam maiores + inventore omnis optio quis, unde dolor recusandae, obcaecati ullam molestiae + blanditiis voluptate vitae dolorum similique repudiandae cum? In, consectetur.

+
+ + + +
+

Why choose Walantu?

+

At Walantu, we connect you with vetted professionals for all your service needs. + Whether it's plumbing, electrical work, cleaning, or moving, our platform ensures + you find reliable experts quickly and easily. With transparent pricing and secure + booking, Walantu is your trusted partner for hassle-free service delivery. Learn More

+ +
+ + + Why choose Walantu image placeholder + +
Walantu connects you with vetted professionals for all your service needs.
+
+
+ + +
+

Why choose Walantu?

+

At Walantu, we connect you with vetted professionals for all your service needs. + Whether it's plumbing, electrical work, cleaning, or moving, our platform ensures + you find reliable experts quickly and easily. With transparent pricing and secure + booking, Walantu is your trusted partner for hassle-free service delivery. Learn More

+ +
+ + Why choose Walantu image placeholder + +
Walantu connects you with vetted professionals for all your service needs.
+
+
+ +
+

Why choose Walantu?

+

At Walantu, we connect you with vetted professionals for all your service needs. + Whether it's plumbing, electrical work, cleaning, or moving, our platform ensures + you find reliable experts quickly and easily. With transparent pricing and secure + booking, Walantu is your trusted partner for hassle-free service delivery. Learn More

+ +
+ + Why choose Walantu image placeholder + +
Walantu connects you with vetted professionals for all your service needs.
+
+
+ + + + + + + +
+

Get Started

+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+
+
+ + + +
+

What our users say

+ + worker +

"Walantu made it so easy to find a reliable plumber. Highly recommend!" - Jane D.

+ + + + worker +

"The professionals I found through Walantu were top-notch and affordable." - John

+ + + + worker +

"I love how user-friendly the platform is. I'll definitely use it again!" - Sarah K.

+ + +
+ + +
+ + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 000000000..445abe4f0 --- /dev/null +++ b/index.html @@ -0,0 +1,273 @@ + + + + + + + Walantu – Find Trusted Professionals + + + + + + + + + + + + + + + +
+
+

Certified professional services

+

We get the job done

+

+ Your one-stop platform for finding trusted professionals across various services. + Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam totam maiores + inventore omnis optio quis, unde dolor recusandae, obcaecati ullam molestiae + blanditiis voluptate vitae dolorum similique repudiandae cum? In, consectetur. +

+
+
+ + +
+ +
+
+

Trusted professional delivery

+

+ At Walantu, we connect you with vetted professionals for all your service needs. + Whether it's plumbing, electrical work, cleaning, or moving, our platform ensures + you find reliable experts quickly and easily. With transparent pricing and secure + booking, Walantu is your trusted partner for hassle-free service delivery. + Learn More +

+
+ + + +
+

Why choose Walantu?

+

+ At Walantu, we connect you with vetted professionals for all your service needs. + Whether it's plumbing, electrical work, cleaning, or moving, our platform ensures + you find reliable experts quickly and easily. With transparent pricing and secure + booking, Walantu is your trusted partner for hassle-free service delivery. + Learn More +

+
+ + + Team of trusted professionals + +
Walantu connects you with vetted professionals.
+
+
+ +
+

Fast & reliable

+

+ At Walantu, we connect you with vetted professionals for all your service needs. + Whether it's plumbing, electrical work, cleaning, or moving, our platform ensures + you find reliable experts quickly and easily. With transparent pricing and secure + booking, Walantu is your trusted partner for hassle-free service delivery. + Learn More +

+
+ Professional delivering high-quality work +
Reliable professionals.
+
+
+ +
+

Services that scale

+

+ At Walantu, we connect you with vetted professionals for all your service needs. + Whether it's plumbing, electrical work, cleaning, or moving, our platform ensures + you find reliable experts quickly and easily. With transparent pricing and secure + booking, Walantu is your trusted partner for hassle-free service delivery. + Learn More +

+
+ Technician working on a project +
From quick jobs to major projects.
+
+
+
+ + +
+ + +
+

Find a professional

+ +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ GhanaPost GPS app: get it here +
+
+ + +
+ + +
+ +
+ +
+
+
+
+ + + +
+ + +
+ Portrait of Jane's service professional +

Jane D.

+

"Walantu made it so easy to find a reliable plumber. Highly recommend!"

+
+ +
+ Portrait of John's service professional +

John

+

"The professionals I found through Walantu were top-notch and affordable."

+
+ +
+ Portrait of Sarah's service professional +

Sarah K.

+

"I love how user-friendly the platform is. I'll definitely use it again!"

+
+ +
+ Portrait of Michael's service professional +

Michael R.

+

"Quick booking and transparent pricing. The whole process was smooth."

+
+
+
+ + + + + + + diff --git a/script.js b/script.js new file mode 100644 index 000000000..8c9678809 --- /dev/null +++ b/script.js @@ -0,0 +1,10 @@ + +function showSidebar(){ + const sidebar = document.querySelector('.sidebar') + sidebar.style.display = 'flex' +} +function hideSidebar(){ + const sidebar = document.querySelector('.sidebar') + sidebar.style.display = 'none' +} + diff --git a/styles/centered-form.css b/styles/centered-form.css new file mode 100644 index 000000000..60e865279 --- /dev/null +++ b/styles/centered-form.css @@ -0,0 +1,207 @@ +/* ========================= + Centered Form Styles (new file) + ========================= */ + +/* Keep your palette and base settings */ +:root { + --page-max: 1200px; + --gutter: 2rem; +} + +*, *::before, *::after { box-sizing: border-box; } + +html { font-size: 10px; } +body { + font-size: 1.5rem; + font-family: Verdana, Geneva, Tahoma, sans-serif; + display: grid; + grid-template-rows: auto 1fr auto; + grid-template-columns: 100%; + width: 100%; + min-height: 100dvh; + margin: 0; + text-align: justify; + text-justify: inter-word; + background: #eaf2f7; /* matches your main bg tone */ +} + +/* Headings */ +h1 { + font-size: 3rem; + color: white; + -webkit-text-stroke: 0.5px #373535; + text-transform: uppercase; +} +h2 { + font-size: 2.8rem; + text-align: left; + color: #525f75; + margin: 0 0 1.6rem 0; +} + +/* Center page structure */ +nav, header, main, footer { + width: 100%; + max-width: var(--page-max); + margin-inline: auto; + position: relative; +} + +/* Utility container (helps align sections to the same center line) */ +.container { + width: 100%; + max-width: var(--page-max); + margin-inline: auto; + padding-inline: var(--gutter); +} + +/* Navigation (kept minimal for this file) */ +nav { + background-color: white; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); +} + +/* Header */ +header { + background: #ffffff url(../images/head-1.jpg) center/cover no-repeat; + min-height: clamp(220px, 35vh, 420px); + padding: 2rem; +} + +/* Main wrapper to visually align with rest of the site */ +main { + padding-block: 1.5rem; + padding-inline: var(--gutter); + background: transparent; +} + +/* =================================== + FORM SECTION CENTERING + =================================== */ + +/* The section that contains the form */ +.form-section { + width: 100%; + margin-block: 2rem; +} + +/* Center the inner content and keep same max width as rest of page */ +.form-section .container { + display: grid; + justify-items: center; /* horizontally center card */ + align-items: start; +} + +/* The form "card" */ +form { + width: min(100%, var(--page-max)); + max-width: 1000px; /* slightly narrower than full page for nice balance */ + margin-inline: auto; /* center horizontally */ + background: #ffffff; + border: 1px solid #ccc; + border-radius: 8px; + padding: 24px; + box-shadow: 0 1px 3px rgba(50,50,93,0.15), + 0 4px 6px rgba(112,157,199,0.15); +} + +/* Form title */ +.form-section h2 { + text-transform: uppercase; + font-size: 1.6rem; + letter-spacing: 0.02em; + color: #525f75; + margin-bottom: 1.2rem; + width: min(100%, 1000px); + margin-inline: auto; /* center the title line up with the form */ + padding-inline: 0.4rem; +} + +/* 4-column grid inside the form */ +.form-grid { + display: grid; + grid-template-columns: repeat(4, minmax(200px, 1fr)); + gap: 16px; +} + +/* Fields */ +.form-field { + display: flex; + flex-direction: column; + gap: 8px; +} + +label { + color: #8898aa; + font-size: 12px; + letter-spacing: .02em; +} + +input, select, textarea, button { + font-size: 14px; + padding: 10px 12px; + border: 1px solid #ccc; + border-radius: 6px; + outline: none; + background: #fff; +} + +/* validity hints (optional, keep if you already use them) */ +input:valid { border: 2px solid green; } +input:invalid { border: 2px solid red; } + +textarea { resize: vertical; min-height: 40px; } + +/* Spans */ +.span-2 { grid-column: span 2; } +.span-3 { grid-column: span 3; } +.span-4 { grid-column: 1 / -1; } + +/* Helper note */ +.helper { + font-size: 12px; + color: #8898aa; + margin-top: 4px; +} + +/* Actions */ +.actions { + display: flex; + justify-content: flex-end; + gap: 12px; +} + +button[type="submit"] { + background: #525f75; + color: #fff; + border: none; + padding: 12px 18px; + cursor: pointer; + border-radius: 6px; +} +button[type="submit"]:hover { filter: brightness(1.05); } + +/* =================================== + RESPONSIVE TWEAKS + =================================== */ +@media (max-width: 1100px) { + .form-grid { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 820px) { + .form-grid { grid-template-columns: repeat(2, 1fr); } + .span-3 { grid-column: span 2; } +} +@media (max-width: 560px) { + .form-grid { grid-template-columns: 1fr; } + .span-2, .span-3, .span-4 { grid-column: auto; } + .actions { justify-content: stretch; } + button[type="submit"] { width: 100%; } + .form-section h2 { padding-inline: 0; } +} + +/* Footer tint preserved */ +footer { + background-color: #5b2121; + color: #fff; + padding: 2rem; +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 000000000..e69de29bb diff --git a/styles/styles.css b/styles/styles.css new file mode 100644 index 000000000..7457a3483 --- /dev/null +++ b/styles/styles.css @@ -0,0 +1,435 @@ +/* ========================= + Base styles + ========================= */ +:root { --page-max: 1200px; } + +*, *::before, *::after { box-sizing: border-box; } + +html { font-size: 10px; } /* reduced from 12px */ + +body { + font-size: 1.5rem; + font-family: Verdana, Geneva, Tahoma, sans-serif; + display: grid; + grid-template-rows: auto 1fr auto; + grid-template-columns: 100%; + width: 100%; + height: 100%; + margin: 0; + text-align: justify; /* justify all text by default */ + text-justify: inter-word; /* improve spacing */ +} + +h1 { + font-size: 3rem; + color: white; /* fill color */ + -webkit-text-stroke: 0.5px #373535; /* outline thickness + color */ + text-transform: uppercase; +} + +h2 { + font-size: 2.8rem; + text-align: left; /* do not justify */ +} + +p { margin-bottom: 2rem; } +a { color: #5b2121; } +a:hover { color: rgb(82, 42, 15); text-decoration: none; } + +img { + max-width: 100%; + height: auto; + display: block; + margin: 0 auto; +} + +/* ========================= + Center page structure + ========================= */ +nav, header, main, footer { + width: 100%; + max-width: var(--page-max); + margin-inline: auto; + position: relative; +} + +/* ========================= + Navigation + ========================= */ +nav { + background-color: white; + box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); +} +nav ul { + width: 100%; + list-style: none; + display: flex; + justify-content: flex-end; + align-items: center; + margin: 0px 10px 0px -60px; +} +nav li { height: 50px; } +nav a { + height: 100%; + padding: 0 30px; + text-decoration: none; + display: flex; + align-items: center; + color: black; +} +nav a:hover { background-color: #f0f0f0; } +nav li:first-child { margin-right: auto; } + +.sidebar { + position: fixed; + top: 0; right: 0; + height: 100vh; width: 250px; + background-color: rgba(255, 255, 255, 0.15); + backdrop-filter: blur(12px); + box-shadow: -10px 0 10px rgba(0, 0, 0, 0.1); + list-style: none; + display: none; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; +} +.sidebar li { width: 100%; } +.sidebar a { width: 100%; } +.menu-button { display: none; } + +@media (max-width: 800px) { + .hideOnMobile { display: none; } + .menu-button { display: block; } +} +@media (max-width: 400px) { + .sidebar { width: 100%; } +} + +/* ========================= + Header + ========================= */ +header { + background-color: #ffffff; + color: #ffffff; + padding: 2rem; + background-image: url(../images/head-1.jpg); + background-size: cover; + background-position: center; + background-repeat: no-repeat; + min-height: clamp(220px, 35vh, 420px); +} +@media (max-width: 800px) { + header { + padding: 1.2rem; + min-height: clamp(180px, 40vh, 360px); + } +} + +/* ========================= + Main content + ========================= */ +main { + padding-block: 1.5rem; + padding-inline: 2rem; + max-width: var(--page-max); + background-color: #eaf2f7; /* very pale blue */ + border: 1px solid rgba(250, 226, 226, 0.3); /* faded red border */ + padding: 2rem; + margin-block: 2rem; + border-radius: 6px; + box-sizing: border-box; +} +main h1 { + color: #5b2121; + font-weight: bold; +} + +intro { + + +} + +main article { + margin-bottom: 1.25rem; + border-bottom: solid 1px #ccc; + padding: 1.25rem 0; + gap: 2rem; + background-color: #cbdff8; /* very pale blue */ + border: 1px solid rgba(200, 50, 50, 0.3); /* faded red border */ + padding: 2rem; + margin-block: 2rem; + border-radius: 6px; + box-sizing: border-box; + +} + +figcaption { + font: italic 1rem georgia, serif; + color: #5b2121; + text-align: justify; +} + +/* ========================= + Responsive 4-column grid + ========================= */ +.grid-4 { + display: grid; + grid-template-columns: repeat(4, minmax(0, 1fr)); + gap: 2rem; /* increased gap between columns */ + align-items: stretch; +} +.grid-4 .card { + background: #fff; + border: 1px solid #e6e6e6; + border-radius: 8px; + overflow: hidden; + text-align: justify; +} +.grid-4 .card img { + display: block; + width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; + margin: 0; +} + +/* Breakpoints for grid */ +@media (max-width: 1200px) { + .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } +} +@media (max-width: 800px) { + .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (max-width: 600px) { + .grid-4 { grid-template-columns: 1fr; } +} + +.intro { grid-column: 1 / -1; + background-color: #f5faff; /* very pale blue */ + border: 1px solid rgba(200, 50, 50, 0.3); /* faded red border */ + padding: 2rem; + + border-radius: 6px; + box-sizing: border-box; +} +.form-section { grid-column: 1 / -1; } + + +/* ========================= + Centered 3-column section + ========================= */ +main section { + display: grid; + grid-template-columns: repeat(3, minmax(0, 300px)); + gap: 2rem; /* increased gap between columns */ + justify-content: center; + margin-block: 1.25rem; +} +main section .card { overflow: hidden; text-align: justify; } +main section .card img, +main section > img { + display: block; + width: 100%; + aspect-ratio: 16 / 9; + object-fit: cover; + margin: 0; +} + +@media (max-width: 900px) { + main section { grid-template-columns: repeat(2, minmax(0, 300px)); } +} +@media (max-width: 600px) { + main section { grid-template-columns: 1fr; } +} + +/* ========================= + Testimonials (full 1200px width, responsive) + ========================= */ +.testimonials { + width: 100%; + max-width: var(--page-max); + margin-inline: auto; + display: grid; + grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */ + gap: 2rem; + background-color: #f5faff; /* very pale blue */ + border: 1px solid rgba(200, 50, 50, 0.3); /* faded red border */ + padding: 2rem; + margin-block: 2rem; + border-radius: 6px; + box-sizing: border-box; +} +.testimonials .testimonial { + background: #ffffff; + border-radius: 6px; + padding: 1.5rem; + text-align: justify; + line-height: 1.6; + box-shadow: 0 1px 3px rgba(0,0,0,0.05); +} +.testimonials .testimonial h3 { + font-size: 1.6rem; + margin-bottom: 0.75rem; + color: #5b2121; + text-align: left; /* keep headings aligned */ +} +.testimonials .testimonial p { margin: 0; } + +/* Responsive breakpoints for testimonials */ +@media (max-width: 1200px) { + .testimonials { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 900px) { + .testimonials { grid-template-columns: repeat(2, 1fr); } +} +@media (max-width: 600px) { + .testimonials { grid-template-columns: 1fr; } +} + +/* ========================= + Footer (3 responsive columns) + ========================= */ +footer { + background-color: #5b2121; + color: #fff; + text-align: justify; + padding: 2rem; /* a bit more space for columns */ + font-size: 1rem; + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 columns */ + gap: 2rem; /* space between footer columns */ + align-items: start; +} +footer h3, footer h4 { + margin: 0 0 0.75rem 0; + font-weight: 700; + text-align: left; /* keep footer headings left-aligned */ +} +footer p, footer li, footer a { + color: #fff; + opacity: 0.95; +} +footer a:hover { opacity: 1; text-decoration: underline; } +footer ul { list-style: none; padding: 0; margin: 0; } +footer li + li { margin-top: 0.5rem; } + + + +/* ========================= + Form + ========================= */ +form { + border: 1px solid #ccc; + border-radius: 8px; + padding: 24px; + max-width: 1200px; /* room for 4 columns */ + margin: 0 auto; + background: white; /* matches fieldset style */ + box-shadow: 0 1px 3px rgba(50,50,93,0.15), + 0 4px 6px rgba(112,157,199,0.15); +} + +/* Title */ +h2 { + text-transform: uppercase; + font-size: 15px; + margin: 0 0 16px 0; + color: #525f75; +} + +/* Grid */ +.form-grid { + display: grid; + grid-template-columns: repeat(4, minmax(200px, 1fr)); + gap: 16px; +} + +/* Field */ +.form-field { + display: flex; + flex-direction: column; + gap: 8px; +} + +label { + color: #8898aa; /* existing label color */ + font-size: 12px; + letter-spacing: .02em; +} + +/* Inputs */ +input, select, textarea, button { + font-size: 14px; + padding: 10px 12px; + border: 1px solid #ccc; + border-radius: 6px; + outline: none; +} + +input:valid { border: 2px solid green; } +input:invalid { border: 2px solid red; } + +textarea { + resize: vertical; + min-height: 40px; +} + +/* Full-width items (spanning all columns) */ +.span-2 { grid-column: span 2; } +.span-3 { grid-column: span 3; } +.span-4 { grid-column: 1 / -1; } + +/* Helper note link (GhanaPost GPS) */ +.helper { + font-size: 12px; + color: #8898aa; + margin-top: 4px; +} + +/* Submit row */ +.actions { + display: flex; + justify-content: flex-end; + gap: 12px; +} + +button[type="submit"] { + background: #525f75; /* from your palette */ + color: #fff; + border: none; + padding: 12px 18px; + cursor: pointer; + border-radius: 6px; +} +button[type="submit"]:hover { + filter: brightness(1.05); +} + +/* Responsive */ +@media (max-width: 1100px) { + .form-grid { grid-template-columns: repeat(3, 1fr); } +} +@media (max-width: 820px) { + .form-grid { grid-template-columns: repeat(2, 1fr); } + .span-3 { grid-column: span 2; } +} +@media (max-width: 560px) { + body { padding: 20px; } + .form-grid { grid-template-columns: 1fr; } + .span-2, .span-3, .span-4 { grid-column: auto; } + .actions { justify-content: stretch; } + button[type="submit"] { width: 100%; } +} + + + + +/* Footer responsive behavior */ +@media (max-width: 900px) { + footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } +} +@media (max-width: 600px) { + footer { grid-template-columns: 1fr; } +} + +