/* ========================================================================= /about, on the site's own palette and rhythm. The old page was a second site: about.css set html,body to #2C2523, its cream was #E0D2C5 and its bands ran 104px, against the rebuilt four's #171413, #F6F1EA and 118px. That is most of why the page read as "more corporate and generic than the other pages" -- it was not the writing, it was that nothing on it was the same colour as the rest of the site. site.css and about.css are both gone. This file is written fresh on the tokens the other five use, so there is nothing underneath to fight. ========================================================================= */ .ab12{ --ab-ground:#171413; --ab-ground-dark:#0F0D0C; --ab-cream:#F6F1EA; --ab-accent:#B28479; --ab-accent-hi:#C99084; /* the pale blue the planning page writes figures in. The operator band's one hard number is a figure, so it is written in the ink the site already uses for figures. */ --ab-ink:#A9B8C6; --ab-inset:clamp(44px,8vw,120px); --ab-rule:rgba(246,241,234,.10); background:var(--ab-ground-dark); color:var(--ab-cream); } .ab12 *{box-sizing:border-box} .ab12-wrap{width:100%;padding:0 var(--ab-inset)} /* the shared mobile gutter -- see the note in blog-n12.css */ @media(max-width:1024px){ .ab12{--ab-inset:32px} } @media(max-width:640px){ .ab12{--ab-inset:20px} } /* THE BAND EYEBROW AND HEADING, the standard planning, software, automation and pricing all agree on: 12px/.17em cream at 70%, and 38px/1.04/-0.035em lowercase. */ .ab12-eyebrow{ display:block; font-family:'Questrial',sans-serif; font-size:12px;font-weight:700;letter-spacing:.17em;text-transform:uppercase; color:rgba(246,241,234,.7);margin:0; } .ab12 h2{ font-family:'League Spartan',sans-serif;font-weight:700; font-size:clamp(30px,3.2vw,38px);line-height:1.04;letter-spacing:-.035em; text-transform:lowercase;color:var(--ab-cream); margin:14px 0 20px; } /* NOT IN THE FOOTER. These are body-wide element selectors, and the site footer is inside like everything else -- so .ab12 p was restyling "this site was built using Next 12 automations" to 15px at .68 and making this one page's footer 78px tall against everyone else's 50px. */ /* :where(), NOT :not(). A bare :not() carries its argument's weight, so `.ab12 p:not(.site-footer-built)` is (0,2,1) -- heavier than `.ab12-close p` (0,1,1) -- and this rule's `margin` SHORTHAND then overrode the `margin-left:auto;margin-right:auto` that centres the closing band's paragraph. :where() contributes nothing, so the exclusion costs no specificity and the rule stays (0,1,1) where it belongs. */ .ab12 p:where(:not(.site-footer-built)){ font-family:'Questrial',sans-serif; font-size:15px;line-height:24px;color:rgba(246,241,234,.68); margin:0 0 18px; } .ab12 p:where(:not(.site-footer-built)):last-child{margin-bottom:0} .ab12 strong{color:var(--ab-cream);font-weight:400} /* ------------------------------- the hero ------------------------------- Same construction as the other five: the masthead lives INSIDE the hero so it does not move between pages, and the copy is centred and top-aligned so its eyebrow lands on the same 128px line. */ .ab12-hero{ position:relative;display:flex;align-items:flex-start;overflow:hidden; /* NO MIN-HEIGHT AND NO TAIL. This was a 340px box with a photograph in it; it is flat dark now and carries an eyebrow and one line of headline, so 340 was just empty space holding the letter away from the line it belongs under. The hero is its own content plus its padding, and the letter starts 30px below the headline. */ min-height:0; /* 151px, the blog masthead's number -- see the note there. All four rebuilt heroes start their type on the same line now instead of each one landing wherever its own copy height put it. */ padding:151px var(--ab-inset) 0; background:var(--ab-ground-dark); } /* THE HERO IS FLAT DARK NOW, and the warehouse has moved down to the band it actually illustrates. On the hero it was a photograph of a place behind the words "built from the operator's seat", which is a caption looking for its picture; behind "who's behind it" it is the room the person in that section runs. Same plate, one section lower, doing a job instead of decorating one. Nothing replaces it here. A 340px dark band with an eyebrow and one line of headline is the shape /pricing and /privacy already open with, so the page now has a quiet opening and its one photograph where the story starts. */ /* LEFT AND LOW. The three service pages centre their heroes because they are making a case to a room; this one is introducing a person, and a name plate sits at the foot of the picture. */ /* CENTRED, unlike the letter under it. The hero is a title page and the letter is the page after it -- one is centred type, the other is a centred block of left-aligned type, which is the difference between a heading and something written. */ .ab12-hero-copy{ position:relative;z-index:2;align-self:flex-start; max-width:900px;margin:0 auto;text-align:center; } .ab12-hero h1{ font-family:'League Spartan',sans-serif;font-weight:700; font-size:var(--n12-h1);line-height:.98;letter-spacing:-.04em; text-transform:lowercase;color:var(--ab-cream); margin:12px 0 20px; } .ab12-hero p{ font-size:15px;line-height:24px;color:rgba(246,241,234,.68); margin:0 auto;max-width:none; } /* ------------------------------ the bands ------------------------------ */ .ab12-band{padding:118px 0;position:relative} /* 84 into the first band. See the note in contact-n12.css: only the transition straight out of a hero is tightened. */ .ab12-hero + .ab12-band{padding-top:84px} .ab12-band--lift{background:var(--ab-ground)} .ab12-band--dark{background:var(--ab-ground-dark)} /* --------------------------- where it started --------------------------- Heading left, prose right -- the same two-column shape the origin section already had, on the site's measure. */ .ab12-origin{ display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); gap:0 clamp(40px,6vw,96px); } /* THE PROSE STARTS LEVEL WITH THE HEADLINE, not with the eyebrow. The left column is an eyebrow then an h2; the right column began at the top of the grid row, so its first line sat beside the EYEBROW and the body copy appeared to float above the heading it belongs to. 27px, measured rather than guessed: 58 was the obvious arithmetic -- the eyebrow's line box plus the h2's top margin -- and it overshot by 31, because the h2's own line box already carries leading above its cap height. Set, measured, corrected. */ .ab12-origin-copy{padding-top:27px} .ab12-origin-copy > p:first-child{ font-size:21px;line-height:1.5;color:var(--ab-cream); } .ab12-origin-copy > p{max-width:66ch} /* .ab12-quote is gone. It styled two pull quotes that have both been removed -- "we still use everything we build" from the founder band and "people make the decisions" from the systems band -- and nothing on the page carries the class now. */ /* ---------------------------- who is behind it ---------------------------- The old section said, at length, that an operator runs this. It could have described any operator-led consultancy. The band now carries one number, because one number does what three paragraphs of positioning could not. ------------------------------------------------------------------------ */ /* A MEASURED COLUMN, NOT THE REST OF THE ROW. Two numbers were doing the damage. align-items:center dropped the portrait 76px below the eyebrow, so the picture floated against the middle of the biography instead of introducing it -- there was no line anywhere in the section that both columns shared. And letting the copy take whatever was left of a 1209px wrap made the measure 794px: about 105 characters a line, which is a wall rather than a paragraph. 290 and 680 with 72 between them is 1042 of the 1140 container. The portrait, the name and the first line of prose all start on the same pixel, and the longest line is 88 characters. */ /* AND IT OVERRIDES .ab12-wrap'S PADDING. box-sizing is border-box on this page, so a 1140px max-width on top of the wrap's 115px gutters left 910px of content -- the 680 column came out at 548 and the measure was narrower than the spec, not wider. The container is the inset as a margin instead: 1140 where there is room for it, the gutter where there is not. */ /* WIDER. 1140/680 was sized against a band with nothing behind it; with the warehouse under it the copy needs to hold more of the frame or the picture reads as the subject and the words as a caption on it. 1320 and 820 is the same ratio at the width the band actually has. */ /* AND NOW IT IS ONE COLUMN, BECAUSE IT IS A LETTER. The two-column grid existed to put a 290px portrait beside the prose; the portrait is a 72px stamp at the sign-off now, so there is nothing to sit beside. 780px is the measure a page of correspondence wants -- about 72 characters -- and one narrow column over a wide photograph is a composition, where a portrait over a photograph of a room is two pictures arguing. */ /* UNDER THE HERO TEXT, not centred in the band. The letter began at 330px on a 1440 page while "built from the operator's seat." began at 115 -- two left edges, 215px apart, on consecutive sections. The margin goes and the column hangs off the page gutter, so the first word of the letter sits directly under the first word of the headline. */ /* CENTRED IN THE PAGE, LEFT-ALIGNED INSIDE ITSELF. The block sits in the middle of the band -- so the margin off the left edge is much larger than the page gutter -- while every line in it still starts on the same left edge. Centring the TEXT would make it a poster; this is a letter that happens to be in the middle of the paper. */ .ab12-operator{ display:block; width:min(860px, calc(100% - 2 * var(--ab-inset))); padding:0;margin:0 auto; } .ab12-operator-copy > p{max-width:none} /* The label and the clay rule are both out of the markup now. The hero two lines above says "about next 12" and "built from the operator's seat"; a third marker before the first sentence was announcing the same thing again. */ /* 96px, not the band's 118. The section is a profile, not an argument; it does not need a full band's worth of air around it. */ /* (0,2,0) to beat .ab12-hero + .ab12-band, which is the same weight and earlier in the file -- this band is the first one after the hero. */ /* 30px off the headline, not 164. The hero's 60px tail plus this band's 104px top padding put the clay rule most of a screen below the line it is meant to be answering, and with the hero flat dark there is nothing in that space at all. The picture now starts right under the headline and fades up out of the page's own colour, so there is no edge where the band begins. */ /* 14, down from 30. The hero has no bottom padding, so this number is the entire gap between the headline and the first line of the letter -- it measured 50px, which is a section break between two things that are meant to read as a title page and the page after it. */ .ab12-band--founder{position:relative;overflow:hidden;padding:14px 0 104px} .ab12-hero + .ab12-band--founder{padding-top:14px} /* ------------------ THE WAREHOUSE, ONE SECTION LOWER ------------------ It was the hero's picture, sitting behind "built from the operator's seat" -- a photograph of a place under a line about a person. Behind "who's behind it" it is the room that person runs, which is the same plate doing a job instead of decorating one. Held well back: brightness .38 under a scrim that pools where the copy is and closes on the band's own colour top and bottom, so the picture has no edges and the prose keeps its contrast. This band carries four paragraphs of body text -- it is a ground, not a hero. */ /* THE PICTURE BELONGS TO .ab12-top, NOT TO THE BAND. It has to start at the very top of the page -- behind the masthead and the headline -- and carry on down behind the letter. Two backgrounds on two sections cannot do that without matching scale and offset by hand at every width; one background on the element that contains both of them is the same picture, whole, by construction. */ /* NO isolation, AND NO z-index ON THE CHILDREN. Both were here to keep the picture behind the copy, and both broke the mobile menu on this page: `isolation:isolate` makes .ab12-top a stacking context, and `> * {z-index:1}` makes one of the HERO too -- and the masthead, with its position:fixed full-screen menu, lives inside that hero. A fixed element cannot escape a stacking context, so the panel was being painted inside the top block instead of over the page. None of it is needed. .ab12-top is position:relative with z-index auto, so it creates no context, and its ::before at z-index 0 sits in the same paint group as the two sections -- which are already position:relative -- where document order decides. The picture is first in the DOM, so it is behind. */ .ab12-top{position:relative} .ab12-top::before{ content:"";position:absolute;top:0;left:0;z-index:0; /* THE LAYER IS THE PICTURE'S OWN SHAPE, not the block's. inset:0 made this box as tall as the hero and the letter together, so the photograph -- drawn at full width, which fixes its height -- ended partway down it and stopped on a line. Given the plate's own aspect-ratio the box IS the photograph: `cover` fills it exactly, nothing is cropped, and the mask below can fade the image's own bottom edge because the bottom of the box is the bottom of the image at every width. */ width:100%;aspect-ratio:1883 / 835;height:auto; background-image:url('/assets/images/about-hero-2200.jpg'); background-image:image-set( url('/assets/images/about-hero-2200.avif') type("image/avif"), url('/assets/images/about-hero-2200.webp') type("image/webp"), url('/assets/images/about-hero-2200.jpg') type("image/jpeg")); /* THE WHOLE PLATE, AT FULL WIDTH, FROM THE TOP. `100% auto` is the only sizing that shows all of it: cover crops whichever axis is not binding, and contain pillarboxes. At 1440 the plate draws 1440x639 -- its own proportions, nothing cut -- and it starts at the top of the page because this block does. The box is usually taller than that (the hero and the letter came to 765 at 1440), so the gradient below fades the picture's bottom edge into the ground rather than letting it stop at a line. */ /* ZOOMED, AND AIMED RIGHT. At `cover` the plate draws exactly 1440 wide and she stands at 74% of it -- x1066, which is inside the letter column (290..1150). Sizing by height instead buys horizontal travel: 122% renders 1,755 across, putting her at x1299, in the gap between the last line of type and the right edge of the screen. */ background-size:auto 122%; background-position:0% 55%; background-repeat:no-repeat; /* the scrim, as a filter rather than a second element -- doing it here means the fades below take the picture AND its dimming out together. .28, down from .58, then .5, then .38. The letter is three paragraphs of 15px cream running the full width of the picture, and the warehouse floor behind it is the brightest part of the frame -- the reflections were coming up under the type. Each step back has been because the reading, not the photograph, is what this band is for. At .28 the room is still legible as a room and the prose has a flat ground. AND THE COLOUR COMES BACK A STEP. The band had no saturate at all, which is why the sodium lights in the bay doors were reading orange behind cream type -- the one warm thing on a page that is otherwise a letter. .82 keeps the room warm without the lamps competing; the phone block below already ran .8 for the same reason and can now come down with it. */ filter:saturate(.82) brightness(.28); /* IT FADES AT BOTH ENDS. The bottom fade was already here, so the picture did not stop on a line partway down the block. The top one is new: the photograph now begins at the very top of the page, behind the masthead, and without this it started on an edge instead of emerging out of the page's own dark. */ -webkit-mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 70%, rgba(0,0,0,0) 100%); mask-image:linear-gradient(180deg, rgba(0,0,0,0) 0%, #000 14%, #000 70%, rgba(0,0,0,0) 100%); } /* .ab12-top TAKES THE PLATE'S OWN PROPORTIONS. 1883x835 is 2.255:1, so at any desktop width the block holding the hero AND the letter is exactly as tall as the picture needs, and cover shows all of it with nothing cropped and no bars. It is on the wrapper rather than the band because the picture now starts at the top of the page: the hero is part of the frame. aspect-ratio sets the PREFERRED height, so if the letter ever grows past it the block still grows rather than clipping the text -- it is a floor, not a fixed height. Desktop only. The phone has its own 1.3:1 crop of this scene and its own treatment, and forcing a 2.255:1 block onto a 440px screen would make a 195px letterbox strip of it. */ @media(min-width:1025px){ /* A FLOOR, NOT A RATIO. The block has to be AT LEAST as tall as the picture it is drawing at full width, or the bottom of the frame would fall outside it. Above that it grows with the letter, and the gradient handles whatever is left over. */ .ab12-top{min-height:calc(100vw / 2.255)} /* and the two sections inside it stop painting over the picture */ .ab12-hero{background:transparent} .ab12-band--founder{background:transparent} } /* THE POOL FOLLOWS THE LETTER LEFT. It was centred when the column was; with the column hung off the page gutter the dark has to sit over the left half and the warehouse opens out to the right, where she is walking in the frame. */ /* THE SCRIM IS OFF. She asked to see the plate at full size with no fade on it before deciding how much to put back, so this is a single flat wash -- just enough that cream type on the lit part of the warehouse floor still clears contrast, and nothing that shapes or hides the picture. The version it replaces is kept below, commented, because it is two passes of tuning and the numbers in it are measured ones. */ /* NO SECOND LAYER. The dimming is the ::before's own brightness now and the fade is its own mask, both tied to the picture rather than to the block, so there is nothing left for an overlay to do -- and an overlay spanning the whole block was lightening the flat ground below the picture, which is the other half of why the edge showed. */ /* .ab12-band--founder::after{ background: radial-gradient(ellipse 58% 78% at 33% 50%, rgba(15,13,12,.76) 0%, rgba(15,13,12,.68) 44%, rgba(15,13,12,.42) 76%, rgba(15,13,12,.2) 100%), linear-gradient(180deg, var(--ab-ground-dark) 0%, rgba(15,13,12,.4) 14%, rgba(15,13,12,.4) 84%, var(--ab-ground-dark) 100%); } */ .ab12-band--founder > *{position:relative;z-index:2} /* THE PORTRAIT IS A CIRCLE, and the only one on the site. It was a 420px rectangle with the name set over the bottom of the photograph behind a scrim -- which made it one more card on a page already built from cards, and put type over a face. A circle gives the page a human focal point and breaks the grid; the caption sits underneath where it can simply be read. */ /* NOTHING UNDER THE CIRCLE. The name and role were captioned here AND written again in the paragraph beside it, so the section opened with two introductions to the same person. Everything that is words is on the right now; this is only the photograph. 290, not 320: it sits against a text block rather than a caption, and at 320 it was competing with the heading for the eye. The old .ab12-profile h3/p declarations and the tablet min-height:460 are gone with it -- all three belonged to the rectangular version. */ /* TOP OF THE COLUMN, not the middle of it. flex + align-items:center inside a grid cell that is as tall as the biography was the second half of the 76px drop -- the grid was centring the cell and the flex box was centring the picture inside it. */ /* ---------------------------- THE SIGN-OFF ---------------------------- The circle is 72px at the foot of the letter now, not 290 at the head of a profile. A headshot at the top of four paragraphs is a team member card; the same photograph beside a signature is a person putting their name to what they just said. */ /* LEFT, UNDER THE LETTER. It was centred on the column, which put the signature in a different place from every line above it -- the prose is left-aligned, so a centred sign-off under it reads as two decisions rather than one. A letter signs off on the same edge it was written on. */ .ab12-profile{ display:flex;align-items:center;justify-content:flex-start;gap:18px; margin:44px 0 0;padding:0;border-top:0; } .ab12-profile figcaption{min-width:0} /* DIRECT CHILD ONLY. The signature is a