/* * The product's own marketing site - the page a visitor lands on at the root * of the application, before there is any institute and before there is any * account. * * Held apart from both of the other two stylesheets on purpose, because it * serves a third audience: * * core/components/pages.css the ERP behind the login - sidebar, topbar, * card boxes. Signed-in staff. * website.css ONE institute's public site, served under * /web from its own website_* tables. Parents * and applicants of that institute. * product.css (this file) the software itself, sold to institutes. * Nobody signed in, no institute chosen yet. * * The practical consequence, and the reason to keep it separate: this page * must render before a tenant database has been resolved. It reads no model * attribute and loads no theme that expects one. Bootstrap 4.6 supplies the * grid and the navbar, icons.css supplies Font Awesome 4.6, and everything * below is this page's own. * * Bootstrap 3 shim is deliberately NOT loaded here - the markup in * jsp/product is written against Bootstrap 4 directly. * * TWO PAGES, ONE FILE * * The sign-in page (jsp/welcome/login.jsp) loads this stylesheet too, and its * rules are the "Sign-in page" section at the bottom. They live here rather * than in a login.css of their own for one reason: the login page is the seam * between the marketing site and the ERP, and it has to look like the page the * visitor just came from. Two files would be two copies of the palette, and * the copies would drift the first time somebody recoloured one of them. * * So the tokens below are the single source of the brand. Change --pr-primary * once and the landing page and the sign-in page move together. * * ====================================================================== * THE THEME * * An academic look rather than a generic SaaS one, because the reader is a * principal or a trustee rather than a developer. Three things carry that: * * - a serif for the display headings, sans for everything else. The pairing * is what a prospectus looks like, and it is the cheapest way to say * "education" without a single illustration. --pr-font-display is one * token; set it to var(--pr-font) to make the page all-sans again. * - the ruled grid behind the hero and the closing band, which is graph * paper. Drawn with two repeating-linear-gradients, so it costs no image. * - deep blue for authority and a warm gold for attainment - the two colours * an institute already uses on its own crest. * * Every colour, radius, shadow and duration is a token in :root. A rule that * hard-codes one instead of naming it is a bug: re-skinning for a reseller * should mean editing the block below and nothing else. * * No webfont is linked, and none may be. This is the page that has to render * when the tenant database is unreachable, and a stylesheet that reaches out * to fonts.googleapis.com would make the one page that must always work * depend on the network being up. Both stacks below are what the visitor's * own machine already ships. */ /* ---------------------------------------------------------------- */ /* Design tokens */ /* ---------------------------------------------------------------- */ :root { /* * Recolour the whole site from these. The scale is one hue with a light * tint for section backgrounds and a dark shade for the footer, plus a * single warm accent used sparingly - on the primary call to action and * on the numbers people are meant to read. * * The hues are the ones the page has always used. What changed with the * current theme is how they are put together, not which they are, so the * inline SVG in home.jsp still belongs to the same palette. */ --pr-primary: #1b4f9c; --pr-primary-dark: #12376e; --pr-primary-light: #eaf1fb; /* * The violet end of every gradient. A single flat blue reads as a stock * template; blue running into indigo is what gives the hero and the * closing band their depth. */ --pr-secondary: #4a3ab0; --pr-accent: #f5a623; --pr-accent-dark: #d78d10; --pr-accent-light: #fdf1dc; --pr-ink: #131a26; --pr-body: #525c6b; --pr-muted: #8a94a4; --pr-line: #e4e8ee; --pr-line-soft: #eef1f6; --pr-surface: #ffffff; --pr-surface-alt: #f6f8fb; --pr-dark: #0c1526; /* Tints, for washes and hairlines that have to sit on white. */ --pr-primary-wash: rgba(27, 79, 156, .07); --pr-primary-edge: rgba(27, 79, 156, .16); --pr-accent-wash: rgba(245, 166, 35, .14); /* Type. */ --pr-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --pr-font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; /* * Fluid display sizes. clamp() lets a heading grow with the viewport * between a phone and a desktop without a media query for every step. */ --pr-h1: clamp(34px, 4.6vw, 58px); --pr-h2: clamp(27px, 3.2vw, 40px); --pr-h3: clamp(17px, 1.5vw, 19px); --pr-lead: clamp(17px, 1.5vw, 19px); /* Spacing, on a 4px base. */ --pr-space-1: 4px; --pr-space-2: 8px; --pr-space-3: 12px; --pr-space-4: 16px; --pr-space-5: 24px; --pr-space-6: 32px; --pr-space-7: 48px; --pr-space-8: 72px; --pr-space-9: 104px; /* * The height the header occupies while it lies over the hero: the utility * strip plus the masthead. The hero reserves this as top padding, and the * two mobile breakpoints below restate it because the strip wraps and the * masthead shrinks at those widths. */ --pr-header-h: 107px; /* Shape. */ --pr-radius-sm: 10px; --pr-radius: 16px; --pr-radius-lg: 24px; --pr-radius-pill: 999px; /* * Elevation. Two layers each - a tight shadow for the edge and a wide * soft one for the lift - because one large blur reads as a grey smudge * rather than as depth. */ --pr-shadow-sm: 0 1px 2px rgba(12, 21, 38, .06), 0 1px 3px rgba(12, 21, 38, .04); --pr-shadow: 0 2px 4px rgba(12, 21, 38, .04), 0 10px 28px rgba(12, 21, 38, .08); --pr-shadow-lg: 0 4px 10px rgba(12, 21, 38, .06), 0 24px 60px rgba(12, 21, 38, .14); --pr-shadow-brand: 0 10px 30px rgba(27, 79, 156, .28); /* Motion. */ --pr-ease: cubic-bezier(.4, 0, .2, 1); --pr-ease-out: cubic-bezier(.16, 1, .3, 1); --pr-transition: 200ms var(--pr-ease); /* The focus ring, defined once so every focusable thing agrees. */ --pr-focus-ring: 0 0 0 3px rgba(27, 79, 156, .3); /* * The ruled grid. Two gradients rather than an image, so it scales with * no asset and no request. Used behind the hero and the closing band. */ --pr-grid: repeating-linear-gradient(to right, rgba(255, 255, 255, .06) 0 1px, transparent 1px 64px), repeating-linear-gradient(to bottom, rgba(255, 255, 255, .06) 0 1px, transparent 1px 64px); } /* ---------------------------------------------------------------- */ /* Base */ /* ---------------------------------------------------------------- */ /* * Scoped to body.product rather than written as bare element rules. The ERP * stylesheets are not loaded on this page today, but a future page that pulls * in both should not have this file restyling the administration. */ body.product { font-family: var(--pr-font); color: var(--pr-body); background: var(--pr-surface); font-size: 16.5px; line-height: 1.7; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* * The scope sits inside :where() on these two blocks, and only these two. * * They are the page-wide defaults, so nearly every component below has to be * able to override them - the hero heading is white, the outline button is * white, the brand is ink rather than link blue. Written as `body.product h1` * the default would be specificity (0,1,2) and a component rule like * `.pr-hero h1` only (0,1,1), so the default would win and the heading would * render dark navy on a dark blue hero. Same for `body.product a` against * `.pr-btn-outline`, which is how "Login to your ERP" came out blue on blue. * * :where() contributes nothing to specificity, so these resolve at (0,0,1) - * a bare element selector. Any single class below now beats them, which is * what a default should do. The alternative was prefixing ten component rules * with body.product and re-checking the arithmetic every time one is added. * * Do NOT move the scope back out of :where() to "tidy" it. */ :where(body.product) h1, :where(body.product) h2, :where(body.product) h3, :where(body.product) h4, :where(body.product) h5 { color: var(--pr-ink); font-weight: 700; line-height: 1.2; letter-spacing: -.01em; /* Stops a two-line heading orphaning one word on the second line. */ text-wrap: balance; } /* The display face, on the two sizes big enough to carry it. */ :where(body.product) h1, :where(body.product) h2 { font-family: var(--pr-font-display); font-weight: 600; letter-spacing: -.02em; } :where(body.product) a { color: var(--pr-primary); text-decoration: none; transition: color var(--pr-transition); } :where(body.product) a:hover { color: var(--pr-primary-dark); } body.product p { margin-bottom: var(--pr-space-4); } /* * One focus treatment for the whole page. :focus-visible rather than :focus, * so the ring appears for the keyboard and not around every button a mouse * has just pressed. */ body.product a:focus-visible, body.product button:focus-visible, body.product input:focus-visible, body.product [tabindex]:focus-visible { outline: 2px solid transparent; outline-offset: 2px; box-shadow: var(--pr-focus-ring); border-radius: var(--pr-radius-sm); } body.product ::selection { background: var(--pr-accent-wash); color: var(--pr-ink); } /* An anchor landed on from the navigation clears the sticky masthead. */ body.product [id] { scroll-margin-top: 92px; } /* Visible only to a keyboard user, and only while focused. */ .pr-skip { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--pr-primary); color: #fff; padding: var(--pr-space-3) var(--pr-space-5); border-radius: 0 0 var(--pr-radius-sm) 0; font-weight: 600; } .pr-skip:focus { left: 0; color: #fff; } /* ---------------------------------------------------------------- */ /* Buttons */ /* ---------------------------------------------------------------- */ .pr-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pr-space-2); padding: var(--pr-space-3) var(--pr-space-6); border-radius: var(--pr-radius-pill); border: 1px solid transparent; font-size: 15px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; cursor: pointer; transition: transform var(--pr-transition), box-shadow var(--pr-transition), background-color var(--pr-transition), border-color var(--pr-transition), color var(--pr-transition); } .pr-btn:hover { transform: translateY(-2px); text-decoration: none; } .pr-btn:active { transform: translateY(0); } /* * The one gold control on the page. It is gold and not blue because on the * hero it sits on blue, and because "request a demo" is the single action the * whole page exists to produce - it should not have to compete with a second * thing wearing the same colour. */ .pr-btn-primary { background: linear-gradient(135deg, var(--pr-accent) 0%, var(--pr-accent-dark) 100%); color: #2a1d00; box-shadow: 0 8px 22px rgba(215, 141, 16, .32); } .pr-btn-primary:hover { color: #2a1d00; box-shadow: 0 12px 30px rgba(215, 141, 16, .42); } /* On a dark ground: reads as a control, not as a link. */ .pr-btn-outline { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .38); color: #fff; /* The frosted panel behind it, where the browser supports it. */ -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pr-btn-outline:hover { background: rgba(255, 255, 255, .16); border-color: #fff; color: #fff; } /* * A solid brand fill, on a light ground. Two callers, and the second is the * reason this is filled rather than outlined: the two secondary pricing * plans, and the sign-in button on jsp/welcome/login.jsp, which carries * "pr-btn pr-btn-solid pr-auth-submit" and takes its geometry from the last * of those and its colour from here. Restyling this as an outline leaves the * sign-in page with a white submit button on a white panel. * * It does not compete with pr-btn-primary. Gold stays the one action the * page is asking for - the demo, and the recommended plan - and blue is * every other button that still has to look like a button. */ .pr-btn-solid { background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); border-color: transparent; color: #fff; box-shadow: 0 6px 18px rgba(27, 79, 156, .24); } .pr-btn-solid:hover { color: #fff; box-shadow: var(--pr-shadow-brand); } /* In the masthead: the one thing a returning customer is looking for. */ .pr-btn-login { background: var(--pr-primary); color: #fff; padding: var(--pr-space-2) var(--pr-space-5); box-shadow: 0 6px 18px rgba(27, 79, 156, .26); } .pr-btn-login:hover { background: var(--pr-primary-dark); color: #fff; box-shadow: var(--pr-shadow-brand); } /* ---------------------------------------------------------------- */ /* Utility strip and masthead */ /* ---------------------------------------------------------------- */ /* * The header lies OVER the hero rather than sitting above it, so the hero's * gradient runs to the very top of the window and the brand and the menu * float on it. It is one absolutely positioned wrapper - see the comment on * .pr-header in home.jsp for why the strip and the masthead are wrapped * rather than positioned individually. * * Two states, and every rule below belongs to one of them: * * default transparent, white type. Only ever seen over the hero. * .is-solid frosted white, dark type, fixed to the top. Applied by the * script at the foot of home.jsp once the page has scrolled. * * The states exist because the transparent header is only legible over the * hero. Everything below the hero is white or near-white, and white links on * it would vanish - so the moment the page moves, the bar has to acquire a * background of its own. */ .pr-header { position: absolute; top: 0; left: 0; right: 0; z-index: 1030; transition: background-color var(--pr-transition), box-shadow var(--pr-transition); } .pr-header.is-solid { position: fixed; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid var(--pr-line-soft); box-shadow: var(--pr-shadow-sm); } /* * The utility strip goes once the bar is solid. A fixed header should cost as * little of the window as it can, and a phone number the visitor has already * scrolled past is the first thing that can be spared - it is repeated in the * contact section and again in the footer. */ .pr-header.is-solid .pr-topbar { display: none; } /* * Solid --pr-dark rather than transparent, so the strip is the same colour as * the footer and the page opens and closes on one note. It is the only part * of the header that is not see-through: the masthead below it still lies on * the hero, which is where the effect actually reads. * * No bottom border. Against the hero the change of colour is the edge, and a * rule there only thickened it. */ .pr-topbar { background: var(--pr-dark); color: rgba(255, 255, 255, .78); font-size: 13px; padding: var(--pr-space-2) 0; } .pr-topbar a { color: rgba(255, 255, 255, .78); } .pr-topbar a:hover { color: #fff; } .pr-topbar-item { margin-right: var(--pr-space-5); white-space: nowrap; } .pr-topbar-item i { color: var(--pr-accent); margin-right: var(--pr-space-1); } /* Positioning now belongs to the wrapper; this only carries the spacing. */ .pr-nav { background: transparent; padding: var(--pr-space-3) 0; } /* * White while the header is over the hero, ink once it is solid. The footer * carries .pr-brand too and is always dark, so it overrides this itself * further down rather than being caught by the .is-solid switch. */ .pr-brand { display: inline-flex; align-items: center; gap: var(--pr-space-3); color: #fff; font-weight: 700; } .pr-brand:hover { color: #fff; text-decoration: none; } .pr-header.is-solid .pr-brand, .pr-header.is-solid .pr-brand:hover { color: var(--pr-ink); } /* * The mortarboard, in a rounded gradient tile. The tile is the page's one * piece of pure ornament and is worth it: it is the only mark the visitor * has to recognise the product by. */ .pr-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); color: #fff; font-size: 20px; box-shadow: 0 6px 16px rgba(27, 79, 156, .3); } /* * Over the hero the gradient tile would be blue on blue, so it becomes glass * there and only takes the brand gradient once the bar is solid. The footer * keeps the gradient, being dark and neutral. */ .pr-header .pr-brand-mark { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; } .pr-header.is-solid .pr-brand-mark { background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); border-color: transparent; box-shadow: 0 6px 16px rgba(27, 79, 156, .3); } .pr-brand-text { display: flex; flex-direction: column; line-height: 1.15; font-size: 18px; } .pr-brand-text small { display: block; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: var(--pr-muted); margin-top: 2px; } .pr-header .pr-brand-text small { color: rgba(255, 255, 255, .7); } .pr-header.is-solid .pr-brand-text small { color: var(--pr-muted); } .pr-nav .nav-link { color: rgba(255, 255, 255, .92); font-weight: 600; font-size: 15px; padding: var(--pr-space-2) var(--pr-space-4); border-radius: var(--pr-radius-pill); transition: color var(--pr-transition), background-color var(--pr-transition); /* * Over a photograph or a gradient, white type needs a little help. Slight * enough not to read as a shadow, dark enough to hold the letterforms * apart from whatever is behind them. */ text-shadow: 0 1px 2px rgba(6, 12, 26, .28); } .pr-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .16); } .pr-header.is-solid .pr-nav .nav-link { color: var(--pr-ink); text-shadow: none; } .pr-header.is-solid .pr-nav .nav-link:hover { color: var(--pr-primary); background: var(--pr-primary-wash); } /* * The Login button, likewise. Solid blue on the blue hero would be a button * nobody could find; glass over the hero, brand blue once the bar is white. */ .pr-header .pr-btn-login { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; } .pr-header .pr-btn-login:hover { background: rgba(255, 255, 255, .24); border-color: #fff; color: #fff; } .pr-header.is-solid .pr-btn-login { background: var(--pr-primary); border-color: var(--pr-primary); color: #fff; box-shadow: 0 6px 18px rgba(27, 79, 156, .26); } .pr-header.is-solid .pr-btn-login:hover { background: var(--pr-primary-dark); border-color: var(--pr-primary-dark); } .pr-nav .navbar-toggler { border-color: rgba(255, 255, 255, .4); color: #fff; border-radius: var(--pr-radius-sm); padding: var(--pr-space-2) var(--pr-space-3); } .pr-header.is-solid .pr-nav .navbar-toggler { border-color: var(--pr-line); } /* * The hamburger itself, which Bootstrap does NOT supply here. It ships the * bars as a background image on ".navbar-light .navbar-toggler-icon" and * ".navbar-dark .navbar-toggler-icon", and this navbar carries neither class * - so without the two rules below the button renders as an empty outline and * the menu on a phone looks broken rather than closed. Inline data URIs, for * the same reason nothing else here is fetched: this page must render with no * request to anywhere. */ .pr-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,0.9)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .pr-header.is-solid .pr-nav .navbar-toggler-icon { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(19,26,38,0.85)' stroke-width='2' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------------- */ /* Hero */ /* ---------------------------------------------------------------- */ /* * Three layers, back to front: the blue-to-indigo base, two wide radial * glows that keep the base from looking flat, and the ruled grid on top. * All of it is gradients - nothing here is an image. */ .pr-hero { position: relative; isolation: isolate; background: radial-gradient(90% 120% at 88% 8%, rgba(245, 166, 35, .22) 0%, transparent 52%), radial-gradient(70% 100% at 6% 92%, rgba(74, 58, 176, .5) 0%, transparent 58%), linear-gradient(140deg, var(--pr-primary-dark) 0%, var(--pr-primary) 52%, var(--pr-secondary) 100%); color: rgba(255, 255, 255, .84); /* * The header is out of the flow and lying on top, so the hero has to * reserve its height itself or the eyebrow starts underneath the menu. * --pr-header-h is that height, measured rather than guessed: the utility * strip is 38px and the masthead 69px. It only has to be right while the * header is transparent - once .is-solid drops the strip the bar is * shorter, and by then the hero has scrolled away. */ padding: calc(var(--pr-space-9) + var(--pr-header-h)) 0 calc(var(--pr-space-9) + 40px); overflow: hidden; } /* Graph paper. */ .pr-hero::before { content: ""; position: absolute; inset: 0; background-image: var(--pr-grid); /* Faded out towards the foot, so the grid never fights the copy. */ -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); pointer-events: none; z-index: -1; } /* * The curve the next section sits in. A wide, very flat ellipse in the page * background colour, so the hero finishes on an arc rather than a straight * cut - the one shape on the page that is purely decorative. */ .pr-hero::after { content: ""; position: absolute; left: -6%; right: -6%; bottom: -78px; height: 150px; border-radius: 50%; background: var(--pr-surface); pointer-events: none; z-index: -1; } .pr-hero h1 { font-size: var(--pr-h1); color: #fff; margin-bottom: var(--pr-space-5); } .pr-hero-lead { font-size: var(--pr-lead); color: rgba(255, 255, 255, .82); max-width: 56ch; margin-bottom: var(--pr-space-6); } /* * The small capital line above the heading, as a frosted pill with a gold * dot. It carries the category - "cloud school management system" - which is * the first thing a visitor needs and the last thing they should have to * read a paragraph to find. */ .pr-eyebrow { display: inline-flex; align-items: center; gap: var(--pr-space-2); background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; padding: var(--pr-space-2) var(--pr-space-4); border-radius: var(--pr-radius-pill); margin-bottom: var(--pr-space-5); } .pr-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pr-accent); box-shadow: 0 0 0 3px var(--pr-accent-wash); flex: none; } .pr-hero-actions { display: flex; flex-wrap: wrap; gap: var(--pr-space-3); margin-bottom: var(--pr-space-6); } .pr-hero-points { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--pr-space-2) var(--pr-space-6); font-size: 14.5px; color: rgba(255, 255, 255, .8); } .pr-hero-points li { display: inline-flex; align-items: center; gap: var(--pr-space-2); } .pr-hero-points i { color: var(--pr-accent); } /* * The drawn dashboard. Floated slightly and given a real shadow so it reads * as a window over the hero rather than a diagram printed on it. */ .pr-hero-art { width: 100%; height: auto; display: block; border-radius: var(--pr-radius-lg); box-shadow: 0 30px 70px rgba(6, 12, 26, .42); transform: perspective(1400px) rotateY(-7deg) rotateX(2deg); transition: transform 500ms var(--pr-ease-out); } .pr-hero-art:hover { transform: perspective(1400px) rotateY(-2deg) rotateX(0deg) translateY(-4px); } /* ---------------------------------------------------------------- */ /* Counters */ /* ---------------------------------------------------------------- */ /* * Lifted out of the hero and onto the page, overlapping the join: one card * carrying the four numbers, which is what makes them read as evidence * rather than as another band of copy. */ /* * No bottom margin: the section that follows brings its own top padding, and * the two together left a band of empty white under the card wide enough to * read as a missing section. */ .pr-stats { position: relative; z-index: 2; margin-top: calc(var(--pr-space-8) * -1); margin-bottom: 0; } .pr-stats .container > .row { background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius-lg); box-shadow: var(--pr-shadow-lg); margin-left: 0; margin-right: 0; padding: var(--pr-space-6) var(--pr-space-3); overflow: hidden; } .pr-stat { text-align: center; padding: var(--pr-space-3) var(--pr-space-2); position: relative; } /* Hairlines between the figures, but not before the first on each row. */ .pr-stats [class*="col-"]:not(:first-child) .pr-stat::before { content: ""; position: absolute; left: 0; top: 12%; bottom: 12%; width: 1px; background: var(--pr-line); } .pr-stat-value { font-family: var(--pr-font-display); font-size: clamp(30px, 3.6vw, 42px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; /* Keeps a row of figures from jittering as digits change width. */ font-variant-numeric: tabular-nums; background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .pr-stat-label { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--pr-muted); margin-top: var(--pr-space-1); } /* ---------------------------------------------------------------- */ /* Sections */ /* ---------------------------------------------------------------- */ .pr-section { padding: var(--pr-space-9) 0; } .pr-section-alt { background: var(--pr-surface-alt); border-top: 1px solid var(--pr-line-soft); border-bottom: 1px solid var(--pr-line-soft); } .pr-section-head { text-align: center; max-width: 60ch; margin: 0 auto var(--pr-space-8); } .pr-section-head h2 { font-size: var(--pr-h2); margin-bottom: var(--pr-space-4); } .pr-section-head p { font-size: var(--pr-lead); color: var(--pr-body); margin-bottom: 0; } /* * The small line above a section heading. Blue rather than the hero's white, * with a short rule either side - a section marker, not a badge. */ .pr-kicker { display: inline-flex; align-items: center; gap: var(--pr-space-3); color: var(--pr-primary); font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; margin-bottom: var(--pr-space-4); } .pr-kicker::before, .pr-kicker::after { content: ""; width: 26px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--pr-primary), var(--pr-accent)); } /* * In the two places a kicker opens a left-aligned column rather than a * centred heading, the trailing rule would dangle into the text. */ .pr-section:not(.pr-section-alt) .col-lg-6 > .pr-kicker::after, .pr-section-alt .col-lg-6 > .pr-kicker::after { display: none; } /* Every card in a Bootstrap row is the height of its own text otherwise. */ .pr-card-grid > [class*="col-"] { display: flex; margin-bottom: var(--pr-space-5); } .pr-card-grid > [class*="col-"] > * { width: 100%; } /* ---------------------------------------------------------------- */ /* Module cards */ /* ---------------------------------------------------------------- */ .pr-module { position: relative; background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-space-6); box-shadow: var(--pr-shadow-sm); overflow: hidden; transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition); } /* * A brand rule across the top, revealed on hover. A pseudo-element rather * than a real border, so showing it does not move the content down by three * pixels. */ .pr-module::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pr-primary), var(--pr-secondary), var(--pr-accent)); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--pr-ease-out); } .pr-module:hover { transform: translateY(-4px); box-shadow: var(--pr-shadow); border-color: var(--pr-primary-edge); } .pr-module:hover::before { transform: scaleX(1); } .pr-module h3 { font-size: var(--pr-h3); margin: var(--pr-space-4) 0 var(--pr-space-2); } .pr-module p { font-size: 14.5px; margin-bottom: 0; } /* * The icon tile. Tinted rather than solid so fifteen of them in a grid do * not turn the section into a wall of blue, and it flips to solid on hover * so the card the pointer is on is unmistakable. */ .pr-module-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 15px; background: var(--pr-primary-light); color: var(--pr-primary); font-size: 21px; transition: background var(--pr-transition), color var(--pr-transition), transform var(--pr-transition); } .pr-module:hover .pr-module-icon { background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); color: #fff; transform: scale(1.06) rotate(-4deg); } /* ---------------------------------------------------------------- */ /* Feature list */ /* ---------------------------------------------------------------- */ .pr-checklist { list-style: none; padding: 0; margin: var(--pr-space-5) 0 0; } .pr-checklist li { position: relative; padding-left: var(--pr-space-7); margin-bottom: var(--pr-space-4); font-size: 15.5px; } /* The tick sits in its own disc, so a two-line item still aligns. */ .pr-checklist i { position: absolute; left: 0; top: 3px; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); color: #fff; font-size: 12px; box-shadow: 0 4px 10px rgba(27, 79, 156, .24); } .pr-feature { display: flex; gap: var(--pr-space-4); background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-space-5); height: 100%; margin-bottom: var(--pr-space-4); box-shadow: var(--pr-shadow-sm); transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition); } .pr-feature:hover { transform: translateY(-3px); box-shadow: var(--pr-shadow); border-color: var(--pr-primary-edge); } .pr-feature h3 { font-size: 15.5px; margin: 0 0 var(--pr-space-1); } .pr-feature p { font-size: 14px; margin: 0; } /* Gold here rather than blue: these are the reassurances, not the modules. */ .pr-feature-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--pr-accent-light); color: var(--pr-accent-dark); font-size: 18px; } /* ---------------------------------------------------------------- */ /* Pricing */ /* ---------------------------------------------------------------- */ .pr-plan { position: relative; display: flex; flex-direction: column; background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius-lg); padding: var(--pr-space-7) var(--pr-space-6); box-shadow: var(--pr-shadow-sm); transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition); } .pr-plan:hover { transform: translateY(-4px); box-shadow: var(--pr-shadow); border-color: var(--pr-primary-edge); } .pr-plan h3 { font-size: 20px; margin: 0 0 var(--pr-space-1); } .pr-plan-for { font-size: 13.5px; color: var(--pr-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--pr-space-5); } .pr-plan-price { font-family: var(--pr-font-display); font-size: 46px; font-weight: 700; color: var(--pr-ink); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; padding-bottom: var(--pr-space-5); margin-bottom: var(--pr-space-5); border-bottom: 1px solid var(--pr-line-soft); } .pr-plan-price span { font-family: var(--pr-font); font-size: 14px; font-weight: 500; color: var(--pr-muted); letter-spacing: 0; } .pr-plan-features { list-style: none; padding: 0; margin: 0 0 var(--pr-space-6); /* Pushes the button to the foot, so three cards line up whatever they list. */ flex: 1 1 auto; } .pr-plan-features li { display: flex; align-items: flex-start; gap: var(--pr-space-3); font-size: 14.5px; margin-bottom: var(--pr-space-3); } .pr-plan-features i { color: var(--pr-primary); margin-top: 6px; font-size: 12px; } /* * The recommended plan. Raised, ringed in the brand gradient and given a * glow, because a pricing table where nothing is recommended makes the * reader do the choosing. */ .pr-plan-featured { border: 0; background: linear-gradient(var(--pr-surface), var(--pr-surface)) padding-box, linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 50%, var(--pr-accent) 100%) border-box; border: 2px solid transparent; box-shadow: 0 20px 50px rgba(27, 79, 156, .2); transform: translateY(-12px); } .pr-plan-featured:hover { transform: translateY(-16px); box-shadow: 0 26px 62px rgba(27, 79, 156, .28); } .pr-plan-badge { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); color: #fff; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; padding: var(--pr-space-2) var(--pr-space-5); border-radius: var(--pr-radius-pill); white-space: nowrap; box-shadow: 0 8px 20px rgba(27, 79, 156, .32); } .pr-plan .pr-btn { width: 100%; } /* ---------------------------------------------------------------- */ /* Testimonials */ /* ---------------------------------------------------------------- */ .pr-quote { position: relative; background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-space-7) var(--pr-space-6) var(--pr-space-6); height: 100%; display: flex; flex-direction: column; box-shadow: var(--pr-shadow-sm); transition: transform var(--pr-transition), box-shadow var(--pr-transition); } .pr-quote:hover { transform: translateY(-4px); box-shadow: var(--pr-shadow); } /* * The quotation mark, oversized and set in the display face, sitting over * the card's top edge. Ornament, so it is faded well back - it should be * felt before it is read. */ .pr-quote-mark { position: absolute; top: var(--pr-space-4); right: var(--pr-space-5); font-size: 46px; line-height: 1; color: var(--pr-primary); opacity: .12; } .pr-quote p { font-size: 15.5px; font-style: italic; color: var(--pr-body); flex: 1 1 auto; margin-bottom: var(--pr-space-5); } .pr-quote-by { display: flex; align-items: center; gap: var(--pr-space-3); padding-top: var(--pr-space-4); border-top: 1px solid var(--pr-line-soft); } /* Initials, because there is no photograph and a stock face would be a lie. */ .pr-quote-avatar { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 6px 16px rgba(27, 79, 156, .26); } .pr-quote-name { font-weight: 700; color: var(--pr-ink); font-size: 15px; } .pr-quote-role { font-size: 13px; color: var(--pr-muted); } /* ---------------------------------------------------------------- */ /* Call to action and contact */ /* ---------------------------------------------------------------- */ /* * The closing band, carrying the same gradient and the same ruled grid as * the hero so the page ends where it began. */ .pr-cta { position: relative; isolation: isolate; background: radial-gradient(80% 130% at 50% 0%, rgba(245, 166, 35, .2) 0%, transparent 55%), linear-gradient(140deg, var(--pr-primary-dark) 0%, var(--pr-primary) 55%, var(--pr-secondary) 100%); color: rgba(255, 255, 255, .84); text-align: center; padding: var(--pr-space-9) 0; overflow: hidden; } .pr-cta::before { content: ""; position: absolute; inset: 0; background-image: var(--pr-grid); -webkit-mask-image: radial-gradient(70% 100% at 50% 50%, #000 0%, transparent 75%); mask-image: radial-gradient(70% 100% at 50% 50%, #000 0%, transparent 75%); pointer-events: none; z-index: -1; } .pr-cta h2 { font-size: var(--pr-h2); color: #fff; margin-bottom: var(--pr-space-4); } .pr-cta p { font-size: var(--pr-lead); color: rgba(255, 255, 255, .82); max-width: 56ch; margin: 0 auto var(--pr-space-6); } .pr-cta .pr-btn { margin: 0 var(--pr-space-2) var(--pr-space-2); } .pr-contact-card { text-align: center; background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: var(--pr-radius); padding: var(--pr-space-7) var(--pr-space-5); height: 100%; box-shadow: var(--pr-shadow-sm); transition: transform var(--pr-transition), box-shadow var(--pr-transition), border-color var(--pr-transition); } .pr-contact-card:hover { transform: translateY(-4px); box-shadow: var(--pr-shadow); border-color: var(--pr-primary-edge); } .pr-contact-card h3 { font-size: 16px; margin: var(--pr-space-4) 0 var(--pr-space-2); } .pr-contact-card a { font-weight: 600; font-size: 15.5px; word-break: break-word; } .pr-contact-card p { font-size: 14px; margin-bottom: 0; } .pr-contact-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 18px; background: linear-gradient(135deg, var(--pr-primary) 0%, var(--pr-secondary) 100%); color: #fff; font-size: 22px; box-shadow: 0 10px 24px rgba(27, 79, 156, .26); } /* ---------------------------------------------------------------- */ /* Demo request modal */ /* */ /* Bootstrap 4.6 supplies the behaviour and the backdrop; everything */ /* below is this page's own skin over it. The head takes the hero's */ /* gradient so that opening the form does not feel like leaving the */ /* page it was opened from. */ /* ---------------------------------------------------------------- */ .pr-modal .modal-content { border: 0; border-radius: var(--pr-radius-lg); overflow: hidden; box-shadow: var(--pr-shadow-lg); } .pr-modal .modal-dialog { max-width: 620px; } .pr-modal-head { position: relative; background: radial-gradient(90% 140% at 88% 0%, rgba(245, 166, 35, .22) 0%, transparent 55%), linear-gradient(140deg, var(--pr-primary-dark) 0%, var(--pr-primary) 52%, var(--pr-secondary) 100%); color: rgba(255, 255, 255, .84); padding: var(--pr-space-6) var(--pr-space-7) var(--pr-space-5); } .pr-modal-head h2 { color: #fff; font-size: clamp(21px, 2.4vw, 26px); margin: 0 0 var(--pr-space-2); } .pr-modal-head p { font-size: 14.5px; color: rgba(255, 255, 255, .8); margin: 0; max-width: 46ch; } .pr-modal-kicker { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--pr-accent); margin-bottom: var(--pr-space-2); } /* * Bootstrap's .close is black at 50% opacity, which on this gradient is a * smudge. Sized up as well - it is the only way out of the dialog for a * pointer, and the default is a 14px hit area. */ .pr-modal .close { position: absolute; top: var(--pr-space-4); right: var(--pr-space-4); width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; opacity: 1; text-shadow: none; font-size: 22px; line-height: 1; transition: background-color var(--pr-transition); } .pr-modal .close:hover, .pr-modal .close:focus { background: rgba(255, 255, 255, .28); color: #fff; opacity: 1; } .pr-modal-body { padding: var(--pr-space-6) var(--pr-space-7) var(--pr-space-7); background: var(--pr-surface); } .pr-modal-body label { display: block; font-size: 13px; font-weight: 600; color: var(--pr-ink); margin-bottom: var(--pr-space-2); } .pr-modal-body .form-control { border: 1px solid var(--pr-line); border-radius: var(--pr-radius-sm); background: var(--pr-surface-alt); color: var(--pr-ink); font-size: 15px; height: auto; padding: var(--pr-space-3) var(--pr-space-4); transition: border-color var(--pr-transition), box-shadow var(--pr-transition), background-color var(--pr-transition); } .pr-modal-body .form-control:focus { background: var(--pr-surface); border-color: var(--pr-primary); box-shadow: var(--pr-focus-ring); } .pr-modal-body .form-group { margin-bottom: var(--pr-space-4); } .pr-required { color: var(--pr-accent-dark); } .pr-modal-note { font-size: 12.5px; color: var(--pr-muted); margin: 0 0 var(--pr-space-5); } .pr-modal-submit { width: 100%; } /* * The result of a submission, shown at the top of the hero because the * redirect lands the visitor there. Glass rather than Bootstrap's alert * colours, which are built for a white page and would sit on the gradient * like a sticker. */ .pr-hero-alert { display: flex; align-items: flex-start; gap: var(--pr-space-3); max-width: 56ch; margin-bottom: var(--pr-space-5); padding: var(--pr-space-4) var(--pr-space-5); border-radius: var(--pr-radius); font-size: 15px; color: #fff; background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .pr-hero-alert i { margin-top: 3px; flex: none; } /* Success leans on the gold, refusal on a red that still reads on blue. */ .pr-hero-alert-ok i { color: var(--pr-accent); } .pr-hero-alert-bad { background: rgba(255, 138, 138, .16); border-color: rgba(255, 168, 168, .45); } .pr-hero-alert-bad i { color: #ffb4b4; } /* ---------------------------------------------------------------- */ /* Footer */ /* ---------------------------------------------------------------- */ .pr-footer { position: relative; background: var(--pr-dark); color: rgba(255, 255, 255, .64); font-size: 14.5px; padding: var(--pr-space-8) 0 var(--pr-space-5); } /* The brand gradient as a hairline where the page meets the footer. */ .pr-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--pr-primary), var(--pr-secondary), var(--pr-accent)); } .pr-footer .pr-brand { color: #fff; margin-bottom: var(--pr-space-4); } .pr-footer .pr-brand-text { font-size: 17px; } .pr-footer h4 { color: #fff; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin-bottom: var(--pr-space-5); } .pr-footer a { color: rgba(255, 255, 255, .64); } .pr-footer a:hover { color: #fff; } .pr-footer-links { list-style: none; padding: 0; margin: 0; } .pr-footer-links li { margin-bottom: var(--pr-space-3); line-height: 1.5; } .pr-footer-links i { color: var(--pr-accent); width: 16px; } /* Nudges a link sideways on hover, so the row reads as interactive. */ .pr-footer-links a { display: inline-block; transition: transform var(--pr-transition), color var(--pr-transition); } .pr-footer-links a:hover { transform: translateX(3px); } .pr-footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: var(--pr-space-5); padding-top: var(--pr-space-5); font-size: 13.5px; color: rgba(255, 255, 255, .5); } /* ---------------------------------------------------------------- */ /* Responsive */ /* ---------------------------------------------------------------- */ @media (max-width: 991px) { /* * The header stops being fixed once it collapses. An open menu at this * width is tall enough to cover the viewport, and pinning that to the top * leaves the visitor with no way to scroll past it. It still lies over the * hero while closed - that is the whole point of the treatment - so only * the .is-solid state is unpinned. */ .pr-header.is-solid { position: absolute; } /* * The opened menu gets a ground of its own. Expanded over the hero the * links would be legible, but expanded anywhere else - or over the pale * part of the gradient - they would not, and a menu is not a place to * gamble on what happens to be behind it. */ .pr-nav .navbar-collapse.show, .pr-nav .navbar-collapse.collapsing { background: var(--pr-dark); border-radius: var(--pr-radius); margin-top: var(--pr-space-3); padding: var(--pr-space-2) var(--pr-space-4) var(--pr-space-4); box-shadow: var(--pr-shadow-lg); } .pr-nav .nav-link { padding: var(--pr-space-3) 0; border-radius: 0; color: rgba(255, 255, 255, .92); text-shadow: none; } .pr-nav .nav-link:hover { background: transparent; color: #fff; } /* The open menu is dark in both header states, so the links stay white. */ .pr-header.is-solid .pr-nav .nav-link { color: rgba(255, 255, 255, .92); } .pr-header.is-solid .pr-nav .nav-link:hover { background: transparent; color: #fff; } .pr-nav .pr-btn-login, .pr-header.is-solid .pr-nav .pr-btn-login { margin-top: var(--pr-space-3); background: var(--pr-primary); border-color: var(--pr-primary); color: #fff; } .pr-hero { padding: calc(var(--pr-space-8) + var(--pr-header-h)) 0 calc(var(--pr-space-8) + 40px); text-align: center; } .pr-hero-lead { margin-left: auto; margin-right: auto; } .pr-hero-actions, .pr-hero-points { justify-content: center; } /* Flat on a phone: the perspective needs width to read as depth. */ .pr-hero-art { transform: none; margin-top: var(--pr-space-7); } .pr-hero-art:hover { transform: none; } .pr-section { padding: var(--pr-space-8) 0; } /* The lift would only push it into the card above once they stack. */ .pr-plan-featured { transform: none; } .pr-plan-featured:hover { transform: translateY(-4px); } } @media (max-width: 767px) { /* * The strip centres and its two items can fall onto a second line at this * width, and the masthead loses a little height with them - so the space * the hero has to keep clear is restated rather than inherited. Erring * generous: too much leaves a gap above the eyebrow, too little puts the * menu on top of it. */ :root { --pr-header-h: 124px; } .pr-stats { margin-top: calc(var(--pr-space-7) * -1); } .pr-stats .container > .row { padding: var(--pr-space-4) var(--pr-space-2); } /* * Two per row on a phone, so the divider belongs before the second and * the fourth rather than before every one but the first. */ .pr-stats [class*="col-"]:nth-child(odd) .pr-stat::before { display: none; } .pr-topbar { text-align: center; } .pr-topbar-item { margin: 0 var(--pr-space-3); } .pr-section-head { margin-bottom: var(--pr-space-6); } .pr-btn { width: 100%; } .pr-cta .pr-btn { margin: 0 0 var(--pr-space-3); } } /* * A visitor who has asked their system to reduce motion gets the same layout * with none of the movement. */ @media (prefers-reduced-motion: reduce) { body.product *, body.product *::before, body.product *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } body.product .pr-btn:hover, body.product .pr-module:hover, body.product .pr-feature:hover, body.product .pr-plan:hover, body.product .pr-quote:hover, body.product .pr-contact-card:hover, body.product .pr-footer-links a:hover { transform: none; } body.product .pr-hero-art, body.product .pr-hero-art:hover { transform: none; } } /* ---------------------------------------------------------------- */ /* Print */ /* */ /* A prospectus does get printed and passed round a trustees' */ /* meeting. The chrome and the decoration are not worth the ink. */ /* ---------------------------------------------------------------- */ @media print { .pr-nav, .pr-topbar, .pr-cta, .pr-skip, .pr-hero-art { display: none !important; } body.product { color: #000; background: #fff; font-size: 11pt; } .pr-hero { background: none; color: #000; padding: 0 0 var(--pr-space-5); } .pr-hero h1, .pr-hero-lead, .pr-hero-points { color: #000; } .pr-module, .pr-plan, .pr-quote, .pr-feature, .pr-contact-card, .pr-stats .container > .row { box-shadow: none; break-inside: avoid; } .pr-plan-featured { transform: none; } .pr-footer { background: none; color: #000; } .pr-footer a, .pr-footer h4 { color: #000; } } /* ================================================================ */ /* Sign-in page */ /* */ /* Used by jsp/welcome/login.jsp, which carries both classes: */ /* body.product for the tokens and buttons above, and .product-auth */ /* for the split layout below. */ /* */ /* It replaces the UBold theme's .wrapper-page/.card-box markup and */ /* the five ERP stylesheets that came with it. That theme is what */ /* the ERP behind the login looks like; this page sits in front of */ /* the login, so it belongs to the marketing site's design instead. */ /* Landing on a page that looks nothing like the one with the Login */ /* button on it is the seam this closes. */ /* ================================================================ */ /* * Two panels side by side, filling the viewport: the brand on the left, the * form on the right. min-height rather than height so that a short viewport - * a laptop with the browser chrome open, or a validation message expanding * the form - scrolls instead of clipping the sign-in button. */ body.product-auth { background: var(--pr-surface-alt); } .pr-auth { display: flex; min-height: 100vh; align-items: stretch; } /* ---------------------------------------------------------------- */ /* Brand panel */ /* ---------------------------------------------------------------- */ /* * The same gradient as .pr-hero, deliberately - this is the half of the page * that has to be recognisable as "the site I just clicked Login on". */ /* * The same three layers as .pr-hero, in the same order: the blue-to-indigo * base, two wide radial glows so the base does not read flat, and the ruled * grid over the top. Deliberately identical rather than merely similar - this * panel is the first thing a visitor sees after clicking Login, and the point * of the seam is that it looks like the page they just left. * * The angle is 140deg here as it is there. It was 135 before, which nobody * would notice on its own, but the two gradients meet in the visitor's memory * about one second apart. */ .pr-auth-brand { flex: 0 0 46%; max-width: 46%; background: radial-gradient(90% 120% at 88% 8%, rgba(245, 166, 35, .22) 0%, transparent 52%), radial-gradient(70% 100% at 6% 92%, rgba(74, 58, 176, .5) 0%, transparent 58%), linear-gradient(140deg, var(--pr-primary-dark) 0%, var(--pr-primary) 52%, var(--pr-secondary) 100%); color: #fff; padding: var(--pr-space-7) 52px; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; } /* Graph paper, faded out down the panel exactly as it is down the hero. */ .pr-auth-brand::before { content: ""; position: absolute; inset: 0; background-image: var(--pr-grid); -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); mask-image: linear-gradient(to bottom, #000 0%, transparent 78%); pointer-events: none; } .pr-auth-brand::after { content: ""; position: absolute; bottom: -200px; left: -120px; width: 520px; height: 520px; border-radius: 50%; background: rgba(255, 255, 255, .05); pointer-events: none; } .pr-auth-brand > * { position: relative; z-index: 1; } .pr-auth-brand .pr-brand, .pr-auth-brand .pr-brand:hover, .pr-auth-brand .pr-brand:focus { color: #fff; padding: 0; } /* The same glass tile the header wears over the hero, for the same reason: the brand gradient would be blue on blue here. */ .pr-auth-brand .pr-brand-mark { background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none; } .pr-auth-brand .pr-brand-text small { color: rgba(255, 255, 255, .7); } /* * Fluid, on the same scale as the landing page's section headings, rather * than pinned at 30px. The panel is a percentage of the window, so a fixed * size crowds the copy on a small laptop and looks lost on a large monitor. */ .pr-auth-pitch h2 { color: #fff; font-size: var(--pr-h2); letter-spacing: -.02em; margin-bottom: var(--pr-space-4); } .pr-auth-pitch p { color: rgba(255, 255, 255, .85); font-size: var(--pr-lead); margin-bottom: var(--pr-space-5); max-width: 44ch; } .pr-auth-points { list-style: none; padding: 0; margin: 0; } .pr-auth-points li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: 15px; color: rgba(255, 255, 255, .9); } .pr-auth-points li .fa { position: absolute; left: 0; top: 5px; color: var(--pr-accent); } .pr-auth-foot { font-size: 13.5px; color: rgba(255, 255, 255, .6); } /* ---------------------------------------------------------------- */ /* Form panel */ /* ---------------------------------------------------------------- */ .pr-auth-form { flex: 1 1 54%; background: var(--pr-surface); display: flex; align-items: center; justify-content: center; padding: 48px 24px; } .pr-auth-card { width: 100%; max-width: 396px; } .pr-auth-card h1 { font-size: 27px; margin-bottom: 6px; } .pr-auth-intro { font-size: 15px; color: var(--pr-muted); margin-bottom: 28px; } /* * The brand only appears on this half below the lg breakpoint, where the * panel that normally carries it is gone. */ .pr-auth-card .pr-brand { display: none; margin-bottom: 26px; padding: 0; } /* ---------------------------------------------------------------- */ /* Fields */ /* */ /* Written rather than taken from Bootstrap's .form-control: the */ /* icon needs room inside the control, and overriding BS4's padding, */ /* height, focus ring and invalid state came to more rules than */ /* simply stating them. */ /* ---------------------------------------------------------------- */ .pr-field { margin-bottom: 18px; } .pr-field label { display: block; font-size: 13.5px; font-weight: 600; color: var(--pr-ink); margin-bottom: 7px; } .pr-field-control { position: relative; } .pr-field-control > .fa { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--pr-muted); font-size: 15px; pointer-events: none; } .pr-input { width: 100%; height: 48px; padding: 10px 15px 10px 42px; font-size: 15px; color: var(--pr-ink); background: var(--pr-surface); border: 1px solid var(--pr-line); border-radius: 8px; transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none; } .pr-input::placeholder { color: var(--pr-muted); } .pr-input:focus { outline: none; border-color: var(--pr-primary); box-shadow: var(--pr-focus-ring); } /* Room for the reveal button, which sits where the icon does not. */ .pr-input-password { padding-right: 46px; } /* * Reveal/hide. A real