(or any wrapper around the content). The .ab-tint-* backgrounds and their whole hover set are scoped under it at (0,2,0) specificity so they beat every component background rule regardless of source order. Without .ab-page the tinted cards render plain white and no card ever glows. 2. Theme switching. Light is the default even on a dark-OS device. Dark arrives two ways so both the OS setting and an on-page toggle work: - `@media (prefers-color-scheme: dark) :root:not([data-theme="light"])` - `:root[data-theme="dark"]` Set `data-theme` on from an inline script BEFORE first paint or the page flashes light. Values: "light" | "dark" | "system" (absent). OWNER'S STANDING DESIGN RULES — these are the point of this file --------------------------------------------------------------- R1. Every card in a group gets a DIFFERENT colour, via an `ab-tint-1..6` CLASS on the element. Never nth-child — the global hover set keys off the class, so an untinted card silently loses its hover. R2. The hover set applies to EVERY card: rotating "milky-way" conic rim + the card's own hue glow + a lift. Automatic once a card carries `ab-tint-N`, `ab-card--interactive` or `ab-hover`. R3. Owner-sanctioned filler content (fact rails, stat chips, mini timelines) is DESKTOP-ONLY (>=1100px); on mobile only the real prose shows. Use `.ab-desk-only`. R4. Dot-pill rails (outlined pill + coloured dot, or a CSS-generated number / STEP mini-pill) are the approved list style. A rail lists ONLY its own block's options — never another section's. R5. Where a border is needed, use the multi-colour gradient border — but only where one is actually needed. R6. Icons are BARE — no square chip behind them. Emoji/SVG at ~34px with a hue drop-shadow glow; colour conveys meaning (red = problem, green = fixed). See `.ab-icon--glow`. R7. Mobile drawer: 3 tiles per row at both levels, big icon above the label, NO caret on an item without a submenu, opening a parent changes only its COLOUR (never its size or position), and its submenu appears full-width directly below with a gold separator under it. See section 19. R8. The footer is the single credit bar, `.ab-credit`. R9. Never a light gradient on a dark surface: the --tint-N tokens swap to the dark card gradient with a hue hairline on top. TABLE OF CONTENTS ----------------- 1. Design tokens (three theme states) 2. Base, reset & accessibility 3. Layout primitives .ab-wrap .ab-page .ab-s .ab-grid 4. Typography & section cadence 5. Hero panels .ab-hero .ab-hero--compact 6. Cards, tints & interaction tiers 7. The hover system milky-way rim + hue glow + lift 8. Panels, quote, callout, figure, stats 9. Buttons & the closing CTA panel 10. Timelines & step rails 11. Dot-pill rails 12. Bare glowing icons .ab-icon--glow 13. Two-column compare block .ab-compare 14. Spectrum table .ab-table--spectrum 15. Embed frame .ab-embed 16. The dark showcase stage .ab-stage 17. Scroll reveal & stagger 18. The credit footer .ab-credit 19. OPTIONAL — header, navigation & mobile drawer 20. OPTIONAL — site integration hooks !important is used in exactly TWO places in this file, both justified where they appear: the reduced-motion kill-switch (section 2) and the third-party visitor-counter hide (section 20). Nowhere else. TWO PORTABILITY MECHANISMS — read these before editing anything --------------------------------------------------------------- P1. THE WHOLE FILE SITS INSIDE `@layer ab-design-system { … }`. That is what makes it safe to drop onto a site that already has its own CSS. In the cascade, ANY unlayered declaration beats ANY layered one regardless of specificity or source order — so a host site's own `:root { --font-body: Inter }` or `.nav-toggle { border-radius: 999px }` keeps winning, and this file can never silently repaint someone else's design. It costs nothing on a greenfield site, where nothing competes. *** ANY RULE ADDED AFTER THE CLOSING BRACE AT THE BOTTOM OF THIS FILE IS UNLAYERED AND WILL OUTRANK THE ENTIRE SYSTEM. Add rules INSIDE. *** One deliberate consequence: an `!important` inside a layer outranks an unlayered `!important`, so the reduced-motion kill-switch still wins everywhere — which is what an accessibility guarantee should do. P2. NOTHING IN THIS FILE STYLES A BARE ELEMENT UNASKED. The element-level reset (body font/colour/background, link colour, `img` fluidity, `box-sizing`, focus rings) is gated behind TWO opt-in hooks: `.ab-base` on — greenfield sites; takes the full reset. `.ab-page` on

