/* --------------------------------------------------------------------------- Written by the rebuild. Everything above it in the cascade is the site's own stylesheet, untouched and in its own order. --------------------------------------------------------------------------- */ /* Turn OFF the phone's automatic text inflation. With `width=980` in the viewport tag, Chrome decides the page is not mobile-optimised and "boosts" body text so it stays physically readable: measured, it took this block's 15px paragraphs to 37.7px and made the appended section 2,293px tall against 976 on the desktop. The site's own Wix text is not boosted, so the page came out at two different scales at once. Opting out means the whole page scales by exactly one factor, which is the point of the fixed-width viewport in the first place. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* The page's

. Taken out of the flow entirely rather than sized down: a 1px clipped box contributes no height, no margin and no line box, so it cannot move the hero it sits above. See add_h1() in gen.py for why it is here rather than wrapped around the wordmark graphic. */ h1.hk-h1 { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; /* A 1x1 box at the origin is still a box, and it sat on top of the hero at (0,0). The hero is a gallery whose caption strip is `.IcC9C7:hover .oL29SX {opacity:1}`, so the h1 intercepted the pointer and the strip stayed at opacity 0 while the archive painted it at 1 -- 32% of the pixels in that 38px band, from one pixel of overlay. It is not interactive; it should not be hit-testable. */ pointer-events: none; } /* The homepage hero, framed as the site actually framed it. The hero is a Wix pro-gallery. Without the runtime, its slides stack and the top one paints with plain `object-fit: cover` -- the whole photograph, lemon wedge and neighbouring dishes included. The owner's full-page Wayback capture (20250420151013) shows the running site framing that same slide much tighter. Measured against the capture by multi-scale template match: the displayed window is the slide at 1.73x -- cover accounts for 1.3786x (1351/980), and the remaining 1.255x is a zoom the gallery runtime applies, centred EXACTLY on the image's midpoint (matched centre (490,735) vs true centre (490,735), correlation 0.924 with the nav and wordmark masked out). One transform reproduces it. Scoped to this one gallery by id; every other image on the site already renders at its captured framing. */ #comp-lik76thg .wixui-gallery__item img { transform: scale(1.255); } /* The plan block. Its own CLASSES rather than the site's, because the site's classes carry absolute positioning from Wix's editor and reusing them here would drop this section on top of the page it is appended to. But the site's own TYPE and GROUND, because the first version of this block was white with default browser fonts, and on a site whose every page ends in a solid black footer that read as a broken page bottom -- the owner said "footer is broken", and rendered side by side with the archive, they were right: the archive's last painted band is the black footer, and this build's was 976px of white. So the block now continues the footer instead of interrupting it: ground #000, white text -- the footer's, measured: rgb(0,0,0) body wfont_e75002_f56e... -- the footer's own webfont, 11px/20.9, letter-spacing .77px (measured) headings wfont_6c2aed_678d... -- the font of "RELAXED, INTIMATE & HANDMADE.", 22px, ls .7px (measured) Both fonts are @font-face'd in the site's inlined stylesheets and their woff2 files ship in ext/, so this costs no new asset. One trap, hit and fixed: the @font-face rules register the TRUNCATED families (wf_678d..., wf_f56e...), and the wfont_ names are aliases the Wix runtime used to register at runtime -- naming only the alias renders the fallback. The stacks below are the site's own, copied verbatim. Body copy runs at 13px rather than the footer's 11px -- these are paragraphs, not an address block -- same family, same letter-spacing ratio. */ .hk-plan { background: #000; color: #fff; padding: 4em 0 4.5em; /* If the webfonts somehow fail, fall back to the same stacks the site's own text would fall back to. */ font-family: wfont_e75002_f56e230917074043b2bb435023265453, wf_f56e230917074043b2bb43502, orig_gilmer_regular, "Helvetica Neue", Helvetica, Arial, sans-serif; } .hk-plan-inner { max-width: 980px; margin: 0 auto; padding: 0 24px; font-size: 13px; letter-spacing: .06em; line-height: 1.9; } .hk-plan h1.hk-plan-h1 { font-family: wfont_6c2aed_678d3d5efc9f48208b6c8f98b7a4087a, wf_678d3d5efc9f48208b6c8f98b, orig_kilimanjaro_sans_round_2, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 30px; line-height: 1.15; letter-spacing: .76px; text-transform: uppercase; margin: 0 0 1.1em; } .hk-sec { margin: 0 0 2.4em; } .hk-sec h2 { font-family: wfont_6c2aed_678d3d5efc9f48208b6c8f98b7a4087a, wf_678d3d5efc9f48208b6c8f98b, orig_kilimanjaro_sans_round_2, "Helvetica Neue", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 20px; letter-spacing: .7px; text-transform: uppercase; margin: 0 0 .6em; } .hk-sec h3 { font-size: 13px; font-weight: 400; letter-spacing: .77px; text-transform: uppercase; margin: 1.3em 0 .3em; } .hk-sec p { margin: 0 0 .8em; } .hk-sec ul { margin: 0 0 .8em; padding-left: 1.2em; } .hk-sec li { margin: .3em 0; } .hk-ask .hk-h2-min { display: inline-block; margin: 0 1.1em .4em 0; font-size: 12px; opacity: .75; } .hk-also ul { list-style: none; padding-left: 0; } .hk-also li { display: inline-block; margin: 0 1.6em .4em 0; } /* The footer's links are white and underlined; these match it. */ .hk-plan a { color: #fff; text-decoration: underline; text-underline-offset: 2px; } /* Hidden by TRANSFORM, not by a fixed negative offset. `top: -60px` assumes the link is under 60px tall. With `min-height: 44px` and 10px of padding it is 64, so four pixels of it sat at the top-left corner of every page -- invisible against the dark hero, and enough to take the pointer away from the gallery underneath and switch off its caption strip: 2.2% of the page's pixels, from a 4px sliver nobody could see. translateY(-120%) is measured against the element's own height, so it stays correct whatever the box turns out to be. */ a.skip { position: absolute; left: 0; top: 0; transform: translateY(-120%); z-index: 100; background: #000; color: #fff; padding: 10px 16px; /* The site's own CSS sets a 10px base on some containers and the skip link inherited it -- 10px is unreadable, and this is the one element on the page a keyboard user is meant to read before anything else. It is off-screen until focused, so nothing else can be affected. */ font: 16px/1.3 system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif; text-decoration: underline; } a.skip:focus { transform: none; } /* The skip link is the one element that needs a 44px box at every width: it is off-screen until focused, so growing it moves nothing. Every OTHER tap-target rule is inside the media query below -- see the note there. */ a.skip { display: inline-flex; align-items: center; min-height: 44px; } @media (max-width: 900px) { /* --- tap targets and type, measured ------------------------------------- Scoped to <=900px, and this time actually scoped: the sister build in this series wrote the same rules OUTSIDE the query, which grew its desktop footer from 302 px to 504 px while the comment claimed the rendering could not move. check.py measures the desktop footer against the archive precisely so that cannot happen quietly again. */ .hk-plan-inner { padding: 0 16px; font-size: 15px; } .hk-sec a, .hk-also a { display: inline-flex; align-items: center; min-height: 44px; } .hk-plan a { overflow-wrap: anywhere; } }