WooCommerce Catalog

/* =========================================================
YUTORI SHOP PAGE
SECTION 1 – COMPACT SHOP HERO
CLEAN MASTER CSS
========================================================= */

/* =========================================================
ASTRA / WORDPRESS RESET
========================================================= */

body:has(.yutori-shop-hero) #content,
body:has(.yutori-shop-hero) .site-content,
body:has(.yutori-shop-hero) .content-area,
body:has(.yutori-shop-hero) .site-main,
body:has(.yutori-shop-hero) article,
body:has(.yutori-shop-hero) .entry-content {
margin-top: 0 !important;
padding-top: 0 !important;
}

body:has(.yutori-shop-hero)
.site-content > .ast-container {
width: 100% !important;
max-width: none !important;

margin: 0 !important;
padding: 0 !important;
}

body:has(.yutori-shop-hero)
.entry-content > .wp-block-html:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}

/* =========================================================
SECTION
========================================================= */

.yutori-shop-hero {
position: relative;

left: 50%;

width: 100vw;
max-width: none;

margin: 0 0 0 -50vw !important;

overflow: hidden;

background:
radial-gradient(
circle at 7% 18%,
rgba(232, 158, 184, 0.14),
transparent 25%
),
radial-gradient(
circle at 92% 23%,
rgba(181, 199, 235, 0.18),
transparent 25%
),
radial-gradient(
circle at 83% 89%,
rgba(247, 231, 206, 0.45),
transparent 25%
),
#fffaf6;
}

/* =========================================================
INNER
========================================================= */

.yutori-shop-hero-inner {
width: min(1280px, calc(100% – 80px));

min-height: 515px;

margin: 0 auto;

padding:
48px
0
50px;

display: grid;

grid-template-columns:
minmax(430px, 0.9fr)
minmax(500px, 1.1fr);

grid-template-areas:
“content art”
“actions art”;

grid-template-rows:
auto
auto;

column-gap: 68px;
row-gap: 20px;

align-content: center;
}

/* =========================================================
CONTENT
========================================================= */

.yutori-shop-hero-content {
grid-area: content;

position: relative;

z-index: 5;

max-width: 590px;

align-self: end;
}

/* EYEBROW */

.yutori-shop-hero-eyebrow {
display: flex;

align-items: center;

gap: 7px;

margin-bottom: 10px;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 15px;
font-weight: 700;

color: #e89eb8;
}

/* TITLE */

.yutori-shop-hero-title {
margin: 0;

font-family:
“Playfair Display”,
Georgia,
serif;

font-size:
clamp(
53px,
5.7vw,
76px
);

line-height: 0.95;

letter-spacing: -0.043em;

color: #095859;
}

.yutori-shop-hero-title span {
display: block;
}

/* INTRO */

.yutori-shop-hero-intro {
max-width: 560px;

margin:
20px
0
0;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 17px;
line-height: 1.55;

color: #3f6263;
}

/* SECONDARY */

.yutori-shop-hero-secondary {
max-width: 560px;

margin:
11px
0
0;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 14px;
line-height: 1.5;

color: #718485;
}

/* =========================================================
FORMAT PILLS
========================================================= */

.yutori-shop-hero-formats {
display: flex;

flex-wrap: wrap;

gap: 7px;

margin-top: 16px;
}

.yutori-shop-format {
display: inline-flex;

align-items: center;

gap: 6px;

padding:
7px
11px;

border-radius: 999px;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 11px;
font-weight: 700;

color: #095859;
}

.yutori-shop-format i {
font-style: normal;
}

.yutori-shop-format-digital {
background:
rgba(181, 199, 235, 0.35);
}

.yutori-shop-format-physical {
background:
rgba(232, 158, 184, 0.24);
}

/* SCRIPT */

.yutori-shop-hero-script {
margin:
14px
0
0;

font-family:
“Pacifico”,
cursive;

font-size: 14px;

color: #e89eb8;
}

/* =========================================================
CTA
========================================================= */

.yutori-shop-hero-actions {
grid-area: actions;

position: relative;

z-index: 6;

align-self: start;
}

