* {
--bg-col: #F1F0EE;
--red: #9A031E;
--orange: #FB8B24;
--dark-grey: #313131;
--formatted-width: 80rem;
--formatted-py: 5rem;
}
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color: var(--bg-col);
}
nav {
background-color: var(--bg-col);
}
nav img {
width: 6rem;
}
footer {
background-color: black;
padding-top: 5rem;
padding-bottom: 5rem;
}
footer img {
width: 12rem;
}
footer * {
color: white;
}
footer h2 {
font-size: 1.2rem;
font-weight: 900;
margin-bottom: 1.2rem;
}
footer ul > li {
margin-bottom: 0.4rem;
}
form {
max-width: 42rem;
padding: 1rem;
margin: auto;
}
@media (min-width: 1000px) {
form {
margin: 0;
}
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
p.lead {
margin-bottom: 2rem;
}
video {
width: 50rem;
max-width: 100%;
display: block;
}
.custom-section-py {
padding-top: var(--formatted-py);
padding-bottom: var(--formatted-py);
}
.custom-googlemap {
max-width: 100%;
width: 28rem;
height: 28rem;
}
.custom-bg-black {
background-color: black;
color: white;
}
.custom-bg-darkgrey {
background-color: var(--dark-grey);
color: white;
}
.custom-bg-orange {
background-color: var(--orange);
color: black;
}
.custom-bg-red {
background-color: var(--red);
color: white;
}
.custom-bg-white {
background-color: var(--bg-col);
}
.custom-col-red {
color: var(--red);
}
.custom-border-top {
border-top: 1px solid black;
}
.custom-collab-section {
padding: 2.6rem 0 2.8rem;
}
.custom-collab-section > h2 {
font-size: 1.2rem;
font-weight: 700;
margin-bottom: 1rem;
}
.custom-collab-section > img {
display: block;
margin: auto;
}
.custom-parallax-main {
margin-top: min(50vw, 32rem);
background-color: var(--bg-col);
}
.custom-parallax-img {
position: fixed;
background-position: top;
background-repeat: no-repeat;
background-size: contain;
width: 100vw;
height: 1000rem;
z-index: -5;
}
@media (prefers-reduced-motion) {
.custom-parallax-img {
position: absolute;
}
}
.custom-photoscroll {
width: 100%;
padding: var(--formatted-py) 0;
overflow: hidden;
}
.custom-photoscroll > div {
display: flex;
justify-content: space-between;
width: fit-content;
overflow: hidden;
}
.custom-photoscroll > div > img {
height: 30rem;
max-height: 75vh;
}
@media(prefers-reduced-motion) {
.custom-photoscroll {
margin: auto;
overflow: auto;
}
.custom-photoscroll > div {
overflow: auto;
animation: none;
width: 100%;
}
.custom-photoscroll > div > .custom-photoscroll-first {
margin-left: max(1rem, calc(50% - var(--formatted-width) / 2));
}
.custom-photoscroll > div > .custom-photoscroll-last {
margin-right: max(1rem, calc(50% - var(--formatted-width) / 2));
}
.custom-photoscroll-duplicate {
display: none;
}
}
.custom-photoscroll-large {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 2000;
background-color: rgba(0, 0, 0, 0.8);
}
.custom-photoscroll-large > img {
max-width: 100vw;
max-height: 100vh;
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.custom-formatted-area {
max-width: var(--formatted-width);
margin: 0 auto;
padding: var(--formatted-py) 0;
}
.custom-formatted-area > h1, .custom-formatted-area > h2 {
text-align: center;
font-weight: 800;
font-style: italic;
margin-bottom: 2rem;
font-size: 2rem;
}
@media (min-width: 1000px) {
.custom-formatted-area {
display: flex;
}
.custom-formatted-area > h1, .custom-formatted-area > h2 {
flex-shrink: 0;
flex-grow: 0;
width: 17rem;
word-break: break-word;
padding-right: 1rem;
text-align: start;
margin-bottom: 0;
}
.custom-formatted-area > div {
width: calc(100% - 17rem);
}
}
.custom-formatted-area h3 {
font-size: 1.3rem;
font-weight: 700;
}
.custom-feature-list > div {
--icon-size: 4rem;
--margin-right: 1.4rem;
}
@media (min-width: 768px) {
.custom-feature-list {
display: flex;
flex-wrap: wrap;
gap: 8%;
}
.custom-feature-list > div {
width: 45%;
}
}
.custom-feature-list > div > * {
vertical-align: top;
display: inline-block;
--margin-bottom: 2rem;
}
.custom-feature-list > div:last-child > * {
--margin-bottom: 0;
}
.custom-feature-list > div > img {
width: var(--icon-size);
margin-right: var(--margin-right);
margin-bottom: var(--margin-bottom);
}
.custom-feature-list > div > div {
width: calc(100% - var(--icon-size) - var(--margin-right));
}
.custom-feature-list > div > div > h3 {
font-size: 1.2rem;
}
.custom-feature-list > div > div > p {
margin-bottom: var(--margin-bottom);
}
.custom-pricing-list > div {
max-width: 100%;
display: inline-block;
vertical-align: top;
width: 24rem;
margin-bottom: 1.4rem;
}
.custom-pricing-list > div p {
margin: 0;
}
.custom-pricing-list > div > div {
vertical-align: top;
font-weight: bold;
}
.custom-pricing-list > div > div > p:first-child {
display: inline-block;
width: 18rem;
max-width: 100%;
margin: 0;
}
.custom-pricing-list > div > div > p:last-child {
display: inline-block;
margin: 0;
}
.custom-pricing-list > div > p {
display: inline-block;
}
.custom-pricing-box {
display: inline-block;
vertical-align: top;
border: 1px solid var(--red);
border-radius: 0.5rem;
background-color: white;
color: var(--red);
padding: 1.5rem;
text-align: center;
}
.custom-pricing-box.narrow {
margin-left: auto;
margin-right: auto;
width: 23rem;
max-width: 100%;
display: block;
margin-bottom: 1.4rem;
}
.custom-pricing-box.red {
border: none;
background-color: var(--red);
color: white;
}
.custom-pricing-box.red a {
background-color: white;
color: var(--red);
}
.custom-pricing-box h4 {
font-size: 1.2rem;
font-weight: 700;
}
.custom-pricing-box .price {
font-size: 3rem;
font-weight: 900;
line-height: 1;
margin: 0;
}
.custom-pricing-box .desc {
margin-bottom: 0.7rem;
}
.custom-pricing-box a {
margin-bottom: 1.5rem;
}
.custom-pricing-box ul {
text-align: start;
}
.custom-pricing-box-full {
text-align: center !important;
width: 20rem;
max-width: 100%;
margin: auto;
}
@media (min-width: 700px) {
.custom-pricing-box-full {
width: 100%;
}
.custom-pricing-box-full > div:first-child {
width: 38%;
}
.custom-pricing-box-full > div:last-child {
width: 60%;
}
}
.custom-frames > img {
width: 48%;
margin: 0 0.2rem 1rem 0;
}
@media (min-width: 780px) {
.custom-frames > img {
width: 15rem;
}
}
.custom-index-logo {
position: relative;
margin: auto;
aspect-ratio: 749 / 125;
margin-top: 4rem;
width: 45rem;
max-width: 90%;
transition: filter 0.3s linear;
background-image: url('../img/theselfiestudio_logo_red.webp');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
}
.custom-index-logo::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
opacity: 0;
transition: opacity 0.3s linear;
background-image: url('../img/theselfiestudio_logo_chrome.webp');
background-size: cover;
background-repeat: no-repeat;
background-position-x: center;
}
.custom-index-logo:hover {
filter: saturate(0);
}
.custom-index-logo:hover::after {
opacity: 1;
}
.custom-index-imgs {
padding-top: 5rem;
padding-bottom: 6rem;
}
.custom-index-imgs > div > img {
width: 1rem;
}
.custom-index-h1 {
font-size: 1.2rem;
padding: 0.1rem;
text-transform: uppercase;
text-align: center;
margin: 0;
font-weight: 600;
}
.custom-index-pages {
max-width: 90rem;
margin: 8rem auto 4rem;
text-align: center;
}
.custom-index-pages > div {
text-align: center;
display: inline-block;
padding: 0 0.3rem;
width: 24%;
min-width: min(100%, 20rem);
}
.custom-index-pages > div > img {
width: 100%;
display: block;
margin: auto;
margin-bottom: 1rem;
}
.custom-index-pages > div > a {
margin-bottom: 4rem;
}
.custom-rental-features-img {
max-width: 100%;
width: 28rem;
aspect-ratio: 3 / 4;
object-fit: cover;
}
.custom-rental-frames {
width: 49%;
}
.custom-portrait-bg {
display: inline-block;
width: 14rem;
max-width: 100%;
margin-right: 1rem;
}
.custom-portrait-bg > img {
width: 100%;
margin-bottom: 0.6rem;
}
.custom-brand-img {
max-width: 100%;
flex-shrink: 0;
width: 25rem;
margin-bottom: 1.5rem;
}
.custom-pageMaxWidth {
max-width: 60rem;
margin: 0 auto;
}
.custom-autoSideMargins {
margin-left: auto;
margin-right: auto;
}
.custom-autoLeftMargin {
margin-left: auto;
}
.custom-div-displayNone-smallscreen {
display: none;
}
.custom-div-displayNone-largescreen {
display: block;
}
@media (min-width: 768px) {
.custom-div-displayNone-smallscreen {
display: block;
}
.custom-div-displayNone-largescreen {
display: none;
}
}
.custom-breakword {
word-break: break-word;
}
.custom-scrollMarginTop {
scroll-margin-top: 70px;
}
.custom-color-white {
color: white;
}
.custom-color-black {
color: #212529;
}
.custom-italic {
font-style: italic;
}
.custom-navbar-col-black .nav-link {
color: black;
}
.custom-navbar-bg-black {
background-color: black;
}
.custom-navbar-col-white .navbar-brand, .custom-navbar-col-white .nav-link {
color: white;
}
.custom-nav-hamburger {
border: none;
}
.custom-nav-hamburger:focus {
box-shadow: none;
}
.custom-nav-hamburger:focus-visible {
box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) rgba(49,132,253,.5);
}
.custom-nav-hamburger > * {
display: none;
width: 1.6em;
height: 1.6em;
}
.custom-nav-hamburger[aria-expanded="false"] > .custom-nav-i-hbg {
display: inline;
}
.custom-nav-hamburger[aria-expanded="true"] > .custom-nav-i-x {
display: inline;
}
.offcanvas.offcanvas-start {
width: 20rem;
background-color: var(--bg-col);
}
.offcanvas-header {
padding: 1.5rem;
padding-bottom: 1rem;
}
.offcanvas-body {
padding: 1rem 3rem;
}
.custom-offcanvas-nav-menu {
border: none;
}
.custom-offcanvas-nav-menu:focus {
box-shadow: none;
}
.custom-offcanvas-nav-menu:focus-visible {
box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width) rgba(49,132,253,.5);
}
.custom-button {
text-decoration: none !important;
vertical-align: middle;
border: none;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
padding: 0.73rem 1.5rem;
transition: background-color .13s ease-in-out;
background-color: hsl(349, 96%, 31%);
font-weight: 700;
color: white;
margin: auto;
display: block;
width: max-content;
max-width: 100%;
}
@media (min-width: 1000px) {
.custom-button {
display: inline-block;
}
}
.custom-button:hover {
background-color: hsl(349, 96%, 36%);
}
.custom-button:active {
background-color: hsl(349, 96%, 26%);
}
.custom-button-black {
background-color: black;
}
.custom-button-black:hover {
background-color: rgb(42, 42, 42);
}
.custom-button-black:active {
background-color: black;
}
.custom-button:focus:not(:focus-visible) {
outline: 0;
}
.custom-button:focus-visible {
box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5);
outline: 0;
}
.custom-icon-list {
list-style: none;
position: relative;
margin-bottom: 0;
padding-left: 2.3rem;
}
.custom-icon-list > li {
margin-bottom: 0.4rem;
}
.custom-icon-list > li::before {
content: '';
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 0;
width: 1.6rem;
height: 1.6rem;
}
.custom-icon-list > li.custom-phone-black::before {
background-image: url('../icons/phone-black.svg');
background-size: 1.6rem;
}
.custom-icon-list > li.custom-email-black::before {
background-image: url('../icons/email-black.svg');
background-size: 1.5rem;
}
.custom-icon-list > li.custom-location-black::before {
background-image: url('../icons/location-black.svg');
background-size: 1.8rem;
}
.custom-icon-list > li.custom-instagram-black::before {
background-image: url('../icons/instagram-black.svg');
background-size: 1.2rem;
}
.custom-icon-list > li.custom-phone-white::before {
background-image: url('../icons/phone-white.svg');
background-size: 1.6rem;
}
.custom-icon-list > li.custom-email-white::before {
background-image: url('../icons/email-white.svg');
background-size: 1.5rem;
}
.custom-icon-list > li.custom-location-white::before {
background-image: url('../icons/location-white.svg');
background-size: 1.8rem;
}
.custom-icon-list > li.custom-instagram-white::before {
background-image: url('../icons/instagram-white.svg');
background-size: 1.2rem;
}
.custom-scr {
opacity: 0;
transition: all .7s;
transform: translateY(50px);
}
@media(prefers-reduced-motion) {
.custom-scr {
opacity: 1;
transition: none;
transform: none;
}
}
.custom-scr.shown {
opacity: 1;
transform: translateX(0px);
transform: translateY(0px);
}
@media (min-width: 576px) {
.custom-scr.custom-sm-delay1 {
transition-delay: 200ms;
}
.custom-scr.custom-sm-delay2 {
transition-delay: 400ms;
}
.custom-scr.custom-sm-delay3 {
transition-delay: 600ms;
}
}
@media (min-width: 768px) {
.custom-scr.custom-mx-delay1 {
transition-delay: 200ms;
}
.custom-scr.custom-mx-delay2 {
transition-delay: 400ms;
}
.custom-scr.custom-mx-delay3 {
transition-delay: 600ms;
}
}
@media (min-width: 645px) {
.custom-index-pages > .custom-scr.custom-delay1,
.custom-index-pages > .custom-scr.custom-delay3 {
transition-delay: 0ms;
}
.custom-index-pages > .custom-scr.custom-delay2,
.custom-index-pages > .custom-scr.custom-delay4 {
transition-delay: 200ms;
}
}
@media (min-width: 969px) {
.custom-index-pages > .custom-scr.custom-delay1,
.custom-index-pages > .custom-scr.custom-delay4 {
transition-delay: 0ms;
}
.custom-index-pages > .custom-scr.custom-delay2 {
transition-delay: 200ms;
}
.custom-index-pages > .custom-scr.custom-delay3 {
transition-delay: 400ms;
}
}
@media (min-width: 1293px) {
.custom-index-pages > .custom-scr.custom-delay1 {
transition-delay: 0ms;
}
.custom-index-pages > .custom-scr.custom-delay2 {
transition-delay: 200ms;
}
.custom-index-pages > .custom-scr.custom-delay3 {
transition-delay: 400ms;
}
.custom-index-pages > .custom-scr.custom-delay4 {
transition-delay: 600ms;
}
}