/* ========================================================================== AMIN APAC, shared stylesheet Built on the AMIN Worldwide design system (MD/www.aminworldwide.com-DESIGN.md) Contents 01. Design tokens 02. Reset & base 03. Typography 04. Layout utilities 05. Buttons & links 06. Cards, tiles & tags 07. Site header 08. Site footer 09. Masthead (dark plum hero, shared by profile page + slide-in panel) 10. Stat bar 11. Page: map + directory 12. Page: member profile 13. Slide-in profile panel 14. Responsive 15. Reduced motion ========================================================================== */ /* ========================================================================== 01. Design tokens ========================================================================== */ :root{ /* Brand purples */ --purple:#904FFF; /* Electric Purple, primary signature */ --purple-deep:#7A00DF; /* Deep Purple, focus and hover */ --plum:#3A2364; /* Deep Plum, dark surfaces and accents */ --plum-rgb:58 35 100; /* same colour, unpacked for scrubbed alpha */ --lavender:#D3B9FF; /* Light Lavender, soft accent */ --pale:#F4EDFF; /* Pale Purple, tinted surfaces */ /* Neutrals */ --black:#000000; --white:#FFFFFF; --slate:#212934; /* body copy */ --gray:#333333; /* secondary text */ --ash:#4A4E57; /* placeholder / inactive */ --offwhite:#F9F9FB; --mist:#EFEFF2; /* neutral chip fill */ --haze:#F4F4F7; /* filled card surface */ --line:#E2E2E2; /* Scrollbar thumb. One mid tone, because the panel's track runs over both the plum masthead and the white body and cannot change colour between them. Picked for the tightest of the two: 3.42:1 on white, 3.83:1 on plum, so it clears the 3:1 non-text contrast floor at both ends of the track. */ --scroll-thumb:#8F86A8; /* The site's dark. It was written raw as #14161A in hero-map.css and footer.css before this token existed - the hero stage, the footer ground and now the neutral button are all one colour and should move together. */ --ink:#14161A; --ink-rgb:20 22 26; /* same colour, unpacked for scrubbed alpha */ /* Semantic THE ERROR RED IS A THREE-VALUE SET, not one hue, because an error state is a surface, an ink and a line and they cannot be the same number. It is declared here rather than inside a component sheet for the reason tech-audit.css already wrote down while working around its absence: brief-form.css held #FDECEC and #8E1B1B as raw hex, tech-audit.css needed the same idea and could not reference them, so it mixed its own from --red and left a note saying the page must not end up with two reds meaning the same thing. Two sheets had already solved this separately. Now there is one set and every red on the site resolves to it. --red the line. Borders and the thickened invalid outline. --red-bg the surface. Only ever behind --red-ink. --red-ink the text. 7.4:1 on --red-bg, which is what lets a message carry meaning in words as well as in colour. COLOUR IS NEVER THE ONLY SIGNAL. base.css's standing rule: an invalid field carries a border AND a message that names the field, because a red box on its own is not readable to everybody who has to read it. */ --green:#65BC7B; --red:#CF2E2E; --red-bg:#FDECEC; --red-ink:#8E1B1B; /* THE SIX DISCIPLINE HUES, moved here from network-graph.css because a second feature now uses them and a colour declared inside one component's sheet is a colour the next feature copies rather than reuses. network-graph.css's own reasoning for the set is left where it was written: six hues anchored on the brand purple, which goes to the largest cluster rather than to whichever discipline sounded most important, far enough apart on the wheel to be told apart at 10px, and warm/cool balanced so no half of a graph reads as louder than the other. THEY MEAN A DISCIPLINE, and any second use has to earn the rhyme rather than borrow the palette. The tools wall earns it by mapping each tool to the discipline it actually serves - the audit is the digital-and-performance tool, the launch check is the market-entry one - so a reader who has seen the constellation on index reads the wall correctly rather than being told the same colour means two things. Anything that cannot make that mapping honestly should not use these. Unpacked triples beside them, the same idiom as --plum-rgb, so a feature can scrub one back to a wash without a second declaration of the same colour. */ --d-brand :#904FFF; --d-brand-rgb :144 79 255; /* Brand & campaigns */ --d-digital:#2F6BE3; --d-digital-rgb: 47 107 227; /* Digital & performance */ --d-b2b :#14897A; --d-b2b-rgb : 20 137 122; /* B2B & market entry */ --d-content:#E8632F; --d-content-rgb:232 99 47; /* Content & production */ --d-pr :#E0407A; --d-pr-rgb :224 64 122; /* PR & public affairs */ --d-media :#F0A81E; --d-media-rgb :240 168 30; /* Media & activation */ /* THE THREE EDITION HUES, and they are a SECOND SET rather than three more of the set above. --d-* has exactly six members because there are exactly six disciplines; the newsletter's other three categories - the watchlist, the tools, the network - are not disciplines and must not be filed as though they were, or the mapping the six are declared for stops being true. THEY SHARED --plum FOR A DAY AND THAT WAS WRONG (2026-08-31). Three cards in one colour beside six in six colours does not read as "these three are a different kind of thing"; it reads as three cards whose colour did not get set. A category that is worth listing separately is worth telling apart. PICKED FROM THE GAPS, NOT INVENTED. The six sit at 17, 39, 172, 220, 262 and 338 degrees, which leaves exactly three clean spaces on the wheel - green, cyan and magenta. The tightest gap the three create is 22 degrees, which is the same as the tightest gap the six already had between content and media, so nothing here is harder to tell apart than what shipped. Both saturation and lightness sit inside the existing set's range, so the nine read as one family rather than six plus three. THE MAPPING IS NOT ARBITRARY. Cyan is the signal colour and the watchlist is a forward signal; green passes and the tools return a reading; magenta is the neighbour of the brand violet and the network IS the brand. */ --e-watch :#0F9BC7; --e-watch-rgb : 15 155 199; /* What we're watching */ --e-tools :#1BA85C; --e-tools-rgb : 27 168 92; /* New free tools */ --e-network:#C733D9; --e-network-rgb:199 51 217; /* The network */ /* Globe, the world is cool blue so that purple means one thing on the map: a member is here. Blue sits next to purple on the wheel, so the field stays harmonious with the brand instead of competing with it. */ --globe-land:#C3C8D6; /* rest of the world */ --globe-apac:#6E93D6; /* the region, lifted out of it */ --globe-ocean:#E9EDF6; --globe-grat:#DBE3F1; /* graticule */ --globe-limb:#E1E5EE; /* Selection. The dots rest in green, so the selected one takes the brand purple, which is also what its card, panel and tile are painted in, so opening a city and landing on its card read as one colour. */ --pin-active:#0A8A4F; --pin-active-ink:#064E2C; /* selected label - darker than hover, and bold */ --pin-hover-ink:#0B6B3E; /* hover label, echoing the green pin */ /* The longitude ramp: deep plum in the west to electric purple in the east. Endpoints are all sanctioned brand purples. */ --ramp:linear-gradient(90deg,#3A2364,#7A00DF,#904FFF); /* Spacing, 4px base scale */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px; --s9:36px; --s10:40px; --s11:44px; --s12:48px; --s13:52px; --s14:56px; /* SECTION TIER. The scale above is a 4px COMPONENT scale and stops at 56px - nothing on it can space a 1360px-wide section, so every band on the site was padded with whichever of --s11..--s14 was reached for that day. Measured at 1440 that produced four values doing one job (44, 48, 52, 56) and a content-to-content rhythm of 96-112px, which is tight against this measure and a 64px h2, and which collapsed unevenly on mobile - 72px between two sections while another held at 112. Each token is ONE SIDE. The rhythm between two adjacent sections is double it, because both contribute. --sec therefore reads as 96px on a phone and 144px on a wide desktop. THE RULE: block padding on a section comes from these three and nowhere else, it goes on the
and never on its .wrap, and it is symmetric unless a comment states why not. Fluid so the rhythm stays proportional without a media query - the old per-breakpoint overrides are gone. */ --sec-sm: clamp(40px, 4.4vw, 64px); /* -> 80-128px rhythm. A band that belongs to the section above it, not its own. */ --sec: clamp(56px, 6.6vw, 96px); /* -> 112-192px rhythm. The default. */ --sec-lg: clamp(72px, 8.4vw, 120px); /* -> 144-240px rhythm. A section that has to be isolated to do its job. */ /* SECTION SURFACES. Two tones, and the rule is that ADJACENT SECTIONS MUST DIFFER - the tone change is the separator, so no section needs a border to be told apart from its neighbour. This replaced a 1px --line border-top on .hub, .tl-how and .tl-faq. Those existed because the alternation had already collided: .netsec and .hub were both --offwhite and sat next to each other, so a hairline was drawn to do the job the surface was supposed to do. A border between two sections 189px apart is a rule across the page, not a separator - nothing that far apart needs help being read as separate. PANELS INVERT. A panel on --surface takes --haze; a panel on --surface-alt takes --white. That is what keeps a card readable on either ground and is the reason a section can be flipped without redrawing its contents. */ --surface: var(--white); /* #FFFFFF */ --surface-alt: var(--offwhite); /* #F9F9FB */ /* MOTION. cubic-bezier(.2,.7,.3,1) was written out by hand 29 times across eight stylesheets before this token existed. It is the site's one easing curve and now has one name; a second curve needs a second token and a stated reason, not another literal. */ --ease: cubic-bezier(.2,.7,.3,1); --dur-line: 260ms; /* the underline wipe - see .u-line */ /* UNDERLINE. One rule weight and one offset for every animated underline on the site, so a link in the footer and a link in a paragraph are the same component at different sizes. */ --u-h: 2px; --u-gap: 3px; /* Raised once already. The first tier ran 48/72 for --sec and still read tight against a 1360px measure - the failure of a 4px component scale is that it makes 48 feel like a large number when it is a small one at this width. TO RETUNE: change the clamp MAXIMA and leave the minima alone. The minima are the phone floor and are not the thing that ever felt cramped. */ /* Radius scales with the surface it wraps: --r-lg for full cards, --r-md for compact rows. --r-md was left at 8px when the cards moved to 24 and it now reads as a different design language on the only element using it. 16px is the concentric choice: a 69px row padded 12px wants its inner tile at outer-minus-padding, and --r-sm (4px) is already exactly that. */ --r-sharp:0px; --r-sm:4px; --r-md:16px; --r-lg:24px; --r-pill:24px; /* Elevation */ --e-subtle:0px 2px 4px rgba(0,0,0,.08); --e-card:0px 4px 12px rgba(0,0,0,.08); --e-high:0px 8px 24px rgba(0,0,0,.12); --e-max:0px 12px 32px rgba(0,0,0,.16); /* SYSTEM EXTENSION, declared rather than dropped in. The ladder above is built for CARDS - things about 320px across sitting in a grid - and every rung is ONE blur. At card size that is right and cheap. On a panel 880px wide it fails twice over: a 12px blur under an 880px box is a smudge along the bottom edge and nothing at the sides, so the panel has to fall back on a 1px --line to have an edge at all - and then the hairline is doing the work the elevation was supposed to do, which is why a big panel reads as a drawn rectangle rather than a raised sheet. --e-panel is four layers because a large surface needs each of them: 1. a 1px ring, which REPLACES the border - the edge is now part of the elevation instead of a second system describing the same line 2. a tight contact shadow that seats the panel on its ground 3. a mid shadow, negative spread, that gives the sides an edge at all 4. a wide ambient one, heavily pulled in, that carries the lift --ink-rgb, not black. Pure black over --surface-alt goes muddy grey; the site's own dark keeps the shade in the same family as the footer and the hero stage. WHERE IT APPLIES: full-width panels - things that hold a whole section rather than sit in a grid of siblings. Today that is .db-gate alone. A card in a column stays on --e-card; putting a 64px blur under a 200px box is the same mistake in the other direction. The choice is made PER COMPONENT, not per width. .db-gate keeps --e-panel down to 390px, where it is only 350px wide and most of the ambient layer goes unseen, because a panel that swaps elevation kind on resize reads as two different components to anyone who resizes. One component, one rung. */ --e-panel: 0 0 0 1px rgb(var(--ink-rgb) / .06), 0 2px 4px rgb(var(--ink-rgb) / .04), 0 12px 24px -8px rgb(var(--ink-rgb) / .08), 0 32px 64px -24px rgb(var(--ink-rgb) / .14); /* Focus ring ----------------------------------------------------------- ONE thickness for the whole site, declared here so it cannot drift a pixel per stylesheet. The ring was 3px at offset 2 and on a field that read as two edges - the control's own 1px border, a gap, then a 3px halo outside it - which is four pixels of purple around something that only asked to be focused. --focus-off is the gap a BUTTON, LINK or PILL keeps outside itself: those have no border of their own, so the ring has to sit off the shape to be seen. --focus-in is the same ring drawn INSIDE a FIELD's edge, painting over the 1px border it already has, so a focused input, textarea or select reads as one 2px border rather than as a border plus a halo. 2px of --purple-deep is still 3:1 against both --white and --mist and clears the 2px perimeter WCAG 2.4.13 asks for. Do not go to 1px. */ --focus-w:2px; --focus-c:var(--purple-deep); --focus-off:2px; --focus-in:-2px; /* Layering */ --z-base:2; --z-dropdown:99; --z-header:100; --z-modal:2000; /* Width of the docked profile panel */ --panel-w:520px; /* Type */ --font:'Libre Franklin',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,Consolas,'SF Mono',monospace; /* Per-member accent, overridden inline from the city ramp colour */ --ac:var(--purple); } /* ========================================================================== 02. Reset & base ========================================================================== */ *{box-sizing:border-box;margin:0} html{scroll-behavior:smooth} body{ background:var(--white); color:var(--slate); font-family:var(--font); font-size:18px; font-weight:400; line-height:27px; } img{max-width:100%} button{font:inherit;color:inherit} /* Grid and flex children ignore the hidden attribute unless it is asserted. */ [hidden]{display:none!important} :focus-visible{outline:var(--focus-w) solid var(--focus-c);outline-offset:var(--focus-off)} /* ========================================================================== 03. Typography ========================================================================== */ h1,h2,h3,h4{color:var(--black);letter-spacing:0;text-wrap:balance} /* --- Tracking ------------------------------------------------------------ THE RULE: tracking tightens as size grows, and the negative range starts at the h3 step. Nothing below 30px carries it. The scale had sizes and line-heights and no tracking at all, so every heading on the site was set at the 16px body's spacing. That is correct at 16px and wrong at 56, where the space between letters is drawn 3.5x larger than it was designed to be and the line reads as a row of separate words rather than a phrase. Type at display size needs LESS tracking, not the same amount. -.02 / -.015 / -.01 across display / h2 / h3. The steps are proportional to the size steps, so a heading tightens as it grows rather than one size being special. THE ONE EXCEPTION THIS PARAGRAPH USED TO RECORD IS GONE. It was .signup-h in brief-form.css, 23px at -.01em, predating the rule and left alone because it was a footer heading with no sibling at its size. The newsletter band was removed on 2026-08-28 and that heading went with it, so the scale above is now uniform with nothing sitting outside it. */ .t-display{font-size:clamp(48px,6.4vw,72px);font-weight:400;line-height:1.0;letter-spacing:-.02em} /* 1.1, not 1.25. At 56px the old value drew 70px lines, so a two-line closer headline carried 14px of air between them and the two lines read as two statements. Display leading belongs near the type size; 1.25 is a BODY ratio, and it was the body's ratio applied to a heading three times the body's size. 61.6px at 56, still clear of the descenders. */ .t-h2{font-size:clamp(36px,4.4vw,56px);font-weight:500;line-height:1.1;letter-spacing:-.015em} .t-h3{font-size:30px;font-weight:500;line-height:37.5px;letter-spacing:-.01em} .t-h4{font-size:22px;font-weight:500;line-height:27.5px} .t-body{font-size:18px;font-weight:400;line-height:27px} .t-meta{font-size:12px;font-weight:400;line-height:18px} .mono{font-family:var(--mono);font-size:13px;line-height:19.5px} /* Section eyebrow, small uppercase label above a heading. Grey, not purple: at 12px the brand purple only reaches 4.42:1 on white, and the label should not compete with the purple emphasis in the heading directly beneath it. */ .eyebrow{ font-size:12px;line-height:18px;font-weight:500; letter-spacing:.14em;text-transform:uppercase; color:var(--gray); } .lede{font-size:18px;line-height:27px;color:var(--gray)} .muted{color:var(--gray)} /* Hyphenated proper nouns must not break across lines - "Asia-" / "Pacific" at the display size reads as a typo. */ .nb{white-space:nowrap} /* --- Line breaking ------------------------------------------------------- No line ends up carrying a single word. Two rules, because the two kinds of text want different things: balance, short display strings that are read as a shape (headings, taglines, blurbs, captions). Evens every line, so a two-line tagline never leaves "world." stranded underneath. Browsers cap it at a few lines, which is exactly the range these strings live in. pretty, running copy, where balancing whole paragraphs would be wrong. It only guards the end, pulling a word down rather than orphaning one. Both degrade to normal wrapping where unsupported: worse typography, never broken layout. Balance does the heavy lifting. Pretty is deliberately NOT applied site-wide: measured across five widths it orphans short strings that wrap cleanly on their own, so it is kept to the paragraph elements it helps. Three cases CSS cannot reach, fixed at source instead: a heading that missed its column by 7px (sized down at 479px), a blurb one word too long (reworded), and "X & y" footer links, where the only two-line split without a lone word is the one balance will not pick, so the ampersand is bound forward with   in the markup. Verified 0 orphans at 1440/1024/768/390/320px. */ h1,h2,h3,h4,li,a, .tagline,.lede,.blurb,.loc,.note,.pop-hint,.grid-empty,.stat dt, .related-t b,.related-t span{ text-wrap:balance; } p,dd,figcaption,blockquote{text-wrap:pretty} /* ========================================================================== 04. Layout utilities ========================================================================== */ .wrap{max-width:1400px;margin:0 auto;padding:0 var(--s6)} /* The generic section utilities, on the tier like everything else. Nothing in the markup uses them today, which is exactly why they mattered: left at --s12 and --s8 they were a trap for the next section that reached for a ready-made class and silently got the old, tight spacing back. */ .section{padding:var(--sec) 0} .section-tight{padding:var(--sec-sm) 0} .stack-sm > * + *{margin-top:var(--s3)} .stack > * + *{margin-top:var(--s4)} /* ========================================================================== 05. Buttons & links ========================================================================== */ .btn{ display:inline-block;position:relative;overflow:hidden;isolation:isolate; padding:12px 20px; font-family:var(--font);font-size:16px;font-weight:500;line-height:normal; border:0;border-radius:var(--r-pill); text-decoration:none;cursor:pointer;white-space:nowrap; transition:background-color 200ms ease-in-out,color 200ms ease-in-out, transform 180ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms cubic-bezier(.2,.7,.3,1); } /* Directional fill. The darker colour wipes in from the left rather than the whole face switching at once, so the button reads as answering the cursor. West to east, the same direction as the map ramp and the footer rule. scaleX on a pseudo-element, not a width or background-position change: it is the one property here the compositor can animate without relayout or repaint. */ .btn-fill::before{ content:"";position:absolute;inset:0;z-index:-1; background:var(--fill); transform:scaleX(0);transform-origin:left center; transition:transform 380ms cubic-bezier(.2,.7,.3,1); } .btn-fill:hover::before, .btn-fill:focus-visible::before{transform:scaleX(1)} /* A 1px lift and a tinted shadow. Small enough to register as weight shifting rather than the element jumping - and it never moves neighbouring content, since transform does not affect layout. */ .btn-fill:hover, .btn-fill:focus-visible{transform:translateY(-1px);box-shadow:var(--lift)} /* Press returns it to the surface and drops the shadow: down is the only direction a click should feel like. Faster than the lift, as contact is instant where the approach is gradual. */ .btn-fill:active{ transform:translateY(0);box-shadow:none; transition-duration:80ms; } /* Primary, filled electric purple */ .btn-primary{ background:var(--purple);color:var(--white); --fill:var(--purple-deep); --lift:0 6px 16px rgba(122,0,223,.34); } .btn-primary:hover{color:var(--white)} .btn-primary:active{background:var(--plum)} /* ========================================================================== NEUTRAL, and the rule it exists to enforce: PURPLE IS THE NETWORK. BLACK IS EVERYTHING ELSE. .btn-primary is reserved for the one action that starts a relationship with the network - brief the network, send brief, send my request, get in touch, start my daily brief. Everything else that has to look like a filled button takes this one: navigation, in-page utilities, external links, show-more, copy, build. WHY. Audited across six pages, purple was on four filled buttons on index alone, where "All field notes" and "Filter the directory" carried exactly the weight of "Brief the network". A signature colour spent on navigation stops being a signature, and the primary had no more pull than the utility beside it. .btn-secondary survives, but narrowly: it is the quiet COMPANION to a purple primary standing in the same row, where a black button would read as a second equal action rather than a subordinate one. Standalone utilities took neutral instead - a lavender button on its own was a primary in a soft voice. The face is --ink, the same dark the hero stage and the footer already use, so the button belongs to a colour the page has already met rather than introducing a second black. THE WIPE GOES TO PLUM, AND IT USED TO GO TO BLACK. Every filled button on this site answers the cursor with the same directional fill, and on this one alone you could not see it happen: #14161A to #000000 is a six-point shift, which is a wipe that technically runs and visibly does not. Measured against the primary beside it - #904FFF to #7A00DF - the mechanism was identical and the result was nothing. A hover that only a devtools panel can see is a hover that is not there. --plum is the right destination and not merely a visible one. It is a colour this site already uses as a dark ground, so the button is still travelling between two darks the page has met; it carries the brand's hue without being the brand's SIGNATURE, which keeps the rule above intact - electric purple still belongs to the one action that starts a relationship with the network, and a utility button wiping to plum is not competing for it. It lightens rather than darkens, which is the one place this button departs from the family. There is nowhere darker than --ink to go, and direction of travel matters less here than whether the travel is visible at all. The lift's shadow follows the wipe rather than the face, the way the primary's already does: rgba(122,0,223,.34) under purple, plum under this. */ .btn-neutral{ background:var(--ink);color:var(--white); --fill:var(--plum); --lift:0 6px 16px rgba(58,35,100,.34); } .btn-neutral:hover,.btn-neutral:focus-visible{color:var(--white)} /* Press holds where the wipe landed rather than jumping to a fourth value. */ .btn-neutral:active{background:var(--plum)} /* Secondary, filled lavender. It takes the same wipe, lift and press as the primary - only the colours are quieter. The two sit side by side in the panel footer, and one answering the cursor while the other just changed colour read as the second one being broken. Filled, not keylined. Every other pill on this site is a fill - .tag, .peer, .tag-btn, .net-key - and each of those dropped its outline for the same reason: a hairline round a control draws the box before it draws the label. The secondary was the last outline left, which made it the odd one out rather than the quiet one. Lavender, not pale. The closers put this button on --mist (#EFEFF2), and #F4EDFF on #EFEFF2 is not a pill, it is a smudge. #D3B9FF separates from both white and mist, and plum on it is 7.6:1 - the label stays the strongest thing in the button. Saturated purple is left to the primary beside it. Padding is 12/20, the base .btn value: the old 10/18 existed only to pay for two pixels of border, so removing the border returns the box to standard and a primary and a secondary in a row keep the exact height they had. */ .btn-secondary{ background:var(--lavender);color:var(--plum);border:0;padding:12px 20px; /* One step down the same hue rather than a new token: the wipe has to darken from #D3B9FF without becoming the primary's signature purple. */ --fill:color-mix(in srgb,var(--lavender) 84%,var(--plum)); --lift:0 6px 16px rgba(122,0,223,.18); /* softer than primary's .34 */ } /* No background here: the wipe supplies the darker ground, and setting it too would flood the whole face at once and cancel the direction. The ink holds at plum through all three states. It clears 4.5:1 on the rest fill and on the darker wipe alike, so nothing shifts under the cursor except the ground - which is the one thing the wipe is for. */ .btn-secondary:hover{color:var(--plum)} .btn-secondary:active{background:color-mix(in srgb,var(--lavender) 84%,var(--plum));color:var(--plum)} /* On dark plum surfaces */ .btn-on-dark{ background:var(--white);color:var(--plum); --fill:var(--lavender); --lift:0 6px 18px rgba(0,0,0,.28); } .btn-on-dark:hover{color:var(--plum)} /* The dark-surface secondary. Filled for the same reason .btn-secondary is: a translucent white fill separates from a plum or photographic ground on its own, and the keyline was only ever standing in for one. .16 is the lowest alpha that still reads as a pill over the hero's darkest frame; the wipe takes it to .28. Padding returns to the base 12/20 with the border gone, so the box does not change size. */ .btn-on-dark-ghost{ background:rgba(255,255,255,.16);color:var(--white);border:0;padding:12px 20px; --fill:rgba(255,255,255,.28); --lift:0 6px 18px rgba(0,0,0,.28); } .btn-on-dark-ghost:hover{color:var(--white)} /* ========================================================================== THE UNDERLINE, and it draws first letter to last. WHY IT WIPES AND WHY IT WIPES THAT WAY. The site already has a stated direction: .btn-fill's darker face scales in from the left, and the note there reads "West to east, the same direction as the map ramp and the footer rule." The underlines were the one interactive surface not following it - they simply appeared, all at once, which reads as a state being switched rather than an element answering the cursor. WHAT IT REPLACED. Three mechanisms doing one job, none of them animatable in a direction: .btn-ghost box-shadow:inset 0 -2px 0 - fades in across its whole width .link text-decoration:underline - binary, cannot transition .footer-col a text-decoration + offset - same, plus its own offset value Three underline treatments meant three chances to drift and no way to make any of them move. This is one. A BACKGROUND GRADIENT, not a ::after. A pseudo-element needs a positioning context and gets clipped by any overflow:hidden ancestor; background-size works on a plain inline inside a running paragraph, which is where most of these links actually live. IT ENTERS LEFT AND LEAVES RIGHT. background-position is not transitioned, so it snaps: on hover the rule is anchored left and grows to full width; on exit the anchor snaps right and the width collapses toward it. The line therefore sweeps THROUGH the word in one direction rather than rewinding back the way it came. ========================================================================== */ .u-line, .link, .btn-ghost, .footer-col a, .footer-legal a{ text-decoration:none; background-image:linear-gradient(currentColor,currentColor); background-repeat:no-repeat; background-size:0% var(--u-h); background-position:100% 100%; transition:background-size var(--dur-line) var(--ease), color 180ms ease-in-out; } .u-line:hover, .u-line:focus-visible, .link:hover, .link:focus-visible, .btn-ghost:hover, .btn-ghost:focus-visible, .footer-col a:hover, .footer-col a:focus-visible, .footer-legal a:hover,.footer-legal a:focus-visible{ background-size:100% var(--u-h); background-position:0 100%; } /* Ghost, text-only action. Keeps the button's padding so it still sits on a control's baseline in a row of buttons; the rule comes from .u-line above. */ .btn-ghost{background-color:transparent;color:var(--purple);border-radius:var(--r-sharp);padding:12px 0} .btn-ghost:hover{color:var(--purple-deep)} a{color:var(--purple)} .link{color:var(--purple);font-weight:500} /* A