/* ── Shared homepage components: acc3int.com/alchemist ⇄ alchemistaipro.com ── ONE source of truth for the marketing components both sites render. acc3int.com loads this via `@import` in src/index.css; alchemistaipro.com links the published copy at https://storage.googleapis.com/acc3-library-content/shared/styles/alchemist-homepage-parity.css (published by `npm run deploy:shared` — see homepage-parity/README.md). 1. .ahp-proof-ribbon — fixed diagonal corner badge ("The Receipts") 2. .ahp-cta-band — in-content invite band (Sign In / Publications) 3. .ahp-btn — every button/CTA on the page Plain CSS on purpose: no Tailwind, no build step, no custom-property cascade a host page's own reset could clobber. alchemistaipro.com is a separately-built Vite + React bundle with its own global styles, so these rules have to stand on their own. Sizing model — every variant at a given size has the SAME box height. Outline/ghost "borders" are drawn with an inset box-shadow rather than a real border, so switching variants never shifts layout by the border width. (Before this file existed, the pricing row's outline buttons were 4px taller than the filled one sitting beside them.) Elevation shadows only appear on filled variants, so the two never collide. */ /* ── 0. Page base (opt-in) ────────────────────────────────────────────────── A component stylesheet must never repaint a host page's background merely by being linked, so this is a class you apply rather than a rule on `body`. Put it on (or a full-height wrapper) on a page that adopts the whole Alchemist layout. Several sections there carry no background of their own by design and rely on this showing through -- the hero, "Requirements engineering is broken", "Concept -> Design -> Evolution" and "Journeys of the Final Mile". Without it those render as white bands between correctly-dark neighbours, which reads as a styling failure when the only thing missing is the page base. acc3int.com does not use this class: its own theme layer already paints the same gradient. */ .ahp-page { background: linear-gradient(165deg, #012A4A 0%, #013D6B 15%, #013A63 30%, #01304F 50%, #012040 70%, #011830 85%, #010F20 100%); color: #d0e8e8; min-height: 100vh; } /* ── 1. Proof ribbon ────────────────────────────────────────────────────── */ .ahp-proof-ribbon { position: fixed; left: 0; width: 190px; height: 190px; overflow: hidden; pointer-events: none; z-index: 150; } /* Page with no persistent header bar (alchemistaipro.com's homepage). */ .ahp-proof-ribbon--top { top: 0; } /* Page with a fixed/floating header the ribbon would otherwise cut through (acc3int.com's nav sits at top:8px and is ~58px tall, so 66px is its bottom edge). Stays viewport-fixed like --top, so it rides along with the nav as the page scrolls; it just corners the content column rather than the screen edge. The `left` expression reproduces the nav pill's own left edge exactly (a min(1280px, 100% - 2rem) column centred in the viewport, and for a fixed box `100%` is that same viewport), so the ribbon's corner tracks the content column at every width instead of clinging to the gutter. */ .ahp-proof-ribbon--below-header { top: 66px; left: max(1rem, calc((100% - 1280px) / 2)); } .ahp-proof-ribbon__link { pointer-events: auto; position: absolute; top: 34px; left: -56px; width: 230px; padding: 9px 0; text-align: center; transform: rotate(-45deg); background: linear-gradient(135deg, #FBBF24, #f5a623); color: #1a1103; text-decoration: none; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45); border-top: 1px solid rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(0, 0, 0, 0.15); } .ahp-proof-ribbon__eyebrow, .ahp-proof-ribbon__title { display: block; font-weight: 800; line-height: 1.25; } .ahp-proof-ribbon__eyebrow { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .ahp-proof-ribbon__title { font-size: 13px; letter-spacing: -0.025em; } /* ── 2. CTA band (Sign In / Publications) ──────────────────────────────── */ .ahp-cta-band { position: relative; z-index: 10; padding: 24px 16px; background: linear-gradient(135deg, #012A4A, #013D6B); } @media (min-width: 640px) { .ahp-cta-band { padding-left: 24px; padding-right: 24px; } } @media (min-width: 1024px) { .ahp-cta-band { padding-left: 32px; padding-right: 32px; } } .ahp-cta-band__card { max-width: 896px; margin: 0 auto; border-radius: 16px; padding: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(135deg, rgba(64, 191, 191, 0.16), rgba(1, 48, 79, 0.55)); border: 1px solid rgba(64, 191, 191, 0.38); box-shadow: 0 14px 44px rgba(0, 0, 0, 0.4); } .ahp-cta-band__content { flex: 1 1 0%; min-width: 240px; } .ahp-cta-band__eyebrow-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ahp-cta-band__dot { width: 8px; height: 8px; border-radius: 9999px; background: #40BFBF; box-shadow: 0 0 8px #40BFBF; flex-shrink: 0; } .ahp-cta-band__eyebrow { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #40BFBF; } /* !important on these two colours, same rationale as styles/library-content.css: both are

elements, and a host page's own typography rule (acc3int.com has `.theme-alchemist p { color: #d0e8e8 }`, specificity 0-1-1) outranks a single class selector and silently repaints them. These ship to a site we don't control, so the component's own colours have to win. */ .ahp-cta-band__heading { font-size: 20px; line-height: 28px; font-weight: 800; color: #ffffff !important; margin: 0 0 4px; } .ahp-cta-band__body { font-size: 14px; line-height: 1.625; color: #B0D4D4 !important; margin: 0; } /* ── 3. Buttons ─────────────────────────────────────────────────────────── */ .ahp-btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; line-height: 20px; font-weight: 700; border: 0; border-radius: 12px; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, background-image 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease; } /* Size — padding only; height follows from padding + the 20px line box. */ .ahp-btn--sm { padding: 8px 16px; } .ahp-btn--md { padding: 12px 20px; } .ahp-btn--lg { padding: 12px 24px; } .ahp-btn--xl { padding: 16px 32px; } /* Shape */ .ahp-btn--pill { border-radius: 9999px; } /* Emphasis */ .ahp-btn--uppercase { text-transform: uppercase; letter-spacing: 0.1em; } .ahp-btn--extrabold { font-weight: 800; } /* Colour variants. Outline/ghost draw their edge with an inset shadow so they occupy exactly the same box as a filled button of the same size. */ .ahp-btn--gradient-teal { background-image: linear-gradient(to right, #40BFBF, #6EE7B7); color: #012A4A; box-shadow: 0 4px 12px rgba(64, 191, 191, 0.3); } .ahp-btn--solid-teal { background-color: #40BFBF; color: #012A4A; box-shadow: 0 4px 16px rgba(64, 191, 191, 0.4); } .ahp-btn--outline-teal { background-color: transparent; color: #40BFBF; box-shadow: inset 0 0 0 2px rgba(64, 191, 191, 0.4); } .ahp-btn--outline-teal:hover { background-color: rgba(64, 191, 191, 0.1); box-shadow: inset 0 0 0 2px #40BFBF; } .ahp-btn--ghost { background-color: rgba(255, 255, 255, 0.15); color: #d0e8e8; box-shadow: inset 0 0 0 2px rgba(64, 191, 191, 0.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .ahp-btn--ghost:hover { background-color: rgba(64, 191, 191, 0.15); box-shadow: inset 0 0 0 2px #40BFBF; } /* Text-only CTA (no padding/background) — e.g. "Read Part 1". */ .ahp-btn--link { padding: 0; background: none; box-shadow: none; color: #40BFBF; } /* Stronger elevation for the one hero-scale banner CTA. */ .ahp-btn--elevated { box-shadow: 0 8px 28px rgba(64, 191, 191, 0.45); } /* Behaviour */ .ahp-btn--hover-grow:hover { transform: scale(1.05); } .ahp-btn--no-shrink { flex-shrink: 0; } @media (prefers-reduced-motion: reduce) { .ahp-btn { transition: none; } .ahp-btn--hover-grow:hover { transform: none; } }