/* ============================================================ mobile.css The whole mobile layer, one file, media queries over the SAME HTML (design-decisions-mobile.md). Loaded LAST so it wins the cascade; every value comes from tokens.css. Breakpoint 768px: at/above it the desktop layout is untouched. No JavaScript: the header, search and filter toggles are the checkbox hack. ============================================================ */ @media (max-width: 768px) { /* ---- platform migration notice ---------------------------- The panel is fluid and wraps on its own; only the padding is tightened, so it does not eat the narrow column the auth card has left. Long words in the copy are allowed to break rather than push the card into a horizontal scroll. */ .rfi-mignotice { padding: 12px 13px; } .rfi-mignotice__title { font-size: 14.5px; } .rfi-mignotice__body { font-size: 13.5px; } .rfi-mignotice__title, .rfi-mignotice__body, .rfi-mignotice__cta { overflow-wrap: anywhere; } /* ---- container -------------------------------------------- */ .rfi-wrap { padding: 0 16px 24px; } .rfi-wrap > .rfi-masthead { margin: 12px 0 18px; } .rfi-wrap > .rfi-topslot, .rfi-wrap > .rfi-topslot + .rfi-masthead { margin-top: 12px; } /* ============================================================ HEADER: one white card becomes three stacked bands. The order is set here (utility 1, plate 2, drawer 3); the markup order is navcb, plate, nav, right. Two bugs the doc calls out: the fixed height + overflow:hidden must be released, and the logo SVG needs an explicit width (auto computes to 0 in a nested container). ============================================================ */ .rfi-masthead { background: transparent; box-shadow: none; padding: 0; height: auto; overflow: visible; display: flex; flex-direction: column; align-items: stretch; gap: 10px; } /* band 1 -- utility strip on the grey ground (the right zone) */ .rfi-masthead__right { order: 1; width: 100%; margin: 0; gap: 8px; flex: none; align-self: auto; min-width: 0; } .rfi-masthead__lupe { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; background: var(--rfi-surface); border-radius: var(--rfi-radius); box-shadow: var(--rfi-shadow); } .rfi-masthead__lupe svg { fill: var(--rfi-text-3); } .rfi-masthead__search { display: none; } .rfi-masthead__div, .rfi-masthead__lang { display: none; } .rfi-masthead__auth { margin-left: auto; gap: 8px; flex: none; } .rfi-masthead__auth .rfi-btn { min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; } /* lupe expands ONE full-width field with a close; the lupe and the Subscribe/Sign-in pair hide while it is open (no two search boxes). */ .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__lupe { display: none; } .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__search { display: flex; flex: 1; height: 44px; padding: 0 12px; margin: 0; background: var(--rfi-surface); box-shadow: var(--rfi-shadow); border-radius: var(--rfi-radius); } .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__search input { display: block; width: 100%; } .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__auth { display: none; } .rfi-masthead__searchclose { /* revealed only while search is open */ } .rfi-masthead__searchcb:checked ~ .rfi-masthead__right .rfi-masthead__searchclose { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: var(--rfi-text-3); font-size: 26px; line-height: 1; } /* Search-as-you-type: the list spans the whole band under the field (the close button included), not the field alone. The form gives up its positioning so the band is the anchor. Rows keep their 44px minimum from components/search.css. */ .rfi-masthead__right { position: relative; } .rfi-masthead__search.rfi-suggest-host { position: static; } .rfi-masthead__search .rfi-suggest { left: 0; right: 0; width: auto; } .rfi-suggest__opt { font-size: 16px; } /* band 2 -- white plate: logo (no tagline) + burger */ .rfi-masthead__plate { order: 2; width: 100%; justify-content: space-between; background: var(--rfi-surface); box-shadow: var(--rfi-shadow); border-radius: var(--rfi-radius); padding: 12px 16px; } .rfi-masthead__tag { display: none; } .rfi-masthead__mark { height: 27px; width: 150px; } /* explicit width: auto -> 0 in some engines */ .rfi-masthead__burger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; flex: none; } .rfi-masthead__burger span { display: block; height: 2px; background: var(--rfi-navy); border-radius: 2px; } /* band 3 -- section strip: the five feeds, one tap, scrolls sideways. It does NOT replace the burger: the drawer below holds the same five sections, plus Topics and the language block. The strip exists because the news feed, the most read section on the site, was two taps away on a phone (open the burger, then News) while every other band was already one. IT WAS SIX UNTIL 2026-09-05 and is now five. Magazine left the navigation entirely that day (74 views in a month) and is reached from the Topics list and the footer. Topics itself is deliberately NOT in this row: the row is driven by a finger and scrolls sideways, and a control that unfolds a panel inside it fights the swipe it sits in. One chip, one destination, nothing that opens. DOM order and visual order agree: the element sits between the plate and the nav in masthead.php, and its order (3) sits between theirs (2 and 4) here. The drawer's order moved 3 -> 4 for exactly that reason and for no other. */ .rfi-masthead__strip { order: 3; display: flex; width: 100%; gap: 7px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */ padding-bottom: 2px; } .rfi-masthead__strip::-webkit-scrollbar { display: none; } .rfi-masthead__strip a { flex: none; /* never shrink: the row scrolls instead */ display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 22px; white-space: nowrap; background: var(--rfi-surface); border: 1px solid var(--rfi-border); font-family: var(--rfi-font-ui); font-size: 13.5px; font-weight: 600; color: var(--rfi-text-2); } /* Active reads as fill AND contrast, not colour alone, for the same reason the desktop nav marks the current item with weight as well as hue. */ .rfi-masthead__strip a.is-active { background: var(--rfi-navy); border-color: var(--rfi-navy); color: #fff; } /* band 4 -- drawer: the same nav, restacked, revealed by the burger */ .rfi-masthead__nav { order: 4; display: none; width: 100%; flex-direction: column; background: var(--rfi-surface); box-shadow: var(--rfi-shadow); border-radius: var(--rfi-radius); padding: 4px 16px 8px; gap: 0; } .rfi-masthead__navcb:checked ~ .rfi-masthead__nav { display: flex; } .rfi-masthead__nav > a { font-size: 17px; font-weight: 600; color: var(--rfi-text); padding: 13px 2px; border-bottom: 1px solid var(--rfi-border-soft); min-height: 44px; display: flex; align-items: center; white-space: normal; } .rfi-masthead__nav > a.is-active { color: var(--rfi-orange-text); } /* Topics in the drawer: the one entry that opens rather than leads. Its summary wears exactly the section link's weight, size and dividing rule, because it sits in that list and is one of its items; the list it unfolds is smaller and indented, so the hierarchy is visible without a second colour. It needs no script here either: the
is the same element the desktop row uses. */ .rfi-masthead__topics-btn { font-size: 17px; font-weight: 600; color: var(--rfi-text); padding: 13px 2px; border-bottom: 1px solid var(--rfi-border-soft); min-height: 44px; justify-content: flex-start; } .rfi-masthead__topicsmenu { padding: 4px 0 6px 8px; } .rfi-masthead__topicsmenu a { min-height: 44px; padding: 10px; font-size: 15px; } .rfi-masthead__navlang { display: block; padding: 10px 2px 2px; } .rfi-masthead__navlang-lab { display: block; font-family: var(--rfi-font-text); font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--rfi-text-3); margin-bottom: 2px; } .rfi-masthead__navlang a, .rfi-masthead__navlang-solo, .rfi-masthead__navlang-cur { display: block; min-height: 44px; padding: 11px 2px; font-family: var(--rfi-font-ui); font-size: 15px; color: var(--rfi-text-2); } /* The language being read is a , not a link: it is where you are, so there is nowhere for it to go. It keeps the row height so the list does not shift. */ .rfi-masthead__navlang-cur { color: var(--rfi-navy); font-weight: 600; } /* ============================================================ LAYOUT: every page grid to one stretched column. STRETCH is load-bearing: without it the content column sizes to its content and a long headline pushes the page wider than the viewport. ============================================================ */ .rfi-grid4 { display: flex; flex-direction: column; align-items: stretch; } .rfi-span3 { order: 1; width: 100%; min-width: 0; } .rfi-rail { order: 2; width: 100%; margin-top: 24px; position: static; } .rfi-grid3, .rfi-grid2, .rfi-feed, .rfi-hub-row { grid-template-columns: 1fr; gap: 14px; } .rfi-home__two { grid-template-columns: 1fr; } /* /magazine/'s intro was capped to one desktop column span (listing.css); with the grid collapsed the column is the full width, and so is the card under the intro. */ .rfi-listing__intro--col { max-width: none; } /* Nothing wider than the viewport. */ img, svg, video, iframe, table { max-width: 100%; } /* ---- cards: one per row, a touch larger title --------------- */ .rfi-card__title { font-size: 17px; } /* ============================================================ DETAIL: the 720px reading measure is released to the full width. ============================================================ */ .rfi-article__read, .rfi-article__figure, .rfi-article__figure--brand, .rfi-article__gallery, .rfi-article__source, .rfi-tagrow, .rfi-aboutco, .rfi-inline-sub { max-width: 100%; } /* ============================================================ LISTINGS: filters behind a full-width button (checkbox hack), the panel's rows stacked; two banners in the feed flow with breathing room; the rail to the tail with its first two slots deduped (they are the ones shown in-flow). ============================================================ */ .rfi-mfilter-toggle, .rfi-filter__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 46px; margin-bottom: 14px; background: var(--rfi-surface); border: 1px solid var(--rfi-border); border-radius: var(--rfi-radius); font-family: var(--rfi-font-ui); font-size: 15px; font-weight: 600; color: var(--rfi-navy); cursor: pointer; } .rfi-mfilter-toggle::before, .rfi-filter__toggle::before { content: '\2699'; font-size: 16px; } .rfi-listing__filter { display: none; margin-bottom: 14px; } .rfi-mfilter-cb:checked ~ .rfi-listing__filter { display: block; } /* Companies: the collapsible panel. The name search (above the button, still the first child of the wired root) stays visible; the filters below it collapse. The inline button carries no bottom margin because the collapse body owns the gap. */ .rfi-filter__toggle { margin-bottom: 0; margin-top: 4px; } .rfi-filter__search { margin-bottom: 14px; } .rfi-filter__collapse { display: none; margin-top: 14px; } .rfi-filter__togglecb:checked ~ .rfi-filter__collapse { display: block; } /* Inside the open panel: label above chips, all chips shown (drop the +more expander), the view switch full width. Tap targets on chips and switch. */ .rfi-filter__group { flex-direction: column; align-items: stretch; gap: 8px; } .rfi-filter__label { width: auto; padding-top: 0; } .rfi-filter__chips.is-collapsed { max-height: none; } .rfi-chip--expand { display: none; } .rfi-chip, .rfi-switch button { min-height: 40px; } .rfi-switch { width: 100%; } .rfi-filter__result { flex-wrap: wrap; gap: 10px; } .rfi-filter__drops { flex-direction: column; align-items: stretch; } .rfi-select, .rfi-select select { width: 100%; } /* In-flow feed banners: same rule as the rail. No plate and no min-height, so the block is exactly as tall as the creative; the margin keeps it off the neighbouring cards. */ .rfi-feed-banner { display: block; margin: 16px 0; } .rfi-feed-banner .rfi-banner-single { width: 100%; border-radius: var(--rfi-radius); overflow: hidden; } .rfi-feed-banner .rfi-banner { display: block; width: 100%; } .rfi-feed-banner img { display: block; width: 100%; height: auto; } /* The two in-flow slots are not duplicated in the rail tail on a listing. */ .rfi-grid4--listing .rfi-rail__slot--V1, .rfi-grid4--listing .rfi-rail__slot--V2, .rfi-grid4--listing .rfi-rail__slot--EV1, .rfi-grid4--listing .rfi-rail__slot--EV2 { display: none; } /* ---- company directory row: stack to one column -------------- Desktop is a horizontal row (logo left, body right, tier pushed right). At the phone width that body column is too narrow: the tier tag lands on the name and the spec breaks one word per line. On mobile the whole row becomes one column, top to bottom: logo full width, then the tier tag on its own line, the name, the spec (kept on its own lines, not word-per-line), and the description. */ .rfi-colist .rfi-crow { flex-direction: column; gap: 12px; } .rfi-colist .rfi-crow--rich .rfi-crow__logo, .rfi-colist .rfi-crow--plain .rfi-crow__logo { width: 100%; height: auto; min-height: 72px; padding: 10px; } /* Contain, never stretch or crop: a wide banner logo scales to the card width, a small square one stays small and centred, both capped so a tall logo cannot dominate the row. */ .rfi-colist .rfi-crow__logo img { width: auto; max-width: 100%; max-height: 96px; object-fit: contain; } .rfi-colist .rfi-crow__body { width: 100%; } .rfi-colist .rfi-crow__top { flex-direction: column; align-items: flex-start; gap: 8px; } .rfi-colist .rfi-crow__tier { order: -1; margin-left: 0; } /* the tag, its own line, above the name */ /* ---- footer: four columns to two -------------------------- TWO columns on the phone, not one. The groups are short lists of short words, and a single 248px column spent the whole screen height on four headings that each carry three to seven one-word links. repeat(2, 1fr), never a fixed row count: grid-auto-flow stays the default `row`, so however many groups the template emits, they fill left to right and wrap down on their own. There are four today; a fifth needs no CSS change. Reading order is DOM order. No `order`, no `dense` packing, no `direction` override anywhere on these nodes, so the visual left-to-right-then-down sequence is the same sequence the tab key and a screen reader walk. That equality is the reason `dense` must never be added here: it would reorder the picture and leave the focus ring jumping. Geometry at the 320px floor, all border-box (base.css:8): 320 - 32 (.rfi-wrap) - 40 (.rfi-footer) = 248 for .rfi-footer__cols (248 - 20 gap) / 2 = 114 per column The binding number is the widest WORD, not the widest phrase: the anchor below is a flex container, and a flex item's auto min-width floors it at min-content, which for a text run is its longest word. Widest link word is "Newsletter" (10 chars, under 81px at 13.5px Open Sans); widest heading word is 11 chars long (under 100px at 11.5px Jost plus its .8px tracking). Both clear 114px, so the font size is NOT reduced. The three 16-character labels ("Terms of Service", "Editorial policy", "Add your company") wrap at their space, which is a word boundary, not a break. The gap stays 20px: it now separates group ROWS as well as columns, and the columns already fit without borrowing from it. */ .rfi-footer { padding: 24px 20px; } .rfi-footer__cols { grid-template-columns: repeat(2, 1fr); gap: 20px; } .rfi-footer__col a { min-height: 40px; display: flex; align-items: center; } /* ---- touch targets on shared controls ---------------------- */ .rfi-loadmore button { min-height: 46px; } }