/* ========================================================================== NEXT GEO — ng-vacancy.css The single job-ad (neuros_vacancy) view. Loaded by mu-plugins/ng-vacancy.php on `is_singular('neuros_vacancy')` only, LAST in the chain every inner page uses: ng-foundation → ng-components → ng-mobile → ng-shared → ng-vacancy so everything ng-shared.css publishes is already in the cascade and this file only adds what a job ad needs. Most of this view is ALREADY STYLED and is not restated here: .ng-section, .ng-section--dark/.is-dark, .ng-container, .ng-crumbs, .ng-eyebrow, .ng-section-head, .ng-grid--3, .ng-card/--link/ __meta/__title, .ng-btn/--primary/--ghost, .ng-actions, .ng-cta/__title/ __lede, .ng-list, .ng-prose. Where one IS overridden, the comment says what was wrong with it *on this view specifically*. THE PROBLEM THIS FILE EXISTS TO SOLVE A job ad is a SCANNING document, not a reading document. A candidate is deciding in about fifteen seconds whether they qualify, and the entire content of these eight pages is 8–14 short requirement lines plus three structured facts. There is no prose, no imagery, no data and nothing to decorate with, so the whole job is: make the list scannable, make the three facts glanceable without competing with the job title, and make applying possible from the first viewport. WHAT WAS LOOKED AT AND MEASURED, not assumed: - all 8 published ads pulled from the origin and their requirement lines counted and measured: 8 / 9 / 9 / 11 / 13 / 13 / 14 / 14 items, line lengths 6 to 105 characters, mean 22 to 71 depending on the ad; - /kariyer/ and /en/career/ at 1440/768/390 (the hub that links here) for the register: magenta eyebrow PILL in the masthead, plain magenta eyebrows on section heads, white raised cards on the #FAFBFF ground, mist plates for summary chrome; - the pre-CSS render of this template at 1440 and 390, which is what the numbers in the report are measured against; - the served HTML for `.content-wrapper` — ZERO occurrences, so the theme's (0,2,2) `h?:not(:first-child){margin-top:50px}` rule that has bitten every Elementor page in this project cannot reach this template. Same finding single-post.php made. The heading class is doubled anyway; §8 says why that is not cargo. HARD RULES INHERITED FROM pages/PATTERNS.md, honoured throughout: - tokens only, no literal colour / radius / font stack; - no `!important` anywhere in this file — the theme is beaten on specificity, and every selector below records the count it needs; - Turkish strings are pre-uppercased in PHP by ng_upper(); NOTHING here applies text-transform, and the two places that restate a shared primitive restate its `text-transform:none` with it; - nothing a visitor reads goes under 14px, 16px at mobile; tracked labels (letter-spacing >= 0.08em) may go to 12px; - 44x44 touch targets at every width up to AND INCLUDING 1024px. This file introduces no interactive element of its own — every clickable thing on the page is a .ng-btn or a .ng-crumbs__link, both covered by ng-mobile.css §7, which is the site's one hit-area block. §7 below is a note, not a patch, and says why re-adding one here would be wrong. ONE THING THIS FILE DELIBERATELY DOES NOT DO Two of these ads (satis-destek-uzmani / sales-support-specialist) carry requirements that are discriminatory — completed military service for male candidates, and attention to general appearance. Every requirement line gets IDENTICAL treatment here: the same marker, the same size, the same colour, the same row pitch, in source order. Nothing is hidden, reordered, or de-emphasised. That is deliberate and it is not a styling decision to make — see the template's own header comment and HANDOFF "Still open" item 7. ========================================================================== */ /* ========================================================================== 1. THE ARTICLE, AND THE THREE VALUES THE REST OF THE FILE IS BUILT FROM ========================================================================== */ .ng-v2 .ng-vac{ /* --ng-vac-measure — the cap on ONE requirement line, in `em` so it tracks the item's own font-size (16px desktop and mobile) rather than needing a second number per breakpoint. 34em = 544px at 16px. Why 544px, measured on the RENDER rather than derived: at 16px this site's Turkish sets 57 characters in 451px of ink ("İşletme, Harita, Şehir Planlama veya Geomatik Mühendisliği", the first requirement on satis-destek-uzmani, in the two-column layout at 1440), i.e. 7.9px per average character. 544px minus the 30px marker gutter is 514px of text, so a capped line sets ~65 characters — inside the 60–75 band ng-post.css already sizes this site's reading column around. English averages fractionally narrower, ~68 there. It only BINDS in the single-column case (see §3): the two-column layout gives each item box 481px at 1440 and 405px at 1024, already under it. So this is the rule that stops a 105-character Turkish requirement from setting 85 characters wide at 768, which is the width nobody looks at. --ng-vac-col — the width of the requirements plate when it is one column. 660px of plate = 596px inside its padding, which the 544px cap then takes to the measure above with 22px to spare. --ng-vac-gutter — the marker gutter. 26px, not ng-shared's 20px: the tick in §3 draws 12px wide against the dot's 6px, and at 14 rows the marker column has to read as a column. Measured on the render at 1440: marker ink at x=217–228, first glyph at x=245, so 17px of air between them. */ --ng-vac-measure:34em; --ng-vac-col:660px; --ng-vac-gutter:26px; } /* BAND RHYTHM. Both the masthead and the requirements band are .ng-section, so out of the box they stack 56 + 56 = 112px of identical #FAFBFF between the apply button and the "ARADIĞIMIZ NİTELİKLER" eyebrow — measured in the pre-CSS screenshot at 1440, and it is the largest single piece of nothing on a page that has only 211 words on it. ng-post.css hit the same seam and joined its two light bands; here they are two different SECTIONS (the ad's header and the ad's body) so they keep a break, just not a doubled one. The tonal break down to the indigo CTA keeps its full --ng-section-pad-dark. That gap is the only one on the page meant to read as a chapter break, which is ng-foundation.css §3's own rule. (0,2,0), the same as `.ng-v2 .ng-section` — this file loads later, so it wins on order, INCLUDING inside ng-foundation's `@media (max-width:640px)` block. That is why §7 restates mobile values rather than letting the foundation's 44px survive underneath. */ .ng-v2 .ng-vac__head{ padding-block:28px 40px; } .ng-v2 .ng-vac__reqs{ padding-block:44px 60px; } @media (min-width:1024px){ .ng-v2 .ng-vac__head{ padding-block:36px 44px; } .ng-v2 .ng-vac__reqs{ padding-block:48px 72px; } } /* ========================================================================== 2. THE MASTHEAD — crumbs · kicker · h1 · the three facts · apply ========================================================================== THE COMPOSITION, and what it is answering. Anasayfa / Kariyer / Satış Destek Uzmanı [ AÇIK POZİSYON ] Satış Destek Uzmanı ─────────────────────────────────────────────────────────────────── ÇALIŞMA ŞEKLİ LOKASYON YAYIN TARİHİ │ (Başvur) (Tüm ilanlar) Full time İstanbul 4 Haziran 2025 │ The hairline runs the full container and the facts and the buttons hang off it as one row at >=900px. Three things decided that shape: 1. APPLYING MUST BE POSSIBLE FROM THE FIRST VIEWPORT. The template puts a mailto: button here and again in the closing band on purpose. Putting it on the fact row, hard right, means the button is inside the first 420px of the page at every desktop width instead of under a stack. 2. THE FACTS MUST NOT COMPETE WITH THE TITLE. They are 13px muted tracked labels over 18px navy values — a data strip, one step below the 56px headline and one step above body copy. This is ng-shared's own .ng-masthead__proof idiom (hairline, tracked label, display value) rather than a new one, because the homepage and 56 leaves already use it and a job ad's type/location/date is exactly the same kind of glanceable triple. 3. A SINGLE-COLUMN MASTHEAD LEFT 45% OF THE CONTAINER EMPTY. Every leaf masthead fills that with .ng-aside; this template has no slot for one and it is not mine to add. The fact row spanning the full width is what gives the head a base line instead of a ragged right edge. REJECTED: a two-column masthead with a "summary" plate on the right, the shape /kariyer/ uses for its ÖZET panel. It would need an element the template does not have, and faking it by floating the
into a mist plate put the three facts in a box while the h1 sat beside a 380px hole at 1024. REJECTED: centring the masthead. Every converted page on this site opens left-aligned; a candidate arriving from /kariyer/ must not feel they changed sites, and that is the same call ng-post.css §2 made and recorded. */ /* THE KICKER IS A PILL, and this is the one place in the file that duplicates a shared primitive on purpose. /kariyer/ opens with "KARİYER" in an accent-wash pill, and so does every one of the 56 leaf mastheads — it is the site's masthead-eyebrow treatment, and plain magenta text is its SECTION-eyebrow treatment (which the two section heads further down this page correctly use). ng-foundation.css §5 implements the pill as `.ng-eyebrow--pill, .ng-v2 .ng-hero .ng-eyebrow`, and this element carries neither: the template ships `class="ng-eyebrow ng-vac__kicker"` and the template is not mine to edit. The five declarations are therefore restated here, character for character with the foundation's, INCLUDING the calc() that absorbs the trailing letter-space so the label sits optically centred in the fill. Flagged in the report: adding `ng-eyebrow--pill` to the template deletes this block. It is duplication and it is only worth it because "AÇIK POZİSYON" / "OPEN ROLE" is not merely a label here — on a job ad it is a status, and a badge is what states a status. text-transform:none is restated with it: the string arrives already uppercased from ng_upper(), which maps i→İ; the CSS case engine maps i→I and would print "AÇIK POZISYON". */ .ng-v2 .ng-vac__kicker{ margin:0; display:inline-flex; align-items:center; gap:8px; background:var(--ng-accent-wash); color:var(--ng-accent); /* 4.87:1 on the wash */ padding:7px 16px 7px calc(16px + 0.08em); border-radius:var(--ng-radius-pill); text-transform:none; } /* THE JOB TITLE. Doubled class (0,3,0) — see §8. These are ng-shared.css §4's .ng-masthead__title values, restated, and that is the point: this IS an inner-page masthead h1 and it must set at exactly the scale every other h1 on the site sets at, not at a scale invented for this template. The template does not carry .ng-masthead__title (again, not mine to add — flagged in the report), so the values come here. max-width is 16ch rather than the shared 18ch. Nothing here is a sentence — the eight real titles run from "GIS Analyst" (11 characters) to "Sales Support Specialist" (24) — so the measure is not doing the work it does on a leaf masthead; it is only deciding where a long title breaks. Checked on the render at 1440/1024/768/390, all 8 titles: the four Turkish ones and "GIS Analyst" set in ONE line at desktop; "Sales Support Specialist" and "Data Science Specialist" set in two, with the last word on line two. That second shape was looked at and kept rather than widened to ~22ch to force one line: at 56px a 24-character title on one line is 720px wide, the same width as the fact strip under it, and a headline the width of its own furniture reads as a banner. Two lines with text-wrap:balance is the better of the two, and it is what every long h1 on this site already does. */ .ng-v2 .ng-vac__title.ng-vac__title{ margin:18px 0 0; font-size:clamp(2.2rem, 5.6vw, 3.5rem); line-height:1.06; letter-spacing:-0.028em; color:var(--ng-ink); /* 14.46:1 on the ground */ max-width:16ch; text-wrap:balance; } /* THE THREE FACTS. A
gets browser defaults nothing on this site has ever reset, because no converted page has used one: `dl{margin:1em 0}` and `dd{margin-inline-start: 40px}`. In the pre-CSS screenshot that rendered as three stacked pairs with the values indented 40px under their labels, which reads as a broken list, not as data. flex-wrap rather than a 3-up grid: "ÇALIŞMA ŞEKLİ" is 118px and "YAYIN TARİHİ" over "4 Haziran 2025" is 125px, so three equal 105px tracks at 390 would wrap every Turkish label onto two lines. Wrapping the FACTS instead gives 3 / 3 / 2+1 across the four widths and never breaks a label. */ .ng-v2 .ng-vac__facts{ margin:28px 0 0; padding-top:20px; border-top:1px solid var(--ng-hairline); display:flex; flex-wrap:wrap; gap:16px 44px; } .ng-v2 .ng-vac__fact{ min-width:0; } /* (0,3,0). Two changes to .ng-eyebrow, and only in here. MARGIN: the theme ships bare `p{margin:1.875em 0}` at (0,0,1) and the site has no v2 reset for it, so an unstyled 13px eyebrow carries 24px above and below. On a
that is not the problem (a dt is not a p) but the value below it is, so both are stated. COLOUR: muted, not accent. .ng-eyebrow is magenta because a section eyebrow is the one accent in its band. Here there are THREE of them in a row, directly under a magenta kicker pill — four magenta things in 200px, and the kicker stops being the accent. Muted is also what the site already does for exactly this role: /kariyer/'s ÖZET rows, .ng-masthead__pl and .ng-out__label are all muted tracked labels over an ink value. 6.01:1 on the ground. Size stays 13px at 0.08em. That ratio is exactly 0.08, which is the tracked- label exemption ng-page-check tests by measurement — and it is already being exempted on this page today (the baseline reported "13px: 7" under "labels <14px (tracked, by design)"). Dropping to 12px would still clear it but there is no reason to make a label the reader glances at smaller than the site's own. */ .ng-v2 .ng-vac__facts .ng-eyebrow{ margin:0; color:var(--ng-muted); } /* 18px, and the step is chosen against the two neighbours rather than picked: the h1 is 56px and the requirement lines are 16px. 18px display/600 in ink is unmistakably a value and unmistakably not a headline, which is the brief's "readable at a glance without competing with the title". tabular-nums so "4 Haziran 2025" and "30 June 2025" do not wobble against each other between the two languages. */ .ng-v2 .ng-vac__factv{ margin:6px 0 0; font-family:var(--ng-font-display); font-weight:600; font-size:18px; line-height:1.35; letter-spacing:-0.006em; color:var(--ng-ink); /* 14.46:1 on the ground */ font-variant-numeric:tabular-nums; } /* Below 900 the buttons are simply the next block. .ng-actions already opens with 28px from ng-shared §8 and goes full-bleed stacked at <=767 from §12; both are right here and neither is restated. */ .ng-v2 .ng-vac__actions{ margin-top:28px; } /* THE TWO-COLUMN HEAD, and it is LAST IN THE SECTION ON PURPOSE. Every selector in here is (0,2,0) or (0,3,0) and so are the base rules above, so this block wins by FILE ORDER, not by specificity. The first build had it at the top of §2 and the base `.ng-vac__facts{border-top:1px…}` below it silently won — the masthead rendered with two hairlines 20px apart, the continuous one from the ::before and the short one this block sets `border-top:0` to remove. Both rules were valid, both applied, and the whole defect was one duplicated 1px line in a screenshot. If you add a rule to §2, add it ABOVE this block. (0,3,0) on the container — three classes, because .ng-container is one of them. The grid is only worth having once the fact strip and the buttons genuinely fit side by side: below 900 the three facts already need two rows of their own, so the grid is switched off and everything stacks in source order. EVERY ROW IS PLACED EXPLICITLY, including the ::before. Auto-placement would work for the five real children, but a generated ::before is the element's FIRST child and would take row 1 above the breadcrumb; naming all six rows is shorter than the one rule needed to stop that, and it makes the composition readable from the stylesheet. THE HAIRLINE IS ITS OWN GRID ITEM, not a border on the two boxes under it. The first build gave .ng-vac__facts and .ng-vac__actions a `border-top` each, which is the obvious way and is wrong: the 40px column gap sits between them, so the "one line" the whole composition rests on rendered as two rules with a 40px hole in the middle. Caught in the 1440 screenshot; no assertion would have mentioned it. One 1px item spanning 1/-1 is a continuous rule and it also frees the row to use align-items:center, which a shared border could not (centring would have put the two borders at two different heights). */ @media (min-width:900px){ .ng-v2 .ng-vac__head > .ng-container{ display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:40px; align-items:center; } .ng-v2 .ng-vac__head > .ng-container::before{ content:''; grid-row:4; grid-column:1 / -1; height:1px; margin-top:28px; background:var(--ng-hairline); } .ng-v2 .ng-vac__head .ng-crumbs{ grid-row:1; grid-column:1 / -1; } /* justify-self, because a grid item is BLOCKIFIED: the pill's own display:inline-flex becomes flex and it stretches to the full 1072px track — a 1072x33 magenta bar reading "AÇIK POZİSYON" at the far left. Also caught in the screenshot rather than by a rule. */ .ng-v2 .ng-vac__kicker{ grid-row:2; grid-column:1 / -1; justify-self:start; } .ng-v2 .ng-vac__title{ grid-row:3; grid-column:1 / -1; } .ng-v2 .ng-vac__facts{ grid-row:5; grid-column:1; margin-top:20px; padding-top:0; border-top:0; } .ng-v2 .ng-vac__actions{ grid-row:5; grid-column:2; margin-top:20px; } } /* ========================================================================== 3. THE REQUIREMENTS — the page. ========================================================================== 14 undifferentiated 15px muted lines with 6px dots was the pre-CSS render and it is a wall: nothing marks where one requirement ends and the next begins except a line break, the lines are the same weight as a caption, and at 1440 they occupy 62% of the container with the other 38% empty. Three things change and each one is doing a different job. (a) THE LINES BECOME PRIMARY TEXT. 16px in --ng-ink, not ng-shared's 15px in --ng-muted. PATTERNS defines --ng-muted as SECONDARY text, and on every other page .ng-list genuinely is secondary — a supporting list under a card's own copy. Here the list IS the page's content, so it takes the primary role, exactly the call ng-post.css §4 made for article prose and for the same reason. 14 lines of grey reads as fine print on a document whose whole job is to be read. (b) THE MARKER BECOMES A TICK. See below. (c) THE LIST BECOMES A PLATE, AND SOMETIMES TWO COLUMNS. See below. REJECTED: numbering the requirements 01…14, the treatment ng-post.css §5 gives an article's sections. A number states an order, and these are not ordered — nothing says the fourteenth requirement matters less than the first, and on the two ads that carry a discriminatory line, ranking would be an editorial act on copy this view is under instruction not to touch. REJECTED: grouping the lines (must-have / nice-to-have). The software ad actually contains its own separator line — "--- tercihen ---" / "--- preferably ---" is item 10 of 13 — but CSS cannot see text content, the other seven ads have no such marker, and inferring groups by position would be inventing structure the ads do not have. Every line is rendered identically, in source order, including that one. */ /* THE PLATE. White + hairline + soft shadow is the RAISED surface role, and PATTERNS is explicit that raised is the role that holds text (sunken holds white chrome, so a mist band under these lines would have been the wrong half of the two-surface rule). /kariyer/ already puts each ad's summary on exactly this plate, so the ad page and the hub that links to it now use one shape for one thing. It is also the answer to "must not look empty at 8". Eight lines floating on the ground read as leftovers; eight lines on a plate read as a document, because the plate has an edge whether it holds four rows or seven. --ng-vac-col is the SINGLE-COLUMN width. Left-aligned, not centred: the section head above it is left-aligned and two blocks with different left edges is the one disagreement that reads as broken. */ .ng-v2 .ng-vac__list{ max-width:var(--ng-vac-col); padding:14px 32px; background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-card); } /* TWO COLUMNS, BUT ONLY FOR A LONG LIST — and this is the rule that makes an 8-line ad and a 14-line ad the same shape. One column for everything makes the 8-line ad a thin strip and the 14-line ad a 735px scroll. Two columns for everything is not the fix either: 8 items over two columns is four rows in a 1072px plate, a 4:1 letterbox with more chrome than content. So the layout follows the CONTENT — one column up to 9 items, two from 10. MEASURED ON ALL FIVE DISTINCT AD LENGTHS at 1440, after the switch, plate height including padding: 8 items 1 col 660 x 445 11 items 2 col 1072 x 397 9 items 1 col 660 x 544 13 items 2 col 1072 x 372 14 items 2 col 1072 x 421 372 to 544px across the whole set. That is the brief's "must not look empty at 8 or exhausting at 14", stated as a number: the longest ad on the site is now SHORTER than the second-shortest, and no ad's requirements band runs past one screen at desktop. `:has(> .ng-vac__item:nth-child(10))` is "this list has at least ten items". Chrome 105+ / Safari 15.4+ / Firefox 121+; where :has() is unsupported the whole block drops together and a long ad renders as a single 660px column — correct, just taller. It cannot half-apply. 900px, not 1024: at 900 the plate is 852px wide and each item box is 374px, ~44 Turkish characters after the gutter, which is short but readable; at 1440 it is 481px, ~57. Below 900 the boxes would be ~280px and the mean 43-character requirement would set in two lines, which is a wall with a rule down the middle of it. column-rule, not per-row hairlines. Row rules were built first and dropped: in a multi-column box a `border-top` renders above the first item of EVERY column and CSS has no way to say "first in this column", so the choice was a stray hairline floating 14px under the plate's own border or none at all. The tick and a 49px row pitch already separate the rows; the one division that genuinely needs drawing is the one between the columns. The list stays a single
    in source order, so a screen reader and the tab sequence read requirement 1 to 14 straight through regardless of how many columns are painted. */ @media (min-width:900px){ .ng-v2 .ng-vac__list:has(> .ng-vac__item:nth-child(10)){ max-width:none; columns:2; column-gap:44px; column-rule:1px solid var(--ng-hairline); } } /* THE ROW. (0,3,0), so it beats ng-shared's `.ng-v2 .ng-list > li` (0,2,1) on class count and does not depend on file order. 49px pitch (24.8px line box + 12px above + 12px below) rather than ng-shared's 8px inter-item margin. A requirement is a row of a form the reader is filling in against themselves, and 8px makes fourteen of them one paragraph. 12px is the smallest padding at which a one-line row still reads as its own object next to a two-line one. break-inside:avoid so a two-line requirement is never split across the column boundary — three of the eight ads have lines long enough to wrap at the two-column measure, and half a requirement at the foot of column one is worse than an unbalanced column. */ .ng-v2 .ng-vac__list > .ng-vac__item{ position:relative; margin:0; padding:12px 0 12px var(--ng-vac-gutter); max-width:var(--ng-vac-measure); font-size:16px; line-height:1.55; color:var(--ng-ink); /* 14.95:1 on the white plate */ break-inside:avoid; text-wrap:pretty; } /* THE MARKER — ng-shared's 6px accent dot, rebuilt as a tick. (0,3,1), which clears ng-shared's `.ng-v2 .ng-list > li::after` (0,2,1). It is deliberately still ::after and not ::before: ng-components.css §10 kills `body.ng-v2 ul > li::before` outright to remove the theme's fontello chevron, and a ::before marker here would be silently erased by it — invisible to every DOM assertion, which is the whole reason ng-shared chose ::after in the first place. WHY A TICK AND NOT THE SITE'S DOT. A dot says "here is an item in a list". On this page the list is not a list of things, it is the checklist the reader is being measured against, and a tick is what that convention looks like everywhere a job is advertised. It is also simply more legible at 14 rows: a 6px dot at 30px from the text edge is a speck, a 12px diagonal is a column. Every declaration the dot set is unset explicitly — background, border-radius and both dimensions — because a half-override leaves a filled magenta square with borders on two sides. Drawn from two borders rather than a glyph or a mask: no `content` string to be read out by a screen reader, no data-URI, and the colour is the token rather than a fill baked into an SVG path. --ng-accent, never --ng-accent-display: a 2px stroke is graphical content under 1.4.11 and needs 3:1 against its own ground; the darker accent is 5.64:1 on white and the display magenta would be 4.18:1 — it would pass, but the rule on this site is that display magenta is for 24px and up and there is no reason to spend the exception here. top:0.92em is MEASURED, not derived, and it is nowhere near the dot's 0.62em because a rotated L is not a circle: rotating about the 6x11 box's own centre throws the drawn ink up and out of the declared box. First build used 0.34em on the arithmetic and rendered the marker ink at y=597–604 against a first text line of y=603–620 — ten pixels high, which reads as a marker attached to the row above. 0.92em puts the tick's centre on the cap-height centre of the first line, verified by counting magenta and navy pixel rows in the 1440 screenshot rather than by looking at it. */ .ng-v2 .ng-vac__list > .ng-vac__item::after{ content:''; position:absolute; left:3px; top:0.92em; width:6px; height:11px; border-radius:0; background:none; border:solid var(--ng-accent); border-width:0 2px 2px 0; transform:rotate(45deg); } /* ========================================================================== 4. PROSE FALLBACK — .ng-vac__prose The mu-plugin returns [] from ng_vacancy_requirements() when the ad copy is not a recognisable list (fewer than three lines, or any line over 200 characters) and the template then renders the author's prose untouched rather than forcing a shape onto it. NONE of the eight published ads take this branch today — all eight yield 8 to 14 clean lines — so nothing below has been seen on a live page. It is styled anyway, and minimally: an ad edited into a paragraph tomorrow should land on the same plate at the same left edge as the list it replaced, not as bare text on the ground. .ng-prose (17px/1.7 muted, its own p/ul/ol/blockquote/ table rules) does the rest and is not restated. (0,2,0), the same as `.ng-v2 .ng-prose`'s max-width:70ch — this file loads later so it wins on order, and 70ch at 17px is 750px, which ng-post.css already measured as far too wide for continuous prose. */ .ng-v2 .ng-vac__prose{ max-width:var(--ng-vac-col); padding:26px 32px; background:var(--ng-surface); border:1px solid var(--ng-hairline); border-radius:var(--ng-radius); box-shadow:var(--ng-shadow-card); } /* ========================================================================== 5. THE CLOSING BAND — the second apply button Almost entirely ng-shared §9 plus ng-foundation §3's .is-dark palette. Two things are wrong with it in THIS band and only in this band, and both are the same cause: the template writes `class="ng-eyebrow"` and `class="ng-actions"` where every other page on the site writes `ng-cta__eyebrow` and `ng-cta__actions`. So the two rules ng-shared has for those classes — a margin reset and a 32px top — do not reach this markup, and the theme's bare `p{margin:1.875em 0}` at (0,0,1) fills the gap with 24px it was never asked for. Restored to the shared values rather than to new ones; flagged in the report, because adding the two classes to the template deletes this block. NOT restated: the band's inherited `color`. .is-dark sets it at source in ng-foundation.css §3 and a local copy of a shared dark-palette fix is exactly the divergence ng-post.css records removing. ========================================================================== */ .ng-v2 .ng-vac__cta .ng-eyebrow{ margin:0; } .ng-v2 .ng-vac__cta .ng-actions{ margin-top:32px; } /* A 54ch lede centred under a 20ch title reads as a paragraph that escaped rather than as a closing line. Same finding, same number, as ng-post.css §7 — and the Turkish string here is 108 characters, so it sets in three lines at 46ch and in two at 54ch with a very short last one. */ .ng-v2 .ng-vac__cta .ng-cta__lede{ max-width:46ch; } /* ========================================================================== 6. OTHER OPEN ROLES ng-shared's .ng-section-head, .ng-grid--3 and .ng-card--link do essentially all of it. Two additions. ========================================================================== */ /* .ng-actions opens with 28px; directly after a card grid that reads as a fourth, empty row. Same value ng-post.css §8 settled on for the same shape. */ .ng-v2 .ng-vac__allrow{ margin-top:32px; } /* AN AFFORDANCE ON A CARD THAT HAS NO WORDS TO SPARE. Every other .ng-card--link on this site closes with a .ng-card__link verb line ("İlanın tamamı →" on /kariyer/, "Daha fazla →" on the leaves) and that line is what says the card is a link. This template gives each card a meta line and a title and nothing else, so on a touch screen — where the hover lift in ng-shared §6 never fires — there is no affordance at all. The arrow is the site's own → , pinned to the bottom of the card by the flex column so three cards with one- and two-line titles still close on one baseline. --ng-accent at 18px, 5.64:1 on white. COST, STATED: this is a glyph in CSS `content`, so some screen readers will announce it after the card's accessible name — "Full time · İstanbul, Yazılım Geliştirici, right arrow". That is noise, not misinformation, and the alternative was a card that does not look clickable on the device most candidates will read it on. The durable fix is a verb line in the template; flagged in the report. The hover shift is inside `any-hover:hover` (on a touch screen :hover sticks after the tap, ng-shared §6's finding) AND inside `prefers-reduced-motion:no-preference`, so a reduce preference drops the whole rule rather than needing an !important to cancel one — this file has no !important and does not need the escape hatch ng-shared §10 needed. */ .ng-v2 .ng-vac__grid .ng-card--link::after{ content:'\2192'; margin-top:auto; padding-top:18px; font-family:var(--ng-font-display); font-weight:600; font-size:18px; line-height:1; color:var(--ng-accent); transition:transform .16s cubic-bezier(.25,.46,.45,.94); } @media (any-hover:hover) and (prefers-reduced-motion:no-preference){ .ng-v2 .ng-vac__grid .ng-card--link:hover::after{ transform:translate3d(4px,0,0); } } /* ========================================================================== 7. MOBILE AND TABLET ========================================================================== TOUCH TARGETS ARE NOT PATCHED HERE, DELIBERATELY, and this note is the reason the next person will not re-add them. Every interactive element on this view is a .ng-btn (masthead apply, masthead all-roles, CTA apply, other-roles all-roles), a .ng-crumbs__link, or a .ng-card--link whose target is the whole card. The first two are in ng-mobile.css §7 — the site's single hit-area block, at `max-width:1024px`, covering min-height AND min-width — and the third is 300x110 at its smallest. This file adds NO interactive element of its own, so it owes none. The 1024px off-by-one had to be fixed three times on this site precisely because the rule lived in several files at once; adding a fourth copy here would be the fourth round. If a future edit to this file DOES add a control, it is this file's job to size it — min-width as well as min-height. Nothing below re-scopes a 44px rule to 767 and reintroduces the tablet hole. -------------------------------------------------------------------------- */ @media (max-width:767px){ /* Band rhythm. These have to be restated because §1's unconditional rules are (0,2,0) in a later file and therefore win inside ng-foundation.css's own `@media (max-width:640px){ .ng-v2 .ng-section{padding-block:44px} }`. Left alone, a phone would render the desktop 46/48/60 values. */ .ng-v2 .ng-vac__head{ padding-block:20px 34px; } .ng-v2 .ng-vac__reqs{ padding-block:38px 44px; } .ng-v2 .ng-vac__title.ng-vac__title{ margin-top:14px; letter-spacing:-0.024em; max-width:none; /* 16ch of a 35px headline is narrower than the column */ } /* 26px of column gap, not 44: at 342px the three facts wrap to 2 + 1 either way, and the tighter gap is what keeps "ÇALIŞMA ŞEKLİ" and "LOKASYON" on one row rather than three rows of one fact each. The value stays 18px — it is over the 16px mobile reading floor and shrinking the one thing a candidate scans for on a phone would be the "desktop, shrunk" tell. */ .ng-v2 .ng-vac__facts{ margin-top:24px; padding-top:18px; gap:14px 26px; } /* The plate loses its inset. 32px of padding inside the container's own 24px is 56px of chrome around a 274px line. 16px keeps the edge and gives the text back 32px, which is four characters a line at this size. */ .ng-v2 .ng-vac__list, .ng-v2 .ng-vac__prose{ padding-inline:20px; } .ng-v2 .ng-vac__list{ padding-block:10px; } .ng-v2 .ng-vac__prose{ padding-block:22px; } /* 16px is the contract's mobile floor and it is also the desktop size here — unlike a card body or a lede, a requirement line does not step down on desktop, so there is nothing to step back up. Only the row pitch tightens: at 274px of text most Turkish lines set in two, so 12px of padding on a 50px box became 14 rows of 74px and a 1030px scroll. 11px is 40px of that back without letting two rows touch. */ .ng-v2 .ng-vac__list > .ng-vac__item{ padding-top:11px; padding-bottom:11px; max-width:none; } } /* ========================================================================== 8. HEADING-MARGIN DEFENCE — the index ng-shared.css §11 asks every page file to extend. Neuros ships `body .content-wrapper h?:not(:first-child){margin-top:50px}` at (0,2,2), and it has beaten a (0,2,0) heading rule on every Elementor page in this project. IT CANNOT REACH THIS TEMPLATE: single-vacancy.php renders outside .content-wrapper and the served HTML contains the string zero times. Grepped, not assumed — the same check ng-post.css §10 records, because defending against a rule that does not apply is how a stylesheet accumulates cargo. The one page-level heading class is doubled anyway, and not out of superstition: ng-vacancy.php filters `theme_mod_page_title_status` to 'off' for this post type rather than the value being set per post, and if that filter is ever removed the theme reinstates its own wrapper markup around the title. The doubling costs one repeated class and removes the whole class of failure. .ng-vac__title §2 (0,3,0) The other three headings on this page are ng-shared's and are already doubled there: .ng-section-head__title (x2, the requirements and other-roles bands) and .ng-cta__title (the closing band). No h3 rule is written here — the other-roles cards use .ng-card__title, doubled in ng-shared §6. ========================================================================== */