/* ============================================================================ truvio_custom.css - Truvio Commerce brand overrides (Tier 1) Loaded by Custom/TruvioHeadInclude.cshtml AFTER theme-default's default_custom.css, which is what lets these rules win cascade ties without !important. theme-default's own files are never edited (branding-path Rule 1 / re-skin.md:46). REVIEWED AGAINST theme-default 2.2.0. Two changes from the round-one sheet: RETIRED - the image-band height cap. theme-default 2.2.0 ships it natively (default_custom.css "Image-height caps", block at ~line 348: figure aspect-ratio 16/9 + max-height min(60vh,640px) + overflow hidden, and the img with object-fit:cover). re-skin.md Step 4 names the cap a Tier-1 re-skin item, which it was when the round-one sheet was written; the theme now owns it, and carrying a second copy here would be two owners for one value. RE-ADD ONLY IF the theme block is removed upstream. ADDED - block 5, the --td-edge-mask flip. theme-default 2.2.0 renamed td-wave-* to td-edge-* and made the silhouette a brand-agnostic token pointing at the neutral Images/Brand/edge.svg bevel. Setting one declaration here repoints all three instances block 26 of default_custom.js applies (home hero bottom edge, first colour boundary after it, sitewide footer crest). NOT RESTYLED HERE, deliberately: .td-price-lock* theme-default block 24 dresses the signed-out price affordance that surface-swift 1.8.0 now renders on the PLP row and the PDP. It resolves through --td-* tokens and currentColor, so the brand accent below already carries it (its background is --td-accent-soft). Any rule here would restyle a component the theme owns and break the surface layer's own gate selectors. .td-anchornav* same: theme-default block 25 owns the surface layer's PDP anchor strip; its hover/underline already resolve through --td-accent. --dw-color-button-primary owned by the GENERATED ColorSchemes sheet. Declaring it here makes the generated file lie and the admin swatch stale, and the next design save reverts the site (re-skin.md, palette sweep item 1). The brand's button colours go through ColorSchemeSave. Brand: industrial green #2E7D5B (light grounds) / #4FB184 (dark grounds), from Distribution/layers/truvio-demo/README.md. Typography and button shape are deliberately NOT changed (the brand ships no typeface; inventing one is not branding - step6/branding.md). ============================================================================ */ /* === 1. Brand accent on theme-default's declared hooks ====================== * theme-default ships --td-accent as a restrained slate (#3E4C59). It drives nav * hover, mega-menu hover, the underline caret, outline/ghost hover, chips, the * anchor-strip hover (block 25) and the price-lock tint (block 24). Repointing it * to the brand green is the highest-leverage line in this sheet. * RETIRES WHEN: theme-default gains a per-brand accent field in the Style-asset * model, at which point these two declarations move into the scheme JSON. */ :root { --td-accent: #2E7D5B; --td-accent-soft: rgba(46, 125, 91, .07); } /* Dark grounds need the lighter green: #2E7D5B on #1F2933 measures 2.95:1, below * the 4.5:1 floor; #4FB184 measures 5.58:1. Scoped to the two dark schemes and the * secondary band, which are the only dark grounds the seven stock schemes paint. */ .dw-colorscheme-dark, [data-dw-colorscheme="dark"], .dw-colorscheme-darksubtle, [data-dw-colorscheme="darksubtle"], .dw-colorscheme-secondary, [data-dw-colorscheme="secondary"] { --td-accent: #4FB184; --td-accent-soft: rgba(79, 177, 132, .12); } /* === 2. The contrast half of the accent pair ================================ * --dw-color-accent is emitted per scheme by the generated sheet; its contrast * partner cannot be (a custom colour id is letters/digits/underscore only, so a * hyphenated ccent-contrast is rejected and the underscored spelling emits a * token nothing reads). Declared here against the same seven scheme selectors the * generated sheet uses, loaded after it so source order wins. * RETIRES WHEN: the colour-scheme model accepts a contrast value per custom colour. */ .dw-colorscheme-light, [data-dw-colorscheme="light"], .dw-colorscheme-lightgrey1, [data-dw-colorscheme="lightgrey1"], .dw-colorscheme-lightgrey2, [data-dw-colorscheme="lightgrey2"], .dw-colorscheme-dark, [data-dw-colorscheme="dark"], .dw-colorscheme-darksubtle, [data-dw-colorscheme="darksubtle"], .dw-colorscheme-secondary, [data-dw-colorscheme="secondary"] { --dw-color-accent-contrast: #FFFFFF; } /* The primary scheme IS the brand band: green ground, white ink. Its accent is * white, so its contrast partner is the brand green rather than white. */ .dw-colorscheme-primary, [data-dw-colorscheme="primary"] { --dw-color-accent-contrast: #2E7D5B; } /* === 3. RETIRED - image-band height cap ===================================== * theme-default 2.2.0 owns this (see the header note). No rules here on purpose. */ /* === 4. Brand wordmark sizing ============================================== * The Truvio wordmark is a wide lockup; the header logo slot sizes by width only * (an inline-hardcoded figure width), so a tall render is possible. Cap the * rendered height and let width follow, in header and footer. * Swift INLINES an .svg logo (the rendered node is , not ), so the rule * has to name both - measured on this host: an img-only selector matched nothing. * theme-default's own [data-swift-logo-image] img { max-height: 1.75rem } still * reaches only the case, and its block 13 / block 23 figure clamps set width, * not height, so this is not a duplicate at 2.2.0. * RETIRES WHEN: the Swift-v2_Logo item type gains a height field. */ [data-dw-itemtype="swift-v2_logo"] img, [data-dw-itemtype="swift-v2_logo"] svg { max-height: 40px; width: auto; object-fit: contain; } /* === 5. The Truvio edge (NEW at theme-default 2.2.0) ======================== * theme-default block 22 ships the boundary motif as a brand-agnostic token whose * default is the deliberately dull Images/Brand/edge.svg bevel. The whole of the * brand-time edit is the one declaration below: the d= of * Images/Brand/edge-truvio.svg - a softened zigzag, vertices every 120px * alternating y=58 / y=20, each apex rounded over a 30px leg - percent-encoded as a * mask data URI. It is copied VERBATIM from the commented example at * default_custom.css:1166, which is itself generated from that SVG. * * All three instances block 26 of default_custom.js applies change at once: * 1. the home hero row .td-edge-bottom::after (main .td-edge-bottom::after) * 2. the first colour boundary .td-edge-top::before (main .td-edge-top::before) * 3. the site footer .td-edge-top::before (footer::before) * * --td-edge-h and every clearance rule are sized off the same clamp and are * indifferent to which path is in the token, so this swap needs no re-tuning. * * --td-edge-fill IS NOT SET HERE. The theme's contract is "set it to the colour of * the section the edge points INTO", i.e. a per-instance GROUND colour, not a brand * colour: painting the motif brand green would make it the warning stripe block 22 * and edge-truvio.svg both warn against. The theme's default (var(--td-white)) is * correct wherever the receiving section is a white or near-white ground; the verify * stage of this script MEASURES the resolved fill against each owner's adjacent * ground and reports a mismatch rather than assuming one. * RETIRES WHEN: theme-default gains a per-brand motif field in the Style-asset model. */ :root { --td-edge-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 75' preserveAspectRatio='none'%3E%3Cpath d='M0%2C58%20L91.4%2C29.1%20Q120%2C20%20148.6%2C29.1%20L211.4%2C48.9%20Q240%2C58%20268.6%2C48.9%20L331.4%2C29.1%20Q360%2C20%20388.6%2C29.1%20L451.4%2C48.9%20Q480%2C58%20508.6%2C48.9%20L571.4%2C29.1%20Q600%2C20%20628.6%2C29.1%20L691.4%2C48.9%20Q720%2C58%20748.6%2C48.9%20L811.4%2C29.1%20Q840%2C20%20868.6%2C29.1%20L931.4%2C48.9%20Q960%2C58%20988.6%2C48.9%20L1051.4%2C29.1%20Q1080%2C20%201108.6%2C29.1%20L1171.4%2C48.9%20Q1200%2C58%201228.6%2C48.9%20L1291.4%2C29.1%20Q1320%2C20%201348.6%2C29.1%20L1440%2C58%20L1440%2C75%20L0%2C75%20Z'/%3E%3C/svg%3E");}