/* ========================================================================= ideas-n12.css — the automation page, on the site's palette and rhythm. Loads last, after ideas-section.css, so it maps that file's components onto the tokens the other three pages share without editing 3,800 lines of layout that works. The same job software-n12.css does for the software page. WHAT WAS DIFFERENT, measured before any of this was written: band ground #2C2523 vs #171413 cream #FBF6F0 vs #F6F1EA body copy 17px at .84 vs 15px at .68 eyebrow #E0D2C5 vs cream at .70 h1 58px vs 56 / 64 primary CTA 14px, its own class vs 16px, shared masthead 42px logo + a button vs .n12-head, 8 links footer .site-footer--overlay vs .site-footer reveals none vs on all three Every one of those came from site.css, which this page no longer loads. What is left here is the part site.css was not responsible for. ========================================================================= */ :root{ --au-ground:#171413; --au-ground-dark:#0F0D0C; --au-accent:#B28479; --au-cream:#F6F1EA; /* THE PAGE GUTTER, which this page did not have. Measured at three widths, home starts its copy at x102 / 115 / 120 for viewports 1280 / 1440 / 1920 -- a full-bleed wrapper on an 8vw gutter. This page centred a 1160px column instead, which starts at x60 / 140 / 380. It agrees with home at no width at all; it merely crosses it near 1400. Same declaration as software-n12.css:67 and planning-n12.css:56. */ --hx-inset:clamp(44px,8vw,120px); } @media(max-width:760px){ :root{--hx-inset:var(--n12-gutter,32px)} } /* ------------------------------ the hero ------------------------------ WRITTEN FRESH, NOT OVERRIDDEN. ideas-section.css declared .auto-hero in eight separate rules and .cs-cta-block in fifteen, with twenty-odd !important between them -- each one written to beat the last rather than to replace it. 169 rules for these two components came out of that file; this is what replaces them. The grid, the cards and the modal stayed. They are not patched and they are the best thing on the page. */ .auto-hero{ /* flex-start, NOT center. With align-items:center the copy was centred in what the padding left over, so its eyebrow landed at y182 where planning and software both put theirs at y128 -- the 128px padding was correct and then 54px of leftover space was added on top of it. Starting the copy at the padding edge is what the other two do. */ position:relative;display:flex;align-items:flex-start;overflow:hidden; background:var(--au-ground-dark); /* 128 like the other two heroes: 104 of masthead plus 24 of air. It ran 116, which is close enough to look intentional and is not the number the rest of the site uses. */ padding:128px var(--hx-inset) 78px; /* 540, WHICH IS PLANNING'S HERO EXACTLY. Setting min-height:0 and letting the copy decide gave 432px -- the shortest band on the site by a long way, against home's 1000, planning's 540 and software's 1153. That is most of why the page read as unfinished: the footage had no room to be a picture, it was a strip behind two lines of type. The other two tall heroes are tall because they hold something -- a plan window, an app. This one holds copy AND the stat bar now, so 640: the copy ends at 352, the bar is about 170 tall sitting on the bottom edge, and the 118px between them is the band rhythm the rest of the site runs. At 540 the two touched. */ min-height:640px; } /* THE STAT BAR, OVER THE FOOTAGE. Translucent rather than a solid strip, so the light trails carry through underneath it and the hero reads as one picture with a band across its foot instead of a picture and then a bar. .72 plus the blur is what the labels need: over moving footage a lighter ground let the trails pass behind the type. The blur matters as much as the alpha -- it removes the high-frequency detail that makes small text hard to hold onto, which a flat wash alone does not. */ .auto-hero .cs-intro{ position:absolute;left:0;right:0;bottom:0;z-index:2; margin:0!important;padding:0!important;max-width:none!important; } .auto-hero .cs-budget-bar{ /* .56, down from .72 -- more of the footage carries through. The blur goes up to 18 to pay for it: it is the blur rather than the alpha that keeps small text readable over moving footage, by removing the high-frequency detail the eye has to hold the type against. Labels measured after the change, not assumed. */ /* NO WASH, A SMALL BLUR. The footage runs through at full brightness; the blur only takes the high-frequency detail out from under the type. 14px. 5 first, then 10, then this -- softer each time she asked. Swept 0 / 3 / 5 / 7 / 10 / 18 with the type hidden, sampling the 95th percentile of luminance under each label box across four frames of the moving footage and keeping the worst cell: 0px 8.43:1 7px 9.61:1 3px 9.42:1 10px 9.71:1 5px 9.56:1 18px 9.99:1 So contrast is not what is being bought here -- it flattens out past 5px, and everything from 7 up is within half a point. This is a LOOK, and the measurement is only here to confirm it costs nothing: the worst cell is the fourth at every value, because it sits over the light trails, which are the brightest thing in the frame and the only part of it that moves much. 14 rather than 18 because 18 is roughly where the strip stops reading as softened footage and starts reading as frosted glass over it -- the shapes behind the type go from out of focus to gone. If that is the look she is after, 18 and beyond is available; it costs nothing in contrast. */ background:transparent; -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px); border-bottom:0; } .auto-hero .cs-budget-item{padding:28px 30px} /* LESS BLUR ON A PHONE. 20px is tuned for a 1440-wide strip sitting over a wide frame of moving footage, where there is plenty of picture behind each cell to soften. At 390 the strip is four stacked rows over a much smaller crop of the same video, so the same radius eats everything behind it and the panel reads as opaque frosted glass rather than as softened footage. 8px keeps the material and gives the shapes behind it back. It also costs nothing: the contrast table above flattens out past 5px, so every value from 5 up is within half a point of the others. */ @media(max-width:700px){ .auto-hero .cs-budget-bar{ -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } } .auto-hero-bg{ position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:0; /* THE GRADE, AND WHY IT IS A COLOUR MATRIX RATHER THAN A FILTER. What she asked for: desaturate overall, lift the blues and reds, pull the yellows down, and fade the top to dark. saturate() cannot do that. It moves every hue by the same amount, so taking the yellows down takes the reds with them -- and on this footage the reds ARE the light trails. hue-rotate() cannot either; it spins the whole wheel rather than touching one part of it. A feColorMatrix can, because it works per channel. The matrix in ideas.html does three things at once: - an overall pull toward luminance, which is the desaturation; - a small boost to the red and blue channels' own contributions, which lifts those two back out of it; - a reduction in the GREEN channel's contribution to red and green, which is what takes yellow down: yellow is red plus green, so it is the only hue that loses on both counts while red keeps its own channel and blue is untouched. The fade to dark at the top is a separate layer -- a gradient over the footage rather than part of the grade, because a matrix has no idea where in the frame a pixel is. */ opacity:1; /* Matrix for hue, then home's own pair for saturation and exposure. Measured: matrix alone gives hue 16 (home's exactly) but sat .384 and lum 43.2 against home's .163 and 28.0. Chaining saturate(.6) brightness(.74) -- the literal declaration on .cl's background -- brings it to sat .220, lum 35.1, R/B 1.56. It stays a little lighter than home's band on purpose: that band has a flat .7 wash over the whole area, where this one is only faded at the top so the light trails still read across the lower half. .72 rather than home's .6: she asked for more red again after seeing it at .6. Measured on the right half, where no scrim reaches, that moves the frame from sat .315 / R-to-B 1.92 to sat .361 / 2.13. The next step up (.85 on a fully red-keeping matrix, R/B 2.53) took the headline below 3:1 even behind the scrim, so this is as far as the red goes while the type still passes. */ filter:url(#autoGrade) saturate(.72) brightness(.74); } /* TWO LAYERS: a pool behind the copy, and the top fade under the masthead. The headline was failing on contrast -- measured against the brightest ground pixel under it, with the type hidden so the reading is of the footage and not of the type's own antialiased edge, it came in at 2.21:1 where large text needs 3. The top fade cleared by 46% and the copy starts at about 40%, so most of the headline sat on ungraded dune. The pool is an ellipse rather than a left-to-right ramp because the copy is centred: a 90deg ramp measured fine (3.41:1) but would be darkest at the headline's left edge and lightest at its right. Of the three symmetric options tested, this one costs the light trails least -- they keep 124 of 153 of their brightness, against 117 for a full vertical veil -- and still takes the headline to 6.66:1. */ .auto-hero::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; /* LIGHTER THAN IT WAS. The pool is symmetric, but the footage is not -- measured in six vertical bands the left half of the frame reads 17 points darker than the right, because the dune and the light trails are all on the right. So the same pool that is unnoticeable over the bright side is heavy over the dark one. It was .80 / .52 / .16 and took the headline to 6.66:1 when 3 is what large text needs, which is a lot of room to give back. */ /* Back up to .74 from .56. Taking it to .56 to lighten the left made the type itself weaker than it should be -- the copy is centred, so it sits over the part of the frame the dune lights, not the dark left. The ellipse is also tightened to 54% so what it darkens is the copy's own footprint rather than most of the band. */ /* CENTRED ON THE COPY, AND IT STOPS BEFORE THE STAT BAR. This was ellipse 58% 62% at 50% 48% -- a 62% vertical radius from a 48% centre spans the entire hero, so it was still laying about .5 alpha over the stat bar at the bottom. That is three times what the bar's own wash contributes, which is why making the bar more transparent kept doing nothing visible: measured, taking the bar from .28 to .16 moved it 2.2 luminance points, and removing its wash altogether would only have found 4 more. 36% centre with a 40% radius reaches y0 to y486 of a 640px hero. The copy ends at 352 and the bar starts at 460, so the scrim covers what it is for and has faded to nothing by the time it gets there. */ background: radial-gradient(ellipse 58% 40% at 50% 36%, rgba(15,13,12,.88) 0%, rgba(15,13,12,.72) 44%, rgba(15,13,12,.42) 70%, rgba(15,13,12,.14) 88%, rgba(15,13,12,0) 100%), linear-gradient(180deg, rgba(15,13,12,.92) 0%, rgba(15,13,12,.72) 16%, rgba(15,13,12,.34) 32%, rgba(15,13,12,0) 46%); } /* THE COPY SITS ABOVE THE FOOTAGE. Same lesson as the software hero: a positioned element with z-index 0 paints in the final layer, above block backgrounds AND inline text, so anything not itself lifted sits under it. The video is that element here. */ /* Full bleed on the hero's own --hx-inset padding, NOT a centred column. The copy cap moves onto the copy itself, which is how home does it -- .cl-copy caps at 920 inside a padded .cl-wrap. 1160 is the width the column had at 1440, so nothing reflows there; it just stops walking right as the viewport grows. */ .auto-hero-wrap{position:relative;z-index:1;width:100%;max-width:none;margin:0} /* CENTRED, because the other two service pages are. Measured rather than eyeballed: planning and software both declare text-align:center on the hero and sit symmetrically in it; home is left set, but home is not a service page. This was the only one of the three set left. The section headings BELOW the hero stay left on --hx-inset, which is what planning and software do too. */ .auto-hero-copy{max-width:880px;margin:0 auto;text-align:center} .auto-hero-actions{justify-content:center} /* !important because ideas-section.css sets this eyebrow to 14px with one -- it was painting 14px against planning's and software's 12px, which is why the two lines above the headline read heavier here. The 2.04px tracking is what those two compute to at 12px. */ .auto-hero .eyebrow, .auto-hero-copy .eyebrow{ font-family:'Questrial',sans-serif; font-size:12px!important;font-weight:700; letter-spacing:2.04px!important;text-transform:uppercase; line-height:1!important; color:rgba(246,241,234,.7); margin:0 0 12px;display:block; } .auto-hero h1{ font-family:'League Spartan',sans-serif;font-weight:700; /* 56, the software page's. The two are the same kind of page -- a service with a long headline -- where planning's 64 carries three words. */ font-size:var(--n12-h1); /* 1.02 and -.035em are what planning and software both compute to: 56/57.12 with -1.96px of tracking, 64/65.28 with -2.24px. This was -.03em, which read a touch looser than either of them. */ line-height:1.02;letter-spacing:-.035em;text-transform:lowercase; color:var(--au-cream); margin:0 0 18px;max-width:none; } .auto-hero-copy p{ font-family:'Questrial',sans-serif; /* 15.5/1.58, which is what the software hero's caption computes to. This was 15/24 -- the site's section-body token, which is the right size in a band and slightly small under a 56px headline. */ font-size:15.5px;line-height:1.58;color:rgba(246,241,234,.68); /* auto, and it has to be in THIS rule. The paragraph carries its own max-width inside an 880px centred column, so with margin 0 the BOX sat hard left and text-align:center only centred the lines inside it -- it measured L280 / R649 where every other line in the hero measured L280 / R280. Setting the auto margins in an earlier rule did nothing: this shorthand comes later and resets them to 0. */ margin:0 auto 30px;max-width:62ch; } .auto-hero-actions{ display:flex;align-items:center;gap:26px;flex-wrap:wrap; } /* The primary joins the shared button. cta-n12.css lists it by class, so the only thing needed here is to clear what ideas-section.css set. */ .auto-btn--primary{ border-radius:0;letter-spacing:normal; } .auto-download-icon{width:17px;height:17px;flex:none;stroke:currentColor; fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} /* THE CHECKLIST ARROW MOVES DOWN, NOT RIGHT. The shared hover nudges every arrow 4px along the x-axis, which is right for a link that takes you somewhere else -- but this one points down and downloads a file, so sideways movement contradicted the mark. */ .auto-hero-actions .auto-btn--text:hover .n12-arw{ transform:translateY(3px)!important; } /* --------------------------- the stat band ---------------------------- Kept, because it is a good device and it appears nowhere else on the site -- four claims a reader can check, before any of the case studies ask for attention. Restyled onto the page's grounds: it ran #1D1E1E, a cool near-black that belongs to no other band on this site, and the hairlines between its cells were the only vertical rules anywhere. */ /* THE RUNNING BORDER COMES BACK. It went out with the 215 stripped rules and she wants it -- rightly, it is the one piece of motion on the page besides the footage, and it is what makes the four claims read as a single instrument rather than four boxes. How it works, since it is not obvious from the declarations: a conic gradient is painted over the whole bar, then masked so only the 1.5px border ring survives -- two full-cover masks composited with xor, so the content box is subtracted and the padding ring is what is left. The gradient is transparent for 320 of its 360 degrees, so what you see is a short bright arc. Animating the angle runs that arc round the edge. --proof-glow-angle has to be a registered @property or it cannot be animated: a plain custom property is a string to the animation engine and would jump from 0 to 360 in one step rather than sweep. Two changes from the original. The arc was #E0D2C5 with an orange lead, which is site.css's cream and a colour this site does not use; it is clay leading into the real cream now. And the ground under it was rgba(35,31,32,.38) over #2C2523 -- this page's grounds do not exist any more, so it sits on #171413 like every other band. */ @property --proof-glow-angle{ syntax:""; inherits:false; initial-value:0deg; } @keyframes proofStripGlow{to{--proof-glow-angle:360deg}} .cs-budget-bar{ position:relative;isolation:isolate;overflow:hidden; display:grid;grid-template-columns:repeat(4,1fr); /* the darker ground, #0F0D0C, which is what the hero above it and the wrap below it are already on. It was #171413 -- a shade lighter than both of its neighbours, which made the band read as a panel laid on the page rather than part of it. Its two hairlines still define it. */ background:var(--au-ground-dark); width:100%; border-top:1px solid rgba(246,241,234,.09); border-bottom:1px solid rgba(246,241,234,.09); } .cs-budget-bar::before{ content:"";position:absolute;inset:0;z-index:3; padding:1.5px;pointer-events:none; background:conic-gradient( from var(--proof-glow-angle,0deg), transparent 0deg, transparent 320deg, rgba(178,132,121,0) 330deg, rgba(178,132,121,.55) 339deg, #F6F1EA 348deg, rgba(246,241,234,.62) 355deg, transparent 360deg ); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude; filter:drop-shadow(0 0 7px rgba(178,132,121,.5)); animation:proofStripGlow 9s linear infinite; } /* Stopped, not removed: the ring stays lit at the angle it would rest at, so the band still reads as one object. */ @media(prefers-reduced-motion:reduce){ .cs-budget-bar::before{animation:none;--proof-glow-angle:345deg} } .cs-budget-item{ display:flex;flex-direction:column;align-items:center;text-align:center; gap:10px; border-left:1px solid rgba(246,241,234,.10); padding:34px 30px; } .cs-budget-item:first-child{border-left:0} .cs-budget-icon{ width:22px;height:22px;flex:none; color:var(--au-accent);opacity:1; } .cs-budget-label{ font-family:'Questrial',sans-serif; font-size:14px;line-height:21px;color:rgba(246,241,234,.62); /* 235px, which is what the old band used. 24ch at 14px Questrial is about 168px -- narrow enough that every cell gained a line and the four stopped reading as one row. */ max-width:235px; } .cs-budget-amt{ display:block; font-family:'League Spartan',sans-serif;font-weight:700; /* 30px flat, the old band's figure size. The clamp resolved to 32 at 1440 and kept growing the type against a fixed label, which is the other half of why the row lost its balance. */ font-size:30px;line-height:1.05;letter-spacing:-.02em; color:var(--au-cream); margin:6px 0 4px; } /* THE FOURTH CELL. Its figure slot holds "ASK WHY", which is not a figure -- at 30px League Spartan it became the largest thing in the band and gave that cell a different shape from the other three. The old band caught this and set it as a tracked eyebrow instead, at the same 14px as the page's other eyebrows. Restored. */ /* CREAM, NOT CLAY. The other three cells in this row carry a figure in --au-cream; this one carries two words instead, and in the accent it read as the quietest thing in the row rather than the one that is making a point. Cream is the lightest colour the site uses. */ .cs-budget-amt.cs-budget-callout{ font-family:'Questrial',sans-serif; font-size:14px;font-weight:700;line-height:1; letter-spacing:.22em;text-transform:uppercase; color:var(--au-cream); margin:8px 0 6px; } /* The fourth cell is the odd one: it has no figure, it has a two-word instruction and a sentence. Its "ASK WHY" takes the eyebrow treatment rather than the figure treatment, because it is not a number and setting it at 32px would have it read as one. */ .cs-budget-item strong{ display:block; font-family:'Questrial',sans-serif; font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--au-cream); margin:2px 0 4px; } /* -------------------------- the case studies -------------------------- The grid, the cards and the modal are left alone. They are the best thing on this page and they work. Only their colours move. */ /* AND THE GRID COMES BACK. Two 1px hairline gradients tiled at 32px make the graph paper, and a radial wash in the top right gives the band a light source rather than a flat fill. She liked it and it was thrown out with everything else. Re-coloured: the lines were rgba(224,210,197,.025), site.css's cream, and the wash was rgba(193,109,70,.10), an orange this site does not use. Cream at the same weight and clay for the wash. The vertical gradient underneath ran #2C2523 to #332C2A, two grounds that no longer exist here -- it is #0F0D0C flat now, which is what the rest of the page sits on. */ /* THE SECTION TAKES ITS OWN COLOUR -- mockup option three. The 32px lattice is gone. At 2.4% over the dark ground, against nine panels that each carry their own lift, it read as texture competing with the content rather than as ground. What replaces it is a clay wash across the whole band, so the case studies separate from the page by colour rather than by pattern. Two washes rather than one: a broad one from the top-left that carries the band, and a smaller warmer one from the right so it is not flat. */ .cs-wrap{ position:relative; /* FLAT. The lattice went first, then the clay washes that replaced it, and both were the same mistake: decorating the ground instead of letting the content sit on it. Tried it swapped -- lighter section, darker cards -- and it reads worse: the cards go flat into the page instead of sitting on it. Back to the darker ground with the cards lifted 4% above it. */ background:var(--au-ground-dark); } .cs-head h2,.cs-intro h2{ font-family:'League Spartan',sans-serif;font-weight:700; /* 38, which is every section heading on all three other pages. -.035em, not -.03: planning and software both run -.035 and this was a third of an em off them. */ font-size:clamp(29px,3.2vw,38px); line-height:1.04;letter-spacing:-.035em;text-transform:lowercase; color:var(--au-cream); } .cs-card{ background:rgba(246,241,234,.022); border:1px solid rgba(246,241,234,.09); border-radius:10px; } .cs-card:hover{ border-color:rgba(246,241,234,.2); background:rgba(246,241,234,.04); } .cs-card-head h2{ font-family:'League Spartan',sans-serif;font-weight:700; font-size:22px;line-height:1.08;letter-spacing:-.02em;text-transform:lowercase; color:var(--au-cream); } .cs-tag{ font-family:'Questrial',sans-serif; font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; color:var(--au-accent); background:rgba(178,132,121,.1); border:1px solid rgba(178,132,121,.28); } .cs-meta,.cs-card-meta{ font-family:'Questrial',sans-serif; font-size:13.5px;line-height:20px;color:rgba(246,241,234,.6); } .cs-meta b,.cs-card-meta b{color:rgba(246,241,234,.86);font-weight:400} /* the filter chips take the site's quiet-control treatment */ .cs-filter-chip{ font-family:'Questrial',sans-serif; font-size:12.5px;font-weight:400;letter-spacing:.02em;text-transform:lowercase; color:rgba(246,241,234,.62); background:none; border:1px solid rgba(246,241,234,.16); border-radius:999px; transition:color .16s ease,border-color .16s ease,background .16s ease; } .cs-filter-chip:hover{color:var(--au-cream);border-color:rgba(246,241,234,.34)} .cs-filter-chip.active{ color:#171413;background:var(--au-cream);border-color:var(--au-cream); } /* ---------------------------- the closing ----------------------------- .cs-cta-block IS GONE. Its copy -- "your turn / what can you automate in your business?" -- is on .cs-start now, so the page was asking the same question twice in a row. Everything that styled it comes out with it: the desert picture and its wash, .cs-cta-content, and the .cs-cta-block overrides for the eyebrow, h2 and paragraph. automation-cta-desert.jpg is still in the repo and still unused. The page now ends on a flat band, which is what losing that block costs: it was the only picture here apart from the hero. If it should come back, it belongs on .cs-start as the closing band, and the wash has to clear the timeline rather than only the copy -- the steps run the full width where the old block's copy sat on the left third. */ /* The shared closing-CTA row. This is the only part of the block that survives it, because .cs-start uses the same row. */ .cs-cta-actions{ display:flex;align-items:center;gap:26px;flex-wrap:wrap; justify-content:flex-start; } /* ------------------------------ the bands ----------------------------- 118 top and bottom, the rhythm every band on the other three pages runs. .cs-wrap gets NO top padding, because the first thing in it is the full-bleed stat bar. 118px above a band that runs edge to edge is not air around content, it is a gap between the hero and a stripe -- which is exactly what it looked like. The bar sits flush under the hero and the case-study heading carries the rhythm instead. */ /* NO BOTTOM PADDING ON .cs-wrap. The closing band is inside it, so 118px here sat BELOW the band and above the footer -- measured as a 118px gap where home, planning and software all meet their footer at 0. It also reads as the band "sitting too high": the band's own copy is centred correctly, but the box it is centred in stopped 118px short. The band's own padding:118px 0 is what carries this rhythm. */ .cs-wrap{padding-top:0;padding-bottom:0} /* 118 was measured from the top of .cs-wrap, which used to start below a stat bar that had its own ground. The bar now sits INSIDE the hero, flush to its bottom edge, so the first thing under it is this -- and 118 from a band's own edge reads tighter than 118 between two bands. 160 puts the case studies clear of the stat bar. !important because ideas-section.css sets padding-top:0!important on .cs-listing-intro. Without it this computed to 0 and the case studies ran straight into the bar -- which is what she reported, and which the plain rule looked like it had fixed. */ .cs-listing-intro, .cs-head{padding-top:84px!important} /* THE "PROJECTS" HEADING JOINS THE STANDARD TOO. ideas-section.css:2957 sets it to 1.05/-0.03em with !important on every line, which is a third spec for the same job -- planning and software both run 1.04/-0.035em and every other heading on this page now does. !important here only because that rule has it. */ .cs-listing-intro .cs-transition-kicker{ line-height:1.04!important;letter-spacing:-.035em!important; } /* The listing shares the page's left edge instead of centring itself. Capping the grid's outer box at 1160 + two gutters keeps the cards the size they are now rather than letting a 2-up grid run to 1680px. */ .cs-listing-intro, .cs-filters, .cs-grid, .cs-head{ max-width:none; margin-left:0;margin-right:0; padding-left:var(--hx-inset);padding-right:var(--hx-inset); } /* THREE UP, AND FULL WIDTH ON THE GUTTER. The cap I put here last pass is what made the section look off centre: 1160 + two gutters is 1390, left aligned, so it ended 50px short of the right gutter at 1440 and 650px short at 1920. Running it on the gutter like every other row on the site is symmetric by construction and keeps the same left edge as the headings. Three fits: at 1440 each card is 390px and not one of the ten titles wraps to a second line (measured, all ten). THE LAST ROW IS SHORT. Ten cards over three columns is 3-3-3-1, and no CSS fixes that -- it is a content count. Stretching the tenth card across the row was worse than the gap: a 1210px box holding one short title and two lines, with its thumbnail ghosted across the empty half. It sits as a normal card. Nine or twelve case studies would divide. */ .cs-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); /* EVERY CARD THE SAME HEIGHT. Row one is the featured card and sizes to its own content; every row after it is implicit, so grid-auto-rows catches exactly the nine and makes them equal. Without this a row with a two-line title was taller than the rows either side of it. */ grid-template-rows:auto; grid-auto-rows:1fr; max-width:none; /* Air before the closing band. The band's own 118px top padding is INSIDE its photograph, so with nothing here the cards ran straight into the picture's top edge with no break between the two. */ margin-bottom:118px; } /* ===================================================================== THE FEATURED CASE STUDY -- style one, the split. One featured plus nine in three rows of three is exactly the ten that exist, which also settles the 3-3-3-1 orphan the plain grid had. It is the same .cs-card as every other one, so the filter chips and the modal work on it unchanged; only its placement and its internal layout differ. Row one, every column, and inside it the thumbnail becomes a half-width picture with the case beside it. ===================================================================== */ .cs-grid > .cs-card.is-featured{grid-column:1 / -1;grid-row:1} /* COPY LEFT, SCREEN INSET RIGHT. The picture used to be a full-bleed left half running the card's whole 420px height, which made it the loudest thing in the section rather than an illustration of the case beside it -- and it put the copy on the right, against the grain of every other block on this site. Inset on the right instead: a window sitting inside the card with air around it, the way the software hero holds its app mock, and the copy back on the left edge where the page's type column is. */ .cs-grid > .cs-card.is-featured .cs-card-head{ display:grid!important; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr)!important; align-items:center!important; gap:0!important;padding:0!important; min-height:400px; text-align:left!important; } /* the running number has nowhere sensible to sit in a two-column card */ .cs-grid > .cs-card.is-featured .cs-card-num{display:none!important} .cs-grid > .cs-card.is-featured .cs-card-mock-thumb{ position:relative!important; grid-column:2!important;grid-row:1!important; /* inset, not full bleed -- the margin is the air that makes it read as a screen in a frame rather than as half the card */ width:auto!important;height:288px!important;min-height:0!important; align-self:center!important; margin:0 40px 0 8px!important; inset:auto!important; border:1px solid rgba(246,241,234,.12)!important; overflow:hidden!important; background:var(--au-ground-dark)!important; } /* THE SAME TREATMENT AS THE NINE: greyscale, no tint. It carried the clay blend while they went black, so the one screen the section is built around was the only pink thing in it. A touch lighter than the small ones, because this one is meant to be read. */ .cs-grid > .cs-card.is-featured .cs-card-mock-thumb .cs-mock-host{ position:absolute!important;inset:0!important; width:100%!important;height:100%!important;min-height:0!important; opacity:1!important;transform:none!important; filter:grayscale(1) brightness(.56) contrast(1.05)!important; /* the same transition as the nine, so the one hover reads the same wherever it happens */ transition:filter .28s ease!important; } .cs-grid > .cs-card.is-featured .cs-card-mock-thumb::after{ content:""!important;position:absolute!important;inset:0!important; z-index:3!important;pointer-events:none!important; /* even, not directional. The old ramp darkened toward the copy because the picture used to run into it; inset with air around it there is no edge to soften, so this just seats it. */ background:linear-gradient(180deg, rgba(15,13,12,.08) 0%, rgba(15,13,12,.26) 100%)!important; } /* RIGHT: the case */ .cs-grid > .cs-card.is-featured .cs-card-meta{ grid-column:1!important;grid-row:1!important; display:flex!important;flex-direction:column!important; justify-content:center!important; /* 26 on the right, down from 34: see the note on the gap below */ padding:44px 26px 44px 40px!important; } .cs-grid > .cs-card.is-featured .cs-title{ font-size:32px!important;line-height:1.08!important; letter-spacing:-.025em!important;margin:0 0 16px!important; max-width:22ch!important; } /* CLOSING THE GAP BETWEEN THE COPY AND THE SCREEN. It measured 72px, and almost none of it was margin. The lede was capped at a measure that ran out 62px BEFORE its own column did, so most of that gap was unused column rather than deliberate air: text stopped at 555, the column ended at 617, the screen began at 626. max-width:none lets the copy run to the column's edge and the padding sets the actual gutter, which is the right way round. */ .cs-grid > .cs-card.is-featured .cs-featured-lede{max-width:none!important} /* THE BANNER. Sits on the picture's top-left corner rather than in the copy, so it labels the whole card. .cs-card-meta has position:relative of its own, which made it the containing block and put the banner at the copy column's left edge, 635px in, instead of the card's. Taking it back to static hands the job to .cs-card, which is where top:0 left:0 means what it says. */ .cs-grid > .cs-card.is-featured .cs-card-meta{position:static!important} /* THE FEATURED LABEL IS A HEADER, NOT A BADGE. A white rectangle in the corner is the most generic way to say this, and it sat ON the card like a sticker rather than belonging to it. Every other label on this site is a tracked uppercase eyebrow with a hairline, so this one is too -- set above the card and running a rule to the right edge, which reads as "this row is its own thing" rather than "someone stuck a flag on a card". The card itself already does most of the work by being a full row with a picture; the label only has to name it. */ /* IN THE CARD'S FLOW, at the top of the copy column. The first version sat above the card on position:absolute. It measured perfectly -- right place, right colour, z-index 4 -- and painted nothing, because it is nested inside a