— always required anyway; carries the reset to our own components, so a site that only wants the COMPONENTS gets correct focus rings and box-sizing without its own chrome changing. Integration mode = use `.ab-page` and OMIT `.ab-base`. ========================================================================== */ @layer ab-design-system { /* ============================================================================ 1. DESIGN TOKENS ---------------------------------------------------------------------------- Light is the default. Brand constants (gold, green, the dark-panel navy) and the scales never change; only surface/ink tokens are themed. --navy IS themed, because it is used as a text colour — a permanently dark panel must use --panel-1/--panel-2 instead. RULE FOR ADDING A TOKEN: every themed token goes in ALL THREE blocks — bare :root, the media-guarded dark block, and [data-theme="dark"] — and the two dark blocks must be token-for-token identical. ========================================================================== */ :root, .ab-page { /* -- brand constants (never themed) -- */ --gold: #C9A84C; --gold-soft: #E8D9AE; --gold-ring: #D4A84B; --green: #61CE70; --panel-1: #1B2A5E; --panel-2: #131E45; --navy-deep: #131E45; /* -- themed surfaces + ink -- */ --page-bg: #FFFFFF; --card: #FFFFFF; --card-2: #FFFFFF; --paper: #FAF9F6; --line: #E7E2D6; --line-soft: #F0EDE4; --ink: #1C2130; --body-c: #3A4152; --muted: #6B7280; --navy: #1B2A5E; /* heading / link ink */ --nav-c: #6F6F6F; /* AA-contrast nav grey (darkened from #7A7A7A) */ --tint: rgba(201, 168, 76, .14); --sheen: rgba(201, 168, 76, .05); /* Layered surfaces. --body-bg is what paints (dark adds two radial glows); --card-surface is what card components paint (dark swaps the flat colour for a 145deg gradient). In light both resolve to the flat token. */ --body-bg: var(--page-bg); --card-surface: var(--card); /* -- text-safe ink tokens -- The raw brand colours FAIL contrast as text. These are the audited replacements and must be used wherever gold or green is TYPE: --gold-ink 4.9:1 --green-ink 5.4:1 Brand --gold / --green stay for hairlines, rules and navy-panel text. */ --gold-ink: #8A6D1F; --green-ink: #177A39; --stage-bg: #16224B; /* dark showcase surface */ --glow-1: rgba(201, 168, 76, .16); --glow-2: rgba(37, 99, 235, .14); --hair: #E4E7EE; --hair-gold: rgba(201, 168, 76, .45); --focus-ring: var(--gold-ink); /* resolves per-theme via --gold-ink */ /* -- gradients -- */ --deep-navy-grad: linear-gradient(165deg, #0D1740 0%, #1B2A5E 55%, #0F1E52 100%); --grad-primary: linear-gradient(90deg, #3B82F6, #EC4899); /* primary buttons */ --grad-primary-glow: rgba(236, 72, 153, .35); --grad-cta: linear-gradient(90deg, #F97316, #FBBF24); /* gold/CTA buttons */ --grad-chip: linear-gradient(90deg, #F97316, #FACC15); /* status chips */ --grad-step: linear-gradient(90deg, #E9C25F, #C9922E); /* STEP n pills */ /* -- per-card tints: 1 gold, 2 blue, 3 green, 4 purple, 5 teal, 6 rose -- Light = soft gradient + a tinted hairline. Dark = the reference card gradient with a 2px top hairline in the same hue (R9). */ --tint-1-bg: linear-gradient(135deg, #FFF8E7 0%, #FFFFFF 100%); --tint-1-line: #EFE2BC; --tint-2-bg: linear-gradient(135deg, #EDF4FF 0%, #FFFFFF 100%); --tint-2-line: #D3E2F9; --tint-3-bg: linear-gradient(135deg, #EBFBF1 0%, #FFFFFF 100%); --tint-3-line: #C8EDD7; --tint-4-bg: linear-gradient(135deg, #F4F0FF 0%, #FFFFFF 100%); --tint-4-line: #DFD5F7; --tint-5-bg: linear-gradient(135deg, #E8FAF9 0%, #FFFFFF 100%); --tint-5-line: #C5ECE9; --tint-6-bg: linear-gradient(135deg, #FFF0F4 0%, #FFFFFF 100%); --tint-6-line: #F7D3DE; /* soft icon-chip fills, same six hues */ --chip-1: #FFF4D8; --chip-2: #E3EEFF; --chip-3: #DDF7E8; --chip-4: #ECE4FF; --chip-5: #DCF5F3; --chip-6: #FFE4EC; /* vivid icon hues; brighter in both dark blocks so they stay vivid on dark */ --hue-green: #16A34A; --hue-blue: #2563EB; --hue-orange: #EA580C; --hue-purple: #7C3AED; --hue-gold: #D97706; --hue-teal: #0D9488; --hue-rose: #DB2777; --hue-cyan: #0891B2; /* -- spacing scale -- */ --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px; /* -- radii -- */ --r-sm: 10px; --r-md: 18px; --r-lg: 26px; /* -- letter-spacing roles -- */ --track-label: .14em; --track-micro: .18em; /* -- fluid type scale -- */ --fs-1: clamp(17px, 1.5vw, 19px); --fs-2: clamp(19px, 2vw, 23px); --fs-3: clamp(22px, 2.3vw, 28px); --fs-4: clamp(26px, 3vw, 36px); --fs-5: clamp(30px, 3.8vw, 46px); --fs-6: clamp(34px, 5vw, 58px); /* -- families -- */ --font-brand: 'Poppins', sans-serif; --font-nav: 'Roboto', sans-serif; --font-display: Georgia, 'Times New Roman', Times, serif; --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --wrap: 1360px; --shadow-soft: 0 10px 30px rgba(27, 42, 94, .10); --shadow-lift: 0 18px 45px rgba(27, 42, 94, .16); --radius: var(--r-md); /* 18px — alias onto the radius scale */ } /* ---- dark, route A: OS setting (unless the page explicitly asks for light) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]), :root:not([data-theme="light"]) .ab-page { /* deep blue-black, NEVER pure black; blue/cyan page glows; 145deg card gradient. Kept token-for-token identical to route B below. */ --page-bg: #050914; --body-bg: radial-gradient(circle at 50% -15%, rgba(37, 99, 235, .18), transparent 34%), radial-gradient(circle at 100% 85%, rgba(6, 182, 212, .12), transparent 28%), linear-gradient(180deg, #050914, #060B17 55%, #040811) #050914; --card: #0D1424; --card-surface: linear-gradient(145deg, rgba(17, 24, 39, .98), rgba(8, 13, 24, .98)) #0D1424; --card-2: #131B2F; --paper: #0A101E; --line: rgba(148, 163, 184, .18); --line-soft: rgba(148, 163, 184, .10); --ink: #F8FAFC; --body-c: #B9C5D8; --muted: #AEBBD0; --navy: #E2E8F0; --nav-c: #AEBBD0; --tint: rgba(245, 185, 66, .20); --sheen: rgba(245, 185, 66, .06); --shadow-soft: 0 22px 60px rgba(0, 0, 0, .30); --shadow-lift: 0 30px 75px rgba(0, 0, 0, .45); --gold-ink: #F5B942; --green-ink: #10B981; --stage-bg: #0A1122; --glow-1: rgba(245, 185, 66, .14); --glow-2: rgba(37, 99, 235, .18); --hair: rgba(148, 163, 184, .18); --hair-gold: rgba(245, 185, 66, .40); --focus-ring: var(--gold-ink); --deep-navy-grad: linear-gradient(165deg, #0D1740 0%, #1B2A5E 55%, #0F1E52 100%); --grad-primary: linear-gradient(100deg, #2563EB, #06B6D4); --grad-primary-glow: rgba(6, 182, 212, .35); --grad-cta: linear-gradient(100deg, #FF9F1C, #F5B942); --grad-chip: linear-gradient(135deg, #FF9F1C, #FF4D5A); --grad-step: linear-gradient(135deg, #FF9F1C, #FF4D5A); --tint-1-bg: linear-gradient(90deg, rgba(245,185,66,.9), rgba(245,185,66,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-1-line: rgba(148,163,184,.18); --tint-2-bg: linear-gradient(90deg, rgba(59,130,246,.9), rgba(59,130,246,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-2-line: rgba(148,163,184,.18); --tint-3-bg: linear-gradient(90deg, rgba(16,185,129,.9), rgba(16,185,129,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-3-line: rgba(148,163,184,.18); --tint-4-bg: linear-gradient(90deg, rgba(167,139,250,.95), rgba(167,139,250,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-4-line: rgba(148,163,184,.18); --tint-5-bg: linear-gradient(90deg, rgba(6,182,212,.9), rgba(6,182,212,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-5-line: rgba(148,163,184,.18); --tint-6-bg: linear-gradient(90deg, rgba(255,77,90,.9), rgba(255,77,90,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-6-line: rgba(148,163,184,.18); --chip-1: rgba(245, 185, 66, .16); --chip-2: rgba(59, 130, 246, .18); --chip-3: rgba(16, 185, 129, .16); --chip-4: rgba(167, 139, 250, .20); --chip-5: rgba(6, 182, 212, .16); --chip-6: rgba(255, 77, 90, .16); --hue-green: #10B981; --hue-blue: #3B82F6; --hue-orange: #FF9F1C; --hue-purple: #A78BFA; --hue-gold: #F5B942; --hue-teal: #2DD4BF; --hue-rose: #FF4D5A; --hue-cyan: #06B6D4; } } /* ---- dark, route B: explicit toggle. Identical to route A. ---- */ :root[data-theme="dark"], :root[data-theme="dark"] .ab-page { --page-bg: #050914; --body-bg: radial-gradient(circle at 50% -15%, rgba(37, 99, 235, .18), transparent 34%), radial-gradient(circle at 100% 85%, rgba(6, 182, 212, .12), transparent 28%), linear-gradient(180deg, #050914, #060B17 55%, #040811) #050914; --card: #0D1424; --card-surface: linear-gradient(145deg, rgba(17, 24, 39, .98), rgba(8, 13, 24, .98)) #0D1424; --card-2: #131B2F; --paper: #0A101E; --line: rgba(148, 163, 184, .18); --line-soft: rgba(148, 163, 184, .10); --ink: #F8FAFC; --body-c: #B9C5D8; --muted: #AEBBD0; --navy: #E2E8F0; --nav-c: #AEBBD0; --tint: rgba(245, 185, 66, .20); --sheen: rgba(245, 185, 66, .06); --shadow-soft: 0 22px 60px rgba(0, 0, 0, .30); --shadow-lift: 0 30px 75px rgba(0, 0, 0, .45); --gold-ink: #F5B942; --green-ink: #10B981; --stage-bg: #0A1122; --glow-1: rgba(245, 185, 66, .14); --glow-2: rgba(37, 99, 235, .18); --hair: rgba(148, 163, 184, .18); --hair-gold: rgba(245, 185, 66, .40); --focus-ring: var(--gold-ink); --deep-navy-grad: linear-gradient(165deg, #0D1740 0%, #1B2A5E 55%, #0F1E52 100%); --grad-primary: linear-gradient(100deg, #2563EB, #06B6D4); --grad-primary-glow: rgba(6, 182, 212, .35); --grad-cta: linear-gradient(100deg, #FF9F1C, #F5B942); --grad-chip: linear-gradient(135deg, #FF9F1C, #FF4D5A); --grad-step: linear-gradient(135deg, #FF9F1C, #FF4D5A); --tint-1-bg: linear-gradient(90deg, rgba(245,185,66,.9), rgba(245,185,66,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-1-line: rgba(148,163,184,.18); --tint-2-bg: linear-gradient(90deg, rgba(59,130,246,.9), rgba(59,130,246,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-2-line: rgba(148,163,184,.18); --tint-3-bg: linear-gradient(90deg, rgba(16,185,129,.9), rgba(16,185,129,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-3-line: rgba(148,163,184,.18); --tint-4-bg: linear-gradient(90deg, rgba(167,139,250,.95), rgba(167,139,250,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-4-line: rgba(148,163,184,.18); --tint-5-bg: linear-gradient(90deg, rgba(6,182,212,.9), rgba(6,182,212,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-5-line: rgba(148,163,184,.18); --tint-6-bg: linear-gradient(90deg, rgba(255,77,90,.9), rgba(255,77,90,0)) top / 100% 2px no-repeat, linear-gradient(145deg, rgba(17,24,39,.98), rgba(8,13,24,.98)) #0D1424; --tint-6-line: rgba(148,163,184,.18); --chip-1: rgba(245, 185, 66, .16); --chip-2: rgba(59, 130, 246, .18); --chip-3: rgba(16, 185, 129, .16); --chip-4: rgba(167, 139, 250, .20); --chip-5: rgba(6, 182, 212, .16); --chip-6: rgba(255, 77, 90, .16); --hue-green: #10B981; --hue-blue: #3B82F6; --hue-orange: #FF9F1C; --hue-purple: #A78BFA; --hue-gold: #F5B942; --hue-teal: #2DD4BF; --hue-rose: #FF4D5A; --hue-cyan: #06B6D4; } /* ============================================================================ 2. BASE, RESET & ACCESSIBILITY ---------------------------------------------------------------------------- PORTABILITY (P2): every rule here is gated on `.ab-base` (opt-in, on ) or `.ab-page` (the wrapper the system already requires). NOTHING here matches a bare element, so dropping this file onto a site that already has its own CSS cannot change that site's body type, link colour or focus rings. greenfield

integration

(no .ab-base) ========================================================================== */ .ab-base, .ab-base *, .ab-base *::before, .ab-base *::after, .ab-page, .ab-page *, .ab-page *::before, .ab-page *::after { box-sizing: border-box; } /* scroll-behavior only works from the scrolling element, so it is asked for from — but only when the page opted in. Degrades to instant scroll. */ html:has(> body.ab-base) { scroll-behavior: smooth; } body.ab-base { margin: 0; font-family: var(--font-body); font-size: 16px; line-height: 1.7; color: var(--body-c); background: var(--body-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background-color .25s ease, color .25s ease; } .ab-base img, .ab-page img { max-width: 100%; height: auto; } .ab-base a, .ab-page a { color: var(--navy); } /* ---- reduced-motion kill-switch: the single source for the whole site ---- Every transition and animation here is decoration, so collapse them all. !important IS REQUIRED: this must beat every author declaration on the page, including page-level stylesheets and component hover rules that set their own transition. A page stylesheet must NOT ship its own unscoped kill-switch — this one already covers page widgets too. */ @media (prefers-reduced-motion: reduce) { html:has(> body.ab-base) { scroll-behavior: auto; } body.ab-base { transition: none; } /* the theme cross-fade is decoration */ /* Scoped to our own two hooks so a host site's animations are its own business — but .ab-page is mandatory, so every component this file styles is covered in BOTH greenfield and integration mode. */ .ab-base, .ab-base *, .ab-base *::before, .ab-base *::after, .ab-page, .ab-page *, .ab-page *::before, .ab-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } } /* ---- global focus visibility ---- One rule for every focusable element. --focus-ring is gold-ink in both themes, so the ring reads on light and dark surfaces alike. */ .ab-base :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .ab-page :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } /* Usage: */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--panel-1); color: #fff; padding: 10px 18px; z-index: 100; } .skip-link:focus { left: 0; } /* Readable by screen readers and search engines, invisible on screen. Use where the design has no visible page heading. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================================ 3. LAYOUT PRIMITIVES ---------------------------------------------------------------------------- Usage:

...

========================================================================== */ .ab-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .ab-page { background: var(--page-bg); } /* vertical rhythm between major sections */ .ab-s { margin-top: clamp(64px, 9vw, 110px); } /* Usage:

… */ .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; } } /* R3: owner-sanctioned filler (fact rails, stat chips, mini timelines) is desktop-only; on mobile only the real prose shows. Usage: */ .ab-desk-only { display: none; } @media (min-width: 1100px) { .ab-desk-only { display: block; } } /* ============================================================================ 4. TYPOGRAPHY & SECTION CADENCE ---------------------------------------------------------------------------- The cadence of every section is: eyebrow -> h2 -> lede -> content. Usage:

02Live Platform

Use it right here

…

========================================================================== */ /* the dark-panel kicker (hero/CTA); the light-page equivalent is .ab-eyebrow */ .ab-kicker { display: inline-flex; align-items: center; gap: 12px; 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-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 { /* the section number */ font-style: normal; color: var(--gold-ink); /* gold as TEXT on a light surface -> ink token */ font-weight: 600; } .ab-eyebrow s { /* the short gold rule; carries no meaning here */ flex: 0 0 44px; height: 1.5px; background: var(--gold); text-decoration: none; } .ab-eyebrow b { font-weight: 600; color: var(--ink); } /* -- heading scale -- .ab-h1 and .ab-h4 are PROMOTED NAMES, not new values: .ab-h1 carries the hero title's --fs-6 settings for in-page use, .ab-h4 carries the 21px settings the source applies via `.ab-card h3`. */ .ab-h1 { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-6); line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 20px; } .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-h4 { font-family: var(--font-display); font-weight: 400; font-size: 21px; line-height: 1.35; color: var(--ink); margin: 0 0 10px; } /* short gold underline beneath a heading */ .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); } /* Gradient-gold TEXT. Solid fallback FIRST for UAs without background-clip. Used on compact-hero titles and the credit bar. Usage:
…
*/ .ab-gold-text { color: #E9C25F; background: linear-gradient(180deg, #F7E7B2 0%, #E9C25F 55%, #C9922E 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* -- prose -- Justified inside cards and heroes only: never headings, never nav. */ .ab-panel p, .ab-panel li, .ab-quote p, .ab-hero__lede { text-align: justify; } .ab-flow { max-width: none; } .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); } /* Two-column prose once there is room, with a visible gold column rule, so a long passage never runs as one very wide line. Usage:

…

…

*/ @media (min-width: 1100px) { .ab-flow--wide { columns: 2; column-gap: 64px; column-rule: 1px solid var(--hair-gold); } .ab-flow--wide > * { break-inside: avoid; } } /* ============================================================================ 5. HERO PANELS ---------------------------------------------------------------------------- Full hero (page opener):

Section label

Title with an accent

…

Founded 2021

Compact hero (~40% height, centred) — add ONE class:
… The compact recipe was duplicated verbatim in employment.css, books.css and platform.css; it is promoted here ONCE. ========================================================================== */ .ab-hero { max-width: var(--wrap); margin: 6px auto 0; padding: 0 24px; } .ab-hero__panel { position: relative; overflow: hidden; border-radius: 26px; /* RESOLVED: the source wrote the base navy gradient as a literal here and as var(--deep-navy-grad) in the compact hero. The two strings are identical, so the token is used in both — one place to retune the navy. */ 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%), var(--deep-navy-grad); 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-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 owner review */ } .ab-hero__meta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; padding: 0; list-style: none; } /* chip on a dark panel (the light-page equivalent is .ab-pill, section 11) */ .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; } /* -- compact variant: centred, one gold glow, symmetric kicker rule -- */ .ab-hero--compact .ab-hero__panel { text-align: center; padding: clamp(28px, 4vw, 46px) clamp(26px, 6vw, 84px); background: radial-gradient(720px 300px at 50% -35%, rgba(201, 168, 76, .38), transparent 62%), var(--deep-navy-grad); } .ab-hero--compact .ab-kicker { margin-bottom: 12px; } .ab-hero--compact .ab-kicker::after { /* the rule becomes symmetric when centred */ content: ""; width: 34px; height: 1.5px; background: var(--gold); } .ab-hero--compact .ab-hero__title { margin: 0; /* RESOLVED: three source files disagreed — employment clamp(30px,4.2vw,46px) +.04em tracking, books clamp(26px,3.4vw,40px), platform clamp(30px,4.2vw,46px) +.01em. Platform's is the last written and the one used on nine pages, so it wins. */ font-size: clamp(30px, 4.2vw, 46px); letter-spacing: .01em; } /* a mono sub-line under a compact hero title (domain, date, category) */ .ab-hero__sub { margin: 14px 0 0; font-family: var(--font-mono); font-size: 13.5px; letter-spacing: .12em; color: var(--gold-soft); } /* ============================================================================ 6. CARDS, TINTS & INTERACTION TIERS ---------------------------------------------------------------------------- R1: every card in a group carries a DIFFERENT ab-tint-N CLASS. Usage:

…
…

…

…

Interaction tiers: .ab-card base — small lift, gold-soft border .ab-card--interactive primary destinations — bigger lift + gold glow .ab-card--static dense secondary grids — border shift only, no motion ========================================================================== */ .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); } /* the chipped icon slot. For the BARE glowing icon (R6) see section 12. */ .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); } .ab-card--paper { background: var(--paper); } /* RESOLVED: .ab-card--interactive:hover was declared twice in the source — an early `0 25px 60px rgba(201,168,76,.25)` and a later per-hue pass with `0 14px 44px rgba(201,168,76,.30)`. The later declaration won in the cascade, so only it is kept. The lift and border come from the first declaration and are unchanged. */ .ab-card--interactive:hover { transform: translateY(-6px); box-shadow: 0 14px 44px rgba(201, 168, 76, .30); 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); } /* -- the six tints -- Scoped under .ab-page so (0,2,0) beats every component background rule regardless of source order. THE .ab-page CLASS IS MANDATORY. */ .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: every card surface must separate clearly from the page -- The 1px --line border is already on the components; add an inset top highlight and a deeper drop so edges read on the near-black ground. 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); } /* dark card HOVER: deeper lift, blue border, blue glow. Both routes. */ @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); } /* ============================================================================ 7. THE HOVER SYSTEM — rotating "milky-way" rim + own-hue glow + lift ---------------------------------------------------------------------------- R2. Armed automatically on: .ab-card--interactive, any element carrying an ab-tint-N class inside .ab-page, and the generic opt-in hook .ab-hover (use that to arm a component of your own without renaming it). Mechanics: a single masked ::after ring, 2px, following the element's own border-radius. Drawn as a ring rather than a cover element so (a) an existing ::before hairline survives and (b) nothing ever sits over card content. The rotation animates a registered @property angle; where @property is not supported the rim simply shows static — which is also the reduced-motion behaviour. The host element gets position:relative here, so do not rely on it being static. Never apply these classes inside a design-locked scope. ========================================================================== */ @property --ab-spin { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes ab-milky-spin { to { --ab-spin: 360deg; } } .ab-card--interactive, .ab-page [class*="ab-tint-"], .ab-hover { position: relative; } .ab-card--interactive::after, .ab-page [class*="ab-tint-"]::after, .ab-hover::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, .ab-page [class*="ab-tint-"]:hover::after, .ab-page [class*="ab-tint-"]:focus-visible::after, .ab-hover:hover::after, .ab-hover:focus-visible::after { opacity: 1; animation: ab-milky-spin 4s linear infinite; } /* the lift that goes with the rim */ .ab-page [class*="ab-tint-"], .ab-hover { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .ab-page [class*="ab-tint-"]:hover, .ab-hover:hover { transform: translateY(-4px); } /* per-hue 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); } @media (prefers-reduced-motion: reduce) { .ab-card--interactive:hover::after, .ab-card--interactive:focus-visible::after, .ab-page [class*="ab-tint-"]:hover::after, .ab-page [class*="ab-tint-"]:focus-visible::after, .ab-hover:hover::after, .ab-hover:focus-visible::after { animation: none; } /* static gradient rim */ .ab-page [class*="ab-tint-"]:hover, .ab-hover:hover { transform: none; } } /* ============================================================================ 8. PANELS, QUOTE, CALLOUT, FIGURE, STATS ---------------------------------------------------------------------------- .ab-panel is the card every section's content sits inside, so nothing on the site is ever loose text on the page background. Usage:
…
========================================================================== */ .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; } .ab-panel + .ab-panel { margin-top: 26px; } /* Usage:
…
Attribution
*/ .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); } /* Usage:
…
…
RESOLVED: the source wrote `var(--hair-gold, var(--gold-soft))` with a note that --hair-gold "is not defined in the token blocks yet". It IS defined in all three blocks now, so the dead fallback is dropped. */ .ab-callout { margin-top: 38px; border: 1px solid var(--hair-gold); 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; } /* Usage:
…
*/ .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); } /* Usage:
26Pages
*/ .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); } /* ============================================================================ 9. BUTTONS & THE CLOSING CTA PANEL ---------------------------------------------------------------------------- Usage: Contact Me warm CTA Find primary action Read more outlined, light page Call outlined, DARK panel only ========================================================================== */ .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 { background: var(--grad-cta); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(249, 115, 22, .35); } .ab-btn--navy { background: var(--grad-primary); border: 0; color: #fff; box-shadow: 0 8px 22px rgba(27, 42, 94, .28); } .ab-btn--navy:hover { transform: translateY(-2px); box-shadow: 0 12px 30px var(--grad-primary-glow); } .ab-btn--line { border: 1.5px solid var(--gold-ink); color: var(--navy); background: var(--card); } .ab-btn--line:hover { border-color: var(--gold); color: var(--navy); } /* --ghost is a gold OUTLINED pill for the permanently-navy CTA panel, so it reads identically in both themes. It has white text: never use it on a light surface. */ .ab-btn--ghost { border: 1.5px solid var(--gold); color: #fff; } .ab-btn--ghost:hover { border-color: var(--gold-soft); color: var(--gold-soft); } /* Legibility aid: these gradients carry white labels whose contrast dips at their light ends; a faint shadow lifts the label without touching the gradient itself. */ .ab-btn--navy, .ab-btn--gold, .ab-step__no, .ab-badge { text-shadow: 0 1px 2px rgba(0, 0, 0, .35); } /* Usage:

Tell me what you're working on.

…

Contact Call

*/ .ab-cta { max-width: var(--wrap); margin: clamp(70px, 10vw, 120px) auto 0; padding: 0 24px; } .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; } /* subtle dot-grid texture, masked so it fades away 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%); } .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; /* CTA copy is centred, never justified */ max-width: 62ch; margin: 0 auto 28px; } .ab-cta__row { /* the CTA buttons stay centred in ONE row at every width; wrapping is allowed only under 360px */ display: flex; justify-content: center; flex-wrap: nowrap; gap: 14px; } /* the Contact button gains a decorative arrow via CSS, never in the 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); } /* decorative phone glyph on the Call button — a currentColor mask, so it follows the label colour and needs no markup and no extra file */ .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; } @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%; } } /* ============================================================================ 10. TIMELINES & STEP RAILS ---------------------------------------------------------------------------- Vertical:
…
…
Steps:

Step 1
…
…

Use --steps for any sequence the reader is meant to follow IN ORDER. ========================================================================== */ .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; } /* -- the same list as numbered STEP cards on a horizontal connecting rail -- */ .ab-timeline--steps { position: relative; display: grid; /* min() so a narrow phone never overflows */ grid-template-columns: repeat(auto-fit, minmax(min(310px, 100%), 1fr)); 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; background: var(--grad-step); /* light: gold; dark: orange */ color: #fff; font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } /* STEP 1-5 pills cycle vivid gradients, the SAME in both themes — declared unconditionally so they override the themed --grad-step base above. */ .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); } /* dark mode: the rail and its nodes go blue -> cyan -> green. Both routes. */ @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); } @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; } } /* A CSS-generated numbered mini-pill for a card grid (01, 02, 03 …), same vivid gradients as the STEP pills, same in both themes. Decoration only — it adds no text to the document. Usage:

Title
… */ .ab-numbered { counter-reset: ab-n; } .ab-num { display: flex; flex-direction: column; align-items: center; } .ab-num::before { counter-increment: ab-n; content: "0" counter(ab-n); display: inline-grid; place-items: center; margin: 0 auto 12px; padding: 4px 12px; border-radius: 999px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); background: linear-gradient(90deg, #F97316, #FACC15); } .ab-numbered > :nth-child(5n+2) .ab-num::before { background: linear-gradient(90deg, #3B82F6, #06B6D4); } .ab-numbered > :nth-child(5n+3) .ab-num::before { background: linear-gradient(90deg, #EC4899, #8B5CF6); } .ab-numbered > :nth-child(5n+4) .ab-num::before { background: linear-gradient(90deg, #22C55E, #0D9488); } .ab-numbered > :nth-child(5n+5) .ab-num::before { background: linear-gradient(90deg, #E9C25F, #C9922E); } /* ============================================================================ 11. DOT-PILL RAILS (R4 — the approved list style) ---------------------------------------------------------------------------- A rail lists ONLY its own block's options. Never another section's. Light page:

Kundli
Panchang

Dark stage:
NO FEEONLY QUIZ
The dot hues cycle through the --hue-* tokens. Override one rail's dot with `style="--ab-pill-hue: var(--hue-teal)"` on the
. ========================================================================== */ .ab-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; } .ab-pill { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); font-family: var(--font-nav); font-size: 13.5px; font-weight: 500; color: var(--ink); box-shadow: 0 2px 10px rgba(27, 42, 94, .04); text-decoration: none; } .ab-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ab-pill-hue, var(--gold)); flex: 0 0 auto; } /* six-hue cycle, matching the card tint order (1 gold, 2 blue, 3 green, 4 purple, 5 teal, 6 rose). Generalised from the same 6n cycle the source uses for menu icon chips. */ .ab-pills > :nth-child(6n+1) { --ab-pill-hue: var(--hue-gold); } .ab-pills > :nth-child(6n+2) { --ab-pill-hue: var(--hue-blue); } .ab-pills > :nth-child(6n+3) { --ab-pill-hue: var(--hue-green); } .ab-pills > :nth-child(6n+4) { --ab-pill-hue: var(--hue-purple); } .ab-pills > :nth-child(6n+5) { --ab-pill-hue: var(--hue-teal); } .ab-pills > :nth-child(6n+6) { --ab-pill-hue: var(--hue-rose); } /* a single outlined pill used as a LINK (e.g. a card's website line) */ .ab-pill--link { padding: 10px 20px; border: 1.5px solid var(--hair); font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--navy); transition: border-color .2s ease, color .2s ease, transform .2s ease; } .ab-pill--link:hover, .ab-pill--link:focus-visible { border-color: var(--gold); color: var(--gold-ink); transform: translateY(-2px); } /* a mono footnote line held between two short gold rules Usage:
SINCE 2021
*/ .ab-rule-note { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .2em; color: var(--muted); } .ab-rule-note::before, .ab-rule-note::after { content: ""; width: 44px; height: 1.5px; background: var(--gold); } /* status badge pill, absolute top-right of a card Usage: JUNE 2022 inside a position:relative card */ .ab-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: var(--grad-chip); box-shadow: 0 6px 18px rgba(255, 77, 90, .35); } /* ============================================================================ 12. BARE GLOWING ICONS (R6 — "icons are bare") ---------------------------------------------------------------------------- No chip, no background, no border, no box. Colour is said by a hue glow, and the colour carries meaning: red = problem, green = fixed. Usage (emoji): ✗ Usage (in a card, replacing the chipped slot): ✓ Every box property is reset explicitly, because .ab-card__icon paints a 46px gradient chip; the doubled class gives (0,2,0) which beats it. ========================================================================== */ .ab-icon--glow, .ab-card__icon.ab-icon--glow { background: none; box-shadow: none; border: 0; border-radius: 0; width: auto; height: auto; font-size: 34px; line-height: 1; display: inline-grid; place-items: center; filter: drop-shadow(0 0 12px rgba(201, 168, 76, .55)); } .ab-icon--red { filter: drop-shadow(0 0 12px rgba(239, 68, 68, .60)); } .ab-icon--green { filter: drop-shadow(0 0 12px rgba(34, 197, 94, .60)); } .ab-icon--gold { filter: drop-shadow(0 0 14px rgba(201, 168, 76, .55)); } .ab-icon--blue { filter: drop-shadow(0 0 14px rgba(59, 130, 246, .60)); } .ab-icon--purple { filter: drop-shadow(0 0 14px rgba(139, 92, 246, .60)); } .ab-icon--cyan { filter: drop-shadow(0 0 14px rgba(6, 182, 212, .60)); } .ab-icon--rose { filter: drop-shadow(0 0 14px rgba(236, 72, 153, .60)); } /* the larger size used on square platform cards */ .ab-icon--glow-lg { font-size: 44px; } /* six-hue cycle for a grid of bare icons, matching the card tint order. Usage:
… each card holding an .ab-icon--glow … */ .ab-icon-cycle > :nth-child(6n+2) .ab-icon--glow { filter: drop-shadow(0 0 14px rgba(59, 130, 246, .60)); } .ab-icon-cycle > :nth-child(6n+3) .ab-icon--glow { filter: drop-shadow(0 0 14px rgba(34, 197, 94, .60)); } .ab-icon-cycle > :nth-child(6n+4) .ab-icon--glow { filter: drop-shadow(0 0 14px rgba(139, 92, 246, .60)); } .ab-icon-cycle > :nth-child(6n+5) .ab-icon--glow { filter: drop-shadow(0 0 14px rgba(6, 182, 212, .60)); } .ab-icon-cycle > :nth-child(6n+6) .ab-icon--glow { filter: drop-shadow(0 0 14px rgba(236, 72, 153, .60)); } /* ============================================================================ 13. TWO-COLUMN COMPARE BLOCK (.ab-compare) ---------------------------------------------------------------------------- Two halves — typically problems vs fixes — with a gold divider running down the centre gutter and a gold rule separating the block from the prose above. Usage:

intro prose

✗
…

… same shape …

GOTCHA THAT BROKE THIS TWICE: at >=1000px the columns become display:contents so all four blocks join ONE shared grid — but grid auto-placement is ROW-MAJOR over source order, which puts column A's card list beside column A's intro. Every block therefore needs an EXPLICIT grid-column/grid-row. Do not remove those four rules. ========================================================================== */ .ab-compare { display: grid; gap: 26px; border-top: 2px solid var(--hair-gold); padding-top: 30px; margin-top: 30px; } /* one card per line inside each half: compact rows, glowing icon left, statement right */ .ab-compare .ab-grid--3 { grid-template-columns: 1fr; gap: 14px; } .ab-compare .ab-card { display: flex; align-items: center; gap: 18px; padding: 18px 22px; } .ab-compare .ab-card__icon { margin-bottom: 0; flex-shrink: 0; } .ab-compare .ab-card p { font-size: 16px; line-height: 1.65; color: var(--ink); } /* inside a half-width column the sitewide 2-column prose split is wrong */ .ab-compare .ab-flow--wide { columns: 1; column-rule: none; } @media (min-width: 1000px) { .ab-compare { position: relative; grid-template-columns: 1fr 1fr; column-gap: 64px; row-gap: 0; } .ab-compare__col { display: contents; } /* children join the shared grid */ /* EXPLICIT placement — row alignment lives here, see the gotcha above */ .ab-compare__col--a > .ab-panel { grid-column: 1; grid-row: 1; } .ab-compare__col--b > .ab-panel { grid-column: 2; grid-row: 1; } .ab-compare__col--a > .ab-grid--3 { grid-column: 1; grid-row: 2; } .ab-compare__col--b > .ab-grid--3 { grid-column: 2; grid-row: 2; } .ab-compare .ab-panel { height: 100%; margin: 0; } /* equal-height intro row */ .ab-compare .ab-grid--3 { margin-top: 22px; align-content: start; } .ab-compare::after { /* centre gold divider */ content: ""; position: absolute; top: 30px; /* below the top rule's padding */ bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: var(--hair-gold); } } /* stacked: give the second column's intro panel breathing room */ @media (max-width: 999px) { .ab-compare .ab-panel { margin-bottom: 0; } .ab-compare .ab-grid--3 { margin-top: 8px; } } /* ============================================================================ 14. SPECTRUM TABLE (.ab-table--spectrum) ---------------------------------------------------------------------------- Column heads cycle six solid hues with white bold text. Usage: … */ .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; } /* ============================================================================ 15. EMBED FRAME (.ab-embed) ---------------------------------------------------------------------------- Browser-chrome card for a live tool or a third-party widget. The traffic lights in the bar are drawn in CSS — no markup, no images. Usage:

Embedded live from astrology.4ab.in.

========================================================================== */ .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 { /* the three traffic lights, one element */ 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__frame { height: 72vh; min-height: 420px; width: 100%; border: 0; background: var(--paper); } .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; } @media (max-width: 560px) { .ab-embed__frame { height: 64vh; } } /* ============================================================================ 16. THE DARK SHOWCASE STAGE (.ab-stage) ---------------------------------------------------------------------------- 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 two custom properties on one instance to change its mood. Blue/cyan accents live ONLY inside stage internals; the light page around it stays gold/navy editorial. Usage:

01Founded by …

Ventures

APRIL 2021
Delhi Home Tutor

SEARCH WEBSITEFOUNDER
DELHIHOMETUTOR.COM

--rail adds the gradient connecting rail + node dots where a sequence or succession genuinely exists. It is desktop-only (>=1101px). ========================================================================== */ .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); } .ab-stage::before, .ab-stage::after { /* the two mood glows */ 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. Solid rgba fallback FIRST; real glass only where backdrop-filter exists. Pair with .ab-card--interactive to arm the milky rim from section 7. -- */ .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 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; } } .ab-stage__name { font-family: var(--font-display); font-weight: 400; font-size: 23px; line-height: 1.25; color: #fff; margin: 0 0 12px; } /* the card's outbound line, pinned to the card foot above a hairline */ .ab-stage__link { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); font-family: var(--font-nav); font-size: 13.5px; font-weight: 600; letter-spacing: .04em; color: #7DD3FC; /* cyan accent — stage internals only */ text-decoration: none; transition: color .2s ease; } .ab-stage__link:hover, .ab-stage__link:focus-visible { color: #fff; } /* a light-ground logo needs a white tile to stay legible on the dark stage */ .ab-stage__logo { width: 78px; height: 78px; object-fit: contain; background: #FFFFFF; border: 1px solid rgba(255, 255, 255, .18); border-radius: 16px; padding: 10px; margin: 0 0 18px; display: block; } /* status badge on a stage card. Uses the dark orange pair CONSTANTLY, because the stage is dark in both themes — do not swap it to var(--grad-chip). */ .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); } .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 dot-pill rail, on-stage variant: outlined pills, hue dot inside, hues cycling the rail family blue -> cyan -> green (R4 still applies — a rail carries only its own block's options). */ .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; } /* ============================================================================ 17. SCROLL REVEAL & STAGGER ---------------------------------------------------------------------------- CONTENT IS VISIBLE BY DEFAULT. The hiding rule applies only once the page's script has successfully armed an IntersectionObserver and set `html.rv-armed`; the script must drop that class again if anything goes wrong. A reveal animation must never be able to leave the page blank. Usage:
…
…
(inside an .rv) Minimum arming script: if ('IntersectionObserver' in window) { document.documentElement.classList.add('rv-armed'); var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } }); }, { rootMargin: '0px 0px -10% 0px' }); document.querySelectorAll('.rv').forEach(function (n) { io.observe(n); }); setTimeout(function () { document.documentElement.classList.remove('rv-armed'); }, 4000); } ========================================================================== */ 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; } /* children cascade in 60ms apart, capped at 6 steps (360ms) */ 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; } } /* ============================================================================ 18. THE CREDIT FOOTER (.ab-credit) — R8 ---------------------------------------------------------------------------- Navy panel with a gold top hairline. Stacked and centred on phones, one centred row from 761px up. Usage:
DESIGNED BY Mr. Aniket BhardwajAll Rights Reserved © 2026 || V.1 ||AniketBhardwaj.Com
Bump the V.n stamp on every deploy. ========================================================================== */ .ab-credit { position: relative; margin-top: 90px; 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; } } /* ============================================================================ 19. OPTIONAL — HEADER, NAVIGATION & MOBILE DRAWER ---------------------------------------------------------------------------- Everything ABOVE this line is the design language and applies to any site. Everything BELOW is the reference header. Adopt it only if the site does not already have its own — but if you build your own drawer, R7 still binds: 3 tiles per row at BOTH levels · big icon above the label · NO caret on an item without a submenu · opening a parent changes only its COLOUR, never its size or position · the submenu opens FULL-WIDTH directly below its parent's row, with a gold separator under it. Breakpoints: full bar >=1620px · compact bar 1240-1619px · drawer <=1239.98px (the .98 closes the 1239.x hole against the 1240px tier). The nav needs ~30 lines of JS: toggle `.is-open` on `.nav` from the hamburger, and toggle `.is-open` on a `.nav__item--has-sub` when its link is tapped below 1240px. Keep `aria-expanded` in sync on both buttons. Markup skeleton:
Mr. Aniket Bhardwaj Educator • Researcher

Home

About

About

Employment

========================================================================== */ .site-header { background: var(--page-bg); border-bottom: 1px solid var(--line-soft); position: relative; z-index: 50; } .site-header__inner { /* wide enough that the full icon bar + theme toggle fit on one row */ max-width: 1560px; margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 112px; } .site-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; } /* the monogram is finished artwork with its own ring — no border-radius, border or background here (owner: no extra circle) */ .site-brand__mark { width: 62px; height: 62px; object-fit: cover; flex-shrink: 0; } .site-brand__text { display: flex; flex-direction: column; } .site-brand__name { font-family: var(--font-brand); font-size: 23px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; white-space: nowrap; color: var(--navy); } .site-brand__name b { font-weight: 700; color: var(--gold); } .site-brand__tagline { font-family: var(--font-brand); font-size: 12.5px; font-weight: 400; letter-spacing: 0.01em; white-space: nowrap; color: var(--muted); margin-top: 2px; } /* -- primary nav (desktop) -- */ .nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; flex-wrap: wrap; } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 7px; padding: 13px 13px; font-family: var(--font-nav); font-size: 16px; font-weight: 600; line-height: 1.25; color: var(--nav-c); text-decoration: none; background: none; border: 0; cursor: pointer; transition: color .18s ease; white-space: nowrap; } .nav__link:hover, .nav__link:focus-visible, .nav__item:hover > .nav__link, .nav__link[aria-current="page"] { color: var(--green-ink); } .nav__item--contact > .nav__link { color: var(--green-ink); } .nav__icon { width: 17px; height: 17px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: .85; transition: opacity .18s ease, transform .18s ease; } .nav__link:hover .nav__icon, .nav__item:hover > .nav__link .nav__icon, .nav__link[aria-current="page"] .nav__icon { opacity: 1; transform: translateY(-1px); } /* R7: the caret exists ONLY on an item that actually has a submenu */ .nav__caret { width: 10px; height: 10px; flex-shrink: 0; fill: currentColor; transition: transform .18s ease; } /* -- mega panels (desktop: hover / focus-within) -- */ .nav__mega { position: absolute; top: 100%; left: 0; background: var(--card); border-radius: 0 0 16px 16px; box-shadow: var(--shadow-lift); padding: 18px 20px 20px; min-width: 265px; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 60; } .nav__mega::before { /* fine gold top hairline */ content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent); } .nav__mega--right { left: auto; right: 0; } .nav__mega--right::before { background: linear-gradient(90deg, transparent, var(--gold)); } .nav__item--has-sub:hover > .nav__mega, .nav__item--has-sub:focus-within > .nav__mega, .nav__item--has-sub.is-open > .nav__mega { opacity: 1; visibility: visible; transform: translateY(0); } .nav__item--has-sub:hover > .nav__link .nav__caret { transform: rotate(180deg); } .nav__mega-title { margin: 0 0 10px; padding: 0 10px 10px; border-bottom: 1px solid var(--line-soft); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: var(--track-micro); text-transform: uppercase; color: var(--gold-ink); /* gold as text on a light card surface */ } .nav__mega-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(225px, 1fr); gap: 2px 10px; } .nav__mega--2 .nav__mega-grid { grid-template-columns: repeat(2, minmax(225px, 1fr)); } .nav__sublink { display: flex; align-items: center; gap: 12px; padding: 9px 10px; border-radius: 11px; font-family: var(--font-nav); font-size: 13.5px; font-weight: 500; line-height: 1.35; color: var(--ink); text-decoration: none; transition: color .15s ease, background .15s ease; } .nav__sublink:hover, .nav__sublink:focus-visible, .nav__sublink[aria-current="page"] { color: var(--navy); background: var(--paper); } .nav__mega-icon { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(201, 168, 76, .16), rgba(27, 42, 94, .07)); color: var(--navy); transition: background .18s ease, color .18s ease, transform .18s ease; } .nav__mega-icon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .nav__mega-icon svg .i-fill { fill: currentColor; stroke: none; } /* top-level items get one vivid hue each, in menu order. Extend or trim this list to match the site's own menu length; labels keep their nav colour. */ .nav__list > .nav__item:nth-child(1) > .nav__link .nav__icon { stroke: var(--hue-green); } .nav__list > .nav__item:nth-child(2) > .nav__link .nav__icon { stroke: var(--hue-blue); } .nav__list > .nav__item:nth-child(3) > .nav__link .nav__icon { stroke: var(--hue-orange); } .nav__list > .nav__item:nth-child(4) > .nav__link .nav__icon { stroke: var(--hue-purple); } .nav__list > .nav__item:nth-child(5) > .nav__link .nav__icon { stroke: var(--hue-gold); } .nav__list > .nav__item:nth-child(6) > .nav__link .nav__icon { stroke: var(--hue-teal); } .nav__list > .nav__item:nth-child(7) > .nav__link .nav__icon { stroke: var(--hue-rose); } .nav__list > .nav__item:nth-child(8) > .nav__link .nav__icon { stroke: var(--hue-cyan); } /* Sublinks cycle the same set: vivid icon + matching soft chip tint. Kept at (0,3,0) and declared BEFORE the hover rules below, so hover still wins and the gold-gradient white-icon takeover is unchanged. Applies on desktop AND in the phone drawer — one system. */ .nav__mega-grid > :nth-child(6n+1) .nav__mega-icon { background: var(--chip-1); color: var(--hue-gold); } .nav__mega-grid > :nth-child(6n+2) .nav__mega-icon { background: var(--chip-2); color: var(--hue-blue); } .nav__mega-grid > :nth-child(6n+3) .nav__mega-icon { background: var(--chip-3); color: var(--hue-green); } .nav__mega-grid > :nth-child(6n+4) .nav__mega-icon { background: var(--chip-4); color: var(--hue-purple); } .nav__mega-grid > :nth-child(6n+5) .nav__mega-icon { background: var(--chip-5); color: var(--hue-teal); } .nav__mega-grid > :nth-child(6n+6) .nav__mega-icon { background: var(--chip-6); color: var(--hue-rose); } .nav__sublink:hover .nav__mega-icon, .nav__sublink:focus-visible .nav__mega-icon, .nav__sublink[aria-current="page"] .nav__mega-icon { background: linear-gradient(135deg, var(--gold), #B08F35); color: #fff; transform: scale(1.06); } /* menu items get the SAME card hover set as the cards: 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; } } /* -- theme toggle: one button cycling light -> dark -> system. The icons are stacked and swapped by CSS, so no JS is needed to keep them in sync. -- */ .site-header__controls { display: flex; align-items: center; gap: 10px; order: 3; } .theme-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--card); color: var(--navy); cursor: pointer; transition: border-color .2s ease, color .2s ease, transform .2s ease; } .theme-toggle:hover { border-color: var(--gold); color: var(--gold-ink); /* icon is TYPE on a card surface -> ink token */ transform: translateY(-1px); } .theme-toggle svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .theme-toggle .ti-dark, .theme-toggle .ti-system { display: none; } :root[data-theme="dark"] .theme-toggle .ti-light { display: none; } :root[data-theme="dark"] .theme-toggle .ti-dark { display: block; } :root[data-theme="system"] .theme-toggle .ti-light, :root[data-theme="system"] .theme-toggle .ti-dark { display: none; } :root[data-theme="system"] .theme-toggle .ti-system { display: block; } /* -- hamburger (hidden on desktop) -- */ .nav-toggle { display: none; align-items: center; gap: 9px; background: none; border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 14px; font-family: var(--font-nav); font-size: 14px; font-weight: 600; color: var(--navy); cursor: pointer; } .nav-toggle__bars { position: relative; width: 18px; height: 2px; background: currentColor; border-radius: 2px; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } /* -- compact desktop tier: with an icon on every item plus the theme toggle the full bar needs ~1620px. Between 1240 and 1619 everything tightens just enough to stay on one row; below 1240 the hamburger takes over. -- */ @media (min-width: 1240px) and (max-width: 1619px) { .site-header__inner { gap: 16px; padding-inline: 18px; } .site-brand { gap: 11px; } .site-brand__mark { width: 54px; height: 54px; } .site-brand__name { font-size: 20px; } .site-brand__tagline { font-size: 11.5px; } .nav__link { padding: 13px 8px; font-size: 14.5px; gap: 5px; } .nav__icon { width: 15px; height: 15px; } .nav__caret { width: 9px; height: 9px; } } /* ---- the mobile drawer (R7) ---- Each
becomes display:contents so the parent tile and its mega
are grid items THEMSELVES. Parent tiles pack three 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 left. The
keeps its classes, so the JS (.is-open on the li) and the nth-child hue maps still work. RESOLVED: an earlier round used TWO tiles per row with 56px icon chips and 13px labels; the final owner round set THREE per row, 48px chips and 12.5px labels. Only the final values are kept here. */ @media (max-width: 1239.98px) { .site-header__inner { min-height: 0; padding: 14px 18px; flex-wrap: wrap; } .site-brand__mark { width: 52px; height: 52px; } .site-brand__name { font-size: 19px; } .site-brand__tagline { font-size: 11px; } .nav-toggle { display: inline-flex; } /* the drawer opens BELOW the theme/hamburger row, not between them */ .site-header__controls { order: 2; } .nav { order: 4; } .site-brand { flex: 1 1 auto; min-width: 0; } .nav { display: none; width: 100%; padding: 6px 0 14px; } .nav.is-open { display: block; } .nav__list { display: grid; grid-template-columns: repeat(3, 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: 12.5px; line-height: 1.3; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); } /* the item's icon becomes the tile chip itself: rounded square, soft coloured fill, the vivid stroke drawn inside it */ .nav__link > .nav__icon { width: 56px; height: 56px; padding: 13px; border-radius: 14px; opacity: 1; } /* tinted tile backgrounds (owner: "generic white nahi") — the same six card tints, so the drawer reads as part of the card system */ .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); } /* icon-chip fills follow each item's own hue (same map as the strokes) */ .nav__list > .nav__item:nth-child(1) > .nav__link .nav__icon { background: var(--chip-3); } .nav__list > .nav__item:nth-child(2) > .nav__link .nav__icon { background: var(--chip-2); } .nav__list > .nav__item:nth-child(3) > .nav__link .nav__icon { background: var(--chip-1); } .nav__list > .nav__item:nth-child(4) > .nav__link .nav__icon { background: var(--chip-4); } .nav__list > .nav__item:nth-child(5) > .nav__link .nav__icon { background: var(--chip-1); } .nav__list > .nav__item:nth-child(6) > .nav__link .nav__icon { background: var(--chip-5); } .nav__list > .nav__item:nth-child(7) > .nav__link .nav__icon { background: var(--chip-6); } .nav__list > .nav__item:nth-child(8) > .nav__link .nav__icon { background: var(--chip-5); } /* glow on hover/tap — the 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 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; /* 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 16px; margin-bottom: 6px; border-bottom: 2px solid var(--hair-gold); /* the gold separator, R7 */ } .nav__mega::before { display: none; } /* R7: tapping an open parent changes only 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; } /* submenu items are the SAME three-per-row icon tiles as the top level */ .nav__mega-grid, .nav__mega--2 .nav__mega-grid { grid-template-columns: repeat(3, 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: 12.5px; line-height: 1.3; border: 1px solid var(--line-soft); border-radius: 14px; background: var(--card-surface); height: 100%; } .nav__mega-icon { flex: none; width: 48px; height: 48px; border-radius: 14px; } .nav__mega-icon svg { width: 30px; height: 30px; } } /* -- 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. -- */ @media (max-width: 760px) { /* wrap stays ON so the open drawer can take its own line below */ .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; } .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 { display: none; } /* the word "Menu" */ .nav { flex: 1 0 100%; } /* the drawer alone may wrap */ /* 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 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; } } /* ============================================================================ 20. OPTIONAL — SITE INTEGRATION HOOKS ---------------------------------------------------------------------------- Only relevant on a site running the shared /root/ab-analytics.js visitor counter. Counting continues; the badge is hidden. !important IS REQUIRED here: the badge is appended at body end by a third-party script that sets its own inline display, and only !important beats an inline style. ========================================================================== */ #ab-visitor-counter { display: none !important; } /* ========================================================================== END OF @layer ab-design-system. NOTHING MAY BE ADDED BELOW THIS BRACE — an unlayered rule outranks every rule in the system and breaks the portability guarantee (see P1 at the top). ========================================================================== */ }
…