.yutori-shop-hero-btn {
min-height: 47px;

display: inline-flex;

align-items: center;
justify-content: center;

gap: 9px;

padding:
10px
23px;

border-radius: 999px;

background: #095859;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 14px;
font-weight: 700;

color: #ffffff !important;

text-decoration: none !important;

transition:
transform 0.2s ease,
background-color 0.2s ease;
}

.yutori-shop-hero-btn:hover {
background: #0f3637;

color: #ffffff !important;

transform: translateY(-2px);
}

/* =========================================================
ART
========================================================= */

.yutori-shop-hero-art {
grid-area: art;

position: relative;

z-index: 2;

min-height: 415px;

align-self: center;
}

/* =========================================================
BACKGROUND BLOB
========================================================= */

.yutori-shop-hero-blob {
position: absolute;

width: 430px;
height: 330px;

left: 50%;
top: 50%;

transform:
translate(-50%, -48%)
rotate(-4deg);

border-radius:
48%
52%
44%
56% /
56%
44%
56%
44%;

background:
linear-gradient(
145deg,
rgba(232, 158, 184, 0.16),
rgba(201, 160, 220, 0.14)
);
}

/* =========================================================
PHYSICAL BOOK
========================================================= */

.yutori-shop-physical-book {
position: absolute;

width: 205px;
height: 275px;

left: 12%;
top: 77px;

padding:
27px
22px;

overflow: hidden;

border:
8px solid
rgba(255,255,255,0.82);

border-radius:
14px
24px
24px
14px;

background:
linear-gradient(
145deg,
#e9d9ef,
#d2b3df
);

box-shadow:
0 21px 38px
rgba(15,54,55,0.13);

transform: rotate(-7deg);

z-index: 3;
}

.yutori-shop-physical-book::before {
content: “”;

position: absolute;

left: 11px;
top: 10%;

width: 2px;
height: 80%;

border-radius: 999px;

background:
rgba(9,88,89,0.11);
}

.yutori-shop-physical-book small {
display: block;

margin-bottom: 14px;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 8px;
font-weight: 700;

letter-spacing: 0.08em;

color: #095859;
}

.yutori-shop-physical-book strong {
display: block;

font-family:
“Playfair Display”,
Georgia,
serif;

font-size: 28px;
line-height: 1;

color: #095859;
}

.yutori-shop-book-script {
display: block;

margin-top: 20px;

font-family:
“Pacifico”,
cursive;

font-size: 8px;

color: #095859;
}

.yutori-shop-book-heart {
position: absolute;

right: 18px;
bottom: 14px;

font-family:
Arial,
sans-serif;

font-size: 20px;

color: #095859;
}

/* =========================================================
DIGITAL TABLET
========================================================= */

.yutori-shop-digital-tablet {
position: absolute;

width: 270px;
height: 198px;

right: 4%;
top: 94px;

padding: 9px;

border-radius: 18px;

background: #0f3637;

box-shadow:
0 21px 38px
rgba(15,54,55,0.16);

transform: rotate(5deg);

z-index: 5;
}

.yutori-shop-tablet-camera {
position: absolute;

width: 4px;
height: 4px;

left: 50%;
top: 3px;

transform: translateX(-50%);

border-radius: 50%;

background:
rgba(255,255,255,0.4);
}

.yutori-shop-tablet-screen {
position: relative;

height: 100%;

padding:
24px
20px;

overflow: hidden;

border-radius: 11px;

background: #fffaf6;
}

.yutori-shop-tablet-screen small {
display: block;

margin-bottom: 7px;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 7px;
font-weight: 700;

letter-spacing: 0.05em;

color: #e89eb8;
}

.yutori-shop-tablet-screen strong {
display: block;

max-width: 180px;

font-family:
“Playfair Display”,
Georgia,
serif;

font-size: 21px;
line-height: 1.05;

color: #095859;
}

.yutori-shop-tablet-lines {
margin-top: 16px;
}

.yutori-shop-tablet-lines span {
display: block;

width: 100%;
height: 2px;

margin-bottom: 7px;

border-radius: 999px;

background:
rgba(9,88,89,0.12);
}

.yutori-shop-tablet-lines span:last-child {
width: 65%;
}

