/* ================================================================== /free-youtube-comments, rebuilt on the foundation. Loaded ONLY when the 'free-youtube-comments' redesign switch is on for this viewer; the old page keeps landing-shared.css + its own stylesheet. Everything here is layout unique to this page. Anything that looks like a component (button, card, chip, table, breadcrumb, accordion, quiet link list, closing band) comes from abstracts/foundation.css and is NOT redefined here. If a rule below starts redrawing a component, it belongs upstream. Prefix note: new classes are `fyc-`. The pinned bottom bar keeps the OLD page's `fyl-` names (the v1 body was copied from the likes page) because the scroll script in the parent template's shared scripts block toggles exactly those names for both branches. ================================================================== */ /* ------------------------------------------------------------------ 1. HERO The whole copy group is the shared landing-hero device now: .fnd-lp-hero + .fnd-lp-title + .fnd-lp-sub + .fnd-lp-go, and the reassurance line is .fnd-dotline (which repaints itself on ink). Nothing is re-declared here. ------------------------------------------------------------------ */ /* The ONE page-own hero decision: this H1 is 71 characters and at the device's 20ch measure it breaks one word worse on a desktop than the 21ch it shipped with. Same specificity as the device rule, (0,2,0), and this sheet loads after the bundle, so the wider measure wins. */ .fnd .fyc-hero__title { max-width: 21ch; } /* The four figures are `.fnd-stats`. This page only decides the band they sit in: its own tint section under the hero, tighter than a full `.fnd-sec` because a proof band is a strip, not a chapter. */ .fyc-figs { padding-top: var(--fnd-s7); padding-bottom: var(--fnd-s7); } /* Links inside running text are underlined, because colour alone is not a distinction a colour-blind reader can use. They keep the paragraph's own weight: bolding them as well turns a dense paragraph into a row of shouting fragments with the actual sentence whispering between them. Same base-rule trap as the breadcrumb: `.fnd :is(p, li, ...) > a:not(.fnd-btn)` scores (0,2,2) and forces `color: inherit`, so a plainer selector here would have left every link in this paragraph the same colour as the sentence around it. (0,3,2) wins on its own terms. */ .fnd .fnd-summary-a a:not(.fnd-btn), .fnd .fyc-paid__copy .fnd-lede a:not(.fnd-btn) { color: var(--fnd-accent-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .fnd .fnd-summary-a a:not(.fnd-btn):hover, .fnd .fyc-paid__copy .fnd-lede a:not(.fnd-btn):hover { text-decoration-thickness: 2px; } /* ------------------------------------------------------------------ SECTION HEADS One shape for every section: chip, heading, one line. Nothing is centred except the hero and the closer, because a page of centred paragraphs gives the eye no left edge to run down. ------------------------------------------------------------------ */ .fyc-head { margin-bottom: var(--fnd-s6); } .fyc-head .fnd-chip { margin-bottom: var(--fnd-s3); } .fnd .fyc-head .fnd-h2 { max-width: 26ch; } .fyc-head .fnd-lede { margin-bottom: 0; } /* ------------------------------------------------------------------ 3 + 4. THE CARD SETS Same skeleton on both, so the light set and the ink set read as two answers to the same question rather than two unrelated devices. No icon discs: a round tinted glyph tile is on the named list of machine-made tells. The title is `.fnd-card-t` and the paragraph is `.fnd-card-sub`; only their spacing in THIS layout is this page's business. ------------------------------------------------------------------ */ .fyc-tile .fnd-card-body { padding: var(--fnd-s5); } .fnd .fyc-tile .fnd-card-sub { margin-top: var(--fnd-s2); } /* The warning set's accent rule above each title and the on-ink paragraph colour are the shared .fnd-cards--flagged device now (which also completes .fnd-card--ink with the sub colour). Nothing re-declared. */ /* ------------------------------------------------------------------ 5. THE ANSWER SHEET Three claims, so the shared 4-column grid is overridden to three and the left-edge rules are re-cut to match. Without the nth-child override the dividers land at the wrong columns and the set reads as broken. ------------------------------------------------------------------ */ @media (min-width: 1000px) { .fyc-answers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fyc-answers .fnd-ans:nth-child(4n+1) { padding-left: var(--fnd-s5); border-left: 1px solid var(--fnd-rule); } .fyc-answers .fnd-ans:nth-child(3n+1) { padding-left: 0; border-left: 0; } } /* .fnd-ans-a is a in the shared recipe and an

here, so the heading reset has to be undone rather than inherited. */ .fnd .fyc-answers h3.fnd-ans-a { margin-top: 0; } /* ------------------------------------------------------------------ 6. THE FOUR STEPS Entirely the shared device now: .fnd-stepgrid + .fnd-stepcell + .fnd-stepnum, which also own the title and paragraph spacing inside a cell. Nothing re-declared here. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ 7. THE COMPARISON TABLE The component does the work. The only page-level jobs: the winner tick must not read lighter than its words, and the three rival columns must be judged alike. THE COMPONENT GREYS COLUMN TWO, because it was written for one rival beside us. This table has THREE, so out of the box "Risky" under Comment-for-Comment was grey and the identical "Risky" under Engagement Pods was full ink, which reads as a judgement being passed on one of them and not the other. All three rival columns take the same faint ink; only ours is dark and heavy. --fnd-text-faint measures 5.37:1 on the card white, so this stays AA. ------------------------------------------------------------------ */ .fyc-compare .fnd-tbl .fnd-win { font-weight: 700; } .fyc-compare .fnd-tbl tbody td:not(:last-child) { color: var(--fnd-text-faint); } @media (max-width: 719px) { .fyc-compare .fnd-tbl tbody td:last-child { color: var(--fnd-text); } } /* ------------------------------------------------------------------ 8. REAL NUMBERS ONE hero figure. The creator count is the strongest true thing here, so it takes the display size and the other two support it. Giving all three the same size is what made the strongest one borrow the weakest one's doubt. ------------------------------------------------------------------ */ .fnd .fyc-numbers__h { max-width: 28ch; margin: var(--fnd-s3) 0 var(--fnd-s7); } .fyc-numbers__grid { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s7); } @media (min-width: 860px) { .fyc-numbers__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; } } /* The side column and its two supporting figures are the shared .fnd-figside + .fnd-subfig device (which also parks the .fnd-note). Only the two-column band grid above stays page-own. */ /* ------------------------------------------------------------------ 9. QUESTIONS One column of questions beside a heading block that never changes height. This is NOT the two-column accordion that was built and reverted: there, opening an answer grew one column and left a hole beside it. ------------------------------------------------------------------ */ .fyc-qa__in { display: grid; grid-template-columns: 1fr; gap: var(--fnd-s6); } @media (min-width: 900px) { .fyc-qa__in { grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: var(--fnd-s8); align-items: start; } .fyc-qa__side { position: sticky; top: var(--fnd-s7); } } .fyc-qa__side .fnd-chip { margin-bottom: var(--fnd-s3); } .fnd .fyc-qa__side .fnd-h2 { max-width: 18ch; } .fyc-qa__side .fnd-lede { margin-bottom: 0; } /* The list fills its column: the shared recipe centres itself at 840px, which is right for a full-width block and wrong beside a heading column. */ .fyc-qa__list { max-width: none; margin: 0; } /* The animated wrapper. Horizontal padding is identical open and shut: padding only the open row slides every answer sideways and reads as the page being unsure of itself. */ .fyc-qa__body { overflow: hidden; transition: height 260ms cubic-bezier(.22,1,.36,1); } .fyc-qa__body p { margin: -4px 0 26px; } /* ------------------------------------------------------------------ 10. MORE WAYS TO GROW The quiet link list. Fourteen names, no descriptions, so the rows are shorter than the shared 64px and the set does not run half a screen tall. ------------------------------------------------------------------ */ .fyc-more__list { margin-top: var(--fnd-s5); } .fyc-more__list a { min-height: 56px; } @media (min-width: 1000px) { .fyc-more__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------------ 10b. THE PAID ROUTE Entirely the shared offer panel now: .fnd-offer + .fnd-offer-copy + .fnd-offer-act + .fnd-offer-price. Nothing re-declared here; the in-lede link colour lives with the other prose-link rules above. ------------------------------------------------------------------ */ /* ------------------------------------------------------------------ THE PINNED BAR The bar and its link are the shared .fnd-pinbar / .fnd-pinbar-link device now. What stays page-own is the STATE class the old page's scroll script toggles (the script lives in the parent template's shared scripts block and serves both branches, so the class name is the old page's `fyl-` one on purpose). Same specificity as the device base, (0,1,0); this sheet loads after the bundle, so the visible state wins. ------------------------------------------------------------------ */ .fyl-sticky-cta--visible { transform: translateY(0); pointer-events: auto; } /* ------------------------------------------------------------------ 11. THE CLOSE Two groups, not five stacked items: what we are saying (the heading and the line under it) sits tight, what to do (the button and the reassurance under it) sits tight, and a real break sits between them. ------------------------------------------------------------------ */ .fnd .fyc-close h2 { max-width: 22ch; } .fnd .fyc-close p { margin-bottom: 0; } .fnd .fyc-close .fnd-closer-note { margin-top: var(--fnd-s3); } .fyc-close .fnd-ink-in > p:first-of-type { margin-top: var(--fnd-s3); } .fyc-close .fnd-btn { margin-top: var(--fnd-s7); }