/* ========================================================================== JAGRITI DHAM — JIVAGRAM AYURVEDIC WELLNESS · page 1499 only /jivagram-ayurvedic-wellness/ · page-templates/jivagram-ayurvedic-wellness.php "THE TREATMENT DOSSIER" css/jiva-lux.css FINAL 2026-09-11 New file. To be enqueued from functions.php on is_page(1499) with deps array('responsive'), so it prints after style.css and responsive.css; it restyles the GENERIC theme classes .sectiongap / .section-title / .peachbg / .accordion* / .card* / .owl-* and must never load anywhere else (L1). The banner above (.banner_area, banner-lux.css) and the contact section below (#contact, contact-lux.css) are not touched by any rule here. ========================================================================== THE IDEA, IN ONE SENTENCE ------------------------- The page body is one DOSSIER: twelve numbered pages of the same cream paper, each opened by a running head — the folio numeral in Fraunces italic brass ink, the house diamond punched into a rule that runs to the right margin, the heading ranged left on a short measure, the deck under it in the site's italic-brass voice — with three dark moments: the enquiry band (02) near the top, the facilities wall (08) two-thirds down, and the bounded green plate of the seals (10), the day-at closing plate quoted. Paper, plate, paper: the long-stay language, carried through a 45 KB template without touching it. WHAT THIS FINAL DECIDES BETWEEN THE TWO SYNTHESES ------------------------------------------------- · The GRAFT (synth A) is the base: it answered every judge on every lens. Kept from it: the decks as Fraunces italic brass-ink kickers UNDER the heading (the home-lux / dayat accent voice; B's Karla decks were quieter but a third voice); the reviews as CASE NOTES — avatar and Fraunces name first, the note in upright Karla, a rule, stars and date — which two judges asked for over the Dossier's italic pull-quotes (B kept the pull-quote upright; the reader lens still called it "magazine"); the awards as gold laurels on ONE bounded green plate (the aesthetic lens's explicit graft: the seals stop being pale gold on cream); the index line in normal case at 15px (three lines on a tablet, not seven uppercase); the `.tick` check KEPT and recoloured (a safety checklist with check-marks is the theme author's intent; B removed it); the 7/5 tablet spreads (01 and 03 measure 586 / 657px at 768 against B's 673 / 670). · From the CHAMPION (synth B): the FAQ's blank second running head at an EXACT 29px (line-height 16 + 12 pad + 1 rule, box-sizing border-box — A's 27px min-height was 1px short of the first column's 28); the three- tier rhythm (36/40 → 40/46 → 44/50, head-gap 24/26) that the reader lens asked for, ~100px shorter on a phone than A; the submit's :focus-visible state (fill sweep + ring at +3px); the `--jv-t` transition token zeroed under reduced motion; `.owl-dots.disabled` answered next to `.owl-nav.disabled`; the facilities dot-cell edges named as rgba(203,178,121,.7) so the border is a 3.54:1 boundary. · Decided here: the review note is 17px (the body floor; A had 16.5); every accordion rule is rooted at `.accordion .accordion-item` so it beats Bootstrap's `:first-of-type` / `:last-of-type` radii on WEIGHT, not on enqueue order; the review stage is `align-items:stretch` at every width — MEASURED in the real harness at 375: every plate 311px, the dots 22px under the stage. (B's flex-start still rendered a stretched plate because `.h-100` won; A's phone screenshot showing a gap was a capture artefact, not the CSS.) The token prefix is `--jv-`, used by no other sheet (header/banner/longstay/dayat all use `--jd-` inside their own scopes; A's `--jl-` and B's `--jdv-` are retired). · Found in the render, present in BOTH syntheses: at 768–991 (Owl items:1) their `max-width:560px; margin:0 auto` on the patient and facilities plates was silently beaten by the `.item{margin:0}` reset (L16), so those plates sat LEFT at 560px while the review plate centred at 640px. Here all three plates fill the stage at 768–991 — the stage IS the container, so the plates line up with the treatments grid — and the review note keeps a 62ch measure inside its wide plate. · The facilities stage is a flex row (L20) so a two-line caption at Owl's 235px tier (992–1199) does not leave its neighbours ragged along the bottom; measured 216/216/216 at 992. ========================================================================== LOAD-BEARING — DO NOT "TIDY" ANY OF THESE. Each fails SILENTLY. ========================================================================== L1 SCOPE. Every selector is rooted at `.page-id-1499` (the WordPress body class); the custom properties (`--jv-*`) live on that body, not on :root. The enquiry strip is `.peachbg:not(#contact)` — NEVER a bare `.peachbg` (#contact carries `.sectiongap.peachbg` too and contact-lux.css owns it) and never by adjacency (a block inserted between §01 and the strip would silently hand it back to raw brass with white type). The :not(#contact) lifts every strip rule to (1,n,n); nothing in the theme has an id to compete with. If #contact ever lost its id the strip rules would style it and the folio would count 13 — the same id contact-lux.css already depends on. NOTHING HERE MAY MOVE INTO style.css OR responsive.css. L2 `.owl-nav, .owl-nav.disabled { display:none !important }` at (0,5,0). THE FLAG IS NOT OPTIONAL. style.css:3141 forces the DISABLED nav of the patient and facilities carousels to `display:flex !important` at z-index −1 with `.owl-prev{margin-left:-25px}` (the 26–33px spill off the left edge in the baseline), and style.css:680 gives every `.owl-nav.disabled` and `.owl-dots.disabled` `display:inherit !important`. Only a flagged rule of greater weight beats a flagged rule; the extra `.owl-carousel` class is the weight. L3 THE DOTS ARE `
` in this Owl build (js/owl.carousel.js renders divs, not buttons: no role, no tabindex — a js/custom.js matter, flagged). The markup carries `owl-carousel` WITHOUT `owl-theme`, so every dot in the baseline is 0px tall. Here each dot is a 44×44 numbered CELL: the cell IS the target, the numeral is a CSS counter (`jv-dot`, reset on `.owl-dots` — a SIBLING of the stage, so Owl's loop clones never touch it, L4), Owl's empty inner span is hidden. The current cell changes FILL and INK, never colour alone. The :focus-visible rings are written and wait for tabindex. L4 NO COUNTER IS EVER READ INSIDE `.owl-stage`. `loop:true` makes Owl clone items before and after the real ones, and clones increment CSS counters in DOM order, so a numbered facility would start at "08". The 01–06 (treatments), 01–04 (services) and 1–17 (FAQ) numerals are in static grids; the folio 01–12 is on the section wrappers. L5 `@media (prefers-reduced-motion:reduce)` sets BOTH `visibility:visible !important` AND `animation:none !important` on `.wow`. WOW.js writes `visibility:hidden` INLINE and animate.css gives `.animated` `animation-fill-mode:both` (and, under reduced motion, `animation-duration:1ms !important` at (0,1,0) — this rule's (0,2,0) stays above it). Remove either flag and the page is blank for anyone who asked for less motion. Same pair in @media print. L6 `--bs-gutter-x` / `--bs-gutter-y` are changed on `.row` elements ONLY, never on `.container`, and never above Bootstrap's 24px on the x axis — a wider gutter pushes the row's negative margin past the container's padding and the rig reads it as a spill. Extra column air is PADDING inside the columns. The awards plate paints `padding` on its `.container` — padding, not the gutter variable. L7 The disorders index is `display:grid` with `grid-auto-flow:column` and `grid-template-rows:repeat(7,auto)` from 576px: fourteen entries read DOWN two columns of seven, so the row is always full. Bootstrap's `.col-lg-3{width:25%}` would size each grid ITEM to a quarter of its cell — the `width:100%` on the columns at (0,4,0) is not optional. If the count ever changes, change the 7 (it is written once): a 15th entry opens an implicit third column, a 13th leaves the second column one short. CSS multi-column was rejected because it balances by height, not count. L8 The chip and the icon are SEPARATE boxes in the same grid cell: the `::before` is the deep-green chip, the `` is laid over it at z-index 1 under `filter:brightness(0) invert(1)`. Put the filter on a box that also carries the background and the chip turns white. The filter is source-colour-independent (the Jiva-orange PNGs become white line art, 11.32:1); an icon exported WITHOUT transparency would render as a white square. Forced colours drop the filter and outline the chip in CanvasText. L9 Photographs are content: no `object-fit:cover` crop is applied to a patient, facility, treatment or narrative photograph anywhere in this file. The narrative mounts cap their width instead of upscaling — the journey photograph is a 515px source and the map is a 596px PNG with type baked into it. The patient stills already carry a white play button in the pixels: NO play mark is drawn over them. L10 `text-align:left` is declared ON the h1/h2/h6 elements themselves, not on `.section-title`. The template's `.text-center` is a FLAGGED Bootstrap utility on the wrapper; a declared value on the child beats an inherited one without a flag, so no !important is needed. L11 The accordion chevron is Bootstrap 5.1.3's SVG data-URI in `::after` — 5.1.3 has NO --bs-accordion variables, so the icon is recoloured by overriding `background-image` in BOTH states (collapsed and `:not(.collapsed)`). Drop either and one state shows the blue. Every accordion rule is rooted at `.accordion .accordion-item` so that it outweighs Bootstrap's `.accordion-item:first-of-type .accordion-button` (0,3,0) and `:last-of-type .accordion-button.collapsed` (0,4,0). L12 Every media query is `min-width`. The phone layout is the DEFAULT and 576 / 768 / 992 / 1200 are enhancements; nothing falls between two queries (the 767.184px dead-band rule). Hover is written only inside `@media (hover:hover)` so touch devices never hold a hover state. L13 Brass #cbb279 is TEXT nowhere. It appears on the green grounds as the diamond, the marker rule, the plate cap, the dot-cell edges and the award frames (5.49:1 non-text on green) and on paper only as the .55-alpha hairline, which is decoration. All brass INK — numerals, decks, rules that mean something, the open question, the .tick check — is #6b5426. L14 The diamond SVGs paint the ground colour (%23faf7ef on paper, %232b3f2f on green) behind themselves to punch the hole in the rule. Change a ground and its data-URI changes with it. L15 The CF7 form is styled by ELEMENT (`input[type=…]`, `select`, `textarea`, `label`, `.wpcf7-form p`), not by Bootstrap class: the live form 708a198 prints its own markup and the harness only stands it in with the general form. `::placeholder` carries !important because style.css:331 does. `label{color:#fff}` (style.css:305) is answered at (1,3,1). The `:focus` rule EXCLUDES `[type="submit"]`, `[type="checkbox"]` and `[type="radio"]`: without the exclusion it ties the submit rule at (1,4,1) and only source order stops the pill turning white on focus; style.css:432 `.btn-primary:focus {background-color:transparent}` is answered by naming `:focus` in the submit's own rule. L16 `.owl-carousel .item{margin:10px}` (style.css:648) is reset to 0 on all three carousels. Unreset it narrows every plate by 20px and pushes the review card 10px below its owl-item. Every focus ring inside `.owl-stage-outer` (overflow:hidden) is drawn INSIDE its box with a negative outline-offset, so the clip can never hide it; the three stage-outers carry 18px of bottom padding so the plate shadows are not clipped either. L17 The FAQ's second column carries class `tick`; style.css:501 `.tick ul li:before` draws a Font Awesome check-circle in raw #cbb279 (1.93:1) at margin-left:-20px before every list item. That glyph is KEPT and recoloured to brass ink, and `list-style:none` is kept THERE so the disc bullet given to every other FAQ list does not double it. Three of the four panel designs shipped the raw check unseen. L18 Every generated numeral (folio, contents, services, questions, dot cells) is written TWICE — `content:X` then `content:X / ""` — the second (alt-text) form hides the ornament from screen readers in Chrome 77+ / Safari 17.4+ / Firefox 128+; older engines reject that declaration and keep the first. A minifier that collapses duplicate `content` declarations breaks one class of browser. L19 The review stage is `align-items:stretch` at every width and the plate is `height:auto !important` (against Bootstrap's `.h-100`), so the six plates finish level and the dots sit against the stage. A short review shows blank plate above its footer rule on a phone; `flex-start` was measured and rejected — Owl's stage is as tall as the longest item regardless, so the dots would float ~100px below a short plate. L20 The facilities stage is ALSO a flex row (`.owl-stage{display:flex}`, `.owl-item{display:flex}`, the plate a column at width:100%) — the same construction the theme already gives the reviews stage at style.css:3222, so this Owl build is known to tolerate it (the `.owl-stage:after` clearfix becomes a zero-size flex item). Owl writes the stage's width and transform inline; neither is touched. Never give a carousel plate `margin:0 auto` — L16's `.item{margin:0}` outweighs it and the plate silently sits left. ========================================================================== CONTRAST, COMPUTED (WCAG 2.x relative luminance; grain worst-pixel — the paper's feTurbulence at .04 alpha darkens at most to #f0ede5 — in brackets) ========================================================================== #2b3f2f heading ink on #faf7ef paper 10.58:1 (9.68) h1, h2, h3, h5, questions, disorder names, index heads #3a4238 body ink on #faf7ef paper 9.73:1 (8.90) copy, answers, notes #6b5426 brass ink on #faf7ef paper 6.71:1 (6.14) folio, item numerals, decks, index line, running head, open question, links, .tick check, chevron #2b3f2f on #fdfbf6 plate 10.95:1 captions, review names, form labels, the current facilities dot #3a4238 on #fdfbf6 plate 10.07:1 review notes, CF7 p #6b5426 on #fdfbf6 plate 6.95:1 plate numerals, dot numerals, avatar ring #5b6157 muted on #fdfbf6 plate 6.17:1 review dates, GDPR #f6edd8 cream ink on #2b3f2f green 9.72:1 band h2 and folio, award titles, dot numerals on green; 7.19:1 on the sheen+grain worst pixel #405243 #dcd5c4 soft cream on #2b3f2f green 7.74:1 (5.73) award notes #ffffff line art on #2b3f2f chip 11.32:1 the fourteen icons #cbb279 brass on #2b3f2f green 5.49:1 (4.06) NON-TEXT: diamond, cap, marker rule rgba(203,178,121,.7)=#9b9063 on green 3.54:1 award frames, the facilities dot-cell edges (non-text ≥3:1) rgba(107,84,38,.72)=#93825e on paper 3.51:1 meaningful rules, dot-cell edges #948360 on #fdfbf6 plate 3.58:1 field borders, the review footer rule #151515 field text on #ffffff 18.26:1 #5f6b5c placeholder on #ffffff 5.61:1 #f6edd8 button text on #2f4634 fill 8.81:1; on #24331f hover 11.49:1 #2f4634 button fill on #fdfbf6 plate 9.92:1 (boundary) #2b3f2f focus ring on #ffffff 11.32:1 · on #fdfbf6 10.95:1 · on #faf7ef 10.58:1 #e6d4a6 focus ring on #2b3f2f green 7.73:1 #8c2f2f error tip and 2px error border on #fdfbf6 7.92:1 #7a2626 error on #fdf4f4 tint 9.11:1 #22331f sent on #f2f7f2 tint 12.40:1 star.png #fdb913 raw 1.67:1 → brightness(.55) ≈ #8b660a on plate 5.07:1 #f3eedf hover wash on #faf7ef 1.08:1 a wash, never a state rgba(203,178,121,.55)=#e0d1ae on paper 1.41:1 DECORATIVE hairlines rgba(203,178,121,.55)=#837e58 on green 2.74:1 decorative; the plate's own edge (10.95:1) is the boundary ========================================================================== */ .page-id-1499{ --jv-paper:#faf7ef; --jv-plate:#fdfbf6; --jv-night:#2b3f2f; --jv-night-deep:#22331f; --jv-ink:#3a4238; --jv-strong:#2b3f2f; --jv-brass-ink:#6b5426; --jv-brass:#cbb279; --jv-cream-ink:#f6edd8; --jv-cream-soft:#dcd5c4; --jv-ring-dark:#e6d4a6; --jv-muted:#5b6157; --jv-wash:#f3eedf; --jv-hair:rgba(203,178,121,.55); --jv-hair-green:rgba(203,178,121,.8); /* #a69b6b on the band: 4.11:1 flat, 3.68:1 on grain, 3.25:1 at the sheen's lightest pixel (.7 was 2.81:1 there) */ --jv-rule:rgba(107,84,38,.72); --jv-shadow:43,63,47; --jv-ease:cubic-bezier(.2,.7,.2,1); --jv-t:.2s; --jv-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --jv-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --jv-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); --jv-grain-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); --jv-sheen:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.14) 100%); /* the folio marker: diamond punched into a rule, paper and green cuts (L14) */ --jv-diamond:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%23faf7ef'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%236b5426'/%3E%3C/svg%3E"); --jv-diamond-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%232b3f2f'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%23cbb279'/%3E%3C/svg%3E"); /* rhythm, PHONE values; the queries only change numbers (three tiers) */ --jv-pad-top:36px; --jv-pad-bot:40px; --jv-head-gap:24px; --jv-body:17px; counter-reset:jv-folio; } @media (min-width:768px){ .page-id-1499{ --jv-pad-top:40px; --jv-pad-bot:46px; --jv-head-gap:26px; --jv-body:17.5px; } } @media (min-width:1200px){ .page-id-1499{ --jv-pad-top:44px; --jv-pad-bot:50px; --jv-body:18px; } } /* -------------------------------------------------------------------------- 1. THE PAPER — one stock for the whole dossier. Every section is a page of the same cream, grained, ruled along its top; the two green bands (§4 the enquiry, §9 the facilities) and the bounded green plate of the seals (§11) are the dark moments. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram-ayurveda-section, .page-id-1499 .jivagram_journey, .page-id-1499 .jivagram_treatments, .page-id-1499 .jivagram_living, .page-id-1499 .jivagram_patient, .page-id-1499 .jivagram_disorders, .page-id-1499 .jivagram_reviews, .page-id-1499 .jivagram_award, .page-id-1499 .jivagram_network, .page-id-1499 .jivagram_faq{ position:relative; padding:var(--jv-pad-top) 0 var(--jv-pad-bot); background-color:var(--jv-paper); background-image:var(--jv-grain); border-top:1px solid var(--jv-hair); overflow:hidden; /* contains WOW's fadeInLeft (translate −100%) */ font-family:var(--jv-sans); color:var(--jv-ink); } .page-id-1499 .jivagram-ayurveda-section{ border-top:0; } /* the folio: one counter, twelve wrappers, in order (L1, L4) */ .page-id-1499 .jivagram-ayurveda-section, .page-id-1499 .peachbg:not(#contact), .page-id-1499 .jivagram_journey, .page-id-1499 .jivagram_treatments, .page-id-1499 .jivagram_living, .page-id-1499 .jivagram_patient, .page-id-1499 .jivagram_disorders, .page-id-1499 .jivagram_facilities, .page-id-1499 .jivagram_reviews, .page-id-1499 .jivagram_award, .page-id-1499 .jivagram_network, .page-id-1499 .jivagram_faq{ counter-increment:jv-folio; } /* -------------------------------------------------------------------------- 2. THE RUNNING HEAD — the folio numeral in Fraunces italic brass ink, the diamond, and a rule to the right margin; then the heading ranged left on a short measure and, where the template gives one, the deck (h6) UNDER it in the site's italic-brass voice. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram-ayurveda-section .section-title, .page-id-1499 .peachbg:not(#contact) .section-title, .page-id-1499 .jivagram_journey .section-title, .page-id-1499 .jivagram_treatments .section-title, .page-id-1499 .jivagram_living .section-title, .page-id-1499 .jivagram_patient .section-title, .page-id-1499 .jivagram_disorders .section-title, .page-id-1499 .jivagram_facilities .section-title, .page-id-1499 .jivagram_reviews .section-title, .page-id-1499 .jivagram_award .section-title, .page-id-1499 .jivagram_faq .section-title{ display:grid; grid-template-columns:minmax(0,1fr); row-gap:14px; justify-items:start; margin:0 0 var(--jv-head-gap); padding:0; } /* the marker itself, on whichever block heads the section (01 and 11 have no .section-title, so theirs is drawn on the un-animated .container) */ .page-id-1499 .jivagram-ayurveda-section > .container::before, .page-id-1499 .jivagram_network > .container::before, .page-id-1499 .peachbg:not(#contact) .section-title::before, .page-id-1499 .jivagram_journey .section-title::before, .page-id-1499 .jivagram_treatments .section-title::before, .page-id-1499 .jivagram_living .section-title::before, .page-id-1499 .jivagram_patient .section-title::before, .page-id-1499 .jivagram_disorders .section-title::before, .page-id-1499 .jivagram_facilities .section-title::before, .page-id-1499 .jivagram_reviews .section-title::before, .page-id-1499 .jivagram_award .section-title::before, .page-id-1499 .jivagram_faq .section-title::before{ content:counter(jv-folio, decimal-leading-zero); content:counter(jv-folio, decimal-leading-zero) / ""; display:block; width:100%; grid-column:1 / -1; justify-self:stretch; min-height:24px; font-family:var(--jv-serif); font-optical-sizing:auto; font-style:italic; font-weight:500; font-size:23px; line-height:24px; letter-spacing:.02em; text-align:left; color:var(--jv-brass-ink); /* 6.71:1 */ background-image:var(--jv-diamond), linear-gradient(var(--jv-rule), var(--jv-rule)); background-repeat:no-repeat, no-repeat; background-position:58px 50%, 58px 50%; background-size:17px 9px, calc(100% - 58px) 1px; } .page-id-1499 .jivagram-ayurveda-section > .container::before, .page-id-1499 .jivagram_network > .container::before{ margin-bottom:var(--jv-head-gap); } /* the green variant of the marker (the enquiry band, the facilities band, the awards plate) */ .page-id-1499 .peachbg:not(#contact) .section-title::before, .page-id-1499 .jivagram_facilities .section-title::before, .page-id-1499 .jivagram_award .section-title::before{ color:var(--jv-cream-ink); /* 9.72:1 */ background-image:var(--jv-diamond-night), linear-gradient(var(--jv-hair-green), var(--jv-hair-green)); /* the paper marker's rule is the 3.51:1 --jv-rule; --jv-hair on green was 2.75:1, so the band variant uses the green hairline token instead */ } /* the heading — one construction, twelve times */ .page-id-1499 .jivagram-ayurveda-section-con h2, .page-id-1499 .jivagram_network_con h2, .page-id-1499 .peachbg:not(#contact) .section-title h2, .page-id-1499 .jivagram_treatments .section-title h2, .page-id-1499 .jivagram_living .section-title h2, .page-id-1499 .jivagram_patient .section-title h2, .page-id-1499 .jivagram_disorders .section-title h2, .page-id-1499 .jivagram_facilities .section-title h2, .page-id-1499 .jivagram_reviews .section-title h2, .page-id-1499 .jivagram_award .section-title h2, .page-id-1499 .jivagram_faq .section-title h2{ font-family:var(--jv-serif); font-optical-sizing:auto; font-weight:600; font-size:31px; font-size:clamp(31px, 3.3vw, 44px); line-height:1.1; letter-spacing:-.012em; color:var(--jv-strong); /* 10.58:1 */ text-align:left; /* L10 */ max-width:22ch; margin:0; padding:0; text-wrap:balance; } .page-id-1499 .peachbg:not(#contact) .section-title h2, .page-id-1499 .jivagram_facilities .section-title h2, .page-id-1499 .jivagram_award .section-title h2{ color:var(--jv-cream-ink); } /* 9.72:1 — style.css:857 says #fff */ /* the deck (h6) — Fraunces italic, brass ink, under the heading */ .page-id-1499 .jivagram_journey .section-title h6, .page-id-1499 .jivagram_treatments .section-title h6, .page-id-1499 .jivagram_living .section-title h6, .page-id-1499 .jivagram_disorders .section-title h6{ font-family:var(--jv-serif); font-optical-sizing:auto; font-style:italic; font-weight:500; font-size:19px; line-height:1.4; letter-spacing:-.003em; color:var(--jv-brass-ink); /* 6.71:1 */ text-align:left; max-width:58ch; margin:0; text-wrap:pretty; } /* the page's one h1, mid-page: one step above the h2s, no louder (an SEO artefact must not outrank the hospital's own facts) */ .page-id-1499 .jivagram_journey .section-title h1{ font-family:var(--jv-serif); font-optical-sizing:auto; font-weight:600; font-size:33px; font-size:clamp(33px, 3.5vw, 46px); line-height:1.1; letter-spacing:-.014em; color:var(--jv-strong); /* 10.58:1 */ text-align:left; max-width:24ch; margin:0; text-wrap:balance; } @media (min-width:768px){ .page-id-1499 .jivagram_journey .section-title h6, .page-id-1499 .jivagram_treatments .section-title h6, .page-id-1499 .jivagram_living .section-title h6, .page-id-1499 .jivagram_disorders .section-title h6{ font-size:20px; } } /* body copy, everywhere in the dossier */ .page-id-1499 .jivagram-ayurveda-section p, .page-id-1499 .jivagram_journey p, .page-id-1499 .jivagram_living p, .page-id-1499 .jivagram_network p, .page-id-1499 .jivagram_faq p{ font-family:var(--jv-sans); font-size:var(--jv-body); line-height:1.7; color:var(--jv-ink); /* 9.73:1 */ margin:0 0 1em; text-wrap:pretty; } /* -------------------------------------------------------------------------- 3. THE SPREADS — 01 True Ayurveda, 03 the Journey, 11 the Network. Phones stack. 768: words 7/12 beside the photograph 5/12 (a 396px measure ≈ 46ch; the even split would give a tablet a narrower measure than a phone). 992: words 5/12, photograph 7/12 pulled to the container's padding edge, alternating sides as the DOM already does. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram-ayurveda-section .row, .page-id-1499 .jivagram_journey .row, .page-id-1499 .jivagram_network .row{ --bs-gutter-y:28px; } /* gutter-x stays 24 (L6) */ .page-id-1499 .jivagram-ayurveda-section-con, .page-id-1499 .jivagram-journey-txt, .page-id-1499 .jivagram_network_con{ max-width:52ch; } /* 01 — the opener's pipe-list first paragraph becomes the index line: 15px (the floor), normal case, so it is three lines on a tablet, not seven */ .page-id-1499 .jivagram-ayurveda-section-con h2{ margin-bottom:18px; max-width:15ch; } .page-id-1499 .jivagram-ayurveda-section-con p:first-of-type{ font-family:var(--jv-sans); font-size:15px; font-weight:600; line-height:1.65; letter-spacing:.02em; color:var(--jv-brass-ink); /* 6.71:1 */ margin:0 0 18px; padding:0 0 14px; border-bottom:1px solid var(--jv-rule); /* 3.51:1 */ max-width:none; } .page-id-1499 .jivagram-ayurveda-section-con h5{ display:block; /* style.css:3076 says inline-block, 20px #333 */ font-family:var(--jv-serif); font-optical-sizing:auto; font-style:italic; font-weight:500; font-size:22px; line-height:1.3; color:var(--jv-strong); /* 10.58:1 */ margin:0 0 12px; } .page-id-1499 .jivagram-ayurveda-section-con p:last-of-type{ margin-bottom:0; } /* the opener's photograph: the source has transparent rounded corners, so it sits on the paper itself with the corners honoured, no mount */ .page-id-1499 .jivagram-ayurveda-section-img{ text-align:left; } .page-id-1499 .jivagram-ayurveda-section-img img{ display:block; width:100%; /* style.css:3084 says 80% */ height:auto; border-radius:16px; filter:drop-shadow(0 18px 22px rgba(var(--jv-shadow),.16)); } /* 03 — the journey photograph on a flat plate with a 6px mat */ .page-id-1499 .jivagram-journey-img{ text-align:left; margin:0; /* responsive.css:749 says 20px at ≤480 */ } .page-id-1499 .jivagram-journey-img img{ display:block; width:100%; max-width:527px; /* the SOURCE is 515px wide + the 6px mat each side; 640 drew it at 1.22x and soft */ height:auto; padding:6px; background:var(--jv-plate); border:1px solid var(--jv-hair); box-shadow:0 22px 40px -30px rgba(var(--jv-shadow),.5); } .page-id-1499 .jivagram-journey-txt p:last-child{ margin-bottom:0; } /* 11 — the network map is transparent line art with type in it: never upscaled, never mounted */ .page-id-1499 .jivagram_network_con h2{ margin-bottom:22px; } .page-id-1499 .jivagram_network_con p:last-child{ margin-bottom:0; } .page-id-1499 .jivagram_network_img{ text-align:center; } .page-id-1499 .jivagram_network_img img{ display:block; width:100%; max-width:596px; height:auto; margin:0 auto; } @media (min-width:768px){ .page-id-1499 .jivagram-ayurveda-section .row > .col-md-6:first-child{ flex:0 0 auto; width:58.3333%; padding-right:32px; } .page-id-1499 .jivagram-ayurveda-section .row > .col-md-6:last-child{ flex:0 0 auto; width:41.6667%; } .page-id-1499 .jivagram_journey .row > .col-md-6:first-child{ flex:0 0 auto; width:41.6667%; } .page-id-1499 .jivagram_journey .row > .col-md-6:last-child{ flex:0 0 auto; width:58.3333%; padding-left:32px; } .page-id-1499 .jivagram_network .row > .col-md-6:first-child{ padding-right:28px; } .page-id-1499 .jivagram-journey-img{ display:flex; justify-content:flex-start; } } @media (min-width:992px){ /* 01: words 5/12, photograph 7/12, photograph out to the container's padding edge (0 = the row's edge = 12px past the content edge) */ .page-id-1499 .jivagram-ayurveda-section .row > .col-lg-6:first-child{ flex:0 0 auto; width:41.6667%; padding-right:44px; } .page-id-1499 .jivagram-ayurveda-section .row > .col-lg-6:last-child{ flex:0 0 auto; width:58.3333%; padding-right:0; } /* 03: photograph and words 6/6. The photograph's SOURCE is 515px wide and is capped at 527 (with its mat), so a 7/12 column (684px at 1280) left a dead gutter between it and the words; at 6/12 it fills a 456px column at 992-1199 (downscaled, sharp) and centres in a 586px column from 1200. */ .page-id-1499 .jivagram_journey .row > .col-lg-6:first-child{ flex:0 0 auto; width:50%; padding-left:0; } .page-id-1499 .jivagram_journey .row > .col-lg-6:last-child{ flex:0 0 auto; width:50%; padding-left:44px; } .page-id-1499 .jivagram-journey-img img{ margin-left:auto; margin-right:auto; } .page-id-1499 .jivagram_network .row > .col-lg-6:first-child{ padding-right:44px; } .page-id-1499 .jivagram_network .row > .col-lg-6:last-child{ padding-right:0; } .page-id-1499 .jivagram_network_img{ text-align:right; } .page-id-1499 .jivagram_network_img img{ margin:0 0 0 auto; } } /* -------------------------------------------------------------------------- 4. THE ENQUIRY — 02, the first green band. The house deep green (home-lux.css:2908 recipe), the heading in cream ink, and the form on ONE flat cream plate with the long-stay brass cap. Addressed as .peachbg:not(#contact) (L1). -------------------------------------------------------------------------- */ .page-id-1499 .peachbg:not(#contact){ position:relative; padding:var(--jv-pad-top) 0 var(--jv-pad-bot); background-color:var(--jv-night); /* style.css:854 says #cbb279 */ background-image:var(--jv-grain-night), var(--jv-sheen); border-top:1px solid var(--jv-hair); border-bottom:1px solid var(--jv-hair); overflow:hidden; font-family:var(--jv-sans); } /* the plate — brass-capped, as the long-stay enquiry plate */ .page-id-1499 .peachbg:not(#contact) .wpcf7{ max-width:980px; margin:0 auto; background:var(--jv-plate); background-image:none; /* plate does not have grain */ border:1px solid var(--jv-hair); border-top:3px solid var(--jv-brass); /* the cap, 5.49:1 on the band, non-text */ padding:22px 18px 24px; box-shadow:0 26px 50px -34px rgba(0,0,0,.6); color:var(--jv-ink); } .page-id-1499 .peachbg:not(#contact) .wpcf7-form .row{ --bs-gutter-x:14px; --bs-gutter-y:14px; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form .row .row{ --bs-gutter-y:14px; } /* generic CF7 markup: paragraphs, labels, wraps (L15) */ .page-id-1499 .peachbg:not(#contact) .wpcf7-form p{ font-family:var(--jv-sans); font-size:16px; line-height:1.5; color:var(--jv-ink); /* 10.07:1 */ margin:0 0 14px; } .page-id-1499 .peachbg:not(#contact) label, .page-id-1499 .peachbg:not(#contact) .wpcf7-form label{ display:block; font-family:var(--jv-sans); font-size:15px; font-weight:600; line-height:1.4; color:var(--jv-strong); /* 10.95:1 — style.css:305 says #fff */ margin:0 0 6px; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form-control-wrap{ display:block; position:relative; } .page-id-1499 .peachbg:not(#contact) .wpcf7-list-item{ margin:0 18px 0 0; } .page-id-1499 .peachbg:not(#contact) .wpcf7-list-item label{ display:inline-flex; align-items:center; gap:8px; font-weight:400; } /* the controls, by element; contact-lux's language (radius 8, 50px) so the page's two forms agree, with a border that is a real ≥3:1 boundary */ .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="text"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="email"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="tel"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="number"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="url"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="date"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="search"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form select, .page-id-1499 .peachbg:not(#contact) .wpcf7-form textarea{ display:block; width:100%; min-height:50px; padding:12px 14px; background-color:#ffffff; border:1px solid var(--jv-rule); /* #948360 on the plate, 3.58:1 */ border-radius:8px; font-family:var(--jv-sans); font-size:16px; /* 16px: iOS does not zoom */ line-height:1.4; color:#151515; /* 18.26:1 */ box-shadow:none; outline:0; transition:border-color var(--jv-t) ease, box-shadow var(--jv-t) ease; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form select{ -webkit-appearance:none; appearance:none; padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236b5426' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px 16px; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form textarea{ height:140px; /* rows="8" would make it 203 */ min-height:120px; resize:vertical; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="checkbox"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="radio"]{ width:22px; height:22px; margin:0; accent-color:var(--jv-night); } .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="file"]{ font-family:var(--jv-sans); font-size:15px; color:var(--jv-ink); } /* the placeholder is the field's only name: a prompt, not an answer */ .page-id-1499 .peachbg:not(#contact) .wpcf7-form ::-moz-placeholder{ color:#5f6b5c !important; opacity:1; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form ::placeholder{ color:#5f6b5c !important; opacity:1; } /* 5.61:1 */ /* focus: style.css:65 and :346 zero it and :317 paints a focused .form-control's text WHITE; naming the element type outweighs all three. The submit is EXCLUDED (L15). Three channels: ink border, halo, and a 2px outline for keyboard focus. */ .page-id-1499 .peachbg:not(#contact) .wpcf7-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus, .page-id-1499 .peachbg:not(#contact) .wpcf7-form select:focus, .page-id-1499 .peachbg:not(#contact) .wpcf7-form textarea:focus{ border-color:var(--jv-night); box-shadow:0 0 0 3px rgba(43,63,47,.22); background-color:#ffffff; color:#151515; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form input:not([type="submit"]):focus-visible, .page-id-1499 .peachbg:not(#contact) .wpcf7-form select:focus-visible, .page-id-1499 .peachbg:not(#contact) .wpcf7-form textarea:focus-visible{ outline:2px solid var(--jv-night); /* 11.32:1 on white, 10.95:1 on the plate */ outline-offset:2px; } /* the maths captcha: an input then a bare text node " + 3 = 4" */ .page-id-1499 .peachbg:not(#contact) .mathcaptcha_div{ display:flex; align-items:center; } .page-id-1499 .peachbg:not(#contact) .mathcaptcha_div .wpcf7-form-control-wrap{ display:flex; align-items:center; gap:10px; font-family:var(--jv-sans); font-size:16px; font-weight:600; color:var(--jv-strong); /* 10.95:1 */ } .page-id-1499 .peachbg:not(#contact) .wpcf7-form input.wpcf7-mathcaptcha{ width:64px; min-width:64px; min-height:50px; padding:12px 8px; text-align:center; font-weight:600; } /* the submit — the site's own pill from contact-lux.css, so the two forms on this page share one button. style.css:422-437 flags padding, border and colour on .btn-primary; those three are answered in kind. :focus is named in the base rule so style.css:432's transparent fill never applies. */ .page-id-1499 .peachbg:not(#contact) .wpcf7-submit, .page-id-1499 .peachbg:not(#contact) .wpcf7-form-control.btn-primary, .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="submit"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form button[type="submit"]{ /* NO :focus variants here. They carried width:100% at (1,5,1), which beat the >=576 width:auto override, so every click (Chrome focuses a submit on mousedown) snapped the 200px pill to the full column width and left it there after CF7's AJAX round-trip. The unfocused selectors already outweigh every :focus rule in style.css and Bootstrap. */ display:inline-flex; align-items:center; justify-content:center; width:100%; /* a thumb-wide target on phones; auto from 576 */ min-width:200px; min-height:52px; padding:13px 34px !important; border:0 !important; border-radius:30px; color:var(--jv-cream-ink) !important; /* 8.81:1 on the fill */ background-color:#2f4634; background-image:linear-gradient(0deg, #24331f, #24331f); background-size:100% 0; background-repeat:no-repeat; background-position:bottom; font-family:var(--jv-sans); font-size:15px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; line-height:1.2; cursor:pointer; box-shadow:0 8px 18px -10px rgba(36,51,31,.7); transition:background-size .45s var(--jv-ease), box-shadow .3s ease; } .page-id-1499 .peachbg:not(#contact) .wpcf7-submit:focus-visible, .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="submit"]:focus-visible, .page-id-1499 .peachbg:not(#contact) .wpcf7-form button[type="submit"]:focus-visible{ background-size:100% 100%; color:var(--jv-cream-ink) !important; outline:2px solid var(--jv-night); /* 10.95:1 on the plate */ outline-offset:3px; box-shadow:0 12px 22px -10px rgba(36,51,31,.8); } .page-id-1499 .peachbg:not(#contact) .wpcf7-spinner{ margin:0 0 0 12px; } /* errors and the response — un-hidden (style.css:1956 hides the tip) and recoloured for the cream plate; the border weight changes too, so the state does not depend on seeing red */ .page-id-1499 .peachbg:not(#contact) .wpcf7-not-valid-tip{ display:block; margin:6px 0 0; font-family:var(--jv-sans); font-size:15px; font-weight:600; line-height:1.4; color:#8c2f2f; /* 7.92:1 on the plate */ } .page-id-1499 .peachbg:not(#contact) .wpcf7-form .wpcf7-not-valid{ border-color:#8c2f2f !important; border-width:2px !important; } .page-id-1499 .peachbg:not(#contact) .wpcf7-response-output:empty{ display:none; } .page-id-1499 .peachbg:not(#contact) .wpcf7-response-output{ margin:18px 0 0; padding:13px 16px; border:1px solid var(--jv-rule); border-radius:8px; background:#ffffff; font-family:var(--jv-sans); font-size:16px; line-height:1.5; color:var(--jv-strong); } .page-id-1499 .peachbg:not(#contact) form.invalid .wpcf7-response-output, .page-id-1499 .peachbg:not(#contact) form.failed .wpcf7-response-output, .page-id-1499 .peachbg:not(#contact) form.aborted .wpcf7-response-output, .page-id-1499 .peachbg:not(#contact) form.spam .wpcf7-response-output, .page-id-1499 .peachbg:not(#contact) form.unaccepted .wpcf7-response-output, .page-id-1499 .peachbg:not(#contact) .wpcf7-response-output.wpcf7-validation-errors{ border-color:#8c2f2f; background:#fdf4f4; color:#7a2626; /* 9.11:1 */ } .page-id-1499 .peachbg:not(#contact) form.sent .wpcf7-response-output, .page-id-1499 .peachbg:not(#contact) .wpcf7-response-output.wpcf7-mail-sent-ok{ border-color:#2f4634; background:#f2f7f2; color:#22331f; /* 12.40:1 */ } .page-id-1499 .peachbg:not(#contact) .gscf7-frontend-gdpr-notice{ margin:16px 0 0; font-family:var(--jv-sans); font-size:15px; line-height:1.5; color:var(--jv-muted); /* 6.17:1 */ } @media (min-width:576px){ .page-id-1499 .peachbg:not(#contact) .wpcf7-submit, .page-id-1499 .peachbg:not(#contact) .wpcf7-form-control.btn-primary, .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="submit"], .page-id-1499 .peachbg:not(#contact) .wpcf7-form button[type="submit"]{ width:auto; } } @media (min-width:768px){ .page-id-1499 .peachbg:not(#contact) .wpcf7{ padding:28px 28px 30px; } /* 768-991: Owl gives one 696px item, which drew the 600px patient and facility stills at 682px. Cap the plate's CONTENT (the / the box, children of .item, so L16's margin reset does not reach them) and centre it; released again at 992 where items:3 makes them 235-302px. */ .page-id-1499 .jivagram_patient_box > a, .page-id-1499 .jivagram_facilities_box{ max-width:614px; margin-left:auto; margin-right:auto; } } @media (min-width:992px){ .page-id-1499 .peachbg:not(#contact) .wpcf7{ padding:34px 36px 36px; } .page-id-1499 .jivagram_patient_box > a, .page-id-1499 .jivagram_facilities_box{ max-width:none; margin-left:0; margin-right:0; } } /* -------------------------------------------------------------------------- 5. THE CONTENTS — 04, six treatments as a numbered contents page. Phones: a list, thumbnail left and numbered title right, one to a row. 768px: two plates a row; 992px: three. The numeral is a counter reset on the row (static grid, L4). -------------------------------------------------------------------------- */ .page-id-1499 .jivagram_treatments .row{ --bs-gutter-x:14px; --bs-gutter-y:14px; counter-reset:jv-item; } .page-id-1499 .jivagram_treatments .row > [class*="col-"]{ flex:0 0 auto; width:100%; display:flex; } .page-id-1499 .jivagram_treatments_box{ counter-increment:jv-item; width:100%; display:grid; /* .card says flex column */ grid-template-columns:42% minmax(0,1fr); align-items:center; column-gap:16px; padding:6px; background:var(--jv-plate); /* style.css:3108 says #4f6f52 */ background-image:none; border:1px solid var(--jv-hair); border-radius:0; box-shadow:0 18px 34px -30px rgba(var(--jv-shadow),.5); transition:border-color var(--jv-t) ease; } .page-id-1499 .jivagram_treatments_box img{ display:block; width:100%; height:auto; border-radius:0; box-shadow:none; } .page-id-1499 .jivagram_treatments_box h3{ font-family:var(--jv-serif); font-optical-sizing:auto; font-weight:500; font-size:19px; line-height:1.22; letter-spacing:-.005em; color:var(--jv-strong); /* 10.95:1 — style.css:3112 says #fff centred */ text-align:left; margin:0; padding:8px 8px 8px 0; } .page-id-1499 .jivagram_treatments_box h3::before{ content:counter(jv-item, decimal-leading-zero); content:counter(jv-item, decimal-leading-zero) / ""; display:block; font-family:var(--jv-serif); font-style:italic; font-weight:500; font-size:15px; line-height:1; letter-spacing:.04em; color:var(--jv-brass-ink); /* 6.95:1 */ margin-bottom:7px; } @media (min-width:768px){ .page-id-1499 .jivagram_treatments .row{ --bs-gutter-x:24px; --bs-gutter-y:24px; } .page-id-1499 .jivagram_treatments .row > [class*="col-"]{ width:50%; } .page-id-1499 .jivagram_treatments_box{ grid-template-columns:minmax(0,1fr); align-items:start; column-gap:0; padding:6px 6px 0; } .page-id-1499 .jivagram_treatments_box h3{ font-size:21px; padding:14px 14px 16px; } } @media (min-width:992px){ .page-id-1499 .jivagram_treatments .row > [class*="col-"]{ width:33.3333%; } } /* -------------------------------------------------------------------------- 6. THE SERVICES — 05, four entries ruled like a contents list: a rule across the top, the numeral, the title in Fraunces, the note. No box. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram_living .row{ --bs-gutter-y:22px; counter-reset:jv-item; } .page-id-1499 .jivagram_living .row > [class*="col-"]{ display:flex; } .page-id-1499 .jivagram_living_box{ counter-increment:jv-item; width:100%; background:transparent; /* style.css:3128: white, material shadow */ border:0; border-top:1px solid var(--jv-rule); /* 3.51:1 */ border-radius:0; box-shadow:none; padding:18px 0 4px; /* responsive.css:758 says 10px at ≤480 */ } .page-id-1499 .jivagram_living_box h3{ font-family:var(--jv-serif); font-optical-sizing:auto; font-weight:500; font-size:23px; line-height:1.2; letter-spacing:-.008em; color:var(--jv-strong); /* 10.58:1 */ text-align:left; margin:0 0 12px; max-width:24ch; } .page-id-1499 .jivagram_living_box h3::before{ content:counter(jv-item, decimal-leading-zero); content:counter(jv-item, decimal-leading-zero) / ""; display:block; font-family:var(--jv-serif); font-style:italic; font-weight:500; font-size:15px; line-height:1; letter-spacing:.04em; color:var(--jv-brass-ink); /* 6.71:1 */ margin-bottom:12px; } .page-id-1499 .jivagram_living_box p{ margin:0; max-width:46ch; } @media (min-width:768px){ .page-id-1499 .jivagram_living .row{ --bs-gutter-y:30px; } .page-id-1499 .jivagram_living .row > [class*="col-"]:nth-child(odd) .jivagram_living_box{ margin-right:20px; } .page-id-1499 .jivagram_living .row > [class*="col-"]:nth-child(even) .jivagram_living_box{ margin-left:20px; } .page-id-1499 .jivagram_living_box{ padding:20px 0 6px; } .page-id-1499 .jivagram_living_box h3{ font-size:25px; } } @media (min-width:1200px){ .page-id-1499 .jivagram_living .row > [class*="col-"]:nth-child(odd) .jivagram_living_box{ margin-right:32px; } .page-id-1499 .jivagram_living .row > [class*="col-"]:nth-child(even) .jivagram_living_box{ margin-left:32px; } } /* -------------------------------------------------------------------------- 7. THE INDEX — 07, fourteen disorders as an index of two columns of seven, read down (L7). Each entry: a deep-green chip with the icon as white line art laid over it (L8 — the long-stay amenities lattice continued), the name in Fraunces at 20–21px, a hairline under the row. No numerals: conditions have no order. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram_disorders .row{ --bs-gutter-x:0; --bs-gutter-y:0; display:grid; grid-template-columns:minmax(0,1fr); grid-auto-flow:row; column-gap:48px; row-gap:0; margin:0; justify-content:stretch; /* the template says justify-content-center */ } .page-id-1499 .jivagram_disorders .row > [class*="col-"]{ flex:none; width:100%; max-width:100%; padding:0; margin:0; } .page-id-1499 .jivagram_disorders_box{ display:grid; /* .card says flex column */ grid-template-columns:52px minmax(0,1fr); align-items:center; column-gap:16px; padding:8px 0; background:transparent; /* style.css:3178: white, shadow, 20px */ border:0; border-bottom:1px solid var(--jv-hair); border-radius:0; box-shadow:none; text-align:left; min-height:64px; transition:background-color var(--jv-t) ease; } /* the chip, and the icon laid over it (L8) */ .page-id-1499 .jivagram_disorders_box::before{ content:""; grid-area:1 / 1; align-self:center; width:52px; height:52px; background-color:var(--jv-night); /* 10.58:1 as an area */ transition:background-color var(--jv-t) ease; } .page-id-1499 .jivagram_disorders_box img{ grid-area:1 / 1; position:relative; z-index:1; align-self:center; box-sizing:border-box; width:52px; /* style.css:3185 says 50px auto */ height:52px; margin:0; padding:10px; object-fit:contain; filter:brightness(0) invert(1); /* #fff line art, 11.32:1 on the chip */ } .page-id-1499 .jivagram_disorders_box h3{ grid-area:1 / 2; font-family:var(--jv-serif); font-optical-sizing:auto; font-weight:500; font-size:20px; line-height:1.25; letter-spacing:-.005em; color:var(--jv-strong); /* 10.58:1 — style.css:3190 says 18px #444 */ margin:0; text-align:left; text-wrap:pretty; } @media (min-width:576px){ .page-id-1499 .jivagram_disorders .row{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:repeat(7, auto); /* L7 — fourteen entries, seven down */ grid-auto-flow:column; column-gap:40px; } } @media (min-width:992px){ .page-id-1499 .jivagram_disorders .row{ column-gap:72px; } .page-id-1499 .jivagram_disorders_box{ column-gap:20px; padding:10px 0; } .page-id-1499 .jivagram_disorders_box h3{ font-size:21px; } } /* -------------------------------------------------------------------------- 8. THE CAROUSELS — shared. The disabled nav goes (L2); the theme's 10px item margin and grey image shadow go (L16); the dots become an index of numbered 44px cells (L3). Owl's own margin:15 stays (it is JS). -------------------------------------------------------------------------- */ .page-id-1499 .owl-carousel.jivagram_patient_carousel .owl-nav, .page-id-1499 .owl-carousel.jivagram_patient_carousel .owl-nav.disabled, .page-id-1499 .owl-carousel.jivagram_facilities_carousel .owl-nav, .page-id-1499 .owl-carousel.jivagram_facilities_carousel .owl-nav.disabled, .page-id-1499 .owl-carousel.jivagram_reviews_carousel .owl-nav, .page-id-1499 .owl-carousel.jivagram_reviews_carousel .owl-nav.disabled{ display:none !important; /* L2 */ } .page-id-1499 .owl-carousel.jivagram_patient_carousel .owl-dots.disabled, .page-id-1499 .owl-carousel.jivagram_facilities_carousel .owl-dots.disabled, .page-id-1499 .owl-carousel.jivagram_reviews_carousel .owl-dots.disabled{ display:none !important; /* style.css:680 says inherit !important */ } .page-id-1499 .jivagram_patient_carousel .item, .page-id-1499 .jivagram_facilities_carousel .item, .page-id-1499 .jivagram_reviews_carousel .item{ margin:0; } /* L16 */ .page-id-1499 .jivagram_patient_carousel .item img, .page-id-1499 .jivagram_facilities_carousel .item img{ box-shadow:none; } /* room under the stage for the plates' shadows, which the stage clips */ .page-id-1499 .jivagram_patient_carousel .owl-stage-outer, .page-id-1499 .jivagram_facilities_carousel .owl-stage-outer, .page-id-1499 .jivagram_reviews_carousel .owl-stage-outer{ padding:0 0 18px; overflow:clip; /* overflow:hidden is a scroll container: Tab onto a loop clone scrolled it 1,800-2,000px and emptied the visible stage. clip cannot scroll. Older engines keep hidden. */ } /* the index of dots: a centred row of 44×44 plate cells, tabular numerals */ .page-id-1499 .jivagram_patient_carousel .owl-dots, .page-id-1499 .jivagram_facilities_carousel .owl-dots, .page-id-1499 .jivagram_reviews_carousel .owl-dots{ counter-reset:jv-dot; display:flex; flex-wrap:wrap; justify-content:center; gap:0; margin:4px 0 0; padding:0; text-align:center; } /* seven 44px facility cells are 302px; under 331px the row bleeds 12px into each container gutter instead of wrapping the seventh cell alone */ .page-id-1499 .jivagram_facilities_carousel .owl-dots{ margin:4px -12px 0; } @media (min-width:360px){ .page-id-1499 .jivagram_facilities_carousel .owl-dots{ margin:4px 0 0; } } .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot, .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot{ counter-increment:jv-dot; display:flex; align-items:center; justify-content:center; width:44px; /* SC 2.5.5, both axes */ min-height:44px; margin:0 0 0 -1px; /* cells share their rules */ padding:0; background-color:var(--jv-plate); border:1px solid var(--jv-rule); /* 3.51:1 */ border-radius:0; cursor:pointer; -webkit-tap-highlight-color:transparent; font-family:var(--jv-sans); font-size:15px; font-weight:600; letter-spacing:.04em; line-height:1; color:var(--jv-brass-ink); /* 6.95:1 on the plate */ font-variant-numeric:lining-nums tabular-nums; transition:background-color var(--jv-t) var(--jv-ease), color var(--jv-t) var(--jv-ease), border-color var(--jv-t) var(--jv-ease); } .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot:first-child, .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot:first-child, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot:first-child{ margin-left:0; } .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot span, .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot span, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot span{ display:none; } .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot::before, .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot::before, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot::before{ content:counter(jv-dot, decimal-leading-zero); content:counter(jv-dot, decimal-leading-zero) / ""; } /* current: filled green AND inverted ink — two channels, never colour alone */ .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot.active, .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot.active, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot.active{ position:relative; z-index:1; background-color:var(--jv-night); border-color:var(--jv-night); color:var(--jv-cream-ink); /* 9.72:1 */ } .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot:focus-visible, .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot:focus-visible, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot:focus-visible{ position:relative; z-index:2; outline:2px solid var(--jv-night); outline-offset:2px; } .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot.active:focus-visible, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot.active:focus-visible{ outline-color:var(--jv-brass-ink); } /* 06 — patient stories: each film still on a flat plate; the whole plate is the link. The play mark is in the pixels already (L9). The focus ring is drawn INSIDE the plate's 6px mat (L16). */ .page-id-1499 .jivagram_patient_box{ padding:0; } .page-id-1499 .jivagram_patient_box a{ display:block; padding:6px; background:var(--jv-plate); border:1px solid var(--jv-hair); box-shadow:0 18px 34px -30px rgba(var(--jv-shadow),.5); transition:box-shadow .3s ease, border-color var(--jv-t) ease; } .page-id-1499 .jivagram_patient_box a:focus-visible{ outline:2px solid var(--jv-night); /* 10.95:1 on the mat */ outline-offset:-4px; box-shadow:none; } .page-id-1499 .jivagram_patient_box img{ display:block; width:100%; height:auto; border-radius:0 !important; /* style.css:3136 carries the flag */ } /* 768–991 (items:1): the plate fills the stage — the stage IS the container, so the plate lines up with the treatments grid above it. A narrower, centred plate under a left-ranged head was built and rejected: the `.item{margin:0}` reset (L16) outweighs `margin:0 auto` anyway. */ /* -------------------------------------------------------------------------- 9. THE PLATES — 08, the facilities on the second green band. Each item is a captioned plate: photograph on a cream mat, the name beneath it in Fraunces as a caption. Owl's stagePadding:100 from 992px shows the neighbouring plates at both edges, which on the dark ground reads as a gallery wall. The dot cells go cream-on-green here. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram_facilities{ position:relative; padding:var(--jv-pad-top) 0 var(--jv-pad-bot); background-color:var(--jv-night); background-image:var(--jv-grain-night), var(--jv-sheen); border-top:1px solid var(--jv-hair); border-bottom:1px solid var(--jv-hair); overflow:hidden; font-family:var(--jv-sans); } /* level plates: the stage is a flex row (as the theme already makes the reviews stage, style.css:3222) so a two-line caption at Owl's 235px tier (992–1199) does not leave its neighbours ragged along the bottom */ .page-id-1499 .jivagram_facilities_carousel .owl-stage{ display:flex; align-items:stretch; } /* owl.carousel.css's `.owl-stage:after` clearfix is a 2.33px-wide flex item in a flex stage and shaved 0.15-0.2px off every item, so the plates were never quite on the container edge. A clearfix is meaningless in a flex container. */ .page-id-1499 .jivagram_facilities_carousel .owl-stage::after, .page-id-1499 .jivagram_reviews_carousel .owl-stage::after{ content:none; } .page-id-1499 .jivagram_facilities_carousel .owl-item{ display:flex; } .page-id-1499 .jivagram_facilities_box{ display:flex; flex-direction:column; width:100%; background:var(--jv-plate); /* style.css:3239 says #4f6f52 */ background-image:none; border:1px solid var(--jv-hair); padding:6px 6px 0; box-shadow:0 26px 50px -34px rgba(0,0,0,.6); } .page-id-1499 .jivagram_facilities_box img{ display:block; width:100%; height:auto; border-radius:0 !important; } .page-id-1499 .jivagram_facilities_box h3{ font-family:var(--jv-serif); font-optical-sizing:auto; font-weight:500; font-size:19px; line-height:1.25; letter-spacing:-.005em; color:var(--jv-strong); /* 10.95:1 — style.css:3243 says #fff centred */ text-align:left; margin:0; padding:14px 12px 16px; } .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot{ background-color:transparent; border-color:var(--jv-hair-green); /* 3.54:1 non-text on the band */ color:var(--jv-cream-ink); /* 9.72:1 */ } .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot.active{ background-color:var(--jv-plate); /* the current page is a cream plate */ border-color:var(--jv-plate); color:var(--jv-strong); /* 10.95:1 */ } .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot:focus-visible{ outline-color:var(--jv-ring-dark); } /* 7.73:1 on green */ @media (min-width:992px){ .page-id-1499 .jivagram_facilities_box h3{ font-size:20px; padding:16px 14px 18px; } } /* -------------------------------------------------------------------------- 10. THE CASE NOTES — 09, six reviews as real people's notes: avatar and name first, the note in upright Karla, a rule, then the stars and the date. DOM order kept (what a screen reader hears is what is seen). Equal heights at every width (L19). The 36px avatar is ringed into a 44px object; the yellow star PNG is filtered into the brass family. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram_reviews_carousel .owl-stage{ display:flex; align-items:stretch; margin-bottom:0; } /* style.css:3222 says 20px */ .page-id-1499 .jivagram_reviews_carousel .owl-item{ display:flex; } .page-id-1499 .jivagram_reviews_carousel .jivagram_reviews_box{ display:flex; flex-direction:column; width:100%; height:auto !important; /* .h-100 is flagged; the flex item stretches instead */ background:var(--jv-plate); background-image:none; border:1px solid var(--jv-hair); /* style.css:3195: no border, black shadow */ border-radius:0; box-shadow:0 18px 34px -30px rgba(var(--jv-shadow),.5); text-align:left; } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-header{ display:flex; align-items:center; gap:14px; padding:20px 22px 0; margin:0; background:none; border:0; border-radius:0; text-align:left; } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-header img{ display:block !important; /* style.css:3204: display:unset !important */ flex:0 0 36px; width:36px !important; /* style.css:3204: width:auto !important — the avatars are 36×36 */ height:36px; margin:4px; /* room for the ring */ border-radius:50%; box-shadow:none; outline:1px solid var(--jv-brass-ink); /* 6.95:1 — reads as a 44px object */ outline-offset:3px; object-fit:cover; } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-header h3{ margin:0; min-width:0; font-family:var(--jv-serif); font-optical-sizing:auto; font-size:19px; font-weight:500; line-height:1.25; letter-spacing:-.005em; color:var(--jv-strong); /* 10.95:1 */ overflow-wrap:anywhere; } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-body{ flex:0 0 auto; /* one plate is visible on a phone, so equal heights buy nothing there; the footer follows the note. 1 1 auto from 992 (three plates). */ padding:14px 22px 16px; text-align:left; } @media (min-width:992px){ .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-body{ flex:1 1 auto; } } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-body p{ margin:0; max-width:62ch; /* the plate fills the stage at 768–991; the note keeps its measure */ font-family:var(--jv-sans); font-size:var(--jv-body); line-height:1.65; color:var(--jv-ink); /* 10.07:1 */ text-wrap:pretty; } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-footer{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin:0 22px; padding:12px 0 18px; border:0; border-top:1px solid var(--jv-rule); /* 3.58:1 */ border-radius:0; background:none; text-align:left; } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-footer img{ display:block !important; width:90px !important; height:20px; margin:0; border-radius:0; /* owl.carousel.css gives every stage img 8px 0 */ box-shadow:none; filter:brightness(.55); /* #fdb913 → ≈#8b660a, 5.07:1 */ } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-footer p{ margin:0; font-family:var(--jv-sans); font-size:15px; line-height:1.4; color:var(--jv-muted); /* 6.17:1 */ } /* -------------------------------------------------------------------------- 11. THE SEALS — 10, three awards on ONE bounded green plate (the day-at closing plate quoted): the laurels, already brass, straight on the green inside hairline frames; the running head in its green variant. Padding is painted on the .container, never the gutter (L6). The plate is edge-to-edge on phones (the container is 100% there), bounded from 576. -------------------------------------------------------------------------- */ .page-id-1499 .jivagram_award > .container{ position:relative; padding:36px 20px 40px; background-color:var(--jv-night); background-image:var(--jv-grain-night), var(--jv-sheen); border:1px solid var(--jv-hair); box-shadow:0 26px 50px -34px rgba(0,0,0,.55); } .page-id-1499 .jivagram_award .row{ --bs-gutter-x:24px; --bs-gutter-y:16px; } .page-id-1499 .jivagram_award .row > [class*="col-"]{ display:flex; } .page-id-1499 .jivagram_award .jivagram_award_box{ position:relative; width:100%; display:flex; flex-direction:column; justify-content:center; min-height:120px; background:none; /* style.css:3268: white, 30px 58px, shadow */ border:1px solid var(--jv-hair-green); /* 3.54:1 non-text */ border-radius:0; box-shadow:none; padding:22px 56px; /* a 320 phone: laurel 42 + 16 offset; 66 from 576 */ margin:0; /* responsive.css:789 says 20px at ≤480 */ text-align:center; } .page-id-1499 .jivagram_award .jivagram_award_img_left, .page-id-1499 .jivagram_award .jivagram_award_img_right{ position:absolute; width:42px; top:50%; transform:translateY(-50%); z-index:1; } .page-id-1499 .jivagram_award .jivagram_award_img_left{ left:16px; right:auto; text-align:left; } .page-id-1499 .jivagram_award .jivagram_award_img_right{ right:16px; left:auto; text-align:right; } .page-id-1499 .jivagram_award .jivagram_award_box img{ display:block; width:42px; height:auto; box-shadow:none; } .page-id-1499 .jivagram_award .jivagram_award_box h6{ width:100%; /* style.css:3296 says 60% #4f6f52 */ font-family:var(--jv-serif); font-optical-sizing:auto; font-style:normal; font-weight:500; font-size:22px; line-height:1.2; letter-spacing:-.008em; color:var(--jv-cream-ink); /* 9.72:1 */ margin:0 0 8px; text-wrap:balance; } .page-id-1499 .jivagram_award .jivagram_award_box p{ width:100%; /* style.css:3305 says 75% */ max-width:26ch; margin:0 auto; font-family:var(--jv-sans); font-size:16px; line-height:1.5; color:var(--jv-cream-soft); /* 7.74:1 */ } @media (min-width:576px){ .page-id-1499 .jivagram_award > .container{ padding:40px 32px 44px; } .page-id-1499 .jivagram_award .jivagram_award_box{ padding:22px 66px; } } @media (min-width:768px){ .page-id-1499 .jivagram_award > .container{ padding:44px 40px 48px; } } @media (min-width:992px){ /* three across from 992: ~269px frames until 1200, so the laurels shrink */ .page-id-1499 .jivagram_award .jivagram_award_box{ padding:22px 52px; min-height:150px; } .page-id-1499 .jivagram_award .jivagram_award_img_left, .page-id-1499 .jivagram_award .jivagram_award_img_right{ width:34px; } .page-id-1499 .jivagram_award .jivagram_award_box img{ width:34px; } .page-id-1499 .jivagram_award .jivagram_award_img_left{ left:12px; } .page-id-1499 .jivagram_award .jivagram_award_img_right{ right:12px; } .page-id-1499 .jivagram_award .jivagram_award_box h6{ font-size:21px; } } @media (min-width:1200px){ .page-id-1499 .jivagram_award > .container{ padding:44px 48px 48px; } .page-id-1499 .jivagram_award .jivagram_award_box{ padding:26px 68px; } .page-id-1499 .jivagram_award .jivagram_award_img_left, .page-id-1499 .jivagram_award .jivagram_award_img_right{ width:42px; } .page-id-1499 .jivagram_award .jivagram_award_box img{ width:42px; } .page-id-1499 .jivagram_award .jivagram_award_img_left{ left:16px; } .page-id-1499 .jivagram_award .jivagram_award_img_right{ right:16px; } .page-id-1499 .jivagram_award .jivagram_award_box h6{ font-size:22px; } } /* -------------------------------------------------------------------------- 12. THE REFERENCE PAGES — 12, seventeen questions in two columns, the running head printed ONCE (the second column carries a blank of the same 29px from 768 so the first rows align, and nothing on phones), numbered 1–17 straight through (one counter on the row; the second column continues in document order). No boxes: a rule under every entry, the chevron in brass ink (L11). The `.tick` column's Font Awesome check is kept and recoloured (L17). -------------------------------------------------------------------------- */ .page-id-1499 .jivagram_faq .row{ --bs-gutter-y:0; counter-reset:jv-q; } .page-id-1499 .jivagram_faq .accordion{ padding:0; } .page-id-1499 .jivagram_faq .accordion::before{ content:"Questions"; display:block; box-sizing:border-box; min-height:29px; /* 16 line + 12 pad + 1 rule: the blank second head matches */ font-family:var(--jv-sans); font-size:15px; font-weight:700; line-height:16px; letter-spacing:.12em; text-transform:uppercase; color:var(--jv-brass-ink); /* 6.71:1 */ padding:0 0 12px; border-bottom:1px solid var(--jv-rule); /* 3.51:1 */ } .page-id-1499 .jivagram_faq .row > [class*="col-"]:last-child .accordion::before{ content:none; } .page-id-1499 .jivagram_faq .accordion .accordion-item{ counter-increment:jv-q; background:transparent; /* Bootstrap: #fff, rgba(0,0,0,.125) border; style.css:3011 12px margin */ border:0; border-bottom:1px solid var(--jv-hair); border-radius:0; margin:0; } .page-id-1499 .jivagram_faq .accordion .accordion-item h2{ margin:0; /* style.css:78: 36px #4f6f52, 16px below — the wrapper paints nothing, the button does */ font-size:1rem; line-height:1; color:var(--jv-strong); } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button{ display:flex; align-items:flex-start; width:100%; min-height:56px; padding:16px 0 16px; gap:14px; background:transparent; border:0; /* style.css:3006: 1px #dcc692 */ border-radius:0; box-shadow:none; font-family:var(--jv-serif); font-optical-sizing:auto; font-weight:500; font-size:18.5px; line-height:1.3; letter-spacing:-.005em; text-align:left; color:var(--jv-strong); /* 10.58:1 */ cursor:pointer; transition:color var(--jv-t) ease; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button::before{ content:counter(jv-q) "."; content:counter(jv-q) "." / ""; flex:0 0 34px; font-family:var(--jv-serif); font-style:italic; font-weight:500; font-size:17px; line-height:1.45; letter-spacing:.02em; color:var(--jv-brass-ink); /* 6.71:1 */ } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button::after{ flex:0 0 20px; width:20px; height:20px; margin-left:auto; margin-top:2px; background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b5426'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); background-repeat:no-repeat; background-size:20px 20px; transition:transform var(--jv-t) ease-in-out; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button:not(.collapsed){ color:var(--jv-brass-ink); /* 6.71:1 — style.css:3029: #000 on #ece3cf */ background:transparent; border:0; box-shadow:none; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button:not(.collapsed)::after{ background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b5426'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); transform:rotate(-180deg); } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button:focus{ border:0; box-shadow:none; outline:0; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button:focus-visible{ outline:2px solid var(--jv-night); outline-offset:-2px; } .page-id-1499 .jivagram_faq .accordion .accordion-collapse{ border:0; border-radius:0; } .page-id-1499 .jivagram_faq .accordion .accordion-body{ border:0; /* style.css:3018: 1px #dcc692 */ padding:0 16px 20px 48px; /* a 320 phone: 232px measure */ text-align:left; } @media (min-width:576px){ .page-id-1499 .jivagram_faq .accordion .accordion-body{ padding:0 34px 20px 48px; } } .page-id-1499 .jivagram_faq .accordion-body p{ margin:0 0 .9em; max-width:60ch; } .page-id-1499 .jivagram_faq .accordion-body p:last-child{ margin-bottom:0; } .page-id-1499 .jivagram_faq .accordion-body ul, .page-id-1499 .jivagram_faq .accordion-body ol{ margin:6px 0 14px; padding-left:20px; } .page-id-1499 .jivagram_faq .accordion-body ul li{ list-style-type:disc; /* style.css:47 strips bullets */ font-family:var(--jv-sans); font-size:var(--jv-body); line-height:1.6; color:var(--jv-ink); margin:0 0 6px; } .page-id-1499 .jivagram_faq .accordion-body ul li::marker{ color:var(--jv-brass-ink); } /* the .tick column (L17): style.css:482-510 gives its lists a Font Awesome check-circle in raw #cbb279 at margin-left:-20px; keep it, recolour it, and keep list-style none so the disc above does not double it */ .page-id-1499 .jivagram_faq .tick .accordion-body ul{ margin:6px 0 14px 26px; padding-left:0; } .page-id-1499 .jivagram_faq .tick .accordion-body ul li{ list-style:none; } .page-id-1499 .jivagram_faq .tick .accordion-body ul li::before{ color:var(--jv-brass-ink); /* 6.71:1 */ font-size:16px; margin-left:-26px; margin-right:8px; } .page-id-1499 .jivagram_faq .accordion-body p a{ color:var(--jv-brass-ink); /* 6.71:1 — style.css:3021: #c2a050 */ font-weight:600; text-decoration:underline; text-underline-offset:.16em; overflow-wrap:anywhere; /* the Google Maps URL */ } .page-id-1499 .jivagram_faq .accordion-body p a:focus-visible{ color:var(--jv-strong); outline:2px solid var(--jv-night); outline-offset:2px; } @media (min-width:768px){ .page-id-1499 .jivagram_faq .row > [class*="col-"]:first-child .accordion{ margin-right:14px; } .page-id-1499 .jivagram_faq .row > [class*="col-"]:last-child .accordion{ margin-left:14px; } .page-id-1499 .jivagram_faq .row > [class*="col-"]:last-child .accordion::before{ content:""; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button{ font-size:19.5px; padding:17px 0; } } @media (min-width:1200px){ .page-id-1499 .jivagram_faq .row > [class*="col-"]:first-child .accordion{ margin-right:30px; } .page-id-1499 .jivagram_faq .row > [class*="col-"]:last-child .accordion{ margin-left:30px; } } /* -------------------------------------------------------------------------- 13. HOVER — inside (hover:hover) only (L12); nothing here is the only way to see a state. -------------------------------------------------------------------------- */ @media (hover:hover){ .page-id-1499 .peachbg:not(#contact) .wpcf7-submit:hover, .page-id-1499 .peachbg:not(#contact) .wpcf7-form input[type="submit"]:hover, .page-id-1499 .peachbg:not(#contact) .wpcf7-form button[type="submit"]:hover{ background-size:100% 100%; color:var(--jv-cream-ink) !important; box-shadow:0 12px 22px -10px rgba(36,51,31,.8); } .page-id-1499 .jivagram_patient_box a:hover{ border-color:var(--jv-brass-ink); } .page-id-1499 .jivagram_patient_box a:hover{ box-shadow:0 22px 40px -28px rgba(var(--jv-shadow),.55); } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button:hover{ color:var(--jv-brass-ink); } .page-id-1499 .jivagram_faq .accordion-body p a:hover{ color:var(--jv-strong); } .page-id-1499 .jivagram_patient_carousel .owl-dots .owl-dot:not(.active):hover, .page-id-1499 .jivagram_reviews_carousel .owl-dots .owl-dot:not(.active):hover{ background-color:var(--jv-wash); color:var(--jv-strong); } .page-id-1499 .jivagram_facilities_carousel .owl-dots .owl-dot:not(.active):hover{ background-color:rgba(246,237,216,.12); border-color:var(--jv-cream-ink); } } /* -------------------------------------------------------------------------- 14. MOTION — reduced motion (L5), forced colours, print. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ .page-id-1499{ --jv-t:0s; } .page-id-1499 .wow, .page-id-1499 .wow.animated{ visibility:visible !important; animation:none !important; opacity:1; transform:none; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form input, .page-id-1499 .peachbg:not(#contact) .wpcf7-form select, .page-id-1499 .peachbg:not(#contact) .wpcf7-form textarea, .page-id-1499 .peachbg:not(#contact) .wpcf7-submit, .page-id-1499 .jivagram_treatments_box, .page-id-1499 .jivagram_disorders_box, .page-id-1499 .jivagram_disorders_box::before, .page-id-1499 .jivagram_patient_box a, .page-id-1499 .jivagram_faq .accordion-button, .page-id-1499 .jivagram_faq .accordion-button::after, .page-id-1499 .owl-carousel .owl-dots .owl-dot{ transition:none !important; } .page-id-1499 .owl-carousel .owl-stage{ transition-duration:0s !important; } .page-id-1499 .jivagram_faq .collapsing{ transition:none !important; } } @media (forced-colors:active){ .page-id-1499 .jivagram-ayurveda-section > .container::before, .page-id-1499 .jivagram_network > .container::before, .page-id-1499 .section-title::before{ background-image:none; border-bottom:1px solid CanvasText; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button::after{ background-image:none; border:solid CanvasText; border-width:0 2px 2px 0; width:12px; height:12px; transform:rotate(45deg); margin-top:6px; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button:not(.collapsed)::after{ transform:rotate(-135deg); margin-top:10px; } .page-id-1499 .owl-carousel .owl-dots .owl-dot{ border:1px solid ButtonText; background:ButtonFace; color:ButtonText; } .page-id-1499 .owl-carousel .owl-dots .owl-dot.active{ background:Highlight; color:HighlightText; border-color:Highlight; forced-color-adjust:none; } .page-id-1499 .jivagram_disorders_box img{ filter:none; } .page-id-1499 .jivagram_disorders_box::before{ background:Canvas; border:1px solid CanvasText; box-sizing:border-box; } .page-id-1499 .jivagram_reviews .jivagram_reviews_box .card-footer img{ filter:none; } .page-id-1499 .peachbg:not(#contact) .wpcf7-form select{ background-image:none; } .page-id-1499 .jivagram_award > .container, .page-id-1499 .jivagram_award .jivagram_award_box{ border:1px solid CanvasText; } } @media print{ .page-id-1499 .wow{ visibility:visible !important; animation:none !important; } .page-id-1499 .jivagram-ayurveda-section, .page-id-1499 .peachbg:not(#contact), .page-id-1499 .jivagram_journey, .page-id-1499 .jivagram_treatments, .page-id-1499 .jivagram_living, .page-id-1499 .jivagram_patient, .page-id-1499 .jivagram_disorders, .page-id-1499 .jivagram_facilities, .page-id-1499 .jivagram_reviews, .page-id-1499 .jivagram_award, .page-id-1499 .jivagram_award > .container, .page-id-1499 .jivagram_network, .page-id-1499 .jivagram_faq{ background:#fff !important; color:#000; padding:24px 0; overflow:visible; box-shadow:none; break-inside:auto; } .page-id-1499 .jivagram_award > .container{ padding:24px 20px; border:1px solid #6b5426; } .page-id-1499 .peachbg:not(#contact) .section-title::before, .page-id-1499 .peachbg:not(#contact) .section-title h2, .page-id-1499 .jivagram_facilities .section-title::before, .page-id-1499 .jivagram_facilities .section-title h2, .page-id-1499 .jivagram_award .section-title::before, .page-id-1499 .jivagram_award .section-title h2, .page-id-1499 .jivagram_award .jivagram_award_box h6{ color:#2b3f2f; } .page-id-1499 .jivagram_award .jivagram_award_box p{ color:#3a4238; } .page-id-1499 .jivagram_award .jivagram_award_box{ border-color:#6b5426; } .page-id-1499 .peachbg:not(#contact) .section-title::before, .page-id-1499 .jivagram_facilities .section-title::before, .page-id-1499 .jivagram_award .section-title::before{ background-image:var(--jv-diamond), linear-gradient(var(--jv-rule), var(--jv-rule)); } .page-id-1499 .jivagram_disorders_box::before{ background:#2b3f2f; -webkit-print-color-adjust:exact; print-color-adjust:exact; } .page-id-1499 .owl-carousel .owl-dots{ display:none !important; } .page-id-1499 .owl-carousel .owl-stage-outer{ overflow:visible; padding:0; } .page-id-1499 .jivagram_treatments_box, .page-id-1499 .jivagram_living_box, .page-id-1499 .jivagram_reviews_box, .page-id-1499 .jivagram_award_box, .page-id-1499 .jivagram_facilities_box, .page-id-1499 .jivagram_patient_box a{ box-shadow:none; break-inside:avoid; } .page-id-1499 .jivagram_faq .accordion-collapse{ display:block !important; height:auto !important; } .page-id-1499 .jivagram_faq .accordion .accordion-item .accordion-button::after{ display:none; } .page-id-1499 .jivagram_faq .accordion-item{ break-inside:avoid; } }