.yutori-shop-tablet-screen i {
position: absolute;

right: 13px;
bottom: 10px;

font-family:
Arial,
sans-serif;

font-size: 17px;
font-style: normal;

color: #e89eb8;
}

/* =========================================================
STYLUS
========================================================= */

.yutori-shop-stylus {
position: absolute;

width: 116px;
height: 7px;

right: 7%;
bottom: 65px;

border-radius: 999px;

background: #ffffff;

box-shadow:
0 5px 10px
rgba(15,54,55,0.12);

transform: rotate(-26deg);

z-index: 7;
}

.yutori-shop-stylus::after {
content: “”;

position: absolute;

right: -8px;
top: 0;

border-top:
3.5px solid transparent;

border-bottom:
3.5px solid transparent;

border-left:
9px solid #095859;
}

/* =========================================================
ART LABELS
========================================================= */

.yutori-shop-art-label {
position: absolute;

padding:
11px
12px;

border-radius: 11px;

background: #ffffff;

box-shadow:
0 11px 21px
rgba(15,54,55,0.09);

z-index: 8;
}

.yutori-shop-art-label small {
display: block;

margin-bottom: 2px;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 6px;
font-weight: 700;

letter-spacing: 0.07em;

color: #e89eb8;
}

.yutori-shop-art-label strong {
display: block;

font-family:
“Alegreya Sans”,
sans-serif;

font-size: 10px;
font-weight: 700;

color: #315455;
}

.yutori-shop-label-digital {
right: 2%;
top: 37px;

transform: rotate(5deg);
}

.yutori-shop-label-physical {
left: 3%;
bottom: 26px;

transform: rotate(-5deg);
}

/* =========================================================
DECORATIONS
========================================================= */

.yutori-shop-hero-deco {
position: absolute;

z-index: 9;

pointer-events: none;
}

.yutori-shop-deco-one {
left: 8%;
top: 12%;

font-size: 25px;

color: #e89eb8;
}

.yutori-shop-deco-two {
right: 14%;
bottom: 12%;

font-family:
Arial,
sans-serif;

font-size: 21px;

color:
rgba(232,158,184,0.75);
}

.yutori-shop-deco-three {
left: 47%;
bottom: 1%;

font-size: 28px;

color:
rgba(181,199,235,0.9);

transform: rotate(-7deg);
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) and (min-width: 768px) {

.yutori-shop-hero-inner {
width: calc(100% – 48px);
max-width: 1000px;

min-height: 480px;

padding:
44px
0
46px;

grid-template-columns:
minmax(0, 0.9fr)
minmax(390px, 1.1fr);

column-gap: 35px;
}

.yutori-shop-hero-title {
font-size:
clamp(
44px,
6vw,
59px
);
}

.yutori-shop-hero-intro {
font-size: 15px;
}

.yutori-shop-hero-secondary {
font-size: 12px;
}

.yutori-shop-hero-art {
min-height: 385px;
}

.yutori-shop-hero-blob {
width: 340px;
height: 275px;
}

.yutori-shop-physical-book {
width: 160px;
height: 220px;

top: 84px;

padding:
21px
17px;

border-width: 6px;
}

.yutori-shop-physical-book strong {
font-size: 21px;
}

.yutori-shop-digital-tablet {
width: 210px;
height: 157px;

top: 95px;
}

.yutori-shop-tablet-screen strong {
font-size: 17px;
}

}

/* =========================================================
MOBILE
COPY → ARTWORK → CTA
========================================================= */

