/* ============================================================================= NETZERO AQUA — FARMER CONSOLE SKIN ============================================================================= Brings the logged-in console into line with the public site (index.html). Loaded LAST on the sixteen farmer console pages, after nz-controls.css, so ordinary rules here win on source order alone. WHERE IT DOES USE !important, AND WHY ------------------------------------- SEVEN declarations, in three places. Source order cannot beat !important, so where one is already in the way, matching it is the only tool left: 1. Hero button radius — ONE declaration. css/nz-console.css §2 pins `.nzc-hero .cy-btn, .nzc-hero button` to `border-radius: 10px !important` so a page stylesheet cannot reshape a control on the dark band. Scoped here to exactly that pair. 2. Button shadow and the focus ring — FOUR declarations (primary, primary:hover, harvest, :focus-visible). css/style.css (~line 346) carries a blanket `input[...], button, button[type="submit"] { box-shadow: none !important; }` from the original template. It is why the console has never had a raised button or a box-shadow focus ring. Verified by setting the declaration inline in the browser and watching it still compute to `none`. 3. Reduced motion — TWO declarations (transition-duration, animation-duration). A blanket zero inside `@media (prefers-reduced-motion: reduce)`. This is the one group NOT answering another !important: it has to beat every per-component transition in the console at once, and a reader who asked for no motion gets none. The alternative was restating each selector, which would drift the moment one was added. Anything added later should not need one. If it seems to, find the !important it is fighting and say so here. WHY A SEPARATE SHEET RATHER THAN EDITING nz-palette / nz-cards / nz-controls --------------------------------------------------------------------------- Those four are the shared console layer. Editing them in place would have been fewer files, but it makes the change impossible to scope and impossible to back out: one link tag per page adds this, one removes it. WHAT THIS FILE IS ALLOWED TO TOUCH ---------------------------------- Tokens on :root, and components INSIDE .main-workspace. The sidebar (, .nzs-*) sits outside .main-workspace and is deliberately left alone — it is the one piece of the console that already carries the brand, and restyling it would make every page look like it had two headers in different fonts. WHAT WAS DELIBERATELY NOT PORTED — read before "finishing the job" ------------------------------------------------------------------ 1. The marketing TYPE SCALE (--na-t-h1 reaches 4.25rem / 68px). A console h1 is 19-28px. Porting the scale would not make the console look like the home page, it would make it look broken. The FACES, weight, line height and tracking are ported; the sizes stay console-sized. 2. The marketing STATUS COLOURS (--na-ok #21925C, --na-watch #E0A32E, --na-risk #E4703A, --na-critical #DC4A45). na-system.css states these measure ~3.7:1 on the tinted page, which is fine for the gauges and badges the home page uses them in, and fails AA for small text — which is exactly what the console uses its status colours for (KPI notes, band labels, table cells). The console's darker set is kept. Porting them would have been a visible accessibility regression. 3. css/na-motion.css and the GSAP bundle. That file's own header says: "Nothing here may appear in the logged-in shells (nz-, shell-)." It also needs gsap + ScrollTrigger + SplitText + DrawSVGPlugin on every page. The console already has a staggered scroll-reveal of its own in js/nz-console.js ([data-reveal] / .reveal-in); section 6 below retimes it to the home page's curve and duration instead, which is the same motion language without the weight or the rule-break. ========================================================================== */ /* ============================================================================= 1 — TOKENS ----------------------------------------------------------------------------- Only the ones that actually differ. The brand colours are already identical in both systems: na-system.css was sampled from the same lockup as nz-palette.css, so navy #00243C, blue #004AF7, lime #3BD304, page #F4F7FC, ink #0F172A and line #E5EAF2 need no restating here. ========================================================================== */ :root { /* ---- Faces. The single largest difference between the two systems. ---- */ --nz-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --nz-font-display: 'Space Grotesk', 'Inter', system-ui, -apple-system, sans-serif; --nz-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* ---- Elevation. The home page's shadows are wider and softer: a larger blur at a lower alpha. Side by side the console's read as a harder drop shadow and the home page's as the card being lifted. ---- */ --nz-shadow-sm: 0 1px 2px rgba(0, 36, 60, 0.06); --nz-shadow: 0 6px 20px rgba(0, 36, 60, 0.08); --nz-shadow-lg: 0 18px 48px rgba(0, 36, 60, 0.14); --nz-shadow-xl: 0 32px 80px rgba(0, 36, 60, 0.22); /* The home page's focus/hover glow, which the console had no equivalent of. */ --nz-glow: 0 0 0 1px rgba(76, 130, 255, 0.30), 0 20px 60px rgba(76, 130, 255, 0.10); /* ---- Motion. Same curve already (both are cubic-bezier(.22,.61,.36,1)), slightly longer durations, plus the --slow step the console lacked. ---- */ --nz-fast: 0.16s; --nz-normal: 0.32s; --nz-slow: 0.6s; /* ---- One contrast fix, carried across deliberately. The console's --nz-text-3 is #64748B, which measures 4.43:1 on the tinted page ground #F4F7FC and FAILS AA for the small print that uses it — form hints, table headers, KPI notes. na-system.css hit the same problem and resolved it two steps darker. ---- */ --nz-text-3: #5D6B80; /* ---- The larger corner, for the few places the console goes bigger than a card. Cards are already 16px in both systems (nz-cards.css §4). ---- */ --nz-radius-lg: 24px; } @media (prefers-reduced-motion: reduce) { :root { --nz-fast: 0s; --nz-normal: 0s; --nz-slow: 0s; } } /* ============================================================================= 2 — TYPOGRAPHY ----------------------------------------------------------------------------- Space Grotesk for anything that behaves like a heading, Inter for everything else. The console sets most of its type through the --nz-font token already, so the token swap in section 1 does most of the work; what is left is the display face and the heading treatment, which the console never had. ========================================================================== */ .main-workspace h1, .main-workspace h2, .main-workspace h3, .main-workspace h4 { font-family: var(--nz-font-display); font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; /* Stops a two-line card heading breaking after one word. */ text-wrap: balance; } /* The console's small uppercase labels — card headings, table headers, KPI labels — are a different job from a heading and stay on the body face. Space Grotesk at 10.5px with 0.09em tracking is unreadable. */ .main-workspace .cy-panel__head h2, .main-workspace .cy-log h3, .main-workspace .pd-card h3, .main-workspace .fd-card h3, .main-workspace .fn-card h3 { font-family: var(--nz-font); letter-spacing: 0.08em; } /* Figures. Inter's tabular numerals are what keep a column of KPI values from shifting as the digits change; Space Grotesk is set on the big ones because that is what the home page's metric figures use. */ .main-workspace .fd-kpi__value, .main-workspace .pd-kpi__value, .main-workspace .cy-kpi__value, .main-workspace .fn-kpi__value, .main-workspace .kpi-card__value { font-family: var(--nz-font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; } /* Anything that is a reading rather than prose: log tables, coordinates, survey numbers. The home page gives these IBM Plex Mono. */ .main-workspace .cy-table .cy-num, .main-workspace code, .main-workspace .nz-mono { font-family: var(--nz-font-mono); font-size: 0.95em; } /* ============================================================================= 3 — THE EYEBROW ----------------------------------------------------------------------------- The console hero already has .nzc-hero__eyebrow. The home page's version is the same idea with a 26px rule drawn before it and wider tracking, and it is the most recognisable single detail of the public pages. ========================================================================== */ .main-workspace .nzc-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6em; font-family: var(--nz-font); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; } .main-workspace .nzc-hero__eyebrow::before { content: ""; width: 26px; height: 2px; /* The hero is a dark ground, so this is the lifted blue, not the deep one — nz-palette.css's note on --nz-blue-lift-min applies here. */ background: var(--nz-blue-lift-min, #4C82FF); flex: none; } /* ============================================================================= 4 — CARDS ----------------------------------------------------------------------------- Same selector list nz-cards.css §4 uses, so the two files agree about what a card is. Corners are already 16px there; this adds the home page's elevation and its hover. ========================================================================== */ .main-workspace .fd-card, .main-workspace .fd-area, .main-workspace .fm-card, .main-workspace .fm-farm, .main-workspace .pd-card, .main-workspace .fn-card, .main-workspace .srs-card, .main-workspace .dash-card, .main-workspace .biz-card, .main-workspace .co-card, .main-workspace .mf-row, .main-workspace .settings-card, .main-workspace .org-card, .main-workspace .members-card, .main-workspace .cy-panel, .main-workspace .cy-detail { box-shadow: var(--nz-shadow-sm); transition: box-shadow var(--nz-normal) var(--nz-ease), transform var(--nz-normal) var(--nz-ease); } .main-workspace .fd-card:hover, .main-workspace .fm-card:hover, .main-workspace .fm-farm:hover, .main-workspace .pd-card:hover, .main-workspace .fn-card:hover, .main-workspace .srs-card:hover, .main-workspace .dash-card:hover, .main-workspace .biz-card:hover, .main-workspace .co-card:hover { box-shadow: var(--nz-shadow); } /* A figure tile is small and there are six in a row; lifting each one on hover turns a KPI strip into a xylophone. Shadow only. */ .main-workspace .fd-kpi, .main-workspace .pd-kpi, .main-workspace .cy-kpi, .main-workspace .fn-kpi, .main-workspace .kpi-card, .main-workspace .mf-stat, .main-workspace .srs-kpi { transition: box-shadow var(--nz-fast) var(--nz-ease); } .main-workspace .fd-kpi:hover, .main-workspace .pd-kpi:hover, .main-workspace .cy-kpi:hover, .main-workspace .fn-kpi:hover, .main-workspace .kpi-card:hover { box-shadow: var(--nz-shadow-sm); } /* ============================================================================= 5 — BUTTONS ----------------------------------------------------------------------------- The home page's button is a pill with a 1px press and, on the primary, a blue shadow the same hue as the fill. The console's are 10px rectangles. This is the second most visible difference after the type. The list is nz-controls.css's own :is() button group verbatim, plus the page prefixes that predate it (.st-/.tk-/.nt-/.co-/.ga-/.nz-), so the two files agree about what a button is. Written out rather than as a bare [class*="-btn"], which would also catch the sidebar and third-party markup. .fm-seg__btn is deliberately absent: it is a SEGMENTED control, where the buttons are joined into one track. Rounding each segment to a pill breaks the thing that makes a segmented control readable as one control. ========================================================================== */ .main-workspace :is( .cy-btn, .fd-btn, .fd-btn-sm, .fd-greet__cta, .fd-ponds__more, .fd-pond__go, .fm-btn, .fm-ponds__more, .pd-btn, .pd-cta, .pd-pond__go, .srs-btn, .fn-btn, .st-btn, .tk-btn, .nt-btn, .co-btn, .ga-btn, .nz-btn) { font-family: var(--nz-font); font-weight: 600; letter-spacing: -0.005em; border-radius: var(--nz-radius-pill); transition: background var(--nz-fast) var(--nz-ease), border-color var(--nz-fast) var(--nz-ease), box-shadow var(--nz-fast) var(--nz-ease), transform var(--nz-fast) var(--nz-ease); } .main-workspace :is( .cy-btn, .fd-btn, .fd-btn-sm, .fd-greet__cta, .fd-ponds__more, .fd-pond__go, .fm-btn, .fm-ponds__more, .pd-btn, .pd-cta, .pd-pond__go, .srs-btn, .fn-btn, .st-btn, .tk-btn, .nt-btn, .co-btn, .ga-btn, .nz-btn):active { transform: translateY(1px); } /* The hero's own buttons. css/nz-console.css §2 pins `.nzc-hero .cy-btn, .nzc-hero button` to `border-radius: 10px !important`. That predates this file and is not wrong on its own — it exists so a page stylesheet cannot reshape a control on the dark band. Answering an !important is the one case where another one is the correct tool, so this is scoped to exactly that pair and nothing else. */ .main-workspace .nzc-hero .cy-btn, .main-workspace .nzc-hero button { border-radius: var(--nz-radius-pill) !important; } /* The filled button carries a shadow in its own hue, which is what makes the home page's primary read as raised rather than painted on. !important throughout this block, for one reason: css/style.css (the original template reset, line ~346) sets input[...], button, button[type="submit"] { box-shadow: none !important; } so NO