let ProdMobile = false;
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)) {
ProdMobile = true;
}
function ProdLeft(id) {
let w = (window.innerWidth)/2;
let i = ["PROD__scroller" + id];
let o = document.getElementById(i);
o.scrollLeft += -(w);
}
function ProdRight(id) {
let w = (window.innerWidth)/2;
let i = ["PROD__scroller" + id];
let o = document.getElementById(i);
o.scrollLeft += w;
}
function ProdArrows(id) {
const container = document.querySelectorAll(".multi-product-carousel-container")[id];
const newArrows = document.createElement('div');
newArrows.setAttribute('class',"caro__arrows");
container.appendChild(newArrows);
const ar_l = ">";
const ar_r = ">";
// Arrows code, add id to the fucntion calls
const a = "";
////// ??????????????????????? ////////
// Target the carousel
// let b = document.querySelectorAll(".prod__arrows")[id];
// Add arrows to carousel
newArrows.innerHTML = a;
}
function ProdMonitor(id,wd) {
let i = ["PROD__scroller" + id];
let o = document.getElementById(i);
let pos = o.scrollLeft;
// Get number of cards in scroller
let num = o.childElementCount;
// Get window width
let w = window.innerWidth;
// Calc scrolling sapce
let max = -((w - wd)+20);
let gla = ["PROD__left" + id];
let gra = ["PROD__right" + id];
let la = document.getElementById(gla);
let ra = document.getElementById(gra);
// Left Arrow
if (pos > -20 && pos max-20) {
ra.style.display = "none";
ra.style.opacity = "0.0";
} else {
ra.style.display = "block";
ra.style.opacity = "1.0";
}
}
function ProdDevice(id) {
let i = ["PROD__scroller" + id];
let o = document.getElementById(i);
let pos = o.scrollLeft;
if (pos > 100) {
let gra = ["PROD__right" + id];
let ra = document.getElementById(gra);
ra.style.opacity = "0.0";
ra.style.transition = "all 0.7s";
ra.style.WebkitTransition = "all 0.7s";
let wait = setTimeout(function() {
ra.style.display = "none";
clearTimeout(wait);
}, 200);
}
}
function ProdCount(id) {
let a = ["PROD__scroller" + id];
let b = document.getElementById(a).children;
return b.length;
}
function ProdWidthCheck(id,wd) {
console.log("ProdWidthCheck");
let w = window.innerWidth;
let a = ["PROD__scroller" + id];
let b = document.getElementById(a);
let gla = ["PROD__left" + id];
let gra = ["PROD__right" + id];
let la = document.getElementById(gla);
let ra = document.getElementById(gra);
console.log(id + "browser " + w);
console.log(id + "scroller " + wd);
if (wd <= w) {
console.log("Center it");
b.style.justifyContent = "center";
la.style.visibility = "hidden";
ra.style.visibility = "hidden";
} else {
console.log("Left it");
b.style.justifyContent = "start";
la.style.visibility = "visible";
ra.style.visibility = "visible";
}
}
function ProdSetup(id) {
// Assemble carousel id attribute
let a = ["PROD" + id];
let aa = ["PROD__scroller" + id];
// Target the carousel
let b = document.querySelectorAll(".section-multi-product-container")[id];
let bb = document.querySelectorAll(".products-row")[id];
// Get width of cards
// let crd = bb.querySelectorAll(".product")[1].clientWidth; // Get width from the second card
// Set the attribute of the carousel
b.setAttribute("id",a);
bb.setAttribute("id",aa);
// Get width of the scroller element
let wd = bb.scrollWidth;
// let count = ProdCount(id);
// Watch the carousel scolling
bb.addEventListener("scroll", function() {
if (ProdMobile == false) {
ProdMonitor(id,wd);
} else {
ProdDevice(id);
}
}, false);
// Add the arrows
ProdArrows(id);
// Check width of cards, if not wider than browser, center and turn off arrows
ProdWidthCheck(id,wd);
}
function ProdResize() {
let a = document.querySelectorAll(".section-multi-product-container");
let b,c,d,wd;
for (let i = 0; i < a.length; i++) {
b = ["PROD__scroller" + i];
c = document.getElementById(b);
d = b.childElementCount;
wd = c.scrollWidth;
console.log(b + " = " + wd);
ProdWidthCheck(i,wd,d);
}
}
function ProdInit() {
console.log("ProdInit");
// Look for Carousels
let a = document.querySelectorAll(".section-multi-product-container");
// Run setup for each carousel found
for (let i = 0; i < a.length; i++) {
ProdSetup(i);
}
// If browser resize, recheck if carousels need centering and arrows
window.onresize = function() {
ProdResize();
};
}
const ProdWait = setTimeout(function() {
console.log("ProdWait");
clearTimeout(ProdWait);
let a = document.querySelectorAll(".section-multi-product-container")[0].id;
if (a != "PROD0") {
ProdInit();
}
}, 1500);
const elem = document.querySelector(".fade");
// Select all elements with the 'fade-in-element' class
const fadeElements = document.querySelectorAll('.fade');
// Options for the observer (when to trigger the callback)
const observerOptions = {
root: null, // Use the browser viewport as the root
rootMargin: '0px',
threshold: 0.1 // Trigger when 10% of the element is visible
};
// The callback function that runs when an element intersects
const observerCallback = (entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.style.opacity = "1.0";
entry.target.style.transition = "all 0.5s ease-out";
entry.target.style.webkitTransition = "all 0.5s ease-out";
entry.target.style.transitionDelay = "0.2s";
entry.target.style.webkitTransitionDelay = "0.2s";
} else {
entry.target.style.opacity = "0.0";
entry.target.style.transition = "all 1.0s ease-out";
entry.target.style.webkitTransition = "all 1.0s ease-out";
entry.target.style.transitionDelay = "0.2s";
entry.target.style.webkitTransitionDelay = "0.2s";
}
});
};
// Create a new IntersectionObserver instance
const observer = new IntersectionObserver(observerCallback, observerOptions);
// Start observing each element
fadeElements.forEach(element => {
observer.observe(element);
});
/* Roboto */
@import url('https://ift.tt/Mdv8KW0');
/* Roboto Mono */
@import url('https://ift.tt/yLbD7BO');
:root {
/* //////////////////////////////////////////////////////////////////// */
/* System colors */
--color-cream: #E8F6F7;
--color-black: #000;
--color-white: #FFEEEE;
--color-light-gray: #EAE0D4;
--color-medium-gray: #555555; /* Hovers */
--color-dark-gray: #4B4D56;
/* Primary colors, use white or black text */
--color-pink: #F300CE;
--color-blue: #1F69FF;
/* Secondary colors, use black text only*/
--color-orange: #4B4D56;
--color-yellow: #FBF5E7;
--color-green: #4B4D56;
--color-teal: #4B4D56;
--color-purple: #4B4D56;
/* //////////////////////////////////////////////////////////////////// */
/* Fonts */
--Brown-Regular: Brown Regular, Gill Sans, Arial, Helvetica, Roboto, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
--Brown-Bold: Brown Bold, Gill Sans, Arial, Helvetica, Roboto, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
--Roboto: 'Roboto', Arial, Helvetica, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
--Roboto-Mono: 'Roboto Mono', Monaco, monospace;
--Owners-Narrow: 'owners-narrow-black', sans-serif;
--Playfair: Playfair Display, Times New Roman Bold, TimesNewRomanPSMT-Bold, Times Bold, Noto Serif Bold, NotoSerif-Bold, Georgia, serif;
--Ivy-Presto: 'owners', Helvetica, Roboto, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
--Owners: 'owners', Helvetica, Roboto, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
--OwnersWide: 'owners-wide', Helvetica, Roboto, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
--OwnersXwide: 'owners-xwide', Helvetica, Roboto, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
--NeueHaus-Unica: neue-haas-unica, Helvetica, Roboto, Segoe UI Light, Ubuntu Light, DroidSans, sans-serif;
/* Font Letterspacing < DO NOT ALTER */
--Tight: -0.01em;
--Normal: 0em;
--Loose: 0.02em;
--Spread: 0.1em;
/* Intro column div{font-family:var(--Roboto-Mono);font-weight:var(--Weight-Roboto-Mono-Regular);font-size:.7rem;text-transform:uppercase;text-decoration:none;letter-spacing:.02em;color:var(--subnav-text-color);border-bottom:1px solid transparent}.subnav__container a:hover,.subnav__container-mobile button:hover,.subnav__container>div:hover{color:var(--subnav-text-hover-color);border-bottom:1px solid var(--subnav-text-hover-color)}.subnav__read-more{pointer-events: none;color:var(--subnav-read-more-color);border:0!important;text-decoration:none}.subnav__container-mobile{display:none}#subnav__marker{height:1px;margin-top:-1px}@media only screen and (max-width:1100px){.subnav__container{display:none}.subnav__container-mobile{display:flex}}@media only screen and (max-width:1024px){.subnav__container{width:100%;height:30px;display:flex!important;flex-direction:row;justify-content:start;align-items:center;gap:30px;overflow-x:auto;scroll-behavior:smooth;padding:0 20px 2px}.subnav__container a,.subnav__container-mobile button,.subnav__container>div{white-space:nowrap}.subnav__container::-webkit-scrollbar{height:1px;pointer-events:auto;cursor:pointer}.subnav__container::-webkit-scrollbar-thumb{background:rgba(255,255,255,0);border-radius:6px;border:0}.subnav__container::-webkit-scrollbar-track{background:rgba(0,0,0,0);padding:0}}@media only screen and (max-width:760.98px){.subnav__container a,.subnav__container-mobile button,.subnav__container>div{font-size:.65rem;border-bottom:1px solid var(--subnav-text-color-underline)}.subnav__container,.subnav__container-mobile{gap:20px}}
#subnav, .subnav {
transition: translateY 0.5s ease-in-out;
-webkit-transition: translateY 0.5s ease-in-out;
z-index: 99;
}
/* //////////////////////////////////////////////////////////////////// */
/* Anchors */
.caro__marker{position:relative}.caro__anchor{position:absolute;top:-40px;left:0;width:100%;height:1px}.caro__marker .caro__anchor{top:-140px}
.marker_set{position:relative}.marker{position:absolute;top:-40px;left:0;width:100%;height:1px}.marker_set .marker{top:-140px}
.section-html, .module {position: relative;}
/* //////////////////////////////////////////////////////////////////// */
/* Carousel Basics */
.caro,.caro__scroller{display:block;width:100%}.caro{clear:both;margin:0;padding:0;overflow:hidden}.caro__scroller{position:relative}.caro__scroller-wrapper{width:100%;display:flex;flex-direction:column;position:relative}.caro__count{display:none}.caro__arrows{position:absolute;top:0;left:0;right:0;width:100%;pointer-events:none;display:flex;flex-direction:row;justify-content:center;align-items:center;height:100%}.caro__arrow,.caro__arrow-left,.caro__arrow-right{padding:0;pointer-events:auto}.caro__arrow-left{top:auto;bottom:auto;left:40px;width:auto;margin:0;display:none;opacity:0}.caro__arrow-right{top:auto;right:40px;width:100px;margin:0;display:block;opacity:1;animation-name:moveArrow;animation-timing-function:ease-in-out;animation-duration:1.5s;animation-iteration-count:infinite}.caro__arrow{position:absolute;width:60px;height:60px;cursor:pointer;margin:-20px 0 0}.caro__arrow-file svg{width:100%;height:100%}.caro__arrow-file svg path{fill: var(--carousel-arrow-shape-color)}.caro__arrow-file:hover path{fill:var(--carousel-arrow-shape-color-hover)}.caro__arrow-file svg circle{fill:var(--carousel-arrow-bgcolor);stroke:var(--carousel-arrow-bordercolor)}.caro__arrow-file:hover svg circle{fill:var(--carousel-arrow-bgcolor-hover);stroke:var(--carousel-arrow-bordercolor-hover)}.caro__arrow-right:hover{animation-play-state:paused;-webkit-animation-play-state:paused}@keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}@-moz-keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}@-webkit-keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}@-o-keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(30px)}}.caro__scroller-list{width:100%;height:fit-content;white-space:nowrap;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scroll-snap-type:x mandatory;scroll-padding:0 20px;padding:0 0 20px;-webkit-transform:translateZ(0);-moz-transform:translateZ(0);-ms-transform:translateZ(0);-o-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-perspective:1000;-moz-perspective:1000;-ms-perspective:1000;perspective:1000;-webkit-overflow-scrolling:touch;grid-template-columns:repeat(100,340px);font-size:0;display:flex;justify-content:start;align-items:start;gap:20px;flex-wrap:nowrap}.is-promos .caro__scroller-list,.is-wide .caro__scroller-list,.is-youtube .caro__scroller-list{grid-template-columns:repeat(100,500px)}.is-social .caro__scroller-list,.is-tall .caro__scroller-list{grid-template-columns:repeat(100,340px)}.caro__card{overflow:hidden;width:340px;min-width:340px;max-width:340px;background-color:transparent;height:fit-content;scroll-snap-align:start;position:relative;display:inline-block;float:none;box-sizing:content-box;padding:0;margin:0}.caro__card img{width:100%}.caro__card>div{box-sizing:border-box;width:inherit}.caro__card:first-of-type{padding-left:20px}.caro__card:last-of-type{margin-right:20px}.is-promos .caro__card,.is-wide .caro__card,.is-youtube .caro__card{width:500px;min-width:500px;max-width:500px}.is-youtube .caro__card iframe{width:500px!important;height:281px!important}.is-social .caro__card iframe.instagram-media{max-width:unset!important;width:100%!important;border-radius:0!important;margin:-54px 0 0!important;border:0!important}@media only screen and (max-width:760.98px){.caro__arrow-left{left:15px}.caro__arrow-right{right:15px;pointer-events:none}.caro__arrow-right .caro__arrow-file{transform:rotate(180deg)}.caro__arrow-file{width:85px;height:85px}.caro__arrow-file img,.caro__arrow-file svg{padding:11px}@keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}@-moz-keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}@-webkit-keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}@-o-keyframes moveArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(20px)}}.caro__scroller-list,.is-people .caro__scroller-list,.is-promos .caro__scroller-list,.is-social .caro__scroller-list,.is-tall .caro__scroller-list,.is-wide .caro__scroller-list,.is-youtube .caro__scroller-list{grid-template-columns:repeat(100,335px)}.caro__card,.is-people .caro__card,.is-promos .caro__card,.is-social .caro__card,.is-tall .caro__card,.is-wide .caro__card,.is-youtube .caro__card{width:335px;min-width:335px;max-width:335px}.is-youtube .caro__card iframe{width:335px!important;height:188px!important}.caro__arrows{display:none!important}}.caro__scroller-list::-webkit-scrollbar{height:4px;pointer-events:auto;cursor:pointer;background:0 0!important}.caro__scroller-list::-webkit-scrollbar-track{background:0 0!important;padding:2px 0}.caro__scroller-list::-webkit-scrollbar-thumb{background:0 0!important;border-radius:6px;border:0}.caro__scroller-list::-webkit-scrollbar-thumb:hover{background:0 0!important}
/* /////////////////////////////////////////////////////////////////////////////// */
/* Editors */
.editors {
margin: 40px auto 0;
padding: 0;
}
.editors__wrapper {
}
.editors__list {
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
gap: 15px;
}
.editors__card {
width: 100%;
max-width: 250px;
display: block;
margin: 0;
padding: 0 20px;
}
.editors__card-image {
width: 100%;
max-width: 250px;
margin: 0 auto 10px;
}
.editors__card-image img {
width: 100%;
border-radius: 500px;
border: var(--editor-border-size) solid var(--editor-border-color);
}
.editors__card-details {
width: 100%;
display: flex;
flex-direction: column;
font-family: var(--editor-details-font);
font-weight: var(--editor-details-weight);
color: var(--editor-details-color);
font-size: 0.7rem;
line-height: 1.45;
text-align: center;
}
.editors__card-details a:hover {
color: var(--editor-name-hover-color);
}
.editors__card-name {
font-size: 1.2rem;
color: var(--editor-name-color);
font-family: var(--editor-name-font);
font-weight: var(--editor-name-weight);
}
.editors__card-role {
color: var(--editor-role-color);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.editors__card-social {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0;
}
.editors__card-social-icon svg {
width: 50px;
height: 50px;
}
.editors__card-social-icon svg path {
fill: var(--editor-social-color);
}
.editors__card-social-icon:hover svg path {
fill: var(--editor-social-hover-color);
}
@media only screen and (max-width: 760px) {
.editors {
padding: 0 0 40px;
}
.editors__list {
gap: 20px;
}
.editors__card {
margin-bottom: 20px;
}
}
/* //////////////////////////////////////////////////////////////////// */
/* Products */
.product__card {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
justify-content: center;
}
.product__image {
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
position: static;
padding-bottom: 0;
height: fit-content;
top: 0;
max-height: 440px;
}
/* new */
.product__image {
width: 100%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
padding-bottom: 0;
height: 440px; /* 420px; */
}
.product_image-container {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 0;
height: auto;
border: 0; /* var(--product-img-border-size) solid var(--product-img-border-color); */
border-radius: 0; /* var(--product-img-border-radius); */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.product__image img {
width: 100%;
position: static;
top: unset;
-ms-transform: unset;
transform: unset;
top: 0;
left: 0;
}
.product__eyebrow {
width: 100%;
font-family: var(--product-brand-font);
font-weight: var(--product-brand-weight);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--product-brand-color);
text-decoration: none;
padding: 15px 10px 5px;
overflow: hidden;
height: 35px;
}
.product__name {
width: 100%;
font-family: var(--product-name-font);
font-weight: var(--product-name-weight);
font-size: 1.1rem;
text-transform: none;
letter-spacing: 0em;
color: var(--product-name-color);
text-decoration: none;
padding: 0 10px 15px;
white-space: normal;
overflow: hidden;
height: 60px;
}
.product__name span {
border-bottom: 1px solid transparent;
}
.product__name:hover span {
border-bottom: 1px solid var(--product-name-color);
}
.product__buy {
width: 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
padding: 0 10px 10px;
gap: 20px;
}
.product__buy-button {
width: fit-content;
padding: 8px 20px;
font-family: Brown Bold, sans-serif;
font-weight: 400;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--product-buy-text-color);
background-color: var(--product-buy-bg-color);
border: var(--product-buy-border-size) solid var(--product-buy-border-color);
border-radius: 100px;
text-align: center;
text-decoration: none;
}
.product__buy-button:hover {
background-color: var(--product-buy-bg-hover-color);
color: var(--product-buy-text-hover-color);
}
.product__buy-details {
display: flex;
flex-direction: column;
gap: 5px;
width: 100%;
}
.product__prices {
font-family: Brown Bold, sans-serif;
font-weight: 400;
font-size: 0.7rem;
color: var(--product-brand-color);
text-decoration: none;
}
.product__retailer {
font-family: Brown Regular, sans-serif;
font-weight: 400;
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--product-brand-color);
text-decoration: none;
}
.product__card {
text-align: left;
}
.caro.is-products .caro__card {
width: 220px !important;
min-width: 220px !important;
max-width: 220px !important;
}
.product__name {
font-size: 1.1rem !important;
}
.product__image {
height: 320px !important;
}
.product__buy {
padding: 0 0 10px !important;
gap: 15px !important;
}
.product__name,
.product__eyebrow {
padding-left: 0 !important;
padding-right: 0 !important;
}
.caro__card:first-of-type {
padding-left: 0 !important;
}
.caro__card:last-of-type {
margin-right: 0 !important;
}
.caro__scroller-list {
scroll-padding: 0 20px;
padding: 0 20px 20px !important;
}
h2.caro__header {
font-family: var(--OwnersXwide);
font-weight: 300;
font-size: 3.75rem;
margin: 0 auto 40px;
text-transform: uppercase;
line-height: 1.0;
padding: 0 20px;
}
h2.caro__header strong {
font-weight: 700;
}
h2.caro__header.is-minor {
font-size: 2rem;
}
h3.caro__subheader {
font-family: var(--NeueHaus-Unica);
font-weight: 300;
font-size: 1.45rem;
margin: 0 auto 20px;
text-transform: none;
font-style: italic;
padding: 0 20px;
}
h2.caro__header img {
height: 120px;
}
@media only screen and (max-width: 768px) {
h2.caro__header {
font-size: 3.0rem;
}
h3.caro__subheader {
font-size: 1.15rem;
}
h2.caro__header img {
height: auto;
width: 100%;
max-width: 400px;
padding: 0 20px;
}
h2.caro__header.is-minor {
font-size: 1.5rem;
}
}
@media only screen and (max-width: 500px) {
h2.caro__header img {
max-width: 375px;
}
}
@media only screen and (max-width: 420px) {
h2.caro__header img {
max-width: 335px;
}
}
.caro__eyebrow {
margin-bottom: 10px;
padding-top: 20px;
font-family: var(--NeueHaus-Unica);
font-weight: 300;
}
.subnav {
/* background-color: #FFEEEE; */
}
.header__container {
width: 100%;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 0;
}
.header__column {
width: 33.333%;
}
.header__column.is-two-column {
width: 66.6666%;
}
.header__column img {
width: 100%;
}
.intro__break {
display: block;
}
.tmp-hero-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
right: 0;
margin: 0 auto;
}
.tmp-hero-overlay img {
width: 100%;
}
@media only screen and (max-width: 968px) {
.header__container {
flex-direction: column;
}
.header__column {
width: 100%;
}
.header__column.is-two-column {
width: 100%;
}
.intro__break {
display: none;
}
}
.overlay__deaktop {
display: block;
}
.overlay__mobile {
display: none;
}
@media only screen and (max-width: 768px) {
.overlay__deaktop {
display: none;
}
.overlay__mobile {
display: block;
}
.tmp-hero-overlay {
top: 0;
left: 0;
width: 100%;
}
h2.caro__header {
font-size: 2.0rem;
}
}
/* Hide broken ad */
.goku,
.bxc {
display: none !important;
}
/* LOOKBOOK */
.gallery {
width: 100%;
margin-top: -20px;
font-size: 0;
}
.gallery__container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 0;
}
.gallery__item {
width: 25%;
}
.gallery__image {
width: 100%;
height: 100%;
z-index: 98;
position: relative;
}
.gallery__image img {
width: auto;
position: relative;
height: 80vh;
}
.gallery__details {
padding: 15px 0 0;
z-index: 99;
position: relative;
}
.gallery__item-title {
font-family: 'Brown Regular', sans-serif;
font-size: 1.2rem;
color: var(--color-black);
text-align: left;
margin: 5px auto;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 12px;
max-width: 720px;
padding: 0 20px 40px;
}
.gallery__item-credit {
font-family: var(--Roboto-Mono);
font-size: 0.7rem;
text-transform: uppercase;
text-align: left;
display: flex;
flex-direction: row;
justify-content: start;
align-items: center;
gap: 12px;
padding-top: 0;
}
.caro__subheader .gallery__item-credit {
font-size: 0.9rem;
font-family: 'Brown Regular', sans-serif;
padding-top: 7px;
}
.gallery__item-credit a:hover {
background-color: var(--color-black);
color: var(--color-cream);
}
.footnote {
font-family: 'Brown Regular', sans-serif;
font-size: 0.65rem;
color: var(--color-black);
}
.person__overlay-set {
font-family: 'Brown Regular', sans-serif;
font-size: 1rem;
line-height: 1.65;
}
.person__image-container {
font-size: 0;
}
.is-double {
width: 50%;
}
.caro.is-gallery
.caro__card {
width: fit-content;
min-width: fit-content;
max-width: fit-content;
height: fit-content;
height: fit-content;
}
.gallery__credit-notes {
font-family: var(--Roboto-Mono);
font-size: 0.6rem;
text-transform: uppercase;
text-align: center;
width: 100%;
max-width: 1100px;
margin: 0 auto;
padding: 0 20px 50px;
white-space: normal;
}
/* Images */
.gallery__image.gallery__image-group {
display: flex;
flex-direction: column;
gap: 20px;
height: 80vh;
}
.gallery__image.gallery__image-group img {
height: 50%;
}
.gallery__image {
overflow: hidden;
}
.gallery__image a img {
transform: scale(1.0);
transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}
.gallery__image a:hover img {
transform: scale(1.1);
transition: all 0.5s ease-in;
-webkit-transition: all 0.5s ease-in;
}
@media only screen and (max-width: 1400px) {
.gallery__image img,
.gallery__image.gallery__image-group {
height: 70vh;
}
}
@media only screen and (max-width: 1200px) {
.gallery__image img,
.gallery__image.gallery__image-group {
height: 60vh;
}
}
.is-quote-bg {
background: #f7e5ba;
background: -webkit-linear-gradient(180deg, rgba(247, 229, 186, 1) 0%, rgba(247, 231, 244, 0.85) 100%);
background: -moz-linear-gradient(180deg, rgba(247, 229, 186, 1) 0%, rgba(247, 231, 244, 0.85) 100%);
background: linear-gradient(180deg, rgba(247, 229, 186, 1) 0%, rgba(247, 231, 244, 0.85) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#F7E5BA", endColorstr="#F7E7F4", GradientType=0);
}
.caro__subheader {
font-family: var(--Owners);
font-size: 1.35rem;
color: var(--color-black);
text-align: center;
display: block;
flex-direction: column;
align-items: center;
gap: 12px;
max-width: 750px;
margin: 0 auto 20px;
padding: 0 20px 20px;
}
@media only screen and (max-width: 600px) {
.gallery__image img, .gallery__image.gallery__image-group {
height: auto;
width: 100%;
max-width: 87vw;
}
}
.caro__overlay {
pointer-events: none;
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #C0D6FA;
width: 100%;
height: 100%;
opacity: 0.0;
z-index: 99;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.caro__overlay-set {
padding: 40px;
}
.gallery__image a:hover .caro__overlay {
opacity: 1.0;
transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
}
.caro__overlay-close {
position: absolute;
top: 10px;
right: 10px;
font-family: 'Brown Regular', sans-serif;
font-size: 0.8rem;
line-height: 1.5;
color: #000;
pointer-events: auto;
cursor: pointer;
}
.caro__overlay-info {
position: absolute;
top: 5px;
right: 5px;
padding: 0;
width: 44px;
height: 44px;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
pointer-events: auto;
cursor: pointer;
}
.caro__overlay-info-set {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.25);
border-radius: 3px;
width: 26px;
height: 26px;
padding: 4px;
font-family: 'Brown Regular', sans-serif;
font-style: italic;
font-size: 0.8rem;
line-height: 1;
color: #fff;
border: 0 solid #fff;
}
.icon__info {
display: flex;
flex-direction: column;
justify-content: center;
align-items: start;
gap: 2px;
}
.icon__info-bar {
width: 15px;
height: 1px;
background-color: #fff;
}
.icon__info-bar-md {
width: 13px;
height: 1px;
background-color: #fff;
}
.icon__info-bar-sm {
width: 10px;
height: 1px;
background-color: #fff;
}
.caro__overlay.is-mobile-overlay {
display: none;
opacity: 1.0;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 9999999999;
}
.caro__overlay.is-mobile-overlay {
justify-content: start;
}
.caro__overlay.is-mobile-overlay
.caro__overlay-set {
overflow-y: auto;
justify-content: start;
max-width: 720px;
}
.caro__overlay-set>p {
font-family: 'Brown Regular', sans-serif;
font-size: 1.4rem;
line-height: 1.5;
color: #000;
white-space: normal;
width: 100%;
}
@media only screen and (max-width: 1400px) {
.caro__overlay-set>p {
font-size: 1.25rem;
}
}
@media only screen and (max-width: 1200px) {
.caro__overlay-set>p {
font-size: 1.0rem;
}
}
.mobile__overlays {
display: none;
}
@media only screen and (max-width: 1024px) {
.mobile__overlays {
display: block;
}
.caro__overlay-info {
display: flex;
}
.caro__overlay.is-desktop {
display: none;
}
}
.gallery__item.is-quote {
width: 100%;
}
.is-quote
.gallery__image {
margin: 0 auto;
text-align: center;
}
.is-quote
.gallery__image img {
height: auto;
width: 100%;
max-width: 1100px;
margin: 0 auto;
}
.quote__credit {
width: fit-content;
margin: 40px auto 20px;
}
.quote__credit .gallery__image img {
width: 100%;
max-width: 150px;
max-height: 150px;
border-radius: 400px;
margin: 0 auto;
}
.quote__name {
/* font-family: Brown Bold, sans-serif; */
font-family: var(--OwnersWide);
font-size: 1.45rem;
letter-spacing: 0;
line-height: 1.2;
word-spacing: normal;
font-weight: 500;
color: var(--color-black);
text-align: center;
padding: 8px 20px 3px;
}
.quote__role {
font-family: var(--OwnersWide);
font-size: 1.45rem;
letter-spacing: 0;
line-height: 1.2;
word-spacing: normal;
font-weight: 300;
color: var(--color-black);
text-align: center;
}
.quote__desktop {
display: block;
}
.quote__mobile {
display: none;
}
@media only screen and (max-width: 760px) {
.quote__credit .gallery__image img {
max-width: 100px;
max-height: 100px;
}
.quote__name,
.quote__role {
font-size: 1.25rem;
}
.quote__desktop {
display: none;
}
.quote__mobile {
display: block;
}
}
.quote__credit a .gallery__image {
transform: scale(1.0);
transition: all 0.5s ease-in;
-webkit-transition: all 0.3s ease-in;
}
.quote__credit a:hover .gallery__image {
transform: scale(1.1);
transition: all 0.5s ease-in;
-webkit-transition: all 0.3s ease-in;
}
.quote__credit a .quote__name span {
border-bottom: 1px solid transparent;
transition: all 0.5s ease-in;
-webkit-transition: all 0.3s ease-in;
}
.quote__credit a:hover .quote__name span {
border-bottom: 1px solid var(--color-black);
transition: all 0.5s ease-in;
-webkit-transition: all 0.3s ease-in;
}
.intro__sm {
font-size: 17px !important;
text-align: left;
}
.tmp-intro p {
max-width: 720px !important;
text-align: left;
font-size: 17px;
}
@media only screen and (max-width: 760px) {
.intro__sm {
font-size: 17px !important;
text-align: left;
}
}
.subheader-break {
display: block;
}
@media only screen and (max-width: 960px) {
.subheader-break {
display: none;
}
}
.related-entries-header {
font-family: var(--Owners);
font-size: 2rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1.3;
}
.related-entry-title {
font-family: var(--NeueHaus-Unica);
font-size: 1.0rem;
font-weight: 400;
word-spacing: normal;
letter-spacing: 0;
line-height: 1.4;
text-transform: none;
text-decoration: none;
border-bottom: 1px solid var(--color-black);
text-overflow: ellipsis;
}
.related-entries-container .related-entries .related-entry.has-border {
border-left: 1px solid transparent;
}
.related-entry-title:hover {
border-bottom: 1px solid var(--color-black);
}
.section-text {
font-family: var(--body-font);
font-weight: 300;
max-width: 750px;
margin-left: auto;
margin-right: auto;
text-align: left;
padding-left: 20px;
padding-right: 20px;
color: #000;
}
.r29-article {
overflow-x: hidden !important;
overflow-y: hidden !important;
margin-top: 0; /* -17px; */
}
@media only screen and (max-width: 760.98px) {
.r29-article {
margin-top: 0;
}
}
.section-text h3 {
text-align: center;
}
.section-text a,
.section-text a:link,
.section-text a:visited {
border-bottom: 1px solid #000;
}
.section-text a:hover {
border-bottom: 1px solid #000;
}
/* Product Carousel */
.section-multi-product-container
.multi-product-carousel-container
.products-row {
width: 100%;
overflow-x: auto;
scroll-behavior: smooth;
padding: 0 20px;
}
.section-multi-product-container
.left-arrow,
.section-multi-product-container
.left-arrow.disabled,
.section-multi-product-container
.right-arrow {
display: none !important;
}
.section-multi-product-container .product-count {
display: none !important;
}
.multi-product-carousel-container .product {
font-family: var(--NeueHaus-Unica);
font-weight: 300;
}
.multi-product-carousel-container .product .short-title {
text-align: center;
font-family: var(--NeueHaus-Unica);
font-weight: 400;
letter-spacing: 0;
}
.multi-product-carousel-container .product .brand-name {
color: #000;
text-align: center;
font-weight: 400;
}
.multi-product-carousel-container .product .retailer-credit,
.product-carousel .product .retailer-credit,
.product-grid .product .retailer-credit {
display: none;
}
.multi-product-carousel-container .product .buy-details,
.product-carousel .product .buy-details,
.product-grid .product .buy-details {
margin: 0 auto 10px 0;
justify-content: start;
align-items: center;
flex-flow: column;
flex-direction: column-reverse;
}
.multi-product-carousel-container .product .buy-button,
.multi-product-carousel-container .product .more-info,
.product-carousel .product .buy-button,
.product-carousel .product .more-info,
.product-grid .product .buy-button,
.product-grid .product .more-info {
width: fit-content !important;
padding: 12px 20px;
border-radius: 100px;
background-color: #fff;
margin-top: 7px !important;
filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.15))
}
.multi-product-carousel-container .product .price-details,
.product-carousel .product .price-details,
.product-grid .product .price-details {
align-items: center;
}
.buy-button.full-width {
margin: 0 0 10px 0 !important;
}
.custom__images {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
gap: 40px;
width: 100%;
margin: 0 auto;
padding: 50px 20px;
}
.custom__images-row {
display: flex;
flex-flow: row;
justify-content: center;
align-items: center;
gap: 40px;
width: 100%;
max-width: 1600px;
margin: 0 auto;
padding: 0 20px;
}
.custom__image {
width: 30%;
}
.custom__image img {
width: 100%;
}
@media only screen and (max-width: 760.98px) {
.custom__images-row {
flex-flow: column;
gap: 20px;
}
.custom__image {
width: 100%;
}
}
h4 {
font-family: var(--NeueHaus-Unica);
font-weight: 300;
font-size: 1.75rem;
margin: 0 auto 20px;
text-transform: none;
font-style: normal;
line-height: 1.4;
padding: 50px 20px;
text-align: center;
}
h4 strong {
font-weight: 600;
}
.section-multi-product-container .multi-product-carousel-container .products-row::-webkit-scrollbar {
background: rgba(0,0,0,0.0);
height: 10px;
pointer-events: auto;
cursor: pointer;
}
.caro__scroller-list::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
padding: 2px 0;
}
.section-multi-product-container .multi-product-carousel-container .products-row::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.0);
border-radius: 3px;
border: 4px solid var(--color-white);
pointer-events: auto;
cursor: pointer;
}
.section-multi-product-container .multi-product-carousel-container .products-row::-webkit-scrollbar-track {
background: rgba(0,0,0,0);
padding: 0;
}
.section-multi-product-container .multi-product-carousel-container:hover .products-row::-webkit-scrollbar-thumb {
background: rgba(0,0,0,0.1);
}
@media only screen and (min-width: 760.98px) {
.full-reveal .reveal-image .reveal-fixed-wrap .reveal-fixed {
top: 50px;
}
}
.openIntro {
font-family: 'Brown Regular', sans-serif;
font-style: normal;
font-size: 0.7rem;
line-height: 1;
color: #000;
border-bottom: 1px solid #000;
text-align: center;
width: fit-content;
margin: -10px 0 0 5px;
pointer-events: auto;
cursor: pointer;
display: inline-block;
}
.moreIntro {
display: none;
}
.styling-credits {
font-family: 'Roboto Mono', monospace;
font-size: 0.65rem;
font-weight: 400;
line-height: 1.55;
text-transform: uppercase;
text-align: center;
margin: -30px auto 60px !important;
padding: 0 20px;
}
.tmp-big-image {
width: 100%;
position: relative;
padding: 0 50px 150px !important;
}
.tmp-big-image img {
width: 100%;
}
@media only screen and (max-width: 760.98px) {
.tmp-big-image {
width: 100%;
position: relative;
padding: 0 20px 50px !important;
}
}
const hasSubnav = true;
/* //////////////////////////////////////////////////////////////////// */
/* DO NOT ALTER */
function showIntro() {
const a = document.getElementById("moreIntro");
const b = document.getElementById("button__show");
a.style.display = "block";
b.style.display = "none";
}
function hideIntro() {
const a = document.getElementById("moreIntro");
const b = document.getElementById("button__show");
a.style.display = "none";
b.style.display = "inline-block";
}
function fixImageSizes() {
const w = setTimeout(function() {
clearTimeout(w);
let a = document.querySelectorAll(".product_image-container img");
let h;
for (let i = 0; i < a.length; i++) {
// Get image height
h = a[i].clientHeight;
// If height is less than 440px
if (h 760) {
// c = document.getElementById("video_desktop");
// c.pause();
}
a.style.position = "fixed";
b.style.height = "30px";
a.style.transform = "translateY(-50px)";
const w = setTimeout(function() {
a.style.transform = "translateY(58px)";
a.style.transition = "all 0.75s ease-in-out";
a.style.webkitTransition = "all 0.75s ease-in-out";
}, 500);
}
function subnavOff() {
const a = document.getElementById("subnav");
const b = document.getElementById("subnav__marker");
let c;
if (window.innerWidth > 760) {
// c = document.getElementById("video_desktop");
// c.play();
}
a.style.transform = "translateY(0)";
a.style.transition = "all 0.75s ease-in-out";
a.style.webkitTransition = "all 0.75s ease-in-out";
const w = setTimeout(function() {
clearTimeout(w);
a.style.position = "relative";
b.style.height = "1px";
}, 10);
}
function setupSubnav() {
if (Waypoint) {
var waySticky = new Waypoint({
element: document.getElementById('subnav__marker'),
handler: function(direction) {
if (direction == 'down') {
subnavOn();
}
if (direction == 'up') {
subnavOff();
}
},
offset: 110
});
}
}
function initSubnav() {
const w = setTimeout(function() {
clearTimeout(w);
setupSubnav();
}, 1000);
}
function initAnchors() {
let a = document.querySelectorAll("#below-the-fold-modules>div");
let b,c,d,e,dv;
for (let i = 0; i {
const script = document.createElement('script');
script.src = url;
script.onload = resolve;
script.onerror = reject;
document.head.appendChild(script);
});
}
function initLoad() {
loadScript('https://studio-assets.rf29.net/Assets/Site/JS/waypoints.min.js')
.then(() => {
// Loaded
if (hasSubnav) {
initSubnav();
// initAnchors();
}
// fixImageSizes();
})
.catch(error => {
// Not loaded
console.error('Error loading script:', error);
});
}
const checkInit = setTimeout(function() {
clearTimeout(checkInit);
const a = document.getElementById("tmp-hero");
// Make sure to do this just once in case of page re-render
if (a == undefined) {
let b = document.querySelectorAll(".tmp-hero")[0];
b.setAttribute("id","tmp-hero");
initLoad();
}
}, 50);
function showOverlay(e) {
let a = [e];
let b = document.getElementById(a);
b.style.opacity = "0.0";
b.style.display = "flex";
const w = setTimeout(function() {
b.style.opacity = "1.0";
b.style.transition = "all 0.5s ease-in-out";
b.style.webkitTransition = "all 0.5s ease-in-out";
}, 50);
}
function closeOverlay(e) {
let a = [e];
let b = document.getElementById(a);
b.style.opacity = "0.0";
b.style.transition = "all 0.5s ease-in-out";
b.style.webkitTransition = "all 0.5s ease-in-out";
const w = setTimeout(function() {
b.style.display = "none";
}, 550);
}
-->
<!-- -->
.tmp-intro-image {
width: 100%;
position: relative;
}
.tmp-intro-image-bg {
width: 100%;
position: relative;
}
.tmp-intro-image-overlay {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
Prep, With
<!--
<!-- -->
Tailoring That Does
<!--
<!-- -->
Layers Worth
<!--
<!-- -->
After-Dark
<!--
<!-- -->
The Finishing Touch
<!--
<!-- -->
<!--
-->
<!-- 
-->
<!-- 
-->
<!--
-->
<!-- -->
For the first time ever, Refinery29’s Lookbook skips the models, the glam squads, and is instead turning our lens toward the everyday people around us. We found 14 real-life stars who really know how to put it on, from the Fashion enthusiasts who layer pieces like nobody’s business to the beauty obsessives who know that there is no such thing as too much blush. These aren’t looks dreamt up by a celebrity stylist. They’re a reflection of real personal taste, experimentation, and impossible-to-manufacture confidence. Nothing is inspiring us more than the unapologetic self-expression oozing from each IRL look. And while we may have scouted them at Beautycon University, the style lessons go beyond the L.A. campus. Consider their looks your permission slip to layer a little differently, wear the thing you thought you couldn’t pull off, or simply bring a little more joy into your fall/winter shopping list. If you’re ready to make this season your best-dressed semester yet, class is back in session.
<!----> <!-- -->
Prep, With
Personality
<!-- This is a subheader.
-->Yes, we’re wearing ties and handling business (better than the boys do, if I might add). Even if you’re borrowing yours from your significant other or thrifting a vintage tie from your favorite re-sell site, there are so many ways to really make the look your own. The stars of our lookbook are teaching us the art of making classics feel new again, pairing the ready-for-business pieces with dramatic ruffled sleeves anchored with kitten heels, ’90s-inspired Kangol hats styled with track pants, pinstripes paired with grills, and whatever feels right. Because the best part about personal style is that there are no rules, even when you’re technically wearing a uniform. “None of this came together. Everything’s from somewhere else, but I saw the vision,” Chamille McKay explains to Refinery29. “I was like, ‘We need the layers, we need all the things, but let’s make it cute.’” And it worked.
Tiffany Siripat, meanwhile, proves even the most buttoned-up uniform has room for a little sparkle, pairing her tie and sweater vest with a rhinestone-studded shirt, which arguably could be the hero of all of our winter wardrobes.
For Vanessa Camille Ronquillo, it all started with one good shirt. “What I selected first was actually this shirt, and I love the drama it brings,” she says. Proof that sometimes breaking the rules is easier with great basics.
Styling:
Tailoring That Does
The Most
<!-- This is a subheader
-->There is nothing that gets me more excited than a reworked suit. Whether it’s a drop-waist blazer, a wildly cool animal-print mini, or an unexpected pairing with a balloon skirt, the best tailoring right now takes everything we know about getting suited up and messes with the proportions. Picture all of the polish of a classic suit, without any of the stuffy corporate energy. The lesson? Start with something structured, then give it a little personality. Sonia Ramos knows the power of playing with silhouettes and paying attention to the details. “I love a good bubble skirt, especially if you are curvy, you have some hips, some thighs...it balances you out,” she says.“But it’s also always about the accessories.” Not just the handbag, shoes, and sunglasses. “But also, like, the nail art and my rings. I think when it comes to jewelry, the jewelry makes the entire look, and so do the nails,” she adds.
Don’t want to buy an entirely new suit? Don’t. Bayeenuh and Yiriya Shahdaiah showed us how statement belts can really turn it up a notch. A checkered suit gets its shape from a perfectly tucked long tail belt, while zebra print paired with an oversized buckle turns another traditionally serious silhouette into something impossible to ignore. The modern take on suits gets so much better with perfectly undone brows, silver-streaked tresses, and metallic lips.
Styling:
Layers Worth
Learning
<!-- This is a subheader
-->As the temperatures drop, it can be easy to reach for a sweater or scarf, but why not start with something unexpected? Give your favorite summer dress a longer lifespan by wearing it over jeans and a crisp button-down. Look at pieces that are already in your closet and start reimagining them. Refinery29’s Dawnie Jefferson makes a case for refusing to pack away your warm-weather wardrobe, layering a striped dress over an Old Navy boyfriend shirt and loose Old Navy horseshoe jeans.
And Jefferson’s layers aren’t just interesting to look at; some carry a story. The necklace she wears belonged to her dad. “It was my favorite of his, and I wear it all the time,” she says. One of her rings is also a friendship ring shared with her best friend.
Sometimes the feelings come before the actual outfit. “When I woke up this morning, I said, ‘What do I wanna feel like?’ And it always starts with an emotion for me, and today’s emotion was that girl,” Natasha Ferguson, also known as MAAD, tells Refinery29. Well, mission accomplished. She layered a vintage blazer with a bustier and mini skirt, proving that winter layers don’t have to be the most obvious ones and—more importantly—we should all be wearing whatever makes us feel most confident. Period.
Styling:
Think Pink
<!--This is a subheader
-->There’s wearing pink, and then there’s making it part of your personality. This season, we’re firmly in the latter camp. Forget the notion that the color has to read precious or overly sweet: velvet trousers, unexpected gingham, piles of pearls, and clashing shades prove pink can have just as much range as the people wearing it. And sometimes, your signature color finds.
For Paige Lauren Billiot, it’s more than just a Pantone swatch reference. “Pink is definitely my color,” she says. “I love to match my birthmark as much as possible, so today’s look obviously had to have my pink statement.” This time, that statement came with flowy velour pants, a shoulder-baring top, and stacks of jewelry. Harry Park takes the assignment even further, mixing pink with gingham and playful proportions for a look that refuses to take the traditionally “pretty” color too seriously. Because playful pink pants, platform Crocs, and a bedazzled phone case aren't exactly easy to forget.
Styling:
After-Dark
Drama
<!-- This is a subheader
-->As a millennial who lived through the era of wearing business casual to the club, I know a thing or two about taking tailoring after dark. Thankfully, this time around, the dress code is decidedly less corporate. Take a cue from ShaVonne Boggs and think plunging necklines, razor-sharp tailoring, sculptural hair, and makeup that would feel entirely unreasonable at 10 a.m.—which is exactly the point. Black might be the starting point, but these looks prove it’s really about what you put on top.
For Kendra French, more was always the plan. “I wanted to do a really editorial kinda ’80s look today, ‘cause that’s just my thing,” she tells Refinery29. Her signature smoky eye, metallic lip, and equally signature mullet make the case for choosing an era and committing to it.
Styling:
The Finishing Touch
Is The Look
<!-- This is a subheader
-->Who decided that the finishing touch has to come last? Sometimes the bow, the hair, the nails, or the perfect swipe of eyeshadow is the thing that inspires everything. Liaah Barrera makes a case for going big with a larger-than-life white bow topping polished half-up waves, while Jalyka Smith turns color coordination into an art form, pairing burgundy hair with green eyeshadow, rosy blush, and graphic green nails. When the details are this good, the outfit doesn’t have to do all the talking. Consider it the final lesson of the semester: personal style is all about knowing which detail makes something feel unmistakably like you. Class dismissed.
Styling:
Photographer:
SHANA JADE TRAJANOSKA
.stories {
width: 100%;
padding-bottom: 80px;
}
.stories__container {
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
padding: 0 40px;
margin: 0 auto;
}
.stories__card {
height: 600px;
position: relative;
width: 340px;
margin: 0;
display: inline-block;
background-color: #FFEEEE;
text-align: center;
color: var(--color-black);
min-width: 140px;
-webkit-transition: box-shadow .2s ease-in-out;
transition: box-shadow .2s ease-in-out;
vertical-align: top;
}
.stories__opener-image {
min-height: 405px;
z-index: 40;
position: relative;
}
.stories__opener-image img {
position: static;
width: 100%;
z-index: 60;
}
.stories__story-content {
text-align: left;
margin: 20px;
}
.stories__section {
font-family: Brown Regular, sans-serif;
font-size: 12px;
letter-spacing: .1em;
line-height: 1.2em;
word-spacing: normal;
font-weight: 400;
color: var(--color-black);
text-transform: uppercase;
margin-bottom: 15px;
}
.stories__title {
font-family: Brown Bold, sans-serif;
font-size: 25px;
font-weight: 400;
word-spacing: normal;
letter-spacing: 0em;
line-height: 1.3em;
text-transform: none;
font-size: 20px;
text-align: left;
}
.stories__card a
.stories__title>span {
-webkit-transition: border-bottom 0.1s ease-in;
transition: border-bottom 0.1s ease-in;
border-bottom: 1px solid transparent;
}
.stories__card a:hover
.stories__title>span {
-webkit-transition: border-bottom 0.1s ease-in;
transition: border-bottom 0.1s ease-in;
border-bottom: 1px solid var(--color-black);
}
.stories__story-meta {
font-family: Brown Regular, sans-serif;
font-size: 12px;
letter-spacing: .1em;
line-height: 1.2em;
word-spacing: normal;
font-weight: 400;
text-transform: uppercase;
color: var(--color-black);
}
.stories__author {
padding-top: 2.5em;
position: absolute;
bottom: 20px;
left: 20px;
}
.stories__author-name {
text-transform: uppercase;
}
.stories__publish-date {
position: absolute;
bottom: 20px;
right: 20px;
}
@media only screen and (max-width: 1550px) {
.stories__container {
max-width: 1200px;
}
}
PAST LOOKBOOKS
Like what you see? How about some more R29 goodness, right here?
