/** * AIRI ECOSYSTEM GLOBAL STYLESHEET (v2.0) * Canonical Design System for airi.foundation | aiready.sg | aifirstnation.org * * Canonical source: ~/Code/brand/css/airi-ecosystem-stylesheet-v*.css. * aiready.sg: this copy is BUNDLED in the airi plugin and enqueued site-wide * (Plugin::enqueue_brand_ecosystem) — do NOT also paste it into the Customizer. * airi.foundation + aifirstnation.org: still paste into Appearance → Customizer → * Additional CSS (they don't run the airi plugin). * * DESIGN PHILOSOPHY: * Strict monochrome palette — single red accent (#C00000) plus blacks, greys, * and off-whites. No teal, no purple, no coral, no orange. The restraint is * the brand: distinctive precisely because it doesn't look like every other * AI-themed website with the standard teal/purple/orange "vibrant" palette. * * CHANGELOG v2.0 patch (June 2026): * - ADDED to §16E: `.wp-block-llms-course-continue-button { margin-bottom: 32px }` * so the LifterLMS course-outline ("Mindset" …) doesn't crowd the Continue * button on course pages — balances the gap below the button with the ~32px * progress-bar block spacing above it. * * CHANGELOG v1.11 → v2.0 (June 2026, task-20260611-004 — HARMONIZATION): * - GOAL: make the three primary logged-in surfaces read as ONE brand — * FluentCommunity (community feed), LifterLMS Groups (group profile), and * the airi My-Dashboard ([airi_dashboard] / .airi-md). Today FC leaks a * coral accent + blue links/verified-check, and the three card/button * geometries drift because each plugin section (§3 / §16 / §17) applied the * --airi-* tokens slightly differently. v2.0 closes that gap WITHOUT * rewriting the working sections. * - ADDED a NEW final section, "§ UNIFIED COMPONENT CANON" (placed last so the * CSS cascade lets it win). It is an ADDITIVE OVERRIDE layer: for each * shared component (card / button / link / avatar / badge / typography / * page-bg) it writes ONE canon and maps all three surfaces to it, scoping * EVERY rule by a surface root — body.single-llms_group (LLMS Groups), * .fcom-app (FluentCommunity), .airi-md (airi My-Dashboard). The airi * dashboard's .airi-card is the REFERENCE; FC and LLMS are pulled toward it. * No new hex values — it consumes the existing --airi-* tokens only. * - FluentCommunity COLOUR is set in FC admin, NOT here. FC ships a Color * Schema editor (Settings → Customize → "Custom" schema, separate Light/Dark * tabs) exposing the full --fcom-* palette as colour pickers. Set the brand * values there (Link Color → #C00000 kills the blue links; Primary Button * Background → #C00000 kills the coral pill). The new section only handles * GEOMETRY + TYPOGRAPHY for FC, plus a thin --fcom-* var-rebind FALLBACK for * elements the admin panel can't reach. CSS harmonises LOOK, not LAYOUT — * the three column structures intentionally differ. * - ADDED the invite-button pin to §16L (the only in-place edit): a separate * ASE JS snippet relocates #llms-group-invite-members into an * .airi-invite-row at the top of the Groups sidebar; v2.0 styles that row so * the relocated "Invite Members" button is full-width and pinned. * - PRESERVED §14 / §15 / §16A–K / §17 byte-for-byte (no in-place edits except * the §16L invite-row pin) to avoid regressing working surfaces. * * CHANGELOG v1.10 → v1.11 (June 2026): * - ADDED §16L (LifterLMS Groups profile page). Brand-styles the native group * page (body.single-llms_group): recolours the FontAwesome section icons * (Members, Pending Invitations, Course, Seats, Search) to --airi-red, and * converts the ghost "Manage" pencil (#llms-group-invite-members, which already * opens the Invite dialog) into a solid-red "Invite Members" button with a * user-plus icon so the label matches the action. All rules scoped to * body.single-llms_group. Targets LLMS Groups 1.3.x markup (fa fa-* icons); if a * future Groups update changes the template, re-check the selectors. * * CHANGELOG v1.9 → v1.10 (May 2026): * - FIXED §16F (LifterLMS progress bar). The previous rule put height: 8px + * overflow: hidden on the OUTER `.llms-progress` flex container — but that * container holds BOTH the `.progress__indicator` percentage label AND the * `.llms-progress-bar` track. Forcing 8px on the outer clipped the "X%" * text down to an unreadable strip (visible as the cut-off progress bar at * the top of lesson pages on aiready.sg). Rewrites the rule to: * (1) leave the outer container as a row-flex with auto height + visible * overflow (still resets native LLMS row-reverse + 1em height), * (2) move the 8px height + pill radius onto the actual `.llms-progress-bar` * track child where it belongs, * (3) reset the indicator's native float + restyle as an inline label. * No new selectors — same scope as before, just correct targets. Existing * v1.9 fill colour (--airi-red, with --airi-success on completion) preserved. * * CHANGELOG v1.8 → v1.9 (April 2026, task-20260425-004 follow-up): * - ADDED §3 .airi-card-auto modifier — overrides .airi-card's `height: 100%` * so a stand-alone card shrink-wraps its content instead of stretching to * fill its parent's full height. Use when the card is NOT in an equal- * height grid row (e.g., login panel, single feature box). Without this, * wrapping the LLMS login form in `.airi-card` made the card extend full * viewport height with the form sitting in the top-left and a sea of * empty space below. Apply by adding both classes on the Kadence wrapper: * `.airi-card .airi-card-auto`. * * CHANGELOG v1.7 → v1.8 (April 2026, task-20260425-004 follow-up): * - HARDENED 16K de-card on LLMS login wrapper + form. v1.7 just removed * the card rule, assuming nothing else would re-apply card visuals. The * outer card kept rendering (Kadence wrap or LLMS default). v1.8 now * explicitly zeroes out background, border, box-shadow, border-radius, * padding, and max-width on .llms-person-login-form-wrapper / * .llms-new-person-form-wrapper / form.llms-login / form.llms-new-account- * form using !important — defensively beats any other source of card * styling. Apply card visuals on a Kadence wrapper outside the form. * - WIDENED 16K per-field flex rule to match the structural selector * `.llms-form-fields > .llms-form-field` instead of the .type-{email| * password|text|tel|url} list. v1.7's narrow rule didn't match the * submit-button container (no .type-* class on it), so the Login button * rode next to the Password field at the flex default. v1.8 makes EVERY * direct child take its own full row; submit-button container also gets * its own row, with the button at natural inner width. Added * `width: 100% !important` belt-and-braces against the .llms-cols- rule * that sets `width: auto`. * * CHANGELOG v1.6 → v1.7 (April 2026, task-20260425-004): * - REMOVED 16K airi-card treatment on the LLMS form wrapper + form * (.llms-person-login-form-wrapper / .llms-new-person-form-wrapper / * form.llms-login / form.llms-new-account-form). The previous rule applied * card properties (background, border, box-shadow, border-radius, padding, * max-width) to BOTH the wrapper AND the nested form, producing a visible * double-card on aiready.sg. Card styling is now applied per-page in * Kadence Additional CSS so each surface picks its own treatment. * - CHANGED 16K per-field flex on `.llms-form-field.type-email/password/ * text/tel/url` from `1 1 260px` → `1 1 100%`. Each form field now takes * its own row at full width, and the submit button (in a .llms-form-field * without a .type-* class) lands on its own row at natural width — fixes * the "Email Address full-width / Password short with Login button next * to it" misalignment. * - The standalone `.airi-card { ... }` rule (§3) is unchanged — still used * by Kadence info-boxes, dashboard cards, and other ecosystem surfaces. * * CHANGELOG v1.5 → v1.6 (April 2026): * - ADDED 16K (LifterLMS login & account forms): Brand-aligned styling for * the [lifterlms_my_account] logged-out login form and the standalone * [lifterlms_login] / [lifterlms_registration] shortcodes. Covers form * wrapper width, field inputs (brand border + red focus ring), labels, * required-asterisk in red, Show-Password toggle, submit button (matches * 16E primary action), Remember-me inline checkbox + label, and the * Lost-password link. Submit row lays out Login button + Remember me + * Lost password on ONE line with proper baseline alignment; stacks * cleanly on mobile (max 640px) with full-width submit. Overrides LLMS * 12-column float-grid (.llms-cols-6 / .llms-cols-3 / .llms-cols-last * plus .clear float-clear divs) with flexbox so the row layout * is predictable. Targets LLMS-actual class names: .llms-field-input * for inputs, .llms-visibility-toggle .llms-button-plain for the * Show-Password toggle, .llms-form-field.type-html .llms-description a * for the Lost-password link (confirmed against rendered output). * Fixes the layout misalignment exposed when ASE Pro was deactivated * on aiready.sg — LLMS's form previously had no project-level brand * styling and was falling back to LLMS plugin defaults. * * CHANGELOG v1.4 → v1.5 (April 2026): * - UPDATED 14H (FluentForms navigation buttons): Make the [Next] button * visually dominant as the primary CTA (filled red), and restyle the * [Previous] button to a brand-aligned outline (white bg, red border, * red text). Previous was previously styled as neutral grey outline — * it now reads as an inverse of the primary, so the visual hierarchy * between "go forward" and "go back" is unmistakable. * - Previous button hover now inverts to solid red (previews the active * state) rather than just darkening the grey border. * - EXPANDED selector coverage to handle every FluentForms class naming * variant across versions: `.ff-btn-next` / `.ff_btn_next` / * `.ff_btn_back` / `.ff_btn_prev` / `[class*="ff_btn_next"]` / * `[class*="ff-btn-next"]`. Previous version under-matched, leaving * buttons in the plugin default on some form renders. * * CHANGELOG v1.3 → v1.4 (April 2026): * - ADDED 14G-FIX: Checkbox reset — excludes checkboxes from radio card * styling using :has(input[type="checkbox"]). Fixes T&C and newsletter * opt-in checkboxes rendering as radio cards on registration forms. * - ADDED 15B: pAIRI results page styles — .pairi-results, .pairi-grid, * .pairi-reco, .pairi-buttons, .pairi-btn, .pairi-note with responsive * breakpoints. Supports NinjaCharts radar + NinjaTables pillar breakdown. * - FIXED: .ninja_table_wrapper .footable tbody td — added !important to * color rule to override NinjaTables built-in white text on dark themes. * * CHANGELOG v1.2 → v1.3: * - REORDERED: most-used utilities now sit at the top of the file for faster * reference while building pages. New top-of-file order: * 1. Hero utilities (was Section 10) * 2. Info Boxes (was Sections 2 + 2b — now consolidated) * 3. Cards (was Section 2) * 4. Callouts (was Section 3) * 5. Tags / Pills / Badges / Level Icons / Level Rows * 6. Tables (was Section 4) * 7. Checklist * 8. Progress bars * 9. Credibility / stats row * 10. Section utilities (was Section 16) * 11. Dividers * 12. Link & button utilities * 13. Kadence Form styling * Plugin overrides (less frequently touched) moved below: * 14. FluentForms assessment styling * 15. NinjaTables / NinjaCharts * 16. LifterLMS * 17. FluentCommunity * 18. Fluent Support * 19. Top utility bar (ecosystem nav) — set-once-and-forget * 20. Accessibility * 21. Print * - .airi-infobox: STRENGTHENED border (1.5px #D0D5DD, was 1px #E5E5E5) and * layered shadow (0.10 + 0.06, was single 0.04) so cards read distinctly * on white backgrounds. Hover state deepens both border and shadow. * - .airi-infobox: REMOVED duplicate definition (v1.2 had two competing * .airi-infobox rules — the weaker one was winning). * - .airi-infobox-shadow and .airi-infobox-flat variants strengthened to * match the new baseline. * * CHANGELOG v1.1 → v1.2 (preserved for reference): * - PALETTE: switched to pure monochrome — #C00000 red, #1A1A1A black, * greys (#404040 / #6B6B6B / #999999), off-whites (#F2F2F2 / #F9F9F9) * - REMOVED all teal, purple, orange, coral, and green-as-accent colours * (success green retained ONLY for completion checkmarks/notices) * - Pillar colours are now monochrome — P1 red, P2–P5 graduated greys * - Maturity level colours are monochrome — L2 red (success target), others * in graduated greys from light (L0) to dark (L4) * - REWROTE FluentForms section: card-style radio options, proper pillar * teaching callouts, dimension labels, welcome step treatment, form * container, custom radio circles, navigation bar layout, brand-red * buttons (was default blue) * - REWROTE LifterLMS section: comprehensive course/lesson/quiz/dashboard * styling matching the assessment form treatment * - EXPANDED FluentCommunity section: comprehensive styling for spaces, * feeds, posts, comments, member cards, buttons, inputs, modals, badges * - Added .airi-welcome, .airi-dimension-label, .airi-dimension-name, * .airi-dimension-rationale, .airi-callout-engine, .airi-callout-success * utility classes for assessment forms * - Added .airi-assessment-page wrapper class for assessment landing pages */ /* ========================================================================== 0. CSS CUSTOM PROPERTIES (Design Tokens) — MONOCHROME ========================================================================== */ :root { /* --- CORE BRAND PALETTE --- */ --airi-red: #C00000; --airi-red-hover: #9B0000; /* --- BLACK & GREY SCALE --- */ --airi-black: #1A1A1A; --airi-text-strong: #404040; --airi-text-medium: #6B6B6B; --airi-text-subtle: #999999; /* --- BACKGROUNDS --- */ --airi-white: #FFFFFF; --airi-bg-lighter: #F9F9F9; --airi-bg-subtle: #F2F2F2; --airi-border: #E5E5E5; /* --- LEGACY ALIASES (for backward compat with v1.1 selectors) --- */ --airi-navy: var(--airi-black); --airi-navy-light: var(--airi-text-strong); --airi-grey: var(--airi-text-medium); --airi-grey-light: var(--airi-text-subtle); --airi-grey-line: var(--airi-border); --airi-medium: var(--airi-text-medium); /* --- MATURITY LEVEL COLORS (monochrome — L2 is the only red) --- */ --airi-level-l0: #D9D9D9; --airi-level-l1: #B0B0B0; --airi-level-l2: #C00000; --airi-level-l3: #6B6B6B; --airi-level-l4: #1A1A1A; /* --- PILLAR COLORS (monochrome) --- */ --airi-pillar-p1: #C00000; --airi-pillar-p2: #1A1A1A; --airi-pillar-p3: #404040; --airi-pillar-p4: #6B6B6B; --airi-pillar-p5: #999999; /* --- FUNCTIONAL NOTICE COLORS --- */ --airi-success: #2E7D32; --airi-success-bg: #F1F8F2; --airi-alert: var(--airi-red); --airi-alert-bg: #FCEFEF; --airi-warning: #404040; --airi-info: #6B6B6B; /* --- STRUCTURAL VARIABLES --- */ --airi-radius: 8px; --airi-radius-lg: 12px; --airi-radius-sm: 4px; --airi-radius-pill: 20px; --airi-shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.04); --airi-shadow: 0 4px 16px rgba(26, 26, 26, 0.08); --airi-shadow-hover: 0 8px 24px rgba(26, 26, 26, 0.12); --airi-transition: all 0.25s ease-in-out; --airi-max-width: 1200px; } /* ########################################################################## ## TIER 1: MOST-USED UTILITIES (page building) ## ########################################################################## */ /* ========================================================================== 1. HERO UTILITIES ========================================================================== */ /* --- Top-of-page hero headline (one per page, sits above .airi-hero-headline in hierarchy) --- */ .airi-hero-header-headline { font-size: 3.25rem; font-weight: 800; color: var(--airi-black); line-height: 1.1; margin-bottom: 16px; } @media (max-width: 767px) { .airi-hero-header-headline { font-size: 2.25rem; } } .airi-hero-label { display: inline-block; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--airi-red); margin-bottom: 12px; } .airi-hero-headline { font-size: 2.5rem; font-weight: 800; color: var(--airi-black); line-height: 1.15; margin-bottom: 16px; } .airi-hero-subheadline { font-size: 1.15rem; color: var(--airi-text-medium); line-height: 1.6; } @media (max-width: 767px) { .airi-hero-headline { font-size: 1.75rem; } .airi-hero-subheadline { font-size: 1rem; } } /* ========================================================================== 2. INFO BOXES (Standalone container card) Apply 'airi-infobox' to Kadence Info Boxes used for contact methods, feature lists, "what you get" sections, etc. The icon is the only thing you change per use case. Heading is optional — works with icon+heading+ text, icon+text, or icon+heading. ========================================================================== */ .airi-infobox { background-color: var(--airi-white) !important; border: 1px solid var(--airi-border) !important; border-radius: var(--airi-radius-lg) !important; box-shadow: var(--airi-shadow) !important; padding: 28px 32px !important; margin: 16px 0 !important; height: auto !important; transition: var(--airi-transition); } .airi-infobox:hover { box-shadow: var(--airi-shadow-hover) !important; transform: translateY(-2px); } /* Kill Kadence's internal Info Box wrapper backgrounds/borders/padding that create the nested-box effect. */ .airi-infobox .kt-blocks-info-box-link-wrap, .airi-infobox .kt-blocks-info-box-text-wrap, .airi-infobox .kt-infobox-wrap, .airi-infobox .kadence-info-box-wrap { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; } /* Variant: shadow-only, no border */ .airi-infobox-shadow { border: none !important; box-shadow: 0 6px 20px rgba(26, 26, 26, 0.12), 0 2px 4px rgba(26, 26, 26, 0.06) !important; } .airi-infobox-shadow:hover { box-shadow: 0 10px 28px rgba(26, 26, 26, 0.16), 0 3px 6px rgba(26, 26, 26, 0.08) !important; } /* Variant: completely flat (off-white background, no border or shadow) */ .airi-infobox-flat { background-color: var(--airi-bg-lighter) !important; border: none !important; box-shadow: none !important; } .airi-infobox-flat:hover { box-shadow: none !important; transform: none; } @media (max-width: 767px) { .airi-infobox { padding: 24px 20px !important; } } /* ========================================================================== 3. CARDS ========================================================================== */ .airi-card { background-color: var(--airi-white); border-radius: var(--airi-radius); box-shadow: var(--airi-shadow); border: 1px solid var(--airi-border); padding: 24px 18px; transition: var(--airi-transition); height: 100%; } .airi-card:hover { box-shadow: var(--airi-shadow-hover); transform: translateY(-2px); } .airi-card-top-red { border-top: 4px solid var(--airi-red) !important; } .airi-card-top-black { border-top: 4px solid var(--airi-black) !important; } .airi-card-top-strong { border-top: 4px solid var(--airi-text-strong) !important; } .airi-card-top-medium { border-top: 4px solid var(--airi-text-medium) !important; } .airi-card-top-subtle { border-top: 4px solid var(--airi-text-subtle) !important; } .airi-card-top-p1 { border-top: 4px solid var(--airi-pillar-p1) !important; } .airi-card-top-p2 { border-top: 4px solid var(--airi-pillar-p2) !important; } .airi-card-top-p3 { border-top: 4px solid var(--airi-pillar-p3) !important; } .airi-card-top-p4 { border-top: 4px solid var(--airi-pillar-p4) !important; } .airi-card-top-p5 { border-top: 4px solid var(--airi-pillar-p5) !important; } .airi-card-top-red a.kt-blocks-info-box-link, .airi-card-top-p1 a.kt-blocks-info-box-link { color: var(--airi-red) !important; } .airi-card-top-black a.kt-blocks-info-box-link, .airi-card-top-p2 a.kt-blocks-info-box-link { color: var(--airi-black) !important; } .airi-card-top-strong a.kt-blocks-info-box-link, .airi-card-top-p3 a.kt-blocks-info-box-link { color: var(--airi-text-strong) !important; } .airi-card-top-medium a.kt-blocks-info-box-link, .airi-card-top-p4 a.kt-blocks-info-box-link { color: var(--airi-text-medium) !important; } .airi-card-top-subtle a.kt-blocks-info-box-link, .airi-card-top-p5 a.kt-blocks-info-box-link { color: var(--airi-text-subtle) !important; } /* Variant: card sizes to content (NOT 100% of parent height). Use when the card stands alone (not in an equal-height grid row) — e.g., the LLMS login panel, a single info box on a page. Adding this class makes the card "shrink-wrap" the form/content instead of stretching down the page. */ .airi-card-auto { height: auto !important; align-self: flex-start; } .airi-card-target { border: 2px solid var(--airi-red) !important; position: relative; box-shadow: 0 0 0 4px rgba(192, 0, 0, 0.05); } .airi-card-target::after { content: '★ SUCCESS TARGET'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background-color: var(--airi-red); color: var(--airi-white); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.5px; padding: 2px 12px; border-radius: var(--airi-radius-pill); white-space: nowrap; } .airi-card-static:hover { box-shadow: var(--airi-shadow); transform: none; } @media (max-width: 767px) { .airi-card { padding: 24px 16px; } } /* ========================================================================== 4. CALLOUTS & DISCLAIMERS ========================================================================== */ .airi-callout { background-color: var(--airi-bg-lighter); border-left: 4px solid var(--airi-text-medium); padding: 24px; border-radius: 0 var(--airi-radius) var(--airi-radius) 0; margin: 24px 0; font-size: 0.95rem; color: var(--airi-black); } .airi-callout-red { border-left-color: var(--airi-red); } .airi-callout-black { border-left-color: var(--airi-black); } .airi-callout-strong { border-left-color: var(--airi-text-strong); } .airi-callout-info { border-left-color: var(--airi-text-medium); } .airi-callout-engine { background: rgba(192, 0, 0, 0.04); border-left-color: var(--airi-red); } .airi-callout-engine h4 { color: var(--airi-red); margin: 0 0 8px 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } .airi-callout-success { background: var(--airi-success-bg); border-left-color: var(--airi-success); } .airi-callout-success p, .airi-callout-success strong { color: #1B5E20; } /* ========================================================================== 5. MICRO-UI: TAGS, PILLS, BADGES & LEVEL ICONS — MONOCHROME ========================================================================== */ /* --- Pillar Pills (round badges showing "P1", "P2", etc.) --- */ .airi-pillar-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 16px; border-radius: 28px; color: var(--airi-white); font-weight: 700; font-size: 1.125rem; line-height: 1; flex-shrink: 0; } .airi-pillar-pill-p1 { background-color: var(--airi-pillar-p1); } /* Red */ .airi-pillar-pill-p2 { background-color: var(--airi-pillar-p2); } /* Darkest grey */ .airi-pillar-pill-p3 { background-color: var(--airi-pillar-p3); } /* Strong grey */ .airi-pillar-pill-p4 { background-color: var(--airi-pillar-p4); } /* Medium grey */ .airi-pillar-pill-p5 { background-color: var(--airi-pillar-p5); } /* Subtle grey */ /* Smaller variant for inline use */ .airi-pillar-pill-sm { min-width: 40px; height: 40px; font-size: 0.875rem; padding: 0 12px; border-radius: 20px; } .airi-pill { display: inline-block; background-color: var(--airi-bg-subtle); color: var(--airi-text-medium); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; padding: 4px 10px; border-radius: var(--airi-radius-pill); margin-bottom: 12px; } .airi-badge-red { background-color: var(--airi-red); color: white; } .airi-badge-black { background-color: var(--airi-black); color: white; } .airi-badge-strong { background-color: var(--airi-text-strong); color: white; } .airi-badge-medium { background-color: var(--airi-text-medium); color: white; } .airi-badge-subtle { background-color: var(--airi-text-subtle); color: white; } .airi-pill-l0 { background-color: var(--airi-level-l0); color: var(--airi-black); } .airi-pill-l1 { background-color: var(--airi-level-l1); color: var(--airi-white); } .airi-pill-l2 { background-color: var(--airi-level-l2); color: var(--airi-white); } .airi-pill-l3 { background-color: var(--airi-level-l3); color: var(--airi-white); } .airi-pill-l4 { background-color: var(--airi-level-l4); color: var(--airi-white); } .airi-level-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: 0.85rem; color: var(--airi-white); flex-shrink: 0; } .airi-level-icon-l0 { background-color: var(--airi-level-l0); color: var(--airi-black); } .airi-level-icon-l1 { background-color: var(--airi-level-l1); } .airi-level-icon-l2 { background-color: var(--airi-level-l2); } .airi-level-icon-l3 { background-color: var(--airi-level-l3); } .airi-level-icon-l4 { background-color: var(--airi-level-l4); } .airi-level-icon-lg { width: 48px; height: 48px; font-size: 1.1rem; } .airi-pillar-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 8px; vertical-align: middle; } .airi-pillar-dot-p1 { background-color: var(--airi-pillar-p1); } .airi-pillar-dot-p2 { background-color: var(--airi-pillar-p2); } .airi-pillar-dot-p3 { background-color: var(--airi-pillar-p3); } .airi-pillar-dot-p4 { background-color: var(--airi-pillar-p4); } .airi-pillar-dot-p5 { background-color: var(--airi-pillar-p5); } /* --- AIRI LEVEL ROW — Cosmetic version (works with Kadence Row Layout) --- */ .airi-level-row { background: var(--airi-white); border: 1px solid var(--airi-border); border-left: 4px solid var(--airi-border); border-radius: var(--airi-radius); padding: 28px 32px !important; margin-bottom: 16px !important; transition: var(--airi-transition); } /* Per-level left border colours */ .airi-level-row-l0 { border-left-color: var(--airi-level-l0) !important; } .airi-level-row-l1 { border-left-color: var(--airi-level-l1) !important; } .airi-level-row-l2 { border-left-color: var(--airi-level-l2) !important; } .airi-level-row-l3 { border-left-color: var(--airi-level-l3) !important; } .airi-level-row-l4 { border-left-color: var(--airi-level-l4) !important; } /* L2 SUCCESS TARGET highlight — distinct background tint */ .airi-level-row-target { background: rgba(192, 0, 0, 0.04) !important; border-color: rgba(192, 0, 0, 0.15) !important; border-left-color: var(--airi-red) !important; border-left-width: 4px !important; } /* Persona eyebrow (Bystander, Explorer, Practitioner, Builder, Pioneer) */ .airi-level-persona { font-size: 0.7rem !important; text-transform: uppercase !important; letter-spacing: 0.08em !important; color: var(--airi-text-medium) !important; font-weight: 600 !important; } /* Inline SUCCESS TARGET badge (use inside L2 row) */ .airi-success-badge { display: inline-block; background-color: var(--airi-red); color: var(--airi-white); font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 6px 14px; border-radius: var(--airi-radius-pill); margin-top: 12px; white-space: nowrap; } /* --- Step number icons (use for "Step 1 → 2 → 3 → ..." sequences) Colour names match .airi-badge-* convention in the same section --- */ .airi-step-icon { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; font-weight: 700; font-size: 0.85rem; color: var(--airi-white); flex-shrink: 0; } .airi-step-icon-red { background-color: var(--airi-red); } /* #C00000 */ .airi-step-icon-black { background-color: var(--airi-black); } /* #1A1A1A */ .airi-step-icon-strong { background-color: var(--airi-text-strong); } /* #404040 */ .airi-step-icon-medium { background-color: var(--airi-text-medium); } /* #6B6B6B */ .airi-step-icon-subtle { background-color: var(--airi-text-subtle); } /* #999999 */ /* Larger variant for prominent step indicators */ .airi-step-icon-lg { width: 48px; height: 48px; font-size: 1.1rem; } /* ========================================================================== 6. DATA TABLES ========================================================================== */ .airi-table table { width: 100%; border-collapse: collapse; background-color: var(--airi-white); border-radius: var(--airi-radius); overflow: hidden; box-shadow: var(--airi-shadow-sm); border: 1px solid var(--airi-border); } .airi-table th { background-color: var(--airi-black); color: var(--airi-white); font-weight: 600; padding: 16px 20px; text-align: left; font-size: 0.9rem; letter-spacing: 0.5px; } .airi-table td { padding: 16px 20px; border-bottom: 1px solid var(--airi-border); color: var(--airi-text-strong); font-size: 0.95rem; vertical-align: top; } .airi-table tr:last-child td { border-bottom: none; } .airi-table tr:hover td { background-color: var(--airi-bg-lighter); } .airi-table-striped tr:nth-child(even) td { background-color: var(--airi-bg-subtle); } .airi-table-compact th, .airi-table-compact td { padding: 10px 14px; font-size: 0.85rem; } @media (max-width: 767px) { .airi-table th, .airi-table td { padding: 12px 14px; font-size: 0.85rem; } } /* ========================================================================== 7. CHECKLIST ========================================================================== */ .airi-checklist { list-style: none; padding-left: 0; } .airi-checklist li { position: relative; padding-left: 32px; margin-bottom: 16px; color: var(--airi-text-strong); line-height: 1.5; } .airi-checklist li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--airi-red); font-weight: bold; font-size: 1.2rem; } .airi-checklist-black li::before { color: var(--airi-black); } /* ========================================================================== 8. PROGRESS BARS ========================================================================== */ .airi-progress-bar { width: 100%; height: 8px; background-color: var(--airi-bg-subtle); border-radius: 4px; overflow: hidden; margin: 8px 0; } .airi-progress-fill { height: 100%; border-radius: 4px; background-color: var(--airi-red); transition: width 0.5s ease-in-out; } .airi-progress-bar-lg { height: 12px; } .airi-progress-fill-complete { background-color: var(--airi-success); } /* ========================================================================== 9. CREDIBILITY BAR (stats row) ========================================================================== */ .airi-stats-row { background-color: var(--airi-bg-subtle) !important; padding: 32px 0; } @media (min-width: 768px) { .airi-stats-row .wp-block-kadence-column:not(:last-child) { border-right: 1px solid var(--airi-border); } } .airi-stat-number { font-weight: 800; color: var(--airi-black); font-size: 2.25rem; line-height: 1.1; margin-bottom: 4px; } .airi-stat-label { color: var(--airi-text-medium); font-size: 0.9rem; } @media (max-width: 767px) { .airi-stats-row { padding: 24px 0; } .airi-stat-number { font-size: 1.75rem; } .airi-stats-row .wp-block-kadence-column { margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--airi-border); } .airi-stats-row .wp-block-kadence-column:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; } } /* ========================================================================== 10. SECTION UTILITIES ========================================================================== */ .airi-bg-subtle { background-color: var(--airi-bg-subtle) !important; } .airi-bg-lighter { background-color: var(--airi-bg-lighter) !important; } .airi-bg-black, .airi-bg-navy { background-color: var(--airi-black) !important; color: var(--airi-white) !important; } .airi-bg-black h2, .airi-bg-black h3, .airi-bg-black p, .airi-bg-navy h2, .airi-bg-navy h3, .airi-bg-navy p { color: var(--airi-white) !important; } .airi-bg-black p, .airi-bg-navy p { color: rgba(255, 255, 255, 0.85) !important; } .airi-section-padding { padding: 64px 0; } @media (max-width: 767px) { .airi-section-padding { padding: 40px 0; } } .airi-content-narrow { max-width: 720px; margin-left: auto; margin-right: auto; } /* ========================================================================== 11. DIVIDERS & SEPARATORS ========================================================================== */ .airi-divider { border: none; border-top: 1px solid var(--airi-border); margin: 32px 0; } .airi-divider-thick { border-top-width: 2px; } /* ========================================================================== 12. LINK & BUTTON UTILITIES ========================================================================== */ .airi-link-arrow { color: var(--airi-red); font-weight: 600; text-decoration: none; transition: var(--airi-transition); } .airi-link-arrow::after { content: ' →'; } .airi-link-arrow:hover { color: var(--airi-red-hover); } .airi-link-arrow-black { color: var(--airi-black); } .airi-link-arrow-black:hover { color: var(--airi-text-strong); } /* ========================================================================== 13. KADENCE FORM STYLING (NOT FluentForms — see Section 14) ========================================================================== */ .airi-form-wrapper input[type="text"], .airi-form-wrapper input[type="email"], .airi-form-wrapper input[type="tel"], .airi-form-wrapper input[type="url"], .airi-form-wrapper input[type="number"], .airi-form-wrapper textarea, .airi-form-wrapper select { background-color: var(--airi-white); border: 1.5px solid var(--airi-border); border-radius: 6px; padding: 12px 16px; color: var(--airi-black); width: 100%; font-size: 0.95rem; transition: var(--airi-transition); } .airi-form-wrapper input:focus, .airi-form-wrapper textarea:focus, .airi-form-wrapper select:focus { border-color: var(--airi-red); outline: none; box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.10); } .airi-form-wrapper label { font-weight: 600; color: var(--airi-black); font-size: 0.9rem; margin-bottom: 6px; display: block; } .airi-form-wrapper .kb-form-field { margin-bottom: 20px; } .airi-form-wrapper .kb-forms-submit, .airi-form-wrapper button[type="submit"] { background-color: var(--airi-red) !important; color: var(--airi-white) !important; border: none !important; border-radius: 6px !important; padding: 14px 32px !important; font-weight: 600 !important; font-size: 1rem !important; cursor: pointer; transition: var(--airi-transition); } .airi-form-wrapper .kb-forms-submit:hover, .airi-form-wrapper button[type="submit"]:hover { background-color: var(--airi-red-hover) !important; } /* ########################################################################## ## TIER 2: PLUGIN-SPECIFIC OVERRIDES (less frequently touched) ## ########################################################################## */ /* ========================================================================== 14. FLUENTFORMS ASSESSMENT STYLING (aiready.sg only) ========================================================================== */ /* --- 14A. FORM CONTAINER --- */ .airi-assessment-page .entry-content > .ff_form_instance, .airi-assessment-page .ff_form_instance { max-width: 760px; margin: 0 auto; background: var(--airi-white); border-radius: var(--airi-radius-lg); box-shadow: var(--airi-shadow); padding: 40px 48px; } .fluentform .ff-step-header, .fluentform .ff_step_progress_label { color: var(--airi-text-medium) !important; font-size: 0.85rem !important; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; margin-bottom: 16px !important; } .fluentform .ff-step-header:empty, .fluentform .ff_step_progress_label:empty { display: none !important; } /* --- 14B. PROGRESS BAR --- */ .fluentform .ff-el-progress { background-color: var(--airi-bg-subtle) !important; border-radius: 3px !important; height: 6px !important; margin-bottom: 32px !important; overflow: hidden; } .fluentform .ff-el-progress-bar { background-color: var(--airi-red) !important; border-radius: 3px !important; transition: width 0.4s ease-in-out; height: 100% !important; } .fluentform .ff-el-progress-status { display: none !important; } .fluentform .ff-step-titles { display: flex !important; gap: 6px !important; list-style: none !important; padding: 0 !important; margin: 0 0 24px 0 !important; flex-wrap: wrap; } .fluentform .ff-step-titles li { flex: 1 1 auto !important; min-width: 24px; height: 4px !important; background: var(--airi-bg-subtle) !important; border-radius: 2px !important; color: transparent !important; font-size: 0 !important; padding: 0 !important; border: none !important; text-indent: -9999px; } .fluentform .ff-step-titles li.ff_active, .fluentform .ff-step-titles li.ff_completed { background: var(--airi-red) !important; color: transparent !important; } /* --- 14C. WELCOME STEP --- */ .fluentform .airi-welcome { text-align: center; padding: 24px 0 16px 0; border-left: none !important; background: transparent !important; } .fluentform .airi-welcome h2 { font-size: 1.875rem; color: var(--airi-black); margin-bottom: 8px; font-weight: 700; line-height: 1.2; } .fluentform .airi-welcome-meta { color: var(--airi-text-medium); font-size: 0.95rem; margin-bottom: 24px; font-weight: 500; } .fluentform .airi-welcome p:not(.airi-welcome-meta) { max-width: 560px; margin: 0 auto; color: var(--airi-text-strong); font-size: 1rem; line-height: 1.65; } /* --- 14D. PILLAR TEACHING CALLOUTS --- */ .fluentform .ff-el-html .airi-callout, .fluentform .airi-callout { background: var(--airi-bg-lighter); border-left: 4px solid var(--airi-text-medium); border-radius: var(--airi-radius); padding: 24px 28px; margin: 0 0 32px 0; } .fluentform .airi-callout h3 { font-size: 1.25rem; color: var(--airi-black); margin: 0 0 12px 0; font-weight: 700; } .fluentform .airi-callout h4 { font-size: 1rem; color: var(--airi-black); margin: 16px 0 8px 0; font-weight: 600; } .fluentform .airi-callout p { color: var(--airi-text-strong); font-size: 0.95rem; line-height: 1.65; margin: 0 0 12px 0; } .fluentform .airi-callout p:last-child { margin-bottom: 0; } .fluentform .airi-callout strong { color: var(--airi-black); } .fluentform .airi-callout-engine { background: rgba(192, 0, 0, 0.04); border-left-color: var(--airi-red); } .fluentform .airi-callout-engine h4 { color: var(--airi-red); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; } .fluentform .airi-callout-success { background: var(--airi-success-bg); border-left-color: var(--airi-success); } .fluentform .airi-callout-success p, .fluentform .airi-callout-success strong { color: #1B5E20; } /* --- 14E. DIMENSION LABELS --- */ .fluentform .airi-dimension-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--airi-red); font-weight: 700; margin: 32px 0 4px 0; background: transparent !important; border: none !important; padding: 0 !important; } .fluentform .airi-dimension-name { font-size: 1.125rem; color: var(--airi-black); font-weight: 700; margin: 0 0 8px 0; background: transparent !important; border: none !important; padding: 0 !important; } .fluentform .airi-dimension-rationale { font-size: 0.9rem; color: var(--airi-text-medium); line-height: 1.6; margin: 0 0 20px 0; background: transparent !important; border: none !important; padding: 0 !important; font-style: italic; } /* --- 14F. QUESTION LABELS --- */ .fluentform .ff-el-input--label label, .fluentform .ff-el-input--label > label { font-size: 1.0625rem !important; font-weight: 600 !important; color: var(--airi-black) !important; line-height: 1.45 !important; margin-bottom: 16px !important; display: block !important; } .fluentform .ff-el-is-required.asterisk-right label::after, .fluentform label .ff-el-is-required-asterisk { color: var(--airi-red) !important; font-weight: 400 !important; margin-left: 4px; } .fluentform .ff-el-help-message, .fluentform .ff-el-tooltip { font-size: 0.85rem !important; color: var(--airi-text-medium) !important; font-style: italic; margin-top: -8px !important; margin-bottom: 16px !important; } /* --- 14G. CARD-STYLE RADIO BUTTONS --- */ .fluentform .ff-el-form-check { display: block !important; margin: 0 0 10px 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } .fluentform .ff-el-form-check label.ff-el-form-check-label, .fluentform .ff-el-form-check label { display: flex !important; align-items: flex-start !important; gap: 14px !important; width: 100% !important; padding: 16px 18px !important; background: var(--airi-white) !important; border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius) !important; cursor: pointer !important; transition: var(--airi-transition); margin: 0 !important; font-weight: 400 !important; color: var(--airi-black) !important; font-size: 0.95rem !important; line-height: 1.5 !important; position: relative; } .fluentform .ff-el-form-check label:hover { border-color: var(--airi-text-subtle) !important; background: var(--airi-bg-lighter) !important; } .fluentform .ff-el-form-check input[type="radio"]:checked + label, .fluentform .ff-el-form-check input[type="radio"]:checked ~ label, .fluentform .ff-el-form-check label:has(input[type="radio"]:checked) { border-color: var(--airi-red) !important; background: rgba(192, 0, 0, 0.06) !important; } .fluentform .ff-el-form-check input[type="radio"] { position: absolute !important; opacity: 0 !important; pointer-events: none !important; width: 1px; height: 1px; margin: 0; } .fluentform .ff-el-form-check label::before { content: '' !important; flex-shrink: 0; display: inline-block; width: 20px; height: 20px; border: 2px solid var(--airi-text-subtle); border-radius: 50%; margin-top: 2px; background: var(--airi-white); transition: var(--airi-transition); box-sizing: border-box; } .fluentform .ff-el-form-check label:has(input[type="radio"]:checked)::before { border-color: var(--airi-red) !important; background: radial-gradient(circle, var(--airi-red) 0%, var(--airi-red) 40%, var(--airi-white) 45%, var(--airi-white) 100%); } .fluentform .ff-el-form-check input[type="radio"]::before, .fluentform .ff-el-form-check input[type="radio"]::after { display: none !important; } .fluentform .ff-el-form-check, .fluentform .ff-el-form-check::before { list-style: none !important; } .fluentform ul.ff-el-form-check-list { list-style: none !important; padding-left: 0 !important; margin: 0 !important; } .fluentform ul.ff-el-form-check-list li { list-style: none !important; background: none !important; padding-left: 0 !important; } .fluentform ul.ff-el-form-check-list li::before, .fluentform ul.ff-el-form-check-list li::marker { display: none !important; content: none !important; } /* --- 14G-FIX. CHECKBOX RESET (exclude from radio card styling) --- */ .fluentform .ff-el-form-check:has(input[type="checkbox"]) label { display: inline-flex !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; gap: 8px !important; font-size: 0.9rem !important; align-items: center !important; } .fluentform .ff-el-form-check:has(input[type="checkbox"]) label::before { display: none !important; } .fluentform .ff-el-form-check:has(input[type="checkbox"]) label:hover { background: transparent !important; border: none !important; } .fluentform .ff-el-form-check:has(input[type="checkbox"]) input[type="checkbox"] { position: static !important; opacity: 1 !important; width: 18px !important; height: 18px !important; pointer-events: auto !important; margin: 0 !important; accent-color: var(--airi-red); } /* --- 14H. NAVIGATION BUTTONS --- */ .fluentform .ff-el-group.ff-text-right, .fluentform .step-nav, .fluentform .ff_nav_btns { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 32px !important; padding-top: 24px !important; border-top: 1px solid var(--airi-border); gap: 12px; flex-wrap: wrap; } /* NEXT + SUBMIT — filled red primary (main theme CTA). Broad selector coverage because FluentForms uses different class names across versions (hyphenated `ff-btn-next`, underscored `ff_btn_next`, plus `[class*="..."]` fallbacks). */ .fluentform .ff-btn-submit, .fluentform .ff-btn.ff-btn-submit, .fluentform .ff_btn_style.ff-btn-submit, .fluentform .ff-btn-next, .fluentform button.ff_btn_next, .fluentform button[class*="ff_btn_next"], .fluentform button[class*="ff-btn-next"], .fluentform button[type="submit"] { background-color: var(--airi-red) !important; background-image: none !important; border: 2px solid var(--airi-red) !important; color: var(--airi-white) !important; border-radius: var(--airi-radius) !important; padding: 12px 28px !important; font-size: 0.95rem !important; font-weight: 600 !important; transition: var(--airi-transition); cursor: pointer; box-shadow: none !important; text-transform: none !important; } .fluentform .ff-btn-submit:hover, .fluentform .ff-btn.ff-btn-submit:hover, .fluentform .ff_btn_style.ff-btn-submit:hover, .fluentform .ff-btn-next:hover, .fluentform button.ff_btn_next:hover, .fluentform button[class*="ff_btn_next"]:hover, .fluentform button[class*="ff-btn-next"]:hover, .fluentform button[type="submit"]:hover { background-color: var(--airi-red-hover) !important; border-color: var(--airi-red-hover) !important; color: var(--airi-white) !important; transform: translateY(-1px); box-shadow: var(--airi-shadow-sm) !important; } /* PREVIOUS — brand-aligned outline (white bg, red border, red text). Broad selector coverage — same reasoning as above. Override `.ff-btn-secondary` because FluentForms assigns it to the Previous button on some step configurations. */ .fluentform .ff-btn-prev, .fluentform button.ff_btn_back, .fluentform button[class*="ff_btn_back"], .fluentform button[class*="ff_btn_prev"], .fluentform button[class*="ff-btn-prev"], .fluentform .ff-btn-secondary { background-color: var(--airi-white) !important; background-image: none !important; color: var(--airi-red) !important; border: 2px solid var(--airi-red) !important; border-radius: var(--airi-radius) !important; padding: 12px 28px !important; font-size: 0.95rem !important; font-weight: 600 !important; transition: var(--airi-transition); cursor: pointer; box-shadow: none !important; text-transform: none !important; } .fluentform .ff-btn-prev:hover, .fluentform button.ff_btn_back:hover, .fluentform button[class*="ff_btn_back"]:hover, .fluentform button[class*="ff_btn_prev"]:hover, .fluentform button[class*="ff-btn-prev"]:hover, .fluentform .ff-btn-secondary:hover { background-color: var(--airi-red) !important; border-color: var(--airi-red) !important; color: var(--airi-white) !important; transform: translateY(-1px); box-shadow: var(--airi-shadow-sm) !important; } .fluentform .ff-save-resume-button, .fluentform .ff_save_progress_btn, .fluentform .ff-el-form-save-progress-btn { background: transparent !important; background-image: none !important; color: var(--airi-text-medium) !important; border: none !important; padding: 8px 12px !important; font-size: 0.875rem !important; font-weight: 500 !important; text-decoration: underline !important; text-decoration-color: var(--airi-text-subtle) !important; text-underline-offset: 3px; box-shadow: none !important; cursor: pointer; } .fluentform .ff-save-resume-button:hover, .fluentform .ff_save_progress_btn:hover { color: var(--airi-red) !important; text-decoration-color: var(--airi-red) !important; } /* --- 14I. TEXT INPUTS --- */ .fluentform .ff-el-input, .fluentform .ff-el-form-control, .fluentform input[type="text"], .fluentform input[type="email"], .fluentform input[type="url"], .fluentform input[type="password"], .fluentform select, .fluentform textarea { border-radius: var(--airi-radius) !important; border: 1.5px solid var(--airi-border) !important; padding: 12px 14px !important; font-size: 0.95rem !important; color: var(--airi-black) !important; background: var(--airi-white) !important; transition: var(--airi-transition); box-shadow: none !important; } .fluentform .ff-el-input:focus, .fluentform .ff-el-form-control:focus, .fluentform input:focus, .fluentform select:focus, .fluentform textarea:focus { border-color: var(--airi-red) !important; box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.10) !important; outline: none !important; } /* --- 14J. RESPONSIVE --- */ @media (max-width: 768px) { .airi-assessment-page .ff_form_instance { padding: 24px 20px; border-radius: var(--airi-radius); } .fluentform .airi-welcome h2 { font-size: 1.5rem; } .fluentform .airi-callout { padding: 18px 20px; } .fluentform .ff-el-form-check label { padding: 14px 16px !important; font-size: 0.9rem !important; } .fluentform .ff-el-input--label label { font-size: 1rem !important; } .fluentform .ff-el-group.ff-text-right, .fluentform .step-nav, .fluentform .ff_nav_btns { flex-direction: column-reverse; align-items: stretch !important; } .fluentform .ff-btn-submit, .fluentform .ff-btn-prev, .fluentform .ff-btn-next, .fluentform button.ff_btn_next, .fluentform button.ff_btn_back, .fluentform button[class*="ff_btn_next"], .fluentform button[class*="ff-btn-next"], .fluentform button[class*="ff_btn_back"], .fluentform button[class*="ff_btn_prev"], .fluentform button[class*="ff-btn-prev"], .fluentform .ff-btn-secondary { width: 100% !important; justify-content: center; } } /* Hide FluentForms step titles — use continuous progress bar instead */ .fluentform .ff-step-titles { display: none !important; } /* --- Progress bar: taller, with visible percentage text --- */ .fluentform .ff-el-progress { display: block !important; width: 100% !important; background-color: #F2F2F2 !important; border-radius: 4px !important; height: 28px !important; margin: 0 0 32px 0 !important; overflow: hidden !important; position: relative !important; } .fluentform .ff-el-progress-bar { display: flex !important; align-items: center !important; justify-content: flex-end !important; background-color: #C00000 !important; height: 100% !important; border-radius: 4px !important; transition: width 0.4s ease-in-out !important; padding: 0 10px !important; box-sizing: border-box !important; min-width: 40px !important; } .fluentform .ff-el-progress-bar span { display: inline-block !important; color: #FFFFFF !important; font-size: 0.75rem !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; } /* Keep the hidden step titles list hidden */ .fluentform .ff-el-progress-title, .fluentform ul.ff-el-progress-title { display: none !important; } /* ========================================================================== FluentForms — Nav Row + Save & Resume Button (v1.3 patch — COMPLETE) Place Save & Resume on the LEFT and Next on the RIGHT of the same nav row, both styled as ghost buttons, vertically aligned. ========================================================================== */ /* --- 1. Step nav row: flex, right-aligned (Next sits on the right) --- */ .fluentform .step-nav.ff_step_nav_last, .fluentform .step-nav, .fluentform .ff_nav_btns { display: flex !important; justify-content: flex-end !important; align-items: center !important; gap: 12px !important; margin-top: 0 !important; padding-top: 24px !important; border-top: 1px solid #E5E5E5 !important; min-height: 72px !important; position: relative !important; } /* Hide Save & Resume button — assessment is short enough not to need it */ .fluentform .ff_submit_btn_wrapper_custom, .fluentform .ff-btn-save-progress { display: none !important; } /* ========================================================================== 15. NINJATABLES & NINJACHARTS OVERRIDES (aiready.sg only) ========================================================================== */ .ninja_table_wrapper .footable { border-radius: var(--airi-radius) !important; overflow: hidden; box-shadow: var(--airi-shadow-sm); } .ninja_table_wrapper .footable thead th { background-color: var(--airi-black) !important; color: var(--airi-white) !important; font-weight: 600; font-size: 0.9rem; } .ninja_table_wrapper .footable tbody td { padding: 14px 18px !important; border-bottom: 1px solid var(--airi-border) !important; font-size: 0.95rem; color: var(--airi-text-strong) !important; } .ninja-charts-container { max-width: 500px; margin: 0 auto; padding: 20px; } /* --- 15B. pAIRI RESULTS PAGE --- */ .pairi-results { max-width: 900px; margin: 0 auto; padding: 0 24px; } .pairi-results h3 { font-size: 22px; font-weight: 700; color: var(--airi-black); margin-bottom: 16px; } .pairi-grid { display: grid; grid-template-columns: 55% 45%; gap: 48px; align-items: start; } .pairi-reco { background: var(--airi-bg-subtle); border-radius: var(--airi-radius); padding: 48px 32px; margin-top: 40px; } .pairi-reco .callout { background: var(--airi-white); border-left: 4px solid var(--airi-red); padding: 20px 24px; border-radius: 0 var(--airi-radius) var(--airi-radius) 0; margin-bottom: 24px; } .pairi-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 24px; } .pairi-btn { display: block; padding: 14px 28px; border-radius: 6px; font-weight: 600; font-size: 16px; text-decoration: none; text-align: center; transition: var(--airi-transition); } .pairi-btn-primary { background: var(--airi-red); color: var(--airi-white); border: 2px solid var(--airi-red); } .pairi-btn-primary:hover { background: var(--airi-red-hover); border-color: var(--airi-red-hover); color: var(--airi-white); } .pairi-btn-outline { background: transparent; color: var(--airi-red); border: 2px solid var(--airi-red); } .pairi-btn-outline:hover { background: var(--airi-red); color: var(--airi-white); } .pairi-note { text-align: center; font-size: 0.85rem; color: var(--airi-text-medium); margin-top: 8px; } .pairi-note .target { color: var(--airi-red); font-weight: 700; } @media (max-width: 768px) { .pairi-grid { grid-template-columns: 1fr; gap: 32px; } .pairi-buttons { grid-template-columns: 1fr; } .pairi-reco { padding: 32px 20px; } } /* ========================================================================== 16. LIFTERLMS FRONT-END OVERRIDES (aiready.sg only) ========================================================================== */ /* --- 16A. CONTAINER --- */ .llms-course, .llms-lesson, .single-llms_membership { color: var(--airi-black); } .llms-course .entry-title, .llms-lesson .entry-title { color: var(--airi-black); font-weight: 700; line-height: 1.2; } /* --- 16B. COURSE CATALOG --- */ .llms-loop-list .llms-loop-item, .llms-loop-item .llms-loop-item-content { background: var(--airi-white); border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius) !important; box-shadow: var(--airi-shadow-sm) !important; transition: var(--airi-transition); } .llms-loop-list .llms-loop-item:hover, .llms-loop-item .llms-loop-item-content:hover { border-color: var(--airi-text-subtle) !important; box-shadow: var(--airi-shadow) !important; transform: translateY(-2px); } /* --- 16C. SYLLABUS --- */ .llms-syllabus-wrapper { background: var(--airi-bg-lighter); border-radius: var(--airi-radius-lg); padding: 24px; margin: 24px 0; } .llms-section-title { color: var(--airi-black); font-size: 1.125rem; font-weight: 700; padding: 12px 0; border-bottom: 1.5px solid var(--airi-border); margin-bottom: 12px; } /* --- 16D. LESSON LIST ITEMS --- */ .llms-lesson-preview { background: var(--airi-white); border: 1.5px solid var(--airi-border); border-radius: var(--airi-radius); padding: 16px 20px; margin-bottom: 8px; transition: var(--airi-transition); } .llms-lesson-preview:hover { border-color: var(--airi-text-subtle); box-shadow: var(--airi-shadow-sm); } .llms-lesson-preview a.llms-lesson-link { color: var(--airi-black); text-decoration: none; font-weight: 600; display: flex; align-items: center; gap: 12px; } .llms-lesson-preview a.llms-lesson-link:hover { color: var(--airi-red); } .llms-lesson-complete-placeholder.is-complete, .llms-lesson-preview.is-complete, .llms-lesson-complete .llms-lesson-link::before { color: var(--airi-success) !important; } .llms-lesson-preview.is-complete .llms-lesson-link::before { content: "✓"; color: var(--airi-success); font-weight: 700; margin-right: 4px; } /* --- 16E. ACTION BUTTONS --- */ .llms-parent-course-link, .llms-lesson-button-wrapper { margin: 32px 0; } .llms-button-action, .llms-button-primary, button.llms-button-action, a.llms-button-action { background-color: var(--airi-red) !important; border: none !important; border-color: var(--airi-red) !important; color: var(--airi-white) !important; border-radius: var(--airi-radius) !important; padding: 12px 28px !important; font-size: 0.95rem !important; font-weight: 600 !important; transition: var(--airi-transition); text-decoration: none !important; display: inline-block; } .llms-button-action:hover, .llms-button-primary:hover { background-color: var(--airi-red-hover) !important; border-color: var(--airi-red-hover) !important; transform: translateY(-1px); box-shadow: var(--airi-shadow-sm) !important; } .llms-button-secondary { background-color: transparent !important; color: var(--airi-text-medium) !important; border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius) !important; padding: 12px 28px !important; font-weight: 600 !important; text-decoration: none !important; transition: var(--airi-transition); } .llms-button-secondary:hover { border-color: var(--airi-text-subtle) !important; color: var(--airi-black) !important; background: var(--airi-bg-lighter) !important; } /* Continue-button block (course page): breathing room below so the course outline ("Mindset" …) doesn't crowd the button — matches the ~32px gap above. */ .wp-block-llms-course-continue-button { margin-bottom: 32px; } /* --- 16F. PROGRESS BAR --- LLMS native markup (3 layers, do NOT confuse them): .llms-progress ← OUTER flex container, holds indicator + bar .progress__indicator ← "X%" text label (floated right by default) .llms-progress-bar ← grey track (the actual bar) .progress-bar-complete ← red fill inside the track Style targets: - outer: row flex, auto height, visible overflow (do NOT clip — that would hide the percentage label, as v1.9 accidentally did) - bar: 8px tall pill, brand grey track - fill: red gradient (uses --airi-success on .is-complete) - indicator: small label, no float, sits to the right of the bar */ .llms-progress { display: flex !important; flex-direction: row !important; /* override LLMS native row-reverse */ align-items: center !important; gap: 12px !important; height: auto !important; /* override LLMS native 1em */ min-height: 24px !important; width: 100% !important; margin: 8px 0 !important; padding: 0 !important; overflow: visible !important; /* DO NOT clip — kills the % label */ line-height: 1.4 !important; background: transparent !important; /* track lives on the inner bar */ border-radius: 0 !important; box-sizing: border-box !important; } .llms-progress .llms-progress-bar, .llms-progress-inner { position: relative !important; top: 0 !important; /* override LLMS native top:0.3em */ order: 1 !important; /* bar on the LEFT */ flex: 1 1 auto !important; height: 8px !important; width: auto !important; min-width: 80px !important; background: var(--airi-bg-subtle) !important; border-radius: 999px !important; overflow: hidden !important; /* clip ONLY the bar, not the label */ } .llms-progress .progress-bar, .llms-progress .progress-bar-complete { height: 100% !important; background: var(--airi-red) !important; border-radius: 999px !important; transition: width 0.4s ease-in-out !important; } .llms-progress.is-complete .progress-bar-complete, .llms-progress.is-complete .llms-progress-inner { background: var(--airi-success) !important; } .llms-progress .progress__indicator { float: none !important; /* override LLMS native float:right */ order: 2 !important; /* label on the RIGHT */ flex: 0 0 auto !important; height: auto !important; line-height: 1.4 !important; margin: 0 !important; padding: 0 !important; font-size: 13px !important; font-weight: 600 !important; color: var(--airi-black) !important; white-space: nowrap !important; } /* --- 16G. QUIZZES --- */ .llms-quiz-wrapper { background: var(--airi-white); border-radius: var(--airi-radius-lg); box-shadow: var(--airi-shadow-sm); padding: 32px; } .llms-quiz-question, .llms-quiz-ui .llms-question-wrapper { border: 1px solid var(--airi-border) !important; border-bottom: 1px solid var(--airi-border); border-radius: var(--airi-radius) !important; padding: 24px !important; margin-bottom: 16px !important; } .llms-question-text { font-size: 1.0625rem; font-weight: 600; color: var(--airi-black); margin-bottom: 16px; } .llms-quiz-question .llms-choice { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; background: var(--airi-white); border: 1.5px solid var(--airi-border); border-radius: var(--airi-radius); margin-bottom: 8px; cursor: pointer; transition: var(--airi-transition); } .llms-quiz-question .llms-choice:hover { border-color: var(--airi-text-subtle); background: var(--airi-bg-lighter); } .llms-quiz-question .llms-choice.selected { border-color: var(--airi-red); background: rgba(192, 0, 0, 0.06); } .llms-quiz-question .llms-choice.is-correct { border-color: var(--airi-success); background: var(--airi-success-bg); } /* --- 16H. STUDENT DASHBOARD --- */ .llms-student-dashboard { color: var(--airi-black); } .llms-sd-section { background: var(--airi-white); border: 1.5px solid var(--airi-border); border-radius: var(--airi-radius-lg); padding: 24px; margin-bottom: 24px; box-shadow: var(--airi-shadow-sm); } .llms-sd-section .llms-sd-title, .llms-sd-section-title { color: var(--airi-black) !important; font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1.5px solid var(--airi-border); } .llms-sd-nav .llms-sd-link { color: var(--airi-text-medium); font-weight: 500; padding: 12px 16px; border-radius: var(--airi-radius); transition: var(--airi-transition); } .llms-sd-nav .llms-sd-link:hover, .llms-sd-nav .current .llms-sd-link { color: var(--airi-red); background: rgba(192, 0, 0, 0.06); } /* --- 16I. NOTICES --- */ .llms-notice { border-radius: var(--airi-radius); padding: 16px 20px; border-left: 4px solid; } .llms-notice.llms-success { background: var(--airi-success-bg); border-left-color: var(--airi-success); color: #1B5E20; } .llms-notice.llms-error { background: var(--airi-alert-bg); border-left-color: var(--airi-red); color: #6B1518; } .llms-notice.llms-info { background: var(--airi-bg-lighter); border-left-color: var(--airi-text-medium); color: var(--airi-text-strong); } /* --- 16J. CERTIFICATES --- */ .llms-certificate, .llms-certificate-container { border: 2px solid var(--airi-black) !important; border-radius: var(--airi-radius-lg) !important; padding: 32px; background: var(--airi-white); } /* --- 16K. LOGIN & ACCOUNT FORMS --- */ /* Breathing room below the hero header so "Login" doesn't hug the grey band */ .llms-student-dashboard, .llms-person-login-form-wrapper, .llms-new-person-form-wrapper { margin-top: 48px; } /* DEFENSIVE de-card treatment (v1.8). Explicitly ZERO out any background, border, shadow, padding, or max-width on the LLMS login wrapper + form. v1.7 just removed the card rule (assumed nothing else would re-apply it), but the outer card kept rendering on aiready.sg — could be Kadence row styling, a theme default, or LLMS itself. This rule wins by being maximally specific + !important. Card visuals belong on a user-chosen Kadence wrapper outside this form, NOT on these elements. */ .llms-person-login-form-wrapper, .llms-new-person-form-wrapper, form.llms-login, form.llms-new-account-form { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; max-width: none !important; } /* "Login" / "Register" / "Lost Password" section headings */ .llms-person-login-form-wrapper h2, .llms-new-person-form-wrapper h2, .llms-person-login-form-wrapper h3, .llms-new-person-form-wrapper h3, .llms-person-login-form-wrapper .llms-form-heading, .llms-new-person-form-wrapper .llms-form-heading { color: var(--airi-black); font-size: 1.5rem; font-weight: 700; margin-top: 0; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1.5px solid var(--airi-border); } /* Override LLMS's 12-col float grid — switch the whole fields container to flex */ .llms-person-login-form-wrapper .llms-form-fields, .llms-new-person-form-wrapper .llms-form-fields, form.llms-login .llms-form-fields, form.llms-new-account-form .llms-form-fields { display: flex !important; flex-wrap: wrap; gap: 16px 20px; align-items: flex-end; } /* Kill LLMS's per-field column widths + floats — flex handles sizing */ .llms-person-login-form-wrapper .llms-form-field[class*="llms-cols-"], .llms-new-person-form-wrapper .llms-form-field[class*="llms-cols-"], form.llms-login .llms-form-field[class*="llms-cols-"] { width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important; } /* Hide the float-clear divs LLMS emits between rows — flex doesn't need them */ .llms-person-login-form-wrapper .llms-form-fields > .clear, .llms-new-person-form-wrapper .llms-form-fields > .clear, form.llms-login .llms-form-fields > .clear, form.llms-new-account-form .llms-form-fields > .clear { display: none !important; } /* Every direct .llms-form-field child takes a full row (v1.8). v1.7 only matched .type-{email|password|...} which missed the submit-button container (it has no .type-* class), so the button rode next to the password field at the flex default. Matching the structural selector `.llms-form-fields > .llms-form-field` catches every child including the submit container — each gets its own row, fields align, button lands below at natural inner- button width (the button itself isn't 100%, only its container row is). */ .llms-person-login-form-wrapper .llms-form-fields > .llms-form-field, .llms-new-person-form-wrapper .llms-form-fields > .llms-form-field, form.llms-login .llms-form-fields > .llms-form-field, form.llms-new-account-form .llms-form-fields > .llms-form-field { flex: 1 1 100% !important; width: 100% !important; min-width: 0; } /* Inputs — LLMS uses .llms-field-input class (NOT just input[type]) */ .llms-field-input, .llms-form-field input[type="text"], .llms-form-field input[type="email"], .llms-form-field input[type="password"], .llms-form-field input[type="url"], .llms-form-field input[type="tel"] { width: 100%; padding: 10px 14px; border: 1.5px solid var(--airi-border); border-radius: var(--airi-radius); font-size: 1rem; color: var(--airi-black); background: var(--airi-white); transition: var(--airi-transition); box-shadow: none; line-height: 1.5; } .llms-field-input:focus, .llms-form-field input[type="text"]:focus, .llms-form-field input[type="email"]:focus, .llms-form-field input[type="password"]:focus, .llms-form-field input[type="url"]:focus, .llms-form-field input[type="tel"]:focus { border-color: var(--airi-red); outline: none; box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08); } /* Labels */ .llms-form-field > label { color: var(--airi-text-strong); font-weight: 600; font-size: 0.9375rem; margin-bottom: 6px; display: block; } /* Required asterisk in brand red */ .llms-required, .llms-form-field label .llms-required, .llms-form-field label abbr.required, .llms-form-field label .required { color: var(--airi-red); font-weight: 700; margin-left: 2px; text-decoration: none; } /* "Show Password" toggle — LLMS uses .llms-visibility-toggle wrapper */ .llms-visibility-toggle { margin-top: 6px; text-align: right; float: none; } .llms-visibility-toggle .llms-button-plain { background: transparent; border: none; color: var(--airi-text-medium); font-size: 0.875rem; font-weight: 500; padding: 2px 0; cursor: pointer; text-decoration: none; } .llms-visibility-toggle .llms-button-plain:hover, .llms-visibility-toggle .llms-button-plain:focus { color: var(--airi-red); text-decoration: none; background: transparent; } .llms-visibility-toggle .llms-button-plain .fa-eye, .llms-visibility-toggle .llms-button-plain .fa-eye-slash { margin-right: 4px; } /* Submit button — LLMS emits .llms-field-button.llms-button-action — 16E matches */ .llms-form-field.type-submit { flex: 0 0 auto !important; align-self: center !important; } .llms-form-field.type-submit .llms-field-button, .llms-form-field.type-submit button[type="submit"], form.llms-login button[type="submit"], form.llms-new-account-form button[type="submit"] { background-color: var(--airi-red) !important; border: none !important; color: var(--airi-white) !important; border-radius: var(--airi-radius) !important; padding: 12px 32px !important; font-size: 0.95rem !important; font-weight: 600 !important; cursor: pointer; transition: var(--airi-transition); min-width: 120px; text-decoration: none !important; line-height: 1.2; } .llms-form-field.type-submit .llms-field-button:hover, .llms-form-field.type-submit button[type="submit"]:hover, form.llms-login button[type="submit"]:hover, form.llms-new-account-form button[type="submit"]:hover { background-color: var(--airi-red-hover) !important; transform: translateY(-1px); box-shadow: var(--airi-shadow-sm) !important; } /* Remember-me — checkbox + label INLINE on same line (fixes label-below-checkbox bug) */ .llms-form-field.type-checkbox { flex: 0 0 auto !important; display: flex !important; align-items: center !important; align-self: center !important; gap: 8px !important; } .llms-form-field.type-checkbox input[type="checkbox"], .llms-form-field.type-checkbox input.llms-field-checkbox, input.llms-field-checkbox { margin: 0 !important; width: 16px !important; height: 16px !important; flex: 0 0 16px !important; accent-color: var(--airi-red); vertical-align: middle; float: none !important; display: inline-block !important; } .llms-form-field.type-checkbox > label, .llms-form-field.type-checkbox label[for] { margin: 0 !important; padding: 0 !important; font-weight: 400 !important; font-size: 0.9375rem !important; color: var(--airi-text-strong) !important; white-space: nowrap !important; display: inline !important; cursor: pointer; line-height: 1.4; } /* Lost-password — LLMS emits an outer .llms-form-field.type-html.align-right wrapping an empty .llms-field-html placeholder and a .llms-description span that contains the actual anchor to /my-account/lost-password/ */ .llms-form-field.type-html { flex: 0 0 auto !important; margin-left: auto !important; align-self: center !important; white-space: nowrap; text-align: right; } .llms-form-field.type-html .llms-description { display: inline; font-style: normal; } .llms-form-field.type-html .llms-description a, .llms-form-field.type-html a, form.llms-login a.llms-lost-password, a.llms-lost-password { color: var(--airi-red); text-decoration: underline; text-underline-offset: 3px; font-size: 0.9375rem; font-weight: 500; white-space: nowrap; } .llms-form-field.type-html .llms-description a:hover, .llms-form-field.type-html a:hover, a.llms-lost-password:hover { color: var(--airi-red-hover); } /* align-right utility — LLMS emits this on the lost-password field */ .llms-form-field.align-right, .llms-form-field.align-right .llms-description { text-align: right; } /* Mobile: stack the submit row cleanly */ @media (max-width: 640px) { .llms-person-login-form-wrapper .llms-form-fields, .llms-new-person-form-wrapper .llms-form-fields, form.llms-login .llms-form-fields, form.llms-new-account-form .llms-form-fields { flex-direction: column; align-items: stretch; } .llms-form-field.type-checkbox, .llms-form-field.type-html { margin-left: 0 !important; align-self: flex-start !important; text-align: left; } .llms-form-field.type-submit .llms-field-button, .llms-form-field.type-submit button[type="submit"] { width: 100%; } } /* --- 16L. GROUPS PROFILE (native LifterLMS Groups page, body.single-llms_group) --- */ /* Section icons → brand red: Members, Pending Invitations, Course, Seats, Search. */ body.single-llms_group .llms-group-card-title .fa, body.single-llms_group .llms-group-card .fa-search { color: var(--airi-red) !important; } /* The ghost "Manage" pencil (#llms-group-invite-members opens the Invite dialog) → a solid-red "Invite Members" button with an invite icon, so the label matches the action. */ body.single-llms_group #llms-group-invite-members { background: var(--airi-red) !important; border-radius: 4px; padding: 6px 12px !important; display: inline-flex !important; align-items: center; gap: 6px; opacity: 1 !important; } body.single-llms_group #llms-group-invite-members:hover, body.single-llms_group #llms-group-invite-members:focus { filter: brightness(0.88); } body.single-llms_group #llms-group-invite-members .llms-group-text { display: none !important; /* hide the original "Manage" word */ } body.single-llms_group #llms-group-invite-members::after { content: "Invite Members"; color: #fff; font-weight: 600; font-size: 14px; line-height: 1; } body.single-llms_group #llms-group-invite-members .fa { color: #fff !important; transform: none !important; /* cancel the ghost .ghost .fa scale(1.4) */ opacity: 1 !important; } body.single-llms_group #llms-group-invite-members .fa-pencil::before { content: "\f234"; /* FontAwesome fa-user-plus */ } /* Invite button (v2.0). The native button is FLOATED, which is why it overlapped the "Members" title (flex-wrap can't reflow a float). Neutralise the float and make it a full-width row — BOTH in place (the reliable fallback, no JS needed) AND inside the .airi-invite-row that the ASE JS relocates to the sidebar top. */ body.single-llms_group #llms-group-invite-members { float: none !important; position: static !important; } body.single-llms_group .llms-group-card-header:has( #llms-group-invite-members ) { display: flex !important; flex-wrap: wrap; align-items: center; row-gap: 10px; } body.single-llms_group .llms-group-card-header #llms-group-invite-members, body.single-llms_group .airi-invite-row #llms-group-invite-members { flex: 1 0 100% !important; width: 100% !important; justify-content: center; } body.single-llms_group .airi-invite-row { margin: 0 0 16px !important; } /* ========================================================================== 17. FLUENTCOMMUNITY STYLING (aiready.sg only) Note: Some selectors target plugin internals that may change between versions. If a selector stops working after a plugin update, check the rendered HTML and update the class name. ========================================================================== */ /* --- 17A. CONTAINER & TYPOGRAPHY --- */ .fcom-app, .fcom-wrapper, .fcom-portal-wrapper { color: var(--airi-black); font-family: inherit; } .fcom-app h1, .fcom-app h2, .fcom-app h3, .fcom-app h4 { color: var(--airi-black); font-weight: 700; } /* --- 17B. PRIMARY ACTION BUTTONS --- */ .fcom-btn-primary, .fcom-btn.fcom-btn-primary, button.fcom-btn-primary, .fcom-btn-action, .fcom-post-submit-btn { background-color: var(--airi-red) !important; background-image: none !important; border: none !important; color: var(--airi-white) !important; border-radius: var(--airi-radius) !important; padding: 10px 20px !important; font-size: 0.9rem !important; font-weight: 600 !important; transition: var(--airi-transition); cursor: pointer; box-shadow: none !important; } .fcom-btn-primary:hover, .fcom-btn.fcom-btn-primary:hover, button.fcom-btn-primary:hover, .fcom-btn-action:hover, .fcom-post-submit-btn:hover { background-color: var(--airi-red-hover) !important; transform: translateY(-1px); box-shadow: var(--airi-shadow-sm) !important; } .fcom-btn-secondary, .fcom-btn-default, .fcom-btn.fcom-btn-secondary { background-color: transparent !important; background-image: none !important; color: var(--airi-text-medium) !important; border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius) !important; padding: 10px 20px !important; font-size: 0.9rem !important; font-weight: 600 !important; transition: var(--airi-transition); } .fcom-btn-secondary:hover, .fcom-btn-default:hover, .fcom-btn.fcom-btn-secondary:hover { border-color: var(--airi-text-subtle) !important; color: var(--airi-black) !important; background: var(--airi-bg-lighter) !important; } .fcom-btn-ghost, .fcom-btn-icon, .fcom-action-btn { background: transparent !important; color: var(--airi-text-medium) !important; border: none !important; padding: 6px 10px !important; border-radius: var(--airi-radius-sm) !important; transition: var(--airi-transition); font-weight: 500 !important; } .fcom-btn-ghost:hover, .fcom-btn-icon:hover, .fcom-action-btn:hover { color: var(--airi-red) !important; background: rgba(192, 0, 0, 0.06) !important; } .fcom-action-btn.is-active, .fcom-btn-ghost.is-active, .fcom-action-btn.liked { color: var(--airi-red) !important; } /* --- 17C. SPACE CARDS --- */ .fcom-space-card, .fcom-group-card { background: var(--airi-white); border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius) !important; padding: 20px !important; transition: var(--airi-transition); box-shadow: var(--airi-shadow-sm); } .fcom-space-card:hover, .fcom-group-card:hover { border-color: var(--airi-text-subtle) !important; box-shadow: var(--airi-shadow) !important; transform: translateY(-2px); } .fcom-space-card .fcom-space-title, .fcom-space-card h3, .fcom-group-card h3 { color: var(--airi-black); font-weight: 700; font-size: 1.0625rem; margin-bottom: 6px; } .fcom-space-card .fcom-space-description, .fcom-space-card p, .fcom-group-card p { color: var(--airi-text-medium); font-size: 0.9rem; line-height: 1.5; } /* --- 17D. POST CARDS --- */ .fcom-post, .fcom-feed-item, .fcom-post-card { background: var(--airi-white); border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius-lg) !important; padding: 24px !important; margin-bottom: 16px !important; box-shadow: var(--airi-shadow-sm); transition: var(--airi-transition); } .fcom-post:hover, .fcom-feed-item:hover, .fcom-post-card:hover { box-shadow: var(--airi-shadow); } .fcom-post-header, .fcom-feed-item-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .fcom-post-author, .fcom-author-name, .fcom-post-author-name { color: var(--airi-black); font-weight: 600; font-size: 0.95rem; text-decoration: none; } .fcom-post-author:hover, .fcom-author-name:hover { color: var(--airi-red); } .fcom-post-meta, .fcom-post-time, .fcom-feed-item-meta { color: var(--airi-text-medium); font-size: 0.8rem; } .fcom-post-title, .fcom-feed-item-title { color: var(--airi-black); font-size: 1.1875rem; font-weight: 700; line-height: 1.3; margin-bottom: 12px; } .fcom-post-title a { color: inherit; text-decoration: none; } .fcom-post-title a:hover { color: var(--airi-red); } .fcom-post-content, .fcom-feed-item-content, .fcom-post-body { color: var(--airi-text-strong); font-size: 0.95rem; line-height: 1.65; } .fcom-post-actions, .fcom-post-footer, .fcom-feed-item-actions { display: flex; align-items: center; gap: 4px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--airi-border); } /* --- 17E. COMMENTS --- */ .fcom-comments-list, .fcom-comments-wrapper { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--airi-border); } .fcom-comment, .fcom-comment-item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--airi-border); } .fcom-comment:last-child, .fcom-comment-item:last-child { border-bottom: none; } .fcom-comment-content, .fcom-comment-body { flex: 1; color: var(--airi-text-strong); font-size: 0.9rem; line-height: 1.55; } .fcom-comment-author { color: var(--airi-black); font-weight: 600; font-size: 0.875rem; } .fcom-comment-meta, .fcom-comment-time { color: var(--airi-text-medium); font-size: 0.75rem; margin-left: 8px; } /* --- 17F. AVATARS --- */ .fcom-avatar, .fcom-user-avatar, .fcom-author-avatar img, .fcom-post-author-avatar img { border-radius: 50% !important; border: 2px solid var(--airi-bg-subtle); object-fit: cover; } .fcom-avatar-sm { width: 32px !important; height: 32px !important; } .fcom-avatar-md { width: 40px !important; height: 40px !important; } .fcom-avatar-lg { width: 56px !important; height: 56px !important; } /* --- 17G. MEMBER CARDS --- */ .fcom-member-card, .fcom-user-card { background: var(--airi-white); border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius) !important; padding: 20px !important; text-align: center; transition: var(--airi-transition); } .fcom-member-card:hover, .fcom-user-card:hover { border-color: var(--airi-text-subtle) !important; box-shadow: var(--airi-shadow); transform: translateY(-2px); } .fcom-member-card .fcom-member-name, .fcom-user-card .fcom-user-name { color: var(--airi-black); font-weight: 700; font-size: 1rem; margin: 12px 0 4px 0; } .fcom-member-card .fcom-member-role, .fcom-user-card .fcom-user-meta { color: var(--airi-text-medium); font-size: 0.85rem; } /* --- 17H. NAVIGATION --- */ .fcom-sidebar, .fcom-nav-sidebar { background: var(--airi-bg-lighter); border-radius: var(--airi-radius-lg); padding: 16px; } .fcom-nav-item, .fcom-sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; color: var(--airi-text-strong); text-decoration: none; border-radius: var(--airi-radius); font-weight: 500; font-size: 0.9rem; transition: var(--airi-transition); } .fcom-nav-item:hover, .fcom-sidebar-link:hover { background: var(--airi-white); color: var(--airi-black); } .fcom-nav-item.is-active, .fcom-sidebar-link.is-active, .fcom-nav-item.active { background: rgba(192, 0, 0, 0.06); color: var(--airi-red); font-weight: 600; } .fcom-tabs, .fcom-tab-nav { display: flex; gap: 4px; border-bottom: 1.5px solid var(--airi-border); margin-bottom: 24px; } .fcom-tab, .fcom-tab-link { padding: 12px 20px; color: var(--airi-text-medium); font-weight: 600; font-size: 0.9rem; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1.5px; transition: var(--airi-transition); } .fcom-tab:hover, .fcom-tab-link:hover { color: var(--airi-black); } .fcom-tab.is-active, .fcom-tab-link.is-active, .fcom-tab.active { color: var(--airi-red); border-bottom-color: var(--airi-red); } /* --- 17I. POST COMPOSER --- */ .fcom-post-composer, .fcom-composer-wrapper, .fcom-post-form { background: var(--airi-white); border: 1.5px solid var(--airi-border); border-radius: var(--airi-radius-lg); padding: 20px; margin-bottom: 16px; transition: var(--airi-transition); } .fcom-post-composer:focus-within, .fcom-composer-wrapper:focus-within { border-color: var(--airi-red); box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08); } .fcom-post-composer textarea, .fcom-composer-textarea, .fcom-post-form textarea { border: none !important; outline: none !important; background: transparent !important; color: var(--airi-black) !important; font-size: 0.95rem !important; line-height: 1.6 !important; width: 100% !important; padding: 0 !important; resize: vertical; box-shadow: none !important; } .fcom-post-composer textarea::placeholder, .fcom-composer-textarea::placeholder { color: var(--airi-text-subtle); } /* --- 17J. INPUTS & DROPDOWNS --- */ .fcom-input, .fcom-form-control, .fcom-app input[type="text"], .fcom-app input[type="email"], .fcom-app input[type="search"], .fcom-app select, .fcom-app textarea { background: var(--airi-white) !important; border: 1.5px solid var(--airi-border) !important; border-radius: var(--airi-radius) !important; padding: 10px 14px !important; font-size: 0.9rem !important; color: var(--airi-black) !important; transition: var(--airi-transition); box-shadow: none !important; } .fcom-input:focus, .fcom-form-control:focus, .fcom-app input:focus, .fcom-app select:focus, .fcom-app textarea:focus { border-color: var(--airi-red) !important; box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.10) !important; outline: none !important; } /* --- 17K. MODALS & DROPDOWNS --- */ .fcom-modal, .fcom-modal-content, .fcom-dialog { background: var(--airi-white) !important; border-radius: var(--airi-radius-lg) !important; box-shadow: var(--airi-shadow-hover) !important; border: 1px solid var(--airi-border) !important; } .fcom-modal-header, .fcom-dialog-header { border-bottom: 1px solid var(--airi-border); padding: 20px 24px; } .fcom-modal-header h2, .fcom-modal-header h3, .fcom-dialog-title { color: var(--airi-black); font-weight: 700; margin: 0; } .fcom-modal-body, .fcom-dialog-body { padding: 24px; color: var(--airi-text-strong); } .fcom-modal-footer, .fcom-dialog-footer { border-top: 1px solid var(--airi-border); padding: 16px 24px; display: flex; justify-content: flex-end; gap: 12px; } .fcom-dropdown-menu { background: var(--airi-white); border: 1px solid var(--airi-border); border-radius: var(--airi-radius); box-shadow: var(--airi-shadow); padding: 8px 0; } .fcom-dropdown-menu .fcom-dropdown-item { padding: 10px 16px; color: var(--airi-text-strong); font-size: 0.9rem; cursor: pointer; transition: var(--airi-transition); } .fcom-dropdown-menu .fcom-dropdown-item:hover { background: var(--airi-bg-lighter); color: var(--airi-red); } /* --- 17L. BADGES & TAGS --- */ .fcom-badge, .fcom-tag, .fcom-label { display: inline-block; background: var(--airi-bg-subtle); color: var(--airi-text-medium); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 3px 10px; border-radius: var(--airi-radius-pill); } .fcom-badge-primary, .fcom-tag-primary { background: var(--airi-red); color: var(--airi-white); } .fcom-badge-admin { background: var(--airi-black); color: var(--airi-white); } /* --- 17M. NOTIFICATIONS --- */ .fcom-notification, .fcom-notification-item { background: var(--airi-white); border: 1px solid var(--airi-border); border-left: 3px solid var(--airi-red); border-radius: var(--airi-radius); padding: 14px 18px; margin-bottom: 8px; } .fcom-notification.is-unread, .fcom-notification-item.unread { background: rgba(192, 0, 0, 0.04); } .fcom-notification-text { color: var(--airi-text-strong); font-size: 0.9rem; line-height: 1.5; } /* --- 17N. RESPONSIVE --- */ @media (max-width: 768px) { .fcom-post, .fcom-feed-item, .fcom-post-card { padding: 16px !important; } .fcom-tabs { overflow-x: auto; flex-wrap: nowrap; } .fcom-sidebar { padding: 12px; } } /* ========================================================================== 18. FLUENT SUPPORT OVERRIDES (DEFERRED — kept for future use) ========================================================================== */ .fs_submit_btn, .fluent_support_form button[type="submit"] { background-color: var(--airi-red) !important; border-radius: 6px !important; font-weight: 600 !important; } .fs_submit_btn:hover, .fluent_support_form button[type="submit"]:hover { background-color: var(--airi-red-hover) !important; } .fs_kb_article_card { border-radius: var(--airi-radius) !important; border: 1px solid var(--airi-border) !important; transition: var(--airi-transition); } .fs_kb_article_card:hover { box-shadow: var(--airi-shadow) !important; } /* ========================================================================== 19. TOP UTILITY BAR (Ecosystem Navigation — set-once-and-forget) ========================================================================== */ .airi-utility-bar { font-size: 0.85rem; text-align: right; padding: 8px 16px; background-color: var(--airi-black); color: rgba(255, 255, 255, 0.7); } .airi-utility-bar a { color: rgba(255, 255, 255, 0.7); text-decoration: none; margin-left: 16px; transition: var(--airi-transition); } .airi-utility-bar a:hover { color: var(--airi-white); } .airi-utility-bar .current-site { font-weight: 700; color: var(--airi-white); } @media (max-width: 767px) { .airi-utility-bar { text-align: center; font-size: 0.75rem; padding: 6px 12px; } .airi-utility-bar a { margin-left: 8px; } } /* ========================================================================== 20. ACCESSIBILITY ========================================================================== */ .airi-card:focus-within, .airi-form-wrapper input:focus, .airi-form-wrapper select:focus { outline: 2px solid var(--airi-red); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .airi-card:hover { transform: none; } .airi-infobox:hover { transform: none; } .airi-progress-fill, .fluentform .ff-el-progress-bar, .llms-progress .progress-bar { transition: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; } } .airi-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; } /* ========================================================================== 21. PRINT STYLES ========================================================================== */ @media print { .airi-utility-bar, .airi-stats-row, .fluentform .ff_nav_btns, .fluentform .ff-save-resume-button, .fcom-sidebar, .fcom-post-actions { display: none !important; } .airi-card, .airi-infobox { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; } .airi-card:hover, .airi-infobox:hover { transform: none !important; } .airi-table th { background-color: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .airi-callout { border-left-width: 3px !important; } .fluentform .ff-el-form-check label { border: 1px solid #ccc !important; page-break-inside: avoid; } body { font-size: 12pt; color: #000; } } /* ========================================================================== 22. UNIFIED COMPONENT CANON (v2.0 harmonization) [spec §18] Purpose: make THREE logged-in surfaces read as one brand — - LLMS Groups → scoped by body.single-llms_group - FluentCommunity → scoped by .fcom-app - airi My-Dashboard→ scoped by .airi-md (the [airi_dashboard] front-end wrapper; .airi-card is the REFERENCE the others match) This is an ADDITIVE OVERRIDE layer. It deliberately sits LAST in the file so the CSS cascade lets it win over §3 / §14 / §15 / §16A–K / §17 — none of which are edited in place (except the §16L invite-row pin). Every rule below is scoped by a surface root class; there are NO unscoped global selectors. IMPORTANT — FluentCommunity COLOUR is NOT set here. FC ships a Color Schema editor (Settings → Customize → "Custom" schema, with separate Light / Dark tabs) exposing the full --fcom-* palette as colour pickers. Set the brand values THERE: Link Color → #C00000 (kills the blue links / verified check / "Show More") Primary Button Background → #C00000 (kills the coral completion pill) Primary / Accent → #C00000 This section handles GEOMETRY + TYPOGRAPHY for FC plus a thin --fcom-* var-rebind FALLBACK for elements the admin panel can't reach. The CSS harmonises LOOK, not LAYOUT — the three column structures (FC left-nav + 3-col feed vs LLMS banner + 2-col vs airi 2-col) intentionally differ and are out of CSS's reach. Reuses --airi-* tokens ONLY. No invented hex. Strict monochrome: red (--airi-red #C00000) + greys. ========================================================================== */ /* --- 22A. FluentCommunity --fcom-* var-rebind (FALLBACK only) --------------- The PRIMARY colour fix is the FC admin Color Schema (see header). This block is a defensive fallback so any element the panel misses still lands on brand, and so a fresh install reads on-brand before the operator touches the panel. Scoped to .fcom-app so it can't bleed. Var names mirror the FC Pro asset CSS; if FC renames a var in a future release, re-capture from computed styles (this is the long-standing §17 caveat). */ .fcom-app { --fcom-primary-color: var(--airi-red); --fcom-primary: var(--airi-red); --fcom-primary-button: var(--airi-red); --fcom-primary-button-bg: var(--airi-red); --fcom-primary-button-text: var(--airi-white); --fcom-primary-hover: var(--airi-red-hover); --fcom-accent-color: var(--airi-red); --fcom-text-link: var(--airi-red); --fcom-link-color: var(--airi-red); --fcom-menu-text-active: var(--airi-red); --fcom-menu-active: var(--airi-red); --fcom-highlight-color: var(--airi-red); --fcom-badge-color: var(--airi-red); --fcom-verified-color: var(--airi-red); --fcom-text-main: var(--airi-black); --fcom-text-off: var(--airi-text-strong); --fcom-text-soft: var(--airi-text-medium); --fcom-text-light: var(--airi-text-subtle); --fcom-border-color: var(--airi-border); --fcom-bg-main: var(--airi-white); --fcom-bg-app: var(--airi-bg-subtle); --fcom-card-radius: var(--airi-radius-lg); } /* --- 22B. CARD CANON -------------------------------------------------------- ONE card recipe (the airi .airi-card geometry): white, 12px radius, soft shadow, 1px brand border, consistent padding. Mapped to FC post/space/member /sidebar cards and the LLMS group cards. The airi dashboard's own .airi-card already IS this recipe (§3) — re-asserted here under .airi-md scope so all three are provably identical and any drift is corrected. */ .fcom-app .fcom-post, .fcom-app .fcom-feed-item, .fcom-app .fcom-post-card, .fcom-app .fcom-space-card, .fcom-app .fcom-group-card, .fcom-app .fcom-member-card, .fcom-app .fcom-user-card, .fcom-app .fcom-post-composer, .fcom-app .fcom-composer-wrapper, .fcom-app .fcom-post-form, body.single-llms_group .llms-group-card, .airi-md .airi-card { background-color: var(--airi-white) !important; border: 1px solid var(--airi-border) !important; border-radius: var(--airi-radius-lg) !important; box-shadow: var(--airi-shadow) !important; } /* Consistent inner padding on the post / space / group cards (member cards and the composer keep their own tighter padding from §17). */ .fcom-app .fcom-post, .fcom-app .fcom-feed-item, .fcom-app .fcom-post-card, .fcom-app .fcom-space-card, .fcom-app .fcom-group-card, body.single-llms_group .llms-group-card { padding: 24px !important; } /* One hover behaviour: lift the shadow, no transform jitter. */ .fcom-app .fcom-post:hover, .fcom-app .fcom-feed-item:hover, .fcom-app .fcom-post-card:hover, .fcom-app .fcom-space-card:hover, .fcom-app .fcom-group-card:hover, body.single-llms_group .llms-group-card:hover, .airi-md .airi-card:hover { box-shadow: var(--airi-shadow-hover) !important; } /* Group-card header sits flush on the unified card (LLMS draws its own rule). */ body.single-llms_group .llms-group-card-header { background: transparent !important; border-bottom: 1px solid var(--airi-border) !important; } body.single-llms_group .llms-group-card-title { color: var(--airi-black) !important; font-weight: 700 !important; } /* --- 22C. BUTTON CANON ------------------------------------------------------ PRIMARY = solid --airi-red bg + #fff text + --airi-radius, hover --airi-red-hover. OUTLINE = white bg + red border/text, inverts to solid red on hover. FC button COLOUR is also set in the FC admin panel; this is the geometry + a brand-colour fallback. Mapped to FC primary buttons, LLMS action/primary buttons, and airi .airi-btn-primary / .airi-btn-outline. */ .fcom-app .fcom-btn-primary, .fcom-app button.fcom-btn-primary, .fcom-app .fcom-btn-action, .fcom-app .fcom-post-submit-btn, body.single-llms_group .llms-button-action, body.single-llms_group .llms-button-primary, body.single-llms_group a.llms-button-action, .airi-md .airi-btn-primary { background-color: var(--airi-red) !important; background-image: none !important; border: 1.5px solid var(--airi-red) !important; color: var(--airi-white) !important; border-radius: var(--airi-radius) !important; font-weight: 600 !important; box-shadow: none !important; transition: var(--airi-transition); } .fcom-app .fcom-btn-primary:hover, .fcom-app button.fcom-btn-primary:hover, .fcom-app .fcom-btn-action:hover, .fcom-app .fcom-post-submit-btn:hover, body.single-llms_group .llms-button-action:hover, body.single-llms_group .llms-button-primary:hover, body.single-llms_group a.llms-button-action:hover, .airi-md .airi-btn-primary:hover { background-color: var(--airi-red-hover) !important; border-color: var(--airi-red-hover) !important; color: var(--airi-white) !important; } /* Outline / secondary: white → red invert on hover. */ .fcom-app .fcom-btn-secondary, .fcom-app .fcom-btn-default, body.single-llms_group .llms-button-secondary, .airi-md .airi-btn-outline { background-color: var(--airi-white) !important; background-image: none !important; color: var(--airi-red) !important; border: 1.5px solid var(--airi-red) !important; border-radius: var(--airi-radius) !important; font-weight: 600 !important; box-shadow: none !important; transition: var(--airi-transition); } .fcom-app .fcom-btn-secondary:hover, .fcom-app .fcom-btn-default:hover, body.single-llms_group .llms-button-secondary:hover, .airi-md .airi-btn-outline:hover { background-color: var(--airi-red) !important; border-color: var(--airi-red) !important; color: var(--airi-white) !important; } /* --- 22D. LINKS — kill all residual blue ----------------------------------- FC admin Color Schema is the primary fix; the --fcom-text-link rebind in 22A is the CSS fallback. Here we pin the element colour too, plus LLMS/airi: actionable links = brand red, metadata = grey. */ .fcom-app a:not(.fcom-btn):not([class*="avatar"]):not(.fcom-nav-item), .fcom-app .fcom-post-title a, .fcom-app .fcom-show-more, body.single-llms_group a:not(.llms-button-action):not(.llms-button-primary):not(.llms-button-secondary), .airi-md a:not(.airi-btn):not(.airi-btn-primary):not(.airi-btn-outline):not(.airi-btn-secondary) { color: var(--airi-red); } .fcom-app .fcom-post-meta, .fcom-app .fcom-post-time, .fcom-app .fcom-comment-meta, .fcom-app .fcom-comment-time, body.single-llms_group .llms-group-meta, .airi-md .airi-card-meta { color: var(--airi-text-medium) !important; } /* --- 22E. AVATAR CANON ------------------------------------------------------ Circular, consistent border across all three. Size is left to each surface's own context (32/40/56 in §17F; LLMS/airi use their own) — only the shape + border are unified here. */ .fcom-app .fcom-avatar, .fcom-app .fcom-user-avatar, .fcom-app .fcom-author-avatar img, .fcom-app .fcom-post-author-avatar img, body.single-llms_group .llms-group-card img.avatar, body.single-llms_group .llms-group-card .avatar, .airi-md .airi-avatar, .airi-md .avatar { border-radius: 50% !important; border: 1px solid var(--airi-border) !important; object-fit: cover; } /* --- 22F. BADGES / PILLS / VERIFIED-CHECK ---------------------------------- Brand red for accent badges + verified check + notification dots. FC admin handles most of this; these are gap-fills scoped to the surfaces. */ .fcom-app .fcom-badge-primary, .fcom-app .fcom-tag-primary, .fcom-app .fcom-verified, .fcom-app .fcom-verified-icon, .fcom-app .fcom-notification-dot, .fcom-app [class*="verified"] svg, body.single-llms_group .llms-badge-primary, .airi-md .airi-pill-primary { background-color: var(--airi-red) !important; color: var(--airi-white) !important; fill: var(--airi-red) !important; } /* Neutral / metadata pills → grey ramp (not coloured). */ .fcom-app .fcom-badge:not(.fcom-badge-primary):not(.fcom-badge-admin), .fcom-app .fcom-tag:not(.fcom-tag-primary), .airi-md .airi-pill:not(.airi-pill-primary) { background-color: var(--airi-bg-subtle) !important; color: var(--airi-text-medium) !important; } /* --- 22G. TYPOGRAPHY CANON -------------------------------------------------- One family + heading weights across all three. The sheet itself never declares a typeface — it relies on the Kadence theme base font (the brand family), which §17A already pins on .fcom-app via `font-family: inherit`. Here we propagate `inherit` to FC's inner nodes so its SPA can't impose its own bundled font, and re-assert heading weight parity on all three surfaces. (If the operator wants an explicit named family instead of the theme font, set it on the Kadence body — NOT here — so all three inherit it together.) */ .fcom-app, .fcom-app * { font-family: inherit !important; } .fcom-app h1, .fcom-app h2, .fcom-app h3, .fcom-app h4, body.single-llms_group .llms-group-card-title, body.single-llms_group h1, body.single-llms_group h2, body.single-llms_group h3, .airi-md h1, .airi-md h2, .airi-md h3, .airi-md h4, .airi-md .airi-card-title { color: var(--airi-black); font-weight: 700; line-height: 1.25; } /* --- 22H. PAGE BACKGROUND / SPACING ---------------------------------------- Consistent subtle page canvas behind the cards where each surface allows it (the cards stay white from 22B, so they read as raised panels on the same neutral ground across all three). Scoped to each surface root. */ .fcom-app, .fcom-app .fcom-portal-wrapper, .fcom-app .fcom-feed-wrapper, body.single-llms_group #content, body.single-llms_group .llms-group-content { background-color: var(--airi-bg-subtle); } /* Gutter for the LLMS Groups page: inset the columns wrapper (aside + main) from the left/right edges. DOM-confirmed: `.llms-group-content` holds the columns — the full-width banner sits ABOVE it — so padding here never touches the banner. */ body.single-llms_group .llms-group-content { padding-left: 24px !important; padding-right: 24px !important; box-sizing: border-box; } @media (max-width: 782px) { body.single-llms_group .llms-group-content { padding-left: 14px !important; padding-right: 14px !important; } } .airi-md { background-color: var(--airi-bg-subtle); /* NOTE: the dashboard L/R gutter is owned by the airi PLUGIN (.airi-dashboard-wrap → --airi-dash-page-pad in airi-dashboard-layout.css, v5.11.17) — intentionally NOT set here so this layer can't override it. */ } /* ========================================================================== END OF STYLESHEET v1.3 PALETTE REFERENCE ──────────────────────────────────── --airi-red #C00000 Primary accent — actions, links, CTAs --airi-red-hover #9B0000 Hover state --airi-black #1A1A1A Strongest text, dark backgrounds --airi-text-strong #404040 Strong body text, secondary headings --airi-text-medium #6B6B6B Medium text, captions, labels --airi-text-subtle #999999 Subtle text, placeholders, helper --airi-border #E5E5E5 Subtle borders, dividers --airi-bg-subtle #F2F2F2 Subtle section backgrounds, cards --airi-bg-lighter #F9F9F9 Lighter section backgrounds --airi-white #FFFFFF Main canvas --airi-success #2E7D32 ONLY for completion states PILLAR → COLOR (monochrome) ──────────────────────────────────── P1 Mindset / Org Readiness --airi-pillar-p1 #C00000 RED P2 Ethics --airi-pillar-p2 #1A1A1A black P3 Value Creation --airi-pillar-p3 #404040 strong grey P4 Data --airi-pillar-p4 #6B6B6B medium grey P5 Tools & Skills --airi-pillar-p5 #999999 subtle grey MATURITY LEVEL → COLOR (monochrome) ──────────────────────────────────── L0 AI Unaware --airi-level-l0 #D9D9D9 palest grey L1 AI Aware --airi-level-l1 #B0B0B0 light grey L2 AI Ready ★ --airi-level-l2 #C00000 RED (success target) L3 AI Competent --airi-level-l3 #6B6B6B medium grey L4 AI Catalyst --airi-level-l4 #1A1A1A black ASSESSMENT FORM CLASSES ──────────────────────────────────── .airi-assessment-page wrap on Kadence Section of /assess/* pages .airi-welcome Welcome step Custom HTML .airi-welcome-meta "15 questions · ~20 min" line .airi-callout pillar teaching block .airi-callout-engine Decision Engine callout (red tint) .airi-callout-success completion message (green) .airi-dimension-label "DIMENSION 1 OF 5" eyebrow .airi-dimension-name dimension title .airi-dimension-rationale italic grey rationale text ========================================================================== */