<!doctype html>
<html class="no-js" lang="">
<!-- 
                RED HAT SINGLE SIGN ON FORM         
                    `.``     .-..`                          
                   ://///:--///////:-.`                     
                  ://///////////////////:-`                 
                 ./////////////////////////:                
                `///////////////////////////-               
                :////////////////////////////`              
                /////////////////////////////-              
       `..-::/: `:////////////////////////////              
     `:////////   `-//////////////////////////.             
    `//////////:`    `-://////////////////////-`            
    `////////////-`      `.-:////////////////-`//-`         
     ://///////////:.          ``...----...`   :////.       
      -///////////////:-.`                    -//////:      
       `://////////////////:--.           .-://///////:     
         `-////////////////////////////////////////////`    
            `-/////////////////////////////////////////`    
               `.:////////////////////////////////////.     
                   `.-://///////////////////////////:`      
                        ``.-:////////////////////:.`        
                                ```-://///////```             
-->
<head>
  <meta charset="utf-8">
  <title>Red Hat Sign-In</title>
  <meta name="description" content="sign-in page for Red Hat employees">
  <meta name="viewport"    content="width=device-width, initial-scale=1">
  <meta name="theme-color" content="#cc0000">
  <meta name="viewport" content="width=device-width, initial-scale=1">

</head>
<body>
 
<svg xmlns="http://www.w3.org/2000/svg" class="logo" viewBox="0 0 850 240">
  <path id="brim" d="M230.2 110.6c.1-1.6-.1-3.1-.4-4.5l-9.6-41.5c-2.2-9.2-4.2-13.3-20.1-21.4-12.5-6.3-39.6-16.8-47.6-16.8-7.5 0-9.6 9.5-18.6 9.5-9 0-14.9-7-23.1-7-8.1 0-12.7 5.2-16.5 15.9 0 0-10.8 30.4-12.2 34.9a10 10 0 0 0-.3 2.5c0 11.8 45.8 50.7 109 50.7 16 0 39.4-3.2 39.4-22.3zm2.4 7.5a72 72 0 0 1 2.2 13c0 18-20.2 28-46.8 28-60 0-112.4-35.1-112.4-58.4 0-3.3.7-6.5 2-9.6C56.2 92.5 28 96.5 28 121c0 40.4 95.6 90.2 171.5 90.2 58 0 72.7-26.3 72.7-47.1 0-16.3-14-34.8-39.5-45.9"/>
  <path id="band" d="M232.7 118.2a58 58 0 0 1 2.2 13c0 18-20.2 28-46.8 28-60 0-112.5-35.1-112.5-58.4 0-3.3.6-6.5 2-9.6l4.6-11.4-.3 2.4c0 12 46.6 50.7 109 50.7 15.9 0 39.3-4.1 39.3-22.3 0-1.6-.1-3.1-.4-4.5z"/>
  <path id="type" d="M771.2 144.7c0 15.3 9.2 22.8 26 22.8a68 68 0 0 0 15.3-2.2v-17.7a31.8 31.8 0 0 1-9.9 1.5c-6.9 0-9.4-2.2-9.4-8.7v-27.2h20V95h-20V71.9l-22 4.7V95h-14.4v18.2h14.4v31.5zm-61.8 23c7.7 0 13.9-1.6 19.7-5.5v4.3h21.6v-45.8c0-17.5-11.7-27-31.3-27a79 79 0 0 0-33.4 7.8l7.8 16.1a57 57 0 0 1 21.7-5.7c9 0 13.6 3.5 13.6 10.7v3.5a61 61 0 0 0-16.2-2c-18.4 0-29.5 7.7-29.5 21.5 0 12.5 10 22.1 26 22.1zm-5.2-22.6c0-4.7 4.8-7 11.9-7 4.8 0 9.1.7 13 1.6v9.2c-4 2.3-8.8 3.4-13.6 3.4-7.1 0-11.3-2.7-11.3-7.2zm-112.4 21.4h23.3v-37H654v37h23.3V71.9H654v36.3h-38.9V71.9h-23.3v94.6zm-54.8 0h21.6V67.1L536.7 72v26.9a36.2 36.2 0 0 0-18.2-4.8 36.6 36.6 0 0 0-37.2 36.7 36.4 36.4 0 0 0 36.5 36.8 32 32 0 0 0 19.2-6.3v5.3zm-34.2-35.8a18 18 0 0 1 18.8-18.1c5.9 0 11.3 2 15.1 5.5v25c-3.9 3.8-9 5.7-15.1 5.7a18.1 18.1 0 0 1-18.8-18.1zm-101.3.1c0 20.8 17 37.1 38.9 37.1 12.1 0 20.8-3.3 29.9-10.9l-14.5-12.8a19.1 19.1 0 0 1-14.3 5.4c-8.1 0-14.7-4.5-17.6-11.3h51v-5.5c0-22.7-15.3-39-36.1-39-21 0-37.3 16.2-37.3 37zm36.9-19.2c6.9 0 12.7 4.5 15 11.4h-29.9c2.2-7.2 7.6-11.4 14.9-11.4zm-121 54.9h23.3V132h17.7l17.8 34.5h26l-20.7-37.8a29 29 0 0 0 17.7-26.7c0-17-13.4-30.1-33.4-30.1h-48.4v94.6zm46.3-74.8c7.7 0 12 5 12 10.7 0 5.8-4.3 10.7-12 10.7h-23V91.7h23z"/>
