/* * The Learning Loft: Natalie's look, on top of the Teacher Store stylesheet. * * Her colors (brand/BRAND.md) are all pastels: they are used as fills, bands * and decorations, with ink text on them, never as text on white. Text that * needs a color uses --lls-pink-ink, which reads on white and on blush. * Fonts: Fredoka (headings) and Nunito (text) come from the kit; Caveat (her * name, small hand-written touches) is in assets/fonts with its OFL license. */ @font-face { font-family: "Caveat"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("../fonts/caveat-latin.woff2") format("woff2"); } :root { --lls-pink: #fc7aa9; --lls-orange: #fea869; --lls-yellow: #fec646; --lls-teal: #90d7d6; --lls-orchid: #eba3d5; --lls-rose: #ffafc1; --lls-blush: #ffedf1; --lls-pink-soft: #ffe2ed; --lls-orange-soft: #ffecdc; --lls-yellow-soft: #fff3d3; --lls-teal-soft: #e0f4f3; --lls-orchid-soft: #f9e6f3; --lls-pink-ink: #b8336a; --lls-ink: var(--ts-ink, #2a2140); --lls-muted: #5b4b6b; --lls-script: "Caveat", "Segoe Print", "Bradley Hand", cursive; --lls-radius: 26px; --lls-shadow: 0 2px 4px rgb(184 51 106 / .06), 0 14px 32px -12px rgb(120 40 90 / .22); --lls-shadow-lift: 0 4px 8px rgb(184 51 106 / .08), 0 26px 48px -18px rgb(120 40 90 / .34); --lls-rainbow: linear-gradient(90deg, var(--lls-pink) 0 16.66%, var(--lls-orange) 0 33.33%, var(--lls-yellow) 0 50%, var(--lls-teal) 0 66.66%, var(--lls-orchid) 0 83.33%, var(--lls-rose) 0); /* The shapes. Each decoration is masked with one of these and filled with a color. */ --lls-art-star: url("../art/star.svg"); --lls-art-sparkle: url("../art/sparkle.svg"); --lls-art-flower: url("../art/flower.svg"); --lls-art-swirl: url("../art/swirl.svg"); --lls-art-squiggle: url("../art/squiggle.svg"); --lls-art-cloud: url("../art/cloud.svg"); --lls-art-confetti: url("../art/confetti.svg"); } /* ---------- Clip art slots ---------- * When Natalie's licensed clip art arrives (and its license allows use on a * website as decoration), copy the files to assets/art/clipart/ and switch a * shape over from a colored mask to her picture, for example: * * .lls-deco--star { -webkit-mask: none; mask: none; background: url("../art/clipart/star.png") center / contain no-repeat; } * .lls-deco--flower { -webkit-mask: none; mask: none; background: url("../art/clipart/flower.png") center / contain no-repeat; } * * The dotted background behind the home heading and page headings is * --lls-art-confetti; point it at her dots file to swap it. Note the source * and license of each file in assets/art/clipart/README.md. */ /* ---------- Decorations ---------- */ .lls-decos { position: absolute; inset: 0; pointer-events: none; z-index: 0; } .lls-deco { position: absolute; display: block; width: var(--s, 24px); aspect-ratio: 1; transform: rotate(var(--r, 0deg)); background: var(--c, var(--lls-pink)); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; } .lls-deco--star { --m: var(--lls-art-star); } .lls-deco--sparkle { --m: var(--lls-art-sparkle); } .lls-deco--flower { --m: var(--lls-art-flower); } .lls-deco--swirl { --m: var(--lls-art-swirl); aspect-ratio: 2 / 1; } .lls-deco--dot { border-radius: 50%; -webkit-mask: none; mask: none; } .lls-c--pink { --c: var(--lls-pink); } .lls-c--orange { --c: var(--lls-orange); } .lls-c--yellow { --c: var(--lls-yellow); } .lls-c--teal { --c: var(--lls-teal); } .lls-c--orchid { --c: var(--lls-orchid); } .lls-c--rose { --c: var(--lls-rose); } @media (prefers-reduced-motion: no-preference) { .lls-deco--sparkle, .lls-deco--star { animation: lls-twinkle 5.5s ease-in-out infinite; } .lls-deco:nth-child(2n) { animation-delay: -2s; } .lls-deco:nth-child(3n) { animation-delay: -3.6s; } } @keyframes lls-twinkle { 0%, 100% { transform: rotate(var(--r, 0deg)) scale(1); } 50% { transform: rotate(calc(var(--r, 0deg) + 14deg)) scale(.86); } } /* ---------- Base ---------- */ .lls { color: var(--lls-ink); } .lls ::selection { background: var(--lls-yellow); color: var(--lls-ink); } .lls-script { font: 700 clamp(1.5rem, 2.6vw, 1.95rem)/1 var(--lls-script); color: var(--lls-pink-ink); margin: 0 0 .25em; transform: rotate(-2deg); transform-origin: left center; } .lls a:hover { text-decoration-color: var(--lls-pink); } /* Headings: a hand-drawn squiggle under each section title, in turn through her colors. */ .lls .ts-section__title::after, .lls .ts-soon__box h1::after { width: 74px; height: 12px; margin-top: 10px; border-radius: 0; background: var(--sq, var(--lls-pink)); -webkit-mask: var(--lls-art-squiggle) left center / contain no-repeat; mask: var(--lls-art-squiggle) left center / contain no-repeat; } .lls-section--new .ts-section__title { --sq: var(--lls-teal); } .lls-section--subjects .ts-section__title { --sq: var(--lls-orange); } .lls-meet .ts-section__title { --sq: var(--lls-orchid); } .lls .ts-section__title { font-size: clamp(1.75rem, 3.4vw, 2.5rem); } /* Buttons: her pink, round, with a soft colored shadow underneath. */ .lls .ts-btn, .lls.woocommerce-page .woocommerce a.button, .lls .woocommerce button.button, .lls .woocommerce a.button { box-shadow: 0 4px 0 #e2558a; border-color: var(--lls-pink); } .lls .ts-btn:hover, .lls .woocommerce button.button:hover, .lls .woocommerce a.button:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #e2558a; filter: none; background: #fd88b3; } .lls .ts-btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #e2558a; } .lls .ts-btn--ghost { background: #fff; border-color: var(--lls-ink); box-shadow: 0 4px 0 var(--lls-ink); } .lls .ts-btn--ghost:hover { background: var(--lls-yellow-soft); box-shadow: 0 6px 0 var(--lls-ink); } /* ---------- Header ---------- */ .lls .ts-header { position: relative; border-bottom: 0; box-shadow: 0 1px 0 #f3dbe3; } .lls .ts-header::before { content: ""; display: block; height: 7px; background: var(--lls-rainbow); } .lls .ts-header__row { min-height: 88px; } .lls .ts-brand__logo { max-height: 72px; max-width: 260px; } .lls .ts-nav > a, .lls .ts-drop > summary { font-family: var(--ts-font-h); font-weight: 500; font-size: 1.0625rem; letter-spacing: .005em; } .lls .ts-nav > a:nth-child(5n+1):hover { background: var(--lls-pink-soft); } .lls .ts-nav > :nth-child(5n+2):hover > summary, .lls .ts-nav > .ts-drop[open] > summary { background: var(--lls-teal-soft); } .lls .ts-nav > a:nth-child(5n+3):hover { background: var(--lls-yellow-soft); } .lls .ts-nav > a:nth-child(5n+4):hover { background: var(--lls-orchid-soft); } .lls .ts-nav > a:nth-child(5n):hover { background: var(--lls-orange-soft); } .lls .ts-drop__panel { border: 0; border-radius: 20px; padding: 10px; box-shadow: var(--lls-shadow-lift); } .lls .ts-drop__panel a { display: flex; align-items: center; gap: 10px; border-radius: 12px; } .lls .ts-drop__panel a::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lls-pink); flex: none; } .lls .ts-drop__panel a:nth-child(6n+2)::before { background: var(--lls-orange); } .lls .ts-drop__panel a:nth-child(6n+3)::before { background: var(--lls-yellow); } .lls .ts-drop__panel a:nth-child(6n+4)::before { background: var(--lls-teal); } .lls .ts-drop__panel a:nth-child(6n+5)::before { background: var(--lls-orchid); } .lls .ts-drop__panel a:nth-child(6n)::before { background: var(--lls-rose); } .lls .ts-drop__panel a:hover { background: var(--lls-blush); } .lls .ts-search input[type=search] { background: var(--lls-blush); border-color: transparent; } .lls .ts-search input[type=search]:focus { border-color: var(--lls-ink); } .lls .ts-cart { background: var(--lls-pink); border-color: var(--lls-pink); color: var(--lls-ink); padding: 10px 16px; } .lls .ts-cart:hover { box-shadow: 0 4px 0 #e2558a; } .lls .ts-cart__count[data-count="0"] { color: var(--lls-ink); background: rgb(255 255 255 / .6); } .lls .ts-burger { border-color: #f3dbe3; border-radius: 14px; } /* The account button (inc/account.php): a round teal twin of the Cart button. */ .lls .lls-account { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--lls-teal-soft); color: var(--lls-ink); box-shadow: inset 0 0 0 2px var(--lls-teal); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; } .lls .lls-account .ts-icon { width: 22px; height: 22px; } .lls .lls-account:hover, .lls .lls-account[aria-current] { background: var(--lls-teal); box-shadow: 0 4px 0 #5fb9b8; } .lls .lls-account:hover { transform: translateY(-2px); } .lls .lls-account:focus-visible { outline: 2px solid var(--lls-ink); outline-offset: 2px; } /* Free this week: a sunny strip. */ .lls .ts-free { background: var(--lls-yellow); border-bottom: 0; position: relative; } .lls .ts-free__row { justify-content: center; gap: 18px; padding-block: 9px; } .lls .ts-free p { font-size: 1rem; } .lls .ts-free p b { font-family: var(--ts-font-h); font-weight: 600; } .lls .ts-free p::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -3px; background: var(--lls-ink); -webkit-mask: var(--lls-art-sparkle) center / contain no-repeat; mask: var(--lls-art-sparkle) center / contain no-repeat; } .lls .ts-free .ts-pill--go { background: var(--lls-ink); color: #fff; padding: 9px 16px; } .lls .ts-free .ts-pill--go:hover { box-shadow: none; background: #3b2f58; } /* ---------- Home: the top ---------- */ .lls-hero { position: relative; overflow: hidden; isolation: isolate; background-color: var(--lls-blush); background-image: radial-gradient(closest-side, rgb(144 215 214 / .55), transparent) , radial-gradient(closest-side, rgb(254 198 70 / .35), transparent); background-size: 640px 640px, 520px 520px; background-position: right -180px top -220px, left -200px bottom -260px; background-repeat: no-repeat; } /* The dots: full strength at the edges, faint behind the words. */ .lls-hero::before, .lls-pagehead::before, .lls .woocommerce-products-header::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; background: var(--lls-art-confetti) 0 0 / 380px 380px repeat; -webkit-mask: linear-gradient(90deg, rgb(0 0 0 / .9) 0 8%, rgb(0 0 0 / .12) 18% 52%, #000 72%); mask: linear-gradient(90deg, rgb(0 0 0 / .9) 0 8%, rgb(0 0 0 / .12) 18% 52%, #000 72%); } .lls .woocommerce-products-header::after { z-index: -1; inset: 0 -100vmax 0 40%; background-position: 0 0; -webkit-mask: linear-gradient(90deg, transparent, #000 260px); mask: linear-gradient(90deg, transparent, #000 260px); } .lls-hero__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: 40px; padding-block: clamp(48px, 6vw, 84px) clamp(76px, 8vw, 110px); } .lls-hero__title { font-size: clamp(3rem, 6.4vw, 5.1rem); line-height: .98; letter-spacing: 0; margin: 0 0 .32em; font-weight: 600; } /* Her logo's letters: each in turn through her colors, outlined in ink with a little drop, so they read on blush. */ .lls-hero__title--m { font-size: clamp(2.5rem, 4.8vw, 3.9rem); line-height: 1.04; } .lls-hero__title--l { font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.06; } .lls-title { display: block; } .lls-title__ink { color: var(--lls-ink); } /* The one small label above the heading (shown once the heading is her own words). */ .lls-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 7px 14px 7px 10px; border-radius: 999px; background: #fff; box-shadow: 0 1px 0 #f3dbe3, 0 8px 18px -12px rgb(120 40 90 / .4); font: 600 1rem/1 var(--ts-font-h); color: var(--lls-ink); } .lls-eyebrow span { width: 18px; height: 18px; background: var(--lls-pink); -webkit-mask: var(--lls-art-sparkle) center / contain no-repeat; mask: var(--lls-art-sparkle) center / contain no-repeat; } .lls-title__word { display: inline-block; white-space: nowrap; } .lls-l { display: inline-block; color: var(--lc, var(--lls-pink)); -webkit-text-stroke: .085em var(--lls-ink); paint-order: stroke fill; text-shadow: .045em .06em 0 var(--lls-ink); transform: rotate(var(--lr, 0deg)) translateY(var(--ly, 0)); transition: transform .2s cubic-bezier(.2, .8, .2, 1); } .lls-l--0 { --lc: var(--lls-pink); --lr: -3deg; } .lls-l--1 { --lc: var(--lls-orange); --lr: 2deg; --ly: .02em; } .lls-l--2 { --lc: var(--lls-yellow); --lr: -2deg; } .lls-l--3 { --lc: var(--lls-teal); --lr: 3deg; --ly: -.02em; } .lls-l--4 { --lc: var(--lls-orchid); --lr: -1deg; } .lls-l--5 { --lc: var(--lls-rose); --lr: 2deg; --ly: .02em; } .lls-hero__words:hover .lls-l { transform: rotate(0) translateY(-.03em); } .lls-title__last { position: relative; display: inline-block; color: var(--lls-ink); padding-bottom: .12em; } .lls-title__last::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.08em; height: .22em; background: var(--lls-pink); -webkit-mask: var(--lls-art-squiggle) left center / 100% 100% no-repeat; mask: var(--lls-art-squiggle) left center / 100% 100% no-repeat; } .lls-hero__intro { font-size: 1.25rem; line-height: 1.55; color: var(--lls-muted); max-width: 30em; margin: 0 0 .2em; } /* Only managers see this: where her own line goes. */ .lls-slot { max-width: 30em; margin: 0 0 .4em; padding: 12px 16px; border: 2px dashed var(--lls-pink); border-radius: 16px; background: rgb(255 255 255 / .7); font-size: .9375rem; color: var(--lls-muted); } .lls-slot a { font-weight: 700; } /* Plain counts from the store, set out like a row of facts. */ .lls-counts { display: flex; flex-wrap: wrap; gap: 0; margin: 34px 0 0; padding: 22px 0 0; border-top: 2px dashed rgb(42 33 64 / .16); max-width: 34em; } .lls-counts > * { display: grid; gap: 2px; padding: 0 28px 0 0; margin-right: 28px; border-right: 2px solid rgb(42 33 64 / .1); color: var(--lls-ink); text-decoration: none; line-height: 1.1; } .lls-counts > :last-child { border-right: 0; margin-right: 0; padding-right: 0; } .lls-counts b { position: relative; font: 600 2.1rem/1 var(--ts-font-h); } .lls-counts span { font-size: .9375rem; font-weight: 700; color: var(--lls-muted); } .lls-counts b::after { content: ""; display: inline-block; width: .42em; aspect-ratio: 1; margin-left: .12em; vertical-align: .55em; background: var(--lls-pink); -webkit-mask: var(--lls-art-sparkle) center / contain no-repeat; mask: var(--lls-art-sparkle) center / contain no-repeat; } .lls-counts > :nth-child(2) b::after { background: var(--lls-teal); } .lls-counts > :nth-child(3) b::after { background: var(--lls-orange); } .lls-counts a:hover span { color: var(--lls-ink); text-decoration: underline; text-decoration-color: var(--lls-pink); } .lls-hero .ts-hero__cta { gap: 14px; margin-top: 1.4em; } .lls-hero__wave, .lls-band__wave, .lls-pagehead__wave, .lls-footer__wave { position: absolute; left: 0; width: 100%; height: 34px; display: block; pointer-events: none; } .lls-hero__wave, .lls-pagehead__wave { bottom: -1px; fill: #fff; z-index: 1; } /* Her photo in an arch, with a rainbow over it and clouds at its feet. */ .lls-hero__art { --rb: 64px; position: relative; isolation: isolate; justify-self: center; width: min(380px, 100%); margin-top: 64px; } .lls-hero__art::before, .lls-hero__art::after { content: ""; position: absolute; z-index: -1; left: calc(var(--rb) * -1); right: calc(var(--rb) * -1); top: calc(var(--rb) * -1); aspect-ratio: 2 / 1; pointer-events: none; } .lls-hero__art::before { /* the rainbow over her photo */ border-radius: 999px 999px 0 0; background: radial-gradient(circle farthest-side at 50% 100%, transparent 0 69%, var(--lls-orchid) 69% 75.5%, var(--lls-teal) 75.5% 82%, var(--lls-yellow) 82% 88.5%, var(--lls-orange) 88.5% 94.5%, var(--lls-pink) 94.5% 100%); } .lls-hero__art::after { /* a cloud at each foot of the rainbow */ background: #fff; -webkit-mask: var(--lls-art-cloud) left bottom / 30% auto no-repeat, var(--lls-art-cloud) right bottom / 30% auto no-repeat; mask: var(--lls-art-cloud) left bottom / 30% auto no-repeat, var(--lls-art-cloud) right bottom / 30% auto no-repeat; } .lls-arch { position: relative; z-index: 1; margin: 0; aspect-ratio: 4 / 5; border-radius: 999px 999px 34px 34px; overflow: hidden; border: 9px solid #fff; background: var(--lls-pink-soft); box-shadow: var(--lls-shadow-lift); } .lls-arch__img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; display: block; } .lls-decos--portrait { z-index: 3; inset: -20px; } .lls-tag { position: absolute; z-index: 4; left: -64px; top: 4%; display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 16px 10px 10px; border-radius: 18px; background: #fff; box-shadow: var(--lls-shadow-lift); transform: rotate(-4deg); line-height: 1.2; } .lls-tag b { display: block; font: 600 1.2rem/1.1 var(--ts-font-h); } .lls-tag small { display: block; font-size: .8125rem; font-weight: 700; color: var(--lls-muted); } .lls-tag__dot { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--lls-pink); position: relative; } .lls-tag__dot::after { content: ""; position: absolute; inset: 8px; background: #fff; -webkit-mask: var(--lls-art-star) center / contain no-repeat; mask: var(--lls-art-star) center / contain no-repeat; } /* Her three picks as snapshots. The first one she chose is the biggest and in front. */ .lls-snap { position: absolute; z-index: 5; display: block; padding: 7px 7px 22px; background: #fff; border-radius: 12px; box-shadow: var(--lls-shadow-lift); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .lls-snap img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; } .lls-snap::before { content: ""; position: absolute; left: 50%; top: -9px; width: 54px; height: 18px; margin-left: -27px; border-radius: 3px; background: rgb(254 198 70 / .78); transform: rotate(-3deg); } .lls-snap--1 { width: 168px; left: -78px; bottom: -36px; transform: rotate(-7deg); } .lls-snap--2 { width: 128px; right: -70px; top: 30%; transform: rotate(6deg); } .lls-snap--2::before { background: rgb(144 215 214 / .85); } .lls-snap--3 { width: 118px; right: -26px; bottom: -48px; transform: rotate(-3deg); z-index: 4; } .lls-snap--3::before { background: rgb(235 163 213 / .85); } .lls-snap:hover, .lls-snap:focus-visible { transform: rotate(0) scale(1.05); z-index: 6; } /* ---------- Home: sections ---------- */ .lls-section { position: relative; padding-block: clamp(44px, 5.5vw, 72px); } .lls-section .ts-section__head { margin-bottom: 30px; } .lls .ts-more { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 2px solid var(--lls-ink); text-decoration: none; font-size: .9375rem; background: #fff; } .lls .ts-more:hover { background: var(--lls-yellow-soft); } /* Collections: a color each, two covers fanned on top. */ .lls-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; } .lls-tile { --t: var(--lls-pink); --t-soft: var(--lls-pink-soft); position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 290px; padding: 18px 18px 20px; border-radius: var(--lls-radius); background: var(--t-soft); color: var(--lls-ink); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; } .lls-tile::before { content: ""; position: absolute; z-index: -1; width: 210px; aspect-ratio: 1; right: -60px; top: -70px; border-radius: 50%; background: var(--t); opacity: .55; } .lls-tile::after { content: ""; position: absolute; z-index: -1; width: 26px; aspect-ratio: 1; left: 16px; top: 18px; background: var(--t); -webkit-mask: var(--lls-art-sparkle) center / contain no-repeat; mask: var(--lls-art-sparkle) center / contain no-repeat; } .lls-tile--1 { --t: var(--lls-orange); --t-soft: var(--lls-orange-soft); } .lls-tile--2 { --t: var(--lls-yellow); --t-soft: var(--lls-yellow-soft); } .lls-tile--3 { --t: var(--lls-teal); --t-soft: var(--lls-teal-soft); } .lls-tile--4 { --t: var(--lls-orchid); --t-soft: var(--lls-orchid-soft); } .lls-tile--5 { --t: var(--lls-rose); --t-soft: var(--lls-blush); } .lls-tile__pics { position: relative; display: block; height: 150px; margin-top: 8px; } .lls-tile__pic { position: absolute; top: 0; left: 50%; width: 118px; aspect-ratio: 1; object-fit: cover; border: 5px solid #fff; border-radius: 14px; background: #fff; box-shadow: 0 10px 22px -10px rgb(42 33 64 / .45); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .lls-tile__pic--1 { transform: translateX(-74%) rotate(-8deg); z-index: 2; } .lls-tile__pic--2 { transform: translateX(-22%) translateY(14px) rotate(7deg); z-index: 1; } .lls-tile__pic--1:only-child { transform: translateX(-50%) rotate(-4deg); } .lls-tile__words { display: grid; gap: 10px; justify-items: start; } .lls-tile b { font: 600 1.5rem/1.1 var(--ts-font-h); } .lls-tile__count { font: 700 .8125rem/1 var(--ts-font-b); padding: 7px 12px; border-radius: 999px; background: #fff; } .lls-tile__count::after { content: " \2192"; } .lls-tile:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--lls-shadow-lift); } .lls-tile:hover .lls-tile__pic--1 { transform: translateX(-84%) rotate(-12deg) translateY(-4px); } .lls-tile:hover .lls-tile__pic--2 { transform: translateX(-12%) translateY(8px) rotate(11deg); } /* Subjects: a teal band with a wavy top. */ .lls-section--subjects { background: var(--lls-teal-soft); margin-top: 34px; } .lls-band__wave { top: -33px; fill: var(--lls-teal-soft); transform: scaleX(-1); } .lls-chips { gap: 10px; } .lls .lls-chips .ts-chip { --cb: var(--lls-pink); border: 2px solid var(--cb); color: var(--lls-ink); background: #fff; font-weight: 700; } .lls .lls-chips .lls-chip--1 { --cb: var(--lls-orange); } .lls .lls-chips .lls-chip--2 { --cb: var(--lls-yellow); } .lls .lls-chips .lls-chip--3 { --cb: #6cc4c3; } .lls .lls-chips .lls-chip--4 { --cb: var(--lls-orchid); } .lls .lls-chips .lls-chip--5 { --cb: var(--lls-rose); } .lls .lls-chips .ts-chip:hover { background: var(--cb); border-color: var(--cb); } .lls .lls-chips .ts-chip--toggle { border-color: var(--lls-ink); border-style: dashed; } /* Who makes these: her photo in a rainbow ring. */ .lls-meet { background: #fff; } .lls-meet__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; } .lls-ring { position: relative; margin: 0; padding: 14px; border-radius: 50%; aspect-ratio: 1; background: conic-gradient(from -30deg, var(--lls-pink), var(--lls-orange), var(--lls-yellow), var(--lls-teal), var(--lls-orchid), var(--lls-rose), var(--lls-pink)); box-shadow: var(--lls-shadow-lift); } .lls-ring__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 20%; border: 8px solid #fff; display: block; } .lls-meet__words { max-width: 40em; } .lls-meet__words p { font-size: 1.125rem; line-height: 1.65; } .lls-meet__words .lls-script { font-size: clamp(1.7rem, 3vw, 2.2rem); } /* ---------- Product cards (home, shop, related) ---------- */ .lls ul.products { gap: 24px; } .lls ul.products li.product { border: 0; border-radius: 22px; box-shadow: var(--lls-shadow); } .lls ul.products li.product:hover { transform: translateY(-4px); box-shadow: var(--lls-shadow-lift); } .lls .ts-card__cover { background: var(--lls-blush); } .lls ul.products li.product:nth-child(5n+2) .ts-card__cover { background: var(--lls-teal-soft); } .lls ul.products li.product:nth-child(5n+3) .ts-card__cover { background: var(--lls-yellow-soft); } .lls ul.products li.product:nth-child(5n+4) .ts-card__cover { background: var(--lls-orchid-soft); } .lls ul.products li.product:nth-child(5n) .ts-card__cover { background: var(--lls-orange-soft); } .lls .ts-card__body { padding: 14px 16px 16px; } .lls .ts-card__grade { background: var(--lls-pink-soft); } .lls .ts-card__title { font-family: var(--ts-font-b); font-weight: 800; } .lls .ts-badge { background: var(--lls-yellow); color: var(--lls-ink); box-shadow: 0 0 0 3px #fff; font-size: .78rem; padding: 7px 11px; transform: rotate(-4deg); } .lls ul.products li.product .button, .lls ul.products li.product .added_to_cart { border: 2px solid var(--lls-pink); background: #fff; box-shadow: none; } .lls ul.products li.product .button:hover { background: var(--lls-pink); box-shadow: none; transform: none; } /* After "Add": WooCommerce hides the button and shows its "View cart" link in its place. */ .lls ul.products li.product .added_to_cart { background: var(--lls-ink); border-color: var(--lls-ink); color: #fff; padding: 8px 14px; } .lls ul.products li.product .added_to_cart:hover { background: #3b2f58; color: #fff; text-decoration: none; } /* The label above the title: her collections, each in its home-page tile color. */ .lls-pills { display: flex; flex-wrap: wrap; gap: 5px; } .lls .ts-card__grade.lls-pill { --p: var(--lls-pink-soft); --pb: #f7c3d6; background: var(--p); box-shadow: inset 0 0 0 1.5px var(--pb); font-weight: 800; letter-spacing: .01em; } .lls .ts-card__grade.lls-pill--1 { --p: var(--lls-orange-soft); --pb: #fbd1ae; } .lls .ts-card__grade.lls-pill--2 { --p: var(--lls-yellow-soft); --pb: #f8de94; } .lls .ts-card__grade.lls-pill--3 { --p: var(--lls-teal-soft); --pb: #afdedd; } .lls .ts-card__grade.lls-pill--4 { --p: var(--lls-orchid-soft); --pb: #efc6e2; } .lls .ts-card__grade.lls-pill--5 { --p: var(--lls-blush); --pb: #fbcbd6; } .lls .ts-card__grade.lls-pill--subject { background: #fff; box-shadow: inset 0 0 0 1.5px #e4d6dd; color: var(--lls-muted); font-weight: 700; } /* ---------- Page headings (About me, Contact, cart, checkout, policies) ---------- */ .lls-page.ts-main--page, .lls-page.ts-main--till { padding-top: 0; } .lls-pagehead { position: relative; overflow: hidden; isolation: isolate; margin-bottom: clamp(30px, 4vw, 48px); padding-block: clamp(40px, 5vw, 64px) clamp(56px, 6vw, 80px); background: var(--lls-blush); } .lls-pagehead .ts-wrap { position: relative; z-index: 1; } .lls-pagehead .ts-page-title { margin: 0; font-size: clamp(2.2rem, 5vw, 3.4rem); } .lls-pagehead .ts-page-title::after { content: ""; display: block; width: 92px; height: 14px; margin-top: 12px; background: var(--lls-pink); -webkit-mask: var(--lls-art-squiggle) left center / contain no-repeat; mask: var(--lls-art-squiggle) left center / contain no-repeat; } /* About me: her photo in the arch beside her words. */ .lls .ts-main--page .lls-about.ts-prose > .wp-block-post-content { max-width: 1080px; } .lls-about .wp-block-post-content { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 0 clamp(36px, 6vw, 80px); align-items: start; } .lls .lls-about .wp-block-post-content > * { grid-column: 2; max-width: 40em; } .lls .lls-about .wp-block-post-content > .wp-block-image:first-child { grid-column: 1; grid-row: 1 / span 40; max-width: none; margin: 0 0 32px; position: relative; } .lls-about .wp-block-post-content > .wp-block-image:first-child img { width: 100% !important; aspect-ratio: 4 / 5; object-fit: cover; object-position: center 22%; border-radius: 999px 999px 34px 34px; border: 9px solid #fff; box-shadow: var(--lls-shadow-lift); background: var(--lls-pink-soft); } .lls-about .wp-block-post-content > .wp-block-image:first-child::before { content: ""; position: absolute; z-index: -1; inset: -16px -16px auto -16px; aspect-ratio: 2 / 1; border-radius: 999px 999px 0 0; background: radial-gradient(circle farthest-side at 50% 100%, transparent 0 80%, var(--lls-teal) 80% 87%, var(--lls-yellow) 87% 93.5%, var(--lls-pink) 93.5% 100%); } .lls-about .wp-block-post-content > .wp-block-image:first-child::after { content: ""; position: absolute; right: -14px; top: 6%; width: 40px; aspect-ratio: 1; background: var(--lls-yellow); -webkit-mask: var(--lls-art-sparkle) center / contain no-repeat; mask: var(--lls-art-sparkle) center / contain no-repeat; } .lls-about .wp-block-post-content > p { font-size: 1.1875rem; line-height: 1.7; } .lls-page--about .lls-about { padding-bottom: 24px; } /* ---------- Shop and collection pages ---------- */ .lls .ts-main--shop { padding-top: 0; } .lls .ts-main--shop > .woocommerce, .lls .ts-main--shop .ts-wrap:first-child { position: relative; } .lls .ts-main--shop { overflow-x: clip; } .lls .woocommerce-products-header { position: relative; isolation: isolate; margin: 0 0 28px; padding-block: clamp(30px, 4vw, 48px) clamp(34px, 4vw, 52px); } /* The blush band runs the full width of the screen behind the heading; the page clips it at the edges. */ .lls .woocommerce-products-header::before { content: ""; position: absolute; z-index: -2; inset: 0 -100vmax; background: var(--lls-blush); } .lls .woocommerce-products-header__title { margin-bottom: 0; font-size: clamp(2.2rem, 5vw, 3.2rem); } .lls .woocommerce-products-header__title::after { content: ""; display: block; width: 92px; height: 14px; margin-top: 12px; background: var(--lls-teal); -webkit-mask: var(--lls-art-squiggle) left center / contain no-repeat; mask: var(--lls-art-squiggle) left center / contain no-repeat; } .lls .woocommerce-products-header .term-description { margin-top: 14px; color: var(--lls-muted); } .lls .ts-filters { background: #fff; border: 2px solid var(--lls-pink-soft); border-radius: 22px; box-shadow: var(--lls-shadow); } .lls .ts-filters__group + .ts-filters__group { border-top-color: var(--lls-pink-soft); } .lls .ts-filters__label { color: var(--lls-pink-ink); } .lls .ts-chip { border-color: #ecd5de; color: var(--lls-ink); } .lls .ts-chip:hover { border-color: var(--lls-pink); background: var(--lls-blush); } .lls .ts-chip.is-on { background: var(--lls-pink); border-color: var(--lls-pink); color: var(--lls-ink); } .lls .woocommerce-pagination .current { background: var(--lls-pink); border-color: var(--lls-pink); color: var(--lls-ink); } .lls .woocommerce-pagination a:hover { border-color: var(--lls-pink); background: var(--lls-blush); } /* ---------- Shop by month (inc/months.php): her pocket chart ---------- * Teal "fabric" with a card per month slid into a clear pocket; this month * wears a Now tag; on a month's own page its card is pulled up in its color. */ .lls-months { position: relative; margin: 0 0 34px; } .lls-months .ts-section__head { margin-bottom: 18px; } .lls-months .ts-section__title { --sq: var(--lls-orange); } .lls-pockets { padding: 14px 16px 18px; border-radius: var(--lls-radius); background: var(--lls-teal-soft); box-shadow: inset 0 -8px 0 rgb(144 215 214 / .4); } .lls-pockets__row { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 10px; } .lls-pocket { --p: var(--lls-pink); --p-soft: var(--lls-pink-soft); position: relative; display: block; padding-top: 12px; color: var(--lls-ink); text-decoration: none; } .lls-pocket--1 { --p: var(--lls-orange); --p-soft: var(--lls-orange-soft); } .lls-pocket--2 { --p: var(--lls-yellow); --p-soft: var(--lls-yellow-soft); } .lls-pocket--3 { --p: var(--lls-orchid); --p-soft: var(--lls-orchid-soft); } .lls-pocket--4 { --p: var(--lls-rose); --p-soft: var(--lls-blush); } .lls-pocket__card { position: relative; display: grid; justify-items: center; gap: 4px; padding: 14px 4px 12px; border-top: 8px solid var(--p); border-radius: 14px 14px 10px 10px; background: #fff; box-shadow: 0 6px 14px -10px rgb(42 33 64 / .45); transition: transform .2s cubic-bezier(.2, .8, .2, 1), background .2s ease; } /* The clear pocket across the lower half of each card. */ .lls-pocket__card::after { content: ""; position: absolute; left: -5px; right: -5px; bottom: -5px; height: 50%; border-radius: 6px; background: rgb(255 255 255 / .5); box-shadow: inset 0 1.5px 0 rgb(255 255 255 / .95), 0 1px 0 rgb(42 33 64 / .1); pointer-events: none; } .lls-pocket b { font: 600 1.45rem/1 var(--ts-font-h); } .lls-pocket small { position: relative; z-index: 1; font-size: .8125rem; font-weight: 800; color: var(--lls-muted); } .lls-pocket:hover .lls-pocket__card, .lls-pocket:focus-visible .lls-pocket__card { transform: translateY(-6px) rotate(-2deg); } .lls-pocket:nth-child(2n):hover .lls-pocket__card { transform: translateY(-6px) rotate(2deg); } .lls-pocket:focus-visible { outline: none; } .lls-pocket:focus-visible .lls-pocket__card { outline: 2px solid var(--lls-ink); outline-offset: 2px; } .lls-pocket.is-now .lls-pocket__card { background: var(--p-soft); } .lls-pocket__now { position: absolute; z-index: 2; top: -14px; left: 50%; padding: 3px 8px; border-radius: 999px; background: var(--lls-ink); color: #fff; font: 800 .6875rem/1.2 var(--ts-font-b); font-style: normal; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; transform: translateX(-50%) rotate(-4deg); } .lls-pocket[aria-current] .lls-pocket__card { background: var(--p); transform: translateY(-6px); box-shadow: var(--lls-shadow-lift); } .lls-pocket[aria-current] small { color: var(--lls-ink); } .lls-month-shelf { margin-top: 32px; } .lls-month-shelf .ts-section__title { --sq: var(--lls-pink); font-size: clamp(1.5rem, 2.8vw, 2.1rem); } .lls-months--picked { margin-top: -4px; } /* A full-width teal band right under the pink Shop heading (Eric, 2026-10-17: "put it in a bigger color background above the main shop"). */ .lls .lls-months--band { isolation: isolate; margin: -28px 0 36px; padding-block: 30px 40px; } .lls .lls-months--band::before { content: ""; position: absolute; z-index: -1; inset: 0 -100vmax; background: var(--lls-teal-soft); } .lls .lls-months--band::after { content: ""; position: absolute; z-index: -1; inset: 0 -100vmax; background: var(--lls-art-confetti) 0 0 / 380px 380px repeat; opacity: .35; -webkit-mask: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); mask: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000); } .lls .lls-months--band .lls-pockets { background: #c7ebe9; box-shadow: inset 0 -8px 0 rgb(108 196 195 / .35); } .lls .lls-months--band .lls-month-shelf { margin-top: 30px; } .lls .lls-months--band .lls-month-shelf .ts-section__title::after { background: var(--lls-pink); } .lls .lls-months--band .ts-more { background: #fff; } .lls .lls-months--band.lls-months--picked { padding-bottom: 30px; } @media (max-width: 860px) { /* One row that scrolls sideways, edge to edge. */ .lls-pockets { margin-inline: calc(var(--ts-gutter, 16px) * -1); padding: 8px 0 14px; border-radius: 0; } .lls-pockets__row { display: flex; gap: 8px; overflow-x: auto; padding: 4px var(--ts-gutter, 16px) 6px; scroll-snap-type: x proximity; scroll-padding-inline: var(--ts-gutter, 16px); scrollbar-width: none; } .lls-pockets__row::-webkit-scrollbar { display: none; } .lls-pocket { flex: 0 0 72px; scroll-snap-align: start; } .lls .lls-months--band { margin-top: -20px; padding-block: 18px 28px; } .lls .lls-months--band .lls-pockets { background: transparent; box-shadow: none; } .lls-pocket b { font-size: 1.3rem; } } /* ---------- Product page ---------- */ .lls .ts-crumbs { font-size: .9rem; } .lls .ts-gallery__main { border: 0; border-radius: 28px; background: var(--lls-blush); box-shadow: var(--lls-shadow); } .lls .ts-gallery__thumb { border-radius: 14px; border-color: transparent; background: var(--lls-blush); } .lls .ts-gallery__thumb.is-on { border-color: var(--lls-pink); } .lls div.product .summary { position: relative; padding: clamp(22px, 3vw, 32px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 2px var(--lls-pink-soft); } .lls div.product .summary::before { content: ""; position: absolute; right: 22px; top: -16px; width: 34px; aspect-ratio: 1; background: var(--lls-yellow); -webkit-mask: var(--lls-art-star) center / contain no-repeat; mask: var(--lls-art-star) center / contain no-repeat; transform: rotate(12deg); } .lls .ts-product__title { font-size: clamp(1.7rem, 3vw, 2.3rem); } .lls .ts-product__price { font-family: var(--ts-font-h); font-weight: 600; font-size: 2rem; } .lls .ts-product__price ins { background: linear-gradient(transparent 62%, var(--lls-yellow) 62% 92%, transparent 92%); padding: 0 .08em; } .lls div.product form.cart .single_add_to_cart_button { font-size: 1.125rem; } .lls .ts-facts { border-top-color: var(--lls-pink-soft); } .lls .ts-facts > div { border-bottom-color: var(--lls-pink-soft); } .lls .ts-details { border-top: 0; } .lls .ts-details__box { background: var(--lls-teal-soft); border-radius: 26px; position: relative; } .lls .ts-details__box::after { content: ""; position: absolute; right: 18px; top: 18px; width: 26px; aspect-ratio: 1; background: var(--lls-teal); -webkit-mask: var(--lls-art-sparkle) center / contain no-repeat; mask: var(--lls-art-sparkle) center / contain no-repeat; } .lls .ts-ticks .ts-icon { background: var(--lls-teal); color: var(--lls-ink); } .lls .related { border-top: 0; position: relative; } .lls .related > h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); } .lls .related > h2::after { content: ""; display: block; width: 74px; height: 12px; margin-top: 10px; background: var(--lls-orchid); -webkit-mask: var(--lls-art-squiggle) left center / contain no-repeat; mask: var(--lls-art-squiggle) left center / contain no-repeat; } /* ---------- Cart and checkout ---------- */ .lls .ts-main--till .woocommerce table.shop_table { border: 0; border-radius: 22px; box-shadow: 0 0 0 2px var(--lls-pink-soft); } .lls .ts-main--till .woocommerce table.shop_table thead th { background: var(--lls-blush); color: var(--lls-pink-ink); } .lls .ts-main--till .woocommerce table.shop_table th, .lls .ts-main--till .woocommerce table.shop_table td { border-top-color: var(--lls-pink-soft); } .lls .ts-main--till .woocommerce-cart-form .product-thumbnail img { border-radius: 12px; } .lls .ts-main--till .cart-collaterals .cart_totals, .lls .ts-main--till .woocommerce-checkout-review-order { background: var(--lls-blush); border-radius: 26px; } .lls .ts-main--till #payment { border: 0; border-radius: 18px; box-shadow: 0 0 0 2px var(--lls-pink-soft); } .lls .ts-main--till #payment div.payment_box { background: var(--lls-teal-soft); } .lls .ts-main--till #payment div.payment_box::before { border-bottom-color: var(--lls-teal-soft); } .lls .ts-main--till .woocommerce-thankyou-order-received { background: var(--lls-yellow-soft); border-left-color: var(--lls-yellow); } .lls .woocommerce-message, .lls .woocommerce-info, .lls .ts-note { border: 0; border-radius: 18px; background: var(--lls-blush); border-left: 6px solid var(--lls-pink); } .lls .woocommerce form .form-row input.input-text, .lls .woocommerce form .form-row textarea, .lls .ts-form input[type=text], .lls .ts-form input[type=email], .lls .ts-form textarea { border-radius: 14px; border-color: #e4cfd8; } .lls .woocommerce-cart .cart-empty, .lls .cart-empty.woocommerce-info { font-size: 1.1rem; } /* Checkout's two boxes (terms, "Email me"): box on the left, its words beside it, wrapping under the words, not under the box. */ .lls .woocommerce form .form-row.ts-optin label.checkbox, .lls .woocommerce .woocommerce-terms-and-conditions-wrapper label.checkbox { position: relative; display: block; margin: 0; padding-left: 30px; font-weight: 700; line-height: 1.4; } .lls .woocommerce form .form-row.ts-optin label.checkbox input, .lls .woocommerce .woocommerce-terms-and-conditions-wrapper label.checkbox input { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; accent-color: var(--lls-pink); } .lls .woocommerce .woocommerce-terms-and-conditions-wrapper .form-row { margin-bottom: 12px; } /* WooCommerce's own notice banners (added to cart, returning customer, coupon). */ .lls .wc-block-components-notice-banner { border: 0; border-radius: 18px; background: var(--lls-blush); color: var(--lls-ink); box-shadow: inset 0 0 0 2px var(--lls-pink-soft); padding: 14px 18px; align-items: center; } .lls .wc-block-components-notice-banner > svg { background: var(--lls-pink); fill: var(--lls-ink); border-radius: 50%; } .lls .wc-block-components-notice-banner.is-success { background: var(--lls-teal-soft); box-shadow: inset 0 0 0 2px #bfe7e6; } .lls .wc-block-components-notice-banner.is-success > svg { background: var(--lls-teal); } .lls .wc-block-components-notice-banner.is-error { background: #fdf0ef; box-shadow: inset 0 0 0 2px #f3c7c3; } .lls .wc-block-components-notice-banner.is-error > svg { background: #b3261e; fill: #fff; } .lls .wc-block-components-notice-banner a { color: var(--lls-ink); font-weight: 700; } .lls .wc-block-components-notice-banner .button.wc-forward { background: #fff; border: 2px solid var(--lls-ink); box-shadow: none; padding: 6px 14px; text-decoration: none; } /* ---------- My account (inc/account.php, templates/page-my-account.html) ---------- */ .lls-page--account { --lls-i-dashboard: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 11.5 12 5l8 6.5V20h-5.5v-5h-5v5H4z'/%3E%3C/svg%3E"); --lls-i-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8h14l-1 12H6z'/%3E%3Cpath d='M9 8V6.5a3 3 0 0 1 6 0V8'/%3E%3C/svg%3E"); --lls-i-downloads: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10m0 0-4-4m4 4 4-4'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); --lls-i-payment-methods: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2.5'/%3E%3Cpath d='M3 10.5h18M7 14.5h3'/%3E%3C/svg%3E"); --lls-i-edit-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.5' r='3.6'/%3E%3Cpath d='M4.8 20c.9-3.6 3.8-5.6 7.2-5.6s6.3 2 7.2 5.6'/%3E%3C/svg%3E"); --lls-i-edit-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6-5.4-6-10.5a6 6 0 0 1 12 0C18 15.6 12 21 12 21z'/%3E%3Ccircle cx='12' cy='10.5' r='2'/%3E%3C/svg%3E"); --lls-i-customer-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 5h4a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1h-4M10 8l-4 4 4 4M6 12h9'/%3E%3C/svg%3E"); } .lls-page--account [class*="--dashboard"] { --i: var(--lls-i-dashboard); } .lls-page--account [class*="--orders"] { --i: var(--lls-i-orders); } .lls-page--account [class*="--downloads"] { --i: var(--lls-i-downloads); } .lls-page--account [class*="--payment-methods"] { --i: var(--lls-i-payment-methods); } .lls-page--account [class*="--edit-account"] { --i: var(--lls-i-edit-account); } .lls-page--account [class*="--edit-address"] { --i: var(--lls-i-edit-address); } .lls-page--account [class*="--customer-logout"] { --i: var(--lls-i-customer-logout); } /* Signed in: the account's menu in a blush panel on the left, the page on the right. */ .lls.logged-in .lls-page--account .woocommerce { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 clamp(28px, 4vw, 52px); align-items: start; } .lls.logged-in .lls-page--account .woocommerce > :not(.woocommerce-MyAccount-navigation):not(.woocommerce-MyAccount-content) { grid-column: 1 / -1; } /* WooCommerce's clearfix would take the first grid cell. */ .lls.logged-in .lls-page--account .woocommerce::before, .lls.logged-in .lls-page--account .woocommerce::after { content: none; display: none; } .lls .lls-page--account .woocommerce-MyAccount-navigation { position: sticky; top: 24px; margin: 0; padding: 12px; border-radius: var(--lls-radius); background: var(--lls-blush); } .lls .lls-page--account .woocommerce-MyAccount-navigation ul { display: grid; gap: 4px; } .lls .lls-page--account .woocommerce-MyAccount-navigation li { margin: 0; padding: 0; } .lls .lls-page--account .woocommerce-MyAccount-navigation a { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: 16px; font: 600 1.0625rem/1.15 var(--ts-font-h); color: var(--lls-ink); text-decoration: none; transition: background .15s ease; } .lls .lls-page--account .woocommerce-MyAccount-navigation a::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--lls-pink); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .lls .lls-page--account .woocommerce-MyAccount-navigation li:nth-child(5n+2) a::before { background: var(--lls-orange); } .lls .lls-page--account .woocommerce-MyAccount-navigation li:nth-child(5n+3) a::before { background: #6cc4c3; } .lls .lls-page--account .woocommerce-MyAccount-navigation li:nth-child(5n+4) a::before { background: var(--lls-orchid); } .lls .lls-page--account .woocommerce-MyAccount-navigation li:nth-child(5n) a::before { background: #f5b52a; } .lls .lls-page--account .woocommerce-MyAccount-navigation a:hover { background: rgb(255 255 255 / .7); } .lls .lls-page--account .woocommerce-MyAccount-navigation .is-active a { text-decoration: none; background: #fff; color: var(--lls-ink); box-shadow: 0 1px 0 #f3dbe3, 0 10px 20px -14px rgb(120 40 90 / .5); } .lls .lls-page--account .woocommerce-MyAccount-navigation-link--customer-logout { margin-top: 4px; padding-top: 6px; border-top: 2px dashed rgb(42 33 64 / .12); } .lls .lls-page--account .woocommerce-MyAccount-navigation-link--customer-logout a { font-size: .9688rem; color: var(--lls-muted); } .lls .lls-page--account .woocommerce-MyAccount-navigation-link--customer-logout a::before { background: var(--lls-muted); } .lls .lls-page--account .woocommerce-MyAccount-content { min-width: 0; font-size: 1.0625rem; } .lls .lls-page--account .woocommerce-MyAccount-content > :first-child, .lls .lls-page--account .woocommerce-MyAccount-content > .woocommerce-notices-wrapper:first-child + * { margin-top: 0; } .lls .lls-page--account .woocommerce-MyAccount-content h2, .lls .lls-page--account .woocommerce-MyAccount-content h3 { font-size: 1.45rem; margin: 1.4em 0 .6em; } .lls .lls-page--account .woocommerce-MyAccount-content .wc-block-components-notice-banner + .button, .lls .lls-page--account .woocommerce-MyAccount-content .woocommerce-info + .button { margin-top: 14px; } /* The account's front page: WooCommerce's hello, bigger, then the tiles. */ .lls.woocommerce-dashboard .woocommerce-MyAccount-content > p:first-of-type { font: 600 clamp(1.4rem, 2.4vw, 1.75rem)/1.25 var(--ts-font-h); margin-bottom: .5em; } .lls.woocommerce-dashboard .woocommerce-MyAccount-content > p:first-of-type a { font: 700 1rem/1 var(--ts-font-b); margin-left: 4px; } .lls.woocommerce-dashboard .woocommerce-MyAccount-content > p { color: var(--lls-muted); max-width: 36em; } .lls-acct-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 640px; margin-top: 28px; } .lls-acct-tile { --t: var(--lls-pink); --t-soft: var(--lls-pink-soft); position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 140px; padding: 18px; border-radius: 22px; background: var(--t-soft); color: var(--lls-ink); text-decoration: none; overflow: hidden; isolation: isolate; transition: transform .2s ease, box-shadow .2s ease; } .lls-acct-tile::before { content: ""; position: absolute; z-index: -1; width: 130px; aspect-ratio: 1; right: -44px; bottom: -54px; border-radius: 50%; background: var(--t); opacity: .5; } .lls-acct-tile--1 { --t: var(--lls-orange); --t-soft: var(--lls-orange-soft); } .lls-acct-tile--2 { --t: var(--lls-teal); --t-soft: var(--lls-teal-soft); } .lls-acct-tile--3 { --t: var(--lls-orchid); --t-soft: var(--lls-orchid-soft); } .lls-acct-tile--4 { --t: var(--lls-yellow); --t-soft: var(--lls-yellow-soft); } .lls-acct-tile__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #fff; box-shadow: 0 6px 14px -8px rgb(42 33 64 / .4); } .lls-acct-tile__icon::before { content: ""; width: 24px; height: 24px; background: var(--lls-ink); -webkit-mask: var(--i) center / contain no-repeat; mask: var(--i) center / contain no-repeat; } .lls-acct-tile b { font: 600 1.25rem/1.15 var(--ts-font-h); } .lls-acct-tile b::after { content: " \2192"; } .lls-acct-tile:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: var(--lls-shadow-lift); } /* Orders and downloads: WooCommerce's tables, with small buttons in her pink outline. */ .lls .lls-page--account .woocommerce-MyAccount-content table.shop_table { margin-top: 0; } .lls .lls-page--account .woocommerce-MyAccount-content table.shop_table .button { padding: 8px 14px; font-size: .9375rem; background: #fff; border: 2px solid var(--lls-pink); box-shadow: none; color: var(--lls-ink); } .lls .lls-page--account .woocommerce-MyAccount-content table.shop_table .button:hover { background: var(--lls-pink); transform: none; } .lls .lls-page--account .woocommerce-MyAccount-content table.shop_table .woocommerce-MyAccount-downloads-file { display: inline-flex; align-items: center; gap: 8px; background: var(--lls-pink); border-color: var(--lls-pink); box-shadow: 0 4px 0 #e2558a; text-align: left; } .lls .lls-page--account .woocommerce-MyAccount-content table.shop_table .woocommerce-MyAccount-downloads-file::before { content: ""; flex: none; width: 18px; height: 18px; background: var(--lls-ink); -webkit-mask: var(--lls-i-downloads) center / contain no-repeat; mask: var(--lls-i-downloads) center / contain no-repeat; } .lls .lls-page--account .woocommerce-MyAccount-content table.shop_table .woocommerce-MyAccount-downloads-file:hover { background: #fd88b3; box-shadow: 0 6px 0 #e2558a; transform: translateY(-2px); } .lls .lls-page--account .woocommerce-MyAccount-content .woocommerce-pagination { margin-top: 18px; } /* Account details: the password part in its own rounded box. */ .lls .lls-page--account .woocommerce-EditAccountForm fieldset { margin: 26px 0 18px; padding: 16px 20px 4px; border: 2px solid var(--lls-pink-soft); border-radius: 22px; } .lls .lls-page--account .woocommerce-EditAccountForm legend { padding: 0 8px; font: 600 1.2rem/1 var(--ts-font-h); } .lls .lls-page--account .woocommerce-EditAccountForm em { display: block; margin-top: 6px; font-size: .9375rem; color: var(--lls-muted); } /* Signed out: the sign-in (and lost password) form as one card in the middle. */ .lls:not(.logged-in) .lls-page--account .woocommerce { max-width: 520px; margin-inline: auto; } .lls:not(.logged-in) .lls-page--account .woocommerce > h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 0 0 16px; } .lls .lls-page--account form.login, .lls .lls-page--account form.register, .lls .lls-page--account form.lost_reset_password { position: relative; max-width: none; margin: 0; padding: clamp(22px, 4vw, 32px); border: 0; border-radius: 28px; background: #fff; box-shadow: 0 0 0 2px var(--lls-pink-soft), var(--lls-shadow); } .lls .lls-page--account form.login::before, .lls .lls-page--account form.lost_reset_password::before { content: ""; position: absolute; right: 22px; top: -16px; width: 34px; aspect-ratio: 1; background: var(--lls-yellow); -webkit-mask: var(--lls-art-star) center / contain no-repeat; mask: var(--lls-art-star) center / contain no-repeat; transform: rotate(12deg); } .lls .lls-page--account form.login .form-row:has(> .woocommerce-form-login__submit) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .lls .lls-page--account form.login .form-row:has(> .woocommerce-form-login__submit)::before, .lls .lls-page--account form.login .form-row:has(> .woocommerce-form-login__submit)::after { content: none; display: none; } .lls .lls-page--account .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; order: 2; } .lls .lls-page--account .woocommerce-form-login__rememberme input { width: 18px; height: 18px; margin: 0; accent-color: var(--lls-pink); } .lls .lls-page--account .woocommerce-form-login__submit { float: none; margin: 0; padding-inline: 30px; order: 1; } .lls .lls-page--account .woocommerce-LostPassword { margin: 14px 0 0; font-weight: 700; } .lls .lls-page--account .woocommerce-LostPassword a, .lls .lls-page--account form.login a { color: var(--lls-pink-ink); } @media (max-width: 860px) { .lls.logged-in .lls-page--account .woocommerce { grid-template-columns: 1fr; } .lls .lls-page--account .woocommerce-MyAccount-navigation { position: static; margin-bottom: 24px; padding: 8px; border-radius: 22px; } .lls .lls-page--account .woocommerce-MyAccount-navigation ul { grid-template-columns: 1fr 1fr; } .lls .lls-page--account .woocommerce-MyAccount-navigation a { padding: 10px 12px; gap: 9px; font-size: 1rem; } .lls .lls-page--account .woocommerce-MyAccount-navigation-link--customer-logout { grid-column: 1 / -1; } .lls-acct-tiles { grid-template-columns: 1fr 1fr; gap: 10px; } .lls-acct-tile { min-height: 118px; padding: 14px; gap: 14px; } .lls-acct-tile b { font-size: 1.1rem; } } /* ---------- Slide-out cart (inc/cart.php) ---------- */ .lls-noscroll, .lls-noscroll body { overflow: hidden; } .lls-drawer { position: fixed; inset: 0; z-index: 100000; } .lls-drawer[hidden] { display: none; } .lls-drawer__shade { position: absolute; inset: 0; background: rgb(42 33 64 / .42); opacity: 0; transition: opacity .28s ease; } .lls-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); display: flex; flex-direction: column; overflow: hidden; background: #fff; box-shadow: -18px 0 50px -20px rgb(42 33 64 / .5); transform: translateX(104%); transition: transform .3s cubic-bezier(.2, .8, .2, 1); outline: none; } .lls-drawer__panel::before { content: ""; flex: none; height: 7px; background: var(--lls-rainbow); } .lls-drawer.is-open .lls-drawer__shade { opacity: 1; } .lls-drawer.is-open .lls-drawer__panel { transform: none; } .lls-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px 14px; background: var(--lls-blush); } .lls-drawer__head h2 { margin: 0; font-size: 1.6rem; } .lls-drawer__close { display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #fff; color: var(--lls-ink); cursor: pointer; box-shadow: 0 1px 0 #f3dbe3; } .lls-drawer__close:hover { background: var(--lls-pink); } .lls-drawer__body { position: relative; z-index: 1; flex: 1; overflow-y: auto; padding: 8px 20px 20px; } .lls-drawer .lls-decos { z-index: 0; } .lls-drawer .widget_shopping_cart_content:empty::before { content: ""; display: block; height: 120px; margin-top: 18px; border-radius: 18px; background: linear-gradient(90deg, var(--lls-blush), #fff, var(--lls-blush)); background-size: 200% 100%; animation: lls-wait 1.2s linear infinite; } @keyframes lls-wait { to { background-position: -200% 0; } } .lls-drawer ul.woocommerce-mini-cart { list-style: none; margin: 0; padding: 0; } .lls-drawer .woocommerce-mini-cart-item { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; align-items: start; padding: 16px 34px 16px 0; border-bottom: 2px dotted var(--lls-pink-soft); } .lls-drawer .woocommerce-mini-cart-item > a:not(.remove) { display: contents; font-weight: 700; line-height: 1.3; text-decoration: none; color: var(--lls-ink); font-size: .9688rem; } .lls-drawer .woocommerce-mini-cart-item img { grid-row: 1 / span 2; width: 76px; height: 76px; object-fit: cover; border-radius: 14px; background: var(--lls-blush); box-shadow: 0 6px 14px -8px rgb(42 33 64 / .4); margin: 0; float: none; } .lls-drawer .woocommerce-mini-cart-item .quantity { grid-column: 2; margin-top: 6px; font-weight: 800; color: var(--lls-ink); font-size: .9375rem; } .lls-drawer .woocommerce-mini-cart-item a.remove { position: absolute; right: 0; top: 16px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--lls-blush); color: var(--lls-ink) !important; font-size: 1.2rem; line-height: 1; text-decoration: none; } .lls-drawer .woocommerce-mini-cart-item a.remove:hover { background: #b3261e; color: #fff !important; } .lls-drawer .woocommerce-mini-cart__total { display: flex; justify-content: space-between; align-items: baseline; margin: 18px 0 14px; padding: 14px 16px; border-radius: 16px; background: var(--lls-yellow-soft); font-size: 1.0625rem; } .lls-drawer .woocommerce-mini-cart__total strong { font-family: var(--ts-font-h); font-weight: 600; } .lls-drawer .woocommerce-mini-cart__total .amount { font: 600 1.35rem/1 var(--ts-font-h); } .lls-drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; margin: 0; } .lls-drawer .woocommerce-mini-cart__buttons a.button { display: flex; width: 100%; justify-content: center; padding: 14px 20px; font-size: 1.0625rem; } .lls-drawer .woocommerce-mini-cart__buttons a.button:not(.checkout) { background: #fff; border-color: var(--lls-ink); color: var(--lls-ink); box-shadow: 0 4px 0 var(--lls-ink); } .lls-drawer .woocommerce-mini-cart__empty-message { margin: 26px 0 16px; padding: 22px; border-radius: 18px; background: var(--lls-blush); text-align: center; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .lls-drawer__panel, .lls-drawer__shade { transition: none; } } /* ---------- Cart page: laid out like the checkout ---------- */ .lls.woocommerce-cart .ts-main--till .woocommerce { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 0 44px; align-items: start; } .lls.woocommerce-cart .ts-main--till .woocommerce > .woocommerce-notices-wrapper, .lls.woocommerce-cart .ts-main--till .woocommerce > .wc-block-components-notices, .lls.woocommerce-cart .ts-main--till .woocommerce > .cart-empty, .lls.woocommerce-cart .ts-main--till .woocommerce > .return-to-shop, .lls.woocommerce-cart .ts-main--till .woocommerce > .woocommerce-info { grid-column: 1 / -1; } .lls.woocommerce-cart .ts-main--till .cart-collaterals { position: sticky; top: 24px; width: auto; } .lls.woocommerce-cart .ts-main--till .cart-collaterals .cart_totals { width: 100%; float: none; margin: 0; } .lls.woocommerce-cart .ts-main--till .cart-collaterals .cross-sells { display: none; } .lls.woocommerce-cart table.shop_table.cart { box-shadow: none !important; border: 0 !important; background: none; overflow: visible !important; border-radius: 0 !important; } .lls.woocommerce-cart table.shop_table.cart thead { display: none; } .lls.woocommerce-cart table.shop_table.cart tbody, .lls.woocommerce-cart table.shop_table.cart tr { display: block; } .lls.woocommerce-cart table.shop_table.cart tr.cart_item { position: relative; display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; grid-template-areas: "pic name price"; gap: 4px 16px; align-items: center; margin: 0 0 12px; padding: 14px 52px 14px 14px; background: #fff; border: 2px solid var(--lls-pink-soft); border-radius: 20px; } .lls.woocommerce-cart table.shop_table.cart tr.cart_item td { display: block; padding: 0 !important; border: 0 !important; background: none !important; text-align: left !important; } .lls.woocommerce-cart table.shop_table.cart tr.cart_item td::before { content: none !important; display: none !important; } .lls.woocommerce-cart table.shop_table.cart td.product-thumbnail { grid-area: pic; display: block !important; } .lls.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 84px !important; height: 84px; object-fit: cover; border-radius: 14px; background: var(--lls-blush); } .lls.woocommerce-cart table.shop_table.cart td.product-name { grid-area: name; font-weight: 700; line-height: 1.35; } .lls.woocommerce-cart table.shop_table.cart td.product-name a { text-decoration: none; } .lls.woocommerce-cart table.shop_table.cart td.product-name a:hover { text-decoration: underline; text-decoration-color: var(--lls-pink); } .lls.woocommerce-cart table.shop_table.cart td.product-price { display: none !important; } .lls.woocommerce-cart table.shop_table.cart td.product-subtotal { grid-area: price; font: 600 1.2rem/1 var(--ts-font-h); white-space: nowrap; } .lls.woocommerce-cart table.shop_table.cart td.product-remove { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); } .lls.woocommerce-cart table.shop_table.cart td.product-remove a.remove { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--lls-blush); font-size: 1.25rem; line-height: 1; color: var(--lls-ink) !important; } .lls.woocommerce-cart table.shop_table.cart td.product-remove a.remove:hover { background: #b3261e; color: #fff !important; } .lls.woocommerce-cart table.shop_table.cart tr:not(.cart_item) td.actions { display: flex !important; flex-wrap: wrap; gap: 10px; align-items: center; padding: 6px 0 0 !important; border: 0 !important; background: none; } .lls.woocommerce-cart table.shop_table.cart td.actions .coupon { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; float: none; } .lls.woocommerce-cart table.shop_table.cart td.actions .coupon .input-text { flex: 1 1 160px; width: auto !important; min-height: 46px; border-radius: 999px; padding-inline: 18px; } .lls.woocommerce-cart table.shop_table.cart td.actions .coupon .button { background: #fff; border-color: var(--lls-ink); color: var(--lls-ink); box-shadow: 0 4px 0 var(--lls-ink); } /* Every resource is one download (no quantities), so "Update cart" has nothing to update. */ .lls.woocommerce-cart table.shop_table.cart td.actions > button[name="update_cart"] { display: none !important; } .lls.woocommerce-cart .ts-main--till .cart_totals { position: relative; padding: 24px; } .lls.woocommerce-cart .ts-main--till .cart_totals::before { content: ""; position: absolute; right: 20px; top: -14px; width: 30px; aspect-ratio: 1; background: var(--lls-yellow); -webkit-mask: var(--lls-art-star) center / contain no-repeat; mask: var(--lls-art-star) center / contain no-repeat; transform: rotate(12deg); } .lls.woocommerce-cart .ts-main--till .cart_totals table.shop_table { background: #fff; } .lls.woocommerce-cart .ts-main--till .cart_totals .order-total .amount { font: 600 1.35rem/1 var(--ts-font-h); } .lls.woocommerce-cart .return-to-shop .button { margin-top: 6px; } .lls-cart-more { margin: 18px 0 0; } .lls-cart-more a { font-weight: 700; } .lls-cart-more a::before { content: "\2190 "; } .lls .wc-block-components-notice-banner:focus, .lls .wc-block-components-notice-banner:focus-visible { outline: 2px solid var(--lls-pink); outline-offset: 2px; } @media (max-width: 860px) { .lls.woocommerce-cart .ts-main--till .woocommerce { grid-template-columns: 1fr; } .lls.woocommerce-cart .ts-main--till .cart-collaterals { position: static; margin-top: 18px; } } @media (max-width: 700px) { .lls.woocommerce-cart table.shop_table.cart tr.cart_item { grid-template-columns: 64px minmax(0, 1fr); grid-template-areas: "pic name" "pic price"; padding: 12px 48px 12px 12px; } .lls.woocommerce-cart table.shop_table.cart td.product-thumbnail img { width: 64px !important; height: 64px; } .lls.woocommerce-cart table.shop_table.cart td.product-subtotal { font-size: 1.05rem; } .lls-drawer__panel { width: min(400px, 92vw); } } /* ---------- Email sign-up (inc/signup.php; the forms are in her plugin) ---------- */ .lls-freebie__label { margin: 0 0 6px; } .lls-freebie__label span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 9px; border-radius: 999px; background: var(--lls-yellow); font: 600 .9375rem/1 var(--ts-font-h); color: var(--lls-ink); transform: rotate(-3deg); } .lls-freebie__label span::before { content: ""; width: 14px; height: 14px; background: var(--lls-ink); -webkit-mask: var(--lls-art-star) center / contain no-repeat; mask: var(--lls-art-star) center / contain no-repeat; } .lls-freebie__name { margin: 0; font: 600 clamp(1.5rem, 2.6vw, 2rem)/1.1 var(--ts-font-h); } .lls-freebie__name a { text-decoration: none; color: var(--lls-ink); } .lls-freebie__name a:hover { text-decoration: underline; text-decoration-color: var(--lls-pink); } .lls-freebie__cover { display: block; padding: 7px 7px 20px; background: #fff; border-radius: 12px; box-shadow: var(--lls-shadow-lift); transform: rotate(-4deg); } .lls-freebie__cover img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 7px; } .lls-points { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 0; padding: 0; font-weight: 700; } .lls-points li { display: flex; align-items: center; gap: 7px; } .lls-points li::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--lls-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2140' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 12px no-repeat; } .lls-signup { margin: 0; } .lls-signup__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lls-signup__row { display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; } .lls-signup__field { flex: 1 1 200px; margin: 0; } .lls-signup__field--name { flex: 0 1 170px; } .lls-signup__field label { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lls-signup__field input { width: 100%; min-height: 54px; padding: 12px 20px; border: 2px solid #ecd5de; border-radius: 999px; background: #fff; font: 600 1.0625rem/1.2 var(--ts-font-b); color: var(--lls-ink); } .lls-signup__field input:focus { outline: none; border-color: var(--lls-ink); box-shadow: 0 0 0 4px rgb(252 122 169 / .25); } .lls-signup__field input[aria-invalid="true"] { border-color: #b3261e; } .lls-signup__go { margin: 0; flex: 0 0 auto; } .lls-signup__go .ts-btn { min-height: 54px; padding-inline: 26px; font-size: 1.0625rem; white-space: nowrap; } .lls-signup.is-busy .ts-btn { opacity: .7; cursor: progress; } .lls-signup__fine { margin: 10px 0 0; font-size: .875rem; color: var(--lls-muted); } .lls-signup__fine a { color: var(--lls-ink); } .lls-signup__msg { margin: 10px 0 0; font-weight: 700; } .lls-signup__msg:empty { display: none; } .lls-signup.is-bad .lls-signup__msg { color: #b3261e; } .lls-signup.is-done .lls-signup__row, .lls-signup.is-done .lls-signup__fine { display: none; } .lls-signup.is-done .lls-signup__msg { margin: 0; padding: 14px 18px 14px 50px; border-radius: 18px; background: var(--lls-teal-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232a2140' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") 16px center / 22px no-repeat; color: var(--lls-ink); } /* Home: the strip under the top, pulled up over its wavy edge. */ .lls-strip { position: relative; z-index: 2; margin-top: -58px; } .lls-strip__card { display: grid; grid-template-columns: 112px minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px 30px; align-items: center; padding: 22px 28px 22px 22px; border-radius: 30px; background: #fff; box-shadow: 0 0 0 3px var(--lls-pink-soft), var(--lls-shadow-lift); } .lls-strip .lls-freebie__cover { width: 112px; margin: -40px 0 -6px; } .lls-strip .lls-freebie__name { font-size: clamp(1.4rem, 2.2vw, 1.75rem); } .lls-strip .lls-points { margin-top: 8px; font-size: .9375rem; } /* Home: the full-width band. */ .lls-band { position: relative; overflow: hidden; isolation: isolate; margin-top: 46px; padding-block: clamp(46px, 6vw, 80px); background: var(--lls-yellow-soft); } .lls-band__wave--top { top: -1px; bottom: auto; fill: #fff; transform: rotate(180deg); z-index: 1; } .lls-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--lls-art-confetti) 0 0 / 380px 380px repeat; opacity: .7; } .lls-band__grid { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: center; } .lls-band__art { position: relative; justify-self: center; width: min(320px, 100%); } .lls-band__art::before { content: ""; position: absolute; z-index: -1; inset: -8% -10%; border-radius: 50%; background: conic-gradient(from 20deg, var(--lls-pink), var(--lls-orange), var(--lls-yellow), var(--lls-teal), var(--lls-orchid), var(--lls-rose), var(--lls-pink)); opacity: .5; filter: blur(2px); } .lls-band__art .lls-freebie__cover { padding: 10px 10px 30px; transform: rotate(-5deg); } .lls-band .lls-freebie__name { font-size: clamp(2rem, 4.4vw, 3.2rem); } .lls-band .lls-points { margin: 16px 0 24px; font-size: 1.0625rem; } .lls-band .lls-signup__field input { border-color: #f1d79a; } .lls-band + .ts-footer, .lls-band + * .lls-footer { margin-top: 0; } /* Footer: a short form under the logo. */ .lls-footer__signup { margin-top: 18px; max-width: 420px; } .lls-footer__signup .lls-freebie__name { font-size: 1.25rem; margin-bottom: 10px; } .lls-footer__signup .lls-signup__field input, .lls-footer__signup .lls-signup__go .ts-btn { min-height: 48px; } .lls-footer__signup .lls-signup__go .ts-btn { padding-inline: 18px; font-size: 1rem; } @media (max-width: 960px) { .lls-strip__card { grid-template-columns: 96px minmax(0, 1fr); } .lls-strip .lls-freebie__cover { width: 96px; } .lls-strip .lls-signup { grid-column: 1 / -1; } } @media (max-width: 700px) { .lls-strip { margin-top: -40px; } .lls-strip__card { grid-template-columns: 82px minmax(0, 1fr); gap: 14px; padding: 18px 16px; border-radius: 24px; } .lls-strip .lls-freebie__cover { width: 82px; margin: -30px 0 0; } .lls-signup__field, .lls-signup__field--name, .lls-signup__go { flex: 1 1 100%; } .lls-signup__go .ts-btn { width: 100%; } .lls-band__grid { grid-template-columns: 1fr; } .lls-band__art { width: min(220px, 64%); } .lls-band .lls-points { flex-direction: column; } } /* ---------- Blog (inc/blog.php) ---------- */ .lls-page.ts-main--blog, .lls-page.ts-main--post { padding-top: 0; } .lls-page.ts-main--blog { padding-bottom: 76px; } .lls .ts-wrap.lls-read { max-width: calc(760px + 2 * var(--ts-gutter)); } .lls-pagehead__text { max-width: 40em; margin-top: 14px; color: var(--lls-muted); } .lls-pagehead__text p:last-child { margin-bottom: 0; } .lls .lls-blog__cats { margin: 22px 0 0; } .lls .lls-blog__cats .ts-chip { background: #fff; } .lls .lls-blog__cats .ts-chip.is-on { background: var(--lls-pink); border-color: var(--lls-pink); color: var(--lls-ink); } /* Post cards. */ .lls .lls-postgrid { gap: 26px; } .lls .lls-post { border: 0; border-radius: 24px; box-shadow: var(--lls-shadow); } .lls .lls-post:hover { transform: translateY(-4px); box-shadow: var(--lls-shadow-lift); } .lls .lls-post .ts-post__cover { aspect-ratio: 16 / 10; background: var(--lls-blush); } .lls .lls-post .ts-post__cover img { transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .lls .lls-post:hover .ts-post__cover img { transform: scale(1.03); } .lls .lls-post .ts-post__body { gap: 9px; padding: 18px 20px 22px; } .lls .lls-post__topic { position: relative; z-index: 2; align-self: flex-start; display: inline-block; font: 800 .75rem/1 var(--ts-font-b); padding: 6px 11px; border-radius: 999px; background: var(--p, var(--lls-pink-soft)); box-shadow: inset 0 0 0 1.5px var(--pb, #f7c3d6); color: var(--lls-ink); text-decoration: none; } .lls .lls-post .ts-post__title { font-size: 1.3rem; line-height: 1.2; } .lls .lls-post .ts-post__date { order: 3; font-size: .8125rem; color: var(--lls-muted); } .lls .lls-post .ts-post__excerpt { order: 4; } .lls .lls-post__type { padding: 9% 10%; } .lls .lls-post__type--1 { background: var(--lls-orange); } .lls .lls-post__type--2 { background: var(--lls-yellow); } .lls .lls-post__type--3 { background: var(--lls-teal); } .lls .lls-post__type--4 { background: var(--lls-orchid); } .lls .lls-post__type--5 { background: var(--lls-rose); } /* Topic colors (the same set as the collection pills). */ .lls .lls-pill { --p: var(--lls-pink-soft); --pb: #f7c3d6; } .lls .lls-pill.lls-pill--1 { --p: var(--lls-orange-soft); --pb: #fbd1ae; } .lls .lls-pill.lls-pill--2 { --p: var(--lls-yellow-soft); --pb: #f8de94; } .lls .lls-pill.lls-pill--3 { --p: var(--lls-teal-soft); --pb: #afdedd; } .lls .lls-pill.lls-pill--4 { --p: var(--lls-orchid-soft); --pb: #efc6e2; } .lls .lls-pill.lls-pill--5 { --p: var(--lls-blush); --pb: #fbcbd6; } /* A post: the heading band. */ .lls-pagehead--post { padding-bottom: clamp(96px, 10vw, 140px); margin-bottom: 0; } .lls-pagehead--post .ts-page-title { font-size: clamp(2.1rem, 4.6vw, 3.2rem); line-height: 1.08; } .lls-post__topics { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; } .lls-post__topics .lls-pill { display: inline-block; font: 800 .8125rem/1 var(--ts-font-b); padding: 7px 12px; border-radius: 999px; background: var(--p); box-shadow: inset 0 0 0 1.5px var(--pb); color: var(--lls-ink); text-decoration: none; } .lls-post__back { font-weight: 700; font-size: .9375rem; margin-right: 6px; } .lls-post__back::before { content: "\2190 "; } .lls-post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 16px 0 0; font-weight: 700; color: var(--lls-muted); } .lls-post__by { display: inline-flex; align-items: center; gap: 8px; color: var(--lls-ink); } .lls-post__by::before { content: ""; width: 16px; height: 16px; background: var(--lls-pink); -webkit-mask: var(--lls-art-sparkle) center / contain no-repeat; mask: var(--lls-art-sparkle) center / contain no-repeat; } /* A post: the picture and the text at reading width. */ .lls .ts-main--post .lls-post__body { position: relative; z-index: 2; padding-bottom: 20px; font-size: 1.125rem; line-height: 1.75; } .lls .ts-main--post .lls-post__body > * { max-width: none; } .lls .lls-post__cover { margin: calc(clamp(96px, 10vw, 140px) * -1 + 26px) 0 34px; } .lls .lls-post__cover img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 28px; border: 8px solid #fff; box-shadow: var(--lls-shadow-lift); background: var(--lls-blush); } .lls-single .wp-block-post-content > * + * { margin-top: 1.1em; } .lls-single .wp-block-post-content h2 { font-size: clamp(1.6rem, 3vw, 2rem); margin: 1.8em 0 .6em; } .lls-single .wp-block-post-content h2::after { content: ""; display: block; width: 64px; height: 11px; margin-top: 8px; background: var(--lls-pink); -webkit-mask: var(--lls-art-squiggle) left center / contain no-repeat; mask: var(--lls-art-squiggle) left center / contain no-repeat; } .lls-single .wp-block-post-content h2:nth-of-type(3n+2)::after { background: var(--lls-teal); } .lls-single .wp-block-post-content h2:nth-of-type(3n)::after { background: var(--lls-orange); } .lls-single .wp-block-post-content h3 { font-size: 1.35rem; margin: 1.6em 0 .5em; } .lls-single .wp-block-post-content a:not(.button):not(.ts-btn):not(.ts-more) { text-decoration-color: var(--lls-pink); text-decoration-thickness: .12em; } .lls-single .wp-block-post-content > ul:not(.products), .lls-single .wp-block-post-content > ol { padding-left: 0; list-style: none; } .lls-single .wp-block-post-content > ul:not(.products) > li, .lls-single .wp-block-post-content > ol > li { position: relative; padding-left: 34px; margin-bottom: .5em; } .lls-single .wp-block-post-content > ul:not(.products) > li::before { content: ""; position: absolute; left: 4px; top: .4em; width: 18px; height: 18px; background: var(--lls-pink); -webkit-mask: var(--lls-art-star) center / contain no-repeat; mask: var(--lls-art-star) center / contain no-repeat; } .lls-single .wp-block-post-content > ul:not(.products) > li:nth-child(3n+2)::before { background: var(--lls-teal); } .lls-single .wp-block-post-content > ul:not(.products) > li:nth-child(3n)::before { background: var(--lls-orange); } .lls-single .wp-block-post-content > ol { counter-reset: lls-ol; } .lls-single .wp-block-post-content > ol > li { counter-increment: lls-ol; } .lls-single .wp-block-post-content > ol > li::before { content: counter(lls-ol); position: absolute; left: 0; top: .1em; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--lls-yellow); font: 600 .875rem/1 var(--ts-font-h); } .lls-single .wp-block-post-content blockquote, .lls-single .wp-block-post-content .wp-block-quote { position: relative; margin: 1.6em 0; padding: 22px 24px 22px 64px; border: 0; border-radius: 22px; background: var(--lls-blush); font-weight: 600; } .lls-single .wp-block-post-content blockquote::before { content: "\201C"; position: absolute; left: 18px; top: 4px; font: 600 4rem/1 var(--ts-font-h); color: var(--lls-pink); } .lls-single .wp-block-post-content figure.wp-block-image img, .lls-single .wp-block-post-content > p img { border-radius: 20px; } .lls-single .wp-block-post-content figcaption { font-size: .875rem; color: var(--lls-muted); text-align: center; } /* Her [NATALIE: ...] slots and any highlight: a yellow marker stroke. */ .lls-single .wp-block-post-content mark { background: linear-gradient(transparent 12%, rgb(254 198 70 / .65) 12% 88%, transparent 88%); color: inherit; padding: 0 .15em; border-radius: 4px; } /* [products] inside a post: room for the cards beyond the reading width, and no list indent. */ .lls-single .wp-block-post-content > .woocommerce { width: min(1100px, calc(100vw - 2 * var(--ts-gutter))); margin-left: 50%; transform: translateX(-50%); margin-block: 1.6em; } .lls-single .wp-block-post-content ul.products { padding-left: 0; margin-left: 0; font-size: 1rem; line-height: 1.4; } .lls-single .wp-block-post-content ul.products li.product { margin: 0; padding: 0; } .lls-single .wp-block-post-content ul.products li.product::before { content: none; } /* [lls_signup] inside a post or page. */ .lls .lls-signup--post { margin: 1.6em 0; padding: 20px 22px; border-radius: 24px; background: var(--lls-yellow-soft); font-size: 1rem; line-height: 1.4; } .lls .lls-signup--post .lls-signup__field input { border-color: #f1d79a; } /* [products columns="2|3"] keeps its column count (the kit's grid is four across). */ .lls ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lls ul.products.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lls-single .wp-block-post-content > .woocommerce:has(ul.columns-3) { width: min(960px, calc(100vw - 2 * var(--ts-gutter))); } .lls-single .wp-block-post-content ul.products .ts-card__body { line-height: 1.3; } .lls-single .wp-block-post-content ul.products h3, .lls-single .wp-block-post-content ul.products p { margin: 0; } .lls-single .wp-block-post-content ul.products a { text-decoration: none; } /* A post: about her, and the sign-up. */ .lls-author { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 20px; padding-block: 28px; border-top: 2px dashed var(--lls-pink-soft); border-bottom: 2px dashed var(--lls-pink-soft); } .lls-author__photo { width: 132px; padding: 8px; } .lls-author__photo .lls-ring__img { border-width: 5px; } .lls-author__words p { margin: 0 0 .7em; line-height: 1.6; } .lls-author__words p:last-child { margin-bottom: 0; } .lls-author__words .lls-script { font-size: 1.7rem; margin-bottom: .2em; } .lls-postsign { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; margin-top: 34px; padding: 26px 28px; border-radius: 28px; background: var(--lls-yellow-soft); } .lls .lls-postsign.ts-wrap { width: auto; margin-inline: max(var(--ts-gutter), calc(50% - 380px)); } .lls-postsign .lls-freebie__cover { width: 120px; } .lls-postsign .lls-freebie__name { font-size: 1.6rem; } .lls-postsign .lls-points { margin: 8px 0 16px; } .lls-postsign .lls-signup__field input { border-color: #f1d79a; } .lls-section--more { padding-top: clamp(44px, 6vw, 70px); } .lls-section--more .ts-section__title { --sq: var(--lls-teal); } .lls-section--shop { margin-top: 30px; } @media (max-width: 1040px) { .lls .lls-postgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .lls .lls-postgrid { grid-template-columns: 1fr; gap: 18px; } .lls ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lls .ts-main--post .lls-post__body { font-size: 1.0625rem; } .lls .lls-post__cover img { border-width: 5px; border-radius: 20px; } .lls-author { grid-template-columns: 1fr; gap: 10px; } .lls .lls-author .lls-ring.lls-author__photo { width: 104px; padding: 6px; } .lls-author__photo { width: 88px; padding: 6px; } .lls-postsign { grid-template-columns: 76px minmax(0, 1fr); gap: 14px; padding: 18px 16px; } .lls .lls-postsign.ts-wrap { margin-inline: var(--ts-gutter); } .lls-postsign .lls-freebie__cover { width: 76px; align-self: start; grid-row: 1 / span 3; } .lls-postsign .lls-signup { grid-column: 1 / -1; } .lls-postsign .lls-postsign__words { display: contents; } .lls-postsign .lls-freebie__label, .lls-postsign .lls-freebie__name, .lls-postsign .lls-points { grid-column: 2; } .lls-postsign .lls-freebie__name { font-size: 1.3rem; } .lls-single .wp-block-post-content blockquote { padding: 18px 18px 18px 52px; } } /* ---------- Footer ---------- */ .lls-footer { position: relative; isolation: isolate; margin-top: 40px; background: var(--lls-blush); border-top: 0; } .lls-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--lls-rainbow); } .lls-footer__wave { top: -33px; fill: var(--lls-blush); } .lls-footer .lls-decos { overflow: hidden; } .lls-footer .ts-footer__grid { position: relative; z-index: 1; padding-block: 44px 30px; } .lls-footer__logo { display: inline-block; margin-bottom: 10px; } .lls-footer__logo img { display: block; width: 210px; height: auto; } .lls-footer .ts-footer__head { font: 600 1.2rem/1 var(--ts-font-h); letter-spacing: 0; text-transform: none; color: var(--lls-ink); margin-bottom: 14px; } .lls-footer nav[aria-label="Follow"] ul { display: flex; flex-wrap: wrap; gap: 8px; } .lls-footer nav[aria-label="Follow"] ul a { padding: 8px 14px; border-radius: 999px; background: #fff; box-shadow: 0 1px 0 #f3dbe3; } .lls-footer nav[aria-label="Follow"] li:nth-child(5n+1) a:hover { background: var(--lls-pink); } .lls-footer nav[aria-label="Follow"] li:nth-child(5n+2) a:hover { background: var(--lls-teal); } .lls-footer nav[aria-label="Follow"] li:nth-child(5n+3) a:hover { background: var(--lls-yellow); } .lls-footer nav[aria-label="Follow"] li:nth-child(5n+4) a:hover { background: var(--lls-orchid); } .lls-footer nav[aria-label="Follow"] ul a:hover { text-decoration: none; } .lls-footer .ts-footer__base { position: relative; z-index: 1; border-top-color: #f3d4df; padding-bottom: 26px; } /* Her copyright on the left, "Site by Up At Last" on the right. */ .lls-footer .ts-footer__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; } .lls-credit { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8125rem; color: var(--lls-muted); } .lls-credit a { display: block; line-height: 0; opacity: .8; transition: opacity .15s ease; } .lls-credit a:hover, .lls-credit a:focus-visible { opacity: 1; } .lls-credit img { display: block; width: 128px; height: auto; } /* ---------- Coming soon ---------- */ .lls .ts-soon { background: var(--lls-blush) var(--lls-art-confetti) 0 0 / 380px 380px repeat; } .lls .ts-soon__box { border: 0; border-radius: 30px; box-shadow: var(--lls-shadow-lift); } /* ---------- Smaller screens ---------- */ @media (max-width: 1100px) { .lls-tag { left: -24px; } .lls-snap--1 { left: -40px; width: 150px; } .lls-snap--2 { right: -36px; width: 116px; } } @media (max-width: 960px) { .lls .ts-header__row { min-height: 0; } .lls .ts-brand__logo { max-height: 56px; max-width: 190px; } .lls .ts-nav > a, .lls .ts-drop > summary { font-size: 1.125rem; } /* One row on phones: logo, account, cart, menu. */ .lls .lls-account { order: 2; width: 42px; height: 42px; } } @media (max-width: 860px) { .lls-hero__grid { grid-template-columns: 1fr; gap: 30px; padding-bottom: 96px; } .lls-hero__art { width: min(300px, 74%); margin: 70px auto 34px; } .lls-hero__art { --rb: 46px; } .lls-tag { left: -34px; top: 2%; } .lls-snap--1 { width: 128px; left: -52px; bottom: -40px; } .lls-snap--2 { width: 100px; right: -44px; top: 34%; } .lls-snap--3 { width: 96px; right: -18px; bottom: -56px; } .lls-meet__grid { grid-template-columns: 1fr; justify-items: center; text-align: left; } .lls-ring { width: min(280px, 78%); } .lls-about .wp-block-post-content { grid-template-columns: 1fr; } .lls .lls-about .wp-block-post-content > * { grid-column: 1; } .lls .lls-about .wp-block-post-content > .wp-block-image:first-child { grid-row: auto; width: min(280px, 80%); justify-self: center; margin-top: 24px; } .lls div.product .summary { padding: 20px; } } @media (max-width: 700px) { .lls .ts-free__row { flex-wrap: wrap; gap: 8px 12px; justify-content: space-between; } .lls .ts-free p { font-size: .9375rem; flex: 1 1 200px; } .lls-hero__title { font-size: clamp(2.7rem, 13vw, 3.6rem); } .lls-hero__title--m { font-size: clamp(2.3rem, 10vw, 3rem); } .lls-hero__title--l { font-size: clamp(2rem, 8.4vw, 2.6rem); } .lls-eyebrow { font-size: .9375rem; margin-bottom: 14px; } .lls-hero__intro { font-size: 1.1rem; } .lls-counts { margin-top: 26px; padding-top: 18px; } .lls-counts > * { padding-right: 18px; margin-right: 18px; } .lls-counts b { font-size: 1.7rem; } .lls-counts span { font-size: .875rem; } .lls-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .lls-tile { min-height: 236px; padding: 14px; border-radius: 22px; } .lls-tile__pics { height: 116px; } .lls-tile__pic { width: 88px; border-width: 4px; } .lls-tile b { font-size: 1.2rem; } .lls-tile::before { width: 150px; right: -50px; top: -54px; } .lls-section--subjects .lls-chips { flex-wrap: wrap; overflow: visible; } .lls ul.products { gap: 12px; } .lls ul.products li.product { border-radius: 18px; } .lls-footer__logo img { width: 180px; } .lls .woocommerce-products-header { margin-bottom: 20px; } .lls ul.products .ts-card__title { font-size: .95rem; } /* Decorations that would sit on words at this width. */ .lls-decos--page .lls-deco:nth-child(-n+2), .lls-decos--footer .lls-deco:nth-child(-n+2), .lls-decos--hero .lls-deco:nth-child(5) { display: none; } .lls-hero__wave, .lls-band__wave, .lls-pagehead__wave, .lls-footer__wave { height: 22px; } .lls-band__wave, .lls-footer__wave { top: -21px; } } @media (max-width: 420px) { .lls-tag { left: -22px; padding: 8px 12px 8px 8px; } .lls-tag b { font-size: 1.05rem; } .lls-tag__dot { width: 30px; height: 30px; } .lls-snap--1 { left: -38px; } .lls-snap--2 { right: -30px; } }