/* Shared suite shell — variables, nav bar, title badge. All rules are scoped under .suite-shell so they only activate when initSuiteShell() tags the . */ /* Design tokens */ :root { --suite-bg: #f3efe5; --suite-panel: #fffaf0; --suite-ink: #1f1f1f; --suite-border: #2f2f2f; --suite-accent: #1d6f5f; } /* Background gradient */ body.suite-shell { background: radial-gradient(circle at 10% 20%, #e7f6f2 0, transparent 35%), radial-gradient(circle at 90% 80%, #fde2c9 0, transparent 30%), var(--suite-bg); color: var(--suite-ink); } /* Navigation bar */ .suite-shell .suite-nav { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; } .suite-shell .suite-nav a { display: inline-block; text-decoration: none; border: 2px solid var(--suite-border); border-radius: 8px; padding: 6px 10px; color: var(--suite-ink); background: #fff; font-weight: 700; font-size: 0.9rem; transition: transform 120ms ease, background-color 120ms ease; } .suite-shell .suite-nav a:hover { background: #f6f6f6; transform: translateY(-1px); } /* Active-page highlight */ .suite-shell .suite-nav a[aria-current="page"] { background: var(--suite-accent); color: #fff; } /* Title badge */ .suite-shell .suite-app-title { display: inline-flex; align-items: center; gap: 8px; } .suite-shell .suite-app-badge { border: 2px solid var(--suite-border); border-radius: 999px; padding: 2px 10px; font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase; background: #fff; }