/* ============================================================================ nmy_theme.css -- NMY VisualForm system-wide design tokens + core components. The "warm resumable-card" language, distilled from the owner-approved sidebar (LX.41b) and the Phase-1 project card: light & airy, warm cream neutrals, ONE restrained amber accent, whisper-soft shadows, generous rounding, SF type. Load this on every surface; theme each page THROUGH these tokens (never hard- code colours/shadows on a page). Single source of truth for the UI rollout. ============================================================================ */ /* ============================================================================ >>> HOW TO CHANGE A COLOUR (plain guide, no coding needed) <<< ---------------------------------------------------------------------------- 1. Scroll to the line whose comment matches what you want to change. 2. Change ONLY the value -- the part like #c9761a (a "#" + 6 characters). Keep the name (--nmy-...) and the ";" at the end EXACTLY the same. 3. Save this file, then on the server run: python3 nmy_bump_versions.py --go 4. In the browser press Cmd+Shift+R (hard refresh). The WHOLE system updates. THE 3 MOST COMMON CHANGES: * Highlight / button colour -> the AMBER block (--nmy-amber-deep) * Page background -> --nmy-ground * Normal text colour -> --nmy-ink SAFE RULES: one value per line * never delete the --nmy-... name or the ";" * unsure? change ONE line, refresh, look, then do the next. ============================================================================ */ :root{ /* grounds & surfaces */ --nmy-ground:#f6f4ef; /* PAGE BACKGROUND -- behind everything */ --nmy-surface:#fffefb; /* CARD / PANEL background */ --nmy-surface-2:#fdf9f1; /* second card shade -- used for subtle two-tone cards */ --nmy-surface-grad:linear-gradient(135deg,var(--nmy-surface),var(--nmy-surface-2)); /* gentle gradient across a card */ /* warm neutrals (never flat grey) */ --nmy-ink:#3a342c; /* NORMAL TEXT colour */ --nmy-ink-strong:#241f19; /* HEADINGS / bold text (darkest) */ --nmy-muted:#9a8f7e; /* secondary / less important text */ --nmy-faint:#c3bbac; /* the faintest readable text (hints, placeholders) */ /* hairlines */ --nmy-hair:rgba(150,110,50,0.10); /* the thin dividing line between things */ --nmy-hair-soft:rgba(150,110,50,0.06); /* an even fainter dividing line */ --nmy-hover:rgba(150,110,50,0.045); /* the light wash that appears when the mouse is over something */ /* ***** THE MAIN HIGHLIGHT COLOUR (AMBER) -- recolours buttons/links/active EVERYWHERE ***** */ --nmy-amber:#e0a862; /* light amber -- soft highlights */ --nmy-amber-deep:#c9761a; /* >>> MAIN ACCENT <<< buttons, links, active (change this first) */ --nmy-amber-soft:#f0cd97; /* pale accent fill */ --nmy-amber-wash:#fbeed7; /* palest accent -- tinted backgrounds, focus glow */ --nmy-amber-press:#a85f12; /* the accent while a button is held down */ --nmy-amber-dark:#b06714; /* darker accent -- solid button hover */ --nmy-amber-darker:#935512; /* darkest accent -- solid button pressed */ /* whisper shadows (card-level; never heavy) */ /* geometry & type */ --nmy-r-sm:9px; /* small roundness -- chips, small controls */ --nmy-r:12px; /* <<< the DEFAULT roundness (cards, buttons, inputs) */ --nmy-r-lg:16px; /* large roundness -- panels */ --nmy-r-xl:20px; /* extra large -- big feature cards */ --nmy-font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Segoe UI",Inter,Roboto,sans-serif; /* the typeface for the whole system */ /* semantic (separate from the accent) */ --nmy-ok:#4a9e5c; /* GREEN -- success, done, healthy */ --nmy-warn:#d99a2b; /* ORANGE -- warning, needs attention */ --nmy-danger:#cf5b4e; /* RED -- error, failed, destructive */ --nmy-warn-bright:#facc15; /* attention yellow (badges) */ --nmy-warn-light:#fde047; /* the lighter half of that badge */ } /* ---- base ---- */ .nmy-theme{font-family:var(--nmy-font);color:var(--nmy-ink);-webkit-font-smoothing:antialiased;background:var(--nmy-ground);} /* ---- card ---- */ .nmy-card{background:var(--nmy-surface-grad);border:1px solid var(--nmy-hair-soft);border-radius:var(--nmy-r-lg);box-shadow:var(--nmy-sh-1);} .nmy-card-hover{transition:transform var(--nmy-dur-instant) ease,box-shadow var(--nmy-dur-fast) ease;} .nmy-card-hover:hover{transform:translateY(-1px);box-shadow:var(--nmy-sh-2);} /* ---- buttons ---- */ .nmy-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--nmy-sp-8);font-family:var(--nmy-font); font-size:var(--nmy-fs-body);font-weight:var(--nmy-fw-semi);letter-spacing:-.1px;border-radius:var(--nmy-r);cursor:pointer;border:1px solid transparent; padding:var(--nmy-sp-10) var(--nmy-sp-14);transition:background var(--nmy-dur-fast) ease,border-color var(--nmy-dur-instant) ease,transform var(--nmy-dur-instant) ease;} .nmy-btn:active{transform:scale(.99);} .nmy-btn-primary{color:var(--nmy-btn-primary-ink);border-color:var(--nmy-btn-primary-edge);background:var(--nmy-btn-primary-bg);box-shadow:var(--nmy-sh-1);} .nmy-btn-primary:hover{background:var(--nmy-btn-primary-bg-hover);border-color:var(--nmy-btn-primary-edge-hover);} .nmy-btn-ghost{color:var(--nmy-ink);background:transparent;} .nmy-btn-ghost:hover{background:var(--nmy-hover);} .nmy-btn-solid{color:var(--nmy-on-accent);background:linear-gradient(160deg,var(--nmy-amber),var(--nmy-amber-deep));} /* ---- pill / chip / badge ---- */ .nmy-pill{display:inline-flex;align-items:center;gap:var(--nmy-sp-6);font-size:var(--nmy-fs-tiny);font-weight:var(--nmy-fw-bold);letter-spacing:.6px;text-transform:uppercase; color:var(--nmy-muted);background:rgba(150,110,50,.08);border-radius:var(--nmy-r-pill);padding:var(--nmy-sp-2) var(--nmy-sp-8);} .nmy-count{font-size:var(--nmy-fs-small);font-weight:var(--nmy-fw-semi);color:var(--nmy-muted);background:rgba(150,110,50,.10);border-radius:var(--nmy-r-pill);padding:var(--nmy-sp-1) var(--nmy-sp-8);font-variant-numeric:tabular-nums;} /* ---- input ---- */ .nmy-input{width:100%;font-family:var(--nmy-font);font-size:var(--nmy-fs-body);color:var(--nmy-ink);background:var(--nmy-input-bg); border:1px solid var(--nmy-hair);border-radius:var(--nmy-r);padding:var(--nmy-sp-8) var(--nmy-sp-12);outline:none;transition:border-color var(--nmy-dur-instant),box-shadow var(--nmy-dur-instant),background var(--nmy-dur-instant);} .nmy-input::placeholder{color:var(--nmy-faint);} .nmy-input:focus{background:var(--nmy-input-bg-focus);border-color:var(--nmy-amber);box-shadow:var(--nmy-ring);} /* ---- icon tile ---- */ .nmy-tile{width:28px;height:28px;border-radius:var(--nmy-r-sm);display:grid;place-items:center;color:#a99d89; background:linear-gradient(180deg,#ffffff,#faf6ef);border:1px solid var(--nmy-hair-soft);} /* ---- labels / dividers ---- */ .nmy-label{font-size:var(--nmy-fs-tiny);font-weight:var(--nmy-fw-bold);color:var(--nmy-faint);letter-spacing:1.4px;text-transform:uppercase;} .nmy-divider{height:1px;background:var(--nmy-hair);border:0;margin:var(--nmy-sp-8) 0;} .nmy-dot{width:9px;height:9px;border-radius:var(--nmy-r-circle);background:linear-gradient(150deg,var(--nmy-amber-soft),var(--nmy-amber-deep));} /* ===================== SCREEN SIZES -- the only three ===================== The system used to switch layout at six different widths (400, 767, 768, 800, 900, 1024). Now there are THREE, and these are the only numbers any page may use: BP-SM 480px small phone BP-MD 768px tablet / phone landscape (written 767.98px in "max-width" rules so it does not overlap the 768px "min-width" rules by one pixel) BP-LG 1024px small laptop NOTE, because it surprises people: a CSS @media rule CANNOT read a token. The browser decides media queries before custom properties exist. So these numbers have to be typed out in each file -- what is centralised is the DECISION (only three widths, listed here), and nmy_theme_guard.py can be pointed at any stray fourth number. ======================================================================== */ /* ===================== DARK MODE (opt-in, not automatic) ================= Every colour in the system is a token, so dark mode is just a second set of values -- no page needs rewriting. It is deliberately NOT wired to the operating system's dark setting yet. Turning it on automatically would flip the interface for every user before anyone has looked at a single screen in dark. To try it: document.documentElement.setAttribute('data-theme','dark') ...or add data-theme="dark" to the tag. Remove it to go back. When you are happy with how it looks, the last step is to uncomment the @media block at the end of this section, and dark mode follows the device. ======================================================================== */ :root[data-theme="dark"]{ /* Enterprise CTO-Grade Monochrome Dark Gray Grounds & Surfaces */ --nmy-ground:#1c1e24; --nmy-surface:#252830; --nmy-surface-2:#2d313c; --nmy-page:#1c1e24; --nmy-panel:#252830; --nmy-elevated:#2e313b; /* --- Admin console, DARK. Apple-neutral greys, kept on purpose so the admin reads as a tool and not as the customer product. Values moved here from admin_v2/static/css/app.css (2026-08-10) so this file stays the single place appearance is decided -- nmy_theme_guard.py enforces that. --- */ --nmy-admin-canvas:#000000; --nmy-admin-surface:#1C1C1E; --nmy-admin-surface-2:#2C2C2E; --nmy-admin-ink-2:#98989D; --nmy-admin-ink-3:#636366; /* Typography: High-Readability Monochrome Slate Text */ --nmy-ink:#f3f4f6; --nmy-ink-strong:#ffffff; --nmy-muted:#9ca3af; --nmy-faint:#6b7280; --nmy-text:#f3f4f6; --nmy-heading:#ffffff; --nmy-text-muted:#9ca3af; /* Enterprise Maroon Accent Highlights */ --nmy-amber:#e11d48; --nmy-amber-deep:#800020; --nmy-amber-soft:#4c0519; --nmy-amber-wash:rgba(128,0,32,0.2); --nmy-amber-press:#9f1239; --nmy-link:#fb7185; --nmy-on-accent:#ffffff; /* Clean Monochrome Hairlines & Borders */ --nmy-hair:rgba(255,255,255,0.10); --nmy-hair-soft:rgba(255,255,255,0.05); --nmy-hover:rgba(255,255,255,0.08); /* Flipped Neutrals Scale */ --nmy-n-50:#252830; --nmy-n-100:#2d313c; --nmy-n-200:#374151; --nmy-n-300:#4b5563; --nmy-n-400:#6b7280; --nmy-n-500:#9ca3af; --nmy-n-600:#d1d5db; --nmy-n-700:#e5e7eb; --nmy-n-800:#f3f4f6; --nmy-n-900:#ffffff; /* Deep Enterprise Glass Shadows */ --nmy-el-1:0 1px 3px rgba(0,0,0,0.4); --nmy-el-2:0 4px 12px rgba(0,0,0,0.5); --nmy-el-3:0 8px 24px rgba(0,0,0,0.6); --nmy-el-4:0 16px 40px rgba(0,0,0,0.7); /* Inputs & Buttons */ --nmy-input-bg:#2d313c; --nmy-input-bg-focus:#374151; --nmy-btn-primary-ink:#ffffff; --nmy-btn-primary-bg:linear-gradient(135deg, #800020, #9f1239); --nmy-btn-primary-edge:rgba(225,29,72,0.3); --nmy-btn-primary-bg-hover:linear-gradient(135deg, #9f1239, #be123c); --nmy-btn-primary-edge-hover:rgba(225,29,72,0.5); /* Status Colors */ --nmy-ok:#34d399; --nmy-warn:#fbbf24; --nmy-danger:#f87171; --nmy-scrollbar-thumb:rgba(255,255,255,0.2); --nmy-scrollbar-thumb-hover:rgba(255,255,255,0.35); color-scheme:dark; } /* Comprehensive CTO Enterprise Scoped Overrides (STRICTLY for [data-theme="dark"]) */ [data-theme="dark"] body, [data-theme="dark"] html { background-color: #1c1e24 !important; color: #f3f4f6 !important; } [data-theme="dark"] header, [data-theme="dark"] .nav-glass, [data-theme="dark"] .nmy-sidebar, [data-theme="dark"] aside, [data-theme="dark"] nav { background-color: rgba(37,40,48,0.95) !important; border-color: rgba(255,255,255,0.1) !important; color: #f3f4f6 !important; } [data-theme="dark"] #main-content-area, [data-theme="dark"] main, [data-theme="dark"] section, [data-theme="dark"] .bg-slate-50\/50, [data-theme="dark"] .bg-gray-50\/50, [data-theme="dark"] .bg-gray-50\/30 { background-color: #1c1e24 !important; color: #f3f4f6 !important; } [data-theme="dark"] .bg-white, [data-theme="dark"] .bg-gray-50, [data-theme="dark"] .bg-slate-50, [data-theme="dark"] .bg-gray-100, [data-theme="dark"] .bg-slate-100, [data-theme="dark"] .ent-card { background-color: #252830 !important; border-color: rgba(255,255,255,0.1) !important; color: #f3f4f6 !important; } [data-theme="dark"] .bg-white\/90, [data-theme="dark"] .bg-white\/80, [data-theme="dark"] .bg-white\/70, [data-theme="dark"] .bg-slate-100\/80, [data-theme="dark"] .bg-rose-50 { background-color: rgba(45,49,60,0.88) !important; border-color: rgba(255,255,255,0.1) !important; color: #f3f4f6 !important; } [data-theme="dark"] .text-gray-900, [data-theme="dark"] .text-gray-800, [data-theme="dark"] .text-gray-700, [data-theme="dark"] .text-gray-600, [data-theme="dark"] .text-slate-900, [data-theme="dark"] .text-slate-800, [data-theme="dark"] .text-slate-700, [data-theme="dark"] .text-nmy-text { color: #e5e7eb !important; } [data-theme="dark"] .text-gray-500, [data-theme="dark"] .text-gray-400, [data-theme="dark"] .text-slate-500, [data-theme="dark"] .text-slate-400, [data-theme="dark"] .text-nmy-muted { color: #9ca3af !important; } [data-theme="dark"] .border-gray-200, [data-theme="dark"] .border-gray-100, [data-theme="dark"] .border-gray-300, [data-theme="dark"] .border-slate-200, [data-theme="dark"] .border-slate-300, [data-theme="dark"] .border-nmy-border, [data-theme="dark"] .border-black\/5, [data-theme="dark"] .border-rose-200\/80 { border-color: rgba(255,255,255,0.1) !important; } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] select, [data-theme="dark"] textarea { background-color: #2d313c !important; color: #f3f4f6 !important; border-color: rgba(255,255,255,0.15) !important; } [data-theme="dark"] table, [data-theme="dark"] thead, [data-theme="dark"] tbody, [data-theme="dark"] tr, [data-theme="dark"] td, [data-theme="dark"] th { border-color: rgba(255,255,255,0.08) !important; color: #e5e7eb !important; } [data-theme="dark"] thead.bg-gray-50 { background-color: #2d313c !important; } [data-theme="dark"] .nmy-side-navitem { color: #d1d5db !important; } [data-theme="dark"] .nmy-side-navitem:hover { background-color: rgba(255,255,255,0.08) !important; color: #ffffff !important; } [data-theme="dark"] .nmy-side-navitem.is-active { background-color: rgba(128,0,32,0.35) !important; color: #fb7185 !important; } [data-theme="dark"] .nmy-acct { background-color: #252830 !important; border-color: rgba(255,255,255,0.1) !important; color: #f3f4f6 !important; } [data-theme="dark"] .job-filter-pill { background-color: #2d313c !important; border-color: rgba(255,255,255,0.12) !important; color: #d1d5db !important; } [data-theme="dark"] .job-filter-pill.active { background-color: #800020 !important; border-color: #9f1239 !important; color: #ffffff !important; } /* When dark mode has been checked over, delete the comment markers below and it will follow the device setting automatically. @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ } } */ /* ===================== BUTTONS, STATES AND FOCUS ===================== ONE definition of what a button is made of. Every button in the system draws its size, colour and feel from these values -- change one here and every button follows. ==================================================================== */ :root{ /* the shape of a button */ --nmy-btn-px:var(--nmy-sp-14); /* left/right padding */ --nmy-btn-py:var(--nmy-sp-10); /* top/bottom padding */ --nmy-btn-fs:var(--nmy-fs-body); /* text size */ --nmy-btn-fw:var(--nmy-fw-semi); /* text weight */ --nmy-btn-r:var(--nmy-r); /* corner roundness */ /* the main (primary) button's colours */ --nmy-btn-primary-ink:#8a5a1e; /* text colour of the main button */ --nmy-btn-primary-bg:linear-gradient(135deg,#fdf6e9,#fbefdc); /* background of the main button */ --nmy-btn-primary-edge:rgba(224,138,30,.20); /* border of the main button */ --nmy-btn-primary-bg-hover:linear-gradient(135deg,#fdf2e0,#fae9cf); /* main button background when hovered */ --nmy-btn-primary-edge-hover:rgba(224,138,30,.30); /* main button border when hovered */ /* text colour that sits ON TOP of a solid amber fill */ --nmy-on-accent:#ffffff; /* text colour that sits on a solid amber fill */ /* input boxes */ --nmy-input-bg:rgba(255,255,255,.75); /* background inside a text box */ --nmy-input-bg-focus:#ffffff; /* background inside a text box while typing */ /* STATES -- what a control looks like in each situation */ --nmy-state-disabled-opacity:.45; /* switched off / not allowed */ --nmy-state-loading-opacity:.65; /* working, please wait */ --nmy-state-hover-lift:-1px; /* how far it rises on hover */ } /* DISABLED -- one rule for the whole system, so a switched-off control always looks and behaves the same, everywhere. */ [disabled],.is-disabled,button:disabled,input:disabled,select:disabled{ opacity:var(--nmy-state-disabled-opacity); cursor:not-allowed; } /* BUSY -- something is being submitted or loaded */ .is-loading{opacity:var(--nmy-state-loading-opacity);cursor:progress;} /* FOCUS -- the outline that shows which control the keyboard is on. This matters for anyone using Tab instead of a mouse, and it was missing almost everywhere before. :focus-visible shows it for keyboard users only, so mouse clicks do not leave rings behind. */ :where(a,button,input,select,textarea,[tabindex],[role="button"]):focus-visible{ outline:2px solid var(--nmy-amber-deep); outline-offset:2px; border-radius:var(--nmy-r-xs); } /* ===================== MOVEMENT -- how fast things animate ===================== Five speeds and three "feels". Buttons and hovers should feel instant; panels sliding in can take longer. Change --nmy-dur-base to make the whole interface feel snappier (lower) or calmer (higher). ============================================================================ */ :root{ --nmy-dur-instant:0.10s; /* button press -- must feel immediate */ --nmy-dur-fast:0.15s; /* hover, small colour change */ --nmy-dur-base:0.20s; /* <<< the normal speed */ --nmy-dur-slow:0.30s; /* a panel opening */ --nmy-dur-slower:0.40s; /* a big overlay */ /* the "feel" of the movement */ --nmy-ease:cubic-bezier(0.2,0.8,0.2,1); /* normal: quick then settle */ --nmy-ease-out:cubic-bezier(0.16,1,0.3,1); /* glides to a stop */ --nmy-ease-spring:cubic-bezier(0.68,-0.55,0.265,1.55); /* slight bounce */ } /* Some people get motion sickness from moving interfaces, and every operating system has a "reduce motion" setting for it. This honours that setting system-wide: animation stops, everything still works. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:0.01ms!important; animation-iteration-count:1!important; transition-duration:var(--nmy-dur-instant)!important; scroll-behavior:auto!important; } } /* ===================== CORNERS -- how round things are ===================== Six roundness steps plus "pill" and "circle". Change one and every corner of that size in the system follows. ========================================================================= */ :root{ --nmy-r-xs:4px; /* tiny chips, small tags */ --nmy-r-s:6px; /* small controls */ /* --nmy-r-sm (9px), --nmy-r (12px), --nmy-r-lg (16px), --nmy-r-xl (20px) are defined further down and keep their original values. */ --nmy-r-pill:999px; /* fully rounded ends -- badges, toggles */ --nmy-r-circle:50%; /* a perfect circle -- avatars, dots */ } /* ===================== STACKING ORDER -- what sits on top of what ========== Before this, the system used numbers up to 2147483001 (the largest a computer can hold) because each new panel just tried to out-number the last. Now there is ONE ladder. Higher number = closer to the viewer. To put something above something else, give it the NEXT NAME UP -- never a bigger number. That is what stops the "my dialog is hiding behind the panel" bug from ever coming back. ======================================================================== */ :root{ --nmy-z-base:1; /* normal page content */ --nmy-z-raised:2; /* slightly lifted */ --nmy-z-sticky:5; /* sticks while scrolling */ --nmy-z-header:10; /* page header bar */ --nmy-z-mask:15; /* dim layer behind a panel */ --nmy-z-panel:30; /* side panel */ --nmy-z-panel-top:35; /* a panel that must sit above another panel */ --nmy-z-float:40; /* floating toolbar */ --nmy-z-overlay:50; /* overlay above the canvas */ --nmy-z-tooltip:60; /* small hover hint */ --nmy-z-nav:90; /* admin navigation */ --nmy-z-dropdown:200; /* menu that opens downward */ --nmy-z-modal:900; /* modal window */ --nmy-z-modal-2:910; /* a modal opened on top of a modal */ --nmy-z-dialog:920; /* dialog box */ --nmy-z-dialog-top:930; /* fabric dialog -- sits above other dialogs */ --nmy-z-toast:950; /* the little message that pops up */ --nmy-z-busy:980; /* "please wait" overlay */ --nmy-z-busy-top:990; /* <<< nothing in the system goes above this */ } /* ===================== SPACING -- padding, margin and gaps ===================== All the empty space in the system comes from these steps. The NUMBER IN THE NAME IS THE PIXEL SIZE: --nmy-sp-12 is 12px. Nothing to decode. Small steps are close together because small spacing is structural (buttons, chips, rows); large steps jump because big gaps are page-level breathing room. Want the whole UI roomier? Raise the middle steps (sp-8, sp-12, sp-16) by 2px. Want it tighter? Lower them. Everything re-spaces together. ============================================================================= */ :root{ --nmy-sp-1:1px; /* hairline nudge */ --nmy-sp-2:2px; /* 2px */ --nmy-sp-4:4px; /* inside chips / tight rows */ --nmy-sp-6:6px; /* 6px */ --nmy-sp-8:8px; /* <<< the default gap between things */ --nmy-sp-10:10px; /* 10px */ --nmy-sp-12:12px; /* <<< the default padding inside a card or button */ --nmy-sp-14:14px; /* 14px -- default button padding */ --nmy-sp-16:16px; /* comfortable padding */ --nmy-sp-18:18px; /* 18px */ --nmy-sp-20:20px; /* 20px */ --nmy-sp-24:24px; /* section padding */ --nmy-sp-28:28px; /* 28px */ --nmy-sp-32:32px; /* 32px */ --nmy-sp-40:40px; /* 40px */ --nmy-sp-48:48px; /* big page-level gap */ --nmy-sp-64:64px; /* 64px -- large page section gap */ --nmy-sp-96:96px; /* hero breathing room */ } /* ===================== TEXT SIZE -- the type scale ===================== THE WHOLE SYSTEM USES ONLY THESE SIZES. No page may invent its own. Each step is named for its JOB, so you choose by meaning, not by number. Want ALL ordinary text a bit bigger? Change --nmy-fs-body from 13px to 14px -- every normal line of text in the system follows, in one edit. ====================================================================== */ :root{ --nmy-fs-micro:8px; /* corner chips / tiny tags */ --nmy-fs-tiny:10px; /* UPPERCASE little labels */ --nmy-fs-small:11px; /* captions, helper text, meta */ --nmy-fs-compact:12px; /* dense UI: toolbars, table cells */ --nmy-fs-body:13px; /* <<< DEFAULT body text (most of the system) */ --nmy-fs-body-lg:14px; /* roomier body text */ --nmy-fs-h4:16px; /* smallest heading */ --nmy-fs-h3:18px; /* medium heading */ --nmy-fs-h2:20px; /* large heading */ --nmy-fs-h1:24px; /* page title */ --nmy-fs-display:30px; /* big statement */ --nmy-fs-hero:36px; /* landing-page hero */ --nmy-fs-mega:48px; /* the one giant line */ /* WEIGHT -- how bold the text is. Only these four exist. */ --nmy-fw-normal:400; /* ordinary, unbolded text */ --nmy-fw-medium:500; /* slightly emphasised */ --nmy-fw-semi:600; /* buttons, headings */ --nmy-fw-bold:700; /* strong emphasis only */ /* LINE HEIGHT -- vertical breathing room between lines */ --nmy-lh-tight:1.25; /* headings */ --nmy-lh-base:1.45; /* body text */ --nmy-lh-loose:1.65; /* long paragraphs */ } /* Tailwind text-* classes are used in 322 places. They are a SECOND type scale, so route them through ours. The pixel values are identical to Tailwind's, so nothing moves on screen -- but now they obey the tokens above too. */ .text-xs{font-size:var(--nmy-fs-compact)!important;} .text-sm{font-size:var(--nmy-fs-body-lg)!important;} .text-base{font-size:var(--nmy-fs-h4)!important;} .text-lg{font-size:var(--nmy-fs-h3)!important;} .text-xl{font-size:var(--nmy-fs-h2)!important;} .text-2xl{font-size:var(--nmy-fs-h1)!important;} .text-3xl{font-size:var(--nmy-fs-display)!important;} .text-4xl{font-size:var(--nmy-fs-hero)!important;} .text-5xl{font-size:var(--nmy-fs-mega)!important;} /* ===================== ELEVATION -- how "lifted" something looks ===================== THE WHOLE SYSTEM HAS ONLY 5 LEVELS. Nothing may invent its own shadow. This is what makes the UI feel calm: fewer choices, not prettier colours. Want softer shadows everywhere? Lower the last number (the opacity) on el-2/3/4. ================================================================================== */ :root{ --nmy-el-0:none; /* FLAT -- no shadow at all */ --nmy-el-1:0 1px 2px rgba(150,110,50,.05); /* HAIRLINE -- barely there */ --nmy-el-2:0 1px 2px rgba(150,110,50,.06), 0 2px 6px rgba(150,110,50,.05); /* CARD -- a resting card or button */ --nmy-el-3:0 1px 3px rgba(150,110,50,.07), 0 6px 16px rgba(150,110,50,.08); /* RAISED -- hover, dropdown menu */ --nmy-el-4:0 2px 6px rgba(150,110,50,.08), 0 18px 44px rgba(150,110,50,.14); /* MODAL -- dialog box, popover */ /* older names kept so nothing breaks -- they now point at the levels above */ --nmy-sh-1:var(--nmy-el-1); /* old name for the hairline shadow -- kept so old code still works */ --nmy-sh-2:var(--nmy-el-3); /* old name for the raised shadow -- kept so old code still works */ /* RING -- the outline around the box you are typing in. NOT a shadow. */ --nmy-ring:0 0 0 3px var(--nmy-amber-wash); /* normal focus ring */ --nmy-ring-ok:0 0 0 3px rgba(74,158,92,.18); /* success / valid */ --nmy-ring-danger:0 0 0 3px rgba(207,91,78,.18); /* error / invalid */ /* GLOW -- a soft shine marking something ACTIVE or needing attention. NOT a shadow. */ --nmy-glow:0 0 10px rgba(201,118,26,.45); /* strong -- active item */ --nmy-glow-soft:0 0 8px rgba(201,118,26,.28); --nmy-glow-danger:0 0 8px rgba(207,91,78,.40); /* red shine -- something went wrong */ /* INSET -- shadow on the INSIDE, makes a thing look pressed in */ --nmy-inset:inset 0 2px 4px rgba(150,110,50,.06); /* shadow on the INSIDE -- makes a thing look pressed in */ } /* ===================== TAXONOMY -- every common part, one place ===================== Below: panel backgrounds, the grey scale, text colours and the scrollbar. Same rule as above -- change only the value after the ":", keep the name and ";". ================================================================================== */ :root{ /* backgrounds / panels */ --nmy-page:var(--nmy-ground); /* the page background (points at --nmy-ground) */ --nmy-panel:#fffdf9; /* SIDEBAR / side-panel background */ --nmy-elevated:#ffffff; --nmy-admin-surface-2:#FBFBFD; /* admin console, LIGHT -- cool near-white panel */ /* POPUP / dialog box background (fabric dialog, upload box) */ --nmy-canvas-surround:var(--nmy-n-100); /* the editor canvas area -- the SAME token as the padding around it, so the two read as one surface with no seam */ --nmy-tpd-panel-bg:var(--nmy-n-200); /* the Design Input Rows panel behind the job rows */ --nmy-sidebar-w:216px; /* how wide the dashboard sidebar starts */ /* THE GREY SCALE -- 50 = lightest ... 900 = darkest. Used for borders, boxes, faint text. Change these only if you want the whole system warmer/cooler. */ --nmy-n-50:#f8f6f1; /* lightest grey -- page tints */ --nmy-n-100:#f2efe8; /* very light grey -- hover fills */ --nmy-n-200:#e8e3d9; /* light grey -- borders */ --nmy-n-300:#d7d0c4; /* grey -- stronger borders */ --nmy-n-400:#b0a798; /* mid grey -- disabled text */ --nmy-n-500:#8d8475; /* grey -- secondary text */ --nmy-n-600:#6d6458; /* dark grey -- body text */ --nmy-n-700:#4f483e; /* darker grey -- strong text */ --nmy-n-800:#322d27; /* very dark grey -- headings */ --nmy-n-900:#1e1a15; /* near black -- darkest text */ /* TEXT (these just point at the colours defined at the top -- normally no need to touch) */ --nmy-text:var(--nmy-ink); /* ordinary text colour */ --nmy-heading:var(--nmy-ink-strong); /* heading text colour */ --nmy-text-muted:var(--nmy-muted); /* less important text */ --nmy-link:var(--nmy-amber-deep); /* clickable link colour */ /* SCROLLBAR -- change these and EVERY scrollbar in the system restyles */ --nmy-scrollbar-thumb:rgba(150,110,50,.28); /* the bar you drag */ --nmy-scrollbar-thumb-hover:rgba(150,110,50,.46); /* the scrollbar while you are dragging it */ --nmy-scrollbar-track:transparent; /* the empty groove behind it */ } /* GLOBAL scrollbar -- applies on every page that links this file */ *{scrollbar-width:thin;scrollbar-color:var(--nmy-scrollbar-thumb) var(--nmy-scrollbar-track);} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-track{background:var(--nmy-scrollbar-track);} ::-webkit-scrollbar-thumb{background:var(--nmy-scrollbar-thumb);border-radius:var(--nmy-r-s);border:2px solid transparent;background-clip:padding-box;} ::-webkit-scrollbar-thumb:hover{background:var(--nmy-scrollbar-thumb-hover);background-clip:padding-box;} /* ===================== GLOBAL-NEUTRALS — route every page's Tailwind neutrals/bg through tokens ===================== */ /* bg-white stays white (--nmy-elevated=#fff) but is now centralised: change the token -> all white surfaces change. */ .bg-white{background-color:var(--nmy-elevated)!important;} .bg-gray-50,.bg-slate-50{background-color:var(--nmy-n-50)!important;} .bg-gray-100,.bg-slate-100{background-color:var(--nmy-n-100)!important;} .bg-gray-200,.bg-slate-200{background-color:var(--nmy-n-200)!important;} .bg-gray-300,.bg-slate-300{background-color:var(--nmy-n-300)!important;} .bg-gray-400,.bg-slate-400{background-color:var(--nmy-n-400)!important;} /* The editor canvas surround is the one place that must stay colour-neutral: a warm backdrop makes fabric look warmer than it is. It is still a token -- change it here and the workspace changes -- just a far less tinted one. */ #main-canvas-container{background-color:var(--nmy-canvas-surround)!important;} /* The TPD "Design Input Rows" panel. It used to be a hard-coded cool grey written into the markup, which put it outside the theme; now it is a token like everything else. Warmer than before, and it follows the palette. */ .nmy-tpd-panel{ background:var(--nmy-tpd-panel-bg); border:1px solid var(--nmy-hair); box-shadow:var(--nmy-inset); } .text-gray-400,.text-slate-400{color:var(--nmy-n-400)!important;} .text-gray-500,.text-slate-500{color:var(--nmy-n-500)!important;} .text-gray-600,.text-slate-600{color:var(--nmy-n-600)!important;} .text-gray-700,.text-slate-700{color:var(--nmy-n-700)!important;} .text-gray-800,.text-slate-800,.text-gray-900,.text-slate-900{color:var(--nmy-n-800)!important;} .border-gray-100,.border-slate-100{border-color:var(--nmy-n-100)!important;} .border-gray-200,.border-slate-200{border-color:var(--nmy-n-200)!important;} .border-gray-300,.border-slate-300{border-color:var(--nmy-n-300)!important;} /* ===================== GLOBAL-INDIGO — indigo/purple/violet -> warm accent (one place) ===================== */ .bg-indigo-50,.bg-purple-50,.bg-violet-50{background-color:var(--nmy-amber-wash)!important;} .bg-indigo-100,.bg-purple-100,.bg-violet-100{background-color:#fbeed7!important;} .bg-indigo-500,.bg-indigo-600,.bg-indigo-700,.bg-purple-500,.bg-purple-600,.bg-violet-500,.bg-violet-600{background-color:var(--nmy-amber-deep)!important;} .text-indigo-400,.text-indigo-500,.text-indigo-600,.text-indigo-700,.text-purple-400,.text-purple-500,.text-purple-600,.text-violet-500,.text-violet-600{color:var(--nmy-amber-deep)!important;} .border-indigo-100,.border-purple-100,.border-violet-100{border-color:#fbeed7!important;} .border-indigo-200,.border-indigo-300,.border-indigo-400,.border-indigo-500,.border-purple-200,.border-purple-300,.border-violet-300{border-color:var(--nmy-amber-soft)!important;} .from-indigo-50,.from-indigo-500,.from-indigo-600,.from-purple-500,.from-purple-600,.from-violet-500{--tw-gradient-from:var(--nmy-amber)!important;} .via-indigo-500,.via-purple-500,.via-violet-500{--tw-gradient-via:var(--nmy-amber)!important;} .to-indigo-50,.to-indigo-500,.to-indigo-600,.to-indigo-700,.to-purple-500,.to-purple-600,.to-purple-700,.to-violet-600{--tw-gradient-to:var(--nmy-amber-deep)!important;} .ring-indigo-500,.ring-purple-500,.ring-violet-500{--tw-ring-color:var(--nmy-amber)!important;} .hover\:bg-indigo-500:hover,.hover\:bg-indigo-600:hover,.hover\:bg-indigo-700:hover,.hover\:bg-purple-600:hover{background-color:#a85f12!important;} .hover\:text-indigo-600:hover,.hover\:text-purple-600:hover{color:var(--nmy-amber-deep)!important;} .hover\:border-indigo-300:hover,.hover\:border-purple-300:hover{border-color:var(--nmy-amber-soft)!important;} /* ===================== CANVAS EDITING MARKERS ===================== The lines drawn ON TOP of the image inside the editor: crop box, grid, drag handles, warp mesh. These are deliberately BRIGHT so they stay visible over any fabric photo -- they are TOOLS, not decoration. Do NOT make them warm/amber or they vanish on cream-coloured fabric. Change only if a marker is genuinely hard to see. (JS reads these via nmy_theme_colors.js -- canvas cannot read CSS directly.) ================================================================= */ :root{ --nmy-crop-stroke:#007AFF; /* crop-box outline (BRIGHT on purpose -- a tool) */ --nmy-crop-stroke-2:#0a58c4; /* crop-box outline, darker second line */ --nmy-grid:#3b82f6; /* alignment grid lines */ --nmy-handle:#00a8ff; /* corner drag handles */ --nmy-mesh-h:#FF00FF; /* warp mesh -- horizontal lines */ --nmy-mesh-v:#00BFFF; /* warp mesh -- vertical lines */ } /* ===================== EVERY BUTTON READS THE BUTTON TOKENS ===================== The system grew 37 different button rules over time. Rather than rewrite them all (and risk breaking what works), they are gathered here and given their SHAPE from the tokens above. Colour and behaviour stay wherever they were. This is what makes "Button shape: Pill" in the Design panel actually change every button, instead of only the ones that happen to use .nmy-btn. ============================================================================= */ .nmy-btn, .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-sm, .btn-quiet, .btn-commit, .btn-preset, .btn2, .apple-pill-primary, .apple-tool-btn, .dp-btn, button.nmy-side-item, .nmy-acct-btn, .annotations-action-btn, .annotate-sidebar-thumb-button{ border-radius:var(--nmy-btn-r); font-size:var(--nmy-btn-fs); font-weight:var(--nmy-btn-fw); } /* padding only where the button is a normal box -- icon-only round buttons would be squashed by it, so they keep their own. */ .nmy-btn, .btn, .btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-quiet, .btn-commit, .apple-pill-primary, .dp-btn{ padding:var(--nmy-btn-py) var(--nmy-btn-px); } /* hover lift, one place */ .nmy-btn:hover, .btn:hover, .btn-primary:hover, .apple-pill-primary:hover{ transform:translateY(var(--nmy-state-hover-lift)); } /* ---- tokens that had no home until now ---- :where() gives these zero specificity, so a page that already styles its own links or headings continues to win. They only fill the gaps. */ :where(a){color:var(--nmy-link);} :where(h1,h2,h3,h4){line-height:var(--nmy-lh-tight);} :where(p,li){line-height:var(--nmy-lh-loose);}