/* ══════════════════════════════════════════════════════════════════════════ signin-modal.css — the sign-in modal. SST. turnerlee.com/shared/modals/v1/ --------------------------------------------------------------------------- Craig, 2026-08-24: "I'd like the sign in to become a modal pop-up instead of going to a whole new page when you don't have access ... Utilize a modal from the style guide, and make it happen for all sign-in instead of the page." THE COMPONENT IS NOT DEFINED HERE. `.egs-overlay`, `.egs-modal`, `.egs-head`, `.egs-kicker`, `.egs-body`, `.egs-intro`, `.egs-field`, `.egs-label`, `.egs-close`, `.egs-go` and `.egs-note` are §Modals 4 of the style guide and they live in ONE file — shared/modals/v1/estimate-send-modal.css. This sheet loads AFTER it and only says the three things that are specific to signing in. 1 THE HEADER BAND IS BRAND, NOT ORANGE. #ff7800 belongs to Send Estimates, which is a CTA inside the portal. Sign-in is the front door and it matches the rail it is opened from — var(--color1) with the same literal the rail itself falls back to. 2 EVERY COLOR CARRIES A LITERAL FALLBACK, and that is the whole reason this file is longer than three rules. Measured 2026-08-24 on turnerlee.com's home page: --color1, --attention, --PrimaryButtonColor, --PrimaryButtonTextColor and --font1Family are ALL UNSET there. The home page runs the Blank template, which declares no brand tokens, and this modal opens on it. The estate's own `.btn-primary` rule reads `var(--PrimaryButtonColor)` with no fallback, so a bare `btn btn-primary` paints NOTHING on that page — the same defect editor.css documents and restates around. The values below are that file's measured set, copied so the two agree rather than drift. 3 A BLANKET [hidden] RULE FOR THE WHOLE SUBTREE. `[hidden]{display:none}` is a UA rule and any author `display:` beats it, so `el.hidden = true` is a silent no-op on anything this component styles. One selector at the top covers the parts nobody has written yet. Consumers: Content/Snippets/sst-signin-modal.html (every page, via inc/head.tpl) and Content/SystemPages/401.html. Edit HERE, bump the ?v= in both. ══════════════════════════════════════════════════════════════════════════ */ .tlcsi-overlay [hidden], .tlcsi-card [hidden] { display: none !important; } /* The overlay sits above page chrome but BELOW the editor's veil/toaster (2147483000), which is the surface that reports whether a save worked. */ .tlcsi-overlay { z-index: 100000; } /* ── CRAIG'S OWN VALUES, 2026-08-24, pasted verbatim from the render he wants ── .egs-body { padding: 60px 60px 60px } .egs-modal { width: 60%; max-width: 600px; border-radius: 20px } They are applied HERE, on the sign-in card, and NOT to `.egs-modal` itself — that class is the live Send Estimates modal on the client portal and the guide's Modals 4, and neither was asked to change. Say the word and they move up into estimate-send-modal.css in one edit. TWO FLOORS ADDED, both declared rather than quietly folded in: `width: 60%` is a page-mode value — in the overlay it would be 60% of the viewport, which is 196px on a phone — so the floating card takes the cap and the 401 page takes the 60%; and 60px of padding is 120px of a 375px screen, so it steps down under 560. */ /* RADIUS MOVED UP 2026-08-24. border-radius:20px now lives on .egs-modal in estimate-send-modal.css and every modal in the estate inherits it — Craig asked for one radius, based on these two primaries. Only the WIDTH is still sign-in-specific: 600px against Send Estimates' 520px. */ .tlcsi-card.egs-modal { max-width: 600px; } .tlcsi-page .tlcsi-card.egs-modal { width: 60%; } /* THE SIDE PADDING IS A PERCENTAGE, AND THAT IS THE WHOLE POINT. Craig, 2026-08-24: "large device needs larger padding on the sides like this. It can decrease to a minimum of say 10% padding on responsive small screen. make sure responsive extra small devices is flexible that the padding and the width of the inputs is flexible to fit the phone perfectly." Measured off the render he sent: a 598px card with 118px of air each side — 19.7%. So 20% it is, and it is written as a PERCENT rather than the 60px literal because a percentage padding resolves against the card's own width, which is what makes the inputs inside it fluid at every size without a single width being declared on them. 60px would have been 16% of a 375px phone card one moment and 10% of a 600px one the next. The ramp stops at 10%, which is his floor. Vertical padding comes down with it — 60px of top padding on a phone is a third of the screen before the first field. */ .tlcsi-card.egs-modal .egs-body { padding: 60px 20%; } @media (max-width: 760px) { .tlcsi-page .tlcsi-card.egs-modal { width: 100%; } .tlcsi-card.egs-modal .egs-body { padding: 48px 14%; } } @media (max-width: 560px) { .tlcsi-card.egs-modal .egs-body { padding: 32px 10%; } /* The floating card's own gutter, so the card never touches the bezel. */ .tlcsi-overlay { padding: 16px; } /* REMEMBER AND FORGOT PASSWORD STOP SHARING A LINE WHEN THEY NO LONGER FIT ON ONE. Measured at 320px: the card is 288 wide, the content box 230, and the two together want 246 — so `white-space: nowrap` clipped the link to "Forgot Passw". A row that cannot fit is a row that has to wrap; the nowrap is what keeps it on ONE line at every width where one line is possible. */ .tlcsi-card.egs-modal .tlcsi-remember { flex-wrap: wrap; gap: 10px 16px; } .tlcsi-card.egs-modal .tlcsi-forgot { white-space: normal; } } /* SLIGHTLY ROUNDER CONTROLS, to sit inside a 20px card. Craig: "i think the buttons need slightly more radius corners by default. that may be across the board." Across the board is `--RadiusBrand` in the brand pipeline — it is 0 on this site, which is why the estate's buttons are square-ish — so that is his call and one token, not a sweep. This is the card only. */ .tlcsi-card.egs-modal .btn { border-radius: var(--ButtonBorderRadius, 10px); } .tlcsi-card.egs-modal .form-control { border-radius: 8px; } /* THE reCAPTCHA BADGE HAS TO CLEAR THE SCRIM. Craig, 2026-08-24: "that's the reCaptcha icon on the far right behind the panel, [and] that should be showing on the top layer [when the] sign in form modal appears." Measured: Google gives `.grecaptcha-badge` `position: fixed` and `z-index: auto`, so the overlay's 100000 buries it even though the badge is later in the document. It is not decoration — reCAPTCHA v3's terms require the badge to be visible wherever it is running, and the modal is exactly where it runs. The class goes on next to the scroll lock, so it exists only while the card is open and one selector reaches a node appended outside our subtree. */ .tlcsi-open .grecaptcha-badge { z-index: 100001 !important; } /* Remember on the left, the way out on the right, one line. */ .tlcsi-card.egs-modal .tlcsi-remember { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .tlcsi-card.egs-modal .tlcsi-remember .form-check { margin: 0; } .tlcsi-card.egs-modal .tlcsi-forgot { font-size: 14px; white-space: nowrap; } /* 1 — the band. Craig, 2026-08-24: "I think the color blue in the top of the modal is wrong. it shoudl match primary button." So it reads the SAME token the CTA below it reads, and they can never disagree again. It used to be --color1, which on the 401 template is a much lighter blue than that page's own Sign In button. */ .tlcsi-card { /* THE TOKEN IS RESOLVED ON THE CARD, NOT IN THE BAND, and that is not defensive style — it is a measured bug. On https://turnerlee.com/portal/all the 401 card's own `.egs-head` element carries a REDECLARED --PrimaryButtonColor of #00a0ff (and --color1 with it), while its parent `.egs-modal` and everything above it read #0079c1. So `var(--PrimaryButtonColor)` written inside the band resolved against the band's own scope and painted a band lighter than the button underneath it — the exact mismatch this change was made to remove. Reading the token here and inheriting the RESOLVED value down is what makes the two agree wherever this card is opened. */ --tlcsi-band: var(--PrimaryButtonColor, #0079c1); } .tlcsi-card .egs-head { background: var(--tlcsi-band, #0079c1); } /* CENTERED, and carrying !important for the same reason the left version did: `html body .sys-page h1..h6 { text-align: center !important }` on the 401 page and `.h1..h6 { text-align: var(--BrandAlign) }` everywhere else would otherwise give one component two alignments. Craig, 2026-08-24: "center 'SIGN IN' remove eyebrow" — so the band is now a title and nothing else. */ .tlcsi-card.egs-modal .egs-head h3 { color: #fff; /* THE H5 SETTING, IN THE PRIMARY FONT. Craig, 2026-08-24: "this should use primary font for Hypatia H5 setting in the header." `--h5font` is the brand's whole H5 shorthand — weight, style, size, line-height and family in one token — so reading it is what makes the title a real heading rather than a size someone picked. Measured 2026-08-24: Default brand `900 normal 100%/1.3 'HypatiaSans', …`, which is the literal fallback below, because the Blank template declares no tokens at all and a var() with nothing behind it falls back to INHERIT, not to the last value. IT IS WRITTEN OUT RATHER THAN READ FROM `--h5font`, and that is measured, not tidier. The token is the whole H5 shorthand and it is per BRAND: the Default brand's is `900 normal 100%/1.3 'HypatiaSans', …` but the Portal brand's is Open Sans 400, so reading it put the same sign-in card in two different faces AND two different weights depending on which page opened it — measured 900 on turnerlee.com and 400 on /portal/all. One component, one voice: the primary-font token for the face, the Default brand's H5 weight and rhythm for the rest. */ font-family: var(--font1Family, 'HypatiaSans', 'Helvetica Neue', Arial, Helvetica, sans-serif); font-weight: 900; font-size: 1.5rem; line-height: 1.3; text-align: center !important; /* Craig, 2026-08-24: "Headers must be capitalized." The 401 template uppercases its own headings and the overlay's page does not, so the same card read SIGN IN on one surface and Sign In on the other. Stated here, so the component decides rather than the page under it. */ text-transform: uppercase; } .tlcsi-card .egs-kicker { color: #fff; } /* NO ICON IN THE HEADER. Craig, 2026-08-24: "no icons in the header, ever." The rule is kept as a comment rather than a class so the next person who reaches for one reads why there is nowhere to put it. Modal 4's header is a kicker and a title and nothing else. NOTHING ELSE ABOUT THE SPACING IS RESTATED HERE EITHER, and that is the fix. This file previously overrode .egs-body's padding and gave .form-floating its own 14px margin, which is how a card built out of the component stopped looking like the component. The rhythm belongs to estimate-send-modal.css: body 22/26/26, .egs-field 18px, .egs-intro 18px, .egs-go 6px, .egs-note 10px. The one line below exists because a `.form-floating` nested inside an `.egs-field` would otherwise stack two margins — the same reason modal 4 writes `.egs-grid2 .form-floating { margin-bottom: 0 }`. */ .tlcsi-card .egs-field > .form-floating { margin-bottom: 0; } /* The failure message. Bootstrap's own alert, not a bespoke red — bootstrap is loaded on every page of this site. Reserved height is deliberate: the panel must not change size when the message appears, or the button moves out from under a cursor that is already on it. */ .tlcsi-card .tlcsi-err { margin: 0 0 16px; padding: 10px 14px; font-size: 13.5px; } /* 2 — the CTA and the cancel, restated with fallbacks. Values copied from shared/editor/v1/editor.css "STYLE-GUIDE CONTROL SKIN", which measured them off /ops/style-guide. Rest color and hover color are never listed together: a hover that repeats the rest value reads as a dead button. EVERY SELECTOR HERE IS `.tlcsi-card.egs-modal`, WHICH IS (0,4,0), AND THAT IS THE POINT. Measured 2026-08-24 on turnerlee.com's home page: the site ships `.onDrk .btn-outline-primary:not([disabled]) { color: white !important }` — also (0,4,0) — and `body.onDrk` is in play, so a (0,3,0) rule of ours lost even carrying !important, and Cancel rendered white-on-white. Two classes on the card itself rather than an `.onDrk` ancestor, because this card also has to win on the 401 page, where that ancestor is not there. */ .tlcsi-card.egs-modal .btn.btn-primary { background: var(--PrimaryButtonColor, #0079c1) !important; background-color: var(--PrimaryButtonColor, #0079c1) !important; color: var(--PrimaryButtonTextColor, #fff) !important; border: 0 !important; opacity: 1 !important; filter: none !important; } .tlcsi-card.egs-modal .btn.btn-primary:hover, .tlcsi-card.egs-modal .btn.btn-primary:focus { background: var(--PrimaryButtonHoverColor, #00c6ff) !important; background-color: var(--PrimaryButtonHoverColor, #00c6ff) !important; color: var(--PrimaryButtonTextHoverColor, #fff) !important; border: 0 !important; } .tlcsi-card.egs-modal .btn.btn-primary:active { background: var(--PrimaryButtonActiveColor, #0067a4) !important; background-color: var(--PrimaryButtonActiveColor, #0067a4) !important; color: var(--PrimaryButtonTextActiveColor, #fff) !important; border: 0 !important; } .tlcsi-card.egs-modal .btn.btn-outline-primary { background: #fff !important; background-color: #fff !important; color: var(--PrimaryButtonColor, #0079c1) !important; border: 2px solid var(--PrimaryButtonColor, #0079c1) !important; opacity: 1 !important; filter: none !important; } .tlcsi-card.egs-modal .btn.btn-outline-primary:hover, .tlcsi-card.egs-modal .btn.btn-outline-primary:focus { background: var(--PrimaryButtonColor, #0079c1) !important; background-color: var(--PrimaryButtonColor, #0079c1) !important; color: var(--PrimaryButtonTextColor, #fff) !important; } /* THE INK. This is the whole white-on-white class of bug and it is worth the paragraph, because nothing about it is visible in the markup. Measured 2026-08-24 on turnerlee.com's home page, which runs the Blank template and declares NO brand tokens. Four of the estate's own rules paint this card's contents and every one of them reads a custom property with no fallback: input[type="email"] color: var(--InputColorFocus) !important .form-floating > .form-control:focus ~ label color: var(--InputLabelColor) .form-check > label color: var(--RadioLabelColor) !important a, a:link color: var(--LinkColor) A `var()` naming a property that was never declared makes the declaration INVALID AT COMPUTED-VALUE TIME, which is not "ignore it and use what was there" — the property falls back to INHERIT. The page's ink is white, so every field, label, checkbox label and link in the card inherited white onto white paper. The controls were all present, correct and unreadable, which is why the first screenshot looked like fields that had failed to render. So each one is answered at higher specificity with a literal. Note `input[type="email"]` in that first rule carries NO `:focus` (the two before it in the list do), so it is not a focus-state fix — the field is white always. */ .tlcsi-card.egs-modal { color: #222; /* Modal 4 is LEFT-ALIGNED. The 401 challenge renders inside `.sys-page`, which the SignIn template centers, so the same card came out centered there and left here — two looks for one component. `.egs-note` keeps its own `text-align: center` from the component file. */ text-align: left; } .tlcsi-card.egs-modal input.form-control, .tlcsi-card.egs-modal input.form-control:focus { background-color: #fff !important; border: 1px solid #ced4da !important; color: #222 !important; } .tlcsi-card.egs-modal input.form-control:focus { border-color: var(--PrimaryButtonColor, #0079c1) !important; box-shadow: 0 0 0 .2rem rgba(0, 121, 193, .18); } .tlcsi-card.egs-modal .form-floating > label, .tlcsi-card.egs-modal .form-floating > .form-control:focus ~ label, .tlcsi-card.egs-modal .form-floating > .form-control:not(:placeholder-shown) ~ label { color: #6c757d !important; } .tlcsi-card.egs-modal .form-check > label, .tlcsi-card.egs-modal .form-check-label { color: #222 !important; } /* AUTOFILL. Craig, 2026-08-24: "when i typed in my name everything went white in the inputs!? It's still there, but that is very poor user interface." Chrome paints an autofilled field with its own background AND its own `-webkit-text-fill-color`, and text-fill-color OUTRANKS `color` on the glyphs — so the literal ink set above is simply not what is drawn. It has to be answered in its own property, on the four states Chrome uses, or the value the member just picked is invisible on white. */ .tlcsi-card.egs-modal input.form-control:-webkit-autofill, .tlcsi-card.egs-modal input.form-control:-webkit-autofill:hover, .tlcsi-card.egs-modal input.form-control:-webkit-autofill:focus, .tlcsi-card.egs-modal input.form-control:-webkit-autofill:active { -webkit-text-fill-color: #222 !important; -webkit-box-shadow: 0 0 0 1000px #fff inset !important; box-shadow: 0 0 0 1000px #fff inset !important; caret-color: #222; } .tlcsi-card.egs-modal a, .tlcsi-card.egs-modal a:link, .tlcsi-card.egs-modal a:visited { color: var(--PrimaryButtonColor, #0079c1) !important; } /* THE REMEMBER-ME BOX, same disease one level deeper. The site hides the real `` (`display:none`, measured) and draws the box as `label::before`, which is the correct estate component — but its CHECKED state is `background-color: var(--PrimaryButtonColor) !important` and `border: 1.5px solid var(--PrimaryButtonHoverColor)`, so on a page with no brand tokens the fill is invalid and the box paints EMPTY. The input is checked, the form posts RememberMe=true, and the control says the opposite — which is worse than an unstyled box, because the member reads it and unticks nothing. Restated with the same literals as the buttons. Do NOT "fix" this by showing the native input instead: the pseudo box is the component, and two of them would appear on every page that does declare its tokens. */ .tlcsi-card.egs-modal .form-check-input[type="checkbox"] + label::before { background-color: var(--InputBgColor, #fff); border: 1px solid var(--InputLabelColor, #ced4da); } .tlcsi-card.egs-modal .form-check-input[type="checkbox"]:checked + label::before { background-color: var(--PrimaryButtonColor, #0079c1) !important; border: 1.5px solid var(--PrimaryButtonHoverColor, #00c6ff) !important; } /* THE 401 PAGE WEARS THE SAME CARD. Treepl has already navigated by the time that page renders, so there is no page underneath to overlay — the card is centered in the content column instead of floating, and nothing else about it changes. One component, two situations. */ .tlcsi-page { display: flex; justify-content: center; padding: 40px 16px 90px; } .tlcsi-page .egs-modal { margin: 0 auto; } /* ══════════════════════════════════════════════════════════════════════════ THE PAGE-TRANSITION LOADER, MADE VISIBLE ON A TOKEN-LESS PAGE. Craig, 2026-08-24: "We also need a loading animation on the very top of everything ... We need to know once we've hit sign in that it is actually trying to load." The loader itself is the site's own — `.load-center` / `#preloader-markup`, already in sst-styles.css at z-index 2147483000 / 2147483002, which is above this card and above everything else on the page. Two things stopped it being any use here, and the second is the fourth instance of the same disease today: 1. It was not on the page at all. page-transition-spinner.js is a FOOTER script and the Blank template omits the footer, so `#mdb-load-spinner` did not exist. sst-signin-modal.html now builds that element from the same script's own markup. 2. Its arc is `border-color: var(--attention) !important` — sst-3rdparty.css line 968 — and `--attention` is UNSET on the Blank template, so the declaration is invalid, the color falls back to INHERIT, and the spinner painted white on a white sheet. Measured 2026-08-24. The fallback is added at the same place, with the token still read first so a page that HAS it is unchanged. Scoped to the loader's own id, so nothing else that uses these MDB classes is touched. ══════════════════════════════════════════════════════════════════════════ */ #mdb-load-spinner .preloader-wrapper .spinner-primary-color, #mdb-load-spinner .preloader-wrapper .spinner-primary-color-only, #mdb-load-spinner .preloader-wrapper .spinner-layer { border-color: var(--attention, var(--PrimaryButtonColor, #0079c1)) !important; } /* AND THE ARC ITSELF HAS TO BE DRAWN HERE, because MDB's is not reliably on the page. With the color fixed the spinner was STILL invisible — measured: the wrapper 75x75, visible, opacity 1, arc rgb(0,121,193) at 4px, and nothing painted, because MDB's `.spinner-layer` ships at `opacity: 0` and is only revealed by keyframes that sst-3rdparty.css does not carry. The estate already answered this once: feedback.css writes the whole recipe out under `.tlc-veil` for exactly this reason, with its own `tlcFb-*` keyframes. These are those declarations, same values, re-scoped to the loader — and they REUSE feedback.css's keyframes rather than declaring a second set, because feedback.css is loaded on every page of this site. */ #mdb-load-spinner .preloader-wrapper { position: relative; display: inline-block; width: 54.4px; height: 54.4px; font-size: 0; animation: tlcFb-rotate 1568ms linear infinite; } #mdb-load-spinner .preloader-wrapper.crazy { animation-duration: 333ms; } #mdb-load-spinner .spinner-layer { position: absolute; width: 100%; height: 100%; opacity: 1; animation: tlcFb-fill 5332ms cubic-bezier(.4, 0, .2, 1) infinite both; } #mdb-load-spinner .gap-patch { position: absolute; top: 0; left: 45%; width: 10%; height: 100%; overflow: hidden; border-color: inherit; } #mdb-load-spinner .gap-patch .circle { left: -450%; width: 1000%; } #mdb-load-spinner .circle-clipper { position: relative; display: inline-block; width: 50%; height: 100%; overflow: hidden; border-color: inherit; } #mdb-load-spinner .circle-clipper .circle { position: absolute; top: 0; right: 0; bottom: 0; width: 200%; height: 100%; border-color: inherit; border-style: solid; border-width: 3.6px; border-bottom-color: transparent; border-radius: 50%; } #mdb-load-spinner .circle-clipper.left .circle { left: 0; border-right-color: transparent; transform: rotate(129deg); animation: tlcFb-left 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; } #mdb-load-spinner .circle-clipper.right .circle { left: -100%; border-left-color: transparent; transform: rotate(-129deg); animation: tlcFb-right 1333ms cubic-bezier(.4, 0, .2, 1) infinite both; } /* ══════════════════════════════════════════════════════════════════════════ SIGNING IN: THE CARD STAYS, THE TINT IS BRAND, THE SPINNER IS OVER IT. Craig, 2026-08-24: "I don't think the white fade in overlay is appropriate on the BG ... it may be best to leave it color1 and always go with the brands number one color ... the modal needs to stay on top of the [tint] because we need to have a feeling that it's signing in — the sign in window hasn't moved ... let the spinner spin [on top] so we know we're signing in. maybe we could even add some text small and subtle below the spinner that says 'SIGNING YOU IN'." THE STACK IS THE WHOLE ANSWER, and it is three numbers that already existed: .load-bg 2147483000 the tint, now brand .tlcsi-overlay 2147483001 the card, ABOVE the tint — it does not fade #preloader-markup 2147483002 the arc, above the card So the page dims to the brand color, the card the visitor just pressed stays exactly where it was at full strength, and the arc turns over it. Nothing moves, which is the point: a card that fades out at the moment of the press reads as the press having dismissed it. The tint is `--color1` with the same literal the home rail falls back to, so it is the brand's own first color wherever this opens and never the white sheet the page-transition loader wears by default. Raised only while `.tlcsi-open` is on , so the loader is unchanged everywhere else on the site. ══════════════════════════════════════════════════════════════════════════ */ /* THE TINT AND THE ARC ARE TWO LAYERS, AND THEY HAD TO BE SPLIT. The first cut put the loader's own `.load-bg` behind the card at 2147483000 and the card at 2147483001, expecting `#preloader-markup`'s 2147483002 to paint over the card. IT CANNOT: that element is a CHILD of `.load-center`, so its z-index is resolved INSIDE that element's stacking context and can never climb past its own parent. Measured — brand tint correct, card correct, arc nowhere on screen. So the dim is done by the card's OWN scrim, which is already behind the card and inside the same element, and the loader is lifted above everything and contributes only the arc. Three layers, one number each: .tlcsi-overlay 100000 the brand tint, with the card above it .tlcsi-card (in flow) untouched, full strength, does not move #mdb-load-spinner 2147483003 the arc and its caption, over the card `.load-bg` is switched off rather than recolored — two dimming layers on one screen read as a mistake, and the card's scrim is the one that leaves the card above it. */ /* THE TINT IS A PSEUDO-ELEMENT, NOT THE OVERLAY'S OWN OPACITY. `opacity` on the overlay would fade the CARD with it — the card is its child — and a card that dims at the moment of the press is the thing this whole change exists to avoid. A `::before` at `inset:0` takes the translucency on its own, so the page stays faintly present behind the brand field and the card stays crisp. */ .tlcsi-open .tlcsi-overlay.egs-overlay { background: transparent; } .tlcsi-open .tlcsi-overlay.egs-overlay::before { content: ""; position: absolute; inset: 0; background: var(--color1, #005c8a); opacity: .94; } .tlcsi-open .tlcsi-overlay.egs-overlay .tlcsi-card { box-shadow: 0 30px 70px -20px rgba(0,0,0,.5); } .tlcsi-open #mdb-load-spinner { z-index: 2147483003 !important; } .tlcsi-open #mdb-load-spinner .load-bg { display: none; } /* AND THE ARC MOVES OUT FROM UNDER THE CARD. Centred in the viewport it landed across the Remember row with the caption printed over the SIGN IN button — legible to nobody. Below the card it has the brand field to itself, which is also where the eye goes after pressing a full-width button. */ /* WHITE ARC ON THE BRAND FIELD. The loader's default is `--attention` / `--PrimaryButtonColor`, which is correct on the near-white sheet it normally wears and is brand-blue-on-brand-blue here — measured, and barely visible. The caption beside it is already white for the same reason. */ .tlcsi-open #mdb-load-spinner .spinner-layer, .tlcsi-open #mdb-load-spinner .circle-clipper .circle { border-color: #fff !important; } .tlcsi-open #mdb-load-spinner .circle-clipper .circle { border-bottom-color: transparent !important; } .tlcsi-open #mdb-load-spinner .circle-clipper.left .circle { border-right-color: transparent !important; } .tlcsi-open #mdb-load-spinner .circle-clipper.right .circle { border-left-color: transparent !important; } .tlcsi-open #mdb-load-spinner #preloader-markup { top: auto; bottom: 10vh; transform: translateX(-50%); text-align: center; } /* The caption. Small, subtle, and under the arc — it says which wait this is, which a bare spinner cannot. White because it sits on the brand tint. */ #mdb-load-spinner .tlcsi-loading-note { margin-top: 14px; font-family: var(--font1Family, 'HypatiaSans', 'Helvetica Neue', Arial, Helvetica, sans-serif); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .82); white-space: nowrap; }