/* ========================================================================== Effred ecosystem — design system -------------------------------------------------------------------------- One shell for every portal of Effred One: a strip of navigation, a rail, a dense data grid, Google Sans Flex with Google Sans Code for codes, one light theme. Flat surfaces, hairline borders, small radii and quiet shadows: the page is made of type and tables, not of decoration. Labels are short on purpose. A column is "Joined", not "Date of joining". Anything longer than two words belongs in a tooltip, not on the screen. Every time on screen is India Standard Time. ========================================================================== */ /* -- Light (default) ------------------------------------------------------ One palette, retuned. The product used to be blue on grey; it is now green on a soft sage ground, which is the one change that reaches all 117 screens without any of them being edited — every part of the kit reads its colour from here rather than carrying its own. Two rules survived the retune unchanged, because both are about legibility rather than taste: the semantic colours are TEXT colours and are dark enough for a 9 px pill to clear 4.5:1 on its own tint, and the graph tones are a second, brighter set for marks that only need 3:1. Never swap one for the other. -------------------------------------------------------------------------- */ :root{ /* surfaces. --bg is the page, --bg2 every card on it. The page is tinted and the card is white, which is what gives a screen of cards its edges without a border having to do all the work. */ --bg:#F1F4F2; --bg2:#fff; --bg3:#EAEFEC; --bgH:#E1E8E4; --bgI:#F7F9F8; --bd:#DDE4E0; --bdL:#EBF0ED; /* The edge of a control - an input, a select, a secondary button. A hairline that is right for a card is too faint to find a field by. */ --bdS:#C8D2CD; /* ink */ --tx:#16261F; --tx2:#3C4A44; /* Muted text. #64756D is what the new palette started at and it cleared 4.5:1 on white and 4.17:1 on the tinted card ground — which is where most of it actually sits: every .ki-sub, .cd-s, .hint and .agd-s in the product is muted text on --bg3 or on the page. Two steps darker clears 4.5:1 against all four surfaces the kit puts it on. */ --tx3:#5A6B63; /* Brand and semantics. These are TEXT colours — on a 9 px status pill they have to clear 4.5:1 against their own tint, which is why the greens and ambers are darker here than the portal accents below. */ --ac:#0E7A5C; --acBg:#E3F0EA; --acD:#0A5C46; --gn:#12704F; --gnBg:#E4F1EA; --am:#8A5206; --amBg:#FCEFDF; --rd:#AF3418; --rdBg:#FBEAE4; --bl:#1F5F9E; --blBg:#E9F1F8; --vi:#5744BC; --viBg:#EFEDFB; --te:#0A6E72; --teBg:#E2F1F1; --or:#A0521B; --orBg:#FBEEE3; --sl:#44564F; --slBg:#E9EEEB; /* Graph tones. Also GRAPHIC — a 3 px bar, a 2 px line, an arc. The text tones above are dark because a 9 px label on a tint has to clear 4.5:1; a chart drawn in them looks like mud, so these are the same hues at the saturation a chart wants. Never use one of these for text. */ --g-gn:#12996F; --g-rd:#E4572E; --g-am:#D98324; --g-bl:#2F6FB8; --g-vi:#6C5CE0; --g-te:#0E9AA0; --g-gy:#9EAAA4; /* Portal accents. These are GRAPHIC colours — icon strokes and 3 px rails, which need 3:1, not 4.5:1. Keeping them vivid is what stops the seven portals from turning into seven shades of the house green. */ --p-dash:#0E7A5C; --p-ems:#0E9AA0; --p-hrms:#5B58D6; --p-acct:#12996F; --p-docs:#B98311; --p-amc:#DD6B20; --p-legal:#7358CC; --p-admin:#44564F; --p-vend:#2F6FB8; /* shape. Three steps and no more: 6 on a control, 8 on a menu or a tile, 10 on a card or a dialog. Anything rounder read as a toy. */ --r:6px; --rl:8px; --rx:10px; --rp:999px; /* Shadows are tinted with the ink rather than pure black, and they are quiet: the border draws the edge, the shadow only lifts what floats. */ --sh:0 1px 1px rgba(22,38,31,.04); --shM:0 2px 8px rgba(22,38,31,.06),0 1px 2px rgba(22,38,31,.04); --shL:0 12px 32px rgba(22,38,31,.12),0 2px 6px rgba(22,38,31,.05); --ring:0 0 0 3px var(--acBg); /* type. Google Sans Flex is a variable face with an optical-size axis. Left on auto it draws 11 px text wider and sturdier than 24 px text, so small sizes need no tracking of their own and only display sizes are drawn in. The scale: 0 at 14 px and under, then three steps. `GSF Fallback` and `GSC Fallback` are local faces resized to the web faces' own metrics (declared under this block), so the page does not jump when the web font lands. */ --f:'Google Sans Flex','Google Sans','GSF Fallback',system-ui,-apple-system,'Segoe UI',sans-serif; --fm:'Google Sans Code','JetBrains Mono','GSC Fallback',ui-monospace,Consolas,monospace; --ls-t:-.005em; /* a title, 15 to 17 px */ --ls-h:-.012em; /* a heading, 18 to 24 px */ --ls-d:-.02em; /* display type, 26 px and up */ /* A large figure. Tabular digits sit wide in this face, so a value from 21 px up is drawn in a step further than words of the same size. */ --ls-n:-.02em; /* Weights are still 600 / 500 / 400. The face gains stroke at small optical sizes, so two roles take the step between: a card's own title, and a figure in a table column. */ --w-t:550; --w-n:450; --nav-h:56px; } /* -- Fallback faces ------------------------------------------------------- What the page is set in for the moment before the web font arrives, and for good where it never does. A local face, scaled to Google Sans Flex's own width at body sizes and given its ascent and descent, so a line of text takes the same room either way and nothing below it moves. Measured, not guessed: at 13 px the web face is 8.6% wider than Segoe UI and 7.8% wider than Arial, and 10% wider at 11 and 12 px, so 109%. Its ascent is .97 and its descent .29 of the em with no line gap; an override is a share of the ADJUSTED size, hence .97 / 1.09 and .29 / 1.09. Two weights, because one local file stretched to 600 is a smeared bold. The mono is the same sum over Consolas, whose advance is .55 em against Google Sans Code's .6; every other system mono is already .6 and needs nothing. */ @font-face{font-family:'GSF Fallback';font-style:normal;font-weight:400 499; src:local('Segoe UI'),local('Roboto'),local('Helvetica Neue'),local('Arial'); size-adjust:109%;ascent-override:89%;descent-override:26.6%;line-gap-override:0%} @font-face{font-family:'GSF Fallback';font-style:normal;font-weight:500 700; src:local('Segoe UI Semibold'),local('Roboto Medium'), local('Helvetica Neue Medium'),local('Arial Bold'); size-adjust:109%;ascent-override:89%;descent-override:26.6%;line-gap-override:0%} @font-face{font-family:'GSC Fallback';font-style:normal;font-weight:400 500; src:local('Consolas'); size-adjust:109.1%;ascent-override:88.9%;descent-override:26.6%;line-gap-override:0%} /* -- Base ----------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{font-family:var(--f);background:var(--bg);color:var(--tx);font-size:13px; min-height:100vh;-webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* Figures line up in a column. Every screen in this product is a column of numbers, and proportional digits make a total look ragged. */ font-variant-numeric:tabular-nums; /* The optical-size axis follows the type size by itself: small text is drawn open and sturdy, a headline tight. Never pin it. A code somebody types back - an IFSC, a PAN, a UTR - goes in .mono, where a `1`, an `l` and an `I` are three shapes and the zero is slashed; a code in a table column stays in this face (`td.mono`), and money is never mono. */ font-optical-sizing:auto; line-height:1.5;text-rendering:optimizeLegibility} ::selection{background:var(--ac);color:var(--acTx,#fff)} a{color:var(--ac);text-decoration:none} a:hover{text-decoration:underline} /* A control does not inherit the page's face: the browser gives a button, a select and a file picker its own system font, with proportional figures. A chip or a tab written as a