/* ========================================================================== JAGRITI DHAM — SITEWIDE FOOTER ("footer-lux") 2026-09-09 ========================================================================== Enqueued unconditionally from functions.php, exactly the way header-lux is: $ft_css = get_template_directory() . '/css/footer-lux.css'; wp_enqueue_style( 'footer-lux', get_template_directory_uri() . '/css/footer-lux.css', array('responsive'), file_exists($ft_css) ? filemtime($ft_css) : $version ); Deps are array('responsive') and NOT array('style'): functions.php:192 enqueues 'style-lp' instead of 'style' on the landing pages, and a dependency that was never registered makes WordPress drop the stylesheet without a word. 'responsive' is enqueued unconditionally at functions.php:201. Depending on it is also what makes this file print last, which is what lets almost every rule below win on source order instead of on a flag. No new fonts. Fraunces and Karla already arrive sitewide on the 'jd-header-fonts' handle (functions.php:309) for the header. --------------------------------------------------------------------------- WHY THIS FILE EXISTS — the arithmetic --------------------------------------------------------------------------- The footer sat on #87805e, a muted khaki. Recomputed here from sRGB relative luminance, everything on it except the h2 failed: links #ece3ce 15px 3.11:1 needs 4.5 FAIL icons #cbb279 1.93:1 needs 3.0 FAIL address #ffffff 15px 3.98:1 needs 4.5 FAIL .block_link #ece3ce 14px 3.11:1 needs 4.5 FAIL copyright #d1d1d1 12px 2.60:1 needs 4.5 FAIL h2 #ffffff 24px 3.98:1 passes only as large text divider #a39a6f 1.40:1 decorative #87805e is the cause, not the foregrounds: it is too light to carry white ink and too dark to carry dark ink, so every repaint on it is arithmetic you lose. The ground changes instead. --------------------------------------------------------------------------- THE GROUND IS NOT A NEW COLOUR --------------------------------------------------------------------------- It is #2b3f2f — the exact band home-lux.css:2908 already builds for Green Advantages, with the same grain (feTurbulence at opacity .05), the same sheen (white .05 -> 0 at 42% -> black .14), and the same closing hairline (rgba(203,178,121,.55)). Its own comment there reads "deep green into brass is the site's own pairing", and on the home page this footer lands directly under the brass #cbb279 contact panel — the same pairing, reversed, closing the page. Nothing here is a near-miss of a value the site has committed to. The four inks are the ones that band already uses, plus brass: #ffffff the property name only #f4ecd8 headings-in-fact: links, contact rows, the map button #dcd5c4 body copy and the copyright #e6d4a6 the column labels (home-lux.css:1706) #cbb279 icons, borders, rules, bullets — NON-TEXT ONLY, see below Measured three ways, because the ground is textured. G1 is the flat #2b3f2f; G2 is the top of the sheen (white 5% over G1 = #364939); G3 is the true worst pixel anywhere in the band — a fully white, fully opaque grain sample sitting on top of the sheen (#405243, L=0.0753). G3 is the figure that governs. G1 G2 G3 needs #ffffff 11.32 9.68 8.38 4.5 #f4ecd8 9.62 8.22 7.12 4.5 #dcd5c4 7.74 6.62 5.73 4.5 #e6d4a6 7.73 6.61 5.72 4.5 #cbb279 5.49 4.70 4.06 3.0 (non-text only) THAT LAST ROW IS THE WHOLE REASON BRASS NEVER SETS TYPE HERE. Brass clears 4.5:1 on the flat ground and would pass an audit taken with a colour picker, but at the top of the band, over a bright grain sample, it is 4.06:1. Rather than drop the site's own texture to protect a decimal, the texture stays and brass is confined to icons, borders, hairlines and bullets, where SC 1.4.11 asks 3:1 and 4.06 clears it with 35% to spare. Nothing in this footer sets text in brass. The plinth is #22331f — header-lux.css:75's --jd-green-dark, not a new value. On it: #dcd5c4 9.20:1, #ffffff 13.45:1. The logo plate is #ffffff, 11.32:1 against the ground; "Member of" on it is #6b5426, 7.19:1. Brass fill with #22331f ink (every hover) is 6.52:1. --------------------------------------------------------------------------- TWO FOOTERS, ONE STYLESHEET --------------------------------------------------------------------------- footer.php (sitewide) and footer-lp.php (landing pages) carry the same classes, and a grep for `contact_detail` across the theme returns those two files and nothing else. Everything here reaches both, which is intended — the landing pages must not keep the khaki after the main site loses it. Every colour, size, contrast ratio and touch target is written against the classes BOTH templates already carry (.contact_detail .lightgreenbg .block .address .block_link .social_icon .foot_logo .infinity-logo), so footer-lp.php needs no markup edit and still comes out fixed. Only the column re-cut needs new markup, and that is grid classes on footer.php — there is no .jd-* hook in this file at all. Three things footer-lp.php does differently, each handled by name below: it has no .copyright; its two marks live in .foot_logo / .infinity-logo rather than .foot_logo_area; and its .block_link stays inside .address. Its root carries `section-gaping` where footer.php carries `sectiongap`, which is the hook used to close its bottom edge. --------------------------------------------------------------------------- THE FIXED MOBILE ACTION BAR IS LOAD-BEARING --------------------------------------------------------------------------- responsive.css:291 turns .social_icon into a FIXED BOTTOM BAR at (max-width:480px), and two of its five buttons (.d-block.d-sm-none, call and WhatsApp) exist only for it. Four rules protect it: 1. NO unscoped `.contact_detail a{color:...}` or `.contact_detail i{...}` anywhere in this file. Those would be (0,1,1), tie with responsive.css:316 `.social_icon a{color:#fff}` and :329 `.social_icon a i`, and win on source order — turning the five glyphs in the white bar brass-on-brand, e.g. #cbb279 on #25d366 is 1.04:1. Link and icon colour is set per context instead, and white is restated inside the <=480 block in section 9 as belt and braces. 2. Every DESKTOP .social_icon rule lives inside `@media not all and (max-width:480px)` — the exact logical complement of responsive.css's own query. A `min-width:481px` pair would leave a dead band (measured on this project, a nominal 767px viewport resolves at 767.184px), and in that band the buttons would fall back to the 25x25 chiclets at style.css:1839. `not all and` cannot gap. 3. Inside <=480 this file sets NOTHING about position, bottom, left, width, height, display or z-index. It adds a top hairline, a safe-area inset, a focus ring and white glyphs. That is all. 4. NO transform, filter, backdrop-filter, perspective, will-change, contain or overflow:hidden on .contact_detail, .copyright or .social_icon. Any one of them would make that ancestor the containing block for position:fixed and the bar would stop being fixed. This file never even needs position:relative: the band's top rule is a real border, and the diamond bullet is an SVG path rather than a rotated element, so no transform is introduced by habit. --------------------------------------------------------------------------- MEDIA QUERY POLICY --------------------------------------------------------------------------- Mobile-first defaults plus stacked min-width queries at 768 and 992, which cannot leave a hole. The only max-width query is (max-width:480px), and its complement is written as `not all and (max-width:480px)` rather than as a hand-computed min-width, so the pair is gapless by construction. ========================================================================== */ /* -------------------------------------------------------------------------- 1. TOKENS Declared on the footer root rather than :root so nothing here can leak into a page section that happens to reuse a name. -------------------------------------------------------------------------- */ .contact_detail.lightgreenbg{ --jd-f-ground:#2b3f2f; /* home-lux.css:2908, verbatim */ --jd-f-plinth:#22331f; /* header-lux.css:75, --jd-green-dark */ --jd-f-plate:#ffffff; /* both logo files are OPAQUE white 200x85 */ --jd-f-ink:#f4ecd8; /* 7.12:1 worst case — links, contact rows */ --jd-f-body:#dcd5c4; /* 5.73:1 worst case — body, copyright */ --jd-f-label:#e6d4a6; /* 5.72:1 worst case — the column labels */ --jd-f-hi:#ffffff; /* 8.38:1 worst case — the property name, hover */ --jd-f-brass:#cbb279; /* 4.06:1 worst case — NON-TEXT ONLY */ --jd-f-brass-ink:#6b5426; /* 7.19:1 on the white plate */ --jd-f-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --jd-f-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --jd-f-ease:cubic-bezier(.2,.7,.2,1); } /* -------------------------------------------------------------------------- 2. THE GROUND -------------------------------------------------------------------------- style.css:705 and :712 both set .lightgreenbg, the second with the `background` SHORTHAND, which resets background-image. Naming the longhands in a later sheet at (0,2,0) replaces both cleanly. The padding needs a flag of its own because BOTH competitors carry one: style.css:861 `.contact_detail{padding:15px 0 !important}` and Bootstrap's `.p-0`, each (0,1,0). Among !important declarations the more specific selector wins, and this is (0,2,0). It is the only structural !important in the file. Bottom padding is 0: the plinth closes the band. footer-lp.php has no plinth, so section 10 gives it a bottom edge of its own. */ .contact_detail.lightgreenbg{ padding:44px 0 0 !important; background-color:var(--jd-f-ground); 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='.05'/%3E%3C/svg%3E"), linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.14) 100%); /* the house band edge, verbatim from home-lux.css:2913. A real border, not a pseudo-element, so this element never needs position:relative — see protection 4 in the file header. */ border-top:1px solid rgba(203,178,121,.55); color:var(--jd-f-body); /* style.css:861 sets color:#fff; anything this file has not explicitly coloured now inherits 5.73:1 rather than an unknown */ font-family:var(--jd-f-sans); } @media (min-width:768px){ .contact_detail.lightgreenbg{ padding-top:62px !important; } } @media (min-width:992px){ .contact_detail.lightgreenbg{ padding-top:74px !important; } } /* -------------------------------------------------------------------------- 3. THE COLUMNS -------------------------------------------------------------------------- `> .container > .row` and not `.row`, because footer-lp.php nests a second .row inside its logo column and must not inherit the gaps. style.css:923 puts `border-right:1px solid #a39a6f` on EVERY .block — the masthead column and the last column included — at 1.40:1, which is a grey scratch rather than a rule. It is removed and NOT replaced: the contact rows and the link list already carry horizontal hairlines, and vertical rules across them would read as a table. Separation at desktop widths is the gutter and the labels; below 768 it is one hairline between blocks. */ .contact_detail > .container > .row > .block{ border-right:0; } /* style.css:931 makes the last column `display:flex; align-items:center`, which centres the logo plate against a column it no longer matches in height and defeats the plate's own margin:auto. (0,4,0) beats its (0,3,0). */ .contact_detail > .container > .row > .block:last-child{ display:block; align-items:normal; } /* Stacked, below 768: Bootstrap gives wrapped columns no vertical gap without a .g-* class, which is why the old footer ran together on a phone. */ .contact_detail > .container > .row > .block + .block{ margin-top:28px; padding-top:28px; border-top:1px solid rgba(203,178,121,.22); } /* 768-991 is a 2x2 (col-md-6). Whitespace separates it; a hairline above the second cell of a row would read as an accident. row-gap on the flex row rather than --bs-gutter-y: Bootstrap implements the gutter as margin-top on every child plus a cancelling negative margin on the row, and the margin-top:0 below would eat it. */ @media (min-width:768px){ .contact_detail > .container > .row{ row-gap:44px; } .contact_detail > .container > .row > .block + .block{ margin-top:0; padding-top:0; border-top:0; } } @media (min-width:992px){ .contact_detail > .container > .row{ row-gap:0; } } /* -------------------------------------------------------------------------- 4. THE COLUMN LABELS (the

s) -------------------------------------------------------------------------- The footer is the end of the document, not a seventh section, so it does NOT repeat the site's section signature: no Fraunces display line, no diamond-on-a-hairline. Every rebuilt section on the page opens with that mark at 170x9 under a clamp(29-46px) heading; putting the largest version of it over the word "Contact" would invert the page's hierarchy. These are captions instead — 13px Karla small caps in pale brass, the same weight of voice as a caption in a book, three of them, identical. `.lightgreenbg h2{color:#fff}` (style.css:708) and responsive.css's `.lightgreenbg h2{font-size:24px}` are both (0,1,1); this is (0,2,1) and beats them from any media query rather than relying on source order. In footer-lp.php the lone

