/* ========================================================================== AMIN APAC - profile-v2, page system Loaded by profile-v2.html only. Every rule here is scoped to body.pf-v. WHY THIS FILE EXISTS. profile-v2 was built in five passes - hero, story, approach, services, clients - each in its own stylesheet, each internally well argued, and none of them reconciled to the others. Audited 2026-09-02 at 1920/1440/1024/768/390, the page was running thirteen type sizes of which base.css declares four; three section eyebrows in two families, two colours and three gaps; two display weights that alternated as size DESCENDED; four body sizes across five leading ratios; and two tone-change seams 32px apart. None of that was broken. It was five correct local answers that could no longer be read as one ladder - and the point at which a system stops being derivable is the point at which it stops being a system. WHAT BELONGS HERE: anything true of the PAGE rather than of one band. The ladder below, the eyebrow, the button tier, the seam rule. Anything true of one band stays in that band's own sheet and references these tokens, so the local reasoning survives where it was written. WHY NOT IN base.css: base serves fourteen pages. This ladder is one page's, it is fluid where base's is fixed, and it tops out above base's display step because this page opens on a full-bleed video hero. Promoting it would move every other page's headings. ========================================================================== */ body.pf-v{ /* ---- the display steps ---------------------------------------------- 600 at every one of them, which is the correction. The hero was 600, the approach heading 500 and the service names 600 - so the LARGEST type on the page was the lightest of the three and the ladder flickered as it descended. 600 wins because the hero already set it, and the hero is the one step nobody proposed changing. Tracking tightens as size grows, per base.css's standing rule. The hero keeps its own -.042em: it is roughly 2.5x --pf-d1 and it sits on video rather than paper, so it is a genuinely different setting, and it stays declared inline where its container-query term lives. */ --pf-d1: clamp(40px, 5.6vw, 84px); /* .approach-head */ --pf-d2: clamp(34px, 4.6vw, 68px); /* .svc-name */ /* ---- the heading steps ---------------------------------------------- Every one fluid, and that is item 4 of the audit. .story-head was the one fixed heading on the page - 34px from 390 to 1920 - so below 768 it overtook .svc-h2 (floored at 30) and the hierarchy inverted on exactly the devices with least room for it to. The desktop cap is unchanged at 34, so the wide layout is byte-identical; only the phone moves. Negative tracking starts at 30px and not before, which is base.css's rule verbatim. --pf-h4 and --pf-h5 therefore carry none. */ --pf-h2: clamp(30px, 3.6vw, 46px); /* .svc-h2 */ --pf-h3: clamp(26px, 2.4vw, 34px); /* .story-head */ --pf-h4: 26px; /* .profile-block h2 */ --pf-h5: 20px; /* .trust-lab */ --pf-lede: clamp(20px, 1.9vw, 30px); /* .approach-lede */ /* ---- the prose steps ------------------------------------------------- TWO SIZES ON ONE LEADING, replacing four sizes across five ratios. 18 is the page's prose; 17 is its secondary prose, and the approach band's own note argues that step for reasons that still hold. They share a 27px line rather than a 1.5 ratio, which is deliberate: two sizes on one baseline is a stronger rhythm than two sizes on one ratio, and the baseline is the half a reader can actually see. 16/24 is the meta step - sub-service lists and the like. Ratio 1.5, matching the prose above it. */ --pf-body: 18px; --pf-body-sm: 17px; --pf-line: 27px; --pf-meta: 16px; --pf-meta-line: 24px; } /* -------------------------------------------------------------------------- The eyebrow One label, repeated in three bands, that agreed with itself nowhere: the story band set it in ui-monospace at --gray with 24px under it, the other two in Libre Franklin at --ash with 40px and 20px. The --ash in both was a copy-paste - those two rules are the same four declarations - and neither file records leaving base.css's --gray. RESOLVED TO THE TOKEN, not to the majority. base.css's .eyebrow is Libre Franklin at --gray, two of the three were already there, and a band that deviates without a note is drift by definition rather than by opinion. THE MONO IS THE ONE JUDGEMENT CALL IN THIS FILE, and it reverses in one declaration: put font-family:var(--mono) back on .story-eyebrow in css/profile-story.css. It is a good detail. It is also the only mono on the page outside the hero's clock, and one band wearing it made the other two look unfinished rather than making that one look considered. If it comes back, it comes back on all three. -------------------------------------------------------------------------- */ /* AN INHERITED VARIABLE, NOT A FLAT COLOUR, and the services band is why. This selector is (0,2,0) and .svc-eyebrow's own rule is (0,1,0), so when that band went dark on 2026-09-02 this rule kept winning and printed a --gray eyebrow on --ink at 1.43:1 - the unification rule making one band unreadable in the name of consistency. Out-specifying it back would start a specificity argument between two files. A variable ends it: the eyebrow asks its section what ink to use and the default is the token. .svc sets --eyebrow-ink to its own --svc-lo; nothing else sets it, so the other two bands are unchanged. Same move base.css's --dim makes for the same reason. */ body.pf-v .story-eyebrow, body.pf-v .approach-eyebrow, body.pf-v .svc-eyebrow{ color: var(--eyebrow-ink, var(--gray)); } /* -------------------------------------------------------------------------- The sticky bar's two actions The bar now carries the page's primary action (Brief) plus a demoted text link out to the member's own site - see the note beside the markup in profile-v2.html for why the button changed. THE SUBORDINATION IS WEIGHT, NOT SIZE. A filled pill against plain text is an unambiguous ranking at a glance; two pills at different sizes is a ranking the reader has to work out. .link is base.css's own text-link treatment, so this introduces nothing. MARGIN-LEFT ON THE LINK, NOT THE BUTTON. .pf-bar-clock already carries margin-left:auto and is what pushes the actions to the right edge; the clock is display:none under 900px, so hanging the auto margin off the button would have left both actions floating mid-bar at exactly the widths with least room. The link takes a fixed gap and the pair travels together. -------------------------------------------------------------------------- */ body.pf-v .pf-bar-visit{ margin-left:var(--s5); font-size:13px; white-space:nowrap; } body.pf-v .pf-bar-brief{ margin-left:var(--s4); flex:none; } /* NARROW: the link goes, the button stays. Below 900px the clock is already gone and the switcher needs the room; the way out to the member's own site is still in the closer, twice, while the brief is the thing this page is for. The old rule in css/profile.css dropped the bar's only action here because it was Visit - that reasoning inverts now that the action is Brief. */ @media (max-width:900px){ body.pf-v .pf-bar-visit{ display:none } /* AND THE BUTTON TAKES OVER THE AUTO MARGIN. The note above says the clock is what pushes the actions to the right edge and that it is display:none from here down - so with the link gone too, NOTHING was pushing. Measured at 768 and 900 the pill's right edge sat at 455px in a 768px bar: floating in the middle of the row, level with nothing. Right-aligned everywhere or it is not a bar. */ body.pf-v .pf-bar-brief{ margin-left:auto } } /* -------------------------------------------------------------------------- The button tier Three heights on one page: 43 (the hero and handoff CTAs), 39 (.blk-more, the "see all" control on the work and writing blocks) and 35 (the sticky header's Visit website). 43 against 35 is a tier. 39 against 35 is two spellings of "small" four pixels apart, which reads as a rendering error rather than as a decision. .blk-more joins the compact tier. It is a secondary control beside a 26px block heading; the page tier belongs to the two CTAs that ask for the conversion. SCOPED, because css/writing.css is shared with profile.html, dashboard.html and eleven generated member pages. body.pf-v .blk-more is (0,2,0) against that file's (0,1,0), so this wins wherever it loads and changes nothing anywhere else. -------------------------------------------------------------------------- */ body.pf-v .blk-more{ padding: 8px 18px; } /* -------------------------------------------------------------------------- Binding the last two steps --pf-h4 and --pf-h5 already existed as raw numbers - 26px on .profile-block h2 in base.css, 20px on .trust-lab. The trust label reads its token in css/profile-clients.css; this binds the other one. IT IS THE SAME VALUE, ON PURPOSE. Nothing moves. What changes is where the number lives: with this rule the page's ladder is the authority for every heading on the page, so the next person to restep it edits one block rather than finding out from a screenshot that one heading was declared somewhere else. base.css keeps its 26px for the fourteen other pages that use it. -------------------------------------------------------------------------- */ body.pf-v .profile-block h2{ font-size: var(--pf-h4); } /* -------------------------------------------------------------------------- The seam Two rules, and between them they describe every join on this page: same ground --sec 96 at 1440 tone change --sec-sm + --sec 160 at 1440 base.css's surface rule makes the TONE CHANGE the separator, so a seam that changes ground gets the extra air and a seam that does not gets one padding. That was already true at story -> approach -> trust (96 each) and at trust -> svc (64 + 96 = 160). It was not true at svc -> the work blocks, which ran 96 + 96 = 190: the same kind of seam as trust -> svc, 32px wider, for no reason either file records. The band ABOVE a tone change pays --sec-sm and the band below pays --sec. Stating it that way rather than as a total is what makes it applicable to the next band somebody adds. -------------------------------------------------------------------------- */ body.pf-v .svc{ padding-bottom: var(--sec-sm); } body.pf-v .wrap.profile-cols{ padding-bottom: var(--sec-sm); } /* THE ONE NAMED EXCEPTION: the closer. It pays --sec-lg rather than --sec on its own top edge, which base.css argues at length - it is the page's ask and isolation is what earns it - so the last seam on the page is 64 + 120 = 184 rather than 160. That is the exception behaving as declared, not the rule leaking. Without the line above it was 96 + 120 = 215, which was the exception AND the doubling, stacked. The closer's button is the matching case in the tier above: 51px against the page tier's 43, deliberately the largest control on the page for the same reason. Both are the closer being the closer. */ /* -------------------------------------------------------------------------- The sticky bar over the dark band .pf-bar is rgb(255 255 255 / .86) with a 14px backdrop blur - correct over the six white bands and wrong over one. With .svc dark, a translucent WHITE bar sits across the top of a near-black section as a hard bright strip, and the blur makes it worse rather than better: it samples the dark ground and renders a grey smear that belongs to neither surface. The bar inverts for the length of that section and back out again. It is a chrome response to the page under it, which is why it lives here rather than in css/profile-services.css - that file owns the band, not the furniture. THE BUTTON HAS TO INVERT TOO, and it is the reason this is not a one-line background swap. .pf-bar .btn is .btn-neutral, whose fill IS --ink - the same value the band now uses - so on the dark bar it would be an invisible rectangle with white text floating in it. It flips to a white fill with --ink text, which is the same button at the same weight with the ground and the ink exchanged. MEASURED on the bar's own resolved ground (--ink at .88 over --ink, so effectively --ink): name #FFFFFF 17.8:1 locality rgb(255 255 255 / .66) 8.0:1 clock label rgb(255 255 255 / .66) 8.0:1 clock digits#FFFFFF 17.8:1 hairline rgb(255 255 255 / .12) - a border, not text The transition matches .pf-bar's own .32s so the inversion arrives with the scroll rather than snapping a frame after it. Colour only - the bar's transform and opacity transitions are untouched. -------------------------------------------------------------------------- */ body.pf-v .pf-bar{ transition:transform .32s cubic-bezier(.2,.7,.2,1), opacity .28s ease, background-color .32s ease, border-color .32s ease; } body.pf-v .pf-bar.is-dark{ background:rgb(20 22 26 / .88); border-bottom-color:rgb(255 255 255 / .12); } /* .pf-switch, NOT .pf-bar-id. The first cut of this block targeted .pf-bar-id and did nothing: the identity in this bar is the MEMBER SWITCHER (.pf-switch > .pf-switch-id > b + span), and .pf-bar-id is the older markup it replaced. Caught by reading the rendered colours, which came back rgb(0,0,0) on a near-black bar - the failure is invisible in the CSS and obvious the moment anything is measured. */ body.pf-v .pf-bar.is-dark .pf-switch-id b, body.pf-v .pf-bar.is-dark .pf-bar-clock b{ color:#fff } body.pf-v .pf-bar.is-dark .pf-switch-id span, body.pf-v .pf-bar.is-dark .pf-bar-clock{ color:rgb(255 255 255 / .66) } /* THE VISIT LINK, NOT A BUTTON ANY MORE. The bar's action changed to the primary Brief pill on 2026-09-02 and Visit became .link text beside it - which moved the problem rather than removing it. base.css sets .link to --purple, and --purple measures 4.1:1 on --ink: fine as a 68px display colour in the band below, under the 4.5:1 floor for 13px text up here. --lavender at 10.5:1 is the same family and clears it. The Brief pill needs nothing: it is a filled surface, so what matters is its own white-on-purple at 4.42:1, unchanged from every other primary button on the site, and the purple fill reads clearly at 4.1:1 against the bar as a SHAPE, where the 3:1 non-text floor applies. THE .btn-neutral RULE THAT WAS HERE IS GONE WITH IT - that was the old Visit button and this bar no longer has one. .btn-neutral survives elsewhere on the page (#pfVisitEnd in the closer), but the closer is never dark. */ body.pf-v .pf-bar.is-dark .pf-bar-visit{ color:var(--lavender) } /* The switcher is borderless at rest and declares itself on hover - see the note in css/profile.css - so only the states that paint something need answering. --pale is a light lavender fill: correct on white, a bright patch on --ink. */ body.pf-v .pf-bar.is-dark .pf-switch:hover, body.pf-v .pf-bar.is-dark .pf-switch[aria-expanded="true"]{ background:rgb(255 255 255 / .10); } /* The caret is --ash at rest and --plum on hover. --ash is 4.3:1 on --ink, which is legible but reads as disabled next to a white name; --plum on a dark ground is very nearly the ground. Both go to white at the alphas the name and the locality already use, so the lockup stays one object. */ body.pf-v .pf-bar.is-dark .pf-switch-caret{ border-right-color:rgb(255 255 255 / .55); border-bottom-color:rgb(255 255 255 / .55); } body.pf-v .pf-bar.is-dark .pf-switch:hover .pf-switch-caret{ border-right-color:#fff; border-bottom-color:#fff; } /* REDUCED MOTION: the inversion is a state change, not an animation, so it still happens - it just happens at once. */ @media (prefers-reduced-motion: reduce){ body.pf-v .pf-bar{ transition:none } }