/*TOC
variables
global
backgrounds
nav
headings
links
images
buttons
home
contact
sponsors
service
contract
tags
posts
post
page
pagination
videos
error
media queries
Ghost overwrites
*/
/*variables*/
:root {
/*colors*/
--darkGray: #111111;
--grayTrasp: rgba(48, 48, 48, 0.9);
--gray: #222222;
--grayLighter: #C1C1C1;
--white: #FFF;
--green: #63F6C1;
--orange: #FF842C;
--red: #F66363;
--gold: #F6D663;
--blue: #63B1F6;
--blueDark: #36648c;
/*buttons*/
--radius: 20px;
/*font*/
--medium: 1.125rem;
/*1 rem (16px)*/
--small: 1rem;
--xSmall: 0.75rem;
/*font weight*/
--light: 200;
--semiBold: 400;
--bold: 600;
}
/*global*/
html,
body {
height: 100%;
}
body {
margin: 0;
background-color: var(--darkGray);
/*font included in <head>*/
font-family: 'Inter', sans-serif;
/*set root size for all fonts, all subsequent rem values based off this.
16 is industry default, also the standard size used in the site/p*/
font-size: 16px;
color: var(--white);
/*prevent text running off the screen on small phones*/
word-wrap: break-word;
}
.ww-mobile-only {
display: none;
}
.ww-hide {
display: none;
}
.ww-container {
max-width: 738px;
margin: 0 auto;
padding: 0 20px;
}
img {
width: 100%;
height: auto;
}
p {
/*18px*/
font-size: 1.125rem;
/*26px*/
line-height: 1.625rem;
}
li {
line-height: 1.3rem;
padding-bottom: 10px;
}
.ww-center {
text-align: center;
}
.ww-right {
text-align: right;
float: right;
}
.ww-flex {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
/*cards*/
.ww-card-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.ww-card {
padding: 20px;
background-color: var(--gray);
border-radius: 20px;
max-width: 320px;
width: 100%;
}
.ww-card div,
.ww-card i {
z-index: 2;
}
.ww-card i {
position: absolute;
right: 20px;
bottom: 26px;
font-size: 1.5rem;
}
/*backgrounds*/
.ww-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -2;
/* So it doesn't interfere with other elements */
pointer-events: none;
}
.ww-bg::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: -webkit-radial-gradient(50% 0%, circle, rgba(17, 17, 17, 0.4) 0%, rgba(17, 17, 17, 1) 100%);
background: radial-gradient(circle at 50% 0%, rgba(17, 17, 17, 0.4) 0%, rgba(17, 17, 17, 1) 100%);
/* Ensure it stays above the background image */
z-index: -1;
}
.ww-bg-img {
/*negatives compensate for blur not going into the bg*/
position: absolute;
top: 0;
left: 0;
height: calc(90%);
width: calc(110%);
z-index: -3;
background-size: cover;
filter: blur(20px);
-webkit-filter: blur(30px);
}
/*force proper rendering for blur*/
.ww-blur-fix {
will-change: filter;
backface-visibility: hidden;
transform: translateZ(0);
object-fit: cover;
background-color: rgba(17, 17, 17, 0.01);
overflow: hidden;
}
#ww-overlay {
background: var(--darkGray);
opacity: 0.85;
position: fixed;
width: 100%;
height: 100%;
z-index: 3;
top: 0;
left: 0;
display: none;
}
/*nav*/
nav {
display: flex;
flex-direction: column;
position: fixed;
z-index: 4;
width: 80%;
max-width: 698px;
top: 4.7vh;
left: 50%;
transform: translateX(-50%);
transition: transform 0.3s ease-in-out;
}
nav section {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
nav section div button {
margin-left: 15px;
}
nav section .ww-btn i {
margin-left: 0;
}
#ww-logo {
float: left;
padding-top: 6px;
}
#ww-menu-btn .fa-xmark {
display: none;
}
#ww-menu {
display: none;
text-align: right;
margin-top: 20px;
}
#ww-menu a {
margin-bottom: 20px;
display: block;
}
#ww-menu a.ww-btn {
width: 17px;
margin-left: 20px;
margin-bottom: 0;
border-radius: 30px !important;
font-size: 1.2rem;
}
/*correct offset paper airplane icon*/
#ww-menu a.ww-btn:first-of-type {
padding-right: 17px;
}
.ww-menu-inline {
display: flex;
flex-direction: row;
justify-content: right;
gap: 40px;
}
.ww-menu-inline .ww-menu-group {
margin-top: 0;
}
.ww-menu-group {
margin-top: 30px;
}
.ww-menu-group a {
font-size: 1.4rem;
margin-bottom: 20px;
}
.ww-menu-small a {
font-size: 1.2rem;
}
.fa-brands {
margin-right: 5px;
}
#ww-copyright {
position: absolute;
bottom: 20px;
width: 100%;
text-align: center;
opacity: 0.5;
}
/*tag dropdown*/
#ww-drop i {
margin-left: 5px;
}
#ww-drop .fa-chevron-up {
display: none;
}
/*headings*/
h1 {
/*40px*/
font-size: 2.5rem;
font-style: normal;
font-weight: 200;
line-height: 2.75rem;
margin-top: 0;
margin-bottom: 50px;
}
h2 {
/*26px*/
font-size: 1.625rem;
font-style: normal;
font-weight: 500;
margin-bottom: 0;
}
h3 {
/*24px*/
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: 2rem;
margin-top: 30px;
margin-bottom: 0;
}
/*links*/
a {
color: var(--white);
text-decoration-color: var(--green);
}
h4.kg-toggle-heading-text {
color: var(--green);
/*16px*/
font-size: 1rem;
}
/*images*/
.kg-image-card {
margin: 30px 0;
/*overwrite min height for figure tags set in theme*/
min-height: 0;
}
.kg-image-card figcaption {
background: none;
margin-top: 10px;
margin-left: 0px;
}
/*buttons*/
.ww-btn,
.gh-btn,
.kg-btn {
display: inline-block;
border-radius: var(--radius) !important;
padding: 12px 15px;
border: none;
/*13px*/
font-size: 0.813rem;
font-weight: var(--semiBold);
text-decoration: none;
}
.ww-btn,
.kg-btn {
background-color: var(--grayTrasp) !important;
color: var(--white) !important;
}
.ww-btn-cta {
background-color: var(--blueDark) !important;
}
.ww-btn-cta:hover {
background-color: var(--white) !important;
}
.ww-btn:hover,
.kg-btn:hover,
.ww-btn-active {
cursor: pointer;
background-color: var(--white) !important;
color: var(--darkGray) !important;
}
.ww-btn i {
margin-left: 10px;
}
/*home*/
#ww-hero {
position: relative;
z-index: 1;
width: 80%;
max-width: 698px;
padding-top: 130px;
}
#ww-hero h1 {
margin: 0 0 0 -3px;
font-weight: 250;
}
#ww-hero h3 {
font-weight: 200;
margin-top: 0;
}
/*contact*/
/*intro*/
#ww-intro {
padding-top: 150px;
}
#ww-intro .ww-bg {
overflow: hidden;
}
#ww-intro .ww-bg-img {
-webkit-filter: blur(10px);
}
#ww-intro .ww-bg::before {
background: -webkit-radial-gradient(50% 0%, circle, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 1) 100%);
background: radial-gradient(circle at 50% 0%, rgba(17, 17, 17, 0.6) 0%, rgba(17, 17, 17, 1) 100%);
z-index: -1;
/* Ensure it stays above the background image */
}
#ww-intro img {
display: inline-block;
vertical-align: middle;
width: 140px;
height: auto;
}
#ww-intro .ww-container div:nth-child(2) {
margin-left: 20px;
}
#ww-intro p:first-of-type,
#ww-intro h1,
#ww-intro h3 {
margin: 0;
}
#ww-intro .ww-cta {
margin-top: 30px;
}
/*about*/
#ww-about {
max-width: 600px;
padding: 40px 20px 0 20px;
text-align: center;
}
#ww-about h1 {
margin: 10px 0;
}
#ww-about h3 {
margin-top: 0;
margin-bottom: 10px;
}
#ww-about p {
font-weight: var(--light);
}
/*brands*/
#ww-brands {
padding: 120px 20%;
}
#ww-brands img {
width: 80px;
height: auto;
}
#ww-brands .ww-flex {
gap: 60px;
}
/*ctas*/
.ww-cta .ww-flex {
gap: 20px;
}
/*kpi*/
.ww-kpi {
padding: 0;
margin-bottom: 120px;
}
.ww-kpi .ww-container {
padding: 0 30px;
}
.ww-kpi .ww-flex {
text-align: center;
gap: 40px;
}
.ww-kpi .ww-flex div {
width: 200px;
}
.ww-kpi .ww-flex h3 {
font-size: 2.2rem;
margin-top: 0;
margin-bottom: 10px;
}
.ww-kpi .ww-flex p {
margin: 0 !important;
}
.ww-kpi .ww-flex p:nth-of-type(1) {
font-weight: 200;
font-size: var(--small);
}
.ww-kpi .ww-flex p:nth-of-type(2) {
font-size: 0.9rem;
line-height: 1.1rem;
}
/*process*/
#ww-process {
margin-bottom: 120px;
}
.ww-step-container {
column-count: 2;
column-gap: 20px;
}
.ww-step {
display: block;
width: 100%;
box-sizing: border-box;
border-radius: 20px;
background-color: var(--gray);
margin-bottom: 20px;
padding: 20px;
height: fit-content;
}
.ww-step-header {
display: flex;
align-items: baseline;
justify-content: space-between;
width: 100%;
}
.ww-step-header h2 {
margin-top: 0
}
.ww-step-header h3,
.ww-step-header span {
margin: 0;
}
.ww-step-header span {
font-size: var(--medium);
font-weight: bold
}
.ww-skills {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.ww-skills span {
background-color: var(--grayLighter);
margin-right: 0 !important;
}
.ww-skills span.ww-tool {
background-color: var(--blue);
}
/*cases*/
#ww-cases article:first-of-type img.ww-featured-img {
margin-top: 60px;
}
/*photography*/
#ww-photography {
margin-bottom: 120px;
}
/*references*/
#ww-references {
margin-bottom: 120px;
}
#ww-references .ww-card {
position: relative;
height: 321px;
overflow: hidden;
background-size: cover;
}
/*bg image overlay*/
#ww-references .ww-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--darkGray);
z-index: 1;
opacity: 0.8;
}
#ww-references a {
text-decoration: none;
}
#ww-references .ww-card h3 {
font-size: 1.7rem;
margin-top: 0;
margin-bottom: 10px;
}
/*titles div*/
#ww-references .ww-card div:nth-child(1) {
position: absolute;
top: 20px;
left: 20px;
}
/*title & company*/
#ww-references div:nth-child(1) p {
font-size: var(--medium);
}
/*title*/
#ww-references div:nth-child(1) p:nth-of-type(1) {
margin-top: 0;
margin-bottom: 0;
}
#ww-references div:nth-child(1) p:nth-of-type(2) {
margin-top: 0;
font-weight: bold;
}
/*previously div*/
#ww-references .ww-card div:nth-child(2) {
position: absolute;
bottom: 20px;
left: 20px;
}
/*previously paragraphs*/
#ww-references div:nth-child(2) p {
margin-top: 0;
margin-bottom: 0;
}
#ww-references div:nth-child(2) p:nth-of-type(2) {
font-weight: bold;
}
/*images*/
#narain {
background-image: url('../img/references/narain.jpg');
}
#justyn {
background-image: url('../img/references/justyn.jpg');
}
#diane {
background-image: url('../img/references/diane.jpg');
}
#randi {
background-image: url('../img/references/randi.jpg');
}
/*connect*/
#ww-connect {
padding-bottom: 200px;
}
#ww-connect p:first-of-type {
font-size: var(--small);
margin-top: 0;
}
#ww-connect p:last-of-type {
margin-bottom: 40px;
}
/*sponsors*/
#ww-sponsors {
padding-bottom: 80px;
overflow-x: hidden;
}
#ww-sponsors h2 {
margin-bottom: 50px;
margin-left: 0;
}
#ww-sponsors .ww-flex {
align-items: flex-start;
gap: 60px;
margin-bottom: 130px;
}
.ww-sponsor {
text-align: center;
width: 200px;
}
.ww-sponsor img {
width: 80px;
height: auto;
}
.ww-sponsor h3 {
margin-top: 0;
}
.ww-sponsor p {
margin-top: 5px;
font-size: 1rem;
}
.ww-sponsor-socials {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 9px;
}
.ww-sponsor-socials .ww-btn i {
margin: 0;
}
.ww-sponsors .ww-btn-cta,
.ww-sponsors .ww-center .ww-btn {
display: inline-block;
margin-top: 60px;
}
/*posts*/
.post-feed {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-bottom: 200px;
}
article {
display: block;
position: relative;
width: 100%;
margin-bottom: 120px;
height: fit-content;
overflow: hidden;
}
/*padding for first article to compensate for no h1*/
#ww-home article:first-of-type img.ww-featured-img {
margin-top: 125px;
}
/*pad for heading*/
article:first-of-type img.ww-featured-img {
margin-top: 225px;
}
/*pad for heading if no featured image first*/
article:first-of-type .ww-spacer {
margin-top: 220px;
}
img.ww-featured-img {
clip-path: inset(1px);
margin-top: 60px;
}
figcaption {
margin-top: 30px;
}
/*blur sub only featured images on articles in post feed*/
.ww-blur {
filter: blur(10px);
}
.ww-blur-high {
filter: blur(30px);
}
figure {
position: relative;
margin: 0;
}
.ww-flag {
margin-bottom: 10px;
}
.ww-badge,
.ww-skills span {
border-radius: var(--radius);
margin-right: 10px;
padding: 5px 10px;
cursor: pointer;
color: var(--darkGray);
/*18px*/
font-size: 0.875em;
font-weight: var(--bold);
}
.ww-badge-sub {
background-color: var(--orange);
}
.ww-badge-featured {
background-color: var(--gold);
}
.ww-badge-nsfw {
background-color: var(--red);
}
.ww-figure-content {
padding: 0 20px;
}
/*date*/
.ww-figure-content p:first-of-type {
font-size: 0.9rem;
font-weight: 700;
color: var(--grayLighter);
margin-top: 0;
margin-bottom: 0;
}
.ww-figure-content h2 {
margin-top: 0;
}
.ww-content {
overflow: hidden;
padding: 0 20px;
height: 0;
}
/*consistency between img and no img articles*/
.ww-content> :last-child {
margin-bottom: 0px;
}
/*all elements have equal spacing between excerpt and content. Accommodates for collapsing margins on ww-content <p>s*/
.ww-figure-content> :last-child {
margin-bottom: 0;
}
.ww-content.expanded {
height: auto;
}
.ww-caption {
display: flex;
align-items: center;
margin-right: 20px;
}
.ww-caption i {
margin-right: 10px;
}
.ww-caption a {
display: inline-block;
padding-top: 5px;
}
.ww-caption a span {
display: inline-block;
white-space: nowrap !important;
overflow: hidden;
text-overflow: ellipsis;
max-width: 110px;
}
.ww-featured-img-caption {
text-align: right;
margin-top: 10px;
margin-right: 20px;
font-size: 1rem;
}
article footer {
padding: 0 20px;
}
/*services*/
#ww-services {
padding-bottom: 120px;
}
#ww-services h1 {
margin-bottom: 60px;
}
.ww-service-group {
margin-bottom: 120px;
}
.ww-service-group p {
max-width: 600px;
margin: 20px auto;
}
.ww-service-group p:first-of-type {
font-weight: var(--light);
}
.ww-service-group #ww-design-services {
margin-top: 0;
margin-bottom: 20px;
}
.ww-service-container {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: center;
margin-top: 50px;
}
#ww-design-services {
max-width: 600px;
margin: 40px auto 0 auto;
padding-left: 20px;
padding-right: 20px;
}
#ww-design-services p {
margin-top: 10px;
margin-bottom: 10px;
padding: 0 20px;
}
#ww-design-services p i {
margin-right: 10px;
}
.ww-service {
background-color: var(--gray);
border-radius: 20px;
flex: 0 1 calc(50% - 10px);
/* 10px is half the gap if gap is 20px */
box-sizing: border-box;
justify-content: center;
padding: 20px;
}
.ww-service h2,
.ww-service p {
text-align: center;
}
.ww-features div:first-of-type {
margin-top: 20px;
}
.ww-features div {
margin-bottom: 20px;
}
.ww-features i {
margin-right: 10px;
width: 20px;
text-align: center;
}
.ww-service .ww-btn {
float: right;
margin-top: 10px;
}
/*contract*/
#ww-contract {
display: flex;
flex-direction: column;
/*height not 100 to compensate for mobile safari not taking bottom address bar into account*/
height: 87vh;
align-items: center;
}
#ww-contract h1 {
margin-top: 120px;
margin-bottom: 50px;
flex-shrink: 0;
}
#ww-contract-content {
overflow-y: scroll;
border-radius: 6px;
border: 3px solid var(--gray);
flex-grow: 1;
padding: 20px;
max-width: 80%;
margin-bottom: 20px;
}
#ww-contract-content div {
margin-top: 40px;
}
#ww-contract-content div:first-of-type,
#ww-contract-content h3:first-of-type {
margin-top: 0;
}
#ww-contract-content ::-webkit-scrollbar {
-webkit-appearance: none;
width: 10px;
}
#ww-contract-content ::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: var(--white);
}
#ww-contract-btns {
flex-shrink: 0;
display: flex;
gap: 20px;
}
/*tags*/
.ww-tags {
/*padding on internal tags make top spacing 20px*/
margin-top: 10px;
margin-bottom: 40px;
}
.ww-tags a {
display: inline-block;
margin-right: 10px;
/*spacing on mobile when wrapped*/
padding-top: 10px;
}
.ww-btns {
text-align: right;
white-space: nowrap;
}
.ww-btns a {
margin-left: 15px;
}
/*for post buttons with only icon*/
.ww-btns .fa-arrow-up-right-from-square {
margin-left: 0;
}
/*post*/
#ww-post {
padding-bottom: 200px;
}
#ww-post article:first-of-type {
padding-top: 80px;
margin-bottom: 40px;
}
/*don't space first article since no h1*/
#ww-post article:first-of-type img.ww-featured-img,
#ww-post article:first-of-type .ww-spacer {
margin-top: 60px;
}
/*hide controls and show full article on main article only*/
#ww-post article:first-of-type .ww-content {
height: auto;
}
#ww-post article:first-of-type .ww-btns {
display: none;
}
.gh-content article:first-of-type .ww-tags {
max-width: none;
}
.ww-content article:first-of-type figure {
min-height: auto;
}
#ww-more-posts {
margin-top: 120px;
margin-bottom: 60px;
}
/*page*/
#ww-page {
padding-top: 120px;
padding-bottom: 120px;
}
/*pagination*/
.pagination {
display: none;
}
/*videos*/
.kg-video-card {
margin: 0 !important;
}
/*error*/
#ww-error {
margin-top: 150px;
}
/*Media Queries*/
/*small phones*/
@media only screen and (max-width: 350px) {
nav section div button {
margin-left: 5px;
}
}
/*below tablet*/
@media only screen and (max-width: 700px) {
.ww-service {
flex-basis: 100% !important;
max-width: 100% !important;
}
.ww-desktop-only {
display: none;
}
.ww-mobile-only {
display: block;
}
#ww-intro {
text-align: center;
}
#ww-intro h1 {
font-size: 2.5rem;
margin: 5px 0;
}
#ww-intro h3 {
font-size: 1.2rem;
}
#ww-intro .ww-container div:nth-child(2) {
margin-top: 20px;
margin-left: 0;
}
#ww-me.ww-flex {
flex-direction: column;
}
#ww-services #ww-intro {
margin-bottom: 60px;
}
.ww-kpi .ww-flex div {
width: 140px;
}
#ww-design-services p {
width: 30%;
box-sizing: border-box;
font-size: var(--xSmall);
}
#ww-design-services p i {
font-size: var(--small);
}
#ww-design-services p i {
display: block;
margin-bottom: 10px;
margin-right: 0;
}
.ww-card-container {
justify-content: center;
}
.ww-card-container .ww-card {
max-width: none !important;
width: 100% !important;
}
#ww-brands {
padding: 120px 10%;
}
.ww-kpi .ww-flex {
gap: 40px;
}
.ww-step-container {
column-count: 1;
column-gap: 20px;
}
.ww-step {
display: block;
}
#ww-references .ww-card {
background-position: center;
}
}
/*Ghost overwrites*/
.gh-content {
margin: auto 20px;
}
.kg-width-wide {
grid-column: wide-start / wide-end;
}
.kg-width-full {
grid-column: full-start / full-end;
}
.kg-width-full img {
width: 100%;
height: auto;
}
.gh-post-upgrade-cta,
.gh-post-upgrade-cta-content {
text-align: left !important;
align-items: flex-start !important;
}
.gh-post-upgrade-cta-content {
padding: 0 0 30px 0 !important;
}
.gh-post-upgrade-cta-content h2 {
display: none !important;
}
.gh-post-upgrade-cta-content {
padding-bottom: 0 !important;
}
.gh-post-upgrade-cta-content {
margin-bottom: 30px;
}
.gh-loadmore {
margin: 0 auto;
display: block;
width: 150px;
}
.gh-post-upgrade-cta-content {
background-color: transparent !important;
}
/*toggle*/
.kg-toggle-card {
padding: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important;
margin-bottom: 20px;
}
.kg-toggle-content {
color: var(--white);
}
.kg-toggle-heading {
justify-content: flex-start !important;
}
.kg-toggle-card[data-kg-toggle-state=close] svg,
.kg-toggle-heading svg {
display: none !important;
}