/* ========================================================================== JAGRITI DHAM - HOME PAGE, "Understanding Jagriti Dham" section ========================================================================== Enqueued on the front page only (see functions.php). Loaded after css/responsive.css, so source order settles most of this without !important. WHAT IT LOOKED LIKE BEFORE, measured on the live page: - the heading was 50px/60px Helvetica 400 in #4f6f52 - 4.4:1 on the band, which passes for large text and nothing more - the body was 15px/24px Helvetica, LEFT aligned under a CENTRED heading, running the full 803px column: about 100 characters a line, for an audience that skews 65+ - the band was flat #ebe3cd with 30px of padding and no relationship to anything else on the page - `.about h1 strong{display:block;font-style:italic}` already put "Jagriti" Dham on its own italic line, which is a good bone and is kept The header now establishes a language for this site - Fraunces and Karla, paper grain, brass hairlines, the diamond from the ribbon. This section is brought into it rather than being restyled on its own terms. Both families are already enqueued sitewide by functions.php for the header, so this section costs no extra font request. CONTRAST, all measured against the #ebe3cd band: #2b3f2f heading 8.84:1 #6b5426 the italic line 5.61:1 (passes AA for normal text, not merely the 3:1 large-text floor) #333a31 body copy 9.16:1 The old #4f6f52 heading was 4.4:1 and is replaced. ========================================================================== */ /* -------------------------------------------------------------------------- The band -------------------------------------------------------------------------- style.css:1906 already gives .about the cream ground and a brass rule along the bottom. Added here: the same paper grain the header ribbon uses, a matching hairline along the TOP so the band is closed on both edges, and room to breathe - 30px of padding around a 50px heading was the main reason this read as cramped. */ .about{ position:relative; padding:74px 24px 78px; background-color:#ebe3cd; background-image: 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='.045'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 38%, rgba(127,102,48,.05) 100%); border-top:1px solid rgba(203,178,121,.85); } /* -------------------------------------------------------------------------- The heading -------------------------------------------------------------------------- */ .about h1{ font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; /* clamp rather than a breakpoint step: this heading is two words and a quoted name, and it should stay on two lines from 320px to 1920px */ font-size:clamp(31px, 4vw, 52px); line-height:1.14; font-weight:600; letter-spacing:-.012em; color:#2b3f2f; text-align:center; margin:0; } /* style.css:2932 already sets display:block and italic on the strong - that is what puts "Jagriti" Dham on its own line, and it is worth keeping. Only the weight, colour and rhythm change. */ .about h1 strong, .about h1 span{ display:block; font-style:italic; font-weight:500; color:#6b5426; margin-top:.08em; letter-spacing:-.005em; } /* the ornament: the ribbon's diamond on a brass hairline. ONE pseudo-element doing both jobs, as two background layers - the diamond is an SVG with the band colour painted behind it, which punches a hole in the line rather than sitting on top of it. h1::before is left alone so the heading text is never preceded by generated content a screen reader might announce. */ .about h1::after{ content:""; display:block; width:190px; height:9px; margin:26px auto 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='9'%3E%3Crect width='17' height='9' fill='%23ebe3cd'/%3E%3Cpath d='M8.5 1.2L11.8 4.5 8.5 7.8 5.2 4.5z' fill='%236b5426'/%3E%3C/svg%3E"), linear-gradient(90deg, rgba(107,84,38,0) 0%, rgba(107,84,38,.5) 24%, rgba(107,84,38,.5) 76%, rgba(107,84,38,0) 100%); background-repeat:no-repeat, no-repeat; background-position:center center, center center; background-size:17px 9px, 100% 1px; } /* -------------------------------------------------------------------------- The body copy -------------------------------------------------------------------------- Centred under a centred heading, at a measure that can actually be read. The paragraph was running the full 803px column - roughly 100 characters a line against the 60-75 that is comfortable, and at 15px. 17.5px on a 66ch measure is the substance of this change; everything else here is surface. */ .about p{ font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:17.5px; line-height:1.78; color:#333a31; /* Justified and full-column, as asked for. TWO THINGS THAT HAVE TO COME WITH JUSTIFY, or it looks worse than the ragged right it replaced: hyphens:auto - justification works by stretching the spaces on a line. If no word can break, a line holding one long word ("age-integrated", "consciousness") stretches the remaining gaps to cover it, and those gaps line up down the paragraph as rivers. Hyphenation gives the engine somewhere else to take up the slack. It needs lang on , which this theme sets. A CAP, even though the brief was "wider". The column here is col-lg-8 with no .container above it, so it is 66.67% of the VIEWPORT, not of a fixed content width - at 1920 that is about 1250px, roughly 140 characters a line. 860px holds the full column at ordinary laptop widths and only bites on very large monitors. */ text-align:justify; -webkit-hyphens:auto; hyphens:auto; max-width:min(100%, 860px); margin:30px auto 0; } .about p:last-child{ margin-bottom:0; } /* style.css:271 gives .sectiongap 20px 0; the band's own padding now carries the rhythm, so the inner gap only adds an uneven extra. */ .about .sectiongap{ padding:0; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width:991px){ .about{ padding:58px 22px 62px; } .about p{ font-size:17px; margin-top:26px; } .about h1::after{ width:160px; margin-top:22px; } } @media (max-width:767px){ .about{ padding:46px 18px 50px; } /* 16.5px is the floor for this audience; the measure narrows instead. CORRECTION, 2026-09-08: this paragraph was left justified on phones and described as holding up there. It does not. Measured word gaps, as a multiple of the natural space width: 360px viewport (309px column) worst line 5.1x 7 of 13 over 3x 375px viewport (324px column) worst line 4.3x 4 of 12 over 3x 768px viewport (603px column) worst line 2.4x 0 of 6 So justify holds from 768 up and comes apart below it. Roughly 40 characters a line is simply not enough room to absorb the slack, and hyphenation only softens it. Ragged right below 768. */ .about p{ font-size:16.5px; line-height:1.7; margin-top:22px; text-align:left; } .about h1::after{ width:130px; margin-top:20px; } } /* responsive.css:705 sets `.about h1{font-size:34px}` at <=480px, which would override the clamp and undo the fluid sizing at exactly the width where it matters most. Same specificity, but this file loads later, so restating the clamp here is enough - no !important needed. */ @media (max-width:480px){ .about h1{ font-size:clamp(28px, 7.4vw, 34px); } } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- The heading sits in a `.wow slideInDown` wrapper driven by wow.min.js, which sets visibility:hidden inline until the element scrolls into view. That is fine when the script runs, and harmless when it does not - no script, no inline style, so the heading simply shows. It does NOT currently respect a reduced-motion preference, so that is added here. */ @media (prefers-reduced-motion:reduce){ .about .wow{ visibility:visible !important; animation:none !important; } } /* ========================================================================== "At Jagriti Dham "Compassion" is the Key !" -- the .boxbg panel ========================================================================== Front page only, same enqueue as everything above. Loads after css/responsive.css, so source order settles most of this; where a theme rule needed beating on specificity rather than order it is noted inline. Everything here is scoped under .boxbg. That class appears exactly ONCE on the front page (front-page.php:41) but is generic enough to exist on other templates, and .grid / figure.effect-oscar are shared photo-grid classes. Scoping keeps all of this inside this one panel. WHAT WAS WRONG, measured on the live page at 1280: 1. THE TILE COPY WAS INVISIBLE ON TOUCH. figure.effect-oscar p is opacity:0 + transform:scale(0) and only :hover brings it back. A phone or a tablet has no hover, so Meaning / Care / Peace / Companionship - the actual substance of this panel - simply did not exist for most of the audience. Nothing was focusable either, so a keyboard user could not reach it. That is the main fix here. 2. .gradient_heading is not a gradient. It is background:#4f6f52 (a flat colour) painted through -webkit-background-clip:text with -webkit-text-fill-color:transparent. Same result as color:#4f6f52 in every browser that supports the clip, and INVISIBLE TEXT in any that does not, plus it breaks selection highlighting. Replaced with a plain colour. 3. 40px/50px Helvetica 600 in #4f6f52 on white is 4.4:1 - the large-text floor and nothing more - and it sat directly under the Fraunces heading of the section above, so the page changed voice mid-scroll. 4. Body copy 15px/25px Helvetica, for an audience that skews 65+. 5. position:sticky with top:100px, against a fixed header that is 102px tall once condensed. The heading slid UNDER the header when it stuck. It was also still sticky below 1200px, where the two columns stack and there is nothing to stick beside. 6. filter:grayscale(1) on all four photographs, lifted only on hover - so on every touch device the panel was four permanently grey squares. 7. cursor:pointer on figures that are not links. ========================================================================== */ /* -------------------------------------------------------------------------- The ground and the panel -------------------------------------------------------------------------- .about above is cream, .boxbg was flat #fff, and the page behind is #fff - so the panel had no edges and the cream simply stopped. Three grounds now, warm to cool: the cream band, a paler cream behind the panel, and the panel itself in near-white paper. The pale ground dissolves to white at the bottom so the next section does not start on a hard line. */ .about_area{ background:linear-gradient(180deg,#f7f2e6 0%,#f7f2e6 68%,#ffffff 100%); padding-bottom:78px; } .boxbg{ position:relative; padding:56px 36px 60px; background-color:#fdfbf6; /* the same grain as .about, so the two halves of this section are made of the same paper */ background-image: 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"); border:1px solid rgba(203,178,121,.55); box-shadow:0 26px 60px -44px rgba(43,63,47,.55); } /* the panel's own padding carries the rhythm now; .sectiongap's 20px 0 only added an uneven extra (style.css:271) */ .boxbg.sectiongap{ padding-top:56px; padding-bottom:60px; } /* -------------------------------------------------------------------------- Column balance -------------------------------------------------------------------------- The markup is col-xl-5 / col-xl-1 spacer / col-xl-6 - 405 / 88 / 515 at 1280. 515px split two-up gave 243px tiles, and 243px is simply too small for the 325-character paragraph inside the longest of them: it only fitted at 12px/16px, which is the reason that copy was set so small. Taking 3.7% from the text column and almost all of the spacer gives the grid 60% instead of 50%, so the tiles come out around 308px and the same copy fits at 13.5px/1.5 with room left over. The text column is still ~400px, about 53 characters a line, which is a comfortable measure for an intro column. Bootstrap's .col-xl-5 is (0,1,0); .boxbg .row > .col-xl-5 is (0,3,0). */ @media (min-width:1200px){ .boxbg .row > .col-xl-5{ flex:0 0 auto; width:38%; } .boxbg .row > .col-xl-6{ flex:0 0 auto; width:60%; } /* the spacer column has to lose its gutter padding as well as its width. A Bootstrap column is border-box with 12px of padding each side, so width:2% (19px at this size) is CLAMPED UP to the 24px the padding needs - the three columns then add up to more than 100% and the grid wraps onto its own line. Cost me a puzzled minute; leaving the note. */ .boxbg .row > .col-xl-1{ flex:0 0 auto; width:2%; padding-left:0; padding-right:0; } } /* -------------------------------------------------------------------------- The sticky text column -------------------------------------------------------------------------- style.css:690 sets top:100px sitewide. The condensed header is 0 (ribbon) + 56 (bar) + 46 (nav) = 102px - see css/header-lux.css:486-491, which is where those three numbers live - so at 100px the heading passed BEHIND the header every time it stuck. 56 + --jd-h-nav + 24 of air. By the time this panel is on screen the header is always condensed (the condense fires at 96px of scroll and this sits ~1300px down), so the condensed height is the right one to clear. Below 1200 the columns stack, so there is nothing to be sticky beside - a full-width block pinning itself to the top is just a glitch. */ /* default static and sticky only above 1200, rather than the other way round - a min/max pair leaves a seam at exactly 1199 (see the note on the photo grid), and a full-width block pinning itself to the top is a glitch rather than an effect. */ .boxbg .sticky_div{ position:static; margin-bottom:34px; } @media (min-width:1200px){ .boxbg .sticky_div{ position:sticky; top:calc(56px + var(--jd-h-nav, 46px) + 24px); margin-bottom:0; } } /* -------------------------------------------------------------------------- The heading -------------------------------------------------------------------------- The field holds: At Jagriti Dham "Compassion" is the Key ! - both strongs are display:block (style.css:780), so it rendered as three equal 40px green lines. CSS cannot target the bare text node "At Jagriti Dham", but it does not need to: that text node inherits from .gradient_heading itself, and the two strongs override it. So styling the container as the eyebrow and the strongs as the display type turns one flat block into eyebrow + headline without touching the content. The pairing mirrors .about h1 one section up - roman green line, then italic brass line - so the two headings read as a family. */ .boxbg .gradient_heading{ /* kill the background-clip text hack (style.css:768-778) outright */ background:none; -webkit-text-fill-color:currentColor; -webkit-background-clip:border-box; background-clip:border-box; font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:12.5px; line-height:1.4; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:#7a6134; /* 6.24:1 on #fdfbf6 - AA for small text */ margin:0 0 4px; text-align:left; } /* a short brass rule above the eyebrow. The section above is marked with a centred diamond on a hairline; this column is left-aligned, so it gets the left-aligned cousin rather than a repeat of the same ornament. */ .boxbg .gradient_heading::before{ content:""; display:block; width:46px; height:1px; margin:0 0 18px; background:linear-gradient(90deg,#a98b45 0%,rgba(169,139,69,.15) 100%); } .boxbg .gradient_heading strong{ display:block; font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; text-transform:none; letter-spacing:-.012em; } /* "Compassion" */ .boxbg .gradient_heading strong:first-of-type{ font-size:clamp(34px, 3.5vw, 50px); line-height:1.1; font-weight:600; color:#2b3f2f; /* 10.7:1 on #fdfbf6 */ margin-top:2px; } /* is the Key ! */ .boxbg .gradient_heading strong:last-of-type{ font-size:clamp(24px, 2.4vw, 34px); line-height:1.18; font-weight:500; font-style:italic; color:#6b5426; /* 7.0:1 on #fdfbf6 */ letter-spacing:-.004em; } /* -------------------------------------------------------------------------- The intro copy -------------------------------------------------------------------------- .boxbg p also matches the paragraphs inside the figcaptions, so this is scoped to .sticky_div. Karla at 17px to sit with .about p above, justified with hyphens for the same reason it is justified there. responsive.css:341 already justifies .boxbg p at <=480 - the theme's own author had the same instinct - and this simply makes it true at every width. */ .boxbg .sticky_div p{ font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.72; color:#3a4238; /* 9.1:1 on #fdfbf6 */ margin:20px 0 0; /* RAGGED, not justified - and this one was measured rather than eyeballed. Justification works by stretching the spaces on a line, and every space on a given line is stretched by the same amount, so a narrow column has nowhere to hide the slack. Rendered word gaps in this column, as a multiple of the font's natural space: column 390px (1440) worst line 7.2x 5 of 7 lines over 3x column 344px (1280) worst line 4.1x 4 of 7 lines over 3x column 255px (360) worst line 25.8x 6 of 10 lines over 3x JUSTIFIED ANYWAY, on request and on a second asking. The measurement above is still true and is not hidden here - what changed is whose call it is. hyphens:auto is what keeps it from being worse: it gives the engine somewhere other than the word spaces to take up the slack, and without it the same column measures far looser again. To put it back to ragged, this one line becomes text-align:left. */ text-align:justify; -webkit-hyphens:auto; hyphens:auto; } .boxbg .sticky_div p:first-of-type{ margin-top:26px; } .boxbg .sticky_div p strong{ font-weight:600; color:#2b3f2f; } /* -------------------------------------------------------------------------- The photo grid -------------------------------------------------------------------------- THE CARD IS THE DEFAULT AND THE OVERLAY IS THE ENHANCEMENT, not the other way round. That ordering matters twice over: - It is what makes the copy reachable. The theme hid four paragraphs behind :hover, so on a phone or a tablet they did not exist. Written this way the readable card is what every device gets unless it can prove it has a mouse AND the room to use one. - It closes a gap I actually shipped for a few minutes. The first pass used `@media (hover:none), (max-width:1199px)` for the card and left everything else as the base, and at a viewport of exactly 1199 NEITHER matched: max-width:1199 was false (fractional viewport width) and the 1200 column rules were off too, so the grid rendered as an overlay inside a full-width stacked column. Two opposite queries always leave a seam; one query and a default cannot. */ /* .g-1 is a 4px gutter (0.25rem). Four photographs 4px apart read as one accidentally-sliced image rather than four cards. .boxbg .row.g-1 is (0,3,0) against Bootstrap's (0,1,0). */ .boxbg .row.g-1{ --bs-gutter-x:16px; --bs-gutter-y:16px; } /* height:100% down the chain so two cards side by side in one row finish level even when one caption runs longer. */ .boxbg .grid{ max-width:none; margin:0; height:100%; text-align:left; } .boxbg .grid figure{ position:relative; float:none; /* beats responsive.css:981/1095 width:85% too */ width:100%; height:100%; margin:0; display:flex; flex-direction:column; overflow:hidden; background:#ffffff; border:1px solid rgba(203,178,121,.55); box-shadow:0 14px 30px -24px rgba(43,63,47,.55); /* nothing here is a link, so the hand cursor was a promise the tile could not keep (style.css:1173) */ cursor:default; } .boxbg .grid figure img{ position:relative; display:block; width:100%; height:auto; min-height:0; max-width:none; aspect-ratio:4/3; object-fit:cover; /* The sources are 600x600, so a landscape card crop throws away a quarter of the height - and with the default centre anchor that comes off the TOP as well as the bottom, which clipped the top of the head on Peace and on the standing figure in Companionship. All four are shot with the subject in the upper half, so the crop is biased upwards. Checked on each of the four rather than assumed. */ object-position:center 22%; /* the permanent grayscale(1) is gone. These are warm photographs - a lawn, marigolds, terracotta, a white kurta - and four grey squares read clinical on a page about compassion. */ filter:none; transform:none; /* no transition in card mode. There is no state to move between here, and a transition on opacity/filter that is armed at load leaves the element sitting at the theme's start value until the first frame paints - which on a slow phone is a real flash of hidden text, not a theoretical one. */ transition:none; } .boxbg .grid figcaption{ position:static; width:auto; height:auto; flex:1 1 auto; display:flex; flex-direction:column; justify-content:flex-start; padding:20px 22px 24px; text-align:left; text-transform:none; } /* the brass inset frame belongs to the overlay; on a card it would be a box drawn around a box */ .boxbg .grid figcaption::before{ content:none; } .boxbg .grid figcaption h2{ margin:0 0 9px; transform:none; font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-size:21px; line-height:1.18; font-weight:600; letter-spacing:-.008em; color:#2b3f2f; /* 12.2:1 on #fff */ text-transform:none; text-shadow:none; transition:none; } .boxbg .grid figcaption p{ margin:0; opacity:1; max-height:none; overflow:visible; transform:none; transition:none; font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:15.5px; line-height:1.62; color:#3a4238; /* 10.3:1 on #fff */ text-transform:none; /* Justified, on request. This is the narrowest measure on the page - the caption sits in a ~225px box over the photograph on a desktop and in a ~250-300px card below it on a phone - so it is also where justification has the least room to work. responsive.css:341 was already doing this to every .boxbg p at <=480; now it is deliberate and it applies at every width instead of only on small phones. hyphens:auto is doing more here than anywhere else on the page. The measured numbers are in README-HOME.md. One line back to text-align:left if it reads badly on the tiles. */ text-align:justify; -webkit-hyphens:auto; hyphens:auto; } /* on a phone the four cards are a long scroll; a shallower crop takes about 90px off each one without losing the subject */ @media (max-width:767px){ .boxbg .grid figure img{ aspect-ratio:16/10; } .boxbg .grid figcaption{ padding:17px 18px 20px; } .boxbg .grid figcaption h2{ font-size:20px; } .boxbg .grid figcaption p{ font-size:15px; line-height:1.6; } } /* -------------------------------------------------------------------------- Pointer, and room for it: the overlay -------------------------------------------------------------------------- A mouse and at least 1200px. Below that the two columns stack anyway, so an overlay would be a 430px-wide photograph with its caption hidden behind a hover - the worst of both. */ @media (hover:hover) and (min-width:1200px){ /* 4:5 rather than the square the photographs are cropped to. The square gave 266px tiles at 1280, and the longest of the four captions (Companionship, 361 characters) needs about 226px of text height at a readable 13.5px - more than a 266px square has left once the title and the padding are out. Portrait buys that room, and a 600x600 source loses only 10% off each side to the crop. This is the whole reason that copy used to be set at 12px. */ .boxbg .grid figure{ display:block; height:auto; aspect-ratio:4/5; background:#1c231c; border-color:rgba(203,178,121,.4); box-shadow:none; } .boxbg .grid figure img{ position:absolute; inset:0; height:100%; aspect-ratio:auto; /* a light desaturation holds the four together as a set at rest; hover takes it off entirely */ filter:saturate(.9) contrast(1.02); transition:transform .8s cubic-bezier(.2,.7,.2,1), filter .45s ease, opacity .45s ease; } /* the scrim. figcaption::before is already spoken for (the brass inset frame), so this rides on the figure's own ::after, under the caption and over the photograph. */ .boxbg .grid figure::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(18,24,18,0) 34%, rgba(18,24,18,.32) 62%, rgba(18,24,18,.86) 100%); transition:background .45s ease; } /* justify-content:flex-end replaces figure.effect-oscar h2's margin:78% - a PERCENTAGE margin, which resolves against the tile's WIDTH, so the title only sat in the right place because the tiles happened to be square. */ .boxbg .grid figcaption{ position:absolute; inset:0; z-index:2; justify-content:flex-end; padding:20px 20px 18px; } /* permanent instead of hover-only, so a tile looks finished at rest. (0,2,2) beats figure.effect-oscar figcaption::before at (0,1,3). */ .boxbg .grid figcaption::before{ content:""; position:absolute; top:11px; right:11px; bottom:11px; left:11px; border:1px solid rgba(203,178,121,.42); opacity:1; transform:none; transition:border-color .45s ease; } .boxbg .grid figcaption h2{ margin:0; font-size:23px; line-height:1.16; color:#f6edd8; text-shadow:0 1px 3px rgba(0,0,0,.55); } /* The paragraph stays in flow and is clipped rather than scaled, so when it opens it pushes the title up instead of landing on top of it. max-height is a transition handle only. */ .boxbg .grid figcaption p{ /* the caption is bottom-aligned, so the gap that matters is ABOVE the paragraph; the figcaption's own padding closes the bottom. */ margin:7px 0 0; opacity:0; max-height:0; overflow:hidden; transform:translateY(6px); font-size:13.5px; line-height:1.52; color:#f0e8d8; transition:opacity .4s ease, max-height .5s ease, transform .4s ease; } /* :focus-within alongside :hover so that if anything focusable ever lands inside a tile the copy opens for a keyboard as well as a mouse. */ .boxbg .grid figure:hover::after, .boxbg .grid figure:focus-within::after{ background:linear-gradient(180deg,rgba(18,24,18,.82) 0%,rgba(18,24,18,.9) 100%); } .boxbg .grid figure:hover img, .boxbg .grid figure:focus-within img{ filter:none; opacity:1; transform:scale(1.055); } .boxbg .grid figure:hover figcaption::before, .boxbg .grid figure:focus-within figcaption::before{ border-color:rgba(203,178,121,.9); } .boxbg .grid figure:hover figcaption p, .boxbg .grid figure:focus-within figcaption p{ opacity:1; max-height:360px; transform:none; } /* style.css:1257 drops the photo to opacity:.4 on hover, which greys the colour out again at exactly the moment it should be at its best. The scrim is doing that job now. */ .boxbg .grid figure.effect-oscar:hover img{ opacity:1; } } /* The tiles grow with the panel, so the overlay only has a fitting problem at the very bottom of the desktop range: at 1200 a tile is 251px wide and Companionship (361 characters) overflowed it by 9px. Measured, not guessed. A taller crop and a step down in size fix it there without touching the sizes that already work, and the ratio change is inside a breakpoint, so nobody ever sees it happen. */ @media (hover:hover) and (min-width:1200px) and (max-width:1365px){ .boxbg .grid figure{ aspect-ratio:3/4; } .boxbg .grid figcaption{ padding:16px 16px 15px; } .boxbg .grid figcaption h2{ font-size:20px; } .boxbg .grid figcaption p{ font-size:12.5px; line-height:1.5; margin-top:6px; } } /* and the opposite at the top of the range: a 417px tile at 1920 makes 13.5px copy look stranded, and there is 300px of spare height to spend. */ @media (hover:hover) and (min-width:1600px){ .boxbg .grid figcaption{ padding:26px 26px 24px; } .boxbg .grid figcaption h2{ font-size:26px; } .boxbg .grid figcaption p{ font-size:15px; line-height:1.56; margin-top:10px; } } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width:1199px){ .boxbg{ padding:48px 30px 52px; } .boxbg.sectiongap{ padding-top:48px; padding-bottom:52px; } .about_area{ padding-bottom:60px; } } @media (max-width:767px){ .boxbg{ padding:36px 20px 40px; } .boxbg.sectiongap{ padding-top:36px; padding-bottom:40px; } .boxbg .gradient_heading{ font-size:12px; letter-spacing:.18em; } .boxbg .gradient_heading::before{ margin-bottom:14px; } .boxbg .sticky_div p{ font-size:16.5px; line-height:1.68; } .boxbg .row.g-1{ --bs-gutter-y:18px; } .about_area{ padding-bottom:44px; } } /* responsive.css:119 and :976/:1090 set .gradient_heading font-size at 24px / 35px, which would land on the EYEBROW now rather than on the display type. Same specificity, later file, so restating it is enough - but it has to be restated at every one of those widths or the eyebrow blows up to 35px. */ @media (max-width:480px){ .boxbg .gradient_heading{ font-size:12px; line-height:1.4; } } @media (min-width:481px) and (max-width:768px){ .boxbg .gradient_heading{ font-size:12.5px; line-height:1.4; margin-bottom:4px; } } @media (min-width:768px) and (max-width:1024px){ .boxbg .gradient_heading{ font-size:12.5px; line-height:1.4; margin-bottom:4px; } } @media only screen and (min-device-width:820px) and (max-device-width:1180px) and (orientation:landscape){ .boxbg .gradient_heading{ font-size:12.5px; line-height:1.4; } } /* responsive.css:967/:1082 centre .about, .about_area and .about h2 between 481 and 1024. .about_area is an ancestor of this panel, so that inherited into the eyebrow, the intro copy and the card text. */ @media (min-width:481px) and (max-width:1024px){ .boxbg, .boxbg .sticky_div, .boxbg .grid{ text-align:left; } } /* -------------------------------------------------------------------------- Motion -------------------------------------------------------------------------- The earlier block covers .about .wow; the tiles and the text column are in .about_area but not in .about, so they were still animating. */ @media (prefers-reduced-motion:reduce){ .about_area .wow{ visibility:visible !important; animation:none !important; } .boxbg .grid figure img, .boxbg .grid figure::after, .boxbg .grid figcaption p, .boxbg .grid figcaption::before{ transition:none !important; } .boxbg .grid figure:hover img, .boxbg .grid figure:focus-within img{ transform:none; } } /* ========================================================================== "Eldercare Living at Jagriti Dham" -- #eldercare_living ========================================================================== Front page only, same enqueue. Everything is scoped under the ID, which also settles the cascade: #eldercare_living .tick ul li::before is (1,1,3) against the theme's (0,1,3), so nothing here needs !important even where responsive.css restates a value later in its own file. WHAT WAS WRONG, measured at 1440 and 375: 1. THE TABS DID NOT LOOK LIKE CONTROLS. An inactive pill was bare bold text with no border, no ground, no hover state - five labels in a row that happen to be clickable. Only the active one had a hairline under it and a small green triangle poking out below. 2. AND THEY WERE TOO SMALL TO TAP. Measured 30-32px tall on a phone at 13px type. The floor for a touch target is 44px, and this audience skews 65+. 3. The intro paragraph ran the FULL container - about 150 characters a line at 1440, at 15px - and was left-aligned under a centred heading (style.css:1951). 4. 36px Helvetica in #4f6f52 on white is 5.63:1, and the whole section was in the theme's system sans directly below two sections that are now Fraunces and Karla. The page changed voice mid-scroll. 5. No ground of its own. White section between a white-ending section and the gallery, so it had no edges at all. 6. .equalheight puts display:flex on #v-pills-rd1, whose only child is a
with no col class - so .equalheight > [class*=col-] matches nothing and the flex context does nothing but make the child's width content-based. Latent, not yet visible; switched off here. ========================================================================== */ /* -------------------------------------------------------------------------- The ground -------------------------------------------------------------------------- The page reads cream band -> white paper panel -> and now a pale band, so the three sections alternate rather than repeat. Brass hairlines top and bottom close it, the same way .about is closed. */ #eldercare_living{ position:relative; background-color:#faf7ef; background-image: 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"); border-top:1px solid rgba(203,178,121,.7); border-bottom:1px solid rgba(203,178,121,.7); } #eldercare_living .sectiongap{ padding:74px 0 78px; } /* -------------------------------------------------------------------------- The heading -------------------------------------------------------------------------- Same construction as .about h1 - Fraunces, deep green, and the brass hairline with the diamond punched through it. Repeating that mark here is deliberate: it turns a one-off ornament into the site's section mark. */ #eldercare_living .section-title{ margin-bottom:0; } #eldercare_living .section-title h2{ font-family:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; font-size:clamp(29px, 3.4vw, 46px); line-height:1.14; font-weight:600; letter-spacing:-.012em; color:#2b3f2f; /* 10.85:1 on the band */ text-align:center; margin:0; } #eldercare_living .section-title h2::after{ content:""; display:block; width:170px; height:9px; margin:24px auto 0; /* the band colour is painted behind the diamond so it punches a hole in the rule rather than sitting on top of it - same trick as .about */ background-image: 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"), linear-gradient(90deg, rgba(107,84,38,0) 0%, rgba(107,84,38,.5) 24%, rgba(107,84,38,.5) 76%, rgba(107,84,38,0) 100%); background-repeat:no-repeat, no-repeat; background-position:center center, center center; background-size:17px 9px, 100% 1px; } /* style.css:1951 left-aligns this under a centred heading and lets it run the whole container - 150 characters a line at 1440. The cap is the substance of the change; the alignment follows .about p, which measured 1.4-1.5x word gaps at a comparable width. */ #eldercare_living .section-title p{ font-family:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; font-size:17px; line-height:1.74; color:#3a4238; /* 9.98:1 on the band */ max-width:min(100%, 790px); margin:28px auto 0; text-align:justify; -webkit-hyphens:auto; hyphens:auto; } /* -------------------------------------------------------------------------- The tab rail -------------------------------------------------------------------------- A segmented control on white with a brass hairline, so the five services read as a control at rest instead of only when one is chosen. Every segment is at least 46px tall. It WRAPS rather than scrolls on a narrow screen. A scrolling rail is the tidier pattern, but it hides options off the edge, and hiding four of five services from a 65+ audience is the wrong trade. */ #eldercare_living .section_separation .nav-pills{ display:flex; flex-wrap:wrap; /* TWO !important rules have to be beaten here, and neither is obvious from the markup: bootstrap.min.css .justify-content-evenly{justify-content:space-evenly!important} responsive.css .nav.justify-content-evenly{justify-content:left!important} (<=480) The class is on the