</svg>

  
<form 
id="login_form" 
name="login_form" 
autocomplete="off"
method="post"
enctype="application/x-www-form-urlencoded" 
onsubmit="javascript:stripspaces(this)" >
        
  
  
  
<input type="text"  
id="username" 
class="username"
name="username" 
size="20" 
autocapitalize="off"
autocorrect="off" 
autocomplete="on"  
autofocus="on"
required />


<label for="username">Username</label> <small>Red Hat ID</small>  <svg viewbox="0 0 10 10" ><use xlink:href="#user" /> <use xlink:href="#fed" class="fedora" /> <use xlink:href="#burst" class="flash"  /></svg>


<input 
   id="password" 
 type="password" 
 name="password"
autocorrect="off" 
autocomplete="off"  
autocomplete="new-password"
value=""  
size="20"
required>
 
<label for="password">Password</label> <small>PIN + Token</small> <svg viewbox="0 0 10 10"><use xlink:href="#pad" /><use class="flash" xlink:href="#burst" /><use class="lock" xlink:href="#lock" />
</svg>


  <button id="submit" type="submit" name="submit"  >Log In</button>
 
   
<span class="note" id="note">NOTE: You must close your browser or clear your cookies to completely log out.</span>
  
  
  <svg xmlns="http://www.w3.org/2000/svg" 
       class="hbox" viewBox="0 0 200 40">
      <rect  x=".5" y=".5" ry="3" rx="3" width="199" height="42" />
  </svg>
</form>



<svg class="hide">
  
    <defs>
   
   
 
      

  <g id="padlock"> <path id="pad" d="m 3,5.5 5,0 0,4 -5,0 z" /> <path id="lock" d="m 3,5.5 0,-2 c 0,-3 4,-3 4,-0.25 L 7,4 "/>  </g>
    
  <path id="fed" d="M7.8 3.8c-.7.6-3.5.6-4.4-.1-.3-.2 4.8-.2 4.4.1zM7 3.5c-.4-.7-.3-2-1.5-1.5-1-.5-1 .7-1.5 1.5"  />
      
  <path id="user" d="M5.5 5.8c-2 0-2-3 0-3 2.3 0 2 3 0 3zm.8-.3c1.2 0 2.2 1 2.2 2.3v1.7h-6V7.7c0-1.2 1-2.2 2.3-2.2"  />
  <path id="burst" d="m 5.47,0 v 2.19 m 4.38,2.19 h -2.2 m -6.55,0 H 3.28 M 2.38,1.28 3.92,2.83 M 8.56,1.28 7.02,2.83" />
    

  </defs>
</svg>

  


</body> 
<script>
</script>


:root {
  font-size: 1.25rem;
  user-select: none;
}

:root {
  font-family: "Red Hat Text", sans-serif;
  --brand: #e00;
  --bg: #fff;
  --fg: #000811;
  --mid: #999;
  outline: none;
}

*,:before,:after{box-sizing:border-box; outline:0}

*{}
body {
  background-color: var(--bg);
  background-color:#fafafa;
  color: var(--fg);
  overscroll-behavior: none;
  /* display: flex;*/
  flex-direction: column;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  text-align: center;
  display: flex;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #050505;
    --fg: #ddd;
    --mid: #555;
  }
  body{background-color:#050505}
  #band {
    fill: transparent;
  }
  form:before {
    opacity: 0.2 !important;
  }
}



body::before,
body::after {
  content: "";
  /*  flex: 1; */
}

