/* ============================================================================ PointERP word mark and the type it is set in. Shared by the start screen and the application's top panel, so the mark is defined once. There is no logo FILE: the name is set in Barlow with a red square riding on a pseudo element, exactly as on comtronic.pl and pointval.com. The square is sized in em, so changing the font size of the mark scales the square and its gap with it. Size and colour belong to the context that uses the mark, not here. Fonts are bundled rather than fetched from Google: these are the same files the two websites ship, so all three render identically and the login screen has no external dependency. Split by subset - latin-ext carries the Polish diacritics. WEIGHTS. The websites use 400/500/600 and nothing else. The application is built on Light: 59 of its rules ask for 300, so 300 is bundled here too, plus italics at 300 and 400 for the two rules that lean text. Sharing the family with the sites is one decision; sharing their weight ladder would be another, and a much bigger one - it would make every light surface in the application a step heavier. ========================================================================= */ @font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-300-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-300-normal.woff.html") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 300; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-300-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-300-normal.woff.html") format("woff"); 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; } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 300; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-300-italic.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-300-italic.woff.html") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 300; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-300-italic.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-300-italic.woff.html") format("woff"); 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; } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-400-italic.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-400-italic.woff.html") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: italic; font-weight: 400; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-400-italic.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-400-italic.woff.html") format("woff"); 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; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-400-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-400-normal.woff.html") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-400-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-400-normal.woff.html") format("woff"); 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; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-500-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-500-normal.woff.html") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-500-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-500-normal.woff.html") format("woff"); 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; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-600-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-ext-600-normal.woff.html") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/barlow-latin-600-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/barlow-latin-600-normal.woff.html") format("woff"); 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; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/ibm-plex-mono-latin-ext-400-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/ibm-plex-mono-latin-ext-400-normal.woff.html") format("woff"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/javax.faces.resource/fonts/googleapis/ibm-plex-mono-latin-400-normal.woff2.html") format("woff2"), url("/javax.faces.resource/fonts/googleapis/ibm-plex-mono-latin-400-normal.woff.html") format("woff"); 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; } /* -------------------------------------------------------------- word mark */ .brand-mark { font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif; font-weight: 600; letter-spacing: -0.025em; line-height: 1; white-space: nowrap; } /* Values taken from Wordmark.astro on the two websites, which is the mark as it actually renders there. The handover document says 0.42em for the side; the sites run 0.4em, and matching what ships wins. Everything is in em so the square, the gap and the lift follow the name whatever size it is set at. */ .brand-mark:after { content: ""; display: inline-block; width: 0.4em; height: 0.4em; margin-left: 0.28em; vertical-align: 0.08em; background: #eb1941; } /* ------------------------------------------------------------ page footer Shared by the start screen and the application, so the line that names the company and the build reads the same on both sides of the sign-in. Only the type lives here; each context keeps its own layout, because one footer sits under a rule in a narrow column and the other runs across the page. */ .login-footer { font-size: 0.8rem; } /* Machine data, so it keeps the utility face. Never wraps: a version number broken across two lines is unreadable when someone reads it back to us. */ .login-version { flex: 0 0 auto; white-space: nowrap; font-family: "IBM Plex Mono", ui-monospace, monospace; /* None at all, and a step under whatever line it sits in. The size is relative on purpose: the two footers are set differently - .8rem in the application, .765em on the start screen - so a fixed value would land below the text in one and above it in the other. The utility face carries a fixed, wide cell of its own, and at equal size it read louder than the company name beside it. */ letter-spacing: 0; font-size: 0.94em; } /* The bar between the company line and the build, with room on both sides so the two halves read as two things. */ .footer-sep { margin: 0 10px; opacity: 0.5; } /* A link in the footer line: it keeps the colour and weight of the line it sits in and answers only under the cursor. Used by the company name on the start screen and by the two document links in the application footer. */ .login-owner, .login-owner:visited { color: inherit; text-decoration: none; } .login-owner:hover, .login-owner:focus { color: var(--ink); text-decoration: underline; } /* ------------------------------------------------- terms and privacy policy Both documents are long, and they were set in Bootstrap defaults: a 2.5rem heading over 1rem body at the framework's own weight, which reads like a landing page rather than something to be read through. They take the application's own text instead - .94rem at weight 300 - and a heading the size of a page title, so the reader recognises the scale from the rest of the system. Scoped by the two modal ids: these rules travel with the documents wherever they are opened from, and touch nothing else on the page. The id also beats the .h1 / .h6 utility classes sitting on the elements themselves. */ #privacyPolicyFormModal .modal-body, #rulesPolicyFormModal .modal-body { font-size: 0.94rem; font-weight: 300; /* The ink the application reads in. The modals inherited the near-black of the framework, which at weight 300 over a long document reads harder than anything else in the system. */ color: var(--ink); /* Justified, because these are paragraphs of legal text and a ragged right edge over a hundred clauses reads as unfinished. The centring came from the message modals, which share the .r-modal class and are centred on purpose - the terms were being centred along with them. */ text-align: justify; } /* The browser links in the cookie section: the action colour, so they read as links rather than as body text that happens to be clickable. Underlined only under the cursor, like the rest of the system. */ #privacyPolicyFormModal .modal-body a, #rulesPolicyFormModal .modal-body a { color: var(--action); text-decoration: none; } #privacyPolicyFormModal .modal-body a:hover, #rulesPolicyFormModal .modal-body a:focus, #rulesPolicyFormModal .modal-body a:hover, #privacyPolicyFormModal .modal-body a:focus { text-decoration: underline; } /* Headings keep their own alignment; only the running text is justified. */ #privacyPolicyFormModal .modal-body h1, #rulesPolicyFormModal .modal-body h1, #privacyPolicyFormModal .modal-body h5, #rulesPolicyFormModal .modal-body h5 { text-align: center; } /* The wrapper carries .h6, which would pin the body back to 1rem. */ #privacyPolicyFormModal .modal-body .h6, #rulesPolicyFormModal .modal-body .h6 { font-size: inherit; font-weight: inherit; } #privacyPolicyFormModal h1, #rulesPolicyFormModal h1 { font-size: 1.5rem; font-weight: 600; }