/* * fund-comparison.css * /fund-comparison and /fund-comparison/{a}-vs-{b}/ * * LOADS AFTER screener-funds.css AND DEPENDS ON IT. Every token this file * uses -- --sf-ink, --sf-line-strong, --sf-active, --sf-hover -- is declared * on .bq-sf there, and the markup is scoped under .bq-sf so they resolve. * Nothing here redeclares a colour. The screener and the comparison are one * product and the palette lives in exactly one file; this one holds only the * shapes that are comparison-specific. * * THE TABLE IS TRANSPOSED FROM THE SCREENER'S. There, a row is a fund and a * column is a metric. Here a row is a METRIC and a column is a fund, because * a comparison is read across two to six things on one measure at a time. * That inverts which axis is sticky: the metric name pins left, the fund * headers pin top, and the box scrolls in both directions -- which it can do * here, unlike the screener, because a comparison has no page size to be as * tall as. * * "ONLY WHAT DIFFERS" IS THIS FILE, NOT THE SCRIPT. Every row is in the HTML; * the ones that agree carry data-differs="0" and are hidden by the rules at * the end of the table section while .is-diffonly is on the page. The toggle * only moves that class. */ /* ===================================================================== THE ROUTE ===================================================================== */ /* See bq_fc_body_class() for why this exists. `clip` clips exactly as `hidden` does but does not make a scroll container, which is the only reason the sticky table header below can pin to the viewport. */ body.bq-fc-route { overflow-x: clip; overflow-y: visible; } /* ===================================================================== THE PICKER ===================================================================== */ .bq-fc-picker { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; margin-bottom: 18px; } /* display:contents so the slots are flex children of .bq-fc-picker itself and sit on one line with the add field, rather than in a box of their own. */ .bq-fc-slots { display: contents; } .bq-fc-slot { position: relative; flex: 0 1 232px; min-width: 0; padding: 11px 32px 11px 14px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); } .bq-fc-slot-tk { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--sf-ink); letter-spacing: -.01em; } .bq-fc-slot-name { margin-top: 2px; font-size: 12px; color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* A link, not a button -- it goes to the comparison without this fund. */ .bq-fc-slot-x { position: absolute; top: 7px; right: 7px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: var(--sf-radius-sm); color: var(--sf-faint); font-size: 17px; line-height: 1; text-decoration: none; } .bq-fc-slot-x:hover { background: var(--sf-tint-2); color: var(--sf-ink); } /* The add field, sized like a slot so the row reads as a set of slots one of which is still empty. */ .bq-fc-add { position: relative; /* The same 232px basis as a filled slot. It IS the next slot, so it should not be four times the width of the ones beside it. */ flex: 0 1 232px; min-width: 0; display: flex; align-items: center; background: var(--sf-card); border: 1px dashed var(--sf-line-strong); } .bq-fc-add:focus-within { border-style: solid; border-color: var(--sf-accent); } .bq-fc-add > svg { position: absolute; left: 12px; width: 15px; height: 15px; fill: var(--sf-faint); pointer-events: none; } .bq-fc-add input { width: 100%; padding: 13px 12px 13px 34px; font: inherit; font-size: 14px; color: var(--sf-ink); background: none; border: 0; } .bq-fc-add input:focus { outline: none; } .bq-fc-add input::-webkit-search-cancel-button { display: none; } .bq-fc-full { display: flex; align-items: center; margin: 0; padding: 0 4px; font-size: 12.5px; color: var(--sf-muted); } .bq-fc-results { position: absolute; top: calc(100% + 4px); left: -1px; right: -1px; z-index: 40; max-height: 330px; overflow-y: auto; background: var(--sf-card); border: 1px solid var(--sf-line-strong); box-shadow: var(--sf-shadow-lg); } /* Ticker, name, vehicle, AUM on one line: the four things that tell two funds with similar names apart. The name takes the slack; the rest are fixed so the AUM column lines up down the list. */ .bq-fc-result { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; width: 100%; padding: 9px 13px; border: 0; border-bottom: 1px solid var(--sf-line); background: none; font: inherit; text-align: left; cursor: pointer; } .bq-fc-result:last-child { border-bottom: 0; } .bq-fc-result:hover, .bq-fc-result.is-active { background: var(--sf-hover); } .bq-fc-result b { font-size: 13.5px; font-weight: 700; color: var(--sf-ink); } .bq-fc-result-name { font-size: 12.5px; color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bq-fc-result-veh { padding: 1px 6px; border-radius: var(--sf-radius-sm); background: var(--sf-tint-2); font-size: 10px; font-weight: 700; letter-spacing: .04em; color: var(--sf-muted); } .bq-fc-result-aum { font-size: 11.5px; color: var(--sf-faint); font-variant-numeric: tabular-nums; } /* Already in the comparison: shown, so the reader can see it is there rather than wonder why their search missed it. */ .bq-fc-result.is-in { opacity: .45; cursor: default; } .bq-fc-result-none { padding: 12px 13px; font-size: 13px; color: var(--sf-muted); } /* ===================================================================== THE VERDICT ===================================================================== */ /* Teal, because it is a FINDING about the funds, not a warning about the data -- the amber null-note above it is the warning. */ .bq-fc-verdict { display: flex; gap: 16px; align-items: flex-start; padding: 14px 18px; margin-bottom: 16px; background: var(--sf-active-soft); border: 1px solid var(--sf-active-line); border-left-width: 3px; } .bq-fc-verdict-k { flex: none; padding-top: 1px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-active-deep); white-space: nowrap; } .bq-fc-verdict p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--sf-text); } .bq-fc-verdict strong { color: var(--sf-ink); } /* ===================================================================== THE SHORT ANSWER ===================================================================== */ /* TWO PANES. The prose is the page's only running text and the only thing on it a search engine can read as an answer; the stats repeat the same findings as values, for the reader who will not read a paragraph. They are two ways of consuming one fact, not a figure and its caption, so they get two panes rather than two halves of one. The prose pane takes the room and the stats pane takes what it needs: `auto` on the second column means the numbers never stretch, and the sentences never wrap early against a column that is holding space open for them. */ .bq-fc-answer-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; margin-bottom: 18px; align-items: stretch; } .bq-fc-answer, .bq-fc-statpane { padding: 18px 20px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); } .bq-fc-statpane { display: flex; flex-direction: column; } .bq-fc-answer-h { margin: 0 0 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); } /* NO max-width HERE. A 74ch cap was wrapping the sentences at about half the pane while the rest of it sat empty, which reads as a broken column rather than as a measure. The pane is already the measure -- it is a third of the page at most -- so the text may use all of it. */ .bq-fc-answer-prose { min-width: 0; } .bq-fc-answer-prose p { margin: 0 0 9px; font-size: 14px; line-height: 1.6; color: var(--sf-text); } .bq-fc-answer-prose p:last-child { margin-bottom: 0; } .bq-fc-answer-prose strong { color: var(--sf-ink); font-weight: 700; } .bq-fc-answer-prose em { font-style: italic; } /* TWO BY TWO, NOT A COLUMN OF FOUR. Stacked, the stat pane ran to about 360px against 140px of prose beside it, and the grid stretched the prose pane to match -- leaving two thirds of it empty under three sentences. Four facts in a 2x2 puts the two panes within a line of each other, so neither is padded out to fit the other. */ .bq-fc-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 22px; margin: 0; } .bq-fc-fact { min-width: 0; } .bq-fc-fact dt { font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sf-faint); } .bq-fc-fact dd { margin: 3px 0 0; font-size: 17px; font-weight: 700; color: var(--sf-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; } .bq-fc-fact dd.bq-fc-fact-s { margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--sf-muted); letter-spacing: 0; white-space: nowrap; } /* ===================================================================== THE TOOLBAR ===================================================================== */ /* The diff toggle is the page's main control, so it sits at the left of the bar where the eye starts, not among the buttons on the right. */ .bq-fc-table-h { margin: 26px 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); } .bq-fc-toolbar { align-items: center; } /* The screener's toolbar has a search field with flex:1 that pushes this group right. This one has no search, so without an explicit push the Screen and Download buttons sit against the diff toggle on the left. */ .bq-fc-toolbar .bq-sf-toolbar-right { margin-left: auto; } .bq-fc-toggle { display: inline-flex; align-items: center; gap: 9px; padding: 8px 13px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); font-size: 13px; font-weight: 600; color: var(--sf-ink); cursor: pointer; user-select: none; } .bq-fc-toggle input { width: 15px; height: 15px; margin: 0; accent-color: var(--sf-accent); cursor: pointer; } .bq-fc-toggle-n { padding: 1px 7px; background: var(--sf-tint-2); border-radius: 999px; font-size: 11.5px; font-weight: 700; color: var(--sf-muted); font-variant-numeric: tabular-nums; } /* ===================================================================== THE TABLE ===================================================================== TRANSPOSED: a column is a FUND, a row is a METRIC. That is what makes six funds fit where six more metrics would not, and it is why the alignment rule below is per row rather than per column. NO SCROLLBOX ON DESKTOP. `table-layout: fixed` with `width: 100%` makes the table fit whatever it is given, so the wrap needs no overflow of its own -- which is what leaves the WINDOW as the scrollport and lets the header pin under the site header. The moment this box scrolls on either axis it becomes the scrollport itself and the sticky header pins to it instead. See body.bq-fc-route at the top of this file for the other half of that. */ .bq-fc-tablewrap { position: relative; background: var(--sf-card); border: 1px solid var(--sf-line-strong); overflow: visible; } .bq-fc-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13.5px; } .bq-fc-table thead th { position: sticky; /* -1px so the header's own border sits under the site header's edge rather than leaving a hairline of page between them. */ top: calc(var(--sf-header-h) - 1px); z-index: 3; background: var(--sf-card); border-bottom: 2px solid var(--sf-navy); padding: 10px 14px; text-align: center; vertical-align: bottom; } .bq-fc-th-metric { z-index: 4; width: 220px; text-align: left; border-right: 1px solid var(--sf-line-mid); font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--sf-muted); } /* THE HEADER TICKER IS A LINK AND HAS TO LOOK LIKE ONE. It was --sf-ink, the same near-black as every value under it, so the only way to find out it went anywhere was to hover it. --sf-accent-mid is the brighter of the palette's two blues and is already the site's "this is live" colour on the pager: it reads as clickable at a glance without shouting over the numbers, which are what the table is for. */ .bq-fc-th-fund .bq-sf-tk { display: block; font-size: 16px; font-weight: 700; color: var(--sf-accent-mid); text-decoration: none; letter-spacing: -.01em; } .bq-fc-th-fund .bq-sf-tk:hover { color: var(--sf-accent-deep); text-decoration: underline; } /* The same ticker, the same treatment, in the slot row above the table. It was plain text there while the header was a link, so between them neither read as reliably clickable. */ .bq-fc-slot-tk .bq-sf-tk { color: var(--sf-accent-mid); text-decoration: none; } .bq-fc-slot-tk .bq-sf-tk:hover { color: var(--sf-accent-deep); text-decoration: underline; } .bq-fc-th-name { display: block; margin-top: 2px; font-size: 11px; font-weight: 400; color: var(--sf-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* The statement band. It carries its own differing count so diff-only mode can hide a whole group without the script counting rows. */ .bq-fc-grouprow th { padding: 7px 14px; background: var(--sf-tint); border-bottom: 1px solid var(--sf-line-mid); border-top: 1px solid var(--sf-line-mid); text-align: left; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); } /* CENTRED, both text and numbers. A transposed table has one datatype per ROW and every type at once down a column, so aligning by type puts a ragged edge in every column; centring gives each column one axis and the eye something to run down. Tabular figures keep the digits in line without right alignment doing it. */ .bq-fc-td { padding: 7px 14px; border-bottom: 1px solid var(--sf-line); border-right: 1px solid var(--sf-line); color: var(--sf-ink); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bq-fc-td:last-child { border-right: 0; } .bq-fc-td.is-num { font-variant-numeric: tabular-nums; } .bq-fc-td.is-null { color: var(--sf-faint); } /* Only on metrics where better is a fact -- a lower fee, a higher return. The API decides; see _cmp_direction() there. */ .bq-fc-td.is-lead { background: rgba(21, 128, 61, .09); color: var(--sf-green); font-weight: 700; } .bq-fc-td.is-lag { background: rgba(197, 51, 31, .075); color: var(--sf-red); } .bq-fc-td-metric { position: sticky; left: 0; z-index: 2; padding: 7px 14px; background: var(--sf-card); border-bottom: 1px solid var(--sf-line); border-right: 1px solid var(--sf-line-mid); text-align: left; font-size: 13px; font-weight: 400; color: var(--sf-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bq-fc-table tbody tr:hover .bq-fc-td, .bq-fc-table tbody tr:hover .bq-fc-td-metric { background-color: var(--sf-hover); } .bq-fc-table tbody tr:hover .bq-fc-td.is-lead { background-color: rgba(21, 128, 61, .14); } .bq-fc-table tbody tr:hover .bq-fc-td.is-lag { background-color: rgba(197, 51, 31, .12); } /* DIFF-ONLY IS CSS, NOT A RE-RENDER. Every row is in the DOM whichever way the toggle sits, so switching costs nothing and a crawler reads the complete table regardless of the default. */ .bq-fc-page.is-diffonly .bq-fc-table tbody tr[data-differs="0"] { display: none; } .bq-fc-page.is-diffonly .bq-fc-grouprow[data-diffcount="0"] { display: none; } .bq-sf-asof { color: var(--sf-faint); } .bq-sf-asof strong { color: var(--sf-muted); } /* The footnote under the table uses .bq-sf-foot from screener-funds.css, which is enqueued on this route too -- nothing to add here. */ /* The small caption under each stat in the At-a-glance pane. */ .bq-fc-fact dd.bq-fc-fact-s { margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--sf-muted); letter-spacing: 0; white-space: nowrap; } /* ===================================================================== THE EMPTY STATE ===================================================================== Three bands with a rhythm, not four stacked full-width rows: a panel that holds the tool, a grid that holds the directory, a panel that holds the explanation. See the comment on the blank branch in templates/fund-comparison.php for what each one replaced. ===================================================================== */ /* THE PANEL IS FULL WIDTH; WHAT IS IN IT IS NOT. That split is the whole idea. A bordered band reaching both edges gives the page a top, and capping its contents at 620px keeps the search field the size of a search field -- a 1400px input reads as a banner with a cursor in it, and no amount of styling fixes the proportion. */ /* A REAL SHARE OF THE SCREEN, NOT A BANNER. This panel is the whole page until a fund is picked, and at 46px of padding it read as a strip of chrome above the directory rather than as the thing to use. It now claims a fixed share of the viewport and centres its content in it, so the search field lands near the middle of the screen where the eye already is. min() rather than a flat vh so a short laptop window does not push the popular-comparisons grid off the fold, and a tall desktop does not open on 900px of white. */ .bq-fc-stage { display: flex; align-items: center; justify-content: center; min-height: min(56vh, 460px); padding: 56px 24px; margin-bottom: 30px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); box-shadow: var(--sf-shadow); } .bq-fc-stage-in { width: 100%; max-width: 720px; margin: 0 auto; text-align: center; } .bq-fc-stage .bq-sf-eyebrow { margin-bottom: 10px; } .bq-fc-stage-h { margin: 0 0 11px; font-size: 36px; font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--sf-ink); text-wrap: balance; } .bq-fc-stage-sub { margin: 0 auto 26px; /* 66ch, not 56: the panel is 720px wide now and the old measure broke this sentence into three ragged centred lines inside it. Two lines. */ max-width: 66ch; font-size: 14px; line-height: 1.6; color: var(--sf-muted); } /* Same rule as .bq-sf-lede strong: the tags stay, the heavier face does not. See the note there. */ .bq-fc-stage-sub strong { color: inherit; font-weight: 400; } /* The loaded page sizes .bq-fc-add to a 232px slot because it sits in a row of slots. Here it is the only control, so it fills its measure and takes the solid border of a real field rather than a placeholder's dashed one -- and it is sized to be the obvious target in a panel this big, because a 44px field floating in 460px of white reads as an afterthought. */ .bq-fc-page.is-blank .bq-fc-add { flex: 1 1 auto; width: 100%; border-style: solid; text-align: left; } .bq-fc-page.is-blank .bq-fc-add input { padding: 18px 18px 18px 52px; font-size: 16px; } .bq-fc-page.is-blank .bq-fc-add > svg { left: 18px; width: 20px; height: 20px; } /* Appears with the first pick, never before. Centred, because the panel it sits in is. */ .bq-fc-tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 9px; margin-top: 14px; } .bq-fc-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; flex: 0 1 auto; min-width: 0; } .bq-fc-pill { display: inline-flex; align-items: baseline; gap: 7px; max-width: 100%; padding: 6px 5px 6px 11px; background: var(--sf-tint-2); border: 1px solid var(--sf-line-strong); border-radius: 999px; font-size: 12.5px; } .bq-fc-pill b { font-weight: 700; color: var(--sf-ink); } /* Four Vanguard tickers look alike, so the name is the confirmation that the right one was picked -- clipped, not omitted. */ .bq-fc-pill-n { min-width: 0; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--sf-muted); } .bq-fc-pill-x { flex: 0 0 auto; align-self: center; width: 19px; height: 19px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--sf-faint); font-size: 15px; line-height: 1; cursor: pointer; } .bq-fc-pill-x:hover { background: var(--sf-card); color: var(--sf-ink); } .bq-fc-go { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 0 0 auto; padding: 10px 18px; /* --sf-accent, NOT --sf-navy. The navy is #002a45 -- the colour of the site header and of the rule under a table head. That is structure, not action, and as a filled button it read almost black and sat on the page like a hole. The accent is the site's action blue and is what every other primary control already uses. */ border: 1px solid var(--sf-accent); border-radius: 999px; background: var(--sf-accent); color: #fff; font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; } .bq-fc-go svg { width: 15px; height: 15px; fill: currentColor; } .bq-fc-go:hover:not(:disabled) { background: var(--sf-accent-deep); border-color: var(--sf-accent-deep); } .bq-fc-go:disabled { background: var(--sf-card); border-color: var(--sf-line-strong); color: var(--sf-faint); cursor: default; } /* --------------------------------------------------------------------- THE DIRECTORY --------------------------------------------------------------------- FOUR ACROSS, AND THE LIST IS SIXTEEN LONG SO IT FILLS FOUR ROWS EXACTLY. A wrapping row of chips ends 13 + 3 at one window width and 11 + 5 at another; that ragged tail is what made sixteen useful links look like spam. A fixed track count cannot end ragged, and the count is stated in bq_fc_popular_pairs() so the two stay in step. --------------------------------------------------------------------- */ .bq-fc-popular--grid { margin-top: 0; padding-top: 0; border-top: 0; } .bq-fc-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .bq-fc-card { display: flex; flex-direction: column; gap: 3px; padding: 13px 15px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); text-decoration: none; } .bq-fc-card:hover { border-color: var(--sf-accent); background: var(--sf-hover); } .bq-fc-card-p { display: flex; align-items: baseline; gap: 6px; font-size: 14px; color: var(--sf-ink); } .bq-fc-card-p b { font-weight: 700; } /* "vs" is a joiner, not a word to read -- it stays out of the way so the two tickers read as the pair they are. */ .bq-fc-card-p i { font-style: normal; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--sf-faint); } .bq-fc-card-n { font-size: 11.5px; line-height: 1.45; color: var(--sf-muted); } /* --------------------------------------------------------------------- THE ABOUT PANEL --------------------------------------------------------------------- Label and summary on the left, the answers on the right. A lone column of questions left most of the page empty; this is a shape that uses the width and is the ordinary way an FAQ block is laid out. --------------------------------------------------------------------- */ .bq-fc-about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0; margin-top: 30px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); box-shadow: var(--sf-shadow); } .bq-fc-about-side { padding: 26px 26px 26px 28px; border-right: 1px solid var(--sf-line); background: var(--sf-tint); } .bq-fc-about-side h2 { margin: 0 0 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); } .bq-fc-about-side p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--sf-text); } .bq-fc-about-side strong { color: var(--sf-ink); font-weight: 700; } .bq-fc-about-cta { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--sf-accent); text-decoration: none; } .bq-fc-about-cta svg { width: 15px; height: 15px; fill: currentColor; } .bq-fc-about-cta:hover { text-decoration: underline; } .bq-fc-about-qa { padding: 8px 26px 10px; } /* ===================================================================== THE PROSE BLOCK ===================================================================== */ .bq-fc-explain { max-width: 68ch; margin: 30px auto 0; } .bq-fc-explain h2 { margin: 26px 0 8px; font-size: 16px; font-weight: 700; color: var(--sf-ink); letter-spacing: -.01em; } .bq-fc-explain h2:first-child { margin-top: 0; } .bq-fc-explain p { margin: 0; font-size: 14px; line-height: 1.65; color: var(--sf-text); } .bq-fc-explain strong { color: var(--sf-ink); font-weight: 700; } /* ===================================================================== QUESTIONS, AND THE CLUSTER ===================================================================== */ /* A CARD ON WHITE, NOT MORE PAGE. The answers sit on the same tinted ground as everything above them, which made them read as a continuation of the comparison rather than a section of their own. White, a border and the page's own shadow separate them without a heading having to claim the separation.

RATHER THAN OPEN PROSE. Four answers at full length is a screen of text below a table nobody scrolled for; collapsed, the four questions are a scannable list and the one that applies opens on a click. The text stays in the DOM either way, so this costs nothing at all in what a crawler reads -- and the questions themselves, which are the part with search value, are now MORE visible, not less. */ /* The per-pair questions under a loaded comparison keep their own card; the blank page's set sits inside .bq-fc-about and inherits its ground. */ .bq-fc-qa { max-width: 74ch; margin: 34px 0 0; padding: 6px 22px 8px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); box-shadow: var(--sf-shadow); } .bq-fc-qa-h { margin: 16px 0 4px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); } .bq-fc-qa-item { border-top: 1px solid var(--sf-line); } .bq-fc-qa-item:first-of-type { border-top: 0; } /* The whole row is the hit target, and the marker is ours: the native triangle sits on the text baseline and cannot be positioned. */ .bq-fc-qa-item > summary { display: flex; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer; list-style: none; } .bq-fc-qa-item > summary::-webkit-details-marker { display: none; } .bq-fc-qa-item > summary h3 { margin: 0; flex: 1 1 auto; font-size: 14.5px; font-weight: 700; color: var(--sf-ink); letter-spacing: -.01em; } .bq-fc-qa-item > summary::after { content: ""; flex: 0 0 auto; width: 8px; height: 8px; margin-right: 3px; border-right: 2px solid var(--sf-faint); border-bottom: 2px solid var(--sf-faint); transform: rotate(45deg) translate(-2px, -2px); transition: transform .18s ease; } .bq-fc-qa-item[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .bq-fc-qa-item > summary:hover h3 { color: var(--sf-accent); } .bq-fc-qa-item > summary:focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 2px; } .bq-fc-qa-a { padding: 0 0 15px; } .bq-fc-qa-a p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--sf-text); } .bq-fc-qa-a strong { color: var(--sf-ink); } .bq-fc-qa-a em { font-style: italic; } /* Lost its rule when the FAQ block beside it was rewritten -- without this the browser's default h2 renders, which is twice the size of anything else on the page and reads as the page's real heading. */ .bq-fc-popular > h2 { margin: 0 0 16px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sf-muted); } .bq-fc-popular { margin-top: 34px; padding-top: 24px; border-top: 1px solid var(--sf-line); } .bq-fc-popular-list { display: flex; flex-wrap: wrap; gap: 8px; } .bq-fc-popular-list a { padding: 7px 12px; background: var(--sf-card); border: 1px solid var(--sf-line-strong); border-radius: var(--sf-radius-sm); font-size: 12.5px; font-weight: 700; color: var(--sf-text); text-decoration: none; white-space: nowrap; } .bq-fc-popular-list a:hover { border-color: var(--sf-accent); color: var(--sf-accent); } /* The blank page is left-aligned throughout now that the centred hero is gone, so this block sits on the same edge as the search bar above it. */ .bq-fc-page.is-blank .bq-fc-popular { margin-top: 4px; } /* ===================================================================== NARROW ===================================================================== */ @media (max-width: 1100px) { .bq-fc-answer-row { grid-template-columns: minmax(0, 1fr); } .bq-fc-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 1180px) { .bq-fc-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { /* Two across, and sixteen still divides evenly. */ .bq-fc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bq-fc-about { grid-template-columns: minmax(0, 1fr); } .bq-fc-about-side { border-right: 0; border-bottom: 1px solid var(--sf-line); padding: 20px; } .bq-fc-verdict { flex-direction: column; gap: 6px; } .bq-fc-slot { flex: 1 1 180px; } .bq-fc-th-metric { width: 150px; } .bq-fc-result { grid-template-columns: 58px minmax(0, 1fr) auto; } .bq-fc-result-aum { display: none; } } @media (max-width: 700px) { /* TWO OR THREE FUNDS STILL FIT A PHONE, AND THAT IS ALMOST EVERY PAGE. The first cut sent every mobile comparison through a scrolling box, which cost the sticky header for no gain on the pages people actually open: a wrapper that scrolls on one axis is a scrollport on both -- `overflow-x: auto` forces the other axis off `visible` -- and a header inside it pins to the box rather than to the screen, which at this width means it never appears to pin at all. So the default here is the desktop arrangement at a smaller size: fixed layout, full width, nothing to scroll, header pinned to the viewport. There is no site header in the way -- it is static below 700px -- so top is 0 rather than the header's height. Four or more funds is the exception, handled below. */ .bq-fc-tablewrap { overflow: visible; } .bq-fc-table { font-size: 12.5px; } .bq-fc-table thead th { top: 0; } .bq-fc-th-metric { width: 112px; font-size: 9.5px; } .bq-fc-td, .bq-fc-td-metric { padding: 6px 8px; } .bq-fc-td { font-size: 12px; } /* THE LABEL WRAPS HERE, IT DOES NOT CLIP. `Worst Quarter (Prospectus)` is wider than any metric column a phone can spare, and nowrap without a clip painted it straight over the first fund's value. Truncating to `Worst Quarter (Prosp...` is no better on a touch screen, where there is no hover to reveal the rest -- so the row grows a second line instead. Only the rows with long labels pay for it. */ .bq-fc-td-metric { white-space: normal; overflow: visible; line-height: 1.3; font-size: 12px; } /* FOUR OR MORE. Six columns will not fit 390px at any readable size, so this is where the frozen metric column is worth more than the pinned header -- scrolling right, knowing which row you are on beats knowing which ticker is overhead. The table stays a table either way: one card per fund would defeat the only thing a comparison does, which is put the values beside each other. */ .bq-fc-page[data-funds="4"] .bq-fc-tablewrap, .bq-fc-page[data-funds="5"] .bq-fc-tablewrap, .bq-fc-page[data-funds="6"] .bq-fc-tablewrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .bq-fc-page[data-funds="4"] .bq-fc-table, .bq-fc-page[data-funds="5"] .bq-fc-table, .bq-fc-page[data-funds="6"] .bq-fc-table { table-layout: auto; min-width: 100%; } .bq-fc-page[data-funds="4"] .bq-fc-th-metric, .bq-fc-page[data-funds="5"] .bq-fc-th-metric, .bq-fc-page[data-funds="6"] .bq-fc-th-metric { position: sticky; left: 0; min-width: 118px; width: 118px; } .bq-fc-page[data-funds="4"] .bq-fc-td-metric, .bq-fc-page[data-funds="5"] .bq-fc-td-metric, .bq-fc-page[data-funds="6"] .bq-fc-td-metric { position: sticky; left: 0; z-index: 2; } .bq-fc-page[data-funds="4"] .bq-fc-td, .bq-fc-page[data-funds="5"] .bq-fc-td, .bq-fc-page[data-funds="6"] .bq-fc-td { min-width: 104px; } .bq-fc-th-name { display: none; } .bq-fc-toolbar { flex-wrap: wrap; gap: 8px; } .bq-fc-toggle { flex: 1 1 auto; justify-content: center; } .bq-fc-picker { gap: 8px; } .bq-fc-slot { flex: 1 1 100%; } .bq-fc-add { flex: 1 1 100%; } .bq-fc-answer, .bq-fc-statpane { padding: 14px 15px; } .bq-fc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .bq-fc-fact dd { font-size: 15px; } .bq-fc-stage { padding: 30px 16px 28px; } .bq-fc-stage-h { font-size: 24px; } .bq-fc-stage-sub { font-size: 13.5px; margin-bottom: 18px; } .bq-fc-page.is-blank .bq-fc-add input { padding: 13px 13px 13px 42px; font-size: 14.5px; } .bq-fc-go { flex: 1 1 100%; } .bq-fc-pill-n { max-width: 16ch; } /* One across rather than two: at 390px a two-column card is narrower than its own description, which then wraps to three lines and the grid ends taller than the single column it was avoiding. */ .bq-fc-cards { grid-template-columns: minmax(0, 1fr); } .bq-fc-about-qa { padding: 4px 16px 8px; } }