Pasted code.css File Barter Plumbing Services — Reliable Plumbing Solutions

Reliable Plumbing Solutions for Homes & Businesses

Professional plumbing services with transparent pricing, dependable support, and solutions built for residential and commercial properties.

View Packages Contact Us

LOGO
HERE

Those are the index.html and styles.css for Barter Plumbing services. Give me the full files in order to have the main content on index.html be in the center, but the text still left aligned You don't need to change your index.html at all. The HTML structure is already correct. The issue is in your CSS. Right now the hero container (.hero__inner) spans the full width and the left column naturally hugs the left side. Replace your Hero section in styles.css with this: /* ============================================== HERO ============================================== */ .hero { display: flex; align-items: center; justify-content: center; width: 100%; } /* Home page: tighter hero */ .home-page .hero { padding: 2rem 1.5rem; min-height: 0; width: 100%; } .hero__inner { width: 100%; max-width: 1050px; /* slightly narrower than before */ margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-content: center; gap: 5rem; } .hero__content { display: flex; flex-direction: column; justify-content: center; text-align: left; } .hero__heading { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 1.5rem; color: #111; } .hero__subheading { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; color: #555; margin-bottom: 2.25rem; max-width: 500px; } .hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero__visual { display: flex; justify-content: center; align-items: center; } .hero__logo-card { width: 100%; max-width: 340px; aspect-ratio: 1; border: 2px dashed #d4d4d4; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fafafa; } .hero__logo-card-text { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; color: #aaa; text-align: center; line-height: 1.6; } Then, in your responsive section replace the mobile hero styles with: .hero__inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .hero__content { text-align: left; max-width: 550px; margin: 0 auto; } .hero__subheading { max-width: 100%; } .hero__actions { justify-content: flex-start; } .hero__visual { order: -1; } What this changes ✅ The entire hero section is centered on the page. ✅ The text remains left aligned. ✅ The logo placeholder stays centered opposite the text. ✅ Everything is balanced like modern sites such as Stripe, Vercel, or Linear rather than feeling pushed to the left. Ad please just give me the new entire file I can absolutely do that, but there's one problem: your CSS file is over 1,000 lines long (the one you uploaded is about 1,050+ lines). That exceeds the maximum response size I can send in a single message, so I physically can't paste the entire file here. The easiest solution is for me to generate the complete updated styles.css as a downloadable file. If you'd like, I can also generate a ZIP containing: ✅ index.html ✅ styles.css (with the centered hero) ✅ Any other files you want That way you can just replace the old files with the new ones instead of manually editing anything. Generate the complete updated styles.css as a downloadable file Analyzed from pathlib import Path src=Path('/mnt/data/Pasted code.css') text=src.read_text() text=text.replace(".hero__inner {\n max-width: 1200px;\n margin: 0 auto;\n width: 100%;\n display: grid;","\n.hero__inner {\n max-width: 1050px;\n margin: 0 auto;\n width: 100%;\n display: grid;") text=text.replace(".hero {\n display: flex;\n align-items: center;\n}",".hero {\n display:flex;\n align-items:center;\n justify-content:center;\n width:100%;\n}") text=text.replace(".hero__actions {\n justify-content: center;\n }",".hero__content {\n text-align:left;\n max-width:550px;\n margin:0 auto;\n }\n\n .hero__actions {\n justify-content:flex-start;\n }") out=Path('/mnt/data/styles.css') out.write_text(text) print(out) STDOUT/STDERR /mnt/data/styles.css Done! I generated the updated stylesheet as a downloadable file. Download here: styles.css The changes include: Centering the entire hero section on the page. Keeping the hero text left-aligned. Slightly narrowing the hero content area for a more balanced, modern layout. Adjusting the mobile hero layout so the text remains left-aligned while the section itself stays centered. If you'd like, I can also make it look even closer to Stripe, Linear, or Apple with more polished spacing and typography. styles.css Code Ad Ads do not influence the answers you get from ChatGPT. Your chats stay private. Learn about ads and personalization styles.css /* ============================================== Barter Plumbing Services — Stylesheet Design: Ultra-minimalist, Stripe/Linear-inspired ============================================== */ /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: #111; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Home page: no scroll, everything in viewport */ .home-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .home-page main { flex: 1; display: flex; align-items: center; padding-top: 64px; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea { font-family: inherit; font-size: inherit; } /* ---------- Focus Styles ---------- */ :focus-visible { outline: 2px solid #F97316; outline-offset: 2px; } /* ---------- Skip Link ---------- */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 200; padding: 0.75rem 1.25rem; background: #F97316; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 8px; transition: top 200ms ease; } .skip-link:focus { top: 12px; outline: 2px solid #F97316; outline-offset: 2px; } /* ---------- Utility ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Page Section (offset for fixed nav) ---------- */ .page-section { padding-top: 7rem; } /* ---------- Section Heading ---------- */ .section-heading { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-align: center; margin-bottom: 3rem; color: #111; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-size: 0.9375rem; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: 8px; transition: all 200ms ease; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; } .btn--primary { background: #F97316; color: #fff; border: 2px solid #F97316; } .btn--primary:hover { background: #ea580c; border-color: #ea580c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25); } .btn--primary:active { transform: translateY(0); box-shadow: none; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .btn--outline { background: transparent; color: #111; border: 2px solid #e5e5e5; } .btn--outline:hover { border-color: #111; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .btn--outline:active { transform: translateY(0); box-shadow: none; } .btn--outline:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* ============================================== NAVIGATION ============================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; border-bottom: 1px solid #f0f0f0; } .nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .nav__logo { flex-shrink: 0; } .nav__logo-text { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; color: #999; border: 2px dashed #d4d4d4; border-radius: 8px; padding: 0.5rem 1rem; transition: border-color 200ms ease, color 200ms ease; } .nav__logo-text:hover { border-color: #F97316; color: #F97316; } .nav__links { display: flex; align-items: center; gap: 0.25rem; } .nav__link { font-size: 0.875rem; font-weight: 500; color: #555; padding: 0.5rem 0.85rem; border-radius: 8px; transition: color 200ms ease, background 200ms ease; } .nav__link:hover { color: #111; background: #f5f5f5; } .nav__link--active { color: #111; background: #f5f5f5; font-weight: 600; } .nav__cta { flex-shrink: 0; padding: 0.55rem 1.25rem; font-size: 0.875rem; } .nav__mobile-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; transition: background 200ms ease; } .nav__mobile-toggle:hover { background: #f5f5f5; } .nav__mobile-icon, .nav__mobile-icon::before, .nav__mobile-icon::after { display: block; width: 20px; height: 2px; background: #111; border-radius: 2px; transition: all 200ms ease; } .nav__mobile-icon { position: relative; } .nav__mobile-icon::before, .nav__mobile-icon::after { content: ''; position: absolute; left: 0; } .nav__mobile-icon::before { top: -6px; } .nav__mobile-icon::after { top: 6px; } /* Mobile nav open state */ .nav--open .nav__mobile-icon { background: transparent; } .nav--open .nav__mobile-icon::before { top: 0; transform: rotate(45deg); } .nav--open .nav__mobile-icon::after { top: 0; transform: rotate(-45deg); } /* Home page: compact footer */ .home-page .footer { padding: 1.25rem 1.5rem 0.75rem; } .home-page .footer__inner { gap: 1.5rem; } .home-page .footer__copyright { padding-top: 0.75rem; } /* ============================================== HERO ============================================== */ .hero { display:flex; align-items:center; justify-content:center; width:100%; } /* Home page: tighter hero */ .home-page .hero { padding: 2rem 1.5rem; min-height: 0; } .hero__inner { max-width: 1050px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero__heading { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 1.5rem; color: #111; } .hero__subheading { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; color: #555; margin-bottom: 2.25rem; max-width: 520px; } .hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero__visual { display: flex; justify-content: center; align-items: center; } .hero__logo-card { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; border: 2px dashed #d4d4d4; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fafafa; transition: border-color 200ms ease; } .hero__logo-card:hover { border-color: #F97316; } .hero__logo-card-text { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; color: #aaa; text-align: center; line-height: 1.6; } /* ============================================== PACKAGES ============================================== */ .packages { padding: 5rem 1.5rem; background: #fafafa; } .packages__inner { max-width: 1100px; margin: 0 auto; } .packages__toggle { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; background: #eee; border-radius: 12px; padding: 0.35rem; max-width: 360px; margin-left: auto; margin-right: auto; } .packages__toggle-btn { flex: 1; padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 600; color: #666; border-radius: 10px; transition: all 200ms ease; text-align: center; border: 1px solid transparent; } .packages__toggle-btn--active { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .packages__toggle-btn:hover:not(.packages__toggle-btn--active) { color: #111; } /* Package grid panels */ .packages__grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; animation: fadeSlideIn 300ms ease; } .packages__grid--active { display: grid; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Package Card */ .package-card { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 2rem 1.75rem; display: flex; flex-direction: column; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .package-card:hover { border-color: #d4d4d4; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .package-card--enterprise { border-color: #F97316; } .package-card--enterprise:hover { border-color: #ea580c; box-shadow: 0 8px 30px rgba(249, 115, 22, 0.12); } .package-card__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; color: #111; } .package-card__price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; color: #111; margin-bottom: 1.5rem; } .package-card--enterprise .package-card__price { color: #F97316; font-size: 2rem; } .package-card__features { flex: 1; margin-bottom: 1.75rem; } .package-card__features li { position: relative; padding-left: 1.5rem; margin-bottom: 0.65rem; font-size: 0.9375rem; color: #555; line-height: 1.5; } .package-card__features li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: #F97316; } .package-card__btn { width: 100%; } /* ============================================== CUSTOMER PORTAL ============================================== */ .portal { padding: 5rem 1.5rem; } .portal__inner { max-width: 1100px; margin: 0 auto; } .portal__dashboard { background: #fff; border: 1px solid #eaeaea; border-radius: 16px; overflow: hidden; } .portal__header { display: flex; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; gap: 1rem; } .portal__welcome { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #111; } .portal__header-actions { display: flex; gap: 0.75rem; } .portal__btn { padding: 0.55rem 1.25rem; font-size: 0.875rem; } .portal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #f0f0f0; } .portal__card { background: #fff; padding: 1.75rem; transition: background 200ms ease; } .portal__card:hover { background: #fafafa; } .portal__card--wide { grid-column: 1 / -1; } .portal__card-title { font-size: 0.8125rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.65rem; } .portal__card-value { font-size: 1.25rem; font-weight: 700; color: #111; margin-bottom: 0.35rem; letter-spacing: -0.02em; } .portal__card-value--large { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; } .portal__card-value--small { font-size: 1rem; font-weight: 400; color: #999; } .portal__card-meta { font-size: 0.8125rem; color: #999; } /* ============================================== PAYMENT ============================================== */ .payment { padding: 5rem 1.5rem; background: #fafafa; } .payment__inner { max-width: 580px; margin: 0 auto; } .payment__card { background: #fff; border: 1px solid #eaeaea; border-radius: 16px; padding: 2.5rem 2rem; } .payment__form { display: flex; flex-direction: column; gap: 1.25rem; } .payment__field { display: flex; flex-direction: column; gap: 0.4rem; } .payment__label { font-size: 0.8125rem; font-weight: 600; color: #555; letter-spacing: 0.02em; } .payment__input { padding: 0.75rem 0.875rem; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 0.9375rem; color: #111; background: #fff; transition: border-color 200ms ease; min-width: 0; } .payment__input:focus { border-color: #F97316; } .payment__input:disabled { background: #f9f9f9; color: #999; cursor: not-allowed; } .payment__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } .payment__row .payment__field { min-width: 0; overflow: hidden; } .payment__row .payment__label { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .payment__row .payment__input { padding: 0.5rem 0.55rem; font-size: 0.8125rem; width: 100%; } .payment__submit { width: 100%; margin-top: 0.5rem; } .payment__disclaimer { text-align: center; font-size: 0.8125rem; color: #999; margin-top: -0.25rem; } /* Payment Success State */ .payment__success { text-align: center; padding: 2rem 1rem; animation: fadeSlideIn 300ms ease; } .payment__success-icon { margin-bottom: 1.25rem; } .payment__success-heading { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #111; margin-bottom: 0.75rem; } .payment__success-text { font-size: 0.9375rem; color: #666; line-height: 1.6; max-width: 320px; margin: 0 auto 2rem; } /* ============================================== WHY CHOOSE US ============================================== */ .why-us { padding: 5rem 1.5rem; } .why-us__inner { max-width: 1100px; margin: 0 auto; } .why-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .why-us__card { text-align: center; padding: 2rem 1.5rem; border-radius: 12px; transition: background 200ms ease; } .why-us__card:hover { background: #fafafa; } .why-us__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: #fff5f0; color: #F97316; margin-bottom: 1.25rem; transition: background 200ms ease; } .why-us__card:hover .why-us__icon { background: #ffedd5; } .why-us__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.6rem; color: #111; } .why-us__desc { font-size: 0.875rem; color: #666; line-height: 1.6; } /* ============================================== TESTIMONIALS ============================================== */ .testimonials { padding: 5rem 1.5rem; background: #fafafa; } .testimonials__inner { max-width: 1000px; margin: 0 auto; } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial-card { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 2rem 1.75rem; transition: border-color 200ms ease, box-shadow 200ms ease; } .testimonial-card:hover { border-color: #d4d4d4; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); } .testimonial-card__text { font-size: 0.9375rem; color: #777; font-style: italic; line-height: 1.65; } /* ============================================== CONTACT ============================================== */ .contact { padding: 5rem 1.5rem; } .contact__inner { max-width: 1000px; margin: 0 auto; } .contact__layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem; align-items: start; } .contact__info { display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem; background: #fff; border: 1px solid #eaeaea; border-radius: 16px; } .contact__info-item { display: flex; flex-direction: column; gap: 0.3rem; } .contact__info-label { font-size: 0.8125rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; } .contact__info-value { font-size: 1rem; font-weight: 600; color: #111; line-height: 1.6; } a.contact__info-value { display: inline; transition: color 200ms ease; } a.contact__info-value:hover { color: #F97316; } .contact__form { display: flex; flex-direction: column; gap: 1.25rem; padding: 2.5rem; background: #fff; border: 1px solid #eaeaea; border-radius: 16px; } .contact__field { display: flex; flex-direction: column; gap: 0.4rem; } .contact__label { font-size: 0.8125rem; font-weight: 600; color: #555; letter-spacing: 0.02em; } .contact__input { padding: 0.75rem 0.875rem; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 0.9375rem; color: #111; background: #fff; transition: border-color 200ms ease; resize: vertical; } .contact__input:focus { border-color: #F97316; } .contact__input:disabled { background: #f9f9f9; color: #999; cursor: not-allowed; } /* ============================================== FOOTER ============================================== */ .footer { padding: 4rem 1.5rem 2rem; border-top: 1px solid #f0f0f0; background: #fafafa; } .footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } .footer__brand-name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: #111; margin-bottom: 0.4rem; } .footer__brand-desc { font-size: 0.875rem; color: #777; line-height: 1.5; } .footer__links-title { font-size: 0.8125rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .footer__link { display: block; font-size: 0.875rem; color: #555; padding: 0.3rem 0; transition: color 200ms ease; } .footer__link:hover { color: #F97316; } .footer__social { display: flex; gap: 0.75rem; } .footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: #777; background: #fff; border: 1px solid #eaeaea; transition: all 200ms ease; } .footer__social-link:hover { color: #F97316; border-color: #F97316; } .footer__copyright { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid #eaeaea; font-size: 0.8125rem; color: #999; text-align: center; } /* ============================================== RESPONSIVE ============================================== */ /* Tablet (≤ 900px) */ @media (max-width: 900px) { .nav__links, .nav__cta { display: none; } .nav__mobile-toggle { display: flex; } /* Mobile nav panel */ .nav--open { background: #fff; } .nav--open .nav__links { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 1rem 1.5rem; gap: 0.25rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); } .nav--open .nav__cta { display: flex; margin: 0.5rem 0 0; width: 100%; } .nav--open .nav__link { padding: 0.7rem 1rem; font-size: 1rem; width: 100%; } .hero__inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .hero__subheading { max-width: 100%; margin-left: auto; margin-right: auto; } .hero__content { text-align:left; max-width:550px; margin:0 auto; } .hero__actions { justify-content:flex-start; } .hero__visual { order: -1; } .hero__logo-card { max-width: 220px; } .hero { padding-top: 7rem; min-height: auto; } .home-page .hero { padding: 1.5rem; min-height: 0; } .home-page .hero__logo-card { max-width: 140px; } .packages__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .portal__grid { grid-template-columns: repeat(2, 1fr); } .why-us__grid { grid-template-columns: repeat(2, 1fr); } .testimonials__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .contact__layout { grid-template-columns: 1fr; gap: 2rem; } .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; } .payment__row { grid-template-columns: 1fr 1fr; } .payment__row .payment__field:last-child { grid-column: 1 / -1; } } /* Mobile (≤ 600px) */ @media (max-width: 600px) { .packages__toggle { max-width: 100%; border-radius: 10px; } .packages__toggle-btn { padding: 0.7rem 1rem; font-size: 0.9375rem; } .section-heading { margin-bottom: 2rem; } .hero { padding: 6rem 1.25rem 3rem; } .home-page .hero { padding: 1rem 1rem 0; } .home-page .hero__logo-card { max-width: 100px; } .home-page .hero__subheading { font-size: 0.875rem; margin-bottom: 1.25rem; } .home-page .footer__inner { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .home-page .footer__brand, .home-page .footer__social { display: none; } .hero__heading { font-size: clamp(1.75rem, 8vw, 2.25rem); } .hero__actions { flex-direction: column; } .hero__actions .btn { width: 100%; } .packages, .portal, .payment, .why-us, .testimonials, .contact { padding: 3.5rem 1.25rem; } .packages__toggle { max-width: 100%; } .package-card { padding: 1.5rem; } .portal__header { flex-direction: column; align-items: flex-start; padding: 1.5rem; } .portal__header-actions { flex-direction: column; width: 100%; } .portal__btn { width: 100%; justify-content: center; } .portal__grid { grid-template-columns: 1fr; } .portal__card { padding: 1.25rem 1.5rem; } .payment__card { padding: 1.75rem 1.25rem; } .why-us__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } .contact__info, .contact__form { padding: 1.5rem; } .footer__inner { grid-template-columns: 1fr; gap: 1.5rem; } .footer__social { justify-content: flex-start; } .payment__row { grid-template-columns: 1fr 1fr; } } styles.css /* ============================================== Barter Plumbing Services — Stylesheet Design: Ultra-minimalist, Stripe/Linear-inspired ============================================== */ /* ---------- Reset & Base ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; line-height: 1.6; color: #111; background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Home page: no scroll, everything in viewport */ .home-page { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } .home-page main { flex: 1; display: flex; align-items: center; padding-top: 64px; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } input, textarea { font-family: inherit; font-size: inherit; } /* ---------- Focus Styles ---------- */ :focus-visible { outline: 2px solid #F97316; outline-offset: 2px; } /* ---------- Skip Link ---------- */ .skip-link { position: absolute; top: -100%; left: 16px; z-index: 200; padding: 0.75rem 1.25rem; background: #F97316; color: #fff; font-size: 0.875rem; font-weight: 600; border-radius: 8px; transition: top 200ms ease; } .skip-link:focus { top: 12px; outline: 2px solid #F97316; outline-offset: 2px; } /* ---------- Utility ---------- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ---------- Page Section (offset for fixed nav) ---------- */ .page-section { padding-top: 7rem; } /* ---------- Section Heading ---------- */ .section-heading { font-size: clamp(1.75rem, 3.5vw, 2.5rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; text-align: center; margin-bottom: 3rem; color: #111; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; font-size: 0.9375rem; font-weight: 600; padding: 0.75rem 1.75rem; border-radius: 8px; transition: all 200ms ease; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; } .btn--primary { background: #F97316; color: #fff; border: 2px solid #F97316; } .btn--primary:hover { background: #ea580c; border-color: #ea580c; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.25); } .btn--primary:active { transform: translateY(0); box-shadow: none; } .btn--primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .btn--outline { background: transparent; color: #111; border: 2px solid #e5e5e5; } .btn--outline:hover { border-color: #111; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .btn--outline:active { transform: translateY(0); box-shadow: none; } .btn--outline:disabled { opacity: 0.4; cursor: not-allowed; transform: none; box-shadow: none; } /* ============================================== NAVIGATION ============================================== */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: #fff; border-bottom: 1px solid #f0f0f0; } .nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .nav__logo { flex-shrink: 0; } .nav__logo-text { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.06em; color: #999; border: 2px dashed #d4d4d4; border-radius: 8px; padding: 0.5rem 1rem; transition: border-color 200ms ease, color 200ms ease; } .nav__logo-text:hover { border-color: #F97316; color: #F97316; } .nav__links { display: flex; align-items: center; gap: 0.25rem; } .nav__link { font-size: 0.875rem; font-weight: 500; color: #555; padding: 0.5rem 0.85rem; border-radius: 8px; transition: color 200ms ease, background 200ms ease; } .nav__link:hover { color: #111; background: #f5f5f5; } .nav__link--active { color: #111; background: #f5f5f5; font-weight: 600; } .nav__cta { flex-shrink: 0; padding: 0.55rem 1.25rem; font-size: 0.875rem; } .nav__mobile-toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: 8px; transition: background 200ms ease; } .nav__mobile-toggle:hover { background: #f5f5f5; } .nav__mobile-icon, .nav__mobile-icon::before, .nav__mobile-icon::after { display: block; width: 20px; height: 2px; background: #111; border-radius: 2px; transition: all 200ms ease; } .nav__mobile-icon { position: relative; } .nav__mobile-icon::before, .nav__mobile-icon::after { content: ''; position: absolute; left: 0; } .nav__mobile-icon::before { top: -6px; } .nav__mobile-icon::after { top: 6px; } /* Mobile nav open state */ .nav--open .nav__mobile-icon { background: transparent; } .nav--open .nav__mobile-icon::before { top: 0; transform: rotate(45deg); } .nav--open .nav__mobile-icon::after { top: 0; transform: rotate(-45deg); } /* Home page: compact footer */ .home-page .footer { padding: 1.25rem 1.5rem 0.75rem; } .home-page .footer__inner { gap: 1.5rem; } .home-page .footer__copyright { padding-top: 0.75rem; } /* ============================================== HERO ============================================== */ .hero { display:flex; align-items:center; justify-content:center; width:100%; } /* Home page: tighter hero */ .home-page .hero { padding: 2rem 1.5rem; min-height: 0; } .hero__inner { max-width: 1050px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .hero__heading { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.1; margin-bottom: 1.5rem; color: #111; } .hero__subheading { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.65; color: #555; margin-bottom: 2.25rem; max-width: 520px; } .hero__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .hero__visual { display: flex; justify-content: center; align-items: center; } .hero__logo-card { width: 100%; max-width: 340px; aspect-ratio: 1 / 1; border: 2px dashed #d4d4d4; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: #fafafa; transition: border-color 200ms ease; } .hero__logo-card:hover { border-color: #F97316; } .hero__logo-card-text { font-size: 0.9375rem; font-weight: 700; letter-spacing: 0.08em; color: #aaa; text-align: center; line-height: 1.6; } /* ============================================== PACKAGES ============================================== */ .packages { padding: 5rem 1.5rem; background: #fafafa; } .packages__inner { max-width: 1100px; margin: 0 auto; } .packages__toggle { display: flex; justify-content: center; gap: 0.75rem; margin-bottom: 3rem; background: #eee; border-radius: 12px; padding: 0.35rem; max-width: 360px; margin-left: auto; margin-right: auto; } .packages__toggle-btn { flex: 1; padding: 0.85rem 1.5rem; font-size: 1rem; font-weight: 600; color: #666; border-radius: 10px; transition: all 200ms ease; text-align: center; border: 1px solid transparent; } .packages__toggle-btn--active { background: #fff; color: #111; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .packages__toggle-btn:hover:not(.packages__toggle-btn--active) { color: #111; } /* Package grid panels */ .packages__grid { display: none; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; animation: fadeSlideIn 300ms ease; } .packages__grid--active { display: grid; } @keyframes fadeSlideIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Package Card */ .package-card { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 2rem 1.75rem; display: flex; flex-direction: column; transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease; } .package-card:hover { border-color: #d4d4d4; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06); transform: translateY(-2px); } .package-card--enterprise { border-color: #F97316; } .package-card--enterprise:hover { border-color: #ea580c; box-shadow: 0 8px 30px rgba(249, 115, 22, 0.12); } .package-card__name { font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; color: #111; } .package-card__price { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.04em; color: #111; margin-bottom: 1.5rem; } .package-card--enterprise .package-card__price { color: #F97316; font-size: 2rem; } .package-card__features { flex: 1; margin-bottom: 1.75rem; } .package-card__features li { position: relative; padding-left: 1.5rem; margin-bottom: 0.65rem; font-size: 0.9375rem; color: #555; line-height: 1.5; } .package-card__features li::before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: #F97316; } .package-card__btn { width: 100%; } /* ============================================== CUSTOMER PORTAL ============================================== */ .portal { padding: 5rem 1.5rem; } .portal__inner { max-width: 1100px; margin: 0 auto; } .portal__dashboard { background: #fff; border: 1px solid #eaeaea; border-radius: 16px; overflow: hidden; } .portal__header { display: flex; align-items: center; justify-content: space-between; padding: 1.75rem 2rem; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; gap: 1rem; } .portal__welcome { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #111; } .portal__header-actions { display: flex; gap: 0.75rem; } .portal__btn { padding: 0.55rem 1.25rem; font-size: 0.875rem; } .portal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: #f0f0f0; } .portal__card { background: #fff; padding: 1.75rem; transition: background 200ms ease; } .portal__card:hover { background: #fafafa; } .portal__card--wide { grid-column: 1 / -1; } .portal__card-title { font-size: 0.8125rem; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.65rem; } .portal__card-value { font-size: 1.25rem; font-weight: 700; color: #111; margin-bottom: 0.35rem; letter-spacing: -0.02em; } .portal__card-value--large { font-size: 2rem; font-weight: 800; letter-spacing: -0.04em; } .portal__card-value--small { font-size: 1rem; font-weight: 400; color: #999; } .portal__card-meta { font-size: 0.8125rem; color: #999; } /* ============================================== PAYMENT ============================================== */ .payment { padding: 5rem 1.5rem; background: #fafafa; } .payment__inner { max-width: 580px; margin: 0 auto; } .payment__card { background: #fff; border: 1px solid #eaeaea; border-radius: 16px; padding: 2.5rem 2rem; } .payment__form { display: flex; flex-direction: column; gap: 1.25rem; } .payment__field { display: flex; flex-direction: column; gap: 0.4rem; } .payment__label { font-size: 0.8125rem; font-weight: 600; color: #555; letter-spacing: 0.02em; } .payment__input { padding: 0.75rem 0.875rem; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 0.9375rem; color: #111; background: #fff; transition: border-color 200ms ease; min-width: 0; } .payment__input:focus { border-color: #F97316; } .payment__input:disabled { background: #f9f9f9; color: #999; cursor: not-allowed; } .payment__row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.5rem; } .payment__row .payment__field { min-width: 0; overflow: hidden; } .payment__row .payment__label { font-size: 0.75rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .payment__row .payment__input { padding: 0.5rem 0.55rem; font-size: 0.8125rem; width: 100%; } .payment__submit { width: 100%; margin-top: 0.5rem; } .payment__disclaimer { text-align: center; font-size: 0.8125rem; color: #999; margin-top: -0.25rem; } /* Payment Success State */ .payment__success { text-align: center; padding: 2rem 1rem; animation: fadeSlideIn 300ms ease; } .payment__success-icon { margin-bottom: 1.25rem; } .payment__success-heading { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; color: #111; margin-bottom: 0.75rem; } .payment__success-text { font-size: 0.9375rem; color: #666; line-height: 1.6; max-width: 320px; margin: 0 auto 2rem; } /* ============================================== WHY CHOOSE US ============================================== */ .why-us { padding: 5rem 1.5rem; } .why-us__inner { max-width: 1100px; margin: 0 auto; } .why-us__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .why-us__card { text-align: center; padding: 2rem 1.5rem; border-radius: 12px; transition: background 200ms ease; } .why-us__card:hover { background: #fafafa; } .why-us__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 12px; background: #fff5f0; color: #F97316; margin-bottom: 1.25rem; transition: background 200ms ease; } .why-us__card:hover .why-us__icon { background: #ffedd5; } .why-us__title { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.6rem; color: #111; } .why-us__desc { font-size: 0.875rem; color: #666; line-height: 1.6; } /* ============================================== TESTIMONIALS ============================================== */ .testimonials { padding: 5rem 1.5rem; background: #fafafa; } .testimonials__inner { max-width: 1000px; margin: 0 auto; } .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .testimonial-card { background: #fff; border: 1px solid #eaeaea; border-radius: 12px; padding: 2rem 1.75rem; transition: border-color 200ms ease, box-shadow 200ms ease; } .testimonial-card:hover { border-color: #d4d4d4; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04); } .testimonial-card__text { font-size: 0.9375rem; color: #777; font-style: italic; line-height: 1.65; } /* ============================================== CONTACT ============================================== */ .contact { padding: 5rem 1.5rem; } .contact__inner { max-width: 1000px; margin: 0 auto; } .contact__layout { display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem; align-items: start; } .contact__info { display: flex; flex-direction: column; gap: 2rem; padding: 2.5rem; background: #fff; border: 1px solid #eaeaea; border-radius: 16px; } .contact__info-item { display: flex; flex-direction: column; gap: 0.3rem; } .contact__info-label { font-size: 0.8125rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; } .contact__info-value { font-size: 1rem; font-weight: 600; color: #111; line-height: 1.6; } a.contact__info-value { display: inline; transition: color 200ms ease; } a.contact__info-value:hover { color: #F97316; } .contact__form { display: flex; flex-direction: column; gap: 1.25rem; padding: 2.5rem; background: #fff; border: 1px solid #eaeaea; border-radius: 16px; } .contact__field { display: flex; flex-direction: column; gap: 0.4rem; } .contact__label { font-size: 0.8125rem; font-weight: 600; color: #555; letter-spacing: 0.02em; } .contact__input { padding: 0.75rem 0.875rem; border: 1px solid #e5e5e5; border-radius: 8px; font-size: 0.9375rem; color: #111; background: #fff; transition: border-color 200ms ease; resize: vertical; } .contact__input:focus { border-color: #F97316; } .contact__input:disabled { background: #f9f9f9; color: #999; cursor: not-allowed; } /* ============================================== FOOTER ============================================== */ .footer { padding: 4rem 1.5rem 2rem; border-top: 1px solid #f0f0f0; background: #fafafa; } .footer__inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; } .footer__brand-name { font-size: 1rem; font-weight: 700; letter-spacing: -0.02em; color: #111; margin-bottom: 0.4rem; } .footer__brand-desc { font-size: 0.875rem; color: #777; line-height: 1.5; } .footer__links-title { font-size: 0.8125rem; font-weight: 600; color: #999; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem; } .footer__link { display: block; font-size: 0.875rem; color: #555; padding: 0.3rem 0; transition: color 200ms ease; } .footer__link:hover { color: #F97316; } .footer__social { display: flex; gap: 0.75rem; } .footer__social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: #777; background: #fff; border: 1px solid #eaeaea; transition: all 200ms ease; } .footer__social-link:hover { color: #F97316; border-color: #F97316; } .footer__copyright { grid-column: 1 / -1; padding-top: 2rem; border-top: 1px solid #eaeaea; font-size: 0.8125rem; color: #999; text-align: center; } /* ============================================== RESPONSIVE ============================================== */ /* Tablet (≤ 900px) */ @media (max-width: 900px) { .nav__links, .nav__cta { display: none; } .nav__mobile-toggle { display: flex; } /* Mobile nav panel */ .nav--open { background: #fff; } .nav--open .nav__links { display: flex; flex-direction: column; position: absolute; top: 64px; left: 0; right: 0; background: #fff; border-bottom: 1px solid #f0f0f0; padding: 1rem 1.5rem; gap: 0.25rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06); } .nav--open .nav__cta { display: flex; margin: 0.5rem 0 0; width: 100%; } .nav--open .nav__link { padding: 0.7rem 1rem; font-size: 1rem; width: 100%; } .hero__inner { grid-template-columns: 1fr; gap: 3rem; text-align: center; } .hero__subheading { max-width: 100%; margin-left: auto; margin-right: auto; } .hero__content { text-align:left; max-width:550px; margin:0 auto; } .hero__actions { justify-content:flex-start; } .hero__visual { order: -1; } .hero__logo-card { max-width: 220px; } .hero { padding-top: 7rem; min-height: auto; } .home-page .hero { padding: 1.5rem; min-height: 0; } .home-page .hero__logo-card { max-width: 140px; } .packages__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .portal__grid { grid-template-columns: repeat(2, 1fr); } .why-us__grid { grid-template-columns: repeat(2, 1fr); } .testimonials__grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; } .contact__layout { grid-template-columns: 1fr; gap: 2rem; } .footer__inner { grid-template-columns: 1fr 1fr; gap: 2rem; } .payment__row { grid-template-columns: 1fr 1fr; } .payment__row .payment__field:last-child { grid-column: 1 / -1; } } /* Mobile (≤ 600px) */ @media (max-width: 600px) { .packages__toggle { max-width: 100%; border-radius: 10px; } .packages__toggle-btn { padding: 0.7rem 1rem; font-size: 0.9375rem; } .section-heading { margin-bottom: 2rem; } .hero { padding: 6rem 1.25rem 3rem; } .home-page .hero { padding: 1rem 1rem 0; } .home-page .hero__logo-card { max-width: 100px; } .home-page .hero__subheading { font-size: 0.875rem; margin-bottom: 1.25rem; } .home-page .footer__inner { grid-template-columns: 1fr 1fr; gap: 0.75rem; } .home-page .footer__brand, .home-page .footer__social { display: none; } .hero__heading { font-size: clamp(1.75rem, 8vw, 2.25rem); } .hero__actions { flex-direction: column; } .hero__actions .btn { width: 100%; } .packages, .portal, .payment, .why-us, .testimonials, .contact { padding: 3.5rem 1.25rem; } .packages__toggle { max-width: 100%; } .package-card { padding: 1.5rem; } .portal__header { flex-direction: column; align-items: flex-start; padding: 1.5rem; } .portal__header-actions { flex-direction: column; width: 100%; } .portal__btn { width: 100%; justify-content: center; } .portal__grid { grid-template-columns: 1fr; } .portal__card { padding: 1.25rem 1.5rem; } .payment__card { padding: 1.75rem 1.25rem; } .why-us__grid { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; } .contact__info, .contact__form { padding: 1.5rem; } .footer__inner { grid-template-columns: 1fr; gap: 1.5rem; } .footer__social { justify-content: flex-start; } .payment__row { grid-template-columns: 1fr 1fr; } }