@charset "UTF-8"; /* WPK Notary — v3 SHARED LAYER. Loaded on every v3 page, after assets/css/v2/styles.css and before that page's own file. The split is the one assets/css/v2/ already uses: this holds what more than one page needs, the page file holds its own bands. It exists because the certification chain now appears twice - TAUGHT on the home page as four stages, DETAILED on the services page - and copying ninety lines of track CSS into a second file is exactly the Role-Before-Component failure this project spent a whole pass removing. One device, one definition, two levels of detail. Like the page files, this defines NO colour, NO radius, NO shadow and - since --v3-type-hero was retired on 2 September 2026 - NO type size of its own. Everything else resolves to a v2 token. Two thresholds only, 1024px and 768px. */ :root { /* --- band density ------------------------------------------------------- The v2 page gave all seven bands clamp(48px, 7vw, 96px), so the whole page read at one pace. Three roles instead. Normal stays on .v2-band. */ --v3-pad-tight: clamp(28px, 3.5vw, 44px); --v3-pad-airy: clamp(64px, 9vw, 128px); /* --- hero scale: RETIRED, and the reasoning is worth keeping --------------- --v3-type-hero was clamp(30px, 5.6vw, 84px) and reached ~84px at 1440, against the 52px the rest of the site tops out at. The argument was that v2 topped out at 4% of the viewport so nothing was ever actually big. The owner's read, 2 September 2026, was "too big and too thick, in your face" - and measurement agreed: at 1440 the headline ran FOUR lines at 80.6px/700 while every other v3 page's H1 was two lines at 52px/600. One page in six was shouting, which is exactly what made the home page read as the odd one out. The H1 now takes --type-display-page, the declared role its five siblings use, so the v3 layer invents no type size at all. Two lines instead of four, and the certification chain fits above the fold - which is the page's actual proof. THE 30px FLOOR was the one part the system protected, and it lives on inside --type-display-page: "และบริการทางกฎหมาย" at 32px measures ~290px against the 284px a 320px screen leaves, and overflowed by 6px. Keep any replacement clamp floored at 30px. */ /* The rail's marks column. Was 232px, which left the rule and the eyebrow floating in a half-empty gutter that read as an accident rather than a device. At 152px the marks sit tight to the reading column and behave like a margin note, which is what they are. */ --v3-rail-col: 152px; /* The rail's own gutter. Named because the article page computes its container width from it - rail column + this + the 820px reading column - and a literal copy there would drift the moment either number moves. */ --v3-rail-gap: clamp(24px, 3vw, 40px); /* Named because the chain rule's width is computed from it - see .v3-chaintrack. */ --v3-chain-gap: clamp(20px, 3vw, 32px); /* The station mark. 48px is the icon-plate size the design system already defines; the chain reuses it rather than inventing a diagram-only dimension. */ --v3-plate: 48px; /* --- the reading role ----------------------------------------------------- DESIGN.md declares Reading as "400, 17px Sarabun, 1.75, article body and FAQ answers only" - a documented role that was never tokenised, so both pages that use it set the family and the size as literals. Declared here because the FAQ and the article page both need it and neither should own it. Sarabun is absent from tokens/fonts.css on purpose: it is requested per page in index.php via $v2_page_font, so the four pages that show no long-form reading never download it. The fallback matters - if that request is missing, this must degrade to the body face rather than to a system serif. */ --font-reading: 'Sarabun', var(--font-body); --type-reading: 17px; } /* ------------------------------------------------------------------ the rail */ .v3-rail { display: grid; grid-template-columns: var(--v3-rail-col) minmax(0, 1fr); gap: var(--v3-rail-gap); align-items: start; } /* The marks sit on the reading column's first baseline rather than the band's top edge, so the rule reads as attached to the heading it introduces. */ .v3-rail__mark { padding-top: 6px; } .v3-rail__mark .v2-eyebrow { margin-top: 12px; } .v3-rail__mark .v2-badgepill { margin-top: 12px; } /* ------------------------------------------- 6. the certification chain track The page's signature. Four stages of one certification chain on a SINGLE unbroken rule, with the nodes sitting on the rule rather than the rule being cut between them. That is the argument made visually: PRODUCT.md's first positioning claim is the whole chain under one roof, and a segmented track would draw three handoffs. The device survives both breakpoints, which the rail does not: the rule runs horizontally across four columns on desktop and vertically down the left edge on a phone, and the nodes stay on it either way. */ .v3-chain__title { margin: 0; } .v3-chain__lead { margin: 18px 0 0; max-width: var(--measure-lead); } .v3-chaintrack { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--v3-chain-gap); } /* THE unbroken rule - one element, not four borders, so the picture never draws a handoff between stages. It STOPS AT THE LAST NODE instead of running to the container edge. As a plain border-top it spanned the full width, leaving a bare gold segment past สถานทูตปลายทาง that reads as a fifth, unnamed stage - in a chain diagram that is not a cosmetic issue, it is a false claim about the process. The width is exact rather than eyeballed. With four equal columns and gap g in a track of width W, each column is (W - 3g)/4 and the last node sits at W minus one column, which is 0.75W + 0.75g. */ .v3-chaintrack::before { content: ""; position: absolute; /* Half the plate, so the rule passes through the centre of every station. */ top: calc(var(--v3-plate) / 2); left: 0; width: calc(75% + 0.75 * var(--v3-chain-gap)); border-top: var(--rule-gold-on-dark); } .v3-station { position: relative; } /* THE STATION MARK. This replaced an 8px dot. The dot was the correct idea at the wrong weight: a 2px rule carrying four 8px dots under a 40px heading made the band's heading larger than the thing it introduced, and the track - the page's whole argument - read as a divider. Asked where the chain had gone, a reader could not find it. The plate is opaque and sits ON the rule, so the line passes BEHIND it. Same reason the rule is one element and not four borders: nothing in the picture may suggest the document is handed between separate parties. It also does a second job. Both critiques found that the four stages were bare Thai nouns to a first-timer who does not know นิติกรณ์; a stamp, a government building and a language mark are readable before the words are. */ .v3-station__plate { display: grid; place-items: center; position: relative; z-index: 1; width: var(--v3-plate); height: var(--v3-plate); border-radius: var(--radius-full); background: var(--surface-dark); border: 2px solid var(--accent-gold-on-dark); color: var(--accent-gold-on-dark); } /* Stages 2 and 3 are the same kind of step; what separates them is whether it happens at all. Dashed says conditional without a legend, and ใช้เมื่อปลายทางกำหนด is printed as the stage's first note so the picture is never the only place that fact lives. */ .v3-station--conditional .v3-station__plate { border-style: dashed; } /* .v3-station__step held the ขั้นที่ N label. Removed with the numbers: those belong to the three certification stages on the services page, and translation is not one of them, so on a track that shows all four they put "ขั้นที่ 1" on the second station. The rule and the reading order carry the sequence without them. */ .v3-station__name { display: block; /* The ขั้นที่ label used to supply this gap. With the label gone the name sat hard under the plate, so the spacing is now stated rather than inherited from a deleted element. */ margin-top: clamp(14px, 1.6vw, 18px); font-size: var(--type-title); line-height: var(--lh-title); font-weight: var(--weight-semibold); letter-spacing: var(--thai-tracking); color: var(--text-on-dark); text-wrap: pretty; } .v3-station__note { display: block; margin-top: 8px; font-size: var(--type-meta); line-height: var(--lh-label); letter-spacing: var(--thai-tracking); color: var(--text-on-dark-soft); text-wrap: pretty; } /* The rule is navy, not gold: the band already spends its one gold rule above the heading, and three more would make gold the loudest thing on a quiet page. */ /* .v3-step, .v3-step__num and .v3-step__title were deleted with the client-process band. The chain track above replaced it. */ /* ------------------------------------------------------------------ links */ /* A text link that carries a button's job. Used where a second pill would make the reader choose between two equal-looking actions before reading anything. */ .v3-textlink { /* Works on AND on