p:empty {
display: none;
}
.color-white :where(h1,
h2,
h3,
p) {
color: #fff;
}
.heading-left-border :where(h1,
h2,
h3) {
position: relative;
font-family: var(--ff-pragmatica-bold);
font-weight: 700 !important;
text-transform: uppercase;
line-height: 1;
font-size: clamp(2rem, 1.8rem + 1vw, 3.8rem);
margin: 0 0 0 1ch;
max-width: max-content;
text-box-trim: trim-both;
&::before {
content: '';
position: absolute;
inset: 50% auto auto -1ch;
transform: translateY(-50%);
display: block;
width: .18em;
height: 75%;
background: #EB0A8C;
filter: none;
}
em {
font-family: var(--ff-scotch-display);
font-weight: normal;
text-transform: lowercase;
display: block;
font-size: 105%;
line-height: .8;
u {
font-size: 118%;
text-decoration: none;
line-height: .5;
}
}
@media (width >= 400px) {
font-size: clamp(2rem,
2rem + 1.8vw,
3.2rem);
}
@media (width >= 600px) {
font-size: clamp(2.4rem,
2rem + 1.6vw,
3.2rem);
}
@media (width >= 1200px) {
font-size: clamp(2.4rem,
2.4rem + 2vw,
3.2rem);
}
@media (width >= 1800px) {
font-size: clamp(2.4rem,
3.6rem + 2vw,
5rem);
}
~ :where(p,
.button,
div:has(.button)) {
margin-inline-start: 1.6rem;
}
}
.heading-left-border.target-recos :where(h1,
h2,
h3) {
margin-inline-start: .5em;
display: block;
}
main > .section :where(.button) {
font-family: var(--ff-scotch-display);
font-weight: 400;
text-transform: lowercase;
font-style: italic;
font-size: 2rem;
letter-spacing: .02em;
padding-inline: 1.25em;
min-width: 20rem;
@media (width >= 600px) {
min-width: 25rem;
font-size: 2.4rem;
}
}
main > .section .button.primary {
--button-primary-border-color: #e40088;
--button-primary-background: #e40088;
color: #fff;
}
main > .section .button.tertiary {
color: #e40088;
}
.hero-bnr .block-copy {
align-content: end;
padding: 5% 3%;
@media (width >= 600px) {
padding: 3%;
}
}
.perfect-fit {
@media (width >= 600px) {
display: flex;
gap: 3%;
align-items: center;
margin-block: 2rem;
}
.block-copy {
margin-block-start: 1.6em;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: start;
> div {
display: flex;
flex-direction: column;
gap: 2rem;
@media (width >= 900px) {
flex-direction: row;
}
}
.button {
margin-block:0;
}
}
}
.quick-links-bar {
background: var(--clr-brand-pink);
margin-block: 1rem;
ul {
margin: 0;
padding:0;
max-width: min(100rem, 100%);
margin-inline: auto;
li {
text-align: center;
line-height: 2;
padding: 0;
}
}
a {
font-weight: 700;
text-decoration: underline;
}
}
.bra-size {
.default-content-wrapper {
@media (width >= 900px) {
display: grid;
grid-template-columns: repeat(2,
1fr);
align-items: center;
justify-items: center;
p {
max-width: 65ch;
margin: 0;
}
}
}
}
.calculator {
.block-copy {
padding: 3rem 1.6rem 0;
background: #E1EAF6;
strong {
display: block;
margin-block: 0 .5em;
font-size: 150%;
span {
font-style: italic;
text-transform: lowercase;
font-family: var(--ff-scotch-display);
font-weight: 300;
margin-inline-start: .5ch;
}
}
}
}
THE BRA GUIDE
FIND YOUR PERFECT fitting bra
4 SIMPLE QUESTIONS. LESS THAN 2 MINUTES. NO EMAIL REQUIRED.
Our bra fit quiz will help you determine your bra size and find the best styles to suit your needs.
[{<div><a class=button primary href=/bra-fit-finder/quiz >bra fit quiz</a>
<a class=button primary href=/bras> shop all bras</a></div>}]
Measuring your bra size
Start by wearing your best-fitting bra. Skip padded & pushup bras for this— minimally lined is best. Stand in front of a mirror to measure yourself or ask for some help!
BRA FIT TIPS