form {
  position: relative;

  display: block;
  border-radius: 0.4rem;
  box-shadow: 0 0.5rem 0.75rem -0.75rem rgba(0, 0, 0, 0.5);

  width: 20rem;
  margin: 0 auto;
  min-height: 4rem;
}

form:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--mid);
  opacity: 0.085;
  z-index: 0;

  border-radius: 0.4rem;
}

/* BEGIN GHETTO RESET */
*,
*:before,
*:after {
  box-sizing: border-box;
  padding: 0;
  appearance: none;
  font-size: 1rem;
  font-weight: 300;
  font-family: "Red Hat Text", sans-serif;
  border: 0;
  box-shadow: 0;
  pointer-events: none;

  text-rendering: optimizelegibility;
}
input {appearance:none;
  pointer-events: all;
  color: currentcolor;
  cursor: pointer;
  box-shadow: none;
  outline:0 !important;
}


small {
  color: var(--mid);
  z-index: 1;
}

:valid + label,
:focus + label {
  z-index: 4;

  transform-origin: 2.5rem 0;
  animation: rise 0.45s ease-out forwards;
   transform: scale(0.75) translate(0, -1rem);
}

@keyframes rise {
  0% {
    transform: scale(1) translate(0, -.5rem);
    color: currentcolor; opacity:0;
  }
  100% {
    transform: scale(0.75) translate(0, -1rem);
  }
}



:valid + label {
  color: var(--mid);
}
:focus + label {
  color: var(--brand);
}

:focus {
  outline: 0;
}

::selection {
  color: #fff;
  background: rgba(238, 0, 0, 0.99);
}

::-moz-focus-inner {
  border: 0;
  outline: 0;
}

label {
  font-weight: 400;
  color: var(--mid);
}
input,
label,
svg,
small {
  width: 10rem;
  height: 4rem;
  line-height: 4.5rem;
  position: absolute;
  padding: 0;
  display: block;
  margin: 0 auto;
  text-indent: 0;
  text-align: left;
}

input[type="text"]:not(:focus),
input[type="password"]:not(:focus) {
}

