/* Front page polish ("Deep"): loaded only by index.html, after MenuFormat.css.
   Keeps the existing look (blue field, white glass cards, gradient pills,
   black clock) and sharpens it. Remove the <link> in index.html to revert. */

/* Background deepens towards the bottom so the white cards stand out */
html body.front-page-body {
    background-color: #a9c7f6 !important;
    background-image: linear-gradient(180deg, #cfe1fd 0%, #adc9f6 45%, #86ade9 100%) !important;
    background-attachment: fixed !important;
}
/* The light "standard" wash still fades in over this for Administrator mode
   (MenuFormat.css: .front-page-body--role-admin .front-page-bg-standard-overlay). */

/* No hard band behind the header or above the footer */
.front-page-body .front-page-header::before {
    background: transparent !important;
    box-shadow: none !important;
}
.front-page-footer {
    background: transparent !important;
    border-top-color: rgba(255, 255, 255, 0.45) !important;
}

/* Soft light behind the clock card so it lifts off the field */
.front-page-container {
    background: radial-gradient(640px 360px at 50% 230px, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 70%) !important;
}

/* Glass edge on the cards: a bright top rim and a deeper blue shadow */
.front-page-hero-layer-outer,
.loginContainer {
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 24px 56px -20px rgba(10, 50, 140, 0.5),
        0 6px 16px rgba(10, 50, 140, 0.12) !important;
}
.front-page-code-form-wrap {
    box-shadow: 0 14px 30px -14px rgba(15, 70, 170, 0.3) !important;
}

/* Nav pills stay white, with a little depth */
.front-page-header-about {
    box-shadow: 0 1px 2px rgba(15, 70, 170, 0.1), 0 4px 10px -6px rgba(15, 70, 170, 0.25) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
.front-page-header-about:hover {
    transform: translateY(-1px);
}

/* Switch, code dots and buttons: one deeper brand gradient, light on the top edge */
.front-page-role-toggle,
.button,
.digit {
    background: linear-gradient(90deg, #0a55c4, #3d8ef0) !important;
}
.front-page-role-toggle,
.front-page-code-submit,
.button {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 10px 22px -10px rgba(15, 90, 200, 0.6) !important;
}

/* Small labels a touch more legible, same colour */
.front-page-header-tagline,
.front-page-beta-tagline,
.front-page-mode-indicator,
.front-page-version {
    opacity: 1 !important;
    color: rgba(25, 76, 142, 0.72) !important;
}
#secSub {
    color: #6f7f96 !important;
}

.front-page-footer-legal-btn {
    background: rgba(255, 255, 255, 0.88) !important;
}