with no role or tabindex; the 44px targets and the focus ring are real, keyboard operation waits on `navElement:"button"` in the init (custom.js:194). · Five iframes titled "YouTube video player"; the map iframe `title=""`. · The gallery

is empty because ACF `heading` is unset on the page. · "INR 5000" / "INR 5500" have no thousands separator in the template; three heads end in a colon; heading order runs h2 → h6 → h3 → h6. · The two date fields are the fifth and sixth controls; dates-first is a CF7 form edit (form b80bdf4), not a CSS order. · Only two posts exist in the category; the auto-fit row handles any count, a third post simply fills a third track. ========================================================================== / / ========================================================================== §1 TOKENS — on the body class, so nothing can leak to another page ========================================================================== / .page-id-1511{ --st-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --st-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; --st-paper:#faf7ef; / grained cream: prose, map, stories / --st-plate:#fdfbf6; / the flat plates: rate, mats, postcards / --st-band:#2b3f2f; / the gallery room; the chips; the datepicker header / --st-recess:#22331f; / the video well; the icon disc / --st-wash:#f4eee0; / row and day hover / --st-ink:#2b3f2f; --st-body:#3a4238; --st-brass-ink:#6b5426; --st-quiet:#5b6357; --st-dim:#6f766c; / past days, 4.68 on white / --st-cream-ink:#f6edd8; --st-cream-quiet:#dcd5c4; --st-ring:#e6d4a6; --st-brass:#cbb279; / on green and on the recess only (L11) / --st-rule-plate:#a58c55; / on the flat plate only (L11) / --st-rule:rgba(107,84,38,.72); / 3.51 on paper, 3.58 on the plate, 3.66 on white / --st-edge-paper:rgba(107,84,38,.7); --st-hair:rgba(203,178,121,.55); --st-lattice:rgba(203,178,121,.7); --st-item-hair:rgba(107,84,38,.32); --st-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); --st-grain-night:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E"); --st-sheen:linear-gradient(180deg, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 42%, rgba(0,0,0,.14) 100%); --st-ease:cubic-bezier(.2,.7,.2,1); --st-t:.24s; } / ========================================================================== §2 THE STRIP — banner-lux's, untouched. Zero rules, by decision. -------------------------------------------------------------------------- banner-lux.css:793–983 already sets the strip in this system: grained cream, the Fraunces h2 with the 46px mark, 17px Karla, two 44px contact links, a brass hairline underneath. The reading below opens on the SAME grained cream, so that hairline is the one seam between them and the strip's 38–66px padding is the right distance from a dark banner. ========================================================================== / / ========================================================================== §3 THE READING — .new_stay on paper; the column order; the prose -------------------------------------------------------------------------- style.css:271 pads .sectiongap 20px at (0,1,0); style.css:57 sets p at 15px/22 Helvetica #151515 (0,0,1); :3392 sets the h6s at 16px #000 (0,2,1). Everything here is (0,2,0)+ / (0,3,x)+. MARGIN AUDIT (L5 — flex items do not collapse margins): plate → lede plate margin-bottom 34, lede margin-top 0 = 34 lede → p lede margin-bottom 24 = 24 p → p p margin-bottom 16 = 16 p → h6 p 16 + h6 margin-top 18 = 34 h6 → ul / p h6 margin-bottom 16 = 16 ul → h6 ul 0 + `ul + h6` margin-top 34 = 34 p → closing p p 16 + closing margin-top 6 = 22 closing→ terms h6 closing 0 + terms h6 margin-top 36 = 36 terms ul → services h6 ul 0 + margin-top 40 = 40 ========================================================================== / .page-id-1511 .new_stay{ position:relative; padding:44px 0 52px; background-color:var(--st-paper); background-image:var(--st-grain); font-family:var(--st-sans); color:var(--st-body); } / L3 — first half, (0,4,0) / .page-id-1511 .new_stay .row > [class="col-"]{ flex:0 0 auto; width:100%; max-width:100%; } /* L5 — the screen first below 992; L9 — zoomIn anchored at the top / .page-id-1511 .new_stay .row > .col-lg-4{ order:-1; transform-origin:50% 0; } / the prose column — L5 / .page-id-1511 .new_stay .new_stay_left{ display:flex; flex-direction:column; align-items:stretch; font-family:var(--st-sans); color:var(--st-body); } / PARAGRAPHS / .page-id-1511 .new_stay .new_stay_left > p{ max-width:68ch; margin:0 0 16px; font-family:var(--st-sans); font-size:17px; line-height:1.66; color:var(--st-body); / 9.73 / 8.90 worst / text-align:left; -webkit-hyphens:manual; hyphens:manual; text-wrap:pretty; } / THE LEDE. The first paragraph is the opening line: Fraunces at display size under the house 46px mark in brass ink (6.71 — banner-lux's #cbb279 mark is 1.93 on this ground, which is why it is not repeated here). Visually it follows the rate plate (L5): 34px under the plate, then the mark, then the line. / .page-id-1511 .new_stay .new_stay_left > p:first-child{ position:relative; max-width:40ch; / the live first paragraph is 31 words; at 30ch/29px it was a 10-line wall on a phone / margin:0 0 24px; padding-top:20px; font-family:var(--st-serif); font-optical-sizing:auto; font-size:clamp(19px, 2vw, 24px); font-weight:500; line-height:1.4; letter-spacing:-.01em; color:var(--st-ink); / 10.58 / 9.68 worst / } .page-id-1511 .new_stay .new_stay_left > p:first-child::before{ content:""; position:absolute; top:0; left:0; width:46px; height:2px; background:var(--st-brass-ink); } / THE CLOSING LINE — C3: "Come for a staycation near Kolkata…", the paragraph directly before the rate block in the DOM; on screen it closes the reading before the fine print. Its own rule, its own @supports. / @supports selector(:has()){ .page-id-1511 .new_stay .new_stay_left > p:has(+ .new_stay_left_table){ max-width:44ch; margin:6px 0 0; font-family:var(--st-serif); font-optical-sizing:auto; font-style:italic; font-size:clamp(19px, 2vw, 22px); font-weight:500; line-height:1.45; color:var(--st-ink); } } /* THE DISPLAY HEADS — "What Makes a Jagriti Dham Staycation Special?" and "More Than a Stay. An Experience." All their text is in , so the weight is inherited rather than doubled. The two tail heads are re-assigned by adjacency in §6 and §7. Gap above = 16 (p bottom) + 18. / .page-id-1511 .new_stay .new_stay_left h6{ max-width:26ch; margin:18px 0 16px; font-family:var(--st-serif); font-optical-sizing:auto; font-size:clamp(22px, 2.3vw, 27px); font-weight:600; line-height:1.2; letter-spacing:-.01em; color:var(--st-ink); / 10.58 / 9.68 worst / text-wrap:balance; } .page-id-1511 .new_stay .new_stay_left h6 strong{ font-weight:inherit; } / the head after the feature list: the list closes on a rule with no margin, so the whole gap is opened here / .page-id-1511 .new_stay .new_stay_left > ul + h6{ margin-top:34px; } / THE LINKS (tel / mailto in the terms). style.css:3627 sets 600 and :3631 hovers to #4f6f52, a green from no palette. Underlined at rest. / .page-id-1511 .new_stay .new_stay_left a{ color:var(--st-brass-ink); / 6.71 / 6.14 worst / font-weight:600; text-decoration:underline; text-decoration-thickness:1px; text-decoration-color:var(--st-brass-ink); text-underline-offset:3px; overflow-wrap:anywhere; transition:color var(--st-t) var(--st-ease), text-decoration-color var(--st-t) var(--st-ease); } / on touch, style.css:3631's :hover fires on tap — held to brass ink here, lifted to ink inside (hover:hover) in §15 / .page-id-1511 .new_stay .new_stay_left a:hover{ color:var(--st-brass-ink); } .page-id-1511 .new_stay .new_stay_left a:focus-visible{ outline:2px solid var(--st-brass-ink); outline-offset:3px; } / every list in the column: style.css:486 hangs .tick lists 32px in with 20px margins (0,2,1) and responsive.css:383 re-margins them under 480; the font-size is set on the UL as well as the LI because a ch measure resolves against the UL's own em (the body is 13px) / .page-id-1511 .new_stay .new_stay_left > ul{ margin:0; padding:0; list-style:none; font-size:16px; } / ========================================================================== §4 THE FEATURE LIST — the ten points, two columns from 768 -------------------------------------------------------------------------- Reached as `p + h6 + ul`: the only
that directly follows a paragraph and a head. style.css:501 draws the FA check-circle in #cbb279 (1.93:1 here) with a -20px margin; responsive.css:388 re-hangs it at -22px below 480. The mechanism is replaced: the check is placed absolutely in brass ink, the text hangs 32px. Every item is ruled above; the list closes on a full rule. ========================================================================== / .page-id-1511 .new_stay .new_stay_left > p + h6 + ul{ display:grid; grid-template-columns:minmax(0,1fr); gap:0 32px; margin:0; padding:0; border-bottom:1px solid var(--st-brass-ink); } .page-id-1511 .new_stay .new_stay_left > p + h6 + ul > li{ position:relative; margin:0; padding:8px 0 9px 32px; border-top:1px solid var(--st-item-hair); font-family:var(--st-sans); font-size:16px; line-height:1.55; color:var(--st-body); } .page-id-1511 .new_stay .new_stay_left > p + h6 + ul > li::before{ content:"\f058"; position:absolute; left:0; top:8px; margin:0; font-family:"Font Awesome 5 Free"; font-weight:900; font-size:16px; line-height:1.55; color:var(--st-brass-ink); / 6.71 / 6.14 worst / transform-origin:left center; transition:color var(--st-t) var(--st-ease), transform var(--st-t) var(--st-ease); } / ========================================================================== §5 THE RATE PLATE — .new_stay_left_table, FIRST in the reading -------------------------------------------------------------------------- One FLAT cream plate on the grained sheet: 1px #6b5426 edge, 3px cap, no shadow, no radius, ordered first (L5). Inside it the theme's 2x2 table (style.css:3409–3435: #d8d8d8 borders, a #4f6f52 header bar, 14/15px Helvetica) stays a TABLE (L7), set as a tariff: the column heads — "Independent Living Category" | "Rates Per Night" — as small tracked caps on a 2px brass rule; each row a Fraunces label on the left and the template's own figure on the right in Fraunces 600 at 26 → 30 → 36 → 40 → 42 → 46px, ruled between; "Taxes as applicable" attached beneath in Fraunces italic. A family reads Single · INR 5000, Double · INR 5500, per night, taxes extra — in one glance, from the template's six cells. ========================================================================== / .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table{ --st-pad:18px; order:-1; /* L5 / align-self:stretch; position:relative; margin:0 0 34px; padding:20px var(--st-pad) 18px; background-color:var(--st-plate); background-image:none; / the plate is not paper / border:1px solid var(--st-brass-ink); / 6.71 on the paper / border-top:3px solid var(--st-brass-ink); font-family:var(--st-sans); color:var(--st-body); } / "Rates & Commercials:" — beats style.css:3403's #4f6f52 20px at (0,3,1) / .page-id-1511 .new_stay .new_stay_left h3{ margin:0 0 14px; font-family:var(--st-sans); font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; line-height:1.5; color:var(--st-brass-ink); / 6.95 on the plate / } .page-id-1511 .new_stay .new_stay_left h3 strong{ font-weight:inherit; } .page-id-1511 .new_stay .new_stay_left table{ width:100%; margin:0; border:0; border-radius:0; border-collapse:collapse; border-spacing:0; line-height:1.3; background:transparent; font-family:var(--st-sans); color:var(--st-body); } / the column heads — style.css:3419's green bar and responsive.css:821 undone / .page-id-1511 .new_stay .new_stay_left table thead th{ padding:0 0 10px; border:0; border-bottom:2px solid var(--st-brass-ink); background:transparent; overflow-wrap:anywhere; / the HEAD row sets the label column's minimum: at 1.3x text scaling "INDEPENDENT" alone was 123px and pushed the nowrap figure to the plate's edge at 320 / hyphens:auto; font-family:var(--st-sans); font-size:11.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; line-height:1.4; color:var(--st-ink); / 10.95 / text-align:left; vertical-align:bottom; } .page-id-1511 .new_stay .new_stay_left table thead th:last-child{ text-align:right; padding-left:12px; } / the rows — style.css:3429 and responsive.css:826 undone / .page-id-1511 .new_stay .new_stay_left table tbody td{ padding:14px 0 13px; border:0; border-top:1px solid var(--st-rule-plate); / 3.13 on the plate / background:transparent; font-family:var(--st-sans); font-size:15.5px; font-weight:500; line-height:1.4; color:var(--st-body); / 10.07 / vertical-align:middle; text-align:left; transition:background-color var(--st-t) var(--st-ease), border-color var(--st-t) var(--st-ease); } .page-id-1511 .new_stay .new_stay_left table tbody tr:first-child td{ border-top:0; } / THE LABELS — "Single Occupancy" / "Double Occupancy" in Fraunces; the cell may wrap (two lines at 320) and, under Android font inflation, may break a word before the table can overflow the plate (L7) / .page-id-1511 .new_stay .new_stay_left table tbody td:first-child{ padding-right:12px; font-family:var(--st-serif); font-optical-sizing:auto; font-size:16px; font-weight:500; line-height:1.3; letter-spacing:-.004em; color:var(--st-ink); / 10.95 / overflow-wrap:anywhere; } / THE FIGURES — the template's own "INR 5000" / "INR 5500". Proportional lining figures (Google Fonts' Fraunces has no tnum). nowrap on this cell only (L7). / .page-id-1511 .new_stay .new_stay_left table tbody td:last-child{ font-family:var(--st-serif); font-optical-sizing:auto; font-size:26px; font-weight:600; line-height:1.05; letter-spacing:-.02em; color:var(--st-ink); / 10.95 / text-align:right; white-space:nowrap; font-variant-numeric:lining-nums tabular-nums; } / "Taxes as applicable" — attached to the plate, quiet, Fraunces italic (Karla ships no italic here) / .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table > p{ max-width:none; margin:12px 0 0; font-family:var(--st-serif); font-optical-sizing:auto; font-style:italic; font-size:15px; font-weight:500; line-height:1.5; color:var(--st-quiet); /* 6.03 on the plate / text-align:left; } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table > p i{ font-style:inherit; } / ========================================================================== §6 THE FINE PRINT — "Terms and Conditions:" + nine numbered terms -------------------------------------------------------------------------- The head becomes a brass-ink eyebrow on a 2px rule; the list a ruled panel of 14.5px Karla set in two columns from 768, each term numbered 01–09 by a CSS counter. C1: the first two terms — the check-in times and the four meals — set as lead facts in Fraunces at full width. C2: the contact line spans both columns. ========================================================================== / .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6{ max-width:none; margin:36px 0 0; padding:14px 0 0; border-top:2px solid var(--st-brass-ink); font-family:var(--st-sans); font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; line-height:1.5; color:var(--st-brass-ink); / 6.71 / 6.14 worst / text-wrap:wrap; } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul{ counter-reset:st-term; display:grid; grid-template-columns:minmax(0,1fr); gap:0 36px; margin:0; padding:8px 0 10px; border-bottom:1px solid var(--st-brass-ink); font-size:14.5px; } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul > li{ counter-increment:st-term; position:relative; margin:0; padding:6px 0 6px 34px; font-family:var(--st-sans); font-size:14.5px; line-height:1.55; color:var(--st-body); / 9.73 / 8.90 worst / -moz-column-break-inside:avoid; break-inside:avoid; } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul > li::before{ content:counter(st-term, decimal-leading-zero); position:absolute; left:0; top:6px; margin:0; padding-top:3px; font-family:var(--st-sans); font-size:11px; font-weight:700; letter-spacing:.1em; line-height:1.5; color:var(--st-brass-ink); font-variant-numeric:lining-nums tabular-nums; } / C1 — the two lead facts / .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul > li:nth-child(-n+2){ grid-column:1 / -1; padding:10px 0 10px 34px; font-family:var(--st-serif); font-optical-sizing:auto; font-size:17.5px; font-weight:500; line-height:1.4; letter-spacing:-.004em; color:var(--st-ink); / 10.58 / 9.68 worst / } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul > li:nth-child(-n+2)::before{ top:10px; padding-top:5px; } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul > li:nth-child(2){ margin-bottom:4px; padding-bottom:14px; border-bottom:1px solid var(--st-item-hair); } / C2 / .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul > li:last-child{ grid-column:1 / -1; } / ========================================================================== §7 THE SERVICES REGISTER — "Services:" + eight cells -------------------------------------------------------------------------- A ruled register in the house pattern (longstay's amenities): per-cell borders (cells give right + bottom, the list gives top + left, so no line is drawn twice and the count can change), and in each cell a 30px chip of the deep green with a cream tick. One column, two from 576. ========================================================================== / .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul + h6{ / the same eyebrow as the Terms head: the two are sibling h6s of one rank / max-width:none; margin:40px 0 0; padding:14px 0 0; border-top:2px solid var(--st-brass-ink); font-family:var(--st-sans); font-size:12.5px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; line-height:1.5; color:var(--st-brass-ink); text-wrap:wrap; } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul + h6 + ul{ display:grid; grid-template-columns:minmax(0,1fr); margin:0; padding:0; border-top:1px solid var(--st-brass-ink); border-left:1px solid var(--st-brass-ink); font-size:15.5px; } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul + h6 + ul > li{ position:relative; margin:0; padding:12px 16px 13px 58px; border-right:1px solid var(--st-brass-ink); border-bottom:1px solid var(--st-brass-ink); font-family:var(--st-sans); font-size:15.5px; line-height:1.5; color:var(--st-body); transition:background-color var(--st-t) var(--st-ease); } .page-id-1511 .new_stay .new_stay_left > .new_stay_left_table + h6 + ul + h6 + ul > li::before{ content:"\f00c"; position:absolute; left:14px; top:11px; display:flex; align-items:center; justify-content:center; width:30px; height:30px; margin:0; background-color:var(--st-band); border:1px solid var(--st-hair); font-family:"Font Awesome 5 Free"; font-weight:900; font-size:12px; line-height:1; color:var(--st-cream-ink); / 9.72 on the chip / transition:background-color var(--st-t) var(--st-ease), color var(--st-t) var(--st-ease); } / ========================================================================== §8 THE SCREEN — the video column, the lit recess -------------------------------------------------------------------------- Four inherited defects fixed: the two orange chevrons (L2), the 0px dots (the markup lacks .owl-theme), the 5:4 letterbox from height="300", and style.css:648's 10px item margin. ========================================================================== / / L2 — (0,5,0) against style.css:680's (0,3,0) / .page-id-1511 .new_stay .longstay_video_carousel .owl-nav, .page-id-1511 .new_stay .longstay_video_carousel .owl-nav.disabled{ display:none !important; margin:0; } .page-id-1511 .new_stay .longstay_video_carousel .item{ margin:0; } / L8 / .page-id-1511 .new_stay .longstay_video_carousel .owl-stage-outer{ overflow:hidden; overflow:clip; } / stacked below 992 the column is full container width and ordered first; capped at the 768–991 column's own width (696) so the screen and the plate beneath it share their edges at every tier, with room under it / .page-id-1511 .new_stay .new_stay_right{ max-width:700px; margin:0 auto 34px; text-align:left; } / L9 — default OFF; on at 992 (§16) / .page-id-1511 .new_stay .new_stay_right.sticky_div{ position:static; top:auto; } .page-id-1511 .new_stay .new_stay_right_slider{ position:relative; margin:0; padding:12px; background-color:var(--st-recess); border:1px solid var(--st-brass-ink); / 6.71 against the paper / box-shadow:0 30px 44px -30px rgba(34,51,31,.55); / the one cast shadow in the reading / } / 16:9 — the height="300" attribute is a presentational hint and loses / .page-id-1511 .new_stay .longstay_video_carousel .item iframe{ display:block; width:100%; height:300px; / the template's own height, kept for engines without aspect-ratio (Safari <= 14): height:auto alone dropped them to the 150px default / box-sizing:border-box; border:3px solid transparent; / the dark band on focus / background-color:#1b2a1e; } @supports (aspect-ratio:16 / 9){ .page-id-1511 .new_stay .longstay_video_carousel .item iframe{ height:auto; aspect-ratio:16 / 9; } } .page-id-1511 .new_stay .longstay_video_carousel .item iframe:focus-visible{ border-color:var(--st-recess); outline:3px solid var(--st-ring); / 9.18 / outline-offset:-3px; box-shadow:none; } / THE FILM INDEX — numbered 44px cells from a CSS counter, auto-fit so the count is whatever the template holds; per-cell borders in a lattice / .page-id-1511 .new_stay .longstay_video_carousel .owl-dots{ counter-reset:st-film; display:grid; grid-template-columns:repeat(auto-fit, minmax(44px, 1fr)); margin:12px 0 0; padding:0; border-top:1px solid var(--st-lattice); / 4.00 on the recess / border-left:1px solid var(--st-lattice); text-align:left; } .page-id-1511 .new_stay .longstay_video_carousel .owl-dots .owl-dot{ counter-increment:st-film; display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; margin:0; padding:0; border:0; border-right:1px solid var(--st-lattice); border-bottom:1px solid var(--st-lattice); border-radius:0; background:transparent; cursor:pointer; font-family:var(--st-sans); font-size:12px; font-weight:600; letter-spacing:.08em; line-height:1; color:var(--st-cream-quiet); / 9.20 / font-variant-numeric:lining-nums tabular-nums; transition:background-color var(--st-t) var(--st-ease), color var(--st-t) var(--st-ease); } .page-id-1511 .new_stay .longstay_video_carousel .owl-dots .owl-dot span{ display:none; } .page-id-1511 .new_stay .longstay_video_carousel .owl-dots .owl-dot::before{ content:counter(st-film, decimal-leading-zero); } / current: brass fill AND inverted ink — two channels / .page-id-1511 .new_stay .longstay_video_carousel .owl-dots .owl-dot.active{ background-color:var(--st-brass); / 6.52 area / color:var(--st-recess); / 6.52 numeral / } .page-id-1511 .new_stay .longstay_video_carousel .owl-dots .owl-dot:focus-visible{ outline:2px solid var(--st-ring); / 9.18 / outline-offset:-4px; } .page-id-1511 .new_stay .longstay_video_carousel .owl-dots .owl-dot.active:focus-visible{ outline-color:var(--st-recess); } / ========================================================================== §9 THE BOOKING — #contact, extending contact-lux, never fighting it -------------------------------------------------------------------------- contact-lux.css owns #contact sitewide: the brass ground, the Fraunces h2, the white 16px-radius card, the 48px white fields, the pill, the errors, the response box. All of it stands. Added at (1,2,x)+ over its (1,1,x): a field border that is a boundary on white; the two date fields' calendar glyph; the row's alignment answered in kind; Karla on what it missed. ========================================================================== / / The template's row carries Bootstrap's `.align-items-center{…!important}`, which centres the intro column at its content height — so contact-lux's sticky intro (position:sticky from 992) has no room to travel and the h2 floats at the form's middle. Answered in kind with STRETCH (Bootstrap's own row default, the one contact-lux was written for): the column takes the row's height and the intro reads from the top and travels with the form. The captcha's inner .row.align-items-center is NOT matched — this is the container's row only. / .page-id-1511 #contact > .container > .row.align-items-center{ align-items:stretch !important; } / the controls: contact-lux's selectors, one class heavier. contact-lux's :focus rule is (1,2,1) and would tie with these at rest, so the focus border is restated at (1,3,1) below. / .page-id-1511 #contact input.form-control, .page-id-1511 #contact textarea.form-control, .page-id-1511 #contact input.wpcf7-mathcaptcha{ border:1px solid var(--st-rule); / #948463 on white, 3.66 / font-family:var(--st-sans); } .page-id-1511 #contact input.form-control:focus, .page-id-1511 #contact textarea.form-control:focus, .page-id-1511 #contact input.wpcf7-mathcaptcha:focus{ border-color:#2b3f2f; } / contact-lux's error state is flagged (2px #8c2f2f) and still wins / .page-id-1511 #contact textarea.form-control{ min-height:110px; } / rows="2": an address, not an essay / / the placeholder is the field's only name — style.css:331 flags it / .page-id-1511 #contact ::placeholder{ color:#5f6b5c !important; opacity:1; } / 5.61 / / THE TWO DATE FIELDS — a brass-ink calendar glyph at the right and a pointer, because a click opens the picker. padding-right keeps a typed "12/09/2026" clear of the glyph. / .page-id-1511 #contact input.form-control.datepicker{ padding-right:46px; cursor:pointer; font-variant-numeric:lining-nums tabular-nums; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%236b5426' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='15' height='13.5' rx='1.5'/%3E%3Cpath d='M2.5 8.5h15M6.5 2.5v3M13.5 2.5v3'/%3E%3C/g%3E%3Ccircle cx='7' cy='12' r='1.1' fill='%236b5426'/%3E%3Ccircle cx='10' cy='12' r='1.1' fill='%236b5426'/%3E%3Ccircle cx='13' cy='12' r='1.1' fill='%236b5426'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:20px 20px; } .page-id-1511 #contact input.form-control.datepicker:focus{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cg fill='none' stroke='%232b3f2f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='15' height='13.5' rx='1.5'/%3E%3Cpath d='M2.5 8.5h15M6.5 2.5v3M13.5 2.5v3'/%3E%3C/g%3E%3Ccircle cx='7' cy='12' r='1.1' fill='%232b3f2f'/%3E%3Ccircle cx='10' cy='12' r='1.1' fill='%232b3f2f'/%3E%3Ccircle cx='13' cy='12' r='1.1' fill='%232b3f2f'/%3E%3C/svg%3E"); } / the captcha sum and the submit, in the house face / .page-id-1511 #contact .mathcaptcha_div .wpcf7-form-control-wrap{ flex-wrap:nowrap; white-space:nowrap; color:var(--st-ink); / 11.32 on white / } .page-id-1511 #contact .wpcf7-submit, .page-id-1511 #contact .wpcf7-form-control.btn-primary{ font-family:var(--st-sans); text-transform:uppercase; line-height:1.2; cursor:pointer; } .page-id-1511 #contact .wpcf7-not-valid-tip, .page-id-1511 #contact .wpcf7-response-output, .page-id-1511 #contact .gscf7-frontend-gdpr-notice{ font-family:var(--st-sans); } / ========================================================================== §10 THE DATEPICKER — jQuery UI 1.13.2 base, appended to (L10) -------------------------------------------------------------------------- The popup is outside #contact, so it is reached through the body class. A white plate with a 1px brass-ink edge; the header in the house green with the month and year selects, cream chevrons; day cells 44 × 44 from a 320 viewport (310px popup, zero padding, fixed table layout); today = brass-ink numeral with an inset 3px brass rule, chosen = green fill with cream ink, past = legible grey struck through — two channels per state. ========================================================================== / .page-id-1511 div.ui-datepicker{ z-index:10000 !important; / L10 — jQuery UI sets it inline; the fixed header is 9999 / box-sizing:border-box; width:310px; / 7 × 44 + the frame / max-width:calc(100% - 8px); / body width without the scrollbar; a narrower viewport shrinks the cells evenly / min-width:0; margin:0; padding:0; background:#ffffff; background-image:none; border:1px solid var(--st-brass-ink); border-radius:0; box-shadow:0 22px 44px -28px rgba(43,63,47,.7); font-family:var(--st-sans); font-size:15px; color:var(--st-ink); } .page-id-1511 div.ui-datepicker .ui-datepicker-header{ position:relative; display:flex; align-items:center; min-height:48px; margin:0; padding:0; background:var(--st-band); background-image:none; border:0; border-radius:0; color:var(--st-cream-ink); font-weight:600; } .page-id-1511 div.ui-datepicker .ui-datepicker-prev, .page-id-1511 div.ui-datepicker .ui-datepicker-next{ position:absolute; top:2px; width:44px; height:44px; margin:0; border:0; border-radius:0; background:transparent; cursor:pointer; transition:background-color var(--st-t) var(--st-ease); } .page-id-1511 div.ui-datepicker .ui-datepicker-prev{ left:0; } .page-id-1511 div.ui-datepicker .ui-datepicker-next{ right:0; } / minDate:0 disables prev on the current month: jquery-ui fades it to .35; held at .5 so the control still reads as present-but-off on the green / .page-id-1511 div.ui-datepicker .ui-datepicker-prev.ui-state-disabled, .page-id-1511 div.ui-datepicker .ui-datepicker-next.ui-state-disabled{ opacity:.5; cursor:default; } .page-id-1511 div.ui-datepicker .ui-datepicker-prev-hover, .page-id-1511 div.ui-datepicker .ui-datepicker-next-hover{ top:2px; border:0; background:rgba(203,178,121,.22); } .page-id-1511 div.ui-datepicker .ui-datepicker-prev-hover{ left:0; } .page-id-1511 div.ui-datepicker .ui-datepicker-next-hover{ right:0; } .page-id-1511 div.ui-datepicker .ui-datepicker-prev:focus-visible, .page-id-1511 div.ui-datepicker .ui-datepicker-next:focus-visible{ outline:2px solid var(--st-cream-ink); outline-offset:-4px; } / the sprite arrows, replaced; position reset so the sprite offsets cannot move the chevron / .page-id-1511 div.ui-datepicker .ui-datepicker-header .ui-icon{ display:block; position:absolute; left:50%; top:50%; width:16px; height:16px; margin:-8px 0 0 -8px; overflow:hidden; text-indent:-9999px; background-color:transparent; background-repeat:no-repeat; background-position:center center; background-size:16px 16px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f6edd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M10 3L5 8l5 5'/%3E%3C/svg%3E"); } .page-id-1511 div.ui-datepicker .ui-datepicker-next .ui-icon{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f6edd8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M6 3l5 5-5 5'/%3E%3C/svg%3E"); } .page-id-1511 div.ui-datepicker .ui-datepicker-title{ flex:1 1 auto; display:flex; align-items:center; justify-content:center; gap:6px; margin:0 46px; min-width:0; min-height:44px; line-height:1.2; font-family:var(--st-serif); font-optical-sizing:auto; font-size:17px; font-weight:600; color:var(--st-cream-ink); / 9.72 — the text form, if the init ever drops changeMonth / } / changeMonth / changeYear render two