/* END GHETTO RESET */
[type="submit"] {
  background-color: var(--brand);
  color: #fff;
  border-radius: 0 0 0.4rem 0.4rem;
  text-align: center;
  background-image: linear-gradient(#f00, #c00);
  line-height: 4rem;
  width: 100%;
  position: relative;
  display:block;
  transition: all 0.24s ease;
  overflow: hidden;
  position: absolute;
  bottom: -4rem;
}


[type="submit"]:after{content:""; display:block; position:absolute; height: 4rem; top:0; 
  left: 50%; margin-left: -4rem; transform: skew(-45deg) translate(-200%, 0); background-color:#f00; width: 8rem; transition: all .5s ease;}

[type="submit"]:focus:after{transform: skew(-45deg) translate(200%, 0); opacity:0}
/*hide submit button until fields have input*/
:not(:valid) ~ [type="submit"] {
  opacity: 0;
  transform: translate(0, 0.3rem);
  z-index: 0;
}

:valid ~ :valid ~ [type="submit"] {
  height: 4rem;
  margin-top: 4rem;
  opacity: 1;

  transform: translate(0, -0.1rem);
  box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.3);
  transition: all 0.5s cubic-bezier(0.3, 0.2, 0.2, 1);
}

[type="submit"]:focus {
  box-shadow:  
    0 0.5rem 0.5rem -0.5rem rgba(0, 0, 0, 0.3) !important;
}
 
.note {
  position: fixed;
  bottom: 1em;
  left: 0;
  color: var(--mid);
  width: 100%;
  font-size: 0.5em;
  z-index: -1;
}

small {
  opacity: 0;
  font-weight: 200;
}
:focus:not(:valid) + label + small {
  opacity: 0.5;
  transition: opacity 1s ease 1s;
}

label,
small {
  text-indent: 2.75rem;
}

[type="text"],
[type="password"] {
  text-indent: 2.75rem;
  text-align: left;
  background-color: transparent;
  line-height: 4rem;
  padding-top: 0.5rem;
  top: 0; /*
background-image: linear-gradient(145deg,  transparent, rgba(0,0,0,0.035) );*/
}

[type="text"] {
  border-radius: 0 0 0;
}

[type="text"]:focus,
[type="password"]:focus {
  /* box-shadow:  0 -.15rem var(--brand);*/
  transition: box-shadow 0.4s ease;
  background-image: none;
  background-color: var(--bg);
  box-shadow: 0 .5rem .5rem -.4rem rgba(0,0,0,0.4)
}

[type="password"],
[type="password"] + label,
[type="password"] + label + small {
  right: 0;
}

[type="password"] + label + small + svg {
  left: 10.75rem;
}

/*
Portrait mode for phones and sidebars 
*/

@media screen and (max-width: 440px) {
  :root {
    font-size: 1rem;
  }

  form {
    min-height: 8rem;
    width: 10rem;
  }

  [type="submit"] {
    margin-top: 4rem; 
    position: relative; 
    height:3rem;
    line-height:3rem;
  }

  :valid ~ :valid ~ [type="submit"] {height:3rem; line-height:3rem;}
  [type="text"]:focus,
  [type="password"]:focus {
    box-shadow: 0 0.1em 0 var(--brand);
    z-index: 3;
  }

  [type="password"],
  [type="password"] + label,
  [type="password"] + label + small,
  [type="password"] + label + small + svg {
    top: 4rem;
  }

  [viewbox="0 0 10 10"] {
    left: 0.25rem;
  }

  [type="password"] + label + small + svg {
    left: 0.25rem;
    top: 5.5rem;
  }
}

@media (min-width: 300px) and (orientation: landscape) {
  .hbox {
    display: block !important;
    width: 100%;
    height: 4rem;
    top: 0;
    fill: none;
    stroke-width: 1;
    stroke: var(--mid);
    stroke-dasharray: 0 468;
    stroke-dashoffset: -96;
    transition: all 0.5s ease;
  }

  [type="text"]:focus ~ .hbox,
  [type="password"]:focus ~ .hbox {
    stroke-dasharray: 138 334;
    stroke-dashoffset: 42;
    stroke: var(--brand);
  }

  [type="submit"]:focus ~ .hbox {
    stroke-dashoffset: -300;
  }

  [type="password"]:focus ~ .hbox {
    stroke-dashoffset: -96;
  }

  /*field outline*/
}

small + svg {
  stroke: var(--mid);
  color: var(--mid);
}
input:focus + label + small + svg,
input:focus + label + small + svg use {
  stroke: var(--brand);
  color: var(--brand);
}
.fedora {
  fill: currentcolor !important;
}

/* icons*/

#burst {
  stroke: var(--mid);
}

#fed,
#user,
#lock,
#pad,
#burst,
[viewbox="0 0 10 10"] use {
  fill: transparent;
  stroke-width: 1px;
}
#fed {
  fill: currentcolor !important;
}
input + label + small + svg {
  text-align: left;
  z-index: 3;
  height: 1.25rem;
  width: 1.25rem;
  left: 0.5rem;
  top: 1.5rem;
}

.fedora {
  transform: translate(0, -1.5px);

  opacity: 0;
}

.lock {
  transform: translate(0, 0px);
}

[type="password"]:valid ~ svg .lock {
  transition: transform 0.5s ease;
  transform: translate(0, 1.25px);
}

input[type="text"]:valid ~ svg .fedora {
  transform: translate(0, -0.7px);
  transition: opacity 0.2s ease, transform 0.35s ease;
  opacity: 1;
}

svg use {
  fill: none;
}
#fed {
  fill: auto !important;
}

.logo {
  width: 100%;
  position: relative;
  margin: 1rem auto;
  width: 100%;
}
#brim {
  fill: var(--brand);
}
#type {
  fill: currentcolor;
}

.flash {
  stroke-dasharray: 1 5;
  stroke-dashoffset: -4;
  stroke-linecap: round;
  opacity: 0;
}

:focus + label + small + svg .flash {
  stroke-dashoffset: 1;
  transition: all 0.6s ease-out;
  opacity: 1;
  stroke-linecap: round;
}

[type="text"] {
  user-select: all;
}

.logo {
  height: 2.5rem;
}

/*helper objects */
.hbox {
  display: none;
}

@media (max-height: 300px) and (orientation: landscape) {
  body {
    overflow-y: auto;
  }

  .hbox {
    display: none;
  }
  form {
    .note,
    .logo {
      display: none;
    }
  }
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  transition: background-color 50000s ease-in-out 50000s;
  font-family: "Red Hat Text", sans-serif !important;
  box-shadow: inset 0 0 0 10rem var(--bg); z-index:3;
}

input:-webkit-autofill:hover + label + small {
  display: none !important;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.