/* ==========================================================================
Luisante — design system
Values taken from the Figma source (frame width 1512, content 1420 @ 46px)
Nohemi (commercial) is substituted with DM Sans.
========================================================================== */
:root {
--bg: #f4f1ea;
--card: #fcfbf7;
--red: #8b0013;
--muted: #6f6969;
--white: #fff;
--placeholder: #d9d9d9;
--content: 1420px;
--gutter: 46px;
--r-lg: 25px;
--r-md: 20px;
--r-sm: 15px;
--font-display: "Newsreader", "Times New Roman", serif;
--font-sans: "DM Sans", "Helvetica Neue", Arial, sans-serif;
--font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
/* the off-canvas cart sits outside the viewport until it is opened */
overflow-x: clip;
}
body {
margin: 0;
overflow-x: clip;
background: var(--bg);
color: var(--red);
font-family: var(--font-body);
font-size: 20px;
line-height: 22px;
-webkit-font-smoothing: antialiased;
}
img {
display: block;
max-width: 100%;
}
/* component rules set display, which would otherwise beat the UA [hidden] rule */
[hidden] {
display: none !important;
}
a {
color: inherit;
text-decoration: none;
}
button {
font: inherit;
color: inherit;
background: none;
border: 0;
cursor: pointer;
}
.container {
width: min(var(--content), 100% - var(--gutter) * 2);
margin-inline: auto;
}
/* Line breaks the designer set by hand; dropped once the text has to reflow. */
@media (max-width: 1200px) {
br.fixed-break {
display: none;
}
}
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* --------------------------------------------------------------- typography */
.display {
font-family: var(--font-display);
font-optical-sizing: none;
font-weight: 300;
font-size: 55px;
line-height: 52px;
margin: 0;
}
.display--xl {
font-size: 80px;
line-height: 72px;
}
.display--product {
font-size: 53px;
line-height: 50px;
}
.eyebrow {
font-family: var(--font-sans);
font-weight: 700;
font-size: 18px;
line-height: 22px;
letter-spacing: 0.54px;
text-transform: uppercase;
margin: 0;
}
.section-title {
font-family: var(--font-sans);
font-weight: 700;
font-size: 35px;
line-height: 35px;
text-transform: uppercase;
margin: 0;
}
.body-text {
font-family: var(--font-body);
font-size: 20px;
line-height: 22px;
margin: 0;
}
/* ------------------------------------------------------------------ buttons */
.pill {
display: inline-flex;
align-items: center;
justify-content: center;
height: 34px;
padding: 5px 40px;
border: 1px solid currentColor;
border-radius: var(--r-md);
font-family: var(--font-body);
font-weight: 300;
font-size: 24px;
line-height: 24px;
white-space: nowrap;
transition: background-color 0.25s ease, color 0.25s ease;
}
.pill:hover {
background: var(--red);
color: var(--bg);
}
.pill--light {
color: var(--white);
}
.pill--light:hover {
background: var(--white);
color: var(--red);
}
.pill--add {
width: 176px;
height: 32px;
padding: 5px 0;
}
.pill--icon {
width: 34px;
height: 32px;
padding: 5px 10px;
flex: none;
}
/* ------------------------------------------------------------------- header */
.announce {
height: 32px;
background: var(--red);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 20px;
line-height: 22px;
}
.site-header {
height: 126px;
display: flex;
align-items: center;
color: var(--red);
}
.site-header .container {
display: flex;
align-items: center;
}
.site-header > .container > .logo {
width: 272px;
margin-left: 6px;
}
/* The wordmark is the outlined lettering exported from the Figma file.
It is applied as a mask so it inherits the colour of its context. */
.logo {
display: block;
width: 276px;
aspect-ratio: 1424 / 334;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,") no-repeat left center / contain;
mask: url("data:image/svg+xml,") no-repeat left center / contain;
}
.site-nav {
display: flex;
gap: 45px;
margin-left: auto;
font-family: var(--font-body);
font-size: 21.875px;
line-height: 21px;
}
.site-nav a {
position: relative;
padding-bottom: 2px;
}
.site-nav a::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.site-nav a:hover::after {
transform: scaleX(1);
}
.header-actions {
display: flex;
align-items: center;
gap: 26px;
margin-left: 70px;
margin-right: 5px;
}
.header-actions a {
display: block;
color: currentColor;
transition: opacity 0.25s ease;
}
.header-actions a:hover {
opacity: 0.6;
}
.icon-cart {
position: relative;
width: 30px;
height: 33px;
}
.icon-cart svg {
width: 30px;
height: 33px;
}
.icon-cart .cart-count {
position: absolute;
inset: 12px 0 0 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-weight: 300;
font-size: 19.36px;
line-height: 18px;
}
.icon-account svg {
width: 24px;
height: 33px;
}
/* header variant laid over a full-bleed hero */
.site-header--overlay {
position: absolute;
inset: 28px 0 auto 0;
height: auto;
z-index: 5;
color: var(--white);
}
.site-header--overlay .container {
width: min(1406px, 100% - 116px);
align-items: flex-start;
}
.site-header--overlay .logo-block {
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 17px;
}
.site-header--overlay .logo {
width: 352px;
margin-left: 3px;
}
.site-header--overlay .site-nav {
margin-left: 0;
gap: 54px;
font-family: var(--font-body);
font-size: 15px;
line-height: 14px;
}
.site-header--overlay .header-actions {
align-items: flex-start;
margin-left: auto;
margin-right: 0;
}
/* -------------------------------------------------------------------- cards */
.card {
background: var(--card);
border-radius: var(--r-lg);
padding: 23px 25px 25px;
}
.card__media {
display: block;
border-radius: var(--r-md);
overflow: hidden;
background: var(--placeholder);
}
.card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card__media img {
transform: scale(1.03);
}
.card__foot {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
margin-top: 24px;
}
.card__title {
font-family: var(--font-sans);
font-weight: 500;
font-size: 25px;
line-height: 25px;
margin: 0;
max-width: 250px;
}
.card__buy {
display: flex;
align-items: center;
gap: 20px;
flex: none;
}
.card__price {
font-family: var(--font-body);
font-weight: 300;
font-size: 24px;
line-height: 24px;
}
/* ------------------------------------------------------------------- footer */
/* The footer is a fixed 1440x540 plate in the design, so its three blocks are
placed on it by coordinate. Two variants: white-on-red (homepage) and the
bordered light one (every other page), which also uses different faces. */
.site-footer {
padding: 0 36px;
}
.site-footer__inner {
position: relative;
max-width: 1440px;
margin-inline: auto;
height: 540px;
overflow: hidden;
}
/* the Figma component carries a 1px frame stroke here; it reads as a leftover
component outline rather than design, so it is not drawn. */
.footer-contact,
.footer-legal,
.footer-nav {
position: absolute;
font-size: 11px;
line-height: 10px;
}
.footer-contact {
display: grid;
grid-template-columns: 109px auto;
row-gap: 15px;
}
.footer-contact .socials {
display: flex;
}
.footer-contact a {
text-decoration: underline;
text-underline-offset: 2px;
}
.footer-legal {
width: 127px;
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
text-align: center;
}
.footer-legal .copyright {
margin: 12px 0 0;
font-size: 8.26px;
line-height: 10px;
}
.footer-nav {
display: flex;
gap: 24px;
font-family: var(--font-body);
}
.footer-nav a:hover,
.footer-contact a:hover,
.footer-legal a:hover {
opacity: 0.65;
}
.site-footer__wordmark {
position: absolute;
left: 10px;
right: 8px;
bottom: 0;
aspect-ratio: 1424 / 334;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,") no-repeat center / 100% 100%;
mask: url("data:image/svg+xml,") no-repeat center / 100% 100%;
}
/* white on the red band — homepage */
.site-footer--on-red {
color: var(--white);
background: var(--red);
padding-bottom: 0;
}
.site-footer--on-red .footer-contact { left: 55px; top: 139px; }
.site-footer--on-red .footer-contact .socials { gap: 23px; }
.site-footer--on-red .footer-legal { left: 657px; top: 148px; }
.site-footer--on-red .footer-nav { left: 1066px; top: 166px; }
/* bordered light plate — every other page */
.site-footer--light {
color: var(--red);
}
.site-footer--light .footer-contact,
.site-footer--light .footer-legal {
font-family: "Overpass Mono", ui-monospace, SFMono-Regular, monospace;
}
.site-footer--light .footer-legal .copyright {
font-family: "Source Sans 3", var(--font-body);
}
.site-footer--light .footer-contact { left: 91px; top: 134px; }
.site-footer--light .footer-contact .socials { gap: 13px; }
.site-footer--light .footer-legal { left: 649px; top: 113px; }
.site-footer--light .footer-nav { left: 1075px; top: 147px; }
/* --------------------------------------------------------------- animations */
@media (prefers-reduced-motion: no-preference) {
.reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible {
opacity: 1;
transform: none;
}
}
/* -------------------------------------------------------------- mobile menu */
/* Two rules and a 215px slide-in panel, as drawn in the file's "pop up menu". */
.nav-toggle {
display: none;
width: 30px;
height: 8px;
padding: 0;
flex-direction: column;
justify-content: space-between;
flex: none;
color: currentColor;
}
.nav-toggle span {
display: block;
height: 1px;
background: currentColor;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.mobile-menu {
position: fixed;
top: 0;
right: 0;
bottom: 0;
z-index: 70;
width: 215px;
max-width: 78%;
padding-top: 23px;
display: flex;
flex-direction: column;
background: var(--bg);
color: var(--red);
transform: translateX(100%);
transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.mobile-menu.is-open {
transform: none;
}
.mobile-menu__close {
align-self: flex-end;
margin-right: 25px;
font-family: var(--font-body);
font-size: 16.2px;
line-height: 18px;
text-decoration: underline;
text-underline-offset: 3px;
}
.mobile-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 40px;
margin-top: 215px;
text-align: center;
}
.mobile-menu a {
display: block;
font-family: var(--font-body);
font-size: 15px;
line-height: 14px;
}
.mobile-menu a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
/* ---------------------------------------------------------------- dropdown */
/* A listbox styled in the brand — the native select is drawn by the OS and
cannot be themed, so the menu is rebuilt here. */
.dropdown {
position: relative;
}
.dropdown__button {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 20px;
width: 100%;
text-align: left;
color: var(--red);
}
.dropdown__button svg {
flex: none;
transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.dropdown.is-open .dropdown__button svg {
transform: rotate(180deg);
}
.dropdown__menu {
position: absolute;
z-index: 30;
top: calc(100% + 9px);
left: 0;
min-width: 100%;
margin: 0;
padding: 6px;
list-style: none;
background: var(--card);
border: 1px solid var(--red);
border-radius: 14px;
box-shadow: 0 14px 34px rgb(70 8 20 / 0.13);
opacity: 0;
transform: translateY(-6px);
pointer-events: none;
transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.dropdown--end .dropdown__menu {
left: auto;
right: 0;
}
.dropdown.is-open .dropdown__menu {
opacity: 1;
transform: none;
pointer-events: auto;
}
.dropdown__option {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 16px 9px 12px;
border-radius: 9px;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.18s ease, color 0.18s ease;
}
.dropdown__option::before {
content: "";
flex: none;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0;
transition: opacity 0.18s ease;
}
.dropdown__option[aria-selected="true"]::before {
opacity: 1;
}
.dropdown__option:hover,
.dropdown__option.is-active {
background: var(--red);
color: var(--card);
}
.dropdown__button:focus-visible,
.dropdown__option:focus-visible {
outline: 2px solid var(--red);
outline-offset: 2px;
}
/* ------------------------------------------------------------- cart drawer */
.cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 420px;
max-width: 100%;
background: var(--card);
color: var(--red);
transform: translateX(100%);
transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
z-index: 60;
display: flex;
flex-direction: column;
padding: 30px;
}
.cart-drawer.is-open {
transform: none;
}
.cart-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.cart-drawer__head h2 {
font-family: var(--font-display);
font-weight: 300;
font-size: 40px;
line-height: 40px;
margin: 0;
}
.cart-drawer__close {
font-size: 30px;
line-height: 1;
}
.cart-lines {
list-style: none;
margin: 0;
padding: 0;
flex: 1;
overflow-y: auto;
}
.cart-lines li {
display: flex;
gap: 14px;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid rgb(139 0 19 / 0.15);
font-family: var(--font-sans);
font-size: 17px;
line-height: 21px;
}
.cart-lines img {
width: 60px;
height: 68px;
object-fit: cover;
border-radius: 8px;
flex: none;
}
.cart-lines .line-body {
flex: 1;
min-width: 0;
}
.cart-lines .line-name {
display: block;
}
.qty {
display: inline-flex;
align-items: center;
gap: 2px;
margin-top: 8px;
border: 1px solid rgb(139 0 19 / 0.35);
border-radius: 14px;
}
.qty button {
width: 26px;
height: 24px;
display: grid;
place-items: center;
font-family: var(--font-body);
font-size: 15px;
line-height: 1;
border-radius: 14px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.qty button:hover {
background: var(--red);
color: var(--card);
}
.qty span {
min-width: 18px;
text-align: center;
font-family: var(--font-body);
font-size: 15px;
}
.cart-lines .line-price {
font-family: var(--font-body);
font-weight: 300;
white-space: nowrap;
}
.line-remove {
flex: none;
width: 22px;
height: 22px;
display: grid;
place-items: center;
font-size: 18px;
line-height: 1;
border-radius: 50%;
opacity: 0.5;
transition: opacity 0.2s ease, background-color 0.2s ease;
}
.line-remove:hover {
opacity: 1;
background: rgb(139 0 19 / 0.1);
}
.cart-empty {
font-family: var(--font-body);
color: var(--muted);
}
.cart-drawer__foot {
border-top: 1px solid rgb(139 0 19 / 0.2);
padding-top: 20px;
margin-top: 10px;
}
.cart-total {
display: flex;
justify-content: space-between;
font-family: var(--font-sans);
font-weight: 500;
font-size: 22px;
margin-bottom: 16px;
}
.cart-note {
font-family: var(--font-body);
font-size: 13px;
line-height: 18px;
color: var(--muted);
margin: 14px 0 0;
text-align: center;
}
.scrim {
position: fixed;
inset: 0;
background: rgb(20 10 12 / 0.35);
opacity: 0;
pointer-events: none;
transition: opacity 0.4s ease;
z-index: 50;
}
.scrim.is-open {
opacity: 1;
pointer-events: auto;
}
/* ---------------------------------------------------------------- responsive
The layout is pixel-accurate at the 1512px Figma width; below that it
reflows rather than scaling, so the demo stays usable on smaller screens. */
@media (max-width: 1200px) {
:root {
--gutter: 32px;
}
.site-nav {
gap: 28px;
font-size: 18px;
}
.site-header > .container > .logo {
width: 220px;
}
.site-header--overlay .container {
width: min(1406px, 100% - var(--gutter) * 2);
}
.site-header--overlay .logo {
width: 280px;
}
}
@media (max-width: 900px) {
:root {
--gutter: 20px;
}
.announce {
font-size: 15px;
}
.site-nav {
display: none;
}
.nav-toggle {
display: flex;
}
.site-header {
height: 92px;
}
.site-header > .container > .logo,
.site-header--overlay .logo {
width: min(200px, 52vw);
margin-left: 0;
}
.site-header--overlay {
inset: 18px 0 auto 0;
}
.site-header--overlay .logo-block {
padding-top: 0;
gap: 8px;
}
.site-header--onlight {
padding-top: 18px;
}
.header-actions {
margin-left: auto;
margin-right: 0;
gap: 18px;
}
.icon-cart,
.icon-cart svg {
width: 26px;
height: 28px;
}
.icon-cart .cart-count {
inset: 10px 0 0 0;
font-size: 15px;
}
.icon-account svg {
width: 20px;
height: 28px;
}
.card__title {
max-width: none;
}
.site-footer {
padding-inline: 16px;
}
.site-footer__inner {
height: auto;
overflow: visible;
}
/* the coordinate placement only holds at the design width */
.site-footer__top {
display: flex;
flex-direction: column;
align-items: center;
gap: 26px;
padding: 36px 0 0;
}
.footer-contact,
.footer-legal,
.footer-nav {
position: static;
inset: auto;
}
.footer-contact {
column-gap: 20px;
justify-items: start;
}
.footer-legal {
width: auto;
}
.footer-nav {
justify-content: center;
flex-wrap: wrap;
}
.site-footer__wordmark {
position: static;
margin-top: 34px;
width: 100%;
}
.cart-drawer {
width: 100%;
padding: 22px;
}
}
@media (max-width: 560px) {
.pill {
font-size: 19px;
padding-inline: 22px;
}
.pill--add {
width: 150px;
}
.card__foot {
flex-direction: column;
gap: 12px;
}
.card__buy {
width: 100%;
justify-content: space-between;
}
}