/* ========================================================================== about-leadership.css - /about/leadership/ (IA page 06) A PORT, NOT A DESIGN. This is the client's own concept page for this route, captured verbatim at lab/concept-2026-09-19/about-leadership-ref.html and re-expressed here. The client asked for it copied one to one, so the default answer to "should this value be nicer" is no. THE MAPPING IS MECHANICAL, the same mapping student-services.css documents. .foo -> .abl-foo every class, no exceptions :root, body -> .abl page-wide settings that must not escape into the shell bare a / * -> :where(.abl) … scoped WITHOUT adding specificity The prefix is not tidiness: site.css already owns .hero, .nav, .cta and .brand for the home page, and this concept names four of its own sections exactly that. :root is not tidiness either - site.css defines --ink, --paper, --gold and --cream at :root with DIFFERENT values, so leaving the concept's tokens there would leave two palettes overwriting each other by load order. WHY :where(.abl) AND NOT .abl - the reason student-services.css records, kept because it applies here identically. `.abl a` is (0,1,1) where the concept's `a` is (0,0,1), and that extra class is enough to flip the cascade: the concept means `a{color:inherit}` to LOSE to `.button{color:#FFFFFF}`. Scoped with a class it would win, and every button on the page would come out cream-on-terracotta. `:where()` contributes zero specificity, so the scoping is pure containment. --------------------------------------------------------------------------- DEVIATION REGISTER - everything this file does that the concept does not. Nothing else deviates. 1 the two reds are the site's tokens, not the concept's near-identical ones 2 the cream is the About family's #F4EEE4, not this concept's #F2EADF 3 the gold is the About family's #CFAF82, not this concept's #CFAF84 4 .hero-visual's flat --rust-deep becomes a two-stop gradient + noise 5 .statement's flat --brown becomes a two-stop gradient + noise 6 .structure's flat --rust-deep becomes a two-stop gradient + noise 7 .related-feature's flat --rust becomes a two-stop gradient + noise 8 no backdrop-filter on the portrait caption; the plate is opaque instead 9 every bare `fr` grid track becomes minmax(0, …) 10 body{overflow-x:hidden} is not copied 11 the reveal is gated on html.js, uses [data-rv]/.is-in, and has a failsafe 12 #contact-guide gets scroll-margin-top for this site's sticky nav 13 .progress is pinned to the top of the viewport, not to the concept's 136px 14 line-height:normal is restored on the page root 1 - THE TWO REDS ARE THE SITE'S. concept --rust #9B291F --rust-deep #742016 site --terracotta #A83226 --terracotta-deep #86251B Under 3 dE76 apart, so nothing about the concept's look changes. The reason to move is that this page renders under the real nav, which is painted --terracotta: two reds that close together on one screen read as a mistake rather than as a choice. about.css DEVIATION 1 made this call first; /about/mission/, /about/principal/ and /about/board/ all ship it. Leadership sits next to Principal in the IA, so it follows Principal. The low-alpha rgba() literals derived from the concept's red are KEPT AS AUTHORED - rgba(155,41,31,.16) and friends - exactly as the sibling ports kept theirs. At .1-.4 alpha on a hairline the difference is not renderable, and rewriting them would be drift with no visible payer. 2 - ONE CREAM IN THE FAMILY. This concept authored #F2EADF for the hero and CTA ground; /about/ and /about/mission/ both authored and kept #F4EEE4, and /about/principal/ moved its own #F3ECE1 onto it for exactly this reason (its DEVIATION 13). A reader moving from /about/principal/ to this page crosses that ground, and three creams inside one section is a mistake rather than a choice. 3 - ONE GOLD IN THE FAMILY. Concept #CFAF84, family #CFAF82 - one step apart per channel, under 1 dE76, which is not a renderable difference. Taking the family token means the four About pages share a palette by construction rather than by coincidence. 4-7 - NO FLAT DARK SOLID ON A LARGE SECTION. This is the standing bug in the user's global CLAUDE.md, restated in this repo's, and it is not a preference: a perfectly flat dark area gets spatially dithered by the display pipeline, and the dither shows as a diagonal hairline at slope ~0.13 spanning the full viewport - in screenshots too, because on Windows the dither is applied before the framebuffer is read. Each stop pair BRACKETS the colour the concept picked, so the band reads as the same colour and simply is not flat: #8D2A1E (134,50,27) + #732013 (110,38,19) -> (122,44,23) = #86251B #442D21 (71,44,33) + #301D13 (51,28,19) -> (61,36,26) = #3A2519 #B0382A (166,67,39) + #99291E (144,51,27) -> (155,59,33) = #A83226 Each carries .abl-noise on top. See the bottom of this file. 8 - NO backdrop-filter. The concept sets `backdrop-filter:blur(10px)` on the portrait caption. site.css records what that costs on this project: a blurred layer over moving content stalled the renderer hard enough to freeze screenshots, and the nav's backdrop-filter was removed for it. about.css DEVIATION 10 already dropped the same declaration on the same kind of caption. The plate here is rgba(248,244,238,.94) - at 94% opacity a 10px blur is contributing about 6% of the pixel and no visible work - so it goes opaque at .97, which is what site.css's own `@supports not (backdrop-filter…)` branch falls back to anyway. 9 - minmax(0, …) ON EVERY BARE fr TRACK. A bare `fr` is min-width:auto, so a long word, an email address or a fixed-width child can refuse to shrink and push the grid wider than the viewport. Same layout at every width that already worked, and it cannot overflow. /about/principal/ shipped this as its DEVIATION 7 after a sideways-scroll bug that only showed up at 24 measured widths. Tracks touched: .abl-hero (both, at <=1100; the hero retired 2026-09-27), .abl-principal, .abl-structure-head, .abl-related-intro, .abl-related-scene. The concept's own minmax(410px,.92fr) and minmax(0,1fr) are kept as authored. 10 - body{overflow-x:hidden} IS NOT COPIED. overflow:hidden on body makes it a scroll container and re-parents every position:sticky on the page - which would break the concept's OWN .abl-principal-index. site.css already ships overflow-x:clip on html,body, which is the one value that may legally pair with overflow-y:visible. 11 - THE REVEAL IS GATED ON html.js AND CANNOT STRAND THE PAGE. The concept ships `[data-reveal]{opacity:0}` unconditionally, so if its script 404s or throws the page body is invisible forever. CLAUDE.md: content visibility must never depend on JS or on an animation firing. Three guards, the shape the four sibling ports use - see the MOTION block. The attribute is `data-rv` rather than `data-reveal` on purpose: that is the name tools/check-page-rules.mjs looks for, so the guards are checked rather than merely claimed. 12 - scroll-margin-top ON THE ANCHOR TARGET. The retired hero's primary CTA was an in-page jump to #contact-guide; since 2026-09-27 the master hero's link jumps to #statement, which gets the same margin. The concept's own shell is position:relative and scrolls away, so its anchor lands flush; ours is `.topstack{position:sticky}` and pins an 88px nav, which would sit on top of the section heading the reader just asked for. 13 - THE PROGRESS BAR IS PINNED TO 0. The concept hard-codes `top:136px`, which is its own fixed shell: a 46px notice plus a 90px nav. Ours is the real one from index.html and it scrolls, so 136px would leave a gold line floating in the middle of the page. /about/principal/ made this call first as its DEVIATION 6. 14 - line-height:normal IS INHERITANCE, NOT STYLING, and it is the difference between porting a stylesheet and porting a page. The concept sets no line-height on , so everything without its own inherits `normal`. Here the page sits under site.css, whose body carries line-height:1.6, so without this every element that does not set its own renders about 30% taller. student-services.css measured the same omission moving two whole sections by ~3.2px each before it was put back. 15 - THE FOUR .related LINKS CARRY PHOTOGRAPHS, where the concept's section is four pieces of text. Site rule, 2026-09-19: a link to /about/mission/ shows the mission photograph wherever on the site that link sits, and tools/quicklink-photos.json is the one map from route to picture. Four links, four destinations, four different pictures - which is the point, because until today five hand-built sections shared lead-principal.webp and it was standing in for Mission, Board and Accreditation at once. Point 7 in the page's own register is the markup half; the layout, and the reason the pictures go INSIDE the composition rather than beside it, are at the bottom of this file. --------------------------------------------------------------------------- TWO THINGS THAT LOOK LIKE BUGS AND ARE THE CONCEPT'S OWN BEHAVIOUR. Both are reproduced rather than "fixed", because one-to-one is the instruction. a. `.contact-guide{overflow:hidden}` makes that section a scroll container, which re-parents the `.guide-head{position:sticky}` inside it. The section never scrolls, so the sticky column never sticks - in the concept either. Removing the overflow would change what the client approved AND unclip the contact orbit's decorations, so it stays. b. Every element-level `:hover{transform:…}` on a revealed element is inert. `.contact-choice`, `.flow-chapter`, `.related-feature` and `.related-note` all carry a hover transform AND the reveal attribute, and the reveal's end-state `transform:none` is declared later in the concept's own stylesheet at equal specificity, so it wins. The hovers that DO fire are the ones targeting a child - `.contact-go span`, `.related-note span` - and those are carried unchanged. ========================================================================== */ /* ---------- PAGE ROOT - the concept's :root tokens and its body rule, scoped -- */ .abl{ /* DEVIATIONS 1, 2, 3 - see the register above. */ --abl-rust:var(--terracotta); /* concept #9B291F */ --abl-deep:var(--terracotta-deep); /* concept #742016 */ --abl-cream:#F4EEE4; /* concept #F2EADF */ --abl-gold:#CFAF82; /* concept #CFAF84 */ /* Kept as the concept authored them. --ink takes the site token for the same reason the reds do: #26170E against site --ink #34231A is ~2.6 dE, the same warm near-black, and this text sits in a document whose nav, drawer and footer are painted from site.css. --night is not carried at all: the concept uses it only for its own banner, mobile panel and footer, and all three are the real shell here. */ --abl-ink:var(--ink); /* concept #26170E */ --abl-muted:#6E594F; --abl-brown:#3A2519; --abl-paper:#F8F4EE; --abl-line:rgba(38,23,14,.17); --abl-shadow:0 28px 75px rgba(68,33,16,.16); /* DEVIATIONS 4-7 - the stop pairs, each bracketing the flat colour it replaces. The arithmetic is in the register; do not round them. */ --abl-deep-hi:#8D2A1E; --abl-deep-lo:#732013; /* mean #86251B */ --abl-brown-hi:#442D21; --abl-brown-lo:#301D13; /* mean #3A2519 */ --abl-rust-hi:#B0382A; --abl-rust-lo:#99291E; /* mean #A83226 */ } :where(.abl) *{box-sizing:border-box} /* DEVIATION 14. */ .abl{margin:0;background:var(--abl-paper);color:var(--abl-ink);font-family:"DM Sans",sans-serif;line-height:normal} :where(.abl) a{color:inherit;text-decoration:none} /* The concept's `html{scroll-behavior:smooth}`, carried because this page has a real in-page anchor as its primary hero CTA and the concept's own reduced-motion block puts it back to auto. accreditation.css ships it the same way. It only ever applies where this stylesheet is loaded. */ html{scroll-behavior:smooth} /* ---------- scroll progress - DEVIATION 13 ------------------------------ */ /* Ships at width:0, so with no JS it is simply not there. It is a decoration, never part of the reveal set: CLAUDE.md, controls and chrome do not start at opacity 0 and wait for a transition that may never finish. */ .abl-progress{position:fixed;z-index:60;top:0;left:0;height:3px;width:0;background:var(--abl-gold);transform-origin:left center} /* ---------- HERO: MOVED TO THE MASTER, 2026-09-27 ------------------------ The concept's hero - crumbs, the "Leadership, clearly connected." title, the lede and its two actions, the outlined arch behind them, and the dark lattice panel holding the principal's portrait (DEVIATION 4's gradient and noise film) - is gone. The client decided that every interior page opens with the one master hero, this one included ("lose them"), and assets/css/page-hero.css owns it. Do not restyle the hero here: a rule in this file that reaches into .page-hero makes this page the odd one out, which is exactly what the decision was made to end. The eyebrow, the button and the text link stay: the body uses all three. The portrait frame and its caption stay too, moved with the portrait into the principal's entry - see PRINCIPAL below. */ .abl-eyebrow{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--abl-rust);font-weight:700} .abl-button{display:inline-flex;align-items:center;gap:15px;background:var(--abl-rust);color:#FFFFFF;padding:17px 22px;border-radius:3px;font-size:14px;font-weight:700;transition:.3s} .abl-button:hover{background:var(--abl-deep);transform:translateY(-3px)} .abl-text-link{font-size:14px;font-weight:700;border-bottom:1px solid rgba(38,23,14,.32);padding:8px 0;transition:.25s} .abl-text-link:hover{color:var(--abl-rust);border-color:var(--abl-rust)} /* ---------- STATEMENT - gold label beside one Caslon line, on the brown band -- */ /* DEVIATION 5 - gradient + noise. position:relative is added with it: the film is absolutely positioned, which also keeps it OUT of this grid - an absolutely positioned child of a grid container is not a grid item, so the 180px/1fr pair is untouched. */ .abl-statement{background:linear-gradient(180deg,var(--abl-brown-hi) 0%,var(--abl-brown-lo) 100%);color:#FCF7EE;padding:67px clamp(25px,10vw,185px);display:grid;grid-template-columns:180px minmax(0,1fr);gap:55px;align-items:center;position:relative;isolation:isolate} /* The master hero's jump link lands here (#statement, 2026-09-27). The band's 67px of top padding is less than the sticky nav is tall, so without this the label would arrive under the nav - DEVIATION 12's fix, for the new target. */ .abl-statement{scroll-margin-top:calc(var(--nav-h) + 14px)} .abl-statement-label{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--abl-gold);font-weight:700;position:relative} .abl-statement blockquote{margin:0;font-family:"Libre Caslon Display",serif;font-size:clamp(27px,3.3vw,49px);line-height:1.27;max-width:1150px;position:relative} /* ---------- PRINCIPAL - sticky outlined 01, the letter, a two-cell meta rail -- */ .abl-principal{padding:clamp(105px,12vw,180px) clamp(25px,8vw,145px);display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:clamp(65px,11vw,175px);position:relative} .abl-principal-index{font-family:"Libre Caslon Display",serif;font-size:clamp(130px,17vw,260px);line-height:.7;color:transparent;-webkit-text-stroke:1px rgba(155,41,31,.22);position:sticky;top:210px;height:min-content} .abl-principal-index small{display:block;font-family:"DM Sans",sans-serif;font-size:11px;line-height:1;letter-spacing:.2em;text-transform:uppercase;color:var(--abl-rust);-webkit-text-stroke:0;margin:45px 0 17px;font-weight:700} .abl-principal-index .abl-hairline{height:1px;background:var(--abl-line);width:100%;max-width:330px} .abl-principal-content{max-width:820px} .abl-principal-content h2,.abl-contact-guide h2,.abl-structure h2,.abl-related h2,.abl-cta h2{font-family:"Libre Caslon Display",serif;font-weight:400;font-size:clamp(45px,5.6vw,82px);line-height:1.01;letter-spacing:-.04em;margin:20px 0 29px} .abl-principal-intro{font-family:"Libre Caslon Display",serif;font-size:clamp(23px,2.2vw,34px);line-height:1.43;color:#4D3931;margin:0 0 38px} .abl-principal-body{font-size:17px;line-height:1.8;color:var(--abl-muted);max-width:720px} .abl-principal-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);margin-top:54px;border-top:1px solid var(--abl-line);border-bottom:1px solid var(--abl-line)} .abl-meta-item{padding:24px 24px 24px 0} .abl-meta-item+ .abl-meta-item{border-left:1px solid var(--abl-line);padding-left:28px} .abl-meta-item small{display:block;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--abl-rust);font-weight:700;margin-bottom:8px} .abl-meta-item a,.abl-meta-item span{font-size:15px;font-weight:600} /* The direct-contact cell carries a real email address. It is the longest unbreakable string on the page and it is inside a 1fr track, so it gets an explicit break rather than relying on minmax(0,…) alone to save the layout. */ .abl-meta-item a{overflow-wrap:anywhere} .abl-principal-links{display:flex;gap:25px;margin-top:37px;flex-wrap:wrap} /* THE PRINCIPAL'S PORTRAIT, moved here from the retired hero, 2026-09-27. It was the only place the school's own photograph of Ziad Abdulla appeared, so it moved to his entry rather than leaving with the hero. It keeps the concept's arched frame and its opaque caption plate (DEVIATION 8). It fills the left column under the outlined 01. The figure comes after the article in the source, so a screen reader reaches the section's heading before the picture; the grid puts it back on the left, and the article spans both rows. That also makes the 01 a plain heading for its column rather than a sticky one: a sticky 01 would slide down over the portrait beneath it. NEVER WIDER THAN ITS FILE. The client's file is 640x768 and is not to be upscaled, so the frame is capped at 400px and keeps the file's own aspect ratio - the crop is the photograph's, not the frame's. */ .abl-principal{grid-template-rows:auto 1fr;row-gap:0} /* its gap is the column gutter; as a row gap it opened a hole above the portrait */ .abl-principal-index{grid-column:1;grid-row:1;position:relative;top:auto} .abl-principal-content{grid-column:2;grid-row:1 / span 2} .abl-portrait-frame{grid-column:1;grid-row:2;align-self:start;width:100%;max-width:400px;aspect-ratio:640 / 768;margin:clamp(44px,5vw,72px) 0 0;position:relative;border-radius:200px 200px 0 0;overflow:hidden;box-shadow:var(--abl-shadow);isolation:isolate} .abl-portrait-frame:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(253,247,237,.3);border-radius:inherit;pointer-events:none} .abl-portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block;filter:saturate(.86) contrast(1.02)} /* DEVIATION 8 - opaque plate, no backdrop-filter. */ .abl-portrait-caption{position:absolute;left:18px;right:18px;bottom:18px;background:rgba(248,244,238,.97);padding:16px 20px;z-index:3} .abl-portrait-caption b{font-family:"Libre Caslon Display",serif;font-size:21px;font-weight:400} .abl-portrait-caption span{font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--abl-rust);font-weight:700} /* Between the stacked layout and 1100 the column is only 230-300px wide, and at the full plate the name wrapped to two lines and the plate climbed over his face. A tighter plate keeps it to one line at 800. */ @media(min-width:781px) and (max-width:1100px){ .abl-portrait-caption{left:12px;right:12px;bottom:12px;padding:12px 16px} .abl-portrait-caption b{font-size:18px} } /* ---------- CONTACT GUIDE - four choices around a drawn arch --------------- */ /* DEVIATION 12 - see the register. */ .abl-contact-guide{background:#EBE2D3;padding:clamp(105px,12vw,180px) clamp(25px,8vw,145px);overflow:hidden;scroll-margin-top:calc(var(--nav-h) + 14px)} .abl-contact-stage{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:clamp(70px,10vw,165px);align-items:start} /* Inert by the concept's own construction - see note (a) in the header. */ .abl-guide-head{position:sticky;top:175px} .abl-guide-head p{font-size:17px;line-height:1.78;color:#614E46;max-width:430px;margin:0} .abl-guide-mark{font-family:"Libre Caslon Display",serif;font-size:clamp(120px,15vw,220px);line-height:.65;color:rgba(155,41,31,.1);margin:58px 0 0 -12px} .abl-contact-orbit{min-height:760px;position:relative} .abl-contact-orbit:before{content:"";position:absolute;width:370px;height:610px;border:1px solid rgba(155,41,31,.2);border-radius:190px 190px 0 0;left:50%;top:70px;transform:translateX(-50%)} .abl-contact-orbit:after{content:"CONTACT";position:absolute;left:50%;top:355px;transform:translate(-50%,-50%) rotate(-90deg);font-size:10px;letter-spacing:.45em;color:rgba(155,41,31,.42);font-weight:700} /* nth-child, so the orbit's ONLY children are the four anchors. Nothing decorative may be added inside it without renumbering these. */ .abl-contact-choice{position:absolute;width:min(360px,46%);z-index:2;transition:transform .35s ease} .abl-contact-choice:nth-child(1){left:0;top:0} .abl-contact-choice:nth-child(2){right:0;top:145px} .abl-contact-choice:nth-child(3){left:3%;top:405px} .abl-contact-choice:nth-child(4){right:2%;bottom:0} .abl-contact-choice:hover{transform:translateY(-8px)} .abl-contact-kicker{display:flex;align-items:center;gap:13px;color:var(--abl-rust);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700} .abl-contact-kicker b{font-family:"Libre Caslon Display",serif;font-size:31px;font-weight:400;letter-spacing:0;color:rgba(155,41,31,.5)} .abl-contact-choice h3{font-family:"Libre Caslon Display",serif;font-size:clamp(31px,3.2vw,48px);line-height:1.04;font-weight:400;margin:12px 0 15px} .abl-contact-choice p{font-size:14px;line-height:1.7;color:#614F48;margin:0;max-width:330px} .abl-contact-go{display:inline-flex;align-items:center;gap:10px;margin-top:17px;font-size:12px;font-weight:700;color:var(--abl-rust);letter-spacing:.08em;text-transform:uppercase} .abl-contact-go span{font-size:20px;transition:transform .3s} .abl-contact-choice:hover .abl-contact-go span{transform:translate(5px,-3px)} /* ---------- STRUCTURE - four chapters stepping down the deep band ---------- */ /* DEVIATION 6 - gradient + noise. */ .abl-structure{background:linear-gradient(180deg,var(--abl-deep-hi) 0%,var(--abl-deep-lo) 100%);color:#FCF7EE;padding:clamp(110px,12vw,185px) clamp(25px,8vw,145px);position:relative;isolation:isolate;overflow:hidden} .abl-structure:before{content:"";position:absolute;width:760px;height:760px;border:1px solid rgba(207,175,132,.16);border-radius:50%;left:-410px;bottom:-490px} .abl-structure-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(65px,10vw,160px);align-items:start;position:relative;z-index:1} .abl-structure-head .abl-eyebrow{color:var(--abl-gold)} .abl-structure-head p{font-size:17px;line-height:1.78;color:#DFD0CA;max-width:560px;margin:32px 0 0} .abl-structure-flow{padding-top:45px;position:relative} /* nth-child again: .abl-structure-flow holds the four chapters and nothing else. */ .abl-flow-chapter{display:grid;grid-template-columns:100px minmax(0,1fr);gap:28px;align-items:start;width:74%;margin-bottom:48px;transition:transform .35s ease} .abl-flow-chapter:nth-child(2){margin-left:8.5%} .abl-flow-chapter:nth-child(3){margin-left:17%} .abl-flow-chapter:nth-child(4){margin-left:25.5%;margin-bottom:0} .abl-flow-chapter:hover{transform:translateX(12px)} .abl-flow-number{font-family:"Libre Caslon Display",serif;font-size:79px;line-height:.75;color:transparent;-webkit-text-stroke:1px rgba(207,175,132,.55)} .abl-flow-copy h3{font-family:"Libre Caslon Display",serif;font-size:clamp(29px,3.3vw,46px);font-weight:400;margin:0 0 10px} .abl-flow-copy p{font-size:14px;line-height:1.68;color:#DBCCC5;margin:0;max-width:420px} .abl-flow-copy:before{content:"\2726";display:block;color:var(--abl-gold);font-size:12px;margin-bottom:11px} /* ---------- RELATED - one arched feature beside three offset notes --------- */ .abl-related{padding:clamp(105px,11vw,170px) clamp(25px,8vw,145px);background:var(--abl-paper);color:var(--abl-ink);overflow:hidden} .abl-related-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:80px;align-items:end} .abl-related-intro h2{max-width:830px;margin-bottom:0} .abl-related-intro p{font-size:17px;line-height:1.75;color:var(--abl-muted);max-width:480px;margin:0 0 7px} .abl-related-scene{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(55px,8vw,130px);align-items:center;margin-top:85px} /* DEVIATION 7 - gradient + noise. The film is a
, NOT a : the concept styles `.related-feature span` as the absolutely positioned arrow in the corner, and a span here would silently become that arrow. */ .abl-related-feature{min-height:510px;background:linear-gradient(165deg,var(--abl-rust-hi) 0%,var(--abl-rust-lo) 100%);color:#FCF7EE;border-radius:270px 270px 3px 3px;padding:70px 55px 48px;display:flex;flex-direction:column;justify-content:flex-end;position:relative;isolation:isolate;overflow:hidden;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .abl-related-feature:before{content:"01";position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-family:"Libre Caslon Display",serif;font-size:clamp(145px,18vw,280px);color:rgba(252,246,238,.09)} .abl-related-feature:after{content:"";position:absolute;inset:30px;border:1px solid rgba(253,244,232,.22);border-radius:240px 240px 0 0} .abl-related-feature small{color:var(--abl-gold);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;position:relative;z-index:1} .abl-related-feature h3{font-family:"Libre Caslon Display",serif;font-size:clamp(44px,5vw,72px);line-height:.96;font-weight:400;margin:17px 0 0;max-width:480px;position:relative;z-index:1} .abl-related-feature span{position:absolute;right:45px;bottom:48px;font-size:29px;z-index:2} .abl-related-feature:hover{transform:translateY(-10px) rotate(-1deg)} .abl-related-notes{display:flex;flex-direction:column;gap:58px} .abl-related-note{display:block;max-width:520px;transition:transform .35s ease} .abl-related-note:nth-child(2){margin-left:16%} .abl-related-note:nth-child(3){margin-left:5%} .abl-related-note small{display:block;color:var(--abl-rust);font-size:11px;letter-spacing:.17em;text-transform:uppercase;font-weight:700;margin-bottom:10px} .abl-related-note h3{font-family:"Libre Caslon Display",serif;font-size:clamp(30px,3.5vw,49px);line-height:1.05;font-weight:400;margin:0;display:inline} .abl-related-note span{display:inline-block;color:var(--abl-rust);font-size:21px;margin-left:13px;transition:transform .3s} .abl-related-note:hover{transform:translateX(10px)} .abl-related-note:hover span{transform:translate(5px,-4px)} /* ---------- CTA - two half-arches off the bottom corners ------------------- */ .abl-cta{text-align:center;padding:clamp(100px,11vw,165px) 24px;background:var(--abl-cream);position:relative;overflow:hidden} .abl-cta:before,.abl-cta:after{content:"";position:absolute;width:330px;height:470px;border:1px solid rgba(155,41,31,.16);border-radius:180px 180px 0 0;bottom:-290px} .abl-cta:before{left:-90px} .abl-cta:after{right:-90px} .abl-cta h2{max-width:920px;margin:20px auto 27px} .abl-cta p{font-size:18px;line-height:1.7;color:#655048;max-width:650px;margin:0 auto 37px} /* ---------- MOTION - DEVIATION 11 ------------------------------------------ THREE GUARDS, and the page is readable if any one of them is all that works: 1. gated on `html.js`, set by the shell's inline script - with scripting off nothing is ever hidden in the first place; 2. revealed per element by `.is-in`, added by this page's own script as each scrolls in, which is what preserves the concept's stagger; 3. revealed wholesale by `html.abl-revealed`, set by a 6s timer in the page's if the page script never armed. It cannot reuse site.css's `.rv`/`html.in` pair: site.js block 3 adds `in` immediately on any page with no `.stat` elements, and this page has none by design, so everything would reveal on load and the fade would be gone. ONLY CONTENT CARRIES THESE, never a control. .abl-progress is not in the set. */ html.js .abl [data-rv]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)} html.js .abl [data-rv].is-in{opacity:1;transform:none} .abl .abl-delay-1{transition-delay:.1s} .abl .abl-delay-2{transition-delay:.2s} .abl .abl-delay-3{transition-delay:.3s} /* THE FAILSAFE RULE CANCELS THE TRANSITION, AND THAT IS THE WHOLE RULE. A running CSS transition is a higher cascade origin than author `!important` - CLAUDE.md records it as the thing that made the burger vanish intermittently. An element whose `opacity 0 -> 1` transition has started and never finished (a backgrounded tab, a bfcache restore, throttled timers) is pinned at its START value, and a failsafe that only sets `opacity:1` loses to it. Measured on the sibling pages at t+85s in a background tab: the class was present and 19 of 19 elements were still invisible. Cancelling the transition makes the element JUMP to the end value instead of racing toward it. Specificity: this is (0,3,1), the same as the hide rule, and it wins on order. Keep it last. */ html.abl-revealed .abl [data-rv]{opacity:1;visibility:visible;transform:none;transition:none} @media(max-width:1100px){ .abl-contact-stage{grid-template-columns:minmax(0,.65fr) minmax(0,1.35fr);gap:55px} .abl-contact-choice{width:47%} .abl-flow-chapter:nth-child(2){margin-left:8%} .abl-flow-chapter:nth-child(3){margin-left:16%} .abl-flow-chapter:nth-child(4){margin-left:24%} } @media(max-width:780px){ .abl-portrait-frame{max-width:340px;margin-top:56px} .abl-portrait-caption{left:15px;right:15px;bottom:15px} .abl-statement{grid-template-columns:minmax(0,1fr);gap:18px;padding:53px 24px} .abl-principal{display:block;padding:95px 22px} .abl-principal-index{position:relative;top:auto;font-size:125px;margin-bottom:55px} .abl-principal-meta{grid-template-columns:minmax(0,1fr)} .abl-meta-item+ .abl-meta-item{border-left:0;border-top:1px solid var(--abl-line);padding-left:0} .abl-contact-guide{padding:95px 22px} .abl-contact-stage{display:block} .abl-guide-head{position:relative;top:auto;margin-bottom:75px} .abl-guide-mark{font-size:110px;margin-top:42px} .abl-contact-orbit{min-height:auto} .abl-contact-orbit:before,.abl-contact-orbit:after{display:none} /* The concept's own !important pair, and it is load-bearing: it has to beat the four :nth-child rules that place the orbit, which are equally specific and declared earlier. */ .abl-contact-choice{position:relative!important;inset:auto!important;width:88%;margin:0 0 58px} .abl-contact-choice:nth-child(even){margin-left:12%} .abl-contact-choice h3{font-size:38px} .abl-structure{padding:95px 22px} .abl-structure-head{display:block} .abl-structure-flow{padding-top:70px} .abl-flow-chapter,.abl-flow-chapter:nth-child(n){grid-template-columns:72px minmax(0,1fr);gap:17px;margin:0 0 55px 0;width:auto} .abl-flow-number{font-size:58px} .abl-related{padding:95px 22px} .abl-related-intro,.abl-related-scene{grid-template-columns:minmax(0,1fr);gap:28px} .abl-related-scene{margin-top:65px} .abl-related-feature{min-height:440px;padding:55px 35px 38px} .abl-related-feature span{right:34px;bottom:38px} .abl-related-notes{gap:46px;padding:20px 10px} .abl-related-note:nth-child(n){margin-left:0} .abl-related-note:nth-child(2){margin-left:12%} } @media(max-width:420px){ .abl-portrait-frame{max-width:300px} .abl-portrait-caption b{font-size:19px} .abl-principal-content h2,.abl-contact-guide h2,.abl-structure h2,.abl-related h2,.abl-cta h2{font-size:43px} .abl-contact-choice{width:94%} .abl-contact-choice:nth-child(even){margin-left:6%} .abl-flow-chapter,.abl-flow-chapter:nth-child(n){grid-template-columns:55px minmax(0,1fr)} .abl-flow-number{font-size:47px} .abl-related-feature{min-height:400px;border-radius:210px 210px 3px 3px} .abl-related-feature h3{font-size:47px} } /* The concept's own reduced-motion block, scoped to this page. `html` keeps its scroll-behavior reset because this file is what set it to smooth. The [data-rv] line is the reveal's fourth guard: with motion reduced, everything is simply visible, because our gate is a class rather than its observer. */ @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .abl *,.abl *:before,.abl *:after{animation:none!important;transition:none!important} .abl [data-rv],html.js .abl [data-rv]{opacity:1;transform:none} } /* ========================================================================== THE ONE ADDITION THAT IS NOT IN THE CONCEPT - see DEVIATIONS 4-7. Identical turbulence and opacity to site.css's `.mission7__noise`, to `.ss-noise` and to `.brd-noise`. It is the standing fix, not a new effect, and it is deliberately NOT a shared utility: this repo has no global `.noise-overlay`, every page namespaces its own copy, and a bare `.noise` here would resolve `inset:0` against whichever ancestor happened to be positioned. NO z-index. It is the first child of its band and every piece of content in that band is position:relative or z-indexed, so the film paints over the gradient and under the copy by document order alone. A negative z-index would need the band to be a stacking context, and `position:relative` is not one - that is the bug DESIGN-LIBRARY records twice, where the layer rendered with correct geometry and was simply invisible underneath. The four bands carry isolation:isolate regardless, because mix-blend-mode without it blends the film with everything behind the band, not just the band. ========================================================================== */ .abl-noise{position:absolute;inset:0;pointer-events:none;opacity:.035; mix-blend-mode:overlay; background-image:url("data:image/svg+xml;utf8,")} /* ========================================================================== DEVIATION 15 - THE FOUR RELATED LINKS CARRY THEIR DESTINATION'S PHOTOGRAPH. Not in the concept, which ships four pieces of text. Kept at the bottom of the file beside the other addition that is not the concept's, so the ported block above stays exactly the thing that was reviewed. WHY THE PICTURES ARE IN THE COMPOSITION AND NOT BOLTED ONTO IT. This section is one arched feature beside three offset notes, and the offsets are the design: 16% and 5% indents that make the three notes read as a staircase walking away from the arch. Four identical thumbnails would flatten that into a list. So the feature's photograph FILLS the arch - the arch is already a picture frame, it just never had a picture in it - and the three notes get the same arch in miniature at the head of their own indent, so the staircase becomes a staircase of arches. THE FEATURE'S PHOTOGRAPH SITS AT z-index:-1, AND THAT IS LOAD-BEARING. .abl-related-feature already carries isolation:isolate (see the note under .abl-noise), so a negative z-index child paints after the band's own gradient background and before everything else inside it. The painting order that falls out is exactly the one the concept's layers want: feature gradient -> photograph + scrim -> the "01" numeral (:before) -> the noise film -> the inner arch border (:after) -> copy -> arrow Without the isolation the -1 layer would escape the band and paint behind the section, which is the bug DESIGN-LIBRARY records twice - correct geometry, invisible result. Do not remove it. It also has to be -1 rather than a low positive z-index: the numeral is a ::before, which is the element's FIRST child, so any later child at z-index auto or 0 would paint on top of it. THE SCRIM IS WHAT THE GRADIENT USED TO BE, AND WHERE IT TURNS OPAQUE WAS MEASURED, NOT CHOSEN. The photograph covers the band's own rust gradient, so that gradient is re-stated over the picture as :after: 34% at the crown of the arch, where nothing but the watermark numeral sits and the picture is meant to read, and fully opaque from the half-way line down, which turns the foot of the arch into a plain rust plinth for the type. The first attempt faded to 97% only at the very bottom, which looked right and was not: the copy is bottom-aligned with 48px of padding, so the eyebrow actually sits around 0.58 of the way down, not at 1.0, and the board-room photograph is bright white exactly there. Measured in Chrome by sampling the real decoded pixels under the text through the object-fit:cover mapping and compositing the scrim over them, the gold #CFAF82 eyebrow came out at 3.30:1 - under the 4.5 floor for 11px text. Arithmetic against the bottom stop had said 5.1:1, which is the G6 mistake this project already records: a scrim measured against its own end stop rather than where the text is. With the scrim opaque by 50% the same sampling gives, worst case over a grid of pixels under each block: eyebrow 5.00:1 at 1440 5.04:1 at 900 5.02:1 at 390 (floor 4.5) heading 9.94:1 9.98:1 9.96:1 (floor 3.0) And the picture COSTS NOTHING in contrast: the concept's own 165deg gradient under that same eyebrow, with no photograph at all, measures 3.34:1. The arch was already below the floor there and now it is above it. THE NOTES' PLATES ARE LIGHT, NOT DARK. They sit on --abl-paper, and the placeholder that shows for the instant before a lazy image decodes is a warm cream two-stop, not a dark one. That keeps them out of the anti-dither rule by construction, rather than by hanging another noise film on three 104px boxes where a film at 3.5% opacity would be doing nothing. NO PERPETUAL ANIMATION, and nothing here needs JS. Both hovers are transitions on `transform` only - compositor properties, no layout and no paint - and the pictures are plain in the markup, so they are visible whether or not a script ever runs. The wrappers are deliberately NOT in the reveal set. ========================================================================== */ /* --- the feature: the photograph fills the arch --------------------------- */ .abl-related-media{position:absolute;inset:0;z-index:-1;overflow:hidden} .abl-related-media img{display:block;width:100%;height:100%;object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1)} .abl-related-media:after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(144,43,31,.34) 0%,rgba(137,40,29,.58) 26%,rgba(128,33,25,.90) 40%,rgba(117,33,21,.995) 50%,rgba(115,32,19,1) 100%)} .abl-related-feature:hover .abl-related-media img{transform:scale(1.06)} /* --- the three notes: the same arch in miniature, leading each indent ----- .abl-related-note is display:block in the concept and becomes a two-track grid here. The copy is wrapped in .abl-related-copy rather than placed with grid-column, because `h3{display:inline}` and the inline arrow after it have to stay in one inline formatting context - as direct grid children they would each be blockified and the arrow would drop onto its own line. */ .abl-related-note{display:grid;grid-template-columns:auto minmax(0,1fr); column-gap:clamp(18px,1.9vw,28px);align-items:center} .abl-related-copy{min-width:0} .abl-related-shot{position:relative;overflow:hidden; width:104px;height:130px;border-radius:52px 52px 2px 2px; background:linear-gradient(180deg,#EAE2D3 0%,#E3D4B6 100%); box-shadow:inset 0 0 0 1px rgba(155,41,31,.22)} .abl-related-shot img{display:block;width:100%;height:100%;object-fit:cover; transition:transform .45s cubic-bezier(.2,.7,.2,1)} .abl-related-note:hover .abl-related-shot img{transform:scale(1.06)} /* Between 780 and 1100 the scene is still two columns, so the note column is at its narrowest of any width on the page - about 325px at 900, and the plate and its gutter come out of that. Measured: at the desktop 104px the heading "Mission, Vision & Values" takes three lines and the eyebrow wraps. A smaller plate here buys the copy back without giving up the arch. */ @media(max-width:1100px){ .abl-related-note{column-gap:16px} .abl-related-shot{width:80px;height:100px;border-radius:40px 40px 2px 2px} } @media(max-width:780px){ .abl-related-note{column-gap:clamp(18px,1.9vw,28px)} .abl-related-shot{width:88px;height:110px;border-radius:44px 44px 2px 2px} } @media(max-width:420px){ .abl-related-note{column-gap:16px} .abl-related-shot{width:70px;height:88px;border-radius:35px 35px 2px 2px} }