/* ========================================================================== REVISION 2026-09-13 — four client directives, applied on top of the panel's file. Nothing about the tariff tables, the strip or the tokens changed. 1. THE BAND IS PAPER. #pricing no longer turns to the house green ("it looks bad"); §17's retreat is applied in §3 and the run is one cream. 2. FOUR BOXES. page-templates/longstay.php now wraps the column's groups: .jd-box--who (suitable for + Duration), .jd-box--standard (model 01 and the deposit ladder), .jd-box--flex (model 02), a .jd-note footnote, and .jd-box--services. .new_stay_left is a transparent grid of boxes; every selector that read `.new_stay_left > …` now reads `.jd-box > …`, and the old eyebrow / tail-heading / :has(+table) devices are gone — every box title is the same Fraunces title. See the REVISION section before §10. REVISION II, 2026-09-13 p.m. — the client sent two screenshots as the reference: the pricing ledger of the best-luxury landing page (sections2.css, .jd-p-*) for the Standard Pricing Model, and the strip paragraph set in the serif. §19 (before §14) sets the four titles as bold sans bands and the tables as that ledger; §2's paragraph is now Fraunces. The "same Fraunces title" line above is superseded by §19. Template hooks: page-templates/longstay.php (.bkp-ledger-2026.09.13); stylesheet backup .bkp-ledger-2026.09.13. 3. PREVIOUS / NEXT. js/custom.js passes nav:true, navElement:'button' and a visually-hidden label; §8 styles the two buttons on the recess and hides the numbered film index. The staycation page shares that init and keeps its index (stay-lux.css hides .owl-nav there). 4. THE AMENITIES ARE CARDS: a plate with a 12px radius, a soft shadow, a tinted 40px disc holding the line-art icon, the name in Karla 700 ink — the clubhouse amenity list on infinityheights.in, in this palette. The ruled register (§9's original) is replaced wholesale. ========================================================================== */ /* ========================================================================== JAGRITI DHAM — LONG STAY · page 1504 only /best-old-age-home-in-kolkata/ · page-templates/longstay.php "PAPER, PLATE, PAPER" css/longstay-lux.css rev C 2026-09-10 Replaces the shipped file in full. ========================================================================== THE IDEA, IN ONE SENTENCE ------------------------- The strip is paper. The pricing band turns over to the house deep green — the SAME band the home page already uses for Green Advantages, quoted character for character from css/home-lux.css:2906 — and onto that dark ground is laid ONE flat, ungrained, brass-capped cream plate that holds every word and every one of the fourteen figures in the section. Beside it one darker object: the viewing recess. Then the amenities are paper again. The green arrives at three scales, which is what gives a 3,500px scroll a shape instead of a sequence of treatments: a small nameplate behind LONG STAY, the whole band under the prices, eighteen icon chips in the register. The material rule, stated as a rule: PAPER HAS GRAIN. PLATE DOES NOT. That is one declaration (`background-image:none` on the plate) and it is why the plate reads as a polished surface laid on a textured one, and why the 1px #a58c55 rules inside it are allowed to exist at all — #a58c55 is 3.13:1 on flat cream and 2.77:1 on grained cream. Add grain to the plate "for consistency" and every meaningful rule in the price matrix silently drops below 3:1. THE PLATE IS `.new_stay_left` — THE COLUMN DIV ALREADY IN THE TEMPLATE ---------------------------------------------------------------------- That single decision is what the rest of the file hangs on. It means every word of body copy in the section (the four "suitable for" statements, the three notes, the fifteen included services — roughly 300 words) is dark ink on cream at 10.07:1 rather than light ink on a dark band, which matters for a readership skewing 65+. It also means no inherited theme colour can strand a paragraph: style.css:3392's #000 h6 and :3429's #151515 cells land on cream as merely-dark ink instead of as invisible text on the page's conversion block. And it means: THIS FILE NEEDS NO MARKUP CHANGE. NOT ONE. Every selector is written against longstay.php exactly as it stands today, including the third table living in `.flexible_model` rather than `.new_stay_left_table`, the untitled middle table, the colspan admission cell and the eighteen `col-lg-3 col-md-4` amenity columns. There is therefore no "unmigrated fallback" block in this file and no half-applied state it can fail in. ONE optional five-tag markup edit (§16) upgrades the figures from correct to display-typeset; the file detects it, and both states are correct. THE EDITING CONTRACT — binding, and the reason for most of the restraint ------------------------------------------------------------------------- No price leaves the template. No number is duplicated anywhere. Nothing here computes, derives, restates or ranges a figure. Changing a price is still: open longstay.php, edit digits. There is no break-even, no "from" price, no equivalence claim between the two models and no recommendation — both models get identical visual weight and are told apart by a numeral, never by mass, fill or colour. The only marks this stylesheet adds to the page are "01" and "02". ========================================================================== LOAD-BEARING — DO NOT "TIDY" ANY OF THESE ========================================================================== This project has shipped bugs twice by simplifying selectors that looked redundant. Each item below fails SILENTLY, not loudly. L1 `.stay_banner_strip .container .row [class*="col-"] …` `.container` is a SPECIFICITY TERM, not tidiness. banner-lux.css:939, :964 and :971 own this band with `.stay_banner_strip [class*="col-"]:not(:has(.whatsapp_block)) p`, which is (0,3,1) — `:not()` takes its argument's specificity and `:has(.whatsapp_block)` is (0,1,0). Adding `.container` makes every strip rule here (0,4,x), which wins OUTRIGHT instead of tying and relying on enqueue order. Drop it and the paragraph reverts to banner-lux's ~789px justified measure under this file's nameplate. Two of the four panel designs died on exactly this. L2 `#pricing .owl-nav.disabled{ display:none !important; }` THE FLAG IS NOT OPTIONAL. style.css:680 says `.owl-carousel .owl-nav.disabled{ display:inherit !important }` and owl.carousel.js builds prev/next unconditionally even though js/custom.js:197 passes `nav:false`. Without a flagged rule of greater weight, two live 35x35 #bf8349 orange chevrons render inside the new dark recess. Only a flagged rule beats a flagged rule; the `#pricing` id is what beats the theme's (0,3,0). L3 `--bs-gutter-x` / `--bs-gutter-y` are zeroed on `.stay_aminities .row` AND ON NOTHING ELSE. Never on a `.container`. Setting the gutter on a container overflows this page and has shipped twice on this project. L4 THE md TRAP, and it is a PAIR. `#pricing .row > [class*="col-"] {width:100%}` at (1,2,0), with the 8/4 split restored at the SAME specificity inside `@media (min-width:992px)` so source order settles it. The template is `col-lg-8 col-md-8` + `col-lg-4 col-md-4`, so at 768–991 the price column is 456px — NARROWER than the 516px it gets at 576–767. A pricing table that gets worse as the screen gets bigger is a bug. Delete either half and it comes back. L5 `@media (prefers-reduced-motion:reduce)` sets `visibility:visible !important; animation:none !important` on `.wow`. WOW.js writes `visibility:hidden` as an INLINE style and animate.css gives `.animated` `animation-fill-mode:both`, which outranks unflagged author declarations. Without BOTH flags the entire run is BLANK for anyone who asked for less motion — the worst possible way to honour the request. L6 THE LEAF BLEED. `.new_stay_left_table` / `.flexible_model` carry `margin-left/right: calc(var(--jd-pad) * -1)`, so the tables use the plate's full inner width. `--jd-pad` is the plate's own padding, so the two can never drift — but hard-code either and the tables overflow the plate at 320px. This bleed is what buys 294px of table room on a 320px phone; see the arithmetic in §7. L7 `border-collapse:separate; border-spacing:0` on the price tables. Not a preference. The first column is `position:sticky` and no engine has ever positioned a sticky cell correctly inside a COLLAPSED table (crbug 702927) — the collapsed border scrolls away from the cell it belongs to. Every rule is therefore drawn as a per-cell border. Switch to `collapse` and the frozen label column breaks on a phone, which is the only place it is ever needed. L8 `counter-increment` fires on `h3` inside `.new_stay_left`, and the untitled middle table gets NO numeral ON PURPOSE — that absence is what parents the deposit ladder to model 01, which is exactly what it is. DO NOT ADD AN `

` TO THE MIDDLE TABLE. It would number the ladder 02 and push Zero Deposit to 03, silently reversing the one structural statement this file makes about the money. L9 THE AMENITY CHIP IS THE BOX'S `::before`, NOT THE ``'s BACKGROUND. `filter` applies to an element's ENTIRE rendering, background included. Put the green on the `` and `brightness(0)` turns the chip black, `invert(1)` turns it white, and the now-white line art vanishes into a white square: eighteen blank chips. So the chip is a `::before` and the icon is laid over it in the SAME explicitly-placed grid cell (both `grid-area:1/1`, the label at `1/2` — once a `::before` exists, auto-placement would otherwise push the icon into the label track). Only the `` carries the filter. L10 FIGURES ARE NEVER `white-space:nowrap` IN THE UN-MIGRATED STATE -- WITH ONE EXCEPTION, THE DEPOSIT LADDER FROM 390px UP. An un-migrated cell's text node in leaves 1 and 3 is the WHOLE string — "INR 55,000 + GST & applicable taxes" — and nowrap makes that one ~340px line, which pushes those leaves hundreds of pixels past their rails. The ladder is different: its cells hold a bare figure and no qualifier, so from 390px it IS nowrap (§6), because with normal wrapping its six figures broke inconsistently across 576-767 and 992-1199. Below 390 "INR 30,00,000" breaks after INR and the ladder FITS a 320px phone. For leaves 1 and 3, nowrap is switched on from 576 up and ONLY in the migrated state, where the text node is just the figure. L11 `overflow-x:auto` on each leaf is a GUARD, not a plan (§7). No `tabindex` is added: Chrome and Firefox make an overflowing scroll container focusable natively, and only WHEN it overflows, so the keyboard gets a region exactly when it needs one instead of three permanently empty tab stops. Safari does not do this yet; that gap is named in `openRisks` rather than hidden. L12 `filter:brightness(0) invert(1)` on the eighteen amenity PNGs, and `filter:none` on them inside `@media (forced-colors:active)`. All eighteen are single-colour #1D0764 line art on transparency, so the two-step is deterministic and source-independent — it is the identical chain home-lux.css already runs on the Green Advantages icons. Under forced colours the OS inverts as well, and without the reset the icons come back as solid blocks. L13 `#a58c55` NEVER TOUCHES GRAINED CREAM OR THE GREEN BAND, and `#cbb279` NEVER CARRIES MEANING ON CREAM. Measured: #a58c55 is 2.77:1 at the worst pixel of grained cream and 2.59:1 at the worst pixel of the grained green, but 3.13:1 on the flat plate. #cbb279 is 1.93:1 on cream and 4.06:1 at the worst pixel of the band. So brass boundaries live on the PLATE (#a58c55) or on the BAND (#cbb279), never the other way round, and anything that must be seen on grained cream is #6b5426 (6.14:1 worst) or #2b3f2f (9.68:1 worst). L14 SOURCE ORDER AND SCOPE. `.new_stay`, `.tick`, `.sectiongap`, `.section-title`, `.sticky_div` and `.longstay_video_carousel` are all GENERIC. page-templates/newshortstay.php (page 1511) emits `.new_stay tick sectiongap` with NO id and has not been redesigned; only `.stay_aminities` is unique to 1504. Two protections, deliberately doubled: functions.php:316 enqueues this under `is_page(1504)`, and every pricing selector is additionally scoped under `#pricing`, which only longstay.php emits. The strip and the amenities have no id, so the enqueue is all they have. NOTHING IN THIS FILE MAY BE MOVED INTO style.css OR responsive.css. ========================================================================== CONTRAST — sRGB relative luminance, computed, at the WORST composited pixel of each ground (the grains are real and they move the number) ========================================================================== A. PAPER #faf7ef + feTurbulence .04 worst grain pixel #f0ede5 flat / worst need #2b3f2f heads, amenity names ............ 10.57 / 9.68 4.5 PASS #3a4238 strip body copy ................... 9.73 / 8.90 4.5 PASS #6b5426 amenity lattice, section mark ...... 6.71 / 6.14 3.0 PASS #5b6357 (available, unused here) ........... 5.83 / 5.33 4.5 PASS #a58c55 BANNED here ........................ 3.03 / 2.77 3.0 FAIL #cbb279 BANNED here ........................ 1.93 / 1.76 3.0 FAIL B. BAND #pricing = #2b3f2f + grain .05 + the house sheen G1 flat #2b3f2f · G2 sheen top #364939 · G3 worst pixel #405243 #fdfbf6 the plate, as an AREA ..... 10.95 / 9.36 / 8.10 3.0 PASS #f4ecd8 nameplate ink (flat chip) .. 9.62 / 8.22 / 7.12 4.5 PASS #cbb279 plate edge, cap, recess edge 5.49 / 4.70 / 4.06 3.0 PASS #a58c55 NEVER USED HERE ............ 3.49 / 2.99 / 2.59 3.0 FAIL NO TYPE OF ANY KIND IS SET ON THIS GROUND. Every word in #pricing is on the plate or in the recess. That is the whole point of §4. C. PLATE #fdfbf6 — FLAT and ungrained, so one number and no worst case #2b3f2f every figure, titles, option heads ..... 10.95 4.5 PASS #3a4238 row labels, stub head, list copy ....... 10.07 4.5 PASS #6b5426 numerals, model rules, links, footings .. 6.95 4.5 PASS #5b6357 the *Effective-from footnote ............ 6.03 4.5 PASS #a58c55 ROW RULES, head rule, stub seam ......... 3.13 3.0 PASS The row rules are the panel's standing fix: all four submitted designs shipped them at 1.34–1.59:1 and offered a mouse-only hover as the remedy. On a six-figure deposit matrix read by people in their seventies the structure has to be visible without a pointer. D. PLATE, ROW-HOVER WASH #f4eee0 #2b3f2f row label, lifted from #3a4238 ......... 9.79 4.5 PASS #3a4238 figures ............................... 9.00 4.5 PASS #6b5426 the row rule, switched up from #a58c55 .. 6.21 3.0 PASS #a58c55 2.80 <- WHICH IS WHY THE RULE SWITCHES. The wash alone is a 1.09:1 change and cannot carry a state; leaving #a58c55 in place would drop the row boundary below 3:1 in the exact state the design added. E. DURATION FACT PLATE #f7f2e6 #2b3f2f the value ........................... 10.14 4.5 PASS #6b5426 the label and the 1px edge ............ 6.43 3.0 PASS OPTIONAL-MARKUP CHIP #e6d4a6 (the .jd-refund chip, §16.2) #6b5426 "100% REFUNDABLE" .................... 4.91 4.5 PASS F. RECESS #22331f #f4ecd8 dot numeral on hover ground .......... 11.42 4.5 PASS #dcd5c4 dot numerals at rest .................. 9.20 4.5 PASS #e6d4a6 iframe and dot focus rings ............ 9.18 3.0 PASS #cbb279 current-dot fill, recess edge ......... 6.52 3.0 PASS rgba(203,178,121,.7) = #988c5e, the dot lattice . 4.00 3.0 PASS current vs inactive dot differ by FILL and by INK, never by colour alone. G. CHIP #2b3f2f icon at brightness(0) invert(1) = #ffffff 11.32 CHIP HOVERED #cbb279 icon at brightness(0) = #000000 ......... 10.18 TARGETS AND FOCUS · Carousel dots: 44 x 44 minimum in both axes (SC 2.5.5), seventeen of them in an auto-fill 44px grid. · Every focus indicator is `:focus-visible` with an offset: links 2px #6b5426 (6.95), rails 2px #6b5426 (6.95), dots 2px #e6d4a6 (9.18), iframes 3px #e6d4a6 over a dark inset band (9.18). · The mailto/tel links take a real underline indicator rather than a 44px box, under SC 2.5.5's inline exception. ========================================================================== MEDIA QUERY TOPOLOGY ========================================================================== EVERY query is `min-width`, applied on top of a working default, plus `prefers-reduced-motion`, `hover`, `forced-colors`, `print` and two `@supports selector(:has(*))`. THERE IS NOT ONE max-width QUERY AND NOT ONE min/max PAIR, so the 767.184px dead band measured on this project cannot occur. Breakpoints are Bootstrap's own: 480 (register only), 576, 768, 992, 1200. The sticky video column follows the same rule — `position:static` is the DEFAULT and sticky is switched ON at >=992, rather than switched off again with a max-width undo. `:has()` is load-bearing in exactly two places (the Duration fact plate and the figure-size switch). Both are single-selector rules inside their own `@supports`, and NO `:has()` selector anywhere in this file shares a comma list with a non-`:has()` selector — that mistake invalidates the whole list on a pre-`:has()` engine and is precisely how a competing proposal put horizontal page overflow on this block at 320px. Degradation: the Duration heading falls back to a readable h6, the figures stay at their un-migrated size. Nothing breaks. ========================================================================== COPY DEFECTS IN THE SOURCE — FOR THE EDITOR, NOT FOR CSS ========================================================================== Flagged, deliberately NOT fixed here and deliberately not laundered through a stylesheet. Each needs the client's sign-off. · longstay.php:111 and :112 — "applicale Taxes" (twice). "applicable". · longstay.php:38 — "No Lockin Period". Should be "No lock-in period". · longstay.php:36 — "gerontologyrelated", missing a space. · longstay.php:53 and :55 — a bare `&` where `&` belongs. · longstay.php:92, :121, :122 — INR 5,00,000 printed THREE times across two tables. One shared footing is the right editorial answer and every judge picked it, but it is a markup restructure needing sign-off, not a CSS change. What this file does instead is refuse to AMPLIFY it: both admission rows are set as footings at 15.5px Karla behind a 2px rule, so the same figure is never rendered twice on one line at display size. · longstay.php:251 — "Amenities:", a trailing colon on a section head. · All seventeen iframes carry the identical title "YouTube video player". ========================================================================== WHAT NO STYLESHEET CAN FIX — FLAGGED, NOT GLOSSED ========================================================================== · js/custom.js:199 sets `autoplay:true` with only `autoplayHoverPause` on a seventeen-item carousel beside the prices. A live WCAG 2.2.2 failure; hover-pause serves neither keyboard nor touch; no CSS can stop a JS timer. One-word fix: `autoplay:false`. · owl.carousel.js builds each dot as `$("
")` — no role, no tabindex, no accessible name — so the dots are keyboard-inoperable and CSS cannot make an element focusable. The `:focus-visible` ring in §8 is written and waiting for `navElement:"button"` (or three lines of jQuery). · Seventeen YouTube iframes load eagerly, plus Owl's loop clones, on the page that has to convert. `loading="lazy"` on iframes 2–17 is free. · Heading order in the section runs h2 -> h6 -> h6 -> h3 -> h6 -> h6. Skipped levels are a best-practice problem rather than an A/AA failure; fixing it means retyping four h6s and retargeting five selectors, and belongs in its own pass. ========================================================================== */ /* ========================================================================== §1 TOKENS -------------------------------------------------------------------------- Declared on the three section roots rather than on :root, so nothing here can leak into another template's cascade if this file is ever mis-enqueued. ========================================================================== */ .stay_banner_strip, #pricing, .stay_aminities{ --jd-serif:"Fraunces","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --jd-sans:"Karla","Segoe UI",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif; /* grounds */ --jd-paper:#faf7ef; /* the two cream sections, grained */ --jd-band:#2b3f2f; /* the pricing ground, and the chip material */ --jd-plate:#fdfbf6; /* the tariff plate — FLAT, never grained */ --jd-recess:#22331f; /* the video well, the darkest value in play */ --jd-row-wash:#f4eee0; /* price-row hover, on the plate */ --jd-inset:#f7f2e6; /* the Duration fact plate */ /* ink */ --jd-ink:#2b3f2f; /* headings and every figure */ --jd-body:#3a4238; /* body copy and row labels */ --jd-brass-ink:#6b5426; /* numerals, links, meaningful rules on cream */ --jd-quiet:#5b6357; /* footnotes */ --jd-cream-ink:#f4ecd8; /* type on the band, the chip, the recess */ --jd-cream-quiet:#dcd5c4; /* dot numerals on the recess */ --jd-ring:#e6d4a6; /* focus rings on dark ground */ /* rules — see L13, these three are not interchangeable */ --jd-rule-plate:#a58c55; /* 3.13:1 — ON THE FLAT PLATE ONLY */ --jd-rule-band:#cbb279; /* 4.06:1 worst — ON THE BAND ONLY, non-text */ --jd-rule-paper:#6b5426; /* 6.14:1 worst — ON GRAINED CREAM ONLY */ --jd-hair:rgba(203,178,121,.55); --jd-ease:cubic-bezier(.2,.7,.2,1); --jd-t:.24s; } /* ========================================================================== §2 PAPER — .stay_banner_strip -------------------------------------------------------------------------- banner-lux.css:793 already gives this band the cream and the grain, and it also serves page 1511, so this section LAYERS rather than replaces. Four things change and nothing else is touched. 1. THE HAIRLINE GOES. The band below changes colour and carries its own brass seam; a second 1px rule immediately above it would stack into a 2px line that reads as a mistake. 2. THE H2 BECOMES A NAMEPLATE. The editor types "LONG STAY" in capitals; at banner-lux's 36px Fraunces that is a slab of capitals arguing with the banner caption 40px above it. Reversed out of a small deep-green plate it stops competing and starts doing a job — it is the first appearance, at the smallest scale, of the material the pricing band is made of. `text-transform` is deliberately NOT set: which case the head is in stays the editor's call, exactly as banner-lux.css:804 argues. 3. THE PARAGRAPH STOPS BEING JUSTIFIED and gets a real measure. 4. FROM 1200 IT RUNS IN TWO COLUMNS. 110 words in one measure is ten long lines a family reads before reaching the number they came for; two ~61-character columns is five short ones, both on screen at once, and the strip is roughly 190px shorter — which on a page this long is a commercial argument, not a typographic one. SEE L1. Every selector here carries `.container` for specificity. ========================================================================== */ .stay_banner_strip{ border-bottom:0; padding:44px 0 50px; } .stay_banner_strip .container .row [class*="col-"] h2{ position:relative; display:block; width:-moz-fit-content; width:fit-content; max-width:100%; /* fit-content + margin-right:auto is what left-aligns the PLATE. The column carries Bootstrap's .text-center with !important, which cannot be beaten on the ancestor — but a fitted block with a zero left margin and an auto right margin ignores text-align entirely, and needs no flag. */ margin:26px auto 26px 0; padding:12px 22px 13px; background-color:var(--jd-band); border:1px solid var(--jd-rule-band); font-family:var(--jd-serif); font-optical-sizing:auto; font-size:clamp(19px, 2.3vw, 28px); font-weight:600; line-height:1.12; letter-spacing:.07em; color:var(--jd-cream-ink); /* 9.62:1 on the chip */ text-align:left; } /* banner-lux:817 draws the house 46px mark as a centred block above the head and :967 unsets its auto margins. Kept as a mark, moved out of the plate's padding box, and given a colour that can be seen: #cbb279 is 1.93:1 on cream — decorative at best — so it becomes #6b5426 at 6.71:1. */ .stay_banner_strip .container .row [class*="col-"] h2::before{ content:""; position:absolute; top:-18px; left:0; display:block; width:46px; height:2px; margin:0; background:var(--jd-brass-ink); } .stay_banner_strip .container .row [class*="col-"] p{ /* 2026-09-13 p.m. II: the client's screenshot — the paragraph in the serif, one column, the full container. Fraunces at its text optical size is the same face as the plate above it; the heading ink rather than the body ink so a 20px serif does not read grey on the grain. (Was Karla 17px/1.78 on a 70ch measure.) */ max-width:none; margin:0; font-family:var(--jd-serif); font-optical-sizing:auto; font-size:clamp(17px, 1.9vw, 20.5px); font-weight:500; /* the lightest Fraunces the theme loads (500/600/700); 400 would only be this instance under another name */ line-height:1.42; letter-spacing:0; color:var(--jd-ink); /* 10.95 flat / ~10 worst pixel */ text-align:left; -webkit-hyphens:manual; hyphens:manual; } /* ========================================================================== §3 THE BAND — #pricing -------------------------------------------------------------------------- The colour, the grain, the sheen and the two seams are quoted VERBATIM from css/home-lux.css:2906 (#whatsmore, the Green Advantages band), so the band on this page and the band on the home page are provably the same object rather than two greens that nearly match. If the house band ever changes, change this by copying, not by eyeballing. style.css:271 gives `.sectiongap` 20px of padding at (0,1,0); `#pricing` is (1,0,0) and takes it back. A band needs room to be a band. ========================================================================== */ #pricing{ position:relative; padding:40px 0 44px; /* 2026-09-13: paper, not the green band (§17's retreat, applied). The grain string is the strip's, so the run is one material; the seams are the brass hairline. */ background-color:var(--jd-paper); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.04'/%3E%3C/svg%3E"); border-top:1px solid rgba(107,84,38,.35); /* ≈2.1:1: a quiet rule between three sections of one cream; the brass hairline was 1.41 */ border-bottom:1px solid rgba(107,84,38,.35); } /* L4 — the md trap, first half. (1,2,0) against Bootstrap's (0,1,0). No column class is edited in the template and --bs-gutter-x is not touched. */ #pricing .row > [class*="col-"]{ flex:0 0 auto; width:100%; max-width:100%; } /* ========================================================================== §4 THE PLATE — #pricing .new_stay_left -------------------------------------------------------------------------- One flat cream object on the dark band. Square, a 1px #cbb279 edge, a 3px brass cap. NO CAST SHADOW: this is a square-cornered, brass-hairline site and a material-design drop shadow would argue against everything else on it. The plate is lit because it is the brightest thing between two darker surfaces, not because something is faked underneath it. --jd-pad is the plate's own HORIZONTAL padding AND the negative margin the three leaves bleed by (L6) — change it in one place. --jd-pad-y is separate because the vertical rhythm and the measure want different numbers, and because this section is already ~2,400px tall: every 10px of symmetric padding is 20px of scroll a family does not need. --jd-edge-x is the inset the leaf headings and the first/last cells share, so the figures line up with the body copy above them. Below 576 it is deliberately SMALLER than --jd-pad: that is where the 320px fit is won. ========================================================================== */ #pricing .new_stay_left{ --jd-pad:16px; /* horizontal plate padding AND the leaf bleed */ --jd-pad-y:20px; --jd-edge-x:6px; /* outer inset: headings, first/last cell */ --jd-cell-x:4px; /* between-column cell padding */ --jd-cell-y:14px; --jd-stub-gap:8px; /* label column -> first figure */ /* 2026-09-13: no longer the plate — a transparent grid of the four boxes (the plate itself is now `.jd-box`, REVISION section). The tokens stay here because every box inherits them. */ display:grid; grid-template-columns:minmax(0,1fr); gap:22px; background:transparent; border:0; padding:0; font-family:var(--jd-sans); color:var(--jd-body); } /* ========================================================================== §5 THE LEAD-IN — headings, ticks, lists, links, the Duration plate -------------------------------------------------------------------------- Every heading is reached STRUCTURALLY, never by :nth-of-type. This template is hand-edited; an editor inserting one h6 must not silently re-assign the styling of three others. `h6:first-child`, `h6:has(+ .new_stay_left_table)`, `.flexible_model + h6` and `.flexible_model + h6 + ul + h6` cannot be broken that way. (The commented-out `