# Joganji River Park BBQ TERRACE — Style Reference > A sunny park brochure brought to the web through pastel graph paper, candid photographs, and illustrated visitors. **Website:** [常願寺川公園 BBQ TERRACE](https://cascade-bbq.jp/) **Original URL:** https://cascade-bbq.jp/ **Final URL:** https://cascade-bbq.jp/ **Response:** HTTP 200; no redirect recorded. **Theme:** white canvas, black linework, and pastel accents; no theme selector evidenced. **Inspected:** September 12, 2026. Supplied evidence retrieved at `2026-09-12T13:12:52.026Z`, equivalent to 22:12:52 JST. **Viewports:** desktop `1440 × 1000` and mobile `390 × 844` CSS pixels. **Scope:** the current homepage, including its opening collage, news strip, About, menu overview, facility guide, access information, news collection, FAQ links, reservation links, and footer. Visual coverage consists of three desktop captures and two mobile captures; the rendered DOM provides additional measurements throughout the page. Linked detail pages and the external booking flow were not inspected. BBQ TERRACE presents a practical visitor-information website with the atmosphere of an illustrated park leaflet. White occupies most of the page. Fine black rules organize navigation, photographs, news, facility links, and reservation panels. Mint green and blush pink provide gentle emphasis, while light blue appears in the brand artwork. Small drawings of people, pets, flowers, and trees make the page feel inhabited. The opening composition is deliberately irregular: a large photograph sits inside a four-lobed outline, smaller cropped photographs touch the page edges, and illustrations overlap these boundaries. Below this expressive opening, information becomes more orderly. Large regular-weight English section names accompany smaller underlined Japanese headings, long paragraphs retain generous leading, and rectangular mint links lead to detailed information. The mobile layout preserves the collage and decorative overlaps while moving the persistent reservation oval to the lower-right corner. ## How to Read This Reference - **Measured** means a value appears in the supplied rendered DOM or computed-style evidence. Measurements are CSS pixels unless stated otherwise. - **Source token** means a custom property explicitly present in that evidence. Its declaration does not prove that every element uses it. - **Visual estimate** means an approximate dimension or appearance read from the supplied current-page screenshots. - **Recommendation** means guidance for a new implementation, including the Quick Start. It is not a claim about the original code. - Font stacks are confirmed computed declarations. The evidence does not identify the actual font file used for every individual glyph. - Screenshots and element measurements are separate observations. Offscreen reveal transforms can affect recorded coordinates; do not reproduce those coordinates as intentional heading misalignment. - Only two viewport widths were inspected. The original breakpoint thresholds and behavior between those widths are unknown. ## Tokens — Colors ### Default Palette | Name | Value | Source token | Role and evidence | | --- | --- | --- | --- | | White | `#ffffff` | `--color-white` | Main visible canvas and white cards; explicit fill on mobile news strip and secondary booking panels. | | Black | `#000000` | `--color-black` | Measured body text, primary labels, arrows, and structural borders. | | Mint | `#99e7ba` | `--color-green` | Exact computed fill of the rectangular detail links; also echoed in the logo and illustrations. | | Blush | `#ffd9e0` | `--color-red` | Exact computed fill of the persistent reservation oval and large reservation panel. The source name says red, but the visible color is pale pink. | | Pale Blue | `#c6e6fb` | `--color-blue` | Declared accent corresponding visually to the blue part of the brand artwork. No inspected large blue surface was identified. | | Supporting Text | `#333333` | `--text-main` | Measured on booking helper text and footer contact/link text. Despite its name, it is not the measured default body color. | | Secondary Gray | `#757575` | `--text-sub` | Declared secondary-text token; use cautiously because the sampled parent styles do not establish every small caption's final color. | The important relationship is white space plus black structure, with color reserved for identity and navigation emphasis. Photographs supply stronger greens, warm wood, clothing colors, and food tones. Those photographic colors should not become additional interface tokens. ### Mesh Pattern The source declares: ```css --bg-mesh: url(../img/cmn/bg-mesh.svg) repeat top center / 504px; ``` The current screenshots show mint horizontal lines and pale pink vertical lines crossing over white. The spacing is approximately `24px` in both directions at both inspected widths. This is a visual estimate of the grid cells; `504px` is the measured declared tile size, not the cell spacing. The exact colors inside the SVG were not supplied. Do not describe the mesh strokes as confirmed copies of the solid mint and blush tokens. The Quick Start uses separately labeled approximations. ### Theme Presets Only the light presentation is evidenced. The three pastel brand colors are accents within one design, not observed selectable themes. ## Tokens — Typography ### English Display and Navigation **Source stack:** `"Public Sans", sans-serif`, exposed as `--ff-en`. English section names such as `About`, `Menu`, and `BBQ Guide` use regular weight `400`, with normal tracking and a restrained geometric appearance. They are large enough to organize the long page without becoming heavy advertising headlines. The observed large English section names are paragraph elements paired with Japanese `h2` elements. Preserve the visual pairing when reusing the design, but choose a coherent heading structure for the new page. ### Japanese and Mixed Text **Source stack:** `"Public Sans", "Zen Kaku Gothic New", sans-serif`, exposed as `--ff-jp`. The body uses `400` weight at both inspected widths. Desktop text is `15px / 30px` with `0.45px` tracking; mobile text is `14px / 28px` with `0.42px` tracking. Both tracking values equal `0.03em` at their respective body sizes. Long About copy opens the leading further to `2.2`: `33px` on desktop and `30.8px` on mobile. Shorter practical information generally uses `1.8`. This variation creates breathing room without requiring oversized body text. ### Brand Artwork and Decorative Lettering The main logo is artwork within the home link, occupying a measured `150 × 100px` box on desktop and `90 × 60px` on mobile. Its outlined pastel letters should not be reconstructed by typing the brand name in the body font. The footer uses a different, dark `cascade park` mark. The screenshot shows a stepped, wave-like symbol above the wordmark. This is a visible brand element, not evidence of a separately identified legal operator. ### Type Scale All values below are measured unless explicitly marked as estimates. Paired values are font size / line height. | Role | Desktop | Mobile | Weight and tracking | | --- | --- | --- | --- | | Default body | `15 / 30px` | `14 / 28px` | `400`; `0.03em` | | Large English section name | `60 / 66px` | `38 / 41.8px` | `400`; normal tracking | | Japanese section heading | `18 / 19.8px` | `14 / 15.4px` | `400`; `4px` bottom padding before its underline | | Hero slogan | `27 / 27px` | `20.8 / 20.8px` | `400`; `0.06em` | | About introduction | `25 / 40px` | `17 / 30.6px` | `400` | | About body paragraph | `15 / 33px` | `14 / 30.8px` | `400`; approximately `0.03em` | | Menu-section vertical copy | `21 / 21px` | `15 / 15px` | `400` | | Menu plan name | `24 / 38.4px` | `20 / 32px` | `400` | | English menu-plan label | `13 / 16.9px` | `12 / 15.6px` | `400`; `0.02em` | | Menu price | `15 / 27px` | `14 / 25.2px` | `400` | | Menu description | `15 / 27px` | `13 / 23.4px` | `400`; normal tracking | | Mint detail link | `18 / 28.8px` | `15 / 24px` | `400` | | Facility information | `15 / 27px` | `13 / 23.4px` | `400` | | Opening news-strip heading | `24 / 48px` | `16 / 32px` | `400` | | Opening news item title | `15 / 19.5px` | `13 / 16.9px` | `400`; normal tracking | | Main news-card title | `20 / 32px` | `16 / 25.6px` | `400` | | FAQ question | `16 / 25.6px` | `14 / 22.4px` | `400`; `0.02em` | | Large reservation title | `48 / 48px` | `30 / 30px` | `400`; normal tracking | | Reservation-panel Japanese label | `18 / 18px` | `14 / 14px` | `400` | | Secondary booking-card title | `18 / 18px` | `14 / 14px` | `400`; `0.06em` | | Secondary booking-card helper | `13 / 13px` | `11 / 11px` | `400`; supporting gray | | Footer utility links | `14 / 18.2px` | `12 / 15.6px` | `400` | | Desktop navigation labels | Approximately `20px` English and `10px` Japanese | Not visible in the closed mobile header | Visual estimate; child-label styles were not supplied | Use regular weight as the default hierarchy. The original gains emphasis from size, placement, underlines, and surface color rather than frequent bold text. ## Tokens — Spacing & Shapes ### Responsive Unit There is no evidence of a special global scaling unit. The root computes to `16px`, while the body has its own `15px` or `14px` size. Some values change between desktop and mobile; the hero slogan includes fractional mobile measurements. These facts do not establish one universal fluid-sizing formula. The wrapper declarations are explicit: ```css /* Observed desktop declaration */ --wrapper: calc(100vw - 60px); /* Observed mobile declaration */ --wrapper: calc(100vw - 12px); ``` This produces a nominal outer width of `1380px` on desktop and `378px` on mobile. After the two `1px` side rules, the main content widths measure `1378px` and `376px` respectively. ### Spacing Scale These are recurring measured values, not proof of a formally authored spacing scale. | Use | Desktop | Mobile | | --- | --- | --- | | Outside page margin | `30px` | `6px` | | Common content inset inside the mobile frame | Varies by container | `30px` | | Main navigation-link padding | `16px` | Menu-panel links declare `18px 0` | | Main navigation bilingual gap | `6px` | Menu-panel links declare `12px` | | Reservation oval label gap | `5px` | `5px` | | Mint-link padding | `12px 36px` | `12px 24px` | | Mint-link internal gap | `8px` | `8px` | | Facility-link internal gap | `20px` | `15px` | | Facility-link vertical separation | `24px` | `20px` | | FAQ question padding | `24px 0` | `18px 0` | | Booking-panel column/row gap | `31px` | `15px` | | Space after booking cards before footer | `150px` | `75px` | | Footer horizontal / bottom padding | `60px / 70px` | `30px / 36px` | Section spacing is intentionally generous. About declares `165px` above and `130px` below on desktop, falling to `48px` and `60px` on mobile. The guide declares `135px 0 150px` on desktop and `45px 0 60px` on mobile. Access uses `120px 0 135px` and `60px 0` respectively. ### Border Radius | Element | Treatment | Evidence | | --- | --- | --- | | Page frame and structural separators | `1px solid #000000` | Exact source `--border` | | Mint detail links | `0` radius | Computed | | Booking panels | Square corners | Computed and visually confirmed | | Persistent reservation link | `50%` radius | Computed; produces an ellipse | | Main news navigation buttons | `24px` radius on `52 × 48px` boxes | Computed | | Circular thumbnail outlines | Circular | Visually observed; approximate diameter given below | | Hero photographs | Custom contours | Visually observed; original path and masking mechanism unavailable | | Illustrations | Irregular drawn edges | Artwork, not interface border-radius tokens | Avoid applying a universal rounded-card system. The contrast between square information panels and a few special curves is central to the design. ### Layout Measurements | Element | Desktop `1440 × 1000` | Mobile `390 × 844` | Status | | --- | --- | --- | --- | | Main interior | `x=31`, width `1378px` | `x=7`, width `376px` | Measured | | Ordinary content span | Frequently `x=150` to `1290`, width `1140px` | `x=37` to `353`, width `316px` | Measured from content elements | | Declared inner widths | `930px`, `1020px`, `1200px` | Same declarations remain present | Source tokens; not all equal usable text widths | | Main logo | `150 × 100px`, at `90,36` | `90 × 60px`, at `30,18` | Measured | | Persistent Reserve | `135 × 78px`, at `1287,24` | `105 × 60px`, at `267,770` | Measured initial-view rectangles | | Mobile menu button | Not present in desktop capture | `50 × 50px`, at `333,0` | Measured | | Central hero contour | Approximately `660 × 600px` | Approximately `336 × 305px`, partly clipped at right | Visual estimate | | Opening news strip | `1378 × 82px`, top `826px` | `376 × 58px`, top `752px` | Measured | | News-strip heading cell | `150 × 80px` | `84 × 56px` | Measured interior boxes | | About text column | `516px` | `316px` | Measured | | Guide information column | `456.20px` | `316px` | Measured from the full-width guide link | | Guide facility-link width | `291.20px` | `208.88px` | Measured | | FAQ question width | `723.83px` | `256px` | Measured | | Large booking panel | `494.5 × 271px` | `316 × 184.19px` | Measured | | Secondary booking panel | `494.5 × 120px` | `316 × 72px` | Measured | | Footer height | `245px` | `463.97px` | Measured | | Total document height | Approximately `8326.42px` | Approximately `8260.95px` | Supplied DOM measurements | The nominal `1200px` inner token and the observed `1140px` content span are different measurements. A `1200px` container with `30px` inner padding on both sides is a useful reconstruction, but the complete original container rule was not supplied. ## Components ### Page Frame and Persistent Header **Role:** keeps the long page visually bounded and makes primary destinations easy to locate. Two thin black vertical rules frame the entire page. On desktop they sit about `30px` from the viewport edges; on mobile they sit about `6px` from them. Some hero imagery is clipped against this frame, while the desktop reservation oval projects beyond its right edge. The desktop opening header has three distinct regions: the illustrated logo at upper left, six bilingual navigation links centered across the page, and the pink reservation oval at upper right. The navigation labels are `News`, `About`, `Menu`, `BBQ Guide`, `Access`, and `FAQ`, each with a smaller Japanese caption. The lower desktop captures retain a compact white navigation strip approximately `77px` high with a black bottom rule. The large upper-left logo is no longer visible. This supports persistent navigation and a changed scrolled composition; the exact fixed/sticky implementation and threshold are not supplied. On mobile, the horizontal navigation disappears from the visible header. A square white menu button with three fine horizontal strokes occupies the upper-right corner. Additional navigation links exist in the mobile DOM, but no open-menu screenshot or activation result was supplied. Do not infer an overlay style, entry animation, or successful focus management from their presence alone. ### Persistent Reservation Oval **Role:** provides a recurring path to booking throughout browsing. Use blush `#ffd9e0`, a `1px` black outline, `50%` border radius, and vertically stacked `Reserve` and `ご予約` labels with a `5px` gap. The ellipse measures `135 × 78px` on desktop and `105 × 60px` on mobile. Desktop placement is `18px` from the viewport's right edge and `24px` from the top. Mobile placement is `18px` from the right and `14px` from the bottom in the captured viewport. It remains in the same lower-right position in the mobile footer capture. Both this control and the large lower reservation panel point to an external booking URL. The destination is evidenced by the link record; opening behavior and booking steps were not tested. ### Opening Photo Collage **Role:** communicates sociable outdoor activity before presenting logistical information. The desktop focal photograph occupies a broad four-lobed silhouette with shallow inward notches at the top, bottom, and sides. A fine black contour separates it from the white page. The visible image shows people sharing drinks in a green park setting. A smaller left photograph has a sloped edge; the right photograph uses a broad curved cutout. Both sit lower than the central image and touch the page-frame region. Illustrations overlap the composition instead of sitting inside cards: a barbecue group near the left of the main image, a tulip beside the smaller left image, and children near the right image. A mint-and-pink mesh rises behind the lower photographs and continues to the news strip. The slogan `楽しもう、つながろう。` sits to the right in two vertical Japanese lines, each accompanied by a straight black rule. An Instagram icon and vertical label sit close to the right frame. On mobile, the main contour moves toward the upper right and extends beyond the visible frame. The barbecue illustration overlaps its lower-left edge. The slogan moves below it into two horizontal underlined lines. A smaller left photograph and a lower-right photograph create a second tier above the news strip. The desktop Instagram rail is not visible in this mobile state. The captured photo arrangements differ between desktop and mobile. The mobile main contour contains adjacent photographic regions with a visible vertical seam. These are observed states; they do not establish an autoplay interval, transition type, or a permanent split-image layout. ### Opening News Strip **Role:** exposes current operational updates immediately after the hero. A horizontal band spans the framed page width, with black rules along its top and bottom. A fixed-width `News` cell precedes a sequence of linked items. Each item combines a circular thumbnail, a date, and a compact Japanese title. Vertical rules divide adjacent cells. The desktop strip is `82px` high overall. Its heading occupies `150px`, while item links use `12px 30px` padding and a declared `12px` gap. The first item measures approximately `400px` wide. Circular thumbnails appear about `60px` in diameter. On mobile the strip becomes `58px` high, the heading becomes `84px` wide, and item padding becomes `0 18px` with an `8px` gap. Thumbnails appear approximately `40px` across. The title remains on a horizontal line and is clipped by the available strip width. The DOM contains items extending beyond the viewport. This confirms a horizontal sequence, but not whether automatic movement, dragging, or another control exposes the rest. A new implementation should ensure all items remain accessible without requiring an assumed marquee behavior. ### Bilingual Section Heading **Role:** creates a consistent hierarchy across very different content sections. Pair a large regular-weight English name with a smaller Japanese heading and a short underline beneath the Japanese text. Side-by-side examples include the guide heading in the desktop capture and the measured mobile section headings. English type measures `60px / 1.1` on desktop and `38px / 1.1` on mobile. Japanese type measures `18px / 1.1` and `14px / 1.1`, with `4px` of bottom padding. The ordinary horizontal gap is approximately `36px` on desktop and `18px` on mobile, calculated from paired element widths and positions where they align horizontally. Desktop Access, News, and FAQ use more vertical heading arrangements in their narrower information regions. Do not force every section into an identical centered title block. ### About Introduction and Mint Detail Link **Role:** explains the facility's offer and leads to the About page. The measured desktop text column is `516px` wide. It contains a bilingual heading, a two-line Japanese introduction, a longer paragraph, and a full-width mint detail link. The paragraph uses `15px / 33px`, and the action sits `48px` below its measured bottom edge. On mobile, the text column becomes `316px`. The heading starts substantially below the section's top, leaving an upper region consistent with media-first stacking; the supplied screenshots do not show that region, so its exact artwork should not be reconstructed from coordinates alone. Copy uses `14px / 30.8px`, followed by a `30px` gap before the mint link. The shared mint-link anatomy is a square rectangular field, black text, and a right-pointing arrow grouped toward the right. Desktop links are approximately `52.8px` high with `12px 36px` padding. Mobile links are `48px` high with `12px 24px` padding. The source declares a padding transition, not a shadow or scale transition. ### Menu Plan Overview **Role:** previews the available BBQ tiers and directs visitors to detailed menus. The DOM identifies four plans: `Value`, `Standard`, `Premium`, and `Kids`. Each contains a small English label, a larger Japanese name, a price, and a short description. The fee explanation separates a per-site charge from the per-person menu charge. Keep these two billing concepts distinct in any adaptation. Desktop text blocks measure approximately `330.66px` wide, starting around `x=150`, `554.66`, `959.31`, and `1363.97`. The fourth extends beyond the normal content span. Previous/next buttons also exist. These measurements support a horizontally arranged plan component with controls; movement, looping, and its image presentation were not tested. **Mobile verification issue:** the supplied mobile DOM reports plan-name widths near `45.64px` and price/description widths near `55.98px`, with several plans placed side by side. These narrow boxes produce severe wrapping. The arrow-button boxes also extend beyond the viewport edges. No supplied mobile menu screenshot resolves whether this was a temporary measurement state or a visible layout problem. Do not present these dimensions as a recommended responsive design. Use readable plan cards and verify the initialized component separately. ### Additional Menu Links **Role:** separates optional extras from the main BBQ plans. The desktop structure has a large `A La Carte` link on the left and two stacked links, `Drink` and `Equipment`, on the right. The left link measures about `780.86 × 351px`; the right links are approximately `597.13 × 175.5px` each. This creates one large region balanced by two smaller ones across the framed page. The left link declares `60px 72px` padding and a `48px` gap. The right links declare `32px 54px` padding and a `28px` gap. Each pairs a Japanese title with a smaller English label; the larger link also includes explanatory copy. Mobile places all three links in one column. The large item is approximately `200px` high, followed by rows around `138px` high. Text remains paired with a left-side media region. The exact images in these links are not available in the supplied captures. ### Illustrated Facility Guide **Role:** combines a spatial overview with hours and specific facility destinations. The desktop capture is a clear two-column composition. At left is an illustrated park map, approximately `585px` wide, with pale green ground, irregular white paths, green tree circles, and ten numbered pastel site markers. Drawn buildings, a tent, parking, and restroom symbols explain the setting. Tree and dog-walking illustrations extend outside the map's main rectangle. The right column is measured at `456.20px`. Its bilingual heading sits above two groups: operating hours and facility links. Small outlined Japanese labels occupy a narrow left subcolumn; details occupy the right. The hours preserve seasonal blocks and separate notes for last orders and winter closure. Facility links use a square photograph, the facility name, a right chevron, and a bottom rule. Their measured size is `291.20 × 65px` on desktop. The thumbnail appears approximately `64px` square. A full-width mint link closes the guide column. Mobile places the map region before the guide heading and information. Within the information block, labels and values still occupy two columns. Facility links retain their `65px` height while narrowing to `208.88px`. This preserves the compact directory format instead of converting each destination into a large card. The numbered map should be treated as an illustrated diagram. No evidence establishes clickable site markers, zooming, or availability states. ### Access Information **Role:** answers where the facility is and how visitors reach it. The DOM provides a bilingual heading, the `BBQ TERRACE` name, postal address, a `Google Map` link, transport instructions, and parking information. The Google Map link is a compact text-and-arrow treatment, measured at `18px / 25.2px` on desktop and `15px / 21px` on mobile. The source text distinguishes driving, rail access, and parking. Preserve these as labeled information groups. The supplied captures do not show this section, and the element subset does not establish a map embed's dimensions or interaction behavior. Do not infer a particular interactive-map presentation solely from the external link. ### Main News Collection **Role:** provides a richer editorial view of updates beyond the opening strip. The DOM identifies linked articles containing categories, dates, and titles. On desktop, the heading/control region occupies the right side in a `500px`-wide block. Article links measure `380px` wide and extend horizontally to its left. Their title columns measure `276px`, producing approximately `52px` insets on either side. Two small navigation buttons measure `52 × 48px` with `24px` corner radii. A mint link leads to the complete news list. Mobile puts the heading above the article sequence. Cards measure `268px` wide, and their title columns measure `208px`, giving `30px` insets. The next card begins one pixel after the previous card's measured right edge. The list link moves below the sequence and fills the `316px` content width. These dimensions support a horizontal news component. The supplied screenshots do not show its full visual surface or activated controls, so avoid inventing category badge colors, hover fills, or autoplay behavior. ### FAQ Link Panel **Role:** routes common practical questions to answers on a dedicated page. A white inset panel sits over the mesh pattern. Desktop places the heading and a small list link at left, with five wide question rows at right. A pet illustration decorates the heading area in the supplied lower capture. Question rows use plain Japanese text, a right chevron, and a thin bottom rule. Desktop questions measure `723.83px` wide with `24px` vertical padding. Mobile questions narrow to `256px` within an additional inset, use `18px` vertical padding, and grow taller when text wraps. The mobile list link follows the questions and aligns toward the right. These homepage rows are anchors to `/faq/#faq_…` destinations. They are not evidenced as inline accordions. Do not add expand/collapse behavior while describing it as the original interaction. ### Reservation and Secondary Destination Panels **Role:** presents a final booking opportunity alongside group-use and café information. On desktop, a `1020px`-wide arrangement contains a large pink reservation panel at left and two white photo links stacked at right. The columns measure `494.5px` each, separated by `31px`. The pink panel is `271px` high; each white panel is `120px` high with a `31px` gap. The pink panel contains a large `Reserve` title, the Japanese booking label, a family-with-wagon illustration near the lower right, and a separate outlined circular arrow. The white panels contain a square architectural photograph at left, a title/helper stack, and a right chevron. Photographs appear roughly `118px` square inside their outlined rows. The whole arrangement begins `90px` before the measured end of the FAQ section on both inspected layouts, visibly overlapping the lower mesh region. This is a measured overlap, not confirmation of a particular negative-margin implementation. Mobile stacks all three panels at `316px` wide. The reservation panel is approximately `184px` high; the white links are `72px` high with roughly `70px` square photographs. Gaps reduce to `15px`. The illustration and round arrow remain integral to the pink panel. ### Footer and Page Top Link **Role:** closes the page with location, contact information, utility links, and a return path. The desktop footer is a spacious horizontal arrangement. The `cascade park` mark sits left, contact details and underlined utility links sit near the center, and a barbecue illustration accompanies a vertical `Page Top` label at right. An outlined Instagram icon appears alongside the utility links. There is no heavy colored footer block. Mobile stacks the mark, address and telephone details, utility links, and social icon. The logo is approximately `86px` wide compared with about `138px` on desktop. A large white gap separates the logo from the contact block. The illustration and vertical top link sit to the lower right, while the pink reservation oval remains fixed near the viewport corner. The telephone has a `tel:` destination. The top link points to the homepage's empty fragment. Smooth scrolling, focus transfer after navigation, and external-link target behavior were not verified. ## Tokens — Motion & Interaction The strongest motion evidence is declared transition styling. The supplied record does not include before/after activation results for the controls. | Element or treatment | Supplied value | What can be concluded | | --- | --- | --- | | Shared easing | `cubic-bezier(0.45, 1, 0.6, 1)` | Exact source `--ease` | | Home-logo link | `opacity 0.3s` with shared easing | Opacity changes are configured; target opacity and trigger were not exercised | | Reservation oval | `background 0.3s` with shared easing | Background changes are configured; alternate color is unknown | | Large English section names | `clip-path 0.6s` and `transform 0.6s` with shared easing | Reveal-related properties are configured; trigger, distance, and sequence are unverified | | Mint detail links | `padding 0.25s` with shared easing | Internal spacing changes are configured; exact hover endpoints are unavailable | | Opening news titles | `background 0.25s` | Background feedback is declared; color and trigger are not confirmed | | Menu navigation buttons | `opacity 0.2s` | Opacity feedback is declared | | Main news navigation buttons | `padding 0.25s` with shared easing | Small positional feedback is declared | | Hero photo changes | Different captured photographic states | Timing, transition, sequence, and autoplay are unknown | | Horizontal news and menu components | Offscreen items and control elements in DOM | Structure is supported; drag, swipe, autoplay, and looping remain untested | | Persistent navigation and reservation | Repeated placement in scrolled captures | Persistence is visually supported; exact positioning code is not supplied | Many sampled elements report `animation: none`. This is not proof that the whole site is static: scripts, descendants, pseudo-elements, or unsampled image components could animate. The inspection process waited for load, visible-image decoding, and sampled layout stability, and conservatively waited for finite animations. Perpetual animations were temporarily paused during readiness checks and resumed. This improves capture reliability but does not validate interaction semantics or reveal a complete animation timeline. For an adaptation, keep feedback modest and short. Use the confirmed easing where appropriate, but choose and label new hover endpoints deliberately. Any optional heading entrance should remain readable when scripting fails and should have a reduced-motion alternative. ## Surfaces | Surface | Appearance | Purpose | | --- | --- | --- | | Page canvas | White with thin vertical black boundaries | Frames the entire visit | | Hero photo shapes | Natural-color photography inside custom black contours | Main emotional focus | | Mesh bands | Fine mint and pink grid on white | Connects illustrations, photos, and lower calls to action | | Standard information area | White with generous whitespace | Keeps practical copy calm and legible | | Mint detail link | Flat `#99e7ba`, square corners, black arrow/text | Leads to deeper information | | Reservation surface | Flat `#ffd9e0`, black outline, elliptical or rectangular silhouette | Distinguishes booking destinations | | Facility/secondary link | White, photographic thumbnail, fine black rule or outline | Supports quick destination scanning | | FAQ inset | White panel surrounded by visible mesh | Separates questions from decoration | | Footer | White with gray supporting text and black artwork | Quiet conclusion to the page | No general shadow or glossy elevation system is visible in the supplied captures. Separation comes from rules, silhouettes, whitespace, and limited flat fills. ## Imagery Photography should feel like a real visit: people laughing, children playing or eating, shared food and drinks, timber structures, tent shade, and sunlit trees. Green park backgrounds and warm wood anchor the pastel interface in a physical place. The inspected hero uses close human subjects rather than a distant architectural panorama. Illustrations have uneven dark outlines, small facial details, restrained pastel fills, and a lightly textured handmade appearance. Their subjects are ordinary park activities: grilling, carrying drinks, walking a dog, pulling a wagon, and playing together. Preserve that human scale. They function as small overlapping characters within the layout, not as uniform feature icons. The illustrated map uses a related but more diagrammatic vocabulary: simple paths, tree dots, numbered circles, and small landmark drawings. Keep map labels legible and avoid treating their arrangement as abstract decoration. Use smooth image rendering for photographs and normal rendering for the supplied illustration assets. There is no evidence of an intentional pixel-art or nearest-neighbor treatment. ### Observed Asset References Only one asset path is exposed in the supplied style evidence. Other assets are identifiable visually but their URLs were not provided. | Asset | Supplied reference | Use | | --- | --- | --- | | Mesh background | `../img/cmn/bg-mesh.svg`, stylesheet-relative | Repeating pastel grid; declared tile size `504px` | | Main brand artwork | Home-link box and current screenshots; path unavailable | Pastel outlined logo | | Hero photographs | Current opening captures; paths unavailable | Large lobed crop and smaller edge crops | | Barbecue-group drawing | Hero and footer captures; path unavailable | Repeated social illustration | | Children, flower, family, and pet drawings | Current captures; paths unavailable | Overlapping decorative accents | | Illustrated park map | Desktop guide capture; path unavailable | Ten numbered BBQ sites and facility landmarks | | Deck, special-site, and café photographs | Guide and booking captures; paths unavailable | Facility navigation thumbnails | | Footer mark | Footer captures; path unavailable | Dark `cascade park` symbol and lettering | The mesh reference is relative to an unspecified stylesheet location. Do not convert it into a guessed absolute URL. Obtain authorized artwork separately; the CSS below does not bundle the site's images. ## Layout & Responsive Behavior The page remains a long facility homepage at both widths. Its hierarchy leads from atmosphere to explanation, menu selection, practical guidance, updates, answers, and booking. Dedicated About, Menu, Guide, News, and FAQ destinations coexist with the homepage's Access anchor. | Area | Desktop observation | Mobile observation | | --- | --- | --- | | Outer frame | `30px` outside margins | `6px` outside margins | | Visible navigation | Six bilingual links across the top | Closed square menu button; open state unverified | | Reservation | Upper-right oval | Lower-right persistent oval | | Hero | Centered large contour, lower side crops, vertical slogan | Right-offset clipped contour, staggered lower crops, horizontal slogan | | Ordinary text width | Section-dependent columns within a wide inner region | Common `316px` content width | | Section names | `60px`, horizontal or stacked pairings depending on region | `38px`, predominantly horizontal bilingual pairings | | Additional menu links | Large left region plus two right rows | Three stacked rows | | Guide | Map left, information right | Map region before information; internal label/value columns retained | | News collection | Heading/control block on the right of a horizontal sequence | Heading above, narrower sequence, list link below | | FAQ | Heading column beside questions | Heading above questions with an extra inner inset | | Booking panels | One large left panel and two stacked right panels | All panels stacked | | Footer | Horizontal brand/contact/top-link regions | Taller stacked arrangement | The opening news strip starts at document `y=826px` on desktop and `y=752px` on mobile. On the phone, the hero and strip occupy nearly the entire first screen, while the reservation oval overlaps the strip's lower-right area. Treat this as an observed composition; for a new implementation, verify that the floating control does not obscure essential content or keyboard focus. The mobile layout is not a uniformly scaled desktop page. The outer margin, font sizes, content order, slogan writing direction, booking-panel structure, and persistent-control placement all change independently. **Unresolved responsive behavior:** the very narrow mobile menu-plan measurements require a separate visual check. The supplied evidence also does not establish tablet layouts, landscape behavior, menu-open layout, or browser safe-area handling. The Quick Start uses an explicitly recommended `800px` breakpoint rather than claiming an original threshold. ## Do’s and Don’ts ### Do - Preserve the white canvas and exact black `1px` structural rules. - Use mint `#99e7ba` for rectangular detail links and blush `#ffd9e0` for reservation emphasis. - Keep English display type regular, large, and paired with smaller underlined Japanese headings. - Reproduce the contrast between square information panels and specially shaped hero imagery. - Place illustrations partly across image edges and patterned bands, with enough clear space around text. - Use real park photography with people, greenery, food, and timber structures. - Maintain separate roles for the compact opening news strip and richer lower news collection. - Preserve the guide's map-plus-information relationship and its compact facility rows. - Recompose the hero for mobile, including the horizontal slogan and lower reservation oval. - Keep FAQ questions as links when matching the observed homepage behavior. - Distinguish measured transition declarations from interactions that have actually been exercised. ### Don’t - Don't replace the outlined logo with ordinary typed text. - Don't round every card or add shadows to every information block. - Don't fill most of the page with pastel color; white space carries much of the design. - Don't use pale pastel text for essential labels; the inspected design uses black text on pastel fills. - Don't convert the illustrated map into a generic stock map or assume its markers are interactive. - Don't hardcode a permanent split photograph based on a single captured hero state. - Don't invent carousel speed, hover colors, menu animation, or scroll-reveal distances. - Don't reproduce the unresolved narrow mobile plan columns as a desired layout. - Don't copy a fragment link and describe it as an accordion button. - Don't infer legal ownership or production authorship from the footer logo alone. - Don't shrink all desktop spacing proportionally; the observed mobile layout uses separate decisions. ## Recommended Implementation Additions These are improvements for a new implementation, not verified features of the original site: - Give the menu button, carousel controls, social icons, and decorative-arrow links meaningful accessible names. Empty extracted text alone does not establish whether the original has an accessible name. - Make the mobile menu keyboard-operable, expose its expanded state, and ensure closed navigation cannot receive hidden focus. - Provide visible black focus outlines that remain distinguishable on white, mint, and blush. - Keep all news and plan items reachable with keyboard controls or native scrolling. If automatic movement is introduced, add pause behavior and respect reduced-motion preferences. - Correct mobile menu-card sizing before adding animation. Favor one readable card with a next-card preview or a stacked list. - Provide a text equivalent for the illustrated map and readable facility directions outside the image. - Use empty alternative text for purely decorative figures; use meaningful alternatives for informative facility photographs and diagrams. - Increase the smallest mobile helper copy from the observed `11px` where necessary, allowing cards to grow instead of forcing one-line text. - Add bottom safe-area clearance and sufficient scroll padding around the persistent reservation link. Test it against footer links and focused controls. - Keep seasonal hours, prices, and closure notices in editable content. The text observed on September 12, 2026 is not a permanent design token. - Reserve image dimensions and keep the hero's primary image loading predictably. Lazy-load appropriate lower-page imagery without hiding essential text behind reveal states. ## Agent Prompt Guide ### Quick Color Reference - Canvas: `#ffffff`. - Primary text, arrows, contours, and rules: `#000000`. - Detail-link fill: `#99e7ba`. - Reservation fill: `#ffd9e0`. - Secondary brand accent: `#c6e6fb`. - Supporting copy: `#333333`. - Mesh: fine pink vertical and mint horizontal lines; exact SVG stroke colors are unavailable. - Surface separation: rules, whitespace, and distinctive silhouettes; no general shadow system. ### Overall Prompt “Create a Japanese park BBQ facility homepage inspired by the current BBQ TERRACE visual system. Use a white canvas framed by thin black vertical rules, regular Public Sans English section names, Zen Kaku Gothic New in the Japanese text stack, and small underlined Japanese heading companions. Build an opening collage around a large four-lobed photograph, smaller asymmetric edge crops, hand-drawn park visitors, and a fine pastel grid. Use natural photographs of people enjoying food and a green park. Make detail links flat mint rectangles and booking links blush pink, including a persistent oval. Continue with About, menu previews, an illustrated facility map beside hours and compact photo links, access information, news, FAQ destination links, and a spacious illustrated footer. Recompose the collage and stack information on mobile while moving the booking oval to the lower-right corner.” ### Example Component Prompts 1. **Hero:** “Design a white, thinly framed opening collage with a large four-lobed photo contour, black image outlines, smaller lower corner photographs, and lightly textured drawings of a barbecue group and children. Place a two-line vertical Japanese slogan beside the desktop image and a horizontal underlined version below the main image on mobile. Keep the pastel mesh behind the lower imagery.” 2. **Guide:** “Create a two-column facility guide with an illustrated pale-green park map on the left and a regular 60px English title with an underlined Japanese companion on the right. Below it, align outlined category labels beside seasonal hours and three 64px-thumbnail facility rows. Finish with a square mint detail link. Stack the map above the information on mobile.” 3. **Booking group:** “Build a 1020px-wide booking group with a pink 494.5px-wide reservation panel beside two white photo-link rows. Use 1px black outlines, 31px desktop gaps, a family illustration, and an outlined round arrow. At phone width, stack the panels at 316px with 15px gaps.” 4. **FAQ:** “Place five plain Japanese question links inside a white inset panel over a fine pastel grid. Use bottom rules and right chevrons, with a large regular English FAQ heading and a small pet drawing. Keep these as links to answer destinations, with no invented inline expansion.” 5. **Mobile plan repair:** “Keep the established regular typography, white space, and mint detail link, but give each BBQ plan a readable mobile width. Show one card plus a partial next card with accessible horizontal scrolling, or stack the cards. Allow Japanese names and prices to wrap naturally without collapsing into narrow text strips.” ## Quick Start ### CSS Custom Properties This is an implementation adaptation, not extracted original CSS. Exact palette, font stacks, rule width, type endpoints, and selected component dimensions come from the supplied evidence. The `800px` breakpoint, intermediate behavior, focus styling, mesh stroke approximations, and hover endpoints are recommendations. The scaffold covers the page frame, navigation, reservation oval, primary hero contour placement, mesh, headings, detail links, facility rows, FAQ links, and lower booking group. Use separately prepared artwork for illustrations and secondary photo contours. The optional `.is-scrolled` header state requires application logic; its trigger is not supplied by the evidence. ```css :root { /* Confirmed source colors and font stacks */ --paper: #ffffff; --ink: #000000; --mint: #99e7ba; --blush: #ffd9e0; --blue: #c6e6fb; --text-support: #333333; --text-muted: #757575; --font-en: 'Public Sans', sans-serif; --font-jp: 'Public Sans', 'Zen Kaku Gothic New', sans-serif; --ease: cubic-bezier(0.45, 1, 0.6, 1); --rule: 1px solid var(--ink); /* Observed desktop endpoints */ --outer-gutter: 30px; --inner-inset: 30px; --inner-large: 1200px; --booking-width: 1020px; --body-size: 15px; --section-size: 60px; --section-jp-size: 18px; --action-size: 18px; /* Recommended approximation of the visible mesh */ --mesh-pink: #efcbe0; --mesh-green: #a9e8c0; --mesh-step: 24px; } * { box-sizing: border-box; } html { scroll-padding-top: 100px; } body { margin: 0; color: var(--ink); background: var(--paper); font: 400 var(--body-size)/2 var(--font-jp); letter-spacing: 0.03em; } button, input, select, textarea { font: inherit; } a { color: inherit; } img, svg { display: block; max-width: 100%; } .site-frame { position: relative; width: calc(100% - var(--outer-gutter) - var(--outer-gutter)); margin-inline: auto; border-inline: var(--rule); } .inner { width: 100%; max-width: var(--inner-large); margin-inline: auto; padding-inline: var(--inner-inset); } .site-header { height: 102px; } .brand { position: absolute; z-index: 31; top: 36px; left: 59px; width: 150px; height: 100px; transition: opacity 300ms var(--ease); } .brand img { width: 100%; height: 100%; object-fit: contain; } .nav-rail { position: fixed; z-index: 30; top: 0; right: var(--outer-gutter); left: var(--outer-gutter); background: var(--paper); } .desktop-nav { display: flex; justify-content: center; padding-block: 30px 5px; } .desktop-nav a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px; text-decoration: none; } .desktop-nav .en { font: 400 20px/1 var(--font-en); letter-spacing: 0; } .desktop-nav .jp { font-size: 10px; line-height: 1; } .nav-rail.is-scrolled { border-bottom: var(--rule); } .nav-rail.is-scrolled .desktop-nav { padding-block: 5px; } .reserve-float { position: fixed; z-index: 50; top: 24px; right: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 135px; height: 78px; color: var(--ink); background: var(--blush); border: var(--rule); border-radius: 50%; text-decoration: none; line-height: 1; transition: background 300ms var(--ease); } .reserve-float .en { font: 400 18px/1 var(--font-en); } .reserve-float .jp { font-size: 10px; } .menu-toggle { display: none; } .mesh { background-color: var(--paper); background-image: linear-gradient(to right, var(--mesh-pink) 1px, transparent 1px), linear-gradient(to bottom, var(--mesh-green) 1px, transparent 1px); background-size: var(--mesh-step) var(--mesh-step); background-position: top center; } .hero { position: relative; isolation: isolate; height: 688px; margin-top: 36px; overflow: hidden; } .hero .mesh { position: absolute; z-index: -1; inset: auto 0 0; height: 164px; } .hero-main { position: absolute; top: 0; left: 50%; width: 660px; max-width: none; transform: translateX(-50%); } .hero-copy { position: absolute; top: 70px; right: 201px; display: flex; flex-direction: row-reverse; align-items: flex-start; gap: 14px; margin: 0; font-size: 27px; line-height: 1; letter-spacing: 0.06em; } .hero-copy span { writing-mode: vertical-rl; padding-right: 19px; border-right: var(--rule); } .section-heading { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 36px; margin-bottom: 48px; } .section-heading .en { margin: 0; font: 400 var(--section-size)/1.1 var(--font-en); letter-spacing: 0; } .section-heading .jp { margin: 0; padding-bottom: 4px; border-bottom: var(--rule); font-size: var(--section-jp-size); font-weight: 400; line-height: 1.1; } .prose { line-height: 2.2; } .detail-link { display: flex; align-items: center; justify-content: flex-end; gap: 8px; width: 100%; min-height: 52.8px; padding: 12px 36px; background: var(--mint); border-radius: 0; font-size: var(--action-size); line-height: 1.6; text-decoration: none; transition: padding 250ms var(--ease); } .guide-grid { display: grid; grid-template-columns: minmax(0, 585fr) minmax(0, 456fr); align-items: start; gap: 99px; padding-block: 135px 150px; } .guide-map img { width: 100%; height: auto; } .guide-info-row { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 45px; margin-bottom: 60px; } .guide-label { align-self: start; margin: 0; padding: 5px 8px; border: var(--rule); text-align: center; font-weight: 400; } .facility-list { display: grid; gap: 24px; } .facility-link { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 65px; border-bottom: var(--rule); text-decoration: none; line-height: 1.8; } .facility-link img { width: 64px; height: 64px; object-fit: cover; } .faq-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 24px; border-bottom: var(--rule); font-size: 16px; line-height: 1.6; letter-spacing: 0.02em; text-decoration: none; } .booking-grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 31px; width: min(calc(100% - 60px), var(--booking-width)); margin: -90px auto 0; } .booking-reserve { position: relative; grid-row: span 2; min-height: 271px; padding: 36px 48px; background: var(--blush); border: var(--rule); text-decoration: none; } .booking-reserve .en { display: block; margin-bottom: 10px; font: 400 48px/1 var(--font-en); letter-spacing: 0; } .booking-reserve .jp { font-size: 18px; line-height: 1.3; } .booking-reserve .art { position: absolute; right: 86px; bottom: 36px; width: 195px; } .round-arrow { display: grid; place-items: center; width: 52px; height: 48px; border: var(--rule); border-radius: 24px; } .booking-reserve .round-arrow { position: absolute; right: 30px; bottom: 26px; } .booking-feature { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 30px; min-height: 120px; padding-right: 30px; background: var(--paper); border: var(--rule); text-decoration: none; } .booking-feature img { width: 118px; height: 118px; object-fit: cover; } .booking-feature .title { display: block; font-size: 18px; line-height: 1.3; } .booking-feature .helper { display: block; margin-top: 12px; color: var(--text-support); font-size: 13px; line-height: 1.5; } /* Recommended feedback endpoints; original endpoints are unavailable. */ @media (hover: hover) { .brand:hover { opacity: 0.75; } .reserve-float:hover { background: var(--paper); } .detail-link:hover { padding-right: 28px; } } :where(a, button):focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; } /* Recommended breakpoint, matching the inspected mobile proportions. */ @media (max-width: 800px) { :root { --outer-gutter: 6px; --body-size: 14px; --section-size: 38px; --section-jp-size: 14px; --action-size: 15px; } html { scroll-padding-bottom: 90px; } .site-header { height: 95px; } .brand { top: 18px; left: 23px; width: 90px; height: 60px; } .nav-rail { display: none; } .menu-toggle { position: fixed; z-index: 60; top: 0; right: 7px; display: grid; place-items: center; width: 50px; height: 50px; padding: 0; background: var(--paper); border: var(--rule); } .reserve-float { top: auto; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 105px; height: 60px; } .reserve-float .en { font-size: 14px; } .hero { height: 657px; margin-top: 0; } .hero .mesh { height: 171px; } .hero-main { left: 16.76%; width: 89.36%; transform: none; } .hero-copy { top: 352px; right: auto; left: 56.5%; flex-direction: column; gap: 7.28px; font-size: 20.8px; line-height: 1.4; } .hero-copy span { writing-mode: horizontal-tb; padding: 0 0 4px; border-right: 0; border-bottom: var(--rule); } .section-heading { gap: 12px 18px; margin-bottom: 30px; } .detail-link { min-height: 48px; padding: 12px 24px; } .guide-grid { grid-template-columns: 1fr; gap: 45px; padding-block: 45px 60px; } .guide-info-row { grid-template-columns: 82px minmax(0, 1fr); gap: 25px; margin-bottom: 40px; } .guide-info-row, .facility-link { font-size: 13px; } .facility-list { gap: 20px; } .facility-link { gap: 15px; } .faq-link { gap: 15px; padding-block: 18px; font-size: 14px; } .booking-grid { grid-template-columns: 1fr; gap: 15px; } .booking-reserve { grid-row: auto; min-height: 184px; padding: 24px 30px; } .booking-reserve .en { font-size: 30px; } .booking-reserve .jp { font-size: 14px; } .booking-reserve .art { right: 70px; bottom: 20px; width: 130px; } .booking-reserve .round-arrow { right: 16px; bottom: 15px; width: 46px; height: 42px; } .booking-feature { grid-template-columns: 70px minmax(0, 1fr) auto; gap: 16px; min-height: 72px; padding-right: 12px; } .booking-feature img { width: 70px; height: 70px; } .booking-feature .title { font-size: 14px; } .booking-feature .helper { margin-top: 6px; font-size: 12px; } } @media (prefers-reduced-motion: reduce) { .brand, .reserve-float, .detail-link { transition: none; } } ``` The mobile helper text above is intentionally `12px`, slightly larger than the observed `11px`. Card heights are minimums so wrapped text can remain readable. The CSS also adds recommended safe-area clearance; no original safe-area rule was supplied. ### Primary Photo Contour Example This inline SVG provides a usable approximate four-lobed crop with a separate thin outline. Its path is newly authored for this reference and is not the original site's path. Replace the illustrative image filename with an authorized photograph. Use unique IDs if placing multiple copies on one page. ```html Friends sharing drinks at a park barbecue ``` Choose the image focal point for the actual people in each crop. The example's centered crop is a starting point, not a guarantee that faces remain visible. Treat decorative illustration layers separately from the informative image's accessible name. ### Tailwind v4 Token Mapping Optional aliases for a project already using Tailwind v4. This does not imply that the original website uses Tailwind. Define the custom properties above first. ```css @theme inline { --color-bbq-paper: var(--paper); --color-bbq-ink: var(--ink); --color-bbq-mint: var(--mint); --color-bbq-blush: var(--blush); --color-bbq-blue: var(--blue); --color-bbq-support: var(--text-support); --font-sans: var(--font-jp); --font-display: var(--font-en); --text-body: var(--body-size); --text-section: var(--section-size); --text-section-label: var(--section-jp-size); --text-action: var(--action-size); --spacing-page-gutter: var(--outer-gutter); --spacing-content-inset: var(--inner-inset); --radius-reservation: 50%; } ``` ## Sources & Evidence - **Inspected original and final homepage:** [https://cascade-bbq.jp/](https://cascade-bbq.jp/). The supplied record reports HTTP 200 and identical original/final URLs. - **Inspection date:** September 12, 2026. Evidence-bundle retrieval timestamp: `2026-09-12T13:12:52.026Z`. Individual screenshot timestamps were not supplied. - **Desktop evidence:** `1440 × 1000` CSS-pixel viewport; three supplied current-page captures covering the opening, facility guide, and lower booking/footer area. Recorded document height approximately `8326.42px`. - **Mobile evidence:** `390 × 844` CSS-pixel viewport; two supplied current-page captures covering the opening and lower booking/footer area. Recorded document height approximately `8260.95px`. - **Rendered DOM and computed styles:** page text, link destinations, element rectangles, font declarations, colors, padding, gaps, corner radii, transitions, and the listed custom properties at both widths. - **Interaction evidence:** scrolled screenshots establish persistent visible controls. Link records establish navigation destinations. No supplied click, hover, menu-opening, slider-operation, or booking-flow result establishes activated behavior. - **Capture limitations:** readiness checks waited for load, image decoding, and sampled stability, with finite-animation handling and temporary pausing of perpetual animations. These checks do not prove semantic completeness. SharedWorkers and service workers were disabled during inspection. - **Analysis limits:** no additional browsing or file access was performed. Original image URLs, complete stylesheets, exact breakpoints, mask paths, menu-open appearance, carousel timing, and several lower-section visual surfaces remain unavailable. The anomalous mobile menu measurements require independent verification. This reference describes the supplied current homepage evidence. Approximate geometry, accessibility additions, CSS scaffolding, and reusable prompts are explicitly implementation guidance.