/* ========================================================================= Zeal UI 2.0 β€” control styles (RCL: _content/Zeal.Maui.App.Ui/css/zt-ui.css) Clean, variable-driven, responsive. Palette mirrors the legacy _colors.scss but centralized here so colours live in ONE place. The "Font Awesome 6 Pro" @font-face is provided by the host (site.css). ========================================================================= */ /* ========================================================================= πŸ“ THE BREAKPOINT LADDER β€” THE ONLY WIDTHS THIS APP IS ALLOWED TO USE. ========================================================================= ⚠️ CSS CANNOT PUT A VARIABLE IN A MEDIA QUERY (no `@media (max-width: var(…))`, and @custom-media has never shipped), and this project has no preprocessor. So this comment IS the single source of truth. Copy a number from here; never invent one. A new width in this file is a bug even if it looks fine. ─ THE FOUR BANDS ──────────────────────────────────────────────────────── COMPACT ≀ 599px every phone in portrait (360–430), a folded cover screen MEDIUM 600–839px ⭐ FOLDABLES UNFOLDED + small tablets portrait + phone landscape EXPANDED 840–1199px tablets landscape, small laptops LARGE β‰₯ 1200px desktops Written as: @media (max-width: 599px) Β· (max-width: 839px) Β· (max-width: 1199px) (or min-width: 600 / 840 / 1200 going up). ─ WHY THESE NUMBERS AND NOT 1024/720/640 ─────────────────────────────── They are Material Design 3's window size classes β€” the one modern ladder authored by a vendor that actually SHIPS foldables, so the bands are drawn where real devices sit rather than where CRT resolutions used to. Using a published standard also means "why 840?" has an answer that isn't taste. ⭐ THE MEDIUM BAND IS THE WHOLE POINT, AND IT IS WHY VINCE'S FOLD LOOKED WRONG. A Galaxy Z Fold 7 main screen measures 750 x 832 β€” so 750 wide unfolded, and 832 wide rotated. BOTH land in MEDIUM, which means the device never changes layout class when it is rotated. Under the old single 640px line it was above the cutoff and got the full DESKTOP treatment on an 8-inch phone: "not quite desktop, not quite mobile" (Vince, 2026-08-16). Medium is not a gap between phone and desktop β€” it is a designed state: a comfortable one-to-two column layout with finger-sized targets. ─ THE SECOND AXIS: WIDTH IS NOT HORSEPOWER ────────────────────────────── β›” NEVER use a width query to decide COST. Ask capability separately: (pointer: coarse) touch β€” tap targets, and what the GPU can afford (hover: hover) a real pointer β€” hover-only affordances are allowed An unfolded foldable is MEDIUM *and* coarse; a 750px-wide desktop window is MEDIUM *and* fine. Same room, different budget. Conflating the two is what gave a phone the four-band wave backdrop. See CLAUDE.md Β§3.7a. ─ PREFER A CONTAINER QUERY WHEN THE ANSWER IS "HOW BIG IS MY BOX" ─────── A card that stacks when IT is narrow should use `container-type` + `@container` (as .zt-busy-overlay already does), not a viewport width. Viewport queries are for PAGE-level structure only. ========================================================================= */ /* ---- SELF-HOSTED UI FONT β€” Inter (variable). Ships from this RCL so consuming apps get it automatically; no per-app font include. Inter is built for crisp small UI text and renders identically across every OS/browser/device. ------- */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; /* variable: full weight range in one file */ font-display: swap; src: url("../fonts/inter/inter-latin-wght-normal.woff2") format("woff2"); } /* GOTHAM β€” the legacy face, kept and now registered PROPERLY. The legacy Zeal.Razor.Ui reboot.scss exposed ONE face, "Gotham Light", and let the browser SYNTHESISE bold. ⚠️ THAT SYNTHESIS IS WHY THE TEXT LOOKED FUZZY (Vince, 2026-08-06: "the font looks just really fuzzy and weird"). A faux bold is the LIGHT outline smeared sideways by the rasteriser β€” it has no hinting, so every bold label, every value and every button on the site was a blurred approximation of a font that was never drawn. Gotham is also a DISPLAY face (WOFF 1.0, no hinting for small sizes), which is the rest of it. The real Book / Medium / Bold files were sitting unused next to it, so they are declared here: whichever face you ask for now EXISTS and nothing is synthesised. */ @font-face { font-family: "Gotham"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/gotham/gotham-light.woff") format("woff"); } @font-face { font-family: "Gotham"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/gotham/gotham-book.woff") format("woff"); } @font-face { font-family: "Gotham"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/gotham/gotham-medium.woff") format("woff"); } @font-face { font-family: "Gotham"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/gotham/gotham-bold.woff") format("woff"); } :root { /* ⚠️ INTER IS THE UI FACE (2026-08-06). ONE LINE CHANGES IT BACK β€” put "Gotham" first and Inter second. Inter is self-hosted above as a VARIABLE WOFF2 carrying every weight from 100 to 900, and it was drawn for exactly this job: small interface text, hinted, on any OS. Nothing is synthesised, so a bold label is a real bold and renders sharp. Gotham stays loaded and stays the brand display face β€” reach for it on a marketing headline, not on a 13px form label. */ --zt-font: "Inter", "Gotham", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --zt-item-gap: 3px; /* GLOBAL tight vertical gap between stacked ZtContentItems β€” one source of truth. */ --zeal-green-header: #47795a; /* softer/muted green for banded card HEADERS β€” distinct from the vivid button green. */ --zeal-white: #ffffff; --zeal-black: #333333; /* SOFTENED from #000 β€” nothing on the site is pure black (Vince: "not super super black") */ --zeal-grey: #4c4c4c; --zeal-medium-grey: #666666; --zeal-dark-grey: #333333; /* SOFTENED from #333 β€” the dominant body/title text, toned down site-wide */ --zeal-modal-header: #444444; /* THE DEFAULT MODAL HEADER BAND (Vince, 2026-08-12) β€” one global knob */ --zeal-header-grey: #777777; --zeal-light-grey: #bbbbbb; --zeal-red: #971b1e; --zeal-dark-red: #6b1315; --zeal-pink: #d50184; --zeal-orange: #f16521; --zeal-gold: #ffcb04; --zeal-green: #2d602d; /* MODERNISED 2026-08-02 (Vince). Was #213f99 β€” a heavy 1990s navy that read as dated next to everything else on the page. This is lighter and cleaner while still clearing 4.5:1 against white, so it stays safe both as a button background with white text AND as link text on a white page. */ --zeal-blue: #2563eb; --zeal-tiffany: #08bab5; --zeal-purple: #3a1856; --zeal-brown: #49231c; --zeal-silver: #9a9a9a; --zeal-bronze: #8b4513; /* ── THE LIGHT TONE SET β€” GREEN Β· YELLOW Β· RED Β· BLUE Β· GREY ───────────────────────────────────────── THE FIVE SURFACE WASHES, and the only ones. Every tinted panel, band, card and row in the app resolves to one of these; nothing else may introduce a wash of its own. ⚠️ EVERY VALUE IS READ OFF THE LEGACY'S COMPILED OUTPUT β€” Zeal.Razor.Ui/wwwroot/css/zeal/zeal-ui.css, the .zt-action-item-{green,warning,error,blue} rules that SASS produced from $zealLightGreen / $zealLightGold / $zealLightRed / $zealLightBlue in partials/_colors.scss. NOT computed here, and NOT chosen. Hand-doing the lighten() arithmetic already put the blue a point off per channel β€” near enough to look right, and still not the colour the rest of the product uses. HOW TO ADD ONE: don't. Take the value from the legacy palette. If it genuinely has no equivalent, ask Vince β€” the answer is a NAMED entry here, never a hex at the call site. TRANSPARENCY STEP (Vince, 2026-08-04): even the legacy values glared behind content. Each is now HALF its tint β€” half the distance from white β€” so all five move together and stay one family. ONE RULE, not five separate picks. Legacy value in each comment; if these ever need another step, halve again FROM THE LEGACY rather than nudging one colour on its own. ⚠️ THE DIRECTION IS TOWARD WHITE. "More opaque" = more solid colour = MORE glare, which is the wrong way. These are a background behind the work; they should register as a tint and never as a colour you look at. DIALLED IN BY EYE, ONE COLOUR AT A TIME β€” do not "regularise" these onto a shared formula. Every attempt to derive all five from one rule produced a set where some read louder than others, because these five hues do not carry the same perceived weight per unit of tint. YELLOW, BLUE and GREY are SIGNED OFF (Vince, 2026-08-04) β€” leave them exactly as they are. GREEN NEEDS MORE TINT THAN THE OTHER FOUR TO READ AT ALL, and that is not a mistake to "correct". The eye is most sensitive to green, so a green made by holding G near 255 and dropping R and B barely lowers overall lightness β€” the surface stays near 99% and renders as WHITE however much channel separation it has. Blue gets away with a far smaller delta precisely because dropping R and G DOES lower luminance. So green is cut deeper on all three channels. Its hex distance looks bigger than the others; on screen it is not. Judge these by eye against the /testform swatches, never by comparing hex distances. ⚠️⚠️ NEVER LET PROSE LAND OUTSIDE A COMMENT IN THIS BLOCK. Twice, an edit here closed the comment early and left raw text sitting in :root. CSS then parses that text as a declaration and swallows EVERYTHING up to the next semicolon β€” which took --zeal-light-green with it. The variable vanished, var() went undefined, and `background: var(--zt-happy-bg)` computed to rgba(0,0,0,0): a WHITE card, while the border (a literal hex) kept working. It cost hours, because grepping the file still finds the text β€” only the browser knows it was discarded. After ANY edit in here, verify the variable resolves, not that the text is present. */ --zeal-light-green: #fcfefc; /* (3,1,3) off white β€” see the note above */ --zeal-light-yellow: #fffef9; /* βœ… SIGNED OFF β€” do not change */ --zeal-light-red: #fdf8f8; /* bracketed: #fdf6f6 too solid Β· #fefafa too light */ --zeal-light-blue: #fcfcfe; /* βœ… SIGNED OFF β€” do not change */ /* ── THE WAVE-EDITOR SECTION PAIR (Vince, 2026-08-19) ──────────────────────────────────────────────── "We want the header to be that nice, light neutral blue, and then the body to be a different color than white, but not the neutral blue. A much much lighter neutral blue." TWO NAMED SHADES, because the tone rule above demands it: a tone must resolve to a NAMED colour and a named colour must come from the palette, so a shade the palette lacks gets ADDED with a name rather than typed into a rule. Both are the same hue as --zeal-blue (#2563eb), just far off in lightness: Β· BAND is the header β€” visible blue, the tint the neutral section bands already read as. Β· WASH is the body β€” barely there, but decidedly not white beside the band. ⚠️ --zeal-light-blue is NOT either of them. It is the near-white section FILL and is signed off; these sit alongside it rather than replacing it. */ /* ⚠️ TUNED TWICE, AND THE SECOND LESSON IS THE ONE THAT STICKS (Vince, 2026-08-19). Round one read as purple β€” red was riding too close to green (#e9effb, Gβˆ’R of 6 renders lavender), so the spread was widened. Round two fixed the hue but was "more solid… they need to be more see through, more faded, like the neutral green header." The house tones are all NEAR-WHITE WASHES (the light palette above lives in the #fa–#fc range), and a band in the #e6 range is a paint chip next to them however correct its hue. So: same Gβˆ’R spread that killed the purple, pulled way up toward white to match the family the rest of the app's tinted surfaces belong to. */ --zeal-blue-band: #f0f6fd; /* the header band β€” faded, one clear step below white */ --zeal-blue-wash: #fafcfe; /* the body wash β€” a whisper off white, still bluer than the band is light */ --zeal-light-neutral: #fcfcfc; /* βœ… SIGNED OFF β€” do not change */ --zeal-light-purple: #fdfcfe; /* the near-white that goes with --zeal-purple β€” see --zt-select-bg */ /* KEPT AS AN ALIAS so existing `--zeal-light-gold` references resolve to the one yellow rather than drifting into a second one. New code should say yellow. */ --zeal-light-gold: var(--zeal-light-yellow); /* ── THE DARK TONE SET β€” the ICON colour for each tone ─────────────────────────────────────────────── A toned card's title icon takes the DARK version of that tone, so the icon names the state at a glance while the background stays a wash. Read off the legacy's compiled zeal-ui.css (.zt-action-item-* `color`, which SASS produced from $zealDarkGreen / $zealDarkGold / $zealDarkRed / $zealDarkBlue). Same rule as the light set: NEVER a hex at the call site β€” add a name here. */ --zeal-dark-green: #152c15; /* $zealDarkGreen */ --zeal-dark-gold: #5b4800; /* $zealDarkGold */ --zeal-dark-blue: #11204d; /* $zealDarkBlue */ /* dark red + dark grey are already named above and are reused rather than declared twice. */ /* ── THE STACK RHYTHM ───────────────────────────────────────────────────────────────────────────────── ONE spacing value for a vertical list of item cards inside a section body β€” the gap BETWEEN items, and deliberately the SAME figure as the flush action-card body's own padding (.zt-action-card-flush .zt-action-card-body). That equality is the whole point: the space above the first card, between every pair, and below the last are then identical, so a section reads as an evenly spaced stack instead of three different gaps stacked on each other. USE THIS, never a fresh literal, whenever a section stacks cards β€” that is what keeps Family, Programs and everything after them on one rhythm. */ --zt-stack-gap: 0.85rem; /* ── THE PAGE GUTTER ───────────────────────────────────────────────────────────────────────────────── THE SPACE BETWEEN A PAGE SECTION AND THE SCREEN EDGE β€” the one value that makes every section look like it is FLOATING over the Starfield rather than covering it (Vince, 2026-08-07: "this is a global change, I don't wanna have to adjust this page to page to page"). ⚠️ IT IS PADDING ON THE PAGE CONTAINER (.zt-shell-page), NOT A MARGIN ON EACH CARD, and that distinction is the whole fix. The per-card version had to name every section class β€” and there are dozens (zt-programs-section, zt-cc-section, zt-member-search-card, zt-user-results …), so the ones nobody remembered to list stayed full-bleed while their neighbours floated. That is exactly the "program memberships aren't the same width as accounts" symptom. On the container it is ONE declaration and every top-level section inherits it for free, forever, including sections that do not exist yet. Nested cards are untouched, because they sit inside their section's own padding. TO OPT OUT (a header that must bleed edge to edge), pull the element back out with `margin-inline: calc(var(--zt-page-gutter) * -1); width: auto;` β€” see .zt-profile-header. */ --zt-page-gutter: 16px; /* ── THE FOUR STATE TONES ──────────────────────────────────────────────────────────────────────────── happy green Β· warning gold Β· error red Β· neutral blue. These are SEMANTIC NAMES POINTING AT THE PALETTE ABOVE β€” they are not colours of their own. ⚠️ NEVER PUT A HEX HERE. These carried four hand-picked near-whites, which is how the app ended up with a happy card and a happy header band that were each a shade off one another: two things claiming to be "the happy colour" while naming different values. A tone must resolve to a NAMED colour, and a named colour must come from the palette. If a tone needs a shade the palette does not have, the palette gets the shade β€” with a name β€” and the tone points at it. (Vince, 2026-08-04: "we just can't keep making up colors.") */ --zt-happy-bg: var(--zeal-light-green); --zt-happy-bd: #e6f1e9; --zt-warn-bg: var(--zeal-light-yellow); --zt-warn-bd: #f6f0db; --zt-neutral-bg: var(--zeal-light-blue); --zt-neutral-bd: #e2e9f5; --zt-error-bg: var(--zeal-light-red); --zt-error-bd: #f2e0e0; /* GREY β€” the fifth tone: no state at all. The default flush band, and anything that is simply a panel. */ --zt-plain-bg: var(--zeal-light-neutral); /* PURPLE β€” the SIXTH tone, and the only one that is not a status: "this is the SELECTED / current one". The legacy production app colours the passkey enrolled on the device you are sitting at purple, and that is a different idea from good / warning / error β€” which is why it gets its own name rather than borrowing one. Same pale-wash + stronger-border construction as the other five. */ --zt-select-bg: var(--zeal-light-purple); --zt-select-bd: #e7e0ef; /* THE GOLD ACCENT that goes WITH the warn tone. --zeal-gold (#ffcb04) is the BUTTON gold: on a near-white panel it all but disappears, so anything that has to READ as gold on a pale surface β€” a warn icon, a warn accent tab β€” uses this deeper shade. Same value the .ztdc-gold icons already use. */ --zt-gold-accent: #d4a017; /* ── THE HOVER GLOW, ONE PER TONE ──────────────────────────────────────────────────────────────────── THE MOUSE-OVER LIFT EVERY ROW-CARD SHARES (Vince, 2026-08-16, on the Default-template row: "the only difference is it doesn't have the mouse over effect that some of the other controls have. So if we could add the mouse over … it would be absolutely perfect"). IT IS THE ROW'S OWN ACCENT AT LOW ALPHA, never a generic black shadow: a grey haze under a green row reads as dirt, and the whole point of the tone system is that a row's state is the SAME colour wherever it shows up. Alphas are dialled by eye per hue for equal weight β€” gold needs more because it is the lightest. ⚠️ APPLIED ONLY INSIDE `@media (hover: hover)` (charter rule 7a). A touch device has no hover to leave, so an unguarded :hover STICKS to the last row tapped and reads as a selection that cannot be cleared. */ --zt-happy-glow: rgba(45, 96, 45, 0.18); --zt-warn-glow: rgba(212, 160, 23, 0.24); --zt-neutral-glow: rgba(37, 99, 235, 0.18); --zt-error-glow: rgba(151, 27, 30, 0.18); --zt-plain-glow: rgba(0, 0, 0, 0.13); --zt-select-glow: rgba(58, 24, 86, 0.20); /* THE LEADING-ICON DISC β€” the soft circle behind a card's big left icon (Vince, 2026-08-05: the bare glyphs looked "naked"). A TRANSLUCENT BLACK rather than a named grey ON PURPOSE: these cards sit on tinted fills (happy green, warn gold, error red), and a flat #eee disc goes muddy on every one of them. 6% black reads as the same soft light-grey recess over all five tones and over plain white. */ --zt-icon-disc: rgba(0, 0, 0, 0.06); /* THE COMPACT BUTTON HEIGHT β€” ZtIconButton and ZtSmallButton BOTH size off this, because they are the standard pair in an action row (a help icon beside a labelled action) and must match exactly. Change it here and both move together; never hard-code a height on either. */ --zt-btn-compact-h: 30px; --zeal-field-max: 350px; --zeal-radius: 5px; } /* PHONES GET A SLIGHTLY TIGHTER GUTTER than a desktop β€” enough that the Starfield clearly runs past both edges and the sections read as floating, without spending screen width a phone cannot spare. It is still a REAL gap: 12px on a 375px screen is a bit over 3% a side, which is what Vince asked for after 1% (~4px) turned out to be too subtle to read as floating at all. */ @media (max-width: 599px) { :root { --zt-page-gutter: 12px; } } /* every Zeal UI component renders in the self-hosted UI font (modals/toasts live in the top layer, so set it explicitly rather than relying on inheritance) */ .zt-input-container, .zt-input-checkbox, .ztbtn, dialog.zt-modal, .zt-toast { font-family: var(--zt-font); /* NO -webkit-font-smoothing: on Windows it disables ClearType subpixel AA and renders FUZZIER (worst on white-on-dark). Let each OS use its native rendering β€” that's what keeps small text crisp. */ } /* ---- ICON GLYPHS + FIXED WIDTH (fa-fw) --------------------------------- */ .fi { font-family: "Font Awesome 6 Pro"; font-weight: 900; font-style: normal; line-height: 1; display: inline-block; width: 1.25em; /* fa-fw: uniform width so icons align */ text-align: center; } .fi-circle-question::before { content: "\f059"; } .fi-circle-xmark::before { content: "\f057"; } /* MODAL / TOAST CLOSE */ .fi-bug::before { content: "\f188"; } /* ERROR TOAST */ .fi-bell::before { content: "\f0f3"; } /* NOTIFICATIONS / TOASTS */ .fi-circle-notch::before { content: "\f1ce"; } /* BUSY SPINNER (used with .fi-spin) */ .fi-info::before { content: "\f05a"; } /* BUSY/LOADING SPIN β€” add .fi-spin to any .fi to rotate it (revert by removing the class). */ .fi-spin { animation: zt-fi-spin 0.8s linear infinite; transform-origin: center center; } @keyframes zt-fi-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .fi-spin { animation: none; } } .fi-atom::before { content: "\f5d2"; } .fi-check-circle::before { content: "\f058"; } .fi-calendar::before { content: "\f133"; } .fi-clock::before { content: "\f017"; } .fi-hashtag::before { content: "\f292"; } .fi-envelope::before { content: "\f0e0"; } .fi-lock::before { content: "\f023"; } .fi-phone::before { content: "\f095"; } .fi-pen::before { content: "\f304"; } .fi-robot::before { content: "\f544"; } .fi-eye::before { content: "\f06e"; } .fi-eye-slash::before { content: "\f070"; } .fi-globe::before { content: "\f0ac"; } .fi-location-dot::before { content: "\f3c5"; } .fi-map::before { content: "\f279"; } .fi-road::before { content: "\f018"; } .fi-house::before { content: "\f015"; } .fi-tag::before { content: "\f02b"; } .fi-list::before { content: "\f03a"; } .fi-mailbox::before { content: "\f813"; } .fi-triangle-exclamation::before { content: "\f071"; } .fi-arrow-rotate-left::before { content: "\f0e2"; } .fi-user::before { content: "\f007"; } .fi-magnifying-glass::before { content: "\f002"; } .fi-angle-down::before { content: "\f107"; } /* ====================================================================== */ /* FA 7 PRO ICON SYSTEM (ZtIcon) β€” self-hosted from the RCL. */ /* Glyph is set per-icon via the --zt-glyph CSS var (codepoint from the */ /* generated FaIcons enum); the family class swaps which webfont renders. */ /* No giant all.css, no per-icon CSS rules. */ /* ====================================================================== */ @font-face { font-family: "FA7 Solid"; font-weight: 900; font-style: normal; font-display: block; src: url("../fonts/fontawesome/fa-solid-900.woff2") format("woff2"); } @font-face { font-family: "FA7 Regular"; font-weight: 400; font-style: normal; font-display: block; src: url("../fonts/fontawesome/fa-regular-400.woff2") format("woff2"); } @font-face { font-family: "FA7 Light"; font-weight: 300; font-style: normal; font-display: block; src: url("../fonts/fontawesome/fa-light-300.woff2") format("woff2"); } @font-face { font-family: "FA7 Brands"; font-weight: 400; font-style: normal; font-display: block; src: url("../fonts/fontawesome/fa-brands-400.woff2") format("woff2"); } @font-face { font-family: "FA7 Duotone"; font-weight: 900; font-style: normal; font-display: block; src: url("../fonts/fontawesome/fa-duotone-900.woff2") format("woff2"); } /* THE KIT FONT β€” the custom Zeal glyphs uploaded to our Font Awesome kit (zeal, zeal-logo, zeal-logo-circle, zeal-logo-rectangle), served from the kit's custom-icons.woff2 exactly as the legacy webfonts copy. */ @font-face { font-family: "FA7 Kit"; font-weight: 400; font-style: normal; font-display: block; src: url("../fonts/fontawesome/custom-icons.woff2") format("woff2"); } .zt-fa { font-family: "FA7 Solid"; font-weight: 900; font-style: normal; font-variant: normal; line-height: 1; display: inline-block; text-rendering: auto; } .zt-fa::before { content: var(--zt-glyph, ""); } .zt-fa.zt-fa-regular { font-family: "FA7 Regular"; font-weight: 400; } .zt-fa.zt-fa-light { font-family: "FA7 Light"; font-weight: 300; } .zt-fa.zt-fa-brand { font-family: "FA7 Brands"; font-weight: 400; } /* DUOTONE β€” mirrors the OFFICIAL Font Awesome mechanism exactly (Zeal.Blazor.Web all.css). The SECONDARY layer (::after) sits in NORMAL FLOW and defines the element box; its content is the codepoint DOUBLED (--zt-glyph-2), which the duotone font's GSUB collapses into the single secondary-layer glyph at 0.4 opacity. The PRIMARY layer (::before) is ABSOLUTELY positioned ON TOP at full opacity, sharing the same origin so the layers register perfectly (fixes the old misalignment where the two layers drifted apart). */ /* KIT (custom Zeal glyphs) β€” single-layer, weight 400, exactly like the legacy .fak/.fa-kit classes. ZtIcon picks this family for kit icons regardless of the requested style (the kit font has no duotone layers). */ .zt-fa.zt-fa-kit { font-family: "FA7 Kit"; font-weight: 400; } .zt-fa.zt-fa-duotone { font-family: "FA7 Duotone"; font-weight: 900; position: relative; } .zt-fa.zt-fa-duotone::before { content: var(--zt-glyph, ""); /* ONLY position:absolute (no offsets) β€” exactly like FA's all.css. The auto static position keeps the primary layer on the SAME baseline as the in-flow ::after so the two layers register; any left/top pins it to the box corner instead and the layers drift apart (the "head falling off" bug). fa-fw centering handles horizontal. */ position: absolute; opacity: var(--zt-fa-primary-opacity, 1); } .zt-fa.zt-fa-duotone::after { content: var(--zt-glyph-2, ""); opacity: var(--zt-fa-secondary-opacity, 0.4); } /* fixed width so columns of icons line up (fa-fw) */ .zt-fa.zt-fa-fw { width: 1.25em; text-align: center; } /* spin (busy) */ .zt-fa.zt-fa-spin { animation: zt-fi-spin 0.8s linear infinite; transform-origin: center center; } @media (prefers-reduced-motion: reduce) { .zt-fa.zt-fa-spin { animation: none; } } /* ---- FA CLASS COMPAT β€” SITE SECTION CONTENT ONLY ------------------------ */ /* Owner section HTML (the create-site template + legacy-authored content) carries REAL Font Awesome classes (), which the app never styles: ZtIcon renders by codepoint and no all.css is shipped, so those spans paint NOTHING on the Maui canvases. These rules give the SITE CANVAS (public tenant page, editor, RTE surface β€” all wear .layout-container) the same duotone mechanism as .zt-fa for exactly the icon classes the template emits. Codepoints verified against the legacy all.min.css; the secondary layer is the codepoint DOUBLED (the duotone font's GSUB trick). */ .layout-container .fad { font-family: "FA7 Duotone"; font-weight: 900; font-style: normal; font-variant: normal; line-height: 1; display: inline-block; text-rendering: auto; position: relative; } .layout-container .fad::before { content: var(--fa-glyph, ""); position: absolute; opacity: 1; } .layout-container .fad::after { content: var(--fa-glyph-2, ""); opacity: 0.4; } .layout-container .fa-fw { width: 1.25em; text-align: center; } .layout-container .fa-location-dot { --fa-glyph: "\f3c5"; --fa-glyph-2: "\f3c5\f3c5"; } .layout-container .fa-city { --fa-glyph: "\f64f"; --fa-glyph-2: "\f64f\f64f"; } .layout-container .fa-building { --fa-glyph: "\f1ad"; --fa-glyph-2: "\f1ad\f1ad"; } .layout-container .fa-circle-phone { --fa-glyph: "\e11b"; --fa-glyph-2: "\e11b\e11b"; } .layout-container .fa-circle-envelope { --fa-glyph: "\e10c"; --fa-glyph-2: "\e10c\e10c"; } .layout-container .fa-star-sharp { --fa-glyph: "\e28b"; --fa-glyph-2: "\e28b\e28b"; } .layout-container .fa-people-group { --fa-glyph: "\e533"; --fa-glyph-2: "\e533\e533"; } .layout-container .fa-badge-dollar { --fa-glyph: "\f645"; --fa-glyph-2: "\f645\f645"; } /* THE EVENT FLYER'S FACT-ROW ICONS (BuildEventFlyerAsync) β€” SAME CONVENTION, SAME VERIFICATION */ .layout-container .fa-calendar-check { --fa-glyph: "\f274"; --fa-glyph-2: "\f274\f274"; } .layout-container .fa-calendar-xmark { --fa-glyph: "\f273"; --fa-glyph-2: "\f273\f273"; } .layout-container .fa-calendar-clock { --fa-glyph: "\e0d2"; --fa-glyph-2: "\e0d2\e0d2"; } .layout-container .fa-calendar-star { --fa-glyph: "\f736"; --fa-glyph-2: "\f736\f736"; } .layout-container .fa-users { --fa-glyph: "\f0c0"; --fa-glyph-2: "\f0c0\f0c0"; } .layout-container .fa-id-card { --fa-glyph: "\f2c2"; --fa-glyph-2: "\f2c2\f2c2"; } .layout-container .fa-child-reaching { --fa-glyph: "\e59d"; --fa-glyph-2: "\e59d\e59d"; } /* ---- CONTAINER --------------------------------------------------------- */ .zt-input-container { margin: 0.75em 0 0.5em; width: 100%; max-width: var(--zeal-field-max); } /* ---- CONTROL STATE: Hide() / Busy() (Show()/NotBusy() = default) -------- */ /* HIDE β€” collapse the whole control out of layout */ .zt-input-container.zt-hidden, .zt-input-checkbox.zt-hidden { display: none; } /* SAME MEANING ON A BUTTON β€” used by the login page's passkey button, which is rendered hidden and revealed by zt-passkey.js only once the device reports a usable authenticator. Server-side rendering cannot ask the browser that question, and a passkey button that leads nowhere is worse than no button at all. */ .ztbtn.zt-hidden { display: none; } /* BUSY β€” input goes read-only (inert attr on the control, no JS), greyed, icons spin */ .zt-input-container.zt-busy .zt-input-field { background: #f4f4f4; cursor: progress; } .zt-input-container.zt-busy .zt-input-field-control { opacity: 0.5; } /* swap BOTH the big field icon and the small header icon to a spinning notch */ .zt-input-container.zt-busy .zt-input-field-icon .zt-fa, .zt-input-container.zt-busy .zt-input-icon .zt-fa { visibility: hidden; } .zt-input-container.zt-busy .zt-input-field-icon, .zt-input-container.zt-busy .zt-input-icon { position: relative; } .zt-input-container.zt-busy .zt-input-field-icon::after, .zt-input-container.zt-busy .zt-input-icon::after { content: "\f1ce"; /* fa circle-notch */ font-family: "FA7 Solid"; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--zeal-tiffany); animation: zt-fi-spin 0.8s linear infinite; } .zt-input-container.zt-busy .zt-input-icon::after { font-size: 12px; color: inherit; } /* checkbox busy */ .zt-input-checkbox.zt-busy { opacity: 0.55; } .zt-input-checkbox.zt-busy .zt-input-checkbox-row { cursor: progress; } .zt-input { padding: 0; border: 0.5pt solid var(--zeal-medium-grey); border-radius: var(--zeal-radius); width: 100%; font-size: 0.8rem; overflow: hidden; } /* ---- HEADER BAR -------------------------------------------------------- */ .zt-input-header { display: flex; align-items: center; gap: 0.5em; background-color: var(--zeal-header-grey); color: var(--zeal-white); width: 100%; padding: 0.3em 0.4em 0.3em 0.6em; border-bottom: 1pt solid var(--zeal-grey); } .zt-input-icon { flex-shrink: 0; display: flex; align-items: center; } .zt-input-icon .zt-fa { font-size: 12px; } .zt-input-label { flex: 1 1 auto; min-width: 0; } .zt-input-label label { margin: 0; font-weight: 600; font-size: 11px; letter-spacing: 0.02em; text-transform: uppercase; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } .zt-input-label label::after { content: ":"; } /* HELP "?" β€” pushed right ONLY inside the header bar */ .zt-input-help-icon { flex-shrink: 0; display: flex; align-items: center; } .zt-input-header .zt-input-help-icon { margin-left: auto; } .zt-input-help-icon button { background: none; border: none; padding: 0; cursor: pointer; color: var(--zeal-gold); font-size: 15px; line-height: 1; display: flex; } .zt-input-help-icon button:hover { color: #ffd84d; } /* ---- FIELD ROW --------------------------------------------------------- */ .zt-input-field { display: flex; align-items: center; gap: 0.4em; padding: 0.5em 0.6em; background: var(--zeal-white); /* UNIFORM ROW HEIGHT β€” every single-line control (text/date/select/number/email/phone/…) lands on the SAME field height so fields line up perfectly in rows/columns. The textarea (multi-line) overrides via min-height and simply grows past this. This is the library-wide fix for the row-misalignment Vince flagged. */ min-height: var(--zt-control-height, 2.6rem); box-sizing: border-box; } .zt-input-field-icon { flex-shrink: 0; font-size: 165%; color: var(--zeal-light-grey); display: flex; align-items: center; } .zt-input-field-control { flex: 1 1 auto; min-width: 0; } .zt-input-field-control input, .zt-input-field-control select, .zt-input-field-control textarea { border: none; outline: none; width: 100%; font-family: inherit; font-size: 1.05rem; color: var(--zeal-dark-grey); background: transparent; padding: 0; margin: 0; } /* SINGLE-LINE controls share ONE explicit line-box height so a native render at the EXACT same height (native selects otherwise size themselves differently). Kept below the field row's min-height so the row height stays uniform. Textarea is excluded (multi-line). */ .zt-input-field-control input, .zt-input-field-control select { height: 1.5em; line-height: 1.5em; box-sizing: content-box; } .zt-input-field-control select { cursor: pointer; } .zt-input-field-control textarea { resize: vertical; min-height: 80px; } .zt-input-field-control input::placeholder, .zt-input-field-control textarea::placeholder { color: var(--zeal-light-grey); font-size: 90%; opacity: 1; } /* ── DATE INPUT: trailing calendar button + full-screen picker ─────────────────────────────────────────── */ .zt-date-input-row { display: flex; align-items: center; gap: 6px; width: 100%; } .zt-date-input-row input { flex: 1 1 auto; width: auto; min-width: 0; } .zt-date-pick-btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--zeal-tiffany); font-size: 1.05rem; padding: 2px 4px; border-radius: 5px; line-height: 1; } .zt-date-pick-btn:hover { color: var(--zeal-green); background: rgba(0,0,0,0.04); } /* full-screen picker overlay β€” sits above app chrome; taps switch day / month / year. */ /* Default bottom-nav height so full-screen pickers center above the bar even on pages whose navbar doesn't publish a live height (the Static-SSR demo navbar). The interactive ZtNavBar overrides this precisely (and grows it when it wraps to two rows). */ :root { --zt-navbar-h: 60px; } .zt-datepicker { /* Pinned to the EXACT visible rectangle measured by JS (visualViewport β†’ --vv-top / --vv-height). This covers only the visible band (backdrop over all visible page content, no gap) AND lets align-items:center land the panel in the true center β€” no vh/dvh guessing. Falls back to dvh/vh when the vars aren't set. */ position: fixed; left: 0; right: 0; z-index: 2147483000; box-sizing: border-box; top: var(--vv-top, 0px); height: 100vh; height: 100dvh; height: var(--vv-height, 100dvh); background: rgba(0, 0, 0, 0.55); display: flex; align-items: center; justify-content: center; /* reserve the app nav bar (live height, grows for a 2-row bar) so centering is ABOVE it. */ padding: 0.75rem 0.75rem calc(0.75rem + var(--zt-navbar-h, 60px)); } /* lock the page while a full-screen picker is open (no scrolling the content behind the wheel). */ body.zt-noscroll { overflow: hidden; } .zt-datepicker-panel { background: var(--zeal-white); border-radius: 12px; width: min(540px, 94vw); box-sizing: border-box; /* HARD cap: an absolute ceiling (so it's never floor-to-ceiling on tall screens) AND a viewport bound that stays SHORTER than the visible area (dvh minus the live navbar height β€” which grows for a 2-row bar β€” minus 4rem) so `align-items:center` always leaves EQUAL breathing room above and below, on any screen. (A flex % max-height doesn't resolve reliably, hence the viewport math.) The list scrolls inside. */ max-height: min(38rem, calc(100vh - 60px - 4rem)); max-height: min(38rem, calc(var(--vv-height, 100dvh) - var(--zt-navbar-h, 60px) - 4rem)); overflow: auto; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.45); padding: 0.85rem 1rem 1.05rem; display: flex; flex-direction: column; } .zt-datepicker-head { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.6rem; } /* Picker header title (icon + text) is LEFT-aligned; its flex:1 still pushes the close button to the right. The DATE picker keeps its month/year title CENTERED because it sits BETWEEN the prev/next arrows β€” detected by the presence of a nav button in the head. Global to every picker (dropdown / time / date). */ .zt-datepicker-title { flex: 1 1 auto; display: flex; align-items: center; justify-content: flex-start; gap: 0.5rem; } .zt-datepicker-head:has(.zt-datepicker-nav) .zt-datepicker-title { justify-content: center; } .zt-datepicker-title-btn { background: transparent; border: none; cursor: pointer; font-size: 1.2rem; font-weight: 700; color: var(--zeal-dark-grey); padding: 0.2rem 0.5rem; border-radius: 6px; } .zt-datepicker-title-btn:hover { background: #f0f0f0; color: var(--zeal-tiffany); } .zt-datepicker-nav, .zt-datepicker-close { background: transparent; border: none; cursor: pointer; font-size: 1.15rem; color: var(--zeal-grey); padding: 0.35rem 0.5rem; border-radius: 6px; display: inline-flex; align-items: center; } .zt-datepicker-nav:hover { background: #f0f0f0; color: var(--zeal-tiffany); } /* CLOSE is neutral (grey), not red β€” red reads as delete/destructive; this just dismisses the calendar. */ .zt-datepicker-close { color: var(--zeal-grey); } .zt-datepicker-close:hover { background: #f0f0f0; color: var(--zeal-dark-grey); } .zt-datepicker-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; } .zt-datepicker-weekdays span { text-align: center; font-weight: 700; font-size: 0.82rem; color: var(--zeal-grey); } .zt-datepicker-grid { display: grid; gap: 6px; } .zt-datepicker-days { grid-template-columns: repeat(7, 1fr); } .zt-datepicker-months, .zt-datepicker-years { grid-template-columns: repeat(3, 1fr); } .zt-datepicker-day, .zt-datepicker-cell { border: 2px solid transparent; background: #f5f6f6; border-radius: 8px; cursor: pointer; font-size: 1rem; font-weight: 600; color: var(--zeal-dark-grey); display: flex; align-items: center; justify-content: center; } /* COMPACT fixed-height cells (was aspect-ratio:1/1 β†’ square cells made the calendar ~7 rows tall and it couldn't fit/center on phones). A capped height keeps the whole calendar short enough to center. */ .zt-datepicker-day { min-height: 2.5rem; } .zt-datepicker-months .zt-datepicker-cell, .zt-datepicker-years .zt-datepicker-cell { padding: 0.9rem 0.4rem; } .zt-datepicker-day:hover, .zt-datepicker-cell:hover { background: var(--zeal-tiffany); color: var(--zeal-white); } .zt-datepicker-day.is-outside { color: var(--zeal-light-grey); background: transparent; } .zt-datepicker-day.is-today { border-color: var(--zeal-tiffany); } .zt-datepicker-day.is-selected, .zt-datepicker-cell.is-selected { background: var(--zeal-green); color: var(--zeal-white); border-color: var(--zeal-green); } /* time picker β€” hour / minute / am-pm columns + a big readout. */ .zt-timepicker-panel { width: min(480px, 94vw); } .zt-timepicker-readout { font-size: 1.4rem; font-weight: 700; color: var(--zeal-tiffany); } .zt-timepicker-cols { display: grid; grid-template-columns: 2fr 2fr 1fr; gap: 0.9rem; } .zt-timepicker-col { display: flex; flex-direction: column; } .zt-timepicker-heading { text-align: center; font-weight: 700; font-size: 0.85rem; color: var(--zeal-grey); margin-bottom: 6px; } .zt-timepicker-hours, .zt-timepicker-minutes { grid-template-columns: repeat(3, 1fr); } .zt-timepicker-hours .zt-datepicker-cell, .zt-timepicker-minutes .zt-datepicker-cell { padding: 0.85rem 0; } .zt-timepicker-ampm { gap: 6px; } .zt-timepicker-ampm .zt-datepicker-cell { padding: 1.1rem 0; } .zt-timepicker-actions { display: flex; justify-content: flex-start; margin-top: 1rem; } /* ── DROPDOWN: upgraded trigger + full-screen picker ───────────────────────────────────────────────────── */ .zt-dropdown-trigger { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; height: 1.5em; background: transparent; border: none; cursor: pointer; padding: 0; font-family: inherit; font-size: 1.05rem; color: var(--zeal-dark-grey); text-align: left; } .zt-dropdown-trigger-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zt-dropdown-trigger-text.is-placeholder { color: var(--zeal-light-grey); } .zt-dropdown-trigger-chevron { color: var(--zeal-grey); flex: 0 0 auto; font-size: 0.85rem; } /* The panel WRAPS its content (head + filter + a list sized to the item count), so it stays short and the base overlay's align-items:center centers it reliably on any screen β€” same as the calendar. Row/gap are shared vars; the window's height is driven by --zt-picker-count (min(itemCount, N)) set inline β†’ SHORT lists hug their items (no dead space), LONG lists cap at N rows and become a scroll wheel. */ .zt-dropdown-picker-panel { --zt-picker-row: 2.9rem; --zt-picker-gap: 8px; width: min(520px, 94vw); overflow: hidden; } /* tighten the title β†’ filter gap a touch. */ .zt-dropdown-picker .zt-datepicker-head { margin-bottom: 0.5rem; } .zt-dropdown-picker-title { font-size: 1.2rem; font-weight: 700; color: var(--zeal-dark-grey); } .zt-dropdown-picker-title-icon { color: var(--zeal-tiffany); font-size: 1.25rem; display: inline-flex; align-items: center; } .zt-dropdown-picker-search { display: flex; align-items: center; gap: 8px; padding: 0.55rem 0.8rem; margin-bottom: 0.7rem; background: #f4f5f5; border-radius: 10px; color: var(--zeal-grey); } .zt-dropdown-picker-search input { flex: 1 1 auto; border: none; outline: none; background: transparent; font-size: 1.05rem; color: var(--zeal-dark-grey); } .zt-dropdown-picker-clear { background: transparent; border: none; cursor: pointer; color: var(--zeal-grey); display: inline-flex; } .zt-dropdown-picker-listwrap { position: relative; flex: 0 0 auto; } /* WHEEL payline β€” a fixed one-row frame LOCKED to the vertical center of the window. Items snap under it, so the row it frames is always the centered (scale-1) one β€” slot-machine style. pointer-events:none so it never eats a tap; z-index above the rows so its outline hugs the framed row from on top. */ .zt-dropdown-picker-band { position: absolute; left: 4px; right: 4px; top: 50%; transform: translateY(-50%); height: var(--zt-picker-row); border: 2px solid var(--zeal-tiffany); border-radius: 11px; pointer-events: none; z-index: 5; } .zt-dropdown-picker-list { flex: 0 0 auto; /* height = exactly N rows worth of item + gap. --zt-picker-count is min(itemCount, VisibleRows). */ height: calc(var(--zt-picker-count, 5) * var(--zt-picker-row) + (var(--zt-picker-count, 5) - 1) * var(--zt-picker-gap)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--zt-picker-gap); padding: 0 4px; overscroll-behavior: contain; /* don't chain the scroll to the page behind */ -webkit-overflow-scrolling: touch; /* iOS momentum β€” flick and it glides */ scrollbar-width: none; /* hide the scrollbar β†’ clean wheel look */ } .zt-dropdown-picker-list::-webkit-scrollbar { display: none; } /* WHEEL mode only: snap to a row, and the centered row (marked by JS on its OWN box) gets the tiffany outline that HUGS it exactly (over any hover/selected fill). SHORT lists are a plain tap-list β€” no snap, no center outline. */ .zt-dropdown-picker-panel.is-wheel .zt-dropdown-picker-list { scroll-snap-type: y mandatory; } .zt-dropdown-picker-panel.is-wheel .zt-dropdown-picker-item { scroll-snap-align: center; } .zt-dropdown-picker-item { display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; box-sizing: border-box; height: var(--zt-picker-row); text-align: center; padding: 0 2.6rem; position: relative; border-radius: 11px; border: 2px solid transparent; background: #f4f5f5; cursor: pointer; font-size: 1.05rem; font-weight: 600; color: var(--zeal-dark-grey); } .zt-dropdown-picker-item:hover { background: var(--zeal-tiffany); color: var(--zeal-white); } .zt-dropdown-picker-item.is-selected { border-color: var(--zeal-green); background: var(--zeal-green); color: var(--zeal-white); } .zt-dropdown-picker-item-icon { flex: 0 0 auto; color: var(--zeal-tiffany); font-size: 1.15rem; } .zt-dropdown-picker-item:hover .zt-dropdown-picker-item-icon, .zt-dropdown-picker-item.is-selected .zt-dropdown-picker-item-icon { color: inherit; } /* CENTERED item content (icon + text) β€” the iOS-wheel look; the check floats to the right WITHOUT shifting the centered label (was flex:1 filling left, pushing everything left with a big empty gap). Global to every picker. */ .zt-dropdown-picker-item-text { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .zt-dropdown-picker-item-check { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); } .zt-dropdown-picker-empty { text-align: center; color: var(--zeal-grey); padding: 1.6rem; } /* iOS-wheel curve β€” WHEEL mode rows scale + fade toward the window's top/bottom edges (only where scroll-driven animations are supported). Scoped to .is-wheel so SHORT lists stay full-size and fully opaque. */ @supports (animation-timeline: view()) { .zt-dropdown-picker-panel.is-wheel .zt-dropdown-picker-item { animation: zt-wheel linear both; animation-timeline: view(block); animation-range: cover 0% cover 100%; } @keyframes zt-wheel { 0% { opacity: 0.4; transform: scale(0.86); } 50% { opacity: 1; transform: scale(1); } 100% { opacity: 0.4; transform: scale(0.86); } } } /* the whole panel rises/fades in on open. */ .zt-dropdown-picker .zt-datepicker-panel { animation: zt-picker-in 0.22s ease both; } @keyframes zt-picker-in { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .zt-dropdown-picker .zt-datepicker-panel { animation: none; } @supports (animation-timeline: view()) { .zt-dropdown-picker-item { animation: none; opacity: 1; transform: none; } } } /* REQUIRED + EMPTY = ORANGE FIELD ICON (state-driven; see VALIDATION STATE below) */ .zt-input.required .zt-input-field-icon { color: var(--zeal-orange); } /* PASSWORD SHOW/HIDE (inline, no JS) */ .zt-input-pw { display: flex; align-items: center; gap: 8px; } .zt-input-pw input { flex: 1 1 auto; } .zt-input-pw-toggle { flex-shrink: 0; align-self: center; /* don't let the icon stretch the row height */ width: 1.6em; height: 1.6em; /* FIXED box β€” swapping eye/eye-slash can't change the control height */ line-height: 1; overflow: hidden; background: none; border: none; padding: 0; cursor: pointer; color: #888; font-size: 1.15rem; display: flex; align-items: center; justify-content: center; } .zt-input-pw-toggle:hover { color: var(--zeal-orange); } /* Both eye icons forced to the SAME centered box; vanilla JS toggles .showing to swap which one shows (cross-platform, no circuit). Identical boxes = no vertical bounce on toggle. */ .zt-input-pw-toggle .zt-pw-eye, .zt-input-pw-toggle .zt-pw-eye-off { align-items: center; justify-content: center; line-height: 1; } .zt-input-pw-toggle .zt-pw-eye { display: flex; } .zt-input-pw-toggle .zt-pw-eye-off { display: none; } .zt-input-pw-toggle.showing .zt-pw-eye { display: none; } .zt-input-pw-toggle.showing .zt-pw-eye-off { display: flex; } /* PHONE β€” country dropdown + number (kept tight) */ .zt-phone { display: flex; align-items: center; gap: 4px; width: 100%; } .zt-input-field-control .zt-phone-country { flex: 0 0 auto; width: 86px; border: none; outline: none; background: transparent; font-size: 0.98rem; color: var(--zeal-dark-grey); cursor: pointer; padding: 0; } .zt-phone-divider { flex: 0 0 auto; color: var(--zeal-light-grey); margin: 0 1px; } .zt-phone-number { flex: 1 1 auto; min-width: 0; } /* SEARCHABLE SELECT (ZtSelect) */ .zt-select { position: relative; width: 100%; } .zt-select-input { width: 100%; border: none; outline: none; background: transparent; font-size: 1.05rem; color: var(--zeal-dark-grey); padding: 0; } .zt-select-input::-webkit-search-cancel-button, .zt-select-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; } .zt-input:has(.zt-select-results) { overflow: visible; } /* let the results escape the field box */ .zt-select-results { position: absolute; top: calc(100% + 8px); left: -4px; right: -4px; z-index: 60; background: #fff; border: 1px solid #d6d6d6; border-radius: 8px; max-height: 290px; overflow-y: auto; box-shadow: 0 14px 36px rgba(0, 0, 0, .24); padding: 5px; } /* little caret so it clearly belongs to the field above */ .zt-select-results::before { content: ""; position: absolute; top: -7px; left: 18px; width: 12px; height: 12px; background: #fff; border-left: 1px solid #d6d6d6; border-top: 1px solid #d6d6d6; transform: rotate(45deg); } .zt-select-item { display: flex; align-items: center; gap: 11px; padding: 9px 11px; cursor: pointer; border-radius: 6px; } .zt-select-item:hover { background: #f4f4f4; } .zt-select-item-icon { flex: 0 0 auto; color: var(--zeal-light-grey); font-size: 1.15rem; } .zt-select-item:hover .zt-select-item-icon { color: var(--zeal-orange); } .zt-select-item-body { min-width: 0; } .zt-select-item-text { display: block; font-weight: 600; color: var(--zeal-dark-grey); font-size: 0.98rem; line-height: 1.2; } .zt-select-item-sub { display: block; font-size: 0.8rem; color: #8a8a8a; line-height: 1.15; margin-top: -2px; } .zt-select-empty { padding: 10px 11px; color: #999; font-size: 0.9rem; } /* COUNTRY PICKER (ZtCountrySelect) β€” custom dropdown with consistent flag images */ .zt-cselect { position: relative; width: 100%; } .zt-cselect-trigger { display: flex; align-items: center; gap: 9px; width: 100%; background: transparent; border: none; cursor: pointer; padding: 0; font-size: 1.05rem; color: var(--zeal-dark-grey); text-align: left; } .zt-cselect-flag { width: 24px; height: 18px; object-fit: cover; border-radius: 2px; flex: 0 0 auto; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .zt-cselect-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zt-cselect-placeholder { color: var(--zeal-light-grey); } .zt-cselect-caret { flex: 0 0 auto; color: #999; font-size: 0.95rem; } .zt-input:has(.zt-cselect-panel) { overflow: visible; } .zt-cselect-backdrop { position: fixed; inset: 0; z-index: 59; } .zt-cselect-panel { position: absolute; top: calc(100% + 8px); left: -4px; right: -4px; z-index: 60; background: #fff; border: 1px solid #d6d6d6; border-radius: 8px; box-shadow: 0 14px 36px rgba(0, 0, 0, .24); overflow: hidden; } .zt-cselect-search { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid #eee; color: #999; } .zt-cselect-searchbox { flex: 1 1 auto; border: none; outline: none; background: transparent; font-size: 0.95rem; color: var(--zeal-dark-grey); } .zt-cselect-searchbox::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } .zt-cselect-list { max-height: 260px; overflow-y: auto; padding: 4px; } .zt-cselect-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; } .zt-cselect-item:hover { background: #f4f4f4; } .zt-cselect-item.selected { background: var(--zt-happy-bg); } .zt-cselect-item-text { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; color: var(--zeal-dark-grey); font-size: 0.95rem; } .zt-cselect-item-dial { flex: 0 0 auto; color: #999; font-size: 0.85rem; } .zt-cselect-empty { padding: 12px; color: #999; } /* Neutralize the Blazor template's global `.invalid`/`.valid.modified` red/green OUTLINE (app.css) β€” our containers carry those class names but we style states ourselves. */ .zt-input.invalid, .zt-input.valid, .zt-input.required, .zt-input-checkbox.invalid { outline: none; } /* ---- VALIDATION STATE (header + field tint) ---------------------------- */ .zt-input.valid .zt-input-header { background-color: var(--zeal-green); border-bottom-color: #214521; } .zt-input.valid .zt-input-field { background-color: var(--zeal-light-green); } .zt-input.valid .zt-input-field-icon { color: var(--zeal-green); } .zt-input.invalid .zt-input-header { background-color: var(--zeal-red); background-image: linear-gradient(326deg, var(--zeal-dark-red) 0%, var(--zeal-red) 74%); border-bottom-color: var(--zeal-dark-red); } .zt-input.invalid .zt-input-field { background-color: var(--zeal-light-red); } .zt-input.invalid .zt-input-field-icon { color: var(--zeal-red); } /* HIDE THE BIG FIELD ICON FOR TEXTAREAS (matches legacy) */ .zt-input-container:has(textarea) .zt-input-field-icon { display: none; } /* ---- VALIDATION MESSAGE ------------------------------------------------ */ .zt-validation-message-container { width: 100%; max-width: var(--zeal-field-max); } .validation-message { display: block; font-size: 9pt; font-weight: 700; color: var(--zeal-dark-red); text-transform: uppercase; padding-left: 1px; margin-top: 2px; } /* ---- CHECKBOX ---------------------------------------------------------- */ .zt-input-checkbox { margin: 0.75em 0 0.5em; max-width: var(--zeal-field-max); } .zt-input-checkbox-row { display: flex; align-items: center; } /* custom-rendered box so unchecked states can be cleanly coloured (native accent-color only shows when checked). Unchecked = grey box, checked = GREEN box + white check, invalid = RED box. */ .zt-input-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; border: 2px solid var(--zeal-light-grey); border-radius: 3px; background: #fff; cursor: pointer; flex: 0 0 auto; margin: 0 8px 0 0; position: relative; transition: background .12s ease, border-color .12s ease; } .zt-input-checkbox input[type="checkbox"]:checked { background: var(--zeal-green); border-color: var(--zeal-green); } .zt-input-checkbox input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .zt-input-checkbox .zt-input-help-icon { margin-left: 3px; } /* INVALID (required + unchecked + failed) = empty RED box */ .zt-input-checkbox.invalid input[type="checkbox"] { border-color: var(--zeal-red); background: #fff; } .zt-input-checkbox label { margin: 0; font-weight: 600; font-size: 0.95rem; color: var(--zeal-dark-grey); cursor: pointer; } /* checkbox help sits RIGHT AFTER the text (no margin-left:auto) */ .zt-input-checkbox .zt-input-help-icon button { color: var(--zeal-green); } .zt-input-checkbox .zt-input-help-icon button:hover { color: #3a7d3a; } /* ---- STANDALONE CHECKBOX (ZtCheckbox β€” list/toolbar tick, no form) ----- */ /* same custom-rendered box as the form checkbox so the two cannot drift apart visually */ .zt-checkbox { display: inline-flex; align-items: center; cursor: pointer; } .zt-checkbox.zt-disabled { opacity: 0.5; cursor: default; } .zt-checkbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; border: 2px solid var(--zeal-light-grey); border-radius: 3px; background: #fff; cursor: pointer; flex: 0 0 auto; margin: 0; position: relative; transition: background .12s ease, border-color .12s ease; } .zt-checkbox.zt-disabled input[type="checkbox"] { cursor: default; } .zt-checkbox input[type="checkbox"]:checked { background: var(--zeal-green); border-color: var(--zeal-green); } .zt-checkbox input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } .zt-checkbox-label { margin-left: 8px; font-weight: 600; font-size: 0.95rem; color: var(--zeal-dark-grey); } /* SWITCH VARIANT β€” the same checkbox re-dressed as a sliding pill; state and binding are identical */ .zt-checkbox.zt-switch input[type="checkbox"] { width: 32px; height: 18px; border: 2px solid var(--zeal-light-grey); border-radius: 99px; background: #e5e7eb; } .zt-checkbox.zt-switch input[type="checkbox"]::after { content: ""; position: absolute; left: 1px; top: 1px; width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; transform: none; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: left .12s ease; } .zt-checkbox.zt-switch input[type="checkbox"]:checked { background: var(--zeal-green); border-color: var(--zeal-green); } .zt-checkbox.zt-switch input[type="checkbox"]:checked::after { left: 15px; } /* ---- VALIDATION SUMMARY ------------------------------------------------ */ .validation-errors { margin: 0 0 18px; padding: 12px 18px 12px 36px; list-style: disc; border: 1px solid #e6b9b9; border-left: 4px solid var(--zeal-red); border-radius: 4px; background: var(--zeal-light-red); } /* a clean bulleted list β€” kill the inherited gold bullet from site.css, use a normal disc */ .validation-errors li, .validation-errors li.validation-message { display: list-item; list-style: disc outside; margin: 4px 0; } .validation-errors li::before { content: none !important; } .validation-errors li::marker { color: var(--zeal-dark-red); } .validation-errors .validation-message { font-size: 10pt; font-weight: 600; text-transform: none; color: var(--zeal-dark-red); line-height: 1.35; } /* ---- BUTTONS (ported from legacy button.scss / button-styles.scss) ------ */ .ztbtn { cursor: pointer; border: 0.5pt solid var(--zeal-grey); background-color: var(--zeal-grey); color: var(--zeal-white); display: inline-flex; align-items: center; justify-content: center; gap: 0.5em; font-weight: 500; text-align: center; vertical-align: middle; white-space: nowrap; /* A BUTTON LABEL NEVER WRAPS β€” it sizes to its text */ user-select: none; padding: 0.355rem 0.55rem; font-size: 0.85rem; line-height: 1.35; border-radius: 0.25rem; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease; } .ztbtn:hover { filter: brightness(1.08); } .ztbtn:active { transform: translateY(1px); outline: none; } .ztbtn:focus { outline: none; } .ztbtn:disabled, .ztbtn.ztbtn-disabled { background: var(--zeal-light-grey); border-color: var(--zeal-light-grey); color: var(--zeal-white); cursor: not-allowed; filter: none; } .ztbtn-success, .ztbtn-green { border-color: var(--zeal-green); background: var(--zeal-green); } .ztbtn-warning, .ztbtn-yellow, .ztbtn-gold { border-color: var(--zeal-gold); background: var(--zeal-gold); color: var(--zeal-dark-grey); } .ztbtn-error, .ztbtn-red { border-color: var(--zeal-red); background: var(--zeal-red); } .ztbtn-orange { border-color: var(--zeal-orange); background: var(--zeal-orange); } .ztbtn-blue { border-color: var(--zeal-blue); background: var(--zeal-blue); } .ztbtn-tiffany { border-color: var(--zeal-tiffany); background: var(--zeal-tiffany); } .ztbtn-purple { border-color: var(--zeal-purple); background: var(--zeal-purple); } .ztbtn-pink { border-color: var(--zeal-pink); background: var(--zeal-pink); } .ztbtn-brown { border-color: var(--zeal-brown); background: var(--zeal-brown); } .ztbtn-black { border-color: var(--zeal-dark-grey); background: var(--zeal-dark-grey); } .ztbtn-silver { border-color: var(--zeal-silver); background: var(--zeal-silver); } /* ── BARE GLYPH BUTTON (ZtIconOnlyButton) β€” the icon and nothing else ──────────────────────────────────────── No box, no fill, no border. The pointer and the title tooltip come from .ztbtn and ZtButtonBase's title attribute, so all this has to do is strip the chrome and hand the colour to the glyph. */ .ztbtn.ztbtn-icon-only { padding: 0.15rem; border-color: transparent; background: transparent; border-radius: 0.25rem; font-size: 1rem; /* the glyph is the whole control, so it runs a touch larger than a labelled button */ line-height: 1; } /* HOVER IS THE ONLY CHROME IT EVER GETS β€” a whisper of the glyph's own colour behind it, so the target is findable without the button becoming a box again. Guarded: a touch screen has no hover to leave, and an unguarded :hover sticks to the last glyph tapped (charter rule 7a). */ @media (hover: hover) { .ztbtn.ztbtn-icon-only:hover { background: color-mix(in srgb, currentColor 12%, transparent); } } .ztbtn.ztbtn-icon-only:disabled { opacity: 0.4; cursor: not-allowed; background: transparent; } /* THE VERB'S COLOUR MOVES TO THE GLYPH. Same groupings as the fill classes directly above, so the two blocks stay readable side by side β€” if a colour is added there it needs a line here, and vice versa. ⚠️ GOLD NEEDS ITS OWN LINE for a second reason: the fill version forces dark-grey TEXT for contrast on a gold background, and with no background that override has to be undone or a bare Archive comes out grey. */ .ztbtn-icon-only.ztbtn-success, .ztbtn-icon-only.ztbtn-green { color: var(--zeal-green); } .ztbtn-icon-only.ztbtn-warning, .ztbtn-icon-only.ztbtn-yellow, .ztbtn-icon-only.ztbtn-gold { color: var(--zeal-gold); } .ztbtn-icon-only.ztbtn-error, .ztbtn-icon-only.ztbtn-red { color: var(--zeal-red); } .ztbtn-icon-only.ztbtn-orange { color: var(--zeal-orange); } .ztbtn-icon-only.ztbtn-blue { color: var(--zeal-blue); } .ztbtn-icon-only.ztbtn-tiffany { color: var(--zeal-tiffany); } .ztbtn-icon-only.ztbtn-purple { color: var(--zeal-purple); } .ztbtn-icon-only.ztbtn-pink { color: var(--zeal-pink); } .ztbtn-icon-only.ztbtn-brown { color: var(--zeal-brown); } .ztbtn-icon-only.ztbtn-black { color: var(--zeal-dark-grey); } .ztbtn-icon-only.ztbtn-silver { color: var(--zeal-silver); } .ztbtn .zt-fa { font-size: 1.05em; } /* ---- BUTTON SIZES (one per variant component) -------------------------- */ /* Double-class (.ztbtn.ztbtn-*) so the size survives the responsive .ztbtn shrink below. */ /* Default = the base .ztbtn above (ZtButton) */ /* Large (ZtLargeButton) */ .ztbtn.ztbtn-lg { padding: 0.8rem 1.5rem; font-size: 1.1rem; gap: 0.6em; } .ztbtn.ztbtn-lg .zt-fa { font-size: 1.15em; } /* Small (ZtSmallButton) β€” a COMPACT labeled button: icon + text, smaller font, tight horizontal padding. ⚠️ THE HEIGHT IS FIXED TO --zt-btn-compact-h, THE SAME VALUE ZtIconButton USES, AND THAT IS THE WHOLE POINT. These two are the standard pair in an action row β€” a help icon next to a labelled button β€” and they used to be sized two different ways: the icon button by an explicit 30px, this one by its padding (~28px). Two pixels out is exactly enough to look broken side by side, and it did, everywhere the pair appears (charges summary, the user account sections, anywhere Help sits beside an action). One shared variable means they can never drift again β€” change the pair's height in ONE place. */ .ztbtn.ztbtn-small { height: var(--zt-btn-compact-h); padding: 0 0.6rem; /* horizontal only β€” the height owns the vertical rhythm now */ font-size: 0.8rem; gap: 0.35em; /* was 0.45em: the icon sat adrift from its label */ line-height: 1.2; } .ztbtn.ztbtn-small .zt-fa { font-size: 1em; } .ztbtn.ztbtn-small .ztbtn-text { white-space: nowrap; } /* Menu tile (ZtMenuButton) β€” big icon, small label under. A 1:1 PORT of the legacy Zeal.Razor.Ui `.ztbtn-menu` (button.scss), values and all. Vince built these and asked for them exactly: .2/.4/.2/.45rem padding, a 1.3rem icon, and a 30px-wide 0.4rem label. IT SIZES TO ITS CONTENT β€” no fixed width/height. The previous 53x53 square was invented here, and it made every tile bigger and blockier than the ones it was supposed to match. The 30px label cap is what actually sets the width, which is why the legacy tiles are all the same size without anyone declaring one. ⚠️ NO text-transform. The legacy has none, and the UI charter bans faking caps in CSS β€” the tiles read "Check-Ins / Kiosk / Edit", not "CHECK-INS / KIOSK / EDIT". ── EVERY WAVE-EDITOR FOOTER BUTTON IS A MENU TILE. GLOBALLY. ──────────────────────────────────────────── Vince, 2026-08-06: "when we have buttons in the footer of one, they should be menu buttons. That should be a global change." So the wave footer is added to THESE selectors rather than editing 24 components β€” a change made once here reaches every wave editor that exists and every one written after it, and there is no second copy of these values to drift from. A footer button written as a plain ZtButton/ZtSaveButton/ ZtCancelButton renders as a tile automatically; nothing at the call site has to know. ICON-ONLY and SMALL-MENU footer buttons are excluded: a ZtIconButton is a fixed square by definition, and a ZtSmallMenuButton already asked for the smaller tile. */ .ztbtn.ztbtn-menu, /* ⚠️ ZtSmallButton IS EXEMPT (added 2026-08-14). The tile treatment below squeezes every footer button into a 30px ellipsised caption β€” right for Back / Next / Save, one short word each, and wrong the moment the LABEL is the information: the trial wizard's last screen rendered "Add family member" as "Add fa…". A ZtSmallButton in a wave footer now keeps the ordinary small icon+text shape it already has everywhere else (a modal footer applies no overrides at all, which is why its Close button reads correctly). Verified blast radius: the ONLY ZtSmallButton inside any