:host {
/* breakpoints: not-implemented / reference only */
/* --shadow-breakpoint-xs: 320px; */
/* --shadow-breakpoint-sm: 490px; */
/* --shadow-breakpoint-md: 768px; */
/* --shadow-breakpoint-lg: 1040px; */
/* --shadow-breakpoint-xl: 1440px; */
--shadow-thumbnail-position-start:
"media gift-dialog-header"
"media content"
"media gift-block-actions";
--shadow-thumbnail-position-end:
"gift-dialog-header media"
"content media"
"gift-block-actions media";
/* border radius */
--shadow-border-radius-xs: calc(var(--shadow-border-radius-scale, 65) / 100 * 1rem);
--shadow-border-radius-sm: calc(var(--shadow-border-radius-scale, 65) / 100 * 1.5rem);
--shadow-border-radius-base: calc(var(--shadow-border-radius-scale, 65) / 100 * 2.5rem);
--shadow-outline-width: calc(var(--shadow-field-border-width) + 0.5px);
/* buttons */
--shadow-hover-style-light: #ffffff;
--shadow-hover-style-dark: #000000;
--shadow-primary-button-surface--active: color-mix(in srgb, var(--shadow-primary-button-surface), var(--shadow-hover-style) 20%);
--shadow-primary-button-surface--hover: color-mix(in srgb, var(--shadow-primary-button-surface), var(--shadow-hover-style) 16%);
--shadow-primary-button-text-color--active: color-mix(in srgb, var(--shadow-primary-button-text-color), var(--shadow-hover-style) 20%);
--shadow-primary-button-text-color--hover: color-mix(in srgb, var(--shadow-primary-button-text-color), var(--shadow-hover-style) 16%);
--shadow-secondary-button-surface--active: color-mix(in srgb, var(--shadow-secondary-button-surface), var(--shadow-hover-style) 20%);
--shadow-secondary-button-surface--hover: color-mix(in srgb, var(--shadow-secondary-button-surface), var(--shadow-hover-style) 16%);
--shadow-secondary-button-text-color--active: color-mix(in srgb, var(--shadow-secondary-button-text-color), var(--shadow-hover-style) 20%);
--shadow-secondary-button-text-color--hover: color-mix(in srgb, var(--shadow-secondary-button-text-color), var(--shadow-hover-style) 16%);
/* do not change the root text size */
--shadow-font-size: 16px;
/* text and fonts */
--shadow-font-size-sm: clamp(12px, calc(14px * var(--shadow-font-scale)), 16px);
--shadow-font-size-base: clamp(12px, calc(16px * var(--shadow-font-scale)), 20px);
--shadow-font-size-lg: clamp(16px, calc(24px * var(--shadow-font-scale)), 28px);
--shadow-font-weight-md: 500;
--shadow-font-weight-lg: 600;
--shadow-line-height-base: 1.5em;
/* transitions */
--shadow-transition-duration: 0.1s;
--shadow-spinner-duration: 0.7s;
/* disabled */
--shadow-disabled-opacity-sm: 0.16;
--shadow-disabled-opacity: 0.32;
--shadow-disabled-opacity-md: 0.4;
--shadow-disabled-opacity-lg: 0.64;
/* precalculated percentages for color-mix */
--shadow-disabled-opacity-percent: 32%;
--shadow-disabled-opacity-sm-percent: 16%;
--shadow-disabled-opacity-md-percent: 40%;
--shadow-disabled-opacity-lg-percent: 64%;
--shadow-disabled-cursor: not-allowed;
/* form elements */
--shadow-form-element-surface--disabled: color-mix(in srgb, var(--shadow-form-element-surface) var(--shadow-disabled-opacity-percent), var(--shadow-secondary-text-color) 8%);
--shadow-form-element-border-color--active: color-mix(in srgb, var(--shadow-form-element-border-color), white 83%);
--shadow-form-element-border-color--disabled: color-mix(in srgb, var(--shadow-form-element-border-color) var(--shadow-disabled-opacity-percent), var(--shadow-secondary-text-color) 8%);
--shadow-form-element-text-color--disabled: color-mix(in srgb, var(--shadow-form-element-text-color), var(--shadow-secondary-text-color) 8%);
--shadow-form-element-placeholder-text-color: color-mix(in srgb, var(--shadow-form-element-text-color) var(--shadow-disabled-opacity-percent), transparent);
--shadow-form-element-placeholder-text-color--disabled: color-mix(in srgb, var(--shadow-form-element-text-color) var(--shadow-disabled-opacity-percent), var(--shadow-secondary-text-color) 8%);
--shadow-form-element-selection-color--active: color-mix(in srgb, var(--shadow-form-element-selection-color), var(--shadow-hover-style) 40%);
--shadow-form-element-selection-color--hover: color-mix(in srgb, var(--shadow-form-element-selection-color), var(--shadow-hover-style) 32%);
/* primary colors */
--shadow-primary-text-color--hover: color-mix(in srgb, var(--shadow-primary-text-color), var(--shadow-hover-style) 32%);
/* secondary colors */
--shadow-secondary-text-color--disabled: color-mix(in srgb, var(--shadow-secondary-text-color) var(--shadow-disabled-opacity-lg-percent), var(--shadow-secondary-text-color) 8%);
/* spacing */
--shadow-spacing-scale-base: 1;
--shadow-spacing-scale-less: 0.75;
--shadow-spacing-scale-more: 1.166;
--shadow-spacing-fixed: 4px;
--shadow-spacing-base: clamp(12px, calc(16px * var(--shadow-spacing-scale)), 24px);
--shadow-spacing-lg: clamp(16px, calc(24px * var(--shadow-spacing-scale)), 28px);
--shadow-spacing-sm: clamp(8px, calc(12px * var(--shadow-spacing-scale)), 14px);
--shadow-spacing-xs: clamp(6px, calc(8px * var(--shadow-spacing-scale)), 10px);
/* inline block */
--shadow-feature-max-height: 500px;
--shadow-textarea-min-height: 80px;
--shadow-block-margin-block-start: calc(1em * var(--shadow-spacing-scale));
--shadow-block-margin-block-end: calc(2em * var(--shadow-spacing-scale));
/* shadows */
--shadow-shadow-blur: 1.5rem;
--shadow-shadow-color: rgba(0, 0, 0, 0.25);
--shadow-shadow-offset: 0.75rem;
/* the default look: what a shop without a presets entry paints; a saved entry overrides these per option type below */
--shadow-font-family: inherit;
--shadow-header-font-family: inherit;
--shadow-font-weight-base: 400;
--shadow-letter-spacing: normal;
--shadow-button-text-transform: none;
--shadow-button-letter-spacing: normal;
--shadow-button-font-style: normal;
--shadow-launcher-button-font-weight: 400;
--shadow-launcher-button-max-width: 500px;
--shadow-launcher-button-alignment: center;
--shadow-launcher-button-content-justify-content: space-between;
--shadow-launcher-button-content-flex-direction: row-reverse;
--shadow-grid-template-areas: var(--shadow-thumbnail-position-start);
--shadow-border-radius-scale: 60;
--shadow-block-border-surface: #00000000;
--shadow-border-width: 1px;
--shadow-field-border-width: var(--shadow-border-width);
--shadow-hover-style: var(--shadow-hover-style-light, --shadow-hover-style-light);
--shadow-launcher-button-surface: #000000;
--shadow-launcher-button-text-color: #ffffff;
--shadow-launcher-button-border-surface: #00000000;
--shadow-primary-button-surface: #000000;
--shadow-primary-button-text-color: #ffffff;
--shadow-primary-button-border-surface: #00000000;
--shadow-primary-button-border-surface--active: transparent;
--shadow-primary-button-border-surface--hover: transparent;
--shadow-secondary-button-surface: #0000000f;
--shadow-secondary-button-text-color: #333333;
--shadow-secondary-button-border-surface: #00000000;
--shadow-secondary-button-border-surface--active: transparent;
--shadow-secondary-button-border-surface--hover: transparent;
--shadow-font-scale: calc(100 / 100);
--shadow-form-element-surface: #ffffff;
--shadow-form-element-border-color: #0000000f;
--shadow-form-element-text-color: #333333;
--shadow-form-element-selection-color: #000000;
--shadow-selection-accent-color: var(--shadow-form-element-selection-color);
--shadow-selection-checked-surface: var(--shadow-form-element-selection-color);
--shadow-selection-swatch-color: var(--shadow-form-element-selection-color);
--shadow-primary-surface: #ffffff;
--shadow-primary-text-color: #000000;
--shadow-secondary-surface: #f3f3f3;
--shadow-secondary-text-color: #333333;
--shadow-spacing-scale: var(--shadow-spacing-scale-base, 1);
--shadow-gift-thumbnail-size: 60px;
--shadow-thumbnail-size: clamp(40px, var(--shadow-gift-thumbnail-size), 200px);
--shadow-thumbnail-flex-direction: row;
--shadow-thumbnail-order: -1;
--shadow-thumbnail-margin-left: 0;
--shadow-thumbnail-margin-right: 0.6em;
--shadow-block-padding: var(--shadow-block-padding-block-start, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-end, var(--shadow-spacing-sm)) var(--shadow-block-padding-block-end, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-start, var(--shadow-spacing-sm));
/* default styles */
all: revert;
box-sizing: border-box;
cursor: default;
display: block;
font-family: var(--shadow-font-family);
font-size: var(--shadow-font-size);
line-height: var(--shadow-line-height-base);
letter-spacing: var(--shadow-letter-spacing);
margin-block-start: var(--shadow-block-margin-start, var(--shadow-spacing-xs)) !important;
margin-block-end: var(--shadow-block-margin-end, var(--shadow-spacing-xs)) !important;
margin-inline-start: var(--shadow-block-margin-inline-start, 0) !important;
margin-inline-end: var(--shadow-block-margin-inline-end, 0) !important;
text-align: start;
width: -webkit-fill-available;
white-space: normal;
}
:host([option-type="product"]) {
--shadow-font-family: inherit;
--shadow-header-font-family: inherit;
--shadow-font-weight-base: 400;
--shadow-letter-spacing: normal;
--shadow-button-text-transform: none;
--shadow-button-letter-spacing: normal;
--shadow-button-font-style: normal;
--shadow-launcher-button-font-weight: 400;
--shadow-launcher-button-max-width: 500px;
--shadow-launcher-button-alignment: center;
--shadow-launcher-button-content-justify-content: space-between;
--shadow-launcher-button-content-flex-direction: row-reverse;
--shadow-grid-template-areas: var(--shadow-thumbnail-position-start);
/* border radius */
--shadow-border-radius-scale: 60;
--shadow-block-border-surface: #00000000;
--shadow-border-width: 1px;
/* buttons */
--shadow-hover-style: var(--shadow-hover-style-light, --shadow-hover-style-light);
--shadow-launcher-button-surface: #333333;
--shadow-launcher-button-text-color: #ffffff;
--shadow-launcher-button-border-surface: #00000000;
--shadow-primary-button-surface: #333333;
--shadow-primary-button-text-color: #ffffff;
--shadow-primary-button-border-surface: #00000000;
--shadow-primary-button-border-surface--active: transparent;
--shadow-primary-button-border-surface--hover: transparent;
--shadow-secondary-button-surface: #0000000f;
--shadow-secondary-button-text-color: #333333;
--shadow-secondary-button-border-surface: #00000000;
--shadow-secondary-button-border-surface--active: transparent;
--shadow-secondary-button-border-surface--hover: transparent;
/* text and fonts */
--shadow-font-scale: calc(100 / 100);
/* form elements */
--shadow-form-element-surface: #ffffff;
--shadow-form-element-border-color: #0000000f;
--shadow-form-element-text-color: #333333;
--shadow-form-element-selection-color: #232323;
--shadow-selection-accent-color: var(--shadow-form-element-selection-color);
--shadow-selection-checked-surface: var(--shadow-form-element-selection-color);
--shadow-selection-swatch-color: var(--shadow-form-element-selection-color);
/* primary colors */
--shadow-primary-surface: #ffffff;
--shadow-primary-text-color: #232323;
/* secondary colors */
--shadow-secondary-surface: #f3f3f3;
--shadow-secondary-text-color: #333333;
/* spacing */
--shadow-spacing-scale: var(--shadow-spacing-scale-base, 1);
/* media */
--shadow-gift-thumbnail-size: 60px;
--shadow-thumbnail-size: clamp(40px, var(--shadow-gift-thumbnail-size), 200px);
--shadow-thumbnail-flex-direction: row;
--shadow-thumbnail-order: -1;
--shadow-thumbnail-margin-left: 0;
--shadow-thumbnail-margin-right: 0.6em;
}
:host([option-type="order"]) {
--shadow-font-family: inherit;
--shadow-header-font-family: inherit;
--shadow-font-weight-base: 400;
--shadow-letter-spacing: normal;
--shadow-button-text-transform: none;
--shadow-button-letter-spacing: normal;
--shadow-button-font-style: normal;
--shadow-launcher-button-font-weight: 400;
--shadow-launcher-button-max-width: 500px;
--shadow-launcher-button-alignment: center;
--shadow-launcher-button-content-justify-content: space-between;
--shadow-launcher-button-content-flex-direction: row-reverse;
--shadow-grid-template-areas: var(--shadow-thumbnail-position-start);
/* border radius */
--shadow-border-radius-scale: 60;
--shadow-block-border-surface: #00000000;
--shadow-border-width: 1px;
/* buttons */
--shadow-hover-style: var(--shadow-hover-style-light, --shadow-hover-style-light);
--shadow-launcher-button-surface: #333333;
--shadow-launcher-button-text-color: #ffffff;
--shadow-launcher-button-border-surface: #00000000;
--shadow-primary-button-surface: #333333;
--shadow-primary-button-text-color: #ffffff;
--shadow-primary-button-border-surface: #00000000;
--shadow-primary-button-border-surface--active: transparent;
--shadow-primary-button-border-surface--hover: transparent;
--shadow-secondary-button-surface: #0000000f;
--shadow-secondary-button-text-color: #333333;
--shadow-secondary-button-border-surface: #00000000;
--shadow-secondary-button-border-surface--active: transparent;
--shadow-secondary-button-border-surface--hover: transparent;
/* text and fonts */
--shadow-font-scale: calc(100 / 100);
/* form elements */
--shadow-form-element-surface: #ffffff;
--shadow-form-element-border-color: #0000000f;
--shadow-form-element-text-color: #333333;
--shadow-form-element-selection-color: #232323;
--shadow-selection-accent-color: var(--shadow-form-element-selection-color);
--shadow-selection-checked-surface: var(--shadow-form-element-selection-color);
--shadow-selection-swatch-color: var(--shadow-form-element-selection-color);
/* primary colors */
--shadow-primary-surface: #ffffff;
--shadow-primary-text-color: #232323;
/* secondary colors */
--shadow-secondary-surface: #f3f3f3;
--shadow-secondary-text-color: #333333;
/* spacing */
--shadow-spacing-scale: var(--shadow-spacing-scale-base, 1);
/* media */
--shadow-gift-thumbnail-size: 60px;
--shadow-thumbnail-size: clamp(40px, var(--shadow-gift-thumbnail-size), 200px);
--shadow-thumbnail-flex-direction: row;
--shadow-thumbnail-order: -1;
--shadow-thumbnail-margin-left: 0;
--shadow-thumbnail-margin-right: 0.6em;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
.gift-block__launcher .icon-wrapper svg,
:host(wrapped-extension) gift-block-launcher [part="container"] label svg,
:host(wrapped-extension) [feature="gift-option"] [part="container"] label svg,
:host(wrapped-gift-block) gift-block-option-heading label svg {
box-sizing: border-box;
border: calc(var(--shadow-field-border-width) + 0.5px) solid;
border-radius: max(0px, calc(min(0.20625em, var(--shadow-border-radius-sm)) + min(var(--shadow-border-radius-sm) * 1000, var(--shadow-field-border-width) - 1px)));
height: calc(var(--shadow-font-size-base) * 0.7875 + 3.5 * var(--shadow-field-border-width) - 0.5px);
overflow: visible;
width: calc(var(--shadow-font-size-base) * 0.7875 + 3.5 * var(--shadow-field-border-width) - 0.5px);
}
.checkmark-icon {
fill: none;
stroke-linecap: var(--shadow-tick-cap, round);
stroke-linejoin: var(--shadow-tick-join, round);
stroke-width: 1.5px;
}
gift-block-launcher:not([variant="inline"]) {
display: flex;
flex-direction: column;
gap: var(--shadow-spacing-xs);
align-items: var(--shadow-launcher-button-alignment);
& gift-block-visibility-notice {
display: block;
font-family: var(--shadow-font-family);
font-size: smaller;
font-weight: var(--shadow-font-weight-base);
font-style: var(--shadow-button-font-style);
letter-spacing: var(--shadow-button-letter-spacing);
padding: 0 var(--shadow-block-padding-inline-end, var(--shadow-spacing-sm)) 0 var(--shadow-block-padding-inline-start, var(--shadow-spacing-sm));
text-transform: var(--shadow-button-text-transform);
width: 100%;
}
}
.gift-block__launcher {
background-color: var(--shadow-launcher-button-surface);
border-color: var(--shadow-launcher-button-border-surface);
border-width: var(--shadow-launcher-button-border-width, var(--shadow-border-width));
border-radius: var(--shadow-launcher-button-border-radius, var(--shadow-border-radius-sm));
border-style: solid;
color: var(--shadow-launcher-button-text-color);
padding: var(--shadow-block-padding);
font-family: var(--shadow-font-family);
font-size: var(--shadow-font-size-base);
font-weight: var(--shadow-launcher-button-font-weight);
font-style: var(--shadow-button-font-style);
letter-spacing: var(--shadow-button-letter-spacing);
max-width: var(--shadow-block-launcher-button-max-width, var(--shadow-launcher-button-max-width));
text-transform: var(--shadow-button-text-transform);
width: 100%;
&:hover {
cursor: pointer;
background-color: var(--shadow-primary-button-surface--hover);
border-color: var(--shadow-primary-button-border-surface--hover);
}
&:active {
background-color: var(--shadow-primary-button-surface--active);
border-color: var(--shadow-primary-button-border-surface--active);
}
&:focus,
&:focus-visible {
outline: none;
}
&[with-checkmark] {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--shadow-spacing-fixed);
& .icon-wrapper {
display: flex;
flex-shrink: 0;
}
&[with-gift-options] {
.checkmark-icon {
display: block;
/* animation: unblur calc(var(--shadow-transition-duration) * 3) ease forwards; */
}
}
}
&[variant="link"] {
background: none;
border: none;
color: var(--shadow-primary-text-color);
font-size: var(--shadow-font-size-base);
font-weight: var(--shadow-font-weight-base);
font-style: var(--shadow-button-font-style);
letter-spacing: var(--shadow-button-letter-spacing);
text-transform: var(--shadow-button-text-transform);
text-decoration: none;
margin-inline-start: -0.25rem;
padding: var(--shadow-block-padding-block-start, 0) var(--shadow-block-padding-inline-end, 0) var(--shadow-block-padding-block-end, 0) var(--shadow-block-padding-inline-start, 0);
width: auto;
&:hover {
cursor: pointer;
color: var(--shadow-primary-text-color--hover);
text-decoration: underline;
}
&[with-checkmark] {
padding-left: 0;
text-align: start;
word-break: keep-all;
}
& .button-content {
flex-direction: row;
justify-content: flex-start;
}
}
& .button-content {
display: inline-flex;
align-items: center;
gap: var(--shadow-spacing-fixed);
flex-direction: var(--shadow-launcher-button-content-flex-direction);
justify-content: var(--shadow-launcher-button-content-justify-content);
width: 100%;
& .label {
text-align: start;
}
}
& .icon-wrapper {
display: none;
align-items: center;
justify-content: center;
min-height: 1.5em;
min-width: 1.5em;
svg {
border-color: currentColor;
}
.checkmark-icon {
display: none;
stroke: currentColor;
}
}
}
.gift-block__launcher:disabled,
.gift-block__launcher[usage-limit-reached],
.gift-block__launcher[region-unavailable] {
cursor: var(--shadow-disabled-cursor);
opacity: var(--shadow-disabled-opacity);
pointer-events: none;
&[with-checkmark] {
.icon-wrapper {
opacity: var(--shadow-disabled-opacity-md);
}
}
}
/* gift block modal */
.gift-block-modal {
background-color: var(--shadow-primary-surface);
border: none;
border-radius: var(--shadow-border-radius-base);
box-shadow: 0 var(--shadow-shadow-offset) var(--shadow-shadow-blur) var(--shadow-shadow-color);
outline: var(--shadow-border-width) solid var(--shadow-block-border-surface);
padding: 0;
}
.gift-block-modal::backdrop {
background-color: rgba(156, 163, 175, 0.75);
}
.gift-block-modal:focus,
.gift-block-modal:focus-visible {
outline: var(--shadow-border-width) solid var(--shadow-block-border-surface);
}
@media (max-width: 768px) {
.gift-block-modal {
max-height: calc(100% - var(--shadow-spacing-sm));
max-width: calc(100% - var(--shadow-spacing-sm));
overscroll-behavior: contain;
}
}
/* gift block modal layout */
.gift-block-modal-layout {
display: grid;
grid-template-areas: var(--shadow-grid-template-areas);
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr auto;
max-height: 80dvh;
max-width: 80dvw;
overflow: hidden;
}
/* Collapse to 1-column layout if media is hidden */
.gift-block-modal-layout:has(section#media[hidden]),
.gift-block-modal-layout:has(section#media.with-media-inline),
.gift-block-modal-layout:not(:has(section#media)),
.gift-block-modal-layout:not(:has(section#media img)) {
grid-template-areas:
"gift-dialog-header"
"content"
"gift-block-actions";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr auto;
section#media {
display: none;
}
}
gift-dialog-header {
align-items: flex-start;
background-color: var(--shadow-primary-surface);
display: flex;
flex-direction: row;
gap: var(--shadow-spacing-fixed);
grid-area: gift-dialog-header;
justify-content: space-between;
padding: var(--shadow-spacing-lg);
position: sticky;
top: 0;
z-index: 1;
& h1 {
color: var(--shadow-primary-text-color);
font-family: var(--shadow-header-font-family);
font-size: var(--shadow-font-size-lg);
font-weight: var(--shadow-font-weight-md);
line-height: 1.25em;
margin: 0;
}
/* dismiss button styles */
& button {
background-color: color-mix(in srgb, var(--shadow-secondary-text-color) 8%, transparent);
color: var(--shadow-secondary-text-color);
border-radius: var(--shadow-border-radius-xs);
font-size: var(--shadow-font-size-sm);
font-weight: var(--shadow-font-weight-lg);
font-style: var(--shadow-button-font-style);
letter-spacing: var(--shadow-button-letter-spacing);
text-transform: var(--shadow-button-text-transform);
width: 2.25em;
height: 2.25em;
min-width: 2.25em;
min-height: 2.25em;
outline: none;
border: 0;
cursor: pointer;
transition: background-color var(--shadow-transition-duration) ease,
color var(--shadow-transition-duration) ease;
&:hover {
background-color: color-mix(in srgb, var(--shadow-secondary-text-color) 6%, var(--shadow-hover-style) 12%);
}
&:active {
background-color: color-mix(in srgb, var(--shadow-secondary-text-color) 16%, var(--shadow-hover-style) 16%);
}
&:disabled {
pointer-events: none;
opacity: var(--shadow-disabled-opacity);
}
}
}
.gift-block-modal-layout gift-block-actions {
background-color: var(--shadow-primary-surface);
bottom: 0;
grid-area: gift-block-actions;
overscroll-behavior: contain;
position: sticky;
z-index: 1;
/* the buttons live in the component's own shadow; only its layout knobs are ours */
--shadow-actions-gap: var(--shadow-spacing-sm);
--shadow-actions-padding: var(--shadow-spacing-lg);
}
gift-dialog-content {
display: contents;
}
section#media {
align-self: stretch;
background-color: var(--shadow-secondary-surface);
grid-area: media;
grid-row: 1 / 4;
height: 100%;
padding: var(--shadow-spacing-lg);
position: sticky;
top: 0;
transition: order var(--shadow-transition-duration) ease,
width var(--shadow-transition-duration) ease;
&.with-media-cover {
& img {
height: 100%;
}
}
&.with-media-fill {
padding: 0;
& img {
border-radius: 0;
height: 100%;
}
}
& shopify-media {
& img {
border-radius: var(--shadow-border-radius-sm);
width: 100%;
height: auto;
}
}
}
section#content {
grid-area: content;
background-color: var(--shadow-primary-surface);
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
padding: var(--shadow-spacing-lg);
padding-bottom: 0;
padding-top: 0;
position: relative; /* important to prevent content shifting when changing variants */
align-items: stretch;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: var(--shadow-spacing-lg);
transition: order var(--shadow-transition-duration) ease;
@media (max-width: 768px) {
& > *:first-child:not(:only-child) {
margin-top: unset;
}
}
& gift-block-option-heading {
display: block;
& span[part="label"] {
color: var(--shadow-primary-text-color);
display: block;
font-size: var(--shadow-font-size-base);
font-weight: var(--shadow-font-weight-md, 500);
line-height: 1.25em;
}
}
& .gift-option-group {
display: flex;
flex-direction: column;
gap: var(--shadow-spacing-lg);
}
/* gift product details */
& .gift-product {
display: flex;
flex-direction: column;
gap: var(--shadow-spacing-base);
}
& .gift-product-header {
align-items: center;
display: flex;
flex-direction: var(--shadow-thumbnail-flex-direction);
flex-wrap: wrap;
row-gap: var(--shadow-spacing-base);
column-gap: var(--shadow-spacing-sm);
}
& .gift-product-content {
display: flex;
flex: 1 1 50%;
flex-direction: column;
gap: var(--shadow-spacing-xs);
}
& .gift-product-media {
display: flex;
align-items: center;
&:has(shopify-media) {
--shadow-inline-media-max-size: var(--shadow-gift-thumbnail-size);
--shadow-inline-media-size: clamp(40px, var(--shadow-gift-thumbnail-size), var(--shadow-inline-media-max-size));
border-radius: var(--shadow-border-radius-sm);
height: var(--shadow-inline-media-size);
width: var(--shadow-inline-media-size);
overflow: hidden;
margin-inline-start: auto;
margin-inline-end: auto;
}
& shopify-media {
& img {
border-radius: var(--shadow-border-radius-sm);
width: 100%;
height: auto;
}
}
}
& .gift-product-title {
color: var(--shadow-primary-text-color);
display: var(--shadow-gift-product-title-display, block);
font-size: var(--shadow-font-size-base);
font-weight: var(--shadow-font-weight-md);
margin: 0;
}
& .gift-product-pricing {
display: flex;
gap: var(--shadow-spacing-xs);
margin: 0;
font-weight: var(--shadow-font-weight-base);
font-size: clamp(12px, calc(var(--shadow-font-size-base) * 0.94), 18px);
line-height: 1em;
}
& .gift-product-price {
color: var(--shadow-secondary-text-color);
}
& .gift-product-price--compare {
color: var(--shadow-secondary-text-color);
text-decoration: line-through;
opacity: var(--shadow-disabled-opacity);
}
& .gift-product-description {
font-weight: var(--shadow-font-weight-base);
color: var(--shadow-secondary-text-color);
font-size: clamp(12px, calc(var(--shadow-font-size-base) * 0.94), 18px);
line-height: 1.5em;
& shopify-data {
& :first-child {
margin-top: 0;
}
& :last-child {
margin-bottom: 0;
}
& ul {
padding-left: var(--shadow-spacing-lg);
}
}
}
}
:host(wrapped-gift-block) gift-block-option-heading label {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--shadow-spacing-sm);
}
:host(wrapped-gift-block[gift-option-optional]) section#content .gift-option-group {
border-radius: var(--shadow-border-radius-sm);
position: relative;
}
:host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) section#content .gift-option-group {
pointer-events: none;
}
:host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) section#content .gift-option-group::after {
background-color: color-mix(in srgb, var(--shadow-primary-surface) 62%, transparent);
border-radius: inherit;
content: '';
inset: calc(var(--shadow-spacing-sm) * -1);
position: absolute;
}
/* shopify variant selector */
:host(wrapped-extension) gift-variant-selector {
--shadow-picker-padding: var(--shadow-block-padding-block-start, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-end, var(--shadow-spacing-base)) var(--shadow-block-padding-block-end, var(--shadow-spacing-sm)) var(--shadow-block-padding-inline-start, var(--shadow-spacing-base));
--shadow-picker-rows-padding: var(--shadow-block-padding);
}
:host(wrapped-extension[saving="true"]) gift-variant-selector {
--shadow-picker-opacity: 0.7;
--shadow-picker-pointer-events: none;
}
:host(wrapped-gift-block[gift-option-optional]:not([gift-option-included])) gift-variant-selector {
--shadow-picker-selection-color: var(--shadow-form-element-border-color);
--shadow-picker-selection-width: var(--shadow-field-border-width);
--shadow-picker-swatch-selection-color: rgba(0, 0, 0, .1);
}
:host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) gift-variant-selector,
:host(wrapped-gift-block[gift-option-optional="true"]:not([gift-option-included])) gift-variant-selector {
--shadow-picker-card-accent: color-mix(in srgb, var(--shadow-form-element-border-color) 25%, transparent);
--shadow-picker-card-opacity: 0.8;
--shadow-picker-card-ring: transparent;
--shadow-picker-radio-appearance: none;
--shadow-picker-radio-border: var(--shadow-field-border-width) solid var(--shadow-form-element-border-color);
--shadow-picker-radio-surface: var(--shadow-form-element-surface);
--shadow-picker-row-shadow: none;
--shadow-picker-row-surface: initial;
}
wrapped-message-field {
gap: var(--shadow-spacing-xs);
& label {
color: var(--shadow-secondary-text-color);
font-size: var(--shadow-font-size-sm);
font-weight: var(--shadow-font-weight-base);
line-height: 1em;
}
& :is(input, textarea) {
background-color: var(--shadow-form-element-surface);
border: none;
border-radius: var(--shadow-border-radius-sm);
color: var(--shadow-form-element-text-color);
font-family: var(--shadow-font-family);
font-size: var(--shadow-font-size-base);
margin: 0;
min-height: 42px;
outline: var(--shadow-field-border-width) solid var(--shadow-form-element-border-color);
padding: var(--shadow-spacing-sm);
width: 100%;
}
& :is(input, textarea):is(:active, :focus, :focus-visible) {
outline-color: var(--shadow-form-element-selection-color);
outline-width: var(--shadow-outline-width);
}
& :is(input, textarea)::placeholder {
color: var(--shadow-form-element-placeholder-text-color);
}
& textarea {
min-height: 100px;
resize: vertical;
}
& span.counter {
align-self: flex-end;
color: var(--shadow-secondary-text-color);
font-size: var(--shadow-font-size-sm);
line-height: normal;
}
}
wrapped-message-field[disabled] {
cursor: var(--shadow-disabled-cursor);
opacity: var(--shadow-disabled-opacity-md);
pointer-events: none;
transition: background-color var(--shadow-transition-duration) ease,
color var(--shadow-transition-duration) ease;
& :is(input, textarea) {
background-color: var(--shadow-form-element-surface--disabled);
color: transparent;
outline-color: var(--shadow-form-element-border-color--disabled);
}
}
:host(wrapped-extension) {
background-color: var(--shadow-primary-surface) !important;
border: var(--shadow-border-width) solid var(--shadow-block-border-surface) !important;
border-radius: var(--shadow-border-radius-sm) !important;
color: var(--shadow-primary-text-color) !important;
display: flex;
flex-direction: column !important;
font-size: var(--shadow-font-size-base) !important;
height: fit-content !important;
margin-block-start: var(--shadow-block-margin-start, var(--shadow-block-margin-block-start)) !important;
margin-block-end: var(--shadow-block-margin-end, var(--shadow-block-margin-block-end)) !important;
min-width: unset !important;
max-width: 640px !important;
overflow: hidden !important;
padding: unset !important;
width: unset !important;
}
:host(wrapped-extension[option-type="order"]) {
margin-left: var(--shadow-block-margin-inline-start, auto) !important;
margin-right: var(--shadow-block-margin-inline-end, 0) !important;
width: -moz-available !important;
width: -webkit-fill-available !important;
width: stretch !important;
}
:host(wrapped-extension[target-group="drawer"]) {
width: -moz-available !important;
width: -webkit-fill-available !important;
width: stretch !important;
}
:host(wrapped-extension[target-group="drawer"][option-type="order"]) {
max-width: unset !important;
margin-left: var(--shadow-block-margin-inline-start, 0) !important;
margin-right: var(--shadow-block-margin-inline-end, 0) !important;
margin-block-end: var(--shadow-block-margin-end, calc(var(--shadow-block-margin-block-end) * 0.5)) !important;
}
wrapped-advanced-mode,
wrapped-basic-mode {
display: contents;
}
:host(wrapped-extension) [part="feature"],
:host(wrapped-extension) gift-block-launcher {
overflow: hidden !important;
& [part="container"] {
display: flex;
flex-direction: column;
row-gap: 0.25em;
& label {
align-items: center !important;
column-gap: var(--shadow-spacing-sm) !important;
cursor: pointer !important;
display: flex;
line-height: normal !important;
margin: 0 !important;
pointer-events: auto !important;
text-align: left !important;
text-transform: unset !important;
}
}
}
:host(wrapped-extension) [part="feature"] {
background-color: var(--shadow-secondary-surface);
}
:host(wrapped-extension) [part="feature"]:is([feature="variant"], [feature="gift-option"]) {
display: block;
}
:host(wrapped-extension) [part="feature"][enabled="false"] {
display: none;
opacity: 0;
visibility: hidden;
}
:host(wrapped-extension) [part="disclosure"] {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.25s cubic-bezier(0.42, 0, 0.58, 1);
}
:host(wrapped-extension) [part="disclosure-content"] {
display: flex;
flex-direction: column;
min-height: 0;
opacity: 0;
overflow: hidden;
visibility: hidden;
transition: opacity 0.25s, visibility 0.25s;
}
:host(wrapped-extension[expanded="true"]) gift-block-launcher:has(~ [part="disclosure"] [part="feature"][enabled="true"]:not([singular="true"])) {
border-bottom: var(--shadow-border-width) solid var(--shadow-block-border-surface);
}
:host(wrapped-extension[expanded="true"]) [part="disclosure"],
:host(wrapped-extension[hidden-checkbox="true"]) [part="disclosure"] {
grid-template-rows: 1fr;
}
:host(wrapped-extension[expanded="true"]) [part="disclosure-content"],
:host(wrapped-extension[hidden-checkbox="true"]) [part="disclosure-content"] {
opacity: 1;
visibility: visible;
}
:host(wrapped-extension[hidden-checkbox="true"]) gift-block-launcher {
display: none;
opacity: 0;
visibility: hidden;
}
:host(wrapped-extension[limited="true"]),
:host(wrapped-extension[region-unavailable="true"]) {
cursor: none !important;
pointer-events: none !important;
opacity: 0.6 !important;
& [part="container"] {
& label {
pointer-events: none !important;
}
}
}
:host(wrapped-extension[saving="true"]) {
& [part="container"] {
& label {
pointer-events: none !important;
& svg, input[type="radio"], span {
opacity: 0.7 !important;
transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
}
& select {
pointer-events: none !important;
opacity: 0.7 !important;
}
& button {
pointer-events: none;
opacity: 0.7;
transition: opacity 300ms cubic-bezier(0.25, 0.1, 0.25, 1);
}
}
}
:host(wrapped-extension) gift-block-launcher [part="container"] {
padding: var(--shadow-block-padding);
& label {
padding: 0 !important;
& span {
&[part="label"] {
border: unset !important;
flex-grow: 1;
padding: unset !important;
}
&[part="pricing"] {
align-content: center;
font-size: var(--shadow-font-size-sm);
white-space: nowrap;
}
&[part="thumbnail"] {
background-color: var(--shadow-form-element-surface);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
border-radius: var(--shadow-border-radius-sm);
min-height: var(--shadow-thumbnail-size);
max-height: var(--shadow-thumbnail-size);
min-width: var(--shadow-thumbnail-size);
max-width: var(--shadow-thumbnail-size);
height: 100%;
width: 100%;
display: inline-block;
overflow: hidden;
vertical-align: middle;
order: var(--shadow-thumbnail-order);
margin-right: var(--shadow-thumbnail-margin-right);
margin-left: var(--shadow-thumbnail-margin-left);
}
}
}
}
:host(wrapped-extension) [feature="gift-option"] [part="container"] {
padding: var(--shadow-block-padding);
& label {
align-items: center;
cursor: pointer;
display: flex;
gap: var(--shadow-spacing-sm);
}
& span[part="label"] {
color: var(--shadow-primary-text-color);
display: block;
font-size: var(--shadow-font-size-base);
font-weight: var(--shadow-font-weight-md, 500);
line-height: 1.25em;
}
}
:host(wrapped-extension) gift-block-launcher [part="container"] label,
:host(wrapped-extension) [feature="gift-option"] [part="container"] label,
:host(wrapped-gift-block) gift-block-option-heading label {
position: relative;
& input[type="checkbox"] {
height: 1px;
margin: 0;
opacity: 0;
pointer-events: none;
position: absolute;
width: 1px;
}
& svg {
background: var(--shadow-form-element-surface);
border-color: var(--shadow-form-element-border-color);
cursor: pointer;
flex: 0 0 auto;
& .checkmark-icon {
display: none;
}
}
& input:checked + svg {
background: var(--shadow-selection-checked-surface);
border-color: var(--shadow-selection-checked-surface);
& .checkmark-icon {
display: block;
stroke: white;
}
}
& input:focus-visible + svg {
outline: var(--shadow-outline-width) solid var(--shadow-form-element-selection-color);
outline-offset: var(--shadow-field-border-width);
}
}
:host(wrapped-extension[hidden-checkbox="false"][gift-option-optional="false"]) [feature="variant"][enabled="true"][singular="true"] {
display: none;
}
:host(wrapped-extension[gift-option-optional="true"]) .gift-option-group {
transition: opacity 0.25s cubic-bezier(0.42, 0, 0.58, 1);
}
:host(wrapped-extension[gift-option-optional="true"]:not([gift-option-included])) .gift-option-group {
opacity: 0.5;
pointer-events: none;
}
:host(wrapped-extension[gift-option-optional="true"]) [feature="variant"][singular="true"] gift-variant-selector {
--shadow-picker-list-overflow: auto;
}
:host(wrapped-extension) gift-block-message {
--shadow-message-gap: var(--shadow-spacing-sm);
--shadow-message-padding: var(--shadow-block-padding);
--shadow-message-input-flex: 1 1 40%;
& wrapped-message-field {
& label {
color: var(--shadow-primary-text-color);
}
& textarea {
min-height: var(--shadow-textarea-min-height);
}
}
}
:host(wrapped-extension) gift-block-actions {
--shadow-actions-gap: var(--shadow-spacing-xs);
--shadow-actions-padding: var(--shadow-block-padding);
}
/* media queries */
/* md - and above */
@media (min-width: 768px) {
:host {
--shadow-section-max-width: 420px;
}
gift-dialog-content > section {
min-width: var(--shadow-section-max-width);
max-width: var(--shadow-section-max-width);
}
gift-dialog-header,
.gift-block-modal-layout gift-block-actions {
min-width: var(--shadow-section-max-width);
max-width: var(--shadow-section-max-width);
}
}
/* md - and below */
@media (max-width: 768px) {
:host {
--shadow-section-max-width: 390px;
}
gift-dialog-content > section {
min-width: var(--shadow-section-max-width);
max-width: var(--shadow-section-max-width);
}
gift-dialog-header,
.gift-block-modal-layout gift-block-actions {
min-width: var(--shadow-section-max-width);
max-width: var(--shadow-section-max-width);
}
gift-dialog-header {
padding: var(--shadow-spacing-base);
}
.gift-block-modal-layout gift-block-actions {
--shadow-actions-padding: var(--shadow-spacing-base);
}
.gift-block-modal-layout {
grid-template-areas:
"gift-dialog-header"
"media"
"content"
"gift-block-actions";
grid-template-columns: 1fr;
grid-template-rows: auto auto 1fr auto;
max-height: calc(100dvh - var(--shadow-spacing-base));
max-width: 100dvw;
}
gift-dialog-content {
display: grid;
grid-template-areas:
"media"
"content";
grid-template-columns: 1fr;
grid-template-rows: auto 1fr;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
section#media {
background: none;
grid-row: auto;
position: relative;
padding: 0;
& shopify-media {
& img {
border-radius: unset;
min-height: var(--shadow-section-max-width);
max-height: var(--shadow-section-max-width);
}
}
}
section#content {
overflow-y: unset;
padding: var(--shadow-spacing-base);
&.with-media-inline {
padding-top: 0;
}
& .gift-product-media {
&:has(shopify-media) {
--shadow-inline-media-max-size: 330px;
}
}
}
}
/* sm - and below */
@media (max-width: 480px) {
:host {
--shadow-section-max-width: 100%;
}
section#media {
& shopify-media {
& img {
border-radius: unset;
min-height: 350px;
max-height: 350px;
}
}
}
}
@keyframes unblur {
from { filter: blur(2px); }
to { filter: blur(0px); }
}
JavaScript is required to view this page.
Skip to content
living freely & lightly cover reveal
February 7, 2022
In my first book,
Freely and Lightly , I shared my story of how learning to trust in who God is and who He says we are results in the true rest and peace we're all in search of. It has been met with such a kind response and -
even better! - so many of you have shared the ways my vulnerable words have made you feel seen and understood and encouraged to take a deep breath and continue on asking questions, finding answers, and resting in God's goodness and love for you.
I'm so excited to tell you about my newest book, a lovely little companion to F&L, called
Living Freely and Lightly.
Living Freely and Lightly guides you through each step of your identity journey with thoughtful questions that gently challenge, prayers to start a conversation, scripture verses to encourage, and plenty of space to reflect and process as you go deeper and invite Jesus' transforming power to work in you. My desire in creating this journal was to find a way to take you through the same process I went through, made especially for those of you who do not naturally do this on your own.
I look forward to sharing much more with you about the journal ... but today, let's talk about the cute cover!
the cover
Since I am definitely a person who judges a book by its cover, I think it's fun to share with you all the behind-the-scenes of designing one.
(You can read about the
cover of Freely and Lightly here . And the
cover of Twirl here .)
After we had our title, but before the journal was actually written, we began brainstorming ideas for the cover. My publishing company is so kind to ask about my wishes for the cover and allow me to give my opinion and make suggestions along the way. I'm truly so grateful.
The designer then came up with a few initial designs:
Loved the linen, loved the simplicity, but they didn't totally feel like a companion to the book ... so we kept going.
Here was round two:
It was helpful to see the designs next to the book to see how they coordinated.
There will be an o-wrap (maybe that's what it's called?! Or a belly band?!) anyway, there will be a piece of paper that wraps the journal to hold all of the bookstore details. It will be removed once you start using it, so we wanted the journal to be great both with the wrap and without. All three designs totally work (I actually really love the peacock blue one), but it felt like pulling inspiration from the end sheets of F&L (
seen here ) felt the most special. And maybe most eye-catching, which is always good for those book-cover-judgers like me.
After tweaking the artwork arrangement and adjusting the color of the wrap, here's where we landed:
Isn't it wonderful?! I love all the artwork. And love the tiny stretch of stripes as a nod to the book.
The final cover will be printed on linen book cloth which makes me so happy (I really love how it makes it feel so special!) and there will be ribbon bookmark (because a ribbon bookmark also makes it feel special!).
We'll definitely be talking much more about this journal (can't wait to show you the inside pages!) as well as special gifts you'll get when you preorder. Details to come!
Preorder a copy of Living Freely and Lightly today
Choosing a selection results in a full page refresh.
Opens in a new window.
Are you sure? keep only on this device
You have already saved {{itemCount}} of 5 items so you won't be able to save more on this device
Login and sync
Yes, only on this device
Disclaimer: By logging in you are providing your consent to save the wishlist data.