/* * ShareRing design tokens. * The single source of truth for the visual system. Custom properties only. * Portable by design: this file carries to any future theme unchanged. */ :root { /* Colour: surfaces */ --sr-canvas: #FFFFFF; --sr-tint: #F5F6F8; --sr-dark: #0B0E33; /* Colour: ink */ --sr-ink: #0A0D31; --sr-ink-soft: rgba(10, 13, 49, 0.68); --sr-ink-invert: #FFFFFF; --sr-ink-invert-soft: rgba(255, 255, 255, 0.76); --sr-ink-invert-faint: rgba(255, 255, 255, 0.56); /* Colour: brand. * * These are the ShareRing hues, and the only ones the sitewide chrome * (header, footer, blog, focus states) is allowed to draw from. * * --sr-brand is the company blue. It is the dominant colour on the live site * and the fill under every CTA there, so it is the fill under every CTA here. * --sr-brand-deep is the deep indigo that sits beside it on the live home * page; it earns a token as the pressed/hover partner for the blue, which * keeps a hover state a real brand colour rather than a computed darkening. * --sr-brand-lift is the blue raised until it carries on --sr-dark: the brand * blue itself is only 1.75:1 against the dark footer, so on dark grounds the * chrome uses this instead. */ --sr-brand: #010ED0; --sr-brand-deep: #1B1464; --sr-brand-lift: #4E7CFF; --sr-eyebrow: #0A0557; /* Colour: chrome roles. * * Components name a role, never a hue. The -on-dark pair exists because a * single accent value cannot serve both a white header and a navy footer; * .sr-footer rebinds the role tokens to them, so every component rule stays * written once. */ --sr-chrome-accent: var(--sr-brand); --sr-chrome-accent-on-dark: var(--sr-brand-lift); --sr-focus-ring: var(--sr-brand); --sr-focus-ring-on-dark: var(--sr-brand-lift); --sr-cta-surface: var(--sr-brand); --sr-cta-surface-hover: var(--sr-brand-deep); --sr-cta-ink: var(--sr-ink-invert); /* Colour: cinema hues. DigitalMe and future journey pages ONLY. * * These are scene colour, not brand colour. They must not be referenced from * header.css, footer.css, posts.css or base.css, and nothing in the sitewide * chrome may resolve to one of them. Magenta above all: it is not a ShareRing * brand colour and appears nowhere on the live site. It belongs to the Digital * Me cinema and stays there. */ --sr-cinema-indigo: #4653D6; --sr-cinema-violet: #7A5CD6; --sr-cinema-magenta: #FF3D8C; --sr-cinema-blue: #2E6FD8; --sr-cinema-green: #2FA173; /* Type: one face, sitewide, SIL OFL */ --font-ui: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif; /* Code is the one place a second face is legitimate. Three pages set code in JetBrains Mono, Courier New and bare monospace respectively; naming the face here is what lets the enforcement layer sweep every other stray family onto --font-ui without dragging code along with it. */ --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, monospace; --type-display: clamp(2.75rem, 1.6rem + 4.8vw, 5.25rem); --type-h1: clamp(2.25rem, 1.5rem + 3.1vw, 3.75rem); --type-h2: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem); --type-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem); /* The page content runs to six heading levels, the scale above stops at three. h4 is not a new step: it is the lead step, which is where 24px lands, so it is an alias rather than a new size that would have to be kept in sync. h5 is a genuinely new rung, the only one the ladder was missing, and it exists so that h4 and h5 do not collapse into each other. h6 is body. */ --type-h4: var(--type-lead); --type-h5: clamp(1rem, 0.96rem + 0.2vw, 1.125rem); --type-lead: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); --type-body: 1rem; --type-eyebrow: 0.8125rem; --type-caption: 0.875rem; /* The bottom rung, and the only thing on it: a badge riding on a menu row. The eyebrow is a section's own caption and is sized to be read from across the page; a NEW pill is read from inside the row it is attached to, and set at eyebrow it outweighs the logotype it is meant to annotate. */ --type-badge: 0.6875rem; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.6; --tracking-tight: -0.02em; --tracking-eyebrow: 0.08em; /* Spacing: 8px base */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 2.5rem; --space-8: 3rem; --space-9: 4rem; --space-10: 6rem; --space-11: 8rem; --space-12: 12rem; /* Layout */ --content-max: 1200px; --measure: 68ch; --section-y: clamp(3.5rem, 2rem + 6vw, 7.5rem); --gutter: clamp(1rem, 0.5rem + 2vw, 2rem); /* Media. The proportions the listing crops featured images to, and the depth an excerpt is allowed to reach before it is cut. Named here rather than left as literals in posts.css because a card's crop is a system decision: the day a second component shows a post image, it has to show it at the same shape. */ --ratio-card: 16 / 10; --ratio-feature: 3 / 2; --clamp-excerpt: 3; /* Shape */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* The hairline, as a colour and as a shorthand. The colour has to exist on its own because Elementor sets border-color as a standalone property and cannot consume a shorthand; the shorthand stays because every component so far writes the border in one declaration. One value, two shapes. */ --sr-hairline: rgba(10, 13, 49, 0.10); --sr-hairline-invert: rgba(255, 255, 255, 0.14); --border-hairline: 1px solid var(--sr-hairline); --border-hairline-invert: 1px solid var(--sr-hairline-invert); /* Border width. One value in use across every component so far (the header's open-group and burger rules, the footer's top rule and link-hover rule), so one token, not a scale. Split into a scale if a second thickness shows up. */ --rule: 2px; /* Elevation, navy-tinted */ --shadow-sm: 0 1px 2px rgba(10, 13, 49, 0.06); --shadow-md: 0 8px 24px rgba(10, 13, 49, 0.08); --shadow-lg: 0 24px 64px rgba(10, 13, 49, 0.12); /* Motion */ --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-fast: 140ms; --dur-base: 240ms; --dur-slow: 420ms; /* Viewport height that survives mobile browser chrome. */ --vph: 100dvh; /* Chrome */ --header-h: 72px; --z-header: 100; --z-drawer: 200; /* The ShareRing logo, in the header and in the footer. * * WHAT THE NUMBER HAS TO HIT. The client's note when this was 2rem was that * the wordmark top left "is very small ... it does not suit the rest of the * text". The fix was a cap height, not a box height: the wordmark's cap now * lands at 12.3px, a little larger than the 11.5px cap of the 1rem nav links * beside it and a little smaller than the CTA pills' own, which is where a * logo belongs. It leads the row without shouting at it. The ring's ink lands * at 22px inside a 72px bar, so the header keeps its air. * * WHY 1.375rem AND NOT 3rem. It was 3rem, and it drew the same mark at the * same size, because the file changed underneath it on 2026-09-02. The * retired sharering-logo-navy.svg was mostly air: a 198-unit box around ink * only 89.75 units tall, so more than half the box was margin and the box * height meant nothing on its own. The 2026 kit file is INK CROPPED, so its * box IS its ink. 3rem of the new file would have drawn a mark half again as * large as the old one. 1.375rem of it is the same mark, the same size, on * the same baseline: ring 22px against 21.8px before, cap 12.29px against * 12.28px. * * Read the box as a box, never as the mark. Both files are vectors, so * either is crisp at any size; only the ratio of ink to box moved. */ --sr-brand-logo-h: 1.375rem; --sr-header-logo-h: var(--sr-brand-logo-h); /* Product logotypes: the optical registry. * * The Products flyout, the footer's Products column and the home page's * product tiles show each product's own logotype rather than its name set in * Inter Tight. Six marks drawn by different hands, at different weights, with * different lockups. * * THE SIZING RULE CHANGED, ON THE CLIENT'S EXPLICIT INSTRUCTION: "make the * text size for each Wordmark so they all match as closely as possible". * This registry used to set each mark on its own optical weight, so a mark * that led with a solid glyph was deliberately set smaller than a hairline * wordmark. That is a defensible way to hang a shelf of logos and it is not * what was asked for. Six marks now read at ONE letter size. * * "One size" for logotypes is not one box height. The six files have wildly * different internal proportions (DigitalMe is a wordmark and nothing else; * ShareLedger and Prove are a glyph plus a wordmark; Me Modules is a display * "me" with a caption-sized "Modules" under it; ShareRing Me and ShareRing * Link are the corporate lockup with the product word beside it), so equal * boxes would produce wildly UNEQUAL lettering, which is the ransom note the * client is looking at. What is matched is the LETTERING: * * --sr-logo-cap the one number the whole shelf is now hung from: the cap * height every product's lettering is drawn to. 0.75rem is * 12px, which is where 1rem of Inter Tight puts its own cap, * so a logotype reads at the size of the menu it sits in. * * --sr-logo-h-* each mark's rendered height, DERIVED rather than chosen: * --sr-logo-cap multiplied by the reciprocal of that file's * own cap fraction. Every fraction below was measured, not * guessed: each file was rasterised to a canvas at 1200px * wide, segmented into its ink columns, and the letters of * the wordmark found by their own ink rows (the flat cap of * the "D" in Digitalme, the ascender of the "h" in Share, * the "P" of Prove, the "h" of ShareRing inside the lockup). * Multiply, never divide: calc() takes a length times a * number without complaint, and every number here is a * reciprocal for exactly that reason. * * --sr-logo-r-* where that logotype's own BASELINE falls, as a fraction of * the asset's full height. It is what lets the row lay every * mark on one baseline instead of centring six different * bounding boxes and calling it aligned. Unchanged by the * resizing above, and it survives it BY CONSTRUCTION: it is * a fraction of the height, not a length. * * --sr-logo-x-* how far the mark's own INK sits inside the left edge of * its file, expressed as a multiple of the rendered height * so it survives being resized: (left inset as a fraction of * the asset's width) x (the asset's aspect ratio). Every one * of these files carries a different amount of transparent * air on its left. Laid out in a row, nobody could see it. * Stacked in a column, it is a ragged left edge four pixels * deep, and it is the first thing you see. The mark is pulled * back by its own inset so that the INK, not the bounding * box, starts on the same vertical rule. * * --sr-logo-baseline is the shared line every mark sits on, measured down * from the top of the well, and it is where 1rem of Inter Tight puts its own * baseline in a --sr-logo-well line box. So a row that ever loses its mark * falls back to its name, set in type, on exactly the line the logotypes sit * on. * * The numbers are per PRODUCT, not per file. Each reversed mark was re-seated * on its colour counterpart's canvas geometry when it was brought in, so one * registry serves both grounds. Re-measured on both grounds during this pass: * the two agree to within 1.6% on ShareLedger and 3.7% on DigitalMe (whose * white PNG is drawn very slightly larger inside its box than its colour * twin), which is 0.45px of cap at the size these are drawn at. The rest are * the same geometry to the pixel. */ --sr-logo-well: var(--space-6); --sr-logo-baseline: 1.375rem; --sr-logo-cap: 0.75rem; /* DigitalMe. A wordmark and nothing else. Cap = the flat "D": 121.1 of the file's 288, so 0.4205 of the height, so 2.378 of the cap. */ --sr-logo-m-digital-me: 1.4859; --sr-logo-h-digital-me: calc(var(--sr-logo-cap) * var(--sr-logo-m-digital-me)); --sr-logo-capmid-digital-me: 0.33650; --sr-logo-r-digital-me: 0.647; --sr-logo-x-digital-me: 0; /* Right-edge ink inset, the mirror of --sr-logo-x, and used only by the Digital Me PAPER rows (the two technical-paper links that show the wordmark BESIDE a descriptor: see .sr-paper in header.css and footer.css). The stacked product rows never need it because nothing sits to the right of the mark there; the paper rows do, so the file's own right air is trimmed off and the gap to the descriptor is set cleanly in the component. The two-colour file carries ink to x 818 of 865 (46px air, 0.0532 of the width, 0.160 of the rendered height); the white file to 204 of 216 (0.0509 of the width, 0.153 of the height). One token at 0.160 serves both, half a pixel apart at the size these draw. */ --sr-logo-rx-digital-me: 0.160; /* ShareLedger. Glyph plus wordmark. Cap = the ascender of the "h" in Share: 24.8 of 60, so 0.4133 of the height, so 2.419 of the cap. The glyph comes up to 23px at that size; it is bigger than the letters, which is how the mark is drawn, and it is no longer being shrunk to apologise for that. */ /* Swapped again on 2026-08-31, from the 480x118 PNG to the new kit's 457x100 SVG. NEW ARTWORK, not a new export of the old: the isometric blue cube is gone and the mark is now a ledger book holding the ShareRing ring, monochrome navy. So all three numbers are re-measured from the file rather than carried over. Measured off the rendered SVG at 200px: cap top at row 56, baseline at row 138, so the cap is 0.415 of the box and the height multiple is 2.41. That lands within 0.01 of the 2.419 the comment above derived by hand for the same wordmark, which is the check that the measurement is right rather than a coincidence that it is close. x is now 0, where the old PNG needed 0.100. The kit's -transparent files are cropped tight to the ink, so there is no left air to pull back; pulling anyway would have hung the book a tenth of its height into the panel's left rule. r moves 0.638 -> 0.695 because the descender of the "g" sits lower in this drawing relative to the box. */ --sr-logo-m-shareledger: 1.3728; --sr-logo-h-shareledger: calc(var(--sr-logo-cap) * var(--sr-logo-m-shareledger)); --sr-logo-capmid-shareledger: 0.36420; --sr-logo-r-shareledger: 0.693; --sr-logo-x-shareledger: 0; /* Me Modules. Was the hard one, and is no longer. * * The stacked lockup put a display-size lowercase "me" over "Modules" set * tiny beneath it, and the note that used to sit here said the quiet part * out loud: at nav size "Modules" was 2.4px of ink, the mark read as "me" * whichever way it was sized, no scaling of that file could fix it, and only * a horizontal lockup would. That lockup now exists. * * It is built from the brand's own outlines. Nothing was redrawn: the two * path groups from me-modules-navy-primary.svg are placed on one baseline * with "Modules" scaled 2.6x, so the letterforms are the designer's. * * Sized to keep the "me" x-height at 9.64px, exactly where the stacked mark * put it, because the client's original complaint was two rows showing the * word "me" at two different sizes. That constraint is unchanged. What * changes is everything underneath it: "Modules" now renders at 8.74px of * cap rather than 2.4px, because it is 0.828 of a horizontal file instead of * 0.153 of a stacked one. The whole mark draws 110px wide inside a column * with about 170px to give. * * The stacked pair is kept on disk, unreferenced, in case the horizontal one * is ever rejected. */ --sr-logo-m-me-modules: 1.0144; --sr-logo-h-me-modules: calc(var(--sr-logo-cap) * var(--sr-logo-m-me-modules)); --sr-logo-capmid-me-modules: 0.49290; --sr-logo-r-me-modules: 0.948; --sr-logo-x-me-modules: 0; /* Prove. Glyph plus wordmark. Cap = the "P": 209.4 of the file's 607.3, so 0.3448 of the height, so 2.900 of the cap, the tallest box on the shelf. The box is tall because the mark's ring hangs well below the wordmark's baseline inside the file, not because the lettering is big: the letters are 12px like everything else, and the ink still lands inside the well. */ --sr-logo-m-prove: 1.3582; --sr-logo-h-prove: calc(var(--sr-logo-cap) * var(--sr-logo-m-prove)); --sr-logo-capmid-prove: 0.36815; --sr-logo-r-prove: 0.693; --sr-logo-x-prove: 0; /* ShareRing Link and ShareRing Me. The two products that were names. * * Their logotype is not a product wordmark like the four above: it is the * corporate lockup with the product word set beside it (ring + "ShareRing" + * "link"). That is the only form the brand has ever drawn for them, and the * only one that says what the thing IS: the wordmark on its own is the single * lowercase word "link", or "me", which beside "me Modules" is a riddle. * * The numbers below are the DARK file's (sharering-link-lockup-white.svg, * 605x113), measured the same way as the four above. * * WHICH LETTERING IS MATCHED, because this lockup has two kinds and they are * not the same size in the brand's own drawing. The cap-bearing lettering is * "ShareRing" (ascender of the "h": 57.0 of the file's 113, so 0.5044 of the * height, so 1.982 of the cap). The product word beside it, "link" or "me", * is drawn smaller: at the size this lockup now takes, its ascender lands at * 8.8px and the "me" x-height at 8.8px, against a 12px cap. That ratio is the * BRAND'S, baked into the artboard, and it is not ours to correct. * * Matching on the product word instead was tried and rejected: it would take * the lockup to a 32px box, put the ring at 30px, and make these two rows the * biggest things in the panel by half again. That is the mark-plus-wordmark * blow-up the client is not asking for. Matching on "ShareRing" puts the * cap-bearing letters of these two marks on the same 12px line as the caps of * the other four, and the lockup comes out SMALLER than it was before this * change, not bigger. * * r is the shared baseline the lockup's own "ShareRing" and "link" both sit * on; x is the transparent air on its left edge, 0.040 of the rendered height. * * Both products take identical numbers because the two artboards are the same * lockup with a different last word. Measured, not assumed: the ring, the * wordmark and the baseline land on the same pixels in both files. The nav's * COMPOSED navy lockup reproduces the same geometry (see --sr-lockup-* below): * its "ShareRing" cap works out at 0.5052 of the height against the dark * file's 0.5044, a sixteenth of a pixel apart, which is the check that the * composition really is the file drawn in two pieces. */ /* REMEASURED 2026-09-01 against CAP HEIGHT, which is the third and correct metric. The first matched box height and drew a stacked lockup a third the size of a horizontal one. The second matched ink extent, cap top to descender foot, and that flatters any wordmark without a descender: "me Modules" has none, "ShareRing me" has the g, so equal ink extent made Me Modules visibly the largest thing in the menu. What is matched now is cap top to BASELINE, and the baseline is found as the modal bottom-of-ink across the wordmark's columns, because most letters sit on it and only the descenders hang below. Cap height is what the eye reads as "the same size", which is what the client asked for in the first place. Superseded note follows, kept because its arithmetic still holds: DERIVED rather than picked. Every lockup was rasterised at 400px tall and its wordmark ink measured between the glyph gap and the right edge: cap top to descender foot as a fraction of file height (Link 0.730, Me 0.655, ShareLedger 0.565, Prove 0.5825), and the descender foot's own position as a fraction of it. Matching the LETTERING and not the box means m x inkFraction is held constant, with ShareLedger as the datum (2.41 x 0.565 = 1.3617). Prove falls out of the same arithmetic at exactly ShareLedger's 0.695 baseline, which is the check that the method is reading the artwork rather than fitting it. Both products draw a LOCKUP FILE now, not the ringless composition, so these describe a different artboard: see the note in inc/nav.php. Link is a 2026-08-31 kit lockup, 100 units tall like ShareLedger's and Prove's, so it takes the same three numbers they do. Me's lockup is the brand's own file at 113 units tall and carries its own. */ --sr-logo-m-sharering-link: 1.3556; --sr-logo-h-sharering-link: calc(var(--sr-logo-cap) * var(--sr-logo-m-sharering-link)); --sr-logo-capmid-sharering-link: 0.36885; --sr-logo-r-sharering-link: 0.777; --sr-logo-x-sharering-link: 0; --sr-logo-m-sharering-me: 1.3560; --sr-logo-h-sharering-me: calc(var(--sr-logo-cap) * var(--sr-logo-m-sharering-me)); --sr-logo-capmid-sharering-me: 0.36873; --sr-logo-r-sharering-me: 0.777; --sr-logo-x-sharering-me: 0; /* THE MARK SLOT. * * Supersedes the --sr-logo-w-* text-line row that briefly lived here. That one * indented each single lockup file so the WORDMARKS shared a line; it could not * put the icons on a line as well, because a lockup file fixes the distance * between its glyph and its letters and a rule can only move the whole file. * * Splitting the artwork into a mark and a wordmark makes both lines a matter of * layout rather than arithmetic: the mark sits in a slot of fixed width, so * every icon is centred on one axis, and the wordmark starts where the slot * ends, so every wordmark begins at the same distance from the row's left edge. * Products with no glyph get the slot anyway and keep the line. * * The slot is square and sized off the cap the whole logotype shelf is hung * from, so it scales with the type rather than being a fixed pixel box. * * --sr-mark-scale-* is the per-product optical correction INSIDE that slot. * Contained in an identical square, a wide ring and an upright book do not * carry the same weight: the ring fills the width and half the height, the book * fills the height and four fifths of the width. Each factor is the multiplier * that brings that mark's ink to the same visual mass as the others. * * Derived, not picked. Each mark was drawn contained into an identical square * and its ink PIXELS counted: me-glyph 5,457, diamond 8,738, book 8,187, shield * 6,100, eye 11,458, modules 6,014 out of 40,000. Equal mass means equal area, and area goes as * the square of a linear scale, so each factor is sqrt(datum / own ink) with * the diamond as datum. That is why the open shield grows and the solid ring * shrinks: an outline of the same height carries less ink than a filled shape, * and the eye reads correct only because its own file is ink-tight. * * Every mark had to be ink-tight for this to mean anything, which is why the * ring is a fresh crop: measured against a file with padding, the arithmetic * sizes the padding rather than the mark. */ /* THE ROW PITCH. * * Rohan, 2026-09-01: "ShareLedger is too far down." * * It was, and the cause is not the artwork's alignment but its PADDING. The * wordmarks match on cap height, which is what the eye reads, but their files * carry very different amounts of air above and below the letters: at the * shelf's cap the ShareLedger wordmark's box renders 28.9px tall and the Me * Modules one 13.1px, for the same size lettering. A row sized by its content * therefore came out 49.2, 49.2, 52.4, 49.2, 52.9, and because a menu is read * as a rhythm the error accumulates: by the fifth row ShareLedger sat 7px * below where an even pitch would have put it. * * Two things fix it. This token is the first: a menu row's height is a * typographic decision, not something the artwork gets a vote on, and this is * that decision. It clears the mark slot and the tallest wordmark box, so * nothing is clipped and everything centres in it. * * The second is that the padding was removed at source. Three wordmark files * carried most of it - ShareLedger's letters filled 0.41 of its box, Prove's * 0.43, DigitalMe's 0.42 - so those three were cropped to their own ink, the * SVGs by moving the viewBox and the PNGs by trimming to the alpha bounding * box. Every wordmark is now ink-tight, which is why the cap multipliers below * cluster between 1.93 and 2.66 where they used to span 1.09 to 2.41. A tidy * spread is the sign the files agree with each other; a wild one is the sign a * number is standing in for padding. */ --sr-product-row-h: 1.5rem; --sr-mark-size: 1.25rem; --sr-mark-col: 1.75rem; --sr-mark-gap: 0.5rem; --sr-mark-scale-sharering-me: 1.225; --sr-mark-scale-sharering-link: 0.968; --sr-mark-scale-shareledger: 1; --sr-mark-scale-prove: 1.159; --sr-mark-scale-digital-me: 0.845; --sr-mark-scale-me-modules: 1.167; /* The composed light lockup. * * There is no navy lockup file. The brand drew every Link/Me lockup artboard * on a dark plate, so the white nav has nothing to place. What it does have is * both HALVES of that lockup as real brand vectors: sharering-logo-navy.svg * (ring + "ShareRing") and sharering-link-wordmark-navy.svg ("link"). So the * nav sets the two halves next to each other in the dark lockup's own * geometry, rather than recolouring a mark or drawing a lockup nobody has * signed off. * * Every number here is measured off the two files and the lockup they are * reproducing, expressed as a multiple of --sr-logo-h (the height the single * dark file would have taken), so the composed mark and the footer's file are * the same size on the same baseline by construction: * * mark-scale the corporate logo's box height. Its ring's ink is 0.45 of its * own box; the lockup's ring is 0.915 of the lockup's height; * 0.915 / 0.45 = 2.033. * mark-r where that file's own baseline falls in its box (0.596): the * wordmark's ink bottom, less the "g" descender, which is 0.205 * of the wordmark's ink height in both files. * mark-x the air on the logo file's left edge, 0.230 of its own height. * This is the ONE number the two-piece composition does not take * once it goes ringless. Both the nav and the home page's product * tiles now draw the RINGLESS "ShareRing" (the client asked for the * ring off those two rows: it is already in the header's own logo), * and that file is cropped to its ink on the left, so it carries no * air at all. header.css pins this to 0 for the nav and drawer, and * product-suite.css pins it for the tile fallback; the tile's own * single flattened wordmark carries the crop in the file. The 0.230 * survives only as the composition's built-in default. Everything * else here is common to both grounds, because the crop was * left-edge only: same box height, same right edge, so the same * cap, the same baseline and the same gap. * word-scale the product word's box height. Its ink is 0.955 of its box; * the lockup's "link" is 0.3725 of the lockup's height. * word-r the product word's baseline: it has no descender, so it is its * ink bottom, 0.975 of its box. * gap the two files' facing air adds up to 0.399 of --sr-logo-h and * the lockup's real gap is 0.195, so the word is pulled back by * the difference. Without this the "link" drifts a quarter of an * em away from the wordmark it belongs to. */ --sr-lockup-mark-scale: 2.033; --sr-lockup-mark-r: 0.596; --sr-lockup-mark-x: 0.230; --sr-lockup-word-scale: 0.390; --sr-lockup-word-r: 0.975; --sr-lockup-gap: 0.204; /* The same registry, drawn at tile size. * * The home page's product suite shows five of these same six marks, and it * shows them in a card rather than in a menu row, so they have to be bigger. * This is the ONLY new number that asks for: one multiplier, applied to the * three lengths the registry above is made of (--sr-logo-well, the height it * defines; --sr-logo-baseline, the line the marks sit on; --sr-logo-h, each * mark's own rendered height). The whole well scales as one piece. * * That is deliberately not a second sizing system. The one thing the marks * agree on, their 12px cap, is simply a 18px cap on a tile: every --sr-logo-h * is --sr-logo-cap times a constant, so multiplying the well multiplies the * cap and the six stay matched, which is the whole point of hanging them off * one number. --sr-logo-r (each mark's own baseline) and --sr-logo-x (the air * on each mark's left edge) need no multiplier at all, because both are * already expressed as fractions rather than lengths, which is precisely why * they survive this. * * 1.5 was chosen against the tile, not in the abstract. The tiles are three * across at 1440 and the widest mark is now ShareLedger (the marks were * re-sized to match their lettering, and that moved the widest one); above 1.5 * it runs into the tile's own padding and the section starts to be sized by * its longest logo instead of by its content. */ --sr-tile-logo-scale: 1.5; /* Programs: an icon beside a name, not a logotype instead of one. * * STARS has a star and nothing else. There is no STARS wordmark: the brand * sets the word in type in every piece of collateral it has, and the inventory * records the search that established that. So the chrome does the same thing * the brand does, and pairs the icon with the words "STARS Program" set in * Inter Tight. The row keeps its visible text, which is also why this is not * the product treatment: nothing is being replaced, something is being * annotated. Sized to the cap of the row it rides on, plus a little, because a * star is read as a shape and a shape needs more box than a letter. */ --sr-mark-h: 1.25rem; /* SHR exchanges: the same optical problem as the products, sideways. * * Three third-party logos, drawn by three different hands, laid out in a ROW * this time, so what has to agree is the WORDMARK'S CAP HEIGHT and the * BASELINE, not the box. Each -h is set so the exchange's name reads at the * size of the caption type it sits under; each -b is where that name's * baseline falls in its own file, as a fraction of the file's height, so the * row can drop each mark onto one line instead of centring three boxes. * * MEXC's file is tight to its ink (letters are 0.865 of the box), KuCoin's * letters are 0.578 of it, and BitMart's are 0.365, because BitMart leads with * a big glyph and carries 18% air at the top. Sized to the same box they would * be a ransom note; the numbers below are what makes them read as one row. * BitMart is set slightly under its cap-matched height on purpose, for the * same reason Prove is in the products column: the glyph is already paying for * the presence. */ --sr-ex-h-mexc: 0.902rem; --sr-ex-b-mexc: 0.932; --sr-ex-h-kucoin: 1.349rem; --sr-ex-b-kucoin: 0.788; --sr-ex-h-bitmart: 2.136rem; --sr-ex-b-bitmart: 0.682; /* Social icons. One box, six marks: these are icons drawn on a common grid (24x24 for the five vectors, a square bug for LinkedIn), so unlike the logotypes they genuinely do share a box. */ --sr-social-h: 2rem; /* was 1.5rem. Rohan 2026-09-01: social marks too small and blurry. */ /* Certification seals. Both marks are discs and both boxes are this size, so the silver ISO seal and the mounted DIATF disc come out the same diameter. The mounted one's artwork is smaller inside it by the mount's own padding, which is what makes the two outer circles agree. */ --sr-seal-h: 4rem; /* was 3rem, which left ~32px of artwork inside the mount: unreadable. */ } /* --sr-logo-m-* is the CAP MULTIPLE on its own, and --sr-logo-h-* is that multiple times the default cap. They were one token until 2026-08-28, and the split matters more than it looks: a custom property is substituted where it is DECLARED, not where it is used, so --sr-logo-h-digital-me resolves --sr-logo-cap here at :root and is frozen at 0.75rem. A component that wanted the family at a different size — the About Us hero draws them at roughly double — could override --sr-logo-cap all it liked and nothing moved except the one entry that happened to be declared on the element itself. With the ratio separated, a component sets its own cap and multiplies locally. The registry, bound to the product. These are custom properties and nothing else declares them, so they need no specificity to win and can live with the tokens they are made of. Binding them here rather than in each component is what lets the header, the drawer and the footer all draw the same mark on the same baseline while each keeps its own scoped rules for everything else. */ /* The parent ShareRing lockup, added 2026-08-28, remeasured 2026-09-02 when it moved onto the 2026 kit with the rest of the family. Nothing had needed it at a matched optical size before: the header draws it alone and the footer draws only products beside each other. Measured the same way as the rest, off the kit's own products/sharering-horizontal-navy-transparent.svg, which is what sr_brand_lockup_inline() now draws: getBBox puts the wordmark's cap top at 19.400 and a raster scan of the modal bottom of ink puts the baseline at 75.250, both in the file's 100-unit box. So the cap is 55.85 of 100, 0.5585 of it, and 1.791 of the cap. The baseline sits at 0.753 of the box. The mark sits to the LEFT of the letters here, unlike every product entry, so there is no left ink inset to correct: the lockup is drawn from its own tight box, which the kit file already is. */ .sr-product--sharering { --sr-logo-m: 1.791; --sr-logo-h: calc(var(--sr-logo-cap) * var(--sr-logo-m)); --sr-logo-r: 0.753; --sr-logo-x: 0; } .sr-product--digital-me { --sr-logo-m: var(--sr-logo-m-digital-me); --sr-logo-h: var(--sr-logo-h-digital-me); --sr-logo-r: var(--sr-logo-r-digital-me); --sr-logo-x: var(--sr-logo-x-digital-me); --sr-mark-scale: var(--sr-mark-scale-digital-me, 1); --sr-logo-capmid: var(--sr-logo-capmid-digital-me); } /* Keyed 'shareledger' to match the page slug, which deploy-db-state.sh step 3 renamed from share-ledger. The class comes from the registry key in inc/nav.php ('sr-product--' . $key), so the two must agree or the mark renders at its intrinsic size - which is what it did: 457x100 in a 190px panel. */ .sr-product--shareledger { --sr-logo-m: var(--sr-logo-m-shareledger); --sr-logo-h: var(--sr-logo-h-shareledger); --sr-logo-r: var(--sr-logo-r-shareledger); --sr-logo-x: var(--sr-logo-x-shareledger); --sr-mark-scale: var(--sr-mark-scale-shareledger, 1); --sr-logo-capmid: var(--sr-logo-capmid-shareledger); } .sr-product--me-modules { --sr-logo-m: var(--sr-logo-m-me-modules); --sr-logo-h: var(--sr-logo-h-me-modules); --sr-logo-r: var(--sr-logo-r-me-modules); --sr-logo-x: var(--sr-logo-x-me-modules); --sr-mark-scale: var(--sr-mark-scale-me-modules, 1); --sr-logo-capmid: var(--sr-logo-capmid-me-modules); } .sr-product--prove { --sr-logo-m: var(--sr-logo-m-prove); --sr-logo-h: var(--sr-logo-h-prove); --sr-logo-r: var(--sr-logo-r-prove); --sr-logo-x: var(--sr-logo-x-prove); --sr-mark-scale: var(--sr-mark-scale-prove, 1); --sr-logo-capmid: var(--sr-logo-capmid-prove); } .sr-product--sharering-link { --sr-logo-m: var(--sr-logo-m-sharering-link); --sr-logo-h: var(--sr-logo-h-sharering-link); --sr-logo-r: var(--sr-logo-r-sharering-link); --sr-logo-x: var(--sr-logo-x-sharering-link); --sr-mark-scale: var(--sr-mark-scale-sharering-link, 1); --sr-logo-capmid: var(--sr-logo-capmid-sharering-link); } .sr-product--sharering-me { --sr-logo-m: var(--sr-logo-m-sharering-me); --sr-logo-h: var(--sr-logo-h-sharering-me); --sr-logo-r: var(--sr-logo-r-sharering-me); --sr-logo-x: var(--sr-logo-x-sharering-me); --sr-mark-scale: var(--sr-mark-scale-sharering-me, 1); --sr-logo-capmid: var(--sr-logo-capmid-sharering-me); } /* The exchange registry, bound the same way and for the same reason. */ .sr-exchange--mexc { --sr-ex-h: var(--sr-ex-h-mexc); --sr-ex-b: var(--sr-ex-b-mexc); } .sr-exchange--kucoin { --sr-ex-h: var(--sr-ex-h-kucoin); --sr-ex-b: var(--sr-ex-b-kucoin); } .sr-exchange--bitmart { --sr-ex-h: var(--sr-ex-h-bitmart); --sr-ex-b: var(--sr-ex-b-bitmart); }