/* SYSTEM: 2.0 * ========================================================================================== * THE CLIENT INTAKE PORTAL -- STYLESHEET * * This is a CLIENT-FACING surface. Everything below follows from that one fact. * * 1. MOBILE FIRST, NOT MOBILE-TOLERANT. Every rule outside the one media query at the bottom * is written for a phone held in one hand. The desktop layout is the adaptation, and it is * twelve lines long. The client is going to open this from an email on a phone; that is the * real screen and it gets the real design. * * 2. NO OPERATOR CHROME. There is no rail, no sidebar, no toolbar, no table. One column, one * thing to do. The Client Manager stylesheet this palette comes from has all of those and * they are all deliberately absent here. * * 3. THE STATUS COLOURS CARRY MEANING, AND ONLY THREE THINGS MAY SAY THEM. * GREEN means done. Nothing else may be green -- not a heading, not a button, not a tick * on something that is merely started. If green appears, a step is finished. * BLUE means in progress. NEUTRAL means not started. * THERE IS NO RED IN THIS FILE. Not as an error colour, not as a warning, not as a border. * A client who cannot open their link has not done anything wrong, and a red screen tells * them they have. The one failure surface in this project is styled exactly like the * ordinary ones. * * 4. EVERY COLOUR IS A TOKEN. No hex below the token block. The brand navy and blue are copied * character for character from itv-client-manager/css/app.css, which copied them from the * company's own live stylesheet. If the brand changes it changes there first. * * 5. CONTRAST IS MEASURED, NOT ASSUMED. Every ratio in a comment below was computed off the two * hex values it names, not estimated. The lowest pairing on the page is 4.78:1. * ========================================================================================== */ /* ========================================================================================== 01 TOKENS ========================================================================================== */ :root { /* ---- BRAND -- copied from itv-client-manager/css/app.css, not chosen here --------------- */ --brand-navy: #063a6c; /* the header bar. THE company colour */ --brand-blue: #2494e0; /* the bright half of the brand */ --on-brand: #ffffff; /* text on navy -- 11.48:1 */ --on-brand-dim: #b9d9f5; /* secondary text on navy -- 7.82:1 */ /* ---- VIOLET -- the primary action, and the one thing this surface has that the operator * tools do not. A client-facing button should not be the same colour as an operator's Save. * White on --violet is 7.98:1; on --violet-strong it is 9.60:1. */ --violet: #5b2ec4; --violet-strong: #4a2aa8; /* pressed / hovered */ --on-violet: #ffffff; --violet-ring: rgba(91, 46, 196, .28); /* the focus ring */ /* ---- SURFACES -------------------------------------------------------------------------- */ --bg: #f6f8fb; /* the page */ --panel: #ffffff; /* a card */ --panel-2: #f1f4f9; /* a quiet fill */ --line: #e4e9f0; /* hairline */ --line-strong: #d3dae4; /* ---- TEXT ------------------------------------------------------------------------------ */ --ink: #101828; /* body -- 17.75:1 on a card */ --ink-dim: #4e5a6a; /* secondary -- 7.01:1 on a card */ --ink-mute: #5a6675; /* meta -- 5.85:1 on a card */ /* ---- THE THREE STATUS COLOURS ---------------------------------------------------------- */ --done-ink: #116b39; /* on --done-bg -- 5.81:1 */ --done-bg: #e6f4ec; --done-edge: #bfe3cd; --doing-ink: #0e5aa6; /* on --doing-bg -- 5.91:1 */ --doing-bg: #e4eefb; --doing-edge: #c4dcf6; --todo-ink: #4e5a6a; /* on --todo-bg -- 6.19:1 */ --todo-bg: #eef1f6; --todo-edge: #dfe4ec; /* ---- SHAPE ----------------------------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; --shadow-card: 0 1px 2px rgba(16, 24, 40, .04), 0 6px 20px rgba(16, 24, 40, .06); --shadow-lift: 0 2px 4px rgba(16, 24, 40, .06), 0 12px 28px rgba(16, 24, 40, .10); /* ---- SPACE ----------------------------------------------------------------------------- */ --gap-1: 4px; --gap-2: 8px; --gap-3: 12px; --gap-4: 16px; --gap-5: 24px; --gap-6: 32px; --gap-7: 48px; /* ---- TYPE ------------------------------------------------------------------------------ * System stack only. A webfont is a second request before the client can read anything, and * on a phone on a bad signal that is the difference between "it opened" and "it is broken". */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ========================================================================================== 02 RESET AND BASE ========================================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; /* iOS must not resize our type when the phone rotates */ } body { margin: 0; min-height: 100vh; font-family: var(--font); /* 17px, not 16. This is read by people who are not looking at screens all day. */ font-size: 17px; line-height: 1.55; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } /* Nothing on this site is decorative-motion. One transition, and it is off for anybody who has asked their machine for less. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ========================================================================================== 03 THE SHELL ========================================================================================== */ .site-header { background: var(--brand-navy); color: var(--on-brand); padding: var(--gap-4) var(--gap-4); } .wordmark { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: .2px; color: var(--on-brand); } .wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: var(--gap-6) var(--gap-4) var(--gap-7); } .site-footer { padding: 0 var(--gap-4) var(--gap-6); text-align: center; color: var(--ink-mute); font-size: 14px; } /* ========================================================================================== 04 PAGE HEAD AND COPY ========================================================================================== */ .page-title { margin: 0 0 var(--gap-3); font-size: 27px; line-height: 1.25; font-weight: 700; letter-spacing: -.2px; /* A name can be long and it can be one unbroken word. Neither may push the page sideways. */ overflow-wrap: anywhere; } .lede { margin: 0 0 var(--gap-5); color: var(--ink-dim); font-size: 17px; } .section-label { margin: 0 0 var(--gap-3); font-size: 13px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--ink-mute); } /* ========================================================================================== 05 THE STEP LIST -- the whole point of the checklist screen ========================================================================================== */ .step-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--gap-3); } /* * ONE TAP TARGET PER STEP, AND IT IS THE WHOLE CARD. * * Not a "Start" link inside a card -- the card. A small link inside a large box is the single * most common way a phone screen becomes annoying: the thing that looks tappable is tappable * and the 90% of it that also looks tappable is not. min-height is 76px against a 44px floor, * because this is the only control on the screen and it can afford to be generous. */ .step-card { display: flex; align-items: center; gap: var(--gap-4); width: 100%; min-height: 76px; padding: var(--gap-4); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; } .step-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); } .step-card:active { transform: translateY(1px); } .step-card:focus-visible { outline: 3px solid var(--violet-ring); outline-offset: 2px; border-color: var(--violet); } /* The number. Quiet on purpose -- it is an ordering aid, not a label, and the client is looking for the words next to it. */ .step-num { flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill); background: var(--panel-2); color: var(--ink-dim); font-size: 15px; font-weight: 700; } .step-body { flex: 1 1 auto; min-width: 0; /* lets a long name wrap instead of stretching the flex row */ } .step-name { display: block; font-size: 17px; font-weight: 600; color: var(--ink); overflow-wrap: anywhere; } .step-meta { display: block; margin-top: var(--gap-1); font-size: 14px; color: var(--ink-mute); } /* The chevron. A pure affordance; it says "this goes somewhere" without any words. */ .step-go { flex: 0 0 auto; width: 10px; height: 10px; border-right: 2px solid var(--ink-mute); border-bottom: 2px solid var(--ink-mute); transform: rotate(-45deg); } /* ========================================================================================== 06 THE STATUS CHIP -- THE ONLY THING ON THIS SITE THAT MAY USE THE STATUS COLOURS ========================================================================================== */ .chip { display: inline-block; padding: 3px 10px; border-radius: var(--r-pill); border: 1px solid; font-size: 13px; font-weight: 600; white-space: nowrap; } /* NOT STARTED. Neutral, and neutral is correct -- an untouched step is not a problem. */ .chip--todo { color: var(--todo-ink); background: var(--todo-bg); border-color: var(--todo-edge); } /* IN PROGRESS. Blue, the brand's own colour. */ .chip--doing { color: var(--doing-ink); background: var(--doing-bg); border-color: var(--doing-edge); } /* DONE. The only green in the file. */ .chip--done { color: var(--done-ink); background: var(--done-bg); border-color: var(--done-edge); } /* ========================================================================================== 07 CARDS AND BUTTONS ========================================================================================== */ .card { padding: var(--gap-5); background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-card); } .card > :first-child { margin-top: 0; } .card > :last-child { margin-bottom: 0; } .card-title { margin: 0 0 var(--gap-3); font-size: 20px; font-weight: 700; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 var(--gap-5); border: 1px solid transparent; border-radius: var(--r-md); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .btn:focus-visible { outline: 3px solid var(--violet-ring); outline-offset: 2px; } .btn--primary { background: var(--violet); color: var(--on-violet); } .btn--primary:hover { background: var(--violet-strong); } .btn--quiet { background: var(--panel); color: var(--ink-dim); border-color: var(--line-strong); } .btn--quiet:hover { background: var(--panel-2); } .btn--block { display: flex; width: 100%; } /* The back link on a step screen. A link, not a button -- going back is not an action with a consequence, and giving it a button's weight would suggest it is. It keeps a 44px target anyway, because it is the only way off this screen on a phone. */ .back-link { display: inline-flex; align-items: center; gap: var(--gap-2); min-height: 44px; margin-bottom: var(--gap-3); color: var(--doing-ink); font-size: 16px; font-weight: 600; text-decoration: none; } .back-link:hover { text-decoration: underline; } .back-link:focus-visible { outline: 3px solid var(--violet-ring); outline-offset: 3px; border-radius: var(--r-sm); } .back-arrow { width: 9px; height: 9px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); } /* ========================================================================================== 08 THE WAITING STATE ========================================================================================== */ /* * A calm line of text and nothing else. No spinner, no skeleton, no progress bar. * * It is also NOT announced the instant the page paints: the CSS delays it, so a fast lookup -- * which is most of them -- shows nothing at all rather than flashing "one moment" for 80ms. * A flicker reads as a fault. */ .waiting { color: var(--ink-mute); font-size: 17px; opacity: 0; animation: fade-in .2s ease .5s forwards; } @keyframes fade-in { to { opacity: 1; } } /* ========================================================================================== 09 UTILITIES ========================================================================================== */ .stack { display: flex; flex-direction: column; gap: var(--gap-4); } .mt-5 { margin-top: var(--gap-5); } .mt-6 { margin-top: var(--gap-6); } .muted { color: var(--ink-mute); font-size: 15px; } /* Visible to a screen reader, invisible on screen. Used for the live region that announces a screen change to somebody who cannot see that the page has redrawn. */ .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ========================================================================================== 10 WIDER SCREENS -- the adaptation, and it is deliberately small ========================================================================================== */ @media (min-width: 720px) { .site-header { padding: var(--gap-4) var(--gap-6); } .wrap { padding: var(--gap-7) var(--gap-5) var(--gap-7); } .page-title { font-size: 34px; } .step-card { padding: var(--gap-5); min-height: 84px; } .btn--block { display: inline-flex; width: auto; } }