/* ============================================================================ FHA — Section 3 : ARTISTS Laws: claude/fha-page-template.md, claude/fha-section2-proportion-law.md and its round-14 / round-15 continuations. Loaded AFTER section2.css, which this sheet extends rather than replaces — the glass, the slider button, the accordion, the Connect rail and the title tiers all come from there. Two page types: .s3 artist portrait — masthead, name + role, bio on glass, Connect rail, one signature button .ng NEXT GEN + GEN X — the standard FHA banner, then a full-width editorial run beneath it ========================================================================= */ /* ---------------------------------------------------------------- shared -- */ :root { --fha-navy: #022C44; --fha-teal: #045567; --fha-deep: #056981; --fha-pale: #CBEAEA; --fha-bright:#E7F4F4; --fha-aqua: #A2E7E8; --fha-glass: rgba(235,248,249,.22); --fha-glass-edge: rgba(255,255,255,.35); --fha-glass-lift: inset 0 1px 0 rgba(255,255,255,.18), 0 4px 14px rgba(2,24,38,.25); } /* =========================== ARTIST PORTRAIT ============================== */ @media (min-width: 992px) { /* ---- Section 2 parity ------------------------------------------------ style.css still carries the pre-redesign `.artists-page` block, and those selectors are keyed on the per-artist body class, so they out-specify the Section 2 system. That is what pulled these two pages out of line: .artists-page .brand-logo * width: 22.031vw .artists-steven .action * max-width: 16.271vw -> CTA wrapped to two lines (58.7px vs S2's 45.7) .artists-michael .details .action margin-bottom: 0 -> its CTA sat 15px below Steven's Restated here at FULL ancestor depth. Third time this trap has bitten — see the proportion law §13 and §20. The .action rules stay even though the portraits no longer render a generic CTA: they are the parity statement for any Section 3 page that DOES carry one (NEXT GEN does), and removing them would hand those pages back to the legacy block. */ .s3.artists-page .banner .banner-detail-container .action *, .s3.artists-page.artists-steven .banner .banner-detail-container .action *, .s3.artists-page.artists-michael .banner .banner-detail-container .action * { width: 100%; max-width: max(23.37vw, 262px); line-height: 1.5; } /* line-height is `inherit` on the button (bootstrap), and the Section 2 pages resolve it to 27px from an ancestor the artist pages do not share — which left the CTA 7px shorter and 7px off the anchor. Pinned to the same 1.5. */ .s3.artists-page.artists-steven .banner .banner-detail-container .details .action, .s3.artists-page.artists-michael .banner .banner-detail-container .details .action { margin-bottom: 1.042vw; } /* ---- masthead: sized on the Coldiac word, not on the art box ---------- Service CATALOG and Artist PORTRAIT are different lockups — 2.500 vs 3.171 aspect — so sizing both by WIDTH gave PORTRAIT a 21% smaller cap band (21.4px against CATALOG's 27.2px at 1440) and lifted the whole title stack 21.6px, which in turn dragged the CTA off the shared anchor. Both arts carry their caps at 26.5% of art height, so matching the RENDERED HEIGHT matches the caps exactly. Section 2 renders width/2.5, i.e. clamp(224px,17.792vw,300px)/2.5 = clamp(89.6px, 7.1168vw, 120px). */ .s3.theme-teal .banner .banner-detail-container .brand-logo *, .s3.theme-teal .banner .banner-detail-container .brand-logo img, .s3.artists-page .banner .banner-detail-container .brand-logo *, .s3.artists-page.artists-michael .banner .banner-detail-container .brand-logo * { width: auto; height: clamp(89.6px, 7.1168vw, 120px); max-width: 100%; object-fit: contain; margin-left: 0; margin-right: 0; } .s3.artists-page .banner .banner-detail-container .brand-logo, .s3.artists-page.artists-michael .banner .banner-detail-container .brand-logo { max-width: none; margin: 0 auto 1.7vw; justify-content: center; } /* ---- the block carries the Connect rail, so it takes the menu page's width services-menu widens to clamp(342px,27vw,480px) precisely because its rail sits INSIDE the block. These pages do the same, so they get the same width — which also gives the bio and the signature button the 311.8px the menu page's service rows get, instead of 268.6px. */ .s3 .content-scroll-in { max-width: clamp(342px, 27vw, 480px); } /* ---- the section's three scripts, matched by OPTICAL CORE --------------- His note: the NEXT GEN script reads small next to the other two. It is not a bake problem — all three arts are tightly trimmed, so nothing can be cropped or padded to change it. The cause is the LETTERFORMS: measured as the ink rows between the 12% and 88% cumulative marks, over box height — sub-steven frac .5266 core 20.12px at the shared 38.2px tier sub-kanyon frac .4249 core 16.23px (-19%) sub-nextgen frac .4222 core 16.13px (-20%) Kanyon's line carries taller swashes, so more of its box is ascender and less is readable middle; at a common height the readable word comes out a fifth smaller. Same trap the Section 1 page titles hit, same fix: give each page its own RENDER HEIGHT so the cores land together. Steven's is the reference and does not move — the pages he already approved are unchanged. target core 20.12px -> steven 38.21px (2.653vw, base rule) kanyon 47.36px (3.289vw) 392.8px wide nextgen 47.65px (3.309vw) 382.3px wide Kanyon's 392.8px runs 4px past the 388.8px block, so the sub gets the same max-width:none the page titles already have (ttl-steven renders 533px in a 558.7px column). Both stay well inside the column. */ .s3.theme-teal .banner .banner-detail-container .details .our-mission-img img, .ng.theme-teal .banner .banner-detail-container .details .our-mission-img img { max-width: none; } .s3.artists-michael.theme-teal .banner .banner-detail-container .details .our-mission-img *, .s3.artists-michael.theme-teal .banner .banner-detail-container .details .our-mission-img img { height: clamp(34.7px, 3.289vw, 49.6px); } .ng.theme-teal .banner .banner-detail-container .details .our-mission-img *, .ng.theme-teal .banner .banner-detail-container .details .our-mission-img img { height: clamp(34.9px, 3.309vw, 49.9px); } /* the bio panel — the Section 1 glass, one continuous sheet */ /* His bios run 5-6 paragraphs; at a legible size they are taller than the column. The panel scrolls INSIDE its own glass so the page still fits at rest and the CTA stays on the shared Section 1 anchor. */ /* The bio FILLS the scroll box rather than being clamped to a vh figure. Measured before this change: .content-scroll was 517.1px tall but its content only 475.3px — 41.8px of empty scroll area doing nothing, which is what left the CTA looking marooned. The menu page has no such slack (17.9px, and that is just the last card's margin), which is the density he pointed at. Padding also comes down to the menu page's rhythm. */ .s3 .s3bio { position: relative; border-radius: 2px; padding: clamp(10px,1.35vh,14px) 16px; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(162,231,232,.5) transparent; background: var(--fha-glass); -webkit-backdrop-filter: blur(16px) saturate(1.25); backdrop-filter: blur(16px) saturate(1.25); border: 1px solid var(--fha-glass-edge); box-shadow: var(--fha-glass-lift); margin-bottom: clamp(10px, 1.6vh, 16px); } /* Body size and shadow are the column's, measured off Section 2's .details-disc p (12.672px / 0 1px 1px rgba(2,44,68,.5) at 1440). Only the alignment and leading differ, and deliberately: a five-to-six paragraph bio reads as a column of prose, not as a centred stand-first. */ /* RIGHT-aligned, his call. It also agrees with the rest of the column — the menu sheet, the Connect rail and the whole mobile pane are right-anchored — so the bio now reads to the same edge as everything around it. */ .s3.theme-teal .banner .banner-detail-container .details .s3bio p { color: var(--fha-bright); font-family: 'Raleway', sans-serif; font-weight: 500; font-size: clamp(12px, .88vw, 14px); line-height: 1.5; text-align: right; margin: 0 0 .72em; text-wrap: pretty; text-shadow: 0 1px 1px rgba(2,44,68,.5); } .s3.theme-teal .banner .banner-detail-container .details .s3bio p:last-child { margin-bottom: 0; } .s3.theme-teal .banner .banner-detail-container .details .s3bio em { font-style: italic; color: var(--fha-pale); } .s3 .s3bio .seg { white-space: nowrap; } .s3 .s3bio::-webkit-scrollbar { width: 5px; } .s3 .s3bio::-webkit-scrollbar-thumb { background: rgba(162,231,232,.45); border-radius: 3px; } .s3 .s3bio::-webkit-scrollbar-track { background: transparent; } /* A soft edge so a scrolled bio reads as continuing, not as cut off. A mask on the panel itself, not an overlay: an overlay had to be positioned against a height nothing was measuring (--bioH was never set), and it would have to sit above the glass, tinting it. The mask fades the TYPE and leaves the glass whole. section3.js adds/removes the two classes at each end, so the first and last lines are never dimmed. */ .s3 .s3main { position: relative; } .s3 .s3bio.moreBelow { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); } .s3 .s3bio.moreAbove.moreBelow { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 26px), transparent); } .s3 .s3bio.moreAbove:not(.moreBelow) { -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px); mask-image: linear-gradient(to bottom, transparent, #000 14px); } /* the portrait column carries the Connect rail beside the bio, the way his .pxd does — rail left, content right, same 15px gutter as the menu page */ /* the flex chain that lets the bio fill: the scroll box gives its height to the column, the column to .s3main, and .s3main to the bio, with the signature button staying pinned beneath it */ /* The scroll box is already `flex:1 1 auto; min-height:0` inside .details (theme-teal), so it has a definite used height. Making it a flex column too hands that height down: inner -> column -> .s3main -> bio, with the signature button pinned beneath. Deliberately NOT `min-height:100%` on the inner — a percentage against a flex-basis:auto parent resolves against an indefinite height and forced 82-204px of overflow at every viewport when I tried it. */ .s3 .content-scroll { display: flex; flex-direction: column; } .s3 .content-scroll-in { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .s3 .s3col { display: flex; align-items: stretch; gap: 15px; flex: 1 1 auto; min-height: 0; } .s3 .s3col > .s2connect { margin-top: 2px; align-self: flex-start; } .s3 .s3col > .s3main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; } .s3 .s3main > .s2slot { flex: 0 0 auto; } } /* ---- artist portrait, mobile ---- */ #fhaMobile.s3m .colInner .s3name .t { display: block; text-align: center; color: var(--fha-bright); font-family: 'Coldiac Free', 'Playfair Display', serif; letter-spacing: .05em; font-size: 15px; line-height: 1.15; text-shadow: 0 1px 1px rgba(2,44,68,.6); } #fhaMobile.s3m .colInner .s3role .t { display: block; text-align: center; color: var(--fha-pale); font-family: 'Distant Stroke', 'Playfair Display', serif; font-weight: 500; font-size: 19px; line-height: 1.2; margin: 2px 0 12px; } #fhaMobile .s3bio { border-radius: 2px; padding: 12px 14px; margin-bottom: 12px; background: rgba(235,248,249,.20); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); border: 1px solid rgba(255,255,255,.32); box-shadow: 0 4px 14px rgba(2,24,38,.25); } #fhaMobile .s3bio p { color: var(--fha-bright); font-family: 'Raleway', sans-serif; font-weight: 500; font-size: 13px; line-height: 1.45; margin: 0 0 .7em; text-align: right; } #fhaMobile .s3bio p:last-child { margin-bottom: 0; } /* the mobile pane scrolls, so the bio is never clipped there — his copy law */ #fhaMobile .s3bio em { font-style: italic; color: var(--fha-pale); } /* The scripts are matched by OPTICAL CORE on mobile too — same measurement, same reference (Steven at the shared 27px, core 14.22px). Without this the pane repeats the desktop mismatch at a smaller size. max-width lifted from 90% for the same reason it was lifted on desktop: the taller render is also wider. */ #fhaMobile.s3m.pg-kanyon .psub { height: 33.5px; max-width: 96%; } #fhaMobile.ngm .psub { height: 33.7px; max-width: 96%; } /* ---- NEXT GEN in the mobile pane: the same one screen, same copy ---------- */ #fhaMobile .s3bio.ngOne { text-align: center; padding: 16px 14px; } #fhaMobile .s3bio.ngOne p { text-align: center; font-size: 13.5px; line-height: 1.5; } #fhaMobile .s3bio.ngOne .ngLead { font-family: 'Playfair Display', serif; font-weight: 600; color: #fff; font-size: 16px; line-height: 1.3; margin: 0 0 1em; text-shadow: 0 1px 1px rgba(2,44,68,.55); } #fhaMobile .s3bio.ngOne .ngClose { margin: 1.05em 0 0; padding-top: 1em; color: var(--fha-aqua); font-family: 'Playfair Display', serif; font-weight: 600; font-style: italic; font-size: 18px; line-height: 1.34; border-top: 1px solid rgba(162,231,232,.30); text-shadow: 0 1px 1px rgba(2,44,68,.55); } #fhaMobile .ngAsk { text-align: center; color: var(--fha-pale); margin: 14px 0 10px; font-family: 'Playfair Display', serif; font-weight: 600; font-size: 12px; letter-spacing: .16em; text-shadow: 0 1px 1px rgba(2,44,68,.5); } /* On this page the fixed bar's .cta is a