/* ========================================================================== world.css: every game page (/games//). Scope: .w-* Each page is that game's cinema night: title card, hero, trailer with the house lights down, the pitch, contact sheet, where to play, stamp, up next. Palette comes from data (--g-* / --acc set on by world.js). ========================================================================== */ .w { --w-ink: var(--g-ink, var(--bone)); --w-surface: var(--g-surface, var(--ink-3)); --w-title-ls: .02em; --w-title-case: none; --w-glow: 0 4px 30px rgba(0, 0, 0, .55); --ok: var(--bone); position: relative; color: var(--w-ink); } .w .kicker { color: var(--w-acc-t, var(--acc)); } /* small accent text needs 4.5:1: the two deep-red accents get lifted a touch for labels only */ .w[data-slug="utsuro"], .w-card[data-slug="utsuro"] { --w-acc-t: color-mix(in srgb, var(--acc) 74%, #fff); } .w[data-slug="monban"], .w-card[data-slug="monban"] { --w-acc-t: color-mix(in srgb, var(--acc) 86%, #fff); } .w .kicker .jp-k { color: var(--fog); font-family: var(--f-display); font-weight: 700; letter-spacing: .2em; } /* per-game grammar: title glow, tracking (title card + typeset hero titles) */ .w[data-slug="ironblood"], .w-card[data-slug="ironblood"] { --w-glow: 0 0 34px rgba(255, 110, 40, .38), 0 2px 0 rgba(0, 0, 0, .8); --w-title-ls: .08em; --w-title-case: uppercase; } .w[data-slug="monban"], .w-card[data-slug="monban"] { --w-glow: 0 0 36px rgba(226, 168, 62, .34); --w-title-ls: .06em; } .w[data-slug="nezumi"], .w-card[data-slug="nezumi"] { --w-glow: 0 0 10px rgba(82, 240, 106, .55), 0 0 42px rgba(247, 194, 54, .35); --w-title-ls: .01em; --w-title-case: uppercase; } .w[data-slug="jumpshot"], .w-card[data-slug="jumpshot"] { --w-glow: 4px 4px 0 #ff4f86, 0 0 30px rgba(255, 159, 46, .3); --w-title-ls: .04em; } .w[data-slug="utsuro"], .w-card[data-slug="utsuro"] { --w-glow: 0 0 40px rgba(0, 0, 0, .8); --w-title-ls: .42em; --w-title-case: uppercase; } .w[data-slug="saint-dymphna"], .w-card[data-slug="saint-dymphna"] { --w-glow: 0 0 26px rgba(63, 214, 179, .36); --w-title-ls: .16em; } .w[data-slug="strange-company"], .w-card[data-slug="strange-company"] { --w-glow: 4px 4px 0 rgba(0, 0, 0, .85), 0 0 30px rgba(82, 207, 230, .32); --w-title-ls: .02em; } .w[data-slug="pocklings"], .w-card[data-slug="pocklings"] { --w-glow: 0 0 34px rgba(94, 209, 138, .28); --w-title-ls: .1em; } .w[data-slug="carter"], .w-card[data-slug="carter"] { --w-glow: 0 0 26px rgba(233, 179, 95, .3); --w-title-ls: .06em; } /* ── Static fallback (no JS yet): shaped like the hero so the swap is calm ── */ .w-static { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; gap: 18px; padding-top: calc(var(--nav-h) + 40px); padding-bottom: clamp(48px, 12vh, 120px); } .w-static h1 { font-size: clamp(48px, 9vw, 128px); } /* ── Shared section head ───────────────────────────────────────────────── */ .w-head { display: grid; gap: 14px; margin-bottom: clamp(32px, 4.4vw, 60px); max-width: 880px; } .w-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 40px; flex-wrap: wrap; max-width: none; } .w-head--row > div { display: grid; gap: 14px; } .w-head-line { font-family: var(--f-display); font-weight: 800; font-size: clamp(34px, 5.2vw, 76px); line-height: 1; letter-spacing: -.01em; font-feature-settings: 'palt'; color: var(--w-ink); text-wrap: balance; } .w-head-sub { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--bone-2); max-width: 58ch; } /* ========================================================================== 1. Title card ========================================================================== */ .w-card { --lb: max(0px, calc((100dvh - 100vw / 2.39) / 2)); position: fixed; inset: 0; z-index: 880; overflow: hidden; color: var(--g-ink, var(--bone)); cursor: pointer; } .w-card-dim { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 0, 0, .52), rgba(0, 0, 0, .78)); opacity: 0; transition: opacity .2s var(--ease-out); } .w-card-bar { position: absolute; left: 0; right: 0; height: calc(var(--lb) + 2px); background: #000; transform: translateY(0) scaleY(0); transition: transform .2s var(--ease-out); } .w-card-bar--t { top: 0; transform-origin: 50% 0; } .w-card-bar--b { bottom: 0; transform-origin: 50% 100%; } .w-card-text { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 0 var(--gutter); text-align: center; opacity: 0; transform: translateY(10px); transition: opacity .24s var(--ease-out) .06s, transform .6s var(--ease-out) .06s; } .w-card.is-in .w-card-bar { transform: translateY(0) scaleY(1); } .w-card.is-in .w-card-dim { opacity: 1; } .w-card.is-in .w-card-text { opacity: 1; transform: none; } .w-card.is-out { pointer-events: none; } .w-card.is-out .w-card-bar { transition: transform .26s var(--ease-io); } .w-card.is-out .w-card-bar--t { transform: translateY(-101%) scaleY(1); } .w-card.is-out .w-card-bar--b { transform: translateY(101%) scaleY(1); } .w-card.is-out .w-card-dim, .w-card.is-out .w-card-text { opacity: 0; transition: opacity .18s var(--ease-io); } .w-card.is-fast .w-card-bar, .w-card.is-fast .w-card-dim, .w-card.is-fast .w-card-text { transition-duration: .14s; transition-delay: 0s; } .w-card-no { font-family: var(--f-pixel); font-size: 13px; letter-spacing: .42em; padding-left: .42em; color: var(--w-acc-t, var(--acc)); } .w-card-title { font-family: var(--w-title); font-weight: var(--w-title-w); font-size: clamp(40px, 7.4vw, 118px); line-height: 1; letter-spacing: var(--w-title-ls); padding-left: var(--w-title-ls); text-shadow: var(--w-glow); max-width: 14ch; text-wrap: balance; } .w-card-sub { font-family: var(--w-title); font-weight: var(--w-title-w); font-size: clamp(16px, 1.8vw, 26px); letter-spacing: .3em; padding-left: .3em; text-transform: uppercase; color: var(--bone-2); } .w-card-jp { font-family: var(--f-display); font-weight: 700; font-size: clamp(14px, 1.3vw, 18px); letter-spacing: .5em; padding-left: .5em; color: var(--bone-2); } .w-card-log { font-family: var(--f-display); font-weight: 700; font-size: clamp(15px, 1.35vw, 20px); line-height: 1.5; color: var(--bone); max-width: 34ch; margin-top: 6px; } .w-card[data-slug="strange-company"] .w-card-title { font-size: clamp(26px, 4.4vw, 68px); line-height: 1.25; } .w-card[data-slug="saint-dymphna"].is-in .w-card-title { animation: w-tube .62s steps(1, end) both; } @keyframes w-tube { 0% { opacity: .15; } 10% { opacity: 1; } 16% { opacity: .25; } 24% { opacity: 1; } 48% { opacity: .7; } 52% { opacity: 1; } 100% { opacity: 1; } } /* ========================================================================== 2. Hero ========================================================================== */ .w-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; background: var(--g-bg); } .w-hero-media { position: absolute; inset: 0; overflow: hidden; background: var(--g-bg); } .w-hero-frame { position: absolute; inset: 0; transform-origin: 58% 42%; animation: w-drift 30s var(--ease-io) infinite alternate; } .w-hero.is-off .w-hero-frame { animation-play-state: paused; } /* a trailer-frame hero (in-game UI along its bottom): push in on the action, let the scrim take the HUD */ .w-hero.is-frame-hero .w-hero-frame { transform-origin: 50% 12%; animation-name: w-drift-in; } @keyframes w-drift-in { from { transform: scale(1.16) translate3d(0, 0, 0); } to { transform: scale(1.24) translate3d(-1%, -.6%, 0); } } @keyframes w-drift { from { transform: scale(1.03) translate3d(0, 0, 0); } to { transform: scale(1.11) translate3d(-1.4%, -1.2%, 0); } } .w-hero-pic, .w-hero-img, .w-hero-loop { position: absolute; inset: 0; width: 100%; height: 100%; } .w-hero-img, .w-hero-loop { object-fit: cover; } .w-hero-loop { opacity: 0; transition: opacity 1.4s var(--ease-out); background: transparent; } .w-hero-loop.has-frame { opacity: 1; } .w-hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 90%, transparent) 22%, color-mix(in srgb, var(--g-bg) 58%, transparent) 44%, transparent 70%), linear-gradient(100deg, color-mix(in srgb, var(--g-bg) 84%, transparent) 0%, color-mix(in srgb, var(--g-bg) 50%, transparent) 32%, transparent 60%), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent calc(var(--nav-h) + 90px)); } /* trailer-frame hero (Ironblood): its HUD and commentary live in the lower third, so the scrim goes fully opaque there and the copy never sits on in-game text */ .w-hero.is-frame-hero .w-hero-scrim { background: linear-gradient(to top, var(--g-bg) 0%, var(--g-bg) 31%, color-mix(in srgb, var(--g-bg) 80%, transparent) 42%, color-mix(in srgb, var(--g-bg) 38%, transparent) 58%, transparent 76%), linear-gradient(100deg, color-mix(in srgb, var(--g-bg) 84%, transparent) 0%, color-mix(in srgb, var(--g-bg) 50%, transparent) 32%, transparent 60%), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent calc(var(--nav-h) + 90px)); } /* PS1 horror: static scanlines over the art */ .w[data-slug="saint-dymphna"] .w-hero-media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .2) 0 1px, transparent 1px 3px); } .w-hero-copy { position: relative; display: grid; justify-items: start; gap: 14px; padding-top: calc(var(--nav-h) + 32px); padding-bottom: clamp(44px, 9vh, 104px); } .w-hero-copy > * { max-width: 660px; animation: w-rise 1s var(--ease-out) both; animation-delay: calc(var(--w-enter, 0ms) + var(--i, 0) * 70ms); } .w-hero-copy > .w-title.has-logo { animation: none; } .w-hero-copy > .w-title.has-logo img { animation: w-fade 1.1s var(--ease-out) both; animation-delay: calc(var(--w-enter, 0ms) + 60ms); } @keyframes w-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes w-fade { from { opacity: 0; } to { opacity: 1; } } .w-kick { font-family: var(--f-pixel); font-size: 13px; line-height: 1.5; letter-spacing: .22em; text-transform: uppercase; color: var(--bone-2); } .w-kick b { font-weight: 400; color: var(--w-acc-t, var(--acc)); } .w-title { line-height: .95; margin: 4px 0 2px; } .w-title--type { font-family: var(--w-title); font-weight: var(--w-title-w); font-size: clamp(40px, 6vw, 92px); letter-spacing: var(--w-title-ls); text-transform: var(--w-title-case); text-shadow: var(--w-glow); line-height: 1; } /* when the art already shows the logo, the typeset title steps back a little */ .w-hero.has-art-logo .w-title--type { font-size: clamp(28px, 3.2vw, 46px); } .w-logo-box { --ar: 2.6; display: block; width: min(540px, 80vw, calc(210px * var(--ar))); aspect-ratio: var(--ar); overflow: hidden; } .w-logo-box img { display: block; max-width: none; width: 100%; height: auto; filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .6)); } .w-logo-box.is-blend img { filter: none; } .w-logo-box:not(.is-trimmed) img { visibility: hidden; } .w-jp { display: flex; align-items: center; gap: 12px; font-family: var(--f-display); font-weight: 700; font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .32em; color: var(--bone-2); } .w-jp::before { content: ''; width: 26px; height: 2px; background: var(--acc); flex: none; } .w-logline { font-family: var(--f-display); font-weight: 700; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; color: var(--w-ink); text-wrap: balance; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); } .w-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-top: 4px; } .w-chips .chip { background-color: rgba(0, 0, 0, .45); } .w-fair { display: flex; align-items: center; gap: 10px; font-family: var(--f-pixel); font-size: 13px; line-height: 1.4; letter-spacing: .06em; color: var(--acc-2); } .w-fair-mark { width: 10px; height: 10px; background: var(--acc-2); flex: none; box-shadow: 0 0 10px var(--acc-2); } .w-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 10px; } .w-actions .btn--ghost { --b-bg: rgba(0, 0, 0, .42); } .w-send { color: var(--bone-2); } .w-tate { position: absolute; top: calc(var(--nav-h) + 48px); right: calc(var(--gutter) - 4px); font-family: var(--f-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 22px); color: var(--bone); opacity: .55; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); pointer-events: none; } .w-tate::after { content: ''; display: block; width: 1px; height: 64px; margin: 18px auto 0; background: linear-gradient(var(--acc), transparent); } .w-cue { position: absolute; right: var(--gutter); bottom: clamp(28px, 5vh, 52px); display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--f-pixel); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--bone-2); transition: color .2s; } .w-cue .ic { width: 18px; height: 18px; transition: transform .3s var(--ease-out); } .w-cue:hover { color: var(--bone); } .w-cue:hover .ic { transform: translateY(3px); } /* key art that already carries the logo (Nezumi, Utsuro): on wide screens it hangs to the right like a one-sheet so its lettering never sits under the copy */ @media (min-aspect-ratio: 1/1) and (min-width: 861px) { /* shown whole at its own 16:9 in the upper right (no cover crop can clip the lettering), feathered into the page colour on the sides the copy comes from */ .w-hero.has-art-logo .w-hero-media { inset: calc(var(--nav-h) + 2svh) 0 auto auto; width: min(64vw, (100svh - var(--nav-h)) * 1.62); aspect-ratio: 16 / 9; } .w-hero.has-art-logo .w-hero-scrim { background: linear-gradient(90deg, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 55%, transparent) 12%, transparent 30%), linear-gradient(to top, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 60%, transparent) 14%, transparent 32%), linear-gradient(to bottom, var(--g-bg) 0%, transparent 12%); } .w-hero.has-art-logo .w-hero-copy > * { max-width: min(660px, 40vw); } .w-hero.has-art-logo .w-tate { display: none; } } /* art direction for wide screens: keep the sulking moon clear of the logo */ @media (min-aspect-ratio: 1/1) and (min-width: 861px) { .w[data-slug="jumpshot"] .w-hero-img { object-position: 26% 60% !important; } } /* portrait screens: the wide art sits on top, copy below it (no over-zoomed crops) */ @media (max-aspect-ratio: 1/1) { .w-hero { --w-art-h: min(56svh, 125vw); } .w-hero-media { bottom: auto; height: var(--w-art-h); } .w-hero-copy { padding-top: calc(var(--w-art-h) - 96px); } .w-hero-scrim { background: linear-gradient(to top, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 70%, transparent) 22%, transparent 55%), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent calc(var(--nav-h) + 70px)); } .w-hero.is-frame-hero .w-hero-scrim { background: linear-gradient(to top, var(--g-bg) 0%, var(--g-bg) 22%, color-mix(in srgb, var(--g-bg) 86%, transparent) 34%, transparent 62%), linear-gradient(to bottom, rgba(0, 0, 0, .5), transparent calc(var(--nav-h) + 70px)); } /* art that carries its own lettering (Monban, Nezumi, Utsuro) is shown whole, like a one-sheet, just under the nav: a portrait crop would cut the logo in half */ .w-hero.has-art-logo { --w-art-h: min(66.4vw, 50svh); justify-content: flex-start; } @media (min-width: 700px) { .w-hero.has-art-logo { min-height: 0; } } .w-hero.has-art-logo .w-hero-media { top: calc(var(--nav-h) + var(--safe-t)); } .w-hero.has-art-logo .w-hero-copy { padding-top: calc(var(--nav-h) + var(--safe-t) + var(--w-art-h) - 20px); } .w-hero.has-art-logo .w-hero-scrim { background: linear-gradient(to top, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 55%, transparent) 14%, transparent 34%); } } /* lettered art drifts less, so its logo never slides out of frame */ .w-hero.has-art-logo .w-hero-frame { transform-origin: 50% 45%; animation-name: w-drift-soft; } @keyframes w-drift-soft { from { transform: scale(1) translate3d(0, 0, 0); } to { transform: scale(1.05) translate3d(0, -.6%, 0); } } @media (max-width: 860px) { .w-hero { min-height: calc(100svh - var(--thumb-h) - var(--safe-b)); } .w-tate, .w-cue { display: none; } } @media (max-width: 699px) { .w-hero-copy { gap: 12px; padding-bottom: 36px; } .w-kick { font-size: 11.5px; letter-spacing: .16em; } .w-logline { font-size: 20px; } .w-logo-box { width: min(86vw, calc(150px * var(--ar))); } .w-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; gap: 10px; } .w-actions .btn { padding-inline: 12px; white-space: normal; text-align: center; } .w-actions .w-cta { grid-column: 1 / -1; } .w-actions.is-solo .w-alt { grid-column: 1 / -1; } .w-actions .w-send { grid-column: 1 / -1; justify-self: start; padding-inline: 0; } } /* ========================================================================== 3. Trailer: house lights down ========================================================================== */ .w-trailer { position: relative; padding-block: clamp(72px, 9vw, 140px) clamp(56px, 7vw, 110px); } .w-screen { position: relative; max-width: 1180px; margin-inline: auto; } .w-glow { position: absolute; left: -7%; top: -9%; width: 114%; height: 118%; filter: blur(46px) saturate(1.5); opacity: 0; transition: opacity 1.4s var(--ease-out); pointer-events: none; } .w-glow.is-on { opacity: .8; } .w-screen-frame { position: relative; aspect-ratio: 16 / 9; background: #000; overflow: hidden; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .9), 0 0 0 1px var(--line-2); } .w-screen-poster, .w-screen-poster img, .w-screen-video { position: absolute; inset: 0; width: 100%; height: 100%; } .w-screen-poster img { object-fit: cover; transition: transform 1.2s var(--ease-out), filter .6s; filter: brightness(.78) saturate(.95); } .w-screen-frame:hover .w-screen-poster img { transform: scale(1.025); filter: brightness(.9); } .w-screen-video { object-fit: contain; background: #000; } .w-screen-frame.is-playing .w-screen-poster, .w-screen-frame.is-playing .w-play-btn { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; } .w-screen-frame:not(.is-playing) .w-screen-video { visibility: hidden; } .w-play-btn { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 18px; color: var(--bone); background: radial-gradient(ellipse at center, rgba(0, 0, 0, .1), rgba(0, 0, 0, .5)); -webkit-tap-highlight-color: transparent; } /* key art with its own centred logo: the play control sits in the lower third */ .w-screen-frame.is-key .w-play-btn { align-content: end; padding-bottom: 6%; background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent 55%); } .w-screen-frame.is-key .w-play-ic { width: clamp(56px, 6vw, 88px); } .w-play-ic { display: grid; place-items: center; width: clamp(76px, 9vw, 124px); aspect-ratio: 1; background: var(--acc); color: var(--acc-fg, #fff7ee); box-shadow: 6px 6px 0 rgba(0, 0, 0, .6); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .w-play-ic .ic { width: 42%; height: 42%; margin-left: 6%; } .w-play-meta { display: flex; gap: 14px; padding: 7px 12px 6px 14px; font-family: var(--f-pixel); font-size: 13px; letter-spacing: .26em; text-transform: uppercase; background: rgba(0, 0, 0, .66); } .w-play-dur { color: var(--w-acc-t, var(--acc)); } @media (hover: hover) { .w-play-btn:hover .w-play-ic { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 rgba(0, 0, 0, .6); } } .w-play-btn:active .w-play-ic { transform: translate(2px, 2px); box-shadow: 0 0 0 rgba(0, 0, 0, .6); } .w-play-btn:focus-visible { outline-offset: -6px; } /* phones: on key art the control tucks into the lower-left corner, clear of the centred logo */ @media (max-width: 699px) { .w-screen-frame.is-key .w-play-btn { grid-auto-flow: column; place-content: end start; align-items: center; gap: 10px; padding: 0 0 12px 12px; } .w-screen-frame.is-key .w-play-ic { width: 48px; box-shadow: 4px 4px 0 rgba(0, 0, 0, .6); } .w-play-meta { font-size: 12px; letter-spacing: .2em; } } .w-screen-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding-top: 12px; } .w-screen-now { display: flex; align-items: center; gap: 10px; font-family: var(--f-pixel); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); } .w-rec { width: 8px; height: 8px; background: var(--fog-2); flex: none; } .w-screen-tools { display: flex; gap: 8px; } .w-screen-tools .btn { min-height: 44px; } .w-house { position: fixed; inset: 0; z-index: 510; background: #000; opacity: 0; pointer-events: none; transition: opacity 1.2s var(--ease-out); } .w.is-lights .w-house { opacity: .96; pointer-events: auto; cursor: pointer; } .w.is-lights .w-screen { z-index: 520; } .w.is-lights .w-rec { background: var(--seal-hot); box-shadow: 0 0 10px var(--seal); } .w.is-lights .w-screen-now { color: var(--bone-2); } /* ========================================================================== 4. The pitch ========================================================================== */ .w-pitch { position: relative; padding-block: clamp(84px, 11vw, 170px) clamp(64px, 8vw, 120px); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--w-surface) 40%, transparent) 70%, transparent); } .w-pitch-grid { display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: clamp(28px, 5vw, 88px); } .w-pitch-side { display: grid; align-content: start; gap: 28px; position: sticky; top: calc(var(--nav-h) + 36px); align-self: start; } .w-onesheet { position: relative; margin: 0; max-width: 240px; } .w-onesheet img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; box-shadow: var(--shadow-hard), 0 0 0 1px var(--line-2); } .w-onesheet figcaption { display: flex; justify-content: space-between; margin-top: 12px; font-family: var(--f-pixel); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); } .w-onesheet figcaption span:last-child { color: var(--w-acc-t, var(--acc)); } .w-pitch-text { font-family: var(--f-display); font-weight: 800; font-size: clamp(25px, 3vw, 44px); line-height: 1.26; letter-spacing: -.005em; font-feature-settings: 'palt'; color: color-mix(in srgb, var(--w-ink) 66%, transparent); text-wrap: pretty; } .w-pitch-lead { color: var(--w-ink); } .w-desc { margin-top: clamp(28px, 3vw, 44px); font-size: clamp(16.5px, 1.2vw, 18px); line-height: 1.75; color: var(--bone-2); max-width: 64ch; } .w-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-top: clamp(44px, 5.5vw, 80px); border-top: 1px solid var(--line-2); } .w-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 24px 24px 8px 0; } .w-stat + .w-stat { padding-left: clamp(16px, 2vw, 28px); border-left: 1px solid var(--line); } .w-stat dd { position: relative; font-family: var(--f-display); font-weight: 800; font-size: clamp(52px, 6.6vw, 104px); line-height: .9; letter-spacing: -.02em; color: var(--acc); font-variant-numeric: lining-nums; } .w-stat dt { font-family: var(--f-pixel); font-size: 12px; line-height: 1.5; letter-spacing: .16em; text-transform: uppercase; color: var(--fog); max-width: 22ch; } .w-stat.has-moon dd { display: flex; align-items: center; gap: 18px; } .w-moon { width: clamp(52px, 5.4vw, 84px); height: auto; image-rendering: pixelated; transform: rotate(-8deg); filter: drop-shadow(0 0 18px rgba(255, 159, 46, .35)); } .w-bill { margin-top: clamp(72px, 9vw, 130px); } .w-bill-k { margin-bottom: 26px; } .w-feats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(20px, 3vw, 48px); } .w-feat { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; padding: 22px 0 26px; border-top: 1px solid var(--line-2); } .w-feat-no { font-family: var(--f-pixel); font-size: 15px; letter-spacing: .1em; color: var(--w-acc-t, var(--acc)); } .w-feat-t { font-size: clamp(17px, 1.3vw, 19.5px); line-height: 1.5; color: var(--w-ink); } .w-feat.is-fair { border-top-color: var(--acc-2); } .w-feat.is-fair .w-feat-no, .w-feat.is-fair .w-feat-t { color: var(--acc-2); } @media (max-width: 1024px) { .w-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .w-pitch-grid { grid-template-columns: 1fr; } .w-pitch-side { position: static; } .w-onesheet { display: none; } } @media (max-width: 699px) { .w-trailer + .w-pitch { padding-top: 40px; } .w-feats { grid-template-columns: 1fr; } .w-stats { grid-template-columns: 1fr 1fr; } .w-stat { padding-right: 12px; } .w-stat:nth-child(odd) { padding-left: 0; border-left: 0; } .w-stat:nth-child(n + 3) { border-top: 1px solid var(--line); } .w-stat:last-child:nth-child(odd) { grid-column: 1 / -1; } .w-stat.has-moon dd { gap: 10px; } } /* ========================================================================== 5. Contact sheet ========================================================================== */ .w-sheet { position: relative; padding-block: clamp(84px, 10vw, 150px); background: #050404; color: var(--bone); } /* sprocket holes along both edges */ .w-sheet::before, .w-sheet::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background-image: linear-gradient(90deg, rgba(239, 230, 214, .14) 0 14px, transparent 14px); background-size: 30px 12px; background-repeat: repeat-x; background-position: 10px 0; } .w-sheet::before { top: 22px; } .w-sheet::after { bottom: 22px; } .w-sheet-meta { font-family: var(--f-pixel); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); } .w-sheet-grid { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 30px); } @media (max-width: 1024px), (hover: none) and (pointer: coarse) { .w-sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .w-shot { display: grid; gap: 8px; align-content: start; } .w-edge { display: flex; justify-content: space-between; font-family: var(--f-pixel); font-size: 11px; letter-spacing: .18em; color: color-mix(in srgb, var(--w-acc-t, var(--acc)) 85%, #000); } .w-edge span:last-child { color: var(--fog-2); } .w-frame { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; background: #111; cursor: zoom-in; -webkit-tap-highlight-color: transparent; } .w-frame img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.9) saturate(.95); transition: transform .7s var(--ease-out), filter .4s; } /* a grease-pencil box, the editor's pick */ .w-frame::after { content: ''; position: absolute; inset: -8px; border: 3px solid var(--seal); border-radius: 14px 5px 16px 8px; opacity: 0; transform: rotate(-1.2deg) scale(1.05); transition: opacity .18s, transform .35s var(--ease-back); pointer-events: none; } @media (hover: hover) { .w-frame:hover img { transform: scale(1.035); filter: none; } .w-frame:hover::after { opacity: .92; transform: rotate(-1.2deg); } } .w-frame:focus-visible { outline: none; } .w-frame:focus-visible::after { opacity: 1; transform: rotate(-1.2deg); border-color: var(--gold); } .w-frame:active img { transform: scale(.99); } .w[data-slug="saint-dymphna"] .w-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); } .w.is-pixel-game .w-frame img, .w-lb.is-pixel img { image-rendering: pixelated; } .w-cap { font-size: 14px; line-height: 1.5; color: var(--bone-2); margin-top: 4px; text-wrap: pretty; } @media (max-width: 699px) { .w-sheet-grid { gap: 22px 12px; } .w-edge { font-size: 10px; letter-spacing: .12em; } .w-cap { font-size: 13px; line-height: 1.45; } } /* ── Lightbox ──────────────────────────────────────────────────────────── */ html.w-lb-open { overflow: hidden; } .w-lb { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: var(--bone); overflow: hidden; } .w-lb::backdrop { background: #000; } .w-lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: w-fade .3s var(--ease-out); } .w-lb-top { display: flex; align-items: center; gap: 16px; padding: calc(10px + var(--safe-t)) max(12px, env(safe-area-inset-right)) 6px max(20px, env(safe-area-inset-left)); } .w-lb-count { font-family: var(--f-pixel); font-size: 14px; letter-spacing: .2em; color: var(--w-acc-t, var(--acc)); min-width: 7.5ch; } .w-lb-title { flex: 1; font-family: var(--f-pixel); font-size: 12px; letter-spacing: .24em; text-transform: uppercase; color: var(--fog); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .w-lb-close { width: 48px; height: 48px; color: var(--bone); } .w-lb-close .ic { width: 24px; height: 24px; } .w-lb-track { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; outline: none; } .w-lb-track::-webkit-scrollbar { display: none; } .w-lb-slide { flex: 0 0 100%; min-width: 0; display: grid; place-items: center; margin: 0; padding: 8px clamp(0px, 6vw, 96px); scroll-snap-align: center; scroll-snap-stop: always; } .w-lb-slide img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 90px rgba(0, 0, 0, .8); } .w-lb-bottom { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 10px max(12px, env(safe-area-inset-right)) calc(14px + var(--safe-b)) max(12px, env(safe-area-inset-left)); } .w-lb-text { text-align: center; min-height: 3.2em; display: grid; align-content: center; gap: 4px; } .w-lb-cap { font-family: var(--f-display); font-weight: 700; font-size: clamp(16px, 1.5vw, 21px); line-height: 1.4; } .w-lb-alt { font-size: 13px; line-height: 1.5; color: var(--fog); max-width: 80ch; margin-inline: auto; } .w-lb-nav { display: grid; place-items: center; width: 52px; height: 52px; border: 1.5px solid var(--line-2); color: var(--bone); background: rgba(0, 0, 0, .5); transition: border-color .2s, color .2s, opacity .2s; -webkit-tap-highlight-color: transparent; } .w-lb-nav .ic { width: 22px; height: 22px; } .w-lb-nav:hover { border-color: var(--acc); color: var(--acc); } .w-lb-nav:disabled { opacity: .25; cursor: default; border-color: var(--line); color: var(--bone); } @media (min-width: 861px) { .w-lb-nav { position: absolute; top: 50%; margin-top: -26px; } .w-lb-prev { left: max(18px, env(safe-area-inset-left)); } .w-lb-next { right: max(18px, env(safe-area-inset-right)); } .w-lb-bottom { grid-template-columns: 1fr; padding-inline: 96px; } } @media (max-width: 699px) { .w-lb-alt { display: none; } .w-lb-slide { padding-inline: 0; } } /* ========================================================================== 6. Where to play ========================================================================== */ .w-play { position: relative; padding-block: clamp(84px, 10vw, 150px) clamp(40px, 5vw, 70px); background: linear-gradient(180deg, var(--g-bg), color-mix(in srgb, var(--w-surface) 55%, var(--g-bg)) 60%, var(--g-bg)); } .w-venues { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); } .w-venue { --v: var(--acc); position: relative; display: flex; flex-direction: column; gap: 14px; min-height: 300px; padding: clamp(22px, 2.2vw, 30px); background: color-mix(in srgb, var(--g-bg) 70%, #000); border: 1px solid var(--line); border-top: 3px solid var(--v); box-shadow: var(--shadow-hard); overflow: hidden; isolation: isolate; } .w-venue--itch { --v: #ff7a7a; } .w-venue--arcade { --v: var(--gold); border-color: rgba(242, 177, 62, .32); border-top-color: var(--gold); } .w-venue-head { display: flex; align-items: center; gap: 14px; } .w-venue-head h3 { font-size: clamp(22px, 2vw, 28px); line-height: 1.1; } .w-venue-ic { display: grid; place-items: center; width: 44px; height: 44px; flex: none; color: var(--v); border: 1.5px solid currentColor; } .w-venue-ic .ic { width: 24px; height: 24px; } .w-venue-text { font-size: 15.5px; line-height: 1.6; color: var(--bone-2); } .w-venue-offer { font-family: var(--f-pixel); font-size: 13px; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); text-shadow: 0 0 14px rgba(242, 177, 62, .35); } .w-venue-cta { margin-top: auto; display: grid; gap: 10px; padding-top: 8px; } .w-venue-btn { white-space: normal; text-align: center; } .w-venue-bg { position: absolute; z-index: -1; right: -12%; bottom: -18%; width: 70%; height: auto; opacity: .32; filter: saturate(.9); -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent); mask-image: radial-gradient(closest-side, #000 40%, transparent); pointer-events: none; } .w-venue--arcade::before { content: ''; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 80% 60% at 90% 100%, rgba(242, 177, 62, .12), transparent 70%); } /* iPad portrait / small laptop: venues become wide rows (name, status and line on the left, the action on the right) rather than three squeezed columns */ @media (max-width: 1024px) and (min-width: 700px) { .w-venues { grid-template-columns: 1fr; } .w-venue { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, auto); align-items: center; column-gap: clamp(24px, 4vw, 48px); row-gap: 12px; } .w-venue-head, .w-venue > p { grid-column: 1; } .w-venue-cta { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; } .w-venue-bg { width: 34%; right: 30%; bottom: -70%; } } @media (max-width: 699px) { .w-venues { grid-template-columns: 1fr; } .w-venue { min-height: 0; } } /* notify: games still in development */ .w-notify { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(20px, 4vw, 64px); align-items: start; margin-bottom: clamp(20px, 2vw, 28px); padding: clamp(24px, 3.2vw, 44px); border: 1.5px dashed color-mix(in srgb, var(--acc) 55%, transparent); background: color-mix(in srgb, var(--acc) 7%, transparent); } .w-notify-copy { display: grid; gap: 14px; } .w-notify-h { font-size: clamp(26px, 3vw, 42px); line-height: 1.1; font-weight: 800; } .w-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 12px; align-items: end; } .w-form .field { grid-column: 1; } .w-form button[type="submit"] { grid-column: 2; min-height: 50px; } .w-form .form-status, .w-form .form-note { grid-column: 1 / -1; } .w-form .form-status:empty { display: none; } .w-form[data-state="ok"] .form-status { color: var(--bone); padding-left: 16px; border-left: 3px solid var(--seal); } .w-form[data-state="sending"] button[type="submit"] { opacity: .7; } @media (max-width: 860px) { .w-notify { grid-template-columns: 1fr; } } @media (max-width: 699px) { .w-form { grid-template-columns: 1fr; } .w-form button[type="submit"] { grid-column: 1; width: 100%; } } /* ========================================================================== 7. Stamp rally strip ========================================================================== */ .w-stamp { padding-block: clamp(36px, 5vw, 64px) clamp(56px, 7vw, 96px); } .w-stamp-inner { display: flex; align-items: center; gap: clamp(20px, 3vw, 40px); max-width: 880px; margin-inline: auto; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 3vw, 36px); border: 1.5px dashed var(--line-2); background: rgba(0, 0, 0, .22); } .w-stamp-slot { position: relative; display: grid; place-items: center; width: 104px; height: 104px; flex: none; border: 1.5px dashed var(--line-2); } .w-stamp-ghost { position: absolute; font-family: var(--f-display); font-weight: 800; font-size: 50px; color: var(--line-2); transition: opacity .3s; } .w-hanko { position: relative; font-size: 84px; opacity: 0; -webkit-mask-image: url("data:image/svg+xml;utf8,"); mask-image: url("data:image/svg+xml;utf8,"); } .w-stamp-ink { position: absolute; inset: -10px; border-radius: 50%; background: radial-gradient(closest-side, rgba(217, 72, 44, .45), transparent); opacity: 0; pointer-events: none; } .w-stamp.is-stamped .w-hanko { opacity: 1; } .w-stamp.is-stamped .w-stamp-ghost { opacity: 0; } .w-stamp.is-quiet .w-hanko { opacity: .86; filter: saturate(.85); } .w-stamp.is-slam .w-hanko { animation: w-slam .56s var(--ease-out) both; } .w-stamp.is-slam .w-stamp-ink { animation: w-ink .9s var(--ease-out) .2s both; } .w-stamp.is-slam .w-stamp-inner { animation: w-thud .4s .22s both; } @keyframes w-slam { 0% { opacity: 0; transform: scale(2.6) rotate(-24deg); } 40% { opacity: 1; transform: scale(.9) rotate(-3deg); } 62% { transform: scale(1.05) rotate(-6deg); } 100% { opacity: 1; transform: scale(1) rotate(-5deg); } } @keyframes w-ink { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } } @keyframes w-thud { 0%, 100% { transform: none; } 30% { transform: translate(1px, 3px); } 60% { transform: translate(-1px, -1px); } } .w-stamp-copy { display: grid; gap: 10px; min-width: 0; } .w-stamp-k { font-size: 12px; } .w-stamp-line { font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; color: var(--w-ink); } .w-stamp-line a { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; } .w-stamp-line a:hover { color: var(--gold-hot); } .w-stamp-card { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; } .w-stamp-card li { display: grid; place-items: center; width: 26px; height: 26px; font-family: var(--f-display); font-weight: 800; font-size: 14px; color: var(--fog-2); border: 1px dashed var(--line-2); } .w-stamp-card li.is-on { background: var(--seal); border: 1px solid var(--seal); color: #fff4ea; transform: rotate(-4deg); } .w-stamp-card li.is-here { outline: 1.5px solid var(--acc); outline-offset: 2px; } @media (max-width: 699px) { .w-stamp-inner { align-items: flex-start; } .w-stamp-slot { width: 78px; height: 78px; } .w-hanko { font-size: 64px; } .w-stamp-ghost { font-size: 38px; } .w-stamp-card { gap: 4px; } .w-stamp-card li { width: 21px; height: 21px; font-size: 12px; } .w-stamp-k .jp-k { display: none; } .w-stamp-line { font-size: 16px; } } /* ========================================================================== 8. Up next: the next film's art rises into view ========================================================================== */ .w-next { position: relative; background: var(--g-bg); color: var(--g-ink, var(--bone)); } .w-next-main { position: relative; display: block; height: clamp(440px, 78svh, 860px); overflow: hidden; isolation: isolate; -webkit-tap-highlight-color: transparent; } .w-next-art { position: absolute; inset: 0; clip-path: inset(24% 0 0 0); transition: clip-path 1.5s var(--ease-out); } .w-next-art img { width: 100%; height: 100%; object-fit: cover; transform: translateY(12%) scale(1.14); transition: transform 1.8s var(--ease-out), filter .5s; filter: brightness(.82); } .w-next.is-in .w-next-art { clip-path: inset(0 0 0 0); } .w-next.is-in .w-next-art img { transform: none; } .w-next.is-frame .w-next-art img { transform-origin: 50% 8%; transform: translateY(12%) scale(1.34); } .w-next.is-frame.is-in .w-next-art img { transform: scale(1.22); } .w-next-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, var(--w-from, var(--ink)) 0%, color-mix(in srgb, var(--w-from, var(--ink)) 40%, transparent) 20%, transparent 40%), linear-gradient(to top, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 86%, transparent) 26%, color-mix(in srgb, var(--g-bg) 45%, transparent) 50%, transparent 72%), linear-gradient(100deg, color-mix(in srgb, var(--g-bg) 70%, transparent) 0%, transparent 55%); } .w-next.is-frame .w-next-scrim { background: linear-gradient(to bottom, var(--w-from, var(--ink)) 0%, color-mix(in srgb, var(--w-from, var(--ink)) 40%, transparent) 20%, transparent 40%), linear-gradient(to top, var(--g-bg) 0%, var(--g-bg) 30%, color-mix(in srgb, var(--g-bg) 72%, transparent) 46%, transparent 70%), linear-gradient(100deg, color-mix(in srgb, var(--g-bg) 70%, transparent) 0%, transparent 55%); } .w-next-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(32px, 6vw, 84px); display: grid; gap: 14px; } .w-next-k { font-family: var(--f-pixel); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--bone-2); } .w-next-k b { font-weight: 400; color: var(--acc); } .w-next-title { display: block; max-width: 16ch; font-family: var(--f-display); font-weight: 800; font-size: clamp(44px, 8.4vw, 136px); line-height: .92; letter-spacing: -.015em; font-feature-settings: 'palt'; text-shadow: 0 6px 40px rgba(0, 0, 0, .6); } .w-next-go { display: inline-grid; place-items: center; vertical-align: .02em; width: .6em; height: .6em; margin-left: .1em; background: var(--acc); color: var(--acc-fg, #fff7ee); box-shadow: 5px 5px 0 rgba(0, 0, 0, .55); transition: transform .3s var(--ease-out); } .w-next-go .ic { width: 50%; height: 50%; } .w-next-log { font-family: var(--f-display); font-weight: 700; font-size: clamp(17px, 1.6vw, 22px); color: var(--bone-2); max-width: 44ch; text-wrap: balance; } @media (hover: hover) { .w-next-main:hover .w-next-art img { filter: brightness(.95); } .w-next-main:hover .w-next-go { transform: translateX(8px); } } .w-next-main:focus-visible { outline-offset: -6px; } .w-next-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-block: 22px 8px; } .w-prev, .w-all { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; color: var(--bone-2); transition: color .2s; } .w-prev .ic, .w-all .ic { width: 18px; height: 18px; flex: none; } .w-prev span { display: grid; font-family: var(--f-display); font-weight: 700; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.3; } .w-prev small { font-family: var(--f-pixel); font-weight: 400; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--fog); } .w-all { font-family: var(--f-pixel); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; } .w-prev:hover, .w-all:hover { color: var(--bone); } @media (max-width: 699px) { .w-next-main { height: 68svh; min-height: 420px; } .w-next-title { font-size: clamp(40px, 12vw, 60px); } .w-next-scrim { background: linear-gradient(to bottom, var(--w-from, var(--ink)) 0%, transparent 30%), linear-gradient(to top, var(--g-bg) 0%, color-mix(in srgb, var(--g-bg) 90%, transparent) 34%, color-mix(in srgb, var(--g-bg) 40%, transparent) 60%, transparent 80%); } .w-next.is-frame .w-next-scrim { background: linear-gradient(to bottom, var(--w-from, var(--ink)) 0%, transparent 30%), linear-gradient(to top, var(--g-bg) 0%, var(--g-bg) 34%, color-mix(in srgb, var(--g-bg) 55%, transparent) 58%, transparent 78%); } } /* ── Reduced motion: no drift, no loops, no rising ──────────────────────── */ @media (prefers-reduced-motion: reduce) { .w-hero-frame { animation: none; transform: scale(1.03); } .w-hero.is-frame-hero .w-hero-frame { animation: none; transform: scale(1.18); } .w-hero.has-art-logo .w-hero-frame { animation: none; transform: none; } .w-hero-copy > *, .w-hero-copy > .w-title.has-logo img { animation: none; } .w-next-art { clip-path: none; } .w-next-art img { transform: none; } .w-stamp.is-slam .w-hanko, .w-stamp.is-slam .w-stamp-ink, .w-stamp.is-slam .w-stamp-inner { animation: none; } .w-house { transition: none; } } /* no catalogue numbers or frame counters */ .w-card-no, .w-edge, .w-sheet-meta { display: none !important; } /* phones: the pitch reads as a paragraph, not a poster */ @media (max-width: 700px) { .w-pitch-text { font-size: 22px !important; line-height: 1.3 !important; } } .w-trailer-cap { display: none; } .w-screen-now { display: none !important; }