/* About page real content rebuild (DECISION-003, WP-B1). Scoped entirely under body.about-redesign so no other page is affected. Built on top of static/css/site_redesign.css's shared --hr-* tokens and header/nav rules (sticky/shrink navbar, gradient logo mask) - those are NOT redeclared here, they already load globally for any page whose key is in base.html's `redesigned_pages` list (which already includes 'about' - confirmed in templates/base.html, not re-verified here per the dispatch note that WP-A0-VERIFY already confirmed it). Design-lock note, stated plainly rather than silently assumed: this page has NO archive/design_lock reference. All four images in that directory (1.png-4.png) were opened and checked directly - they are sequential scrolled captures of the HOME page only (1=hero, 2=home's own 2x2 services-section + connector logo, 3-4=home's case studies + footer), credited "Design: WB Graphics" in 4.png's footer. None depict an About page. This mirrors WP-B3's (Services) already-accepted situation - "no design_lock mockup exists... apply the established design system... this is expected to need a live-correction round the same way Home did" - so the same fallback applies here: real content (see templates/pages/ about.html, sourced from the live PageContent rows for key='about' via scripts/diag_page_content_dump.py, not invented) styled with the established --hr-* tokens, Barlow Condensed/Barlow type system, and the same glass-card treatment already used on Home's services cards. Flagged explicitly in the WP-B1 completion report for the coordinator and for WP-B1-VERIFY, not hidden. Also deliberately NOT carried forward: the legacy `about_story_section` CMS row includes a decorative next to the story text. That asset predates this design system (its own colors are close-but-not-equal to the --hr-* tokens, it has an embedded Arial caption baked into the SVG, and it reads as generic stock clip-art next to the new glass-card/gradient-text treatment) - dropped rather than reskinned, same "cut what doesn't match the locked system" call already made for Home's organic-grain layers (item 89) and Services' invented "OUR SERVICES" heading (item 67). Story section is a single full-width text column here instead of the legacy 2-column layout as a direct result. Real bug found by rendering and inspecting computed style, not by reading the diff (same discipline as SESSION_REVIVAL items 88-91): static/css/style_part1.css - imported globally via style.css's own @import chain (style.css:1, loaded in every page's including this one) - carries three old-theme rules that recolor ANY un-namespaced heading/paragraph nested inside a plain
element, all with !important: section h1:not([class*="text-"]), section h2:not(...) { color: #66FCF1 !important; } section h3:not(...):not([style*="color"]), section h4:not(...) { color: #a78bfa !important; } section p:not([class*="text-white"]) { color: #8f9ba8 !important; } Confirmed via Chrome DevTools Protocol CSS.getMatchedStylesForNode (scripts/validation/cdp_matched_styles.py) that this ALREADY wins over Home's own `.hr-cs h2` rule (home_redesign.css:119, no !important) on the live Home page today - the "CASE STUDIES" heading has been rendering the wrong color (#66FCF1 instead of white) in production this whole time, a pre-existing bug outside this ticket's scope, flagged for the coordinator rather than fixed here (touching a file every legacy CMS-blob page still depends on is not a one-page-ticket change). Every color declaration below that targets an h1/h2/h3/h4/p element is given its own !important for this exact reason - the same defensive pattern already used for Home's own hr-hero h1 gradient (SESSION_REVIVAL item 90). */ body.about-redesign { background: var(--hr-bg) !important; font-family: 'Barlow', sans-serif; } /* #uv-background-canvas restored (was wrongly hidden - see home_redesign.css). */ body.about-redesign .ar-page { position: relative; overflow: hidden; } /* --- Hero / page title. Veins glow scoped to its own hero-wrap only (NOT the outer .ar-page), matching Home's final corrected architecture (SESSION_REVIVAL item 89) - stretching this across the whole page was a real bug there and is deliberately not repeated here. --- */ body.about-redesign .ar-hero-wrap { position: relative; overflow: hidden; } body.about-redesign .ar-veins { position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(circle at 12% 15%, rgba(181,51,247,0.09), transparent 40%), radial-gradient(circle at 88% 25%, rgba(1,206,211,0.07), transparent 45%); } body.about-redesign .ar-hero { position: relative; z-index: 2; padding: 90px 64px 60px; max-width: 1500px; margin: 0 auto; } /* Wrapper carries the glass panel - the title itself already uses `background` for its own gradient-clip-text effect, so the glass panel's background/blur/border must live on a separate parent element, not the h1 directly (matching Home's .hr-value-prop pattern, which never had this conflict since it's plain-colored text). */ body.about-redesign .ar-title-glass { display: inline-block; background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 28px 40px; } body.about-redesign .ar-page-title { font-family: 'Barlow Condensed', sans-serif; font-size: 72px; font-weight: 800; letter-spacing: 1px; background: linear-gradient(90deg, var(--hr-highlight) 0%, #7b5fd0 30%, #4a9fd8 65%, var(--hr-primary) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; line-height: 1.0; margin: 0; } /* --- Shared section title / rhythm. Glass panel added direct to the heading itself (WP-D3, same "each text block must have glass boxes" rule already applied to Products) - ar-sec-title uses plain `color`, not the gradient-text-clip technique the hero .ar-page-title uses, so its `background` is free for the glass fill (no ::before needed here; ::before is reserved for headers whose background is already consumed by -webkit-background-clip:text, which does not apply to this class). `.center` variants use `display: table; margin: 0 auto;` rather than inline-block so the box can both shrink-wrap its text AND self-center without requiring text-align:center on the parent section (which would cascade into and wrongly center sibling card/grid text via inheritance). --- */ body.about-redesign .ar-sec-title { font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 700; letter-spacing: 0.5px; color: var(--hr-light) !important; margin-bottom: 24px; display: inline-block; background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 14px 30px; } body.about-redesign .ar-sec-title.center { display: table; margin-left: auto; margin-right: auto; text-align: center; } /* --- Story --- */ body.about-redesign .ar-story { position: relative; z-index: 2; padding: 20px 64px 60px; max-width: 1100px; margin: 0 auto; } /* Wrapper carries the glass panel for the whole paragraph group - the 4

tags share no element of their own apart from the section (which also holds the h2), so a wrapping div was added in about.html per the "only touch the template if a text block genuinely has no wrapping element to attach to" rule (WP-D3). */ body.about-redesign .ar-story-body { background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 32px 36px 12px; } body.about-redesign .ar-story p { font-family: 'Barlow', sans-serif; font-size: 18px; line-height: 1.65; color: var(--hr-light) !important; margin-bottom: 20px; } /* --- Values --- */ body.about-redesign .ar-values { position: relative; z-index: 2; padding: 20px 64px 60px; max-width: 1500px; margin: 0 auto; } body.about-redesign .ar-values-lead { font-family: 'Barlow', sans-serif; font-size: 19px; line-height: 1.55; color: var(--hr-text-muted) !important; text-align: center; max-width: 760px; margin: 0 auto 40px; background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 22px 30px; } body.about-redesign .ar-values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } body.about-redesign .ar-value-card { position: relative; border-radius: 14px; padding: 30px 28px; overflow: hidden; background: rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); } body.about-redesign .ar-value-card.violet { background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); } body.about-redesign .ar-value-card.teal { background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); } body.about-redesign .ar-value-icon { font-size: 26px; margin-bottom: 14px; } body.about-redesign .ar-value-card.violet .ar-value-icon { color: var(--hr-highlight); } body.about-redesign .ar-value-card.teal .ar-value-icon { color: var(--hr-primary); } body.about-redesign .ar-value-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 700; margin-bottom: 12px; } body.about-redesign .ar-value-card.violet h3 { color: var(--hr-highlight) !important; } body.about-redesign .ar-value-card.teal h3 { color: var(--hr-primary) !important; } body.about-redesign .ar-value-card p { font-family: 'Barlow', sans-serif; font-size: 15.5px; line-height: 1.55; color: var(--hr-text-muted) !important; } /* --- Project Chiron --- */ body.about-redesign .ar-chiron { position: relative; z-index: 2; padding: 20px 64px 60px; max-width: 900px; margin: 0 auto; text-align: center; } body.about-redesign .ar-chiron .ar-sec-title { text-align: center; display: table; margin-left: auto; margin-right: auto; } body.about-redesign .ar-chiron p { font-family: 'Barlow', sans-serif; font-size: 17px; line-height: 1.6; color: var(--hr-text-muted) !important; margin-bottom: 28px; background: radial-gradient(circle at 15% 0%, rgba(181,51,247,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 24px 30px; } body.about-redesign .ar-cta-pill { display: inline-flex; align-items: center; gap: 10px; padding: 18px 38px; border-radius: 8px; background: linear-gradient(90deg, var(--hr-highlight), var(--hr-primary)); color: var(--hr-light); font-family: 'Barlow Condensed', sans-serif; font-weight: 800; font-size: 15px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; box-shadow: 0 0 40px rgba(181,51,247,0.25); } body.about-redesign .ar-cta-pill svg { width: 20px; height: 12px; } /* --- Leadership --- */ body.about-redesign .ar-team { position: relative; z-index: 2; padding: 20px 64px 100px; max-width: 1500px; margin: 0 auto; } body.about-redesign .ar-team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } body.about-redesign .ar-team-card { text-align: center; background: radial-gradient(circle at 85% 0%, rgba(1,206,211,0.30), rgba(13,15,20,0) 55%), rgba(13,15,20,0.30); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 34px 26px 30px; } body.about-redesign .ar-avatar { width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 18px; background: conic-gradient(from 180deg, var(--hr-highlight), var(--hr-primary), var(--hr-highlight)); display: flex; align-items: center; justify-content: center; font-family: 'Barlow Condensed', sans-serif; font-size: 36px; font-weight: 800; color: #000; } /* Real leadership photos (added 2026-08-22, direct Primarch-supplied images) - replaces the .ar-avatar initials placeholder above with an actual headshot, same size/position, ring border in place of the conic-gradient fill so the photo itself provides the visual interest. */ body.about-redesign .ar-avatar-img { display: block; width: 110px; height: 110px; border-radius: 50%; margin: 0 auto 18px; object-fit: cover; border: 2px solid rgba(181,51,247,0.45); box-shadow: 0 0 24px rgba(181,51,247,0.20); } body.about-redesign .ar-team-card h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 700; margin-bottom: 4px; color: var(--hr-light) !important; } body.about-redesign .ar-role { font-family: 'Barlow', sans-serif; font-size: 13px; color: var(--hr-text-muted); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } body.about-redesign .ar-team-card p { font-family: 'Barlow', sans-serif; font-size: 15px; line-height: 1.55; color: var(--hr-text-muted) !important; margin-bottom: 16px; } body.about-redesign .ar-linkedin { display: inline-flex; align-items: center; gap: 6px; color: var(--hr-light); text-decoration: none; font-family: 'Barlow Condensed', sans-serif; font-size: 14px; letter-spacing: 1px; font-weight: 700; text-transform: uppercase; } body.about-redesign .ar-linkedin:hover { color: var(--hr-highlight); } /* --- Responsive: tablet, then phone. Built in from the start, not retrofitted (SESSION_REVIVAL item 89's lesson on Home). --- */ @media (max-width: 1024px) { body.about-redesign .ar-hero { padding: 60px 40px 40px; } body.about-redesign .ar-page-title { font-size: 52px; } body.about-redesign .ar-story, body.about-redesign .ar-values, body.about-redesign .ar-chiron, body.about-redesign .ar-team { padding-left: 40px; padding-right: 40px; } body.about-redesign .ar-values-grid, body.about-redesign .ar-team-grid { grid-template-columns: 1fr 1fr; gap: 20px; } } @media (max-width: 768px) { body.about-redesign .ar-hero { padding: 40px 20px 30px; } body.about-redesign .ar-page-title { font-size: 36px; } body.about-redesign .ar-sec-title { font-size: 26px; padding: 10px 20px; } body.about-redesign .ar-story, body.about-redesign .ar-values, body.about-redesign .ar-chiron, body.about-redesign .ar-team { padding-left: 20px; padding-right: 20px; } body.about-redesign .ar-story-body { padding: 24px 20px 4px; } body.about-redesign .ar-story p { font-size: 16px; } body.about-redesign .ar-values-lead { font-size: 16px; margin-bottom: 28px; padding: 16px 20px; } body.about-redesign .ar-chiron p { padding: 18px 20px; } body.about-redesign .ar-values-grid, body.about-redesign .ar-team-grid { grid-template-columns: 1fr; gap: 16px; } body.about-redesign .ar-value-card { padding: 22px 22px 18px; } body.about-redesign .ar-team-card { padding: 26px 18px 22px; } body.about-redesign .ar-cta-pill { padding: 14px 26px; font-size: 13px; } }