/* ========================================================================== GOOGLE ADS FAQ · Q/A PLATES /doctor/gads-faq-qa/qa.css -------------------------------------------------------------------------- Applied 2026-09-21 — Option 2 of /doctor/gads-faq-module-w3r/ (approved). Linked last in google-ads.html's ; delete that one line and restore the old card markup to undo. THE FRAME IS NOT RESTYLED. The heading block, the small "FAQ" title, its 10px #DCE3EC rule, the bracket (right + bottom, open left), its corner, its width and the section height are still drawn by the FAQ's existing sheets (gads-pkg-faq/gfaq.css, gads-faq-fix-t4/fix-base.css + v1.css, gads-faq-final-r2/refine.css + card.css, gads-faq-head-r6q/faqhead.css). Only what sits inside .gfaq-scroll is new. The cards are this page's own module grammar (Why Choose Us, Our System): ring #D6E3F4 inset 1px on white card edge zone #F2F6FC the answer zone cobalt #004594 the chosen state title #0E1E35 18px / 800 the question check 18px #DFE5EF plate + 2px #3F6399 tick, for every answer list Each question is one card: a Q plate leads the title; the answer opens in the card's own tint zone, where an A plate stands directly under the Q plate. Open, the Q plate fills cobalt and the card lifts. ========================================================================== */ #gfaq.gfaq-qa{ --m-ink: #0E1E35; --m-body: #37475E; --m-num: #3F6399; --m-cobalt: #004594; --m-ring: #D6E3F4; --m-ring-2: #B7CCEA; /* the same ring, one step firmer: hover / open */ --m-zone: #F2F6FC; --m-ease: cubic-bezier(.22,.61,.36,1); --m-lift: 0 16px 30px -20px rgba(0,45,110,.38), 0 3px 8px -4px rgba(0,45,110,.12); --fm-lead: 12px; --qa-plate: 46px; --qa-gap: 18px; --qa-pad: 14px; --qa-key: 40px; } /* ── the window reaches the frame ──────────────────────────────────────────── gads-faq-fix-t4 padded the box 30px over and 20px under the window, so a scrolled card was cut in mid-air and a gradient was laid over the cut. The padding moves INTO the window: same box, same outer size, cards at rest in the same place — a card scrolling out now passes under the rule and the bracket itself, and the gradient is gone. */ #gfaq.gfaq-qa .gfaq-box{ padding: 0; } #gfaq.gfaq-qa .gfaq-box::after{ display: none; } #gfaq.gfaq-qa .gfaq-scroll{ box-sizing: border-box; height: calc(var(--fx-scroll-h) + var(--fx-pad-top) + var(--fx-pad)); padding: var(--fx-pad-top) var(--fx-pad) var(--fx-pad); } /* ── the card ─────────────────────────────────────────────────────────────── */ #gfaq.gfaq-qa .qa-item{ margin: 0 0 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--m-ring); transition: box-shadow .35s var(--m-ease); } #gfaq.gfaq-qa .qa-item:last-child{ margin-bottom: 0; } #gfaq.gfaq-qa .qa-item:hover{ box-shadow: inset 0 0 0 1px var(--m-ring-2); } #gfaq.gfaq-qa .qa-item.is-open{ box-shadow: inset 0 0 0 1px var(--m-ring-2), var(--m-lift); } /* the question — a real button, stripped of the UA's chrome */ #gfaq.gfaq-qa .qa-q{ appearance: none; -webkit-appearance: none; display: grid; width: 100%; margin: 0; background: none; border: 0; border-radius: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; grid-template-columns: var(--qa-plate) minmax(0,1fr) var(--qa-key); column-gap: var(--qa-gap); align-items: center; padding: 13px 16px 13px var(--qa-pad); } #gfaq.gfaq-qa .qa-q:focus-visible{ outline: 2px solid var(--m-cobalt); outline-offset: -2px; } #gfaq.gfaq-qa .qa-plate{ width: var(--qa-plate); height: var(--qa-plate); display: grid; place-items: center; background: var(--m-zone); box-shadow: inset 0 0 0 1px var(--m-ring); font: 800 13.5px/1 var(--sans); letter-spacing: .01em; color: var(--m-num); transition: background-color .3s var(--m-ease), color .3s, box-shadow .3s; } #gfaq.gfaq-qa .is-open .qa-q .qa-plate{ background: var(--m-cobalt); color: #fff; box-shadow: none; } #gfaq.gfaq-qa .qa-t{ font: 800 18px/1.34 var(--sans); letter-spacing: -.022em; color: var(--m-ink); transition: color .25s; } #gfaq.gfaq-qa .qa-q:hover .qa-t, #gfaq.gfaq-qa .is-open .qa-t{ color: var(--m-cobalt); } /* the key: a square plate, two 2px bars, one centre — plus, then minus */ #gfaq.gfaq-qa .qa-key{ position: relative; display: block; width: var(--qa-key); height: var(--qa-key); background: var(--m-zone); transition: background-color .3s var(--m-ease); } #gfaq.gfaq-qa .qa-key::before, #gfaq.gfaq-qa .qa-key::after{ content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--m-num); transition: transform .36s var(--m-ease), background-color .3s; } #gfaq.gfaq-qa .qa-key::after{ transform: rotate(90deg); } #gfaq.gfaq-qa .is-open .qa-key{ background: #DCE7F6; } #gfaq.gfaq-qa .is-open .qa-key::before, #gfaq.gfaq-qa .is-open .qa-key::after{ background: var(--m-cobalt); } #gfaq.gfaq-qa .is-open .qa-key::after{ transform: rotate(90deg) scaleX(0); } /* ── the answer: 0fr -> 1fr, its natural height, never a guess ────────────── */ #gfaq.gfaq-qa .qa-a{ display: grid; grid-template-rows: 0fr; transition: grid-template-rows .42s var(--m-ease); margin: 0 1px 1px; /* 1px in, so the card's ring stays whole */ background: var(--m-zone); } #gfaq.gfaq-qa .is-open > .qa-a{ grid-template-rows: 1fr; } #gfaq.gfaq-qa .qa-clip{ min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s linear .42s; } #gfaq.gfaq-qa .is-open .qa-clip{ visibility: visible; transition-delay: 0s; } #gfaq.gfaq-qa .qa-in{ display: grid; grid-template-columns: var(--qa-plate) minmax(0,1fr); column-gap: var(--qa-gap); align-items: start; padding: 18px 72px 24px calc(var(--qa-pad) - 1px); } #gfaq.gfaq-qa .qa-plate-a{ background: #fff; color: var(--m-cobalt); } #gfaq.gfaq-qa .qa-tx{ max-width: 96ch; padding-top: 9.5px; /* first line centred on the A plate */ font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--m-body); } /* the answer's words — verbatim — set like the page's cards */ #gfaq.gfaq-qa .qa-tx p{ margin: 0 0 .7em; } #gfaq.gfaq-qa .qa-tx > :last-child{ margin-bottom: 0; } #gfaq.gfaq-qa .qa-tx b{ font-weight: 750; color: var(--m-ink); } #gfaq.gfaq-qa .qa-tx ul{ list-style: none; margin: .1em 0 .8em; padding: 0; } #gfaq.gfaq-qa .qa-tx li{ position: relative; margin: 0 0 .55em; padding-left: 30px; } #gfaq.gfaq-qa .qa-tx li:last-child{ margin-bottom: 0; } /* the page's own check: an 18px plate and a 2px tick, centred on the line */ #gfaq.gfaq-qa .qa-tx li::before{ content: ""; position: absolute; left: 0; top: calc(.5lh - 9px); width: 18px; height: 18px; background: #DFE5EF; } #gfaq.gfaq-qa .qa-tx li::after{ content: ""; position: absolute; left: 6.5px; top: calc(.5lh - 6.5px); width: 4.5px; height: 9px; border-right: 2px solid var(--m-num); border-bottom: 2px solid var(--m-num); transform: rotate(45deg); } /* ── phones: the plate and the key share the top line, the question runs the card's full width under them ─────────────────────────────────────────── */ @media (max-width: 640px){ #gfaq.gfaq-qa{ --qa-plate: 36px; --qa-gap: 12px; --qa-pad: 12px; --qa-key: 34px; } #gfaq.gfaq-qa .qa-item{ margin-bottom: 8px; } #gfaq.gfaq-qa .qa-q{ grid-template-areas: "p . k" "t t t"; row-gap: 10px; padding: 12px 12px 14px var(--qa-pad); } #gfaq.gfaq-qa .qa-q .qa-plate{ grid-area: p; font-size: 12px; } #gfaq.gfaq-qa .qa-t{ grid-area: t; font-size: 16.5px; line-height: 1.34; } #gfaq.gfaq-qa .qa-key{ grid-area: k; } #gfaq.gfaq-qa .qa-in{ padding: 14px 14px 18px calc(var(--qa-pad) - 1px); } #gfaq.gfaq-qa .qa-plate-a{ font-size: 12px; } #gfaq.gfaq-qa .qa-tx{ padding-top: 5px; font-size: 15.5px; line-height: 1.62; } } @media (prefers-reduced-motion: reduce){ #gfaq.gfaq-qa *, #gfaq.gfaq-qa *::before, #gfaq.gfaq-qa *::after{ transition: none !important; } }