Contact

is still alone in a col-lg-2. At this size that reads as a caption set in the margin, which is why the base treatment is the caption and not the display line. */ .contact_detail.lightgreenbg h2{ font-family:var(--jd-f-sans); font-size:13px; font-weight:700; line-height:1.25; letter-spacing:.17em; text-transform:uppercase; color:var(--jd-f-label); /* 5.72:1 worst case, and it is normal text */ margin:0 0 18px; } /* -------------------------------------------------------------------------- 5. THE ADDRESS -------------------------------------------------------------------------- The ACF field on post 285 emits one

whose holds "Jagriti Dham", and style.css:873 already makes that strong display:block — a good bone, kept. Set in italic Fraunces it becomes the one display gesture in the whole footer, and it is the same move home-lux.css:69 makes on `.about h1 strong`, so the footer speaks in the site's handwriting exactly once, over the name of the place. */ .contact_detail .address p{ font-family:var(--jd-f-sans); font-size:16px; /* responsive.css:942 and :1056 drop `.lightgreenbg p` to 12px between 481 and 1024; this is (0,2,1) against their (0,1,1) */ line-height:1.75; color:var(--jd-f-body); /* 5.73:1; was #fff at 3.98:1 */ margin:0 0 20px; max-width:32em; } .contact_detail .address p strong{ display:block; font-family:var(--jd-f-serif); font-style:italic; font-weight:500; font-size:21px; line-height:1.25; letter-spacing:-.005em; color:var(--jd-f-hi); /* 8.38:1 — the brightest ink in the footer, on the one line that earns it */ margin:0 0 9px; } /* an editor pasting a link into that WYSIWYG must not get a link that is distinguishable from its paragraph by colour alone (SC 1.4.1) */ .contact_detail .address p a{ color:var(--jd-f-ink); text-decoration:underline; text-underline-offset:3px; } /* "Find us on map" was a 15px text link with a 1.93:1 pin beside it. It is the one place the footer asks a visitor to leave, so it becomes a real control with a boundary of its own. `.address > a` — direct child — is the map link in BOTH templates, because the policy links sit inside .block_link a level deeper. No new class. style.css:899 `.contact_detail .address a:hover{color:#ece3ce}` is (0,3,1), so the hover here carries .lightgreenbg to reach (0,4,1) and win on specificity rather than on load order. */ .contact_detail .address > a{ display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:12px 20px; border:1px solid var(--jd-f-brass); /* 4.06:1 worst case, SC 1.4.11 wants 3 */ border-radius:0; background-color:transparent; color:var(--jd-f-ink); /* 7.12:1 */ font-family:var(--jd-f-sans); font-size:14.5px; font-weight:700; line-height:1.2; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; transition:background-color .25s var(--jd-f-ease), color .25s var(--jd-f-ease); } .contact_detail .address > a i{ color:var(--jd-f-brass); font-size:16px; transition:color .25s var(--jd-f-ease); } .contact_detail.lightgreenbg .address > a:hover, .contact_detail.lightgreenbg .address > a:focus-visible{ background-color:var(--jd-f-brass); color:var(--jd-f-plinth); /* 6.52:1 on the brass */ text-decoration:none; } .contact_detail.lightgreenbg .address > a:hover i, .contact_detail.lightgreenbg .address > a:focus-visible i{ color:var(--jd-f-plinth); } /* -------------------------------------------------------------------------- 6. THE CONTACT ROWS (phones / WhatsApp / e-mail) -------------------------------------------------------------------------- This is the same component the header already ships. header-lux.css:406-414 sets the panel's contact block at min-height:52px, font-size:17px, font-weight:600, gap:13px, font-variant-numeric:tabular-nums and a 42px round .jd-ic chip; those numbers are reused here in the dark key, so the first and the last thing a visitor meets on every page are one component in two registers. The chip stays a circle for the same reason — it is the one circle the site already draws, beside a phone number, and the "square corners" rule has always excepted it. tabular-nums matters here more than anywhere: four stacked +91 numbers that an elderly reader has to copy. Each row is 56px, so every one is a target (SC 2.5.5). They were never targets before — 15px text on a 10px margin. No min-width:0 is needed on the anonymous flex item holding the number: `overflow-wrap:anywhere` (unlike `break-word`) reduces min-content size, so the longest string — contact@jagritidham.com, about 190px at 17px Karla — cannot push the column wide. At 320px the row has 272px, less the 42px chip and the 13px gap, leaving 217px. */ .contact_detail .block ul{ list-style:none; margin:0; padding:0; } .contact_detail .block ul li{ margin:0; /* style.css:869 margin-bottom:10px, font-size:15px */ padding:0; font-size:17px; } .contact_detail .block ul li + li{ border-top:1px solid rgba(244,236,216,.13); } .contact_detail .block ul li a{ display:flex; align-items:center; gap:13px; min-height:56px; padding:7px 0; font-family:var(--jd-f-sans); font-size:17px; font-weight:600; line-height:1.35; letter-spacing:.005em; font-variant-numeric:tabular-nums; color:var(--jd-f-ink); /* 7.12:1; was #ece3ce at 3.11:1 */ text-decoration:none; overflow-wrap:anywhere; transition:color .25s var(--jd-f-ease); } .contact_detail .block ul li a i{ flex:0 0 42px; width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--jd-f-brass); /* 4.06:1 worst case */ border-radius:50%; color:var(--jd-f-brass); font-size:15px; transition:background-color .25s var(--jd-f-ease), color .25s var(--jd-f-ease); } .contact_detail.lightgreenbg .block ul li a:hover, .contact_detail.lightgreenbg .block ul li a:focus-visible{ color:var(--jd-f-hi); /* 8.38:1 — hover is a step up in VALUE, not only in hue, which is what a 70-year-old reader actually sees */ text-decoration:none; } .contact_detail.lightgreenbg .block ul li a:hover i, .contact_detail.lightgreenbg .block ul li a:focus-visible i{ background-color:var(--jd-f-brass); color:var(--jd-f-plinth); /* 6.52:1 */ } /* -------------------------------------------------------------------------- 7. THE SITE LINKS (.block_link) -------------------------------------------------------------------------- style.css:1678 left these as four bare inline on margin-right:20px with no separators, so "Press Releases" split across two lines at narrow widths and the run read as ragged prose. They become a stacked list of 44px rows. The bullet is the house diamond at 7px — the ONLY ornament in this footer, and it appears as list punctuation rather than as a section mark. It is an SVG background rather than a rotated pseudo-element: a transform anywhere above the fixed action bar would break it, and a habit is safer than a rule. In footer-lp.php .block_link holds two links and stays inside .address; these rules stack them there too, which is an improvement and costs nothing. The hover carries .lightgreenbg to reach (0,4,1), because style.css:899 `.contact_detail .address a:hover` is (0,3,1) and would otherwise tie with it on the LP. */ .contact_detail .block_link{ margin:0; } .contact_detail .block_link a{ display:block; margin:0; padding:12px 0 12px 18px; min-height:44px; font-family:var(--jd-f-sans); font-size:15px; font-weight:500; line-height:20px; color:var(--jd-f-ink); /* 7.12:1; was 14px #ece3ce at 3.11:1 */ text-decoration:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='7'%3E%3Cpath d='M3.5.4L6.6 3.5 3.5 6.6.4 3.5z' fill='%23cbb279'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 18px; background-size:7px 7px; transition:color .25s var(--jd-f-ease); } .contact_detail.lightgreenbg .block_link a:hover, .contact_detail.lightgreenbg .block_link a:focus-visible{ color:var(--jd-f-hi); text-decoration:underline; text-decoration-color:rgba(203,178,121,.9); text-underline-offset:3px; } /* on footer-lp.php this list trails the map button inside .address */ .contact_detail .address .block_link{ margin-top:22px; } /* -------------------------------------------------------------------------- 8. THE MARKS -------------------------------------------------------------------------- Both files are opaque WHITE 200x85 (images/JD-Infinity-Logo.webp and images/asliasli-logo.webp — checked, all four corners #ffffff), so on the khaki they sat on the band as two bare white rectangles and on a deep green they would be worse. mix-blend-mode:multiply is the tempting wrong answer on a dark ground — it drops the white but crushes the artwork's own dark ink into the green — and filter:brightness(0) invert(1) bleaches the brand colour out. Both are also wrong in principle here, because either image can be swapped from the ACF fields on post 285 at any time and neither is under this theme's control. So the white is made deliberate: a plate under EACH mark, with "Member of." on the green between them. The plate is #ffffff, not a cream — the bitmaps' own ground is #ffffff, and a cream plate would render as a panel inside a panel with a visible step around each mark. It is drawn by its brass border (4.06:1 worst case), and it is 11.32:1 against the ground, which is why it is the smallest object in the footer rather than the largest: a credentials card should not outshout the phone number. */ .contact_detail .foot_logo_area{ /* TWO plates, not one. The rebuild merged both marks onto a single card with "Member of" as a rule between them; the client's reference shows them as separate cards with the words on the green in between, which is also the truer reading - the second mark is a membership badge, not part of the identity lockup. The wrapper is now only a column: no ground, no border. */ display:flex; flex-direction:column; align-items:center; gap:14px; max-width:186px; margin:0 auto; padding:0; background:none; border:0; text-align:center; } .contact_detail .foot_logo_block{ margin:0; width:100%; } /* The PLATE is the itself, which is why no wrapper had to be added to the template. Bootstrap's reboot puts box-sizing:border-box on everything, so width:100% already contains the padding and the border and nothing can overflow the 186px column. Both files are opaque white 200x85, so the padding ring and the bitmap are the same white and the seam is invisible; the radius therefore cuts the padding, never the artwork. */ .contact_detail .foot_logo_block img{ display:block; width:100%; max-width:none; /* style.css:3052 pins a flat 150px; the column governs the size now so both marks stay a matched pair at every width */ height:auto; margin:0 auto; padding:13px 12px; background-color:var(--jd-f-plate); border:1px solid var(--jd-f-brass); /* 4.06:1 worst case, needs 3.0 */ border-radius:10px; } /* "Member of." now sits on the green between the two plates, sentence case as in the reference. style.css:3056 sets color:#fff at (0,2,1); this is (0,2,1) too and later in the cascade, so it wins on source order without a flag. #f4ecd8 is 7.12:1 against the worst pixel in the band. */ .contact_detail .foot_logo_area h4, .contact_detail .foot_logo_area h5, .contact_detail .foot_logo_area h6{ font-family:var(--jd-f-sans); font-size:13px; font-weight:600; line-height:1.3; letter-spacing:.04em; text-transform:none; color:var(--jd-f-ink); margin:0 0 12px; padding-top:0; border-top:0; } /* footer-lp.php has no .foot_logo_area — its two marks sit in a nested row as .foot_logo and .infinity-logo, and style.css:907 gives .infinity-logo a WHITE left border, which on this ground is a bright 11.32:1 hairline in the wrong colour. The border shorthand replaces it. MARGIN IS DELIBERATELY NOT TOUCHED HERE: responsive.css:278 gives .infinity-logo `margin:12px 12px 50px 12px` at <=480, and on the LP — which has no .copyright — that 50px is the ONLY clearance under the fixed action bar. Overwriting it unconditionally would hide the bottom of these plates behind the bar on every landing page, silently, and only on a phone. */ .contact_detail .foot_logo, .contact_detail .infinity-logo{ /* style.css:918 pins `.foot_logo{width:85px}` sitewide and responsive.css:951 and :1065 repeat it between 481 and 1024, which squeezes the plate to 63px of artwork. WIDTH is safe to take at every width; only MARGIN is the load-bearing one, and it is left alone. */ width:auto; padding:12px 10px; background-color:var(--jd-f-plate); border:1px solid var(--jd-f-brass); border-radius:10px; /* matches the two plates in footer.php */ color:var(--jd-f-brass-ink); font-family:var(--jd-f-sans); font-size:12px; line-height:1.4; text-align:center; } .contact_detail .foot_logo img, .contact_detail .infinity-logo img{ display:block; width:100%; max-width:130px; height:auto; margin:0 auto; } /* -------------------------------------------------------------------------- 9a. THE SOCIAL BUTTONS — EVERYTHING ABOVE THE BAR'S BREAKPOINT -------------------------------------------------------------------------- `not all and (max-width:480px)` is the exact logical complement of responsive.css's fixed-bar query. Nothing in this block can reach the bar, and no viewport width matches neither. THE INLINE ACF COLOURS ARE OVERRIDDEN HERE, AND KEPT BELOW. ACF prints style="background-color:#4479e7|#ec2f83|#d83231" on each anchor, which only a flag beats. The reason is measured, and it is not the glyph: white on those three is 4.09, 3.96 and 4.75:1, all fine. It is the BUTTON. Against the new ground the three chiclets are 2.77, 2.86 and 2.38:1 — every one below the 3:1 SC 1.4.11 asks of a component boundary, so as drawn they have no legible edge at all. (On the old khaki #4479e7 was 1.03:1.) They become 44x44 — up from the 25x25 at style.css:1839, on an audience that skews 65+ — square brass outlines, the same pair the map button uses, inverted on hover. The cost, which belongs in the README: the ACF `color` sub-field on post 285 still drives BOTH the desktop tiles and the mobile bar - the desktop rule below deliberately declares no background-color, so the inline style wins unopposed. The brass hairline, not the fill, is what carries SC 1.4.11. Also hidden here: the two .d-block.d-sm-none buttons. Bootstrap's .d-sm-none only hides them from 576px up, so between 481 and 575 the old footer showed a duplicate call and WhatsApp tile beside the very numbers listed above them. Nothing is lost — both numbers are live tel:/wa links in that list. (0,3,0) beats Bootstrap's own !important .d-block at (0,1,0). */ @media not all and (max-width:480px){ .contact_detail .social_icon{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; } .contact_detail .social_icon .social-button{ /* The ACF brand fill is KEPT. It arrives as an inline style attribute, so the way to keep it is simply to declare nothing here - this rule does not mention background-color at all, and there is no !important to out-shout it. Editing the `color` sub-field on post 285 changes the desktop tiles again, the same as it changes the mobile bar. */ display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; line-height:1; margin:0; padding:0; /* The hairline is what satisfies SC 1.4.11 here, NOT the fill. Measured against #405243, the worst pixel in the textured band, the three brand colours are 2.77 (#4479e7), 2.86 (#ec2f83) and 2.38 (#d83231) - none of them draws a legible edge against this ground on its own. The brass is 4.06:1, so the tile keeps a boundary whatever colour an editor puts behind it, including a future one nobody has measured. */ border:1px solid var(--jd-f-brass); border-radius:0; text-decoration:none; transition:border-color .25s var(--jd-f-ease), box-shadow .25s var(--jd-f-ease); } .contact_detail .social_icon .social-button i{ /* White, not brass, now that there is a brand fill underneath. Measured on the three ACF colours: 4.09:1 on #4479e7, 3.96:1 on #ec2f83 and 4.75:1 on #d83231 - the glyph is what identifies the control and it clears the 3:1 a non-text indicator needs on all three. It is also the same white responsive.css:316 puts in the mobile bar, so the icon reads identically at both ends of the breakpoint. */ color:#fff; font-size:16px; line-height:1; } /* Hover steps the BOUNDARY, not the fill. Filling with brass is precisely what would throw the brand colour away, which is the thing being kept. #e6d4a6 is 5.72:1 against the band against 4.06 at rest, so it is a real visible move, and the halo is the same idiom the testimonial play badge uses on hover. The fill and the glyph do not change, so no contrast pair in this control moves at all. Focus is deliberately NOT listed here: it falls through to the base `.contact_detail a:focus-visible` in section 11, which draws a 2px #e6d4a6 ring at 3px offset - that reads on any fill an editor chooses, where a fill-swap would not. */ .contact_detail.lightgreenbg .social_icon .social-button:hover{ border-color:var(--jd-f-label); box-shadow:0 0 0 3px rgba(230,212,166,.18); } .contact_detail .social_icon .d-sm-none{ display:none !important; } } /* -------------------------------------------------------------------------- 9b. THE FIXED ACTION BAR (max-width:480px) -------------------------------------------------------------------------- responsive.css:291 owns this bar and keeps owning it. Nothing about position, bottom, left, width, height, display or z-index is touched here. Four additions, each for a measured reason. (a) White glyphs, restated. This is the belt-and-braces half of protection 1 in the file header: even if a future edit adds an unscoped colour rule above, (0,3,1) here wins it back inside the bar. (b) A brass hairline. A white bar on a white page had no edge at all. It adds 1px to a 50px bar; the clearance below is 66px. (c) env(safe-area-inset-bottom) so the keys clear the iPhone home indicator. Declared after a plain 0 so an engine without env() keeps a working bar rather than dropping the declaration. (d) A focus ring. This needed arithmetic: white against the five brand fills measures 4.09 (#4479e7), 3.96 (#ec2f83), 4.75 (#d83231), 5.87 (#1668a8) and 5.22 (#0F7A6D) — every one past 3:1, so ONE white ring works on all five. It is drawn INSIDE the cell (outline-offset:-3px) because the outer keys touch the viewport edge and an outside ring would be half off-screen. THE BRAND COLOURS ARE KEPT HERE. On a functional action bar colour is wayfinding and it is the fastest way an anxious caller finds the green WhatsApp key. Two of the five did NOT pass as drawn — white on #71bafe is 2.07:1 and on #25d366 is 1.98:1 — but those two are hard-coded in footer.php, not ACF, and they are fixed in the markup: #1668a8 for the call key (white 5.87:1, same blue family) and #0F7A6D for WhatsApp, which is header-lux.css:79's own --jd-wa, already declared in this codebase as the AA-safe WhatsApp green. */ @media (max-width:480px){ .contact_detail .social_icon{ border-top:1px solid var(--jd-f-brass); padding-bottom:0; padding-bottom:env(safe-area-inset-bottom, 0px); } .contact_detail .social_icon .social-button, .contact_detail .social_icon .social-button i{ color:#fff; } .contact_detail .social_icon .social-button:focus-visible{ outline:3px solid #fff; outline-offset:-3px; } } /* -------------------------------------------------------------------------- 10. THE PLINTH (.copyright) -------------------------------------------------------------------------- style.css:3613 gave the copyright 12px #d1d1d1 — 2.60:1, the worst pair in the old footer — hanging off a brass border drawn on the

, so the rule stopped at the text block. .copyright already sits outside .container, so it is full-bleed by accident of the markup; it is now full-bleed on purpose, a shade below the band, and the rule runs edge to edge where it belongs. No markup change: the

and its year