/* ========================================================================== FAQ · TWO PRECISION REFINEMENTS /doctor/gads-faq-final-r2/refine.css -------------------------------------------------------------------------- Loads after gads-faq-fix-t4/fix-base.css and gads-faq-fix-t4/v1.css — the shortlisted design. Nothing here changes a colour, the section ground, the content, the numbering, the type, the mark, the accordion or the layout. Two things only: 1 · the heading and its rule, rebuilt as one responsive component 2 · the question and its answer, made one geometry Plus one repair to my own layering, noted at the end. ========================================================================== */ /* ══════════════════════════════════════════════════════════════════════════ 1 · THE HEADING AND ITS RULE -------------------------------------------------------------------------- WHAT IS WRONG. gfaq.css draws the rule as the box's top border and hides the part in front of the word by pulling the box up under an opaque plate: `.gfaq-box{ margin-top: -30px }`. 30 is a number measured once, against a 28px heading whose line box is 33.6px. It is right at exactly one heading size and wrong everywhere else. Measured on the live page: 1440 heading 326.1 -> 359.7, rule band 329.7 -> 339.7 the rule's centre is 5.1px ABOVE the cap centre — it grazes the tops of the letters instead of crossing their middle 390 heading 254.9 -> 275.3, rule band 246.9 -> 256.9 the rule is ENTIRELY ABOVE the heading And because the word is masking a border rather than sitting beside a rule, the rule does pass behind it, and it does begin at the box's left edge — both of which the brief rules out. THE FIX. The heading becomes a flex row and the rule becomes a real element in it, so the three parts are laid out rather than positioned: [ the text, its own width ] [ gap ] [ the rule, flex: 1 ] Nothing is measured against the word "FAQ". The first item is the text node itself, so it is exactly as wide as whatever the heading says; the gap is one value; the rule takes what is left. "Why Us", "Our Process" and "Client Proof" all land correctly with no other change. THE VERTICAL, and the thing that is easy to get wrong. The rule has to cross the OPTICAL centre of the letters — the middle of the cap band, from the top of the F to the baseline — not the middle of the line box. Those two are only the same when the font's own box happens to match the line-height, and MEASURING IT is the only way to know: -apple-system / SF ascent .956em, descent .244em = 1.200em the heading's line-height 1.2 They match, so `align-items: center` puts the rule 0.13px off the cap centre at 1440 and 0.07px off at 390 — and no nudge is wanted at all. A first pass here lifted it by .11em on the assumption that the font box was 1.0em, which pushed the rule 3.6px above the caps; _qa.py measures the cap band off the glyphs with canvas metrics and caught it. The lift stays as a token, at zero, so a future family with a different box has one number to set rather than a rule to rewrite. ══════════════════════════════════════════════════════════════════════════ */ #gfaq{ /* gfaq.css's own two values for the heading, restated so the rule below can be derived from them instead of guessed against them */ --fx-h-fs: clamp(19px, 2.4vw, 28px); --fx-h-lh: 1.2; /* how far the cap centre sits ABOVE the line-box centre, in em. Zero for this family — measured, not assumed. See the note above. */ --fx-h-optical: 0; /* the one intentional gap between the word and the rule */ --fx-h-gap: clamp(12px, 1.3vw, 18px); /* the line box, and the lift, derived — never typed as a pixel offset */ --fx-h-box: calc(var(--fx-h-fs) * var(--fx-h-lh)); --fx-h-lift: calc(var(--fx-h-optical) * 2 * var(--fx-h-fs)); } #gfaq .gfaq-title{ display: flex; align-items: center; gap: var(--fx-h-gap); width: 100%; margin: 0; padding: 0; /* the plate is gone: the word no longer masks anything, so it needs no ground of its own and can never be caught out by the section's */ background: none; font-size: var(--fx-h-fs); line-height: var(--fx-h-lh); } /* THE RULE. Same weight and same colour as the frame it continues into, because it IS the frame's top edge — the box no longer draws one. */ #gfaq .gfaq-title::after{ content: ""; flex: 1 1 0; min-width: 0; height: var(--fx-frame-w); background: var(--fx-frame); border-top-right-radius: var(--fx-frame-r); margin-top: calc(var(--fx-h-lift) * -1); } /* the box's top edge is now that rule, so the box gives up its own and is raised until the two meet. The expression is the geometry written out: the rule's bottom sits at (lineBox + ruleHeight - lift) / 2 from the top of the heading, and the box's top has to be there. */ #gfaq .gfaq-box{ border-top-width: 0; border-top-right-radius: 0; margin-top: calc((var(--fx-frame-w) - var(--fx-h-lift) - var(--fx-h-box)) / 2); } /* ══════════════════════════════════════════════════════════════════════════ 2 · THE QUESTION AND ITS ANSWER, ONE GEOMETRY -------------------------------------------------------------------------- WHAT IS WRONG. Measured on the live page, on the open card: 1440 question text 243 -> 1197 answer text 243 -> 1237 390 question text 87 -> 304 answer text 87 -> 338 The left edges already agree. The right edges do not, and they are out by exactly the width of the reserve the question keeps for the +/- mark — 40px, 34 on a phone. So the answer runs wider than the question it belongs to, on every card, at every width. That is the whole of the "not perfectly aligned" reading: one block is 40px longer than the other. THE FIX is to stop writing that reserve twice. It becomes one value, and the question and the answer both hold to it, so the two blocks are the same column: same left edge, same right edge, same width, at any size. ══════════════════════════════════════════════════════════════════════════ */ #gfaq{ --fx-rail: 40px; /* the reserve the +/- mark stands in */ } #gfaq .gfaq-q { padding-right: var(--fx-rail); } #gfaq .gfaq-ai-in { padding-right: var(--fx-rail); } /* THE FIRST LINE. The answer opened 6px under the top of the A square, so its first line sat 2.5px above that square's letter — close enough to read as a mistake rather than as a decision. The A square is 40px and its letter is on its centre; the answer's first line is put on the same centre, so the two start on one horizontal. 8px is the measured value: the A is on the 40px square's centre, and a 14px line at 1.65 puts its own cap centre 12px below the top of its line box. */ #gfaq .gfaq-body{ padding-top: 8px; } /* THE CORNERS. Restrained, and the same rule everywhere: the card comes down from 12px to 8, and the Q./A. rail from 6 to 4 — the card's radius less its 12px padding is 8-4, so the rail's curve is concentric with the card's, which is what stops a rounded thing inside a rounded thing from reading as a second, floating box. The rail keeps its square join, so the Q. half and the A. half are still one continuous shape. */ #gfaq{ --fx-card-r: 8px; --fx-badge-r: 4px; } /* ══════════════════════════════════════════════════════════════════════════ 3 · ONE LAYERING REPAIR -------------------------------------------------------------------------- Not a design change — a bug in how these files stack. fix-base.css sets `--fx-frame-w: 7px` inside its 640px block; v1.css then sets `--fx-frame-w: 10px` with no media query at all. A media query adds no specificity, and v1.css is the later file, so the unconditional 10px was winning on phones too. gfaq.css's own phone rule has always been 7px, and at 7px the rule is in proportion to a 17px heading where 10px is not. Restated here, in the last file, where it wins. ══════════════════════════════════════════════════════════════════════════ */ @media (max-width: 640px){ #gfaq{ --fx-frame-w: 7px; /* gfaq.css's own phone values, restated so the derivations above use the real numbers rather than the desktop clamp */ --fx-h-fs: 17px; --fx-h-gap: 12px; --fx-rail: 34px; } }