/* Self-hosted Montserrat — previously nothing loaded it at all in production
(Masterhome.master never had a Google Fonts , only the preview did),
so every real page was silently falling back to system fonts. These are
variable-weight files (one file legitimately covers 400/600/700/800 — not
a mistake), pulled from Google Fonts and hosted locally in ~/Fonts/ instead
of calling out to fonts.googleapis.com, so the site doesn't depend on a
third party at runtime. Only latin + latin-ext subsets — this site has no
Cyrillic/Vietnamese content. */
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("../Fonts/Montserrat-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat";
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url("../Fonts/Montserrat-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url("../Fonts/Montserrat-Italic-latin.woff2") format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Montserrat";
font-style: italic;
font-weight: 400 800;
font-display: swap;
src: url("../Fonts/Montserrat-Italic-latin-ext.woff2") format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
html { scroll-behavior: smooth; }
/* Cross-fade between pages. Native same-origin MPA transitions — no JS, and
browsers without support just navigate instantly. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 180ms;
animation-timing-function: ease;
}
@media (prefers-reduced-motion: reduce) {
@view-transition { navigation: none; }
}
* { box-sizing: border-box; }
html, body {
margin: 0;
padding: 0;
background: #ffffff;
color: #4E4E4E;
font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
input, button, select, textarea { font-family: inherit; }
.link-btn {
display: inline;
padding: 0;
border: none;
background: none;
color: #3377b9;
font: inherit;
text-decoration: underline;
cursor: pointer;
}
.link-btn:focus-visible { outline: 3px solid #97C7FC; outline-offset: 3px; border-radius: 6px; }
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
a { color: #3377b9; }
p, li { font-size: 16px; line-height: 28px; }
.callout a,
.login-note a,
.login-help a,
.update-body a,
.result-card a,
.ack-card a,
.footer-copy a,
.kein-examples a,
.doc-card a,
.links-intro a,
.auditor-grid a,
.link-btn {
background-color: transparent;
padding: 1px 3px;
margin: 0 -3px;
border-radius: 3px;
transition: background-color 0.18s ease-in-out;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
.callout a:hover, .callout a:focus-visible,
.login-note a:hover, .login-note a:focus-visible,
.login-help a:hover, .login-help a:focus-visible,
.update-body a:hover, .update-body a:focus-visible,
.result-card a:hover, .result-card a:focus-visible,
.ack-card a:hover, .ack-card a:focus-visible,
.kein-examples a:hover, .kein-examples a:focus-visible,
.doc-card a:hover, .doc-card a:focus-visible,
.links-intro a:hover, .links-intro a:focus-visible,
.auditor-grid a:hover, .auditor-grid a:focus-visible,
.link-btn:hover, .link-btn:focus-visible {
background-color: rgba(151, 199, 252, 0.5);
}
.footer-copy a:hover,
.footer-copy a:focus-visible {
background-color: rgba(255, 255, 255, 0.22);
}
/* Declared after the highlight block, which also sets padding here. The extra
vertical padding lifts the tap target past 24px; on an inline element it grows
the hit area without changing line spacing. */
.link-btn { padding: 4px; margin: 0 -4px; }
.wrap {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
/* --- Claimant-portal notice ---------------------------------------------
Cream / amber tokens lifted from the KCC KUIP page: #FFF3D7 ground with
#A26016 for the link, which is the dark amber that carries contrast. */
/* --- Work Share calculator ---------------------------------------------- */
.calc {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
margin-top: 28px;
}
/* Grid items default to min-width: auto, so a nowrap table header inside
.calc-inputs/.calc-results can hold its column open to the table's full
intrinsic width and blow the whole page out horizontally. This lets the
column shrink and hands overflow back to .table-wrapper's own scrollbar. */
.calc-inputs, .calc-results { min-width: 0; }
/* .doc-card h2 (below, same specificity: class+element) was winning by
source order and overriding this with its 24px/35px + 32px-top-margin
style — the exact same recurring specificity bug as .doc-card h3 further
down. .doc-card .calc h2 outweighs it regardless of order, which is what
was pushing "Your business" down out of alignment with "Results for your
business" in the column beside it. */
.doc-card .calc h2 { margin-top: 0; font-size: 18px; line-height: 30px; }
/* Applies in both columns — .calc-inputs' "Current unemployment claim data"
heading needs the same breathing room from the fields above it that
.calc-results' second heading already gets. */
.doc-card .calc h2:not(:first-child) { margin-top: 32px; }
.calc .field { margin-bottom: 20px; }
.calc label { display: block; font-weight: 700; margin-bottom: 8px; color: #1A1A1A; }
.calc-actions { display: flex; flex-wrap: wrap; gap: 14px; margin: 24px 0 20px; }
.calc-actions .btn-login { width: auto; }
/* Same icon+card treatment as .result-alert (the "don't share your KEIN/
password" warning on ObtainKEIN.aspx/ChangeYourPassword.aspx) instead of
plain red text, so calculator validation errors get the same weight as
every other warning on the site. :has() shows/hides the wrapper based on
whether the JS-driven .alert-danger inside it actually has text — .alert-
danger's own textContent assignment can't touch a sibling icon, so the
icon has to live in a wrapper .calc-alert never gets overwritten by that. */
.calc-alert {
display: none;
align-items: center;
gap: 14px;
margin-top: 14px;
padding: 14px 24px;
border-radius: 14px;
background: #fdecea;
}
.calc-alert:has(.alert-danger:not(:empty)) { display: flex; }
.calc-alert-icon {
flex: 0 0 auto;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: rgba(192, 57, 43, 0.12);
}
.calc-alert-icon svg { width: 20px; height: 20px; }
.calc-alert .alert-danger { margin: 0; }
.calc-highlight td { background: #E8F2FB !important; font-weight: 700; color: #093B60; }
.calc-highlight-alt td { background: #FFF3D7 !important; font-weight: 700; color: #1A1A1A; }
.calc .responsive-table td:last-child { text-align: right; white-space: nowrap; font-weight: 600; }
/* Benefits Calculator: a single stacked column of label+input rows rather
than the .calc two-column input/results grid used elsewhere, since there's
no separate results panel — the eligibility outcome renders inline below
the fields instead. */
.bc-inputs { max-width: 640px; margin-bottom: 32px; }
.calc-row-field {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 14px;
}
.calc-row-field label {
flex: 0 0 110px;
font-weight: 700;
color: #1A1A1A;
}
.calc-row-field label sup { font-size: 0.7em; }
.calc-row-field .input { flex: 1 1 auto; max-width: 420px; }
.calc-eligibility {
display: none;
position: relative;
overflow: hidden;
margin-top: 24px;
padding: 24px 28px 24px 38px;
border-radius: 14px;
}
.calc-eligibility.is-visible { display: block; }
.calc-eligibility::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 8px;
}
.calc-eligibility h3 { margin: 0 0 10px; font-size: 18px; line-height: 26px; font-weight: 700; }
.calc-eligibility ul { margin: 0; padding-left: 20px; }
.calc-eligibility li { margin-bottom: 4px; color: #4E4E4E; }
.calc-eligibility--pass { background: #e3f3e9; }
.calc-eligibility--pass::before { background: #137a3f; }
.doc-card .calc-eligibility--pass h3 { color: #137a3f; }
.calc-eligibility--fail { background: #fdecea; }
.calc-eligibility--fail::before { background: #c0392b; }
.doc-card .calc-eligibility--fail h3 { color: #c0392b; }
@media (max-width: 600px) {
.calc-row-field { align-items: flex-start; gap: 12px; }
.calc-row-field label { flex-basis: 90px; }
}
.calc-results-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 16px;
}
.calc-results-head .calc-results-title { margin: 0; }
.calc-results h2:not(:first-child).calc-results-title { margin-top: 0; }
.print-link-btn { font-size: 14px; white-space: nowrap; }
.print-link-btn::before {
content: "";
display: inline-block;
width: 15px; height: 15px;
margin-right: 6px;
vertical-align: -2px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v7H6z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M6 9V3h12v6M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 14h12v7H6z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* --- Resource pages ------------------------------------------------------ */
.breadcrumbs { max-width: 1180px; margin: 0 auto 14px; }
.breadcrumbs ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
font-size: 14px;
line-height: 20px;
}
.breadcrumbs li { display: flex; align-items: center; gap: 8px; }
.breadcrumbs a {
color: #3377b9;
text-decoration: none;
font-weight: 600;
}
.breadcrumbs a:hover, .breadcrumbs a:focus-visible {
color: #093B60;
text-decoration: underline;
}
.breadcrumbs .crumb-sep { color: #93A3B0; }
.breadcrumbs .crumb-current {
color: #4E4E4E;
font-weight: 700;
}
.doc-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(6, 53, 122, 0.10);
padding: 44px 48px;
max-width: 1180px;
margin: 0 auto;
}
/* Full-bleed navy header banner at the top of every resource page's card —
holds the h1, the "Updated" badge, and the print link together, pulled out
to the card's own edges with negative margins matching .doc-card's/
.links-card's own padding (44px/48px), so it sits flush with the card's
top corners and can share their 14px radius. Flat brand navy rather than
the gov-bar/hero gradient — reads calmer on a page-heading bar than a big
hero. .doc-card > .doc-header:first-child (not just .doc-header) —
.doc-card > :first-child below sets margin-top: 0 and would otherwise win
on specificity (two class-level selectors vs. one), cancelling the -44px
pull-out; .doc-header is always the first element inside .doc-card/
.links-card on every resource page, so this matches everywhere it needs to. */
.doc-card > .doc-header:first-child,
.links-card > .doc-header {
margin: -44px -48px 28px;
padding: 28px 48px 24px;
background: #093B60;
border-radius: 14px 14px 0 0;
}
.doc-header h1 {
margin: 0 0 12px;
font-size: 30px;
line-height: 42px;
font-weight: 700;
color: #ffffff;
}
/* Light-on-navy variant — the plain .updated-badge (light blue pill on
white) and .link-btn (blue text) both assume a white card background, so
they need their own colors here to stay visible against the navy header.
The badge drops its pill background/border entirely: it's sitting right
in the header now, so it doesn't need its own visual weight to stand out
the way it did floating on a plain white card — just plain text matching
the print link's size/color, with enough margin below it to still read as
a separate line from the print link rather than running together. */
.doc-header .updated-badge {
/* Stays inline-flex (same text line as the print link that follows) —
margin-right instead of margin-bottom, since vertical margin doesn't
do anything between two inline-level boxes sharing a line anyway.
vertical-align: middle — an inline-flex box's default baseline
alignment doesn't line up with a plain inline element's text baseline
(.print-link-btn next to it), which read as the print link sitting a
few pixels lower on the line. */
margin: 0 24px 0 0;
padding: 0;
background: none;
border: none;
border-radius: 0;
color: #ffffff;
font-size: 14px;
font-weight: 400;
vertical-align: middle;
}
.doc-header .print-link-btn {
color: #ffffff;
text-decoration: underline;
vertical-align: middle;
}
.doc-header .print-link-btn:hover,
.doc-header .print-link-btn:focus-visible {
background-color: rgba(255, 255, 255, 0.18);
}
.doc-card h2 {
margin: 32px 0 12px;
font-size: 24px;
line-height: 35px;
font-weight: 700;
color: #1A1A1A;
}
.doc-card h3 {
margin: 26px 0 10px;
font-size: 18px;
line-height: 30px;
font-weight: 700;
color: #093B60;
}
.doc-card p { margin: 0 0 16px; color: #4E4E4E; }
.doc-card ul, .doc-card ol { margin: 0 0 16px; padding-left: 22px; color: #4E4E4E; }
.doc-card li { margin-bottom: 8px; }
.doc-card > :first-child { margin-top: 0; }
.doc-card > :last-child { margin-bottom: 0; }
.updated-badge {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0 0 18px;
padding: 5px 12px 5px 10px;
border-radius: 100px;
background: #F3F9FF;
border: 1px solid #DCEBFA;
color: #093B60;
font-size: 13px;
font-weight: 600;
}
.updated-ico { width: 14px; height: 14px; flex: none; }
/* Callout for the dated notices that sit at the top of some legacy pages. */
.doc-notice {
margin: 0 0 12px;
padding: 14px 18px;
background: #FFF3D7;
border-left: 10px solid #E8A33D;
border-radius: 8px;
color: #1A1A1A;
font-weight: 600;
}
.doc-notice:last-of-type { margin-bottom: 24px; }
/* Without this, a link inside a .doc-notice (like the fraud notice's "Fraud
Reporting Form") falls back to the site's plain blue link color, which
breaks up the notice's otherwise-uniform bold/dark text — other .doc-notice
paragraphs with no link don't have this problem. Keeps the underline so
it's still recognizable as a link. */
.doc-notice a { color: #1A1A1A; text-decoration: underline; }
.doc-notice a:hover, .doc-notice a:focus-visible { color: #1A1A1A; }
/* Fraud Reporting Form link (home.aspx): matches the hero yellow alert's
uiclaimsportal.ky.gov link colors instead of .doc-notice a's dark text —
.doc-notice a above needs beating on specificity, not just relying on
.hero-callout-link alone. Same for the hover background: this link also
sits inside .update-body (the accordion), and .update-body a:hover's light
blue background (class+element, so higher specificity than
.hero-callout-link:hover alone) was winning over the intended amber tint. */
.doc-notice a.hero-callout-link,
.doc-notice a.hero-callout-link:hover,
.doc-notice a.hero-callout-link:focus-visible { color: #A26016; }
.update-body a.hero-callout-link:hover,
.update-body a.hero-callout-link:focus-visible { background-color: rgba(162, 96, 22, 0.12); }
/* Scoped to the fraud notice on home.aspx specifically — the only .doc-notice
sitting inside an accordion body — so this doesn't also affect the other
resource pages reusing .doc-notice near the top of a plain .doc-card. */
.update-body .doc-notice { margin: 20px 0 24px; }
.doc-caption { margin: 0 0 8px; font-weight: 700; color: #1A1A1A; }
.doc-footnote { font-size: 14px; line-height: 22px; color: #4E4E4E; }
/* Tables scroll inside their own box rather than pushing the page wide. */
.table-wrapper {
width: 100%;
margin: 0 0 24px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #ffffff;
}
.responsive-table { width: 100%; border-collapse: collapse; }
.responsive-table caption {
padding: 14px 16px;
text-align: left;
font-weight: 700;
color: #1A1A1A;
background: #F3F9FF;
border-bottom: 1px solid #e2e8f0;
}
.responsive-table th {
background: #F3F9FF;
color: #093B60;
text-align: left;
padding: 14px 16px;
font-size: 15px;
font-weight: 700;
white-space: nowrap;
}
.responsive-table td {
padding: 14px 16px;
border-top: 1px solid #e2e8f0;
vertical-align: top;
color: #4E4E4E;
font-size: 15px;
line-height: 24px;
}
.responsive-table tbody tr:nth-child(even) td { background: #FAFCFF; }
/* --- Related Websites ---------------------------------------------------- */
.links-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(6, 53, 122, 0.10);
padding: 44px 48px;
max-width: 1180px;
margin: 0 auto;
}
.links-intro { margin: 0 0 28px; color: #4E4E4E; }
.link-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.link-card { background-color: #F3F9FF; }
.link-card {
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 16px 20px;
background: #F3F9FF;
border: 1px solid #e2e8f0;
border-radius: 10px;
color: #1A1A1A;
font-size: 15px;
font-weight: 600;
line-height: 22px;
text-decoration: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.link-card:hover,
.link-card:focus-visible {
border-color: #093B60;
transform: translateY(-2px);
box-shadow: 0 8px 22px rgba(6, 53, 122, 0.12);
}
.link-card .btn-arrow { flex: 0 0 auto; }
.link-card-note {
display: block;
margin-top: 2px;
font-size: 13px;
font-weight: 400;
font-style: normal;
color: #4E4E4E;
}
/* --- Nested contact sections inside a branch card ------------------------ */
.sub-list { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.sub-card {
background: #F3F9FF;
border: 1px solid #e2e8f0;
border-radius: 10px;
overflow: hidden;
}
.sub-card > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 14px 18px;
/* 9px, not the card's 10px: .sub-card's 1px border shrinks the radius the
overflow: hidden actually clips to. At 10px the hover ring's corners get
shaved off. */
border-radius: 9px;
transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.sub-card[open] > summary { border-radius: 9px 9px 0 0; }
.sub-card > summary::-webkit-details-marker { display: none; }
/* inset, not an outer ring: .sub-card sets overflow: hidden, which would
clip a normal box-shadow away entirely. */
.sub-card > summary:hover {
background: #E8F2FB;
box-shadow: inset 0 0 0 1px rgba(151, 199, 252, 0.85);
}
/* Closed only, same reasoning as .branch-card[open]: once it is open the
hover reads as a state change rather than an affordance. */
.sub-card[open] > summary:hover {
background: transparent;
box-shadow: none;
}
@media (prefers-reduced-motion: reduce) {
.sub-card > summary { transition: none; }
}
.sub-card > summary:focus-visible { outline: 3px solid #97C7FC; outline-offset: -3px; border-radius: 6px; }
.sub-heading {
margin: 0;
font-size: 16px;
line-height: 28px;
font-weight: 700;
color: #093B60;
}
.sub-body { padding: 0 18px 18px; }
.sub-duties {
margin: 14px 0 0;
padding-left: 20px;
color: #4E4E4E;
}
.sub-duties li { margin-bottom: 6px; }
.sub-note { margin: 14px 0 0; color: #4E4E4E; }
/* --- Field auditor directory (modal) ------------------------------------ */
.auditor-group { margin-bottom: 26px; }
.auditor-group:last-child { margin-bottom: 0; }
.auditor-group h3 {
margin: 0 0 12px;
font-size: 18px;
line-height: 30px;
font-weight: 700;
color: #1A1A1A;
}
.auditor-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
/* Same LKAM-8433 fix as .contact-text/.contact-val — same Firefox mid-word-
break risk here, not yet reported but same root cause. */
.auditor-grid li {
padding: 14px 16px;
background: #F3F9FF;
border: 1px solid #e2e8f0;
border-radius: 8px;
font-size: 14px;
line-height: 22px;
color: #4E4E4E;
min-width: 0;
}
.auditor-grid a[href^="mailto:"] { overflow-wrap: break-word; word-break: normal; }
.auditor-name {
display: block;
font-weight: 700;
color: #1A1A1A;
}
.auditor-map-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin-left: 28px;
vertical-align: -1px;
border-radius: 4px;
color: #3d84d6;
}
.auditor-map-link svg { width: 17px; height: 17px; }
.auditor-map-link:hover,
.auditor-map-link:focus-visible { background: #DCEBFA; color: #093B60; }
.auditor-map-link:focus-visible { outline: 2px solid #093B60; outline-offset: 1px; }
.alert-banner {
padding: 16px 0;
}
/* Variants are set per-alert in Alerts.xml via type="warning|info". */
.alert-banner--warning p,
.alert-banner--info p { text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
.alert-banner--warning { background: linear-gradient(135deg, #FFF8E6 0%, #FFF3D7 100%); }
.alert-banner--warning .alert-icon,
.alert-banner--warning a { color: #A26016; }
.alert-banner--warning a:hover,
.alert-banner--warning a:focus-visible { background-color: rgba(162, 96, 22, 0.12); }
.alert-banner--info { background: linear-gradient(135deg, #F3F9FF 0%, #E8F2FB 100%); }
.alert-banner--info .alert-icon,
.alert-banner--info a { color: #093B60; }
.alert-banner--info a:hover,
.alert-banner--info a:focus-visible { background-color: rgba(151, 199, 252, 0.5); }
/* Full-width flat strip beneath the gov-bar, not a contained card — reads
like a browser-level notice rather than page content. */
.alert-banner--maintenance {
background: linear-gradient(135deg, #B84A2E 0%, #A8402A 100%);
min-height: 98px;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 8px 0;
}
.alert-banner--maintenance .alert-banner-inner {
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
gap: 2px;
}
@media (max-width: 600px) {
.alert-banner--maintenance .alert-banner-inner {
padding: 14px 24px;
}
}
.alert-banner--maintenance .alert-maintenance-label {
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
font-weight: 700;
font-size: 20px;
color: #ffffff;
}
.alert-banner--maintenance .alert-maintenance-body {
margin: 0;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
font-size: 16px;
font-weight: 500;
color: #ffffff;
}
.alert-maintenance-body a { color: #ffffff; text-decoration: underline; }
.alert-maintenance-body a:hover,
.alert-maintenance-body a:focus-visible { background-color: rgba(255, 255, 255, 0.15); }
.alert-banner-inner {
display: flex;
align-items: flex-start;
gap: 14px;
}
.alert-icon {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 1px;
}
.alert-banner p {
margin: 0;
font-size: 16px;
line-height: 24px;
font-weight: 500;
color: #1A1A1A;
}
.alert-banner a {
font-weight: 600;
text-decoration: underline;
background-color: transparent;
border-radius: 3px;
padding: 1px 3px;
margin: 0 -3px;
transition: background-color 0.2s ease;
}
@media (prefers-reduced-motion: reduce) {
.alert-banner a { transition: none; }
}
/* Standard Kentucky state-site identifier bar, above the site header on
every page, so it's clear this is an official Commonwealth site before
anything else on the page. */
.gov-bar {
background: linear-gradient(115deg, #072241 0%, #0d3a63 48%, #17558e 100%);
color: #ffffff;
padding: 9px 0;
}
.gov-bar-text { font-size: 13px; line-height: 18px; }
.gov-bar-link {
/* 20% larger than the surrounding 13px text. */
font-size: 1.2em;
font-weight: 800;
margin-right: 6px;
color: #ffffff;
border-radius: 3px;
padding: 0 2px;
margin-left: -2px;
/* The underline is always there geometrically; toggling text-decoration
itself doesn't animate at all in any browser (it's an on/off switch,
not an interpolable value) — so instead it's transparent at rest and
fades to visible via a transition on color, which does animate smoothly. */
text-decoration: underline;
text-decoration-color: transparent;
transition: text-decoration-color 0.2s ease;
}
.gov-bar-link:hover,
.gov-bar-link:focus-visible { text-decoration-color: currentColor; }
.gov-bar-link:focus-visible { outline: 2px solid #97C7FC; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.gov-bar-link { transition: none; }
}
.site-header {
background: #ffffff;
border-bottom: 1px solid #e7ebf1;
}
.header-inner {
/* Positioning context for .nav-mega (see .nav-resources below) so the
dropdown anchors to the full header width, not to the narrow Resources
button itself — otherwise a wide panel opening from a button that
isn't near the right edge overflows off-screen. */
position: relative;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 24px;
padding-top: 27px;
padding-bottom: 27px;
flex-wrap: wrap;
}
/* Desktop only (mobile's hamburger-collapsed header stays as-is): ~20% more
breathing room above/below the logo and nav links. */
@media (min-width: 861px) {
.header-inner { padding-top: 32px; padding-bottom: 32px; }
}
.brand-logo {
display: inline-flex;
align-items: center;
text-decoration: none;
}
/* Logo is 115x32 — wordmark only, no descender text — so it sits shorter than
the old lockup did. */
.brand-svg { height: 38px; width: auto; display: block; }
.main-nav {
display: flex;
align-items: center;
gap: 40px;
flex-wrap: wrap;
margin-left: auto;
}
.main-nav a {
position: relative;
color: #1a2b3c;
text-decoration: none;
font-weight: 600;
font-size: 16px;
padding-bottom: 3px;
transition: color 0.2s ease;
}
/* Underline sweeps in from the left, then keeps travelling out to the right on
exit rather than retracting the way it came. The origin flip is instant — only
the scale transitions — which is what sells the one-way motion. */
.main-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: currentColor;
border-radius: 1px;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.main-nav a:hover,
.main-nav a:focus-visible { color: #093B60; }
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
transform: scaleX(1);
transform-origin: left center;
}
/* --- Resources dropdown --------------------------------------------------
Opens on hover, but aria-expanded is driven by redesign.js so keyboard and
touch get the same menu — hover alone would strand both. */
.nav-item { position: relative; }
/* Cancels the rule above just for the Resources dropdown, so .nav-mega's
position: absolute bubbles up to .header-inner (full header width) instead
of this element (only as wide as the "Resources" button) — see .nav-mega. */
.nav-resources { position: static; }
.nav-dropdown-btn {
position: relative;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 0 0 3px;
border: none;
background: none;
color: #1a2b3c;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: color 0.2s ease;
}
.nav-dropdown-btn:hover,
.nav-dropdown-btn[aria-expanded="true"] { color: #093B60; }
.nav-dropdown-btn:focus-visible { outline: 3px solid #97C7FC; outline-offset: 3px; border-radius: 6px; }
.nav-caret {
width: 11px;
height: 7px;
flex: 0 0 auto;
transition: transform 0.25s ease;
}
.nav-dropdown-btn[aria-expanded="true"] .nav-caret { transform: rotate(180deg); }
.nav-dropdown {
position: absolute;
top: calc(100% + 14px);
/* Right-aligned: Resources is the last nav item, so opening leftward keeps
the panel on screen. */
right: 0;
z-index: 200;
min-width: 300px;
margin: 0;
padding: 8px;
list-style: none;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 10px;
box-shadow: 0 12px 30px rgba(6, 53, 122, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* A hover bridge across the gap, so the menu doesn't close on the way down. */
.nav-dropdown::before {
content: "";
position: absolute;
top: -14px;
left: 0;
right: 0;
height: 14px;
}
.nav-dropdown-btn[aria-expanded="true"] + .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown a {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 6px;
color: #1A1A1A;
font-size: 15px;
font-weight: 500;
line-height: 22px;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.doc-badge {
flex: none;
padding: 2px 6px;
border-radius: 4px;
background: #E8F2FB;
color: #093B60;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.03em;
line-height: 15px;
}
.nav-dropdown a:hover,
.nav-dropdown a:focus-visible { background: #F3F9FF; color: #093B60; }
/* The sweep belongs to the top-level nav only — on a full-width menu row it
reads as a stray rule rather than an underline. */
.nav-dropdown a::after { content: none; }
@media (prefers-reduced-motion: reduce) {
.nav-dropdown, .nav-caret { transition: none; }
}
/* --- Resources mega-menu ---------------------------------------------------
Same open/close mechanics and hover bridge as .nav-dropdown above, but a
grid of categorized columns instead of one long alphabetical list. */
.nav-mega {
position: absolute;
/* .nav-resources cancels .nav-item's own position: relative (see that
rule), so this positions against .header-inner — "100%" is the bottom
of the whole header bar, not just the button. A small gap here is
enough for a sliver of the hero's navy to show through above the menu. */
top: calc(100% + 10px);
right: 0;
z-index: 200;
display: grid;
grid-template-columns: repeat(5, minmax(172px, 1fr));
gap: 4px 22px;
width: max-content;
max-width: min(1060px, 92vw);
margin: 0;
padding: 32px 24px 20px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
box-shadow: 0 12px 30px rgba(6, 53, 122, 0.16);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
/* Covers the real travel gap between the Resources button and the menu, not
just the 10px visual gap above .nav-mega itself — .nav-mega positions
against .header-inner (see the comment above), so the actual empty space
the cursor crosses also includes the header's own bottom padding
(27-32px). A 14px bridge only covered part of that, so moving from the
button into the menu could cross real empty space partway down and close
the menu before the cursor ever reached it. */
.nav-mega::before {
content: "";
position: absolute;
top: -40px;
left: 0;
right: 0;
height: 40px;
}
.nav-dropdown-btn[aria-expanded="true"] + .nav-mega {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-mega-col ul { list-style: none; margin: 0; padding: 0; }
.nav-mega-heading {
/* margin-top: 0 on every column (not just :first-child) so every heading's
top edge sits on the same grid row, regardless of how many lines the
others wrap to. min-height is sized for the tallest heading here (two
lines, e.g. "Tax Rates & Wage Base") so the border-bottom — the
underline — lands on the same y in every column too, one-line headings
included, instead of hugging shorter text. */
display: flex;
align-items: center;
gap: 7px;
min-height: 40px;
margin: 0 0 4px;
padding: 0 14px 8px;
line-height: 16px;
border-bottom: 1px solid #e2e8f0;
font-size: 12px;
font-weight: 800;
letter-spacing: 0.03em;
text-transform: uppercase;
color: #4E4E4E;
}
.nav-mega-ico { flex: none; width: 15px; height: 15px; color: #6b7f8f; }
.nav-mega a {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 14px;
border-radius: 6px;
color: #1A1A1A;
font-size: 14px;
font-weight: 500;
line-height: 20px;
text-decoration: none;
background-color: rgba(151, 199, 252, 0);
box-shadow: 0 0 0 0 rgba(151, 199, 252, 0);
transition: background-color 0.2s ease, box-shadow 0.2s ease, color 0.15s ease;
}
.nav-mega a:hover,
.nav-mega a:focus-visible {
color: #093B60;
background-color: rgba(151, 199, 252, 0.22);
box-shadow: 0 0 0 1px rgba(151, 199, 252, 0.4);
}
.nav-mega a::after { content: none; }
@media (prefers-reduced-motion: reduce) {
.nav-mega a { transition: none; }
}
.nav-mega-footer {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
margin-top: 6px;
padding-top: 14px;
border-top: 1px solid #e2e8f0;
}
.nav-mega-hint-text { color: #4E4E4E; font-size: 13px; }
.nav-mega-search-hint {
padding: 7px 18px;
border: 1.5px solid #093B60;
border-radius: 100px;
background: none;
color: #093B60;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.nav-mega-search-hint:hover {
background: #093B60;
color: #ffffff;
}
.nav-mega-search-hint:focus-visible { outline: 3px solid #97C7FC; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
.nav-mega { transition: none; }
}
/* --- Site search ----------------------------------------------------------
Same open/close mechanics as the Resources dropdown (aria-expanded driven,
adjacent-sibling CSS), but click/tap only — a search box popping open on
hover would be a constant annoyance. */
.nav-search { margin-left: 4px; }
.nav-search-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: #1a2b3c;
cursor: pointer;
transition: color 0.2s ease, background-color 0.2s ease;
}
.nav-search-btn:hover,
.nav-search-btn[aria-expanded="true"] { color: #093B60; background: #F3F9FF; }
.nav-search-btn:focus-visible { outline: 3px solid #97C7FC; outline-offset: 2px; }
.search-ico { width: 18px; height: 18px; }
.site-search-panel {
position: absolute;
top: calc(100% + 14px);
right: 0;
z-index: 200;
width: min(380px, 88vw);
padding: 14px;
background: #ffffff;
/* Thin/subtle used to blend in when this drops down over the light hero
cards behind it, so it needs a harder edge, not just a shadow, to read
as a distinct layer above whatever's behind it. */
border: 2px solid #093B60;
border-radius: 12px;
box-shadow: 0 20px 45px rgba(4, 28, 56, 0.45);
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}
.nav-search-btn[aria-expanded="true"] + .site-search-panel {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.site-search-form {
display: flex;
align-items: center;
/* Fixed height rather than letting the pill's height derive from the
input's line-height — ties every child (icon, input, close button) to
one known box so centering can't drift a few px with font metrics. */
height: 48px;
gap: 10px;
padding: 0 6px 0 14px;
border: 1.5px solid #cfe0f0;
border-radius: 100px;
background: #F8FBFF;
}
.site-search-form:focus-within { border-color: #093B60; }
.site-search-form .search-ico { flex: none; color: #6b7f8f; }
.site-search-form input[type="search"] {
flex: 1;
min-width: 0;
height: 100%;
padding: 0;
border: none;
background: none;
font: inherit;
font-size: 15px;
line-height: normal;
color: #1A1A1A;
}
.site-search-form input[type="search"]:focus { outline: none; }
.site-search-form input[type="search"]::-webkit-search-cancel-button { display: none; }
.site-search-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
flex: none;
padding: 0;
border: none;
border-radius: 50%;
background: none;
color: #6b7f8f;
cursor: pointer;
}
.site-search-close svg { width: 12px; height: 12px; }
.site-search-close:hover,
.site-search-close:focus-visible { color: #093B60; background: #E8F2FB; }
.site-search-results {
margin: 8px 0 0;
padding: 0 4px;
list-style: none;
max-height: 340px;
overflow-y: auto;
}
/* No query typed yet means no children — collapse the gap this would
otherwise leave below the search box before there's anything to show. */
.site-search-results:empty { margin-top: 0; }
.site-search-results li + li { margin-top: 2px; }
.site-search-results a {
display: flex;
flex-direction: column;
gap: 2px;
padding: 9px 12px;
border-radius: 8px;
text-decoration: none;
color: #1A1A1A;
}
.site-search-results a:hover { background: #F3F9FF; }
/* These links live inside .main-nav (so the search box can also sit inline
in the mobile menu), which means they'd otherwise inherit its underline
sweep on hover. The light blue background alone is the intended effect
here, so that's switched off. */
.site-search-results a::after { content: none; }
/* Negative offset draws the ring inside the link's own box instead of past its
edge. overflow-y: auto here forces overflow-x to compute as auto too (per
spec, when one axis scrolls the other can't stay visible), so any ring drawn
outside the link's box was getting clipped by the scroll container. */
.site-search-results a:focus-visible {
background: #F3F9FF;
outline: 3px solid #093B60;
outline-offset: -3px;
}
.site-search-results .result-title { font-size: 14px; font-weight: 700; color: #093B60; }
.site-search-results .result-title mark {
background: #FFF3D7;
color: inherit;
border-radius: 2px;
}
.site-search-results .result-hint { font-size: 12px; color: #4E4E4E; }
.site-search-empty { margin: 10px 4px 2px; font-size: 13px; color: #4E4E4E; }
@media (prefers-reduced-motion: reduce) {
.site-search-panel { transition: none; }
}
/* --- Search results page --------------------------------------------------- */
.search-results-summary { color: #4E4E4E; margin: 0 0 4px; }
.search-results-summary #searchQueryText { font-weight: 700; color: #1A1A1A; }
.search-results-count { color: #4E4E4E; font-size: 14px; margin: 0 0 20px; }
.search-results-list { list-style: none; margin: 0; padding: 0; }
.search-results-list:focus { outline: none; }
.search-results-list li + li { margin-top: 10px; }
.search-results-list a {
display: block;
/* Negative margin equal to the horizontal padding keeps the card's
hit area and border wide, but the text inside lands flush with the
heading and count above instead of sitting 20px further right. */
margin: 0 -20px;
padding: 16px 20px;
border: 1px solid #e2e8f0;
border-radius: 10px;
text-decoration: none;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-results-list a:hover,
.search-results-list a:focus-visible {
border-color: #093B60;
box-shadow: 0 6px 18px rgba(6, 53, 122, 0.10);
}
.search-results-list .result-title { display: block; font-size: 17px; font-weight: 700; color: #093B60; margin-bottom: 4px; }
.search-results-list .result-title mark { background: #FFF3D7; color: inherit; border-radius: 2px; }
.search-results-list .result-hint { display: block; font-size: 14px; color: #4E4E4E; }
.search-results-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 28px;
}
.search-page-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
padding: 0;
border: 1px solid #e2e8f0;
border-radius: 50%;
background: #ffffff;
color: #093B60;
cursor: pointer;
}
.search-page-btn svg { width: 12px; height: 12px; }
.search-page-btn:hover:not(:disabled) { background: #F3F9FF; border-color: #093B60; }
.search-page-btn:focus-visible { outline: 3px solid #97C7FC; outline-offset: 2px; }
.search-page-btn:disabled { color: #b7c2cd; cursor: default; }
.search-page-number {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 36px;
height: 36px;
padding: 0 6px;
border: 1px solid transparent;
border-radius: 50%;
background: none;
color: #093B60;
font-size: 14px;
font-weight: 600;
line-height: 1;
cursor: pointer;
}
.search-page-number:hover { background: #F3F9FF; }
.search-page-number:focus-visible { outline: 3px solid #97C7FC; outline-offset: 2px; }
.search-page-number.is-current {
background: #093B60;
border-color: #093B60;
color: #ffffff;
cursor: default;
}
.skip-link {
position: absolute;
left: -9999px;
top: 0;
background: #093B60;
color: #ffffff;
padding: 10px 16px;
border-radius: 0 0 8px 0;
z-index: 1000;
}
.skip-link:focus { left: 0; }
main:focus { outline: none; }
/* [data-autofocus] headings (Choose a New Password, Security Questions,
Your New KEIN/Activation Code, etc.) get focus() called on them via
initPanelFocus() in redesign.js purely so screen readers announce the new
panel — they're tabindex="-1", never reachable by an actual Tab press, so
suppressing the visible ring doesn't affect real keyboard navigation. Left
as-is it read as an odd ring around a plain, non-interactive heading. */
[data-autofocus]:focus-visible { outline: none; }
/* The checkbox itself (.nav-toggle) drives the CSS-only mobile menu via
:checked — .nav-toggle-btn below is its visible label/hamburger icon. The
raw input had no rule of its own anywhere, so it rendered as a bare native
checkbox in the header at every width (visible next to the logo even on
desktop) instead of being hidden behind its label. Hidden the same way
.sr-only hides content elsewhere: kept in the accessibility tree and
focusable, just not rendered as a visible box. */
.nav-toggle {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.nav-toggle-btn {
display: none;
position: relative;
width: 44px;
height: 44px;
padding: 10px;
border: none;
background: transparent;
border-radius: 8px;
cursor: pointer;
}
.nav-toggle-btn:focus-visible { outline: 3px solid #97C7FC; outline-offset: 3px; border-radius: 6px; }
.nav-toggle-btn .bar {
position: absolute;
left: 10px;
width: 24px;
height: 3px;
background: #093B60;
border-radius: 2px;
transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.18s ease;
}
.nav-toggle-btn .bar:nth-child(1) { top: 14px; }
.nav-toggle-btn .bar:nth-child(2) { top: 21px; }
.nav-toggle-btn .bar:nth-child(3) { top: 28px; }
.nav-toggle-btn[aria-expanded="true"] .bar:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
.nav-toggle-btn[aria-expanded="true"] .bar:nth-child(2) {
opacity: 0;
transform: scaleX(0.4);
}
.nav-toggle-btn[aria-expanded="true"] .bar:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
.nav-toggle-btn .bar { transition: none; }
}
.hero {
background: linear-gradient(180deg, #F3F9FF 0%, #E8F2FB 100%);
padding: 56px 0 64px;
}
/* Double breathing room above/below the white login card specifically
(Obtain Activation Code, Forgot/Change Password, Wage Audit), without
touching .hero on the resource pages, which don't have a .login-card.
Desktop only: doubled top/bottom padding reads as a lot of empty space
on a phone screen, so mobile keeps the original .hero padding. */
@media (min-width: 861px) {
.hero:has(.login-card),
/* Result screens (Password Reset, Password Changed, KEIN/Activation
Code result) sit right after a .login-card step in the same flow —
same padding so the flow doesn't visibly shrink on its last screen. */
.hero:has(.result-card),
/* Acknowledgment.aspx uses its own .ack-section rather than .hero (it's
not part of the .hero:has() selector above at all), but it's the same
kind of single white card in the middle of this same login flow, so it
gets the same breathing room instead of the plain default padding.
section.ack-section (not just .ack-section) so this reliably beats the
plain .ack-section base rule further down the file — same specificity
otherwise means source order decides, and the base rule sits later. */
section.ack-section {
padding: 112px 0 128px;
}
/* Same idea as the login card above, but dialed back 40% (112/128 * 0.6)
since the resource pages read as too much dead space at the full amount. */
.hero:has(.doc-card),
.hero:has(.links-card) {
padding: 67px 0 77px;
}
}
.login-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(6, 53, 122, 0.10);
padding: 44px 48px;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 40px;
align-items: start;
max-width: 900px;
margin: 0 auto;
}
.login-intro h1 {
margin: 0 0 16px;
font-size: 30px;
font-weight: 700;
color: #1A1A1A;
line-height: 42px;
}
.login-intro p { margin: 0 0 26px; color: #4E4E4E; }
/* align-items keeps each link only as wide as its text — without it the links
stretch to the column width and the hover highlight paints the whole row. */
.login-help { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.login-help a { text-decoration: underline; font-size: 15px; }
.login-divider { width: 1px; background: #e2e8f0; align-self: stretch; }
.login-form .field { margin-bottom: 20px; }
.login-form label {
display: block;
font-weight: 700;
margin-bottom: 8px;
color: #1A1A1A;
}
.input {
width: 100%;
padding: 12px 14px;
border: 1px solid #cfd9e6;
border-radius: 8px;
background: #F3F9FF;
/* 16px minimum: iOS Safari zooms the page when a smaller field takes focus. */
font-size: 16px;
color: #1A1A1A;
}
.input:focus {
outline: none;
border-color: #093B60;
box-shadow: 0 0 0 3px rgba(9, 59, 96, 0.12);
background: #ffffff;
}
.input::placeholder { color: #5c6b80; opacity: 1; }
.btn-login {
display: inline-block;
width: 100%;
padding: 14px 28px;
min-height: 44px;
background: #093B60;
color: #ffffff;
border: none;
border-radius: 88px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.btn-login:hover {
background: #002459;
transform: scale(1.04);
box-shadow: 0 6px 16px rgba(6, 53, 122, 0.25);
}
.btn-login:focus-visible,
.btn-cancel:focus-visible,
.kuip-btn:focus-visible,
.brand-logo:focus-visible {
outline: 3px solid #97C7FC;
outline-offset: 3px;
border-radius: 6px;
}
/* Required-field marker. Decorative only — aria-required on the input is what
actually conveys the state, so the glyph is aria-hidden in the markup. */
.req { color: #c0392b; font-weight: 700; }
.alert-danger { color: #c0392b; font-weight: 600; }
.alert-required { color: #c0392b; font-size: 13px; }
.login-error { margin: 0 0 6px; min-height: 0; }
.login-note {
max-width: 760px;
margin: 26px auto 0;
background: #F3F9FF;
color: #3a4a63;
border-radius: 10px;
padding: 16px 22px;
font-size: 14px;
}
.login-note a { text-decoration: underline; }
.login-note ul { margin: 4px 0 0; padding-left: 20px; }
.login-note li { margin-bottom: 4px; }
/* Password-reuse warning on ForgotYourPassword.aspx's reset step: reuses
.result-alert (same red card + warning-triangle icon as the "don't share
your KEIN" notice on ObtainKEIN.aspx's result screen) instead of plain red
text, for the same warning treatment everywhere it appears. Overrides
.result-alert's own fit-content/centered sizing to span the full card
width like the .login-note rules box above it, and spans the grid the
same way .login-card .login-note does below. */
.login-note-warning {
width: auto;
max-width: none;
margin: 14px 0 0;
}
.login-card .login-note-warning { grid-column: 1 / -1; }
/* KEIN pill on ForgotYourPassword.aspx's reset step, so the account being
reset stands out from the surrounding paragraph text instead of reading as
just another sentence. */
.kein-pill {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 4px 0 14px;
padding: 7px 16px;
border-radius: 88px;
background: #E8F2FB;
color: #093B60;
font-size: 15px;
font-weight: 700;
}
.kein-pill-label {
font-size: 11px;
font-weight: 800;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #3d84d6;
}
.login-card .login-note {
grid-column: 1 / -1;
max-width: none;
margin: 0;
background: #F3F9FF;
}
.kuip { background: #ffffff; padding: 60px 0; }
.kuip-card {
/* KUIPInfoCard.svg supplies the gradient + decorative circles; the linear-gradient
is a fallback color in case the asset fails to load. Path is relative to this
stylesheet's location (~/Redesign/redesign.css). */
background: linear-gradient(135deg, #17548c 0%, #0f3c68 100%);
background-image: url("../Images/KUIPInfoCard.svg"), linear-gradient(135deg, #17548c 0%, #0f3c68 100%);
background-size: cover, cover;
background-position: center, center;
background-repeat: no-repeat, no-repeat;
border-radius: 16px;
padding: 48px 52px;
color: #ffffff;
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 44px;
align-items: center;
}
.kuip-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.14);
color: #dbe8f6;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
font-weight: 700;
padding: 7px 14px;
border-radius: 6px;
margin-bottom: 20px;
}
.kuip-copy h2 { margin: 0 0 16px; font-size: 30px; font-weight: 700; line-height: 1.15; }
.kuip-copy h2 em { font-style: italic; }
.kuip-copy p { margin: 0 0 26px; color: #d6e3f1; }
.kuip-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.kuip-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #ffffff;
color: #093B60;
text-decoration: none;
font-size: 15px;
font-weight: 600;
padding: 14px 28px;
min-height: 44px;
border-radius: 88px;
}
.kuip-btn:hover { background: #eaf2fb; }
/* Arrow.svg — shared chevron for any "go here next" link. The asset's stroke is
#093B60, so it belongs on light backgrounds only. */
.btn-arrow {
width: 11px;
height: 11px;
flex: 0 0 auto;
display: block;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.kuip-btn:hover .btn-arrow,
.kuip-btn:focus-visible .btn-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.btn-arrow { transition: none; }
}
.kuip-features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.kuip-features li {
background: rgba(255, 255, 255, 0.10);
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 10px;
padding: 16px 18px;
display: flex;
flex-direction: row;
align-items: center;
gap: 14px;
}
.kuip-feature-ico {
flex: 0 0 auto;
width: 44px;
height: 44px;
display: block;
}
.kuip-feature-text { display: flex; flex-direction: column; gap: 3px; }
.kuip-feature-title { font-weight: 700; font-size: 16px; }
.kuip-feature-desc { color: #cfddee; font-size: 14px; }
.site-footer {
background: linear-gradient(115deg, #072241 0%, #0d3a63 48%, #17558e 100%);
color: #ffffff;
padding: 26px 0;
}
.footer-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
}
.footer-left { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.footer-teamky { height: 50px; width: auto; filter: brightness(0) invert(1); }
.footer-logo { width: 120px; height: auto; }
/* Same 50px logo reads noticeably bigger here than on the public site, since
there it sits next to the wider Unbridled Spirit logo, which gives it a
size reference and fills the row — without that neighbor, it needs to be
smaller on its own to match how it visually reads on ui.ky.gov. */
.site-footer--internal .footer-teamky { height: 34px; }
.footer-copy {
display: flex;
flex-direction: column;
/* Without this the links stretch to the column width and the hover
highlight paints well past the end of the text. */
align-items: flex-start;
font-size: 13px;
color: #cdd7e6;
border-left: 1px solid rgba(255, 255, 255, 0.25);
padding-left: 18px;
}
.footer-copy a { color: #cdd7e6; }
.footer-links { list-style: none; display: flex; gap: 26px; margin: 0; padding: 0; }
.footer-links a {
position: relative;
color: #ffffff;
text-decoration: none;
font-size: 14px;
padding-bottom: 3px;
}
.footer-links a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
background: currentColor;
border-radius: 1px;
transform: scaleX(0);
transform-origin: right center;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.footer-links a:hover::after,
.footer-links a:focus-visible::after {
transform: scaleX(1);
transform-origin: left center;
}
.landing-hero {
background: linear-gradient(180deg, #F3F9FF 0%, #E8F2FB 100%);
padding: 48px 0;
}
.landing-card {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 18px 45px rgba(6, 53, 122, 0.10);
padding: 40px 44px;
max-width: 1000px;
margin: 0 auto;
}
.intro-grid { display: flex; gap: 30px; align-items: flex-start; }
.intro-seal { width: 150px; height: auto; flex: 0 0 auto; border-radius: 6px; }
.intro-card h1 {
margin: 0 0 14px;
font-size: 28px;
font-weight: 700;
color: #1A1A1A;
line-height: 1.2;
}
.intro-lead { font-weight: 700; margin: 0 0 10px; color: #1A1A1A; }
.actions-list { margin: 0; padding-left: 20px; }
.actions-list li { margin-bottom: 8px; color: #4E4E4E; }
.callout {
border-radius: 10px;
padding: 16px 20px;
margin-top: 20px;
font-size: 15px;
line-height: 1.55;
}
.callout-info { background: #e8f1fb; border-left: 4px solid #17548c; color: #1d3550; }
.callout-warn { background: #fbf3e3; border-left: 4px solid #d99a2b; color: #5c4a26; }
/* Same left-accent-stripe technique as .kein-examples li — a clipped
pseudo-element rather than a plain border-left, so the stripe's outer
corner rounds with the card while its inner edge stays a straight line. */
.callout-accent {
position: relative;
overflow: hidden;
padding-left: 30px;
background: #F3F9FF;
border: 1px solid #e2e8f0;
color: #4E4E4E;
}
.callout-accent::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 10px;
background: #97C7FC;
pointer-events: none;
}
.callout a { text-decoration: underline; }
.lp-tint { background: #F3F9FF; padding: 56px 0; }
.lp-plain { background: #ffffff; padding: 56px 0; }
/* Two intro columns (Tax / Benefits) split by a vertical rule, with the
branch cards running full width underneath. gap stays 0 so the rule sits
centred in one shared channel rather than gap + padding stacking up. */
.contact-intro {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: start;
margin-bottom: 46px;
}
.contact-intro-col:first-child { padding-right: 48px; }
.contact-intro-col + .contact-intro-col {
padding-left: 48px;
border-left: 1px solid #DCEBFA;
}
.contact-intro-title {
margin: 16px 0 26px;
font-size: 19px;
line-height: 28px;
font-weight: 500;
color: #4E4E4E;
}
/* Kept out of the flow entirely (not display: none) so