/* ======================================================================== ADAAS Blog — Custom CSS for AIS / A-Concept Article Series File: /static/css/blog-ais-custom.css Purpose: Diagrams, code blocks, callouts, comparison tables, key insights ======================================================================== Drop this into your /static/css/ folder and include it ONLY on articles that use these elements. Add this line to the article's : ======================================================================== */ /* ---- 1. CODE BLOCKS ---------------------------------------------------- */ .ais-code { background: #1a1d23; color: #e6e7e9; border-radius: 8px; padding: 22px 26px; margin: 28px 0; overflow-x: auto; font-family: 'Menlo', 'Consolas', 'Courier New', monospace; font-size: 13.5px; line-height: 1.65; border-left: 3px solid #4a90e2; white-space: pre; word-wrap: normal; } .ais-code.lang-ais { border-left-color: #7c5cff; } .ais-code.lang-ts { border-left-color: #4a90e2; } .ais-code.lang-flow { border-left-color: #6c757d; } .ais-code.lang-warning { border-left-color: #e85a4f; } .ais-code .ais-keyword { color: #c792ea; font-weight: 500; } .ais-code .ais-string { color: #c3e88d; } .ais-code .ais-comment { color: #7a818c; font-style: italic; } .ais-code .ais-arrow { color: #ffcb6b; font-weight: 500; } .ais-code .ais-label { color: #82aaff; } .ais-code .ais-emphasis { color: #f78c6c; font-weight: 500; } /* ---- 2. ASCII / FLOW DIAGRAMS ----------------------------------------- */ .ais-diagram { background: #fafbfc; border: 1px solid #e5e8ec; border-radius: 8px; padding: 32px 26px; margin: 32px 0; font-family: 'Menlo', 'Consolas', 'Courier New', monospace; font-size: 14px; line-height: 1.5; color: #2d3138; text-align: center; overflow-x: auto; white-space: pre; } .ais-diagram .ais-d-title { display: block; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6c757d; margin-bottom: 18px; text-align: center; } /* ---- 3. VISUAL SVG-LIKE FLOW DIAGRAMS (HTML-based) -------------------- */ .ais-flow { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 24px; background: #fafbfc; border: 1px solid #e5e8ec; border-radius: 10px; margin: 32px 0; font-family: 'Helvetica Neue', Arial, sans-serif; } .ais-flow-node { background: #fff; border: 1.5px solid #d6dbe1; border-radius: 8px; padding: 12px 22px; font-size: 14px; font-weight: 500; color: #2d3138; min-width: 200px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .ais-flow-node.ais-accent { border-color: #7c5cff; background: #f4f0ff; color: #4a37a8; } .ais-flow-node.ais-warn { border-color: #e85a4f; background: #fff1ef; color: #b03a30; } .ais-flow-node.ais-success { border-color: #2eb872; background: #e9f9f0; color: #1a7a45; } .ais-flow-node.ais-muted { border-color: #d6dbe1; background: #f0f2f5; color: #6c757d; } .ais-flow-arrow { color: #9ba4b0; font-size: 22px; line-height: 1; user-select: none; } .ais-flow-row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; } /* ---- 4. KEY INSIGHT / PULL QUOTE -------------------------------------- */ .ais-insight { background: linear-gradient(135deg, #f7f8ff 0%, #eef0ff 100%); border-left: 4px solid #7c5cff; border-radius: 0 10px 10px 0; padding: 26px 32px; margin: 36px 0; font-family: 'Georgia', serif; font-size: 1.15rem; line-height: 1.65; color: #2d2d4e; font-style: italic; } .ais-insight strong { font-style: normal; color: #1a1a2e; } /* ---- 5. WARNING / PAIN-POINT CALLOUT ---------------------------------- */ .ais-warning { background: #fff8f6; border: 1px solid #ffd6cf; border-left: 4px solid #e85a4f; border-radius: 0 8px 8px 0; padding: 20px 26px; margin: 28px 0; font-family: 'Helvetica Neue', Arial, sans-serif; } .ais-warning .ais-w-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #b03a30; margin-bottom: 8px; } .ais-warning p { margin: 0; color: #4a2e2a; font-size: 0.97rem; line-height: 1.7; } /* ---- 6. SUCCESS / SOLUTION CALLOUT ------------------------------------ */ .ais-solution { background: #f3fbf6; border: 1px solid #c5e9d3; border-left: 4px solid #2eb872; border-radius: 0 8px 8px 0; padding: 20px 26px; margin: 28px 0; font-family: 'Helvetica Neue', Arial, sans-serif; } .ais-solution .ais-s-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #1a7a45; margin-bottom: 8px; } .ais-solution p { margin: 0; color: #1c3a28; font-size: 0.97rem; line-height: 1.7; } /* ---- 7. COMPARISON TABLES --------------------------------------------- */ .ais-compare { width: 100%; border-collapse: separate; border-spacing: 0; margin: 32px 0; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.92rem; background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.05); } .ais-compare thead tr { background: #1a1d23; color: #fff; } .ais-compare thead th { padding: 14px 18px; text-align: left; font-weight: 600; font-size: 0.88rem; letter-spacing: 0.02em; } .ais-compare tbody td { padding: 14px 18px; border-bottom: 1px solid #f0f2f5; vertical-align: top; line-height: 1.6; } .ais-compare tbody tr:last-child td { border-bottom: none; } .ais-compare tbody tr:nth-child(even) { background: #fafbfc; } .ais-compare td.ais-feature-cell { font-weight: 600; color: #1a1a2e; width: 28%; } .ais-compare td.ais-yes { color: #1a7a45; font-weight: 500; } .ais-compare td.ais-no { color: #b03a30; } .ais-compare td.ais-partial { color: #8a6a00; } /* ---- 8. SPLIT-SCREEN (BEFORE / AFTER) --------------------------------- */ .ais-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 32px 0; font-family: 'Helvetica Neue', Arial, sans-serif; } @media (max-width: 720px) { .ais-split { grid-template-columns: 1fr; } } .ais-split-pane { border-radius: 10px; padding: 22px 24px; border: 1px solid #e5e8ec; } .ais-split-pane.ais-before { background: #fdf5f4; border-color: #ffd6cf; } .ais-split-pane.ais-after { background: #f3fbf6; border-color: #c5e9d3; } .ais-split-pane h4 { margin: 0 0 12px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } .ais-split-pane.ais-before h4 { color: #b03a30; } .ais-split-pane.ais-after h4 { color: #1a7a45; } .ais-split-pane p { margin: 0; font-size: 0.95rem; line-height: 1.65; color: #2d3138; } /* ---- 9. STAT / METRIC CARDS ------------------------------------------- */ .ais-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin: 32px 0; font-family: 'Helvetica Neue', Arial, sans-serif; } .ais-stat-card { background: #fff; border: 1px solid #e5e8ec; border-radius: 10px; padding: 22px 20px; text-align: center; } .ais-stat-num { display: block; font-size: 2rem; font-weight: 700; color: #1a1a2e; line-height: 1; margin-bottom: 6px; } .ais-stat-label { display: block; font-size: 0.8rem; color: #6c757d; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; } /* ---- 10. SECTION DIVIDERS --------------------------------------------- */ .ais-divider { border: none; height: 1px; background: linear-gradient(to right, transparent, #d6dbe1, transparent); margin: 48px 0; } /* ---- 11. INLINE LABELS / BADGES --------------------------------------- */ .ais-badge { display: inline-block; font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 10px; border-radius: 12px; vertical-align: middle; } .ais-badge.ais-b-new { background: #f4f0ff; color: #4a37a8; } .ais-badge.ais-b-fintech { background: #e6f4ff; color: #0a4a7a; } .ais-badge.ais-b-warning { background: #fff1ef; color: #b03a30; } .ais-badge.ais-b-success { background: #e9f9f0; color: #1a7a45; } /* ---- 12. CORPORATE SVG SCHEMA DIAGRAMS (ADAAS brand) ------------------ */ /* ADAAS brand palette for SVG diagrams: Primary red #CD303B Deep red #A0232C Orange-red #E8503A Light red bg #FBEAE9 Charcoal #1E1E1E Mid grey #5A5A5A Light surface #F5F4F1 Border grey #DEDBD4 */ .adaas-schema { margin: 36px 0; overflow-x: auto; } .adaas-schema svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; } .schema-caption { font-size: 12px; color: #888; text-align: center; margin-top: 8px; } /* ---- 13. BRAND ACCENT FLOW NODE --------------------------------------- */ .ais-flow-node.ais-brand { border-color: #CD303B; background: #FBEAE9; color: #A0232C; } /* ---- 14. COMPARISON TABLE CHECK / CROSS GLYPHS ------------------------ */ .ais-compare td.ais-yes::before { content: "\2714\00a0"; } /* ✔ */ .ais-compare td.ais-no::before { content: "\2716\00a0"; } /* ✖ */ .ais-compare td.ais-partial::before { content: "\25CB\00a0"; } /* ○ */