/* * Public business signup - resources/views/platform/signup.blade.php * * --------------------------------------------------------------------------- * SCOPED UNDER .signup, every rule of it * --------------------------------------------------------------------------- * The page renders inside layouts.auth2, which carries the ERP's skin classes on * and loads app.css, vendor.css (Bootstrap 3) and the BS3->4 bridge. An * unscoped rule here would follow the visitor into the ERP on any page that happens * to load this file. * * The flip side is that every rule must OUT-SPECIFY that stack. `.signup .form-control` * is (0,2,0) against Bootstrap's (0,1,0), which is why the controls below are written * as descendants rather than as bare classes. Where the theme used !important, so does * this file - and each of those is commented with what it is beating. * * --------------------------------------------------------------------------- * The outer split is CSS grid, and that is a BUG FIX * --------------------------------------------------------------------------- * It used to be `.row.no-gutters` with `.col-lg-5`/`.col-lg-7`. `.no-gutters` is * defined in public/assets/css/all.css; public/css/vendor.css (Bootstrap 3) loads * AFTER it and redefines `.row { margin: 0 -15px }` at the same specificity, so the * later rule won and the panel hung 15px past the viewport at EVERY width - desktop * included. Two columns do not need a 12-column grid, and a grid has no margins to * lose. The form's own two-up rows are `.signup-row` for the same reason. * * --------------------------------------------------------------------------- * Type * --------------------------------------------------------------------------- * Poppins throughout, from the ERP's own self-hosted copy (public/fonts/poppins, * loaded by include.head and already applied globally by assets/css/all.css). * * IN PIXELS, NOT REM, AND THAT IS DELIBERATE. public/css/vendor.css pins the root: * * html { font-size: 10px; } * * so every rem on this page resolves against 10px, not 16px. Written as rem the scale * rendered at 62.5% of its intended size - measured, not guessed: labels came out at * 8.75px and the inputs at 10px, which is under the 16px threshold that makes iOS * Safari zoom on focus. Because that root is an absolute pin rather than a percentage, * rem also buys no user-font-size scaling here, so px costs nothing and cannot be * silently rescaled by a stylesheet this page does not own. */ .signup { /* * ---- palette: the ERP admin's, not the operator panel's ---- * * Read off the running ERP rather than invented. A tenant's staff sign in at * /admin/login on their own hostname, and this page is the step before that - * so it belongs to the ERP's world, and looking like the platform's private * operator panel would make the two feel like different products. * * #ecf0f5 content background .content-wrapper (vendor.css) * #525f7f body text computed colour * #1572e8 primary / links .text-primary on the login screen * #3c8dbc primary button the login screen's own CTA * #d2d6de control borders the ERP's input border */ --su-ink: #3b3f5c; --su-ink-2: #525f7f; --su-ink-soft: #888ea8; --su-line: #e0e6ed; --su-line-strong: #d2d6de; --su-bg: #ecf0f5; --su-surface: #ffffff; --su-surface-2: #f7f9fc; --su-brand: #1572e8; --su-brand-tint: rgba(21, 114, 232, .08); /* The button blue is the login screen's, which is the next page these people * see. Hover/active are AdminLTE's own steps down from it. */ --su-btn: #3c8dbc; --su-btn-dark: #367fa9; --su-btn-darker: #2b6a8f; --su-banner-from: #3c8dbc; --su-banner-to: #1b3a52; --su-ok: #1a9e5c; --su-ok-tint: rgba(26, 158, 92, .1); --su-error: #e7515a; --su-error-tint: rgba(231, 81, 90, .08); /* ---- type scale: 1.200 on a 16px base ---- */ --su-fs-display: 34px; /* banner heading */ --su-fs-h1: 26px; /* panel heading */ --su-fs-h2: 17px; /* card title */ --su-fs-base: 16px; /* inputs - the iOS no-zoom floor, held deliberately */ --su-fs-body: 15px; /* the ERP's own body size */ --su-fs-sm: 14px; /* labels */ --su-fs-xs: 13px; /* help text, captions */ /* ---- spacing: 4px base, nothing off-scale ---- */ --su-s1: 4px; --su-s2: 8px; --su-s3: 12px; --su-s4: 16px; --su-s5: 20px; --su-s6: 24px; --su-s8: 32px; --su-s10: 40px; --su-s12: 48px; /* The ERP is flat - its inputs and buttons compute to a 1.7px radius. 4px keeps * that character without the hard corner reading as unfinished. */ --su-radius: 4px; --su-radius-sm: 3px; /* AdminLTE's box shadow, which is what every card in this ERP already wears. */ --su-shadow-sm: 0 1px 1px rgba(0, 0, 0, .1); --su-shadow-md: 0 2px 6px rgba(0, 0, 0, .12); /* Every interactive element gets this. outline:none with no replacement is a * defect, not a style. */ --su-focus: 0 0 0 2px var(--su-surface), 0 0 0 4px var(--su-brand); background: var(--su-bg); color: var(--su-ink); font-size: var(--su-fs-base); line-height: 1.55; min-height: 100vh; } /* * The split. `minmax(0, …)` on both tracks rather than bare fractions: a grid item's * default min-width is auto, so one long unbreakable string (a hostname) would push * the track wider than its share and reintroduce the sideways scroll this replaced. */ .signup .signup-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: 100vh; } /* ========================================================================== * Left: the banner * ========================================================================== */ /* * Three zones stacked: the brand row, the pitch (which takes the slack), and the * module list along the bottom. space-between rather than absolute positioning - * an earlier attempt pinned the brand and it resolved against the centred inner * block, landing on top of the heading. */ .signup .signup-banner { position: relative; display: flex; flex-direction: column; background: radial-gradient(120% 80% at 12% 0%, rgba(93, 173, 216, .45) 0%, transparent 62%), linear-gradient(160deg, var(--su-banner-from) 0%, var(--su-banner-to) 100%); padding: var(--su-s8) var(--su-s10) var(--su-s6); overflow: hidden; } /* * COLOUR IS STATED, NOT INHERITED, on every text node in this panel. * * app.css sets a dark colour on `p`, `span`, `strong` and `li` DIRECTLY. A direct * rule beats an inherited one whatever the parent's specificity, so `color: #fff` on * the banner alone left the lede and the bullets rendering dark navy on dark blue - * present, and invisible. Opacity varies the emphasis; the colour is repeated. */ .signup .signup-banner, .signup .signup-banner h1, .signup .signup-banner p, .signup .signup-banner li, .signup .signup-banner span, .signup .signup-banner strong, .signup .signup-banner i { color: #fff; } .signup .signup-banner-top { display: flex; align-items: center; justify-content: space-between; gap: var(--su-s4); flex: 0 0 auto; } .signup .signup-banner-inner { /* Takes the slack, and centres the pitch inside it. */ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 460px; margin: 0 auto; padding: var(--su-s8) 0; } /* ---- brand + pill ---- */ .signup .signup-brand { display: flex; align-items: center; gap: var(--su-s3); } /* A white plate behind the mark, as a real logo would sit on. It also means a future * logo file with its own colours drops straight in without fighting the gradient. */ .signup .signup-brand-mark { width: 42px; height: 42px; flex: 0 0 auto; display: block; } .signup .signup-brand-mark-bg { fill: rgba(255, 255, 255, .95); stroke: none; } .signup .signup-brand-mark-text { fill: #1b3a52; font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: .01em; } .signup .signup-brand-word { font-size: 17px; font-weight: 600; } .signup .signup-pill { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .2); font-size: var(--su-fs-xs); font-weight: 500; white-space: nowrap; } /* ---- pitch ---- */ .signup .signup-banner-heading { font-size: var(--su-fs-display); line-height: 1.22; font-weight: 600; margin: 0 0 var(--su-s4); } .signup .signup-banner-lede { font-size: var(--su-fs-body); line-height: 1.65; margin: 0 0 var(--su-s6); opacity: .82; } /* ---- the ERP workspace miniature ---- * * Replaces a revenue card that was a big invented figure over a bar chart - the same * picture every SaaS signup page shows, saying nothing about what is being sold. This * is a small honest likeness of the admin the buyer actually lands in, and it needs no * "Sample" disclaimer because it claims nothing: abstract bars and rows, and the only * words on it are real module names. */ .signup .signup-art { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; overflow: hidden; margin-bottom: var(--su-s6); box-shadow: 0 18px 40px rgba(0, 0, 0, .18); } .signup .signup-art-top { display: flex; align-items: center; gap: 6px; padding: 10px var(--su-s4); background: rgba(255, 255, 255, .12); border-bottom: 1px solid rgba(255, 255, 255, .12); } .signup .signup-art-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, .4); flex: 0 0 auto; } /* The breadcrumb stub, pushed right so the bar reads as a window chrome. */ .signup .signup-art-crumb { margin-left: auto; width: 76px; height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .22); } .signup .signup-art-body { display: flex; min-height: 172px; } /* The icon rail - the ERP's sidebar, reduced to what makes it recognisable. */ .signup .signup-art-rail { flex: 0 0 auto; display: flex; flex-direction: column; gap: var(--su-s2); padding: var(--su-s3) var(--su-s2); background: rgba(0, 0, 0, .12); border-right: 1px solid rgba(255, 255, 255, .08); } .signup .signup-art-railitem { width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 15px; color: rgba(255, 255, 255, .55); } .signup .signup-art-railitem.is-active { background: rgba(255, 255, 255, .9); color: #1b3a52; } .signup .signup-art-main { flex: 1 1 auto; min-width: 0; padding: var(--su-s4); } .signup .signup-art-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--su-s3); margin-bottom: var(--su-s4); } .signup .signup-art-tile { background: rgba(255, 255, 255, .1); border-radius: 6px; padding: var(--su-s2) 10px 10px; min-width: 0; } .signup .signup-art-tilelabel { display: block; font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .72; margin-bottom: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .signup .signup-art-tiletrack { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; } .signup .signup-art-tilefill { display: block; height: 100%; border-radius: 99px; background: rgba(255, 255, 255, .8); } .signup .signup-art-rows { display: flex; flex-direction: column; gap: 10px; } .signup .signup-art-row { display: flex; align-items: center; gap: 10px; } .signup .signup-art-avatar { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: rgba(255, 255, 255, .24); } .signup .signup-art-lines { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .signup .signup-art-line { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .26); } .signup .signup-art-line.is-short { background: rgba(255, 255, 255, .14); } .signup .signup-art-chip { width: 34px; height: 14px; flex: 0 0 auto; border-radius: 99px; background: rgba(255, 255, 255, .2); } /* ---- points ---- */ .signup .signup-points { list-style: none; padding: 0; margin: 0; } .signup .signup-points li { position: relative; padding-left: 40px; margin-bottom: var(--su-s4); } .signup .signup-points li:last-child { margin-bottom: 0; } .signup .signup-point-icon { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: var(--su-radius-sm); background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; font-size: 15px; } .signup .signup-points strong { display: block; font-size: var(--su-fs-sm); font-weight: 600; margin-bottom: 2px; } .signup .signup-point-body { display: block; font-size: var(--su-fs-xs); line-height: 1.55; opacity: .74; } /* ---- the module list along the foot ---- */ .signup .signup-banner-modules { flex: 0 0 auto; margin: 0; padding-top: var(--su-s5); border-top: 1px solid rgba(255, 255, 255, .14); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .62; } /* ========================================================================== * Right: the form panel * ========================================================================== */ .signup .signup-panel { background: var(--su-bg); padding: var(--su-s10); min-width: 0; /* see grid-template-columns */ } .signup .signup-panel-inner { width: 100%; max-width: 620px; margin: 0 auto; } .signup .signup-head { margin-bottom: var(--su-s5); } /* Blue, weight 500 - the ERP login screen's own "Log In" heading, which is the page * these people see next. */ .signup .signup-head h2 { font-size: var(--su-fs-h1); font-weight: 500; margin: 0 0 var(--su-s2); color: var(--su-brand); } .signup .signup-head p { color: var(--su-ink-soft); font-size: var(--su-fs-body); margin: 0; } /* ---- the stepper ---- */ .signup .signup-steps { display: flex; align-items: center; gap: var(--su-s3); list-style: none; padding: 0; margin: 0 0 var(--su-s5); } .signup .signup-stepitem { display: flex; align-items: center; gap: var(--su-s2); flex: 0 0 auto; min-width: 0; } /* The connector. flex:1 so it eats the space between the two markers and the pair * sit at the ends, which is what makes it read as a track rather than a divider. */ .signup .signup-stepline { flex: 1 1 auto; height: 2px; min-width: var(--su-s6); background: var(--su-line-strong); border-radius: 2px; } .signup .signup-stepdot { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; border: 2px solid var(--su-line-strong); background: var(--su-surface); color: var(--su-ink-soft); font-size: var(--su-fs-xs); font-weight: 600; display: flex; align-items: center; justify-content: center; } .signup .signup-steplabel { font-size: var(--su-fs-sm); font-weight: 500; color: var(--su-ink-soft); white-space: nowrap; } .signup .signup-stepitem.is-current .signup-stepdot { border-color: var(--su-brand); background: var(--su-brand); color: #fff; } .signup .signup-stepitem.is-current .signup-steplabel { color: var(--su-ink); font-weight: 600; } .signup .signup-stepitem.is-done .signup-stepdot { border-color: var(--su-brand); color: var(--su-brand); background: var(--su-brand-tint); } .signup .signup-stepitem.is-done .signup-steplabel { color: var(--su-ink-2); } /* ---- cards ---- * * The ERP's `.box`: white, flat, a 3px coloured rule along the top and AdminLTE's 1px * shadow. That top rule is the single most recognisable thing about a panel in this * ERP, which is the point - somebody who signs up here and then lands in the admin * should recognise the furniture. */ .signup .signup-card { background: var(--su-surface); border: 1px solid var(--su-line); border-top: 3px solid var(--su-btn); border-radius: var(--su-radius); box-shadow: var(--su-shadow-sm); padding: var(--su-s5) var(--su-s6) var(--su-s6); margin-bottom: var(--su-s4); } .signup .signup-card-head { margin-bottom: var(--su-s5); padding-bottom: var(--su-s3); border-bottom: 1px solid var(--su-line); } .signup .signup-card-title { font-size: var(--su-fs-h2); /* 500, not 600: the ERP's own .box-title is a light weight, and a heavier one * here made the section headings shout over the fields. */ font-weight: 500; color: var(--su-ink); margin: 0; } .signup .signup-card-sub { font-size: var(--su-fs-xs); color: var(--su-ink-soft); margin: 2px 0 0; } /* ---- the form grid ---- * * Not .form-row/.col-md-*: those carry the same negative side margins that put the * outer split 15px off-viewport. One grid, one gap, nothing to overflow. */ .signup .signup-row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 var(--su-s4); } .signup .signup-col-5 { grid-column: span 5; } .signup .signup-col-6 { grid-column: span 6; } .signup .signup-col-7 { grid-column: span 7; } .signup .form-group { margin-bottom: var(--su-s5); } .signup .form-group:last-child, .signup .signup-group-last { margin-bottom: 0; } /* * The ERP theme title-cases every label, app-wide and with !important: * label { text-transform: capitalize !important; } (public/css/app.css) * Right for one- and two-word admin field names, wrong for a sentence - it turned the * terms line into "I Agree To The Terms And Conditions". Matching !important is the * only thing that beats it, and it is confined to .signup. */ .signup label, .signup label span, .signup .form-text, .signup .signup-card-title, .signup .signup-steplabel { text-transform: none !important; } .signup .form-group label { display: block; font-size: var(--su-fs-sm); font-weight: 500; color: var(--su-ink-2); margin-bottom: 6px; } .signup .signup-req { color: var(--su-error); font-weight: 400; } /* ---- controls ---- * * TOUCH AND ZOOM, on every field rather than only the selects. * * 48px min-height clears the 44px target minimum with room for a border, and 16px * text is the threshold below which iOS Safari ZOOMS THE PAGE on focus - a signup * form that jumps and reflows the moment somebody taps the first field. * * height:auto is required because Bootstrap 3 (vendor.css) fixes .form-control at * 34px; min-height alone would be overridden by that explicit height. */ .signup .form-control { display: block; width: 100%; height: auto; min-height: 48px; padding: 11px 14px; font-size: var(--su-fs-base); line-height: 1.5; color: var(--su-ink); background-color: var(--su-surface); border: 1px solid var(--su-line-strong); border-radius: var(--su-radius-sm); box-shadow: none; transition: border-color .15s ease, box-shadow .15s ease; } .signup select.form-control { /* A select renders its own arrow; the extra right padding keeps a long plan name * from running under it. */ padding-right: var(--su-s8); } .signup .form-control::placeholder { color: #a9b3c4; } .signup .form-control:hover { border-color: #b6bfcc; } .signup .form-control:focus { outline: none; border-color: var(--su-brand); box-shadow: 0 0 0 2px var(--su-brand-tint); } .signup .form-control.is-invalid { border-color: var(--su-error); } .signup .form-control.is-invalid:focus { box-shadow: 0 0 0 2px var(--su-error-tint); } /* * The password boxes' show/hide eye. * * The behaviour and the base styling come from the ERP's own * manage_user/partials/password_field - this only re-fits it to a 48px control. * * THE PADDING IS RE-STATED BECAUSE OF LOAD ORDER, not because the partial is wrong. * Its `.password-input-wrap .form-control { padding-right: 36px }` and this file's * `.signup .form-control { padding: 11px 14px }` have the SAME specificity (0,2,0), * and signup.css is loaded from @section('css'), which include.head renders AFTER * @stack('plugin-styles') - so the shorthand won and reset the right padding to 14px, * putting the eye on top of whatever had been typed. Three classes settles it. */ .signup .password-input-wrap .form-control { padding-right: 42px; } .signup .password-input-wrap .toggle-password { right: 14px; font-size: 19px; color: var(--su-ink-soft); } .signup .password-input-wrap .toggle-password:hover { color: var(--su-brand); } /* Keyboard reachable, because the icon carries role="button" and tabindex="0". */ .signup .password-input-wrap .toggle-password:focus-visible { outline: none; box-shadow: var(--su-focus); border-radius: var(--su-radius-sm); } /* The confirm-match line the partial writes into. Its own .password-hint is 12px; * this page's caption size is 13px, and the two sitting together looked accidental. */ .signup .password-hint { font-size: var(--su-fs-xs) !important; margin-top: 6px; line-height: 1.5; } /* The hostname is a machine value read character by character; a monospaced face is * what makes a typo in it visible. */ .signup .signup-input-mono { font-family: SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; letter-spacing: .01em; } /* * The web-address field's optional base-domain suffix. * * A CUSTOM class rather than Bootstrap's `.input-group` - see the field's own comment * in signup.blade.php for why the real one detaches its addon on this page. Named * after the operator panel's `.sa-input-group`/`.sa-input-addon` because it does the * same job with the same look, not because it is shared with it: Modules/SuperAdmin * owns nothing this page loads. */ .signup .signup-input-group { display: flex; align-items: stretch; } .signup .signup-input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; min-width: 0; } .signup .signup-input-group .form-control:focus { position: relative; z-index: 1; } .signup .signup-input-addon { display: inline-flex; align-items: center; padding: 0 var(--su-s4); border: 1px solid var(--su-line-strong); border-left: none; border-top-right-radius: var(--su-radius-sm); border-bottom-right-radius: var(--su-radius-sm); background: var(--su-surface-2); color: var(--su-ink-soft); font-family: SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; font-size: var(--su-fs-sm); white-space: nowrap; } /* The composed address, printed once the field's own live check has an answer. * Sits with the same rhythm as .form-text rather than the coloured verdict above it - * it states a fact, not a judgement. */ .signup .signup-host-preview { margin: 6px 0 0; font-size: var(--su-fs-xs); line-height: 1.5; color: var(--su-ink-soft); } .signup .signup-host-preview:empty { display: none; } .signup .form-text { display: block; margin-top: 6px; font-size: var(--su-fs-xs); line-height: 1.5; color: var(--su-ink-soft); } .signup .signup-field-error { display: block; margin-top: 6px; font-size: var(--su-fs-xs); font-weight: 500; color: var(--su-error); } /* ---- the chosen plan's summary ---- * * Sits directly under the plan