/* ============================================================
* Builder page -> Zoho Backstage Custom CSS
* Paste into: Website Settings -> Custom Code -> Custom CSS.
* Pair with the exported Custom JavaScript block.
* Fonts: uses Backstage's own Zoho Puvi (none embedded).
* ============================================================ */
body.me-cover-active section.bs-section{
position:absolute!important;top:0!important;left:0!important;right:0!important;
opacity:0!important;pointer-events:none!important;z-index:-999!important;
visibility:hidden!important;contain:layout!important;
}
body.me-cover-active .bs-page-container,
body.me-cover-active .page-container,
body.me-cover-active .microsite-content,
body.me-cover-active main{
min-height:0!important;height:auto!important;padding-bottom:0!important;margin-bottom:0!important;
}
body.me-cover-active main > :not(#me-cover-root),
body.me-cover-active .bs-page-container > :not(#me-cover-root){
position:absolute!important;top:0!important;left:0!important;right:0!important;
height:auto!important;min-height:0!important;margin:0!important;
opacity:0!important;visibility:hidden!important;pointer-events:none!important;z-index:-999!important;
}
#me-cover-root{width:100%;margin:0;padding:0;position:relative;z-index:1;background:#fff;}
#me-cover-root *{box-sizing:border-box;}
#me-cover-root,#me-cover-root *{max-height:none!important;}
#me-cover-root>*{flex:0 0 auto!important;}
#me-cover-root section{flex:0 0 auto!important;min-height:0;}
/* Uncomment to make the hero use Backstage's font instead of the design font:
#me-cover-root > section:first-of-type,
#me-cover-root > section:first-of-type *{font-family:inherit!important;}
*/
/* ===== design css ===== */
/* ============================================================
ManageEngine — Engine Design System · tokens
Source: reconstructed from Figma (Engine DS v0.1)
============================================================ */
/* -------- Zoho Puvi webfont (brand files, user-supplied) --------
Each weight registered with .otf primary + .ttf fallback.
The Serif, Slab, Compact, and Mono variants are registered as
distinct families so specimens can compare them directly. */
/* --- Zoho Puvi (sans, default) --- */
/* --- Zoho Puvi Serif (display / editorial) --- */
/* --- Zoho Puvi Slab (display / marketing) --- */
/* --- Zoho Puvi Compact (dense UI) --- */
/* --- Zoho Puvi Mono (code / tabular) --- */
:root {
/* ------------------------------------------------------------------
BRAND — primary is Star Command Blue (#0078C8).
Secondary is a derived warm amber, complementary to the primary.
------------------------------------------------------------------ */
/* Primary — ManageEngine brand blue ramp (50 → 900) */
--blue-50: #E6F1F8;
--blue-100: #CCE4F0;
--blue-200: #99C9E2;
--blue-300: #66ADD3;
--blue-400: #3392C5;
--blue-500: #0078B6; /* documented brand reference — palette + logo only */
--blue-600: #006499;
--blue-700: #00507B;
--blue-800: #003C5C;
--blue-900: #00283D;
/* Operational primary — applied across all UI surfaces. */
--me-primary: #0045D3;
--me-primary-hover: #003BB4;
--me-primary-press: #002F8B;
--me-primary-tint: rgba(0,69,211,0.10);
--me-primary-tint-2:rgba(0,69,211,0.18);
/* Legacy alias so existing utilities keep working */
--me-blue: var(--me-primary);
--me-blue-tint: var(--me-primary-tint);
/* Warm amber — retained as a supporting accent (no longer the secondary) */
--amber-50: #FEF5E7;
--amber-100: #FCEAC5;
--amber-200: #F9D48B;
--amber-300: #F5BE52;
--amber-400: #F2A818;
--amber-500: #D98C00;
--amber-600: #B87200;
--amber-700: #8C5600;
/* Secondary — Spanish Green */
--green-50: #E6F6EE;
--green-100: #C2E9D4;
--green-200: #8FD7B0;
--green-300: #4FC088;
--green-400: #1FAE6E;
--green-500: #00A05A; /* ★ secondary */
--green-600: #008049;
--green-700: #006238;
--me-secondary: var(--green-500);
--me-secondary-hover: var(--green-600);
--me-secondary-tint: rgba(0,160,90,0.12);
/* CTA — button primary action color */
--cta-500: #DE002B;
--cta-600: #C30024;
--cta-700: #A30018;
--cta-tint: rgba(222,0,43,0.10);
--cta-tint-2: rgba(222,0,43,0.18);
--me-cta: var(--cta-500);
--me-cta-hover: var(--cta-600);
--me-cta-press: var(--cta-700);
/* Supporting brand swatches (from the supplied swatch sheet) */
--me-red: #C82332; /* Fire Engine Red */
--me-green: #00A05A; /* Spanish Green */
--me-green-deep: #008049;
--me-yellow: #FAAA1E; /* Cyber Yellow */
--me-yellow-hover: var(--amber-400);
--me-yellow-press: var(--amber-500);
--me-pink: #E959D9;
--me-magenta: #D51A52; /* error accent (legacy alias) */
/* Neutrals (warm, pulled from the DS) */
--n-000: #FFFFFF;
--n-100: #F5F5F5; /* surface-sunk */
--n-150: #ECECEC; /* divider */
--n-200: #E8E8E8;
--n-300: #E5E0EB;
--n-400: #D4D2D5;
--n-500: #ABA7AF; /* muted text */
--n-600: #666666;
--n-700: #404040; /* body */
--n-800: #4B3A5A; /* tertiary headline */
--n-900: #242424; /* display */
--n-1000: #1A141F; /* near-black, primary text */
--n-ink: #000000;
/* Surfaces */
--surface: var(--n-000);
--surface-sunk: var(--n-100);
--surface-inverse: var(--n-1000);
--surface-footer-top: #262626;
--surface-footer-deep: #0D0D0D;
--border-soft: var(--n-150);
--border-med: var(--n-300);
/* Type */
--font-sans: "Zoho Puvi", "Inter", "Figtree", ui-sans-serif, system-ui,
-apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
--font-serif: "Zoho Puvi Serif", ui-serif, Georgia, "Times New Roman", serif;
--font-slab: "Zoho Puvi Slab", "Zoho Puvi", ui-serif, Georgia, serif;
--font-compact: "Zoho Puvi Compact", "Zoho Puvi", var(--font-sans);
--font-mono: "Zoho Puvi Mono", ui-monospace, "SF Mono", "Menlo",
"Cascadia Mono", "Consolas", monospace;
/* Type scale — 1rem = 16px */
--fs-display-xl: 66px; /* hero / oversized display */
--fs-display: 56px; /* hero / page title */
--fs-h1: 46px;
--fs-h2: 36px;
--fs-h3: 32px;
--fs-h4: 28px;
--fs-h5: 22px;
--fs-body-l: 18px;
--fs-body: 16px;
--fs-label-l: 14px;
--fs-label-m: 12px;
--lh-tight: 1.2; /* @kind font */
--lh-heading: 1.3; /* @kind font */
--lh-body: 1.5; /* @kind font */
/* 4px grid — spacing */
--sp-1: 4px;
--sp-2: 8px;
--sp-3: 12px;
--sp-4: 16px;
--sp-5: 20px;
--sp-6: 24px;
--sp-7: 28px;
--sp-8: 32px;
--sp-9: 36px;
--sp-10: 40px;
--sp-12: 48px;
--sp-14: 56px;
--sp-16: 64px;
--sp-20: 80px;
--sp-24: 96px;
/* Radius — 4x steps */
--r-none: 0px;
--r-xs: 2px;
--r-sm: 4px;
--r-md: 8px;
--r-lg: 12px;
--r-xl: 16px;
--r-2xl: 24px;
--r-pill: 999px;
/* Shadow — cool, keyed to primary blue */
--shadow-still: 0px 4px 10px 0px rgba(0,60,92,0.10);
--shadow-hover: 0px 10px 17px 0px rgba(0,60,92,0.12);
--shadow-sm: 0px 8px 16px 0px rgba(0,60,92,0.10);
--shadow-md: 0px 15px 30px 0px rgba(0,60,92,0.12);
--shadow-lg: 0px 20px 44px 0px rgba(0,60,92,0.28);
/* Motion */
--dur-instant: 60ms; /* @kind other */
--dur-fast: 120ms; /* @kind other */
--dur-base: 200ms; /* @kind other */
--dur-slow: 400ms; /* @kind other */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
/* Breakpoints (documented) */
--bp-mobile: 576px;
--bp-ipad: 768px;
--bp-ipad-l: 992px;
--bp-ipad-x: 1025px;
--bp-desk: 1200px;
--bp-desk-l: 1440px;
}
/* ---- Base + utilities ---- */
html, body { margin:0; }
body {
font-family: var(--font-sans);
color: var(--n-1000);
background: var(--surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
* { box-sizing: border-box; }
.me-display-xl { font-size: var(--fs-display-xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.025em; color: var(--n-900); }
.me-display { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--n-900); }
.me-h1 { font-size: var(--fs-h1); font-weight: 700; line-height: var(--lh-heading); }
.me-h2 { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); }
.me-h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); }
.me-h4 { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-heading); }
.me-h5 { font-size: var(--fs-h5); font-weight: 700; line-height: var(--lh-heading); }
.me-body-l { font-size: var(--fs-body-l); line-height: var(--lh-body); letter-spacing: 0.01em; }
.me-body { font-size: var(--fs-body); line-height: var(--lh-body); letter-spacing: 0.01em; }
.me-label-l { font-size: var(--fs-label-l); line-height: var(--lh-body); }
.me-label-m { font-size: var(--fs-label-m); line-height: var(--lh-body); }
/* ============================================================
TYPE ROLES
The utilities above name a SIZE. These name a JOB — they are what
keeps a page's vertical hierarchy honest. Reach for a role first;
drop to a raw utility only for one-off specimen text.
One rule carries most of the weight: --me-t-hero is the ONLY
display-scale role, and a page gets exactly ONE. Every heading
below the hero starts at .me-t-section. A section further down the
page that renders at display size is the single most common way a
layout stops reading as a hierarchy.
Hero XL .me-t-hero-xl 66 flagship marketing hero
Hero .me-t-hero 56 compact hero (video, campaign, inner page)
Section .me-t-section 36 top-level section heading
Subsection .me-t-sub 32 a heading inside a section
Card .me-t-card 22 card or panel title
Cell .me-t-cell 18 dense grid-cell / list-item title (bold)
Eyebrow .me-t-eyebrow 12 label above a title
Lede .me-t-lede 18 the paragraph under a title (regular)
Body .me-t-body 16 default running copy
Meta .me-t-meta 14 captions, timestamps, byline
.me-t-cell and .me-t-lede are both 18px on purpose: same size, different
job. A cell title is bold and near-black; a lede is regular and muted.
A role owns FIVE properties: font-size, font-weight, line-height,
letter-spacing, and color. That is the point — it is a level, not a size.
If a pattern must differ on one of them, re-declare just that property
AFTER the role class in the pattern's own rule; never fork the size.
============================================================ */
.me-t-hero-xl { font-size: var(--fs-display-xl); font-weight: 700; line-height: 1.05; letter-spacing: -0.025em; color: var(--n-900); }
.me-t-hero { font-size: var(--fs-display); font-weight: 700; line-height: var(--lh-tight); letter-spacing: -0.02em; color: var(--n-900); }
.me-t-section { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.02em; color: var(--n-900); }
.me-t-sub { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.015em; color: var(--n-900); }
.me-t-card { font-size: var(--fs-h5); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.005em; color: var(--n-1000); }
.me-t-cell { font-size: var(--fs-body-l); font-weight: 700; line-height: var(--lh-heading); letter-spacing: -0.005em; color: var(--n-1000); }
.me-t-eyebrow { font-size: var(--fs-label-m); font-weight: 700; line-height: var(--lh-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--me-primary); }
.me-t-lede { font-size: var(--fs-body-l); font-weight: 400; line-height: var(--lh-body); color: var(--n-700); }
.me-t-body { font-size: var(--fs-body); font-weight: 400; line-height: var(--lh-body); letter-spacing: 0.01em; color: var(--n-700); }
.me-t-meta { font-size: var(--fs-label-l); font-weight: 400; line-height: var(--lh-body); color: var(--n-600); }
/* On a dark or brand surface, roles that carry a muted neutral need
to invert — otherwise the lede disappears into the background. */
.me-section--brand .me-t-lede, .me-section--brand-deep .me-t-lede, .me-section--ink .me-t-lede,
.me-section--brand .me-t-body, .me-section--brand-deep .me-t-body, .me-section--ink .me-t-body { color: rgba(255,255,255,0.85); }
.me-section--brand .me-t-hero-xl, .me-section--brand-deep .me-t-hero-xl, .me-section--ink .me-t-hero-xl,
.me-section--brand .me-t-hero, .me-section--brand-deep .me-t-hero, .me-section--ink .me-t-hero,
.me-section--brand .me-t-section, .me-section--brand-deep .me-t-section, .me-section--ink .me-t-section,
.me-section--brand .me-t-sub, .me-section--brand-deep .me-t-sub, .me-section--ink .me-t-sub,
.me-section--brand .me-t-cell, .me-section--brand-deep .me-t-cell, .me-section--ink .me-t-cell,
.me-section--brand .me-t-card, .me-section--brand-deep .me-t-card, .me-section--ink .me-t-card { color: #fff; }
.me-section--brand .me-t-eyebrow, .me-section--brand-deep .me-t-eyebrow, .me-section--ink .me-t-eyebrow { color: rgba(255,255,255,0.72); }
.me-section--brand .me-t-meta, .me-section--brand-deep .me-t-meta, .me-section--ink .me-t-meta { color: rgba(255,255,255,0.7); }
/* ============================================================
BUTTONS · squared corners with a trailing arrow glyph
Radius : sm/md 4px · lg/xl 8px. NEVER --r-pill: a fully rounded CTA is the
pre-system button and reads as a different brand.
The arrow carries no badge chrome — no circle, no fill; see .me-btn__icon.
Sizes : xl · lg · md · sm
Variants : main · secondary · text · ghost · accent
============================================================ */
.me-btn {
font-family: var(--font-sans);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border: 1.5px solid transparent;
border-radius: var(--r-sm);
display: inline-flex;
align-items: center;
gap: 14px;
cursor: pointer;
user-select: none;
white-space: nowrap;
position: relative;
text-decoration: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease,
box-shadow 140ms ease, transform 60ms ease;
}
.me-btn:active { transform: translateY(1px); }
/* trailing arrow glyph (use .me-btn__icon span with an inline svg) —
no badge chrome: the glyph inherits the label's color */
.me-btn__icon {
display: inline-grid;
place-items: center;
flex-shrink: 0;
color: currentColor;
transition: inherit;
}
.me-btn__icon svg { display: block; }
/* leading version — use when icon should sit before label */
.me-btn__icon--lead { order: -1; }
/* --- Size : XL --- */
.me-btn--xl { height: 56px; padding: 0 32px; font-size: var(--fs-body); gap: 14px; border-radius: var(--r-md); }
.me-btn--xl .me-btn__icon svg { width: 16px; height: 16px; }
/* --- Size : Large --- */
.me-btn--lg { height: 46px; padding: 0 24px; font-size: var(--fs-label-l); gap: 12px; border-radius: var(--r-md); }
.me-btn--lg .me-btn__icon svg { width: 14px; height: 14px; }
/* --- Size : Medium --- */
.me-btn--md { height: 38px; padding: 0 20px; font-size: var(--fs-label-m); letter-spacing: 0.06em; gap: 10px; }
.me-btn--md .me-btn__icon svg { width: 12px; height: 12px; }
/* --- Size : Field ---
Pairs a button with an input, select, or search on the same row. Height and
radius come from the field tokens, not the button scale, so the two controls
line up exactly. The button scale has no 54px step by design — reach for this
only when a button sits BESIDE a field; a standalone button uses --lg. */
.me-btn--field { height: var(--me-field-h); padding: 0 24px; font-size: var(--fs-label-l); gap: 12px; border-radius: var(--me-field-radius); }
.me-btn--field-sm { height: var(--me-field-h-sm); padding: 0 20px; font-size: var(--fs-label-m); letter-spacing: 0.06em; gap: 10px; border-radius: var(--me-field-radius); }
.me-btn--field-lg { height: var(--me-field-h-lg); padding: 0 32px; font-size: var(--fs-body); gap: 14px; border-radius: var(--me-field-radius); }
.me-btn--field .me-btn__icon svg { width: 14px; height: 14px; }
.me-btn--field-sm .me-btn__icon svg { width: 12px; height: 12px; }
.me-btn--field-lg .me-btn__icon svg { width: 16px; height: 16px; }
/* --- Size : Small --- */
.me-btn--sm { height: 28px; padding: 0 14px; font-size: var(--fs-label-m); letter-spacing: 0.08em; gap: 8px; }
.me-btn--sm .me-btn__icon svg { width: 11px; height: 11px; }
/* ---------- Variants ---------- */
/* PRIMARY · filled CTA red */
.me-btn--main { background: var(--me-cta); color: #fff; }
.me-btn--main:hover { background: var(--me-cta-hover); box-shadow: 0 6px 18px rgba(222,0,43,0.32); }
.me-btn--main:active { background: var(--me-cta-press); box-shadow: none; }
.me-btn--main[disabled], .me-btn--main.is-disabled {
background: var(--n-200); color: var(--n-500); cursor: not-allowed; box-shadow: none;
}
.me-btn--main[disabled] .me-btn__icon { color: var(--n-500); }
/* SECONDARY · blue outline at rest; fills CTA red on hover & press */
.me-btn--secondary { background: transparent; color: var(--me-primary); border-color: var(--me-primary); }
.me-btn--secondary:hover { background: var(--me-cta); color: #fff; border-color: var(--me-cta); }
.me-btn--secondary:active { background: var(--me-cta-press); color: #fff; border-color: var(--me-cta-press); }
.me-btn--secondary[disabled] {
color: var(--n-500); border-color: var(--n-400); background: transparent; cursor:not-allowed;
}
.me-btn--secondary[disabled] .me-btn__icon { color: var(--n-500); }
.me-btn--secondary.on-dark { color: #fff; border-color: #fff; }
.me-btn--secondary.on-dark:hover { background: var(--me-cta); color: #fff; border-color: var(--me-cta); }
/* TEXT · no chrome, arrow trails */
.me-btn--text { background: transparent; color: var(--me-cta); border-color: transparent;
padding-left: 0; padding-right: 0; gap: 8px; }
.me-btn--text .me-btn__icon { color: var(--me-cta); }
.me-btn--text:hover { color: var(--me-cta-hover); }
.me-btn--text:hover .me-btn__icon { color: var(--me-cta-hover); transform: translateX(2px); }
.me-btn--text[disabled] { color: var(--n-500); cursor: not-allowed; }
.me-btn--text[disabled] .me-btn__icon { color: var(--n-500); transform: none; }
/* GHOST · neutral outline */
.me-btn--ghost { background: transparent; color: var(--n-1000); border-color: var(--n-400); }
.me-btn--ghost:hover { border-color: var(--n-700); }
.me-btn--ghost[disabled] { color: var(--n-500); border-color: var(--n-300); cursor:not-allowed; }
.me-btn--ghost[disabled] .me-btn__icon { color: var(--n-500); }
/* ACCENT · Spanish Green for emphasis moments */
.me-btn--accent { background: var(--me-secondary); color: #fff; }
.me-btn--accent:hover { background: var(--me-secondary-hover); }
/* YELLOW · filled Cyber Yellow. Carries dark ink, not white — white on #FAAA1E
fails contrast at every size. Reserve for warm marketing moments, never for
warnings (that is me-alert--warn) or for the page's single CTA (that is --main). */
.me-btn--yellow { background: var(--me-yellow); color: var(--n-1000); }
.me-btn--yellow .me-btn__icon { color: var(--n-1000); }
.me-btn--yellow:hover { background: var(--me-yellow-hover); box-shadow: 0 6px 18px rgba(250,170,30,0.38); }
.me-btn--yellow:active { background: var(--me-yellow-press); color: #fff; box-shadow: none; }
.me-btn--yellow[disabled], .me-btn--yellow.is-disabled {
background: var(--n-200); color: var(--n-500); cursor: not-allowed; box-shadow: none;
}
.me-btn--yellow[disabled] .me-btn__icon { color: var(--n-500); }
/* YELLOW SECONDARY · the supporting half of the pair. White fill with a neutral
hairline, so it recedes beside the filled yellow instead of competing with it. */
.me-btn--yellow-secondary { background: var(--n-000); color: var(--n-1000); border-color: var(--border-med); }
.me-btn--yellow-secondary .me-btn__icon { color: var(--n-1000); }
.me-btn--yellow-secondary:hover { background: var(--n-000); color: var(--n-1000); border-color: var(--me-yellow); box-shadow: var(--shadow-hover); }
.me-btn--yellow-secondary:active { background: var(--n-100); color: var(--n-1000); border-color: var(--me-yellow); box-shadow: none; }
.me-btn--yellow-secondary[disabled] {
background: var(--n-000); color: var(--n-500); border-color: var(--n-300); cursor: not-allowed; box-shadow: none;
}
.me-btn--yellow-secondary[disabled] .me-btn__icon { color: var(--n-500); }
/* On a yellow or dark band the white fill would blow out — outline instead. */
.me-btn--yellow-secondary.on-dark { background: transparent; color: #fff; border-color: #fff; }
.me-btn--yellow-secondary.on-dark .me-btn__icon { color: #fff; }
.me-btn--yellow-secondary.on-dark:hover { background: var(--n-000); color: var(--n-1000); border-color: var(--n-000); }
.me-btn--yellow-secondary.on-dark:hover .me-btn__icon { color: var(--n-1000); }
/* DANGER · destructive (deep red, distinct from CTA) */
.me-btn--danger { background: var(--me-red); color: #fff; }
.me-btn--danger:hover { background: #B81F2D; }
/* ============================================================
LINK-PROOFING THE BUTTON STATES — do not remove
------------------------------------------------------------
A button is nearly always an . A variant sets its label colour with one
class — `.me-btn--main { color:#fff }` is specificity (0,1,0) — but the most
ordinary page rule imaginable, `a:hover { color: var(--me-primary) }`, is
(0,1,1) and therefore WINS. The label and its currentColor arrow both flip to
the link colour on hover: blue text on the red CTA, which is unreadable and
is not a state this system has ever defined.
The component has to defend itself, because every team that adopts this system
will style its links. Each variant below restates its own colour on the link
states at (0,3,1) — two classes plus :not([disabled]):not(.is-disabled) — which also clears a
section-scoped `.p-cta a:hover` (0,2,1). :not([disabled]):not(.is-disabled) is not padding: it
keeps disabled buttons on their grey.
Pages should still exclude buttons from link rules — `a:not(.me-btn):hover`.
This block is the backstop for when they don't.
:visited and :focus take the REST colour (those states show the rest fill);
:hover and :active take whatever colour the variant's own state rule sets.
============================================================ */
/* white label at rest and through every state */
.me-btn.me-btn--main:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--main:not([disabled]):not(.is-disabled):focus,
.me-btn.me-btn--main:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--main:not([disabled]):not(.is-disabled):active,
.me-btn.me-btn--accent:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--accent:not([disabled]):not(.is-disabled):focus,
.me-btn.me-btn--accent:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--accent:not([disabled]):not(.is-disabled):active,
.me-btn.me-btn--danger:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--danger:not([disabled]):not(.is-disabled):focus,
.me-btn.me-btn--danger:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--danger:not([disabled]):not(.is-disabled):active,
.me-btn.me-btn--secondary.on-dark:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--secondary.on-dark:not([disabled]):not(.is-disabled):focus,
.me-btn.me-btn--secondary.on-dark:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--secondary.on-dark:not([disabled]):not(.is-disabled):active { color: #fff; }
/* SECONDARY · blue outline at rest, fills red on hover */
.me-btn.me-btn--secondary:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--secondary:not([disabled]):not(.is-disabled):focus { color: var(--me-primary); }
.me-btn.me-btn--secondary:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--secondary:not([disabled]):not(.is-disabled):active { color: #fff; }
/* TEXT · CTA red, deepening on hover */
.me-btn.me-btn--text:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--text:not([disabled]):not(.is-disabled):focus { color: var(--me-cta); }
.me-btn.me-btn--text:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--text:not([disabled]):not(.is-disabled):active { color: var(--me-cta-hover); }
/* GHOST · dark ink throughout; only the border moves */
.me-btn.me-btn--ghost:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--ghost:not([disabled]):not(.is-disabled):focus,
.me-btn.me-btn--ghost:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--ghost:not([disabled]):not(.is-disabled):active { color: var(--n-1000); }
/* YELLOW · dark ink on the amber fill; white only on the deep press tone */
.me-btn.me-btn--yellow:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--yellow:not([disabled]):not(.is-disabled):focus,
.me-btn.me-btn--yellow:not([disabled]):not(.is-disabled):hover { color: var(--n-1000); }
.me-btn.me-btn--yellow:not([disabled]):not(.is-disabled):active { color: #fff; }
/* YELLOW SECONDARY · dark ink; the on-dark form starts white and inverts */
.me-btn.me-btn--yellow-secondary:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--yellow-secondary:not([disabled]):not(.is-disabled):focus,
.me-btn.me-btn--yellow-secondary:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--yellow-secondary:not([disabled]):not(.is-disabled):active { color: var(--n-1000); }
.me-btn.me-btn--yellow-secondary.on-dark:not([disabled]):not(.is-disabled):visited,
.me-btn.me-btn--yellow-secondary.on-dark:not([disabled]):not(.is-disabled):focus { color: #fff; }
.me-btn.me-btn--yellow-secondary.on-dark:not([disabled]):not(.is-disabled):hover,
.me-btn.me-btn--yellow-secondary.on-dark:not([disabled]):not(.is-disabled):active { color: var(--n-1000); }
/* DISABLED · both spellings, all link states.
Disabled buttons are exposed too, and the enabled guards above deliberately
skip them — which leaves a plain `a:hover` free to repaint a disabled label
the link colour, making a dead button read as an active link. An cannot
carry [disabled], so a disabled link button is marked .is-disabled; both forms
are pinned here. Every variant's disabled ink is --n-500, so one rule covers
the set at (0,3,0), which still clears a scoped `.p-cta a:hover` (0,2,1). */
.me-btn[disabled]:visited,
.me-btn[disabled]:focus,
.me-btn[disabled]:hover,
.me-btn[disabled]:active,
.me-btn.is-disabled:visited,
.me-btn.is-disabled:focus,
.me-btn.is-disabled:hover,
.me-btn.is-disabled:active { color: var(--n-500); }
.me-btn[disabled]:hover .me-btn__icon,
.me-btn.is-disabled:hover .me-btn__icon { color: var(--n-500); }
/* A disabled button must not react to hover at all. The variants' own :hover
rules sit at (0,2,1)-(0,3,0) and otherwise still fire — a disabled --secondary
filled CTA red under the cursor. Each variant's disabled fill is restated
here; the shared rule kills the lift and shadow. */
.me-btn[disabled]:hover,
.me-btn.is-disabled:hover { box-shadow: none; transform: none; }
.me-btn--main[disabled]:hover, .me-btn--main.is-disabled:hover,
.me-btn--yellow[disabled]:hover, .me-btn--yellow.is-disabled:hover,
.me-btn--danger[disabled]:hover, .me-btn--danger.is-disabled:hover { background: var(--n-200); }
.me-btn--secondary[disabled]:hover, .me-btn--secondary.is-disabled:hover { background: transparent; border-color: var(--n-400); }
.me-btn--ghost[disabled]:hover, .me-btn--ghost.is-disabled:hover { background: transparent; border-color: var(--n-300); }
.me-btn--yellow-secondary[disabled]:hover, .me-btn--yellow-secondary.is-disabled:hover { background: var(--n-000); border-color: var(--n-300); }
.me-btn--text[disabled]:hover, .me-btn--text.is-disabled:hover { background: transparent; }
/* Block — full width. Keeps the size radius (4 / 8) so a wide button reads as
the same shape as its inline siblings; the arrow trails the centered label. */
.me-btn--block { display: flex; width: 100%; justify-content: center; }
/* ---- Form field tokens ---- */
/* Geometry adopted from the UEMS system: taller 54px fields, 8px corners,
a soft blue-tinted rest border, and 16px/500 value text (which also stops
iOS zooming on focus). Kept as tokens so every control stays in step. */
:root {
--me-field-h: 54px;
--me-field-h-sm: 44px;
--me-field-h-lg: 62px;
--me-field-radius: var(--r-md);
--me-field-pad-x: 17px;
--me-field-border-hover: var(--blue-200);
--me-field-ring: 0 0 0 3px var(--me-primary-tint-2);
--me-field-placeholder: var(--n-500);
--me-field-value: var(--n-1000);
--me-field-value-size: 16px;
--me-field-value-weight: 500;
/* controls need a boundary that clears WCAG 1.4.11 (3:1).
#666666 is 5.73:1 on white; the old field border (#E7EEFA, 1.17:1) and
the mid neutrals (--n-300 1.30:1, --n-500 2.37:1) all fail at this size. */
--me-control-border: var(--n-600);
--me-control-size-sm: 16px;
--me-control-size: 18px;
--me-control-size-lg: 22px;
--me-radio-dot-sm: 8px;
--me-radio-dot: 10px;
--me-radio-dot-lg: 12px;
}
/* ---- Input ---- */
.me-input {
font-family: inherit;
font-size: var(--me-field-value-size);
font-weight: var(--me-field-value-weight);
line-height: 24px;
height: var(--me-field-h);
padding: 0 var(--me-field-pad-x);
border-radius: var(--me-field-radius);
border: 1px solid var(--me-control-border);
background: var(--n-000);
color: var(--me-field-value);
transition: border-color 120ms ease, box-shadow 120ms ease;
outline: none;
}
.me-input::placeholder { color: var(--me-field-placeholder); font-weight: 400; }
.me-input:hover { border-color: var(--me-field-border-hover); }
.me-input:focus,
.me-input.is-active { border-color: var(--me-primary); box-shadow: var(--me-field-ring); }
.me-input.is-success { border-color: var(--me-secondary); box-shadow: 0 0 0 3px rgba(0,160,90,0.15); }
.me-input.is-error { border-color: var(--me-red); box-shadow: 0 0 0 3px rgba(200,35,50,0.18); }
.me-input[disabled] { background: var(--surface-sunk); border-color: var(--border-soft); color: var(--n-500); cursor:not-allowed; }
/* ---- Surface / card ---- */
.me-card {
background: var(--n-000);
border-radius: var(--r-sm);
box-shadow: var(--shadow-still);
padding: var(--sp-8);
}
/* ---- Chips / badges ---- */
.me-chip {
display:inline-flex; align-items:center; gap: 6px;
padding: 4px 10px;
border-radius: var(--r-sm);
background: var(--me-primary);
color: #fff;
font-size: var(--fs-label-m);
font-weight: 700;
letter-spacing: 0.03em;
}
.me-chip--ghost { background: var(--me-primary-tint); color: var(--me-primary); }
/* ---- Frame chrome (for recreations) ---- */
.me-topbar {
height: 140px;
padding: 0 133px;
display:flex; align-items:center; justify-content:space-between;
background: #fff; border-bottom: 1px solid var(--border-soft);
}
/* ============================================================
components.css — ManageEngine reusable component styles
------------------------------------------------------------
Loaded by every component page alongside tokens.css.
Buttons + inputs live in tokens.css; everything else here.
============================================================ */
/* ─── Badge ─── */
.me-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--fs-label-m); font-weight: 700;
padding: 4px 10px; border-radius: 4px;
letter-spacing: 0.02em;
line-height: 1.2;
}
.me-badge--info { background: var(--me-primary-tint); color: var(--me-primary); }
.me-badge--success { background: rgba(0,160,90,0.15); color: var(--me-green-deep); }
.me-badge--warn { background: rgba(250,170,30,0.22); color: var(--amber-700); }
.me-badge--error { background: rgba(200,35,50,0.10); color: var(--me-red); }
.me-badge--neutral { background: var(--n-150); color: var(--n-700); }
.me-badge--outline { background: var(--me-primary-tint); color: var(--me-primary); box-shadow: inset 0 0 0 1px var(--me-primary); font-weight: 600; }
/* on photography: solid translucent white, never a gradient */
.me-badge--overlay { background: rgba(255,255,255,0.20); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.35); backdrop-filter: blur(6px); }
.me-badge--dot::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: currentColor;
}
.me-badge__icon { width: 13px; height: 13px; flex: none; margin-left: -1px; }
.me-badge__icon svg { width: 100%; height: 100%; display: block; }
/* ─── Chip ─── */
.me-chip-rm {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 10px 6px 12px;
border-radius: var(--r-sm);
background: var(--n-100); color: var(--n-1000);
font-size: var(--fs-label-l); font-weight: 500;
border: 1px solid var(--border-soft);
}
.me-chip-rm__x {
width: 16px; height: 16px; border-radius: var(--r-xs);
display: grid; place-items: center;
background: var(--n-300); color: var(--n-700);
font-size: var(--fs-label-m); cursor: pointer;
border: 0;
}
.me-chip-rm__x:hover { background: var(--me-red); color: #fff; }
/* ─── Checkbox ─── */
.me-check {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-sans);
font-size: var(--fs-label-l); color: var(--n-1000);
cursor: pointer;
user-select: none;
}
.me-check__box {
width: 18px; height: 18px; border-radius: var(--r-sm);
border: 1.5px solid var(--me-control-border); background: var(--n-000);
display: grid; place-items: center;
transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
flex-shrink: 0;
}
.me-check.is-checked .me-check__box {
background: var(--me-primary) url("data:image/svg+xml;utf8,") center no-repeat;
border-color: var(--me-primary);
}
.me-check.is-indeterminate .me-check__box {
background: var(--me-primary) url("data:image/svg+xml;utf8,") center no-repeat;
border-color: var(--me-primary);
}
.me-check.is-disabled {
color: var(--n-500); cursor: not-allowed;
}
.me-check.is-disabled .me-check__box {
background: var(--surface-sunk); border-color: var(--border-soft);
}
.me-check.is-disabled.is-checked .me-check__box {
background-color: var(--n-400); border-color: var(--n-400);
}
/* ─── Radio ─── */
.me-radio {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-sans);
font-size: var(--fs-label-l); color: var(--n-1000);
cursor: pointer; user-select: none;
}
.me-radio__circle {
width: 18px; height: 18px; border-radius: 50%;
border: 1.5px solid var(--me-control-border); background: var(--n-000);
display: grid; place-items: center;
transition: border-color var(--dur-fast) var(--ease-out);
flex-shrink: 0;
}
.me-radio.is-checked .me-radio__circle { border-color: var(--me-primary); }
.me-radio.is-checked .me-radio__circle::after {
content: ""; width: 10px; height: 10px; border-radius: 50%;
background: var(--me-primary);
}
.me-radio.is-disabled { color: var(--n-500); cursor: not-allowed; }
.me-radio.is-disabled .me-radio__circle { background: var(--surface-sunk); border-color: var(--border-soft); }
.me-radio.is-disabled.is-checked .me-radio__circle::after { background: var(--n-400); }
/* Real input — visually hidden, drives :focus-visible and :checked */
.me-check__input, .me-radio__input {
position: absolute; width: 1px; height: 1px; margin: -1px;
padding: 0; border: 0; overflow: hidden; white-space: nowrap;
clip: rect(0 0 0 0); clip-path: inset(50%);
}
.me-radio__input:checked ~ .me-radio__circle { border-color: var(--me-primary); }
.me-radio__input:checked ~ .me-radio__circle::after {
content: ""; width: var(--me-radio-dot); height: var(--me-radio-dot);
border-radius: 50%; background: var(--me-primary);
}
.me-check__input:checked ~ .me-check__box {
background: var(--me-primary) url("data:image/svg+xml;utf8,") center no-repeat;
border-color: var(--me-primary);
}
.me-radio__input:focus-visible ~ .me-radio__circle,
.me-check__input:focus-visible ~ .me-check__box,
.me-radio.is-focus .me-radio__circle,
.me-check.is-focus .me-check__box {
border-color: var(--me-primary); box-shadow: var(--me-field-ring);
}
/* Hover */
.me-radio:hover:not(.is-disabled) .me-radio__circle,
.me-check:hover:not(.is-disabled) .me-check__box,
.me-radio.is-hover .me-radio__circle,
.me-check.is-hover .me-check__box { border-color: var(--me-primary); }
.me-radio.is-error:hover .me-radio__circle,
.me-check.is-error:hover .me-check__box { border-color: var(--me-red); }
/* Error */
.me-radio.is-error, .me-check.is-error { color: var(--me-red); }
.me-radio.is-error .me-radio__circle,
.me-check.is-error .me-check__box {
border-color: var(--me-red); background-color: rgba(200,35,50,0.05);
}
.me-radio.is-error.is-checked .me-radio__circle::after { background: var(--me-red); }
.me-check.is-error.is-checked .me-check__box { background-color: var(--me-red); border-color: var(--me-red); }
/* Size — SM and LG; the default sits between them */
.me-radio--sm, .me-check--sm { font-size: var(--fs-label-l); }
.me-radio--lg, .me-check--lg { font-size: var(--fs-body-l); gap: var(--sp-3); }
.me-radio--sm .me-radio__circle { width: var(--me-control-size-sm); height: var(--me-control-size-sm); }
.me-radio--lg .me-radio__circle { width: var(--me-control-size-lg); height: var(--me-control-size-lg); }
.me-radio--sm.is-checked .me-radio__circle::after,
.me-radio--sm .me-radio__input:checked ~ .me-radio__circle::after { width: var(--me-radio-dot-sm); height: var(--me-radio-dot-sm); }
.me-radio--lg.is-checked .me-radio__circle::after,
.me-radio--lg .me-radio__input:checked ~ .me-radio__circle::after { width: var(--me-radio-dot-lg); height: var(--me-radio-dot-lg); }
.me-check--sm .me-check__box { width: var(--me-control-size-sm); height: var(--me-control-size-sm); }
.me-check--lg .me-check__box { width: var(--me-control-size-lg); height: var(--me-control-size-lg); }
.me-check--sm.is-checked .me-check__box,
.me-check--sm .me-check__input:checked ~ .me-check__box { background-size: 9px 7px; }
.me-check--lg.is-checked .me-check__box,
.me-check--lg .me-check__input:checked ~ .me-check__box { background-size: 13px 11px; }
.me-check--sm.is-indeterminate .me-check__box { background-size: 8px 2px; }
.me-check--lg.is-indeterminate .me-check__box { background-size: 12px 2px; }
/* Row — full-width selectable target. Meets the 44px tap minimum. */
.me-radio--row, .me-check--row {
display: flex; width: 100%; min-height: 44px;
padding: var(--sp-2) var(--sp-3);
border-radius: var(--r-md);
transition: background var(--dur-fast) var(--ease-out);
}
.me-radio--row:hover:not(.is-disabled), .me-check--row:hover:not(.is-disabled) { background: var(--n-100); }
.me-radio--row.is-checked, .me-check--row.is-checked { background: var(--blue-50); }
.me-radio--row.is-error, .me-check--row.is-error { background: rgba(200,35,50,0.06); }
/* Label-less — the control alone, named by aria-label */
.me-radio--bare, .me-check--bare { gap: 0; }
/* ─── Toggle ─── */
.me-toggle {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-family: var(--font-sans);
font-size: var(--fs-label-l); color: var(--n-1000);
cursor: pointer; user-select: none;
}
.me-toggle__track {
position: relative;
width: 44px; height: 24px; border-radius: var(--r-pill);
background: var(--n-300);
transition: background var(--dur-fast) var(--ease-out);
flex-shrink: 0;
}
.me-toggle__track::after {
content: "";
position: absolute; top: 3px; left: 3px;
width: 18px; height: 18px; border-radius: 50%;
background: var(--n-000); box-shadow: 0 1px 3px rgba(26,20,31,0.2);
transition: transform var(--dur-fast) var(--ease-out);
}
.me-toggle.is-on .me-toggle__track { background: var(--me-primary); }
.me-toggle.is-on .me-toggle__track::after { transform: translateX(20px); }
.me-toggle.is-disabled { color: var(--n-500); cursor: not-allowed; }
.me-toggle.is-disabled .me-toggle__track { opacity: 0.5; }
/* ─── Card ─── */
.me-card {
background: var(--n-000);
border: 1px solid var(--border-soft);
border-radius: 8px;
box-shadow: var(--shadow-still);
padding: 24px;
}
.me-card--quiet { box-shadow: none; }
.me-card--interactive {
cursor: pointer;
transition: box-shadow 150ms ease, transform 150ms ease;
}
.me-card--interactive:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
/* Media card — image on a tinted stage, chip row, title / subtitle / body,
footer CTA behind a hairline. Padding moves off the container onto the
parts so the media panel can bleed to the card edges. */
.me-card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.me-card__media {
background: var(--me-primary-tint);
display: grid; place-items: center;
padding: var(--sp-6); min-height: 180px;
}
.me-card__media img { display: block; max-width: 100%; max-height: 220px; }
/* --flush: the image IS the panel (photo cards, screenshots) */
.me-card__media--flush { padding: 0; }
.me-card__media--flush img { width: 100%; max-height: none; height: 100%; object-fit: cover; }
.me-card__content { padding: var(--sp-5) var(--sp-6) var(--sp-6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-3); flex: 1; }
.me-card__chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.me-card__title { margin: 0; font-size: var(--fs-h5); font-weight: 700; line-height: var(--lh-heading); color: var(--n-1000); }
.me-card__subtitle { margin: 0; font-size: var(--fs-body); font-weight: 700; color: var(--n-800); }
.me-card__text { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--n-700); }
/* optional 3-line clamp for uneven grid content */
.me-card__text--clamp { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.me-card__foot { align-self: stretch; margin-top: auto; padding-top: var(--sp-4); border-top: 1px solid var(--border-soft); }
.me-card__cta {
display: inline-flex; align-items: center; gap: var(--sp-2);
font-size: var(--fs-body); font-weight: 600; color: var(--me-primary);
text-decoration: none;
}
.me-card__cta svg { width: 14px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.me-card__cta:hover { color: var(--me-primary-hover); }
.me-card__cta:hover svg { transform: translateX(2px); }
/* Media-card parts. Each is optional and order-free inside __content;
drop __media entirely for a text-only composition (logo cards, reviews). */
.me-card__logo { display: flex; align-items: center; height: 26px; }
.me-card__logo img { height: 100%; width: auto; object-fit: contain; display: block; }
/* Attribution: who is speaking — pairs with me-avatar */
.me-card__attrib { display: flex; align-items: center; gap: var(--sp-3); }
.me-card__attrib-name { font-size: var(--fs-body); font-weight: 700; color: var(--n-1000); line-height: 1.3; }
.me-card__attrib-role { font-size: var(--fs-label-l); color: var(--n-600); line-height: 1.4; }
/* Rating: third-party source mark alongside me-rating */
.me-card__rating { display: flex; align-items: center; gap: var(--sp-3); }
.me-card__rating img { height: 34px; width: auto; object-fit: contain; display: block; }
/* Ribbon: one word pinned to the card's top-left corner */
.me-card__ribbon {
position: absolute; top: 0; left: 0; z-index: 2;
background: var(--me-primary); color: #fff;
font-size: var(--fs-label-m); font-weight: 700;
letter-spacing: 0.06em; text-transform: uppercase;
padding: 7px 16px; border-radius: var(--r-lg) 0 var(--r-md) 0;
}
/* Transport: the audio player component, stretched to the content width */
.me-card__content > .me-audio { align-self: stretch; max-width: none; }
/* Overlay card: content sits on the photograph behind a scrim. */
.me-card--overlay {
position: relative; padding: 0; overflow: hidden; border: 0;
min-height: 420px; display: flex; flex-direction: column; justify-content: flex-end;
}
.me-card__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.me-card__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,14,26,0) 32%, rgba(10,14,26,0.88) 100%); }
.me-card__scrim--brand { background: linear-gradient(180deg, rgba(0,45,155,0.10) 20%, rgba(0,55,200,0.92) 78%); }
.me-card--overlay .me-card__content { position: relative; z-index: 1; flex: 0 0 auto; margin-top: auto; }
.me-card--overlay .me-card__title,
.me-card--overlay .me-card__attrib-name { color: #fff; }
.me-card--overlay .me-card__text,
.me-card--overlay .me-card__subtitle,
.me-card--overlay .me-card__attrib-role { color: rgba(255,255,255,0.78); }
/* Brand mark of the customer being quoted */
.me-card__brand { position: absolute; top: var(--sp-5); left: var(--sp-5); z-index: 2; background: var(--n-000); border-radius: var(--r-sm); padding: 8px 12px; display: flex; }
.me-card__brand img { height: 24px; width: auto; object-fit: contain; display: block; }
/* Stage: the free photo band above the content — centres a play affordance.
The button itself is me-audio__play, re-skinned as glass for photography.
Two classes deep on purpose: the Audio player block is declared later in this
file, so a single-class modifier here would lose on source order.
The top padding clears me-card__brand so the button centres in the band
BELOW the mark, not against it. */
.me-card__stage { position: relative; z-index: 2; flex: 1 1 auto; display: grid; place-items: center; padding: 72px var(--sp-5) var(--sp-2); }
.me-audio__play.me-card__play--overlay {
width: 56px; height: 56px;
background: rgba(255,255,255,0.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.5);
backdrop-filter: blur(4px);
}
.me-audio__play.me-card__play--overlay:hover { background: rgba(255,255,255,0.4); }
/* ─── Vertical nav ───
Two compositions: me-vnav (marketing solution switcher) and me-vnav-doc
(collapsible portal / document side nav). */
.me-vnav { width: 360px; background: var(--n-000); border-radius: var(--r-lg); box-shadow: var(--shadow-still); padding: var(--sp-3); font-family: var(--font-sans); }
.me-vnav__item { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) 18px; border-radius: var(--r-md); font-size: var(--fs-body); font-weight: 600; color: var(--n-1000); text-decoration: none; line-height: 1.3; }
.me-vnav__item svg { flex: none; }
.me-vnav__item:hover { background: var(--me-primary-tint); color: var(--me-primary); }
.me-vnav__item.is-active { background: var(--me-primary); color: var(--n-000); font-weight: 700; }
.me-vnav__item.is-active:hover { color: var(--n-000); }
.me-vnav-doc { width: 300px; background: var(--n-000); border-radius: var(--r-lg); box-shadow: var(--shadow-still); padding: 18px 20px; font-family: var(--font-sans); }
.me-vnav-doc__link { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-body); font-weight: 700; color: var(--me-primary); text-decoration: none; padding: 9px 0; }
.me-vnav-doc__link svg { flex: none; }
.me-vnav-doc__group { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--fs-body); font-weight: 700; color: var(--me-primary); cursor: pointer; padding: var(--sp-3) 0; }
.me-vnav-doc__group.is-open { background: var(--me-primary); color: var(--n-000); border-radius: var(--r-sm); padding: 11px 14px; }
.me-vnav-doc__group svg { flex: none; }
.me-vnav-doc__chev { transition: transform var(--dur-fast) var(--ease-out); }
.me-vnav-doc__group.is-open .me-vnav-doc__chev { transform: rotate(180deg); }
.me-vnav-doc__children { display: none; flex-direction: column; padding: var(--sp-2) 0 2px; }
.me-vnav-doc__group.is-open + .me-vnav-doc__children { display: flex; }
.me-vnav-doc__child { font-size: var(--fs-body); color: var(--n-1000); text-decoration: none; padding: 9px 14px; border-radius: var(--r-sm); }
.me-vnav-doc__child:hover { color: var(--me-primary); }
.me-vnav-doc__child.is-active { background: linear-gradient(90deg, transparent, var(--me-primary-tint-2)); font-weight: 600; }
.me-vnav-doc__divider { height: 1px; background: var(--border-soft); margin: 13px 0; }
.me-vnav-doc__contact { display: none; border: 1px solid var(--border-soft); border-radius: var(--r-sm); padding: var(--sp-4); font-size: var(--fs-label-l); line-height: 1.7; color: var(--n-800); margin: var(--sp-2) 0 4px; }
.me-vnav-doc__group.is-open + .me-vnav-doc__contact { display: block; }
.me-vnav-doc__contact strong { color: var(--n-1000); }
/* ─── Alert ─── */
.me-alert {
display: grid;
grid-template-columns: 20px 1fr auto;
/* Icon and close centre against the whole message, not just its first line. */
align-items: center;
gap: 12px;
padding: 14px 18px;
border-radius: 6px;
font-size: var(--fs-label-l); line-height: 1.5;
border-left: 4px solid currentColor;
}
.me-alert--info { background: var(--me-primary-tint); color: var(--me-primary); border-left-color: var(--me-primary); }
.me-alert--success { background: rgba(0,160,90,0.10); color: var(--me-green-deep); border-left-color: var(--me-green); }
.me-alert--warn { background: rgba(250,170,30,0.14); color: var(--amber-700); border-left-color: var(--me-yellow); }
.me-alert--error { background: rgba(200,35,50,0.08); color: var(--me-red); border-left-color: var(--me-red); }
.me-alert__icon {
width: 20px; height: 20px; display: grid; place-items: center;
flex-shrink: 0;
}
.me-alert__body {
color: var(--n-1000);
}
.me-alert__body strong { display: block; margin-bottom: 2px; color: var(--n-1000); }
.me-alert__close {
background: transparent; border: 0;
color: var(--n-600); cursor: pointer;
width: 20px; height: 20px;
display: grid; place-items: center;
}
/* ─── Tooltip ─── */
.me-tooltip {
display: inline-block;
position: relative;
background: var(--n-1000); color: #fff;
padding: 6px 10px; border-radius: 4px;
font-size: var(--fs-label-m); line-height: 1.4;
font-weight: 500;
white-space: nowrap;
}
.me-tooltip--top::after,
.me-tooltip--bottom::after,
.me-tooltip--left::after,
.me-tooltip--right::after {
content: ""; position: absolute;
border: 5px solid transparent;
}
.me-tooltip--top::after { left: 50%; top: 100%; transform: translateX(-50%); border-top-color: var(--n-1000); }
.me-tooltip--bottom::after { left: 50%; bottom: 100%; transform: translateX(-50%); border-bottom-color: var(--n-1000); }
.me-tooltip--left::after { top: 50%; left: 100%; transform: translateY(-50%); border-left-color: var(--n-1000); }
.me-tooltip--right::after { top: 50%; right: 100%; transform: translateY(-50%); border-right-color: var(--n-1000); }
/* Rich · a persistent popover with body copy and actions. Click-triggered,
dismissed explicitly — not a hover tooltip. */
.me-tooltip--rich {
display: block;
white-space: normal;
max-width: 420px;
padding: var(--sp-6);
border-radius: var(--r-lg);
font-size: var(--fs-body);
font-weight: 400;
line-height: var(--lh-body);
box-shadow: var(--shadow-lg);
}
.me-tooltip--rich.me-tooltip--top::after,
.me-tooltip--rich.me-tooltip--bottom::after,
.me-tooltip--rich.me-tooltip--left::after,
.me-tooltip--rich.me-tooltip--right::after { border-width: 9px; }
.me-tooltip__body { margin: 0; color: rgba(255,255,255,0.92); }
.me-tooltip__body + .me-tooltip__body { margin-top: var(--sp-3); }
.me-tooltip__actions {
display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
gap: var(--sp-3);
margin-top: var(--sp-5); padding-top: var(--sp-5);
border-top: 1px solid rgba(255,255,255,0.16);
}
@media (max-width: 540px) {
.me-tooltip--rich { max-width: 100%; }
.me-tooltip__actions > .me-btn { flex: 1 1 auto; justify-content: center; }
}
/* ─── Modal ─── */
.me-modal-scrim {
background: rgba(26,20,31,0.6);
padding: 32px; border-radius: 8px;
display: grid; place-items: center;
}
.me-modal {
background: #fff; border-radius: 12px;
box-shadow: var(--shadow-lg);
padding: 28px; max-width: 440px; width: 100%;
}
.me-modal__head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 16px; margin-bottom: 12px;
}
.me-modal__title { margin: 0; font-size: var(--fs-body-l); font-weight: 700; color: var(--n-1000); }
.me-modal__close {
background: transparent; border: 0; cursor: pointer;
color: var(--n-600); padding: 4px;
}
.me-modal__body { margin: 0 0 24px; color: var(--n-700); font-size: var(--fs-label-l); line-height: 1.55; }
.me-modal__actions {
display: flex; gap: 12px; justify-content: flex-end;
}
/* ─── Tabs (underline) ─── */
.me-tabs {
display: flex; gap: 4px;
border-bottom: 1px solid var(--border-soft);
font-family: var(--font-sans);
}
.me-tabs__tab {
appearance: none; background: transparent; border: 0;
padding: 14px 18px;
margin-bottom: -1px;
font-size: var(--fs-label-l); font-weight: 600; line-height: 1;
color: var(--n-700);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: color 140ms ease, border-color 140ms ease;
display: inline-flex; align-items: center; gap: 8px;
}
.me-tabs__tab:hover { color: var(--n-1000); }
.me-tabs__tab .me-tabs__count {
display: inline-grid; place-items: center;
min-width: 22px; height: 18px; padding: 0 6px;
border-radius: 999px;
background: var(--n-150); color: var(--n-700);
font-size: var(--fs-label-m); font-weight: 700;
}
.me-tabs__tab.is-active {
color: var(--me-primary);
border-bottom-color: var(--me-primary);
}
.me-tabs__tab.is-active .me-tabs__count { background: var(--me-primary); color: #fff; }
.me-tabs__tab[disabled] { color: var(--n-400); cursor: not-allowed; }
/* Pill tabs */
.me-tabs--pill {
display: inline-flex; gap: 4px;
padding: 4px;
border: 0; border-radius: var(--r-md);
background: var(--n-100);
}
.me-tabs--pill .me-tabs__tab {
margin-bottom: 0; border: 0; border-radius: var(--r-sm);
padding: 10px 18px;
}
.me-tabs--pill .me-tabs__tab.is-active {
background: var(--me-primary); color: #fff;
box-shadow: 0 2px 6px rgba(0,69,211,0.28);
}
/* ─── Segmented control ─── */
.me-segmented {
display: inline-flex;
padding: 3px;
background: var(--n-100);
border: 1px solid var(--border-soft);
border-radius: 8px;
font-family: var(--font-sans);
}
.me-segmented__seg {
appearance: none; background: transparent; border: 0;
padding: 8px 16px;
font-size: var(--fs-label-l); font-weight: 600; line-height: 1;
color: var(--n-700);
cursor: pointer;
border-radius: var(--r-sm);
transition: background 140ms ease, color 140ms ease, box-shadow 140ms ease;
display: inline-flex; align-items: center; gap: 8px;
}
.me-segmented__seg:hover { color: var(--n-1000); }
.me-segmented__seg.is-active {
background: var(--me-primary); color: #fff;
box-shadow: 0 1px 2px rgba(0,69,211,0.30);
}
.me-segmented--lg .me-segmented__seg { padding: 10px 20px; font-size: var(--fs-label-l); }
.me-segmented--sm .me-segmented__seg { padding: 6px 12px; font-size: var(--fs-label-m); }
/* ─── Breadcrumb ─── */
.me-crumbs {
display: flex; align-items: center; gap: 8px;
font-size: var(--fs-label-l); color: var(--n-700);
font-family: var(--font-sans);
}
.me-crumbs a { color: var(--me-primary); text-decoration: none; }
.me-crumbs a:hover { text-decoration: underline; }
.me-crumbs .me-crumbs__sep { color: var(--n-400); }
.me-crumbs .me-crumbs__curr { color: var(--n-1000); font-weight: 600; }
/* ─── Pagination · dot-indicator with circular prev/next ─── */
.me-pager {
--pager-arrow-size: 56px;
--pager-dot-size: 8px;
--pager-dot-color: var(--n-300);
--pager-active-color: var(--me-primary); /* brand blue */
--pager-active-width: 36px;
display: inline-flex; align-items: center; gap: 28px;
font-family: var(--font-sans);
}
/* Arrow buttons */
.me-pager__arrow {
width: var(--pager-arrow-size); height: var(--pager-arrow-size);
border-radius: var(--r-sm);
display: grid; place-items: center;
border: 1.5px solid var(--n-1000);
background: transparent;
color: var(--n-1000);
cursor: pointer;
padding: 0;
transition: background 120ms ease, border-color 120ms ease, color 120ms ease, opacity 120ms ease;
}
.me-pager__arrow svg { width: 18px; height: 18px; display: block; }
.me-pager__arrow:hover { background: var(--n-1000); color: #fff; }
.me-pager__arrow[disabled] {
border-color: var(--n-300);
color: var(--n-400);
cursor: not-allowed;
background: transparent;
}
/* Filled (soft) variant */
.me-pager--filled .me-pager__arrow {
border-color: transparent;
background: var(--n-200);
color: var(--n-1000);
}
.me-pager--filled .me-pager__arrow:hover {
background: var(--n-300);
color: var(--n-1000);
}
.me-pager--filled .me-pager__arrow[disabled] {
background: var(--n-100);
color: var(--n-400);
}
/* Dot row */
.me-pager__dots {
display: inline-flex; align-items: center; gap: 14px;
padding: 0; margin: 0; list-style: none;
}
.me-pager__dot {
width: var(--pager-dot-size); height: var(--pager-dot-size);
border-radius: 999px;
background: var(--pager-dot-color);
border: 0; padding: 0;
cursor: pointer;
transition: width 180ms ease, background 180ms ease;
}
.me-pager__dot[aria-current="true"],
.me-pager__dot.is-current {
width: var(--pager-active-width);
background: var(--pager-active-color);
}
/* Small size */
.me-pager--sm { gap: 18px; }
.me-pager--sm .me-pager__arrow { width: 40px; height: 40px; }
.me-pager--sm .me-pager__dot { width: 6px; height: 6px; }
.me-pager--sm .me-pager__dot[aria-current="true"],
.me-pager--sm .me-pager__dot.is-current { width: 26px; }
.me-pager--sm .me-pager__arrow svg { width: 14px; height: 14px; }
.me-pager--sm .me-pager__dots { gap: 10px; }
.me-pager--sm .me-pager__nums { gap: 2px; }
.me-pager--sm .me-pager__num { min-width: 32px; height: 32px; font-size: var(--fs-label-l); }
/* Number row — same chrome as dots, but indexed buttons */
.me-pager__nums {
display: inline-flex; align-items: center; gap: 4px;
padding: 0; margin: 0; list-style: none;
}
.me-pager__num {
min-width: 40px; height: 40px;
padding: 0 12px;
border-radius: var(--r-sm);
border: 0; background: transparent;
font: 600 14px/1 var(--font-sans);
color: var(--n-700);
cursor: pointer;
display: inline-grid; place-items: center;
transition: background 120ms ease, color 120ms ease;
}
.me-pager__num:hover { background: var(--n-100); color: var(--n-1000); }
.me-pager__num[aria-current="page"],
.me-pager__num.is-current {
background: var(--pager-active-color);
color: #fff;
cursor: default;
}
.me-pager__num[aria-current="page"]:hover,
.me-pager__num.is-current:hover { background: var(--pager-active-color); color: #fff; }
.me-pager__sep {
min-width: 24px; height: 40px;
display: inline-grid; place-items: center;
color: var(--n-500);
font-size: var(--fs-label-l);
user-select: none;
}
/* ─── Textarea ─── */
.me-textarea {
font-family: inherit;
font-size: var(--me-field-value-size);
font-weight: var(--me-field-value-weight);
line-height: 1.5;
min-height: 104px;
padding: 14px var(--me-field-pad-x);
border-radius: var(--me-field-radius);
border: 1px solid var(--me-control-border);
background: var(--n-000);
color: var(--me-field-value);
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
outline: none;
resize: vertical;
width: 100%;
}
.me-textarea::placeholder { color: var(--me-field-placeholder); font-weight: 400; }
.me-textarea:hover { border-color: var(--me-field-border-hover); }
.me-textarea:focus {
border-color: var(--me-primary);
box-shadow: var(--me-field-ring);
}
.me-textarea.is-success { border-color: var(--me-secondary); box-shadow: 0 0 0 3px rgba(0,160,90,0.15); }
.me-textarea.is-error { border-color: var(--me-red); box-shadow: 0 0 0 3px rgba(200,35,50,0.18); }
.me-textarea[disabled] { background: var(--surface-sunk); border-color: var(--border-soft); color: var(--n-500); cursor: not-allowed; }
/* ─── Select ─── */
.me-select {
appearance: none; -webkit-appearance: none;
font-family: inherit;
font-size: var(--me-field-value-size);
font-weight: var(--me-field-value-weight);
height: var(--me-field-h);
padding: 0 44px 0 var(--me-field-pad-x);
border-radius: var(--me-field-radius);
border: 1px solid var(--me-control-border);
background: var(--n-000);
color: var(--me-field-value);
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right var(--me-field-pad-x) center;
transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
outline: none;
cursor: pointer;
}
/* State — the :pseudo drives the live control, the .is-* twin lets a static
spec page (or a server-rendered form) show the same state. */
.me-select:hover,
.me-select.is-hover { border-color: var(--me-field-border-hover); }
.me-select:focus,
.me-select.is-focus,
.me-select.is-active {
border-color: var(--me-primary);
box-shadow: var(--me-field-ring);
}
.me-select.is-success { border-color: var(--me-secondary); box-shadow: 0 0 0 3px rgba(0,160,90,0.15); }
.me-select.is-error { border-color: var(--me-red); box-shadow: 0 0 0 3px rgba(200,35,50,0.18); }
.me-select.is-error:hover { border-color: var(--me-red); }
/* placeholder row: an unchosen option reads as placeholder, not as a value */
.me-select.is-placeholder { color: var(--me-field-placeholder); font-weight: 400; }
.me-select[disabled] { background-color: var(--surface-sunk); border-color: var(--border-soft); color: var(--n-500); cursor: not-allowed; }
/* the chevron is a data-URI, so a disabled select needs its own dimmed copy */
.me-select[disabled] { background-image: url("data:image/svg+xml;utf8,"); }
/* Size — the field trio (input, select, textarea) shares --me-field-h-*, so a
sized select still lines up with its neighbours in the same row. */
.me-select--sm {
height: var(--me-field-h-sm);
font-size: var(--fs-label-l);
padding: 0 36px 0 var(--sp-3);
background-position: right var(--sp-3) center;
}
.me-select--lg {
height: var(--me-field-h-lg);
font-size: var(--fs-body-l);
padding: 0 52px 0 var(--sp-5);
background-position: right var(--sp-5) center;
}
/* Multi-select — no chevron (the native list has its own scroll affordance) */
.me-select[multiple] {
height: auto; padding: var(--sp-2); background-image: none;
font-weight: 400; cursor: default;
}
.me-select[multiple] option { padding: var(--sp-2) var(--sp-3); border-radius: var(--r-xs); }
/* ─── Select · custom listbox ───
The native popup can't be styled — the OS draws it. When the open list has to
carry our type, brand selection colour, groups, or descriptions, swap the