/* MoveHappy Office — the registered style. Tokens only. Components take every color, face, size and distance from here and never restate a value. One light theme by design: the office desk is always light. Declaration order inside a rule, everywhere in this style: position, box, spacing, type, color and border, effects. 2026-10-24 refresh: a quieter desk — neutral grey ink on a soft canvas, white cards with hairline borders and soft neutral shadows, light-grey inset panels for the groups inside a card, small soft status tags, an 8px rhythm with a little more air, a neutral charcoal sidebar. Names are unchanged where they existed, so parts and pages pick the new values up. 2026-10-24, fourth pass (material studies): button faces are stone (a fine grain over a top-lit gradient) standing on a ledge in their edge colour, the top nav is an El Capitan title bar and cards rest on Material's 2dp shadow at half strength. 2026-10-25, warm desk: the neutrals took the documents' warmth so every surface belongs with the ivory sheet: the canvas is a soft clay grey, cards and panels a whisper-warm white (still whiter than the sheet), lines and inks warm greys (muted ink is the documents' caption ink) and shadows a warm umber, not black. The brand and status colours are unchanged; the blue is now the cool complement to a warm ground. 2026-10-25, no wells: a group inside a card or the panel is a band of the sheet between hairlines, its padding inside it, as cells are, not a light-grey pressed-in box; the quote's side cards are white notes (--mh-shadow-note). */ /* Lato, shown with the fallback until it arrives instead of blank text. */ @font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/vendor/google-fonts/files/4d3e9082410f2959.ttf) format("truetype"); } @font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url(/assets/vendor/google-fonts/files/04393e6516bf5491.ttf) format("truetype"); } /* Newsreader (Production Type, OFL-1.1): the documents' title face, one Latin file at the display optical size. */ @font-face { font-family: "Newsreader"; font-style: normal; font-weight: 400; font-display: swap; src: url(/assets/vendor/google-fonts/files/075d4791160cdaee.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Brand and signal */ --mh-blue: #2c78c5; /* primary: actions, links in chrome, selected rows, focus (white text 4.6:1) */ --mh-blue-deep: #2366ad; /* hover and pressed primary */ --mh-blue-soft: #e9f2fc; /* tinted primary: active navigation, selected cells */ --mh-blue-line: rgba(44, 120, 197, 0.3); --mh-sky: #36a9e1; /* the light information blue: accents, chart fills (not under white text) */ --mh-info: #1b7db5; /* the information action (the old btn-info, this app's usual Save): white text 4.5:1 */ --mh-info-deep: #156796; --mh-sky-deep: #1f92cb; --mh-sky-soft: #e6f5fc; /* information buttons and chips */ --mh-sky-tint: #d3edf9; /* information buttons hovered */ --mh-sky-ink: #0f6a96; /* text on the soft information blue (5.4:1) */ --mh-sky-line: rgba(54, 169, 225, 0.32); --mh-signal: #d6383d; /* counters that need attention, danger (white text 4.7:1) */ --mh-signal-deep: #b52f34; --mh-signal-soft: #fdeced; --mh-signal-line: rgba(214, 56, 61, 0.3); /* the cut edge of signal paper */ --mh-success: #1a865a; /* white text 4.6:1 */ --mh-success-deep: #15704b; --mh-success-soft: #e5f5ee; --mh-success-line: rgba(26, 134, 90, 0.3); /* the cut edge of success paper */ --mh-warning: #e9a23b; /* takes ink, not white, for text (6.8:1) */ --mh-warning-deep: #cc8a28; /* Ledges: a coloured stone's thickness, one step under its edge (its -deep colour at 88% lightness), as a light button's --mh-ink-faint ledge sits just under its --mh-line-strong edge: a darker band would read as a bigger, heavier button than the light ones beside it. */ --mh-blue-ledge: #1f5a98; --mh-info-ledge: #125b84; --mh-signal-ledge: #9f292e; --mh-success-ledge: #126342; --mh-warning-ledge: #b47923; --mh-warning-soft: #fdf3e3; --mh-warning-line: rgba(204, 138, 40, 0.38); --mh-warning-ink: #95651d; /* amber text on the soft amber (4.6:1) */ --mh-accent: #c2399b; /* the logo's magenta: items that join a placeholder to a quote */ --mh-accent-deep: #962a77; --mh-accent-soft: #fbeaf5; --mh-accent-line: rgba(194, 57, 155, 0.3); --mh-link: #1f8f5f; /* in-content links (the retained theme's green) */ --mh-main-brand: #65bcf1; /* main sidebar mark */ --mh-admin-brand: #e26d73; /* admin sidebar mark */ --mh-sidebar-mark: var(--mh-main-brand); /* the sidebar's mark; the sidebar sets its own (main or admin) */ --mh-on-accent: #ffffff; /* text on a colored fill */ /* Charts: eight series colours in a fixed order, the first the brand blue, then clay and garden hues that sit on the warm paper; checked together for colour-blind separation. A chart takes them in order and never repeats one: a ninth series and on fold into Other. Text beside a mark keeps the ink colours; the ochre is under 3:1 on paper, so it is always named on a legend line. */ --mh-chart-1: #2c78c5; /* blue */ --mh-chart-2: #d0643c; /* terracotta */ --mh-chart-3: #1f9a78; /* teal */ --mh-chart-4: #d99a1f; /* ochre */ --mh-chart-5: #d4708f; /* rose */ --mh-chart-6: #4f8a3c; /* moss */ --mh-chart-7: #6a5bc4; /* violet */ --mh-chart-8: #b0733a; /* amber brown */ --mh-chart-other: #a39d94; /* everything past the eighth, folded */ /* Surfaces */ --mh-paper: #fffefc; /* cards, the content panel and the top nav */ --mh-glass: rgba(255, 254, 252, 0.92); /* the top nav over scrolled content */ --mh-on-accent-line: rgba(255, 255, 255, 0.28); /* a divider inside a coloured button */ --mh-canvas: #f3f1ec; /* page ground and the footer */ --mh-subtle: #faf8f5; /* table heads, hovered rows, wells */ --mh-tint: #f4f1ec; /* the Admin column of the site menu */ --mh-charcoal: #211f1d; /* sidebar ground */ --mh-charcoal-deep: #1a1817; --mh-charcoal-ground: #151413; --mh-sidebar-ink: rgba(255, 255, 255, 0.62); --mh-sidebar-ink-strong: #ffffff; --mh-sidebar-hover: rgba(255, 255, 255, 0.06); --mh-sidebar-active: rgba(255, 255, 255, 0.10); /* Lines */ --mh-line: #e7e3dc; /* card and panel edges, the top nav's bottom edge */ --mh-line-soft: #f0ede8; /* dividers inside cards and menus, table rows */ --mh-line-strong: #d5d0c7; /* emphasised edges */ --mh-line-input: #d5d0c7; /* fields */ --mh-line-footer: rgba(90, 72, 48, 0.14); --mh-avatar-ring: rgba(44, 120, 197, 0.28); /* Ink */ --mh-ink: #1c1a17; /* headings and strong text */ --mh-ink-body: #3b3833; /* body text */ --mh-ink-muted: #6f6a63; /* secondary text, the top nav */ --mh-ink-soft: #a39d94; /* icons, placeholders */ --mh-ink-faint: #cac4ba; /* Title marks: the icon tile beside a page, card or form title, a small piece of warm stone pressed into the sheet with the icon in muted ink (it was blue on a blue tint; blue now only means "act here"). */ --mh-mark-ground: var(--mh-tint); --mh-mark-ink: var(--mh-ink-muted); /* Type */ --mh-font: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif; --mh-text: 14px; /* body */ --mh-text-nav: 13px; --mh-text-small: 12px; --mh-text-xs: 11px; --mh-text-lg: 16px; --mh-text-xl: 19px; /* card titles */ --mh-text-2xl: 24px; /* page titles */ --mh-text-3xl: 30px; /* figures */ --mh-leading: 1.5; --mh-leading-tight: 1.25; --mh-tracking-tight: -0.01em; --mh-tracking-caps: 0.06em; /* small capitals in table heads and labels */ /* Space, a 4px scale */ --mh-space-1: 4px; --mh-space-2: 8px; --mh-space-3: 12px; --mh-space-4: 16px; --mh-space-5: 20px; --mh-space-6: 24px; --mh-space-8: 32px; --mh-space-10: 40px; --mh-space-12: 48px; /* Radius */ --mh-radius-xs: 2px; /* status tags */ --mh-radius-sm: 3px; /* chips, badges, small buttons, event tiles */ --mh-radius: 4px; /* buttons, fields, insets */ --mh-radius-lg: 5px; /* menus, side widgets, inner panels */ --mh-radius-xl: 6px; /* cards and the content panel: paper, barely rounded */ --mh-radius-pill: 999px; --mh-radius-round: 50%; /* avatars */ /* Shadow: paper on a desk. Cards rest on the canvas with a resting shadow drawn after Material's 2dp (a short umbra, a penumbra and a faint ambient) at half its strength and rise to 4dp when hovered; buttons stand on a ledge (see the material tokens); insets are pressed in. */ --mh-shadow-xs: 0 1px 0 rgba(40, 30, 18, 0.035), 0 1px 2px rgba(40, 30, 18, 0.07); --mh-shadow-sm: 0 3px 1px -2px rgba(40, 30, 18, 0.09), 0 2px 2px rgba(40, 30, 18, 0.065), 0 1px 5px rgba(40, 30, 18, 0.055); /* cards and the content panel: resting, Material 2dp at half strength */ --mh-shadow-md: 0 1px 2px rgba(40, 30, 18, 0.05), 0 4px 8px -2px rgba(40, 30, 18, 0.07), 0 16px 26px -14px rgba(40, 30, 18, 0.2); --mh-shadow-nav: 0 1px 0 rgba(40, 30, 18, 0.05), 0 4px 12px -8px rgba(40, 30, 18, 0.12); --mh-shadow-menu: 0 0 0 1px rgba(40, 30, 18, 0.02), 0 4px 8px rgba(40, 30, 18, 0.06), 0 18px 36px -8px rgba(40, 30, 18, 0.2); --mh-shadow-lift: 0 5px 9px rgba(40, 30, 18, 0.12); /* buttons: one soft drop under the slab (Material Studies' Kaolin), its ledge drawn with it */ --mh-shadow-lift-hover: 0 5px 9px rgba(40, 30, 18, 0.12), 0 5px 9px rgba(40, 30, 18, 0.08); /* a hovered button, two pixels up: a second soft drop joins the first */ --mh-shadow-raise: 0 2px 4px -1px rgba(40, 30, 18, 0.09), 0 4px 5px rgba(40, 30, 18, 0.065), 0 1px 10px rgba(40, 30, 18, 0.055); /* a hovered card: the same sheet two steps higher (Material 4dp at half strength) */ --mh-shadow-paper: 0 1px 0 rgba(40, 30, 18, 0.03), 0 1px 2px -1px rgba(40, 30, 18, 0.14), 0 2px 4px -3px rgba(40, 30, 18, 0.12); /* coloured paper: calendar events, chips */ --mh-shadow-paper-raise: 0 1px 0 rgba(40, 30, 18, 0.03), 0 2px 3px -1px rgba(40, 30, 18, 0.12), 0 5px 9px -6px rgba(40, 30, 18, 0.18); --mh-shadow-press: inset 0 2px 4px rgba(40, 30, 18, 0.18), 0 1px 0 rgba(255, 255, 255, 0.5); /* a pressed button, set down into the sheet: shade inside, the sheet's lit edge below */ --mh-shadow-field: inset 0 1px 2px rgba(40, 30, 18, 0.07); /* fields: pressed slightly into the sheet */ --mh-shadow-pit: inset 0 1px 2px rgba(40, 30, 18, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.4); /* fields' kin: tracks and switches (a group inside a card is a band now, not a well) */ /* A note: a white sheet laid on the desk beside the work (the quote's side cards and posting cards), like a Post-it but white and physical: a crisp cut edge, a contact shade, and a soft lift that deepens toward the foot as a sheet that curls a little; its face is lit at the top. */ --mh-shadow-note: 0 0 0 1px rgba(40, 30, 18, 0.05), 0 1px 1px rgba(40, 30, 18, 0.05), 0 2px 3px -1px rgba(40, 30, 18, 0.07), 0 14px 18px -14px rgba(40, 30, 18, 0.34); --mh-note-face: linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(255, 255, 255, 0) 40%, rgba(120, 100, 70, 0.03) 100%); --mh-focus: 0 0 0 3px rgba(44, 120, 197, 0.26); /* Documents: a page read as paper, not as UI (the quote's proposal, a member's file): fine warm paper (an ivory face with a faint grain and a vellum sheen, a fine edge, a soft warm shadow on the desk), warm print ink, a refined serif for titles over Lato for the facts, hairline rules, half-inch margins; nothing inside the sheet is a box. */ --mh-doc-paper: #fcfaf5; /* the sheet: warm ivory */ --mh-doc-face: linear-gradient(130deg, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0) 55%, rgba(120, 100, 70, 0.025) 100%); /* a vellum sheen across the face */ --mh-doc-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .28 0 0 0 0 .18 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E"); /* the paper's tooth: warm flecks, felt not pattern */ --mh-doc-edge: #e7e2d8; /* the sheet's cut edge */ --mh-doc-ink: #34312d; /* warm print ink: titles and values (12.7:1) */ --mh-doc-ink-soft: #6f6a63; /* captions, labels and caps heads (5:1) */ --mh-doc-rule: #ebe6dd; /* hairlines between lines and rows */ --mh-doc-rule-strong: #d5cec2; /* section rules and the letterhead's fine double rule */ --mh-doc-stamp: #a8433a; /* a stamp's red ink (5.6:1) */ --mh-doc-font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; /* titles: Newsreader, bundled, so every machine shows the same face */ --mh-cell-x: 20px; /* a cell's inset from its own hairlines: the padding lives in the cells, not round the set */ --mh-cell-y: 12px; --mh-doc-margin: 40px; /* the page's head and foot margin */ --mh-doc-gutter: 28px; /* the inset of every line of text from the sheet's edge: rules and ruled cells run to the edge */ --mh-doc-cell-y: 14px; /* a cell's padding above and below its label and value */ --mh-doc-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.75), 0 1px 1px rgba(70, 55, 30, 0.04), 0 2px 5px rgba(70, 55, 30, 0.05), 0 16px 32px -18px rgba(70, 55, 30, 0.2); /* a sheet on the desk: a lit inner edge, a contact shade and a soft warm lift */ /* Material: bevels, sheens and textures (the old hatched and linen images, redrawn quietly) */ --mh-bevel: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* top light on raised light surfaces */ --mh-bevel-fill: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.16); /* filled wafers: a lit top edge and a sharp darker ledge at the bottom */ --mh-bevel-fill-lg: inset 0 1px 0 rgba(255, 255, 255, 0.2), inset 0 -3px 0 rgba(0, 0, 0, 0.17); /* large primary buttons: a deeper ledge */ --mh-bevel-edge: inset 0 -1px 0 rgba(0, 0, 0, 0.07); /* light wafers: a fine darker bottom edge */ --mh-bevel-lit: inset 0 1px 0 rgba(255, 255, 255, 0.1); /* a coloured stone's lit top edge: barely there, as a light one's white lip is on its white face (a brighter line reads as glass); its ledge is drawn under the face (--mh-ledge) */ --mh-ledge: 2px; /* a wafer's thickness: a band in --mh-wafer-edge under a filled button's face */ --mh-ledge-lg: 3px; /* large filled buttons */ --mh-ledge-light: 2px; /* light wafers: the same slab as the filled ones */ --mh-wafer-edge: var(--mh-ink-faint); /* the ledge's colour; each filled button sets its own -deep colour */ --mh-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 70%); --mh-sheen-stone: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0) 60%); /* a coloured stone's face: matte, the light buttons' faint top light in colour */ --mh-sheen-light: linear-gradient(180deg, #fffefc 0%, #faf8f5 100%); /* light wafers, segments */ --mh-toolbar: linear-gradient(180deg, rgba(252, 251, 248, 0.97) 0%, rgba(237, 234, 228, 0.96) 100%); /* the top nav and drawer toolbars: an El Capitan title bar, lit at the top, a shade darker at its foot */ --mh-sidebar-sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(0, 0, 0, 0.12) 100%); --mh-sidebar-edge: inset -1px 0 0 rgba(255, 255, 255, 0.04), 1px 0 0 rgba(0, 0, 0, 0.18); /* the sidebar's right edge */ --mh-texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* the canvas: a paper grain */ --mh-texture-grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* the sidebar: the same grain in light */ --mh-texture-stone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); /* button faces: a finer, slightly firmer grain (stone, not paper) */ --mh-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236f6a63' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* the select's chevron, in --mh-ink-muted */ --mh-check-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); /* a checked box's mark */ --mh-texture-stone-fill: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='d'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0'/%3E%3C/filter%3E%3Cfilter id='l'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23d)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23l)'/%3E%3C/svg%3E"); /* coloured stone: the light buttons' grain, dark flecks and light ones, so it reads on colour as theirs does on white */ --mh-texture-hatch: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.026) 0 1px, rgba(0, 0, 0, 0) 1px 7px); /* empty drop zones */ /* Motion */ --mh-ease: cubic-bezier(0.2, 0.8, 0.2, 1); --mh-fast: 120ms; --mh-base: 200ms; --mh-rise: 240ms; --mh-ease-rise: cubic-bezier(0.25, 0.8, 0.3, 1); /* hover raises settle in, never bounce */ /* Chrome geometry */ --mh-topnav-height: 64px; --mh-logo-height: 36px; --mh-avatar: 36px; --mh-control: 36px; /* fields and buttons */ --mh-control-sm: 30px; /* office forms: every field and button in a form is this tall */ --mh-control-xs: 24px; /* the smallest buttons and the switch's knob row */ --mh-field: 240px; /* a field standing alone (filters, dialogs, inline pickers) */ --mh-field-narrow: 140px; /* numbers, money, dates */ --mh-field-wide: 420px; /* long text and textareas standing alone */ --mh-check: 16px; /* checkboxes and radios */ --mh-switch-width: 34px; /* the switch's track */ --mh-switch-height: 20px; --mh-sidebar-width: 208px; --mh-sidebar-narrow: 72px; --mh-sidebar-compact: 72px; --mh-sidebar-closed: 72px; --mh-content-max: 1240px; --mh-content-gutter: 32px; /* canvas around the content panel */ --mh-panel-padding: 36px; /* inside the content panel */ --mh-sitemap-width: 420px; --mh-account-width: 220px; } /* On a phone the content sheet nearly fills the screen: a hairline of canvas around it and modest padding inside, so the paper is the page rather than a card floating in it. */ @media (max-width: 767px) { :root { --mh-content-gutter: 8px; --mh-panel-padding: 16px; --mh-cell-x: 14px; --mh-cell-y: 10px; --mh-doc-margin: 22px; --mh-doc-gutter: 16px; --mh-doc-cell-y: 11px; } }