/* ============================================================ Ad Armory — Dashboard v4.0 — Design System (v3.0 spec) All rules scoped under .aadash-root. Source: ad-armory-brand-design-system-v3_0.docx + "Ad Armory — Customer Dashboard v3" mockup (Enrique). v4.0.0: token layer migrated to Brand & Design System v3.0. The canonical --aa-* tokens below mirror the brand book's CSS layer verbatim; legacy token names alias into them so every v3.x class (site detail, services, ads, subscription pages) inherits the new palette without a markup pass. The new dashboard/sites/domains components live in the .aad4-* layer at the end of this file. v3.0 rules now in force here (Hub section wins conflicts): - Three elevation tiers, every surface exactly one: #0C0C0C void · #111111 card body · #161616 elevated. - Depth CTA: #005466 rest → #007E99 hover. One filled action per region. Cyan NEVER fills buttons. - One link color sitewide: #009BBE → #00CDFB hover. - Data is neutral; color belongs to deltas and states. - Graveyard enforced — #00A3C4 et al. are defects. - Hub card radius 8px; buttons/inputs 5px; badges 4px. ============================================================ */ /* ============================================================ TYPOGRAPHY POLICY (v3.12.1 — codified after Enrique CEO review) Canonical scale: 12 / 14 / 16 / 18 / 22 / 28 The 10px tier was RETIRED at v3.12.1. Reads weak at standard laptop viewing distance. Never reintroduce 10px or 11px — they were trialed and rejected. Sub-12px sizes are now disallowed. Tier → use cases → weight policy: 12px Labels, eyebrows, kickers, status pills, badges, table headers, "PORTFOLIO" / "ACTIVE" / counts in chips. Pair with: uppercase + letter-spacing 0.5-0.8px + weight 700. NEVER use 12px for sentence-style copy — that goes 14px+. 14px Body, descriptive copy, meta lines, helper text, list-row secondary lines, URLs, status sentences ("Renews in 17 days"), button text in small buttons. Weight 400-500. This is the FLOOR for any sentence-style content. 16px Card titles (rail cards, modal heads), subscription tile values, small section titles. Weight 500. 18px Section headers within a page. Weight 500. 22px Page titles, prominent in-card hero values that aren't the absolute focal point. Weight 500. 28px Hero values — the focal point of a card. Renewal date in rail hero, scan totals, page-level large numbers, subs page title. Weight 500 (sometimes 700 if competing with larger surfaces). Drift check: if you find yourself reaching for 11/13/15/17/19/24/26 you're between tiers. Pick the nearest canonical step. The whole point of the scale is consistent visual rhythm — half-tiers break it. Enfold defense: heading classes (.aadash-*-title etc.) carry !important on font-size to beat Enfold's .woocommerce-MyAccount-content h1-h6 overrides. Non-heading labels typically don't need !important because Enfold targets heading tags specifically. ============================================================ */ .aadash-root { /* Background layers — per "Card System" section of the spec. Void → Card body → Card header / elevated → Input (matches void). */ --bg-base: #0c0c0c; /* Page background. The void. (OC) */ --bg-recessed: #111111; /* Card body — primary content container */ --bg-elevated: #161616; /* Card header / elevated panels / stat boxes */ --bg-input: #0c0c0c; /* Inputs match void, recede into card body */ --bg-alternate: #14104b; /* Purple-tinted sections, cosmic moments */ /* ═══ Canonical --aa-* color tokens (Brand & Design System v3.0) ═══ */ --aa-cta: #005466; /* primary button fill at rest */ --aa-cta-hover: #007e99; /* primary fill on hover / active */ --aa-cta-border: rgba(0, 126, 153, 0.45); /* 1px rest border; resolves solid on hover */ --aa-cta-text: #ffffff; --aa-accent-teal: #007e99; /* non-button action accents: toggles-on, progress, badges */ --aa-link: #009bbe; /* one link color, sitewide */ --aa-link-hover: #00cdfb; --aa-cyan: #00cdfb; /* identity + brightest action state. Never buttons */ --aa-purple-accent: #5745ff; /* display sizes & UI fills */ --aa-purple-deep: #322299; /* gradient endpoints, large surfaces */ --aa-purple-bright: #8073ff; /* small text/icons/eyebrows < 24px. Dark mode only */ --aa-gradient-emphasis: linear-gradient(135deg, #00cdfb 0%, #432fff 100%); --aa-border: #212121; /* the single border standard */ --aa-border-subtle: rgba(255, 255, 255, 0.06); /* card rest border — felt, not seen */ --aa-good: #00d87a; --aa-warn: #f59e0b; --aa-danger: #ff5c5c; --aa-good-tint: rgba(0, 216, 122, 0.10); --aa-warn-tint: rgba(245, 158, 11, 0.12); --aa-danger-tint: rgba(255, 92, 92, 0.10); --aa-bg-gradient: linear-gradient(135deg, #0f0d12, #0c1213); /* Typography (v3.0): Roboto 400/500/700/900 + Roboto Mono. Mono is reserved for DATA (dates, counts, ranges) + eyebrows. */ --aa-font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif; --aa-font-mono: ui-monospace, 'Roboto Mono', SFMono-Regular, Menlo, monospace; /* Motion (v3.0): hover = border brightens + lift, .3s ease. Glows belong to cards on hover only — NEVER on buttons. */ --aa-hover-transition: all 0.3s ease; --aa-hover-lift: translateY(-2px); --aa-shadow-hub: 0 4px 20px rgba(0, 0, 0, 0.4); /* ─── v2-era accent names — aliased to v3.0 values ─── Legacy class rules across this file still reference these. Pointing them at the v3.0 tokens reskins every untouched surface (site detail, services, ads, subs) in one move. */ /* v4.0.1 (Adam QA C-5) — THE FLIP. Legacy rules pair --accent-action (rest) with --accent-action-muted (hover). v2 had rest=#00cdfb → hover=#009bbe, which inverted the v3.0 brightness direction and was the root cause of the June "too much cyan" audit finding. Pointing rest at --aa-link and hover at --aa-link-hover corrects every legacy link/CTA pair in one move: rest #009bbe → hover #00cdfb. Identity-cyan moments that must NOT dim were re-pointed to var(--aa-cyan) explicitly (see individual rules). */ --accent-action: var(--aa-link); --accent-action-muted: var(--aa-link-hover); --accent-cta: var(--aa-cta-hover); /* legacy fills read the hover teal */ --accent-atmospheric: var(--aa-purple-accent); --accent-atmospheric-dark: var(--aa-purple-deep); --accent-atmospheric-light:var(--aa-purple-bright); --tab-grad: var(--aa-gradient-emphasis); /* Text colors — per Text Colors table. */ --text-primary: #ffffff; --text-secondary: #c0c0c0; --text-muted: #8b92b3; --text-dim: #888888; /* Status semantics — used for health pills, deltas, alerts. */ --good: #00d87a; --warn: #f59e0b; --danger: #ff5c5c; /* Borders. */ --bd: rgba(255,255,255,0.06); --bd-strong: rgba(255,255,255,0.10); /* Radius scale — Brand & Design System v3.0 (supersedes the v3.20.4 5px flattening, Enrique-confirmed for v4.0.0): Hub cards 8px · buttons/inputs/pills 5px · badges/chips 4px. */ --r-sm: 4px; /* badges, rectangular pills, count chips */ --r-md: 5px; /* buttons, inputs — ALL sizes */ --r-lg: 8px; /* cards, panels (Account Hub spec) */ /* ─── Legacy aliases ─── Existing class rules in this file still reference these names. Mapped to the canonical tokens above so the rules render correctly without a full sed pass. New code should use the canonical names. */ --aadash-bg-page: var(--bg-base); --aadash-bg-card: var(--bg-recessed); --aadash-bg-elev: var(--bg-elevated); --aadash-bg-input: var(--bg-input); --aadash-bd: var(--bd); --aadash-bd-strong: var(--bd-strong); --aadash-tx: var(--text-secondary); --aadash-tx-dim: var(--text-muted); --aadash-tx-muted: var(--text-dim); --aadash-tx-faint: #4b5563; --aadash-cyan: var(--accent-action); --aadash-cyan-hover: var(--accent-action-muted); --aadash-purple: var(--accent-atmospheric); --aadash-purple-soft: var(--accent-atmospheric-light); --aadash-good: var(--good); --aadash-warn: var(--warn); --aadash-danger: var(--danger); /* ═══ Type scale ═══ (UI Design System §3 — codified; was hardcoded px) Hub scale caption→display. New work uses these; existing px migrate to the nearest token view-by-view. */ --fs-caption: 12px; /* labels, badges, meta, column heads. FLOOR */ --fs-sm: 14px; /* dense secondary UI text */ --fs-body: 16px; /* primary reading, inputs, mobile body floor */ --fs-lg: 18px; /* subheads, emphasized body */ --fs-title: clamp(18px, 2.6cqi, 22px); /* card / section titles */ --fs-hero: clamp(22px, 3.2cqi, 28px); /* page hero, large stat numbers */ --fs-display: clamp(26px, 4cqi, 36px); /* display-feel page titles */ /* Weights (§3 + decisions §9c/§9d): 400 body · 500 headings/UI · 700 deliberate emphasis (stat numbers, micro-labels, standout figures). */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; /* Line-height + tracking */ --lh-tight: 1.2; /* large headings, stat numbers */ --lh-snug: 1.35; /* titles, short strings */ --lh-normal: 1.5; /* body */ --lh-relaxed: 1.6; /* long-form */ --track-label: 0.08em; /* uppercase micro-labels */ --track-tight: -0.01em; /* large display headings */ --track-normal: 0; /* ═══ Spacing scale ═══ (§4 — 4px base, new standard) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radius additions (§4) — sm/md/lg declared above */ --r-pill: 999px; --r-circle: 50%; /* Elevation (§4) — cards use borders not shadows; these stay rare */ --shadow-overlay: 0 20px 40px rgba(0,0,0,0.4); /* dropdowns, popovers */ --shadow-modal: 0 24px 60px rgba(0,0,0,0.55); /* modals */ --focus-border: rgba(0,205,251,0.30); /* input focus border */ --focus-ring: 0 0 0 3px rgba(0,205,251,0.06); /* input focus glow */ /* Motion (§4) */ --dur-fast: 0.15s; --dur: 0.18s; --dur-slow: 0.4s; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Touch-target floor (§8) */ --touch-min: 44px; /* Fluid spacing (§4) — containers/sections/gaps; shrink on phones, never over-pad */ --pad-card: clamp(16px, 3.5cqi, 24px); --pad-card-tight: clamp(12px, 2.6cqi, 18px); --pad-section: clamp(20px, 4.5cqi, 32px); --gap-grid: clamp(12px, 2.2cqi, 24px); /* State (§4) */ --disabled-opacity: 0.45; /* Status glows (§4) — sparingly */ --glow-good: 0 0 8px rgba(0,216,122,0.5); --glow-warn: 0 0 8px rgba(245,158,11,0.5); /* Loading / skeleton (§4) */ --skeleton-base: rgba(255,255,255,0.04); --skeleton-sheen: rgba(255,255,255,0.07); --skeleton-shimmer: linear-gradient(90deg, transparent, var(--skeleton-sheen), transparent); --skeleton-dur: 1.2s; /* Canonical breakpoints (§5) — CONSTANTS; @container/@media conditions cannot read custom properties, so use the literal numbers and give every grid a ≤600 (sm) rule: xs 480 · sm 600 · md 820 · lg 1100 · xl 1500 */ font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--text-secondary); font-weight: var(--fw-regular); /* body default 400 (§9d) */ font-size: var(--fs-sm); /* 14px desktop base; views bump to --fs-body on mobile */ line-height: var(--lh-normal); background: transparent; /* Zero padding/margin on the outermost element. * * House rule: the dashboard is embedded as a shortcode inside an * Enfold code block, and Enfold's code block governs ALL outer * spacing — top, bottom, and sides. This plugin must NOT assert * any padding or margin on the .aadash-root wrapper. * * If breathing room around the dashboard needs to change, adjust * the Enfold code block's spacing settings, not this CSS. */ /* Declare a named container so @container aadash queries fire. The dashboard adapts to ITS rendered width, not the browser viewport — matters because WC My Account has variable sidebar widths across themes. */ container-type: inline-size; container-name: aadash; } .aadash-root *, .aadash-root *::before, .aadash-root *::after { box-sizing: border-box; } /* Heading reset — host themes (Enfold especially) set aggressive * h1/h2/h3/h4 sizes inside .woocommerce-MyAccount-content. We use * !important on margin/font-weight/line-height/color/font-family * to neutralize the inherited host styles, but DO NOT !important * font-size here (it's `inherit`) — that leaves specific * .aadash-* heading classes free to set their own size below. * Each of those classes !importants its own font-size so Enfold * can't override it either. */ .aadash-root h1, .aadash-root h2, .aadash-root h3, .aadash-root h4, .aadash-root h5, .aadash-root h6 { margin: 0 !important; font-weight: 500 !important; font-size: inherit; line-height: 1.3 !important; color: var(--text-primary) !important; font-family: inherit !important; text-transform: none !important; letter-spacing: normal !important; } .aadash-root button { font-family: inherit; cursor: pointer; } .aadash-root a { color: inherit; text-decoration: none; } .aadash-root .ti { font-style: normal; line-height: 1; } /* ─── Boot/loading state ─── */ .aadash-boot { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 80px 20px; color: var(--aadash-tx-dim); font-size: 14px; } .aadash-boot-spinner { width: 18px; height: 18px; border: 2px solid rgba(0,205,251,0.2); border-top-color: var(--aa-cyan); /* v4.0.3 (R2 CSS-1): identity cyan, not link-rest */ border-radius: 50%; animation: aadash-spin 0.7s linear infinite; } @keyframes aadash-spin { to { transform: rotate(360deg); } } /* ─── Tabs row ─── */ .aadash-tabs-row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--aadash-bd); margin-bottom: var(--space-6); padding-bottom: 0; } .aadash-tabs { display: flex; gap: 32px; } .aadash-tab { padding: 14px 4px; font-size: 16px; /* v3.12.8: primary nav >=16px */ color: var(--aadash-tx-muted); font-weight: 500; cursor: pointer; position: relative; background: transparent; border: 0; transition: color 0.15s; } .aadash-tab:hover { color: var(--aadash-tx); } .aadash-tab.is-active { color: var(--text-primary); /* per spec: #888 rest → #FFF active */ } .aadash-tab.is-active::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; /* Gradient underline per Navigation spec: 135deg, #00CDFB → #432FFF. */ background: var(--tab-grad); } .aadash-tab-ct { font-size: 12px; background: rgba(255,255,255,0.04); padding: 1px 7px; border-radius: var(--r-sm); /* 3px per spec — count badge */ margin-left: 6px; color: var(--text-muted); font-weight: 500; } /* ─── Welcome strip ─── Matches the prototype's greeting treatment: responsive clamp size, 400 base weight (lighter, more elegant), gradient name accent (this IS the identity moment per design system — cyan+atmospheric-light reads as "look here" not as a CTA), and a pulsing dot for the waiting indicator. */ .aadash-welcome { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 16px; } .aadash-welcome__title { /* clamp(min, fluid, max) — responsive between 28px and 36px based on container width. !important is necessary on letter-spacing + font-weight to defeat Enfold's wildcard heading rules (Enfold applies styles via .av_textblock_section h1, h1.av-special-heading, etc. that can still hit our welcome title through nested selectors). */ font-size: clamp(28px, 2.4vw, 36px); font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.15; margin-bottom: 8px; color: var(--text-primary); } /* Name accent — gradient from cyan to atmospheric-light per the prototype's exact spec. Identity moment, not a CTA. */ .aadash-grad-text { font-weight: 500; background: var(--aa-gradient-emphasis); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* .aadash-welcome__actions removed in v3.12.2 — the request-edit and * add-site buttons it contained duplicated actions the site card * already surfaces. The welcome strip is now title-only. */ /* ─── Buttons ─── per Button System spec. Five variants in the system: CTA, Outline, Ghost, Danger, Pro. Dashboard primarily uses CTA + Outline + Ghost. 14px font, 14px 28px padding default. 5px radius default, 3px small. */ /* CTA button — primary action affordance. !important on color, background, and border because Enfold's .av-special-heading-tag, .avia-button, and generic a/button rules inside .woocommerce-MyAccount-content can override the plain declarations. The button must always render as solid teal-on-white regardless of where the dashboard is embedded. */ .aadash-btn-cta { /* v4.0.0 — Depth treatment (DS v3.0): the primary button rests DARKER than its surroundings (#005466) and brightens toward the surface on hover (#007E99). Border carries the rest-state edge and resolves solid on hover. No glows, no shadows — glows belong to cards, never buttons. */ background: var(--aa-cta) !important; color: var(--aa-cta-text) !important; border: 1px solid var(--aa-cta-border) !important; padding: 10px 20px; border-radius: var(--r-md); /* 5px — buttons at all sizes */ font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 7px; transition: background 0.15s, border-color 0.15s, transform 0.15s; } .aadash-btn-cta:hover { background: var(--aa-cta-hover) !important; border-color: var(--aa-cta-hover) !important; color: var(--aa-cta-text) !important; } .aadash-btn-cta:active { transform: scale(0.98); } /* Inline SVG icons — ship with the markup, no font dependency. vertical-align middle + tiny negative top so they sit on the text baseline inside buttons and inline labels. The 'currentColor' stroke on the SVG itself means they inherit whatever text color their parent element has — so a cyan button gets cyan icons, a red delta gets a red arrow, etc. */ .aadash-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; margin-top: -1px; } /* Outline button — Enrique's spec exactly: cyan border at full color, cyan text, transparent background. !important on color and border because Enfold's anchor and button styles inside .woocommerce-MyAccount-content WILL override these otherwise (specifically their .avia-button and generic a[href] rules). */ .aadash-btn-out { /* v4.0.0 — Hub Outline spec (DS v3.0): cyan text (cyan may be text/border, never a fill). v4.0.12 (Enrique): border is SOLID at rest — dashed/dotted retired everywhere. */ background: transparent !important; color: var(--aa-cyan) !important; border: 1px solid rgba(0, 205, 251, 0.45) !important; /* v4.0.12 (Enrique): solid only — no dashed/dotted ghost-button borders */ padding: 10px 20px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; text-decoration: none; } .aadash-btn-out:hover { background: rgba(0, 205, 251, 0.05) !important; border-style: solid !important; border-color: var(--aa-cyan) !important; color: var(--aa-cyan) !important; } /* Ghost button — Enrique's spec: transparent background, cyan border and text. !important on color and border so Enfold's anchor and button styles can't override. This is the "Start a project" / "Open a ticket" / "Launch your first site" affordance. */ .aadash-btn-ghost { /* v4.0.0 — Hub Ghost spec (DS v3.0): neutral. #212121 border, secondary text; hover brightens text + border. The old cyan ghost competed with the CTA for attention — per the color discipline, neutral actions decay to neutral chrome. */ background: transparent !important; color: #c0c0c0 !important; border: 1px solid var(--aa-border) !important; padding: 10px 20px; border-radius: var(--r-md); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: all 0.15s; text-decoration: none; } .aadash-btn-ghost:hover { background: rgba(255, 255, 255, 0.03) !important; color: #ffffff !important; border-color: var(--bd-strong) !important; /* v4.0.3 (R2): token, not #3a3a3a */ } .aadash-link { /* v4.0.0 — one link color sitewide (DS v3.0): #009BBE at rest, brightening to identity cyan on hover. The old pattern (cyan rest → muted hover) inverted the brightness direction. */ color: var(--aa-link) !important; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s; } .aadash-link:hover { color: var(--aa-link-hover) !important; } /* ─── Generic primitives ─── */ .aadash-lbl { font-size: 12px; color: var(--aadash-tx-muted); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; } .aadash-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; } .aadash-dot--good { background: var(--aadash-good); box-shadow: 0 0 8px rgba(0,216,122,0.5); } .aadash-dot--warn { background: var(--aadash-warn); box-shadow: 0 0 8px rgba(245,158,11,0.5); } .aadash-dot--danger { background: var(--aadash-danger); } .aadash-dot--muted { background: var(--aadash-tx-muted); } .aadash-tier { font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.6px; } .aadash-tier--starter, .aadash-tier--basic { background: rgba(120,120,120,0.18); color: #c0c0c0; border: 1px solid rgba(255,255,255,0.12); } .aadash-tier--growth { /* v4.0.1 (Adam QA C-4): tier badges are PURPLE signals — cyan is action/identity, never a plan tier. Spectrum Law. */ background: rgba(87,69,255,0.10); color: var(--aa-purple-bright); border: 1px solid rgba(87,69,255,0.22); } .aadash-tier--advanced { background: rgba(87,69,255,0.14); color: var(--aa-purple-bright); /* v4.0.1: token, not #a39df5 */ border: 1px solid rgba(87,69,255,0.3); } .aadash-tier--pro { background: rgba(87,69,255,0.2); color: var(--aadash-purple-soft); border: 1px solid rgba(87,69,255,0.4); } .aadash-status { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.7px; display: inline-flex; align-items: center; gap: 5px; } .aadash-status--healthy { background: rgba(0,216,122,0.12); color: var(--aadash-good); border: 1px solid rgba(0,216,122,0.2); } .aadash-status--warn { background: rgba(245,158,11,0.14); color: var(--aadash-warn); border: 1px solid rgba(245,158,11,0.3); } .aadash-status--danger { background: rgba(255,92,92,0.10); color: var(--aadash-danger); border: 1px solid rgba(255,92,92,0.3); } .aadash-status--building { background: rgba(245,158,11,0.14); color: var(--aadash-warn); border: 1px solid rgba(245,158,11,0.3); } .aadash-delta--up, .aadash-delta--dn { font-size: 12px; font-weight: 500; display: inline-flex; align-items: center; gap: 2px; } .aadash-delta--up { color: var(--aadash-good); } .aadash-delta--dn { color: var(--aadash-danger); } /* ─── Cards ─── */ .aadash-card { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); overflow: hidden; } /* ============================================================ YOUR SITE (single-site anchor) ============================================================ */ .aadash-site-anchor { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 0; } .aadash-site-anchor__thumb { position: relative; /* v3.12.2 (Enrique): bumped from card-recessed bg to elevated * #161616. The site anchor is THE focal card of the dashboard; * the recessed background blended too close to the page void * in bright-light viewing. The +1 layer brightness reads more * clearly outdoors / in well-lit office environments. */ background: var(--bg-elevated); overflow: hidden; border: 1px solid var(--aadash-bd); border-right: 0; border-radius: 5px 0 0 5px; /* Padding is responsive on the same clamp as the body so the two sides of the hero remain visually balanced. */ padding: clamp(16px, 1vw, 24px); /* No aspect-ratio — grid `align-items: stretch` (default) makes the thumb's height match the body's height. The img below has height:100% + object-fit:cover so the screenshot fills whatever height the body drives. min-height keeps the thumb visually present even when body content is unusually short. */ min-height: 280px; } .aadash-site-anchor__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; border-radius: 5px; } .aadash-site-anchor__thumb-badge { position: absolute; top: 16px; left: 16px; z-index: 2; } .aadash-site-anchor__poster { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--pad-card); } .aadash-site-anchor__poster-name { font-size: 28px; font-weight: 500; letter-spacing: -0.5px; margin-bottom: 6px; color: rgba(255,255,255,0.85); text-align: center; } .aadash-site-anchor__poster-url { font-size: 14px; color: rgba(255,255,255,0.4); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; } .aadash-site-anchor__body { /* v3.12.2: matches the thumb's elevated background — see comment * on .aadash-site-anchor__thumb for the daylight-contrast rationale. */ background: var(--bg-elevated); border: 1px solid var(--aadash-bd); border-left: 0; border-radius: 0 5px 5px 0; padding: clamp(16px, 1vw, 24px); display: flex; flex-direction: column; gap: clamp(16px, 3vw, 24px); /* Position context kept for tooltip/etc descendants. Tier no longer needs absolute positioning — it lives in __head's flex row alongside the URL. */ position: relative; } /* Top row of the body: URL on the left, tier badge on the right. */ .aadash-site-anchor__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .aadash-site-anchor__tier { flex-shrink: 0; } .aadash-site-anchor__url { font-size: clamp(16px, 1.5vw, 24px); font-weight: 500; color: var(--text-primary); line-height: 1.2; /* Long hostnames truncate gracefully — tier badge stays anchored to the right edge regardless. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-site-anchor__health { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); } .aadash-site-anchor__metric { margin-top: 0; display: flex; flex-direction: column; gap: 6px; } .aadash-site-anchor__metric-lbl { font-size: 12px; color: var(--aadash-tx-muted); text-transform: uppercase; letter-spacing: 1.4px; font-weight: 700; margin-bottom: 0; } .aadash-site-anchor__metric-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .aadash-site-anchor__metric-val { font-size: 28px; font-weight: 700; /* v4.0.1 (Adam QA M-8): stat numbers are 700 */ color: #fff; letter-spacing: -0.5px; line-height: 1; } .aadash-site-anchor__metric-delta { display: inline-flex; align-items: center; gap: 4px; margin-left: 0; font-size: 12px; font-weight: 500; } /* Sparkline beneath the visit count — matches A² Analytics treatment: cyan stroke with subtle gradient fill underneath. Container fills the body width; SVG inside uses preserveAspectRatio="none" so the curve stretches edge-to-edge. */ .aadash-site-anchor__spark { margin: 4px 0 2px; height: 64px; width: 100%; line-height: 0; } .aadash-site-anchor__spark svg { width: 100%; height: 100%; display: block; } .aadash-site-anchor__metric-sub { margin-top: 0; font-size: 14px; color: var(--aadash-tx-muted); } .aadash-site-anchor__actions { display: flex; gap: 8px; margin-top: auto; } .aadash-site-anchor__actions .aadash-btn-cta, .aadash-site-anchor__actions .aadash-btn-out { flex: 1; justify-content: center; } /* ============================================================ YOUR SITES (multi-site list) ============================================================ */ .aadash-sites-list-card { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); overflow: hidden; } .aadash-sites-row { display: grid; grid-template-columns: 110px 1fr 110px 110px 36px; align-items: center; gap: 16px; padding: 16px 20px; border-bottom: 1px solid var(--aadash-bd); cursor: pointer; transition: background 0.15s; } .aadash-sites-row:last-child { border-bottom: 0; } .aadash-sites-row:hover { background: rgba(0,205,251,0.025); } .aadash-sites-row__thumb { width: 100px; aspect-ratio: 16 / 10; border-radius: var(--r-sm); overflow: hidden; border: 1px solid var(--aadash-bd); position: relative; } .aadash-sites-row__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .aadash-sites-row__thumb-poster { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 6px; text-align: center; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.7); letter-spacing: 0.5px; } .aadash-sites-row__name { font-size: 14px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 8px; } .aadash-sites-row__name .aadash-tier { font-size: 12px; padding: 2px 7px; } .aadash-sites-row__url { font-size: 14px; color: var(--aadash-tx-muted); margin-top: 2px; } .aadash-sites-row__health { font-size: 14px; color: var(--aadash-tx-dim); margin-top: 6px; display: inline-flex; align-items: center; gap: 6px; } .aadash-sites-row__metric { text-align: left; } .aadash-sites-row__metric-lbl { font-size: 12px; color: var(--aadash-tx-muted); text-transform: uppercase; letter-spacing: 1.3px; font-weight: 700; margin-bottom: 2px; } .aadash-sites-row__metric-val { font-size: 18px; font-weight: 500; color: #fff; } .aadash-sites-row__metric-delta { font-size: 12px; font-weight: 500; margin-left: 5px; } .aadash-sites-row__spark { width: 100px; height: 36px; } .aadash-sites-row__arrow { color: var(--aadash-tx-faint); font-size: 16px; text-align: right; transition: color 0.15s, transform 0.15s; } .aadash-sites-row:hover .aadash-sites-row__arrow { /* v4.0.3 (R2 CSS-1): hover affordance brightens — book: "chevrons * inside clickable cards stay action cyan; they are the affordance". */ color: var(--aa-link-hover); transform: translateX(2px); } .aadash-sites-row__notraffic { font-size: 14px; color: var(--aadash-tx-muted); font-style: italic; } /* ============================================================ SECTION HEADERS (used across components) ============================================================ */ .aadash-section { margin-bottom: 24px; } .aadash-section__head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; padding: 0 4px; } .aadash-section__title { /* Unified premium eyebrow treatment (Enrique, v3.20.9): 12px / 500 / #888 / uppercase / 2px tracking — shared across .aadash-activity__title, .aadash-rail-group__title and .aadash-arsenal__section-title so every section label reads as the same tracked-out system label. */ font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; color: #888888; display: flex; align-items: center; gap: 10px; } .aadash-section__title i { color: #8b92b3; /* v4.0.1 (Adam QA H-8): icons are neutral */ font-size: 16px; } .aadash-section__count { font-size: 12px; background: rgba(255,255,255,0.06); padding: 1px 8px; border-radius: var(--r-sm); color: var(--text-muted); font-weight: 500; } /* ============================================================ TWO-COLUMN LAYOUT (your-sites + activity) ============================================================ */ .aadash-grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 22px; margin-bottom: 28px; } .aadash-grid-2--projects-tickets { /* Active Projects + Open Tickets are equal-weight peers — 50/50 split, NOT the 1.55/1 default of the sites+activity row above. */ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-bottom: 28px; } /* ============================================================ ACTIVITY FEED ============================================================ */ .aadash-activity { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); overflow: hidden; align-self: start; } /* v3.18.0 (Enrique): on the dashboard home the activity column matches * the site-anchor's height and scrolls internally when the feed is * taller, so the two columns stay balanced. Absolutely filling a * relatively-positioned, stretched activity with __inner removes the * feed from grid track sizing, so the LEFT column (anchor / sites grid) * drives the row height and the activity can't out-grow it. Scoped to * the grid-2 layout — the no-sites full-width activity stays normal. */ .aadash-grid-2 > .aadash-activity { align-self: stretch; position: relative; } .aadash-grid-2 > .aadash-activity > .aadash-activity__inner { position: absolute; inset: 0; display: flex; flex-direction: column; } .aadash-grid-2 > .aadash-activity > .aadash-activity__inner > .aadash-activity__head { flex: 0 0 auto; } .aadash-grid-2 > .aadash-activity > .aadash-activity__inner > .aadash-activity__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; } .aadash-activity__head { padding: 14px 20px; /* v3.12.2 (Enrique): elevated header layer over the recessed * panel body. Visually separates the head from the activity * feed below and reads better in bright-light conditions. */ background: var(--bg-elevated); display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--aadash-bd); } .aadash-activity__title { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 500; color: #888888; display: flex; align-items: center; gap: 8px; } .aadash-activity__count { font-size: 12px; color: var(--text-muted); font-weight: 400; } .aadash-activity__row { padding: 12px 20px; display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--aadash-bd); transition: background 0.15s; cursor: pointer; } .aadash-activity__row:last-child { border-bottom: 0; } .aadash-activity__row:hover { background: rgba(0,205,251,0.02); } .aadash-activity__ic { width: 28px; height: 28px; border-radius: var(--r-md); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .aadash-activity__ic--good { background: rgba(0,216,122,0.1); color: var(--aadash-good); } .aadash-activity__ic--info { background: rgba(255,255,255,0.04); color: #8b92b3; } /* v4.0.3 (R2 CSS-2): icons are neutral */ .aadash-activity__ic--warn { background: rgba(245,158,11,0.1); color: var(--aadash-warn); } .aadash-activity__ic--neutral { background: rgba(255,255,255,0.04); color: var(--aadash-tx-dim); } .aadash-activity__ic--purple { background: rgba(87,69,255,0.1); color: var(--aadash-purple-soft); } .aadash-activity__body { flex: 1; min-width: 0; } .aadash-activity__title-line { font-size: 14px; color: #fff; line-height: 1.4; } .aadash-activity__title-line strong { font-weight: 500; color: #fff; } .aadash-activity__detail { font-size: 14px; color: var(--aadash-tx-muted); margin-top: 2px; } .aadash-activity__time { font-size: 12px; color: var(--aadash-tx-muted); text-transform: uppercase; letter-spacing: 0.8px; flex-shrink: 0; } .aadash-activity__empty { padding: 32px 20px; text-align: center; color: var(--aadash-tx-muted); font-size: 14px; } /* ============================================================ PROJECTS + TICKETS (two-column below the fold) ============================================================ */ .aadash-panel { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); padding: 16px 20px 16px; display: flex; flex-direction: column; } .aadash-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .aadash-panel__title-row { display: flex; align-items: center; gap: 10px; } /* Project rows */ .aadash-project-row { display: grid; grid-template-columns: 36px 1fr auto auto; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--aadash-bd); } .aadash-project-row:last-child { border-bottom: 0; padding-bottom: 0; } .aadash-project-row__avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, rgba(0,205,251,0.2), rgba(87,69,255,0.2)); color: #fff; font-size: 12px; font-weight: 500; display: flex; align-items: center; justify-content: center; } .aadash-project-row__body { min-width: 0; } .aadash-project-row__name { font-size: 14px; font-weight: 500; color: #fff; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .aadash-project-row__meta { font-size: 14px; color: var(--aadash-tx-muted); } .aadash-project-row__progress-wrap { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .aadash-project-row__progress { flex: 1; height: 4px; background: rgba(255,255,255,0.06); border-radius: 2px; overflow: hidden; } .aadash-project-row__progress-bar { height: 100%; /* v4.0.3 (Enrique fidelity + R2 CSS-1): progress bars carry THE * emphasis gradient everywhere, same as the v4 dashboard card. */ background: var(--aa-gradient-emphasis); border-radius: 3px; transition: width 0.4s ease; } .aadash-project-row__progress-pct { font-size: 12px; color: var(--aadash-tx-dim); font-weight: 500; min-width: 32px; text-align: right; } .aadash-pill { font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.6px; display: inline-flex; align-items: center; gap: 5px; } .aadash-pill--awaiting { /* v4.0.3 (R2 CSS-1): "Awaiting you" is a WARN signal, matching the * v4 statusChip tone — cyan is action/identity, never a status. */ background: rgba(245,158,11,0.12); color: var(--aadash-warn); border: 1px solid rgba(245,158,11,0.3); } .aadash-pill--ontrack { background: rgba(0,216,122,0.12); color: var(--aadash-good); border: 1px solid rgba(0,216,122,0.2); } .aadash-pill--inprogress { background: rgba(245,158,11,0.12); color: var(--aadash-warn); border: 1px solid rgba(245,158,11,0.25); } .aadash-pill--blocked { background: rgba(255,92,92,0.10); color: var(--aadash-danger); border: 1px solid rgba(255,92,92,0.25); } .aadash-pill--closed { background: rgba(139,146,179,0.10); color: var(--aadash-tx-muted); border: 1px solid var(--aadash-bd); } /* Ticket rows */ .aadash-ticket-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--aadash-bd); } .aadash-ticket-row:last-child { border-bottom: 0; } .aadash-ticket-row__ic { width: 32px; height: 32px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); color: var(--aadash-tx-dim); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 14px; } .aadash-ticket-row__body { flex: 1; min-width: 0; } .aadash-ticket-row__meta-line { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .aadash-ticket-row__id { font-size: 14px; font-weight: 500; color: #fff; } .aadash-ticket-row__time { font-size: 14px; color: var(--aadash-tx-muted); margin-left: auto; } .aadash-ticket-row__title { font-size: 14px; color: var(--aadash-tx); line-height: 1.4; } .aadash-ticket-row__open { flex-shrink: 0; align-self: center; } .aadash-panel__footer { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--aadash-bd); display: flex; justify-content: flex-end; } /* Empty states (ghost CTAs) */ .aadash-empty { text-align: center; padding: 24px 16px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .aadash-empty__title { font-size: 16px; color: var(--aadash-tx); font-weight: 500; } .aadash-empty__desc { font-size: 14px; color: var(--aadash-tx-muted); line-height: 1.5; max-width: 380px; margin-bottom: 6px; } /* ============================================================ EXPAND YOUR ARSENAL ============================================================ */ .aadash-arsenal { /* v3.20.3 (Enrique): more separation from the Tools box above. */ margin-top: 36px; margin-bottom: 20px; } .aadash-arsenal__head { display: flex; align-items: center; justify-content: space-between; /* v3.20.3: no bottom margin — the domain panel below carries its own 32px margin-top, so a bottom margin here doubled the gap. */ margin-bottom: 0; padding: 16px 0; } /* Section title for "Expand your arsenal" — v3.12.2 (Enrique). * Distinct from the eyebrow-style .aadash-section__title used inside * cards. This title separates a true page-level section, so it * reads as mixed-case 18px white with no letter-spacing — closer to * a chapter header than an in-card label. * * !important on font-size + color because Enfold's WC My Account * div rules can leak into the dashboard root and shift the size * down to the theme's body baseline. */ .aadash-arsenal__section-title { color: #888888 !important; /* v3.20.9 (Enrique): demoted from the 18-24px clamp to the 12px eyebrow * tier so it matches the other section titles exactly — one unified * tracked-uppercase label treatment across the dashboard. !important * stays because Enfold's WC My Account heading sizing would otherwise * inflate it. */ font-size: 12px !important; font-weight: 500 !important; letter-spacing: 2px !important; text-transform: uppercase !important; } .aadash-arsenal__grid { display: grid; /* v3.12.0: 4 columns (was 5). The Domains card was removed — * the actual wp24_domaincheck search panel below the grid IS * the domain product surface, so a separate card was redundant. * Current cards: A² Sites · Hosting · A² Mail · Paid Media. */ grid-template-columns: repeat(4, 1fr); gap: 14px; } /* Arsenal card — matches the prototype's .nx pattern: - Card itself has NO padding; flex column with visual + body - Visual sits flush at the top edge, 5/3 aspect ratio, with a subtle bottom hairline separator - Body container has its own 16px 18px 18px padding (top tighter than bottom — pull the kicker close to the visual edge, give the CTA breathing room below) */ .aadash-arsenal__card { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); cursor: pointer; position: relative; overflow: hidden; display: flex; flex-direction: column; text-decoration: none; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; /* v4.0.1 (Adam QA H-11) */ } .aadash-arsenal__card:hover { border-color: rgba(0,205,251,0.3); transform: translateY(-2px); box-shadow: 0 0 20px rgba(0,205,251,0.07); /* v4.0.3 (R2): book card-hover glow */ } /* v3.12.2's image-mode card variant (.aadash-arsenal__card--image + * .aadash-arsenal__img) was REMOVED at v3.12.3. The filter-driven * image-URL approach was overkill for the value; cards stay as * gradient + icon + body indefinitely. */ .aadash-arsenal__visual { aspect-ratio: 5/3; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid rgba(255,255,255,0.04); background: linear-gradient(135deg, #161616, #0c0c0c); /* v4.0.1 (Adam QA C-3): #1a1a1a graveyarded */ } .aadash-arsenal__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; } /* Each variant is a richer two-color gradient. The prototype shows distinct brand tones per service category — Done-for-you (cyan/purple), Plan-add (deep cyan), Grow (magenta), Add (green), New (indigo). */ .aadash-arsenal__visual--cyan { background: radial-gradient(circle at 70% 30%, rgba(0,205,251,0.35), transparent 60%), linear-gradient(135deg, #0a2230, #0d3344); } .aadash-arsenal__visual--purple { background: radial-gradient(circle at 30% 30%, rgba(0,205,251,0.30), transparent 55%), linear-gradient(135deg, #1a1740, #2d2068); } .aadash-arsenal__visual--green { background: radial-gradient(circle at 30% 70%, rgba(0,216,122,0.30), transparent 60%), linear-gradient(135deg, #0a2a1f, #0e3a2a); } .aadash-arsenal__visual--magenta { /* v4.0.3 (R2): magenta is foreign to the v3.0 system — this legacy * variant key now renders the teal family (matches the v4 hueMap * remap: magenta → accent-teal). */ background: radial-gradient(circle at 50% 30%, rgba(0,126,153,0.35), transparent 60%), linear-gradient(135deg, #0a2630, #0d3a47); } .aadash-arsenal__visual--indigo { background: radial-gradient(circle at 60% 60%, rgba(87,69,255,0.30), transparent 60%), linear-gradient(135deg, #0d0a25, #1a1340); } /* Atmospheric — used by Paid Media Express (v3.12.0). Visually * distinct from --purple (A² Sites): leads with the atmospheric * brand purple (#5745ff) with a warm magenta highlight in the * lower-right. Echoes the "boost / energy" feel the card carried * as the old rail Featured slot before the IA reorg. */ .aadash-arsenal__visual--atmospheric { /* v4.0.3 (R2): warm-magenta highlight replaced with the cyan glow — * purple base + cyan energy is the sanctioned emphasis pairing. */ background: radial-gradient(circle at 75% 75%, rgba(0,205,251,0.22), transparent 55%), radial-gradient(circle at 25% 25%, rgba(87,69,255,0.42), transparent 60%), linear-gradient(135deg, #160e3a, #2c1660); } .aadash-arsenal__visual-icon { color: rgba(255,255,255,0.65); display: inline-flex; align-items: center; justify-content: center; } .aadash-arsenal__visual-icon .aadash-icon { width: 38px; height: 38px; margin-top: 0; } .aadash-arsenal__kicker { /* v4.0.1 (Adam QA H-9): eyebrow kickers are PURPLE mono labels per the v3.0 type system — cyan is action/identity, not labeling. 3px tracking per .ds-eyebrow. */ font-family: var(--aa-font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 3px; font-weight: 700; color: var(--aa-purple-bright); margin-bottom: 6px; } .aadash-arsenal__title { font-size: 14px; font-weight: 500; color: var(--text-primary); letter-spacing: -0.005em; line-height: 1.3; } .aadash-arsenal__desc { font-size: 14px; color: var(--text-muted); line-height: 1.45; margin-top: 2px; flex: 1; } .aadash-arsenal__cta { margin-top: auto; padding-top: 12px; font-size: 14px; color: var(--accent-action); font-weight: 500; display: inline-flex; align-items: center; gap: 5px; } .aadash-arsenal__card:hover .aadash-arsenal__cta i { transform: translateX(3px); transition: transform 0.15s; } /* ============================================================ ARSENAL CARD — TEXT-ON-IMAGE OVERLAY MODE (v3.12.5 — Enrique) Collapses the old visual(5:3) + body two-part card into one compact box. The per-theme gradient becomes a full-bleed background layer; the kicker/title/desc/CTA overlay it, anchored to the bottom over a dark scrim for legibility. ~190px tall vs the old ~380px. No uploaded artwork — the gradient IS the backdrop (the v3.12.3 image-URL infra stays removed). render.arsenal emits .aadash-arsenal__card--overlay as of v3.12.5; the base visual/body rules above are retained but unused, and the overlay-scoped rules below win via higher specificity where they overlap. ============================================================ */ .aadash-arsenal__card--overlay { min-height: 190px; justify-content: flex-end; /* in-flow content sits at the bottom */ } /* Gradient becomes the full-bleed background layer. */ .aadash-arsenal__card--overlay .aadash-arsenal__visual { position: absolute; inset: 0; aspect-ratio: auto; /* override the base 5/3 */ border-bottom: 0; display: block; /* not the centering flexbox of the base */ } /* Dark bottom-up scrim so overlaid text stays readable over the lighter * radial highlights in the gradients. */ .aadash-arsenal__card--overlay .aadash-arsenal__visual::after { content: ''; position: absolute; inset: 0; background: linear-gradient( to top, rgba(8, 8, 8, 0.92) 0%, rgba(8, 8, 8, 0.72) 32%, rgba(8, 8, 8, 0.20) 64%, rgba(8, 8, 8, 0) 100% ); } /* Brand icon as a small top-left mark on the artwork. */ .aadash-arsenal__card--overlay .aadash-arsenal__visual-icon { position: absolute; top: 14px; left: 16px; color: rgba(255, 255, 255, 0.85); } .aadash-arsenal__card--overlay .aadash-arsenal__visual-icon .aadash-icon { width: 26px; height: 26px; } .aadash-arsenal__card--overlay .aadash-arsenal__overlay { position: relative; z-index: 1; /* above the gradient + scrim */ display: flex; flex-direction: column; gap: 4px; padding: 16px; } .aadash-arsenal__card--overlay .aadash-arsenal__title { font-size: 18px; /* v3.12.8: more presence on mobile (16px read small) */ color: #ffffff; } .aadash-arsenal__card--overlay .aadash-arsenal__desc { margin-top: 0; flex: none; /* don't stretch — keeps cards compact */ /* Clamp to 2 lines so cards stay uniform if a desc runs long. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .aadash-arsenal__card--overlay .aadash-arsenal__cta { margin-top: 8px; padding-top: 0; } /* ============================================================ SITES TAB — Grid of large poster cards ============================================================ */ .aadash-sites-tab__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; } .aadash-sites-tab__title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: #888888; display: flex; align-items: center; gap: 10px; } .aadash-sites-tab__total { font-size: 12px; color: var(--aadash-tx-muted); font-weight: 400; text-transform: none; letter-spacing: 0; } .aadash-sites-tab__filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .aadash-filter-pill { background: transparent; border: 1px solid var(--aadash-bd-strong); color: var(--aadash-tx-dim); flex-shrink: 0; padding: 6px 12px; /* Adam QA: was 20px which is no-man's-land (not a card corner, * not a pill). Spec: 999px for true pill shape. */ border-radius: 999px; font-size: 12px; font-weight: 500; transition: all 0.15s; display: inline-flex; align-items: center; gap: 6px; } .aadash-filter-pill:hover { border-color: rgba(255,255,255,0.18); color: var(--aadash-tx); } .aadash-filter-pill.is-active { background: rgba(0,205,251,0.08); border-color: rgba(0,205,251,0.3); color: var(--aa-cyan); /* v4.0.3 (R2 CSS-1): ON-state affordance stays bright */ } .aadash-filter-pill__ct { opacity: 0.7; font-size: 12px; } .aadash-sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 18px; } /* v3.15.0: home multi-site overview grid. Intrinsic (auto-fit) so it * fills the narrower overview column — 2-up when there's room, 1-up when * the column is tight (rail folded / mobile) — instead of the Sites tab's * fixed 4-col, which would cram cards in the half-width overview slot. */ .aadash-home-sites-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 18px; } .aadash-site-card { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: border-color 0.2s, transform 0.2s; display: flex; flex-direction: column; } .aadash-site-card:hover { border-color: rgba(0,205,251,0.3); transform: translateY(-2px); } .aadash-site-card__thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; } .aadash-site-card__thumb-badges { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: flex-start; z-index: 2; } .aadash-site-card__poster { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px; } .aadash-site-card__poster-name { font-size: 22px; font-weight: 500; color: rgba(255,255,255,0.9); text-align: center; letter-spacing: -0.3px; } .aadash-site-card__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .aadash-site-card__body { padding: 16px 18px 14px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .aadash-site-card__name { font-size: 14px; font-weight: 500; color: #fff; } .aadash-site-card__url { font-size: 18px; color: #ffffff !important; margin-top: 0; font-weight: 500 !important; } .aadash-site-card__metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 8px; border-top: 1px solid var(--aadash-bd); } .aadash-site-card__metric-lbl { font-size: 12px; color: var(--aadash-tx-muted); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 500; margin-bottom: 4px; } .aadash-site-card__metric-row { display: flex; align-items: baseline; gap: 6px; } .aadash-site-card__metric-val { font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.3px; } .aadash-site-card__metric-delta { font-size: 12px; font-weight: 500; } .aadash-site-card__spark { width: 100%; height: 28px; margin-top: 4px; } .aadash-site-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--aadash-bd); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .aadash-site-card__health-line { font-size: 14px; color: var(--aadash-tx-dim); display: inline-flex; align-items: center; gap: 5px; /* Empty span (no actionable health) still flexes; min-width holds its position so the actions stay right-aligned. */ min-width: 0; flex: 1; } .aadash-site-card__foot-actions { display: inline-flex; align-items: center; /* Space the two buttons so the Visit and Analytics targets are cleanly separated. Container queries on the parent grid scale this down on narrow viewports. */ gap: 12px; flex-shrink: 0; } /* Compact button modifier for card footers. Composes with .aadash-btn-cta * and .aadash-btn-out; just trims padding and font for dense surfaces. */ .aadash-btn-sm { padding: 7px 12px !important; font-size: 12px !important; gap: 5px !important; } /* ============================================================ DOMAINS TAB ============================================================ */ .aadash-domains-tab__head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 18px; } .aadash-domains-tab__title { font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 600; color: #ffffff; display: flex; align-items: center; gap: 10px; } .aadash-domains-tab__total { display: block; margin-top: 6px; font-size: 14px; color: var(--text-secondary); font-weight: 400; text-transform: none; letter-spacing: 0; } /* v3.20.6 (Enrique): domain cards refined. The favicon sits ON the name line (was stranded on its own row above it); the registration badge gets crisp brand styling (cyan, not muddy grey — see __reg below); and the footer carries the two real actions — Request a change (primary: DNS / subdomain / record requests, the common path) and Manage in hub (secondary, for the few who self-serve). auto-fill (not auto-fit) so a lone card stays contained instead of stretching across the whole row. */ .aadash-domains-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; } .aadash-domain-card { background: var(--bg-elevated); border: 1px solid var(--aadash-bd) !important; border-radius: var(--r-lg); padding: 20px; display: flex; flex-direction: column; gap: 14px; transition: border-color 0.15s ease; } .aadash-domain-card:hover { border-color: var(--aadash-bd-strong) !important; } /* Top line: favicon + domain name + status chip, centered on one baseline. */ .aadash-domain-card__top { display: flex; align-items: center; gap: 12px; } .aadash-domain-card__top .aadash-domain-row__favicon { width: 40px; height: 40px; } .aadash-domain-card__top .aadash-domain-row__favicon img { width: 24px; height: 24px; } .aadash-domain-card__name { flex: 1; min-width: 0; font-size: 20px; font-weight: 500; color: var(--text-primary); line-height: 1.2; overflow-wrap: anywhere; } .aadash-domain-card__top .aadash-domain-row__status { flex-shrink: 0; } /* The registration badge is a direct child of the card — keep it hugging its content (the card is a stretch-align column, which would otherwise widen it). */ .aadash-domain-card > .aadash-domain-row__reg { align-self: flex-start; } /* Footer: renewal line above the two actions, separated by a hairline. */ .aadash-domain-card__foot { margin-top: 2px; padding-top: 16px; border-top: 1px solid var(--aadash-bd) !important; display: flex; flex-direction: column; gap: 14px; } .aadash-domain-card__renewal { font-size: 14px; color: var(--text-secondary); } .aadash-domain-card__renewal--urgent { color: var(--warn); } .aadash-domain-card__renewal--critical { color: var(--danger); } .aadash-domain-card__renewal--none { color: var(--text-dim); } .aadash-domain-card__actions { display: flex; gap: 8px; flex-wrap: wrap; } .aadash-domain-card__actions > a { flex: 1 1 auto; justify-content: center; } .aadash-domain-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto auto auto; align-items: center; gap: 16px; padding: 20px 0; border-bottom: 1px solid var(--aadash-bd); transition: background 0.15s; } .aadash-domain-row:last-child { border-bottom: 0; } /* Favicon container — fetches the site's actual favicon. Falls back * to a letter avatar via the inner img's onerror handler. */ .aadash-domain-row__favicon { width: 48px; height: 48px; border-radius: var(--r-md); background: rgba(255,255,255,0.04); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; position: relative; } .aadash-domain-row__favicon img { width: 30px; height: 30px; display: block; } .aadash-domain-row__favicon-fallback { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 18px; font-weight: 500; color: #fff; /* v4.0.1: monogram is neutral, not an action */ } .aadash-domain-row__body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .aadash-domain-row__domain { font-size: 22px; color: var(--text-primary); font-weight: 500; display: inline-flex; align-items: center; gap: 10px; } /* Status dot — colored circle indicating subscription state. */ .aadash-domain-row__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .aadash-domain-row__dot--active { background: var(--good); box-shadow: 0 0 0 3px rgba(0,216,122,0.12); } .aadash-domain-row__dot--expiring { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); } .aadash-domain-row__dot--on-hold { background: var(--warn); box-shadow: 0 0 0 3px rgba(245,158,11,0.12); } .aadash-domain-row__dot--cancelled { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,92,92,0.12); } .aadash-domain-row__dot--expired { background: var(--danger); box-shadow: 0 0 0 3px rgba(255,92,92,0.12); } .aadash-domain-row__dot--unknown { background: var(--text-dim); box-shadow: 0 0 0 3px rgba(136,136,136,0.12); } /* v3.14.0: status is its OWN column, rendered as a chip. */ .aadash-domain-row__status { justify-self: start; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1; white-space: nowrap; padding: 5px 11px; border-radius: 999px; border: 1px solid transparent !important; } .aadash-domain-row__status--active { color: var(--good); background: rgba(0,216,122,0.12); border-color: rgba(0,216,122,0.30) !important; } .aadash-domain-row__status--expiring { color: var(--warn); background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.30) !important; } .aadash-domain-row__status--on-hold { color: var(--warn); background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.30) !important; } .aadash-domain-row__status--cancelled { color: var(--danger); background: rgba(255,92,92,0.12); border-color: rgba(255,92,92,0.30) !important; } .aadash-domain-row__status--expired { color: var(--danger); background: rgba(255,92,92,0.12); border-color: rgba(255,92,92,0.30) !important; } .aadash-domain-row__status--unknown { color: var(--text-dim); background: transparent; border-color: transparent !important; padding-left: 0; } /* v3.14.0: quiet registration-provenance subline (replaces the loud pill). * registered = subtle cyan-iconed; external = dimmed. */ .aadash-domain-row__reg { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--aadash-bd) !important; background: rgba(255,255,255,0.04); color: var(--text-secondary); } .aadash-domain-row__reg .aadash-icon { width: 14px; height: 14px; flex-shrink: 0; } .aadash-domain-row__reg--registered { border-color: rgba(0,126,153,0.3) !important; /* v4.0.1: teal badge family */ background: rgba(0,205,251,0.06); color: var(--accent-action); } .aadash-domain-row__reg--registered .aadash-icon { color: var(--accent-action); } .aadash-domain-row__reg--external { color: var(--text-muted); } .aadash-domain-row__reg--external .aadash-icon { color: var(--text-dim); } .aadash-domain-row__renews { text-align: right; flex-shrink: 0; } .aadash-domain-row__renews-lbl { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 4px; } .aadash-domain-row__renews-val { font-size: 14px; color: var(--text-secondary); font-weight: 500; } .aadash-domain-row__renews-val--urgent { color: var(--warn); } .aadash-domain-row__renews-val--critical { color: var(--danger); } .aadash-domain-row__renews-val--none { color: var(--text-dim); font-size: 14px; } /* Registration provenance badge (v3.12.6). 'registered' = active domain * subscription with Ad Armory; 'external' = registered with a 3rd party, * pointed at our hosting. */ .aadash-domain-row__tags { margin-top: 6px; } .aadash-domain-reg { display: inline-flex; align-items: center; gap: 5px; /* v3.12.7: typography policy bans sub-12px. Standard label tier * (12px / 700 / uppercase / tracked) — matches * .aadash-domain-row__renews-lbl and .aadash-rail-group__title. */ font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1; padding: 4px 9px; border-radius: 999px; border: 1px solid transparent; } .aadash-domain-reg .aadash-icon { width: 12px; height: 12px; } .aadash-domain-reg--registered { color: var(--aa-accent-teal); /* v4.0.1: badge accent = teal, cyan never fills */ background: rgba(0, 126, 153, 0.12); border-color: rgba(0, 205, 251, 0.30); } .aadash-domain-reg--external { color: var(--text-muted); background: rgba(255, 255, 255, 0.04); border-color: var(--bd); } /* ============================================================ ANIMATIONS ============================================================ */ @keyframes aadash-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .aadash-fade-in { animation: aadash-fade-in 0.35s ease both; } .aadash-fade-in:nth-child(1) { animation-delay: 0s; } .aadash-fade-in:nth-child(2) { animation-delay: 0.05s; } .aadash-fade-in:nth-child(3) { animation-delay: 0.1s; } .aadash-fade-in:nth-child(4) { animation-delay: 0.15s; } .aadash-fade-in:nth-child(5) { animation-delay: 0.2s; } .aadash-fade-in:nth-child(6) { animation-delay: 0.25s; } /* ============================================================ RESPONSIVE — container queries The dashboard's width is determined by the WooCommerce My Account wrapper (.woocommerce-MyAccount-content) — NOT the browser viewport. A wide browser with a wide sidebar can still leave only 600px for the dashboard, and viewport-based @media queries can't see that. Container queries adapt to the actual rendered width of the dashboard's container. .aadash-root declares itself as a named container (`aadash`) and all responsive rules below target it. Breakpoints adapted from the prototype's @container main queries. ============================================================ */ /* v3.7.3 (Enrique): breakpoint lowered from 1100px → 700px. The old value triggered on 1440px viewports with sidebar+padding (.aadash container ≈1100px → grid collapsed too early). 700px is the actual "narrow column" threshold below which the side-by-side layout stops working. */ @container aadash (max-width: 700px) { .aadash-grid-2, .aadash-grid-2--projects-tickets { grid-template-columns: 1fr; } .aadash-arsenal__grid { grid-template-columns: repeat(3, 1fr); } .aadash-site-anchor { grid-template-columns: 1fr; } .aadash-site-anchor__thumb { border-radius: 5px 5px 0 0; border-right: 1px solid var(--bd); border-bottom: 0; /* Stacked layout: restore a fixed aspect ratio so the thumb doesn't grow to whatever min-height was set for side-by-side. */ aspect-ratio: 16 / 9; min-height: 0; } .aadash-site-anchor__body { border-radius: 0 0 5px 5px; border-left: 1px solid var(--bd); border-top: 0; } } /* v3.20.3 (Enrique): the equal-weight Projects + Tickets row cramps well before the 700px site-anchor threshold — at ~1024px viewports the container is still ~770px and the two cards smash. Stack THIS row on its own at a wider breakpoint (<=900px container, which is roughly a ~1150-1200px viewport in this layout) without touching the 2fr/1fr site-anchor + activity row above, which still reads fine side-by-side. */ @container aadash (max-width: 900px) { .aadash-grid-2, .aadash-grid-2--projects-tickets { grid-template-columns: 1fr; } } @container aadash (max-width: 820px) { .aadash-arsenal__grid { grid-template-columns: repeat(2, 1fr); } .aadash-sites-row { grid-template-columns: 80px 1fr; grid-template-areas: 'thumb info' 'metrics metrics' 'spark arrow'; } .aadash-sites-row__thumb { grid-area: thumb; width: 80px; } .aadash-sites-row__metric { grid-area: metrics; } .aadash-sites-row__spark { grid-area: spark; } .aadash-sites-row__arrow { grid-area: arrow; } } @container aadash (max-width: 600px) { .aadash-arsenal__grid { grid-template-columns: 1fr; } .aadash-welcome { flex-direction: column; } /* v3.20.2: filters drop to a full-width row below the eyebrow so the * pills wrap with breathing room instead of squishing on phones. */ .aadash-sites-tab__filters { width: 100%; } /* v3.12.8: tabs >=16px + horizontally scrollable so four tabs with * count badges don't overflow / clip "Domains" on a phone. */ .aadash-tabs { gap: 18px; overflow-x: auto; min-width: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .aadash-tabs::-webkit-scrollbar { display: none; } .aadash-tab { font-size: 16px; padding: 12px 2px; white-space: nowrap; flex: 0 0 auto; } /* v3.12.8: Domains tab had NO responsive rules — the desktop 4-col * grid crushed the body. Reflow: favicon + body on top, renews + * action in a footer row. */ .aadash-domain-row { grid-template-columns: 48px 1fr auto; grid-template-areas: "favicon body status" "renews renews action"; column-gap: 14px; row-gap: 14px; align-items: center; padding: 18px 0; } .aadash-domain-row__favicon { grid-area: favicon; align-self: start; } .aadash-domain-row__body { grid-area: body; } .aadash-domain-row__status { grid-area: status; justify-self: end; align-self: start; } .aadash-domain-row__renews { grid-area: renews; text-align: left; } .aadash-domain-row > .aadash-btn-out { grid-area: action; justify-self: end; /* touch target — lift the small button to a comfortable tap size */ min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* Viewport fallback — container queries are supported in all evergreen browsers, but older clients (Safari < 16, Firefox < 110) miss them. These minimal @media rules cover the worst-case mobile collapse so the dashboard doesn't render broken on a 5-year-old iPad. */ @media (max-width: 600px) { .aadash-welcome { flex-direction: column; } .aadash-grid-2, .aadash-grid-2--projects-tickets { grid-template-columns: 1fr; } .aadash-arsenal__grid { grid-template-columns: 1fr; } /* v3.12.8: mirror the container-query mobile fixes for clients * without container-query support (Safari < 16, Firefox < 110). */ .aadash-tabs { gap: 18px; overflow-x: auto; min-width: 0; scrollbar-width: none; } .aadash-tabs::-webkit-scrollbar { display: none; } .aadash-tab { font-size: 16px; padding: 12px 2px; white-space: nowrap; flex: 0 0 auto; } .aadash-domain-row { grid-template-columns: 48px 1fr auto; grid-template-areas: "favicon body status" "renews renews action"; column-gap: 14px; row-gap: 14px; align-items: center; } .aadash-domain-row__favicon { grid-area: favicon; align-self: start; } .aadash-domain-row__body { grid-area: body; } .aadash-domain-row__status { grid-area: status; justify-self: end; align-self: start; } .aadash-domain-row__renews { grid-area: renews; text-align: left; } .aadash-domain-row > .aadash-btn-out { grid-area: action; justify-self: end; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* ============================================================ SITE DETAIL VIEW Per-site focused page reached via #/site/{id}. Layout: header → hero → 4-up stats → 30-day chart → status facts. ============================================================ */ .aadash-sd { display: flex; flex-direction: column; gap: 28px; } .aadash-sd-head { display: flex; flex-direction: column; gap: 14px; } .aadash-sd-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--accent-action) !important; font-weight: 500; text-decoration: none; align-self: flex-start; transition: color 0.15s; } .aadash-sd-back:hover { color: var(--accent-action-muted) !important; } .aadash-sd-head__identity { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .aadash-sd-head__url { font-size: clamp(24px, 2.2vw, 32px); font-weight: 500; color: var(--text-primary); word-break: break-all; } /* Hero — bigger screenshot, actions row underneath */ .aadash-sd-hero { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; } .aadash-sd-hero__thumb { aspect-ratio: 16 / 9; background: linear-gradient(135deg, #161616, #0c0c0c); /* v4.0.1 (Adam QA C-3): #1a1a1a graveyarded */ overflow: hidden; position: relative; } .aadash-sd-hero__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .aadash-sd-hero__thumb-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.2); } .aadash-sd-hero__actions { padding: 20px 24px; display: flex; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--aadash-bd); } /* Stats row — 4 equal-width cards */ .aadash-sd-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .aadash-sd-stat { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; } .aadash-sd-stat__lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-dim); } .aadash-sd-stat__val { font-size: 28px; font-weight: 700; /* v4.0.1 (Adam QA M-8): stat numbers are 700 */ color: var(--text-primary); line-height: 1.1; letter-spacing: -0.5px; } .aadash-sd-stat__delta { font-size: 12px; display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); } .aadash-sd-stat__delta.aadash-delta--up { color: var(--good); } .aadash-sd-stat__delta.aadash-delta--dn { color: var(--danger); } /* Chart card — wraps the 30-day trend SVG */ .aadash-sd-chart { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; } .aadash-sd-chart__empty { padding: 60px 0; text-align: center; color: var(--text-muted); font-size: 14px; } /* Site status facts — small fact pills */ .aadash-sd-status { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; } .aadash-sd-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .aadash-sd-fact { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-elevated); border-radius: var(--r-md); border: 1px solid var(--aadash-bd); font-size: 14px; color: var(--text-secondary); } .aadash-sd-fact__lbl { color: var(--text-dim); flex-shrink: 0; } .aadash-sd-fact__val { color: var(--text-primary); font-weight: 500; margin-left: auto; } .aadash-sd-fact--good { color: var(--good); } .aadash-sd-fact--good .aadash-sd-fact__val { color: var(--good); } .aadash-sd-fact--warn { color: var(--warn); } .aadash-sd-fact--warn .aadash-sd-fact__val { color: var(--warn); } .aadash-sd-fact--bad { color: var(--danger); } .aadash-sd-fact--bad .aadash-sd-fact__val { color: var(--danger); } .aadash-sd-facts-empty { padding: 24px 0; text-align: center; color: var(--text-muted); font-size: 14px; } @container aadash (max-width: 820px) { .aadash-sd-stats { grid-template-columns: repeat(2, 1fr); } } @container aadash (max-width: 500px) { .aadash-sd-stats { grid-template-columns: 1fr; } } /* ============================================================ INTERACTIVE LINE CHART util.lineChart output — used in site detail view. Matches A² Analytics TrendChart spec. ============================================================ */ .aadash-chart { position: relative; width: 100%; line-height: 0; /* Defensive: contains any over-painting from hit-circles near the SVG edges so they can't visually escape the card. */ overflow: hidden; } .aadash-chart__svg { width: 100%; height: auto; display: block; /* No max-height cap. The SVG's viewBox is 1000×280 (≈3.57:1). With width: 100% the height scales naturally to preserve that aspect — no letterboxing, no dead space on the sides. */ } .aadash-chart-hit { cursor: pointer; transition: fill 0.1s; } .aadash-chart-hit:hover, .aadash-chart-hit:focus { fill: rgba(0, 205, 251, 0.08); outline: none; } .aadash-chart-dot { pointer-events: none; opacity: 0; transition: opacity 0.1s; } /* Only the hovered point's dot lights up — the adjacency works now because the SVG emits [hit, dot, hit, dot, ...] pairs (v3.7.2 fix). The previous blanket-hover fallback was lighting up all dots at once. */ .aadash-chart-hit:hover + .aadash-chart-dot, .aadash-chart-hit:focus + .aadash-chart-dot { opacity: 1; } .aadash-chart__tooltip { position: absolute; z-index: 10; pointer-events: none; background: var(--bg-elevated); border: 1px solid var(--bd-strong); border-radius: var(--r-md); padding: 10px 14px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); font-size: 12px; line-height: 1.4; min-width: 140px; color: var(--text-secondary); } .aadash-chart__tip-date { font-size: 12px; color: var(--text-muted); margin-bottom: 6px; } .aadash-chart__tip-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .aadash-chart__tip-row + .aadash-chart__tip-row { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--bd); } .aadash-chart__tip-lbl { color: var(--text-muted); font-size: 12px; } .aadash-chart__tip-val { color: #fff; /* v4.0.1: data is neutral — value reads strong white */ font-variant-numeric: tabular-nums; font-weight: 500; } .aadash-chart__tip-val--prev { color: var(--accent-atmospheric-light); } .aadash-chart-empty { padding: 60px 0; text-align: center; color: var(--text-muted); font-size: 14px; border: 1px solid var(--bd); /* v4.0.12 (Enrique): solid only */ border-radius: var(--r-md); } /* ============================================================ SERVICES TAB — comprehensive product inventory Categories: Websites, Email, Domains, Add-ons + Other. Each section has a head, list of rows, or empty-state upsell. ============================================================ */ .aadash-svc { display: flex; flex-direction: column; gap: 28px; } .aadash-svc__intro { display: flex; flex-direction: column; gap: 4px; } .aadash-svc__title { font-size: 22px; font-weight: 500; color: var(--text-primary); } .aadash-svc__sub { font-size: 14px; color: var(--text-muted); } /* 3-column row for Websites / Email / Domains — the headline * categories deserve equal real estate at desktop instead of * stacking and burning vertical whitespace. Container queries * (the dashboard declares container-type: inline-size on * .aadash-root) drive the breakpoints off rendered width — not * viewport — so the layout reacts correctly even inside narrow * WC sidebars or wider 4K shells. * * Breakpoints: * ≥1100px container — 3 columns (the desktop intent) * ≥720px container — 2 columns (tablet) * <720px container — single column (mobile, default) * * Grid rows stretch via the default `align-items: stretch`, so * cards in the same row land at equal heights even when one has * data and another has an empty-state upsell. Each card's * internal flex column (head + list/empty) flexes to fill that * stretched height. */ .aadash-svc-sections { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; } @container aadash (min-width: 720px) { .aadash-svc-sections { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container aadash (min-width: 1100px) { .aadash-svc-sections { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } } .aadash-svc-sections .aadash-svc-section { /* Inside the grid: card content flows top-down so the section * head sits cleanly at top and the list/empty state expands * to fill the equal-row-height the grid imposes. Without * flex, empty states float in the vertical center which * looks unbalanced next to data-filled siblings. */ display: flex; flex-direction: column; } .aadash-svc-sections .aadash-svc-list, .aadash-svc-sections .aadash-svc-empty { flex: 1; } .aadash-svc-section { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); overflow: hidden; } .aadash-svc-section__head { display: flex; align-items: center; justify-content: space-between; /* v3.12.2 (Enrique): elevated head layer. The service section * already has a border + radius, so a +1 brightness header * gives the panel proper card hierarchy. */ background: var(--bg-elevated); padding: 16px 22px; border-bottom: 1px solid var(--aadash-bd); } .aadash-svc-section__title { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-dim); } .aadash-svc-section__count { font-size: 12px; color: var(--text-muted); background: var(--bg-elevated); padding: 2px 10px; border-radius: 999px; } /* "Other" debugging section gets dimmer treatment. */ .aadash-svc-section--other .aadash-svc-section__title { color: var(--text-dim); opacity: 0.7; } .aadash-svc-list { display: flex; flex-direction: column; } .aadash-svc-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--aadash-bd); transition: background 0.15s; } .aadash-svc-row:last-child { border-bottom: 0; } .aadash-svc-row[data-site-id] { cursor: pointer; } .aadash-svc-row[data-site-id]:hover { background: rgba(255, 255, 255, 0.02); } .aadash-svc-row__main { min-width: 0; flex: 1; } .aadash-svc-row__name { font-size: 14px; font-weight: 500; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-svc-row__meta { font-size: 14px; color: var(--text-muted); margin-top: 2px; } .aadash-svc-row__actions { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; } /* Empty state inside a section — upsell card */ .aadash-svc-empty { padding: 28px 22px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; } .aadash-svc-empty__title { font-size: 16px; font-weight: 500; color: var(--text-primary); } .aadash-svc-empty__desc { font-size: 14px; color: var(--text-muted); max-width: 480px; } /* ============================================================ SITE DETAIL v2 (v3.8.0) — modular rows, control-panel feel. Replaces the giant-thumb hero layout with a tight, sectioned layout. Drops the inline chart (lives in A² Analytics now). ============================================================ */ .aadash-sd { display: flex; flex-direction: column; gap: 24px; } .aadash-sd-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-muted); text-decoration: none; align-self: flex-start; padding: 4px 0; } .aadash-sd-back:hover { color: var(--text-primary); } /* ROW 1 — Header strip */ .aadash-sd-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 20px 24px; background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); } .aadash-sd-header__main { min-width: 0; flex: 1; } .aadash-sd-header__host { /* !important on every visual prop — Enfold's h1 rule inside * .woocommerce-MyAccount-content sets ~36px which overrides * our 22px without !important. The base heading reset upstream * doesn't constrain font-size (so this class can win), but * Enfold's same-specificity rule beats us without !important. */ font-size: 22px !important; font-weight: 500 !important; color: var(--text-primary) !important; margin: 0 0 8px 0 !important; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-sd-header__meta { display: flex; flex-wrap: wrap; align-items: center; margin-top: 10px; /* v4.0.12 (Enrique): breathing room under the site name */ gap: 8px; } .aadash-sd-header__actions { flex-shrink: 0; } /* Pills: plan badges and state */ .aadash-sd-pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; font-size: 12px; font-weight: 500; border-radius: 999px; letter-spacing: 0.02em; } .aadash-sd-pill--plan { background: rgba(87, 69, 255, 0.14); color: var(--aa-purple-bright); /* v4.0.1: token, not #b4abff */ border: 1px solid rgba(87, 69, 255, 0.28); } .aadash-sd-pill--state { background: var(--bg-elevated); color: var(--text-muted); } .aadash-sd-pill--active { color: var(--good); background: rgba(0, 216, 122, 0.10); } .aadash-sd-pill--on-hold { color: var(--warn); background: rgba(245, 158, 11, 0.10); } .aadash-sd-pill--cancelled, .aadash-sd-pill--expired { color: var(--danger); background: rgba(255, 92, 92, 0.10); } /* Sections (rows 2-4) */ .aadash-sd-section { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); padding: 20px 24px; } .aadash-sd-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .aadash-sd-section__title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--text-dim); } .aadash-sd-section__sub { font-size: 14px; color: var(--text-muted); } .aadash-sd-section__cta { font-size: 14px; color: var(--accent-action) !important; /* Enfold .aadash-root a was overriding */ text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .aadash-sd-section__cta:hover { text-decoration: underline; } .aadash-sd-section__empty { font-size: 14px; color: var(--text-muted); line-height: 1.6; padding: 4px 0; } .aadash-sd-section--muted .aadash-sd-section__title { color: var(--text-dim); opacity: 0.7; } /* ROW 2 — Quick Actions */ .aadash-sd-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px; } .aadash-sd-quick__btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--bg-elevated); border: 1px solid var(--aadash-bd); border-radius: 5px; color: var(--accent-action) !important; /* clickable cue; Enfold a-color hid the white */ font-size: 14px; font-weight: 500; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .aadash-sd-quick__btn:hover { background: var(--bg-input); border-color: var(--accent-action-muted); /* v4.0.1: hover brightens */ color: var(--accent-action-muted); } .aadash-sd-quick__btn svg { flex-shrink: 0; opacity: 0.8; } /* ROW 3 — Metrics tiles */ /* v3.16.0: 7-day visits sparkline that leads the "Last 7 days" section. */ .aadash-sd-spark { margin: 4px 0 16px; width: 100%; } .aadash-sd-spark svg { width: 100%; height: auto; display: block; } .aadash-sd-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; } .aadash-sd-metric { padding: 14px 16px; background: var(--bg-elevated); border-radius: 5px; } .aadash-sd-metric__lbl { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); font-weight: 600; } .aadash-sd-metric__val { font-size: 22px; font-weight: 500; color: var(--text-primary); margin-top: 6px; } .aadash-sd-metric__delta { font-size: 12px; margin-top: 4px; display: inline-flex; align-items: center; gap: 3px; } /* ROW 4 — Site status facts (unchanged from old) */ .aadash-sd-facts { display: flex; flex-wrap: wrap; gap: 8px; } .aadash-sd-fact { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: var(--bg-elevated); border-radius: 5px; font-size: 14px; } .aadash-sd-fact__lbl { color: var(--text-muted); } .aadash-sd-fact__val { color: var(--text-primary); font-weight: 500; } .aadash-sd-fact--good { border-left: 2px solid var(--good); } .aadash-sd-fact--warn { border-left: 2px solid var(--warn); } .aadash-sd-fact--bad { border-left: 2px solid var(--danger); } /* Header stacks on narrow */ @container aadash (max-width: 700px) { .aadash-sd-header { flex-direction: column; align-items: stretch; } } /* ============================================================ EXTRAS AREA — server-rendered shortcodes (e.g. wp24_domaincheck) Lives outside the SPA mount so embedded shortcode JS/CSS stays intact. SPA toggles visibility per-tab via the --hidden class. ============================================================ */ .aadash-extras { margin-top: 16px; margin-bottom: 24px; padding: 0; } .aadash-extras--hidden { display: none; } .aadash-extras-inner { display: flex; flex-direction: column; gap: 16px; } .aadash-extras__panel { background: var(--aadash-bg-card); border: 1px solid var(--aadash-bd); border-radius: var(--r-lg); padding: var(--pad-card); } /* 2-column split — title block left, action block right. Left column gets a max-width so the title doesn't sprawl on ultra-wide. Stacks at the standard 700px breakpoint. v3.12.3 (Enrique): background promoted to elevated #161616. Matches the daylight-contrast pattern applied to the site anchor / activity head / svc-section head in v3.12.2 — important surfaces step up one layer so they're visible in bright-light viewing conditions. */ .aadash-extras__panel--split { background: var(--bg-elevated); display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 32px; align-items: start; } .aadash-extras__col-left { display: flex; flex-direction: column; gap: 4px; } .aadash-extras__col-right { display: flex; flex-direction: column; gap: 16px; } @container aadash (max-width: 700px) { .aadash-extras__panel--split { grid-template-columns: 1fr; gap: 16px; } } .aadash-extras__panel-head { margin-bottom: 16px; } .aadash-extras__panel-title { font-size: clamp(18px, 3vw, 22px); font-weight: 500; color: var(--text-primary); } .aadash-extras__panel-sub { font-size: 14px; color: var(--text-muted); margin-top: 4px; } .aadash-extras__panel-body { /* Embedded shortcodes render their own styling. Keep our container neutral so the shortcode's design is preserved. If a shortcode's light theme clashes with the dark dashboard, we'll wrap it in a theme-isolating container per-shortcode later. */ } /* v3.17.0 (Enrique): the wp24 domain-checker ships a 900px max-width on * .dc-form, which stranded the search box left-aligned in the wide right * column on 4K. Let it fill the column. Scoped under our extras so the * override doesn't leak to the shortcode used elsewhere. */ .aadash-extras .wp24-dc .dc-form, .aadash-extras__panel-body .dc-form { max-width: 100% !important; width: 100% !important; } /* ============================================================ EXTRAS — Benefit callouts Pill row below shortcodes (e.g. domain search). Mirrors the home page's "Free SSL / Privacy Protection / Managed Services" pattern. Subtle, supportive — not competing with the main CTA. ============================================================ */ .aadash-extras__benefits { display: flex; flex-wrap: wrap; gap: 12px; } .aadash-extras__benefit { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--bg-elevated); border: 1px solid var(--aadash-bd); border-radius: 999px; font-size: 12px; color: var(--text-muted); } .aadash-extras__benefit svg { color: #8073FF; /* v4.0.9 (Enrique): benefits pop purple — supersedes H-8 neutral here */ flex-shrink: 0; } /* ============================================================ SUBSCRIPTIONS — list + detail pages (v3.9.0) Overrides for WooCommerce Subscriptions' my-subscriptions.php and subscription-details.php templates. The data stays WC, the presentation comes from our design system. Wrapped under .aadash-root in the template so all tokens cascade. New layout classes added below for the subscription- specific patterns (card grid, hero strip, detail panels, modal). ============================================================ */ /* ─── List page wrapper + header ─── */ .aadash-subs-page { /* v3.22.0 (Enrique): full-width to match the core dashboard — no 1100px cap. */ } .aadash-subs-header { margin-bottom: 28px; } .aadash-subs-title { /* Enfold h1 override defense — see .aadash-sd-header__host. */ color: var(--text-primary) !important; font-size: 28px !important; font-weight: 500 !important; line-height: 1.2 !important; margin: 0 0 6px 0 !important; } .aadash-subs-subtitle { color: var(--text-muted); font-size: 14px; margin: 0; } /* ─── Card grid ─── */ .aadash-subs-grid { display: grid; grid-template-columns: 1fr; gap: 14px; } @container aadash (min-width: 820px) { .aadash-subs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @container aadash (min-width: 1300px) { .aadash-subs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ─── Subscription card ─── */ .aadash-sub-card { display: flex; flex-direction: column; gap: 16px; background: var(--bg-recessed); border: 1px solid var(--bd); border-radius: var(--r-lg); padding: 18px 20px 16px 20px; color: var(--text-secondary) !important; text-decoration: none !important; transition: border-color .3s ease, transform .3s ease, background .3s ease; /* v4.0.1 (Adam QA H-11) */ position: relative; overflow: hidden; } .aadash-sub-card::before { /* Subtle gradient edge on hover, accent atmospheric. */ content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tab-grad); opacity: 0; transition: opacity 0.18s ease; } .aadash-sub-card:hover { border-color: var(--bd-strong); background: var(--bg-elevated); /* v4.0.1 (Adam QA H-6): on-tier */ transform: translateY(-1px); box-shadow: 0 0 20px rgba(0,205,251,0.07); /* v4.0.3 (R2): book card-hover glow */ } .aadash-sub-card:hover::before { opacity: 1; } .aadash-sub-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .aadash-sub-card__title-block { min-width: 0; /* allow truncation */ flex: 1 1 auto; } .aadash-sub-card__title { color: var(--text-primary); font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 4px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; } .aadash-sub-card__id { color: var(--text-dim); font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; } .aadash-sub-card__meta { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin: 0; padding-top: 14px; border-top: 1px solid var(--bd); } .aadash-sub-card__meta-cell { /* v3.22.0: force label/value to stack — Enfold's WC
styling was * rendering dt + dd inline, which misaligned the date next to its label. */ display: flex; flex-direction: column; } .aadash-sub-card__meta-cell dt { color: var(--text-dim); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; } .aadash-sub-card__meta-cell dd { color: var(--text-secondary); font-size: 14px; margin: 0; } .aadash-sub-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1px solid var(--bd); } .aadash-sub-card__total { color: var(--text-primary); font-size: 18px; font-weight: 500; } .aadash-sub-card__total .woocommerce-Price-amount { color: var(--text-primary); } .aadash-sub-card__total .woocommerce-Price-currencySymbol { color: var(--text-primary); opacity: 0.85; } .aadash-sub-card__cta { color: var(--accent-action); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: gap 0.18s ease; } .aadash-sub-card:hover .aadash-sub-card__cta { gap: 10px; } /* ─── Empty state ─── */ .aadash-sub-empty { background: var(--bg-recessed); border: 1px solid var(--bd); border-radius: var(--r-lg); padding: 56px 32px; text-align: center; } .aadash-sub-empty__icon { color: var(--text-muted); margin: 0 auto 16px auto; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: var(--bg-elevated); border-radius: 50%; border: 1px solid var(--bd); } .aadash-sub-empty__title { color: var(--text-primary); font-size: 18px; font-weight: 500; margin-bottom: 8px; } .aadash-sub-empty__sub { color: var(--text-muted); font-size: 14px; max-width: 460px; margin: 0 auto; line-height: 1.5; } .aadash-sub-empty__cta { margin-top: 22px; } /* ─── Status pills (subscription variants) ─── */ .aadash-pill-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.04); flex-shrink: 0; } .aadash-pill--sub-active { background: rgba(0, 216, 122, 0.12); color: var(--good); border: 1px solid rgba(0, 216, 122, 0.25); } .aadash-pill--sub-pending-cancel { background: rgba(245, 158, 11, 0.12); color: var(--warn); border: 1px solid rgba(245, 158, 11, 0.25); } .aadash-pill--sub-on-hold { background: rgba(245, 158, 11, 0.12); color: var(--warn); border: 1px solid rgba(245, 158, 11, 0.25); } .aadash-pill--sub-cancelled { background: rgba(255, 92, 92, 0.10); color: var(--danger); border: 1px solid rgba(255, 92, 92, 0.22); } .aadash-pill--sub-expired { background: rgba(139, 146, 179, 0.10); color: var(--text-muted); border: 1px solid var(--bd); } .aadash-pill--sub-pending { background: rgba(139, 146, 179, 0.10); /* v4.0.1: pending = neutral state */ color: #8b92b3; border: 1px solid rgba(139, 146, 179, 0.25); } .aadash-pill--sub-default { background: rgba(139, 146, 179, 0.10); color: var(--text-muted); border: 1px solid var(--bd); } /* ============================================================ DETAIL PAGE ============================================================ */ .aadash-sub-detail { /* v3.22.0 (Enrique): full-width to match the core dashboard — no 1100px cap. */ padding-bottom: 80px; } /* ─── Back link ─── */ .aadash-sub-detail__back { display: inline-flex; align-items: center; gap: 6px; /* v3.22.1 (Enrique): cyan like every other text link (#00cdfb), not the * muted blue-grey that read as purple. */ color: var(--accent-action) !important; font-size: 14px; font-weight: 500; margin-bottom: 18px; text-decoration: none !important; transition: color 0.15s ease, gap 0.15s ease; } .aadash-sub-detail__back:hover { color: var(--accent-action) !important; gap: 9px; } /* ─── Hero ─── */ .aadash-sub-detail__hero { position: relative; background: var(--bg-recessed); border: 1px solid var(--bd); border-radius: var(--r-lg); padding: 28px 28px 24px 28px; margin-bottom: 18px; overflow: hidden; isolation: isolate; } /* v3.22.0 (Enrique): purple radial hero gradient removed. */ .aadash-sub-detail__hero-head { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; } .aadash-sub-detail__hero-titles { min-width: 0; } .aadash-sub-detail__hero-id { color: var(--text-dim); font-size: 12px; font-weight: 500; letter-spacing: 0.6px; text-transform: uppercase; margin-bottom: 6px; } .aadash-sub-detail__hero-title { /* Enfold h1 override defense — see .aadash-sd-header__host. */ color: var(--text-primary) !important; font-size: 22px !important; font-weight: 500 !important; line-height: 1.25 !important; margin: 0 !important; } .aadash-sub-detail__hero-meta { position: relative; z-index: 1; display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; padding-top: 18px; border-top: 1px solid var(--bd); } .aadash-sub-detail__hero-amount { color: var(--text-primary); font-size: 28px; font-weight: 500; line-height: 1; } .aadash-sub-detail__hero-amount .woocommerce-Price-amount { color: var(--text-primary); } .aadash-sub-detail__hero-amount .woocommerce-Price-currencySymbol { color: var(--text-primary); opacity: 0.85; } .aadash-sub-detail__hero-next { color: var(--text-muted); font-size: 14px; font-weight: 400; } /* ─── 2-col grid: dates + billing ─── */ .aadash-sub-detail__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-bottom: 18px; } @container aadash (min-width: 760px) { .aadash-sub-detail__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } } /* ─── Panel system ─── */ .aadash-sub-detail__panel { background: var(--bg-recessed); border: 1px solid var(--bd); border-radius: var(--r-lg); margin-bottom: 18px; overflow: hidden; } .aadash-sub-detail__grid .aadash-sub-detail__panel { margin-bottom: 0; /* the grid handles gaps */ } .aadash-sub-detail__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--bd); background: var(--bg-elevated); } .aadash-sub-detail__panel-title { /* v3.22.0 (Enrique): match the dashboard section-eyebrow token — * #888888 / 500 / 2px tracking / uppercase (was white / 700). */ color: #888888; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .aadash-sub-detail__panel-head-action { font-size: 14px; } .aadash-sub-detail__panel-body { padding: 18px 20px 20px 20px; } .aadash-sub-detail__panel-body--flush { padding: 0; } /* Key/value list used in details + address panels. */ .aadash-sub-detail__kv-list { margin: 0; display: flex; flex-direction: column; gap: 0; } .aadash-sub-detail__kv { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--bd); } .aadash-sub-detail__kv:last-child { border-bottom: 0; padding-bottom: 0; } .aadash-sub-detail__kv:first-child { padding-top: 0; } .aadash-sub-detail__kv dt { color: var(--text-muted); font-size: 12px; font-weight: 400; margin: 0; } .aadash-sub-detail__kv dd { color: var(--text-primary); font-size: 14px; font-weight: 500; margin: 0; text-align: right; } /* ─── Billing panel internals ─── */ .aadash-sub-detail__pay-method { display: flex; align-items: center; gap: 14px; padding: 14px; background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: var(--r-md); margin-bottom: 14px; } .aadash-sub-detail__pay-method-icon { width: 40px; height: 40px; border-radius: var(--r-md); background: rgba(255, 255, 255, 0.04); /* v4.0.1 (Adam QA H-8): neutral tile */ color: #8b92b3; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .aadash-sub-detail__pay-method-meta { min-width: 0; } .aadash-sub-detail__pay-method-label { color: var(--text-dim); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 2px; } .aadash-sub-detail__pay-method-value { color: var(--text-primary); font-size: 14px; font-weight: 500; } .aadash-sub-detail__update-pay, .aadash-sub-detail__renew { display: flex; justify-content: center; width: 100%; margin-bottom: 8px; } .aadash-sub-detail__update-pay:last-child, .aadash-sub-detail__renew:last-child { margin-bottom: 0; } /* ─── Subscription totals table ─── */ .aadash-sub-totals { /* Sits inside a panel body with --flush, so we own the padding. */ } .aadash-sub-totals__items { width: 100%; border-collapse: collapse; background: transparent; margin: 0; } .aadash-sub-totals__items thead th { background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--bd); } .aadash-sub-totals__th-total, .aadash-sub-totals__items td.aadash-sub-totals__td-total { text-align: right; } .aadash-sub-totals__items tbody td { padding: 16px 20px; border-bottom: 1px solid var(--bd); color: var(--text-secondary); font-size: 14px; vertical-align: top; /* v3.22.0 (Enrique): explicit #111111, !important to beat Enfold's WC * table row striping. */ background: #111111 !important; } .aadash-sub-totals__items tbody tr:last-child td { border-bottom: 1px solid var(--bd); } .aadash-sub-totals__product-link { color: var(--accent-action) !important; font-weight: 500; text-decoration: none !important; transition: color 0.15s ease; } .aadash-sub-totals__product-link:hover { color: var(--accent-action-muted) !important; } .aadash-sub-totals__qty { color: var(--text-muted); font-weight: 400; margin-left: 4px; } .aadash-sub-totals__items .wc-item-meta { list-style: none; padding: 0; margin: 8px 0 0 0; } .aadash-sub-totals__items .wc-item-meta li { color: var(--text-muted); font-size: 12px; margin: 0; padding: 2px 0; display: flex; gap: 6px; } .aadash-sub-totals__items .wc-item-meta strong { color: var(--text-dim); font-weight: 500; text-transform: uppercase; letter-spacing: 0.4px; font-size: 12px; } .aadash-sub-totals__items .wc-item-meta p { margin: 0; color: var(--text-secondary); font-size: 12px; } .aadash-sub-totals__td-total { color: var(--text-primary) !important; font-weight: 500; white-space: nowrap; } /* Totals summary (subtotal / discount / tax / total). */ .aadash-sub-totals__summary { margin: 0; padding: 14px 20px 18px 20px; background: var(--bg-elevated); display: flex; flex-direction: column; gap: 0; } .aadash-sub-totals__summary-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid var(--bd); font-size: 14px; } .aadash-sub-totals__summary-row:last-child { border-bottom: 0; } .aadash-sub-totals__summary-row dt { color: var(--text-muted); margin: 0; } .aadash-sub-totals__summary-row dd { color: var(--text-secondary); margin: 0; font-variant-numeric: tabular-nums; } .aadash-sub-totals__summary-row--grand { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--bd-strong); } .aadash-sub-totals__summary-row--grand dt { color: var(--text-primary); font-size: 16px; font-weight: 500; } .aadash-sub-totals__summary-row--grand dd { color: var(--text-primary); font-size: 18px; font-weight: 500; } /* ─── Related orders table ─── */ .aadash-sub-orders { width: 100%; border-collapse: collapse; background: transparent; margin: 0; } .aadash-sub-orders thead th { background: transparent; color: var(--text-dim); font-size: 12px; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; text-align: left; padding: 14px 20px; border-bottom: 1px solid var(--bd); } .aadash-sub-orders__th-total, .aadash-sub-orders__td-total { text-align: right; } .aadash-sub-orders__th-actions, .aadash-sub-orders__td-actions { text-align: right; width: 1%; white-space: nowrap; } .aadash-sub-orders tbody td { padding: 14px 20px; border-bottom: 1px solid var(--bd); color: var(--text-secondary); font-size: 14px; background: transparent; vertical-align: middle; } .aadash-sub-orders tbody tr:last-child td { border-bottom: 0; } .aadash-sub-orders__order-link { color: var(--accent-action) !important; font-weight: 500; text-decoration: none !important; } .aadash-sub-orders__order-link:hover { color: var(--accent-action-muted) !important; } .aadash-sub-orders__status { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 500; color: var(--text-muted); } .aadash-sub-orders__status--completed { color: var(--good); } .aadash-sub-orders__status--processing, .aadash-sub-orders__status--on-hold, .aadash-sub-orders__status--pending { color: var(--warn); } .aadash-sub-orders__status--failed, .aadash-sub-orders__status--cancelled, .aadash-sub-orders__status--refunded { color: var(--danger); } .aadash-sub-orders__td-total { color: var(--text-primary); font-variant-numeric: tabular-nums; } .aadash-sub-orders__td-actions a { margin-left: 6px; } .aadash-sub-orders__td-actions a:first-child { margin-left: 0; } .aadash-sub-orders__empty { padding: 32px 20px; text-align: center; color: var(--text-muted); font-size: 14px; } /* ─── Billing address ─── */ .aadash-sub-detail__address { color: var(--text-secondary); font-size: 14px; line-height: 1.6; font-style: normal; margin: 0 0 10px 0; } .aadash-sub-detail__address-line { color: var(--text-secondary); font-size: 14px; line-height: 1.6; } /* ─── Manage subscription (action list) ─── */ .aadash-sub-detail__actions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .aadash-sub-detail__action { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; /* v3.22.0 (Enrique): no background — transparent on the panel. */ border: 1px solid var(--bd); border-radius: var(--r-md); } .aadash-sub-detail__action--destructive { border-color: rgba(255, 92, 92, 0.18); } .aadash-sub-detail__action-info { min-width: 0; flex: 1 1 auto; } .aadash-sub-detail__action-title { color: var(--text-primary); font-size: 14px; font-weight: 500; margin-bottom: 2px; } .aadash-sub-detail__action-desc { color: var(--text-muted); font-size: 14px; line-height: 1.5; } .aadash-sub-detail__action-btn { flex-shrink: 0; } .aadash-sub-detail__action-btn--destructive { background: transparent !important; color: var(--danger) !important; border-color: rgba(255, 92, 92, 0.35) !important; } .aadash-sub-detail__action-btn--destructive:hover { background: rgba(255, 92, 92, 0.08) !important; color: var(--danger) !important; border-color: rgba(255, 92, 92, 0.55) !important; } /* ============================================================ CANCEL CONFIRMATION MODAL ============================================================ */ .aadash-modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; opacity: 0; pointer-events: none; transition: opacity 0.18s ease; } .aadash-modal-backdrop[data-visible="true"] { opacity: 1; pointer-events: auto; } .aadash-modal-backdrop[hidden] { display: none !important; } .aadash-modal { background: var(--bg-recessed); border: 1px solid var(--bd-strong); border-radius: var(--r-lg); width: 100%; max-width: 480px; max-height: calc(100vh - 40px); overflow: auto; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); transform: translateY(8px) scale(0.98); transition: transform 0.18s ease; } .aadash-modal-backdrop[data-visible="true"] .aadash-modal { transform: translateY(0) scale(1); } .aadash-modal__head { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--bd); } .aadash-modal__head-icon { width: 36px; height: 36px; border-radius: 50%; background: rgba(245, 158, 11, 0.12); color: var(--warn); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .aadash-modal__title { /* Enfold h2 override defense — modal titles appear inside the * dashboard root, which means the .woocommerce-MyAccount-content * h2 rule fires unless we block it. */ color: var(--text-primary) !important; font-size: 16px !important; font-weight: 500 !important; margin: 0 !important; flex: 1; line-height: 1.3 !important; } .aadash-modal__close { background: transparent; border: 0; color: var(--text-muted); padding: 4px; line-height: 0; border-radius: var(--r-sm); transition: color 0.15s ease, background 0.15s ease; } .aadash-modal__close:hover { color: var(--text-primary); background: var(--bg-elevated); } .aadash-modal__body { padding: 18px 20px; } .aadash-modal__lead { color: var(--text-primary); font-size: 16px; font-weight: 500; margin: 0 0 10px 0; line-height: 1.4; } .aadash-modal__sub { color: var(--text-secondary); font-size: 14px; margin: 0 0 12px 0; line-height: 1.55; } .aadash-modal__note { color: var(--text-muted); font-size: 14px; margin: 0; padding-top: 10px; border-top: 1px solid var(--bd); line-height: 1.5; } .aadash-modal__foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--bd); background: var(--bg-elevated); } .aadash-modal__btn-confirm { background: transparent !important; color: var(--danger) !important; border-color: rgba(255, 92, 92, 0.45) !important; text-decoration: none !important; } .aadash-modal__btn-confirm:hover { background: rgba(255, 92, 92, 0.10) !important; color: var(--danger) !important; border-color: rgba(255, 92, 92, 0.65) !important; } /* Body scroll lock when modal is open. Applied by JS. */ body.aadash-modal-open { overflow: hidden; } /* ============================================================ MOBILE / NARROW CONTAINER ADJUSTMENTS ============================================================ */ @container aadash (max-width: 600px) { .aadash-sub-detail__hero { padding: 22px 18px 18px 18px; } .aadash-sub-detail__hero-head { flex-direction: column; align-items: flex-start; gap: 12px; } .aadash-sub-detail__hero-title { font-size: 18px; } .aadash-sub-detail__hero-amount { font-size: 22px; } .aadash-sub-detail__panel-head, .aadash-sub-detail__panel-body { padding-left: 16px; padding-right: 16px; } .aadash-sub-totals__items thead th, .aadash-sub-totals__items tbody td, .aadash-sub-totals__summary, .aadash-sub-orders thead th, .aadash-sub-orders tbody td { padding-left: 16px; padding-right: 16px; } .aadash-sub-detail__action { flex-direction: column; align-items: stretch; gap: 12px; } .aadash-sub-detail__action-btn { align-self: stretch; justify-content: center; } /* Related orders — collapse the actions column on mobile to keep the table from horizontal-scrolling. Actions stack below the row metadata via a small visual hack: we hide the actions cell in the table flow and rely on the View link inherent in the row's primary link. Customers can still tap the order number. */ .aadash-sub-orders__th-status, .aadash-sub-orders__td-status { display: none; } } /* Subscription totals — single-column item meta on mobile. */ @container aadash (max-width: 480px) { .aadash-sub-card__meta { grid-template-columns: 1fr; } } /* ============================================================ FRAME + CONTEXTUAL RAIL (v3.10.0 / Build 2) The frame wraps the SPA mount (#aadash-app) and the rail (#aadash-rail) so we can do a 2-column layout at wide viewports. Below the rail breakpoint, the frame collapses to block flow and the rail stacks under the SPA. Why @media (viewport) instead of @container: - The rail is a viewport-scale decision (does this screen have room for a 340px utility column alongside content?), not a container-scale decision. - At 1500px viewport on adarmory.com the inside-Enfold container is about 1180-1220px depending on theme padding; using viewport queries keeps the math predictable and matches how Stripe/Linear/Vercel make this call. When fleet-deployed to sites with non-250px sidebars this may need recalibration — the rail breakpoint should fire when the dashboard container has ≥1200px of horizontal room. ============================================================ */ /* ============================================================ WELCOME MOUNT (v3.12.4) The welcome strip relocated out of #aadash-app and into its own server-rendered mount above .aadash-frame. This mount carries the spacing that previously lived on the welcome strip itself — empty it produces nothing, populated it spaces correctly between the header chrome above and the frame below. ============================================================ */ .aadash-welcome-mount { /* Empty state: zero footprint. The SPA fills this with welcome * HTML once overview resolves; until then the layout is identical * to one without a welcome strip. No skeleton flash, no jump. */ } .aadash-welcome-mount:empty { display: none; } /* ============================================================ */ /* ============================================================ RAIL FOLD ANCHOR (v3.12.4) Placeholder div emitted by the dashboard SPA fragment between the projects/tickets grid and the arsenal section. The JS rail manager moves #aadash-rail INTO this anchor at narrow viewports (and back to .aadash-frame at wide). See rail.adjustPosition in aadash-app.js. Empty state: zero footprint. Populated state: top margin so the rail visually breathes off the projects/tickets row above. The anchor itself never has visible chrome — it's purely a DOM slot. The rail brings its own visual treatment (card backgrounds, spacing, container queries for the 3-up grid). ============================================================ */ .aadash-rail-fold-anchor { /* Empty by default — at wide viewports the rail lives in the * frame's column 2, not here. Take no space when empty. */ } .aadash-rail-fold-anchor:empty { display: none; } /* When the rail is folded into the anchor, give it breathing room * off the projects/tickets row above. Margin matches the standard * grid gap. */ .aadash-rail-fold-anchor:not(:empty) { margin-top: 14px; } /* At wide viewport, the rail lives in the frame slot — the anchor * stays empty even on the dashboard route (rail manager respects * matchMedia 1500px). Belt and suspenders: force-hide the anchor at * wide regardless, so a stale rail parked here briefly during a * resize transition doesn't create a duplicated rail block. */ @media (min-width: 1500px) { .aadash-rail-fold-anchor { display: none; } } /* ============================================================ */ .aadash-frame { display: block; /* WIDTH POLICY (v3.11.2): NO horizontal cap. * * v3.11.1 capped at 1400px on Adam's QA suggestion (4K sprawl * concern). Enrique pushed back — at his ~1842px viewport the * cap created ~220px of dead space on either side of the * content, which read as cramped rather than considered. CEO * call: remove the cap, let content fill available horizontal * room. Accepted trade-off: dashboards on true 4K monitors * (3840px) will sprawl their main column wider than typical * premium SaaS dashboards (Stripe ~1280px, Linear ~1400px). * Revisit if/when actual 4K customer feedback shows it matters. * * The rail's fixed 340px column at ≥1500px keeps the main * column from getting absurdly wide on the dashboard route * (where the rail is shown). On routes without a rail — * Services, Sites, Domains, site detail — the main column gets * the full available width. */ } .aadash-frame__main { /* v3.12.0 (Build 6 IA reorg): this is now a WRAPPER element * containing #aadash-app + #aadash-extras (domain search panel). * Previously it was the class on #aadash-app directly. Wrapping * both keeps them in the same column when the rail sits beside; * they read as a single contiguous content flow. min-width: 0 * is essential — without it, any child with intrinsic min-content * (long URLs, wide tables, code blocks) would blow out the * grid track. */ min-width: 0; } .aadash-frame__main #aadash-app { /* SPA root inside the wrapper. No special layout — the SPA * governs its own internal flow. */ } .aadash-frame__rail { margin-top: 18px; } @media (min-width: 1500px) { .aadash-frame { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; } .aadash-frame__rail { /* v3.12.5 (Enrique): 74px ONLY in the beside-frame (wide/4K) * view, to balance the rail's top edge against the main * column's first card. Folded view (<1500px) keeps normal * spacing. This is the initial flow offset; the rail still * sticks at top:24px once the customer scrolls. */ margin-top: 74px; position: sticky; top: 24px; /* Sticky positioning keeps the rail in view while the customer scrolls the main column. 24px below the viewport top so it sits comfortably under any fixed header (admin bar, etc.). */ } } /* Hidden state — applied by the SPA on non-dashboard routes. !important because grid layout above otherwise reserves the rail's column even when the rail itself is display: none on the element. */ .aadash-rail--hidden { display: none !important; } @media (min-width: 1500px) { /* When the rail is hidden at wide viewports, also collapse the frame back to single-column so the main column reclaims the full width. The SPA toggles .aadash-frame--no-rail on the frame element in lockstep with .aadash-rail--hidden on the rail element. Using a JS-toggled class instead of :has() so this works on older browsers without :has() support. */ .aadash-frame.aadash-frame--no-rail { display: block; } } /* ============================================================ RAIL CARD SYSTEM Each card is a self-contained promotional/utility surface. Stacked vertically inside .aadash-rail-stack with 14px gaps. Three card variants: .aadash-rail-card — default neutral card .aadash-rail-card--featured — atmospheric tint, prominent .aadash-rail-card--coming-soon — slightly dimmed ============================================================ */ .aadash-rail-stack, .aadash-rail-group__cards { /* v3.12.0 (Build 6): responsive rail layout via container query * on the rail's own .aadash-root (it declares container-type: * inline-size). At narrow rail widths (beside-frame mode at * ≥1500px viewport where rail is 340px, OR mobile where the * frame is single-column at <720px) the cards stack vertically. * When the rail is WIDE (stacked-below-frame at typical laptop * viewports 1100-1499px), the cards arrange in a horizontal * grid so they don't sprawl as oversized full-width strips. * * The breakpoint 720px is on the RAIL container — at 720px+ the * rail is wide enough to fit 3 cards side-by-side comfortably * (3 × ~220px + gaps). */ display: flex; flex-direction: column; gap: 14px; } @container aadash (min-width: 720px) { .aadash-rail-group__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } } @container aadash (min-width: 720px) and (max-width: 1099px) { /* Tablet-ish wide rail — go 2-up to keep cards readable * (3-up gets cramped under ~1080px rail width). */ .aadash-rail-group__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ============================================================ RAIL TOOLS GROUP (v3.12.5 — Enrique) Visible parent container that groups the three tool cards under a single "Tools" header, so they read as one related set instead of three loose cards — and so the per-card "Tool" eyebrow can go away (one group label carries the category now). Elevation: the group sits at --bg-recessed (#111) so the cards inside it (--bg-elevated #161) lift cleanly, and the group still lifts off the page void (#0c0c0c). Three-tier separation. The responsive 3-up / 2-up / stack behaviour that used to live on .aadash-rail-stack now lives on .aadash-rail-group__cards (see the @container rules above — the cards are direct children of __cards, so the grid still applies when the rail is wide / folded-below at 1100–1499px viewports). The base flex declaration for __cards rides on the .aadash-rail-stack base rule above (shared selector), which sits BEFORE the @container grid so the grid wins inside the query. ============================================================ */ .aadash-rail-group { /* v3.17.0 (Enrique): the tray is now a RAISED panel (--bg-elevated * #161616) holding inset tiles (cards drop to --bg-recessed #111111 * below) — reads as a video-game "inventory tray". */ background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: var(--r-lg); padding: 16px; } .aadash-rail-group__head { margin: 0 0 14px; padding: 0 2px; } .aadash-rail-group__title { /* Unified premium eyebrow (Enrique, v3.20.9): 12px / 500 / #888 / * uppercase / 2px tracking. !important on font-size because this is an *

and Enfold's WC My Account h-tag sizing would inflate it (same * heading-defense pattern as the other titles). */ font-size: 12px !important; font-weight: 500 !important; letter-spacing: 2px !important; text-transform: uppercase !important; /* #888888 to match .aadash-section__title and the other eyebrow labels. */ color: #888888 !important; margin: 0 !important; } /* Inside the group the cards keep their elevated background but drop * the outer border — the group's border defines the boundary and a * second hairline per card reads heavy. Hover restores a border cue. * Higher specificity than the base .aadash-rail-card border, so the * placement here (before that rule) is fine. */ .aadash-rail-group .aadash-rail-card { /* v3.17.0: inset tiles — recessed #111111 inside the raised tray, * borderless (the group border defines the boundary). Flex column so * the text-link CTA bottom-aligns across the equal-height tiles. * Scoped to grouped cards: ungrouped site-detail rail cards keep * their elevated background so they don't lose contrast on the page. */ background: var(--bg-recessed); border-color: transparent; display: flex; flex-direction: column; } .aadash-rail-group .aadash-rail-card:hover { border-color: var(--bd-strong); } .aadash-rail-card { /* v3.12.4 (Enrique): elevated background continues the daylight- * contrast pattern applied across v3.12.2-3 to the site anchor, * activity head, svc-section head, and extras panel. The rail * cards sit beside the main column at wide viewports and need * to read at the same elevation as the major data surfaces or * they fade into the page void in bright-light viewing. */ background: var(--bg-elevated); border: 1px solid var(--bd); border-radius: var(--r-lg); padding: var(--pad-card-tight); position: relative; overflow: hidden; transition: border-color 0.18s ease, transform 0.18s ease; } .aadash-rail-card:hover { border-color: var(--bd-strong); } /* Featured variant — atmospheric purple tint, subtle gradient overlay, stronger top-edge glow on hover. This is THE rail surface we want the customer's eye to land on. */ .aadash-rail-card--featured { background: linear-gradient( 135deg, rgba(87, 69, 255, 0.07) 0%, var(--bg-recessed) 55% ); border-color: rgba(87, 69, 255, 0.18); } .aadash-rail-card--featured::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--tab-grad); opacity: 0.45; transition: opacity 0.18s ease; } .aadash-rail-card--featured:hover { border-color: rgba(87, 69, 255, 0.32); } .aadash-rail-card--featured:hover::before { opacity: 0.85; } /* Coming-soon variant — slightly dimmed to read as inactive surface without losing presence. The card still has visual weight; it's the badge + body copy that communicates the unavailable state. */ .aadash-rail-card--coming-soon { opacity: 0.85; } /* QR Codes utility variant (v3.12.0) — quietly elevated to read as * "this is data about your activity, not another upsell". Subtle * cyan tint on the icon (matches the brand action color) and a * faint top-edge accent to mark it as the lead utility card. */ .aadash-rail-card--qr .aadash-rail-card__icon { background: rgba(255, 255, 255, 0.04); /* v4.0.1 (Adam QA H-8): neutral tile */ border-color: rgba(255, 255, 255, 0.08); color: #8b92b3; } /* Loading state — fade the placeholder content slightly so it * reads as "data coming in" rather than "this is the value". */ .aadash-rail-card[data-qr-state="loading"] [data-qr-hero], .aadash-rail-card[data-qr-state="loading"] [data-qr-active] { opacity: 0.4; } /* Delta chip — used inside the QR card body to show the scan-count * change vs prior period. Up = good = green; down = warn-amber * (not red — a QR drop is informational, not an alert). */ .aadash-rail-card__delta { display: inline-flex; align-items: center; font-weight: 500; font-size: 12px !important; line-height: 1; padding: 2px 8px; border-radius: 999px; margin-right: 4px; } .aadash-rail-card__delta--up { color: var(--good); background: rgba(0, 216, 122, 0.10); } .aadash-rail-card__delta--down { color: var(--warn); background: rgba(245, 158, 11, 0.10); } /* Icon tile inside the card head. Distinct atmospheric color for the featured variant to reinforce its "this is the promoted thing" role; cyan for default cards. */ .aadash-rail-card__icon { width: 36px; height: 36px; border-radius: var(--r-md); background: var(--bg-elevated); border: 1px solid var(--bd); color: var(--accent-action); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; } .aadash-rail-card--featured .aadash-rail-card__icon { background: rgba(87, 69, 255, 0.12); border-color: rgba(87, 69, 255, 0.22); color: var(--accent-atmospheric-light); } .aadash-rail-card--coming-soon .aadash-rail-card__icon { color: var(--text-muted); } /* Eyebrow above the title — used only on the featured card for now to signal "this is the featured slot". */ .aadash-rail-card__eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--accent-atmospheric-light); margin-bottom: 4px; } /* v3.16.0: subscription plan name under the Renewal eyebrow (the rail is * the single subscription surface when a renewal is scheduled). */ .aadash-rail-card__sub { font-size: 14px; font-weight: 400; color: var(--text-muted); margin-bottom: 8px; line-height: 1.3; } .aadash-rail-card__title { /* Enfold h3 override defense — rail cards use h3 elements, and * Enfold sets h3 to ~22px inside the WC content area. Without * !important, Enrique sees rail titles bloated to ~22-28px * (visible in v3.11.0 screenshots: "June 10, 2026" reading * larger than the site title was the giveaway). 16px lands the * card title clearly without dominating; the renewal-card hero * variant below escalates to 28px for the case where the date * IS the focal point. */ font-size: 16px !important; font-weight: 500 !important; color: var(--text-primary) !important; margin: 0 0 8px 0 !important; line-height: 1.3 !important; } /* Hero variant — used by the site-detail rail's renewal card where * the date is the entire reason the card exists. Customer scanning * the rail should see the date first and the eyebrow second. */ .aadash-rail-card__title--hero { font-size: 22px !important; line-height: 1.15 !important; letter-spacing: -0.01em; margin-bottom: 4px !important; } .aadash-rail-card__body { /* v3.12.2 (Enrique): !important on font-size — Enfold's * .woocommerce-MyAccount-content p rule overrides the base 14px * because

tags inherit theme styling more aggressively than * divs. Without !important, the body copy on the rail cards * (QR sub-line, "Need a hand?" description, etc.) was rendering * at Enfold's body size, not ours. */ font-size: 14px !important; color: var(--text-muted); line-height: 1.55; margin: 6px 0 16px 0; /* v4.0.12 (Enrique): space away from the rail CTA */ } /* v3.21.0: 30-day scan-activity bar chart in the QR rail card. The body * line above carries its own 14px bottom margin (the gap above the bars); * this adds the lower gap to the meta row. :empty collapses the slot when * there's no scan activity to show, so the loading/zero states leave no hole. */ .aadash-rail-card__spark { height: 34px; margin: 0 0 16px 0; } .aadash-rail-card__spark:empty { display: none; margin: 0; } .aadash-rail-card__spark svg { display: block; width: 100%; height: 100%; } .aadash-rail-card__spark--empty { display: flex; align-items: center; justify-content: center; } .aadash-rail-card__spark-empty { font-size: 12px; color: var(--text-dim); letter-spacing: 0.3px; } /* CTA in the card foot — extends .aadash-btn-cta or .aadash-btn-out. Width 100% so it spans the rail card consistently regardless of label length. */ .aadash-rail-card__cta { width: 100%; justify-content: center; } /* v3.17.0 (Enrique): TOOLS-tray cards use a text-link CTA instead of a * full-width ghost button — three ghost buttons read busy. Mirrors the * arsenal overlay CTA (cyan, 500, arrow). margin-top:auto bottom-aligns * it in the flex-column tile; align-self keeps it a left-aligned link. * The ::after arrow survives the QR card's JS textContent swap — an * inline child would be wiped when data-qr-cta text updates. */ .aadash-rail-card__textcta { margin-top: auto; padding-top: 14px; align-self: flex-start; font-size: 14px; font-weight: 500; color: var(--accent-action); text-decoration: none; display: inline-flex; align-items: center; line-height: 1.2; } .aadash-rail-card__textcta::after { content: '\2192'; margin-left: 6px; transition: transform 0.15s ease; } .aadash-rail-card:hover .aadash-rail-card__textcta::after { transform: translateX(3px); } /* "Coming soon" badge — small caps pill, muted styling. Reads as informational rather than as a CTA. */ .aadash-rail-card__badge { display: inline-block; padding: 4px 10px; border-radius: var(--r-sm); background: var(--bg-elevated); border: 1px solid var(--bd); color: var(--text-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; } /* ─── Narrow-viewport rail polish ─── */ @media (max-width: 1499px) { /* When the rail stacks under the SPA at narrower widths, give it a top divider so the visual break between main content and rail content reads intentionally rather than as an accident. */ .aadash-frame__rail::before { content: ''; display: block; height: 1px; background: var(--bd); margin: 0 0 18px 0; } } /* ============================================================ SITE DETAIL SUBSCRIPTION SECTION (Build 3) Embedded subscription summary in the SPA's site detail view. Lives between the header strip and the Quick Actions row. Uses the .aadash-sd-section container the other rows share, so panel spacing and headers stay consistent — the .aadash-sd-sub classes only add layout for the head + tiles + foot. ============================================================ */ .aadash-sd-sub__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px 16px 20px; border-bottom: 1px solid var(--bd); } .aadash-sd-sub__head-icon { width: 44px; height: 44px; border-radius: var(--r-md); background: rgba(0, 205, 251, 0.10); color: var(--accent-action); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .aadash-sd-sub__head-titles { min-width: 0; flex: 1 1 auto; } .aadash-sd-sub__head-headline { color: var(--text-primary); font-size: 16px; font-weight: 500; line-height: 1.3; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-sd-sub__head-id { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } /* Two-tile grid below the head: Next renewal | Payment method. At narrow widths the tiles stack so each can breathe. */ .aadash-sd-sub__tiles { display: grid; /* auto-fit with minmax(0, 1fr) lets the row read as 2 columns * when there's a renewal + payment tile, and 1 full-width * column when v3.11.2 drops the renewal tile (rail shows it) * leaving only payment method. */ grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; } /* Single-tile case — the lone tile gets the full row width with * the same padding rhythm. No left border (it'd render to the * left of nothing). */ .aadash-sd-sub__tiles .aadash-sd-sub__tile:only-child { border-left: 0; } .aadash-sd-sub__tile { padding: 16px 20px; border-bottom: 1px solid var(--bd); } .aadash-sd-sub__tile + .aadash-sd-sub__tile { border-left: 1px solid var(--bd); } .aadash-sd-sub__tile-lbl { color: var(--text-dim); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .aadash-sd-sub__tile-val { color: var(--text-primary); font-size: 16px; font-weight: 500; line-height: 1.3; } .aadash-sd-sub__tile-val--muted { color: var(--text-muted); font-weight: 400; } .aadash-sd-sub__tile-meta { color: var(--text-muted); font-size: 14px; margin-top: 4px; } .aadash-sd-sub__foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 16px 20px; } .aadash-sd-sub__total { color: var(--text-primary); font-size: 18px; font-weight: 500; } .aadash-sd-sub__total .woocommerce-Price-amount, .aadash-sd-sub__total .woocommerce-Price-currencySymbol { color: var(--text-primary); } @container aadash (max-width: 560px) { .aadash-sd-sub__tiles { grid-template-columns: 1fr; } .aadash-sd-sub__tile + .aadash-sd-sub__tile { border-left: 0; } .aadash-sd-sub__foot { flex-direction: column; align-items: stretch; } .aadash-sd-sub__foot .aadash-btn-cta { justify-content: center; } } /* ============================================================ RAIL VARIANTS — SITE DETAIL (Build 3) Builds on Build 2's .aadash-rail-card. Adds: .aadash-rail-card--renewal — date-prominent layout .aadash-rail-card--urgent — warn coloring when renewal ≤14d .aadash-rail-card__meta — key/value rows inside the card ============================================================ */ .aadash-rail-card--renewal { /* Date is the headline here — give the title some room. */ } .aadash-rail-card--renewal .aadash-rail-card__title { font-size: 18px; line-height: 1.25; margin-bottom: 4px; } .aadash-rail-card--renewal .aadash-rail-card__body { margin-bottom: 12px; } .aadash-rail-card__meta { display: flex; flex-direction: column; gap: 0; margin-bottom: 14px; padding-top: 0; /* v4.0.12 (Enrique): removed — body margin handles separation */ border-top: 1px solid var(--bd); } .aadash-rail-card__meta-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 6px 0; font-size: 14px; } .aadash-rail-card__meta-row + .aadash-rail-card__meta-row { border-top: 1px solid var(--bd); } .aadash-rail-card__meta-lbl { color: var(--text-muted); } .aadash-rail-card__meta-val { color: var(--text-primary); font-weight: 500; } .aadash-rail-card__meta-val .woocommerce-Price-amount, .aadash-rail-card__meta-val .woocommerce-Price-currencySymbol { color: var(--text-primary); } /* Urgent — renewal ≤14 days. Warn-amber border + top edge so the customer's eye lands on this card first. Stays calm-not-panicked coloring — the surface needs attention but isn't broken. */ .aadash-rail-card--urgent { border-color: rgba(245, 158, 11, 0.32); background: linear-gradient( 135deg, rgba(245, 158, 11, 0.06) 0%, var(--bg-recessed) 55% ); } .aadash-rail-card--urgent .aadash-rail-card__icon { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.25); color: var(--warn); } .aadash-rail-card--urgent .aadash-rail-card__eyebrow { color: var(--warn); } .aadash-rail-card--urgent::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--warn); opacity: 0.55; } /* Skeleton shimmer — UI Design System §4 (prefixed name avoids collisions) */ @keyframes aadash-shimmer{from{background-position:-150% 0}to{background-position:250% 0}} /* ============================================================ v3.13.0 — UI Design System pass: mobile completeness + touch + a11y. Token foundation (v1.1) is in :root above; component token migration proceeds opportunistically per the system (no big-bang on a live product). ============================================================ */ /* .aadash-project-row — closes the last fixed-grid reflow gap (was `36px 1fr auto auto` with no <=600 rule). Flex-wrap keeps avatar+body on the first line and lets trailing items wrap, so nothing gets crushed. */ @container aadash (max-width: 600px) { .aadash-project-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .aadash-project-row__avatar { flex: 0 0 auto; } .aadash-project-row__body { flex: 1 1 160px; min-width: 0; } } @media (max-width: 600px) { .aadash-project-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; } .aadash-project-row__avatar { flex: 0 0 auto; } .aadash-project-row__body { flex: 1 1 160px; min-width: 0; } } /* Touch targets — interactive controls to 44px on mobile (UI DS §8 rule 4). Status pills (.aadash-pill) are excluded — they are labels, not controls. */ @container aadash (max-width: 600px) { .aadash-btn-cta, .aadash-btn-out, .aadash-btn-ghost, .aadash-btn-sm, .aadash-filter-pill { min-height: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; } } @media (max-width: 600px) { .aadash-btn-cta, .aadash-btn-out, .aadash-btn-ghost, .aadash-btn-sm, .aadash-filter-pill { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } } /* a11y — visible keyboard focus on every interactive element (UI DS §1.8/§8). */ .aadash-root a:focus-visible, .aadash-root button:focus-visible, .aadash-root [role="button"]:focus-visible, .aadash-root input:focus-visible, .aadash-root select:focus-visible, .aadash-root textarea:focus-visible, .aadash-root [tabindex]:focus-visible { outline: 2px solid var(--accent-action); outline-offset: 2px; border-radius: var(--r-sm); } /* a11y — honour reduced-motion: neutralise spinner, fade-in, shimmer, and transitions for users who ask for it (UI Design System §1.8). */ @media (prefers-reduced-motion: reduce) { .aadash-root *, .aadash-root *::before, .aadash-root *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ============================================================ v3.22.0: SLIM SCROLLBARS (Enrique) Desktop WebKit/Blink show the chunky OS-default scrollbar in scroll containers; Chrome's mobile emulation shows a slim overlay, which is the modern look we want. Style the activity feed's scroll container to match. Scoped to .aadash-activity__scroll so it never touches the (intentionally hidden) tab-bar scrollbar. ============================================================ */ .aadash-activity__scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.18) transparent; } .aadash-activity__scroll::-webkit-scrollbar { width: 8px; } .aadash-activity__scroll::-webkit-scrollbar-track { background: transparent; } .aadash-activity__scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.16); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .aadash-activity__scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.30); background-clip: padding-box; } /* ============================================================ v3.22.1: SUPPRESS WCS NATIVE DUPLICATE BLOCKS (Enrique, from live DOM) WCS renders extra content around our subscription-details.php override: (A) the woocommerce_subscription_details_after_subscription_table hook emits a related-orders block as a DIRECT CHILD of .aadash-sub-detail (between our panels); (C) the view-subscription loader APPENDS native totals + related-orders + customer-details as SIBLINGS after our template (outside .aadash-root), which is why the billing address showed twice. We already render all of this in styled panels, so hide the duplicates. Scoped with > (direct child) and ~ (later sibling) of .aadash-sub-detail so our panel-nested versions stay, and view-order / other account pages — which have no .aadash-sub-detail — are unaffected. ============================================================ */ .aadash-sub-detail > .aadash-sub-orders__empty, .aadash-sub-detail ~ .aadash-sub-totals, .aadash-sub-detail ~ .aadash-sub-orders__empty, .aadash-sub-detail ~ .woocommerce-customer-details, .aadash-sub-detail ~ .woocommerce-order-details { display: none !important; } /* ╔══════════════════════════════════════════════════════════════╗ ║ v4.0.0 — .aad4-* COMPONENT LAYER ║ ║ Brand & Design System v3.0 · "Customer Dashboard v3" mockup ║ ╚══════════════════════════════════════════════════════════════╝ Fresh block namespace for the redesigned dashboard / sites / domains routes. The v3.x .aadash-* classes still serving the site-detail, services, ads, and subscription surfaces are untouched above this line. Enfold defense (Issue #7 discipline): every border declaration on .aadash-root descendants carries !important — Enfold's `.woocommerce-MyAccount-content a`, `.avia-button`, and generic element resets WILL strip plain borders. Headings inside the layer also pin font-size/weight against Enfold's h1-h6 rules. */ /* ─── Foundations: brand-book aliases the v4 layer reads ─── */ .aadash-root { --aa-bg-base: var(--bg-base); /* #0C0C0C — the void */ --aa-bg-recessed: var(--bg-recessed); /* #111111 — card body */ --aa-bg-elevated: var(--bg-elevated); /* #161616 — elevated */ --aa-text-primary: var(--text-primary); --aa-text-secondary: var(--text-secondary); /* v4.0.1 (Adam QA C-1): canonical v3.0 dark values restored. muted = #8B92B3 — quiet content a user READS (timestamps, helper text, empty states; the violet whisper end of the signal family). dim = #888888 — quiet chrome a user SCANS (labels, units, column headers). "Dim labels over muted helper text" is the standard Hub pairing. (#6D7494 is the LIGHT-mode ladder — not used here.) */ --aa-text-muted: #8b92b3; --aa-text-dim: #888888; --aad4-pad: 20px; /* card padding (mockup --dh-pad) */ --aad4-gap: 16px; /* grid gap (mockup --dh-gap) */ } /* ─── Greeting ─── */ .aadash-root .aad4-greeting { margin-bottom: 4px; } .aadash-root .aad4-greeting__title { font-family: var(--aa-font-sans) !important; font-size: clamp(24px, 5vw, 32px) !important; /* v4.0.10 (Enrique): fluid welcome — 32 desktop, 24 phone */ font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.5 !important; /* v4.0.10 (Enrique) */ margin: 0 0 4px !important; padding: 0 !important; color: var(--aa-text-primary) !important; } .aadash-root .aad4-greeting__date { font-size: 14px !important; color: var(--aa-text-muted); /* readable timestamp — muted (violet) */ } /* ─── Tabs (gradient-underline nav) ─── */ .aadash-root .aad4-tabs { display: flex; gap: 4px; margin: 16px 0 22px; border-bottom: 1px solid var(--aa-border-subtle) !important; overflow-x: auto; scrollbar-width: none; } .aadash-root .aad4-tabs::-webkit-scrollbar { display: none; } .aadash-root .aad4-tab { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px 9px; font-family: var(--aa-font-sans) !important; font-size: 14px !important; font-weight: 500 !important; color: #888888 !important; background: transparent !important; border: none !important; border-bottom: 2px solid transparent !important; margin-bottom: -1px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: color .2s ease; } .aadash-root .aad4-tab:hover { color: #c0c0c0 !important; } .aadash-root .aad4-tab--active { color: #fff !important; border-bottom: 2px solid !important; border-image: var(--aa-gradient-emphasis) 1 !important; } .aadash-root .aad4-tab__count { font-family: var(--aa-font-mono) !important; font-size: 12px !important; /* v4.0.1 (Adam QA C-2): 12px floor */ color: #c0c0c0; background: rgba(255,255,255,.07); border-radius: var(--r-sm); padding: 1px 6px; line-height: 1.5 !important; } /* ─── Card primitive ─── */ .aadash-root .aad4-card { background: var(--aa-bg-recessed); border: 1px solid var(--aa-border-subtle) !important; border-radius: var(--r-lg); /* 8px — Hub card spec */ } /* ─── Text primitives ─── */ .aadash-root .aad4-label { font-family: var(--aa-font-sans) !important; font-size: 12px !important; font-weight: 500 !important; letter-spacing: .08em !important; /* v4.0.1 (Adam QA): .ds-stat label spec */ text-transform: uppercase; color: var(--aa-text-dim); display: block; } .aadash-root .aad4-label__host { text-transform: none; letter-spacing: .02em !important; } .aadash-root .aad4-eyebrow { font-family: var(--aa-font-sans) !important; /* v4.0.9 (Enrique): decorative mono retired */ font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.5px !important; /* v4.0.5 (Enrique): 3px reads too wide at this size — 1.5px ruling supersedes the book's eyebrow spec on the dashboard */ text-transform: uppercase; color: var(--aa-purple-bright); display: block; } .aadash-root .aad4-meta { font-family: var(--aa-font-mono) !important; font-size: 12px !important; color: var(--aa-text-dim); display: inline-flex; align-items: center; gap: 5px; } .aadash-root .aad4-link { color: var(--aa-link) !important; text-decoration: none !important; font-weight: 500 !important; font-size: 14px !important; cursor: pointer; transition: color .3s ease; } .aadash-root .aad4-link:hover { color: var(--aa-link-hover) !important; } .aadash-root .aad4-cardcopy { font-size: 14px !important; line-height: 1.55 !important; color: var(--aa-text-secondary); margin: 0; } .aadash-root .aad4-cardlink { display: inline-flex; align-items: center; margin-top: 10px; } /* v4.0.12 (Enrique): inline-flex for arrow alignment */ /* ─── Chips, dots, status ─── */ .aadash-root .aad4-chip { display: inline-flex; align-items: center; font-family: var(--aa-font-mono) !important; font-size: 12px !important; /* v4.0.1 (Adam QA C-2): 12px floor, no exceptions */ font-weight: 700 !important; border-radius: var(--r-sm); padding: 2px 6px; line-height: 1.5 !important; } .aadash-root .aad4-chip--good { color: var(--aa-good); background: var(--aa-good-tint); } .aadash-root .aad4-chip--dim { color: #888888; background: rgba(255,255,255,.05); } .aadash-root .aad4-dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .aadash-root .aad4-dot--good { background: var(--aa-good); } .aadash-root .aad4-dot--warn { background: var(--aa-warn); } .aadash-root .aad4-dot--danger { background: var(--aa-danger); } .aadash-root .aad4-dot--neutral { background: rgba(255,255,255,.28); } .aadash-root .aad4-status { display: inline-flex; align-items: center; gap: 6px; font-size: 12px !important; font-weight: 400 !important; color: var(--aa-text-secondary); white-space: nowrap; } .aadash-root .aad4-status--light { color: #c0c0c0; } /* v4.0.3 (R2): text-secondary token */ .aadash-root .aad4-tier { font-family: var(--aa-font-sans) !important; /* v4.0.9 (Enrique): decorative mono retired */ font-size: 12px !important; /* v4.0.1 (Adam QA C-2): 12px floor */ font-weight: 700 !important; /* v4.0.9 (Enrique) */ letter-spacing: .08em !important; text-transform: uppercase; color: var(--aa-purple-bright); /* v4.0.1 (Adam QA): token, not #a89dff */ background: rgba(12,12,12,.62); border: 1px solid rgba(87,69,255,.32) !important; /* v4.0.1: accent family */ border-radius: var(--r-md); padding: 2px 8px; backdrop-filter: blur(4px); } /* ─── Buttons (Hub spec: 14px, 5px radius, no shadows) ─── */ .aadash-root .aad4-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-family: var(--aa-font-sans) !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.2 !important; border-radius: var(--r-md); padding: 14px 28px; cursor: pointer; text-decoration: none !important; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; box-shadow: none !important; /* glows never sit on buttons */ } .aadash-root .aad4-btn--sm { padding: 9px 18px; } .aadash-root .aad4-btn:active { transform: scale(.98); } .aadash-root .aad4-btn--primary { background: var(--aa-cta) !important; color: var(--aa-cta-text) !important; border: 1px solid var(--aa-cta-border) !important; } .aadash-root .aad4-btn--primary:hover { background: var(--aa-cta-hover) !important; border-color: var(--aa-cta-hover) !important; color: var(--aa-cta-text) !important; } .aadash-root .aad4-btn--secondary { background: rgba(255,255,255,.06) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.14) !important; } .aadash-root .aad4-btn--secondary:hover { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.22) !important; color: #fff !important; } .aadash-root .aad4-btn--ghost { background: transparent !important; color: #c0c0c0 !important; border: 1px solid var(--aa-border) !important; } .aadash-root .aad4-btn--ghost:hover { background: rgba(255,255,255,.03) !important; color: #fff !important; border-color: var(--bd-strong) !important; /* v4.0.3 (R2): token */ } /* ─── Segmented control ─── */ .aadash-root .aad4-seg { display: inline-flex; gap: 2px; background: var(--aa-bg-base); border: 1px solid var(--aa-border-subtle) !important; border-radius: var(--r-md); /* v4.0.1: controls are 5px */ padding: 2px; } .aadash-root .aad4-seg__btn { font-family: var(--aa-font-mono) !important; font-size: 12px !important; font-weight: 500 !important; color: #888888 !important; background: transparent !important; border: none !important; border-radius: var(--r-sm); padding: 4px 10px; cursor: pointer; transition: background .2s ease, color .2s ease; } .aadash-root .aad4-seg__btn--sans { font-family: var(--aa-font-sans) !important; font-size: 12px !important; } .aadash-root .aad4-seg__btn:hover { color: #c0c0c0 !important; } .aadash-root .aad4-seg__btn--on { background: rgba(255,255,255,.08) !important; color: #fff !important; } /* ─── Icon tile + favicon ─── */ .aadash-root .aad4-icontile { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(255,255,255,.04); border-radius: var(--r-md); flex-shrink: 0; color: #8b92b3; } .aadash-root .aad4-icontile--lg { width: 52px; height: 52px; border-radius: var(--r-lg); } .aadash-root .aad4-favicon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--r-md); overflow: hidden; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1) !important; font-family: var(--aa-font-mono) !important; font-size: 12px !important; font-weight: 700 !important; color: #fff; flex-shrink: 0; } .aadash-root .aad4-favicon img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* ─── Main grid (dashboard: content + 332px rail) ─── */ .aadash-root .aad4-main-grid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: var(--aad4-gap); align-items: start; } .aadash-root .aad4-main-col { display: flex; flex-direction: column; gap: var(--aad4-gap); min-width: 0; padding-right: 16px; } .aadash-root .aad4-view { display: flex; flex-direction: column; gap: var(--aad4-gap); } /* ─── Hero stage ─── */ .aadash-root .aad4-hero { overflow: hidden; } .aadash-root .aad4-hero__stage { position: relative; background: var(--aa-bg-elevated); } .aadash-root .aad4-hero__shot, .aadash-root .aad4-hero__shot > * { position: absolute; inset: 0; } .aadash-root .aad4-hero__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .aadash-root .aad4-hero__poster { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: radial-gradient(90% 120% at 80% 0%, rgba(87,69,255,.16) 0%, rgba(12,12,12,0) 60%), var(--aa-bg-gradient); } .aadash-root .aad4-hero__poster-name { font-size: 22px !important; font-weight: 500 !important; color: #fff; } .aadash-root .aad4-hero__poster-url { font-family: var(--aa-font-mono) !important; font-size: 12px !important; color: var(--aa-text-muted); } .aadash-root .aad4-hero__scrim { position: absolute; inset: 0; pointer-events: none; background: /* v4.0.6 (Enrique): top band — the live screenshot's own nav was * bleeding through the unprotected top edge of the card. */ linear-gradient(180deg, rgba(12,12,12,.78) 0%, rgba(12,12,12,.22) 18%, rgba(12,12,12,0) 36%), linear-gradient(0deg, rgba(12,12,12,.88) 0%, rgba(12,12,12,.25) 42%, rgba(12,12,12,0) 70%), linear-gradient(82deg, rgba(12,12,12,.94) 0%, rgba(12,12,12,.6) 36%, rgba(12,12,12,.08) 78%); } .aadash-root .aad4-hero__content { position: relative; min-height: 296px; padding: 22px 24px; display: flex; flex-direction: column; pointer-events: none; } .aadash-root .aad4-hero__content a, .aadash-root .aad4-hero__content button { pointer-events: auto; } .aadash-root .aad4-hero__toprow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .aadash-root .aad4-hero__domain { font-family: var(--aa-font-sans) !important; font-size: 20px !important; font-weight: 500 !important; letter-spacing: 0 !important; line-height: 1.2 !important; color: #fff !important; margin: 0 !important; padding: 0 !important; } .aadash-root .aad4-hero__spacer { flex: 1; } .aadash-root .aad4-hero__botrow { display: flex; align-items: flex-end; gap: 34px; flex-wrap: wrap; } .aadash-root .aad4-hero__metric { display: flex; flex-direction: column; gap: 4px; } .aadash-root .aad4-label--onimg { color: #888888; } /* v4.0.3 (R2): dim token */ .aadash-root .aad4-hero__metric-row { display: flex; align-items: baseline; gap: 8px; } .aadash-root .aad4-hero__metric-val { font-family: var(--aa-font-mono) !important; /* v4.0.9 (Enrique): mono = data voice */ font-size: 28px !important; /* v4.0.1 (Adam QA): stat numbers are 700 · 28px+ */ font-weight: 700 !important; line-height: 1.1 !important; color: #fff; font-variant-numeric: tabular-nums; } .aadash-root .aad4-hero__flex { flex: 1; } .aadash-root .aad4-hero__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* ─── Hero switcher strip ─── */ .aadash-root .aad4-switcher { display: flex; gap: 20px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--aa-border-subtle) !important; background: var(--aa-bg-recessed); overflow-x: auto; scrollbar-width: none; } .aadash-root .aad4-switcher::-webkit-scrollbar { display: none; } .aadash-root .aad4-switch-chip { display: flex; align-items: center; gap: 10px; background: transparent !important; border: 1px solid transparent !important; border-radius: var(--r-md); padding: 6px 10px 6px 6px; cursor: pointer; text-align: left; font-family: var(--aa-font-sans) !important; transition: background .2s ease, border-color .2s ease; min-width: 0; flex-shrink: 0; } .aadash-root .aad4-switch-chip:hover { background: rgba(255,255,255,.03) !important; } .aadash-root .aad4-switch-chip--on { background: rgba(255,255,255,.05) !important; border-color: rgba(255,255,255,.1) !important; } .aadash-root .aad4-switch-chip__thumb { position: relative; width: 52px; height: 34px; border-radius: var(--r-sm); overflow: hidden; background: var(--aa-bg-elevated); border: 1px solid rgba(255,255,255,.08) !important; flex-shrink: 0; } .aadash-root .aad4-switch-chip__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .aadash-root .aad4-switch-chip__poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--aa-bg-gradient); } .aadash-root .aad4-switch-chip__poster-name { font-family: var(--aa-font-mono) !important; font-size: 12px !important; /* v4.0.1 (Adam QA C-2): 12px floor */ font-weight: 700 !important; color: var(--aa-text-dim); } .aadash-root .aad4-switch-chip__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .aadash-root .aad4-switch-chip__domain { font-size: 12px !important; font-weight: 500 !important; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .aadash-root .aad4-switcher__all { margin-left: auto; flex-shrink: 0; white-space: nowrap; } /* ─── Empty hero ─── */ .aadash-root .aad4-hero-empty { background: radial-gradient(90% 130% at 78% -10%, rgba(87,69,255,.14) 0%, rgba(12,12,12,0) 58%), var(--aa-bg-recessed); } .aadash-root .aad4-hero-empty__inner { min-height: 296px; padding: 34px var(--aad4-pad); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; } .aadash-root .aad4-hero-empty__title { font-family: var(--aa-font-sans) !important; font-size: 22px !important; font-weight: 500 !important; color: #fff !important; margin: 8px 0 0 !important; padding: 0 !important; letter-spacing: 0 !important; text-transform: none !important; /* v4.0.13 (Enrique): override Enfold/Woo uppercase */ } .aadash-root .aad4-hero-empty__desc { font-size: 14px !important; color: var(--aa-text-secondary); max-width: 420px; margin: 0; line-height: 1.55 !important; } .aadash-root .aad4-hero-empty__actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; justify-content: center; } /* ─── Performance chart ─── */ .aadash-root .aad4-chart { padding: var(--aad4-pad); } .aadash-root .aad4-chart__head { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .aadash-root .aad4-chart__lede { display: flex; flex-direction: column; gap: 6px; } .aadash-root .aad4-chart__total-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .aadash-root .aad4-chart__total { font-family: var(--aa-font-mono) !important; /* v4.0.9 (Enrique): mono = data voice */ font-size: 28px !important; /* v4.0.1 (Adam QA): stat numbers are 700 · 28px+ */ font-weight: 700 !important; line-height: 1.1 !important; color: #fff; font-variant-numeric: tabular-nums; } .aadash-root .aad4-chart__unit { font-size: 12px !important; color: var(--aa-text-dim); } .aadash-root .aad4-chart__flex { flex: 1; } .aadash-root .aad4-chart__segs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; } .aadash-root .aad4-chart__body { min-height: 184px; } .aadash-root .aad4-chart__loading { min-height: 158px; display: flex; align-items: center; justify-content: center; font-size: 14px !important; color: var(--aa-text-muted); } .aadash-root .aad4-chart__plot { position: relative; height: 158px; } .aadash-root .aad4-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; } .aadash-root .aad4-chart__cursor { display: none; position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.18); pointer-events: none; } .aadash-root .aad4-chart__hoverdot { display: none; position: absolute; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; pointer-events: none; } .aadash-root .aad4-chart__tip { display: none; position: absolute; top: 8px; transform: translateX(-50%); background: var(--aa-bg-elevated); border: 1px solid var(--aa-border) !important; border-radius: var(--r-md); padding: 5px 10px; font-size: 12px !important; color: var(--aa-text-secondary); white-space: nowrap; pointer-events: none; box-shadow: var(--aa-shadow-hub); z-index: 3; } .aadash-root .aad4-chart__tip strong { color: #fff; font-weight: 700 !important; } .aadash-root .aad4-chart__tip-date { display: block; color: var(--aa-text-muted); font-family: var(--aa-font-mono) !important; font-size: 12px !important; margin-top: 1px; } .aadash-root .aad4-chart__xlabels { display: flex; justify-content: space-between; margin-top: 8px; } /* ─── Projects / Support mini-cards ─── */ .aadash-root .aad4-pt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--aad4-gap); } .aadash-root .aad4-minicard { padding: var(--aad4-pad); display: flex; flex-direction: column; gap: 12px; } .aadash-root .aad4-minicard__label { margin-bottom: 0; } .aadash-root .aad4-minicard .aad4-cardlink { margin-top: auto; } /* ── v4.0.12 (Enrique): premium empty states for Projects/Support ── * Taller card with a centered ghost glyph (very light, indicative of * the surface) and a terse line. The CTA gains the AA action arrow. */ .aadash-root .aad4-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 132px; padding: 8px 0 4px; text-align: center; } .aadash-root .aad4-empty__glyph { color: rgba(255,255,255,.10); /* ghost — present but quiet */ flex: 0 0 auto; } .aadash-root .aad4-empty__line { margin: 0 !important; font-size: 14px !important; font-weight: 500 !important; color: var(--aa-text-muted) !important; line-height: 1.4 !important; } .aadash-root .aad4-cardlink__arw { display: inline-block; vertical-align: -2px; margin-left: 6px; transition: transform .18s ease; } .aadash-root .aad4-cardlink:hover .aad4-cardlink__arw { transform: translateX(3px); } .aadash-root .aad4-rowline { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .aadash-root .aad4-rowline__name { font-size: 14px !important; font-weight: 500 !important; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-root .aad4-rowline__sub { font-size: 12px !important; color: var(--aa-text-muted); /* helper text — muted */ margin-top: 3px; } .aadash-root .aad4-progress-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .aadash-root .aad4-progress { flex: 1; height: 5px; border-radius: 3px; /* mockup spec */ background: rgba(255,255,255,.07); overflow: hidden; } .aadash-root .aad4-progress__bar { display: block; height: 100%; border-radius: 3px; /* v4.0.1 fidelity (Enrique): THE gradient — cyan→#432fff emphasis * token, per the mockup. The teal→cyan sweep that shipped in 4.0.0 * was unsanctioned drift. */ background: var(--aa-gradient-emphasis); transition: width .4s ease; } /* ─── Rail (in-fragment): one quiet panel, hairline-divided ─── */ .aadash-root .aad4-rail { /* v4.0.1 (Adam QA H-7): the mockup's #101010 sat between tiers — the 3-tier model is absolute (void/recessed/elevated, exactly one per surface). The rail is one quiet card → recessed. */ background: var(--aa-bg-recessed); border: 1px solid var(--aa-border-subtle) !important; border-radius: var(--r-lg); padding: 10px 22px 14px; align-self: start; display: flex; flex-direction: column; min-width: 0; } .aadash-root .aad4-rail .aad4-rail__sec { background: transparent; border: none !important; border-bottom: 1px solid rgba(255,255,255,.06) !important; border-radius: 0; padding: 16px 0 18px; } .aadash-root .aad4-rail .aad4-rail__sec:last-child { border-bottom: none !important; } /* ─── Activity timeline ─── */ .aadash-root .aad4-tl__label { margin-bottom: 14px; } .aadash-root .aad4-tl__item { display: flex; gap: 12px; cursor: default; } .aadash-root .aad4-tl__item[data-href] { cursor: pointer; } .aadash-root .aad4-tl__item[data-href]:hover .aad4-tl__text { color: #fff; } .aadash-root .aad4-tl__rail { display: flex; flex-direction: column; align-items: center; width: 10px; flex-shrink: 0; padding-top: 4px; } .aadash-root .aad4-tl__line { flex: 1; width: 1px; background: rgba(255,255,255,.08); margin-top: 4px; } .aadash-root .aad4-tl__body { padding-bottom: 16px; min-width: 0; } .aadash-root .aad4-tl__body--last { padding-bottom: 2px; } .aadash-root .aad4-tl__text { font-size: 14px !important; line-height: 1.45 !important; color: var(--aa-text-secondary); transition: color .2s ease; } .aadash-root .aad4-tl__sub { font-size: 12px !important; color: var(--aa-text-muted); /* helper text — muted */ margin-top: 2px; } .aadash-root .aad4-tl__time { margin-top: 4px; font-size: 12px !important; color: var(--aa-text-muted); } /* ─── QR rail card ─── */ .aadash-root .aad4-qr__head { display: flex; align-items: center; margin-bottom: 12px; } .aadash-root .aad4-qr__flex { flex: 1; } .aadash-root .aad4-qr__hero-row { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; } .aadash-root .aad4-qr__total { font-family: var(--aa-font-mono) !important; /* v4.0.9 (Enrique): mono = data voice */ font-size: 28px !important; /* v4.0.1 (Adam QA): stat numbers are 700 · 28px+ */ font-weight: 700 !important; line-height: 1.1 !important; color: #fff; font-variant-numeric: tabular-nums; } .aadash-root .aad4-qr__bars { height: 32px; margin-bottom: 14px; } .aadash-root .aad4-qr__bars svg { width: 100%; height: 32px; display: block; } .aadash-root .aad4-qr__codes { display: flex; flex-direction: column; gap: 8px; } .aadash-root .aad4-qr__code-row { display: flex; align-items: center; gap: 10px; } .aadash-root .aad4-qr__code-name { flex: 1; min-width: 0; font-size: 14px !important; color: var(--aa-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-root .aad4-qr__code-track { width: 84px; height: 5px; border-radius: 999px; background: rgba(255,255,255,.07); overflow: hidden; flex-shrink: 0; } .aadash-root .aad4-qr__code-fill { display: block; height: 100%; border-radius: 999px; } .aadash-root .aad4-qr__code-ct { flex-shrink: 0; font-size: 12px !important; } /* ─── Health ring ─── */ .aadash-root .aad4-health { display: flex; align-items: center; gap: 18px; } .aadash-root .aad4-health__ringwrap { position: relative; width: 96px; height: 96px; flex-shrink: 0; } .aadash-root .aad4-health__ring { width: 96px; height: 96px; display: block; } .aadash-root .aad4-health__score { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1px; } .aadash-root .aad4-health__num { font-family: var(--aa-font-mono) !important; /* v4.0.9 (Enrique): mono = data voice */ font-size: 28px !important; /* v4.0.1 (Adam QA): stat numbers are 700 · 28px+ */ font-weight: 700 !important; color: #fff; font-variant-numeric: tabular-nums; } .aadash-root .aad4-health__den { font-family: var(--aa-font-mono) !important; font-size: 12px !important; /* v4.0.1 (Adam QA C-2): 12px floor */ color: var(--aa-text-dim); align-self: flex-end; padding-bottom: 24px; } .aadash-root .aad4-health__body { min-width: 0; } .aadash-root .aad4-health__state { font-size: 14px !important; font-weight: 500 !important; color: #fff; margin: 4px 0 8px; } .aadash-root .aad4-check { display: flex; align-items: center; gap: 8px; font-size: 12px !important; color: var(--aa-text-secondary); margin: 5px 0; } /* ─── Arsenal (imagery upsell cards) ─── */ .aadash-root .aad4-arsenal { /* v4.0.5 (Enrique): full-width section below the main grid, with the * mockup's separation treatment restored. v4.0.14: opened to * mt32 / pt24 for stronger separation from the grid above. */ margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06) !important; } .aadash-root .aad4-arsenal__head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; } .aadash-root .aad4-arsenal__title { font-size: 18px !important; font-weight: 500 !important; color: #fff; } .aadash-root .aad4-arsenal__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--aad4-gap); } .aadash-root .aad4-arsenal-card { position: relative; display: block; height: 172px; border-radius: var(--r-lg); border: 1px solid var(--aa-border-subtle) !important; overflow: hidden; background: var(--aa-bg-gradient); text-decoration: none !important; transition: var(--aa-hover-transition); } .aadash-root .aad4-arsenal-card:hover { transform: var(--aa-hover-lift); border-color: rgba(255,255,255,.12) !important; box-shadow: var(--aa-shadow-hub); } .aadash-root .aad4-arsenal-card__art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; display: block; } .aadash-root .aad4-arsenal-card__glyph { position: absolute; right: -14px; top: 6px; opacity: .16; pointer-events: none; transform: rotate(-8deg); transition: opacity .3s ease, transform .3s ease; } .aadash-root .aad4-arsenal-card:hover .aad4-arsenal-card__glyph { opacity: .26; transform: rotate(-4deg) scale(1.04); } .aadash-root .aad4-arsenal-card__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(12,12,12,.12) 0%, rgba(12,12,12,.5) 52%, rgba(12,12,12,.92) 100%); } .aadash-root .aad4-arsenal-card__icon { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; background: rgba(12,12,12,.55); border: 1px solid rgba(255,255,255,.08) !important; border-radius: 5px; color: #8b92b3; /* v4.0.1 (Adam QA H-8): icons are neutral; purple is reserved for true signals (tier/locked/milestone) */ pointer-events: none; backdrop-filter: blur(4px); } .aadash-root .aad4-arsenal-card__body { position: absolute; left: 14px; right: 14px; bottom: 13px; pointer-events: none; display: block; } .aadash-root .aad4-arsenal-card__title { display: block; font-size: 16px !important; font-weight: 500 !important; color: #fff; margin: 4px 0 6px; } .aadash-root .aad4-arsenal-card__cta { font-size: 14px !important; } /* ─── Sites grid ─── */ .aadash-root .aad4-sites-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--aad4-gap); } .aadash-root .aad4-sitecard { overflow: hidden; cursor: pointer; transition: var(--aa-hover-transition); } .aadash-root .aad4-sitecard:hover { transform: var(--aa-hover-lift); border-color: rgba(255,255,255,.12) !important; box-shadow: var(--aa-shadow-hub); } .aadash-root .aad4-sitecard__shot { position: relative; height: 170px; background: var(--aa-bg-elevated); border-bottom: 1px solid var(--aa-border-subtle) !important; overflow: hidden; } .aadash-root .aad4-sitecard__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; } .aadash-root .aad4-sitecard__shot .aadash-thumb-url { display: none; } .aadash-root .aad4-sitecard__poster { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: radial-gradient(90% 120% at 80% 0%, rgba(87,69,255,.14) 0%, rgba(12,12,12,0) 60%), var(--aa-bg-gradient); } .aadash-root .aad4-sitecard__poster-name { font-size: 18px !important; font-weight: 500 !important; color: #fff; } .aadash-root .aad4-sitecard__body { padding: 16px var(--aad4-pad) var(--aad4-pad); } .aadash-root .aad4-sitecard__domain { font-size: 16px !important; font-weight: 500 !important; color: #fff; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-root .aad4-sitecard__stats { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 16px 0; } .aadash-root .aad4-sitecard__stat { display: flex; flex-direction: column; gap: 5px; } .aadash-root .aad4-sitecard__stat-row { display: flex; align-items: baseline; gap: 6px; } .aadash-root .aad4-sitecard__stat-val { font-family: var(--aa-font-mono) !important; /* v4.0.9 (Enrique): mono = data voice */ font-size: 18px !important; font-weight: 700 !important; color: #fff; line-height: 1.1 !important; font-variant-numeric: tabular-nums; } .aadash-root .aad4-sitecard__health { display: inline-flex; align-items: center; gap: 7px; } .aadash-root .aad4-sitecard__health-num { font-family: var(--aa-font-mono) !important; /* v4.0.9 (Enrique): mono = data voice */ font-size: 18px !important; font-weight: 700 !important; color: #fff; font-variant-numeric: tabular-nums; } .aadash-root .aad4-sitecard__actions { display: flex; gap: 10px; flex-wrap: wrap; } .aadash-root .aad4-addcard { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 280px; border: 1px solid rgba(255,255,255,.14) !important; /* v4.0.12 (Enrique): solid only */ border-radius: var(--r-lg); text-decoration: none !important; transition: border-color .2s ease, background .2s ease; } .aadash-root .aad4-addcard:hover { border-color: rgba(255,255,255,.28) !important; background: rgba(255,255,255,.02); } .aadash-root .aad4-addcard__title { font-size: 14px !important; font-weight: 500 !important; color: #fff; margin-top: 8px; } .aadash-root .aad4-addcard__sub { font-size: 12px !important; color: var(--aa-text-muted); /* helper text — muted */ } /* ─── Domains registry ─── */ .aadash-root .aad4-domreg { overflow: hidden; } /* v4.0.12 (Enrique): separate the domain-purchase panel from the * registered-domains list with a clear gap + hairline above it. Only * applies when the panel actually holds content (has children). */ .aadash-extras-anchor--domsep:not(:empty) { display: block; margin-top: 24px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.06) !important; } .aadash-root .aad4-domrow { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; padding: 16px var(--aad4-pad); border-bottom: 1px solid rgba(255,255,255,.06) !important; } .aadash-root .aad4-domrow--last { border-bottom: none !important; } .aadash-root .aad4-domrow__name-wrap { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; } .aadash-root .aad4-domrow__name { font-size: 18px /* v4.0.12 (Enrique) */ !important; /* v4.0.3: snapped off-ladder 14.5 → row-primary 15 */ font-weight: 500 !important; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .aadash-root .aad4-domrow__col { flex: 0 0 110px; display: flex; flex-direction: column; gap: 3px /* v4.0.12 (Enrique) */; } .aadash-root .aad4-domrow__cell { display: inline-flex; align-items: center; gap: 7px; font-size: 12px !important; color: var(--aa-text-secondary); } .aadash-root .aad4-domrow__exp--warn { color: var(--aa-warn); } .aadash-root .aad4-domrow__links { display: flex; gap: 16px; margin-left: auto; flex-shrink: 0; } /* ─── Extras (domain-search) panel — mockup search-card restyle ─── */ .aadash-root .aadash-extras__panel, #aadash-extras .aadash-extras__panel { background: var(--bg-recessed); border: 1px solid var(--aa-border-subtle) !important; border-radius: var(--r-lg); padding: var(--aad4-pad, 20px); } /* ─── Responsive ─── */ /* v4.0.5: doctrine restore — these were shipped as viewport @media, * violating the file's own §5 container-query system. Enfold's account * sidebar eats ~380px, so viewport queries fired ~380px too late (rail * still side-by-side in a 744px column at 1122px viewport). Converted * to @container aadash on doctrine rungs (lg 1100 · sm 600). Arsenal is * now full-width, so its 2-up point rides the same lg rung. */ @container aadash (max-width: 1100px) { .aadash-root .aad4-arsenal__grid { grid-template-columns: repeat(2, 1fr); } } @container aadash (max-width: 1100px) { .aadash-root .aad4-main-grid { grid-template-columns: 1fr; } .aadash-root .aad4-main-col { padding-right: 0; } /* Rail collapses back to standalone cards */ .aadash-root .aad4-rail { background: transparent; border: none !important; padding: 0; gap: var(--aad4-gap); } .aadash-root .aad4-rail .aad4-rail__sec { background: var(--aa-bg-recessed); border: 1px solid var(--aa-border-subtle) !important; border-radius: var(--r-lg); padding: var(--aad4-pad); } } @container aadash (max-width: 600px) { /* v4.0.7 (Enrique): website-card hero. Below sm the capture stops * being a backdrop and becomes a framed image band ON TOP of the * data — the sitecard pattern, where the same mShots capture is * perfectly legible because nothing is overlaid on it. Poster- * fallback sites render their gradient as the band. * v4.0.8 (Enrique): seam fade removed — clean band edge; spacing * opened up (toprow mb, botrow/action gaps, content padding) and * metric numbers step down to a 24px mobile stat rung. */ .aadash-root .aad4-hero__shot, .aadash-root .aad4-hero__shot > * { position: static; inset: auto; } .aadash-root .aad4-hero__shot { height: 158px; overflow: hidden; } .aadash-root .aad4-hero__shot > * { width: 100%; height: 100%; } .aadash-root .aad4-hero__shot img { display: block !important; } .aadash-root .aad4-hero__scrim { display: none; } .aadash-root .aad4-hero__content { padding: 16px 20px; min-height: 0; } .aadash-root .aad4-hero__domain { font-size: 18px !important; } .aadash-root .aad4-hero__toprow { margin-bottom: 16px; } .aadash-root .aad4-hero__botrow { gap: 32px; row-gap: 24px; } .aadash-root .aad4-hero__actions { gap: 16px; } .aadash-root .aad4-hero__metric-val { font-size: 24px !important; } .aadash-root .aad4-switcher { gap: 12px; padding: 10px 12px; } .aadash-root .aad4-pt-grid { grid-template-columns: 1fr; } .aadash-root .aad4-arsenal__grid { grid-template-columns: 1fr; } .aadash-root .aad4-domrow { gap: 14px; } .aadash-root .aad4-domrow__links { margin-left: 0; width: 100%; } }