/* ============================================================================ AMAC Suite Shell v1.1 — shared design system ---------------------------------------------------------------------------- v1.1 (2026-04-29) - Folded in the v1.0.1 scroll fix (single-scroll workspace model) - Added a compatibility layer that maps common legacy class names (.card, .button, .button.secondary, .hero, .status.info/.warn/.err, .small-list, .form-card, .table-card, .table-wrap, .meta) to the shell's visual treatment so apps can adopt v1.1 with only: and no other markup changes. - All v1.0 selectors (.ss-*) remain unchanged. ========================================================================= */ :root { /* Brand */ --ss-navy: #022544; --ss-blue: #2e78b7; --ss-red: #840d0d; --ss-gold: #c6974e; --ss-teal: #0f766e; /* Neutrals */ --ss-bg: #edf3f9; --ss-surface: #fbfdff; --ss-surface-2: #f5f8fb; --ss-line: #d7e2ef; --ss-line-2: #c7d4e4; --ss-text: #1f2937; --ss-muted: #64748b; /* Status */ --ss-ok: #0f766e; --ss-warn: #b45309; --ss-err: #b91c1c; /* Chip backgrounds — exposed so other apps (notably ERP) can reuse */ --ss-chip-bg: rgba(255,255,255,0.16); --ss-chip-bg-subtle: rgba(255,255,255,0.10); --ss-chip-bg-ok: rgba(34,124,74,0.20); --ss-chip-bg-warn: rgba(160,96,12,0.20); --ss-chip-bg-err: rgba(132,13,13,0.30); --ss-chip-bg-info: rgba(17,92,151,0.20); /* Layout */ --ss-radius: 12px; --ss-shadow: 0 14px 34px rgba(2,37,68,0.10); --ss-shadow-lift: 0 20px 44px rgba(2,37,68,0.18); --ss-pad: 10px; --ss-pad-tight: 6px; --ss-row-h: 30px; --ss-z-rail: 90; --ss-z-flyout: 110; --ss-z-search: 140; --ss-z-modal: 160; --ss-z-toast: 200; } /* ============ RESET / BASE ============ */ .suite-shell, .suite-shell * { box-sizing: border-box; } .suite-shell { margin: 0; font-family: "Segoe UI", Aptos, Arial, sans-serif; color: var(--ss-text); background: linear-gradient(180deg, #f4f8fc 0%, var(--ss-bg) 100%); } .ss-shell { display: flex; flex-direction: column; min-height: 100vh; padding: 10px 12px 12px; max-width: 100%; } /* ============ HERO ============ */ .ss-hero { background: linear-gradient(135deg, rgba(2,37,68,0.97), rgba(46,120,183,0.92)); color: white; border-radius: 18px; padding: 12px 16px; box-shadow: var(--ss-shadow); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; flex: 0 0 auto; } .ss-hero .ss-hero-copy { min-width: 0; } .ss-hero .ss-hero-topline { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; } .ss-chip { display: inline-flex; align-items: center; padding: 5px 9px; border-radius: 999px; background: var(--ss-chip-bg); color: white; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .ss-chip.subtle { background: var(--ss-chip-bg-subtle); } .ss-chip.ok { background: var(--ss-chip-bg-ok); color: #e6fff1; } .ss-chip.warn { background: var(--ss-chip-bg-warn); color: #fff2d7; } .ss-chip.err { background: var(--ss-chip-bg-err); color: #ffe3e3; } .ss-chip.info { background: var(--ss-chip-bg-info); color: #e5f2ff; } .ss-chip.action { cursor: pointer; } .ss-chip.action:hover { filter: brightness(1.12); } .ss-hero-brand { display: flex; gap: 10px; align-items: center; } .ss-hero-logo { width: 148px; max-width: 22vw; height: auto; } .ss-hero h1 { margin: 0; font-size: 22px; color: white; } .ss-hero-sub { margin-top: 2px; font-size: 13px; max-width: 860px; color: rgba(255,255,255,0.86); } .ss-hero-actions { display: flex; gap: 6px; align-items: flex-start; position: relative; } .ss-back-link { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.30); background: rgba(255,255,255,0.12); color: white; text-decoration: none; font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; } .ss-back-link:hover { background: rgba(255,255,255,0.22); } /* ============ COMMAND BAR ============ */ .ss-cmdbar { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; padding: 4px 6px; margin-bottom: 6px; position: sticky; top: 0; z-index: 20; flex: 0 0 auto; border: 1px solid var(--ss-line); background: rgba(255,255,255,0.95); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); } .ss-menu { position: relative; } .ss-menu > summary { list-style: none; cursor: pointer; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--ss-line); color: var(--ss-navy); font-weight: 600; background: white; user-select: none; font-size: 13px; } .ss-menu > summary::-webkit-details-marker { display: none; } .ss-menu[open] > summary, .ss-menu > summary:hover { border-color: var(--ss-blue); background: #f7fbff; } .ss-menu-list { position: absolute; top: calc(100% + 4px); left: 0; min-width: 240px; padding: 4px; display: grid; gap: 2px; border: 1px solid var(--ss-line); border-radius: 10px; background: rgba(255,255,255,0.98); box-shadow: 0 12px 28px rgba(2,37,68,0.18); z-index: 30; max-height: calc(100vh - 180px); overflow-y: auto; } .ss-menu-list .ss-menu-item { text-align: left; border: 0; background: transparent; padding: 7px 9px; border-radius: 8px; cursor: pointer; color: var(--ss-text); font-size: 13px; } .ss-menu-list .ss-menu-item:hover { background: #eef5fb; } .ss-menu-list .ss-menu-divider { height: 1px; background: var(--ss-line); margin: 4px 6px; } .ss-menu-list .ss-menu-sub { font-size: 10px; color: var(--ss-muted); padding: 6px 9px 2px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; } /* ============ BUTTONS ============ */ .ss-btn, .ss-btn-primary, .ss-btn-ghost, .ss-btn-secondary { border-radius: 8px; border: 1px solid var(--ss-line-2); padding: 6px 10px; font-size: 13px; cursor: pointer; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; text-decoration: none; user-select: none; background: white; color: var(--ss-navy); font-family: inherit; } .ss-btn-primary { background: var(--ss-red); color: white; border-color: transparent; } .ss-btn-ghost { background: white; color: var(--ss-navy); } .ss-btn:hover, .ss-btn-primary:hover, .ss-btn-ghost:hover { transform: translateY(-1px); border-color: var(--ss-blue); } .ss-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } .ss-btn-small { padding: 5px 8px; font-size: 12px; } /* ============ KPI STRIP ============ */ .ss-kpi-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; margin-bottom: 6px; flex: 0 0 auto; } .ss-kpi { border: 1px solid var(--ss-line); background: rgba(255,255,255,0.95); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: 10px 12px; position: relative; } .ss-kpi-label { font-size: 10px; font-weight: 800; color: var(--ss-muted); letter-spacing: 0.08em; text-transform: uppercase; } .ss-kpi-value { font-size: 22px; font-weight: 800; color: var(--ss-navy); font-variant-numeric: tabular-nums; } .ss-kpi-value.small { font-size: 16px; } .ss-kpi-sub { font-size: 11px; color: var(--ss-muted); margin-top: 2px; } .ss-kpi-delta { position: absolute; right: 10px; top: 8px; font-size: 10px; font-weight: 800; } .ss-kpi-delta.up { color: var(--ss-ok); } .ss-kpi-delta.down { color: var(--ss-err); } .ss-kpi-strip.compact { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 6px; border-radius: 10px; background: rgba(255,255,255,0.85); border: 1px solid var(--ss-line); box-shadow: none; grid-template-columns: none; } .ss-kpi-strip.compact .ss-kpi { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border-radius: 8px; background: var(--ss-surface-2); border: 1px solid var(--ss-line); box-shadow: none; flex: 0 0 auto; } .ss-kpi-strip.compact .ss-kpi-label { font-size: 9px; } .ss-kpi-strip.compact .ss-kpi-value { font-size: 13px; font-weight: 700; } .ss-kpi-strip.compact .ss-kpi-sub { display: none; } /* ============ WORKSPACE — single-scroll model (v1.1 fix) ============ */ .ss-workspace { display: block; overflow-y: auto; overflow-x: hidden; flex: 1 1 auto; min-height: 0; height: calc(100vh - 200px); } .ss-workspace.has-inspector { display: grid; grid-template-columns: minmax(0, 1fr) 6px var(--ss-inspector-w, 380px); overflow: hidden; } .ss-workspace.has-inspector > * { overflow: auto; } .ss-workspace.has-inspector .ss-splitter { cursor: col-resize; background: linear-gradient(180deg, rgba(2,37,68,0.08), rgba(2,37,68,0.02)); border-radius: 999px; margin: 4px 2px; overflow: visible; } .ss-panel { background: rgba(255,255,255,0.95); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); overflow: hidden; } .ss-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--ss-line); } .ss-panel-head h2 { margin: 0; font-size: 16px; color: var(--ss-navy); } .ss-panel-head .ss-panel-actions { display: flex; gap: 6px; flex-wrap: wrap; } .ss-panel-body { padding: 10px 12px; } /* When .ss-panel is the SOLE child of .ss-workspace, it should not introduce a second scroll */ .ss-workspace > .ss-panel, .ss-workspace > .ss-panel > .ss-panel-body { overflow: visible; } /* ============ TABLES ============ */ .ss-table-toolbar { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 8px 10px; border-bottom: 1px solid var(--ss-line); background: var(--ss-surface-2); flex: 0 0 auto; } .ss-table-toolbar input[type="search"], .ss-table-toolbar select, .ss-table-toolbar input[type="text"] { padding: 5px 8px; border: 1px solid var(--ss-line-2); border-radius: 6px; font-size: 12px; background: white; } .ss-table-toolbar input[type="search"] { min-width: 220px; } .ss-saved-view-tab { padding: 4px 10px; border: 1px solid var(--ss-line); border-radius: 999px; background: white; cursor: pointer; font-size: 12px; color: var(--ss-navy); } .ss-saved-view-tab.active { background: linear-gradient(135deg, var(--ss-navy), var(--ss-blue)); color: white; border-color: transparent; } .ss-table-wrap { overflow-x: auto; overflow-y: visible; border-radius: 0 0 var(--ss-radius) var(--ss-radius); } .ss-table { width: 100%; border-collapse: collapse; font-size: 12px; } .ss-table thead th { position: sticky; top: 0; z-index: 1; background: var(--ss-surface-2); border-bottom: 1px solid var(--ss-line); padding: 6px 8px; text-align: left; font-weight: 700; color: var(--ss-navy); cursor: pointer; user-select: none; white-space: nowrap; } .ss-table thead th:hover { background: #e9f1f9; } .ss-table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--ss-line); vertical-align: top; } .ss-table tbody tr { cursor: pointer; } .ss-table tbody tr:hover { background: rgba(46,120,183,0.06); } .ss-table tbody tr.active { background: rgba(2,37,68,0.10); } .ss-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ============ STATUS / PILL ============ */ .ss-pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(2,37,68,0.08); color: var(--ss-navy); white-space: nowrap; } .ss-pill.ok { background: rgba(15,118,110,0.12); color: var(--ss-ok); } .ss-pill.warn { background: rgba(180,83,9,0.14); color: var(--ss-warn); } .ss-pill.err { background: rgba(132,13,13,0.14); color: var(--ss-red); } .ss-pill.info { background: rgba(46,120,183,0.14); color: var(--ss-blue); } .ss-pill.muted { background: rgba(100,116,139,0.14); color: var(--ss-muted); } /* ============ STATE / SPIN ============ */ .ss-state { padding: 28px 16px; text-align: center; color: var(--ss-muted); font-size: 13px; } .ss-state .ss-state-icon { display: inline-block; margin-bottom: 8px; font-size: 28px; opacity: 0.55; } .ss-state.err { color: var(--ss-err); } .ss-state.warn { color: var(--ss-warn); } .ss-state.ok { color: var(--ss-ok); } .ss-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--ss-line); border-top-color: var(--ss-blue); border-radius: 50%; animation: ss-spin 0.7s linear infinite; vertical-align: middle; } @keyframes ss-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } } /* ============ INSPECTOR ============ */ .ss-inspector { background: rgba(255,255,255,0.95); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: 10px; display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .ss-inspector-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--ss-line); margin-bottom: 8px; } .ss-inspector-title { font-size: 14px; font-weight: 700; color: var(--ss-navy); } .ss-inspector-eyebrow { font-size: 10px; font-weight: 800; color: var(--ss-muted); letter-spacing: 0.08em; text-transform: uppercase; } .ss-inspector-body { flex: 1 1 auto; overflow: auto; padding-right: 2px; } /* ============ TOAST / MODAL / FORM-GRID ============ */ .ss-toast-wrap { position: fixed; right: 16px; bottom: 16px; z-index: var(--ss-z-toast); display: grid; gap: 6px; pointer-events: none; } .ss-toast { pointer-events: auto; padding: 8px 12px; border-radius: 10px; background: var(--ss-navy); color: white; box-shadow: 0 12px 28px rgba(2,37,68,0.30); font-size: 12px; max-width: 360px; } .ss-toast.ok { background: var(--ss-ok); } .ss-toast.warn { background: var(--ss-warn); } .ss-toast.err { background: var(--ss-red); } .ss-modal-overlay { position: fixed; inset: 0; background: rgba(2, 37, 68, 0.32); backdrop-filter: blur(3px); z-index: var(--ss-z-modal); display: none; justify-content: center; align-items: center; padding: 20px; } .ss-modal-overlay.open { display: flex; } .ss-modal { width: min(720px, calc(100vw - 32px)); max-height: calc(100vh - 40px); overflow: auto; border: 1px solid var(--ss-line); background: white; border-radius: 14px; box-shadow: 0 22px 44px rgba(2,37,68,0.30); padding: 14px 16px; } .ss-form-grid { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 8px; } .ss-form-grid .ss-lbl { font-size: 11px; font-weight: 700; color: var(--ss-muted); letter-spacing: 0.04em; text-transform: uppercase; } .ss-form-grid input, .ss-form-grid select, .ss-form-grid textarea { width: 100%; border: 1px solid var(--ss-line-2); border-radius: 8px; padding: 6px 8px; background: white; color: var(--ss-text); font: inherit; } /* ============ RESPONSIVE ============ */ @media (max-width: 1100px) { .ss-workspace { height: auto; } .ss-workspace.has-inspector { grid-template-columns: 1fr; } .ss-workspace.has-inspector .ss-splitter, .ss-workspace.has-inspector .ss-inspector { display: none; } } @media print { .ss-cmdbar, .ss-hero-actions, .ss-modal-overlay, .ss-toast-wrap { display: none !important; } .ss-shell { height: auto; overflow: visible; padding: 0; } } /* ============ COMPATIBILITY LAYER (v1.1) Maps common legacy class names used across AMAC suite apps onto the shell's visual treatment. This is what lets each app adopt v1.1 with only `` and the link/script tags. Each rule is scoped under .suite-shell so non-shell pages are unaffected. ========================================================================= */ body.suite-shell { background: linear-gradient(180deg, #f4f8fc 0%, var(--ss-bg) 100%); font-family: "Segoe UI", Aptos, Arial, sans-serif; color: var(--ss-text); margin: 0; } /* Page-shell wrappers used by older apps */ body.suite-shell main.page-shell, body.suite-shell .page-shell { padding: 10px 12px 12px; max-width: 100%; display: flex; flex-direction: column; gap: 6px; } /* Hero blocks */ body.suite-shell .hero, body.suite-shell section.hero { background: linear-gradient(135deg, rgba(2,37,68,0.97), rgba(46,120,183,0.92)); color: white; border-radius: 18px; padding: 12px 16px; box-shadow: var(--ss-shadow); margin-bottom: 6px; display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } body.suite-shell .hero h1, body.suite-shell section.hero h1 { margin: 0; color: white; font-size: 22px; } body.suite-shell .hero .brand-row, body.suite-shell section.hero .brand-row { display: flex; gap: 10px; align-items: center; color: white; } body.suite-shell .hero p, body.suite-shell section.hero p { color: rgba(255,255,255,0.86); margin: 2px 0 0; font-size: 13px; } body.suite-shell .hero img, body.suite-shell section.hero img { width: 148px; max-width: 22vw; height: auto; } /* Card-style sections */ body.suite-shell .card, body.suite-shell .form-card, body.suite-shell .table-card { background: rgba(255,255,255,0.95); border: 1px solid var(--ss-line); border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); padding: 12px 14px; } body.suite-shell .card h2, body.suite-shell .form-card h2, body.suite-shell .table-card h2 { margin: 0 0 8px; font-size: 16px; color: var(--ss-navy); } body.suite-shell .table-header-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; } /* Buttons */ body.suite-shell button, body.suite-shell .button, body.suite-shell input[type="submit"] { border-radius: 8px; border: 1px solid var(--ss-line-2); padding: 6px 12px; font-size: 13px; font-family: inherit; cursor: pointer; background: var(--ss-red); color: white; border-color: transparent; transition: transform 0.12s ease, background 0.12s ease, border-color 0.12s ease; } body.suite-shell button:hover, body.suite-shell .button:hover, body.suite-shell input[type="submit"]:hover { transform: translateY(-1px); filter: brightness(1.05); } body.suite-shell button.secondary, body.suite-shell .button.secondary, body.suite-shell button[type="button"].secondary { background: white; color: var(--ss-navy); border-color: var(--ss-line-2); } body.suite-shell button.secondary:hover, body.suite-shell .button.secondary:hover { border-color: var(--ss-blue); background: #f7fbff; } body.suite-shell button:disabled, body.suite-shell .button:disabled, body.suite-shell input[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; transform: none; } /* Status banners */ body.suite-shell .status, body.suite-shell .status.info { display: flex; align-items: flex-start; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(46,120,183,0.10); border: 1px solid rgba(46,120,183,0.25); color: var(--ss-blue); font-size: 13px; margin: 6px 0; } body.suite-shell .status.warn { background: rgba(180,83,9,0.10); border-color: rgba(180,83,9,0.30); color: #8a4a00; } body.suite-shell .status.err { background: rgba(132,13,13,0.10); border-color: rgba(132,13,13,0.30); color: var(--ss-red); } body.suite-shell .status.ok { background: rgba(15,118,110,0.10); border-color: rgba(15,118,110,0.30); color: var(--ss-ok); } /* Lists */ body.suite-shell .small-list { font-size: 13px; line-height: 1.55; padding-left: 22px; } body.suite-shell .small-list li { margin-bottom: 4px; } /* Form grids and inputs */ body.suite-shell .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; } body.suite-shell label { font-size: 11px; font-weight: 700; color: var(--ss-muted); letter-spacing: 0.04em; text-transform: uppercase; display: block; margin-bottom: 2px; } body.suite-shell input[type="text"], body.suite-shell input[type="email"], body.suite-shell input[type="password"], body.suite-shell input[type="number"], body.suite-shell input[type="search"], body.suite-shell input[type="date"], body.suite-shell input[type="tel"], body.suite-shell input[type="url"], body.suite-shell select, body.suite-shell textarea { width: 100%; padding: 6px 8px; border: 1px solid var(--ss-line-2); border-radius: 8px; background: white; color: var(--ss-text); font: inherit; } body.suite-shell input:focus, body.suite-shell select:focus, body.suite-shell textarea:focus { outline: none; border-color: var(--ss-blue); box-shadow: 0 0 0 3px rgba(46,120,183,0.20); } body.suite-shell .checkbox-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; } /* Tables */ body.suite-shell .table-wrap { overflow: auto; border-radius: 8px; border: 1px solid var(--ss-line); } body.suite-shell table { width: 100%; border-collapse: collapse; font-size: 12px; } body.suite-shell table thead th { position: sticky; top: 0; background: var(--ss-surface-2); border-bottom: 1px solid var(--ss-line); padding: 6px 8px; text-align: left; font-weight: 700; color: var(--ss-navy); white-space: nowrap; } body.suite-shell table tbody td { padding: 6px 8px; border-bottom: 1px solid var(--ss-line); vertical-align: top; } body.suite-shell table tbody tr:hover td { background: rgba(46,120,183,0.06); } /* Pills */ body.suite-shell .pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(2,37,68,0.08); color: var(--ss-navy); white-space: nowrap; } body.suite-shell .pill.ok { background: rgba(15,118,110,0.12); color: var(--ss-ok); } body.suite-shell .pill.warn { background: rgba(180,83,9,0.14); color: var(--ss-warn); } body.suite-shell .pill.err { background: rgba(132,13,13,0.14); color: var(--ss-red); } /* Code blocks */ body.suite-shell .code-block, body.suite-shell pre, body.suite-shell code { font-family: "Consolas", "SF Mono", Menlo, monospace; background: var(--ss-surface-2); border: 1px solid var(--ss-line); border-radius: 6px; padding: 2px 6px; font-size: 12px; } body.suite-shell .code-block, body.suite-shell pre { padding: 8px 10px; white-space: pre-wrap; } /* Inline code chips sit on their own --ss-surface-2 background but used to INHERIT the parent's accent color (a pill's info-blue / warn-amber), landing just under WCAG AA on that surface in both modes. Pin them to the neutral ink that pairs with surface-2. */ body.suite-shell code { color: var(--ss-text); } /* "meta" eyebrows */ body.suite-shell .meta { font-size: 10px; font-weight: 800; color: var(--ss-muted); letter-spacing: 0.06em; text-transform: uppercase; } /* "footer-note" small print */ body.suite-shell .footer-note { font-size: 11px; color: var(--ss-muted); margin-top: 6px; } /* "actions" button rows */ body.suite-shell .actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } /* "grid two" / "grid three" generic columns */ body.suite-shell .grid.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.suite-shell .grid.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } @media (max-width: 1100px) { body.suite-shell .grid.two, body.suite-shell .grid.three { grid-template-columns: 1fr; } } /* ============================================================================ v3.8.3 — UNIFIED SUITE HOME BUTTON (across all 14 apps) ---------------------------------------------------------------------------- The shell JS injects

Suite Home

at the top of every app's hero. Below: identical styling for that button on every app, plus aggressive hide rules that remove every legacy back-link variant once the body has been marked .amac-shell-uniformed (which the shell only does AFTER the new button is in the DOM, so users always have a visible way back). ========================================================================= */ /* The bar that wraps the button — sits as the very first child of the hero */ .amac-shell-bar { display: flex; align-items: center; gap: 8px; margin: 0 0 10px 0; flex-wrap: wrap; } /* The button itself — solid AMAC navy pill, white text, 36px tall */ .amac-shell-home-btn, a.amac-shell-home-btn { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 16px; background: #022544 !important; color: #ffffff !important; border: 1px solid rgba(255, 255, 255, 0.30) !important; border-radius: 999px !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.01em !important; text-decoration: none !important; white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.20); transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease; cursor: pointer; } .amac-shell-home-btn:hover, a.amac-shell-home-btn:hover { background: #0d3a63 !important; color: #ffffff !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.28); transform: translateY(-1px); } .amac-shell-home-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.30); } .amac-shell-home-btn:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; } .amac-shell-home-btn .amac-shell-home-arrow { font-size: 15px; line-height: 1; transform: translateY(-1px); } /* On apps where the hero is dark (suite shell standard), the button reads well as-is. On apps where the hero might be light, the navy fill still reads cleanly, so no hero-aware variants are needed. */ /* ---------------------------------------------------------------------------- Hide every legacy back-link variant — only after we've successfully injected the uniform button (body.amac-shell-uniformed is set in the JS). ------------------------------------------------------------------------- */ body.amac-shell-uniformed .ss-back-link, body.amac-shell-uniformed a.ss-back-link, body.amac-shell-uniformed .suite-back-link, body.amac-shell-uniformed a.suite-back-link, body.amac-shell-uniformed .hero a.btn-ghost[href="/index.html"], body.amac-shell-uniformed .hero a.btn-ghost[href="/"], body.amac-shell-uniformed .ss-hero a.btn-ghost[href="/index.html"], body.amac-shell-uniformed .ss-hero a.btn-ghost[href="/"], body.amac-shell-uniformed .hero-actions a.btn-ghost[href="/index.html"], body.amac-shell-uniformed .hero-actions a.btn-ghost[href="/"], body.amac-shell-uniformed a.menu-item[href="/index.html"], body.amac-shell-uniformed a.menu-item[href="/"], body.amac-shell-uniformed #suite-nav .ss-back-link, body.amac-shell-uniformed #suite-nav .suite-back-link { display: none !important; } /* The /js/suite-nav.js script populates #suite-nav with a "Suite Home" link on some legacy apps. Let those panels stay (they may also include Log Out, etc.) but trim leading "Suite Home"-style anchors in case they made it past the hide rules above. */ body.amac-shell-uniformed #suite-nav a[href="/index.html"]:first-child, body.amac-shell-uniformed #suite-nav a[href="/"]:first-child { display: none !important; } /* If an app placed a back-link inline inside .ss-hero-actions (admin-center etc.), hide it once we're uniformed. */ body.amac-shell-uniformed .ss-hero-actions .ss-back-link { display: none !important; } /* Make sure the new bar reads well on the dark hero band */ .ss-hero .amac-shell-bar, section.hero .amac-shell-bar, .hero .amac-shell-bar { margin-top: 0; margin-bottom: 12px; }