/*
AUTEUR — Landing Page System: Base Stylesheet
File: assets/auteur-lp-base.css
Upload to: Online Store > Themes > Edit code > Assets > Add new asset (blank file)
All au-lp sections reference this file. Upload this FIRST before adding any sections.
*/
/* ════════════════════════════════════
FONTS
════════════════════════════════════ */
@font-face {
font-family: 'PF Regal Text';
src: url('https://cdn.shopify.com/s/files/1/0467/9827/4719/files/font-pf-regal-text-regular.woff?v=1700435135') format('woff');
font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
font-family: 'GT America';
src: url('https://cdn.shopify.com/s/files/1/0467/9827/4719/files/font-gt-america-regular.ttf?v=1744130627') format('truetype');
font-weight: 400; font-style: normal; font-display: swap;
}
/* ════════════════════════════════════
DESIGN TOKENS
════════════════════════════════════ */
.au-lp {
--heading: 'PF Regal Text', Baskervville, serif;
--body: 'GT America', Arial, sans-serif;
--brand: #321E1E;
--bg: #F9F9F9;
--bg2: #FFFFFF;
--cream: #FAF4F0;
--tan: #F1E4D3;
--text: #000000;
--mid: #5A5652;
--dim: #9A9690;
--border: #E0E0E0;
--gold: #C4A882;
font-family: var(--body);
color: var(--text);
letter-spacing: 0.015em;
line-height: 1.7;
-webkit-font-smoothing: antialiased;
background: var(--bg);
}
/* ════════════════════════════════════
LAYOUT
════════════════════════════════════ */
.au-lp__wrap {
max-width: 780px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (min-width: 700px) { .au-lp__wrap { padding: 0 2.5rem; } }
@media (min-width: 1000px) { .au-lp__wrap { padding: 0 3rem; } }
.au-lp__wrap--wide {
max-width: 1100px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (min-width: 700px) { .au-lp__wrap--wide { padding: 0 2.5rem; } }
@media (min-width: 1000px) { .au-lp__wrap--wide { padding: 0 4rem; } }
/* ════════════════════════════════════
TYPOGRAPHY PRIMITIVES
════════════════════════════════════ */
.au-lp__eyebrow {
font-family: var(--body);
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--brand);
opacity: 0.6;
display: block;
margin-bottom: 0.75rem;
}
.au-lp__eyebrow--light {
color: rgba(255,255,255,0.55);
opacity: 1;
}
.au-lp__h1 {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
letter-spacing: -0.015em;
line-height: 1.05;
color: var(--text);
margin: 0 0 1.25rem;
}
.au-lp__h2 {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(1.75rem, 1.4rem + 1.6vw, 3rem);
letter-spacing: -0.01em;
line-height: 1.1;
color: var(--text);
margin: 0 0 1.25rem;
}
.au-lp__h3 {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.6rem);
letter-spacing: -0.005em;
line-height: 1.2;
color: var(--text);
margin: 0 0 0.75rem;
}
.au-lp__h1 em,
.au-lp__h2 em,
.au-lp__h3 em { font-style: italic; }
.au-lp__lead {
font-family: var(--body);
font-size: 16px;
color: var(--mid);
line-height: 1.75;
margin: 0 0 1.5rem;
max-width: 600px;
}
.au-lp__body {
font-family: var(--body);
font-size: 14px;
color: var(--mid);
line-height: 1.75;
margin: 0 0 1.25rem;
}
.au-lp__body strong { color: var(--text); font-weight: 700; }
/* ════════════════════════════════════
BUTTONS
════════════════════════════════════ */
.au-lp__btn {
display: inline-block;
font-family: var(--body);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 15px 40px;
text-decoration: none !important;
transition: background 0.25s, color 0.25s, border-color 0.25s;
cursor: pointer;
border: 1px solid transparent;
text-align: center;
}
.au-lp__btn--dark {
background: var(--brand);
color: #fff !important;
border-color: var(--brand);
}
.au-lp__btn--dark:hover {
background: transparent;
color: var(--brand) !important;
}
.au-lp__btn--light {
background: transparent;
color: #fff !important;
border-color: #fff;
}
.au-lp__btn--light:hover {
background: #fff;
color: var(--brand) !important;
}
.au-lp__btn--outline {
background: transparent;
color: var(--brand) !important;
border-color: var(--brand);
}
.au-lp__btn--outline:hover {
background: var(--brand);
color: #fff !important;
}
.au-lp__btn--full { display: block; width: 100%; }
/* ════════════════════════════════════
DIVIDER
════════════════════════════════════ */
.au-lp__divider {
border: none;
border-top: 1px solid var(--border);
margin: 0;
}
/* ════════════════════════════════════
SECTION SPACING
════════════════════════════════════ */
.au-lp__section {
padding: 4rem 0;
border-top: 1px solid var(--border);
}
.au-lp__section:first-child {
border-top: none;
}
.au-lp__section--flush {
padding: 0;
border-top: none;
}
.au-lp__section--cream {
background: var(--cream);
border-top: none;
}
.au-lp__section--dark {
background: var(--brand);
border-top: none;
}
.au-lp__section--tan {
background: var(--tan);
border-top: none;
}
/* ════════════════════════════════════
01 — HERO BANNER
════════════════════════════════════ */
.au-lp-hero {
position: relative;
background-color: #1a1713;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
display: flex;
align-items: flex-end;
}
.au-lp-hero__overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to top,
rgba(0,0,0,0.75) 0%,
rgba(0,0,0,0.35) 50%,
rgba(0,0,0,0.15) 100%
);
pointer-events: none;
}
.au-lp-hero__inner {
position: relative;
z-index: 2;
width: 100%;
padding: 4rem 1.5rem;
max-width: 780px;
margin: 0 auto;
}
@media (min-width: 700px) { .au-lp-hero__inner { padding: 5rem 2.5rem; } }
@media (min-width: 1000px) { .au-lp-hero__inner { padding: 6rem 3rem; } }
.au-lp-hero__brand {
font-family: var(--body);
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
display: block;
margin-bottom: 1.5rem;
}
.au-lp-hero__title {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4.25rem);
letter-spacing: -0.015em;
line-height: 1.05;
color: #fff;
margin: 0 0 1rem;
}
.au-lp-hero__title em { font-style: italic; }
.au-lp-hero__subtitle {
font-family: var(--body);
font-size: 16px;
color: rgba(255,255,255,0.75);
line-height: 1.65;
margin: 0 0 0.5rem;
max-width: 540px;
}
.au-lp-hero__italic {
font-family: var(--heading);
font-style: italic;
font-size: 14px;
color: rgba(255,255,255,0.45);
display: block;
margin: 1rem 0 0.4rem;
}
.au-lp-hero__detail {
font-family: var(--body);
font-size: 13px;
color: rgba(255,255,255,0.65);
line-height: 1.8;
margin: 0 0 2.5rem;
max-width: 520px;
}
.au-lp-hero__detail strong { color: #fff; font-weight: 700; }
/* ════════════════════════════════════
02 — PROBLEM AGITATION
════════════════════════════════════ */
.au-lp-problem__grid {
display: grid;
grid-template-columns: 1fr;
gap: 0;
}
@media (min-width: 700px) {
.au-lp-problem__grid { grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; }
}
.au-lp-problem__intro { margin-bottom: 2rem; }
.au-lp-problem__list {
list-style: none;
padding: 0;
margin: 0;
}
.au-lp-problem__list li {
font-family: var(--body);
font-size: 14px;
color: var(--mid);
line-height: 1.7;
padding: 1rem 0;
border-bottom: 1px solid var(--border);
display: grid;
grid-template-columns: 1.5rem 1fr;
gap: 0.75rem;
align-items: start;
}
.au-lp-problem__list li:last-child { border-bottom: none; }
.au-lp-problem__list li strong {
font-family: var(--heading);
font-weight: 400;
font-size: 15px;
color: var(--text);
display: block;
margin-bottom: 2px;
line-height: 1.2;
}
.au-lp-problem__num {
font-family: var(--heading);
font-size: 20px;
color: var(--brand);
opacity: 0.25;
line-height: 1.3;
}
/* ════════════════════════════════════
03 — CALLOUT / TRUTH BOX
════════════════════════════════════ */
.au-lp-callout {
background: var(--cream);
padding: 2rem 2.25rem;
}
.au-lp-callout__label {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--brand);
opacity: 0.6;
display: block;
margin-bottom: 0.75rem;
}
.au-lp-callout__text {
font-family: var(--body);
font-size: 15px;
color: var(--mid);
line-height: 1.75;
margin: 0;
}
.au-lp-callout__text strong { color: var(--text); font-weight: 700; }
.au-lp-callout__quote {
font-family: var(--heading);
font-style: italic;
font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem);
color: var(--text);
line-height: 1.5;
margin: 0 0 0.75rem;
}
/* ════════════════════════════════════
04 — PROTOCOL / STEPS
════════════════════════════════════ */
.au-lp-steps__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
}
@media (min-width: 600px) {
.au-lp-steps__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
.au-lp-steps__grid[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
}
.au-lp-steps__card {
background: var(--bg2);
}
.au-lp-steps__card-img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
background: #d5cfc9;
}
.au-lp-steps__card-body {
padding: 1.5rem;
}
.au-lp-steps__card-step {
font-family: var(--heading);
font-style: italic;
font-size: 13px;
color: var(--dim);
display: block;
margin-bottom: 0.25rem;
}
.au-lp-steps__card-title {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(1.15rem, 1rem + 0.7vw, 1.5rem);
letter-spacing: -0.005em;
line-height: 1.15;
color: var(--text);
margin: 0 0 0.9rem;
}
.au-lp-steps__card-list-label {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--dim);
display: block;
margin-bottom: 0.5rem;
}
.au-lp-steps__card-list {
list-style: none;
padding: 0;
margin: 0 0 1rem;
}
.au-lp-steps__card-list li {
font-family: var(--body);
font-size: 13px;
color: var(--mid);
line-height: 1.65;
padding: 0.2rem 0;
display: flex;
align-items: flex-start;
gap: 0.65rem;
}
.au-lp-steps__card-list li::before {
content: '';
display: inline-block;
width: 12px;
height: 12px;
min-width: 12px;
border: 1px solid var(--dim);
border-radius: 50%;
margin-top: 4px;
}
.au-lp-steps__card-note {
font-family: var(--body);
font-size: 12px;
color: var(--dim);
font-style: italic;
line-height: 1.6;
margin: 0 0 1.25rem;
}
.au-lp-steps__card-link {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--brand);
text-decoration: underline;
text-underline-offset: 3px;
transition: opacity 0.2s;
}
.au-lp-steps__card-link:hover { opacity: 0.7; }
/* ════════════════════════════════════
05 — INGREDIENT / SCIENCE CARDS
════════════════════════════════════ */
.au-lp-science__intro {
max-width: 600px;
margin-bottom: 2.5rem;
}
.au-lp-science__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
gap: 2px;
margin-bottom: 2rem;
}
.au-lp-science__card {
background: var(--bg2);
padding: 1.5rem;
border: 1px solid transparent;
transition: background 0.25s, border-color 0.25s;
}
.au-lp-science__card:hover {
background: var(--cream);
border-color: var(--border);
}
.au-lp-science__card-name {
font-family: var(--heading);
font-weight: 400;
font-size: 15px;
letter-spacing: -0.005em;
color: var(--text);
display: block;
margin-bottom: 6px;
line-height: 1.2;
}
.au-lp-science__card-desc {
font-family: var(--body);
font-size: 13px;
color: var(--mid);
line-height: 1.6;
margin: 0;
}
.au-lp-science__stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
gap: 2px;
margin-bottom: 2rem;
}
.au-lp-science__stat {
background: var(--bg2);
padding: 1.5rem;
text-align: center;
}
.au-lp-science__stat-number {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
letter-spacing: -0.02em;
color: var(--brand);
display: block;
line-height: 1;
margin-bottom: 0.5rem;
}
.au-lp-science__stat-label {
font-family: var(--body);
font-size: 12px;
color: var(--mid);
line-height: 1.5;
}
/* ════════════════════════════════════
06 — SOCIAL PROOF / REVIEWS
════════════════════════════════════ */
.au-lp-reviews__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
margin-bottom: 2rem;
}
@media (min-width: 600px) {
.au-lp-reviews__grid { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 900px) {
.au-lp-reviews__grid[data-cols="3"] { grid-template-columns: 1fr 1fr 1fr; }
}
.au-lp-reviews__card {
background: var(--bg2);
padding: 1.75rem;
}
.au-lp-reviews__stars {
display: flex;
gap: 3px;
margin-bottom: 0.75rem;
}
.au-lp-reviews__star {
width: 14px;
height: 14px;
background: var(--brand);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.au-lp-reviews__quote {
font-family: var(--heading);
font-style: italic;
font-weight: 400;
font-size: clamp(1rem, 0.95rem + 0.2vw, 1.15rem);
color: var(--text);
line-height: 1.55;
margin: 0 0 1rem;
}
.au-lp-reviews__author {
font-family: var(--body);
font-size: 11px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--dim);
}
.au-lp-reviews__verified {
font-family: var(--body);
font-size: 11px;
color: var(--dim);
margin-top: 2px;
font-style: italic;
}
.au-lp-reviews__aggregate {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.au-lp-reviews__aggregate-score {
font-family: var(--heading);
font-size: 3rem;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--text);
line-height: 1;
}
.au-lp-reviews__aggregate-meta {
font-family: var(--body);
font-size: 12px;
color: var(--dim);
line-height: 1.5;
}
/* ════════════════════════════════════
07 — PRODUCT ANSWER / FEATURE CARD
════════════════════════════════════ */
.au-lp-product {
display: grid;
grid-template-columns: 1fr;
gap: 2rem;
background: var(--bg2);
border: 1px solid var(--border);
padding: 2rem;
align-items: center;
}
@media (min-width: 650px) {
.au-lp-product { grid-template-columns: 1fr 1fr; }
}
.au-lp-product--reverse { }
@media (min-width: 650px) {
.au-lp-product--reverse .au-lp-product__img { order: 2; }
.au-lp-product--reverse .au-lp-product__body { order: 1; }
}
.au-lp-product__img img {
width: 100%;
max-width: 360px;
height: auto;
display: block;
margin: 0 auto;
}
.au-lp-product__eyebrow {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--brand);
opacity: 0.55;
display: block;
margin-bottom: 0.5rem;
}
.au-lp-product__title {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(1.375rem, 1.2rem + 0.75vw, 2rem);
letter-spacing: -0.005em;
line-height: 1.15;
color: var(--text);
margin: 0 0 0.75rem;
}
.au-lp-product__desc {
font-family: var(--body);
font-size: 14px;
color: var(--mid);
line-height: 1.7;
margin: 0 0 1.5rem;
}
.au-lp-product__price {
font-family: var(--body);
font-size: 13px;
color: var(--mid);
margin-bottom: 1.25rem;
}
.au-lp-product__price strong {
font-family: var(--heading);
font-size: 1.25rem;
color: var(--text);
}
/* ════════════════════════════════════
08 — URGENCY / OFFER BANNER
════════════════════════════════════ */
.au-lp-urgency {
background: var(--brand);
padding: 2rem 1.5rem;
text-align: center;
}
.au-lp-urgency__label {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
color: rgba(255,255,255,0.55);
display: block;
margin-bottom: 0.5rem;
}
.au-lp-urgency__headline {
font-family: var(--heading);
font-weight: 400;
font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem);
letter-spacing: -0.01em;
line-height: 1.1;
color: #fff;
margin: 0 0 0.75rem;
}
.au-lp-urgency__headline em { font-style: italic; }
.au-lp-urgency__sub {
font-family: var(--body);
font-size: 14px;
color: rgba(255,255,255,0.7);
margin: 0 0 1.75rem;
line-height: 1.6;
}
.au-lp-urgency__code {
display: inline-block;
font-family: var(--body);
font-size: 13px;
font-weight: 700;
letter-spacing: 3px;
text-transform: uppercase;
color: var(--brand);
background: #fff;
padding: 0.4rem 1.25rem;
margin-bottom: 1.75rem;
}
/* ════════════════════════════════════
09 — BEFORE / AFTER RESULTS
════════════════════════════════════ */
.au-lp-results__grid {
display: grid;
grid-template-columns: 1fr;
gap: 2px;
}
@media (min-width: 600px) {
.au-lp-results__grid { grid-template-columns: 1fr 1fr; }
}
.au-lp-results__panel {
background: var(--bg2);
overflow: hidden;
}
.au-lp-results__panel-img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
background: #d0cac4;
}
.au-lp-results__panel-body {
padding: 1.25rem 1.5rem;
}
.au-lp-results__panel-label {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--dim);
display: block;
margin-bottom: 0.4rem;
}
.au-lp-results__panel-text {
font-family: var(--body);
font-size: 13px;
color: var(--mid);
line-height: 1.65;
margin: 0;
}
/* ════════════════════════════════════
10 — GOLDEN RULES
════════════════════════════════════ */
.au-lp-rules__label {
font-family: var(--body);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--dim);
display: block;
margin-bottom: 1.25rem;
}
.au-lp-rules__list { margin: 0; padding: 0; }
.au-lp-rules__item {
padding: 1rem 0;
border-bottom: 1px solid var(--border);
}
.au-lp-rules__item:last-child { border-bottom: none; }
.au-lp-rules__item-title {
font-family: var(--heading);
font-weight: 400;
font-size: 15px;
letter-spacing: -0.005em;
line-height: 1.25;
color: var(--text);
display: block;
margin-bottom: 4px;
}
.au-lp-rules__item-body {
font-family: var(--body);
font-size: 13px;
color: var(--mid);
line-height: 1.65;
margin: 0;
}
/* ════════════════════════════════════
11 — FAQ
════════════════════════════════════ */
.au-lp-faq__item {
padding: 1.25rem 0;
border-bottom: 1px solid var(--border);
}
.au-lp-faq__item:last-child { border-bottom: none; }
.au-lp-faq__q {
font-family: var(--heading);
font-weight: 400;
font-size: 17px;
letter-spacing: -0.005em;
color: var(--text);
display: block;
margin-bottom: 0.5rem;
line-height: 1.3;
}
.au-lp-faq__a {
font-family: var(--body);
font-size: 14px;
color: var(--mid);
line-height: 1.7;
margin: 0;
}
/* ════════════════════════════════════
12 — BOTTOM CTA
════════════════════════════════════ */
.au-lp-cta {
padding: 4rem 0;
text-align: center;
}
.au-lp-cta--dark {
background: var(--brand);
padding: 4rem 1.5rem;
}
.au-lp-cta--dark .au-lp__h2 { color: #fff; }
.au-lp-cta--dark .au-lp__lead { color: rgba(255,255,255,0.7); max-width: 500px; margin-left: auto; margin-right: auto; }
.au-lp-cta__secondary {
display: block;
font-family: var(--body);
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--brand);
text-decoration: underline;
text-underline-offset: 3px;
margin-top: 1rem;
}
.au-lp-cta--dark .au-lp-cta__secondary { color: rgba(255,255,255,0.6); }
/* ════════════════════════════════════
UTILITY
════════════════════════════════════ */
.au-lp__text-center { text-align: center; }
.au-lp__text-center .au-lp__lead { margin-left: auto; margin-right: auto; }
.au-lp__mt-sm { margin-top: 1.5rem; }
.au-lp__mt-md { margin-top: 2.5rem; }
.au-lp__mb-sm { margin-bottom: 1.5rem; }
.au-lp__mb-md { margin-bottom: 2.5rem; }
.au-lp__hidden { display: none !important; }