/* ===================================================================== coffee-auth.css — Coffee Zone skin for the standalone vendor auth pages (vendor-views/auth/*: login, first login, forgot password, OTP, reset). Those blades are shared by every theme and render their own with the back-end stylesheet stack, so they never picked up the storefront design. This file is a re-skin layer loaded last: it re-maps the HSPace/Bootstrap components the pages already use onto the theme_coffee palette. No markup, form field, validation hook or script is touched. Fonts are pulled from the theme folder by absolute path (/themes/theme_coffee/... — a symlink created by scripts/link-theme-assets.sh and by the Dockerfile), so the skin also works while the `default` theme is the active storefront theme. ===================================================================== */ @import url("/themes/theme_coffee/public/assets/fonts/coffee-fonts.css"); :root { --cz-espresso: #241A14; --cz-espresso-2: #2F231B; --cz-lacquer: #9E2B25; --cz-lacquer-2: #7D1F1A; --cz-cream: #F7F1E6; --cz-paper: #EFE9DC; --cz-brass: #C9922E; --cz-sand: #E4DACA; --cz-ink-60: rgba(36, 26, 20, .6); --cz-ink-40: rgba(36, 26, 20, .4); --cz-ink-22: rgba(36, 26, 20, .22); --cz-ink-12: rgba(36, 26, 20, .12); --cz-font-display: "Noto Serif Display", Georgia, "Times New Roman", serif; --cz-font-body: "Nunito Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --cz-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; } /* ---------- page ground ---------- */ body.cz-auth { background: var(--cz-cream) !important; font-family: var(--cz-font-body) !important; color: var(--cz-espresso); } /* The template paints a blue "hero" band behind the card and masks it with a white polygon; recolour the band and match the mask to the cream page. */ body.cz-auth .bg-img-hero { background: var(--cz-espresso) !important; background-image: none !important; } /* The stock template cuts the band with a diagonal polygon; a clean horizontal strip suits the brand better, so the mask is dropped and the band shortened. */ body.cz-auth .bg-img-hero figure { display: none !important; } body.cz-auth .__h-32rem { height: 15rem !important; } /* ---------- logo lockup ---------- */ body.cz-auth main > .container > a.d-flex img { height: 46px !important; width: auto; } /* ---------- card ---------- */ body.cz-auth .card { border: 1px solid var(--cz-ink-12) !important; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(36, 26, 20, .14) !important; background: #fff; } body.cz-auth .card-body { padding: 30px 30px 26px; } body.cz-auth .card-footer { background: var(--cz-cream); border-top: 1px solid var(--cz-ink-12); } /* ---------- type ---------- */ body.cz-auth .display-4, body.cz-auth h1.display-4 { font-family: var(--cz-font-display) !important; font-weight: 400 !important; font-size: 34px !important; letter-spacing: -.01em; color: var(--cz-espresso) !important; margin-bottom: 6px; } body.cz-auth .card-body h1.h4, body.cz-auth .card-body .h4 { font-family: var(--cz-font-body) !important; font-size: 14px !important; font-weight: 400 !important; color: var(--cz-ink-60) !important; } body.cz-auth .input-label { font: 600 11px/1.2 var(--cz-font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--cz-ink-60) !important; margin-bottom: 6px; } body.cz-auth .input-label a { text-transform: none; letter-spacing: 0; font-family: var(--cz-font-body); font-weight: 700; font-size: 12px; } body.cz-auth a { color: var(--cz-lacquer); } body.cz-auth a:hover { color: var(--cz-lacquer-2); } body.cz-auth .text-muted { color: var(--cz-ink-60) !important; } /* ---------- fields ---------- */ body.cz-auth .form-control { border: 1px solid var(--cz-ink-22) !important; border-radius: 3px !important; background: #fff; color: var(--cz-espresso); font-family: var(--cz-font-body); min-height: 46px; box-shadow: none !important; } body.cz-auth .form-control:focus { border-color: var(--cz-lacquer) !important; box-shadow: 0 0 0 3px rgba(158, 43, 37, .15) !important; } body.cz-auth .form-control::placeholder { color: var(--cz-ink-40); } body.cz-auth .input-group-merge .input-group-append .input-group-text, body.cz-auth .input-group-text { background: var(--cz-paper); border-color: var(--cz-ink-22); color: var(--cz-ink-60); border-radius: 0 3px 3px 0; } body.cz-auth .custom-control-input:checked ~ .custom-control-label::before { background-color: var(--cz-lacquer) !important; border-color: var(--cz-lacquer) !important; } body.cz-auth .custom-control-label { font-size: 13.5px; } /* captcha row */ body.cz-auth .input-icons img.rounded { border: 1px solid var(--cz-ink-12); border-radius: 3px !important; } body.cz-auth .border-0.form-control { border: 1px solid var(--cz-ink-22) !important; } /* ---------- buttons ---------- */ body.cz-auth .btn { font-family: var(--cz-font-body); font-weight: 700; border-radius: 3px !important; letter-spacing: .01em; } body.cz-auth .btn--primary, body.cz-auth .btn-primary { background: var(--cz-lacquer) !important; border-color: var(--cz-lacquer) !important; color: #fff !important; box-shadow: none !important; } body.cz-auth .btn--primary:hover, body.cz-auth .btn-primary:hover { background: var(--cz-lacquer-2) !important; border-color: var(--cz-lacquer-2) !important; } body.cz-auth .btn-outline-primary { color: var(--cz-espresso) !important; border-color: var(--cz-ink-22) !important; background: transparent !important; } body.cz-auth .btn-outline-primary:hover { background: var(--cz-espresso) !important; border-color: var(--cz-espresso) !important; color: var(--cz-cream) !important; } body.cz-auth .btn-lg { min-height: 48px; font-size: 14.5px; } /* ---------- misc ---------- */ body.cz-auth hr { border-top-color: var(--cz-ink-12); } body.cz-auth .alert-danger { background: rgba(158, 43, 37, .08); color: var(--cz-lacquer); border-color: rgba(158, 43, 37, .3); } body.cz-auth #loader { border-top-color: var(--cz-lacquer) !important; } /* A quiet brand strip under the card, so the page reads as NonLa Port even before the storefront is reached. */ body.cz-auth .cz-auth-note { text-align: center; margin-top: 18px; font: 400 12.5px/1.6 var(--cz-font-body); color: var(--cz-ink-60); } body.cz-auth .cz-auth-note a { font-weight: 700; } @media (max-width: 575.98px) { body.cz-auth .card-body { padding: 22px 18px 20px; } body.cz-auth .display-4, body.cz-auth h1.display-4 { font-size: 27px !important; } body.cz-auth .__h-32rem { height: 17rem !important; } }