/* --------------------------
Variables
--------------------------*/
/* we target mobile first */
:root {
/* Color Palette */
--light: 250, 249, 246;
--dark: 27, 27, 24;
--shadow: 60, 60, 60;
--primary: 70, 130, 180;
--secondary: 244, 162, 97;
/* Font Families */
--sans: "Questrial", sans-serif;
--serif: "Cormorant Garamond", serif;
--logo: "Crimson Pro", serif;
/* Font Sizes */
--xsmall: clamp(0.875rem, 0.5rem + 1vw, 1rem); /* ~14px–16px */
--small: clamp(1rem, 0.6rem + 1.2vw, 1.125rem); /* ~16px–18px */
--medium: clamp(1.25rem, 0.8rem + 1.5vw, 1.5rem); /* ~20px–24px */
--large: clamp(1.75rem, 1rem + 2vw, 2rem); /* ~28px–36px */
--xlarge: clamp(2rem, 1.5rem + 2.5vw, 2.5rem); /* ~36px–48px */
--xxlarge: clamp(3rem, 2rem + 4vw, 4rem); /* ~48px–64px */
/* Font Line Heights */
--tight: 100%;
--airy: 125%;
/* Spacing */
--br: 1rem;
--spacer: 1rem;
--icon-space: 40px;
--large-icon: 150px;
--button-space: 1rem 2rem;
--header-space: 1rem;
--inner-space: 2rem;
--section-space: 2rem 2rem 4rem 2rem;
/* Content Widths */
--container: 1300px;
--one-half: 100%;
--one-third: 100%;
--two-thirds: 100%;
--three-fourths: 100%;
/* Misc */
--corners: 4px;
}
/* then we target desktop */
@media (min-width: 1024px) {
:root {
/* Spacing */
--section-space: 2rem 3rem 4rem 3rem;
/* Content Widths */
--one-half: 50%;
--one-third: 33%;
--two-thirds: 66%;
--three-fourths: 75%;
}
}
/* --------------------------
CSS Reset
--------------------------*/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: none;
background: none;
outline: none;
}
html {
font-size: 16px;
}
html, body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
a {
text-decoration: none;
color: inherit;
}
ul, ol {
list-style: disc;
list-style-position: inside;
padding-left: var(--spacer);
}
/* --------------------------
Widths, Heights
--------------------------*/
/* width */
.logo {
width: 300px;
max-width: var(--one-half);
}
img, picture, video, canvas, svg {
max-width: 100%;
}
.container {
max-width: var(--container);
}
#valueprop h2 {
max-width: var(--two-thirds);
}
#hero .heading {
max-width: var(--three-fourths);
}
/* height */
html, body {
height: 100%;
}
img, picture, video, canvas, svg {
height: auto;
}
/* --------------------------
Spacing
--------------------------*/
/* Line Height */
h1, h2, h3, h4, h5, h6 {
line-height: var(--tight);
}
body, p, div, ul, ol, li,
.bio h3 {
line-height: var(--airy);
}
/* Margins */
#content h2,
#about .cta {
margin-top: var(--br);
}
#content p,
#content h1,
#content h2,
#content h3,
#content ul,
#content ol,
.bio p {
margin-bottom: var(--br);
}
#hero .logo,
#hero .subheading,
#welcome h2,
#welcome .content p,
#services h2,
#services .services-listing,
#services .services-listing .service,
#valueprop .logo,
#about .client,
#about .bio h3,
#connect .booking,
#connect .booking h2,
#connect .booking p,
#connect .contact,
#connect .contact h2,
#legal .date,
#legal h1 {
margin-bottom: var(--spacer);
}
#hero .subheading,
#hero .cta a,
#welcome h2,
#welcome .quote,
#about .bio,
#about .cta,
#header .navigation,
#about .bio .cta {
margin-top: var(--spacer);
}
#footer .navigation a,
#header .navigation a {
margin-left: var(--spacer);
}
#hero .navigation a {
margin-right: var(--br);
}
@media (min-width: 1024px) {
#services .services-listing .service,
#services h3 {
margin-left: var(--spacer);
}
#services .services-listing .service,
#services h3 {
margin-right: var(--spacer);
}
}
/* Padding */
#services .services-listing .service .icon,
#services h2 {
padding: var(--br);
}
#header .container,
#footer .container,
#hero .index-header {
padding: var(--header-space);
}
#valueprop h2,
#about .bio {
padding: var(--inner-space);
}
#services .services-listing .service,
.container {
padding: var(--section-space);
}
.cta a,
a.link-button {
padding: var(--button-space);
}
#legal h2 {
padding-bottom: calc(var(--spacer) * 0.5);
}
#legal p,
#legal ul,
.testimonial .icon {
padding-bottom: calc(var(--spacer) * 2);
}
/* --------------------------
Positioning
--------------------------*/
/* Align Left */
#connect .booking {
text-align: left;
}
/* Align Center */
.cta a,
#services h2,
#services .services-listing .service,
#services .banner,
#valueprop,
#connect,
#services .services-listing .service .icon,
.testimonial .icon,
#hero .navigation {
text-align: center;
}
/* Align Right */
#hero .cta,
#about .testimonial .client,
#about .cta,
#connect .contact,
#connect .contact .info,
#connect .contact .links,
#header .logo,
#footer,
#header .navigation {
text-align: right;
}
/* Position with Margins */
.container,
#valueprop .logo,
#valueprop h2,
#services .services-listing .service .icon {
margin: auto;
}
/* Position with Display */
img, picture, video, canvas, svg,
#connect .contact .links a,
#services h2,
.bio h3,
#services .services-listing,
#connect .container,
#hero .index-header .navigation {
display: block;
}
h1, h2, h3, h4, h5, h6,
.cta a,
#welcome .quote,
#welcome .content,
#about .testimonial,
#about .bio,
#services .banner a,
#footer .navigation a,
a.link-button {
display: inline-block;
}
/* Position Content */
#welcome .quote,
#about .testimonial {
vertical-align: top;
}
#header .container {
display: flex;
}
#header .container .navigation {
flex: 2;
}
/* Clear Content */
.cta a {
clear: both;
}
@media (min-width: 1024px) {
#hero .index-header .navigation {
text-align: right;
}
#hero .index-header .navigation {
display: inline-block;
}
#hero .index-header,
#services .services-listing,
#footer .container {
display: flex;
}
/* Flex Styles */
#services .services-listing .service {
flex: 1;
}
#footer .navigation,
#hero .index-header .navigation {
flex: 2;
}
}
/* --------------------------
Font Families
--------------------------*/
/* Logo */
.logo {
font-family: var(--logo);
}
/* Sans */
body {
font-family: var(--sans);
}
/* Serif */
h1, h2, h3,
.quote, .client {
font-family: var(--serif);
}
/* Inherit */
input, button, textarea, select {
font: inherit;
}
/* --------------------------
Font Sizes
--------------------------*/
/* XSmall */
#legal .date,
#footer {
font-size: var(--xsmall);
}
/* Small */
body {
font-size: var(--small);
}
/* Medium */
.logo,
.cta a,
#welcome .content,
#services .banner,
#about .testimonial .quote,
#about .bio h3 {
font-size: var(--medium);
}
/* Large */
h3,
#hero p.subheading,
#welcome .quote h2,
#legal h2 {
font-size: var(--large);
}
/* XLarge */
h2,
#services .services-listing .service .icon,
#services .banner i,
.testimonial .icon {
font-size: var(--xlarge);
}
/* XXLarge */
h1 {
font-size: var(--xxlarge);
}
/* --------------------------
Font Styles
--------------------------*/
/* Weights */
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
#welcome p.intro,
#services .services-listing .service h3,
#connect .contact .links a,
#header .navigation a {
font-weight: bold;
}
#content h1,
#content h2 {
font-weight: 500;
}
/* Kerning */
.cta a,
#connect .contact .links a,
#hero .navigation a,
#header .navigation a,
#footer .navigation a {
letter-spacing: 1px;
}
/* Text Decoration */
.section a:hover {
text-decoration: underline;
}
.section .cta a:hover {
text-decoration: none;
}
/* --------------------------
Colors
--------------------------*/
/* Backgrounds */
body,
.cta a {
background: rgba(var(--primary), 1);
}
#about .cta a {
background-color: rgba(var(--secondary), 1);
}
#welcome,
#services .services-listing .service,
#about .bio,
#legal,
#content {
background: rgba(var(--light), 1);
}
#hero .navigation a {
background: rgba(var(--dark), 0.75);
}
/* Font Colors */
#about .bio h2,
#legal a,
#content a,
#services .services-listing .service .icon,
#welcome .intro i {
color: rgba(var(--primary), 1);
}
#hero h1,
#valueprop h2 {
color: rgba(var(--secondary), 1);
}
body {
color: rgba(var(--light), 1);
}
#welcome,
#services .services-listing .service,
#about .bio h3,
#about .bio p,
#about .cta a,
#legal,
#content,
#content a:hover {
color: rgba(var(--dark), 1);
}
/* --------------------------
Backgrounds
--------------------------*/
/* No Repeat */
.cta a,
#welcome p.intro,
#services .services-listing .service h3,
#services .banner a {
background-repeat: no-repeat;
}
/* Blend Mode */
#hero,
#valueprop,
#connect {
background-blend-mode: multiply;
}
/* Size */
.cta a {
background-size: auto;
}
#hero.section,
#valueprop.section,
#connect.section {
background-size: cover;
}
#welcome p.intro,
#services .banner a {
background-size: contain;
}
/* --------------------------
Container Styles
--------------------------*/
/* Rounded Corners */
.cta a,
#services .services-listing .service,
#about .bio,
a.link-button {
border-radius: var(--corners);
}
/* --------------------------
CTA Styles
--------------------------*/
.cta a {
padding: 0.75em 1.5em;
border: none;
box-shadow: 0 0.25em 0 rgba(var(--shadow), 1);
transform: translateY(0);
transition: all 0.1s ease-in-out;
cursor: pointer;
}
.cta a:hover {
transform: translateY(0.05em);
box-shadow: 0 0.20em 0 rgba(var(--shadow), 1);
}
.cta a:active {
transform: translateY(0.25em);
box-shadow: 0 0 0 rgba(var(--shadow), 1);
}
/* --------------------------
Icon Styles
--------------------------*/
/*!
* Iconoir
* Copyright (c) 2025 Luca Burgio - https://iconoir.com
* License - https://github.com/iconoir-icons/iconoir/blob/main/LICENSE (Code: MIT License)
* CSS file created by Till Esser (@Wiwaltill) and automated by Pascal Jufer (@paescuj)
*/
*[class^='iconoir-']::before,
*[class*=' iconoir-']::before {
content: ' ';
display: block;
background: currentColor;
mask-size: cover;
-webkit-mask-size: cover;
width: 1em;
height: 1em;
}
*[class^='iconoir-'],
*[class*=' iconoir-'] {
display: inline-block;
vertical-align: middle;
margin: auto 0.2rem;
}
/* Arrow Down Circle */
.iconoir-arrow-down-circle-solid::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Arrow Right Circle */
.iconoir-arrow-right-circle-solid::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Bright Star */
.iconoir-bright-star::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Calendar Check Solid */
.iconoir-calendar-check-solid::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* CPU (Circuit) */
.iconoir-cpu::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Intersect */
.iconoir-intersect::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Mail */
.iconoir-mail-solid::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Network Reverse */
.iconoir-network-reverse::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Phone */
.iconoir-phone-plus-solid::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* Sparks Solid (Sparkle) */
.iconoir-sparks-solid::before {
mask-image:url('data:image/svg+xml;charset=utf-8,');
-webkit-mask-image:url('data:image/svg+xml;charset=utf-8,');
}
/* --------------------------
Hero Section
--------------------------*/
#hero {
background:
linear-gradient(15deg, rgb(var(--primary)) 20%, rgb(var(--secondary)) 100%),
url('img/bg-1.jpg') center no-repeat;
}
/* --------------------------
Welcome Section
--------------------------*/
#welcome .graphic img {
max-width: 60%;
margin: 0 auto;
padding-top: var(--spacer);
}
@media (min-width: 1024px) {
#welcome .container {
display: flex;
flex-direction: row;
}
#welcome .content {
order: 2;
flex: 4;
}
#welcome .graphic {
order: 1;
flex: 3;
}
#welcome .graphic img {
max-width: 75%;
}
}
/* --------------------------
Services Section
--------------------------*/
#services {
--s: 135px;
--_g: #0000 90deg,rgba(var(--light), 0.10) 0;
background:
conic-gradient(from 90deg at 2px 2px,var(--_g)),
conic-gradient(from 90deg at 1px 1px,var(--_g)),
rgb(var(--primary));
background-size: var(--s) var(--s), calc(var(--s)/5) calc(var(--s)/5);
}
#services .banner {
padding-top: var(--spacer);
}
#services .banner .pretext {
display: block;
}
#services .banner a {
margin: var(--br) auto 0 auto;
background: rgba(var(--secondary), 1);
box-shadow: 0 0.25em 0 rgba(var(--shadow), 0.25);
}
#services .banner a:hover {
box-shadow: 0 0.20em 0 rgba(var(--shadow), 0.30);
}
#services .banner a:active {
box-shadow: 0 0 0 rgba(var(--shadow), 0.30);
}
@media (min-width: 1024px) {
}
/* --------------------------
Value Prop Section
--------------------------*/
#valueprop {
background:
linear-gradient(15deg, rgb(var(--primary)) 20%, rgb(var(--secondary)) 100%),
url('img/bg-2.jpg') center no-repeat;
}
/* --------------------------
About Section
--------------------------*/
#about .testimonial {
display: flex;
flex-direction: column;
}
#about .testimonial .graphic {
order: 2;
flex: 2;
text-align: right;
}
#about .testimonial .graphic img {
max-width: 75%;
display: inline-block;
margin: var(--spacer) 0;
}
#about .testimonial .content {
order: 1;
flex: 2;
}
#about .testimonial .content .quote {
padding: var(--spacer);
}
#about .testimonial .content .client em {
display: block;
}
@media (min-width: 1024px) {
#about .testimonial, #about .bio {
vertical-align: bottom;
display: inline-block;
width: calc(var(--one-half) - (var(--spacer) * 3));
}
#about .testimonial {
vertical-align: middle;
}
#about .bio {
margin-left: calc(var(--spacer) * 3);
}
}
#about .cta a {
box-shadow: 0 0.25em 0 rgba(var(--shadow), 0.15);
}
#about .cta a:hover {
box-shadow: 0 0.20em 0 rgba(var(--shadow), 0.20);
}
#about .cta a:active {
box-shadow: 0 0 0 rgba(var(--shadow), 0.20);
}
/* --------------------------
Connect Section
--------------------------*/
#connect {
background:
linear-gradient(15deg, rgb(var(--primary)) 20%, rgb(var(--secondary)) 100%),
url('img/bg-3.jpg') center no-repeat;
}