/* ========================================================================== LiQUiD Paradise — mobile refinements (2026-08-15, owner feedback) Loaded AFTER style.css. Everything here is an override; the original stylesheet is left untouched so the port stays easy to re-generate. ========================================================================== */ /* -------------------------------------------------------------------------- 1. THE BIG ONE — two-column sections never collapsed on phones. "Our Story" and "Every wave since 2019" set grid-template-columns in an INLINE style attribute, which outranks every stylesheet rule including media queries. Result: a ~1fr text column and a squeezed timeline on a 390px screen. Force them to a single column, and stop the heading sticking (sticky makes no sense once the layout is stacked). -------------------------------------------------------------------------- */ @media (max-width: 900px) { .wrap[style*="grid-template-columns"] { grid-template-columns: 1fr !important; gap: 2.4rem !important; } .shead[style*="sticky"] { position: static !important; top: auto !important; } /* Two photos side by side above the timeline, as requested — but ONLY the photo grid. An earlier blanket .grid.c2 rule also pinned the VIP villa cards two-across on phones, squeezing Japanese text to one or two characters per line and clipping the prices to "¥200". Content grids stack, exactly as the original stylesheet intended. */ .grid.c2:has(.photo-card) { grid-template-columns: 1fr 1fr !important; gap: .8rem !important; } .grid.c2:not(:has(.photo-card)) { grid-template-columns: 1fr !important; } } /* -------------------------------------------------------------------------- 8. VIP page on phones. -------------------------------------------------------------------------- */ @media (max-width: 760px) { /* The closing band sets a whole sentence at heading size. In Japanese that is a wall of large serif type — cramped and hard to read. */ .cta-band h2, .cta-band .vip-hero-title { font-size: clamp(1.3rem, 5vw, 1.9rem) !important; line-height: 1.65; max-width: 22em; margin-inline: auto; } .vip-hero-title { font-size: clamp(1.6rem, 6.4vw, 2.4rem) !important; line-height: 1.45; } /* Long bilingual button labels overflowed their pills and were cut off at both edges. Let them wrap and fill the width instead. */ .cta-band .btn, .vip-cta .btn { width: 100%; white-space: normal; text-align: center; line-height: 1.4; padding-inline: 1.2rem; } /* The VIP hero's three figures (5 villas / 10 rooms / 0 steps) are laid out with a 3.2rem flex gap, which on a phone pushed the third onto its own line with a large hole beside it. Put them in three even columns. */ .page-hero .wrap > div[style*="display:flex"] { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1rem .6rem !important; margin-top: 1.8rem !important; text-align: center; } .page-hero .wrap > div[style*="display:flex"] > div { min-width: 0; } .page-hero .wrap > div[style*="display:flex"] b { font-size: 2rem !important; line-height: 1.1; } .page-hero .wrap > div[style*="display:flex"] .kicker { font-size: .58rem; letter-spacing: .1em; line-height: 1.45; display: block; margin-top: .3rem; opacity: .7; } /* The hero scrim fades to 15% opacity across its middle — which on a phone is exactly where the heading and the paragraph sit, and on the VIP page that band of the photograph is bright sky. Deepen it: the picture still reads, the words stop competing with it. */ .page-hero::after{ background:linear-gradient(180deg, rgba(4,6,15,.62) 0%, rgba(4,6,15,.34) 28%, rgba(4,6,15,.58) 60%, var(--ink) 97%); } .page-hero h1, .vip-hero-title, .page-hero p.lead{ text-shadow:0 1px 4px rgba(4,6,15,.9),0 3px 20px rgba(4,6,15,.7); } .page-hero p.lead{color:#e7e3d8} /* Bigger and a touch tighter, so the label reads as a label rather than a smudge. Not the stat captions below it — those keep their own size. */ .page-hero > .wrap > .kicker{ font-size:.8rem; letter-spacing:.3em; } /* The tickets hero used to fill the whole first screen, pushing the price ladder to 1.5 screens down — just past where four out of five people stop scrolling. Shorter here only; the desktop hero is untouched. */ .page-hero--tight{min-height:44vh; padding-bottom:5vh} .page-hero--tight h1{font-size:clamp(2rem,8.5vw,2.9rem); margin:.2em 0 .15em} .page-hero--tight p.lead{font-size:.95rem; max-width:34ch} .page-hero--tight .kicker{font-size:.62rem} /* and the heading above the ladder gives back the rest */ .shead{margin-bottom:1rem} .shead h2{font-size:1.02rem; line-height:1.55} /* The hero now carries the offer as well as the picture, so every block in it gives back a little room. Measured: the copy was 623px inside a 763px screen with the scroll hint 6px away — on a 667px phone that overflows. Nothing is removed; the spacing simply stops being generous. */ #ch-hero .datebar{margin-top:1rem} /* The tagline goes on phones (owner, 2026-08-23). It is the most beautiful line in the hero and the only one not doing a job the price, the date and the buttons are not already doing better — and on a screen this small, what it costs is the villa line sitting near the fold. Desktop keeps it. */ #ch-hero .copy p.serif{display:none} #ch-hero .cta-row{margin-top:.95rem; gap:.55rem} #ch-hero .cta-row .btn{padding:.82em 1.3em; font-size:.88rem} .hero-offer{margin-top:.8rem; padding-top:.75rem; gap:.25em .5em} .hero-offer .amt{font-size:1.08rem} .hero-offer .lbl{font-size:.6rem; letter-spacing:.14em} .hero-offer .left{font-size:.72rem; padding:.1em .55em} /* The villa line is the quietest thing in the hero: the button directly above already names the villas, so this is only the price and the count. Kept to one line — on a real phone it wrapped and left a lone 室 stranded underneath, which was the worst thing on the screen. */ .hero-villa{ font-size:.72rem; margin-top:.55rem; opacity:.85; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .hero-villa b{font-weight:600} /* The gaps around the buttons were doing nothing but adding scroll. */ #ch-hero .cta-row{margin-top:.8rem; gap:.45rem} #ch-hero .cta-row .btn{padding:.78em 1.2em} /* The datebar separator is only meaningful when date and venue share a line; stacked on a phone it becomes a stray dot in the middle of the hero. */ #ch-hero .datebar span[aria-hidden]{display:none} /* Keep a two-line title from dropping a stray character onto line two. */ .page-hero h1, .vip-hero-title, .cta-band h2 { text-wrap: balance; } /* Nothing in a card may spill past its rounded edge. Use break-word, not anywhere: "anywhere" permits a break at any character, which is what chopped words mid-way. */ .card, .tier, .vip-card { overflow-wrap: break-word; } .card .btn, .tier .btn { width: 100%; white-space: normal; } } /* -------------------------------------------------------------------------- 9. Japanese line breaking. Japanese may wrap at almost any character, so in a narrow column it breaks words apart — ロケーション became ロケーシ / ョン, プライベートホテル became プライベ / ートホテ / ル. `line-break: strict` applies the proper Japanese rules: a line may not begin with a small kana (ゃゅょっ), a long vowel mark (ー) or closing punctuation. Applied site-wide on the festival pages, in both languages — it only affects CJK text. -------------------------------------------------------------------------- */ .is-liquid, .is-liquid .compare, .is-liquid .card, .is-liquid .tier, .is-liquid p, .is-liquid h1, .is-liquid h2, .is-liquid h3, .is-liquid li, .is-liquid td, .is-liquid .val { line-break: strict; word-break: normal; overflow-wrap: break-word; } /* -------------------------------------------------------------------------- 9b. Japanese headlines break between words, not through them. `line-break: strict` above only governs which characters may START a line — small kana, the long-vowel mark, closing punctuation. It says nothing about where a line may END, so Japanese still breaks between any two kanji, and the tickets headline あなたの楽園を選ぼう。 was splitting the compound 楽園 down the middle: あなたの楽 / 園を選ぼう。 English never does this, which is why the two languages looked like different pages. `word-break: auto-phrase` is the fix built for exactly this — the browser segments the sentence into phrases and only breaks between them. Chrome and Safari honour it; anywhere else it is ignored and the text wraps as it does today, so there is nothing to fall back to. Headlines and leads only. Body copy in a narrow column needs every break opportunity it can get, and phrase breaking there would leave ragged lines. -------------------------------------------------------------------------- */ html[lang="ja"] .is-liquid h1, html[lang="ja"] .is-liquid h2, html[lang="ja"] .is-liquid h3, html[lang="ja"] .is-liquid .lead, html[lang="ja"] .is-liquid .kicker, html[lang="ja"] .is-liquid .btn, html[lang="ja"] .is-liquid .shead p { word-break: auto-phrase; } /* -------------------------------------------------------------------------- 9c. The date is one thing, in both languages. The kicker reads "LIQUID PARADISE 2026 — NOV 7–8", and at 390px it was breaking after the en dash: "NOV 7–" on one line, "8" alone on the next. Japanese did the same to 11月7日–8日. `text-wrap: balance` evens the two lines out instead of filling the first one to the edge, which keeps the date together at every width we support. -------------------------------------------------------------------------- */ .is-liquid .kicker { text-wrap: balance; } @media (max-width: 760px) { /* * The kicker's .42em letter spacing is what forces the date onto a second * line: "LIQUID PARADISE 2026 — NOV 7-8" needs about 490px to set at that * tracking, on a 390px screen. Tightening it on phones lets the line fit, * and the date stops being split at all. The wide tracking is the look, so * it is reduced rather than removed, and desktop keeps the full .42em. */ .is-liquid .kicker, .is-liquid .page-hero .kicker, .is-liquid .page-hero .kicker.gold-text { letter-spacing: .18em; font-size: .7rem; } /* * And in Japanese, never break between kanji here. `keep-all` would be wrong * for a paragraph — a long Japanese sentence with no break opportunities * overflows — but a kicker is a handful of words with real spaces in it, and * this is what stops 11月7日 becoming 11月 / 7日. * * Section headings get it too, for the same reason and after the same check: * `auto-phrase` segments 11月 and 7日 as separate phrases, so it happily broke * "11月7日15:00開場" in half. Measured across all eight Japanese pages first — * the longest space-free run in any `.shead h2` is 14 characters (217px in a * 319px column), so nothing can overflow. * * Deliberately NOT applied to h3 or paragraphs: the same measurement found * runs there that would overflow, such as オーシャンフロントヴィラ at 274px in a * 246px column on the VIP page. Those keep `auto-phrase`. */ html[lang="ja"] .is-liquid .kicker, html[lang="ja"] .is-liquid .page-hero .kicker, html[lang="ja"] .is-liquid .shead h2 { word-break: keep-all; } /* * A Japanese button label is wider than its English twin, and the villa CTA * buttons are `white-space: nowrap` inside a grid track sized for "Buy * ticket". チケットを購入 needs 131px and was given 100, so the last two * characters were sliced off — on the two villa pages, right on the buy * button. Pre-dates the wrapping work; found while checking it. */ html[lang="ja"] .is-liquid .btn { /* * 2026-08-24. The `max-content` above was the right idea and the wrong * lever: it also applied to the two villa CTAs on the VIP page, and * ¥500,000 — ウルトラVIP オーシャンフロントヴィラ measures 433px, so the pill * was forced 22px past both edges of a 390px screen and its rounded ends * were cut off. * * `nowrap` does the same job as `max-content` did — a flex item that may * not wrap cannot be squeezed below its own text, so チケットを購入 still * gets its 131px in a track sized for 100 — while leaving `max-width` * free to keep the pill on the screen. * * The label span is then the one part allowed to wrap, so a long name * breaks into tidy lines beside the price instead of orphaning the dash. * * .22em is Latin display tracking. Japanese does not want it: it is what * made this label 433px in the first place, and CJK reads better tight. */ max-width: calc(100vw - 3rem); white-space: nowrap; letter-spacing: .10em; } html[lang="ja"] .is-liquid .btn > span { white-space: normal; text-align: left; } /* * The one button that still needs its intrinsic width forced. It sits in a * three-up grid whose tracks are 100px, and the label needs 117 in both * languages — チケットを購入 and "Buy ticket" measure the same here, and * both lose their last characters. Not scoped to a language for that * reason. Scoped to `.buy` because it is the only button on any of the * thirteen pages that measured short — a blanket `min-width: max-content` * is what pushed the VIP villa pills off the screen, since min-width * outranks max-width. */ .is-liquid .btn.buy { min-width: max-content; } /* * A safety net in both languages: no button may ever be wider than the * screen it is drawn on. Costs nothing when the label already fits. */ .is-liquid .btn { max-width: calc(100vw - 3rem); } } /* -------------------------------------------------------------------------- 10. The VIP comparison table on phones. Three columns on a 390px screen leaves roughly 100px each — every label wrapped to four or five characters per line. Give the label its own full-width line and let the two plans sit side by side beneath it. -------------------------------------------------------------------------- */ @media (max-width: 760px) { .compare .row { grid-template-columns: 1fr 1fr !important; gap: .45rem .9rem !important; padding: 1rem 1rem !important; align-items: start; } /* label (with its icon) spans the full width, on its own line */ .compare .row > :first-child { grid-column: 1 / -1; font-size: .9rem; letter-spacing: .04em; margin-bottom: .1rem; } .compare .val { font-size: .84rem; line-height: 1.55; padding: .55rem .5rem .6rem; border-radius: 12px; } /* the header row: price above plan name, centred under each column */ .compare .row:first-child .head b { font-size: 1.05rem; } /* Each row now names its columns. Without this you scroll past the header and see a bare "— ✓" with no clue which villa is which. The plan names follow the language, because applyLang() sets . */ .compare .row:not(:first-child) > :nth-child(2)::before, .compare .row:not(:first-child) > :nth-child(3)::before { display: block; font-family: var(--font-d); font-size: .58rem; letter-spacing: .12em; line-height: 1.3; opacity: .5; margin-bottom: .35rem; white-space: nowrap; } html[lang="ja"] .compare .row:not(:first-child) > :nth-child(2)::before { content: "オーシャンフロント"; } html[lang="ja"] .compare .row:not(:first-child) > :nth-child(3)::before { content: "ウルトラVIP"; } html:not([lang="ja"]) .compare .row:not(:first-child) > :nth-child(2)::before { content: "OCEAN-FRONT"; } html:not([lang="ja"]) .compare .row:not(:first-child) > :nth-child(3)::before { content: "ULTRA VIP"; } /* Tint the premium column so the eye can track it down the page, and give the two columns a hairline between them. */ .compare .row:not(:first-child) > :nth-child(3) { background: rgba(217, 179, 106, .07); box-shadow: inset 1px 0 0 rgba(217, 179, 106, .18); } .compare .row:not(:first-child) > :nth-child(3)::before { opacity: .7; color: var(--gold); } /* A "not included" dash reads as a mistake; make it explicitly absent. */ .compare .val.no { opacity: .3; } } /* -------------------------------------------------------------------------- 2. Timeline — now full width, so let it breathe instead of wrapping to three words per line. -------------------------------------------------------------------------- */ @media (max-width: 900px) { .timeline { margin-top: 2.8rem; } .tl-item { padding: 0 0 2.2rem 2.6rem; } .tl-item h3 { font-size: 1.15rem; line-height: 1.25; text-wrap: balance; } .tl-item p { font-size: .92rem; line-height: 1.6; max-width: 34em; } .tl-item .tl-year { font-size: .72rem; letter-spacing: .26em; } } /* -------------------------------------------------------------------------- 3. Hero — the SCROLL hint was printed straight through the "OCEAN-FRONT VIP VILLAS" button: the hint is pinned to the bottom of the screen while the stacked buttons grew down into it. Keep the hint (it is the scroll affordance) but RESERVE its space at the foot of the hero, so the two can never occupy the same pixels. Sits above the iPhone home indicator via the safe-area inset. -------------------------------------------------------------------------- */ @media (max-width: 760px) { /* The hero gets its OWN safe zone rather than padding the copy: clear of the fixed nav at the top, clear of the scroll hint at the foot. Because .chapter is a centred flex box and box-sizing is border-box globally, this padding shrinks the area the copy centres inside — so the kicker can never slide up under the language switcher, and the buttons can never reach down into the scroll hint. */ #ch-hero { padding-top: calc(var(--nav-h) + 14px); padding-bottom: 86px; } #ch-hero .copy { padding-bottom: 0; } /* Tighten the vertical rhythm so all of it still lands on one screen. */ #ch-hero .copy .kicker { margin-bottom: 1rem; letter-spacing: .22em; font-size: .62rem; } #ch-hero .hero-title { margin: .2em 0 .25em; } #ch-hero .genre-line { margin-top: .7rem; } #ch-hero .cta-row { margin-top: 1.7rem; gap: .8rem; } #ch-hero .cta-row .btn { width: 100%; justify-content: center; } .scroll-hint { display: flex !important; bottom: calc(1.4vh + env(safe-area-inset-bottom, 0px)); font-size: .58rem; letter-spacing: .34em; gap: .5rem; opacity: .5; } .scroll-hint::after { height: 30px; } } /* Short screens (iPhone SE and similar): trim both ends so nothing clips. */ @media (max-width: 760px) and (max-height: 740px) { #ch-hero { padding-top: calc(var(--nav-h) + 8px); padding-bottom: 66px; } #ch-hero .copy .kicker { margin-bottom: .7rem; } #ch-hero .cta-row { margin-top: 1.2rem; } .scroll-hint::after { height: 20px; } /* The hero now carries the price and the villa line too. On a 667px screen that is about 35px more than fits, so two things give way: the scroll hint (the page plainly continues without being told) and the genre line, the least load-bearing element in the block. The !important is not decoration — the base rule above sets display:flex the same way. */ .scroll-hint { display: none !important; } #ch-hero .genre-line { display: none; } #ch-hero .datebar { margin-top: .7rem; } .hero-offer { margin-top: .65rem; padding-top: .6rem; } .hero-villa { margin-top: .55rem; } } /* -------------------------------------------------------------------------- 4. Readability — light type over bright photography ("Leave Tokyo behind. Enter paradise." sat on a sunlit concrete/sea shot). A soft dark halo keeps the type legible without looking like a hard drop shadow. -------------------------------------------------------------------------- */ .chapter .copy h1, .chapter .copy h2, .chapter .copy .serif, .chapter .copy .kicker, .page-hero h1, .page-hero h2, .page-hero .serif, .page-hero .kicker, .cta-band h2, .cta-band .serif { text-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 3px 14px rgba(0, 0, 0, .5), 0 0 40px rgba(0, 0, 0, .35); } /* The kicker sits on the brightest part of the sky photo and is set small, light and widely letter-spaced — the Japanese version ("ラグジュアリーリゾートで開催されるプレミアムビーチフェス") was especially hard to read. Give it a stronger halo than the headings get. */ .chapter .copy .kicker, .page-hero .kicker, #ch-hero .copy .kicker { text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 2px 8px rgba(0, 0, 0, .7), 0 0 22px rgba(0, 0, 0, .6); } /* EXCEPTION — gradient-clipped text must never take a text-shadow. .chrome-text ("Choose your paradise.") and friends paint a moving chrome gradient through transparent glyphs (-webkit-text-fill-color:transparent + background-clip:text). A text-shadow on those renders as a solid dark silhouette BEHIND the letters, showing through the gradient and muddying the shine — which is exactly what made it look unlike the original. The gradient already carries its own drop-shadow for depth. */ .chrome-text, .chapter .copy .chrome-text, .page-hero .chrome-text, .datebar b, .marquee span i, .grad-text { text-shadow: none !important; } /* The hero wordmark is an image — give it the same grounding. */ #ch-hero .hero-title img { filter: drop-shadow(0 0 14px rgba(255, 255, 255, .55)) drop-shadow(0 0 42px rgba(214, 236, 255, .38)) drop-shadow(0 2px 10px rgba(0, 0, 0, .45)); } /* -------------------------------------------------------------------------- 5. Mobile menu sometimes showed only "HOME". The overlay is a child of the fixed