/* ==========================================================================
JAGRITI DHAM -- ABOUT PAGE, the Infinity Group section
css/about-lux.css · page 1051 only · /senior-citizen-apartments/
==========================================================================
Template: page-templates/about.php
SCOPE. Everything here is scoped to `.about`, which is a GENERIC theme
class - front-page.php, front-page2.php and eldersgottalent-page.php emit
it too, and css/home-lux.css restyles the front page's copy of it. This
file is therefore enqueued for page 1051 ONLY. It must never load
sitewide, and nothing in it may be moved into style.css or responsive.css.
It is enqueued with array('responsive') as its dependency, so it prints
after css/responsive.css. Two rules below depend on that order rather than
on specificity - `.about{padding:0}` against responsive.css:433
`.about{padding:0 10px}`, and `.about{text-align:left}` against
responsive.css:966/:1080 `.about,.about_area,.about h2{text-align:center}`.
Both are (0,1,0) on each side. Everywhere a theme rule sits inside a media
query AND matches at equal-or-higher weight, this file raises its own
specificity instead of trusting order; those places are named inline.
WHAT WAS WRONG
--------------
1. The ground. style.css:1906 gives `.about` #ebe3cd, 30px of padding on
all four sides and `border-bottom:1px solid #cbb279`. On THIS page the
section directly below is `.peachbg`, a solid #cbb279 band
(style.css:854), so that bottom rule draws #cbb279 on #cbb279 - an
invisible border - and a flat sand meeting solid brass is a smudge
rather than a seam.
2. The heading. Helvetica 36px/700 #4f6f52 (style.css:78), left-aligned in
spite of the .text-center on its wrapper, because style.css:1912 targets
the h2 itself and a declaration on the element beats a value INHERITED
from a flagged parent. #4f6f52 on #ebe3cd is 4.40:1 - the large-text
floor and nothing more.
3. The body. One ~100-word paragraph at 15px/24px #151515 (style.css:2938),
the densest type on the page, for an audience that skews 65+.
4. The images. The photograph absolutely positioned at right:75px/top:25px
(style.css:947) over images/about_img_back2.webp - a 440-byte flat
khaki (#85825f) rectangle - and the name card absolutely positioned at
right:45px/bottom:-2pc, a white 10px-rounded box hanging 32px outside
its own column on a site that is square-cornered throughout.
WHAT THIS FILE DOES
-------------------
Nothing structural: the row is still col-lg-6 + col-lg-6, the photograph is
still left, the copy is still one editor-owned field. The section becomes
LEFT one mounted object - the photograph inset in a deep-green mount
with the name seated in the mount below it, and the house brass
hairline frame offset down and right behind the whole plate
(the device #eldercare_living already uses, home-lux.css:983).
RIGHT the house left-aligned section mark, a Fraunces heading, and the
statement set at 17-20px on a 600px measure.
THE PHOTOGRAPH IS 375x400 AND IS NOT CROPPED. Checked before designing
round it: images/Ravindra-Chamaria.webp is a rectangular photograph
(VP8X with an ALPH chunk, but alpha runs 241-255 - effectively opaque,
NOT a cut-out, and it does not need a backing plate). No aspect-ratio and
no object-fit anywhere in this file: a cover crop on a photograph of a
face, sight unseen, cuts whichever axis the next upload happens to make
long. The MOUNT is what lets the plate be as wide as the column wants
while the photograph is never blown up past ~1.10x of its 375px source -
see the --jd-ab-mat steps in part 6.
NOTHING HERE KEYS ON THE WORDS. See part 4.
CONTRAST, computed for this file (WCAG 2.x relative luminance, sRGB):
on the band #faf7ef
#2b3f2f heading, lead paragraph, mount 10.58:1
#333a31 the single-paragraph case 10.96:1
#3a4238 body copy 9.73:1
#6b5426 links, italics 6.71:1
#a98b45 the section mark's rule 3.03:1
#cbb279 brass hairlines 1.93:1 DECORATIVE ONLY
on the mount #2b3f2f
#f6edd8 the name 9.72:1
#e6d4a6 the role 7.73:1
#cbb279 the photograph's hairline 5.49:1
the mount #2b3f2f against the band 10.58:1
The brass hairlines at 1.93:1 bound no control, carry no state and convey
no information, so SC 1.4.11's 3:1 does not apply to them. Nothing in this
section is interactive except a link the editor may paste into the body,
which is underlined as well as coloured (SC 1.4.1) and carries a focus
ring, because style.css:64 zeroes :focus sitewide.
No new fonts (Fraunces and Karla are already enqueued sitewide as the
'jd-header-fonts' handle), no new JavaScript, no new images.
========================================================================== */
/* ==========================================================================
1. TOKENS AND THE BAND
==========================================================================
#faf7ef is not a new colour: it is the paper of #eldercare_living
(home-lux.css:822), and this section is built as that band's sibling -
same grain at .04 opacity, same brass hairline closing the top edge. It is
used here rather than the home page's #ebe3cd because of the seam named at
the head of this file: cream against the solid #cbb279 of `.peachbg` is a
step, sand against it is a smudge. The theme's border-bottom goes for the
same reason - it was drawing #cbb279 on #cbb279. */
.about{
--jd-ab-band:#faf7ef;
--jd-ab-green:#2b3f2f; /* mount, name plate, display ink */
--jd-ab-ink:#3a4238; /* body */
--jd-ab-ink-solo:#333a31; /* the single-paragraph case */
--jd-ab-brass:#cbb279; /* decorative hairlines */
--jd-ab-brass-ink:#6b5426; /* links, italics */
--jd-ab-cream:#f6edd8; /* cream-on-dark */
--jd-ab-pale:#e6d4a6; /* pale brass on dark */
--jd-ab-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
--jd-ab-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
--jd-ab-ease:cubic-bezier(.2,.7,.2,1);
/* the mount's inset and the frame's offset; stepped in part 6 */
--jd-ab-mat:16px;
--jd-ab-off:12px;
position:relative;
/* was padding:30px on all four sides. The vertical rhythm moves to
.sectiongap, exactly as #eldercare_living does it, so the .container
gutter is the only horizontal inset and 320px stays clean. This is a
base rule at (0,1,0) and so is responsive.css:433 `.about{padding:0 10px}`
inside @media(max-width:480px) - source order settles it, which is why
the enqueue MUST depend on 'responsive'. */
padding:0;
background-color:var(--jd-ab-band);
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:0;
/* responsive.css:966 and :1080 centre `.about` between 481 and 1024, which
centred the body copy on tablets. Restated here, and every block below
also states its own alignment - that is the only way to reach the
headings and list items the WYSIWYG can emit. */
text-align:left;
/* NO overflow:hidden, and NO --bs-gutter-x override. Bootstrap's
.container reads `padding:var(--bs-gutter-x,.75rem)` and that property is
declared on .row, a DESCENDANT - so raising the gutter widens the row's
negative margins without widening the container's padding, and at >=1200,
where responsive.css:1185 caps .container at 1220px, the row then
overhangs the viewport and the page gets a horizontal scrollbar. The
space between the two columns is opened with the mount instead (part 6). */
}
/* style.css:271 gives .sectiongap 20px 0. The band owns its rhythm now, the
way #eldercare_living does (home-lux.css:827). (0,2,0) beats (0,1,0). */
.about .sectiongap{ padding:52px 0 56px; }
/* ==========================================================================
2. THE COLUMNS, AND WHY NOTHING IS STICKY
==========================================================================
style.css:690 makes `.sticky_div` `position:sticky; top:100px`. Three
things are wrong with that here and only one of them is the offset:
· the header is position:fixed and 102px tall once condensed
(header-lux.css:486-487 with the :root heights at :509-511 - ribbon 0
+ bar 56 + nav 46), so at top:100px the plate parks 2px under the bar
and is clipped for as long as it is stuck;
· the plate is the TALLER column at every desktop width with today's
copy (~600px against ~430px of statement), and a sticky element that
fills its own containing block has zero travel - it cannot move;
· what the short column actually wants is to sit level with the tall
one, not to pin itself to the top of the viewport.
So sticky comes off and the row is centred instead. That is the better
answer at BOTH content lengths: today the statement centres against the
plate, and if the editor writes 300 words the plate centres against the
statement. The theme sets the same precedent for the contact column at
responsive.css:409, `.peachbg .sticky_div{position:static}`.
`top:auto` is not tidiness. Leaving top:100px on a box that is no longer
sticky does nothing today but is a live trap the moment anyone puts a
`position` value back - a relatively positioned box would drop 100px. */
.about .chairman_div,
.about .chairman_div.sticky_div{
position:relative; /* the offset frame hangs off this box */
top:auto;
z-index:0;
}
@media (min-width:992px){
/* only where the two columns are actually side by side (col-lg-*).
align-items, not a gutter override - see the note at the end of part 1. */
.about .row{ align-items:center; }
}
/* ==========================================================================
3. THE PLATE -- mount, photograph, name
==========================================================================
One object where there were three loose parts. The mount is deep green and
is carried by TWO boxes - .about-img-wrap round the photograph and
.name_div under it - because those are siblings in about.php and this file
does not restructure the markup. They stack flush, so they read as one
plate.
THE FRAME IS z-index:0, NOT -1. .chairman_div is position:relative with
z-index:0, so a negative-z pseudo-element would escape to the root
stacking context and paint BEHIND the band's own background - invisible.
The house pattern at home-lux.css:983-1001 already solves it the right way:
frame at z-index:0, image above it at z-index:1. Same here, so the frame's
top and left segments hide behind the opaque green mount and only the L
along the right and the bottom shows, which is the whole device. */
.about .chairman_div{
max-width:100%;
/* the frame overhangs to the right by --jd-ab-off, so the plate is pulled
in by the same amount and cannot push anything past the container gutter
at 320px */
margin:0 var(--jd-ab-off) 40px 0;
box-shadow:0 22px 44px -34px rgba(43,63,47,.75); /* home-lux.css:1001 */
}
.about .chairman_div::before{
content:"";
position:absolute;
z-index:0;
top:var(--jd-ab-off);
left:var(--jd-ab-off);
right:calc(var(--jd-ab-off) * -1);
bottom:calc(var(--jd-ab-off) * -1);
border:1px solid rgba(203,178,121,.9);
pointer-events:none;
}
.about .chairman_div .about-img-wrap{
position:relative;
z-index:1;
/* responsive.css:262 gives this margin:0 0 16px and :923/:1037 give it
margin-bottom:2pc. Either would open a gap in the middle of the mount.
(0,3,0) against their (0,1,0). */
margin:0;
padding:var(--jd-ab-mat) var(--jd-ab-mat) 0;
background-color:var(--jd-ab-green);
line-height:0; /* no inline-image gap under the photograph */
}
/* THE PHOTOGRAPH, back in the flow.
(0,3,1) on purpose: responsive.css:413, :917, :1031 and :1216 all
re-position `.about-img-wrap img:nth-child(2)` at (0,2,1) from inside media
queries, and matching them would leave the result depending on stylesheet
order alone. It is written against ALL images in the wrap rather than
:nth-child(2), so it is correct whether the khaki backing ![]()
is still in
about.php (photograph = nth-child(2)) or has been deleted (photograph =
nth-child(1), where responsive.css:961 and :1074 would otherwise shove it
left:-2pc). */
.about .chairman_div .about-img-wrap img{
position:static;
top:auto; right:auto; bottom:auto; left:auto;
float:none;
display:block;
width:100%;
height:auto;
max-width:100%;
margin:0;
padding:0; /* responsive.css:415 padding:15px */
z-index:auto;
border:1px solid rgba(203,178,121,.5); /* home-lux.css:1000 */
border-radius:0;
box-shadow:none;
}
/* The flat khaki rectangle is retired. Matched on its own filename so it goes
whether or not about.php has been edited; once the ![]()
is deleted from
the template this rule is simply inert. */
.about .chairman_div .about-img-wrap img[src$="about_img_back2.webp"]{
display:none;
}
/* THE NAME, seated in the mount.
style.css:1881 writes, in this order:
border-top:3px solid #87805e !important;
border-radius:10px 10px 0 0;
border:1px solid #ccc;
- the shorthand would have wiped the top border and only the flag saves it.
An unflagged border-top cannot beat a flagged one at any specificity, so
the flag is answered in kind. That is the ONLY !important outside the
reduced-motion and print blocks, and it is here because the theme used one
first. Everything else on this element - the absolute positioning, the 10px
radius, the #ccc border, the shadow, the white fill, and responsive.css's
left:3pc/right:3pc (:422) and left:13pc/right:13pc (:927, :1041) - is
unflagged and is beaten by (0,3,0) alone. */
.about .chairman_div .name_div{
border:0 !important;
position:relative;
z-index:2;
top:auto; right:auto; bottom:auto; left:auto;
display:block;
width:auto;
margin:0;
padding:var(--jd-ab-mat) var(--jd-ab-mat) calc(var(--jd-ab-mat) + 4px);
text-align:left;
background-color:var(--jd-ab-green);
border-radius:0;
box-shadow:none;
}
/* The `name` field is an ACF WYSIWYG - the tags are the editor's. Today it is
an h6 and a p. A bare first paragraph is caught as the name, which is the
right guess if the h6 is ever dropped. */
.about .chairman_div .name_div h6,
.about .chairman_div .name_div h5,
.about .chairman_div .name_div h4,
.about .chairman_div .name_div p:first-child{
font-family:var(--jd-ab-serif);
font-optical-sizing:auto;
font-size:clamp(18px, 1.5vw, 21px);
line-height:1.24;
font-weight:600;
font-style:normal;
letter-spacing:-.005em;
text-transform:none;
color:var(--jd-ab-cream); /* 9.72:1 on #2b3f2f */
margin:0;
text-align:left;
}
/* the site's caption voice - the same 12.5px / 600 / .2em uppercase Karla as
the .boxbg eyebrow at home-lux.css:334-340 and the footer's column labels */
.about .chairman_div .name_div h6 + p,
.about .chairman_div .name_div h5 + p,
.about .chairman_div .name_div h4 + p,
.about .chairman_div .name_div p + p{
font-family:var(--jd-ab-sans);
font-size:12.5px;
line-height:1.4;
font-weight:600;
letter-spacing:.2em;
text-transform:uppercase;
color:var(--jd-ab-pale); /* 7.73:1 on #2b3f2f */
margin:8px 0 0;
text-align:left;
}
/* ==========================================================================
4. THE STATEMENT
==========================================================================
TWO SELECTORS ON EVERY RULE. `.jd-ab-body` is the class about.php should
carry; the structural twin - the one div in the right-hand column that is
not the section title - keeps this file correct if that edit is skipped,
and at (0,4,3) it also clears `.about p{color:#151515;text-align:left;
line-height:24px}` (style.css:2938) and `.about p{line-height:22px}`
(responsive.css:266) without a flag. The element rules use a DESCENDANT
combinator, so a stray wrapper left in the field by a Word paste cannot
silently drop the whole block back to the theme's 15px; only the two
paragraph-position rules use `>`, and if they stop matching the block
simply sets uniformly, which is the safe failure. */
/* --- the heading ------------------------------------------------------- */
.about .section-title{ margin:0; padding:0; } /* style.css:267 margin-bottom:20px */
/* The house section mark, left-aligned cousin: home-lux.css:349-356 draws a
46px brass rule ABOVE a left-aligned heading and reserves the centred
diamond-on-a-hairline for centred headings (.about h1,
#eldercare_living h2). This column is left-aligned, so it gets the cousin
verbatim rather than a third dialect of the same ornament. */
.about .section-title::before{
content:"";
display:block;
width:46px;
height:1px;
margin:0 0 18px;
background:linear-gradient(90deg,#a98b45 0%,rgba(169,139,69,.15) 100%);
}
.about .section-title h2{
font-family:var(--jd-ab-serif);
font-optical-sizing:auto; /* Fraunces is enqueued with the 9..144 axis */
font-size:clamp(28px, 3vw, 42px);
line-height:1.14;
font-weight:600;
letter-spacing:-.012em;
color:var(--jd-ab-green); /* 10.58:1 */
/* stated, not inherited. Bootstrap's .text-center is
`text-align:center!important` on the WRAPPER, and a declaration on the h2
beats a value inherited from an ancestor however that ancestor flagged
it - which is why style.css:1912 already wins today. So this file is
correct whether or not `text-center` comes off in about.php. */
text-align:left;
margin:0; /* responsive.css:971/:1085 `margin-top:1pc` */
padding:0;
overflow-wrap:break-word; /* an unbreakable client word at 320px */
}
/* several theme h2 rules hang a green bar off ::after; the mark is above */
.about .section-title h2::after{ content:none; }
/* if the ACF heading is ever cleared, do not leave the mark floating over
nothing with 18px of margin under it */
.about .section-title h2:empty{ display:none; }
/* --- the body ----------------------------------------------------------
THE SUBSTANCE OF THIS SECTION IS SIZE AND MEASURE. 15px/24px on a
~100-character line becomes 17px/1.8 on a 600px cap - about 70 characters
at 1280 - with the opening paragraph set larger.
JUSTIFIED, WITH HYPHENS, because that is the house setting and it was
asked for twice. home-lux.css justifies .about p, .boxbg .sticky_div p and
#eldercare_living .section-title p, and the comment at home-lux.css:399
records that the measurement said ragged for a column this narrow and the
client asked for justified anyway. hyphens:auto is what keeps a narrow
column from opening rivers - it gives the engine somewhere other than the
word spaces to take up the slack - and it needs `lang` on , which
this theme sets. To go ragged, `text-align:left` on this one rule is the
whole change.
HOW IT SURVIVES THE EDITOR. Nothing below matches on a word:
· size, measure and colour apply to every paragraph, at any length;
· `p:first-of-type:not(:last-of-type)` is the lead - keyed on paragraph
COUNT, so it cannot fire on a single paragraph and can never swallow
the whole field;
· `p:only-of-type` is today's case, one paragraph, set half a step up
because it is the entire statement;
· `strong` and `em` are the editor's own toolbar buttons, so emphasis
survives any rewrite and costs nothing when they use neither.
Sixty words or three hundred, one paragraph or five, the block sets
correctly and no CSS is touched. */
.about .jd-ab-body,
.about .row > div:last-child > div:not(.section-title){
margin-top:30px;
text-align:left;
overflow-wrap:break-word; /* a pasted URL must not overflow at 320px */
}
.about .jd-ab-body p,
.about .row > div:last-child > div:not(.section-title) p{
font-family:var(--jd-ab-sans);
font-size:17px;
line-height:1.8;
font-weight:400;
color:var(--jd-ab-ink); /* 9.73:1 */
max-width:min(100%, 600px);
margin:0 0 1.1em;
text-align:justify;
-webkit-hyphens:auto;
hyphens:auto;
}
.about .jd-ab-body > *:last-child,
.about .row > div:last-child > div:not(.section-title) > *:last-child{
margin-bottom:0;
}
/* the lead - only when there is more than one paragraph */
.about .jd-ab-body > p:first-of-type:not(:last-of-type),
.about .row > div:last-child > div:not(.section-title) > p:first-of-type:not(:last-of-type){
font-size:20px; /* an 18% step - a smaller one does not read */
line-height:1.68;
font-weight:500;
color:var(--jd-ab-green); /* 10.58:1 */
}
/* the single-paragraph case, which is today's */
.about .jd-ab-body > p:only-of-type,
.about .row > div:last-child > div:not(.section-title) > p:only-of-type{
font-size:18px;
line-height:1.78;
color:var(--jd-ab-ink-solo); /* 10.96:1 */
}
/* Emphasis is carried by WEIGHT and by the element, never by hue alone
(SC 1.4.1). This is how the editor lifts the IGBC clause without anyone
touching CSS again. */
.about .jd-ab-body strong, .about .jd-ab-body b,
.about .row > div:last-child > div:not(.section-title) strong,
.about .row > div:last-child > div:not(.section-title) b{
font-weight:600;
color:var(--jd-ab-green); /* 10.58:1 */
}
/* italic in the display face - the treatment home-lux.css:70-75 already uses */
.about .jd-ab-body em, .about .jd-ab-body i,
.about .row > div:last-child > div:not(.section-title) em,
.about .row > div:last-child > div:not(.section-title) i{
font-family:var(--jd-ab-serif);
font-optical-sizing:auto;
font-style:italic;
font-weight:500;
font-size:1.06em;
letter-spacing:-.004em;
color:var(--jd-ab-brass-ink); /* 6.71:1 */
}
/* --- everything else a WYSIWYG can emit --------------------------------
Not decoration. The field is a rich-text editor: the day somebody pastes a
sub-head or a bulleted list, an unstyled falls to the theme's 13px
Helvetica and is CENTRED between 481 and 1024 by responsive.css:966/:1080.
Both are answered here. */
.about .jd-ab-body h3, .about .jd-ab-body h4,
.about .jd-ab-body h5, .about .jd-ab-body h6,
.about .row > div:last-child > div:not(.section-title) h3,
.about .row > div:last-child > div:not(.section-title) h4,
.about .row > div:last-child > div:not(.section-title) h5,
.about .row > div:last-child > div:not(.section-title) h6{
font-family:var(--jd-ab-serif);
font-optical-sizing:auto;
font-size:clamp(19px, 1.7vw, 23px);
line-height:1.26;
font-weight:600;
font-style:normal;
letter-spacing:-.008em;
color:var(--jd-ab-green);
text-align:left;
margin:1.7em 0 .5em;
}
.about .jd-ab-body ul, .about .jd-ab-body ol,
.about .row > div:last-child > div:not(.section-title) ul,
.about .row > div:last-child > div:not(.section-title) ol{
max-width:min(100%, 600px);
margin:0 0 1.1em;
padding-left:1.25em;
text-align:left;
}
.about .jd-ab-body li,
.about .row > div:last-child > div:not(.section-title) li{
font-family:var(--jd-ab-sans);
font-size:17px;
line-height:1.75;
color:var(--jd-ab-ink);
text-align:left;
margin:0 0 .5em;
}
.about .jd-ab-body li::marker,
.about .row > div:last-child > div:not(.section-title) li::marker{
color:var(--jd-ab-brass-ink);
}
.about .jd-ab-body blockquote,
.about .row > div:last-child > div:not(.section-title) blockquote{
margin:1.4em 0;
padding:0 0 0 20px;
border-left:2px solid var(--jd-ab-brass);
text-align:left;
}
.about .jd-ab-body img,
.about .row > div:last-child > div:not(.section-title) img{
max-width:100%;
height:auto;
border-radius:0;
}
/* A link pasted into the field. Underlined as well as coloured, and the ring
is restated because style.css:64 sets `:focus{outline:0;box-shadow:none}`
sitewide - (0,2,0) against its (0,1,0). An inline link inside a sentence is
exempt from SC 2.5.8's target size; the ring is what makes it findable. */
.about a{
color:var(--jd-ab-brass-ink); /* 6.71:1 */
text-decoration:underline;
text-decoration-thickness:1px;
text-underline-offset:3px;
transition:color .25s var(--jd-ab-ease);
}
.about a:hover{ color:var(--jd-ab-green); }
.about a:focus,
.about a:focus-visible{
outline:2px solid var(--jd-ab-brass-ink);
outline-offset:3px;
border-radius:0;
}
.about a:focus:not(:focus-visible){ outline:0; }
/* on the green mount the ring has to invert or it disappears */
.about .chairman_div .name_div a:focus,
.about .chairman_div .name_div a:focus-visible{ outline-color:var(--jd-ab-pale); }
/* ==========================================================================
5. MOTION
==========================================================================
WOW.js and animate.css stay, and so do the three .wow boxes. What changes
is their weight: animate.css v3 sets `.animated{animation-duration:1s}`,
which is a slow reveal for a block of type somebody is trying to start
reading. (0,2,0) against its (0,1,0), and WOW writes duration and easing
inline only when the markup carries data-wow-*, which it does not.
The animation NAMES can only be changed in about.php - wow.min.js caches
the computed animation-name at init and writes it back inline on reveal,
so a stylesheet override of animation-name is ignored. The recommended
swap is `zoomIn` -> `fadeInUp` on the statement and `slideInUp` ->
`fadeInUp` on the photograph: zoomIn starts at scale3d(.3,.3,.3), i.e. it
scales the type itself, and slideInUp translates the plate by 100% of its
own ~600px height. Neither is a gesture to hand to this audience. Nothing
in this file keys on those class names, so it is correct either way. */
.about .wow.animated{
animation-duration:.7s;
-webkit-animation-duration:.7s;
animation-timing-function:var(--jd-ab-ease);
-webkit-animation-timing-function:var(--jd-ab-ease);
}
@media (prefers-reduced-motion:reduce){
.about *,
.about *::before,
.about *::after{
transition-duration:.01ms !important;
animation-duration:.01ms !important;
animation-delay:0s !important;
animation-iteration-count:1 !important;
}
/* WOW.js writes `visibility:hidden` INLINE on every .wow box until it
scrolls into view, and an author !important is the only thing that beats
an inline declaration. Reduced motion has to mean "already there", not
"revealed instantly on scroll" - without this the section stays invisible
to a reader who asked for less motion and never scrolls that far. */
.about .wow{
visibility:visible !important;
animation-name:none !important;
-webkit-animation-name:none !important;
opacity:1 !important;
transform:none !important;
}
}
/* ==========================================================================
6. RESPONSIVE
==========================================================================
A mobile default plus min-width steps ONLY. There is not one max-width
query in this file: on this project a nominal 767px viewport resolves in
the media query at 767.184px, so a max-width:767 / min-width:768 pair
leaves a band where neither side matches - and responsive.css's own
(max-width:480)/(min-width:481) and (max-width:768)/(min-width:768) pairs
are where that was found.
Each step moves TWO numbers, --jd-ab-mat and --jd-ab-off, plus the plate's
cap. That is what keeps the photograph honest - the MOUNT grows so the
PLATE can be as wide as the column wants while the 375px source is never
blown up past ~1.10x:
320 (container 296) plate 284, mount 16 -> photograph 252 0.67x
576 (container 516) plate 420, mount 22 -> photograph 376 1.00x
992 (container 936) plate 444, mount 30 -> photograph 384 1.02x
1280 (container 1196) plate 500, mount 44 -> photograph 412 1.10x
At 1280 that leaves about 74px of band inside the left column plus the
24px Bootstrap gutter - a ~98px spread gutter, of which the frame's offset
L occupies 18px. The space is owned by the frame rather than left empty. */
/* 320-575 is the base. Measured at 320: .container leaves 296px, the plate is
284 (296 minus the 12px the frame overhangs), the frame's right edge lands
exactly on the container's content edge, and nothing overflows. */
@media (min-width:576px){
.about .sectiongap{ padding:60px 0 64px; }
.about .chairman_div{
--jd-ab-mat:22px;
--jd-ab-off:14px;
max-width:420px;
margin:0 auto 46px; /* centred over the statement while stacked */
}
}
@media (min-width:768px){
.about .sectiongap{ padding:68px 0 72px; }
.about .jd-ab-body,
.about .row > div:last-child > div:not(.section-title){ margin-top:32px; }
}
/* Two columns from lg up - this is where the spread assembles. This block
sits below the 768 one on purpose: both match at >=992 and the later wins,
which is why the plate's margin rules are gathered here in ascending order
rather than next to .chairman_div in part 3. */
@media (min-width:992px){
.about .sectiongap{ padding:74px 0 78px; } /* #eldercare_living's rhythm */
.about .chairman_div{
--jd-ab-mat:30px;
--jd-ab-off:16px;
max-width:460px;
margin:0 auto 0 0; /* flush with the container's left edge */
}
}
@media (min-width:1200px){
.about .sectiongap{ padding:82px 0 86px; }
.about .chairman_div{
--jd-ab-mat:44px;
--jd-ab-off:18px;
max-width:500px;
}
.about .section-title::before{ margin-bottom:22px; }
}
/* >=1920 responsive.css:1212 opens .container to 1480px. The plate stays
capped and the measure is already held at 600px, so only the rhythm grows. */
@media (min-width:1920px){
.about .sectiongap{ padding:104px 0 108px; }
}
/* ==========================================================================
7. PRINT
==========================================================================
An adult child researching a care home prints this page and takes it to a
parent. The green mount is ink for nothing on paper, and WOW's inline
visibility:hidden would otherwise print a blank section. */
@media print{
.about{ background:#fff; border-top:0; }
.about .sectiongap{ padding:0; }
.about .chairman_div{ box-shadow:none; }
.about .chairman_div::before{ display:none; }
.about .chairman_div .about-img-wrap,
.about .chairman_div .name_div{ background:#fff; padding-left:0; padding-right:0; }
.about .chairman_div .name_div h6,
.about .chairman_div .name_div h5,
.about .chairman_div .name_div h4,
.about .chairman_div .name_div p{ color:#151515; }
.about .wow{ visibility:visible !important; animation:none !important; }
}