/* ========================================================================== JAGRITI DHAM — /best-luxury-senior-citizen-home-kolkata/ BODY SECTIONS Loaded LAST, after style2.css, responsive2.css, header2.css and banner2.css, so it wins on source order. Nothing here is flagged !important except where a legacy rule is itself flagged, and each of those says so. Right now this file holds one section: "Jagriti Dham - Kolkata's only Luxurious Senior Citizen Home", the first thing under the banner. WHAT IT REPLACED, and why each change is a change and not a preference: 1. THE SECTION TITLE WAS AN

. The page's only

is the line under the banner, and the very next heading on the page was a level four - an h1 -> h4 jump, the first of seven on this page. It is an

now, which is what a top-level section title is. 2. THE NINE PILLARS WERE A `columns:2` BULLET LIST inside a Bootstrap `.row` that had no columns in it. That row pulled itself 24px wider than its container (the gutter exists to cancel column padding, and there was none to cancel), the list added a 25px left margin on top, and the multicol block divided the over-wide box - 25px of horizontal scroll on the WHOLE page at 1280, 17px at 992. It was patched in banner2.css; the patch is now deleted because the markup it patched is gone. A grid cannot overflow its container the way a float-era multicol can. 3. THE GROUND WAS FLAT WHITE, between a dark green banner plinth above and the #ebe3cd cream of #Services below - so the page went dark / white / cream with nothing to say the middle band was a room of its own. It is warm paper now, with the same noise-and-light treatment the sibling page's equivalent section uses, and a brass hairline top and bottom. COLOURS, MEASURED against the ground's darkest stop #f7f2e6: title #22331f 12.25:1 lead #3f4a41 8.43:1 pillars #3a5240 7.77:1 chip ink #24331f 13.39:1 (on white) icon #3a5240 7.58:1 on the brass-tinted disc The chip hairline and the rule under the title measure ~1.2-1.9:1 and that is CORRECT: they are decoration, not controls and not meaning-bearing graphics, so WCAG 1.4.11's 3:1 does not apply to them. On a light ground cards are separated by shadow and hairline, not by luminance - chasing 3:1 there would mean a heavy border on a section whose whole job is to feel light after the dark band above it. ========================================================================== */ .section-gaping.live_better{ --lb-ink:#22331f; --lb-body:#3f4a41; --lb-green:#3a5240; --lb-brass:#cbb279; --lb-brass-dp:#7f6630; padding:58px 0 62px; background-color:#f7f2e6; background-image: /* the house's own feTurbulence tile at .026 - the LIGHT-room opacity. fractalNoise averages 0.5 in all four channels, so this lays about 1.3% coverage of mid-grey: texture, not dither. 298 bytes, no request. */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='lbs'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23lbs)' opacity='.026'/%3E%3C/svg%3E"), /* light falling from above the title, not a decorative shape laid on the page - it shares its direction with the header bar and the CTA plate */ radial-gradient(64% 150px at 50% -20px, rgba(34,51,31,.075) 0%, rgba(34,51,31,.03) 46%, rgba(34,51,31,0) 100%), linear-gradient(180deg, #fdfaf2 0%, #faf6ec 42%, #f7f2e6 100%); background-repeat:repeat, no-repeat, no-repeat; box-shadow:inset 0 1px 0 rgba(227,207,156,.55); border-bottom:1px solid rgba(203,178,121,.45); } /* ---------- the title ---------- */ .live_better .section_title{ margin-bottom:0; } .live_better .section_title h2{ font-family:Helvetica, Arial, sans-serif; font-size:clamp(23px, 2.6vw, 32px); font-weight:700; line-height:1.26; color:var(--lb-ink); max-width:24em; margin:0 auto; text-align:center; position:relative; } /* style2.css:58 gives every .section_title h2 an ABSOLUTE 60x4 brass bar at left:0, which on a centred title sits under its left edge rather than under the title. Made static and centred, and thinned to a hairline - a 4px slab under a 32px line reads as an underline, which this is not. */ .live_better .section_title h2::after{ position:static; display:block; content:""; width:58px; height:1px; margin:16px auto 0; background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent); } /* ---------- the lead ---------- */ /* NOT JUSTIFIED, and automatic hyphenation off with it. Measured in-browser across 42 body blocks at 1440/1280/1100/992/768/576/375, with every collapsed panel forced open so nothing hid from the scan: this was the ONLY block left on the page setting text-align:justify, and the only one with hyphens:auto. Hyphenation was buying nothing - ZERO words broke at any width, and the one break seen at 576 was "age-integrated" splitting at its own hyphen, which still happens under hyphens:manual. What justification WAS doing is stretching the word gaps: 2.01x at 1440 (4.09px -> 8.21px), 3.81x at 576 and 5.41x at 375, where a 3.86px space grew to 20.90px. Bands of uneven white, bought with no hyphenation benefit at all. Same remedy as the .jd-welcome letter further down this file. ALL FIVE declarations below are load-bearing, not decorative. style2.css:1894 .live_better p keeps pushing text-align:justify, hyphens:auto, -webkit-hyphens:auto, text-align-last:left AND word-spacing:-0.05em at this element, so each has to be answered BY NAME - deleting them here just hands the element back to style2.css. word-spacing especially: -0.05em is part of that justification kit, since pre-tightening the space delays how far justification has to stretch. With the gaps even there is nothing left to compensate for, and leaving it would give this one paragraph tighter word spacing than any other copy on the page. text-align-last must be auto, never merely deleted: the property is independent of text-align, so the old center under a flush-left block would have left the final line as a lone centred orphan. max-width STAYS 88ch. It was originally a trade bought with justification and hyphenation - both now gone - so 76ch would set more comfortably; but that is a visible width change nobody asked for. Flagged, not taken. */ .live_better .lb-lead{ max-width:88ch; margin:26px auto 0; font-size:18px; line-height:1.72; color:var(--lb-body); text-align:left; text-align-last:auto; hyphens:manual; -webkit-hyphens:manual; word-spacing:normal; } /* ---------- "The Pillars of Exceptional Senior Living" ---------- */ .live_better .lb-pillars-head{ margin:40px 0 0; text-align:center; font-size:20px; font-weight:700; line-height:1.3; letter-spacing:.01em; color:var(--lb-green); } /* ---------- the nine pillars ---------- */ .live_better .lb-pillars{ list-style:none; margin:26px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; } .live_better .lb-pillar{ display:flex; align-items:center; gap:15px; min-height:84px; padding:16px 18px; background:#fff; border:1px solid rgba(127,102,48,.20); border-radius:12px; box-shadow:0 2px 10px rgba(34,51,31,.06), 0 1px 2px rgba(34,51,31,.04); } /* the icon well. A tinted disc rather than a coloured one: the glyph carries the colour, and nine saturated discs in a 3x3 grid would out-shout the nine labels they exist to introduce. */ .live_better .lb-pic{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; background:#f6f1e7; border:1px solid rgba(127,102,48,.22); color:var(--lb-green); font-size:19px; line-height:1; } /* style2.css:208 puts a 40x40 solid green disc behind every `.social-media-top li i`, and other legacy rules size bare elements. Reset the box here so this furniture cannot inherit someone else's. */ .live_better .lb-pic i{ background:transparent; width:auto; height:auto; line-height:1; color:inherit; font-size:inherit; border-radius:0; } .live_better .lb-pillar span:last-child{ font-size:16px; font-weight:600; line-height:1.4; color:#24331f; } /* ========================================================================== THE PILLARS, ANIMATED ========================================================================== Two effects: the chips rise into place as the section scrolls into view, staggered a twentieth of a second apart, and each one answers a pointer. THE HIDDEN STATE IS ARMED BY SCRIPT, NEVER BY THIS FILE ALONE. Everything below that sets opacity:0 is scoped under `.lb-pillars.jd-anim`, and only js/custom.js adds `jd-anim` - after it has confirmed IntersectionObserver exists and that the reader has not asked for less motion. If the script is blocked, fails, or is served stale, `jd-anim` never lands and all nine chips render plainly. This page ships seventeen `.wow` classes for a library it does not load, and animate.min.css without wow.min.js - which is exactly how content ends up invisible in production. Not this time. The pointer response deliberately does NOT change the cursor and does not lift far: these chips are statements, not buttons, and an effect that promises a click there has lied. */ @media (prefers-reduced-motion:no-preference){ .live_better .lb-pillars.jd-anim .lb-pillar{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .55s cubic-bezier(.32,.72,0,1), box-shadow .3s ease, border-color .3s ease; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar{ opacity:1; transform:none; } /* the stagger reads left-to-right, top-to-bottom, and is over in .40s - long enough to be seen as a sequence, short enough that a reader who scrolls fast never waits for it */ .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(1){ transition-delay:0s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(2){ transition-delay:.05s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(3){ transition-delay:.10s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(4){ transition-delay:.15s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(5){ transition-delay:.20s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(6){ transition-delay:.25s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(7){ transition-delay:.30s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(8){ transition-delay:.35s; } .live_better .lb-pillars.jd-anim.is-in .lb-pillar:nth-child(9){ transition-delay:.40s; } } /* the icon well gets a soft brass halo, always - a still detail rather than a moving one, so it is there for the reader who never hovers and for the one who asked for no motion */ .live_better .lb-pic{ box-shadow:0 0 0 4px rgba(203,178,121,.14), inset 0 1px 0 rgba(255,255,255,.85); transition:background .32s ease, color .32s ease, border-color .32s ease, box-shadow .32s ease, transform .32s cubic-bezier(.32,.72,0,1); } @media (hover:hover){ .live_better .lb-pillar:hover{ border-color:rgba(127,102,48,.45); box-shadow:0 8px 22px -8px rgba(34,51,31,.22), 0 2px 6px rgba(34,51,31,.07); transform:translateY(-2px); } /* the disc fills and the glyph turns: white on #3a5240 measures 8.53:1 */ .live_better .lb-pillar:hover .lb-pic{ background:var(--lb-green); border-color:var(--lb-green); color:#fff; box-shadow:0 0 0 5px rgba(203,178,121,.26), inset 0 1px 0 rgba(255,255,255,.18); transform:scale(1.06); } } @media (prefers-reduced-motion:reduce){ .live_better .lb-pillar, .live_better .lb-pic{ transition:none !important; transform:none !important; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width:1199px){ .live_better .lb-pillar{ gap:13px; padding:15px 15px; min-height:80px; } .live_better .lb-pillar span:last-child{ font-size:15.5px; } } @media (max-width:991px){ .section-gaping.live_better{ padding:48px 0 52px; } .live_better .lb-pillars{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; } /* 17.5, not 16.5: the base is 18 and the band below this one sets 17, so 16.5 here made the ladder run 18 -> 16.5 -> 17 - smaller in the middle than at either end. */ .live_better .lb-lead{ font-size:17.5px; } } @media (max-width:767px){ .section-gaping.live_better{ padding:40px 0 44px; } /* NO LONGER JUSTIFIED here either - see the block at the top of this file. Justification at every width was asked for explicitly once, and this band was always its worst case: a 38ch measure shares the leftover space between five or six gaps, which measured 5.41x variance at 375 (a 3.86px space stretching to 20.90px). The reversal is deliberate and was flagged; putting it back means restoring text-align:justify and hyphens:auto on .live_better .lb-lead above. Only size and leading are set here. */ .live_better .lb-lead{ font-size:17px; line-height:1.7; } .live_better .lb-pillars-head{ margin-top:32px; font-size:18.5px; } } /* Single column from 767 down. The constraint is NOT the viewport, it is Bootstrap's stepped .container: it holds 540px from 576 all the way to 767 and only widens to 720 at 768. So a two-column grid gives each chip 225px at 640 and at 700 just as it does at 576 - the icon well and its gap take 61 of that, "24x7 Emergency and trained nurse Support" wraps to three lines, and an 118px chip sits beside an 80px one. Measured at 768 the container is 720 and every chip is 341x80, uniform. So the second column arrives exactly where the container can pay for it. */ @media (max-width:767px){ .live_better .lb-pillars{ grid-template-columns:1fr; gap:12px; } .live_better .lb-pillar{ min-height:72px; padding:14px; } .live_better .lb-pic{ width:42px; height:42px; font-size:17px; } } /* ========================================================================== Environment ========================================================================== */ @media (prefers-contrast:more){ .section-gaping.live_better{ background-image:none; background-color:#fffdf7; } .live_better .lb-pillar{ border-color:#7f6630; box-shadow:none; } .live_better .lb-pic{ border-color:#7f6630; background:#fff; } } @media (forced-colors:active){ .section-gaping.live_better{ background-image:none; background-color:Canvas; box-shadow:none; border-bottom-color:CanvasText; } .live_better .lb-pillar{ background:Canvas; border:1px solid CanvasText; box-shadow:none; } .live_better .lb-pic{ background:Canvas; border:1px solid CanvasText; color:CanvasText; } .live_better .section_title h2::after{ background:CanvasText; } } @media print{ .section-gaping.live_better{ background-image:none; background-color:#fff; box-shadow:none; border-bottom:1px solid #7f6630; padding:18px 0; } .live_better .lb-pillars{ grid-template-columns:repeat(3, 1fr); gap:8px; } .live_better .lb-pillar{ box-shadow:none; border-color:#bbb; min-height:0; padding:8px 10px; } .live_better .lb-lead{ text-align:left; text-align-last:left; } } /* For anything else that lands in this section later. style2.css:1894 .live_better p is still live, so a new paragraph would arrive justified, auto-hyphenated and tracked -0.05em beside a lead that is none of those. Same (0,1,1) specificity as that rule; this wins purely because css/sections2.css loads after style2.css (index.php:31 vs :20). The lead above is (0,2,0) and is unaffected by this. */ .live_better p{ text-align:left; text-align-last:auto; hyphens:manual; -webkit-hyphens:manual; word-spacing:normal; } /* ========================================================================== "WE CARE LIKE FAMILY" (#Services) ========================================================================== The sibling page's treatment of this exact component - Bootstrap vertical pills, five tabs, five panes of a heading, a list and an 800x500 photograph - ported here so the two campaign pages keep one design. The account of what the design does and why is in the sibling's css/banner.css; this block is a faithful copy with four things re-aimed at this page: 1. THE TOKENS. The sibling's block reads --jd-green, --jd-green-deep, --jd-gold and --jd-gold-lt from its header.css :root. On this page header2.css scopes them to .jd-header and banner2.css declares only some of them on :root, so all four are declared on the section itself. An undefined custom property does not error - the declaration silently does nothing, which is exactly how this page's legacy --green/--black/ --gold rules have been doing nothing for years. 2. THE STICKY OFFSET. style2.css:1712 makes .sticky_div stick at top:100px - against a header that is 146px tall at rest and 102px once condensed. The rail was sliding up UNDER the bar. It sticks at 114px from 992 up (102 + 12) and at 70px between 768 and 991 (a 56px condensed bar + 14). 3. THE HOVER/ACTIVE COLLISION lives at style2.css:1727 (:hover #4f6f52) and :1731 (.active #4f6f52 !important) here, not style.css:1667/1671. Same defect, same answer: while the pointer is in the rail you cannot tell which tab is open, so hover and active are made different things. The active plate is flagged only because the legacy one is. 4. THE OTHER USERS of these classes on this page: .section_gaping_bg1 is also on #Amenities (index.php:977), .tick is on the pricing row (:830) and .sticky_div is on eleven elements. Everything here is scoped through .we_care, which index.php now puts on this section alone. AND ONE THING THE SIBLING DID NOT HAVE TO FIX: responsive2.css:209 hides the five tab icons outright on portrait tablets (`.left_nav .nav-pills .nav-link img{display:none}`). The icon rule below is one class more specific and puts them back. ========================================================================== */ .section-gaping.we_care{ --jd-green:#4f6f52; --jd-green-deep:#2b3f2f; --jd-gold:#cbb279; --jd-gold-lt:#e3cf9c; } /* --- the ground ---------------------------------------------------------- Was: .section_gaping_bg1{background:#e6eee7} — Y=0.837416, L*=93.34, on which the white panel measured 1.183:1. The paper next door had exactly this problem and was solved by driving the ground down until the white objects lifted off it. The same arithmetic applies, but the target here is not "darker", it is a specific number: match the paper's LIGHTNESS. paper above #eae2c8 L* 89.885 -> #e9e1c7 after grain, L* 89.435 this plane #dbe5dc L* 89.983 -> #dae4db after grain, L* 89.532 dL* after grain = 0.097 Under a tenth of a CIE lightness step. So the two rooms are the same wall at the same brightness and the ONLY thing that changes across the threshold is the finish: warm lime paper on one side, cool green plaster on the other. Hue moves, value does not. That is what makes it read as architecture rather than as two coloured bands, and it is a principle the rest of the page can use rather than a patch for this one seam. Read the stack bottom-up, since CSS lists the topmost layer first: 3 the light 168deg, px stops, the SAME lean and the same warm white as the plinth room, because it is the same source seen from further away. It dies at 300px, not 660px: only the title and its rule need it, and a longer throw would eat the panel's separation exactly where the panel's top edge lives (y~198, where alpha is .10 and white-vs-ground is still 1.283:1). It does a second job for free — the first 80px of a cool plane are warm, so the paper's colour temperature carries across the seam and then cools out. One gesture, two seams' worth of work. 2 the foot the section BELOW (.section-gaping.senior_living) has no background rule and is therefore plain #fff. This room does not close against that white, it dissolves into it: the last pixel measures 1.070:1 against it. There is no brass rule at the foot BECAUSE there is no edge there to draw — see the note under --wc-foot. 1 grain the plinth's own feTurbulence at .026, identical to the paper room's tile, because this ground is also light. Texture, not dither. 298 bytes. (fractalNoise averages 0.5 in all four channels including alpha, so this lays 1.3% coverage of mid-grey over the plane — which is why #eae2c8 grains to #e9e1c7 and #dbe5dc to #dae4db.) Verified across the whole field at the DARKEST point, the settled plane after grain (#dae4db), not the lightest: body #3f4a41 7.083:1 (AAA holds; 7.58:1 where the subtitle sits) heading #2b3f2f 8.658:1 (9.27:1 where the h2 sits) white panel vs ground 1.3077:1 (was 1.1832:1 — a 1.61x improvement) No pseudo-element, so no position:relative is needed and nothing here can disturb the sticky rail. Specificity 0-2-0, which beats .section_gaping_bg1 (0-1-0) and .section-gaping (0-1-0) without !important. background-size is deliberately not declared, so the grain tile keeps its intrinsic 120x120 and the gradients keep 100% 100% — the same choice the paper room makes. */ .section-gaping.we_care{ padding:56px 0 60px; /* the length of the foot dissolve, held in a custom property so the two responsive blocks can shorten it in ONE token when the padding shrinks. It must never exceed padding-bottom: the panel's lower edge sits exactly that far up, and a dissolve that reached it would wash out the panel's separation at the one place the eye checks it. */ --wc-foot:60px; /* the settled plane, and the honest fallback: if any layer below fails to parse, the whole background-image is dropped and this is what remains, on which body copy still measures 7.169:1 and the panel still reads 1.292:1 */ background-color:#dbe5dc; background-image: /* 1 - grain */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='wcg'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23wcg)' opacity='.026'/%3E%3C/svg%3E"), /* 2 - the foot, dissolving into the white section below. `to top` puts the gradient line's origin at the BOTTOM, so the stops are measured up from the skirting: 0 -> #f6f8f6 (1.070:1 vs #fff), 22px -> #e4ebe5, and it is fully spent at the panel's lower edge. */ linear-gradient(to top, rgba(255,255,255,.78) 0, rgba(255,255,255,.30) calc(var(--wc-foot) * .37), rgba(255,255,255,0) var(--wc-foot)), /* 3 - the seam carry. The 168deg layer below is a RAKING light, so its t = 0.2079x + 0.9781y: the top-right corner sits at t = 0.2079W, which is 299px at 1440 and 399px at 1920 - past the raking layer's 300px throw. Left alone, the warm paper carried across the threshold only at the left edge and the seam re-opened as a cold butt joint on the right. This layer is vertical and full-width so the carry is even, and it is spent at 120px, far above the panel's top edge, so it cannot wash out the 1.283:1 panel separation. */ linear-gradient(to bottom, rgba(255,252,240,.34) 0, rgba(255,252,240,0) 120px), /* 4 - the light through the doorway. Same 168deg, same warm white as the plinth room, shorter throw. Composited over the grained plane it runs y=0 #faf8ed L* 97.46 heading 10.63:1 body 8.70:1 y=80 #e9eee3 L* 93.42 heading 9.59:1 body 7.85:1 y=175 #dfe7de L* 90.77 heading 8.95:1 body 7.32:1 y=300+ #dae4db L* 89.53 heading 8.66:1 body 7.08:1 The rise-then-settle is what reads as light rather than as a gradient. */ linear-gradient(168deg, rgba(255,252,240,.90) 0, rgba(255,252,240,.44) 80px, rgba(255,252,240,.14) 175px, rgba(255,252,240,0) 300px); background-repeat:repeat, no-repeat, no-repeat; /* NO border-bottom, and NO inset top lip — both deliberate omissions. .live_better closes with border-bottom:1px rgba(203,178,121,.45), which composites to #dbcca4 and measures 1.217:1 against its own paper and 1.498:1 against this room's lit top. That single rule already reads from BOTH sides, so it is the threshold; a second line below it would be a double rule and a white lip under it measured 1.027:1 — invisible work. At the foot there is no edge at all to draw: the ground becomes the white of the next section, and a rule there would put a line in the middle of nothing. Three joins on this page, three honest treatments: a brass threshold above, a dissolve below. */ } /* --- the title ---------------------------------------------------------- .section_title h2:after (style.css:41) is position:absolute with bottom:-5px and has already caused two overlap bugs on this page. It is neutralised EXPLICITLY here — static, block, and re-drawn as flow content — rather than inherited, and re-cut as the same 58px fading-brass hairline the plinth room and the form use. Repeating the building's ornament is what makes two rooms read as one building. The !important on font-size is not optional and it is not laziness: responsive.css:52 sets .section_title h2{font-size:20px!important} under (max-width:767px) and style.css:451 sets .h2,h2{font-size:20px!important} under (max-width:575.98px). No amount of specificity beats an important declaration. Everything else here wins on specificity alone — 0-2-1 against style.css's 0-1-1, and 0-2-1 against responsive.css:162's 0-1-1. */ .we_care .section_title{ margin-bottom:32px; } .we_care .section_title h2{ font-family:Helvetica, sans-serif; font-size:clamp(23px, 2.7vw, 34px) !important; /* matched to .live_better's h2 on purpose: a larger figure here would out-shout the room above and break the descent through the page */ font-weight:700; line-height:1.25; color:var(--jd-green-deep); /* #2b3f2f — 8.658:1 at the darkest point */ max-width:24ch; /* "Care Like Family" is 16 — one line. Measured: 183px of text in the 307px this cap gives at 23px, and 270px in 454px at 34px. */ margin:0 auto; } .we_care .section_title h2::after{ position:static; display:block; /* kills the absolute 4px #cbb279 bar */ content:""; width:58px; height:1px; margin:16px auto 0; background:linear-gradient(90deg,transparent,rgba(203,178,121,.95),transparent); } .we_care .section_title p{ /* p{font-size:15px} at style.css:23 is below the 16px floor this audience needs, and .section_title p{font-weight:500} sets a line of introduction in semibold, which reads as a second heading. */ /* No cap. An earlier 46ch cap resolved to 435px against a string that measured 440px - five pixels short - so it broke over two lines at EVERY width; removing the cap let it set on one line wherever the container could hold it. 2026-09-09: the line is now "We believe that the best senior living experience is made possible through care", which measures 596px at 17px Helvetica rather than the old 440px. Measured again after the change: one line from 768px up, two from 360 to 576, three at 320 - and no overflow at any width. Two lines of introduction on a phone is fine; what the missing cap still buys is that it is never forced to wrap on a desktop. */ max-width:none; margin:16px auto 0; font-size:17px; font-weight:400; line-height:1.6; color:#3f4a41; /* 7.58:1 where it sits, 7.08:1 floor */ } /* --- the sticky offset --------------------------------------------------- .sticky_div is top:100px but .jd-header is fixed at var(--jd-ribbon-h) + var(--jd-bar-h) = 106px at >=992 and 96px at 768-991, so today the rail slides 6px UNDER the header every time it sticks. Express the offset in the header's own tokens rather than a magic number and it maintains itself: 120px on desktop, 110px on tablet, each clearing its own header with 14px to spare. The min-width guard is load-bearing. responsive.css:111 sets .sticky_div{position:relative;top:0} under (max-width:767px); a bare .we_care .sticky_div{top:...} at 0-2-0 would beat that `top:0` while leaving position:relative alone, which would shove the rail 110px DOWN the page on every phone. Only declare an offset where the element is actually sticky. */ /* --- equal-height plates ------------------------------------------------- The rail is 398px at desktop and the panel only 363-399px depending on which tab is open, so the right plate sat ~30px short of the left AND changed height every time you clicked. Stretching the row fixes both: the row takes the height of whichever plate is taller and the other fills it. The sticky has to move for this to work. `.sticky_div` is on .nav_left, the COLUMN, and a stretched column is exactly as tall as its own containing block - so it can never scroll within it and sticky becomes a no-op. Put the sticky on the .nav-pills plate INSIDE the column instead: the column now stretches to the row, and the plate sticks within it. When the panel is the taller of the two (which is every width below 992px, where the narrower column wraps the copy) the rail still sticks exactly as before; when the rail is taller the column is only as tall as the plate, so there is nothing to scroll and it correctly does not stick. */ @media (min-width:768px){ .we_care .left_nav{ align-items:stretch !important; } /* .align-items-start is a Bootstrap utility, so it is !important */ .we_care .nav_left.sticky_div{ position:static; } /* 0-3-0 beats .sticky_div */ .we_care .left_nav .tab-content{ height:100%; } /* the plate carries `mb-2` in the markup and Bootstrap ships .mb-2{margin-bottom:.5rem!important}. Left alone the column measures the plate PLUS 8px, so the panel stretched to 406px against a 398px rail and the two boxes still did not line up. Zero it and they match exactly. */ .we_care .nav_left .nav-pills{ margin-bottom:0 !important; } /* NOT --jd-ribbon-h + --jd-bar-h. Those describe the UN-condensed header, which cannot coexist with this rail being stuck: index.php adds .jd-scrolled at scrollY>96 and only removes it below 44, and this section is thousands of pixels down the page, so by the time the rail sticks the ribbon is collapsed to 0 and the bar is 54px here / 58px above. Offsetting against 106px left ~60px of dead air over the rail. */ .we_care .nav_left .nav-pills{ position:sticky; top:70px; } /* 54px bar + 14 */ } @media (min-width:992px){ .we_care .nav_left .nav-pills{ top:114px; } /* 58px condensed bar + 14 */ } /* NB the 768 block is deliberately open-ended rather than capped at 991px. On a fractional device-pixel-ratio (1.25 is common on Windows) a viewport of 991.x matches NEITHER max-width:991px NOR min-width:992px, and a capped block would leave that sliver falling through to style.css:1652's legacy top:100px. Open-ended, 992+ simply overrides 768+ and nothing can fall between them. */ /* every pane's .card-body ALSO carries .sticky_div. Its containing block is the pane, which is never taller than it is, so it can only ever let the text drift away from its own plate. Off. 0-4-0 against style.css:1652's 0-1-0. */ .we_care .tab-content .card-body.sticky_div{ position:static; top:auto; } .we_care .left_nav{ margin-top:8px; } /* style.css:1655 sets 20px on the ROW; the section padding carries that air */ /* --- the two plates ------------------------------------------------------- The rail and the panel are the same object made twice: same 168deg face (the light direction of the ground), same #c9d4cb hairline, same two-part shadow thrown 2px right and 18px down, because the light is up and to the left. #c9d4cb is chosen to be a real edge on BOTH sides — 1.526:1 against the plate it bounds and 1.167:1 against the ground it sits on. The #e6ebe8 the paper room uses for its cards would have measured 1.059:1 against this ground: it would have vanished exactly where the plate meets the wall. This section runs a three-step hairline register and every line knows which step it is on: plate edge #c9d4cb 1.526:1 > heading rule #d9e2db 1.325:1 > list divider #e0e7e2 1.258:1. No overflow:hidden anywhere — it would clip the focus ring. */ .we_care .left_nav .nav-pills, .we_care .left_nav .tab-content{ background:linear-gradient(168deg,#ffffff 0%,#fbfcfb 100%); border:1px solid #c9d4cb; border-radius:14px; box-shadow:0 1px 2px rgba(34,51,31,.05), 2px 18px 34px -22px rgba(34,51,31,.42); } .we_care .left_nav .nav-pills{ /* 6px, not Bootstrap's 0. This is the focus ring's clearance and it is chosen, not inherited: the ring below is 2px thick at outline-offset:3px, so it reaches 5px beyond the pill's own box, and outlines paint without affecting layout. At any gap under 5px that ring lands ON the neighbouring pill — and when the neighbour is the active one it would be #2b3f2f on #3a5240, i.e. 1.327:1, invisible. 6px keeps a pixel in hand. */ padding:6px; } /* --- the pills ------------------------------------------------------------ style.css:1685 paints these with a 200%-wide left-sliding green gradient and style.css:1702 turns the label white on hover — which is exactly what style2.css:1731 does for .active. The two states are indistinguishable, and during the 500ms wipe the label straddles the boundary between #000-on-pale and #000-on-green. The base rule below replaces the shorthand at 0-4-0, which ALSO resets background-size (200% 100%, 0-3-0) and background-position (right bottom, 0-3-0) to their initial values in the same declaration, and replaces transition:all .5s with a named list so a 500ms `all` no longer drags the shadows around. border:0 removes the 1px #4f6f52 rules between pills; they come back as inset ::after hairlines that do not fight the rounded plate hover and active paint under them. font-family:inherit is required — these are