are grid items THEMSELVES. Parent tiles pack two per row and NEVER change size or position when opened; an open mega spans the full width as its own row directly below its parent's row (grid-auto-flow: row dense backfills the slot beside an odd-column parent, so no vacant cell is ever left). The li keeps its classes, so the existing JS (.is-open on the li) and nth-child hue maps still work. */ .nav__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 10px; align-items: stretch; } .nav__item { display: contents; } .nav__link { position: relative; width: 100%; height: 100%; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 9px; padding: 16px 8px 13px; font-size: 13px; line-height: 1.3; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); } /* the item's icon becomes the 56px chip itself: rounded square, soft coloured fill, the vivid stroke drawn ~30px inside it */ .nav__link > .nav__icon { width: 56px; height: 56px; padding: 13px; border-radius: 14px; opacity: 1; } /* chip fills follow each item's hue (same map as the icon strokes) */ .nav__list > .nav__item:nth-child(1) > .nav__link .nav__icon { background: var(--chip-3); } /* Home · green */ .nav__list > .nav__item:nth-child(2) > .nav__link .nav__icon { background: var(--chip-2); } /* About · blue */ .nav__list > .nav__item:nth-child(3) > .nav__link .nav__icon { background: var(--chip-1); } /* Ventures · orange */ .nav__list > .nav__item:nth-child(4) > .nav__link .nav__icon { background: var(--chip-4); } /* Expertise · purple */ .nav__list > .nav__item:nth-child(5) > .nav__link .nav__icon { background: var(--chip-1); } /* Innovation · gold */ .nav__list > .nav__item:nth-child(6) > .nav__link .nav__icon { background: var(--chip-5); } /* Reforms · teal */ .nav__list > .nav__item:nth-child(7) > .nav__link .nav__icon { background: var(--chip-6); } /* Stories · rose */ .nav__list > .nav__item:nth-child(8) > .nav__link .nav__icon { background: var(--chip-5); } /* Contact · cyan */ /* the submenu caret rides the tile's top-right corner */ .nav__link .nav__caret { position: absolute; top: 10px; right: 10px; } .nav__mega { position: static; grid-column: 1 / -1; /* round-4: its own full-width drawer row */ min-width: 0; box-shadow: none; border-radius: 0; opacity: 1; visibility: hidden; transform: none; display: none; padding: 8px 0 10px; } .nav__mega::before { display: none; } /* round-4 (owner spec c): tapping an open parent only changes its COLOUR — vivid chip fill, white icon stroke, label + border in that item's hue. Size and position never change. Specificity (0,5,1) beats the resting chip map (0,4,1) and the hover green (0,2,1). */ .nav__list > .nav__item--has-sub.is-open > .nav__link .nav__icon { stroke: #fff; } .nav__list > .nav__item:nth-child(2).is-open > .nav__link { color: var(--hue-blue); border-color: var(--hue-blue); } .nav__list > .nav__item:nth-child(2).is-open > .nav__link .nav__icon { background: var(--hue-blue); } .nav__list > .nav__item:nth-child(3).is-open > .nav__link { color: var(--hue-orange); border-color: var(--hue-orange); } .nav__list > .nav__item:nth-child(3).is-open > .nav__link .nav__icon { background: var(--hue-orange); } .nav__list > .nav__item:nth-child(4).is-open > .nav__link { color: var(--hue-purple); border-color: var(--hue-purple); } .nav__list > .nav__item:nth-child(4).is-open > .nav__link .nav__icon { background: var(--hue-purple); } .nav__list > .nav__item:nth-child(5).is-open > .nav__link { color: var(--hue-gold); border-color: var(--hue-gold); } .nav__list > .nav__item:nth-child(5).is-open > .nav__link .nav__icon { background: var(--hue-gold); } .nav__list > .nav__item:nth-child(6).is-open > .nav__link { color: var(--hue-teal); border-color: var(--hue-teal); } .nav__list > .nav__item:nth-child(6).is-open > .nav__link .nav__icon { background: var(--hue-teal); } /* group heading stays visible in the drawer — small mono caps */ .nav__mega-title { display: block; margin: 4px 0 8px; padding: 0 4px 6px; font-size: 10.5px; } /* round-3 (owner reference, supersedes round-2's single column): submenu items are the SAME two-per-row icon tiles as the top level. */ .nav__mega-grid, .nav__mega--2 .nav__mega-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .nav__item--has-sub.is-open > .nav__mega { display: block; visibility: visible; } .nav__item--has-sub.is-open > .nav__link .nav__caret { transform: rotate(180deg); } .nav__sublink { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 9px; padding: 16px 8px 13px; font-size: 13px; line-height: 1.3; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); height: 100%; } /* 56px rounded-square icon chips carrying the bigger ~30px vivid icon; the tint + vivid-icon colour cycle lives in the shared rules above */ .nav__mega-icon { flex: none; width: 56px; height: 56px; border-radius: 14px; } .nav__mega-icon svg { width: 30px; height: 30px; } } /* ---------- 4. Footer ---------- */ .site-footer { margin-top: 90px; border-top: 1px solid var(--line); background: var(--paper); text-align: center; padding: 34px 20px 38px; } .site-footer p { margin: 4px 0; font-family: var(--font-nav); font-size: 14px; color: var(--muted); } .site-footer p:first-child { color: var(--navy); font-weight: 500; } .site-footer::before { content: ""; display: block; width: 54px; height: 3px; border-radius: 3px; background: var(--gold); margin: 0 auto 18px; } /* -- ab-footer: the editorial footer panel (home page for now) -- Paper surface, gold top hairline, three columns from 900px up (site nav / contact / brand line), stacked on phones. All copy inside it is existing menu wording + existing footer lines. */ .ab-footer { position: relative; margin-top: 90px; background: var(--paper); border-top: 1px solid var(--hair); } .ab-footer::before { /* fine gold top hairline */ content: ""; position: absolute; inset: -1px 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .ab-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: clamp(40px, 6vw, 64px) 24px clamp(34px, 5vw, 52px); display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); } @media (min-width: 900px) { .ab-footer__inner { grid-template-columns: 1.15fr 1fr 1.2fr; } } .ab-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 20px; } .ab-footer__nav a { display: inline-block; padding: 4px 0; font-family: var(--font-nav); font-size: 14px; font-weight: 500; color: var(--nav-c); text-decoration: none; transition: color .18s ease; } .ab-footer__nav a:hover, .ab-footer__nav a:focus-visible { color: var(--green-ink); } .ab-footer__contact p { margin: 0; font-size: 14px; color: var(--muted); } .ab-footer__contact-title { display: inline-block; margin: 0 0 8px; font-family: var(--font-nav); font-size: 15px; font-weight: 600; color: var(--green-ink); text-decoration: none; } .ab-footer__tel { display: inline-block; margin: 0 0 10px; font-family: var(--font-mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ink); text-decoration: none; } .ab-footer__tel:hover, .ab-footer__tel:focus-visible { color: var(--gold-ink); } .ab-footer__brand p { margin: 0; } .ab-footer__name { font-family: var(--font-brand); font-size: 19px; font-weight: 700; line-height: 1.25; color: var(--navy); } .ab-footer__name b { font-weight: 700; color: var(--gold); } .ab-footer__brand .ab-footer__tagline { font-family: var(--font-brand); font-size: 12.5px; color: var(--muted); margin-bottom: 14px; } .ab-footer__line { font-family: var(--font-nav); font-size: 13.5px; color: var(--muted); } .ab-footer__line--first { color: var(--navy); font-weight: 500; } /* ============================================================ 5. "AB Editorial" component library (ab-*) Shared vocabulary for every redesigned page. ============================================================ */ .ab-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .ab-page { background: var(--page-bg); } /* -- hero panel: the identical premium opening of every page -- */ .ab-hero { /* 2026-09-11: full-width, hairline (1px) gap left/right (owner) */ max-width: none; margin: 6px 1px 0; padding: 0; } .ab-hero__panel { position: relative; overflow: hidden; border-radius: 26px; background: radial-gradient(900px 420px at 85% -10%, rgba(201, 168, 76, .38), transparent 60%), radial-gradient(700px 380px at -10% 110%, rgba(97, 206, 112, .20), transparent 55%), linear-gradient(165deg, #0D1740 0%, #1B2A5E 55%, #0F1E52 100%); color: #fff; padding: clamp(48px, 7vw, 92px) clamp(26px, 6vw, 84px); } .ab-hero__panel::after { /* fine gold top hairline */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .9; } .ab-kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; max-width: 100%; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-soft); margin: 0 0 22px; } .ab-kicker::before { content: ""; width: 34px; height: 1.5px; background: var(--gold); } .ab-hero__title { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-6); line-height: 1.12; letter-spacing: -0.01em; margin: 0 0 20px; } .ab-hero__title em { font-style: italic; color: var(--gold-soft); } .ab-hero__lede { font-size: var(--fs-1); line-height: 1.75; color: rgba(255, 255, 255, .82); margin: 0; /* full width — the ch cap was removed on the owner's review */ } .ab-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; } .ab-chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; font-family: var(--font-nav); font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .9); background: rgba(255, 255, 255, .04); } .ab-chip b { color: var(--gold-soft); font-weight: 600; } /* -- section scaffolding -- */ .ab-s { margin-top: clamp(64px, 9vw, 110px); } .ab-eyebrow { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; font-family: var(--font-mono); font-size: 13px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); } .ab-eyebrow i { font-style: normal; color: var(--gold-ink); /* gold as text on the light page surface */ font-weight: 600; } .ab-eyebrow s { flex: 0 0 44px; height: 1.5px; background: var(--gold); text-decoration: none; } .ab-eyebrow b { font-weight: 600; color: var(--ink); } .ab-h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-5); line-height: 1.18; color: var(--ink); margin: 0 0 18px; } .ab-h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-3); line-height: 1.3; color: var(--ink); margin: 0 0 12px; } .ab-ruled { position: relative; padding-bottom: 16px; } .ab-ruled::after { content: ""; position: absolute; left: 0; bottom: 0; width: 64px; height: 3px; border-radius: 3px; background: var(--gold); } .ab-lede { font-size: var(--fs-1); line-height: 1.8; color: var(--body-c); } /* -- prose fills its card, justified (owner Gate-1 revision) -- Scoped to prose containers only: never headings, never nav, and the ab-* vocabulary never appears inside the design-locked .cgw-app/.srs-app scopes. */ .ab-panel p, .ab-panel li, .ab-quote p, .ab-hero__lede { text-align: justify; } /* round-2: hero lede sits outside .ab-panel */ /* round-3: the CTA paragraph is centred, never justified (owner) */ /* -- prose: fills its card; two columns once there is room, so long passages never run as one very wide line -- */ .ab-flow { max-width: none; } @media (min-width: 1100px) { .ab-flow--wide { columns: 2; column-gap: 64px; /* Owner 2026-08-28 (Gate-2 review): the two columns need a visible separator — "vertical line draw karke separate dikhao". */ column-rule: 1px solid var(--hair-gold); } .ab-flow--wide > * { break-inside: avoid; } } .ab-flow p { margin: 0 0 1.15em; } .ab-flow > * + h2, .ab-flow > * + h3 { margin-top: 1.6em; } .ab-flow ul, .ab-flow ol { padding-left: 1.3em; margin: 0 0 1.15em; } .ab-flow li { margin: .35em 0; } .ab-flow strong { color: var(--ink); } /* -- cards + grids -- */ .ab-grid { display: grid; gap: 22px; margin-top: 34px; } .ab-grid--2 { grid-template-columns: repeat(2, 1fr); align-items: stretch; } .ab-grid--2 > * { height: 100%; } /* paired cards always match heights */ .ab-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .ab-grid--3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .ab-grid--2, .ab-grid--3 { grid-template-columns: 1fr; } } .ab-card { background: var(--card-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 26px; box-shadow: 0 2px 10px rgba(27, 42, 94, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ab-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-soft); } .ab-card__icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(201,168,76,.16), rgba(27,42,94,.08)); color: var(--navy); font-size: 21px; margin-bottom: 16px; } .ab-card h3, .ab-card .ab-card__title { font-family: var(--font-display); font-weight: 400; font-size: 21px; color: var(--ink); margin: 0 0 10px; } .ab-card p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--body-c); } /* tinted variant */ .ab-card--paper { background: var(--paper); } /* -- card interaction tiers -- --interactive: primary destinations — lift plus a gold-tinted glow (rgba of brand #C9A84C, same family as --tint/--hair-gold). --static: secondary destinations — border-shift only, no motion, so a dense grid of them stays calm. Both build on the base .ab-card. */ .ab-card--interactive:hover { transform: translateY(-6px); box-shadow: 0 25px 60px rgba(201, 168, 76, .25); border-color: var(--gold); } .ab-card--static { transition: border-color .25s ease; } .ab-card--static:hover { transform: none; box-shadow: 0 2px 10px rgba(27, 42, 94, .04); /* keep the resting shadow */ border-color: var(--gold); } /* -- vertical timeline -- */ .ab-timeline { list-style: none; margin: 34px 0 0; padding: 0; position: relative; } .ab-timeline::before { content: ""; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold), var(--line)); } .ab-timeline > li { position: relative; padding: 0 0 34px 44px; } .ab-timeline > li:last-child { padding-bottom: 0; } .ab-timeline > li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--card); border: 3px solid var(--gold); box-shadow: 0 0 0 4px rgba(201, 168, 76, .15); } .ab-timeline h3 { margin: 0 0 8px; } .ab-timeline p { margin: 0 0 .6em; } /* -- ab-timeline--steps: the same list rendered as numbered STEP cards on a connecting rail, in the spirit of the projects page roadmap. Use for any sequence the reader is meant to follow in order. -- */ .ab-timeline--steps { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); /* min() so narrow phones never overflow */ gap: 26px; margin-top: 52px; padding: 0; } .ab-timeline--steps::before { /* horizontal rail behind the nodes */ content: ""; position: absolute; top: -18px; left: 6%; right: 6%; bottom: auto; width: auto; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--green)); } .ab-timeline--steps > li { position: relative; padding: 34px 28px 28px; background: var(--card-surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 2px 10px rgba(27, 42, 94, .04); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ab-timeline--steps > li:last-child { padding-bottom: 28px; } .ab-timeline--steps > li:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); border-color: var(--gold-soft); } .ab-timeline--steps > li::before { /* node sitting on the rail */ content: ""; position: absolute; top: -24px; left: 50%; margin-left: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--card); border: 3px solid var(--gold); box-shadow: 0 0 0 4px var(--tint); } /* the STEP n badge each card carries */ .ab-step__no { display: inline-block; margin-bottom: 14px; padding: 6px 15px; border-radius: 999px; /* light: gold gradient; dark: orange gradient — both via --grad-step */ background: var(--grad-step); color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } /* Gate-1 round-2: STEP 1–5 pills cycle vivid gradients, same in BOTH themes (unconditional, so they override the themed --grad-step base above). White text + the sitewide text-shadow legibility rule still apply. */ .ab-timeline--steps > li:nth-child(5n+1) .ab-step__no { background: linear-gradient(90deg, #F97316, #FACC15); } .ab-timeline--steps > li:nth-child(5n+2) .ab-step__no { background: linear-gradient(90deg, #3B82F6, #06B6D4); } .ab-timeline--steps > li:nth-child(5n+3) .ab-step__no { background: linear-gradient(90deg, #EC4899, #8B5CF6); } .ab-timeline--steps > li:nth-child(5n+4) .ab-step__no { background: linear-gradient(90deg, #22C55E, #0D9488); } .ab-timeline--steps > li:nth-child(5n+5) .ab-step__no { background: linear-gradient(90deg, #E9C25F, #C9922E); } @media (max-width: 760px) { .ab-timeline--steps { gap: 34px; margin-top: 34px; } .ab-timeline--steps::before { display: none; } .ab-timeline--steps > li::before { display: none; } } /* -- ab-panel: the card every section's content sits inside, so nothing on the site is loose text on the page background. -- */ .ab-panel { background: linear-gradient(180deg, var(--sheen) 0%, transparent 46%), var(--card-surface); border: 1px solid var(--line); border-radius: 22px; padding: clamp(26px, 3.4vw, 46px); box-shadow: 0 2px 12px rgba(27, 42, 94, .05); position: relative; overflow: hidden; } .ab-panel::before { /* gold hairline along the top edge */ content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(201, 168, 76, .55), transparent); } .ab-panel > :first-child { margin-top: 0; } .ab-panel > :last-child { margin-bottom: 0; } /* a section head sitting above its own panel */ .ab-panel + .ab-panel { margin-top: 26px; } /* -- pull quote -- */ .ab-quote { margin: 40px 0 0; padding: 30px 34px; background: var(--paper); border-left: 4px solid var(--gold); border-radius: 0 var(--radius) var(--radius) 0; } .ab-quote p { font-family: var(--font-display); font-style: italic; font-size: var(--fs-2); line-height: 1.6; color: var(--ink); margin: 0; } .ab-quote footer { margin-top: 14px; font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); } /* -- stats -- */ .ab-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; margin-top: 34px; padding: 0; list-style: none; } .ab-stat { background: var(--card-surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 20px; text-align: left; } .ab-stat b { display: block; font-family: var(--font-display); font-weight: 400; font-size: 34px; font-variant-numeric: tabular-nums; line-height: 1.1; color: var(--navy); } .ab-stat span { display: block; margin-top: 6px; font-family: var(--font-nav); font-size: 13px; font-weight: 500; letter-spacing: .04em; color: var(--muted); } /* -- figure -- */ .ab-figure { margin: 38px 0 0; } .ab-figure img { width: 100%; border-radius: var(--radius); border: 1px solid var(--line); box-shadow: var(--shadow-soft); display: block; } .ab-figure figcaption { margin-top: 12px; font-family: var(--font-nav); font-size: 13px; color: var(--muted); display: flex; align-items: baseline; gap: 10px; } .ab-figure figcaption::before { content: ""; flex: 0 0 22px; height: 1.5px; background: var(--gold); transform: translateY(-3px); } /* -- callout -- Token-based so the dark palette takes over automatically — no dark-specific rules needed. --hair-gold is not defined in the token blocks yet (they are owned by the parallel token pass), so the brand-constant --gold-soft rides along as the fallback; the themed hairline wins the moment the token lands. */ .ab-callout { margin-top: 38px; border: 1px solid var(--hair-gold, var(--gold-soft)); border-left: 4px solid var(--gold); background: var(--paper); border-radius: var(--radius); padding: 26px 30px; } .ab-callout h3 { margin-top: 0; } .ab-callout p:last-child { margin-bottom: 0; } /* -- embed panel (live tools inside a framed card) -- */ .ab-embed { margin-top: 38px; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-soft); background: var(--card); } .ab-embed__bar { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--paper); border-bottom: 1px solid var(--line); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .06em; color: var(--muted); } .ab-embed__bar::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--green); box-shadow: 16px 0 0 var(--gold), 32px 0 0 var(--line); margin-right: 26px; } .ab-embed iframe { display: block; width: 100%; border: 0; } .ab-embed__note { padding: 12px 18px; border-top: 1px solid var(--line-soft); font-size: 13.5px; color: var(--muted); margin: 0; } .ab-embed__note a { color: var(--navy); font-weight: 600; } /* 2026-09-11 (owner): EVERY embed (.ab-embed — 12 platform/calculator/books/youtube pages) goes full width on phones — hairline (1px) gap each side, breaking out of .ab-wrap's 24px gutters. */ @media (max-width: 760px) { .ab-embed { margin-left: -23px; margin-right: -23px; border-radius: 12px; } } /* -- buttons + closing CTA panel -- */ .ab-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; border-radius: 999px; font-family: var(--font-nav); font-size: 15px; font-weight: 600; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .ab-btn:hover { transform: translateY(-2px); } .ab-btn--gold { /* calculator-style warm gradient (owner Gate-1 revision) */ background: var(--grad-cta); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(249, 115, 22, .35); } .ab-btn--ghost { /* round-2: gold OUTLINED pill (owner reference) — brand gold border on the permanently-navy CTA panel, so it reads identically in both themes */ border: 1.5px solid var(--gold); color: #fff; } .ab-btn--ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); } /* small decorative phone glyph on the Call button, drawn in CSS (no markup, no text change): a currentColor mask, so it follows the label colour */ .ab-cta__row .ab-btn--ghost::before { content: ""; flex: 0 0 auto; width: 15px; height: 15px; background: currentColor; -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } /* the Contact button gains a "→" glyph via CSS (decoration, not copy) */ .ab-cta__row .ab-btn--gold::after { content: "\2192"; font-size: 1.05em; line-height: 1; transition: transform .2s ease; } .ab-cta__row .ab-btn--gold:hover::after { transform: translateX(3px); } .ab-cta { /* 2026-09-11: full-width, hairline gap (owner) */ max-width: none; margin: clamp(70px, 10vw, 120px) 1px 0; padding: 0; } .ab-cta__panel { position: relative; overflow: hidden; border-radius: 26px; text-align: center; color: #fff; padding: clamp(46px, 6vw, 78px) 28px; background: radial-gradient(700px 320px at 50% -20%, rgba(201, 168, 76, .40), transparent 60%), var(--deep-navy-grad); } .ab-cta__panel::before { /* fine gold top hairline, as on the hero */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); opacity: .9; z-index: 2; } /* round-2 (owner reference): subtle dot-grid texture over the deep navy, masked so it fades away toward the centre where the copy sits */ .ab-cta__panel::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .07) 1.2px, transparent 1.2px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(closest-side at 50% 50%, transparent 28%, #000 90%); mask-image: radial-gradient(closest-side at 50% 50%, transparent 28%, #000 90%); } /* copy and buttons ride above the texture layer */ .ab-cta__panel > * { position: relative; z-index: 1; } .ab-cta__panel h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-4); margin: 0 0 12px; } .ab-cta__panel p { color: rgba(255, 255, 255, .8); text-align: center; /* round-3 (owner): centred CTA copy */ max-width: 62ch; margin: 0 auto 28px; } .ab-cta__row { /* round-2: the two CTA buttons stay centred in ONE row at every width (wrapping is allowed only under 360px, below) */ display: flex; justify-content: center; flex-wrap: nowrap; gap: 14px; } @media (max-width: 640px) { .ab-cta__row { gap: 10px; } .ab-cta__row .ab-btn { flex: 1 1 0; justify-content: center; padding: 12px 8px; font-size: 13px; white-space: nowrap; } } @media (max-width: 359.98px) { .ab-cta__row { flex-wrap: wrap; } .ab-cta__row .ab-btn { flex: 1 1 100%; } } /* -- scroll reveal -- Content is visible by DEFAULT. The hiding rule only applies once site.js has successfully armed the observer (html.rv-armed), and site.js drops that class again if anything goes wrong. A reveal animation must never be able to leave the page blank. */ html.rv-armed .rv { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } html.rv-armed .rv.in { opacity: 1; transform: none; } /* -- staggered reveal -- Add .rv-stagger to a child-holding container INSIDE an .rv section and its direct children cascade in, 60ms apart, capped at 6 steps (360ms). Same fail-safe as .rv itself: nothing here applies unless html.rv-armed is set, so content is visible by default, and site.js's disarm timer clears it. */ html.rv-armed .rv .rv-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; transition-delay: calc(var(--rv-i, 0) * 60ms); } html.rv-armed .rv.in .rv-stagger > * { opacity: 1; transform: none; } .rv-stagger > :nth-child(1) { --rv-i: 0; } .rv-stagger > :nth-child(2) { --rv-i: 1; } .rv-stagger > :nth-child(3) { --rv-i: 2; } .rv-stagger > :nth-child(4) { --rv-i: 3; } .rv-stagger > :nth-child(5) { --rv-i: 4; } .rv-stagger > :nth-child(6) { --rv-i: 5; } .rv-stagger > :nth-child(n+7) { --rv-i: 6; } /* cap: 6 steps */ @media (prefers-reduced-motion: reduce) { html.rv-armed .rv { opacity: 1; transform: none; transition: none; } html.rv-armed .rv .rv-stagger > * { opacity: 1; transform: none; transition: none; transition-delay: 0s; } } /* ============================================================ Phone header — brand, theme toggle and menu button must all sit on ONE row. At 375px the full-size brand (272px) plus the labelled hamburger (144px) needed 440px against 339px of space, so the row wrapped. Below 760px the hamburger loses its label and the brand type steps down until the whole header fits on a single line. ============================================================ */ @media (max-width: 760px) { /* wrap stays ON so the open drawer can take its own line below; brand + controls now fit together, so they no longer wrap apart */ .site-header__inner { padding: 12px 14px; gap: 10px; } .site-header__controls { gap: 8px; flex-shrink: 0; } .site-brand { gap: 9px; } .site-brand__mark { width: 42px; height: 42px; } .site-brand__name { font-size: 16px; } .site-brand__tagline { font-size: 9.5px; letter-spacing: 0; } /* icon-only, square */ .theme-toggle { width: 36px; height: 36px; } .theme-toggle svg { width: 17px; height: 17px; } .nav-toggle { width: 38px; height: 36px; padding: 0; justify-content: center; } .nav-toggle > span:last-child { /* the word "Menu" */ display: none; } /* the drawer still needs the full width, so it alone may wrap */ .nav { flex: 1 0 100%; } /* touch targets: the toggles measure 36px (34px under 400px) — keep the visual size, extend the tappable area past 44px with an invisible halo. Absolutely positioned, so it takes no grid/flex slot of its own. */ .theme-toggle, .nav-toggle { position: relative; } .theme-toggle::after, .nav-toggle::after { content: ""; position: absolute; inset: -5px; border-radius: inherit; } } /* very narrow phones (320–400px) need one more step down */ @media (max-width: 400px) { .site-header__inner { padding: 10px 12px; gap: 8px; } .site-brand__mark { width: 38px; height: 38px; } .site-brand__name { font-size: 15px; } .site-brand__tagline { font-size: 8.5px; } .theme-toggle, .nav-toggle { width: 34px; height: 34px; } } /* ============================================================ 6. Gate-1 "sparkling" additions (owner browser review) Card tints, dark-mode projects-page treatments, the sitewide calculator-style credit footer, the spectrum table head, and the visitor-counter hide. Everything scoped to ab-* classes so nothing reaches the design-locked .cgw-app/.srs-app content. ============================================================ */ /* -- per-card light gradients, one hue per card (.ab-tint-1..6) -- Scoped under .ab-page so the (0,2,0) specificity beats every card/timeline background rule above regardless of source order. The --tint-N tokens carry the dark values: the reference card gradient with a top hairline in the same hue (the projects-card combination) — never a light gradient on dark. */ .ab-page .ab-tint-1 { background: var(--tint-1-bg); border-color: var(--tint-1-line); } .ab-page .ab-tint-2 { background: var(--tint-2-bg); border-color: var(--tint-2-line); } .ab-page .ab-tint-3 { background: var(--tint-3-bg); border-color: var(--tint-3-line); } .ab-page .ab-tint-4 { background: var(--tint-4-bg); border-color: var(--tint-4-line); } .ab-page .ab-tint-5 { background: var(--tint-5-bg); border-color: var(--tint-5-line); } .ab-page .ab-tint-6 { background: var(--tint-6-bg); border-color: var(--tint-6-line); } /* -- dark mode: the projects-page timeline rail + badges -- (both dark routes, kept identical — same pattern as the token blocks) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-timeline--steps::before { background: linear-gradient(90deg, #2563EB, #06B6D4, #22C55E); } :root:not([data-theme="light"]) .ab-timeline--steps > li::before { border-color: #06B6D4; box-shadow: 0 0 0 4px rgba(6, 182, 212, .18); } } :root[data-theme="dark"] .ab-timeline--steps::before { background: linear-gradient(90deg, #2563EB, #06B6D4, #22C55E); } :root[data-theme="dark"] .ab-timeline--steps > li::before { border-color: #06B6D4; box-shadow: 0 0 0 4px rgba(6, 182, 212, .18); } /* -- .ab-credit: the calculator-style credit footer, sitewide -- Navy panel with a gold top hairline; stacked/centered on phones, one centered row from 761px up (exactly the calculator's behaviour). */ .ab-credit { position: relative; margin: 6px 1px 0; /* 2026-09-11: was 90px top — white band removed; hairline sides */ padding: 18px; background: var(--deep-navy-grad); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px 12px; text-align: center; font-family: var(--font-nav); font-size: 13.5px; letter-spacing: .04em; } .ab-credit::before { /* fine gold top hairline */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); } .ab-credit__by { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; /* gradient-gold clipped text; solid fallback FIRST for non-supporting UAs */ color: #E9C25F; background: linear-gradient(180deg, #F7E7B2 0%, #E9C25F 55%, #C9922E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ab-credit__by b { font-weight: 700; } .ab-credit__mid { color: #C9D2E8; } .ab-credit__site { color: #E9C25F; font-weight: 600; text-decoration: none; } .ab-credit__site:hover, .ab-credit__site:focus-visible { color: #F7E7B2; text-decoration: underline; } @media (min-width: 761px) { .ab-credit { flex-direction: row; } } /* -- visitor-counter badge: counting continues, the badge is hidden -- (ab-analytics.js appends it at body end on the live server) */ #ab-visitor-counter { display: none !important; } /* 2026-09-11 (owner): pages that embed ANOTHER website (an iframe inside .ab-embed — the 9 platform pages + /calculator/) do not show this site's credit footer; the embedded site already carries its own. Books/YouTube embed widgets, not sites, so they keep it. */ body:has(.ab-embed iframe) .ab-credit, body:has(.ab-embed iframe) .ab-cta { display: none; } /* + the "Tell me what you're working on" CTA (owner) */ /* -- .ab-table--spectrum: calculator-style spectrum table head -- Column heads cycle through six solid hues, white bold text. Defined now for later gates; no home table uses it yet. */ .ab-table--spectrum thead th { color: #fff; font-weight: 700; padding: 10px 14px; text-align: left; } .ab-table--spectrum thead th:nth-child(6n+1) { background: #2563EB; } .ab-table--spectrum thead th:nth-child(6n+2) { background: #0D9488; } .ab-table--spectrum thead th:nth-child(6n+3) { background: #16A34A; } .ab-table--spectrum thead th:nth-child(6n+4) { background: #EA580C; } .ab-table--spectrum thead th:nth-child(6n+5) { background: #7C3AED; } .ab-table--spectrum thead th:nth-child(6n+6) { background: #475569; } /* Legibility aid on gradient surfaces: the owner's chosen button/chip gradients carry white labels whose contrast dips on the light ends; a faint shadow lifts them without altering the gradients themselves. */ .ab-btn--navy, .ab-btn--gold, .home-hero__badge, .ab-step__no, .home-featured__badge { text-shadow: 0 1px 2px rgba(0,0,0,.35); } /* ============================================================ 7. Gate-1 ROUND-2 additions (owner browser review, 2026-08-28) Dark-mode card separation, the "milky way" rotating hover rim, per-hue hover glows. Nothing here reaches the design-locked .cgw-app/.srs-app scopes (none of these classes appear there). ============================================================ */ /* -- dark mode: every card surface separates clearly from the page -- 1px --line border (rgba(148,163,184,.18)) is already on the components; add the inset top highlight + a deeper drop so edges read on navy. Both dark routes, kept identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-card, :root:not([data-theme="light"]) .ab-panel, :root:not([data-theme="light"]) .ab-stat, :root:not([data-theme="light"]) .ab-timeline--steps > li, :root:not([data-theme="light"]) .ab-callout, :root:not([data-theme="light"]) .ab-embed { border-color: var(--line); box-shadow: 0 22px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .035); } } :root[data-theme="dark"] .ab-card, :root[data-theme="dark"] .ab-panel, :root[data-theme="dark"] .ab-stat, :root[data-theme="dark"] .ab-timeline--steps > li, :root[data-theme="dark"] .ab-callout, :root[data-theme="dark"] .ab-embed { border-color: var(--line); box-shadow: 0 22px 60px rgba(0, 0, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .035); } /* -- round-3: dark card HOVER = the reference file hover — translateY(-7px), blue border rgba(96,165,250,.38), deep shadow + soft blue glow. Both dark routes, kept identical. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .ab-card:hover, :root:not([data-theme="light"]) .ab-timeline--steps > li:hover { transform: translateY(-7px); border-color: rgba(96, 165, 250, .38); box-shadow: 0 30px 75px rgba(0, 0, 0, .45), 0 0 35px rgba(37, 99, 235, .08); } } :root[data-theme="dark"] .ab-card:hover, :root[data-theme="dark"] .ab-timeline--steps > li:hover { transform: translateY(-7px); border-color: rgba(96, 165, 250, .38); box-shadow: 0 30px 75px rgba(0, 0, 0, .45), 0 0 35px rgba(37, 99, 235, .08); } /* -- "milky way" rotating conic border on interactive cards -- Owner: "border pe colour milky way ki tarah rotate". Drawn as a single masked ::after ring (2px, radius-following) so (a) the featured cards' existing ::before gold hairline survives, and (b) no cover element ever sits over card content. The rotation animates a registered @property angle; where @property is unsupported the rim simply shows static — which is also the reduced-motion behaviour. Works in both themes. NOT applied inside .cgw-app/.srs-app (those scopes never carry these classes). */ @property --ab-spin { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes ab-milky-spin { to { --ab-spin: 360deg; } } /* Owner 2026-08-28: "jo jo effects laga hai wo sab HAR card ke sath lagega" — the rim + glow + lift now cover every card family: interactive, navcards, every tinted card (books, timeline steps, rules, field cards, tier cards) and the filled intro cards. Never inside .cgw-app/.srs-app (locked). */ .ab-card--interactive, .home-navcard, .ab-page [class*="ab-tint-"], .home-intro { position: relative; } .ab-card--interactive::after, .home-navcard::after, .ab-page [class*="ab-tint-"]::after, .home-intro::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; /* the rim thickness */ background: conic-gradient(from var(--ab-spin, 0deg), #F97316, #FACC15, #3B82F6, #EC4899, #22C55E, #F97316); /* keep only the 2px ring: knock the padding-box out of the paint */ -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 1; } .ab-card--interactive:hover::after, .ab-card--interactive:focus-visible::after, .home-navcard:hover::after, .home-navcard:focus-visible::after, .ab-page [class*="ab-tint-"]:hover::after, .ab-page [class*="ab-tint-"]:focus-visible::after, .home-intro:hover::after, .home-intro:focus-visible::after { opacity: 1; animation: ab-milky-spin 4s linear infinite; } /* the lift that goes with the rim — every card family, light mode too */ .ab-page [class*="ab-tint-"], .home-intro { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ab-page [class*="ab-tint-"]:hover, .home-intro:hover { transform: translateY(-4px); } @media (prefers-reduced-motion: reduce) { .ab-card--interactive:hover::after, .ab-card--interactive:focus-visible::after, .home-navcard:hover::after, .home-navcard:focus-visible::after, .ab-page [class*="ab-tint-"]:hover::after, .ab-page [class*="ab-tint-"]:focus-visible::after, .home-intro:hover::after, .home-intro:focus-visible::after { animation: none; } /* static gradient rim */ .ab-page [class*="ab-tint-"]:hover, .home-intro:hover { transform: none; } } /* -- per-hue hover glow: each tinted card glows softly in its OWN colour -- */ .ab-page .ab-tint-1:hover { box-shadow: 0 14px 44px rgba(233, 194, 95, .32); border-color: rgba(233, 194, 95, .55); } .ab-page .ab-tint-2:hover { box-shadow: 0 14px 44px rgba(59, 130, 246, .30); border-color: rgba(59, 130, 246, .55); } .ab-page .ab-tint-3:hover { box-shadow: 0 14px 44px rgba(34, 197, 94, .30); border-color: rgba(34, 197, 94, .55); } .ab-page .ab-tint-4:hover { box-shadow: 0 14px 44px rgba(124, 58, 237, .30); border-color: rgba(124, 58, 237, .55); } .ab-page .ab-tint-5:hover { box-shadow: 0 14px 44px rgba(6, 182, 212, .30); border-color: rgba(6, 182, 212, .55); } .ab-page .ab-tint-6:hover { box-shadow: 0 14px 44px rgba(236, 72, 153, .30); border-color: rgba(236, 72, 153, .55); } /* untinted interactive cards keep a gold glow (matches their gold rim base) */ .ab-card--interactive:hover { box-shadow: 0 14px 44px rgba(201, 168, 76, .30); } /* filled intro cards glow in their own variant hue */ .home-intro--gold:hover { box-shadow: 0 14px 44px rgba(233, 194, 95, .32); } .home-intro--green:hover { box-shadow: 0 14px 44px rgba(34, 197, 94, .30); } .home-intro--blue:hover { box-shadow: 0 14px 44px rgba(59, 130, 246, .30); } .home-intro--purple:hover { box-shadow: 0 14px 44px rgba(124, 58, 237, .30); } /* -- Owner 2026-08-28 (round 5): menu items get the SAME card hover set -- Desktop mega-panel items AND the drawer submenu tiles (both are .nav__sublink) behave like the step cards: rotating rim + glow + lift. */ .nav__sublink { position: relative; transition: transform .22s ease, box-shadow .22s ease, background .22s ease; } .nav__sublink::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; background: conic-gradient(from var(--ab-spin, 0deg), #F97316, #FACC15, #3B82F6, #EC4899, #22C55E, #F97316); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .25s ease; pointer-events: none; z-index: 1; } .nav__sublink:hover::after, .nav__sublink:focus-visible::after { opacity: 1; animation: ab-milky-spin 4s linear infinite; } .nav__sublink:hover, .nav__sublink:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(201, 168, 76, .28); } @media (prefers-reduced-motion: reduce) { .nav__sublink:hover::after, .nav__sublink:focus-visible::after { animation: none; } .nav__sublink:hover, .nav__sublink:focus-visible { transform: none; } } /* ============================================================ Owner 2026-08-28 (round 6): phone menu tiles get DIFFERENT tinted backgrounds — "bilkul students teacher wale card ki tarah, generic white nahi" — plus a glow on hover/tap. Drawer only; desktop header untouched. ============================================================ */ @media (max-width: 1239.98px) { .nav__list > .nav__item:nth-child(6n+1) > .nav__link { background: var(--tint-1-bg); border-color: var(--tint-1-line); } .nav__list > .nav__item:nth-child(6n+2) > .nav__link { background: var(--tint-2-bg); border-color: var(--tint-2-line); } .nav__list > .nav__item:nth-child(6n+3) > .nav__link { background: var(--tint-3-bg); border-color: var(--tint-3-line); } .nav__list > .nav__item:nth-child(6n+4) > .nav__link { background: var(--tint-4-bg); border-color: var(--tint-4-line); } .nav__list > .nav__item:nth-child(6n+5) > .nav__link { background: var(--tint-5-bg); border-color: var(--tint-5-line); } .nav__list > .nav__item:nth-child(6n+6) > .nav__link { background: var(--tint-6-bg); border-color: var(--tint-6-line); } .nav__mega .nav__sublink:nth-child(6n+1) { background: var(--tint-1-bg); border-color: var(--tint-1-line); } .nav__mega .nav__sublink:nth-child(6n+2) { background: var(--tint-2-bg); border-color: var(--tint-2-line); } .nav__mega .nav__sublink:nth-child(6n+3) { background: var(--tint-3-bg); border-color: var(--tint-3-line); } .nav__mega .nav__sublink:nth-child(6n+4) { background: var(--tint-4-bg); border-color: var(--tint-4-line); } .nav__mega .nav__sublink:nth-child(6n+5) { background: var(--tint-5-bg); border-color: var(--tint-5-line); } .nav__mega .nav__sublink:nth-child(6n+6) { background: var(--tint-6-bg); border-color: var(--tint-6-line); } /* glow on hover/tap — same family as the cards */ .nav__list > .nav__item > .nav__link:hover, .nav__list > .nav__item > .nav__link:focus-visible, .nav__list > .nav__item.is-open > .nav__link { box-shadow: 0 10px 28px rgba(201, 168, 76, .30); } /* the opened-parent hue colour rules from round 4 still win: they come later in the cascade for label/chip/border colour, and this background tint sits beneath them. */ } /* ============================================================ 8. Gate-3: .ab-stage — the dark SHOWCASE STAGE (shared component) Approved Phase-0 direction: a full-bleed dark section that punctuates the light magazine. The stage is dark in BOTH themes by design (--stage-bg: #16224B light / #0A1122 dark), with two blurred glow circles fed by --glow-1/--glow-2 (override those custom properties on one instance to change its mood). Glass cards sit on it; blue/cyan accents live ONLY inside stage internals — the light page around it stays gold/navy editorial. First deployment: ventures.html. Reused later by software-expert and projects. Never inside .cgw-app/.srs-app (design-locked). ============================================================ */ .ab-stage { position: relative; overflow: hidden; margin-top: clamp(64px, 9vw, 110px); padding: clamp(56px, 7vw, 88px) 0 clamp(60px, 7.5vw, 96px); background: var(--stage-bg); } /* the two mood glows */ .ab-stage::before, .ab-stage::after { content: ""; position: absolute; border-radius: 50%; filter: blur(140px); pointer-events: none; } .ab-stage::before { width: 520px; height: 520px; top: -170px; left: -130px; background: var(--glow-1); } .ab-stage::after { width: 560px; height: 560px; bottom: -190px; right: -150px; background: var(--glow-2); } .ab-stage > .ab-wrap { position: relative; z-index: 1; } /* stage heading voice: 900-weight caps + a fixed-width gradient bar. This is the dark-section heading style; light sections keep the serif .ab-h2. */ .ab-stage__h { font-family: var(--font-nav); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: var(--fs-5); line-height: 1.15; color: #fff; margin: 0 0 26px; } .ab-stage__h::after { content: ""; display: block; width: 72px; height: 4px; margin-top: 16px; border-radius: 999px; background: linear-gradient(90deg, #2563EB, #06B6D4, #22C55E); } /* the shared eyebrow, re-inked for the dark stage */ .ab-stage .ab-eyebrow { color: rgba(255, 255, 255, .66); } .ab-stage .ab-eyebrow i { color: #7DD3FC; } .ab-stage .ab-eyebrow s { background: linear-gradient(90deg, #2563EB, #06B6D4); } .ab-stage .ab-eyebrow b { color: #fff; } /* -- glass feature cards on the stage -- Solid rgba fallback first; real glass only where backdrop-filter exists. Pair with .ab-card--interactive to arm the milky rim. */ .ab-stage__card { position: relative; display: flex; flex-direction: column; background: rgba(255, 255, 255, .09); /* solid fallback */ border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-lg); padding: 28px 26px 26px; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } @supports ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) { .ab-stage__card { background: rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } } /* hover = lift + a glow that reads clearly on the dark ground (declared after section 7 so it wins over the gold interactive glow) */ .ab-stage__card:hover, .ab-stage__card:focus-within { transform: translateY(-6px); border-color: rgba(125, 211, 252, .45); box-shadow: 0 26px 60px rgba(0, 0, 0, .45), 0 0 42px rgba(6, 182, 212, .16); } @media (prefers-reduced-motion: reduce) { .ab-stage__card:hover, .ab-stage__card:focus-within { transform: none; } } /* -- status-badge slot: absolute top-right pill -- Label must be a string already visible on the page (its own year or status word) — never invented text. Uses --grad-chip's dark pair constantly: the stage is dark in both themes. */ .ab-stage__badge { position: absolute; top: 14px; right: 14px; z-index: 2; padding: 6px 14px; border-radius: 999px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; background: linear-gradient(135deg, #FF9F1C, #FF4D5A); box-shadow: 0 6px 18px rgba(255, 77, 90, .35); text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } /* -- stage grid; --rail adds the gradient connecting rail + node dots (blue→cyan→green) where a sequence/succession exists -- */ .ab-stage__grid { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: stretch; margin-top: 34px; } @media (max-width: 1100px) { .ab-stage__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .ab-stage__grid { grid-template-columns: 1fr; } } @media (min-width: 1101px) { .ab-stage__grid--rail { padding-top: 36px; } .ab-stage__grid--rail::before { content: ""; position: absolute; top: 10px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 999px; background: linear-gradient(90deg, #2563EB, #06B6D4, #22C55E); } .ab-stage__grid--rail > .ab-stage__card::before { content: ""; position: absolute; top: -31px; left: 50%; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; background: #06B6D4; border: 2px solid var(--stage-bg); box-shadow: 0 0 0 5px rgba(6, 182, 212, .20); } .ab-stage__grid--rail > .ab-stage__card:nth-child(4n+1)::before { background: #2563EB; box-shadow: 0 0 0 5px rgba(37, 99, 235, .22); } .ab-stage__grid--rail > .ab-stage__card:nth-child(4n+3)::before { background: #14B8A6; box-shadow: 0 0 0 5px rgba(20, 184, 166, .22); } .ab-stage__grid--rail > .ab-stage__card:nth-child(4n+4)::before { background: #22C55E; box-shadow: 0 0 0 5px rgba(34, 197, 94, .22); } } /* -- the approved dot-pill rail, on-stage variant: outlined pills, hue dot inside, hues cycling the rail family blue→cyan→green. Each rail carries only its OWN block's options (standing rule). */ .ab-stage__pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; } .ab-stage__pills span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 11px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; background: rgba(255, 255, 255, .05); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .85); } .ab-stage__pills span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; background: #06B6D4; } .ab-stage__pills span:nth-child(3n+1)::before { background: #3B82F6; } .ab-stage__pills span:nth-child(3n+3)::before { background: #22C55E; } /* Owner 2026-08-28: phone drawer = THREE tiles per row (menu + submenu), and a separating line under an open submenu group. */ @media (max-width: 1239.98px) { .nav__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav__mega-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav__mega-icon { width: 48px; height: 48px; } .nav__sublink, .nav__list > .nav__item > .nav__link { font-size: 12.5px; } .nav__mega { padding-bottom: 16px; margin-bottom: 6px; border-bottom: 2px solid var(--hair-gold); } }