/* Advait Ayurvedic Clinic & Panchakarma Centre — design system Light/dark themes via CSS custom properties. Default follows system preference; a manual toggle overrides via [data-theme] on . */ :root { --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: Georgia, "Times New Roman", serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --shadow: 0 10px 30px -12px rgba(20, 30, 20, 0.25); --shadow-sm: 0 2px 10px -4px rgba(20, 30, 20, 0.2); --container: 1160px; --header-h: 84px; /* ---- light theme (default) ---- */ --bg: #faf7f0; --bg-alt: #f1ead9; --surface: #ffffff; --surface-2: #fbf6ec; --border: #e6ddc9; --text: #2a2620; --text-muted: #6b6154; --heading: #20321f; --primary: #2f6b3f; --primary-strong: #234f2f; --primary-tint: #e7f1e6; --accent: #b9812f; --accent-strong: #92661f; --on-primary: #ffffff; --link: #2f6b3f; --focus-ring: #1c7a49; --overlay-scrim: rgba(15, 20, 14, 0.55); } :root[data-theme="dark"] { --bg: #121712; --bg-alt: #182018; --surface: #1b241c; --surface-2: #202b21; --border: #2c3a2c; --text: #e9e6db; --text-muted: #a9a595; --heading: #f1ede0; --primary: #7fc98d; --primary-strong: #9adba5; --primary-tint: #1e2e20; --accent: #e3b25b; --accent-strong: #f0c877; --on-primary: #10240f; --link: #8fd39b; --focus-ring: #9adba5; --overlay-scrim: rgba(6, 10, 6, 0.65); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #121712; --bg-alt: #182018; --surface: #1b241c; --surface-2: #202b21; --border: #2c3a2c; --text: #e9e6db; --text-muted: #a9a595; --heading: #f1ede0; --primary: #7fc98d; --primary-strong: #9adba5; --primary-tint: #1e2e20; --accent: #e3b25b; --accent-strong: #f0c877; --on-primary: #10240f; --link: #8fd39b; --focus-ring: #9adba5; --overlay-scrim: rgba(6, 10, 6, 0.65); } } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--bg); } html, body { margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color .25s ease, color .25s ease; } img { max-width: 100%; display: block; } a { color: var(--link); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--heading); line-height: 1.25; margin: 0 0 .6em; } h1 { font-size: clamp(1.9rem, 3.2vw, 2.75rem); } h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1em; color: var(--text); } ul, ol { padding-left: 1.3em; margin: 0 0 1em; } li { margin-bottom: .35em; } hr { border: none; border-top: 1px solid var(--border); margin: 2em 0; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 24px; } /* Skip link */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--primary); color: var(--on-primary); padding: 10px 16px; z-index: 1000; border-radius: 0 0 var(--radius-sm) 0; } .skip-link:focus { left: 0; } /* ---------------- Topbar ---------------- */ .topbar { background: var(--primary-strong); color: #fff; font-size: .85rem; } .topbar .container { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; flex-wrap: wrap; } .topbar a { color: #fff; } .topbar-info { display: flex; gap: 20px; flex-wrap: wrap; } .topbar-info span { display: inline-flex; align-items: center; gap: 6px; } .topbar-info svg { width: 14px; height: 14px; flex: none; } /* ---------------- Header / nav ---------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: var(--surface); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); } .site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); gap: 24px; } .brand { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--heading); flex: none; } .brand:hover { text-decoration: none; } .brand img { height: 46px; width: auto; border-radius: 6px; } .brand-text small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .7rem; color: var(--text-muted); } /* Primary nav */ .primary-nav { flex: 1; display: flex; justify-content: center; } .nav-list, .nav-list ul { list-style: none; margin: 0; padding: 0; display: flex; } .nav-list { gap: 4px; } .nav-list > li { position: relative; } .nav-list > li > a, .nav-list > li > .nav-trigger { display: flex; align-items: center; gap: 4px; padding: 12px 14px; color: var(--text); font-weight: 600; font-size: .95rem; border-radius: var(--radius-sm); cursor: pointer; background: none; border: none; font-family: inherit; } .nav-list > li > a:hover, .nav-list > li > .nav-trigger:hover, .nav-list > li.current > a { color: var(--primary); text-decoration: none; background: var(--primary-tint); } .nav-list .chevron { width: 10px; height: 10px; transition: transform .2s ease; } /* Dropdown panels (all levels) */ .nav-list ul { position: absolute; top: 100%; left: 0; min-width: 260px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow); padding: 8px; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s ease; } .nav-list li > ul ul { top: 0; left: 100%; margin-left: 6px; } .nav-list li:hover > ul, .nav-list li.open > ul, .nav-list li:focus-within > ul { opacity: 1; visibility: visible; transform: translateY(0); } .nav-list ul li a, .nav-list ul li .nav-trigger { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: var(--radius-sm); font-weight: 500; font-size: .9rem; white-space: nowrap; color: var(--text); } .nav-list ul li a:hover, .nav-list ul li .nav-trigger:hover { background: var(--primary-tint); color: var(--primary); text-decoration: none; } .nav-cta { flex: none; display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: var(--on-primary); padding: 10px 18px; border-radius: 999px; font-weight: 700; font-size: .9rem; white-space: nowrap; } .nav-cta:hover { background: var(--primary-strong); text-decoration: none; } .nav-cta svg { width: 16px; height: 16px; } /* Theme toggle button */ .theme-toggle { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } :root[data-theme="dark"] .theme-toggle .icon-moon { display: none; } :root[data-theme="dark"] .theme-toggle .icon-sun { display: block; } /* Mobile nav toggle */ .nav-toggle { display: none; flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-2); align-items: center; justify-content: center; cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; color: var(--text); } /* ---------------- Hero / Slider ---------------- */ .hero { position: relative; overflow: hidden; min-height: 70vh; display: flex; align-items: center; color: #fff; } .hero-slides { position: absolute; inset: 0; } .hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity 1s ease; } .hero-slide.active { opacity: 1; } .hero-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, var(--overlay-scrim) 0%, rgba(10,10,8,.35) 100%); } .hero-content { position: relative; z-index: 2; max-width: 640px; padding: 64px 24px; } .hero-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 700; color: var(--accent); } .hero h1 { color: #fff; margin: .3em 0; } .hero p { color: rgba(255,255,255,.9); font-size: 1.05rem; max-width: 46ch; } .hero-actions { display: flex; gap: 14px; margin-top: 1.6em; flex-wrap: wrap; } .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: .95rem; border: 2px solid transparent; cursor: pointer; } .btn:hover { text-decoration: none; } .btn-primary { background: var(--accent); color: #241a05; } .btn-primary:hover { background: var(--accent-strong); } .btn-outline { border-color: rgba(255,255,255,.8); color: #fff; } .btn-outline:hover { background: rgba(255,255,255,.12); } .btn-solid { background: var(--primary); color: var(--on-primary); } .btn-solid:hover { background: var(--primary-strong); } .hero-dots { position: absolute; z-index: 3; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.5); cursor: pointer; } .hero-dots button.active { background: #fff; } /* ---------------- Sections ---------------- */ .section { padding: 72px 0; } .section-alt { background: var(--bg-alt); } .section-head { max-width: 640px; margin: 0 auto 44px; text-align: center; } .section-head .kicker { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--primary); } /* Service cards */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .card img { aspect-ratio: 4/3; object-fit: cover; width: 100%; } .card-icon-fallback { aspect-ratio: 4/3; width: 100%; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; } .card-icon-fallback svg { width: 42px; height: 42px; } .card-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; } .card-body h3 { margin-bottom: .4em; } .card-body p { color: var(--text-muted); flex: 1; } .card-link { font-weight: 700; margin-top: 10px; display: inline-flex; align-items: center; gap: 6px; } .card-link svg { width: 14px; height: 14px; } /* Info strip (hours / address / phone) */ .info-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 24px; } .info-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; display: flex; gap: 16px; align-items: flex-start; } .info-item .icon { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; } .info-item .icon svg { width: 20px; height: 20px; } .info-item h4 { margin: 0 0 4px; font-family: var(--font-body); font-size: 1rem; color: var(--heading); } .info-item p { margin: 0; color: var(--text-muted); font-size: .92rem; } /* Content page layout */ .page-hero { background: var(--primary-strong); color: #fff; padding: 46px 0; } .page-hero .container { display: flex; flex-direction: column; gap: 8px; } .page-hero h1 { color: #fff; margin: 0; } .breadcrumb { font-size: .85rem; color: rgba(255,255,255,.8); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .breadcrumb a { color: rgba(255,255,255,.9); } .breadcrumb a:hover { color: #fff; } .breadcrumb .sep { opacity: .6; } .content-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; align-items: start; } .content-body { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 36px 40px; } .content-body img { border-radius: var(--radius-md); margin: 1.2em 0; } .content-body > *:first-child { margin-top: 0; } .sidebar { position: sticky; top: calc(var(--header-h) + 24px); display: flex; flex-direction: column; gap: 20px; } .sidebar-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; } .sidebar-card h3 { font-size: 1rem; margin-bottom: 14px; } .sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; } .sidebar-list a { display: block; padding: 9px 10px; border-radius: var(--radius-sm); color: var(--text); font-size: .92rem; font-weight: 500; } .sidebar-list a:hover { background: var(--primary-tint); color: var(--primary); text-decoration: none; } .sidebar-list a.current { background: var(--primary-tint); color: var(--primary); font-weight: 700; } .sidebar-list ul { list-style: none; margin: 0; padding-left: 14px; } .sidebar-cta { background: var(--primary); color: var(--on-primary); text-align: center; } .sidebar-cta h3 { color: var(--on-primary); } .sidebar-cta .btn { width: 100%; justify-content: center; margin-top: 10px; } /* About page */ .about-grid { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 40px; align-items: start; } .doctor-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; text-align: center; } .doctor-card .avatar { width: 120px; height: 120px; border-radius: 50%; background: var(--primary-tint); color: var(--primary); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; } .doctor-card .avatar svg { width: 56px; height: 56px; } .doctor-card h3 { margin-bottom: 2px; } .doctor-card .cred { color: var(--text-muted); font-size: .9rem; margin-bottom: 14px; } .pill-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; } .pill { background: var(--primary-tint); color: var(--primary); font-size: .78rem; font-weight: 700; padding: 5px 12px; border-radius: 999px; } /* Testimonial / notice banner (used where we deliberately omit unverified content) */ .notice { border: 1px dashed var(--border); background: var(--surface-2); border-radius: var(--radius-md); padding: 18px 22px; color: var(--text-muted); font-size: .92rem; } /* Contact form (placeholder) */ .form-card { position: relative; background: var(--surface-2); border: 1px dashed var(--border); border-radius: var(--radius-lg); padding: 30px 32px; margin-top: 14px; } .form-card-flag { display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-strong); background: var(--primary-tint); padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } .form-field { display: flex; flex-direction: column; gap: 6px; } .form-field.full { grid-column: 1 / -1; } .form-field label { font-size: .85rem; font-weight: 600; color: var(--heading); } .form-field input, .form-field select, .form-field textarea { font: inherit; padding: 11px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); } .form-field textarea { resize: vertical; min-height: 100px; } .form-field input:disabled, .form-field select:disabled, .form-field textarea:disabled { opacity: .65; cursor: not-allowed; } .form-submit-row { margin-top: 20px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; } /* ---------------- Footer ---------------- */ .site-footer { background: var(--primary-strong); color: rgba(255,255,255,.88); padding-top: 56px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 36px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.15); } .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer-brand img { height: 42px; border-radius: 6px; } .footer-brand span { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: #fff; } .site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .95rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 16px; } .site-footer p { color: rgba(255,255,255,.75); font-size: .92rem; } .site-footer a { color: rgba(255,255,255,.85); } .site-footer a:hover { color: #fff; } .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; font-size: .92rem; } .footer-contact { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; font-size: .92rem; } .footer-contact li { display: flex; gap: 10px; align-items: flex-start; } .footer-contact svg { width: 16px; height: 16px; flex: none; margin-top: 3px; color: var(--accent); } .footer-bottom { padding: 20px 0 28px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: rgba(255,255,255,.65); } .footer-bottom a { color: rgba(255,255,255,.8); } /* ---------------- Responsive ---------------- */ @media (max-width: 980px) { .content-layout { grid-template-columns: 1fr; } .sidebar { position: static; } .about-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 860px) { .topbar .container { justify-content: center; text-align: center; } .nav-toggle { display: inline-flex; } .primary-nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--surface); padding: 12px 20px 40px; overflow-y: auto; display: none; justify-content: flex-start; } .primary-nav.open { display: flex; } .nav-list { flex-direction: column; width: 100%; gap: 2px; } .nav-list ul { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: none; background: var(--surface-2); display: none; margin: 4px 0 4px 14px; } .nav-list li.open > ul { display: flex; } .nav-list li > ul ul { margin-left: 14px; } .nav-list > li > a, .nav-list > li > .nav-trigger { width: 100%; justify-content: space-between; } .nav-cta { display: none; } } @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr; } .content-body { padding: 26px 22px; } .hero { min-height: 78vh; } .form-grid { grid-template-columns: 1fr; } .form-card { padding: 22px 20px; } }