/* ============================================================================= FORT ROT — THE FRONT END (0.41) One frame for every screen: title pages, settings, pause, objectives, Containment Files, Cache Index, the briefing, confirms and the after-action report. It replaces seven sheets (screens, menu, menu-mobile, menu-chrome, menu-cinematic, menu-premium, menu-crt) that each moved and re-skinned the same panels. header breadcrumb left; presence, player card and tools right body left column of large options | right detail pane footer input prompts for the live device | the page's own actions The header, body and footer share one inline gutter (--fe-px), so the breadcrumb, the page title, the option rows and the detail pane all hang off the same two edges on every screen. src/ui/frontend.js fills the crumbs, prompts, detail pane and player card; scripts/check_frontend_frame.py proves every screen mounts it. ============================================================================= */ html:root { /* the palette (menu, HUD and the Containment Files reader share it) */ --mu: clamp(.92px, calc(.5px + .05vmin), 1.35px); --ember: #f08a4c; --ember-hot: #ffae78; --ember-fill: #e57f43; --ember-ink: #170c06; --ink-0: #f6f0e4; --ink-1: #cdc5b4; --ink-2: #968f81; --ink-3: #6c675d; --hair: rgba(240, 232, 214, .12); --hair-hi: rgba(240, 232, 214, .24); --hair-hot: rgba(240, 138, 76, .55); --fe-ok: #9fd18a; --fe-bad: #e0604a; --rim: inset 0 1px 0 rgba(255, 248, 232, .07); --lift: 0 30px 90px rgba(0, 0, 0, .55), 0 2px 10px rgba(0, 0, 0, .35); --brk: rgba(240, 232, 214, .42); --brackets: linear-gradient(var(--brk), var(--brk)) left 10px top 10px / 12px 1px no-repeat, linear-gradient(var(--brk), var(--brk)) left 10px top 10px / 1px 12px no-repeat, linear-gradient(var(--brk), var(--brk)) right 10px bottom 10px / 12px 1px no-repeat, linear-gradient(var(--brk), var(--brk)) right 10px bottom 10px / 1px 12px no-repeat; --ease-premium: cubic-bezier(.2, .8, .2, 1); --focus-ring: var(--ember); --menu-radius: 2px; /* the frame's geometry */ --fe-gx: clamp(16px, 3.75vw, 72px); --fe-maxw: 1840px; --fe-px: max(var(--fe-gx), env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px), calc((100vw - var(--fe-maxw)) / 2)); --fe-head-h: clamp(56px, 8.4vh, 96px); --fe-foot-h: clamp(52px, 6.6vh, 76px); --fe-top: clamp(8px, 2.4vh, 32px); --fe-gap: clamp(16px, 2.8vw, 64px); --fe-col-w: clamp(280px, 31vw, 600px); /* type: 1080p body is 16px+, every size scales with the UI text setting */ --fe-s: var(--ui-scale, 1); --fe-t-crumb: calc(clamp(12px, .5vw + .5vh, 17px) * var(--fe-s)); --fe-t-kick: calc(clamp(12px, .48vw + .46vh, 16px) * var(--fe-s)); --fe-t-title: calc(clamp(30px, 1.9vw + 2.1vh, 66px) * var(--fe-s)); --fe-t-opt: calc(clamp(18px, 1vw + 1.05vh, 32px) * var(--fe-s)); --fe-t-note: calc(clamp(13px, .5vw + .6vh, 18px) * var(--fe-s)); --fe-t-body: calc(clamp(15px, .5vw + .64vh, 21px) * var(--fe-s)); --fe-t-dtitle: calc(clamp(22px, 1.3vw + 1.45vh, 48px) * var(--fe-s)); --fe-t-prompt: calc(clamp(12px, .5vw + .55vh, 17px) * var(--fe-s)); --fe-opt-h: max(44px, calc(var(--fe-t-opt) * 2.05)); } /* ------------------------------------------------------------- screens */ .screen { position: fixed; inset: 0; z-index: 60; display: none; overflow: hidden; color: var(--ink-1); font-family: var(--font-ui); } .screen.active { display: block; } #pause-fps { position: absolute; top: calc(10px + env(safe-area-inset-top, 0px)); right: calc(14px + env(safe-area-inset-right, 0px)); z-index: 6; pointer-events: none; } .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------- the title's backdrop */ #title-screen { background: #050607; } #title-bg { position: absolute; inset: 0; overflow: hidden; opacity: .9; filter: saturate(.75) contrast(1.08) brightness(.9); } #title-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 62%; animation: fe-kenburns 52s ease-in-out infinite alternate; } @keyframes fe-kenburns { from { transform: scale(1.03) translate3d(.4%, .2%, 0); } to { transform: scale(1.1) translate3d(-1.4%, -1%, 0); } } #title-grad { position: absolute; inset: 0; pointer-events: none; overflow: hidden; background: radial-gradient(120% 70% at 50% 108%, rgba(240, 120, 60, .14), transparent 60%), linear-gradient(180deg, rgba(4, 6, 8, .6), rgba(4, 6, 8, .1) 26%, rgba(3, 4, 6, .86)); } /* the monitor room: a stack of sets on the right still showing the station's feeds (src/fx/crtFeeds.js paints them). Decoration only. */ #tv-wall { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; contain: paint; } #tv-wall .tvw-room { position: absolute; inset: 0; background: radial-gradient(48% 42% at 8% -4%, rgba(170, 26, 16, .34), transparent 72%), radial-gradient(60% 40% at 74% 96%, rgba(110, 170, 150, .13), transparent 70%), radial-gradient(70% 60% at 34% 58%, rgba(240, 138, 76, .07), transparent 70%), linear-gradient(180deg, rgba(5, 6, 7, .9), rgba(4, 5, 6, .82) 60%, rgba(2, 2, 3, .96)), /* 512 px, 57 KB: under that wash the 511 KB world texture was wasted, and on a slow first visit it took bandwidth from the game's own files */ url("../assets/img/concrete_backdrop.webp") center / 560px repeat, #08090a; } #tv-wall .tvw-room::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 13%; background: linear-gradient(180deg, rgba(0, 0, 0, .9), rgba(10, 9, 8, .96) 3%, #050505); } #tv-wall::before { content: ""; position: absolute; left: -12%; top: -18%; width: 52%; height: 70%; z-index: 1; background: radial-gradient(closest-side, rgba(210, 34, 20, .3), transparent); animation: tvwBeacon 3.6s ease-in-out infinite; } @keyframes tvwBeacon { 0%, 100% { opacity: .25; } 45% { opacity: 1; } 60% { opacity: .4; } } #tv-wall::after { content: ""; position: absolute; inset: 0; z-index: 3; background: radial-gradient(120% 95% at 50% 48%, transparent 46%, rgba(0, 0, 0, .78) 100%); } #tv-wall .tv-stack { position: absolute; z-index: 2; right: max(2.5vw, 18px); bottom: calc(13% - 4px); width: min(54vw, 860px); aspect-ratio: 1.22; transition: opacity .4s ease, filter .4s ease, transform .5s var(--ease-premium); } #tv-wall .tv-stack::before { content: ""; position: absolute; left: -2%; right: -2%; bottom: -3.2%; height: 3.4%; border-radius: 3px; background: linear-gradient(180deg, #2b2824, #141210 60%, #0a0908); box-shadow: 0 10px 30px rgba(0, 0, 0, .8); } #tv-wall .tv { --spill: rgba(130, 200, 175, .2); position: absolute; aspect-ratio: 4 / 3.45; border-radius: 7% / 9%; background: linear-gradient(165deg, #3a3833 0%, #24221f 42%, #151412 100%); box-shadow: inset 0 1px 0 rgba(255, 240, 220, .09), inset 0 -8px 14px rgba(0, 0, 0, .55), 0 16px 36px rgba(0, 0, 0, .7), 0 0 80px -6px var(--spill); } #tv-wall .tv::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: 2.6%; height: 5.4%; background: radial-gradient(circle at 50% 45%, #6a645b 0 30%, #26231f 34% 60%, transparent 64%) right 0 center / 6% 100% no-repeat, radial-gradient(circle at 50% 45%, #6a645b 0 30%, #26231f 34% 60%, transparent 64%) right 8% center / 6% 100% no-repeat, radial-gradient(circle, #ff4a2e 0 32%, transparent 40%) right 17% center / 2.4% 60% no-repeat, repeating-linear-gradient(90deg, rgba(0, 0, 0, .65) 0 2px, transparent 2px 5px) left center / 46% 70% no-repeat; } #tv-wall .tv.tv-a, #tv-wall .tv.tv-d { --glass-r: 24%; --glass-b: 7%; background: linear-gradient(90deg, transparent 77%, rgba(0, 0, 0, .35) 77.4%, transparent 78.4%), repeating-linear-gradient(94deg, rgba(0, 0, 0, .12) 0 3px, transparent 3px 9px), linear-gradient(165deg, #5a3f28 0%, #3c2918 45%, #22170e 100%); } #tv-wall .tv.tv-a::after, #tv-wall .tv.tv-d::after { left: auto; right: 6%; top: 10%; bottom: 10%; width: 13%; height: auto; background: radial-gradient(circle at 50% 50%, #8a8070 0 28%, #2c2620 32% 58%, transparent 62%) center 4% / 100% 22% no-repeat, radial-gradient(circle at 50% 50%, #8a8070 0 28%, #2c2620 32% 58%, transparent 62%) center 30% / 100% 22% no-repeat, radial-gradient(circle, #ff4a2e 0 30%, transparent 38%) center 54% / 40% 8% no-repeat, repeating-linear-gradient(0deg, rgba(0, 0, 0, .6) 0 2px, transparent 2px 5px) center bottom / 80% 34% no-repeat; } #tv-wall .tv-glass { position: absolute; left: 5.5%; top: 6.5%; right: var(--glass-r, 5.5%); bottom: var(--glass-b, 12%); overflow: hidden; border-radius: 13% / 16%; background: #010202; box-shadow: 0 0 0 3px #090807, 0 0 0 5px rgba(255, 255, 255, .035); } #tv-wall .tv-glass canvas { display: block; width: 100%; height: 100%; filter: contrast(1.06) brightness(1.08); } #tv-wall .tv-glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(110% 80% at 28% 12%, rgba(255, 255, 255, .11), transparent 42%), radial-gradient(140% 120% at 50% 50%, transparent 58%, rgba(0, 0, 0, .55) 100%); box-shadow: inset 0 0 28px rgba(0, 0, 0, .85), inset 0 0 4px rgba(0, 0, 0, .9); } #tv-wall .tv-a { left: 0; bottom: 0; width: 47%; --spill: rgba(150, 210, 180, .22); } #tv-wall .tv-b { left: 48.5%; bottom: 0; width: 50%; --spill: rgba(190, 200, 190, .2); } #tv-wall .tv-c { left: 2%; bottom: 53%; width: 33%; --spill: rgba(210, 60, 50, .22); } #tv-wall .tv-d { left: 36%; bottom: 55%; width: 33%; --spill: rgba(220, 120, 90, .22); } #tv-wall .tv-e { left: 70%; bottom: 55%; width: 29%; --spill: rgba(90, 255, 140, .2); } #tv-wall .tv-f { left: 10%; bottom: 89%; width: 26%; --spill: rgba(90, 110, 255, .18); filter: brightness(.8) blur(.4px); } #tv-wall .tv-g { left: 47%; bottom: 89%; width: 21%; transform: rotate(-3.5deg); transform-origin: 50% 100%; filter: brightness(.8) blur(.4px); } /* off home, the wall stays alive behind the frame but steps back */ #title-screen:not([data-page="home"]) #tv-wall .tv-stack { opacity: .3; filter: blur(2px) saturate(.6); transform: translateX(4%) scale(.97); } #title-screen:not([data-page="home"]) #tv-wall::after { background: linear-gradient(90deg, rgba(3, 4, 5, .88), rgba(3, 4, 5, .55) 45%, rgba(3, 4, 5, .35)); } /* -------------------------------------------------------------- header */ .fe-head { position: absolute; z-index: 4; top: 0; left: 0; right: 0; height: calc(var(--fe-head-h) + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) var(--fe-px) 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: linear-gradient(180deg, rgba(3, 4, 5, .82), rgba(3, 4, 5, .35) 70%, transparent); pointer-events: none; } .fe-head::after { content: ""; position: absolute; left: var(--fe-px); right: var(--fe-px); bottom: 0; height: 1px; background: linear-gradient(90deg, var(--hair-hi), var(--hair) 40%, transparent); } .fe-head > * { pointer-events: auto; } .fe-crumb { min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-2); font: 600 var(--fe-t-crumb)/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; } .fe-crumb .fe-sep { color: var(--ember); margin: 0 .55em; } .fe-crumb b { color: var(--ink-0); font-weight: 600; } .fe-tools { display: flex; align-items: center; gap: clamp(8px, .9vw, 16px); flex: 0 0 auto; } .fe-tools > * { flex: 0 0 auto; } /* the player card: Career.card() when the career system is present, the persona's callsign otherwise. */ .fe-card { display: flex; align-items: center; gap: 12px; min-height: 44px; height: calc(var(--fe-head-h) * .62); padding: 0 16px 0 4px; border: 1px solid var(--hair); border-radius: 2px; background: linear-gradient(90deg, rgba(20, 23, 27, .86), rgba(10, 12, 15, .72)); color: var(--ink-0); text-align: left; cursor: pointer; font: inherit; transition: border-color .16s, background .16s; } .fe-card:hover, .fe-card:focus-visible { border-color: var(--hair-hot); background: linear-gradient(90deg, rgba(60, 34, 20, .8), rgba(16, 13, 11, .72)); } .fe-card[disabled] { cursor: default; } .fe-card-emblem { display: grid; place-items: center; flex: 0 0 auto; height: calc(100% - 8px); aspect-ratio: 1; clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); background: linear-gradient(160deg, #4a4036, #1d1915); color: var(--ember-hot); font: 700 calc(var(--fe-t-crumb) * 1.05)/1 var(--font-display); letter-spacing: .04em; } .fe-card-emblem img { width: 100%; height: 100%; object-fit: cover; } .fe-card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .fe-card-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 calc(var(--fe-t-crumb) * 1.25)/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .fe-card-rank { color: var(--ink-2); font: 600 calc(var(--fe-t-crumb) * .8)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; } .fe-card-xp { display: block; height: 2px; margin-top: 2px; background: rgba(240, 232, 214, .12); } .fe-card-xp i { display: block; height: 100%; background: var(--ember); } .fe-card-lvl { margin-left: 6px; padding: 2px 6px; border: 1px solid var(--hair-hot); color: var(--ember-hot); font: 700 calc(var(--fe-t-crumb) * .8)/1 var(--font-mono); letter-spacing: .08em; } #btn-account, .chrome-settings { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hair); border-radius: 2px; background: rgba(8, 10, 12, .6); color: var(--ink-1); font: 600 calc(var(--fe-t-crumb) * .86)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: color .16s, border-color .16s; } .chrome-settings { width: 44px; padding: 0; } .chrome-settings svg { width: 20px; height: 20px; } #btn-account:hover, .chrome-settings:hover, #btn-account:focus-visible, .chrome-settings:focus-visible { color: var(--ink-0); border-color: var(--hair-hot); } /* Sign in belongs to the online pages; the gear is everywhere else. */ #btn-account { position: static; display: none; box-shadow: none; } #title-screen:is([data-page="online"], [data-page="coop"], [data-page="lobby"]) #btn-account { display: inline-flex; } #title-screen:is([data-page="online"], [data-page="coop"], [data-page="lobby"]) .chrome-settings, #btn-account[hidden] { display: none; } .live-presence { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font: 600 calc(var(--fe-t-crumb) * .78)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .live-presence[hidden] { display: none; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); } .live-presence.is-live .live-dot { background: var(--live-dot, #7dcc6e); box-shadow: 0 0 10px rgba(125, 204, 110, .7); } #title-screen:not([data-page="home"]):not([data-page="online"]) .live-presence { display: none; } /* -------------------------------------------------------------- footer */ .fe-foot { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: calc(var(--fe-foot-h) + env(safe-area-inset-bottom, 0px)); padding: 0 var(--fe-px) env(safe-area-inset-bottom, 0px); display: flex; align-items: center; justify-content: space-between; gap: 18px; background: linear-gradient(0deg, rgba(3, 4, 5, .9), rgba(3, 4, 5, .55) 75%, rgba(3, 4, 5, 0)); pointer-events: none; } .fe-foot::before { content: ""; position: absolute; left: var(--fe-px); right: var(--fe-px); top: 0; height: 1px; background: linear-gradient(90deg, var(--hair-hi), var(--hair) 50%, transparent); } .fe-foot > * { pointer-events: auto; } .fe-prompts { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 30px); min-width: 0; overflow: hidden; } .fe-chip { display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto; min-height: 36px; padding: 0; border: 0; background: none; color: var(--ink-1); cursor: pointer; font: 600 var(--fe-t-prompt)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .fe-chip:hover, .fe-chip:focus-visible { color: var(--ink-0); } .fe-chip[data-static] { cursor: default; } .fe-key { display: inline-flex; align-items: center; justify-content: center; min-width: 2em; height: 1.75em; padding: 0 .5em; border: 1px solid var(--hair-hi); border-bottom-width: 2px; border-radius: 3px; background: rgba(240, 232, 214, .07); color: var(--ink-0); font: 700 .78em/1 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } .fe-key.pad { min-width: 1.9em; width: 1.9em; padding: 0; border-radius: 50%; border-bottom-width: 1px; } .fe-key.pad.wide { width: auto; border-radius: .9em; padding: 0 .55em; } .mbtn .fe-key, .pbtn .fe-key { margin-right: .7em; font-size: .7em; } html[data-input="touch"] .fe-key, html[data-input="touch"] .fe-prompts .fe-chip[data-static] { display: none; } /* touch: the prompts that still mean something become real buttons */ html[data-input="touch"] .fe-chip { min-height: 44px; padding: 0 16px; border: 1px solid var(--hair-hi); border-radius: 2px; background: rgba(10, 12, 15, .7); } /* ----------------------------------------------------- the body grid */ #title-screen .mpage, .fe-screen > .panel { position: absolute; z-index: 3; inset: calc(var(--fe-head-h) + env(safe-area-inset-top, 0px)) 0 0 0; display: none; grid-template-columns: var(--fe-col-w) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) calc(var(--fe-foot-h) + env(safe-area-inset-bottom, 0px)); column-gap: var(--fe-gap); padding: 0 var(--fe-px) env(safe-area-inset-bottom, 0px); margin: 0; width: auto; max-width: none; border: 0; border-radius: 0; background: none; box-shadow: none; text-align: left; pointer-events: none; } #title-screen .mpage > *, .fe-screen > .panel > * { pointer-events: auto; } .fe-screen.active > .panel { display: grid; } #title-screen[data-page="home"] .mpage[data-for="home"], #title-screen[data-page="loadout"] .mpage[data-for="loadout"], #title-screen[data-page="treatments"] .mpage[data-for="treatments"], #title-screen[data-page="night"] .mpage[data-for="night"], #title-screen[data-page="site"] .mpage[data-for="site"], #title-screen[data-page="online"] .mpage[data-for="online"], #title-screen[data-page="ready"] .mpage[data-for="ready"], #title-screen[data-page="more"] .mpage[data-for="more"], #title-screen[data-page="career"] .mpage[data-for="career"], #title-screen[data-page="rules"] .mpage[data-for="rules"], #title-screen[data-page="campaign"] .mpage[data-for="campaign"], #title-screen[data-page="coop"] .mpage[data-for="coop"], #title-screen[data-page="lobby"] .mpage[data-for="lobby"], #title-screen[data-page="controls"] .mpage[data-for="controls"], #title-screen[data-page="credits"] .mpage[data-for="credits"], #title-screen[data-page="legal"] .mpage[data-for="legal"] { display: grid; } /* the page that is leaving, for the length of its exit (frontend.js) */ #title-screen .mpage.fe-out { display: grid; z-index: 2; pointer-events: none; animation: fe-out .16s ease-in forwards; } #title-screen .mpage.fe-out * { pointer-events: none !important; } @keyframes fe-out { to { opacity: 0; transform: translateX(-14px); } } .fe-col { grid-area: 1 / 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; padding: var(--fe-top) 4px 16px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(240, 232, 214, .2) transparent; } .fe-detail { grid-area: 1 / 2; position: relative; min-width: 0; min-height: 0; --pane-pad: clamp(18px, 2.2vw, 40px); margin: var(--fe-top) 0 16px; padding: var(--pane-pad); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--hair); border-radius: 2px; background: linear-gradient(180deg, rgba(16, 19, 23, .84), rgba(7, 9, 11, .9)), var(--brackets); box-shadow: var(--rim), var(--lift); color: var(--ink-1); scrollbar-width: thin; scrollbar-color: rgba(240, 232, 214, .2) transparent; } .fe-detail::before { content: ""; position: absolute; left: -1px; top: -1px; width: 72px; height: 2px; background: var(--ember); } /* the pane has material: the station's concrete, nearly black */ .fe-detail:not(.credits-body) { background: var(--brackets), linear-gradient(180deg, rgba(14, 17, 21, .9), rgba(7, 9, 11, .95)), url("../assets/img/concrete_backdrop.webp") center / 640px; } @supports (backdrop-filter: blur(1px)) { html:not(.is-touch) .fe-detail { backdrop-filter: blur(12px) saturate(.8); } } #title-screen .mpage > .action-bar, .fe-screen > .panel > .action-bar, .pause-panel .action-bar { grid-area: 2 / 2; justify-self: end; align-self: center; display: flex; flex-direction: row; align-items: center; gap: 12px; width: auto; margin: 0; padding: 0; } /* entering: the column slides in, the pane follows, the rows step in */ .fe-enter .fe-col, .fe-enter > .fe-col, .fe-enter .pause-kicker, .fe-enter #pause-title { animation: fe-in-l .26s var(--ease-premium) backwards; } .fe-enter .fe-detail, .fe-enter .set-tabs { animation: fe-in-r .32s .04s var(--ease-premium) backwards; } .fe-enter .fe-list.fe-list > * { animation: fe-in-row .24s var(--ease-premium) backwards; } .fe-enter .fe-list.fe-list > :nth-child(2) { animation-delay: .025s; } .fe-enter .fe-list.fe-list > :nth-child(3) { animation-delay: .05s; } .fe-enter .fe-list.fe-list > :nth-child(4) { animation-delay: .075s; } .fe-enter .fe-list.fe-list > :nth-child(n+5) { animation-delay: .1s; } @keyframes fe-in-l { from { opacity: 0; transform: translateX(-22px); } } @keyframes fe-in-r { from { opacity: 0; transform: translateX(18px); } } @keyframes fe-in-row { from { opacity: 0; transform: translateX(-10px); } } /* ------------------------------------------------------- column type */ .ask-kicker, .eyebrow, .fe-d-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 .5em; color: var(--ember); font: 600 var(--fe-t-kick)/1.2 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; } .ask-kicker::before, .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; opacity: .7; } .mpage-title, .fe-screen h2, .fe-band h2 { margin: 0; color: var(--ink-0); text-align: left; transform: none; font: 600 var(--fe-t-title)/.98 var(--font-display); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 4px 24px rgba(0, 0, 0, .6); outline: none; } .mpage-title:focus, .fe-screen h2:focus, .fe-band h2:focus { outline: none; } .mpage-sublabel, .site-strip-note, .ask-empty, .cc-status, .cc-error, #cosmetic-feedback, .ask-fineprint, .home-trial-status, .fr-note, .set-note, .fe-d-note { margin: 12px 0 0; color: var(--ink-2); font: 500 var(--fe-t-note)/1.5 var(--font-ui); } :is(#cosmetic-feedback, #site-strip-note, .cc-status, .cc-error):empty { display: none; } .cc-error { color: var(--fe-bad); } .cc-status.ok, .lobby-note { color: var(--fe-ok); } .cc-status.bad { color: var(--fe-bad); } /* ------------------------------------------------------- option rows */ .fe-list { display: flex; flex-direction: column; gap: 2px; margin: clamp(14px, 2.6vh, 34px) 0 0; padding: 0; list-style: none; } .fe-list.fe-list > *, .fe-list.fe-list > .intel-slot > .intel-card { position: relative; display: flex; align-items: center; justify-content: flex-start; gap: 14px; width: 100%; min-width: 0; max-width: none; min-height: var(--fe-opt-h); margin: 0; padding: 0 clamp(14px, 1.2vw, 24px) 0 clamp(18px, 1.5vw, 28px); border: 0; border-radius: 2px; background: linear-gradient(90deg, rgba(240, 232, 214, .035), rgba(240, 232, 214, 0) 80%); box-shadow: none; filter: none; transform: none; text-shadow: none; color: var(--ink-1); text-align: left; font: 600 var(--fe-t-opt)/1.05 var(--font-display); letter-spacing: .05em; text-transform: uppercase; cursor: pointer; overflow: hidden; transition: background .16s ease, color .16s ease; } .fe-list.fe-list > .intel-slot { display: block; min-height: 0; padding: 0; background: none; overflow: visible; } .fe-list.fe-list > *::before, .fe-list.fe-list > .intel-slot > .intel-card::before { content: ""; position: absolute; left: 0; top: 14%; bottom: 14%; width: 3px; inset-inline-end: auto; background: var(--ember); opacity: 1; border: 0; border-radius: 0; transform: scaleY(0); transition: transform .18s var(--ease-premium); } .fe-list.fe-list > :is(:hover, :focus-visible, .fe-focus), .fe-list.fe-list > .intel-slot > .intel-card:is(:hover, :focus-visible, .fe-focus) { color: var(--ink-0); outline: none; background: linear-gradient(90deg, rgba(240, 138, 76, .3), rgba(240, 138, 76, .1) 55%, rgba(240, 138, 76, 0)); } .fe-list.fe-list > :is(:hover, :focus-visible, .fe-focus)::before, .fe-list.fe-list > .intel-slot > .intel-card:is(:hover, :focus-visible, .fe-focus)::before { transform: scaleY(1); } .fe-list.fe-list > :focus-visible { box-shadow: inset 0 0 0 1px rgba(240, 138, 76, .55); } /* the current value: a lit marker and ember type; the cursor is the plate */ .fe-list.fe-list > :is(.sel, .is-selected, [aria-pressed="true"])::after { content: ""; margin-left: auto; flex: 0 0 auto; width: 9px; height: 9px; transform: rotate(45deg); background: var(--ember); box-shadow: 0 0 12px rgba(240, 138, 76, .7); } .fe-list.fe-list > :is(.sel, .is-selected, [aria-pressed="true"]) { color: var(--ember-hot); } .fe-list.fe-list > :is(.sel, .is-selected, [aria-pressed="true"]):is(:hover, :focus-visible, .fe-focus) { color: var(--ink-0); } .fe-list.fe-list > :disabled, .fe-list.fe-list > [aria-disabled="true"] { color: var(--ink-3); } .fe-list.fe-list > [hidden], .mtile[hidden] { display: none !important; } .fe-list.fe-list > .mbtn.go, .fe-list.fe-list > .pbtn.primary.fe-cta { background: var(--ember-fill); color: var(--ember-ink); } .fe-list.fe-list > .mbtn.go:is(:hover, :focus-visible, .fe-focus) { background: var(--ember-hot); color: var(--ember-ink); } .fe-list.fe-list > .mbtn.go::before { background: var(--ember-ink); } /* names fill the row; everything else is the detail pane's */ .fe-list :is(.mt-name, .dc-name, .p-name, .cosmetic-name, .site-name, .ic-title, h3) { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: inherit; letter-spacing: inherit; color: inherit; } /* still read by a screen reader as part of the row's name, never drawn */ .fe-list :is(.mt-note, .dc-line, .cosmetic-description, .cosmetic-meter, .site-intel, .ic-where, .ic-sum, .cache-card p) { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .fe-list .p-tag { display: none; } .fe-sub, .fe-list :is(.p-role, .cosmetic-progress, .site-file, .ic-no, .ic-kind, .rarity) { flex: 0 0 auto; color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .8)/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; } .fe-list .ic-no { order: -1; min-width: 6.2em; color: var(--ember); } .fe-list .site-file { order: 2; } .fe-list :is(.ic-kind, .site-file, .cosmetic-progress, .rarity) { margin-left: auto; } .fe-list .ic-kind { padding: 4px 7px; border: 1px solid rgba(240, 232, 214, .16); border-radius: 2px; } .fe-list .kind-audio .ic-kind { color: var(--ember-hot); border-color: rgba(240, 138, 76, .4); } .fe-list .locked :is(.ic-title, h3) { color: var(--ink-3); letter-spacing: .14em; } .fe-list .intel-card.locked .ic-kind, .fe-list .cosmetic-progress { display: none; } .fe-list .cosmetic-card.sel .cosmetic-progress { display: inline; } @media (max-width: 1400px) { .fe-list .cache-card .rarity { display: none; } } .fe-list .intel-card.locked { cursor: default; background: repeating-linear-gradient(135deg, rgba(240, 232, 214, .025) 0 8px, transparent 8px 16px); } /* persona rows carry the face; the pane carries the full portrait */ .fe-list .p-shot { position: relative; flex: 0 0 auto; width: calc(var(--fe-opt-h) - 12px); aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: #0b0d0f; } .fe-list .p-portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: saturate(.85); } .fe-list .p-tag { display: none; } .fe-list .p-body { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .fe-list .p-card { min-height: calc(var(--fe-opt-h) * 1.2); padding-left: clamp(10px, .8vw, 16px); } .fe-list .p-card::before { left: 0; } /* treatments: the swatch, then the name, then where it stands */ .cosmetic-swatch { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 0 9px rgba(0, 0, 0, .68); position: relative; } .cosmetic-standard { background: var(--tone-6d7a5e, #6d7a5e); } .cosmetic-cobalt { background: linear-gradient(135deg, #263a42, #5a9bb3); } .cosmetic-signal { background: linear-gradient(135deg, #1a343d, #83efff); box-shadow: 0 0 10px rgba(120, 231, 255, .25); } .cosmetic-afterglow { background: radial-gradient(circle, #e69455 0 18%, #713218 45%, #17110d 75%); } .cosmetic-card.locked .cosmetic-swatch { opacity: .6; } .cosmetic-card.locked .cosmetic-swatch::after { content: ""; position: absolute; inset: 5px; border: 1.5px solid rgba(210, 200, 180, .45); border-radius: 50%; background: linear-gradient(135deg, transparent 44%, rgba(210, 200, 180, .55) 46% 54%, transparent 56%); } .cosmetic-copy { display: flex; align-items: center; gap: 14px; flex: 1 1 auto; min-width: 0; } .fe-list .cosmetic-card.locked { color: var(--ink-2); } /* cache rows: a small plate */ .fe-list .cache-card img { flex: 0 0 auto; width: calc(var(--fe-opt-h) * 1.5); height: auto; aspect-ratio: 2; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .6)); } .fe-list .cache-card.locked img { filter: brightness(.35) contrast(1.2); } .fe-list .cache-card { cursor: default; } .fe-list .cache-card.prototype .rarity { color: #b9a0ff; } /* ------------------------------------------------------- detail pane */ .fe-d-title, .fe-detail h3.fe-d-title { margin: 0 0 .45em; color: var(--ink-0); font: 600 var(--fe-t-dtitle)/1.02 var(--font-display); letter-spacing: .035em; text-transform: uppercase; } .fe-d-body, .fe-detail p.fr-lead { margin: 0 0 .8em; max-width: 62ch; color: var(--ink-1); font: 400 var(--fe-t-body)/1.6 var(--font-ui); text-wrap: pretty; } .fe-d-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: .4em 0 1em; color: var(--ember-hot); font: 600 calc(var(--fe-t-note) * .9)/1.3 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } .fe-d-meta:empty, .fe-d-meta span:empty { display: none; } /* ONE COMPOSITION for every pane: kicker, title, art band, body, data rows, note. The pane is a column and the focused option's mirror melts into it (display: contents), so a mirrored title lands where a static one would. */ .fe-detail:not(.credits-body):not(.soldier-detail):not(.go-summary) { display: flex; flex-direction: column; } .fe-detail > *, .fe-mirror > * { order: 5; } .fe-detail > .fe-d-kicker { order: 1; } .fe-detail > .fe-d-title { order: 2; } .fe-detail > :is(.fe-art, .fe-plate) { order: 3; } .fe-detail > :is(.fe-d-body, .ready-recap, .fr-lead) { order: 4; } .fe-detail > :is(.fe-d-meta, .fe-stats, .fe-rows, .fe-brief, .fe-loadout, .fr-wedge, .pause-run-stats, .pause-route, #pause-squad) { order: 6; } .fe-detail > :is(.fe-d-note, .fr-note, .ask-fineprint, .home-trial-status, .home-subscribe, #cosmetic-feedback, #predeploy-accessibility) { order: 7; } .fe-detail.has-mirror > :is(.fe-d-title, .fe-d-body):not([data-keep]), .fe-detail.has-mirror.has-kicker > .fe-d-kicker { display: none; } .fe-mirror { display: contents; } .fe-mirror > * { animation: fe-in-r .2s var(--ease-premium) backwards; } .fe-stats { order: 6; display: grid; gap: 12px; max-width: 560px; margin: .4em 0 1em; } .fe-stats > div { display: grid; grid-template-columns: minmax(8em, 12em) minmax(0, 1fr) 3.4em; align-items: center; gap: 16px; } .fe-stats dt { color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .82)/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .fe-stats dd { margin: 0; color: var(--ink-0); text-align: right; font: 600 var(--fe-t-note)/1 var(--font-mono); } .fe-stat-bar { position: relative; height: 6px; background: rgba(240, 232, 214, .1); } .fe-stat-bar::after { content: ""; position: absolute; left: 62.5%; top: -3px; bottom: -3px; width: 1px; background: var(--hair-hi); } .fe-stat-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--ember-fill), var(--ember-hot)); } /* the art band: the station, rendered by the game (render_menu_art.py) */ .fe-art, .fe-plate { position: relative; flex: 0 0 auto; display: block; margin: .3em calc(-1 * var(--pane-pad)) 1.1em; aspect-ratio: 16 / 7; max-height: 31vh; overflow: hidden; background: #050607; border-block: 1px solid var(--hair); } .fe-art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.86) contrast(1.04); } .fe-art::after, .fe-plate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(5, 6, 8, .1), transparent 40%, rgba(5, 6, 8, .78)), repeating-linear-gradient(180deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); } .fe-art figcaption, .fe-plate-label { position: absolute; z-index: 1; left: var(--pane-pad); right: var(--pane-pad); bottom: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--ink-1); font: 600 calc(var(--fe-t-note) * .74)/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; } .fe-art figcaption::before { content: "\25CF REC "; color: var(--fe-bad); } .fr-detail .fe-art img { filter: brightness(var(--fr-exposure, 1)) saturate(.86); } .ready-detail .fe-art, .fr-detail .fe-art { max-height: 25vh; } /* an illustration for rows that have no place to photograph */ .fe-plate { background: radial-gradient(60% 120% at 22% 50%, rgba(240, 138, 76, .18), transparent 70%), repeating-linear-gradient(135deg, rgba(240, 232, 214, .035) 0 2px, transparent 2px 14px), linear-gradient(180deg, #121519, #08090b); } .fe-plate::before { content: ""; position: absolute; z-index: 1; left: var(--pane-pad); top: 50%; width: min(30%, 140px); aspect-ratio: 1; transform: translateY(-58%); background: var(--ember); -webkit-mask: var(--fe-icon) center / contain no-repeat; mask: var(--fe-icon) center / contain no-repeat; filter: drop-shadow(0 0 18px rgba(240, 138, 76, .5)); } .fe-plate-label { left: calc(var(--pane-pad) + min(30%, 140px) + 24px); bottom: auto; top: 50%; transform: translateY(-50%); color: var(--ink-0); font: 600 calc(var(--fe-t-dtitle) * .7)/1.1 var(--font-display); letter-spacing: .06em; white-space: normal; } /* data rows: label | value, one per line */ .fe-rows { display: grid; gap: 0; margin: .4em 0 1em; max-width: 720px; } .fe-rows > div { display: grid; grid-template-columns: minmax(7.5em, 13em) minmax(0, 1fr); align-items: baseline; gap: 4px 18px; padding: .62em 0; border-top: 1px solid var(--hair); } .fe-rows > div:last-child { border-bottom: 1px solid var(--hair); } .fe-rows dt { color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .8)/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; } .fe-rows dd { margin: 0; color: var(--ink-0); font: 500 var(--fe-t-note)/1.4 var(--font-ui); overflow-wrap: anywhere; } .fe-rows dd.ok { color: var(--fe-ok); } .fe-rows dd.bad { color: var(--fe-bad); } .fe-rows dd.hot { color: var(--ember-hot); } .fe-rows:empty, .fe-brief:empty, .fe-loadout:empty { display: none; } .fe-sec { display: flex; align-items: center; gap: 12px; margin: .8em 0 .5em; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; } .fe-sec::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hair); } /* the mission briefing: the objective chain, one line each */ .fe-chain { margin: 0 0 .6em; padding: 0; list-style: none; max-width: 720px; } .fe-chain li { display: grid; grid-template-columns: 2.6em minmax(0, 1fr) auto; align-items: baseline; gap: 12px; padding: .42em 0; color: var(--ink-0); font: 500 var(--fe-t-note)/1.3 var(--font-ui); } .fe-chain li b { color: var(--ember); font: 600 .86em/1 var(--font-mono); letter-spacing: .08em; } .fe-chain li span { color: var(--ink-2); font: 600 .78em/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } .fe-chain li.done { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(240, 232, 214, .3); } .fe-brief[data-short] .fe-chain li:nth-child(n+4) { display: none; } /* the loadout on Ready */ .fe-loadout { display: grid; grid-template-columns: clamp(84px, 8vw, 140px) minmax(0, 1fr); gap: 4px 20px; align-items: start; margin: .2em 0 .6em; } .fe-lo-shot { grid-row: 1 / 3; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 20%; border: 1px solid var(--hair); background: #0a0c0e; } .fe-lo-id { display: flex; flex-direction: column; gap: 4px; } .fe-lo-id b { color: var(--ink-0); font: 600 calc(var(--fe-t-opt) * .9)/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; } .fe-lo-id span { color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .8)/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .fe-loadout .fe-rows { margin: 4px 0 0; } /* icons: drawn here, one mask each, used by rows and plates */ [data-icon="gear"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='3.4' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Ccircle cx='12' cy='12' r='7.6' fill='none' stroke='%23000' stroke-width='3.4' stroke-dasharray='2.9 2.4'/%3E%3C/svg%3E"); } [data-icon="soldier"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 14.5a8 8 0 0 1 16 0z'/%3E%3Cpath d='M2 15.5h20v2H2z'/%3E%3Cpath d='M7 19h10l-1 2.5H8z'/%3E%3C/svg%3E"); } [data-icon="swatch"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='8' cy='9' r='5'/%3E%3Ccircle cx='16' cy='9' r='5' fill-opacity='.6'/%3E%3Ccircle cx='12' cy='16' r='5' fill-opacity='.35'/%3E%3C/svg%3E"); } [data-icon="file"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h7l2 2.5h11V20H2z'/%3E%3C/svg%3E"); } [data-icon="pad"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M6 7h12a5 5 0 0 1 5 5v2.5a3 3 0 0 1-5.4 1.8L16 14H8l-1.6 2.3A3 3 0 0 1 1 14.5V12a5 5 0 0 1 5-5zm1 3v1.5H5.5v1.5H7v1.5h1.5V13H10v-1.5H8.5V10zm9 .2a1 1 0 1 0 0 2 1 1 0 0 0 0-2zm2.5 2.3a1 1 0 1 0 0 2 1 1 0 0 0 0-2z'/%3E%3C/svg%3E"); } [data-icon="film"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M3 4h18v16H3zm2 2v2h2V6zm0 5v2h2v-2zm0 5v2h2v-2zm12-10v2h2V6zm0 5v2h2v-2zm0 5v2h2v-2zM9 8v8l6-4z'/%3E%3C/svg%3E"); } [data-icon="skull"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 2.5A9.5 9.5 0 1 0 21.5 19 7.6 7.6 0 0 1 15.5 2.5z'/%3E%3C/svg%3E"); } [data-icon="list"] { --fe-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5h3v3H3zm5 .5h13v2H8zM3 10.5h3v3H3zm5 .5h13v2H8zM3 16h3v3H3zm5 .5h13v2H8z'/%3E%3C/svg%3E"); } .fe-list.fe-list > [data-icon] .mt-name::before { content: ""; display: inline-block; width: 1em; height: 1em; margin-right: .62em; vertical-align: -.12em; background: currentColor; opacity: .85; -webkit-mask: var(--fe-icon) center / contain no-repeat; mask: var(--fe-icon) center / contain no-repeat; } /* the focused thing's name, stencilled large into the pane */ .fe-detail[data-mark]::after { content: attr(data-mark); position: absolute; left: 0; right: 0; bottom: 0; height: 1em; overflow: hidden; padding-right: .06em; text-align: right; white-space: nowrap; pointer-events: none; color: rgba(240, 232, 214, .028); -webkit-text-stroke: 1px rgba(240, 232, 214, .07); font: 700 clamp(64px, 3.6vw + 4.2vh, 190px)/1 var(--font-display); letter-spacing: .02em; text-transform: uppercase; } .fe-mirror > * { display: block; } .fe-mirror :is(.mt-name, .dc-name, .p-name, .cosmetic-name, .site-name, .ic-title, h3) { order: 2 !important; margin: 0 0 .45em; color: var(--ink-0); font: 600 var(--fe-t-dtitle)/1.02 var(--font-display); letter-spacing: .035em; text-transform: uppercase; } .fe-mirror :is(.site-file, .ic-no, .ic-kind, .p-role, .rarity) { order: 1 !important; margin: 0 0 .7em; color: var(--ember); font: 600 var(--fe-t-kick)/1.2 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; border: 0; padding: 0; } .fe-mirror .ic-kind { order: 2 !important; margin-top: -.3em; color: var(--ink-2); } .fe-mirror :is(.mt-note, .dc-line, .site-intel, .cosmetic-description, .ic-sum, p) { order: 4 !important; margin: 0 0 .8em; max-width: 62ch; color: var(--ink-1); font: 400 var(--fe-t-body)/1.6 var(--font-ui); letter-spacing: 0; text-transform: none; } .fe-mirror .fe-mirror-more { order: 4 !important; color: var(--ink-1); } .fe-mirror :is(.fe-stats, .fe-rows) { order: 6 !important; } /* the mirror's blanket display:block above flattened the stat bars' grid (no 12px between rows) */ .fe-mirror .fe-stats { display: grid; } .fe-mirror :is(.ic-where, .cosmetic-progress) { order: 6 !important; margin: .2em 0 .6em; color: var(--ink-2); font: 600 var(--fe-t-note)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } .fe-mirror .cosmetic-meter { order: 6 !important; display: block; height: 4px; max-width: 360px; background: rgba(240, 232, 214, .12); } .fe-mirror .cosmetic-meter i { display: block; height: 100%; background: var(--ember); } .fe-mirror .cosmetic-swatch { order: 3 !important; width: 96px; height: 96px; margin: .4em 0 1.2em; box-shadow: inset 0 0 18px rgba(0, 0, 0, .6), 0 0 40px rgba(240, 138, 76, .12); } .fe-mirror .cosmetic-copy { display: contents; } .fe-mirror img { order: 3 !important; width: 100%; max-width: 560px; height: auto; margin: .4em 0 18px; filter: drop-shadow(0 10px 20px rgba(0, 0, 0, .6)); } .fe-mirror .p-shot, .fe-mirror .p-tag, .fe-mirror .p-body { display: contents; } .fe-mirror .p-portrait { display: none; } /* ---------------------------------------------------- page actions */ .action-bar .mbtn, .action-bar .pbtn, .fe-detail .mbtn, .home-subscribe, .lobby-code-block .mbtn, #ctl-controls .mbtn { display: inline-flex; align-items: center; justify-content: center; min-width: 0; width: auto; max-width: none; min-height: 44px; height: max(44px, calc(var(--fe-foot-h) * .66)); padding: 0 clamp(16px, 1.4vw, 28px); border: 1px solid var(--hair-hi); border-radius: 2px; background: rgba(8, 10, 12, .62); box-shadow: none; filter: none; transform: none; color: var(--ink-0); font: 600 calc(var(--fe-t-prompt) * 1.15)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; transition: background .16s, border-color .16s, color .16s; } .action-bar :is(.mbtn, .pbtn)::before, .fe-detail .mbtn::before { content: none; } .action-bar :is(.mbtn, .pbtn):is(:hover, :focus-visible), .fe-detail .mbtn:is(:hover, :focus-visible) { border-color: var(--hair-hot); background: rgba(60, 32, 18, .7); } .action-bar .mbtn.go, .action-bar #btn-deploy, .home-subscribe { border-color: var(--ember-fill); background: var(--ember-fill); color: var(--ember-ink); box-shadow: 0 0 28px rgba(229, 127, 67, .28); } .action-bar .mbtn.go:is(:hover, :focus-visible), .action-bar #btn-deploy:is(:hover, :focus-visible) { filter: brightness(1.14); box-shadow: 0 0 34px rgba(255, 174, 120, .45); } .action-bar .mbtn.go::after { content: "\203A"; margin-left: .6em; font-size: 1.3em; line-height: .7; } .action-bar .mbtn:disabled, .action-bar .mbtn.go:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .action-bar [hidden] { display: none !important; } /* ================================================================ HOME */ #title-screen .mpage[data-for="home"] { grid-template-columns: minmax(0, 1fr); align-items: center; } #title-screen .mpage[data-for="home"] > .crt-set { grid-area: 1 / 1; align-self: center; justify-self: start; } .crt-set { position: relative; box-sizing: border-box; width: clamp(360px, 40vw, 720px); max-height: 100%; padding: clamp(12px, 1.8vw, 28px) clamp(12px, 1.8vw, 28px) clamp(32px, 4.2vw, 60px); border-radius: 22px; background: radial-gradient(120% 60% at 50% 0%, rgba(255, 240, 220, .06), transparent 60%), linear-gradient(170deg, #34322e 0%, #1f1d1b 46%, #111010 100%); box-shadow: inset 0 1px 0 rgba(255, 244, 228, .12), inset 0 -10px 22px rgba(0, 0, 0, .6), 0 40px 90px rgba(0, 0, 0, .75), 0 0 140px -30px rgba(240, 138, 76, .45); } .crt-screen { position: relative; display: flex; flex-direction: column; padding: clamp(18px, 2.6vw, 44px) clamp(18px, 2.6vw, 44px) clamp(14px, 2vw, 30px); overflow: hidden; border-radius: 26px / 30px; background: radial-gradient(90% 80% at 46% 40%, #1d2522 0%, #0e1412 58%, #050807 100%); box-shadow: 0 0 0 4px #0a0908, 0 0 0 6px rgba(255, 255, 255, .04); } .crt-screen::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .26) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; } .crt-screen::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; background: radial-gradient(90% 60% at 24% 6%, rgba(255, 255, 255, .08), transparent 46%), radial-gradient(130% 110% at 50% 50%, transparent 60%, rgba(0, 0, 0, .6) 100%); box-shadow: inset 0 0 60px rgba(0, 0, 0, .8), inset 0 0 8px rgba(0, 0, 0, .9); animation: crtFlicker 5s steps(1) infinite; } @keyframes crtFlicker { 0%, 100% { opacity: 1; } 41% { opacity: .9; } 42% { opacity: 1; } 77% { opacity: .94; } 78% { opacity: 1; } } /* first arrival: the set powers on, then the menu types in */ #title-screen.fe-boot[data-page="home"] .crt-screen { animation: crtOn .7s cubic-bezier(.2, .8, .2, 1) backwards; } #title-screen.fe-boot[data-page="home"] .home-list > * { animation: fe-in-row .3s var(--ease-premium) backwards; } #title-screen.fe-boot[data-page="home"] .home-list > :nth-child(1) { animation-delay: .42s; } #title-screen.fe-boot[data-page="home"] .home-list > :nth-child(2) { animation-delay: .48s; } #title-screen.fe-boot[data-page="home"] .home-list > :nth-child(3) { animation-delay: .54s; } #title-screen.fe-boot[data-page="home"] .home-list > :nth-child(4) { animation-delay: .6s; } #title-screen.fe-boot[data-page="home"] .home-list > :nth-child(5) { animation-delay: .66s; } #title-screen.fe-boot :is(.fe-head, .fe-foot) { animation: fe-fade .5s .3s ease-out backwards; } @keyframes fe-fade { from { opacity: 0; } } @keyframes crtOn { 0% { transform: scale(1, .006); filter: brightness(4); opacity: .2; } 45% { transform: scale(1, 1.02); filter: brightness(1.6); opacity: 1; } 100% { transform: none; filter: none; } } .crt-badge { position: absolute; left: 7%; right: 7%; bottom: clamp(10px, 1.4vw, 20px); height: clamp(14px, 2vw, 24px); display: flex; align-items: center; justify-content: flex-end; gap: 12px; } .crt-badge::before { content: "ALTSTEAD \00B7 FR-07 SURVEILLANCE MONITOR"; margin-right: auto; flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: rgba(230, 220, 200, .34); font: 600 9px/1 var(--font-mono); letter-spacing: .28em; } .crt-badge i { width: clamp(12px, 1.6vw, 20px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8b8478, #3a3530 55%, #1a1816); box-shadow: 0 2px 4px rgba(0, 0, 0, .7); } .crt-badge b { width: 7px; height: 7px; border-radius: 50%; background: #ff7a3c; box-shadow: 0 0 8px #ff7a3c, 0 0 16px rgba(255, 122, 60, .6); } .game-title { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .14em; margin: 0 0 clamp(10px, 2.2vh, 28px); font-family: var(--font-display); } .gt-file { color: #ffb784; font: 600 calc(var(--fe-t-kick) * .9)/1.2 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; text-shadow: 0 0 10px rgba(255, 150, 80, .5); } .gt-main { display: block; color: #f4e6c8; font: 700 calc(clamp(40px, 2.6vw + 2.8vh, 92px) * var(--fe-s))/.9 var(--font-display); letter-spacing: .01em; text-transform: uppercase; text-shadow: 1px 0 rgba(255, 70, 40, .32), -1px 0 rgba(70, 200, 255, .22), 0 0 14px rgba(255, 170, 100, .38); } .gt-rot { color: var(--ember); text-shadow: 0 0 22px rgba(240, 138, 76, .55); } #ask-play { position: relative; z-index: 2; display: flex; flex-direction: column; min-height: 0; } #ask-play .ask-kicker { margin: 0 0 6px; color: rgba(255, 183, 132, .75); } /* the menu on the glass: the frame's rows in phosphor */ .home-list.fe-list { margin: 0; gap: 3px; } .home-list.fe-list.fe-list > .mtile { min-height: max(44px, calc(var(--fe-t-opt) * 1.9)); color: #f4e6c8; text-shadow: 0 0 12px rgba(255, 170, 100, .3); background: none; } .home-list.fe-list.fe-list > .mtile:is(:hover, :focus-visible, .fe-focus) { color: var(--ember-ink); text-shadow: none; background: var(--ember-fill); box-shadow: 0 0 26px rgba(229, 127, 67, .38); } .home-list.fe-list.fe-list > .mtile::before { top: 50%; bottom: auto; left: 10px; width: 0; height: 0; border: 6px solid transparent; border-left: 8px solid currentColor; background: none; transform: translateY(-50%) scale(0); } .home-list.fe-list.fe-list > .mtile:is(:hover, :focus-visible, .fe-focus)::before { transform: translateY(-50%) scale(1); } .fe-strip { margin: clamp(10px, 1.6vh, 18px) 0 0; padding: clamp(8px, 1.2vh, 14px) 0 0 18px; min-height: 2.6em; border-top: 1px dashed rgba(244, 230, 200, .2); color: rgba(244, 230, 200, .62); font: 500 var(--fe-t-note)/1.35 var(--font-mono); letter-spacing: .05em; text-shadow: 0 0 8px rgba(255, 190, 130, .2); } /* the home footer: records, the small print, the studio */ .home-chrome-footer { display: none; align-items: center; gap: clamp(12px, 1.6vw, 28px); min-width: 0; color: var(--ink-2); font: 600 calc(var(--fe-t-prompt) * .82)/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } #title-screen[data-page="home"] .home-chrome-footer { display: flex; } .corner-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .corner-stat[hidden] { display: none; } .best-line b { color: var(--ink-0); } .cs-dot { color: var(--ink-3); font-style: normal; } .text-link { padding: 0 6px; border: 0; background: none; color: var(--ink-1); font: inherit; letter-spacing: inherit; text-transform: inherit; text-decoration: none; cursor: pointer; } #title-screen .home-footer-links .text-link { min-height: 44px; display: inline-flex; align-items: center; } .text-link:hover, .text-link:focus-visible { color: var(--ink-0); } .text-link.has-news::after { content: "New"; margin-left: .5em; padding: 1px 5px 0; background: var(--ember); color: #160b05; font-size: .78em; letter-spacing: .14em; vertical-align: 1px; } #build-tag { margin-left: 6px; padding: 3px 6px; border: 1px solid var(--hair); color: var(--ink-1); } #build-tag:empty { display: none; } /* ============================================================ PAGES */ /* Soldier */ .soldier-detail { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: clamp(16px, 2vw, 36px); align-items: start; } .sd-shot { position: relative; aspect-ratio: 3 / 4; overflow: hidden; border: 1px solid var(--hair); background: #0a0c0e; } .sd-portrait { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; } .sd-portrait:not([src]) { visibility: hidden; } .sd-copy { display: flex; flex-direction: column; } .sd-blurb { margin: 0 0 .9em; color: var(--ink-1); font: 400 var(--fe-t-body)/1.6 var(--font-ui); } .sd-perk { margin: 0; padding: 10px 14px; border-left: 2px solid var(--ember); background: rgba(240, 138, 76, .08); color: var(--ink-0); font: 500 var(--fe-t-note)/1.45 var(--font-ui); } .sd-perk[hidden] { display: none; } #callsign-row { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--hair); flex-wrap: wrap; } .cs-label { color: var(--ink-2); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; } #callsign { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-0); font: 600 calc(var(--fe-t-opt) * .9)/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; } #callsign-reroll { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--hair-hi); border-radius: 2px; background: rgba(8, 10, 12, .6); color: var(--ink-1); font: 600 calc(var(--fe-t-prompt) * .9)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; } #callsign-reroll:hover, #callsign-reroll:focus-visible { color: var(--ink-0); border-color: var(--hair-hot); } .rr-glyph { color: var(--ember); font-size: 1.3em; } /* Settings & extras: quick accessibility under the description */ #predeploy-accessibility { margin: 22px 0 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--hair); min-width: 0; } #predeploy-accessibility legend { padding: 0; margin-bottom: 10px; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; float: left; width: 100%; } .a11y-stack { clear: both; display: flex; flex-direction: column; gap: 6px; } .a11y-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 48px; color: var(--ink-1); font: 500 var(--fe-t-note)/1.4 var(--font-ui); } .a11y-row .zr-check__box { margin: 0; } .a11y-row__label { color: var(--ink-1); } .zr-select__native, select.zr-select__native { min-height: 44px; border-color: var(--hair-hi); border-radius: 2px; background: rgba(4, 5, 6, .75); color: var(--ink-0); } /* Career */ .career-slot { display: flex; flex-direction: column; min-height: 0; } .career-record { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px; margin-top: clamp(14px, 2.6vh, 34px); } .career-stat { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: linear-gradient(90deg, rgba(240, 232, 214, .045), rgba(240, 232, 214, .015)); border-left: 2px solid var(--hair-hi); } .career-stat span { color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .82)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; } .career-stat b { color: var(--ink-0); font: 600 calc(var(--fe-t-opt) * 1.15)/1 var(--font-display); letter-spacing: .03em; } .career-badge { display: flex; align-items: center; gap: 20px; margin-bottom: 18px; } .career-badge .fe-card-emblem { width: clamp(64px, 6vw, 112px); height: auto; font-size: clamp(22px, 2vw, 40px); } /* Join: one field */ .fe-field { display: flex; flex-direction: column; gap: 10px; margin-top: clamp(14px, 2.6vh, 34px); } .fe-field-label { color: var(--ink-2); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; } .cc-input { width: 100%; min-height: max(56px, calc(var(--fe-opt-h) * 1.15)); padding: 0 18px; border: 1px solid var(--hair-hi); border-radius: 2px; background: rgba(4, 5, 6, .75); color: var(--ink-0); font: 600 calc(var(--fe-t-opt) * 1.1)/1 var(--font-mono); letter-spacing: .3em; text-transform: uppercase; text-align: center; user-select: text; -webkit-user-select: text; } .cc-input:focus { outline: 2px solid var(--ember); outline-offset: 2px; border-color: var(--ember); } .cc-input[aria-invalid="true"] { border-color: var(--fe-bad); } .cc-check { display: flex; align-items: center; gap: 12px; min-height: 48px; margin-top: 14px; color: var(--ink-1); font: 500 var(--fe-t-note)/1.4 var(--font-ui); cursor: pointer; } .cc-check input { width: 22px; height: 22px; accent-color: var(--ember); } /* Lobby: the squad in the column, the room in the pane */ #title-screen .mpage[data-for="lobby"] .lobby-roster { margin-top: clamp(14px, 2.6vh, 34px); } .lobby-detail .lobby-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } .lobby-detail .lobby-code-block, .lobby-detail .lobby-facts { border: 0; border-radius: 0; background: none; padding: 0; } .lobby-sub { margin: 22px 0 10px; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; } /* Online pricing lines sit under the description */ .ask-fineprint { color: var(--ink-2); } .home-trial-status[hidden], .home-subscribe[hidden] { display: none; } .home-subscribe { margin-top: 14px; } /* Ready: the recap is the pane's body */ .ready-recap { color: var(--ember-hot); font: 600 calc(var(--fe-t-body) * 1.05)/1.4 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; } /* Site cards are rows; locked and stub sites never show here */ #site-strip .site-card.is-locked, #site-strip .site-card.is-stub, #lobby-site .site-card.is-locked, #lobby-site .site-card.is-stub { display: none; } #lobby-site { display: flex; flex-direction: column; gap: 2px; } #lobby-site .site-card { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 16px; border: 1px solid var(--hair); border-radius: 2px; background: rgba(240, 232, 214, .03); color: var(--ink-1); text-align: left; cursor: pointer; } #lobby-site .site-card.is-selected { border-color: var(--hair-hot); color: var(--ink-0); box-shadow: inset 3px 0 var(--ember); } #lobby-site .site-name { font: 600 calc(var(--fe-t-opt) * .8)/1 var(--font-display); letter-spacing: .05em; text-transform: uppercase; } #lobby-site .site-file { color: var(--ember); font: 600 calc(var(--fe-t-note) * .78)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; } #lobby-site .site-intel { display: none; } /* Controls: the bindings are the list, wider than an option column */ #title-screen .mpage.controls-page { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); } #controls-slot { margin-top: clamp(12px, 2vh, 26px); min-height: 0; } #controls-kit .ctl-tabs { justify-content: flex-start; gap: 4px; background: rgba(6, 8, 10, .96); border-bottom: 1px solid var(--hair); } #controls-kit .ctl-tab { min-width: 44px; padding: 0 clamp(12px, 1.2vw, 22px); border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: none; color: var(--ink-2); font: 600 calc(var(--fe-t-opt) * .62)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; cursor: pointer; } #controls-kit .ctl-tab:hover, #controls-kit .ctl-tab:focus-visible { color: var(--ink-0); } #controls-kit .ctl-tab.sel { color: var(--ink-0); border-bottom-color: var(--ember); } /* Credits and Legal: contents on the left, the document in the pane */ .legal-toc { margin-top: clamp(14px, 2.6vh, 34px); } .legal-toc h3 { margin: 0 0 10px; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; } .legal-toc ol { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; } .legal-toc li { counter-increment: toc; } .legal-toc a { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px 6px 14px; border-radius: 2px; color: var(--ink-1); text-decoration: none; font: 500 var(--fe-t-note)/1.3 var(--font-ui); overflow-wrap: anywhere; } .legal-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--ember); font: 600 .82em/1 var(--font-mono); letter-spacing: .1em; } .legal-toc a:hover, .legal-toc a:focus-visible { color: var(--ink-0); background: linear-gradient(90deg, rgba(240, 138, 76, .22), rgba(240, 138, 76, 0)); box-shadow: inset 3px 0 var(--ember); } .legal-toc a:focus-visible { outline: 2px solid var(--ember); outline-offset: -2px; } .credits-body { overflow-x: hidden; overflow-wrap: anywhere; scroll-behavior: smooth; color: var(--ink-1); font: 400 var(--fe-t-body)/1.65 var(--font-ui); } .credits-body > * { max-width: 72ch; } .credits-body h3 { margin: 1.6em 0 .6em; color: var(--ink-0); font: 600 calc(var(--fe-t-dtitle) * .72)/1.15 var(--font-display); letter-spacing: .04em; text-transform: uppercase; scroll-margin-top: 16px; } .credits-body h4 { margin: 1.3em 0 .4em; color: var(--ember-hot); font: 600 calc(var(--fe-t-note) * .92)/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; scroll-margin-top: 16px; } .credits-body p { margin: 0 0 .9em; } .credits-body .legal-lead { padding: 14px 18px; border-left: 2px solid var(--ember); background: rgba(240, 138, 76, .07); color: var(--ink-0); } .credits-body a { color: var(--ember-hot); text-decoration-color: rgba(255, 174, 120, .4); text-underline-offset: 3px; } .credits-body a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 2px; } .credits-body code { font: 500 .9em var(--font-mono); color: var(--ink-0); } .credits-body .cr-note { color: var(--ink-2); } .back-to-toc { display: inline-flex; min-height: 44px; align-items: center; } .mpage[data-doc] .credits-back .mbtn { min-width: 0; } /* ================================================= THE OTHER SCREENS */ /* every framed overlay is dark enough to read on its own, and lets the world (or the wall) show through */ .fe-screen:not(#title-screen) { background: linear-gradient(90deg, rgba(3, 4, 6, .9), rgba(3, 4, 6, .74) 50%, rgba(3, 4, 6, .62)); } #pause-screen.fe-screen { background: linear-gradient(90deg, rgba(3, 4, 6, .84), rgba(3, 4, 6, .58) 55%, rgba(3, 4, 6, .42)); } /* the pause screen carries the run's numbers; the field HUD steps out */ body.pause-open #hud { opacity: 0; transition: opacity .18s ease; } @supports (backdrop-filter: blur(1px)) { html:not(.is-touch) #pause-screen.fe-screen { backdrop-filter: blur(7px) saturate(.6) brightness(.85); } } /* the run shows through the pause's own pane */ #pause-screen:not([data-from-title="1"]) .pause-detail { background: var(--brackets), linear-gradient(180deg, rgba(12, 14, 17, .66), rgba(6, 8, 10, .78)); } /* Opened over the menus, not the world: at 95-98% the title page's own text (the Ready page's loadout, its menu) read through as ghost lettering. */ .fe-screen:is(#intel-screen, #cache-index-screen, #quickmatch, #firstrun), #pause-screen.fe-screen[data-from-title="1"] { background: linear-gradient(90deg, rgb(4, 5, 7), rgb(5, 6, 8)); } #firstrun { z-index: 80; } #quickmatch { z-index: 82; } #cache-index-screen { z-index: 92; } #intel-screen { z-index: 92; } #confirm-screen { z-index: 98; } #gameover-screen { background: radial-gradient(120% 90% at 70% 40%, rgba(40, 8, 6, .55), rgba(3, 4, 6, .94) 70%); } #gameover-screen[data-outcome="win"] { background: radial-gradient(120% 90% at 70% 40%, rgba(16, 34, 26, .55), rgba(3, 4, 6, .94) 70%); } /* ------------------------------------------------------------ PAUSE */ .pause-panel { grid-template-rows: auto auto auto minmax(0, 1fr) calc(var(--fe-foot-h) + env(safe-area-inset-bottom, 0px)) !important; padding-top: var(--fe-top) !important; } .pause-panel > .pause-kicker { grid-area: 1 / 1; margin-left: 4px; } .pause-panel > #pause-title { grid-area: 2 / 1; margin-left: 4px; } .pause-main, .pause-objectives, .pause-settings { display: none; } #pause-screen[data-view="main"] .pause-main, #pause-screen[data-view="objectives"] .pause-objectives, #pause-screen[data-view="settings"] .pause-settings { display: contents; } .pause-panel .fe-col { grid-area: 4 / 1; padding-top: 0; } .pause-panel .fe-detail { grid-area: 1 / 2 / 5 / 3; margin-top: 0; } .pause-panel .action-bar { grid-area: 5 / 2; } .pause-detail .pause-run-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 18px 0 0; } .pause-run-stats span { display: flex; flex-direction: column-reverse; gap: 6px; padding: 12px 14px; background: rgba(240, 232, 214, .035); color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .78)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; } .pause-run-stats b { color: var(--ink-0); font: 600 calc(var(--fe-t-opt) * .95)/1 var(--font-display); letter-spacing: .03em; font-variant-numeric: tabular-nums; } .pause-squad { margin-top: 18px; } .pause-squad[hidden] { display: none; } .pause-squad-head { display: flex; justify-content: space-between; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; } #pause-connection.good { color: var(--fe-ok); } #pause-connection.bad { color: var(--fe-bad); } #pause-roster { margin: 10px 0 0; padding: 0; list-style: none; } #pause-roster li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--hair); color: var(--ink-0); font: 500 var(--fe-t-note)/1.3 var(--font-ui); } #pause-roster li.down { color: var(--fe-bad); } #pause-roster li span { color: var(--ink-2); font-family: var(--font-mono); letter-spacing: .12em; } .fe-list.fe-list > .pbtn.primary { color: var(--ink-0); } /* objectives */ .ledger-order { padding: 16px 18px; border-left: 3px solid var(--ember); background: rgba(240, 138, 76, .07); } .ledger-kicker { color: var(--ember); font: 600 var(--fe-t-kick)/1.2 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; } .ledger-title { margin-top: 6px; color: var(--ink-0); font: 600 var(--fe-t-dtitle)/1.05 var(--font-display); letter-spacing: .03em; text-transform: uppercase; } .ledger-detail { margin-top: 6px; color: var(--ink-1); font: 400 var(--fe-t-body)/1.5 var(--font-ui); } .ledger-meta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 8px; color: var(--ember-hot); font: 600 calc(var(--fe-t-note) * .86)/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .pause-sub { margin: 22px 0 10px; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; } .pause-detail .pause-sub:first-child, .objectives-detail > .pause-minimap-wrap .pause-sub { margin-top: 0; } .pause-ledger .ledger-row { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; color: var(--ink-1); font: 600 calc(var(--fe-t-note) * .9)/1.35 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; } .pause-ledger > b { display: block; margin: 4px 0 8px; color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .78)/1 var(--font-mono); letter-spacing: .22em; text-transform: uppercase; } .pause-ledger .ledger-transcript { color: var(--ink-2); font: 400 var(--fe-t-note)/1.45 var(--font-ui); letter-spacing: .01em; text-transform: none; } .pause-minimap-wrap { display: flex; flex-direction: column; align-items: flex-start; } #pause-minimap { width: clamp(140px, 13vw, 240px); height: auto; aspect-ratio: 1; border: 1px solid var(--hair); border-radius: 50%; background: #050607; } .pause-minimap-note { margin-top: 8px; color: var(--ink-2); font: 500 var(--fe-t-note)/1.4 var(--font-ui); } .ledger-legend { display: grid; gap: 10px; margin: 0; } .ledger-legend > div { display: grid; grid-template-columns: minmax(96px, 9em) 1fr; gap: 6px 16px; align-items: baseline; } .ledger-legend dt { color: var(--ink-0); font: 600 calc(var(--fe-t-note) * .82)/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; } .ledger-legend dd { margin: 0; color: var(--ink-1); font: 400 var(--fe-t-note)/1.5 var(--font-ui); } /* settings: tabs across the top, rows on the left, the pane on the right */ #pause-screen[data-view="settings"] .pause-panel { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .set-tabs { grid-area: 3 / 1 / 4 / 3; display: flex; align-items: stretch; gap: clamp(4px, .6vw, 12px); margin: clamp(10px, 2vh, 24px) 0 0 4px; padding: 0; border-bottom: 1px solid var(--hair); overflow-x: auto; scrollbar-width: none; } .set-tabs::-webkit-scrollbar { display: none; } .set-tab { position: relative; flex: 0 0 auto; min-height: 48px; padding: 0 clamp(12px, 1.3vw, 26px); border: 0; background: none; color: var(--ink-2); cursor: pointer; font: 600 calc(var(--fe-t-opt) * .72)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; transition: color .16s; } .set-tab::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; background: var(--ember); transform: scaleX(0); transition: transform .2s var(--ease-premium); } .set-tab:hover, .set-tab:focus-visible { color: var(--ink-0); outline: none; background: rgba(240, 232, 214, .04); } .set-tab.sel { color: var(--ink-0); } .set-tab.sel::after { transform: scaleX(1); } .fe-tabkey { align-self: center; flex: 0 0 auto; font-size: var(--fe-t-prompt); } .set-body { grid-area: 4 / 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 10px 4px 16px 4px; scrollbar-width: thin; scrollbar-color: rgba(240, 232, 214, .2) transparent; } .set-panel[hidden] { display: none; } .pause-settings .set-detail { grid-area: 4 / 2; margin-top: 10px; } .set-panel > :is(.slider-row, .set-row, .adaptive-row, label.zr-check) { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 18px; min-height: max(52px, calc(var(--fe-t-body) * 3.3)); margin: 0; padding: 6px 16px; border-bottom: 1px solid var(--hair); color: var(--ink-0); font: 500 var(--fe-t-body)/1.3 var(--font-ui); transition: background .14s; } .set-panel > :is(.slider-row, .set-row, .adaptive-row, label.zr-check)[hidden] { display: none; } .set-panel > :is(.slider-row, .set-row, .adaptive-row, label.zr-check):is(:hover, :focus-within, .fe-focus) { background: linear-gradient(90deg, rgba(240, 138, 76, .2), rgba(240, 138, 76, .04) 70%, transparent); } .set-panel > :is(.slider-row, .set-row, .adaptive-row, label.zr-check):is(:focus-within, .fe-focus)::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 3px; background: var(--ember); } .slider-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) 4.2em !important; } .slider-row label, .set-label { color: var(--ink-0); font: 500 var(--fe-t-body)/1.3 var(--font-ui); } .slider-row .val { justify-self: end; color: var(--ember-hot); font: 600 calc(var(--fe-t-note) * .95)/1 var(--font-mono); letter-spacing: .06em; font-variant-numeric: tabular-nums; } .slider-control { display: flex; align-items: center; min-width: 0; } .slider-min, .slider-max { display: none; } input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 34px; margin: 0; background: transparent; cursor: pointer; --fill: 50%; accent-color: var(--ember); } input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 0; background: linear-gradient(90deg, var(--ember) var(--fill), rgba(240, 232, 214, .16) var(--fill)); } input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: 0; transform: rotate(45deg); background: var(--ink-0); border: 2px solid var(--ember); box-shadow: 0 0 10px rgba(240, 138, 76, .5); } input[type="range"]::-moz-range-track { height: 4px; background: rgba(240, 232, 214, .16); } input[type="range"]::-moz-range-progress { height: 4px; background: var(--ember); } input[type="range"]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 0; transform: rotate(45deg); background: var(--ink-0); border: 2px solid var(--ember); } input[type="range"]:focus-visible { outline: none; } input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(240, 138, 76, .35), 0 0 14px rgba(240, 138, 76, .7); } /* a checkbox row is a switch on the right */ .set-panel label.zr-check { cursor: pointer; } .set-panel label.zr-check .zr-check__label { grid-area: 1 / 1; color: var(--ink-0); font: inherit; } .set-panel label.zr-check .zr-check__box { grid-area: 1 / 2; justify-self: end; } :is(.set-panel, .a11y-row) .zr-check__box { position: relative; flex: 0 0 auto; width: 48px; height: 26px; margin: 0; border: 1px solid var(--hair-hi); border-radius: 13px; background: rgba(0, 0, 0, .45); box-shadow: none; transition: background .16s, border-color .16s; } :is(.set-panel, .a11y-row) .zr-check__box::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--ink-2); transform: none; transition: transform .18s var(--ease-premium), background .16s; } :is(.set-panel, .a11y-row) .zr-check__input:checked + .zr-check__box { background: var(--ember-fill); border-color: var(--ember-hot); box-shadow: 0 0 12px rgba(240, 138, 76, .35); } :is(.set-panel, .a11y-row) .zr-check__input:checked + .zr-check__box::after { transform: translateX(22px); background: var(--ember-ink); } .zr-check__input:focus-visible + .zr-check__box { outline: 2px solid var(--ember); outline-offset: 3px; } /* the route ledger: a plain tick box per step */ .pause-ledger .zr-check--static { display: flex; align-items: center; gap: 10px; color: inherit; font: inherit; letter-spacing: inherit; } .pause-ledger .zr-check__box { width: 16px; height: 16px; margin: 0; border: 1px solid var(--hair-hi); border-radius: 2px; background: rgba(0, 0, 0, .4); } .pause-ledger .is-checked .zr-check__box { border-color: var(--ember); background: var(--ember-fill); } .pause-ledger .is-checked .zr-check__box::after { border-color: var(--ember-ink); } .pause-ledger .ledger-row.done { color: var(--ink-2); text-decoration: line-through; text-decoration-color: rgba(240, 232, 214, .3); } .pause-route { margin-top: 18px; } .pause-route > b { color: var(--ember); } .pause-route :is(.ledger-transcript-head, .ledger-transcript) { display: none; } .set-head { margin: 22px 0 4px; padding: 0 16px; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .26em; text-transform: uppercase; } .set-panel > .set-head:first-child { margin-top: 8px; } .diff-row, .gear-row { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: 0; } .diff-btn { min-height: 44px; padding: 0 clamp(10px, .9vw, 16px); border: 1px solid var(--hair); border-radius: 2px; background: rgba(0, 0, 0, .3); color: var(--ink-2); cursor: pointer; font: 600 calc(var(--fe-t-note) * .82)/1 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; transition: color .14s, border-color .14s, background .14s; } .diff-btn:hover, .diff-btn:focus-visible { color: var(--ink-0); border-color: var(--hair-hi); outline: none; } .diff-btn:focus-visible { box-shadow: 0 0 0 2px var(--ember); } .diff-btn.sel, .diff-btn[aria-pressed="true"] { color: var(--ember-ink); background: var(--ember-fill); border-color: var(--ember-fill); } .set-note { padding: 0 16px; } .set-detail .set-preview { display: none; margin-top: 18px; } .set-detail[data-preview="bri"] .set-preview[data-preview="bri"], .set-detail[data-preview="fov"] .set-preview[data-preview="fov"] { display: block; } .set-preview .set-note { padding: 0; } .fr-wedge { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; margin: 12px 0 4px; border: 1px solid var(--hair-hi); filter: brightness(var(--fr-exposure, 1)); } .fr-wedge span { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1.15; font: 700 clamp(14px, 1.4vw, 26px)/1 var(--font-display); } .fov-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 0 4px; } .fov-preview__cone { display: block; width: min(320px, 80%); height: 80px; background: linear-gradient(180deg, rgba(240, 138, 76, .35), rgba(240, 138, 76, .04)); clip-path: polygon(50% 0, calc(50% + var(--fov-spread, 28%)) 100%, calc(50% - var(--fov-spread, 28%)) 100%); border-bottom: 1px solid var(--hair-hot); } .fov-preview__label { color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .75)/1 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; } #pause-screen[data-from-title="1"] .set-run-only { display: none; } .pause-settings #pause-controls-slot #controls-kit { margin-top: 6px; } /* ----------------------------------------------- Cache, Intel, Quick Match */ .cache-index-progress, .intel-progress { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 8px 16px; margin-top: 14px; } .cache-progress-label, .ip-label { color: var(--ink-0); font: 600 calc(var(--fe-t-note) * 1.05)/1.2 var(--font-display); letter-spacing: .06em; text-transform: uppercase; } .ip-split { justify-self: end; color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .78)/1 var(--font-mono); letter-spacing: .16em; } .cache-progress-track, .ip-track { grid-column: 1 / -1; position: relative; display: block; height: 3px; overflow: hidden; background: rgba(240, 232, 214, .1); } .cache-progress-track i, .ip-track i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--ember), var(--ember-hot)); } .cache-index-grid.fe-list, .intel-grid.fe-list { margin-top: 18px; } /* --------------------------------------------------------- confirm band */ .fe-band { background: rgba(2, 3, 4, .72); } @supports (backdrop-filter: blur(1px)) { html:not(.is-touch) .fe-band { backdrop-filter: blur(4px); } } .fe-band.active { display: block; } .fe-band > .panel { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: minmax(0, 1fr) var(--fe-col-w); gap: var(--fe-gap); align-items: center; max-height: calc(100% - var(--fe-head-h) - var(--fe-foot-h)); overflow-y: auto; margin: 0; padding: clamp(24px, 4.5vh, 56px) var(--fe-px); border: 0; border-block: 1px solid var(--hair-hi); border-radius: 0; background: linear-gradient(90deg, rgba(12, 14, 17, .97), rgba(18, 13, 10, .95)); box-shadow: 0 0 120px rgba(0, 0, 0, .7); text-align: left; } .fe-band > .panel::before { content: ""; position: absolute; left: var(--fe-px); top: -1px; width: 120px; height: 2px; background: var(--ember); } .fe-band .fe-col { padding: 0; overflow: visible; } .fe-band .fe-list { margin: 0; } .confirm-copy { margin: .8em 0 0; max-width: 60ch; color: var(--ink-1); font: 400 var(--fe-t-body)/1.6 var(--font-ui); } .fe-list.fe-list > .pbtn.destructive { color: #f2b1a6; } .fe-list.fe-list > .pbtn.destructive:is(:hover, :focus-visible, .fe-focus) { color: #fff1ec; background: linear-gradient(90deg, rgba(200, 60, 44, .45), rgba(200, 60, 44, .1) 60%, transparent); } .fe-list.fe-list > .pbtn.destructive::before { background: var(--fe-bad); } .fe-band .fe-foot { z-index: 5; } /* ------------------------------------------------------- after-action */ .go-kicker { margin-bottom: .4em; } #go-title { color: var(--fe-bad); font-size: calc(var(--fe-t-title) * 1.12); text-shadow: 0 0 40px rgba(224, 96, 74, .35); } #gameover-screen[data-outcome="win"] #go-title { color: var(--fe-ok); text-shadow: 0 0 40px rgba(159, 209, 138, .3); } #go-round { margin-top: .5em; color: var(--ink-1); font: 600 var(--fe-t-kick)/1.3 var(--font-mono); letter-spacing: .2em; text-transform: uppercase; font-style: normal; } .go-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; margin: 0 0 18px; } .go-stat { display: flex; flex-direction: column; gap: 10px; padding: clamp(12px, 1.6vh, 22px) clamp(12px, 1.2vw, 20px); background: rgba(240, 232, 214, .04); border-top: 2px solid var(--hair-hi); } .go-stat:first-child { border-top-color: var(--ember); } .go-stat span { color: var(--ink-2); font: 600 calc(var(--fe-t-note) * .8)/1 var(--font-mono); letter-spacing: .18em; text-transform: uppercase; } .go-stat b { color: var(--ink-0); font: 600 calc(var(--fe-t-dtitle) * 1.05)/1 var(--font-display); letter-spacing: .02em; font-variant-numeric: tabular-nums; } .go-xp { margin: 0 0 18px; padding: 16px 18px; border: 1px solid var(--hair-hot); background: rgba(240, 138, 76, .07); } /* wide screens: the Field Report stands open beside the numbers */ @media (min-width: 1400px) and (min-height: 800px) { .go-summary { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); grid-auto-rows: min-content; column-gap: clamp(22px, 2vw, 40px); align-content: start; } .go-summary > .fe-d-kicker { grid-column: 1 / -1; } .go-summary > :is(.go-stats, .go-xp) { grid-column: 1; } .go-summary > .go-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .go-summary > .go-stats .go-stat:first-child { grid-column: 1 / -1; } .go-summary > #field-report { grid-column: 2; grid-row: 2 / span 6; align-self: start; border-top: 0; } .go-summary > #field-report > summary { border-bottom: 1px solid var(--hair); } } .go-xp[hidden] { display: none; } #field-report { border-top: 1px solid var(--hair); } #field-report summary { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 4px; cursor: pointer; list-style: none; color: var(--ink-0); font: 600 calc(var(--fe-t-opt) * .75)/1 var(--font-display); letter-spacing: .1em; text-transform: uppercase; } #field-report summary::-webkit-details-marker { display: none; } #field-report summary::before { content: "\25B8"; color: var(--ember); transition: transform .16s; } #field-report[open] summary::before { transform: rotate(90deg); } #field-report summary:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; } #after-action-dossier { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 0; padding: 14px 18px; color: var(--ink-1); background: rgba(4, 5, 6, .6); border-left: 3px solid var(--ember); font: 600 calc(var(--fe-t-note) * .86)/1.65 var(--font-mono); text-wrap: pretty; overflow-wrap: anywhere; } #after-action-dossier b { color: var(--ember-hot); letter-spacing: .12em; } #after-action-dossier .dossier-official, #after-action-dossier .dossier-archive { color: var(--ink-2); } #after-action-dossier .dossier-recovered, #after-action-dossier .dossier-unfinished { color: #d7c39a; } #after-action-dossier .dossier-meta, #after-action-dossier .dossier-pb { color: var(--ink-1); } #after-action-dossier :is(.dossier-next, .dossier-near) { margin-top: 6px; color: var(--ember-hot); } /* ----------------------------------------------------------- briefing */ .fr-step { margin-top: clamp(16px, 2.6vh, 30px); } .fr-step h3 { margin: 0 0 10px; color: var(--ember); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .24em; text-transform: uppercase; } .fr-lead { margin: 0; color: var(--ink-1); font: 400 var(--fe-t-body)/1.6 var(--font-ui); overflow-wrap: anywhere; } .fr-lead b { color: var(--ink-0); } .fr-step .slider-row { display: grid; grid-template-columns: auto minmax(0, 1fr) 3em; align-items: center; gap: 14px; margin-top: 14px; } .fr-detail .fr-wedge span { aspect-ratio: 1 / .8; font-size: clamp(16px, 1.6vw, 30px); } /* ---------------------------------------- account gate: the same band */ #account-gate { z-index: 120; display: block; padding: 0; background: rgba(2, 3, 4, .8); } #account-gate .ag-card { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); column-gap: var(--fe-gap); align-content: start; width: auto; max-height: calc(100% - 32px); overflow-y: auto; padding: clamp(24px, 4.5vh, 56px) var(--fe-px); border: 0; border-block: 1px solid var(--hair-hi); border-radius: 0; background: linear-gradient(90deg, rgb(12, 14, 17), rgb(18, 13, 10)); box-shadow: 0 0 120px rgba(0, 0, 0, .7); } #account-gate .ag-card::before { content: ""; position: absolute; left: var(--fe-px); top: -1px; width: 120px; height: 2px; background: var(--ember); } #account-gate .ag-card > * { grid-column: 1; } #account-gate #ag-form { grid-column: 2; grid-row: 1 / 5; margin: 0 0 18px; } #account-gate .ag-actions { grid-column: 2; grid-row: 5 / 7; flex-wrap: wrap; margin: 0; } #account-gate .ag-kicker { color: var(--ember); font: 600 var(--fe-t-kick)/1.2 var(--font-mono); letter-spacing: .26em; } #account-gate h2 { color: var(--ink-0); font: 600 var(--fe-t-title)/1 var(--font-display); letter-spacing: .03em; } #account-gate #ag-copy, #account-gate .ag-legal { max-width: 60ch; color: var(--ink-1); font: 400 var(--fe-t-body)/1.6 var(--font-ui); } #account-gate .ag-legal { color: var(--ink-2); font-size: var(--fe-t-note); } #account-gate .ag-field { color: var(--ink-2); font: 600 var(--fe-t-kick)/1 var(--font-mono); letter-spacing: .2em; } #account-gate .ag-field input { min-height: 52px; border-color: var(--hair-hi); border-radius: 2px; background: rgba(4, 5, 6, .75); user-select: text; -webkit-user-select: text; } #account-gate .ag-field input:focus { outline: 2px solid var(--ember); outline-offset: 2px; } #account-gate .ag-actions .mbtn { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0 20px; border: 1px solid var(--hair-hi); border-radius: 2px; background: rgba(8, 10, 12, .62); box-shadow: none; color: var(--ink-0); font: 600 calc(var(--fe-t-prompt) * 1.1)/1 var(--font-display); letter-spacing: .1em; } #account-gate .ag-actions .mbtn::before { content: none; } #account-gate .ag-actions .mbtn.go { background: var(--ember-fill); border-color: var(--ember-fill); color: var(--ember-ink); } @media (max-width: 760px) { #account-gate .ag-card { grid-template-columns: minmax(0, 1fr); } #account-gate .ag-card > *, #account-gate #ag-form, #account-gate .ag-actions { grid-column: 1; grid-row: auto; } } /* ----------------------------------------------- not the menu, but here */ #tc-pause, #tc-more { min-width: 44px; min-height: 44px; } #signal-subtitle { font-size: calc(16px * var(--hud-sub-scale, 1) * var(--ui-scale, 1)); } :is(#splash-skip, #intro-skip) { border: 1px solid rgba(240, 232, 214, .28); border-radius: 2px; background: rgba(10, 12, 15, .66); color: var(--ink-0); font: 600 11px/1 var(--font-mono); letter-spacing: .24em; } :is(#splash-skip, #intro-skip)::after { content: "\00a0\203A"; color: var(--ember); } #touch-editor { background: linear-gradient(180deg, rgba(8, 10, 12, .96), rgba(8, 10, 12, .86) 76%, rgba(8, 10, 12, 0)); } html.is-touch #rotate-hint .rotate-title { font-size: clamp(18px, 5.2vw, 22px); } html.is-touch #rotate-hint .rotate-sub { max-width: min(320px, 88vw); font-size: 13px; color: var(--paper-dim); } html.is-touch #rotate-anyway { min-height: 46px; padding: 12px 18px; font-size: 11px; letter-spacing: .12em; } /* ================================================== SMALLER SCREENS */ @media (max-width: 1100px) { html:root { --fe-col-w: clamp(260px, 38vw, 420px); } .soldier-detail { grid-template-columns: minmax(0, 1fr); } .sd-shot { max-height: 34vh; aspect-ratio: auto; height: 34vh; } .go-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* a landscape phone: one row of chrome top and bottom, everything tighter */ @media (max-height: 500px) and (orientation: landscape) { html:root { --fe-head-h: 46px; --fe-foot-h: 50px; --fe-top: 8px; --fe-gap: 16px; --fe-t-title: calc(24px * var(--fe-s)); --fe-t-opt: calc(17px * var(--fe-s)); --fe-t-dtitle: calc(20px * var(--fe-s)); --fe-t-body: calc(14px * var(--fe-s)); --fe-t-note: calc(13px * var(--fe-s)); --fe-t-kick: calc(11px * var(--fe-s)); --fe-opt-h: 44px; } .fe-card-rank, .live-presence, .ask-kicker::before { display: none; } .fe-card { height: 40px; } .ask-kicker, .eyebrow { margin-bottom: .3em; } .fe-list { margin-top: 8px; } .fe-detail { padding: 14px 16px; } .crt-set { width: min(52vw, 470px); padding: 8px 8px 22px; border-radius: 14px; } .crt-screen { padding: 10px 16px 8px; border-radius: 16px / 20px; } .gt-main { font-size: calc(30px * var(--fe-s)); } .gt-file, #ask-play .ask-kicker { display: none; } /* a landscape phone has no height for five rows and a strip: two columns */ .home-list.fe-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2px 6px; } .fe-strip { min-height: 0; margin-top: 6px; padding-top: 6px; } .game-title { margin-bottom: 6px; } .home-list.fe-list.fe-list > .mtile { min-height: 44px; } .crt-badge { bottom: 6px; height: 12px; } .crt-badge::before { content: "FR-07"; } #tv-wall .tv-stack { right: 12px; bottom: 16%; width: 38vw; aspect-ratio: 1.3; } #tv-wall :is(.tv-f, .tv-g, .tv-e) { display: none; } #tv-wall .tv-c { width: 46%; left: 4%; } #tv-wall .tv-d { width: 46%; left: 52%; } .pause-run-stats span { padding: 8px 10px; } #pause-screen[data-view="settings"] .pause-panel > .pause-kicker { display: none; } #pause-screen[data-view="settings"] .set-tabs { grid-area: 2 / 1 / 3 / 3; margin: 0 0 0 calc(var(--fe-t-title) * 4.6); } #pause-screen[data-view="settings"] .set-tab { min-height: 44px; } .set-panel > :is(.slider-row, .set-row, .adaptive-row, label.zr-check) { min-height: 48px; padding: 2px 10px; } .home-chrome-footer .best-line, #studio-credit { display: none; } .go-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); } .go-stat { padding: 8px 10px; } .fr-detail .fr-wedge span { aspect-ratio: 1 / .9; } } /* phones upright and narrow tablets: the list goes full width and the detail pane folds under it */ @media (max-width: 760px) { html:root { --fe-gx: 16px; --fe-head-h: 56px; --fe-foot-h: 60px; --fe-t-title: calc(28px * var(--fe-s)); --fe-t-dtitle: calc(21px * var(--fe-s)); --fe-opt-h: 48px; } .fe-card-text, .live-presence { display: none; } .fe-card { padding: 0 4px; } #title-screen .mpage, .fe-screen > .panel { grid-template-columns: minmax(0, 1fr); grid-template-rows: max-content max-content minmax(max-content, 1fr); align-content: start; overflow-y: auto; pointer-events: auto; scroll-padding-bottom: calc(var(--fe-foot-h) + 28px); } .fe-col { grid-area: 1 / 1; overflow: visible; padding-bottom: 8px; } #title-screen .mpage.controls-page { grid-template-columns: minmax(0, 1fr); } /* one scroller per page on a phone: the page itself */ .fe-detail, .fe-detail.credits-body { grid-area: 2 / 1; align-self: start; margin: 4px 0 12px; max-height: none; overflow: visible; overflow-x: clip; } #title-screen .mpage > .action-bar, .fe-screen > .panel > .action-bar { grid-area: 3 / 1; align-self: end; position: sticky; bottom: 0; justify-self: stretch; justify-content: flex-end; z-index: 2; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(3, 4, 5, 0), rgba(3, 4, 5, .94) 26%); } .action-bar :is(.mbtn, .pbtn) { flex: 1 1 0; } .fe-foot .fe-prompts { display: none; } #title-screen .mpage[data-for="home"] { grid-template-rows: minmax(0, 1fr) calc(var(--fe-foot-h) + env(safe-area-inset-bottom, 0px)); overflow: hidden; pointer-events: none; } #title-screen .mpage[data-for="home"] > .crt-set { justify-self: center; width: 100%; } .crt-set { padding: 10px 10px 30px; border-radius: 16px; } .crt-screen { padding: 16px 18px 12px; } .gt-main { font-size: calc(clamp(34px, 11vw, 52px) * var(--fe-s)); } .crt-badge::before { content: "FR-07"; } #tv-wall .tv-stack { left: 50%; right: auto; top: calc(env(safe-area-inset-top, 0px) + 64px); bottom: auto; width: min(94vw, 760px); aspect-ratio: 3.5; transform: translateX(-50%); } #title-screen:not([data-page="home"]) #tv-wall .tv-stack { transform: translateX(-50%) scale(.97); } #tv-wall .tv-a { left: 0; width: 34%; } #tv-wall .tv-b { left: 33%; width: 34%; } #tv-wall .tv-d { left: 66%; bottom: 0; width: 34%; } #tv-wall :is(.tv-c, .tv-e, .tv-f, .tv-g) { display: none; } .home-chrome-footer { flex-wrap: wrap; gap: 4px 10px; justify-content: center; } #title-screen[data-page="home"] .fe-foot { justify-content: center; } .home-chrome-footer .best-line { display: none; } .soldier-detail { grid-template-columns: 96px minmax(0, 1fr); } .sd-shot { height: auto; aspect-ratio: 3 / 4; } .pause-panel { grid-template-columns: minmax(0, 1fr) !important; grid-template-rows: repeat(5, max-content) max-content !important; align-content: start; overflow-y: auto; pointer-events: auto; scroll-padding-bottom: calc(var(--fe-foot-h) + 28px); } .pause-panel .fe-col { grid-area: 3 / 1; } .pause-panel .fe-detail { grid-area: 4 / 1; margin-top: 10px; } .pause-panel .action-bar { grid-area: 6 / 1; position: sticky; bottom: 0; justify-self: stretch; } .set-tabs { grid-area: 3 / 1; } .set-body { grid-area: 4 / 1; overflow: visible; padding-right: 0; } .pause-settings .set-detail { grid-area: 5 / 1; } .set-panel > :is(.slider-row, .set-row, .adaptive-row, label.zr-check) { grid-template-columns: minmax(0, 1fr); gap: 6px; padding: 8px 10px; } .slider-row { grid-template-columns: minmax(0, 1fr) 3.6em !important; } .slider-row > label { grid-column: 1 / -1; } .set-panel label.zr-check { grid-template-columns: minmax(0, 1fr) auto; } .diff-row, .gear-row { justify-content: flex-start; } .fe-band > .panel { grid-template-columns: minmax(0, 1fr); gap: 18px; } .go-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lobby-detail .lobby-head { grid-template-columns: minmax(0, 1fr); } .ledger-legend > div { grid-template-columns: 1fr; } .career-record { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .fe-rows > div { grid-template-columns: minmax(6em, 8.5em) minmax(0, 1fr); gap: 2px 12px; } .fe-loadout { grid-template-columns: 72px minmax(0, 1fr); } .fe-lo-shot { grid-row: 1; } .fe-loadout .fe-rows { grid-column: 1 / -1; } .fe-chain li { grid-template-columns: 2.2em minmax(0, 1fr); } .fe-chain li span { grid-column: 2; white-space: normal; } } @media (max-width: 380px) { html:root { --fe-t-title: calc(25px * var(--fe-s)); --fe-t-opt: calc(17px * var(--fe-s)); } .crt-screen { padding: 12px 14px 10px; } .go-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-height: 640px) and (max-width: 760px) { .gt-file, .fe-strip, #ask-play .ask-kicker { display: none; } } /* ---------------------------------------------------- less motion */ @media (prefers-reduced-motion: reduce) { #title-bg img, #tv-wall::before, .crt-screen::after, #title-screen.fe-boot *, .fe-enter *, .fe-mirror, #title-screen .mpage.fe-out { animation: none !important; } .fe-list.fe-list > *, .set-tab::after { transition: none; } } html.reduce-motion #title-bg img, html.reduce-motion #tv-wall::before, html.reduce-motion .crt-screen::after, html.reduce-motion #title-screen.fe-boot *, html.reduce-motion .fe-enter *, html.reduce-motion .fe-mirror { animation: none; } html.reduce-motion #title-screen .mpage.fe-out { display: none; } /* Custom Game (0.42): the stamp a night on house rules wears in its brief and its after-action report. The page styles itself when it loads. */ .fe-rules-badge { display: inline-block; margin: calc(10px * var(--fe-s)) 0 0; padding: 4px 10px; border: 1px solid var(--hair-hot); border-radius: 2px; color: var(--ember-hot); background: rgba(240, 138, 76, .1); font: 600 var(--fe-t-note)/1.25 var(--font-display, sans-serif); letter-spacing: .08em; text-transform: uppercase; } .fe-rules-badge[hidden] { display: none; } .lobby-rules { margin: 10px 0; }