/* ========================================================================== /urunler/lokasyon-analizi-web/ + /en/products/location-analysis-web/ One stylesheet for the pair (--css-from), so the two languages cannot drift. VARIANCE PASS — the assignment, which was fixed centrally and not chosen: opening B-STACK no aside; the headline runs the full container dark MIDDLE the indigo band is section 30 of 4, not the close sections 4 masthead · workbench · output · setup+close WHAT THIS PAGE LOOKED LIKE BEFORE, AND WHY THAT WAS THE DEFECT. Six sections: masthead with a mist plate on the right, a five-card grid, a screenshot, a sample-output band on mist, a two-card grid, an indigo CTA. Shot at 1440 next to /urunler/lokasyon-analizi-mobile/ the two pages were the same page with different words — same plate, same proof strip, same card grid, same closing slab. That is the finding this pass exists to fix, and it is not fixed by restyling: it is fixed by changing the silhouette. THE DOMINANT CONTENT SHAPE IS A RULED LEDGER. Every list on this page that used to be a grid of white boxes is now hairline-ruled rows running the full 1120px container — ordinal, name, description. .ng-card appears nowhere in this page's markup. A capability list of ONE application is a specification, not a set of options, and the only genuine either/or on the page (the two installation models) is set as a comparison with a shared base rather than as two cards. A ranked table, a comparison and a ledger are three different shapes; four stacked card grids are one shape four times. Sheet order: 1. MASTHEAD .ng-lead__src, .ng-moves — the B-STACK opening 2. THE LEDGER .ng-spec, the page's dominant shape 3. THE SCREEN real screenshot + its four callouts 4. THE OUTPUT the indigo band: .ng-net, .ng-env, .ng-brainx 5. SETUP + CLOSE .ng-two comparison, .ng-close__rail 6. RESPONSIVE 7. REDUCED MOTION NOTE: rules this sheet used to declare for the shared leaf primitives (.ng-out-band, .ng-lead, .ng-vals, .ng-env, .ng-net) live in ng-shared.css §14. Anything of theirs still declared below is a DELIBERATE override for this page — it diverged from the majority, so it was left here, and it still wins because this file loads after ng-shared.css. ========================================================================== */ /* ========================================================================== 1. MASTHEAD — B-STACK ng-shared §15a does the work: single column, headline to 68px, 58ch lede. Two things are page-specific. 1a. .ng-lead__src — LIFTED FROM pages/akaryakit.css, character for character, because it is the same move for the same reason. With no aside there is nowhere to quote the need /urunler/ prints against this product, so the quote comes out from behind the plate and sits under the h1 behind the same 3px accent rule the aside used. Same treatment, same token, one component fewer. 1b. .ng-moves — the three moves the hub card promises (draw the area, add your own data, export the result), which were the aside's list. They are a full-width strip across the foot of the masthead, divided by vertical hairlines: ONE strip with three parts, not three plates. This is the distinction that matters for B-STACK — "no aside" is about the SHAPE of the first screen, and a strip that runs the container is the opposite of a column parked beside the headline. Vertical rules rather than the per-item 2px top rule .ng-callout uses further down: a top rule per item would have made three of these look like three of those, and they are not the same kind of thing (these are a sequence you perform, those are annotations of a figure). ========================================================================== */ .ng-v2 .ng-lead__src{ margin:22px 0 0; padding:2px 0 2px 16px; border-left:3px solid var(--ng-accent); max-width:64ch; font-size:16px; line-height:1.6; color:var(--ng-muted); /* 6.01:1 on the ground */ } .ng-v2 .ng-moves{ padding-top:26px; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-moves__label{ margin:0 0 20px; } .ng-v2 .ng-moves__list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:22px; } .ng-v2 .ng-moves__list > li{ min-width:0; padding-left:0; margin:0; } @media (min-width:860px){ .ng-v2 .ng-moves__list{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; } .ng-v2 .ng-moves__item{ padding:0 30px; border-left:1px solid var(--ng-hairline); } .ng-v2 .ng-moves__item:first-child{ padding-left:0; border-left:0; } .ng-v2 .ng-moves__item:last-child{ padding-right:0; } } /* 12px at .1em (ratio .10) — a tracked label by MEASUREMENT, which is what ng-page-check tests, not by allowlist. */ .ng-v2 .ng-moves__n{ display:block; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.3; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); /* 5.35:1 on the ground */ font-variant-numeric:tabular-nums; } /* Deliberately a

, not a heading. Three two-word labels above the page's own h2 would put "Alanı çizin" into the document outline at the same level as "Beş yetenek, tek çalışma ekranı", which is not what they are. */ .ng-v2 .ng-moves__name{ margin:8px 0 0; font-family:var(--ng-font-display); font-weight:600; font-size:17px; line-height:1.3; letter-spacing:-0.008em; color:var(--ng-ink); } .ng-v2 .ng-moves__body{ margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--ng-muted); } /* ========================================================================== 2. THE LEDGER — .ng-spec The page's dominant content shape, used twice: the five capabilities in section 20 and the three audiences in section 40. WHY NOT CARDS. Both lists used to be .ng-card grids, and so is the second section of nearly every other leaf on this site. A card says "this is one of several things you could choose"; five capabilities of a single application and three descriptions of who uses it are neither choices nor destinations. A ledger row — ordinal, name, description, hairline — says "this is entry N of a specification", which is what they are. It also removes the temptation to hang a link off each one: the "14 identical Daha Fazla Bilgi links" defect the audit found is a property of card grids more than of links. THREE COLUMNS ABOVE 900px, TWO BELOW. Above 900 the name has its own 30ch column and the description runs beside it, which is what makes it read as a datasheet rather than as a list of paragraphs. Below 900 the description drops under the name and stays aligned to it (grid-column:2), so the ordinal keeps its own gutter at every width — an ordinal that loses its gutter on a phone reads as part of the first word. .ng-spec__body is placed EXPLICITLY rather than by auto-flow. Three children in a two-column grid auto-place as n(1,1) name(1,2) body(2,1): the description would sit under the ordinal, in the gutter. This is the kind of thing that renders wrong and asserts clean. ========================================================================== */ .ng-v2 .ng-spec{ list-style:none; margin:36px 0 0; padding:0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-spec > li{ min-width:0; padding-left:0; margin:0; } .ng-v2 .ng-spec > li::after{ content:none; } /* the theme's list marker */ .ng-v2 .ng-spec__item{ display:grid; grid-template-columns:auto minmax(0,1fr); column-gap:16px; row-gap:8px; padding:22px 0; border-bottom:1px solid var(--ng-hairline); } @media (min-width:900px){ .ng-v2 .ng-spec__item{ grid-template-columns:auto minmax(0,30ch) minmax(0,1fr); column-gap:30px; align-items:start; padding:24px 0; } .ng-v2 .ng-spec--who .ng-spec__item{ grid-template-columns:auto minmax(0,38ch) minmax(0,1fr); } } /* ⚠ TWO HAIRLINES 40px APART — found in the 1440 screenshot, not by any check. .ng-spec draws a rule ABOVE the list and each item draws one BELOW itself, so a ledger closes with a rule under its last row. In section 20 that is right: the rule closes the ledger and .ng-screen starts 54px later with nothing of its own. In section 40 the audience ledger is followed immediately by .ng-setup__linkslabel, which draws its OWN border-top 40px lower — so the page printed two hairlines 40px apart with nothing between them and the row of chips read as though a row had gone missing. This is exactly the defect PATTERNS.md §16 records against perakende's .ng-idx__list, where a rule in the same place "drew two hairlines 25px apart and read as a mistake". Scoped to --who rather than to :last-child in general, because which of the two rules is redundant is a property of what FOLLOWS the ledger, not of the ledger. ng-page-check reports the page clean with and without this. */ .ng-v2 .ng-spec--who .ng-spec__item:last-child{ border-bottom:0; } /* 12px at .1em, tabular so 01–05 sit in one column. line-height 2 lands the digits on the first line of a 19px/1.3 name rather than above it. */ .ng-v2 .ng-spec__n{ font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:2; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); font-variant-numeric:tabular-nums; } /* (0,3,0) doubled — the theme's `body .content-wrapper h3:not(:first-child) {margin-top:50px}` is (0,2,2) and loads after us. Without the doubled class every ledger row after the first opens a 50px hole above its own name, which no DOM assertion reports. ng-shared.css §11 keeps the index of these. */ .ng-v2 .ng-spec__name.ng-spec__name{ margin:0; font-size:19px; line-height:1.3; letter-spacing:-0.01em; color:var(--ng-ink); } .ng-v2 .ng-spec__body{ grid-column:2; margin:0; font-size:15px; line-height:1.65; color:var(--ng-muted); max-width:74ch; } @media (min-width:900px){ .ng-v2 .ng-spec__body{ grid-column:3; grid-row:1; } } /* ========================================================================== 3. THE SCREEN A REAL SCREENSHOT, full container width, and the four callouts under it. It is the second half of section 20, under an h3, because the section makes one argument: five capabilities, one workspace, and here is the workspace. IT IS A PHOTOGRAPH OF THE SOFTWARE AND MUST STAY ONE. The owner had two hand-drawn product replicas deleted from the homepage today — a GeoBrain score card and a WhatsApp-style thread — because they did not represent the real product, and honest "örnek çıktı" labelling did not save them. The rule this page follows: show a real screenshot or show nothing. The asset is already deployed at /wp-content/uploads/ng/product-lokasyon-analizi.jpg (1084x610, avif/webp/jpg all verified 200) and is the live homepage's own product image for this product, so the homepage and the flagship product page show the visitor the same software. aspect-ratio on the frame AND width/height on the : the box is reserved twice over, so the avif/webp negotiation and the late webfont swap cost 0 CLS. The sunken fill is what shows for the milliseconds before the bitmap paints — a white hole in a light page reads as a broken image. ========================================================================== */ .ng-v2 .ng-screen{ margin-top:54px; scroll-margin-top:104px; } /* The sticky header is ~104px at desktop and shorter at mobile; without this the masthead's "Platformu ekranda görün" anchor lands with the sub-head under the header. */ @media (max-width:1364px){ .ng-v2 .ng-screen{ scroll-margin-top:88px; } } .ng-v2 .ng-screen__label{ margin:0; } /* (0,3,0) doubled, same theme defence as .ng-spec__name. */ .ng-v2 .ng-screen__name.ng-screen__name{ margin:12px 0 0; font-size:28px; line-height:1.2; letter-spacing:-0.018em; color:var(--ng-ink); } .ng-v2 .ng-screen__lede{ margin:14px 0 30px; max-width:72ch; } .ng-v2 .ng-screen__fig{ margin:0; } .ng-v2 .ng-screen__frame{ display:block; aspect-ratio:1084 / 610; overflow:hidden; border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); background:var(--ng-surface-sunken); box-shadow:var(--ng-shadow-card); } .ng-v2 .ng-screen__img{ display:block; width:100%; height:100%; object-fit:cover; } .ng-v2 .ng-screen__cap{ margin:14px 0 0; font-size:14px; line-height:1.55; color:var(--ng-muted); } /* --- the four callouts ---------------------------------------------------- Annotations OF the figure above them, so they take a 2px top rule each — the treatment ng-shared §13c gives .ng-steps — which reads as "these belong to the thing above" rather than "here are four more options". Four columns at 1024+, two at 620, one below. DIRECTIONS INSIDE THESE STRINGS POINT INTO THE IMAGE, never at the page layout: "haritanın sağındaki panel" is true at 390 and at 1440 because the bitmap keeps its own geometry. "Soldaki / sağdaki" meaning a page COLUMN is the mistake that shipped on the first leaf of tranche 2 and had to be rewritten as "birinci / ikinci"; giving the figure the full container width and stacking the callouts under it removes the possibility entirely. -------------------------------------------------------------------------- */ .ng-v2 .ng-callouts{ list-style:none; margin:34px 0 0; padding:0; display:grid; grid-template-columns:minmax(0,1fr); gap:24px; } .ng-v2 .ng-callouts > li{ min-width:0; padding-left:0; margin:0; } @media (min-width:620px){ .ng-v2 .ng-callouts{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 22px; } } @media (min-width:1024px){ .ng-v2 .ng-callouts{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:26px 20px; } } .ng-v2 .ng-callout{ padding-top:16px; border-top:2px solid var(--ng-hairline); } .ng-v2 .ng-callout__n{ margin:0; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.3; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); } /* (0,3,0) doubled. These are h4 now — the section's h2 is the capability heading and the screen's sub-head is the h3 — and h4 is in the theme's `h1..h6:not(:first-child)` list too. */ .ng-v2 .ng-callout__name.ng-callout__name{ margin:8px 0 0; font-size:17px; line-height:1.3; letter-spacing:-0.008em; color:var(--ng-ink); } .ng-v2 .ng-callout__body{ margin:8px 0 0; font-size:14px; line-height:1.6; color:var(--ng-muted); overflow-wrap:break-word; /* "Lokasyonlar" in a 250px column */ } /* The bolded strings are the app's own control labels quoted off the screen. Ink rather than accent: they are being QUOTED, not linked, and an accent run inside body copy at 14px reads as a link that does not work. */ .ng-v2 .ng-callout__body b{ font-weight:600; color:var(--ng-ink); } .ng-v2 .ng-screen__note{ margin-top:30px; max-width:88ch; } /* ========================================================================== 4. THE OUTPUT BAND — and it is INDIGO on this page dark: MIDDLE, so section 30 of 4 is the dark band and the page does not close on one. `class="ng-section is-dark"` and NOT `ng-section--dark`: --dark is the CLOSING composition and centres its container, which is wrong for two left-aligned artefact panels. is-dark is what flips the palette (ng-foundation §3) and supplies the 88px pad (§7). PATTERNS.md records this and it has caught two agents. THE PANELS NEEDED NO DARK BRANCH. .ng-out reads --ng-surface, which is-dark redefines as a 6% paper fill, and --ng-hairline, which becomes 16% paper. So the panels come out as translucent paper plates on indigo with no new colour written anywhere. That is the whole point of the two-surface-role token system and it is why §4a below is only THREE declarations long. ========================================================================== */ .ng-v2 .ng-out-band{ scroll-margin-top:104px; } @media (max-width:1364px){ .ng-v2 .ng-out-band{ scroll-margin-top:88px; } } .ng-v2 .ng-out-band__pair{ display:grid; grid-template-columns:minmax(0,1fr); gap:20px; } @media (min-width:960px){ .ng-v2 .ng-out-band__pair{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; /* align-items:start, i.e. each panel is its own height, NOT the grid's default stretch. Measured in a 1440 screenshot: stretched, the comparison panel matched the GeoBrain panel's height and `.ng-out__body > .ng-out__foot:last-child{margin-top:auto}` (ng-shared §13b) pushed its footnote to the bottom, leaving ~170px of empty space INSIDE a panel. ng-page-check does not see this either way — the panel's own background paints, so the band never registers as dead air. */ align-items:start; } /* align-items:start ALONE DOES NOTHING HERE, and this is the trap. ng-shared §13b sets `.ng-out{height:100%}` and a grid item's percentage height resolves against its GRID AREA — the row's height, i.e. the tallest item's — not against its own content. So the panel kept stretching and the hole stayed exactly where it was, with the stylesheet looking as though it had been fixed. `height:auto` is what releases it. (0,3,0) beats ng-shared's (0,2,0) without !important. */ .ng-v2 .ng-out-band__pair .ng-out{ height:auto; } } /* Centred under a centred pair above 960 where the two panels frame it on both sides; left-aligned below 960 where they stack (see §6). */ .ng-v2 .ng-out-band__note{ margin-top:26px; max-width:92ch; margin-inline:auto; text-align:center; } /* --- 4a. .ng-net — the ranked scorecard ----------------------------------- Rank number, name + bar, score + delta. Three columns rather than a table: there is one measure per row, so a table would be a one-column table with a decorative bar in it. The bar widths are inline `style` attributes, the same technique the live homepage hero's ranked list uses — the value and its bar are written once, next to each other, so they cannot drift apart. -------------------------------------------------------------------------- */ .ng-v2 .ng-net{ list-style:none; margin:0 0 22px; padding:0; display:grid; gap:16px; } .ng-v2 .ng-net > li{ min-width:0; padding-left:0; margin:0; } .ng-v2 .ng-net > li::after{ content:none; } .ng-v2 .ng-net__row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:12px; } /* 11px at .1em — a tracked label by measurement, and the same size ng-components.css settled on for .ng-rank__n after it was found at 10.5px. */ .ng-v2 .ng-net__n{ font-family:var(--ng-font-label); font-weight:500; font-size:11px; line-height:1.3; letter-spacing:.1em; text-transform:none; color:var(--ng-muted); font-variant-numeric:tabular-nums; } .ng-v2 .ng-net__main{ display:block; min-width:0; } .ng-v2 .ng-net__name{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:var(--ng-font-display); font-weight:600; font-size:15px; line-height:1.3; color:var(--ng-ink); } .ng-v2 .ng-net__bar{ display:block; margin-top:8px; height:6px; border-radius:3px; background:var(--ng-surface-sunken); overflow:hidden; } .ng-v2 .ng-net__bar i{ display:block; height:100%; border-radius:3px; background:var(--ng-indigo); } .ng-v2 .ng-net__row.is-top .ng-net__bar i{ background:var(--ng-accent); } /* THE ONE RULE THE MOVE TO INDIGO ACTUALLY COST. --ng-indigo is a FIXED token: is-dark flips --ng-ink, --ng-surface, --ng-hairline and the accent, but not the palette literals. So the two trailing score bars were being filled #1B1F5E on a #1B1F5E band — invisible, and invisible in a way no assertion reports, because the element is there, painted, at the right width. Found by reading the tokens before the first apply rather than by looking at the render, which would also have worked but one round later. 60% paper reads as "measured but not leading" against the leader's pink, which is the same relationship indigo-vs-accent carries on a light band. The is-top restatement is (0,4,1) and deliberately explicit: the rule above it is (0,3,1), so without it the leader's bar would go grey too. */ .ng-v2 .is-dark .ng-net__bar i{ background:var(--ng-border-strong); } .ng-v2 .is-dark .ng-net__row.is-top .ng-net__bar i{ background:var(--ng-accent); } .ng-v2 .ng-net__side{ display:block; text-align:right; } /* 18px, so --ng-accent (not --ng-accent-display) is the correct token on the top row: display magenta is reserved for 24px and above. On the indigo band is-dark swaps both to the pink tier, which is exactly why that swap exists — #C61073 measures 2.65:1 on indigo. */ .ng-v2 .ng-net__score{ display:block; font-family:var(--ng-font-display); font-weight:700; font-size:18px; line-height:1.15; letter-spacing:-0.01em; color:var(--ng-ink); font-variant-numeric:tabular-nums; } .ng-v2 .ng-net__row.is-top .ng-net__score{ color:var(--ng-accent); } /* 12px at .09em clears the checker's 0.08 tracked-label threshold by measurement. It is a chip of state next to a number, not a sentence. */ .ng-v2 .ng-net__delta{ display:block; margin-top:4px; white-space:nowrap; font-family:var(--ng-font-label); font-weight:500; font-size:12px; line-height:1.3; letter-spacing:.09em; text-transform:none; color:var(--ng-muted); } /* --- 4b. .ng-env — key/value report rows ---------------------------------- Hairline-separated rows: a report, not a card grid. dt and dd are laid out with flex rather than a two-column grid so a long key ("Öne çıkan alanda 10 dk sürüş nüfusu") wraps inside its own column instead of forcing the value onto its own line. The UA's `dd{margin-inline-start:40px}` is reset explicitly; without it every value sits 40px in from the right edge. -------------------------------------------------------------------------- */ .ng-v2 .ng-env{ margin:0; } .ng-v2 .ng-env__row{ display:flex; align-items:baseline; gap:16px; padding:11px 0; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-env__row:first-child{ border-top:0; padding-top:0; } .ng-v2 .ng-env__k{ flex:1 1 auto; min-width:0; margin:0; font-size:14px; line-height:1.45; color:var(--ng-muted); } .ng-v2 .ng-env__v{ flex:0 0 auto; margin:0; text-align:right; font-family:var(--ng-font-display); font-weight:600; font-size:16px; line-height:1.35; color:var(--ng-ink); font-variant-numeric:tabular-nums; } /* --- 4c. .ng-brainx — the GeoBrain score block ---------------------------- NAME CHECK, because that is how the .ng-card collision happened: the live homepage's own GeoBrain panel uses .ng-brain__*, in ng-sections.css. That file is HOMEPAGE-ONLY and this one is INNER-PAGE-ONLY, so the two are never in one cascade — but .ng-brain also appears in the homepage SOURCE that the next person will read alongside this file, and two definitions of one name describing the same product is how an agent copies the wrong one. 36px on the score, so --ng-accent-display is the correct token: the contract reserves it for 24px and up. On the indigo band is-dark resolves both accent tokens to #FF9BC9. -------------------------------------------------------------------------- */ .ng-v2 .ng-brainx__num{ margin:0; font-family:var(--ng-font-display); font-weight:700; font-size:36px; line-height:1; letter-spacing:-0.02em; color:var(--ng-accent-display); font-variant-numeric:tabular-nums; } .ng-v2 .ng-brainx__den{ margin-left:2px; font-size:16px; font-weight:600; letter-spacing:0; color:var(--ng-muted); } .ng-v2 .ng-brainx__bar{ margin:12px 0 20px; height:6px; border-radius:3px; background:var(--ng-surface-sunken); overflow:hidden; } .ng-v2 .ng-brainx__fill{ display:block; height:100%; border-radius:3px; background:var(--ng-accent); } .ng-v2 .ng-brainx__facts{ margin-bottom:22px; } .ng-v2 .ng-brainx__head{ margin-top:0; } /* The written recommendation. Ink rather than muted, one step up from the report rows: this is the only prose inside either panel and it is the thing the panel exists to show. The left rule is the accent hairline the site already uses for quoted output. */ .ng-v2 .ng-brainx__ln{ margin:0 0 12px; padding-left:14px; border-left:2px solid var(--ng-accent-wash); font-size:15px; line-height:1.6; color:var(--ng-ink); } .ng-v2 .ng-brainx__ln:last-of-type{ margin-bottom:0; } /* ========================================================================== 5. SETUP AND CLOSE The last section carries three things and then resolves. 5a. .ng-two — THE COMPARISON. The two installation models are the only genuine either/or on this page, and what they SHARE is as load-bearing as what separates them: the client's own copy says the capabilities are identical and that performance, security and the interface are standard in both. A .ng-grid--2 of cards cannot say that — it can only put the sentence underneath as a footnote, which is where it was. So this is ONE raised plate holding two columns split by a hairline, with a sunken base row spanning both. Two surfaces, both already in the system, expressing "two branches, one foundation". (On the page being replaced these were a `neuros_tabs` widget rendered as a vertical accordion on a pure black band with a 900px lavender demo blob over the left half — only one of the two readable at a time, which is the one thing a choice cannot afford.) 5b. .ng-close__rail — LIFTED FROM pages/akaryakit.css. With dark: MIDDLE the page cannot end on the indigo slab, so the close is a mist rail inside the last section: SUNKEN role, mist + hairline, holding the two white chrome pills. PATTERNS.md says to copy it and not to promote it until three leaves have asked for the same one; this is the second, and the third should promote it. Every fact from the deleted standalone CTA band is in it. ========================================================================== */ .ng-v2 .ng-two{ margin-top:36px; display:grid; grid-template-columns:minmax(0,1fr); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); background:var(--ng-surface); box-shadow:var(--ng-shadow-card); overflow:hidden; } .ng-v2 .ng-two__col{ padding:26px 24px; } @media (min-width:760px){ .ng-v2 .ng-two{ grid-template-columns:repeat(2,minmax(0,1fr)); } .ng-v2 .ng-two__col{ padding:30px 30px 34px; } .ng-v2 .ng-two__col + .ng-two__col{ border-left:1px solid var(--ng-hairline); } .ng-v2 .ng-two__both{ grid-column:1 / -1; } } @media (max-width:759px){ .ng-v2 .ng-two__col + .ng-two__col{ border-top:1px solid var(--ng-hairline); } } /* 12px at .1em, and ACCENT rather than muted: it is the only thing that distinguishes the two columns at a glance before the names are read. */ .ng-v2 .ng-two__k{ margin:0; font-family:var(--ng-font-label); font-weight:600; font-size:12px; line-height:1.3; letter-spacing:.1em; text-transform:none; color:var(--ng-accent); /* 5.64:1 on white */ } /* (0,3,0) doubled — same theme defence as every other heading class here. */ .ng-v2 .ng-two__name.ng-two__name{ margin:12px 0 0; font-size:20px; line-height:1.25; letter-spacing:-0.012em; color:var(--ng-ink); } .ng-v2 .ng-two__body{ margin:12px 0 0; font-size:15px; line-height:1.65; color:var(--ng-muted); } .ng-v2 .ng-two__both{ padding:22px 24px; border-top:1px solid var(--ng-hairline); background:var(--ng-surface-sunken); display:grid; gap:8px; } @media (min-width:760px){ .ng-v2 .ng-two__both{ grid-template-columns:auto minmax(0,1fr); column-gap:28px; align-items:baseline; padding:22px 30px; } } .ng-v2 .ng-two__bothk{ margin:0; } .ng-v2 .ng-two__bothv{ margin:0; font-size:15px; line-height:1.6; color:var(--ng-ink); } .ng-v2 .ng-setup__note{ margin-top:26px; max-width:86ch; } .ng-v2 .ng-setup__who{ margin-top:44px; padding-top:34px; border-top:1px solid var(--ng-hairline); } /* (0,3,0) doubled. */ .ng-v2 .ng-setup__whoname.ng-setup__whoname{ margin:0; font-size:24px; line-height:1.25; letter-spacing:-0.012em; color:var(--ng-ink); } /* The six lateral destinations as chips rather than as links inside the note above them. A link buried mid-sentence measured 282x42 as a tap target on the sectors hub and had to be lifted out. Every one of the six is a page nothing else on this leaf links to — the ledger rows are deliberately not links at all — so no URL and no link label appears twice on the page. THE ROW NEEDS ITS OWN LABEL AND ITS OWN RULE. In an early 1440 screenshot the chips sat 34px under the last audience row with nothing between them and read as a fourth answer to "Kimler için uygun?" — six product names answering a question about people. */ .ng-v2 .ng-setup__links{ margin-top:16px; } .ng-v2 .ng-setup__linkslabel{ margin:40px 0 0; padding-top:28px; border-top:1px solid var(--ng-hairline); } .ng-v2 .ng-close__rail{ margin-top:46px; padding:26px 22px; background:var(--ng-surface-sunken); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); display:grid; grid-template-columns:minmax(0,1fr); gap:24px; } @media (min-width:900px){ .ng-v2 .ng-close__rail{ grid-template-columns:minmax(0,1fr) auto; column-gap:44px; align-items:center; padding:34px 36px; } } .ng-v2 .ng-close__eyebrow{ margin:0; } /* Doubled class for the theme's 50px margin-top. This h2 is NOT the first child of its block — the eyebrow is — so `h2:not(:first-child)` does match it, unlike a .ng-section-head title. */ .ng-v2 .ng-close__title.ng-close__title{ margin:14px 0 0; font-size:clamp(1.6rem, 3.2vw, 2.1rem); line-height:1.15; letter-spacing:-0.02em; max-width:22ch; text-wrap:balance; } .ng-v2 .ng-close__lede{ margin:14px 0 0; font-size:17px; line-height:1.6; color:var(--ng-muted); /* 5.42:1 on mist */ max-width:54ch; } .ng-v2 .ng-close__side{ display:flex; flex-direction:column; align-items:flex-start; gap:4px; } @media (min-width:900px){ .ng-v2 .ng-close__side{ align-items:flex-end; text-align:right; } } .ng-v2 .ng-close__actions{ margin-top:0; } /* 14px for the same reason .ng-cta__meta is: a phone number and an address are read and copied, and .04em tracking does not earn the label exception. */ .ng-v2 .ng-close__meta{ margin:16px 0 0; font-family:var(--ng-font-label); font-weight:500; font-size:14px; line-height:1.6; letter-spacing:.04em; color:var(--ng-muted); } /* ========================================================================== 6. RESPONSIVE ng-mobile.css §7 carries every 44px hit area (crumbs, buttons, chips) at 767, 768–1023 and at exactly 1024. Nothing on this page is interactive outside those primitives — the screenshot, the ledger, the scorecard, the report rows and the GeoBrain block are static DOM with no and no