/* ========================================================================== EYEBROW BOX Every eyebrow on the page sits inside a notched hairline frame. The frame is a stepped rectangle, not a pill. ALL FOUR corners step outward, so the middle band of each vertical edge sits inset and the corners read as tabs. Symmetric about both axes: ┌────────────────────┐ ┌──┘ └──┐ │ EYEBROW TEXT │ └──┐ ┌──┘ └────────────────────┘ It is the same rectangular, axis-aligned language as the cell, the pixel glyph and the CTA's ticket-notch — a capsule would import a geometry the page does not otherwise use. See design-rules.md §10a. CONSTRUCTION The frame is drawn as TWELVE hairline background layers, not as a border with clip-path and not as a filled shape with a smaller shape on top. Reasons, in order: · clip-path cannot cut a 1px outline — it cuts the fill, so the visible stroke changes thickness at every step. · a two-layer fill would need to know the ground behind it, which breaks the moment an eyebrow sits over the Hero gradient or the §7 plate. · `linear-gradient(currentColor 0 0)` inherits colour, so one rule set serves all three variants and the glyph matches the frame for free. The interior stays fully transparent. Nothing behind it is occluded. Not decoration. This is typographic chrome and does NOT count against the two-decorative-categories-per-section budget (CLAUDE.md §8). ========================================================================== */ .eyebrow { /* Geometry. Both values are on the spacing scale (§4). --eyebrow-stop is measured from the top AND the bottom, so the inset middle band is calc(100% - 2 × stop) — the dominant run of the edge. */ --eyebrow-step: var(--space-2xs); /* 8px — how far each corner steps out */ --eyebrow-stop: var(--space-2xs); /* 8px — corner tab depth, top and bottom */ display: inline-flex; align-items: center; gap: var(--space-2xs); padding-block: var(--space-xs); /* Inline padding clears the OUTER line — the one at the middle band, level with the label — not the inset top and bottom edges. */ padding-inline: calc(var(--space-sm) + var(--eyebrow-step)); border-radius: var(--radius-none); /* Orange is the default. `currentColor` paints the frame AND the glyph. */ color: var(--color-accent-action); background-repeat: no-repeat; /* Twelve segments, in order: 1 top edge — inset by step at both ends 2 bottom edge — inset by step at both ends 3 left corner post, upper 4 left corner post, lower 5 left middle post — the outer line, level with the label 6 left tab, upper 7 left tab, lower 8 right corner post, upper 9 right corner post, lower 10 right middle post 11 right tab, upper 12 right tab, lower */ background-image: linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0), linear-gradient(currentColor 0 0); background-size: calc(100% - var(--eyebrow-step) * 2) var(--border-hairline), calc(100% - var(--eyebrow-step) * 2) var(--border-hairline), var(--border-hairline) var(--eyebrow-stop), var(--border-hairline) var(--eyebrow-stop), var(--border-hairline) calc(100% - var(--eyebrow-stop) * 2), var(--eyebrow-step) var(--border-hairline), var(--eyebrow-step) var(--border-hairline), var(--border-hairline) var(--eyebrow-stop), var(--border-hairline) var(--eyebrow-stop), var(--border-hairline) calc(100% - var(--eyebrow-stop) * 2), var(--eyebrow-step) var(--border-hairline), var(--eyebrow-step) var(--border-hairline); background-position: left var(--eyebrow-step) top 0, left var(--eyebrow-step) bottom 0, left var(--eyebrow-step) top 0, left var(--eyebrow-step) bottom 0, left 0 top var(--eyebrow-stop), left 0 top var(--eyebrow-stop), left 0 bottom var(--eyebrow-stop), right var(--eyebrow-step) top 0, right var(--eyebrow-step) bottom 0, right 0 top var(--eyebrow-stop), right 0 top var(--eyebrow-stop), right 0 bottom var(--eyebrow-stop); } .eyebrow .eyebrow__label { color: var(--color-text-heading); /* 21:1 */ } /* Sand label on a QUIET frame. The Hero. R6t, corrected at R6u. A LIGHT GOLD FRAME, A SAND LABEL — R6w. R6v is withdrawn. The frame took four attempts and the last two are the instructive ones: R6t #F2D98A solid 12.5:1 on the fill — too bright R6u white @ 0.10 1.3:1 — quiet, but not gold R6v #BE9D4A solid 6.7:1 — gold, still an outline shouting R6w sand @ 0.20 1.7:1 — a gold EDGE The mistake in R6v was reaching for a dimmer HUE when what was wrong was the WEIGHT. #BE9D4A is a darker gold, not a lighter stroke — as a twelve-segment outline it is still a solid line drawn all the way round. Dropping the alpha instead keeps sand's hue and takes the presence out, which is what "light" meant. frame --color-border-emphasis sand @ 0.20 1.7:1 label --color-accent-emphasis #F2D98A 12.5:1 A 7× step between them: the words are unambiguously the object and the frame is an edge around them. THIS IS THE ONE VARIANT WHERE THE FRAME IS NOT AN ACCENT. --action and --confirm put the accent in the frame so the label can stay white and spend nothing; --ink inverts both for light grounds. Here the accent is in the words and the frame is structure. It still spends the Hero's sand — that was true of the bare text too — but it spends it once, on the reading surface, rather than twice. */ .eyebrow--emphasis { color: var(--color-border-emphasis); } .eyebrow--emphasis .eyebrow__label { color: var(--color-accent-emphasis); } /* -------------------------------------------------------------------------- FILLED — R6u The interior takes a ground instead of staying transparent. §10a REFUSES A FILL, and the reason is specific rather than general: "a two-layer fill would need to know the ground behind it, which breaks the moment an eyebrow sits over the Hero gradient or the §7 plate." ⚠ R12i — IT IS NOW USED ON THE PLATE, and the sentence above that said otherwise was wrong to rely on. The refusal's actual objection still does not bite: the fill is CLIPPED to its own twelve-point silhouette, so it occludes only itself and never needs to know the ground — and the plate is a flat colour, not a gradient, so occluding it costs nothing. The Hero's gradient, the other named ground, was removed at R5. **What the refusal protects against is a RECTANGULAR fill, which this is not.** IT CANNOT BE A background-color. The corners are INSET and the middle band is the widest part, so a rectangular fill would paint the notches solid and the silhouette would vanish. The fill is a clipped pseudo-element tracing the same twelve-point outline the background layers draw, off the same two custom properties — so the fill cannot drift from the frame. The label is positioned so it paints above the fill: an absolutely positioned ::before otherwise covers static content regardless of order. -------------------------------------------------------------------------- */ .eyebrow--filled { position: relative; } .eyebrow--filled::before { content: ""; position: absolute; inset: 0; background-color: var(--color-surface-hover); clip-path: polygon( var(--eyebrow-step) 0, calc(100% - var(--eyebrow-step)) 0, calc(100% - var(--eyebrow-step)) var(--eyebrow-stop), 100% var(--eyebrow-stop), 100% calc(100% - var(--eyebrow-stop)), calc(100% - var(--eyebrow-step)) calc(100% - var(--eyebrow-stop)), calc(100% - var(--eyebrow-step)) 100%, var(--eyebrow-step) 100%, var(--eyebrow-step) calc(100% - var(--eyebrow-stop)), 0 calc(100% - var(--eyebrow-stop)), 0 var(--eyebrow-stop), var(--eyebrow-step) var(--eyebrow-stop) ); } .eyebrow--filled .eyebrow__glyph, .eyebrow--filled .eyebrow__label { position: relative; } /* ⚠⚠ R23y — THE COVERED FRAME IS SWITCHED OFF, FOR EVERY --filled EYEBROW. §10a has always said the fill "completely covers" the twelve hairline background layers and "can only leak an antialiasing sliver". That sliver is real and it is visible: the fill and the hairlines are two different paint operations on the same twelve-point geometry, so wherever the box lands on a fractional pixel the gold edges out from under its own cover. It showed up on §12b, whose violet-tinted ground makes a gold hairline far easier to see than §10's pure black does — but §10 has it too, and so has every other --filled eyebrow since the foundation build. ⚠ IT COSTS NOTHING TO TURN OFF because the frame is not visible under a fill by definition, and `color` has no other consumer here: the label sets its own colour at (0,2,0), and there is not one .eyebrow__glyph in the markup — checked, all ten eyebrows, zero glyphs. If a glyph is ever added to a --filled eyebrow it will need its own `fill`, not currentColor. ⚠ (0,2,0) ON PURPOSE. --emphasis, --invert and --ink all set `color` at (0,1,0); this has to beat them wherever they appear in the file, rather than depend on sitting after them. It is next to --filled because that is the variant it belongs to. ✅ This replaces R21o's per-section patch in modal.css, which was the same fix applied to one instance before the cause was understood. */ .eyebrow.eyebrow--filled { color: transparent; } /* -------------------------------------------------------------------------- INVERT — R23g White box, black label, by direction. It draws nothing of its own: it composes with --filled and overrides only that variant's ::before and the two colours, so the twelve-point silhouette stays in exactly one place. class="eyebrow eyebrow--filled eyebrow--invert" THE SAME RECIPE AS .btn--invert, AND THE SAME TWO TOKENS — a white surface from --color-surface-invert and near-black ink on it. §12 now inverts its eyebrow and its button off one pair, which is why this is `--invert` and not a second name for the same idea. ⚠ THE FRAME COLOUR IS SET BUT NEVER SEEN. --filled's ::before covers the twelve hairline background layers completely — it clips to the same polygon they draw on and paints above the element's own background. The declaration is here so the variant is correct if --filled is ever dropped, not because it renders today. ✅ IT ENDS THE CONTRAST PROBLEM RATHER THAN MANAGING IT. R23e spent nine measured combinations finding that a LIGHT scrim on this plate tops out at 4.58:1 for a 14px white label, 0.08 above the floor. Black on white is 19.17:1 and the box is 5.66:1 against the plate — an order of magnitude of headroom, from the inversion the reference asked for. -------------------------------------------------------------------------- */ .eyebrow--invert, .eyebrow--invert .eyebrow__label { color: var(--color-on-plate-invert); } .eyebrow--invert::before { background-color: var(--color-surface-invert); } /* -------------------------------------------------------------------------- SMALL SCREENS A long eyebrow wraps rather than overflowing. The frame follows the box, so the step geometry survives wrapping unchanged. -------------------------------------------------------------------------- */ @media (max-width: 479px) { .eyebrow { padding-inline: calc(var(--space-xs) + var(--eyebrow-step)); } }