334 lines
7.3 KiB
CSS
334 lines
7.3 KiB
CSS
/**
|
||
* Configure Tailwind v4 in this file using CSS variables and directives:
|
||
* https://tailwindcss.com/docs/v4-beta#css-first-configuration
|
||
*/
|
||
|
||
@import 'tailwindcss';
|
||
|
||
/**
|
||
* Shared page / section title typography (matches prior `PAGE_TITLE_TYPOGRAPHY_CLASS` tailwind
|
||
* tokens). Kept as real CSS so Tailwind’s scanner is not required to tokenize
|
||
* `text-[clamp(2.5rem,5.5vw,64.6px)]` from a string-only module — commas in `clamp` could
|
||
* prevent those utilities from being generated, which left headings at default h1/h2 size.
|
||
*/
|
||
@layer components {
|
||
.abiir-page-title-typography {
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-size: clamp(2.5rem, 5.5vw, 64.6px);
|
||
font-weight: 300;
|
||
line-height: 1.12;
|
||
letter-spacing: -0.969px;
|
||
font-style: normal;
|
||
}
|
||
|
||
.abiir-page-content-max {
|
||
max-width: 790px;
|
||
}
|
||
|
||
/** Ingredients stat badge — mobile overrides (Tailwind arbitrary sizes may not scan from TSX). */
|
||
.abiir-ingredients-badge {
|
||
width: min(100%, 168px);
|
||
max-width: calc(100% - 1rem);
|
||
overflow: visible;
|
||
}
|
||
|
||
.abiir-ingredients-badge-percent {
|
||
margin: 0;
|
||
font-family: 'Cormorant Garamond', serif;
|
||
font-weight: 300;
|
||
font-style: normal;
|
||
font-size: 255px;
|
||
line-height: 0.85;
|
||
}
|
||
|
||
.abiir-ingredients-badge-caption {
|
||
margin: 0;
|
||
margin-top: 0.25rem;
|
||
max-width: 73px;
|
||
font-family: Jost, sans-serif;
|
||
font-weight: 400;
|
||
font-style: normal;
|
||
text-transform: uppercase;
|
||
font-size: 11.05px;
|
||
line-height: 19.89px;
|
||
letter-spacing: 1.105px;
|
||
transform: scale(0.7);
|
||
transform-origin: top left;
|
||
}
|
||
|
||
/** About — The Beginning image column (mobile: intrinsic height; desktop: tall frame). */
|
||
.abiir-about-beginning-image-wrap {
|
||
width: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.abiir-about-beginning-image-wrap {
|
||
min-height: min(865px, 85vh);
|
||
}
|
||
|
||
.abiir-about-beginning-image {
|
||
height: 100%;
|
||
min-height: 865px;
|
||
width: 100%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.abiir-ingredients-badge {
|
||
width: 220px;
|
||
max-width: min(220px, calc(100% - 1rem));
|
||
}
|
||
|
||
.abiir-ingredients-badge-percent {
|
||
font-size: 63.75px;
|
||
line-height: 63.75px;
|
||
}
|
||
|
||
.abiir-ingredients-badge-caption {
|
||
max-width: 122px;
|
||
transform: none;
|
||
}
|
||
}
|
||
|
||
/** Footer main grid — desktop keeps Figma space above the legal bar. */
|
||
.abiir-footer-main {
|
||
padding-bottom: 2rem;
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.abiir-footer-main {
|
||
padding-bottom: 2.5rem;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.abiir-footer-main {
|
||
padding-bottom: 3.5rem;
|
||
}
|
||
}
|
||
|
||
/** Footer legal row — mobile: comfortable bottom inset; desktop: Figma min-height bar. */
|
||
.abiir-footer-legal {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 0.75rem;
|
||
box-sizing: border-box;
|
||
padding-top: 1.25rem;
|
||
padding-bottom: max(1.5rem, env(safe-area-inset-bottom, 0px));
|
||
}
|
||
|
||
@media (min-width: 640px) {
|
||
.abiir-footer-legal {
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
gap: 1rem;
|
||
padding-bottom: 1.5rem;
|
||
}
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.abiir-footer-legal {
|
||
min-height: 76.859px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding-top: 0;
|
||
padding-bottom: 0;
|
||
}
|
||
}
|
||
|
||
/** PDP — tighten Reviews block to accordions on mobile. */
|
||
.abiir-pdp-main-stack {
|
||
gap: 0;
|
||
}
|
||
|
||
.abiir-pdp-reviews {
|
||
margin-top: 20px;
|
||
margin-bottom: 2.5rem;
|
||
padding-top: 0;
|
||
border-top: none;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.abiir-pdp-main-stack {
|
||
gap: 45px;
|
||
}
|
||
|
||
.abiir-pdp-reviews {
|
||
margin-top: 1rem;
|
||
margin-bottom: 0;
|
||
padding-top: 2.5rem;
|
||
border-top: 1px solid rgba(26, 26, 24, 0.08);
|
||
}
|
||
}
|
||
|
||
/** PDP accordions — padding below open panel body (How to Use, Full Ingredients, Shipping). */
|
||
.abiir-pdp-accordion-panel {
|
||
padding-bottom: 15px;
|
||
}
|
||
|
||
.abiir-pdp-accordion-panel--description {
|
||
padding-bottom: 1.25rem;
|
||
}
|
||
|
||
/** PDP — quantity full width on mobile; cart + wishlist + share on one row. */
|
||
.abiir-pdp-purchase {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 12.75px;
|
||
width: 100%;
|
||
}
|
||
|
||
.abiir-pdp-purchase-qty {
|
||
display: flex;
|
||
width: 100%;
|
||
align-items: center;
|
||
height: 53.883px;
|
||
border: 1px solid rgba(26, 26, 24, 0.15);
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions {
|
||
display: grid;
|
||
grid-template-columns: 3fr 1fr 1fr;
|
||
width: 100%;
|
||
min-width: 0;
|
||
align-items: stretch;
|
||
column-gap: 12.75px;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions .abiir-pdp-add-to-cart-form {
|
||
display: flex;
|
||
min-width: 0;
|
||
width: 100%;
|
||
max-width: none;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions .abiir-pdp-add-to-cart-form form {
|
||
display: flex;
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
width: 100%;
|
||
margin: 0;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions .abiir-pdp-icon-btn {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 53.883px;
|
||
min-width: 0;
|
||
width: 100%;
|
||
cursor: pointer;
|
||
border: 1px solid rgba(26, 26, 24, 0.15);
|
||
background: transparent;
|
||
transition: opacity 0.2s;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions .abiir-pdp-icon-btn:hover {
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions .abiir-pdp-icon-btn--share {
|
||
color: #7a7068;
|
||
}
|
||
|
||
@media (min-width: 1024px) {
|
||
.abiir-pdp-purchase {
|
||
flex-direction: row;
|
||
flex-wrap: wrap;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.abiir-pdp-purchase-qty {
|
||
width: auto;
|
||
flex-shrink: 0;
|
||
min-width: 132px;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions {
|
||
display: contents;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions .abiir-pdp-add-to-cart-form {
|
||
flex: 1 1 auto;
|
||
width: auto;
|
||
max-width: none;
|
||
min-width: 200px;
|
||
}
|
||
|
||
.abiir-pdp-purchase-actions .abiir-pdp-icon-btn {
|
||
flex: 0 0 53px;
|
||
width: 53px;
|
||
min-width: 53px;
|
||
}
|
||
}
|
||
|
||
/** Shipping & Returns — spacing between question title, subtitles, and body. */
|
||
.abiir-shipping-qa-stack {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 14px;
|
||
}
|
||
|
||
.abiir-shipping-qa-stack > .abiir-shipping-qa-title {
|
||
margin: 0;
|
||
}
|
||
|
||
.abiir-shipping-qa-subtitles {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 10px;
|
||
margin: 0;
|
||
}
|
||
|
||
.abiir-shipping-qa-subtitles > p {
|
||
margin: 0;
|
||
}
|
||
|
||
.abiir-shipping-qa-body {
|
||
margin: 0;
|
||
}
|
||
|
||
/** Shipping & Returns — dark “Have a question…” banner. */
|
||
.abiir-shipping-support-banner-icon {
|
||
display: block;
|
||
width: 20px;
|
||
height: 20px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
.abiir-shipping-support-banner img {
|
||
display: block;
|
||
margin-left: auto;
|
||
margin-right: auto;
|
||
margin-bottom: 12px;
|
||
filter: brightness(0) invert(1);
|
||
}
|
||
|
||
}
|
||
|
||
@keyframes hero-marquee {
|
||
0% {
|
||
transform: translateX(0);
|
||
}
|
||
100% {
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
|
||
/** Unlayered — beats reset.css `a { color: #000 }` on /shipping dark banner. */
|
||
.abiir-shipping-support-banner a.abiir-shipping-support-banner-email,
|
||
.abiir-shipping-support-banner a[href^='mailto:'] {
|
||
color: #ffffff !important;
|
||
text-decoration: none !important;
|
||
}
|
||
|
||
.abiir-shipping-support-banner a.abiir-shipping-support-banner-email:hover,
|
||
.abiir-shipping-support-banner a[href^='mailto:']:hover {
|
||
opacity: 0.85;
|
||
}
|