# BALLPARK STYLE — Style Reference

> Electric-blue ballpark culture, told through food snapshots, neon caption slips, and collectible stadium cards.

**Website / Original URL:** [ballparkstyle.com](https://ballparkstyle.com/)
**Final URL:** [https://ballparkstyle.com/](https://ballparkstyle.com/)
**Theme:** saturated blue surfaces with white typography and multiple bright accents; no theme selector was observed.
**Inspected:** September 12, 2026, at 14:07:22.710 UTC / 23:07:22.710 JST.
**Viewports:** desktop 1440 × 1000 CSS pixels; mobile 390 × 844 CSS pixels.
**Scope:** the current homepage: featured stories, introduction, latest articles and tags, ranking content, stadium discovery, and footer. Visual evidence includes three desktop captures and two mobile captures. Search, an opened mobile menu, article pages, and linked destinations were not exercised.

BALLPARK STYLE is an editorial discovery site about enjoying ballparks, with an emphasis on food, drinks, merchandise, and experiences around six Pacific League venues. Its homepage prioritizes browsing: portrait food photographs lead into article collections, tags, rankings, and stadium introductions.

The visual identity comes from a specific combination: large uninterrupted blue fields, an orange wordmark with a heavy black extrusion, rounded photographs, square fluorescent captions, pixel-style navigation, and white glove illustrations. Small details evoke baseball and collecting: star pagination, pennants, layered stadium cards, and a home-plate-shaped Top control. Photography remains natural and immediate, while the surrounding graphics supply the playfulness.

The composition alternates dense content with generous blue space. Preserve that rhythm, the different roles of the two blues, and the contrast between soft photo corners and hard-edged caption slips when adapting the design.

## How to Read This Reference

- **Measured / source values** are taken from the supplied rendered DOM, computed styles, or original-page custom properties. Decimal coordinates are rounded for readability.
- **Calculated values** are arithmetic relationships between measured dimensions, such as the caption occupying 80% of its story width.
- **Visual estimates**, marked approximately or with `≈`, come from the supplied original-page screenshots. They are not extracted CSS declarations.
- **Recommendations** describe a new implementation. Breakpoints, accessibility additions, and unspecified interaction behavior must not be mistaken for verified original behavior.
- **Named implementation tokens** are aliases unless a source variable is explicitly identified.
- Only the desktop article grid is visually documented. Mobile captures show the opening composition and lower stadium/footer area, not the middle article layout.

The DOM contains offscreen carousel items, repeated tag groups, and navigation positioned outside the mobile viewport. Text appearing in an extraction does not establish that it was visible in the capture. Likewise, an empty heading wrapper's computed font does not identify the lettering inside its graphic artwork.

## Tokens — Colors

### Default Palette

The following values are exact source tokens or computed colors. Roles combine those values with the visible original-page composition.

| Name | Value | Source / implementation token | Role and evidence |
| --- | --- | --- | --- |
| Ballpark Blue | `#0384DA` | Source `--col-blue`; alias `--color-feature` | Computed background of the featured and introduction sections; bright blue also appears behind the stadium grid |
| Deep Blue | `#0468C0` | Source `--col-darkblue`; alias `--color-canvas` | Matches the darker article-area and footer fields in the captures |
| Neon Yellow | `#F1FF2E` | Source `--col-yellow` | Computed smoothie-story caption fill; additional bright editorial accents |
| Field Green | `#27D33B` | Source `--col-green` | Computed parfait-story caption fill; recurring sticker and ribbon accent |
| Lavender | `#A98FFF` | Source `--col-purple` | Computed hot-dog-story caption fill; other editorial accents |
| Soft Pink | `#F3BDE9` | Source `--col-pink` | Supporting palette color, visually consistent with pink reaction ribbons |
| Light Blue | `#6BC4FF` | Source `--col-lightblue` | Supporting accent palette; do not use as the main page blue |
| Stadium Orange | `#FFA041` | Source `--col-orange` | Visually corresponds to the orange front stadium card |
| Warm Red | `#EB5C2A` | Source `--col-red` | Available source accent; exact assignment to a sampled component was not supplied |
| Outline Ink | `#202020` | Source `--col-black` | Reusable dark border and graphic-detail color; individual artwork outlines were not sampled |
| Caption Ink | `#292323` | Computed `rgb(41, 35, 35)`; alias `--color-caption-ink` | Actual computed text color of featured captions and inherited body text |
| White | `#FFFFFF` | Computed navigation, introduction text, and tag surfaces | Reversed text, outlines, glove surfaces, and filled discovery tags |

### Artwork Colors and Accent Assignment

The wordmark is visibly a stronger orange than the stadium-card orange. Its fill is not established by the supplied custom properties. An approximate visual substitute is `#FF5A00`, but the authentic wordmark should remain an image or vector asset rather than being reconstructed from that estimate.

The stadium illustration sits on a warm off-white panel, approximately `#F8F5F1`. This is another visual estimate, not a recovered token.

Color is distributed by component and story. The six featured-story captions repeat green, yellow, and lavender in the supplied DOM. The article reaction ribbons use a broader selection of colors. There is no evidence that these colors represent fixed stadium categories or semantic statuses.

Keep three distinctions intact:

- Bright blue introduces and celebrates; deeper blue carries the article collection and footer.
- Featured captions use dark text on solid bright fills.
- Article metadata uses white text and outlines directly against the blue field.

No selectable palette presets or alternate color modes were documented.

## Tokens — Typography

### Japanese Editorial Text

**Observed family:** `"Zen Kaku Gothic New", sans-serif`.

This is the computed body family and the family used by featured captions, introductory prose, discovery tags, and offscreen mobile navigation. The visible style is clean and friendly, with enough weight in article headlines to remain legible against blue.

Featured captions are regular weight and compact. Introductory prose is more open, using approximately 1.78 line height. Article-grid titles appear bold in the desktop screenshot, but their exact computed weight was not included in the excerpt.

### Pixel Navigation

**Observed family:** `bestTen, sans-serif`.
**Source variable:** `--font-dot: "bestTen", sans-serif`.

The desktop links `すべての記事` and `ランキング` explicitly use this family at 20px. Their irregular pixel edges distinguish navigation from ordinary article text.

The stadium counter and some graphic labels have a compatible pixel appearance. Applying `bestTen` to those elements is a reasonable adaptation, but their individual computed font declarations were not supplied.

### Latin Utility Text

**Observed family:** `Montserrat, sans-serif`.
**Source variable:** `--font-montserrat`.

The mobile offscreen navigation's `FOLLOW US` label explicitly uses Montserrat at 12px. Footer utility text visually follows the same clean Latin character. The large stadium heading is a heavy sans-serif graphic treatment; its exact face cannot be established from the available measurements.

### Wordmark and Graphic Headings

The Ballpark Style wordmark is artwork: thick orange lettering, irregular upward energy, and a pronounced black offset extrusion. Preserve its internal lettering and shadow geometry together.

The empty H1 wrapper reports `baskerville-display-pt, serif` at 10px. That declaration does **not** identify the wordmark's visible lettering. Similarly, the latest-news H2 has a 10px computed font despite a large graphic bounding box. Do not reconstruct those graphics as 10px text or infer a display font from the wrapper.

### Type Scale

| Role | Desktop | Mobile | Weight / tracking | Evidence |
| --- | --- | --- | --- | --- |
| HTML root | 10px | 10px | Regular | Measured; this is a sizing base, not the intended reading size |
| Desktop primary navigation | 20px / 20px | Replaced visually by menu control | 400; normal tracking | Measured; `bestTen` |
| Featured caption | 16px / 23px | 16px / 23px | 400; 0.8px tracking | Measured at both widths |
| Introduction prose | 18px / 32px | 16px / 28.444px | 400; normal tracking | Measured |
| Latest-news subtitle | 26px / 26px | 16px / 16px | 400 | Measured; label `新着情報` |
| Filled discovery tag | 18px / 35px | 12px / 35px | 400 | Measured; text shrinks while pill height remains constant |
| Offscreen mobile navigation | Not applicable | 22px / 48px | 400; 1.1px tracking | Measured outside the visible viewport; menu opening untested |
| Offscreen `FOLLOW US` | Not applicable | 12px / 12px | 400 | Measured; Montserrat |
| Article-grid title | ≈20px / 27px | Not visually documented | Visually bold; 700 is a recommended starting point | Visual estimate |
| Article outline tag | ≈12px | Not visually documented | Regular to medium appearance | Visual estimate; distinct from discovery tags |
| Footer utility / copyright | ≈12–14px | ≈12–14px | Regular | Visual estimate |
| Stadium display heading | ≈40px upper line; ≈100px main line | Heading outside supplied lower crop | Heavy graphic lettering | Visual estimate, not a verified font scale |

Avoid proportionally shrinking every text role on mobile. The featured caption stays exactly 16px, while introduction text and discovery-tag text change independently.

## Tokens — Spacing & Shapes

The system combines large section curves, moderately rounded photographs, tiny outlined pills, and square caption slips. It is not based on one universal card radius or one uniform spacing multiplier.

### Source Canvas Parameters

| Source property | Value | Interpretation limit |
| --- | --- | --- |
| `--canvas-width` | `1366` | A source reference width; not the actual inspected desktop width |
| `--canvas-padding` | `100` | A source layout parameter; the formula using it was not supplied |
| `--canvas-width-sp` | `390` | Mobile reference width, matching the inspected phone viewport |

These parameters suggest an authored reference canvas, but the complete scaling rules are unavailable. Do not extrapolate a universal viewport formula from them.

### Spacing Scale

| Use | Desktop | Mobile | Evidence |
| --- | --- | --- | --- |
| Featured-section top padding | 152.855px | 100px | Measured |
| Inactive story vertical offset | 40px below active story | 40px for offscreen neighbors | Calculated from measured positions |
| Horizontal story gap | 25px | 40px between offscreen slide boxes | Calculated from measured positions |
| Caption padding | 16px vertical, 22px horizontal | Same | Measured |
| Introduction section padding | 30px top, 130px bottom | 30px top, 100px bottom | Measured |
| Introduction prose padding | 40px vertical, 50px horizontal | 25px top, 20px sides and bottom | Measured |
| Discovery-tag horizontal padding | 18px | 18px | Measured |
| Discovery-tag gap | 10px | 10px | Calculated from consecutive rectangles |
| Desktop article column gap | ≈55px | Unverified | Visual estimate |
| Photo-to-article-title gap | ≈28px | Unverified | Visual estimate |
| Space between article rows | ≈100px after preceding content | Unverified | Visual estimate |
| Latest-news section bottom padding | 180px | 180px | Measured |

### Border Radius and Edges

| Element | Value | Evidence |
| --- | --- | --- |
| Featured section, upper corners | 50px desktop; 30px mobile | Measured |
| Introduction section, lower corners | 50px desktop; 30px mobile | Measured |
| Featured caption | 0 | Measured |
| Filled discovery tag | 120px declared radius | Measured; renders as a pill at 35px height |
| Food photograph | ≈20px | Visual estimate at both viewports |
| Introduction frame | ≈25px | Visual estimate |
| Article outline tag | Fully rounded; ≈25px tall | Visual estimate |
| Stadium front card | ≈40px corners with a thick white edge | Visual estimate |
| Footer upper corners | ≈50px desktop; ≈30px mobile | Visual estimate |
| Caption / reaction-ribbon border | ≈1px dark rule | Visual estimate |

### Layout Measurements

| Element | At 1440 × 1000 | At 390 × 844 | Evidence |
| --- | --- | --- | --- |
| Total document height | 5939.67px | 6768.59px | Measured |
| Header wrapper height | 104px | 59px | Measured; visible wordmark exceeds this wrapper |
| Featured section height | 797.83px | 677px | Measured |
| Active story anchor | x 533.88, y 152.84; width 361.33px | x 37.5, y 100; width 316px | Measured |
| Featured photograph | ≈361 × 542px | ≈316 × 474px | Visual estimate; consistent with 2:3 |
| Active caption | x 570, y 631.58; 289.06 × 80px | x 69.09, y 542.81; 252.80 × 80px | Measured |
| Caption-to-story width ratio | 80% | 80% | Calculated |
| Introduction section | y 797.83; height 609px | y 677; height 771.77px | Measured |
| Introduction prose box | 459.61 × 240px | 311.91 × 187.19px | Measured |
| Latest-news section | y 1506.83; height 2297.17px | y 1588.77; height 2937.28px | Measured |
| Latest-news graphic H2 box | 689.22 × 99.20px | 320 × 46.59px | Measured; not a font-size measurement |
| Desktop article grid span | ≈1228px with ≈105px outer gutters | Unverified | Visual estimate |
| Desktop article photo | ≈266 × 399px | Unverified | Visual estimate; 2:3 |

The large H1 wrapper also extends outside the viewport: approximately 662 × 284px on desktop and 382 × 164px on mobile. Its painted wordmark is smaller than those bounds. Use the artwork's actual visible extent when positioning it, rather than treating the wrapper as a solid rectangular logo.

## Components

### Header and Overlapping Wordmark

**Role:** identity, article navigation, ranking access, and search entry.

The header is transparent over the bright-blue opening field. On desktop, the visible wordmark begins near x 95, y 35 and spans approximately 510px. Its lower lettering overlaps the first row of photography. The text links sit high on the right at y 82, with a measured 42px gap between their rectangles. A small white search icon follows.

The primary links have verified destinations:

- `すべての記事` → `/articles`.
- `ランキング` → `/#ranking`.
- The wordmark → `/`.

At 390px, the visible wordmark is approximately 294px wide and starts near x 23, y 29. Search and a three-line menu icon occupy the upper-right corner. The large brand remains an overlapping graphic rather than being reduced to a small conventional navbar logo.

Mobile navigation text exists at x 420, outside the 390px viewport. That supports an offscreen navigation arrangement, but the open state, backdrop, focus behavior, and entrance direction were not tested. No header is visible in the supplied lower-page captures; fixed or sticky behavior is not established.

### Featured Story Carousel

**Role:** immediate access to selected editorial stories.

The desktop capture shows three portrait stories, with the center story raised 40px. All three measured anchor boxes have the same width. Emphasis comes from position, not a verified scale enlargement.

Each story combines:

1. A linked portrait food photograph with approximately 20px corners.
2. A small tilted `Pick up!` sticker near its upper-right edge.
3. A centered square caption slip, 80% of the story width.
4. Dark 16px Japanese text with 23px leading and 0.8px tracking.

The photograph and caption belong to the same article anchor. The visible examples are a cream-cheese parfait, a blue banana smoothie, and two hot dogs. Their exact article destinations are present in the DOM.

The caption overlaps the photo differently across widths. Using the visible photo edges as estimates, the desktop center caption overlaps about 63px and extends about 17px below the image. On mobile, it overlaps about 31px and extends about 49px below. Preserve the 80% width and unchanged text size; do not simply scale the entire desktop card down.

Caption height is content-dependent: the supplied two-line examples are 80px tall, while a longer three-line caption measures 103px. Fixed-height clipping would lose source content.

At 390px, one 316px-wide story is visible, with approximately 37px side margins. The other story boxes remain outside the viewport. Six story links exist in the supplied data. The excerpt does not establish autoplay, swipe handling, looping rules, or timing.

### Pickup Stickers, Glove Controls, and Pagination

**Role:** playful editorial emphasis and navigation affordances.

Pickup labels resemble small die-cut stickers with a thick white exterior, a dark interior edge, and a colored center. Their tilted placement breaks out of the photo's rounded silhouette. Clip only the photograph, not the entire story wrapper, so the sticker can extend beyond it.

The previous and next affordances are white cartoon gloves with black linework. They are illustrated controls placed around the outer edges of the photo group, not evidence of a custom browser cursor. Their visible width is approximately 70px on desktop and 50px on mobile.

Six star indicators appear beneath the desktop stories, with one white star and the others dark blue. The supplied mobile opening capture does not show that star row. The relationship between indicator order and the reordered carousel DOM was not established; bind any new implementation's selected marker to its actual carousel state.

### Introduction Panel

**Role:** explain the publication after the initial food photography.

The introduction remains on the bright-blue field. A thin white frame organizes a `What's?` label, a smaller version of the brand artwork, descriptive copy, and food imagery.

The desktop frame's top is visible near y 929, with approximately 1140px total width. The measured label cell is 157px wide and 106px tall. The source prose occupies a narrower box, approximately 460px wide, with 40px × 50px padding. Food cutouts are partially visible around the right side of the panel's upper area; the complete collage is outside the supplied desktop crop.

On mobile, the panel begins near x 38, y 707 and is approximately 314px wide. Its heading row is 67px tall, divided into a roughly 95px label cell and a 217px brand cell. A white horizontal rule separates the prose beneath. The paragraph spans the inner panel width with smaller padding.

The full mobile introduction section is taller than the desktop section. Its unshown lower illustration arrangement should not be reconstructed from the section height alone.

### Latest-News Heading and Discovery Tags

**Role:** transition from selected stories to broader browsing.

The DOM identifies a large graphic heading with the source label `今すぐチェック！`, followed by the ordinary text subtitle `新着情報`. The graphic box scales from about 689px to 320px wide; the subtitle changes from 26px to 16px.

Discovery tags use white filled pills with blue text. They are different from the small outline tags inside article tiles:

- Fixed measured height and line height: 35px.
- Horizontal padding: 18px.
- Radius: 120px.
- Text: 18px desktop, 12px mobile.
- Horizontal gap: 10px.

The data contains repeated groups of venue and topic links, followed by `All Tags`. Large offscreen horizontal positions and repeated content are consistent with a looping tag-lane construction. Direction, speed, and the `All Tags` interaction were not documented.

Venue labels and topics coexist, for example `#京セラドーム大阪`, `#選手メニュー`, and `#グルメ`. The supplied hrefs lead to tag routes. They should remain browsing links rather than being represented as verified in-place filter toggles.

### Article Tile

**Role:** the main repeatable editorial unit.

The documented desktop collection uses four columns. In the supplied middle capture, the image left edges are approximately x 105, 426, 746, and 1067. Each portrait image is about 266 × 399px, with roughly 55px between columns.

A tile's anatomy is:

1. A 2:3 food photograph with rounded corners.
2. A bold white Japanese headline beneath it, typically wrapping to two or three lines.
3. A wrapping group of small white outline tags.
4. A narrow colored reaction ribbon containing informal text or emoji.

There is no surrounding white card, border, or general elevation shadow. The blue page is the tile's surface. Images align at the top, while titles, tags, and ribbons flow to different vertical positions according to their content.

The visible second row includes a pork bowl, a matcha parfait, chilled salmon rice in broth, and a fruit drink. Hands, venue interiors, team labels, and containers remain visible, reinforcing the feeling of a real visit.

### Reaction Ribbon

**Role:** add an informal editorial voice beneath article metadata.

A ribbon is approximately 28px tall, spans the photo width, and has a thin dark border with square corners. Its text has a pixel-like appearance and is visibly cropped at the horizontal edges. Backgrounds include pink, lavender, yellow, and warm red tones.

The DOM repeats each reaction several times. Examples include `ビールが進む味🍻` and `球場でこれが食べられるなんて……🥹♡`. Treat these as one editorial reaction with possible visual repetition, not several separate content records.

The repetition and clipping suggest ticker behavior, but no duration or direction was measured. A static clipped treatment is the evidence-safe CSS starting point. If animation is added, keep a single accessible text equivalent and hide duplicated visual copies from assistive technology.

### Ranking Content

**Role:** provide another discovery path based on popularity.

A ranking section is confirmed by the rendered text and the header's `/#ranking` destination. The supplied extraction contains four ranking entries, beginning with a player-produced beef bowl, followed by three articles also present in the latest-news collection.

No ranking-specific screenshot or useful computed component geometry was supplied. Number badges, card proportions, mobile arrangement, and transitions remain unverified. Reuse the established editorial palette and photo treatment in a new implementation, while labeling its ranking layout as a design decision.

### Stadium Collection

**Role:** introduce the six Pacific League ballparks as collectible destinations.

This section switches to a bright-blue graph-paper field. The fine grid is approximately 14px per cell in the screenshots. Large white `PACIFIC LEAGUE BALLPARKS` lettering occupies the left of the desktop composition, with a Japanese subtitle and a pixel-style counter below.

The right side holds a stack of illustrated stadium cards. The front card in both lower captures is Belluna Dome, marked by a `SAITAMA` pennant and the labels `BELLUNA DOME` and `ベルーナドーム`.

Its anatomy includes:

- A thick white outer edge and large rounded corners.
- An orange face.
- A warm off-white illustration window.
- Fine blue architectural linework depicting the dome.
- Bold white venue lettering and a smaller Japanese name.
- A small diamond-shaped `View More` sign.
- Several differently colored cards visible behind the front card.

The desktop stack is approximately 430px wide overall, with a front card around 350px wide. The mobile stack is approximately 310px wide overall. Both lower captures crop the upper part of the component, so its full height and aspect ratio cannot be measured reliably.

Glove controls flank the stack. The visible counter reads `[ 3 / 6 BALLPARKS ]`. On desktop, it sits with the left-hand heading; on mobile, it is centered below the cards. The display establishes a six-item collection, but slide animation and card-link destinations were not exercised.

### Footer and Top Control

**Role:** conclude the homepage with identity, navigation, and social access.

The footer is a deep-blue field with broad rounded upper corners. A white home-plate-shaped `Top` badge overlaps its upper-right boundary. The badge is approximately 90px across on desktop and 60px on mobile, with a dark inner outline and compact pixel-style lettering. Its click and scrolling behavior were not tested.

Desktop places navigation and social details on the left and a large wordmark on the right. Mobile reorganizes the composition: the wordmark comes first across the footer, then navigation sits on the left while `FOLLOW US`, social icons, and the affiliated media mark sit on the right. Preserve this two-column relationship beneath the mobile logo.

Instagram and TikTok account destinations are present in the supplied original-page links. Their icons appear in white. The footer also visibly contains the `パ・リーグ.com` mark and the copyright text `© Pacific League Marketing All Rights Reserved.`

The copyright is a directly observed footer statement. No original-page production-credit block was included in the inspected evidence.

## Tokens — Motion & Interaction

### Measured Declarations

| Element | Supplied computed value | What it establishes |
| --- | --- | --- |
| H1 wordmark wrapper | `transform 0.1s ease-in-out` | A short transform transition is declared; trigger and transform distance are unknown |
| Desktop article/ranking navigation links | `transform 0.1s ease-in-out` | Same short transform vocabulary; hover result was not captured |
| Introduction brand wrapper | `transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1)` | An overshooting transform easing is declared; start/end states are unknown |
| Many sampled descendants | `animation: none` | Those individual elements have no sampled CSS animation; parent or JavaScript motion is not ruled out |

The overshooting cubic-bezier is a concrete reusable token. It supports a playful motion direction, but does not prove a specific bounce, rotation, or entrance sequence.

### Visible Affordances and Limits

| Feature | Evidence | Unverified behavior |
| --- | --- | --- |
| Featured-story navigation | Glove controls, six story links, star indicators, offscreen items | Autoplay, swipe, looping, easing, transition duration, pause behavior |
| Tag lanes | Repeated tag groups and long horizontal positions | Continuous movement, direction, speed, pause-on-hover |
| Reaction ribbons | Repeated text and clipped horizontal presentation | Ticker speed, direction, start conditions |
| Stadium selector | Layered cards, glove controls, 3/6 counter | Card-turning motion, timing, destination behavior |
| Mobile menu | Menu icon and navigation positioned beyond the viewport | Open appearance, dismissal, focus management |
| Search | Visible magnifying-glass icon | Search form, overlay, results, keyboard behavior |
| Top badge | Visible labeled control | Smooth scrolling, instant jump, exact target |

The source exposes `--swiper-navigation-size: 44px` and `--swiper-theme-color: #007aff`. These are integration-related properties, not measurements of the illustrated gloves or the site's main blue. They do not establish a carousel configuration.

**Recommended motion direction:** use the measured 100ms transform token for restrained control feedback and the 500ms overshooting token selectively for decorative brand movement. Choose and document carousel timing separately. Keep article access usable with motion paused or disabled.

## Surfaces

| Layer | Appearance | Function |
| --- | --- | --- |
| Opening field | Solid bright blue with rounded top corners | Frames the overlapping wordmark and featured food stories |
| Introduction field | Same bright blue, white internal frame, rounded section bottom | Holds the publication explanation |
| Article field | Deep blue with unboxed content | Creates continuity across the four-column collection |
| Featured caption | Solid neon rectangle with dark text and fine edge | Separates story copy from a busy photograph |
| Discovery tag | White pill with blue text | Broad venue/topic navigation |
| Article tag | Transparent pill with white outline and text | Compact article metadata |
| Reaction ribbon | Colored rectangular strip with dark edge | Informal editorial emphasis |
| Stadium field | Bright blue with fine graph-paper lines | Distinguishes venue discovery from food browsing |
| Stadium card | Orange face, off-white art window, thick white border | Collectible illustrated destination |
| Footer | Deep blue with rounded upper corners | Brand and navigation closure |

Depth is selective. It belongs to the wordmark's black extrusion and the layered stadium cards. Article tiles remain flat, and there is no observed glass, blur, or general soft-shadow system.

## Imagery

Photography is close, vertical, and grounded in the ballpark experience. Products are frequently held in a hand. Team-branded cups, player illustrations, stadium seating, counters, and concourses provide context. The food itself fills much of each portrait: drinks have tall straws, parfaits have stacked layers, and hot dogs extend vertically through the frame.

Use natural photographic color. The blue page already supplies a strong visual filter around the image; applying a blue tint to the photographs would weaken food detail and authenticity. Maintain useful context while choosing crops, and avoid cutting away the distinctive topping, container label, or stadium cue.

Graphic artwork serves different purposes:

- The wordmark carries identity through custom lettering and a hard black extrusion.
- Gloves and pickup labels make navigation and editorial selection feel like stickers.
- The introduction uses food cutouts, partially visible in the supplied current capture.
- Stadium illustrations use architectural linework inside collectible cards.
- The Top control borrows the silhouette of a baseball home plate.

Do not apply `image-rendering: pixelated` to the photographs. Pixel character belongs to selected lettering and graphics, not the entire image system.

### Observed Asset References

No direct image-file URLs or font-file URLs were supplied. These references describe visible assets and their original-page context; they are not guessed file paths.

| Asset role | Observed treatment | Available reference |
| --- | --- | --- |
| Main wordmark | Orange lettering with black extrusion; repeated in header, introduction, and footer | Original homepage captures |
| Parfait story photo | Hand-held layered dessert with team-branded cup | Associated article href: `/articles/2026-08-15-b` |
| Smoothie story photo | Two blue drinks with straws and Lions branding | Associated article href: `/articles/2026-07-24-l` |
| Hot-dog story photo | Two hot dogs held against stadium seating | Associated article href: `/articles/2026-07-12-f` |
| Pickup stickers | Tilted white-edged colored signs | Original opening captures |
| Glove controls | White illustrated hands with dark linework | Original opening and stadium captures |
| Stadium illustration | Blue line drawing of Belluna Dome | Original lower-page captures |
| Footer marks | Main wordmark, Instagram, TikTok, and affiliated media mark | Original footer captures |

The article hrefs identify associated content, not downloadable image resources. Use authorized original artwork where available. The CSS shell cannot replace the identity carried by the wordmark, gloves, and stadium illustrations.

## Layout & Responsive Behavior

### Desktop Composition

The opening is a broad, centered three-photo stage underneath an overlapping brand. The active story begins at y 152.84; its two visible neighbors begin at y 192.84. All three have equal widths. Captions extend below the photos, followed by a small star row and a substantial blue interval before the introduction frame.

The main article collection expands to four portrait columns with approximately 105px outside gutters. Metadata stays directly on the blue field. Column widths are consistent, while text and ribbon positions remain content-dependent.

The stadium section uses a two-part composition: heading and counter on the left, card stack on the right. The footer likewise separates utility content from a large right-hand brand.

### Mobile Composition

At 390px, the opening is reorganized rather than uniformly scaled:

- A single 316px story remains visible.
- The wordmark retains strong visual prominence.
- Search and menu controls replace the visible desktop text navigation.
- Featured-caption type stays at 16px.
- The caption remains 80% of the story width but extends farther below the image.
- Large section corners reduce from 50px to 30px.
- Introduction prose changes to 16px with approximately 28.44px leading.
- Discovery-tag text reduces to 12px while its 35px pill height stays unchanged.
- The stadium counter moves beneath the card stack.
- The footer wordmark moves above a two-column navigation/social arrangement.

The mobile article grid and ranking layout are not visually documented. Their presence in the DOM and the longer document height do not establish a column count.

### Implementation Boundaries

No tablet capture, exact breakpoint, landscape state, or source media-query formula was supplied. The Quick Start uses a recommended 900px switch for its broad desktop composition, two article columns at ordinary phone widths, and one below 360px. Those choices are adaptation decisions requiring visual testing.

Retain ordinary document scrolling. Clip horizontal carousel tracks locally, without clipping protruding stickers, captions, focus indicators, or the Top badge. Offscreen duplicates should not create a page-wide horizontal scrollbar or repeated keyboard stops.

## Do’s and Don’ts

### Do

- Preserve the exact bright blue `#0384DA` and deep blue `#0468C0` as separate surface roles.
- Lead with real portrait food photography and retain venue context.
- Keep the desktop center story 40px higher than its equal-width neighbors.
- Make featured captions square, 80% wide, and independent of the photo's corner radius.
- Keep the observed 16px caption text readable on both inspected widths.
- Distinguish filled discovery tags from small outline article tags.
- Preserve the wordmark as artwork with its internal black extrusion.
- Use pixel typography selectively for navigation and compatible utility details.
- Keep desktop article tiles unboxed against the blue page.
- Retain the stadium graph paper, architectural illustrations, and visible card layers.
- Reorganize the mobile footer around a large logo above two utility columns.
- Allow longer titles and captions to increase component height.

### Don't

- Don't replace the editorial homepage with a sales funnel or invent a conversion-focused hero.
- Don't add white card containers and shadows around every article.
- Don't turn all bright accents into fixed category colors without content evidence.
- Don't recolor photographs to match the blue background.
- Don't infer the wordmark font from its empty H1 wrapper.
- Don't substitute the source stadium orange for the stronger orange inside the brand artwork.
- Don't enlarge the active story photograph when the observed emphasis is a vertical offset.
- Don't crop stickers or caption slips by applying overflow clipping to the entire tile.
- Don't treat repeated ticker text as distinct articles or dozens of unique tags.
- Don't claim autoplay, swipe, menu transitions, or ticker timing from static captures.
- Don't assume the mobile article column count from document height.
- Don't distribute the stadium card's depth treatment across the whole interface.

## Recommended Implementation Additions

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

- Give search, menu, glove, social, pagination, and Top controls explicit accessible names. Match their semantic element to their behavior: links for navigation and buttons for state changes.
- Provide at least 44px interaction targets even where the visible star or icon is smaller.
- Keep a clear keyboard focus indicator visible on both blues and on neon caption surfaces.
- If carousels autoplay, provide a pause control and stop movement while a user is interacting with their content.
- Remove inactive slides and duplicated tag/ribbon groups from keyboard navigation and redundant screen-reader output without removing meaningful article access.
- Keep a static tag index and one accessible copy of every reaction phrase available.
- Check small white text on bright blue, and blue text on white. Use the deeper blue for small-text combinations where additional contrast is needed.
- Preserve headline and caption wrapping under text zoom. Avoid fixed heights that clip three-line content.
- Provide useful photo alternatives describing the food or venue, and hide purely decorative stickers from assistive technology.
- Use responsive image sources and reserve 2:3 image space before loading. Load the initial featured image promptly and defer lower-page photographs where appropriate.
- Make an opened mobile menu manage focus, close with Escape, and return focus to its trigger.
- Honor reduced motion in both CSS and carousel JavaScript. A CSS media query alone does not stop a JavaScript timer.

## Agent Prompt Guide

### Quick Color Reference

- Featured and introduction fields: `#0384DA`.
- Article field and footer: `#0468C0`.
- Featured caption accents: `#F1FF2E`, `#27D33B`, `#A98FFF`.
- Supporting accents: `#F3BDE9`, `#6BC4FF`, `#FFA041`, `#EB5C2A`.
- Caption text: measured `#292323`.
- Dark outline token: `#202020`.
- Navigation, article titles, outlines, and glove surfaces: white.
- Wordmark orange: use the actual artwork; `#FF5A00` is only an approximate visual fallback.

### Overall Prompt

“Create an editorial homepage for a Japanese ballpark lifestyle publication inspired by BALLPARK STYLE. Use a bright-blue opening field `#0384DA`, deeper-blue article and footer fields `#0468C0`, natural 2:3 food photographs, and an authorized oversized graphic wordmark overlapping the opening photos. Show three equal-width featured stories on desktop, with the center one raised 40px. Each has rounded photography, a small pickup sticker, and a square neon caption at 80% width with 16px Japanese text. Use Zen Kaku Gothic New for Japanese text, bestTen for primary pixel navigation, and Montserrat for compatible Latin utilities. Build an unboxed four-column desktop article collection with white titles, outline tags, and colored reaction ribbons. Add illustrated stadium cards over fine blue graph paper and a home-plate-shaped Top control. At 390px, show one featured story, retain its text size, and place the footer brand above navigation and social columns. Treat unverified mobile grids and animation timing as explicit implementation choices.”

### Example Component Prompts

1. **Featured story:** “A 2:3 portrait photograph of a team-branded ballpark drink, approximately 20px rounded corners, a tilted white-edged pickup sticker, and an 80%-width neon-yellow caption overlapping the lower edge. Use dark 16px Japanese text at 23px leading, 0.8px tracking, and 16px × 22px padding. Keep the caption square and content-height driven.”
2. **Article tile:** “Place a rounded portrait food photograph directly on deep blue. Below it, add a bold white Japanese headline, a wrapping row of small white outline tags, and a thin lavender reaction ribbon with a dark border. No outer card fill or elevation shadow. Let metadata flow naturally.”
3. **Discovery tags:** “Create horizontally arranged white pills with blue venue and topic labels, 35px tall, 18px horizontal padding, and 10px gaps. Use 18px text on desktop and 12px on mobile. Provide a static accessible tag list if adding a visual loop.”
4. **Stadium collection:** “On fine bright-blue graph paper, combine a large white stadium heading with a stack of rounded illustrated cards. Give the front Belluna Dome card an orange face, thick white edge, warm off-white drawing window, fine blue architectural illustration, pennant, venue labels, and a small diamond-shaped View More sign. Use white glove controls and a pixel-style 3/6 counter.”
5. **Mobile footer:** “A deep-blue footer with 30px upper corners and a white home-plate Top badge crossing its upper-right edge. Place a large orange-and-black brand asset first, then two columns: article/ranking links on the left, social labels and icons on the right. Finish with small white copyright text.”

## Quick Start

### CSS Custom Properties

This is an implementation adaptation, not recovered source CSS. Exact colors, caption typography, discovery-pill geometry, and the documented transition tokens are preserved. Photo radii, graph-paper spacing, unmeasured component dimensions, hover displacement, and breakpoints are starting recommendations.

The adaptation keeps a conventional root font size rather than copying the source's 10px root. Font files and artwork must be supplied separately; declaring the observed family names does not load them.

For the featured stage, render a previous, active, and next story in `.feature-track`, with `.is-active` on the selected story. Put the photo, sticker, and caption inside each story link; place glove buttons as siblings of the track. This CSS supplies a responsive presentation, not carousel logic.

For articles, use an `article` wrapper with a main image/title link, a separate tag group, and a reaction ribbon. Keep tag links outside the main article link to avoid nested anchors.

```css
:root {
  /* Exact source colors */
  --col-blue: #0384da;
  --col-darkblue: #0468c0;
  --col-lightblue: #6bc4ff;
  --col-orange: #ffa041;
  --col-red: #eb5c2a;
  --col-green: #27d33b;
  --col-pink: #f3bde9;
  --col-purple: #a98fff;
  --col-yellow: #f1ff2e;
  --col-black: #202020;

  /* Semantic aliases and measured text color */
  --color-feature: var(--col-blue);
  --color-canvas: var(--col-darkblue);
  --color-caption-ink: #292323;
  --color-white: #fff;

  /* Observed family assignments; load fonts separately */
  --font-jp: 'Zen Kaku Gothic New', sans-serif;
  --font-pixel: 'bestTen', sans-serif;
  --font-latin: Montserrat, sans-serif;

  --text-caption: 16px;
  --leading-caption: 23px;
  --tracking-caption: 0.8px;
  --text-intro: 16px;
  --leading-intro: 1.777778;
  --text-discovery-tag: 12px;

  /* Approximate geometry unless noted otherwise */
  --content-max: 1228px;
  --feature-max: 1134px;
  --radius-photo: 20px;
  --radius-section: 30px;
  --caption-overlap: 32px;
  --grid-cell: 14px;
  --stadium-paper: #f8f5f1;

  /* Measured transition declarations */
  --motion-control: 100ms ease-in-out;
  --motion-brand: 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body.ballpark-page {
  margin: 0;
  color: var(--color-white);
  background: var(--color-canvas);
  font-family: var(--font-jp);
  font-size: 16px;
  line-height: 1.6;
}

.ballpark-page img {
  display: block;
  max-width: 100%;
}

.ballpark-page a {
  color: inherit;
  text-decoration: none;
}

.ballpark-page button {
  font: inherit;
  cursor: pointer;
}

.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  height: 59px;
}

.header-brand {
  position: absolute;
  top: 28px;
  left: 23px;
  width: min(294px, 76vw);
  margin: 0;
  transition: transform var(--motion-control);
}

.header-actions {
  position: absolute;
  top: 24px;
  right: 14px;
  display: flex;
  gap: 8px;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 8px;
  border: 0;
  color: white;
  background: transparent;
}

.site-nav {
  display: none;
}

.feature-section {
  padding: 100px 0 55px;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background: var(--color-feature);
}

.feature-stage {
  position: relative;
  width: calc(100% - 74px);
  margin-inline: auto;
}

.feature-track {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.feature-card {
  position: relative;
  min-width: 0;
}

.feature-card:not(.is-active) {
  display: none;
}

.feature-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

.pickup-sticker {
  position: absolute;
  top: 15%;
  right: -12px;
  width: 66px;
  pointer-events: none;
}

.feature-caption {
  position: relative;
  z-index: 1;
  width: 80%;
  margin: calc(-1 * var(--caption-overlap)) auto 0;
  padding: 16px 22px;
  border: 1px solid var(--col-black);
  border-radius: 0;
  color: var(--color-caption-ink);
  background: var(--col-yellow);
  font-size: var(--text-caption);
  font-weight: 400;
  line-height: var(--leading-caption);
  letter-spacing: var(--tracking-caption);
  overflow-wrap: anywhere;
}

.feature-card[data-tone='green'] .feature-caption {
  background: var(--col-green);
}

.feature-card[data-tone='purple'] .feature-caption {
  background: var(--col-purple);
}

.feature-control {
  position: absolute;
  z-index: 3;
  top: 41%;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: transparent;
  transform: translateY(-50%);
}

.feature-control.is-prev {
  left: -25px;
}

.feature-control.is-next {
  right: -25px;
}

.feature-pagination {
  display: none;
}

.intro-section {
  padding: 30px 0 100px;
  border-radius: 0 0 var(--radius-section) var(--radius-section);
  background: var(--color-feature);
}

.intro-panel {
  width: min(80%, 1140px);
  margin-inline: auto;
  border: 1px solid white;
  border-radius: 25px;
}

.intro-heading {
  display: grid;
  grid-template-columns: 30.5% minmax(0, 1fr);
  align-items: center;
  min-height: 67px;
  border-bottom: 1px solid white;
}

.intro-label {
  display: grid;
  place-items: center;
  align-self: stretch;
  border-right: 1px solid white;
  font-family: var(--font-pixel);
}

.intro-brand {
  padding-inline: 20px;
  transition: transform var(--motion-brand);
}

.intro-copy {
  margin: 0;
  padding: 25px 20px 20px;
  font-size: var(--text-intro);
  line-height: var(--leading-intro);
}

.discovery-lane {
  overflow-x: auto;
  padding-block: 6px;
}

.discovery-track {
  display: flex;
  gap: 10px;
  width: max-content;
  padding-inline: 20px;
}

.discovery-tag {
  display: block;
  flex: none;
  padding-inline: 18px;
  border-radius: 120px;
  color: var(--col-blue) !important;
  background: white;
  font-size: var(--text-discovery-tag);
  line-height: 35px;
  white-space: nowrap;
}

/* Recommended mobile grid; original middle layout was not captured. */
.article-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px 18px;
  width: min(var(--content-max), calc(100% - 40px));
  margin: 80px auto;
}

.article-card {
  min-width: 0;
}

.article-photo {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: var(--radius-photo);
}

.article-title {
  margin: 24px 0 0;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 6px;
  margin-top: 22px;
}

.article-tag {
  max-width: 100%;
  padding: 2px 7px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 12px;
  line-height: 19px;
  overflow-wrap: anywhere;
}

.reaction-ribbon {
  height: 28px;
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--col-black);
  color: var(--color-caption-ink);
  background: var(--ribbon-color, var(--col-pink));
  font-family: var(--font-pixel);
  font-size: 14px;
  line-height: 26px;
  white-space: nowrap;
}

/* Static by default: no source ticker timing was supplied. */
.reaction-track {
  display: inline-block;
}

.stadium-section {
  display: grid;
  grid-template-areas: 'heading' 'deck' 'count';
  gap: 36px;
  padding: 80px 38px 110px;
  background-color: var(--col-blue);
  background-image:
    linear-gradient(rgb(255 255 255 / 12%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 12%) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}

.stadium-heading {
  grid-area: heading;
  align-self: end;
  text-align: center;
}

.stadium-stack {
  grid-area: deck;
  position: relative;
  isolation: isolate;
  width: min(100%, 350px);
  margin-inline: auto;
}

/* Approximate layered-card geometry; use actual artwork when available. */
.stadium-stack::before,
.stadium-stack::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 4px -12px;
  border: 6px solid white;
  border-radius: 40px;
  background: var(--col-green);
  transform: rotate(-4deg);
}

.stadium-stack::after {
  background: var(--col-purple);
  transform: rotate(4deg);
}

.stadium-card {
  display: block;
  padding: 18px;
  border: 8px solid white;
  border-radius: 42px;
  background: var(--col-orange);
}

.stadium-art {
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 12px;
  border-radius: 30px;
  background: var(--stadium-paper);
  object-fit: contain;
}

.stadium-counter {
  grid-area: count;
  margin: 0;
  font-family: var(--font-pixel);
  font-size: 22px;
  text-align: center;
}

.site-footer {
  position: relative;
  padding: 80px 38px 20px;
  border-radius: var(--radius-section) var(--radius-section) 0 0;
  background: var(--color-canvas);
}

.footer-layout {
  display: grid;
  grid-template-areas:
    'brand brand'
    'nav social'
    'copyright copyright';
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 30px 22px;
}

.footer-brand {
  grid-area: brand;
  justify-self: center;
  width: min(100%, 320px);
}

.footer-nav {
  grid-area: nav;
  display: grid;
  align-content: start;
  gap: 16px;
}

.footer-social {
  grid-area: social;
}

.footer-utility,
.footer-copyright {
  font-family: var(--font-latin);
  font-size: 12px;
}

.footer-copyright {
  grid-area: copyright;
  margin: 30px 0 0;
  text-align: center;
}

.top-control {
  position: absolute;
  top: -35px;
  right: 30px;
  width: 60px;
  height: 60px;
}

/* Recommended feedback; the original transform distance is unknown. */
@media (hover: hover) {
  .interactive-label:hover {
    transform: translateY(-2px);
  }
}

.interactive-label {
  transition: transform var(--motion-control);
}

.ballpark-page :focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 4px;
}

/* Recommended breakpoint, not a recovered source media query. */
@media (min-width: 900px) {
  :root {
    --radius-section: 50px;
    --caption-overlap: 64px;
    --text-intro: 18px;
    --text-discovery-tag: 18px;
  }

  .site-header {
    height: 104px;
  }

  .header-brand {
    top: 35px;
    left: 6.6vw;
    width: 510px;
  }

  .header-actions {
    top: 68px;
    right: 10vw;
  }

  .menu-toggle {
    display: none;
  }

  .site-nav {
    position: absolute;
    top: 82px;
    right: calc(10vw + 68px);
    display: flex;
    gap: 42px;
    font-family: var(--font-pixel);
    font-size: 20px;
    line-height: 20px;
  }

  .feature-section {
    padding: 153px 0 0;
  }

  .feature-stage {
    width: min(var(--feature-max), calc(100% - 120px));
  }

  .feature-track {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;
    align-items: start;
  }

  .feature-card:not(.is-active) {
    display: block;
    margin-top: 40px;
  }

  .feature-control {
    top: 49%;
    width: 72px;
    height: 72px;
  }

  .feature-pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    color: var(--col-darkblue);
    font-size: 20px;
    line-height: 22px;
  }

  .feature-pagination [aria-current='true'] {
    color: white;
  }

  .intro-section {
    padding-bottom: 130px;
  }

  .intro-heading {
    min-height: 106px;
    grid-template-columns: 157px minmax(0, 398px);
  }

  .intro-copy {
    max-width: 460px;
    padding: 40px 50px;
  }

  .article-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 100px 55px;
    width: min(var(--content-max), calc(100% - 212px));
  }

  .article-title {
    margin-top: 28px;
    font-size: 20px;
    line-height: 1.35;
  }

  .stadium-section {
    grid-template-areas: 'heading deck' 'count deck';
    grid-template-columns: 1.3fr 1fr;
    padding-inline: 7.3vw;
  }

  .site-footer {
    padding: 145px 7.3vw 30px;
  }

  .footer-layout {
    grid-template-areas:
      'nav brand'
      'social brand'
      'copyright copyright';
    grid-template-columns: 1fr 1fr;
  }

  .footer-brand {
    justify-self: end;
    width: min(100%, 550px);
  }

  .footer-nav {
    display: flex;
    gap: 30px;
  }

  .footer-copyright {
    text-align: right;
  }

  .top-control {
    right: 7.3vw;
    width: 90px;
    height: 90px;
  }
}

@media (max-width: 359px) {
  .article-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ballpark-page *,
  .ballpark-page *::before,
  .ballpark-page *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
```

The stadium art-window ratio, simplified card stack, mobile article grid, and footer spacing above are recommended approximations. Supply the actual wordmark, pickup labels, glove artwork, stadium illustrations, and Top badge separately. Search, menu state, carousel controls, selected indicators, and any ticker movement require an accessible controller beyond this CSS.

### 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-ballpark-blue: var(--col-blue);
  --color-ballpark-deep: var(--col-darkblue);
  --color-ballpark-yellow: var(--col-yellow);
  --color-ballpark-green: var(--col-green);
  --color-ballpark-purple: var(--col-purple);
  --color-ballpark-pink: var(--col-pink);
  --color-ballpark-orange: var(--col-orange);
  --color-ballpark-ink: var(--col-black);
  --color-caption-ink: #292323;

  --font-editorial: var(--font-jp);
  --font-dot: var(--font-pixel);
  --font-utility: var(--font-latin);

  --text-story-caption: 16px;
  --text-article-desktop: 20px;
  --text-discovery: var(--text-discovery-tag);

  --radius-photo: 20px;
  --radius-section-panel: var(--radius-section);
  --spacing-caption-x: 22px;
  --spacing-caption-y: 16px;
}
```

## Sources & Evidence

- **Inspected original and final website:** [BALLPARK STYLE](https://ballparkstyle.com/). Both supplied URLs are identical; the recorded HTTP status is 200.
- **Capture timestamp:** September 12, 2026, 14:07:22.710 UTC / 23:07:22.710 JST. This reference analyzes the supplied browser evidence rather than claiming a separate browsing session.
- **Desktop evidence:** three original-page captures at 1440 × 1000, showing the opening story stage, an article-grid region, and the stadium/footer region. Recorded document height: approximately 5939.67px.
- **Mobile evidence:** two original-page captures at 390 × 844, showing the opening story and introduction edge, followed by the stadium/footer region. Recorded document height: approximately 6768.59px.
- **Rendered DOM and computed styles:** source color variables, family declarations, selected element rectangles, padding, line heights, border radii, transition declarations, and original-page link destinations at both viewport sizes.
- **Coverage limitation:** the sampled element lists are dominated by repeated discovery tags and do not supply equivalent computed detail for later article, ranking, stadium, and footer components. Those sections use screenshot estimates or are explicitly marked unverified.
- **Capture-method limitation:** the supplied observation included at least five seconds of initial observation and readiness checks for layout, finite motion, and images. Perpetual animations were paused during readiness checking and resumed. These procedures support settled captures, but do not establish complete interaction behavior or reveal every delayed state.
- **Unverified:** exact intermediate scroll offsets, tablet layouts, source breakpoints, font files, image-file URLs, hover outcomes, search, opened-menu behavior, carousel configuration, autoplay, ticker timing, and linked-page content.

All CSS and Tailwind examples are reusable recommendations derived from the documented appearance. They were not executed or visually tested as part of this evidence-only analysis.