rather than an , so the "Email" affordance has to come off with it. Do not turn this into a mailto: - an invented address is the one failure mode a staff directory cannot recover from. */ .abf-person.abf-no-email:after{display:none} .abf-person-name{font-family:"Libre Caslon Display",serif;font-size:clamp(24px,2.1vw,32px);line-height:1.08} .abf-person-role{font-size:11px;line-height:1.5;letter-spacing:.12em;text-transform:uppercase;color:#876E61;margin-top:9px} /* ---------- THE FAITH BAND - one division bled full width ---------------- DEVIATION 1 for the third time. The negative side margins are the concept's and they cancel .abf-directory's own padding exactly (-7vw against 7vw), so the band reaches both edges without ever being wider than the viewport; site.css's overflow-x:clip is the backstop, not the mechanism. `position:relative` and `isolation:isolate` are NOT the concept's - they are what the noise film needs, see DEVIATION 1 and .abf-noise. */ .abf-faith-wrap{background:linear-gradient(180deg,#9E231D 0%,#93211B 100%);margin:0 clamp(-120px,-7vw,-22px) clamp(-140px,-9vw,-85px);padding:clamp(85px,9vw,135px) clamp(22px,7vw,120px) clamp(95px,10vw,150px);color:white;position:relative;isolation:isolate} .abf-faith-wrap .abf-faculty-group{max-width:1440px;margin:0 auto} .abf-faith-wrap .abf-group-story>p{color:#E6D4CE} .abf-faith-wrap .abf-eyebrow{color:#FFC662} .abf-faith-wrap .abf-person{color:white;border-color:rgba(255,255,255,.25)} .abf-faith-wrap .abf-person-role{color:#E2D0C9} .abf-faith-wrap .abf-person:after{color:#FFCE70} .abf-faith-wrap .abf-person:hover{color:#FFD87E} /* ---------- VISIT - the one call to action ------------------------------- */ .abf-visit{background:var(--cream);padding:clamp(85px,9vw,140px) clamp(24px,7vw,120px);position:relative;overflow:hidden} .abf-visit-inner{max-width:1260px;margin:auto;display:grid;grid-template-columns:1.15fr .85fr;gap:70px;align-items:center} .abf-visit h2{font-family:"Libre Caslon Display",serif;font-size:clamp(48px,5.6vw,84px);font-weight:400;line-height:1.02;letter-spacing:-.04em;margin:16px 0 0} .abf-visit p{font-size:17px;line-height:1.75;color:var(--muted);margin:0 0 28px;max-width:520px} .abf-btn{display:inline-flex;align-items:center;justify-content:space-between;gap:28px;background:var(--rust);color:white;padding:17px 20px;min-width:225px;border-radius:3px;font-size:14px;font-weight:700;transition:.3s} .abf-btn:hover{background:var(--rust-deep);transform:translateY(-3px)} /* ---------- MOTION ------------------------------------------------------ DEVIATION 2. Three guards, the same shape the sibling ports use: 1. gated on `html.js`, set by the shell's inline script - with scripting off nothing is ever hidden and all twenty-four names are simply there; 2. revealed per element by `.abf-in`, added by this page's own script as each block scrolls in, which is what preserves the concept's stagger; 3. revealed wholesale by `html.abf-revealed`, set by a 6s timer in this page's inline script if the page script never armed. Only content carries [data-rv], never a control - CLAUDE.md, the burger bug. The in-page navigation, .abf-section-nav, is a control and is deliberately outside the reveal set, as the hero's .abf-jump was. */ :where(.abf-page) [data-rv]{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)} html.js :where(.abf-page) [data-rv]{opacity:0;transform:translateY(24px)} html.js :where(.abf-page) [data-rv].abf-in{opacity:1;transform:none} @media(max-width:1100px){ .abf-faculty-group{grid-template-columns:270px 1fr;gap:55px} .abf-people{grid-template-columns:1fr} } @media(max-width:800px){ .abf-welcome-inner{grid-template-columns:1fr} .abf-welcome-copy{padding-top:10px} .abf-directory-head{grid-template-columns:1fr;gap:22px} .abf-faculty-group{grid-template-columns:1fr;gap:30px} .abf-group-story{max-width:600px} .abf-people{grid-template-columns:repeat(2,minmax(0,1fr))} .abf-visit-inner{grid-template-columns:1fr;gap:28px} } @media(max-width:560px){ .abf-welcome{padding-left:22px;padding-right:22px} .abf-welcome-ribbon{grid-template-columns:1fr;padding:18px 0} .abf-welcome-ribbon span{padding:15px 0;text-align:left} .abf-welcome-ribbon span+span{border-left:0} .abf-directory{padding-left:16px;padding-right:16px} .abf-section-nav{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px} .abf-section-nav a{white-space:nowrap} .abf-people{grid-template-columns:1fr} .abf-person{min-height:105px} .abf-faith-wrap{margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px} .abf-visit{padding-left:22px;padding-right:22px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} :where(.abf-page) *,:where(.abf-page) *:before,:where(.abf-page) *:after{animation:none!important;transition:none!important} :where(.abf-page) [data-rv]{opacity:1;transform:none} /* The one thing the concept's own reduced-motion block cannot know about: with motion reduced the reveal must not be left hidden, because our gate is a class rather than its observer. */ html.js :where(.abf-page) [data-rv]{opacity:1;transform:none} } /* ========================================================================== WHY :where(.abf-page) AND NOT .abf-page Scoping a bare element selector to a page is not free: `.abf-page a` is (0,1,1) where the concept's `a` is (0,0,1), and that extra class is enough to flip the cascade. It did, on the sibling port: `a{color:inherit}` is meant to LOSE to `.btn{color:white}`, and as `.ss-page a` it won, so the contact button came out cream-on-cream. `:where()` contributes zero specificity, so every scoped selector here has exactly the specificity the concept's does and the scoping is pure containment. THE SAME INFLATION BREAKS THE REVEAL if you let it. The hide rule `html.js :where(.abf-page) [data-rv]` is (0,2,1); the per-element reveal `html.js :where(.abf-page) [data-rv].abf-in` is (0,3,1) and wins, and the wholesale failsafe `html.abf-revealed :where(.abf-page) [data-rv]` is (0,2,1) - a tie, won on source order, which is why it is the last rule in this file and must stay there. ========================================================================== */ /* ---------- the house-rule additions -------------------------------------- */ /* THE NOISE FILM THAT PAYS FOR EVERY GRADIENT ABOVE. Identical turbulence and opacity to site.css's `.mission7__noise`, `.footer__noise` and every sibling port - the standing fix, not a new effect. There is no shared `.noise-overlay` utility in this repo to reuse; the convention is one prefixed copy per page stylesheet, and this is that copy. z-index:-1 puts it over its band's gradient and under the band's content without needing a position on any of that content. A NEGATIVE z-index ONLY STAYS INSIDE ITS PARENT IF THAT PARENT IS A STACKING CONTEXT, and position:relative alone is not one - this is the bug DESIGN-LIBRARY records twice, where the layer rendered with correct geometry and was simply invisible underneath. `isolation:isolate` on the two bands (three until the hero's arch field retired, 2026-09-27) is what makes it hold, and mix-blend-mode needs that same isolation to blend against its own band rather than the page. */ .abf-welcome,.abf-faith-wrap{isolation:isolate} .abf-noise{position:absolute;inset:0;z-index:-1;opacity:.035; mix-blend-mode:overlay;pointer-events:none; background-image:url("data:image/svg+xml;utf8,")} /* THE FAILSAFE'S ESCAPE HATCH. The inline script adds .abf-revealed to at 6s if the page script never armed, and this is what that class does. It is a SEPARATE class from site.css's `.rv`/`html.in` pair on purpose: site.js block 3 adds `in` immediately on any page that has no .stat elements, and this page has none, so sharing the pair would reveal everything on load and throw the concept's scroll fade away entirely. `transition:none` IS THE WHOLE POINT OF THE RULE, not tidiness. CLAUDE.md, the burger bug of 2026-08-04: a RUNNING css transition is a higher cascade origin than author !important, so 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. Cancelling the transition makes the element jump to the end value instead of racing toward it. `visibility` is belt and braces for the same reason. Measured on the sibling pages at t+85s in a background tab: 19 of 19 elements still invisible with the transition alive. LAST RULE IN THE FILE ON PURPOSE - see the specificity note above. */ html.abf-revealed :where(.abf-page) [data-rv]{opacity:1;visibility:visible;transform:none;transition:none}