/* ======================================================
Header
====================================================== */
.site-header {
background: var(--colour-brand);
border-bottom: 1px solid rgba(255, 255, 255, .10);
box-shadow:
0 4px 18px rgba(20, 16, 37, .12);
}
.site-logo {
display: flex;
align-items: center;
flex: 0 0 auto;
}
.site-logo img {
display: block;
width: auto;
height: 32px;
max-width: none;
}
/* ======================================================
Navigation
====================================================== */
.site-nav {
justify-self: center;
}
.site-nav__list {
display: flex;
align-items: center;
gap: 2rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__list li {
list-style: none;
margin: 0;
padding: 0;
}
.site-nav__list a {
position: relative;
color: rgba(255, 255, 255, .82);
font-weight: 600;
transition:
color .25s ease;
}
.site-nav__list a:hover {
color: #fff;
}
/* ======================================================
Desktop navigation underline
====================================================== */
.site-nav__list a::after {
content: "";
position: absolute;
left: 0;
bottom: -8px;
width: 100%;
height: 2px;
background: var(--colour-accent);
transform: scaleX(0);
transition:
transform .25s ease;
}
.site-nav__list a:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current-menu-ancestor > a::after {
transform: scaleX(1);
}
.site-nav__list .current-menu-item > a,
.site-nav__list .current-menu-ancestor > a {
color: rgba(255, 255, 255, .82);
}
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current-menu-ancestor > a::after {
transform: scaleX(1);
}
/* ======================================================
Page Title
====================================================== */
.page-title {
margin: 0;
padding-top: var(--space-7);
padding-bottom: var(--space-6);
color: var(--colour-heading);
font-size: clamp(
2rem,
4vw,
3.25rem
);
line-height: 1.1;
}
/* ======================================================
Desktop Dropdown Indicator
====================================================== */
.site-nav__list
> .menu-item-has-children
> a {
display: inline-flex;
align-items: center;
gap: .55rem;
}
.site-nav__list
> .menu-item-has-children
> a::before {
content: "";
width: 6px;
height: 6px;
flex: 0 0 6px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
transition:
transform .2s ease;
order: 2;
}
.site-nav__list
> .menu-item-has-children:hover
> a::before,
.site-nav__list
> .menu-item-has-children:focus-within
> a::before,
.site-nav__list
> .menu-item-has-children.is-open
> a::before {
transform: rotate(225deg);
}
/* ======================================================
Desktop Mega Menu
====================================================== */
.site-nav__list
> .menu-item-has-children {
position: static;
}
.site-nav__list
> .menu-item-has-children
> .sub-menu {
position: absolute;
top: calc(100% - 2px);
left: 50%;
z-index: 1000;
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(180px, 1fr)
);
gap: 2rem;
width: min(
900px,
calc(100vw - 48px)
);
margin: 0;
padding: 2rem;
list-style: none;
background: #fff;
border: 1px solid var(--colour-border);
border-radius:
0 0
var(--radius-large)
var(--radius-large);
box-shadow:
0 18px 45px rgba(20, 16, 37, .12);
opacity: 0;
visibility: hidden;
transform: translate(-50%, 0);
transition:
opacity .2s ease,
visibility .2s ease,
transform .2s ease;
}
/*
* Invisible bridge between the navigation item
* and mega menu. This prevents the pointer from
* falling into a gap while moving downwards.
*/
.site-nav__list
> .menu-item-has-children
> .sub-menu::before {
content: "";
position: absolute;
top: -16px;
left: 0;
right: 0;
height: 16px;
}
/* ======================================================
Show Desktop Mega Menu
====================================================== */
.site-nav__list
> .menu-item-has-children:hover
> .sub-menu,
.site-nav__list
> .menu-item-has-children:focus-within
> .sub-menu {
opacity: 1;
visibility: visible;
/*
* Keep the 2px positioning that was confirmed
* to work correctly.
*/
transform: translate(-50%, 2px);
}
/* ======================================================
Mega Menu Columns
====================================================== */
.site-nav__list
> .menu-item-has-children
> .sub-menu
> li {
min-width: 0;
}
.site-nav__list
> .menu-item-has-children
> .sub-menu
> li
> a {
display: block;
/*
* Extra space between the menu title,
* its underline and its description.
*/
margin-bottom: 1rem;
padding: 0;
color: var(--colour-heading);
font-size: .95rem;
font-weight: 700;
}
.site-nav__list
> .menu-item-has-children
> .sub-menu
> li
> a:hover {
color: var(--colour-accent);
}
/* ======================================================
Mega Menu Item Underline
====================================================== */
.site-nav__list
> .menu-item-has-children
> .sub-menu
> li
> a::after {
bottom: -5px;
}
/* ======================================================
Links Within Mega Menu Columns
====================================================== */
.site-nav__list
> .menu-item-has-children
> .sub-menu
.sub-menu {
display: flex;
flex-direction: column;
gap: .4rem;
margin: 0;
padding: 0;
list-style: none;
}
.site-nav__list
> .menu-item-has-children
> .sub-menu
.sub-menu
a {
display: block;
padding: .25rem 0;
color: var(--colour-text);
font-size: .9rem;
font-weight: 400;
}
.site-nav__list
> .menu-item-has-children
> .sub-menu
.sub-menu
a:hover {
color: var(--colour-accent);
}
/* ======================================================
Mega Menu Descriptions
====================================================== */
.site-nav__description {
display: block;
max-width: 240px;
margin-top: -.25rem;
margin-bottom: .5rem;
color: var(--colour-text);
font-size: .8rem;
font-weight: 400;
line-height: 1.5;
}
/* ======================================================
Mega Menu Footer
====================================================== */
.site-nav__mega-footer {
display: block !important;
grid-column: 1 / -1 !important;
width: 100%;
margin: 1rem 0 0;
padding: 1rem 0 0;
border-top: 1px solid var(--colour-border);
}
.site-nav__mega-footer-text {
display: block;
color: var(--colour-text);
font-size: .9rem;
font-weight: 600;
line-height: 1.5;
}
.site-nav__mega-footer-text a {
color: var(--colour-accent);
text-decoration: none;
}
.site-nav__mega-footer-text a::after {
display: none;
}
.site-nav__mega-footer-text a:hover {
color: var(--colour-accent-hover);
text-decoration: underline;
}
/* ======================================================
Mobile Menu Button
====================================================== */
.site-menu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255, 255, 255, .25);
border-radius: 10px;
background: transparent;
color: #fff;
cursor: pointer;
}
.site-menu-toggle__label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.site-menu-toggle__icon {
display: flex;
flex-direction: column;
gap: 5px;
}
.site-menu-toggle__icon span {
display: block;
width: 20px;
height: 2px;
background: currentColor;
transition:
transform .2s ease,
opacity .2s ease;
}
.site-menu-toggle.is-open
.site-menu-toggle__icon
span:nth-child(1) {
transform:
translateY(7px)
rotate(45deg);
}
.site-menu-toggle.is-open
.site-menu-toggle__icon
span:nth-child(2) {
opacity: 0;
}
.site-menu-toggle.is-open
.site-menu-toggle__icon
span:nth-child(3) {
transform:
translateY(-7px)
rotate(-45deg);
}
/* ======================================================
Buttons
====================================================== */
.site-actions {
display: flex;
align-items: center;
gap: .75rem;
}
.button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
padding: 0 1.5rem;
border-radius: 999px;
font-weight: 600;
transition: .25s;
}
.button-primary {
background: var(--colour-accent);
color: #fff;
}
.button-primary:hover {
background: var(--colour-accent-hover);
}
.button-secondary {
border: 1px solid rgba(255, 255, 255, .25);
color: #fff;
}
.button-secondary:hover {
border-color: rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .06);
color: #fff;
}
/* ======================================================
Mobile Navigation Actions
====================================================== */
.site-nav__mobile-actions {
display: none;
}
/* ======================================================
Hero
------------------------------------------------------
The Section owns the page background and text colour.
The Hero is a content component placed inside it.
====================================================== */
.hero {
background: transparent;
color: inherit;
}
/* ======================================================
Hero - Standalone Fallback
====================================================== */
.hero__title {
color: inherit;
}
/* ======================================================
Hero Layout
====================================================== */
.hero__inner {
position: relative;
z-index: 1;
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: clamp(3rem, 6vw, 6rem);
align-items: center;
}
/* ======================================================
Hero Content
====================================================== */
.hero__content {
max-width: 700px;
}
.hero__eyebrow {
display: block;
margin-bottom: var(--space-3);
color: var(--colour-accent);
font-size: .9rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.hero__title {
margin: 0 0 var(--space-5);
color: var(--colour-heading);
font-size: clamp(2.75rem, 5vw, 5rem);
font-weight: 700;
line-height: 1.05;
letter-spacing: -.03em;
}
.hero__description {
max-width: 620px;
margin: 0;
font-size: 1.15rem;
line-height: 1.7;
}
.hero__description p {
margin: 0 0 1rem;
}
.hero__description p:last-child {
margin-bottom: 0;
}
/* ======================================================
Hero - Section Colour Inheritance
====================================================== */
/*
* The parent Section controls the visual treatment.
* This keeps Hero content correct when the Section is
* Default, Light, Dark or Accent.
*/
.section--default .hero,
.section--light .hero {
color: var(--colour-text);
}
.section--default .hero__title,
.section--light .hero__title {
color: var(--colour-heading);
}
.section--default .hero__description,
.section--light .hero__description {
color: var(--colour-text);
}
.section--dark .hero,
.section--accent .hero {
color: rgba(255, 255, 255, .82);
}
.section--dark .hero__title,
.section--accent .hero__title {
color: #fff;
}
.section--dark .hero__description,
.section--accent .hero__description {
color: rgba(255, 255, 255, .78);
}
/* Hero eyebrow follows the Section */
.section--default .hero__eyebrow,
.section--light .hero__eyebrow {
color: var(--colour-accent);
}
.section--dark .hero__eyebrow {
color: #fff;
}
.section--accent .hero__eyebrow {
color: #fff;
}
/* Hero secondary button follows the Section */
/*
* Light/default Sections need a dark secondary button.
* The global `.button-secondary` style is intentionally white
* because it is also used by the dark site header.
*/
.section--default .hero .button-secondary,
.section--light .hero .button-secondary {
border-color: var(--colour-border);
background: transparent;
color: var(--colour-heading);
}
.section--default .hero .button-secondary:hover,
.section--light .hero .button-secondary:hover {
border-color: var(--colour-accent);
background: rgba(156, 72, 139, .06);
color: var(--colour-link-hover);
}
.section--dark .hero .button-secondary,
.section--accent .hero .button-secondary {
border-color: rgba(255, 255, 255, .3);
background: transparent;
color: #fff;
}
.section--dark .hero .button-secondary:hover,
.section--accent .hero .button-secondary:hover {
border-color: rgba(255, 255, 255, .6);
background: rgba(255, 255, 255, .06);
color: #fff;
}
/* ======================================================
Hero Buttons
====================================================== */
.hero__buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
/* ======================================================
Hero Media
====================================================== */
.hero__media {
position: relative;
z-index: 2;
min-width: 0;
width: 100%;
}
/* ======================================================
Hero Image
====================================================== */
.hero__image {
display: block;
width: 100%;
max-width: 100%;
}
/* ======================================================
Image Fit
====================================================== */
.hero__media--fit-cover {
overflow: hidden;
}
.hero__media--fit-cover .hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero__media--fit-contain {
overflow: hidden;
}
.hero__media--fit-contain .hero__image {
width: 100%;
height: 100%;
object-fit: contain;
}
.hero__media--fit-natural .hero__image {
width: 100%;
height: auto;
object-fit: initial;
}
/* ======================================================
Image Position
====================================================== */
.hero__media--position-left .hero__image {
object-position: left center;
}
.hero__media--position-center .hero__image {
object-position: center center;
}
.hero__media--position-right .hero__image {
object-position: right center;
}
.hero__media--position-top .hero__image {
object-position: center top;
}
.hero__media--position-bottom .hero__image {
object-position: center bottom;
}
/* ======================================================
Image Height
====================================================== */
.hero__media--height-compact {
height: 420px;
}
.hero__media--height-standard {
height: 560px;
}
.hero__media--height-tall {
height: 680px;
}
.hero__media--fit-natural {
height: auto;
}
/* ======================================================
Image Corners
====================================================== */
.hero__media--corners-rounded .hero__image {
border-radius: var(--radius-large);
}
.hero__media--corners-square .hero__image {
border-radius: 0;
}
/* ======================================================
Image Shadow
====================================================== */
.hero__media--shadow-none .hero__image {
box-shadow: none;
}
.hero__media--shadow-standard .hero__image {
box-shadow: var(--shadow);
}
.hero__media--shadow-strong .hero__image {
box-shadow:
0 20px 50px
rgba(20, 16, 37, .16);
}
/* ======================================================
Image Left
====================================================== */
.hero--image-left .hero__media {
grid-column: 1;
grid-row: 1;
}
.hero--image-left .hero__content {
grid-column: 2;
grid-row: 1;
}
/* ======================================================
Text Only
====================================================== */
.hero--text-only .hero__inner {
display: block;
min-height: 0;
}
.hero--text-only .hero__content {
max-width: 800px;
}
/* ======================================================
Gutenberg Editor
====================================================== */
.hero--editor {
position: relative;
}
.hero--editor .hero__eyebrow:empty,
.hero--editor .hero__title:empty,
.hero--editor .hero__description:empty {
min-height: 1.5em;
}
.hero--editor .hero__media {
min-height: 180px;
border-radius: var(--radius-large);
background: var(--colour-surface);
border: 1px dashed var(--colour-border);
}
.hero--editor .hero__media img {
min-height: 180px;
}
/* ======================================================
Hero - Responsive
====================================================== */
@media (max-width: 1100px) {
.hero__inner {
grid-template-columns: 1fr;
}
.hero--image-left .hero__media,
.hero--image-left .hero__content {
grid-column: auto;
grid-row: auto;
}
}
@media (max-width: 700px) {
.hero__inner {
min-height: 0;
grid-template-columns: 1fr;
}
.hero__media--height-compact {
height: 320px;
}
.hero__media--height-standard {
height: 400px;
}
.hero__media--height-tall {
height: 480px;
}
.hero__media--fit-natural {
height: auto;
}
.hero__buttons {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: .75rem;
width: 100%;
}
.hero__buttons .button {
flex: 0 0 auto;
width: auto;
max-width: 100%;
min-width: 0;
min-height: 46px;
height: auto;
padding-inline: 1.25rem;
white-space: nowrap;
text-align: center;
}
}
/* ======================================================
Section Header
====================================================== */
.section-header {
max-width: 720px;
margin-bottom: var(--space-7);
}
.section-header--center {
margin-inline: auto;
text-align: center;
}
.section-header__eyebrow {
display: block;
margin-bottom: var(--space-3);
color: var(--colour-accent);
font-size: .9rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.section-header__title {
margin-bottom: var(--space-4);
}
.section-header__text {
margin: 0;
font-size: 1.1rem;
}
/* ======================================================
Service Cards
====================================================== */
.service-grid {
display: grid;
grid-template-columns:
repeat(3, 1fr);
gap: var(--space-5);
}
.service-card {
display: flex;
flex-direction: column;
padding: var(--space-6);
background: var(--colour-background);
border: 1px solid var(--colour-border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.service-card:hover {
transform: translateY(-4px);
border-color:
rgba(156, 72, 139, .3);
box-shadow: var(--shadow);
}
.service-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
margin-bottom: var(--space-5);
border-radius: 14px;
background:
rgba(156, 72, 139, .1);
color: var(--colour-accent);
}
.service-card__title {
margin-bottom: var(--space-3);
font-size: 1.35rem;
}
.service-card__text {
margin-bottom: var(--space-5);
}
.service-card__link {
display: inline-flex;
align-items: center;
gap: .5rem;
margin-top: auto;
color: var(--colour-link);
font-weight: 700;
text-decoration: none;
transition:
color .2s ease;
}
.service-card__link:hover {
color: var(--colour-link-hover);
}
/* ======================================================
Service Card Link Arrow
====================================================== */
.service-card__link > span[aria-hidden="true"] {
display: inline-block;
flex: 0 0 auto;
transition:
transform .2s ease;
}
.service-card__link:hover > span[aria-hidden="true"] {
transform: translateX(4px);
}
/* ======================================================
Service Card Styles
====================================================== */
/*
* Light
*/
.service-grid--light .service-card {
background: var(--colour-background);
color: var(--colour-text);
border-color: var(--colour-accent);
}
.service-grid--light .service-card__title {
color: var(--colour-heading);
}
.service-grid--light .service-card__text {
color: var(--colour-text);
}
/*
* Dark
*/
.service-grid--dark .service-card {
background: var(--colour-brand);
color: rgba(255, 255, 255, .78);
border-color:
rgba(255, 255, 255, .12);
box-shadow:
0 10px 30px
rgba(20, 16, 37, .15);
}
.service-grid--dark .service-card:hover {
border-color:
rgba(156, 72, 139, .55);
box-shadow:
0 18px 40px
rgba(20, 16, 37, .25);
}
.service-grid--dark .service-card__title {
color: #fff;
}
.service-grid--dark .service-card__text {
color:
rgba(255, 255, 255, .72);
}
.service-grid--dark .service-card__icon {
background:
rgba(255, 255, 255, .08);
color:
var(--colour-accent);
}
.service-grid--dark .service-card__link {
color:
var(--colour-link-dark);
}
.service-grid--dark .service-card__link:hover {
color:
var(--colour-link-dark-hover);
}
/*
* Accent
*/
.service-grid--accent .service-card {
background:
linear-gradient(
135deg,
var(--colour-brand),
var(--colour-brand-light)
);
color:
rgba(255, 255, 255, .82);
border-color:
rgba(255, 255, 255, .14);
box-shadow:
0 10px 30px
rgba(20, 16, 37, .18);
}
.service-grid--accent .service-card:hover {
border-color:
rgba(255, 255, 255, .3);
box-shadow:
0 18px 40px
rgba(20, 16, 37, .28);
}
.service-grid--accent .service-card__title {
color: #fff;
}
.service-grid--accent .service-card__text {
color:
rgba(255, 255, 255, .76);
}
.service-grid--accent .service-card__icon {
background:
rgba(255, 255, 255, .1);
color: #fff;
}
/* ======================================================
Service Card Styles
Accent
====================================================== */
.service-grid--accent .service-card__link {
color: var(--colour-link-dark);
}
.service-grid--accent .service-card__link:hover {
color: var(--colour-link-dark-hover);
}
/* ======================================================
Pricing / Hosting Plans
====================================================== */
.plan-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-5);
}
.plan-grid .plan-card {
flex:
0 0
calc(
(100% - (2 * var(--space-5))) / 3
);
}
.plan-grid--four .plan-card {
flex-basis:
calc(
(50% - (var(--space-5) / 2))
);
}
.plan-grid--five .plan-card {
flex-basis:
calc(
(33.333% - (2 * var(--space-5) / 3))
);
}
.plan-card {
position: relative;
display: flex;
flex-direction: column;
padding: var(--space-7);
background: var(--colour-background);
color: var(--colour-text);
border: 1px solid var(--colour-border);
border-radius: var(--radius-large);
box-shadow: var(--shadow-sm);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.plan-card--featured {
border: 2px solid var(--colour-accent);
box-shadow:
0 0 0 1px
rgba(156, 72, 139, .15),
0 12px 30px
rgba(156, 72, 139, .16);
}
.plan-card__badge {
position: absolute;
top: 0;
left: 50%;
transform:
translate(-50%, -50%);
display: inline-flex;
align-items: center;
justify-content: center;
padding: .4rem .9rem;
border-radius: 999px;
background: var(--colour-accent);
color: #fff;
font-size: .8rem;
font-weight: 700;
line-height: 1;
white-space: nowrap;
}
.plan-card__title {
margin-bottom: var(--space-2);
color: var(--colour-text) !important;
font-size: 1.5rem;
}
.plan-card__description {
margin-bottom: var(--space-5);
font-size: .95rem;
}
.plan-card__price {
margin-bottom: var(--space-2);
color: var(--colour-heading);
font-family:
Manrope,
Inter,
sans-serif;
font-size: 2.75rem;
font-weight: 700;
line-height: 1.1;
}
.plan-card__price small {
color: var(--colour-text);
font-family:
Inter,
sans-serif;
font-size: .9rem;
font-weight: 400;
}
.plan-card__billing {
min-height: 1.5rem;
margin-bottom: var(--space-5);
color: var(--colour-text);
font-size: .85rem;
}
.plan-card__features {
margin: 0 0 var(--space-6);
padding: 0;
list-style: none;
}
.plan-card__features li {
position: relative;
margin-bottom: .75rem;
padding-left: 1.5rem;
}
.plan-card__features li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--colour-accent);
font-weight: 700;
}
.plan-card__action {
margin-top: auto;
}
.plan-card__action .button {
width: 100%;
}
/* ======================================================
Plan Add-ons
====================================================== */
.plan-card__addons {
margin-bottom: var(--space-6);
padding-top: var(--space-5);
border-top:
1px solid
var(--colour-border);
}
.plan-card__addons-title {
margin-bottom: var(--space-3);
font-size: .95rem;
}
.plan-card__addon {
display: flex;
align-items: center;
gap: .65rem;
margin-bottom: .65rem;
cursor: pointer;
font-size: .9rem;
}
.plan-card__addon-input {
width: 17px;
height: 17px;
flex: 0 0 auto;
accent-color: var(--colour-accent);
}
.plan-card__addon-name {
flex: 1;
}
.plan-card__addon-price {
color: var(--colour-text);
font-size: .85rem;
white-space: nowrap;
}
/* ======================================================
Billing Period
====================================================== */
.plan-card__billing-period {
margin-bottom: var(--space-5);
}
.plan-card__billing-period-promo {
min-height: 1.4em;
margin-bottom: .5rem;
color: var(--colour-accent);
font-size: .85rem;
font-weight: 600;
}
.plan-card__billing-period-label {
display: block;
margin-bottom: .4rem;
color: var(--colour-heading);
font-size: .85rem;
font-weight: 600;
}
.plan-card__billing-period-select {
display: block;
width: 100%;
padding:
.75rem
2.5rem
.75rem
.9rem;
border:
1px solid
var(--colour-border);
border-radius: var(--radius-small);
background-color: #fff;
color: var(--colour-heading);
font: inherit;
font-size: .9rem;
cursor: pointer;
}
/* ======================================================
Plan Grid Variants
====================================================== */
.plan-grid--four {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
.plan-grid--five {
grid-template-columns:
repeat(5, minmax(0, 1fr));
}
/* ======================================================
Dark Section
====================================================== */
.section--dark {
background: var(--colour-brand);
color:
rgba(255, 255, 255, .8);
}
.section--dark h2,
.section--dark h3 {
color: #fff;
}
/* ======================================================
Footer
====================================================== */
.site-footer {
background: var(--colour-brand);
color:
rgba(255, 255, 255, .72);
}
.site-footer__main {
display: grid;
grid-template-columns:
1.6fr
repeat(4, 1fr);
gap: 3rem;
padding-block: 4rem;
}
.site-footer__brand {
max-width: 300px;
}
.site-footer__logo {
display: inline-flex;
margin-bottom: 1.25rem;
}
.site-footer__logo img {
display: block;
height: 42px;
width: auto;
}
.site-footer__description {
margin: 0;
color:
rgba(255, 255, 255, .65);
font-size: .9rem;
line-height: 1.7;
}
.site-footer__title {
margin: 0 0 1.25rem;
color: #fff;
font-size: .9rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.site-footer__menu,
.site-footer__legal {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__menu li {
margin: 0 0 .65rem;
padding: 0;
}
.site-footer__menu a {
color:
rgba(255, 255, 255, .65);
font-size: .9rem;
transition:
color .2s ease;
}
.site-footer__menu a:hover {
color: #fff;
}
.site-footer__bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
padding-block: 1.25rem;
border-top:
1px solid
rgba(255, 255, 255, .12);
}
.site-footer__copyright {
margin: 0;
color:
rgba(255, 255, 255, .5);
font-size: .8rem;
}
.site-footer__legal {
display: flex;
align-items: center;
gap: 1.5rem;
}
.site-footer__legal a {
color:
rgba(255, 255, 255, .55);
font-size: .8rem;
}
.site-footer__legal a:hover {
color: #fff;
}
/* ======================================================
Hosting Plans
Select Controls
====================================================== */
.plan-card__product-select,
.plan-card__billing-period-select {
display: block;
width: 100%;
min-height: 44px;
padding:
0 42px 0 16px;
border:
1px solid
var(--colour-border, #d9d9e2);
border-radius:
0;
background-color:
#ffffff;
color:
var(--colour-text, #141025);
font-family:
inherit;
font-size:
16px;
line-height:
1.4;
cursor:
pointer;
appearance:
auto;
box-sizing:
border-box;
}
.plan-card__product-select:hover,
.plan-card__billing-period-select:hover {
border-color:
var(--colour-brand, #9c488b);
}
.plan-card__product-select:focus,
.plan-card__billing-period-select:focus {
outline:
none;
border-color:
var(--colour-brand, #9c488b);
box-shadow:
0 0 0 2px
rgba(156, 72, 139, .15);
}
/* ======================================================
Product Selector
====================================================== */
.plan-card__product {
margin-top:
24px;
}
.plan-card__product-select {
margin-top:
8px;
}
/* ======================================================
Billing Period
====================================================== */
.plan-card__billing-period {
margin-top:
24px;
}
.plan-card__billing-period-select {
margin-top:
8px;
}
/* ======================================================
Shared Select Labels
====================================================== */
.plan-card__billing-period-label {
display:
block;
margin:
0 0 8px;
font-size:
14px;
font-weight:
600;
line-height:
1.4;
}
/* ======================================================
Reusable Sections
====================================================== */
.section {
width: 100%;
padding-block: clamp(4rem, 8vw, 7rem);
}
/* ======================================================
Section Styles
====================================================== */
.section--light {
background: var(--colour-surface);
}
.section--dark {
background: var(--colour-brand);
color: rgba(255, 255, 255, .8);
}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
color: #fff;
}
.section--accent {
background:
linear-gradient(
135deg,
var(--colour-brand),
var(--colour-brand-light)
);
color: rgba(255, 255, 255, .85);
}
.section--accent h1,
.section--accent h2,
.section--accent h3,
.section--accent h4,
.section--accent h5,
.section--accent h6 {
color: #fff;
}
/* ======================================================
Section Content Colour
====================================================== */
/*
* Dark content
*/
.section--content-dark {
color: var(--colour-text);
}
.section--content-dark h1,
.section--content-dark h2,
.section--content-dark h3,
.section--content-dark h4,
.section--content-dark h5,
.section--content-dark h6 {
color: var(--colour-heading);
}
/*
* Light content
*/
.section--content-light {
color: rgba(255, 255, 255, .82);
}
.section--content-light h1,
.section--content-light h2,
.section--content-light h3,
.section--content-light h4,
.section--content-light h5,
.section--content-light h6 {
color: #fff;
}
/* ======================================================
Section Widths
====================================================== */
/*
* Standard
*
* Uses the normal Farbyte site container.
*/
.section--standard .container {
width: min(
var(--container),
calc(100% - 48px)
);
max-width: var(--container);
margin-inline: auto;
}
/*
* Narrow
*
* Useful for text-heavy content.
*/
.section--narrow .container {
width: min(
900px,
calc(100% - 48px)
);
max-width: 900px;
margin-inline: auto;
}
/*
* Wide
*
* Full-width content.
*
* The Section itself is already full width.
* Here we remove the normal container constraint
* so the content can span the complete available
* width of the page.
*/
.section--wide .container {
width: 100%;
max-width: none;
margin-inline: 0;
}
/* ======================================================
Section Spacing
====================================================== */
/*
* Compact
*/
.section--compact {
padding-block: clamp(3rem, 5vw, 5rem);
}
/*
* Standard
*
* The default spacing comes from .section.
*/
/*
* Large
*/
.section--large {
padding-block: clamp(6rem, 10vw, 9rem);
}
/* ======================================================
Section Alignment
====================================================== */
.section--center {
text-align: center;
}
/* ======================================================
Section Links
====================================================== */
/*
* Normal content links
*
* Buttons are deliberately excluded so that the Section
* link styling cannot override button styles.
*/
/*
* Dark content
*/
.section--content-dark a:not(.button):not(.service-card__link) {
color: var(--colour-link);
font-weight: 600;
text-decoration: none;
transition:
color .2s ease;
}
.section--content-dark a:not(.button):not(.service-card__link):hover {
color: var(--colour-link-hover);
}
/*
* Light content
*/
.section--content-light a:not(.button):not(.service-card__link,.comparison-table__column-name) {
color: var(--colour-link-dark);
font-weight: 600;
text-decoration: none;
transition:
color .2s ease;
}
.section--content-light a:not(.button):not(.service-card__link,.comparison-table__column-name):hover {
color: var(--colour-link-dark-hover);
}
/* ======================================================
Section Arrow Links
====================================================== */
/*
* Add class="link--arrow" to any normal content link
* that should display the animated right arrow.
*
* Buttons are excluded here too.
*/
.section--content-dark a.link--arrow:not(.button),
.section--content-light a.link--arrow:not(.button) {
display: inline-flex;
align-items: center;
gap: .5rem;
}
.section--content-dark a.link--arrow:not(.button)::after,
.section--content-light a.link--arrow:not(.button)::after {
content: "→";
display: inline-block;
transition:
transform .2s ease;
}
.section--content-dark a.link--arrow:not(.button):hover::after,
.section--content-light a.link--arrow:not(.button):hover::after {
transform: translateX(4px);
}
/* ======================================================
Section Editor Preview
====================================================== */
/*
* Provides a visible editing area in Gutenberg
* without affecting the front-end layout.
*/
.section--editor {
position: relative;
}
.section__editor-inner {
min-height: 100px;
}
/* ======================================================
Section Background Image
====================================================== */
.section {
position: relative;
isolation: isolate;
overflow: hidden;
}
/* ======================================================
Responsive Section Background
====================================================== */
/*
* The background is now a real ![]()
element rather
* than a CSS background image.
*
* WordPress supplies srcset and sizes so the browser
* can select an appropriate image resolution.
*/
.section__background {
position: absolute;
inset: -12% 0;
z-index: -2;
display: block;
width: 100%;
height: 124%;
max-width: none;
margin: 0;
pointer-events: none;
user-select: none;
object-position:
var(
--section-background-position,
center center
);
object-fit:
var(
--section-background-size,
cover
);
transform:
translate3d(
0,
var(
--section-parallax-offset,
0px
),
0
);
}
/* ======================================================
Section Background Size
====================================================== */
/*
* Cover
*/
.section--has-background
.section__background {
object-fit: cover;
}
/*
* Contain
*/
.section--has-background
.section__background {
object-fit:
var(
--section-background-size,
cover
);
}
/*
* Auto
*
* Preserve the image's intrinsic aspect ratio.
*/
.section--has-background
.section__background[alt=""] {
/*
* The explicit object-fit value is overridden
* below when the Section is configured for auto.
*/
}
/* ======================================================
Section Background Repeat
====================================================== */
/*
* The responsive ![]()
itself cannot reproduce CSS
* background-repeat, so repeated backgrounds retain
* a CSS fallback layer.
*
* Normal non-repeating images use the real responsive
* image above.
*/
.section--has-background.section--background-repeat {
background-repeat:
var(
--section-background-repeat,
no-repeat
);
}
/* ======================================================
Section Parallax
====================================================== */
.section--has-background.section--parallax
.section__background {
will-change: transform;
}
/* ======================================================
Disable Parallax on Smaller Screens
====================================================== */
@media (max-width: 900px) {
.section--has-background.section--parallax
.section__background {
transform: none;
}
}
/* ======================================================
Section Background Overlay
====================================================== */
.section--has-background::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background:
var(
--section-overlay-colour,
#141025
);
opacity:
var(
--section-overlay-opacity,
0
);
pointer-events: none;
}
/* ======================================================
Section Content Layer
====================================================== */
.section--has-background > .container {
position: relative;
z-index: 1;
}
/* ======================================================
Service Cards
====================================================== */
.service-grid--2 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.service-grid--3 {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.service-grid--4 {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
/* ======================================================
Service Cards Editor
====================================================== */
.service-grid--editor {
position: relative;
}
.service-card__editor-controls {
display: flex;
justify-content: flex-end;
gap: .25rem;
min-height: 32px;
margin-bottom: .75rem;
}
.service-card__editor-controls .components-button {
min-width: 32px;
}
.service-card__editor-link {
margin-top: 1rem;
}
.service-card__editor-link
.components-base-control {
margin-bottom: .75rem;
}
.service-grid__add {
display: flex;
justify-content: center;
margin-top: 1.5rem;
}
.service-grid__empty {
grid-column: 1 / -1;
padding: 3rem;
text-align: center;
border: 2px dashed
var(--colour-border);
border-radius:
var(--radius-large);
background:
var(--colour-surface);
}
/* ======================================================
Service Card Icons
====================================================== */
.service-card__icon svg {
display: block;
width: 28px;
height: 28px;
}
/* ======================================================
Gutenberg Icon Picker
====================================================== */
.service-card__icon-picker {
margin: 1rem 0 1.25rem;
padding-top: 1rem;
border-top: 1px solid
var(--colour-border);
}
.service-card__icon-picker-label {
margin-bottom: .6rem;
font-size: .75rem;
font-weight: 600;
color: var(--colour-text-muted);
text-transform: uppercase;
letter-spacing: .06em;
}
.service-card__icon-grid {
display: grid;
grid-template-columns:
repeat(6, minmax(0, 1fr));
gap: .35rem;
}
.service-card__icon-option {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1;
padding: .5rem;
border: 1px solid
var(--colour-border);
border-radius:
var(--radius-small);
background:
var(--colour-background);
color:
var(--colour-text);
cursor: pointer;
transition:
border-color .15s ease,
background-color .15s ease,
color .15s ease;
}
.service-card__icon-option:hover {
border-color:
var(--colour-accent);
color:
var(--colour-accent);
}
.service-card__icon-option.is-selected {
border-color:
var(--colour-accent);
background:
rgba(156, 72, 139, .08);
color:
var(--colour-accent);
box-shadow:
0 0 0 1px var(--colour-accent);
}
.service-card__icon-option svg {
display: block;
width: 22px;
height: 22px;
}
/* ======================================================
Feature Cards
====================================================== */
.feature-grid {
display: grid;
gap: 1.5rem;
width: 100%;
}
/* ======================================================
Columns
====================================================== */
.feature-grid--2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.feature-grid--3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.feature-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* ======================================================
Base Card
====================================================== */
.feature-card {
padding: 2rem;
border: 1px solid var(--colour-border);
border-radius: 14px;
transition:
transform .2s ease,
box-shadow .2s ease,
border-color .2s ease;
}
.feature-card:hover {
transform: translateY(-2px);
box-shadow:
0 10px 25px rgba(20, 16, 37, .07);
}
/* ======================================================
Light
====================================================== */
.feature-grid--light .feature-card {
background: #fff;
color: #141025;
border-color: #e1e5ee;
}
.feature-grid--light .feature-card:hover {
border-color: rgba(156, 72, 139, .35);
box-shadow:
0 10px 25px rgba(20, 16, 37, .07);
}
.feature-grid--light .feature-card__title {
color: #141025;
}
.feature-grid--light .feature-card__text {
color: #536078;
}
.feature-grid--light .feature-card__icon {
background: #f4edf4;
color: #9c488b;
}
/* ======================================================
Dark
====================================================== */
.feature-grid--dark .feature-card {
background: var(--colour-brand);
color: rgba(255, 255, 255, .78);
border-color:
rgba(255, 255, 255, .14);
box-shadow:
0 10px 30px
rgba(20, 16, 37, .15);
}
.feature-grid--dark .feature-card:hover {
border-color:
rgba(156, 72, 139, .55);
box-shadow:
0 18px 40px
rgba(20, 16, 37, .25);
}
.feature-grid--dark .feature-card__title {
color: #fff;
}
.feature-grid--dark .feature-card__text {
color:
rgba(255, 255, 255, .72);
}
.feature-grid--dark .feature-card__icon {
background:
rgba(255, 255, 255, .08);
color:
var(--colour-link-dark);
}
/* ======================================================
Accent
====================================================== */
.feature-grid--accent .feature-card {
background:
linear-gradient(
135deg,
var(--colour-brand),
var(--colour-brand-light)
);
color:
rgba(255, 255, 255, .82);
border-color:
rgba(255, 255, 255, .18);
box-shadow:
0 10px 30px
rgba(20, 16, 37, .18);
}
.feature-grid--accent .feature-card:hover {
border-color:
rgba(255, 255, 255, .35);
box-shadow:
0 18px 40px
rgba(20, 16, 37, .28);
}
.feature-grid--accent .feature-card__title {
color: #fff;
}
.feature-grid--accent .feature-card__text {
color:
rgba(255, 255, 255, .76);
}
.feature-grid--accent .feature-card__icon {
background:
rgba(255, 255, 255, .1);
color: #fff;
}
/* ======================================================
Icon
====================================================== */
.feature-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
margin-bottom: 1.25rem;
border-radius: 10px;
}
.feature-card__icon svg {
display: block;
width: 24px;
height: 24px;
max-width: 24px;
max-height: 24px;
}
/* ======================================================
Title
====================================================== */
.feature-card__title {
margin: 0 0 .6rem;
font-size: 1.15rem;
line-height: 1.3;
}
/* ======================================================
Description
====================================================== */
.feature-card__text {
margin: 0;
font-size: .95rem;
line-height: 1.6;
}
/* ======================================================
Comparison Table
====================================================== */
.comparison-table {
width: 100%;
}
.comparison-table__title {
margin: 0 0 .75rem;
}
.comparison-table__description {
max-width: 720px;
margin: 0 0 2rem;
color: var(--colour-muted);
}
.comparison-table__scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.comparison-table__table {
width: 100%;
min-width: 680px;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--colour-border);
border-radius: 14px;
background: #fff;
}
/* ======================================================
Table Cells
====================================================== */
.comparison-table__table th,
.comparison-table__table td {
padding: 1rem 1.25rem;
border-bottom: 1px solid var(--colour-border);
text-align: left;
vertical-align: middle;
}
.comparison-table__table tr:last-child th,
.comparison-table__table tr:last-child td {
border-bottom: 0;
}
/* ======================================================
Header
====================================================== */
.comparison-table__table thead th {
position: relative;
padding-top: 1.5rem;
padding-bottom: 1.25rem;
background: #f7f8fc;
color: #141025;
font-size: .95rem;
}
.comparison-table__table thead th:first-child {
border-top-left-radius: 14px;
}
.comparison-table__table thead th:last-child {
border-top-right-radius: 14px;
}
.comparison-table__table tbody tr:last-child th {
border-bottom-left-radius: 14px;
}
.comparison-table__table tbody tr:last-child td:last-child {
border-bottom-right-radius: 14px;
}
.comparison-table__feature-heading {
width: 32%;
}
.comparison-table__column {
position: relative;
min-width: 150px;
}
.comparison-table__column-name {
display: block;
font-weight: 700;
}
/* ======================================================
Feature Names
====================================================== */
.comparison-table__feature {
color: #141025;
font-weight: 600;
}
/* ======================================================
Values
====================================================== */
.comparison-table__value {
color: #536078;
font-size: .95rem;
}
/* ======================================================
Highlighted Column
====================================================== */
.comparison-table__column--highlighted {
background: #f8f1f7;
color: #141025;
}
.comparison-table__value--highlighted {
background: #fbf7fa;
}
/* ======================================================
Popular Badge
====================================================== */
.comparison-table__scroll {
padding-top: .55rem;
}
.comparison-table__badge {
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%, -50%);
display: inline-block;
margin: 0;
padding: .2rem .5rem;
border-radius: 999px;
background: #9c488b;
color: #fff;
font-size: .7rem;
font-weight: 700;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: .04em;
white-space: nowrap;
z-index: 2;
}
/* ======================================================
Light
====================================================== */
.comparison-table--light
.comparison-table__table {
background: #fff;
border-color: #e1e5ee;
}
.comparison-table--light
.comparison-table__table thead th {
background: #f7f8fc;
color: #141025;
}
/* ======================================================
Dark
====================================================== */
.comparison-table--dark
.comparison-table__table {
background: #1c1730;
border-color: #302747;
color: #fff;
}
.comparison-table--dark
.comparison-table__table thead th {
background: #141025;
color: #fff;
border-color: #302747;
}
.comparison-table--dark
.comparison-table__feature {
color: #fff;
border-color: #302747;
}
.comparison-table--dark
.comparison-table__value {
color: #d8d2e3;
border-color: #302747;
}
.comparison-table--dark
.comparison-table__column--highlighted {
background: #29213f;
}
.comparison-table--dark
.comparison-table__value--highlighted {
background: #29213f;
}
.comparison-table--dark
.comparison-table__table tr:last-child th,
.comparison-table--dark
.comparison-table__table tr:last-child td {
border-color: transparent;
}
/* ======================================================
Accent
====================================================== */
.comparison-table--accent
.comparison-table__table {
background: #fff;
border-color: rgba(156, 72, 139, .45);
}
.comparison-table--accent
.comparison-table__table thead th {
background:
linear-gradient(
135deg,
var(--colour-brand),
var(--colour-brand-light)
);
color: #fff;
border-color:
rgba(255, 255, 255, .16);
}
.comparison-table--accent
.comparison-table__feature {
color: #141025;
border-color: #eadfea;
}
.comparison-table--accent
.comparison-table__value {
color: #536078;
border-color: #eadfea;
}
.comparison-table--accent
.comparison-table__column--highlighted {
background: #f8eaf5;
color: #141025;
}
.comparison-table--accent
.comparison-table__value--highlighted {
background: #fcf4fa;
}
.comparison-table--accent
.comparison-table__table tr:last-child th,
.comparison-table--accent
.comparison-table__table tr:last-child td {
border-color: transparent;
}
/* ======================================================
Mobile
====================================================== */
@media (max-width: 700px) {
.comparison-table__title {
margin-bottom: .6rem;
}
.comparison-table__description {
margin-bottom: 1.5rem;
}
.comparison-table__table {
min-width: 620px;
}
.comparison-table__table th,
.comparison-table__table td {
padding:
.85rem
1rem;
}
/*
* Keep the badge comfortably inside the table
* on smaller screens as well.
*/
.comparison-table__badge {
top: .3rem;
}
}
/* ======================================================
Linked Column Names
====================================================== */
.comparison-table__column-name[href] {
color: var(--colour-link);
text-decoration-line: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
text-decoration-color:
color-mix(
in srgb,
var(--colour-link) 45%,
transparent
);
transition:
color .15s ease,
text-decoration-color .15s ease;
}
.comparison-table__column-name[href]:hover {
color: var(--colour-link-hover);
text-decoration-color: var(--colour-link-hover);
}
/* ======================================================
Linked Column Names - Dark
====================================================== */
.comparison-table--dark
.comparison-table__column-name[href] {
color: var(--colour-link-dark);
text-decoration-color:
color-mix(
in srgb,
var(--colour-link-dark) 55%,
transparent
);
}
.comparison-table--dark
.comparison-table__column-name[href]:hover {
color: var(--colour-link-dark-hover);
text-decoration-color: var(--colour-link-dark-hover);
}
/* ======================================================
Linked Column Names - Accent
====================================================== */
.comparison-table--accent
.comparison-table__column-name[href] {
color: var(--colour-link-dark);
text-decoration-color:
color-mix(
in srgb,
var(--colour-link-dark) 55%,
transparent
);
}
.comparison-table--accent
.comparison-table__column-name[href]:hover {
color: var(--colour-link-dark-hover);
text-decoration-color: var(--colour-link-dark-hover);
}
/* ======================================================
CTA
====================================================== */
.cta {
width: 100%;
background: transparent;
background-image: none;
}
.cta__inner {
display: flex;
flex-direction: column;
align-items: center;
padding: 36px 40px;
border-radius: 16px;
text-align: center;
}
/* ======================================================
Content
====================================================== */
.cta__eyebrow {
margin-bottom: .5rem;
font-size: .75rem;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: .08em;
}
.cta__title {
max-width: 760px;
margin: 0 auto .5rem;
font-size: clamp(
1.9rem,
4vw,
2.75rem
);
line-height: 1.15;
}
.cta__description {
max-width: 680px;
margin: 0 auto;
line-height: 1.6;
}
.cta__description p {
margin: 0 0 1rem;
}
.cta__description p:last-child {
margin-bottom: 0;
}
/* ======================================================
Actions
====================================================== */
.cta__actions {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.25rem;
}
.cta__button {
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ======================================================
Light
====================================================== */
.cta--light .cta__inner {
background: #ffffff;
border: 1px solid #e4e8f0;
color: #141025;
}
.cta--light .cta__eyebrow {
color: #9c488b;
}
.cta--light .cta__title {
color: #141025;
}
.cta--light .cta__description {
color: #536078;
}
/* ======================================================
Dark
====================================================== */
.cta--dark .cta__inner {
background: #1c1730;
border: 1px solid #302747;
color: #fff;
}
.cta--dark .cta__eyebrow {
color: #d8a5cb;
}
.cta--dark .cta__title {
color: #fff;
}
.cta--dark .cta__description {
color: #d8d2e3;
}
/* ======================================================
Accent
====================================================== */
.cta--accent .cta__inner {
background:
linear-gradient(
135deg,
var(--colour-brand),
var(--colour-brand-light)
);
color:
rgba(255, 255, 255, .82);
border-color:
rgba(255, 255, 255, .14);
box-shadow:
0 10px 30px
rgba(20, 16, 37, .18);
}
.cta--accent .cta__eyebrow {
color: #fff;
}
.cta--accent .cta__title {
color: #fff;
}
.cta--accent .cta__description {
color:
rgba(255, 255, 255, .76);
}
/* ======================================================
FAQ
====================================================== */
.faq {
width: 100%;
}
/* ======================================================
FAQ Heading
====================================================== */
.faq__heading {
margin: 0 0 24px;
color: #141025;
font-size: clamp(
1.6rem,
3vw,
2.1rem
);
line-height: 1.2;
}
/* ======================================================
FAQ Items
====================================================== */
.faq__items {
display: grid;
gap: 12px;
width: 100%;
}
.faq__item {
width: 100%;
margin: 0;
padding: 0;
border:
1px solid
#e4e8f0;
border-top: 0;
border-radius: 10px;
overflow: hidden;
background: #fff;
}
/* ======================================================
Question
====================================================== */
.faq__question {
margin: 0;
padding: 0;
}
.faq__toggle {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
width: 100%;
margin: 0;
padding: 20px 22px;
border: 0;
background: transparent;
color: #141025;
font: inherit;
font-weight: 600;
line-height: 1.4;
text-align: left;
cursor: pointer;
appearance: none;
transition:
background-color .15s ease,
color .15s ease;
}
.faq__toggle:hover {
background:
rgba(156, 72, 139, .04);
}
.faq__question-text {
flex: 1 1 auto;
min-width: 0;
}
/* ======================================================
Expand / Collapse Icon
====================================================== */
.faq__icon {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background:
rgba(156, 72, 139, .08);
color: #9c488b;
font-size: 1.25rem;
font-weight: 400;
line-height: 1;
transition:
transform .2s ease,
background-color .15s ease;
}
.faq__toggle[aria-expanded="true"]
.faq__icon {
transform: rotate(45deg);
background:
rgba(156, 72, 139, .14);
}
/* ======================================================
Answer
====================================================== */
.faq__answer {
padding:
16px
22px
22px;
color: #536078;
line-height: 1.65;
}
.faq__answer p {
margin:
0
0
1rem;
}
.faq__answer p:last-child {
margin-bottom: 0;
}
/* ======================================================
Answer Links
====================================================== */
.faq__answer a {
color: var(--colour-link);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition:
color .2s ease;
}
.faq__answer a:hover {
color: var(--colour-link-hover);
}
/* ======================================================
Answer Links - Dark
====================================================== */
.faq--dark .faq__answer a {
color: var(--colour-link-dark);
}
.faq--dark .faq__answer a:hover {
color: var(--colour-link-dark-hover);
}
/* ======================================================
Answer Links - Accent
====================================================== */
.faq--accent .faq__answer a {
color: var(--colour-link-dark);
}
.faq--accent .faq__answer a:hover {
color: var(--colour-link-dark-hover);
}
/* ======================================================
Dark
====================================================== */
.faq--dark .faq__item {
border:
1px solid
#302747;
border-top: 0;
background:
#1c1730;
}
.faq--dark .faq__toggle {
color: #fff;
}
.faq--dark .faq__toggle:hover {
background:
rgba(255, 255, 255, .04);
}
.faq--dark .faq__icon {
background:
rgba(216, 165, 203, .12);
color:
#d8a5cb;
}
.faq--dark .faq__toggle[aria-expanded="true"]
.faq__icon {
background:
rgba(216, 165, 203, .18);
}
.faq--dark .faq__answer {
color:
#d8d2e3;
}
/* ======================================================
Accent
====================================================== */
.faq--accent .faq__item {
border:
1px solid
rgba(255, 255, 255, .14);
border-top: 0;
background:
linear-gradient(
135deg,
var(--colour-brand),
var(--colour-brand-light)
);
color:
rgba(255, 255, 255, .82);
box-shadow:
0 10px 30px
rgba(20, 16, 37, .18);
}
.faq--accent .faq__toggle {
color: #fff;
}
.faq--accent .faq__toggle:hover {
background:
rgba(255, 255, 255, .05);
}
.faq--accent .faq__icon {
background:
rgba(255, 255, 255, .1);
color: #fff;
}
.faq--accent .faq__toggle[aria-expanded="true"]
.faq__icon {
background:
rgba(255, 255, 255, .18);
}
.faq--accent .faq__answer {
color:
rgba(255, 255, 255, .78);
}
/* ======================================================
Statistics
====================================================== */
.statistics {
width: 100%;
}
/* ======================================================
Grid
====================================================== */
.statistics__grid {
display: grid;
gap: 24px;
width: 100%;
}
.statistics--2 .statistics__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.statistics--3 .statistics__grid {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
.statistics--4 .statistics__grid {
grid-template-columns:
repeat(4, minmax(0, 1fr));
}
/* ======================================================
Statistic
====================================================== */
.statistics__item {
min-width: 0;
padding: 28px 24px;
border-radius: 12px;
text-align: center;
}
/* ======================================================
Value
====================================================== */
.statistics__value {
margin-bottom: .4rem;
font-size: clamp(
2rem,
4vw,
3rem
);
font-weight: 800;
line-height: 1;
letter-spacing: -.03em;
}
/* ======================================================
Label
====================================================== */
.statistics__label {
margin: 0 0 .5rem;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
/* ======================================================
Description
====================================================== */
.statistics__description {
max-width: 280px;
margin: 0 auto;
font-size: .9rem;
line-height: 1.5;
}
.statistics__description p {
margin: 0 0 1rem;
}
.statistics__description p:last-child {
margin-bottom: 0;
}
/* ======================================================
Light
====================================================== */
.statistics--light .statistics__item {
background: #fff;
border:
1px solid
#e4e8f0;
color: #141025;
}
.statistics--light .statistics__value {
color: #9c488b;
}
.statistics--light .statistics__label {
color: #141025;
}
.statistics--light .statistics__description {
color: #536078;
}
/* ======================================================
Dark
====================================================== */
.statistics--dark .statistics__item {
background: #1c1730;
border:
1px solid
#302747;
color: #fff;
}
.statistics--dark .statistics__value {
color: #d8a5cb;
}
.statistics--dark .statistics__label {
color: #fff;
}
.statistics--dark .statistics__description {
color: #d8d2e3;
}
/* ======================================================
Accent
====================================================== */
.statistics--accent .statistics__item {
background:
linear-gradient(
135deg,
var(--colour-brand),
var(--colour-brand-light)
);
border:
1px solid
rgba(255, 255, 255, .14);
color:
rgba(255, 255, 255, .82);
box-shadow:
0 10px 30px
rgba(20, 16, 37, .18);
}
.statistics--accent .statistics__value {
color: #fff;
}
.statistics--accent .statistics__label {
color: #fff;
}
.statistics--accent .statistics__description {
color:
rgba(255, 255, 255, .76);
}
@media (max-width: 600px) {
.statistics--2 .statistics__grid,
.statistics--3 .statistics__grid,
.statistics--4 .statistics__grid {
grid-template-columns: 1fr;
}
.statistics__item {
padding:
24px
20px;
}
.statistics__value {
font-size: 2.25rem;
}
.statistics__description {
max-width: 420px;
}
}
/* ======================================================
Hosting Plans - Responsive
====================================================== */
@media (max-width: 1100px) {
.plan-grid,
.plan-grid--four,
.plan-grid--five {
display: grid;
grid-template-columns:
repeat(2, minmax(0, 1fr));
max-width: none;
}
.plan-grid--five .plan-card,
.plan-grid--five .plan-card:nth-child(4),
.plan-grid--five .plan-card:nth-child(5) {
grid-column: auto;
}
}
@media (max-width: 700px) {
.plan-grid,
.plan-grid--four,
.plan-grid--five {
display: flex;
flex-direction: column;
align-items: stretch;
}
.plan-grid .plan-card,
.plan-grid--four .plan-card,
.plan-grid--five .plan-card {
flex: 0 0 auto;
width: 100%;
}
}
/* ======================================================
Service Cards - Responsive
====================================================== */
@media (max-width: 1100px) {
.service-grid,
.service-grid--4 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.service-grid,
.service-grid--2,
.service-grid--3,
.service-grid--4 {
grid-template-columns: 1fr;
}
}
/* ======================================================
Feature Cards - Responsive
====================================================== */
@media (max-width: 1100px) {
.feature-grid--4 {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 700px) {
.feature-grid--2,
.feature-grid--3,
.feature-grid--4 {
grid-template-columns: 1fr;
}
.feature-card {
padding: 1.5rem;
}
}
/* ======================================================
Comparison Table - Responsive
====================================================== */
@media (max-width: 700px) {
.comparison-table__title {
margin-bottom: .6rem;
}
.comparison-table__description {
margin-bottom: 1.5rem;
}
.comparison-table__table {
min-width: 620px;
}
.comparison-table__table th,
.comparison-table__table td {
padding:
.85rem
1rem;
}
.comparison-table__badge {
top: .3rem;
}
}
/* ======================================================
CTA - Responsive
====================================================== */
@media (max-width: 700px) {
.cta {
width: 100%;
padding: 0;
background: transparent;
background-image: none;
}
.cta__inner {
width: 100%;
max-width: none;
align-self: stretch;
box-sizing: border-box;
padding: 32px 24px;
}
.cta__title {
font-size: 2rem;
}
.cta__description {
max-width: 100%;
}
.cta__actions {
width: 100%;
flex-direction: column;
align-items: center;
margin-top: 1.25rem;
}
.cta__button {
width: auto;
min-width: 120px;
}
}
/* ======================================================
FAQ - Responsive
====================================================== */
@media (max-width: 700px) {
.faq__items {
gap: 10px;
}
.faq__toggle {
gap: 16px;
padding:
16px
18px;
}
.faq__icon {
width: 26px;
height: 26px;
font-size: 1.15rem;
}
.faq__answer {
padding:
14px
18px
18px;
}
}
/* ======================================================
Statistics - Responsive
====================================================== */
@media (max-width: 900px) {
.statistics--4 .statistics__grid,
.statistics--3 .statistics__grid {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 600px) {
.statistics--2 .statistics__grid,
.statistics--3 .statistics__grid,
.statistics--4 .statistics__grid {
grid-template-columns: 1fr;
}
.statistics__item {
padding:
24px
20px;
}
.statistics__value {
font-size: 2.25rem;
}
.statistics__description {
max-width: 420px;
}
}
/* ======================================================
Split Content
====================================================== */
.split-content {
width: 100%;
color: inherit;
}
/* ======================================================
Inner Layout
====================================================== */
.split-content__inner {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr);
gap: 64px;
align-items: center;
}
/* ======================================================
Content
====================================================== */
.split-content__content {
min-width: 0;
}
/* ======================================================
Eyebrow
====================================================== */
.split-content__eyebrow {
margin-bottom: .75rem;
color: var(--colour-accent);
font-size: .75rem;
font-weight: 700;
line-height: 1.3;
text-transform: uppercase;
letter-spacing: .08em;
}
/* ======================================================
Title
====================================================== */
.split-content__title {
max-width: 680px;
margin: 0 0 1rem;
color: var(--colour-heading);
font-size: clamp(
1.9rem,
4vw,
2.75rem
);
line-height: 1.15;
}
/* ======================================================
Text
====================================================== */
.split-content__text {
max-width: 680px;
color: var(--colour-text);
line-height: 1.65;
}
.split-content__text p {
margin: 0 0 1rem;
}
.split-content__text p:last-child {
margin-bottom: 0;
}
/* ======================================================
Dark / Accent Sections
====================================================== */
.section--dark .split-content__eyebrow,
.section--accent .split-content__eyebrow {
color: #fff;
}
.section--dark .split-content__title,
.section--accent .split-content__title {
color: #fff;
}
.section--dark .split-content__text,
.section--accent .split-content__text {
color: rgba(255, 255, 255, .78);
}
/* ======================================================
Link
====================================================== */
.split-content__link-wrapper {
margin: 1.5rem 0 0;
}
.split-content__link {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--colour-link);
font-weight: 700;
text-decoration: none;
transition:
color .2s ease;
}
.split-content__link:hover {
color: var(--colour-link-hover);
opacity: 1;
}
.split-content__link-icon {
display: inline-block;
text-decoration: none;
transition:
transform .2s ease;
}
.split-content__link:hover
.split-content__link-icon {
transform: translateX(3px);
}
/* ======================================================
Media
====================================================== */
.split-content__media {
min-width: 0;
overflow: hidden;
border-radius: 16px;
aspect-ratio: 4 / 3;
background: #f7f8fc;
}
.split-content__image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center center;
}
/* ======================================================
Image Position
====================================================== */
.split-content--image-top
.split-content__image {
object-position: center top;
}
.split-content--image-center
.split-content__image {
object-position: center center;
}
.split-content--image-bottom
.split-content__image {
object-position: center bottom;
}
/* ======================================================
Responsive
====================================================== */
@media (max-width: 900px) {
.split-content__inner {
gap: 40px;
}
}
@media (max-width: 700px) {
.split-content__inner {
grid-template-columns: 1fr;
gap: 32px;
}
.split-content--image-text
.split-content__content {
order: 1;
}
.split-content--image-text
.split-content__media {
order: 2;
}
.split-content__media {
aspect-ratio: 16 / 10;
border-radius: 12px;
}
.split-content__title {
font-size: 2rem;
}
}
/* ======================================================
Logo / Icon Grid
====================================================== */
.logo-icon-grid {
width: 100%;
}
.logo-icon-grid__items {
display: grid;
grid-template-columns:
repeat(4, minmax(0, 1fr));
gap: 24px;
}
.logo-icon-grid__item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 140px;
padding: 24px;
border: 1px solid var(--colour-border);
border-radius: var(--radius);
background: var(--colour-background);
color: var(--colour-heading);
text-align: center;
transition:
border-color .2s ease,
box-shadow .2s ease,
transform .2s ease;
}
.logo-icon-grid__item:hover {
border-color:
rgba(156, 72, 139, .35);
box-shadow:
var(--shadow-sm);
transform:
translateY(-2px);
}
/* ======================================================
Icon
====================================================== */
.logo-icon-grid__icon {
display: block;
width: 42px;
height: 42px;
margin-bottom: 12px;
color: var(--colour-accent);
}
/* ======================================================
Logo
====================================================== */
.logo-icon-grid__logo {
display: block;
width: auto;
max-width: 140px;
height: 48px;
margin-bottom: 12px;
object-fit: contain;
}
/* ======================================================
Label
====================================================== */
.logo-icon-grid__label {
display: block;
color: var(--colour-heading);
font-size: .95rem;
font-weight: 700;
line-height: 1.4;
}
/* ======================================================
Responsive
====================================================== */
@media (max-width: 900px) {
.logo-icon-grid__items {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.logo-icon-grid__items {
grid-template-columns:
repeat(2, minmax(0, 1fr));
gap: 16px;
}
.logo-icon-grid__item {
min-height: 120px;
padding: 20px 16px;
}
}
@media (max-width: 400px) {
.logo-icon-grid__items {
grid-template-columns: 1fr;
}
}
/* ======================================================
Testimonials
====================================================== */
.testimonials {
width: 100%;
}
.testimonials__items {
display: grid;
gap: 24px;
}
/* ======================================================
Column Variants
====================================================== */
.testimonials--1 .testimonials__items {
grid-template-columns:
minmax(0, 900px);
justify-content: center;
}
.testimonials--2 .testimonials__items {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
.testimonials--3 .testimonials__items {
grid-template-columns:
repeat(3, minmax(0, 1fr));
}
/* ======================================================
Testimonial Card
====================================================== */
.testimonials__item {
position: relative;
display: flex;
flex-direction: column;
min-width: 0;
padding: 36px;
border:
1px solid
var(--colour-border);
border-radius: var(--radius);
background: var(--colour-background);
color: var(--colour-heading);
box-shadow: var(--shadow-sm);
}
/* ======================================================
Decorative Quote
====================================================== */
.testimonials__item::before {
content: "“";
display: block;
height: 36px;
margin-bottom: 8px;
color: var(--colour-accent);
font-family: Georgia, serif;
font-size: 4rem;
font-weight: 700;
line-height: .8;
}
/* ======================================================
Quote
====================================================== */
.testimonials__quote {
margin: 0 0 28px;
color: var(--colour-heading);
font-size: 1.1rem;
line-height: 1.65;
}
.testimonials__quote p {
margin: 0 0 1rem;
}
.testimonials__quote p:last-child {
margin-bottom: 0;
}
.testimonials__quote strong {
font-weight: 700;
}
/* ======================================================
Author
====================================================== */
.testimonials__author {
display: flex;
align-items: center;
gap: 14px;
margin-top: auto;
padding-top: 20px;
border-top:
1px solid
var(--colour-border);
}
.testimonials__image {
flex: 0 0 auto;
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
}
.testimonials__author-details {
min-width: 0;
}
.testimonials__name {
color: var(--colour-heading);
font-weight: 700;
line-height: 1.4;
}
.testimonials__role {
margin-top: 3px;
color: var(--colour-text);
font-size: .9rem;
line-height: 1.4;
}
/* ======================================================
Responsive
====================================================== */
@media (max-width: 900px) {
.testimonials--3 .testimonials__items {
grid-template-columns:
repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 650px) {
.testimonials--2 .testimonials__items,
.testimonials--3 .testimonials__items {
grid-template-columns: 1fr;
}
.testimonials__item {
padding: 28px;
}
.testimonials__quote {
font-size: 1.05rem;
}
}
/* ======================================================
Product Configurator
====================================================== */
.product-configurator {
--config-brand: #141025;
--config-brand-light: #2d1d5d;
--config-accent: #9c488b;
--config-accent-dark: #843b77;
--config-surface: #ffffff;
--config-surface-soft: #f7f5fa;
--config-border: #e4dfea;
--config-text: #141025;
--config-muted: #687080;
width: 100%;
}
.product-configurator__product-name {
margin: 0 0 24px;
color: var(--config-text);
font-size: clamp(1.6rem, 2.5vw, 2.15rem);
line-height: 1.2;
font-weight: 700;
}
/* ======================================================
Main Layout
====================================================== */
.product-configurator__main {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(280px, 340px);
gap: 24px;
align-items: start;
}
/* ======================================================
Preset Packages
====================================================== */
.product-configurator__presets {
margin-bottom: 28px;
}
.product-configurator__presets-heading {
margin-bottom: 16px;
}
.product-configurator__presets-heading h3 {
margin: 0;
color: inherit;
font-size: 1.25rem;
line-height: 1.3;
}
.product-configurator__preset-list {
display: grid;
grid-template-columns:
repeat(
auto-fit,
minmax(220px, 1fr)
);
gap: 16px;
}
/* ======================================================
Preset Card
====================================================== */
.product-configurator__preset {
display: flex;
flex-direction: column;
width: 100%;
min-height: 110px;
padding: 20px;
border:
1px solid
var(--config-border);
border-radius: 12px;
background:
var(--config-surface);
color:
var(--config-text);
text-align: left;
font: inherit;
cursor: pointer;
transition:
border-color .2s ease,
box-shadow .2s ease,
transform .2s ease,
background-color .2s ease;
}
.product-configurator__preset:hover {
border-color:
var(--config-accent);
box-shadow:
0 8px 24px
rgba(20, 16, 37, .10);
transform:
translateY(-2px);
}
.product-configurator__preset:focus-visible {
outline:
3px solid
rgba(156, 72, 139, .3);
outline-offset: 2px;
}
.product-configurator__preset--featured {
border-color:
var(--config-accent);
box-shadow:
0 0 0 1px
var(--config-accent);
}
.product-configurator__preset-name {
display: block;
margin-bottom: 7px;
color:
var(--config-text);
font-size: 1.05rem;
font-weight: 700;
}
.product-configurator__preset-description {
display: block;
color:
var(--config-muted);
font-size: .9rem;
line-height: 1.5;
}
/* ======================================================
Resource Grid
====================================================== */
/*
* Resources use a 12-column grid on desktop.
*
* The individual resource controls how many columns
* it occupies using --resource-width.
*
* Examples:
*
* 12 = full width
* 6 = half width
* 4 = one third
* 3 = one quarter
* 8 = two thirds
* 9 = three quarters
*/
.product-configurator__resources {
display: grid;
grid-template-columns:
repeat(12, minmax(0, 1fr));
gap: 16px;
width: 100%;
}
/* ======================================================
Resource Card
====================================================== */
.product-configurator__resource {
grid-column:
span var(--resource-width, 12);
min-width: 0;
padding: 22px 24px;
border:
1px solid
var(--config-border);
border-radius: 12px;
background:
var(--config-surface);
box-shadow:
0 3px 12px
rgba(20, 16, 37, .05);
}
/* ======================================================
Resource Header
====================================================== */
.product-configurator__resource-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-bottom: 18px;
}
.product-configurator__resource-header > div:first-child {
flex: 1 1 auto;
min-width: 0;
}
.product-configurator__resource-label {
margin: 0;
color:
var(--config-text);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}
.product-configurator__resource-unit {
display: block;
margin-top: 3px;
color:
var(--config-muted);
font-size: .85rem;
}
.product-configurator__resource-value {
flex: 0 1 auto;
min-width: 64px;
max-width: 55%;
padding:
.45rem
.75rem;
border-radius: 7px;
background:
var(--config-brand);
color: #fff;
font-size: .95rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
white-space: normal;
overflow-wrap: anywhere;
}
/* ======================================================
Range Slider
====================================================== */
.product-configurator__slider {
display: block;
width: 100%;
height: 6px;
margin: 8px 0;
padding: 0;
appearance: none;
border-radius: 999px;
background:
#ddd8e2;
cursor: pointer;
}
/* WebKit */
.product-configurator__slider::-webkit-slider-runnable-track {
height: 6px;
border-radius: 999px;
background:
#ddd8e2;
}
.product-configurator__slider::-webkit-slider-thumb {
width: 20px;
height: 20px;
margin-top: -7px;
appearance: none;
border:
3px solid
#fff;
border-radius: 50%;
background:
var(--config-accent);
box-shadow:
0 2px 7px
rgba(20, 16, 37, .25);
cursor: pointer;
}
/* Firefox */
.product-configurator__slider::-moz-range-track {
height: 6px;
border-radius: 999px;
background:
#ddd8e2;
}
.product-configurator__slider::-moz-range-progress {
height: 6px;
border-radius: 999px;
background:
var(--config-accent);
}
.product-configurator__slider::-moz-range-thumb {
width: 20px;
height: 20px;
border:
3px solid
#fff;
border-radius: 50%;
background:
var(--config-accent);
box-shadow:
0 2px 7px
rgba(20, 16, 37, .25);
cursor: pointer;
}
.product-configurator__slider:focus-visible {
outline:
3px solid
rgba(156, 72, 139, .25);
outline-offset: 4px;
}
/* ======================================================
Quantity Control
====================================================== */
.product-configurator__quantity {
display: flex;
align-items: center;
max-width: 220px;
overflow: hidden;
border:
1px solid
var(--config-border);
border-radius: 8px;
background:
#fff;
}
.product-configurator__quantity-button {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
flex: 0 0 44px;
border: 0;
background:
var(--config-accent);
color: #fff;
font-size: 1.25rem;
line-height: 1;
cursor: pointer;
transition:
background-color .2s ease;
}
.product-configurator__quantity-button:hover {
background:
var(--config-accent-dark);
}
.product-configurator__quantity-input {
width: 100%;
min-width: 0;
height: 44px;
padding:
.5rem;
border: 0;
background:
#fff;
color:
var(--config-text);
font: inherit;
font-weight: 700;
text-align: center;
}
.product-configurator__quantity-input:focus {
outline: none;
}
/* ======================================================
Dropdown
====================================================== */
.product-configurator__select {
display: block;
width: 100%;
min-height: 46px;
padding:
.7rem
2.5rem
.7rem
.9rem;
border:
1px solid
var(--config-border);
border-radius: 8px;
background-color:
#fff;
color:
var(--config-text);
font: inherit;
font-size: .95rem;
cursor: pointer;
}
.product-configurator__select:hover {
border-color:
var(--config-accent);
}
.product-configurator__select:focus {
outline:
3px solid
rgba(156, 72, 139, .2);
outline-offset: 1px;
border-color:
var(--config-accent);
}
/* ======================================================
Radio / Yes-No Controls
====================================================== */
.product-configurator__radio-group {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 0;
padding: 0;
border: 0;
}
.product-configurator__radio-option {
position: relative;
flex: 1 1 180px;
min-width: 0;
}
.product-configurator__radio-option input {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.product-configurator__radio-option label {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 46px;
padding: .7rem 1rem;
border: 1px solid var(--config-border);
border-radius: 8px;
background: #fff;
color: var(--config-text);
font: inherit;
font-size: .95rem;
font-weight: 600;
line-height: 1.3;
text-align: center;
cursor: pointer;
transition:
border-color .2s ease,
background-color .2s ease,
color .2s ease,
box-shadow .2s ease;
}
.product-configurator__radio-option label:hover {
border-color: var(--config-accent);
}
.product-configurator__radio-option input:checked + label {
border-color: var(--config-accent);
background: var(--config-accent);
color: #fff;
box-shadow: 0 3px 10px rgba(20, 16, 37, .12);
}
.product-configurator__radio-option input:focus-visible + label {
outline: 3px solid rgba(156, 72, 139, .2);
outline-offset: 2px;
}
.product-configurator__yesno
.product-configurator__radio-option {
flex: 0 1 180px;
}
@media (max-width: 600px) {
.product-configurator__radio-option {
flex-basis: 100%;
}
.product-configurator__yesno
.product-configurator__radio-option {
flex: 1 1 0;
}
}
/* ======================================================
Price Summary
====================================================== */
.product-configurator__summary {
position: sticky;
top: 24px;
}
.product-configurator__summary-inner {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 28px;
border-radius: 14px;
background:
linear-gradient(
135deg,
#141025 0%,
#3e2880 100%
);
color: #fff;
box-shadow:
0 12px 35px
rgba(20, 16, 37, .18);
}
.product-configurator__summary-label {
margin-bottom: 6px;
color:
rgba(255, 255, 255, .72);
font-size: .85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .06em;
}
.product-configurator__price {
color: #fff;
font-size:
clamp(
2rem,
4vw,
2.8rem
);
font-weight: 800;
line-height: 1.1;
}
.product-configurator__billing {
margin-top: 4px;
color:
rgba(255, 255, 255, .72);
font-size: .9rem;
}
/* ======================================================
Order Button
====================================================== */
.product-configurator__order {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 50px;
margin-top: 24px;
padding:
.8rem
1.25rem;
border: 0;
border-radius: 8px;
background:
var(--config-accent);
color: #fff;
font: inherit;
font-size: .95rem;
font-weight: 700;
line-height: 1.2;
text-align: center;
cursor: pointer;
transition:
background-color .2s ease,
transform .2s ease,
box-shadow .2s ease;
}
.product-configurator__order:hover {
background:
var(--config-accent-dark);
box-shadow:
0 7px 18px
rgba(0, 0, 0, .2);
transform:
translateY(-1px);
}
.product-configurator__order:focus-visible {
outline:
3px solid
rgba(255, 255, 255, .5);
outline-offset: 3px;
}
.product-configurator__order:active {
transform:
translateY(0);
}
/* ======================================================
Hidden Configuration Data
====================================================== */
.product-configurator__data {
display: none;
}
/* ======================================================
Responsive - Tablet
====================================================== */
@media (max-width: 900px) {
.product-configurator__main {
grid-template-columns: 1fr;
}
/*
* All resources become full width on smaller
* screens regardless of their desktop width.
*/
.product-configurator__resource {
grid-column: 1 / -1;
}
.product-configurator__summary {
position: static;
order: -1;
}
.product-configurator__summary-inner {
display: grid;
grid-template-columns:
auto
auto;
align-items: center;
column-gap: 16px;
}
.product-configurator__summary-label {
grid-column: 1 / -1;
margin-bottom: 0;
}
.product-configurator__price {
grid-column: 1;
font-size: 2rem;
}
.product-configurator__billing {
grid-column: 2;
margin-top: 0;
}
.product-configurator__order {
grid-column: 1 / -1;
margin-top: 16px;
}
}
/* ======================================================
Responsive - Mobile
====================================================== */
@media (max-width: 600px) {
.product-configurator__preset-list {
grid-template-columns: 1fr;
}
.product-configurator__resource {
padding: 18px;
}
.product-configurator__resource-header {
gap: 12px;
}
.product-configurator__resource-value {
min-width: 56px;
max-width: 70%;
padding:
.4rem
.6rem;
font-size: .9rem;
}
.product-configurator__summary-inner {
padding: 22px;
}
}
/* ======================================================
Product Configurator - Section Background Colours
====================================================== */
/*
* The configurator itself sits inside the Section, so
* headings directly on the Section background should
* inherit the Section's light/dark colour.
*/
/* ------------------------------------------------------
Dark / Accent section
------------------------------------------------------ */
.section--dark .product-configurator,
.section--accent .product-configurator {
color: #fff;
}
/*
* "Choose a package" heading is directly on the
* Section background.
*/
.section--dark
.product-configurator__presets-heading h3,
.section--accent
.product-configurator__presets-heading h3 {
color: #fff !important;
}
/*
* ------------------------------------------------------
* White configurator cards
*
* These MUST override the Section's generic h3 rules.
* ------------------------------------------------------
*/
.section--dark
.product-configurator__resource-label,
.section--accent
.product-configurator__resource-label {
color: #141025 !important;
}
.section--dark
.product-configurator__resource-unit,
.section--accent
.product-configurator__resource-unit {
color: #5c667a !important;
}
/*
* Preset cards
*/
.section--dark
.product-configurator__preset-name,
.section--accent
.product-configurator__preset-name {
color: #141025 !important;
}
.section--dark
.product-configurator__preset-description,
.section--accent
.product-configurator__preset-description {
color: #5c667a !important;
}
/*
* Resource values
*/
.section--dark
.product-configurator__resource-value,
.section--accent
.product-configurator__resource-value {
color: #fff !important;
}
/*
* Form controls inside the white cards
*/
.section--dark
.product-configurator__select,
.section--accent
.product-configurator__select {
color: #141025;
}
/*
* Descriptions directly on the Section background,
* rather than inside cards.
*/
.section--dark
.product-configurator__presets-heading
.product-configurator__description,
.section--accent
.product-configurator__presets-heading
.product-configurator__description {
color: rgba(255, 255, 255, .75);
}
/* ======================================================
Scroll Reveal Animations
====================================================== */
/*
* The animation system is progressively enhanced.
*
* Without JavaScript, content remains visible.
*
* When JavaScript is available, animated elements begin
* hidden until they enter the viewport.
*
* Sections are treated specially:
*
* The Section itself remains fixed so its background,
* overlay and boundaries cannot produce compositing seams.
*
* The Section's inner container is animated instead.
*/
/* ======================================================
Default State
====================================================== */
[data-animation] {
opacity: 1;
transform: none;
}
/* ======================================================
Sections
====================================================== */
/*
* Never transform or fade the Section itself.
*
* This prevents 1px rendering seams between adjacent
* Sections on certain screen sizes.
*/
.section[data-animation] {
opacity: 1;
transform: none;
}
/* ======================================================
Section Content Initial State
====================================================== */
.js .section[data-animation] > .container {
opacity: 0;
transition:
opacity .7s ease,
transform .7s cubic-bezier(.22, 1, .36, 1);
}
/* ======================================================
Section Content - Fade Up
====================================================== */
.js .section[data-animation="fade-up"] > .container {
transform:
translate3d(0, 32px, 0);
}
/* ======================================================
Section Content - Fade
====================================================== */
.js .section[data-animation="fade"] > .container {
transform:
translate3d(0, 0, 0);
}
/* ======================================================
Section Content - Slide Left
====================================================== */
.js .section[data-animation="slide-left"] > .container {
transform:
translate3d(-40px, 0, 0);
}
/* ======================================================
Section Content - Slide Right
====================================================== */
.js .section[data-animation="slide-right"] > .container {
transform:
translate3d(40px, 0, 0);
}
/* ======================================================
Section Content - Scale
====================================================== */
.js .section[data-animation="scale"] > .container {
transform:
scale(.96);
}
/* ======================================================
Section Content Visible State
====================================================== */
.section[data-animation].farbyte-animation-visible > .container {
opacity: 1;
transform:
translate3d(0, 0, 0)
scale(1);
}
/* ======================================================
Non-Section Elements
====================================================== */
.js [data-animation]:not(.section) {
opacity: 0;
transition:
opacity .7s ease,
transform .7s cubic-bezier(.22, 1, .36, 1);
}
/* ======================================================
Fade Up
====================================================== */
.js [data-animation="fade-up"]:not(.section) {
transform:
translate3d(0, 32px, 0);
}
/* ======================================================
Fade
====================================================== */
.js [data-animation="fade"]:not(.section) {
transform:
translate3d(0, 0, 0);
}
/* ======================================================
Slide Left
====================================================== */
.js [data-animation="slide-left"]:not(.section) {
transform:
translate3d(-40px, 0, 0);
}
/* ======================================================
Slide Right
====================================================== */
.js [data-animation="slide-right"]:not(.section) {
transform:
translate3d(40px, 0, 0);
}
/* ======================================================
Scale
====================================================== */
.js [data-animation="scale"]:not(.section) {
transform:
scale(.96);
}
/* ======================================================
Non-Section Visible State
====================================================== */
[data-animation]:not(.section).farbyte-animation-visible {
opacity: 1;
transform:
translate3d(0, 0, 0)
scale(1);
}
/* ======================================================
Reduced Motion
====================================================== */
@media (prefers-reduced-motion: reduce) {
[data-animation],
.js [data-animation],
.js .section[data-animation] > .container {
opacity: 1;
transform: none;
transition: none !important;
}
}
/* ======================================================
Section Animation - Disabled State
====================================================== */
/*
* Feature cards, service cards and split-content historically
* supplied their own data-animation attributes. A Section set
* to `None` must disable those child reveals as well; otherwise
* the page still appears to animate even though the Section
* animation setting says None.
*
* When a Section has an animation selected, these child rules
* remain active and retain their existing behaviour.
*/
.js .section:not([data-animation]) [data-animation]:not(.section) {
opacity: 1;
transform: none;
transition: none;
will-change: auto;
}
/* ======================================================
Animation Compositing
====================================================== */
/*
* Sections themselves must never be promoted to an
* animation layer. Only their content is animated.
*/
.section[data-animation] {
will-change: auto;
}
/*
* Normal animated elements can be promoted because
* they are the actual animation targets.
*/
[data-animation]:not(.section) {
will-change: opacity, transform;
}
/*
* Section containers are the actual animation targets.
*/
.js .section[data-animation] > .container {
will-change: opacity, transform;
}
/* ==========================================================================
Domain Order
========================================================================== */
.domain-order {
width: 100%;
}
.domain-order__inner {
width: 100%;
max-width: 900px;
margin-inline: auto;
}
.domain-order__heading {
margin: 0 0 var(--space-3);
}
.domain-order__description {
margin: 0 0 var(--space-5);
max-width: 720px;
}
.domain-order__form {
width: 100%;
}
.domain-order__fields {
display: flex;
align-items: stretch;
gap: var(--space-3);
width: 100%;
}
/* --------------------------------------------------------------------------
Domain Input
-------------------------------------------------------------------------- */
.domain-order__input {
flex: 1 1 auto;
min-width: 0;
width: auto;
height: 64px;
min-height: 64px;
padding: 0 1.35rem;
border: 1px solid var(--colour-border);
border-radius: var(--radius);
background: var(--colour-background);
color: var(--colour-heading);
font: inherit;
font-size: 1.05rem;
line-height: 1.2;
box-shadow: var(--shadow-sm);
box-sizing: border-box;
transition:
border-color .2s ease,
box-shadow .2s ease;
}
.domain-order__input::placeholder {
color: var(--colour-text);
opacity: .65;
}
.domain-order__input:hover {
border-color: var(--colour-accent);
}
.domain-order__input:focus {
outline: none;
border-color: var(--colour-accent);
box-shadow:
0 0 0 3px color-mix(
in srgb,
var(--colour-accent) 14%,
transparent
),
var(--shadow-sm);
}
.domain-order__input[aria-invalid="true"] {
border-color: var(--colour-accent-hover);
}
/* --------------------------------------------------------------------------
Domain Order Button
-------------------------------------------------------------------------- */
.domain-order__button.button--primary,
.domain-order__button {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: auto;
min-width: 160px;
height: 64px;
min-height: 64px;
padding: 0 1.75rem;
border: 0;
border-radius: var(--radius);
background: var(--colour-accent);
color: #fff;
font: inherit;
font-weight: 700;
line-height: 1;
text-decoration: none;
cursor: pointer;
white-space: nowrap;
box-sizing: border-box;
transition:
background-color .2s ease,
color .2s ease,
transform .2s ease,
box-shadow .2s ease;
}
.domain-order__button.button--primary:hover,
.domain-order__button:hover {
background: var(--colour-accent-hover);
color: #fff;
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.domain-order__button.button--primary:focus,
.domain-order__button.button--primary:focus-visible,
.domain-order__button:focus,
.domain-order__button:focus-visible {
outline: none;
background: var(--colour-accent);
color: #fff;
box-shadow:
0 0 0 3px color-mix(
in srgb,
var(--colour-accent) 20%,
transparent
),
var(--shadow);
}
.domain-order__button.button--primary:active,
.domain-order__button:active {
background: var(--colour-accent-hover);
color: #fff;
transform: translateY(0);
}
.domain-order__button.button--primary:disabled,
.domain-order__button:disabled {
background: var(--colour-accent);
color: #fff;
cursor: not-allowed;
transform: none;
box-shadow: none;
opacity: .65;
}
/* --------------------------------------------------------------------------
Validation Error
-------------------------------------------------------------------------- */
.domain-order__error {
margin: var(--space-3) 0 0;
color: var(--colour-accent-hover);
font-size: .92rem;
}
/* --------------------------------------------------------------------------
Editor Preview
-------------------------------------------------------------------------- */
.domain-order--editor {
padding: var(--space-6);
border: 1px dashed var(--colour-border);
border-radius: var(--radius-large);
background: var(--colour-surface);
}
.domain-order__preview-label {
display: inline-flex;
align-items: center;
margin-bottom: var(--space-4);
padding: .35rem .65rem;
border-radius: 999px;
background: color-mix(
in srgb,
var(--colour-accent) 10%,
transparent
);
color: var(--colour-accent);
font-size: .78rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
}
.domain-order--editor .domain-order__input {
cursor: not-allowed;
}
.domain-order--editor .domain-order__button {
cursor: not-allowed;
opacity: .9;
}
/* --------------------------------------------------------------------------
Configuration Warning
-------------------------------------------------------------------------- */
.domain-order--error {
padding: var(--space-5);
border: 1px solid var(--colour-border);
border-radius: var(--radius);
background: var(--colour-surface);
}
.domain-order__notice {
color: var(--colour-text);
}
/* --------------------------------------------------------------------------
Mobile
-------------------------------------------------------------------------- */
@media (max-width: 700px) {
.domain-order__fields {
flex-direction: column;
gap: var(--space-3);
}
.domain-order__input,
.domain-order__button {
width: 100%;
}
.domain-order__input {
height: 58px;
min-height: 58px;
}
.domain-order__button {
height: 56px;
min-height: 56px;
}
.domain-order--editor {
padding: var(--space-5);
}
}
/* ======================================================
CTA Light - Secondary Button
====================================================== */
.cta--light .cta__button.button-secondary {
border: 1px solid var(--colour-border);
background: transparent;
color: var(--colour-heading);
}
.cta--light .cta__button.button-secondary:hover {
border-color: var(--colour-accent);
background: var(--colour-surface);
color: var(--colour-accent);
}
/* ======================================================
CTA Dark / Accent - Secondary Button
====================================================== */
.cta--dark .cta__button.button-secondary,
.cta--accent .cta__button.button-secondary {
border: 1px solid rgba(255, 255, 255, .3);
background: transparent;
color: #FFFFFF;
}
.cta--dark .cta__button.button-secondary:hover,
.cta--accent .cta__button.button-secondary:hover {
border-color: rgba(255, 255, 255, .55);
background: rgba(255, 255, 255, .06);
color: #FFFFFF;
}
/* ======================================================
Google Reviews
====================================================== */
.google-reviews {
width: 100%;
}
.google-reviews__heading {
margin: 0 0 32px;
text-align: center;
}
.google-reviews__carousel {
position: relative;
display: flex;
align-items: center;
gap: 16px;
}
.google-reviews__viewport {
min-width: 0;
flex: 1 1 auto;
overflow: hidden;
}
.google-reviews__track {
display: flex;
transition: transform .35s ease;
will-change: transform;
}
.google-reviews__card {
flex: 0 0 calc((100% - 32px) / 3);
min-width: 0;
margin: 0;
padding: 24px;
border-radius: 12px;
background: #fff;
color: #4f5360;
box-sizing: border-box;
}
.google-reviews__track {
gap: 16px;
}
.google-reviews__meta {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
margin-bottom: 28px;
}
.google-reviews__author {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
.google-reviews__avatar {
flex: 0 0 44px;
width: 44px;
height: 44px;
border-radius: 50%;
object-fit: cover;
}
.google-reviews__avatar--initials {
display: flex;
align-items: center;
justify-content: center;
background: #4285f4;
color: #fff;
font-size: .9rem;
font-weight: 600;
}
.google-reviews__author-details {
min-width: 0;
}
.google-reviews__name {
overflow: hidden;
color: #252525;
font-size: .95rem;
font-weight: 600;
line-height: 1.3;
text-overflow: ellipsis;
white-space: nowrap;
}
.google-reviews__year {
margin-top: 3px;
color: #888;
font-size: .8rem;
}
.google-reviews__google {
flex: 0 0 auto;
font-size: 1.15rem;
font-weight: 500;
letter-spacing: -.04em;
line-height: 1;
}
.google-reviews__google-letter--blue { color: #4285f4; }
.google-reviews__google-letter--red { color: #ea4335; }
.google-reviews__google-letter--yellow { color: #fbbc05; }
.google-reviews__google-letter--green { color: #34a853; }
.google-reviews__text {
min-height: 128px;
color: #5f6368;
font-size: .95rem;
line-height: 1.65;
}
.google-reviews__text p {
margin: 0 0 1rem;
}
.google-reviews__text p:last-child {
margin-bottom: 0;
}
.google-reviews__read-more {
display: inline-flex;
gap: 7px;
margin-top: 12px;
color: #4285f4;
font-size: .9rem;
text-decoration: underline;
}
.google-reviews__read-more:hover {
color: #3367d6;
}
.google-reviews__arrow {
flex: 0 0 44px;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
background: var(--colour-accent);
color: #fff;
cursor: pointer;
font-size: 1.15rem;
line-height: 44px;
text-align: center;
}
.google-reviews__arrow:disabled {
opacity: .35;
cursor: default;
}
.google-reviews__dots {
display: flex;
justify-content: center;
gap: 7px;
margin-top: 24px;
}
.google-reviews__dot {
width: 8px;
height: 8px;
padding: 0;
border: 0;
border-radius: 50%;
background: rgba(255,255,255,.45);
cursor: pointer;
}
.google-reviews__dot.is-active {
background: var(--colour-accent);
}
@media (max-width: 1000px) {
.google-reviews__card { flex-basis: calc((100% - 16px) / 2); }
}
@media (max-width: 700px) {
.google-reviews__carousel { gap: 8px; }
.google-reviews__arrow { flex-basis: 36px; width: 36px; height: 36px; line-height: 36px; }
.google-reviews__card { flex-basis: 100%; padding: 22px; }
.google-reviews__track { gap: 0; }
}
/* Google Reviews editor */
.google-reviews-editor__heading { margin: 0 0 24px; }
.google-reviews-editor__items { display: grid; gap: 20px; margin-bottom: 20px; }
.google-reviews-editor__item { padding: 20px; border: 1px solid #ddd; border-radius: 8px; background: #fff; }
.google-reviews-editor__item-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.google-reviews-editor__field > label { display: block; margin-bottom: 6px; font-weight: 600; }
.google-reviews-editor__review { min-height: 100px; padding: 10px; border: 1px solid #949494; border-radius: 2px; }
.google-reviews-editor__image img { display: block; width: 60px; height: 60px; margin-bottom: 10px; border-radius: 50%; object-fit: cover; }
.google-reviews-editor__empty { margin-bottom: 20px; color: #666; }