/* ======================================= Polished Responsive Styles (Drop-in) ======================================= */ /* Fonts: add these in for best performance: */ @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); :root { --font-body: 'Lato', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; --font-heading: "Raleway", sans-serif;; --clr-text: #444; --clr-heading: #2c3e50; --clr-bg: #f8f9fa; --clr-surface: #ffffff; --clr-muted: #777; --clr-primary: #1abc9c; /* Teal */ --clr-primary-600: #16a085; /* Darker teal (hover) */ --clr-dark: #34495e; /* CTA bg */ --radius: 10px; --shadow: 0 6px 18px rgba(0,0,0,0.06); --container-max: 64rem; /* ~1024px */ } /* Base reset & essentials */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); line-height: 1.7; color: var(--clr-text); background-color: var(--clr-bg); } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } h1, h2, h3 { font-family: var(--font-heading); color: var(--clr-heading); font-weight: 600; line-height: 1.25; margin: 0 0 .6em; } .Treatment-container { width: min(92%, var(--container-max)); margin-inline: auto; padding-block: 1.25rem; } /* --- Header with Background Image --- */ .Treatment-header { /* Replace image URL with yours */ background-image: linear-gradient(rgba(131, 141, 151, 0.65), rgba(44, 62, 80, 0.65)), url('/assets/Treatments/psoriasis.png'); background-size: cover; background-position: center; color: #ffffff; text-align: center; padding: clamp(3rem, 8vw, 5rem) 0; } .Treatment-header h1 { margin: 0; color: #ffffff; font-size: clamp(2rem, 1.2rem + 2.5vw, 3rem); } .Treatment-header .tagline { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); opacity: 0.95; margin-top: 10px; } /* --- Main Content Sections --- */ section { background: var(--clr-surface); padding: clamp(1.5rem, 3.5vw, 2.5rem); margin-top: 30px; border-radius: var(--radius); box-shadow: var(--shadow); font-family: "Raleway", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; } section h2 { margin-top: 0; font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem); border-bottom: 3px solid var(--clr-primary); padding-bottom: 10px; margin-bottom: 20px; } /* --- Image and Text Layout --- */ .content-wrapper { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); } .content-text { min-width: 0; /* prevents overflow in grid */ } .section-image { width: 100%; height: auto; border-radius: var(--radius); box-shadow: var(--shadow); object-fit: cover; } /* --- Section-Specific Styling --- */ #why-treat ul { list-style: none; padding-left: 0; margin: 0; } #why-treat li { padding: 10px 0 10px 30px; position: relative; font-size: 1.05rem; } #why-treat li::before { content: '✔'; color: var(--clr-primary); font-weight: bold; position: absolute; left: 0; top: 10px; } /* --- Treatment Steps with Icons --- */ .treatment-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1rem, 2.5vw, 1.5rem); text-align: center; margin-top: 25px; } .step { background: var(--clr-surface); border-radius: var(--radius); padding: 1.1rem; box-shadow: var(--shadow); } .step img { width: auto; height: 200px; margin: 0 auto 12px; object-fit: cover; } .treatment-steps h3 { color: var(--clr-primary); font-size: 1.15rem; margin-bottom: 6px; } /* --- Call to Action (CTA) --- */ #cta { background-color: var(--clr-dark); color: #ffffff; text-align: center; padding: clamp(2rem, 5vw, 3.25rem); } #cta h2 { color: #ffffff; border-bottom: none; margin-bottom: .4rem; } .cta-button { display: inline-block; background-color: var(--clr-primary); color: #ffffff; padding: 0.95rem 2.1rem; font-size: 1rem; font-weight: 700; text-decoration: none; border-radius: 999px; margin-top: 18px; transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.25s ease; box-shadow: 0 8px 18px rgba(26, 188, 156, 0.25); } .cta-button:hover { background-color: var(--clr-primary-600); transform: translateY(-2px); box-shadow: 0 12px 24px rgba(26, 188, 156, 0.3); } .cta-button:active { transform: translateY(0); box-shadow: 0 6px 12px rgba(26, 188, 156, 0.25); } .cta-button:focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } /* --- Responsive Breakpoints --- */ /* Large tablets and below */ @media (max-width: 992px) { .content-wrapper { grid-template-columns: 1fr; /* stack */ } } /* Tablets and below */ @media (max-width: 768px) { section { padding: 1.25rem 1.1rem; } } /* Small phones */ @media (max-width: 480px) { .Treatment-container { width: 94%; } } /* Reduced motion for accessibility */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }