Sites CSS Templates

Sites are Wicket hosted websites that act as fully customizable landing pages that guide users through enrollment, photo capture and other steps to associate relevant data to their photo to be able to use the Wicket system.

Use the pre-built templates below and adjust colors and typography based on the notes within the stylesheet.

ADDITIONAL EDITS

For additional edits use

Sites Styling Guide

Light Mode

A pre-built template that works best with a white or light background. The exact site built using the below template can be found here.

For an example, visit the AO25 Enrollment Site.

Light Mode Template


/* 1 Custom Fonts */        
@font-face {
 font-family: "Raleway";
src: url(https://s3.amazonaws.com/assets.wicket/ism-sales/Raleway-SemiBold.ttf);
}
@font-face {
 font-family: "Albert Sans";
src: url(https://s3.amazonaws.com/assets.wicket/ism-sales/AlbertSans-Regular.ttf);
}
@font-face {
 font-family: "Comfortaa";
src: url(https://s3.amazonaws.com/assets.wicket/ism-sales/Comfortaa-Bold.ttf);
}


/* 2 Globals */
/* 2.1 Colors & BGs*/

/* 2.1.1 Background & Primary Font Color*/
.wik-app-shell {
background-color: #FFFFFF;
}
body {
color: #5B5B5B !important;
}
.wicket__checkbox__label {
color: #333 !important;
}
/* 2.1.2 Primary Logo Width */
img {
max-width: 90vw;
margin: 0px !important;
}

/* 2.1.3 Primary Accent Colors */
:root {
--mantine-color-brand-4: #43C9BC !important;
--mantine-color-brand-filled: #43C9BC !important;
--mantine-color-red-text: #fc3a52 !important;
--mantine-color-red-filled: #fc3a52 !important;
--mantine-color-gray-1: #e4e4e4;
--text-color: #5b5b5b;
--mantine-shadow-sm: none;
}

/* 2.1.4 Profile & Campaign Cards  */
/* Profile: Name, Email */
.wik-card-campaign.wik-card-status, .mantine-Paper-root {
background-color: transparent !important;
padding: 15px 0px !important;
border: none;
}
/* Campaign Cards*/
.wik-card-campaign {
background-color: #f4f4f4 !important;
border: none !important;
border-radius: 5px;
padding: 15px !important;
text-align: left !important;
}

/* 2.2 Buttons  */
/* 2.2.1 Button Normal State*/
.wik-btn-profile, .mantine-focus-auto.mantine-active {
background: #37B5AC;
--mantine-color-red-4: #fc3a52;
opacity: .9;
}

/* 2.2.2 Button Hover State*/
.wik-btn-profile:hover, .mantine-focus-auto.mantine-active:hover {
background: #37B5AC;
opacity: 1;
 transition: 0.3s;
}
/* Button Icons */
.mantine-focus-auto svg {
color: white;
}
/* Button Text */
.mantine-Button-label {
font-family: "COMFORTAA";
text-transform: uppercase;
letter-spacing:1px;
padding-top: 0px !important;
}
.mantine-Button-inner {
color: white;
}

/* 2.3 Modals (Popups) */
/* 2.3.1 Modal Card & Take Picture Header */
.mantine-Modal-header {
background-color: #f4f4f4 !important;
border-radius: 0px;
padding: 0px 15px !important;
}
.mantine-Modal-content { 
background-color: #f4f4f4 !important;
border-radius: 5px;
}

/* 2.3.2 Modal Label */
label, .mantine-checkbox-label  {
font-family: "Albert Sans" !important;
color: #5b5b5b !important;
}
 .wik-text-input, input {
font-family: "Albert Sans" !important;
color: #5b5b5b;
}


/*2.3.3 Modal Input Focus Border */
.wik-text-input {
--_input-bd-focus: #43C9BC;
}
/*2.4.4 Modal Icons */
/* 2.1.3 Icon Accent Colors */
div.wik-banner  > svg {
color: #43C9BC;
margin: 3px 0px;
}

/* 2.4 Font Styles */
/*2.4.1 General */
h1 {
 font: normal 45px "Raleway" !important;
color: #2b2b2b;
}

h2.alt {
color: #2b4669;
}

h2 {
 font: normal 35px "Raleway" !important;
color: #2b2b2b;
}
h3 {
 font: normal 22px "Raleway" !important;
color: #2b2b2b;
}
h4 {
 font: normal 20px "Raleway" !important;
color: #2b2b2b;
}
h5 {
 font: normal 20px "Comfortaa";
text-align: left;
color: #2b2b2b90;
}
li, p, .card p, span {
font: normal 17px "Albert Sans";
--mantine-font-size-sm: .95rem;
--mantine-font-size-xs: .95rem;
text-align: left !important;
}
a {
font: normal 16px "Albert Sans";
color: #43c9bc !important;
}

/*2.4.2 Breadcrumbs */
/*2.4.2.1 Inactive Link */
.wik-breadcrumb-text {
font-family: "Comfortaa";
--mantine-color-black:  #5b5b5b85;
text-transform: uppercase;
}
/*2.4.2.2 Separator */
.mantine-Breadcrumbs-separator {
font-family: "Comfortaa";
color: #5b5b5b;
}

/*2.4.3 Privacy Policy */
.privacy-policy {
text-align: left;
}

/*2.5 Structural & Misc */
/*2.5.1 Footer Distance */
 .mantine-Group-root {
--group-gap: var(--mantine-spacing-xs) !important;
}

/*2.5.1 Selfie Group Structure */
.mantine-SimpleGrid-root {
--sg-cols: 2 !important;
}
img.wik-card-selfie {
height:auto !important;
}

/* 3. Custom Pages  */
/* 3.1 Login Page  */
.info-card {
background-color: #f4f4f4;
padding: 5px 25px 25px 25px;
border-radius: 8px;
color: #5b5b5b;
margin: 0px 0px 20px 0px;
text-align: left;
}

/* 3.2 Profile */
/*3.2.1 User Avatar */
.wik-icon-profile  {
border: 2px solid #43C9BC;
}

/* 3.2.2 Chevron Color */
div.wik-card.wik-card-campaign.wik-card-status > svg {
color: #5b5b5b80;
}
div.wik-card.wik-card-campaign.wik-card-status > svg:hover {
color: #5b5b5b;
transition: 0.3s;
}

/*3.3.1EnrollKit Selfie Page */
.wicket__container {
background-color: transparent !important
}

.wicket__page__background {
background-image: none !important }

.wicket__consent__footer {
border-radius: 10px !important;
margin-bottom: 15px;
background-color: #f4f4f4;
}

.wicket__consent__icons {
color: #5b5b5b;
}

.wicket__consent__icon>.wicket__icon__icon svg path {
fill: #7a7a7a !important;
}
.wicket__consent__icon div {
font-family: "Albert Sans" !important;
}

.wicket__consent__goodbadphoto img  {
border-radius: 12px !important;
border-width: 3px !important;
}

.wicket__consent__footer input {
border-color: #4fc0b6;
font-color: #5b5b5b;
}

 .wicket__consent__footer span {
color: #5b5b5b !important;
}

.wicket__consent__button.wicket__button.wicket__button--disabled {
border-radius: var(--button-radius, var(--mantine-radius-default));
background-color: #00000030;
border: none;
}

.wicket__consent__button.wicket__button.wicket__button--disabled .wicket__button__icon svg path, .wicket__consent__button.wicket__button.wicket__button--disabled .wicket__button__text {
color: #ffffff60 !important;
fill: #ffffff60 !important;
font-family: "Comfortaa" !important;
margin-top: 4px;
}

.wicket__consent__button {
border-radius: var(--button-radius, var(--mantine-radius-default));
background: #37B5AC;
border-color: #37B5AC;
opacity: .9;
color: white;
font-family: "Comfortaa" !important;
margin-top: 4px;
}

.wicket__consent__button:hover {
border-radius: var(--button-radius, var(--mantine-radius-default));
background: #37B5AC;
border-color: #37B5AC;
opacity: 1;
transition: .3s;
}


.wicket__consent__button .wicket__button__text {
color: white;
font-family: "Comfortaa" !important;
margin-top: 4px;
}

/*3.3.2 Take Selfie Page */
/*3.3.2.1 Image Border */
.wik-card-selfie {
border: solid #43C9BC 7px;
border-radius: 5px;
}

/*3.4 Campaign Enrollment Pages */
/*3.4.1 Step Cards */
.mantine-Timeline-itemContent  {
background-color: #f4f4f4 !important;
padding: 15px !important;
border-radius: 5px;
}

/*3.4.2 Timeline Bullets Cards */
.mantine-Timeline-itemBullet {
color: #5b5b5b !important;
border-color: #43C9BC !important;
background: #43C9BC !important;
}

/*3.4.2 Badge */
.mantine-Badge-label { 
text-transform: uppercase;
}

/*3.4.4 Text Bolding: Steps */
.mantine-Timeline-itemContent p {
font-family: "Comfortaa" !important;
text-transform: uppercase;
line-height: 1em;
}

Dark Mode

A pre-built template that works best with a dark or color background. The exact site built using the below template can be found here.

For other examples, visit the University of Florida or BMO Stadium enrollment sites.

Dark Mode Template


/* 1 Custom Fonts */        
@font-face {
 font-family: "Raleway";
src: url(https://s3.amazonaws.com/assets.wicket/ism-sales/Raleway-SemiBold.ttf);
}
@font-face {
 font-family: "Albert Sans";
src: url(https://s3.amazonaws.com/assets.wicket/ism-sales/AlbertSans-Regular.ttf);
}
@font-face {
 font-family: "Comfortaa";
src: url(https://s3.amazonaws.com/assets.wicket/ism-sales/Comfortaa-Bold.ttf);
}


/* 2 Globals */
/* 2.1 Colors & BGs*/

/* 2.1.1 Background & Primary Font Color*/
.wik-app-shell {
background-color: #000000;
}
body {
color: white !important;
}
.wicket__checkbox__label {
color: #333 !important;
}
/* 2.1.2 Primary Logo Width */
img {
max-width: 90vw;
margin: 0px !important;
}

/* 2.1.3 Primary Accent Colors */
:root {
--mantine-color-brand-4: #43C9BC !important;
--mantine-color-brand-filled: #43C9BC !important;
--mantine-color-red-text: #fc3a52 !important;
--mantine-color-red-filled: #fc3a52 !important;
--mantine-color-grey-6: white;
--text-color: white;
--mantine-color-gray-1: #00000040;
--mantine-shadow-sm: none;
}

/* 2.1.4 Profile & Campaign Cards  */
/* Profile: Name, Email */
.wik-card-campaign.wik-card-status, .mantine-Paper-root {
background-color: transparent !important;
padding: 15px 0px !important;
border: none;
}
/* Campaign Cards*/
.wik-card-campaign {
background-color: #13293D !important;
border: none !important;
border-radius: 5px;
padding: 15px !important;
text-align: left !important;
}

/* 2.2 Buttons  */
/* 2.2.1 Button Normal State*/
.wik-btn-profile, .mantine-focus-auto.mantine-active {
background: #37B5AC;
--mantine-color-red-4: #fc3a52;
opacity: .9;
}

/* 2.2.2 Button Hover State*/
.wik-btn-profile:hover, .mantine-focus-auto.mantine-active:hover {
background: #37B5AC;
opacity: 1;
 transition: 0.3s;
}
/* Button Icons */
.mantine-focus-auto svg {
color: white;
}
/* Button Text */
.mantine-Button-label {
font-family: "COMFORTAA";
text-transform: uppercase;
letter-spacing:1px;
padding-top: 0px !important;
}
.mantine-Button-inner {
color: white;
}

/* 2.3 Modals (Popups) */
/* 2.3.1 Modal Card & Take Picture Header */
.mantine-Modal-header {
background-color: #13293D !important;
border-radius: 0px;
padding: 0px 15px !important;
}
.mantine-Modal-content { 
background-color: #13293D !important;
border-radius: 5px;
}

/* 2.3.2 Modal Label */
label, .mantine-checkbox-label  {
font-family: "Albert Sans" !important;
color: white !important;
}
 .wik-text-input, input {
font-family: "Albert Sans" !important;
color: white;
}


/*2.3.3 Modal Input Focus Border */
.wik-text-input {
--_input-bd-focus: #43C9BC;
}
/*2.4.4 Modal Icons */
/* 2.1.3 Icon Accent Colors */
div.wik-banner  > svg {
color: #43C9BC;
margin: 3px 0px;
}

/* 2.4 Font Styles */
/*2.4.1 General */
h1 {
 font: normal 45px "Raleway" !important;
color: #ffffff;
}

h2 {
 font: normal 35px "Raleway" !important;
color: #ffffff;
}
h3 {
 font: normal 22px "Raleway" !important;
color: #ffffff;
}
h4 {
 font: normal 20px "Raleway" !important;
color: #ffffff90;
}
h5 {
 font: normal 20px "Comfortaa";
text-align: left;
color: #ffffff90;
}
li, p, .card p, span {
font: normal 17px "Albert Sans";
--mantine-font-size-sm: .95rem;
--mantine-font-size-xs: .95rem;
text-align: left !important;
}
a {
font: normal 16px "Albert Sans";
color: #70E5CF;
}

/*2.4.2 Breadcrumbs */
/*2.4.2.1 Inactive Link */
.wik-breadcrumb-text {
font-family: "Comfortaa";
--mantine-color-black:  #FFFFFF85;
text-transform: uppercase;
}
/*2.4.2.2 Separator */
.mantine-Breadcrumbs-separator {
font-family: "Comfortaa";
color: #FFFFFF;
}

/*2.4.3 Privacy Policy */
.privacy-policy {
text-align: left;
}

/*2.5 Structural & Misc */
/*2.5.1 Footer Distance */
 .mantine-Group-root {
--group-gap: var(--mantine-spacing-xs) !important;
}

/*2.5.1 Selfie Group Structure */
.mantine-SimpleGrid-root {
--sg-cols: 2 !important;
}
img.wik-card-selfie {
height:auto !important;
}

/* 3. Custom Pages  */
/* 3.1 Login Page  */
.info-card {
background-color: #13293D;
padding: 5px 25px 25px 25px;
border-radius: 8px;
color: #ffffff;
margin: 0px 0px 20px 0px;
text-align: left;
}

/* 3.2 Profile */
/*3.2.1 User Avatar */
.wik-icon-profile  {
border: 2px solid #43C9BC;
}

/* 3.2.2 Chevron Color */
div.wik-card.wik-card-campaign.wik-card-status > svg {
color: #FFFFFF80;
}
div.wik-card.wik-card-campaign.wik-card-status > svg:hover {
color: #FFFFFF;
transition: 0.3s;
}

/*3.3.1EnrollKit Selfie Page */
.wicket__container {
background-color: transparent !important
}

.wicket__page__background {
background-image: none !important }

.wicket__consent__footer {
border-radius: 10px !important;
margin-bottom: 15px;
background-color: #13293D;
}
.wicket__consent__icon div {
font-family: "Albert Sans" !important;
}

.wicket__consent__goodbadphoto img  {
border-radius: 12px !important;
border-width: 3px !important;
}

.wicket__consent__footer input {
border-color: #4fc0b6;
font-color: white;
}

 .wicket__consent__footer span {
color: white !important;
}

.wicket__consent__button.wicket__button.wicket__button--disabled {
border-radius: var(--button-radius, var(--mantine-radius-default));
background-color: #00000030;
border: none;
}

.wicket__consent__button.wicket__button.wicket__button--disabled .wicket__button__icon svg path, .wicket__consent__button.wicket__button.wicket__button--disabled .wicket__button__text {
color: #ffffff60 !important;
fill: #ffffff60 !important;
font-family: "Comfortaa" !important;
margin-top: 4px;
}

.wicket__consent__button {
border-radius: var(--button-radius, var(--mantine-radius-default));
background: #37B5AC;
border-color: #37B5AC;
opacity: .9;
color: white;
font-family: "Comfortaa" !important;
margin-top: 4px;
}

.wicket__consent__button:hover {
border-radius: var(--button-radius, var(--mantine-radius-default));
background: #37B5AC;
border-color: #37B5AC;
opacity: 1;
transition: .3s;
}

.wicket__consent__button .wicket__button__text {
color: white;
font-family: "Comfortaa" !important;
margin-top: 4px;
}

/*3.3.2 Take Selfie Page */
/*3.3.2.1 Image Border */
.wik-card-selfie {
border: solid #43C9BC 7px;
border-radius: 5px;
}

/*3.4 Campaign Enrollment Pages */
/*3.4.1 Step Cards */
.mantine-Timeline-itemContent  {
background-color: #13293D !important;
padding: 15px !important;
border-radius: 5px;
}

/*3.4.2 Timeline Bullets Cards */
.mantine-Timeline-itemBullet {
color: #FFFFFF !important;
border-color: #43C9BC !important;
background: #43C9BC !important;
}

/*3.4.2 Badge */
.mantine-Badge-label { 
text-transform: uppercase;
}

/*3.4.4 Text Bolding: Steps */
.mantine-Timeline-itemContent p {
font-family: "Comfortaa" !important;
text-transform: uppercase;
line-height: 1em;
}

NEXT STEPS

Now that your

Site is branded, it’s time to create and configure a

Campaign for your guests to enroll in.

Next

Creating a Campaign

Creating and Configuring a Site

Customizing a Site

Sites Styling Guide

Creative Asset Requirements

IN THIS ARTICLE

Sites CSS Templates Light Mode Dark Mode Related Articles