/* ========================================================================== variant-d-v3.css - OWNED BY CALL INSIGHTS V3. Nothing else loads this file. A full copy of variant-d.css taken at the 8/21 fork, not an override layer. Brees, 8/21: "every version should have its own CSS because one of those versions is going to be the main." That is the whole rationale: the version that wins gets shipped as DE's real page, and a page that ships should not be wired into two pages that were rejected. V3 can therefore be edited freely - there is no shared selector to break, and no pin to keep complete. Scope: the colour-rhythm variant layer. RED FLAG - THIS IS THE COPY DECISION THIS PROJECT ONCE REVERSED. V2 was first built as a 3,600-line duplicate of direction-d.css and that duplicate was DELETED, because two copies mean a fix to one page silently misses the other. The risk did not go away; it was accepted on purpose, and it is bounded because two of these three pages get deleted. What replaces the old protection is scripts/css-divergence.js: it records the parent's hash at fork time and tells you when variant-d.css has changed since, so a shared fix that missed V3 is visible instead of silent. RUN IT BEFORE ANY RELEASE. ========================================================================== */ /* ========================================================================== VARIANT 2 โ€” BALANCED The middle of the colour question, and the one that most directly answers the "three emails" complaint. Thesis: keep the full-strength colour bands that give the page its rhythm, but stop any single field from running long. Where variant 1 solves the unbroken-lime problem by removing the lime, this one solves it by breaking it into three โ€” each deliverable card gets its own ground, so the eye is given three beats where it previously got one. This is the variant that most closely follows the brand mockup's own behaviour: strong colour, but changing often enough that no single field dominates. ========================================================================== */ /* -- Section rhythm --------------------------------------------------------- Petal and sky keep full strength. The lime section drops to plain ground BECAUSE its three cards now carry the colour themselves โ€” leaving both at full strength would put saturated cards on a saturated field. */ .section--lime { background-color: var(--oat); } /* -- Ambient circles -------------------------------------------------------- Roughly as b-connector had them: large enough to read as deliberate composition, still capped at three per viewport. ๐Ÿ”ด `.shape--lime-lg` IS NO LONGER SIZED HERE โ€” 8/24. This sheet loads AFTER direction-d-v3.css, so this line was quietly beating the CTA disc's new width while its `top`/`right` (which this sheet does NOT name) came from the new rule: the disc drew at 440px wide but offset for a 336px one. Sizing it in one place is the fix; overriding half a shape from the last sheet in the chain is what caused it. โš ๏ธ `.shape--petal-lg` / `.shape--sky-lg` are kept, but NOTHING on this page uses either class โ€” they are inert. The CTA's petal disc is `.shape--petal-cta`, named that way so this file cannot half-override it. */ .shape--petal-lg { width: clamp(280px, 34vw, 520px); } .shape--sky-lg { width: clamp(300px, 38vw, 560px); } /* -- Icon discs ------------------------------------------------------------- One full-strength brand hue paired with a tint, so each disc has a clear identity and the multiply overlap still produces the brand's darker wedge. Glyph stays ink: on petal it measures 4.09:1 against oat, which is why the glyph never takes a brand hue at this size. */ /* ๐Ÿ”ด WAS `--sky`, ON A `--sky` SECTION. Exactly 1.00:1 โ€” the disc was not subtle, it was absent, and icon 1 rendered as a lone pale crescent with the glyph apparently floating beside nothing. Same failure as a previous build's ink-on-ink bug and the c3 blanket-.section repaint: a colour chosen from the palette without checking it against the ground it actually lands on. โš ๏ธ `variant-2.css` STILL HAS THIS. It has been there since 8/11 and shipped through the c2 review unnoticed โ€” including by me, twice. Fix it there before c2 is shown to anyone again. Marigold on sky is 2.02:1 and oat-deep is 1.17:1, which sounds alarming and is not: these are DECORATIVE discs behind a glyph, not text and not a meaningful graphic โ€” nothing is conveyed by them alone. The glyph itself is ink at 4.09:1 on sky and carries the whole meaning. The discs only need to be VISIBLE, which is precisely what the old value failed at. */ /* ๐Ÿ”ด ALL SIX DISCS NOW USE THE DEEP TIER. See the dot rule in direction-d.css. Fixing icon 1's sky-on-sky disc was not enough, and I would not have known that without the new mark-visibility check in widths.js, which measured all six against the sky ground and failed five: icon 1 marigold 1.72 PASS oat-deep 1.16 FAIL icon 2 petal 1.26 FAIL petal-soft 1.03 FAIL icon 3 lime 1.10 FAIL lime-soft 1.11 FAIL The original "one full-strength hue paired with a tint" system cannot work on a saturated ground: the tint is by definition close to the ground, and sky IS one of the tints. So each icon now takes two DIFFERENT deep hues. Every disc clears 2.3:1, and mix-blend-mode: multiply still produces the darker overlap wedge the mark is built around โ€” more strongly than before, because there are two real colours meeting instead of a colour and a wash. The glyph stays ink (4.09:1 on sky) and still carries the meaning. */ /* โš ๏ธ EVERYTHING ABOVE THIS LINE IS THE OLD, NOW-STALE RATIONALE. It reasoned about a SATURATED SKY ground, because the three blocks sat directly on the sky section. **B3 (8/17) moved them onto WHITE cards**, so "the tint is by definition close to the ground" no longer holds โ€” on white, the brand pastels read as themselves again. Brees, 8/18, with a reference image: the pairs are the soft brand colours, not the deep ones โ€” sky+lime, petal+sky, lime+orange. Hue ORDER matters and is taken from the reference: disc--a sits left, disc--b sits right and overlaps it. ๐Ÿ”ด THIS DELIBERATELY SPENDS THE ยง24 MARGIN. Pastels measure roughly 1.3-1.9:1 on white, well under the 3:1 a graphic boundary would need. It is defensible ONLY because these discs are decorative: the s are aria-hidden, and the meaning is carried by the ink glyph over them plus the block's own heading. The discs are texture, not information. โš ๏ธ If `widths.js` marks flags them, that is a REAL result to take back to Brees โ€” do not silence it. */ /* The icon discs - RESTORED 8/18. Brees: "we weren't supposed to change the icons so we need to put back the circles." These are decorative MARKS (1.35 floor), and the glyph over them is full ink - 5.63 at worst against the multiply wedge. That is exactly why this pairing works where the two-tone numerals did not: those are text at a 3:1 floor and measured 1.49-1.74 on these same discs. */ .changes__icon--1 .changes__disc--a { background-color: var(--sky); } .changes__icon--1 .changes__disc--b { background-color: var(--lime); } .changes__icon--2 .changes__disc--a { background-color: var(--petal); } .changes__icon--2 .changes__disc--b { background-color: var(--sky); } .changes__icon--3 .changes__disc--a { background-color: var(--lime); } .changes__icon--3 .changes__disc--b { background-color: var(--marigold-soft); } /* (`.changes__glyph` is deleted - the discs carry the mark alone now.) */ /* [X] NO NUMERAL COLOUR RULES HERE ANY MORE. The numerals in "Three things. Zero setup headaches." are now IMAGES cut from Brees' icon sheet, so their colour is baked into the artwork. The three custom-property pairs that used to sit here - and the three single-colour rules before them - are both gone. See the note above `.how__num-img` in direction-d.css. */ /* -- The deliverable cards: REMOVED 8/14 ------------------------------------- `.deliverable__card--1/2/3`, `.deliverable__card` and `.deliverable__inset` all lived here and matched NOTHING in d1 after the tabs shipped on 8/13. They are gone rather than left to rot, along with the tab rules in direction-d.css (8.4KB). โš ๏ธ Those class names are still live in nine OTHER directions (arcade, b-connector, c1/c2/c3, field, split, switchboard). This file is loaded by d1-signal ONLY, so removing them here cannot touch those pages. Check before assuming the same of any other stylesheet. Their replacement is the card-stack grounds at the end of this file. The reasoning they carried is worth keeping, because it still applies: three grounds instead of one unbroken field, TINTS rather than full strength, because these cards hold dense render text and a full-strength petal or lime behind body copy pushes --ink-muted under AA. */ /* -- The travelling head ---------------------------------------------------- ๐Ÿ”ด THE PETAL OVERRIDE IS DELETED. This file used to say: .connector__head { fill: var(--petal); } Brees, 8/17: "right now I think that the dot is pink but we're on a pink surface so I think we need a different color there." He is right, and it is worse than it looks: the problem section's ground IS petal, so the marker was at **1.00:1** on it โ€” not weak, INVISIBLE. This is THE DOT RULE (direction-d.css ยง24) biting for the FOURTH time. Same shape every time: a pastel picked on its own merits, never measured against the ground it lands on. The head is the worst possible element to do that to, because it does not sit on one ground โ€” it travels over all six. Measured, every ground this page has: oat petal lime sky indigo white ink 11.53 7.80 8.95 9.83 1.64 13.30 clay 3.07 2.07 2.38 2.61 2.29 3.54 marigold 2.02 1.37 1.57 1.72 3.47 2.33 petal 1.48 1.00 1.15 1.26 4.74 1.70 <- what shipped NO flat fill clears 3:1 on all six, because the page runs from white to indigo. So the base rule in direction-d.css does not use one: ink carries the five light grounds and the 3px WHITE RING carries indigo at 8.09. They are complementary on purpose. Deleting the override restores that pair. โš ๏ธ This also has to survive the card-grounds decision that is still open. Ink + white ring is ground-agnostic; a brand-colour fill would have to be re-measured every time those three cards change. Do not "add some colour back" here without running the table above again. */ /* -- The card stack: grounds and dots --------------------------------------- Replaces the .deliverable__card rules above, which had been dead since the tabs shipped on 8/13 and are removed with this change. Three tinted grounds, one per card, carrying over the reasoning that fixed the "one unbroken lime field" problem: the eye gets three beats instead of one. Tints rather than full strength because each card holds dense render text, and a full petal or lime behind body copy pushes --ink-muted under AA. ๐Ÿ”ด THE GROUNDS MUST BE OPAQUE. These cards physically overlap as the stack assembles. A translucent ground would let the card underneath bleed through and read as a rendering fault, not as depth. ๐Ÿ”ด DOTS USE THE DEEP TIER. These grounds are near-white tints, where the raw brand pastels measure 1.03โ€“1.49:1 โ€” the invisible-mark failure that shipped three times in two days. Measured on these tints, the deep tier clears 3:1. Do not "match the tab dots" to the pricing dots; pricing is on indigo, which is the one ground where the raw pastels work. */ /* ๐Ÿ”ด SKY -> LIME -> MARIGOLD. Cool, green, warm โ€” all light, no dark card. SIXTH pass. Keeping the history because the rejections taught things: 1. sky-soft / petal-soft / lime-soft โ€” "not fond of the bg color choice." 2. Full-strength sky / petal / lime โ€” "so bright... it kind of makes it feel juvenile whereas we are going for more feminine." 3. oat / sky / indigo โ€” the oat card was a non-event. 4. marigold / sky / indigo โ€” opened on the brightest colour in the palette. 5. indigo / marigold / sky โ€” opened on the deepest. 6. THIS. sky / lime / marigold. โš ๏ธ NOTE FOR WHOEVER READS THIS NEXT, INCLUDING ME: this is close to attempt 2, which was rejected as juvenile. It differs by dropping petal and adding marigold, and by keeping the copy column on full ink. If it reads the same way, that is why โ€” the objection then was three saturated grounds in a row, and this is still three saturated grounds in a row. Flagged to Brees; his call, not a silent concern. ๐Ÿ“Œ THE LESSON THAT SURVIVES ALL SIX: the guide uses full-strength colour in big flat FIELDS and CIRCLES, not stacked three-deep behind dense copy. A device built for one large plane does not automatically survive repetition in a 700px column. ๐Ÿ”ด NO DARK CARD ANY MORE โ€” the text inversion is GONE, not moved. All three grounds take ink: sky 9.83, lime 8.95, marigold 5.71. There is no card that needs --oat text. See the deleted block in direction-d.css. ๐Ÿ”ด CARD 3 USES --marigold-soft, NOT --marigold. Brees: "maybe we need the light marigold." Full marigold is not just louder than sky and lime, it is DARKER (luminance 0.40 vs 0.55 and 0.655), so it never sat in the same family as the other two. --marigold-soft is tuned to 0.595, between them. See the token note in base.css. ๐Ÿ”ด ALL THREE DOTS ARE INDIGO, and that is measured, not lazy. Indigo is the only colour that reads on all three grounds. It also puts the one deep colour back into an otherwise entirely light palette. If distinct per-card dots are ever wanted, the warm card is the constraint โ€” on it, clay, marigold-deep and lime-deep all land near 1.5, a hair over the floor. */ .deliverable { background-color: var(--white); } /* F2, 8/18 - "remove the blue background. Instead the background should be the same as it is in the Three Email section." Measured: `.deliverable` computes to WHITE, not oat, despite carrying `section--lime` - it is overridden right above. So "same as Three Emails" means white. โš ๏ธ `.changes` KEEPS its `section--sky` class, exactly as `.deliverable` keeps `section--lime`. The class also carries the `--r-bleed` radius grouping and a `.t-eyebrow` colour rule; dropping it to avoid a misleading name would take those with it. Same trade the deliverable already makes. ๐Ÿ”ด Colour belongs in the VARIANT file, never in direction-d.css - the axis rule this project has held since the c* variants. */ .changes { background-color: var(--white); } /* F3, 8/18 - "in the Three Calls Almost Lost section we're going to have that background be light blue." */ .proof { background-color: var(--sky); } /* ๐Ÿ”ด AND ITS SUB HAS TO LEAVE --ink-muted TO GET THERE. `--ink-muted` is 5.05:1 on oat and 5.40 on white, but only **4.31:1 on sky** - under the 4.5 floor. It is a documented constraint on this project ("--ink-muted ONLY works on oat and white"), and moving this section's ground is exactly the move that trips it. Full ink on sky is 9.83. โš ๏ธ The same sub used to be forced to ink by `.linework .proof__sub`, but F1 took the linework off this section, so that safety net is gone. Without this rule the change would have shipped a real contrast failure. */ .proof .proof__sub { color: var(--ink); } /* The file colours, set by Brees 8/18: front desk sky, manager oat, owner lime. Card 1 was already sky; 2 moved off lime and 3 off marigold-soft. โš ๏ธ MOVING THESE GROUNDS MOVES EVERY CONTRAST ON THE CARD. `--ink-muted` is the known trap - it is calibrated for oat and white only (5.05 / 5.40) and drops to 4.31 on sky. Re-run `widths.js` after ANY change here rather than reasoning about it; that is exactly how F3 nearly shipped a real failure. */ .stack__card--1 { background-color: var(--sky); } .stack__card--2 { background-color: var(--oat); } .stack__card--3 { background-color: var(--lime); } .stack__dot--a, .stack__dot--b, .stack__dot--c { background-color: var(--indigo); }