@media (max-width: 767px) {

.yutori-shop-hero-inner {
width: calc(100% – 26px);
max-width: 560px;

min-height: 0;

padding:
37px
0
42px;

display: flex;

flex-direction: column;

gap: 0;
}

/* COPY */

.yutori-shop-hero-content {
order: 1;

width: 100%;
max-width: none;

text-align: center;
}

.yutori-shop-hero-eyebrow {
justify-content: center;

font-size: 14px;
}

.yutori-shop-hero-title {
font-size:
clamp(
40px,
11vw,
52px
);
}

.yutori-shop-hero-intro {
max-width: 490px;

margin:
17px
auto
0;

font-size: 14px;
}

.yutori-shop-hero-secondary {
max-width: 480px;

margin:
10px
auto
0;

font-size: 12px;
}

.yutori-shop-hero-formats {
justify-content: center;
}

.yutori-shop-hero-script {
font-size: 13px;
}

/* ART */

.yutori-shop-hero-art {
order: 2;

width: min(100%, 420px);

min-height: 340px;

margin:
9px
auto
2px;
}

.yutori-shop-hero-blob {
width: 285px;
height: 230px;
}

.yutori-shop-physical-book {
width: 135px;
height: 185px;

left: 8%;
top: 88px;

padding:
17px
13px;

border-width: 5px;
}

.yutori-shop-physical-book strong {
font-size: 17px;
}

.yutori-shop-book-script {
margin-top: 12px;

font-size: 5px;
}

.yutori-shop-digital-tablet {
width: 177px;
height: 132px;

right: 5%;
top: 95px;

padding: 6px;
}

.yutori-shop-tablet-screen {
padding:
17px
12px;
}

.yutori-shop-tablet-screen strong {
font-size: 14px;
}

.yutori-shop-tablet-lines {
margin-top: 10px;
}

.yutori-shop-stylus {
width: 79px;

right: 7%;
bottom: 48px;
}

.yutori-shop-art-label {
padding:
8px
9px;
}

.yutori-shop-art-label strong {
font-size: 7px;
}

/* CTA */

.yutori-shop-hero-actions {
order: 3;

width: 100%;
max-width: 420px;

margin:
7px
auto
0;
}

.yutori-shop-hero-btn {
width: 100%;

min-height: 51px;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.yutori-shop-hero-inner {
width: calc(100% – 20px);

padding:
33px
0
38px;
}

.yutori-shop-hero-title {
font-size:
clamp(
37px,
10.7vw,
47px
);
}

.yutori-shop-hero-art {
min-height: 310px;
}

.yutori-shop-physical-book {
width: 122px;
height: 171px;

top: 82px;
}

.yutori-shop-digital-tablet {
width: 160px;
height: 120px;

top: 90px;
}

}
/* =========================================================
YUTORI SHOP HERO
STORE BANNER / STRIP VERSION
========================================================= */

/* =========================================================
DESKTOP
========================================================= */

.yutori-shop-hero-inner {
width: min(1280px, calc(100% – 80px));

min-height: 310px;

padding:
20px
0
22px;

grid-template-columns:
minmax(420px, 0.92fr)
minmax(460px, 1.08fr);

column-gap: 60px;
row-gap: 14px;

align-content: center;
}

/* KEEP COPY COMPACT */

.yutori-shop-hero-title {
font-size:
clamp(
46px,
4.7vw,
61px
);

line-height: 0.94;
}

.yutori-shop-hero-intro {
max-width: 540px;

margin-top: 12px;

font-size: 15px;
line-height: 1.45;
}

/* REDUNDANT IN COMPACT SHOP BANNER */

.yutori-shop-hero-secondary,
.yutori-shop-hero-script {
display: none;
}

/* FORMAT PILLS */

.yutori-shop-hero-formats {
margin-top: 12px;
}

.yutori-shop-format {
padding:
6px
10px;

font-size: 10px;
}

/* CTA */

.yutori-shop-hero-actions {
margin-top: 0;
}

.yutori-shop-hero-btn {
min-height: 43px;

padding:
8px
20px;

font-size: 13px;
}

/* =========================================================
COMPACT ART AREA
========================================================= */

.yutori-shop-hero-art {
min-height: 265px;
}

/* BACKGROUND */

.yutori-shop-hero-blob {
width: 325px;
height: 220px;
}

/* PHYSICAL JOURNAL */

.yutori-shop-physical-book {
width: 145px;
height: 195px;

left: 13%;
top: 38px;

padding:
19px
15px;

border-width: 6px;
}

.yutori-shop-physical-book strong {
font-size: 20px;
}

.yutori-shop-book-script {
margin-top: 12px;

font-size: 6px;
}

/* DIGITAL TABLET */

.yutori-shop-digital-tablet {
width: 190px;
height: 140px;

right: 7%;
top: 52px;

padding: 7px;
}

.yutori-shop-tablet-screen {
padding:
17px
13px;
}

.yutori-shop-tablet-screen strong {
font-size: 15px;
}

.yutori-shop-tablet-lines {
margin-top: 10px;
}

/* STYLUS */

.yutori-shop-stylus {
width: 84px;

right: 10%;
bottom: 34px;
}

/* SMALL ART LABELS */

.yutori-shop-art-label {
padding:
8px
9px;
}

.yutori-shop-art-label strong {
font-size: 8px;
}

.yutori-shop-label-digital {
top: 21px;
}

.yutori-shop-label-physical {
bottom: 15px;
}

/* DECORATIONS */

.yutori-shop-deco-one {
font-size: 20px;
}

.yutori-shop-deco-two {
font-size: 17px;
}

.yutori-shop-deco-three {
font-size: 21px;
}

/* =========================================================
TABLET
========================================================= */

@media (max-width: 1100px) and (min-width: 768px) {

.yutori-shop-hero-inner {
width: calc(100% – 48px);

min-height: 285px;

padding:
18px
0
20px;

grid-template-columns:
minmax(0, 0.92fr)
minmax(350px, 1.08fr);

column-gap: 30px;
}

.yutori-shop-hero-title {
font-size:
clamp(
40px,
5.3vw,
50px
);
}

.yutori-shop-hero-intro {
font-size: 13px;
}

.yutori-shop-hero-art {
min-height: 245px;
}

.yutori-shop-hero-blob {
width: 275px;
height: 195px;
}

.yutori-shop-physical-book {
width: 125px;
height: 170px;

top: 38px;
}

.yutori-shop-physical-book strong {
font-size: 17px;
}

.yutori-shop-digital-tablet {
width: 165px;
height: 122px;

top: 50px;
}

}

/* =========================================================
MOBILE
STILL SHORT, BUT ARTWORK REMAINS
========================================================= */

@media (max-width: 767px) {

.yutori-shop-hero-inner {
width: calc(100% – 26px);

padding:
23px
0
26px;
}

.yutori-shop-hero-title {
font-size:
clamp(
35px,
9.6vw,
44px
);
}

.yutori-shop-hero-intro {
margin-top: 10px;

font-size: 13px;
}

.yutori-shop-hero-formats {
margin-top: 10px;
}

/* SMALLER ART BLOCK */

.yutori-shop-hero-art {
min-height: 205px;

margin:
3px
auto
0;
}

.yutori-shop-hero-blob {
width: 225px;
height: 165px;
}

.yutori-shop-physical-book {
width: 91px;
height: 127px;

left: 14%;
top: 47px;

padding:
12px
9px;

border-width: 4px;
}

.yutori-shop-physical-book strong {
font-size: 13px;
}

.yutori-shop-physical-book small,
.yutori-shop-book-script {
font-size: 4px;
}

.yutori-shop-digital-tablet {
width: 120px;
height: 90px;

right: 11%;
top: 53px;

padding: 5px;
}

.yutori-shop-tablet-screen {
padding:
12px
8px;
}

.yutori-shop-tablet-screen strong {
font-size: 10px;
}

.yutori-shop-tablet-lines {
margin-top: 6px;
}

.yutori-shop-tablet-lines span {
margin-bottom: 4px;
}

.yutori-shop-stylus {
width: 60px;

right: 12%;
bottom: 26px;
}

.yutori-shop-art-label {
display: none;
}

.yutori-shop-hero-actions {
margin-top: 1px;
}

.yutori-shop-hero-btn {
min-height: 46px;
}

}

/* =========================================================
SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

.yutori-shop-hero-inner {
width: calc(100% – 20px);

padding:
20px
0
23px;
}

.yutori-shop-hero-art {
min-height: 185px;
}

.yutori-shop-physical-book {
width: 84px;
height: 119px;

top: 43px;
}

.yutori-shop-digital-tablet {
width: 110px;
height: 82px;

top: 49px;
}

}

Find a little space for you

Find your
Yutori.

Thoughtful journals for reflection, memories, habits,
goals and all the little things you want to keep.

Choose a digital journal to use on your device or print
yourself, or pick a physical Yutori journal delivered to you.



Digital Journals



Physical Journals

Pick the one that feels like you. ✦


Browse Journals

Showing all 4 results

Scroll to Top