/* ============================================================ SILICA WORKS - draggable word tag A small pill that sits inline at the end of a paragraph. It runs on the spring in js/tags.js: drag it anywhere and it snaps back. ============================================================ */ .sw-tag { /* Inline-flex so it sits on the text baseline and flows with the paragraph, but keeps its own padding box. */ display: inline-flex; align-items: center; gap: var(--sw-tag-gap, 0.42rem); vertical-align: baseline; margin-left: 0.35rem; /* A hang tag, not a chip: the left end is chamfered to a point and an eyelet is punched through it. --sw-tag-nose is how far that point runs in from the left edge; the left padding has to clear it, plus room for the eyelet, or the first glyph sits on the cut. Letter-spacing adds its gap AFTER the last glyph too, so the right padding is pulled back by that much to keep the word optically centred on the tag rather than sitting left of centre. */ --sw-tag-nose: 0.62rem; padding: 0.34rem 0.64rem 0.34rem calc(var(--sw-tag-nose) + 0.34rem); border-radius: 2px; /* The chamfer. Rounding is lost on a clipped element - a clip-path overrides border-radius entirely - so the two flat corners are cut at the nose and the right end simply stays square, which is how a die-cut tag reads anyway. */ clip-path: polygon( var(--sw-tag-nose) 0, 100% 0, 100% 100%, var(--sw-tag-nose) 100%, 0 50% ); /* The site accent, the same green the button hover and the cursor label use. Ink text on top rather than the off-white the dark pill carried - #f4f4f2 on this green sits at about 1.3:1 and is essentially unreadable, while the ink clears 14:1. */ background: var(--sw-accent); color: #14140f; /* Shadows Into Light - a handwriting face, so the pill reads as a scribbled-on tag rather than a system chip. Set in sentence case: the face has no caps worth setting, and uppercase handwriting reads as neither. The hairline stroke thickens the light strokes just enough to hold against the accent ground. */ font-family: "Shadows Into Light", cursive; font-size: 1.35rem; /* Single-weight face - a heavier value here would only get a synthesized fake bold, so the stroke carries the weight. */ font-weight: 400; /* The stroke grows each glyph outward from its own outline without widening its advance, so it closes the gaps BETWEEN letters. The tracking has to open up to pay that back, or the word reads as one dense mass - handwriting joins up visually as it is. */ letter-spacing: 0.06em; line-height: 1; text-transform: none; -webkit-text-stroke: 0.03em currentColor; white-space: nowrap; /* Not grab/grabbing any more - the dot carries that now (see the grab states in cursor.css). The native cursor is still visible sitewide, so this stays on pointer to match every other interactive element rather than falling back to the arrow. */ cursor: pointer; user-select: none; -webkit-user-select: none; /* Stops the browser panning the page mid-drag on touch. */ touch-action: none; will-change: transform; /* drop-shadow, not box-shadow: clip-path cuts the element's own box shadow away with the chamfer, while a filter shadow is taken from the clipped silhouette and follows the nose around. */ filter: drop-shadow(0 8px 10px rgba(20, 20, 15, 0.3)); /* Above the body copy, the photographs and the plates, so a pill always rides over the page rather than under an image. Capped at 999 for one specific reason: .sw-section sets no z-index, transform or filter, so it creates NO stacking context and this value is not contained by the section - it competes directly in the root context, against .sw-menu-stage (fixed, z-index 1000). Anything from 1000 up would put the pills over the nav bar, which is the one thing they must stay under. The arc slider's slides (~14000, set by js/slider.js) and its caption (20000) would otherwise beat this, since they were not contained by any stacking context either and so competed in the same root context. They are sealed into one by `isolation` on .sw-slider, which keeps those numbers internal to the band and lets this value win over the images. */ position: relative; z-index: 999; /* The slow bob, so no pill ever sits perfectly still. On the `translate` property, which composes with the transform js/tags.js writes for the push and the drag, and as a CSS animation, so it runs on the compositor instead of costing the main thread a style write on every frame of the visit. Five pixels either way over a ten-second sine - the motion the script used to compute - with each pill's phase set by the script. */ animation: sw-tag-drift 5.03s cubic-bezier(0.37, 0, 0.63, 1) infinite alternate; animation-delay: var(--sw-drift-delay, 0s); } @keyframes sw-tag-drift { from { translate: 0 -5px; } to { translate: 0 5px; } } /* The pill holds the same green in every state - it is already the accent, so there is nothing brighter to shift to on grab. The dot carries the feedback instead. */ /* Lift while it is actually being carried. */ .sw-tag.is-dragging { filter: drop-shadow(0 16px 16px rgba(20, 20, 15, 0.32)); } /* The punched eyelet, drawn with a pseudo-element so the markup stays text. It sits in the flow as the first flex item, so the gap above spaces the word off it the way the old leading dot did. Deliberately NOT a see-through cut-out: the tag is dragged over body copy and over the featured artwork, and a real hole would flash the type underneath through it mid-drag. A hard black rim with a flat white centre reads as a clean punched hole and stays legible over anything it crosses. */ .sw-tag::before { content: ""; width: 0.3em; height: 0.3em; border-radius: 50%; /* The punched-out centre. Paper white rather than the page ground, so it stays a hole over every background the tag crosses. */ background: #ffffff; /* Full ink, no softening - the rim has to read as a cut edge, so it is solid black at full opacity rather than a tinted ring. In em so it holds its proportion at the larger title size. */ box-shadow: inset 0 0 0 0.07em #000000; flex: none; /* Nudged back toward the nose - an eyelet is punched close to the edge, not centred in the left padding. */ margin-left: -0.1rem; } @media (prefers-reduced-motion: reduce) { .sw-tag { filter: none; animation: none; } } /* ------------------------------------------------------------ In a section title ------------------------------------------------------------ The featured heading sets uppercase extrabold at around 104px with tight negative tracking. font-size on .sw-tag is absolute so the pill does not inflate with it, but letter-spacing and line-height are inherited and have to be put back - the title's -0.04em jams the handwritten letterforms together. These two must stay in step with the base .sw-tag values above. It also sits on its own baseline rather than the heading's: at that size the leading would drag the pill far below the text. ------------------------------------------------------------ */ .sw-tag--title { letter-spacing: 0.06em; line-height: 1; /* Hung off the foot of the W in "work". The pill is a child of that word's span, which carries position: relative, so left/top resolve against the word rather than the whole heading - it tracks the W wherever the layout puts it. top: 100% puts it just under the word's box; the negative margin pulls it back up so it tucks against the letter rather than floating below the line. Kept here rather than in featured.css so one component is not defined across two files. */ position: absolute; top: 100%; left: 0; margin-top: -0.35em; /* The heading is the tallest type on the page, so the pill needs a touch more presence next to it than it does in body copy - this has to stay above the base size, not below it. */ font-size: 1.5rem; /* Same trailing-space correction as the base rule above, and the same nose clearance - the chamfer is scaled up with the tag so the angle stays the same rather than flattening out at this size. */ --sw-tag-nose: 0.74rem; padding: 0.4rem 0.78rem 0.4rem calc(var(--sw-tag-nose) + 0.4rem); } /* "What clients say?" - the pill hangs off the foot of the final "s", like a tag tied on through its eyelet. The eyelet is the pivot, so the tilt (data-r in the markup) swings the pill down and away from the word rather than spinning it about its middle. The eyelet's centre sits about 1.27rem in from the pill's left edge (nose clearance + padding - its own nudge + half its width), so the pill is pulled back by that much and sits just past the letter. */ .sw-testimonials .sw-tag--title { --sw-tag-eye: 1.27rem; left: calc(100% - var(--sw-tag-eye) + 0.35rem); top: 86%; /* Half the pill's height, so the eyelet - not the pill's top edge - lands on that line. */ margin-top: -1.15rem; transform-origin: var(--sw-tag-eye) 50%; } /* ------------------------------------------------------------ Dragging past a section edge ------------------------------------------------------------ A pill is a child of the section it sits in, and several of those sections clip (the plates fan wide, the archive cards fan past the measure) and paint an opaque ground. Between them a pill carried toward a section edge was first shaved off by the clip and then covered by whatever section came next, so it simply disappeared. z-index alone does not fix it: the pill's own z-index only orders it inside its own section, and a later sibling section paints over an earlier one whatever its children say. So both are suspended, and only while a drag is actually live - js/tags.js puts .sw-tag-dragging on on pointerdown and takes it off on release. The clips do their job the rest of the time. ------------------------------------------------------------ */ /* The clip has to go on every ancestor between the pill and the page: a single un-suspended clip anywhere up the chain still cuts. */ .sw-tag-dragging .sw-section, .sw-tag-dragging .sw-section--slider, .sw-tag-dragging .sw-featured, .sw-tag-dragging .sw-testimonials, .sw-tag-dragging .sw-split, .sw-tag-dragging .sw-split-copy, .sw-tag-dragging .sw-tm-head { overflow: visible; } /* Lift the whole section that owns the held pill above its neighbours. This is what actually beats the later section's opaque background - the pill cannot win that on its own, because it is not competing at section level. The section is raised, and the pill rides up with it. Set on the section rather than the pill so nothing inside the section has its own stacking rearranged: the plates, cards and heads keep the order they already have relative to each other. 999 is the ceiling, and it is deliberate: .sw-menu-stage is fixed at z-index 1000 in this same root context, so this is as high as the section can go while the nav still covers it. That is the one thing the pills must stay under. */ .sw-tag-dragging .sw-tag-host { position: relative; z-index: 999; }