/* ========================================================================== NEXT GEO — page stylesheet for the YEME İÇME / FOOD AND BEVERAGE PAIR TR 23228 /sektorler/yeme-icme/ EN 25753 /en/sectors/food-and-beverage/ One authored sheet for both; ng-page-apply.php --css-from copies it to food-and-beverage.css so the pair cannot drift. (An earlier brief listed the English page as 25682. That id does not exist in this database. Polylang resolves the translation of 23228 to 25753, which is what tranche2.json and variance-plan.json carry and what /en/sectors/food-and-beverage/ serves. Applied by slug, so nothing depended on the number — but the next person reading that brief should know. This is the third pass to record it.) Loads last: ng-foundation → ng-components → ng-mobile → ng-shared → THIS FILE so a rule here at equal specificity beats all four. Tokens only, no !important, no literal colours. Every heading class is written with the doubled-class idiom so it beats the theme's `h?:not(:first-child){margin-top:50px}` at (0,2,2) — PATTERNS.md §11. --------------------------------------------------------------------------- RE-COMPOSED 2026-08-18. ASSIGNED AND UNCHANGED: opening C-FIGURE · dark CLOSE · 5 sections. WHY THIS PASS EXISTS. The variance review found bankacilik, perakende and this page to be ONE COMPOSITION BUILT THREE TIMES. All three C-FIGURE, all three G-G-M-G-D, all three opening `ÖRNEK ÇIKTI ·` → one full-width white .ng-out panel → caption → sector pill → h1 → lede → hub question → 2 CTAs → 3-number proof strip, with a mist band at ~45% of page height on every one. Only the artefact inside the panel differed; first-screen RMS luminance difference 0.066–0.072 against a group median of 0.101. The archetype is not what changed — the artefact still comes before the words. Everything the archetype leaves free has: THE FIGURE IS NO LONGER A CENTRED FULL-WIDTH PANEL. It is the client's own 780x540 artefact SET BESIDE ITS KEY FIGURES: picture at 58% on the left, a six-row key/value readout at 42% on the right. §2 below. THE BAND IT SITS ON IS MIST, NOT GROUND. bankacilik and perakende both open on the page ground; this one opens on the sunken surface with the picture as the raised plate on top of it. The two surface roles the system already has, in the other order — the same inversion PATTERNS.md §16 records for .ng-close__rail on a NONE-MIST page. WHAT LANDS SECOND IS A COMPARISON. bankacilik puts a two-column definition list of prose there; perakende a ranked table of candidate stores on the mist. This page puts a criterion-by-criterion comparison of the two service models on the ground — because masa servisi against paket servis IS this sector's question, and a comparison is the shape that answers it. THE BAND RHYTHM IS MIST-GROUND-MIST-GROUND-DARK, against G-G-M-G-D on bankacilik and G-M-G-G-D on perakende. Both tinted bands here hold white chrome — the picture frames — which is what ng-shared §1 says the sunken role is for. WHAT WENT AND WHAT STAYED. The hand-built .ng-band chart is gone: its three order-share rows are now three rows of the key/value strip, which is more honest anyway, because a proportional bar chart drawn in DOM next to a supplied map is two visual languages for one fact. The hand-built ranked .ng-net scorecard is also gone — the client's own artefact for that same analysis title (a candidate point scored on a map) now carries the claim, and HANDOFF records a set of hand-built product frames deleted this week for looking like real output. Every figure those two panels published is either still on the page or is arithmetic from two rows that are (%95 = 68 + 27, stated in the strip's foot line). The three client paragraphs, the three analysis titles, the hub question and the client's closing line are verbatim and untouched. THE PICTURES ARE MOCKUPS AND ARE LABELLED AS SUCH, three times each: the ÖRNEK / SAMPLE chip inside the frame (ng-shared §17a), the word Örnek / Sample opening the figcaption, "temsilîdir" / "illustrative" closing it, and the client guide's own "gerçek müşteri verisi değildir" / "not real customer data" in the note under the masthead plate. TURKISH IMAGES ON THE TURKISH PAGE ONLY. Each asset has its kicker and its 28px title burnt into the raster in Turkish. The English page keeps the same sections in the same order at the same widths and fills each frame with ng-shared §17b's .ng-figband__frame--text instead — the artefact's own caption line and its figures as a §15c .ng-facts strip. A visitor switching language lands on the same page, not a different one. NAME CHECK, the way the .ng-card collision taught this project to: .ng-yfig, .ng-yrow, .ng-vs and .ng-vs-band appear in no other stylesheet on this site (ng-foundation, ng-components, ng-mobile, ng-sections, ng-shared, the theme and all 40 page sheets grepped with a fixed string). .ng-masthead--fig IS reused — bankacilik.css and perakende.css each declare it privately with their own bodies, and two page sheets are never in the same cascade, so the three cannot collide. It stays the shared vocabulary for "this masthead opens with a figure". NOTHING GENERIC IS RE-AUTHORED HERE. The frames, the chip, the captions and the English stand-ins are ng-shared §17; the comparison is §15b's .ng-dtable; the key/value readout is §14's .ng-env; the English plates' figure strips are §15c's .ng-facts. .ng-steps, .ng-pills, .ng-actions, .ng-note, .ng-cta and the masthead itself are used unchanged. --------------------------------------------------------------------------- WHAT WAS ACTUALLY WRONG WITH THE PRE-REDESIGN PAGE, measured in tranche 2 and kept here because it is why the page has content at all: VISIBLE h1 0 at every width (one hidden: "Yeme İçme") rendered words 266 @1440 (post_content: 53 — the thinnest page on the site; the rest lived inside Elementor widget settings) dead air 4.6% @1440 in one 120px band, 5.6% @1024 tap targets under 44px 5 at 1024, 768 AND 390 — three a.icon-box-info at 109x17px, ALL THREE labelled "Daha Fazla Bilgi", plus two 27px-tall theme breadcrumbs _elementor_data 123,044 bytes `_dp_original` is 23121: the page was DUPLICATED from another sector page and still carried three `svg_icon` blobs of 26–40 KB holding base64 PNGs that never painted, a 391px `spacer` in an empty column, and on every icon box a `bg_image` pointing at demo.artureanec.com — a hotlink to the theme vendor's demo server, on a live client page. NO CLIENT NAME AND NO LOGO ANYWHERE ON THIS PAGE. Pairing a named brand with a named sector on an indexed page is the owner's decision and is still deferred. It matters more here than on most leaves: a restaurant brand next to the words "paket servis alanı" reads as a disclosure about that brand's operations. ========================================================================== */ /* ========================================================================== 1. THE C-FIGURE MASTHEAD, ON THE SUNKEN SURFACE ========================================================================== A MODIFIER on ng-shared §4's masthead, the same way §15a's --stack and §16a's --num are: same section padding, same crumbs, same eyebrow pill, same proof strip, same hit areas. What changes is that there is no .ng-masthead__inner grid at all — C-FIGURE's first screen is a figure with words under it, not two columns of anything. THE BAND IS THE SUNKEN SURFACE AND THE PICTURE IS THE RAISED ONE. ng-shared §4 sets `.ng-v2 .ng-masthead{ background:var(--ng-ground) }` and §1 sets `.ng-v2 .ng-section--sunken{ background:var(--ng-surface-sunken) }` — both (0,2,0), and §4 loads later, so the masthead wins and the modifier is inert on its own. (0,3,0) here takes it back. The same two lines the optimizasyon sheet writes, for the same reason and with the same credit. NO TOP HAIRLINE. §1 draws `border-block`, which on the first section of a page paints a rule immediately under the site header where it reads as a stray line rather than as the edge of a plate. The bottom one stays: it is the tonal boundary against the ground band that follows. */ .ng-v2 .ng-masthead--fig.ng-section--sunken{ background:var(--ng-surface-sunken); border-top:0; } .ng-v2 .ng-masthead--fig .ng-yfig__kick{ margin:16px 0 14px; } /* The illustrative note belongs to the whole plate, so it sits under both columns and before the rule that separates artefact from page. 96ch because it names four data sources and a 70ch measure broke it into five short lines. */ .ng-v2 .ng-masthead--fig .ng-yfig__note{ margin:20px 0 0; max-width:96ch; } /* The hairline is the whole composition in one declaration: everything above it is the artefact, everything below it is the page. Without it the h1 read as a caption belonging to the figure. */ .ng-v2 .ng-masthead--fig .ng-yfig__copy{ margin-top:32px; padding-top:28px; border-top:1px solid var(--ng-hairline); } /* THE HEADLINE IS SMALLER HERE THAN ON A SPLIT MASTHEAD, not larger. B-STACK raises its h1 because the headline IS the first screen; on C-FIGURE the figure is, and ARCHETYPES.md says the h1 "follows underneath at normal size". So it comes down one step from ng-shared §4's 3.5rem ceiling to 2.9rem. The 1.95rem floor = 31.2px, which keeps it over the 24px line that makes .ng-hl (accent-display) legal — PATTERNS.md rule 5. 24ch, not §4's 18ch. The 18ch ceiling exists so a split headline cannot run under the aside; there is no aside. This h1 is 56 characters in Turkish and 59 in English, and at 18ch it broke into five short lines. */ .ng-v2 .ng-masthead--fig .ng-masthead__title.ng-masthead__title{ font-size:clamp(1.95rem, 4.2vw, 2.9rem); line-height:1.1; letter-spacing:-0.026em; max-width:24ch; } .ng-v2 .ng-masthead--fig .ng-masthead__lede{ max-width:62ch; } /* ========================================================================== 2. THE PICTURE BESIDE ITS KEY FIGURES (.ng-yfig__plate, .ng-yfig__keys) ========================================================================== This is the one thing that had to change about the opening, and it is worth saying why in more than a sentence. All three C-FIGURE sector pages put a single centred artefact across the full 1120px container with a caption underneath, which is the composition ng-shared §17a gives you for free. Two of them still do. Here the artefact takes 58% and the figures it produced sit beside it at 42%, so the first screen reads as one object — a picture and its readout — rather than as a slab with a caption. 50/50, AND IT USED TO BE 58/42 (revision pass, 2026-08-20). The old split was measured against a DRAWING: the raster carried three ring labels and a "10 dk" pill that stopped being legible below about 600px of rendered width, so the picture took the larger column and the readout took what was left. That drawing is gone. The frame now holds abstract artwork with no type in it at all, so nothing inside it has a minimum legible size any more, and a 58/42 split between a picture and the figures it stands beside is a ratio with nothing left to justify it — one side arbitrarily large, the other arbitrarily small, which is the defect this pass was called to remove. One column each: the 1120px container is 1072px inside its padding, so at (1072 − 44)/2 the picture and the readout are 514px apart-and-equal. The readout GAINS 80px by the change and still holds the longest key ("Alandaki rakip yeme-içme noktası", "Competing outlets in the area") on one line beside its value; the picture loses detail it no longer has. THE PICTURE COMES FIRST AT EVERY WIDTH. §17a stacks copy-first below 960 and is right to: a heading tells a reader what they are about to look at. There is no heading in this column — it is a key/value readout, and a readout before the thing it reads is backwards. One rule, all widths, rather than a media query, so the DOM order and the paint order agree. align-items:start rather than §17a's center: the strip's label has to line up with the top edge of the frame, and the figure column is taller than the strip because it carries the figcaption. */ .ng-v2 .ng-figband.ng-yfig__plate{ align-items:start; } .ng-v2 .ng-yfig__plate > .ng-figband__fig{ order:-1; } @media (min-width:960px){ .ng-v2 .ng-figband.ng-yfig__plate{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:44px; } } /* THE READOUT SITS DIRECTLY ON THE MIST, WITH NO PLATE OF ITS OWN. A second white plate beside the first would be a two-up pair, which is the shape /sektorler/perakende/ opens with — and the contrast between a framed picture and bare ruled rows is exactly what makes this read as "an artefact and its figures" rather than as "two artefacts". */ .ng-v2 .ng-yfig__keylabel{ margin:0 0 4px; } /* §14's .ng-env is the promoted key/value list: rows down a narrow column, key left at 14px muted, value right at 16px display with tabular numerals. Only the vertical rhythm is this page's, because six rows beside a 450px picture want a little more air than four rows in a panel. */ .ng-v2 .ng-yfig__env .ng-env__row{ padding:13px 0; gap:20px; } .ng-v2 .ng-yfig__env .ng-env__v{ font-size:19px; } .ng-v2 .ng-yfig__keyfoot{ margin:18px 0 0; font-size:14px; line-height:1.6; color:var(--ng-muted); max-width:46ch; } /* THE ENGLISH STAND-IN. §17b holds the frame, the chip and the caption and fills the box with sentences instead of a Turkish raster. Its .ng-figband__sub already clears 26px for the chip; a second paragraph under the first only needs its own gap. Deliberately NOT padded out to the 540px of the picture it stands in for — a plate stretched to match a photograph is dead mist, and ng-page-check counts it. */ .ng-v2 .ng-yfig__sub2{ margin-top:14px; color:var(--ng-muted); } /* ========================================================================== 3. THE HUB QUESTION, AS A RAIL UNDER THE LEDE (.ng-yfig__ask) ========================================================================== PATTERNS.md's first leaf rule: answer the hub's question out loud, in the first viewport. /sektorler/ prints "Yeni şube nereye, paket servis alanı nereye kadar?" on the Yeme İçme card and somebody clicked because of that sentence. IT USED TO SPELL OUT ITS TWO HALVES HERE, in a ŞUBE / ALAN definition list. Those two halves are now the two columns of the comparison table in section 20, where they are answered rather than announced, so the rail is the question and one line pointing at the table. Saying it twice on one screen was the redundancy that made the masthead long. 44/56 at >=860. The question is 50 characters in Turkish and 71 in English; at 50/50 the English quote broke into four lines beside a two-line note. */ .ng-v2 .ng-yfig__ask{ margin:28px 0 0; padding-top:26px; border-top:1px solid var(--ng-hairline); display:grid; grid-template-columns:minmax(0,1fr); gap:18px; } @media (min-width:860px){ .ng-v2 .ng-yfig__ask{ grid-template-columns:minmax(0,44fr) minmax(0,56fr); column-gap:44px; align-items:center; } } .ng-v2 .ng-yfig__askq{ min-width:0; } .ng-v2 .ng-yfig__asklabel{ margin:0 0 12px; } /* margin:0 at (0,2,0) beats the theme's `.content-wrapper blockquote` at (0,1,1); the ::before/::after reset is there because Neuros hangs a decorative glyph off blockquotes in some contexts and a stray “ in front of the hub's own words would read as scare quotes. Same defence ng-shared §13a already writes for .ng-aside__quote. */ .ng-v2 .ng-yfig__quote{ margin:0; padding:2px 0 2px 16px; border-left:3px solid var(--ng-accent); font-family:var(--ng-font-display); font-weight:600; font-size:19px; line-height:1.42; color:var(--ng-ink); } .ng-v2 .ng-yfig__quote::before, .ng-v2 .ng-yfig__quote::after{ content:none; } .ng-v2 .ng-yfig__askbody{ margin:0; font-size:15px; line-height:1.6; color:var(--ng-muted); max-width:58ch; } /* ========================================================================== 4. SECTION 20 — THE TWO-COLUMN COMPARISON (.ng-vs) ========================================================================== Built on ng-shared §15b's .ng-dtable, NOT as a nineteenth hand-rolled table. §15b already carries the doubled-class defence against the theme's `table:not(:first-child){margin-top:2rem}` pair — the defect the variance report found on four live pages, 64px of unauthored space each, invisible to ng-page-check because 32px is under its 120px dead-air floor — already resets the theme's navy cell borders, and is already screenshot-verified at four widths. WHAT THIS PAGE ADDS, AND WHY EACH PIECE. §15b is written for a RANKED table: row header in the display face as the row's subject, cells muted, numbers right-aligned. A comparison inverts that. Here the row header is the CRITERION — a label — and the two cells are the content, so the header goes muted at the reading floor and the cells take the ink. That inversion is also what stops this reading like the ranked candidate table on /sektorler/perakende/ at a glance. ONE VERTICAL RULE, BETWEEN THE TWO MODEL COLUMNS. It is the "versus" and it is the only thing in the section that draws the comparison as a shape. A second rule between the criterion column and the first model would turn a comparison into a spreadsheet. NO `table-layout:fixed`, DELIBERATELY. PATTERNS.md records optimizasyon's three-column comparison breaking a Turkish compound mid-stem at 390 under a fixed layout. Auto layout sizes each column to its longest word instead: the criterion labels are single words, the widest cell word in either language is twelve characters, and the whole table measures about 325px inside a 342px phone container. The percentages below apply where there is room and are ignored where there is not, which is the behaviour that keeps 390 readable. ========================================================================== */ /* The masthead's ghost CTA jumps here; the theme header would otherwise sit over the section's eyebrow. Same offset the sibling sheets use. */ @media (max-width:1364px){ .ng-v2 .ng-vs-band, .ng-v2 .ng-vals, .ng-v2 .ng-figband__fig[id]{ scroll-margin-top:84px; } } .ng-v2 .ng-vs thead th:first-child{ width:20%; } .ng-v2 .ng-vs thead th:nth-child(2){ width:40%; } .ng-v2 .ng-vs thead th:nth-child(3){ width:40%; } /* The two model names are the loudest thing in the section, because the comparison is between them and not between the criteria. 20px display in the ink, with the qualifier under it as an 11px tracked label — 11 x .1em is a ratio of .10, over ng-page-check's measured 0.08 threshold, so it takes the label exception rather than the 14px body floor. Accent on white is 5.64:1. */ .ng-v2 .ng-vs thead th{ padding-bottom:16px; vertical-align:bottom; } .ng-v2 .ng-vs__col{ display:block; font-family:var(--ng-font-display); font-weight:700; font-size:20px; line-height:1.2; letter-spacing:-0.012em; color:var(--ng-ink); } .ng-v2 .ng-vs__sub{ display:block; margin-top:5px; font-family:var(--ng-font-label); font-weight:600; font-size:11px; line-height:1.35; letter-spacing:.1em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-accent); } /* THE CRITERION COLUMN IS A RAIL OF LABELS, not a column of subjects. 14px is the body floor exactly, so it needs no tracking to qualify — which is the right call for a word a reader actually reads rather than glances at. */ .ng-v2 .ng-vs tbody th{ font-family:var(--ng-font-label); font-weight:600; font-size:14px; line-height:1.4; letter-spacing:.02em; color:var(--ng-muted); vertical-align:top; padding-top:16px; } .ng-v2 .ng-vs tbody td{ font-size:16px; line-height:1.45; color:var(--ng-ink); vertical-align:top; padding-top:16px; padding-bottom:16px; } /* The versus rule. */ .ng-v2 .ng-vs th:nth-child(3), .ng-v2 .ng-vs td:nth-child(3){ border-left:1px solid var(--ng-hairline); padding-left:20px; } /* The last row names the two Next Geo solutions, which is where the comparison lands. Set as names, in the display face — neither is a link: both pages are linked from section 30 on the client's own paragraph, and a second link to one URL under a different label is the "14 identical links" defect wearing a different hat. */ .ng-v2 .ng-vs tbody tr.is-last td{ font-family:var(--ng-font-display); font-weight:600; } .ng-v2 .ng-vs tfoot td{ padding-top:16px; line-height:1.6; } .ng-v2 .ng-vs__note{ margin-top:22px; max-width:88ch; } /* ========================================================================== 5. SECTION 30 — THE THREE TITLES, EACH WITH ITS OWN ARTEFACT (.ng-yrow) ========================================================================== The band is sunken and the frames are white: mist holds white chrome, which is exactly what these white-ground assets are. The layout is ng-shared §17a (.ng-figband--split / --flip). Only the copy column's own type is here, because what goes beside a figure is a property of the page and not of the primitive. THE HEADING IS THE QUESTION THAT TITLE ANSWERS, never the title itself. Each asset carries its own 28px title; an h3 repeating it twenty pixels away is a stutter and the image brief is explicit about it. The title is still on the page as text, once per row, in the figcaption where it reads as a sample's subject line — which also keeps the sweep's values_on_hub check satisfied, since that check scans visible text and would not see an alt attribute. THE MIDDLE ROW HAS NO PICTURE AND THE PAGE SAYS SO. Its artefact is the map at the top of the page, so its frame holds a pointer to it instead of a third asset. There is no fourth image and none was invented to even out the rhythm. */ .ng-v2 .ng-yrow{ margin-top:44px; } @media (min-width:960px){ .ng-v2 .ng-yrow{ margin-top:60px; } } /* 12px at .08em is the tracked-label threshold exactly (ratio .08), which is the measurement ng-page-check makes rather than an allowlist. */ .ng-v2 .ng-yrow__meta{ margin:0 0 12px; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.5; letter-spacing:.08em; text-transform:none; /* authored pre-uppercased: i -> İ */ color:var(--ng-accent); } /* Doubled class = §11's theme-margin defence. */ .ng-v2 .ng-yrow__q.ng-yrow__q{ margin:0; font-family:var(--ng-font-display); font-weight:700; font-size:clamp(1.3rem, 2.5vw, 1.7rem); line-height:1.24; letter-spacing:-0.02em; color:var(--ng-ink); text-wrap:balance; } /* The client's own paragraph for that title, verbatim. 17px rather than .ng-lede's 18px: there are three of these and a lede-sized paragraph three times over reads as three ledes. */ .ng-v2 .ng-yrow__body{ margin:14px 0 0; font-size:17px; line-height:1.6; color:var(--ng-muted); max-width:48ch; } /* THREE LINKS, THREE DIFFERENT LABELS, THREE DIFFERENT DESTINATIONS. The page this replaced had three anchors all reading "Daha Fazla Bilgi", each 109x17px — one accessible name for three destinations and a tap-target failure at 1024, 768 and 390. min-height:44px on an inline-flex is the hit area at every width, not only under a mobile query. */ .ng-v2 .ng-yrow__to{ display:inline-flex; align-items:center; gap:9px; min-height:44px; margin-top:12px; font-family:var(--ng-font-label); font-weight:600; font-size:15px; line-height:1.35; color:var(--ng-accent); text-decoration:none; } .ng-v2 .ng-yrow__to:hover, .ng-v2 .ng-yrow__to:focus-visible{ color:var(--ng-accent-hover); text-decoration:underline; } .ng-v2 .ng-yrow__to:hover .ng-arrow{ transform:translateX(3px); } /* THE POINTER PLATE. §17b's .ng-figband__frame--text clears 26px above its first paragraph for the absolutely positioned chip; this plate carries no chip, because it is not a sample of anything — it points at one. So the clearance comes back off. */ .ng-v2 .ng-yrow__ptr .ng-figband__sub{ margin-top:0; color:var(--ng-muted); } .ng-v2 .ng-yrow__ptrlink{ margin:18px 0 0; } /* ========================================================================== 6. RESPONSIVE ng-shared carries the 44px hit areas (crumbs, buttons, pills) at 767, at 768–1023 and at exactly 1024, and ng-mobile.css §7 carries the union of them at exactly 1024. The only interactive things this sheet adds are the three .ng-yrow__to links and the pointer chip, and both are 44px tall at every width by construction — so this block is type and rhythm only. ========================================================================== */ @media (max-width:959px){ /* Stacked, the readout follows the picture immediately, so the gap between them is the one §17a sets and the strip only needs its own breathing room under the figcaption. */ .ng-v2 .ng-yfig__keys{ margin-top:4px; } } @media (max-width:767px){ /* Sentences, not labels: they take the 16px mobile reading floor like every other sentence on the site. */ .ng-v2 .ng-yfig__askbody, .ng-v2 .ng-yrow__body{ font-size:16px; } /* A footnote, so it takes .ng-note's 15px mobile step rather than the 16px body floor — the same call ng-shared §12 makes for .ng-note itself. */ .ng-v2 .ng-yfig__keyfoot{ font-size:15px; max-width:none; } /* .ng-note is already 15px at this width in ng-shared §12; these only drop the desktop measure so a footnote does not set narrower than the column it sits in. */ .ng-v2 .ng-vals__note, .ng-v2 .ng-vs__note, .ng-v2 .ng-how__note, .ng-v2 .ng-yfig__note, .ng-v2 .ng-lead__note{ max-width:none; } .ng-v2 .ng-yfig__quote{ font-size:18px; } .ng-v2 .ng-yfig__env .ng-env__row{ padding:12px 0; gap:14px; } .ng-v2 .ng-yfig__env .ng-env__v{ font-size:18px; } .ng-v2 .ng-yrow__body{ max-width:none; } /* The comparison at 390. The versus rule keeps its position but loses most of its inset, because 20px of padding on a ~110px column is a fifth of the cell. The criterion rail comes down to 13px at .1em — a ratio of .10, over the tracked-label threshold — so three columns still fit without any cell word having to break. */ .ng-v2 .ng-vs th:nth-child(3), .ng-v2 .ng-vs td:nth-child(3){ padding-left:9px; } .ng-v2 .ng-vs tbody th{ font-size:13px; letter-spacing:.1em; padding-top:14px; } .ng-v2 .ng-vs tbody td{ font-size:15px; padding-top:14px; padding-bottom:14px; } .ng-v2 .ng-vs__col{ font-size:17px; } } /* ========================================================================== 7. REDUCED MOTION ng-shared §10 already flattens .ng-card and .ng-arrow under a reduce preference — including cancelling ng-components.css's !important marker transform — and ng-components.css §8 does the same for .ng-anim. The only motion this sheet adds is the shared arrow nudge on the three row links. Nothing on this page animates a figure: .ng-anim's hidden state is a transform, and HANDOFF records that a transformed element with lazy loading is the one combination on this site that never loads an image at all. ========================================================================== */ @media (prefers-reduced-motion:reduce){ .ng-v2 .ng-yrow__to:hover .ng-arrow{ transform:none; } }