/* ============================================================
xplusplus.ai — "Precision Forge" Design System
------------------------------------------------------------
Light, engineering-blueprint aesthetic for an AI-native
D365 F&O development platform.
USAGE (every page):
(after shared-header.css)
Fonts: Sora (display) + Instrument Sans (body) + IBM Plex Mono (labels/code)
VARIANTS (set class on ):
(none) → marketing site
.theme-portal → user portal (console feel, denser)
.theme-admin → admin portal (graphite + amber signal)
NOTE: tokens are declared at :root:root so they intentionally
out-rank per-page inline :root { ... } blocks.
============================================================ */
:root:root {
/* Surfaces */
--bg: #f6f8fc;
--bg-card: #ffffff;
--bg-secondary: #eef2fa;
--bg-tertiary: #e7edf8;
--bg-light: #eef2fa;
--bg-section: #ffffff;
--panel: #0b1224; /* dark terminal / showcase panels */
--panel-2: #101a33;
/* Ink */
--text: #0b1426;
--ink: #0b1426;
--muted: #5b6b84;
--text-secondary: #5b6b84;
--text-muted: #8294ad;
/* Brand */
--primary: #2e5cff;
--primary-dark: #1e42d8;
--primary-light: rgba(46, 92, 255, 0.10);
--accent: #7b4dff;
--cyan: #00b8d9;
--grad-brand: linear-gradient(120deg, #2e5cff 0%, #4d7cff 55%, #7b4dff 100%);
--grad-soft: linear-gradient(120deg, rgba(46,92,255,.08), rgba(123,77,255,.08));
/* Semantics */
--success: #0e9f6e;
--warning: #d97706;
--danger: #dc2f4c;
--info: #0891b2;
/* Lines & depth */
--border: #dfe7f5;
--border-light: #eaeff9;
--shadow-sm: 0 1px 2px rgba(13, 38, 90, 0.05);
--shadow-md: 0 2px 6px rgba(13, 38, 90, 0.05), 0 10px 28px rgba(13, 38, 90, 0.08);
--shadow-lg: 0 4px 10px rgba(13, 38, 90, 0.06), 0 24px 60px rgba(13, 38, 90, 0.12);
--ring: 0 0 0 3px rgba(46, 92, 255, 0.18);
/* Geometry */
--radius-sm: 8px;
--radius: 10px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 22px;
/* Type */
--font: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
--font-family: var(--font);
--font-display: 'Sora', var(--font);
--font-mono: 'IBM Plex Mono', 'Courier Prime', Consolas, monospace;
}
/* ---------- Portal variant: same DNA, console temperature ---------- */
body.theme-portal {
--bg: #f4f7fc;
--accent: #00b8d9;
--grad-brand: linear-gradient(120deg, #2e5cff 0%, #4d7cff 60%, #00b8d9 100%);
}
/* ---------- Admin variant: graphite + amber signal ---------- */
body.theme-admin {
--primary: #1f2c45;
--primary-dark: #131d31;
--primary-light: rgba(31, 44, 69, 0.08);
--accent: #f59e0b;
--grad-brand: linear-gradient(120deg, #1f2c45 0%, #32415f 100%);
}
/* ============================================================
ATMOSPHERE — blueprint grid + soft glows + grain
============================================================ */
body {
background:
/* faint grain */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.018'/%3E%3C/svg%3E"),
/* glows */
radial-gradient(1100px 520px at 12% -8%, rgba(46, 92, 255, 0.07), transparent 60%),
radial-gradient(900px 480px at 88% 4%, rgba(123, 77, 255, 0.055), transparent 60%),
/* blueprint grid */
linear-gradient(to right, rgba(46, 92, 255, 0.032) 1px, transparent 1px),
linear-gradient(to bottom, rgba(46, 92, 255, 0.032) 1px, transparent 1px),
var(--bg) !important;
background-size: 160px 160px, auto, auto, 36px 36px, 36px 36px, auto !important;
background-attachment: fixed !important;
color: var(--text);
font-family: var(--font);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: rgba(46, 92, 255, 0.18); }
/* thin, branded scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c6d2ea; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #a9b9da; }
/* ============================================================
TYPOGRAPHY
============================================================ */
h1, h2, h3, .font-display {
font-family: var(--font-display);
letter-spacing: -0.022em;
color: var(--text);
}
h1 { font-weight: 700; }
h2 { font-weight: 700; }
/* Mono uppercase section label — the system's signature voice.
Usage: Autonomous Engine
(the ▸ is automatic) */
.eyebrow {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--primary);
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.eyebrow::before {
content: '';
width: 22px;
height: 1.5px;
background: var(--grad-brand);
display: inline-block;
}
/* Gradient keyword inside headlines: autonomous */
.grad-text {
background: var(--grad-brand);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ============================================================
BUTTONS
============================================================ */
.btn,
.btn-primary,
.btn-ghost,
.btn-dark {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 9px;
padding: 13px 26px;
border-radius: var(--radius);
font-family: var(--font);
font-size: 0.95rem;
font-weight: 600;
text-decoration: none;
border: 1px solid transparent;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
white-space: nowrap;
}
.btn-primary {
background: var(--grad-brand);
color: #fff;
box-shadow: 0 1px 2px rgba(20, 45, 130, 0.25), 0 6px 18px rgba(46, 92, 255, 0.28);
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 2px 4px rgba(20, 45, 130, 0.25), 0 12px 28px rgba(46, 92, 255, 0.38);
color: #fff;
}
.btn-ghost {
background: rgba(255, 255, 255, 0.7);
color: var(--text);
border-color: var(--border);
}
.btn-ghost:hover {
transform: translateY(-2px);
border-color: #b9c8e8;
box-shadow: var(--shadow-md);
color: var(--primary);
}
.btn-dark {
background: var(--panel);
color: #eaf0ff;
box-shadow: 0 6px 18px rgba(11, 18, 36, 0.3);
}
.btn-dark:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(11, 18, 36, 0.38); color: #fff; }
.btn svg, .btn-primary svg, .btn-ghost svg, .btn-dark svg {
width: 17px; height: 17px; fill: currentColor;
transition: transform 0.18s ease;
}
.btn-primary:hover svg, .btn-ghost:hover svg { transform: translateX(3px); }
/* ============================================================
CARDS
============================================================ */
.x-card {
position: relative;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 28px;
box-shadow: var(--shadow-sm);
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
overflow: hidden;
}
.x-card::before {
/* gradient hairline that reveals on hover */
content: '';
position: absolute;
inset: 0 0 auto 0;
height: 2px;
background: var(--grad-brand);
opacity: 0;
transition: opacity 0.22s ease;
}
.x-card:hover {
transform: translateY(-4px);
border-color: #c9d6f2;
box-shadow: var(--shadow-lg);
}
.x-card:hover::before { opacity: 1; }
/* mono index number for card grids: 01 / 02 / 03 */
.x-card .card-index {
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0.18em;
color: var(--text-muted);
}
/* ============================================================
CHIPS, BADGES, STATUS
============================================================ */
.x-chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 5px 13px;
border-radius: 999px;
border: 1px solid var(--border);
background: rgba(255, 255, 255, 0.75);
font-family: var(--font-mono);
font-size: 0.72rem;
font-weight: 500;
letter-spacing: 0.06em;
color: var(--muted);
}
.x-badge {
display: inline-block;
padding: 4px 11px;
border-radius: 6px;
background: var(--grad-brand);
color: #fff;
font-family: var(--font-mono);
font-size: 0.66rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
}
/* live status dot: */
.status-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--success);
display: inline-block;
box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.5);
animation: x-pulse 2.2s infinite;
}
@keyframes x-pulse {
0% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(14, 159, 110, 0); }
100% { box-shadow: 0 0 0 0 rgba(14, 159, 110, 0); }
}
/* ============================================================
CODE WINDOW — dark terminal panel with traffic lights
============================================================ */
.code-window {
background: var(--panel);
border: 1px solid rgba(120, 150, 255, 0.16);
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: 0 20px 50px rgba(11, 18, 36, 0.35);
text-align: left;
}
.code-window-bar {
display: flex;
align-items: center;
gap: 7px;
padding: 11px 16px;
background: rgba(255, 255, 255, 0.04);
border-bottom: 1px solid rgba(120, 150, 255, 0.12);
}
.code-window-bar span {
width: 11px; height: 11px; border-radius: 50%;
background: #2c3a5e;
}
.code-window-bar span:nth-child(1) { background: #ff5f57; }
.code-window-bar span:nth-child(2) { background: #febc2e; }
.code-window-bar span:nth-child(3) { background: #28c840; }
.code-window-title {
margin-left: 10px;
font-family: var(--font-mono);
font-style: normal;
font-size: 0.72rem;
letter-spacing: 0.08em;
color: #6d7fa8;
}
.code-window pre {
margin: 0;
padding: 20px 22px;
font-family: var(--font-mono);
font-size: 0.83rem;
line-height: 1.75;
color: #c8d4f2;
overflow-x: auto;
white-space: pre;
}
.code-window .c-cmd { color: #8be9c3; }
.code-window .c-key { color: #79a8ff; }
.code-window .c-str { color: #ffd98c; }
.code-window .c-dim { color: #5d6f96; }
.code-window .c-ok { color: #34d399; }
.code-window .c-warn{ color: #fbbf24; }
/* ============================================================
DARK SHOWCASE SECTION
============================================================ */
.section-dark {
background:
radial-gradient(900px 420px at 85% -10%, rgba(123, 77, 255, 0.16), transparent 60%),
radial-gradient(700px 380px at 8% 110%, rgba(46, 92, 255, 0.14), transparent 60%),
linear-gradient(to right, rgba(122, 152, 255, 0.05) 1px, transparent 1px),
linear-gradient(to bottom, rgba(122, 152, 255, 0.05) 1px, transparent 1px),
var(--panel);
background-size: auto, auto, 36px 36px, 36px 36px, auto;
color: #d7e0f5;
border-radius: var(--radius-xl);
border: 1px solid rgba(120, 150, 255, 0.14);
}
.section-dark h2, .section-dark h3 { color: #f2f6ff; }
.section-dark .eyebrow { color: #8fb0ff; }
.section-dark p { color: #a8b6d8; }
/* ============================================================
TABLES (shared base for portal/admin)
============================================================ */
.x-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--bg-card);
border: 1px solid var(--border);
border-radius: var(--radius-md);
overflow: hidden;
font-size: 0.9rem;
}
.x-table th {
font-family: var(--font-mono);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--muted);
text-align: left;
padding: 12px 16px;
background: var(--bg-secondary);
border-bottom: 1px solid var(--border);
}
.x-table td {
padding: 13px 16px;
border-bottom: 1px solid var(--border-light);
color: var(--text);
}
.x-table tr:last-child td { border-bottom: none; }
.x-table tbody tr { transition: background 0.15s ease; }
.x-table tbody tr:hover { background: rgba(46, 92, 255, 0.035); }
/* ============================================================
FORMS — gentle global polish
============================================================ */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
font-family: var(--font);
border-radius: var(--radius);
border: 1px solid var(--border);
transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus,
input[type="number"]:focus, input[type="search"]:focus, select:focus, textarea:focus {
outline: none;
border-color: var(--primary);
box-shadow: var(--ring);
}
/* ============================================================
FOOTER — global restyle (element-level, beats page rules)
============================================================ */
body > footer {
text-align: center;
padding: 44px 24px 38px;
margin-top: 64px;
color: var(--muted);
font-size: 0.88rem;
background: transparent;
border-top: 1px solid var(--border);
position: relative;
}
body > footer::before {
/* gradient hairline accent centered on the divider */
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 2px;
background: var(--grad-brand);
border-radius: 2px;
}
body > footer a { color: var(--primary); text-decoration: none; }
body > footer a:hover { text-decoration: underline; }
/* ============================================================
MOTION
============================================================ */
@keyframes x-fade-up {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes x-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes x-float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-9px); }
}
@keyframes x-orbit-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes x-dash {
to { stroke-dashoffset: -120; }
}
@keyframes x-shimmer {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* page-load stagger: add .anim + .d1..d6 */
.anim { opacity: 0; animation: x-fade-up 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.15s; }
.d3 { animation-delay: 0.25s; } .d4 { animation-delay: 0.38s; }
.d5 { animation-delay: 0.5s; } .d6 { animation-delay: 0.62s; }
/* scroll reveal: add .reveal, toggled by IntersectionObserver adding .in */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
.anim, .reveal { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
.status-dot { animation: none; }
}