Onboarding Portal Builder

General Settings

Customer Name

Added to the footer copyright line, after the year.

Primary Colour

Secondary Colour

Preview

Brand Colours

Primary

Secondary

Footer Copyright

Header Output

Portal head, resource includes, and navigation. The :root theme variables update as you change the builder settings.

<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>{PAGETITLE}</title>

	{PAGERESOURCES}

	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">

	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap" rel="stylesheet">

	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>

	<style>
/* =========================
   Theme Tokens
========================= */
:root {
  /* Typography */
  --font-family-body: "Google Sans", Helvetica, Arial, sans-serif;
  --font-family-heading: "Google Sans", Helvetica, Arial, sans-serif;
  --font-size-h1: 2.5rem;
  --font-size-h2: 2rem;
  --font-size-h3: 1.5rem;
  --font-size-h4: 1.25rem;
  --font-size-h5: 1rem;
  --font-size-h6: 0.875rem;
  --font-size-body: 16px;

  /* Brand + Status */
  --primary-color: #007BFF;
  --secondary-color: #6C757D;
  --warning-color: #EF4444;
  --warning-bg-color: #FEE2E2;
  --progress-color: #4F66C9;
  --progress-bg-color: #E9EDFF;
  --complete-color: #0F9F67;
  --complete-bg-color: #DFF4EA;

  /* Neutrals */
  --text-color: #1e2028;
  --text-muted: #656b7a;
  --text-subtle: #8a90a3;
  --surface-base: #f5f4f0;
  --surface-card: #ffffff;
  --surface-soft: #f7f7f8;
  --border-color: #d9d9dc;
  --border-strong: #d7d8dc;

  /* Layout */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 35px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Buttons */
  --btn-radius: 35px;
  --btn-padding: 10px 22px;
  --btn-primary-color: #444444;
  --btn-primary-bg: #FEFEFE;
  --btn-primary-border: #ECECEC;
  --btn-secondary-color: #444444;
  --btn-secondary-bg: #FEFEFE;
  --btn-secondary-border: #ECECEC;

  /* Tasks */
  --task-card-radius: 10px;
  --task-columns: 4;

  /* Motion + Shadow */
  --motion-duration: 0.2s;
  --motion-ease: cubic-bezier(.2,.7,.3,1);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.08);
  --shadow-md: 0 6px 14px rgba(0, 123, 255, 0.22);
}

/* =========================
   Base
========================= */
body {
  margin: 0;
  background: var(--surface-base);
  color: var(--text-color);
  line-height: 1.5;
  font-family: var(--font-family-body);
  font-size: var(--font-size-body);
  font-weight: 400;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-family: var(--font-family-heading);
  font-weight: 600;
  line-height: 1.4;
}

h1, .h1 { font-size: var(--font-size-h1); }
h2, .h2 { font-size: var(--font-size-h2); }
h3, .h3 { font-size: var(--font-size-h3); }
h4, .h4 { font-size: var(--font-size-h4); }
h5, .h5 { font-size: var(--font-size-h5); }
h6, .h6 { font-size: var(--font-size-h6); }

a,
a:visited,
a:hover {
  color: var(--primary-color);
}

.brand-logo {
  width: 100%;
  max-width: 110px;
  padding: 10px 0;
}

iframe {
  width: 100%;
}

.bi-icon {
  font-size: 40px;
}

/* =========================
   Buttons + Footer
========================= */
.btn,
button,
a.button {
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: inherit;
  text-decoration: none !important;
  padding: var(--btn-padding);
  border-radius: var(--btn-radius) !important;
  transition:
    background-color var(--motion-duration) var(--motion-ease),
    color var(--motion-duration) var(--motion-ease),
    border-color var(--motion-duration) var(--motion-ease),
    box-shadow var(--motion-duration) var(--motion-ease);
}

.btn-primary {
  background: var(--btn-primary-bg) !important;
  color: var(--btn-primary-color) !important;
  border: 1px solid var(--btn-primary-border);
  border-radius: var(--btn-radius);
  font-size: 14px !important;
  margin-left: -5px !important;
}

.btn-secondary {
  background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
  border: 1px solid var(--btn-secondary-border);
  border-radius: var(--btn-radius);
  font-size: 14px !important;
  margin-left: -5px !important;
}

span.completeBtn {
  background: #fefefe;
  border: 1px solid #ececec;
  border-radius: 3rem;
  padding: 10px 14px;
}

footer {
  background: transparent;
  border-top: 1px solid var(--border-color);
  margin-top: auto;
}

footer .copyright,
footer .powered-by {
  font-size: 13px;
  color: var(--text-muted);
}

/* =========================
   Lightbox / Modal Panels
========================= */
.lightboxDiv {
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  z-index: 99999;
  width: 50vw;
  height: 100%;
  max-height: 100vh;
  padding: 40px;
  overflow: auto;
  border-radius: 10px 0 0 10px;
  background: var(--surface-card);
  transform: translateX(0%);
  transition: transform 0.3s ease-out;
}

.lightboxDiv .stepContent,
.lightboxDiv .stepContent .buttons,
.lightboxDivLarge .stepContent .buttons {
  max-height: 100%;
  padding: 25px 0;
}

@keyframes slideIn {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  from { transform: translateX(0); opacity: 1; }
  to { transform: translateX(100%); opacity: 0; }
}

.dialog-backdrop.active {
  display: block;
  animation: slideIn 0.5s ease-out forwards;
}

.dialog-backdrop:not(.active) {
  display: block;
  animation: slideOut 0.5s ease-in forwards;
  animation-fill-mode: forwards;
}

.label {
  display: inline;
}

.pageTitle {
  margin-bottom: 20px;
}

/* =========================
   Shared Icons
========================= */
.dueDate::before,
.date::before {
  content: "\f1e8";
  display: inline-block;
  margin-right: 5px;
  font-family: bootstrap-icons !important;
  font-style: normal;
  font-weight: 400 !important;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: -0.125em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* =========================
   Task Progress Card
========================= */
.task-progress {
  margin-top: 18px;
  margin-bottom: 12px;
}

.progress-card {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 22px 26px;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--surface-soft);
}

.progress-card-ring {
  --progress-value: 0%;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  flex-shrink: 0;
  border-radius: 50%;
  background: conic-gradient(var(--primary-color) var(--progress-value), #d9e0f3 0);
}

.progress-card-ring::before {
  content: "";
  position: absolute;
  inset: 7px;
  border-radius: 50%;
  background: var(--surface-soft);
}

.progress-card-value,
.progress-card-unit {
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: 1;
  color: #1b1f2a;
}

.progress-card-value {
  font-size: 36px;
  font-weight: 700;
}

.progress-card-unit {
  font-size: 13px;
  font-weight: 600;
}

.progress-card-title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--text-color);
}

.progress-card-meta {
  margin: 0;
  font-size: 16px;
  line-height: 1.3;
  color: var(--text-muted);
}

/* =========================
   Task Tabs
========================= */
.task-tabs-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.task-tabs-title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.12;
  color: var(--text-color);
}

.task-tabs-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.task-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

.task-chip-pending {
  color: var(--primary-color);
  background: #e7eeff;
}

.task-chip-overdue {
  color: var(--warning-color);
  background: var(--warning-bg-color);
}

.task-chip-completed {
  color: var(--complete-color);
  background: var(--complete-bg-color);
}

.task-tabs-controls {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  background: #ecebe7;
}

.task-tabs-tab {
  border: 0;
  border-radius: 9px !important;
  background: transparent;
  color: #5f6578;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 12px 30px;
  cursor: pointer !important;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.task-tabs-tab.is-active {
  color: #ffffff;
  background: #002F54;
  box-shadow: 0 1px 3px rgba(0, 47, 84, 0.25);
}

.task-tabs-tab:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* =========================
   Task List
========================= */
#task-list {
  position: inherit !important;
  overflow: visible !important;
  min-height: auto !important;
}

#task-list-content {
  top: 0 !important;
  position: relative !important;
}

#task-list-up,
#task-list-down {
  display: none;
  text-indent: -9999px;
  background-size: 1em !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

#task-list .heading {
    margin: 10px 0;
    padding: 5px 10px;
    background: transparent;
    color: #000000;
    font-size: 26px;
    font-weight: 600;
}

ol.steps {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

ol.steps li {
  /* 20px accounts for the 10px left/right margin on each card. */
  flex: 0 0 calc((100% / var(--task-columns)) - 20px);
  max-width: calc((100% / var(--task-columns)) - 20px);
  margin: 10px 10px !important;
  border-radius: var(--radius-lg);
  box-shadow: none;
  background: transparent;
}

.steps .progress {
  height: auto !important;
}

#task-list .step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 165px;
  width: 100%;
  padding: 20px !important;
  border: 1px solid #d9d9d9;
  border-left: 3px solid #d5d5d5;
  border-radius: var(--task-card-radius);
  background: var(--surface-card) !important;
  background-image: none !important;
  box-shadow: var(--shadow-sm);
  opacity: 1;
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}

#task-list .step:hover {
  transform: translateY(-2px);
  border-color: rgba(46, 92, 230, 0.25);
  box-shadow: var(--shadow-sm);
}

#task-list .step,
#task-list .step * {
  text-decoration-line: none !important;
  -webkit-text-decoration-line: none !important;
}

#task-list .content {
  order: 1;
  display: block;
  margin-right: auto;
  font-family: inherit !important;
}

#task-list .step .content a,
#task-list li.complete .step .content,
#task-list li.complete .step .content a {
  color: #1c1f2a !important;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}

#task-list .complete .content::after {
  display: none;
}

#task-list .complete {
    text-decoration:none;
}

#task-list .step::before {
  content: "\26A1  Urgent";
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  margin-bottom: 2px;
  padding: 4px 11px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--warning-color);
  background: var(--warning-bg-color);
}

#task-list li.overdue .step::before {
  content: "\26A0  Overdue";
  color: var(--warning-color);
  background: var(--warning-bg-color);
}

#task-list li.progress .step::before {
  content: "\23F3  In progress";
  color: var(--progress-color);
  background: var(--progress-bg-color);
}

#task-list li.complete .step::before {
  content: "\2714  Completed";
  color: var(--complete-color);
  background: var(--complete-bg-color);
}

#task-list .date {
  order: 2;
  width: 100% !important;
  max-width: calc(100% - 38px);
  margin-top: auto;
  font-size: 13px;
  font-weight: 500;
  color: #404144;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none !important;
  text-indent: 0 !important;
  height: auto !important;
  overflow: visible !important;
}

#task-list .complete .date {
  background: none;
}

#task-list li.complete .date::before {
  content: "\2713\2713";
  margin-right: 0;
  color: var(--text-subtle);
  font-family: inherit !important;
  font-weight: 700 !important;
  vertical-align: baseline;
}

#task-list li.complete .step {
  border-color: #d7d7da;
  border-left-color: var(--complete-color);
}

#task-list .step::after {
  content: "";
  position: absolute;
  right: 20px;
  bottom: 18px;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
  border: 1px solid #d9d6cf;
  background: #f2f1ed;
}

#task-list li.complete .step::after {
  content: "\2713";
  display: grid;
  place-items: center;
  border: 0;
  color: #ffffff;
  background: var(--complete-color);
  font-size: 14px;
  font-weight: 800;
}

/* =========================
   Utilities / Legacy Safety
========================= */
ol li,
ul li {
  display: list-item !important;
}

.expandable {
  background-image: url('include/arrow_down.png');
  background-repeat: no-repeat;
  background-position: right center;
}

/* =========================
   Responsive
========================= */
@media only screen and (max-width: 767px) {
  .lightboxDiv {
    width: 90vw;
  }

  .progress-card {
    align-items: flex-start;
    gap: 16px;
    padding: 18px;
  }

  .progress-card-ring {
    width: 76px;
    height: 76px;
  }

  .progress-card-value {
    font-size: 30px;
  }

  .progress-card-title {
    font-size: 18px;
  }

  .progress-card-meta {
    font-size: 14px;
  }

  .task-tabs-title {
    font-size: 28px;
  }

  .task-tabs-tab {
    font-size: 20px;
    padding: 10px 14px;
  }

  ol.steps {
    display: block;
    flex-wrap: unset;
  }

  ol.steps li {
    flex: 0 0 100%;
    max-width: 100%;
  }
}
.form-integration .text-center {
    text-align: left !important;
}
div#bannerInfoPanel {
    display: none;
}
	</style>
</head>

<body>
	<a class="visually-hidden-focusable" href="#main-content">Skip to main content</a>

	<header class="header-wrapper" role="banner">
		<nav class="navbar navbar-expand-lg navbar-light navbar-bg" aria-label="Primary navigation">
			<div class="container">
				<a class="navbar-brand" href="/" aria-label="Home">
					<img class="brand-logo" src="" alt="">
				</a>

				<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryNavigation" aria-controls="primaryNavigation" aria-expanded="false" aria-label="Toggle navigation">
					<span class="navbar-toggler-icon" aria-hidden="true"></span>
				</button>

				<div class="collapse navbar-collapse" id="primaryNavigation">
					{CONTENTMENU}
				</div>
			</div>
		</nav>
	</header>

	<main id="main-content" role="main" tabindex="-1">

Footer Output

Portal footer markup and the navigation / copyright script.


	</main>

	<footer class="footer-wrapper footer-bg pt-5" role="contentinfo">
		<div class="container py-3">
			<div class="row align-items-center">
				<div class="col-md-4 text-center text-md-start">
					<p class="copyright mb-2 mb-md-0">&copy; <span id="year"></span> Client name</p>
				</div>

				<div class="col-md-4 text-center">
					<ul class="social list-inline mb-2 mb-md-0" aria-label="Social media links">
					</ul>
				</div>

				<div class="col-md-4 text-center text-md-end">
					<ul class="help-links list-inline mb-0">
						<li class="list-inline-item">
							<a class="privacy-link" href="" target="_blank" rel="noopener noreferrer">Privacy Policy<span class="visually-hidden"> (opens in a new tab)</span></a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</footer>

	<script>
		window.MouseWheelHandler = function() {
			return false;
		};

		document.addEventListener('DOMContentLoaded', function() {
			const menu = document.getElementById('cms-menu');
			const year = document.getElementById('year');

			if (menu) {
				menu.classList.add('navbar-nav');

				menu.querySelectorAll(':scope > li').forEach(function(item, index) {
					const link = item.querySelector(':scope > a');
					const submenu = item.querySelector(':scope > ul');

					if (link) {
						link.classList.add('nav-link');
					}

					if (submenu && link) {
						const dropdownId = 'navbarDropdown-' + index;

						item.classList.add('dropdown');
						link.classList.add('dropdown-toggle');
						link.id = dropdownId;
						link.setAttribute('data-bs-toggle', 'dropdown');
						link.setAttribute('aria-expanded', 'false');

						submenu.classList.add('dropdown-menu');
						submenu.setAttribute('aria-labelledby', dropdownId);

						submenu.querySelectorAll('a').forEach(function(subLink) {
							subLink.classList.add('dropdown-item');
						});
					}
				});
			}

			if (year) {
				year.textContent = new Date().getFullYear();
			}
		});
	</script>
</body>
</html>