diff --git a/content/adazo-balloons.csv b/content/adazo-balloons.csv new file mode 100644 index 0000000..f6deda1 --- /dev/null +++ b/content/adazo-balloons.csv @@ -0,0 +1,26 @@ +title,slug,size,html,css,editorial_type,topics +"A routine is a sequence, not a shelf","routine-is-a-sequence","responsive","
Design note

A routine is a sequence, not a shelf

A thoughtful routine is less about owning every step and more about knowing what comes first, what can wait, and what you will actually repeat.

✦
",".adazo-routine-is-a-sequence,.adazo-routine-is-a-sequence *{box-sizing:border-box}.adazo-routine-is-a-sequence{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #d3a45f66;border-left:5px solid #d3a45f;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#18362d,#31594b);color:#fff9f0;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-routine-is-a-sequence:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #d3a45f80;border-radius:50%;opacity:.5}.adazo-routine-is-a-sequence small{position:relative;color:#d3a45f;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-routine-is-a-sequence h3,.adazo-routine-is-a-sequence p{position:relative;margin:0}.adazo-routine-is-a-sequence h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-routine-is-a-sequence p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-routine-is-a-sequence>span{position:relative;color:#d3a45f;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-routine-is-a-sequence{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-routine-is-a-sequence>span{text-align:left;font-size:22px}}","design_note","beauty,self-care,routine" +"The barrier likes fewer surprises","barrier-likes-fewer-surprises","responsive","
Care note

The barrier likes fewer surprises

When a routine changes, changing one variable at a time makes it easier to notice what feels comfortable and what does not.

✦
",".adazo-barrier-likes-fewer-surprises,.adazo-barrier-likes-fewer-surprises *{box-sizing:border-box}.adazo-barrier-likes-fewer-surprises{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #f0a28e66;border-left:5px solid #f0a28e;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#442b2d,#754448);color:#fff8f3;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-barrier-likes-fewer-surprises:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #f0a28e80;border-radius:50%;opacity:.5}.adazo-barrier-likes-fewer-surprises small{position:relative;color:#f0a28e;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-barrier-likes-fewer-surprises h3,.adazo-barrier-likes-fewer-surprises p{position:relative;margin:0}.adazo-barrier-likes-fewer-surprises h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-barrier-likes-fewer-surprises p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-barrier-likes-fewer-surprises>span{position:relative;color:#f0a28e;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-barrier-likes-fewer-surprises{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-barrier-likes-fewer-surprises>span{text-align:left;font-size:22px}}","care_tip","skin,ingredients,self-care" +"Texture is a useful clue","texture-is-a-useful-clue","responsive","
Did you know?

Texture is a useful clue

A finish can tell you where a product belongs in your day: light layers suit daytime, while richer textures often feel better as a final evening step.

✦
",".adazo-texture-is-a-useful-clue,.adazo-texture-is-a-useful-clue *{box-sizing:border-box}.adazo-texture-is-a-useful-clue{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #a7c5e866;border-left:5px solid #a7c5e8;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#26354a,#3e5774);color:#f6f7ff;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-texture-is-a-useful-clue:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #a7c5e880;border-radius:50%;opacity:.5}.adazo-texture-is-a-useful-clue small{position:relative;color:#a7c5e8;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-texture-is-a-useful-clue h3,.adazo-texture-is-a-useful-clue p{position:relative;margin:0}.adazo-texture-is-a-useful-clue h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-texture-is-a-useful-clue p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-texture-is-a-useful-clue>span{position:relative;color:#a7c5e8;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-texture-is-a-useful-clue{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-texture-is-a-useful-clue>span{text-align:left;font-size:22px}}","did_you_know","skin,routine,beauty" +"SPF is a morning habit","spf-is-a-morning-habit","responsive","
Care note

SPF is a morning habit

Sun protection works best as a repeatable part of the morning routine, not a last-minute detail reserved for beach days.

✦
",".adazo-spf-is-a-morning-habit,.adazo-spf-is-a-morning-habit *{box-sizing:border-box}.adazo-spf-is-a-morning-habit{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #e8c57d66;border-left:5px solid #e8c57d;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#57452d,#7b6340);color:#fffaf1;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-spf-is-a-morning-habit:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #e8c57d80;border-radius:50%;opacity:.5}.adazo-spf-is-a-morning-habit small{position:relative;color:#e8c57d;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-spf-is-a-morning-habit h3,.adazo-spf-is-a-morning-habit p{position:relative;margin:0}.adazo-spf-is-a-morning-habit h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-spf-is-a-morning-habit p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-spf-is-a-morning-habit>span{position:relative;color:#e8c57d;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-spf-is-a-morning-habit{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-spf-is-a-morning-habit>span{text-align:left;font-size:22px}}","care_tip","skin,self-care,routine" +"A patch test is a small favor","patch-test-is-a-small-favor","responsive","
Care note

A patch test is a small favor

Trying a new formula on a small area first gives you useful information before it becomes part of your whole routine.

✦
",".adazo-patch-test-is-a-small-favor,.adazo-patch-test-is-a-small-favor *{box-sizing:border-box}.adazo-patch-test-is-a-small-favor{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #d3a45f66;border-left:5px solid #d3a45f;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#18362d,#31594b);color:#fff9f0;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-patch-test-is-a-small-favor:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #d3a45f80;border-radius:50%;opacity:.5}.adazo-patch-test-is-a-small-favor small{position:relative;color:#d3a45f;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-patch-test-is-a-small-favor h3,.adazo-patch-test-is-a-small-favor p{position:relative;margin:0}.adazo-patch-test-is-a-small-favor h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-patch-test-is-a-small-favor p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-patch-test-is-a-small-favor>span{position:relative;color:#d3a45f;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-patch-test-is-a-small-favor{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-patch-test-is-a-small-favor>span{text-align:left;font-size:22px}}","care_tip","skin,ingredients,self-care" +"The best shade is the one you reach for","best-shade-is-reachable","responsive","
Quick insight

The best shade is the one you reach for

A beautiful color earns its place when it works with the clothes, light, and mood you already live in.

✦
",".adazo-best-shade-is-reachable,.adazo-best-shade-is-reachable *{box-sizing:border-box}.adazo-best-shade-is-reachable{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #f0a28e66;border-left:5px solid #f0a28e;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#442b2d,#754448);color:#fff8f3;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-best-shade-is-reachable:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #f0a28e80;border-radius:50%;opacity:.5}.adazo-best-shade-is-reachable small{position:relative;color:#f0a28e;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-best-shade-is-reachable h3,.adazo-best-shade-is-reachable p{position:relative;margin:0}.adazo-best-shade-is-reachable h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-best-shade-is-reachable p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-best-shade-is-reachable>span{position:relative;color:#f0a28e;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-best-shade-is-reachable{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-best-shade-is-reachable>span{text-align:left;font-size:22px}}","fun_fact","beauty,makeup,routine" +"Warm and cool are starting points","warm-cool-is-a-starting-point","responsive","
Design note

Warm and cool are starting points

Undertone language is helpful, but your own lighting and contrast matter more than a label. Test near a window when possible.

✦
",".adazo-warm-cool-is-a-starting-point,.adazo-warm-cool-is-a-starting-point *{box-sizing:border-box}.adazo-warm-cool-is-a-starting-point{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #a7c5e866;border-left:5px solid #a7c5e8;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#26354a,#3e5774);color:#f6f7ff;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-warm-cool-is-a-starting-point:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #a7c5e880;border-radius:50%;opacity:.5}.adazo-warm-cool-is-a-starting-point small{position:relative;color:#a7c5e8;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-warm-cool-is-a-starting-point h3,.adazo-warm-cool-is-a-starting-point p{position:relative;margin:0}.adazo-warm-cool-is-a-starting-point h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-warm-cool-is-a-starting-point p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-warm-cool-is-a-starting-point>span{position:relative;color:#a7c5e8;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-warm-cool-is-a-starting-point{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-warm-cool-is-a-starting-point>span{text-align:left;font-size:22px}}","design_note","beauty,makeup" +"Fragrance has a dry-down","fragrance-has-a-dry-down","responsive","
Did you know?

Fragrance has a dry-down

A scent evolves after the first spray. Give it a little time on skin before deciding whether the later notes belong with you.

✦
",".adazo-fragrance-has-a-dry-down,.adazo-fragrance-has-a-dry-down *{box-sizing:border-box}.adazo-fragrance-has-a-dry-down{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #e8c57d66;border-left:5px solid #e8c57d;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#57452d,#7b6340);color:#fffaf1;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-fragrance-has-a-dry-down:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #e8c57d80;border-radius:50%;opacity:.5}.adazo-fragrance-has-a-dry-down small{position:relative;color:#e8c57d;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-fragrance-has-a-dry-down h3,.adazo-fragrance-has-a-dry-down p{position:relative;margin:0}.adazo-fragrance-has-a-dry-down h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-fragrance-has-a-dry-down p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-fragrance-has-a-dry-down>span{position:relative;color:#e8c57d;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-fragrance-has-a-dry-down{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-fragrance-has-a-dry-down>span{text-align:left;font-size:22px}}","did_you_know","fragrance,beauty" +"Hair likes the right amount of friction","hair-likes-right-friction","responsive","
Care note

Hair likes the right amount of friction

Gentle detangling, a soft towel, and fewer rushed passes can make a routine feel kinder without adding another product.

✦
",".adazo-hair-likes-right-friction,.adazo-hair-likes-right-friction *{box-sizing:border-box}.adazo-hair-likes-right-friction{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #d3a45f66;border-left:5px solid #d3a45f;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#18362d,#31594b);color:#fff9f0;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-hair-likes-right-friction:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #d3a45f80;border-radius:50%;opacity:.5}.adazo-hair-likes-right-friction small{position:relative;color:#d3a45f;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-hair-likes-right-friction h3,.adazo-hair-likes-right-friction p{position:relative;margin:0}.adazo-hair-likes-right-friction h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-hair-likes-right-friction p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-hair-likes-right-friction>span{position:relative;color:#d3a45f;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-hair-likes-right-friction{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-hair-likes-right-friction>span{text-align:left;font-size:22px}}","care_tip","hair,self-care,routine" +"Scalp care starts with consistency","scalp-care-starts-consistently","responsive","
Design note

Scalp care starts with consistency

A simple, repeatable wash rhythm is easier to evaluate than a cabinet full of occasional experiments.

✦
",".adazo-scalp-care-starts-consistently,.adazo-scalp-care-starts-consistently *{box-sizing:border-box}.adazo-scalp-care-starts-consistently{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #f0a28e66;border-left:5px solid #f0a28e;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#442b2d,#754448);color:#fff8f3;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-scalp-care-starts-consistently:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #f0a28e80;border-radius:50%;opacity:.5}.adazo-scalp-care-starts-consistently small{position:relative;color:#f0a28e;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-scalp-care-starts-consistently h3,.adazo-scalp-care-starts-consistently p{position:relative;margin:0}.adazo-scalp-care-starts-consistently h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-scalp-care-starts-consistently p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-scalp-care-starts-consistently>span{position:relative;color:#f0a28e;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-scalp-care-starts-consistently{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-scalp-care-starts-consistently>span{text-align:left;font-size:22px}}","design_note","hair,self-care,routine" +"A travel edit should earn its space","travel-edit-earns-space","responsive","
Quick insight

A travel edit should earn its space

The best travel kit covers the moments you know are coming, uses containers you can trust, and leaves room for one small pleasure.

✦
",".adazo-travel-edit-earns-space,.adazo-travel-edit-earns-space *{box-sizing:border-box}.adazo-travel-edit-earns-space{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #a7c5e866;border-left:5px solid #a7c5e8;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#26354a,#3e5774);color:#f6f7ff;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-travel-edit-earns-space:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #a7c5e880;border-radius:50%;opacity:.5}.adazo-travel-edit-earns-space small{position:relative;color:#a7c5e8;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-travel-edit-earns-space h3,.adazo-travel-edit-earns-space p{position:relative;margin:0}.adazo-travel-edit-earns-space h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-travel-edit-earns-space p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-travel-edit-earns-space>span{position:relative;color:#a7c5e8;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-travel-edit-earns-space{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-travel-edit-earns-space>span{text-align:left;font-size:22px}}","fun_fact","travel,self-care,beauty" +"A good gift leaves room for choice","good-gift-leaves-choice","responsive","
Care note

A good gift leaves room for choice

When you do not know someone’s exact shade or scent, a flexible ritual, tool, or discovery set can feel more personal than a risky guess.

✦
",".adazo-good-gift-leaves-choice,.adazo-good-gift-leaves-choice *{box-sizing:border-box}.adazo-good-gift-leaves-choice{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #e8c57d66;border-left:5px solid #e8c57d;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#57452d,#7b6340);color:#fffaf1;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-good-gift-leaves-choice:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #e8c57d80;border-radius:50%;opacity:.5}.adazo-good-gift-leaves-choice small{position:relative;color:#e8c57d;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-good-gift-leaves-choice h3,.adazo-good-gift-leaves-choice p{position:relative;margin:0}.adazo-good-gift-leaves-choice h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-good-gift-leaves-choice p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-good-gift-leaves-choice>span{position:relative;color:#e8c57d;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-good-gift-leaves-choice{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-good-gift-leaves-choice>span{text-align:left;font-size:22px}}","care_tip","gifting,beauty,self-care" +"Ingredients tell part of the story","ingredients-tell-part-story","responsive","
Design note

Ingredients tell part of the story

An ingredient list is useful context, but the full experience also includes texture, packaging, scent, and whether the routine fits real life.

✦
",".adazo-ingredients-tell-part-story,.adazo-ingredients-tell-part-story *{box-sizing:border-box}.adazo-ingredients-tell-part-story{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #d3a45f66;border-left:5px solid #d3a45f;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#18362d,#31594b);color:#fff9f0;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-ingredients-tell-part-story:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #d3a45f80;border-radius:50%;opacity:.5}.adazo-ingredients-tell-part-story small{position:relative;color:#d3a45f;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-ingredients-tell-part-story h3,.adazo-ingredients-tell-part-story p{position:relative;margin:0}.adazo-ingredients-tell-part-story h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-ingredients-tell-part-story p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-ingredients-tell-part-story>span{position:relative;color:#d3a45f;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-ingredients-tell-part-story{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-ingredients-tell-part-story>span{text-align:left;font-size:22px}}","design_note","ingredients,beauty,skin" +"More steps are not automatically better","more-steps-not-better","responsive","
Worth knowing

More steps are not automatically better

A routine earns complexity when each step has a clear job. If a step is hard to explain, it may be the first one to simplify.

✦
",".adazo-more-steps-not-better,.adazo-more-steps-not-better *{box-sizing:border-box}.adazo-more-steps-not-better{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #f0a28e66;border-left:5px solid #f0a28e;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#442b2d,#754448);color:#fff8f3;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-more-steps-not-better:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #f0a28e80;border-radius:50%;opacity:.5}.adazo-more-steps-not-better small{position:relative;color:#f0a28e;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-more-steps-not-better h3,.adazo-more-steps-not-better p{position:relative;margin:0}.adazo-more-steps-not-better h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-more-steps-not-better p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-more-steps-not-better>span{position:relative;color:#f0a28e;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-more-steps-not-better{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-more-steps-not-better>span{text-align:left;font-size:22px}}","material_myth","self-care,routine,beauty" +"The mirror is not a lab","mirror-is-not-a-lab","responsive","
Quick insight

The mirror is not a lab

Light, camera settings, and distance change what you see. Use consistent conditions when comparing a look, then trust how it feels in motion.

✦
",".adazo-mirror-is-not-a-lab,.adazo-mirror-is-not-a-lab *{box-sizing:border-box}.adazo-mirror-is-not-a-lab{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #a7c5e866;border-left:5px solid #a7c5e8;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#26354a,#3e5774);color:#f6f7ff;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-mirror-is-not-a-lab:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #a7c5e880;border-radius:50%;opacity:.5}.adazo-mirror-is-not-a-lab small{position:relative;color:#a7c5e8;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-mirror-is-not-a-lab h3,.adazo-mirror-is-not-a-lab p{position:relative;margin:0}.adazo-mirror-is-not-a-lab h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-mirror-is-not-a-lab p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-mirror-is-not-a-lab>span{position:relative;color:#a7c5e8;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-mirror-is-not-a-lab{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-mirror-is-not-a-lab>span{text-align:left;font-size:22px}}","fun_fact","beauty,makeup,self-care" +"A refill is a design decision","refill-is-a-design-decision","responsive","
Field note

A refill is a design decision

Packaging that is easy to open, clean, and reuse can turn a good product into a better long-term ritual.

✦
",".adazo-refill-is-a-design-decision,.adazo-refill-is-a-design-decision *{box-sizing:border-box}.adazo-refill-is-a-design-decision{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #e8c57d66;border-left:5px solid #e8c57d;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#57452d,#7b6340);color:#fffaf1;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-refill-is-a-design-decision:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #e8c57d80;border-radius:50%;opacity:.5}.adazo-refill-is-a-design-decision small{position:relative;color:#e8c57d;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-refill-is-a-design-decision h3,.adazo-refill-is-a-design-decision p{position:relative;margin:0}.adazo-refill-is-a-design-decision h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-refill-is-a-design-decision p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-refill-is-a-design-decision>span{position:relative;color:#e8c57d;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-refill-is-a-design-decision{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-refill-is-a-design-decision>span{text-align:left;font-size:22px}}","nature_note","beauty,self-care,ingredients" +"Clean tools make better rituals","clean-tools-better-rituals","responsive","
Care note

Clean tools make better rituals

Brushes, combs, and reusable applicators work best when cleaning them is simple enough to become part of the calendar.

✦
",".adazo-clean-tools-better-rituals,.adazo-clean-tools-better-rituals *{box-sizing:border-box}.adazo-clean-tools-better-rituals{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #d3a45f66;border-left:5px solid #d3a45f;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#18362d,#31594b);color:#fff9f0;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-clean-tools-better-rituals:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #d3a45f80;border-radius:50%;opacity:.5}.adazo-clean-tools-better-rituals small{position:relative;color:#d3a45f;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-clean-tools-better-rituals h3,.adazo-clean-tools-better-rituals p{position:relative;margin:0}.adazo-clean-tools-better-rituals h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-clean-tools-better-rituals p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-clean-tools-better-rituals>span{position:relative;color:#d3a45f;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-clean-tools-better-rituals{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-clean-tools-better-rituals>span{text-align:left;font-size:22px}}","care_tip","beauty,hair,self-care" +"The evening reset can be short","evening-reset-can-be-short","responsive","
Human touch

The evening reset can be short

A small closing ritual can signal that the day is done: cleanse, moisturize, put tools away, and leave tomorrow a clear starting point.

✦
",".adazo-evening-reset-can-be-short,.adazo-evening-reset-can-be-short *{box-sizing:border-box}.adazo-evening-reset-can-be-short{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #f0a28e66;border-left:5px solid #f0a28e;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#442b2d,#754448);color:#fff8f3;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-evening-reset-can-be-short:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #f0a28e80;border-radius:50%;opacity:.5}.adazo-evening-reset-can-be-short small{position:relative;color:#f0a28e;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-evening-reset-can-be-short h3,.adazo-evening-reset-can-be-short p{position:relative;margin:0}.adazo-evening-reset-can-be-short h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-evening-reset-can-be-short p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-evening-reset-can-be-short>span{position:relative;color:#f0a28e;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-evening-reset-can-be-short{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-evening-reset-can-be-short>span{text-align:left;font-size:22px}}","culture_craft","skin,self-care,routine" +"The best beauty light is honest","best-beauty-light-is-honest","responsive","
Did you know?

The best beauty light is honest

Natural, even light makes color and texture easier to judge than a dramatic overhead spotlight.

✦
",".adazo-best-beauty-light-is-honest,.adazo-best-beauty-light-is-honest *{box-sizing:border-box}.adazo-best-beauty-light-is-honest{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #a7c5e866;border-left:5px solid #a7c5e8;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#26354a,#3e5774);color:#f6f7ff;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-best-beauty-light-is-honest:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #a7c5e880;border-radius:50%;opacity:.5}.adazo-best-beauty-light-is-honest small{position:relative;color:#a7c5e8;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-best-beauty-light-is-honest h3,.adazo-best-beauty-light-is-honest p{position:relative;margin:0}.adazo-best-beauty-light-is-honest h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-best-beauty-light-is-honest p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-best-beauty-light-is-honest>span{position:relative;color:#a7c5e8;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-best-beauty-light-is-honest{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-best-beauty-light-is-honest>span{text-align:left;font-size:22px}}","did_you_know","beauty,makeup,travel" +"A signature scent is a memory cue","signature-scent-memory-cue","responsive","
Human touch

A signature scent is a memory cue

Scent is closely tied to place and memory, which is why a familiar fragrance can make a routine feel like a small return.

✦
",".adazo-signature-scent-memory-cue,.adazo-signature-scent-memory-cue *{box-sizing:border-box}.adazo-signature-scent-memory-cue{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #e8c57d66;border-left:5px solid #e8c57d;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#57452d,#7b6340);color:#fffaf1;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-signature-scent-memory-cue:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #e8c57d80;border-radius:50%;opacity:.5}.adazo-signature-scent-memory-cue small{position:relative;color:#e8c57d;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-signature-scent-memory-cue h3,.adazo-signature-scent-memory-cue p{position:relative;margin:0}.adazo-signature-scent-memory-cue h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-signature-scent-memory-cue p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-signature-scent-memory-cue>span{position:relative;color:#e8c57d;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-signature-scent-memory-cue{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-signature-scent-memory-cue>span{text-align:left;font-size:22px}}","culture_craft","fragrance,culture,self-care" +"Pack the product you will use","pack-what-you-use","responsive","
Design note

Pack the product you will use

A compact kit wins when every item has a job and the order is obvious. The goal is fewer decisions, not a smaller version of the whole bathroom.

✦
",".adazo-pack-what-you-use,.adazo-pack-what-you-use *{box-sizing:border-box}.adazo-pack-what-you-use{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #d3a45f66;border-left:5px solid #d3a45f;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#18362d,#31594b);color:#fff9f0;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-pack-what-you-use:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #d3a45f80;border-radius:50%;opacity:.5}.adazo-pack-what-you-use small{position:relative;color:#d3a45f;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-pack-what-you-use h3,.adazo-pack-what-you-use p{position:relative;margin:0}.adazo-pack-what-you-use h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-pack-what-you-use p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-pack-what-you-use>span{position:relative;color:#d3a45f;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-pack-what-you-use{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-pack-what-you-use>span{text-align:left;font-size:22px}}","design_note","travel,routine,self-care" +"Beauty is allowed to be playful","beauty-can-be-playful","responsive","
Quick insight

Beauty is allowed to be playful

A routine can be practical and still leave room for color, shine, scent, or a new texture that simply makes the day more fun.

✦
",".adazo-beauty-can-be-playful,.adazo-beauty-can-be-playful *{box-sizing:border-box}.adazo-beauty-can-be-playful{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #f0a28e66;border-left:5px solid #f0a28e;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#442b2d,#754448);color:#fff8f3;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-beauty-can-be-playful:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #f0a28e80;border-radius:50%;opacity:.5}.adazo-beauty-can-be-playful small{position:relative;color:#f0a28e;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-beauty-can-be-playful h3,.adazo-beauty-can-be-playful p{position:relative;margin:0}.adazo-beauty-can-be-playful h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-beauty-can-be-playful p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-beauty-can-be-playful>span{position:relative;color:#f0a28e;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-beauty-can-be-playful{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-beauty-can-be-playful>span{text-align:left;font-size:22px}}","fun_fact","beauty,makeup,culture" +"A guide should answer the next question","guide-answers-next-question","responsive","
Did you know?

A guide should answer the next question

The most useful product guidance anticipates the follow-up: how much, when to use it, what to pair it with, and when to keep it simple.

✦
",".adazo-guide-answers-next-question,.adazo-guide-answers-next-question *{box-sizing:border-box}.adazo-guide-answers-next-question{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1.5fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #a7c5e866;border-left:5px solid #a7c5e8;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#26354a,#3e5774);color:#f6f7ff;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-guide-answers-next-question:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #a7c5e880;border-radius:50%;opacity:.5}.adazo-guide-answers-next-question small{position:relative;color:#a7c5e8;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-guide-answers-next-question h3,.adazo-guide-answers-next-question p{position:relative;margin:0}.adazo-guide-answers-next-question h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-guide-answers-next-question p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-guide-answers-next-question>span{position:relative;color:#a7c5e8;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-guide-answers-next-question{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-guide-answers-next-question>span{text-align:left;font-size:22px}}","did_you_know","beauty,ingredients,routine" +"Good packaging removes friction","good-packaging-removes-friction","responsive","
Design note

Good packaging removes friction

A pump that does not clog, a cap that closes securely, and a label that stays readable all make consistency easier.

✦
",".adazo-good-packaging-removes-friction,.adazo-good-packaging-removes-friction *{box-sizing:border-box}.adazo-good-packaging-removes-friction{display:grid;grid-template-columns:minmax(150px,.8fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #e8c57d66;border-left:5px solid #e8c57d;border-radius:18px 6px 18px 6px;background:linear-gradient(112deg,#57452d,#7b6340);color:#fffaf1;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-good-packaging-removes-friction:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #e8c57d80;border-radius:50%;opacity:.5}.adazo-good-packaging-removes-friction small{position:relative;color:#e8c57d;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-good-packaging-removes-friction h3,.adazo-good-packaging-removes-friction p{position:relative;margin:0}.adazo-good-packaging-removes-friction h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-good-packaging-removes-friction p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-good-packaging-removes-friction>span{position:relative;color:#e8c57d;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-good-packaging-removes-friction{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-good-packaging-removes-friction>span{text-align:left;font-size:22px}}","design_note","beauty,self-care,travel" +"Your routine has a season","routine-has-a-season","responsive","
Field note

Your routine has a season

Weather, travel, and schedule change what feels comfortable. Let the routine flex instead of treating one version as permanent.

✦
",".adazo-routine-has-a-season,.adazo-routine-has-a-season *{box-sizing:border-box}.adazo-routine-has-a-season{display:grid;grid-template-columns:minmax(130px,.65fr) minmax(220px,2fr) auto;align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid #d3a45f66;border-left:5px solid #d3a45f;border-radius:6px 18px 6px 18px;background:linear-gradient(112deg,#18362d,#31594b);color:#fff9f0;font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}.adazo-routine-has-a-season:after{content:"""";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid #d3a45f80;border-radius:50%;opacity:.5}.adazo-routine-has-a-season small{position:relative;color:#d3a45f;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}.adazo-routine-has-a-season h3,.adazo-routine-has-a-season p{position:relative;margin:0}.adazo-routine-has-a-season h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}.adazo-routine-has-a-season p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}.adazo-routine-has-a-season>span{position:relative;color:#d3a45f;font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){.adazo-routine-has-a-season{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}.adazo-routine-has-a-season>span{text-align:left;font-size:22px}}","nature_note","skin,hair,self-care" diff --git a/scripts/generate-conbal-balloons.mjs b/scripts/generate-conbal-balloons.mjs new file mode 100644 index 0000000..ba165c7 --- /dev/null +++ b/scripts/generate-conbal-balloons.mjs @@ -0,0 +1,74 @@ +import { mkdir, writeFile } from 'node:fs/promises' + +const entries = [ + ['A routine is a sequence, not a shelf', 'routine-is-a-sequence', 'A thoughtful routine is less about owning every step and more about knowing what comes first, what can wait, and what you will actually repeat.', 'beauty,self-care,routine', 'design_note'], + ['The barrier likes fewer surprises', 'barrier-likes-fewer-surprises', 'When a routine changes, changing one variable at a time makes it easier to notice what feels comfortable and what does not.', 'skin,ingredients,self-care', 'care_tip'], + ['Texture is a useful clue', 'texture-is-a-useful-clue', 'A finish can tell you where a product belongs in your day: light layers suit daytime, while richer textures often feel better as a final evening step.', 'skin,routine,beauty', 'did_you_know'], + ['SPF is a morning habit', 'spf-is-a-morning-habit', 'Sun protection works best as a repeatable part of the morning routine, not a last-minute detail reserved for beach days.', 'skin,self-care,routine', 'care_tip'], + ['A patch test is a small favor', 'patch-test-is-a-small-favor', 'Trying a new formula on a small area first gives you useful information before it becomes part of your whole routine.', 'skin,ingredients,self-care', 'care_tip'], + ['The best shade is the one you reach for', 'best-shade-is-reachable', 'A beautiful color earns its place when it works with the clothes, light, and mood you already live in.', 'beauty,makeup,routine', 'fun_fact'], + ['Warm and cool are starting points', 'warm-cool-is-a-starting-point', 'Undertone language is helpful, but your own lighting and contrast matter more than a label. Test near a window when possible.', 'beauty,makeup', 'design_note'], + ['Fragrance has a dry-down', 'fragrance-has-a-dry-down', 'A scent evolves after the first spray. Give it a little time on skin before deciding whether the later notes belong with you.', 'fragrance,beauty', 'did_you_know'], + ['Hair likes the right amount of friction', 'hair-likes-right-friction', 'Gentle detangling, a soft towel, and fewer rushed passes can make a routine feel kinder without adding another product.', 'hair,self-care,routine', 'care_tip'], + ['Scalp care starts with consistency', 'scalp-care-starts-consistently', 'A simple, repeatable wash rhythm is easier to evaluate than a cabinet full of occasional experiments.', 'hair,self-care,routine', 'design_note'], + ['A travel edit should earn its space', 'travel-edit-earns-space', 'The best travel kit covers the moments you know are coming, uses containers you can trust, and leaves room for one small pleasure.', 'travel,self-care,beauty', 'fun_fact'], + ['A good gift leaves room for choice', 'good-gift-leaves-choice', 'When you do not know someone’s exact shade or scent, a flexible ritual, tool, or discovery set can feel more personal than a risky guess.', 'gifting,beauty,self-care', 'care_tip'], + ['Ingredients tell part of the story', 'ingredients-tell-part-story', 'An ingredient list is useful context, but the full experience also includes texture, packaging, scent, and whether the routine fits real life.', 'ingredients,beauty,skin', 'design_note'], + ['More steps are not automatically better', 'more-steps-not-better', 'A routine earns complexity when each step has a clear job. If a step is hard to explain, it may be the first one to simplify.', 'self-care,routine,beauty', 'material_myth'], + ['The mirror is not a lab', 'mirror-is-not-a-lab', 'Light, camera settings, and distance change what you see. Use consistent conditions when comparing a look, then trust how it feels in motion.', 'beauty,makeup,self-care', 'fun_fact'], + ['A refill is a design decision', 'refill-is-a-design-decision', 'Packaging that is easy to open, clean, and reuse can turn a good product into a better long-term ritual.', 'beauty,self-care,ingredients', 'nature_note'], + ['Clean tools make better rituals', 'clean-tools-better-rituals', 'Brushes, combs, and reusable applicators work best when cleaning them is simple enough to become part of the calendar.', 'beauty,hair,self-care', 'care_tip'], + ['The evening reset can be short', 'evening-reset-can-be-short', 'A small closing ritual can signal that the day is done: cleanse, moisturize, put tools away, and leave tomorrow a clear starting point.', 'skin,self-care,routine', 'culture_craft'], + ['The best beauty light is honest', 'best-beauty-light-is-honest', 'Natural, even light makes color and texture easier to judge than a dramatic overhead spotlight.', 'beauty,makeup,travel', 'did_you_know'], + ['A signature scent is a memory cue', 'signature-scent-memory-cue', 'Scent is closely tied to place and memory, which is why a familiar fragrance can make a routine feel like a small return.', 'fragrance,culture,self-care', 'culture_craft'], + ['Pack the product you will use', 'pack-what-you-use', 'A compact kit wins when every item has a job and the order is obvious. The goal is fewer decisions, not a smaller version of the whole bathroom.', 'travel,routine,self-care', 'design_note'], + ['Beauty is allowed to be playful', 'beauty-can-be-playful', 'A routine can be practical and still leave room for color, shine, scent, or a new texture that simply makes the day more fun.', 'beauty,makeup,culture', 'fun_fact'], + ['A guide should answer the next question', 'guide-answers-next-question', 'The most useful product guidance anticipates the follow-up: how much, when to use it, what to pair it with, and when to keep it simple.', 'beauty,ingredients,routine', 'did_you_know'], + ['Good packaging removes friction', 'good-packaging-removes-friction', 'A pump that does not clog, a cap that closes securely, and a label that stays readable all make consistency easier.', 'beauty,self-care,travel', 'design_note'], + ['Your routine has a season', 'routine-has-a-season', 'Weather, travel, and schedule change what feels comfortable. Let the routine flex instead of treating one version as permanent.', 'skin,hair,self-care', 'nature_note'], +] + +const palettes = [ + ['#18362d', '#fff9f0', '#d3a45f', '#31594b'], + ['#442b2d', '#fff8f3', '#f0a28e', '#754448'], + ['#26354a', '#f6f7ff', '#a7c5e8', '#3e5774'], + ['#57452d', '#fffaf1', '#e8c57d', '#7b6340'], +] + +const labels = { + did_you_know: 'Did you know?', + fun_fact: 'Quick insight', + care_tip: 'Care note', + design_note: 'Design note', + material_myth: 'Worth knowing', + nature_note: 'Field note', + culture_craft: 'Human touch', +} + +function csv(value) { + return `"${String(value).replaceAll('"', '""')}"` +} + +function markup(slug, title, body, type) { + return `
${labels[type]}

${title}

${body}

` +} + +function style(slug, palette, index) { + const root = `.adazo-${slug}` + const [bg, fg, accent, soft] = palette + const columns = index % 3 === 0 ? 'minmax(130px,.65fr) minmax(220px,2fr) auto' : index % 3 === 1 ? 'minmax(180px,1fr) minmax(220px,1.5fr) auto' : 'minmax(150px,.8fr) minmax(220px,2fr) auto' + return `${root},${root} *{box-sizing:border-box}${root}{display:grid;grid-template-columns:${columns};align-items:center;gap:24px;width:100%;min-height:138px;padding:24px 30px;border:1px solid ${accent}66;border-left:5px solid ${accent};border-radius:${index % 2 ? '18px 6px 18px 6px' : '6px 18px 6px 18px'};background:linear-gradient(112deg,${bg},${soft});color:${fg};font-family:inherit;box-shadow:0 22px 55px -38px rgba(0,0,0,.62);position:relative;overflow:hidden}${root}:after{content:"";position:absolute;width:190px;height:190px;right:-110px;top:-124px;border:1px solid ${accent}80;border-radius:50%;opacity:.5}${root} small{position:relative;color:${accent};font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}${root} h3,${root} p{position:relative;margin:0}${root} h3{font-size:clamp(20px,2.4vw,30px);line-height:1.04;letter-spacing:-.035em}${root} p{max-width:680px;margin-top:8px;font-size:13px;line-height:1.5;opacity:.9}${root}>span{position:relative;color:${accent};font-size:28px;font-weight:700;text-align:right}@media(max-width:680px){${root}{grid-template-columns:1fr;gap:9px;padding:21px;min-height:190px}${root}>span{text-align:left;font-size:22px}}` +} + +const rows = entries.map(([title, slug, body, topics, type], index) => + [title, slug, 'responsive', markup(slug, title, body, type), style(slug, palettes[index % palettes.length], index), type, topics] + .map(csv) + .join(','), +) + +await mkdir(new URL('../content/', import.meta.url), { recursive: true }) +await writeFile( + new URL('../content/adazo-balloons.csv', import.meta.url), + `title,slug,size,html,css,editorial_type,topics\n${rows.join('\n')}\n`, +) +console.log(`Wrote ${rows.length} Adazo balloons.`) diff --git a/src/App.tsx b/src/App.tsx index fbbddd3..58f4986 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -16,12 +16,14 @@ import { BuyerGuidesHubPage } from './pages/BuyerGuides' import { BuyerGuidePage } from './pages/BuyerGuide' import { Privacy } from './pages/Privacy' import { Terms } from './pages/Terms' +import ConbalBalloons from './components/ConbalBalloons' export default function App() { return ( + }> } /> diff --git a/src/components/ConbalBalloons.tsx b/src/components/ConbalBalloons.tsx new file mode 100644 index 0000000..729b0e9 --- /dev/null +++ b/src/components/ConbalBalloons.tsx @@ -0,0 +1,375 @@ +import { useEffect } from 'react' +import { useLocation } from 'react-router-dom' + +const SITE_KEY = 'nNo0a-TuVz6S' +const API_ORIGIN = 'https://conbal.us' +const ROOT_PREFIX = 'adazo' +const HISTORY_KEY = `adazo:conbal-history:${SITE_KEY}` +const INTEGRATION_VERSION = 'page-aware-20260808' +const MAX_SLOTS = 6 +const REQUEST_TIMEOUT_MS = 2400 +const EDITORIAL_TYPES = [ + 'did_you_know', + 'fun_fact', + 'care_tip', + 'design_note', + 'material_myth', + 'nature_note', + 'culture_craft', +] + +type BalloonPayload = { + slug?: string + size?: string + html?: string + css?: string +} + +type Anchor = { node: Element; text: string } + +const TOPIC_RULES: Array<[string, string[]]> = [ + ['beauty', ['beauty', 'makeup', 'cosmetic', 'glow', 'complexion']], + ['skin', ['skin', 'skincare', 'cleanser', 'serum', 'moisturizer', 'spf']], + ['hair', ['hair', 'shampoo', 'conditioner', 'scalp', 'curl']], + ['self-care', ['self-care', 'wellness', 'ritual', 'routine', 'bath', 'body']], + ['fragrance', ['fragrance', 'perfume', 'scent', 'aroma']], + ['ingredients', ['ingredient', 'formula', 'botanical', 'oil', 'vitamin']], + ['travel', ['travel', 'carry-on', 'vacation', 'weekend', 'portable']], + ['gifting', ['gift', 'birthday', 'holiday', 'mother', 'bridal']], +] + +const PAGE_TOPIC_RULES: Array<[string, string[]]> = [ + ['/shop', ['beauty', 'skin', 'hair', 'self-care']], + ['/product/', ['beauty', 'ingredients', 'care', 'routine']], + ['/guides', ['beauty', 'skin', 'hair', 'ingredients']], + ['/gifts', ['gifting', 'beauty', 'self-care']], + ['/quiz', ['beauty', 'self-care', 'routine']], + ['/vibe/', ['beauty', 'self-care', 'fragrance']], + ['/watch', ['beauty', 'culture', 'routine']], + ['/reels', ['beauty', 'culture', 'travel']], + ['/why', ['beauty', 'culture', 'self-care']], +] + +function textOf(node: Element | null) { + return (node?.textContent || '').replace(/\s+/g, ' ').trim() +} + +function wordCount(text: string) { + return text ? text.split(/\s+/).filter(Boolean).length : 0 +} + +function slotCount(words: number, path: string) { + if (/^\/(?:admin|privacy|terms|404)(?:\/|$)/.test(path)) return 0 + if (words < 160) return 0 + return Math.min(MAX_SLOTS, 1 + Math.floor((words - 160) / 300)) +} + +function pageTopics(path: string) { + const normalizedPath = path.split('?')[0].replace(/\/+$/, '') || '/' + const routeTopics = PAGE_TOPIC_RULES.find(([route]) => + route.endsWith('/') + ? normalizedPath.startsWith(route) + : normalizedPath === route || normalizedPath.startsWith(`${route}/`), + )?.[1] + if (routeTopics) return routeTopics + + const focus = document.querySelector('main > section, main > article, main > div') + const haystack = [ + document.title, + normalizedPath, + textOf(document.querySelector('h1')), + textOf(focus), + ].join(' ').toLowerCase() + const topics = TOPIC_RULES.filter(([, terms]) => + terms.some((term) => haystack.includes(term)), + ).map(([topic]) => topic) + return (topics.length ? topics : ['beauty', 'self-care', 'general']).slice(0, 8) +} + +function readHistory() { + try { + const value = JSON.parse(window.localStorage.getItem(HISTORY_KEY) || '[]') + return Array.isArray(value) + ? value + .filter((slug): slug is string => /^[a-z0-9-]{1,80}$/.test(slug)) + .slice(-36) + : [] + } catch { + return [] + } +} + +function remember(slugs: string[]) { + if (!slugs.length) return + try { + const history = readHistory().concat(slugs) + window.localStorage.setItem( + HISTORY_KEY, + JSON.stringify(Array.from(new Set(history)).slice(-36)), + ) + } catch { + // A blocked storage API must never affect the host page. + } +} + +function visible(node: Element) { + const style = window.getComputedStyle(node) + return style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0' +} + +function ignored(node: Element) { + return Boolean( + node.closest( + 'header, nav, footer, form, dialog, aside, li, [data-conbal-managed], [data-conbal-slot], [data-adazo-conbal-slot]', + ), + ) +} + +function usableAnchor(node: Element, root: HTMLElement) { + const rect = node.getBoundingClientRect() + const rootWidth = root.getBoundingClientRect().width + const minimumWidth = Math.min(520, Math.max(260, rootWidth * 0.42)) + const insideCardLayout = Boolean( + node.parentElement?.closest( + '[class~="grid"], [class*="rounded-"], [data-card], [data-product-card], [data-conbal-managed]', + ), + ) + return rect.width >= minimumWidth && !insideCardLayout +} + +function anchors(root: HTMLElement): Anchor[] { + const layoutNodes = Array.from( + root.querySelectorAll('[class~="grid"], [class*="grid-cols-"], [data-conbal-allow-grid]'), + ) + .filter((node) => visible(node) && !ignored(node)) + .map((node) => ({ node, text: textOf(node) })) + .filter(({ node, text }) => { + const rect = node.getBoundingClientRect() + return text.length >= 220 && rect.width >= Math.min(520, Math.max(260, root.getBoundingClientRect().width * 0.42)) + }) + const nodes = Array.from(root.querySelectorAll('section, article, p, h2, h3')) + .filter((node) => visible(node) && !ignored(node) && usableAnchor(node, root)) + .map((node) => ({ node, text: textOf(node) })) + .filter(({ node, text }) => text.length >= (node.matches('p') ? 120 : 180)) + const allNodes = [...layoutNodes, ...nodes] + const paragraphs = allNodes.filter(({ node }) => node.matches('p')) + const source = paragraphs.length >= 2 ? paragraphs : layoutNodes.length ? layoutNodes : nodes + const result: Anchor[] = [] + for (const entry of source) { + if (result.some(({ node }) => node.contains(entry.node) || entry.node.contains(node))) continue + result.push(entry) + } + return result +} + +function chooseAnchors(root: HTMLElement, count: number) { + const candidates = anchors(root) + if (!candidates.length) return [] + const picks: Anchor[] = [] + const step = candidates.length / count + for (let index = 0; index < count; index += 1) { + const candidate = candidates[Math.min(candidates.length - 1, Math.floor((index + 0.5) * step))] + if ( + !picks.some( + ({ node }) => node === candidate.node || node.contains(candidate.node) || candidate.node.contains(node), + ) + ) { + picks.push(candidate) + } + } + return picks +} + +function createSlots(root: HTMLElement, count: number) { + return chooseAnchors(root, count).map((entry, index) => { + const slot = document.createElement('div') + slot.className = 'adazo-conbal-slot' + slot.dataset.conbalSlot = String(index) + slot.setAttribute('role', 'region') + slot.setAttribute('aria-live', 'polite') + slot.setAttribute('aria-label', 'Adazo editorial note') + entry.node.insertAdjacentElement('afterend', slot) + return slot + }) +} + +function safeHtml(html: string | undefined, expectedSlug: string) { + if ( + typeof html !== 'string' || + html.length < 40 || + html.length > 50_000 || + /<\s*(script|iframe|object|embed|form|input|textarea|select|style)\b|\bon[a-z]+\s*=|javascript:/i.test(html) + ) { + return null + } + const doc = new DOMParser().parseFromString(html, 'text/html') + const roots = Array.from(doc.body.children) + if (roots.length !== 1 || roots[0].tagName !== 'ARTICLE') return null + const root = roots[0] + if (root.classList.length !== 1 || root.classList[0] !== `${ROOT_PREFIX}-${expectedSlug}`) return null + const allowedTags = new Set(['ARTICLE', 'SMALL', 'H3', 'P', 'SPAN']) + for (const node of [root, ...Array.from(root.querySelectorAll('*'))]) { + if (!allowedTags.has(node.tagName)) return null + for (const attr of Array.from(node.attributes)) { + if (attr.name !== 'class' && attr.name !== 'aria-label' && attr.name !== 'aria-hidden') return null + if ( + attr.name === 'class' && + !attr.value.split(/\s+/).filter(Boolean).every((value) => + new RegExp(`^${ROOT_PREFIX}-[a-z0-9-]+$`).test(value), + ) + ) { + return null + } + } + } + return root +} + +function safeCss(css: string | undefined, expectedSlug: string) { + if (typeof css !== 'string' || css.length < 40 || css.length > 40_000) return null + const root = `.${ROOT_PREFIX}-${expectedSlug}` + if ( + !css.includes(root) || + /<\/?style|@(?:import|supports|font-face|keyframes)|url\s*\(|expression\s*\(|javascript:|position\s*:\s*(?:fixed|sticky)|z-index\s*:/i.test(css) || + /(^|[,{])\s*(?:body|html|:root)\b/i.test(css) + ) { + return null + } + return css +} + +function render(slot: HTMLElement, payload: BalloonPayload | undefined) { + if (!payload?.slug || !/^[a-z0-9-]{1,80}$/.test(payload.slug) || payload.size !== 'responsive') return false + const root = safeHtml(payload.html, payload.slug) + const css = safeCss(payload.css, payload.slug) + if (!root || !css) return false + const style = document.createElement('style') + style.textContent = css + slot.replaceChildren(style, root) + slot.dataset.conbal = 'ready' + slot.dataset.conbalSlug = payload.slug + return true +} + +async function request(slots: HTMLElement[], topics: string[]) { + const url = new URL(`${API_ORIGIN}/b/${SITE_KEY}/_sample`) + const nonce = window.crypto?.randomUUID?.() || `${Date.now()}-${Math.random()}` + url.searchParams.set('nonce', nonce) + url.searchParams.set( + 'slots', + JSON.stringify( + slots.map((_, id) => ({ + id: String(id), + size: 'responsive', + topics, + editorial_types: EDITORIAL_TYPES, + })), + ), + ) + const history = readHistory() + if (history.length) url.searchParams.set('exclude_slugs', history.join(',')) + const controller = new AbortController() + const timer = window.setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS) + try { + const response = await fetch(url, { + mode: 'cors', + cache: 'no-store', + credentials: 'omit', + headers: { Accept: 'application/json' }, + signal: controller.signal, + }) + if (!response.ok) return null + return (await response.json()) as { slots?: Record } + } catch { + return null + } finally { + window.clearTimeout(timer) + } +} + +function injectHostStyle() { + if (document.querySelector('style[data-adazo-conbal-host]')) return + const style = document.createElement('style') + style.dataset.adazoConbalHost = INTEGRATION_VERSION + style.textContent = + 'html{overflow-x:clip}.adazo-conbal-slot{width:100%;min-width:0;min-height:138px;margin:clamp(2.4rem,6vw,5.5rem) 0;container-type:inline-size;contain:layout;overflow:clip}.adazo-conbal-slot[data-conbal="ready"]{display:block}.adazo-conbal-slot[data-conbal="ready"]>article{min-width:0;overflow:hidden!important}.adazo-conbal-slot[data-conbal="ready"]>article>*{min-width:0;overflow-wrap:anywhere}@container (max-width:38rem){.adazo-conbal-slot[data-conbal="ready"]>article{grid-template-columns:minmax(0,1fr)!important;min-height:0!important}}@media(max-width:680px){.adazo-conbal-slot{min-height:190px;margin:2.8rem 0}}' + document.head.appendChild(style) +} + +function pageRoot() { + return document.querySelector('main, [role="main"], #root') as HTMLElement | null +} + +export default function ConbalBalloons() { + const { pathname } = useLocation() + + useEffect(() => { + injectHostStyle() + const main = pageRoot() + if (!main) return + main.querySelectorAll('.adazo-conbal-slot').forEach((node) => node.remove()) + delete main.dataset.conbalInitialized + if (/^\/(?:admin|privacy|terms|404)(?:\/|$)/.test(pathname)) return + + let cancelled = false + let attempts = 0 + let retryTimer: number | undefined + let observer: MutationObserver | undefined + let pollTimer: number | undefined + const schedule = (delay = 180) => { + if (cancelled || retryTimer !== undefined) return + retryTimer = window.setTimeout(() => { + retryTimer = undefined + void initialize() + }, delay) + } + const initialize = async () => { + if (cancelled) return + const root = pageRoot() + if (!root || root.dataset.conbalInitialized === 'true') return + const words = wordCount(textOf(root)) + const count = slotCount(words, pathname) + if (!count) { + if (words < 30 && attempts < 12) { + attempts += 1 + schedule() + } + return + } + const slots = createSlots(root, count) + if (!slots.length) return + root.dataset.conbalInitialized = 'true' + const data = await request(slots, pageTopics(pathname)) + if (cancelled) return + const shown: string[] = [] + slots.forEach((slot, index) => { + if (render(slot, data?.slots?.[String(index)])) shown.push(slot.dataset.conbalSlug || '') + else slot.remove() + }) + if (!shown.length) { + delete root.dataset.conbalInitialized + return + } + remember(shown.filter(Boolean)) + } + observer = new MutationObserver(() => { + const root = pageRoot() + if (!root || cancelled) return + if (slotCount(wordCount(textOf(root)), pathname) && root.dataset.conbalInitialized !== 'true') schedule(240) + }) + observer.observe(document.body, { childList: true, subtree: true, characterData: true }) + const frame = window.requestAnimationFrame(() => { + void initialize() + pollTimer = window.setTimeout(() => void initialize(), 320) + }) + return () => { + cancelled = true + window.cancelAnimationFrame(frame) + if (retryTimer) window.clearTimeout(retryTimer) + if (pollTimer) window.clearTimeout(pollTimer) + observer?.disconnect() + } + }, [pathname]) + + return null +}