/* Public Dynamic CSS v1.0.2 */ /* Global styles */ /* Dark Blue: #00437a Blue: #005c9b Purple: #7d0082 */ html { width: 100%; height: 100%; } body.login-page { width: 100%; height: 100%; font-family: "open_sansregular", "Segoe UI","Helvetica Neue",Arial,sans-serif; color: #2d2d2b; background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-standard.jpg') no-repeat center center; background-size: cover !important; background-attachment: fixed !important; } body.login-page a, body.login-page a:link { color: #2d2d2b; text-decoration: none; } body.login-page a:visited { color: #2d2d2b } body.login-page a:focus { color: #2d2d2b; } body.login-page a:hover { color: #7d0082; } body.login-page a:active { color: #2d2d2b; } body.login-page img, body.login-page iframe { max-width: 100% } body.login-page.fa { min-width: 16px; } body.login-page .col-add { display: none; } body.login-page .container { width: 100%; height: 100%; max-width: 5120px; padding-right: 0; padding-left: 0; } body.login-page .navbar { background-color: #00437a !important; } body.login-page .landing-container { height: 100%; height: calc(100% - 35px); padding-top: 15px; } body.login-page .landing-row{ height: 100%; } body.login-page .col-logo { text-align: center; } body.login-page .logo, .login-wrapper { visibility: hidden; } body.login-page .login-wrapper { padding: 16px 16px 0; background: #ffffff; background: rgba(255, 255, 255, 0); border: 1px solid #00437a; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; -moz-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4); -webkit-box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4); box-shadow: 3px 3px 5px -1px rgba(0,0,0,0.4); } body.login-page .login-wrapper h1 { color: #2d2d2b; font-size: 2.1rem; } body.login-page .login-wrapper p { color: #fff; } body.login-page .login-wrapper .input-group-addon { min-width: 42px; color: #fff; background-color: #00437a; border: 0px solid rgba(0,0,0,.15); text-align: center; align-items: center; justify-content: center; } body.login-page .login-wrapper .form-control { border: 1px solid #00437a; } body.login-page .login-wrapper .form-control:hover, body.login-page .login-wrapper .form-control:focus { border: 1px solid #80bdff; } body.login-page .login-wrapper .btn { cursor: pointer; background: #00437a; } body.login-page .login-wrapper .btn:hover { background: #00437a; border: 1px solid #00437a; opacity: 0.85; } body.login-page .form-msg { min-height: 28px; margin-top: .5rem; font-weight: bold; color: #cc0000; } body.login-page .form-msg #js-msg { display: none; } body.login-page .loader { display: none; border: 10px solid #fff; border-radius: 50%; border-top: 10px solid #00437a; width: 48px; height: 48px; -webkit-animation: loader-spin 1.25s linear infinite; animation: loader-spin 1.25s linear infinite; } body.login-page .loader-login { width: 36px; height: 36px; border: 8px solid #fff; border-top: 8px solid #00437a; margin: 0 8px; } @-webkit-keyframes loader-spin { 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes loader-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } body.login-page .footer { width: 100%; margin-right: auto; margin-left: auto; padding: 8px 15px; font-size: 0.8rem; color: #2d2d2b; background-color: #00437a !important; } body.login-page .footer a, body.login-page .footer a:link { color: #2d2d2b; } body.login-page .footer a:hover { color: #005c9b; } body.login-page .tooltip.in { opacity: 1; } body.login-page .login-contact, body.login-page #dialog-slider-warning { display: none; } .login-page .grecaptcha-badge { z-index: 1031; } body.login-page .row-public, body.login-page .student-menu-flyout { display: none!important; } /* Google Sign In Button */ .gsi-material-button { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-appearance: none; background-color: #131314; background-image: none; border: 1px solid #747775; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #e3e3e3; cursor: pointer; font-family: 'Roboto', arial, sans-serif; font-size: 14px; height: 40px; letter-spacing: 0.25px; outline: none; overflow: hidden; padding: 0 12px; position: relative; text-align: center; -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s; transition: background-color .218s, border-color .218s, box-shadow .218s; vertical-align: middle; white-space: nowrap; width: auto; max-width: 400px; min-width: min-content; border-color: #8e918f; width: 100%; margin: 15px 0; } .gsi-material-button .gsi-material-button-icon { height: 20px; margin-right: 10px; min-width: 20px; width: 20px; } .gsi-material-button .gsi-material-button-content-wrapper { -webkit-align-items: center; align-items: center; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; justify-content: center; position: relative; width: 100%; } .gsi-material-button .gsi-material-button-contents { -webkit-flex-grow: 0; flex-grow: 0; font-family: 'Roboto', arial, sans-serif; font-weight: 500; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .gsi-material-button .gsi-material-button-state { -webkit-transition: opacity .218s; transition: opacity .218s; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; } .gsi-material-button:disabled { cursor: default; background-color: #13131461; border-color: #8e918f1f; } .gsi-material-button:disabled .gsi-material-button-state { background-color: #e3e3e31f; } .gsi-material-button:disabled .gsi-material-button-contents { opacity: 38%; } .gsi-material-button:disabled .gsi-material-button-icon { opacity: 38%; } .gsi-material-button:not(:disabled):active .gsi-material-button-state, .gsi-material-button:not(:disabled):focus .gsi-material-button-state { background-color: white; opacity: 12%; } .gsi-material-button:not(:disabled):hover { -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); } .gsi-material-button:not(:disabled):hover .gsi-material-button-state { background-color: white; opacity: 8%; } .google_login_or { margin-bottom: 15px; display: block; font-size: 20px; text-transform: uppercase; text-align: center; } /* Scroll bars */ ::-webkit-scrollbar { width: 10px; background: #fff; } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 14px #d0d0d0; } ::-webkit-scrollbar-thumb { -webkit-box-shadow: inset 0 0 10px #006fbb; background: #fff; border-radius: 3px; } /* Media Queries */ /* Bootstrap Standard Breakpoints */ @media (min-width: 576px) { body.login-page { background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-small.jpg') no-repeat center center; } } @media (min-width: 768px) { body.login-page { background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-small.jpg') no-repeat center center; } } @media (min-width: 992px) { body.login-page { background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-small.jpg') no-repeat center center; } } @media (min-width: 1200px) { body.login-page { background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-standard.jpg') no-repeat center center; } } /* Custom Breakpoints */ @media (orientation: landscape) { body.login-page .col-last { height: 70px; } } @media (min-width: 1921px) { body.login-page { background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-large.jpg') no-repeat center center; } } @media (min-width: 319px) and (orientation: portrait) { body.login-page { background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-portrait-standard.jpg') no-repeat center center; } } @media (min-width: 1024px) and (orientation: portrait) { body.login-page { background: #1d1d1d url('https://nwm.tools/themes/default/images/login-background-portrait-large.jpg') no-repeat center center; } } @media (max-width: 991px) { body.login-page .col-md-2, body.login-page .col-md-4, body.login-page .col-md-6 { width: 100%; max-width: 100%; -ms-flex: 0 0 100%; flex: 0 0 100%; } body.login-page .col-logo img { max-width: 30%; } body.login-page .col-spacer { display: none; } body.login-page .col-add { display: block; } body.login-page .align-self-center { -ms-flex-item-align: auto !important; align-self: auto !important; } body.login-page .footer, body.login-page .footer .text-right { text-align: center !IMPORTANT; } body.login-page .login-wrapper h1 { font-size: 1.35rem; } body.login-page .col-last { height: 90px; } } @media (max-width: 575px) { body.login-page .login-wrapper h1 { font-size: 1.25rem; } } /* Front styles */ /* Variables */ :root { --theme-colour-text: #2d2d2b; --theme-colour-main: #00437a; --theme-colour-main-light: #f8fbfd; --theme-colour-link: #005c9b; --theme-colour-link-hover: #7d0082; --theme-colour-background: #ffffff; --theme-colour-light-blue: #099ad3; --theme-colour-lighter-blue: #03b7ef; } /* Global */ body { background: #1d1d1d; font-family: "open_sansregular", "Helvetica Neue", Helvetica, Arial, sans-serif; } img, iframe { max-width: 100%; } .relative { position: relative; } .container img { margin: 0; } a, a:link, a:visited, a:focus { color: var(--theme-colour-main); transition: color 0.35s; text-decoration: none; } a:hover { color: var(--theme-colour-link-hover); transition: color 0.25s; } .btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open>.dropdown-toggle.btn-primary.focus, .open>.dropdown-toggle.btn-primary:focus, .open>.dropdown-toggle.btn-primary:hover { color: #fff; background-color: rgb(97,97,97); border: 1px solid transparent; } /* Grid adjustment */ @media screen and (max-width: 814px) { .row { margin-right: 0; margin-left: 0; } img, iframe { max-width: 100% !IMPORTANT; } } /* Hero Feature */ .row-hero { align-items: center; } .col-hero-img { text-align: center; } .col-hero-img img { margin: 0 auto; } /* Header/Hero Buttons */ #header-signup-btn, #header-login-btn, #hero-signup-btn, #hero-contact-btn { display: block; line-height: 1.5em; padding: 5px 20px; color: #ffffff; margin: 0 0 3px; } #hero-signup-btn, #hero-contact-btn { padding: 11px 25px; margin: 0 0 9px; font-weight: 500; font-size: 1.25em; } #header-signup-btn, #hero-signup-btn { background: var(--theme-colour-main); } #header-login-btn, #hero-contact-btn { background: var(--theme-colour-link-hover); margin: 0; } /* Main Menu */ nav.navbar { padding: 0; margin: 15px 0 0; min-height: 61px; } nav.navbar ul.nav-menu { list-style-type: none; margin: 0; padding: 0; } nav.navbar ul.nav-menu li { margin: 0; padding: 0; float: left; line-height: 1.35rem; } nav.navbar ul.nav-menu li a, nav.navbar ul.nav-menu li a:link, nav.navbar ul.nav-menu li a:visited { display: inline-block; padding: 10px; font-size: 1.25rem; text-decoration: none; font-weight: 500; color: var(--theme-colour-text); -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } nav.navbar ul.nav-menu li a i { font-size: 16px; } nav.navbar ul.nav-menu li a:hover { color: var(--theme-colour-light-blue); -webkit-transition: all 0.25s; -moz-transition: all 0.25s; transition: all 0.25s; } nav.navbar ul.nav-menu li:first-child a { padding-left: 0; } nav.navbar ul.nav-menu li:last-child a { padding-right: 0; } nav.navbar ul.nav-menu li.has-child {} nav.navbar ul.nav-menu li.has-child .child-wrapper { position: absolute; display: block; width: auto; opacity: 0; margin: 0 0 0 10px; padding: 5px 10px; border: 1px solid var(--theme-colour-main-light); background: #ffffff; z-index: -1; -webkit-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.33); -moz-box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.33); box-shadow: 3px 3px 3px 0px rgba(0,0,0,0.33); -webkit-transition: all 0.35s; -moz-transition: all 0.35s; transition: all 0.35s; } nav.navbar ul.nav-menu li:first-child .child-wrapper { margin-left: 0; } nav.navbar ul.nav-menu li.has-child:hover > .child-wrapper { opacity: 1; z-index: 9999; -webkit-transition: all 0.45s; -moz-transition: all 0.45s; transition: all 0.45s; } nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu { list-style-type: none; margin: 0; padding: 0; } nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li { margin: 0; padding: 0; float: none; } nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a, nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a:link, nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a:visited { margin: 0; padding: 5px 0; font-size: 1.15rem; color: var(--theme-colour-main); } nav.navbar ul.nav-menu li.has-child .child-wrapper ul.child-menu li a:hover { color: var(--theme-colour-link-hover); } .mobile-menu-close { position: fixed; top: 5px; right: -1000px; margin-right: 10px; font-size: 36px; color: var(--theme-colour-main); cursor: pointer; transition: right 0.35s; z-index: 99999; } @media screen and (max-width: 991px) { nav.navbar ul.nav-menu li a, nav.navbar ul.nav-menu li a:link, nav.navbar ul.nav-menu li a:visited { padding: 5px; font-size: 1rem; } } @media screen and (max-width: 414px) { /* Adjust Logo bottom margin */ #nwm-tools-header img { margin-bottom: 15px; } /* Adjust menu to work with mobiles */ nav.navbar { position: fixed; top: 0; right: -1000px; width: 100%; margin: 0 0 15px 0; padding: 15px; z-index: 99999; background: #fff; border-bottom: 1px solid var(--theme-colour-main); transition: right 0.35s; z-index: 99999; } nav.navbar ul.nav-menu li { display: block; float: none; } nav.navbar ul.nav-menu li a, nav.navbar ul.nav-menu li a:link, nav.navbar ul.nav-menu li a:visited { padding: 15px; } .mobile-menu-close { } } /* Mobile Menu */ .mobile-menu { margin-top: 15px; text-align: center; } .mobile-menu i { font-size: 36px; color: var(--theme-colour-main); cursor: pointer; } @media screen and (min-width: 415px) { .mobile-menu { display: none; } } /* Front Web Forms */ .app-front-form textarea { min-height: 80px; } .app-front-form .input-group button { height: 100%; font-weight: 700; font-size: 16px; color: #fff; background-color: var(--theme-colour-main); } .app-front-form .input-group button:hover { background-color: var(--theme-colour-link-hover); border-color: var(--theme-colour-link-hover); color: #fff; } .app-front-form .form-group button { font-weight: 700; font-size: 16px; color: #fff; background-color: var(--theme-colour-main); } .app-front-form .form-group button:hover { background-color: var(--theme-colour-link-hover); border-color: var(--theme-colour-link-hover); color: #fff; } .app-front-form .app-front-form-msg { height: 32px; max-height: 32px; margin-top: 5px; } .app-front-form .app-front-form-msg span.nwm-red { font-weight: bold; color: #cc0000; } .app-front-form .app-front-form-msg span.nwm-green { font-weight: bold; color: #008000; } .app-front-form .input-override { display: none; } /* Footer */ .container-footer, .container-footer p, .container-footer ul { color: #ffffff; } .container-footer a, .container-footer a:link, .container-footer a:visited, .container-footer a:focus { color: #ffffff; transition: color 0.35s; } .container-footer a:hover { color: var(--theme-colour-lighter-blue)!IMPORTANT; transition: color 0.25s; } #checkout { display: none; position: fixed; width: 94%; max-height: 80%; top: 5%; left: 3%; z-index: 99999; padding: 15px; overflow-y: auto; background: #000000; -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66); -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66); box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.66); border: 2px solid #3078db; } .btn-checkout { margin-top: 5px; } .powered-by-stripe svg { max-width: 160px; margin-top: 0; } @media screen and (min-width: 415px) { #checkout { width: 50%; top: 10%; left: 25%; } } @media screen and (min-width: 1024px) { #checkout { width: 33%; top: 10%; left: 33%; padding: 30px; } } @media screen and (max-width: 430px) { .footer div, .footer div ul li { display: block; width: 100%; text-align: center; } .footer div ul { margin-top: 10px; } .footer div ul li { padding: 5px 0; } .footer div ul li:last-child { padding: 15px 0 5px; } } .btn-success { color: #fff; background-color: #3078db!important; border-color: #3078db!important; } /* =================================================================== LOG IN AND SIGN UP -- ONE GREEN, ONE BLUE ------------------------------------------------------------------- They were both green. Log In filled #2dc26b, Sign Up black with a white outline that turned #2dc26b on hover, so pointing at either one produced the same green button and the pair had no hierarchy at all -- it just had a delay before it lost its hierarchy. Green is GO and price, and only that. Two greens in one corner spend the one colour that is supposed to mean something. So Log In keeps the green, which is what Martin asked for this morning, and Sign Up takes the app's blue. THE BLUE IS NOT A NEW COLOUR. It is the treatment the hamburger on the other side of this bar already uses and the app uses for every secondary control: an outline at rest -- rgba(91,147,255,.55) on #5b93ff text -- filling to #2563eb when you commit to it. Whatever else changes, the public bar now speaks the app's language for "this is the quiet one". NOT chosen from the ribbons. The obvious story was that the blue slab sits over Log In and the green over Sign Up, so the buttons should match the slab above them -- but the slabs CROSSFADE and swap sides. Sampled over ten seconds: path A ran green while B ran blue, and a minute earlier it was the other way round. An argument from adjacency would have been wrong within the minute. THE HOVER DOES SOMETHING NOW. It was a flat colour swap, which on the outlined button meant the border simply changed colour. Both buttons lift 1px and cast a shadow in their own hue, so the feedback is the button coming toward you rather than repainting. :focus-visible gets the same ring, because a keyboard should not be the one state with no answer. Motion is dropped for anyone who asked for it to be. =================================================================== */ .btn-public-signup, .btn-public-login { border-radius: 15px!important; padding: 3px 18px!important; } /* THE TRANSITION NEEDS THE LONGER SELECTOR, and the colours above do not, because they carry !important and this does not. These buttons are elements, and the theme has `a, a:link, a:visited, a:focus { transition: color .35s }`. `a:link` is (0,1,1); a bare `.btn-public-login` is (0,1,0) and loses -- so the first version of this animated nothing but the text colour, and only the transition, silently. Measured, not spotted: transition-property computed as `color`. */ .top-button-menu a.btn-public-signup, .top-button-menu a.btn-public-login { transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease, box-shadow .16s ease; } /* Log In -- outlined at rest like Sign Up, and it fills from a rotating sweep rather than by swapping colour. Both buttons now start as outlines, so the difference between them is what happens when you reach for them, which is the only moment the difference matters. The fill is NOT a background transition on the button. It is an ::after that goes green on a delay, sitting over an ::before that carries the spinning gradient -- so the sweep runs first and is then covered by the green it was promising. A background transition cannot do that, because there is only one background. */ .btn-public-login { background: transparent!important; border: 2px solid rgba(45,194,107,.55)!important; color: #2dc26b!important; } .btn-public-login:hover, .btn-public-login:focus-visible { border-color: #2dc26b!important; color: #fff!important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(45,194,107,.34); } /* Sign Up -- outlined, the blue one. */ .btn-public-signup { background: transparent!important; border: 2px solid rgba(91,147,255,.55)!important; color: #5b93ff!important; } .btn-public-signup:hover, .btn-public-signup:focus-visible { background: #2563eb!important; border-color: #2563eb!important; color: #fff!important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(37,99,235,.38); } /* Pressed goes back down. A lift that stays lifted while the mouse is held is the one part of this that would read as broken. */ .btn-public-login:active, .btn-public-signup:active { transform: translateY(0); box-shadow: none; } /* ---- THE ROTATING SWEEP ON LOG IN -------------------------------- Scoped to the bar. The same two classes are on links in the flyout menu, where the button skin is deliberately stripped further down this file -- but nothing there resets a pseudo-element, so an unscoped ::before would have a conic gradient spinning behind a plain menu row on hover. HOW IT IS BUILT, since none of it is obvious from the declarations: ::before is a 200px SQUARE, centred, carrying the conic gradient. It is square because a rotating rectangle sweeps its own corners through the frame and the light pulses as it turns; a square rotating about its centre presents the same silhouette at every angle. 200 clears the pill's ~88px diagonal, so no corner ever enters the view. It is the ELEMENT that rotates, not the gradient's `from` angle. Animating an angle inside conic-gradient needs @property to be interpolable at all, and where that is unsupported it does not degrade -- it simply never moves. A transform rotation runs everywhere and on the compositor. overflow:hidden clips it to the pill. That clips to the PADDING box, inside the border, so the sweep runs within the outline rather than around it and the green rim stays a rim throughout. ::after is the fill, on a .25s delay -- long enough for about a quarter turn to read before the green covers it. The label sits above both on z-index 2, and takes the same delay so the text turns white as the green arrives underneath it rather than a beat early against nothing. -------------------------------------------------------- */ .top-button-menu a.btn-public-login { position: relative; overflow: hidden; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease, color .3s ease .25s; } .top-button-menu a.btn-public-login > i, .top-button-menu a.btn-public-login > span { position: relative; z-index: 2; } .top-button-menu a.btn-public-login::before { content: ""; position: absolute; left: 50%; top: 50%; width: 200px; height: 200px; margin: -100px 0 0 -100px; z-index: 0; opacity: 0; background: conic-gradient(from 0deg, rgba(122,240,170,0) 0deg, rgba(122,240,170,.9) 60deg, rgba(190,255,220,1) 105deg, rgba(122,240,170,.9) 150deg, rgba(122,240,170,0) 240deg, rgba(122,240,170,0) 360deg); transition: opacity .16s ease; } .top-button-menu a.btn-public-login::after { content: ""; position: absolute; inset: 0; z-index: 1; background-color: rgba(45,194,107,0); transition: background-color .3s ease .25s; } .top-button-menu a.btn-public-login:hover::before, .top-button-menu a.btn-public-login:focus-visible::before { opacity: 1; animation: lhq-login-sweep .9s linear infinite; } .top-button-menu a.btn-public-login:hover::after, .top-button-menu a.btn-public-login:focus-visible::after { background-color: #2dc26b; } @keyframes lhq-login-sweep { to { transform: rotate(360deg); } } /* Reduced motion keeps the outline-to-fill, which is the information, and drops the spinning, which is the flourish. The fill loses its delay too -- a quarter-second of nothing happening only makes sense while something is happening in it. */ @media (prefers-reduced-motion: reduce) { .top-button-menu a.btn-public-login { transition: border-color .16s ease, color .16s ease; } .top-button-menu a.btn-public-login:hover::before, .top-button-menu a.btn-public-login:focus-visible::before { opacity: 0; animation: none; } .top-button-menu a.btn-public-login::after { transition: background-color .16s ease; } } @media (prefers-reduced-motion: reduce) { .top-button-menu a.btn-public-signup, .top-button-menu a.btn-public-login { transition: background-color .16s ease, border-color .16s ease, color .16s ease; } .btn-public-login:hover, .btn-public-login:focus-visible, .btn-public-signup:hover, .btn-public-signup:focus-visible { transform: none; } } .btn-back, .btn-subscribe, .btn-purchase-digital, .btn-join-login { background-color: rgb(52, 199, 89)!important; color: rgb(255, 255, 255)!important; border-color: rgb(52, 199, 89)!important; } .btn-back:hover, .btn-subscribe:hover, .btn-purchase-digital:hover, .btn-join-login:hover { background-color: rgb(97, 97, 97)!important; color: rgb(255, 255, 255)!important; border-color: rgb(97, 97, 97)!important; } .input-group-addon { color: #fff!important; background: #3078db!important; border-radius: 0!important; } .input-group-addon-help { background: #28a72c!important; } .popover-title { background-color: #3078db!important; color: #fff; font-weight: 500; } .row.row-public { display: flex; width: 100%; margin-left: 0; background: #3d3d3d; align-items: center; } /* THE PHONE GUTTER WAS 35px A SIDE, on a 375px screen -- 19% of the display spent on margin. Two wrappers stack it: .container-content pads 20 and Bootstrap's .col-md-12 pads another 15, and neither was written with a phone in mind. Measured on a 375 viewport: the grid had 255px to draw in and sat off-centre, because the 10px the scrollbar takes comes off one side only. 16 a side is the figure, which is the ordinary phone gutter and what the cards were designed against. Scoped to the marketplace rather than applied to every public page, because the landing pages and the storefront have their own layouts and are not what is being looked at -- they are worth the same measurement, separately. */ /* .container-content-full's padding MOVED TO brand.css. It was here, and here is wrong: public.css is only in the public bundle, so the rule covered a signed-out visitor and silently left a signed-in one with no padding at all -- the wrapper's 20px had been an inline style that applied in both. brand.css is one of the two sheets both bundles load. The full note is there. */ /* THE BAR STOPS BEING A BAR, so the plate can be a layer on top of it. chrome.css paints `.navbar-static-top, .footer` #003142 -- one rule for both -- and the plate is #0f3d4a. Two teals a few units apart, so the thing that is supposed to be sitting ON the page read as part of a strip instead, and the drop shadow under it had nothing to fall on. Page colour instead. Every public page's body is #1d1d1d -- checked on /, /contact-us/ and /products/, where the sections over it are all transparent -- so one value works everywhere and the bar simply stops being visible. What is left is a logo and a plate floating on the page, which is what the signed-in chrome looks like. OPAQUE, NOT TRANSPARENT, and that is the whole reason a band is still here. The nav is position:fixed and content scrolls underneath it; make it transparent and product cards travel up through the logo. Matching the page gets the look without the collision. Scoped to .row-public so the admin bar and the footer, which share that chrome.css rule, keep their own colour. */ .row-public nav.navbar-static-top { background-color: #1d1d1d; } body.courses .row.row-public { margin-bottom: 15px; } nav.navbar { padding: 0; margin: 0; } .top-student-menu { display: inline-block!important; margin-left: 15px; } /* #35c95b LIVED HERE -- a THIRD green, and the one the earlier sweep walked past because it was hunting #00bf63, #00d16d and rgb(0,191,99). Three greens for one button across one stylesheet. It is gone rather than corrected: the full rule further down this file now owns this button in both its states, and a second declaration that happens to lose on source order is a trap for whoever next moves a block. */ .student-menu-flyout { margin-top: 0; } body.courses .student-menu-flyout { margin-top: -15px; } body.public .student-menu-flyout .nav-label { display: block!important; } .student-menu-flyout li.standard-menu-item:hover { border-left: 5px solid #2f77db; background: #2f77db; } .student-menu-flyout li.standard-menu-item:hover > a { color: #ffff !important; } /* =================================================================== THE PUBLIC CLUSTER, BUILT AS THE SIGNED-IN BAR'S PLATE ------------------------------------------------------------------- The signed-in chrome puts the store picker, the two animated slabs and the icon cluster on one angled teal plate in the top right corner. This is that plate with Log In and Sign Up in the outer two slots, so a visitor and a creator are looking at the same object. THE NUMBERS ARE NOT RE-CHOSEN. They are v2.css's, which are appShellChrome.html's, which were swept rather than picked: --rib-gap 37 is the distance at which the pair -- measured across every mode, pose and blend, 3.9M states -- still clears what sits beside it, and --rib-span 66.9 is the width the pair actually paints on average rather than the 91 it could theoretically reach. Reserving the maximum leaves a hole the eye reads as bad spacing. Re-derive them there, not here, if the artwork ever changes. They are declared ON THE CLUSTER rather than on :root because v2.css does not load on a public page and :root here would put six chrome variables into every landing page a creator builds. =================================================================== */ .top-button-menu { --pub-bar-h: 50px; --pub-pad: 22px; --pub-cut: 14px; /* 50 x tan(16deg), so the cut stays parallel to the slabs -- change one, change both */ --rib-gap: 37px; --rib-span: 66.9; --rib-reach: 0; position: relative; display: flex; align-items: center; gap: var(--rib-gap); height: var(--pub-bar-h); /* nav.navbar is a fixed 65px flex row that does NOT centre its children -- they stretch from the top. The old margin-top:16px was doing this by hand for two 30px buttons; a 50px plate needs the real thing, or it sits flush to the top with 15px of bar under it. */ align-self: center; margin-left: auto; margin-right: 0; margin-top: 0; padding: 0 var(--pub-pad) 0 calc(var(--pub-pad) + var(--pub-cut) / 2); } /* The old rule. A flex `gap` owns the spacing now, and a margin-right on the last child would push Sign Up off the plate's padding. */ .top-button-menu a { margin-right: 0; } /* Rounded on the leading edge only -- the trailing edge runs to the screen edge, so rounding it would be a corner nobody can see doing the opposite of what the shape says. Lifted from .sh-plate. */ .pub-plate { position: absolute; inset: 0; z-index: 1; border-radius: 5px 0 0 5px; clip-path: polygon(var(--pub-cut) 0, 100% 0, 100% 100%, 0 100%); background: linear-gradient(97deg, #0f3d4a 0%, #0c3340 46%, #0a2733 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 10px 28px rgba(0,0,0,.45); } /* The slot is a real flex item with no height, so the gaps either side of the slabs are measurable. The slabs themselves are 222x225 turned 16deg and hang well outside it -- that is the point, they bleed below the bar -- so nothing here may clip. */ .top-button-menu .sh-ribwrap { position: relative; flex: none; height: 0; z-index: 2; pointer-events: none; width: calc((var(--rib-span) + 2 * var(--rib-reach)) * 1px); } /* 164deg is 180 minus the 16 the element is turned by, so the fade arrives on the page pointing straight down and both slabs end on the same line. Turning it any other way staggers them by about 14px and reads as one slab hanging below the other. */ .top-button-menu .sh-rib { position: absolute; top: 0; left: 50%; margin-left: -111px; width: 222px; height: 225px; transform: translateY(-50%) rotate(16deg); transform-origin: 50% 50%; -webkit-mask-image: linear-gradient(164deg, #000 0, #000 50%, rgba(0,0,0,.3) 66.9%, transparent 74.5%); mask-image: linear-gradient(164deg, #000 0, #000 50%, rgba(0,0,0,.3) 66.9%, transparent 74.5%); } .top-button-menu .sh-rib svg { position: absolute; inset: 0; width: 100%; height: 100%; } /* Everything anyone actually presses sits above the slabs. */ .top-button-menu .btn-public-login, .top-button-menu .btn-public-signup { position: relative; z-index: 4; flex: none; } /* Too narrow for the cluster to carry everything. The ribbons go first because they are the decoration -- and 1060 is not a number picked here, it is the one v2.css drops .sh-ribwrap at, for that same reason. The two bars should not disagree about when the artwork stops fitting. The engine keeps drawing into the hidden slot below this width, which is what the signed-in bar does too. Matching it is deliberate: a second, cleverer behaviour out here is a second thing to keep in step. If it is ever worth stopping, stop it in both. */ @media (max-width: 1060px) { .top-button-menu .sh-ribwrap { display: none; } .top-button-menu { gap: 14px; } } /* =================================================================== THE PHONE BAR IS THE SAME OBJECT SIGNED IN OR OUT ------------------------------------------------------------------- 780 is the app's breakpoint, not a new one: it is where the signed-in plate stops being a plate and becomes a full-width bar with a burger on the left, the mark in the middle and one control on the right. Seen side by side on a phone, the signed-out bar was the odd one out -- no burger, no background, and two pills where the other had one icon. Three differences for a visitor who is about to become one of the other two. So it is the same bar. The plate goes, the teal comes back, the burger returns, and Sign Up steps out of the bar into the flyout, which has carried it all along -- Home, Sign Up, Log In, Contact Us. Log In stays as the single icon on the right, where the signed-in bar puts the way out. THE BURGER NEEDS THE !important AND THE LONGER SELECTOR. Signed out it carries .bar-menu-hidden, which is itself `display:none !important` -- it has to be, because three separate rules in this file set this element's display that way. Undoing it takes the same weight plus one more class. =================================================================== */ @media (max-width: 780px) { .row-public nav.navbar-static-top { background-color: #003142; } /* .row-public IN FRONT, and it is load-bearing. The rule that hides this signed out is `.top-student-menu.bar-menu-hidden` -- the same two classes -- and it sits ~1200 lines further down this file. A media query adds NO specificity, so an identical selector inside one still loses on source order, and the first version of this changed nothing at all. One more ancestor class settles it without moving either block. */ .row-public .top-student-menu.bar-menu-hidden { display: inline-flex !important; } /* AND IT LOOKS LIKE THE SIGNED-IN ONE HERE. On the wide bar this button is an outlined blue chip that fills when the menu opens -- Martin asked for that, and it is the app's secondary-control language. The signed-in PHONE bar's burger is a plain glyph, so at this width the outline is the one thing still telling you which of the two bars you are on. It goes. The desktop rule is untouched: this is scoped to the phone, which is where "the same bar" was the ask. The open state still reads, because the flyout it opens covers most of the screen. */ .row-public .top-student-menu .student-nav, body.menu-open .row-public .top-student-menu .student-nav { background-color: transparent !important; border: 0 !important; color: #98a1ad !important; width: 38px; height: 38px; padding: 0 !important; border-radius: 9px !important; } body.menu-open .row-public .top-student-menu .student-nav { color: #e9edf2 !important; background-color: rgba(255,255,255,.08) !important; } .top-button-menu { height: auto; padding: 0; gap: 0; } .pub-plate { display: none; } /* In the flyout, not gone: a visitor who wants to sign up is the point of the page, and the flyout is one press away. Two pills in a 375px bar is what crowded the mark. */ .top-button-menu .btn-public-signup { display: none !important; } /* The one control, sized and shaped like the signed-in bar's exit icon rather than like a pill that lost its label. */ .top-button-menu > a.btn-public-login { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; border-radius: 9px !important; color: #2dc26b !important; } .top-button-menu > a.btn-public-login i { margin: 0; font-size: 18px; color: #2dc26b !important; } .top-button-menu > a.btn-public-login span { display: none; } /* The sweep has no outline to run inside once the button is a bare glyph, and there is no hover on a phone to start it -- it could only ever fire as a flash on tap. */ .top-button-menu > a.btn-public-login::before, .top-button-menu > a.btn-public-login::after { display: none; } } /* The storefront's search box and its phone magnifier stood here, with the same hidden-by-default pair chrome.css carried. Both are gone -- the search reached /offers/, which is the marketplace, and that is being held back for now. See top_bar.tpl for the full note. The width rules the media blocks below kept re-tuning for it (1079, 979, 579, 429) went at the same time, and so did the two rules at 500 and 419 that first showed the magnifier and then hid it again on a narrow bar. */ .footer { position: relative; bottom: auto; left: auto; right: auto; } .container-footer {} .container-footer .row { border-top: 1px solid #fff!important; } .hero-container { margin-top: -15px; margin-bottom: 30px; background-size: cover; background-position: center; } .hero-container .hero-col { padding-top: 100px; padding-bottom: 100px; } .hero-h1 { margin: 0; color: #fff; text-align: center; font-size: 48px; line-height: 1.45; } @media (max-width: 1179px) { .btn-public-signup, .btn-public-login { padding: 3px 6px!important; } } @media (max-width: 879px) { .hero-container .hero-col { padding-top: 90px; padding-bottom: 90px; } .hero-h1 { font-size: 40px; } } @media (max-width: 679px) { .hero-container .hero-col { padding-top: 70px; padding-bottom: 70px; } .hero-h1 { font-size: 36px; } } @media (max-width: 579px) { .btn-public-signup, .btn-public-login { padding: 2px 4px!important; font-size: 12px!important; } .top-student-menu { margin-top: 8px; margin-right: 12px; padding: 3px 6px!important; } .hero-container .hero-col { padding-top: 60px; padding-bottom: 60px; } .hero-h1 { font-size: 32px; } } @media (max-width: 429px) { nav.navbar { position: relative; right: auto; background: none; border-bottom: none; } .top-student-menu { margin-right: 5px; margin-left: 5px; } .hero-container .hero-col { padding-top: 40px; padding-bottom: 40px; } .hero-h1 { font-size: 28px; line-height: 1.35; } } .btn-public-login i, .btn-public-signup i { display: none; } .btn-public-login i { font-size: 16px; color: #18bf18; } @media (max-width: 500px) { .img-logo-a { display: inline-block!important; margin-top: 8px!important; margin-left: -4px!important; } .top-button-menu { margin-top: 18px; } .btn-public-login, .btn-public-signup { background: none!important; border: none!important; } .btn-public-login i, .btn-public-signup i { display: inline-block; } .btn-public-login span, .btn-public-signup span { display: none; } } @media (max-width: 379px) { nav.navbar { background: #000; } .img-logo-a { width: 200px; margin-top: 6px!important; margin-left: -15px!important; } } .signup-form-modal { text-align: center; } /* THE AUTH PANEL. Was pure #000 with a 3px radius and a z-index of 2, floating over the page with nothing behind it to say the page had stopped -- so it read as a box that had landed on the hero rather than as a thing asking for your attention. #242424 and a hairline is the panel surface the rest of the product uses; 14px is the radius the marketplace cards use. z-index is raised because 2 is below almost anything, and a login form that something else can cover is a login form that sometimes cannot be filled in. NO SCRIM HERE. There is already a .public-forms-overlay in footer_public.tpl and public.js already closes the panel when it is clicked. A ::before on this element was tried and was a bad idea: it painted over that overlay and swallowed the clicks, leaving a modal with no button, no Escape and no click-out -- unclosable. See the note on .public-forms-overlay further down. */ #public-login-wrapper, #public-signup-wrapper, #public-signup-login-wrapper { display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 400px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow-y: auto; padding: 26px 24px 24px; background: #242424; border: 1px solid rgba(255,255,255,.09); color: #e9edf2; text-align: center; border-radius: 14px; box-shadow: 0 24px 60px rgba(0,0,0,.6); z-index: 1200; } /* The combined one is taller because it carries both forms. It no longer forces height:80% and overflow:scroll -- which drew a scrollbar on a panel that did not need one -- because max-height and overflow-y:auto above already do it, and only when there is something to scroll. */ #public-signup-login-wrapper { width: 420px; } #public-login-wrapper h3, #public-signup-wrapper h3, #public-signup-login-wrapper h3 { width: 100%; color: #ffffff; font-size: 18px; text-align: center; } #public-login-wrapper p, #public-signup-wrapper p, #public-signup-login-wrapper p { color: #f1f1f1; } #public-login-wrapper .actions .btn, #public-signup-wrapper .actions .btn, #public-signup-login-wrapper .actions .btn { margin-right: 0!important; } #public-login-wrapper .btn-success { margin-bottom: 10px; padding: 6px 36px; font-weight: 700; font-size: 16px; border-radius: 4px!important; } #submit-login-modal, #submit-login-modal-2 { background: #18bf18!important; border: 1px solid #18bf18!important; border-radius: 15px!important; } /* .btn-public-signup IS NO LONGER IN THESE TWO SELECTORS, and taking it out is the whole reason the skin above works. This block is later in the file, so its `background:#000!important` beat the rule that owns the button 500 lines up -- the same trap the note in the phone block at the foot of this file describes, still set, still catching things. One button, one place, and that place is the block above. .btn-public-signup-2 is left because removing it is not this change, but it appears in no template, no module and no script -- it looks like dead CSS and is worth deleting once someone has checked. */ .btn-public-signup-2 { background: #000!important; border: 2px solid #fff!important; border-radius: 15px!important; } #submit-login-modal:hover, #submit-login-modal-2:hover, .btn-public-signup-2:hover { opacity: 0.85; } /* THE SCRIM WAS ALREADY HERE, and public.js already closes the panel when you click it. Raising the panel to z-index 1200 without raising this left the scrim underneath the page it was meant to cover -- and briefly I "fixed" that by adding a ::before to the panel, which painted over this element and swallowed the clicks that dismiss it. The modal became impossible to close by any means: no button, no Escape, no click-out. Styling the element that exists is the fix. It keeps its handler, and 1199 puts it under the panel and over everything else. */ /* A WAY OUT OF EVERY WINDOW (14 Oct 2026, Martin: "a way for people to also just close down the modal even if they dont want to create an account"). The dimmed area closed them, but nothing said so, and over Try Merlin's full-screen editor it read as part of the window. A close button in the corner of each, and Escape (public.js). */ #public-login-wrapper .pfm-close, #public-signup-wrapper .pfm-close, #public-signup-login-wrapper .pfm-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: #98a1ad; font-size: 24px; line-height: 34px; text-align: center; cursor: pointer; z-index: 1; } #public-login-wrapper .pfm-close:hover, #public-signup-wrapper .pfm-close:hover, #public-signup-login-wrapper .pfm-close:hover { background: rgba(255,255,255,.08); color: #e9edf2; } #public-login-wrapper .pfm-close:focus-visible, #public-signup-wrapper .pfm-close:focus-visible, #public-signup-login-wrapper .pfm-close:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .public-forms-overlay { display: none; width: 100%; height: 100%; background: rgba(8,10,12,.66); backdrop-filter: blur(3px); position: fixed; top: 0; left: 0; margin: 0; z-index: 1199; cursor: pointer; } #js-msg-login-modal, #js-msg-login-modal-2, #js-msg-signup-modal, #js-msg-signup-modal-2 { display: none; } @media (max-width: 472px) { html { overflow-x: hidden; } /* CENTRED ONCE (16 Oct 2026). This said left: calc(50% - 172px), centring by hand, and the rule above now centres with translate(-50%) as well: on a phone the window was moved left twice and sat half off the screen. It keeps left:50% from above and only takes the screen's width, padding included, so 16px shows either side. */ #public-login-wrapper, #public-signup-wrapper, #public-signup-login-wrapper { box-sizing: border-box; width: calc(100vw - 32px); } } #public-welcome-modal { display: none; position: fixed; top: calc(50% - 215px); left: calc(50% - 200px); width: 400px; height: 430px; padding: 15px; background: #000; color: #f1f1f1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.33); -moz-box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.33); box-shadow: 0px 3px 5px 1px rgba(0,0,0,0.33); z-index: 2; } #public-welcome-modal h3 { text-align: center; margin-bottom: 30px; } #public-welcome-modal ol li { padding-bottom: 10px; } #public-welcome-modal-buttons { text-align: center; } @media (max-width: 472px) { #public-welcome-modal { top: calc(50% - 240px); left: calc(50% - 150px); width: 300px; height: 480px; } } .modal-form-toggle { background: #000; border: 1px solid #fff; border-radius: 5px; stroke: none; } .modal-form-toggle.modal-form-toggle-active, .modal-form-toggle:hover { background: #18bf18; border: 1px solid #18bf18; } #signup-form-modal-2 { display: none; } /* WHAT A CUSTOMER ACCOUNT LEAVES OUT (16 Oct 2026, Martin), shown only while CUSTOMER is picked (public.js). A div, not a p: p here is line-height 2. */ .signup-cust-note { margin: -4px 0 14px; padding: 9px 12px; border-radius: 10px; background: rgba(255,255,255,.05); color: #b8c0ca; font-size: 13px; line-height: 1.45; text-align: left; } .toggle-btn-wrapper { display: flex; align-items: stretch; gap: 10px; } /* The gap used to be an empty
between the two buttons, padded 0 10px. It is a flex container, so `gap` does the same job without a third child -- and the spacer only existed in one of the two panels, so the combined one had the buttons touching. */ /* CUSTOMER / CREATOR, as a segmented control rather than two buttons. 19px was larger than the heading above it, and two heavily outlined pills read as two calls to action when only one of them is a choice you are making about yourself. #17addc is gone. It was the only colour on this panel in no palette this company has -- brandGuide lists exactly this kind of near-miss under open conflicts -- and the toggle disagreed with the submit button it sets the colour of. Both now take --theme-colour-main, so a theme change moves them together instead of leaving one behind. HOVER IS NOT SELECTION. The old rule painted :hover the same as .active, so pointing at CREATOR made it look chosen while CUSTOMER still was. EACH SEGMENT SAYS WHAT IT MEANS. The heading above used to read "Are you a CUSTOMER or a CREATOR?", which named the two buttons directly beneath it and so said everything twice -- and it spent the panel's only heading on the question, leaving the signup panel with no title at all while the login panel had one. The heading is now the title. The choice explains itself instead, because a segmented control with one segment already filled reads as a state rather than a question: the risk is not that nobody knows what the words mean, it is that nobody notices CUSTOMER was a choice they could change, fills the form and gets the wrong kind of account. A second line under each label makes it a question again without a sentence above it. "I'm buying" / "I'm selling" is vocabulary.md's own definition of the two words, so the hint teaches the word rather than replacing it -- Creator means nothing to someone who has never been here before. */ .modal-form-account-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; flex-grow: 1; width: 40%; margin-bottom: 15px; padding: 9px 0; background: transparent!important; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; stroke: none; color: #98a1ad!important; font-size: 14px; font-weight: 700; letter-spacing: .04em; transition: background-color .14s, color .14s, border-color .14s; } .modal-form-account-toggle:hover { color: #e9edf2!important; border-color: rgba(255,255,255,.3); } .modal-form-account-toggle .toggle-label { font-size: 14px; font-weight: 700; letter-spacing: .04em; line-height: 1.1; } /* The hint is deliberately quiet and deliberately not italic: it is a definition, not an aside. It stays legible on the filled segment, where the background is --theme-colour-main or #2dc26b rather than the panel. */ .modal-form-account-toggle .toggle-hint { font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.1; opacity: .72; text-transform: none; } .modal-form-account-toggle.modal-form-account-toggle-active { background: var(--theme-colour-main)!important; border: 1px solid var(--theme-colour-main)!important; color: #fff!important; } /* Creator keeps its own colour, which is the one thing the old design got right: the two account types are a real fork and reading as different is the point. Hover dropped here too -- see the note above. */ #modal-form-account-toggle-creator.modal-form-account-toggle-active, #modal-form-account-toggle-creator-2.modal-form-account-toggle-active { background: #2dc26b!important; border: 1px solid #2dc26b!important; color: #fff!important; } /* =================================================================== THE AUTH PANEL'S FIELDS AND BUTTONS ------------------------------------------------------------------- The inputs were Bootstrap's: WHITE, with grey borders, on a black panel. That single thing did more to make this look unfinished than any colour on it -- five white slabs stacked down the middle of a dark page. Scoped to the three wrappers rather than to .app-input, which is used on public forms all over the site and is not ours to restyle from here. =================================================================== */ #public-login-wrapper .form-control, #public-signup-wrapper .form-control, #public-signup-login-wrapper .form-control { height: 42px; padding: 10px 13px; background: #1c1c1c; border: 1px solid rgba(255,255,255,.12); border-radius: 10px; color: #e9edf2; font-size: 14.5px; box-shadow: none; transition: border-color .14s, box-shadow .14s; /* As wide as the button under it (2 Oct 2026). Bootstrap's .form-control width is not loaded on public pages, so these were a browser's default 177px, sitting centred above a full-width button. */ display: block; width: 100%; box-sizing: border-box; } #public-login-wrapper .form-control::placeholder, #public-signup-wrapper .form-control::placeholder, #public-signup-login-wrapper .form-control::placeholder { color: #6f7885; } #public-login-wrapper .form-control:focus, #public-signup-wrapper .form-control:focus, #public-signup-login-wrapper .form-control:focus { outline: none; border-color: var(--theme-colour-main); box-shadow: 0 0 0 3px rgba(59,130,246,.22); } /* The form groups were separated by
in the markup, which cannot be tuned. A margin does the same job and can be. */ #public-login-wrapper .form-group, #public-signup-wrapper .form-group, #public-signup-login-wrapper .form-group { margin-bottom: 10px; } #public-login-wrapper br, #public-signup-wrapper br, #public-signup-login-wrapper br { display: none; } /* "Or" was a bare word floating between the Google button and the fields. A rule either side makes it a divider, which is what it was trying to be. */ #public-login-wrapper .google_login_or, #public-signup-wrapper .google_login_or, #public-signup-login-wrapper .google_login_or { display: flex; align-items: center; gap: 12px; margin: 16px 0; color: #6f7885; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; } #public-login-wrapper .google_login_or::before, #public-signup-wrapper .google_login_or::before, #public-signup-login-wrapper .google_login_or::after, #public-login-wrapper .google_login_or::after, #public-signup-wrapper .google_login_or::after, #public-signup-login-wrapper .google_login_or::before { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.1); } /* The heading, which was 18px and the same weight as everything else. */ #public-login-wrapper h3, #public-signup-wrapper h3, #public-signup-login-wrapper h3 { font-size: 19px!important; font-weight: 900; letter-spacing: -.01em; margin: 0 0 16px; } /* THE LOGO'S GREEN, NOT BOOTSTRAP'S. The Login button carries .btn-success, which is #18bf18 -- a flat, slightly acid green that belongs to Bootstrap and to nothing here. The lockup SVG uses exactly three colours, #2dc26b, #3b82f6 and #2563eb, and the first of those is the green this product means. Sampled from themes/default/images/brand/lhq-lockup.svg rather than remembered, because two greens four points apart is how this file got into trouble the first time. */ #public-login-wrapper .btn-success, #public-signup-wrapper .btn-success, #public-signup-login-wrapper .btn-success { background-color: #2dc26b!important; border-color: #2dc26b!important; color: #fff!important; } #public-login-wrapper .btn-success:hover, #public-login-wrapper .btn-success:focus, #public-signup-wrapper .btn-success:hover, #public-signup-wrapper .btn-success:focus, #public-signup-login-wrapper .btn-success:hover, #public-signup-login-wrapper .btn-success:focus { background-color: #3ad47a!important; border-color: #3ad47a!important; color: #fff!important; } /* The submit. Full width, because it is the only thing on the panel you are meant to press, and it was a 6px-padded Bootstrap default sitting in the middle looking like a cancel. */ #public-login-wrapper .btn-public-form, #public-signup-wrapper .btn-public-form, #public-signup-login-wrapper .btn-public-form, #public-login-wrapper .actions .btn, #public-signup-login-wrapper .actions .btn { display: block; width: 100%; padding: 12px 18px!important; border-radius: 10px!important; font-size: 15px; font-weight: 700; } /* THE GREY SLAB UNDER FORGOT PASSWORD was a spinner that never spins. .loader-login is 62px of reserved height for a loading indicator that public.js does not use -- it swaps the submit button's own icon for fa-spinner instead and never touches this div. Styled only in login.css under body.login-page, so on this panel it is unstyled, empty and tall. Hidden rather than deleted: the markup is in a shared template and other forms may still reach for it. */ #public-login-wrapper .loader, #public-signup-wrapper .loader, #public-signup-login-wrapper .loader { display: none!important; } /* And the message row under it held another 32px, from two causes. The wrapper had a line box -- whitespace at the panel's font-size -- which zeroing the font-size collapses; the span sets its own back when it appears. The rest was `min-height: 22px` on the global `.form-msg` (dashboard.css), which reserves a line on every form in the app so that an error appearing does not shift the fields under it. That reservation is right for a form on a page and wrong for this panel. The panel is `position: fixed` and centred by transform, so nothing below it can be pushed anywhere -- the only cost of reserving is that everyone who signs in without error pays 22px of empty panel for a message they never see. Collapsed here, scoped to the three wrappers, so the global keeps doing its job everywhere else. The colour goes with it: the global sets #cc0000, picked against a white form and nearly unreadable on #242424. Do not give the span a `display` here. It is hidden by `#js-msg-login-modal { display: none }` further up and revealed by public.js with .show(), which writes an inline display when it fires. A `display: block` in the rule below outranks that ID rule -- one ID plus a class beats one ID alone -- and the effect is that the panel opens with "Both username and password are required!" already showing in red, before the visitor has typed anything. That shipped for a few minutes on 22 September. Size and spacing here, nothing that governs visibility. */ #public-login-wrapper .app-front-form-msg, #public-signup-wrapper .app-front-form-msg, #public-signup-login-wrapper .app-front-form-msg, #public-login-wrapper .form-msg, #public-signup-login-wrapper .form-msg { font-size: 0; margin: 0; min-height: 0; color: #ed5565; } #public-login-wrapper .app-front-form-msg span, #public-signup-wrapper .app-front-form-msg span, #public-signup-login-wrapper .app-front-form-msg span, #public-login-wrapper .form-msg span, #public-signup-login-wrapper .form-msg span { font-size: 13px; margin-top: 10px; } /* The forgot link sat tight under the button with nothing after it. */ #public-login-wrapper .forgot-link, #public-signup-login-wrapper .forgot-link { margin-top: 2px; font-size: 13px; } /* The T&C line is small print and was competing with the fields. */ #public-signup-wrapper .form-group p, #public-signup-login-wrapper .form-group p { font-size: 12px; color: #6f7885; margin: 6px 0 12px; } .signup-form-modal .btn-public-form { border-color: var(--theme-colour-main)!important; } .signup-form-modal .btn-public-form:hover { border-color: var(--theme-colour-link-hover)!important; } .signup-form-modal .btn-public-form.creator { background-color: #2dc26b!important; border-color: #2dc26b!important; } .signup-form-modal .btn-public-form.creator:hover { background-color: var(--theme-colour-main)!important; border-color: var(--theme-colour-main)!important; } .why-we-care-overlay { display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); z-index: 9997; } .why-we-care-modal { display: none; opacity: 0; position: fixed; top: 0; left: 0; width: 100%; text-align: center; height: 100%; max-height: 100%; overflow-x: auto; z-index: 9998; } .why-we-care-overlay-close { display: none; opacity: 0; position: fixed; top: 10px; right: 15px; padding: 0 13px; font-size: 32px; font-weight: bold; color: red; background: #000; border-radius: 9px; cursor: pointer; z-index: 9999; } #ai-helper-widget-start-business { min-height:640px; height:auto !important; } /* Google Sign In Button */ /* SIGN IN WITH LINKEDIN, DISCORD, TWITCH (15 Oct 2026): under Google's button, in its shape and colours, so they read as one set. helpers\SocialSignIn. */ .lhq-soc { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 40px; margin: 8px 0 0; padding: 0 12px; box-sizing: border-box; border: 1px solid #8e918f; border-radius: 4px; background: #131314; color: #e3e3e3; font-family: 'Roboto', arial, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: .25px; text-decoration: none; } .lhq-soc:hover, .lhq-soc:focus { background: #1f2021; color: #fff; text-decoration: none; } .lhq-soc:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; } .lhq-soc .lhq-soc-i { display: inline-flex; width: 20px; height: 20px; } .lhq-soc .lhq-soc-i svg { width: 20px; height: 20px; } .gsi-material-button { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -webkit-appearance: none; background-color: #131314; background-image: none; border: 1px solid #747775; -webkit-border-radius: 4px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #e3e3e3; cursor: pointer; font-family: 'Roboto', arial, sans-serif; font-size: 14px; height: 40px; letter-spacing: 0.25px; outline: none; overflow: hidden; padding: 0 12px; position: relative; text-align: center; -webkit-transition: background-color .218s, border-color .218s, box-shadow .218s; transition: background-color .218s, border-color .218s, box-shadow .218s; vertical-align: middle; white-space: nowrap; width: auto; max-width: 400px; min-width: min-content; border-color: #8e918f; width: 100%; margin: 15px 0; } .gsi-material-button .gsi-material-button-icon { height: 20px; margin-right: 10px; min-width: 20px; width: 20px; } .gsi-material-button .gsi-material-button-content-wrapper { -webkit-align-items: center; align-items: center; display: flex; -webkit-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; flex-wrap: nowrap; height: 100%; justify-content: center; position: relative; width: 100%; } .gsi-material-button .gsi-material-button-contents { -webkit-flex-grow: 0; flex-grow: 0; font-family: 'Roboto', arial, sans-serif; font-weight: 500; overflow: hidden; text-overflow: ellipsis; vertical-align: top; } .gsi-material-button .gsi-material-button-state { -webkit-transition: opacity .218s; transition: opacity .218s; bottom: 0; left: 0; opacity: 0; position: absolute; right: 0; top: 0; } .gsi-material-button:disabled { cursor: default; background-color: #13131461; border-color: #8e918f1f; } .gsi-material-button:disabled .gsi-material-button-state { background-color: #e3e3e31f; } .gsi-material-button:disabled .gsi-material-button-contents { opacity: 38%; } .gsi-material-button:disabled .gsi-material-button-icon { opacity: 38%; } .gsi-material-button:not(:disabled):active .gsi-material-button-state, .gsi-material-button:not(:disabled):focus .gsi-material-button-state { background-color: white; opacity: 12%; } .gsi-material-button:not(:disabled):hover { -webkit-box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .30), 0 1px 3px 1px rgba(60, 64, 67, .15); } .gsi-material-button:not(:disabled):hover .gsi-material-button-state { background-color: white; opacity: 8%; } .google_login_or { margin-bottom: 15px; display: block; font-size: 20px; text-transform: uppercase; text-align: center; } .google-login-creator { display: none; } @media screen and (max-width: 500px) { #ai-helper-widget-start-business { min-height:430px; } } /* --------------------------------------------------------------------------- THE STOREFRONT MENU --------------------------------------------------------------------------- This panel is the storefront's only navigation, and until now it had no rules that placed it. That was a regression with a traceable cause: the flyout used to be styled in dashboard.css, which reached a public page whenever the Pages module drew one -- the front page included. When the app's own copy of the flyout was removed from top_bar.tpl, its eighteen rules went with it, and the one that mattered went too: .student-menu-flyout { position: fixed; left: -400px; } That `left` was the only thing hiding it. public.css had kept the cosmetics (a hover colour, a margin) but nothing structural, so with the offset gone the panel rendered as what it actually is in the markup -- a static block of links sitting between the bar and the hero, pushing the page down by ~280px. On a phone it showed list bullets and default-blue links. It is rebuilt here rather than restored, because the old version was a black slab on a teal bar, and because two of its habits are worth not repeating. ONE PANEL AT EVERY WIDTH, not an inline bar on desktop. {$menu} is filtered by user_group in PHP, so this same list is four items to a visitor (Home, Sign Up, Log In, Contact Us) and seven to a signed-in learner (My Offers, My Subscriptions, My Product Purchases, FAQ's, Profile, Logout, Become a Creator). Seven inline items do not fit beside a centred logo and the two right-hand buttons, and a nav that fits when logged out and overflows when logged in is worse than one that never tries. A panel is the same shape either way. TRANSFORM, NOT `left`. The old rule animated `left` from -400px, which lays out and paints every frame. This translates instead, and the panel's resting position is off-canvas by its own width rather than by a guessed 400. VIEWPORT-ANCHORED. nav.navbar is `position: fixed` above 429px and `position: relative` below it (see the max-width: 429px block above). A panel measured from the bar would therefore need two different tops. It is measured from the viewport instead and carries its own header, so the bar's own positioning stops mattering. */ .student-menu-flyout { position: fixed; /* UNDER THE BAR, NOT OVER IT. This was top:0 with a note explaining that the panel carried its own header precisely so it could cover the bar, rather than depend on the height of "a bar whose height and positioning both change with width". The constraint was real; the conclusion was the expensive one. Covering the bar hides the hamburger, and the hamburger changing state is the only thing on screen that says the menu is open -- which is exactly the feedback a logged-in person already gets from the app's rail, opening at top:60px underneath its own bar. So the height is measured instead of assumed. measurePublicBar() in dashboard.js sets --public-bar-h from the bar's own bounding box, on load and on resize. The fallback is this install's current 65px, so a stylesheet arriving before the script is wrong by a pixel or two rather than by the whole bar. */ top: var(--public-bar-h, 65px); left: 0; bottom: 0; /* Above nav.navbar, which is z-index 99999 -- still, because the panel must clear everything else on the page. It simply starts lower. */ z-index: 100001; width: 300px; max-width: 86vw; margin: 0; padding: 0; background: #002230; border-right: 1px solid rgba(255,255,255,.08); box-shadow: 2px 0 26px rgba(0,0,0,.45); transform: translateX(-102%); transition: transform .28s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; overflow: hidden; } .student-menu-flyout.flyout-open { transform: translateX(0); } /* body.courses had its own -15px nudge when this was in the flow. It is not in the flow any more, and a margin on a fixed panel would just push it off line. */ body.courses .student-menu-flyout, .student-menu-flyout { margin-top: 0; } /* The panel's own header. It exists so the panel can be anchored to the viewport rather than to a bar whose height and positioning both change with width. */ /* THE PANEL'S OWN HEADER IS GONE, and it goes with the reason it existed. It carried a "Menu" title and a close button because the panel covered the bar and there was nothing else to close it with. The panel now opens beneath the bar, so the hamburger is visible, lit, and toggles -- a second bar saying "Menu" directly under the real one is a row of chrome repeating what is immediately above it. Closing still has three ways out: the hamburger, the backdrop, and Escape, all bound in dashboard.js and none of them dependent on this element. */ .student-menu-head { display: none; } .student-menu-head-unused { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 61px; padding: 0 10px 0 22px; background: #003142; border-bottom: 1px solid rgba(255,255,255,.09); } .student-menu-title { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); } .student-menu-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; border-radius: 8px; color: rgba(255,255,255,.65); font-size: 17px; cursor: pointer; transition: background .15s, color .15s; } .student-menu-close:hover, .student-menu-close:focus { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; } /* The backdrop is a sibling that follows the panel, so it can be opened by the same class the existing handler already toggles -- no second class to keep in step. It sits under the panel on z-index, not on DOM order. */ .student-menu-backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 100000; background: rgba(0,14,20,.55); opacity: 0; pointer-events: none; transition: opacity .28s ease; } .student-menu-flyout.flyout-open ~ .student-menu-backdrop { opacity: 1; pointer-events: auto; } /* The list. `padding-left: 0` and the list-style reset are not tidying: without them a phone showed real bullets, because nothing above ever restyled this ul. */ .student-menu-flyout .student-menu-list { flex: 1 1 auto; margin: 0; padding: 10px 0 24px; list-style: none; overflow-y: auto; -webkit-overflow-scrolling: touch; } .student-menu-flyout li.standard-menu-item, .student-menu-flyout .student-menu-list > li { display: block; margin: 0; padding: 0; background: none; border: 0; border-left: 3px solid transparent; transition: background .15s, border-color .15s; } /* Two of these links carry .btn-public-signup and .btn-public-login -- the same classes as the pill buttons in the bar -- so they were inheriting `background:#000!important; border:2px solid #fff!important; border-radius:15px` from the button rules further up. On an inline element a pill border draws only its two end arcs, which is where the stray "(" and ")" on either side of Sign Up came from. They are links here, not buttons, so the button skin is taken off. `!important` is required to reach the source declarations, not preferred. */ .student-menu-flyout .student-menu-list a, .student-menu-flyout .student-menu-list a.btn-public-signup, .student-menu-flyout .student-menu-list a.btn-public-login { display: flex; align-items: center; min-height: 48px; padding: 12px 22px !important; background: none !important; border: 0 !important; border-radius: 0 !important; color: rgba(255,255,255,.86) !important; font-size: 15px !important; line-height: 1.3; text-decoration: none; transition: color .15s; } .student-menu-flyout .student-menu-list a i { width: 20px; margin-right: 12px; font-size: 15px !important; text-align: center; color: rgba(255,255,255,.45); transition: color .15s; } .student-menu-flyout .student-menu-list .nav-label { display: block !important; } /* Hover and focus. The rule this replaces painted the whole row #2f77db -- a blue that appears nowhere else on the storefront, whose bar and footer are #003142 and whose calls to action are #2dc26b. The accent is the green. */ .student-menu-flyout li.standard-menu-item:hover, .student-menu-flyout li.standard-menu-item:focus-within, .student-menu-flyout .student-menu-list > li:hover { background: rgba(45,194,107,.12); border-left-color: #2dc26b; } .student-menu-flyout li.standard-menu-item:hover > a, .student-menu-flyout li.standard-menu-item:focus-within > a, .student-menu-flyout .student-menu-list > li:hover > a { color: #fff !important; } .student-menu-flyout li.standard-menu-item:hover > a i, .student-menu-flyout .student-menu-list > li:hover > a i { color: #2dc26b; } /* "Become a Creator" -- the one row that is a call to action rather than a destination, and the reason a learner opens this menu at all. It was a flat green block before; it reads as a button now without leaving the list. */ .student-menu-flyout li.upgrade { margin: 14px 16px 4px; border-left: 0; border-radius: 10px; background: #2dc26b; } .student-menu-flyout li.upgrade > a { justify-content: center; min-height: 44px; padding: 11px 16px !important; color: #fff !important; font-weight: 700; } .student-menu-flyout li.upgrade > a i { color: rgba(255,255,255,.85); } .student-menu-flyout li.upgrade:hover { background: #3ad47a; border-left: 0; } .student-menu-flyout li.upgrade:hover > a, .student-menu-flyout li.upgrade:hover > a i { color: #fff !important; } /* Second-level rows. These were `display: none` with nothing on the storefront to open them, so any child item was unreachable. metisMenu is initialised on this list now (see dashboard.js); these are its open and closed states. */ .student-menu-flyout .nav-second-level { margin: 0; padding: 0; list-style: none; background: rgba(0,0,0,.22); } .student-menu-flyout .nav-second-level li a { min-height: 42px; padding: 10px 22px 10px 54px !important; font-size: 14px; color: rgba(255,255,255,.7) !important; } .student-menu-flyout .nav-second-level li a:hover { color: #fff !important; background: rgba(255,255,255,.05) !important; } .student-menu-flyout .student-menu-list a .arrow { margin-left: auto; font-size: 12px; color: rgba(255,255,255,.35); } /* The button that opens it. Square, 40px, matching the close inside the panel -- and 40px because below 579px this was 3px 6px of padding around a 14px glyph, which is a tap target of about 26px against a 44px guideline. */ .top-student-menu { display: inline-block !important; margin: 0 0 0 15px; padding: 0 !important; vertical-align: middle; } /* THE PUBLIC SIDE HAD ITS OWN GREEN, and this file was where it lived: #00bf63 on the menu button, the Sign Up chip and the flyout's hover, against #2dc26b everywhere in the app. Four points apart -- far enough to read as a mistake when the two met, close enough that nobody caught it while they never did. brandGuide.html lists it under open conflicts and rules on it: "The app is already on the right one; the storefront is the outlier." They met on 22 September, when the marketplace got a menu item and a logged-in creator saw the public bar for the first time. Martin: "Why does the top bar look different and have green colors in the hamburger menu." Eight values changed here and nowhere else in the repo -- six hex, one rgba() of the same colour that a hex search misses, and the #00d16d hover, now --green-lit #3ad47a. Four uses of #2dc26b were already in this file, which is what made the split visible inside one stylesheet. */ /* THE SAME TOGGLE THE APP HAS, and deliberately the same rule: OUTLINE WHILE THE MENU IS AWAY, FILLED WHILE IT IS HERE. chrome.css says it in those words for the creator and learner rails; this is the public bar catching up, so a person who signs up does not meet a third behaviour for the same control. BLUE, NOT GREEN. Green on this platform means go and price -- a menu button is neither, and #2dc26b sitting beside the green Sign Up button made two different promises in one bar. #2563eb is the app's toggle colour and is one of the three in the logo. body.menu-open is set by openStudentMenu() in dashboard.js, which already existed, so this needs no script change. */ .top-student-menu .student-nav { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0 !important; min-height: 0; background-color: transparent; border: 1px solid rgba(91,147,255,.55); border-radius: 9px; color: #5b93ff; font-size: 16px; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s; } .top-student-menu .student-nav:hover, .top-student-menu .student-nav:focus { background-color: rgba(37,99,235,.20); border-color: rgba(91,147,255,.85); color: #fff; } /* Menu here: filled. */ body.menu-open .top-student-menu .student-nav { background-color: #2563eb; border-color: #2563eb; color: #fff; } body.menu-open .top-student-menu .student-nav:hover, body.menu-open .top-student-menu .student-nav:focus { background-color: #1d4fd7; border-color: #1d4fd7; color: #fff; } /* No lift on a touch screen: there is no hover there, so the transform would stick to whatever was tapped last. */ @media (hover: hover) { .top-student-menu .student-nav:hover { transform: translateY(-1px); } } /* The page behind the panel should not scroll while it is open. */ body.menu-open { overflow: hidden; } /* The bar's right-hand cluster. Below 500px these collapse to bare icons, but with no gap between them and no tap target around them. */ @media (max-width: 500px) { .top-button-menu { display: flex; align-items: center; gap: 0; margin-top: 0 !important; margin-right: 4px; } .top-button-menu > a { display: inline-flex !important; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 !important; padding: 0 !important; border-radius: 9px !important; } .top-button-menu > a i { margin: 0; font-size: 17px; } } /* nav.navbar is `display: flex` with `align-items: normal`, so a flex item that does not set its own alignment stretches the full 65px and puts its contents at the top. That is why the menu button sat against the bar's top edge while the right-hand icons -- which are inside their own centred flex box -- sat correctly on the line. This centres the button in its own item box instead of changing the bar's alignment, which the desktop search form is positioned against. */ .top-student-menu { display: inline-flex !important; align-items: center; } /* HIDDEN FOR A SIGNED-OUT VISITOR, and it has to be a class rather than the inline `style` the cluster next to it uses, because three separate rules in this file set this element's display with !important and an inline style without !important loses to every one of them. The first attempt was inline and the hamburger simply stayed on screen. Output.class.php decides which viewer gets the class; the reasoning for hiding it at all -- and for keeping it when signed in -- is there. */ .top-student-menu.bar-menu-hidden { display: none !important; } /* The logo is centred on the bar by logo.css: `position: absolute; left: 50%; top: 0; bottom: 0; transform: translateX(-50%); margin: 0`. The margins below were written when it still sat in the flow, and they are !important, so they outlive that: on a phone they were a 6px drop and a 15px shove left of a logo that is otherwise dead centre. Zeroed at the same weight, and later in the file so they win on order rather than on a specificity bump. */ @media (max-width: 500px) { nav.navbar .img-logo-a { margin: 0 !important; } } /* The right-hand icons. Below 500px the buttons drop their labels and the rules above strip their skin -- but .btn-public-signup is restyled again further down the file with `background:#000!important; border:2px solid #fff!important`, which is later and therefore wins, so Sign Up kept a black chip with a white outline while Log In next to it was a bare glyph. Two buttons of equal weight, drawn differently for no reason anyone chose. Given a choice about which one to emphasise: Sign Up is the storefront's whole purpose, so it is the filled one, in the same green as the menu button on the other side of the bar. Log In is quiet next to it. (Search was the third icon here and shared Log In's quiet treatment; it is gone -- see top_bar.tpl.) */ @media (max-width: 500px) { /* THE TWO COLOURS SURVIVE THE BREAKPOINT. This block used to fill Sign Up green and leave Log In a white glyph, which is the opposite emphasis to the desktop bar above, where Log In is the filled green one. The same two controls disagreed about which of them mattered depending on how wide the window was. They now carry the same hues they carry everywhere else: Log In green, Sign Up blue. At this size both are 40px glyphs, so the filled one is Sign Up -- a filled chip is easier to hit and to find than an outline, and the outline treatment does not survive being shrunk to an icon anyway. */ .top-button-menu > a.btn-public-login { background: none !important; border: 0 !important; color: #2dc26b !important; } /* No sweep at this size. The button is a 40px glyph with no outline for it to run inside, and there is no hover on a phone to start it -- it would only ever fire as a flash on tap. */ .top-button-menu > a.btn-public-login::before, .top-button-menu > a.btn-public-login::after { display: none; } .top-button-menu > a.btn-public-signup { background: #2563eb !important; border: 0 !important; color: #fff !important; } .top-button-menu > a.btn-public-login i { color: #2dc26b !important; } .top-button-menu > a.btn-public-signup i { color: #fff !important; } .top-button-menu > a:hover { opacity: .85; } } /* THE 419px BLOCK THAT STOOD HERE IS GONE, and its arithmetic is now the whole bar's rather than one breakpoint's. It dropped the search magnifier below 419 because the centred logo and three icons could not both have the room: the menu button takes 55px on the left, three 40px icons and a 4px margin take 124 on the right, and a centred 150px wordmark therefore needs 2 x 124 + 150 = 398px of bar before something touches. At 320 the magnifier landed on top of "HQ". Search is now gone at every width, so the two icons that remain need 2 x 84 + 150 = 318px -- clear at 320 and 80px in hand at 400, with no rule needed to make it so. Should search ever come back, this is the sum to redo. */ /* Logout is not a destination like the rows above it, and it was sitting directly against Become a Creator -- an account action butted up against the one call to action in the list. A hairline separates the two kinds of row. The class comes from the module name, the same way Courses2 and Users7 do on their own rows. */ .student-menu-flyout li.standard-menu-item.Logout { margin-top: 8px; border-top: 1px solid rgba(255,255,255,.09); } /* Logout hovers red here too. The storefront's menu is a different object from the app's rail -- this one is CSS where the rail's is the spotlight in chrome.js -- but it holds the same row and it should say the same thing about it. #ed5565 is main.css's danger colour; the green above is for the rows you cannot regret. */ .student-menu-flyout li.standard-menu-item.Logout:hover, .student-menu-flyout li.standard-menu-item.Logout:focus-within { background: rgba(237,85,101,.12); border-left-color: #ed5565; } .student-menu-flyout li.standard-menu-item.Logout:hover > a, .student-menu-flyout li.standard-menu-item.Logout:focus-within > a, .student-menu-flyout li.standard-menu-item.Logout:hover > a i { color: #ed5565 !important; } /* =================================================================== THE CONTACT FORM'S FIELDS ------------------------------------------------------------------- Five white boxes stacked down a #1d1d1d page, with dark grey text in them -- Bootstrap's .form-control defaults, never restyled, on a page that went dark around them. The same thing the auth modal had this morning and the same answer: the panel colour, a hairline border and the text colour the rest of the product uses. SCOPED TO .contact-form, NOT TO .app-input. That class is on public forms all over the site, including inside landing pages -- which a creator designs, and which may well be light. Dark fields injected into somebody's pale landing page would be a worse bug than the one being fixed. Anywhere else with this problem wants the same treatment and its own look first. THE !important IS FOR A STALE INLINE COLOUR. The first field carries `style="border-color: rgb(204, 0, 0)"` in the markup the server sends -- page content, saved that way in the builder, not something the code does -- and an inline style cannot be answered any other way. The validator no longer writes inline colours (see forms_public.js), so nothing else is being fought here. =================================================================== */ .contact-form .form-control, .contact-form .app-input { background-color: #1c1c1c !important; border: 1px solid rgba(255,255,255,.12) !important; border-radius: 10px !important; color: #e9edf2 !important; height: auto; padding: 11px 13px; box-shadow: none; transition: border-color .16s ease, box-shadow .16s ease; } .contact-form .form-control::placeholder, .contact-form .app-input::placeholder { color: #6f7885; opacity: 1; } .contact-form .form-control:focus, .contact-form .app-input:focus { border-color: #2dc26b !important; outline: none; box-shadow: 0 0 0 3px rgba(45,194,107,.18); } /* The flag the validator raises now. --danger, not the #cc0000 it used to write inline, which is unreadable on a dark field. */ .contact-form .form-control.field-invalid, .contact-form .app-input.field-invalid { border-color: #ed5565 !important; box-shadow: 0 0 0 3px rgba(237,85,101,.16); } /* THE "18 OR OVER" BOX (27 Sep 2026, Neil) -- on every signup form, where the line "By signing up you accept our T&C's" used to be. A row: the box, then the sentence, with the whole label clickable. Inherits the form's colour, so it reads on the light modal and on a creator's dark page alike. */ .app-front-form .signup-adult-label { display: flex; align-items: flex-start; gap: 8px; margin: 4px 0 12px; font-size: 13px; font-weight: 400; line-height: 1.4; text-align: left; cursor: pointer; } .app-front-form .signup-adult-label input { flex: 0 0 auto; width: 16px; height: 16px; margin: 1px 0 0; accent-color: #2dc26b; cursor: pointer; } .app-front-form .signup-adult-label a { text-decoration: underline; } /* ---- TWO-STEP SIGN-IN: the code view of the sign-in box (2 Oct 2026) ------ Output::authViews draws it while a sign-in waits for its code. One box for the six digits (or an app user's backup code), spaced like a code. */ #public-login-wrapper .ts-ico { width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: rgba(45,194,107,.12); color: #3ad47a; } #public-login-wrapper .ts-ico svg { width: 22px; height: 22px; } #public-login-wrapper .ts-view p b { color: #fff; } #public-login-wrapper .form-control.ts-code { height: 54px; text-align: center; font-size: 24px; font-weight: 700; letter-spacing: .35em; } #public-login-wrapper .form-control.ts-code::placeholder { font-size: 14px; font-weight: 400; letter-spacing: 0; } #public-login-wrapper .ts-trust { display: flex; align-items: flex-start; gap: 9px; margin: 4px 0 16px; padding: 10px 12px; border-radius: 10px; background: #1c1c1c; border: 1px solid rgba(255,255,255,.08); text-align: left; font-size: 13px; font-weight: 400; color: #c9d0d8; cursor: pointer; } #public-login-wrapper .ts-trust input { margin: 2px 0 0; width: 16px; height: 16px; flex: none; accent-color: #2563eb; } #public-login-wrapper .ts-trust small { display: block; color: #6f7885; font-size: 12px; } #public-login-wrapper .ts-view .btn-success { width: 100%; } #public-login-wrapper .ts-links { display: flex; justify-content: center; gap: 16px; margin-top: 4px; } #public-login-wrapper .ts-links form { margin: 0; } #public-login-wrapper .ts-link { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: color-mix(in srgb, #2563eb 55%, white); text-decoration: none; cursor: pointer; } #public-login-wrapper .ts-link:hover { text-decoration: underline; } #public-login-wrapper .ts-note { margin: 14px 0 0; font-size: 12px; color: #6f7885; } /* NO GAP ABOVE A CREATOR'S STORE (3 Oct 2026, Martin: "there's space before the page actually starts"). dashboard.css gives every body 61px at the top, !important, for the old fixed bar; a store has no bar of ours above it (top_bar_store.tpl), so the 61px was a dark band over the creator's page. body.lhq-bare is set by Output for exactly those pages; body.v2 does the same for the app (v2.css). */ body.lhq-bare { margin-top: 0 !important; } /* reCAPTCHA'S BADGE, HIDDEN (3 Oct 2026, Martin). Google allows it when the form says so instead, which the sign-in and sign-up boxes now do (.rc-note, footer_public.tpl). The script itself only loads when one of those forms is started -- lhqCaptcha in public.js. */ .grecaptcha-badge { visibility: hidden !important; } .rc-note { margin: 14px 0 0; font-size: 11.5px; line-height: 1.45; color: #6f7885; text-align: center; } .rc-note a { color: #98a1ad; text-decoration: underline; } /** * © Copyright 2016 Variation Design Consultants Limited | copyright@variationdesign.co.uk * All rights reserved. * * The account's brand colours, published as CSS custom properties. * * WHY THIS FILE EXISTS. The platform has always had per-account colours -- an * account sets them in Settings and they land in the session as main_colour, * link_colour and the rest. But the only way to USE one has been the [$TOKEN] * substitution that styles/css/dynamic.php and public_dynamic.php run over the * stylesheets they concatenate. A stylesheet that is not in one of those bundles * never sees a brand colour at all. * * Most module stylesheets are not in them. AjaxStylesJS::returnStyles() emits a * plain straight to the file, so the browser * fetches it from disk with no PHP anywhere near it -- which is why * modules/Courses/styles/courses.css contains hardcoded #2563eb and #3078db and * could not do otherwise. * * So the tokens are resolved ONCE here, into custom properties, and after that * any stylesheet in the platform can use var(--lhq-brand) with no parsing at all. * Custom properties are inherited and resolved at use time, so it does not matter * that this file loads before or after the one using them. * * ALWAYS PASS A FALLBACK. var(--lhq-brand, #2563eb), never a bare var(). * * This is not defensive habit, it is a real case: Styles::saveStylesFiles() seeds * every one of these to an empty string and only fills them if the account has a * settings record. An account without one emits `--lhq-brand: ;`, which is a * valid but EMPTY custom property -- and a bare var() referring to it makes the * whole declaration invalid at computed-value time, which is to say the colour * does not fall back to anything, it disappears. A fallback in the var() is what * turns that into the platform default instead of a missing rule. * * HOW IT IS LOADED. Appended by both styles/css/dynamic.php and * styles/css/public_dynamic.php, the same way logo.css is, so the variables exist * on logged-in screens and on the public storefront alike. */ :root { /* The account's primary colour. Most of the platform's own chrome uses a fixed cobalt rather than this; the two are different things and should stay so -- this is the CREATOR's colour, for surfaces that represent them. */ --lhq-brand: #00437a; --lhq-brand-light: #f8fbfd; --lhq-link: #005c9b; --lhq-link-hover: #7d0082; --lhq-text: #2d2d2b; --lhq-bg: #ffffff; /* A family NAME, not a stack -- the theme stores one face. Anything using it should supply its own fallbacks after it: font-family: var(--lhq-font, open_sansregular), Helvetica, Arial, sans-serif; */ --lhq-font: open_sansregular; } /* =================================================================== THE FULL-WIDTH PAGE WRAPPER ------------------------------------------------------------------- Pages.class.php gives the course and marketplace pages a wrapper that runs the full width instead of Bootstrap's fixed .container. Its padding used to be an inline style on that div, which meant no media query could answer it -- on a 375px phone it held 20px a side that no breakpoint could reach. IT LIVES IN brand.css BECAUSE BOTH BUNDLES LOAD IT. The first version of this rule went into public.css, and public.css is only in the public bundle -- so a signed-in viewer, who gets the app bundle and the app chrome, lost the 20px entirely and the marketplace ran edge to edge. brand.css and logo.css are the only two sheets in both styles/css/dynamic.php and styles/css/public_dynamic.php. The row reset below is not tidying either. Signed OUT the Bootstrap row sits flush and its column's padding is the gutter; signed IN the row carries its -15 margins, so the same column padding nets to nothing and the cards touched the glass. Zeroing the margins makes the two states agree on one 16px gutter instead of 16 and 0. =================================================================== */ .container-content-full { padding: 0 20px; } @media (max-width: 600px) { .container-content-full { padding-left: 8px; padding-right: 8px; } .container-content-full > .row { margin-left: 0; margin-right: 0; } .container-content-full > .row > [class*="col-"] { padding-left: 8px; padding-right: 8px; } } /* =================================================================== THE COOKIE BAR ------------------------------------------------------------------- It was three declarations of inline