public/css/rs/style.css

@@ -0,0 +1,606 @@
+@import url('https://fonts.googleapis.com/css2?family=Frank+Ruhl+Libre:wght@300..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
+
+:root {
+  --pry-color: #164C63;
+  --pry-light-color: #155B75;
+  --pry-dark-color: #0D2D3A;
+  --text-dark-color: #344054;
+  --text-color: #475467;
+}
+body {
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-size: 16px;
+  line-height: 26px;
+  color: var(--text-color);
+}
+*:not(i){
+  font-family: 'Inter', sans-serif;
+}
+.logo {
+  max-height: 32px;
+}
+img {
+  max-width: 100%;
+  image-rendering: crisp-edges;
+}
+a {
+  text-decoration: none;
+  color: var(--pry-light-color);
+}
+a:focus, a:hover {
+  color: var(--pry-light-color);
+}
+label {
+  font-size: 16px;
+  line-height: 24px;
+}
+.form-group {
+  margin-bottom: 15px;
+}
+.nav-link {
+  font-size: 16px;
+  line-height: 24px;
+  display: inline-block;
+  color: var(--text-dark-color) !important;
+}
+.nav-link.active {
+  padding:8px 16px !important;
+  /* background-color: #ECFDFF; */
+  border-bottom:1px solid var(--pry-light-color);
+}
+.text-pry-light {
+  color: var(--pry-light-color);
+}
+.btn-nav {
+  color: var(--pry-light-color);
+  background-color: rgba(13, 45, 57, .05);
+  padding: 8px 16px !important;
+  display: inline-block;
+  transition: .5s;
+}
+.btn-nav:hover {
+  background-color: rgba(13, 45, 57, .1);
+  transition: .5s;
+}
+.top {
+  background-image: url('/rs/images/hero-img.jpg');
+  min-height: 65vh;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: top right;
+}
+.hbp {
+  background-image: url('/rs/images/bg-hbp.svg');
+}
+.hst {
+  background-image: url('/rs/images/bg-hst.jpg');
+}
+.healthy-weight {
+  background-image: url('/rs/images/bg-healthy-weight.svg');
+  background-size: auto 80%;
+  margin-inline: 20px;
+}
+.diabetes {
+  background-image: url('/rs/images/bg-diabetes.svg');
+  background-size: auto 80%;
+  margin-inline: 20px;
+}
+.play-web {
+  position: absolute;
+  right:70px;
+  margin-top: -45px;
+  transition: .5s;
+  background-color: rgba(13, 45, 57, .1);
+  border-radius: 100%;
+}
+.play-web:hover {
+  transform: scale(1.1);
+  transition: .5s;
+}
+.top .title {
+  font-size: 47px;
+  line-height: 55px;
+}
+.title, .subheader, .subtitle, .subtitle-lg, .title-md{
+  font-family: "Frank Ruhl Libre", serif;
+  font-weight: 600;
+  font-size: 40px;
+  line-height: 44px;
+  color: var(--pry-color);
+}
+.title-md {
+  font-size: 32px;
+  line-height: 35px;
+}
+.subtitle {
+  font-size: 28px;
+  line-height: 36px;
+}
+.subtitle-lg {
+  font-size: 36px;
+  line-height: 39px;
+  letter-spacing: -2%;
+  font-weight: 500;
+}
+.subheader {
+  font-size: 24px;
+  line-height: 30px;
+}
+.text-lg {
+  font-weight: 400;
+  font-size: 20px;
+  line-height: 30px;
+
+}
+.individual-tests input {
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  height: 0;
+  width: 0;
+}
+.individual-tests .form-check-label {
+  position: relative;
+  border: 1px solid #ddd;
+  margin-left: -20px;
+  padding: 10px 20px 10px 25px;
+  font-size: 14px;
+  border-radius: 10px;
+  background: #fff;
+}
+.individual-tests .checkmark {
+  position: absolute;
+  top: 10px;
+  left: .5rem;
+  height: 20px;
+  width: 20px;
+  border-radius: 100%;
+  background-color: #fff;
+  border: 1px solid #ddd;
+}
+.individual-tests .form-check-label:hover input ~ .checkmark {
+  background-color: #ddd;
+}
+
+.individual-tests .form-check-label input:checked ~ .checkmark {
+  background-color: #dceef8;
+  border:1px solid var(--pry-color);
+}
+.individual-tests .form-check-label:has(input:checked) {
+  background-color: #dceef8;
+  border:1px solid var(--pry-color);
+}
+.checkmark:after {
+  content: "";
+  position: absolute;
+  display: none;
+}
+
+.individual-tests .form-check-label input:checked ~ .checkmark:after {
+  display: block;
+}
+
+.individual-tests .form-check-label .checkmark:after {
+  width: 14px;
+  height: 14px;
+  top:2px;
+  left: 2px;
+  background: var(--pry-color);
+  border-radius: 100%;
+}
+.transaction-container {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 15px;
+}
+.transaction-container .section-header {
+    justify-content: flex-start;
+    align-items: flex-start;
+}
+
+.payment-img {
+    height: 30px;
+}
+
+.transaction-container .order_info {
+    width: 65%;
+    margin-right: 20px;
+}
+
+.transaction-container .summary {
+    width: 35%;
+    position: sticky;
+}
+.bg-sec-lighter {
+  background-color: #faebd6;
+}
+.secure-badge {
+  display: flex;
+  padding: 10px 16px;
+  border:1px solid var(--sec-light-color);
+  background-color: #FEF6EE;
+  border-radius: 12px;
+}
+.secure-badge * {
+  color: var(--sec-color);
+}
+.btn-pry {
+  background-color: var(--pry-color);
+  color: #fff !important;
+  transition: .5s;
+}
+.btn-pry:hover {
+  opacity: .9;
+  transition: .5s;
+}
+.btn-sec {
+  border:1px solid #D0D5DD;
+  background-color: #ffffff;
+  transition: .5s;
+  color: var(--text-dark-color);
+}
+.btn-sec:hover {
+  background-color: rgba(13, 45, 57, .05);
+  transition: .5s;
+}
+.btn {
+  padding: 10px 16px;
+  border-radius: 50px;
+}
+.top .btn {
+  padding: 16px 22px;
+}
+.coverage {
+  background-color: var(--pry-dark-color);
+}
+.flex-coverage {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.covered{
+  padding: 12px 16px;
+  background-color: rgba(0, 0, 0, 0.2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 8px;
+  width: 450px;
+}
+.covered span{
+  color: #fff;
+  font-size: 16px
+}
+.programs-container {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap:50px;
+}
+.programs-container img {
+  width: 100%;
+  height: 300px;
+}
+.bg-pry {
+  background-color: var(--pry-color);
+}
+.bg-pry-lighter {
+  background-color: #F5FEFF;
+  border: 1px solid #CFF9FE;
+}
+.dropdown-menu {
+  border-radius: 10px;
+  overflow: hidden;
+  min-width: 200px;
+}
+.dropdown-item {
+  padding: 6px 15px;
+  font-size: 14px;
+  border-bottom:1px solid #eee;
+}
+.dropdown-item:focus {
+  background-color: var(--pry-color);
+  color: #fff;
+}
+.dropdown-item.active {
+  background-color: #ECFDFF;
+  color: #000000;
+}
+.border-rounded {
+  border-radius: 12px;
+}
+.bulleted {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 10px;
+}
+.bulleted .number {
+  font-size: 16px;
+  height: 35px;
+  width: 35px;
+  background-color: var(--pry-color);
+  display: grid;
+  place-items: center;
+  border-radius: 100%;
+}
+.bulleted .number span {
+  color: #fff;
+}
+.maryland {
+  background-color: #860037;
+  background-image: url('/rs/images/mh/mh-bg.svg');
+  background-size: cover;
+  background-position: right center;
+  background-repeat: no-repeat;
+  padding:100px;
+  height: 100%;
+  width: 100%;
+}
+.maryland * {
+  color: #fff;
+}
+.maryland .title {
+  font-size: 48px;
+  line-height: 52px;
+}
+.maryland p {
+  font-size: 16px;
+}
+.accordion-item {
+  border: 0;
+}
+.accordion-button, .accordion-button:not(.collapsed) {
+  background-color: #ffffff;
+  color: var(--pry-color);
+  font-size: 24px;
+  line-height: 26px;
+  font-family: "Frank Ruhl Libre", serif;
+  padding-block: 20px;
+}
+.accordion-button.collapsed, .accordion-collapse.show {
+  border-bottom: 1px solid #eee;
+}
+.accordion-button:focus {
+  box-shadow:none !important;
+}
+.accordion-button:not(.collapsed)::after {
+  background-image: url('/rs/images/minus.svg')
+}
+.accordion-button.collapsed::after {
+  background-image: url('/rs/images/plus.svg')
+}
+.accordion-button, .accordion-body {
+  padding-inline: 0;
+}
+footer ul li {
+  list-style: none;
+}
+footer a {
+  color: var(--text-pry-color);
+}
+.page-top {
+  background-size: cover;
+}
+.check {
+  padding-left: 0;
+}
+.check li {
+  list-style: none;
+  display: flex;
+  /* margin-bottom: 15px; */
+  margin-bottom: 0;
+  font-size: 17px
+}
+.check li::before {
+  content: url('/rs/images/check-list.svg');
+  padding-top: 5px;
+  padding-right: 10px !important;
+}
+.check-white {
+  padding-left: 0;
+}
+.check-white li {
+  list-style: none;
+  display: flex;
+  /* margin-bottom: 15px; */
+  margin-bottom: 0;
+  font-size: 17px
+}
+.check-white li::before {
+  content: url('/rs/images/check-list-white.svg');
+  padding-top: 5px;
+  padding-right: 10px !important;
+}
+.page-breadcrumbs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 14px;
+}
+@media screen and (min-width:1300px) {
+  .container {
+    min-width: 1240px;
+  }
+}
+@media screen and (max-width:1199px) {
+  .top {
+    background-image:none;
+    background-color: #ffffff;
+  }
+  .top-img{
+    margin-top:20px;
+    background-image: url('/rs/images/hero-img.jpg');
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: top right;
+    height: 350px;
+    width: 100%;
+    display: grid;
+    place-items: center;
+  }
+  .play-mobile {
+    background-color: rgba(13, 45, 57, .1);
+    border-radius: 100%;
+  }
+  .flex-coverage {
+    flex-direction: column;
+    align-items: center;
+  }
+  .covered {
+    width: auto;
+  }
+  .programs-container  {
+    flex-wrap: wrap;
+    gap:0px;
+  }
+  .programs-container > div {
+    width: 45%;
+    margin-bottom: 40px;
+  }
+  .programs-container img {
+    height: 400px;
+  }
+  .bulleted {
+    margin-bottom: 15px;
+  }
+}
+@media screen and (max-width:991px) {
+  .wb-100 {
+    width: 100%;
+  }
+  .top-img{
+    /* height: 310px; */
+    background-size: cover;
+  }
+  .transaction-container .summary {
+      position: relative;
+      width: 100%;
+  }
+  .transaction-container {
+      flex-direction: column;
+      align-items: center;
+  }
+  .transaction-container .order_info {
+      order: 2;
+      margin: 20px 0;
+      width: 100%;
+  }
+  .logo {
+    max-height: 35px;
+  }
+  .cv-container {
+    gap:15px;
+    flex-wrap: wrap;
+  }
+  .programs-container img {
+    height: 300px;
+  }
+  .maryland {
+    padding: 50px ;
+  }
+  #navBar {
+    position: absolute;
+    width: 100%;
+    background-color: #ffffff;
+    top: 55px;
+    right: 0;
+    border-block: 1px solid #eee;
+    z-index: 1000;
+  }
+  .navbar-toggler {
+    background-color: #fff;
+    border:0;
+  }
+
+  .navbar-toggler:focus{
+    box-shadow: none;
+  }
+  .nav-link {
+
+    display: block;
+    /* text-align: center; */
+  }
+  .nav-link.active {
+    padding:0 !important;
+    background-color: transparent;
+    font-weight: bold;
+    border: none;
+  }
+}
+@media screen and (max-width:767px) {
+  .programs-container > div {
+    width: 100%;
+    margin-bottom: 50px;
+  }
+  .programs-container img {
+    height: auto;
+  }
+  .title {
+    font-size: 32px;
+    line-height: 35px;
+  }
+  .top .title {
+    font-size: 36px;
+    line-height: 36px;
+  }
+  .secure-badge {
+    font-size: 16px;
+  }
+  .hiw {
+    border-radius: 0;
+  }
+}
+@media screen and (max-width:575px) {
+
+  .cv-container {
+    display: flex;
+  }
+  /* .cv-container {
+    display: grid;
+    place-items: center;
+  }
+  .cv-container img{
+    display: block;
+    margin-block: 5px;
+  } */
+  .subtitle-lg {
+    font-size: 27px;
+    line-height: 30px;
+  }
+  .accordion {
+    padding-inline:15px;
+  }
+  .accordion-button, .accordion-button:not(.collapsed) {
+    font-size: 22px;
+  }
+  .accordion-button::after, .accordion-button:not(.collapsed)::after {
+    padding-left: 10px;
+  }
+  .text-lg, p, .accordion-body {
+    font-size: 16px;
+    line-height: 24px;
+  }
+  .top .title {
+    font-size: 30px;
+    line-height: 40px
+  }
+  .maryland .title {
+    font-size: 30px;
+    line-height: 36px;
+  }
+  .maryland {
+    padding:0;
+    background-image: url('/rs/images/mh/lights.svg');
+    background-size: cover;
+    overflow: hidden;
+  }
+  .maryland .overlay {
+    background-image: url('/rs/images/mh/mr-firefly.svg');
+    background-size: cover;
+    background-position: center;
+    padding: 40px 30px;
+  }
+}

resources/views/confirm-auth-token.blade.php

@@ -1,4 +1,4 @@
-<?php 
+<?php
   $layoutBlade = 'layouts.login';
   if(config('app.internalName') === 'rs'){
     $layoutBlade = 'layouts.login-rs';
@@ -9,7 +9,7 @@
 
 <div id="confirmAuthTokenComponent" v-cloak>
   <div class="d-flex align-items-center flex-column text-center p-3">
-        <div class="flex-grow-1 single-form-heading font-weight-medium">Confirm Token</div>
+        <div class="title">Verification Code</div>
     </div>
   <form action="{{route('process-confirm-auth-token')}}" class="form" method="post">
     <div class="icon_wrap">
@@ -20,26 +20,26 @@
     <div class="alert alert-info">{{session('message')}}</div>
     @endif
     <div class="form-group">
-      <div class="p-2 text-center">
-        <strong>
-          Please enter the code sent to {{ $maskedCellNumber }}.
-        </strong>
+      <div class="p-2 text-dark">
+        Please enter the code sent to <b>{{ $maskedCellNumber }}.</b>
       </div>
       <input type="tel" class="form-control" name="confirmation_token" autocomplete="off" autofocus required value="{{old('confirmation_token')}}">
     </div>
     <div class="row">
-      <div class="col-12 text-center">
-        <input type="submit" name="sendToken" value="Confirm Token" class="btn btn-orange text-uppercase py-2 px-4">
+      <div class="col-12">
+        <input type="submit" name="sendToken" value="Confirm Code" class="btn btn-pry rounded-pill py-2 px-lg-4 wb-100">
       </div>
     </div>
-    <div class="text-center mt-3">
-      <div class="d-flex align-items-center flex-wrap justify-content-center">
-        <a href="#" class="text-pry" resend-token>
-          <span v-if="!loading">resend token</span>
+    <div class="mt-3">
+      <div class="d-flex align-items-center flex-wrap">
+        Didn't recieve the verification code?
+        <a href="#" class="ms-1 text-orange" resend-token>
+          <span v-if="!loading">resend code</span>
           <span v-else><i class="fas fa-circle-notch fa-spin"></i> Resending...</span>
         </a>
-        <span class="mx-2 font-weight-bold">OR</span>
-        <a href="{{ route('login') }}" class="text-pry">change phone number</a>
+      </div>
+      <div class="">
+        <a href="{{ route('login') }}" class="text-orange">Change phone number</a>
       </div>
     </div>
     <div v-if="response" class="text-center mb-4">

resources/views/layouts/login-rs.blade.php

@@ -33,6 +33,7 @@
     <link href="{{ asset('css/lh.css') }}" rel=stylesheet>
     <link href="{{ asset('css/style.css') }}" rel=stylesheet>
     <link href="{{ asset('css/pristine.css') }}" rel=stylesheet>
+    <link rel="stylesheet" href="{{ asset('css/rs/style.css') }}" crossorigin="anonymous" />
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
     <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
     <script src="{{ asset('/js/jquery.strengthify.min.js') }}"></script>
@@ -75,7 +76,7 @@
     </div>
     <nav class="navbar navbar-expand-lg shadow-sm" id="mainNav">
         <div class="container position-relative p-0">
-            <a href="{{ config('app.backToInfoSiteUrl') }}"><img class="logo" src="{{ asset('img/logo-rs.svg') }}"></a>
+            <a href="/"><img class="logo" src="{{ asset('img/logo-rs.svg') }}"></a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navBar"
                 aria-controls="navBar" aria-expanded="false" aria-label="Toggle navigation">
                 <i class="fas fa-bars"></i>
@@ -95,7 +96,7 @@
         </div>
     </nav>
     <div class="bg-white lh-container">
-        <div class="lh-form-container container">
+        <div class="lh-form-container ">
             @yield('content')
         </div>
     </div>

resources/views/login.blade.php

@@ -1,4 +1,4 @@
-<?php 
+<?php
   $layoutBlade = 'layouts.login';
   if(config('app.internalName') === 'rs'){
     $layoutBlade = 'layouts.login-rs';
@@ -9,8 +9,8 @@
 
 <div id="formView">
   <div class="d-flex align-items-center flex-column text-center p-3">
-        <div class="flex-grow-1 single-form-heading font-weight-medium mb-2">HR Portal</div>
-        <p class="text-muted">Please enter your cell phone number below to receive an SMS token, and then follow the prompts. If you have any questions or experience any technical issues, please contact our HR department at: 1-(800)-920-9530.</p>
+        <div class="title text-pry mb-3">HR Portal</div>
+        <p class="text-muted" style="font-size:17px">Please enter your cell phone number below to receive an SMS token, and then follow the prompts. If you have any questions or experience any technical issues, please contact our HR department at: <a href="{{ config('app.phone') }}">{{ config('app.phone') }}</a>.</p>
     </div>
     <form action="{{route('send-sms-auth-token')}}" class="form mx-2" method="post">
       <div class="icon_wrap">
@@ -21,17 +21,17 @@
         <div class="alert alert-info">{{session('message')}}</div>
         @endif
         <div class="form-group">
-            <label>Phone Number</label>
+            <label>Phone Number:</label>
             <input type="tel" class="form-control phone" name="cell_number" autocomplete="off" autofocus required value="{{old('cell_number')}}">
             <small class="d-block mt-2 mb-3 text-dark font-italic">
               *Your mobile provider's standard text messaging rates will apply.
             </small>
         </div>
 
-        
+
         <div class="row mb-4">
-            <div class="col-12 text-center">
-                <input type="submit" name="sendToken" value="Send SMS Token" class="btn btn-orange text-uppercase py-2 px-4">
+            <div class="col-12">
+                <input type="submit" name="sendToken" value="Send SMS Token" class="btn btn-pry rounded-pill py-2 px-lg-4 wb-100">
             </div>
         </div>
     </form>