@charset "UTF-8"; /* * Styles for the pages a visitor sees before signing in: the landing page and the * account forms (login, register, password recovery/reset, registration confirmation). * * Everything here is prefixed with "bba-" and only applies inside the public shell, so * the signed-in application - which is styled by Bootstrap + sb-admin-2 - is untouched. * * The colours are the ones already compiled into the Bootstrap theme (see the :root * block of css/bootstrap.min.css). They are repeated as --bba-* variables so this file * can be read on its own, and so tints can be derived without a Sass build. */ :root { --bba-teal: #159fa7; --bba-teal-dark: #0f7c82; --bba-teal-darker: #0a5c60; --bba-mustard: #ffc802; --bba-brown: #49332a; --bba-blush: #e2cac1; --bba-sage: #afbf97; --bba-cream: #fbf7f2; --bba-cream-deep: #f4ece3; --bba-ink: #2f231d; --bba-muted: #6f6259; --bba-radius: 1rem; --bba-radius-lg: 1.75rem; --bba-shadow-sm: 0 2px 6px rgba(73, 51, 42, .06); --bba-shadow: 0 12px 32px -12px rgba(73, 51, 42, .22); --bba-shadow-lg: 0 28px 60px -24px rgba(73, 51, 42, .35); } /* ------------------------------------------------------------------ shell */ /* * Added to while a public page is shown. The signed-in app keeps the grey * sb-admin-2 background; the public pages get the warm paper colour instead. */ body.bba-public { background-color: var(--bba-cream); color: var(--bba-ink); } /* * #content carries "p-2" for the application pages. The landing page draws * full-bleed bands, so the padding has to go while a public page is mounted. */ body.bba-public #content.p-2 { padding: 0 !important; } /* * sb-admin-2 puts overflow-x:hidden on the content wrapper, which turns it into a * scroll container and stops the sticky top bar from sticking. "clip" hides the same * overflow without creating one; browsers that do not know it fall back to visible, * which is safe here because every full-bleed band clips itself. */ body.bba-public #wrapper #content-wrapper { overflow-x: visible; overflow-x: clip; } .bba-public-page { display: block; } /* Reusable band paddings. */ .bba-section { padding: 5rem 0; } @media (max-width: 767.98px) { .bba-section { padding: 3.25rem 0; } } .bba-section-cream { background-color: var(--bba-cream-deep); } .bba-section-white { background-color: #fff; } .bba-eyebrow { display: inline-block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bba-teal-dark); margin-bottom: .75rem; } .bba-title { font-weight: 700; letter-spacing: -.02em; line-height: 1.15; color: var(--bba-brown); } .bba-title-xl { font-size: clamp(2.25rem, 1.2rem + 3.4vw, 3.75rem); } .bba-title-lg { font-size: clamp(1.75rem, 1.1rem + 2vw, 2.5rem); } .bba-lead { font-size: clamp(1rem, .95rem + .35vw, 1.25rem); line-height: 1.65; color: var(--bba-muted); } /* * Mustard marker behind a word of the headline. Drawn as a background gradient * rather than a border so it sits *behind* the descenders, like a highlighter. */ .bba-marker { background-image: linear-gradient(180deg, transparent 62%, rgba(255, 200, 2, .55) 62%); padding: 0 .12em; } /* ------------------------------------------------------------------ buttons */ .bba-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.65rem; border: 2px solid transparent; border-radius: 999px; font-weight: 700; font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; } .bba-btn:hover, .bba-btn:focus { text-decoration: none; transform: translateY(-2px); } .bba-btn:focus-visible { outline: 3px solid var(--bba-mustard); outline-offset: 3px; } .bba-btn-primary { background-color: var(--bba-teal); border-color: var(--bba-teal); color: #fff; box-shadow: 0 10px 24px -12px rgba(21, 159, 167, .95); } .bba-btn-primary:hover, .bba-btn-primary:focus { background-color: var(--bba-teal-dark); border-color: var(--bba-teal-dark); color: #fff; } .bba-btn-ghost { background-color: transparent; border-color: rgba(73, 51, 42, .25); color: var(--bba-brown); } .bba-btn-ghost:hover, .bba-btn-ghost:focus { border-color: var(--bba-brown); background-color: rgba(73, 51, 42, .05); color: var(--bba-brown); } .bba-btn-light { background-color: #fff; border-color: #fff; color: var(--bba-teal-dark); box-shadow: var(--bba-shadow); } .bba-btn-light:hover, .bba-btn-light:focus { background-color: var(--bba-cream); border-color: var(--bba-cream); color: var(--bba-teal-darker); } .bba-btn-outline-light { background-color: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; } .bba-btn-outline-light:hover, .bba-btn-outline-light:focus { background-color: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; } .bba-btn-block { width: 100%; } /* ------------------------------------------------------------------ top bar */ .bba-topbar { position: sticky; top: 0; z-index: 1030; background-color: rgba(251, 247, 242, .88); -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid rgba(73, 51, 42, .08); padding: .65rem 0; } .bba-brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; color: var(--bba-brown); text-decoration: none; } .bba-brand:hover, .bba-brand:focus { color: var(--bba-teal-dark); text-decoration: none; } .bba-brand img { width: 34px; height: 34px; } .bba-topnav { display: flex; align-items: center; gap: .35rem; list-style: none; margin: 0; padding: 0; } .bba-topnav a { display: block; padding: .5rem .85rem; border-radius: 999px; font-weight: 600; font-size: .95rem; color: var(--bba-muted); text-decoration: none; } .bba-topnav a:hover, .bba-topnav a:focus { color: var(--bba-brown); background-color: rgba(73, 51, 42, .06); text-decoration: none; } /* Compact pill button used inside the bar, where the full .bba-btn is too tall. */ .bba-btn-sm { padding: .5rem 1.15rem; font-size: .92rem; } /* Language chooser. Bootstrap 4's JS drives the dropdown, hence data-toggle. */ .bba-lang-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; border: 1px solid rgba(73, 51, 42, .18); border-radius: 999px; background: transparent; font-weight: 600; font-size: .92rem; color: var(--bba-brown); } .bba-lang-toggle:hover, .bba-lang-toggle:focus { background-color: rgba(73, 51, 42, .05); color: var(--bba-brown); text-decoration: none; } .bba-lang-menu { min-width: 11rem; border: 1px solid rgba(73, 51, 42, .1); border-radius: .85rem; box-shadow: var(--bba-shadow); padding: .4rem; } .bba-lang-menu .dropdown-item { border-radius: .55rem; padding: .5rem .75rem; font-weight: 600; color: var(--bba-brown); } .bba-lang-menu .dropdown-item:hover, .bba-lang-menu .dropdown-item:focus { background-color: var(--bba-cream-deep); color: var(--bba-teal-dark); } .bba-lang-menu .dropdown-item.bba-lang-current { background-color: var(--bba-teal); color: #fff; } /* ------------------------------------------------------------------ hero */ .bba-hero { position: relative; overflow: hidden; padding: 4.5rem 0 5rem; background: radial-gradient(60rem 32rem at 12% -10%, rgba(21, 159, 167, .13), transparent 60%), radial-gradient(45rem 30rem at 92% 8%, rgba(226, 202, 193, .55), transparent 62%), linear-gradient(180deg, var(--bba-cream) 0%, var(--bba-cream-deep) 100%); } @media (max-width: 767.98px) { .bba-hero { padding: 2.75rem 0 3rem; text-align: center; } } .bba-hero-art { width: 100%; max-width: 34rem; filter: drop-shadow(0 24px 40px rgba(73, 51, 42, .16)); } .bba-hero-note { font-size: .9rem; color: var(--bba-muted); } .bba-hero-note i { color: var(--bba-sage); } /* Footnote naming the catalogues the book lookup queries. */ .bba-sources { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.75rem; list-style: none; margin: 2.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid rgba(73, 51, 42, .12); font-size: .875rem; color: rgba(73, 51, 42, .6); } .bba-sources i { color: var(--bba-teal); } @media (max-width: 767.98px) { .bba-sources { justify-content: center; } } /* ------------------------------------------------------------------ feature cards */ .bba-card { height: 100%; padding: 1.85rem; background-color: #fff; border: 1px solid rgba(73, 51, 42, .08); border-radius: var(--bba-radius); box-shadow: var(--bba-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .bba-card:hover { transform: translateY(-4px); border-color: rgba(21, 159, 167, .35); box-shadow: var(--bba-shadow); } .bba-card h3 { font-size: 1.15rem; font-weight: 700; color: var(--bba-brown); margin: 1.1rem 0 .5rem; } .bba-card p { margin: 0; color: var(--bba-muted); line-height: 1.6; } .bba-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 3.25rem; height: 3.25rem; border-radius: .9rem; font-size: 1.35rem; } .bba-icon-teal { background-color: rgba(21, 159, 167, .14); color: var(--bba-teal-dark); } .bba-icon-mustard { background-color: rgba(255, 200, 2, .22); color: #a37c00; } .bba-icon-blush { background-color: rgba(226, 202, 193, .45); color: #9a6b58; } .bba-icon-sage { background-color: rgba(175, 191, 151, .35); color: #5f7043; } /* ------------------------------------------------------------------ spotlight rows */ .bba-spotlight-art { width: 100%; max-width: 30rem; filter: drop-shadow(0 18px 34px rgba(73, 51, 42, .14)); } .bba-checklist { list-style: none; margin: 1.5rem 0 0; padding: 0; } .bba-checklist li { position: relative; padding-left: 2rem; margin-bottom: .85rem; color: var(--bba-muted); line-height: 1.6; } .bba-checklist li::before { content: "\f00c"; /* Font Awesome 5 check */ font-family: "Font Awesome 5 Free", "Font Awesome 5 Pro"; font-weight: 900; position: absolute; left: 0; top: .1rem; font-size: .8rem; color: var(--bba-teal); } /* ------------------------------------------------------------------ steps */ .bba-step { position: relative; height: 100%; padding: 2rem 1.5rem 1.75rem; background-color: #fff; border: 1px solid rgba(73, 51, 42, .08); border-radius: var(--bba-radius); } .bba-step-number { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1rem; border-radius: 50%; background-color: var(--bba-mustard); color: var(--bba-brown); font-weight: 700; font-size: 1.15rem; } .bba-step h3 { font-size: 1.1rem; font-weight: 700; color: var(--bba-brown); margin-bottom: .5rem; } .bba-step p { margin: 0; color: var(--bba-muted); line-height: 1.6; } /* ------------------------------------------------------------------ closing call to action */ .bba-cta { position: relative; overflow: hidden; padding: 4.5rem 0; background: linear-gradient(135deg, var(--bba-teal) 0%, var(--bba-teal-darker) 100%); color: #fff; } .bba-cta::after { content: ""; position: absolute; inset: 0; background: url("../img/pattern-books.svg") repeat; background-size: 240px; opacity: .18; pointer-events: none; } .bba-cta > * { position: relative; z-index: 1; } .bba-cta h2 { color: #fff; } .bba-cta p { color: rgba(255, 255, 255, .88); } /* ------------------------------------------------------------------ footer */ .bba-footer { background-color: var(--bba-brown); color: rgba(255, 255, 255, .72); padding: 3.5rem 0 1.75rem; } .bba-footer a { color: rgba(255, 255, 255, .78); text-decoration: none; } .bba-footer a:hover, .bba-footer a:focus { color: #fff; text-decoration: underline; } .bba-footer .bba-brand { color: #fff; } .bba-footer h4 { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .55); margin-bottom: 1rem; } .bba-footer ul { list-style: none; margin: 0; padding: 0; line-height: 2; } .bba-footer-bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .875rem; color: rgba(255, 255, 255, .55); } /* ------------------------------------------------------------------ account pages */ /* * Shared shell for login / register / password pages: a card centred in the * remaining viewport height, on the same warm background as the landing page. */ .bba-auth { display: flex; align-items: center; min-height: calc(100vh - 20rem); padding: 3rem 0; background: radial-gradient(48rem 26rem at 8% 0%, rgba(21, 159, 167, .1), transparent 60%), radial-gradient(42rem 26rem at 96% 100%, rgba(226, 202, 193, .5), transparent 62%); } .bba-auth-card { overflow: hidden; background-color: #fff; border-radius: var(--bba-radius-lg); box-shadow: var(--bba-shadow-lg); } .bba-auth-body { padding: 3rem; } @media (max-width: 575.98px) { .bba-auth-body { padding: 2rem 1.5rem; } } .bba-auth-title { font-size: 1.65rem; font-weight: 700; color: var(--bba-brown); margin-bottom: .35rem; } .bba-auth-subtitle { color: var(--bba-muted); margin-bottom: 2rem; } /* * The decorative half of the login / register card. The selector is qualified with * .bba-auth-card on purpose: the aside is itself the grid column, and the row it sits * in carries "no-gutters", whose `.no-gutters > [class*=col-] { padding: 0 }` would * otherwise win on specificity and flatten the padding to nothing. */ .bba-auth-card .bba-auth-aside { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 3rem; background: linear-gradient(150deg, var(--bba-teal) 0%, var(--bba-teal-darker) 100%); color: #fff; } .bba-auth-aside::before { content: ""; position: absolute; inset: 0; background: url("../img/pattern-books.svg") repeat; background-size: 220px; opacity: .16; } .bba-auth-aside > * { position: relative; z-index: 1; } .bba-auth-aside .bba-brand { color: #fff; } /* Serif, because the aside is the one place on the page that may sound like a book. */ .bba-auth-tagline { font-family: Georgia, "Times New Roman", serif; font-size: 1.6rem; line-height: 1.4; margin: 2.5rem 0 0; } .bba-auth-points { list-style: none; margin: 2.25rem 0 0; padding: 0; } .bba-auth-points li { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .9rem; font-size: .95rem; color: rgba(255, 255, 255, .92); } .bba-auth-points i { margin-top: .2rem; color: var(--bba-mustard); } /* Form controls on the public pages: taller, rounder, teal focus ring. */ .bba-auth .form-control, .bba-auth .input-group-text { border-radius: .75rem; border-color: rgba(73, 51, 42, .18); padding: .75rem 1rem; font-size: 1rem; } .bba-auth .form-control:focus { border-color: var(--bba-teal); box-shadow: 0 0 0 .2rem rgba(21, 159, 167, .18); } .bba-auth .input-group > .form-control:not(:last-child), .bba-auth .input-group > .input-group-prepend > .input-group-text { border-top-right-radius: 0; border-bottom-right-radius: 0; } .bba-auth .input-group > .form-control:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; } .bba-auth-label { display: block; margin-bottom: .4rem; font-size: .85rem; font-weight: 700; letter-spacing: .02em; color: var(--bba-brown); } /* Eye button next to the password field. */ .bba-reveal { border: 1px solid rgba(73, 51, 42, .18); border-left: 0; border-top-right-radius: .75rem; border-bottom-right-radius: .75rem; background-color: #fff; color: var(--bba-muted); padding: 0 1rem; } .bba-reveal:hover, .bba-reveal:focus { color: var(--bba-teal-dark); background-color: var(--bba-cream); } .bba-auth-links { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(73, 51, 42, .1); text-align: center; font-size: .95rem; color: var(--bba-muted); } .bba-auth-links a { font-weight: 700; color: var(--bba-teal-dark); } /* Result pages (registration confirmed, link expired, ...). */ .bba-result-icon { display: inline-flex; align-items: center; justify-content: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; font-size: 2.25rem; margin-bottom: 1.5rem; } .bba-result-icon-success { background-color: rgba(175, 191, 151, .35); color: #5f7043; } .bba-result-icon-danger { background-color: rgba(216, 40, 40, .12); color: #a72020; } /* ------------------------------------------------------------------ misc */ /* * The alerts inside the public cards keep Bootstrap's colours but pick up the * rounder corners used everywhere else on these pages. */ .bba-auth .alert { border: 0; border-radius: .75rem; font-size: .95rem; } /* * Responsive hiding inside the top bar. Bootstrap's own d-* utilities are !important, * which would fight with the d-none that PublicMenu toggles per page, so the bar uses * these two helpers for the breakpoint rules and leaves d-none to mean "not on this * page". The descendant selector keeps them ahead of .bba-topnav's own display. */ @media (max-width: 991.98px) { .bba-topbar .bba-hide-md-down { display: none; } } @media (max-width: 575.98px) { .bba-topbar .bba-hide-xs { display: none; } .bba-topbar .bba-btn-sm { padding: .45rem .9rem; font-size: .85rem; } } @media (prefers-reduced-motion: reduce) { .bba-btn, .bba-card { transition: none; } .bba-btn:hover, .bba-btn:focus, .bba-card:hover { transform: none; } }