/* Flygen — the phone filter (public/flygen-filter-sheet.js). Shared by the homepage and the Next pages. Below 700px the filter rows (/work, /thinking, the homepage's Selected Work) become one full-width button that always says what is shown, opening a bottom sheet in the consent panel's language (flygen-consent.css): paper ground, hairlines, straight corners, a scrim, the cobalt state line drawing in along the top edge. Controls stay rounded (the one pill button). Desktop is untouched: nothing here applies at 700px and wider. Only with scripting: without JavaScript the /thinking links stay as they are (they work without it). */ /* the trigger never shows on desktop */ html button[data-fs-open][aria-haspopup] { display: none; } @media (max-width: 699px) and (scripting: enabled) { /* the rows are replaced by the button (they stay in the DOM: the sheet acts through them) */ [data-fs="work"] > [data-wf-view], [data-fs="work"] > [data-list], [data-fs="thinking"] > [data-fs-group] { display: none !important; } html button[data-fs-open][aria-haspopup] { -webkit-appearance: none; appearance: none; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; margin: 0; padding: 0; border: 0; border-top: 1px solid rgba(18,18,25,.12); border-bottom: 1px solid rgba(18,18,25,.12); border-radius: 0; background: transparent; box-shadow: none; cursor: pointer; font: inherit; font-size: 15px; line-height: 1.3; color: #121219; text-align: left; -webkit-tap-highlight-color: transparent; transition: color .3s ease, border-color .3s ease; } html button[data-fs-open][aria-haspopup]:hover { color: #121219; } html button[data-fs-open][aria-haspopup]:focus-visible { outline: 1px solid #2146D8; outline-offset: 4px; } [data-fs-now] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-fs-now] [data-fs-count] { color: #8A8894; font-variant-numeric: tabular-nums; } [data-fs-cta] { display: inline-flex; flex: none; align-items: center; gap: 8px; color: #2146D8; } [data-fs-cta] svg { display: block; transition: transform .3s ease; } html button[data-fs-open][aria-haspopup][aria-expanded="true"] [data-fs-cta] svg { transform: rotate(180deg); } } /* ── the sheet (built by the script, appended to ) ── */ .fgfs { --fgfs-ink: #121219; --fgfs-cobalt: #2146D8; --fgfs-paper: #FCFBF7; --fgfs-muted: rgba(18,18,25,.64); --fgfs-rule: rgba(18,18,25,.12); --fgfs-ease: cubic-bezier(.16,.84,.24,1); display: none; font-family: var(--font-sans, "Instrument Sans"), "Instrument Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--fgfs-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .fgfs[data-open] { display: block; } .fgfs *, .fgfs *::before, .fgfs *::after { box-sizing: border-box; } .fgfs-scrim { position: fixed; inset: 0; z-index: 480; background: rgba(6,16,47,.36); opacity: 0; transition: opacity .3s ease; } .fgfs[data-in] .fgfs-scrim { opacity: 1; } .fgfs-sheet { position: fixed; z-index: 490; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: calc(100dvh - 24px); background: var(--fgfs-paper); border-top: 1px solid rgba(18,18,25,.1); outline: none; padding: 22px max(20px, env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); transform: translateY(100%); transition: transform .3s var(--fgfs-ease); } .fgfs[data-in] .fgfs-sheet { transform: none; } /* the cobalt state line along the top edge, drawn in left → right once the sheet is up */ .fgfs-sheet::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--fgfs-cobalt); clip-path: inset(0 100% 0 0); pointer-events: none; } .fgfs[data-in] .fgfs-sheet::before { clip-path: inset(0); transition: clip-path .4s var(--fgfs-ease) .12s; } .fgfs-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .fgfs-title { margin: 0; font-size: 11px; line-height: 1.4; letter-spacing: .2em; text-transform: uppercase; color: #5E5C68; } .fgfs-close { -webkit-appearance: none; appearance: none; position: relative; margin: 0; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 14.5px; line-height: 1; color: var(--fgfs-ink); cursor: pointer; box-shadow: inset 0 -1px 0 rgba(18,18,25,.3); transition: color .18s ease, box-shadow .18s ease; } .fgfs-close::after { content: ""; position: absolute; inset: -12px -12px -12px -16px; } /* a 44px tap target around the text */ .fgfs-close:hover, .fgfs-close:focus-visible { color: var(--fgfs-cobalt); box-shadow: inset 0 -1px 0 var(--fgfs-cobalt); } .fgfs-close:focus-visible { outline: 1px solid var(--fgfs-cobalt); outline-offset: 4px; } /* VIEW BY: the desktop switch, as text — the active family cobalt with a thin underline */ .fgfs-view { display: flex; gap: 28px; margin-top: 10px; } .fgfs-tab { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; min-height: 44px; margin: 0; padding: 0; border: 0; background: none; font: inherit; font-size: 17px; letter-spacing: -.01em; color: var(--fgfs-ink); cursor: pointer; -webkit-tap-highlight-color: transparent; } .fgfs-tab[aria-pressed="true"] { color: var(--fgfs-cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px; } .fgfs-tab:focus-visible { outline: 1px solid var(--fgfs-cobalt); outline-offset: 2px; } /* the options: full-width rows on hairlines, count right-aligned; the chosen one cobalt with its state line */ .fgfs-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 8px 0 0; border-top: 1px solid var(--fgfs-rule); } .fgfs-opt { -webkit-appearance: none; appearance: none; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; margin: 0; padding: 0; border: 0; border-bottom: 1px solid var(--fgfs-rule); border-radius: 0; background: none; font: inherit; font-size: 16px; line-height: 1.3; text-align: left; color: rgba(18,18,25,.82); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color .3s ease; } .fgfs-opt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--fgfs-cobalt); transform: scaleX(0); transform-origin: left; transition: transform .4s var(--fgfs-ease); } .fgfs-opt[aria-pressed="true"] { color: var(--fgfs-cobalt); } .fgfs-opt[aria-pressed="true"]::after { transform: scaleX(1); } .fgfs-opt:focus-visible { outline: 1px solid var(--fgfs-cobalt); outline-offset: -1px; } .fgfs-opt-label { min-width: 0; } .fgfs-opt-n { flex: none; font-size: 13px; color: #8A8894; font-variant-numeric: tabular-nums; } .fgfs-opt[aria-pressed="true"] .fgfs-opt-n { color: var(--fgfs-cobalt); } /* the one action: the site's filled pill (consent's primary) */ .fgfs-foot { margin-top: 18px; } .fgfs-show { -webkit-appearance: none; appearance: none; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin: 0; padding: 0 22px; border: 1px solid var(--fgfs-ink); border-radius: 999px; background: var(--fgfs-ink); color: var(--fgfs-paper); font: inherit; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .32s ease, border-color .32s ease; } .fgfs-show:hover, .fgfs-show:focus-visible { background: var(--fgfs-cobalt); border-color: var(--fgfs-cobalt); color: #fff; } .fgfs-show:focus-visible { outline: 1px solid var(--fgfs-cobalt); outline-offset: 3px; } /* reduced motion: the same states, nothing travels */ @media (prefers-reduced-motion: reduce) { .fgfs-scrim, .fgfs-sheet, .fgfs[data-in] .fgfs-sheet::before, .fgfs-opt, .fgfs-opt::after, [data-fs-cta] svg { transition: none !important; } .fgfs-sheet::before { clip-path: none; } }