that sits inside class="treat" The PROPERTIES say what to change, e.g. color, font-size, padding. "Cascading" means that when two rules target the same element, the more specific one (or the later one) wins. Text between /* and * / is a comment (like this block). UNITS YOU WILL SEE px – screen pixels rem – multiples of the base text size (1rem = 16px here) em – multiples of the current element's text size % – a percentage of the parent's size fr – a "fraction" of the free space in a grid ch – the width of one character, used to limit line length ========================================================================== */ /* -------------------------------------------------------------------------- 1. DESIGN TOKENS (CSS variables) -------------------------------------------------------------------------- Instead of typing the same colour code in 30 places, we name each colour once here. Everywhere else says var(--neem), var(--turmeric), etc. To change the site's green, edit ONE line below. The palette is taken from Ayurveda itself: neem-leaf green, turmeric gold, and one colour for each dosha. ":root" means "the whole page". -------------------------------------------------------------------------- */ :root { --ground: #F4F6EF; /* page background: very pale leaf white */ --surface: #FFFFFF; /* cards and form background */ --band: #E6EBDD; /* the tinted strips behind alternate sections */ --ink: #18302A; /* main text: very dark green */ --muted: #566A60; /* secondary text: softer grey-green */ --line: #CBD5C3; /* thin borders and dividers */ --neem: #3F5E34; /* main brand colour: buttons and links */ --turmeric:#B87C0C; /* accent: small labels, numbers, Sanskrit */ --turmeric-soft: #F3E3BC; /* pale turmeric for badges */ --on-accent: #FFFFFF; /* text on top of the green buttons */ --error: #B23B2B; /* form error message */ /* One colour per dosha, used in the diagram and quiz results */ --vata: #7E8FB0; /* air / space → cool blue-grey */ --pitta: #C9772E; /* fire / water → warm orange */ --kapha: #5E8C6A; /* water / earth → calm green */ /* Fonts. If a font fails to load, the browser tries the next one in the list, ending with a generic family that always exists. */ --display: "Marcellus", Georgia, "Times New Roman", serif; --body: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif; --deva: "Tiro Devanagari Sanskrit", "Noto Serif Devanagari", serif; } /* DARK MODE If the visitor's phone or computer is set to dark mode, the browser uses these colours instead. Because every rule below uses the variables, the whole site switches automatically. */ @media (prefers-color-scheme: dark) { :root { color-scheme: dark; /* also darkens form fields & scrollbars */ --ground: #101A16; --surface: #17241F; --band: #1C2C25; --ink: #E7EDE3; --muted: #9FB2A6; --line: #2E4239; --neem: #9CC08A; --turmeric:#E4AA3F; --turmeric-soft: #3A2F17; --on-accent: #101A16; --error: #F08A7A; } } /* -------------------------------------------------------------------------- 2. BASICS — rules that apply to the whole page -------------------------------------------------------------------------- */ /* Make width include padding and border. This makes sizes predictable. */ * { box-sizing: border-box; } /* Clicking a menu link glides to the section instead of jumping. */ html { scroll-behavior: smooth; } /* Some people get dizzy from motion and turn on "reduce motion" in their settings. We respect that by switching animations off for them. */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } } body { margin: 0; padding-inline: 20px; /* 20px gap on the left and right edges */ background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.6; /* space between lines of text */ } /* .wrap keeps content from stretching too wide on big screens and centres it ("margin-inline: auto" = equal space left and right). */ .wrap { max-width: 1080px; margin-inline: auto; } img { max-width: 100%; } /* pictures never overflow the screen */ [hidden] { display: none !important; } /* anything marked hidden stays hidden */ /* Headings use the display font. text-wrap: balance splits long headings into lines of similar length, which looks neater. */ h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.15; text-wrap: balance; margin: 0; } /* clamp(min, preferred, max): the heading grows with the screen width but never goes below 1.8rem or above 2.5rem. */ h2 { font-size: clamp(1.8rem, 4vw, 2.5rem); } h3 { font-size: 1.3rem; } p { margin: 0; } a { color: var(--neem); } /* A clear outline when someone moves around the page with the keyboard (Tab key). Important for accessibility. */ :focus-visible { outline: 2px solid var(--turmeric); outline-offset: 3px; border-radius: 4px; } /* -------------------------------------------------------------------------- 3. REUSABLE PIECES — used in several sections -------------------------------------------------------------------------- */ /* The small gold capital-letter labels above headings, e.g. "CLASSICAL AYURVEDA · MUNDHWA, PUNE". */ .eyebrow { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--turmeric); font-weight: 600; } .deva { font-family: var(--deva); } /* Sanskrit text */ .hint { color: var(--muted); font-size: .85rem; } /* BUTTONS .btn is the shared shape; .primary (filled green) and .ghost (outline only) are the two versions. An element can have both classes: class="btn primary". */ .btn { display: inline-flex; align-items: center; gap: .5em; padding: .8em 1.4em; border-radius: 999px; /* a huge radius = fully rounded "pill" */ border: 1.5px solid var(--neem); font: 600 .95rem var(--body); text-decoration: none; /* remove the link underline */ cursor: pointer; /* show the hand pointer */ transition: transform .15s; /* animate the hover lift over 0.15 s */ } .btn:hover { transform: translateY(-1px); } /* lift 1px on hover */ .btn.primary { background: var(--neem); color: var(--on-accent); } .btn.ghost { background: transparent; color: var(--neem); } /* Every section gets the same space above and below. */ section { padding-block: 72px; } /* .band = full-width tinted strip. The negative margin cancels the body's 20px side padding so the colour reaches the screen edges; the padding puts the 20px gap back for the text inside. */ .band { background: var(--band); margin-inline: -20px; padding-inline: 20px; } /* Shared heading row for sections: title on the left, note on the right. "flex" lays children out in a row; flex-wrap lets them drop to two lines on narrow screens. */ .head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 36px; } .head p { color: var(--muted); max-width: 40ch; } /* -------------------------------------------------------------------------- 4. HEADER -------------------------------------------------------------------------- */ header.top { position: sticky; /* stays stuck to the top while scrolling */ top: 0; z-index: 10; /* sits above everything else */ /* semi-transparent background + blur = "frosted glass" effect */ background: color-mix(in srgb, var(--ground) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); margin-inline: -20px; padding: 12px 20px; } header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; } /* The logo text: short name + Devanagari on the first line, the rest of the full name as a small caption underneath. */ .brand { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--ink); min-width: 0; } .brand-name { display: flex; align-items: baseline; gap: 10px; } .brand b { font-family: var(--display); font-weight: 400; font-size: 1.35rem; line-height: 1.2; } .brand .deva { color: var(--turmeric); font-size: 1.05rem; } .brand small { font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); line-height: 1.3; } nav { display: flex; gap: 22px; align-items: center; flex-shrink: 0; } nav .btn { white-space: nowrap; } /* keep "Book a consultation" on one line */ nav a { color: var(--muted); text-decoration: none; font-weight: 500; font-size: .93rem; } nav a:hover { color: var(--ink); } /* -------------------------------------------------------------------------- 5. HERO (opening section) "grid" splits it into two columns: 1.15 parts text, 0.85 parts drawing. -------------------------------------------------------------------------- */ .hero { display: grid; grid-template-columns: 1.15fr .85fr; gap: 48px; align-items: center; padding-block: 64px 56px; } .hero h1 { font-size: clamp(2.4rem, 6vw, 4rem); margin-block: 14px 18px; } .hero .lede { font-size: 1.12rem; color: var(--muted); max-width: 34em; } .hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* The Sanskrit verse, with a thin gold line on its left */ .sloka { margin-top: 34px; padding-left: 16px; border-left: 2px solid var(--turmeric); } .sloka .deva { font-size: 1.25rem; } .sloka small { display: block; color: var(--muted); font-size: .85rem; margin-top: 2px; } /* The SVG dosha diagram */ .doshas { width: 100%; max-width: 420px; justify-self: center; } .doshas text { font-family: var(--display); fill: var(--ink); } /* SVG uses "fill" for text colour */ .doshas .sub { font-family: var(--body); font-size: 11px; fill: var(--muted); letter-spacing: .1em; } .doshas .centre{ fill: var(--turmeric); } /* -------------------------------------------------------------------------- 6. ABOUT THE DOCTOR -------------------------------------------------------------------------- */ .about { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; } /* The photo frame: an arch shape, like a temple doorway. border-radius with 4 values = top-left, top-right, bottom-right, bottom-left corners. object-fit: cover crops a real photo neatly. */ .portrait { aspect-ratio: 4 / 5; width: 100%; max-width: 100%; object-fit: cover; border-radius: 200px 200px 16px 16px; background: linear-gradient(160deg, var(--turmeric-soft), var(--band)); border: 1px solid var(--line); display: grid; place-items: center; padding: 20px; color: var(--muted); font-size: .85rem; text-align: center; } img.portrait { padding: 0; height: auto; background: #fff; } /* the photo: no inner padding, white behind it */ .about h2 { margin-block: 10px 16px; } .about p + p { margin-top: 14px; } /* space between paragraphs */ .about .body { max-width: 62ch; } /* comfortable reading width */ .creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; } .creds span { font-size: .82rem; padding: 5px 12px; border-radius: 999px; background: var(--turmeric-soft); color: var(--ink); } /* -------------------------------------------------------------------------- 7. TREATMENTS GRID Trick: the grid's background is the border colour and the gap is 1px, so the 1px of background showing between cards looks like thin lines. -------------------------------------------------------------------------- */ .treat { display: grid; grid-template-columns: repeat(3, 1fr); /* three equal columns */ gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; /* clip the corners round */ } .treat article { background: var(--surface); padding: 26px 24px; display: flex; flex-direction: column; /* stack parts top to bottom */ gap: 8px; } .treat .sk { font-family: var(--deva); color: var(--turmeric); font-size: 1.05rem; } .treat p { color: var(--muted); font-size: .95rem; } /* margin-top: auto pushes the duration to the bottom of every card, so they line up even when descriptions have different lengths. */ .treat .meta { margin-top: auto; padding-top: 10px; font-size: .82rem; color: var(--neem); font-weight: 600; } /* -------------------------------------------------------------------------- 8. DOSHA QUIZ The HTML inside the quiz card is created by script.js, but it is still styled here. -------------------------------------------------------------------------- */ .quiz { display: grid; grid-template-columns: .9fr 1.1fr; gap: 48px; align-items: start; } .quiz .intro p { color: var(--muted); margin-top: 14px; max-width: 40ch; } .qcard { background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 28px; } /* Progress bar: one small segment per question, gold when reached */ .qprog { display: flex; gap: 6px; margin-bottom: 20px; } .qprog i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); } .qprog i.on { background: var(--turmeric); } .qtext { font-family: var(--display); font-size: 1.35rem; margin-bottom: 18px; } /* Answer buttons */ .opts { display: grid; gap: 10px; } .opts button { text-align: left; padding: 14px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: 500 .97rem var(--body); cursor: pointer; transition: border-color .15s; } .opts button:hover { border-color: var(--neem); } /* Result bars: name | coloured bar | percentage */ .result .bars { display: grid; gap: 12px; margin-block: 18px; } .bar { display: grid; grid-template-columns: 64px 1fr 44px; gap: 10px; align-items: center; font-size: .9rem; font-variant-numeric: tabular-nums; /* digits all the same width */ } .bar .track { height: 10px; border-radius: 10px; background: var(--band); overflow: hidden; } .bar .fill { height: 100%; border-radius: 10px; transition: width .6s ease; } /* bars grow smoothly */ .result p { color: var(--muted); font-size: .95rem; } .result .note { font-size: .8rem; margin-top: 14px; } .result .actions { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 18px; } /* "Take it again" – a button that looks like a link */ .linkbtn { background: none; border: 0; padding: 0; color: var(--neem); font: 600 .9rem var(--body); text-decoration: underline; cursor: pointer; } /* -------------------------------------------------------------------------- 9. FIRST VISIT STEPS CSS "counters" number the steps automatically: counter-reset starts at zero, counter-increment adds one per