/* ========================================================================== Kairos Pathways — shared brand variables ========================================================================== */ :root { --kairos-purple: #7030A0; --kairos-gold: #FFC000; --kairos-cream: #F6F2EF; --kairos-lavender: #F0EAF5; --kairos-black: #000000; --kairos-white: #FFFFFF; --kairos-lgray: #C2C2C2; --kairos-dgray: #5C5C5C; --kairos-lgreen: #E6f7EC; --kairos-green: #34A853; --kairos_dgreen: #1E7E34; --kairos-lred: #FDECEA; --kairos-red: #DC3545; --kairos-dred: #A31621; } /* ************************************************************************************************************************************************************** wp-login.php ONLY — no equivalent on a custom form, so these stay separate. *********************************************************************************************************************************************************** */ .login h1 a { /* changes the WordPress logo with our logo */ background-image: url(https://www.kairospathways.com/wp-content/themes/astra-child/Kairos_IMG_Files/Kairos_Logos/Logo_Header_Black.png); background-size: contain; /* our logo will be contained in the area taken up by the login form */ background-position: center; /* positions the logo in the center of the area taken up by the login form */ background-repeat: no-repeat; /* our logo will only show up one. It will not be repeated */ margin: 0; /* the margins surrounding the logo will be set to 0px (no margins) */ width: 100%; } body.login { /* sets the background image to the one used on the home page header */ background: var(--kairos-lavender); /* sets background color of the login page to light purple */ background-image: url(https://www.kairospathways.com/wp-content/themes/astra-child/Kairos_IMG_Files/Background_Home_Image.png); background-size: cover; /* sets the image to cover the body of the page (full height and width) */ background-position: center; /* centers the image on the page */ background-repeat: no-repeat; /* the image will only show up one. It will not be repeated */ } form#loginform { /* changes the actual form to log in */ border: 5px solid var(--kairos-purple); /* puts a solid purple border of 2px around the actual form */ background-image: url(https://www.kairospathways.com/wp-content/themes/astra-child/Kairos_IMG_Files/Background_Kairos_Form.png) !important; border-radius: 30px; /* this rounds the corners of the form to 30px */ } #wp-submit { /* changes the submit button in normal form for the form in login.php */ font-size: 18px; /* sets the font size of the button text to 18px */ background: var(--kairos-purple); /* normal backgroud color is purple */ color: var(--kairos-gold); /* normal font color is gold */ font-weight: 700; /* button text is bolded */ border: 1px solid var(--kairos-black); /* border for the button is a solid black border that is 1px wide */ border-radius: 10px; /* button corners are rounded by 10px */ } #wp-submit:hover { /* changes the submit button in hover mode form for the form in login.php */ font-size: 18px; /* sets the font size of the button text to 20px */ background: var(--kairos-gold); /* background color is set to gold */ color: var(--kairos-purple); /* the text is set to purple */ font-weight: 700; /* the text is bolded */ border: 1px solid var(--kairos-black); /* border for the button is a solid black border that is 1px wide */ border-radius: 10px; /* button corners are rounded by 10px */ } .login #backtoblog, .login #nav { /* deals with the "Forgot Password" and "Return to Kairos Pathways" links */ text-align: center; /* both links will be centered in the area taken by the login form */ font-size: 20px; /* sets the font size to 20px for both links */ } .login #backtoblog a, .login #nav a { /* deals with the 2 links when in normal mode */ color: var(--kairos-gold); /* sets the text to gold */ -webkit-text-stroke: 1px var(--kairos-black); /* sets the border to black outline (for Chrome/Edge/Safari browsers) */ text-shadow: 0 0 1px var(--kairos-black); /* sets the border to black outline (for Firefox) */ text-decoration: none; /* removes the underline when it is desired */ font-weight: 700; /* the text is bolded */ } /* Hover state */ .login #backtoblog a:hover, .login #nav a:hover { /* deals with the 2 links when in over mode (when mouse is over them) */ color: var(--kairos-black) !important; /* set text to black */ -webkit-text-stroke: 1px var(--kairos-gold) !important; /* set the outline to be 1px wide solid gold (Chrome/Edge/Safari) */ text-shadow: 0 0 1px var(--kairos-gold) !important; /* set the outline to be 1px wide solid gold (Firefox) */ } .dashicons.dashicons-visibility { /* deals with the eye icon in the password field */ color: var(--kairos-purple); /* set the coloc of the icon to purple */ } .dashicons.dashicons-hidden { /* deals with the "eye" icon with the line through it */ color: var(--kairos-purple); /* set the coloc of the icon to purple */ } .login form .input, .login form input[type=checkbox], .login input[type=text] { /* affects the input fields of the form */ background: var(--kairos-cream); /* light beige background */ border: 1px solid var(--kairos-black); /* 1px solid black border */ border-radius: 10px; /* round the corners by 10px */ } .login label { /* deals with the labels for the login form */ font-size: 18px; /* sets the font size to 20px which is the default size for the site */ color: var(--kairos-black); /* sets text to black color */ font-weight: 700; /* the text is bolded */ line-height: 1.5; /* the line is 1.5em high */ display: inline-block; /* labels are displayed as inline blocks */ margin-bottom: 3px; /* there is a 3px margin around each labels */ } .Kairos_Activation_Notice { text-align: center; }