/* ==================== 99-CC-Custom.css ==================================== THE CLIENT CHROME LAYER. Loads last, wins over every framework file. REWRITE THIS FILE FROM SCRATCH FOR EACH NEW CLIENT - stale rules here will override the next skin, and unlike a stray colour a stray rule cannot be found by searching for a token. WHAT BELONGS HERE Rule-level treatments that are this client's TASTE and nothing else: the specific way their dropdowns are framed, the shape of their search control, the devices that make their footer theirs. WHAT DOES NOT BELONG HERE - and must not creep back in Mechanism every client needs, and choices between known options. Those are in the framework, driven from 01-CC-Brand.css: the masked wordmark and nav icons ......... 03, Brand Assets transparent-over-hero nav ................. 03, Transparent-over-hero nav bar seam / link case / link tracking .. 03, --navBorderBottom, --navItems* nav underline hover device ................ 03, --navUnderline-display platform CTA strip visibility ............. 03, --ctaStrip-display carousel pagination shape and arrow feel .. 05, --splidePagination*, --splideArrowHover* every word the CSS writes ................. 01, --copy-* the page canvas ........................... 02 Before adding a rule, ask whether a token could express it. If one could, add the token to the owning framework file instead. The test that keeps this file honest: could the NEXT client want the opposite of this rule and get it by editing 01 alone? If yes, it is a switch, not chrome. Tokens declared here use the --skin-* prefix, never the client's initials. A --tj-* style vocabulary is how one client's assumptions survive into the next build unnoticed. lint.ps1 flags any other prefix. A worked example of this file, fully populated, is in examples/templeton-jones/99-CC-Custom.css - including two blocks that were deliberately NOT promoted, and the reasoning for each. --------------------------------------------------------------------------- THIS CLIENT: near-black canvas as the default ground rather than white - the bar, the opening stage and the closing feature all sit on it, with two white bands cut into the middle of the page to carry the statement and the merchandising. Type is heavy uppercase grotesk, set large and tracked tight for every heading, with small sentence-case body beneath it. The one bright note is a saturated yellow, used only for the wordmark and for pill CTAs and never as a field. Chrome is hard-edged - square corners, hairline outlines on the search field and the product tiles - with two deliberate exceptions: the fully rounded yellow pills and circular carousel arrows, and one rounded crop on the closing feature. THIS FILE IS SHORT ON PURPOSE. Almost everything this design asks for was expressible in 01, because the nav arrangement it wants IS the framework default: wordmark and icons in the bar, links stacked into a second row beneath. The one thing that needed a rule is the wordmark's colour, below. =========================================================================== */ :root { /* Client-local values, --skin-* prefix. --skin-displayLg is the design's 64px display size, used by the hero title and the statement declaration. It is not a step on 02's scale: the top rung, --fontSize-3xl, tops out at 48px on this canvas, and these two are set considerably larger than anything else on the page. 4.45vw is 64px at the 1440 artboard. --skin-displayTracking is the negative tracking every uppercase heading carries here. The design draws it at two values (-0.04em on the hero, -0.02em elsewhere); it is set once at the commoner of the two rather than split, because the difference is not visible at these sizes and one token keeps the headings speaking with one voice. */ --skin-displayLg: clamp(2.25rem, 4.45vw, 4rem); --skin-displayTracking: -0.02em; /* the wordmark's drawn size in the bar, per the design's 119x40 lockup. It has to be stated somewhere: the platform sizes the container and our 03 overrides that to auto, leaving the empty anchor inside with no width of its own. See the Nav block below. */ --skin-logoWidth: 119px; --skin-logoHeight: 40px; /* the closing feature's rounded crop - the ONLY rounded corner on the page besides the pills. Deliberately its own token rather than --global-radius, which is 0 here: routing this through the global would round the search field and every product tile with it. */ --skin-featureRadius: 12px; /* THE HERO'S TREAD STAMP. The design masks the photograph with a tyre-tread frame - ragged on all four sides, with detached flecks well inside the edge. This REPLACES a 7-vertex polygon() that approximated it as a clean angled crop; the brief carried that as deliberate departure #2. Why a raster, and not a polygon or a traced SVG: - polygon() cannot express islands at all, and the islands are most of what gives the shape its character. - tracing grunge to SVG runs HEAVIER than the raster it came from, and adds trace error at every fleck. - an SVG is a TEXT asset, and on this host text assets are exposed to the stale gzip cache documented in CLAUDE.md. A PNG is not. logo.png masks the wordmark for a related reason. The asset is cropped to its own alpha bounding box, so the mask's edges ARE the photograph's edges - there is no second set of inset numbers that can fall out of step with it. 1800x1127, alpha quantised to five levels: the artwork is essentially a threshold image, so five levels is visually identical to 256 and takes the file from 420KB to 99KB on the LCP path. */ --skin-heroMask: url("/layout/generalLyout/hero-mask.png"); /* WHERE THE PHOTOGRAPH SITS IN THE STAGE, as percentages of it. CC-Home.css spends these as real grid TRACKS, so the photo box is a grid area and the mask stretches across exactly that area. NOTE these three are read off the design frame by eye, not measured from the Figma node - they are the first thing to retune against a render. --skin-heroMaskLeft is load-bearing TWICE: it is the left edge of the photo box, and therefore of the mask; and it is the right edge of the copy column, which must never let CMS text run under the flecks. Split out so the two cannot disagree - move the seam and the copy follows. */ --skin-heroMaskLeft: 41%; --skin-heroMaskTop: 4%; --skin-heroMaskBottom: 8%; /* RIGHT-HAND BLEED. The stamp is a CLOSED frame, so its right edge is ragged too, and the photo box's right edge is the viewport's. Sizing the mask past the box drops roughly half that band off-screen: the tread stays visible down the right side as the design shows, without leaving black bites out of the photograph against the screen edge. 100% here would put the full ragged edge on display; a larger value hides more of it. */ --skin-heroMaskOverscan: 110%; /* clearance between the copy column and the leftmost flecks. The polygon this replaces only reached its leftmost vertex at 53% of the stage height - across the top it sat at 50% - so the title had room the tread does not give it. The stamp reaches its leftmost bound at EVERY height. */ --skin-heroCopyClearance: 3rem; /* the hero arrows, a PAIR at the bottom left of the stage per the design's 50x50 circles. Held as tokens rather than literals because CC-Home.css derives the second circle's position from both of them - restating either as a number is how the two drift apart. Size steps down below 900px; the gap does not need to. */ --skin-heroArrowSize: 3.125rem; --skin-heroArrowGap: 0.75rem; } /* ==================== Nav (03 overrides) ==================== */ /* --- The yellow wordmark, and its box. HOW THE WORDMARK IS ACTUALLY PAINTED, because three files touch it and the failure mode is silent. The platform emits no at all: an empty anchor. The platform's own 03-header.css gives .logo a background image from logo.png and gives .logoContainer width: 140px. Our 03 then masks .logoContainer with var(--logo) and fills it with currentColor. So the visible mark is a currentColor fill clipped to the wordmark silhouette, with the platform's background image beneath it as a second layer of the same artwork. Two rules are needed here and neither is optional. 1. THE INK. 03's knob is `.wrapper.masthead .logoContainer` at (0,3,0), NOT a bare .logoContainer - a (0,1,0) selector here loses on specificity however late this file loads, which is a mistake worth not repeating. Matching the compound is enough; no !important. 2. THE BOX. Our 03 sets .logoContainer to width: auto, overriding the platform's 140px, and the anchor inside carries only max-width and height - so its width comes from nowhere and the masked box can collapse. Sized on the ANCHOR rather than the container deliberately: 03's mobile block sets `.logoContainer { width: auto !important }`, and sizing the child sidesteps that !important instead of starting a ladder with it. (0,2,0) beats the platform's bare .logo. PROMOTION CANDIDATE for the ink, not promoted yet: a --logoColor token in 03 defaulting to var(--navLinks-hover) would preserve behaviour for every existing site and turn rule 1 into a value. Left here because the kit promotes on the SECOND occurrence and this is the first - Riverside and Jesse's e-Rides both take the default ink. The box is client geometry and stays here either way. --- */ .wrapper.masthead .logoContainer { color: var(--brand-accent); } .logoContainer .logo { width: var(--skin-logoWidth); height: var(--skin-logoHeight); max-width: none; /* the platform caps it at 170px; the design draws 119 */ background-size: contain; } /* --- The magnifier toggle. RESOLVED AND REMOVED - nothing here now. This block used to carry `.wrapper.masthead .menu-icons-header .icon-search { display: none !important }`, with a comment saying 03's own hide rule was not landing and nobody could say what beat it. Confirmed in the browser: the winner is 03 itself. Its Nav Icon Fixes block sets `display: flex` through `.navIcons *[class*="icon-"]:not(.icon-menu.mobile)`, and `:not()` carries its argument's specificity, so that selector is (0,4,0) against the hide rule's (0,3,1). 03's rule has been raised to (0,4,1) and now lands on its own, which is where the fix belonged. The !important repeat was not the harmless no-op it was billed as, and this is the reason to record: it was UNSCOPED. `cl-search-exposed` is on the homepage only, so on every interior page - PLP, PDP, basket, content - the exposed field did not exist AND this rule hid the magnifier that would have opened the platform's own search panel. Those pages had no search at all. An !important with a wider scope than the thing it was compensating for is how that happens; scope the repeat to the same trigger, or fix the original. --- */ /* ==================== Carousels (05 overrides) ==================== */ /* Nothing. The hero's circular white arrows are stripe chrome and live with the stripe in CC-Home.css, scoped to .hp-hero-fade - they are the shape of that one stage rather than this client's feeling about carousels, and a second carousel added to this site should start from 05's defaults, not inherit the hero's. Pagination is switched off in the hero's data-splide-opts JSON, which is where carousel options belong. */ /* ==================== Footer (06 overrides) ==================== */ /* Nothing, and one thing to be aware of rather than a rule. 06 paints the footer wordmark from /layout/generalLyout/logo.png as a plain background image - NOT as a mask - so unlike the nav wordmark it shows the yellow baked into the file. That hardcoded path is also why the wordmark ships twice, as logo.png and logo.svg: replace both if it is ever updated. The footer ground is --footer-background, which defaults to --background, so that yellow currently sits on white and reads weakly. It is left on the framework default deliberately: the footer is not drawn in the design at all, and inventing one would be a bigger decision than it looks. The frame does end in a large black area below the last stripe, which suggests a dark footer was intended, and a dark footer would also make this wordmark read correctly. If that is the call, it is a token job in 01 and not a rule here. The set that needs to move together: --footer-background, --footer-innerBackground, --footer-text, --footer-titles, --footer-links, --footer-linksHover, --footer-underlineColor, --newsletter-inputBackground, --newsletter-inputText, --company-text, --tagline-background, --tagline-text, --footer-buttonColor and --footer-buttonBorder. Note --social-iconColor as well: it is a filter, `brightness(0) opacity(0.7)`, which paints the social glyphs BLACK, so on a dark ground it needs `brightness(0) invert(1) opacity(0.7)` or the icons disappear entirely. */ /* ==================== PLP / PDP (faf, detail overrides) ==================== */ /* Nothing. There are no PLP or PDP frames in the design source, so both pages run on the framework skin driven from 01. Worth a look in a browser before launch: the CTA ramp in 01 sets a 20px button label to match the homepage pills, which is generous on a dense product grid, and it is one line to bring down if it reads too heavy there. */