# Worker's Resort — Style Reference

> A workplace editorial archive organized like a set of blue folders, currently introduced by a community-transition notice.

**Original URL:** [https://www.workersresort.com/](https://www.workersresort.com/)
**Final URL:** [https://www.workersresort.com/](https://www.workersresort.com/)
**Theme:** light in the supplied captures; the darkened page is an overlay state.
**Inspected:** September 23, 2026, Japan Standard Time. Supplied retrieval timestamp: September 22, 2026, 17:55:14.701 UTC.
**Viewports:** 1440 × 1000 desktop and 390 × 844 mobile, in CSS pixels.
**Scope:** the current public homepage, including its open community notice, editorial lead area, numbered folder stack, community introduction, series, article collections, keyword navigation, promotional tiles, and footer. Desktop captures show the top, article area, and footer; mobile captures show the top and footer. Additional layout measurements come from the supplied rendered DOM.

Worker's Resort combines an oversized, tightly composed serif wordmark with a practical Japanese editorial interface. Cool gray paper, charcoal text, clear blue accents, and slate secondary elements provide a restrained frame for colorful event graphics, interview portraits, and workplace photography. Rounded folders and compact pills introduce a recognizable filing metaphor without turning every article into a decorated card.

The current first impression is dominated by a centered notice. It states that the service shifted toward an offline community in April 2026 and that archive access is limited to members. Login and conditional registration links sit inside the notice. The substantial editorial homepage remains visible underneath it, and the notice persists across the supplied scroll positions. This reference describes that current state alongside the underlying content system.

## How to Read This Reference

- **Measured** means a value appears in the supplied element rectangles, computed styles, or custom properties. Values are rounded where excessive precision would not help implementation.
- **Calculated** means a value follows directly from those measurements, such as a column gap or a source token evaluated at an inspected viewport.
- **Estimated** means a dimension or appearance is judged from an original-page screenshot. The notice container and its heading were not included in the sampled element styles.
- **Recommended** means an implementation choice for reuse. Breakpoints, accessibility behavior, and incomplete decorative shapes in the Quick Start are recommendations.
- All token names introduced here are descriptive aliases unless explicitly identified as source custom properties.
- A computed declaration does not prove a completed interaction. Likewise, an offscreen DOM element does not prove that its associated menu or panel was opened.
- The supplied screenshots retain the notice and its backdrop. Use computed colors for the underlying site instead of sampling the dimmed page as a new palette.

## Tokens — Colors

### Default Palette

| Name | Value | Suggested token | Evidence and role |
| --- | --- | --- | --- |
| Cool paper | `#f0f2f4` | `--wr-paper` | Measured on body, header, and main. The dominant page canvas. |
| Charcoal | `#27272a` | `--wr-ink` | Measured body text and floating navigation fills. |
| Office blue | `#228acb` | `--wr-blue` | Measured header login, trend keyword chips, and About tile. The folder and notice button visually use the same blue family. |
| Slate | `#878c9e` | `--wr-slate` | Measured introductory navigation, secondary copy, and Contact tile. |
| White | `#ffffff` | `--wr-white` | Measured lead article surfaces, community tile, and reversed text. |
| Pale gray | `#d9dde1` | `--wr-pale` | Measured mobile Keywords heading. Reusing this for subtle borders is a recommendation. |
| Deep charcoal | `#1b1b1b` | `--wr-deep` | Measured on a search submit control represented in the DOM. The selected-content panel is visually dark, but its exact fill was not supplied. |
| Notice veil | Approximately `rgb(0 0 0 / 60%)` | `--wr-veil` | Screenshot estimate based on the dimmed known paper color. No backdrop computed style was supplied. |

The notice surface visually matches the cool paper canvas. Treat that match as a screenshot-supported approximation, not a separately measured dialog background.

Blue is used for membership, discovery, and selected editorial surfaces. It is not a universal category code. Article taxonomy chips in the screenshots are small charcoal pills, while the larger Trend Keywords chips have blue rectangular fills and modest corner rounding.

The numbered folder stack combines blue, slate, and a dark rear layer. Their visible fills align with the wider palette, but the sampled folder anchors themselves have transparent backgrounds; the painted shapes belong to other styling layers not included in the evidence.

### Theme Presets

No alternate theme was verified. A small two-tone switch-like control is visible beside the desktop search icon, but its function and activated appearance were not exercised. Do not derive a dark theme from the modal backdrop or publish invented theme presets.

The supplied custom properties also contain general WordPress colors, gradients, and shadows. Their presence does not establish their use in this design. The observed interface does not support adopting those presets as its brand palette.

## Tokens — Typography

### Japanese Editorial Text

**Measured body stack:** `TazuganeGothicStdN-Regular, 游ゴシック体, YuGothic, '游ゴシック Medium', 'Yu Gothic Medium', 游ゴシック, 'Yu Gothic', sans-serif`.

The regular face supplies body copy, navigation pills, and descriptions. Article headings and the header login label declare `TazuganeGothicStdN-Medium` as a separate family.

Both regular and medium samples can report `font-weight: 400`. Preserve the distinction between the named faces rather than assuming the medium appearance comes from a numeric weight of 500 or 700. The computed family declarations are confirmed; font files and licensing information were not supplied.

Japanese editorial titles have generous leading, usually `1.75`. This allows long, informative headlines to remain readable even when a reaction counter occupies part of the title row.

### English Display and Metadata

**Measured family:** `forma-djr-display, sans-serif`.

Use this family for English navigation, community display headings, category labels, episode numbers, and compact metadata. Display and navigation samples commonly use weight `500`; article metadata uses `400`.

English display lettering is compact and economical. Some labels use tracking near `0.02em`: the 15px introductory navigation has 0.3px tracking, and 35px information-tile headings have 0.7px tracking.

### Brand Wordmark

The large two-line Worker's Resort mark is a distinctive serif graphic, with tightly interlocking letterforms and a staggered second line. Its typeface and asset format were not identified in the supplied evidence.

Treat it as brand artwork. Do not substitute a guessed serif font and call that an exact reproduction. A smaller version appears in the persistent header at later scroll positions and another appears in the footer.

### Type Scale

| Role | Desktop | Mobile | Family or evidence |
| --- | --- | --- | --- |
| Header login label | `12px / 21px` | Same | Tazugane medium face, measured |
| Floating navigation | `13px / 13px` | Same | Tazugane regular, measured |
| Notice explanatory copy | `16px / 28px` | `12px / 21px` | Tazugane regular, measured |
| Notice heading | Approximately `26px / 39px` | Approximately `18px / 25px` | Screenshot estimate; heading declaration unavailable |
| Notice action labels | Approximately `13–14px` | Approximately `13–14px` | Screenshot estimate; sampled anchor's inherited 10px is not reliable evidence of the visible child label |
| Introductory tagline | `20px / 35px` | `14px / 24.5px` | Tazugane regular, measured |
| Lead article title | `34px / 59.5px` | `16px / 28px` | Tazugane medium, measured |
| Latest article title | `16px / 28px` | `14px / 24.5px` | Tazugane medium, measured |
| Folder article title | `14px / 24.5px` | Same | Tazugane medium, measured |
| Article metadata | `12px / 21px` | Same | Forma DJR Display, measured |
| Community display heading | `53px / 60.95px` | `36px / 41.4px` | Forma DJR Display, weight 500, measured |
| Information-tile heading | `35px / 31.5px` | `26px / 23.4px` | Forma DJR Display, weight 500, measured |
| Information-tile description | `14px / 24.5px` | Same | Tazugane regular, measured |
| Desktop category labels | `18px / 25.2px` | Different mobile arrangement | Forma DJR Display, measured |
| Series article title | `16px / 28px` | `14px / 24.5px` | Tazugane medium, measured |
| Keywords directory heading | Not sampled separately | `40px / 40px` | Forma DJR Display, pale gray, measured |

Section-heading wrappers also report 24px on desktop and 22px on mobile. Those wrappers contain multiple pieces of text; these values should not be assigned automatically to every English heading inside them.

## Tokens — Spacing & Shapes

### Responsive Unit

The source root is **10px at both inspected widths**, so one source `rem` equals 10px in these observations. The site mixes rem-based type tokens with pixel-based spacing clamps.

For example:

```css
/* Observed source properties; source root is 10px. */
--font-16-34: clamp(1.6rem, 4vw, 3.4rem);
--font-14-16: clamp(1.4rem, 2vw, 1.6rem);
--font-26-35: clamp(2.6rem, 5vw, 3.5rem);
--space-24-40: clamp(24px, 4vw, 40px);
--w-max-02: min(calc(100vw - 160px), 1360px);
```

Do not paste these rem values into a conventional 16px-root project without conversion. The Quick Start uses pixel equivalents to preserve the measured scale.

### Spacing Scale

These are confirmed source properties. Their evaluated values do not prove that every component uses them.

| Source token | Formula | At 1440px | At 390px |
| --- | --- | --- | --- |
| `--space-15-24` | `clamp(15px, 2vw, 24px)` | 24px | 15px |
| `--space-20-26` | `clamp(2rem, 4vw, 2.6rem)` | 26px | 20px |
| `--space-24-40` | `clamp(24px, 4vw, 40px)` | 40px | 24px |
| `--space-32-60` | `clamp(32px, 8vw, 60px)` | 60px | 32px |
| `--space-60-120` | `clamp(60px, 14vw, 120px)` | 120px | 60px |
| `--space-100-150` | `clamp(100px, 22vw, 150px)` | 150px | 100px |
| `--space-200-230` | `clamp(200px, 16vw, 230px)` | 230px | 200px |

The visual rhythm combines small gaps inside controls with substantial separation between editorial sections. Do not replace the measured 40px desktop card gaps with uniformly tight dashboard spacing.

### Border Radius

| Element | Value | Status |
| --- | --- | --- |
| Lead article surface | 6px | Measured |
| Trend keyword chip | 6px | Measured |
| Information tile | 16px | Measured at both widths |
| Header login capsule | 18px | Measured |
| Floating navigation pill | 24px | Measured |
| Notice action wrapper | 26px | Measured |
| Notice panel | Approximately 16px | Screenshot estimate |
| Folder silhouette | Rounded body and raised tab | Visible; exact shape declarations unavailable |
| Source general radius | `clamp(16px, 2vw, 20px)` | Defined as `--radius-01`; not a universal component radius |

### Layout Measurements

| Element | Desktop, 1440 × 1000 | Mobile, 390 × 844 | Status |
| --- | --- | --- | --- |
| Header | 60px high | 60px high | Measured |
| Header login | Approximately 82 × 29px | Same | Measured |
| Header brand link | 102 × 40px | Same | Measured; initially translated upward |
| Main outer box | x = 20px, width = 1400px | x = 0, width = 390px | Measured |
| Primary content bounds | x = 80–1360px, width = 1280px | x = 24–366px, width = 342px | Measured from aligned elements |
| Lead article | 840px wide | 342px wide | Measured |
| Secondary lead article | 400px wide | 342px wide | Measured |
| Folder anchors | 380px wide | 322px wide | Measured; raised tabs extend beyond anchor geometry |
| Latest sidebar | Approximately 290px wide | Moved out of the desktop arrangement | Screenshot and element alignment |
| Latest article area | 950px wide, three 290px columns | One horizontal row of 257.39px cards | Measured/calculated |
| Latest card gap | 40px | 16px | Calculated from adjacent rectangles |
| Information tiles | Three 400 × 230px tiles, 40px gaps | 257.39 × 230px tiles, 16px gaps | Measured/calculated |
| Notice panel | Approximately 680 × 436px at x = 380, y = 282 | Approximately 351 × 431px at x = 19.5, y = 206.5 | Screenshot estimate |
| Notice paragraph column | 477.47px | 301px | Measured |
| Notice login action | 132.94 × 46.80px | Same | Measured |
| Notice registration action | 276.09 × 46.80px | Same | Measured |
| Notice action gap | 20px horizontally | 10px vertically | Calculated |
| Floating navigation pill | 41px high | 41px high | Measured |
| Pill bottom clearance | 24px | 24px | Calculated; enclosing rail extends lower |
| Document height | Approximately 9837px | Approximately 11064px | Measured; content and animation dependent |

## Components

### Persistent Header

**Role:** compact utility access and identity during a long editorial browse.

A 60px paper-colored strip spans the viewport with a fine lower divider. Desktop controls align to the 80px content inset. Mobile uses 24px side padding.

The left cluster contains a three-line menu icon and search icon. Desktop also shows a small two-tone switch-like control. Its purpose is unverified, and it is not visible in the mobile captures. The right side contains an approximately 82 × 29px blue login capsule with a person symbol and the label `ログイン`.

The compact brand mark is absent from the initial visible header and present in the scrolled captures. Its anchor is measured at 102 × 40px, with an initial y-coordinate of −30px and a declared transform transition. This supports a changing header-brand state, but the scroll threshold and full state logic were not supplied.

Repeated login text exists in the DOM. The screenshots show one visible label; do not reproduce both copies as separate controls.

### Community Transition Notice

**Role:** communicates the current membership and service model before further browsing.

An opaque, cool-paper panel sits above a dark translucent veil covering the entire viewport, including the header and floating dock. It is horizontally and vertically centered in both viewport sizes and remains in the same viewport position across the supplied scroll captures.

Its anatomy is:

1. A small close cross near the upper-right corner.
2. A centered three-line announcement naming the service and its April 2026 community transition.
3. A separate archive-access explanation.
4. A blue login action and an outlined registration action.
5. A centered paragraph explaining events and email information for office-management professionals.

Desktop uses an approximately 680px panel and a 477px explanatory text column. Mobile uses approximately 90% of the viewport width, with a 301px text column and about 25px inner side clearance. The heading reduces from an estimated 26px to 18px; explanatory copy changes from measured 16px to 12px.

The two actions retain their measured intrinsic sizes when the layout changes. Desktop places them side by side with a 20px gap. Mobile stacks them with a 10px gap, leaving the shorter login capsule centered above the longer registration capsule.

The observed action destinations are `/login/` and `/registration/`. The close control is visible, but dismissal, Escape handling, focus trapping, persistence between visits, and registration eligibility were not tested. The capture sequence traversed the background document while the notice remained open; a locked background should therefore be described as a recommended addition, not existing behavior.

### Lead Editorial Area

**Role:** gives the publication a strong identity while surfacing current articles.

The desktop top area is asymmetrical. A large two-line wordmark occupies the left, with a Japanese research-network tagline above it. Five small English navigation links occupy the upper-right area in two columns. Their measured type is 15px Forma DJR Display, weight 500, with 0.3px tracking and slate text.

Below the wordmark, the main article is 840px wide. A secondary article occupies a 400px right column below the folder stack. The 40px separation and shared outer alignment connect these unequal blocks.

Lead articles use white surfaces with 6px corners. The main title is 34px with 59.5px leading on desktop, creating a genuinely editorial headline rather than a short promotional slogan. On mobile, both lead articles are 342px wide, vertically arranged, and their titles use 16px / 28px.

The current lead image is a colorful office-event graphic. Its lettering is part of the editorial artwork. Preserve that asset as content instead of translating its colors and embedded text into global interface tokens.

### Numbered Folder Stack

**Role:** presents three linked articles as a distinctive layered index.

Three overlapping folder shapes sit in the desktop right column. Each has a raised tab, a large white numeral, an image, a compact Japanese title, and category/date metadata. The rear layer is dark, the intermediate layer slate, and the front visible layer blue.

Measured anchor width is 380px on desktop and 322px on mobile, with 35px vertical and 23px horizontal padding. Alternating horizontal positions differ by 20px. The painted tab rises above the anchor rectangle, so the anchor's reported zero border radius and transparent background do not describe the complete visible folder.

The front image is approximately square: about 334px wide on desktop and 276px wide on mobile. These sizes follow from the measured anchor width minus its horizontal padding. The image's own rectangle was not included, so the square treatment is a visual estimate.

Titles use 14px / 24.5px medium Japanese type and metadata uses 12px / 21px Forma. Small `PR` markers appear on applicable content.

On mobile, the stack remains present after the two lead article cards. It is not simply removed to fit the phone. Source animations declare a 20-second infinite cycle for all three folders; the complete motion path and ordering changes were not supplied.

### Community Introduction and Trend Keywords

**Role:** connects the article archive to membership and topic discovery.

The community introduction uses a multiline English display heading, measured at 53px on desktop and 36px on mobile. A compact member indicator combines the word Member with the observed count 534. That count is captured content, not a reusable hardcoded design value.

Below it is a 300px-wide explanatory paragraph in slate, 14px / 24.5px, followed by a rounded link labeled `会員登録について`. Its observed destination is `/about/`.

Trend Keywords uses blue chips with white 14px labels, `8px 14px` padding, and 6px corners. Desktop chip coordinates form multiple rows. At 390px, the chips occupy a single horizontal line extending well beyond the viewport. This confirms an overflow arrangement; touch scrolling, dragging, and automatic movement were not exercised.

### Series Contents

**Role:** packages related reporting into recognizable editorial series.

The featured series contains its title, episode count, update date, a rounded more link, and two prominent article entries. Desktop entries are 580px wide and sit 40px apart. Mobile entries become full-width 342px blocks arranged vertically.

Each entry separates its episode number, such as `#3`, from its Japanese headline. The sampled featured titles and episode labels use white text. The exact surrounding background fill was not recorded, so do not invent a measured section color from those foreground values alone.

Further series use landscape cover images, a title and update line, two numbered article links, and a more action. Desktop cover-link rectangles are approximately 290.61 × 193.73px, directly confirming a 3:2 shape. On mobile they become 342 × 228px, followed by their text content.

Numbered text links use a 40px number column. The measured remaining column is approximately 844px in a wide desktop row and 302px on mobile. Keep this explicit number/content alignment instead of placing the number in an unrelated badge.

### Information Tiles

**Role:** provides routes to About, Research Community, and Contact.

Three equal 400 × 230px tiles form a desktop row. About is blue with white text, Research Community is white with a blue heading and charcoal copy, and Contact is slate with white text.

Each tile has 16px corners and `20px 15px` padding. English headings use a compact line height of 0.9: 35px / 31.5px on desktop and 26px / 23.4px on mobile. Supporting copy remains 14px / 24.5px.

On mobile, the tiles remain in one horizontal row at approximately 257.39px wide with 16px gaps. A portion of the next tile can remain visible, communicating that the row continues. These cards should not be automatically converted into three full-width stacked panels.

### Latest Articles and Category Navigation

**Role:** exposes recent reporting through a dense but orderly editorial collection.

Desktop combines a roughly 290px category/search column with a 950px article area. The category panel lists Facility, Design, Technology, Culture, Style, and Research Community, with 18px English labels, thin separators, and small directional marks. A separate search field sits below it.

The article area uses three 290px columns and 40px horizontal and vertical gaps. Nine entries are represented in the supplied DOM. Cards have transparent wrappers, landscape imagery, multiline headlines, small reaction counters, topic pills, and compact metadata. They are not all white rounded containers.

On mobile, all nine article anchors share the same y-coordinate and advance horizontally by approximately 273.39px: a 257.39px card plus a 16px gap. This is a horizontal article rail. Mobile category choices, including ALL, appear later in the text flow rather than retaining the desktop sidebar position. The specific mobile control type was not established.

The article image area is consistent with 3:2 proportions: desktop title positions leave approximately 193.33px for a 290px-wide image plus a 20px gap; mobile positions leave approximately 171.59px for a 257.39px-wide image plus a 14px gap. These are calculated layout relationships, not supplied image-element measurements.

### Article Metadata, Reactions, and Access Marks

**Role:** adds editorial context without overwhelming the headline.

A typical card stacks landscape artwork, a headline/reaction row, optional topic pills, and a category/date line. Dates use dotted numeric formatting, such as `2026.04.08`. Category labels use compact English typography.

In the 290px desktop cards, sampled headline widths are around 215px. Mobile headlines occupy around 182px of a 257px card. Approximately 75px therefore remains for the reaction indicator and its separation at both sizes. Preserve this relationship when adjusting the card width.

The screenshots show a thin outlined capsule containing a clapping-hands symbol and a number. This is a reaction-count presentation; incrementing, authentication requirements, and persistence were not tested.

Small folder-and-lock marks appear over some images, visually reinforcing the membership context. Their click behavior was not inspected. Retain a textual indication of restricted access in an accessible adaptation instead of relying only on the pictogram.

### Keyword Directory and Popular Articles

**Role:** offers topic-led and popularity-led routes into the archive.

The keyword directory is distinct from Trend Keywords. Its mobile links form two equal 171px columns inside the 342px content width. Measured rows are 53px high with `16px 12px 16px 0` padding and 14px / 21px text. Its English heading is 40px, pale gray, and tracked by 0.8px.

Popular Articles contains linked titles, categories, keywords, and dates. The text evidence confirms older archive entries alongside newer homepage content. Their age is content information, not a reason to reconstruct an earlier homepage design.

The page also includes a linked promotion for a separate work-related media service. Its destination is present in the DOM, but that destination was not inspected.

### Selected Contents

**Role:** gives curated recommendations a stronger visual enclosure near the bottom of the page.

The desktop bottom capture shows a dark selected-content region containing pale horizontal article rows. Visible rows pair a substantial image on the left with a headline, reaction capsule, and compact taxonomy on the right. One visible image is a green interview graphic; another is a seated portrait.

A visible row is approximately 944px wide and 198px high, estimated from the screenshot. The dark field ends before the right edge of the overall page panel, leaving a pale region beside it. Do not assume this section is a full-viewport black band.

Exact row CSS, the full lower-section layout, and its mobile transformation were not included in the sampled styles. Use this component's contrast and image/text relationship as the confirmed design direction, while treating a new implementation's dimensions as recommendations.

### Floating Navigation Dock

**Role:** provides quick access to major content destinations during browsing.

A pale rounded enclosure groups six charcoal pills and an upward-arrow affordance. Observed labels include `記事一覧`, `特集`, `海外の働き方`, `リサーチ記事`, `注目キーワード`, and `人気記事`.

Pills use white 13px text, 13px line height, `14px 20px` padding, 24px corners, and 5px gaps calculated from their positions. Their visible height is 41px. Desktop centers the complete dock near the bottom; mobile keeps its intrinsic item widths, with later items extending beyond the viewport.

The recorded links navigate to content routes, including `/articles/`, `/series/`, and `/ranking/`. They are not established as same-page section anchors. The upward arrow's action was not tested.

The dock appears in the top and middle captures but is absent from the supplied footer captures. The rule governing that disappearance was not provided. It also sits below the notice veil, rather than remaining undimmed above the modal.

### Registration Tiles and Footer

**Role:** closes the editorial experience with membership, navigation, and operator identity.

Near the end, the mobile capture exposes a blue circular registration treatment beside a dark Research Community tile. The DOM also includes a Series Contents destination. Their full interaction and layout rules are outside the supplied measurements.

The desktop footer uses a large brand mark at the left, compact English navigation in the middle, and an operator mark and utility links at the right. Social symbols appear toward the lower-left edge. The mobile capture shows the operator block and copyright in a vertically extended footer, partly covered by the persistent notice.

The inspected original page independently identifies FRONTIER CONSULTING Co., Ltd. through its visible mark, copyright, and `運営会社` link. No production-credit assignment is established by the inspected page evidence.

## Tokens — Motion & Interaction

### Recorded Motion Declarations

| Element | Supplied declaration | What can be concluded |
| --- | --- | --- |
| Compact header brand | `transform 1.2s cubic-bezier(0.12, 0.88, 0.32, 1)` | A transform transition is defined; scrolled captures show a different brand position. |
| Article and series anchors | `transform 1.4s cubic-bezier(0.12, 0.88, 0.32, 1)` | Long eased transforms are defined; the trigger and travel distance are unverified. |
| Information tiles | `transform 0.6s cubic-bezier(0.12, 0.88, 0.32, 1)` | A shorter transform treatment is defined. |
| Floating navigation pills | `scale 0.3s` | Scale changes can transition; target scale and trigger were not supplied. |
| Trend keyword chips | `transform 0.3s` | Transform feedback is defined; its endpoint is unknown. |
| Introductory English links | `color 0.3s linear` | Color changes transition over 300ms; target color was not captured. |
| Member label | Opacity `0.4s linear`, transform `1s` with the source ease-out; both delayed `0.6s` | Staged label motion is declared. |
| Member count | Same durations, delayed `0.75s` | The count is delayed 150ms after its label. |
| Rear folder | `20s cubic-bezier(1, 1.26, 0.92, 0.89) infinite thiCard` | Continuous animation is declared. |
| Middle folder | `20s cubic-bezier(0.69, 0.92, 0.3, 0.21) infinite secCard` | Continuous animation is declared. |
| Front folder | `20s cubic-bezier(0.28, 0.53, 0.04, -0.06) infinite firstCard` | Continuous animation is declared. |

The reusable source ease-out is `cubic-bezier(0.12, 0.88, 0.32, 1)`. Other defined easing tokens include two in-out curves and a pronounced overshoot curve. Their presence alone does not establish which visible components use them.

Full folder keyframes were not supplied. Do not invent rotations, drag mechanics, or a specific ranking permutation and present them as observed. The Quick Start uses a static stack.

A source variable named `--blur-hover` contains `blur(30px)`, but its application was not supplied. It is not evidence of a blurred modal backdrop. Similarly, Swiper-related custom properties do not independently verify dragging, autoplay, or snap behavior.

### Interaction Limits

Scrolling and multiple captured document positions are supported by the evidence. Menu opening, search submission, notice dismissal, theme changes, article reactions, login, registration, horizontal dragging, and reduced-motion handling were not exercised.

The supplied capture process waited for layout and finite-motion stability and temporarily paused perpetual motion during readiness checks. These precautions improve capture consistency but do not reveal an entire animation cycle or prove that all delayed content appeared.

## Surfaces

| Layer | Appearance | Purpose and evidence |
| --- | --- | --- |
| Page canvas | Solid cool gray `#f0f2f4` | Measured foundation for the long editorial page. |
| Lead article | White, 6px corners | Measured contained editorial feature. |
| Standard article grid | Transparent wrappers | Measured; imagery and typography provide separation. |
| Information tiles | Blue, white, or slate; 16px corners | Measured navigation surfaces. |
| Folder stack | Solid overlapping silhouettes with raised tabs | Observed graphic depth, not a general shadow system. |
| Selected-content enclosure | Dark field with pale rows | Visible in the desktop bottom capture; exact colors unmeasured. |
| Floating dock | Pale enclosing capsule with charcoal pills | Visible; no glass effect established. |
| Notice veil | Dark translucent full-viewport layer | Screenshot estimate near 60% black. |
| Notice | Opaque pale rounded panel | Highest visible layer; no prominent shadow needed to explain the separation. |

The page gains depth through overlap, silhouettes, contrast, and modest rounding. General-purpose gradient fills and heavy card shadows are not supported by the visible design.

## Imagery

The current original-page captures mix office-event posters, interview portraits, workplace photographs, and graphic editorial illustrations. Visible examples include a turquoise-and-orange event announcement, a blue XR event graphic, a colorful discussion illustration, an office interview photograph, geometric artwork, and a café portrait beneath hanging lights.

These are heterogeneous editorial assets. Their colors should remain intact rather than being recolored into blue and gray. The restrained interface is what lets varied content remain coherent.

Most standard editorial image regions follow a 3:2 landscape relationship. Folder images are approximately square. Use dedicated derivatives for these different contexts, particularly when posters contain important embedded lettering. Cropping a landscape announcement into a square can remove essential content.

The serif wordmark and operator mark should remain supplied identity assets. Header and article utility symbols are small and visually simple: menu lines, magnifier, person, close cross, clap, arrow, and folder/lock marks. Their exact icon library and asset formats are unknown.

### Observed Asset References

No image `src` URLs or font-file URLs were included in the evidence. The links below identify the content associated with visible or measured imagery; they are page destinations, not direct asset files, and were not opened separately.

| Observed content | Original-page destination | Treatment |
| --- | --- | --- |
| Current office-event lead | [Article 14806](https://www.workersresort.com/articles/14806/) | Large event artwork; also reused in smaller editorial placements. |
| XR office-tour article | [Article 13331](https://www.workersresort.com/articles/13331/) | Blue event graphic visible in the folder stack and article collection. |
| Green interview graphic | [Article 12943](https://www.workersresort.com/articles/12943/) | Visible in a curated horizontal row. |
| Rest and employee-health interview | [Article 12910](https://www.workersresort.com/articles/12910/) | Portrait-led curated entry represented in the lower page. |
| Worker's Resort wordmark | [Homepage](https://www.workersresort.com/) | Large masthead, compact header mark, and footer identity; direct asset path unavailable. |

Use authorized original assets where available. The CSS below reproduces layout relationships and surface language, not proprietary wordmark outlines or missing source illustrations.

## Layout & Responsive Behavior

The homepage is a long editorial document with several distinct layouts. Its responsive strategy changes by component.

| Area | Desktop observation | Mobile observation |
| --- | --- | --- |
| Header | 60px high; controls align to 80px inset | Same height; 24px inset; two-tone switch not visible |
| Main content | 1280px inner width at 1440px | 342px inner width at 390px |
| Lead articles | Unequal 840px and 400px columns | Two vertically arranged 342px cards |
| Folder stack | Right side of the lead composition | Retained after the lead cards, 322px anchors |
| Community introduction | Large 53px English heading | Heading reduced to 36px |
| Trend keywords | Multiple rows | Single row extending horizontally |
| Featured series articles | Two 580px columns | Full-width vertical entries |
| Additional series | Image beside information | 342 × 228px image above information |
| Information tiles | Three columns | Horizontal row of approximately 66vw cards |
| Latest articles | Sidebar plus three-column grid | Horizontal row of approximately 66vw cards; category choices later in the flow |
| Keyword directory | Full desktop layout not sampled | Two 171px columns |
| Notice actions | Horizontal pair | Centered vertical pair with unchanged intrinsic widths |
| Floating dock | Complete centered cluster | Overflowing horizontal cluster |

The measured 257.39px mobile cards are approximately 66% of a 390px viewport. Using `66vw` is a close implementation approximation, not a confirmed source formula.

The source desktop width token evaluates to 1280px at 1440px, matching the content. At 390px it would evaluate to 230px, which does not match the actual 342px content width. A mobile override or different layout rule is therefore active. Do not apply the desktop width formula at every breakpoint.

The supplied evidence establishes two viewport outcomes, not the original breakpoint locations. The Quick Start's 1100px and 767px breakpoints are recommended interpolation points. Tablet, landscape-phone, browser-zoom, and very narrow-phone layouts remain unverified.

## Do’s and Don’ts

### Do

- Preserve the distinction between the current notice layer and the editorial homepage beneath it.
- Use the measured cool gray, charcoal, blue, slate, and white palette.
- Keep the large two-line wordmark as recognizable artwork.
- Pair Japanese editorial text with compact English display and metadata typography.
- Preserve generous Japanese headline leading and the reaction-count lane beside article titles.
- Use white containers selectively for lead articles and information tiles; keep ordinary article wrappers visually open.
- Retain the raised folder tabs, alternating offsets, and numbered hierarchy.
- Keep the mobile article and information rows horizontal while stacking the lead and series content.
- Distinguish blue trend chips from compact charcoal article tags.
- Preserve accurate `PR` and member-access indicators where relevant to the content.
- Keep the modal above the header and dock, with both dimmed by the same veil.

### Don't

- Don't treat the homepage as a generic conversion landing page with a single hero and feature grid.
- Don't describe the community transition as site discontinuation.
- Don't use the darkened screenshots to define a dark default theme.
- Don't infer a logo font, image asset path, or icon package from appearance alone.
- Don't use every WordPress preset color or shadow as a design token.
- Don't flatten every mobile section into a full-width vertical list.
- Don't turn the folder silhouettes into ordinary rounded cards or claim their full animation from one frame.
- Don't confuse recorded link destinations with tested login, search, reaction, or registration behavior.
- Don't shrink the measured 13px floating navigation labels to fit all six items on a phone.
- Don't hardcode the member count, reaction counts, or current article imagery into the reusable design system.

## Recommended Implementation Additions

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

- Use a semantic modal dialog with an accessible name, focus containment, Escape dismissal, and focus restoration. If background scroll is locked, document that as an intentional improvement over the captured traversal behavior.
- Keep the notice content-driven in height and internally scrollable on short screens. Avoid a fixed height that clips registration text at larger text sizes.
- Give menu, search, close, reaction, and access-status symbols explicit accessible labels. Enlarge their hit areas without enlarging the visible glyphs unnecessarily.
- Make horizontal collections keyboard reachable and expose a continuation cue. Add scroll snapping only if it improves navigation; original snap behavior was not established.
- Provide reduced-motion behavior and a pause mechanism for any recreated continuous folder animation.
- Check contrast for small white labels on blue and secondary slate text. If necessary, supply an approved accessible color variant separately from the measured fidelity palette.
- Keep reaction controls separate from article links in semantic markup so that one interactive element is not nested inside another.
- Reserve image dimensions before loading. Supply different crops for landscape cards and square folder artwork.
- Preserve visible focus rings and sufficient bottom clearance so that fixed navigation does not cover focused content.

## Agent Prompt Guide

### Quick Color Reference

- Canvas: `#f0f2f4`.
- Primary text and filled navigation pills: `#27272a`.
- Main accent: `#228acb`.
- Secondary copy and slate surfaces: `#878c9e`.
- Lead-card surface and reversed text: `#ffffff`.
- Pale display accent: `#d9dde1`.
- Notice backdrop: approximately 60% black, explicitly an estimate.
- Dark selected-content fill: visually confirmed, exact value unknown; `#1b1b1b` is a reasonable adaptation drawn from another measured control.

### Overall Prompt

“Create a Japanese workplace editorial homepage inspired by the current Worker's Resort interface. Use a cool gray `#f0f2f4` canvas, charcoal `#27272a` text, blue `#228acb` accents, and slate `#878c9e` secondary elements. Preserve a supplied oversized two-line serif wordmark, Japanese editorial headlines with generous leading, and compact English display typography. Build an asymmetrical desktop lead with an 840px article and 400px side column inside a 1280px content area at 1440px. Include overlapping numbered folder shapes, topic chips, series collections, a category sidebar with a three-column article grid, and a floating pill navigation dock. At 390px, use 24px content gutters, stack lead and series entries, and retain horizontal article and information-tile rows at approximately 66vw per card. Include the current centered community-transition notice with a blue login capsule and outlined registration capsule. Distinguish verified measurements from implementation approximations.”

### Example Component Prompts

1. **Community notice:** “Create an opaque cool-gray dialog approximately 680px wide on desktop and 90vw on a phone, with 16px corners and a dark translucent backdrop. Center a three-line announcement, explanatory copy, a blue login pill, an outlined registration pill, and a final explanatory paragraph. Keep desktop actions horizontal with a 20px gap and mobile actions vertical with a 10px gap. Add accessible modal behavior as an explicit enhancement.”
2. **Folder stack:** “Create three overlapping editorial folders in dark charcoal, slate, and blue. Use raised tabs, large white numerals, square editorial artwork, small white Japanese titles, and 12px metadata. Desktop folders are 380px wide with 23px horizontal inset and alternating 20px offsets. Start with a static arrangement because complete original keyframes are unavailable.”
3. **Article collection:** “Build a desktop collection with a 290px category column, a 40px gap, and three 290px article columns. Use 3:2 artwork, 16px / 28px titles, a roughly 75px reaction lane, small dark topic pills, and compact English metadata. At 390px, turn the collection into a horizontal row of 257px cards with 16px gaps and 14px / 24.5px titles.”
4. **Information tiles:** “Design three 400 × 230px route tiles with 16px corners: blue About, white Research Community, and slate Contact. Use tightly led English headings and 14px Japanese descriptions. On mobile, retain a horizontal row with approximately 66vw tiles and 16px gaps.”
5. **Navigation dock:** “Group six charcoal navigation pills in a pale rounded enclosure near the bottom of the viewport. Use 13px white labels, 14px vertical and 20px horizontal padding, and 5px gaps. Preserve intrinsic pill widths on mobile and allow horizontal navigation. Keep the dock beneath an active modal backdrop.”

## Quick Start

### CSS Custom Properties

This is a reusable adaptation, not extracted original CSS. It keeps a conventional project root size, converts source typography to pixels, and reproduces the confirmed desktop/mobile relationships. Notice geometry, border colors, folder silhouettes, breakpoint locations, hover endpoints, and scroll snapping are explicitly approximate or recommended. Font files and wordmark assets must be supplied separately when authorized.

```css
:root {
  /* Measured colors */
  --wr-paper: #f0f2f4;
  --wr-ink: #27272a;
  --wr-blue: #228acb;
  --wr-slate: #878c9e;
  --wr-white: #ffffff;
  --wr-pale: #d9dde1;
  --wr-deep: #1b1b1b;

  /* Estimated overlay; recommended reuse of pale gray for rules */
  --wr-veil: rgb(0 0 0 / 60%);
  --wr-rule: var(--wr-pale);

  /* Observed family names; this does not load font files */
  --wr-font-body: 'TazuganeGothicStdN-Regular', 'Yu Gothic',
    YuGothic, sans-serif;
  --wr-font-medium: 'TazuganeGothicStdN-Medium', 'Yu Gothic',
    YuGothic, sans-serif;
  --wr-font-display: 'forma-djr-display', sans-serif;

  --wr-text-meta: 12px;
  --wr-text-nav: 13px;
  --wr-text-card: clamp(14px, 2vw, 16px);
  --wr-text-lead: clamp(16px, 4vw, 34px);
  --wr-text-tile: clamp(26px, 5vw, 35px);
  --wr-leading-body: 1.75;

  --wr-space-card: clamp(15px, 2vw, 24px);
  --wr-space-grid: 40px;
  --wr-space-section: clamp(60px, 14vw, 120px);
  --wr-content-width: min(calc(100% - 160px), 1360px);
  --wr-header-height: 60px;

  --wr-radius-card: 6px;
  --wr-radius-tile: 16px;
  --wr-radius-pill: 26px;
  --wr-ease-out: cubic-bezier(0.12, 0.88, 0.32, 1);
}

.wr,
.wr *,
.wr *::before,
.wr *::after {
  box-sizing: border-box;
}

body.wr {
  margin: 0;
  color: var(--wr-ink);
  background: var(--wr-paper);
  font: 400 16px / var(--wr-leading-body) var(--wr-font-body);
}

.wr a {
  color: inherit;
}

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

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

.wr-container {
  width: var(--wr-content-width);
  margin-inline: auto;
}

.wr-main {
  padding-block-start: 136px;
}

.wr-section {
  margin-block-start: var(--wr-space-section);
}

.wr-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 20;
  height: var(--wr-header-height);
  background: var(--wr-paper);
  border-bottom: 1px solid var(--wr-rule);
}

.wr-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 100%;
}

.wr-header__tools {
  display: flex;
  align-items: center;
  gap: 16px;
}

.wr-header__brand {
  width: 102px;
  height: 40px;
  transition: transform 1.2s var(--wr-ease-out);
}

.wr-header__login {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 18px;
  color: var(--wr-white) !important;
  background: var(--wr-blue);
  font: 400 12px / 21px var(--wr-font-medium);
  text-decoration: none;
}

.wr-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.wr-lead {
  overflow: hidden;
  border-radius: var(--wr-radius-card);
  background: var(--wr-white);
}

.wr-landscape {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

.wr-lead__body {
  padding: 20px var(--wr-space-card) 24px;
}

.wr-lead__title,
.wr-article__title {
  margin: 0;
  font-family: var(--wr-font-medium);
  font-weight: 400;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.wr-lead__title {
  font-size: var(--wr-text-lead);
}

.wr-meta {
  margin-block: 24px 0;
  font: 400 12px / 21px var(--wr-font-display);
}

/* Static folder approximation; original keyframes are unavailable. */
.wr-folder-stage {
  position: relative;
  min-height: 640px;
  margin-block-start: 35px;
}

.wr-folder {
  position: absolute;
  top: var(--folder-y, 95px);
  left: var(--folder-x, 20px);
  width: calc(100% - 20px);
  padding: 35px 23px;
  border-radius: 20px;
  color: var(--wr-white) !important;
  background: var(--wr-blue);
  text-decoration: none;
}

.wr-folder::before {
  content: '';
  position: absolute;
  top: -35px;
  right: 0;
  width: 43%;
  height: 55px;
  border-radius: 20px 20px 0 0;
  background: inherit;
  clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

.wr-folder--rear {
  --folder-y: 0px;
  background: var(--wr-deep);
}

.wr-folder--middle {
  --folder-x: 0px;
  --folder-y: 75px;
  background: var(--wr-slate);
}

.wr-folder--rear::before,
.wr-folder--middle::before {
  right: auto;
  left: 0;
  transform: scaleX(-1);
}

.wr-folder > * {
  position: relative;
}

.wr-folder__image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.wr-folder__number {
  position: absolute;
  top: -24px;
  right: 23px;
  z-index: 1;
  font: 500 100px / 1 var(--wr-font-display);
}

.wr-folder__title {
  margin: 20px 0 0;
  font: 400 14px / 24.5px var(--wr-font-medium);
}

.wr-latest {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 40px;
}

.wr-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  min-width: 0;
}

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

.wr-article__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 60px;
  align-items: start;
  gap: 15px;
  margin-block-start: 20px;
}

.wr-article__title {
  font-size: var(--wr-text-card);
}

.wr-article__title a {
  text-decoration: none;
}

.wr-reaction {
  min-height: 30px;
  padding: 3px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: 400 12px / 21px var(--wr-font-display);
}

.wr-tags,
.wr-trend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-block-start: 20px;
}

.wr-tag {
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--wr-white) !important;
  background: var(--wr-ink);
  font-size: 12px;
  line-height: 1.4;
  text-decoration: none;
}

.wr-trend {
  gap: 12px 10px;
}

.wr-trend a {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 6px;
  color: var(--wr-white);
  background: var(--wr-blue);
  font-size: 14px;
  line-height: 21px;
  text-decoration: none;
  transition: transform 0.3s;
}

.wr-info-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
}

.wr-info {
  min-height: 230px;
  padding: 20px 15px;
  border-radius: 16px;
  background: var(--wr-white);
  text-decoration: none;
  transition: transform 0.6s var(--wr-ease-out);
}

.wr-info--blue {
  color: var(--wr-white) !important;
  background: var(--wr-blue);
}

.wr-info--slate {
  color: var(--wr-white) !important;
  background: var(--wr-slate);
}

.wr-info__title {
  margin: 0 0 12px;
  font: 500 var(--wr-text-tile) / 0.9 var(--wr-font-display);
  letter-spacing: 0.02em;
}

.wr-info p {
  max-width: 282px;
  font-size: 14px;
  line-height: 24.5px;
}

.wr-keyword-directory {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wr-keyword-directory a {
  padding: 16px 12px 16px 0;
  border-bottom: 1px solid var(--wr-rule);
  font-size: 14px;
  line-height: 21px;
  text-decoration: none;
}

.wr-dock {
  position: fixed;
  z-index: 30;
  left: 50%;
  bottom: calc(17px + env(safe-area-inset-bottom, 0px));
  display: flex;
  gap: 5px;
  max-width: calc(100vw - 16px);
  padding: 6px;
  overflow-x: auto;
  border: 1px solid var(--wr-rule);
  border-radius: 999px;
  background: var(--wr-paper);
  transform: translateX(-50%);
}

.wr-dock a {
  flex: 0 0 auto;
  padding: 14px 20px;
  border-radius: 24px;
  color: var(--wr-white);
  background: var(--wr-ink);
  font-size: 13px;
  line-height: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: scale 0.3s;
}

/* Recommended native-dialog implementation. */
.wr-notice {
  width: min(680px, calc(100vw - 40px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 50px 32px;
  overflow-y: auto;
  border: 1px solid var(--wr-rule);
  border-radius: 16px;
  color: var(--wr-ink);
  background: var(--wr-paper);
  text-align: center;
}

.wr-notice::backdrop {
  background: var(--wr-veil);
}

.wr-notice__close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: 400 26px / 1 sans-serif;
  cursor: pointer;
}

.wr-notice__title {
  margin: 0 0 12px;
  font: 400 26px / 1.5 var(--wr-font-medium);
}

.wr-notice__title span {
  display: block;
}

.wr-notice__status,
.wr-notice__description {
  max-width: 478px;
  margin-inline: auto;
  font-size: 16px;
  line-height: 28px;
}

.wr-notice__status {
  margin-block: 0 26px;
}

.wr-notice__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.wr-button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  padding: 11px 32px 13px;
  border: 1px solid var(--wr-ink);
  border-radius: 26px;
  font: 400 13px / 1.6 var(--wr-font-medium);
  text-decoration: none;
}

.wr-button--primary {
  min-width: 133px;
  color: var(--wr-white) !important;
  background: var(--wr-blue);
}

.wr-button--outline {
  min-width: min(276px, 100%);
  color: var(--wr-ink);
  background: transparent;
}

.wr-notice__description {
  margin-block: 20px 0;
}

html.wr-notice-open {
  overflow: hidden;
}

/* Recommended hover endpoints; original endpoints were not supplied. */
@media (hover: hover) {
  .wr-dock a:hover {
    scale: 0.97;
  }
  .wr-trend a:hover {
    transform: translateY(-2px);
  }
}

/* Recommended intermediate layout; not an observed breakpoint. */
@media (min-width: 768px) and (max-width: 1100px) {
  .wr-latest {
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 24px;
  }
  .wr-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* Recommended breakpoint reproducing the observed phone arrangement. */
@media (max-width: 767px) {
  :root {
    --wr-content-width: calc(100% - 48px);
    --wr-text-card: 14px;
    --wr-text-lead: 16px;
    --wr-text-tile: 26px;
  }

  .wr-main {
    padding-block-start: 100px;
  }

  .wr-hero-grid,
  .wr-latest {
    display: block;
  }

  .wr-hero-grid > * + * {
    margin-block-start: 40px;
  }

  .wr-folder-stage {
    min-height: 570px;
    margin-block-start: 100px;
  }

  .wr-folder--middle {
    --folder-y: 50px;
  }

  .wr-folder:not(.wr-folder--rear):not(.wr-folder--middle) {
    --folder-y: 70px;
  }

  .wr-articles,
  .wr-info-row {
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 66vw;
    align-items: start;
    gap: 16px;
    overflow-x: auto;
    padding-block-end: 12px;
    scroll-snap-type: x proximity;
  }

  .wr-articles > *,
  .wr-info-row > * {
    scroll-snap-align: start;
  }

  .wr-article__heading {
    margin-block-start: 14px;
  }

  .wr-trend {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-block-end: 8px;
  }

  .wr-notice {
    width: 90vw;
    padding: 49px 24px;
  }

  .wr-notice__title {
    margin-block-end: 11px;
    font-size: 18px;
    line-height: 1.4;
  }

  .wr-notice__status,
  .wr-notice__description {
    font-size: 12px;
    line-height: 21px;
  }

  .wr-notice__status {
    margin-block-end: 20px;
  }

  .wr-notice__actions {
    flex-direction: column;
    gap: 10px;
  }

  .wr-notice__description {
    margin-block-start: 16px;
  }
}

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

Move mobile category controls after the article rail in the component markup or responsive rendering logic; the CSS does not create an unverified mobile selector. Likewise, header-brand visibility and the dock's footer behavior need explicit application state. Their original trigger conditions are unknown.

### Notice Markup and Behavior

This example uses source UI copy to demonstrate the current notice. Native dialog behavior and background locking are recommended additions. No dismissal persistence is assumed.

```html
<dialog class='wr-notice' id='community-notice'
  aria-labelledby='community-notice-title'>
  <button class='wr-notice__close' type='button'
    aria-label='Close notice' data-notice-close>×</button>

  <h2 class='wr-notice__title' id='community-notice-title'>
    <span>「Worker’ s Resort」は、</span>
    <span>2026 年 4 月よりオフラインを中心とした</span>
    <span>コミュニティへシフトしました</span>
  </h2>

  <p class='wr-notice__status'>
    現在、サイトのアーカイブは会員限定のみが閲覧可能です。
  </p>

  <div class='wr-notice__actions'>
    <a class='wr-button wr-button--primary' href='/login/'>
      ログインする
    </a>
    <a class='wr-button wr-button--outline' href='/registration/'>
      コミュニティへ新規登録する（条件あり）
    </a>
  </div>

  <p class='wr-notice__description'>
    「オフィスマネージャーのためのリサーチネットワーク」として、
    総務などオフィス領域の担当者へ向けたトークセッションなどのイベント、
    オフィス情報をメルマガで配信予定です。
  </p>
</dialog>
```

```js
// Recommended modal behavior; original interaction was not tested.
const notice = document.querySelector('#community-notice');
const previousFocus = document.activeElement;

notice.querySelector('[data-notice-close]').addEventListener('click', () => {
  notice.close();
});

notice.addEventListener('close', () => {
  document.documentElement.classList.remove('wr-notice-open');
  if (previousFocus instanceof HTMLElement && previousFocus.isConnected) {
    previousFocus.focus();
  }
});

notice.showModal();
document.documentElement.classList.add('wr-notice-open');
```

### Tailwind v4 Token Mapping

Optional aliases for a project already using Tailwind v4. This is not evidence that the original site uses Tailwind. Define the custom properties above first.

```css
@theme inline {
  --color-wr-paper: var(--wr-paper);
  --color-wr-ink: var(--wr-ink);
  --color-wr-blue: var(--wr-blue);
  --color-wr-slate: var(--wr-slate);
  --color-wr-pale: var(--wr-pale);
  --color-wr-white: var(--wr-white);

  --font-editorial: var(--wr-font-body);
  --font-editorial-medium: var(--wr-font-medium);
  --font-display: var(--wr-font-display);

  --text-meta: 12px;
  --text-dock: 13px;
  --text-article: var(--wr-text-card);
  --text-lead: var(--wr-text-lead);
  --text-route: var(--wr-text-tile);

  --radius-editorial: 6px;
  --radius-route: 16px;
  --radius-action: 26px;

  --spacing-phone-gutter: 24px;
  --spacing-editorial-gap: 40px;
  --spacing-rail-gap: 16px;
}
```

## Sources & Evidence

- **Inspected original and final page:** [Worker's Resort](https://www.workersresort.com/). Both supplied URLs are identical; the recorded HTTP status is 200.
- **Capture timestamp:** September 22, 2026, 17:55:14.701 UTC, equivalent to September 23, 2026, 02:55:14.701 JST.
- **Desktop evidence:** three supplied original-page captures at 1440 × 1000, covering the opening composition, article collection, and lower-page/footer area. The notice is open in all three.
- **Mobile evidence:** two supplied original-page captures at 390 × 844, covering the opening and footer areas. The notice remains open.
- **Rendered DOM evidence:** page text, original-page link destinations, element rectangles, computed colors, font declarations, padding, radii, transitions, animations, and custom properties at both viewport sizes.
- **Observed state differences:** the compact header brand becomes visible in scrolled captures; the notice stays centered; the floating dock is visible in the opening and middle captures and absent from the supplied footer captures.
- **Inspection limitations:** no new browsing or command execution was performed for this reference. The notice obscures substantial portions of the screenshots. The sampled styles omit some containers, image elements, pseudo-elements, and lower-page components. Linked pages, font files, complete animation keyframes, and interactive outcomes were not independently inspected. SharedWorkers and service workers were disabled during the supplied browser inspection.

All implementation code is an adaptation of the supplied current-page evidence. Estimated geometry and recommended behavior are identified separately from measured values.