# ballaholic Hub FUKUOKA — Style Reference

> A basketball community space expressed through bright orange, generous white space, and the everyday texture of a converted warehouse.

**Website:** [hub.ballaholic.jp](https://hub.ballaholic.jp/)
**Original URL:** https://hub.ballaholic.jp/
**Final URL:** https://hub.ballaholic.jp/
**Theme:** a white main canvas, an orange feature area, a charcoal access section, and a black footer; these are section treatments, not verified selectable themes.
**Inspected:** September 12, 2026, from the supplied browser observation recorded at 12:42:50.255 UTC / 21:42:50.255 JST.
**Viewports:** desktop 1440 × 1000 and mobile 390 × 844 CSS pixels. The measured document widths were 1425px and 375px respectively.
**Scope:** the current facility homepage: opening composition, service index, introductory statement, calendar, private-party information, topics, eight facility features, accommodation promotion, pricing and FAQ text, access information, and footer. Visual captures cover the desktop opening, part of the feature sequence, desktop access/footer, mobile opening, and mobile page ending. Other sections are supported by rendered text and selected computed measurements.

ballaholic Hub FUKUOKA presents a place to play, stay, train, work, and socialize. Its homepage combines a distinctive visual introduction with practical visit-planning information. The calendar, service anchors, accommodation links, pricing, and access details are integral to the page rather than secondary material beneath a single conversion pitch.

The opening places a large orange Hub mark in a quiet white field beside tall basketball imagery. A vertical Japanese statement adds a narrow, emphatic edge. Farther down, oversized photographs cross an orange-and-white background boundary while compact text explains each service. The closing sections become darker and more functional: a warehouse exterior, directions, contact buttons, and a small directory of related brands.

The character comes from this contrast of generous composition and compact information. Preserve the photographic setting, the asymmetry, the orange accents, and the clear English/Japanese type hierarchy when reusing the design.

## How to Read This Reference

- **Measured** means a value appears in the supplied computed styles or element rectangles. Measurements describe the recorded state, including any transforms affecting bounding boxes.
- **Source-declared** means a custom property was present. Its existence alone does not prove that it controls a visible component.
- **Derived** means calculated from supplied values. These calculations are labeled separately from direct measurements.
- **Estimated** means visually approximated from the original-page captures. Image boundaries and corner radii without corresponding element records fall into this category.
- **Recommended** means guidance for a new implementation. The CSS below is an adaptation, not a recovered stylesheet.
- **Font families** are reported from computed declarations. Individual font-file downloads and the actual face used for every glyph were not independently inspected.
- **Interaction evidence** includes control elements, link destinations, transition declarations, and captured states. Menu opening, calendar navigation, gallery input, hover results, and external destinations were not exercised in the supplied record.

The 15px difference between viewport width and document width matters. A width computed from `100vw` can differ from one computed inside the document container. Do not silently treat 390px as the width of the mobile content canvas.

## Tokens — Colors

### Default Palette

| Name | Value | Source or implementation token | Role and evidence |
| --- | --- | --- | --- |
| Hub Orange | `#fe4f00` | Source `--color-orange`; alias `--hub-orange` | Measured heading and active-control color; visually dominant in the wordmark, top rule, feature background, and small arrows |
| White | `#ffffff` | Source `--color-white`; alias `--hub-white` | Main visible canvas, footer logo tiles, and reversed access-section text |
| Black | `#000000` | Measured text color; alias `--hub-ink` | Main text, outlined controls, active feature-gallery dots, and the visible footer field |
| Charcoal | `#333333` | Source `--color-gray-dark`; alias `--hub-charcoal` | Matches the dark access field and compact feature navigation; texture modifies the visible surface |
| Contact Green | `#4cc764` | Source `--color-green`; alias `--hub-line` | Measured LINE-link background; visually used for contact pills and the circular contact shortcut |
| Light Gray | `#efefef` | Source `--color-gray-light` | Measured calendar navigation-button background |
| Medium Gray | `#c3c3c3` | Source `--color-gray-medium` | Declared supporting neutral; specific visible assignments are not established by the supplied samples |
| Gallery Gray | `#cccccc` | Measured button background | Inactive dots beneath feature photography |
| Index Peach | `#fecbb2` | Measured button background | Inactive service-index dots; the active dot uses Hub Orange |

Orange is both a brand color and a large compositional field. Green has a narrower role: contact through LINE. Most ordinary information remains black on white. This distribution keeps the page recognizable even when photographs introduce timber, amber lighting, concrete, blue clothing, and outdoor sky colors.

The HTML and body backgrounds were recorded as transparent. The captures establish the visible white canvas; transparent computed backgrounds do not override what is visible through ancestors or other layers.

### Functional Calendar Colors

| Meaning | Value | Evidence |
| --- | --- | --- |
| Regular opening, labeled `通常営業` | `#e08600` | Measured event-block background |
| Closed, labeled `休み` | `#9a9a9a` | Measured event-block background |
| School, labeled `スクール` | `#3788d8` | Measured event-block background |
| Calendar rules | `#dddddd` | Source `--fc-border-color`; actual rule geometry was not included |
| Calendar Beige | `#f1f0d3` | Source `--color-calendar-beige`; its visible assignment was not established |

Keep the calendar's category colors local to scheduling. Its ochre opening blocks are distinct from the brighter brand orange.

The property list also contains numerous CMS color, gradient, and shadow presets. Their presence does not establish a rainbow palette, gradient treatment, or elevation system for this design.

## Tokens — Typography

### English Display and Utility

- **Computed family:** `tt-commons-pro, sans-serif`.
- **Source alias:** `--font-type-en: "tt-commons-pro", sans-serif`.
- **Display weight:** `800` for major section names and feature titles.
- **Utility weight:** predominantly `500` for navigation, dates, metadata, and the small opening caption.
- **Tracking:** consistently about `0.02em` in the sampled elements.
- **Character:** bold, approachable sans-serif headings supported by comparatively small navigation and metadata.

The large Hub wordmark is artwork. Do not recreate it by typing “Hub” in the display font. The widely spaced FUKUOKA line belongs to that visual identity and was not separately measured as ordinary text.

### Japanese Content

- **Computed family:** `"Noto Sans JP", sans-serif` on the sampled Japanese paragraphs, subheadings, event labels, and standard pill links.
- **Paragraph weight:** `500`.
- **Subheading and button weight:** `700`.
- **Body leading:** commonly `1.75`.
- **Tracking:** commonly `0.02em`.

Japanese explanatory text is compact but comfortably spaced vertically. Preserve the distinction between a short bold service proposition and its smaller explanatory paragraph.

### Inherited Body Family

The body declares `ten-mincho-text, serif` at `16px / 24px`, weight `400`. Many wrappers and the visually hidden H1 inherit it, while the sampled visible English and Japanese content explicitly uses the sans-serif families above.

This inherited declaration is not evidence that the visible page is predominantly Mincho. Likewise, a wrapper's computed family does not establish the font of every child or embedded graphic.

### Type Scale

Values below are computed CSS sizes, before any inferred ancestor scaling.

| Role | Desktop size / line height | Mobile size / line height | Weight | Family | Tracking |
| --- | --- | --- | --- | --- | --- |
| Major section title: Calendar, Topics, Features | `52px / 52px` | `32px / 32px` | `800` | English display | `0.02em` |
| Feature title | `40px / 52px` | `32px / 48px` | `800` | English display | `0.02em` |
| Private Party title | `40px / 52px` | `32px / 48px` | `800` | English display | `0.02em` |
| Introductory Japanese statement | `22px / 38.5px` | `20px / 35px` | `700` | Japanese content | `0.02em` |
| Sampled party subheading and topic title | `20px / 35px` | `18px / 31.5px` | `700` | Japanese content | `0.02em` |
| General explanatory paragraph | `16px / 28px` | `16px / 28px` | `500` | Japanese content | `0.02em` |
| Feature paragraph | `14px / 24.5px` | `14px / 24.5px` | `500` | Japanese content | `0.02em` |
| Standard outlined action | `16px / 24px` | `16px / 24px` | `700` | Japanese content | `0.02em` |
| Header navigation | `16px / 24px` | `14px / 21px` | `500` | English utility | `0.02em` |
| Topic date and venue | `14px / 21px` | `13px / 19.5px` | `500` | English utility | `0.02em` |
| Feature navigation labels | `14px / 21px` | `13px / 19.5px` | `500` | English utility | `0.02em` |
| Opening caption | `12px / 18px` | `11px / 16.5px` | `500` | English utility | `0.02em` |
| Calendar date range | `24px / 36px` | `22px / 33px` | `500` | English utility | `0.02em` |
| Calendar event text | `13px / 19.5px` | `12px / 18px` | `500` | Japanese content | `0.02em` |

**Transform qualification:** a desktop feature title has a computed 52px line height but a one-line rectangle of approximately 46.8px. A standard feature action measures approximately 46.8px high, compared with a 52px unscaled action elsewhere. Mobile feature paragraphs similarly have 283.5px-wide rectangles inside a nominal 315px content width. These values are consistent with an effective `0.9` scale. The transform owner and its relationship to scrolling were not supplied.

At that scale, a computed 40px desktop feature title would appear approximately 36px, and a computed 32px mobile title approximately 28.8px. Do not substitute those apparent sizes into every source token or permanently shrink all text.

The vertical opening statement appears approximately 28px on desktop and 20px on mobile. These are screenshot estimates; no corresponding text-style record was supplied.

## Tokens — Spacing & Shapes

**Underlying system:** viewport-derived grid variables, explicit pixel typography, and generous section spacing.
**Visual density:** sparse at the opening, compact within information blocks, and spacious between large photographs.

### Responsive Grid

The declared desktop grid uses a 1440px reference width, 46px reference side margins, 20px reference gutters, and twelve columns. Mobile variables change to a 390px reference width, 30px reference margins, 16px reference gutters, and four columns.

The declared formulas can be expressed as:

```css
/* Equivalent expression of the supplied grid variables */
--side: calc(100vw * var(--base-side-margin) / var(--base-width));
--gutter: calc(100vw * var(--base-gutter) / var(--base-width));
--column: calc(
  (100vw - 2 * var(--side) - (var(--base-grid-number) - 1) * var(--gutter))
  / var(--base-grid-number)
);
```

| Measurement | Desktop | Mobile | Evidence level |
| --- | --- | --- | --- |
| Reference width | `1440` | `390` | Source-declared |
| Grid-count variable | `12` | `4` | Source-declared |
| Side padding at the inspected viewport | `46px` | `30px` | Measured |
| General grid gutter | `20px` | `16px` | Source-declared and sampled |
| Document width | `1425px` | `375px` | Measured |
| Width inside both side paddings | `1333px` | `315px` | Derived from measured widths |
| Nominal column from the `100vw` formula | `94px` | `70.5px` | Derived; not necessarily the rendered track width |
| Sampled introductory section tracks | Twelve at approximately `92.75px` | Twelve at approximately `11.5781px` | Measured grid templates |

The mobile grid-count variable does not mean every component changes to four physical tracks. The sampled introductory section still reports twelve tracks. Component rules and global grid aliases must be distinguished.

For the measured desktop container, twelve columns of 92.75px and eleven 20px gaps fit the 1333px inner width. Starting at the second column gives `x = 158.75px`, a recurring content alignment. A six-column span is 656.5px, closely matching the visible access photograph.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Header text top position | `44px` | `44px` | Measured |
| Menu icon-to-label gap | `36px` | `20px` | Measured |
| Gap between Calendar and Access labels | Approximately `46px` | Approximately `12.45px` | Derived from rectangles |
| Service-index track gap | `20px` | `10px` | Derived from adjacent link positions |
| Service-index card padding, top/right/bottom/left | `20 / 30 / 30 / 30px` | `20 / 20 / 28 / 28px` | Measured |
| Standard pill padding, top/right/bottom/left | `10 / 48 / 14 / 22px` | Same | Measured |
| Topic row internal column gap | `60px` | Single column | Measured |
| Gap between topic rows | `60px` | `40px` | Derived from rectangles |
| Access photo-to-copy gap | Approximately `60px` | Stacked ending visible | Screenshot estimate |
| Access section vertical padding | Approximately `120px` | Complete section not pictured | Screenshot estimate |
| Footer logo-tile gaps | Approximately `16px` | Approximately `16px` | Screenshot estimate |
| Footer top padding | Approximately `80px` | Approximately `80px` | Screenshot estimate |

Large document coordinates identify section positions in the recorded page; they are not reusable spacing tokens. In particular, transformed and persistent elements can have coordinates that differ from a later screenshot of the same component.

### Border Radius

| Element | Value | Evidence |
| --- | --- | --- |
| Calendar event blocks | `3px` | Measured |
| Service-index links | `10px` | Measured |
| Private-party LINE link | `10px` | Measured |
| Hero and large feature media | Approximately `20px` | Screenshot estimate |
| Access photograph | Approximately `10px` | Screenshot estimate |
| Standard action links | Full pill | Measured extremely large radius; use `999px` in an adaptation |
| Contact shortcut | Circle | Measured `60 × 60px` with full rounding |
| Gallery indicators | Circle | Measured `50%` radius |
| Footer logo tiles | Approximately `2px` or nearly square | Screenshot estimate |

There is no visible general-purpose shadow system in the supplied captures. Photographic edges, background changes, outlines, and whitespace provide separation.

### Layout Measurements

| Element | Desktop | Mobile | Qualification |
| --- | --- | --- | --- |
| Opening Hub artwork | Approximately `272 × 162px`, starting near `159, 319` | Approximately `195 × 117px`, starting near `150, 226` | Screenshot estimates |
| Opening media | Approximately `656px` wide, starting near `610, 44`; lower edge outside the capture | Approximately `251 × 403px`, starting near `94, 382` | Screenshot estimates |
| Opening caption | `108.14 × 36px`, at `46, 918` | `99.13 × 33px`, at `30, 309.41` | Measured |
| Service-index link | Approximately `436 × 306.38px` | `315 × 298.95px` | Measured |
| Index indicator | `8 × 8px` | `5 × 5px` | Measured |
| Standard Topics action | Approximately `179.77 × 52px` | Same | Measured |
| Feature accommodation action | Approximately `216 × 46.8px` | Approximately the same | Measured transformed rectangle |
| Access photo | Approximately `656 × 417px` | Approximately `315 × 198px` | Screenshot estimates |
| Footer logo tile | Approximately `160 × 72px` | Approximately `150 × 68px` | Screenshot estimates |
| Contact shortcut | `60 × 60px` | `60 × 60px` | Measured |
| Document height | Approximately `15907px` | Approximately `16057px` | Recorded browser measurement |

## Components

### Persistent Header and Top Rule

**Role:** quick access to visit-planning information and the menu.

The opening header contains Calendar and Access at the upper left, with a small two-line menu symbol and the word Menu at the upper right. The labels remain restrained: 16px desktop and 14px mobile, both medium weight. No filled navigation bar surrounds them in the opening capture.

The header wrapper has a measured height of zero while its controls sit at `y = 44px`. This indicates that the controls do not establish ordinary header flow. Later captures retain the upper-right Menu position and show a compact Hub identity at the upper left, consistent with persistent header behavior. The exact positioning declarations and switch threshold were not included.

A thin orange rule runs across the top of the captured document area, approximately 5px high. Its presence is visible across the supplied states. A progress-related function was not established.

The Menu element is a button. Its expanded panel, contents, focus behavior, and opening motion are unverified.

### Opening Composition

**Role:** establish the brand and the atmosphere of the facility before introducing its services.

Desktop has three visual zones:

1. A broad white area with the orange Hub artwork, offset inward from the left edge.
2. A tall, rounded media frame showing basketball activity in front of an indoor court and bar.
3. A narrow outer rail with an orange basketball symbol above the vertical statement `バスケットボールをハブにつながろう`.

The small caption, “Join the Hub / through basketball!”, sits near the lower-left viewport edge. Only the word Hub is orange. Its position is separate from the large wordmark rather than directly beneath it.

On mobile, the composition is deliberately rearranged. After a large amount of top whitespace, the caption and smaller Hub artwork share a row, with the artwork to the right. Below, the vertical statement moves to the left of the media. The approximately 251px-wide media frame is narrower than the 315px inner content width, leaving room for the statement and its separation.

The desktop media continues below the bottom edge of the supplied opening capture. Its complete desktop aspect ratio is not directly visible. Mobile provides an approximately `5:8` frame; reusing that ratio on desktop is an implementation recommendation rather than a measured desktop rule.

A semantic H1 containing the facility name is present in a `1 × 1px` rectangle. The visible identity is carried by artwork, so a new implementation should preserve an accessible page heading without adding a second oversized text title.

### Service Index

**Role:** provide direct access to eight activities before the longer feature sequence.

The rendered links contain an ordinal, an English name, and a Japanese descriptor. Their targets are:

| Number | Service | Homepage anchor |
| --- | --- | --- |
| 01 | Basketball Court | `#basketball-court` |
| 02 | PLAY & STAY | `#play-and-stay` |
| 03 | Training Gym | `#training-gym` |
| 04 | Co-working Space | `#co-working-space` |
| 05 | Bar Counter | `#bar-counter` |
| 06 | School | `#school` |
| 07 | Event | `#event` |
| 08 | ballaholic Shop | `#ballaholic-shop` |

The rectangles form a horizontal track with offscreen items, not a wrapped desktop grid. Desktop links are approximately 436px wide with 20px gaps. Mobile links are 315px wide with 10px gaps; one recorded item aligns exactly with the 30px content inset.

Eight small buttons sit beneath the index. Their active color is orange and their inactive color is pale peach. Different items are active in the two viewport records. This establishes a stateful index, but does not determine whether its state changes through autoplay, dragging, clicks, or another mechanism.

Padding and 10px corner rounding are measured. The supplied element samples do not identify the complete interior imagery or border styling, so those details should not be invented from the link labels alone.

### Introductory Statement

**Role:** connect the service index to the community-oriented message of the venue.

The DOM contains individually separated letters spelling “Hub a Nice Day!” and a bold Japanese statement, `バスケがあれば 最高の１日に！`. The English title changes from 52px desktop to 32px mobile; the Japanese statement changes from 22px to 20px.

The enclosing section is unusually spacious: approximately 1425px high on desktop and 1099.6px on mobile in the recorded layout. On mobile, the sampled text occupies the right-hand portion of the inner content area. Full artwork and any letter animation are outside the supplied visual evidence.

Preserve the contrast between this expressive pause and the practical calendar that follows. Do not infer a specific letter-by-letter animation from the fragmented text extraction.

### Weekly Calendar

**Role:** communicate irregular opening days, normal hours, and booked activities.

The desktop layout places an orange Calendar heading and a short explanatory paragraph on the left, with the weekly timetable to the right. Mobile places the heading and explanation above the controls and timetable.

The observed week is September 7–13, 2026. A centered date-range heading sits between two circular buttons. Their measured diameter changes from 46px on desktop to 26px on mobile. Seven day columns remain present at the mobile width; the component does not become an agenda list in the recorded DOM.

Time labels run from 10:00 through 21:00. Regular opening blocks are ochre, closed periods gray, and the school event blue. Labels are black in the sampled blocks. Blocks use small 3px corners rather than large card rounding.

Desktop regular-opening rectangles are approximately 60px wide. Mobile equivalents narrow to about 29.84px; a overlapping school entry can be only about 14.92px wide. This is a dense information component with different constraints from the spacious feature sequence.

Event links point to Google Calendar. Previous/next button activation and event-opening behavior were not tested. For reuse, preserve text labels and provide an accessible alternative for narrow event columns.

### Private-Party Information

**Role:** explain whole-venue use and provide a contact route.

The measured desktop section uses the page grid. Its copy includes an orange Private Party title, a bold Japanese subheading, a 16px explanatory paragraph, and a green LINE link. Two associated captions identify wedding after-parties and mini-basketball celebrations. The recorded layout places those captioned areas beside the copy; their photographs are not included in the supplied visual captures.

Mobile changes this section to block layout, with full-width text and vertically separated captioned areas. The contact link remains `270 × 70px` on both devices and is centered within the mobile content width. Its 10px corners distinguish it from the fully rounded access-section contact pill.

### Topics Rows

**Role:** expose event-related editorial updates.

The desktop section separates the Topics heading and its listing action from the linked story rows. Each sampled row is 882px wide and uses two 411px columns separated by 60px. The title, date, and venue appear in the information column. The supplied records establish this geometry, but not the complete appearance of each media asset.

Mobile moves each row to a single 315px column. Titles reduce from 20px to 18px; date and venue metadata reduce from 14px to 13px. The heading and the outlined `トピックス一覧` action share the section's top row in the mobile measurements.

Keep titles and metadata grouped, and let the media area carry visual weight. The measured anchor itself has square corners and no recorded surface fill; avoid assuming every topic is a rounded, elevated card.

### Feature Row and Image Gallery

**Role:** show the experience of each service through large facility photography and concise explanations.

This is the most distinctive interior component in the supplied desktop captures. A textured orange field occupies approximately 42% of the document width. The remaining field is white. Large rounded photographs cross that boundary, while the explanatory text sits to the right.

The visible Basketball Court and PLAY & STAY rows both place their image on the left. The sequence is not evidenced as an alternating left/right pattern. Image and text positions vary between the DOM sample and the later scrolled capture, so their absolute coordinates should not be frozen into a universal row template.

The anatomy is:

1. A large photographic gallery with rounded corners.
2. Small circular pagination buttons beneath the image.
3. An outlined circular ordinal above the text.
4. An orange English title, sometimes broken across multiple lines.
5. A short bold Japanese proposition where the source provides one.
6. A smaller Japanese explanatory paragraph.
7. One or more outlined action links when appropriate.

The number badge is approximately 25.2px across in the transformed measurements, consistent with a 28px base size at 0.9 scale. Feature titles compute to 40px desktop and 32px mobile, weight 800. Paragraphs compute to 14px with 24.5px leading on both devices.

The photographed accommodation row shows timber bunks, bedding, and shelving. The court row shows people actively playing. These specific spaces explain the facility more effectively than decorative illustrations would.

Most recorded feature galleries have three indicators; accommodation has four. Feature indicators use black for the active item and gray for inactive items, unlike the orange-and-peach service index.

Mobile geometry places the gallery indicators above a centered number and title. The explanatory paragraph occupies a centered 283.5px transformed rectangle, and action links are centered. The supplied mobile screenshots do not show this section's complete background treatment.

### Feature Navigation Strip

**Role:** maintain orientation within the long eight-service sequence and offer a way past it.

The desktop feature capture shows a compact charcoal strip near the lower-left corner, approximately `558 × 39px`, with a small corner radius. It exposes part of a horizontal list rather than displaying all eight destinations simultaneously.

Each item combines a number and a service name. The current item is orange; other labels are white with quieter numerals. A separate Skip area sits at the right with an orange arrow. Its observed destination is `#play-and-stay-section`, the separate accommodation promotion following the feature sequence.

The element measurements show viewport-relative positions near the bottom edge, and the strip is visible during the feature capture. Its reveal threshold, scrolling synchronization, and exact hiding behavior were not supplied.

In a new implementation, keep the horizontally clipped list and the Skip control independently operable. Do not allow a decorative mask to hide the keyboard-focused item.

### Outlined Action Link

**Role:** link to a detail page, listing, reservation route, or external resource.

The standard action combines a rounded outline, a bold label on the left, and a small orange arrow to the right. The sampled padding is `10px 48px 14px 22px`, reserving more room on the arrow side. Unscaled examples measure 52px high. The visible outline appears approximately 2px thick; that thickness is a screenshot estimate.

Examples include `宿泊の詳細・ご予約`, `イベント一覧`, and `オンラインショップ`. On the charcoal access field, the outline and label are white while the arrow remains orange.

Several link texts occur twice in extraction while only one label is visible in screenshots. This may reflect layered label markup, but its hover animation is unverified. A reusable implementation needs one accessible label; any duplicate visual layer should be hidden from assistive technology.

### Accommodation, Price, and FAQ

**Role:** provide dedicated stay information and practical admission guidance after the feature sequence.

A separate PLAY & STAY section repeats the accommodation proposition and links to `/play-and-stay/`. Its recorded height is approximately 1064px desktop and 1137px mobile. The existence and content of this section are established, but its full photographic composition is not shown in the supplied captures.

Price text distinguishes weekday and weekend duration tiers, older visitors, and a Free category for younger children with accompanying-guardian conditions. Treat these as dated operational content, not permanent design tokens. The supplied element sample does not establish the price typography, panel fills, or comparison-table geometry.

FAQ is presented in the rendered text with an explanatory sentence and a link labeled `よくあるご質問`. That link points to an external FAQ destination. There is no evidence here of an inline accordion, expandable answers, or a modal.

### Access Section

**Role:** turn interest into a practical visit.

The desktop access section uses a charcoal surface with fine grain. A large exterior photograph sits on the left, with white information on the right. The photograph is approximately `656 × 417px`; its subject is the corrugated-metal building and entrance signage.

The information stack contains the facility name with an Instagram symbol, postal address, an underlined map link, four transport/parking lines, an outlined calendar action, and a filled green LINE action. The two visible actions are approximately 252px wide and 52px high, with a roughly 16px vertical gap.

The two-column group is centered within a width of approximately 1107.5px. The image-to-copy gap is approximately 60px, with about 120px of section padding above and below the photograph.

The mobile ending shows the contact pill above a full-width exterior photograph within 30px side insets. The address and transport text exist in the mobile DOM but fall outside this ending crop. Their absence from that screenshot is not evidence that mobile removes them.

The compact header logo overlaps nearby content in the mobile ending capture. A new implementation should reserve enough clearance for persistent controls rather than treating that overlap as a required visual motif.

### Footer Brand Directory

**Role:** connect the venue to its related basketball brands and projects.

A black field follows the charcoal access section. Six white logo tiles appear in this order: ballaholic, SOMECITY, PLAYGROUND GAMES, HOMECOURT, Asphalt Roots, and PLAY & STAY.

Desktop arranges them in three columns and two rows. Mobile changes to two columns and three rows. Tiles are approximately `160 × 72px` on desktop and `150 × 68px` on mobile, with approximately 16px gaps. Logos remain centered and uncropped inside the white rectangles.

The original page includes the linked footer text `(c) OUTNUMBER`. It appears toward the right on desktop and centered below the tiles on mobile. Maintain the footer's generous empty black space rather than compressing it into a crowded navigation bar.

### Floating LINE Shortcut

**Role:** keep the contact destination readily available while browsing.

The control is a 60px green circle containing a white speech-balloon mark. In the scrolled captures it sits approximately 20px above the viewport bottom. Its right inset is approximately 20px from the desktop document edge and 10px from the mobile document edge.

In the initial DOM samples its top edge is at the viewport bottom—1000px desktop and 844px mobile—so it is outside the visible opening frame. Later captures show it fully visible. The exact trigger and movement path are unverified.

The link destination is present, but accessible-name attributes were not included in the supplied evidence. Verify the name rather than assuming that an empty extracted text value means the control has none.

## Tokens — Motion & Interaction

### Declared Transitions

| Target or token | Supplied value | What is established |
| --- | --- | --- |
| Calendar and Access links | `0.5s cubic-bezier(0.22, 0.87, 0.5, 1)` for color-related properties | Transition declaration; resulting hover colors were not captured |
| Service-index links | `0.5s cubic-bezier(0.22, 0.87, 0.5, 1)` | Transition declaration; changed properties and end states were not exercised |
| Topic titles and feature-navigation links | `0.5s cubic-bezier(0.22, 0.87, 0.5, 1)` for color-related properties | Shared link-feedback timing |
| Menu button | `0.3s cubic-bezier(0.4, 0, 0.2, 1)` for color-related properties | Button feedback timing, not menu-panel motion |
| LINE links | `0.3s cubic-bezier(0, 0, 0.2, 1)` | Transition declaration; exact trigger and property sequence unknown |
| Calendar navigation buttons | `0.3s cubic-bezier(0.4, 0, 0.2, 1)` for color-related properties | Control feedback timing |
| `--common-duration-fast` | `0.35s` | Declared shared token; a particular animation binding was not supplied |
| `--common-duration-late` | `0.8s` | Declared shared token; a particular animation binding was not supplied |
| `--common-ease-in-out` | `cubic-bezier(0.61, 0.03, 0.39, 0.98)` | Declared shared easing |

### Captured States and Limitations

- The opening media shows different basketball poses across desktop and mobile captures. This is consistent with changing media, but the supplied records do not identify its element type, encoding, loop duration, autoplay configuration, audio, or playback controls.
- Index and feature-gallery indicators have distinct active states. Their existence supports a gallery interface; automatic advancement and swipe behavior remain unverified.
- Feature geometry is consistent with a 0.9 scale in the DOM sample. No supplied transform declaration establishes whether this is a persistent scale, a reveal state, or part of a scroll animation.
- Compact header identity, the feature strip, and the contact shortcut appear in different captured states. Their exact thresholds and transition paths cannot be recovered from these screenshots alone.
- In-page anchors are directly evidenced. Smooth scrolling, scroll locking, and a specific scroll-animation library are not.
- Many sampled elements report `animation: none`. This does not rule out media playback, JavaScript transforms, animated descendants, or animation outside the sampled state.

The capture process waited for loading, image decoding, and sampled stability, with bounded time limits, and temporarily paused perpetual animations during readiness checks. It did not provide a complete interaction recording. Reuse the measured transition timings where useful, but label any added entrance choreography as a new design decision.

## Surfaces

| Surface | Appearance | Purpose |
| --- | --- | --- |
| Opening canvas | White with a thin orange top rule | Gives the logo, vertical statement, and media room to establish identity |
| General information | Predominantly white; orange headings and black text | Supports calendar, editorial, and facility information |
| Feature field | Orange grain on the left, white on the right in the supplied desktop view | Creates a background boundary that the photographs cross |
| Media frames | Rounded photographs without visible elevation shadows | Keeps the atmosphere approachable and spatial |
| Feature navigation | Compact charcoal bar | Separates persistent orientation controls from content |
| Access | Textured charcoal with white information | Creates a clear transition to practical directions and contact |
| Footer | Black with white rectangular brand tiles | Provides a strong ending and legible partner artwork |
| Contact controls | Flat green | Makes the LINE destination visually consistent |
| Calendar events | Flat category colors with small rounded corners | Encodes operational information locally |

The grain is subtle enough to read as material rather than a patterned illustration. It is especially noticeable in the orange feature field and charcoal access section. Avoid large noisy speckles or a texture overlay that also degrades text and photography.

## Imagery

The photography is grounded in the venue itself: basketball activity, hoops, a bar counter, timber accommodation, shelving, and the industrial exterior. People appear engaged in ordinary play rather than posing as isolated product models. The setting supplies warm light, wood, dark metal, concrete, and occasional clothing color.

Use contextual compositions that explain relationships between spaces. In the hero, the hoop and mezzanine occupy the upper area while players and the bar occupy the lower area. A crop that keeps only a face or ball would lose the architectural information that makes this venue distinctive.

Large image corners are rounded, but the imagery remains photographic and normally rendered. There is no evidence for pixelation, duotone conversion, heavy blur, or monochrome processing. Different subjects need different crops: preserve the complete brand marks in the footer while using carefully selected cover crops for facility photography.

The basketball symbol, Hub artwork, and partner logos should be treated as supplied identity assets. CSS can reproduce placement and framing; it cannot accurately replace those marks with generic icons or typed approximations.

### Observed Asset References

These paths were present in source custom properties. They are relative to the original website and are not bundled with this document.

| Asset | Observed path | Evidence and use |
| --- | --- | --- |
| Orange texture | `/cms/wp-content/themes/theme/assets/images/common/bg-texture-orange.png` | Declared through `--bg-texture-orange`; an orange grain treatment is visible in the feature capture |
| Gray texture | `/cms/wp-content/themes/theme/assets/images/common/bg-texture-gray.png` | Declared through `--bg-texture-gray`; a gray grain treatment is visible in the access capture |
| Green texture | `/cms/wp-content/themes/theme/assets/images/common/bg-texture-green.png` | Declared through `--bg-texture-green`; a specific visible application was not established |

Exact source paths for the Hub mark, basketball symbol, hero media, facility photographs, and footer logos were not included. Do not invent filenames for them. For implementation, use authorized local assets and provide the texture variables only when those files are available.

## Layout & Responsive Behavior

The desktop layout uses a broad twelve-column framework with several recurring inner alignments. Major section labels often begin near the second column, approximately 159px from the document edge. Wide photographs and comparatively narrow explanatory text create the interior rhythm.

Mobile is a recomposition rather than uniform scaling. The header remains a small single row, the opening logo and caption share a row, the vertical statement moves to the opposite side of the media, topics become single-column rows, and the footer changes its logo grid.

| Area | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | 46px side padding; 16px labels | 30px side padding; 14px labels |
| Opening | Logo left, tall media right, statement on outer right | Caption beside logo above media; statement on media's left |
| Service index | Multiple large links extend beyond the viewport | One 315px link aligns to the inner content width; adjacent links remain on the track |
| Introductory title | 52px English display | 32px English display; text positioned in the right portion of the section |
| Calendar | Explanation beside timetable | Explanation above timetable; seven days retained |
| Private party | Grid layout with copy and associated media areas | Block layout; contact link centered |
| Topics | Image and information columns within each linked row | One column with information below the media region |
| Feature detail | Image left, copy right | Indicators, ordinal, title, paragraph, and actions stack vertically in the sampled geometry |
| Feature title | 40px computed | 32px computed, with longer headings wrapping further |
| General body copy | 16px / 28px | Remains 16px / 28px |
| Access | Photo and details side by side | Contact action above the full-width exterior image in the ending capture |
| Footer brands | Three columns × two rows | Two columns × three rows |
| Contact shortcut | 60px circle | Same 60px circle |

Two responsive limits deserve attention. First, the calendar compresses its event columns substantially while retaining all seven days. Second, the full page remains long on mobile: approximately 16057px compared with approximately 15907px on desktop. The compact navigation aids are therefore functionally useful.

The exact breakpoint is not included in the evidence. A 767px breakpoint in the Quick Start is a recommendation, not a source measurement. Tablet layouts, landscape phones, text zoom, and browser safe-area behavior were not inspected.

## Do’s and Don’ts

### Do

- Use the exact brand orange `#fe4f00` with broad white areas and predominantly black text.
- Give the opening wordmark a substantial quiet area around it.
- Preserve the three-part desktop relationship of identity, tall media, and vertical statement.
- Recompose the opening on mobile, including moving the vertical statement to the left of the media.
- Pair heavy English display headings with Noto Sans JP explanatory text.
- Keep Japanese paragraphs around `1.75` line height.
- Use real facility photography that shows both people and the spaces around them.
- Let desktop feature photographs cross the orange-and-white boundary.
- Keep feature ordinals, gallery indicators, paragraphs, and optional actions in a consistent order.
- Preserve the distinct orange index indicators and black feature-gallery indicators.
- Use outlined pills for detail links and green for LINE contact.
- End with textured charcoal access information followed by a black brand directory.
- Distinguish source CSS sizes from transformed visual measurements.

### Don’t

- Don't reduce the homepage to a single hero and a generic conversion button; its calendar and visit-planning information matter.
- Don't replace the Hub artwork with plain text in a similar font.
- Don't center every desktop section or alternate feature rows without supporting evidence.
- Don't use the inherited body Mincho declaration as the primary visible typeface for all content.
- Don't apply a permanent 0.9 transform to all copy just because one recorded feature state has scaled geometry.
- Don't import the CMS's unused gradient and shadow presets into the visual system.
- Don't add elevation shadows, glass panels, or ornamental gradients to otherwise flat surfaces.
- Don't use the calendar's blue and ochre as unrelated page-wide accents.
- Don't assume a gallery dot proves autoplay, or a Menu button proves a particular overlay layout.
- Don't turn the FAQ link into an asserted original accordion.
- Don't force footer logos into cropped photographic frames.
- Don't reproduce persistent-header collisions as intentional layout requirements.

## Recommended Implementation Additions

These are recommendations for a new implementation, not verified original features:

- Give Menu an accessible expanded state and controlled-panel relationship. If implemented as an overlay, support Escape, focus management, and a clear close action.
- Keep gallery dots visually small while providing larger hit areas and descriptive labels. Expose the current slide programmatically.
- Add a pause control if the hero or galleries move automatically. Provide a useful still image and stop automatic movement when reduced motion is requested.
- Preserve the weekly timetable while offering a readable agenda alternative for narrow screens. Keep event names and times available without relying on color alone.
- Use one accessible label per action. Mark duplicate decorative label layers as hidden from assistive technology.
- Reserve space for the fixed header, feature navigation, and contact shortcut. Add scroll offsets so anchor destinations remain readable beneath persistent controls.
- Maintain readable control contrast on both white and charcoal sections. The mobile ending should be checked for contact-button and logo overlap.
- Calculated from the solid color tokens, orange on white is approximately `3.3:1`, while white on Contact Green is approximately `2.2:1`. Use orange primarily for large headings and accents; consider black labels on green or a darker green variant for smaller contact text.
- Keep meaningful Japanese body text at comfortable sizes rather than copying transformed apparent sizes into the stylesheet.
- Load only required font faces and use a stable fallback. Supply image dimensions, responsive image sources, and lazy loading for lower-page photography.
- Retain the partner artwork's internal whitespace with `object-fit: contain` and provide meaningful link names.

## Agent Prompt Guide

### Quick Color Reference

- Main canvas: `#ffffff`.
- Main text and standard outlines: `#000000`.
- Brand heading, arrows, active index item, and feature field: `#fe4f00`.
- Access and compact navigation: `#333333`, with subtle grain where appropriate.
- Footer: black, with white logo tiles.
- LINE contact: `#4cc764`.
- Feature gallery indicators: black and `#cccccc`.
- Service-index indicators: orange and `#fecbb2`.
- Calendar event colors stay confined to the timetable.

### Overall Prompt

“Create a Japanese basketball facility homepage inspired by ballaholic Hub FUKUOKA. Use a clean white canvas, vivid orange `#fe4f00`, black text, and generous asymmetric spacing. The desktop opening has a large supplied brand mark on the left, a tall rounded facility-media frame on the right, and a narrow vertical Japanese statement at the outer edge. Keep Calendar, Access, and Menu small. Use heavy TT Commons Pro-style English headings, with the actual licensed font when available, and Noto Sans JP body copy at generous line height. Include a service index, weekly calendar, editorial topics, and eight numbered facility features. In the desktop feature sequence, let large photographs overlap a textured orange left field and white right field. Finish with charcoal access information, green LINE contact, and a black footer containing six white logo tiles. Recompose the mobile opening and stack feature content; do not merely scale the desktop canvas.”

### Example Component Prompts

1. **Opening:** “Build a white asymmetric facility introduction with a supplied orange Hub wordmark, a small two-line English caption, tall rounded basketball imagery, and the Japanese statement `バスケットボールをハブにつながろう` in vertical writing. On mobile, put the caption beside the wordmark above the media and move the statement to the media's left.”
2. **Feature row:** “Place a large rounded photograph of the actual facility across an orange-grain/white background boundary. To its right, stack a small orange-outlined ordinal, a heavy orange English heading, a bold Japanese proposition, a compact explanatory paragraph, and an optional outlined pill with a small orange arrow. Keep the image on the left.”
3. **Calendar:** “Create a weekly facility timetable with a centered date range between circular navigation controls, seven day columns, black event labels, ochre regular-opening blocks, gray closed periods, and blue school events. Use small corner radii and provide an optional mobile agenda view as an accessibility addition.”
4. **Feature navigation:** “Create a shallow charcoal strip near the lower-left viewport edge containing a horizontally scrollable numbered service list. Use orange for the current item, white for other labels, muted numerals, and a separate Skip link with an orange arrow. Keep keyboard focus visible within the scroll area.”
5. **Access and footer:** “Use a fine-grain charcoal access section with a large exterior photo, white facility details, an underlined map link, a white outlined calendar pill, and a green contact pill. Follow it with a black footer containing six centered brand marks in white tiles, arranged three across on desktop and two across on mobile.”

## Quick Start

### CSS Custom Properties

This is a practical static adaptation of the measured type, color, and component relationships. It deliberately does not reproduce an unverified scroll-animation system. The 767px breakpoint, desktop use of a `5:8` hero crop, static feature positioning, and mobile feature-background treatment are recommendations.

Use the class structure implied by the selectors: a header containing navigation and Menu; a hero containing brand, media, and vertical-rail elements; feature rows containing media and copy; and access/footer inner containers. Fonts and identity/media assets must be supplied separately. Texture variables default to `none` so missing assets do not break the page.

```css
:root {
  /* Measured colors and source-declared surface colors */
  --hub-orange: #fe4f00;
  --hub-white: #fff;
  --hub-ink: #000;
  --hub-charcoal: #333;
  --hub-line: #4cc764;
  --hub-gray-light: #efefef;
  --hub-gallery-gray: #ccc;
  --hub-index-peach: #fecbb2;
  --hub-calendar-open: #e08600;
  --hub-calendar-closed: #9a9a9a;
  --hub-calendar-school: #3788d8;

  /* Observed computed families; load authorized font files separately */
  --hub-font-en: 'tt-commons-pro', sans-serif;
  --hub-font-jp: 'Noto Sans JP', sans-serif;
  --hub-text-section: 52px;
  --hub-text-feature: 40px;
  --hub-text-body: 16px;
  --hub-text-detail: 14px;
  --hub-text-nav: 16px;
  --hub-leading-body: 1.75;
  --hub-tracking: 0.02em;

  /* Source-derived reference-grid values */
  --hub-page-inset: calc(100vw * 46 / 1440);
  --hub-grid-gap: calc(100vw * 20 / 1440);
  --hub-grid-count: 12;

  /* Measured geometry and screenshot-based working estimates */
  --hub-radius-card: 10px;
  --hub-radius-media: 20px;
  --hub-radius-pill: 999px;
  --hub-contact-size: 60px;
  --hub-rule-size: 5px;

  /* Measured transition declarations */
  --hub-link-motion: 500ms cubic-bezier(0.22, 0.87, 0.5, 1);
  --hub-control-motion: 300ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Optional local copies of the observed texture assets */
  --hub-texture-orange: none;
  --hub-texture-gray: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--hub-ink);
  background: var(--hub-white);
  /* Intentional adaptation: normalize visible Japanese content. */
  font-family: var(--hub-font-jp);
  font-size: var(--hub-text-body);
  font-weight: 500;
  line-height: var(--hub-leading-body);
  letter-spacing: var(--hub-tracking);
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img, video { display: block; max-width: 100%; }

.hub-top-rule {
  position: fixed;
  inset: 0 0 auto;
  height: var(--hub-rule-size);
  background: var(--hub-orange);
  z-index: 60;
}

.hub-header {
  position: fixed;
  inset: 44px var(--hub-page-inset) auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 50;
  font-family: var(--hub-font-en);
  font-size: var(--hub-text-nav);
  line-height: 1.5;
}

.hub-header__nav { display: flex; gap: 46px; }
.hub-header a { color: inherit; text-decoration: none; }
.hub-header a { transition: color var(--hub-link-motion); }

.hub-menu {
  display: inline-flex;
  align-items: center;
  gap: 36px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
}

.hub-menu__icon {
  width: 16px;
  height: 5px;
  border-block: 2px solid currentColor;
}

/* Set this state according to the surface behind the header. */
.hub-header[data-surface='dark'] { color: var(--hub-white); }

.hub-hero {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hub-grid-gap);
  min-height: 100svh;
  padding: 44px var(--hub-page-inset) 96px;
}

.hub-hero__brand {
  grid-column: 2 / span 3;
  align-self: start;
  margin-top: 275px;
}

.hub-hero__logo { width: 272px; height: auto; }

.hub-hero__caption {
  position: absolute;
  top: calc(100svh - 82px);
  left: var(--hub-page-inset);
  margin: 0;
  font: 500 12px/18px var(--hub-font-en);
}

.hub-hero__caption em {
  color: var(--hub-orange);
  font-style: normal;
}

.hub-hero__media {
  grid-column: 6 / span 6;
  align-self: start;
  /* Recommended desktop crop, based on the visible mobile frame. */
  aspect-ratio: 5 / 8;
  overflow: hidden;
  border-radius: var(--hub-radius-media);
}

.hub-hero__media > :is(img, video) {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hub-hero__rail {
  grid-column: 12;
  align-self: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 100px;
}

.hub-hero__statement {
  margin: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.05;
}

.hub-section-title {
  margin: 0;
  color: var(--hub-orange);
  font: 800 var(--hub-text-section)/1 var(--hub-font-en);
  letter-spacing: var(--hub-tracking);
}

.hub-index {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 0 var(--hub-page-inset) 24px;
  scroll-snap-type: x proximity;
}

.hub-index__item {
  flex: 0 0 436px;
  padding: 20px 30px 30px;
  border-radius: var(--hub-radius-card);
  color: inherit;
  text-decoration: none;
  scroll-snap-align: center;
  /* Recommended separation; source border styling was not sampled. */
  border: 1px solid var(--hub-orange);
}

.hub-features {
  position: relative;
  isolation: isolate;
  padding-block: 140px 120px;
}

.hub-features::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 42%;
  z-index: -1;
  background-color: var(--hub-orange);
  background-image: var(--hub-texture-orange);
  pointer-events: none;
}

/* Static composition; no inferred source transform is applied. */
.hub-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  align-items: center;
  gap: 64px;
  width: 80%;
  margin: 0 0 180px 16%;
}

.hub-feature__image {
  width: 100%;
  aspect-ratio: 1.38;
  object-fit: cover;
  border-radius: var(--hub-radius-media);
}

.hub-feature__number {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-bottom: 12px;
  border: 1px solid var(--hub-orange);
  border-radius: 50%;
  font: 500 16px/1 var(--hub-font-en);
}

.hub-feature__title {
  margin: 0 0 24px;
  color: var(--hub-orange);
  font: 800 var(--hub-text-feature)/1.3 var(--hub-font-en);
  overflow-wrap: anywhere;
}

.hub-feature__lead {
  margin: 0 0 22px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.75;
}

.hub-feature__body {
  margin: 0 0 30px;
  font-size: var(--hub-text-detail);
  line-height: var(--hub-leading-body);
}

.hub-dots {
  display: flex;
  justify-content: center;
  margin-top: 16px;
}

/* Recommended larger hit area around the small visible dot. */
.hub-dot {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.hub-dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hub-gallery-gray);
}

.hub-dot[aria-current='true']::before { background: var(--hub-ink); }
.hub-dots--index .hub-dot::before { background: var(--hub-index-peach); }
.hub-dots--index .hub-dot[aria-current='true']::before {
  background: var(--hub-orange);
}

.hub-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 52px;
  padding: 10px 48px 14px 22px;
  border: 2px solid currentColor;
  border-radius: var(--hub-radius-pill);
  color: inherit;
  background: transparent;
  font: 700 16px/24px var(--hub-font-jp);
  text-decoration: none;
  transition: color var(--hub-control-motion),
    border-color var(--hub-control-motion);
}

.hub-button__arrow {
  position: absolute;
  inset-inline-end: 22px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--hub-orange);
}

.hub-button--line {
  color: var(--hub-white);
  background: var(--hub-line);
  border-color: var(--hub-line);
}

.hub-button--line .hub-button__arrow { color: inherit; }

/* Optional contrast improvement for the observed green treatment. */
.hub-accessible .hub-button--line { color: var(--hub-ink); }

.hub-feature-nav {
  position: fixed;
  left: 30px;
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  width: min(558px, calc(100% - 60px));
  min-height: 39px;
  border-radius: 3px;
  color: var(--hub-white);
  background: var(--hub-charcoal);
  font: 500 14px/21px var(--hub-font-en);
  z-index: 40;
}

.hub-feature-nav[hidden] { display: none; }
.hub-feature-nav__items { display: flex; min-width: 0; overflow-x: auto; }
.hub-feature-nav a { flex: none; padding: 9px 16px; color: inherit; text-decoration: none; }
.hub-feature-nav a[aria-current='location'] { color: var(--hub-orange); }
.hub-feature-nav__skip { margin-left: auto; white-space: nowrap; }

.hub-access {
  padding: 120px var(--hub-page-inset);
  color: var(--hub-white);
  background-color: var(--hub-charcoal);
  background-image: var(--hub-texture-gray);
}

.hub-access__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.676fr) minmax(0, 1fr);
  align-items: center;
  gap: 60px;
  max-width: 1107.5px;
  margin-inline: auto;
}

.hub-access__image { width: 100%; border-radius: 10px; }
.hub-access__actions { display: grid; justify-items: start; gap: 16px; }
.hub-access__map { color: inherit; text-underline-offset: 4px; }

.hub-footer { padding: 80px var(--hub-page-inset); color: #fff; background: #000; }
.hub-footer__inner { display: flex; align-items: end; justify-content: space-between; gap: 48px; max-width: 1107.5px; margin-inline: auto; }
.hub-footer__logos { display: grid; grid-template-columns: repeat(3, 160px); gap: 16px; }
.hub-footer__logo { display: grid; place-items: center; aspect-ratio: 20 / 9; padding: 16px 20px; border-radius: 2px; background: #fff; }
.hub-footer__logo img { width: 100%; height: 100%; object-fit: contain; }
.hub-footer__copyright { color: inherit; font: 500 16px/24px var(--hub-font-en); text-decoration: none; }

.hub-line-shortcut {
  position: fixed;
  right: 20px;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: var(--hub-contact-size);
  height: var(--hub-contact-size);
  border-radius: 50%;
  background: var(--hub-line);
  z-index: 45;
}

.hub-line-shortcut[hidden] { display: none; }

/* Recommended focus and anchor-offset additions. */
:where(a, button):focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
[id] { scroll-margin-top: 100px; }

@media (max-width: 767px) {
  :root {
    --hub-page-inset: calc(100vw * 30 / 390);
    --hub-grid-gap: calc(100vw * 16 / 390);
    --hub-grid-count: 4;
    --hub-text-section: 32px;
    --hub-text-feature: 32px;
    --hub-text-nav: 14px;
  }

  .hub-header__nav { gap: 13px; }
  .hub-menu { gap: 20px; }

  .hub-hero {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 40px 20px;
    padding: 226px var(--hub-page-inset) 60px;
  }

  .hub-hero__brand {
    grid-column: 1 / -1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin: 0;
  }

  .hub-hero__logo { order: 2; width: min(195px, 62%); }
  .hub-hero__caption { position: static; flex: 0 1 100px; font-size: 11px; line-height: 16.5px; }
  .hub-hero__media { grid-column: 2; grid-row: 2; }
  .hub-hero__rail { grid-column: 1; grid-row: 2; margin: 0; gap: 14px; }
  .hub-hero__statement { font-size: 20px; }

  .hub-index { gap: 10px; }
  .hub-index__item { flex-basis: calc(100vw - 2 * var(--hub-page-inset)); padding: 20px 20px 28px 28px; }
  .hub-dot::before { width: 5px; height: 5px; }

  .hub-features { padding-block: 80px; }
  /* Recommended mobile surface arrangement; its full source extent is unverified. */
  .hub-features::before { width: 100%; height: 240px; }
  .hub-feature { display: block; width: auto; margin: 0 var(--hub-page-inset) 100px; }
  .hub-feature__copy { margin-top: 30px; }
  .hub-feature__number { margin-inline: auto; }
  .hub-feature__title { text-align: center; line-height: 1.5; }
  .hub-feature__lead { font-size: 18px; text-align: center; }
  .hub-feature__actions { display: grid; justify-items: center; gap: 10px; }

  .hub-feature-nav { left: 10px; bottom: 20px; width: calc(100% - 90px); font-size: 13px; }
  .hub-access { padding-block: 80px; }
  .hub-access__inner { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .hub-access__details { order: -1; }
  .hub-footer__inner { display: block; }
  .hub-footer__logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub-footer__copyright { display: block; margin-top: 80px; text-align: center; }
  .hub-line-shortcut { right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .hub-header a, .hub-button { transition: none; }
  .hub-index { scroll-snap-type: none; }
  /* Media playback and scripted movement require a matching JS preference check. */
}
```

The CSS intentionally leaves calendar data, gallery state, menu behavior, header visibility, and media playback to application logic. Reveal the feature navigation only within the relevant sequence, and coordinate its mobile position with the contact shortcut. No extra animation library is required to reproduce the static composition.

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This mapping is implementation guidance, not an assertion about how the original components were authored. Define the custom properties above first.

```css
@theme inline {
  --color-hub-orange: var(--hub-orange);
  --color-hub-white: var(--hub-white);
  --color-hub-ink: var(--hub-ink);
  --color-hub-charcoal: var(--hub-charcoal);
  --color-hub-line: var(--hub-line);
  --color-hub-gallery-gray: var(--hub-gallery-gray);
  --color-hub-index-peach: var(--hub-index-peach);

  --font-hub-en: var(--hub-font-en);
  --font-hub-jp: var(--hub-font-jp);

  --text-hub-section: var(--hub-text-section);
  --text-hub-feature: var(--hub-text-feature);
  --text-hub-body: var(--hub-text-body);
  --text-hub-detail: var(--hub-text-detail);
  --text-hub-nav: var(--hub-text-nav);

  --spacing-hub-inset: var(--hub-page-inset);
  --spacing-hub-gutter: var(--hub-grid-gap);
  --spacing-hub-contact: var(--hub-contact-size);

  --radius-hub-card: var(--hub-radius-card);
  --radius-hub-media: var(--hub-radius-media);
  --radius-hub-pill: var(--hub-radius-pill);
}
```

## Sources & Evidence

- [ballaholic Hub FUKUOKA](https://hub.ballaholic.jp/): supplied browser observation of the current original page. Original and final URLs are identical; the recorded HTTP status is 200.
- **Capture record:** September 12, 2026, at `2026-09-12T12:42:50.255Z`; viewports of `1440 × 1000` and `390 × 844` CSS pixels, with measured document widths of `1425px` and `375px`.
- **Original-page visual evidence:** three desktop captures covering the opening, a portion of the feature sequence, and access/footer; two mobile captures covering the opening and the page ending.
- **Rendered DOM evidence:** page title, current text, link destinations, selected element rectangles, computed typography, padding, grid templates, colors, radii, transition declarations, and custom properties. The detailed element samples end around the separate accommodation section; later pricing and FAQ descriptions therefore rely on rendered text, while access and footer appearance are established by screenshots.
- **Observation limits:** the collection includes initial observation and scroll traversal with bounded readiness checks, but no supplied menu-opening, gallery-input, calendar-navigation, keyboard, hover, or external-destination test. Exact media configuration, animation sequences, tablet behavior, and production asset filenames beyond the three texture declarations remain unverified.

This reference describes the current homepage shown in the supplied evidence. Measurements, calculations, visual estimates, and implementation recommendations are intentionally kept distinct.