in your HTML */
background: var(--card-content-bg);
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem; /* Padding for the bar */
/* background-color: rgba(255, 255, 255, 0.8); /* Optional: slight translucent bg for bar if needed over image */
border-bottom: 1px solid var(--soft-border); /* Subtle separator */
width: 100%;
flex-shrink: 0; /* Prevent bar from shrinking */
position: relative; /* Ensure it's part of the stacking context */
z-index: 10; /* Above main background image, but below absolute close button */
}
/* Ensure direct children of .describe-lovedone-modal-content stack above the ::before
and have transparent backgrounds if you want the image to show through. */
.describe-lovedone-modal-content .modal-close-icon-button[b-fdkf2jl7tu],
.describe-lovedone-modal-content .describe-header[b-fdkf2jl7tu],
.describe-lovedone-modal-content .describe-main-content-modal-inner[b-fdkf2jl7tu],
.describe-lovedone-modal-content .describe-modal-footer-actions[b-fdkf2jl7tu] {
position: relative; /* To ensure they are part of the stacking context above ::before */
z-index: 1; /* Explicitly stack above the pseudo-element if any doubt */
/* If these sections should let the background image show through, make their background transparent */
/* background-color: transparent; /* OR a semi-transparent color */
}
.describe-lovedone-modal-content .modal-close-icon-button[b-fdkf2jl7tu] {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
font-size: 1.6rem;
font-weight: 300;
color: var(--text-light);
cursor: pointer;
line-height: 1;
padding: 8px;
transition: color 0.2s ease;
/* z-index: 10; /* Ensured by parent having z-index and this being a normal child */
}
.describe-lovedone-modal-content .modal-close-icon-button:hover[b-fdkf2jl7tu] {
color: var(--text);
}
.describe-header[b-fdkf2jl7tu] {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
flex-shrink: 0;
padding: 0 0.5rem; /* This header is optional as per your HTML comments */
background-color: transparent; /* If you want BG image to show through header */
}
.page-logo-simple[b-fdkf2jl7tu] {
font-family: var(--font-sans) !important;
font-size: 1.4rem;
font-weight: 600;
color: var(--text);
}
.page-logo-simple .logo-accent-text[b-fdkf2jl7tu] {
color: var(--accent);
}
.describe-main-content-modal-inner[b-fdkf2jl7tu] {
flex-grow: 1;
overflow-y: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem; /*padding: 0.5rem 1rem 1.5rem 1rem;*/
background-color: transparent; /* Allows parent's ::before to show */
scrollbar-width: thin;
scrollbar-color: var(--accent) var(--card-image-placeholder-bg);
}
.describe-main-content-modal-inner[b-fdkf2jl7tu]::-webkit-scrollbar {
width: 6px;
}
.describe-main-content-modal-inner[b-fdkf2jl7tu]::-webkit-scrollbar-track {
background: var(--card-image-placeholder-bg);
border-radius: 3px;
}
.describe-main-content-modal-inner[b-fdkf2jl7tu]::-webkit-scrollbar-thumb {
background-color: var(--accent);
border-radius: 3px;
}
.loved-one-image-placeholder[b-fdkf2jl7tu] {
width: 160px;
height: 160px;
border-radius: 50%;
background-color: rgba(247, 245, 242, 0.8); /* var(--card-image-placeholder-bg) with some transparency */
margin: 0.5rem auto 1.5rem auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 5px solid rgba(255,255,255,0.7); /* Semi-transparent white border */
box-shadow: 0 4px 10px rgba(0,0,0,0.08);
flex-shrink: 0;
}
.loved-one-image-placeholder img[b-fdkf2jl7tu] {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-upload-prompt[b-fdkf2jl7tu] {
text-align: center;
color: var(--text-light);
}
.image-upload-prompt .fas[b-fdkf2jl7tu] {
font-size: 2.2rem;
margin-bottom: 0.5rem;
display: block;
opacity: 0.5;
}
.image-upload-prompt span[b-fdkf2jl7tu] {
font-size: 0.85rem;
}
.describe-modal-title[b-fdkf2jl7tu] {
font-family: var(--font-sans) !important;
font-size: 2rem;
font-weight: 700;
color: var(--text);
margin-bottom: 0.6rem;
line-height: 1.2;
}
.describe-modal-subtitle[b-fdkf2jl7tu] {
text-align:left;
max-width:480px !important;
font-size: 0.95rem;
color: var(--text-light);
line-height: 1.5;
max-width: 90%;
margin: 0 auto 1.8rem auto;
position: relative;
z-index: 1;
}
.describe-modal-subtitle[b-fdkf2jl7tu]::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 110%;
height: 130%;
background: rgba(255,255,255, 0.68); /* soft white */
filter: blur(13px);
z-index: -1; /* behind the text */
border-radius: 18px;
pointer-events: none;
}
.form-group-describe[b-fdkf2jl7tu] {
margin-bottom: 1rem;
width: 100%;
max-width: 480px;
}
.sr-only[b-fdkf2jl7tu] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.input-lovedone-name-modal[b-fdkf2jl7tu],
.textarea-lovedone-description-modal[b-fdkf2jl7tu] {
width: 100%;
padding: 12px 16px;
font-size: 0.95rem;
border-radius: 10px;
border: 1px solid #D8D0C9; /*#E0D8D1;*/
background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
color: var(--text);
line-height: 1.5;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 1px 3px rgba(0,0,0,0.02) inset;
}
.textarea-lovedone-description-modal[b-fdkf2jl7tu] {
min-height: 130px;
resize: vertical;
}
.input-lovedone-name-modal[b-fdkf2jl7tu]::placeholder, .textarea-lovedone-description-modal[b-fdkf2jl7tu]::placeholder {
color: #b8b0ac;
}
.input-lovedone-name-modal:focus[b-fdkf2jl7tu], .textarea-lovedone-description-modal:focus[b-fdkf2jl7tu] {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 3px rgba(255, 196, 179, 0.25);
}
.textarea-hint[b-fdkf2jl7tu] {
display: block;
text-align: left;
font-size: 0.75rem;
color: var(--text-light);
margin-top: 0.3rem;
padding-left: 0.1rem;
}
.describe-modal-footer-actions[b-fdkf2jl7tu] {
width: 100%;
max-width: 480px;
margin: 1rem auto 0 auto;
padding-top: 1rem;
border-top: 1px solid var(--soft-border);
display: flex;
justify-content: flex-end;
gap: 1rem;
flex-shrink: 0;
background-color: transparent; /* Allow main modal ::before to show through */
}
.btn-primary-action.btn-continue-describe-modal[b-fdkf2jl7tu] {
background-color: var(--peach);
color: var(--text);
padding: 0.7rem 1.6rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-primary-action.btn-continue-describe-modal:hover[b-fdkf2jl7tu] {
background-color: var(--accent);
}
.btn-primary-action.btn-continue-describe-modal:disabled[b-fdkf2jl7tu] {
background-color: #E0D8D1;
color: var(--text-light);
cursor: wait;
}
.spinner-inline-light[b-fdkf2jl7tu] {
width: 0.9em;
height: 0.9em;
border: 2px solid rgba(var(--text-rgb, 75, 46, 46),0.3);
border-top-color: var(--text);
border-radius: 50%;
display: inline-block;
animation: spin-b-fdkf2jl7tu 0.8s linear infinite;
margin-right: 0.5rem;
vertical-align: -0.1em;
}
@keyframes spin-b-fdkf2jl7tu {
to {
transform: rotate(360deg);
}
}
.btn-secondary-action.btn-skip-describe-modal[b-fdkf2jl7tu] {
background-color: transparent;
color: var(--text-light);
border: 1px solid var(--soft-border);
padding: 0.7rem 1.6rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 500;
}
.btn-secondary-action.btn-skip-describe-modal:hover[b-fdkf2jl7tu] {
background-color: var(--card-image-placeholder-bg);
border-color: var(--peach);
}
.example-block[b-fdkf2jl7tu] {
background: rgba(255,255,255,0.65);
border-radius: 12px;
padding: 1.2rem 1.5rem 1rem 1.5rem;
margin: 1.2rem auto 0 auto;
max-width: 500px;
box-shadow: 0 2px 12px rgba(204,170,150,0.06);
font-size: 0.75rem;
text-align:left;
}
.example-block label[b-fdkf2jl7tu] {
display: block;
font-weight: 600;
color: #795548;
margin-bottom: 0.7rem;
font-size: 1.09rem;
letter-spacing: 0.02em;
}
.example-list[b-fdkf2jl7tu] {
margin: 0 0 0.2rem 0;
padding: 0;
list-style: none;
}
.example-list li[b-fdkf2jl7tu] {
margin: 0.22rem 0;
padding: 0.2rem 0.7rem;
border-radius: 8px;
transition: background 0.15s;
cursor: pointer;
color: #574133;
}
.example-list li:hover[b-fdkf2jl7tu] {
background: #faede3;
color: #b76e1b;
}
.example-instruction[b-fdkf2jl7tu] {
color: #af967b;
margin-top: 0.6rem;
text-align: center;
font-style: italic;
}
.modal-content.describe-lovedone-modal-content[b-fdkf2jl7tu] {
display: flex;
flex-direction: column;
max-height: calc(100vh - 4rem);
overflow: hidden;
/* ...other styles... */
}
.describe-modal-top-bar[b-fdkf2jl7tu] {
flex: 0 0 auto;
z-index: 2;
}
.describe-modal-bg-content[b-fdkf2jl7tu] {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
/* padding-top: 1rem; Optional if you want space above content */
}
.describe-main-content-modal-inner[b-fdkf2jl7tu] {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 1.5rem;
background-color: transparent;
}
.describe-modal-top-bar[b-fdkf2jl7tu] {
box-shadow: 0 2px 8px rgba(220,180,140,0.06);
}
.tags-selection-area[b-fdkf2jl7tu] {
margin-top: 1rem;
width: 100%;
}
.tags-container[b-fdkf2jl7tu] {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center; /* Center the tags */
margin-top: 1rem;
margin-bottom: 1rem
}
.tag-chip[b-fdkf2jl7tu] { /* Same as .tag-option-button in PrivateReflectionModal */
background-color: transparent;
color: var(--text-light);
border: 1px solid #E0D8D1; /* Lighter border */
border-radius: 15px;
padding: 0.45rem 1rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tag-chip:hover[b-fdkf2jl7tu] {
border-color: var(--peach);
background-color: #FFF9F7; /* Very subtle hover */
}
.tag-chip.selected[b-fdkf2jl7tu] { /* Same as .active in PrivateReflectionModal */
background-color: var(--peach);
color: var(--text);
border-color: var(--accent);
font-weight: 500;
}
/* ALSO ADD: Better spacing for the form group */
.form-group-describe .tags-selection-area[b-fdkf2jl7tu] {
background: rgba(255,255,255,0.75); /* Slightly transparent like example-block */
border-radius: 12px;
padding: 1.2rem 1.5rem;
margin: 1.2rem auto 0 auto;
max-width: 500px;
box-shadow: 0 2px 12px rgba(204,170,150,0.06);
}
.missing-trait-feedback[b-fdkf2jl7tu] {
text-align: center;
margin-top: 1.1rem;
font-size: 0.92em;
color: #9e8262;
}
.missing-trait-feedback .feedback-link[b-fdkf2jl7tu] {
color: #a4886c;
text-decoration: none;
transition: color 0.15s;
cursor: pointer;
}
.missing-trait-feedback .feedback-link:hover[b-fdkf2jl7tu],
.missing-trait-feedback .feedback-link:focus[b-fdkf2jl7tu] {
color: var(--accent); /* Or a soft peach if you want */
text-decoration: underline;
}
.feedback-link-highlight[b-fdkf2jl7tu] {
color: var(--accent);
font-weight: 500;
}
.missing-trait-feedback[b-fdkf2jl7tu] {
text-align: center;
margin-top: 1.1rem;
font-size: 0.98em;
color: #a4886c; /* lighter brown */
letter-spacing: 0.01em;
}
.missing-trait-feedback .feedback-link[b-fdkf2jl7tu] {
color: var(--accent, #e59174); /* use your accent color */
font-weight: 600;
text-decoration: none;
border: none;
background: none;
font-size: inherit;
padding: 0 0.08em;
margin-left: 0.25em;
cursor: pointer;
transition: color 0.16s, text-decoration 0.14s;
border-radius: 4px;
}
.missing-trait-feedback .feedback-link:hover[b-fdkf2jl7tu],
.missing-trait-feedback .feedback-link:focus[b-fdkf2jl7tu] {
color: #c77657; /* a bit deeper accent */
text-decoration: underline;
background: rgba(250, 230, 225, 0.45); /* very subtle highlight */
outline: none;
}
.lovedone-preview-section[b-fdkf2jl7tu] {
width: 100%;
max-width: 480px;
margin: 2.2rem auto 0 auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.1rem;
}
.preview-label[b-fdkf2jl7tu] {
font-size: 0.93rem;
font-weight: 500;
color: var(--accent);
margin-bottom: 0.6rem;
padding-left: 0.3rem;
}
/*.ai-message-bubble {
background: rgba(253, 246, 241, 0.88);
border-radius: 20px 20px 20px 8px;
box-shadow: 0 2px 8px rgba(202,180,140,0.10);
padding: 1.1rem 1.4rem 1.1rem 1.2rem;
font-size: 1rem;
color: #5c4636;
max-width: 90%;
margin-bottom: 0.3rem;
min-height: 2.6em;
display: inline-block;
transition: background 0.2s;
word-break: break-word;
border: 1px solid #f4e1d4;
text-align:left;
}*/
.btn-refresh-preview[b-fdkf2jl7tu] {
background: var(--peach);
color: var(--text);
border: none;
font-size: 0.96rem;
border-radius: 18px;
font-weight: 500;
padding: 0.54rem 1.2rem;
margin-bottom: 0.2rem;
box-shadow: 0 2px 6px rgba(215,176,128,0.07);
cursor: pointer;
transition: background 0.18s, color 0.18s;
}
.btn-refresh-preview:disabled[b-fdkf2jl7tu] {
opacity: 0.7;
background: #f9ece6;
color: #d3b295;
cursor: wait;
}
.ai-preview-row[b-fdkf2jl7tu] {
width: 100%;
max-width: 620px;
margin: 1.2rem auto 0 auto;
display: flex;
justify-content: flex-start;
}
.ai-message-bubble[b-fdkf2jl7tu] {
background: #fff9f5;
border-radius: 20px;
padding: 1.4rem 2rem;
font-size: 1.15rem;
color: #533a2a;
box-shadow: 0 3px 15px rgba(220,180,140,0.11);
font-family: var(--font-sans) !important;
margin-left: 0;
margin-right: 0;
max-width: 410px;
min-width: 120px;
word-break: break-word;
line-height: 1.45;
text-align: left;
border: 1.5px solid #fae3d3;
position: relative;
}
.ai-message-bubble.fade-in[b-fdkf2jl7tu] {
opacity: 0;
animation: fadeInBubble-b-fdkf2jl7tu 0.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fadeInBubble-b-fdkf2jl7tu {
to {
opacity: 1;
}
}
.lovedone-preview-controls-row[b-fdkf2jl7tu] {
width: 100%;
max-width: 480px;
margin: 2.2rem auto 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.1rem;
}
.ai-preview-row[b-fdkf2jl7tu] {
width: 100%;
max-width: 620px;
margin: 1.2rem auto 0 auto;
display: flex;
justify-content: flex-start;
}
.ai-message-bubble[b-fdkf2jl7tu] {
background: #fff9f5;
border-radius: 20px;
padding: 1.4rem 2rem;
font-size: 1rem;
color: #533a2a;
box-shadow: 0 3px 15px rgba(220,180,140,0.11);
font-family: var(--font-sans) !important;
margin-left: 0;
margin-right: 0;
max-width: 410px;
min-width: 120px;
word-break: break-word;
line-height: 1.45;
text-align: left;
border: 1.5px solid #fae3d3;
position: relative;
}
.ai-message-bubble.fade-in[b-fdkf2jl7tu] {
opacity: 0;
animation: fadeInBubble-b-fdkf2jl7tu 0.4s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes fadeInBubble-b-fdkf2jl7tu {
to {
opacity: 1;
}
}
.ai-message-bubble[b-fdkf2jl7tu] {
background: #FCF6F2;
color: #573618;
border-radius: 18px 18px 4px 18px;
padding: 1.1rem 1.6rem 1.1rem 1.5rem;
max-width: 410px;
min-width: 120px;
box-shadow: 0 2px 8px rgba(203,173,144,0.07);
margin-left: auto; /* Aligns the bubble right */
/*margin-right: 0;
border: 1.5px solid #fae3d3;
font-family: var(--font-inter, Inter, Arial, sans-serif);
line-height: 1.45;
text-align: left;*/
/* Optional: */
word-break: break-word;
position: relative;
}
.btn-save-preview:hover[b-fdkf2jl7tu],
.btn-save-preview:focus[b-fdkf2jl7tu] {
background: #ffc7b1;
color: #402d1d;
box-shadow: 0 4px 14px rgba(220,180,140,0.10);
}
.lovedone-preview-controls-row[b-fdkf2jl7tu] {
width: 100%;
max-width: 620px;
margin: 2.2rem auto 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.1rem;
flex-wrap: wrap;
}
.btn-save-preview[b-fdkf2jl7tu] {
background: var(--peach);
color: #573618;
border: none;
font-family: var(--font-sans) !important;
font-size: 1.06rem;
font-weight: 600;
padding: 1rem 2.2rem;
border-radius: 22px;
cursor: pointer;
box-shadow: 0 2px 10px rgba(220,180,140,0.09);
transition: background 0.18s, color 0.18s;
}
.btn-save-preview:hover[b-fdkf2jl7tu], .btn-save-preview:focus[b-fdkf2jl7tu] {
background: var(--accent);
color: #fff;
}
.btn-refresh-preview[b-fdkf2jl7tu] {
background: transparent;
color: #a07d68;
border: 2px solid #f7e2d4;
font-family: var(--font-sans) !important;
font-size: 1.05rem;
font-weight: 500;
padding: 1rem 2.2rem;
border-radius: 22px;
cursor: pointer;
transition: background 0.17s, color 0.17s, border-color 0.17s;
}
.btn-refresh-preview:hover[b-fdkf2jl7tu], .btn-refresh-preview:focus[b-fdkf2jl7tu] {
background: #fff6ef;
border-color: var(--accent);
color: #573618;
}
@media (max-width: 640px) {
.lovedone-preview-controls-row[b-fdkf2jl7tu] {
flex-direction: column;
align-items: stretch;
gap: 0.6rem;
}
.btn-save-preview[b-fdkf2jl7tu],
.btn-refresh-preview[b-fdkf2jl7tu] {
width: 100%;
text-align: center;
font-size: 1rem;
}
}
.notification-message[b-fdkf2jl7tu] {
margin: 1rem 0 0.5rem 0;
padding: 0.75rem 1.2rem;
background: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
border-radius: 10px;
font-size: 0.98rem;
text-align: left;
box-shadow: 0 2px 8px rgba(220,180,140,0.07);
max-width: 480px;
margin-left: auto;
margin-right: auto;
opacity: 1;
transition: opacity 0.3s;
}
.fade-in[b-fdkf2jl7tu] {
animation: fadeInNotification-b-fdkf2jl7tu 0.4s cubic-bezier(.4,0,.2,1) forwards;
opacity: 0;
}
@keyframes fadeInNotification-b-fdkf2jl7tu {
to {
opacity: 1;
}
}
@media (max-width: 640px) {
.ai-message-bubble[b-fdkf2jl7tu],
.ai-preview-row[b-fdkf2jl7tu] {
max-width: 100%;
min-width: 0;
font-size: 1.03rem;
padding: 1.1rem 0.8rem;
}
}
.preview-hint-below[b-fdkf2jl7tu] {
font-size: 0.97em;
color: #a07d68;
font-style: italic;
margin-top: 0.2em;
text-align: left;
opacity: 0.8;
line-height: 1.3;
}
.profile-suggestion-block[b-fdkf2jl7tu] {
margin-top: 1rem;
text-align: left;
max-width: 460px;
margin-left: auto;
margin-right: auto;
}
.profile-suggestion-text[b-fdkf2jl7tu] {
font-size: 0.87rem;
color: #6b4a3a;
line-height: 1.5;
}
.profile-suggestion-sub[b-fdkf2jl7tu] {
color: #947460;
}
.profile-link[b-fdkf2jl7tu] {
color: #b76e1b; /* A warm golden-brown that fits your theme */
font-weight: 500;
text-decoration: none;
margin-left: 0.3rem;
cursor: pointer;
transition: color 0.2s ease;
}
.profile-link:hover[b-fdkf2jl7tu] {
color: #8c4e1e;
text-decoration: underline;
}
@media (max-width: 480px) {
.modal-content[b-fdkf2jl7tu] {
width: 100% !important;
height: 100vh !important;
max-height: none !important;
border-radius: 0 !important;
padding: 1.5rem 1rem !important;
box-shadow: none !important;
overflow-y: auto !important;
}
}
@media (max-width: 480px) {
.modal-overlay[b-fdkf2jl7tu] {
align-items: flex-start;
}
.modal-content[b-fdkf2jl7tu] {
margin-top: 0;
}
}
/* /Components/DescribeStep.razor.rz.scp.css */
/* === Ensure styles reach into the component === */
button.btn-modal-primary[b-qzsqfewpjs] {
background-color: #fbbbad;
color: #38250d;
box-shadow: 0 2px 8px rgba(247,186,173,0.10);
padding: 0.8em 2.5em;
border-radius: 25px;
font-size: 1.11rem;
font-weight: 600;
border: none;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: -0.5px;
}
button.btn-modal-primary:hover[b-qzsqfewpjs] {
background-color: #f9ac9c;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(247,186,173,0.15);
}
button.btn-modal-tertiary[b-qzsqfewpjs] {
background: none;
color: #a37a4c;
border: 1.2px solid #efd7bb;
padding: 0.8em 1.8em;
border-radius: 25px;
font-size: 1.11rem;
font-weight: 600;
outline: none;
cursor: pointer;
transition: all 0.2s ease;
letter-spacing: -0.5px;
}
button.btn-modal-tertiary:hover[b-qzsqfewpjs] {
background-color: rgba(239, 215, 187, 0.15);
border-color: #e8c8a0;
}
.step-buttons[b-qzsqfewpjs] {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 2rem;
}
textarea[b-qzsqfewpjs] {
width: 100%;
border: 1.3px solid #f0e1d0;
background: #fff9f4;
border-radius: 15px;
padding: 0.92em 1.1em;
font-size: 1.06rem;
color: #473b26;
transition: border 0.18s, height 0.3s;
box-sizing: border-box;
outline: none;
margin-bottom: 1.2em;
min-height: 120px;
resize: vertical;
}
textarea:focus[b-qzsqfewpjs] {
border-color: #fbbbad;
background: #fff6f0;
}
/* More comfortable textarea on desktop */
@media (min-width: 992px) {
textarea[b-qzsqfewpjs] {
min-height: 250px;
font-size: 1.1rem;
line-height: 1.5;
}
}
.example-label[b-qzsqfewpjs] {
font-size: 0.95rem;
color: #a37a4c;
font-weight: 600;
margin-top: 1rem;
margin-bottom: 0.5rem;
}
.example-stories[b-qzsqfewpjs] {
background: #fff3ea;
border-radius: 18px;
padding: 1.2em 1.5em;
font-size: 0.95rem;
line-height: 1.5;
color: #967f6b;
margin-bottom: 1.5em;
max-height: 400px;
overflow-y: auto;
border-left: 3px solid #fbbbad;
}
/* Improved example stories container on desktop */
@media (min-width: 992px) {
.example-stories[b-qzsqfewpjs] {
max-height: 400px;
padding: 1.4em 1.8em;
font-size: 1rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.2em;
align-items: start;
}
.example-stories p[b-qzsqfewpjs] {
margin: 0;
}
}
.example-stories p[b-qzsqfewpjs] {
margin: 0 0 1.2em 0;
font-style: italic;
white-space: pre-line; /* Preserves line breaks from the text */
}
.example-stories p:last-child[b-qzsqfewpjs] {
margin-bottom: 0;
}
/* /Components/EmailSignUpModal.razor.rz.scp.css */
/* ========================================= */
/* Email Sign Up Modal Styling */
/* ========================================= */
/* --- Modal Overlay (Shared?) --- */
/* If this is shared with other modals, keep it separate */
.modal-overlay[b-opvqfbrn1r] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(40, 25, 15, 0.55); /* Dim overlay */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 9999;
}
.modal-overlay.visible[b-opvqfbrn1r] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
/* --- Modal Content Box --- */
.modal-content.email-signup-modal[b-opvqfbrn1r] {
background-color: rgb(255, 242, 236); /* Match page background */
padding: 25px 35px 30px 35px;
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative; /* Needed for pseudo-element & absolute buttons */
max-width: 400px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
z-index: 10000; /* Ensure content is above overlay and shared chrome */
}
/* Optional Background Layer (if desired) */
.modal-content.email-signup-modal[b-opvqfbrn1r]::before {
content: '';
position: absolute;
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
background: rgba(255, 255, 255, 0.6); /* Semi-transparent white */
/* Optional blur: filter: blur(5px); */
border-radius: 22px; /* Slightly more rounded */
z-index: -1; /* Behind the main content */
}
.modal-overlay.visible .modal-content.email-signup-modal[b-opvqfbrn1r] {
transform: scale(1);
}
/* --- Header Elements --- */
/* Back and Close Buttons */
.email-signup-modal .back-btn[b-opvqfbrn1r],
.email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
position: absolute;
top: 18px;
background: none;
border: none;
font-size: 1.6rem;
font-weight: 300;
color: #a1a1aa; /* Slightly muted color */
cursor: pointer;
line-height: 1;
padding: 5px;
transition: color 0.2s ease;
z-index: 10; /* Ensure clickable */
}
.email-signup-modal .back-btn[b-opvqfbrn1r] {
left: 15px;
}
.email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
right: 15px;
}
.email-signup-modal .back-btn:hover[b-opvqfbrn1r],
.email-signup-modal .modal-close-btn:hover[b-opvqfbrn1r] {
color: #52525b; /* Darker on hover */
}
/* Title */
.email-signup-modal h2[b-opvqfbrn1r] {
font-size: 1.5rem;
font-weight: 600;
color: #5c4033; /* Dark brown color */
margin-top: 5px; /* Reduced top margin */
margin-bottom: 8px;
padding: 0 30px; /* Prevent overlap with close/back buttons */
text-align: center;
line-height: 1.3;
position: relative;
z-index: 1;
}
/* Subtext / Description */
.email-signup-modal p[b-opvqfbrn1r] {
font-size: 0.95rem;
color: #7d6c66; /* Muted brown color */
margin-bottom: 20px;
line-height: 1.4;
text-align: center;
position: relative;
z-index: 1;
}
/* --- Form Elements --- */
.email-signup-modal .form-input[b-opvqfbrn1r] {
width: 100%;
padding: 12px 15px;
font-size: 1rem;
border-radius: 10px;
border: 1px solid #dcd6d4; /* Light border */
margin-bottom: 15px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
text-align: left;
background-color: #fff;
position: relative;
z-index: 1;
}
.email-signup-modal .form-input[b-opvqfbrn1r]::placeholder {
color: #b0a9a7;
}
.email-signup-modal .form-input:focus[b-opvqfbrn1r] {
border-color: #ff9d7e; /* Highlight color */
outline: none;
box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.2);
}
/* Error Message Styling */
.email-signup-modal .modal-error-message[b-opvqfbrn1r] {
color: var(--error-color, #dc3545); /* Use CSS variable or specific color */
font-size: 0.85rem;
margin-top: -10px; /* Position below input */
margin-bottom: 15px;
text-align: left;
position: relative;
z-index: 1;
}
/* Submit Button */
.email-signup-modal .btn-email-submit[b-opvqfbrn1r] {
width: 100%;
padding: 12px;
border-radius: 10px;
background-color: #ff9d7e; /* Primary action color */
color: white;
font-size: 1rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s ease, opacity 0.2s ease;
position: relative;
z-index: 1;
display: flex; /* For aligning spinner and text */
justify-content: center;
align-items: center;
}
.email-signup-modal .btn-email-submit:hover:not(:disabled)[b-opvqfbrn1r] { /* Hover only when not disabled */
background-color: #ff855f; /* Darker shade */
}
/* Disabled state for button and input */
.email-signup-modal .btn-email-submit:disabled[b-opvqfbrn1r],
.email-signup-modal .form-input:disabled[b-opvqfbrn1r] {
opacity: 0.7;
cursor: not-allowed;
}
/* Basic spinner */
.email-signup-modal .spinner[b-opvqfbrn1r] {
display: inline-block;
border: 2px solid rgba(255, 255, 255, 0.4); /* Light border for contrast on button */
border-radius: 50%;
border-top-color: #fff; /* Spinner color */
width: 1em;
height: 1em;
animation: spin-b-opvqfbrn1r 1s linear infinite;
margin-right: 8px;
vertical-align: middle;
position: relative;
top: -1px;
}
@keyframes spin-b-opvqfbrn1r {
to {
transform: rotate(360deg);
}
}
/* Ensure button text aligns nicely when spinner is present */
.email-signup-modal .btn-email-submit span[b-opvqfbrn1r] {
vertical-align: middle;
}
/* --- Success State Styling --- */
.email-signup-modal .success-title[b-opvqfbrn1r] {
color: var(--success-color, #28a745); /* Use CSS variable or specific color */
font-weight: 600; /* Make it stand out a bit */
}
.email-signup-modal .btn-close-success[b-opvqfbrn1r] {
width: 100%;
padding: 12px;
border-radius: 10px;
background-color: #ff9d7e; /* Match submit button style */
color: white;
font-size: 1rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
margin-top: 15px; /* Space above button */
position: relative;
z-index: 1;
}
.email-signup-modal .btn-close-success:hover[b-opvqfbrn1r] {
background-color: #ff855f;
}
/* Adjust success message text positioning/spacing if needed */
.email-signup-modal h2.success-title + p[b-opvqfbrn1r] {
margin-bottom: 20px; /* Ensure space before button */
text-align: center;
position: relative;
z-index: 1;
}
@media (max-width: 768px) {
.modal-overlay[b-opvqfbrn1r] {
align-items: stretch;
justify-content: center;
width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100svh;
padding: 0;
overflow: hidden;
background: #fff9f5;
}
.modal-content.email-signup-modal[b-opvqfbrn1r] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: none;
min-height: 100vh;
min-height: 100dvh;
padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
border-radius: 0;
background: #fff9f5;
box-shadow: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: none;
box-sizing: border-box;
}
.modal-content.email-signup-modal[b-opvqfbrn1r]::before {
display: none;
}
.modal-overlay.visible .modal-content.email-signup-modal[b-opvqfbrn1r] {
transform: none;
}
.email-signup-modal .back-btn[b-opvqfbrn1r],
.email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
top: calc(10px + env(safe-area-inset-top, 0px));
width: 44px;
height: 44px;
padding: 0;
font-size: 1.7rem;
color: #8f7d75;
}
.email-signup-modal .back-btn[b-opvqfbrn1r] {
left: calc(12px + env(safe-area-inset-left, 0px));
}
.email-signup-modal .modal-close-btn[b-opvqfbrn1r] {
right: calc(12px + env(safe-area-inset-right, 0px));
}
.email-signup-modal h2[b-opvqfbrn1r],
.email-signup-modal p[b-opvqfbrn1r],
.email-signup-modal .form-input[b-opvqfbrn1r],
.email-signup-modal .modal-error-message[b-opvqfbrn1r],
.email-signup-modal .btn-email-submit[b-opvqfbrn1r],
.email-signup-modal .btn-close-success[b-opvqfbrn1r] {
width: 100%;
max-width: 360px;
}
.email-signup-modal h2[b-opvqfbrn1r] {
font-size: 2rem;
line-height: 1.15;
}
.email-signup-modal p[b-opvqfbrn1r] {
margin-bottom: 24px;
padding: 0;
line-height: 1.42;
}
.email-signup-modal .form-input[b-opvqfbrn1r],
.email-signup-modal .btn-email-submit[b-opvqfbrn1r],
.email-signup-modal .btn-close-success[b-opvqfbrn1r] {
min-height: 52px;
}
}
@media (max-width: 768px) and (max-height: 720px) {
.modal-content.email-signup-modal[b-opvqfbrn1r] {
padding-top: calc(64px + env(safe-area-inset-top, 0px));
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.email-signup-modal h2[b-opvqfbrn1r] {
font-size: 1.45rem;
}
.email-signup-modal p[b-opvqfbrn1r] {
margin-bottom: 18px;
font-size: 0.92rem;
}
}
/* Shared editorial form treatment; authentication behavior is unchanged. */
.modal-content.email-signup-modal[b-opvqfbrn1r] { background: var(--lov-surface); color: var(--lov-ink); border-radius: 8px; box-shadow: 0 16px 48px #20271f26; }
.modal-content.email-signup-modal[b-opvqfbrn1r]::before { display: none; }
.email-signup-modal h2[b-opvqfbrn1r], .email-signup-modal .modal-form-content h2[b-opvqfbrn1r] { color: var(--lov-ink); font-family: var(--font-serif); }
.email-signup-modal p[b-opvqfbrn1r], .email-signup-modal .password-requirements[b-opvqfbrn1r], .email-signup-modal .passwordless-login-link[b-opvqfbrn1r] { color: var(--lov-muted); }
.email-signup-modal .form-input[b-opvqfbrn1r] { background: var(--lov-paper); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 6px; }
.email-signup-modal .form-input[b-opvqfbrn1r]::placeholder { color: var(--lov-muted); }
.email-signup-modal .form-input:focus[b-opvqfbrn1r] { border-color: var(--lov-green); box-shadow: none; outline: 2px solid var(--lov-focus); outline-offset: 2px; }
.email-signup-modal .btn-email-submit[b-opvqfbrn1r], .email-signup-modal .btn-email-submit:hover:not(:disabled)[b-opvqfbrn1r], .email-signup-modal .btn-close-success[b-opvqfbrn1r] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; box-shadow: none; }
.email-signup-modal .back-btn[b-opvqfbrn1r], .email-signup-modal .modal-close-btn[b-opvqfbrn1r] { color: var(--lov-muted); min-width: 44px; min-height: 44px; }
.email-signup-modal .auth-text-link[b-opvqfbrn1r], .email-signup-modal .auth-text-link:hover[b-opvqfbrn1r] { color: var(--lov-green); }
.email-signup-modal .modal-tabs[b-opvqfbrn1r] { border-color: var(--lov-line); }
.email-signup-modal .modal-tabs button[b-opvqfbrn1r] { color: var(--lov-muted); }
.email-signup-modal .modal-tabs button.active[b-opvqfbrn1r] { color: var(--lov-ink); border-bottom-color: var(--lov-green); }
.email-signup-modal .modal-tabs button:focus-visible[b-opvqfbrn1r] { outline: 2px solid var(--lov-focus); outline-offset: 2px; box-shadow: none; }
@media(max-width:768px) { .modal-content.email-signup-modal[b-opvqfbrn1r] { border-radius: 0; } }
.email-signup-modal .back-btn:hover[b-opvqfbrn1r], .email-signup-modal .modal-close-btn:hover[b-opvqfbrn1r] { color: var(--lov-ink); }
.email-signup-modal .modal-error-message[b-opvqfbrn1r] { background: #fff0eb; color: #8c3127; padding: 10px 14px; border-radius: 6px; }
/* /Components/FamilyInvitationModal.razor.rz.scp.css */
.family-invite-overlay[b-1lfon25q4c] {
position: fixed;
inset: 0;
z-index: 1200;
display: grid;
place-items: center;
padding: 1rem;
background: rgba(45, 34, 31, .54);
backdrop-filter: blur(5px);
}
.family-invite-dialog[b-1lfon25q4c] {
position: relative;
width: min(100%, 34rem);
max-height: min(90vh, 48rem);
overflow-y: auto;
padding: clamp(1.4rem, 4vw, 2.25rem);
border: 1px solid rgba(123, 90, 83, .18);
border-radius: 1.5rem;
background: #fffaf8;
color: #3d302d;
box-shadow: 0 24px 70px rgba(48, 34, 30, .25);
}
.family-invite-close[b-1lfon25q4c] {
position: absolute;
top: .75rem;
right: .9rem;
border: 0;
background: transparent;
color: #715c56;
font-size: 1.8rem;
cursor: pointer;
}
.family-invite-eyebrow[b-1lfon25q4c] {
margin: 0 0 .35rem;
color: #9a6258;
font-size: .75rem;
font-weight: 750;
letter-spacing: .12em;
text-transform: uppercase;
}
.family-invite-dialog h2[b-1lfon25q4c] {
margin: 0;
font-family: Georgia, serif;
font-size: clamp(1.55rem, 5vw, 2rem);
}
.family-invite-intro[b-1lfon25q4c] {
margin: .65rem 0 1rem;
color: #695652;
}
.family-invite-trust-note[b-1lfon25q4c] {
display: flex;
gap: .65rem;
align-items: flex-start;
margin: 0 0 1.25rem;
padding: .85rem 1rem;
border-radius: .9rem;
background: #f7ebe6;
color: #664e48;
font-size: .9rem;
}
.family-invite-field[b-1lfon25q4c] {
display: grid;
gap: .4rem;
}
.family-invite-field label[b-1lfon25q4c] {
font-weight: 700;
}
.family-invite-field[b-1lfon25q4c] input {
width: 100%;
padding: .85rem 1rem;
border: 1px solid #d8c1b9;
border-radius: .8rem;
background: #fff;
color: inherit;
}
.family-invite-submit[b-1lfon25q4c],
.family-invite-copy[b-1lfon25q4c] {
width: 100%;
margin-top: .85rem;
padding: .8rem 1rem;
border: 0;
border-radius: 999px;
background: #7b5a53;
color: #fff;
font-weight: 750;
cursor: pointer;
}
.family-invite-submit:disabled[b-1lfon25q4c],
.family-invite-copy:disabled[b-1lfon25q4c] {
cursor: not-allowed;
opacity: .55;
}
.family-invite-message[b-1lfon25q4c],
.family-invite-loading[b-1lfon25q4c] {
margin: .7rem 0 0;
font-size: .9rem;
}
.family-invite-error[b-1lfon25q4c] {
color: #9b2f2f;
}
.family-invite-success[b-1lfon25q4c] {
display: grid;
gap: .25rem;
margin-top: 1rem;
padding: 1rem;
border-radius: 1rem;
background: #eaf4ec;
color: #35523b;
}
.family-invite-copy[b-1lfon25q4c] {
width: auto;
justify-self: start;
background: #fff;
color: #5f4943;
box-shadow: inset 0 0 0 1px #bfa9a1;
}
.family-access-list[b-1lfon25q4c] {
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid #e7d8d2;
}
.family-access-list h3[b-1lfon25q4c] {
margin: 0 0 .65rem;
font-size: 1rem;
}
.family-access-row[b-1lfon25q4c] {
display: flex;
gap: .75rem;
align-items: center;
justify-content: space-between;
padding: .75rem 0;
border-bottom: 1px solid #eee2dd;
}
.family-access-row div[b-1lfon25q4c] {
display: grid;
min-width: 0;
}
.family-access-row span[b-1lfon25q4c] {
overflow-wrap: anywhere;
color: #76645f;
font-size: .82rem;
}
.family-access-row button[b-1lfon25q4c] {
flex: none;
border: 0;
background: transparent;
color: #8b5147;
cursor: pointer;
text-decoration: underline;
}
body.night-mode .family-invite-dialog[b-1lfon25q4c] {
border-color: rgba(255, 255, 255, .14);
background: var(--secondary-bg);
color: var(--text-dark);
}
body.night-mode .family-invite-intro[b-1lfon25q4c],
body.night-mode .family-access-row span[b-1lfon25q4c] {
color: var(--text-light);
}
body.night-mode .family-invite-trust-note[b-1lfon25q4c],
body.night-mode .family-invite-success[b-1lfon25q4c] {
background: rgba(255, 255, 255, .08);
color: var(--text-dark);
}
body.night-mode .family-invite-field[b-1lfon25q4c] input,
body.night-mode .family-invite-copy[b-1lfon25q4c] {
border-color: rgba(255, 255, 255, .18);
background: rgba(0, 0, 0, .18);
color: var(--text-dark);
}
body.night-mode .family-access-list[b-1lfon25q4c],
body.night-mode .family-access-row[b-1lfon25q4c] {
border-color: rgba(255, 255, 255, .12);
}
/* /Components/FamilyMemoryReviewModal.razor.rz.scp.css */
.family-review-overlay[b-z5fy9x12da] { position: fixed; inset: 0; z-index: 2150; display: grid; place-items: center; padding: clamp(.85rem,3vw,1.5rem); background: rgba(38,29,22,.64); backdrop-filter: blur(10px); }
.family-review-dialog[b-z5fy9x12da] { position: relative; width: min(100%,620px); max-height: 92vh; overflow: auto; border: 1px solid rgba(196,154,108,.22); border-radius: 20px; background: radial-gradient(circle at 50% 0%,rgba(255,238,216,.72),transparent 48%),linear-gradient(180deg,#fffdf8,#fff4e7); box-shadow: 0 24px 70px rgba(55,39,27,.24); }
.family-review-close[b-z5fy9x12da] { position: absolute; top: .8rem; right: 1rem; z-index: 1; border: 0; border-radius: 50%; background: transparent; color: #765d49; font-size: 1.7rem; cursor: pointer; }
.family-review-header[b-z5fy9x12da] { padding: 2rem 2rem 1rem; text-align: center; }
.family-review-header p[b-z5fy9x12da] { margin: 0 0 .35rem; color: #a0664f; font: 700 .75rem/1.2 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; }
.family-review-header h2[b-z5fy9x12da],.family-review-empty h2[b-z5fy9x12da] { margin: 0; color: #33291f; font: 600 clamp(1.5rem,4vw,2rem)/1.15 var(--font-serif); }
.family-review-header span[b-z5fy9x12da] { display: block; margin-top: .5rem; color: #80675f; font: .82rem var(--font-sans); }
.family-review-body[b-z5fy9x12da] { padding: 0 clamp(1.1rem,4vw,2rem) 1.3rem; }
.family-review-image[b-z5fy9x12da] { display: block; width: 100%; max-height: 300px; object-fit: cover; border-radius: 14px; margin-bottom: 1rem; }
.family-review-body blockquote[b-z5fy9x12da] { margin: 0; padding: 1.1rem; border: 1px solid rgba(196,154,108,.2); border-radius: 14px; background: rgba(255,252,246,.78); color: #3a3228; font: 1rem/1.7 var(--font-serif); white-space: pre-wrap; }
.family-review-author[b-z5fy9x12da] { margin: .55rem .15rem 1rem; color: #765d49; font: .85rem var(--font-sans); }
.family-review-meaning[b-z5fy9x12da] { padding: .9rem 1rem; border-radius: 13px; background: #f9ece6; color: #65483f; font-family: var(--font-sans); }
.family-review-meaning strong[b-z5fy9x12da] { font-size: .9rem; }
.family-review-meaning p[b-z5fy9x12da] { margin: .28rem 0 0; font-size: .84rem; line-height: 1.5; }
.family-review-note[b-z5fy9x12da] { display: block; margin-top: 1rem; color: #65483f; font: 600 .85rem var(--font-sans); }
.family-review-note textarea[b-z5fy9x12da] { display: block; width: 100%; margin-top: .4rem; resize: vertical; border: 1px solid rgba(139,91,72,.25); border-radius: 12px; padding: .75rem; background: rgba(255,255,255,.75); color: #3a3228; font: .9rem/1.45 var(--font-sans); }
.family-review-error[b-z5fy9x12da] { color: #8b3f34; font: .85rem var(--font-sans); }
.family-review-actions[b-z5fy9x12da] { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .65rem; padding: 0 clamp(1.1rem,4vw,2rem) 1.6rem; }
.family-review-primary[b-z5fy9x12da],.family-review-secondary[b-z5fy9x12da] { border-radius: 999px; padding: .72rem 1.1rem; font: 650 .9rem var(--font-sans); cursor: pointer; }
.family-review-primary[b-z5fy9x12da] { border: 1px solid rgba(144,91,50,.18); background: linear-gradient(180deg,#f4c8a7,#e7b58f); color: #4a3122; }
.family-review-secondary[b-z5fy9x12da] { border: 1px solid rgba(164,123,80,.28); background: transparent; color: #6a5645; }
.family-review-empty[b-z5fy9x12da] { padding: 3rem 2rem 2rem; text-align: center; }
.family-review-empty > span[b-z5fy9x12da] { display: block; margin-bottom: .8rem; font-size: 2.2rem; }
.family-review-empty p[b-z5fy9x12da] { color: #80675f; font: .9rem/1.5 var(--font-sans); }
@media (max-width:540px) { .family-review-overlay[b-z5fy9x12da] { align-items: end; padding: 0; } .family-review-dialog[b-z5fy9x12da] { width: 100%; max-height: 95vh; border-radius: 20px 20px 0 0; } .family-review-actions[b-z5fy9x12da] { flex-direction: column-reverse; } .family-review-primary[b-z5fy9x12da],.family-review-secondary[b-z5fy9x12da] { width: 100%; } }
/* /Components/FamilyMomentsSelector.razor.rz.scp.css */
.family-moments-modal[b-xcr9dclecf] {
width: min(40rem, calc(100vw - 2rem));
max-height: calc(100dvh - 2rem);
margin: auto;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
box-sizing: border-box;
border: 1px solid var(--lov-line, #d9dace);
border-radius: 8px;
background: var(--lov-surface, #fffdf8);
color: var(--lov-ink, #30382d);
box-shadow: none;
}
.modal-overlay[b-xcr9dclecf] {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
box-sizing: border-box;
overflow: auto;
background: rgb(30 24 20 / 52%);
}
.modal-overlay.visible[b-xcr9dclecf] {
visibility: visible;
opacity: 1;
}
.family-moments-header[b-xcr9dclecf] {
padding: 1.375rem 4rem 0.75rem 1.5rem;
position: relative;
flex: 0 0 auto;
border-bottom: 1px solid var(--lov-line, #d9dace);
background: var(--lov-paper, #faf7f0);
text-align: left;
}
.family-moments-title[b-xcr9dclecf] {
margin: 0;
color: var(--lov-ink, #30382d);
font-family: var(--font-serif, Georgia, serif);
font-size: clamp(1.5rem, 3vw, 2rem);
font-weight: 700;
line-height: 1.15;
}
.family-moments-subtitle[b-xcr9dclecf] {
max-width: 42rem;
margin: 0.5rem 0 0;
color: var(--lov-muted, #62665c);
font-size: 1rem;
line-height: 1.5;
}
.modal-close-btn[b-xcr9dclecf] {
position: absolute;
inset-block-start: 0.75rem;
inset-inline-end: 0.75rem;
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0;
display: grid;
place-items: center;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--lov-ink, #30382d);
font-size: 1.5rem;
line-height: 1;
cursor: pointer;
}
.modal-close-btn:hover[b-xcr9dclecf] {
border-color: var(--lov-line, #d9dace);
background: var(--lov-surface, #fffdf8);
}
.modal-close-btn:focus-visible[b-xcr9dclecf] {
outline: 3px solid var(--lov-focus, #957137);
outline-offset: 2px;
}
.family-moments-body[b-xcr9dclecf] {
min-height: 0;
padding: 1rem 1.5rem 1.5rem;
flex: 1 1 auto;
overflow-y: auto;
overscroll-behavior: contain;
}
.family-moments-list[b-xcr9dclecf],
.family-moments-grid[b-xcr9dclecf],
.family-moments-grid-flexible[b-xcr9dclecf] {
display: grid;
gap: 0.75rem;
}
.family-moments-list-2col[b-xcr9dclecf],
.family-moments-grid-2x2[b-xcr9dclecf] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.family-moments-grid-flexible[b-xcr9dclecf] {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
.family-action-tile[b-xcr9dclecf] {
min-height: 3.25rem;
width: 100%;
padding: 0.75rem;
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 0.75rem;
box-sizing: border-box;
border: 1px solid var(--lov-line, #d9dace);
border-radius: 6px;
background: var(--lov-surface, #fffdf8);
color: var(--lov-ink, #30382d);
cursor: pointer;
font: inherit;
text-align: left;
transition: background 0.18s ease, border-color 0.18s ease;
}
.family-action-tile:hover[b-xcr9dclecf],
.family-action-tile:focus-visible[b-xcr9dclecf] {
border-color: var(--lov-green, #394d37);
background: var(--lov-selected, #e6eadf);
color: var(--lov-ink, #30382d);
}
.family-action-tile:focus-visible[b-xcr9dclecf] {
outline: 3px solid var(--lov-focus, #957137);
outline-offset: 2px;
}
.family-action-tile .tile-icon[b-xcr9dclecf] {
width: 2rem;
height: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 2rem;
color: var(--lov-green, #394d37);
}
.family-action-tile .tile-icon svg[b-xcr9dclecf] {
display: block;
}
.family-action-tile .tile-text[b-xcr9dclecf] {
color: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.3;
}
.tile-content[b-xcr9dclecf] {
min-width: 0;
display: flex;
flex-direction: column;
}
.family-moments-footer[b-xcr9dclecf] {
display: none;
}
@media (max-width: 540px) {
.family-moments-modal[b-xcr9dclecf] {
width: min(100%, calc(100vw - 1.5rem));
max-height: calc(100dvh - 1.5rem);
}
.family-moments-header[b-xcr9dclecf] {
padding: 1.125rem 3.75rem 0.75rem 1rem;
}
.family-moments-body[b-xcr9dclecf] {
padding: 0.875rem 1rem 1rem;
}
.family-moments-list-2col[b-xcr9dclecf],
.family-moments-grid-2x2[b-xcr9dclecf],
.family-moments-grid-flexible[b-xcr9dclecf] {
grid-template-columns: 1fr;
}
}
/* /Components/FamilyTreeDrillInEditor.razor.rz.scp.css */
/* The add dialog is a sibling of the tree, so it uses the shared app tokens. */
.family-add-dialog[b-pg99jkfwht] {
color: var(--lov-ink);
font-family: var(--font-sans, Inter, system-ui, sans-serif);
}
.family-add-dialog[b-pg99jkfwht] .family-add-backdrop {
padding: 1rem;
background: rgb(30 35 28 / 46%);
backdrop-filter: blur(3px);
}
.family-add-dialog[b-pg99jkfwht] .family-add-surface {
width: min(100%, 36rem);
max-height: calc(100dvh - 2rem);
padding: clamp(1.25rem, 4vw, 2rem);
border: 1px solid var(--lov-line);
border-radius: .75rem;
background: var(--lov-surface);
color: var(--lov-ink);
overscroll-behavior: contain;
text-align: left;
}
.family-add-heading[b-pg99jkfwht] {
padding-inline-end: 2.5rem;
margin-bottom: 1.5rem;
}
.family-add-heading h3[b-pg99jkfwht] {
color: var(--lov-ink);
font-family: var(--font-serif, Georgia, serif);
font-size: clamp(1.45rem, 3vw, 1.8rem);
line-height: 1.2;
margin: 0 0 .5rem;
}
.family-add-heading p[b-pg99jkfwht] {
color: var(--lov-muted);
line-height: 1.55;
margin: 0;
}
.family-add-close[b-pg99jkfwht] {
position: absolute;
top: 1rem;
right: 1rem;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
padding: 0;
border: 1px solid transparent;
border-radius: .4rem;
background: transparent;
color: var(--lov-muted);
cursor: pointer;
}
.family-add-grid[b-pg99jkfwht] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: 1rem;
}
.family-add-field[b-pg99jkfwht] {
display: flex;
flex-direction: column;
gap: .4rem;
min-width: 0;
}
.family-add-field-full[b-pg99jkfwht] { grid-column: 1 / -1; }
.family-add-field label[b-pg99jkfwht] {
flex: 1;
color: var(--lov-ink);
font-size: .9rem;
font-weight: 600;
line-height: 1.45;
margin: 0;
}
.family-add-field label span[b-pg99jkfwht] {
color: var(--lov-muted);
font-weight: 400;
}
/* InputSelect renders child HTML without this component's scope. */
.family-add-dialog[b-pg99jkfwht] .foyer-input {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 3rem;
padding: .65rem .8rem;
border: 1px solid var(--lov-line);
border-radius: .4rem;
background: var(--lov-paper);
color: var(--lov-ink);
font: inherit;
line-height: 1.5;
color-scheme: inherit;
}
.family-add-dialog[b-pg99jkfwht] .foyer-input:focus {
border-color: var(--lov-focus);
outline: 2px solid var(--lov-focus);
outline-offset: 2px;
}
.family-add-link-area[b-pg99jkfwht] {
display: grid;
justify-items: start;
gap: .25rem;
margin-top: 1.5rem;
padding: 1rem;
border: 1px solid var(--lov-line);
border-radius: .4rem;
background: var(--lov-paper);
}
.family-add-link-area h4[b-pg99jkfwht] {
color: var(--lov-ink);
font-family: inherit;
font-size: .9rem;
font-weight: 600;
line-height: 1.5;
margin: 0;
}
.family-add-link[b-pg99jkfwht] {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 2.75rem;
padding: .35rem 0;
border: 0;
background: transparent;
color: var(--lov-green);
font: inherit;
text-align: left;
text-decoration: underline;
text-underline-offset: .2em;
cursor: pointer;
}
.family-add-link svg[b-pg99jkfwht] { flex: 0 0 auto; }
.family-add-actions[b-pg99jkfwht] {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .75rem;
margin-top: 1.5rem;
padding-top: 1.25rem;
border-top: 1px solid var(--lov-line);
}
.family-add-cancel[b-pg99jkfwht],
.family-add-save[b-pg99jkfwht] {
min-height: 2.75rem;
padding: .65rem 1.1rem;
border: 1px solid var(--lov-line);
border-radius: .4rem;
font: inherit;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
}
.family-add-cancel[b-pg99jkfwht] { background: var(--lov-surface); color: var(--lov-ink); }
.family-add-save[b-pg99jkfwht] { background: var(--lov-green); color: var(--lov-on-green); border-color: var(--lov-green); }
.family-add-close:hover[b-pg99jkfwht],
.family-add-cancel:hover[b-pg99jkfwht] { background: var(--lov-selected); }
.family-add-save:hover[b-pg99jkfwht] { filter: brightness(.94); }
.family-add-save:disabled[b-pg99jkfwht] { opacity: .55; cursor: default; filter: none; }
.family-add-dialog button:focus-visible[b-pg99jkfwht] { outline: 2px solid var(--lov-focus); outline-offset: 3px; }
@media (max-width: 30rem) {
.family-add-dialog[b-pg99jkfwht] .family-add-backdrop { padding: .5rem; }
.family-add-dialog[b-pg99jkfwht] .family-add-surface { max-height: calc(100dvh - 1rem); }
.family-add-actions > button[b-pg99jkfwht] { flex: 1 1 auto; }
}
.family-drill-in[b-pg99jkfwht] {
--ledger-cream: var(--cream-50, #FBF7F0);
--ledger-panel: #FFFDF9;
--ledger-soft: #FFF7F1;
--ledger-border: rgba(139, 90, 43, 0.16);
--ledger-border-strong: rgba(139, 90, 43, 0.24);
--ledger-brown: #8B5A2B;
--ledger-ink: #4B2E2E;
--ledger-muted: #7D6A5D;
--ledger-peach: #E6B9A6;
--ledger-rose: #A86A62;
color: var(--ledger-ink);
font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
}
.family-drill-panel[b-pg99jkfwht] {
animation: family-panel-in-b-pg99jkfwht 180ms ease-out;
background: linear-gradient(180deg, var(--ledger-panel), var(--ledger-soft));
border: 1px solid var(--ledger-border);
border-radius: 14px;
padding: 20px;
}
.new-relative-promotion[b-pg99jkfwht] {
align-items: flex-start;
background: linear-gradient(135deg, #FFF8EE, #FFF1E5);
border: 1px solid var(--ledger-border-strong);
border-radius: 14px;
display: flex;
gap: 12px;
margin-top: 16px;
padding: 16px;
}
.promotion-spark[b-pg99jkfwht] {
color: var(--ledger-brown);
flex: 0 0 auto;
font-size: 1.35rem;
line-height: 1.2;
}
.promotion-copy[b-pg99jkfwht] {
min-width: 0;
}
.promotion-copy h4[b-pg99jkfwht] {
color: var(--ledger-ink);
font-family: var(--font-serif, Merriweather, Georgia, serif);
font-size: 1.05rem;
margin: 0;
}
.promotion-copy p[b-pg99jkfwht] {
color: var(--ledger-muted);
line-height: 1.5;
margin: 6px 0 12px;
}
.promotion-actions[b-pg99jkfwht] {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.promotion-actions .primary-button[b-pg99jkfwht],
.promotion-actions .outline-button[b-pg99jkfwht] {
min-height: 40px;
padding: 8px 13px;
}
.promotion-dismiss[b-pg99jkfwht] {
background: transparent;
border: 0;
color: var(--ledger-muted);
cursor: pointer;
font: inherit;
font-weight: 650;
padding: 8px 10px;
}
.promotion-dismiss:hover[b-pg99jkfwht] {
color: var(--ledger-ink);
}
@keyframes family-panel-in-b-pg99jkfwht {
from {
opacity: 0;
transform: translateX(10px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.family-empty[b-pg99jkfwht] {
color: var(--ledger-muted);
margin: 0;
}
.family-breadcrumbs[b-pg99jkfwht] {
align-items: center;
color: var(--ledger-muted);
display: flex;
flex-wrap: wrap;
font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
font-size: 0.92rem;
gap: 8px;
margin-bottom: 18px;
}
.breadcrumb-back[b-pg99jkfwht],
.quiet-icon-button[b-pg99jkfwht],
.add-relative-link[b-pg99jkfwht],
.ghost-link-button[b-pg99jkfwht],
.ghost-danger-button[b-pg99jkfwht],
.outline-button[b-pg99jkfwht],
.primary-button[b-pg99jkfwht],
.secondary-button[b-pg99jkfwht],
.remove-from-root-button[b-pg99jkfwht],
.submodal-close[b-pg99jkfwht],
.relative-quiet-card[b-pg99jkfwht] {
font: inherit;
}
.breadcrumb-back[b-pg99jkfwht] {
align-items: center;
background: transparent;
border: 0;
color: var(--ledger-brown);
cursor: pointer;
display: inline-flex;
font-weight: 700;
gap: 6px;
padding: 4px 0;
}
.breadcrumb-link[b-pg99jkfwht] {
background: transparent;
border: 0;
color: var(--ledger-muted);
cursor: pointer;
font: inherit;
font-weight: 700;
padding: 4px 0;
}
.breadcrumb-link:hover[b-pg99jkfwht] {
color: var(--ledger-brown);
}
.breadcrumb-back:hover[b-pg99jkfwht] {
color: #6F441D;
}
.breadcrumb-root[b-pg99jkfwht],
.breadcrumb-current[b-pg99jkfwht] {
font-weight: 650;
}
.breadcrumb-current[b-pg99jkfwht] {
color: var(--ledger-ink);
}
.breadcrumb-separator[b-pg99jkfwht] {
color: var(--ledger-peach);
}
.focused-person-header[b-pg99jkfwht] {
align-items: center;
display: flex;
justify-content: space-between;
gap: 16px;
margin-bottom: 18px;
}
.focused-person-copy[b-pg99jkfwht] {
align-items: center;
display: flex;
gap: 14px;
min-width: 0;
}
.focused-title-row[b-pg99jkfwht] {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 8px;
min-width: 0;
}
.focused-avatar[b-pg99jkfwht],
.relative-avatar[b-pg99jkfwht] {
background: #F5E4D2;
border: 1px solid rgba(139, 90, 43, 0.12);
border-radius: 999px;
flex: 0 0 auto;
overflow: hidden;
}
.focused-avatar[b-pg99jkfwht] {
height: 72px;
width: 72px;
}
.relative-avatar[b-pg99jkfwht] {
height: 48px;
width: 48px;
}
.focused-avatar img[b-pg99jkfwht],
.relative-avatar img[b-pg99jkfwht],
.linked-profile-summary img[b-pg99jkfwht] {
display: block;
height: 100%;
object-fit: cover;
width: 100%;
}
.focused-person-header h3[b-pg99jkfwht],
.relative-copy h4[b-pg99jkfwht],
.relationship-heading h4[b-pg99jkfwht],
.family-submodal h3[b-pg99jkfwht],
.profile-link-area h4[b-pg99jkfwht],
.linked-profile-summary h4[b-pg99jkfwht] {
font-family: var(--font-serif, Merriweather, Georgia, serif);
letter-spacing: 0;
}
.focused-person-header h3[b-pg99jkfwht] {
color: var(--ledger-ink);
font-size: 1.55rem;
line-height: 1.15;
margin: 0;
}
.focused-person-header p[b-pg99jkfwht] {
color: var(--ledger-muted);
font-size: 0.98rem;
font-weight: 600;
margin: 5px 0 0;
}
.quiet-icon-button[b-pg99jkfwht],
.submodal-close[b-pg99jkfwht] {
align-items: center;
background: transparent;
border: 1px solid transparent;
border-radius: 999px;
color: var(--ledger-brown);
cursor: pointer;
display: inline-flex;
justify-content: center;
}
.quiet-icon-button[b-pg99jkfwht] {
height: 36px;
width: 36px;
}
.quiet-icon-button:hover[b-pg99jkfwht],
.submodal-close:hover[b-pg99jkfwht] {
background: rgba(139, 90, 43, 0.08);
border-color: var(--ledger-border);
}
.relationship-section[b-pg99jkfwht] {
border: 1px solid var(--ledger-border);
border-radius: 12px;
margin-top: 10px;
padding: 12px;
}
.relationship-section-header[b-pg99jkfwht] {
align-items: center;
display: flex;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.relationship-heading[b-pg99jkfwht] {
align-items: center;
display: flex;
gap: 10px;
}
.relationship-heading h4[b-pg99jkfwht] {
color: var(--ledger-ink);
font-size: 1.03rem;
margin: 0;
}
.section-icon[b-pg99jkfwht] {
align-items: center;
color: var(--ledger-brown);
display: inline-flex;
height: 20px;
width: 20px;
}
.section-count[b-pg99jkfwht],
.linked-muted-badge[b-pg99jkfwht],
.context-muted-badge[b-pg99jkfwht],
.user-muted-badge[b-pg99jkfwht] {
background: rgba(139, 90, 43, 0.08);
border: 1px solid rgba(139, 90, 43, 0.08);
border-radius: 999px;
color: var(--ledger-brown);
font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
font-size: 0.74rem;
font-weight: 700;
line-height: 1;
padding: 5px 8px;
}
.context-muted-badge[b-pg99jkfwht] {
color: var(--ledger-muted);
}
.user-muted-badge[b-pg99jkfwht] {
background: rgba(95, 131, 88, 0.12);
border-color: rgba(95, 131, 88, 0.16);
color: #5f8358;
}
.relative-card-list[b-pg99jkfwht] {
display: grid;
gap: 8px;
}
.relative-quiet-card[b-pg99jkfwht] {
align-items: center;
appearance: none;
background: rgba(255, 253, 249, 0.86);
border: 1px solid var(--ledger-border);
border-radius: 10px;
color: inherit;
cursor: pointer;
display: grid;
gap: 12px;
grid-template-columns: auto minmax(0, 1fr) auto;
min-height: 64px;
padding: 10px 12px;
text-align: left;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
width: 100%;
}
.relative-quiet-card:hover[b-pg99jkfwht] {
background: #FFF9F4;
border-color: var(--ledger-border-strong);
transform: translateY(-1px);
}
.relative-quiet-card.locked-anchor[b-pg99jkfwht] {
background: rgba(251, 247, 240, 0.78);
}
.relative-copy[b-pg99jkfwht] {
display: grid;
gap: 3px;
min-width: 0;
}
.relative-title-row[b-pg99jkfwht] {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 7px;
min-width: 0;
}
.relative-copy h4[b-pg99jkfwht] {
color: var(--ledger-ink);
font-size: 0.98rem;
line-height: 1.2;
margin: 0;
overflow-wrap: anywhere;
}
.relative-meta[b-pg99jkfwht] {
color: var(--ledger-muted);
font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
font-size: 0.89rem;
font-style: italic;
}
.relative-chevron[b-pg99jkfwht] {
color: var(--ledger-brown);
display: inline-flex;
opacity: 0.78;
}
.add-relative-link[b-pg99jkfwht] {
align-items: center;
background: transparent;
border: 1px solid var(--ledger-border);
border-radius: 999px;
color: var(--ledger-brown);
cursor: pointer;
display: inline-flex;
font-weight: 700;
gap: 6px;
margin-top: 10px;
padding: 7px 12px;
}
.add-relative-link:hover[b-pg99jkfwht] {
background: rgba(230, 185, 166, 0.12);
}
.remove-from-root-button[b-pg99jkfwht] {
align-items: center;
background: rgba(255, 253, 249, 0.72);
border: 1px solid rgba(168, 106, 98, 0.28);
border-radius: 10px;
color: var(--ledger-rose);
cursor: pointer;
display: inline-flex;
font-weight: 700;
gap: 8px;
justify-content: center;
margin-top: 20px;
padding: 12px 14px;
width: 100%;
}
.remove-from-root-button:hover[b-pg99jkfwht] {
background: rgba(168, 106, 98, 0.08);
}
.identity-area[b-pg99jkfwht] {
align-items: center;
background: rgba(95, 131, 88, 0.08);
border: 1px solid rgba(95, 131, 88, 0.14);
border-radius: 12px;
display: grid;
gap: 14px;
grid-template-columns: minmax(0, 1fr) auto;
margin-top: 18px;
padding: 14px;
text-align: left;
}
.identity-area h4[b-pg99jkfwht] {
color: var(--ledger-ink);
font-family: var(--font-serif, Merriweather, Georgia, serif);
font-size: 1rem;
margin: 0 0 4px;
}
.identity-area p[b-pg99jkfwht] {
color: var(--ledger-muted);
font-family: "Helvetica Neue", var(--font-sans, Inter, system-ui, sans-serif);
font-size: 0.91rem;
line-height: 1.45;
margin: 0;
}
.identity-action-button[b-pg99jkfwht] {
align-items: center;
background: #FFFDF9;
border: 1px solid rgba(95, 131, 88, 0.28);
border-radius: 999px;
color: #5f8358;
cursor: pointer;
display: inline-flex;
font: inherit;
font-weight: 800;
gap: 7px;
justify-content: center;
min-height: 42px;
padding: 9px 14px;
white-space: nowrap;
}
.identity-action-button:hover[b-pg99jkfwht] {
background: rgba(95, 131, 88, 0.12);
}
.identity-action-button.is-current-user[b-pg99jkfwht] {
border-color: rgba(168, 106, 98, 0.24);
color: var(--ledger-rose);
}
.family-submodal-backdrop[b-pg99jkfwht] {
align-items: center;
background: rgba(40, 25, 15, 0.5);
display: flex;
inset: 0;
justify-content: center;
padding: 18px;
position: fixed;
z-index: 2300;
}
.family-submodal[b-pg99jkfwht] {
background: #FFFDF9;
border: 1px solid var(--ledger-border);
border-radius: 16px;
box-shadow: 0 18px 60px rgba(75, 46, 46, 0.18);
max-height: min(86vh, 760px);
max-width: 560px;
overflow: auto;
padding: 30px;
position: relative;
text-align: center;
width: min(100%, 560px);
}
.submodal-close[b-pg99jkfwht] {
height: 34px;
position: absolute;
right: 16px;
top: 14px;
width: 34px;
}
.family-submodal h3[b-pg99jkfwht] {
color: var(--ledger-ink);
font-size: 1.45rem;
margin: 0 36px 6px;
}
.family-submodal > p[b-pg99jkfwht],
.linked-profile-note[b-pg99jkfwht],
.profile-link-area p[b-pg99jkfwht] {
color: var(--ledger-muted);
line-height: 1.5;
margin: 0 auto 20px;
max-width: 440px;
}
.form-grid[b-pg99jkfwht] {
display: grid;
gap: 14px;
grid-template-columns: repeat(2, minmax(0, 1fr));
text-align: left;
}
.form-field[b-pg99jkfwht] {
display: grid;
gap: 6px;
}
.form-field-full[b-pg99jkfwht] {
grid-column: 1 / -1;
}
.form-field label[b-pg99jkfwht] {
color: var(--ledger-ink);
font-size: 0.9rem;
font-weight: 700;
}
.form-field label span[b-pg99jkfwht] {
color: var(--ledger-muted);
font-weight: 500;
}
.foyer-input[b-pg99jkfwht] {
background: #FFF9F4;
border: 1px solid var(--ledger-border-strong);
border-radius: 9px;
color: var(--ledger-ink);
min-height: 44px;
padding: 10px 12px;
width: 100%;
}
.foyer-input:focus[b-pg99jkfwht],
.breadcrumb-back:focus-visible[b-pg99jkfwht],
.breadcrumb-link:focus-visible[b-pg99jkfwht],
.quiet-icon-button:focus-visible[b-pg99jkfwht],
.add-relative-link:focus-visible[b-pg99jkfwht],
.relative-quiet-card:focus-visible[b-pg99jkfwht],
.primary-button:focus-visible[b-pg99jkfwht],
.secondary-button:focus-visible[b-pg99jkfwht],
.ghost-link-button:focus-visible[b-pg99jkfwht],
.ghost-danger-button:focus-visible[b-pg99jkfwht],
.identity-action-button:focus-visible[b-pg99jkfwht],
.outline-button:focus-visible[b-pg99jkfwht],
.remove-from-root-button:focus-visible[b-pg99jkfwht],
.submodal-close:focus-visible[b-pg99jkfwht] {
outline: 2px solid rgba(139, 90, 43, 0.42);
outline-offset: 3px;
}
.foyer-divider[b-pg99jkfwht] {
align-items: center;
display: flex;
justify-content: center;
margin: 22px 0;
}
.foyer-divider[b-pg99jkfwht]::before,
.foyer-divider[b-pg99jkfwht]::after {
background: var(--ledger-border);
content: "";
height: 1px;
width: min(42%, 180px);
}
.foyer-divider span[b-pg99jkfwht] {
border: 1px solid var(--ledger-peach);
border-radius: 999px;
height: 7px;
margin: 0 10px;
transform: rotate(45deg);
width: 7px;
}
.profile-link-area[b-pg99jkfwht] {
text-align: center;
}
.profile-link-area h4[b-pg99jkfwht] {
color: var(--ledger-ink);
font-size: 1.05rem;
margin: 0 0 8px;
}
.story-area[b-pg99jkfwht] {
display: grid;
gap: 10px;
}
.submodal-actions[b-pg99jkfwht] {
display: flex;
gap: 12px;
justify-content: flex-end;
margin-top: 24px;
}
.primary-button[b-pg99jkfwht],
.secondary-button[b-pg99jkfwht],
.ghost-link-button[b-pg99jkfwht],
.ghost-danger-button[b-pg99jkfwht],
.outline-button[b-pg99jkfwht] {
align-items: center;
border-radius: 10px;
cursor: pointer;
display: inline-flex;
font-weight: 750;
gap: 8px;
justify-content: center;
min-height: 42px;
padding: 10px 16px;
}
.primary-button[b-pg99jkfwht] {
background: var(--ledger-peach);
border: 1px solid var(--ledger-peach);
color: #4B2E2E;
}
.primary-button:hover[b-pg99jkfwht] {
background: #DFAE99;
}
.secondary-button[b-pg99jkfwht] {
background: #FFF9F4;
border: 1px solid var(--ledger-border);
color: var(--ledger-muted);
}
.secondary-button:hover[b-pg99jkfwht],
.outline-button:hover[b-pg99jkfwht] {
background: rgba(139, 90, 43, 0.07);
}
.ghost-link-button[b-pg99jkfwht],
.ghost-danger-button[b-pg99jkfwht] {
background: transparent;
border: 1px solid transparent;
}
.ghost-link-button[b-pg99jkfwht] {
color: var(--ledger-brown);
}
.ghost-link-button:hover[b-pg99jkfwht] {
background: rgba(139, 90, 43, 0.07);
}
.ghost-danger-button[b-pg99jkfwht] {
color: var(--ledger-rose);
}
.ghost-danger-button:hover[b-pg99jkfwht] {
background: rgba(168, 106, 98, 0.08);
}
.outline-button[b-pg99jkfwht] {
background: transparent;
border: 1px solid var(--ledger-border-strong);
color: var(--ledger-brown);
}
.full-width[b-pg99jkfwht] {
width: 100%;
}
.linked-profile-summary[b-pg99jkfwht] {
display: grid;
justify-items: center;
margin: 10px 0 16px;
}
.linked-profile-summary img[b-pg99jkfwht] {
background: #F5E4D2;
border: 1px solid var(--ledger-border);
border-radius: 999px;
height: 90px;
margin-bottom: 12px;
width: 90px;
}
.linked-profile-summary h4[b-pg99jkfwht] {
color: var(--ledger-ink);
font-size: 1.2rem;
margin: 0;
}
.linked-profile-summary p[b-pg99jkfwht] {
color: var(--ledger-muted);
font-style: italic;
margin: 4px 0 0;
}
.linked-actions[b-pg99jkfwht] {
display: grid;
gap: 8px;
margin-top: 14px;
}
svg[b-pg99jkfwht] {
fill: none;
height: 1.1em;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
width: 1.1em;
}
@media (max-width: 768px) {
.family-submodal-backdrop[b-pg99jkfwht] {
align-items: stretch;
justify-content: stretch;
min-height: 100vh;
min-height: 100dvh;
padding: 0;
}
.family-submodal[b-pg99jkfwht] {
border: 0;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
height: 100vh;
height: 100dvh;
max-height: none;
max-width: none;
overscroll-behavior: contain;
overflow-y: auto;
padding: calc(58px + env(safe-area-inset-top, 0px)) 18px calc(18px + env(safe-area-inset-bottom, 0px));
-webkit-overflow-scrolling: touch;
width: 100%;
}
.submodal-close[b-pg99jkfwht] {
position: fixed;
right: max(14px, env(safe-area-inset-right, 0px));
top: calc(12px + env(safe-area-inset-top, 0px));
z-index: 1;
}
.family-submodal h3[b-pg99jkfwht] {
margin-inline: 36px;
}
.focused-person-header[b-pg99jkfwht] {
align-items: flex-start;
}
.focused-avatar[b-pg99jkfwht] {
height: 58px;
width: 58px;
}
.focused-person-header h3[b-pg99jkfwht] {
font-size: 1.28rem;
}
.form-grid[b-pg99jkfwht] {
grid-template-columns: 1fr;
}
.identity-area[b-pg99jkfwht] {
grid-template-columns: 1fr;
}
.identity-action-button[b-pg99jkfwht] {
width: 100%;
white-space: normal;
}
.submodal-actions[b-pg99jkfwht] {
background: linear-gradient(180deg, rgba(255, 253, 249, 0), #FFFDF9 22%);
flex-direction: column-reverse;
margin: auto -18px calc(-18px - env(safe-area-inset-bottom, 0px));
padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px));
position: sticky;
bottom: calc(-18px - env(safe-area-inset-bottom, 0px));
z-index: 1;
}
.submodal-actions > button[b-pg99jkfwht] {
width: 100%;
}
}
@media (max-width: 560px) {
.family-drill-panel[b-pg99jkfwht] {
padding: 14px;
}
.promotion-actions[b-pg99jkfwht] {
align-items: stretch;
flex-direction: column;
}
.promotion-actions > button[b-pg99jkfwht] {
width: 100%;
}
}
/* /Components/FamilyTreeEditor.razor.rz.scp.css */
.family-member-editor[b-1ievwzdldc] {
background: #fff8f4;
border-radius: 12px;
padding: 0.9rem 1.1rem;
margin: 8px 0;
box-shadow: 0 1px 4px 0 rgba(120, 80, 60, 0.08);
font-family: var(--font-sans, 'Inter', sans-serif);
max-width: 100%;
}
.family-member-editor > .editor-section[b-1ievwzdldc] {
margin-bottom: 0.8rem;
padding-bottom: 0.6rem;
border-bottom: 1px solid #ffe6d6;
}
.family-member-editor > .editor-section:last-child[b-1ievwzdldc] {
border-bottom: none;
}
.editor-section > b[b-1ievwzdldc] {
color: #bb6535; /* Warm brown accent for headers */
font-size: 1.08em;
}
.input-minimal[b-1ievwzdldc] {
margin-top: 8px;
margin-right: 8px;
border: none;
border-radius: 8px;
padding: 0.3em 0.8em;
background: #fffaf7;
box-shadow: 0 1px 3px 0 #ffe6d699;
font-size: 1em;
min-width: 150px;
}
.input-minimal:focus[b-1ievwzdldc] {
outline: 1.5px solid #ffb98a;
}
.label-subtle[b-1ievwzdldc] {
color: #b2886a;
margin-left: 6px;
font-size: 0.95em;
}
.label-id[b-1ievwzdldc] {
color: #bbb;
margin-left: 10px;
font-size: 0.85em;
}
.btn-small[b-1ievwzdldc] {
margin-top: 7px;
margin-right: 8px;
padding: 0.28em 0.88em;
border-radius: 8px;
border: none;
background: #ffe6d6;
color: #bb6535;
font-weight: 600;
cursor: pointer;
transition: background 0.18s;
font-size: 0.95em;
box-shadow: 0 0.5px 2px 0 #ffe6d699;
}
.btn-small:hover[b-1ievwzdldc] {
background: #ffd3b7;
color: #a65322;
}
/* Button variants for different actions */
.family-member-editor .btn-link-action[b-1ievwzdldc] {
background: #E8DFCF;
color: #6B5D4D;
}
.family-member-editor .btn-link-action:hover[b-1ievwzdldc] {
background: #DDD3C0;
color: #4A3F35;
}
.family-member-editor .btn-unlink-action[b-1ievwzdldc] {
background: #F5D5D0;
color: #A63A3A;
}
.family-member-editor .btn-unlink-action:hover[b-1ievwzdldc] {
background: #EDBFB8;
color: #8F2C2C;
}
.family-member-editor .btn-user-action[b-1ievwzdldc] {
background: #D8E8EF;
color: #4A6B7A;
}
.family-member-editor .btn-user-action:hover[b-1ievwzdldc] {
background: #C5DBE5;
color: #3A5A6A;
}
.family-member-editor .btn-unmark-action[b-1ievwzdldc] {
background: #E8D8EF;
color: #6A4A7A;
}
.family-member-editor .btn-unmark-action:hover[b-1ievwzdldc] {
background: #DCC8E5;
color: #5A3A6A;
}
.family-member-editor .btn-create-loved-one-action[b-1ievwzdldc] {
background: #FFF3E0;
color: #C17B2A;
}
.family-member-editor .btn-create-loved-one-action:hover[b-1ievwzdldc] {
background: #FFE0B2;
color: #A66000;
}
small[b-1ievwzdldc] {
color: #b2886a;
}
.family-member-editor .family-member-editor[b-1ievwzdldc] {
margin-left: 2.0rem;
margin-top: 0.6rem;
background: #fff1e8;
box-shadow: none;
border: 1px dashed #ffd3b7;
border-left: 3px solid #ffd3b7;
padding-left: 1rem;
}
.family-member-editor .family-member-editor .family-member-editor[b-1ievwzdldc] {
margin-left: 1rem;
background: #ffeee6;
border: 1px dotted #ffc299;
}
.family-member-container[b-1ievwzdldc] {
position: relative;
margin-bottom: 0.5rem;
}
.btn-remove[b-1ievwzdldc] {
background: #F5D5D0;
color: #A63A3A;
margin-left: 0.5rem;
padding: 0.2em 0.6em;
font-size: 0.85em;
}
.btn-remove:hover[b-1ievwzdldc] {
background: #EDBFB8;
color: #8F2C2C;
}
.depth-limit-message[b-1ievwzdldc] {
padding: 0.5rem;
background: #f0f0f0;
border-radius: 8px;
margin: 0.25rem 0;
color: #666;
font-style: italic;
}
.depth-limit-message small[b-1ievwzdldc] {
color: #888;
}
.year-chip[b-1ievwzdldc] {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
background: #f4efe9;
color: #6b5a53;
font-size: 12px;
margin-bottom: 6px;
box-shadow: 0 0.5px 1px rgba(0,0,0,0.04);
}
/* --- Member header & badges --- */
.member-header[b-1ievwzdldc] {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 4px;
}
.member-header > b[b-1ievwzdldc] {
font-size: 1.05em;
}
.gender-icon[b-1ievwzdldc] {
font-size: 1.1em;
}
.gender-male[b-1ievwzdldc] {
color: #6B8FA3;
}
.gender-female[b-1ievwzdldc] {
color: #C47A8A;
}
.gender-unknown[b-1ievwzdldc] {
font-size: 0.85em;
}
.relationship-badge[b-1ievwzdldc] {
font-size: 0.85em;
background: #fff0e6;
padding: 2px 8px;
border-radius: 10px;
color: #bb6535;
}
.linked-badge[b-1ievwzdldc] {
padding: 2px 8px;
background-color: #6B8E6B;
color: white;
border-radius: 12px;
font-size: 0.7em;
font-weight: 600;
white-space: nowrap;
}
.user-badge[b-1ievwzdldc] {
padding: 2px 8px;
background-color: #6B8FA3;
color: white;
border-radius: 12px;
font-size: 0.7em;
font-weight: 600;
white-space: nowrap;
}
.member-dates[b-1ievwzdldc] {
font-size: 0.88em;
color: #b2886a;
margin-bottom: 6px;
}
.no-dates[b-1ievwzdldc] {
font-style: italic;
}
.member-actions[b-1ievwzdldc] {
display: flex;
gap: 6px;
margin-top: 6px;
flex-wrap: wrap;
align-items: center;
}
.edit-row[b-1ievwzdldc] {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.type-display[b-1ievwzdldc] {
display: flex;
gap: 6px;
align-items: center;
}
.type-label[b-1ievwzdldc] {
font-size: 0.9em;
color: #8B7355;
min-width: fit-content;
}
.input-readonly[b-1ievwzdldc] {
background-color: #FAF3E5;
min-width: 140px;
}
.section-emoji[b-1ievwzdldc] {
margin-right: 4px;
}
.grandparent-selector[b-1ievwzdldc] {
margin-top: 10px;
}
.grandparent-type-label[b-1ievwzdldc] {
display: block;
margin-bottom: 5px;
color: #6B5D4D;
font-size: 0.9em;
}
.grandparent-type-select[b-1ievwzdldc] {
margin-right: 10px;
padding: 5px 10px;
border: 1px solid #e8d5c0;
border-radius: 8px;
background: #fffaf7;
color: #3A3228;
font-size: 0.95em;
}
.family-member-editor.readonly[b-1ievwzdldc] {
background: #fffaf7;
border: 1px solid #ffe6d6;
box-shadow: none;
}
.family-member-editor.readonly .input-minimal[b-1ievwzdldc],
.family-member-editor.readonly .btn-small[b-1ievwzdldc] {
display: none; /* hide inputs and buttons in readonly contexts if you wrap with class */
}
/* Or just dim the inputs if you still want to show them */
.family-member-editor.readonly .input-minimal[b-1ievwzdldc] {
background: #fff5ee;
box-shadow: none;
color: #9c7a63;
}
.remove-confirmation-overlay[b-1ievwzdldc] {
position: fixed;
inset: 0;
background: rgba(30, 20, 10, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 2100;
}
.remove-confirmation-dialog[b-1ievwzdldc] {
background: linear-gradient(135deg, #FDF8F0, #FAF3E5);
border: 2px solid #e8d5c0;
border-radius: 16px;
padding: 24px 32px;
max-width: 360px;
text-align: center;
box-shadow: 0 8px 32px rgba(60, 40, 20, 0.2);
}
.remove-confirmation-dialog p[b-1ievwzdldc] {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 1.1rem;
color: #3A3228;
margin-bottom: 20px;
}
.remove-confirmation-actions[b-1ievwzdldc] {
display: flex;
gap: 12px;
justify-content: center;
}
.btn-confirm-cancel[b-1ievwzdldc] {
background: transparent;
border: 1.5px solid #c4a882;
color: #6B5D4D;
border-radius: 20px;
padding: 8px 20px;
cursor: pointer;
font-size: 0.9rem;
}
.btn-confirm-remove[b-1ievwzdldc] {
background: linear-gradient(135deg, #d4564e, #b8423a);
border: none;
color: white;
border-radius: 20px;
padding: 8px 20px;
cursor: pointer;
font-size: 0.9rem;
}
.tree-tab .tree-toolbar[b-1ievwzdldc] {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: .5rem;
}
.tree-tab .section-title[b-1ievwzdldc] {
color: #bb6535;
font-weight: 700;
}
.tree-tab .btn-link[b-1ievwzdldc] {
background: transparent;
border: none;
color: #a65322;
font-weight: 600;
cursor: pointer;
padding: 6px 8px;
}
.tree-tab .btn-link:hover[b-1ievwzdldc] {
text-decoration: underline;
}
/* Optional compact list items for the link modal */
.person-list .person-row[b-1ievwzdldc] {
display: flex;
align-items: center;
justify-content: space-between;
padding: .4rem .2rem;
border-bottom: 1px dashed #ffe6d6;
}
.person-list .person-name[b-1ievwzdldc] {
color: #6b4a43;
font-weight: 600;
}
.person-list .person-year[b-1ievwzdldc] {
color: #b2886a;
font-size: 12px;
margin-left: 8px;
}
/* Accordion / Collapsible Section Styles */
.section-header[b-1ievwzdldc] {
cursor: pointer;
user-select: none;
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
margin: -2px -4px;
border-radius: 8px;
transition: background-color 0.2s, opacity 0.2s;
font-weight: 600;
}
.section-header:hover[b-1ievwzdldc] {
background-color: rgba(187, 101, 53, 0.08);
}
.collapse-icon[b-1ievwzdldc] {
display: inline-block;
font-size: 0.75em;
color: #bb6535;
transition: transform 0.2s ease;
min-width: 12px;
font-weight: bold;
}
.section-count[b-1ievwzdldc] {
font-size: 0.85em;
color: #b2886a;
font-weight: 500;
margin-left: 4px;
}
.section-content[b-1ievwzdldc] {
margin-top: 8px;
}
/* ========== MOBILE RESPONSIVENESS ========== */
@media (max-width: 768px) {
.family-member-editor[b-1ievwzdldc] {
padding: 0.7rem 0.9rem;
margin: 6px 0;
border-radius: 10px;
}
.family-member-editor > .editor-section[b-1ievwzdldc] {
margin-bottom: 0.6rem;
padding-bottom: 0.5rem;
}
/* Reduce nested indentation on mobile */
.family-member-editor .family-member-editor[b-1ievwzdldc] {
margin-left: 0.8rem;
padding: 0.6rem 0.8rem;
}
.family-member-editor .family-member-editor .family-member-editor[b-1ievwzdldc] {
margin-left: 0.5rem;
padding: 0.5rem 0.6rem;
}
/* Make section content less indented */
.section-content[b-1ievwzdldc] {
margin-top: 6px;
}
/* Responsive input fields */
.input-minimal[b-1ievwzdldc] {
min-width: 100px;
font-size: 0.95em;
padding: 0.35em 0.7em;
margin-top: 6px;
}
/* Responsive buttons — improved touch targets */
.btn-small[b-1ievwzdldc] {
min-height: 44px;
min-width: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.88em;
padding: 0.32em 0.75em;
margin-top: 6px;
margin-right: 6px;
}
.section-header[b-1ievwzdldc] {
min-height: 44px;
padding: 8px 8px;
}
.grandparent-type-select[b-1ievwzdldc] {
min-height: 44px;
}
/* Stack badges vertically if needed */
.editor-section > div:first-child[b-1ievwzdldc] {
flex-wrap: wrap;
gap: 4px;
}
/* Smaller font sizes */
.editor-section > b[b-1ievwzdldc] {
font-size: 1em;
}
small[b-1ievwzdldc] {
font-size: 0.85em;
}
.label-subtle[b-1ievwzdldc] {
font-size: 0.88em;
}
}
@media (max-width: 480px) {
.family-member-editor[b-1ievwzdldc] {
padding: 0.6rem 0.75rem;
margin: 4px 0;
}
.family-member-editor .family-member-editor[b-1ievwzdldc] {
margin-left: 0.5rem;
padding: 0.5rem 0.6rem;
}
.input-minimal[b-1ievwzdldc] {
width: 100%;
margin-right: 0;
font-size: 0.9em;
}
.btn-small[b-1ievwzdldc] {
font-size: 0.85em;
padding: 0.3em 0.65em;
}
.section-content[b-1ievwzdldc] {
margin-left: 10px;
}
}
/* ========== NIGHT MODE ========== */
:global(body.night-mode) .family-member-editor[b-1ievwzdldc] {
background: #2A2420;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}
:global(body.night-mode) .family-member-editor .family-member-editor[b-1ievwzdldc] {
background: #322C27;
border-color: #4A3F38;
}
:global(body.night-mode) .family-member-editor .family-member-editor .family-member-editor[b-1ievwzdldc] {
background: #3A342E;
border-color: #544A42;
}
:global(body.night-mode) .editor-section[b-1ievwzdldc] {
border-bottom-color: #4A3F38;
}
:global(body.night-mode) .member-header > b[b-1ievwzdldc] {
color: #E8DDD0;
}
:global(body.night-mode) .member-dates[b-1ievwzdldc] {
color: #C4A882;
}
:global(body.night-mode) .input-minimal[b-1ievwzdldc] {
background: #3A342E;
color: #E8DDD0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
:global(body.night-mode) .input-minimal:focus[b-1ievwzdldc] {
outline-color: #C49A6C;
}
:global(body.night-mode) .btn-small[b-1ievwzdldc] {
background: #4A3F38;
color: #C49A6C;
}
:global(body.night-mode) .btn-small:hover[b-1ievwzdldc] {
background: #5A4F48;
color: #D4AA7C;
}
:global(body.night-mode) .section-header:hover[b-1ievwzdldc] {
background-color: rgba(196, 154, 108, 0.1);
}
:global(body.night-mode) .collapse-icon[b-1ievwzdldc] {
color: #C49A6C;
}
:global(body.night-mode) .section-count[b-1ievwzdldc] {
color: #A08060;
}
:global(body.night-mode) .relationship-badge[b-1ievwzdldc] {
background: #4A3828;
color: #C49A6C;
}
:global(body.night-mode) .linked-badge[b-1ievwzdldc] {
background: #3A5A3A;
}
:global(body.night-mode) .user-badge[b-1ievwzdldc] {
background: #3A4A5A;
}
:global(body.night-mode) .year-chip[b-1ievwzdldc] {
background: #3A342E;
color: #C4A882;
}
:global(body.night-mode) .depth-limit-message[b-1ievwzdldc] {
background: #3A342E;
color: #A08060;
}
:global(body.night-mode) .btn-remove[b-1ievwzdldc] {
background: #4A2828;
color: #E08080;
}
:global(body.night-mode) .btn-remove:hover[b-1ievwzdldc] {
background: #5A3030;
color: #F09090;
}
:global(body.night-mode) .remove-confirmation-dialog[b-1ievwzdldc] {
background: linear-gradient(135deg, #2A2420, #322C27);
border-color: #4A3F38;
}
:global(body.night-mode) .remove-confirmation-dialog p[b-1ievwzdldc] {
color: #E8DDD0;
}
:global(body.night-mode) .btn-confirm-cancel[b-1ievwzdldc] {
border-color: #6B5D4D;
color: #C4A882;
}
:global(body.night-mode) .btn-confirm-remove[b-1ievwzdldc] {
background: linear-gradient(135deg, #8B3030, #6B2020);
}
:global(body.night-mode) .grandparent-type-select[b-1ievwzdldc] {
background: #3A342E;
color: #E8DDD0;
border-color: #4A3F38;
}
:global(body.night-mode) .input-readonly[b-1ievwzdldc] {
background-color: #3A342E;
}
:global(body.night-mode) .type-label[b-1ievwzdldc],
:global(body.night-mode) .grandparent-type-label[b-1ievwzdldc] {
color: #C4A882;
}
:global(body.night-mode) .tree-tab .section-title[b-1ievwzdldc] {
color: #C49A6C;
}
:global(body.night-mode) .tree-tab .btn-link[b-1ievwzdldc] {
color: #C49A6C;
}
:global(body.night-mode) .tree-tab .tree-loading[b-1ievwzdldc],
:global(body.night-mode) .tree-tab .tree-empty[b-1ievwzdldc] {
color: #A08060;
}
/* --- Mini avatar for linked family members --- */
.family-avatar-link[b-1ievwzdldc],
.family-avatar-placeholder[b-1ievwzdldc] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
border: 2px solid #D4A574;
box-shadow: 0 1px 4px rgba(180, 130, 80, 0.2);
transition: all 0.2s ease;
}
.family-avatar-link[b-1ievwzdldc] {
cursor: pointer;
text-decoration: none;
}
.family-avatar-link:hover[b-1ievwzdldc] {
border-color: #C49A6C;
box-shadow: 0 2px 8px rgba(180, 130, 80, 0.35), 0 0 0 3px rgba(212, 165, 116, 0.15);
transform: scale(1.08);
}
.family-avatar-img[b-1ievwzdldc] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.family-avatar-placeholder[b-1ievwzdldc] {
opacity: 0.7;
cursor: default;
}
/* /Components/FavoriteThemesRow.razor.rz.scp.css */
/*
* FavoriteThemesRow - "Dina närmaste" (Your Inner Circle)
*
* Design Philosophy:
* - Circular avatars like Instagram Stories (warm, familiar)
* - Soft golden ring = a gentle embrace, like a warm hug
* - Pulse animation on hover = establishing a bond
* - "Luft = Lyx" - generous spacing for calm, premium feel
*/
.favorite-themes-row[b-qschgsu6n8] {
width: 100%;
padding: 1.5rem 0;
margin-bottom: 1rem;
}
.favorites-title[b-qschgsu6n8] {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
color: #5A4035;
margin-bottom: 1.25rem;
text-align: left;
letter-spacing: 0.02em;
}
.favorites-avatars[b-qschgsu6n8] {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: flex-start;
justify-content: flex-start;
}
/* Individual avatar item - button for accessibility */
.favorite-avatar-item[b-qschgsu6n8] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
transition: transform 0.2s ease;
min-width: 72px;
}
.favorite-avatar-item:hover[b-qschgsu6n8] {
transform: translateY(-3px);
}
.favorite-avatar-item:focus-visible[b-qschgsu6n8] {
outline: 2px solid #CE8568;
outline-offset: 4px;
border-radius: 50%;
}
/* Avatar ring - the warm embrace */
.avatar-ring[b-qschgsu6n8] {
width: 64px;
height: 64px;
border-radius: 50%;
padding: 3px;
background: linear-gradient(135deg, #F5D5C8 0%, #E8C4B0 50%, #D4A98C 100%);
box-shadow:
0 4px 12px rgba(206, 133, 104, 0.25),
0 2px 4px rgba(0, 0, 0, 0.08),
inset 0 1px 2px rgba(255, 255, 255, 0.4);
transition: all 0.3s ease;
position: relative;
}
.favorite-avatar-item:hover .avatar-ring[b-qschgsu6n8] {
box-shadow:
0 6px 20px rgba(206, 133, 104, 0.35),
0 4px 8px rgba(0, 0, 0, 0.1),
inset 0 1px 2px rgba(255, 255, 255, 0.5);
transform: scale(1.05);
}
/* Pulse animation on hover - "establishing a bond" */
.favorite-avatar-item:hover .avatar-ring[b-qschgsu6n8]::before {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 2px solid rgba(206, 133, 104, 0.4);
animation: pulse-ring-b-qschgsu6n8 1.5s ease-out infinite;
}
@keyframes pulse-ring-b-qschgsu6n8 {
0% {
transform: scale(1);
opacity: 1;
}
100% {
transform: scale(1.15);
opacity: 0;
}
}
/* Avatar image */
.avatar-image[b-qschgsu6n8] {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
background: #FAF5F0;
}
/* Avatar name label */
.avatar-name[b-qschgsu6n8] {
/* inherited font-sans */
font-size: 0.8rem;
color: #6B5344;
font-weight: 500;
max-width: 72px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
}
/* Add button styling */
.add-favorite .add-ring[b-qschgsu6n8] {
background: linear-gradient(135deg, #FAF5F0 0%, #F0E6DC 100%);
border: 2px dashed #D4C4B4;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.05),
inset 0 1px 2px rgba(255, 255, 255, 0.6);
}
.add-favorite:hover .add-ring[b-qschgsu6n8] {
background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
border-color: #CE8568;
border-style: solid;
}
.add-icon[b-qschgsu6n8] {
font-size: 1.75rem;
font-weight: 300;
color: #9B8577;
line-height: 1;
transition: color 0.2s ease, transform 0.2s ease;
}
.add-favorite:hover .add-icon[b-qschgsu6n8] {
color: #CE8568;
transform: rotate(90deg);
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.favorite-themes-row[b-qschgsu6n8] {
padding: 1rem 0;
}
.favorites-title[b-qschgsu6n8] {
font-size: 1.1rem;
margin-bottom: 1rem;
}
.favorites-avatars[b-qschgsu6n8] {
gap: 1rem;
justify-content: center;
}
.favorite-avatar-item[b-qschgsu6n8] {
min-width: 64px;
}
.avatar-ring[b-qschgsu6n8] {
width: 56px;
height: 56px;
}
.avatar-name[b-qschgsu6n8] {
font-size: 0.75rem;
max-width: 64px;
}
}
/* Night mode support */
:global(body.night-mode) .favorites-title[b-qschgsu6n8] {
color: #E8D8D0;
}
:global(body.night-mode) .avatar-ring[b-qschgsu6n8] {
background: linear-gradient(135deg, #5A4A3A 0%, #4A3A2A 50%, #3A2A1A 100%);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.4),
0 2px 4px rgba(0, 0, 0, 0.3),
inset 0 1px 2px rgba(255, 255, 255, 0.1);
}
:global(body.night-mode) .avatar-name[b-qschgsu6n8] {
color: #C8B8A8;
}
:global(body.night-mode) .add-ring[b-qschgsu6n8] {
background: linear-gradient(135deg, #3A3028 0%, #2A2018 100%);
border-color: #6A5A4A;
}
:global(body.night-mode) .add-icon[b-qschgsu6n8] {
color: #8A7A6A;
}
/* /Components/FeedbackModal.razor.rz.scp.css */
.modal-content.feedback-modal-content[b-vvzedvm70v] {
width: 100%;
max-width: 30rem;
max-height: calc(100dvh - 2rem);
margin-inline: auto;
padding: 0;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
box-sizing: border-box;
border: 1px solid var(--lov-line, #d9dace);
border-radius: 8px;
background: var(--lov-surface, #fffdf8);
color: var(--lov-ink, #30382d);
box-shadow: none;
transform: none;
transition: none;
}
.feedback-modal-top-bar[b-vvzedvm70v] {
width: 100%;
min-height: 3.5rem;
padding: 0.5rem 0.625rem 0.5rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
flex-shrink: 0;
box-sizing: border-box;
border-bottom: 1px solid var(--lov-line, #d9dace);
background: var(--lov-paper, #faf7f0);
}
.modal-logo-area-top .page-logo-simple-top[b-vvzedvm70v] {
color: var(--lov-ink, #30382d);
font-family: var(--font-serif, Georgia, serif);
font-size: 1rem;
font-weight: 600;
text-decoration: none;
}
.modal-close-icon-button[b-vvzedvm70v] {
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0;
display: grid;
place-items: center;
flex: 0 0 2.75rem;
border: 1px solid transparent;
border-radius: 6px;
background: transparent;
color: var(--lov-ink, #30382d);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.modal-close-icon-button:hover[b-vvzedvm70v] {
border-color: var(--lov-line, #d9dace);
background: var(--lov-paper, #faf7f0);
}
.modal-close-icon-button:focus-visible[b-vvzedvm70v] {
outline: 3px solid var(--lov-focus, #957137);
outline-offset: 2px;
}
.feedback-main-content-modal-inner[b-vvzedvm70v] {
min-height: 0;
padding: 1.25rem;
display: flex;
flex: 1 1 auto;
flex-direction: column;
align-items: stretch;
overflow-y: auto;
overscroll-behavior: contain;
box-sizing: border-box;
background: var(--lov-surface, #fffdf8);
}
.feedback-modal-title[b-vvzedvm70v] {
margin: 0;
color: var(--lov-ink, #30382d);
font-family: var(--font-serif, Georgia, serif);
font-size: clamp(1.55rem, 4vw, 2rem);
font-weight: 700;
line-height: 1.15;
text-align: left;
}
.feedback-modal-subtitle[b-vvzedvm70v] {
margin: 0.5rem 0 1rem;
color: var(--lov-muted, #62665c);
font-size: 1rem;
line-height: 1.5;
text-align: left;
}
.feedback-textarea[b-vvzedvm70v] {
width: 100%;
min-height: 10rem;
height: clamp(10rem, 30dvh, 16.25rem);
max-height: 16.25rem;
margin: 0;
padding: 0.75rem;
box-sizing: border-box;
resize: vertical;
border: 1px solid var(--lov-line, #d9dace);
border-radius: 6px;
background: var(--lov-paper, #faf7f0);
color: var(--lov-ink, #30382d);
font: inherit;
line-height: 1.5;
}
.feedback-textarea[b-vvzedvm70v]::placeholder {
color: var(--lov-muted, #62665c);
opacity: 1;
}
.feedback-textarea:focus-visible[b-vvzedvm70v] {
outline: 3px solid var(--lov-focus, #957137);
outline-offset: 2px;
border-color: var(--lov-green, #394d37);
}
.feedback-privacy-notice[b-vvzedvm70v] {
margin: 0.875rem 0 0;
color: var(--lov-muted, #62665c);
font-size: 0.82rem;
line-height: 1.45;
text-align: left;
}
.feedback-submit-error[b-vvzedvm70v] {
margin: 0.875rem 0 0;
padding-inline-start: 0.75rem;
border-inline-start: 3px solid var(--lov-focus, #957137);
color: var(--lov-ink, #30382d);
font-size: 0.92rem;
line-height: 1.4;
text-align: left;
}
.btn-continue-feedback-modal[b-vvzedvm70v] {
min-height: 2.75rem;
margin: 1rem 0 0;
padding: 0.625rem 1rem;
align-self: flex-start;
border: 1px solid var(--lov-green, #394d37);
border-radius: 6px;
background: var(--lov-green, #394d37);
color: var(--lov-on-green, #fffdf8);
font-size: 1rem;
font-weight: 700;
line-height: 1.25;
cursor: pointer;
}
.btn-continue-feedback-modal:not(:disabled):hover[b-vvzedvm70v] {
background: var(--lov-green, #394d37);
filter: brightness(0.94);
}
.btn-continue-feedback-modal:disabled[b-vvzedvm70v] {
border-color: var(--lov-line, #d9dace);
background: var(--lov-paper, #faf7f0);
color: var(--lov-muted, #62665c);
cursor: not-allowed;
}
.btn-continue-feedback-modal:focus-visible[b-vvzedvm70v] {
outline: 3px solid var(--lov-focus, #957137);
outline-offset: 3px;
}
.feedback-thankyou[b-vvzedvm70v] {
margin: 1rem 0;
color: var(--lov-ink, #30382d);
font-family: var(--font-serif, Georgia, serif);
font-size: 1.25rem;
line-height: 1.4;
text-align: center;
}
@media (max-width: 480px) {
.feedback-main-content-modal-inner[b-vvzedvm70v] {
padding: 1rem;
}
.feedback-textarea[b-vvzedvm70v] {
height: clamp(10rem, 27dvh, 13.5rem);
}
.btn-continue-feedback-modal[b-vvzedvm70v] {
width: 100%;
}
}
/* /Components/FloatingHostButton.razor.rz.scp.css */
/* FloatingHostButton - Granny conversation entry */
.floating-host-container[b-gl2m8tsccc] {
position: fixed;
bottom: 32px;
right: 32px;
z-index: 999; /* Above page content, below modal overlays/backdrops. */
display: flex;
align-items: center;
gap: 12px;
/* Smooth transitions for visibility */
opacity: 1;
transform: scale(1);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: auto;
}
/* Hidden state - uses opacity for smooth fade */
.floating-host--hidden[b-gl2m8tsccc] {
opacity: 0;
transform: scale(0.8);
pointer-events: none;
}
/* The FAB button */
.floating-host-btn[b-gl2m8tsccc] {
width: 64px;
height: 64px;
border-radius: 50%;
border: 3px solid #FFE5D0;
background: linear-gradient(135deg, var(--lov-paper) 0%, var(--lov-surface) 100%);
box-shadow:
0 4px 15px rgba(83, 51, 43, 0.18),
0 2px 6px rgba(83, 51, 43, 0.1);
cursor: pointer;
padding: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
/* Smooth hover transition */
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.floating-host-btn:hover[b-gl2m8tsccc] {
transform: scale(1.08);
box-shadow:
0 6px 20px rgba(83, 51, 43, 0.22),
0 3px 8px rgba(83, 51, 43, 0.12);
border-color: #FFD4C0;
}
.floating-host-btn:active[b-gl2m8tsccc] {
transform: scale(0.98);
}
.floating-host-btn:focus[b-gl2m8tsccc] {
outline: none;
box-shadow:
0 0 0 3px rgba(255, 229, 208, 0.5),
0 4px 15px rgba(83, 51, 43, 0.18);
}
.floating-heart-weather-invite[b-gl2m8tsccc] {
border: 1px solid rgba(255, 199, 182, 0.72);
border-radius: 999px;
background: rgba(255, 249, 246, 0.96);
color: #4b2e2e;
box-shadow:
0 8px 24px rgba(83, 51, 43, 0.12),
0 2px 8px rgba(83, 51, 43, 0.08);
cursor: pointer;
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 600;
line-height: 1.2;
padding: 9px 13px;
white-space: nowrap;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.floating-context-invite[b-gl2m8tsccc] {
max-width: 260px;
border: 1px solid rgba(219, 166, 128, 0.68);
border-radius: 18px 18px 5px 18px;
background: rgba(255, 252, 247, 0.98);
color: #4b352d;
box-shadow:
0 12px 32px rgba(83, 51, 43, 0.14),
0 2px 8px rgba(83, 51, 43, 0.08);
cursor: pointer;
font-family: var(--font-serif);
font-size: 0.94rem;
font-weight: 600;
line-height: 1.35;
padding: 11px 15px;
text-align: left;
animation: contextInviteArrive-b-gl2m8tsccc 0.28s ease-out both;
}
.floating-context-invite:hover[b-gl2m8tsccc] {
border-color: rgba(196, 111, 63, 0.78);
box-shadow:
0 14px 36px rgba(83, 51, 43, 0.17),
0 3px 10px rgba(83, 51, 43, 0.1);
transform: translateY(-1px);
}
.floating-context-invite:focus-visible[b-gl2m8tsccc] {
outline: 3px solid rgba(223, 159, 107, 0.34);
outline-offset: 3px;
}
@keyframes contextInviteArrive-b-gl2m8tsccc {
from {
opacity: 0;
transform: translateX(8px) translateY(3px);
}
to {
opacity: 1;
transform: translateX(0) translateY(0);
}
}
.floating-heart-weather-invite:hover[b-gl2m8tsccc] {
transform: translateY(-1px);
border-color: rgba(255, 170, 146, 0.9);
box-shadow:
0 10px 28px rgba(83, 51, 43, 0.15),
0 3px 10px rgba(83, 51, 43, 0.1);
}
.floating-heart-weather-invite:active[b-gl2m8tsccc] {
transform: translateY(0);
}
.floating-heart-weather-invite:focus[b-gl2m8tsccc] {
outline: none;
box-shadow:
0 0 0 3px rgba(255, 229, 208, 0.55),
0 8px 24px rgba(83, 51, 43, 0.12);
}
/* Granny avatar image */
.floating-host-avatar[b-gl2m8tsccc] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
pointer-events: none;
}
/* Tooltip speech bubble - desktop only */
.floating-host-tooltip[b-gl2m8tsccc] {
position: absolute;
right: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.98);
color: #4b2e2e;
font-size: 0.85rem;
font-weight: 500;
padding: 8px 14px;
border-radius: 20px;
box-shadow: 0 4px 15px rgba(83, 51, 43, 0.15);
white-space: nowrap;
/* Initially hidden, show on hover */
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
/* Tooltip arrow pointing right */
.floating-host-tooltip[b-gl2m8tsccc]::after {
content: "";
position: absolute;
right: -6px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.98);
box-shadow: 2px -2px 4px rgba(83, 51, 43, 0.08);
}
/* Show tooltip on hover (desktop only) */
.floating-host-container:hover .floating-host-tooltip[b-gl2m8tsccc] {
opacity: 1;
transform: translateY(-50%) translateX(-4px);
}
/* ===== MOBILE STYLES ===== */
@media (max-width: 768px) {
.floating-host-container[b-gl2m8tsccc] {
bottom: calc(24px + env(safe-area-inset-bottom, 0px));
right: calc(24px + env(safe-area-inset-right, 0px));
}
.floating-host-btn[b-gl2m8tsccc] {
width: 56px;
height: 56px;
}
.floating-heart-weather-invite[b-gl2m8tsccc] {
font-size: 0.82rem;
max-width: 136px;
padding: 8px 11px;
text-align: center;
white-space: normal;
}
.floating-context-invite[b-gl2m8tsccc] {
max-width: min(230px, calc(100vw - 116px));
font-size: 0.86rem;
padding: 9px 12px;
}
/* Hide tooltip on mobile */
.floating-host-tooltip[b-gl2m8tsccc] {
display: none;
}
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
.floating-host-container[b-gl2m8tsccc] {
transition: none;
}
.floating-host-btn[b-gl2m8tsccc] {
transition: none;
}
.floating-host-tooltip[b-gl2m8tsccc] {
transition: none;
}
.floating-context-invite[b-gl2m8tsccc] {
animation: none;
}
/* For reduced motion, use instant show/hide */
.floating-host--hidden[b-gl2m8tsccc] {
opacity: 0;
transform: none;
}
}
/* ===== GENTLE FLOATING ANIMATION (optional) ===== */
@keyframes gentleFloat-b-gl2m8tsccc {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-3px);
}
}
/* Apply gentle float animation when visible (can be enabled if desired) */
/*
.floating-host-container:not(.floating-host--hidden) .floating-host-btn {
animation: gentleFloat 3s ease-in-out infinite;
}
*/
.floating-host-btn[b-gl2m8tsccc] { background: var(--lov-green); color: var(--lov-on-green); border: 1px solid var(--lov-green); box-shadow: 0 3px 12px #0002; }
.floating-host-btn:hover[b-gl2m8tsccc] { background: var(--lov-green); color: var(--lov-on-green); border-color: var(--lov-green); transform: translateY(-2px); box-shadow: 0 4px 14px #0003; }
.floating-host-btn:focus-visible[b-gl2m8tsccc] { outline: 3px solid var(--lov-green); outline-offset: 4px; }
.floating-host-symbol[b-gl2m8tsccc] { flex-shrink: 0; }
@media(prefers-reduced-motion: reduce) { .floating-host-btn:hover[b-gl2m8tsccc] { transform: none; } }
/* A daily weather check-in earns a persistent, readable mobile place. */
@media (max-width: 560px) {
.floating-host-container:has(.floating-heart-weather-invite)[b-gl2m8tsccc] {
right: 0;
bottom: 0;
left: 0;
z-index: 999;
gap: 12px;
padding: 12px max(12px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
border-top: 1px solid var(--lov-line);
background: var(--lov-paper);
box-sizing: border-box;
}
.floating-host-container:has(.floating-heart-weather-invite) .floating-heart-weather-invite[b-gl2m8tsccc] {
flex: 1 1 auto;
min-width: 0;
max-width: none;
min-height: 44px;
padding: 12px;
border: 1px solid var(--lov-line);
border-radius: 6px;
background: var(--lov-paper);
color: var(--lov-ink);
box-shadow: none;
font-size: 0.875rem;
line-height: 1.35;
text-align: left;
white-space: normal;
}
.floating-host-container:has(.floating-heart-weather-invite) .floating-heart-weather-invite:hover[b-gl2m8tsccc] {
border-color: var(--lov-green);
background: var(--lov-paper);
box-shadow: none;
transform: none;
}
.floating-host-container:has(.floating-heart-weather-invite) .floating-heart-weather-invite:focus-visible[b-gl2m8tsccc] {
outline: 2px solid var(--lov-focus);
outline-offset: 2px;
box-shadow: none;
}
.floating-host-container:has(.floating-heart-weather-invite) .floating-host-btn[b-gl2m8tsccc] {
flex: 0 0 56px;
width: 56px;
height: 56px;
}
.floating-context-invite[b-gl2m8tsccc] {
display: none;
}
}
/* /Components/Footer.razor.rz.scp.css */
/* Footer.razor.css - Styles for Footer component */
[b-6ardpme3v3] .main-footer {
width: calc(100% - 280px);
margin-left: 280px;
background-color: #FAF3E5;
padding: 60px 0 30px 0;
margin-top: 80px;
color: #4F4A45;
border-top: 1px solid #f0dad3;
}
[b-6ardpme3v3] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
[b-6ardpme3v3] .footer-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
}
[b-6ardpme3v3] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
}
[b-6ardpme3v3] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-6ardpme3v3] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-6ardpme3v3] .footer-logo a {
display: inline-flex;
align-items: center;
margin-bottom: 15px;
color: #4B2E2E;
text-decoration: none;
}
[b-6ardpme3v3] .footer-tagline {
font-size: 1.1rem;
color: #4A4540;
margin: 0;
}
[b-6ardpme3v3] .footer-farewell {
font-size: 0.95rem;
color: #7a6054;
margin: 10px 0 0 0;
font-style: italic;
}
[b-6ardpme3v3] .footer-nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 80px;
margin-bottom: 40px;
}
[b-6ardpme3v3] .footer-section {
padding: 0 15px;
}
[b-6ardpme3v3] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-6ardpme3v3] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-6ardpme3v3] .footer-section ul li {
margin-bottom: 10px;
}
[b-6ardpme3v3] .footer-section ul li a {
color: #4A4540;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-6ardpme3v3] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
[b-6ardpme3v3] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
gap: 20px;
}
[b-6ardpme3v3] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-6ardpme3v3] .footer-languages a {
color: #4A4540;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-6ardpme3v3] .footer-languages a:hover,
[b-6ardpme3v3] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
[b-6ardpme3v3] .footer-legal-origin {
text-align: right;
}
[b-6ardpme3v3] .footer-made-by {
font-size: 0.85em;
color: #6f6258;
margin: 0 0 5px 0;
}
[b-6ardpme3v3] .footer-copyright {
font-size: 0.85em;
color: #6f6258;
margin: 0;
text-align: left;
}
@media (max-width: 992px) {
[b-6ardpme3v3] .main-footer {
margin-left: 0 !important;
}
}
@media (max-width: 1024px) {
[b-6ardpme3v3] .footer-nav-links {
flex-direction: column;
align-items: center;
gap: 40px;
}
[b-6ardpme3v3] .footer-section {
text-align: center;
}
[b-6ardpme3v3] .footer-bottom {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
[b-6ardpme3v3] .footer-languages {
justify-content: center;
flex-wrap: wrap;
gap: 10px 14px;
width: 100%;
}
[b-6ardpme3v3] .footer-legal-origin {
text-align: center;
width: 100%;
}
[b-6ardpme3v3] .footer-copyright {
text-align: center;
}
}
/* Shared quiet footer refinement. The repeated root class keeps this component's
token-based surface ahead of page-level deep selectors without changing layout. */
.main-footer.main-footer[b-6ardpme3v3] {
width: calc(100% - 280px);
margin-top: 64px;
margin-left: 280px;
padding: 44px 0 24px;
background: var(--lov-paper);
color: var(--lov-ink);
border-top: 1px solid var(--lov-line);
}
.main-footer.main-footer.sidebar-hidden[b-6ardpme3v3] {
width: 100%;
margin-left: 0;
}
.main-footer.main-footer .footer-container[b-6ardpme3v3] {
max-width: 1120px;
margin: 0 auto;
padding-inline: clamp(20px, 4vw, 32px);
}
.main-footer.main-footer .footer-brand[b-6ardpme3v3] {
margin-bottom: 32px;
text-align: left;
}
.main-footer.main-footer .footer-logo a[b-6ardpme3v3],
.main-footer.main-footer .footer-section h4[b-6ardpme3v3] {
color: var(--lov-ink);
}
.main-footer.main-footer .footer-tagline[b-6ardpme3v3],
.main-footer.main-footer .footer-farewell[b-6ardpme3v3],
.main-footer.main-footer .footer-section ul li a[b-6ardpme3v3],
.main-footer.main-footer .footer-made-by[b-6ardpme3v3],
.main-footer.main-footer .footer-copyright[b-6ardpme3v3],
.main-footer.main-footer .footer-languages a[b-6ardpme3v3] {
color: var(--lov-muted);
}
.main-footer.main-footer .footer-nav-links[b-6ardpme3v3] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(20px, 4vw, 48px);
margin: 0;
}
.main-footer.main-footer .footer-section[b-6ardpme3v3] {
padding: 18px 0 0;
border-top: 1px solid var(--lov-line);
text-align: left;
}
.main-footer.main-footer .footer-section h4[b-6ardpme3v3] {
margin-bottom: 12px;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.main-footer.main-footer .footer-section ul li[b-6ardpme3v3] {
margin-bottom: 8px;
}
.main-footer.main-footer .footer-section ul li a:hover[b-6ardpme3v3],
.main-footer.main-footer .footer-section ul li a:focus-visible[b-6ardpme3v3] {
color: var(--lov-ink);
}
.main-footer.main-footer .footer-bottom[b-6ardpme3v3] {
margin-top: 32px;
padding-top: 18px;
border-top-color: var(--lov-line);
}
.main-footer.main-footer .footer-languages a[b-6ardpme3v3] {
border-radius: 8px;
}
.main-footer.main-footer .footer-languages a:hover[b-6ardpme3v3],
.main-footer.main-footer .footer-languages a.active[b-6ardpme3v3] {
background: var(--lov-selected);
color: var(--lov-ink);
}
.main-footer.main-footer a:focus-visible[b-6ardpme3v3] {
outline: 3px solid var(--lov-focus);
outline-offset: 3px;
}
@media (max-width: 1024px) {
.main-footer.main-footer[b-6ardpme3v3] {
width: 100%;
margin-top: 48px;
margin-left: 0;
padding-top: 36px;
}
.main-footer.main-footer .footer-brand[b-6ardpme3v3],
.main-footer.main-footer .footer-section[b-6ardpme3v3],
.main-footer.main-footer .footer-bottom[b-6ardpme3v3],
.main-footer.main-footer .footer-legal-origin[b-6ardpme3v3],
.main-footer.main-footer .footer-copyright[b-6ardpme3v3] {
text-align: left;
}
.main-footer.main-footer .footer-nav-links[b-6ardpme3v3] {
grid-template-columns: 1fr;
gap: 20px;
}
.main-footer.main-footer .footer-bottom[b-6ardpme3v3] {
align-items: flex-start;
}
.main-footer.main-footer .footer-languages[b-6ardpme3v3] {
justify-content: flex-start;
}
}
/* /Components/ForgotPasswordModal.razor.rz.scp.css */
/* ========================================= */
/* Forgot Password Modal Styling */
/* ========================================= */
/* --- Modal Overlay (Shared - Assume defined elsewhere) --- */
/* .modal-overlay { ... } */
/* .modal-overlay.visible { ... } */
/* --- Modal Overlay (Shared?) --- */
/* If this is shared with other modals, keep it separate */
.modal-overlay[b-p8ifoutuvd] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(40, 25, 15, 0.55); /* Dim overlay */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 9999;
}
.modal-overlay.visible[b-p8ifoutuvd] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.modal-content.forgot-password-modal[b-p8ifoutuvd] {
position: relative; /* Needed for absolute positioned buttons and z-index */
background-color: rgb(255, 242, 236); /* Clean white background */
padding: 25px 30px 30px 30px;
border-radius: 16px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
max-width: 400px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
overflow: hidden; /* Still good practice */
/* --- ADD Z-INDEX --- */
z-index: 10000; /* Ensures content is above overlay and shared chrome */
/* ----------------- */
}
.modal-overlay.visible .modal-content.forgot-password-modal[b-p8ifoutuvd] {
transform: scale(1);
}
/* Close Button (Consistent Style) */
.forgot-password-modal .modal-close-btn[b-p8ifoutuvd] {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 1.5rem; /* Match target size */
font-weight: 400;
color: #AEAEB2; /* Match target color */
cursor: pointer;
line-height: 1;
padding: 8px;
transition: color 0.2s ease;
z-index: 10;
}
.forgot-password-modal .modal-close-btn:hover[b-p8ifoutuvd] {
color: #6C6C70;
}
/* --- Header Elements --- */
/* Title */
.forgot-password-modal h2[b-p8ifoutuvd] {
font-size: 1.6rem; /* Match target */
font-weight: 600;
color: #1D1D1F; /* Match target color */
margin-top: 5px; /* Adjust spacing */
margin-bottom: 10px; /* Space below title */
text-align: center;
}
/* Subtext / Description */
.forgot-password-modal p[b-p8ifoutuvd] {
font-size: 0.95rem;
color: #6C6C70; /* Match target subtext color */
margin-bottom: 25px; /* Space before input */
line-height: 1.45; /* Slightly more line height */
text-align: center;
padding: 0 10px; /* Add padding if text wraps */
}
.forgot-password-modal h2[b-p8ifoutuvd],
.forgot-password-modal p[b-p8ifoutuvd] {
position: relative; /* Can help ensure text is above background elements */
z-index: 2; /* Above potential ::before */
/* ... other styles ... */
}
/* --- Form Elements --- */
.forgot-password-modal .form-input[b-p8ifoutuvd] {
width: 100%;
padding: 14px 16px; /* Match target padding */
font-size: 1rem;
border-radius: 12px; /* Match target rounding */
border: 1px solid #D1D1D6; /* Match target border color */
margin-bottom: 20px; /* Space below input */
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
text-align: left;
background-color: #F5F5F7; /* Light grey background like target */
}
.forgot-password-modal .form-input[b-p8ifoutuvd]::placeholder {
color: #8A8A8E; /* Match target placeholder color */
}
.forgot-password-modal .form-input:focus[b-p8ifoutuvd] {
border-color: #ff9d7e; /* Your focus color */
background-color: #fff; /* White background on focus maybe? */
outline: none;
box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.25);
}
/* Error Message Styling */
.forgot-password-modal .modal-error-message[b-p8ifoutuvd] {
color: var(--error-color, #dc3545);
font-size: 0.85rem;
margin-top: -10px;
margin-bottom: 15px;
text-align: left;
}
/* Submit Button */
.forgot-password-modal .btn-submit[b-p8ifoutuvd] {
width: 100%;
padding: 14px;
border-radius: 12px; /* Match target */
background-color: #ff9d7e; /* Your action color */
color: white;
font-size: 1rem;
font-weight: 600; /* Match target */
border: none;
cursor: pointer;
transition: background-color 0.2s ease, opacity 0.2s ease;
}
.forgot-password-modal .btn-submit:hover:not(:disabled)[b-p8ifoutuvd] {
background-color: #ff855f;
}
/* Disabled state */
.forgot-password-modal .btn-submit:disabled[b-p8ifoutuvd],
.forgot-password-modal .form-input:disabled[b-p8ifoutuvd] {
opacity: 0.7; /* Match previous disabled style */
cursor: not-allowed;
}
/* Spinner (Reuse definition if global) */
.forgot-password-modal .spinner[b-p8ifoutuvd] {
display: inline-block;
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
border-top-color: #fff;
width: 1em;
height: 1em;
animation: spin 1s linear infinite;
margin-right: 8px;
vertical-align: middle;
position: relative;
top: -1px;
}
/* Button text alignment with spinner */
.forgot-password-modal .btn-submit span[b-p8ifoutuvd] {
vertical-align: middle;
}
/* --- Success State Styling --- */
.forgot-password-modal .success-title[b-p8ifoutuvd] {
color: var(--success-color, #1D1D1F); /* Use standard text color for success title? */
font-weight: 600;
font-size: 1.5rem; /* Match H2 */
margin-bottom: 10px;
}
/* Style the close button on success screen */
.forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
width: 100%;
padding: 14px;
border-radius: 12px;
background-color: #ff9d7e; /* Match submit style */
color: white;
font-size: 1rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
margin-top: 25px; /* Space above button */
}
.forgot-password-modal .btn-close-success:hover[b-p8ifoutuvd] {
background-color: #ff855f;
}
/* Adjust success message text positioning/spacing */
.forgot-password-modal h2.success-title + p[b-p8ifoutuvd] {
margin-bottom: 20px;
text-align: center;
}
.forgot-password-modal .form-input[b-p8ifoutuvd],
.forgot-password-modal .modal-error-message[b-p8ifoutuvd],
.forgot-password-modal .btn-submit[b-p8ifoutuvd] {
position: relative;
z-index: 2;
/* ... other styles ... */
}
/* --- Success State Styling --- */
.forgot-password-modal .success-title[b-p8ifoutuvd],
.forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
position: relative;
z-index: 2;
/* ... other styles ... */
}
/* --- Loading Indicator / Spinner --- */
/* These usually overlay content, so higher z-index might be needed if
it appears *within* the modal content div but should cover inputs */
.forgot-password-modal .loading-indicator[b-p8ifoutuvd] {
position: relative; /* Or absolute if covering */
z-index: 5;
/* ... other styles ... */
}
@media (max-width: 768px) {
.modal-overlay[b-p8ifoutuvd] {
align-items: stretch;
justify-content: center;
width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100svh;
padding: 0;
overflow: hidden;
background: #fff9f5;
}
.modal-content.forgot-password-modal[b-p8ifoutuvd] {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
max-width: none;
min-height: 100vh;
min-height: 100dvh;
padding: calc(64px + env(safe-area-inset-top, 0px)) 24px calc(24px + env(safe-area-inset-bottom, 0px));
border-radius: 0;
background: #fff9f5;
box-shadow: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
transform: none;
box-sizing: border-box;
}
.modal-overlay.visible .modal-content.forgot-password-modal[b-p8ifoutuvd] {
transform: none;
}
.forgot-password-modal .modal-close-btn[b-p8ifoutuvd] {
top: calc(10px + env(safe-area-inset-top, 0px));
right: calc(12px + env(safe-area-inset-right, 0px));
width: 44px;
height: 44px;
padding: 0;
font-size: 1.7rem;
color: #8f7d75;
}
.forgot-password-modal h2[b-p8ifoutuvd],
.forgot-password-modal p[b-p8ifoutuvd],
.forgot-password-modal .form-input[b-p8ifoutuvd],
.forgot-password-modal .modal-error-message[b-p8ifoutuvd],
.forgot-password-modal .btn-submit[b-p8ifoutuvd],
.forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
width: 100%;
max-width: 360px;
}
.forgot-password-modal h2[b-p8ifoutuvd] {
font-size: 2rem;
line-height: 1.15;
}
.forgot-password-modal p[b-p8ifoutuvd] {
margin-bottom: 24px;
padding: 0;
line-height: 1.42;
}
.forgot-password-modal .form-input[b-p8ifoutuvd],
.forgot-password-modal .btn-submit[b-p8ifoutuvd],
.forgot-password-modal .btn-close-success[b-p8ifoutuvd] {
min-height: 52px;
}
}
@media (max-width: 768px) and (max-height: 720px) {
.modal-content.forgot-password-modal[b-p8ifoutuvd] {
padding-top: calc(64px + env(safe-area-inset-top, 0px));
padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
}
.forgot-password-modal h2[b-p8ifoutuvd] {
font-size: 1.45rem;
}
.forgot-password-modal p[b-p8ifoutuvd] {
margin-bottom: 18px;
font-size: 0.92rem;
}
}
/* Shared editorial form treatment; authentication behavior is unchanged. */
.modal-content.forgot-password-modal[b-p8ifoutuvd] { background: var(--lov-surface); color: var(--lov-ink); border-radius: 8px; box-shadow: 0 16px 48px #20271f26; }
.modal-content.forgot-password-modal[b-p8ifoutuvd]::before { display: none; }
.forgot-password-modal h2[b-p8ifoutuvd], .forgot-password-modal .modal-form-content h2[b-p8ifoutuvd] { color: var(--lov-ink); font-family: var(--font-serif); }
.forgot-password-modal p[b-p8ifoutuvd], .forgot-password-modal .password-requirements[b-p8ifoutuvd], .forgot-password-modal .passwordless-login-link[b-p8ifoutuvd] { color: var(--lov-muted); }
.forgot-password-modal .form-input[b-p8ifoutuvd] { background: var(--lov-paper); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 6px; }
.forgot-password-modal .form-input[b-p8ifoutuvd]::placeholder { color: var(--lov-muted); }
.forgot-password-modal .form-input:focus[b-p8ifoutuvd] { border-color: var(--lov-green); box-shadow: none; outline: 2px solid var(--lov-focus); outline-offset: 2px; }
.forgot-password-modal .btn-submit[b-p8ifoutuvd], .forgot-password-modal .btn-submit:hover:not(:disabled)[b-p8ifoutuvd], .forgot-password-modal .btn-close-success[b-p8ifoutuvd] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; box-shadow: none; }
.forgot-password-modal .back-btn[b-p8ifoutuvd], .forgot-password-modal .modal-close-btn[b-p8ifoutuvd] { color: var(--lov-muted); min-width: 44px; min-height: 44px; }
.forgot-password-modal .auth-text-link[b-p8ifoutuvd], .forgot-password-modal .auth-text-link:hover[b-p8ifoutuvd] { color: var(--lov-green); }
.forgot-password-modal .modal-tabs[b-p8ifoutuvd] { border-color: var(--lov-line); }
.forgot-password-modal .modal-tabs button[b-p8ifoutuvd] { color: var(--lov-muted); }
.forgot-password-modal .modal-tabs button.active[b-p8ifoutuvd] { color: var(--lov-ink); border-bottom-color: var(--lov-green); }
.forgot-password-modal .modal-tabs button:focus-visible[b-p8ifoutuvd] { outline: 2px solid var(--lov-focus); outline-offset: 2px; box-shadow: none; }
@media(max-width:768px) { .modal-content.forgot-password-modal[b-p8ifoutuvd] { border-radius: 0; } }
/* Keep nested content legible on the selected application surface. */
.forgot-password-modal .success-title[b-p8ifoutuvd] { color: var(--lov-ink); }
.forgot-password-modal .back-btn:hover[b-p8ifoutuvd], .forgot-password-modal .modal-close-btn:hover[b-p8ifoutuvd] { color: var(--lov-ink); }
.forgot-password-modal .modal-error-message[b-p8ifoutuvd] { background: #fff0eb; color: #8c3127; padding: 10px 14px; border-radius: 6px; }
/* /Components/GrannyWelcomeModal.razor.rz.scp.css */
.farmor-modal-root[b-26u30eg8xn] {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2.5rem);
background: rgba(28, 18, 10, 0.38);
backdrop-filter: blur(14px) saturate(115%);
animation: farmor-overlay-fade-b-26u30eg8xn 0.9s ease forwards;
}
.farmor-modal-overlay[b-26u30eg8xn] {
position: absolute;
inset: 0;
pointer-events: auto;
}
.farmor-modal-shell[b-26u30eg8xn] {
position: relative;
display: block;
max-width: min(720px, 94vw);
width: 100%;
border-radius: 28px;
padding: clamp(1.5rem, 3vw, 2.4rem);
background:
radial-gradient(130% 140% at 90% -10%, rgba(255, 213, 160, 0.6), transparent 55%),
radial-gradient(120% 120% at 10% 10%, rgba(255, 240, 214, 0.95), rgba(244, 222, 196, 0.92) 65%),
linear-gradient(140deg, #f6eadc 0%, #f2d9bc 55%, #f8efe4 100%);
box-shadow:
0 22px 60px -18px rgba(88, 44, 12, 0.45),
inset 0 0 0 1px rgba(255, 255, 255, 0.32);
overflow: hidden;
pointer-events: auto;
animation: farmor-modal-entrance-b-26u30eg8xn 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}
.farmor-modal-layout[b-26u30eg8xn] {
position: relative;
display: grid;
grid-template-columns: minmax(260px, 1fr) minmax(210px, 260px);
align-items: center;
gap: clamp(1.8rem, 4vw, 3.6rem);
}
.farmor-illustration[b-26u30eg8xn] {
position: relative;
isolation: isolate;
justify-self: end;
}
.farmor-glow[b-26u30eg8xn] {
position: absolute;
inset: 8% 4%;
border-radius: 50%;
background: radial-gradient(circle at 60% 20%, rgba(255, 210, 150, 0.55), rgba(219, 160, 95, 0.28) 38%, rgba(180, 110, 60, 0.0) 70%);
filter: blur(0);
animation: farmor-glow-pulse-b-26u30eg8xn 4.8s ease-in-out infinite;
z-index: 0;
}
.farmor-grandma[b-26u30eg8xn] {
position: relative;
z-index: 1;
width: clamp(220px, 18vw, 260px);
max-width: none;
display: block;
margin-inline: 0;
filter: drop-shadow(0 16px 28px rgba(120, 68, 28, 0.34));
}
.farmor-copy[b-26u30eg8xn] {
display: flex;
flex-direction: column;
gap: clamp(1rem, 2vw, 1.6rem);
color: #432b16;
text-align: left;
justify-self: start;
max-width: 520px;
}
.farmor-header[b-26u30eg8xn] {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.farmor-header h2[b-26u30eg8xn] {
margin: 0;
font-size: clamp(2rem, 3.2vw, 2.8rem);
font-weight: 600;
letter-spacing: -0.015em;
color: #402311;
}
.farmor-subheadline[b-26u30eg8xn] {
margin: 0;
color: rgba(83, 44, 21, 0.84);
font-size: clamp(1.05rem, 2.2vw, 1.2rem);
font-style: italic;
}
.farmor-body[b-26u30eg8xn] {
display: flex;
flex-direction: column;
gap: 0.65rem;
font-family: "Crimson Text", "EB Garamond", serif;
font-size: clamp(1.1rem, 2.3vw, 1.25rem);
line-height: 1.55;
color: rgba(67, 43, 22, 0.92);
max-width: 520px;
}
.farmor-line[b-26u30eg8xn] {
opacity: 0;
transform: translateY(6px);
animation: farmor-line-reveal-b-26u30eg8xn 1.2s ease forwards;
}
.farmor-line.line-1[b-26u30eg8xn] {
animation-delay: 0.25s;
}
.farmor-line.line-2[b-26u30eg8xn] {
animation-delay: 0.55s;
}
.farmor-line.line-3[b-26u30eg8xn] {
animation-delay: 0.85s;
}
.farmor-actions[b-26u30eg8xn] {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 0.2rem;
align-items: center;
}
.farmor-btn[b-26u30eg8xn] {
position: relative;
border: none;
border-radius: 999px;
font-weight: 600;
font-size: 1rem;
padding: 0.85rem 1.75rem;
cursor: pointer;
transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.35s ease;
display: inline-flex;
align-items: center;
gap: 0.6rem;
white-space: nowrap;
box-shadow: 0 10px 24px -12px rgba(120, 58, 22, 0.4);
}
.farmor-btn.primary[b-26u30eg8xn] {
background: linear-gradient(135deg, #e88e62 0%, #cf6b45 55%, #c05634 100%);
color: #411f0d;
}
.farmor-btn.primary:hover[b-26u30eg8xn],
.farmor-btn.primary:focus-visible[b-26u30eg8xn] {
transform: translateY(-1px);
box-shadow: 0 16px 32px -12px rgba(180, 80, 41, 0.45);
background: linear-gradient(135deg, #f09c6d 0%, #d6764f 50%, #c75d3a 100%);
}
.farmor-btn.secondary[b-26u30eg8xn] {
background: rgba(249, 235, 213, 0.3);
border: 1px solid rgba(199, 146, 73, 0.55);
color: #8a5c27;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}
.farmor-btn.secondary:hover[b-26u30eg8xn],
.farmor-btn.secondary:focus-visible[b-26u30eg8xn] {
transform: translateY(-1px);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.7),
0 12px 30px -18px rgba(160, 100, 40, 0.35);
background: rgba(250, 239, 219, 0.55);
}
.farmor-btn:focus-visible[b-26u30eg8xn] {
outline: 2px solid rgba(206, 120, 64, 0.75);
outline-offset: 3px;
}
.farmor-footer[b-26u30eg8xn] {
margin-top: 0.6rem;
font-size: 0.95rem;
color: rgba(112, 73, 36, 0.84);
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.farmor-modal-close[b-26u30eg8xn] {
position: absolute;
top: 18px;
right: 18px;
width: 36px;
height: 36px;
border-radius: 999px;
border: 1px solid rgba(255, 255, 255, 0.45);
background: rgba(255, 255, 255, 0.35);
color: rgba(112, 73, 36, 0.9);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
transition: transform 0.25s ease, box-shadow 0.3s ease, background 0.3s ease;
box-shadow: 0 6px 16px -10px rgba(90, 48, 16, 0.55);
}
.farmor-modal-close:hover[b-26u30eg8xn],
.farmor-modal-close:focus-visible[b-26u30eg8xn] {
transform: translateY(-1px);
background: rgba(255, 255, 255, 0.6);
box-shadow: 0 8px 18px -10px rgba(92, 55, 20, 0.35);
}
.farmor-modal-close:focus-visible[b-26u30eg8xn] {
outline: 2px solid rgba(192, 120, 65, 0.8);
outline-offset: 3px;
}
.sr-only[b-26u30eg8xn] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
@keyframes farmor-modal-entrance-b-26u30eg8xn {
0% {
opacity: 0;
transform: translateY(24px) scale(0.96);
}
60% {
opacity: 1;
transform: translateY(-8px) scale(1.01);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes farmor-overlay-fade-b-26u30eg8xn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes farmor-line-reveal-b-26u30eg8xn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes farmor-glow-pulse-b-26u30eg8xn {
0%,
100% {
opacity: 0.65;
transform: scale(0.98);
}
50% {
opacity: 0.9;
transform: scale(1.05);
}
}
@media (max-width: 720px) {
.farmor-modal-shell[b-26u30eg8xn] {
padding: clamp(1.35rem, 3vw, 1.6rem);
border-radius: 24px;
}
.farmor-modal-layout[b-26u30eg8xn] {
grid-template-columns: 1fr;
justify-items: center;
text-align: center;
gap: 1.6rem;
}
.farmor-copy[b-26u30eg8xn] {
text-align: center;
align-items: center;
justify-self: center;
max-width: 100%;
gap: 1rem;
}
.farmor-header h2[b-26u30eg8xn] {
font-size: clamp(1.8rem, 7vw, 2.4rem);
}
.farmor-actions[b-26u30eg8xn] {
justify-content: center;
}
.farmor-grandma[b-26u30eg8xn] {
width: clamp(200px, 40vw, 240px);
margin-inline: auto;
}
.farmor-body[b-26u30eg8xn] {
max-width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.farmor-modal-root[b-26u30eg8xn],
.farmor-modal-shell[b-26u30eg8xn],
.farmor-line[b-26u30eg8xn],
.farmor-glow[b-26u30eg8xn],
.farmor-btn[b-26u30eg8xn] {
animation: none !important;
transition: none !important;
}
}
/* /Components/ImageModal.razor.rz.scp.css */
.image-modal-overlay[b-lqzk3f88gp]{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(0,0,0,0.75);display:flex;align-items:center;justify-content:center;z-index:2000;padding:20px}
.image-modal-content[b-lqzk3f88gp]{position:relative;max-width:90%;max-height:90%;display:flex;flex-direction:column;align-items:center}
.image-modal-content img[b-lqzk3f88gp]{max-width:100%;max-height:100%;object-fit:contain;border-radius:6px}
.image-modal-close[b-lqzk3f88gp]{position:absolute;right:-10px;top:-10px;background:#fff;border-radius:50%;width:36px;height:36px;border:none;cursor:pointer;font-size:20px}
.image-modal-caption[b-lqzk3f88gp]{margin-top:8px;color:#fff;text-align:center;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* MainLayout.razor.css */
.app-container[b-ol09g98zit] {
position: relative;
z-index: 1; /* Ensure content is above the body::before overlay */
width: 100%;
min-height: 100dvh;
}
/* Style the content container */
.layout-content[b-ol09g98zit] {
display: flex;
justify-content: center;
align-items: stretch;
width: 100%;
min-height: 100%;
padding-top: 0;
}
/* Sidebar pages own the viewport canvas, not a shrink-to-fit flex item.
Their inner content already accounts for the fixed sidebar. */
.layout-content[b-ol09g98zit] > .app-layout {
width: 100%;
min-width: 0;
}
/* ── Downgrade Notice ────────────────────────────────────────
A gentle "parchment note" that floats at the top of the
content area, to the right of the sidebar. Frosted glass
with warm copper accents — a kind whisper, not a warning. */
.downgrade-notice[b-ol09g98zit] {
position: fixed;
top: 0;
left: 280px;
right: 0;
z-index: 1100;
background: rgba(253, 245, 235, 0.88);
backdrop-filter: blur(14px) saturate(1.4);
-webkit-backdrop-filter: blur(14px) saturate(1.4);
border-bottom: 1px solid rgba(196, 165, 128, 0.25);
box-shadow:
0 1px 3px rgba(92, 64, 51, 0.06),
0 8px 24px rgba(92, 64, 51, 0.04);
}
.downgrade-notice__inner[b-ol09g98zit] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1.5rem;
}
/* Candle icon — the LovOne brand anchor */
.downgrade-notice__icon[b-ol09g98zit] {
font-size: 1.1rem;
flex-shrink: 0;
line-height: 1;
filter: drop-shadow(0 0 3px rgba(239, 181, 103, 0.5));
}
.downgrade-notice__text[b-ol09g98zit] {
flex: 1 1 auto;
min-width: 0;
margin: 0;
font-size: 0.88rem;
line-height: 1.4;
color: #5c4033;
letter-spacing: 0.01em;
}
.downgrade-notice__actions[b-ol09g98zit] {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
/* Primary CTA — warm copper pill */
.downgrade-notice__cta[b-ol09g98zit] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.85rem;
border-radius: 999px;
font-size: 0.8rem;
font-weight: 600;
white-space: nowrap;
text-decoration: none;
color: #fff;
background: linear-gradient(135deg, #c49a6c, #a67b50);
box-shadow:
0 2px 6px rgba(164, 123, 80, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.downgrade-notice__cta:hover[b-ol09g98zit] {
transform: translateY(-1px);
box-shadow:
0 4px 12px rgba(164, 123, 80, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
/* Dismiss — ghost button, barely there */
.downgrade-notice__dismiss[b-ol09g98zit] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.35rem 0.75rem;
border-radius: 999px;
border: 1px solid rgba(176, 141, 110, 0.22);
background: rgba(255, 255, 255, 0.45);
font-size: 0.8rem;
font-weight: 500;
color: #8b7355;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s ease, border-color 0.2s ease;
}
.downgrade-notice__dismiss:hover[b-ol09g98zit] {
background: rgba(255, 255, 255, 0.7);
border-color: rgba(176, 141, 110, 0.35);
}
/* ── Tablet / Mobile: sidebar collapses ── */
@media (max-width: 1024px) {
.downgrade-notice[b-ol09g98zit] {
left: 0;
top: 56px; /* below MobileTopBar */
}
}
@media (max-width: 768px) {
.downgrade-notice[b-ol09g98zit] {
top: 52px;
}
.downgrade-notice__inner[b-ol09g98zit] {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
padding: 0.45rem 0.65rem;
gap: 0;
align-items: start;
}
.downgrade-notice__icon[b-ol09g98zit] {
display: none;
}
/* Let text breathe — wrap naturally, 2–3 lines */
.downgrade-notice__text[b-ol09g98zit] {
grid-column: 1 / -1;
font-size: 0.76rem;
line-height: 1.4;
margin-bottom: 0.3rem;
}
/* Actions sit below text, right-aligned */
.downgrade-notice__actions[b-ol09g98zit] {
grid-column: 1 / -1;
flex-direction: row;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
}
/* Warm copper pill — compact */
.downgrade-notice__cta[b-ol09g98zit] {
padding: 0.25rem 0.7rem;
font-size: 0.72rem;
font-weight: 600;
}
.downgrade-notice__cta:hover[b-ol09g98zit] {
transform: none;
}
/* Subtle dismiss link */
.downgrade-notice__dismiss[b-ol09g98zit] {
padding: 0.25rem 0.5rem;
border: none;
background: transparent;
font-size: 0.72rem;
font-weight: 500;
color: #8b7355;
text-decoration: underline;
text-decoration-color: rgba(139, 115, 85, 0.3);
text-underline-offset: 2px;
white-space: nowrap;
}
.downgrade-notice__dismiss:hover[b-ol09g98zit] {
text-decoration-color: rgba(139, 115, 85, 0.6);
}
}
@media (max-width: 560px) {
.layout-content[b-ol09g98zit] {
padding-bottom: var(--lov-mobile-companion-space, 0px);
}
/* Pricing needs an unobstructed comparison. Keep its mobile companion
in a paper dock rather than floating over individual feature lines. */
.app-container:has(.pricing-shell) .layout-content[b-ol09g98zit] {
padding-bottom: max(var(--lov-mobile-companion-space, 0px), calc(5rem + env(safe-area-inset-bottom, 0px)));
}
.app-container:has(.pricing-shell)[b-ol09g98zit] .floating-host-container:not(:has(.floating-heart-weather-invite)) {
inset-inline: 0;
bottom: 0;
justify-content: flex-end;
padding: 0.75rem max(0.75rem, env(safe-area-inset-right, 0px)) calc(0.75rem + env(safe-area-inset-bottom, 0px)) max(0.75rem, env(safe-area-inset-left, 0px));
border-top: 1px solid var(--lov-line);
background: var(--lov-paper);
box-sizing: border-box;
}
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-j9zxztn2yj] {
appearance: none;
cursor: pointer;
width: 3.5rem;
height: 2.5rem;
color: white;
position: absolute;
top: 0.5rem;
right: 1rem;
border: 1px solid rgba(255, 255, 255, 0.1);
background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}
.navbar-toggler:checked[b-j9zxztn2yj] {
background-color: rgba(255, 255, 255, 0.5);
}
.top-row[b-j9zxztn2yj] {
min-height: 3.5rem;
background-color: rgba(0,0,0,0.4);
}
.navbar-brand[b-j9zxztn2yj] {
font-size: 1.1rem;
}
.bi[b-j9zxztn2yj] {
display: inline-block;
position: relative;
width: 1.25rem;
height: 1.25rem;
margin-right: 0.75rem;
top: -1px;
background-size: cover;
}
.bi-house-door-fill-nav-menu[b-j9zxztn2yj] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}
.bi-plus-square-fill-nav-menu[b-j9zxztn2yj] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}
.bi-list-nested-nav-menu[b-j9zxztn2yj] {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}
.nav-item[b-j9zxztn2yj] {
font-size: 0.9rem;
padding-bottom: 0.5rem;
}
.nav-item:first-of-type[b-j9zxztn2yj] {
padding-top: 1rem;
}
.nav-item:last-of-type[b-j9zxztn2yj] {
padding-bottom: 1rem;
}
.nav-item[b-j9zxztn2yj] .nav-link {
color: #d7d7d7;
background: none;
border: none;
border-radius: 4px;
height: 3rem;
display: flex;
align-items: center;
line-height: 3rem;
width: 100%;
}
.nav-item[b-j9zxztn2yj] a.active {
background-color: rgba(255,255,255,0.37);
color: white;
}
.nav-item[b-j9zxztn2yj] .nav-link:hover {
background-color: rgba(255,255,255,0.1);
color: white;
}
.nav-scrollable[b-j9zxztn2yj] {
display: none;
}
.navbar-toggler:checked ~ .nav-scrollable[b-j9zxztn2yj] {
display: block;
}
@media (min-width: 641px) {
.navbar-toggler[b-j9zxztn2yj] {
display: none;
}
.nav-scrollable[b-j9zxztn2yj] {
/* Never collapse the sidebar for wide screens */
display: block;
/* Allow sidebar to scroll for tall menus */
height: calc(100vh - 3.5rem);
overflow-y: auto;
}
}
/* /Components/LocalizedDatePicker.razor.rz.scp.css */
.localized-date-picker[b-079frmn27e] {
container: date-picker / inline-size;
box-sizing: border-box;
min-width: 0;
width: 100%;
margin: 0;
padding: 0;
border: 0;
color: var(--lov-ink);
font-family: var(--font-sans, Inter, system-ui, sans-serif);
}
.localized-date-picker legend[b-079frmn27e] {
margin: 0 0 .5rem;
padding: 0;
font-size: .9rem;
font-weight: 600;
line-height: 1.45;
}
.date-picker-dropdowns[b-079frmn27e] {
display: grid;
grid-template-columns: minmax(0, .85fr) minmax(0, 1.5fr) minmax(0, 1fr);
gap: .65rem;
}
.date-part[b-079frmn27e] {
display: flex;
flex-direction: column;
gap: .3rem;
min-width: 0;
margin: 0;
color: var(--lov-muted);
font-size: .8rem;
font-weight: 500;
line-height: 1.4;
}
.date-dropdown[b-079frmn27e] {
box-sizing: border-box;
width: 100%;
min-width: 0;
min-height: 3rem;
margin: 0;
padding: .65rem .7rem;
border: 1px solid var(--lov-line);
border-radius: .4rem;
background: var(--lov-paper);
color: var(--lov-ink);
color-scheme: inherit;
font-family: inherit;
font-size: 1rem;
line-height: 1.5;
cursor: pointer;
}
.date-dropdown:hover[b-079frmn27e] { border-color: var(--lov-muted); }
.date-dropdown:focus-visible[b-079frmn27e] { outline: 2px solid var(--lov-focus); outline-offset: 2px; }
.date-dropdown:disabled[b-079frmn27e] { opacity: .6; cursor: default; }
.date-picker-hint[b-079frmn27e] { margin: .55rem 0 0; color: var(--lov-muted); font-size: .8rem; line-height: 1.5; }
@container date-picker (max-width: 20rem) {
.date-picker-dropdowns[b-079frmn27e] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
.year-part[b-079frmn27e] { grid-column: 1 / -1; }
}
@media (forced-colors: active) {
.date-dropdown:focus-visible[b-079frmn27e] { outline-color: Highlight; }
}
/* /Components/LostWorldAudioInvitation.razor.rz.scp.css */
.audio-invitation[b-fj5n35rh2d] {
--audio-paper: #f8efe1;
--audio-ink: #2b211d;
--audio-muted: #78665b;
--audio-night: #14231f;
--audio-gold: #e3b965;
--audio-terracotta: #ad5b3f;
padding: clamp(92px, 12vw, 172px) 24px;
color: var(--audio-ink);
background:
radial-gradient(circle at 15% 12%, rgba(227, 185, 101, .3), transparent 30rem),
linear-gradient(145deg, #ead8bc 0%, var(--audio-paper) 48%, #f4e9d7 100%);
}
.audio-invitation__shell[b-fj5n35rh2d] {
width: min(1180px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr);
gap: clamp(54px, 8vw, 112px);
align-items: center;
}
.audio-invitation__eyebrow[b-fj5n35rh2d] {
margin: 0 0 18px;
color: var(--audio-terracotta);
font-size: .72rem;
font-weight: 750;
letter-spacing: .14em;
text-transform: uppercase;
}
.audio-invitation h2[b-fj5n35rh2d] {
max-width: 11ch;
margin: 0;
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: clamp(3rem, 5.4vw, 5.8rem);
font-weight: 450;
letter-spacing: -.05em;
line-height: .96;
}
.audio-invitation__body[b-fj5n35rh2d] {
max-width: 54ch;
margin: 28px 0 0;
color: var(--audio-muted);
font-size: clamp(1rem, 1.35vw, 1.16rem);
line-height: 1.68;
}
.audio-invitation__layers[b-fj5n35rh2d] {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 30px 0 0;
padding: 0;
list-style: none;
}
.audio-invitation__layers li[b-fj5n35rh2d] {
padding: 9px 13px;
border: 1px solid rgba(83, 62, 48, .2);
border-radius: 999px;
color: #634a3e;
background: rgba(255, 252, 246, .54);
font-size: .82rem;
font-weight: 650;
}
.audio-invitation__actions[b-fj5n35rh2d] {
display: flex;
flex-wrap: wrap;
gap: 14px 22px;
align-items: center;
margin-top: 34px;
}
.audio-invitation__primary[b-fj5n35rh2d],
.audio-invitation__secondary[b-fj5n35rh2d] {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
font-size: .93rem;
font-weight: 750;
text-decoration: none;
}
.audio-invitation__primary[b-fj5n35rh2d] {
padding: 0 25px;
border-radius: 999px;
color: #fffaf0;
background: var(--audio-night);
box-shadow: 0 14px 34px rgba(31, 24, 19, .16);
transition: transform 180ms ease, background-color 180ms ease;
}
.audio-invitation__primary:hover[b-fj5n35rh2d] {
color: #fff;
background: #20352f;
transform: translateY(-2px);
}
.audio-invitation__secondary[b-fj5n35rh2d] {
gap: 8px;
color: #554036;
}
.audio-invitation__secondary span[b-fj5n35rh2d] {
color: var(--audio-terracotta);
transition: transform 180ms ease;
}
.audio-invitation__secondary:hover span[b-fj5n35rh2d] {
transform: translateX(4px);
}
.audio-invitation__note[b-fj5n35rh2d] {
margin: 17px 0 0;
color: #856f61;
font-size: .82rem;
line-height: 1.5;
}
.audio-invitation__stage[b-fj5n35rh2d] {
position: relative;
isolation: isolate;
min-height: 620px;
display: flex;
align-items: flex-end;
overflow: hidden;
border-radius: 6px 72px 6px 6px;
color: #fff9ed;
background: var(--audio-night);
box-shadow: 0 30px 76px rgba(64, 43, 29, .24);
}
.audio-invitation__stage picture[b-fj5n35rh2d],
.audio-invitation__stage picture img[b-fj5n35rh2d],
.audio-invitation__shade[b-fj5n35rh2d] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.audio-invitation__stage picture[b-fj5n35rh2d] {
z-index: -2;
}
.audio-invitation__stage picture img[b-fj5n35rh2d] {
object-fit: cover;
}
.audio-invitation__shade[b-fj5n35rh2d] {
z-index: -1;
background:
linear-gradient(0deg, rgba(10, 23, 20, .95) 0%, rgba(10, 23, 20, .56) 42%, rgba(10, 23, 20, .04) 72%),
linear-gradient(90deg, rgba(10, 23, 20, .2), transparent 60%);
}
.audio-invitation__premiere[b-fj5n35rh2d] {
width: 100%;
display: grid;
grid-template-columns: 68px minmax(0, 1fr);
column-gap: 20px;
box-sizing: border-box;
padding: clamp(32px, 6vw, 54px);
}
.audio-invitation__soundmark[b-fj5n35rh2d] {
grid-row: 1 / 4;
width: 68px;
height: 68px;
display: grid;
place-items: center;
box-sizing: border-box;
border: 1px solid rgba(255, 249, 237, .5);
border-radius: 50%;
background: rgba(255, 249, 237, .12);
backdrop-filter: blur(8px);
}
.audio-invitation__soundmark svg[b-fj5n35rh2d] {
width: 30px;
height: 30px;
fill: var(--audio-gold);
}
.audio-invitation__premiere p[b-fj5n35rh2d] {
margin: 2px 0 7px;
color: var(--audio-gold);
font-size: .67rem;
font-weight: 750;
letter-spacing: .13em;
text-transform: uppercase;
}
.audio-invitation__premiere strong[b-fj5n35rh2d] {
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: clamp(1.65rem, 3vw, 2.65rem);
font-weight: 500;
line-height: 1.04;
}
.audio-invitation__premiere > span:last-child[b-fj5n35rh2d] {
margin-top: 10px;
color: rgba(255, 249, 237, .72);
font-size: .9rem;
line-height: 1.5;
}
.audio-invitation__primary:focus-visible[b-fj5n35rh2d],
.audio-invitation__secondary:focus-visible[b-fj5n35rh2d] {
outline: 3px solid var(--audio-terracotta);
outline-offset: 4px;
}
@media (max-width: 860px) {
.audio-invitation__shell[b-fj5n35rh2d] {
grid-template-columns: 1fr;
}
.audio-invitation h2[b-fj5n35rh2d] {
max-width: 13ch;
}
.audio-invitation__stage[b-fj5n35rh2d] {
min-height: min(640px, 82svh);
}
}
@media (max-width: 640px) {
.audio-invitation[b-fj5n35rh2d] {
padding: 78px 16px;
}
.audio-invitation h2[b-fj5n35rh2d] {
font-size: clamp(2.7rem, 13vw, 4rem);
}
.audio-invitation__actions[b-fj5n35rh2d] {
align-items: stretch;
flex-direction: column;
}
.audio-invitation__primary[b-fj5n35rh2d],
.audio-invitation__secondary[b-fj5n35rh2d] {
width: 100%;
}
.audio-invitation__stage[b-fj5n35rh2d] {
min-height: 520px;
border-radius: 4px 38px 4px 4px;
}
.audio-invitation__premiere[b-fj5n35rh2d] {
grid-template-columns: 54px minmax(0, 1fr);
gap: 0 15px;
padding: 24px;
}
.audio-invitation__soundmark[b-fj5n35rh2d] {
width: 54px;
height: 54px;
}
.audio-invitation__soundmark svg[b-fj5n35rh2d] {
width: 24px;
height: 24px;
}
}
@media (prefers-reduced-motion: reduce) {
.audio-invitation *[b-fj5n35rh2d],
.audio-invitation *[b-fj5n35rh2d]::before,
.audio-invitation *[b-fj5n35rh2d]::after {
transition: none !important;
}
}
/* /Components/LostWorldJourneyShelf.razor.rz.scp.css */
.lost-world-journey-shelf[b-t2p8b3qkd6] {
width: min(100% - 48px, 1180px);
box-sizing: border-box;
margin-inline: auto;
padding-block: clamp(48px, 8vw, 92px);
}
.journey-shelf__heading[b-t2p8b3qkd6],
.journey-shelf__message[b-t2p8b3qkd6] {
max-width: 680px;
}
.journey-shelf__heading h2[b-t2p8b3qkd6],
.journey-shelf__message h2[b-t2p8b3qkd6],
.journey-shelf__world h3[b-t2p8b3qkd6],
.journey-shelf__featured h4[b-t2p8b3qkd6],
.journey-shelf__history h4[b-t2p8b3qkd6],
.journey-shelf__previous-title[b-t2p8b3qkd6] {
font-family: var(--font-serif);
font-weight: 500;
}
.journey-shelf__heading h2[b-t2p8b3qkd6],
.journey-shelf__message h2[b-t2p8b3qkd6] {
margin: 0;
color: var(--ink, #29231f);
font-size: clamp(2rem, 4vw, 3.2rem);
line-height: 1;
letter-spacing: -0.035em;
}
.journey-shelf__message[b-t2p8b3qkd6] {
padding: clamp(24px, 4vw, 40px);
border: 1px solid color-mix(in srgb, var(--terracotta, #b86345) 30%, transparent);
border-radius: 20px;
background: #fffaf2;
}
.journey-shelf__message p[b-t2p8b3qkd6] {
max-width: 58ch;
color: var(--ink-soft, #675c50);
line-height: 1.6;
}
.journey-shelf__loading[b-t2p8b3qkd6] {
min-height: 176px;
padding: 28px;
border-radius: 18px;
color: #45372d;
background: linear-gradient(110deg, #eee2ce, #fff8ed 42%, #eee2ce 78%);
background-size: 200% 100%;
font-weight: 650;
animation: journey-shelf-shimmer-b-t2p8b3qkd6 1.7s ease-in-out infinite;
}
.journey-shelf__loading h2[b-t2p8b3qkd6] {
margin: 0;
color: var(--ink, #29231f);
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: clamp(1.7rem, 3vw, 2.4rem);
font-weight: 500;
}
.journey-shelf__loading-status[b-t2p8b3qkd6] {
display: flex;
align-items: center;
gap: 14px;
margin-top: 24px;
}
.journey-shelf__loading-mark[b-t2p8b3qkd6] {
width: 32px;
height: 32px;
border: 3px solid rgba(91, 63, 40, 0.25);
border-top-color: #7f432d;
border-radius: 50%;
animation: journey-shelf-spin-b-t2p8b3qkd6 800ms linear infinite;
}
.journey-shelf__world[b-t2p8b3qkd6] {
max-width: 900px;
margin-top: clamp(30px, 5vw, 48px);
}
.journey-shelf__world-header[b-t2p8b3qkd6] {
margin-bottom: 14px;
}
.journey-shelf__world h3[b-t2p8b3qkd6] {
margin: 0;
color: var(--ink, #29231f);
font-size: clamp(1.55rem, 2.5vw, 2rem);
line-height: 1.08;
}
.journey-shelf__featured[b-t2p8b3qkd6] {
display: grid;
grid-template-columns: 190px minmax(0, 1fr) 34px;
align-items: stretch;
box-sizing: border-box;
border: 1px solid #cbb9a2;
border-radius: 20px;
overflow: hidden;
color: #29231f;
background: #fffaf2;
box-shadow: 0 10px 30px rgba(55, 38, 23, 0.1);
text-decoration: none;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
a.journey-shelf__featured:hover[b-t2p8b3qkd6] {
border-color: #8a4a35;
box-shadow: 0 16px 34px rgba(55, 38, 23, 0.15);
transform: translateY(-2px);
}
.journey-shelf__featured-image[b-t2p8b3qkd6] {
width: 100%;
height: 100%;
min-height: 174px;
object-fit: cover;
}
.journey-shelf__featured-copy[b-t2p8b3qkd6] {
min-width: 0;
align-self: center;
padding: 25px 20px 25px 26px;
}
.journey-shelf__featured--no-image[b-t2p8b3qkd6] {
grid-template-columns: minmax(0, 1fr) 34px;
}
.journey-shelf__featured h4[b-t2p8b3qkd6],
.journey-shelf__history h4[b-t2p8b3qkd6] {
margin: 0;
color: #29231f;
line-height: 1.15;
}
.journey-shelf__featured h4[b-t2p8b3qkd6] {
font-size: clamp(1.35rem, 2.3vw, 1.75rem);
}
.journey-shelf__featured--resting[b-t2p8b3qkd6],
.journey-shelf__history-link--resting[b-t2p8b3qkd6] {
border-style: dashed;
color: #574b40;
background: #f4ecdf;
}
.journey-shelf__arrow[b-t2p8b3qkd6] {
align-self: center;
justify-self: center;
color: #8a4a35;
font-family: var(--font-sans);
font-size: 1.35rem;
transition: transform 160ms ease;
}
a:hover > .journey-shelf__arrow[b-t2p8b3qkd6] {
transform: translateX(3px);
}
.journey-shelf__previous-title[b-t2p8b3qkd6] {
margin: 28px 0 10px;
color: #675c50;
font-size: 1rem;
letter-spacing: 0.01em;
}
.journey-shelf__history[b-t2p8b3qkd6] {
margin: 0;
padding: 0;
overflow: hidden;
border: 1px solid rgba(142, 115, 87, 0.34);
border-radius: 16px;
background: rgba(255, 250, 242, 0.66);
list-style: none;
}
.journey-shelf__history li + li[b-t2p8b3qkd6] {
border-top: 1px solid rgba(142, 115, 87, 0.25);
}
.journey-shelf__history-link[b-t2p8b3qkd6] {
min-height: 76px;
display: grid;
grid-template-columns: minmax(0, 1fr) 34px;
align-items: center;
box-sizing: border-box;
padding: 15px 18px 15px 20px;
color: #29231f;
text-decoration: none;
transition: background-color 160ms ease;
}
a.journey-shelf__history-link:hover[b-t2p8b3qkd6] {
background: #fffaf2;
}
.journey-shelf__history-copy[b-t2p8b3qkd6] {
min-width: 0;
}
.journey-shelf__history h4[b-t2p8b3qkd6] {
overflow: hidden;
font-size: 1.16rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.journey-shelf__featured:focus-visible[b-t2p8b3qkd6],
.journey-shelf__history-link:focus-visible[b-t2p8b3qkd6],
.journey-shelf__button:focus-visible[b-t2p8b3qkd6] {
outline: 3px solid #164b73;
outline-offset: 3px;
}
.journey-shelf__action-label[b-t2p8b3qkd6] {
margin: 0 0 10px;
color: #7f432d;
font-size: 0.76rem;
font-weight: 760;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.journey-shelf__progress[b-t2p8b3qkd6],
.journey-shelf__activity[b-t2p8b3qkd6],
.journey-shelf__language[b-t2p8b3qkd6],
.journey-shelf__time[b-t2p8b3qkd6],
.journey-shelf__resting[b-t2p8b3qkd6] {
display: block;
margin: 7px 0 0;
color: #5e5145;
font-size: 0.9rem;
line-height: 1.35;
}
.journey-shelf__language[b-t2p8b3qkd6] {
width: fit-content;
padding: 3px 8px;
border-radius: 999px;
background: rgba(226, 185, 109, 0.2);
font-size: 0.82rem;
}
.journey-shelf__resting[b-t2p8b3qkd6] {
color: #6c3528;
font-weight: 700;
}
.journey-shelf__more[b-t2p8b3qkd6] {
max-width: 900px;
margin-top: 24px;
text-align: center;
}
.journey-shelf__button[b-t2p8b3qkd6] {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: 16px;
padding: 10px 18px;
border: 1px solid #6c3528;
border-radius: 999px;
color: #fffaf2;
background: #6c3528;
font: inherit;
font-weight: 700;
line-height: 1.2;
text-decoration: none;
cursor: pointer;
}
.journey-shelf__button:hover:not(:disabled)[b-t2p8b3qkd6] {
background: #4f251c;
}
.journey-shelf__button:disabled[b-t2p8b3qkd6] {
cursor: wait;
opacity: 0.72;
}
@keyframes journey-shelf-shimmer-b-t2p8b3qkd6 {
0%, 100% { background-position: 100% 0; }
50% { background-position: 0 0; }
}
@keyframes journey-shelf-spin-b-t2p8b3qkd6 {
to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
.lost-world-journey-shelf[b-t2p8b3qkd6] {
width: min(100% - 32px, 1180px);
padding-block: 48px 58px;
}
.journey-shelf__heading h2[b-t2p8b3qkd6],
.journey-shelf__message h2[b-t2p8b3qkd6] {
font-size: clamp(2rem, 10vw, 2.75rem);
}
.journey-shelf__world[b-t2p8b3qkd6] {
margin-top: 28px;
}
.journey-shelf__world h3[b-t2p8b3qkd6] {
font-size: 1.62rem;
}
.journey-shelf__featured[b-t2p8b3qkd6] {
grid-template-columns: 96px minmax(0, 1fr) 28px;
border-radius: 16px;
}
.journey-shelf__featured--no-image[b-t2p8b3qkd6] {
grid-template-columns: minmax(0, 1fr) 28px;
}
.journey-shelf__featured-image[b-t2p8b3qkd6] {
min-height: 150px;
}
.journey-shelf__featured-copy[b-t2p8b3qkd6] {
padding: 19px 10px 19px 16px;
}
.journey-shelf__featured h4[b-t2p8b3qkd6] {
font-size: 1.22rem;
}
.journey-shelf__action-label[b-t2p8b3qkd6] {
margin-bottom: 7px;
font-size: 0.68rem;
}
.journey-shelf__progress[b-t2p8b3qkd6],
.journey-shelf__activity[b-t2p8b3qkd6],
.journey-shelf__language[b-t2p8b3qkd6],
.journey-shelf__resting[b-t2p8b3qkd6] {
font-size: 0.82rem;
}
.journey-shelf__previous-title[b-t2p8b3qkd6] {
margin-top: 24px;
}
.journey-shelf__history-link[b-t2p8b3qkd6] {
min-height: 72px;
padding: 14px 14px 14px 17px;
}
.journey-shelf__history h4[b-t2p8b3qkd6] {
font-size: 1.08rem;
}
.journey-shelf__more .journey-shelf__button[b-t2p8b3qkd6] {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.journey-shelf__loading[b-t2p8b3qkd6],
.journey-shelf__loading-mark[b-t2p8b3qkd6],
.journey-shelf__featured[b-t2p8b3qkd6],
.journey-shelf__history-link[b-t2p8b3qkd6],
.journey-shelf__arrow[b-t2p8b3qkd6] {
animation: none;
transition: none;
}
}
/* /Components/LostWorldsFrontPageSection.razor.rz.scp.css */
.lost-worlds-threshold[b-9shilrjdpe] {
--lost-worlds-ink: #493426;
--lost-worlds-muted: #755f4d;
--lost-worlds-accent: #86502e;
--lost-worlds-accent-deep: #744326;
--lost-worlds-surface: #f8ead5;
--lost-worlds-surface-soft: #fff7eb;
--lost-worlds-line: rgba(119, 76, 44, 0.2);
width: min(100% - 2rem, 1120px);
margin: clamp(3rem, 4.5vw, 4rem) auto;
color: var(--lost-worlds-ink);
}
.lost-worlds-threshold__inner[b-9shilrjdpe] {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1.16fr) minmax(19rem, 0.84fr);
min-height: 30rem;
overflow: hidden;
border: 1px solid var(--lost-worlds-line);
border-radius: 1.5rem;
background: var(--lost-worlds-surface);
box-shadow: 0 1.25rem 3.5rem rgba(86, 51, 29, 0.13);
isolation: isolate;
}
.lost-worlds-threshold__visual[b-9shilrjdpe] {
position: relative;
min-width: 0;
min-height: 30rem;
overflow: hidden;
background: #d7bea0;
}
.lost-worlds-threshold__visual[b-9shilrjdpe]::after {
position: absolute;
inset: 0;
content: "";
pointer-events: none;
background: linear-gradient(90deg, transparent 64%, rgba(248, 234, 213, 0.5) 100%);
}
.lost-worlds-threshold__panorama[b-9shilrjdpe] {
width: 100%;
height: 100%;
min-height: 30rem;
display: block;
object-fit: cover;
object-position: center;
transition: transform 800ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.lost-worlds-threshold:focus-within .lost-worlds-threshold__panorama[b-9shilrjdpe],
.lost-worlds-threshold:hover .lost-worlds-threshold__panorama[b-9shilrjdpe] {
transform: scale(1.018);
}
.lost-worlds-threshold__inset[b-9shilrjdpe] {
position: absolute;
right: 1.5rem;
bottom: 1.5rem;
z-index: 2;
width: clamp(9rem, 20vw, 14rem);
margin: 0;
padding: 0.38rem;
background: rgba(255, 247, 235, 0.94);
border: 1px solid rgba(108, 70, 42, 0.24);
box-shadow: 0 0.8rem 2rem rgba(61, 38, 23, 0.24);
transform: rotate(-1.5deg);
}
.lost-worlds-threshold__inset img[b-9shilrjdpe] {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
display: block;
object-fit: cover;
}
.lost-worlds-threshold__copy[b-9shilrjdpe] {
position: relative;
z-index: 3;
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
align-items: flex-start;
padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.75rem, 3vw, 2.75rem);
background:
linear-gradient(rgba(248, 234, 213, 0.93), rgba(248, 234, 213, 0.93)),
repeating-linear-gradient(0deg, transparent 0 5px, rgba(114, 72, 41, 0.03) 5px 6px);
}
.lost-worlds-threshold__eyebrow[b-9shilrjdpe] {
margin: 0 0 0.85rem;
color: var(--lost-worlds-accent);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.19em;
text-transform: uppercase;
}
.lost-worlds-threshold__heading[b-9shilrjdpe] {
max-width: 15ch;
margin: 0;
color: var(--lost-worlds-ink);
font-family: var(--font-serif) !important;
font-size: clamp(2.15rem, 3.7vw, 3.4rem);
font-weight: 590;
line-height: 0.98;
letter-spacing: -0.035em;
text-wrap: balance;
}
.lost-worlds-threshold__journey-status[b-9shilrjdpe] {
margin: 1.2rem 0 0;
color: var(--lost-worlds-accent-deep);
font-family: var(--font-serif);
font-size: 0.95rem;
font-style: italic;
line-height: 1.45;
}
.lost-worlds-threshold__body[b-9shilrjdpe] {
max-width: 34rem;
margin: 1rem 0 0;
color: var(--lost-worlds-muted);
font-family: var(--font-serif);
font-size: clamp(1rem, 1.3vw, 1.12rem);
line-height: 1.55;
}
.lost-worlds-threshold__featured-world[b-9shilrjdpe] {
width: 100%;
max-width: 34rem;
margin-top: 1rem;
padding-top: 0.9rem;
border-top: 1px solid var(--lost-worlds-line);
}
.lost-worlds-threshold__featured-label[b-9shilrjdpe] {
margin: 0 0 0.35rem;
color: var(--lost-worlds-accent);
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
line-height: 1.2;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.lost-worlds-threshold__world-title[b-9shilrjdpe] {
margin: 0;
color: var(--lost-worlds-ink);
font-family: var(--font-serif) !important;
font-size: clamp(1.2rem, 2vw, 1.55rem);
font-weight: 600;
line-height: 1.2;
}
.lost-worlds-threshold__world-ingress[b-9shilrjdpe] {
display: -webkit-box;
max-width: 44ch;
margin: 0.45rem 0 0;
overflow: hidden;
color: var(--lost-worlds-muted);
font-family: var(--font-serif);
font-size: 0.9rem;
font-style: italic;
line-height: 1.5;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.lost-worlds-threshold__actions[b-9shilrjdpe] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem 1.1rem;
margin-top: 1.25rem;
}
.lost-worlds-threshold__primary-action[b-9shilrjdpe],
.lost-worlds-threshold__secondary-action[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action[b-9shilrjdpe] {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 0.94rem;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease, color 180ms ease, border-color 180ms ease;
}
.lost-worlds-threshold__primary-action[b-9shilrjdpe] {
gap: 0.65rem;
padding: 0.78rem 1.18rem;
border: 1px solid var(--lost-worlds-accent-deep);
border-radius: 0.3rem;
background: var(--lost-worlds-accent-deep);
color: #fffaf3;
}
.lost-worlds-threshold__secondary-action[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action[b-9shilrjdpe] {
gap: 0.4rem;
padding: 0.72rem 0.1rem;
border-bottom: 1px solid rgba(116, 67, 38, 0.38);
color: var(--lost-worlds-accent-deep);
}
.lost-worlds-threshold__primary-action:hover[b-9shilrjdpe],
.lost-worlds-threshold__primary-action:focus-visible[b-9shilrjdpe] {
background: #62371f;
border-color: #62371f;
color: #fffaf3;
transform: translateY(-1px);
}
.lost-worlds-threshold__secondary-action:hover[b-9shilrjdpe],
.lost-worlds-threshold__secondary-action:focus-visible[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action:hover[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action:focus-visible[b-9shilrjdpe] {
color: #5e331d;
border-color: #5e331d;
}
.lost-worlds-threshold__primary-action:focus-visible[b-9shilrjdpe],
.lost-worlds-threshold__secondary-action:focus-visible[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action:focus-visible[b-9shilrjdpe] {
outline: 3px solid rgba(176, 119, 75, 0.44);
outline-offset: 3px;
}
.lost-worlds-threshold__arrow[b-9shilrjdpe] {
transition: transform 180ms ease;
}
.lost-worlds-threshold__primary-action:hover .lost-worlds-threshold__arrow[b-9shilrjdpe],
.lost-worlds-threshold__primary-action:focus-visible .lost-worlds-threshold__arrow[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action:hover .lost-worlds-threshold__arrow[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action:focus-visible .lost-worlds-threshold__arrow[b-9shilrjdpe] {
transform: translateX(0.2rem);
}
.lost-worlds-threshold__supporting-text[b-9shilrjdpe] {
max-width: 31rem;
margin: 0.75rem 0 0;
color: var(--lost-worlds-muted);
font-family: var(--font-sans);
font-size: 0.78rem;
line-height: 1.5;
}
.night-mode .lost-worlds-threshold[b-9shilrjdpe] {
--lost-worlds-ink: #f2dfca;
--lost-worlds-muted: #d6c0aa;
--lost-worlds-accent: #d6a271;
--lost-worlds-accent-deep: #e1ae7d;
--lost-worlds-surface: #2a211c;
--lost-worlds-surface-soft: #332821;
--lost-worlds-line: rgba(228, 183, 139, 0.22);
}
.night-mode .lost-worlds-threshold__copy[b-9shilrjdpe] {
background:
linear-gradient(rgba(42, 33, 28, 0.95), rgba(42, 33, 28, 0.95)),
repeating-linear-gradient(0deg, transparent 0 5px, rgba(235, 196, 157, 0.03) 5px 6px);
}
.night-mode .lost-worlds-threshold__visual[b-9shilrjdpe]::after {
background: linear-gradient(90deg, transparent 64%, rgba(42, 33, 28, 0.52) 100%);
}
.night-mode .lost-worlds-threshold__inset[b-9shilrjdpe] {
background: #332821;
border-color: rgba(228, 183, 139, 0.26);
}
.night-mode .lost-worlds-threshold__primary-action[b-9shilrjdpe] {
border-color: #c98e5b;
background: #a56337;
color: #fff8ef;
}
.night-mode .lost-worlds-threshold__primary-action:hover[b-9shilrjdpe],
.night-mode .lost-worlds-threshold__primary-action:focus-visible[b-9shilrjdpe] {
border-color: #dca06b;
background: #b97343;
}
.night-mode .lost-worlds-threshold__supporting-text[b-9shilrjdpe] {
color: rgba(224, 203, 181, 0.76);
}
@media (max-width: 900px) {
.lost-worlds-threshold__inner[b-9shilrjdpe] {
grid-template-columns: minmax(0, 1.04fr) minmax(18rem, 0.96fr);
}
.lost-worlds-threshold__inset[b-9shilrjdpe] {
right: 1rem;
bottom: 1rem;
}
}
@media (max-width: 768px) {
.lost-worlds-threshold[b-9shilrjdpe] {
width: min(100% - 1.5rem, 42rem);
margin-block: 2.5rem;
}
.lost-worlds-threshold__inner[b-9shilrjdpe] {
grid-template-columns: 1fr;
min-height: 0;
border-radius: 1.15rem;
}
.lost-worlds-threshold__visual[b-9shilrjdpe] {
grid-row: 1;
min-height: 0;
aspect-ratio: 16 / 8.5;
}
.lost-worlds-threshold__visual[b-9shilrjdpe]::after {
background: linear-gradient(0deg, rgba(248, 234, 213, 0.42) 0%, transparent 30%);
}
.lost-worlds-threshold__panorama[b-9shilrjdpe] {
min-height: 0;
aspect-ratio: 16 / 8.5;
}
.lost-worlds-threshold__inset[b-9shilrjdpe] {
display: none;
}
.lost-worlds-threshold__copy[b-9shilrjdpe] {
grid-row: 2;
padding: 1.35rem 1.2rem 1.45rem;
}
.lost-worlds-threshold__heading[b-9shilrjdpe] {
max-width: 15ch;
font-size: clamp(2rem, 10vw, 2.5rem);
line-height: 1.02;
}
.lost-worlds-threshold__eyebrow[b-9shilrjdpe] {
margin-bottom: 0.6rem;
}
.lost-worlds-threshold__body[b-9shilrjdpe] {
margin-top: 0.85rem;
font-size: 0.98rem;
line-height: 1.5;
}
.lost-worlds-threshold__featured-world[b-9shilrjdpe] {
margin-top: 0.85rem;
padding-top: 0.75rem;
}
.lost-worlds-threshold__world-ingress[b-9shilrjdpe] {
font-size: 0.86rem;
line-height: 1.4;
}
.lost-worlds-threshold__actions[b-9shilrjdpe] {
width: 100%;
align-items: stretch;
flex-direction: column;
gap: 0.55rem;
margin-top: 1rem;
}
.lost-worlds-threshold__primary-action[b-9shilrjdpe],
.lost-worlds-threshold__secondary-action[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action[b-9shilrjdpe] {
width: 100%;
min-height: 3rem;
}
.lost-worlds-threshold__secondary-action[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action[b-9shilrjdpe] {
width: auto;
align-self: center;
padding: 0.55rem 0.25rem;
border: 0;
border-bottom: 1px solid rgba(116, 67, 38, 0.3);
border-radius: 0;
}
.lost-worlds-threshold__supporting-text[b-9shilrjdpe] {
margin-top: 0.55rem;
font-size: 0.75rem;
text-align: center;
}
.night-mode .lost-worlds-threshold__visual[b-9shilrjdpe]::after {
background: linear-gradient(0deg, rgba(42, 33, 28, 0.46) 0%, transparent 30%);
}
}
@media (prefers-reduced-motion: reduce) {
.lost-worlds-threshold__panorama[b-9shilrjdpe],
.lost-worlds-threshold__primary-action[b-9shilrjdpe],
.lost-worlds-threshold__secondary-action[b-9shilrjdpe],
.lost-worlds-threshold__catalogue-action[b-9shilrjdpe],
.lost-worlds-threshold__arrow[b-9shilrjdpe] {
transition: none;
}
.lost-worlds-threshold:focus-within .lost-worlds-threshold__panorama[b-9shilrjdpe],
.lost-worlds-threshold:hover .lost-worlds-threshold__panorama[b-9shilrjdpe],
.lost-worlds-threshold__primary-action:hover[b-9shilrjdpe],
.lost-worlds-threshold__primary-action:focus-visible[b-9shilrjdpe] {
transform: none;
}
}
/* /Components/LostWorldStoryEditionShelf.razor.rz.scp.css */
.story-edition-shelf[b-hhebex2dxq] {
color: #fffaf1;
background:
radial-gradient(circle at 84% 18%, rgba(225, 181, 99, 0.13), transparent 34%),
linear-gradient(145deg, #172720, #0f1d19 72%);
}
.story-edition-shelf__inner[b-hhebex2dxq] {
width: min(calc(100% - 48px), 1180px);
box-sizing: border-box;
margin-inline: auto;
padding-block: clamp(56px, 8vw, 96px);
}
.story-edition-shelf__heading[b-hhebex2dxq] {
max-width: 720px;
}
.story-edition-shelf__eyebrow[b-hhebex2dxq] {
margin: 0 0 14px;
color: #e3b965;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 750;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.story-edition-shelf__heading h2[b-hhebex2dxq],
.story-edition-shelf__message h3[b-hhebex2dxq],
.story-edition-book h3[b-hhebex2dxq],
.story-edition-book__cover strong[b-hhebex2dxq] {
font-family: var(--font-serif);
}
.story-edition-shelf__heading h2[b-hhebex2dxq] {
margin: 0;
font-size: clamp(2.6rem, 5vw, 4.4rem);
font-weight: 450;
line-height: 0.98;
letter-spacing: -0.045em;
}
.story-edition-shelf__heading > p:last-child[b-hhebex2dxq] {
max-width: 62ch;
margin: 20px 0 0;
color: #d5c9b6;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.65;
}
.story-edition-shelf__grid[b-hhebex2dxq] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
max-width: 980px;
margin-top: clamp(32px, 5vw, 52px);
}
.story-edition-shelf--featured-single .story-edition-shelf__inner[b-hhebex2dxq] {
display: grid;
grid-template-columns: minmax(17rem, 0.78fr) minmax(32rem, 1.22fr);
gap: clamp(3rem, 6vw, 6.5rem);
align-items: center;
padding-block: clamp(72px, 9vw, 116px);
}
.story-edition-shelf--featured-single .story-edition-shelf__heading[b-hhebex2dxq] {
max-width: 28rem;
}
.story-edition-shelf--featured-single .story-edition-shelf__heading h2[b-hhebex2dxq] {
font-size: clamp(3.15rem, 5vw, 5rem);
}
.story-edition-shelf--featured-single .story-edition-shelf__heading > p:last-child[b-hhebex2dxq] {
max-width: 39ch;
}
.story-edition-shelf--featured-single .story-edition-shelf__grid[b-hhebex2dxq] {
grid-template-columns: 1fr;
width: 100%;
max-width: none;
margin-top: 0;
}
.story-edition-shelf--featured-single .story-edition-book[b-hhebex2dxq] {
min-height: 350px;
grid-template-columns: minmax(15rem, 42%) minmax(0, 1fr);
border-radius: 5px 28px 28px 5px;
box-shadow: 0 30px 68px rgba(0, 0, 0, 0.3);
}
.story-edition-shelf--featured-single .story-edition-book__cover[b-hhebex2dxq] {
min-height: 350px;
padding: 30px 26px 32px 34px;
}
.story-edition-shelf--featured-single .story-edition-book__cover-label[b-hhebex2dxq] {
font-size: 0.7rem;
}
.story-edition-shelf--featured-single .story-edition-book__cover strong[b-hhebex2dxq] {
font-size: clamp(1.7rem, 2.5vw, 2.35rem);
}
.story-edition-shelf--featured-single .story-edition-book__copy[b-hhebex2dxq] {
padding: 36px 34px 31px;
}
.story-edition-shelf--featured-single .story-edition-book h3[b-hhebex2dxq] {
font-size: clamp(1.7rem, 2.4vw, 2.25rem);
}
.story-edition-shelf--featured-single .story-edition-book__world[b-hhebex2dxq],
.story-edition-shelf--featured-single .story-edition-book__passages[b-hhebex2dxq],
.story-edition-shelf--featured-single .story-edition-book time[b-hhebex2dxq] {
font-size: 0.92rem;
}
.story-edition-shelf--featured-single .story-edition-book__read[b-hhebex2dxq] {
min-height: 50px;
font-size: 0.94rem;
}
.story-edition-shelf--featured-single .story-edition-book__utilities a[b-hhebex2dxq],
.story-edition-shelf--featured-single .story-edition-book__utilities button[b-hhebex2dxq] {
font-size: 0.8rem;
}
.story-edition-book[b-hhebex2dxq] {
min-width: 0;
min-height: 260px;
display: grid;
grid-template-columns: minmax(128px, 36%) minmax(0, 1fr);
overflow: hidden;
border: 1px solid rgba(241, 222, 188, 0.18);
border-radius: 4px 22px 22px 4px;
color: #30261f;
background: #fff9ef;
box-shadow: 0 18px 38px rgba(0, 0, 0, 0.2);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.story-edition-book:hover[b-hhebex2dxq] {
border-color: rgba(227, 185, 101, 0.72);
box-shadow: 0 24px 46px rgba(0, 0, 0, 0.26);
transform: translateY(-3px);
}
.story-edition-book__cover-link[b-hhebex2dxq] {
min-width: 0;
height: 100%;
display: block;
color: inherit;
text-decoration: none;
}
.story-edition-book__cover[b-hhebex2dxq] {
position: relative;
isolation: isolate;
min-height: 260px;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 22px 18px 24px 25px;
overflow: hidden;
color: #fffaf1;
background: #72412f;
box-shadow: inset 8px 0 12px rgba(255, 255, 255, 0.08), inset -4px 0 8px rgba(0, 0, 0, 0.2);
}
.story-edition-book__cover[b-hhebex2dxq]::before {
content: "";
position: absolute;
z-index: 3;
inset: 0 auto 0 10px;
width: 1px;
background: rgba(255, 247, 230, 0.26);
box-shadow: 3px 0 0 rgba(0, 0, 0, 0.16);
}
.story-edition-book__cover img[b-hhebex2dxq],
.story-edition-book__cover-shade[b-hhebex2dxq] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.story-edition-book__cover img[b-hhebex2dxq] {
z-index: -2;
object-fit: cover;
}
.story-edition-book__cover-shade[b-hhebex2dxq] {
z-index: -1;
background: linear-gradient(180deg, rgba(15, 29, 25, 0.12), rgba(15, 22, 19, 0.88));
}
.story-edition-book__cover-label[b-hhebex2dxq] {
margin-bottom: 9px;
font-family: var(--font-sans);
font-size: 0.65rem;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.story-edition-book__cover strong[b-hhebex2dxq] {
font-size: clamp(1.25rem, 2vw, 1.7rem);
font-weight: 500;
line-height: 1.02;
}
.story-edition-book__copy[b-hhebex2dxq] {
min-width: 0;
display: flex;
flex-direction: column;
padding: 26px 24px 24px;
}
.story-edition-book__status[b-hhebex2dxq] {
display: flex;
align-items: center;
gap: 8px;
margin: 0 0 14px;
color: #4f6e53;
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 760;
letter-spacing: 0.055em;
text-transform: uppercase;
}
.story-edition-book__status span[b-hhebex2dxq] {
font-size: 0.55rem;
}
.story-edition-book h3[b-hhebex2dxq] {
margin: 0;
overflow-wrap: anywhere;
font-size: clamp(1.35rem, 2vw, 1.7rem);
font-weight: 550;
line-height: 1.12;
}
.story-edition-book__title-link[b-hhebex2dxq] {
color: inherit;
text-decoration: none;
}
.story-edition-book__title-link:hover[b-hhebex2dxq],
.story-edition-book__read:hover[b-hhebex2dxq],
.story-edition-book__utilities a:hover[b-hhebex2dxq],
.story-edition-book__utilities button:hover[b-hhebex2dxq] {
color: #a85738;
}
.story-edition-book__world[b-hhebex2dxq],
.story-edition-book__passages[b-hhebex2dxq],
.story-edition-book time[b-hhebex2dxq],
.story-edition-book__actions[b-hhebex2dxq],
.story-edition-book__read[b-hhebex2dxq],
.story-edition-book__utilities[b-hhebex2dxq],
.story-edition-book__utilities a[b-hhebex2dxq],
.story-edition-book__utilities button[b-hhebex2dxq],
.story-edition-book__error[b-hhebex2dxq] {
font-family: var(--font-sans);
}
.story-edition-book__world[b-hhebex2dxq] {
margin: 8px 0 0;
color: #8a4a35;
font-size: 0.84rem;
font-weight: 720;
}
.story-edition-book__passages[b-hhebex2dxq],
.story-edition-book time[b-hhebex2dxq] {
margin: 8px 0 0;
color: #716153;
font-size: 0.84rem;
line-height: 1.4;
}
.story-edition-book__actions[b-hhebex2dxq] {
margin-top: auto;
padding-top: 18px;
}
.story-edition-book__read[b-hhebex2dxq] {
min-height: 42px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
border-top: 1px solid #ead9c5;
border-bottom: 1px solid #ead9c5;
color: #743c2b;
font-size: 0.86rem;
font-weight: 750;
text-decoration: none;
}
.story-edition-book__utilities[b-hhebex2dxq] {
display: flex;
align-items: stretch;
flex-wrap: wrap;
gap: 14px;
padding-top: 10px;
}
.story-edition-book__utilities a[b-hhebex2dxq],
.story-edition-book__utilities button[b-hhebex2dxq] {
min-height: 38px;
display: inline-flex;
align-items: center;
padding: 0;
border: 0;
color: #716153;
background: transparent;
font-size: 0.76rem;
font-weight: 700;
line-height: 1.25;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.story-edition-book__utilities button[b-hhebex2dxq]::before {
content: "↓";
margin-right: 5px;
color: #a85738;
}
.story-edition-book__utilities .story-edition-book__edit[b-hhebex2dxq]::before {
content: "✎";
margin-right: 5px;
color: #a85738;
}
.story-edition-book__utilities .story-edition-book__edit[b-hhebex2dxq] {
padding-inline: 10px;
border: 1px solid #d9b982;
border-radius: 999px;
color: #743c2b;
background: #fff4df;
}
.story-edition-book__utilities .story-edition-book__edit--prepare[b-hhebex2dxq]::before {
content: "✦";
}
.story-edition-book__utilities button:disabled[b-hhebex2dxq] {
cursor: wait;
opacity: 0.58;
}
.story-edition-book__error[b-hhebex2dxq] {
margin: 8px 0 0;
color: #9c3f31;
font-size: 0.76rem;
line-height: 1.4;
}
.story-edition-shelf__loading[b-hhebex2dxq],
.story-edition-shelf__message[b-hhebex2dxq] {
max-width: 740px;
box-sizing: border-box;
margin-top: 32px;
padding: 24px 26px;
border: 1px solid rgba(241, 222, 188, 0.2);
border-radius: 16px;
color: #e4d7c4;
background: rgba(255, 250, 241, 0.055);
font-family: var(--font-sans);
}
.story-edition-shelf__loading[b-hhebex2dxq] {
display: flex;
align-items: center;
gap: 14px;
}
.story-edition-shelf__loading span[b-hhebex2dxq] {
width: 20px;
height: 20px;
border: 2px solid rgba(227, 185, 101, 0.28);
border-top-color: #e3b965;
border-radius: 50%;
animation: story-edition-spin-b-hhebex2dxq 800ms linear infinite;
}
.story-edition-shelf__message h3[b-hhebex2dxq] {
margin: 0;
color: #fffaf1;
font-size: 1.5rem;
}
.story-edition-shelf__message p[b-hhebex2dxq] {
margin: 10px 0 0;
line-height: 1.55;
}
.story-edition-shelf__message button[b-hhebex2dxq] {
min-height: 42px;
margin-top: 18px;
padding: 9px 17px;
border: 1px solid #e3b965;
border-radius: 999px;
color: #19231f;
background: #e3b965;
font: 700 0.9rem var(--font-sans);
cursor: pointer;
}
.story-edition-book__cover-link:focus-visible[b-hhebex2dxq],
.story-edition-book__title-link:focus-visible[b-hhebex2dxq],
.story-edition-book__read:focus-visible[b-hhebex2dxq],
.story-edition-book__utilities a:focus-visible[b-hhebex2dxq],
.story-edition-book__utilities button:focus-visible[b-hhebex2dxq],
.story-edition-shelf__message button:focus-visible[b-hhebex2dxq] {
outline: 3px solid #f0c979;
outline-offset: 4px;
}
@keyframes story-edition-spin-b-hhebex2dxq {
to { transform: rotate(360deg); }
}
@media (max-width: 820px) {
.story-edition-shelf__grid[b-hhebex2dxq] {
grid-template-columns: 1fr;
}
}
@media (max-width: 1050px) {
.story-edition-shelf--featured-single .story-edition-shelf__inner[b-hhebex2dxq] {
display: block;
padding-block: clamp(56px, 8vw, 96px);
}
.story-edition-shelf--featured-single .story-edition-shelf__heading[b-hhebex2dxq] {
max-width: 720px;
}
.story-edition-shelf--featured-single .story-edition-shelf__heading h2[b-hhebex2dxq] {
font-size: clamp(2.6rem, 7vw, 4.4rem);
}
.story-edition-shelf--featured-single .story-edition-shelf__grid[b-hhebex2dxq] {
max-width: 760px;
margin-top: clamp(32px, 5vw, 52px);
}
}
@media (max-width: 640px) {
.story-edition-shelf__inner[b-hhebex2dxq] {
width: min(calc(100% - 32px), 1180px);
padding-block: 54px 62px;
}
.story-edition-shelf__heading h2[b-hhebex2dxq] {
font-size: clamp(2.5rem, 12vw, 3.25rem);
}
.story-edition-shelf__grid[b-hhebex2dxq] {
gap: 16px;
margin-top: 30px;
}
.story-edition-book[b-hhebex2dxq] {
min-height: 220px;
grid-template-columns: 112px minmax(0, 1fr);
border-radius: 3px 17px 17px 3px;
}
.story-edition-shelf--featured-single .story-edition-book[b-hhebex2dxq] {
min-height: 220px;
grid-template-columns: 112px minmax(0, 1fr);
border-radius: 3px 17px 17px 3px;
}
.story-edition-book__cover[b-hhebex2dxq] {
min-height: 220px;
padding: 17px 12px 20px 20px;
}
.story-edition-shelf--featured-single .story-edition-book__cover[b-hhebex2dxq] {
min-height: 220px;
padding: 17px 12px 20px 20px;
}
.story-edition-shelf--featured-single .story-edition-book__cover-label[b-hhebex2dxq] {
font-size: 0.57rem;
}
.story-edition-shelf--featured-single .story-edition-book__cover strong[b-hhebex2dxq] {
font-size: 1.15rem;
}
.story-edition-book__cover-label[b-hhebex2dxq] {
font-size: 0.57rem;
}
.story-edition-book__cover strong[b-hhebex2dxq] {
font-size: 1.15rem;
}
.story-edition-book__copy[b-hhebex2dxq] {
padding: 21px 16px 19px;
}
.story-edition-shelf--featured-single .story-edition-book__copy[b-hhebex2dxq] {
padding: 21px 16px 19px;
}
.story-edition-book__status[b-hhebex2dxq] {
margin-bottom: 10px;
font-size: 0.65rem;
}
.story-edition-book h3[b-hhebex2dxq] {
font-size: 1.25rem;
}
.story-edition-shelf--featured-single .story-edition-book h3[b-hhebex2dxq] {
font-size: 1.25rem;
}
.story-edition-book__world[b-hhebex2dxq],
.story-edition-book__passages[b-hhebex2dxq],
.story-edition-book time[b-hhebex2dxq],
.story-edition-book__read[b-hhebex2dxq] {
font-size: 0.78rem;
}
.story-edition-shelf--featured-single .story-edition-book__world[b-hhebex2dxq],
.story-edition-shelf--featured-single .story-edition-book__passages[b-hhebex2dxq],
.story-edition-shelf--featured-single .story-edition-book time[b-hhebex2dxq],
.story-edition-shelf--featured-single .story-edition-book__read[b-hhebex2dxq] {
font-size: 0.78rem;
}
.story-edition-book__utilities[b-hhebex2dxq] {
flex-direction: column;
gap: 0;
padding-top: 7px;
}
.story-edition-book__utilities a[b-hhebex2dxq],
.story-edition-book__utilities button[b-hhebex2dxq] {
min-height: 32px;
font-size: 0.72rem;
}
}
@media (prefers-reduced-motion: reduce) {
.story-edition-shelf__loading span[b-hhebex2dxq],
.story-edition-book[b-hhebex2dxq] {
animation: none;
transition: none;
}
}
/* /Components/LovedOneEditModal.razor.rz.scp.css */
/* ========================================= */
/* Shared Modal Overlay Styling (from you) */
/* ========================================= */
.modal-overlay[b-391iuau2gn] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(40, 25, 15, 0.55); /* Your overlay color */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 2000;
backdrop-filter: blur(2px);
}
.modal-overlay.visible[b-391iuau2gn] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
/* Prompt example chips for avatar description (polished) */
.avatar-prompt-examples[b-391iuau2gn] {
margin-top: 0.6rem;
}
/* Card wrapper that matches the soft rounded card used elsewhere */
.avatar-prompt-examples.avatar-prompt-card[b-391iuau2gn] {
background: linear-gradient(180deg, var(--lov-paper) 0%, #FFF4EF 100%);
border: 1px solid rgba(224,216,209,0.8);
border-radius: 14px;
padding: 18px;
box-shadow: 0 8px 24px rgba(120,80,55,0.06);
max-width: 100%;
}
.avatar-prompt-examples .prompt-examples-heading[b-391iuau2gn] {
font-size: 0.95rem;
color: var(--text-light);
margin-bottom: 12px;
}
.avatar-prompt-examples .prompt-card[b-391iuau2gn] {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Prompt examples: stacked full-width card with large readable rows */
.avatar-prompt-examples[b-391iuau2gn] {
display: block;
margin-top: 12px;
}
.avatar-prompt-card[b-391iuau2gn] {
display: block;
border-radius: 14px;
background: #FFF8F5; /* soft warm background */
border: 1px solid rgba(220,190,170,0.28);
padding: 16px;
}
.prompt-card[b-391iuau2gn] {
display: block;
}
/* Each prompt row is a large, full-width button reset to look like a card row */
.prompt-row[b-391iuau2gn] {
display: block;
width: 100% !important;
box-sizing: border-box;
-webkit-appearance: none; /* reset button styles */
appearance: none;
border: none;
background: transparent;
text-align: left;
/*padding: 14px 12px;
margin: 0 0 8px 0;*/
border-radius: 10px;
cursor: pointer;
font-size: 0.7rem; /* larger type */
line-height: 1.6;
color: #3b2a23; /* dark warm text */
font-weight: 400;
}
.prompt-row:last-child[b-391iuau2gn] { margin-bottom: 0; }
.prompt-row:hover[b-391iuau2gn] {
background: rgba(0,0,0,0.03);
}
.prompt-row.selected[b-391iuau2gn] {
background: rgba(255,210,195,0.25) !important; /* subtle peach */
}
/* Ensure inner text doesn't overflow */
.prompt-row .prompt-text[b-391iuau2gn] {
display: block;
white-space: normal;
word-break: break-word;
}
/* Pulse animation for personality preset changes */
@keyframes preset-pulse-b-391iuau2gn {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.pulse-animate[b-391iuau2gn] {
animation: preset-pulse-b-391iuau2gn 0.5s ease-out;
}
.modal-overlay .modal-content[b-391iuau2gn] {
max-width: 440px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
z-index: 1002;
min-height: 450px; /* match or exceed tallest tab */
max-height: 90vh;
}
.modal-overlay.visible .modal-content[b-391iuau2gn] {
transform: scale(1);
}
.modal-content.lovedone-edit-modal-content[b-391iuau2gn] {
background-color: #FFFCFA;
padding: 25px 30px;
border-radius: 16px;
max-width: 650px;
width: 90%;
text-align: left;
box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12);
display: flex;
flex-direction: column;
max-height: 90vh;
position: relative;
}
.lovedone-edit-modal-content .modal-close-icon-button[b-391iuau2gn] {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
font-size: 1.5rem;
font-weight: 400;
color: var(--text-light);
cursor: pointer;
line-height: 1;
padding: 5px;
transition: color 0.2s ease;
}
.lovedone-edit-modal-content .modal-close-icon-button:hover[b-391iuau2gn] {
color: var(--text);
}
.lovedone-edit-modal-title[b-391iuau2gn] {
font-family: var(--font-serif);
font-size: 1.75rem;
font-weight: 600;
color: var(--text);
text-align: center;
margin: 0 0 1rem 0;
padding-right: 30px;
}
.modal-tabs-container[b-391iuau2gn] {
display: flex;
margin-bottom: 1.5rem;
border-bottom: 1px solid var(--soft-border);
}
.modal-tabs-container[b-391iuau2gn] {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Hide on Firefox */
}
.modal-tabs-container[b-391iuau2gn]::-webkit-scrollbar {
display: none; /* Hide on Chrome/Safari */
}
.modal-tab-button[b-391iuau2gn] {
flex: 1;
padding: 0.8rem 0.5rem;
background: none;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
font-size: 0.9rem;
font-weight: 500;
color: var(--text-light);
font-family: var(--font-lato);
text-align: center;
white-space: nowrap;
}
.modal-tab-button:hover[b-391iuau2gn] {
color: var(--text);
}
.modal-tab-button.active[b-391iuau2gn] {
color: var(--text);
border-bottom-color: var(--accent);
font-weight: 600;
}
.lovedone-modal-body[b-391iuau2gn] {
overflow-y: auto;
flex-grow: 1;
padding: 0.5rem 0.25rem;
transition: all 0.2s ease;
min-height: 480px; /* Adjust based on tallest tab */
/*max-height: 50vh;*/ /* Prevent it from growing forever */
/* Enable smooth momentum scrolling on iOS/mobile */
-webkit-overflow-scrolling: touch;
}
/* All sections remain visible instead of requiring an undiscoverable swipe. */
.lovedone-dialog-editor .modal-tabs-container[b-391iuau2gn] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
flex: 0 0 auto;
gap: .25rem;
margin: 0;
padding: .5rem 1.75rem;
overflow: visible;
border-bottom: 1px solid #d5c9b8;
}
.lovedone-dialog-editor .modal-tab-button[b-391iuau2gn] {
min-width: 0;
min-height: 2.75rem;
padding: .6rem .4rem;
border-radius: .35rem;
border-bottom: 2px solid transparent;
color: #686154;
font-family: var(--font-sans);
font-size: .95rem;
line-height: 1.4;
white-space: normal;
overflow-wrap: anywhere;
}
.lovedone-dialog-editor .modal-tab-button.active[b-391iuau2gn] {
color: #503a21;
background: #f1e7d6;
border-bottom-color: #76552f;
font-weight: 600;
}
.lovedone-dialog-editor .modal-close-icon-button[b-391iuau2gn] { top: 1rem; right: 1rem; }
@media (max-width: 40rem) {
.lovedone-dialog-editor .modal-tabs-container[b-391iuau2gn] {
grid-template-columns: repeat(2, minmax(0, 1fr));
padding: .5rem 1rem;
}
}
.form-group-settings[b-391iuau2gn] {
margin-bottom: 1.3rem;
}
.form-group-settings label[b-391iuau2gn] {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-light);
margin-bottom: 0.5rem;
}
.form-group-settings input[type="text"][b-391iuau2gn],
.form-group-settings input[type="date"][b-391iuau2gn],
.form-group-settings textarea[b-391iuau2gn],
.lovedone-modal-body .form-select-styled[b-391iuau2gn] {
width: 100%;
padding: 12px 15px;
font-size: 0.95rem;
border-radius: 10px;
border: 1px solid #E0D8D1;
background-color: var(--white);
color: var(--text);
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
line-height: 1.5;
}
.form-group-settings textarea[b-391iuau2gn],
.textarea-lovedone-description-modal[b-391iuau2gn] {
resize: none;
}
.lovedone-modal-body .form-select-styled[b-391iuau2gn] {
padding-right: 42px;
background-color: #fff9f4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b5243' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.form-group-settings input[type="text"]:focus[b-391iuau2gn],
.form-group-settings input[type="date"]:focus[b-391iuau2gn],
.lovedone-modal-body .form-select-styled:focus[b-391iuau2gn] {
border-color: var(--accent);
outline: none;
box-shadow: 0 0 0 3px rgba(255,196,179,0.25);
}
.input-hint[b-391iuau2gn] {
font-size: 0.8rem;
color: var(--text-light);
margin-top: 0.25rem;
}
.derived-culture-field[b-391iuau2gn] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
width: 100%;
padding: 12px 15px;
border-radius: 10px;
border: 1px solid rgba(166, 124, 82, 0.22);
background: linear-gradient(180deg, #FFF9F4 0%, #FFF5EF 100%);
color: var(--text);
box-sizing: border-box;
}
.derived-culture-code[b-391iuau2gn] {
font-family: var(--font-lato);
font-size: 0.95rem;
font-weight: 600;
color: var(--text);
}
.derived-culture-caption[b-391iuau2gn] {
font-size: 0.8rem;
color: var(--text-light);
text-align: right;
}
.form-row-settings[b-391iuau2gn] {
display: flex;
gap: 1rem;
}
.form-group-settings.form-group-half[b-391iuau2gn] {
flex: 1;
/* margin-bottom: 0;*/
}
.slider-group[b-391iuau2gn] {
margin-bottom: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.slider-group .slider-label[b-391iuau2gn] {
font-size: 0.9rem;
font-weight: 500;
color: var(--text);
margin-bottom: 0.25rem;
} .slider-group .slider-extreme-labels[b-391iuau2gn] {
display: flex;
justify-content: space-between;
font-size: 0.75rem;
color: var(--text-light);
margin-bottom: 0.25rem;
padding: 0 0.25rem;
}
.slider-group .slider-extreme-labels .extreme-left[b-391iuau2gn] {
text-align: left;
}
.slider-group .slider-extreme-labels .extreme-right[b-391iuau2gn] {
text-align: right;
}/* Custom slider class to override all other styles */
.custom-slider[b-391iuau2gn] {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
display: block !important;
accent-color: var(--accent);
height: 2rem !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background: transparent !important;
outline: none !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
flex: none !important;
position: relative !important;
}
.slider-group .slider-input-row[b-391iuau2gn] {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.slider-group .slider-input-row input[type="range"][b-391iuau2gn] {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
accent-color: var(--accent);
height: 2rem; /* Increase overall height */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
outline: none;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
}
.slider-group .slider-value[b-391iuau2gn] {
font-size: 0.85rem;
color: var(--text-light);
min-width: 120px; text-align: right; font-weight: 500;
}
.slider-group input[type="range"][b-391iuau2gn] {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
accent-color: var(--accent);
height: 2rem; /* Increase overall height */
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
outline: none;
box-sizing: border-box !important;
margin: 0 !important;
padding: 0 !important;
flex: none !important; /* Remove any flex constraints */
}
/* Override any Bootstrap .form-range styles */
.slider-group input[type="range"].form-range[b-391iuau2gn],
.slider-group .form-range[b-391iuau2gn] {
width: 100% !important;
max-width: none !important;
flex: none !important;
}/* Webkit (Chrome, Safari, Edge) slider thumb */
.slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 1.5rem; /* Increased from default 1rem */
height: 1.5rem; /* Increased from default 1rem */
border-radius: 50%;
background: var(--accent, #0d6efd);
cursor: pointer;
border: 0;
transition: none; /* Remove transitions to eliminate hover effects */
margin-top: -0.5rem; /* Center the thumb on the track */
}
/* Remove hover/active effects for webkit */
.slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-thumb:hover,
.slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-thumb:active {
background: var(--accent, #0d6efd); /* Keep same color */
transform: none; /* Prevent scaling */
box-shadow: none; /* Remove any shadow effects */
}
/* Webkit slider track */
.slider-group input[type="range"][b-391iuau2gn]::-webkit-slider-runnable-track {
width: 100%;
height: 0.5rem;
cursor: pointer;
background: var(--soft-border, #e9ecef);
border-radius: 0.25rem;
border: 0;
} /* Firefox slider thumb */
.slider-group input[type="range"][b-391iuau2gn]::-moz-range-thumb {
width: 1.5rem; /* Increased from default 1rem */
height: 1.5rem; /* Increased from default 1rem */
border-radius: 50%;
background: var(--accent, #0d6efd);
cursor: pointer;
border: 0;
-moz-appearance: none;
appearance: none;
transition: none; /* Remove transitions */
margin-top: 0; /* Firefox centers differently, may need adjustment */
box-sizing: border-box;
}
/* Remove hover/active effects for Firefox */
.slider-group input[type="range"][b-391iuau2gn]::-moz-range-thumb:hover,
.slider-group input[type="range"][b-391iuau2gn]::-moz-range-thumb:active {
background: var(--accent, #0d6efd); /* Keep same color */
transform: none; /* Prevent scaling */
box-shadow: none; /* Remove any shadow effects */
}
/* Firefox slider track */
.slider-group input[type="range"][b-391iuau2gn]::-moz-range-track {
width: 100%;
height: 0.5rem;
cursor: pointer;
background: var(--soft-border, #e9ecef);
border-radius: 0.25rem;
border: 0;
}
/* Remove focus outline */
.slider-group input[type="range"]:focus[b-391iuau2gn] {
outline: none;
}
/* Remove focus effects for webkit */
.slider-group input[type="range"]:focus[b-391iuau2gn]::-webkit-slider-thumb {
box-shadow: none;
} /* Remove focus effects for Firefox */
.slider-group input[type="range"]:focus[b-391iuau2gn]::-moz-range-thumb {
box-shadow: none;
}
/* Additional styling for custom-slider pseudo elements */
.custom-slider[b-391iuau2gn]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
height: 1.5rem;
width: 1.5rem;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
border: 0;
box-shadow: none;
transition: none;
margin-top: -0.5rem; /* Center vertically on track */
}
.custom-slider[b-391iuau2gn]::-webkit-slider-thumb:hover,
.custom-slider[b-391iuau2gn]::-webkit-slider-thumb:active {
background: var(--accent); /* Keep same color */
transform: none; /* No scaling */
box-shadow: none; /* No shadow effects */
}
.custom-slider[b-391iuau2gn]::-webkit-slider-runnable-track {
background: var(--soft-border, #e9ecef);
height: 0.5rem;
border-radius: 0.25rem;
border: none;
width: 100%;
}
.custom-slider[b-391iuau2gn]::-moz-range-thumb {
height: 1.5rem;
width: 1.5rem;
background: var(--accent);
border-radius: 50%;
cursor: pointer;
border: 0;
box-shadow: none;
transition: none;
-moz-appearance: none;
appearance: none;
margin-top: 0; /* Firefox centers differently */
}
.custom-slider[b-391iuau2gn]::-moz-range-thumb:hover,
.custom-slider[b-391iuau2gn]::-moz-range-thumb:active {
background: var(--accent); /* Keep same color */
transform: none; /* No scaling */
box-shadow: none; /* No shadow effects */
}
.custom-slider[b-391iuau2gn]::-moz-range-track {
background: var(--soft-border, #e9ecef);
height: 0.5rem;
border-radius: 0.25rem;
border: none;
width: 100%;
}
.custom-slider:focus[b-391iuau2gn] {
outline: none;
}
.custom-slider:focus[b-391iuau2gn]::-webkit-slider-thumb {
box-shadow: none;
}
.custom-slider:focus[b-391iuau2gn]::-moz-range-thumb {
box-shadow: none;
}
/* Responsive behavior for desktop vs mobile slider labels */
.desktop-only[b-391iuau2gn] {
display: flex; /* Show on desktop by default */
}
.slider-mobile-extremes[b-391iuau2gn] {
display: none; /* Hide on desktop by default */
font-size: 0.75rem;
color: var(--text-light);
margin-bottom: 0.25rem;
text-align: center;
}
/* Mobile behavior */
@media (max-width: 767px) {
.desktop-only[b-391iuau2gn] {
display: none !important; /* Force hide on mobile */
}
.slider-mobile-extremes[b-391iuau2gn] {
display: block !important; /* Force show on mobile */
}
}
.lovedone-modal-footer[b-391iuau2gn] {
padding: 1.2rem 0 0.5rem 0;
border-top: 1px solid var(--soft-border);
display: flex;
justify-content: flex-end;
gap: 0.75rem;
flex-shrink: 0;
/*margin-top: 0.5rem;*/
}
.btn-modal-cancel-refined[b-391iuau2gn] {
background-color: rgba(122, 92, 62, 0.045);
color: var(--text-muted, #8f7b68);
border: 1px solid rgba(122, 92, 62, 0.08);
padding: 0.7rem 1.4rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-modal-cancel-refined:hover[b-391iuau2gn] {
background-color: rgba(122, 92, 62, 0.08);
border-color: rgba(122, 92, 62, 0.14);
color: var(--text, #6a5140);
}
.btn-modal-save-refined[b-391iuau2gn] {
background-color: var(--accent);
color: var(--white);
padding: 0.7rem 1.4rem;
border-radius: 10px;
border: none;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-modal-save-refined:hover[b-391iuau2gn] {
background-color: var(--peach);
}
.btn-modal-save-refined.saving[b-391iuau2gn] {
background-color: var(--peach) !important;
cursor: wait;
}
.btn-modal-save-refined.saving .spinner-inline[b-391iuau2gn] {
width: 1em;
height: 1em;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: var(--white);
border-radius: 50%;
display: inline-block;
animation: spin-b-391iuau2gn 0.8s linear infinite;
margin-right: 0.5rem;
vertical-align: text-bottom;
}
.btn-modal-save-refined:disabled:not(.saving)[b-391iuau2gn] {
background-color: #e0e0e0 !important;
color: #a0a0a0 !important;
cursor: not-allowed;
}
/* Preset overwrite warning modal */
.overwrite-warning-overlay[b-391iuau2gn] {
position: fixed;
inset: 0;
background-color: rgba(40, 25, 15, 0.35);
display: flex;
align-items: center;
justify-content: center;
z-index: 2205;
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.overwrite-warning-modal[b-391iuau2gn] {
width: min(520px, calc(100% - 32px));
background: var(--peach-bg);
border: 1px solid rgba(224,216,209,0.8);
border-radius: 16px;
box-shadow: var(--shadow-medium);
padding: 18px;
}
.overwrite-warning-title[b-391iuau2gn] {
font-weight: 700;
color: var(--text);
margin-bottom: 10px;
}
.overwrite-warning-body[b-391iuau2gn] {
color: var(--text-light);
line-height: 1.45;
display: flex;
flex-direction: column;
gap: 8px;
}
.overwrite-warning-actions[b-391iuau2gn] {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 16px;
}
.overwrite-warning-actions .btn-modal-cancel-refined[b-391iuau2gn],
.overwrite-warning-actions .btn-modal-save-refined[b-391iuau2gn] {
flex: 1 1 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
/* Make the destructive action distinct but still on-brand */
.overwrite-warning-primary[b-391iuau2gn] {
background-color: var(--peach) !important;
color: var(--text) !important;
}
.overwrite-warning-primary:hover[b-391iuau2gn] {
background-color: var(--accent) !important;
color: var(--white) !important;
}
@keyframes spin-b-391iuau2gn {
to {
transform: rotate(360deg);
}
}
/* Mobile footer button layout override: side-by-side like pet modal */
@media (max-width: 600px) {
.lovedone-edit-modal-content .lovedone-modal-footer[b-391iuau2gn] {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 14px 16px !important;
position: sticky;
bottom: 0;
background: #FFFCFA;
box-shadow: 0 -6px 16px rgba(0,0,0,0.08);
}
.lovedone-edit-modal-content .lovedone-modal-footer .btn-modal-cancel-refined[b-391iuau2gn],
.lovedone-edit-modal-content .lovedone-modal-footer .btn-modal-save-refined[b-391iuau2gn] {
flex: 1 1 0 !important;
width: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
border-radius: 14px !important;
padding: 0.95rem 1.1rem !important;
font-size: 1rem !important;
}
}
@media (max-width: 600px) {
.form-row-settings[b-391iuau2gn] {
flex-direction: column;
}
.form-group-settings.form-group-half[b-391iuau2gn] {
width: 100%;
}
.form-row-settings[b-391iuau2gn] {
flex-direction: column;
gap: 0.75rem;
}
.modal-tabs-container[b-391iuau2gn] {
/* flex-direction: column;*/
align-items: stretch;
}
.modal-tab-button[b-391iuau2gn] {
text-align: left;
border: none;
border-left: 4px solid transparent;
padding: 0.7rem 1rem;
}
.modal-tab-button.active[b-391iuau2gn] {
border-left-color: var(--accent);
background-color: rgba(255, 224, 207, 0.25);
}
}
.modal-tabs-container[b-391iuau2gn] {
display: flex;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
margin-bottom: 1.2rem;
border-bottom: 1px solid var(--soft-border);
min-height:50px;
}
.modal-tabs-container[b-391iuau2gn]::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/*.modal-tabs-container::after {
content: "";
position: absolute;
right: 0;
top: 0;
height: 100%;
width: 2rem;
background: linear-gradient(to left, #FFFCFA, transparent);*/ /* Adjust to your background */
/*pointer-events: none;
z-index: 1;
}*/
.modal-tab-button[b-391iuau2gn] {
flex: 0 0 auto; /* Prevent squishing */
padding: 0.8rem 1rem;
font-size: 0.9rem;
font-weight: 500;
border: none;
border-bottom: 3px solid transparent;
background: none;
color: var(--text-light);
transition: color 0.2s ease, border-color 0.2s ease;
white-space: nowrap;
}
.modal-tab-button.active[b-391iuau2gn] {
color: var(--text);
border-bottom-color: var(--accent);
font-weight: 600;
}
/*.lovedone-modal-body > div {
height: 100%;
}*/
.avatar-row[b-391iuau2gn] {
display: flex;
gap: 2.5em;
margin-bottom: 1.5em;
align-items: center;
}
.avatar-col[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
}
.relation-col[b-391iuau2gn] {
flex: 1;
min-width: 200px;
}
.avatar-preview-img[b-391iuau2gn] {
width: 100px;
height: 100px;
border-radius: 50%;
border: 2.5px solid #efd7bb;
background: #fdf4ed;
box-shadow: 0 2px 8px rgba(247,186,173,0.08);
}
.avatar-clickable[b-391iuau2gn] {
cursor: pointer;
transition: box-shadow 0.2s;
}
.avatar-clickable:hover[b-391iuau2gn],
.avatar-clickable:focus[b-391iuau2gn] {
box-shadow: 0 0 0 4px #fbbbad66;
outline: none;
}
.avatar-hint[b-391iuau2gn] {
color: #ab9882;
font-size: 0.9rem;
text-align: center;
font-style: italic;
user-select: none;
max-width: 150px;
}
.avatar-picker-overlay[b-391iuau2gn] {
position: fixed;
z-index: 2000;
inset: 0;
background: rgba(80,60,44,0.24);
display: flex;
align-items: center;
justify-content: center;
}
.avatar-picker-modal[b-391iuau2gn] {
background: #fff9f4;
padding: 2em 2.3em 1.5em 2.3em;
border-radius: 22px;
box-shadow: 0 6px 44px rgba(120,80,55,0.11);
min-width: 320px;
max-width: 96vw;
}
.avatar-picker-list[b-391iuau2gn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(68px, 1fr));
gap: 1.2em;
justify-items: center;
margin: 1.4em 0 1.8em 0;
}
.avatar-picker-img[b-391iuau2gn] {
width: 80px;
height: 80px;
border-radius: 50%;
border: 2px solid #efd7bb;
background: #fdf4ed;
box-shadow: 0 1px 4px rgba(247,186,173,0.07);
cursor: pointer;
transition: border 0.16s, box-shadow 0.16s;
}
.avatar-picker-img.selected[b-391iuau2gn],
.avatar-picker-img:hover[b-391iuau2gn] {
border: 2.4px solid #fbbbad;
box-shadow: 0 2px 8px #fbbbad33;
}
.avatar-gender-tabs[b-391iuau2gn] {
display: flex;
justify-content: center;
gap: 1em;
margin-bottom: 1em;
}
.avatar-tab[b-391iuau2gn] {
background: none;
border: 2px solid #efd7bb;
border-radius: 20px;
padding: 0.5em 1.4em;
font-size: 1.02rem;
color: #7a5a43;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.avatar-tab.selected[b-391iuau2gn] {
background: #fbbbad;
border-color: #fbbbad;
color: #38250d;
font-weight: 600;
box-shadow: 0 2px 8px #fbbbad33;
}
.avatar-tab:hover[b-391iuau2gn] {
background-color: #ffe9e1;
}
@media (max-width: 700px) {
.avatar-row[b-391iuau2gn] {
flex-direction: column;
align-items: center;
gap: 1.4em;
}
.relation-col[b-391iuau2gn] {
width: 100%;
}
}
/* ========================================= */
/* Emotional Triggers Styling */
/* ========================================= */
.emotional-triggers-grid[b-391iuau2gn] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 10px;
margin: 15px 0;
}
.trigger-tag[b-391iuau2gn] {
background: #f8f9fa;
border: 2px solid #e9ecef;
border-radius: 12px;
padding: 12px 16px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
min-height: 60px;
justify-content: center;
}
.trigger-tag:hover[b-391iuau2gn] {
background: #e3f2fd;
border-color: #90caf9;
transform: translateY(-1px);
}
.trigger-tag.selected[b-391iuau2gn] {
background: #1976d2;
border-color: #1976d2;
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(25, 118, 210, 0.3);
}
.trigger-tag.has-value[b-391iuau2gn] {
border-color: #4caf50;
background: #f1f8e9;
}
.trigger-tag.has-value.selected[b-391iuau2gn] {
background: #2e7d32;
border-color: #2e7d32;
}
.trigger-name[b-391iuau2gn] {
font-size: 0.9em;
font-weight: 500;
line-height: 1.2;
}
.trigger-value[b-391iuau2gn] {
font-size: 0.75em;
opacity: 0.8;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 2px 6px;
border-radius: 8px;
min-width: 30px;
}
.trigger-slider-section[b-391iuau2gn] {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.trigger-slider-section .slider-label[b-391iuau2gn] {
font-weight: 600;
margin-bottom: 10px;
color: #1976d2;
}
.btn-remove-trigger[b-391iuau2gn] {
background: #f44336;
color: white;
border: none;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.85em;
cursor: pointer;
margin-top: 15px;
transition: background-color 0.2s ease;
}
.btn-remove-trigger:hover[b-391iuau2gn] {
background: #d32f2f;
}
@media (max-width: 700px) {
.emotional-triggers-grid[b-391iuau2gn] {
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 8px;
}
.trigger-tag[b-391iuau2gn] {
padding: 10px 12px;
min-height: 55px;
}
.trigger-name[b-391iuau2gn] {
font-size: 0.85em;
}
.trigger-slider-section[b-391iuau2gn] {
padding: 15px;
margin-top: 15px;
}
}
/* Traits Section Styles */
.traits-grid[b-391iuau2gn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin: 15px 0;
}
.trait-tag[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 8px;
background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
border: 2px solid #e0e0e0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-height: 70px;
text-align: center;
position: relative;
}
.trait-tag:hover[b-391iuau2gn] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: #2196f3;
}
.trait-tag.selected[b-391iuau2gn] {
background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
color: white;
border-color: #1976d2;
box-shadow: 0 4px 16px rgba(33, 150, 243, 0.3);
}
.trait-tag.has-value[b-391iuau2gn] {
border-color: #4caf50;
background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
}
.trait-tag.has-value.selected[b-391iuau2gn] {
background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
border-color: #388e3c;
}
.trait-name[b-391iuau2gn] {
font-size: 0.9em;
font-weight: 500;
line-height: 1.2;
}
.trait-value[b-391iuau2gn] {
font-size: 0.75em;
opacity: 0.8;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 2px 6px;
border-radius: 8px;
min-width: 30px;
margin-top: 4px;
}
.trait-slider-section[b-391iuau2gn] {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.trait-slider-section .slider-label[b-391iuau2gn] {
font-weight: 600;
margin-bottom: 10px;
color: #1976d2;
}
.contextual-modifiers[b-391iuau2gn] {
margin-top: 15px;
padding: 15px;
background: #fff;
border-radius: 8px;
border: 1px solid #e0e0e0;
}
.contextual-modifiers h4[b-391iuau2gn] {
margin: 0 0 10px 0;
font-size: 0.9em;
color: #666;
font-weight: 600;
}
.modifier-item[b-391iuau2gn] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid #f0f0f0;
}
.modifier-item:last-child[b-391iuau2gn] {
border-bottom: none;
}
.modifier-name[b-391iuau2gn] {
font-size: 0.85em;
color: #555;
}
.modifier-value[b-391iuau2gn] {
font-size: 0.85em;
font-weight: 600;
color: #2196f3;
background: #e3f2fd;
padding: 2px 8px;
border-radius: 4px;
}
/* Mobile responsiveness for traits */
@media (max-width: 768px) {
.lovedone-modal-body[b-391iuau2gn] {
/* Add subtle scroll indicator at bottom */
position: relative;
}
/* Add a subtle shadow/gradient above the footer to hint at scrollable content */
.lovedone-modal-body[b-391iuau2gn]::after {
content: '';
position: sticky;
bottom: -1px;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to top, rgba(255, 252, 250, 0.9) 0%, rgba(255, 252, 250, 0.3) 50%, transparent 100%);
pointer-events: none;
z-index: 1;
margin: 0 -0.25rem; /* Compensate for body padding */
}
.traits-grid[b-391iuau2gn] {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.trait-tag[b-391iuau2gn] {
padding: 10px 6px;
min-height: 60px;
}
.trait-name[b-391iuau2gn] {
font-size: 0.85em;
}
.trait-slider-section[b-391iuau2gn] {
padding: 15px;
margin-top: 15px;
}
.contextual-modifiers[b-391iuau2gn] {
padding: 12px;
}
}
/* Preferred Topics Section Styles */
.topics-grid[b-391iuau2gn] {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
margin: 15px 0;
}
.topic-tag[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 12px 8px;
background: linear-gradient(135deg, #fff3e0 0%, #fce4ec 100%);
border: 2px solid #e0e0e0;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
min-height: 70px;
text-align: center;
position: relative;
}
.topic-tag:hover[b-391iuau2gn] {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
border-color: #ff9800;
}
.topic-tag.selected[b-391iuau2gn] {
background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
color: white;
border-color: #f57c00;
box-shadow: 0 4px 16px rgba(255, 152, 0, 0.3);
}
.topic-tag.has-value[b-391iuau2gn] {
border-color: #4caf50;
background: linear-gradient(135deg, #e8f5e8 0%, #f1f8e9 100%);
}
.topic-tag.has-value.selected[b-391iuau2gn] {
background: linear-gradient(135deg, #4caf50 0%, #388e3c 100%);
border-color: #388e3c;
}
.topic-name[b-391iuau2gn] {
font-size: 0.9em;
font-weight: 500;
line-height: 1.2;
}
.topic-count[b-391iuau2gn] {
font-size: 0.75em;
opacity: 0.8;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 12px;
min-width: 20px;
margin-top: 4px;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.topic-editor-section[b-391iuau2gn] {
margin-top: 20px;
padding: 20px;
background: #f8f9fa;
border-radius: 12px;
border: 1px solid #e9ecef;
}
.topic-editor-section h4[b-391iuau2gn] {
margin: 0 0 15px 0;
font-size: 1.1em;
color: #f57c00;
font-weight: 600;
}
.topic-input-section[b-391iuau2gn] {
display: flex;
gap: 10px;
margin-bottom: 15px;
align-items: stretch;
}
.topic-input[b-391iuau2gn] {
flex: 1;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 0.9em;
}
.topic-input:focus[b-391iuau2gn] {
border-color: #ff9800;
outline: none;
box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1);
}
.btn-add-topic[b-391iuau2gn] {
background-color: #ff9800;
color: white;
border: none;
padding: 10px 16px;
border-radius: 8px;
font-size: 0.9em;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s ease;
white-space: nowrap;
}
.btn-add-topic:hover[b-391iuau2gn] {
background-color: #f57c00;
}
.subtopics-list[b-391iuau2gn] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 15px;
}
.subtopic-item[b-391iuau2gn] {
display: flex;
align-items: center;
background: #fff;
border: 1px solid #ddd;
border-radius: 20px;
padding: 6px 8px 6px 12px;
font-size: 0.85em;
gap: 6px;
}
.subtopic-text[b-391iuau2gn] {
color: #555;
}
.btn-remove-subtopic[b-391iuau2gn] {
background: #f44336;
color: white;
border: none;
border-radius: 50%;
width: 20px;
height: 20px;
font-size: 0.8em;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
}
.btn-remove-subtopic:hover[b-391iuau2gn] {
background: #d32f2f;
}
.btn-remove-trigger[b-391iuau2gn] {
background-color: #f44336;
color: white;
border: none;
padding: 8px 16px;
border-radius: 8px;
font-size: 0.85em;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-remove-trigger:hover[b-391iuau2gn] {
background-color: #d32f2f;
}
@media (max-width: 480px) {
.modal-content lovedone-edit-modal-content[b-391iuau2gn] {
width: 100%;
height: 100vh;
border-radius: 0;
max-height: none;
}
}
/* Override: make Premium modal footer match LovedOneEditModal footer height and button shapes */
.premium-avatar-modal .premium-form-actions[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions.sticky[b-391iuau2gn] {
/* match LovedOneEditModal footer spacing */
padding: 1.2rem 0 0.5rem 0;
border-top: 1px solid var(--soft-border);
gap: 0.75rem;
justify-content: flex-end; /* keep actions aligned to the right like lovedone modal */
align-items: center;
}
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined.btn[b-391iuau2gn] {
/* match lovedone cancel button shape & sizing */
padding: 0.7rem 1.4rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
background-color: #E9E4E0;
border: 1px solid #dcd6d4;
color: var(--text);
}
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium.btn[b-391iuau2gn] {
/* match lovedone save button sizing & rounded rectangle */
padding: 0.7rem 1.4rem;
border-radius: 10px;
font-weight: 700;
font-size: 0.95rem;
/* keep existing primary gradient but ensure text contrast like lovedone save */
color: var(--white);
}
/* Ensure mobile stacked footer keeps the same visual padding when column layout is used */
@media (max-width: 480px) {
.premium-avatar-modal .premium-form-actions[b-391iuau2gn] {
padding: 0.9rem 0.5rem;
}
}
/* Make Premium modal buttons match BasicDetailsStep pill buttons */
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
border-radius: 25px; /* pill shape like BasicDetailsStep */
font-size: 1.11rem;
font-weight: 600;
padding: 0.8em 2.5em;
letter-spacing: -0.5px;
}
/* tertiary/cancel visual: match BasicDetailsStep tertiary */
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn] {
background: none;
color: #a37a4c;
border: 1.2px solid #efd7bb;
}
/* primary/save visual: match BasicDetailsStep primary */
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
background-color: #fbbbad;
color: #38250d;
box-shadow: 0 2px 8px rgba(247,186,173,0.10);
}
/* Mobile: stacked buttons style like BasicDetailsStep (large pill full-width) */
@media (max-width: 600px) {
.premium-avatar-modal .premium-form-actions[b-391iuau2gn] {
flex-direction: column;
gap: 12px;
align-items: stretch;
}
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn],
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
width: 100%;
padding: 1rem 1.2rem;
font-size: 1.06rem;
}
}
/* Mobile responsiveness for topics */
@media (max-width: 768px) {
.topics-grid[b-391iuau2gn] {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 8px;
}
.topic-tag[b-391iuau2gn] {
padding: 10px 6px;
min-height: 60px;
}
.topic-name[b-391iuau2gn] {
font-size: 0.85em;
}
.topic-editor-section[b-391iuau2gn] {
padding: 15px;
margin-top: 15px;
}
.topic-input-section[b-391iuau2gn] {
flex-direction: column;
gap: 8px;
}
.subtopics-list[b-391iuau2gn] {
gap: 6px;
}
.subtopic-item[b-391iuau2gn] {
font-size: 0.8em;
padding: 5px 6px 5px 10px;
}
.lovedone-modal-footer[b-391iuau2gn] {
padding: 18px;
flex-direction: column;
gap: 10px;
}
.btn-modal-cancel-refined[b-391iuau2gn],
.btn-modal-save-refined[b-391iuau2gn] {
width: 100%;
padding: 14px 20px;
}
}
/* ========================================= */
/* Personality Tags Styling */
/* ========================================= */
.tags-selection-area[b-391iuau2gn] {
margin-top: 1rem;
width: 100%;
}
.tags-container[b-391iuau2gn] {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
justify-content: center; /* Center the tags */
margin-top: 1rem;
margin-bottom: 1rem
}
.tag-chip[b-391iuau2gn] { /* Same as .tag-option-button in PrivateReflectionModal */
background-color: transparent;
color: var(--text-light);
border: 1px solid #E0D8D1; /* Lighter border */
border-radius: 15px;
padding: 0.45rem 1rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tag-chip:hover[b-391iuau2gn] {
border-color: var(--peach);
background-color: #FFF9F7; /* Very subtle hover */
}
.tag-chip.selected[b-391iuau2gn] { /* Same as .active in PrivateReflectionModal */
background-color: var(--peach);
color: var(--text);
border-color: var(--accent);
font-weight: 500;
}
/* Better spacing for the form group */
.form-group-describe .tags-selection-area[b-391iuau2gn] {
background: rgba(255,255,255,0.75); /* Slightly transparent like example-block */
border-radius: 12px;
padding: 1.2rem 1.5rem;
margin: 1.2rem auto 0 auto;
max-width: 500px;
box-shadow: 0 2px 12px rgba(204,170,150,0.06);
}
/* ========================================= */
/* End Personality Tags Styling */
/* ========================================= */
@media (max-width: 480px) {
.modal-overlay .modal-content[b-391iuau2gn] {
width: 100% !important;
height: 100vh !important;
max-height: none !important;
border-radius: 0 !important;
padding: 1.5rem 1rem !important;
box-shadow: none !important;
overflow-y: auto !important;
display: flex !important;
flex-direction: column !important;
}
.lovedone-modal-body[b-391iuau2gn] {
position: relative;
}
/* Add a more prominent shadow/gradient above the footer on very small screens */
.lovedone-modal-body[b-391iuau2gn]::after {
content: '';
position: sticky;
bottom: -1px;
left: 0;
right: 0;
height: 24px;
background: linear-gradient(to top, rgba(255, 252, 250, 0.95) 0%, rgba(255, 252, 250, 0.4) 60%, transparent 100%);
pointer-events: none;
z-index: 1;
margin: 0 -0.25rem; /* Compensate for body padding */
}
.lovedone-modal-footer[b-391iuau2gn] {
flex-shrink: 0;
padding: 20px;
flex-direction: column;
gap: 12px;
/* Add a subtle shadow above the footer */
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
background-color: #FFFCFA; /* Ensure consistent background */
}
.btn-modal-cancel-refined[b-391iuau2gn],
.btn-modal-save-refined[b-391iuau2gn] {
width: 100%;
padding: 16px 24px;
font-size: 1rem;
}
}
/* ========================================= */
/* Premium Avatar Styles */
/* ========================================= */
/* Tabs inside premium modal (Text / Photo) */
.avatar-mode-tabs[b-391iuau2gn] {
display: inline-flex;
gap: 8px;
background: #fff6f0; /* slightly lighter pill */
border: 1px solid #f3e1d0;
border-radius: 999px; /* full pill */
padding: 6px;
margin: 0.5rem 0 1rem 0;
box-shadow: inset 0 -1px 0 rgba(0,0,0,0.02);
}
.avatar-mode-tab[b-391iuau2gn] {
appearance: none;
background: transparent;
color: #6d5946;
border: none; /* rely on pill container */
border-radius: 999px; /* round */
padding: 8px 18px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease-in-out;
display: inline-flex;
align-items: center;
gap: 8px;
}
.avatar-mode-tab:hover[b-391iuau2gn] {
background: #fff6f0;
border-color: #f3c7a4;
}
.avatar-mode-tab.active[b-391iuau2gn] {
background: linear-gradient(135deg, #fbbbad 0%, #f9ac9c 100%);
color: #38250d;
border-color: #f9ac9c;
box-shadow: 0 2px 8px rgba(251, 187, 173, 0.25);
}
/* Style presets (chips) layout: 4 across, small thumbnails and labels underneath */
.premium-style-presets[b-391iuau2gn] {
text-align: center;
margin-bottom: 0.6rem;
}
.style-chips-row[b-391iuau2gn] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
justify-items: center;
align-items: start;
margin-top: 8px;
}
.style-chip[b-391iuau2gn] {
background: #fff9f4;
border: 1px solid #f0e1d0;
border-radius: 12px;
padding: 6px 6px 8px 6px;
width: 64px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
}
.style-chip .chip-icon[b-391iuau2gn] {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(180deg, #fff6f0 0%, #fdeee0 100%);
border: 2px solid #efd7bb;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
color: #6d5946;
}
.style-chip .chip-label[b-391iuau2gn] {
font-size: 0.72rem;
color: #6d5946;
line-height: 1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.style-chip.selected[b-391iuau2gn] {
background: linear-gradient(180deg,#fdefe8 0%, #fff6f2 100%);
border-color: #f9c8b0;
box-shadow: 0 2px 8px rgba(249,172,156,0.12);
}
/* Photo upload preview inside premium modal */
.uploaded-photo-preview[b-391iuau2gn] {
margin-top: 0.5rem;
padding: 8px;
background: #fff6f0;
border: 1px dashed #f0e1d0;
border-radius: 12px;
display: inline-block;
}
.uploaded-photo-preview img[b-391iuau2gn] {
display: block;
width: 120px;
height: 120px;
object-fit: cover;
border-radius: 12px;
border: 2px solid #fbbbad;
box-shadow: 0 2px 10px rgba(251, 187, 173, 0.25);
}
/* Inline options row spacing */
.premium-form-group.options-inline[b-391iuau2gn] {
display: flex;
align-items: center;
gap: 12px;
}
.premium-form-group.options-inline label[b-391iuau2gn] {
margin: 0;
}
.premium-form-group select.form-select-styled[b-391iuau2gn] {
padding: 10px 42px 10px 12px;
border: 1.3px solid #f0e1d0;
background-color: #fff9f4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b5243' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
border-radius: 10px;
font-size: 0.95rem;
color: #473b26;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
}
/* Premium Avatar Tile in the avatar picker list */
.premium-avatar-tile[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 2px dashed #fbbbad;
background: #fff3ec;
border-radius: 16px;
color: #bc8b62;
font-weight: 600;
width: 68px;
height: 68px;
cursor: pointer;
font-size: 0.85em;
gap: 2px;
transition: border 0.16s, background 0.16s;
text-align: center;
padding: 4px;
width:100%
}
.premium-avatar-tile:hover[b-391iuau2gn] {
border-color: #ff9d7a;
background: #fff0e7;
}
/* Make the premium tile span 3 columns on desktop and be full-width on mobile */
@media (min-width: 900px) {
.avatar-picker-list .premium-avatar-tile[b-391iuau2gn] {
/* Desktop: make the premium tile stack and occupy the full row */
grid-column: 1 / -1;
justify-self: stretch;
width: 100%;
height: auto; /* let content determine height for better stacking */
padding: 14px;
font-size: 1.05rem;
}
}
@media (max-width: 899px) {
.avatar-picker-list .premium-avatar-tile[b-391iuau2gn] {
grid-column: auto;
width: 100%;
height: auto;
padding: 10px 12px;
}
}
.premium-icon[b-391iuau2gn] {
font-size: 1.2em;
color: #ffad60;
margin-bottom: 2px;
}
.premium-text[b-391iuau2gn] {
font-size: 0.75em;
font-weight: 600;
line-height: 1.1;
}
.premium-subtitle[b-391iuau2gn] {
font-size: 0.65em;
font-weight: 400;
opacity: 0.8;
line-height: 1;
}
/* Premium Avatar Modal */
.premium-avatar-modal[b-391iuau2gn] {
background: #fff9f4;
padding: 2.2em 2.5em;
border-radius: 24px;
box-shadow: 0 8px 32px #b2805040;
min-width: 340px;
max-width: 97vw;
position: relative;
text-align: center;
}
/* Desktop & tablet: constrain modal content and allow scrolling for tall content */
@media (min-width: 601px) {
.premium-avatar-modal[b-391iuau2gn] {
max-height: 88vh; /* keep some viewport breathing room */
display: flex;
flex-direction: column;
padding: 1.6rem 2rem;
overflow: hidden; /* inner area will scroll */
}
.premium-avatar-body[b-391iuau2gn] {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
padding-right: 8px; /* allow for scrollbar without touching layout */
}
/* Keep actions visible by making them sticky within the modal */
.premium-form-actions[b-391iuau2gn] {
position: sticky;
bottom: 0;
background: linear-gradient(180deg, rgba(255,249,246,0.0), #fff9f4 40%);
padding: 1rem 0.5rem;
z-index: 20;
}
}
/* Mobile-friendly: make premium modal full-screen on small devices and inner content scrollable */
@media (max-width: 600px) {
.premium-avatar-modal[b-391iuau2gn] {
width: 100% !important;
height: 100vh; /* occupy full viewport height */
max-width: 100vw !important;
border-radius: 0 !important;
padding: 1rem 1rem 0.5rem 1rem !important;
box-shadow: none !important;
display: flex;
flex-direction: column;
align-items: stretch;
}
/* Make header and tabs flow naturally and allow body to scroll */
.premium-avatar-header[b-391iuau2gn] {
padding: 0 0.25rem;
margin-bottom: 0.5rem;
}
.avatar-mode-tabs[b-391iuau2gn] {
justify-content: center;
margin-bottom: 0.5rem;
overflow: auto;
}
.premium-avatar-body[b-391iuau2gn] {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
flex: 1 1 auto;
padding: 0.25rem 0.25rem 0.5rem 0.25rem;
}
/* Make preview card and form pane stack and be responsive */
.premium-form-pane[b-391iuau2gn],
.premium-preview-card[b-391iuau2gn] {
width: 100%;
box-sizing: border-box;
}
/* Sticky actions footer at the bottom */
.premium-form-actions[b-391iuau2gn] {
position: sticky;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 1rem;
/* background: linear-gradient(180deg, rgba(255,249,246,0.0), #fff9f4 30%);*/
box-shadow: 0 -6px 18px rgba(120,80,55,0.06);
z-index: 30;
display: flex;
justify-content: space-between;
gap: 0.5rem;
align-items: center;
}
.premium-form-actions .actions-right[b-391iuau2gn] {
display: flex;
gap: 0.5rem;
}
.premium-form-actions .actions-left[b-391iuau2gn] {
display: none; /* hide cancel on left to prioritize primary actions */
}
.btn-modal-premium[b-391iuau2gn] {
flex: 1 1 auto;
}
.btn-modal-cancel-refined[b-391iuau2gn] {
flex: 1 1 auto;
}
}
.premium-modal-subtitle[b-391iuau2gn] {
color: #967f6b;
font-size: 1rem;
margin-bottom: 1.5rem;
}
.premium-form-group[b-391iuau2gn] {
margin-bottom: 1.5rem;
text-align: left;
}
.premium-form-group label[b-391iuau2gn] {
display: block;
font-weight: 600;
margin-bottom: 0.5em;
color: #594a3a;
}
.premium-form-group textarea[b-391iuau2gn] {
width: 100%;
border: 1.3px solid #f0e1d0;
background: #fff9f4;
border-radius: 15px;
padding: 0.92em 1.1em;
font-size: 1.06rem;
color: #473b26;
transition: border 0.18s;
box-sizing: border-box;
outline: none;
resize: none;
font-family: inherit;
}
.premium-form-group textarea:focus[b-391iuau2gn] {
border-color: #fbbbad;
background: #fff6f0;
}
.premium-form-group .input-hint[b-391iuau2gn] {
display: block;
color: #967f6b;
font-size: 0.9rem;
margin-top: 0.5em;
}
.premium-form-actions[b-391iuau2gn] {
display: flex;
gap: 1em;
justify-content: center;
}
.btn-modal-premium[b-391iuau2gn] {
background: linear-gradient(135deg, #fbbbad 0%, #f9ac9c 100%);
color: #38250d;
border: none;
border-radius: 25px;
font-weight: 600;
padding: 0.8em 2em;
cursor: pointer;
font-size: 1rem;
box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5em;
}
.btn-modal-premium:hover[b-391iuau2gn] {
transform: translateY(-1px);
box-shadow: 0 5px 18px rgba(251, 187, 173, 0.4);
}
.btn-modal-premium:disabled[b-391iuau2gn] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
}
.premium-icon-small[b-391iuau2gn] {
font-size: 1em;
color: #ffad60;
}
/* Progressbar-style two-step stepper (Generate Avatar -> Done) */
.premium-two-step-stepper[b-391iuau2gn] {
margin: 0.75rem 0 1rem 0;
width: 100%;
max-width: 720px;
}
.premium-two-step-stepper .stepper-inner[b-391iuau2gn] {
position: relative;
height: 60px;
border-radius: 12px;
background: transparent;
display: flex;
align-items: center;
padding: 10px 14px;
}
.premium-two-step-stepper .stepper-track[b-391iuau2gn] {
position: absolute;
left: 14px;
right: 14px;
height: 12px;
border-radius: 10px;
background: linear-gradient(90deg, rgba(0,0,0,0.03), rgba(0,0,0,0.02));
top: 50%;
transform: translateY(-50%);
}
.premium-two-step-stepper .stepper-progress[b-391iuau2gn] {
position: absolute;
left: 14px;
height: 12px;
border-radius: 10px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(90deg, #fbbbad 0%, #f9ac9c 100%);
transition: width 360ms ease;
box-shadow: 0 4px 12px rgba(249, 172, 156, 0.12);
}
.premium-two-step-stepper .stepper-labels[b-391iuau2gn] {
position: relative;
display: flex;
justify-content: space-between;
width: 100%;
z-index: 2; /* above track */
}
.premium-two-step-stepper .step-label[b-391iuau2gn] {
font-weight: 700;
color: #7a5a43;
font-size: 0.98rem;
padding: 6px 10px;
border-radius: 10px;
}
/* State-specific subtle visual cues */
.premium-two-step-stepper .stepper-inner.idle .stepper-progress[b-391iuau2gn] {
background: linear-gradient(90deg, rgba(0,0,0,0.06) 0%, rgba(0,0,0,0.04) 100%);
}
.premium-two-step-stepper .stepper-inner.in-progress .stepper-progress[b-391iuau2gn] {
background: linear-gradient(90deg, #ffd6c2 0%, #ffb79a 100%);
}
.premium-two-step-stepper .stepper-inner.done .stepper-progress[b-391iuau2gn] {
background: linear-gradient(90deg, #b9f1c7 0%, #6fe39a 100%);
}
.premium-two-step-stepper .stepper-inner.in-progress .step-left[b-391iuau2gn] {
color: #38250d;
}
.premium-two-step-stepper .stepper-inner.done .step-right[b-391iuau2gn] {
color: #165d3a;
}
/* Small screens: compress height */
@media (max-width: 600px) {
.premium-two-step-stepper .stepper-inner[b-391iuau2gn] { height: 54px; padding: 8px 10px; }
.premium-two-step-stepper .stepper-labels .step-label[b-391iuau2gn] { font-size: 0.92rem; }
}
.spinner-inline[b-391iuau2gn] {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #38250d;
border-radius: 50%;
border-top-color: transparent;
animation: spin-b-391iuau2gn 1s ease-in-out infinite;
}
/* New upload-specific styles */
.preview-cancel-btn[b-391iuau2gn] {
position: absolute;
top: 8px;
right: 8px;
background: rgba(220, 38, 38, 0.95);
color: white;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: bold;
line-height: 1;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.3);
transition: all 0.2s ease;
z-index: 10;
}
.preview-cancel-btn:hover[b-391iuau2gn] {
background: rgba(185, 28, 28, 0.95);
transform: scale(1.1);
box-shadow: 0 3px 12px rgba(220, 38, 38, 0.4);
}
.preview-cancel-btn:active[b-391iuau2gn] {
transform: scale(0.95);
}
.upload-overlay[b-391iuau2gn] {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(2px);
}
.upload-spinner[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
color: #594a3a;
}
.upload-spinner p[b-391iuau2gn] {
margin: 0;
font-weight: 600;
font-size: 0.95rem;
}
.spinner-large[b-391iuau2gn] {
width: 40px;
height: 40px;
border: 4px solid #f0e1d0;
border-radius: 50%;
border-top-color: #fbbbad;
animation: spin-b-391iuau2gn 1s linear infinite;
}
.upload-success-overlay[b-391iuau2gn] {
position: absolute;
top: 8px;
right: 8px;
background: rgba(76, 175, 80, 0.95);
color: white;
border-radius: 8px;
padding: 6px 10px;
display: flex;
align-items: center;
gap: 6px;
font-size: 0.85rem;
font-weight: 600;
box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}
.success-icon[b-391iuau2gn] {
font-size: 1.1em;
font-weight: bold;
}
.upload-security-caption[b-391iuau2gn] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #6b7280;
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
border-radius: 8px;
padding: 0.75rem 1rem;
margin-top: 0.5rem;
}
.security-icon[b-391iuau2gn] {
color: #10b981;
font-size: 1rem;
}
.preview-actions[b-391iuau2gn] {
display: flex;
gap: 0.8em;
justify-content: center;
margin-top: 0;
}
.premium-preview-empty[b-391iuau2gn] {
width: 220px;
height: 220px;
border: 3px dashed #f3cbb9;
border-radius: 18px;
display: flex;
align-items: center;
justify-content: center;
color: #7a6651;
font-style: normal;
background: #fffaf6;
flex-direction: column;
gap: 10px;
}
.premium-preview-empty.clickable[b-391iuau2gn] {
cursor: pointer;
transition: all 0.2s ease;
flex-direction: column;
gap: 8px;
}
.premium-preview-empty.clickable:hover[b-391iuau2gn] {
background: #fff6f0;
border-color: #e8d2b8;
color: #7a6651;
}
.premium-preview-empty .upload-icon[b-391iuau2gn] {
font-size: 2.4rem;
margin-bottom: 0;
}
/* Slim, neutral stylization slider appearance */
.stylization-slider[b-391iuau2gn] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
height: 8px;
background: linear-gradient(90deg, #efe6dc 0%, #f9f1e9 100%);
border-radius: 20px;
outline: none;
}
.stylization-slider[b-391iuau2gn]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid #fbbbad;
box-shadow: 0 2px 6px rgba(251,187,173,0.18);
margin-top: -4px; /* center thumb */
}
.stylization-slider[b-391iuau2gn]::-moz-range-thumb {
width: 16px;
height: 16px;
border-radius: 50%;
background: #fff;
border: 3px solid #fbbbad;
box-shadow: 0 2px 6px rgba(251,187,173,0.18);
}
@keyframes spin-b-391iuau2gn {
to { transform: rotate(360deg); }
}
/* Generated Avatar Preview */
.generated-avatar-preview[b-391iuau2gn] {
margin-top: 1.5rem;
padding: 1.5rem;
background: #fff6f0;
border-radius: 16px;
border: 1px solid #f0e1d0;
}
.generated-avatar-preview h4[b-391iuau2gn] {
color: #594a3a;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.generated-avatar-img[b-391iuau2gn] {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #fbbbad;
margin: 0 auto 1rem;
display: block;
box-shadow: 0 3px 12px rgba(251, 187, 173, 0.2);
}
.generated-avatar-actions[b-391iuau2gn] {
display: flex;
gap: 0.8em;
justify-content: center;
}
.btn-modal-secondary[b-391iuau2gn] {
background: #fbbbad;
color: #38250d;
border: none;
border-radius: 20px;
font-weight: 600;
padding: 0.7em 1.5em;
cursor: pointer;
font-size: 0.95rem;
box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
transition: all 0.2s ease;
}
.btn-modal-secondary:hover[b-391iuau2gn] {
background: #f9ac9c;
transform: translateY(-1px);
box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
}
.btn-modal-tertiary[b-391iuau2gn] {
background: none;
color: #a37a4c;
border: 1.2px solid #efd7bb;
border-radius: 20px;
font-weight: 600;
padding: 0.7em 1.5em;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.btn-modal-tertiary:hover[b-391iuau2gn] {
background-color: rgba(239, 215, 187, 0.15);
border-color: #e8c8a0;
}
/* Error message styling */
.error-message[b-391iuau2gn] {
margin-top: 1rem;
padding: 1rem;
background: #fef2f2;
color: #dc2626;
border-radius: 12px;
border: 1px solid #fecaca;
font-size: 0.95rem;
}
@media (max-width: 480px) {
.modal-overlay[b-391iuau2gn] {
align-items: flex-start;
}
.modal-content[b-391iuau2gn] {
margin-top: 0;
}
.premium-avatar-modal[b-391iuau2gn] {
padding: 1.5em 1.8em;
min-width: 280px;
}
.premium-form-actions[b-391iuau2gn] {
flex-direction: column;
align-items: stretch;
}
.generated-avatar-actions[b-391iuau2gn],
.preview-actions[b-391iuau2gn] {
flex-direction: column;
align-items: stretch;
}
.premium-preview-img[b-391iuau2gn] {
width: 150px;
height: 150px;
}
.premium-preview-empty[b-391iuau2gn] {
width: 150px;
height: 150px;
}
}
.premium-form-group .input-hint[b-391iuau2gn] {
display: block;
color: #967f6b;
font-size: 0.9rem;
margin-top: 0.5em;
}
.premium-form-actions[b-391iuau2gn] {
display: flex;
gap: 1em;
justify-content: center;
}
.btn-modal-premium[b-391iuau2gn] {
background: linear-gradient(135deg, #fbbbad 0%, #f9ac9c 100%);
color: #38250d;
border: none;
border-radius: 25px;
font-weight: 600;
padding: 0.8em 2em;
cursor: pointer;
font-size: 1rem;
box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5em;
}
.btn-modal-premium:hover[b-391iuau2gn] {
transform: translateY(-1px);
box-shadow: 0 5px 18px rgba(251, 187, 173, 0.4);
}
.btn-modal-premium:disabled[b-391iuau2gn] {
opacity: 0.6;
cursor: not-allowed;
transform: none;
box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
}
.premium-icon-small[b-391iuau2gn] {
font-size: 1em;
color: #ffad60;
}
/* Close button positioning for premium modal — match parent modal placement */
.modal-close-icon-button.premium-close[b-391iuau2gn] {
position: absolute;
top: 14px;
right: 14px;
background: transparent;
border: none;
font-size: 1.25rem;
line-height: 1;
color: var(--text-light);
cursor: pointer;
padding: 4px;
z-index: 5;
}
.modal-close-icon-button.premium-close:hover[b-391iuau2gn] {
color: var(--text);
}
.spinner-inline[b-391iuau2gn] {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #38250d;
border-radius: 50%;
border-top-color: transparent;
animation: spin-b-391iuau2gn 1s ease-in-out infinite;
}
@keyframes spin-b-391iuau2gn {
to { transform: rotate(360deg); }
}
/* Generated Avatar Preview */
.generated-avatar-preview[b-391iuau2gn] {
margin-top: 1.5rem;
padding: 1.5rem;
background: #fff6f0;
border-radius: 16px;
border: 1px solid #f0e1d0;
}
.generated-avatar-preview h4[b-391iuau2gn] {
color: #594a3a;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.generated-avatar-img[b-391iuau2gn] {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #fbbbad;
margin: 0 auto 1rem;
display: block;
box-shadow: 0 3px 12px rgba(251, 187, 173, 0.2);
}
.generated-avatar-actions[b-391iuau2gn] {
display: flex;
gap: 0.8em;
justify-content: center;
}
.btn-modal-secondary[b-391iuau2gn] {
background: #fbbbad;
color: #38250d;
border: none;
border-radius: 20px;
font-weight: 600;
padding: 0.7em 1.5em;
cursor: pointer;
font-size: 0.95rem;
box-shadow: 0 2px 8px rgba(251, 187, 173, 0.2);
transition: all 0.2s ease;
}
.btn-modal-secondary:hover[b-391iuau2gn] {
background: #f9ac9c;
transform: translateY(-1px);
box-shadow: 0 3px 12px rgba(251, 187, 173, 0.3);
}
.btn-modal-tertiary[b-391iuau2gn] {
background: none;
color: #a37a4c;
border: 1.2px solid #efd7bb;
border-radius: 20px;
font-weight: 600;
padding: 0.7em 1.5em;
cursor: pointer;
font-size: 0.95rem;
transition: all 0.2s ease;
}
.btn-modal-tertiary:hover[b-391iuau2gn] {
background-color: rgba(239, 215, 187, 0.15);
border-color: #e8c8a0;
}
/* Error message styling */
.error-message[b-391iuau2gn] {
margin-top: 1rem;
padding: 1rem;
background: #fef2f2;
color: #dc2626;
border-radius: 12px;
border: 1px solid #fecaca;
font-size: 0.95rem;
}
/* ============================
Premium AI Avatar Modal - Exclusive styling
============================ */
.premium-avatar-modal[b-391iuau2gn] {
background: #FFFCFA;
border-radius: 20px;
padding: 22px 24px;
border: 1px solid #f0e1d0;
box-shadow: 0 10px 28px rgba(168, 120, 78, 0.18);
max-width: 600px;
width: 92vw;
position: relative; /* ensure absolute children like close button are placed correctly */
}
.premium-avatar-modal.large[b-391iuau2gn] {
/* mobile-card style: compact, tall, frosted feel */
max-width: 480px;
width: 92vw;
border-radius: 22px;
padding: 18px 18px;
box-shadow: 0 18px 50px rgba(148, 96, 48, 0.12), 0 3px 0 rgba(255, 236, 225, 0.35) inset;
position: relative;
background: linear-gradient(180deg,#fffaf6,#fff6f2);
}
/* Two-state stepper (Skapa -> Välj) specific styles */
.premium-two-step-stepper[b-391iuau2gn] {
display: flex;
justify-content: center;
margin: 8px 0 14px;
}
.premium-two-step-stepper .stepper-inner[b-391iuau2gn] {
display: flex;
gap: 10px;
background: #fff8f4;
border: 1px solid rgba(240,222,210,0.6);
padding: 6px;
border-radius: 12px;
align-items: center;
}
.premium-two-step-stepper .stepper-item[b-391iuau2gn] {
padding: 8px 14px;
border-radius: 10px;
color: #8b6a52;
font-weight: 700;
font-size: 0.95rem;
min-width: 80px;
text-align: center;
}
.premium-two-step-stepper .stepper-item.active[b-391iuau2gn] {
background: linear-gradient(180deg,#ffd7c2,#fbb0a0);
color: #482b20;
box-shadow: 0 10px 26px rgba(251,187,173,0.18);
}
.premium-two-step-stepper .stepper-item .step-sub[b-391iuau2gn] {
display: block;
font-size: 0.8rem;
color: #6b5243;
font-weight: 600;
margin-top: 4px;
}
.premium-two-step-stepper .stepper-item .step-sub.error[b-391iuau2gn] {
color: #b91c1c;
}
@media (max-width: 520px) {
.premium-two-step-stepper .stepper-inner[b-391iuau2gn] { gap: 8px; padding: 6px; }
.premium-two-step-stepper .stepper-item[b-391iuau2gn] { padding: 8px 10px; min-width: 64px; font-size: 0.88rem; }
}
.premium-avatar-header[b-391iuau2gn] {
text-align: left;
margin-bottom: 0.75rem;
}
.premium-avatar-header .premium-title[b-391iuau2gn] {
font-family: var(--font-serif);
font-size: 1.6rem;
line-height: 1.25;
font-weight: 700;
color: var(--text);
margin: 0 0 0.25rem 0;
}
.premium-avatar-header .premium-modal-subtitle[b-391iuau2gn] {
color: #967f6b;
margin: 0 0 0.75rem 0;
}
.avatar-mode-tabs[b-391iuau2gn] {
display: flex;
gap: 10px;
margin: 10px 0 16px 0;
}
.avatar-mode-tab[b-391iuau2gn] {
flex: 1;
background: transparent;
border: 1px solid transparent;
color: #6e5a4a;
padding: 8px 12px;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all .12s ease;
}
.avatar-mode-tab:hover[b-391iuau2gn] {
border-color: #e8c8a0;
transform: translateY(-1px);
}
.avatar-mode-tab.active[b-391iuau2gn] {
background: linear-gradient(180deg,#ffdcc6,#fbbbad);
color: #38250d;
box-shadow: 0 6px 18px rgba(251,187,173,0.24);
}
/* pill stepper */
.premium-stepper[b-391iuau2gn] {
display: flex;
gap: 6px;
justify-content: center;
margin: 6px 0 12px;
padding: 4px;
background: #fff8f4;
border: 1px solid rgba(240,222,210,0.55);
border-radius: 12px;
max-width: 420px;
}
.premium-stepper .stepper-item[b-391iuau2gn] {
padding: 8px 14px;
border-radius: 10px;
background: transparent;
color: #8b6a52;
font-weight: 700;
font-size: 0.92rem;
border: none;
}
.premium-stepper .stepper-item.active[b-391iuau2gn] { background: linear-gradient(180deg,#ffd7c2,#fbb0a0); color: #482b20; box-shadow: 0 10px 26px rgba(251,187,173,0.18); }
.premium-stepper .stepper-item.done[b-391iuau2gn] { opacity: 0.95; }
/* Style chips */
.premium-style-presets[b-391iuau2gn] { display:flex; flex-direction:column; align-items:center; gap:12px; margin: 10px 0 18px; }
.premium-style-presets .style-presets-label[b-391iuau2gn] { font-weight:700; color:var(--text); font-family: var(--font-serif); }
.style-chips-row[b-391iuau2gn] {
display: grid;
gap: 8px;
justify-content: center;
/*grid-template-columns: repeat(2, minmax(0, 1fr));*/
max-width: 480px;
}
.style-chip[b-391iuau2gn] { background:#fff8f6; border:1px solid #f4e4d8; padding:12px 10px; border-radius:14px; font-weight:700; cursor:pointer; color:#5c3f31; display:flex; flex-direction:column; align-items:center; gap:8px; width:100px; height:100px; box-shadow: 0 6px 18px rgba(200,120,60,0.03); transition: box-shadow 140ms ease, transform 140ms ease, background 140ms ease; }
.style-chip.selected[b-391iuau2gn] { background: linear-gradient(180deg,#ffd7c2,#fdb6a4); color:#3d261c; box-shadow: 0 12px 30px rgba(251,187,173,0.12); transform: translateY(-4px); }
.style-chip .chip-icon[b-391iuau2gn] { width:56px; height:56px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #fffefc, #fff6f2); display:flex; align-items:center; justify-content:center; font-weight:700; color:#8b5f4a; border:1px solid rgba(245,220,205,0.95); box-shadow: inset 0 4px 12px rgba(255,255,255,0.6); }
.style-chip .chip-label[b-391iuau2gn] { font-size:0.95rem; margin-top:6px; color:#4a2e24; }
/* smaller adjustments used in tighter grid contexts */
@media (max-width: 520px) {
.modal-content.lovedone-edit-modal-content[b-391iuau2gn] { padding: 18px 16px; max-width: 420px; }
.premium-style-presets[b-391iuau2gn] { margin-top: 8px; }
.style-chips-row[b-391iuau2gn] { gap:10px; }
.style-chip[b-391iuau2gn] { min-width:84px; padding:10px; }
.style-chip .chip-icon[b-391iuau2gn] { width:48px; height:48px; }
}
.chip-icon[b-391iuau2gn] { width:56px; height:56px; border-radius:50%; background: linear-gradient(180deg,#fff6f0,#ffe9dd); display:flex; align-items:center; justify-content:center; font-weight:800; color:#8b6a52; border:1px solid #f0d9c5; box-shadow: 0 6px 18px rgba(200,120,60,0.06); }
.chip-label[b-391iuau2gn] { font-size:0.86rem; color:#6e5844; font-weight:700; text-align:center; margin-top:4px; }
/* Force stacking/centering of label + chips inside the mobile card (.large) so the chips appear under the tabs */
.premium-avatar-modal.large .options-inline[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.premium-avatar-modal.large .options-inline label[b-391iuau2gn] { text-align: center; }
/* Ensure the grid-style options-inline used elsewhere becomes a single centered column inside the large mobile modal
so the chips are positioned under the tabs exactly like the design mock. This targets the .large modal only. */
.premium-avatar-modal.large .premium-form-group.options-inline[b-391iuau2gn] {
display: grid;
grid-template-columns: 1fr;
align-items: center;
justify-items: center;
gap: 12px;
}
/* circular preview */
.premium-preview-img[b-391iuau2gn] { width: 180px; height: 180px; border-radius: 999px; object-fit:cover; border:6px solid rgba(251,187,173,0.85); box-shadow: 0 18px 40px rgba(205,125,60,0.12); }
/* generated thumbnails */
.generated-thumbnails-row[b-391iuau2gn] { display:flex; gap:10px; justify-content:center; margin-top:12px; }
.generated-thumb[b-391iuau2gn] { width:64px; height:64px; border-radius:10px; overflow:hidden; border:1px solid #efdbc6; box-shadow:0 8px 20px rgba(150,100,60,0.06); cursor:pointer; }
.generated-thumb img[b-391iuau2gn] { width:100%; height:100%; object-fit:cover; }
.generated-actions[b-391iuau2gn] { display:flex; gap:8px; justify-content:center; margin-top:10px; }
.generated-action-btn[b-391iuau2gn] { padding:8px 12px; border-radius:12px; border:1px solid #efd7bb; background:#fff6f0; font-weight:700; color:#6e4f3a; }
.generated-action-btn.primary[b-391iuau2gn] { background: linear-gradient(180deg,#ffdcc8,#fbbbad); color:#38250d; }
/* Stacked single-column mobile-card layout to match design mock */
.premium-avatar-body[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
}
.premium-form-pane[b-391iuau2gn] {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
align-items: center;
}
/* Preview card (centered circular focal point with dashed inner box for photo upload) */
.premium-preview-card[b-391iuau2gn] {
background: transparent;
border: none;
border-radius: 18px;
min-height: 240px;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 0 0 0;
width: 100%;
}
.preview-content-wrapper[b-391iuau2gn] { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.preview-image-container[b-391iuau2gn] { position:relative; display:flex; align-items:center; justify-content:center; width:100%; }
/* outer preview area */
.premium-preview-empty[b-391iuau2gn] {
width: 220px;
height: 220px;
display:flex;
align-items:center;
justify-content:center;
border-radius:20px;
background: #fff7f4;
box-shadow: 0 8px 26px rgba(170,110,70,0.06);
}
/* inner dashed upload box */
.premium-preview-inner[b-391iuau2gn] {
width: 220px;
height: 220px;
border-radius: 14px;
border: 3px dashed rgba(242,195,173,0.95);
display:flex;
align-items:center;
justify-content:center;
color:#b57f5b;
font-weight:700;
background: transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.45);
padding: 12px;
}
/* circular preview when image present */
.premium-preview-img[b-391iuau2gn] { width: 180px; height:180px; border-radius:999px; object-fit:cover; border:6px solid rgba(251,187,173,0.9); box-shadow: 0 22px 44px rgba(200,120,60,0.10); }
/* Sticky actions */
.premium-form-actions.sticky[b-391iuau2gn] {
position: sticky;
bottom: -8px; /* inside modal */
/*background: linear-gradient(180deg, rgba(255,252,250,0.0), #FFFCFA 60%);*/
padding-top: 10px;
margin-top: 6px;
display: flex;
gap: 12px;
justify-content: space-between;
align-items: center;
border-top: 1px solid #f0e1d0;
}
/* cancel (left) smaller rounded rectangle */
.premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn] {
padding: 12px 18px;
border-radius: 12px;
border: 1px solid rgba(236,220,208,0.9);
background: #fffaf8;
color: #4a2e24;
font-weight:700;
}
/* primary (right) large pill */
.premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
padding: 14px 26px;
border-radius: 28px;
font-weight:800;
background: linear-gradient(180deg,#ffd7c2,#fdb6a4);
color:#3d261c;
box-shadow: 0 18px 40px rgba(245,150,100,0.12);
}
/* Inputs spacing within premium modal */
.premium-avatar-modal .premium-form-group label[b-391iuau2gn] {
font-weight: 700;
color: var(--text);
}
.premium-avatar-modal .premium-form-group textarea[b-391iuau2gn],
.premium-avatar-modal .premium-form-group select[b-391iuau2gn],
.premium-avatar-modal .premium-form-group input[type="range"][b-391iuau2gn] {
margin-top: 6px;
}
.premium-avatar-modal .options-inline[b-391iuau2gn] {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: 10px;
}
/* Responsive */
@media (min-width: 900px) {
.premium-avatar-body[b-391iuau2gn] {
grid-template-columns: 1fr 300px;
gap: 22px;
}
}
@media (max-width: 600px) {
.premium-avatar-modal.large[b-391iuau2gn] {
padding: 22px 18px;
border-radius: 20px;
max-width: 92vw;
}
.premium-form-actions.sticky[b-391iuau2gn] {
flex-direction: column;
align-items: stretch;
gap: 8px;
}
/* Stack label above style chips on mobile and center them */
.premium-avatar-modal .options-inline[b-391iuau2gn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.premium-avatar-modal .options-inline label[b-391iuau2gn] {
width: 100%;
text-align: center;
}
.premium-preview-inner[b-391iuau2gn] { width: 260px; height: 260px; }
/* make chips flow in two columns on narrow mobile to match mock spacing */
.style-chips-row[b-391iuau2gn] { justify-content: center; gap: 12px; display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 320px; }
.style-chip[b-391iuau2gn] { min-width: 0; width: 140px; box-sizing: border-box; }
.chip-icon[b-391iuau2gn] { width:60px; height:60px; }
}
/* Mobile: center the primary button as a pill and avoid full-width stretching
This override makes the premium modal mobile footer match the provided mock */
@media (max-width: 600px) {
.premium-avatar-modal .premium-form-actions[b-391iuau2gn] {
flex-direction: column;
gap: 12px;
align-items: center; /* center children horizontally */
justify-content: center;
padding: 0.9rem 0.75rem;
}
/* Show the cancel above the centered primary on mobile: make it a centered pill */
.premium-avatar-modal .premium-form-actions .actions-left[b-391iuau2gn] {
display: flex !important;
width: 100%;
justify-content: center;
align-items: center;
order: 0; /* ensure it appears above the primary */
}
.premium-avatar-modal .premium-form-actions .actions-right[b-391iuau2gn] {
width: 100%;
display: flex;
justify-content: center;
}
/* Make the primary a centered pill with max-width so it doesn't span full width */
.premium-avatar-modal .premium-form-actions .actions-right .btn-modal-premium[b-391iuau2gn] {
width: auto !important;
min-width: 260px;
max-width: 92%;
padding: 0.9rem 2.4rem;
border-radius: 25px;
display: inline-flex;
justify-content: center;
}
/* Make cancel match primary width on mobile: same min-width and centered pill */
.premium-avatar-modal .premium-form-actions .actions-left .btn-modal-cancel-refined[b-391iuau2gn] {
width: auto !important;
min-width: 260px; /* match primary min-width used for centered primary */
max-width: 92%;
padding: 0.9rem 2.4rem;
border-radius: 25px;
display: inline-flex;
justify-content: center;
}
}
@media (max-width: 480px) {
.modal-overlay[b-391iuau2gn] {
align-items: flex-start;
}
.modal-content[b-391iuau2gn] {
margin-top: 0;
}
.premium-avatar-modal[b-391iuau2gn] {
padding: 1.5em 1.8em;
min-width: 280px;
}
.premium-form-actions[b-391iuau2gn] {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.generated-avatar-actions[b-391iuau2gn] {
flex-direction: row;
align-items: center;
justify-content: center;
}
.chip-icon[b-391iuau2gn] { width:48px; height:48px; font-size:1rem; }
.premium-preview-inner[b-391iuau2gn] { width:200px; height:200px; }
@media (max-width: 600px) {
/* Footer buttons side-by-side on mobile (like Pet modal) */
.lovedone-modal-footer[b-391iuau2gn] {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 14px 16px;
box-shadow: 0 -6px 16px rgba(0,0,0,0.08);
position: sticky;
bottom: 0;
background: #FFFCFA;
}
.lovedone-modal-footer .btn-modal-cancel-refined[b-391iuau2gn],
.lovedone-modal-footer .btn-modal-save-refined[b-391iuau2gn] {
width: auto;
flex: 1 1 0;
padding: 0.95rem 1.1rem;
border-radius: 14px;
font-size: 1rem;
}
}}
/* ── Seed Family Tree Prompt Card ── */
.shared-family-note[b-391iuau2gn] {
align-items: flex-start;
background: linear-gradient(135deg, #FDF8F0 0%, #FFF4E4 100%);
border: 1px solid #E8DCC8;
border-radius: 14px;
color: #5A534C;
display: flex;
gap: 0.8rem;
margin-bottom: 1rem;
padding: 1rem 1.15rem;
}
.shared-family-note-icon[b-391iuau2gn] {
color: #A67B50;
flex: 0 0 auto;
font-size: 1.25rem;
line-height: 1.35;
}
.shared-family-note h4[b-391iuau2gn] {
color: #3A3228;
font-family: var(--font-serif);
font-size: 1rem;
margin: 0 0 0.25rem;
}
.shared-family-note p[b-391iuau2gn] {
line-height: 1.5;
margin: 0;
}
.legacy-family-record[b-391iuau2gn] {
background: #fffaf5;
border: 1px solid #e8dccf;
border-radius: 14px;
color: #5a4b43;
margin-bottom: 1rem;
padding: 1rem 1.15rem;
}
.legacy-family-record h4[b-391iuau2gn] {
color: #3a3228;
font-family: var(--font-serif);
font-size: 1rem;
margin: 0 0 0.25rem;
}
.legacy-family-record p[b-391iuau2gn] {
line-height: 1.5;
margin: 0 0 0.8rem;
}
.legacy-family-record dl[b-391iuau2gn] {
display: grid;
gap: 0.65rem;
margin: 0;
}
.legacy-family-record dt[b-391iuau2gn] {
font-weight: 700;
}
.legacy-family-record dd[b-391iuau2gn] {
line-height: 1.45;
margin: 0.15rem 0 0;
overflow-wrap: anywhere;
}
.seed-prompt-card[b-391iuau2gn] {
background: linear-gradient(135deg, #FDF8F0 0%, #FFF4E4 100%);
border: 1.5px solid #E8DCC8;
border-radius: 16px;
padding: 1.5rem 1.75rem;
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.seed-prompt-icon[b-391iuau2gn] {
font-size: 2rem;
line-height: 1;
}
.seed-prompt-title[b-391iuau2gn] {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 500;
color: #3A3228;
margin: 0;
}
.seed-prompt-body[b-391iuau2gn] {
font-size: 0.95rem;
color: #5A534C;
line-height: 1.6;
margin: 0;
}
.seed-prompt-select[b-391iuau2gn] {
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.seed-prompt-select label[b-391iuau2gn] {
font-size: 0.85rem;
font-weight: 500;
color: #4A3F35;
}
.form-select-styled[b-391iuau2gn] {
padding: 0.6rem 2.6rem 0.6rem 0.85rem;
border: 1.3px solid #f0e1d0;
border-radius: 12px;
background-color: #fff9f4;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b5243' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px;
font-size: 0.95rem;
color: #473b26;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.form-select-styled:focus[b-391iuau2gn] {
outline: none;
border-color: #fbbbad;
background-color: #fff6f0;
box-shadow: 0 0 0 2px rgba(251, 187, 173, 0.15);
}
.seed-prompt-actions[b-391iuau2gn] {
display: flex;
gap: 0.75rem;
margin-top: 0.25rem;
}
.seed-btn-primary[b-391iuau2gn] {
padding: 0.6rem 1.5rem;
border: none;
border-radius: 24px;
background: linear-gradient(135deg, #C49A6C, #A67B50);
color: #fff;
font-family: var(--font-serif);
font-size: 0.95rem;
cursor: pointer;
transition: opacity 0.2s ease, transform 0.15s ease;
}
.seed-btn-primary:hover:not(:disabled)[b-391iuau2gn] {
opacity: 0.9;
transform: translateY(-1px);
}
.seed-btn-primary:disabled[b-391iuau2gn] {
opacity: 0.5;
cursor: not-allowed;
}
.seed-btn-dismiss[b-391iuau2gn] {
padding: 0.6rem 1.25rem;
border: 1.5px solid #D3C5B0;
border-radius: 24px;
background: transparent;
color: #6B5D4D;
font-family: var(--font-serif);
font-size: 0.95rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.seed-btn-dismiss:hover[b-391iuau2gn] {
background: rgba(176, 141, 110, 0.08);
}
.spinner-inline[b-391iuau2gn] {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #fff;
border-radius: 50%;
animation: spin-inline-b-391iuau2gn 0.6s linear infinite;
margin-right: 6px;
vertical-align: middle;
}
@keyframes spin-inline-b-391iuau2gn {
to { transform: rotate(360deg); }
}
@media (max-width: 540px) {
.seed-prompt-card[b-391iuau2gn] {
padding: 1.15rem 1.25rem;
}
.seed-prompt-actions[b-391iuau2gn] {
flex-direction: column;
}
.seed-btn-primary[b-391iuau2gn],
.seed-btn-dismiss[b-391iuau2gn] {
width: 100%;
text-align: center;
}
}
/* The page presentation reuses the editor without the modal shell or inner scrolling. */
.lovedone-page-editor .lovedone-edit-modal-content[b-391iuau2gn] {
width: 100%;
max-width: none;
max-height: none;
margin: 0;
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid #e6cfc5;
box-shadow: 0 6px 20px rgba(100, 80, 70, .05);
}
.lovedone-page-editor .lovedone-modal-body[b-391iuau2gn] {
min-height: 0;
max-height: none;
overflow: visible;
padding: 0;
mask-image: none;
-webkit-mask-image: none;
}
.lovedone-page-editor .lovedone-modal-body[b-391iuau2gn]::after { display: none; }
.lovedone-page-editor .lovedone-modal-footer[b-391iuau2gn] {
position: static;
flex-wrap: wrap;
margin-top: 1.5rem;
padding-bottom: 0;
}
.lovedone-page-editor button:focus-visible[b-391iuau2gn],
.lovedone-page-editor input:focus-visible[b-391iuau2gn],
.lovedone-page-editor select:focus-visible[b-391iuau2gn],
.lovedone-page-editor textarea:focus-visible[b-391iuau2gn] {
outline: 3px solid #79564d;
outline-offset: 3px;
}
@media (max-width: 600px) {
.lovedone-page-editor .form-group-row[b-391iuau2gn],
.lovedone-page-editor .avatar-row[b-391iuau2gn] { flex-direction: column; }
.lovedone-page-editor .form-group-half[b-391iuau2gn],
.lovedone-page-editor .avatar-col[b-391iuau2gn],
.lovedone-page-editor .relation-col[b-391iuau2gn] { width: 100%; min-width: 0; }
}
/* /Components/LovedOneTypeSelectorModal.razor.rz.scp.css */
/* LovedOneTypeSelectorModal — restrained text-led choice */
/* ─── Overlay ─── */
.modal-overlay[b-f2wm694rio] {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(16px, 4vw, 28px);
box-sizing: border-box;
overflow-y: auto;
background: rgba(30, 37, 30, 0.36);
backdrop-filter: blur(2px);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
z-index: 9999;
}
.modal-overlay.visible[b-f2wm694rio] { opacity: 1; visibility: visible; }
/* ─── Modal card ─── */
.modal-content.type-selector-modal[b-f2wm694rio] {
position: relative;
background: var(--lov-surface);
border: 1px solid var(--lov-line);
border-radius: 6px;
width: min(560px, 100%);
box-shadow: none;
box-sizing: border-box;
margin: auto;
max-height: calc(100dvh - 32px);
overflow-y: auto;
padding: 28px 28px 16px;
transform: translateY(6px) scale(0.985);
transition: transform .25s ease;
}
.modal-overlay.visible .modal-content.type-selector-modal[b-f2wm694rio] {
transform: translateY(0) scale(1);
z-index: 10000;
}
/* ─── Explicit close control ─── */
.selector-close-button[b-f2wm694rio] {
position: absolute;
top: 12px;
right: 12px;
width: 44px;
height: 44px;
border: 1px solid var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
color: var(--lov-ink);
box-shadow: none;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans);
font-size: 1.5rem;
font-weight: 500;
line-height: 1;
padding: 0 0 3px;
transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.selector-close-button:hover[b-f2wm694rio],
.selector-close-button:focus-visible[b-f2wm694rio] {
background: var(--lov-selected);
border-color: var(--lov-green);
box-shadow: none;
}
.selector-close-button:focus-visible[b-f2wm694rio] {
outline: 3px solid var(--lov-focus);
outline-offset: 2px;
}
.selector-close-button:active[b-f2wm694rio] {
transform: scale(0.96);
}
/* ─── Title + subtitle ─── */
.selector-title[b-f2wm694rio] {
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.85rem;
line-height: 1.25;
color: var(--lov-ink);
margin: 8px 64px 12px 4px;
}
.selector-subtitle[b-f2wm694rio] {
font-family: var(--font-sans);
font-weight: 400;
font-size: 0.95rem;
line-height: 1.55;
color: var(--lov-muted);
margin: 0 0 10px 4px;
}
.selector-privacy-note[b-f2wm694rio] {
margin: 0 0 22px 4px;
padding-left: 12px;
border-left: 1px solid var(--lov-line);
font-family: var(--font-sans);
font-size: 0.82rem;
line-height: 1.45;
color: var(--lov-muted);
letter-spacing: 0;
}
/* ─── Options grid ─── */
.type-options[b-f2wm694rio] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin: 12px 0 8px;
}
/* ─── Choice button ─── */
.type-option[b-f2wm694rio] {
background: var(--lov-surface);
border: 1px solid var(--lov-line);
border-radius: 6px;
padding: 18px;
display: flex;
align-items: center;
justify-content: center;
min-height: 96px;
cursor: pointer;
transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.type-option:hover[b-f2wm694rio] {
background: var(--lov-paper);
box-shadow: none;
border-color: var(--lov-green);
}
.type-option:active[b-f2wm694rio] {
background: var(--lov-selected);
transform: none;
box-shadow: none;
}
/* ─── Type label ─── */
.type-label[b-f2wm694rio] {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
color: var(--lov-ink);
text-align: left;
width: 100%;
}
/* ─── Cancel link ─── */
.cancel-link[b-f2wm694rio] {
margin-top: 18px;
background: transparent;
border: none;
color: var(--lov-muted);
font-family: var(--font-sans);
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
padding: 8px 6px;
border-radius: 6px;
transition: background-color .2s ease;
display: inline-flex;
min-height: 44px;
align-items: center;
text-align: left;
}
.cancel-link:hover[b-f2wm694rio] {
background: var(--lov-selected);
}
.type-option:focus-visible[b-f2wm694rio],
.cancel-link:focus-visible[b-f2wm694rio] {
outline: 3px solid var(--lov-focus);
outline-offset: 3px;
}
/* ─── Mobile ─── */
@media (max-width: 640px) {
.modal-content.type-selector-modal[b-f2wm694rio] {
padding: 24px 20px 18px;
border-radius: 6px;
}
.selector-close-button[b-f2wm694rio] {
top: 12px;
right: 12px;
width: 44px;
height: 44px;
font-size: 1.6rem;
}
.type-options[b-f2wm694rio] {
grid-template-columns: 1fr;
}
.selector-title[b-f2wm694rio] {
font-size: 1.5rem;
}
.selector-subtitle[b-f2wm694rio] {
font-size: 0.9rem;
}
.selector-privacy-note[b-f2wm694rio] {
font-size: 0.8rem;
}
.type-option[b-f2wm694rio] {
min-height: 80px;
}
}
/* /Components/LovOnePageLoader.razor.rz.scp.css */
/* ============================================================
LovOnePageLoader — "Someone is preparing the room for you"
============================================================
No box. No border. No SaaS.
Just a warm candle floating on cream, with poetic text.
The wait becomes a breath, not an interruption.
============================================================ */
.lovone-page-loader[b-cwlbzj15ek] {
position: relative;
isolation: isolate;
display: grid;
place-items: center;
width: 100%;
min-height: clamp(20rem, 50vh, 34rem);
padding: 3rem 1.5rem;
overflow: hidden;
}
.lovone-page-loader--fullscreen[b-cwlbzj15ek] {
min-height: 100vh;
min-height: 100dvh;
}
/* --- Warm cream backdrop — never cold, never blue --- */
.lovone-page-loader__backdrop[b-cwlbzj15ek] {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 50% at 50% 38%, rgba(255, 224, 168, 0.35), transparent 70%),
linear-gradient(180deg, #FDF8F0 0%, #FAF3E5 40%, #F5EDE0 100%);
}
/* --- Central area — free-floating, no box, maximum air --- */
.lovone-page-loader__center[b-cwlbzj15ek] {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.2rem;
max-width: 22rem;
}
/* --- Candle flame wrapper with living glow --- */
.lovone-page-loader__flame-wrap[b-cwlbzj15ek] {
position: relative;
display: grid;
place-items: center;
width: 9rem;
height: 9rem;
}
/* The golden aura — pulsing like a real candle */
.lovone-page-loader__glow[b-cwlbzj15ek] {
position: absolute;
inset: -1.5rem;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(255, 210, 140, 0.50) 0%,
rgba(255, 195, 115, 0.25) 35%,
rgba(255, 180, 100, 0.08) 60%,
transparent 80%
);
filter: blur(12px);
animation: lovone-glow-breathe-b-cwlbzj15ek 3s ease-in-out infinite;
}
/* The warm candle image — gentle hover, no bounce */
.lovone-page-loader__candle[b-cwlbzj15ek] {
width: 7rem;
height: auto;
filter: drop-shadow(0 8px 24px rgba(180, 130, 70, 0.3));
animation: lovone-candle-breathe-b-cwlbzj15ek 3.5s ease-in-out infinite;
}
/* --- Poetic title — Fraunces serif italic, warm brown --- */
.lovone-page-loader__title[b-cwlbzj15ek] {
margin: 0;
padding-top: 0.4rem;
font-family: var(--font-serif, 'Fraunces', serif);
font-size: clamp(1.1rem, 1rem + 0.45vw, 1.4rem);
font-weight: 400;
font-style: italic;
color: #4A3F35;
letter-spacing: 0.02em;
text-align: center;
opacity: 0;
animation: lovone-text-appear-b-cwlbzj15ek 0.8s ease-out 0.3s forwards;
}
.lovone-page-loader__subtitle[b-cwlbzj15ek] {
margin: 0;
max-width: 18rem;
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 0.92rem;
font-weight: 300;
font-style: italic;
color: #7A6B58;
line-height: 1.6;
text-align: center;
opacity: 0;
animation: lovone-text-appear-b-cwlbzj15ek 0.8s ease-out 0.6s forwards;
}
.lovone-page-loader__screen-reader-only[b-cwlbzj15ek] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ===================
Night mode
=================== */
body.night-mode .lovone-page-loader__backdrop[b-cwlbzj15ek] {
background:
radial-gradient(ellipse 50% 40% at 50% 40%, rgba(255, 190, 120, 0.12), transparent 70%),
linear-gradient(180deg, #1C2126 0%, #181F24 50%, #151A1E 100%);
}
body.night-mode .lovone-page-loader__glow[b-cwlbzj15ek] {
background: radial-gradient(
circle,
rgba(255, 195, 115, 0.35) 0%,
rgba(255, 170, 90, 0.15) 40%,
transparent 75%
);
}
body.night-mode .lovone-page-loader__candle[b-cwlbzj15ek] {
filter: drop-shadow(0 8px 28px rgba(255, 170, 90, 0.35));
}
body.night-mode .lovone-page-loader__title[b-cwlbzj15ek] {
color: #E8DDD0;
}
body.night-mode .lovone-page-loader__subtitle[b-cwlbzj15ek] {
color: #B8A898;
}
/* ===================
Animations
=================== */
/* Glow pulses like a candle — slow, organic, asymmetric */
@keyframes lovone-glow-breathe-b-cwlbzj15ek {
0%, 100% {
opacity: 0.6;
transform: scale(0.94);
}
35% {
opacity: 1;
transform: scale(1.06);
}
65% {
opacity: 0.8;
transform: scale(1.02);
}
}
/* Candle barely moves — stillness with a hint of life */
@keyframes lovone-candle-breathe-b-cwlbzj15ek {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-2px) scale(1.01);
}
}
/* Text fades in gently, slightly rising */
@keyframes lovone-text-appear-b-cwlbzj15ek {
from {
opacity: 0;
transform: translateY(6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================
Responsive
=================== */
@media (max-width: 640px) {
.lovone-page-loader[b-cwlbzj15ek] {
min-height: clamp(18rem, 44vh, 26rem);
padding: 2.5rem 1rem;
}
.lovone-page-loader__flame-wrap[b-cwlbzj15ek] {
width: 7.5rem;
height: 7.5rem;
}
.lovone-page-loader__candle[b-cwlbzj15ek] {
width: 5.8rem;
}
.lovone-page-loader__glow[b-cwlbzj15ek] {
inset: -1rem;
}
}
/* /Components/MemorialCarousel.razor.rz.scp.css */
.memorial-carousel[b-oe5bocnw1p] {
position: relative;
width: 100%;
max-width: 620px;
margin: 0.5rem auto 0;
}
/* Ambient warm halo — candlelight glow, not a spotlight */
.memorial-carousel-halo[b-oe5bocnw1p] {
position: absolute;
inset: -25%;
background:
radial-gradient(ellipse 70% 60% at 50% 45%,
rgba(234, 210, 170, 0.18) 0%,
rgba(220, 190, 145, 0.08) 35%,
transparent 65%),
radial-gradient(ellipse 90% 80% at 50% 50%,
rgba(196, 154, 108, 0.06) 0%,
transparent 70%);
pointer-events: none;
z-index: 0;
}
/* Images wrapper — first image is relative to set flow height */
.memorial-carousel-images[b-oe5bocnw1p] {
position: relative;
width: 100%;
}
/* Portrait layers — soft radial mask fade (no hard frame) */
.memorial-carousel-image[b-oe5bocnw1p] {
width: 100%;
height: auto;
display: block;
-webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
object-fit: cover;
opacity: 0;
position: absolute;
top: 0;
left: 0;
animation: kenBurns-b-oe5bocnw1p 16s ease-in-out infinite alternate;
transition: opacity 2s ease-in-out;
z-index: 1;
will-change: opacity;
}
/* First image sets the flow height (not absolute) */
.memorial-carousel-image:first-of-type[b-oe5bocnw1p] {
position: relative;
}
.memorial-carousel-image.active[b-oe5bocnw1p] {
opacity: 1;
}
/* Gentle continuous Ken Burns — never removed, so no snap during crossfade */
@keyframes kenBurns-b-oe5bocnw1p {
0% { transform: scale(1.0); }
100% { transform: scale(1.03); }
}
/* Caption — museum placard feel */
.memorial-carousel-caption[b-oe5bocnw1p] {
position: relative;
z-index: 5;
font-family: var(--font-serif);
font-size: 0.85rem;
font-style: italic;
color: #8B7B6B;
text-align: center;
margin-top: 0.85rem;
max-width: 360px;
margin-left: auto;
margin-right: auto;
line-height: 1.5;
letter-spacing: 0.01em;
opacity: 0;
transition: opacity 1.4s ease-in-out;
}
.memorial-carousel-caption.visible[b-oe5bocnw1p] {
opacity: 1;
}
/* Owner overlay */
.memorial-carousel-owner-overlay[b-oe5bocnw1p] {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
z-index: 10;
display: flex;
justify-content: flex-end;
align-items: flex-start;
padding: 12px;
pointer-events: none;
}
.memorial-carousel-create-btn[b-oe5bocnw1p] {
pointer-events: auto;
opacity: 0;
transition: opacity 0.3s ease, transform 0.2s ease, background 0.2s ease;
background: rgba(255, 244, 228, 0.88);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
border: 1px solid rgba(196, 117, 93, 0.25);
border-radius: 20px;
padding: 6px 14px;
font-family: var(--font-sans);
font-size: 0.8rem;
color: #8B5E3C;
cursor: pointer;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(139, 94, 60, 0.08);
}
.memorial-carousel:hover .memorial-carousel-create-btn[b-oe5bocnw1p] {
opacity: 1;
}
.memorial-carousel-create-btn:hover[b-oe5bocnw1p] {
background: rgba(255, 244, 228, 0.96);
border-color: rgba(196, 117, 93, 0.45);
transform: translateY(-1px);
box-shadow: 0 3px 12px rgba(139, 94, 60, 0.12);
}
.memorial-carousel-create-btn:active[b-oe5bocnw1p] {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(139, 94, 60, 0.1);
}
/* Responsive */
@media (max-width: 768px) {
.memorial-carousel[b-oe5bocnw1p] {
max-width: 420px;
}
.memorial-carousel-caption[b-oe5bocnw1p] {
font-size: 0.8rem;
max-width: 280px;
}
/* Always show on mobile (no hover) */
.memorial-carousel-create-btn[b-oe5bocnw1p] {
opacity: 0.88;
}
}
@media (max-width: 480px) {
.memorial-carousel[b-oe5bocnw1p] {
max-width: 320px;
}
.memorial-carousel-caption[b-oe5bocnw1p] {
max-width: 280px;
}
}
/* Night mode — warm but dimmed */
body.night-mode .memorial-carousel-halo[b-oe5bocnw1p] {
background:
radial-gradient(ellipse 70% 60% at 50% 45%,
rgba(196, 154, 108, 0.12) 0%,
rgba(180, 140, 100, 0.05) 35%,
transparent 65%),
radial-gradient(ellipse 90% 80% at 50% 50%,
rgba(160, 130, 90, 0.04) 0%,
transparent 70%);
}
body.night-mode .memorial-carousel-caption[b-oe5bocnw1p] {
color: #B0A090;
}
body.night-mode .memorial-carousel-create-btn[b-oe5bocnw1p] {
background: rgba(55, 45, 38, 0.88);
backdrop-filter: blur(6px);
color: #D4C4A8;
border-color: rgba(196, 154, 108, 0.25);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
body.night-mode .memorial-carousel-create-btn:hover[b-oe5bocnw1p] {
background: rgba(65, 55, 45, 0.95);
border-color: rgba(196, 154, 108, 0.4);
}
/* /Components/MemorialGalleryModal.razor.rz.scp.css */
/* MemorialGalleryModal */
.mgallery-backdrop[b-bprihharuk] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 2100;
animation: mgalleryOverlayIn-b-bprihharuk 0.25s ease-out;
}
@keyframes mgalleryOverlayIn-b-bprihharuk {
from { opacity: 0; }
to { opacity: 1; }
}
.mgallery-modal[b-bprihharuk] {
background: linear-gradient(170deg, #fdfaf5 0%, #faf6f0 40%, #f5efe6 100%);
border-radius: 20px;
border: 1px solid rgba(196, 154, 108, 0.15);
width: 600px;
max-width: 94%;
max-height: 85vh;
overflow-y: auto;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.18),
0 2px 8px rgba(139, 115, 85, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
animation: mgalleryContentIn-b-bprihharuk 0.3s ease-out;
display: flex;
flex-direction: column;
}
/* Warm scrollbar */
.mgallery-modal[b-bprihharuk]::-webkit-scrollbar {
width: 5px;
}
.mgallery-modal[b-bprihharuk]::-webkit-scrollbar-track {
background: transparent;
}
.mgallery-modal[b-bprihharuk]::-webkit-scrollbar-thumb {
background: rgba(196, 154, 108, 0.25);
border-radius: 3px;
}
.mgallery-modal[b-bprihharuk]::-webkit-scrollbar-thumb:hover {
background: rgba(196, 154, 108, 0.4);
}
@keyframes mgalleryContentIn-b-bprihharuk {
from {
opacity: 0;
transform: translateY(12px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Header */
.mgallery-header[b-bprihharuk] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 14px;
border-bottom: 1px solid rgba(232, 213, 200, 0.5);
}
.mgallery-title[b-bprihharuk] {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 600;
color: #3A3228;
margin: 0;
}
.mgallery-header-actions[b-bprihharuk] {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
/* Create Portrait button — outline pill, warm copper */
.mgallery-create-btn[b-bprihharuk] {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 6px 14px;
background: transparent;
border: 1.5px solid rgba(196, 154, 108, 0.45);
border-radius: 20px;
color: #A85E46;
font-size: 0.82rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
}
.mgallery-create-btn:hover[b-bprihharuk] {
background: rgba(206, 133, 104, 0.08);
border-color: rgba(196, 117, 93, 0.65);
color: #8B4532;
transform: translateY(-1px);
}
.mgallery-create-btn:active[b-bprihharuk] {
transform: translateY(0);
}
.mgallery-create-icon[b-bprihharuk] {
font-size: 0.9rem;
}
/* Variant inside empty state — larger, more prominent */
.mgallery-create-btn-empty[b-bprihharuk] {
margin-top: 12px;
padding: 9px 22px;
font-size: 0.9rem;
border-color: rgba(196, 117, 93, 0.5);
}
.mgallery-close[b-bprihharuk] {
background: none;
border: none;
font-size: 24px;
color: #8b6b66;
cursor: pointer;
padding: 4px 8px;
border-radius: 8px;
line-height: 1;
transition: background 0.2s, color 0.2s;
}
.mgallery-close:hover[b-bprihharuk] {
background: rgba(196, 154, 108, 0.08);
color: #5a3a33;
}
/* Loading */
.mgallery-loading[b-bprihharuk] {
display: flex;
align-items: center;
justify-content: center;
padding: 48px;
}
/* Empty State */
.mgallery-empty[b-bprihharuk] {
text-align: center;
padding: 48px 24px;
color: #8b7355;
}
.mgallery-empty-icon[b-bprihharuk] {
font-size: 2.5rem;
margin-bottom: 10px;
}
/* Grid */
.mgallery-grid[b-bprihharuk] {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
padding: 20px 24px;
}
/* Card */
.mgallery-card[b-bprihharuk] {
background: rgba(255, 255, 255, 0.85);
border-radius: 14px;
border: 1px solid rgba(232, 213, 200, 0.45);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.mgallery-card:hover[b-bprihharuk] {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(139, 115, 85, 0.1);
border-color: rgba(232, 213, 200, 0.65);
}
.mgallery-card.featured[b-bprihharuk] {
border-color: rgba(196, 117, 93, 0.4);
box-shadow: 0 0 0 1px rgba(196, 117, 93, 0.08), 0 2px 12px rgba(196, 117, 93, 0.08);
}
.mgallery-card.featured:hover[b-bprihharuk] {
box-shadow: 0 0 0 1px rgba(196, 117, 93, 0.12), 0 6px 20px rgba(196, 117, 93, 0.12);
}
/* Image */
.mgallery-image-wrapper[b-bprihharuk] {
position: relative;
aspect-ratio: 1;
overflow: hidden;
}
.mgallery-image[b-bprihharuk] {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.mgallery-card:hover .mgallery-image[b-bprihharuk] {
transform: scale(1.03);
}
.mgallery-primary-badge[b-bprihharuk] {
position: absolute;
top: 6px;
right: 6px;
background: linear-gradient(135deg, #CE8568, #A85E46);
color: #fff;
width: 24px;
height: 24px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.7rem;
box-shadow: 0 2px 8px rgba(168, 94, 70, 0.3);
}
/* Actions */
.mgallery-card-actions[b-bprihharuk] {
display: flex;
justify-content: center;
gap: 4px;
padding: 8px 6px 4px;
}
.mgallery-btn[b-bprihharuk] {
background: none;
border: 1px solid transparent;
cursor: pointer;
width: 32px;
height: 32px;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
transition: all 0.2s ease;
color: #a09080;
}
.mgallery-btn:hover[b-bprihharuk] {
background: rgba(196, 154, 108, 0.08);
}
.mgallery-pin-btn.active[b-bprihharuk] {
color: #CE8568;
border-color: rgba(206, 133, 104, 0.25);
background: rgba(206, 133, 104, 0.08);
}
.mgallery-pin-btn.active:hover[b-bprihharuk] {
background: rgba(206, 133, 104, 0.14);
}
.mgallery-star-btn.active[b-bprihharuk] {
color: #B08D6E;
border-color: rgba(176, 141, 110, 0.25);
background: rgba(176, 141, 110, 0.08);
}
.mgallery-star-btn.active:hover[b-bprihharuk] {
background: rgba(176, 141, 110, 0.14);
}
.mgallery-delete-btn:hover[b-bprihharuk] {
color: #b73a3a;
background: rgba(183, 58, 58, 0.06);
}
/* Caption Input — organic bottom-border-only */
.mgallery-caption-input[b-bprihharuk] {
width: calc(100% - 16px);
margin: 0 8px 10px;
padding: 6px 4px;
border: none;
border-bottom: 1px solid rgba(196, 154, 108, 0.3);
border-radius: 0;
background: transparent;
color: #5a3a33;
font-size: 0.8rem;
font-family: var(--font-serif);
font-style: italic;
transition: border-color 0.2s ease;
box-sizing: border-box;
}
.mgallery-caption-input:focus[b-bprihharuk] {
outline: none;
border-bottom-color: #CE8568;
box-shadow: 0 1px 0 rgba(206, 133, 104, 0.2);
}
.mgallery-caption-input[b-bprihharuk]::placeholder {
color: #b5a89e;
font-style: italic;
}
/* Footer */
.mgallery-footer[b-bprihharuk] {
padding: 16px 24px 20px;
border-top: 1px solid rgba(232, 213, 200, 0.5);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
}
.mgallery-error[b-bprihharuk] {
color: #b73a3a;
font-size: 0.85rem;
margin: 0;
}
.mgallery-save-btn[b-bprihharuk] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 12px 32px;
background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
color: #fff;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
min-width: 160px;
box-shadow: 0 2px 8px rgba(168, 94, 70, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.mgallery-save-btn:hover:not(:disabled)[b-bprihharuk] {
background: linear-gradient(180deg, #d99a80 0%, #b86e54 100%);
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(168, 94, 70, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
.mgallery-save-btn:active:not(:disabled)[b-bprihharuk] {
transform: translateY(0);
box-shadow: 0 1px 4px rgba(168, 94, 70, 0.2);
}
.mgallery-save-btn:disabled[b-bprihharuk] {
opacity: 0.6;
cursor: not-allowed;
}
/* Responsive */
@media (max-width: 540px) {
.mgallery-modal[b-bprihharuk] {
width: 100%;
max-width: 100%;
height: 100vh;
max-height: 100vh;
border-radius: 0;
border: none;
}
.mgallery-grid[b-bprihharuk] {
grid-template-columns: repeat(2, 1fr);
gap: 12px;
padding: 16px;
}
.mgallery-header[b-bprihharuk] {
padding: 16px 16px 12px;
flex-wrap: wrap;
gap: 8px;
}
.mgallery-create-btn[b-bprihharuk] {
font-size: 0.78rem;
padding: 5px 12px;
}
.mgallery-footer[b-bprihharuk] {
padding: 12px 16px 16px;
}
}
/* ================ Night Mode ================ */
body.night-mode .mgallery-backdrop[b-bprihharuk] {
background: rgba(0, 0, 0, 0.6);
}
body.night-mode .mgallery-modal[b-bprihharuk] {
background: linear-gradient(170deg, #2A3640 0%, #253038 40%, #1E2830 100%);
border-color: rgba(196, 154, 108, 0.12);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(196, 154, 108, 0.06);
}
body.night-mode .mgallery-modal[b-bprihharuk]::-webkit-scrollbar-thumb {
background: rgba(196, 154, 108, 0.2);
}
body.night-mode .mgallery-header[b-bprihharuk] {
border-bottom-color: rgba(196, 154, 108, 0.12);
}
body.night-mode .mgallery-title[b-bprihharuk] {
color: #E8F4F8;
}
body.night-mode .mgallery-close[b-bprihharuk] {
color: #A0B4BC;
}
body.night-mode .mgallery-close:hover[b-bprihharuk] {
background: rgba(196, 154, 108, 0.1);
color: #E8F4F8;
}
body.night-mode .mgallery-create-btn[b-bprihharuk] {
color: #CE9A7A;
border-color: rgba(196, 154, 108, 0.25);
}
body.night-mode .mgallery-create-btn:hover[b-bprihharuk] {
background: rgba(196, 154, 108, 0.1);
border-color: rgba(196, 154, 108, 0.4);
color: #E8C4A0;
}
body.night-mode .mgallery-empty[b-bprihharuk] {
color: #A0B4BC;
}
body.night-mode .mgallery-card[b-bprihharuk] {
background: rgba(45, 59, 68, 0.7);
border-color: rgba(196, 154, 108, 0.1);
}
body.night-mode .mgallery-card:hover[b-bprihharuk] {
border-color: rgba(196, 154, 108, 0.2);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}
body.night-mode .mgallery-card.featured[b-bprihharuk] {
border-color: rgba(196, 117, 93, 0.35);
box-shadow: 0 0 0 1px rgba(196, 117, 93, 0.06), 0 2px 12px rgba(0, 0, 0, 0.15);
}
body.night-mode .mgallery-primary-badge[b-bprihharuk] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
body.night-mode .mgallery-btn[b-bprihharuk] {
color: #A0B4BC;
}
body.night-mode .mgallery-btn:hover[b-bprihharuk] {
background: rgba(196, 154, 108, 0.1);
}
body.night-mode .mgallery-pin-btn.active[b-bprihharuk] {
color: #CE8568;
border-color: rgba(206, 133, 104, 0.2);
background: rgba(206, 133, 104, 0.1);
}
body.night-mode .mgallery-star-btn.active[b-bprihharuk] {
color: #C49A6C;
border-color: rgba(196, 154, 108, 0.2);
background: rgba(196, 154, 108, 0.1);
}
body.night-mode .mgallery-delete-btn:hover[b-bprihharuk] {
color: #e05555;
background: rgba(224, 85, 85, 0.08);
}
body.night-mode .mgallery-caption-input[b-bprihharuk] {
color: #E8F4F8;
border-bottom-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .mgallery-caption-input:focus[b-bprihharuk] {
border-bottom-color: #CE8568;
box-shadow: 0 1px 0 rgba(206, 133, 104, 0.15);
}
body.night-mode .mgallery-caption-input[b-bprihharuk]::placeholder {
color: #7A9AA8;
}
body.night-mode .mgallery-footer[b-bprihharuk] {
border-top-color: rgba(196, 154, 108, 0.12);
}
body.night-mode .mgallery-error[b-bprihharuk] {
color: #e05555;
}
body.night-mode .mgallery-save-btn[b-bprihharuk] {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.night-mode .mgallery-save-btn:hover:not(:disabled)[b-bprihharuk] {
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
/* /Components/MemorialMemoryModal.razor.rz.scp.css */
.memory-manage-modal-overlay[b-z7ya1o8r5t] {
position: fixed;
inset: 0;
background-color: rgba(38, 29, 22, 0.64);
-webkit-backdrop-filter: blur(10px) saturate(108%);
backdrop-filter: blur(10px) saturate(108%);
display: flex;
justify-content: center;
align-items: center;
z-index: 2100;
padding: clamp(0.85rem, 3vw, 1.5rem);
}
.memory-manage-modal-content[b-z7ya1o8r5t] {
background:
radial-gradient(circle at 50% 0%, rgba(255, 238, 216, 0.7), transparent 50%),
linear-gradient(180deg, #FFFDF8 0%, #FFF4E7 100%);
border-radius: 18px;
width: 100%;
max-width: 640px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 70px rgba(55, 39, 27, 0.24), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
border: 1px solid rgba(196, 154, 108, 0.2);
}
.memory-manage-modal-header[b-z7ya1o8r5t] {
display: flex;
justify-content: flex-end;
padding: 1rem 1.2rem 0;
}
.memory-manage-modal-close[b-z7ya1o8r5t] {
background: none;
border: none;
border-radius: 999px;
font-size: 1.35rem;
color: rgba(91, 69, 52, 0.68);
cursor: pointer;
padding: 0.2rem 0.55rem;
line-height: 1;
transition: all 0.3s ease;
}
.memory-manage-modal-close:focus-visible[b-z7ya1o8r5t] {
background: rgba(164, 123, 80, 0.12);
color: #5C4033;
outline: 2px solid rgba(164, 123, 80, 0.34);
outline-offset: 2px;
}
.memory-manage-modal-body[b-z7ya1o8r5t] {
padding: 0 clamp(1.15rem, 4vw, 2.2rem) 1rem;
}
.memory-manage-modal-title[b-z7ya1o8r5t] {
font-family: var(--font-serif);
font-size: clamp(1.2rem, 3.3vw, 1.72rem);
font-weight: 600;
line-height: 1.14;
color: #33291F;
margin: 0 0 1rem;
text-align: center;
}
.memory-manage-card[b-z7ya1o8r5t] {
background: rgba(255, 252, 246, 0.8);
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 12px;
padding: clamp(1.05rem, 3vw, 1.35rem);
}
.memory-manage-image-wrapper[b-z7ya1o8r5t] {
width: 100%;
margin: 0 0 0.9rem;
}
.memory-manage-image[b-z7ya1o8r5t] {
display: block;
width: 100%;
max-height: 320px;
object-fit: cover;
border-radius: 10px;
}
.memory-manage-content[b-z7ya1o8r5t] {
font-family: var(--font-sans);
font-size: clamp(0.92rem, 1.75vw, 1rem);
line-height: 1.82;
color: #3E3329;
margin: 0 0 0.9rem;
}
.memory-manage-meta[b-z7ya1o8r5t] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
border-top: 1px solid rgba(232, 213, 200, 0.3);
padding-top: 0.7rem;
}
.memory-manage-author[b-z7ya1o8r5t] {
font-family: var(--font-serif);
font-weight: 600;
font-size: 0.9rem;
color: #66584B;
}
.memory-manage-relation[b-z7ya1o8r5t] {
font-family: var(--font-sans);
font-size: 0.8rem;
color: #86725D;
}
.memory-manage-date[b-z7ya1o8r5t] {
font-family: var(--font-sans);
font-size: 0.79rem;
color: #9C8A74;
margin-left: auto;
}
.memory-manage-modal-footer[b-z7ya1o8r5t] {
border-top: 1px solid rgba(196, 154, 108, 0.14);
background: linear-gradient(180deg, rgba(255, 249, 240, 0.65) 0%, rgba(255, 244, 232, 0.92) 100%);
padding: 0.95rem clamp(1.15rem, 4vw, 2.2rem) 1.25rem;
display: flex;
flex-direction: column;
gap: 0.72rem;
}
.memory-manage-footnote[b-z7ya1o8r5t] {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.86rem;
color: #775E47;
line-height: 1.58;
}
.memory-manage-ai-section[b-z7ya1o8r5t] {
margin: 0;
padding: 0.85rem 0.9rem 0.95rem;
border-radius: 10px;
border: 1px solid rgba(196, 154, 108, 0.2);
background: rgba(255, 252, 246, 0.82);
display: flex;
flex-direction: column;
gap: 0.62rem;
box-shadow: inset 3px 0 0 rgba(196, 154, 108, 0.26);
}
.memory-manage-ai-title[b-z7ya1o8r5t] {
margin: 0;
font-family: var(--font-serif);
font-size: 0.93rem;
color: #5F4635;
line-height: 1.45;
}
.memory-manage-ai-toggle-label[b-z7ya1o8r5t] {
position: relative;
display: flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #5C4033;
cursor: pointer;
width: fit-content;
}
.memory-manage-ai-toggle-input[b-z7ya1o8r5t] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.memory-manage-ai-toggle-box[b-z7ya1o8r5t] {
position: relative;
width: 1.25rem;
height: 1.25rem;
flex: 0 0 1.25rem;
border-radius: 7px;
border: 1.5px solid rgba(164, 123, 80, 0.48);
background: rgba(255, 252, 246, 0.9);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
transition: all 0.3s ease;
}
.memory-manage-ai-toggle-box[b-z7ya1o8r5t]::after {
content: "";
position: absolute;
left: 0.35rem;
top: 0.18rem;
width: 0.34rem;
height: 0.62rem;
border: solid #4A3122;
border-width: 0 1.8px 1.8px 0;
opacity: 0;
transform: rotate(42deg) scale(0.82);
transition: all 0.3s ease;
}
.memory-manage-ai-toggle-input:checked + .memory-manage-ai-toggle-box[b-z7ya1o8r5t] {
border-color: rgba(144, 91, 50, 0.22);
background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
}
.memory-manage-ai-toggle-input:checked + .memory-manage-ai-toggle-box[b-z7ya1o8r5t]::after {
opacity: 1;
transform: rotate(42deg) scale(1);
}
.memory-manage-ai-toggle-input:focus-visible + .memory-manage-ai-toggle-box[b-z7ya1o8r5t] {
outline: 2px solid rgba(196, 154, 108, 0.45);
outline-offset: 3px;
}
.memory-manage-ai-toggle-copy[b-z7ya1o8r5t] {
line-height: 1.35;
}
.memory-manage-ai-help[b-z7ya1o8r5t] {
margin: 0;
font-family: var(--font-serif);
font-size: 0.82rem;
font-style: italic;
color: #6F5542;
line-height: 1.5;
}
.memory-manage-ai-enable-btn[b-z7ya1o8r5t],
.memory-manage-ai-disable-btn[b-z7ya1o8r5t] {
align-self: flex-start;
border: 1px solid rgba(171, 120, 78, 0.26);
border-radius: 999px;
background: linear-gradient(145deg, #FAEBDD 0%, #F6DFC8 100%);
color: #5D4131;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 600;
min-height: 2.5rem;
padding: 0.5rem 0.95rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
transition: all 0.3s ease;
}
.memory-manage-ai-enable-btn:focus-visible[b-z7ya1o8r5t],
.memory-manage-ai-disable-btn:focus-visible[b-z7ya1o8r5t] {
background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
border-color: rgba(171, 120, 78, 0.4);
outline: 2px solid rgba(164, 123, 80, 0.32);
outline-offset: 2px;
box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}
.memory-manage-ai-enable-btn:disabled[b-z7ya1o8r5t],
.memory-manage-ai-disable-btn:disabled[b-z7ya1o8r5t] {
opacity: 0.64;
cursor: not-allowed;
}
.memory-manage-ai-note[b-z7ya1o8r5t] {
margin: 0;
font-family: var(--font-sans);
font-size: 0.84rem;
color: #6D5644;
line-height: 1.48;
background: rgba(196, 154, 108, 0.08);
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 10px;
padding: 0.65rem 0.78rem;
}
.memory-manage-ai-disable-btn[b-z7ya1o8r5t] {
align-self: flex-start;
border: 0;
background: transparent;
color: #8B5E55;
padding: 0.35rem 0.2rem;
font: 600 0.82rem/1.3 var(--font-sans);
cursor: pointer;
}
.memory-manage-linked-memory-btn[b-z7ya1o8r5t] {
align-self: flex-start;
border: 1px solid rgba(171, 120, 78, 0.28);
border-radius: 999px;
background: rgba(255, 252, 246, 0.9);
color: #5D4131;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 600;
min-height: 2.55rem;
padding: 0.5rem 0.95rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.48rem;
transition: all 0.3s ease;
}
.memory-manage-linked-memory-btn:focus-visible[b-z7ya1o8r5t] {
background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
border-color: rgba(171, 120, 78, 0.4);
outline: 2px solid rgba(164, 123, 80, 0.32);
outline-offset: 2px;
box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}
.memory-manage-linked-memory-btn:disabled[b-z7ya1o8r5t] {
opacity: 0.64;
cursor: not-allowed;
}
.memory-manage-linked-memory-icon[b-z7ya1o8r5t],
.memory-manage-linked-memory-icon svg[b-z7ya1o8r5t] {
width: 1rem;
height: 1rem;
}
.memory-manage-linked-memory-icon[b-z7ya1o8r5t] {
display: inline-flex;
align-items: center;
justify-content: center;
}
.memory-manage-success[b-z7ya1o8r5t] {
margin: 0;
font-family: var(--font-sans);
font-size: 0.84rem;
color: #5C6F4D;
background: rgba(241, 249, 236, 0.92);
border: 1px solid rgba(142, 171, 112, 0.28);
border-radius: 10px;
padding: 0.65rem 0.8rem;
}
.memory-manage-error[b-z7ya1o8r5t] {
margin: 0;
font-family: var(--font-sans);
font-size: 0.85rem;
color: #7A4B3A;
background: rgba(255, 247, 239, 0.82);
border: 1px solid rgba(153, 93, 64, 0.18);
border-radius: 10px;
padding: 0.65rem 0.8rem;
}
.memory-manage-hide-btn[b-z7ya1o8r5t] {
align-self: flex-start;
border: 1px solid rgba(171, 120, 78, 0.26);
border-radius: 999px;
background: linear-gradient(145deg, #FAEBDD 0%, #F6DFC8 100%);
color: #5D4131;
font-family: var(--font-sans);
font-size: 0.91rem;
font-weight: 600;
min-height: 2.75rem;
padding: 0.58rem 1.05rem;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.memory-manage-hide-btn:focus-visible[b-z7ya1o8r5t] {
background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
border-color: rgba(171, 120, 78, 0.4);
outline: 2px solid rgba(164, 123, 80, 0.32);
outline-offset: 2px;
box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}
.memory-manage-hide-btn:disabled[b-z7ya1o8r5t] {
opacity: 0.64;
cursor: not-allowed;
}
.memory-manage-spinner[b-z7ya1o8r5t] {
width: 0.9rem;
height: 0.9rem;
border-radius: 999px;
border: 2px solid rgba(94, 60, 44, 0.25);
border-top-color: rgba(94, 60, 44, 0.9);
animation: memory-manage-spin-b-z7ya1o8r5t 0.85s linear infinite;
}
@keyframes memory-manage-spin-b-z7ya1o8r5t {
to {
transform: rotate(360deg);
}
}
.memory-manage-hide-icon[b-z7ya1o8r5t] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
color: currentColor;
opacity: 0.82;
}
.memory-manage-hide-icon svg[b-z7ya1o8r5t] {
width: 1rem;
height: 1rem;
}
@media (hover: hover) {
.memory-manage-modal-close:hover[b-z7ya1o8r5t] {
background: rgba(164, 123, 80, 0.1);
color: #5C4033;
}
.memory-manage-hide-btn:hover:not(:disabled)[b-z7ya1o8r5t] {
background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
border-color: rgba(171, 120, 78, 0.4);
box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}
.memory-manage-linked-memory-btn:hover:not(:disabled)[b-z7ya1o8r5t] {
background: linear-gradient(145deg, #FDF2E7 0%, #F7E4D3 100%);
border-color: rgba(171, 120, 78, 0.4);
box-shadow: 0 8px 18px rgba(120, 88, 55, 0.12);
}
}
@media (max-width: 640px) {
.memory-manage-modal-overlay[b-z7ya1o8r5t] {
align-items: flex-end;
padding: 0;
}
.memory-manage-modal-content[b-z7ya1o8r5t] {
max-width: none;
max-height: 92vh;
border-radius: 18px 18px 0 0;
border-bottom: 0;
}
.memory-manage-modal-header[b-z7ya1o8r5t] {
padding: 0.8rem 0.95rem 0;
}
.memory-manage-modal-body[b-z7ya1o8r5t] {
padding: 0 1rem 0.95rem;
}
.memory-manage-modal-footer[b-z7ya1o8r5t] {
padding: 0.85rem 1rem 1rem;
}
.memory-manage-hide-btn[b-z7ya1o8r5t] {
width: 100%;
}
.memory-manage-ai-enable-btn[b-z7ya1o8r5t],
.memory-manage-ai-disable-btn[b-z7ya1o8r5t] {
width: 100%;
}
.memory-manage-linked-memory-btn[b-z7ya1o8r5t] {
width: 100%;
}
}
body.night-mode .memory-manage-modal-content[b-z7ya1o8r5t] {
background:
radial-gradient(circle at 50% 0%, rgba(161, 124, 84, 0.2), transparent 50%),
linear-gradient(180deg, #2B3740 0%, #232E35 100%);
border-color: rgba(196, 154, 108, 0.22);
}
body.night-mode .memory-manage-modal-title[b-z7ya1o8r5t],
body.night-mode .memory-manage-content[b-z7ya1o8r5t] {
color: #E8F4F8;
}
body.night-mode .memory-manage-card[b-z7ya1o8r5t] {
background: rgba(34, 46, 53, 0.85);
border-color: rgba(196, 154, 108, 0.16);
}
body.night-mode .memory-manage-author[b-z7ya1o8r5t],
body.night-mode .memory-manage-relation[b-z7ya1o8r5t],
body.night-mode .memory-manage-date[b-z7ya1o8r5t],
body.night-mode .memory-manage-footnote[b-z7ya1o8r5t] {
color: #CABFB5;
}
body.night-mode .memory-manage-error[b-z7ya1o8r5t] {
color: #F2D7C4;
background: rgba(120, 74, 56, 0.35);
border-color: rgba(228, 182, 154, 0.25);
}
body.night-mode .memory-manage-ai-section[b-z7ya1o8r5t] {
background: rgba(34, 46, 53, 0.84);
border-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .memory-manage-ai-title[b-z7ya1o8r5t],
body.night-mode .memory-manage-ai-note[b-z7ya1o8r5t],
body.night-mode .memory-manage-ai-help[b-z7ya1o8r5t] {
color: #CABFB5;
}
body.night-mode .memory-manage-ai-toggle-copy[b-z7ya1o8r5t] {
color: #E8F4F8;
}
body.night-mode .memory-manage-ai-enable-btn[b-z7ya1o8r5t] {
background: linear-gradient(145deg, rgba(120, 92, 56, 0.84) 0%, rgba(96, 74, 47, 0.94) 100%);
color: #F9E8CC;
border-color: rgba(230, 198, 152, 0.28);
}
body.night-mode .memory-manage-ai-enable-btn:focus-visible[b-z7ya1o8r5t] {
outline-color: rgba(230, 198, 152, 0.36);
}
body.night-mode .memory-manage-ai-disable-btn[b-z7ya1o8r5t] {
color: #E7B9AD;
}
body.night-mode .memory-manage-linked-memory-btn[b-z7ya1o8r5t] {
background: rgba(34, 46, 53, 0.86);
color: #F9E8CC;
border-color: rgba(230, 198, 152, 0.28);
}
body.night-mode .memory-manage-linked-memory-btn:focus-visible[b-z7ya1o8r5t] {
outline-color: rgba(230, 198, 152, 0.36);
}
body.night-mode .memory-manage-success[b-z7ya1o8r5t] {
color: #D8E9CC;
background: rgba(74, 106, 64, 0.36);
border-color: rgba(164, 204, 136, 0.3);
}
body.night-mode .memory-manage-hide-btn[b-z7ya1o8r5t] {
background: linear-gradient(145deg, rgba(120, 92, 56, 0.84) 0%, rgba(96, 74, 47, 0.94) 100%);
color: #F9E8CC;
border-color: rgba(230, 198, 152, 0.28);
}
body.night-mode .memory-manage-hide-btn:focus-visible[b-z7ya1o8r5t] {
outline-color: rgba(230, 198, 152, 0.36);
}
/* /Components/MemorialReportModal.razor.rz.scp.css */
.memorial-report-overlay[b-k7lh1oke8u] {
position: fixed;
inset: 0;
z-index: 5200;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(35, 25, 18, 0.62);
backdrop-filter: blur(7px);
}
.memorial-report-modal[b-k7lh1oke8u] {
width: min(100%, 460px);
max-height: min(90vh, 720px);
overflow: auto;
border: 1px solid rgba(232, 213, 200, 0.58);
border-radius: 18px;
background: linear-gradient(135deg, #FFFBF5, #FFF4E4);
box-shadow: 0 18px 48px rgba(92, 64, 51, 0.22);
color: #3A3228;
}
.memorial-report-header[b-k7lh1oke8u] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
padding: 1.45rem 1.6rem 0.9rem;
}
.memorial-report-kicker[b-k7lh1oke8u] {
margin: 0 0 0.2rem;
color: #A89880;
font-family: var(--font-serif);
font-size: 0.82rem;
font-style: italic;
}
.memorial-report-header h2[b-k7lh1oke8u] {
margin: 0;
color: #3A3228;
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 650;
line-height: 1.2;
}
.memorial-report-close[b-k7lh1oke8u] {
border: none;
background: transparent;
color: #8B7355;
cursor: pointer;
font-size: 1.55rem;
line-height: 1;
padding: 0.1rem 0.25rem;
}
.memorial-report-close:hover[b-k7lh1oke8u] {
color: #5C4033;
}
.memorial-report-body[b-k7lh1oke8u] {
display: grid;
gap: 1rem;
padding: 0 1.6rem 1.2rem;
}
.memorial-report-intro[b-k7lh1oke8u] {
margin: 0;
color: #6B5B4E;
font-family: var(--font-sans);
font-size: 0.9rem;
line-height: 1.5;
}
.memorial-report-field[b-k7lh1oke8u] {
display: grid;
gap: 0.4rem;
color: #5C4033;
font-family: var(--font-sans);
font-size: 0.84rem;
font-weight: 650;
}
.memorial-report-select[b-k7lh1oke8u],
.memorial-report-input[b-k7lh1oke8u],
.memorial-report-textarea[b-k7lh1oke8u] {
width: 100%;
border: 1px solid rgba(196, 154, 108, 0.32);
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
color: #3A3228;
font: inherit;
font-weight: 400;
outline: none;
}
.memorial-report-select[b-k7lh1oke8u],
.memorial-report-input[b-k7lh1oke8u] {
min-height: 2.5rem;
padding: 0.55rem 0.7rem;
}
.memorial-report-textarea[b-k7lh1oke8u] {
min-height: 7.5rem;
resize: vertical;
padding: 0.7rem;
line-height: 1.5;
}
.memorial-report-select:focus[b-k7lh1oke8u],
.memorial-report-input:focus[b-k7lh1oke8u],
.memorial-report-textarea:focus[b-k7lh1oke8u] {
border-color: rgba(166, 123, 80, 0.62);
box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.14);
}
.memorial-report-error[b-k7lh1oke8u] {
margin: -0.2rem 0 0;
color: #8f3f2f;
font-family: var(--font-sans);
font-size: 0.84rem;
line-height: 1.4;
}
.memorial-report-footer[b-k7lh1oke8u] {
display: flex;
justify-content: flex-end;
gap: 0.7rem;
padding: 0 1.6rem 1.45rem;
}
.memorial-report-primary[b-k7lh1oke8u],
.memorial-report-secondary[b-k7lh1oke8u] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
border-radius: 999px;
padding: 0.62rem 1.1rem;
font-family: var(--font-sans);
font-size: 0.9rem;
cursor: pointer;
}
.memorial-report-primary[b-k7lh1oke8u] {
border: none;
background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
color: #fff;
}
.memorial-report-secondary[b-k7lh1oke8u] {
border: 1px solid rgba(164, 123, 80, 0.28);
background: transparent;
color: #6B5B4E;
}
.memorial-report-primary:disabled[b-k7lh1oke8u] {
cursor: not-allowed;
opacity: 0.54;
}
.memorial-report-secondary:hover[b-k7lh1oke8u],
.memorial-report-primary:hover:not(:disabled)[b-k7lh1oke8u] {
filter: brightness(0.98);
}
.memorial-report-spinner[b-k7lh1oke8u] {
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 999px;
animation: memorial-report-spin-b-k7lh1oke8u 0.7s linear infinite;
}
.memorial-report-success[b-k7lh1oke8u] {
display: grid;
justify-items: center;
gap: 0.8rem;
padding: 2.2rem 1.7rem 2.5rem;
text-align: center;
color: #5C4033;
font-family: var(--font-serif);
font-size: 1.02rem;
line-height: 1.45;
}
.memorial-report-success p[b-k7lh1oke8u] {
margin: 0;
}
.memorial-report-success-icon[b-k7lh1oke8u] {
display: grid;
place-items: center;
width: 2.4rem;
height: 2.4rem;
border-radius: 999px;
background: rgba(196, 154, 108, 0.14);
color: #8B6B48;
font-family: var(--font-sans);
font-weight: 700;
}
@keyframes memorial-report-spin-b-k7lh1oke8u {
to {
transform: rotate(360deg);
}
}
@media (max-width: 540px) {
.memorial-report-overlay[b-k7lh1oke8u] {
align-items: flex-end;
padding: 0;
}
.memorial-report-modal[b-k7lh1oke8u] {
width: 100%;
max-height: 92vh;
border-radius: 18px 18px 0 0;
}
.memorial-report-header[b-k7lh1oke8u],
.memorial-report-body[b-k7lh1oke8u],
.memorial-report-footer[b-k7lh1oke8u] {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.memorial-report-footer[b-k7lh1oke8u] {
flex-direction: column-reverse;
}
.memorial-report-primary[b-k7lh1oke8u],
.memorial-report-secondary[b-k7lh1oke8u] {
width: 100%;
}
}
/* /Components/MemorialRestingPlaceModal.razor.rz.scp.css */
.memorial-resting-modal-overlay[b-k1q26az1p0] {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(51, 40, 28, 0.32);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.memorial-resting-modal[b-k1q26az1p0] {
width: min(680px, 100%);
max-height: min(90vh, 780px);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FFF9EF 0%, #FAF0E2 100%);
border: 1px solid rgba(196, 154, 108, 0.28);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(74, 52, 32, 0.28);
overflow: hidden;
}
.memorial-resting-modal-header[b-k1q26az1p0] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 1.75rem 1rem;
border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}
.memorial-resting-modal-kicker[b-k1q26az1p0] {
margin: 0 0 0.35rem;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.94rem;
color: #9A7A55;
}
.memorial-resting-modal h2[b-k1q26az1p0] {
margin: 0;
font-family: var(--font-serif);
font-weight: 400;
color: #34281F;
font-size: clamp(1.55rem, 4vw, 2.15rem);
line-height: 1.12;
}
.memorial-resting-modal-close[b-k1q26az1p0] {
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(164, 123, 80, 0.22);
border-radius: 50%;
background: rgba(255, 251, 244, 0.72);
color: #6B5541;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.memorial-resting-modal-body[b-k1q26az1p0] {
padding: 1.25rem 1.75rem;
overflow-y: auto;
}
.memorial-resting-error[b-k1q26az1p0] {
margin-bottom: 1rem;
border: 1px solid rgba(164, 72, 55, 0.18);
border-radius: 12px;
background: rgba(255, 238, 232, 0.82);
padding: 0.8rem 1rem;
color: #8A3B2D;
font-family: var(--font-sans);
font-size: 0.92rem;
}
.memorial-resting-toggle[b-k1q26az1p0] {
display: flex;
align-items: flex-start;
gap: 0.8rem;
padding: 1rem;
border: 1px solid rgba(196, 154, 108, 0.22);
border-radius: 14px;
background: rgba(255, 252, 246, 0.68);
color: #4A3A2D;
font-family: var(--font-sans);
}
.memorial-resting-toggle input[b-k1q26az1p0] {
margin-top: 0.2rem;
}
.memorial-resting-toggle-title[b-k1q26az1p0] {
display: block;
font-weight: 600;
}
.memorial-resting-toggle-hint[b-k1q26az1p0] {
display: block;
margin-top: 0.2rem;
color: #806D5B;
font-size: 0.88rem;
line-height: 1.5;
}
.memorial-resting-grid[b-k1q26az1p0] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.1rem;
}
.memorial-resting-grid label[b-k1q26az1p0],
.memorial-resting-field[b-k1q26az1p0] {
display: flex;
flex-direction: column;
gap: 0.35rem;
color: #6B5541;
font-family: var(--font-sans);
font-size: 0.88rem;
}
.memorial-resting-field[b-k1q26az1p0] {
margin-top: 1rem;
}
.memorial-resting-grid input[b-k1q26az1p0],
.memorial-resting-field input[b-k1q26az1p0],
.memorial-resting-field textarea[b-k1q26az1p0] {
border: 1px solid rgba(196, 154, 108, 0.22);
border-radius: 12px;
background: rgba(255, 252, 246, 0.82);
padding: 0.78rem 0.9rem;
color: #3E332A;
font-family: var(--font-sans);
font-size: 0.95rem;
outline: none;
}
.memorial-resting-field textarea[b-k1q26az1p0] {
resize: vertical;
line-height: 1.55;
}
.memorial-resting-image-field[b-k1q26az1p0] {
margin-top: 1.1rem;
padding: 1rem;
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 14px;
background: rgba(255, 252, 246, 0.42);
}
.memorial-resting-image-copy[b-k1q26az1p0] {
display: flex;
flex-direction: column;
gap: 0.25rem;
color: #6B5541;
font-family: var(--font-sans);
font-size: 0.9rem;
}
.memorial-resting-image-copy small[b-k1q26az1p0] {
color: #806D5B;
font-size: 0.82rem;
}
.memorial-resting-image-dropzone[b-k1q26az1p0] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 8rem;
margin-top: 0.8rem;
border: 1px dashed rgba(164, 123, 80, 0.36);
border-radius: 14px;
background: rgba(255, 249, 239, 0.68);
color: #7B5B3E;
font-family: var(--font-sans);
cursor: pointer;
}
.memorial-resting-image-dropzone input[b-k1q26az1p0] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.memorial-resting-image-preview[b-k1q26az1p0] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: end;
margin-top: 0.8rem;
}
.memorial-resting-image-preview img[b-k1q26az1p0] {
width: 100%;
max-height: 220px;
display: block;
object-fit: cover;
border-radius: 14px;
}
.memorial-resting-image-preview button[b-k1q26az1p0] {
border: 1px solid rgba(164, 123, 80, 0.24);
border-radius: 999px;
background: rgba(255, 251, 244, 0.68);
padding: 0.65rem 0.95rem;
color: #6B4A34;
font-family: var(--font-sans);
cursor: pointer;
}
.memorial-resting-alt-field[b-k1q26az1p0] {
margin-top: 0.85rem;
}
.memorial-resting-grid input:focus[b-k1q26az1p0],
.memorial-resting-field input:focus[b-k1q26az1p0],
.memorial-resting-field textarea:focus[b-k1q26az1p0] {
border-color: rgba(164, 123, 80, 0.46);
box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.12);
}
.memorial-resting-modal-footer[b-k1q26az1p0] {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
padding: 1rem 1.75rem 1.4rem;
border-top: 1px solid rgba(196, 154, 108, 0.14);
}
.memorial-resting-secondary[b-k1q26az1p0],
.memorial-resting-primary[b-k1q26az1p0] {
border-radius: 999px;
padding: 0.72rem 1.25rem;
font-family: var(--font-sans);
font-size: 0.93rem;
cursor: pointer;
}
.memorial-resting-secondary[b-k1q26az1p0] {
border: 1px solid rgba(164, 123, 80, 0.24);
background: transparent;
color: #6B5541;
}
.memorial-resting-primary[b-k1q26az1p0] {
border: 1px solid rgba(164, 123, 80, 0.26);
background: linear-gradient(145deg, #F8E5C8 0%, #EBCFA5 100%);
color: #4A3426;
box-shadow: 0 8px 20px rgba(164, 123, 80, 0.14);
}
.memorial-resting-primary:disabled[b-k1q26az1p0] {
opacity: 0.64;
cursor: wait;
}
@media (max-width: 640px) {
.memorial-resting-modal-overlay[b-k1q26az1p0] {
align-items: stretch;
padding: 0;
}
.memorial-resting-modal[b-k1q26az1p0] {
max-height: none;
min-height: 100dvh;
border-radius: 0;
}
.memorial-resting-modal-header[b-k1q26az1p0],
.memorial-resting-modal-body[b-k1q26az1p0],
.memorial-resting-modal-footer[b-k1q26az1p0] {
padding-left: 1.15rem;
padding-right: 1.15rem;
}
.memorial-resting-grid[b-k1q26az1p0] {
grid-template-columns: 1fr;
}
.memorial-resting-image-preview[b-k1q26az1p0] {
grid-template-columns: 1fr;
}
}
/* /Components/MemorialServiceModal.razor.rz.scp.css */
.memorial-service-modal-overlay[b-nn28mxoq7a] {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(51, 40, 28, 0.32);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.memorial-service-modal[b-nn28mxoq7a] {
width: min(860px, 100%);
max-height: min(92vh, 860px);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(196, 154, 108, 0.28);
border-radius: 18px;
background: linear-gradient(180deg, #FFF9EF 0%, #FAF0E2 100%);
box-shadow: 0 24px 80px rgba(74, 52, 32, 0.28);
}
.memorial-service-modal-header[b-nn28mxoq7a] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 1.75rem 1rem;
border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}
.memorial-service-modal-kicker[b-nn28mxoq7a] {
margin: 0 0 0.35rem;
color: #9A7A55;
font-family: var(--font-serif);
font-size: 0.94rem;
font-style: italic;
}
.memorial-service-modal h2[b-nn28mxoq7a] {
margin: 0;
color: #34281F;
font-family: var(--font-serif);
font-size: clamp(1.65rem, 4vw, 2.35rem);
font-weight: 400;
line-height: 1.12;
}
.memorial-service-modal-close[b-nn28mxoq7a] {
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(164, 123, 80, 0.22);
border-radius: 50%;
background: rgba(255, 251, 244, 0.72);
color: #6B5541;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.memorial-service-modal-body[b-nn28mxoq7a] {
padding: 1.25rem 1.75rem;
overflow-y: auto;
}
.memorial-service-error[b-nn28mxoq7a] {
margin-bottom: 1rem;
border: 1px solid rgba(164, 72, 55, 0.18);
border-radius: 12px;
background: rgba(255, 238, 232, 0.82);
padding: 0.8rem 1rem;
color: #8A3B2D;
font-family: var(--font-sans);
font-size: 0.92rem;
}
.memorial-service-toggle[b-nn28mxoq7a] {
display: flex;
align-items: flex-start;
gap: 0.8rem;
padding: 1rem;
border: 1px solid rgba(196, 154, 108, 0.22);
border-radius: 14px;
background: rgba(255, 252, 246, 0.68);
color: #4A3A2D;
font-family: var(--font-sans);
}
.memorial-service-toggle input[b-nn28mxoq7a] {
margin-top: 0.2rem;
}
.memorial-service-toggle-title[b-nn28mxoq7a] {
display: block;
font-weight: 600;
}
.memorial-service-toggle-hint[b-nn28mxoq7a] {
display: block;
margin-top: 0.2rem;
color: #806D5B;
font-size: 0.88rem;
line-height: 1.5;
}
.memorial-service-grid[b-nn28mxoq7a] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
margin-top: 1.1rem;
}
.memorial-service-grid label[b-nn28mxoq7a],
.memorial-service-field[b-nn28mxoq7a] {
display: flex;
flex-direction: column;
gap: 0.35rem;
color: #6B5541;
font-family: var(--font-sans);
font-size: 0.88rem;
}
.memorial-service-field[b-nn28mxoq7a] {
margin-top: 1rem;
}
.memorial-service-grid input[b-nn28mxoq7a],
.memorial-service-grid select[b-nn28mxoq7a],
.memorial-service-field input[b-nn28mxoq7a],
.memorial-service-field textarea[b-nn28mxoq7a],
.memorial-service-program-row input[b-nn28mxoq7a],
.memorial-service-program-row select[b-nn28mxoq7a],
.memorial-service-program-document-fields input[b-nn28mxoq7a],
.memorial-service-program-document-fields textarea[b-nn28mxoq7a] {
border: 1px solid rgba(196, 154, 108, 0.22);
border-radius: 12px;
background: rgba(255, 252, 246, 0.82);
padding: 0.78rem 0.9rem;
color: #3E332A;
font-family: var(--font-sans);
font-size: 0.95rem;
outline: none;
}
.memorial-service-field textarea[b-nn28mxoq7a] {
resize: vertical;
line-height: 1.55;
}
.memorial-service-program-document-fields textarea[b-nn28mxoq7a] {
min-height: 12rem;
resize: vertical;
line-height: 1.62;
}
.memorial-service-grid input:focus[b-nn28mxoq7a],
.memorial-service-grid select:focus[b-nn28mxoq7a],
.memorial-service-field input:focus[b-nn28mxoq7a],
.memorial-service-field textarea:focus[b-nn28mxoq7a],
.memorial-service-program-row input:focus[b-nn28mxoq7a],
.memorial-service-program-row select:focus[b-nn28mxoq7a],
.memorial-service-program-document-fields input:focus[b-nn28mxoq7a],
.memorial-service-program-document-fields textarea:focus[b-nn28mxoq7a] {
border-color: rgba(164, 123, 80, 0.46);
box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.12);
}
.memorial-service-image-field[b-nn28mxoq7a] {
margin-top: 1.1rem;
padding: 1rem;
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 14px;
background: rgba(255, 252, 246, 0.42);
}
.memorial-service-image-copy[b-nn28mxoq7a] {
display: flex;
flex-direction: column;
gap: 0.25rem;
color: #6B5541;
font-family: var(--font-sans);
font-size: 0.9rem;
}
.memorial-service-image-copy small[b-nn28mxoq7a] {
color: #806D5B;
font-size: 0.82rem;
}
.memorial-service-image-dropzone[b-nn28mxoq7a] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 9rem;
margin-top: 0.8rem;
border: 1px dashed rgba(164, 123, 80, 0.36);
border-radius: 14px;
background: rgba(255, 249, 239, 0.68);
color: #7B5B3E;
font-family: var(--font-sans);
cursor: pointer;
}
.memorial-service-image-dropzone input[b-nn28mxoq7a] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.memorial-service-image-preview[b-nn28mxoq7a] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 0.85rem;
align-items: end;
margin-top: 0.8rem;
}
.memorial-service-image-preview img[b-nn28mxoq7a] {
width: 100%;
max-height: 240px;
display: block;
object-fit: cover;
border-radius: 14px;
}
.memorial-service-image-preview button[b-nn28mxoq7a],
.memorial-service-program-header button[b-nn28mxoq7a],
.memorial-service-program-remove[b-nn28mxoq7a],
.memorial-service-program-document-toggle[b-nn28mxoq7a] {
border: 1px solid rgba(164, 123, 80, 0.24);
border-radius: 999px;
background: rgba(255, 251, 244, 0.68);
color: #6B4A34;
font-family: var(--font-sans);
cursor: pointer;
}
.memorial-service-image-preview button[b-nn28mxoq7a] {
padding: 0.65rem 0.95rem;
}
.memorial-service-alt-field[b-nn28mxoq7a] {
margin-top: 0.85rem;
}
.memorial-service-program-editor[b-nn28mxoq7a] {
margin-top: 1.15rem;
padding: 1rem;
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 14px;
background: rgba(255, 252, 246, 0.42);
}
.memorial-service-program-header[b-nn28mxoq7a] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: #6B5541;
font-family: var(--font-sans);
font-size: 0.9rem;
}
.memorial-service-program-header button[b-nn28mxoq7a] {
padding: 0.48rem 0.85rem;
}
.memorial-service-program-empty[b-nn28mxoq7a] {
margin: 0.8rem 0 0;
color: #806D5B;
font-family: var(--font-serif);
font-size: 0.95rem;
font-style: italic;
}
.memorial-service-program-row[b-nn28mxoq7a] {
display: grid;
grid-template-columns: 9.5rem minmax(0, 1fr) 2.4rem;
gap: 0.7rem;
margin-top: 0.8rem;
}
.memorial-service-program-remove[b-nn28mxoq7a] {
min-width: 2.4rem;
min-height: 2.4rem;
font-size: 1.2rem;
line-height: 1;
}
.memorial-service-program-document[b-nn28mxoq7a] {
margin: 0.55rem 0 0 10.2rem;
}
.memorial-service-program-document-toggle[b-nn28mxoq7a] {
padding: 0.42rem 0.8rem;
font-size: 0.82rem;
}
.memorial-service-program-document-fields[b-nn28mxoq7a] {
display: grid;
gap: 0.8rem;
margin-top: 0.75rem;
padding: 0.95rem;
border: 1px solid rgba(196, 154, 108, 0.16);
border-radius: 14px;
background: rgba(255, 249, 239, 0.46);
}
.memorial-service-program-document-fields label[b-nn28mxoq7a] {
display: flex;
flex-direction: column;
gap: 0.35rem;
color: #6B5541;
font-family: var(--font-sans);
font-size: 0.86rem;
}
.memorial-service-modal-footer[b-nn28mxoq7a] {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
padding: 1rem 1.75rem 1.4rem;
border-top: 1px solid rgba(196, 154, 108, 0.14);
}
.memorial-service-secondary[b-nn28mxoq7a],
.memorial-service-primary[b-nn28mxoq7a] {
border-radius: 999px;
padding: 0.72rem 1.25rem;
font-family: var(--font-sans);
font-size: 0.93rem;
cursor: pointer;
}
.memorial-service-secondary[b-nn28mxoq7a] {
border: 1px solid rgba(164, 123, 80, 0.24);
background: transparent;
color: #6B5541;
}
.memorial-service-primary[b-nn28mxoq7a] {
border: 1px solid rgba(164, 123, 80, 0.26);
background: linear-gradient(145deg, #F8E5C8 0%, #EBCFA5 100%);
color: #4A3426;
box-shadow: 0 8px 20px rgba(164, 123, 80, 0.14);
}
.memorial-service-primary:disabled[b-nn28mxoq7a] {
opacity: 0.64;
cursor: wait;
}
@media (max-width: 640px) {
.memorial-service-modal-overlay[b-nn28mxoq7a] {
align-items: stretch;
padding: 0;
}
.memorial-service-modal[b-nn28mxoq7a] {
max-height: none;
min-height: 100dvh;
border-radius: 0;
}
.memorial-service-modal-header[b-nn28mxoq7a],
.memorial-service-modal-body[b-nn28mxoq7a],
.memorial-service-modal-footer[b-nn28mxoq7a] {
padding-left: 1.15rem;
padding-right: 1.15rem;
}
.memorial-service-grid[b-nn28mxoq7a],
.memorial-service-image-preview[b-nn28mxoq7a],
.memorial-service-program-row[b-nn28mxoq7a] {
grid-template-columns: 1fr;
}
.memorial-service-program-document[b-nn28mxoq7a] {
margin-left: 0;
}
.memorial-service-modal-footer[b-nn28mxoq7a] {
padding-bottom: calc(1.2rem + env(safe-area-inset-bottom));
}
}
/* /Components/MemorialSettingsModal.razor.rz.scp.css */
/* MemorialSettingsModal.razor.css */
.settings-modal-overlay[b-70akwifjd4] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(35, 25, 18, 0.72);
backdrop-filter: blur(8px);
display: flex;
justify-content: center;
align-items: center;
z-index: 2100;
padding: 1rem;
}
.settings-modal-content[b-70akwifjd4] {
background: linear-gradient(135deg, #FFFBF5, #FFF4E4);
border-radius: 20px;
width: 100%;
max-width: 520px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 12px 48px rgba(139, 115, 85, 0.25);
border: 1px solid rgba(232, 213, 200, 0.4);
}
.settings-modal-header[b-70akwifjd4] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem 0;
}
.settings-title[b-70akwifjd4] {
font-family: var(--font-serif);
font-size: 1.3rem;
color: #3A3228;
margin: 0;
}
.settings-modal-close[b-70akwifjd4] {
background: none;
border: none;
font-size: 1.5rem;
color: #8B7355;
cursor: pointer;
padding: 0.25rem 0.5rem;
line-height: 1;
}
.settings-modal-close:hover[b-70akwifjd4] {
color: #5C4033;
}
.settings-modal-body[b-70akwifjd4] {
padding: 1.5rem 2rem;
}
.settings-locked-banner[b-70akwifjd4] {
display: grid;
gap: 0.25rem;
background: rgba(255, 244, 228, 0.78);
border: 1px solid rgba(196, 154, 108, 0.45);
border-radius: 12px;
padding: 0.8rem 0.95rem;
margin: 0 0 1rem;
font-family: var(--font-sans);
font-size: 0.84rem;
line-height: 1.45;
color: #6B5B4E;
}
.settings-locked-title[b-70akwifjd4] {
font-weight: 700;
color: #5C4033;
}
.settings-locked-link[b-70akwifjd4] {
width: fit-content;
margin-top: 0.2rem;
color: #8F6136;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 3px;
}
.settings-locked-link:hover[b-70akwifjd4] {
color: #5C4033;
}
.settings-error-banner[b-70akwifjd4] {
background: #FFF0F0;
border: 1px solid #f5c6c6;
border-radius: 8px;
padding: 0.6rem 1rem;
margin: 0 0 1rem;
font-family: var(--font-sans);
font-size: 0.85rem;
color: #a94442;
}
.settings-section[b-70akwifjd4] {
margin-bottom: 1.2rem;
}
.settings-label[b-70akwifjd4] {
display: block;
font-family: var(--font-sans);
font-size: 0.85rem;
font-weight: 600;
color: #5C4033;
margin-bottom: 0.4rem;
}
.settings-link-container[b-70akwifjd4] {
display: flex;
gap: 0.5rem;
}
.settings-link-input[b-70akwifjd4] {
flex: 1;
padding: 0.55rem 0.8rem;
border: 1px solid rgba(232, 213, 200, 0.6);
border-radius: 10px;
font-family: var(--font-sans);
font-size: 0.85rem;
color: #6B5B4E;
background: rgba(255, 255, 255, 0.7);
outline: none;
min-width: 0;
}
.settings-copy-btn[b-70akwifjd4] {
background: transparent;
border: 1px solid rgba(164, 123, 80, 0.3);
border-radius: 10px;
padding: 0.55rem 1rem;
font-family: var(--font-sans);
font-size: 0.85rem;
color: #A67B50;
cursor: pointer;
white-space: nowrap;
transition: all 0.2s;
}
.settings-copy-btn:hover[b-70akwifjd4] {
background: rgba(164, 123, 80, 0.08);
}
.settings-copy-btn:disabled[b-70akwifjd4] {
opacity: 0.45;
cursor: not-allowed;
}
.settings-copy-btn:disabled:hover[b-70akwifjd4] {
background: transparent;
}
.settings-copy-feedback[b-70akwifjd4] {
color: #2f7a4d;
font-weight: 600;
}
.settings-generate-btn[b-70akwifjd4] {
background: transparent;
border: 1px solid rgba(164, 123, 80, 0.3);
border-radius: 24px;
padding: 0.6rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #A67B50;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s;
}
.settings-generate-btn:hover:not(:disabled)[b-70akwifjd4] {
background: rgba(164, 123, 80, 0.08);
}
.settings-generate-btn:disabled[b-70akwifjd4] {
opacity: 0.5;
cursor: not-allowed;
}
.settings-link-input:disabled[b-70akwifjd4] {
color: rgba(107, 91, 78, 0.62);
background: rgba(255, 255, 255, 0.42);
}
/* Toggle Labels */
.settings-toggle-label[b-70akwifjd4] {
display: flex;
align-items: flex-start;
gap: 0.6rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #3A3228;
cursor: pointer;
line-height: 1.4;
}
.settings-toggle-title[b-70akwifjd4] {
display: block;
}
.settings-toggle-hint[b-70akwifjd4] {
display: block;
margin-top: 0.28rem;
font-size: 0.82rem;
color: #8B7355;
}
.settings-toggle-label input[type="checkbox"][b-70akwifjd4] {
accent-color: #C49A6C;
width: 18px;
height: 18px;
margin-top: 2px;
flex-shrink: 0;
}
.settings-toggle-label:has(input:disabled)[b-70akwifjd4] {
cursor: not-allowed;
color: rgba(58, 50, 40, 0.55);
}
.settings-toggle-label input[type="checkbox"]:disabled[b-70akwifjd4] {
cursor: not-allowed;
opacity: 0.55;
}
.settings-toggle-label:has(input:disabled) .settings-toggle-hint[b-70akwifjd4] {
color: rgba(139, 115, 85, 0.62);
}
.settings-responsibility-panel[b-70akwifjd4] {
display: grid;
gap: 0.45rem;
margin: 0.75rem 0 0.15rem;
padding: 0.9rem 1rem;
border: 1px solid rgba(196, 154, 108, 0.36);
border-radius: 12px;
background: rgba(255, 244, 228, 0.82);
color: #6B5B4E;
font-family: var(--font-sans);
font-size: 0.84rem;
line-height: 1.45;
}
.settings-responsibility-title[b-70akwifjd4] {
font-weight: 700;
color: #5C4033;
}
.settings-responsibility-check[b-70akwifjd4] {
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.2rem;
color: #4A3D35;
cursor: pointer;
}
.settings-responsibility-check input[type="checkbox"][b-70akwifjd4] {
accent-color: #C49A6C;
width: 16px;
height: 16px;
margin-top: 2px;
flex-shrink: 0;
}
/* Footer */
.settings-modal-footer[b-70akwifjd4] {
padding: 0 2rem 1.5rem;
}
.settings-footer-actions[b-70akwifjd4] {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
}
.settings-btn-primary[b-70akwifjd4] {
background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
color: white;
border: none;
border-radius: 24px;
padding: 0.65rem 1.3rem;
font-family: var(--font-sans);
font-size: 0.95rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4rem;
transition: opacity 0.2s;
text-decoration: none;
}
.settings-btn-primary:hover:not(:disabled)[b-70akwifjd4] {
opacity: 0.9;
}
.settings-btn-primary:disabled[b-70akwifjd4] {
opacity: 0.5;
cursor: not-allowed;
}
.settings-btn-link[b-70akwifjd4] {
min-height: 42px;
justify-content: center;
}
.settings-btn-close[b-70akwifjd4] {
background: transparent;
border: 1px solid rgba(164, 123, 80, 0.3);
border-radius: 24px;
padding: 0.65rem 1.3rem;
font-family: var(--font-sans);
font-size: 0.95rem;
color: #6B5B4E;
cursor: pointer;
transition: all 0.2s;
}
.settings-btn-close:hover[b-70akwifjd4] {
background: rgba(164, 123, 80, 0.08);
}
.settings-spinner[b-70akwifjd4] {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin-b-70akwifjd4 0.7s linear infinite;
}
.settings-generate-btn .settings-spinner[b-70akwifjd4] {
border-color: rgba(166, 123, 80, 0.3);
border-top-color: #A67B50;
}
@keyframes spin-b-70akwifjd4 {
to { transform: rotate(360deg); }
}
@media (max-width: 540px) {
.settings-modal-overlay[b-70akwifjd4] {
align-items: stretch;
padding: 0;
}
.settings-modal-content[b-70akwifjd4] {
border-radius: 0;
max-height: 100vh;
height: 100vh;
max-width: 100%;
display: flex;
flex-direction: column;
}
.settings-modal-header[b-70akwifjd4] {
padding: 1.25rem 1.5rem 0;
}
.settings-modal-body[b-70akwifjd4] {
flex: 1;
overflow-y: auto;
padding: 1.25rem 1.5rem;
}
/* Generous toggle rows — native settings feel */
.settings-section[b-70akwifjd4] {
margin-bottom: 0;
}
.settings-toggle-label[b-70akwifjd4] {
font-size: 1rem;
gap: 0.85rem;
padding: 1.1rem 0;
border-bottom: 1px solid rgba(232, 213, 200, 0.35);
}
.settings-toggle-label input[type="checkbox"][b-70akwifjd4] {
width: 22px;
height: 22px;
margin-top: 1px;
}
.settings-toggle-hint[b-70akwifjd4] {
font-size: 0.88rem;
}
.settings-responsibility-panel[b-70akwifjd4] {
margin: 0.2rem 0 1rem;
}
.settings-modal-footer[b-70akwifjd4] {
flex-shrink: 0;
padding: 1rem 1.5rem 1.5rem;
}
}
/* /Components/MemorialTapestry.razor.rz.scp.css */
/* ============================================================
MemorialTapestry.razor.css
"This is art, not an org chart"
A radial constellation — the LovedOne is the sun at center,
family members orbit at specific positions connected by
organic golden bezier curves.
============================================================ */
/* === Section Container === */
.tapestry[b-s8j9ymyogz] {
position: relative;
padding: 3rem 1.5rem 3.5rem;
max-width: 940px;
margin: 0 auto;
overflow: hidden;
}
/* Linen texture — subtle noise via radial-gradient dots */
.tapestry-linen[b-s8j9ymyogz] {
position: absolute;
inset: 0;
pointer-events: none;
opacity: 0.35;
background-image:
radial-gradient(ellipse 1px 1px at 20% 30%, rgba(160, 130, 100, 0.25) 0%, transparent 100%),
radial-gradient(ellipse 1px 1px at 70% 60%, rgba(140, 115, 85, 0.2) 0%, transparent 100%),
radial-gradient(ellipse 1px 1px at 45% 80%, rgba(170, 140, 110, 0.18) 0%, transparent 100%),
radial-gradient(ellipse 1.5px 1px at 90% 15%, rgba(150, 125, 95, 0.22) 0%, transparent 100%),
radial-gradient(ellipse 1px 1.5px at 10% 70%, rgba(165, 135, 105, 0.2) 0%, transparent 100%);
background-size: 120px 100px, 90px 130px, 150px 80px, 110px 140px, 130px 110px;
}
/* === Header === */
.tapestry-header[b-s8j9ymyogz] {
text-align: center;
/* margin-bottom: 3rem; */
position: relative;
}
.tapestry-header-line[b-s8j9ymyogz] {
width: 80px;
height: 1px;
margin: 0 auto;
background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.5), transparent);
}
.tapestry-title[b-s8j9ymyogz] {
font-family: var(--font-serif);
font-style: normal;
font-weight: 500;
font-size: 2rem;
color: #3A3228;
margin: 0.75rem 0 0.35rem;
letter-spacing: 0;
}
.tapestry-subtitle[b-s8j9ymyogz] {
font-family: var(--font-serif);
font-style: normal;
font-weight: 350;
font-size: 0.95rem;
color: #8B7355;
margin: 0 0 0.75rem;
letter-spacing: 0;
}
/* === Desktop Canvas — Radial Constellation === */
.tapestry-canvas[b-s8j9ymyogz] {
position: relative;
width: 100%;
min-height: 480px;
max-width: 940px;
margin: 0 auto;
}
.tapestry-mobile[b-s8j9ymyogz] {
display: none;
}
.tapestry-mobile-header-action[b-s8j9ymyogz] {
display: none;
}
/* Central LovedOne — absolute center of the constellation, top set via inline style */
.tapestry-center[b-s8j9ymyogz] {
position: absolute;
left: 50%;
transform: translate(-50%, -55px);
z-index: 3;
}
/* Orbit nodes — positioned absolutely via inline style */
.tapestry-orbit-node[b-s8j9ymyogz] {
position: absolute;
transform: translate(-50%, -36px);
z-index: 3;
}
.tapestry-orbit-node--actions-open[b-s8j9ymyogz] {
z-index: 26;
}
/* SVG threads overlay — bezier curves from center to each member */
.tapestry-threads[b-s8j9ymyogz] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.tapestry-thread-curve[b-s8j9ymyogz] {
position: relative;
fill: none;
stroke-width: 0.7;
opacity: 0.5;
stroke-linecap: round;
}
/* === Node (each family member) === */
.tapestry-node[b-s8j9ymyogz] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.35rem;
min-width: 80px;
max-width: 120px;
position: relative;
}
.tapestry-node--central[b-s8j9ymyogz] {
max-width: 150px;
}
.tapestry-mobile-member[b-s8j9ymyogz] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
position: relative;
}
.tapestry-actions-trigger[b-s8j9ymyogz] {
position: absolute;
top: -0.25rem;
left: 0.05rem;
width: 32px;
height: 32px;
border: 1px solid rgba(196, 154, 108, 0.2);
border-radius: 999px;
background: rgba(253, 248, 240, 0.88);
color: #7F6A59;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
touch-action: manipulation;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
box-shadow: 0 6px 14px rgba(92, 66, 45, 0.08);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
z-index: 6;
}
.tapestry-actions-trigger:hover[b-s8j9ymyogz],
.tapestry-actions-trigger:focus-visible[b-s8j9ymyogz] {
background: rgba(249, 240, 227, 0.97);
border-color: rgba(196, 154, 108, 0.34);
color: #5F4B3E;
transform: translateY(-1px);
box-shadow: 0 10px 18px rgba(92, 66, 45, 0.12);
outline: none;
}
.tapestry-actions-trigger-dots[b-s8j9ymyogz] {
font-size: 1rem;
line-height: 1;
transform: translateY(-1px);
}
.tapestry-node-actions-menu[b-s8j9ymyogz] {
position: absolute;
top: 2rem;
left: 0.1rem;
min-width: 172px;
padding: 0.32rem;
background: linear-gradient(180deg, rgba(253, 248, 240, 0.99) 0%, rgba(248, 239, 226, 0.98) 100%);
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 16px;
box-shadow: 0 14px 28px rgba(60, 41, 30, 0.14);
z-index: 20;
}
.tapestry-node-actions-menu[b-s8j9ymyogz]::before {
content: "";
position: absolute;
top: -7px;
left: 13px;
width: 12px;
height: 12px;
background: inherit;
border-top: 1px solid rgba(196, 154, 108, 0.18);
border-left: 1px solid rgba(196, 154, 108, 0.18);
transform: rotate(45deg);
}
.tapestry-node-action-item[b-s8j9ymyogz] {
width: 100%;
display: block;
padding: 0.68rem 0.84rem;
border: none;
border-radius: 12px;
background: transparent;
color: #5B493D;
font-family: var(--font-sans);
font-size: 0.82rem;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.tapestry-node-action-item:hover[b-s8j9ymyogz],
.tapestry-node-action-item:focus-visible[b-s8j9ymyogz] {
background: rgba(214, 188, 157, 0.18);
color: #46362C;
outline: none;
}
.tapestry-actions-backdrop[b-s8j9ymyogz] {
position: fixed;
inset: 0;
background: transparent;
z-index: 18;
}
.tapestry-action-sheet[b-s8j9ymyogz] {
display: none;
}
.tapestry-action-sheet-header[b-s8j9ymyogz] {
padding: 0.85rem 1.15rem 0.55rem;
border-bottom: 1px solid rgba(196, 154, 108, 0.14);
}
.tapestry-action-sheet-title[b-s8j9ymyogz] {
display: block;
font-family: var(--font-serif);
font-size: 1.02rem;
color: #4B352B;
line-height: 1.2;
}
.tapestry-action-sheet-item[b-s8j9ymyogz],
.tapestry-action-sheet-dismiss[b-s8j9ymyogz] {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0.82rem 1.15rem;
color: #4B352B;
font-family: var(--font-sans);
font-size: 0.94rem;
text-align: left;
text-decoration: none;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.tapestry-action-sheet-item:hover[b-s8j9ymyogz],
.tapestry-action-sheet-item:focus-visible[b-s8j9ymyogz],
.tapestry-action-sheet-dismiss:hover[b-s8j9ymyogz],
.tapestry-action-sheet-dismiss:focus-visible[b-s8j9ymyogz] {
background: rgba(214, 188, 157, 0.16);
outline: none;
}
.tapestry-action-sheet-dismiss[b-s8j9ymyogz] {
justify-content: center;
border-top: 1px solid rgba(196, 154, 108, 0.14);
color: #7A6657;
}
@keyframes tapestryActionSheetRise-b-s8j9ymyogz {
from {
opacity: 0;
transform: translate(-50%, 18px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
:global(body.night-mode) .tapestry-actions-trigger[b-s8j9ymyogz] {
background: rgba(42, 34, 29, 0.92);
border-color: rgba(196, 154, 108, 0.2);
color: #D8CCBE;
box-shadow: 0 8px 18px rgba(6, 4, 3, 0.28);
}
:global(body.night-mode) .tapestry-actions-trigger:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-actions-trigger:focus-visible[b-s8j9ymyogz] {
background: rgba(53, 43, 36, 0.98);
color: #F0E4D6;
}
:global(body.night-mode) .tapestry-node-actions-menu[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet[b-s8j9ymyogz] {
background: linear-gradient(180deg, rgba(35, 29, 25, 0.98) 0%, rgba(29, 24, 21, 0.98) 100%);
border-color: rgba(196, 154, 108, 0.18);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.34);
}
:global(body.night-mode) .tapestry-node-actions-menu[b-s8j9ymyogz]::before {
border-top-color: rgba(196, 154, 108, 0.18);
border-left-color: rgba(196, 154, 108, 0.18);
}
:global(body.night-mode) .tapestry-node-action-item[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-item[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-dismiss[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-title[b-s8j9ymyogz] {
color: #E6DBCF;
}
:global(body.night-mode) .tapestry-node-action-item:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-node-action-item:focus-visible[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-item:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-item:focus-visible[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-dismiss:hover[b-s8j9ymyogz],
:global(body.night-mode) .tapestry-action-sheet-dismiss:focus-visible[b-s8j9ymyogz] {
background: rgba(196, 154, 108, 0.14);
}
/* === Portrait === */
.tapestry-portrait[b-s8j9ymyogz] {
width: 72px;
height: 72px;
border-radius: 50%;
overflow: visible;
position: relative;
border: 1.5px solid rgba(212, 165, 116, 0.4);
transition: all 0.35s ease;
flex-shrink: 0;
background: rgba(245, 236, 216, 0.6);
isolation: isolate;
--tapestry-badge-size: 19px;
--tapestry-badge-top: -4px;
--tapestry-badge-right: -4px;
box-shadow:
0 0 0 3px rgba(249, 243, 232, 0.9),
0 2px 12px rgba(180, 140, 90, 0.1);
}
@media (max-width: 768px) {
.tapestry-actions-trigger[b-s8j9ymyogz] {
top: -0.28rem;
left: -0.05rem;
width: 34px;
height: 34px;
background: rgba(253, 248, 240, 0.94);
}
.tapestry-node-actions-menu[b-s8j9ymyogz] {
display: none;
}
.tapestry-actions-backdrop[b-s8j9ymyogz] {
background: rgba(24, 16, 12, 0.34);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 1205;
}
.tapestry-action-sheet[b-s8j9ymyogz] {
position: fixed;
left: 50%;
bottom: calc(0.75rem + env(safe-area-inset-bottom));
width: min(92vw, 360px);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, rgba(253, 248, 240, 0.995) 0%, rgba(247, 238, 226, 0.99) 100%);
border: 1px solid rgba(196, 154, 108, 0.2);
border-radius: 22px;
padding: 0.22rem 0 0.3rem;
box-shadow: 0 18px 38px rgba(83, 51, 43, 0.22);
transform: translate(-50%, 12px);
animation: tapestryActionSheetRise-b-s8j9ymyogz 0.2s ease-out forwards;
z-index: 1210;
}
:global(body.night-mode) .tapestry-action-sheet[b-s8j9ymyogz] {
background: linear-gradient(180deg, rgba(35, 29, 25, 0.99) 0%, rgba(27, 22, 19, 0.99) 100%);
}
}
.tapestry-portrait-img[b-s8j9ymyogz] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 50%;
clip-path: circle(50% at 50% 50%);
}
.tapestry-portrait-link[b-s8j9ymyogz] {
text-decoration: none;
display: block;
border-radius: 50%;
transition: transform 0.35s ease;
}
.tapestry-portrait-link:focus-visible[b-s8j9ymyogz] {
outline: 2px solid rgba(196, 154, 108, 0.72);
outline-offset: 4px;
}
.tapestry-portrait-link:focus-visible .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(196, 154, 108, 0.82);
box-shadow:
0 0 0 3px rgba(249, 243, 232, 0.94),
0 0 0 6px rgba(212, 165, 116, 0.22),
0 4px 18px rgba(180, 140, 90, 0.18);
}
.tapestry-portrait-link:hover[b-s8j9ymyogz] {
transform: translateY(-2px);
}
.tapestry-portrait-link:hover .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(196, 154, 108, 0.7);
box-shadow:
0 0 20px rgba(212, 165, 116, 0.25),
0 4px 16px rgba(180, 140, 90, 0.18);
}
.tapestry-private-badge[b-s8j9ymyogz] {
position: absolute;
top: var(--tapestry-badge-top);
right: var(--tapestry-badge-right);
width: var(--tapestry-badge-size);
height: var(--tapestry-badge-size);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(160deg, rgba(218, 180, 150, 0.98) 0%, rgba(178, 119, 92, 0.96) 52%, rgba(126, 77, 58, 0.96) 100%);
border: 1px solid rgba(124, 72, 53, 0.26);
box-shadow:
0 0 0 2.5px rgba(249, 243, 232, 0.95),
0 4px 9px rgba(102, 71, 50, 0.16),
inset 0 1px 1px rgba(255, 249, 241, 0.62),
inset 0 -1px 2px rgba(120, 84, 61, 0.22);
color: rgba(255, 248, 239, 0.98);
z-index: 4;
}
.tapestry-private-badge-icon[b-s8j9ymyogz] {
width: 12px;
height: 12px;
display: block;
filter: drop-shadow(0 1px 0 rgba(122, 84, 61, 0.18));
overflow: visible;
}
/* Central portrait — the sun of the constellation (110px, golden glow) */
.tapestry-portrait--central[b-s8j9ymyogz] {
width: 110px;
height: 110px;
border: 2.5px solid rgba(196, 154, 108, 0.55);
box-shadow:
0 0 0 4px rgba(249, 243, 232, 0.94),
0 0 32px rgba(212, 165, 116, 0.22),
0 0 64px rgba(212, 165, 116, 0.08),
0 4px 24px rgba(139, 115, 85, 0.12);
}
/* Warm glow behind central portrait */
.tapestry-portrait-glow[b-s8j9ymyogz] {
position: absolute;
inset: -20px;
border-radius: 50%;
background: radial-gradient(
circle,
rgba(246, 211, 101, 0.14) 0%,
rgba(253, 160, 133, 0.07) 50%,
transparent 75%
);
pointer-events: none;
z-index: -1;
animation: tapestryGlow-b-s8j9ymyogz 4s ease-in-out infinite alternate;
}
@keyframes tapestryGlow-b-s8j9ymyogz {
0% { opacity: 0.6; transform: scale(1); }
100% { opacity: 1; transform: scale(1.12); }
}
/* === Monogram fallback medallion === */
.tapestry-monogram-medallion[b-s8j9ymyogz] {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
clip-path: circle(50% at 50% 50%);
transform: scale(0.88);
transform-origin: center;
background:
radial-gradient(ellipse at 36% 26%, rgba(255, 252, 244, 0.92) 0%, rgba(255, 252, 244, 0.22) 32%, transparent 56%),
radial-gradient(circle at 68% 74%, rgba(166, 111, 82, 0.08) 0%, transparent 50%),
linear-gradient(145deg, #F7EDD9 0%, #EAD7B9 58%, #C9937D 100%);
color: rgba(124, 70, 56, 0.78);
box-shadow:
inset 0 1px 2px rgba(255, 252, 244, 0.66),
inset 0 -5px 10px rgba(137, 83, 59, 0.09);
}
.tapestry-monogram-medallion[b-s8j9ymyogz]::before {
content: "";
position: absolute;
inset: 7px;
border-radius: 50%;
border: 1px solid rgba(137, 83, 59, 0.13);
box-shadow:
inset 0 0 0 1px rgba(255, 249, 238, 0.36),
inset 0 0 0 5px rgba(255, 247, 232, 0.1);
}
.tapestry-monogram-medallion[b-s8j9ymyogz]::after {
content: "";
position: absolute;
inset: 15px 13px;
border-top: 1px solid rgba(124, 70, 56, 0.07);
border-bottom: 1px solid rgba(255, 249, 238, 0.18);
transform: rotate(-8deg);
opacity: 0.5;
}
.tapestry-monogram-initials[b-s8j9ymyogz] {
position: relative;
z-index: 1;
font-family: var(--font-serif);
font-size: 1.18rem;
font-weight: 560;
line-height: 1;
letter-spacing: 0;
text-shadow: 0 1px 0 rgba(255, 249, 238, 0.42);
}
.tapestry-monogram-medallion--central .tapestry-monogram-initials[b-s8j9ymyogz] {
font-size: 1.8rem;
}
/* === Text Labels === */
.tapestry-name[b-s8j9ymyogz] {
font-family: var(--font-serif);
font-size: 0.82rem;
font-weight: 400;
color: #3A3228;
text-align: center;
line-height: 1.25;
max-width: 120px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
word-break: break-word;
}
.tapestry-name--central[b-s8j9ymyogz] {
font-size: 1.05rem;
font-weight: 500;
color: #2E2318;
max-width: 150px;
}
.tapestry-name--unlinked[b-s8j9ymyogz] {
font-style: italic;
color: #8B7355;
opacity: 0.75;
}
.tapestry-relation[b-s8j9ymyogz] {
font-family: var(--font-sans);
font-size: 0.65rem;
color: #A0927E;
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1;
}
.tapestry-years[b-s8j9ymyogz] {
font-family: var(--font-sans);
font-size: 0.7rem;
color: #8B7355;
letter-spacing: 0.03em;
}
.tapestry-years--central[b-s8j9ymyogz] {
font-size: 0.8rem;
color: #6B5D4D;
letter-spacing: 0.05em;
}
/* === Linked node hover === */
.tapestry-node--linked .tapestry-name[b-s8j9ymyogz] {
color: #4A3F35;
}
/* === Unlinked node — faded presence === */
.tapestry-node--unlinked .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(200, 180, 155, 0.25);
box-shadow: none;
opacity: 0.65;
}
/* ============================================================
MOBILE LAYOUT
============================================================ */
@media (max-width: 768px) {
.tapestry-canvas[b-s8j9ymyogz] {
display: none;
}
.tapestry-mobile[b-s8j9ymyogz] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.tapestry-mobile-header-action[b-s8j9ymyogz] {
display: flex;
justify-content: center;
margin: -1rem 0 1.35rem;
}
.tapestry[b-s8j9ymyogz] {
padding: 2.5rem 1rem 3rem;
}
.tapestry-title[b-s8j9ymyogz] {
font-size: 1.65rem;
}
.tapestry-header[b-s8j9ymyogz] {
margin-bottom: 2rem;
}
/* Mobile rows */
.tapestry-mobile-row[b-s8j9ymyogz] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
padding: 0.5rem 0;
}
.tapestry-mobile-row--central[b-s8j9ymyogz] {
padding: 0.75rem 0;
}
.tapestry-mobile-label[b-s8j9ymyogz] {
font-family: var(--font-sans);
font-size: 0.65rem;
color: #A0927E;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 500;
}
.tapestry-mobile-members[b-s8j9ymyogz] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.25rem;
}
.tapestry-mobile-member[b-s8j9ymyogz] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
}
.tapestry-mobile-central[b-s8j9ymyogz] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
}
/* Mobile portraits — larger sizes */
.tapestry-portrait--mobile[b-s8j9ymyogz] {
width: 52px;
height: 52px;
--tapestry-badge-size: 16px;
--tapestry-badge-top: -3px;
--tapestry-badge-right: -3px;
}
.tapestry-private-badge[b-s8j9ymyogz] {
box-shadow:
0 0 0 2px rgba(249, 243, 232, 0.94),
0 3px 7px rgba(102, 71, 50, 0.15),
inset 0 1px 1px rgba(255, 249, 241, 0.6),
inset 0 -1px 2px rgba(120, 84, 61, 0.2);
}
.tapestry-private-badge-icon[b-s8j9ymyogz] {
width: 10px;
height: 10px;
}
.tapestry-portrait--mobile .tapestry-monogram-initials[b-s8j9ymyogz] {
font-size: 0.9rem;
}
.tapestry-portrait--mobile-central .tapestry-monogram-initials[b-s8j9ymyogz] {
font-size: 1.4rem;
}
.tapestry-portrait--mobile-central[b-s8j9ymyogz] {
width: 76px;
height: 76px;
}
/* Mobile name wrapping */
.tapestry-name--mobile[b-s8j9ymyogz] {
font-size: 0.75rem;
max-width: 90px;
}
/* Mobile vertical thread */
.tapestry-mobile-thread[b-s8j9ymyogz] {
width: 1.5px;
height: 20px;
background: linear-gradient(180deg, rgba(212, 165, 116, 0.15), rgba(212, 165, 116, 0.45), rgba(212, 165, 116, 0.15));
border-radius: 1px;
}
/* Mobile linked member hover */
.tapestry-mobile-member--linked .tapestry-portrait-link:active .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(196, 154, 108, 0.6);
box-shadow: 0 0 16px rgba(212, 165, 116, 0.2);
}
}
@media (max-width: 480px) {
.tapestry[b-s8j9ymyogz] {
padding: 2rem 0.75rem 2.5rem;
}
.tapestry-title[b-s8j9ymyogz] {
font-size: 1.45rem;
}
.tapestry-subtitle[b-s8j9ymyogz] {
font-size: 0.85rem;
}
.tapestry-portrait--mobile-central[b-s8j9ymyogz] {
width: 64px;
height: 64px;
}
.tapestry-portrait--mobile[b-s8j9ymyogz] {
width: 46px;
height: 46px;
--tapestry-badge-size: 15px;
--tapestry-badge-top: -2px;
--tapestry-badge-right: -2px;
}
.tapestry-mobile-members[b-s8j9ymyogz] {
gap: 1rem;
}
.tapestry-name--mobile[b-s8j9ymyogz] {
max-width: 80px;
}
}
/* ============================================================
NIGHT MODE
============================================================ */
:global(body.night-mode) .tapestry-linen[b-s8j9ymyogz] {
opacity: 0.15;
}
:global(body.night-mode) .tapestry-header-line[b-s8j9ymyogz] {
background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.3), transparent);
}
:global(body.night-mode) .tapestry-title[b-s8j9ymyogz] {
color: #E8DDD0;
}
:global(body.night-mode) .tapestry-subtitle[b-s8j9ymyogz] {
color: #A89880;
}
:global(body.night-mode) .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(196, 154, 108, 0.3);
box-shadow:
0 0 0 3px rgba(28, 33, 38, 0.9),
0 2px 12px rgba(0, 0, 0, 0.25);
background-color: rgba(50, 42, 34, 0.5);
}
:global(body.night-mode) .tapestry-portrait--central[b-s8j9ymyogz] {
border-color: rgba(196, 154, 108, 0.45);
box-shadow:
0 0 0 4px rgba(28, 33, 38, 0.92),
0 0 24px rgba(196, 154, 108, 0.15),
0 0 48px rgba(196, 154, 108, 0.06),
0 4px 16px rgba(0, 0, 0, 0.3);
}
:global(body.night-mode) .tapestry-portrait-glow[b-s8j9ymyogz] {
background: radial-gradient(
circle,
rgba(200, 160, 80, 0.1) 0%,
rgba(200, 160, 80, 0.04) 50%,
transparent 75%
);
}
:global(body.night-mode) .tapestry-private-badge[b-s8j9ymyogz] {
background: linear-gradient(160deg, rgba(156, 103, 82, 0.96) 0%, rgba(111, 68, 51, 0.96) 52%, rgba(76, 45, 35, 0.98) 100%);
border-color: rgba(216, 184, 153, 0.18);
color: rgba(253, 246, 238, 0.98);
box-shadow:
0 0 0 2.5px rgba(28, 33, 38, 0.92),
0 4px 10px rgba(0, 0, 0, 0.32),
inset 0 1px 1px rgba(255, 246, 234, 0.18),
inset 0 -1px 2px rgba(48, 31, 19, 0.35);
}
:global(body.night-mode) .tapestry-monogram-medallion[b-s8j9ymyogz] {
background:
radial-gradient(circle at 34% 26%, rgba(255, 234, 202, 0.13) 0%, transparent 48%),
radial-gradient(circle at 68% 74%, rgba(176, 98, 70, 0.11) 0%, transparent 50%),
linear-gradient(145deg, #45362F 0%, #382D28 56%, #5C3F35 100%);
color: rgba(229, 205, 183, 0.78);
box-shadow:
inset 0 1px 2px rgba(255, 239, 218, 0.09),
inset 0 -5px 10px rgba(7, 4, 3, 0.2);
}
:global(body.night-mode) .tapestry-monogram-medallion[b-s8j9ymyogz]::before {
border-color: rgba(229, 205, 183, 0.12);
box-shadow:
inset 0 0 0 1px rgba(255, 236, 212, 0.06),
inset 0 0 0 5px rgba(255, 228, 196, 0.03);
}
:global(body.night-mode) .tapestry-monogram-medallion[b-s8j9ymyogz]::after {
border-top-color: rgba(229, 205, 183, 0.06);
border-bottom-color: rgba(255, 236, 212, 0.04);
}
:global(body.night-mode) .tapestry-monogram-initials[b-s8j9ymyogz] {
text-shadow: 0 1px 0 rgba(8, 5, 4, 0.38);
}
:global(body.night-mode) .tapestry-name[b-s8j9ymyogz] {
color: #D4C8B8;
}
:global(body.night-mode) .tapestry-name--central[b-s8j9ymyogz] {
color: #E8DDD0;
}
:global(body.night-mode) .tapestry-name--unlinked[b-s8j9ymyogz] {
color: #8A7D6D;
}
:global(body.night-mode) .tapestry-relation[b-s8j9ymyogz] {
color: #7A6D5D;
}
:global(body.night-mode) .tapestry-years[b-s8j9ymyogz] {
color: #8A7D6D;
}
:global(body.night-mode) .tapestry-years--central[b-s8j9ymyogz] {
color: #A89880;
}
:global(body.night-mode) .tapestry-node--unlinked .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(160, 140, 110, 0.15);
opacity: 0.5;
}
:global(body.night-mode) .tapestry-portrait-link:hover .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(196, 154, 108, 0.55);
box-shadow:
0 0 20px rgba(196, 154, 108, 0.18),
0 4px 16px rgba(0, 0, 0, 0.3);
}
:global(body.night-mode) .tapestry-portrait-link:focus-visible[b-s8j9ymyogz] {
outline-color: rgba(220, 188, 150, 0.82);
}
:global(body.night-mode) .tapestry-portrait-link:focus-visible .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(216, 184, 153, 0.74);
box-shadow:
0 0 0 3px rgba(28, 33, 38, 0.94),
0 0 0 6px rgba(196, 154, 108, 0.18),
0 4px 18px rgba(0, 0, 0, 0.3);
}
:global(body.night-mode) .tapestry-mobile-label[b-s8j9ymyogz] {
color: #7A6D5D;
}
:global(body.night-mode) .tapestry-mobile-thread[b-s8j9ymyogz] {
background: linear-gradient(180deg, rgba(196, 154, 108, 0.08), rgba(196, 154, 108, 0.3), rgba(196, 154, 108, 0.08));
}
:global(body.night-mode) .tapestry-mobile-member--linked .tapestry-portrait-link:active .tapestry-portrait[b-s8j9ymyogz] {
border-color: rgba(196, 154, 108, 0.5);
box-shadow: 0 0 16px rgba(196, 154, 108, 0.15);
}
:global(body.night-mode) .tapestry-thread-curve[b-s8j9ymyogz] {
opacity: 0.3;
}
/* /Components/MemorialTributeModal.razor.rz.scp.css */
.memorial-edit-modal-overlay[b-zcmqhptmdp] {
position: fixed;
inset: 0;
z-index: 10000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(51, 40, 28, 0.32);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.memorial-edit-modal-overlay.maximized[b-zcmqhptmdp] {
align-items: stretch;
padding: 0;
}
.memorial-edit-modal[b-zcmqhptmdp] {
width: min(760px, 100%);
max-height: min(90vh, 820px);
display: flex;
flex-direction: column;
background: linear-gradient(180deg, #FFF9EF 0%, #FAF0E2 100%);
border: 1px solid rgba(196, 154, 108, 0.28);
border-radius: 18px;
box-shadow: 0 24px 80px rgba(74, 52, 32, 0.28);
overflow: hidden;
transition: width 0.25s ease, max-height 0.25s ease, height 0.25s ease, border-radius 0.25s ease;
}
.memorial-edit-modal.maximized[b-zcmqhptmdp] {
width: 100%;
max-width: 100%;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
border-left: 0;
border-right: 0;
}
.memorial-edit-modal-header[b-zcmqhptmdp] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
padding: 1.5rem 1.75rem 1rem;
border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}
.memorial-edit-modal-kicker[b-zcmqhptmdp] {
margin: 0 0 0.35rem;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.94rem;
color: #9A7A55;
}
.memorial-edit-modal h2[b-zcmqhptmdp] {
margin: 0;
font-family: var(--font-serif);
font-weight: 400;
color: #34281F;
font-size: clamp(1.55rem, 4vw, 2.15rem);
line-height: 1.12;
}
.memorial-edit-modal-controls[b-zcmqhptmdp] {
display: flex;
align-items: center;
gap: 0.45rem;
flex-shrink: 0;
}
.memorial-edit-modal-maximize[b-zcmqhptmdp] {
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(164, 123, 80, 0.18);
border-radius: 0.65rem;
background: rgba(255, 251, 244, 0.72);
color: #6B5541;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.memorial-edit-modal-maximize svg[b-zcmqhptmdp] {
width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.memorial-edit-modal-close[b-zcmqhptmdp] {
width: 2.25rem;
height: 2.25rem;
border: 1px solid rgba(164, 123, 80, 0.22);
border-radius: 50%;
background: rgba(255, 251, 244, 0.72);
color: #6B5541;
font-size: 1.35rem;
line-height: 1;
cursor: pointer;
}
.memorial-edit-modal-maximize:hover[b-zcmqhptmdp],
.memorial-edit-modal-maximize:focus-visible[b-zcmqhptmdp],
.memorial-edit-modal-close:hover[b-zcmqhptmdp],
.memorial-edit-modal-close:focus-visible[b-zcmqhptmdp] {
border-color: rgba(164, 123, 80, 0.34);
background: rgba(255, 246, 235, 0.95);
color: #4D3827;
outline: none;
}
.memorial-edit-modal-body[b-zcmqhptmdp] {
padding: 1.25rem 1.75rem;
overflow-y: auto;
}
.memorial-edit-modal.maximized .memorial-edit-modal-header[b-zcmqhptmdp],
.memorial-edit-modal.maximized .memorial-edit-modal-footer[b-zcmqhptmdp] {
flex-shrink: 0;
}
.memorial-edit-modal.maximized .memorial-edit-modal-body[b-zcmqhptmdp] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
.memorial-edit-modal.maximized .memorial-tribute-textarea[b-zcmqhptmdp] {
flex: 1 0 auto;
min-height: 360px;
}
.memorial-tribute-textarea[b-zcmqhptmdp] {
width: 100%;
min-height: 320px;
resize: vertical;
border: 1px solid rgba(196, 154, 108, 0.22);
border-radius: 14px;
background: rgba(255, 252, 246, 0.82);
padding: 1.25rem 1.35rem;
color: #3E332A;
font-family: var(--font-serif);
font-size: 1.08rem;
line-height: 1.8;
outline: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}
.memorial-tribute-textarea:focus[b-zcmqhptmdp] {
border-color: rgba(164, 123, 80, 0.46);
box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.12);
}
.memorial-edit-hint[b-zcmqhptmdp] {
margin: 0.85rem 0 0;
color: #806D5B;
font-family: var(--font-sans);
font-size: 0.9rem;
line-height: 1.6;
}
.memorial-tribute-assistant[b-zcmqhptmdp] {
position: relative;
flex: 0 0 auto;
margin-bottom: 1.15rem;
border: 1px solid rgba(250, 227, 211, 0.9);
border-radius: 18px;
background:
radial-gradient(circle at 7rem 80%, rgba(255, 209, 150, 0.22), transparent 34%),
linear-gradient(180deg, rgba(255, 252, 247, 0.96) 0%, rgba(255, 247, 238, 0.88) 100%);
padding: 1rem 1rem 1.05rem;
box-shadow: 0 14px 34px rgba(83, 51, 43, 0.09);
overflow: hidden;
}
.memorial-tribute-assistant.locked[b-zcmqhptmdp] {
background:
radial-gradient(circle at 7rem 80%, rgba(255, 209, 150, 0.14), transparent 34%),
linear-gradient(180deg, rgba(250, 240, 226, 0.92) 0%, rgba(255, 248, 238, 0.84) 100%);
}
.memorial-tribute-assistant-scene[b-zcmqhptmdp] {
display: grid;
grid-template-columns: minmax(6.6rem, 8.8rem) minmax(0, 1fr);
gap: 0.85rem;
align-items: end;
}
.memorial-tribute-assistant-granny-wrap[b-zcmqhptmdp] {
position: relative;
align-self: end;
min-height: 7.6rem;
display: flex;
align-items: flex-end;
justify-content: center;
}
.memorial-tribute-assistant-glow[b-zcmqhptmdp] {
position: absolute;
bottom: 0.15rem;
left: 50%;
width: 7.4rem;
height: 5.8rem;
transform: translateX(-50%);
border-radius: 50%;
background: radial-gradient(ellipse at center bottom, rgba(255, 210, 150, 0.5) 0%, rgba(219, 160, 95, 0.18) 45%, transparent 72%);
animation: memorial-tribute-glow-b-zcmqhptmdp 4s ease-in-out infinite;
}
.memorial-tribute-assistant-granny[b-zcmqhptmdp] {
position: relative;
z-index: 1;
width: min(8.45rem, 100%);
height: auto;
object-fit: contain;
filter: drop-shadow(0 10px 18px rgba(88, 44, 12, 0.22));
transform-origin: bottom center;
animation: memorial-tribute-granny-rise-b-zcmqhptmdp 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.memorial-tribute-assistant-dialogue[b-zcmqhptmdp] {
min-width: 0;
}
.memorial-tribute-assistant-bubble[b-zcmqhptmdp] {
position: relative;
min-width: 0;
border: 1.5px solid #F5DCCA;
border-radius: 22px;
background: #FFF9F5;
padding: 1rem 1.15rem;
box-shadow: 0 8px 24px rgba(83, 51, 43, 0.1), 0 2px 8px rgba(83, 51, 43, 0.06);
}
.memorial-tribute-assistant-bubble[b-zcmqhptmdp]::before {
content: "";
position: absolute;
left: -0.7rem;
bottom: 1.1rem;
width: 1.05rem;
height: 1.05rem;
background: #FFF9F5;
border-left: 1.5px solid #F5DCCA;
border-bottom: 1.5px solid #F5DCCA;
transform: rotate(45deg);
}
.memorial-tribute-assistant-button[b-zcmqhptmdp] {
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
border: 1px solid rgba(214, 162, 98, 0.55);
border-radius: 999px;
background: linear-gradient(180deg, #F9DCA8 0%, #EDC37D 100%);
color: #4B2E2E;
padding: 0.66rem 1.1rem;
font-family: var(--font-serif);
font-size: clamp(1.05rem, 2.2vw, 1.25rem);
font-weight: 700;
line-height: 1.25;
text-align: left;
white-space: normal;
cursor: pointer;
text-decoration: none;
box-shadow: 0 10px 22px rgba(156, 103, 49, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.52);
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.memorial-tribute-assistant-button:hover:not(:disabled)[b-zcmqhptmdp],
.memorial-tribute-assistant-button:focus-visible[b-zcmqhptmdp] {
background: linear-gradient(180deg, #FBE4B7 0%, #F0C986 100%);
border-color: rgba(165, 109, 52, 0.66);
box-shadow: 0 12px 26px rgba(156, 103, 49, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.62);
transform: translateY(-1px);
outline: none;
}
.memorial-tribute-assistant-button:disabled[b-zcmqhptmdp] {
color: #8A7867;
cursor: default;
background: rgba(245, 228, 208, 0.78);
border-color: rgba(214, 190, 162, 0.72);
box-shadow: none;
}
.memorial-tribute-assistant-intro[b-zcmqhptmdp],
.memorial-tribute-assistant-access-note[b-zcmqhptmdp],
.memorial-tribute-assistant-premium[b-zcmqhptmdp],
.memorial-tribute-assistant-message[b-zcmqhptmdp],
.memorial-tribute-assistant-soft-error[b-zcmqhptmdp] {
margin: 0.45rem 0 0;
color: #6B5541;
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.62;
}
.memorial-tribute-assistant-access-note[b-zcmqhptmdp] {
font-family: var(--font-sans);
font-size: 0.86rem;
line-height: 1.45;
color: #8A654D;
}
.memorial-tribute-assistant-premium strong[b-zcmqhptmdp] {
margin-right: 0.25rem;
color: #4B2E2E;
font-weight: 700;
}
.memorial-tribute-assistant-soft-error[b-zcmqhptmdp] {
border-left: 3px solid rgba(164, 72, 55, 0.32);
padding-left: 0.7rem;
color: #7B3C32;
}
.memorial-tribute-assistant-actions[b-zcmqhptmdp] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 0.7rem;
align-items: center;
margin-top: 0.85rem;
}
.memorial-tribute-assistant-link[b-zcmqhptmdp] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.05rem;
border: 1px solid transparent;
border-radius: 999px;
background: transparent;
padding: 0.42rem 0.55rem;
color: #8A5C45;
font-family: var(--font-sans);
font-size: 0.88rem;
font-weight: 700;
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: rgba(164, 95, 67, 0.42);
text-underline-offset: 0.2rem;
cursor: pointer;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.memorial-tribute-assistant-actions .memorial-tribute-assistant-link:first-child[b-zcmqhptmdp] {
border-color: rgba(214, 162, 98, 0.52);
background: linear-gradient(180deg, #F9DDAA 0%, #F0C986 100%);
color: #4B2E2E;
padding-inline: 0.95rem;
font-family: var(--font-serif);
font-size: 0.96rem;
text-decoration: none;
box-shadow: 0 10px 20px rgba(156, 103, 49, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.memorial-tribute-assistant-actions .memorial-tribute-assistant-link + .memorial-tribute-assistant-link[b-zcmqhptmdp] {
color: #9A654F;
padding-inline: 0.12rem;
}
.memorial-tribute-assistant-link:hover[b-zcmqhptmdp],
.memorial-tribute-assistant-link:focus-visible[b-zcmqhptmdp] {
color: #7E4633;
text-decoration-color: currentColor;
}
.memorial-tribute-assistant-actions .memorial-tribute-assistant-link:first-child:hover[b-zcmqhptmdp],
.memorial-tribute-assistant-actions .memorial-tribute-assistant-link:first-child:focus-visible[b-zcmqhptmdp] {
border-color: rgba(165, 109, 52, 0.66);
background: linear-gradient(180deg, #FBE6B7 0%, #F2CD8E 100%);
box-shadow: 0 12px 24px rgba(156, 103, 49, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.62);
transform: translateY(-1px);
}
.memorial-tribute-assistant-link:focus-visible[b-zcmqhptmdp] {
box-shadow: 0 0 0 3px rgba(196, 154, 108, 0.18);
outline: none;
}
.memorial-tribute-credit-modal-lift[b-zcmqhptmdp] .credit-modal-overlay {
z-index: 11050;
}
.memorial-tribute-assistant-thinking[b-zcmqhptmdp] {
display: inline-flex;
align-items: center;
gap: 0.38rem;
margin-top: 0.75rem;
color: #7B5A53;
font-family: var(--font-sans);
font-size: 0.92rem;
}
.memorial-tribute-typing-dot[b-zcmqhptmdp] {
width: 0.38rem;
height: 0.38rem;
border-radius: 50%;
background: #B9805F;
animation: memorial-tribute-dot-bounce-b-zcmqhptmdp 1.15s ease-in-out infinite;
}
.memorial-tribute-typing-dot:nth-child(2)[b-zcmqhptmdp] {
animation-delay: 0.16s;
}
.memorial-tribute-typing-dot:nth-child(3)[b-zcmqhptmdp] {
animation-delay: 0.32s;
}
.memorial-tribute-assistant-compose[b-zcmqhptmdp] {
margin: 0.9rem 0 0;
padding-left: calc(min(8.8rem, 30%) + 0.85rem);
}
.memorial-tribute-assistant-compose label[b-zcmqhptmdp],
.memorial-tribute-assistant-draft-label[b-zcmqhptmdp],
.memorial-tribute-assistant-questions p[b-zcmqhptmdp] {
display: block;
margin: 0 0 0.45rem;
color: #5C4631;
font-family: var(--font-sans);
font-size: 0.84rem;
font-weight: 700;
}
.memorial-tribute-assistant-input-shell[b-zcmqhptmdp] {
display: grid;
grid-template-columns: minmax(0, 1fr) 3rem;
align-items: end;
gap: 0.55rem;
border: 1.5px solid rgba(245, 190, 172, 0.76);
border-radius: 26px;
background: rgba(255, 249, 245, 0.9);
padding: 0.55rem 0.55rem 0.55rem 1rem;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 20px rgba(164, 123, 80, 0.08);
}
.memorial-tribute-assistant-prompt[b-zcmqhptmdp] {
width: 100%;
min-height: 4.6rem;
max-height: 8rem;
resize: vertical;
border: 0;
background: transparent;
padding: 0.36rem 0 0.25rem;
color: #4B2E2E;
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.5;
outline: none;
}
.memorial-tribute-assistant-prompt[b-zcmqhptmdp]::placeholder {
color: #9A8675;
font-style: italic;
}
.memorial-tribute-assistant-send[b-zcmqhptmdp] {
width: 3rem;
height: 3rem;
border: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: #FBE6DD;
color: #9A786A;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.memorial-tribute-assistant-send:hover:not(:disabled)[b-zcmqhptmdp],
.memorial-tribute-assistant-send:focus-visible[b-zcmqhptmdp] {
background: #F6D2C4;
color: #6B493D;
transform: translateY(-1px);
}
.memorial-tribute-assistant-send:disabled[b-zcmqhptmdp] {
cursor: wait;
opacity: 0.72;
}
.memorial-tribute-assistant-send svg[b-zcmqhptmdp] {
width: 1.35rem;
height: 1.35rem;
fill: none;
stroke: currentColor;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.memorial-tribute-send-dot[b-zcmqhptmdp] {
width: 0.52rem;
height: 0.52rem;
border-radius: 50%;
background: currentColor;
animation: memorial-tribute-dot-pulse-b-zcmqhptmdp 0.9s ease-in-out infinite;
}
.memorial-tribute-assistant-questions[b-zcmqhptmdp] {
margin-top: 0.85rem;
}
.memorial-tribute-assistant-questions.optional[b-zcmqhptmdp] {
border-top: 1px solid rgba(245, 220, 202, 0.72);
padding-top: 0.75rem;
opacity: 0.86;
}
.memorial-tribute-assistant-questions ul[b-zcmqhptmdp] {
margin: 0;
padding-left: 1.1rem;
color: #6B5541;
font-family: var(--font-serif);
font-size: 0.96rem;
line-height: 1.55;
}
.memorial-tribute-assistant-questions.optional ul[b-zcmqhptmdp] {
font-size: 0.92rem;
}
.memorial-tribute-assistant-draft[b-zcmqhptmdp] {
margin-top: 0.9rem;
border-top: 1px solid rgba(245, 220, 202, 0.85);
padding-top: 0.85rem;
}
.memorial-tribute-assistant-draft-text[b-zcmqhptmdp] {
max-height: 13rem;
overflow-y: auto;
border: 1px solid rgba(196, 154, 108, 0.16);
border-radius: 14px;
background: rgba(255, 252, 246, 0.76);
padding: 0.85rem 0.95rem;
color: #3E332A;
font-family: var(--font-serif);
font-size: 0.98rem;
line-height: 1.72;
}
.memorial-tribute-assistant-draft-text p[b-zcmqhptmdp] {
margin: 0 0 0.75rem;
}
.memorial-tribute-assistant-draft-text p:last-child[b-zcmqhptmdp] {
margin-bottom: 0;
}
.memorial-tribute-assistant-apply[b-zcmqhptmdp] {
margin-top: 0.75rem;
padding: 0.58rem 0.95rem;
}
@keyframes memorial-tribute-granny-rise-b-zcmqhptmdp {
from {
opacity: 0;
transform: translateY(0.8rem) scale(0.96);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes memorial-tribute-glow-b-zcmqhptmdp {
0%, 100% {
opacity: 0.58;
transform: translateX(-50%) scale(0.95);
}
50% {
opacity: 0.9;
transform: translateX(-50%) scale(1.06);
}
}
@keyframes memorial-tribute-dot-bounce-b-zcmqhptmdp {
0%, 80%, 100% {
transform: translateY(0);
opacity: 0.45;
}
40% {
transform: translateY(-0.18rem);
opacity: 1;
}
}
@keyframes memorial-tribute-dot-pulse-b-zcmqhptmdp {
0%, 100% {
transform: scale(0.82);
opacity: 0.5;
}
50% {
transform: scale(1);
opacity: 1;
}
}
.memorial-edit-error[b-zcmqhptmdp] {
margin-bottom: 1rem;
border: 1px solid rgba(164, 72, 55, 0.18);
border-radius: 12px;
background: rgba(255, 238, 232, 0.82);
padding: 0.8rem 1rem;
color: #8A3B2D;
font-family: var(--font-sans);
font-size: 0.92rem;
}
.memorial-edit-modal-footer[b-zcmqhptmdp] {
display: flex;
justify-content: flex-end;
gap: 0.8rem;
padding: 1rem 1.75rem 1.4rem;
border-top: 1px solid rgba(196, 154, 108, 0.14);
}
.memorial-edit-secondary[b-zcmqhptmdp],
.memorial-edit-primary[b-zcmqhptmdp] {
border-radius: 999px;
padding: 0.72rem 1.25rem;
font-family: var(--font-sans);
font-size: 0.93rem;
cursor: pointer;
}
.memorial-edit-secondary[b-zcmqhptmdp] {
border: 1px solid rgba(164, 123, 80, 0.24);
background: transparent;
color: #6B5541;
}
.memorial-edit-primary[b-zcmqhptmdp] {
border: 1px solid rgba(164, 123, 80, 0.26);
background: linear-gradient(145deg, #F8E5C8 0%, #EBCFA5 100%);
color: #4A3426;
box-shadow: 0 8px 20px rgba(164, 123, 80, 0.14);
}
.memorial-edit-primary:disabled[b-zcmqhptmdp] {
opacity: 0.64;
cursor: wait;
}
:global(body.night-mode) .memorial-edit-modal[b-zcmqhptmdp] {
background: linear-gradient(180deg, #2A2119 0%, #211A15 100%);
border-color: rgba(196, 154, 108, 0.22);
}
:global(body.night-mode) .memorial-edit-modal h2[b-zcmqhptmdp] {
color: #E8DDD0;
}
:global(body.night-mode) .memorial-tribute-textarea[b-zcmqhptmdp] {
background: rgba(35, 29, 23, 0.86);
color: #E8DDD0;
}
:global(body.night-mode) .memorial-tribute-assistant[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant.locked[b-zcmqhptmdp] {
background:
radial-gradient(circle at 7rem 80%, rgba(255, 210, 150, 0.12), transparent 34%),
linear-gradient(180deg, rgba(42, 33, 25, 0.88) 0%, rgba(35, 29, 23, 0.82) 100%);
border-color: rgba(196, 154, 108, 0.2);
}
:global(body.night-mode) .memorial-tribute-assistant-bubble[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-bubble[b-zcmqhptmdp]::before,
:global(body.night-mode) .memorial-tribute-assistant-input-shell[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-draft-text[b-zcmqhptmdp] {
background: rgba(35, 29, 23, 0.86);
border-color: rgba(196, 154, 108, 0.24);
color: #E8DDD0;
}
:global(body.night-mode) .memorial-tribute-assistant-intro[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-access-note[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-premium[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-message[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-soft-error[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-prompt[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-questions ul[b-zcmqhptmdp] {
color: #CDBFAE;
}
:global(body.night-mode) .memorial-tribute-assistant-premium strong[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-compose label[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-draft-label[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-questions p[b-zcmqhptmdp] {
color: #E8DDD0;
}
:global(body.night-mode) .memorial-tribute-assistant-button[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-link[b-zcmqhptmdp] {
color: #EBCFA5;
}
:global(body.night-mode) .memorial-tribute-assistant-actions .memorial-tribute-assistant-link:first-child[b-zcmqhptmdp] {
background: rgba(235, 207, 165, 0.18);
border-color: rgba(235, 207, 165, 0.36);
color: #F2DDBB;
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.2);
}
:global(body.night-mode) .memorial-tribute-assistant-actions .memorial-tribute-assistant-link:first-child:hover[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-actions .memorial-tribute-assistant-link:first-child:focus-visible[b-zcmqhptmdp] {
background: rgba(235, 207, 165, 0.24);
border-color: rgba(235, 207, 165, 0.54);
}
:global(body.night-mode) .memorial-tribute-assistant-actions .memorial-tribute-assistant-link + .memorial-tribute-assistant-link[b-zcmqhptmdp] {
color: #D8B893;
text-decoration-color: rgba(216, 184, 147, 0.5);
}
:global(body.night-mode) .memorial-tribute-assistant-button[b-zcmqhptmdp] {
background: rgba(235, 207, 165, 0.16);
border-color: rgba(235, 207, 165, 0.34);
box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}
:global(body.night-mode) .memorial-tribute-assistant-button:hover:not(:disabled)[b-zcmqhptmdp],
:global(body.night-mode) .memorial-tribute-assistant-button:focus-visible[b-zcmqhptmdp] {
background: rgba(235, 207, 165, 0.22);
border-color: rgba(235, 207, 165, 0.5);
}
:global(body.night-mode) .memorial-tribute-assistant-button:disabled[b-zcmqhptmdp] {
background: rgba(180, 154, 123, 0.12);
color: #BBAA98;
}
:global(body.night-mode) .memorial-tribute-assistant-prompt[b-zcmqhptmdp]::placeholder {
color: #AFA094;
}
:global(body.night-mode) .memorial-tribute-assistant-send[b-zcmqhptmdp] {
background: rgba(235, 207, 165, 0.18);
color: #EBCFA5;
}
@media (max-width: 640px) {
.memorial-edit-modal-overlay[b-zcmqhptmdp] {
align-items: stretch;
padding: 0;
}
.memorial-edit-modal[b-zcmqhptmdp] {
display: flex;
flex-direction: column;
height: 100dvh;
max-height: 100dvh;
min-height: 0;
border-radius: 0;
}
.memorial-edit-modal-header[b-zcmqhptmdp],
.memorial-edit-modal-body[b-zcmqhptmdp],
.memorial-edit-modal-footer[b-zcmqhptmdp] {
padding-left: 1.15rem;
padding-right: 1.15rem;
}
.memorial-edit-modal-body[b-zcmqhptmdp] {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
}
.memorial-edit-modal-footer[b-zcmqhptmdp] {
flex-shrink: 0;
padding-bottom: max(1.15rem, env(safe-area-inset-bottom));
}
.memorial-edit-modal-maximize[b-zcmqhptmdp] {
display: none;
}
.memorial-tribute-textarea[b-zcmqhptmdp] {
flex: 1 0 auto;
min-height: 46dvh;
}
.memorial-tribute-assistant[b-zcmqhptmdp] {
padding: 0.8rem;
}
.memorial-tribute-assistant-scene[b-zcmqhptmdp] {
grid-template-columns: minmax(5.15rem, 5.65rem) minmax(0, 1fr);
gap: 0.7rem;
}
.memorial-tribute-assistant-granny-wrap[b-zcmqhptmdp] {
min-height: 5.8rem;
}
.memorial-tribute-assistant-granny[b-zcmqhptmdp] {
width: min(5.85rem, 100%);
}
.memorial-tribute-assistant-glow[b-zcmqhptmdp] {
width: 5.45rem;
height: 4.15rem;
}
.memorial-tribute-assistant-bubble[b-zcmqhptmdp] {
border-radius: 18px;
padding: 0.85rem 0.95rem;
}
.memorial-tribute-assistant-button[b-zcmqhptmdp] {
font-size: 1.02rem;
padding: 0.62rem 0.88rem;
}
.memorial-tribute-assistant-intro[b-zcmqhptmdp],
.memorial-tribute-assistant-access-note[b-zcmqhptmdp],
.memorial-tribute-assistant-premium[b-zcmqhptmdp],
.memorial-tribute-assistant-message[b-zcmqhptmdp],
.memorial-tribute-assistant-soft-error[b-zcmqhptmdp] {
font-size: 0.94rem;
}
.memorial-tribute-assistant-compose[b-zcmqhptmdp] {
padding-left: 0;
}
.memorial-tribute-assistant-input-shell[b-zcmqhptmdp] {
grid-template-columns: minmax(0, 1fr) 2.75rem;
border-radius: 22px;
padding: 0.48rem 0.48rem 0.48rem 0.85rem;
}
.memorial-tribute-assistant-prompt[b-zcmqhptmdp] {
min-height: 8rem;
max-height: 10rem;
font-size: 0.95rem;
line-height: 1.45;
}
.memorial-tribute-assistant-send[b-zcmqhptmdp] {
width: 2.75rem;
height: 2.75rem;
}
.memorial-tribute-assistant-apply[b-zcmqhptmdp] {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.memorial-tribute-assistant-granny[b-zcmqhptmdp],
.memorial-tribute-assistant-glow[b-zcmqhptmdp],
.memorial-tribute-typing-dot[b-zcmqhptmdp],
.memorial-tribute-send-dot[b-zcmqhptmdp] {
animation: none;
}
}
/* /Components/MemoryModal.razor.rz.scp.css */
:global(html:has(.memory-modal-overlay))[b-uc69yhuklp],
:global(body:has(.memory-modal-overlay))[b-uc69yhuklp] { overflow: hidden; }
.memory-modal-overlay[b-uc69yhuklp] {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: clamp(0.75rem, 2vw, 1.5rem);
overflow: auto;
background: radial-gradient(circle at 20% 10%, rgba(251, 218, 199, .22), transparent 35%), rgba(42, 31, 26, .62);
backdrop-filter: blur(8px);
}
.memory-modal-dialog[b-uc69yhuklp] {
position: relative;
width: min(100%, 960px);
max-height: min(92dvh, 900px);
display: flex;
flex-direction: column;
overflow: auto;
border: 1px solid rgba(125, 90, 73, .18);
border-radius: 28px;
background: linear-gradient(rgba(255, 250, 245, .985), rgba(255, 247, 239, .985)), repeating-linear-gradient(0deg, rgba(102,72,55,.022) 0 1px, transparent 1px 5px);
box-shadow: 0 32px 90px rgba(41, 29, 24, .32);
color: #332925;
font-family: var(--font-sans, "Helvetica Neue", Arial, sans-serif);
}
.memory-modal-dialog:focus[b-uc69yhuklp] { outline: none; }
.memory-modal-close[b-uc69yhuklp] { position: absolute; z-index: 3; top: 1rem; right: 1rem; width: 44px; height: 44px; border: 1px solid rgba(103,72,58,.16); border-radius: 50%; background: rgba(255,255,255,.74); color: #6d554d; font: 400 1.75rem/1 var(--font-sans, sans-serif); cursor: pointer; }
.memory-modal-close:hover:not(:disabled)[b-uc69yhuklp] { background: #fff; transform: rotate(4deg); }
.memory-modal-close:focus-visible[b-uc69yhuklp], button:focus-visible[b-uc69yhuklp], a:focus-visible[b-uc69yhuklp], select:focus-visible[b-uc69yhuklp], textarea:focus-visible[b-uc69yhuklp], label:has(input):focus-within[b-uc69yhuklp] { outline: 3px solid rgba(183,111,88,.45); outline-offset: 3px; }
.memory-modal-header[b-uc69yhuklp] { flex: 0 0 auto; padding: 1.5rem 5rem 1.35rem 1.7rem; border-bottom: 1px solid rgba(125,90,73,.13); background: linear-gradient(120deg, rgba(252, 237, 218, .95), rgba(244, 224, 196, .78)); }
.memory-modal-identity[b-uc69yhuklp] { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.memory-modal-avatar[b-uc69yhuklp] { width: 62px; height: 62px; flex: 0 0 62px; display: grid; place-items: center; overflow: hidden; border: 3px solid rgba(255,255,255,.85); border-radius: 50%; background: #efcfb7; color: #765247; font-family: var(--font-serif, Georgia, serif); font-size: 1.35rem; box-shadow: 0 6px 18px rgba(83,55,43,.1); }
.memory-modal-avatar img[b-uc69yhuklp] { width: 100%; height: 100%; object-fit: cover; }
.memory-modal-heading-copy[b-uc69yhuklp] { min-width: 0; }
.memory-modal-eyebrow[b-uc69yhuklp], .memory-modal-section-label[b-uc69yhuklp] { margin: 0; color: #a25f4e; font-size: .76rem; font-weight: 750; letter-spacing: .12em; text-transform: uppercase; }
.memory-modal-heading-copy h2[b-uc69yhuklp] { margin: .25rem 0 0; overflow: hidden; color: #332925; font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.65rem, 3vw, 2.35rem); font-weight: 550; letter-spacing: -.035em; line-height: 1.05; text-overflow: ellipsis; white-space: nowrap; }
.memory-modal-meta[b-uc69yhuklp] { display: flex; flex-wrap: wrap; gap: .35rem .55rem; margin-top: .55rem; color: #7f675d; font-size: .82rem; }
.memory-modal-meta span:not(:last-child)[b-uc69yhuklp]::after { content: "·"; margin-left: .55rem; color: #aa8d7e; }
.memory-modal-person-picker select[b-uc69yhuklp] { max-width: 430px; min-height: 44px; margin-top: .35rem; padding: .55rem 2.5rem .55rem .8rem; border: 1px solid rgba(125,90,73,.22); border-radius: 13px; background: rgba(255,253,250,.86); color: #44342e; font: 650 1rem/1.2 var(--font-sans, sans-serif); }
.memory-modal-main[b-uc69yhuklp] { flex: 1 0 auto; padding: clamp(1.25rem, 3vw, 2.25rem); }
.memory-modal-attribution[b-uc69yhuklp] { display: grid; gap: .25rem; margin-bottom: 1.25rem; padding: .8rem 1rem; border-left: 3px solid #d69a68; border-radius: 0 12px 12px 0; background: rgba(255,244,233,.72); color: #654b42; font-size: .86rem; }
.memory-modal-attribution span[b-uc69yhuklp] { color: #a25f4e; font-size: .72rem; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.memory-modal-reading-layout[b-uc69yhuklp] { display: grid; gap: clamp(1.4rem, 3vw, 2.6rem); align-items: start; }
.memory-modal-reading-layout.has-media[b-uc69yhuklp] { grid-template-columns: minmax(240px, .85fr) minmax(0, 1.15fr); }
.memory-modal-photo[b-uc69yhuklp] { position: sticky; top: 0; margin: 0; overflow: hidden; border-radius: 20px; background: #322925; box-shadow: 0 15px 35px rgba(58,39,31,.14); }
.memory-modal-photo-button[b-uc69yhuklp] { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.memory-modal-photo img[b-uc69yhuklp] { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.memory-modal-story[b-uc69yhuklp] { min-width: 0; }
.memory-modal-story-text[b-uc69yhuklp] { margin: .65rem 0 0; color: #352924; font-family: var(--font-serif, Georgia, serif); font-size: clamp(1.22rem, 2vw, 1.58rem); font-weight: 430; line-height: 1.72; white-space: pre-wrap; }
.memory-modal-voice-card[b-uc69yhuklp], .memory-modal-recording-manager[b-uc69yhuklp] { margin-top: 1.8rem; padding: 1.15rem; border: 1px solid rgba(166,105,73,.24); border-radius: 20px; background: radial-gradient(circle at 94% 6%, rgba(230,185,137,.23), transparent 42%), linear-gradient(140deg, rgba(255,249,241,.96), rgba(248,235,220,.86)); box-shadow: inset 0 1px rgba(255,255,255,.72), 0 10px 26px rgba(105,62,42,.055); }
.memory-modal-voice-card-heading[b-uc69yhuklp] { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .8rem; }
.memory-modal-voice-icon[b-uc69yhuklp] { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border: 1px solid rgba(152,88,60,.22); border-radius: 13px; background: rgba(255,252,248,.8); color: #a35f49; font-size: 1.15rem; }
.memory-modal-voice-card h3[b-uc69yhuklp], .memory-modal-recording-manager h3[b-uc69yhuklp] { margin: 0; color: #49342c; font-family: var(--font-serif, Georgia, serif); font-size: 1.25rem; font-weight: 580; }
.memory-modal-voice-card p[b-uc69yhuklp] { margin: .25rem 0 0; color: #786057; font-size: .88rem; line-height: 1.45; }
.memory-modal-photo-details[b-uc69yhuklp] { margin-top: 1.35rem; border-top: 1px solid rgba(125,90,73,.16); color: #68534a; }
.memory-modal-photo-details summary[b-uc69yhuklp] { padding: 1rem 0; color: #74564b; font-weight: 720; cursor: pointer; }
.memory-modal-photo-details p[b-uc69yhuklp] { margin: 0 0 1rem; color: #735f56; line-height: 1.6; white-space: pre-wrap; }
.memory-modal-editing-layout[b-uc69yhuklp] { display: grid; gap: 1.25rem; }
.memory-modal-field[b-uc69yhuklp] { display: grid; gap: .5rem; color: #604a41; font-size: .88rem; font-weight: 720; }
.memory-modal-field textarea[b-uc69yhuklp], .memory-modal-field select[b-uc69yhuklp] { width: 100%; box-sizing: border-box; border: 1px solid rgba(126,87,70,.24); border-radius: 14px; background: rgba(255,253,250,.94); color: #3d302b; font: 400 1rem/1.6 var(--font-sans, sans-serif); }
.memory-modal-field textarea[b-uc69yhuklp] { min-height: 150px; padding: .95rem 1rem; resize: vertical; }
.memory-modal-field select[b-uc69yhuklp] { min-height: 48px; padding: .65rem .8rem; }
.memory-modal-story-field textarea[b-uc69yhuklp] { min-height: 220px; font-family: var(--font-serif, Georgia, serif); font-size: 1.15rem; }
.memory-modal-voice-invitation[b-uc69yhuklp] { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .95rem 1rem; border: 1px solid rgba(166,105,73,.2); border-radius: 17px; background: linear-gradient(120deg, rgba(255,250,244,.94), rgba(249,235,219,.72)); box-shadow: inset 0 1px rgba(255,255,255,.72); }
.memory-modal-voice-invitation-icon[b-uc69yhuklp] { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid rgba(152,88,60,.2); border-radius: 50%; background: rgba(255,253,249,.82); color: #a35f49; }
.memory-modal-voice-invitation-icon svg[b-uc69yhuklp] { width: 22px; height: 22px; }
.memory-modal-voice-invitation-copy[b-uc69yhuklp] { min-width: 0; }
.memory-modal-voice-invitation-copy h3[b-uc69yhuklp] { margin: 0; color: #49342c; font-family: var(--font-serif); font-size: 1.08rem; font-weight: 580; }
.memory-modal-voice-invitation-copy p[b-uc69yhuklp] { margin: .22rem 0 0; color: #786057; font-size: .84rem; font-weight: 450; line-height: 1.45; }
.memory-modal-voice-invitation-action[b-uc69yhuklp] { min-height: 44px; padding: .65rem .95rem; border: 1px solid rgba(123,83,67,.28); border-radius: 999px; background: #4a342e; color: #fffaf6; font: 700 .82rem/1.15 var(--font-sans); cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; }
.memory-modal-voice-invitation-action:hover:not(:disabled)[b-uc69yhuklp] { background: #62463d; transform: translateY(-1px); }
.memory-modal-voice-invitation-action:disabled[b-uc69yhuklp] { cursor: wait; opacity: .55; }
.memory-modal-edit-grid[b-uc69yhuklp] { display: grid; grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr); gap: 1.25rem; align-items: start; }
.memory-modal-photo-editor[b-uc69yhuklp] { min-width: 0; }
.memory-modal-photo-upload[b-uc69yhuklp] { position: relative; min-height: 175px; margin-top: .55rem; overflow: hidden; border: 1.5px dashed rgba(151,103,82,.42); border-radius: 18px; background: #fffaf6; }
.memory-modal-photo-upload > label[b-uc69yhuklp] { min-height: 175px; display: grid; place-content: center; justify-items: center; gap: .35rem; padding: 1rem; color: #775e54; text-align: center; cursor: pointer; }
.memory-modal-photo-upload > label span[b-uc69yhuklp] { color: #a35f49; font-size: 1.5rem; }
.memory-modal-photo-upload > label small[b-uc69yhuklp] { max-width: 180px; font-size: .8rem; font-weight: 450; line-height: 1.35; }
.memory-modal-photo-upload.has-photo[b-uc69yhuklp] { border-style: solid; background: #2f2825; }
.memory-modal-photo-upload.has-photo > img[b-uc69yhuklp] { display: block; width: 100%; height: 230px; object-fit: contain; }
.memory-modal-photo-controls[b-uc69yhuklp] { position: absolute; inset: auto .65rem .65rem; display: flex; justify-content: center; gap: .5rem; }
.memory-modal-photo-controls label[b-uc69yhuklp], .memory-modal-photo-controls button[b-uc69yhuklp] { min-height: 40px; padding: .5rem .75rem; border: 1px solid rgba(255,255,255,.48); border-radius: 999px; background: rgba(37,27,23,.75); color: #fffaf6; font: 700 .78rem/1 var(--font-sans, sans-serif); cursor: pointer; backdrop-filter: blur(8px); }
.memory-modal-file-input[b-uc69yhuklp] { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; }
.memory-modal-details-fields[b-uc69yhuklp] { display: grid; gap: 1rem; }
.memory-modal-date-field[b-uc69yhuklp] { display: grid; gap: .4rem; color: #604a41; font-size: .88rem; font-weight: 720; }
.memory-modal-date-field small[b-uc69yhuklp] { color: #8d7468; font-weight: 450; line-height: 1.4; }
.memory-modal-today[b-uc69yhuklp] { justify-self: start; min-height: 40px; padding: .45rem .75rem; border: 1px solid rgba(126,87,70,.22); border-radius: 999px; background: transparent; color: #78574b; font: 700 .8rem/1 var(--font-sans, sans-serif); cursor: pointer; }
.memory-modal-consent[b-uc69yhuklp] { display: flex; align-items: flex-start; gap: .65rem; min-height: 44px; padding: .9rem 1rem; border-radius: 14px; background: #fff6ed; color: #5e463e; font-size: .88rem; line-height: 1.45; cursor: pointer; }
.memory-modal-consent input[b-uc69yhuklp] { width: 19px; height: 19px; margin-top: .05rem; accent-color: #a35f49; }
.memory-modal-consent-hint[b-uc69yhuklp] { margin: -.75rem 0 0; color: #9b4d3e; font-size: .8rem; }
.memory-modal-recording-manager[b-uc69yhuklp] { margin-top: 0; }
.memory-modal-recording-header[b-uc69yhuklp] { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.memory-modal-voice-actions[b-uc69yhuklp], .memory-modal-proposal-actions[b-uc69yhuklp] { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.memory-modal-quiet-action[b-uc69yhuklp], .memory-modal-danger-action[b-uc69yhuklp], .memory-modal-proposal-actions button[b-uc69yhuklp] { min-height: 44px; padding: .6rem .85rem; border: 1px solid rgba(123,83,67,.28); border-radius: 999px; background: rgba(255,252,248,.75); color: #69483d; font: 700 .84rem/1.15 var(--font-sans, sans-serif); cursor: pointer; }
.memory-modal-quiet-action:hover:not(:disabled)[b-uc69yhuklp], .memory-modal-proposal-actions button:hover:not(:disabled)[b-uc69yhuklp] { border-color: rgba(157,84,63,.56); background: #fffdf9; }
.memory-modal-danger-action[b-uc69yhuklp] { border-color: rgba(157,75,57,.36); color: #914533; }
.memory-modal-danger-action:hover:not(:disabled)[b-uc69yhuklp] { background: #fff0eb; }
.memory-modal-quiet-action:disabled[b-uc69yhuklp], .memory-modal-danger-action:disabled[b-uc69yhuklp] { cursor: wait; opacity: .55; }
.memory-modal-remove-confirmation[b-uc69yhuklp] { display: grid; gap: .65rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(174,83,59,.25); border-radius: 14px; background: rgba(255,238,231,.82); color: #764332; }
.memory-modal-remove-confirmation p[b-uc69yhuklp] { margin: 0; font-size: .9rem; line-height: 1.45; }
.memory-modal-remove-confirmation div[b-uc69yhuklp] { display: flex; flex-wrap: wrap; gap: .6rem; }
.memory-modal-empty-recording[b-uc69yhuklp] { margin: 0; color: #786057; line-height: 1.5; }
.memory-modal-recorder-shell[b-uc69yhuklp] { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(145,95,74,.16); }
.memory-modal-recorder-note[b-uc69yhuklp] { margin: .8rem 0 0; color: #80675c; font-size: .8rem; line-height: 1.45; }
.memory-modal-audio-retention[b-uc69yhuklp] { display: flex; align-items: flex-start; gap: .7rem; margin-top: .85rem; padding: .85rem .9rem; border: 1px solid rgba(145,95,74,.18); border-radius: 14px; background: rgba(255,252,248,.72); color: #5e463e; cursor: pointer; }
.memory-modal-audio-retention input[b-uc69yhuklp] { width: 19px; height: 19px; margin-top: .12rem; accent-color: #a35f49; }
.memory-modal-audio-retention span[b-uc69yhuklp] { line-height: 1.4; }
.memory-modal-audio-retention small[b-uc69yhuklp] { display: block; margin-top: .2rem; color: #80675c; font-size: .8rem; line-height: 1.4; }
.memory-modal-transcript-proposal[b-uc69yhuklp] { display: grid; gap: .6rem; margin-top: 1rem; padding: 1rem; border: 1px solid rgba(180,119,82,.28); border-radius: 15px; background: rgba(255,250,244,.72); }
.memory-modal-transcript-proposal h4[b-uc69yhuklp] { margin: 0; color: #51382f; font-family: var(--font-serif, Georgia, serif); font-size: 1.18rem; }
.memory-modal-transcript-proposal > p:not(.memory-modal-section-label)[b-uc69yhuklp] { margin: 0; color: #705a50; font-size: .88rem; line-height: 1.5; }
.memory-modal-proposal-text[b-uc69yhuklp] { padding: .8rem; border-radius: 10px; background: rgba(255,255,255,.64); color: #49362e !important; white-space: pre-wrap; }
.memory-modal-voice-notice[b-uc69yhuklp] { margin: .7rem 0 0; color: #6f594f; font-size: .85rem; }
.memory-modal-voice-error[b-uc69yhuklp] { margin: .7rem 0 0; color: #9b4737; font-size: .85rem; }
.memory-modal-quota[b-uc69yhuklp] { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; border: 1px solid rgba(196,154,108,.24); border-left: 4px solid #c49a6c; border-radius: 13px; background: #fff9f5; color: #5d4037; }
.memory-modal-quota.is-blocked[b-uc69yhuklp] { border-left-color: #a86e4c; }
.memory-modal-quota strong[b-uc69yhuklp] { display: block; font-size: .92rem; }
.memory-modal-quota p[b-uc69yhuklp] { margin: .25rem 0 0; color: #8b7355; font-size: .82rem; line-height: 1.4; }
.memory-modal-quota a[b-uc69yhuklp] { flex: 0 0 auto; color: #7e4938; font-size: .82rem; font-weight: 750; }
.memory-modal-private-relationship[b-uc69yhuklp] { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1rem; border: 1px solid rgba(139,91,72,.18); border-radius: 14px; background: #f9ece6; color: #65483f; }
.memory-modal-private-relationship strong[b-uc69yhuklp] { display: block; font-size: .92rem; }
.memory-modal-private-relationship p[b-uc69yhuklp] { margin: .25rem 0 0; color: #80675f; font-size: .84rem; line-height: 1.45; }
.memory-modal-family-offer[b-uc69yhuklp] { position: relative; display: grid; grid-template-columns: auto 1fr; gap: .7rem; align-items: flex-start; margin-top: .85rem; padding-top: .8rem; border-top: 1px solid rgba(139,91,72,.15); cursor: pointer; }
.memory-modal-family-offer input[b-uc69yhuklp] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.memory-modal-family-offer-control[b-uc69yhuklp] { position: relative; width: 1.25rem; height: 1.25rem; margin-top: .08rem; border: 1.5px solid rgba(139,91,72,.45); border-radius: .38rem; background: rgba(255,255,255,.72); }
.memory-modal-family-offer-control[b-uc69yhuklp]::after { content: ""; position: absolute; left: .35rem; top: .16rem; width: .34rem; height: .62rem; border: solid #fff; border-width: 0 2px 2px 0; opacity: 0; transform: rotate(42deg); }
.memory-modal-family-offer input:checked + .memory-modal-family-offer-control[b-uc69yhuklp] { border-color: #8b5b48; background: #8b5b48; }
.memory-modal-family-offer input:checked + .memory-modal-family-offer-control[b-uc69yhuklp]::after { opacity: 1; }
.memory-modal-family-offer input:focus-visible + .memory-modal-family-offer-control[b-uc69yhuklp] { outline: 2px solid rgba(139,91,72,.32); outline-offset: 3px; }
.memory-modal-family-offer strong[b-uc69yhuklp] { display: block; color: #65483f; font-size: .88rem; }
.memory-modal-family-offer small[b-uc69yhuklp] { display: block; margin-top: .22rem; color: #80675f; font-size: .79rem; line-height: 1.45; }
.memory-modal-footer[b-uc69yhuklp] { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; justify-content: flex-end; gap: .7rem; padding: 1rem clamp(1.25rem, 3vw, 2.25rem) calc(1rem + env(safe-area-inset-bottom)); border-top: 1px solid rgba(125,90,73,.13); background: rgba(255,249,243,.95); box-shadow: 0 -10px 25px rgba(68,45,34,.045); backdrop-filter: blur(10px); }
.memory-modal-primary[b-uc69yhuklp], .memory-modal-secondary[b-uc69yhuklp], .memory-modal-another[b-uc69yhuklp] { min-height: 46px; padding: .72rem 1.15rem; border-radius: 999px; font: 700 .9rem/1.1 var(--font-sans, sans-serif); cursor: pointer; }
.memory-modal-primary[b-uc69yhuklp] { border: 1px solid #4a342e; background: #4a342e; color: #fffaf6; box-shadow: 0 8px 18px rgba(74,52,46,.16); }
.memory-modal-primary:hover:not(:disabled)[b-uc69yhuklp] { background: #62463d; transform: translateY(-1px); }
.memory-modal-secondary[b-uc69yhuklp] { border: 1px solid rgba(123,83,67,.22); background: transparent; color: #70584e; }
.memory-modal-secondary:hover:not(:disabled)[b-uc69yhuklp] { background: #fffdf9; }
.memory-modal-another[b-uc69yhuklp] { margin-right: auto; padding-inline: 0; border: 0; background: transparent; color: #9a604e; text-align: left; }
.memory-modal-another:hover[b-uc69yhuklp] { color: #754637; text-decoration: underline; text-underline-offset: 3px; }
.memory-modal-primary:disabled[b-uc69yhuklp], .memory-modal-secondary:disabled[b-uc69yhuklp] { cursor: wait; opacity: .55; transform: none; }
.memory-modal-spinner[b-uc69yhuklp] { width: 14px; height: 14px; display: inline-block; margin-right: .4rem; border: 2px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: memory-modal-spin-b-uc69yhuklp .75s linear infinite; vertical-align: -2px; }
@keyframes memory-modal-spin-b-uc69yhuklp { to { transform: rotate(360deg); } }
.visually-hidden[b-uc69yhuklp] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; clip-path: inset(50%); }
@media (max-width: 768px) {
.memory-modal-overlay[b-uc69yhuklp] { display: block; padding: 0; overflow: hidden; }
.memory-modal-dialog[b-uc69yhuklp] { width: 100%; max-height: none; height: 100dvh; border: 0; border-radius: 0; overflow: auto; }
.memory-modal-header[b-uc69yhuklp] { padding: 1rem 4rem 1rem 1rem; }
.memory-modal-avatar[b-uc69yhuklp] { width: 54px; height: 54px; flex-basis: 54px; }
.memory-modal-heading-copy h2[b-uc69yhuklp] { font-size: 1.55rem; white-space: normal; }
.memory-modal-main[b-uc69yhuklp] { padding: 1.2rem 1rem; }
.memory-modal-reading-layout.has-media[b-uc69yhuklp], .memory-modal-edit-grid[b-uc69yhuklp] { grid-template-columns: 1fr; }
.memory-modal-photo[b-uc69yhuklp] { position: static; }
.memory-modal-photo img[b-uc69yhuklp] { max-height: 45dvh; }
.memory-modal-edit-grid[b-uc69yhuklp] { gap: 1.1rem; }
.memory-modal-photo-upload.has-photo > img[b-uc69yhuklp] { height: min(48dvh, 330px); }
.memory-modal-voice-invitation[b-uc69yhuklp] { grid-template-columns: auto minmax(0, 1fr); gap: .75rem; }
.memory-modal-voice-invitation-action[b-uc69yhuklp] { grid-column: 1 / -1; width: 100%; }
.memory-modal-footer[b-uc69yhuklp] { flex-wrap: wrap; gap: .55rem; padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom)); }
.memory-modal-primary[b-uc69yhuklp], .memory-modal-secondary[b-uc69yhuklp] { flex: 1 1 0; padding-inline: .8rem; }
.memory-modal-another[b-uc69yhuklp] { order: -1; flex: 1 0 100%; margin-right: 0; padding: .35rem .5rem; text-align: center; }
}
@media (min-width: 769px) and (max-width: 1024px) and (orientation: portrait) { .memory-modal-reading-layout.has-media[b-uc69yhuklp] { grid-template-columns: 1fr; } .memory-modal-photo[b-uc69yhuklp] { position: static; max-width: 480px; } }
@media (prefers-reduced-motion: reduce) { *[b-uc69yhuklp], *[b-uc69yhuklp]::before, *[b-uc69yhuklp]::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
/* /Components/MobileTopBar.razor.rz.scp.css */
/* MobileTopBar - Floating transparent header (premium memorial-page style) */
/* Follows the pointer-events pattern from MemorialPage floating headers */
.mobile-floating-header[b-c8x160tvjz] {
display: none; /* Hidden on desktop — CSS-only visibility */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1300;
padding: 16px calc(20px + env(safe-area-inset-right, 0px)) 12px calc(20px + env(safe-area-inset-left, 0px));
pointer-events: none;
align-items: center;
justify-content: space-between;
gap: 12px;
box-sizing: border-box;
background: transparent;
transition: background 0.24s ease, box-shadow 0.24s ease, backdrop-filter 0.24s ease;
}
@media (max-width: 1024px) {
.mobile-floating-header[b-c8x160tvjz] {
display: flex;
}
}
.mobile-floating-header.menu-open[b-c8x160tvjz] {
background:
linear-gradient(180deg, rgba(253, 247, 237, 0.98) 0%, rgba(253, 247, 237, 0.92) 78%, rgba(253, 247, 237, 0) 100%);
}
.mobile-floating-header.topbar-scrolled[b-c8x160tvjz] {
background:
linear-gradient(180deg, rgba(253, 247, 237, 0.78) 0%, rgba(253, 247, 237, 0.48) 72%, rgba(253, 247, 237, 0) 100%);
-webkit-backdrop-filter: blur(1.5px) saturate(1.04);
backdrop-filter: blur(1.5px) saturate(1.04);
box-shadow: 0 8px 26px rgba(96, 68, 48, 0.025);
}
.mobile-floating-header.menu-open.topbar-scrolled[b-c8x160tvjz] {
background:
linear-gradient(180deg, rgba(253, 247, 237, 0.98) 0%, rgba(253, 247, 237, 0.92) 78%, rgba(253, 247, 237, 0) 100%);
}
/* Logo */
.mobile-header-logo[b-c8x160tvjz] {
pointer-events: all;
display: flex;
align-items: center;
min-height: 44px;
text-decoration: none;
color: #4B2E2E;
transition: color 0.2s ease;
}
.mobile-header-logo:hover[b-c8x160tvjz] {
color: #3b241f;
}
/* Actions container */
.mobile-header-actions[b-c8x160tvjz] {
pointer-events: all;
display: flex;
align-items: center;
gap: 10px;
}
/* Round hamburger button (frosted glass) */
.mobile-menu-btn[b-c8x160tvjz] {
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid rgba(164, 123, 80, 0.2);
background: rgba(253, 248, 240, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
flex-shrink: 0;
padding: 0;
}
.mobile-menu-btn:hover[b-c8x160tvjz] {
background: rgba(253, 248, 240, 0.95);
box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
}
.mobile-menu-btn:active[b-c8x160tvjz] {
transform: scale(0.95);
}
.mobile-menu-btn.is-open[b-c8x160tvjz] {
background: rgba(255, 253, 248, 0.96);
border-color: rgba(151, 105, 75, 0.18);
box-shadow:
0 10px 24px rgba(96, 68, 48, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.74);
}
/* Guest CTA pill (frosted glass treatment) */
.mobile-cta-pill[b-c8x160tvjz] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
background: rgba(253, 248, 240, 0.88);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(164, 123, 80, 0.25);
padding: 8px 18px;
border-radius: 22px;
color: #3b241f;
font-weight: 600;
font-size: 0.88rem;
cursor: pointer;
transition: background 0.2s ease, box-shadow 0.2s ease;
white-space: nowrap;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
pointer-events: all;
}
.mobile-cta-pill:hover[b-c8x160tvjz] {
background: rgba(253, 248, 240, 0.97);
box-shadow: 0 4px 12px rgba(139, 115, 85, 0.15);
}
.mobile-cta-pill:active[b-c8x160tvjz] {
background: rgba(242, 201, 165, 0.9);
}
/* Night mode */
:global(body.night-mode) .mobile-floating-header[b-c8x160tvjz] {
background: transparent;
}
:global(body.night-mode) .mobile-floating-header.menu-open[b-c8x160tvjz] {
background:
linear-gradient(180deg, rgba(38, 32, 27, 0.97) 0%, rgba(38, 32, 27, 0.9) 78%, rgba(38, 32, 27, 0) 100%);
}
:global(body.night-mode) .mobile-floating-header.topbar-scrolled[b-c8x160tvjz] {
background:
linear-gradient(180deg, rgba(38, 32, 27, 0.74) 0%, rgba(38, 32, 27, 0.48) 72%, rgba(38, 32, 27, 0) 100%);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.11);
}
:global(body.night-mode) .mobile-floating-header.menu-open.topbar-scrolled[b-c8x160tvjz] {
background:
linear-gradient(180deg, rgba(38, 32, 27, 0.97) 0%, rgba(38, 32, 27, 0.9) 78%, rgba(38, 32, 27, 0) 100%);
}
:global(body.night-mode) .mobile-header-logo[b-c8x160tvjz] {
color: #E8DDD0;
}
:global(body.night-mode) .mobile-menu-btn[b-c8x160tvjz] {
background: rgba(40, 35, 30, 0.75);
border-color: rgba(180, 140, 90, 0.25);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
:global(body.night-mode) .mobile-menu-btn.is-open[b-c8x160tvjz] {
background: rgba(58, 48, 39, 0.94);
border-color: rgba(213, 170, 121, 0.25);
}
:global(body.night-mode) .mobile-menu-btn svg line[b-c8x160tvjz] {
stroke: #E8DDD0;
}
:global(body.night-mode) .mobile-cta-pill[b-c8x160tvjz] {
background: rgba(40, 35, 30, 0.75);
border-color: rgba(180, 140, 90, 0.25);
color: #E8DDD0;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
@media (max-width: 480px) {
.mobile-floating-header[b-c8x160tvjz] {
gap: 6px;
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
.mobile-header-actions[b-c8x160tvjz] {
gap: 6px;
}
.mobile-cta-pill[b-c8x160tvjz] {
padding-left: 10px;
padding-right: 10px;
font-size: 0.84rem;
}
}
@media (max-width: 380px) {
.mobile-floating-header[b-c8x160tvjz] {
gap: 8px;
padding-left: calc(16px + env(safe-area-inset-left, 0px));
padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
.mobile-cta-pill[b-c8x160tvjz] {
padding-left: 8px;
padding-right: 8px;
}
}
/* /Components/MyJourneyMemories.razor.rz.scp.css */
.journey-memories[b-j1nnqblvbd] {
color: var(--text-dark);
font-family: var(--font-sans);
line-height: 1.65;
overflow-wrap: anywhere;
}
.journey-memories h3[b-j1nnqblvbd], .journey-memories h4[b-j1nnqblvbd] { font-family: var(--font-serif); }
.journey-memories h3[b-j1nnqblvbd] { font-size: 1.6rem; margin: 0 0 .75rem; }
.journey-memories h4[b-j1nnqblvbd] { font-size: 1.15rem; margin: .25rem 0; }
.journey-memories p[b-j1nnqblvbd] { margin: .5rem 0; }
.journey-boundary[b-j1nnqblvbd], .journey-kind[b-j1nnqblvbd] { font-size: .9rem; }
.journey-boundary[b-j1nnqblvbd] { padding-left: 1rem; border-left: 3px solid var(--accent1); }
.journey-list[b-j1nnqblvbd] { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.journey-list li[b-j1nnqblvbd] { padding: 1.5rem 0; border-top: 1px solid var(--accent1); }
.journey-origin[b-j1nnqblvbd] { font-size: .85rem; font-weight: 600; }
.journey-source[b-j1nnqblvbd] { white-space: pre-wrap; padding: .75rem; background: var(--secondary-bg); border-radius: .5rem; }
.journey-actions[b-j1nnqblvbd] { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1rem; }
.journey-actions a[b-j1nnqblvbd], .journey-memories button[b-j1nnqblvbd], .journey-memories summary[b-j1nnqblvbd] { min-height: 44px; padding: .5rem 0; color: inherit; cursor: pointer; }
.journey-memories button[b-j1nnqblvbd] { border: 0; background: transparent; font: inherit; text-decoration: underline; text-underline-offset: .2em; }
.journey-memories button:disabled[b-j1nnqblvbd] { opacity: .55; cursor: wait; }
.journey-memories :is(a, button, summary):focus-visible[b-j1nnqblvbd] { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 3px; }
.journey-empty[b-j1nnqblvbd] { padding-block: 1.5rem; }
/* /Components/MyStoryFamilySection.razor.rz.scp.css */
.my-story-family-space[b-cbuh4kxrkv] {
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.my-story-family-privacy[b-cbuh4kxrkv] {
display: flex;
align-items: flex-start;
gap: .85rem;
margin-bottom: 1.1rem;
padding: 1rem 1.1rem;
border: 1px solid rgba(157, 116, 98, .22);
border-radius: 16px;
background: rgba(255, 250, 244, .76);
color: #66544c;
}
.my-story-family-privacy__icon[b-cbuh4kxrkv] {
display: inline-grid;
width: 2.5rem;
height: 2.5rem;
flex: 0 0 auto;
place-items: center;
border-radius: 50%;
background: rgba(183, 119, 94, .12);
color: #8b5d4e;
}
.my-story-family-privacy__icon svg[b-cbuh4kxrkv] {
width: 1.35rem;
height: 1.35rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}
.my-story-family-privacy > span:last-child[b-cbuh4kxrkv] {
display: grid;
gap: .18rem;
line-height: 1.5;
}
.my-story-family-privacy strong[b-cbuh4kxrkv] {
color: #4d4039;
font-family: var(--font-serif);
font-size: 1.05rem;
}
.my-story-family-editor[b-cbuh4kxrkv] {
box-sizing: border-box;
width: 100%;
min-width: 0;
overflow: hidden;
padding: clamp(1rem, 3vw, 1.5rem);
border: 1px solid rgba(167, 129, 113, .24);
border-radius: 22px;
background: rgba(255, 253, 250, .9);
box-shadow: 0 16px 38px rgba(79, 59, 52, .08);
}
.my-story-family-error[b-cbuh4kxrkv] {
display: grid;
justify-items: start;
gap: 1rem;
padding: 1.25rem;
border: 1px solid rgba(178, 89, 76, .35);
border-radius: 16px;
background: rgba(255, 246, 242, .9);
color: #7b3f37;
}
.my-story-family-error p[b-cbuh4kxrkv] {
margin: 0;
line-height: 1.55;
}
.my-story-family-error button[b-cbuh4kxrkv] {
min-height: 44px;
padding: .65rem 1.1rem;
border: 1px solid #8b5d4e;
border-radius: 999px;
background: #8b5d4e;
color: #fffaf5;
cursor: pointer;
font: 700 .95rem/1 var(--font-sans);
}
.my-story-family-error button:hover[b-cbuh4kxrkv] {
background: #71483c;
}
.my-story-family-error button:focus-visible[b-cbuh4kxrkv] {
outline: 3px solid #875e50;
outline-offset: 3px;
}
[b-cbuh4kxrkv] .my-story-family-loader {
min-height: min(460px, 55vh);
}
[b-cbuh4kxrkv] .tree-tab {
max-width: none;
}
@media (max-width: 620px) {
.my-story-family-privacy[b-cbuh4kxrkv] {
gap: .7rem;
padding: .9rem;
border-radius: 14px;
}
.my-story-family-privacy__icon[b-cbuh4kxrkv] {
width: 2.25rem;
height: 2.25rem;
}
.my-story-family-editor[b-cbuh4kxrkv] {
padding: .65rem;
border-radius: 16px;
}
}
/* /Components/MyStoryStart.razor.rz.scp.css */
.story-start[b-w7fgwlwf8c] {
--story-ink: #4d4039;
--story-accent: #79564d;
--story-border: #ddc4b8;
padding: clamp(1.2rem, 4vw, 2rem);
margin-bottom: 1.5rem;
color: var(--story-ink);
background: #fffaf4;
border: 1px solid var(--story-border);
border-radius: 20px;
}
.eyebrow[b-w7fgwlwf8c] { font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
h2[b-w7fgwlwf8c] { font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2rem); margin: .5rem 0; }
p[b-w7fgwlwf8c] { line-height: 1.65; }
fieldset[b-w7fgwlwf8c] { border: 0; padding: 0; margin: 1.5rem 0; min-width: 0; }
legend[b-w7fgwlwf8c] { margin-bottom: .65rem; font-weight: 600; }
.topics[b-w7fgwlwf8c] { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.topic[b-w7fgwlwf8c] { display: flex; align-items: center; gap: .6rem; min-height: 48px; padding: .7rem; border: 1px solid var(--story-border); border-radius: 10px; cursor: pointer; }
.topic:has(input:checked)[b-w7fgwlwf8c] { background: #f8e5da; border-color: var(--story-accent); }
input[b-w7fgwlwf8c] { accent-color: var(--story-accent); flex-shrink: 0; }
.question[b-w7fgwlwf8c] { padding: .75rem 1rem; border-left: 3px solid var(--story-accent); margin: 1.5rem 0; }
.question p[b-w7fgwlwf8c] { font-family: var(--font-serif); font-size: 1.2rem; margin: 0; }
.actions[b-w7fgwlwf8c] { display: flex; flex-wrap: wrap; gap: .7rem; }
button[b-w7fgwlwf8c] { font: inherit; min-height: 44px; padding: .75rem 1rem; border-radius: 10px; cursor: pointer; }
.primary[b-w7fgwlwf8c] { color: #fff; background: var(--story-accent); border: 1px solid var(--story-accent); }
.secondary[b-w7fgwlwf8c] { color: var(--story-ink); background: transparent; border: 1px solid var(--story-border); }
.hint[b-w7fgwlwf8c] { font-size: .9rem; }
.text-button[b-w7fgwlwf8c] { color: var(--story-accent); background: transparent; border: 0; text-decoration: underline; text-underline-offset: 3px; padding-left: 0; }
details[b-w7fgwlwf8c] { margin-top: 1rem; border-top: 1px solid var(--story-border); padding-top: .7rem; }
summary[b-w7fgwlwf8c] { cursor: pointer; padding: .7rem 0; min-height: 44px; }
details p[b-w7fgwlwf8c] { font-size: .95rem; }
button:focus-visible[b-w7fgwlwf8c], input:focus-visible[b-w7fgwlwf8c], summary:focus-visible[b-w7fgwlwf8c] { outline: 3px solid var(--story-accent); outline-offset: 3px; }
button:disabled[b-w7fgwlwf8c], fieldset:disabled[b-w7fgwlwf8c] { opacity: .65; cursor: default; }
@media (max-width: 480px) {
.topics[b-w7fgwlwf8c] { grid-template-columns: 1fr; }
.actions[b-w7fgwlwf8c] { flex-direction: column; }
.actions button[b-w7fgwlwf8c] { width: 100%; }
}
/* /Components/NewLovedOneOnboarding.razor.rz.scp.css */
/* === Modal Overlay and Centering === */
.modal-overlay[b-x2lcq3s2u7] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2000;
background-color: rgba(40, 25, 15, 0.55);
display: flex;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease;
}
.modal-overlay.visible[b-x2lcq3s2u7] {
opacity: 1;
pointer-events: all;
}
.step-modal-content[b-x2lcq3s2u7], .modal-content[b-x2lcq3s2u7] {
background: #FDF6F0;
border-radius: 28px;
box-shadow: 0 6px 36px 0 rgba(89, 74, 58, 0.10);
/*padding: 2.4rem 2.6rem 2rem 2.6rem;*/
min-width: 340px;
max-width: 520px; /* Default width for mobile */
width: 100%;
position: relative;
color: #32281b;
font-family: 'Lato', 'Segoe UI', Arial, sans-serif;
text-align: left;
}
/* Make modal wider on desktop */
@media (min-width: 992px) {
.step-modal-content[b-x2lcq3s2u7], .modal-content[b-x2lcq3s2u7] {
max-width: 720px; /* Increased width for desktop */
/*padding: 2.6rem 3rem 2.2rem 3rem;*/ /* Slightly increased padding for desktop */
}
}
/* === Headings & Paragraphs === */
.step-modal-content h2[b-x2lcq3s2u7] {
font-size: 2rem;
font-weight: 700;
color: #3c2917;
margin-bottom: 0.8em;
letter-spacing: -1px;
}
.step-modal-content p[b-x2lcq3s2u7] {
font-size: 1.08rem;
color: #78685c;
margin-bottom: 1.1em;
}
/* === Inputs and Textareas === */
.step-modal-content input[type="text"][b-x2lcq3s2u7],
.step-modal-content input[type="number"][b-x2lcq3s2u7],
.step-modal-content select[b-x2lcq3s2u7],
.step-modal-content textarea[b-x2lcq3s2u7] {
display: block;
width: 100%;
margin-bottom: 1.2em;
padding: 0.92em 1.1em;
border-radius: 15px;
border: 1.3px solid #f0e1d0;
background: #fff9f4;
font-size: 1.06rem;
color: #473b26;
transition: border 0.18s;
box-sizing: border-box;
outline: none;
}
.step-modal-content input:focus[b-x2lcq3s2u7],
.step-modal-content textarea:focus[b-x2lcq3s2u7],
.step-modal-content select:focus[b-x2lcq3s2u7] {
border-color: #fbbbad;
background: #fff6f0;
}
/* === Buttons === */
.btn-modal-primary[b-x2lcq3s2u7], .btn-modal-secondary[b-x2lcq3s2u7], .btn-modal-tertiary[b-x2lcq3s2u7], .btn[b-x2lcq3s2u7] {
padding: 0.68em 1.65em;
border-radius: 22px;
font-size: 1.11rem;
font-weight: 600;
border: none;
outline: none;
margin-right: 0.75em;
margin-top: 0.4em;
cursor: pointer;
transition: background 0.19s;
letter-spacing: -0.5px;
}
.btn-modal-primary[b-x2lcq3s2u7], .btn-primary[b-x2lcq3s2u7] {
background: #fbbbad;
color: #38250d;
box-shadow: 0 2px 8px rgba(247,186,173,0.10);
}
.btn-modal-primary:disabled[b-x2lcq3s2u7] {
background: #f4d8cc;
color: #a1887f;
cursor: not-allowed;
}
.btn-modal-secondary[b-x2lcq3s2u7] {
background: #f9e1c6;
color: #835c34;
}
.btn-modal-tertiary[b-x2lcq3s2u7] {
background: none;
color: #a37a4c;
border: 1.2px solid #efd7bb;
}
/* === Example/Helper Texts === */
.example-stories[b-x2lcq3s2u7] {
background: #fff3ea;
border-radius: 18px;
padding: 0.9em 1.2em;
font-size: 0.98rem;
color: #967f6b;
margin-bottom: 1.2em;
}
.example-stories p[b-x2lcq3s2u7] {
margin: 0 0 0.45em 0;
font-style: italic;
}
.step-buttons[b-x2lcq3s2u7] {
display: flex;
flex-direction: row;
justify-content: space-between;
margin-top: 2rem;
}
/* When we need all buttons aligned to the right */
.step-buttons.right-aligned[b-x2lcq3s2u7] {
justify-content: flex-end;
gap: 1rem;
}
/* === File input styling (optional) === */
.step-modal-content input[type="file"][b-x2lcq3s2u7] {
padding: 0.7em 0;
background: transparent;
border: none;
font-size: 0.97rem;
}
/* === Preview Image (photo upload) === */
.photo-upload-area[b-x2lcq3s2u7] {
margin: 1.5rem 0;
}
.step-modal-content img[b-x2lcq3s2u7], .preview-photo[b-x2lcq3s2u7] {
display: block;
margin: 1.2rem 0;
border-radius: 16px;
box-shadow: 0 1px 8px rgba(140,116,90,0.09);
max-width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
}
@media (max-width: 768px) {
:global(html:has(.modal-overlay.visible))[b-x2lcq3s2u7],
:global(body:has(.modal-overlay.visible))[b-x2lcq3s2u7] {
width: 100%;
height: 100%;
overflow: hidden !important;
}
.modal-overlay[b-x2lcq3s2u7] {
align-items: stretch !important;
justify-content: stretch !important;
padding: 0;
overflow: hidden;
}
.modal-content[b-x2lcq3s2u7] {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
height: 100vh !important;
max-height: none !important;
border-radius: 0 !important;
/*padding: 1.5rem 1.25rem !important;*/
box-shadow: none !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-start;
}
@supports (height: 100svh) {
.modal-content[b-x2lcq3s2u7] {
height: 100svh !important;
}
}
.modal-content .modal-footer[b-x2lcq3s2u7],
.lovedone-modal-footer[b-x2lcq3s2u7] {
padding-bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
}
}
/* /Components/NotificationMenu.razor.rz.scp.css */
/* NotificationMenu.razor.css */
.notification-menu[b-tyvv8tmdc0] {
position: fixed;
top: 1.5rem;
right: 2.5rem;
z-index: 1000;
font-family: var(--font-lato);
}
.notification-menu > button[b-tyvv8tmdc0] {
background: var(--sidebar-bg);
border: none;
border-radius: 50%;
width: 48px;
height: 48px;
box-shadow: 0 2px 8px rgba(75, 46, 46, 0.08);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
position: relative;
transition: background 0.2s;
}
.notification-menu > button:hover[b-tyvv8tmdc0] {
background: var(--accent);
}
.icon-bell[b-tyvv8tmdc0] {
font-size: 1.5rem;
color: var(--text-light);
}
.notification-dot[b-tyvv8tmdc0] {
position: absolute;
top: 10px;
right: 10px;
width: 12px;
height: 12px;
background: var(--accent);
border-radius: 50%;
border: 2px solid var(--sidebar-bg);
box-shadow: 0 0 0 2px var(--card-content-bg);
}
.notification-list[b-tyvv8tmdc0] {
position: absolute;
right: 0;
top: 60px;
min-width: 320px;
max-width: 400px;
background: var(--card-content-bg);
border-radius: 16px;
box-shadow: 0 8px 32px rgba(75, 46, 46, 0.15);
padding: 1rem 0.5rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
animation: fadeIn-b-tyvv8tmdc0 0.2s;
}
@keyframes fadeIn-b-tyvv8tmdc0 {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.notification-item[b-tyvv8tmdc0] {
display: flex;
align-items: center;
justify-content: space-between;
background: var(--main-content-bg);
border-radius: 10px;
padding: 0.75rem 1rem;
font-size: 0.98rem;
color: var(--text);
box-shadow: 0 2px 8px rgba(75, 46, 46, 0.04);
border-left: 4px solid var(--accent);
gap: 0.75rem;
min-height: 48px;
}
.notification-item.progress[b-tyvv8tmdc0] {
border-left-color: var(--accent);
}
.notification-item.success[b-tyvv8tmdc0] {
border-left-color: #8bc34a;
background: #f3faef;
}
.notification-item.error[b-tyvv8tmdc0] {
border-left-color: #e57373;
background: #fff0f0;
color: #a00;
}
.notification-item .spinner[b-tyvv8tmdc0] {
width: 18px;
height: 18px;
border: 2px solid var(--accent);
border-top: 2px solid var(--peach);
border-radius: 50%;
animation: spin-b-tyvv8tmdc0 1s linear infinite;
margin-left: 0.5rem;
}
@keyframes spin-b-tyvv8tmdc0 {
to {
transform: rotate(360deg);
}
}
.notification-item > button[b-tyvv8tmdc0] {
background: none;
border: none;
color: var(--text-light);
font-size: 1.2rem;
cursor: pointer;
margin-left: 0.5rem;
border-radius: 50%;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.notification-item > button:hover[b-tyvv8tmdc0] {
background: var(--soft-border);
color: var(--text);
}
/* /Components/OracleAskCard.razor.rz.scp.css */
/* ─── Parchment Card ─── */
.oracle-card.parchment[b-ywngcuft2n] {
width: min(720px, 100%);
margin: 0 auto;
background: radial-gradient(ellipse at 50% 40%, #f5ead4 0%, #e8d5b8 55%, #d4be9a 100%);
border: 4px double #a07a52;
border-radius: 10px;
box-shadow:
0 20px 50px rgba(0,0,0,0.6),
inset 0 0 100px rgba(139, 69, 19, 0.18),
inset 0 0 30px rgba(160, 120, 60, 0.08);
padding: clamp(2rem, 5vw, 3rem);
text-align: center;
position: relative;
z-index: 2;
}
/* Decorative inner frame */
.oracle-card.parchment[b-ywngcuft2n]::before {
content: '';
position: absolute;
inset: 14px;
border: 1px solid rgba(160, 120, 70, 0.4);
border-radius: 6px;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(160, 120, 70, 0.12);
}
/* Corner ornaments on the inner frame */
.oracle-card.parchment[b-ywngcuft2n]::after {
content: '';
position: absolute;
inset: 10px;
border: 1px solid transparent;
border-image: repeating-linear-gradient(
90deg,
rgba(160, 120, 70, 0.3) 0px,
rgba(160, 120, 70, 0.3) 4px,
transparent 4px,
transparent 8px
) 1;
pointer-events: none;
border-radius: 0;
}
.oracle-card h1[b-ywngcuft2n] {
margin: 0 0 1.4rem;
color: #3d2b1f;
font-family: var(--font-serif);
font-size: clamp(1.7rem, 4.5vw, 2.6rem);
font-weight: 500;
position: relative;
z-index: 1;
}
/* ─── Input (pressed into parchment) ─── */
.oracle-question-input[b-ywngcuft2n] {
width: 100%;
border-radius: 8px;
border: 1px solid rgba(160, 120, 70, 0.45);
background-color: rgba(255, 255, 255, 0.35);
padding: 1rem 1.1rem;
font-family: var(--font-serif);
font-size: 1.15rem;
font-style: italic;
color: #3E2723;
resize: vertical;
min-height: 140px;
box-shadow: inset 0 2px 8px rgba(100, 60, 20, 0.1);
position: relative;
z-index: 1;
}
.oracle-question-input:focus[b-ywngcuft2n] {
outline: none;
border-color: rgba(160, 120, 70, 0.7);
box-shadow: inset 0 2px 8px rgba(100, 60, 20, 0.14), 0 0 0 2px rgba(193, 154, 107, 0.15);
}
.oracle-question-input[b-ywngcuft2n]::placeholder {
color: rgba(80, 55, 35, 0.5);
font-style: italic;
}
/* ─── Chips (pill outlines) ─── */
.oracle-chip-row[b-ywngcuft2n] {
margin-top: 1.1rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.6rem;
position: relative;
z-index: 1;
}
.oracle-chip[b-ywngcuft2n] {
border-radius: 999px;
border: 1px solid rgba(140, 100, 65, 0.5);
padding: 0.4rem 1rem;
background: rgba(255, 252, 245, 0.65);
color: #5d4037;
/* inherited font-sans */
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
}
.oracle-chip:hover[b-ywngcuft2n] {
background: rgba(222, 196, 162, 0.5);
border-color: rgba(140, 100, 65, 0.7);
}
.oracle-chip.active[b-ywngcuft2n] {
background: rgba(193, 154, 107, 0.35);
border-color: #9a7b5a;
color: #3e2b24;
}
/* ─── Cost label ─── */
.oracle-cost[b-ywngcuft2n] {
margin: 1.1rem 0 0.6rem;
color: #6b4c38;
font-family: var(--font-serif);
font-size: 1.1rem;
letter-spacing: 0.02em;
position: relative;
z-index: 1;
}
/* ─── Primary Button (bronze plate) ─── */
.oracle-primary-btn[b-ywngcuft2n] {
width: min(420px, 100%);
border-radius: 999px;
border: 1px solid #d4a84b;
background: linear-gradient(180deg, #c9923a 0%, #9a6722 40%, #7a4e17 100%);
color: #fff5d6;
padding: 0.8rem 1.2rem;
font-family: var(--font-serif);
font-size: 1.6rem;
letter-spacing: 0.02em;
cursor: pointer;
box-shadow:
0 4px 12px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255, 220, 140, 0.35);
text-shadow: 0 1px 3px rgba(0,0,0,0.55);
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
z-index: 1;
}
.oracle-primary-btn:hover[b-ywngcuft2n] {
transform: translateY(-1px);
box-shadow:
0 6px 18px rgba(0,0,0,0.4),
inset 0 1px 0 rgba(255, 220, 140, 0.45);
}
.oracle-primary-btn:disabled[b-ywngcuft2n] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
/* ─── Deep reading link ─── */
.oracle-deep-link[b-ywngcuft2n] {
margin-top: 1.1rem;
border: none;
background: transparent;
color: #6b4c38;
font-family: var(--font-serif);
font-size: clamp(0.95rem, 2vw, 1.15rem);
font-style: italic;
cursor: pointer;
position: relative;
z-index: 1;
}
.oracle-deep-link:hover[b-ywngcuft2n] {
text-decoration: underline;
color: #4a3325;
}
/* ─── Weekly oracle link ─── */
.oracle-weekly-separator[b-ywngcuft2n] {
width: 60%;
max-width: 280px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(160, 120, 70, 0.3), transparent);
margin: 1.5rem auto 0;
position: relative;
z-index: 1;
}
.oracle-weekly-link[b-ywngcuft2n] {
margin-top: 1rem;
border: none;
background: transparent;
color: #6b4c38;
font-family: var(--font-serif);
font-size: clamp(0.9rem, 1.8vw, 1.05rem);
cursor: pointer;
position: relative;
z-index: 1;
transition: color 0.2s ease;
}
.oracle-weekly-link:hover[b-ywngcuft2n] {
text-decoration: underline;
color: #4a3325;
}
.oracle-weekly-icon[b-ywngcuft2n] {
font-size: 1em;
}
.oracle-weekly-helper[b-ywngcuft2n] {
margin: 0.35rem 0 0;
color: rgba(107, 76, 56, 0.65);
font-family: var(--font-sans);
font-size: 0.85rem;
font-style: italic;
position: relative;
z-index: 1;
}
/* ─── Mobile ─── */
@media (max-width: 680px) {
.oracle-card.parchment[b-ywngcuft2n] {
padding: clamp(1.6rem, 4vw, 2.2rem);
}
.oracle-card.parchment[b-ywngcuft2n]::before {
inset: 10px;
}
.oracle-card.parchment[b-ywngcuft2n]::after {
inset: 7px;
}
.oracle-question-input[b-ywngcuft2n] {
min-height: 120px;
font-size: 1.05rem;
}
.oracle-chip[b-ywngcuft2n] {
font-size: 0.9rem;
padding: 0.35rem 0.85rem;
}
.oracle-cost[b-ywngcuft2n] {
font-size: 1rem;
}
.oracle-primary-btn[b-ywngcuft2n] {
font-size: 1.35rem;
padding: 0.7rem 1rem;
}
.oracle-weekly-link[b-ywngcuft2n] {
font-size: 0.9rem;
}
.oracle-weekly-helper[b-ywngcuft2n] {
font-size: 0.8rem;
}
}
/* /Components/OracleCreditModal.razor.rz.scp.css */
/* ─── Oracle Credit Modal ─── Ritual-themed top-up ─── */
.oracle-credit-overlay[b-e3axvo3pno] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(11, 6, 4, 0.82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 2100;
}
.oracle-credit-overlay.visible[b-e3axvo3pno] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.oracle-credit-modal[b-e3axvo3pno] {
background: radial-gradient(ellipse at 50% 30%, #f5ead4 0%, #e8d5b8 55%, #d9c4a0 100%);
border: 3px double #a07a52;
border-radius: 18px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.55),
inset 0 0 80px rgba(139, 69, 19, 0.12),
0 0 40px rgba(193, 154, 107, 0.15);
position: relative;
max-width: 640px;
width: 94%;
max-height: 92vh;
overflow-y: auto;
transform: scale(0.94);
transition: transform 0.3s ease;
}
.oracle-credit-overlay.visible .oracle-credit-modal[b-e3axvo3pno] {
transform: scale(1);
}
/* Decorative inner frame */
.oracle-credit-modal[b-e3axvo3pno]::before {
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(160, 120, 70, 0.35);
border-radius: 10px;
pointer-events: none;
}
.oracle-credit-close[b-e3axvo3pno] {
position: absolute;
top: 14px;
right: 18px;
background: none;
border: none;
font-size: 1.15rem;
color: #8b6b50;
cursor: pointer;
line-height: 1;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color 0.15s ease, background-color 0.15s ease;
z-index: 2;
}
.oracle-credit-close:hover[b-e3axvo3pno] {
color: #4a3325;
background-color: rgba(160, 120, 70, 0.12);
}
/* Header */
.oracle-credit-header[b-e3axvo3pno] {
padding: 32px 32px 12px;
text-align: center;
position: relative;
z-index: 1;
}
.oracle-credit-icon[b-e3axvo3pno] {
width: 86px;
height: 86px;
margin: 0 auto 8px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
color: #806044;
}
.oracle-credit-icon[b-e3axvo3pno]::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
border: 2.5px solid rgba(160, 120, 70, 0.18);
box-shadow:
inset 0 0 24px rgba(160, 120, 70, 0.08),
0 0 18px rgba(160, 120, 70, 0.06);
pointer-events: none;
}
.oracle-vision-icon[b-e3axvo3pno] {
width: 56px;
height: 56px;
display: block;
position: relative;
z-index: 1;
filter:
drop-shadow(0 3px 5px rgba(139, 90, 43, 0.24))
drop-shadow(0 0 8px rgba(217, 195, 176, 0.34));
transform-origin: center;
transition: transform 0.28s ease, filter 0.28s ease;
}
.oracle-credit-title[b-e3axvo3pno] {
font-family: var(--font-serif);
font-size: 1.65rem;
font-weight: 600;
color: #3d2b1f;
margin: 0 0 8px;
letter-spacing: 0.01em;
position: relative;
}
.oracle-credit-subtitle[b-e3axvo3pno] {
color: #6b4c38;
font-family: var(--font-serif);
font-size: 1rem;
font-style: italic;
margin: 0;
line-height: 1.55;
}
.oracle-credit-usage[b-e3axvo3pno] {
color: #9a7e65;
/* inherited font-sans */
font-size: 0.85rem;
font-weight: 400;
letter-spacing: 0.06em;
font-style: italic;
margin: 10px 0 0;
}
/* Body */
.oracle-credit-body[b-e3axvo3pno] {
padding: 8px 28px 20px;
position: relative;
z-index: 1;
}
.oracle-credit-loading[b-e3axvo3pno] {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 40px 0;
color: #6b4c38;
font-family: var(--font-serif);
}
.oracle-credit-loading .spinner[b-e3axvo3pno] {
width: 28px;
height: 28px;
border: 3px solid rgba(160, 120, 70, 0.25);
border-top-color: #a07a52;
border-radius: 50%;
animation: spin-b-e3axvo3pno 0.8s linear infinite;
}
@keyframes spin-b-e3axvo3pno {
to { transform: rotate(360deg); }
}
/* Packs Grid */
.oracle-packs-grid[b-e3axvo3pno] {
display: grid;
grid-template-columns: 1fr 1.15fr 1fr;
gap: 18px;
align-items: end;
}
/* Pack Card */
.oracle-pack-card[b-e3axvo3pno] {
background: rgba(255, 252, 245, 0.7);
border: 1px solid rgba(160, 120, 70, 0.35);
border-radius: 14px;
padding: 22px 16px 18px;
text-align: center;
position: relative;
display: flex;
flex-direction: column;
align-items: center;
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.oracle-pack-card:hover[b-e3axvo3pno] {
border-color: rgba(160, 120, 70, 0.55);
box-shadow: 0 6px 20px rgba(139, 69, 19, 0.12);
transform: translateY(-2px);
}
/* Featured Card (center, recommended) */
.oracle-pack-card--featured[b-e3axvo3pno] {
border: 2px solid rgba(193, 154, 107, 0.6);
background: linear-gradient(180deg, rgba(255, 252, 245, 0.9) 0%, rgba(248, 235, 210, 0.85) 100%);
box-shadow:
0 6px 28px rgba(193, 154, 107, 0.25),
0 0 20px rgba(193, 154, 107, 0.08);
padding: 28px 18px 20px;
}
.oracle-pack-card--featured:hover[b-e3axvo3pno] {
box-shadow:
0 8px 32px rgba(193, 154, 107, 0.35),
0 0 28px rgba(193, 154, 107, 0.12);
}
/* Value seal badge */
.oracle-pack-seal[b-e3axvo3pno] {
position: absolute;
top: -11px;
left: 50%;
transform: translateX(-50%);
background: #9f7247;
color: #fffaf0;
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 5px 14px;
border-radius: 20px;
white-space: nowrap;
box-shadow: 0 4px 12px rgba(112, 72, 38, 0.16);
}
/* Card internals */
.oracle-pack-symbol[b-e3axvo3pno] {
width: 46px;
height: 46px;
display: flex;
align-items: center;
justify-content: center;
color: #806044;
margin-bottom: 8px;
}
.oracle-pack-symbol .oracle-vision-icon[b-e3axvo3pno] {
width: 34px;
height: 34px;
}
.oracle-pack-card:hover .oracle-vision-icon[b-e3axvo3pno] {
transform: rotate(5deg) scale(1.07);
filter:
drop-shadow(0 4px 7px rgba(139, 90, 43, 0.3))
drop-shadow(0 0 10px rgba(198, 168, 139, 0.42));
}
.oracle-pack-card--featured .oracle-pack-symbol[b-e3axvo3pno] {
width: 52px;
height: 52px;
color: #6f5038;
}
.oracle-pack-card--featured .oracle-pack-symbol .oracle-vision-icon[b-e3axvo3pno] {
width: 40px;
height: 40px;
}
.oracle-pack-amount[b-e3axvo3pno] {
font-family: var(--font-serif);
font-size: 1.1rem;
font-weight: 600;
color: #3d2b1f;
margin-bottom: 8px;
}
.oracle-pack-price[b-e3axvo3pno] {
display: flex;
align-items: baseline;
justify-content: center;
gap: 4px;
margin-bottom: 4px;
}
.oracle-price-number[b-e3axvo3pno] {
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 700;
color: #5a3a25;
line-height: 1;
}
.oracle-pack-card--featured .oracle-price-number[b-e3axvo3pno] {
font-size: 2.1rem;
}
.oracle-price-currency[b-e3axvo3pno] {
/* inherited font-sans */
font-size: 0.85rem;
color: #8b6b50;
font-weight: 400;
}
.oracle-price-currency.is-leading[b-e3axvo3pno] {
order: -1;
}
.oracle-pack-savings[b-e3axvo3pno] {
font-size: 0.75rem;
color: #9a7e65;
margin-bottom: 6px;
font-weight: 400;
font-style: italic;
}
.oracle-pack-tagline[b-e3axvo3pno] {
font-family: var(--font-serif);
font-size: 0.82rem;
font-style: italic;
color: #8b6b50;
margin-bottom: 14px;
line-height: 1.35;
}
/* Buttons */
.oracle-pack-btn[b-e3axvo3pno] {
width: 100%;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid rgba(160, 120, 70, 0.3);
background: rgba(255, 252, 245, 0.55);
color: #7b5a45;
font-family: var(--font-serif);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
margin-top: auto;
}
.oracle-pack-btn:hover:not(:disabled)[b-e3axvo3pno] {
background: rgba(222, 196, 162, 0.45);
border-color: rgba(160, 120, 70, 0.65);
}
.oracle-pack-btn:active:not(:disabled)[b-e3axvo3pno] {
transform: translateY(1px);
}
.oracle-pack-btn:disabled[b-e3axvo3pno] {
opacity: 0.55;
cursor: not-allowed;
}
/* Featured button — warm copper, flatter and calmer */
.oracle-pack-btn--primary[b-e3axvo3pno] {
padding: 10px 18px;
font-size: 0.95rem;
font-weight: 600;
background: #A67C52;
border: 1px solid rgba(126, 84, 45, 0.45);
color: #fffaf0;
box-shadow: 0 6px 16px rgba(112, 72, 38, 0.18);
text-shadow: none;
}
.oracle-pack-btn--primary:hover:not(:disabled)[b-e3axvo3pno] {
background: #956d48;
border-color: rgba(116, 75, 40, 0.55);
box-shadow: 0 8px 18px rgba(112, 72, 38, 0.22);
filter: none;
}
/* Error */
.oracle-credit-error[b-e3axvo3pno] {
margin: 16px 0 0;
padding: 12px 14px;
background: rgba(183, 58, 58, 0.1);
border: 1px solid rgba(183, 58, 58, 0.25);
border-radius: 10px;
color: #8b2020;
font-size: 0.9rem;
text-align: center;
}
/* Footer */
.oracle-credit-footer[b-e3axvo3pno] {
padding: 16px 28px 26px;
text-align: center;
position: relative;
z-index: 1;
}
.oracle-credit-promise[b-e3axvo3pno] {
color: #5a3a25;
font-family: var(--font-serif);
font-size: 0.92rem;
font-weight: 600;
margin: 0 0 4px;
letter-spacing: 0.01em;
}
.oracle-credit-stripe[b-e3axvo3pno] {
color: #a89a8a;
font-size: 0.72rem;
margin: 0;
line-height: 1.4;
letter-spacing: 0.02em;
}
/* Mobile */
@media (max-width: 600px) {
.oracle-credit-modal[b-e3axvo3pno] {
width: 96%;
max-height: 95vh;
border-radius: 14px;
}
.oracle-credit-header[b-e3axvo3pno] {
padding: 24px 20px 10px;
}
.oracle-credit-title[b-e3axvo3pno] {
font-size: 1.4rem;
}
.oracle-credit-body[b-e3axvo3pno] {
padding: 8px 18px 16px;
}
.oracle-packs-grid[b-e3axvo3pno] {
grid-template-columns: 1fr;
gap: 16px;
}
.oracle-pack-card--featured[b-e3axvo3pno] {
order: -1;
}
.oracle-credit-footer[b-e3axvo3pno] {
padding: 12px 20px 22px;
}
}
/* /Components/OracleHeader.razor.rz.scp.css */
.oracle-header[b-eiawc3cs4p] {
width: min(920px, 100%);
margin: 0 auto 1.2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
position: relative;
z-index: 2;
}
.oracle-back-btn[b-eiawc3cs4p] {
border: none;
background: transparent;
color: #f7e8dd;
font-family: var(--font-serif);
font-size: clamp(1.6rem, 2.4vw, 2rem);
display: inline-flex;
align-items: center;
gap: 0.4rem;
cursor: pointer;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.42);
}
.oracle-credits-pill[b-eiawc3cs4p] {
border: 1px solid rgba(227, 190, 150, 0.45);
border-radius: 999px;
padding: 0.55rem 1.15rem;
background: rgba(24, 12, 9, 0.58);
color: #f4d8b8;
/* inherited font-sans */
font-size: clamp(1rem, 1.9vw, 1.25rem);
letter-spacing: 0.01em;
display: inline-flex;
align-items: center;
gap: 0.45rem;
box-shadow: 0 10px 22px rgba(14, 6, 4, 0.35);
cursor: pointer;
transition: all 0.2s ease;
}
.oracle-credits-pill:hover:not(:disabled)[b-eiawc3cs4p] {
background: rgba(43, 24, 18, 0.75);
border-color: rgba(227, 190, 150, 0.75);
transform: translateY(-1px);
}
.oracle-credits-pill:disabled[b-eiawc3cs4p] {
opacity: 0.75;
cursor: default;
}
@media (max-width: 768px) {
.oracle-header[b-eiawc3cs4p] {
margin-bottom: 0.8rem;
}
.oracle-back-btn[b-eiawc3cs4p] {
font-size: 1.45rem;
}
.oracle-credits-pill[b-eiawc3cs4p] {
font-size: 1rem;
padding: 0.45rem 0.9rem;
}
}
/* /Components/OracleRevealCard.razor.rz.scp.css */
.oracle-reveal-card[b-yiagrmotpw] {
width: min(760px, 100%);
margin: 0 auto;
background: radial-gradient(ellipse at 50% 40%, #f5ead4 0%, #e8d5b8 55%, #d4be9a 100%);
border: 4px double #a07a52;
border-radius: 10px;
box-shadow:
0 20px 50px rgba(0,0,0,0.6),
inset 0 0 100px rgba(139, 69, 19, 0.18),
inset 0 0 30px rgba(160, 120, 60, 0.08);
padding: clamp(1.6rem, 4.5vw, 2.8rem);
position: relative;
z-index: 2;
box-sizing: border-box;
overflow-x: hidden;
overflow-wrap: break-word;
word-break: break-word;
}
/* Decorative inner frame */
.oracle-reveal-card[b-yiagrmotpw]::before {
content: '';
position: absolute;
inset: 14px;
border: 1px solid rgba(160, 120, 70, 0.4);
border-radius: 6px;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(160, 120, 70, 0.12);
}
.oracle-reveal-meta[b-yiagrmotpw] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
color: #7b5b44;
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 1rem;
position: relative;
z-index: 1;
}
/* ─── Stargazer: Sun Sign Badge ─── */
.oracle-sun-sign-badge[b-yiagrmotpw] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
margin-bottom: 0.6rem;
position: relative;
z-index: 1;
}
.oracle-sun-sign-badge > span:last-child[b-yiagrmotpw] {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.05rem;
color: #7b5b44;
letter-spacing: 0.04em;
text-transform: uppercase;
background: linear-gradient(135deg, rgba(201, 146, 58, 0.12), rgba(160, 120, 70, 0.08));
border: 1px solid rgba(160, 120, 70, 0.28);
border-radius: 999px;
padding: 0.25rem 0.9rem;
}
.oracle-sun-sign-icon[b-yiagrmotpw] {
font-size: 1.15rem;
}
/* ─── Stargazer: Opening Scene (atmospheric stage direction) ─── */
.oracle-opening-scene[b-yiagrmotpw] {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.1rem, 2.6vw, 1.35rem);
line-height: 1.65;
text-align: center;
color: #6b5242;
opacity: 0.85;
position: relative;
z-index: 1;
}
/* ─── Nostradamus: Quatrain (heroic verse) ─── */
.oracle-quatrain[b-yiagrmotpw] {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
font-size: clamp(1.65rem, 3.7vw, 2.3rem);
line-height: 1.55;
text-align: center;
color: #3f2a1e;
position: relative;
z-index: 1;
overflow-wrap: break-word;
word-break: break-word;
}
.oracle-divider[b-yiagrmotpw] {
width: 100%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(160, 118, 83, 0.3), transparent);
margin: 1.6rem 0 0.5rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.oracle-divider[b-yiagrmotpw]::after {
content: '✧';
background: #ecdcc3;
padding: 0 0.6rem;
color: rgba(144, 102, 69, 0.5);
font-size: 1.1rem;
}
.oracle-interpretation[b-yiagrmotpw] {
margin: 0.8rem 0 0;
color: #4f382b;
font-size: 1.06rem;
line-height: 1.65;
overflow-wrap: break-word;
word-break: break-word;
position: relative;
z-index: 1;
}
/* ─── Stargazer: Reading (flowing prose body) ─── */
.oracle-reading[b-yiagrmotpw] {
margin: 0.8rem 0 0;
color: #4f382b;
font-size: 1.06rem;
line-height: 1.72;
white-space: pre-line;
overflow-wrap: break-word;
word-break: break-word;
position: relative;
z-index: 1;
}
/* ─── Signs (decorative symbols, not buttons) ─── */
.oracle-signs[b-yiagrmotpw] {
margin-top: 1.2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1.2rem;
position: relative;
z-index: 1;
}
.oracle-sign-pill[b-yiagrmotpw] {
border-radius: 0;
border: none;
background: transparent;
color: #6b4c38;
padding: 0;
font-size: 0.95rem;
font-family: var(--font-serif);
font-style: italic;
letter-spacing: 0.02em;
}
.oracle-reflection[b-yiagrmotpw] {
margin-top: 1.4rem;
padding: 1rem 1.1rem;
border-radius: 8px;
background: rgba(255, 248, 236, 0.55);
border: 1px solid rgba(145, 103, 74, 0.2);
box-shadow: inset 0 1px 4px rgba(100, 60, 20, 0.06);
position: relative;
z-index: 1;
}
.oracle-reflection strong[b-yiagrmotpw] {
color: #523629;
font-family: var(--font-serif);
font-size: 1rem;
font-style: italic;
}
.oracle-reflection p[b-yiagrmotpw] {
margin: 0.35rem 0 0;
color: #5e4334;
line-height: 1.55;
overflow-wrap: break-word;
word-break: break-word;
}
.oracle-actions[b-yiagrmotpw] {
margin-top: 1.4rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
flex-wrap: wrap;
position: relative;
z-index: 1;
}
.oracle-save-btn[b-yiagrmotpw],
.oracle-secondary-btn[b-yiagrmotpw],
.oracle-link-btn[b-yiagrmotpw] {
border-radius: 999px;
border: 1px solid rgba(130, 89, 58, 0.38);
padding: 0.58rem 1rem;
cursor: pointer;
/* inherited font-sans */
font-size: 0.96rem;
transition: all 0.2s ease;
}
.oracle-autosave-line[b-yiagrmotpw] {
margin-top: 1rem;
color: #6b4c38;
font-size: 0.9rem;
font-style: italic;
text-align: center;
position: relative;
z-index: 1;
}
.oracle-inline-link-btn[b-yiagrmotpw] {
border: none;
background: transparent;
color: #5a3e2f;
text-decoration: underline;
cursor: pointer;
/* inherited font-sans */
font-size: 0.9rem;
margin-left: 0.35rem;
padding: 0;
}
.oracle-inline-link-btn:hover[b-yiagrmotpw] {
color: #3f2a1e;
}
.oracle-save-btn[b-yiagrmotpw] {
background: linear-gradient(180deg, #c9923a 0%, #9a6722 40%, #7a4e17 100%);
color: #fff5d6;
border: 1px solid #d4a84b;
box-shadow:
0 4px 12px rgba(0,0,0,0.3),
inset 0 1px 0 rgba(255, 220, 140, 0.3);
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
.oracle-save-btn:hover[b-yiagrmotpw] {
transform: translateY(-1px);
box-shadow:
0 6px 16px rgba(0,0,0,0.35),
inset 0 1px 0 rgba(255, 220, 140, 0.4);
}
.oracle-save-btn:disabled[b-yiagrmotpw] {
opacity: 0.55;
cursor: not-allowed;
transform: none;
}
.oracle-secondary-btn[b-yiagrmotpw] {
background: transparent;
color: #4d3427;
border: 1px solid rgba(130, 89, 58, 0.4);
}
.oracle-secondary-btn:hover[b-yiagrmotpw] {
background: rgba(130, 89, 58, 0.08);
border-color: rgba(130, 89, 58, 0.65);
}
.oracle-link-btn[b-yiagrmotpw] {
background: transparent;
color: #6b4c38;
border-color: transparent;
text-decoration: underline;
font-style: italic;
}
.oracle-link-btn:hover[b-yiagrmotpw] {
color: #4a3325;
}
.oracle-link-btn:disabled[b-yiagrmotpw] {
opacity: 0.45;
cursor: not-allowed;
}
/* ─── Mobile ─── */
@media (max-width: 680px) {
.oracle-reveal-card[b-yiagrmotpw] {
padding: clamp(1.2rem, 4vw, 2rem);
}
.oracle-reveal-card[b-yiagrmotpw]::before {
inset: 10px;
}
.oracle-signs[b-yiagrmotpw] {
gap: 0.8rem;
}
}
/* /Components/OracleTranceOverlay.razor.rz.scp.css */
.oracle-trance-overlay[b-3jpw21mfoj] {
width: min(720px, 100%);
margin: 0 auto;
min-height: 420px;
border-radius: 22px;
background: rgba(12, 7, 5, 0.6);
border: 1px solid rgba(220, 179, 132, 0.2);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
}
.oracle-trance-core[b-3jpw21mfoj] {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.oracle-ripple[b-3jpw21mfoj] {
width: 90px;
height: 90px;
border-radius: 50%;
border: 2px solid rgba(241, 198, 142, 0.6);
box-shadow: 0 0 0 0 rgba(241, 198, 142, 0.35);
animation: oraclePulse-b-3jpw21mfoj 2.3s ease-in-out infinite;
}
.oracle-trance-core p[b-3jpw21mfoj] {
color: #f8deba;
font-family: var(--font-serif);
font-size: clamp(1.4rem, 3vw, 2rem);
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.42);
}
@keyframes oraclePulse-b-3jpw21mfoj {
0% {
transform: scale(0.78);
box-shadow: 0 0 0 0 rgba(241, 198, 142, 0.35);
opacity: 0.8;
}
70% {
transform: scale(1);
box-shadow: 0 0 0 28px rgba(241, 198, 142, 0);
opacity: 1;
}
100% {
transform: scale(0.82);
box-shadow: 0 0 0 0 rgba(241, 198, 142, 0);
opacity: 0.85;
}
}
/* /Components/OracleWeeklyModal.razor.rz.scp.css */
/* ─── Oracle Weekly Signup Modal ─── Ritual-themed weekly letter opt-in ─── */
.oracle-weekly-overlay[b-b5juo10lju] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(11, 6, 4, 0.82);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 2100;
}
.oracle-weekly-overlay.visible[b-b5juo10lju] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.oracle-weekly-modal[b-b5juo10lju] {
background: radial-gradient(ellipse at 50% 30%, #f5ead4 0%, #e8d5b8 55%, #d9c4a0 100%);
border: 3px double #a07a52;
border-radius: 18px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.55),
inset 0 0 80px rgba(139, 69, 19, 0.12),
0 0 40px rgba(193, 154, 107, 0.15);
position: relative;
max-width: 620px;
width: 94%;
max-height: 92vh;
box-sizing: border-box;
overflow: visible;
transform: scale(0.94);
transition: transform 0.3s ease;
}
.oracle-weekly-overlay.visible .oracle-weekly-modal[b-b5juo10lju] {
transform: scale(1);
}
/* Decorative inner frame */
.oracle-weekly-modal[b-b5juo10lju]::before {
content: '';
position: absolute;
inset: 12px;
border: 1px solid rgba(160, 120, 70, 0.35);
border-radius: 10px;
pointer-events: none;
}
/* Close button */
.oracle-weekly-close[b-b5juo10lju] {
position: absolute;
top: 14px;
right: 18px;
background: none;
border: none;
font-size: 1.15rem;
color: #8b6b50;
cursor: pointer;
line-height: 1;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: color 0.15s ease, background-color 0.15s ease;
z-index: 2;
}
.oracle-weekly-close:hover[b-b5juo10lju] {
color: #4a3325;
background-color: rgba(160, 120, 70, 0.12);
}
/* ─── Header ─── */
.oracle-weekly-header[b-b5juo10lju] {
padding: 42px 44px 16px;
text-align: center;
position: relative;
z-index: 1;
}
/* Avatar decorative area with filigree ornaments */
.oracle-weekly-avatar-area[b-b5juo10lju] {
position: relative;
width: 146px;
margin: 0 auto 10px;
}
.oracle-weekly-avatar-area[b-b5juo10lju]::before,
.oracle-weekly-avatar-area[b-b5juo10lju]::after {
content: '❧';
position: absolute;
top: 50%;
transform: translateY(-50%);
color: rgba(180, 140, 90, 0.4);
font-size: 1.15rem;
pointer-events: none;
}
.oracle-weekly-avatar-area[b-b5juo10lju]::before {
right: calc(100% + 8px);
transform: translateY(-50%) scaleX(-1);
}
.oracle-weekly-avatar-area[b-b5juo10lju]::after {
left: calc(100% + 8px);
}
.oracle-weekly-avatar-wrap[b-b5juo10lju] {
width: 130px;
height: 130px;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(180, 140, 80, 0.55);
box-shadow:
0 0 0 1.5px rgba(220, 185, 130, 0.3),
0 4px 18px rgba(139, 69, 19, 0.22),
0 0 30px rgba(193, 154, 107, 0.15),
inset 0 0 10px rgba(160, 120, 70, 0.1);
}
.oracle-weekly-avatar[b-b5juo10lju] {
width: 100%;
height: 100%;
object-fit: cover;
}
.oracle-weekly-separator-glyph[b-b5juo10lju] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
color: #b39570;
font-size: 1.1rem;
margin-bottom: 10px;
opacity: 0.7;
}
.oracle-weekly-separator-glyph[b-b5juo10lju]::before,
.oracle-weekly-separator-glyph[b-b5juo10lju]::after {
content: '';
width: 48px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(160, 120, 70, 0.4), transparent);
}
.oracle-weekly-title[b-b5juo10lju] {
font-family: var(--font-serif);
font-size: 1.85rem;
font-weight: 600;
color: #3d2b1f;
margin: 0 0 16px;
letter-spacing: 0.01em;
}
.oracle-weekly-ingress[b-b5juo10lju] {
font-family: var(--font-serif);
font-size: 1.1rem;
font-style: italic;
color: #5e4030;
line-height: 1.75;
margin: 0;
}
/* ─── Body (checkboxes) ─── */
.oracle-weekly-body[b-b5juo10lju] {
padding: 26px 44px 12px;
position: relative;
z-index: 1;
}
.oracle-weekly-checkbox-row[b-b5juo10lju] {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
margin-bottom: 10px;
background: none;
border: none;
padding: 0;
font: inherit;
text-align: left;
width: 100%;
}
.oracle-weekly-checkbox-row.disabled[b-b5juo10lju] {
cursor: default;
opacity: 0.7;
}
.oracle-weekly-checkmark[b-b5juo10lju] {
width: 20px;
height: 20px;
margin-top: 0;
flex-shrink: 0;
border: 1.5px solid rgba(160, 120, 70, 0.5);
border-radius: 4px;
background: rgba(255, 252, 245, 0.5);
box-shadow: inset 0 1px 3px rgba(100, 60, 20, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
color: transparent;
font-weight: 700;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.oracle-weekly-checkmark.checked[b-b5juo10lju] {
background: rgba(180, 140, 80, 0.18);
border-color: #a07a52;
color: #6b4520;
}
.oracle-weekly-checkbox-label[b-b5juo10lju] {
font-size: 0.98rem;
color: #4a3325;
line-height: 1.45;
}
.oracle-weekly-checkbox-helper[b-b5juo10lju] {
font-size: 0.8rem;
color: #7d6550;
font-style: italic;
margin: -4px 0 0 0;
line-height: 1.4;
text-align: center;
}
/* ─── Frequency info (icon + text, no checkbox) ─── */
.oracle-weekly-frequency-info[b-b5juo10lju] {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-bottom: 18px;
}
.oracle-weekly-frequency-icon[b-b5juo10lju] {
font-size: 1rem;
flex-shrink: 0;
opacity: 0.85;
}
.oracle-weekly-frequency-text[b-b5juo10lju] {
font-family: var(--font-serif);
font-size: 0.95rem;
font-style: italic;
color: #5e4030;
letter-spacing: 0.02em;
}
/* ─── Footer ─── */
.oracle-weekly-footer[b-b5juo10lju] {
padding: 22px 44px 28px;
text-align: center;
position: relative;
z-index: 1;
}
.oracle-weekly-cost[b-b5juo10lju] {
font-size: 0.82rem;
color: #9a7e65;
font-style: italic;
margin: 0 0 16px;
letter-spacing: 0.02em;
}
.oracle-weekly-confirm-btn[b-b5juo10lju] {
display: inline-block;
padding: 15px 40px;
border-radius: 999px;
border: 1px solid #d4a84b;
background: linear-gradient(180deg, #c9923a 0%, #9a6722 40%, #7a4e17 100%);
color: #fff5d6;
font-family: var(--font-serif);
font-size: 1.08rem;
font-weight: 600;
cursor: pointer;
box-shadow:
0 3px 10px rgba(0, 0, 0, 0.25),
inset 0 1px 0 rgba(255, 220, 140, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
transition: background 0.15s ease, transform 0.1s ease;
margin-bottom: 14px;
box-sizing: border-box;
}
.oracle-weekly-confirm-btn:hover[b-b5juo10lju] {
background: linear-gradient(180deg, #d4a04a 0%, #a87530 40%, #8a5a20 100%);
}
.oracle-weekly-confirm-btn:active[b-b5juo10lju] {
transform: translateY(1px);
}
.oracle-weekly-cancel[b-b5juo10lju] {
display: block;
margin: 0 auto;
background: none;
border: none;
color: #8b6b50;
font-family: var(--font-serif);
font-size: 0.88rem;
font-style: italic;
cursor: pointer;
transition: color 0.15s ease;
padding: 4px 8px;
}
.oracle-weekly-cancel:hover[b-b5juo10lju] {
color: #4a3325;
}
/* ─── Unsubscribe (Mode 2) ─── */
.oracle-weekly-unsubscribe[b-b5juo10lju] {
display: block;
margin: 0 auto;
background: none;
border: none;
color: #8b5c48;
font-family: var(--font-serif);
font-size: 0.88rem;
font-style: italic;
cursor: pointer;
transition: color 0.15s ease;
padding: 4px 8px;
opacity: 0.75;
}
.oracle-weekly-unsubscribe:hover[b-b5juo10lju] {
color: #6e2b1a;
opacity: 1;
}
/* ─── Wax seal placement (child component via ::deep) ─── */
[b-b5juo10lju] .oracle-weekly-seal {
position: absolute;
bottom: -24px;
right: -16px;
width: 118px;
height: 118px;
z-index: 3;
filter:
drop-shadow(0 2px 3px rgba(60, 30, 8, 0.38))
drop-shadow(0 5px 12px rgba(80, 40, 10, 0.24))
drop-shadow(0 0 18px rgba(193, 140, 70, 0.12));
}
/* ─── Toast (confirmation state) ─── */
@keyframes toastAppear-b-b5juo10lju {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes goldenGlow-b-b5juo10lju {
0%, 100% {
filter: drop-shadow(0 2px 6px rgba(160, 120, 60, 0.3));
}
50% {
filter: drop-shadow(0 2px 14px rgba(200, 160, 60, 0.55)) drop-shadow(0 0 22px rgba(193, 154, 107, 0.3));
}
}
.oracle-weekly-toast[b-b5juo10lju] {
padding: 60px 32px;
text-align: center;
position: relative;
z-index: 1;
animation: toastAppear-b-b5juo10lju 0.4s ease-out forwards;
}
.oracle-weekly-toast-icon[b-b5juo10lju] {
font-size: 2.6rem;
color: #a07a52;
margin-bottom: 16px;
animation: goldenGlow-b-b5juo10lju 2.5s ease-in-out infinite;
}
.oracle-weekly-toast-text[b-b5juo10lju] {
font-family: var(--font-serif);
font-size: 1.15rem;
font-style: italic;
color: #4a3325;
line-height: 1.6;
margin: 0;
}
/* ─── Mobile: full-viewport immersive ritual ─── */
@media (max-width: 600px) {
.oracle-weekly-overlay[b-b5juo10lju] {
align-items: stretch;
justify-content: stretch;
width: 100vw;
height: 100vh;
height: 100dvh;
min-height: 100svh;
padding: 0;
overflow: hidden;
overscroll-behavior: contain;
touch-action: pan-y;
}
.oracle-weekly-modal[b-b5juo10lju] {
width: 100vw;
max-width: none;
min-width: 0;
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100svh;
max-height: 100vh;
max-height: 100dvh;
border-radius: 0;
border: none;
display: flex;
flex-direction: column;
box-sizing: border-box;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
transform: none;
box-shadow:
inset 0 0 80px rgba(139, 69, 19, 0.12);
}
.oracle-weekly-overlay.visible .oracle-weekly-modal[b-b5juo10lju] {
transform: none;
}
/* Adapt inner frame for fullscreen — slight inset from edges */
.oracle-weekly-modal[b-b5juo10lju]::before {
inset: 10px;
border-radius: 12px;
}
.oracle-weekly-close[b-b5juo10lju] {
top: 16px;
right: 16px;
width: 36px;
height: 36px;
font-size: 1.2rem;
background: rgba(255, 248, 235, 0.5);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.oracle-weekly-header[b-b5juo10lju] {
padding: 48px 28px 16px;
flex-shrink: 0;
margin-top: auto;
}
.oracle-weekly-title[b-b5juo10lju] {
font-size: 1.5rem;
}
.oracle-weekly-ingress[b-b5juo10lju] {
font-size: 1rem;
line-height: 1.75;
overflow-wrap: break-word;
}
.oracle-weekly-avatar-area[b-b5juo10lju] {
width: 130px;
margin-bottom: 10px;
}
.oracle-weekly-avatar-wrap[b-b5juo10lju] {
width: 110px;
height: 110px;
}
.oracle-weekly-avatar-area[b-b5juo10lju]::before,
.oracle-weekly-avatar-area[b-b5juo10lju]::after {
font-size: 1rem;
}
.oracle-weekly-body[b-b5juo10lju] {
padding: 20px 28px 12px;
flex-shrink: 0;
}
.oracle-weekly-checkbox-label[b-b5juo10lju] {
font-size: 0.9rem;
min-width: 0;
overflow-wrap: break-word;
}
.oracle-weekly-checkbox-helper[b-b5juo10lju] {
font-size: 0.78rem;
}
.oracle-weekly-footer[b-b5juo10lju] {
padding: 16px 28px 24px;
flex-shrink: 0;
margin-bottom: auto;
}
.oracle-weekly-confirm-btn[b-b5juo10lju] {
width: 100%;
max-width: 100%;
padding: 14px 28px;
font-size: 1.05rem;
}
/* Seal as centered colophon instead of absolute corner */
[b-b5juo10lju] .oracle-weekly-seal {
position: static;
display: block;
margin: 24px auto 32px;
width: 80px;
height: 80px;
opacity: 0.8;
}
.oracle-weekly-toast[b-b5juo10lju] {
padding: 80px 28px;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
@media (max-width: 375px) {
.oracle-weekly-header[b-b5juo10lju] {
padding: 44px 22px 12px;
}
.oracle-weekly-title[b-b5juo10lju] {
font-size: 1.35rem;
}
.oracle-weekly-ingress[b-b5juo10lju] {
font-size: 0.93rem;
}
.oracle-weekly-body[b-b5juo10lju] {
padding: 16px 22px 10px;
}
.oracle-weekly-footer[b-b5juo10lju] {
padding: 14px 22px 20px;
}
.oracle-weekly-checkbox-label[b-b5juo10lju] {
font-size: 0.86rem;
}
[b-b5juo10lju] .oracle-weekly-seal {
width: 68px;
height: 68px;
margin-bottom: 22px;
}
}
/* /Components/Pages/About.razor.rz.scp.css */
/* About page styles - aligned with FrontPage hero patterns */
[b-k3eatofagp] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
/* inherited font-sans */
}
:global(html)[b-k3eatofagp] {
overflow-x: hidden;
overscroll-behavior-x: none;
}
:global(body)[b-k3eatofagp] {
overflow-x: hidden;
overscroll-behavior: none;
}
[b-k3eatofagp] .app-layout {
--about-bg: var(--lov-paper);
--about-ink: var(--lov-ink);
--about-muted: var(--lov-muted);
--about-card: var(--lov-surface);
--about-card-soft: var(--lov-selected);
--about-shadow: none;
display: flex;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--about-bg);
padding-top: 80px;
overflow-x: hidden;
overscroll-behavior: none;
touch-action: pan-y pinch-zoom;
}
@media (max-width: 1024px) {
[b-k3eatofagp] .toggle-sidebar {
display: none !important;
}
}
[b-k3eatofagp] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-k3eatofagp] .sidebar.hidden {
transform: translateX(-100%);
}
[b-k3eatofagp] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-k3eatofagp] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-k3eatofagp] .sidebar a:hover {
color: #000;
}
[b-k3eatofagp] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
[b-k3eatofagp] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-k3eatofagp] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-k3eatofagp] .sidebar-logo {
text-align: center;
}
[b-k3eatofagp] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
[b-k3eatofagp] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-k3eatofagp] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-k3eatofagp] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease-in-out;
}
[b-k3eatofagp] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-k3eatofagp] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: var(--text, #4F4A45);
}
[b-k3eatofagp] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
[b-k3eatofagp] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-k3eatofagp] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: #ffffff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
animation: fadeIn-b-k3eatofagp 0.2s ease-in-out;
}
@keyframes fadeIn-b-k3eatofagp {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[b-k3eatofagp] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-k3eatofagp] .dropdown-item:hover {
background-color: #f0dad3;
}
[b-k3eatofagp] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
[b-k3eatofagp] .container-v3 {
flex: 1;
max-width: 1200px;
margin: 20px auto 80px;
margin-left: 280px;
padding: 0 20px;
display: flex;
flex-direction: column;
gap: 40px;
transition: margin-left 0.3s ease;
}
[b-k3eatofagp] .container-v3.sidebar-hidden {
margin-left: 0;
}
[b-k3eatofagp] .about-page h1,
[b-k3eatofagp] .about-page h2,
[b-k3eatofagp] .about-page h3 {
margin-top: 0;
}
[b-k3eatofagp] .about-page p {
font-family: var(--font-sans);
color: var(--about-muted);
line-height: 1.7;
margin: 0;
}
/* Editorial opening: words lead and the two images support distinct beats. */
[b-k3eatofagp] .about-hero {
margin: 0;
}
[b-k3eatofagp] .about-story {
margin: 0;
}
[b-k3eatofagp] .about-hero-media,
[b-k3eatofagp] .about-story-media {
display: grid;
align-items: center;
gap: clamp(24px, 4vw, 56px);
overflow: visible;
background: transparent;
box-shadow: none;
}
[b-k3eatofagp] .about-hero-media {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
}
[b-k3eatofagp] .about-story-media {
grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
}
[b-k3eatofagp] .about-hero-media img,
[b-k3eatofagp] .about-story-media img {
width: 100%;
display: block;
object-fit: cover;
border-radius: 6px;
}
[b-k3eatofagp] .about-hero-media img {
grid-column: 2;
grid-row: 1;
height: clamp(250px, 20vw, 290px);
object-position: center;
}
[b-k3eatofagp] .about-story-media img {
grid-column: 1;
grid-row: 1;
height: clamp(250px, 19vw, 275px);
object-position: 70% 55%;
}
[b-k3eatofagp] .about-hero-copy,
[b-k3eatofagp] .about-story-copy {
position: static;
max-width: none;
padding: 0;
}
[b-k3eatofagp] .about-hero-copy {
grid-column: 1;
grid-row: 1;
}
[b-k3eatofagp] .about-story-copy {
grid-column: 2;
grid-row: 1;
}
[b-k3eatofagp] .about-hero-copy h1 {
font-family: var(--font-serif);
font-size: clamp(2.2rem, 4vw, 3.6rem);
font-weight: 450;
color: var(--about-ink);
line-height: 1.15;
letter-spacing: -0.035em;
margin: 0 0 16px;
}
[b-k3eatofagp] .about-story-copy h2 {
font-family: var(--font-serif);
font-size: clamp(1.8rem, 3vw, 2.5rem);
font-weight: 450;
color: var(--about-ink);
line-height: 1.3;
margin: 0 0 16px;
}
[b-k3eatofagp] .about-hero-copy p,
[b-k3eatofagp] .about-story-copy p {
font-size: 1.05rem;
color: var(--about-muted);
line-height: 1.75;
margin-bottom: 10px;
}
.about-name[b-k3eatofagp] {
margin-block-start: 24px;
}
/* Values */
[b-k3eatofagp] .about-values {
text-align: center;
}
[b-k3eatofagp] .about-values h2 {
font-family: var(--font-serif);
font-size: 2.1rem;
font-weight: 700;
color: var(--about-ink);
margin-bottom: 24px;
}
[b-k3eatofagp] .values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
grid-auto-rows: 1fr;
align-items: stretch;
gap: 24px;
}
[b-k3eatofagp] .value-card {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
background: var(--about-card-soft);
border-radius: 24px;
padding: 26px 24px;
text-align: center;
border: 1px solid rgba(196, 125, 97, 0.18);
box-shadow: 0 10px 22px rgba(90, 70, 53, 0.08);
}
[b-k3eatofagp] .value-icon {
width: 56px;
height: 56px;
flex: 0 0 56px;
border-radius: 50%;
background: rgba(196, 125, 97, 0.16);
color: #B36B4C;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 14px;
}
[b-k3eatofagp] .value-icon-svg {
width: 28px;
height: 28px;
stroke: currentColor;
fill: none;
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
[b-k3eatofagp] .value-card h3 {
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 700;
color: var(--about-ink);
margin: 0 0 10px 0;
}
[b-k3eatofagp] .value-card p {
font-size: 0.98rem;
color: #6d5849;
margin: 0;
flex: 1;
}
/* Promise */
[b-k3eatofagp] .about-promise {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 32px;
align-items: center;
padding: 40px;
background: rgba(196, 125, 97, 0.15);
border-radius: 28px;
box-shadow: 0 12px 30px rgba(90, 70, 53, 0.12);
}
[b-k3eatofagp] .promise-copy {
text-align: center;
}
[b-k3eatofagp] .promise-copy h2 {
font-family: var(--font-serif);
font-size: 2rem;
font-weight: 700;
color: var(--about-ink);
margin-bottom: 16px;
}
[b-k3eatofagp] .promise-copy p {
font-size: 1.05rem;
color: var(--about-ink);
opacity: 0.88;
}
[b-k3eatofagp] .promise-copy .promise-signoff {
margin-top: 22px;
font-family: var(--font-handwriting);
font-size: clamp(1.45rem, 2vw, 1.9rem);
font-style: normal;
line-height: 1.18;
color: #5b3524;
opacity: 0.96;
}
[b-k3eatofagp] .promise-media {
display: flex;
justify-content: center;
}
[b-k3eatofagp] .promise-media img {
max-width: 280px;
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 10px 24px rgba(90, 70, 53, 0.2));
}
.sidebar-overlay[b-k3eatofagp] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-k3eatofagp] {
display: none;
}
[b-k3eatofagp] .main-footer {
width: calc(100% - 280px);
margin-left: 280px;
background-color: #FAF3E5;
padding: 60px 0 30px 0;
margin-top: 80px;
color: #4F4A45;
border-top: 1px solid #f0dad3;
}
[b-k3eatofagp] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
[b-k3eatofagp] .footer-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
}
[b-k3eatofagp] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
}
[b-k3eatofagp] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-k3eatofagp] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-k3eatofagp] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
[b-k3eatofagp] .footer-nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 80px;
margin-bottom: 40px;
}
[b-k3eatofagp] .footer-section {
padding: 0 15px;
}
[b-k3eatofagp] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-k3eatofagp] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-k3eatofagp] .footer-section ul li {
margin-bottom: 10px;
}
[b-k3eatofagp] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-k3eatofagp] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
[b-k3eatofagp] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
gap: 20px;
}
[b-k3eatofagp] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-k3eatofagp] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-k3eatofagp] .footer-languages a:hover,
[b-k3eatofagp] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
[b-k3eatofagp] .footer-legal-origin {
text-align: right;
}
[b-k3eatofagp] .footer-made-by {
font-size: 0.85em;
color: #888;
margin: 0 0 5px 0;
}
[b-k3eatofagp] .footer-copyright {
font-size: 0.85em;
color: #888;
margin: 0;
text-align: left;
}
@media (max-width: 1024px) {
[b-k3eatofagp] .app-layout {
padding-top: 60px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
-webkit-overflow-scrolling: touch;
}
[b-k3eatofagp] .container-v3 {
margin-left: 0 !important;
margin-top: 65px;
padding: 0 var(--mobile-page-margin);
}
[b-k3eatofagp] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-k3eatofagp] .sidebar.visible {
transform: translateX(0);
}
[b-k3eatofagp] .sidebar.hidden {
transform: translateX(-100%);
}
[b-k3eatofagp] .main-footer {
margin-left: 0 !important;
width: 100%;
}
[b-k3eatofagp] .about-hero,
[b-k3eatofagp] .about-story,
[b-k3eatofagp] .about-values,
[b-k3eatofagp] .about-promise {
margin-left: 0;
margin-right: 0;
}
[b-k3eatofagp] .about-promise {
grid-template-columns: 1fr;
text-align: center;
padding: 32px;
}
}
@media (max-width: 768px) {
[b-k3eatofagp] .about-hero-media,
[b-k3eatofagp] .about-story-media {
grid-template-columns: 1fr;
gap: 24px;
}
[b-k3eatofagp] .about-hero-copy,
[b-k3eatofagp] .about-story-copy {
grid-column: 1;
grid-row: 1;
}
[b-k3eatofagp] .about-hero-media img,
[b-k3eatofagp] .about-story-media img {
grid-column: 1;
grid-row: 2;
width: 100%;
max-height: 300px;
}
[b-k3eatofagp] .about-hero-media img {
height: auto;
aspect-ratio: 3 / 2;
}
[b-k3eatofagp] .about-story-media img {
height: auto;
aspect-ratio: auto;
}
[b-k3eatofagp] .values-grid {
grid-template-columns: 1fr;
}
[b-k3eatofagp] .about-hero-copy h1 {
font-size: clamp(2.15rem, 9vw, 2.55rem);
}
[b-k3eatofagp] .about-hero-copy p {
font-size: 1rem;
}
[b-k3eatofagp] .about-story-copy h2,
[b-k3eatofagp] .about-values h2,
[b-k3eatofagp] .promise-copy h2 {
font-size: 1.7rem;
}
[b-k3eatofagp] .footer-nav-links {
flex-direction: column;
align-items: center;
gap: 40px;
}
[b-k3eatofagp] .footer-section {
text-align: center;
}
[b-k3eatofagp] .footer-bottom {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
[b-k3eatofagp] .footer-legal-origin {
text-align: center;
}
[b-k3eatofagp] .footer-copyright {
text-align: center;
}
}
/* Align first-viewport hero placement with the ThemesAll rhythm. */
@media (min-width: 1025px) {
.app-layout[b-k3eatofagp],
[b-k3eatofagp] .app-layout {
padding-top: 64px;
}
[b-k3eatofagp] .container-v3 {
margin-top: 0;
}
}
@media (max-width: 1024px) {
.app-layout[b-k3eatofagp],
[b-k3eatofagp] .app-layout {
padding-top: 60px;
}
[b-k3eatofagp] .container-v3 {
margin-top: 22px;
}
}
[b-k3eatofagp] .about-values { text-align: left; padding-block: 24px; }
[b-k3eatofagp] .values-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
[b-k3eatofagp] .value-card { align-items: flex-start; padding: 24px 0; border: 0; border-top: 1px solid var(--lov-line); border-radius: 0; background: transparent; box-shadow: none; text-align: left; }
[b-k3eatofagp] .value-icon { width: 32px; height: 32px; flex-basis: 32px; margin: 0 0 16px; border-radius: 0; background: transparent; color: var(--lov-green); }
[b-k3eatofagp] .value-card h3 { color: var(--lov-ink); font-weight: 450; }
[b-k3eatofagp] .about-promise { display: block; padding: clamp(24px, 4vw, 48px); background: var(--lov-selected); border: 1px solid var(--lov-line); border-radius: 6px; box-shadow: none; }
[b-k3eatofagp] .promise-copy { max-width: 65ch; }
[b-k3eatofagp] .promise-copy h2,
[b-k3eatofagp] .promise-copy p { color: var(--lov-ink); }
[b-k3eatofagp] .value-card p { color: var(--lov-muted); }
[b-k3eatofagp] .promise-copy .promise-signoff { color: var(--lov-ink); }
@media (max-width: 768px) {
[b-k3eatofagp] .values-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 8px; }
[b-k3eatofagp] .value-card { height: auto; }
}
@media (min-width: 1025px) {
.container-v3[b-k3eatofagp] {
width: min(1200px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
margin-right: auto;
}
.container-v3.sidebar-hidden[b-k3eatofagp] {
width: min(1200px, 100%);
margin-inline: auto;
}
}
/* /Components/Pages/Agents.razor.rz.scp.css */
.agents-page[b-aa1qes7rvn] {
--agents-paper: #fff9f1;
--agents-paper-deep: #f3e6d5;
--agents-ink: #3f302c;
--agents-ink-soft: #725e57;
--agents-coral: #f4b9a8;
--agents-coral-deep: #bb6c59;
--agents-sage: #4b5f54;
min-height: 100vh;
overflow: hidden;
color: var(--agents-ink);
background: var(--agents-paper);
font-family: var(--font-sans);
}
.campaign-header[b-aa1qes7rvn],
.campaign-footer[b-aa1qes7rvn] {
width: min(100% - 48px, 1320px);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.campaign-header[b-aa1qes7rvn] {
position: absolute;
z-index: 5;
inset: 0 0 auto;
height: 88px;
}
.brand-link[b-aa1qes7rvn],
.brand-link img[b-aa1qes7rvn] {
display: block;
}
.brand-link img[b-aa1qes7rvn] {
width: auto;
height: 42px;
}
.header-nav[b-aa1qes7rvn] {
display: flex;
align-items: center;
gap: 28px;
}
.header-nav a[b-aa1qes7rvn] {
position: relative;
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--agents-ink);
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
text-underline-offset: 0.35em;
}
.header-nav a:hover:not([aria-current="page"])[b-aa1qes7rvn] {
text-decoration: underline;
}
.header-nav a[aria-current="page"][b-aa1qes7rvn] {
color: var(--agents-coral-deep);
}
.header-nav a[aria-current="page"][b-aa1qes7rvn]::after {
content: "";
position: absolute;
inset: auto 0 5px;
height: 2px;
background: currentColor;
}
.hero[b-aa1qes7rvn] {
position: relative;
min-height: min(920px, 100svh);
display: flex;
align-items: center;
padding: 112px max(24px, calc((100vw - 1320px) / 2)) 64px;
isolation: isolate;
background: var(--agents-paper-deep);
}
.hero-art[b-aa1qes7rvn],
.hero-art img[b-aa1qes7rvn],
.hero-wash[b-aa1qes7rvn] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero-art[b-aa1qes7rvn] {
z-index: -2;
}
.hero-art img[b-aa1qes7rvn] {
object-fit: cover;
object-position: center;
}
.hero-wash[b-aa1qes7rvn] {
z-index: -1;
background: linear-gradient(90deg, rgba(255, 249, 241, 0.98) 0%, rgba(255, 249, 241, 0.91) 38%, rgba(255, 249, 241, 0.18) 68%, rgba(255, 249, 241, 0) 100%);
}
.hero-copy[b-aa1qes7rvn] {
width: min(58%, 710px);
}
.eyebrow[b-aa1qes7rvn] {
margin: 0 0 18px;
color: var(--agents-coral-deep);
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.hero h1[b-aa1qes7rvn],
.bridge-heading h2[b-aa1qes7rvn],
.journey-heading h2[b-aa1qes7rvn],
.offer-copy h2[b-aa1qes7rvn],
.safety-panel h2[b-aa1qes7rvn],
.agent-entry h2[b-aa1qes7rvn],
.final-cta h2[b-aa1qes7rvn],
.bridge-pair h3[b-aa1qes7rvn],
.journey-steps h3[b-aa1qes7rvn] {
font-family: var(--font-serif);
font-weight: 400;
letter-spacing: -0.025em;
}
.hero h1[b-aa1qes7rvn] {
max-width: 11ch;
margin: 0;
font-size: clamp(3.5rem, 6.4vw, 7.2rem);
line-height: 0.94;
}
.hero-body[b-aa1qes7rvn] {
max-width: 620px;
margin: 28px 0 0;
color: var(--agents-ink-soft);
font-size: clamp(1.05rem, 1.5vw, 1.3rem);
line-height: 1.65;
}
.hero-actions[b-aa1qes7rvn],
.final-actions[b-aa1qes7rvn] {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.hero-actions[b-aa1qes7rvn] {
margin-top: 34px;
}
.button[b-aa1qes7rvn] {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 26px;
border: 1px solid transparent;
border-radius: 999px;
color: var(--agents-ink);
font-size: 0.94rem;
font-weight: 800;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.button:hover[b-aa1qes7rvn] {
transform: translateY(-2px);
}
.button-primary[b-aa1qes7rvn] {
background: var(--lov-green);
color: var(--lov-on-green);
border-color: var(--lov-green);
border-radius: 6px;
box-shadow: none;
}
.button-primary:hover[b-aa1qes7rvn] {
background: var(--lov-green);
color: var(--lov-on-green);
border-color: var(--lov-green);
}
.button-primary:focus-visible[b-aa1qes7rvn] {
outline: 2px solid var(--agents-ink);
outline-offset: 3px;
}
.button-secondary[b-aa1qes7rvn] {
border-color: rgba(63, 48, 44, 0.25);
background: rgba(255, 249, 241, 0.7);
}
.button-secondary:hover[b-aa1qes7rvn] {
border-color: rgba(63, 48, 44, 0.5);
background: var(--agents-paper);
}
.hero-note[b-aa1qes7rvn] {
margin: 22px 0 0;
color: var(--agents-ink-soft);
font-size: 0.8rem;
font-weight: 700;
}
.bridge-section[b-aa1qes7rvn],
.journey-section[b-aa1qes7rvn],
.agent-entry[b-aa1qes7rvn] {
width: min(100% - 48px, 1180px);
margin-inline: auto;
padding-block: clamp(90px, 11vw, 160px);
}
.bridge-heading[b-aa1qes7rvn] {
max-width: 780px;
}
.bridge-heading h2[b-aa1qes7rvn],
.journey-heading h2[b-aa1qes7rvn],
.offer-copy h2[b-aa1qes7rvn],
.safety-panel h2[b-aa1qes7rvn],
.agent-entry h2[b-aa1qes7rvn],
.final-cta h2[b-aa1qes7rvn] {
margin: 0;
font-size: clamp(2.6rem, 4.7vw, 5.2rem);
line-height: 1.02;
}
.bridge-heading > p:last-child[b-aa1qes7rvn],
.journey-heading > p:last-child[b-aa1qes7rvn],
.offer-copy > p:not(.eyebrow, .payment-note)[b-aa1qes7rvn],
.safety-panel > p:not(.eyebrow)[b-aa1qes7rvn],
.agent-entry-copy > p:not(.eyebrow, .agent-prompt)[b-aa1qes7rvn],
.final-cta > p:not(.eyebrow)[b-aa1qes7rvn] {
color: var(--agents-ink-soft);
font-size: 1.08rem;
line-height: 1.7;
}
.bridge-heading > p:last-child[b-aa1qes7rvn] {
max-width: 640px;
margin: 24px 0 0;
}
.bridge-pair[b-aa1qes7rvn] {
display: grid;
grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
align-items: center;
margin-top: 72px;
}
.bridge-pair article[b-aa1qes7rvn] {
padding-block: 22px;
border-block: 1px solid rgba(63, 48, 44, 0.16);
}
.bridge-label[b-aa1qes7rvn] {
color: var(--agents-coral-deep);
font-size: 0.75rem;
font-weight: 800;
text-transform: uppercase;
}
.bridge-pair h3[b-aa1qes7rvn] {
margin: 16px 0 10px;
font-size: clamp(1.8rem, 3vw, 3rem);
}
.bridge-pair p[b-aa1qes7rvn] {
margin: 0;
color: var(--agents-ink-soft);
line-height: 1.65;
}
.bridge-thread[b-aa1qes7rvn] {
display: grid;
place-items: center;
}
.bridge-thread[b-aa1qes7rvn]::before,
.bridge-thread[b-aa1qes7rvn]::after {
content: "";
width: 44%;
height: 1px;
background: var(--agents-coral-deep);
}
.bridge-thread span[b-aa1qes7rvn] {
width: 12px;
height: 12px;
margin-block: 8px;
border: 2px solid var(--agents-coral-deep);
border-radius: 50%;
background: var(--agents-paper);
}
.journey-section[b-aa1qes7rvn] {
border-top: 1px solid rgba(63, 48, 44, 0.16);
}
.journey-heading[b-aa1qes7rvn] {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: end;
gap: 60px;
}
.journey-heading .eyebrow[b-aa1qes7rvn] {
grid-column: 1 / -1;
}
.journey-heading > p:last-child[b-aa1qes7rvn] {
margin: 0;
}
.journey-steps[b-aa1qes7rvn] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
margin: 68px 0 0;
padding: 0;
border-top: 1px solid rgba(63, 48, 44, 0.18);
list-style: none;
}
.journey-steps li[b-aa1qes7rvn] {
padding: 28px 24px 0 0;
}
.journey-steps li + li[b-aa1qes7rvn] {
padding-left: 24px;
border-left: 1px solid rgba(63, 48, 44, 0.18);
}
.step-number[b-aa1qes7rvn] {
color: var(--agents-coral-deep);
font-family: var(--font-serif);
font-size: 0.82rem;
}
.journey-steps h3[b-aa1qes7rvn] {
margin: 38px 0 10px;
font-size: 1.45rem;
line-height: 1.2;
}
.journey-steps p[b-aa1qes7rvn] {
margin: 0;
color: var(--agents-ink-soft);
line-height: 1.55;
}
.offer-section[b-aa1qes7rvn] {
display: grid;
grid-template-columns: minmax(0, calc((100vw - 1180px) / 2 + 700px)) minmax(360px, 1fr);
color: var(--agents-paper);
background: var(--agents-sage);
}
.offer-copy[b-aa1qes7rvn],
.safety-panel[b-aa1qes7rvn] {
padding-block: clamp(80px, 10vw, 150px);
}
.offer-copy[b-aa1qes7rvn] {
padding-left: max(24px, calc((100vw - 1180px) / 2));
padding-right: clamp(48px, 7vw, 110px);
}
.offer-copy .eyebrow[b-aa1qes7rvn],
.safety-panel .eyebrow[b-aa1qes7rvn] {
color: #f4c9bd;
}
.offer-copy > p:not(.eyebrow, .payment-note)[b-aa1qes7rvn],
.safety-panel > p:not(.eyebrow)[b-aa1qes7rvn] {
margin: 24px 0 0;
color: rgba(255, 249, 241, 0.74);
}
.offer-plans[b-aa1qes7rvn] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
margin-top: 44px;
}
.offer-plan[b-aa1qes7rvn] {
padding: 0 20px 22px;
border: 1px solid rgba(255, 249, 241, 0.22);
border-radius: 18px;
}
.offer-plan-paid[b-aa1qes7rvn] {
background: rgba(255, 249, 241, 0.08);
}
.offer-price[b-aa1qes7rvn] {
display: flex;
align-items: start;
flex-direction: column;
gap: 8px;
padding-block: 22px;
border-bottom: 1px solid rgba(255, 249, 241, 0.22);
}
.offer-price span[b-aa1qes7rvn] {
font-size: 0.82rem;
font-weight: 800;
text-transform: uppercase;
}
.offer-price strong[b-aa1qes7rvn] {
font-family: var(--font-serif);
font-size: clamp(1.45rem, 2.2vw, 2.35rem);
font-weight: 400;
text-align: left;
}
.offer-limits[b-aa1qes7rvn],
.safety-panel ul[b-aa1qes7rvn] {
margin: 22px 0 0;
padding: 0;
list-style: none;
}
.offer-limits[b-aa1qes7rvn] {
display: grid;
gap: 10px;
}
.offer-limits li[b-aa1qes7rvn] {
color: rgba(255, 249, 241, 0.84);
font-size: 0.86rem;
}
.payment-note[b-aa1qes7rvn] {
margin: 26px 0 0;
color: rgba(255, 249, 241, 0.6);
font-size: 0.8rem;
}
.safety-panel[b-aa1qes7rvn] {
min-width: 0;
padding-right: max(24px, calc((100vw - 1180px) / 2));
padding-left: clamp(48px, 6vw, 88px);
border-left: 1px solid rgba(255, 249, 241, 0.2);
background: rgba(32, 46, 39, 0.2);
}
.safety-panel h2[b-aa1qes7rvn] {
font-size: clamp(2.3rem, 4vw, 4.2rem);
}
.safety-panel li[b-aa1qes7rvn] {
display: grid;
grid-template-columns: 38px 1fr;
gap: 12px;
padding: 20px 0;
border-top: 1px solid rgba(255, 249, 241, 0.18);
font-family: var(--font-serif);
font-size: 1.08rem;
line-height: 1.45;
}
.safety-panel li:last-child[b-aa1qes7rvn] {
border-bottom: 1px solid rgba(255, 249, 241, 0.18);
}
.safety-panel li span[b-aa1qes7rvn] {
color: #f4c9bd;
font-size: 0.76rem;
}
.agent-entry[b-aa1qes7rvn] {
display: grid;
grid-template-columns: minmax(0, 0.82fr) minmax(420px, 1fr);
gap: clamp(56px, 9vw, 130px);
align-items: start;
}
.agent-entry-copy > p:not(.eyebrow, .agent-prompt)[b-aa1qes7rvn] {
margin: 24px 0 0;
}
.agent-prompt[b-aa1qes7rvn] {
margin: 32px 0 0;
padding: 18px 20px;
border-left: 3px solid var(--agents-coral-deep);
color: var(--agents-ink);
background: var(--agents-paper-deep);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 0.83rem;
line-height: 1.6;
overflow-wrap: anywhere;
}
.agent-links[b-aa1qes7rvn] {
border-top: 1px solid rgba(63, 48, 44, 0.18);
}
.agent-links a[b-aa1qes7rvn] {
display: grid;
grid-template-columns: 42px 1fr;
gap: 5px 12px;
padding: 22px 0;
border-bottom: 1px solid rgba(63, 48, 44, 0.18);
color: var(--agents-ink);
text-decoration: none;
transition: padding-left 180ms ease, color 180ms ease;
}
.agent-links a:hover[b-aa1qes7rvn] {
padding-left: 8px;
color: #9f5948;
}
.agent-links span[b-aa1qes7rvn] {
grid-row: 1 / 3;
color: var(--agents-coral-deep);
font-family: var(--font-serif);
font-size: 0.78rem;
}
.agent-links strong[b-aa1qes7rvn] {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 400;
}
.agent-links small[b-aa1qes7rvn] {
min-width: 0;
color: var(--agents-ink-soft);
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 0.7rem;
overflow-wrap: anywhere;
}
.final-cta[b-aa1qes7rvn] {
padding: clamp(96px, 12vw, 176px) 24px;
text-align: center;
background:
radial-gradient(circle at 50% 120%, rgba(244, 185, 168, 0.62), transparent 44%),
var(--agents-paper-deep);
}
.final-cta h2[b-aa1qes7rvn],
.final-cta > p:not(.eyebrow)[b-aa1qes7rvn] {
max-width: 800px;
margin-inline: auto;
}
.final-cta > p:not(.eyebrow)[b-aa1qes7rvn] {
margin-top: 24px;
}
.final-actions[b-aa1qes7rvn] {
justify-content: center;
margin-top: 30px;
}
.campaign-footer[b-aa1qes7rvn] {
min-height: 138px;
gap: 32px;
}
.campaign-footer p[b-aa1qes7rvn] {
margin: 0;
color: var(--agents-ink-soft);
font-family: var(--font-serif);
font-size: 0.95rem;
font-style: italic;
text-align: right;
}
.hero-reveal[b-aa1qes7rvn] {
opacity: 0;
transform: translateY(18px);
animation: agents-enter-b-aa1qes7rvn 700ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-reveal-two[b-aa1qes7rvn] { animation-delay: 90ms; }
.hero-reveal-three[b-aa1qes7rvn] { animation-delay: 180ms; }
.hero-reveal-four[b-aa1qes7rvn] { animation-delay: 270ms; }
@keyframes agents-enter-b-aa1qes7rvn {
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 960px) {
.hero[b-aa1qes7rvn] {
min-height: 780px;
}
.hero-copy[b-aa1qes7rvn] {
width: min(72%, 650px);
}
.hero-wash[b-aa1qes7rvn] {
background: linear-gradient(90deg, rgba(255, 249, 241, 0.98) 0%, rgba(255, 249, 241, 0.88) 52%, rgba(255, 249, 241, 0.18) 100%);
}
.journey-heading[b-aa1qes7rvn],
.offer-section[b-aa1qes7rvn],
.agent-entry[b-aa1qes7rvn] {
grid-template-columns: 1fr;
}
.journey-heading[b-aa1qes7rvn] {
gap: 24px;
}
.journey-steps[b-aa1qes7rvn] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.journey-steps li:nth-child(3)[b-aa1qes7rvn] {
border-left: 0;
}
.journey-steps li:nth-child(n + 3)[b-aa1qes7rvn] {
margin-top: 32px;
border-top: 1px solid rgba(63, 48, 44, 0.18);
}
.offer-copy[b-aa1qes7rvn],
.safety-panel[b-aa1qes7rvn] {
padding-inline: max(24px, calc((100vw - 680px) / 2));
}
.safety-panel[b-aa1qes7rvn] {
border-top: 1px solid rgba(255, 249, 241, 0.2);
border-left: 0;
}
}
@media (max-width: 640px) {
.campaign-header[b-aa1qes7rvn],
.campaign-footer[b-aa1qes7rvn],
.bridge-section[b-aa1qes7rvn],
.journey-section[b-aa1qes7rvn],
.agent-entry[b-aa1qes7rvn] {
width: min(100% - 32px, 1180px);
}
.campaign-header[b-aa1qes7rvn] {
height: 76px;
}
.brand-link img[b-aa1qes7rvn] {
height: 34px;
}
.header-nav[b-aa1qes7rvn] {
gap: 10px;
}
.header-nav a[b-aa1qes7rvn] {
font-size: 0.72rem;
}
.hero[b-aa1qes7rvn] {
min-height: 760px;
align-items: end;
padding: 96px 16px 54px;
}
.hero-art img[b-aa1qes7rvn] {
object-position: 64% center;
}
.hero-wash[b-aa1qes7rvn] {
background: linear-gradient(0deg, rgba(255, 249, 241, 0.99) 0%, rgba(255, 249, 241, 0.93) 48%, rgba(255, 249, 241, 0.18) 100%);
}
.hero-copy[b-aa1qes7rvn] {
width: 100%;
}
.hero h1[b-aa1qes7rvn] {
font-size: clamp(3.1rem, 14vw, 4.6rem);
}
.hero-actions[b-aa1qes7rvn],
.final-actions[b-aa1qes7rvn] {
flex-direction: column;
}
.button[b-aa1qes7rvn] {
width: 100%;
}
.bridge-pair[b-aa1qes7rvn] {
grid-template-columns: 1fr;
margin-top: 48px;
}
.bridge-thread[b-aa1qes7rvn] {
height: 76px;
}
.bridge-thread[b-aa1qes7rvn]::before,
.bridge-thread[b-aa1qes7rvn]::after {
width: 1px;
height: 24px;
}
.bridge-thread span[b-aa1qes7rvn] {
margin-block: 4px;
}
.journey-steps[b-aa1qes7rvn] {
grid-template-columns: 1fr;
margin-top: 48px;
}
.journey-steps li[b-aa1qes7rvn],
.journey-steps li + li[b-aa1qes7rvn],
.journey-steps li:nth-child(n + 3)[b-aa1qes7rvn] {
margin: 0;
padding: 24px 0;
border-top: 0;
border-left: 0;
border-bottom: 1px solid rgba(63, 48, 44, 0.18);
}
.journey-steps h3[b-aa1qes7rvn] {
margin-top: 18px;
}
.offer-section[b-aa1qes7rvn] {
display: block;
}
.offer-plans[b-aa1qes7rvn] {
grid-template-columns: 1fr;
}
.offer-price strong[b-aa1qes7rvn] {
font-size: 2rem;
}
.agent-entry[b-aa1qes7rvn] {
gap: 48px;
}
.campaign-footer[b-aa1qes7rvn] {
min-height: 160px;
flex-direction: column;
justify-content: center;
text-align: center;
}
.campaign-footer p[b-aa1qes7rvn] {
text-align: center;
}
}
@media (prefers-reduced-motion: reduce) {
.hero-reveal[b-aa1qes7rvn] {
opacity: 1;
transform: none;
animation: none;
}
.button[b-aa1qes7rvn],
.agent-links a[b-aa1qes7rvn] {
transition: none;
}
}
/* /Components/Pages/AppleOAuthSignIn.razor.rz.scp.css */
.apple-auth-page[b-bxjby9kwud] {
--apple-auth-bg: #f7ecdf;
--apple-auth-bg-soft: #fff8f0;
--apple-auth-ink: #46352e;
--apple-auth-muted: #6a5a52;
--apple-auth-line: rgba(133, 103, 82, 0.18);
--apple-auth-gold: #b88b5f;
--apple-auth-gold-deep: #8f6847;
--apple-auth-card: rgba(255, 250, 243, 0.94);
--apple-auth-shadow: 0 28px 90px rgba(96, 67, 47, 0.14);
width: 100%;
min-height: 100vh;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.76), transparent 34%),
radial-gradient(circle at bottom right, rgba(232, 244, 248, 0.58), transparent 32%),
linear-gradient(180deg, var(--apple-auth-bg-soft) 0%, var(--apple-auth-bg) 100%);
color: var(--apple-auth-ink);
}
.apple-auth-page__brand[b-bxjby9kwud] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
max-width: 120rem;
margin: 0 auto;
padding: 2rem 3rem 0;
}
.apple-auth-page__brand-link[b-bxjby9kwud] {
display: block;
text-decoration: none;
opacity: 0.72;
transition: opacity 0.2s ease;
}
.apple-auth-page__brand-link:hover[b-bxjby9kwud] {
opacity: 1;
}
.apple-auth-page__brand-logo[b-bxjby9kwud] {
height: 36px;
width: auto;
display: block;
}
.apple-auth-menu[b-bxjby9kwud] {
position: relative;
}
.apple-auth-menu__button[b-bxjby9kwud] {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(164, 123, 80, 0.2);
background: rgba(253, 248, 240, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}
.apple-auth-menu__button:hover[b-bxjby9kwud] {
background: rgba(253, 248, 240, 0.95);
border-color: rgba(164, 123, 80, 0.4);
box-shadow: 0 3px 12px rgba(139, 115, 85, 0.14);
}
.apple-auth-menu__dots[b-bxjby9kwud] {
font-size: 1.4rem;
color: #6b5b4e;
letter-spacing: 2px;
line-height: 1;
}
.apple-auth-menu__backdrop[b-bxjby9kwud] {
position: fixed;
inset: 0;
z-index: 60;
}
.apple-auth-menu__dropdown[b-bxjby9kwud] {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: rgba(253, 248, 240, 0.97);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(232, 213, 200, 0.5);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14), 0 2px 8px rgba(139, 115, 85, 0.06);
padding: 0.5rem 0;
z-index: 70;
animation: appleAuthMenuFadeIn-b-bxjby9kwud 0.2s ease-out;
}
@keyframes appleAuthMenuFadeIn-b-bxjby9kwud {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.apple-auth-menu__item[b-bxjby9kwud] {
display: block;
padding: 0.7rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.92rem;
color: #5c4033;
text-decoration: none;
transition: background-color 0.15s ease;
}
.apple-auth-menu__item:hover[b-bxjby9kwud] {
background: rgba(196, 154, 108, 0.08);
}
.apple-auth-page__main[b-bxjby9kwud] {
position: relative;
z-index: 1;
min-height: calc(100vh - 6rem);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem 4rem;
}
.apple-auth-card[b-bxjby9kwud] {
position: relative;
width: min(100%, 46rem);
padding: 3.5rem 3rem 2.75rem;
border-radius: 28px;
border: 1px solid var(--apple-auth-line);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 240, 0.88)),
var(--apple-auth-card);
box-shadow: var(--apple-auth-shadow);
text-align: center;
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
}
.apple-auth-card__ornament[b-bxjby9kwud] {
position: absolute;
inset: 1.1rem;
border: 1px solid rgba(184, 139, 95, 0.12);
border-radius: 20px;
pointer-events: none;
}
.apple-auth-card__eyebrow[b-bxjby9kwud] {
margin: 0 0 1rem;
font-size: 0.82rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--apple-auth-gold-deep);
}
.apple-auth-card__icon[b-bxjby9kwud] {
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 1.25rem;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 1.15rem;
font-weight: 700;
color: var(--apple-auth-gold-deep);
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(247, 225, 198, 0.9));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 14px 34px rgba(184, 139, 95, 0.2);
}
.apple-auth-card__icon--error[b-bxjby9kwud] {
color: #7a4b35;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(255, 199, 182, 0.82));
}
.apple-auth-card__title[b-bxjby9kwud] {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.25rem);
line-height: 1.08;
letter-spacing: 0;
}
.apple-auth-card__lead[b-bxjby9kwud] {
margin: 1rem auto 0;
max-width: 33rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--apple-auth-muted);
}
.apple-auth-card__body[b-bxjby9kwud] {
margin: 0.9rem auto 0;
max-width: 32rem;
font-size: 0.98rem;
line-height: 1.75;
color: rgba(70, 53, 46, 0.82);
}
.apple-auth-card__actions[b-bxjby9kwud] {
margin-top: 2rem;
display: flex;
justify-content: center;
gap: 0.9rem;
flex-wrap: wrap;
}
.apple-auth-card__action[b-bxjby9kwud] {
min-width: 13rem;
padding: 0.95rem 1.5rem;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease;
}
.apple-auth-card__action:hover[b-bxjby9kwud] {
transform: translateY(-1px);
}
.apple-auth-card__action--primary[b-bxjby9kwud] {
color: #fffaf6;
background: linear-gradient(135deg, var(--apple-auth-gold) 0%, var(--apple-auth-gold-deep) 100%);
box-shadow: 0 12px 28px rgba(136, 102, 73, 0.22);
}
.apple-auth-card__action--secondary[b-bxjby9kwud] {
color: var(--apple-auth-ink);
background: rgba(255, 251, 246, 0.82);
border: 1px solid rgba(143, 104, 71, 0.18);
}
.apple-auth-card__action--secondary:hover[b-bxjby9kwud] {
border-color: rgba(143, 104, 71, 0.32);
background: rgba(255, 255, 255, 0.92);
}
.apple-auth-card__help[b-bxjby9kwud] {
margin: 1.6rem 0 0;
font-size: 0.92rem;
color: rgba(70, 53, 46, 0.68);
}
.apple-auth-card__help-link[b-bxjby9kwud] {
color: var(--apple-auth-gold-deep);
text-decoration: none;
border-bottom: 1px solid rgba(143, 104, 71, 0.24);
}
.apple-auth-card__help-link:hover[b-bxjby9kwud] {
border-bottom-color: rgba(143, 104, 71, 0.48);
}
body.night-mode .apple-auth-page[b-bxjby9kwud] {
--apple-auth-bg: #1a2a32;
--apple-auth-bg-soft: #2d3b44;
--apple-auth-ink: #e8f4f8;
--apple-auth-muted: #cfd8dc;
--apple-auth-line: rgba(232, 244, 248, 0.12);
--apple-auth-card: rgba(30, 46, 54, 0.92);
--apple-auth-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
}
body.night-mode .apple-auth-card[b-bxjby9kwud] {
background:
linear-gradient(180deg, rgba(45, 59, 68, 0.92), rgba(30, 46, 54, 0.9)),
var(--apple-auth-card);
}
body.night-mode .apple-auth-card__body[b-bxjby9kwud],
body.night-mode .apple-auth-card__help[b-bxjby9kwud] {
color: rgba(232, 244, 248, 0.72);
}
body.night-mode .apple-auth-card__action--secondary[b-bxjby9kwud] {
color: var(--apple-auth-ink);
background: rgba(45, 59, 68, 0.88);
border-color: rgba(232, 244, 248, 0.16);
}
body.night-mode .apple-auth-menu__button[b-bxjby9kwud] {
background: rgba(45, 59, 68, 0.85);
border-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .apple-auth-menu__dots[b-bxjby9kwud] {
color: #cfd8dc;
}
body.night-mode .apple-auth-menu__dropdown[b-bxjby9kwud] {
background: rgba(30, 46, 54, 0.97);
border-color: rgba(196, 154, 108, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.night-mode .apple-auth-menu__item[b-bxjby9kwud] {
color: #e8f4f8;
}
body.night-mode .apple-auth-menu__item:hover[b-bxjby9kwud] {
background: rgba(196, 154, 108, 0.1);
}
@media (max-width: 768px) {
.apple-auth-page__brand[b-bxjby9kwud] {
padding: 1rem 1.5rem;
}
.apple-auth-page__main[b-bxjby9kwud] {
padding: 1.25rem 1rem 2.5rem;
min-height: calc(100vh - 4.5rem);
}
.apple-auth-card[b-bxjby9kwud] {
padding: 2.6rem 1.35rem 2rem;
border-radius: 22px;
}
.apple-auth-card__actions[b-bxjby9kwud] {
flex-direction: column;
}
.apple-auth-card__action[b-bxjby9kwud] {
width: 100%;
}
}
/* /Components/Pages/CheckEmailPage.razor.rz.scp.css */
.check-email-page[b-gc1m2pd05c] {
width: 100%;
flex: 1 1 auto;
min-height: 100vh;
min-height: 100svh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(5rem, 8vw, 7rem) 1.5rem 3rem;
background:
linear-gradient(180deg, rgba(255, 246, 232, 0.88) 0%, rgba(255, 239, 214, 0.94) 100%),
radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 245, 229, 0.34) 38%, transparent 70%);
color: #3b2a22;
overflow: hidden;
}
.check-email-page[b-gc1m2pd05c]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(114, 77, 53, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(114, 77, 53, 0.04) 1px, transparent 1px);
background-size: 42px 42px;
opacity: 0.26;
mask-image: radial-gradient(circle at 50% 44%, black 0%, transparent 72%);
}
.check-email-page[b-gc1m2pd05c]::after {
content: "";
position: absolute;
width: min(54rem, 92vw);
height: min(54rem, 92vw);
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 248, 238, 0.28) 43%, transparent 72%);
pointer-events: none;
}
.check-email-logo[b-gc1m2pd05c] {
position: absolute;
top: 1.8rem;
left: 2rem;
z-index: 2;
display: inline-flex;
align-items: baseline;
gap: 0;
color: #5c3f37;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 1.45rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
letter-spacing: 0;
}
.check-email-logo strong[b-gc1m2pd05c] {
color: #ffaaa3;
font-weight: 800;
}
.check-email-shell[b-gc1m2pd05c] {
width: min(100%, 510px);
position: relative;
z-index: 1;
}
.check-email-card[b-gc1m2pd05c] {
position: relative;
width: 100%;
padding: clamp(2rem, 5vw, 2.65rem);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 248, 240, 0.96) 100%);
border: 1px solid rgba(154, 111, 79, 0.2);
box-shadow:
0 28px 70px rgba(92, 62, 39, 0.14),
0 1px 0 rgba(255, 255, 255, 0.82) inset;
text-align: left;
}
.check-email-icon[b-gc1m2pd05c] {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
border-radius: 999px;
color: #8e6346;
background: rgba(255, 239, 223, 0.86);
box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.16);
}
.check-email-line-icon[b-gc1m2pd05c] {
width: 1.45rem;
height: 1.45rem;
display: block;
}
.check-email-eyebrow[b-gc1m2pd05c] {
margin: 0 0 0.45rem;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #a06942;
}
.check-email-card h1[b-gc1m2pd05c] {
margin: 0;
font-family: var(--font-serif, 'Fraunces', serif);
font-size: clamp(2rem, 5vw, 2.65rem);
font-weight: var(--mobile-hero-heading-weight, 700);
line-height: 1.06;
color: #3b271f;
}
.check-email-intro[b-gc1m2pd05c] {
margin: 0.85rem 0 1.5rem;
max-width: 28rem;
color: #745a4a;
font-size: 1.02rem;
line-height: 1.6;
}
.check-email-intro strong[b-gc1m2pd05c] {
color: #3f2c22;
font-weight: 800;
}
.check-email-help[b-gc1m2pd05c] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.45rem 0.65rem;
margin-bottom: 1rem;
color: #745a4a;
font-size: 0.95rem;
line-height: 1.5;
}
.check-email-text-button[b-gc1m2pd05c],
.check-email-help-link[b-gc1m2pd05c] {
border: 0;
padding: 0;
background: transparent;
color: #8f5f34;
font: inherit;
font-weight: 800;
text-decoration: none;
cursor: pointer;
}
.check-email-text-button:hover[b-gc1m2pd05c],
.check-email-help-link:hover[b-gc1m2pd05c] {
text-decoration: underline;
}
.check-email-help-divider[b-gc1m2pd05c] {
width: 1px;
height: 1rem;
background: rgba(154, 111, 79, 0.24);
}
.check-email-tip[b-gc1m2pd05c] {
margin-bottom: 1rem;
border-radius: 14px;
padding: 1rem;
color: #425235;
background: rgba(240, 248, 231, 0.92);
border: 1px solid rgba(104, 132, 76, 0.22);
font-size: 0.95rem;
line-height: 1.5;
}
.check-email-submit[b-gc1m2pd05c] {
width: 100%;
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.2rem;
padding: 0.85rem 1.45rem;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #d4914f 0%, #bd7338 100%);
color: #fffaf4;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 1rem;
font-weight: 800;
text-decoration: none;
cursor: pointer;
box-shadow: 0 12px 26px rgba(175, 99, 46, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.check-email-submit:hover[b-gc1m2pd05c] {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(175, 99, 46, 0.3);
}
.check-email-note[b-gc1m2pd05c] {
margin: 1.35rem 0 0;
padding-top: 1rem;
border-top: 1px solid rgba(154, 111, 79, 0.14);
color: #8b735f;
font-size: 0.88rem;
line-height: 1.5;
text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
.check-email-card[b-gc1m2pd05c] {
animation: checkEmailEnter-b-gc1m2pd05c 0.42s ease-out both;
}
.check-email-tip[b-gc1m2pd05c] {
animation: checkEmailTipEnter-b-gc1m2pd05c 0.22s ease-out both;
}
}
@keyframes checkEmailEnter-b-gc1m2pd05c {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes checkEmailTipEnter-b-gc1m2pd05c {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 640px) {
.check-email-page[b-gc1m2pd05c] {
align-items: flex-start;
padding: 5.8rem 1rem 2rem;
}
.check-email-logo[b-gc1m2pd05c] {
top: 1.4rem;
left: 1.25rem;
font-size: 1.28rem;
}
.check-email-card[b-gc1m2pd05c] {
border-radius: 16px;
}
.check-email-icon[b-gc1m2pd05c] {
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1rem;
}
.check-email-help[b-gc1m2pd05c] {
align-items: flex-start;
flex-direction: column;
}
.check-email-help-divider[b-gc1m2pd05c] {
display: none;
}
}
/* Editorial application surfaces. */
.check-email-page[b-gc1m2pd05c] { background: var(--lov-paper); color: var(--lov-ink); }
.check-email-page[b-gc1m2pd05c]::before, .check-email-page[b-gc1m2pd05c]::after { display: none; }
.check-email-card[b-gc1m2pd05c] { background: var(--lov-surface); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: 0 12px 36px #30382d0a; }
.check-email-card h1[b-gc1m2pd05c] { color: var(--lov-ink); font-size: clamp(2rem,4vw,2.6rem); }
.check-email-intro[b-gc1m2pd05c], .check-email-note[b-gc1m2pd05c], .check-email-eyebrow[b-gc1m2pd05c] { color: var(--lov-muted); }
.check-email-submit[b-gc1m2pd05c], .check-email-submit:hover:not(:disabled)[b-gc1m2pd05c] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; box-shadow: none; }
.check-email-icon[b-gc1m2pd05c] { background: var(--lov-selected); color: var(--lov-green); border-color: var(--lov-line); }
/* Keep nested content legible on the selected application surface. */
.check-email-intro strong[b-gc1m2pd05c] { color: var(--lov-ink); }
.check-email-help[b-gc1m2pd05c] { color: var(--lov-muted); }
.check-email-text-button[b-gc1m2pd05c], .check-email-help-link[b-gc1m2pd05c] { color: var(--lov-green); }
/* /Components/Pages/ContactGranny.razor.rz.scp.css */
/* GrannysCorner.razor.css - Granny's Corner Page Styles */
/* Global body/html overflow prevention - REMOVED */
/* Base styles inherited from FrontPage but with warmer tones */
[b-0dwcy2ftk7] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
/* inherited font-sans */
}
/* App Layout */
[b-0dwcy2ftk7] .app-layout {
display: flex;
min-height: 100vh;
/* inherited font-sans */
background: linear-gradient(135deg, #FFF9F0 0%, #FFEFD5 50%, #FFF4E4 100%);
padding-top: 0;
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-0dwcy2ftk7] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-0dwcy2ftk7] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-0dwcy2ftk7] .sidebar.hidden {
transform: translateX(-100%);
}
[b-0dwcy2ftk7] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 1.0rem;
}
[b-0dwcy2ftk7] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-0dwcy2ftk7] .sidebar-logo img {
max-width: 180px;
width: auto;
height: 50px;
}
[b-0dwcy2ftk7] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-0dwcy2ftk7] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
}
[b-0dwcy2ftk7] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-0dwcy2ftk7] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-0dwcy2ftk7] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease;
}
[b-0dwcy2ftk7] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-0dwcy2ftk7] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: #4F4A45;
}
[b-0dwcy2ftk7] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
[b-0dwcy2ftk7] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-0dwcy2ftk7] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
}
[b-0dwcy2ftk7] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-0dwcy2ftk7] .dropdown-item:hover {
background-color: #f0dad3;
}
/* Toggle Sidebar Button */
[b-0dwcy2ftk7] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Main Container */
[b-0dwcy2ftk7] .container-v3 {
flex: 1;
max-width: 1200px;
margin: 30px auto;
margin-left: 280px;
padding: 0 20px;
padding-bottom: 40px;
display: flex;
flex-direction: column;
gap: 40px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-0dwcy2ftk7] .container-v3.sidebar-hidden {
margin-left: 0;
}
/* Granny Hero Section */
[b-0dwcy2ftk7] .granny-hero-section {
/* background: linear-gradient(135deg, rgba(255, 249, 240, 0.95) 0%, rgba(255, 244, 228, 0.95) 100%);
border-radius: 25px;
padding: 50px 40px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid #f5e5d3; */
position: relative;
overflow: hidden;
}
[b-0dwcy2ftk7] .granny-hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(251, 207, 168, 0.18) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: candleFlicker-b-0dwcy2ftk7 4s ease-in-out infinite;
}
[b-0dwcy2ftk7] .granny-hero-section::after {
content: '';
position: absolute;
left: 12%;
right: 12%;
bottom: -12px;
height: 22px;
background: radial-gradient(circle, rgba(84, 52, 33, 0.05) 0%, rgba(84, 52, 33, 0) 70%);
filter: blur(2px);
pointer-events: none;
}
[b-0dwcy2ftk7] .granny-hero-content {
display: flex;
align-items: center;
gap: 40px;
position: relative;
z-index: 1;
}
[b-0dwcy2ftk7] .granny-illustration-wrapper {
flex-shrink: 0;
/* transform: translateY(-20px);*/
}
[b-0dwcy2ftk7] .granny-illustration {
max-width: 400px;
height: auto;
filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}
@keyframes candleFlicker-b-0dwcy2ftk7 {
0%, 100% {
opacity: 0.9;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.015);
}
70% {
opacity: 0.96;
transform: scale(1.01);
}
}
[b-0dwcy2ftk7] .granny-welcome-text {
flex: 1;
max-width: 520px;
}
[b-0dwcy2ftk7] .granny-title {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 2.5em;
font-weight: var(--mobile-hero-heading-weight);
color: #4F4A45;
margin: 0 0 20px 0;
line-height: 1.2;
}
[b-0dwcy2ftk7] .granny-subtitle {
font-size: 1.2em;
color: #666;
line-height: 1.6;
margin: 0;
}
/* Granny Section Base */
[b-0dwcy2ftk7] .granny-section {
/* background: rgba(255, 255, 255, 0.7); */
backdrop-filter: blur(10px);
/* border-radius: 20px; */
/* padding: 40px; */
margin: 0 auto;
max-width: 960px;
/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(245, 229, 211, 0.6); */
}
[b-0dwcy2ftk7] .granny-section-header {
text-align: center;
margin-bottom: 35px;
}
[b-0dwcy2ftk7] .granny-section-title {
/* inherited font-sans */
font-size: 2em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 10px 0;
}
[b-0dwcy2ftk7] .granny-section-subtitle {
font-size: 1.1em;
color: #666;
margin: 0;
font-style: italic;
}
[b-0dwcy2ftk7] .contact-support-route {
width: 100%;
}
[b-0dwcy2ftk7] .contact-support-route-inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 28px;
padding: 24px 0;
border-top: 1px solid rgba(122, 91, 62, 0.16);
border-bottom: 1px solid rgba(122, 91, 62, 0.16);
}
[b-0dwcy2ftk7] .contact-support-route h2 {
margin: 0 0 8px;
font-family: var(--font-serif);
font-size: 1.35rem;
line-height: 1.2;
color: #4f4035;
letter-spacing: 0;
}
[b-0dwcy2ftk7] .contact-support-route p {
margin: 0;
font-family: var(--font-sans);
color: #66574a;
line-height: 1.55;
}
[b-0dwcy2ftk7] .contact-support-actions {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
min-width: min(320px, 100%);
}
[b-0dwcy2ftk7] .contact-support-email {
display: inline-flex;
align-items: baseline;
gap: 10px;
padding: 10px 16px;
border: 1px solid rgba(176, 141, 110, 0.34);
border-radius: 999px;
background: rgba(255, 251, 245, 0.6);
color: #4f4035;
text-decoration: none;
font-family: var(--font-sans);
transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}
[b-0dwcy2ftk7] .contact-support-email:hover {
transform: translateY(-1px);
border-color: rgba(176, 141, 110, 0.58);
background: rgba(255, 251, 245, 0.9);
}
[b-0dwcy2ftk7] .contact-support-email span {
color: #8c725d;
font-size: 0.88rem;
}
[b-0dwcy2ftk7] .contact-support-email strong {
font-weight: 700;
letter-spacing: 0;
}
/* Cards Grid */
[b-0dwcy2ftk7] .granny-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
[b-0dwcy2ftk7] .granny-card {
background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #f0dad3;
transition: all 0.3s ease;
}
[b-0dwcy2ftk7] .granny-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
[b-0dwcy2ftk7] .granny-card-highlight {
background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
border: 2px solid #E8B076;
}
[b-0dwcy2ftk7] .granny-card-icon {
font-size: 2.5em;
margin-bottom: 15px;
text-align: center;
}
[b-0dwcy2ftk7] .granny-card-title {
/* inherited font-sans */
font-size: 1.3em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 10px 0;
}
[b-0dwcy2ftk7] .granny-card-text {
font-size: 1em;
color: #666;
line-height: 1.6;
margin: 0;
}
/* Progress Cards */
[b-0dwcy2ftk7] .granny-progress-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
}
[b-0dwcy2ftk7] .granny-progress-card {
background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
border-radius: 15px;
padding: 30px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 2px solid #f5e5d3;
transition: all 0.3s ease;
}
[b-0dwcy2ftk7] .granny-progress-card:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
[b-0dwcy2ftk7] .progress-icon {
font-size: 3em;
margin-bottom: 15px;
}
[b-0dwcy2ftk7] .progress-number {
font-size: 3em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 10px;
}
[b-0dwcy2ftk7] .progress-label {
font-size: 1em;
color: #666;
font-weight: 600;
}
/* Featured Theme */
[b-0dwcy2ftk7] .granny-featured-theme {
display: flex;
background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid #f5e5d3;
transition: all 0.3s ease;
}
[b-0dwcy2ftk7] .granny-featured-theme:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
[b-0dwcy2ftk7] .theme-image {
width: 40%;
object-fit: cover;
border-radius: 20px;
margin: 1em;
}
[b-0dwcy2ftk7] .theme-content {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
[b-0dwcy2ftk7] .theme-title {
/* inherited font-sans */
font-size: 1.8em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 15px 0;
}
[b-0dwcy2ftk7] .theme-description {
font-size: 1.1em;
color: #666;
line-height: 1.6;
margin: 0 0 25px 0;
}
[b-0dwcy2ftk7] .btn-theme {
align-self: flex-start;
padding: 12px 30px;
background-color: #FBCFA8;
color: #4F4A45;
border: 2px solid #F0C07A;
border-radius: 25px;
font-weight: 700;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
}
[b-0dwcy2ftk7] .btn-theme:hover {
background-color: #F0C07A;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(251, 207, 168, 0.4);
}
/* Wisdom Section */
[b-0dwcy2ftk7] .granny-wisdom {
background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
}
[b-0dwcy2ftk7] .granny-wisdom-card {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
[b-0dwcy2ftk7] .granny-quote-icon {
font-size: 3em;
margin-bottom: 20px;
opacity: 0.7;
}
[b-0dwcy2ftk7] .granny-quote {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
[b-0dwcy2ftk7] .granny-quote p {
font-size: 1.4em;
font-style: italic;
color: #4F4A45;
line-height: 1.6;
margin: 0;
}
[b-0dwcy2ftk7] .granny-signature {
font-size: 1.1em;
color: #666;
font-weight: 600;
}
/* Quick Actions */
[b-0dwcy2ftk7] .granny-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
[b-0dwcy2ftk7] .granny-action-btn {
background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
border: 2px solid #f5e5d3;
border-radius: 15px;
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
cursor: pointer;
transition: all 0.3s ease;
/* inherited font-sans */
}
[b-0dwcy2ftk7] .granny-action-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
}
[b-0dwcy2ftk7] .action-icon {
font-size: 2.5em;
}
[b-0dwcy2ftk7] .action-label {
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
}
/* Sidebar Overlay */
.sidebar-overlay[b-0dwcy2ftk7] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none; /* Prevent scroll-through when overlay is visible */
}
.sidebar-overlay.hidden[b-0dwcy2ftk7] {
display: none;
}
/* Responsive Styles */
@media (max-width: 1024px) {
[b-0dwcy2ftk7] .mobile-top-bar {
display: flex !important;
}
[b-0dwcy2ftk7] .toggle-sidebar {
display: none !important;
}
[b-0dwcy2ftk7] .app-layout {
padding-top: 60px;
}
[b-0dwcy2ftk7] .container-v3 {
margin-left: 0 !important;
margin-top: 70px;
}
[b-0dwcy2ftk7] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-0dwcy2ftk7] .sidebar.visible {
transform: translateX(0);
}
[b-0dwcy2ftk7] .granny-hero-content {
flex-direction: column;
text-align: center;
}
[b-0dwcy2ftk7] .granny-illustration-wrapper {
transform: none;
}
[b-0dwcy2ftk7] .granny-illustration {
width: 300px;
}
[b-0dwcy2ftk7] .granny-featured-theme {
flex-direction: column;
}
[b-0dwcy2ftk7] .theme-image {
width: 100%;
margin: 0;
border-radius: 20px 20px 0 0;
}
}
@media (max-width: 768px) {
/* Mobile touch scroll fixes */
[b-0dwcy2ftk7] .app-layout {
flex-direction: column;
width: 100%;
max-width: 100%;
min-width: 0;
overflow-x: hidden;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
[b-0dwcy2ftk7] .container-v3 {
/*
overflow-x: hidden;
touch-action: pan-y pinch-zoom;
overscroll-behavior: contain;
*/
padding: 0 var(--mobile-page-margin);
margin-top: 20px;
margin-left: auto;
margin-right: auto;
width: 100%;
min-width: 0;
gap: 30px;
}
[b-0dwcy2ftk7] .granny-hero-section {
margin-top: 20px;
padding: 30px 20px;
}
[b-0dwcy2ftk7] .granny-title {
font-size: 2em;
}
[b-0dwcy2ftk7] .granny-subtitle {
font-size: 1.1em;
}
[b-0dwcy2ftk7] .contact-support-route-inner {
flex-direction: column;
align-items: flex-start;
gap: 18px;
padding: 20px 0;
}
[b-0dwcy2ftk7] .contact-support-actions {
align-items: flex-start;
min-width: 0;
width: 100%;
}
[b-0dwcy2ftk7] .contact-support-email {
width: 100%;
justify-content: space-between;
box-sizing: border-box;
}
[b-0dwcy2ftk7] .granny-section {
padding: 30px 20px;
}
[b-0dwcy2ftk7] .granny-section-title {
font-size: 1.6em;
}
[b-0dwcy2ftk7] .granny-cards-grid {
grid-template-columns: 1fr;
}
[b-0dwcy2ftk7] .granny-progress-cards {
grid-template-columns: 1fr;
}
[b-0dwcy2ftk7] .theme-content {
padding: 25px;
}
[b-0dwcy2ftk7] .theme-title {
font-size: 1.5em;
}
[b-0dwcy2ftk7] .granny-quote p {
font-size: 1.2em;
}
[b-0dwcy2ftk7] .granny-actions-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
[b-0dwcy2ftk7] .granny-illustration {
width: 300px;
}
[b-0dwcy2ftk7] .granny-title {
font-size: 1.8em;
}
[b-0dwcy2ftk7] .granny-subtitle {
font-size: 1em;
}
[b-0dwcy2ftk7] .granny-section-title {
font-size: 1.4em;
}
[b-0dwcy2ftk7] .granny-card {
padding: 20px;
}
[b-0dwcy2ftk7] .granny-progress-card {
padding: 20px;
}
[b-0dwcy2ftk7] .progress-number {
font-size: 2.5em;
}
}
/* Footer alignment to follow sidebar on desktop (mirrors ThemesAll layout) */
[b-0dwcy2ftk7] .main-footer {
margin-left: 280px;
width: calc(100% - 280px);
margin-top: 80px;
padding: 60px 0 30px 0;
/*background-color: #FAF3E5;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(245, 229, 211, 0.6);*/
}
[b-0dwcy2ftk7] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
@media (max-width: 992px) {
[b-0dwcy2ftk7] .main-footer {
margin-left: 0;
width: 100%;
}
}
@media (max-width: 768px) {
[b-0dwcy2ftk7] .main-footer {
flex: 0 0 auto;
align-self: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
margin-left: 0;
overflow-x: hidden;
box-sizing: border-box;
}
[b-0dwcy2ftk7] .main-footer .footer-container {
width: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
}
[b-0dwcy2ftk7] .main-footer .footer-bottom {
min-width: 0;
}
[b-0dwcy2ftk7] .main-footer .footer-languages {
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
}
}
/* --- Integrated ContactGranny Form Design --- */
[b-0dwcy2ftk7] .contact-granny-hero-section {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
padding: 0;
}
[b-0dwcy2ftk7] .contact-granny-content-wrapper {
width: 100%;
max-width: 600px;
margin: 0 auto;
/* background: linear-gradient(135deg, var(--lov-paper) 0%, #FFF4E4 100%);
border-radius: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);*/
overflow: hidden;
position: relative;
}
[b-0dwcy2ftk7] .contact-granny-illustration-section {
width: 100%;
display: flex;
justify-content: center;
padding: 40px 40px 20px 40px;
/*background: linear-gradient(135deg, var(--lov-paper) 0%, #FFF8ED 100%);*/
}
[b-0dwcy2ftk7] .granny-illustration {
max-width: 500px;
width: 100%;
height: auto;
/*border-radius: 20px;
box-shadow: 0 6px 25px rgba(0,0,0,0.15);*/
transition: transform 0.3s ease;
}
[b-0dwcy2ftk7] .granny-illustration:hover {
transform: scale(1.02);
}
[b-0dwcy2ftk7] .contact-granny-form-section {
max-width: 700px;
margin: 0 auto 32px auto;
width: 100%;
/*background: rgba(255,244,228,0.95);
border-radius: 18px;
box-shadow: 0 2px 10px rgba(0,0,0,0.07);*/
padding: 32px 16px 24px 16px;
display: flex;
flex-direction: column;
align-items: center;
/*background: rgba(255,244,228,0.7);
border-radius: 0;*/
box-shadow: none;
padding: 30px 40px 40px 40px;
margin-bottom: 0;
border-top: 1px solid rgba(240, 218, 211, 0.3);
}
[b-0dwcy2ftk7] .contact-granny-header {
text-align: left;
margin-bottom: 30px;
}
[b-0dwcy2ftk7] .contact-granny-title {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 2.8em;
font-weight: var(--mobile-hero-heading-weight);
color: #4F4A45;
margin-bottom: 15px;
text-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
[b-0dwcy2ftk7] .contact-granny-subtitle {
font-size: 1.5em;
color: #6B4F3A;
margin-bottom: 0;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
}
[b-0dwcy2ftk7] .contact-granny-form {
--foyer-field-bg: rgba(255, 251, 245, 0.74);
--foyer-field-bg-focus: rgba(255, 248, 239, 0.92);
--foyer-field-border: rgba(176, 141, 110, 0.34);
--foyer-field-border-strong: rgba(176, 141, 110, 0.58);
--foyer-peach: var(--accent2, #FFC7B6);
--foyer-peach-soft: #FBCFA8;
--foyer-copper: #E0A96D;
--foyer-peach-focus: rgba(251, 207, 168, 0.92);
--foyer-copper-border: rgba(224, 169, 109, 0.92);
--foyer-copper-focus: rgba(224, 169, 109, 0.42);
--foyer-copper-focus-strong: rgba(224, 169, 109, 0.62);
--foyer-ink: var(--text-dark, #4F4A45);
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-0dwcy2ftk7] .contact-granny-form-fields {
width: 100%;
display: flex;
flex-direction: column;
gap: 18px;
align-items:center;
}
[b-0dwcy2ftk7] .contact-granny-error {
width: 100%;
padding: 12px 16px;
border-radius: 14px;
background: #fff4f3;
color: #b42318;
font-size: 1rem;
text-align: center;
box-shadow: 0 3px 12px rgba(180, 35, 24, 0.12);
}
[b-0dwcy2ftk7] .contact-granny-form-group {
width: 100%;
display: flex;
flex-direction: column;
}
[b-0dwcy2ftk7] .contact-granny-input {
width: 100%;
padding: 16px 20px;
border: 1.5px solid var(--foyer-field-border);
border-radius: 16px;
font-size: 1.05em;
/* inherited font-sans */
background: var(--foyer-field-bg);
color: var(--foyer-ink);
margin-bottom: 2px;
box-sizing: border-box;
transition: all 0.3s ease;
box-shadow: inset 0 1px 3px rgba(107, 79, 58, 0.08), 0 1px 0 rgba(255, 255, 255, 0.58);
}
[b-0dwcy2ftk7] .contact-granny-input::placeholder {
color: rgba(79, 74, 69, 0.58);
}
[b-0dwcy2ftk7] .contact-granny-input:focus {
outline: none;
border-color: var(--foyer-peach-focus);
box-shadow: inset 0 1px 3px rgba(107, 79, 58, 0.07), 0 0 0 4px rgba(251, 207, 168, 0.24), 0 8px 22px rgba(107, 79, 58, 0.08);
background: var(--foyer-field-bg-focus);
}
[b-0dwcy2ftk7] .contact-granny-input:focus-visible {
outline: 2px solid var(--foyer-copper-focus);
outline-offset: 3px;
}
[b-0dwcy2ftk7] .contact-granny-textarea {
min-height: 120px;
resize: none;
/* inherited font-sans */
}
[b-0dwcy2ftk7] .contact-granny-checkbox-group {
display: flex;
justify-content: center;
margin: 10px 0;
}
[b-0dwcy2ftk7] .contact-granny-checkbox-label {
display: flex;
align-items: center;
font-size: 1.5em;
color: var(--foyer-ink);
gap: 12px;
cursor: pointer;
padding: 8px 10px;
border-radius: 14px;
transition: all 0.3s ease;
}
[b-0dwcy2ftk7] .contact-granny-checkbox-label:hover {
background-color: rgba(251, 207, 168, 0.18);
}
[b-0dwcy2ftk7] .contact-granny-checkbox {
-webkit-appearance: none;
appearance: none;
position: relative;
flex: 0 0 auto;
width: 24px;
height: 24px;
margin: 0 4px 0 0;
border: 1.5px solid var(--foyer-field-border-strong);
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 251, 245, 0.96), rgba(255, 242, 225, 0.86));
box-shadow: inset 0 1px 2px rgba(107, 79, 58, 0.08), 0 2px 8px rgba(107, 79, 58, 0.08);
cursor: pointer;
transition: all 0.3s ease;
}
[b-0dwcy2ftk7] .contact-granny-checkbox:hover {
border-color: rgba(240, 192, 122, 0.88);
box-shadow: inset 0 1px 2px rgba(107, 79, 58, 0.08), 0 4px 12px rgba(251, 207, 168, 0.22);
}
[b-0dwcy2ftk7] .contact-granny-checkbox:checked {
border-color: var(--foyer-copper-border);
background-color: var(--foyer-peach);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.2 12.4l3.7 3.7 7.9-8.2' stroke='%23FFFBF5' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient(135deg, var(--foyer-peach) 0%, var(--foyer-peach-soft) 100%);
background-position: center;
background-repeat: no-repeat;
background-size: 17px 17px, cover;
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.28), 0 5px 14px rgba(240, 192, 122, 0.28);
}
[b-0dwcy2ftk7] .contact-granny-checkbox:focus {
outline: none;
}
[b-0dwcy2ftk7] .contact-granny-checkbox:focus-visible {
outline: 2px solid var(--foyer-copper-focus-strong);
outline-offset: 4px;
box-shadow: inset 0 1px 2px rgba(107, 79, 58, 0.08), 0 0 0 5px rgba(251, 207, 168, 0.24);
}
[b-0dwcy2ftk7] .contact-granny-submit-btn {
width: 100%;
max-width: 400px;
padding: 18px 0;
background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
color: #4F4A45;
font-weight: 700;
font-size: 1.2em;
border: 2px solid #F0C07A;
border-radius: 30px;
cursor: pointer;
margin-top: 20px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(240, 192, 122, 0.3);
text-transform: none;
letter-spacing: 0.5px;
}
[b-0dwcy2ftk7] .contact-granny-submit-btn:hover {
background: linear-gradient(135deg, #F0C07A 0%, #E6B366 100%);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(240, 192, 122, 0.4);
}
[b-0dwcy2ftk7] .contact-granny-submit-btn:focus {
outline: none;
}
[b-0dwcy2ftk7] .contact-granny-submit-btn:focus-visible {
outline: 2px solid var(--foyer-copper-focus-strong, rgba(224, 169, 109, 0.62));
outline-offset: 4px;
box-shadow: 0 0 0 5px rgba(251, 207, 168, 0.28), 0 6px 20px rgba(240, 192, 122, 0.34);
}
[b-0dwcy2ftk7] .contact-granny-submit-btn[disabled] {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
background: linear-gradient(135deg, #ECD9C5 0%, #E1C7A0 100%);
}
[b-0dwcy2ftk7] .validation-message {
color: #C44F4F;
font-size: 0.92em;
margin-top: 2px;
}
[b-0dwcy2ftk7] .validation-summary {
color: #C44F4F;
margin-bottom: 8px;
}
/* Responsive ContactGranny Form */
@media (max-width: 992px) {
[b-0dwcy2ftk7] .container-v3 {
margin-left: 0;
max-width: 95vw;
padding: 10px;
}
[b-0dwcy2ftk7] .contact-granny-illustration-section {
padding: 30px 20px 15px 20px;
}
[b-0dwcy2ftk7] .contact-granny-form-section {
padding: 25px 20px 30px 20px;
}
}
@media (max-width: 600px) {
[b-0dwcy2ftk7] .container-v3 {
padding: 0 var(--mobile-page-margin);
margin-left: auto;
margin-right: auto;
margin-top: 10px;
width: 100%;
max-width: 100%;
}
[b-0dwcy2ftk7] .contact-granny-content-wrapper {
/*border-radius: 16px;*/
margin: 20px auto;
}
[b-0dwcy2ftk7] .contact-granny-illustration-section {
padding: 20px 20px 10px 20px;
}
[b-0dwcy2ftk7] .contact-granny-form-section {
padding: 20px 20px 25px 20px;
}
[b-0dwcy2ftk7] .granny-illustration {
max-width: 400px;
/*border-radius: 12px;*/
}
[b-0dwcy2ftk7] .contact-granny-title {
font-size: 1.8em;
}
[b-0dwcy2ftk7] .contact-granny-checkbox-label {
font-size: 1.1em;
}
[b-0dwcy2ftk7] .contact-granny-subtitle {
font-size: 1.1em;
}
[b-0dwcy2ftk7] .contact-granny-input {
padding: 14px 16px;
font-size: 1em;
border-radius: 12px;
}
[b-0dwcy2ftk7] .contact-granny-submit-btn {
font-size: 1.1em;
padding: 16px 0;
border-radius: 25px;
}
}
/* Reply note and confirmation message */
[b-0dwcy2ftk7] .contact-granny-reply-note {
font-size: 0.98em;
color: #6B4F3A;
margin: 6px 0 10px 0;
text-align: left;
max-width: 560px;
}
[b-0dwcy2ftk7] .contact-granny-confirmation {
margin-top: 18px;
padding: 12px 18px;
background: rgba(255, 250, 240, 0.6);
border-radius: 12px;
color: #4F4A45;
font-size: 1em;
text-align: center;
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
/* Thank-you panel that replaces the form after submit */
[b-0dwcy2ftk7] .contact-granny-thankyou {
background: #FFFBF5;
border-radius: 12px;
padding: 36px 28px;
max-width: 720px;
margin: 18px auto 40px auto;
text-align: center;
box-shadow: 0 6px 24px rgba(0,0,0,0.06);
animation: fadeInUp-b-0dwcy2ftk7 300ms ease forwards;
}
[b-0dwcy2ftk7] .contact-granny-thankyou .thankyou-title {
font-size: 1.5rem;
margin: 0 0 10px 0;
color: #4F4A45;
}
[b-0dwcy2ftk7] .contact-granny-thankyou .thankyou-text {
color: #555;
font-size: 1rem;
line-height: 1.5;
margin: 0 0 18px 0;
}
[b-0dwcy2ftk7] .contact-granny-thankyou .thankyou-actions {
margin-top: 6px;
}
[b-0dwcy2ftk7] .contact-granny-thankyou-link {
display: inline-block;
background: linear-gradient(135deg, #E0A96D 0%, #D38C4A 100%);
color: #fff;
padding: 10px 18px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
}
@keyframes fadeInUp-b-0dwcy2ftk7 {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 600px) {
[b-0dwcy2ftk7] .contact-granny-reply-note {
text-align: left;
font-size: 0.95em;
}
[b-0dwcy2ftk7] .contact-granny-confirmation {
font-size: 0.95em;
}
}
/* Desktop: center the contact form and set fixed width */
@media (min-width: 993px) {
[b-0dwcy2ftk7] .contact-granny-content-wrapper {
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
[b-0dwcy2ftk7] .contact-granny-form-section {
max-width: 960px;
margin-left: auto;
margin-right: auto;
width: 100%;
padding: 30px 0 40px 0;
}
/* constrain form container and center it */
[b-0dwcy2ftk7] .contact-granny-form {
max-width: 560px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
[b-0dwcy2ftk7] .contact-granny-form-fields {
max-width: 560px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* constrain form groups so inputs don't expand full width */
[b-0dwcy2ftk7] .contact-granny-form-group {
max-width: 560px;
margin-left: auto;
margin-right: auto;
width: 100%;
}
/* keep individual controls from growing too large */
[b-0dwcy2ftk7] .contact-granny-input,
[b-0dwcy2ftk7] .contact-granny-textarea {
max-width: 100%;
}
/* ensure the submit button aligns with the inputs */
[b-0dwcy2ftk7] .contact-granny-submit-btn {
max-width: 100%;
}
}
/* A welcoming, compact support form. */
[b-0dwcy2ftk7] .granny-hero-section { min-height: 0; padding: 32px 24px; background: transparent; border-bottom: 1px solid var(--lov-line); }
[b-0dwcy2ftk7] .granny-hero-section::before, [b-0dwcy2ftk7] .granny-hero-section::after, [b-0dwcy2ftk7] .granny-illustration-glow { display: none; }
[b-0dwcy2ftk7] .granny-hero-content { display: grid; grid-template-columns: minmax(0,1fr) 140px; gap: 24px; align-items: center; }
[b-0dwcy2ftk7] .granny-illustration-wrapper { grid-column: 2; grid-row: 1; width: 140px; }
[b-0dwcy2ftk7] .granny-illustration { width: 140px; max-height: 160px; filter: none; }
[b-0dwcy2ftk7] .granny-welcome-text { grid-column: 1; grid-row: 1; }
[b-0dwcy2ftk7] .granny-title { font-size: clamp(2rem,3.5vw,3.2rem); color: var(--lov-ink); }
[b-0dwcy2ftk7] .granny-subtitle { color: var(--lov-muted); font-size: 1rem; max-width: 56ch; }
[b-0dwcy2ftk7] .contact-granny-input { background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 6px; box-shadow: none; }
[b-0dwcy2ftk7] .contact-granny-input::placeholder { color: var(--lov-muted); }
[b-0dwcy2ftk7] .contact-granny-submit-btn, [b-0dwcy2ftk7] .contact-granny-submit-btn:hover { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; box-shadow: none; }
@media(max-width:600px) { [b-0dwcy2ftk7] .granny-hero-content { grid-template-columns: minmax(0,1fr); } [b-0dwcy2ftk7] .granny-illustration-wrapper { display: none; } }
[b-0dwcy2ftk7] .granny-hero-content { display: block; }
[b-0dwcy2ftk7] .granny-welcome-text { text-align: left; max-width: 52rem; }
[b-0dwcy2ftk7] .granny-title { font-weight: 450; letter-spacing: -.025em; }
@media(max-width:1024px) { .app-layout[b-0dwcy2ftk7] { padding-top: 72px; } }
/* The page owns a full-width canvas; only its content reserves sidebar space. */
.app-layout[b-0dwcy2ftk7] {
display: block;
width: 100%;
min-width: 0;
min-height: 100vh;
background: var(--lov-paper);
}
.container-v3[b-0dwcy2ftk7] {
width: calc(100% - 280px);
max-width: none;
margin: 0 0 0 280px;
padding: 48px clamp(24px, 4vw, 64px) 64px;
gap: 28px;
}
.container-v3.sidebar-hidden[b-0dwcy2ftk7] { width: 100%; margin-left: 0; }
.container-v3 > .granny-hero-section[b-0dwcy2ftk7],
.container-v3 > .granny-section[b-0dwcy2ftk7] {
width: 100%;
max-width: 760px;
margin-inline: auto;
}
.granny-hero-section[b-0dwcy2ftk7] { padding: 0 0 28px; }
.granny-title[b-0dwcy2ftk7] { margin-top: 0; }
.contact-support-route-inner[b-0dwcy2ftk7] { align-items: flex-start; gap: 20px; border-top: 0; padding: 0 0 28px; }
.contact-support-route h2[b-0dwcy2ftk7] { color: var(--lov-ink); }
.contact-support-route p[b-0dwcy2ftk7], .contact-granny-reply-note[b-0dwcy2ftk7] { color: var(--lov-muted); }
.contact-support-actions[b-0dwcy2ftk7] { min-width: 0; flex: 0 1 280px; }
.contact-support-email[b-0dwcy2ftk7] { flex-wrap: wrap; justify-content: flex-start; border-radius: 6px; border-color: var(--lov-line); background: var(--lov-surface); color: var(--lov-ink); }
.granny-contact-form[b-0dwcy2ftk7] .contact-granny-form,
.granny-contact-form[b-0dwcy2ftk7] .contact-granny-form-fields,
.granny-contact-form[b-0dwcy2ftk7] .contact-granny-form-group { max-width: none; width: 100%; margin-inline: 0; }
.granny-contact-form[b-0dwcy2ftk7] .contact-granny-submit-btn { border-color: var(--lov-green); }
@media (max-width: 1024px) {
.app-layout[b-0dwcy2ftk7] { padding-top: 72px; }
.container-v3[b-0dwcy2ftk7], .container-v3.sidebar-hidden[b-0dwcy2ftk7] { width: 100%; margin: 0; padding: 32px 24px 48px; }
}
@media (max-width: 600px) {
.container-v3[b-0dwcy2ftk7], .container-v3.sidebar-hidden[b-0dwcy2ftk7] { padding-inline: 20px; }
.contact-support-route-inner[b-0dwcy2ftk7] { flex-direction: column; }
.contact-support-actions[b-0dwcy2ftk7] { flex: auto; align-items: flex-start; }
.contact-support-email[b-0dwcy2ftk7] { overflow-wrap: anywhere; }
}
.container-v3 > .granny-section[b-0dwcy2ftk7] { padding: 0; }
.contact-support-route .contact-support-email:hover[b-0dwcy2ftk7] { background: var(--lov-selected); border-color: var(--lov-line); color: var(--lov-ink); }
.contact-support-route .contact-support-email span[b-0dwcy2ftk7] { color: var(--lov-muted); }
.contact-support-route .contact-support-email:focus-visible[b-0dwcy2ftk7] { outline: 3px solid var(--lov-green); outline-offset: 3px; }
/* /Components/Pages/ConversationRoom.razor.rz.scp.css */
/* ============================================================
ConversationRoom.razor.css — Phase 5 Visual Polish
Sacred room shell with parchment atmosphere and quiet mobile chrome.
============================================================ */
.conversation-room[b-92lp8p9wiz] {
position: relative;
display: flex;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
justify-content: flex-start !important;
align-items: stretch !important;
background:
radial-gradient(circle at 50% 0%, rgba(255, 243, 221, 0.98) 0%, rgba(255, 243, 221, 0.58) 22%, rgba(253, 248, 240, 0) 52%),
radial-gradient(circle at 12% 16%, rgba(245, 214, 180, 0.18) 0%, rgba(245, 214, 180, 0) 26%),
radial-gradient(circle at 88% 18%, rgba(241, 217, 189, 0.18) 0%, rgba(241, 217, 189, 0) 28%),
linear-gradient(180deg, #FFF9F1 0%, #FDF8F0 26%, #FAF3E5 64%, #F7EEE1 100%);
}
.conversation-room[b-92lp8p9wiz]::before,
.conversation-room[b-92lp8p9wiz]::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.conversation-room[b-92lp8p9wiz]::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.4), transparent 18%),
radial-gradient(circle at 50% 12%, rgba(239, 201, 151, 0.2) 0%, rgba(239, 201, 151, 0) 32%);
opacity: 0.92;
}
.conversation-room[b-92lp8p9wiz]::after {
background: linear-gradient(180deg, rgba(132, 100, 69, 0.02), rgba(132, 100, 69, 0.06));
mix-blend-mode: multiply;
}
.conversation-room.sidebar-hidden[b-92lp8p9wiz] .conversation-sidebar {
transform: translateX(calc(-100% - 28px));
}
.conversation-continuity-notice[b-92lp8p9wiz] {
margin: 20px auto;
padding: 16px 20px;
max-width: 600px;
background: rgba(253, 248, 240, 0.9);
border: 1px solid #E8DCC8;
border-radius: 8px;
text-align: center;
display: grid;
gap: 0.55rem;
}
.continuity-notice-text[b-92lp8p9wiz] {
margin: 0;
font-size: 15px;
line-height: 1.6;
color: #7B5A53;
font-family: var(--font-sans);
}
.continuity-ai-disclosure[b-92lp8p9wiz] {
font-weight: 500;
color: #654942;
}
.conversation-room-empty[b-92lp8p9wiz] {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
min-height: 100dvh;
padding: 2rem;
background:
radial-gradient(circle at 50% 0%, rgba(255, 242, 220, 0.88) 0%, rgba(255, 242, 220, 0) 28%),
linear-gradient(180deg, #FFF9F1 0%, #FDF8F0 48%, #FAF3E5 100%);
font-family: var(--font-serif);
font-style: italic;
color: #8E7864;
font-size: 1.12rem;
text-align: center;
}
.conversation-main[b-92lp8p9wiz] {
position: relative;
flex: 1;
min-height: 0;
margin-left: 280px;
display: flex;
justify-content: center;
padding: 0 clamp(1.4rem, 3.2vw, 2.6rem) 0;
overflow-x: hidden;
overflow-y: hidden;
-ms-overflow-style: none;
transition: margin-left 0.34s ease;
}
.conversation-main[b-92lp8p9wiz]::-webkit-scrollbar {
width: 0;
height: 0;
}
.conversation-main[b-92lp8p9wiz]::before {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: min(100%, 78rem);
height: clamp(16rem, 34vw, 28rem);
border-radius: 50%;
background: radial-gradient(circle, rgba(250, 226, 192, 0.46) 0%, rgba(250, 226, 192, 0.12) 36%, rgba(250, 226, 192, 0) 70%);
filter: blur(16px);
pointer-events: none;
opacity: 0.95;
}
.conversation-room.sidebar-hidden .conversation-main[b-92lp8p9wiz] {
margin-left: 0;
}
.presence-line[b-92lp8p9wiz] {
width: min(100%, 38rem);
margin: 0.15rem auto 2rem;
padding: 0.75rem 1.2rem;
font-family: var(--font-serif);
font-size: 0.92rem;
font-style: italic;
font-weight: 300;
line-height: 1.65;
letter-spacing: 0.03em;
text-align: center;
color: #8E765D;
border-top: 1px solid rgba(188, 152, 109, 0.18);
border-bottom: 1px solid rgba(188, 152, 109, 0.12);
background: linear-gradient(180deg, rgba(255, 250, 244, 0.38), rgba(255, 250, 244, 0.08));
}
.conversation-surface[b-92lp8p9wiz] {
position: relative;
width: 100%;
max-width: 860px;
height: 100%;
min-height: 0;
display: grid;
grid-template-rows: minmax(0, 1fr) auto;
}
.conversation-thread-shell[b-92lp8p9wiz] {
position: relative;
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
-ms-overflow-style: none;
padding-top: clamp(2.5rem, 4vw, 4rem);
padding-bottom: clamp(4.75rem, 8vw, 6.5rem);
}
.conversation-thread-shell[b-92lp8p9wiz]::-webkit-scrollbar {
width: 0;
height: 0;
}
.conversation-latest-anchor[b-92lp8p9wiz] {
width: 100%;
height: clamp(3.8rem, 7vw, 5.2rem);
margin-top: 0;
pointer-events: none;
flex: 0 0 auto;
}
.conversation-input-wrap[b-92lp8p9wiz] {
position: relative;
z-index: 10;
width: 100%;
isolation: isolate;
padding-bottom: 24px;
pointer-events: none;
}
[b-92lp8p9wiz] .conversation-input-shell {
pointer-events: auto;
}
.conversation-room.writing-mode .conversation-thread-shell[b-92lp8p9wiz] {
opacity: 0.96;
}
.conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
position: absolute;
bottom: calc(100% + 18px);
left: 50%;
transform: translateX(-50%);
width: 46px;
height: 46px;
border-radius: 50%;
border: 1px solid rgba(176, 133, 85, 0.28);
background: linear-gradient(180deg, rgba(255, 252, 247, 0.98), rgba(245, 235, 221, 0.96));
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
box-shadow:
0 0 0 6px rgba(253, 248, 240, 0.86),
0 14px 30px rgba(96, 70, 45, 0.16);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
z-index: 12;
color: #6A4D31;
animation: conversationScrollButtonRise-b-92lp8p9wiz 0.2s ease-out;
pointer-events: auto;
}
.conversation-scroll-to-latest-btn[b-92lp8p9wiz]::after {
content: "";
position: absolute;
left: 50%;
bottom: -9px;
width: 28px;
height: 16px;
transform: translateX(-50%);
border-radius: 999px;
background: radial-gradient(circle, rgba(212, 172, 122, 0.32) 0%, rgba(212, 172, 122, 0) 78%);
pointer-events: none;
z-index: -1;
}
@keyframes conversationScrollButtonRise-b-92lp8p9wiz {
from {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.conversation-scroll-to-latest-btn:hover[b-92lp8p9wiz] {
background: linear-gradient(180deg, rgba(255, 253, 249, 1), rgba(247, 238, 225, 0.98));
box-shadow:
0 0 0 6px rgba(253, 248, 240, 0.92),
0 18px 34px rgba(96, 70, 45, 0.2);
transform: translateX(-50%) scale(1.05);
}
.conversation-scroll-to-latest-btn:active[b-92lp8p9wiz] {
transform: translateX(-50%) scale(0.95);
}
.conversation-scroll-to-latest-btn:focus-visible[b-92lp8p9wiz] {
outline: 2px solid rgba(171, 123, 71, 0.4);
outline-offset: 3px;
}
.conversation-scroll-to-latest-btn svg[b-92lp8p9wiz] {
width: 22px;
height: 22px;
}
[b-92lp8p9wiz] .toggle-sidebar {
position: fixed;
top: 16px;
left: 16px;
z-index: 110;
display: inline-grid;
}
.conversation-sidebar-overlay[b-92lp8p9wiz] {
display: none;
}
.conversation-mobile-header[b-92lp8p9wiz] {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
pointer-events: none;
align-items: center;
justify-content: flex-end;
padding: calc(0.85rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0 calc(1rem + env(safe-area-inset-left, 0px));
background: transparent;
transition: background 0.24s ease, backdrop-filter 0.24s ease;
}
.conversation-mobile-header.topbar-scrolled[b-92lp8p9wiz],
.conversation-mobile-header.sidebar-open[b-92lp8p9wiz] {
background:
linear-gradient(180deg, rgba(253, 248, 240, 0.58) 0%, rgba(253, 248, 240, 0.32) 70%, rgba(253, 248, 240, 0) 100%);
-webkit-backdrop-filter: blur(8px) saturate(1.03);
backdrop-filter: blur(8px) saturate(1.03);
}
.mobile-menu-btn[b-92lp8p9wiz] {
pointer-events: all;
width: 42px;
height: 42px;
border: 1px solid rgba(188, 152, 109, 0.18);
border-radius: 50%;
background: rgba(253, 248, 240, 0.84);
box-shadow: 0 10px 22px rgba(76, 56, 37, 0.1);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
font-size: 1.24rem;
color: #5A4A3A;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.mobile-menu-btn:hover[b-92lp8p9wiz] {
transform: translateY(-1px);
background: rgba(255, 250, 245, 0.92);
box-shadow: 0 14px 28px rgba(76, 56, 37, 0.14);
}
@keyframes menuFadeIn-b-92lp8p9wiz {
from {
opacity: 0;
transform: translateY(-4px) scale(0.98);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
:global(body.night-mode) .conversation-room[b-92lp8p9wiz] {
background:
radial-gradient(circle at 50% 0%, rgba(125, 92, 54, 0.26) 0%, rgba(125, 92, 54, 0.08) 20%, rgba(27, 23, 21, 0) 48%),
radial-gradient(circle at 12% 18%, rgba(136, 88, 53, 0.14) 0%, rgba(136, 88, 53, 0) 24%),
radial-gradient(circle at 88% 18%, rgba(125, 89, 58, 0.14) 0%, rgba(125, 89, 58, 0) 26%),
linear-gradient(180deg, #231E1B 0%, #1E1916 44%, #181412 100%);
}
:global(body.night-mode) .conversation-room[b-92lp8p9wiz]::before {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 16%),
radial-gradient(circle at 50% 12%, rgba(194, 141, 75, 0.18) 0%, rgba(194, 141, 75, 0) 30%);
}
:global(body.night-mode) .conversation-main[b-92lp8p9wiz]::before {
background: radial-gradient(circle, rgba(120, 84, 44, 0.28) 0%, rgba(120, 84, 44, 0.08) 34%, rgba(120, 84, 44, 0) 72%);
}
:global(body.night-mode) .presence-line[b-92lp8p9wiz] {
color: #C9B7A2;
border-top-color: rgba(197, 151, 95, 0.18);
border-bottom-color: rgba(197, 151, 95, 0.1);
background: linear-gradient(180deg, rgba(67, 52, 39, 0.3), rgba(67, 52, 39, 0.08));
}
:global(body.night-mode) .mobile-menu-btn[b-92lp8p9wiz] {
border-color: rgba(191, 148, 91, 0.22);
background: rgba(42, 34, 29, 0.86);
color: #E3D4C2;
box-shadow: 0 12px 24px rgba(4, 3, 2, 0.28);
}
:global(body.night-mode) .conversation-mobile-header.topbar-scrolled[b-92lp8p9wiz],
:global(body.night-mode) .conversation-mobile-header.sidebar-open[b-92lp8p9wiz] {
background:
linear-gradient(180deg, rgba(43, 34, 28, 0.56) 0%, rgba(43, 34, 28, 0.32) 70%, rgba(43, 34, 28, 0) 100%);
}
:global(body.night-mode) .mobile-menu-btn:hover[b-92lp8p9wiz] {
background: rgba(54, 44, 37, 0.92);
color: #F4E5D3;
}
:global(body.night-mode) .conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
border-color: rgba(191, 148, 91, 0.22);
background: linear-gradient(180deg, rgba(48, 39, 33, 0.96), rgba(37, 31, 27, 0.94));
color: #E3D4C2;
box-shadow:
0 0 0 6px rgba(30, 25, 22, 0.84),
0 16px 30px rgba(4, 3, 2, 0.34);
}
:global(body.night-mode) .conversation-scroll-to-latest-btn:hover[b-92lp8p9wiz] {
background: linear-gradient(180deg, rgba(57, 46, 39, 0.98), rgba(43, 36, 31, 0.96));
}
:global(body.night-mode) .conversation-scroll-to-latest-btn[b-92lp8p9wiz]::after {
background: radial-gradient(circle, rgba(170, 117, 52, 0.3) 0%, rgba(170, 117, 52, 0) 78%);
}
@media (max-width: 1024px) {
.conversation-main[b-92lp8p9wiz] {
margin-left: 0;
padding-inline: clamp(1.2rem, 3.5vw, 2rem);
}
[b-92lp8p9wiz] .toggle-sidebar {
display: none;
}
}
@media (max-width: 1024px) {
.conversation-thread-shell[b-92lp8p9wiz] {
padding-top: clamp(2rem, 3.5vw, 3rem);
}
}
@media (max-width: 768px) {
.conversation-sidebar-overlay[b-92lp8p9wiz] {
display: block;
position: fixed;
inset: 0;
z-index: 38;
background: rgba(28, 22, 16, 0.42);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.conversation-mobile-header[b-92lp8p9wiz] {
display: flex;
}
.conversation-room.mobile-sidebar-open[b-92lp8p9wiz] {
z-index: 39;
}
.conversation-main[b-92lp8p9wiz] {
padding-top: 0;
padding-bottom: 0;
}
.conversation-thread-shell[b-92lp8p9wiz] {
padding-top: 4.35rem;
}
.presence-line[b-92lp8p9wiz] {
margin-bottom: 1.5rem;
padding-inline: 1rem;
}
.conversation-surface[b-92lp8p9wiz],
.conversation-thread-shell[b-92lp8p9wiz],
.conversation-input-wrap[b-92lp8p9wiz] {
width: 100%;
max-width: 100%;
}
.conversation-room.writing-mode .conversation-thread-shell[b-92lp8p9wiz] {
padding-bottom: clamp(3rem, 7vw, 4.5rem);
}
.conversation-room.writing-mode .conversation-input-wrap[b-92lp8p9wiz] {
padding-bottom: max(12px, calc(env(safe-area-inset-bottom, 0px) + 12px));
}
.conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
width: 40px;
height: 40px;
bottom: calc(100% + 13px);
box-shadow:
0 0 0 5px rgba(253, 248, 240, 0.88),
0 12px 24px rgba(96, 70, 45, 0.14);
}
.conversation-scroll-to-latest-btn svg[b-92lp8p9wiz] {
width: 19px;
height: 19px;
}
[b-92lp8p9wiz] .conversation-sidebar {
top: 0;
right: 0;
width: 100vw;
max-width: none;
height: 100vh;
height: 100dvh;
transform: translateX(-100%);
transition: transform 0.36s cubic-bezier(0.22, 0.61, 0.36, 1);
border-radius: 0;
border-right: none;
box-shadow: 0 18px 48px rgba(94, 69, 43, 0.12);
z-index: 70;
}
@supports (height: 100svh) {
[b-92lp8p9wiz] .conversation-sidebar {
height: 100svh;
}
}
.conversation-room.mobile-sidebar-open[b-92lp8p9wiz] .conversation-sidebar {
transform: translateX(0);
}
}
:global(body.night-mode) .conversation-sidebar-overlay[b-92lp8p9wiz] {
background: rgba(7, 5, 4, 0.26);
}
@media (max-width: 768px) {
:global(body.night-mode) .conversation-scroll-to-latest-btn[b-92lp8p9wiz] {
box-shadow:
0 0 0 5px rgba(30, 25, 22, 0.88),
0 14px 26px rgba(4, 3, 2, 0.32);
}
}
@media (max-width: 480px) {
.conversation-main[b-92lp8p9wiz] {
padding-inline: 1rem;
}
.conversation-thread-shell[b-92lp8p9wiz] {
padding-top: 4.2rem;
}
.presence-line[b-92lp8p9wiz] {
font-size: 0.88rem;
margin-bottom: 1.1rem;
}
.conversation-input-wrap[b-92lp8p9wiz] {
padding-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px));
}
.conversation-continuity-notice[b-92lp8p9wiz] {
margin: 16px 1rem;
padding: 14px 16px;
}
.continuity-notice-text[b-92lp8p9wiz] {
font-size: 14px;
}
}
@media (prefers-reduced-motion: no-preference) {
.conversation-thread-shell[b-92lp8p9wiz],
.conversation-input-wrap[b-92lp8p9wiz] {
transition: opacity 180ms ease, padding-bottom 180ms ease;
}
}
/* LovOne editorial application identity. */
.conversation-room[b-92lp8p9wiz], .conversation-room-empty[b-92lp8p9wiz] { background: var(--lov-paper); }
.conversation-room[b-92lp8p9wiz]::before, .conversation-room[b-92lp8p9wiz]::after { display: none; }
.conversation-continuity-notice[b-92lp8p9wiz] { background: var(--lov-surface); border-color: var(--lov-line); }
.continuity-notice-text[b-92lp8p9wiz], .continuity-ai-disclosure[b-92lp8p9wiz] { color: var(--lov-muted); }
.conversation-main[b-92lp8p9wiz]::before { display: none; }
/* /Components/Pages/EmailVerificationResult.razor.rz.scp.css */
.verification-page[b-4veto4b1ua] {
--verification-bg: #f7ecdf;
--verification-bg-soft: #fff8f0;
--verification-ink: #46352e;
--verification-muted: #6a5a52;
--verification-line: rgba(133, 103, 82, 0.18);
--verification-gold: #b88b5f;
--verification-gold-deep: #8f6847;
--verification-cream: rgba(255, 250, 243, 0.94);
--verification-shadow: 0 28px 90px rgba(96, 67, 47, 0.14);
width: 100%;
min-height: 100vh;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.75), transparent 34%),
radial-gradient(circle at bottom right, rgba(252, 223, 192, 0.55), transparent 30%),
linear-gradient(180deg, var(--verification-bg-soft) 0%, var(--verification-bg) 100%);
color: var(--verification-ink);
}
.verification-page__glow[b-4veto4b1ua] {
position: absolute;
width: 32rem;
height: 32rem;
border-radius: 50%;
filter: blur(90px);
opacity: 0.35;
pointer-events: none;
}
.verification-page__glow--left[b-4veto4b1ua] {
top: -12rem;
left: -10rem;
background: rgba(255, 236, 209, 0.95);
}
.verification-page__glow--right[b-4veto4b1ua] {
right: -10rem;
bottom: -14rem;
background: rgba(226, 196, 170, 0.82);
}
.verification-page__brand[b-4veto4b1ua] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: 100%;
max-width: 120rem;
margin: 0 auto;
padding: 2rem 3rem 0;
}
.verification-page__brand-link[b-4veto4b1ua] {
display: block;
text-decoration: none;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.verification-page__brand-link:hover[b-4veto4b1ua] {
opacity: 1;
}
.verification-page__brand-logo[b-4veto4b1ua] {
height: 36px;
width: auto;
display: block;
}
.guest-menu-wrapper[b-4veto4b1ua] {
position: relative;
}
.guest-menu-btn[b-4veto4b1ua] {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(164, 123, 80, 0.2);
background: rgba(253, 248, 240, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}
.guest-menu-btn:hover[b-4veto4b1ua] {
background: rgba(253, 248, 240, 0.95);
border-color: rgba(164, 123, 80, 0.4);
box-shadow: 0 3px 12px rgba(139, 115, 85, 0.14);
}
.guest-menu-dots[b-4veto4b1ua] {
font-size: 1.4rem;
color: #6B5B4E;
letter-spacing: 2px;
line-height: 1;
}
.guest-menu-backdrop[b-4veto4b1ua] {
position: fixed;
inset: 0;
z-index: 60;
}
.guest-menu-dropdown[b-4veto4b1ua] {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: rgba(253, 248, 240, 0.97);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(232, 213, 200, 0.5);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14), 0 2px 8px rgba(139, 115, 85, 0.06);
padding: 0.5rem 0;
z-index: 70;
animation: guestMenuFadeIn-b-4veto4b1ua 0.2s ease-out;
}
@keyframes guestMenuFadeIn-b-4veto4b1ua {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.guest-menu-item[b-4veto4b1ua] {
display: block;
padding: 0.7rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.92rem;
color: #5C4033;
text-decoration: none;
transition: background 0.15s ease;
}
.guest-menu-item:hover[b-4veto4b1ua] {
background: rgba(196, 154, 108, 0.08);
}
body.night-mode .guest-menu-btn[b-4veto4b1ua] {
background: rgba(45, 59, 68, 0.85);
border-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .guest-menu-btn:hover[b-4veto4b1ua] {
background: rgba(45, 59, 68, 0.95);
border-color: rgba(196, 154, 108, 0.35);
}
body.night-mode .guest-menu-dots[b-4veto4b1ua] {
color: #CFD8DC;
}
body.night-mode .guest-menu-dropdown[b-4veto4b1ua] {
background: rgba(30, 46, 54, 0.97);
border-color: rgba(196, 154, 108, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.night-mode .guest-menu-item[b-4veto4b1ua] {
color: #E8F4F8;
}
body.night-mode .guest-menu-item:hover[b-4veto4b1ua] {
background: rgba(196, 154, 108, 0.1);
}
.verification-page__main[b-4veto4b1ua] {
position: relative;
z-index: 1;
min-height: calc(100vh - 6rem);
display: flex;
align-items: center;
justify-content: center;
padding: 2rem 1.5rem 4rem;
}
.verification-card[b-4veto4b1ua] {
position: relative;
width: min(100%, 46rem);
padding: 3.5rem 3rem 2.75rem;
border-radius: 2rem;
border: 1px solid var(--verification-line);
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 248, 240, 0.88)),
var(--verification-cream);
box-shadow: var(--verification-shadow);
text-align: center;
backdrop-filter: blur(10px);
}
.verification-card__ornament[b-4veto4b1ua] {
position: absolute;
inset: 1.1rem;
border: 1px solid rgba(184, 139, 95, 0.12);
border-radius: 1.45rem;
pointer-events: none;
}
.verification-card__eyebrow[b-4veto4b1ua] {
margin: 0 0 1rem;
font-size: 0.82rem;
letter-spacing: 0.24em;
text-transform: uppercase;
color: var(--verification-gold-deep);
}
.verification-card__icon[b-4veto4b1ua] {
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 1.25rem;
border-radius: 999px;
display: grid;
place-items: center;
font-size: 1.7rem;
color: var(--verification-gold-deep);
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.95), rgba(247, 225, 198, 0.9));
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 14px 34px rgba(184, 139, 95, 0.2);
}
.verification-card__title[b-4veto4b1ua] {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.45rem);
line-height: 1.08;
letter-spacing: -0.03em;
}
.verification-card__lead[b-4veto4b1ua] {
margin: 1rem auto 0;
max-width: 33rem;
font-size: 1.1rem;
line-height: 1.7;
color: var(--verification-muted);
}
.verification-card__body[b-4veto4b1ua] {
margin: 0.9rem auto 0;
max-width: 31rem;
font-size: 0.98rem;
line-height: 1.75;
color: rgba(70, 53, 46, 0.82);
}
.verification-card__actions[b-4veto4b1ua] {
margin-top: 2rem;
display: flex;
justify-content: center;
gap: 0.9rem;
flex-wrap: wrap;
}
.verification-card__action[b-4veto4b1ua] {
min-width: 13rem;
padding: 0.95rem 1.5rem;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition:
transform 0.2s ease,
box-shadow 0.2s ease,
border-color 0.2s ease,
background-color 0.2s ease;
}
.verification-card__action:hover[b-4veto4b1ua] {
transform: translateY(-1px);
}
.verification-card__action--primary[b-4veto4b1ua] {
color: #fffaf6;
background: linear-gradient(135deg, var(--verification-gold) 0%, var(--verification-gold-deep) 100%);
box-shadow: 0 12px 28px rgba(136, 102, 73, 0.22);
}
.verification-card__action--secondary[b-4veto4b1ua] {
color: var(--verification-ink);
background: rgba(255, 251, 246, 0.82);
border: 1px solid rgba(143, 104, 71, 0.18);
}
.verification-card__action--secondary:hover[b-4veto4b1ua] {
border-color: rgba(143, 104, 71, 0.32);
background: rgba(255, 255, 255, 0.92);
}
.verification-card__help[b-4veto4b1ua] {
margin: 1.6rem 0 0;
font-size: 0.92rem;
color: rgba(70, 53, 46, 0.68);
}
.verification-card__help-link[b-4veto4b1ua] {
color: var(--verification-gold-deep);
text-decoration: none;
border-bottom: 1px solid rgba(143, 104, 71, 0.24);
}
.verification-card__help-link:hover[b-4veto4b1ua] {
border-bottom-color: rgba(143, 104, 71, 0.48);
}
@media (max-width: 768px) {
.verification-page__glow[b-4veto4b1ua] {
display: none;
}
.verification-page__brand[b-4veto4b1ua] {
padding: 1rem 1.5rem;
}
.verification-page__main[b-4veto4b1ua] {
padding: 1.25rem 1rem 2.5rem;
min-height: calc(100vh - 4.5rem);
}
.verification-card[b-4veto4b1ua] {
padding: 2.6rem 1.35rem 2rem;
border-radius: 1.55rem;
}
.verification-card__actions[b-4veto4b1ua] {
flex-direction: column;
}
.verification-card__action[b-4veto4b1ua] {
width: 100%;
}
}
/* Shared editorial form treatment; authentication behavior is unchanged. */
.verification-page[b-4veto4b1ua] { --verification-bg: var(--lov-paper); --verification-bg-soft: var(--lov-paper); --verification-ink: var(--lov-ink); --verification-muted: var(--lov-muted); --verification-line: var(--lov-line); --verification-cream: var(--lov-surface); background: var(--lov-paper); }
.verification-page__glow[b-4veto4b1ua] { display: none; }
/* Keep nested content legible on the selected application surface. */
.verification-card[b-4veto4b1ua] {
background: var(--lov-surface);
border-radius: 8px;
box-shadow: none;
}
.verification-card__ornament[b-4veto4b1ua] { display: none; }
.verification-card__body[b-4veto4b1ua], .verification-card__help[b-4veto4b1ua] { color: var(--lov-muted); }
.verification-card__action--secondary[b-4veto4b1ua], .verification-card__action--secondary:hover[b-4veto4b1ua] { background: var(--lov-paper); color: var(--lov-ink); border-color: var(--lov-line); border-radius: 6px; }
.verification-card__action--primary[b-4veto4b1ua],
.verification-card__action--primary:hover[b-4veto4b1ua] {
background: var(--lov-green);
color: var(--lov-on-green);
border: 1px solid var(--lov-green);
border-radius: 6px;
box-shadow: none;
}
.verification-card__action--primary:focus-visible[b-4veto4b1ua] {
outline: 2px solid var(--lov-focus);
outline-offset: 3px;
}
/* /Components/Pages/Error.razor.rz.scp.css */
/* Generic recovery page. Keep this visually aligned with GrannysError. */
.error-layout[b-3sf5sc8kx5],
[b-3sf5sc8kx5] .app-layout {
--error-bg: var(--lov-paper);
--error-surface: var(--lov-surface);
--error-border: var(--lov-line);
--error-ink: var(--lov-ink);
--error-muted: var(--lov-muted);
display: block;
min-height: 100vh;
width: 100%;
background: var(--error-bg);
color: var(--error-ink);
overflow-x: hidden;
}
[b-3sf5sc8kx5] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
}
[b-3sf5sc8kx5] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid var(--lov-line);
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-3sf5sc8kx5] .sidebar.hidden {
transform: translateX(-100%);
}
[b-3sf5sc8kx5] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
[b-3sf5sc8kx5] .app-logo-link {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
margin-top: -1.2rem;
}
[b-3sf5sc8kx5] .sidebar-logo img {
display: inline-block;
width: auto;
height: 50px;
max-width: 180px;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
vertical-align: middle;
}
[b-3sf5sc8kx5] .sidebar-menu {
width: 100%;
}
[b-3sf5sc8kx5] .sidebar-bottom,
[b-3sf5sc8kx5] .sidebar-guest-actions {
margin-top: auto;
padding-top: 1rem;
width: 100%;
}
[b-3sf5sc8kx5] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
.sidebar-overlay[b-3sf5sc8kx5] {
position: fixed;
inset: 0;
z-index: 9;
background: var(--lov-ink);
opacity: 0.3;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-3sf5sc8kx5] {
display: none;
}
[b-3sf5sc8kx5] .container-v3.granny-error-page {
flex: 1;
min-width: 0;
width: min(1180px, calc(100% - 328px));
max-width: 1180px;
margin: 0 auto;
padding: 48px 48px 56px;
display: flex;
flex-direction: column;
gap: 48px;
box-sizing: border-box;
position: relative;
left: 140px;
transition: left 0.3s ease, width 0.3s ease;
}
[b-3sf5sc8kx5] .container-v3.granny-error-page.sidebar-hidden {
width: min(1180px, calc(100% - 48px));
left: 0;
}
.error-hero[b-3sf5sc8kx5] {
display: block;
min-height: 0;
padding: 12px 0 28px;
background: transparent;
border: 0;
box-shadow: none;
}
.error-hero-visual[b-3sf5sc8kx5],
.error-granny[b-3sf5sc8kx5] {
display: none;
}
.error-hero-copy[b-3sf5sc8kx5] {
max-width: 46rem;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 0;
}
.error-kicker[b-3sf5sc8kx5],
.support-kicker[b-3sf5sc8kx5] {
margin-bottom: 12px;
color: var(--lov-green);
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.error-hero h1[b-3sf5sc8kx5],
.recovery-heading h2[b-3sf5sc8kx5],
.support-copy h2[b-3sf5sc8kx5] {
margin: 0;
color: var(--error-ink);
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: 0;
}
.error-hero h1[b-3sf5sc8kx5] {
max-width: 680px;
font-size: clamp(2.4rem, 4vw, 3.2rem);
line-height: 1.08;
}
.error-hero p[b-3sf5sc8kx5] {
max-width: 570px;
margin: 18px 0 0;
color: var(--error-muted);
font-size: 1.08rem;
line-height: 1.6;
}
.error-hero-actions[b-3sf5sc8kx5] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.error-button[b-3sf5sc8kx5] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
min-height: 52px;
max-width: 100%;
padding: 12px 26px;
border-radius: 6px;
border: 1px solid var(--lov-line);
color: var(--lov-ink);
background: var(--lov-paper);
font-family: var(--font-sans);
font-size: 0.98rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
transition: background 0.2s ease, border-color 0.2s ease;
}
.error-button:hover[b-3sf5sc8kx5],
.error-button:focus-visible[b-3sf5sc8kx5] {
transform: none;
}
.error-button-primary[b-3sf5sc8kx5] {
background: var(--lov-green);
border-color: var(--lov-green);
color: var(--lov-on-green);
box-shadow: none;
}
.error-button-primary:hover[b-3sf5sc8kx5],
.error-button-primary:focus-visible[b-3sf5sc8kx5] {
background: var(--lov-green);
box-shadow: none;
}
.error-button-secondary[b-3sf5sc8kx5] {
background: var(--lov-paper);
border-color: var(--lov-line);
}
.error-button-secondary:hover[b-3sf5sc8kx5],
.error-button-secondary:focus-visible[b-3sf5sc8kx5] {
background: var(--lov-paper);
border-color: var(--lov-green);
box-shadow: none;
}
.error-button:focus-visible[b-3sf5sc8kx5],
.recovery-card:focus-visible[b-3sf5sc8kx5],
.technical-details summary:focus-visible[b-3sf5sc8kx5] {
outline: 2px solid var(--lov-focus);
outline-offset: 3px;
}
.recovery-section[b-3sf5sc8kx5] {
display: grid;
gap: 26px;
}
.recovery-heading[b-3sf5sc8kx5] {
max-width: 720px;
padding: 0 4px;
}
.recovery-heading h2[b-3sf5sc8kx5],
.support-copy h2[b-3sf5sc8kx5] {
font-size: 2.55rem;
line-height: 1.08;
}
.recovery-heading p[b-3sf5sc8kx5],
.support-copy p[b-3sf5sc8kx5] {
margin: 10px 0 0;
color: var(--error-muted);
font-size: 1rem;
line-height: 1.6;
}
.recovery-grid[b-3sf5sc8kx5] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.recovery-card[b-3sf5sc8kx5] {
min-height: 0;
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
align-items: start;
padding: 20px;
border: 1px solid var(--error-border);
border-radius: 6px;
background: var(--error-surface);
color: var(--error-ink);
text-decoration: none;
box-shadow: none;
transition: border-color 0.2s ease, background 0.2s ease;
}
.recovery-card:hover[b-3sf5sc8kx5],
.recovery-card:focus-visible[b-3sf5sc8kx5] {
transform: none;
border-color: var(--lov-green);
background: var(--lov-paper);
box-shadow: none;
}
.recovery-card-featured[b-3sf5sc8kx5] {
background: var(--lov-surface);
}
.recovery-icon[b-3sf5sc8kx5] {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 6px;
background: var(--lov-paper);
color: var(--lov-green);
box-shadow: none;
}
.recovery-icon svg[b-3sf5sc8kx5] {
width: 25px;
height: 25px;
display: block;
vector-effect: non-scaling-stroke;
}
.recovery-copy[b-3sf5sc8kx5] {
display: grid;
gap: 9px;
min-width: 0;
}
.recovery-card strong[b-3sf5sc8kx5] {
color: var(--error-ink);
font-family: var(--font-serif);
font-size: 1.2rem;
line-height: 1.18;
}
.recovery-copy > span[b-3sf5sc8kx5] {
color: var(--error-muted);
font-size: 0.96rem;
line-height: 1.5;
}
.support-panel[b-3sf5sc8kx5] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 26px;
padding: 34px 38px;
border: 1px solid var(--error-border);
border-radius: 6px;
background: var(--error-surface);
box-shadow: none;
}
.support-action[b-3sf5sc8kx5] {
white-space: nowrap;
}
.technical-details[b-3sf5sc8kx5] {
grid-column: 1 / -1;
margin-top: 2px;
color: var(--error-muted);
}
.technical-details summary[b-3sf5sc8kx5] {
width: fit-content;
cursor: pointer;
color: var(--lov-green);
font-weight: 800;
}
.technical-details p[b-3sf5sc8kx5] {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
margin: 14px 0 0;
font-size: 0.92rem;
}
.technical-details code[b-3sf5sc8kx5] {
min-width: 0;
overflow-wrap: anywhere;
border-radius: 6px;
border: 1px solid var(--lov-line);
background: var(--lov-paper);
padding: 0.3rem 0.52rem;
color: var(--lov-ink);
font-family: Consolas, "Fira Code", monospace;
box-shadow: none;
}
[b-3sf5sc8kx5] .main-footer {
width: min(1180px, calc(100% - 328px));
margin: 76px auto 0;
padding: 60px 48px 30px;
box-sizing: border-box;
position: relative;
left: 140px;
}
[b-3sf5sc8kx5] .main-footer.sidebar-hidden {
width: min(1180px, calc(100% - 48px));
left: 0;
}
[b-3sf5sc8kx5] .footer-container {
max-width: none;
margin: 0;
padding: 0;
}
@media (max-width: 1024px) {
.error-layout[b-3sf5sc8kx5],
[b-3sf5sc8kx5] .app-layout {
padding-top: var(--mobile-topbar-height, 60px);
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
}
[b-3sf5sc8kx5] .toggle-sidebar {
display: none !important;
}
[b-3sf5sc8kx5] .sidebar {
top: var(--mobile-topbar-height, 60px);
height: calc(100vh - var(--mobile-topbar-height, 60px));
transform: translateX(-100%);
}
[b-3sf5sc8kx5] .sidebar.visible {
transform: translateX(0);
}
[b-3sf5sc8kx5] .sidebar.hidden {
transform: translateX(-100%);
}
[b-3sf5sc8kx5] .container-v3.granny-error-page,
[b-3sf5sc8kx5] .container-v3.granny-error-page.sidebar-hidden {
width: 100%;
max-width: 100%;
left: 0;
margin: 0;
padding: 46px 22px 42px;
}
.error-hero[b-3sf5sc8kx5] {
min-height: 0;
text-align: left;
}
.error-hero-copy[b-3sf5sc8kx5] {
align-items: flex-start;
max-width: 46rem;
}
.error-hero h1[b-3sf5sc8kx5] {
font-size: 3rem;
}
.error-hero-actions[b-3sf5sc8kx5] {
justify-content: flex-start;
}
.support-panel[b-3sf5sc8kx5] {
grid-template-columns: 1fr;
text-align: center;
}
.support-action[b-3sf5sc8kx5],
.technical-details summary[b-3sf5sc8kx5] {
justify-self: center;
}
[b-3sf5sc8kx5] .main-footer,
[b-3sf5sc8kx5] .main-footer.sidebar-hidden {
width: 100%;
left: 0;
margin-top: 56px;
padding-left: 22px;
padding-right: 22px;
}
}
@media (max-width: 640px) {
[b-3sf5sc8kx5] .container-v3.granny-error-page,
[b-3sf5sc8kx5] .container-v3.granny-error-page.sidebar-hidden {
gap: 34px;
padding: 20px 14px 38px;
}
.error-hero[b-3sf5sc8kx5] {
padding-top: 8px;
}
.error-hero h1[b-3sf5sc8kx5] {
font-size: 2.1rem;
line-height: 1.06;
}
.error-hero p[b-3sf5sc8kx5] {
font-size: 1rem;
line-height: 1.58;
}
.error-hero-actions[b-3sf5sc8kx5] {
width: 100%;
flex-direction: column;
gap: 12px;
}
.error-button[b-3sf5sc8kx5] {
width: 100%;
min-width: 0;
min-height: 44px;
white-space: normal;
}
.recovery-heading h2[b-3sf5sc8kx5],
.support-copy h2[b-3sf5sc8kx5] {
font-size: 2.02rem;
}
.recovery-grid[b-3sf5sc8kx5] {
grid-template-columns: 1fr;
}
.recovery-card[b-3sf5sc8kx5] {
min-height: 0;
padding: 22px 20px;
}
.support-panel[b-3sf5sc8kx5] {
padding: 24px 18px;
}
.technical-details p[b-3sf5sc8kx5] {
grid-template-columns: 1fr;
gap: 6px;
text-align: left;
}
.technical-details summary[b-3sf5sc8kx5] {
min-height: 44px;
padding-block: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
*[b-3sf5sc8kx5],
*[b-3sf5sc8kx5]::before,
*[b-3sf5sc8kx5]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* /Components/Pages/FamilyInvitation.razor.rz.scp.css */
.family-invitation-page[b-l923pbolky] {
--invitation-cocoa: #68473f;
--invitation-cocoa-deep: #4a302b;
--invitation-peach: #f4c8b9;
--invitation-paper: #fffdfb;
--invitation-ink: #3f302c;
width: 100vw;
min-height: 100svh;
margin-left: calc(50% - 50vw);
display: grid;
place-items: center;
padding: clamp(1rem, 4vw, 4rem);
overflow: clip;
background:
radial-gradient(circle at 12% 16%, rgba(244, 200, 185, .42), transparent 27rem),
radial-gradient(circle at 88% 80%, rgba(191, 155, 138, .2), transparent 30rem),
#f8eee8;
color: var(--invitation-ink);
}
.family-invitation-card[b-l923pbolky] {
position: relative;
width: min(100%, 64rem);
min-height: 36rem;
display: grid;
grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
overflow: hidden;
border: 1px solid rgba(104, 71, 63, .14);
border-radius: 2rem;
background: var(--invitation-paper);
box-shadow: 0 2.2rem 6rem rgba(74, 48, 43, .18);
animation: invitation-arrive-b-l923pbolky .5s cubic-bezier(.2, .75, .25, 1) both;
}
.family-invitation-logo[b-l923pbolky] {
position: absolute;
z-index: 3;
top: 1.75rem;
left: 2rem;
display: inline-flex;
padding: .55rem .7rem;
border-radius: .75rem;
background: rgba(255, 253, 251, .92);
box-shadow: 0 .3rem 1.2rem rgba(51, 31, 27, .1);
}
.family-invitation-logo img[b-l923pbolky] {
width: 6.4rem;
height: auto;
}
.family-invitation-story[b-l923pbolky] {
position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
padding: 7.4rem clamp(2rem, 4vw, 3.6rem) 3rem;
overflow: hidden;
background:
radial-gradient(circle at 86% 4%, rgba(244, 200, 185, .32), transparent 16rem),
var(--invitation-cocoa);
color: #fffaf7;
}
.family-invitation-story[b-l923pbolky]::after {
content: "";
position: absolute;
z-index: -1;
right: -5rem;
bottom: -8rem;
width: 22rem;
height: 22rem;
border: 1px solid rgba(255, 250, 247, .12);
border-radius: 50%;
box-shadow:
0 0 0 3.2rem rgba(255, 250, 247, .025),
0 0 0 6.4rem rgba(255, 250, 247, .018);
}
.family-invitation-story-content[b-l923pbolky] {
position: relative;
z-index: 1;
}
.family-invitation-thread[b-l923pbolky] {
position: absolute;
top: 5.1rem;
right: 2.3rem;
display: grid;
gap: .45rem;
opacity: .48;
transform: rotate(-8deg);
}
.family-invitation-thread span[b-l923pbolky] {
display: block;
width: 4.8rem;
height: 1px;
background: #f4c8b9;
}
.family-invitation-thread span:nth-child(2)[b-l923pbolky] { width: 3.3rem; }
.family-invitation-thread span:nth-child(3)[b-l923pbolky] { width: 2rem; }
.family-invitation-icon[b-l923pbolky] {
width: 4.15rem;
height: 4.15rem;
display: grid;
place-items: center;
margin-bottom: 1.65rem;
border: 1px solid rgba(255, 250, 247, .32);
border-radius: 50%;
background: rgba(255, 250, 247, .1);
color: #ffd9cc;
font-size: 1.5rem;
}
.family-invitation-icon-success[b-l923pbolky] {
color: #e5f1df;
}
.family-invitation-eyebrow[b-l923pbolky] {
margin: 0 0 .75rem;
color: #ffd3c5;
font-size: .74rem;
font-weight: 800;
letter-spacing: .16em;
text-transform: uppercase;
}
.family-invitation-card h1[b-l923pbolky] {
max-width: 10ch;
margin: 0;
color: #fffdfb;
font-family: var(--font-serif, 'Fraunces', Georgia, serif);
font-size: clamp(2.3rem, 4.2vw, 4rem);
font-weight: 600;
letter-spacing: -.035em;
line-height: .98;
}
.family-invitation-intro[b-l923pbolky] {
max-width: 32rem;
margin: 1.35rem 0 0;
color: rgba(255, 250, 247, .8);
font-size: 1rem;
line-height: 1.65;
}
.family-invitation-trust[b-l923pbolky] {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto 1fr;
gap: .75rem;
align-items: start;
margin-top: 3rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(255, 250, 247, .18);
color: rgba(255, 250, 247, .83);
font-size: .88rem;
line-height: 1.5;
}
.family-invitation-trust i[b-l923pbolky] {
margin-top: .18rem;
color: #ffd3c5;
}
.family-invitation-decision[b-l923pbolky] {
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(2.2rem, 6vw, 5rem);
background:
linear-gradient(rgba(104, 71, 63, .045) 1px, transparent 1px) 0 2.7rem / 100% 2.7rem,
var(--invitation-paper);
}
.family-invitation-field[b-l923pbolky],
.family-invitation-signin-copy[b-l923pbolky] {
display: grid;
gap: .65rem;
}
.family-invitation-step[b-l923pbolky] {
width: 2.15rem;
height: 2.15rem;
display: inline-grid;
place-items: center;
margin-bottom: .35rem;
border: 1px solid #dcc7be;
border-radius: 50%;
background: var(--lov-paper);
color: #936b60;
font-size: .7rem;
font-weight: 800;
letter-spacing: .08em;
}
.family-invitation-field label[b-l923pbolky] {
color: var(--invitation-ink);
font-family: var(--font-serif, 'Fraunces', Georgia, serif);
font-size: clamp(1.55rem, 3vw, 2rem);
font-weight: 600;
line-height: 1.15;
}
.family-invitation-field input[b-l923pbolky] {
width: 100%;
min-height: 3.5rem;
margin-top: .4rem;
padding: .85rem 1rem;
border: 1px solid #d9c1b8;
border-radius: .9rem;
outline: 0;
background: rgba(255, 255, 255, .94);
color: var(--invitation-ink);
font: inherit;
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.family-invitation-field input:focus[b-l923pbolky] {
border-color: #9b6b5f;
background: #fff;
box-shadow: 0 0 0 .24rem rgba(155, 107, 95, .13);
}
.family-invitation-hint[b-l923pbolky],
.family-invitation-small[b-l923pbolky],
.family-invitation-signin-copy p[b-l923pbolky] {
margin: 0;
color: #7a6862;
font-size: .86rem;
line-height: 1.55;
}
.family-invitation-submit-row[b-l923pbolky] {
display: grid;
gap: .8rem;
margin-top: 2.3rem;
}
.family-invitation-primary[b-l923pbolky],
.family-invitation-secondary[b-l923pbolky] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .8rem;
min-height: 3.35rem;
padding: .85rem 1.35rem;
border: 1px solid transparent;
border-radius: .9rem;
background: var(--invitation-cocoa);
color: #fff;
font-weight: 750;
text-decoration: none;
cursor: pointer;
box-shadow: 0 .75rem 1.8rem rgba(104, 71, 63, .18);
transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.family-invitation-submit-row .family-invitation-primary[b-l923pbolky],
.family-invitation-signin-copy + .family-invitation-primary[b-l923pbolky] {
width: 100%;
}
.family-invitation-primary:hover:not(:disabled)[b-l923pbolky] {
background: var(--invitation-cocoa-deep);
box-shadow: 0 .95rem 2rem rgba(74, 48, 43, .23);
transform: translateY(-1px);
}
.family-invitation-primary:focus-visible[b-l923pbolky],
.family-invitation-secondary:focus-visible[b-l923pbolky],
.family-invitation-logo:focus-visible[b-l923pbolky] {
outline: 3px solid #d69480;
outline-offset: 3px;
}
.family-invitation-primary:disabled[b-l923pbolky] {
cursor: not-allowed;
opacity: .55;
box-shadow: none;
}
.family-invitation-secondary[b-l923pbolky] {
border-color: #dcc7be;
background: transparent;
color: #684f49;
box-shadow: none;
}
.family-invitation-actions[b-l923pbolky] {
display: grid;
gap: .8rem;
}
.family-invitation-success-mark[b-l923pbolky] {
width: 4.5rem;
height: 4.5rem;
display: grid;
place-items: center;
margin: 0 auto 2rem;
border-radius: 50%;
background: #e8f1e4;
color: #537052;
font-size: 1.4rem;
box-shadow: 0 0 0 .65rem rgba(232, 241, 228, .5);
}
.family-invitation-error[b-l923pbolky] {
margin: 0 0 1.25rem;
padding: .85rem 1rem;
border: 1px solid #ecc9c4;
border-radius: .8rem;
background: #fff3f1;
color: #8b3535;
font-size: .9rem;
}
@keyframes invitation-arrive-b-l923pbolky {
from { opacity: 0; transform: translateY(12px) scale(.992); }
to { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
.family-invitation-page[b-l923pbolky] {
display: block;
padding: .75rem;
overflow: visible;
}
.family-invitation-card[b-l923pbolky] {
min-height: 0;
grid-template-columns: 1fr;
border-radius: 1.5rem;
}
.family-invitation-logo[b-l923pbolky] {
top: 1rem;
left: 1rem;
}
.family-invitation-story[b-l923pbolky] {
min-height: 29rem;
padding: 6.4rem 1.6rem 1.6rem;
}
.family-invitation-card h1[b-l923pbolky] {
max-width: 12ch;
font-size: clamp(2.35rem, 12vw, 3.3rem);
}
.family-invitation-trust[b-l923pbolky] {
margin-top: 2rem;
}
.family-invitation-decision[b-l923pbolky] {
padding: 2rem 1.6rem 2.2rem;
background: var(--invitation-paper);
}
}
@media (max-width: 390px) {
.family-invitation-page[b-l923pbolky] { padding: 0; }
.family-invitation-card[b-l923pbolky] { border: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
.family-invitation-card[b-l923pbolky] { animation: none; }
.family-invitation-primary[b-l923pbolky],
.family-invitation-field input[b-l923pbolky] { transition: none; }
}
body.night-mode .family-invitation-page[b-l923pbolky] {
background: var(--primary-bg);
color: var(--text-dark);
}
body.night-mode .family-invitation-card[b-l923pbolky] {
border-color: rgba(255, 255, 255, .14);
background: var(--secondary-bg);
}
body.night-mode .family-invitation-story[b-l923pbolky] {
background: #3e2e2b;
}
body.night-mode .family-invitation-decision[b-l923pbolky] {
background: var(--secondary-bg);
}
body.night-mode .family-invitation-field label[b-l923pbolky] {
color: var(--text-dark);
}
body.night-mode .family-invitation-hint[b-l923pbolky],
body.night-mode .family-invitation-signin-copy p[b-l923pbolky] {
color: var(--text-light);
}
body.night-mode .family-invitation-field input[b-l923pbolky] {
border-color: rgba(255, 255, 255, .18);
background: rgba(0, 0, 0, .18);
color: var(--text-dark);
}
body.night-mode .family-invitation-step[b-l923pbolky],
body.night-mode .family-invitation-secondary[b-l923pbolky] {
border-color: rgba(255, 255, 255, .18);
background: rgba(255, 255, 255, .06);
color: var(--text-dark);
}
/* /Components/Pages/FrontPage.razor.rz.scp.css */
/* ============================================
Pass 1 — LovOne Premium Storybook Tokens
"Image 2's soul with Image 1's polish."
These cascade down through ::deep into all
descendants of .app-layout / .container-v3.
============================================ */
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and],
[b-gamgjy5and] .container-v3,
.container-v3[b-gamgjy5and] {
/* Card surface (warm cream) */
--lov-card-surface: #FAF3E5;
/* Unified radii — slightly larger than legacy 15px for that
"premium foyer" feel, calmer than mockup's 24px clinical tone. */
--lov-card-radius: 18px;
--lov-card-radius-sm: 12px; /* postcards, oracle fan, micro-tiles */
--lov-section-radius: 24px; /* outer section containers */
/* Hairline warm border — replaces hard #EADDC0 lines */
--lov-card-border: 1px solid rgba(120, 88, 60, 0.10);
--lov-section-border: 1px solid rgba(120, 88, 60, 0.10);
/* Warm-brown shadows (NOT cold black) — this is the single
biggest "premium" lever. Black shadows look cheap on cream. */
--lov-card-shadow: 0 4px 14px rgba(120, 88, 60, 0.06);
--lov-card-shadow-hover: 0 14px 32px rgba(120, 88, 60, 0.12);
--lov-section-shadow: 0 10px 30px rgba(120, 88, 60, 0.08);
/* Section breathing room (Pass 4 will leverage this fully) */
--lov-section-gap: clamp(48px, 7vw, 96px);
/* Unified hover transition */
--lov-transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
/* Family themes grid responsive improvements */
.family-theme-grid[b-gamgjy5and] {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
@media (max-width: 768px) {
.family-theme-grid[b-gamgjy5and] {
grid-template-columns: 1fr;
gap: 18px;
}
.card-family-theme[b-gamgjy5and] {
width: 100%;
max-width: none;
box-sizing: border-box;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.family-theme-grid[b-gamgjy5and] {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobile layout - account for fixed top bar */
@media (max-width: 1024px) {
.app-layout[b-gamgjy5and] {
padding-top: 64px;
/* Account for topbar (56px) + small gap (8px) */
}
}
main.container-v3[b-gamgjy5and] {
padding-top: 0px;
}
/* FrontPage.razor.css - Scoped styles for the front page */
/* Base styles inherited from frontpage_v3.css but scoped */
[b-gamgjy5and] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
/* inherited font-sans */
}
/* Logo Section - Always Visible */
[b-gamgjy5and] .logo-section {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
background: rgba(255, 244, 228, 0.95);
padding: 10px 20px;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
[b-gamgjy5and] .main-logo-link {
display: block;
text-decoration: none;
}
[b-gamgjy5and] .main-logo {
height: 40px;
width: auto;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
/* Navigation Bar for Non-Authenticated Users */
[b-gamgjy5and] .main-nav-bar {
position: fixed;
top: 20px;
right: 20px;
z-index: 150;
display: flex;
align-items: center;
gap: 15px;
background: rgba(255, 244, 228, 0.95);
padding: 10px 20px;
border-radius: 15px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
[b-gamgjy5and] .main-nav-bar a {
font-weight: 700;
color: #4F4A45;
text-decoration: none;
cursor: pointer;
}
[b-gamgjy5and] .main-nav-bar a:hover {
color: #000;
}
/* App Layout */
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and] {
display: flex;
flex-direction: column;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px;
/* Account for fixed logo */
max-width: 100%;
overflow-x: clip;
}
/* Header Styles */
[b-gamgjy5and] .main-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 40px;
background-color: #FFF4E4;
border-bottom: 1px solid #eee;
}
[b-gamgjy5and] .logo {
font-family: var(--font-sans) !important;
font-size: 1.6em;
font-weight: 700;
color: #4F4A45;
}
[b-gamgjy5and] .header-logo {
height: 40px;
width: auto;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
[b-gamgjy5and] .main-nav {
display: flex;
align-items: center;
}
[b-gamgjy5and] .main-nav a {
margin-right: 20px;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
cursor: pointer;
}
[b-gamgjy5and] .main-nav a:hover {
color: #000;
}
/* Button Styles */
[b-gamgjy5and] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
}
[b-gamgjy5and] .btn:hover {
background-color: #FADDAA;
}
[b-gamgjy5and] .btn-login {
background-color: #FBCFA8;
}
[b-gamgjy5and] .btn-primary {
padding: 12px 25px;
margin-top: 10px;
background-color: #FBCFA8;
}
[b-gamgjy5and] .btn-secondary {
padding: 8px 18px;
margin-top: 10px;
}
/* Sidebar */
[b-gamgjy5and] .sidebar {
width: 280px;
background: var(--lov-paper);
/* Light background for sidebar var(--lov-surface);*/
padding: 1.5rem;
border-right: 1px solid #d8b8ad;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-gamgjy5and] .sidebar.hidden {
transform: translateX(-100%);
}
[b-gamgjy5and] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-gamgjy5and] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-gamgjy5and] .sidebar a:hover {
color: #000;
}
[b-gamgjy5and] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar Logo Styles */
[b-gamgjy5and] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-gamgjy5and] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
/*margin-left: 4em;*/
}
[b-gamgjy5and] .sidebar-logo {
text-align: center;
}
[b-gamgjy5and] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
/* Remove any border */
border-radius: 0 !important;
/* Remove any border radius */
box-shadow: none !important;
/* Remove any box shadow */
margin: 0;
/* Remove any margin from general img rules */
}
/* Sidebar Bottom User Section */
[b-gamgjy5and] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-gamgjy5and] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-gamgjy5and] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease-in-out;
}
[b-gamgjy5and] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-gamgjy5and] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: var(--text, #4F4A45);
}
[b-gamgjy5and] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
/* User Dropdown */
[b-gamgjy5and] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-gamgjy5and] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
animation: fadeIn-b-gamgjy5and 0.2s ease-in-out;
}
@keyframes fadeIn-b-gamgjy5and {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[b-gamgjy5and] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-gamgjy5and] .dropdown-item:hover {
background-color: #f0dad3;
}
/* Toggle Button */
[b-gamgjy5and] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-gamgjy5and] .toggle-sidebar {
display: none !important;
}
}
/* Main Container */
[b-gamgjy5and] .container-v3 {
flex: 1;
width: min(100%, calc(100vw - 280px));
max-width: min(1200px, calc(100vw - 280px));
margin: 20px auto;
margin-left: 280px;
/* Always account for sidebar */
padding: 0 20px;
padding-bottom: 40px;
/* ensures a clean transition before footer on all devices */
display: flex;
flex-direction: column;
gap: 40px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-gamgjy5and] .container-v3.sidebar-hidden {
margin-left: 0;
width: 100%;
max-width: min(1200px, 100vw);
/* Only on small screens */
}
/* When main header is present (non-authenticated users) */
[b-gamgjy5and] .main-header+* .container-v3 {
margin-top: 120px;
/* Account for fixed header */
}
/* Grid Areas */
[b-gamgjy5and] .hero-section {
grid-area: hero;
}
[b-gamgjy5and] .relationship-selector-section {
grid-area: relationship;
}
[b-gamgjy5and] .companion-section {
grid-area: companion;
}
[b-gamgjy5and] .theme-showcase-section {
grid-area: theme-showcase;
}
[b-gamgjy5and] .for-you-v3 {
grid-area: for-you;
}
[b-gamgjy5and] .featured-top {
grid-area: featured-top;
}
[b-gamgjy5and] .featured-bottom {
grid-area: featured-bottom;
}
[b-gamgjy5and] .footer-bottom {
grid-area: footer-bottom;
grid-row: calc(var(--footer-row-start, 1));
}
/* Headings */
[b-gamgjy5and] h2,
[b-gamgjy5and] h3,
[b-gamgjy5and] h4,
[b-gamgjy5and] h5 {
font-family: var(--font-sans) !important;
font-weight: 700;
color: #4F4A45;
margin-top: 0;
}
[b-gamgjy5and] h2 {
font-size: 1.8em;
margin-bottom: 20px;
}
[b-gamgjy5and] h3 {
font-size: 1.7em;
margin-bottom: 10px;
}
[b-gamgjy5and] h4 {
font-size: 1.2em;
margin-bottom: 8px;
}
[b-gamgjy5and] h5 {
font-size: 1.1em;
font-weight: 400;
color: #555;
margin-bottom: 5px;
}
[b-gamgjy5and] p {
/* Pass 4a: bigger, warmer, more breathing. No more fine print. */
margin-bottom: 15px;
color: #4A3F35;
font-size: 1rem;
line-height: 1.6;
}
/* Large Card — unified via Pass 1 tokens */
[b-gamgjy5and] .large-card-v3 {
background-color: var(--lov-card-surface, #FAF3E5);
border-radius: var(--lov-card-radius, 18px);
border: var(--lov-card-border, 1px solid rgba(120, 88, 60, 0.10));
box-shadow: var(--lov-card-shadow, 0 4px 14px rgba(120, 88, 60, 0.06));
overflow: hidden;
display: flex;
cursor: pointer;
transition: var(--lov-transition, transform 0.3s ease, box-shadow 0.3s ease);
}
[b-gamgjy5and] .large-card-v3:hover {
transform: translateY(-3px);
box-shadow: var(--lov-card-shadow-hover, 0 14px 32px rgba(120, 88, 60, 0.12));
}
[b-gamgjy5and] .large-card-v3 .card-img {
width: 50%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--lov-card-radius, 18px);
margin: 0.8em;
}
[b-gamgjy5and] .large-card-v3 .card-content {
width: 55%;
padding: 25px;
display: flex;
flex-direction: column;
justify-content: center;
}
[b-gamgjy5and] .large-card-v3 h3 {
font-size: 1.5em;
}
[b-gamgjy5and] .large-card-v3 p {
/* Pass 4a: scale up the headline card body */
font-size: 1.05rem;
line-height: 1.6;
color: #4A3F35;
}
/* Featured Grid */
[b-gamgjy5and] .featured-grid-v3 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
@media (max-width: 600px) {
[b-gamgjy5and] .featured-grid-v3 {
grid-template-columns: 1fr;
}
}
/* Pass 4b: gentle invitation under the showcase */
[b-gamgjy5and] .showcase-explore-more {
display: flex;
justify-content: center;
margin-top: 28px;
}
[b-gamgjy5and] .showcase-explore-more-link {
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
font-weight: 500;
color: #8B6F4E;
text-decoration: none;
letter-spacing: 0.01em;
padding: 6px 4px;
border-bottom: 1px solid transparent;
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
[b-gamgjy5and] .showcase-explore-more-link:hover {
color: #6E5A40;
border-bottom-color: rgba(139, 111, 78, 0.4);
transform: translateX(2px);
}
[b-gamgjy5and] .card-featured-v3 {
border-radius: var(--lov-card-radius, 18px);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: var(--lov-transition, transform 0.3s ease, box-shadow 0.3s ease);
}
[b-gamgjy5and] .card-featured-v3:hover {
transform: translateY(-3px);
box-shadow: var(--lov-card-shadow-hover, 0 14px 32px rgba(120, 88, 60, 0.12));
}
[b-gamgjy5and] .card-featured-v3 .card-img {
width: 100%;
border-radius: var(--lov-card-radius, 18px);
object-fit: cover;
}
[b-gamgjy5and] .card-featured-v3 .card-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
[b-gamgjy5and] .card-featured-v3 p {
/* Pass 4a: lift card body from 0.9em to a readable 1rem. */
font-size: 1rem;
line-height: 1.55;
color: #4A3F35;
margin-bottom: 12px;
flex-grow: 1;
}
[b-gamgjy5and] .card-featured-v3 .btn-secondary {
margin-top: auto;
align-self: flex-start;
}
/* Specific Card Styles */
[b-gamgjy5and] .card-legacy-v3 {
background-color: #FAF3E5;
}
[b-gamgjy5and] .card-legacy-v3 .card-content {
justify-content: space-between;
}
[b-gamgjy5and] .card-create-v3 {
background-color: #FAF3E5;
align-items: center;
justify-content: center;
text-align: center;
min-height: 200px;
}
[b-gamgjy5and] .card-create-v3 .card-content {
padding: 30px;
}
[b-gamgjy5and] .heart-icon {
font-size: 3.5em;
color: #F0C07A;
margin-bottom: 15px;
}
[b-gamgjy5and] .card-create-v3 p {
font-family: var(--font-sans) !important;
font-size: 1.1em;
color: #4F4A45;
font-weight: 700;
margin: 0;
flex-grow: 0;
}
[b-gamgjy5and] .card-placeholder {
background-color: transparent;
border: none;
box-shadow: none;
}
/* Hero Section Styles */
[b-gamgjy5and] .hero-section {
display: flex;
align-items: center;
gap: 40px;
padding: 40px 40px 80px 40px;
text-align: left;
margin-bottom: 20px;
}
/* ===== NEW HERO DESK SECTION ===== */
[b-gamgjy5and] .hero-section.hero-desk {
position: relative;
display: block;
padding: 0;
margin-bottom: 30px;
border-radius: 20px;
overflow: hidden;
min-height: 400px;
}
[b-gamgjy5and] .hero-desk-image {
position: relative;
width: 100%;
}
[b-gamgjy5and] .hero-desk-image>img {
width: 100%;
height: auto;
display: block;
border-radius: 20px;
}
/* Photo Frame Container - positioned over the frame in the illustration */
[b-gamgjy5and] .hero-frame-container {
position: absolute;
/* Calibrated position to overlay the photo frame in Hero16_9.png */
--frame-right: 15.1%;
--frame-top: 43.8%;
--frame-width: 9.8%;
--frame-height: 22.1%;
--frame-rotation: 1.5deg;
--frame-image-x: 50%;
--frame-image-y: 43%;
right: var(--frame-right);
top: var(--frame-top);
width: var(--frame-width);
height: var(--frame-height);
display: flex;
align-items: center;
justify-content: center;
transform: rotate(var(--frame-rotation));
transform-origin: center;
transition: all 0.6s ease-out;
}
/* Frame State: Awaiting Loved (logged in, no loved one yet) - subtle glow */
[b-gamgjy5and] .hero-frame-container.frame-awaiting {
box-shadow: inset 0 0 20px rgba(255, 249, 235, 0.4);
background: linear-gradient(135deg,
rgba(255, 253, 248, 0.1) 0%,
rgba(255, 244, 220, 0.15) 50%,
rgba(255, 253, 248, 0.1) 100%);
}
[b-gamgjy5and] .card-action-button {
width: 100%;
padding: 0;
appearance: none;
font: inherit;
color: inherit;
text-align: left;
}
[b-gamgjy5and] .relationship-icon-button {
padding: 0;
border: 0;
appearance: none;
background: transparent;
font: inherit;
color: inherit;
}
[b-gamgjy5and] .hero-frame-container.frame-loading {
overflow: hidden;
border-radius: 3px;
background: rgb(255 249 235 / 38%);
box-shadow: inset 0 0 16px rgb(255 255 255 / 62%);
}
[b-gamgjy5and] .hero-frame-container.frame-error {
overflow: hidden;
border-radius: 3px;
background: rgb(245 232 218 / 34%);
box-shadow: inset 0 0 12px rgb(91 64 52 / 18%);
}
[b-gamgjy5and] .hero-auth-loading {
width: min(25rem, 90%);
height: 2.75rem;
margin-top: 1rem;
border-radius: 0.75rem;
background: rgb(255 250 241 / 56%);
}
[b-gamgjy5and] .hero-auth-error {
max-width: 31rem;
margin-top: 1rem;
padding: 0.9rem 1rem;
border: 1px solid rgb(112 75 59 / 28%);
border-radius: 0.8rem;
background: rgb(255 250 245 / 82%);
}
[b-gamgjy5and] .hero-auth-error p {
margin: 0 0 0.75rem;
color: #553a30;
}
[b-gamgjy5and] .hero-frame-container.frame-has-loved {
overflow: hidden;
border-radius: 3px;
background:
radial-gradient(circle at 50% 28%, rgba(255, 238, 190, 0.62), rgba(224, 165, 75, 0.22) 70%),
rgba(255, 229, 172, 0.44);
box-shadow:
inset 1px 1px 4px rgba(60, 40, 20, 0.55),
0 0 0 1px rgba(98, 70, 45, 0.18);
}
[b-gamgjy5and] .hero-frame-container.frame-soft-glow {
overflow: hidden;
border-radius: 3px;
background: transparent;
box-shadow:
inset 0 0 15px rgba(255, 255, 255, 0.72),
0 0 18px rgba(255, 225, 150, 0.42);
}
[b-gamgjy5and] .hero-frame-glow {
position: absolute;
inset: 4% 5% 5% 4%;
border-radius: 7px;
background:
radial-gradient(circle at 50% 52%, rgba(255, 255, 255, 0.98) 0%, rgba(255, 253, 242, 0.84) 34%, rgba(255, 228, 166, 0.34) 68%, rgba(179, 122, 58, 0.12) 100%),
rgba(255, 244, 214, 0.62);
box-shadow:
inset 0 0 22px rgba(255, 255, 255, 0.84),
inset 0 0 48px rgba(255, 221, 146, 0.4);
filter: blur(0.2px);
opacity: 0.96;
}
/* Frame State: Has Loved One - image visible */
[b-gamgjy5and] .hero-frame-container.frame-has-loved .hero-frame-image {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--frame-image-x) var(--frame-image-y);
filter: sepia(0.2) contrast(1.08) brightness(0.96);
mix-blend-mode: multiply;
animation: heroImageFadeIn-b-gamgjy5and 700ms ease-out forwards;
}
[b-gamgjy5and] .hero-frame-glass {
position: absolute;
inset: 0;
pointer-events: none;
border-radius: 3px;
background: linear-gradient(135deg,
rgba(255, 223, 168, 0.25) 0%,
rgba(255, 255, 255, 0.02) 45%,
rgba(40, 25, 15, 0.12) 100%);
}
[b-gamgjy5and] .hero-frame-container.frame-soft-glow .hero-frame-glass {
opacity: 0.42;
}
[b-gamgjy5and] .hero-unfinished-nudge {
width: min(920px, calc(100% - 32px));
margin: -6px auto 34px;
padding: 18px 22px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
border: 1px solid rgba(176, 141, 110, 0.28);
border-radius: 18px;
background:
linear-gradient(135deg, rgba(255, 250, 240, 0.94), rgba(250, 238, 216, 0.86)),
var(--primary-bg);
box-shadow: 0 18px 42px rgba(96, 72, 48, 0.11);
}
[b-gamgjy5and] .hero-unfinished-nudge.is-secondary {
width: min(820px, calc(100% - 32px));
padding: 15px 20px;
background: rgba(255, 250, 240, 0.86);
box-shadow: 0 12px 28px rgba(96, 72, 48, 0.08);
}
[b-gamgjy5and] .hero-unfinished-nudge-copy h2 {
margin: 0 0 5px;
font-family: var(--font-serif);
font-size: 1.22rem;
font-weight: 600;
line-height: 1.2;
color: #5A4A3A;
}
[b-gamgjy5and] .hero-unfinished-nudge-copy p {
margin: 0;
max-width: 620px;
font-family: var(--font-sans);
font-size: 0.96rem;
line-height: 1.55;
color: #6A5A4A;
}
[b-gamgjy5and] .hero-unfinished-nudge-action {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
min-height: 42px;
padding: 10px 17px;
border: 1px solid rgba(128, 92, 58, 0.22);
border-radius: 999px;
background: linear-gradient(135deg, #8A684A, #B08D6E);
color: #fffaf0;
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 700;
text-decoration: none;
cursor: pointer;
box-shadow: 0 10px 22px rgba(138, 104, 74, 0.2);
transition: transform 180ms ease, box-shadow 180ms ease;
}
[b-gamgjy5and] .hero-unfinished-nudge-action:hover,
[b-gamgjy5and] .hero-unfinished-nudge-action:focus-visible {
transform: translateY(-1px);
box-shadow: 0 13px 28px rgba(138, 104, 74, 0.26);
}
@keyframes heroImageFadeIn-b-gamgjy5and {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Text Overlay - Positioned on the left side of the hero */
[b-gamgjy5and] .hero-text-overlay {
position: absolute;
left: 5%;
top: 40%;
transform: translateY(-50%);
max-width: 620px;
z-index: 1;
}
/* Eyebrow — brand-soul whisper above H1 */
[b-gamgjy5and] .hero-desk-eyebrow {
font-family: var(--font-serif);
font-size: 0.92em;
font-weight: 400;
font-style: italic;
letter-spacing: 0.04em;
color: #5A4A3A;
line-height: 1.5;
margin: 0 0 14px 0;
opacity: 0.92;
text-shadow: 0 1px 3px rgba(255, 249, 235, 0.6);
}
[b-gamgjy5and] .hero-desk-headline {
font-family: var(--font-serif);
/* Pass 3: stolen from the mockup — confidence over caution.
Scales fluidly from 2.4rem (mobile) to 4.2rem (desktop). */
font-size: clamp(2.4rem, 4.6vw, 4.2rem);
font-weight: 600;
color: #5A4A3A;
line-height: 1.08;
letter-spacing: 0;
margin: 0 0 20px 0;
text-shadow: 0 1px 2px rgba(255, 249, 235, 0.5);
}
/* Manifest subtitle — emotional "why" below H1 */
[b-gamgjy5and] .hero-desk-manifest {
font-family: var(--font-sans);
font-size: 1.1em;
font-style: normal;
font-weight: 400;
color: #6A5A4A;
line-height: 1.6;
margin: 0 0 28px 0;
opacity: 0.9;
}
[b-gamgjy5and] .hero-desk-subline {
font-family: var(--font-sans);
font-size: 1.15em;
font-style: normal;
font-weight: 400;
color: #5A4A3A;
line-height: 1.55;
margin: 0 0 28px 0;
opacity: 0.88;
}
/* Trust micro-copy - builds confidence below CTAs */
[b-gamgjy5and] .hero-trust-microcopy {
font-family: var(--font-sans);
font-size: 0.85em;
font-weight: 400;
color: #7A6A5A;
/* text-align: center; */
margin-top: 8px;
opacity: 0.75;
letter-spacing: 0.02em;
}
[b-gamgjy5and] .hero-quick-flow {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
max-width: 640px;
margin-top: 8px;
font-family: var(--font-sans);
color: #5f5144;
}
[b-gamgjy5and] .hero-quick-flow-label {
margin: 18px 0 0;
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8a6f58;
}
[b-gamgjy5and] .hero-quick-flow span {
min-width: 0;
padding-left: 12px;
border-left: 1px solid rgba(122, 91, 62, 0.26);
font-size: 0.82rem;
line-height: 1.45;
letter-spacing: 0;
}
[b-gamgjy5and] .hero-quick-flow strong {
display: block;
margin-bottom: 2px;
color: #4f4035;
font-family: var(--font-serif);
font-size: 0.96rem;
font-weight: 600;
letter-spacing: 0;
}
@media (max-width: 768px) {
[b-gamgjy5and] .hero-unfinished-nudge,
[b-gamgjy5and] .hero-unfinished-nudge.is-secondary {
width: auto;
margin: 0 16px 28px;
padding: 17px 18px;
flex-direction: column;
align-items: flex-start;
}
[b-gamgjy5and] .hero-unfinished-nudge-action {
width: 100%;
}
[b-gamgjy5and] .hero-quick-flow {
grid-template-columns: 1fr;
gap: 10px;
margin-top: 8px;
}
[b-gamgjy5and] .hero-quick-flow-label {
margin-top: 14px;
font-size: 0.72rem;
}
[b-gamgjy5and] .hero-quick-flow span {
font-size: 0.86rem;
}
}
[b-gamgjy5and] .portal-reveal-section {
width: min(1120px, calc(100% - 32px));
margin: -10px auto 44px;
padding: 0;
}
[b-gamgjy5and] .portal-reveal-inner {
display: grid;
grid-template-columns: minmax(260px, 0.85fr) minmax(0, 1.15fr);
gap: 34px;
align-items: end;
padding: 26px 0 0;
border-top: 1px solid rgba(118, 84, 56, 0.18);
}
[b-gamgjy5and] .portal-reveal-copy {
max-width: 460px;
}
[b-gamgjy5and] .portal-reveal-eyebrow {
margin: 0 0 8px;
color: #8a6f58;
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 700;
line-height: 1.3;
letter-spacing: 0.08em;
text-transform: uppercase;
}
[b-gamgjy5and] .portal-reveal-copy h2 {
margin: 0 0 10px;
color: #4f4035;
font-family: var(--font-serif) !important;
font-size: clamp(1.85rem, 2.2vw, 2.7rem);
font-weight: 600;
line-height: 1.12;
letter-spacing: 0;
}
[b-gamgjy5and] .portal-reveal-copy p:not(.portal-reveal-eyebrow) {
margin: 0;
color: #6a5a4a;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.6;
}
[b-gamgjy5and] .portal-reveal-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
}
[b-gamgjy5and] .portal-reveal-link {
min-width: 0;
padding: 4px 18px 2px;
border-left: 1px solid rgba(122, 91, 62, 0.22);
color: #5f5144;
font-family: var(--font-sans);
line-height: 1.45;
text-decoration: none;
}
[b-gamgjy5and] .portal-reveal-link strong {
display: block;
margin-bottom: 4px;
color: #4f4035;
font-family: var(--font-serif);
font-size: 1.04rem;
font-weight: 600;
line-height: 1.25;
letter-spacing: 0;
}
[b-gamgjy5and] .portal-reveal-link span {
display: block;
font-size: 0.88rem;
}
[b-gamgjy5and] .portal-reveal-link:hover strong,
[b-gamgjy5and] .portal-reveal-link:focus-visible strong {
color: #9b6436;
}
@media (max-width: 900px) {
[b-gamgjy5and] .portal-reveal-inner {
grid-template-columns: 1fr;
gap: 20px;
}
}
@media (max-width: 768px) {
[b-gamgjy5and] .portal-reveal-section {
width: auto;
margin: -4px 20px 36px;
}
[b-gamgjy5and] .portal-reveal-inner {
padding-top: 22px;
}
[b-gamgjy5and] .portal-reveal-copy {
max-width: none;
text-align: center;
}
[b-gamgjy5and] .portal-reveal-links {
grid-template-columns: 1fr;
gap: 12px;
}
[b-gamgjy5and] .portal-reveal-link {
padding: 0 0 0 14px;
}
}
.wisdom-story-actions[b-gamgjy5and] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px 24px;
}
.wisdom-story-actions .wisdom-soft-link[b-gamgjy5and] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
}
.wisdom-memory-link[b-gamgjy5and] {
display: inline-flex;
align-items: center;
min-height: 44px;
color: #67503e;
text-underline-offset: .3em;
}
.wisdom-story-actions a:focus-visible[b-gamgjy5and] {
outline: 3px solid #67503e;
outline-offset: 4px;
}
@media (max-width: 768px) {
.wisdom-story-actions[b-gamgjy5and] { justify-content: center; }
}
/* Mobile-only text overlay - hidden on desktop */
[b-gamgjy5and] .hero-mobile-text-overlay {
display: none;
}
/* Gentle CTA Group - within the glow, calm contrast */
[b-gamgjy5and] .hero-cta-group {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 14px;
align-items: center;
}
/* Hero primary CTA - shared gentle peach treatment for logged-out and logged-in states */
[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-logged-in-primary {
padding: 16px 32px;
font-size: 1.05em;
font-weight: 600;
background-color: rgba(251, 207, 168, 0.92);
color: #4F4A45;
border: 1px solid rgba(240, 192, 122, 0.6);
border-radius: 28px;
transition: all 0.3s ease;
box-shadow: 0 3px 12px rgba(251, 207, 168, 0.25);
cursor: pointer;
}
[b-gamgjy5and] .btn-hero-logged-in-primary {
white-space: nowrap;
}
[b-gamgjy5and] .btn-hero-gentle-primary:hover,
[b-gamgjy5and] .btn-hero-logged-in-primary:hover {
background-color: rgba(240, 192, 122, 0.95);
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(251, 207, 168, 0.35);
}
[b-gamgjy5and] .btn-hero-gentle-primary:focus,
[b-gamgjy5and] .btn-hero-gentle-primary:active,
[b-gamgjy5and] .btn-hero-logged-in-primary:focus,
[b-gamgjy5and] .btn-hero-logged-in-primary:active {
outline: none;
background-color: rgba(240, 192, 122, 0.95);
color: #4F4A45;
border-color: rgba(240, 192, 122, 0.6);
box-shadow: 0 0 0 3px rgba(251, 207, 168, 0.28), 0 3px 12px rgba(251, 207, 168, 0.25);
}
[b-gamgjy5and] .btn-hero-gentle-secondary {
padding: 14px 28px;
font-size: 1em;
font-weight: 600;
background-color: rgba(255, 252, 247, 0.92);
color: #5A4A3A;
border: 1.5px solid rgba(139, 115, 95, 0.35);
border-radius: 28px;
transition: all 0.3s ease;
cursor: pointer;
box-shadow: 0 2px 8px rgba(139, 115, 95, 0.08);
}
[b-gamgjy5and] .btn-hero-gentle-secondary:hover {
background-color: rgba(245, 221, 195, 0.95);
border-color: rgba(139, 115, 95, 0.5);
transform: translateY(-1px);
}
[b-gamgjy5and] .btn-hero-gentle-secondary:focus,
[b-gamgjy5and] .btn-hero-gentle-secondary:active {
outline: none;
box-shadow: none;
}
/* Tagline above the headline for logged-in users */
[b-gamgjy5and] .hero-tagline {
font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
font-size: 0.95em;
font-style: italic;
font-weight: 400;
color: #7A6A5A;
line-height: 1.5;
margin: 0 0 12px 0;
opacity: 0.85;
}
/* Tertiary link below the CTA buttons */
[b-gamgjy5and] .hero-tertiary-link {
display: inline-block;
font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
font-size: 0.9em;
font-weight: 500;
color: #7A6A5A;
text-decoration: underline;
text-underline-offset: 3px;
margin-top: 12px;
transition: color 0.2s ease;
cursor: pointer;
}
[b-gamgjy5and] .hero-tertiary-link:hover {
color: #5A4A3A;
}
/* "Senast: {LovedOneName}" caption positioned bottom-right of hero */
[b-gamgjy5and] .hero-last-active-caption {
position: absolute;
bottom: 8%;
right: 16%;
font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
font-size: 0.95em;
font-weight: 500;
color: #5A4A3A;
opacity: 0.85;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
pointer-events: none;
}
/* ============================================
Pass 3 — Floating Granny Note
The mockup’s floating quote, dressed in LovOne clothes:
handwritten Caveat on cream paper, slight tilt, warm shadow,
a single quotation mark like a pinned watermark.
============================================ */
[b-gamgjy5and] .hero-floating-note {
position: absolute;
/* Upper-right of the desk image, gently overlapping toward the photo frame area
but kept high enough to never collide with .hero-last-active-caption (bottom 8%). */
top: 7%;
right: 4%;
width: clamp(190px, 19vw, 260px);
padding: 22px 22px 18px 22px;
background: linear-gradient(180deg, #FFFBF2 0%, #FAF1DD 100%);
border-radius: var(--lov-card-radius-sm, 12px);
border: 1px solid rgba(120, 88, 60, 0.10);
box-shadow:
0 14px 32px rgba(120, 88, 60, 0.18),
0 2px 6px rgba(120, 88, 60, 0.10);
transform: rotate(-2.5deg);
transform-origin: top right;
z-index: 4;
pointer-events: none; /* it’s decorative; never blocks the frame */
-webkit-user-select: none;
user-select: none;
/* Soft entrance — the note settles after the hero loads. */
animation: heroNoteSettle-b-gamgjy5and 0.9s ease-out 0.3s both;
}
[b-gamgjy5and] .hero-floating-note::before {
/* A subtle paper-fold highlight along the top edge */
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 28px;
border-radius: var(--lov-card-radius-sm, 12px) var(--lov-card-radius-sm, 12px) 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0));
pointer-events: none;
}
[b-gamgjy5and] .hero-floating-note-quote-mark {
position: absolute;
top: -2px;
left: 14px;
font-family: var(--font-serif);
font-size: 3.2rem;
line-height: 1;
color: rgba(180, 130, 70, 0.35);
pointer-events: none;
}
[b-gamgjy5and] .hero-floating-note-text {
font-family: var(--font-handwriting, 'Caveat'), 'Segoe Script', cursive;
font-size: 1.32rem;
font-weight: 500;
line-height: 1.32;
color: #5A4233;
margin: 6px 0 10px 0;
/* a tiny optical lift so the cursive feels handwritten, not printed */
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
[b-gamgjy5and] .hero-floating-note-signature {
display: block;
font-family: var(--font-handwriting, 'Caveat'), 'Segoe Script', cursive;
font-size: 1.05rem;
color: #8A6E55;
text-align: right;
letter-spacing: 0.02em;
}
@keyframes heroNoteSettle-b-gamgjy5and {
from {
opacity: 0;
transform: rotate(0deg) translateY(-12px);
}
to {
opacity: 1;
transform: rotate(-2.5deg) translateY(0);
}
}
/* Hide the floating note on small screens — the hero gets crowded
and the message is already conveyed by the body copy below. */
@media (max-width: 900px) {
[b-gamgjy5and] .hero-floating-note {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {
[b-gamgjy5and] .hero-floating-note {
animation: none;
}
}
/* ===== LEGACY HERO STYLES (kept for compatibility) ===== */
[b-gamgjy5and] .hero-illustration {
flex: 0 0 320px;
max-width: 320px;
filter: drop-shadow(0 12px 30px rgba(102, 72, 59, 0.25));
position: relative;
transform: translateX(8%);
}
[b-gamgjy5and] .hero-illustration img {
width: 100%;
height: auto;
}
[b-gamgjy5and] .hero-content {
max-width: 620px;
margin: 0;
}
[b-gamgjy5and] .hero-headline {
font-family: var(--font-sans) !important;
font-size: 2.5em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 20px;
line-height: 1.2;
}
[b-gamgjy5and] .hero-subtitle {
font-size: 1.2em;
color: #666;
margin-bottom: 35px;
line-height: 1.4;
}
[b-gamgjy5and] .hero-buttons {
display: flex;
justify-content: flex-start;
gap: 16px;
flex-wrap: wrap;
margin-top: 12px;
}
[b-gamgjy5and] .btn-hero-primary {
padding: 15px 35px;
font-size: 1.05em;
font-weight: 700;
background-color: #FBCFA8;
color: #4F4A45;
border: 2px solid #F0C07A;
border-radius: 30px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(251, 207, 168, 0.3);
}
[b-gamgjy5and] .btn-hero-primary:hover {
background-color: #F0C07A;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(251, 207, 168, 0.4);
}
[b-gamgjy5and] .btn-hero-secondary {
padding: 15px 35px;
font-size: 1.1em;
font-weight: 700;
background-color: transparent;
color: #4F4A45;
border: 2px solid #EADDC0;
border-radius: 30px;
transition: all 0.3s ease;
text-decoration: none;
}
[b-gamgjy5and] .btn-hero-secondary:hover {
background-color: #F5DDC3;
border-color: #EADDC0;
transform: translateY(-2px);
}
[b-gamgjy5and] .btn-hero-secondary:focus,
[b-gamgjy5and] .btn-hero-secondary:active,
[b-gamgjy5and] .btn-hero-secondary:focus-visible {
outline: none;
box-shadow: none;
border-color: #EADDC0;
}
/* Companion Section Styles */
[b-gamgjy5and] .companion-section {
text-align: center;
padding: 30px 20px;
background-color: rgba(255, 244, 228, 0.5);
border-radius: 15px;
border: 1px solid #f0dad3;
margin-bottom: 20px;
}
[b-gamgjy5and] .companion-text {
font-size: 1.1em;
color: #666;
margin-bottom: 20px;
font-style: italic;
}
[b-gamgjy5and] .btn-companion {
padding: 12px 30px;
font-size: 1em;
font-weight: 600;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
border-radius: 25px;
transition: all 0.3s ease;
}
[b-gamgjy5and] .btn-companion:hover {
background-color: #FADDAA;
transform: translateY(-1px);
}
/* Theme Showcase Section — unified via Pass 1 tokens */
[b-gamgjy5and] .theme-showcase-section {
background: linear-gradient(135deg, #FAF3E5 0%, #FFF4E4 100%);
border-radius: var(--lov-section-radius, 24px);
padding: 40px;
box-shadow: var(--lov-section-shadow, 0 10px 30px rgba(120, 88, 60, 0.08));
border: var(--lov-section-border, 1px solid rgba(120, 88, 60, 0.10));
margin-bottom: 20px;
}
/* Family Themes Section — unified via Pass 1 tokens */
.family-theme-section[b-gamgjy5and] {
background: linear-gradient(135deg, #FAF3E5 0%, #FFF4E4 100%);
border-radius: var(--lov-section-radius, 24px);
padding: 34px 36px 36px 36px;
box-shadow: var(--lov-section-shadow, 0 10px 30px rgba(120, 88, 60, 0.08));
border: var(--lov-section-border, 1px solid rgba(120, 88, 60, 0.10));
margin-bottom: 16px;
}
.family-theme-container[b-gamgjy5and] {
max-width: 1100px;
margin: 0 auto;
}
.family-theme-headline[b-gamgjy5and] {
font-family: var(--font-sans) !important;
font-size: 1.5em;
font-weight: 600;
color: #4F4A45;
text-align: center;
margin-bottom: 35px;
letter-spacing: 0.01em;
}
.family-theme-grid[b-gamgjy5and] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 25px;
}
.card-family-theme[b-gamgjy5and] {
background-color: var(--lov-card-surface, #FAF3E5);
border-radius: var(--lov-card-radius, 18px);
border: var(--lov-card-border, 1px solid rgba(120, 88, 60, 0.10));
box-shadow: var(--lov-card-shadow, 0 4px 14px rgba(120, 88, 60, 0.06));
overflow: hidden;
display: flex;
flex-direction: column;
transition: var(--lov-transition, transform 0.3s ease, box-shadow 0.3s ease);
cursor: pointer;
width: 250px;
min-width: 220px;
max-width: 300px;
min-height: 405px;
margin-bottom: 0;
}
.card-family-theme:hover[b-gamgjy5and] {
transform: translateY(-3px);
box-shadow: var(--lov-card-shadow-hover, 0 14px 32px rgba(120, 88, 60, 0.12));
}
.card-family-theme .card-img[b-gamgjy5and] {
width: 100%;
aspect-ratio: 4 / 3;
height: auto;
object-fit: cover;
border-radius: var(--lov-card-radius, 18px) var(--lov-card-radius, 18px) 0 0;
display: block;
}
.card-family-theme .card-content[b-gamgjy5and] {
padding: 22px 18px 20px 18px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.card-family-theme h3[b-gamgjy5and] {
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 10px;
line-height: 1.3;
}
.card-family-theme p[b-gamgjy5and] {
/* Pass 4a: warmer color, more readable size */
font-size: 1rem;
line-height: 1.6;
color: #4A3F35;
margin-bottom: 18px;
flex-grow: 1;
}
.card-family-theme .btn-secondary[b-gamgjy5and] {
align-self: flex-start;
margin-top: auto;
min-width: 100px;
}
@media (max-width: 1024px) {
.family-theme-grid[b-gamgjy5and] {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
.card-family-theme[b-gamgjy5and] {
width: 100%;
min-width: 180px;
max-width: 320px;
}
.family-theme-section[b-gamgjy5and] {
padding: 30px 18px;
}
}
@media (max-width: 600px) {
.family-theme-grid[b-gamgjy5and] {
grid-template-columns: 1fr;
gap: 18px;
}
.card-family-theme[b-gamgjy5and] {
width: 100%;
min-width: 160px;
max-width: 100%;
box-sizing: border-box;
}
.family-theme-section[b-gamgjy5and] {
padding: 18px 12px;
margin: 0 12px;
}
.family-theme-headline[b-gamgjy5and] {
font-size: 1.15em;
margin-bottom: 18px;
}
}
/* ============================================
Oracle Chamber Section — unified via Pass 1 tokens
============================================ */
.oracle-section[b-gamgjy5and] {
background: linear-gradient(135deg, #FAF3E5 0%, #FFF4E4 100%);
border-radius: var(--lov-section-radius, 24px);
padding: 50px 48px;
box-shadow: var(--lov-section-shadow, 0 10px 30px rgba(120, 88, 60, 0.08));
border: var(--lov-section-border, 1px solid rgba(120, 88, 60, 0.10));
margin-bottom: 20px;
overflow: hidden;
}
.oracle-section-inner[b-gamgjy5and] {
display: flex;
align-items: center;
gap: 48px;
max-width: 1100px;
margin: 0 auto;
}
.oracle-text-container[b-gamgjy5and] {
flex: 1;
min-width: 0;
}
.oracle-headline[b-gamgjy5and] {
font-family: var(--font-serif) !important;
font-size: 2.2em;
font-weight: 700;
color: #3A3228;
margin: 0 0 10px 0;
line-height: 1.2;
}
/* Pass 4c: a soft whisper that bridges family-warmth to historical wisdom. */
.oracle-subheadline[b-gamgjy5and] {
font-family: var(--font-serif);
font-size: 1.08rem;
font-style: italic;
font-weight: 400;
color: #7A6A55;
line-height: 1.5;
margin: 0 0 20px 0;
max-width: 480px;
letter-spacing: 0.01em;
}
.oracle-body[b-gamgjy5and] {
font-size: 1.05rem;
color: #5A5248;
line-height: 1.7;
margin: 0 0 24px 0;
max-width: 480px;
}
.oracle-features[b-gamgjy5and] {
list-style: none;
padding: 0;
margin: 0 0 28px 0;
}
.oracle-features li[b-gamgjy5and] {
display: flex;
align-items: baseline;
gap: 10px;
font-size: 1.02rem;
color: #4F4A45;
padding: 5px 0;
line-height: 1.5;
}
.oracle-check[b-gamgjy5and] {
color: #B08D6E;
font-weight: 700;
font-size: 1.1rem;
flex-shrink: 0;
}
.oracle-cta-btn[b-gamgjy5and] {
display: inline-block;
padding: 14px 32px;
background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
color: #fff;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
border-radius: 28px;
text-decoration: none;
box-shadow: 0 4px 14px rgba(166, 123, 80, 0.3);
transition: all 0.3s ease;
letter-spacing: 0.02em;
}
.oracle-cta-btn:hover[b-gamgjy5and] {
background: linear-gradient(135deg, #D4AA7C 0%, #B68B60 100%);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(166, 123, 80, 0.4);
color: #fff;
text-decoration: none;
}
.oracle-secondary-link[b-gamgjy5and] {
margin: 14px 0 0 0;
font-size: 0.92rem;
font-style: italic;
color: #8B7355;
}
.oracle-secondary-dot[b-gamgjy5and] {
margin-right: 4px;
}
.oracle-secondary-link a[b-gamgjy5and] {
color: #8B7355;
text-decoration: none;
transition: color 0.2s ease;
}
.oracle-secondary-link a:hover[b-gamgjy5and] {
color: #6E5A40;
}
/* Oracle Cards - Fanned layout */
.oracle-cards-container[b-gamgjy5and] {
display: flex;
align-items: flex-end;
justify-content: center;
position: relative;
width: 480px;
height: 340px;
flex-shrink: 0;
}
.oracle-card[b-gamgjy5and] {
position: absolute;
width: 165px;
background: #FDF8F0;
/* Postcards keep the smaller radius — intentional, not a bug. */
border-radius: var(--lov-card-radius-sm, 12px);
/* Warm-brown shadow replaces the cold black tint. */
box-shadow: 0 8px 22px rgba(120, 88, 60, 0.14);
overflow: hidden;
transition: transform 0.4s ease, box-shadow 0.3s ease;
border: 2px solid rgba(220, 200, 170, 0.5);
}
.oracle-card img[b-gamgjy5and] {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.oracle-card-label[b-gamgjy5and] {
padding: 10px 12px;
text-align: center;
background: linear-gradient(180deg, #FDF8F0 0%, #F5EDE0 100%);
}
.oracle-card-name[b-gamgjy5and] {
display: block;
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 700;
color: #3A3228;
}
.oracle-card-title[b-gamgjy5and] {
display: block;
font-size: 0.78rem;
color: #8B7355;
font-style: italic;
margin-top: 1px;
}
/* Card positions - Fanned spread */
.oracle-card-left[b-gamgjy5and] {
left: 0;
bottom: 20px;
transform: rotate(-8deg);
z-index: 1;
}
.oracle-card-center[b-gamgjy5and] {
left: 50%;
bottom: 30px;
transform: translateX(-50%) rotate(0deg);
z-index: 3;
}
.oracle-card-right[b-gamgjy5and] {
right: 0;
bottom: 10px;
transform: rotate(6deg);
z-index: 2;
}
/* Hover effects */
.oracle-card:hover[b-gamgjy5and] {
transform: rotate(0deg) translateY(-6px) scale(1.03);
box-shadow: 0 16px 36px rgba(120, 88, 60, 0.20);
z-index: 10;
}
.oracle-card-center:hover[b-gamgjy5and] {
transform: translateX(-50%) translateY(-6px) scale(1.03);
}
/* Tablet */
@media (max-width: 1024px) {
.oracle-section[b-gamgjy5and] {
padding: 36px 28px;
}
.oracle-section-inner[b-gamgjy5and] {
gap: 32px;
}
.oracle-headline[b-gamgjy5and] {
font-size: 1.8em;
}
.oracle-cards-container[b-gamgjy5and] {
width: 320px;
height: 290px;
}
.oracle-card[b-gamgjy5and] {
width: 140px;
}
.oracle-card img[b-gamgjy5and] {
height: 170px;
}
}
/* Mobile */
@media (max-width: 768px) {
.oracle-section[b-gamgjy5and] {
padding: 28px 18px;
margin: 0 12px 20px;
}
.oracle-section-inner[b-gamgjy5and] {
flex-direction: column;
gap: 28px;
text-align: center;
}
.oracle-headline[b-gamgjy5and] {
font-size: 1.6em;
}
.oracle-body[b-gamgjy5and] {
max-width: 100%;
}
.oracle-features li[b-gamgjy5and] {
justify-content: center;
}
.oracle-cta-btn[b-gamgjy5and] {
display: block;
text-align: center;
max-width: 300px;
margin: 0 auto;
}
.oracle-secondary-link[b-gamgjy5and] {
text-align: center;
}
.oracle-cards-container[b-gamgjy5and] {
width: 320px;
height: 260px;
}
.oracle-card[b-gamgjy5and] {
width: 130px;
}
.oracle-card img[b-gamgjy5and] {
height: 155px;
}
.oracle-card-name[b-gamgjy5and] {
font-size: 0.85rem;
}
.oracle-card-title[b-gamgjy5and] {
font-size: 0.72rem;
}
}
/* Small mobile */
@media (max-width: 480px) {
.oracle-section[b-gamgjy5and] {
padding: 22px 14px;
}
.oracle-headline[b-gamgjy5and] {
font-size: 1.4em;
}
.oracle-cards-container[b-gamgjy5and] {
width: 280px;
height: 230px;
}
.oracle-card[b-gamgjy5and] {
width: 115px;
}
.oracle-card img[b-gamgjy5and] {
height: 135px;
}
}
[b-gamgjy5and] .showcase-header {
text-align: center;
margin-bottom: 40px;
}
[b-gamgjy5and] .showcase-main-headline {
font-family: var(--font-sans) !important;
font-size: 1.8em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 15px 0;
line-height: 1.3;
}
[b-gamgjy5and] .showcase-subtitle {
font-size: 1.1em;
color: #666;
margin: 0;
line-height: 1.4;
max-width: 600px;
margin: 0 auto;
}
[b-gamgjy5and] .showcase-content {
display: grid;
grid-template-areas:
"for-you featured-top"
"featured-bottom featured-top";
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 40px;
}
/* Cards Headline Section Styles - Legacy (can be removed if not used elsewhere) */
[b-gamgjy5and] .cards-headline-section {
text-align: center;
padding: 20px 0;
margin-bottom: 10px;
}
[b-gamgjy5and] .cards-main-headline {
font-family: var(--font-sans) !important;
font-size: 1.9em;
font-weight: 700;
color: #4F4A45;
margin: 0;
line-height: 1.3;
}
/* Relationship Selector Section Styles */
[b-gamgjy5and] .relationship-selector-section {
text-align: center;
padding: 40px 20px;
/*background-color: rgba(250, 243, 229, 0.7);
border-radius: 15px;
border: 1px solid #f0dad3;*/
margin-bottom: 20px;
}
[b-gamgjy5and] .relationship-selector-title {
font-family: var(--font-sans) !important;
font-size: 1.8em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 30px;
}
[b-gamgjy5and] .relationship-icons {
display: flex;
justify-content: center;
gap: 38px;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto;
}
[b-gamgjy5and] .relationship-icon {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
padding: 15px;
border-radius: 15px;
min-width: 110px;
}
[b-gamgjy5and] .relationship-icon:hover {
transform: translateY(-3px);
background-color: rgba(255, 244, 228, 0.8);
}
[b-gamgjy5and] .icon-circle {
width: 84px;
height: 84px;
background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 18px;
box-shadow: 0 6px 18px rgba(251, 207, 168, 0.35);
transition: all 0.3s ease;
}
[b-gamgjy5and] .relationship-icon:hover .icon-circle {
transform: scale(1.08);
box-shadow: 0 8px 24px rgba(251, 207, 168, 0.45);
}
[b-gamgjy5and] .icon-circle i {
font-size: 2.1em;
color: #4F4A45;
}
[b-gamgjy5and] .icon-label {
font-family: var(--font-sans) !important;
font-size: 1rem;
font-weight: 600;
color: #4F4A45;
text-align: center;
letter-spacing: 0.01em;
}
/* Sidebar Overlay */
.sidebar-overlay[b-gamgjy5and] {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none;
}
.sidebar-overlay.hidden[b-gamgjy5and] {
display: none;
}
/* --- New Footer Styles --- */
[b-gamgjy5and] .main-footer {
/* This creates the full-width "floor" for the page */
/* width: calc(100% - 280px); Subtract sidebar width from total width */
margin-left: 280px;
/* Start where main content starts */
background-color: #FAF3E5;
/* Match the warm card background color */
padding: 60px 0 30px 0;
margin-top: 80px;
/* Space above the footer */
color: #4F4A45;
border-top: 1px solid #f0dad3;
/* Remove grid-area, as the footer is no longer part of the content grid */
}
[b-gamgjy5and] .main-footer.sidebar-hidden {
margin-left: 0;
/* Remove left margin when sidebar is hidden */
width: 100%;
}
/* A container to keep the footer content aligned with the main page content */
[b-gamgjy5and] .footer-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
}
/* When sidebar is hidden, use full width container */
[b-gamgjy5and] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
/* Center when sidebar is hidden */
}
/* 1. Brand Section */
[b-gamgjy5and] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-gamgjy5and] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-gamgjy5and] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
/* 2. Navigation Links Section */
[b-gamgjy5and] .footer-nav-links {
/* Use Flexbox to group and center the items */
display: flex;
justify-content: center;
flex-wrap: wrap;
/* Allows wrapping on smaller screens */
/* The 'gap' now controls the space BETWEEN the columns */
gap: 80px;
/* Adjust this value to your liking (e.g., 60px, 100px) */
margin-bottom: 40px;
}
[b-gamgjy5and] .footer-section {
padding: 0 15px;
/* Adds some space for smaller screens */
}
[b-gamgjy5and] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-gamgjy5and] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-gamgjy5and] .footer-section ul li {
margin-bottom: 10px;
}
[b-gamgjy5and] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-gamgjy5and] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
/* 3. Bottom Bar (Utilities & Legal) */
[b-gamgjy5and] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
/* Allows items to wrap on small screens */
gap: 20px;
}
[b-gamgjy5and] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-gamgjy5and] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-gamgjy5and] .footer-languages a:hover,
[b-gamgjy5and] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
/* NEW: Wrapper for the right-aligned text */
[b-gamgjy5and] .footer-legal-origin {
text-align: right;
}
/* NEW: Style for the "Made by" line */
[b-gamgjy5and] .footer-made-by {
font-size: 0.85em;
color: #6f6258;
margin: 0 0 5px 0;
/* Add a little space below it */
}
[b-gamgjy5and] .footer-copyright {
font-size: 0.85em;
color: #6f6258;
margin: 0;
/* Remove default paragraph margins */
text-align: left;
/* Ensure it stays right-aligned */
}
/* Responsive Styles */
/* Treat tablets (<=1024px) as mobile-view with top bar and hidden sidebar */
@media (max-width: 1024px) {
/* Show mobile top bar + hamburger on tablet/phone */
[b-gamgjy5and] .mobile-top-bar {
display: flex !important;
}
[b-gamgjy5and] .hero-section {
flex-direction: column;
text-align: center;
gap: 30px;
}
[b-gamgjy5and] .hero-content {
max-width: 620px;
text-align: center;
}
[b-gamgjy5and] .hero-buttons {
justify-content: center;
}
[b-gamgjy5and] .hero-illustration {
max-width: 240px;
transform: none;
margin: 0 auto;
}
/* New Hero Desk responsive styles for tablet */
[b-gamgjy5and] .hero-section.hero-desk {
min-height: auto;
display: flex;
flex-direction: column;
padding: 0;
}
/* Tablet hero image with gradient fade */
[b-gamgjy5and] .hero-desk-image {
position: relative;
width: 100%;
height: 380px;
overflow: hidden;
}
[b-gamgjy5and] .hero-desk-image>img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 60% center;
}
/* Gradient overlay for tablet */
[b-gamgjy5and] .hero-desk-image::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 35%;
background: linear-gradient(to bottom, rgba(250, 236, 218, 0) 0%, rgba(250, 236, 218, 0.7) 50%, var(--lov-paper) 100%);
pointer-events: none;
}
[b-gamgjy5and] .hero-text-overlay {
position: relative;
left: auto;
top: auto;
transform: none;
max-width: 100%;
padding: 0 30px 40px 30px;
text-align: center;
background: transparent;
margin-top: -40px;
z-index: 5;
}
[b-gamgjy5and] .hero-desk-eyebrow {
font-size: 0.85em;
text-align: center;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: 1.8em;
}
[b-gamgjy5and] .hero-desk-manifest {
font-size: 1em;
text-align: center;
}
[b-gamgjy5and] .hero-desk-subline {
font-size: 1.05em;
}
[b-gamgjy5and] .hero-trust-microcopy {
text-align: center;
margin-top: 14px;
}
[b-gamgjy5and] .hero-cta-group {
align-items: center;
flex-direction: row;
justify-content: center;
gap: 16px;
}
[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-gentle-secondary {
width: auto;
}
[b-gamgjy5and] .hero-frame-container {
/* Adjust frame position for tablet aspect ratio */
--frame-right: 14%;
--frame-top: 45%;
--frame-width: 10%;
--frame-height: 22%;
}
/* Hide the floating desktop toggle on mobile-view; mobile top bar provides hamburger */
[b-gamgjy5and] .toggle-sidebar {
display: none !important;
}
/* Use mobile top bar spacing */
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and] {
padding-top: 60px;
/* Account for mobile top bar height */
}
/* Collapse main grid to single column and remove reserved sidebar margin */
[b-gamgjy5and] .container-v3 {
grid-template-areas:
"hero"
"relationship"
"companion"
"theme-showcase"
"footer-bottom";
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
margin-left: 0 !important;
margin-top: 0px;
/* Adjust top margin for mobile/tablet */
}
/* Sidebar behaves like off-canvas beneath the top bar */
[b-gamgjy5and] .sidebar {
top: 60px;
/* Start below the mobile top bar */
height: calc(100vh - 60px);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
[b-gamgjy5and] .sidebar.visible {
transform: translateX(0);
}
[b-gamgjy5and] .sidebar.hidden {
transform: translateX(-100%);
}
/* Force footer to full width when in mobile-view */
[b-gamgjy5and] .main-footer {
margin-left: 0 !important;
}
}
@media (max-width: 768px) {
/* Hide the old floating toggle button only on phones; keep it visible on tablets like iPad Air (820px) */
[b-gamgjy5and] .toggle-sidebar {
display: none;
}
/* Adjust app layout for mobile top bar */
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and] {
padding-top: 60px;
/* Account for mobile top bar height */
overflow-x: hidden;
}
[b-gamgjy5and] main.container-v3 {
padding: 0 var(--mobile-page-margin);
/* Let hero handle its own margins */
}
[b-gamgjy5and] .container-v3 {
grid-template-areas:
"hero"
"relationship"
"companion"
"theme-showcase"
"footer-bottom";
grid-template-columns: 1fr;
grid-template-rows: auto auto auto auto auto;
margin-left: 0 !important;
margin-top: 10px;
/* Small gap between topbar and hero card */
padding-top: 0px;
}
/* Adjust theme showcase for mobile */
[b-gamgjy5and] .theme-showcase-section {
padding: 30px 20px;
margin: 0 12px;
}
[b-gamgjy5and] .showcase-header {
margin-bottom: 30px;
}
[b-gamgjy5and] .showcase-main-headline {
font-size: 1.8em;
}
[b-gamgjy5and] .showcase-subtitle {
font-size: 1em;
}
[b-gamgjy5and] .showcase-content {
grid-template-areas:
"for-you"
"featured-top"
"featured-bottom";
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 30px;
}
/* Adjust sidebar for mobile with top bar */
[b-gamgjy5and] .sidebar {
top: 60px;
/* Start below the mobile top bar */
height: calc(100vh - 60px);
/* Adjust height */
}
/* Adjust hero section for mobile */
[b-gamgjy5and] .hero-section {
padding: 40px 20px;
flex-direction: column;
text-align: center;
}
[b-gamgjy5and] .hero-headline {
font-size: 2em;
}
[b-gamgjy5and] .hero-subtitle {
font-size: 1.1em;
}
[b-gamgjy5and] .hero-buttons {
flex-direction: column;
align-items: center;
gap: 15px;
}
[b-gamgjy5and] .hero-illustration {
max-width: 300px;
flex: none
}
[b-gamgjy5and] .btn-hero-primary,
[b-gamgjy5and] .btn-hero-secondary {
padding: 12px 30px;
font-size: 1em;
width: 100%;
max-width: 280px;
}
/* New Hero Desk responsive styles for mobile - Card UI */
[b-gamgjy5and] .hero-section.hero-desk {
border-radius: 20px;
/* Rounded corners for card feel */
margin: 0 16px;
/* Inset from edges - creates "card on page" look */
width: auto;
/* Let margins control width */
display: flex;
flex-direction: column;
padding: 0;
min-height: auto;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
/* Subtle shadow for physical card feel */
overflow: hidden;
/* Ensure content respects rounded corners */
background: #FAF3E5;
/* Card background - slightly different from page for definition */
}
/* Mobile hero image container with gradient fade */
[b-gamgjy5and] .hero-desk-image {
position: relative;
width: 100%;
height: 340px;
overflow: hidden;
}
[b-gamgjy5and] .hero-desk-image>img {
border-radius: 20px 20px 0 0;
/* Rounded top corners only */
width: 100%;
height: 100%;
object-fit: cover;
/* Focus on the candle and frame (right side of image) */
object-position: 70% center;
}
/* Gradient overlay - melts image into card background */
[b-gamgjy5and] .hero-desk-image::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 40%;
background: linear-gradient(to bottom, rgba(250, 243, 229, 0) 0%, rgba(250, 243, 229, 0.85) 60%, #FAF3E5 100%);
pointer-events: none;
/* No border-radius needed - contained within parent's overflow:hidden */
}
[b-gamgjy5and] .hero-text-overlay {
position: relative;
left: auto;
top: auto;
transform: none;
max-width: 100%;
padding: 0 24px 30px 24px;
text-align: center;
background: #FAF3E5;
/* Match card background */
margin-top: -30px;
/* Pull text up into the gradient fade */
z-index: 5;
}
[b-gamgjy5and] .hero-desk-eyebrow {
font-size: 0.82em;
text-align: center;
margin-bottom: 10px;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: 1.6em;
margin-bottom: 12px;
}
[b-gamgjy5and] .hero-desk-manifest {
font-size: 0.95em;
line-height: 1.5;
text-align: center;
margin-bottom: 24px;
}
[b-gamgjy5and] .hero-desk-subline {
font-size: 1em;
line-height: 1.45;
margin-bottom: 24px;
opacity: 0.9;
}
[b-gamgjy5and] .hero-trust-microcopy {
font-size: 0.8em;
text-align: center;
margin-top: 14px;
width: 100%;
max-width: 300px;
}
[b-gamgjy5and] .hero-cta-group {
gap: 12px;
width: 100%;
align-items: center;
}
[b-gamgjy5and] .btn-hero-gentle-primary {
width: 100%;
max-width: 300px;
text-align: center;
padding: 16px 28px;
}
[b-gamgjy5and] .btn-hero-gentle-secondary {
width: 100%;
max-width: 300px;
text-align: center;
padding: 14px 24px;
background-color: transparent;
border: 1.5px solid rgba(139, 115, 95, 0.4);
box-shadow: none;
}
[b-gamgjy5and] .btn-hero-gentle-secondary:hover {
background-color: rgba(255, 252, 247, 0.6);
}
/* Adjust relationship selector for mobile */
[b-gamgjy5and] .relationship-selector-section {
padding: 30px 15px;
}
[b-gamgjy5and] .relationship-selector-title {
font-size: 1.6em;
margin-bottom: 25px;
}
[b-gamgjy5and] .relationship-icons {
gap: 20px;
justify-content: center;
}
[b-gamgjy5and] .relationship-icon {
min-width: 80px;
padding: 10px;
}
[b-gamgjy5and] .icon-circle {
width: 60px;
height: 60px;
margin-bottom: 10px;
}
[b-gamgjy5and] .icon-circle i {
font-size: 1.5em;
}
[b-gamgjy5and] .icon-label {
font-size: 0.85em;
}
/* Adjust companion section for mobile */
[b-gamgjy5and] .companion-section {
padding: 25px 15px;
}
[b-gamgjy5and] .companion-text {
font-size: 1em;
}
/* Force footer to full width on mobile */
[b-gamgjy5and] .main-footer {
margin-left: 0 !important;
}
[b-gamgjy5and] .large-card-v3 {
flex-direction: column;
}
[b-gamgjy5and] .large-card-v3 .card-img {
width: 100%;
border-radius: 15px 15px 0 0;
margin: 0;
}
[b-gamgjy5and] .large-card-v3 .card-content {
width: auto;
padding: 25px;
}
/* On mobile, sidebar is hidden by default */
[b-gamgjy5and] .sidebar {
transform: translateX(-100%);
}
/* Show sidebar when it has visible class AND we're on small screen */
[b-gamgjy5and] .sidebar.visible {
transform: translateX(0);
}
/* Override the hidden class on mobile - we use transform instead */
[b-gamgjy5and] .sidebar.hidden {
transform: translateX(-100%);
}
[b-gamgjy5and] .toggle-sidebar {
left: 1rem;
z-index: 200;
}
}
/* ======= ULTRA-SMALL MOBILE POLISH (≤640px) ======= */
/* Premium mobile experience for iPhone-sized screens */
@media (max-width: 640px) {
/* Tighter margins for very small screens */
[b-gamgjy5and] .hero-section.hero-desk {
margin: 0 auto;
/* Slightly smaller margins on tiny phones */
}
/* === MOBILE TEXT OVERLAY (inside hero image) - Hidden by default === */
[b-gamgjy5and] .hero-mobile-text-overlay {
display: none;
}
/* === LOGGED-IN WITH LOVED ONES: Text inside image, buttons below === */
/* Show the mobile text overlay inside the image */
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay {
display: block;
position: absolute;
left: 8%;
right: 20px;
top: 10%;
z-index: 1;
text-align: left !important;
}
/* Style the mobile overlay text */
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay .hero-tagline {
font-size: 0.85em;
opacity: 0.85;
margin-bottom: 8px;
font-style: italic;
text-align: left !important;
padding-left: 0;
margin-left: 0;
margin-right: auto;
}
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay .hero-desk-headline {
font-size: 2em;
line-height: 1.1;
margin-bottom: 10px;
color: #4A3728;
text-align: left !important;
margin-left: 0;
margin-right: auto;
/* Force line break after comma for "Välkommen hem, Göran." */
max-width: 310px;
}
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-mobile-text-overlay .hero-desk-subline {
font-size: 0.9em;
line-height: 1.4;
opacity: 0.85;
color: #5A4738;
text-align: left !important;
margin-left: 0;
margin-right: auto;
/* Shorter on mobile - limit width */
max-width: 220px;
}
/* Hide the text (tagline, headline, subline) in hero-text-overlay on mobile for logged-in with loved ones */
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay>.hero-tagline,
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay>.hero-desk-headline,
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay>.hero-desk-subline {
display: none;
}
/* Keep buttons and microcopy visible below the image */
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-text-overlay {
position: relative;
margin-top: -20px;
padding: 0 20px 20px 20px;
z-index: 5;
}
/* Hide last-active caption on mobile (conflicts with overlay) */
[b-gamgjy5and] .hero-logged-in-with-loved-ones .hero-last-active-caption {
display: none;
}
/* === LOGGED-OUT / NO LOVED ONES: Keep text below image === */
/* 1) CTA buttons: Stack vertically, full-width, thumb-friendly */
[b-gamgjy5and] .hero-cta-group {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
width: 100%;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-gentle-secondary,
[b-gamgjy5and] .btn-hero-logged-in-primary {
width: 100%;
max-width: 100%;
padding: 14px 16px;
font-size: 1em;
white-space: nowrap;
/* Prevent ugly text wrapping */
}
/* 2) Default: Pull text up into the gradient fade - for logged-out users */
[b-gamgjy5and] .hero-text-overlay {
margin-top: -24px;
padding-top: 0;
max-width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* Eyebrow scales down on small mobile */
[b-gamgjy5and] .hero-desk-eyebrow {
font-size: 0.78em;
max-width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* 3) Tighter headline line-height for elegance */
[b-gamgjy5and] .hero-desk-headline {
line-height: 1.12;
font-size: 1.5em;
max-width: 420px;
margin-left: auto;
margin-right: auto;
}
/* Manifest constrained on small mobile */
[b-gamgjy5and] .hero-desk-manifest {
max-width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 0.92em;
line-height: 1.45;
}
/* 4) Center and constrain subline width */
[b-gamgjy5and] .hero-desk-subline {
max-width: 420px;
margin-left: auto;
margin-right: auto;
text-align: center;
line-height: 1.4;
}
/* 5) Trust micro-copy constrained width */
[b-gamgjy5and] .hero-trust-microcopy {
max-width: 420px;
margin-left: auto;
margin-right: auto;
font-size: 0.78em;
}
}
@media (max-width: 400px) {
/* Tighter margins for very small screens */
[b-gamgjy5and] .hero-section.hero-desk {
margin: 0 12px;
/* Slightly smaller margins on tiny phones */
}
}
/* Tablet-only tweak: make footer container a bit wider to visually align with content at ~iPad widths */
@media (min-width: 768px) and (max-width: 1024px) {
[b-gamgjy5and] .hero-frame-container {
/* Adjust frame position for mobile - larger and more prominent */
--frame-right: 14%;
--frame-top: 44%;
--frame-width: 10%;
--frame-height: 25%;
}
/* Keep sidebar hidden on tablets while keeping the toggle icon visible */
[b-gamgjy5and] .sidebar {
transform: translateX(-100%);
/* hide off-canvas */
top: 60px;
/* align with mobile top bar if present */
height: calc(100vh - 60px);
}
/* Ensure main content doesn't reserve left margin for hidden sidebar */
[b-gamgjy5and] .container-v3 {
margin-left: 0 !important;
}
/* Keep the desktop toggle button visible on tablets */
[b-gamgjy5and] .toggle-sidebar {
display: inline-grid !important;
left: 1rem;
z-index: 200;
}
/* Footer tablet tweaks (existing) */
[b-gamgjy5and] .main-footer .footer-container {
max-width: 1100px;
width: 100%;
padding: 0 20px;
box-sizing: border-box;
}
[b-gamgjy5and] .main-footer {
overflow-x: hidden;
box-sizing: border-box;
}
}
/* --- Responsive Adjustments for Footer --- */
@media (max-width: 768px) {
[b-gamgjy5and] .footer-nav-links {
/* Stack the columns vertically on mobile */
flex-direction: column;
align-items: center;
/* Center the stacked columns */
gap: 40px;
}
[b-gamgjy5and] .footer-section {
text-align: center;
}
[b-gamgjy5and] .footer-bottom {
/* Stack the language and legal/origin info, with legal/origin last */
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
[b-gamgjy5and] .footer-legal-origin {
text-align: center;
/* Center the text on mobile */
}
[b-gamgjy5and] .footer-copyright {
text-align: center;
}
}
@media (max-width: 768px) {
[b-gamgjy5and] .main-header {
padding: 12px 20px;
}
[b-gamgjy5and] .main-nav {
gap: 10px;
}
[b-gamgjy5and] .main-nav a {
margin-right: 0;
font-size: 0.95em;
}
[b-gamgjy5and] .btn-login {
padding: 6px 14px;
font-size: 0.95em;
}
[b-gamgjy5and] .logo {
font-size: 1.0em;
}
[b-gamgjy5and] .featured-grid-v3 {
grid-template-columns: 1fr;
}
[b-gamgjy5and] .container-v3 {
padding: 0 var(--mobile-page-margin);
margin: 0px auto;
}
[b-gamgjy5and] h2 {
font-size: 1.6em;
}
[b-gamgjy5and] h3 {
font-size: 1.4em;
}
[b-gamgjy5and] .card-placeholder {
display: none;
}
[b-gamgjy5and] .featured-grid-v3.bottom-grid {
grid-template-columns: 1fr;
}
/* Adjust container margin for mobile when header is present */
[b-gamgjy5and] .main-header+* .container-v3 {
margin-top: 80px;
}
}
@media (max-width: 600px) {
[b-gamgjy5and] .hero-frame-container {
--frame-right: 8%;
--frame-top: 44.5%;
--frame-width: 9.5%;
--frame-height: 20%;
}
[b-gamgjy5and] .main-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 12px 20px;
}
[b-gamgjy5and] .main-nav {
flex-direction: row;
gap: 10px;
margin-top: 0;
}
}
@media (max-width: 500px) {
[b-gamgjy5and] .hero-frame-container {
--frame-right: 7%;
--frame-top: 44.5%;
--frame-width: 10.5%;
--frame-height: 20%;
}
}
[b-gamgjy5and] .hero-eyebrow {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.1rem;
color: #E08E2E;
margin: 0 0 10px 0;
letter-spacing: 0.02em;
}
/* ===== Bridge Section - Warm Memories to Timeless Wisdom ===== */
[b-gamgjy5and] .bridge-section {
background: transparent;
padding: 48px 20px;
margin: 48px 0;
border-radius: 0;
}
[b-gamgjy5and] .bridge-content {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
max-width: 700px;
margin: 0 auto;
text-align: center;
}
/* Decorative fading line */
[b-gamgjy5and] .bridge-content::before,
[b-gamgjy5and] .bridge-content::after {
content: '';
flex: 1;
height: 1px;
max-width: 120px;
background: linear-gradient(90deg, transparent, rgba(176, 141, 110, 0.35), transparent);
}
[b-gamgjy5and] .bridge-content::before {
background: linear-gradient(90deg, transparent, rgba(176, 141, 110, 0.35));
}
[b-gamgjy5and] .bridge-content::after {
background: linear-gradient(90deg, rgba(176, 141, 110, 0.35), transparent);
}
[b-gamgjy5and] .bridge-quote-icon {
font-size: 1.8em;
margin: 0 0 12px 0;
opacity: 0.75;
display: block;
}
[b-gamgjy5and] .bridge-quote {
margin: 0;
padding: 0 24px;
border: none;
}
[b-gamgjy5and] .bridge-quote p {
font-family: var(--font-serif);
font-size: 1.2em;
font-style: italic;
color: #5A534C;
line-height: 1.7;
margin: 0;
}
/* ===== Bottom CTA Section - Granny's Reminder ===== */
[b-gamgjy5and] .bottom-cta-section {
background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
padding: 50px 20px;
margin: 50px 0 30px 0;
border-radius: 16px;
}
[b-gamgjy5and] .cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
[b-gamgjy5and] .cta-quote-icon {
font-size: 3em;
margin-bottom: 20px;
opacity: 0.7;
}
[b-gamgjy5and] .cta-quote {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
[b-gamgjy5and] .cta-quote p {
font-family: var(--font-serif);
font-size: 1.4em;
font-style: italic;
color: #4F4A45;
line-height: 1.6;
margin: 0;
}
[b-gamgjy5and] .cta-signature {
font-family: var(--font-serif);
font-size: 1.1em;
color: #666;
font-weight: 600;
}
/* Responsive styles for bridge and CTA sections */
@media (max-width: 768px) {
[b-gamgjy5and] .bridge-section {
padding: 32px 16px;
margin: 32px 0;
}
[b-gamgjy5and] .bridge-content::before,
[b-gamgjy5and] .bridge-content::after {
max-width: 60px;
}
[b-gamgjy5and] .bridge-quote-icon {
font-size: 1.5em;
}
[b-gamgjy5and] .bridge-quote p {
font-size: 1.05em;
}
[b-gamgjy5and] .bottom-cta-section {
padding: 40px 16px;
margin: 40px 12px 20px 0;
}
[b-gamgjy5and] .cta-quote-icon {
font-size: 2.5em;
}
[b-gamgjy5and] .cta-quote p {
font-size: 1.2em;
}
[b-gamgjy5and] .cta-signature {
font-size: 1em;
}
}
/* ===== CINEMATIC SCROLL ANIMATIONS =====
Creates a warm, "Farmor guiding you through memories" feeling
with soft fade-ins and gentle hover effects */
/* Keyframes for scroll-triggered animations */
@keyframes fadeInUp-b-gamgjy5and {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInScale-b-gamgjy5and {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes gentlePulse-b-gamgjy5and {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
/* Content is visible by default. JavaScript opts the page into animation only
after the observer is ready, so an interop failure never hides content. */
[b-gamgjy5and] .animate-on-scroll {
opacity: 1;
transform: none;
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[b-gamgjy5and] .front-page-root.scroll-animations-ready .animate-on-scroll:not(.animate-in) {
opacity: 0;
transform: translateY(30px);
}
/* Triggered state - element becomes visible */
[b-gamgjy5and] .animate-on-scroll.animate-in {
opacity: 1;
transform: translateY(0);
}
/* Specific animation for quote/bridge sections - fade with scale */
[b-gamgjy5and] .front-page-root.scroll-animations-ready .animate-on-scroll.animate-quote:not(.animate-in) {
transform: scale(0.95);
}
[b-gamgjy5and] .animate-on-scroll.animate-quote.animate-in {
transform: scale(1);
}
/* Staggered animation delays for cards */
[b-gamgjy5and] .animate-on-scroll[data-stagger="0"] {
transition-delay: 0s;
}
[b-gamgjy5and] .animate-on-scroll[data-stagger="1"] {
transition-delay: 0.1s;
}
[b-gamgjy5and] .animate-on-scroll[data-stagger="2"] {
transition-delay: 0.2s;
}
[b-gamgjy5and] .animate-on-scroll[data-stagger="3"] {
transition-delay: 0.3s;
}
[b-gamgjy5and] .animate-on-scroll[data-stagger="4"] {
transition-delay: 0.4s;
}
[b-gamgjy5and] .animate-on-scroll[data-stagger="5"] {
transition-delay: 0.5s;
}
[b-gamgjy5and] .animate-on-scroll[data-stagger="6"] {
transition-delay: 0.6s;
}
/* Gentle hover zoom for card images - "looking closer at a memory" */
[b-gamgjy5and] .card-family-theme .card-img {
transition: transform 0.4s ease-out;
}
[b-gamgjy5and] .card-family-theme:hover .card-img {
transform: scale(1.05);
}
/* Gentle background zoom on hover for theme cards */
[b-gamgjy5and] .card-featured-v3 {
overflow: hidden;
}
[b-gamgjy5and] .card-featured-v3 .card-img {
transition: transform 0.5s ease-out;
}
[b-gamgjy5and] .card-featured-v3:hover .card-img {
transform: scale(1.08);
}
/* Subtle lift effect for relationship icons */
[b-gamgjy5and] .relationship-icon {
transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}
[b-gamgjy5and] .relationship-icon:hover {
transform: translateY(-5px);
}
[b-gamgjy5and] .relationship-icon:hover .icon-circle {
box-shadow: 0 8px 25px rgba(123, 90, 83, 0.2);
}
/* Emoji icons gentle pulse on section entry */
[b-gamgjy5and] .bridge-quote-icon,
[b-gamgjy5and] .cta-quote-icon {
display: inline-block;
}
[b-gamgjy5and] .animate-in .bridge-quote-icon,
[b-gamgjy5and] .animate-in .cta-quote-icon {
animation: gentlePulse-b-gamgjy5and 2s ease-in-out 0.5s 1;
}
/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
[b-gamgjy5and] .animate-on-scroll {
opacity: 1;
transform: none;
transition: none;
}
[b-gamgjy5and] .animate-on-scroll.animate-in {
animation: none;
}
[b-gamgjy5and] .card-family-theme .card-img,
[b-gamgjy5and] .card-featured-v3 .card-img {
transition: none;
}
[b-gamgjy5and] .card-family-theme:hover .card-img,
[b-gamgjy5and] .card-featured-v3:hover .card-img {
transform: none;
}
[b-gamgjy5and] .relationship-icon {
transition: none;
}
[b-gamgjy5and] .relationship-icon:hover {
transform: none;
}
[b-gamgjy5and] .animate-in .bridge-quote-icon,
[b-gamgjy5and] .animate-in .cta-quote-icon {
animation: none;
}
}
/* ===== HERO FAVORITES ROW ("Dina närmaste" inside Hero) =====
Design Philosophy: These are miniature portraits lying on the desk,
not floating UI elements. Light comes from the candle (right side),
so shadows fall to the left. Frame colors match the photo frame.
*/
.hero-favorites-row[b-gamgjy5and] {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
padding: 0;
/* No background - let them rest on the desk */
background: transparent;
}
.hero-favorites-label[b-gamgjy5and] {
font-size: 0.85rem;
font-weight: 400;
color: #5C4A3A;
white-space: nowrap;
/* Elegant serif for that handwritten feel */
font-family: var(--font-serif);
font-style: italic;
letter-spacing: 0.03em;
text-shadow: 0 1px 2px rgba(255, 248, 240, 0.6);
}
.hero-favorites-avatars[b-gamgjy5and] {
display: flex;
gap: 0.75rem;
align-items: center;
}
.hero-favorite-avatar[b-gamgjy5and] {
width: 44px;
height: 44px;
border-radius: 50%;
cursor: pointer;
/* Locket frame: warm gold outer + antique white inner ring */
border: 2.5px solid #C9A86C;
box-shadow:
/* Inner antique white ring for locket effect */
inset 0 0 0 2px rgba(255, 248, 240, 0.5),
/* Shadow falling left (candlelight from right) - stronger */
-4px 4px 10px rgba(30, 20, 10, 0.5),
/* Secondary ambient shadow */
-2px 2px 4px rgba(50, 35, 20, 0.3);
background: #FFF8F2;
padding: 0;
overflow: hidden;
transition: all 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
/* Slight sepia filter for antique feel */
filter: sepia(8%) saturate(95%);
}
.hero-favorite-avatar:hover[b-gamgjy5and] {
transform: scale(1.12) translateY(-2px);
border-color: #D4AF7F;
box-shadow:
/* Inner antique white ring */
inset 0 0 0 2px rgba(255, 248, 240, 0.6),
/* Strong shadow falling left */
-5px 5px 14px rgba(30, 20, 10, 0.55),
-3px 3px 6px rgba(50, 35, 20, 0.35),
/* Warm glow from candlelight */
0 0 14px rgba(255, 200, 140, 0.35);
filter: sepia(0%) saturate(100%);
}
.hero-favorite-avatar img[b-gamgjy5and] {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
/* Soft "+" button - like a little coin or button on the desk */
.hero-favorite-avatar.add-avatar[b-gamgjy5and] {
/* Paper/parchment fill - matches the book pages */
background: rgba(250, 240, 225, 0.85);
/* Soft solid border instead of harsh dashed */
border: 2px solid rgba(180, 160, 130, 0.5);
box-shadow:
/* Inner subtle highlight */
inset 0 1px 2px rgba(255, 255, 255, 0.4),
/* Shadow falling left like the portraits */
-3px 3px 8px rgba(30, 20, 10, 0.35),
-1px 1px 3px rgba(50, 35, 20, 0.2);
filter: none;
}
.hero-favorite-avatar.add-avatar:hover[b-gamgjy5and] {
background: rgba(255, 248, 240, 0.95);
border-color: rgba(160, 140, 110, 0.6);
transform: scale(1.08);
box-shadow:
inset 0 1px 3px rgba(255, 255, 255, 0.5),
-4px 4px 10px rgba(30, 20, 10, 0.4),
-2px 2px 4px rgba(50, 35, 20, 0.25);
}
.hero-favorite-avatar .add-icon[b-gamgjy5and] {
/* Warm brown ink - like fountain pen on parchment */
font-size: 1.3rem;
color: #7A6550;
font-weight: 400;
font-family: var(--font-serif);
text-shadow: 0 1px 1px rgba(255, 248, 240, 0.3);
}
.hero-favorite-avatar.add-avatar:hover .add-icon[b-gamgjy5and] {
color: #5C4A3A;
}
.hero-favorite-avatar-loading[b-gamgjy5and] {
pointer-events: none;
background: rgba(135, 98, 70, 0.12);
border-color: rgba(180, 160, 130, 0.24);
box-shadow: inset 0 0 0 2px rgba(255, 248, 240, 0.35);
filter: none;
position: relative;
overflow: hidden;
}
.hero-favorite-avatar-loading[b-gamgjy5and]::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 250, 242, 0.65), transparent);
animation: favoriteThemeLoadingShimmer-b-gamgjy5and 1.35s ease-in-out infinite;
}
.mobile-recent-themes-section[b-gamgjy5and] {
width: 100%;
max-width: 1060px;
margin: 0 auto 1.25rem auto;
padding: 0 32px;
box-sizing: border-box;
}
.mobile-recent-themes-section .hero-favorites-row[b-gamgjy5and] {
margin-top: 0;
}
@media (max-width: 768px) {
.hero-favorites-row[b-gamgjy5and] {
margin-top: 1.25rem;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: flex-start;
}
.hero-favorites-label[b-gamgjy5and] {
font-size: 0.8rem;
}
.hero-favorite-avatar[b-gamgjy5and] {
width: 38px;
height: 38px;
border-width: 2px;
box-shadow:
inset 0 0 0 1.5px rgba(255, 248, 240, 0.45),
-3px 3px 7px rgba(30, 20, 10, 0.45),
-1px 1px 3px rgba(50, 35, 20, 0.25);
}
.hero-favorites-avatars[b-gamgjy5and] {
gap: 0.6rem;
}
.hero-favorite-avatar .add-icon[b-gamgjy5and] {
font-size: 1.1rem;
}
.mobile-recent-themes-section[b-gamgjy5and] {
max-width: 430px;
margin-top: -0.15rem;
margin-bottom: 1.25rem;
padding: 0 18px;
}
.mobile-recent-themes-section .hero-favorites-row[b-gamgjy5and] {
justify-content: flex-start;
margin-top: 0;
}
}
/* ===== LEGACY FAVORITES SECTION (kept for backward compatibility) ===== */
.favorites-section[b-gamgjy5and] {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 1.5rem 2rem;
background: linear-gradient(135deg, #FFF9F5 0%, #FAF3ED 100%);
border-radius: 20px;
margin-bottom: 2rem;
box-shadow: 0 4px 16px rgba(180, 140, 120, 0.08);
border: 1px solid rgba(232, 213, 200, 0.4);
}
@media (max-width: 768px) {
.favorites-section[b-gamgjy5and] {
padding: 1rem 1.25rem;
margin: 0 0.5rem 1.5rem 0.5rem;
border-radius: 16px;
}
}
.favorite-themes-section[b-gamgjy5and] {
width: 100%;
max-width: 1060px;
margin: 1.5rem auto 18px auto;
padding: 0 32px;
box-sizing: border-box;
}
.favorite-themes-section-header[b-gamgjy5and] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 18px;
}
.favorite-themes-section-header h2[b-gamgjy5and] {
margin: 0;
color: #4C362B;
font-family: var(--font-serif);
font-size: clamp(1.75rem, 2.7vw, 2.45rem);
font-weight: 650;
line-height: 1.08;
letter-spacing: 0;
}
.favorite-themes-section-header p[b-gamgjy5and] {
max-width: 620px;
margin: 8px 0 0 0;
color: #786654;
font-size: 0.98rem;
line-height: 1.55;
}
.favorite-themes-section-link[b-gamgjy5and] {
flex: 0 0 auto;
color: #805B3E;
font-family: var(--font-serif);
font-size: 0.98rem;
font-weight: 650;
text-decoration: none;
border-bottom: 1px solid rgba(128, 91, 62, 0.35);
padding-bottom: 2px;
}
.favorite-themes-section-link:hover[b-gamgjy5and] {
color: #5C3E2F;
border-color: rgba(92, 62, 47, 0.72);
}
.favorite-themes-card-grid[b-gamgjy5and] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
.favorite-theme-card[b-gamgjy5and] {
appearance: none;
display: grid;
align-items: stretch;
grid-template-columns: 112px minmax(0, 1fr);
min-height: 138px;
padding: 0;
overflow: hidden;
text-align: left;
border: 1px solid rgba(214, 184, 157, 0.72);
border-radius: 8px;
background: rgba(255, 250, 244, 0.78);
box-shadow: 0 14px 32px rgba(103, 73, 49, 0.08);
color: inherit;
cursor: pointer;
font: inherit;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.favorite-theme-card.animate-on-scroll[b-gamgjy5and] {
opacity: 1;
transform: none;
}
.favorite-theme-card-loading[b-gamgjy5and] {
pointer-events: none;
}
.favorite-theme-card-loading .favorite-theme-card-image[b-gamgjy5and],
.favorite-theme-card-loading .favorite-theme-card-persona[b-gamgjy5and],
.favorite-theme-card-loading .favorite-theme-card-title[b-gamgjy5and],
.favorite-theme-card-loading .favorite-theme-card-description[b-gamgjy5and],
.favorite-theme-card-loading .favorite-theme-card-action[b-gamgjy5and] {
position: relative;
overflow: hidden;
border-radius: 8px;
background: rgba(135, 98, 70, 0.12);
color: transparent;
}
.favorite-theme-card-loading .favorite-theme-card-image[b-gamgjy5and] {
display: block;
}
.favorite-theme-card-loading .favorite-theme-card-image[b-gamgjy5and]::after,
.favorite-theme-card-loading .favorite-theme-card-persona[b-gamgjy5and]::after,
.favorite-theme-card-loading .favorite-theme-card-title[b-gamgjy5and]::after,
.favorite-theme-card-loading .favorite-theme-card-description[b-gamgjy5and]::after,
.favorite-theme-card-loading .favorite-theme-card-action[b-gamgjy5and]::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(90deg, transparent, rgba(255, 250, 242, 0.65), transparent);
animation: favoriteThemeLoadingShimmer-b-gamgjy5and 1.35s ease-in-out infinite;
}
.favorite-theme-card-loading .favorite-theme-card-persona[b-gamgjy5and] {
width: 45%;
height: 0.85rem;
}
.favorite-theme-card-loading .favorite-theme-card-title[b-gamgjy5and] {
width: 85%;
height: 1.35rem;
}
.favorite-theme-card-loading .favorite-theme-card-description[b-gamgjy5and] {
width: 70%;
height: 1rem;
}
.favorite-theme-card-loading .favorite-theme-card-action[b-gamgjy5and] {
width: 42%;
height: 0.95rem;
margin-top: auto;
}
@keyframes favoriteThemeLoadingShimmer-b-gamgjy5and {
to {
transform: translateX(100%);
}
}
.favorite-theme-card:hover[b-gamgjy5and],
.favorite-theme-card:focus-visible[b-gamgjy5and] {
transform: translateY(-2px);
border-color: rgba(190, 148, 104, 0.9);
box-shadow: 0 18px 38px rgba(103, 73, 49, 0.13);
outline: none;
}
.favorite-theme-card-image[b-gamgjy5and] {
width: 100%;
height: 100%;
min-height: 138px;
object-fit: cover;
filter: sepia(5%) saturate(96%);
}
.favorite-theme-card-body[b-gamgjy5and] {
min-width: 0;
height: 100%;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 7px;
padding: 16px;
}
.favorite-theme-card-persona[b-gamgjy5and] {
display: block;
overflow: hidden;
color: #9a6a4a;
font-family: var(--font-sans);
font-size: 0.75rem;
font-weight: 650;
line-height: 1.2;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.favorite-theme-card-body strong[b-gamgjy5and] {
display: -webkit-box;
overflow: hidden;
color: #4A352B;
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 650;
line-height: 1.16;
letter-spacing: 0;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.favorite-theme-card-description[b-gamgjy5and] {
display: -webkit-box;
overflow: hidden;
color: #6E5E4E;
font-size: 0.86rem;
line-height: 1.42;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.favorite-theme-card-action[b-gamgjy5and] {
width: fit-content;
margin-top: auto;
color: #8C5E3F;
font-family: var(--font-serif);
font-size: 0.84rem;
font-weight: 700;
}
.favorite-theme-card:hover .favorite-theme-card-action[b-gamgjy5and],
.favorite-theme-card:focus-visible .favorite-theme-card-action[b-gamgjy5and] {
color: #6F432B;
}
@media (max-width: 980px) {
.favorite-themes-card-grid[b-gamgjy5and] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.favorite-themes-section[b-gamgjy5and] {
margin: 1rem auto 10px auto;
padding: 0 18px;
}
.favorite-themes-section-header[b-gamgjy5and] {
align-items: flex-start;
flex-direction: column;
gap: 10px;
margin-bottom: 14px;
}
.favorite-themes-section-header h2[b-gamgjy5and] {
font-size: 1.72rem;
}
.favorite-themes-section-header p[b-gamgjy5and] {
font-size: 0.92rem;
}
.favorite-themes-card-grid[b-gamgjy5and] {
grid-template-columns: 1fr;
gap: 12px;
}
.favorite-theme-card[b-gamgjy5and] {
grid-template-columns: 104px minmax(0, 1fr);
min-height: 124px;
}
.favorite-theme-card-image[b-gamgjy5and] {
min-height: 124px;
}
.favorite-theme-card-body[b-gamgjy5and] {
padding: 13px 14px;
}
.favorite-theme-card-body strong[b-gamgjy5and] {
font-size: 1.04rem;
}
}
/* ===== GRANNY'S WISDOM STRIP - "In The Room" ===== */
/* She's part of the world - no box, no divider, just presence */
/* Inspired by GrannysCorner hero layout */
.wisdom-strip[b-gamgjy5and] {
width: 100%;
max-width: 950px;
margin: 0 auto 50px auto;
padding: 0 32px;
box-sizing: border-box;
}
.wisdom-strip-inner[b-gamgjy5and] {
display: flex;
align-items: center;
/* Vertically center Granny and text */
gap: 44px;
padding: 20px 0 30px 0;
/* NO BACKGROUND - transparent, part of the world */
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
position: relative;
overflow: visible;
}
/* Granny Illustration - BIG like GrannysCorner (320px) */
.wisdom-granny-container[b-gamgjy5and] {
flex-shrink: 0;
position: relative;
width: 280px;
z-index: 2;
}
.wisdom-granny-image[b-gamgjy5and] {
width: 280px;
height: auto;
filter: drop-shadow(0 8px 28px rgba(70, 45, 25, 0.16)) drop-shadow(0 0 20px rgba(255, 220, 180, 0.25));
/* Warm candlelight glow */
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.wisdom-strip-inner:hover .wisdom-granny-image[b-gamgjy5and] {
transform: scale(1.025) translateY(-4px);
filter: drop-shadow(0 10px 32px rgba(70, 45, 25, 0.2)) drop-shadow(0 0 28px rgba(255, 220, 180, 0.35));
/* Stronger glow on hover */
}
/* The Wisdom Text - Side by side, left-aligned, with paper note effect */
.wisdom-text-container[b-gamgjy5and] {
flex: 1;
min-width: 0;
/* Allow text to shrink properly */
/* padding: 24px 28px 20px 28px; */
/* Paper note effect */
/* background: rgba(255, 252, 248, 0.92);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 16px;
border: 1px solid rgba(220, 200, 175, 0.3);
box-shadow:
0 2px 12px rgba(140, 110, 80, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.7); */
}
.wisdom-headline[b-gamgjy5and] {
font-family: var(--font-serif) !important;
font-size: 2.2em;
font-weight: 600;
font-style: italic;
color: #3D2E1E;
margin: 0 0 20px 0;
line-height: 1.25;
letter-spacing: -0.01em;
}
.wisdom-body[b-gamgjy5and] {
font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
font-size: 1.1em;
font-weight: 400;
color: #5A4A3A;
line-height: 1.8;
margin: 0 0 16px 0;
max-width: 540px;
}
/* Soft CTA - gentle button, not a shout */
.wisdom-soft-link[b-gamgjy5and] {
display: inline-block;
font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
font-size: 0.95em;
font-weight: 500;
color: #6A5A4A;
text-decoration: none;
cursor: pointer;
padding: 10px 22px;
border: 1.5px solid rgba(140, 110, 80, 0.35);
border-radius: 24px;
background: rgba(255, 250, 245, 0.5);
transition: all 0.25s ease;
margin-top: 4px;
}
.wisdom-soft-link:hover[b-gamgjy5and] {
color: #4A3A2A;
border-color: rgba(140, 110, 80, 0.55);
background: rgba(255, 248, 240, 0.8);
box-shadow: 0 2px 8px rgba(140, 110, 80, 0.1);
transform: translateY(-1px);
}
/* Microcopy - whisper of comfort */
.wisdom-microcopy[b-gamgjy5and] {
font-family: 'Inter', 'Roboto', 'Lato', sans-serif;
font-size: 0.82em;
font-style: italic;
color: #9A8A7A;
margin: 14px 0 0 0;
letter-spacing: 0.01em;
}
/* ===== WISDOM STRIP RESPONSIVE ===== */
/* Tablet */
@media (max-width: 1024px) {
.wisdom-strip[b-gamgjy5and] {
max-width: 820px;
margin: 0 auto 40px auto;
padding: 0 28px;
}
.wisdom-strip-inner[b-gamgjy5and] {
gap: 36px;
padding: 16px 0 24px 0;
}
.wisdom-granny-container[b-gamgjy5and] {
width: 240px;
}
.wisdom-granny-image[b-gamgjy5and] {
width: 240px;
}
.wisdom-headline[b-gamgjy5and] {
font-size: 1.9em;
}
.wisdom-body[b-gamgjy5and] {
font-size: 1.05em;
}
}
/* Mobile - Stack vertically, LEFT-ALIGNED for readability */
@media (max-width: 768px) {
.wisdom-strip[b-gamgjy5and] {
width: auto;
max-width: none;
margin: 0 20px 36px 20px;
padding: 0;
}
.wisdom-strip-inner[b-gamgjy5and] {
flex-direction: column;
align-items: flex-start;
/* Left-aligned, not centered */
text-align: left;
gap: 16px;
padding: 16px 0 20px 0;
}
.wisdom-granny-container[b-gamgjy5and] {
width: 180px;
align-self: center;
/* Only Granny is centered */
}
.wisdom-granny-image[b-gamgjy5and] {
width: 180px;
}
.wisdom-text-container[b-gamgjy5and] {
padding-top: 0;
/* padding: 0 4px; */
max-width: 400px;
}
.wisdom-headline[b-gamgjy5and] {
font-size: 1.5em;
margin-bottom: 14px;
text-align: center;
/* Headline centered */
width: 100%;
}
.wisdom-body[b-gamgjy5and] {
font-size: 1em;
line-height: 1.75;
max-width: none;
padding: 0;
text-align: center;
/* Body left-aligned for readability */
}
.wisdom-soft-link[b-gamgjy5and] {
display: block;
text-align: center;
margin: 8px auto 0 auto;
width: fit-content;
}
.wisdom-microcopy[b-gamgjy5and] {
text-align: center;
width: 100%;
}
}
/* Small Mobile */
@media (max-width: 480px) {
.wisdom-strip[b-gamgjy5and] {
width: auto;
margin: 0 16px 28px 16px;
}
.wisdom-strip-inner[b-gamgjy5and] {
padding: 12px 0 16px 0;
gap: 14px;
}
.wisdom-granny-container[b-gamgjy5and] {
width: 160px;
}
.wisdom-granny-image[b-gamgjy5and] {
width: 160px;
}
.wisdom-headline[b-gamgjy5and] {
font-size: 1.35em;
}
.wisdom-body[b-gamgjy5and] {
font-size: 0.95em;
text-align: center;
}
}
/* ============================================
Frontpage refinement: LovOne identity, Stitch discipline.
Keep the candlelit room, reduce competing chrome, and let each section
have one clear job.
============================================ */
[b-gamgjy5and] .container-v3 {
gap: clamp(46px, 5vw, 72px);
}
[b-gamgjy5and] .hero-section.hero-desk {
max-width: 1160px;
margin: 0 auto 2px auto;
border: 1px solid rgba(120, 88, 60, 0.11);
box-shadow: 0 18px 46px rgba(120, 88, 60, 0.08);
}
[b-gamgjy5and] .hero-text-overlay {
top: 38%;
max-width: min(520px, 45%);
}
[b-gamgjy5and] .hero-desk-headline {
max-width: 520px;
margin-bottom: 16px;
letter-spacing: 0;
}
[b-gamgjy5and] .hero-desk-subline,
[b-gamgjy5and] .hero-desk-manifest {
max-width: 470px;
margin-bottom: 20px;
}
[b-gamgjy5and] .hero-cta-group {
gap: 10px;
}
[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-logged-in-primary {
padding: 13px 26px;
background: linear-gradient(135deg, #F7C897 0%, #D58D4F 100%);
border-color: rgba(172, 104, 52, 0.26);
color: #3F2E23;
box-shadow: 0 8px 20px rgba(180, 112, 56, 0.16);
}
[b-gamgjy5and] .btn-hero-gentle-primary:hover,
[b-gamgjy5and] .btn-hero-logged-in-primary:hover {
background: linear-gradient(135deg, #F9D1A6 0%, #C97C3A 100%);
box-shadow: 0 12px 26px rgba(180, 112, 56, 0.22);
}
[b-gamgjy5and] .btn-hero-gentle-secondary {
padding: 12px 22px;
background: rgba(255, 252, 247, 0.62);
border-color: rgba(111, 78, 55, 0.22);
color: #5A4A3A;
box-shadow: none;
}
[b-gamgjy5and] .hero-tertiary-link {
margin-top: 10px;
font-size: 0.86rem;
color: #6F5E4D;
}
[b-gamgjy5and] .hero-trust-microcopy {
max-width: 440px;
margin-top: 7px;
font-size: 0.78rem;
color: #7B6A57;
}
[b-gamgjy5and] .hero-floating-note {
width: clamp(168px, 16vw, 218px);
padding: 18px 18px 15px 18px;
box-shadow: 0 12px 28px rgba(120, 88, 60, 0.14), 0 2px 6px rgba(120, 88, 60, 0.08);
}
[b-gamgjy5and] .hero-floating-note-text {
font-size: 1.14rem;
line-height: 1.28;
}
.hero-favorites-row[b-gamgjy5and] {
margin-top: 0.9rem;
gap: 0.75rem;
}
.hero-favorites-label[b-gamgjy5and] {
letter-spacing: 0;
}
.hero-favorites-avatars[b-gamgjy5and] {
gap: 0.45rem;
}
.hero-favorite-avatar[b-gamgjy5and] {
width: 38px;
height: 38px;
box-shadow:
inset 0 0 0 1.5px rgba(255, 248, 240, 0.45),
-2px 3px 7px rgba(30, 20, 10, 0.34);
}
.wisdom-strip[b-gamgjy5and] {
max-width: 860px;
margin-bottom: 30px;
}
.wisdom-strip-inner[b-gamgjy5and] {
gap: 34px;
padding: 4px 0 8px 0;
}
.wisdom-granny-container[b-gamgjy5and],
.wisdom-granny-image[b-gamgjy5and] {
width: 220px;
}
.wisdom-headline[b-gamgjy5and] {
font-size: clamp(1.65rem, 2.3vw, 2rem);
margin-bottom: 12px;
letter-spacing: 0;
}
.wisdom-body[b-gamgjy5and] {
max-width: 520px;
font-size: 1.02rem;
line-height: 1.72;
}
.wisdom-soft-link[b-gamgjy5and] {
padding: 9px 18px;
}
[b-gamgjy5and] .theme-showcase-section,
.oracle-section[b-gamgjy5and],
.family-theme-section[b-gamgjy5and] {
max-width: 1120px;
width: 100%;
margin-left: auto;
margin-right: auto;
box-shadow: 0 14px 38px rgba(120, 88, 60, 0.075);
}
[b-gamgjy5and] .theme-showcase-section {
padding: clamp(28px, 4vw, 42px);
}
[b-gamgjy5and] .showcase-header {
max-width: 700px;
margin: 0 auto 30px auto;
}
[b-gamgjy5and] .showcase-main-headline {
font-family: var(--font-serif) !important;
font-size: clamp(1.55rem, 2.3vw, 2rem);
font-weight: 650;
letter-spacing: 0;
}
[b-gamgjy5and] .showcase-subtitle {
color: #6B5E52;
font-size: 1rem;
}
[b-gamgjy5and] .showcase-content {
grid-template-areas:
"for-you featured-top"
"featured-bottom featured-top";
grid-template-columns: minmax(0, 1.02fr) minmax(0, 1.18fr);
gap: 24px;
align-items: start;
}
[b-gamgjy5and] .large-card-v3,
[b-gamgjy5and] .card-featured-v3,
.card-family-theme[b-gamgjy5and] {
background: rgba(255, 253, 248, 0.82);
border: 1px solid rgba(120, 88, 60, 0.10);
box-shadow: 0 4px 14px rgba(120, 88, 60, 0.045);
}
[b-gamgjy5and] .large-card-v3 {
min-height: 286px;
}
[b-gamgjy5and] .large-card-v3 .card-img {
width: 48%;
min-height: 250px;
margin: 10px;
border-radius: 14px;
}
[b-gamgjy5and] .large-card-v3 .card-content {
width: 52%;
padding: 24px 24px 24px 12px;
}
[b-gamgjy5and] .large-card-v3 h3,
[b-gamgjy5and] .card-featured-v3 h4 {
font-family: var(--font-serif) !important;
color: #3F3027;
letter-spacing: 0;
}
[b-gamgjy5and] .featured-grid-v3 {
gap: 18px;
}
[b-gamgjy5and] .featured-grid-v3.bottom-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[b-gamgjy5and] .card-featured-v3 .card-img {
aspect-ratio: 16 / 10;
}
[b-gamgjy5and] .card-featured-v3 .card-content {
padding: 17px 18px 18px 18px;
}
[b-gamgjy5and] .card-featured-v3 p {
font-size: 0.95rem;
line-height: 1.5;
}
[b-gamgjy5and] .card-featured-v3 .btn-secondary,
.card-family-theme .btn-secondary[b-gamgjy5and] {
padding: 8px 15px;
font-size: 0.86rem;
background: rgba(245, 221, 195, 0.76);
border-color: rgba(120, 88, 60, 0.14);
}
[b-gamgjy5and] .showcase-explore-more {
margin-top: 20px;
}
.oracle-section[b-gamgjy5and] {
padding: clamp(34px, 4vw, 46px);
}
.oracle-section-inner[b-gamgjy5and] {
gap: 36px;
}
.oracle-headline[b-gamgjy5and] {
font-size: clamp(1.7rem, 3vw, 2.1rem);
letter-spacing: 0;
}
.oracle-body[b-gamgjy5and] {
max-width: 500px;
}
.family-theme-section[b-gamgjy5and] {
padding: 30px 34px;
}
.family-theme-headline[b-gamgjy5and],
[b-gamgjy5and] .relationship-selector-title {
font-family: var(--font-serif) !important;
letter-spacing: 0;
color: #3F3027;
}
.family-theme-grid[b-gamgjy5and] {
gap: 18px;
}
.card-family-theme[b-gamgjy5and] {
width: auto;
min-width: 0;
max-width: none;
min-height: 0;
}
.card-family-theme .card-content[b-gamgjy5and] {
padding: 18px 16px;
}
.card-family-theme p[b-gamgjy5and] {
font-size: 0.95rem;
line-height: 1.5;
}
[b-gamgjy5and] .relationship-selector-section {
max-width: 860px;
margin: -6px auto 4px auto;
padding: 22px 20px 10px 20px;
}
[b-gamgjy5and] .relationship-selector-title {
font-size: clamp(1.35rem, 2vw, 1.65rem);
margin-bottom: 20px;
}
[b-gamgjy5and] .relationship-icons {
gap: 18px;
}
[b-gamgjy5and] .relationship-icon {
min-width: 88px;
padding: 10px;
}
[b-gamgjy5and] .icon-circle {
width: 62px;
height: 62px;
margin-bottom: 10px;
box-shadow: 0 5px 14px rgba(191, 129, 74, 0.22);
}
[b-gamgjy5and] .icon-circle i {
font-size: 1.45em;
}
[b-gamgjy5and] .icon-label {
font-size: 0.88rem;
}
[b-gamgjy5and] .bottom-cta-section {
max-width: 960px;
width: 100%;
margin: 18px auto 10px auto;
padding: 38px 20px;
border: 1px solid rgba(120, 88, 60, 0.08);
}
[b-gamgjy5and] .cta-quote-icon,
[b-gamgjy5and] .bridge-quote-icon {
opacity: 0.55;
}
@media (max-width: 1100px) {
[b-gamgjy5and] .showcase-content {
grid-template-areas:
"for-you"
"featured-top"
"featured-bottom";
grid-template-columns: 1fr;
}
[b-gamgjy5and] .featured-grid-v3,
[b-gamgjy5and] .featured-grid-v3.bottom-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 1024px) {
[b-gamgjy5and] .hero-text-overlay {
position: relative;
left: auto;
top: auto;
bottom: auto;
transform: none;
max-width: 54%;
}
.wisdom-strip[b-gamgjy5and] {
max-width: 760px;
}
.wisdom-granny-container[b-gamgjy5and],
.wisdom-granny-image[b-gamgjy5and] {
width: 190px;
}
.family-theme-grid[b-gamgjy5and] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and] {
width: 100% !important;
max-width: 100vw !important;
min-width: 0 !important;
overflow-x: hidden !important;
box-sizing: border-box;
}
[b-gamgjy5and] .container-v3 {
gap: 38px;
}
[b-gamgjy5and] main.container-v3,
[b-gamgjy5and] .container-v3 {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: var(--mobile-page-margin, 16px) !important;
padding-right: var(--mobile-page-margin, 16px) !important;
box-sizing: border-box;
overflow-x: clip;
}
[b-gamgjy5and] .hero-section.hero-desk,
.wisdom-strip[b-gamgjy5and],
[b-gamgjy5and] .theme-showcase-section,
.oracle-section[b-gamgjy5and],
.family-theme-section[b-gamgjy5and],
[b-gamgjy5and] .relationship-selector-section,
[b-gamgjy5and] .bottom-cta-section {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box;
}
[b-gamgjy5and] .hero-section.hero-desk {
border-radius: 18px;
box-shadow: 0 10px 28px rgba(120, 88, 60, 0.08);
}
[b-gamgjy5and] .hero-text-overlay {
max-width: none;
}
.wisdom-strip[b-gamgjy5and] {
margin-bottom: 22px;
}
.wisdom-strip-inner[b-gamgjy5and] {
gap: 12px;
}
.wisdom-granny-container[b-gamgjy5and],
.wisdom-granny-image[b-gamgjy5and] {
width: 152px;
}
.wisdom-body[b-gamgjy5and] {
line-height: 1.62;
}
[b-gamgjy5and] .theme-showcase-section,
.oracle-section[b-gamgjy5and],
.family-theme-section[b-gamgjy5and] {
padding: 24px 18px;
}
[b-gamgjy5and] .large-card-v3 {
flex-direction: column;
}
[b-gamgjy5and] .theme-showcase-section .card,
[b-gamgjy5and] .large-card-v3,
[b-gamgjy5and] .card-featured-v3,
.card-family-theme[b-gamgjy5and] {
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
box-sizing: border-box;
}
[b-gamgjy5and] .large-card-v3 .card-img,
[b-gamgjy5and] .large-card-v3 .card-content,
[b-gamgjy5and] .card-featured-v3 .card-img,
[b-gamgjy5and] .card-featured-v3 .card-content {
width: auto;
max-width: 100%;
box-sizing: border-box;
}
[b-gamgjy5and] .large-card-v3 .card-img {
min-height: 0;
aspect-ratio: 16 / 10;
margin: 10px 10px 0 10px;
}
[b-gamgjy5and] .card-featured-v3 .card-img {
width: 100% !important;
height: auto;
max-height: 210px;
}
[b-gamgjy5and] .large-card-v3 .card-content {
padding: 18px;
}
[b-gamgjy5and] .featured-grid-v3,
[b-gamgjy5and] .featured-grid-v3.bottom-grid,
.family-theme-grid[b-gamgjy5and] {
grid-template-columns: 1fr;
}
[b-gamgjy5and] .relationship-icons {
gap: 12px;
}
[b-gamgjy5and] .relationship-icon {
min-width: 78px;
}
}
/* ============================================
Frontpage refinement pass 2: make the difference visible.
This pass keeps the LovOne room, but gives the page a stronger poster-like
opening and a clearer editorial rhythm below.
============================================ */
@media (min-width: 1025px) {
[b-gamgjy5and] .container-v3 {
width: 100%;
max-width: min(1200px, calc(100vw - 280px));
gap: 76px;
}
[b-gamgjy5and] .container-v3.sidebar-hidden {
width: 100%;
max-width: 1200px;
}
[b-gamgjy5and] .hero-section.hero-desk {
width: 100%;
max-width: 1160px;
min-height: auto;
border-radius: 20px;
box-shadow: 0 24px 70px rgba(120, 88, 60, 0.12);
}
[b-gamgjy5and] .hero-frame-container {
/* Keep the original 16:9 artwork coordinates from feature/shared-page. */
--frame-right: 14%;
--frame-top: 46%;
--frame-width: 10%;
--frame-height: 20%;
--frame-image-x: 50%;
--frame-image-y: 50%;
--frame-image-scale: 1.04;
}
[b-gamgjy5and] .hero-frame-container.frame-has-loved,
[b-gamgjy5and] .hero-frame-container.frame-soft-glow {
padding: 0;
background: transparent;
box-sizing: border-box;
}
[b-gamgjy5and] .hero-frame-container.frame-soft-glow {
box-shadow:
inset 0 0 15px rgba(255, 255, 255, 0.72),
0 0 18px rgba(255, 225, 150, 0.42);
}
[b-gamgjy5and] .hero-frame-container.frame-has-loved .hero-frame-image {
object-fit: cover;
object-position: var(--frame-image-x) var(--frame-image-y);
transform: scale(var(--frame-image-scale));
transform-origin: center center;
filter: sepia(0.2) contrast(1.08) brightness(0.96);
mix-blend-mode: multiply;
}
[b-gamgjy5and] .hero-desk-image>img {
height: auto;
object-fit: initial;
object-position: initial;
}
[b-gamgjy5and] .hero-text-overlay {
left: 5.6%;
top: 48%;
max-width: 500px;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: clamp(3rem, 3.85vw, 4.45rem);
line-height: 1.04;
margin-bottom: 18px;
max-width: 500px;
}
[b-gamgjy5and] .hero-desk-subline,
[b-gamgjy5and] .hero-desk-manifest {
max-width: 410px;
font-size: 1.05rem;
line-height: 1.55;
}
.container-v3.culture-en .hero-text-overlay[b-gamgjy5and],
.container-v3.culture-da .hero-text-overlay[b-gamgjy5and],
.container-v3.culture-nb .hero-text-overlay[b-gamgjy5and] {
top: 52%;
max-width: 620px;
}
.container-v3.culture-el .hero-text-overlay[b-gamgjy5and] {
top: 50%;
max-width: 620px;
}
.container-v3.culture-fi .hero-text-overlay[b-gamgjy5and] {
top: 52%;
max-width: 560px;
}
.container-v3.culture-en .hero-desk-headline[b-gamgjy5and],
.container-v3.culture-da .hero-desk-headline[b-gamgjy5and],
.container-v3.culture-nb .hero-desk-headline[b-gamgjy5and] {
font-size: clamp(3rem, 3.85vw, 4.45rem);
line-height: 1.04;
margin-bottom: 16px;
max-width: 620px;
text-wrap: balance;
}
.container-v3.culture-el .hero-desk-headline[b-gamgjy5and] {
font-size: clamp(2.35rem, 2.65vw, 3.2rem);
line-height: 1.08;
max-width: 620px;
text-wrap: balance;
}
.container-v3.culture-fi .hero-desk-headline[b-gamgjy5and] {
font-size: clamp(2.35rem, 2.65vw, 3.2rem);
line-height: 1.08;
max-width: 560px;
}
.container-v3.culture-en .hero-desk-subline[b-gamgjy5and],
.container-v3.culture-en .hero-desk-manifest[b-gamgjy5and],
.container-v3.culture-da .hero-desk-subline[b-gamgjy5and],
.container-v3.culture-da .hero-desk-manifest[b-gamgjy5and],
.container-v3.culture-nb .hero-desk-subline[b-gamgjy5and],
.container-v3.culture-nb .hero-desk-manifest[b-gamgjy5and] {
max-width: 520px;
}
.container-v3.culture-el .hero-desk-subline[b-gamgjy5and],
.container-v3.culture-el .hero-desk-manifest[b-gamgjy5and] {
max-width: 540px;
font-size: 1rem;
}
.container-v3.culture-fi .hero-desk-subline[b-gamgjy5and],
.container-v3.culture-fi .hero-desk-manifest[b-gamgjy5and] {
max-width: 500px;
font-size: 1rem;
}
.container-v3.culture-en .hero-cta-group[b-gamgjy5and],
.container-v3.culture-da .hero-cta-group[b-gamgjy5and],
.container-v3.culture-nb .hero-cta-group[b-gamgjy5and] {
max-width: 620px;
}
.container-v3.culture-el .hero-cta-group[b-gamgjy5and] {
max-width: 620px;
flex-wrap: nowrap;
gap: 8px;
}
.container-v3.culture-en .hero-cta-group[b-gamgjy5and],
.container-v3.culture-da .hero-cta-group[b-gamgjy5and],
.container-v3.culture-nb .hero-cta-group[b-gamgjy5and] {
flex-wrap: nowrap;
gap: 10px;
}
.container-v3.culture-en .btn-hero-gentle-primary[b-gamgjy5and],
.container-v3.culture-en .btn-hero-gentle-secondary[b-gamgjy5and],
.container-v3.culture-en .btn-hero-logged-in-primary[b-gamgjy5and],
.container-v3.culture-da .btn-hero-gentle-primary[b-gamgjy5and],
.container-v3.culture-da .btn-hero-gentle-secondary[b-gamgjy5and],
.container-v3.culture-da .btn-hero-logged-in-primary[b-gamgjy5and],
.container-v3.culture-nb .btn-hero-gentle-primary[b-gamgjy5and],
.container-v3.culture-nb .btn-hero-gentle-secondary[b-gamgjy5and],
.container-v3.culture-nb .btn-hero-logged-in-primary[b-gamgjy5and] {
padding-left: 22px;
padding-right: 22px;
white-space: nowrap;
}
.container-v3.culture-el .btn-hero-gentle-primary[b-gamgjy5and],
.container-v3.culture-el .btn-hero-gentle-secondary[b-gamgjy5and],
.container-v3.culture-el .btn-hero-logged-in-primary[b-gamgjy5and] {
padding-left: 16px;
padding-right: 16px;
font-size: 0.9rem;
white-space: nowrap;
}
.container-v3.culture-en .hero-quick-flow[b-gamgjy5and],
.container-v3.culture-da .hero-quick-flow[b-gamgjy5and],
.container-v3.culture-nb .hero-quick-flow[b-gamgjy5and],
.container-v3.culture-el .hero-quick-flow[b-gamgjy5and] {
gap: 10px;
margin-top: 6px;
max-width: 620px;
}
.container-v3.culture-en .hero-quick-flow-label[b-gamgjy5and],
.container-v3.culture-da .hero-quick-flow-label[b-gamgjy5and],
.container-v3.culture-nb .hero-quick-flow-label[b-gamgjy5and],
.container-v3.culture-el .hero-quick-flow-label[b-gamgjy5and] {
margin-top: 14px;
}
.container-v3.culture-en .hero-quick-flow span[b-gamgjy5and],
.container-v3.culture-da .hero-quick-flow span[b-gamgjy5and],
.container-v3.culture-nb .hero-quick-flow span[b-gamgjy5and],
.container-v3.culture-el .hero-quick-flow span[b-gamgjy5and] {
font-size: 0.78rem;
line-height: 1.38;
}
[b-gamgjy5and] .hero-cta-group {
margin-top: 4px;
}
[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-logged-in-primary {
padding: 14px 28px;
}
[b-gamgjy5and] .hero-floating-note {
top: 8%;
right: 5.3%;
width: 220px;
}
.hero-favorites-row[b-gamgjy5and] {
margin-top: 1.05rem;
}
.wisdom-strip[b-gamgjy5and] {
max-width: 780px;
margin-top: -22px;
margin-bottom: 10px;
}
.wisdom-strip-inner[b-gamgjy5and] {
gap: 28px;
}
.wisdom-granny-container[b-gamgjy5and],
.wisdom-granny-image[b-gamgjy5and] {
width: 184px;
}
.wisdom-headline[b-gamgjy5and] {
font-size: 1.85rem;
}
.wisdom-body[b-gamgjy5and] {
max-width: 500px;
font-size: 0.98rem;
}
[b-gamgjy5and] .theme-showcase-section {
max-width: 1160px;
padding: 0;
background: transparent;
border: 0;
box-shadow: none;
}
[b-gamgjy5and] .showcase-header {
max-width: none;
margin: 0 0 24px 0;
padding: 0 12px;
text-align: left;
}
[b-gamgjy5and] .showcase-main-headline {
font-size: clamp(2rem, 3vw, 2.65rem);
margin-bottom: 8px;
}
[b-gamgjy5and] .showcase-subtitle {
max-width: 560px;
margin: 0;
font-size: 1.02rem;
}
[b-gamgjy5and] .showcase-content {
grid-template-areas:
"for-you"
"featured-top"
"featured-bottom";
grid-template-columns: 1fr;
gap: 20px;
}
[b-gamgjy5and] .large-card-v3 {
min-height: 390px;
border-radius: 24px;
background:
linear-gradient(135deg, rgba(255, 253, 248, 0.96) 0%, rgba(250, 238, 218, 0.9) 100%);
box-shadow: 0 18px 48px rgba(120, 88, 60, 0.13);
}
[b-gamgjy5and] .large-card-v3 .card-img {
width: 56%;
min-height: 360px;
margin: 14px;
border-radius: 18px;
}
[b-gamgjy5and] .large-card-v3 .card-content {
width: 44%;
padding: 42px 46px 42px 20px;
}
[b-gamgjy5and] .large-card-v3 h3 {
font-size: 2.15rem;
line-height: 1.08;
margin-bottom: 14px;
}
[b-gamgjy5and] .large-card-v3 p {
font-size: 1.04rem;
line-height: 1.58;
max-width: 360px;
}
[b-gamgjy5and] .large-card-v3 .btn-primary {
align-self: flex-start;
margin-top: 6px;
padding: 11px 22px;
background: #F4BE88;
border-color: rgba(176, 111, 58, 0.2);
}
[b-gamgjy5and] .featured-grid-v3 {
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
[b-gamgjy5and] .featured-grid-v3.bottom-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 568px;
margin: 0 auto;
}
[b-gamgjy5and] .card-featured-v3 {
border-radius: 18px;
}
[b-gamgjy5and] .card-featured-v3 .card-img {
aspect-ratio: 4 / 3;
display: block;
height: auto;
border-radius: 16px 16px 0 0;
}
[b-gamgjy5and] .card-featured-v3 .card-content {
padding: 16px 16px 17px 16px;
}
[b-gamgjy5and] .card-featured-v3 h4 {
font-size: 1.08rem;
line-height: 1.2;
}
[b-gamgjy5and] .card-featured-v3 p {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 4.45em;
}
[b-gamgjy5and] .showcase-explore-more {
margin-top: 18px;
}
.oracle-section[b-gamgjy5and] {
max-width: 1060px;
padding: 44px 48px;
}
.family-theme-section[b-gamgjy5and] {
max-width: 1060px;
background: transparent;
border: 0;
box-shadow: none;
padding: 0;
}
.family-theme-headline[b-gamgjy5and] {
margin-bottom: 22px;
font-size: 1.85rem;
}
.family-theme-grid[b-gamgjy5and] {
gap: 16px;
}
.card-family-theme[b-gamgjy5and] {
border-radius: 18px;
}
[b-gamgjy5and] .relationship-selector-section {
max-width: 760px;
margin-top: -34px;
padding-top: 20px;
border-top: 1px solid rgba(120, 88, 60, 0.12);
}
[b-gamgjy5and] .relationship-icons {
gap: 10px;
}
[b-gamgjy5and] .icon-circle {
width: 54px;
height: 54px;
}
[b-gamgjy5and] .bottom-cta-section {
max-width: 820px;
margin-top: -6px;
}
}
@media (min-width: 1025px) and (max-width: 1280px) {
[b-gamgjy5and] .container-v3 {
width: 100%;
max-width: min(1200px, calc(100vw - 280px));
}
[b-gamgjy5and] .hero-section.hero-desk {
max-width: 1120px;
min-height: 500px;
}
[b-gamgjy5and] .hero-desk-image>img {
height: 500px;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: clamp(2.7rem, 3.5vw, 3.8rem);
}
[b-gamgjy5and] .theme-showcase-section {
max-width: 1060px;
}
}
/* ============================================
Device coverage pass: phones, tablets, folds, and short hub screens.
Keep the approved iPhone 14 Pro Max and desktop feel, but make the
intermediate presets stop inheriting conflicting mobile/desktop sizing.
============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
[b-gamgjy5and] main.container-v3,
[b-gamgjy5and] .container-v3 {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: clamp(24px, 4vw, 42px);
padding-right: clamp(24px, 4vw, 42px);
gap: clamp(46px, 6vw, 68px);
box-sizing: border-box;
}
[b-gamgjy5and] .hero-section.hero-desk {
width: 100%;
max-width: 920px;
margin-left: auto;
margin-right: auto;
border-radius: 24px;
overflow: hidden;
}
[b-gamgjy5and] .hero-desk-image {
height: clamp(340px, 43vw, 440px);
}
[b-gamgjy5and] .hero-desk-image>img {
object-position: 64% center;
}
[b-gamgjy5and] .hero-text-overlay {
max-width: min(680px, calc(100% - 56px));
margin-left: auto;
margin-right: auto;
padding-left: 0;
padding-right: 0;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: clamp(2.25rem, 6vw, 3.4rem);
line-height: 1.08;
}
[b-gamgjy5and] .hero-desk-subline,
[b-gamgjy5and] .hero-desk-manifest {
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
[b-gamgjy5and] .hero-cta-group {
flex-wrap: wrap;
}
[b-gamgjy5and] .theme-showcase-section,
.oracle-section[b-gamgjy5and],
.family-theme-section[b-gamgjy5and] {
width: 100%;
max-width: 920px;
margin-left: auto;
margin-right: auto;
}
[b-gamgjy5and] .theme-showcase-section {
padding: clamp(28px, 4vw, 38px);
}
[b-gamgjy5and] .featured-grid-v3,
[b-gamgjy5and] .featured-grid-v3.bottom-grid,
.family-theme-grid[b-gamgjy5and] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oracle-section-inner[b-gamgjy5and] {
grid-template-columns: minmax(0, 1fr);
gap: 34px;
}
.oracle-text-container[b-gamgjy5and] {
max-width: 680px;
margin: 0 auto;
text-align: center;
}
.oracle-features[b-gamgjy5and] {
text-align: left;
}
.oracle-cards-container[b-gamgjy5and] {
margin: 0 auto;
}
}
@media (min-width: 641px) and (max-width: 768px) {
[b-gamgjy5and] .hero-section.hero-desk {
margin-left: auto !important;
margin-right: auto !important;
max-width: 680px !important;
}
[b-gamgjy5and] .hero-desk-image {
height: clamp(330px, 52vw, 400px);
}
[b-gamgjy5and] .hero-text-overlay {
max-width: min(600px, calc(100% - 44px));
}
[b-gamgjy5and] .hero-desk-headline {
font-size: clamp(2rem, 6.2vw, 2.9rem);
}
[b-gamgjy5and] .theme-showcase-section,
.oracle-section[b-gamgjy5and],
.family-theme-section[b-gamgjy5and] {
max-width: 680px !important;
margin-left: auto !important;
margin-right: auto !important;
}
}
@media (max-width: 640px) {
[b-gamgjy5and] .hero-section.hero-desk {
max-width: 430px !important;
}
[b-gamgjy5and] .hero-desk-image {
height: clamp(300px, 78vw, 360px);
}
/* Empty desk-frame glow reads as a stray blank square on phones; keep real portraits visible. */
[b-gamgjy5and] .hero-frame-container.frame-soft-glow {
display: none;
}
[b-gamgjy5and] .btn-hero-gentle-primary,
[b-gamgjy5and] .btn-hero-gentle-secondary,
[b-gamgjy5and] .btn-hero-logged-in-primary {
white-space: normal;
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
}
}
@media (max-width: 390px) {
[b-gamgjy5and] main.container-v3,
[b-gamgjy5and] .container-v3 {
padding-left: 12px !important;
padding-right: 12px !important;
gap: 32px;
}
[b-gamgjy5and] .hero-section.hero-desk {
border-radius: 16px;
}
[b-gamgjy5and] .hero-desk-image {
height: clamp(270px, 76vw, 310px);
}
[b-gamgjy5and] .hero-text-overlay {
padding-left: 18px;
padding-right: 18px;
padding-bottom: 24px;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: clamp(1.45rem, 8.2vw, 1.95rem);
}
[b-gamgjy5and] .hero-desk-manifest,
[b-gamgjy5and] .hero-desk-subline {
font-size: 0.92rem;
}
[b-gamgjy5and] .theme-showcase-section,
.oracle-section[b-gamgjy5and],
.family-theme-section[b-gamgjy5and] {
padding-left: 14px;
padding-right: 14px;
}
}
@media (max-width: 640px) and (max-height: 760px) {
[b-gamgjy5and] .hero-desk-image {
height: clamp(260px, 68vw, 310px);
}
[b-gamgjy5and] .hero-text-overlay {
padding-bottom: 22px;
}
[b-gamgjy5and] .hero-desk-eyebrow {
margin-bottom: 8px;
}
}
@media (min-width: 769px) and (max-width: 1024px) and (max-height: 760px) {
[b-gamgjy5and] .container-v3 {
gap: 40px;
}
[b-gamgjy5and] .hero-desk-image {
height: clamp(285px, 36vw, 340px);
}
[b-gamgjy5and] .hero-text-overlay {
margin-top: -30px;
padding-bottom: 30px;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: clamp(2rem, 5vw, 2.8rem);
margin-bottom: 12px;
}
}
@media (min-width: 1025px) and (max-height: 850px) {
[b-gamgjy5and] .container-v3 {
gap: 54px;
}
[b-gamgjy5and] .hero-section.hero-desk {
max-width: 1120px;
}
[b-gamgjy5and] .hero-desk-headline {
font-size: clamp(2.75rem, 3.4vw, 3.75rem);
}
[b-gamgjy5and] .hero-desk-subline,
[b-gamgjy5and] .hero-desk-manifest {
font-size: 1rem;
}
}
/* ===== FRONTPAGE PORTRAIT HERO VARIANT ===== */
[b-gamgjy5and] .hero-section.hero-portrait {
position: relative;
display: grid;
grid-template-columns: minmax(0, 0.88fr) minmax(420px, 1.12fr);
align-items: center;
gap: 2.5rem;
width: 100%;
max-width: 1160px;
min-height: 640px;
padding: 4rem 4.2rem;
margin-bottom: 30px;
overflow: hidden;
border-radius: 20px;
background:
linear-gradient(105deg, rgba(255, 238, 219, 0.98) 0%, rgba(255, 246, 232, 0.94) 48%, rgba(242, 218, 189, 0.72) 100%);
border: 1px solid rgba(130, 94, 64, 0.11);
box-shadow: 0 24px 70px rgba(120, 88, 60, 0.13);
isolation: isolate;
}
[b-gamgjy5and] .hero-section.hero-portrait::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(255, 218, 200, 0.34) 0%, rgba(255, 246, 232, 0.14) 44%, rgba(255, 255, 255, 0) 74%),
repeating-linear-gradient(0deg, rgba(95, 70, 48, 0.018) 0, rgba(95, 70, 48, 0.018) 1px, transparent 1px, transparent 5px);
}
[b-gamgjy5and] .hero-portrait-copy {
position: relative;
z-index: 3;
max-width: 520px;
}
[b-gamgjy5and] .hero-portrait .hero-desk-eyebrow,
[b-gamgjy5and] .hero-portrait .hero-tagline {
margin-bottom: 1rem;
}
[b-gamgjy5and] .hero-portrait .hero-desk-headline {
max-width: 540px;
font-size: 4.1rem;
line-height: 1.04;
letter-spacing: 0;
margin-bottom: 1.2rem;
}
[b-gamgjy5and] .hero-portrait .hero-desk-manifest,
[b-gamgjy5and] .hero-portrait .hero-desk-subline {
max-width: 440px;
font-size: 1.08rem;
line-height: 1.58;
margin-bottom: 1.65rem;
}
[b-gamgjy5and] .hero-portrait .hero-cta-group {
align-items: center;
gap: 0.75rem;
}
[b-gamgjy5and] .hero-portrait .hero-trust-microcopy {
max-width: 390px;
}
[b-gamgjy5and] .hero-portrait .hero-favorites-row {
margin-top: 1.45rem;
gap: 0.9rem;
}
[b-gamgjy5and] .hero-portrait .hero-favorite-avatar {
box-shadow:
inset 0 0 0 2px rgba(255, 248, 240, 0.48),
0 8px 20px rgba(82, 55, 34, 0.22);
}
[b-gamgjy5and] .hero-portrait-stage {
position: relative;
z-index: 2;
min-height: 540px;
}
[b-gamgjy5and] .hero-portrait-halo {
position: absolute;
inset: 9% 0 5% 9%;
border-radius: 999px;
background:
radial-gradient(circle at 52% 46%, rgba(255, 250, 235, 0.92) 0%, rgba(247, 207, 154, 0.28) 54%, rgba(116, 84, 56, 0) 72%);
filter: blur(2px);
opacity: 0.9;
pointer-events: none;
}
[b-gamgjy5and] .hero-portrait-main {
position: absolute;
right: 0.3rem;
top: 50%;
z-index: 4;
width: min(520px, 76%);
aspect-ratio: 1 / 1;
margin: 0;
transform: translateY(-50%);
border-radius: 14px;
overflow: hidden;
background: #fff5df;
border: 1px solid rgba(120, 88, 60, 0.11);
box-shadow:
0 28px 62px rgba(80, 52, 28, 0.22),
0 4px 14px rgba(80, 52, 28, 0.12);
animation: portraitHeroSettle-b-gamgjy5and 720ms ease-out both;
}
[b-gamgjy5and] .hero-portrait-main img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center;
}
[b-gamgjy5and] .hero-portrait-main.is-sketch img {
filter: sepia(0.08) contrast(1.03) brightness(0.99);
}
[b-gamgjy5and] .hero-portrait-main.is-loved-one img {
filter: sepia(0.12) saturate(0.9) contrast(1.04);
}
[b-gamgjy5and] .hero-portrait-caption {
position: absolute;
left: 1rem;
right: 1rem;
bottom: 1rem;
display: inline-flex;
width: fit-content;
max-width: calc(100% - 2rem);
padding: 0.48rem 0.74rem;
border-radius: 999px;
background: rgba(255, 248, 236, 0.86);
color: #5A4A3A;
font-size: 0.86rem;
font-weight: 600;
line-height: 1.25;
box-shadow: 0 8px 20px rgba(80, 52, 28, 0.12);
}
[b-gamgjy5and] .hero-portrait-action {
appearance: none;
font: inherit;
cursor: pointer;
padding: 0;
text-align: left;
color: inherit;
}
[b-gamgjy5and] .hero-portrait-action::before {
content: "";
position: absolute;
inset: 0.85rem;
z-index: 5;
border-radius: inherit;
border: 1px solid rgba(255, 248, 236, 0.5);
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease, inset 0.2s ease;
}
[b-gamgjy5and] .hero-portrait-action:hover::before,
[b-gamgjy5and] .hero-portrait-action:focus-visible::before {
inset: 0.65rem;
opacity: 1;
}
[b-gamgjy5and] .hero-portrait-action:focus-visible {
outline: 3px solid rgba(177, 111, 74, 0.82);
outline-offset: 4px;
}
[b-gamgjy5and] .hero-portrait-action:active {
filter: brightness(0.98);
}
[b-gamgjy5and] .hero-portrait-action-label {
align-items: center;
gap: 0.48rem;
background: rgba(255, 250, 241, 0.98);
color: #4D382C;
border: 1px solid rgba(196, 129, 82, 0.34);
box-shadow:
0 12px 28px rgba(80, 52, 28, 0.24),
inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}
[b-gamgjy5and] .hero-portrait-action-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.2rem;
height: 1.2rem;
border-radius: 999px;
background: #E4A066;
color: #3C2A20;
font-size: 0.82rem;
font-weight: 700;
line-height: 1;
}
[b-gamgjy5and] .hero-portrait-action:hover .hero-portrait-action-label,
[b-gamgjy5and] .hero-portrait-action:focus-visible .hero-portrait-action-label {
background: #FFF7EC;
border-color: rgba(170, 93, 47, 0.58);
color: #3D2C23;
transform: translateY(-1px);
box-shadow:
0 16px 34px rgba(80, 52, 28, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.82);
}
[b-gamgjy5and] .hero-portrait-support {
position: absolute;
z-index: 2;
width: 168px;
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: 12px;
background: #fff5df;
border: 1px solid rgba(120, 88, 60, 0.08);
opacity: 0.58;
box-shadow: 0 18px 46px rgba(80, 52, 28, 0.16);
pointer-events: none;
}
[b-gamgjy5and] .hero-portrait-support img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: sepia(0.16) contrast(0.98) brightness(1.04);
}
[b-gamgjy5and] .hero-portrait-support.support-one {
top: 7%;
left: 6%;
transform: rotate(-4deg);
}
[b-gamgjy5and] .hero-portrait-support.support-two {
top: 3%;
right: 12%;
transform: rotate(3deg);
}
[b-gamgjy5and] .hero-portrait-support.support-three {
bottom: 6%;
left: 14%;
width: 188px;
transform: rotate(2.5deg);
}
[b-gamgjy5and] .hero-portrait-support.support-four {
right: 1%;
bottom: 3%;
width: 146px;
transform: rotate(-2deg);
}
@keyframes portraitHeroSettle-b-gamgjy5and {
from {
opacity: 0;
transform: translateY(-47%) scale(0.985);
}
to {
opacity: 1;
transform: translateY(-50%) scale(1);
}
}
::global(body.night-mode) .hero-section.hero-portrait[b-gamgjy5and] {
background:
linear-gradient(105deg, rgba(39, 34, 30, 0.98) 0%, rgba(48, 40, 35, 0.96) 52%, rgba(62, 49, 40, 0.9) 100%);
border-color: rgba(255, 226, 196, 0.1);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
}
::global(body.night-mode) .hero-section.hero-portrait[b-gamgjy5and]::before {
background:
linear-gradient(90deg, rgba(118, 77, 55, 0.28) 0%, rgba(46, 37, 32, 0.16) 48%, rgba(0, 0, 0, 0) 76%),
repeating-linear-gradient(0deg, rgba(255, 226, 196, 0.018) 0, rgba(255, 226, 196, 0.018) 1px, transparent 1px, transparent 5px);
}
::global(body.night-mode) .hero-portrait .hero-desk-headline[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-desk-eyebrow[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-tagline[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-desk-manifest[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-desk-subline[b-gamgjy5and] {
color: #F5E8D8;
text-shadow: none;
}
::global(body.night-mode) .hero-portrait .hero-trust-microcopy[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-tertiary-link[b-gamgjy5and],
::global(body.night-mode) .hero-portrait .hero-favorites-label[b-gamgjy5and] {
color: rgba(245, 232, 216, 0.76);
}
::global(body.night-mode) .hero-portrait-main[b-gamgjy5and],
::global(body.night-mode) .hero-portrait-support[b-gamgjy5and] {
background: #3a3029;
border-color: rgba(255, 226, 196, 0.12);
}
@media (max-width: 1100px) {
[b-gamgjy5and] .hero-section.hero-portrait {
grid-template-columns: minmax(0, 0.92fr) minmax(360px, 1.08fr);
gap: 1.6rem;
padding: 3.2rem;
}
[b-gamgjy5and] .hero-portrait .hero-desk-headline {
font-size: 3.45rem;
}
[b-gamgjy5and] .hero-portrait-stage {
min-height: 470px;
}
}
@media (max-width: 900px) {
[b-gamgjy5and] .hero-section.hero-portrait {
grid-template-columns: 1fr;
gap: 1.4rem;
max-width: 680px;
min-height: auto;
padding: 2rem;
}
[b-gamgjy5and] .hero-portrait-stage {
order: -1;
min-height: 390px;
}
[b-gamgjy5and] .hero-portrait-copy {
max-width: none;
}
[b-gamgjy5and] .hero-portrait .hero-desk-headline {
max-width: 620px;
font-size: 3rem;
}
[b-gamgjy5and] .hero-portrait .hero-desk-manifest,
[b-gamgjy5and] .hero-portrait .hero-desk-subline {
max-width: 560px;
}
[b-gamgjy5and] .hero-portrait-main {
right: 50%;
width: min(390px, 72%);
transform: translate(50%, -50%);
}
[b-gamgjy5and] .hero-portrait-support.support-one {
left: 7%;
}
[b-gamgjy5and] .hero-portrait-support.support-two {
right: 7%;
}
[b-gamgjy5and] .hero-portrait-support.support-three,
[b-gamgjy5and] .hero-portrait-support.support-four {
display: none;
}
@keyframes portraitHeroSettle-b-gamgjy5and {
from {
opacity: 0;
transform: translate(50%, -47%) scale(0.985);
}
to {
opacity: 1;
transform: translate(50%, -50%) scale(1);
}
}
}
@media (max-width: 640px) {
[b-gamgjy5and] .hero-section.hero-portrait {
max-width: 430px !important;
padding: 1rem;
border-radius: 18px;
}
[b-gamgjy5and] .hero-portrait-stage {
min-height: 315px;
}
[b-gamgjy5and] .hero-portrait-main {
width: min(292px, 82%);
border-radius: 12px;
}
[b-gamgjy5and] .hero-portrait-support {
width: 112px;
border-radius: 10px;
}
[b-gamgjy5and] .hero-portrait-support.support-one {
top: 8%;
left: 0;
}
[b-gamgjy5and] .hero-portrait-support.support-two {
top: 4%;
right: 0;
}
[b-gamgjy5and] .hero-portrait-copy {
padding: 0 0.35rem 0.45rem;
}
[b-gamgjy5and] .hero-portrait .hero-desk-headline {
font-size: 2.25rem;
line-height: 1.08;
}
[b-gamgjy5and] .hero-portrait .hero-desk-manifest,
[b-gamgjy5and] .hero-portrait .hero-desk-subline {
font-size: 0.98rem;
line-height: 1.55;
}
[b-gamgjy5and] .hero-portrait .hero-cta-group {
align-items: stretch;
width: 100%;
}
[b-gamgjy5and] .hero-portrait .btn-hero-gentle-primary,
[b-gamgjy5and] .hero-portrait .btn-hero-gentle-secondary,
[b-gamgjy5and] .hero-portrait .btn-hero-logged-in-primary {
width: 100%;
}
[b-gamgjy5and] .hero-portrait-caption {
left: 0.75rem;
right: 0.75rem;
bottom: 0.75rem;
max-width: calc(100% - 1.5rem);
font-size: 0.78rem;
}
}
@media (prefers-reduced-motion: reduce) {
[b-gamgjy5and] .hero-portrait-main {
animation: none;
}
}
/* ===== FRONTPAGE PORTRAIT FOCUS HERO VARIANT ===== */
[b-gamgjy5and] .hero-section.hero-portrait-focus {
display: block;
min-height: 560px;
padding: 0;
background: #fbefd9;
}
[b-gamgjy5and] .hero-section.hero-portrait-focus::before {
z-index: 2;
background:
linear-gradient(90deg,
rgba(252, 220, 199, 0.78) 0%,
rgba(252, 227, 210, 0.7) 28%,
rgba(255, 246, 229, 0.5) 43%,
rgba(255, 246, 229, 0.2) 53%,
rgba(255, 246, 229, 0.03) 63%,
rgba(255, 246, 229, 0) 72%),
repeating-linear-gradient(0deg, rgba(95, 70, 48, 0.022) 0, rgba(95, 70, 48, 0.022) 1px, transparent 1px, transparent 5px);
}
[b-gamgjy5and] .hero-section.hero-portrait-focus::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
pointer-events: none;
background:
linear-gradient(180deg, rgba(255, 251, 241, 0.08), rgba(255, 247, 229, 0.02) 45%, rgba(126, 86, 50, 0.04)),
linear-gradient(90deg, rgba(255, 236, 220, 0.12), rgba(255, 255, 255, 0) 36%);
mix-blend-mode: multiply;
opacity: 0.55;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
position: absolute;
left: 5.7%;
top: 50%;
z-index: 5;
width: min(530px, 43%);
max-width: 530px;
transform: translateY(-50%);
}
[b-gamgjy5and] .hero-portrait-focus .hero-desk-headline {
max-width: 515px;
font-size: clamp(3.25rem, 3.85vw, 4.45rem);
line-height: 1.04;
margin-bottom: 1.1rem;
}
[b-gamgjy5and] .hero-portrait-focus .hero-desk-manifest,
[b-gamgjy5and] .hero-portrait-focus .hero-desk-subline {
max-width: 505px;
}
[b-gamgjy5and] .hero-portrait-focus .hero-cta-group {
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
width: max-content;
max-width: 560px;
}
[b-gamgjy5and] .hero-portrait-focus .btn-hero-gentle-primary,
[b-gamgjy5and] .hero-portrait-focus .btn-hero-gentle-secondary,
[b-gamgjy5and] .hero-portrait-focus .btn-hero-logged-in-primary {
flex: 0 0 auto;
white-space: nowrap;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-stage {
position: absolute;
inset: 0;
z-index: 1;
min-height: 0;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-halo,
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-support {
display: none;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
position: absolute;
inset: 0 0 0 auto;
z-index: 1;
width: 64%;
height: 100%;
aspect-ratio: auto;
transform: none;
border: 0;
border-radius: 0 20px 20px 0;
background: transparent;
box-shadow: none;
animation: portraitFocusFade-b-gamgjy5and 760ms ease-out both;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 52% 45%;
filter: sepia(0.06) saturate(1.02) contrast(1.12) brightness(1.04);
transform: scale(1.32);
transform-origin: right center;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main.is-loved-one img {
filter: sepia(0.04) saturate(1.02) contrast(1.08) brightness(1.05);
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-caption {
left: auto;
right: 6%;
bottom: 7%;
z-index: 6;
background: rgba(255, 250, 241, 0.98);
}
@keyframes portraitFocusFade-b-gamgjy5and {
from {
opacity: 0;
transform: scale(1.015);
}
to {
opacity: 1;
transform: scale(1);
}
}
@media (min-width: 1025px) {
[b-gamgjy5and] main.container-v3.frontpage-hero-focus-active {
max-width: min(1200px, calc(100vw - 280px));
}
[b-gamgjy5and] .hero-section.hero-portrait-focus {
width: min(100%, calc(100vw - 360px));
max-width: 1160px;
margin-left: auto;
margin-right: auto;
}
}
::global(body.night-mode) .hero-section.hero-portrait-focus[b-gamgjy5and] {
background: #2f2924;
}
::global(body.night-mode) .hero-section.hero-portrait-focus[b-gamgjy5and]::before {
background:
linear-gradient(90deg,
rgba(58, 39, 33, 0.94) 0%,
rgba(64, 45, 38, 0.86) 33%,
rgba(53, 43, 36, 0.55) 52%,
rgba(45, 37, 31, 0.14) 72%,
rgba(45, 37, 31, 0) 100%),
repeating-linear-gradient(0deg, rgba(255, 226, 196, 0.018) 0, rgba(255, 226, 196, 0.018) 1px, transparent 1px, transparent 5px);
}
@media (max-width: 1100px) {
[b-gamgjy5and] .hero-section.hero-portrait-focus {
min-height: 520px;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
width: min(510px, 48%);
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
width: 62%;
}
}
@media (max-width: 900px) {
[b-gamgjy5and] .hero-section.hero-portrait-focus {
display: grid;
grid-template-columns: 1fr;
min-height: auto;
padding: 0;
}
[b-gamgjy5and] .hero-section.hero-portrait-focus::before {
background:
linear-gradient(180deg, rgba(255, 246, 229, 0.02), rgba(252, 227, 210, 0.72) 50%, rgba(255, 246, 229, 0.96) 100%),
repeating-linear-gradient(0deg, rgba(95, 70, 48, 0.022) 0, rgba(95, 70, 48, 0.022) 1px, transparent 1px, transparent 5px);
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-stage {
position: relative;
min-height: 360px;
order: -1;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
inset: 0;
width: 100%;
height: 100%;
border-radius: 18px 18px 0 0;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main img {
object-position: 54% 42%;
transform: scale(1.16);
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
position: relative;
left: auto;
top: auto;
width: auto;
max-width: none;
padding: 2rem;
transform: none;
}
[b-gamgjy5and] .hero-portrait-focus .hero-cta-group {
width: 100%;
max-width: none;
flex-direction: column;
align-items: stretch;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-caption {
right: 1rem;
bottom: 1rem;
}
}
@media (max-width: 640px) {
[b-gamgjy5and] .hero-section.hero-portrait-focus {
max-width: 430px !important;
border-radius: 18px;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-stage {
min-height: 320px;
}
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-copy {
padding: 1.5rem 1.2rem 1.4rem;
}
[b-gamgjy5and] .hero-portrait-focus .hero-desk-headline {
font-size: 2.2rem;
}
}
@media (prefers-reduced-motion: reduce) {
[b-gamgjy5and] .hero-portrait-focus .hero-portrait-main {
animation: none;
}
}
/* Align first-viewport hero placement with the ThemesAll rhythm. */
@media (min-width: 1025px) {
[b-gamgjy5and] .app-layout,
.app-layout[b-gamgjy5and] {
padding-top: 64px;
}
[b-gamgjy5and] main.container-v3,
[b-gamgjy5and] .container-v3 {
margin-top: 0;
}
}
@media (max-width: 1024px) {
[b-gamgjy5and] main.container-v3,
[b-gamgjy5and] .container-v3 {
margin-top: 22px !important;
}
}
/* The signed-in home is a personal workspace, with a real portrait and clear actions. */
.container-v3.signed-home[b-gamgjy5and] {
--lov-card-surface: var(--lov-surface);
--lov-card-border: 1px solid var(--lov-line);
--lov-section-border: 1px solid var(--lov-line);
--lov-card-shadow: none;
--lov-card-radius: 8px;
--lov-card-radius-sm: 6px;
--lov-section-radius: 8px;
gap: clamp(2rem, 4vw, 3.5rem);
font-family: var(--font-sans);
}
.container-v3.signed-home :is(h1, h2, h3, h4)[b-gamgjy5and] {
font-family: var(--font-serif) !important;
font-weight: 450;
}
.container-v3.signed-home .hero-section.hero-desk[b-gamgjy5and] {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
align-items: center;
gap: clamp(2rem, 4vw, 4rem);
width: 100%;
max-width: none !important;
min-height: 0;
height: auto !important;
padding: clamp(1rem, 3vw, 2rem) 0;
margin-block: 0;
overflow: visible;
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.container-v3.signed-home .hero-section.hero-desk:not(.hero-logged-in-with-loved-ones)[b-gamgjy5and] {
grid-template-columns: minmax(0, 1fr);
}
.container-v3.signed-home .hero-desk:not(.hero-logged-in-with-loved-ones) .hero-desk-image[b-gamgjy5and] { display: none; }
.container-v3.signed-home .hero-desk .hero-text-overlay[b-gamgjy5and] {
position: static;
grid-column: 1;
grid-row: 1;
inset: auto;
transform: none;
width: 100%;
max-width: 680px;
padding: 0;
margin: 0;
background: none;
text-align: left;
}
.container-v3.signed-home .hero-desk .hero-text-overlay > :is(.hero-tagline, .hero-desk-headline, .hero-desk-subline)[b-gamgjy5and] { display: block; }
.container-v3.signed-home .hero-desk .hero-desk-headline[b-gamgjy5and] {
max-width: 14ch;
font-size: clamp(2.2rem, 3.6vw, 3.6rem);
line-height: 1.12;
font-weight: 450;
letter-spacing: -.03em;
color: var(--lov-ink);
text-shadow: none;
}
.container-v3.signed-home .hero-desk :is(.hero-tagline, .hero-desk-subline, .hero-trust-microcopy, .hero-favorites-label)[b-gamgjy5and] {
color: var(--lov-muted);
text-shadow: none;
}
.container-v3.signed-home .hero-desk .hero-desk-subline[b-gamgjy5and] { max-width: 48ch; line-height: 1.65; }
.container-v3.signed-home .hero-desk .hero-desk-image[b-gamgjy5and] {
grid-column: 2;
grid-row: 1;
position: static;
width: 100%;
height: auto;
min-height: 0;
aspect-ratio: auto;
padding: clamp(.75rem, 2vw, 1.25rem);
background: var(--lov-surface);
border: 1px solid var(--lov-line);
border-radius: 4px;
overflow: hidden;
}
.container-v3.signed-home .hero-desk .hero-desk-image[b-gamgjy5and]::after,
.container-v3.signed-home .hero-desk .hero-frame-glass[b-gamgjy5and],
.container-v3.signed-home .hero-desk .hero-frame-glow[b-gamgjy5and] { display: none; }
.container-v3.signed-home .hero-desk .hero-frame-container[b-gamgjy5and] {
position: static;
inset: auto;
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
transform: none;
padding: 0;
border-radius: 4px;
background: var(--lov-surface);
box-shadow: none;
}
.container-v3.signed-home .hero-desk .hero-frame-container .hero-frame-image[b-gamgjy5and] {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: none;
filter: none;
mix-blend-mode: normal;
animation: none;
opacity: 1;
}
.container-v3.signed-home .hero-desk .hero-last-active-caption[b-gamgjy5and] {
position: static;
display: block;
width: auto;
max-width: none;
transform: none;
margin: 16px 0 0;
padding: 0;
color: var(--lov-ink);
text-align: left;
text-shadow: none;
font-size: .95rem;
line-height: 1.5;
}
.container-v3.signed-home :is(.btn-hero-logged-in-primary, .hero-unfinished-nudge-action)[b-gamgjy5and] {
background: var(--lov-green);
color: var(--lov-on-green);
border: 1px solid var(--lov-green);
border-radius: 6px;
box-shadow: none;
min-height: 44px;
white-space: normal;
}
.container-v3.signed-home :is(.btn-hero-logged-in-primary, .hero-unfinished-nudge-action):hover[b-gamgjy5and] {
background: var(--lov-ink);
color: var(--lov-paper);
transform: none;
box-shadow: none;
}
.container-v3.signed-home .btn-hero-gentle-secondary[b-gamgjy5and] {
background: var(--lov-surface);
color: var(--lov-ink);
border: 1px solid var(--lov-line);
border-radius: 6px;
min-height: 44px;
box-shadow: none;
white-space: normal;
}
.container-v3.signed-home .hero-tertiary-link[b-gamgjy5and] { color: var(--lov-green); }
.container-v3.signed-home .hero-unfinished-nudge[b-gamgjy5and] {
background: var(--lov-surface);
border: 1px solid var(--lov-line);
border-radius: 8px;
box-shadow: none;
}
.container-v3.signed-home .hero-unfinished-nudge h2[b-gamgjy5and] { color: var(--lov-ink); }
.container-v3.signed-home .hero-unfinished-nudge p[b-gamgjy5and] { color: var(--lov-muted); }
.container-v3.signed-home .wisdom-strip[b-gamgjy5and] {
padding: 32px 0;
background: transparent;
border-top: 1px solid var(--lov-line);
border-bottom: 1px solid var(--lov-line);
border-radius: 0;
box-shadow: none;
}
.container-v3.signed-home .wisdom-strip-inner[b-gamgjy5and] { display: grid; grid-template-columns: minmax(0, .65fr) minmax(0, 1fr); align-items: center; gap: 32px; }
.container-v3.signed-home .wisdom-granny-container[b-gamgjy5and] { position: static; width: 100%; height: auto; margin: 0; transform: none; }
.container-v3.signed-home .wisdom-granny-image[b-gamgjy5and] { width: 100%; height: auto; max-width: none; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; transform: none; filter: none; }
.container-v3.signed-home .wisdom-text-container[b-gamgjy5and] { text-align: left; padding: 0; }
.container-v3.signed-home .wisdom-headline[b-gamgjy5and] { color: var(--lov-ink); }
.container-v3.signed-home :is(.wisdom-body, .wisdom-microcopy)[b-gamgjy5and] { color: var(--lov-muted); }
.container-v3.signed-home .wisdom-soft-link[b-gamgjy5and] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; box-shadow: none; }
.container-v3.signed-home .wisdom-memory-link[b-gamgjy5and] { color: var(--lov-green); }
/* The responsive portrait variant keeps its existing visit action and photo size. */
.container-v3.signed-home .hero-section.hero-portrait[b-gamgjy5and] {
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.container-v3.signed-home .hero-section.hero-portrait[b-gamgjy5and]::before,
.container-v3.signed-home .hero-section.hero-portrait[b-gamgjy5and]::after { display: none; }
.container-v3.signed-home .hero-portrait .hero-portrait-copy[b-gamgjy5and] {
background: transparent;
text-align: left;
}
.container-v3.signed-home .hero-portrait .hero-desk-headline[b-gamgjy5and] { color: var(--lov-ink); text-shadow: none; font-weight: 450; }
.container-v3.signed-home .hero-portrait :is(.hero-tagline, .hero-desk-subline, .hero-trust-microcopy)[b-gamgjy5and] { color: var(--lov-muted); text-shadow: none; }
.container-v3.signed-home .hero-portrait .hero-portrait-main[b-gamgjy5and] { background: var(--lov-selected); border-radius: 8px; box-shadow: none; }
.container-v3.signed-home .hero-portrait .hero-portrait-main img[b-gamgjy5and] { filter: none; transform: none; }
.container-v3.signed-home .hero-portrait .hero-portrait-caption[b-gamgjy5and] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; }
.container-v3.signed-home .hero-portrait .hero-portrait-action:focus-visible[b-gamgjy5and] { outline: 3px solid var(--lov-focus); outline-offset: 3px; }
.container-v3.signed-home :is(.btn-hero-logged-in-primary, .btn-hero-gentle-secondary, .hero-unfinished-nudge-action, .wisdom-soft-link):focus-visible[b-gamgjy5and] {
outline: 3px solid var(--lov-focus);
outline-offset: 3px;
}
.container-v3.signed-home :is(.family-editorial-card, .card-family-theme, .saved-words-editorial-card)[b-gamgjy5and] {
border-radius: 6px;
box-shadow: none;
}
.container-v3.signed-home :is(.family-editorial-card, .card-family-theme, .saved-words-editorial-card):hover[b-gamgjy5and] {
transform: none;
box-shadow: none;
}
.container-v3.signed-home :is(.family-editorial-card, .card-family-theme, .saved-words-editorial-card) .card-img[b-gamgjy5and] {
object-position: center;
}
.container-v3.signed-home .saved-words-editorial-card[b-gamgjy5and] {
background: var(--lov-surface);
border: 1px solid var(--lov-green);
}
.container-v3.signed-home .saved-words-editorial-card:hover .card-img[b-gamgjy5and] { transform: none; }
.container-v3.signed-home .large-card-v3.family-editorial-card .card-img[b-gamgjy5and] {
height: auto;
}
.container-v3.signed-home :is(.family-editorial-card, .card-family-theme, .saved-words-editorial-card) .btn[b-gamgjy5and] {
display: inline-flex;
align-items: center;
min-height: 44px;
border-radius: 6px;
box-shadow: none;
}
.container-v3.signed-home :is(.family-editorial-card, .card-family-theme) .btn-primary[b-gamgjy5and] {
background: var(--lov-green);
border-color: var(--lov-green);
color: var(--lov-on-green);
}
.container-v3.signed-home :is(.family-editorial-card, .card-family-theme, .saved-words-editorial-card) .btn-secondary[b-gamgjy5and] {
background: var(--lov-surface);
border-color: var(--lov-line);
color: var(--lov-ink);
}
.container-v3.signed-home :is(.family-editorial-card, .card-family-theme, .saved-words-editorial-card):focus-visible[b-gamgjy5and] {
outline: 3px solid var(--lov-focus);
outline-offset: 3px;
}
.container-v3.signed-home > :is(
.hero-unfinished-nudge,
.portal-reveal-section,
.mobile-recent-themes-section,
.favorite-themes-section,
.wisdom-strip,
.theme-showcase-section,
.bridge-section,
.oracle-section,
.family-theme-section,
.relationship-selector-section,
.bottom-cta-section
)[b-gamgjy5and] {
margin-block: 0;
}
.container-v3.signed-home > :is(
.hero-unfinished-nudge,
.mobile-recent-themes-section,
.favorite-themes-section,
.wisdom-strip,
.family-theme-section
)[b-gamgjy5and] {
width: 100%;
max-width: none;
margin-inline: 0;
}
.container-v3.signed-home > :is(.bridge-section, .bottom-cta-section)[b-gamgjy5and] {
padding: 24px 20px;
}
.container-v3.signed-home :is(.bridge-quote, .cta-quote) p[b-gamgjy5and] {
max-width: 40rem;
line-height: 1.5;
}
/* The welcome is personal; continuation and discovery each have their own place. */
.container-v3.signed-home .hero-cta-group[b-gamgjy5and] {
flex-wrap: wrap;
justify-content: flex-start;
gap: .75rem;
}
.container-v3.signed-home .hero-cta-group .btn[b-gamgjy5and] {
font-family: var(--font-sans);
font-size: 1rem;
padding: .8rem 1.15rem;
}
.container-v3.signed-home .hero-tertiary-link[b-gamgjy5and] {
display: inline-flex;
align-items: center;
min-height: 2.75rem;
text-underline-offset: .2em;
}
.container-v3.signed-home .hero-trust-microcopy[b-gamgjy5and] {
margin-block: .25rem 0;
}
.container-v3.signed-home .hero-unfinished-nudge.is-secondary[b-gamgjy5and] {
background: transparent;
border-width: 0 0 1px;
border-radius: 0;
padding: 0 0 1.25rem;
}
.container-v3.signed-home .hero-unfinished-nudge.is-secondary h2[b-gamgjy5and] {
font-size: 1.25rem;
}
.container-v3.signed-home .hero-unfinished-nudge.is-secondary .hero-unfinished-nudge-action[b-gamgjy5and] {
background: transparent;
color: var(--lov-green);
border-color: var(--lov-line);
font-size: .95rem;
}
.home-continuations[b-gamgjy5and] {
width: 100%;
min-width: 0;
}
.home-continuations-heading[b-gamgjy5and] {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .5rem 1rem;
margin-bottom: 1rem;
}
.home-continuations-heading h2[b-gamgjy5and] {
margin: 0;
font-size: 1.4rem;
color: var(--lov-ink);
}
.home-continuations-heading a[b-gamgjy5and] {
display: inline-flex;
align-items: center;
gap: .5rem;
min-height: 2.75rem;
color: var(--lov-green);
font-size: .9rem;
text-underline-offset: .2em;
}
.home-continuation-list[b-gamgjy5and] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
gap: .75rem;
}
.home-continuation[b-gamgjy5and] {
display: grid;
grid-template-columns: 3rem minmax(0, 1fr) auto;
align-items: center;
gap: .75rem;
min-width: 0;
padding: .75rem;
background: var(--lov-surface);
color: var(--lov-ink);
border: 1px solid var(--lov-line);
border-radius: 4px;
font: 500 .95rem / 1.4 var(--font-sans);
text-align: left;
cursor: pointer;
}
.home-continuation img[b-gamgjy5and] {
display: block;
width: 3rem;
height: 3rem;
object-fit: cover;
border-radius: 50%;
}
.home-continuation > span:not(.home-continuation-arrow)[b-gamgjy5and] {
overflow-wrap: anywhere;
}
.home-continuation-arrow[b-gamgjy5and] { color: var(--lov-green); }
.home-continuation:hover[b-gamgjy5and] { background: var(--lov-selected); border-color: var(--lov-green); }
.home-continuation-loading[b-gamgjy5and] { color: var(--lov-muted); margin: 0; }
.container-v3.signed-home .portal-reveal-section[b-gamgjy5and] {
width: 100%;
margin-inline: 0;
padding: clamp(1.5rem, 3vw, 2.5rem) 0 0;
border-top: 1px solid var(--lov-line);
}
.container-v3.signed-home .portal-reveal-inner[b-gamgjy5and] { display: block; max-width: none; padding: 0; }
.container-v3.signed-home .portal-reveal-copy[b-gamgjy5and] { max-width: 42rem; margin-bottom: 1.5rem; }
.container-v3.signed-home .portal-reveal-copy h2[b-gamgjy5and] { max-width: 24ch; font-size: clamp(1.8rem, 3vw, 2.5rem); margin: .5rem 0 1rem; }
.container-v3.signed-home .portal-reveal-links[b-gamgjy5and] {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
gap: 0 clamp(1.5rem, 3vw, 2.5rem);
align-items: stretch;
}
.container-v3.signed-home .portal-reveal-link[b-gamgjy5and] {
min-width: 0;
padding: 1.5rem 0;
border: 0;
border-bottom: 1px solid var(--lov-line);
text-decoration: none;
}
.container-v3.signed-home .portal-reveal-link strong[b-gamgjy5and] { color: var(--lov-ink); }
.container-v3.signed-home .portal-reveal-link strong > span[b-gamgjy5and] { display: inline; font: inherit; margin-left: .5rem; }
.container-v3.signed-home .portal-reveal-link:not(.portal-reveal-world) > span[b-gamgjy5and] { max-width: 32ch; color: var(--lov-muted); line-height: 1.6; }
.container-v3.signed-home .portal-reveal-world[b-gamgjy5and] {
grid-row: span 2;
position: relative;
display: flex;
align-items: flex-end;
min-height: 18rem;
padding: clamp(1.5rem, 3vw, 2.25rem);
overflow: hidden;
isolation: isolate;
background: var(--lov-green);
border: 0;
border-radius: 4px;
}
.portal-reveal-world img[b-gamgjy5and] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.portal-reveal-world[b-gamgjy5and]::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(35, 51, 37, .08), rgba(35, 51, 37, .92)); z-index: -1; }
.container-v3.signed-home .portal-reveal-world-copy[b-gamgjy5and] { display: grid; gap: .65rem; max-width: 30ch; }
.container-v3.signed-home .portal-reveal-world :is(strong, span)[b-gamgjy5and] { color: #fffaf1; }
.container-v3.signed-home .portal-reveal-world strong[b-gamgjy5and] { font-size: clamp(1.6rem, 2.5vw, 2rem); }
.container-v3.signed-home .portal-reveal-world-copy > span[b-gamgjy5and] { line-height: 1.6; }
.container-v3.signed-home .portal-reveal-world-arrow[b-gamgjy5and] { font-size: 1.5rem; }
.container-v3.signed-home .portal-reveal-link:hover strong[b-gamgjy5and] { text-decoration: underline; text-underline-offset: .2em; }
.container-v3.signed-home :is(.home-continuation, .home-continuations-heading a, .hero-tertiary-link, .portal-reveal-link):focus-visible[b-gamgjy5and] { outline: 3px solid var(--lov-focus); outline-offset: 4px; }
@media (max-width: 768px) {
.container-v3.signed-home[b-gamgjy5and] { gap: 32px; }
.container-v3.signed-home .hero-section.hero-desk[b-gamgjy5and] { grid-template-columns: minmax(0, 1fr); max-width: none !important; gap: 24px; padding: 16px 0; }
.container-v3.signed-home .hero-desk .hero-desk-image[b-gamgjy5and] { grid-column: 1; grid-row: 2; width: min(100%, 340px); justify-self: start; }
.container-v3.signed-home .hero-desk .hero-desk-headline[b-gamgjy5and] { max-width: 100%; }
.container-v3.signed-home .hero-desk .hero-cta-group[b-gamgjy5and] { width: 100%; max-width: none; align-items: stretch; }
.container-v3.signed-home .wisdom-strip-inner[b-gamgjy5and] { grid-template-columns: minmax(0, 1fr); }
.container-v3.signed-home .wisdom-granny-container[b-gamgjy5and] { max-width: 440px; }
.container-v3.signed-home .portal-reveal-links[b-gamgjy5and] { grid-template-columns: minmax(0, 1fr); }
.container-v3.signed-home .portal-reveal-world[b-gamgjy5and] { grid-row: auto; min-height: 16rem; }
.container-v3.signed-home .hero-portrait .hero-portrait-stage[b-gamgjy5and] { min-height: 0; }
.container-v3.signed-home .hero-portrait .hero-portrait-main[b-gamgjy5and] { position: relative; inset: auto; width: 100%; height: auto; padding: .75rem; background: var(--lov-surface); border: 1px solid var(--lov-line); border-radius: 4px; }
.container-v3.signed-home .hero-portrait .hero-portrait-main img[b-gamgjy5and] { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.container-v3.signed-home .hero-portrait .hero-portrait-caption[b-gamgjy5and] { position: static; display: flex; justify-content: space-between; gap: .5rem; margin-top: .75rem; padding: .75rem; width: auto; }
.container-v3.signed-home .hero-portrait .hero-portrait-copy[b-gamgjy5and] { padding: 1.5rem 0 0; }
.container-v3.signed-home .hero-portrait .hero-desk-headline[b-gamgjy5and] { font-size: clamp(2rem, 8vw, 3rem); max-width: 100%; }
}
@media (min-width: 1025px) {
.container-v3.signed-home[b-gamgjy5and] {
width: min(1200px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
margin-right: auto;
}
.container-v3.signed-home.sidebar-hidden[b-gamgjy5and] {
width: min(1200px, 100%);
margin-inline: auto;
}
}
/* /Components/Pages/GoogleOAuthSignIn.razor.rz.scp.css */
.google-auth-page[b-tkcrp7ibjb] {
--google-auth-bg: #f7ecdf;
--google-auth-bg-soft: #fff8f0;
--google-auth-ink: #46352e;
--google-auth-muted: #6a5a52;
--google-auth-line: rgba(133, 103, 82, 0.18);
--google-auth-card-start: #fffdf9;
--google-auth-card-end: #fff8f0;
--google-auth-action: #8f6847;
--google-auth-action-hover: #765037;
--google-auth-action-ink: #fffaf6;
--google-auth-shadow: 0 28px 90px rgba(96, 67, 47, 0.14);
box-sizing: border-box;
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
min-height: 100svh;
background:
radial-gradient(circle at top left, rgba(255, 255, 255, 0.76), transparent 34%),
linear-gradient(180deg, var(--google-auth-bg-soft), var(--google-auth-bg));
color: var(--google-auth-ink);
font-family: var(--font-sans);
}
.google-auth-page__brand[b-tkcrp7ibjb] {
box-sizing: border-box;
width: 100%;
max-width: 120rem;
margin: 0 auto;
padding: 2rem 3rem 0;
}
.google-auth-page__brand-link[b-tkcrp7ibjb] {
display: inline-flex;
align-items: center;
min-height: 44px;
border-radius: 6px;
text-decoration: none;
}
.google-auth-page__brand-logo[b-tkcrp7ibjb] {
display: block;
width: auto;
max-width: 100%;
height: 36px;
}
.google-auth-page__main[b-tkcrp7ibjb] {
box-sizing: border-box;
display: grid;
flex: 1;
place-items: center;
padding: 2rem 1.5rem 5rem;
}
.google-auth-card[b-tkcrp7ibjb] {
box-sizing: border-box;
width: min(100%, 46rem);
min-width: 0;
padding: clamp(1.5rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
border: 1px solid var(--google-auth-line);
border-radius: 28px;
background: linear-gradient(180deg, var(--google-auth-card-start), var(--google-auth-card-end));
box-shadow: var(--google-auth-shadow);
text-align: center;
}
.google-auth-card__title[b-tkcrp7ibjb] {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4vw, 3.25rem);
line-height: 1.15;
letter-spacing: 0;
overflow-wrap: anywhere;
hyphens: auto;
}
.google-auth-card__message[b-tkcrp7ibjb] {
max-width: 33rem;
margin: 1.25rem auto 0;
color: var(--google-auth-muted);
font-size: 1.05rem;
line-height: 1.75;
overflow-wrap: anywhere;
}
.google-auth-card__action[b-tkcrp7ibjb] {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
width: min(100%, 15rem);
min-height: 48px;
margin-top: 2rem;
padding: 0.9rem 1.5rem;
border: 1px solid transparent;
border-radius: 999px;
background: var(--google-auth-action);
color: var(--google-auth-action-ink);
font-weight: 600;
line-height: 1.5;
text-decoration: none;
overflow-wrap: anywhere;
}
.google-auth-card__action:hover[b-tkcrp7ibjb] {
background: var(--google-auth-action-hover);
color: var(--google-auth-action-ink);
}
.google-auth-card__action:focus-visible[b-tkcrp7ibjb],
.google-auth-page__brand-link:focus-visible[b-tkcrp7ibjb] {
outline: 3px solid var(--google-auth-ink);
outline-offset: 4px;
}
body.night-mode .google-auth-page[b-tkcrp7ibjb] {
--google-auth-bg: #1a2a32;
--google-auth-bg-soft: #2d3b44;
--google-auth-ink: #e8f4f8;
--google-auth-muted: #cfd8dc;
--google-auth-line: rgba(232, 244, 248, 0.16);
--google-auth-card-start: #2d3b44;
--google-auth-card-end: #1e2e36;
--google-auth-shadow: 0 28px 90px rgba(0, 0, 0, 0.28);
background: linear-gradient(180deg, var(--google-auth-bg-soft), var(--google-auth-bg));
}
@media (max-width: 768px) {
.google-auth-page__brand[b-tkcrp7ibjb] {
padding: 1rem 1.5rem 0;
}
.google-auth-page__main[b-tkcrp7ibjb] {
padding: 1.5rem 1rem 5rem;
}
.google-auth-card[b-tkcrp7ibjb] {
border-radius: 22px;
}
.google-auth-card__message[b-tkcrp7ibjb] {
font-size: 1rem;
}
}
/* /Components/Pages/GrannysCorner.razor.rz.scp.css */
/* GrannysCorner.razor.css - Granny's Corner Page Styles */
/* Base styles inherited from FrontPage but with warmer tones */
[b-zb0ja7fh7c] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
/* inherited font-sans */
}
/* Global body/html overflow prevention - REMOVED */
/* App Layout */
[b-zb0ja7fh7c] .app-layout {
display: flex;
min-height: 100vh;
/* inherited font-sans */
background: var(--lov-paper);
padding-top: 0;
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-zb0ja7fh7c] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-zb0ja7fh7c] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-zb0ja7fh7c] .sidebar.hidden {
transform: translateX(-100%);
}
[b-zb0ja7fh7c] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 1.0rem;
}
[b-zb0ja7fh7c] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-zb0ja7fh7c] .sidebar-logo img {
max-width: 180px;
width: auto;
height: 50px;
}
[b-zb0ja7fh7c] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-zb0ja7fh7c] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
}
[b-zb0ja7fh7c] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-zb0ja7fh7c] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-zb0ja7fh7c] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease;
}
[b-zb0ja7fh7c] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-zb0ja7fh7c] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: #4F4A45;
}
[b-zb0ja7fh7c] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
[b-zb0ja7fh7c] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-zb0ja7fh7c] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
}
[b-zb0ja7fh7c] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-zb0ja7fh7c] .dropdown-item:hover {
background-color: #f0dad3;
}
/* Toggle Sidebar Button */
[b-zb0ja7fh7c] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Main Container */
[b-zb0ja7fh7c] .container-v3 {
flex: 1;
max-width: 1200px;
margin: 30px auto;
margin-left: 280px;
padding: 0 20px;
padding-bottom: 40px;
display: flex;
flex-direction: column;
gap: 40px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-zb0ja7fh7c] .container-v3.sidebar-hidden {
margin-left: 0;
}
/* Granny Hero Section */
[b-zb0ja7fh7c] .granny-hero-section {
/* background: linear-gradient(135deg, rgba(255, 249, 240, 0.95) 0%, rgba(255, 244, 228, 0.95) 100%);
border-radius: 25px;
padding: 50px 40px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid #f5e5d3; */
position: relative;
overflow: visible;
padding: clamp(1.5rem, 4vw, 3rem) 0;
border-bottom: 1px solid var(--lov-line);
}
[b-zb0ja7fh7c] .granny-hero-section::before {
content: none;
display: none;
}
[b-zb0ja7fh7c] .granny-hero-section::after {
content: none;
display: none;
}
[b-zb0ja7fh7c] .granny-hero-content {
display: flex;
align-items: flex-start;
gap: 0;
position: relative;
z-index: 1;
}
[b-zb0ja7fh7c] .granny-illustration-wrapper {
display: none;
}
[b-zb0ja7fh7c] .granny-illustration {
max-width: 320px;
height: auto;
filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}
[b-zb0ja7fh7c] .granny-welcome-text {
flex: 1;
max-width: 46rem;
}
[b-zb0ja7fh7c] .granny-title {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: clamp(2.25rem, 4vw, 3.75rem);
font-weight: 450;
color: var(--lov-ink);
margin: 0 0 20px 0;
line-height: 1.08;
}
[b-zb0ja7fh7c] .granny-subtitle {
font-size: 1.2em;
max-width: 62ch;
color: var(--lov-muted);
line-height: 1.6;
margin: 0;
}
/* Hero Action Buttons */
[b-zb0ja7fh7c] .granny-hero-actions {
display: flex;
gap: 16px;
margin-top: 28px;
flex-wrap: wrap;
}
[b-zb0ja7fh7c] .granny-help-link {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 1rem;
color: var(--lov-muted);
font-size: 0.98rem;
font-style: italic;
text-decoration: none;
border-bottom: 1px solid var(--lov-line);
padding-bottom: 0.15rem;
transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
[b-zb0ja7fh7c] .granny-help-link:hover {
color: var(--lov-ink);
border-color: var(--lov-green);
transform: none;
}
[b-zb0ja7fh7c] .btn-hero-primary {
padding: 14px 32px;
background: var(--lov-green);
color: var(--lov-on-green);
border: 1px solid var(--lov-green);
border-radius: 6px;
font-weight: 700;
font-size: 1.05em;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: none;
}
[b-zb0ja7fh7c] .btn-hero-primary:hover {
background: var(--lov-green);
transform: none;
box-shadow: none;
}
[b-zb0ja7fh7c] .btn-hero-secondary {
padding: 14px 32px;
background: var(--lov-paper);
color: var(--lov-ink);
border: 1px solid var(--lov-line);
border-radius: 6px;
font-weight: 600;
font-size: 1.05em;
cursor: pointer;
transition: all 0.3s ease;
}
[b-zb0ja7fh7c] .btn-hero-secondary:hover {
background: var(--lov-paper);
border-color: var(--lov-green);
transform: none;
}
[b-zb0ja7fh7c] .btn-hero-primary:focus-visible,
[b-zb0ja7fh7c] .btn-hero-secondary:focus-visible,
[b-zb0ja7fh7c] .btn-theme:focus-visible,
[b-zb0ja7fh7c] .granny-card-button:focus-visible,
[b-zb0ja7fh7c] .granny-action-btn:focus-visible,
[b-zb0ja7fh7c] .granny-help-link:focus-visible {
outline: 2px solid var(--lov-focus);
outline-offset: 3px;
}
/* Granny Section Base */
[b-zb0ja7fh7c] .granny-section {
/* background: rgba(255, 255, 255, 0.7); */
-webkit-backdrop-filter: none;
backdrop-filter: none;
/* border-radius: 20px; */
padding: 40px;
/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(245, 229, 211, 0.6); */
}
[b-zb0ja7fh7c] .granny-section-header {
text-align: center;
margin-bottom: 35px;
}
[b-zb0ja7fh7c] .granny-section-title {
/* inherited font-sans */
font-size: 2em;
font-weight: 700;
color: var(--lov-ink);
margin: 0 0 10px 0;
}
[b-zb0ja7fh7c] .granny-section-subtitle {
font-size: 1.1em;
color: var(--lov-muted);
margin: 0;
font-style: italic;
}
/* Cards Grid */
[b-zb0ja7fh7c] .granny-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
[b-zb0ja7fh7c] .granny-card {
background: var(--lov-surface);
border-radius: 6px;
padding: 30px;
box-shadow: none;
border: 1px solid var(--lov-line);
transition: all 0.3s ease;
}
[b-zb0ja7fh7c] .granny-card:hover {
transform: none;
box-shadow: none;
border-color: var(--lov-green);
}
[b-zb0ja7fh7c] .granny-card-button {
width: 100%;
text-align: left;
appearance: none;
cursor: pointer;
}
[b-zb0ja7fh7c] .granny-card-highlight {
background: var(--lov-green);
border-color: var(--lov-green);
}
[b-zb0ja7fh7c] .granny-card-highlight .granny-card-title,
[b-zb0ja7fh7c] .granny-card-highlight .granny-card-text {
color: var(--lov-on-green);
}
[b-zb0ja7fh7c] .granny-card-icon {
font-size: 2.5em;
margin-bottom: 15px;
text-align: center;
}
[b-zb0ja7fh7c] .granny-card-title {
/* inherited font-sans */
font-size: 1.3em;
font-weight: 700;
color: var(--lov-ink);
margin: 0 0 10px 0;
}
[b-zb0ja7fh7c] .granny-card-text {
font-size: 1em;
color: var(--lov-muted);
line-height: 1.6;
margin: 0;
}
/* Progress Cards */
[b-zb0ja7fh7c] .granny-progress-shell {
display: flex;
flex-direction: column;
gap: 18px;
}
[b-zb0ja7fh7c] .granny-progress-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
}
[b-zb0ja7fh7c] .granny-progress-card {
background: var(--lov-surface);
border-radius: 6px;
padding: 30px;
text-align: center;
box-shadow: none;
border: 1px solid var(--lov-line);
transition: all 0.3s ease;
}
[b-zb0ja7fh7c] .granny-progress-card-primary {
min-height: 220px;
display: flex;
flex-direction: column;
justify-content: center;
}
[b-zb0ja7fh7c] .granny-progress-card-glow {
background: var(--lov-surface);
box-shadow: none;
}
[b-zb0ja7fh7c] .granny-progress-card:hover {
transform: none;
box-shadow: none;
border-color: var(--lov-green);
}
[b-zb0ja7fh7c] .progress-icon {
font-size: 3em;
margin-bottom: 15px;
}
[b-zb0ja7fh7c] .progress-number {
font-size: 3em;
font-weight: 700;
color: var(--lov-ink);
margin-bottom: 10px;
}
[b-zb0ja7fh7c] .progress-label {
font-size: 1em;
color: var(--lov-muted);
font-weight: 600;
}
[b-zb0ja7fh7c] .progress-subtitle {
font-size: 0.9em;
color: var(--lov-muted);
margin-top: 4px;
line-height: 1.4;
}
[b-zb0ja7fh7c] .granny-progress-breakdown {
background: var(--lov-paper);
border: 1px solid var(--lov-line);
border-radius: 6px;
padding: 22px 24px 24px;
box-shadow: none;
}
[b-zb0ja7fh7c] .granny-progress-breakdown-intro {
margin: 0 0 16px 0;
color: var(--lov-muted);
font-size: 0.98rem;
font-style: italic;
text-align: center;
}
[b-zb0ja7fh7c] .granny-progress-detail-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
}
[b-zb0ja7fh7c] .granny-progress-detail-card {
background: var(--lov-surface);
border: 1px solid var(--lov-line);
border-radius: 6px;
padding: 18px 16px;
text-align: center;
min-height: 142px;
display: flex;
flex-direction: column;
justify-content: center;
box-shadow: none;
}
[b-zb0ja7fh7c] .progress-detail-icon {
font-size: 1.5rem;
margin-bottom: 10px;
}
[b-zb0ja7fh7c] .progress-detail-number {
font-size: 2rem;
font-weight: 700;
color: var(--lov-ink);
line-height: 1;
margin-bottom: 8px;
}
[b-zb0ja7fh7c] .progress-detail-label {
font-size: 0.98rem;
font-weight: 700;
color: var(--lov-ink);
margin-bottom: 5px;
}
[b-zb0ja7fh7c] .progress-detail-subtitle {
font-size: 0.86rem;
color: var(--lov-muted);
line-height: 1.35;
}
/* Featured Theme */
[b-zb0ja7fh7c] .granny-featured-theme {
display: flex;
background: var(--lov-surface);
border-radius: 6px;
overflow: hidden;
cursor: pointer;
box-shadow: none;
border: 1px solid var(--lov-line);
transition: all 0.3s ease;
}
[b-zb0ja7fh7c] .granny-featured-theme:hover {
transform: none;
box-shadow: none;
border-color: var(--lov-green);
}
[b-zb0ja7fh7c] .theme-image {
width: 40%;
object-fit: cover;
border-radius: 6px;
margin: 1em;
}
[b-zb0ja7fh7c] .theme-content {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
[b-zb0ja7fh7c] .theme-title {
/* inherited font-sans */
font-size: 1.8em;
font-weight: 700;
color: var(--lov-ink);
margin: 0 0 15px 0;
}
[b-zb0ja7fh7c] .theme-description {
font-size: 1.1em;
color: var(--lov-muted);
line-height: 1.6;
margin: 0 0 25px 0;
}
[b-zb0ja7fh7c] .btn-theme {
align-self: flex-start;
padding: 12px 30px;
background-color: var(--lov-green);
color: var(--lov-on-green);
border: 1px solid var(--lov-green);
border-radius: 6px;
font-weight: 700;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
}
[b-zb0ja7fh7c] .btn-theme:hover {
background-color: var(--lov-green);
transform: none;
box-shadow: none;
}
/* Granny's Safe Space CTA Banner */
/* ::deep .granny-safe-space {
background: linear-gradient(135deg, rgba(251, 207, 168, 0.15) 0%, rgba(255, 249, 240, 0.6) 100%);
} */
[b-zb0ja7fh7c] .granny-safe-space-card {
display: flex;
/* background: linear-gradient(135deg, #FBE8D3 0%, #F5D5B8 100%);
/* background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%); */
/* border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
border: 2px solid #E8C9A8;
transition: all 0.3s ease; */
}
[b-zb0ja7fh7c] .granny-safe-space-card:hover {
transform: translateY(-4px);
box-shadow: 0 10px 35px rgba(0, 0, 0, 0.15);
}
[b-zb0ja7fh7c] .safe-space-image {
width: 40%;
object-fit: cover;
border-radius: 20px;
margin: 1.0em;
mix-blend-mode: multiply
}
[b-zb0ja7fh7c] .safe-space-content {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
[b-zb0ja7fh7c] .safe-space-title {
/* inherited font-sans */
font-size: 1.8em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 15px 0;
}
[b-zb0ja7fh7c] .safe-space-description {
font-size: 1.1em;
color: #5A5550;
line-height: 1.7;
margin: 0 0 25px 0;
}
[b-zb0ja7fh7c] .btn-safe-space {
background-color: #E8B076;
border-color: #D9A066;
}
[b-zb0ja7fh7c] .btn-safe-space:hover {
background-color: #D9A066;
box-shadow: 0 4px 18px rgba(232, 176, 118, 0.5);
}
/* Wisdom Section */
[b-zb0ja7fh7c] .granny-wisdom {
background: var(--lov-paper);
border-top: 1px solid var(--lov-line);
border-bottom: 1px solid var(--lov-line);
}
[b-zb0ja7fh7c] .granny-wisdom-card {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
[b-zb0ja7fh7c] .granny-quote-icon {
font-size: 3em;
margin-bottom: 20px;
opacity: 0.7;
}
[b-zb0ja7fh7c] .granny-quote {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
[b-zb0ja7fh7c] .granny-quote p {
font-size: 1.4em;
font-style: italic;
color: var(--lov-ink);
line-height: 1.6;
margin: 0;
}
[b-zb0ja7fh7c] .granny-signature {
font-size: 1.1em;
color: var(--lov-muted);
font-weight: 600;
}
/* Quick Actions */
[b-zb0ja7fh7c] .granny-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
[b-zb0ja7fh7c] .granny-action-btn {
background: var(--lov-surface);
border: 1px solid var(--lov-line);
border-radius: 6px;
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
cursor: pointer;
transition: all 0.3s ease;
/* inherited font-sans */
}
[b-zb0ja7fh7c] .granny-action-btn:hover {
transform: none;
box-shadow: none;
background: var(--lov-paper);
border-color: var(--lov-green);
}
[b-zb0ja7fh7c] .action-icon {
font-size: 2.5em;
}
[b-zb0ja7fh7c] .action-label {
font-size: 1.1em;
font-weight: 700;
color: var(--lov-ink);
}
/* Sidebar Overlay */
.sidebar-overlay[b-zb0ja7fh7c] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none; /* Prevent scroll-through when overlay is visible */
}
.sidebar-overlay.hidden[b-zb0ja7fh7c] {
display: none;
}
/* Responsive Styles */
@media (max-width: 1024px) {
[b-zb0ja7fh7c] .mobile-top-bar {
display: flex !important;
}
[b-zb0ja7fh7c] .toggle-sidebar {
display: none !important;
}
[b-zb0ja7fh7c] .app-layout {
padding-top: 60px;
}
[b-zb0ja7fh7c] .container-v3 {
margin-left: 0 !important;
margin-top: 70px;
}
[b-zb0ja7fh7c] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-zb0ja7fh7c] .sidebar.visible {
transform: translateX(0);
}
[b-zb0ja7fh7c] .granny-hero-content {
flex-direction: row;
text-align: left;
}
[b-zb0ja7fh7c] .granny-hero-actions {
justify-content: flex-start;
}
[b-zb0ja7fh7c] .granny-illustration-wrapper {
transform: none;
}
[b-zb0ja7fh7c] .granny-illustration {
width: 300px;
}
[b-zb0ja7fh7c] .granny-featured-theme {
flex-direction: column;
}
[b-zb0ja7fh7c] .theme-image {
width: 100%;
margin: 0;
border-radius: 6px 6px 0 0;
}
[b-zb0ja7fh7c] .granny-safe-space-card {
flex-direction: column;
}
[b-zb0ja7fh7c] .safe-space-image {
width: 100%;
margin: 0;
border-radius: 20px 20px 0 0;
max-height: 280px;
}
[b-zb0ja7fh7c] .safe-space-content {
text-align: center;
}
[b-zb0ja7fh7c] .btn-safe-space {
align-self: center;
}
}
@media (max-width: 768px) {
/* Mobile touch scroll fixes - REMOVED */
[b-zb0ja7fh7c] .app-layout {
overflow-x: hidden;
}
[b-zb0ja7fh7c] .container-v3 {
padding: 0 var(--mobile-page-margin);
margin-top: 40px;
gap: 30px;
}
[b-zb0ja7fh7c] .granny-hero-section {
padding: 28px 0;
}
[b-zb0ja7fh7c] .granny-hero-actions {
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
gap: 12px;
}
[b-zb0ja7fh7c] .btn-hero-primary,
[b-zb0ja7fh7c] .btn-hero-secondary {
flex: 1 1 180px;
width: auto;
max-width: none;
padding: 12px 24px;
font-size: 1em;
}
[b-zb0ja7fh7c] .granny-title {
font-size: 2em;
}
[b-zb0ja7fh7c] .granny-subtitle {
font-size: 1.1em;
}
[b-zb0ja7fh7c] .granny-section {
padding: 30px 20px;
}
[b-zb0ja7fh7c] .granny-section-title {
font-size: 1.6em;
}
[b-zb0ja7fh7c] .granny-cards-grid {
grid-template-columns: 1fr;
}
[b-zb0ja7fh7c] .granny-progress-cards {
grid-template-columns: 1fr;
}
[b-zb0ja7fh7c] .granny-progress-detail-grid {
grid-template-columns: 1fr;
}
[b-zb0ja7fh7c] .theme-content {
padding: 25px;
}
[b-zb0ja7fh7c] .theme-title {
font-size: 1.5em;
}
[b-zb0ja7fh7c] .granny-quote p {
font-size: 1.2em;
}
[b-zb0ja7fh7c] .granny-actions-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
[b-zb0ja7fh7c] .granny-illustration {
width: 300px;
}
[b-zb0ja7fh7c] .granny-title {
font-size: 1.8em;
}
[b-zb0ja7fh7c] .granny-subtitle {
font-size: 1em;
}
[b-zb0ja7fh7c] .granny-section-title {
font-size: 1.4em;
}
[b-zb0ja7fh7c] .granny-card {
padding: 20px;
}
[b-zb0ja7fh7c] .granny-progress-card {
padding: 20px;
}
[b-zb0ja7fh7c] .progress-number {
font-size: 2.5em;
}
[b-zb0ja7fh7c] .granny-progress-breakdown {
padding: 18px;
}
[b-zb0ja7fh7c] .granny-progress-detail-card {
min-height: unset;
}
[b-zb0ja7fh7c] .progress-detail-number {
font-size: 1.8rem;
}
}
/* Footer alignment to follow sidebar on desktop (mirrors ThemesAll layout) */
[b-zb0ja7fh7c] .main-footer {
margin-left: 280px;
width: calc(100% - 280px);
margin-top: 80px;
padding: 60px 0 30px 0;
/*background-color: #FAF3E5;
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(245, 229, 211, 0.6);*/
}
[b-zb0ja7fh7c] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
@media (max-width: 992px) {
[b-zb0ja7fh7c] .main-footer {
margin-left: 0;
width: 100%;
}
}
/* /Components/Pages/GrannysError.razor.rz.scp.css */
/* Granny-specific recovery page. Mirrors the foyer language without becoming a full landing page. */
.error-layout[b-urgalnhb7z],
[b-urgalnhb7z] .app-layout {
--error-bg: var(--lov-paper);
--error-surface: var(--lov-surface);
--error-border: var(--lov-line);
--error-ink: var(--lov-ink);
--error-muted: var(--lov-muted);
display: block;
min-height: 100vh;
width: 100%;
background: var(--error-bg);
color: var(--error-ink);
overflow-x: hidden;
}
[b-urgalnhb7z] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
}
[b-urgalnhb7z] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid var(--lov-line);
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-urgalnhb7z] .sidebar.hidden {
transform: translateX(-100%);
}
[b-urgalnhb7z] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
[b-urgalnhb7z] .app-logo-link {
display: block;
width: 100%;
text-align: center;
text-decoration: none;
margin-top: -1.2rem;
}
[b-urgalnhb7z] .sidebar-logo img {
display: inline-block;
width: auto;
height: 50px;
max-width: 180px;
margin: 0;
border: 0;
border-radius: 0;
box-shadow: none;
vertical-align: middle;
}
[b-urgalnhb7z] .sidebar-menu {
width: 100%;
}
[b-urgalnhb7z] .sidebar-bottom,
[b-urgalnhb7z] .sidebar-guest-actions {
margin-top: auto;
padding-top: 1rem;
width: 100%;
}
[b-urgalnhb7z] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
.sidebar-overlay[b-urgalnhb7z] {
position: fixed;
inset: 0;
z-index: 9;
background: var(--lov-ink);
opacity: 0.3;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-urgalnhb7z] {
display: none;
}
[b-urgalnhb7z] .container-v3.granny-error-page {
flex: 1;
min-width: 0;
width: min(1180px, calc(100% - 328px));
max-width: 1180px;
margin: 0 auto;
padding: 48px 48px 56px;
display: flex;
flex-direction: column;
gap: 48px;
box-sizing: border-box;
position: relative;
left: 140px;
transition: left 0.3s ease, width 0.3s ease;
}
[b-urgalnhb7z] .container-v3.granny-error-page.sidebar-hidden {
width: min(1180px, calc(100% - 48px));
left: 0;
}
.error-hero[b-urgalnhb7z] {
display: block;
min-height: 0;
padding: 12px 0 28px;
background: transparent;
border: 0;
box-shadow: none;
}
.error-hero-visual[b-urgalnhb7z],
.error-granny[b-urgalnhb7z] {
display: none;
}
.error-hero-copy[b-urgalnhb7z] {
max-width: 46rem;
display: flex;
flex-direction: column;
align-items: flex-start;
padding-top: 0;
}
.error-kicker[b-urgalnhb7z],
.support-kicker[b-urgalnhb7z] {
margin-bottom: 12px;
color: var(--lov-green);
font-size: 0.88rem;
font-weight: 800;
letter-spacing: 0;
text-transform: uppercase;
}
.error-hero h1[b-urgalnhb7z],
.recovery-heading h2[b-urgalnhb7z],
.support-copy h2[b-urgalnhb7z] {
margin: 0;
color: var(--error-ink);
font-family: var(--font-serif);
font-weight: 700;
letter-spacing: 0;
}
.error-hero h1[b-urgalnhb7z] {
max-width: 680px;
font-size: clamp(2.4rem, 4vw, 3.2rem);
line-height: 1.08;
}
.error-hero p[b-urgalnhb7z] {
max-width: 570px;
margin: 18px 0 0;
color: var(--error-muted);
font-size: 1.08rem;
line-height: 1.6;
}
.error-hero-actions[b-urgalnhb7z] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 24px;
}
.error-button[b-urgalnhb7z] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 190px;
min-height: 52px;
max-width: 100%;
padding: 12px 26px;
border-radius: 6px;
border: 1px solid var(--lov-line);
color: var(--lov-ink);
background: var(--lov-paper);
font-family: var(--font-sans);
font-size: 0.98rem;
font-weight: 800;
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
transition: background 0.2s ease, border-color 0.2s ease;
}
.error-button:hover[b-urgalnhb7z],
.error-button:focus-visible[b-urgalnhb7z] {
transform: none;
}
.error-button-primary[b-urgalnhb7z] {
background: var(--lov-green);
border-color: var(--lov-green);
color: var(--lov-on-green);
box-shadow: none;
}
.error-button-primary:hover[b-urgalnhb7z],
.error-button-primary:focus-visible[b-urgalnhb7z] {
background: var(--lov-green);
box-shadow: none;
}
.error-button-secondary[b-urgalnhb7z] {
background: var(--lov-paper);
border-color: var(--lov-line);
}
.error-button-secondary:hover[b-urgalnhb7z],
.error-button-secondary:focus-visible[b-urgalnhb7z] {
background: var(--lov-paper);
border-color: var(--lov-green);
box-shadow: none;
}
.error-button:focus-visible[b-urgalnhb7z],
.recovery-card:focus-visible[b-urgalnhb7z],
.technical-details summary:focus-visible[b-urgalnhb7z] {
outline: 2px solid var(--lov-focus);
outline-offset: 3px;
}
.recovery-section[b-urgalnhb7z] {
display: grid;
gap: 26px;
}
.recovery-heading[b-urgalnhb7z] {
max-width: 720px;
padding: 0 4px;
}
.recovery-heading h2[b-urgalnhb7z],
.support-copy h2[b-urgalnhb7z] {
font-size: 2.55rem;
line-height: 1.08;
}
.recovery-heading p[b-urgalnhb7z],
.support-copy p[b-urgalnhb7z] {
margin: 10px 0 0;
color: var(--error-muted);
font-size: 1rem;
line-height: 1.6;
}
.recovery-grid[b-urgalnhb7z] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.recovery-card[b-urgalnhb7z] {
min-height: 0;
display: grid;
grid-template-columns: 40px 1fr;
gap: 14px;
align-items: start;
padding: 20px;
border: 1px solid var(--error-border);
border-radius: 6px;
background: var(--error-surface);
color: var(--error-ink);
text-decoration: none;
box-shadow: none;
transition: border-color 0.2s ease, background 0.2s ease;
}
.recovery-card:hover[b-urgalnhb7z],
.recovery-card:focus-visible[b-urgalnhb7z] {
transform: none;
border-color: var(--lov-green);
background: var(--lov-paper);
box-shadow: none;
}
.recovery-card-featured[b-urgalnhb7z] {
background: var(--lov-surface);
}
.recovery-icon[b-urgalnhb7z] {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 6px;
background: var(--lov-paper);
color: var(--lov-green);
box-shadow: none;
}
.recovery-icon svg[b-urgalnhb7z] {
width: 25px;
height: 25px;
display: block;
vector-effect: non-scaling-stroke;
}
.recovery-copy[b-urgalnhb7z] {
display: grid;
gap: 9px;
min-width: 0;
}
.recovery-card strong[b-urgalnhb7z] {
color: var(--error-ink);
font-family: var(--font-serif);
font-size: 1.2rem;
line-height: 1.18;
}
.recovery-copy > span[b-urgalnhb7z] {
color: var(--error-muted);
font-size: 0.96rem;
line-height: 1.5;
}
.support-panel[b-urgalnhb7z] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 26px;
padding: 34px 38px;
border: 1px solid var(--error-border);
border-radius: 6px;
background: var(--error-surface);
box-shadow: none;
}
.support-action[b-urgalnhb7z] {
white-space: nowrap;
}
.technical-details[b-urgalnhb7z] {
grid-column: 1 / -1;
margin-top: 2px;
color: var(--error-muted);
}
.technical-details summary[b-urgalnhb7z] {
width: fit-content;
cursor: pointer;
color: var(--lov-green);
font-weight: 800;
}
.technical-details p[b-urgalnhb7z] {
display: grid;
grid-template-columns: 100px minmax(0, 1fr);
gap: 12px;
align-items: baseline;
margin: 14px 0 0;
font-size: 0.92rem;
}
.technical-details code[b-urgalnhb7z] {
min-width: 0;
overflow-wrap: anywhere;
border-radius: 6px;
border: 1px solid var(--lov-line);
background: var(--lov-paper);
padding: 0.3rem 0.52rem;
color: var(--lov-ink);
font-family: Consolas, "Fira Code", monospace;
box-shadow: none;
}
[b-urgalnhb7z] .main-footer {
width: min(1180px, calc(100% - 328px));
margin: 76px auto 0;
padding: 60px 48px 30px;
box-sizing: border-box;
position: relative;
left: 140px;
}
[b-urgalnhb7z] .main-footer.sidebar-hidden {
width: min(1180px, calc(100% - 48px));
left: 0;
}
[b-urgalnhb7z] .footer-container {
max-width: none;
margin: 0;
padding: 0;
}
@media (max-width: 1024px) {
.error-layout[b-urgalnhb7z],
[b-urgalnhb7z] .app-layout {
padding-top: var(--mobile-topbar-height, 60px);
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
}
[b-urgalnhb7z] .toggle-sidebar {
display: none !important;
}
[b-urgalnhb7z] .sidebar {
top: var(--mobile-topbar-height, 60px);
height: calc(100vh - var(--mobile-topbar-height, 60px));
transform: translateX(-100%);
}
[b-urgalnhb7z] .sidebar.visible {
transform: translateX(0);
}
[b-urgalnhb7z] .sidebar.hidden {
transform: translateX(-100%);
}
[b-urgalnhb7z] .container-v3.granny-error-page,
[b-urgalnhb7z] .container-v3.granny-error-page.sidebar-hidden {
width: 100%;
max-width: 100%;
left: 0;
margin: 0;
padding: 46px 22px 42px;
}
.error-hero[b-urgalnhb7z] {
min-height: 0;
text-align: left;
}
.error-hero-copy[b-urgalnhb7z] {
align-items: flex-start;
max-width: 46rem;
}
.error-hero h1[b-urgalnhb7z] {
font-size: 3rem;
}
.error-hero-actions[b-urgalnhb7z] {
justify-content: flex-start;
}
.support-panel[b-urgalnhb7z] {
grid-template-columns: 1fr;
text-align: center;
}
.support-action[b-urgalnhb7z],
.technical-details summary[b-urgalnhb7z] {
justify-self: center;
}
[b-urgalnhb7z] .main-footer,
[b-urgalnhb7z] .main-footer.sidebar-hidden {
width: 100%;
left: 0;
margin-top: 56px;
padding-left: 22px;
padding-right: 22px;
}
}
@media (max-width: 640px) {
[b-urgalnhb7z] .container-v3.granny-error-page,
[b-urgalnhb7z] .container-v3.granny-error-page.sidebar-hidden {
gap: 34px;
padding: 20px 14px 38px;
}
.error-hero[b-urgalnhb7z] {
padding-top: 8px;
}
.error-hero h1[b-urgalnhb7z] {
font-size: 2.1rem;
line-height: 1.06;
}
.error-hero p[b-urgalnhb7z] {
font-size: 1rem;
line-height: 1.58;
}
.error-hero-actions[b-urgalnhb7z] {
width: 100%;
flex-direction: column;
gap: 12px;
}
.error-button[b-urgalnhb7z] {
width: 100%;
min-width: 0;
min-height: 44px;
white-space: normal;
}
.recovery-heading h2[b-urgalnhb7z],
.support-copy h2[b-urgalnhb7z] {
font-size: 2.02rem;
}
.recovery-grid[b-urgalnhb7z] {
grid-template-columns: 1fr;
}
.recovery-card[b-urgalnhb7z] {
min-height: 0;
padding: 22px 20px;
}
.support-panel[b-urgalnhb7z] {
padding: 24px 18px;
}
.technical-details p[b-urgalnhb7z] {
grid-template-columns: 1fr;
gap: 6px;
text-align: left;
}
.technical-details summary[b-urgalnhb7z] {
min-height: 44px;
padding-block: 12px;
}
}
@media (prefers-reduced-motion: reduce) {
*[b-urgalnhb7z],
*[b-urgalnhb7z]::before,
*[b-urgalnhb7z]::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}
}
/* /Components/Pages/GrannysNewCorner.razor.rz.scp.css */
/* GrannysNewCorner.razor.css - foyer layout */
.app-layout[b-dp0oy34yb6] {
--foyer-bg: #fff7ee;
--foyer-surface: rgba(255, 252, 246, 0.74);
--foyer-border: #ead9c9;
--foyer-ink: #3f312b;
--foyer-muted: #786b62;
--foyer-accent: #df9f6b;
display: flex;
min-height: 100vh;
width: 100%;
min-width: 0;
overflow-x: hidden;
background:
radial-gradient(circle at 42% 4%, rgba(255, 226, 190, 0.72), transparent 38%),
linear-gradient(90deg, #fffaf4 0, var(--foyer-bg) 36%, #fffaf4 100%);
color: var(--foyer-ink);
}
@media (max-width: 1024px) {
[b-dp0oy34yb6] .toggle-sidebar {
display: none !important;
}
}
.sidebar[b-dp0oy34yb6] {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
.sidebar.hidden[b-dp0oy34yb6] {
transform: translateX(-100%);
}
.sidebar-top-content[b-dp0oy34yb6] {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 1rem;
}
.app-logo-link[b-dp0oy34yb6] {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
.sidebar-logo img[b-dp0oy34yb6] {
max-width: 180px;
width: auto;
height: 50px;
}
[b-dp0oy34yb6] .sidebar-menu {
width: 100%;
}
[b-dp0oy34yb6] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
.foyer-content-shell[b-dp0oy34yb6] {
flex: 1;
min-width: 0;
margin-left: 280px;
transition: margin-left 0.3s ease;
}
.foyer-content-shell.sidebar-hidden[b-dp0oy34yb6] {
margin-left: 0;
}
.foyer-main[b-dp0oy34yb6] {
box-sizing: border-box;
width: min(100%, 1180px);
margin: 0 auto;
padding: 56px 48px 64px;
}
.soft-card[b-dp0oy34yb6] {
background: var(--foyer-surface);
border: 1px solid var(--foyer-border);
border-radius: 12px;
box-shadow: 0 14px 42px rgba(108, 75, 48, 0.035);
}
.foyer-hero[b-dp0oy34yb6] {
margin-bottom: 56px;
}
/* Hero is open paper, not a card */
.foyer-hero-card[b-dp0oy34yb6] {
display: grid;
grid-template-columns: minmax(320px, 0.92fr) minmax(410px, 1fr);
align-items: center;
column-gap: 72px;
min-height: 342px;
background: transparent;
border: 0;
box-shadow: none;
}
.foyer-portrait[b-dp0oy34yb6] {
display: grid;
place-items: end center;
min-height: 360px;
}
.foyer-granny[b-dp0oy34yb6] {
width: min(100%, 470px);
max-height: 360px;
object-fit: contain;
filter: drop-shadow(0 18px 30px rgba(118, 71, 31, 0.18));
}
.foyer-welcome[b-dp0oy34yb6] {
padding-top: 6px;
}
.foyer-welcome h1[b-dp0oy34yb6],
.featured-copy h2[b-dp0oy34yb6],
.foyer-section-heading h2[b-dp0oy34yb6],
.foyer-pause p[b-dp0oy34yb6] {
font-family: var(--font-serif);
letter-spacing: 0;
color: var(--foyer-ink);
}
.foyer-welcome h1[b-dp0oy34yb6] {
max-width: 540px;
margin: 0;
font-size: clamp(2.5rem, 4.2vw, 4.15rem);
line-height: 1.03;
font-weight: 700;
}
.foyer-lede[b-dp0oy34yb6] {
max-width: 430px;
margin: 18px 0 0;
color: #4f4944;
font-size: 1.14rem;
line-height: 1.45;
}
.foyer-actions[b-dp0oy34yb6] {
display: flex;
flex-wrap: wrap;
gap: 18px;
margin-top: 26px;
}
.foyer-button[b-dp0oy34yb6] {
min-width: 190px;
min-height: 52px;
border-radius: 999px;
padding: 0 26px;
border: 1px solid #d8a983;
background: transparent;
color: #382f29;
font-weight: 800;
cursor: pointer;
transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.foyer-button.primary[b-dp0oy34yb6] {
background: var(--foyer-accent);
color: #fffaf4;
border-color: #d6905a;
box-shadow: 0 12px 26px rgba(204, 130, 76, 0.18);
}
.foyer-button:hover[b-dp0oy34yb6],
.whisper-card:hover[b-dp0oy34yb6],
.guest-invitation-card:hover[b-dp0oy34yb6],
.next-card:hover[b-dp0oy34yb6] {
transform: translateY(-2px);
}
.foyer-button.primary:hover[b-dp0oy34yb6] {
background: #d5905f;
}
.foyer-button.secondary:hover[b-dp0oy34yb6] {
background: rgba(255, 239, 224, 0.9);
border-color: #c89167;
color: #8b5a3d;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(143, 95, 68, 0.08), inset 0 0 0 1px rgba(255, 250, 244, 0.58);
}
.foyer-help-link[b-dp0oy34yb6] {
display: inline-flex;
margin-top: 20px;
color: #b28165;
font-size: 0.98rem;
font-style: italic;
text-decoration: none;
}
.foyer-help-link:hover[b-dp0oy34yb6] {
color: #8f5f44;
}
.foyer-section[b-dp0oy34yb6] {
margin-block: 34px;
}
.foyer-proactive[b-dp0oy34yb6] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 20px;
margin: -18px auto 42px;
max-width: 900px;
padding: 18px 22px;
border: 1px solid rgba(220, 184, 151, 0.68);
border-radius: 16px;
background: rgba(255, 251, 245, 0.76);
box-shadow: 0 12px 34px rgba(108, 75, 48, 0.045);
}
.proactive-mark[b-dp0oy34yb6] {
display: grid;
place-items: center;
width: 44px;
height: 44px;
border-radius: 50%;
background: #fff0e3;
color: #bc6e43;
}
.proactive-mark svg[b-dp0oy34yb6] {
width: 23px;
height: 23px;
}
.proactive-copy[b-dp0oy34yb6] {
min-width: 0;
}
.proactive-eyebrow[b-dp0oy34yb6] {
margin: 0 0 3px;
color: #b16d49;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.proactive-copy h2[b-dp0oy34yb6] {
margin: 0;
color: var(--foyer-ink);
font-family: var(--font-serif);
font-size: 1.18rem;
line-height: 1.2;
}
.proactive-copy > p:last-child[b-dp0oy34yb6] {
margin: 5px 0 0;
color: var(--foyer-muted);
font-size: 0.93rem;
line-height: 1.4;
}
.proactive-action[b-dp0oy34yb6] {
border: 0;
border-bottom: 1px solid rgba(177, 109, 73, 0.38);
background: transparent;
color: #a55f3b;
cursor: pointer;
font-size: 0.9rem;
font-weight: 800;
padding: 7px 2px 5px;
white-space: nowrap;
}
.proactive-action:hover[b-dp0oy34yb6] {
color: #7f462d;
border-bottom-color: #a55f3b;
}
.proactive-action:focus-visible[b-dp0oy34yb6] {
outline: 3px solid rgba(223, 159, 107, 0.3);
outline-offset: 4px;
border-radius: 3px;
}
.foyer-section-heading[b-dp0oy34yb6] {
display: grid;
gap: 6px;
margin-bottom: 24px;
}
.foyer-section-heading.centered[b-dp0oy34yb6] {
text-align: center;
justify-items: center;
}
.foyer-section-heading h2[b-dp0oy34yb6] {
margin: 0;
font-size: clamp(1.55rem, 2.3vw, 2.15rem);
line-height: 1.12;
font-weight: 700;
}
.foyer-section-heading p[b-dp0oy34yb6] {
margin: 0;
color: var(--foyer-muted);
font-size: 1rem;
font-style: italic;
line-height: 1.4;
}
.whispers-row[b-dp0oy34yb6],
.story-grid[b-dp0oy34yb6],
.next-grid[b-dp0oy34yb6] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 26px;
}
.whisper-card[b-dp0oy34yb6] {
min-height: 190px;
padding: 32px 30px;
border-radius: 12px;
display: grid;
grid-template-columns: 52px 1fr;
gap: 20px;
align-items: start;
text-align: left;
cursor: pointer;
}
.whisper-icon[b-dp0oy34yb6],
.guest-invitation-icon[b-dp0oy34yb6],
.next-icon[b-dp0oy34yb6],
.story-icon[b-dp0oy34yb6] {
display: grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 50%;
background: #fff0e3;
color: #c46f3f;
font-style: normal;
font-size: 1.25rem;
box-shadow: inset 0 0 0 1px rgba(232, 211, 193, 0.58);
}
.whisper-icon svg[b-dp0oy34yb6],
.guest-invitation-icon svg[b-dp0oy34yb6],
.next-icon svg[b-dp0oy34yb6],
.story-icon svg[b-dp0oy34yb6],
.pause-icon svg[b-dp0oy34yb6] {
width: 25px;
height: 25px;
display: block;
vector-effect: non-scaling-stroke;
}
.whisper-copy[b-dp0oy34yb6],
.next-copy[b-dp0oy34yb6] {
display: grid;
gap: 10px;
}
.whisper-copy strong[b-dp0oy34yb6] {
max-width: 170px;
color: #3f312b;
font-family: var(--font-serif);
font-size: 1.22rem;
line-height: 1.18;
}
.whisper-copy span[b-dp0oy34yb6],
.next-copy span[b-dp0oy34yb6] {
color: #4f4944;
font-size: 0.96rem;
line-height: 1.42;
}
.whisper-copy em[b-dp0oy34yb6] {
margin-top: 10px;
color: #cc7544;
font-style: normal;
font-size: 0.93rem;
}
.story-section[b-dp0oy34yb6] {
margin-top: 34px;
}
.story-grid[b-dp0oy34yb6] {
gap: 28px;
}
.story-card[b-dp0oy34yb6] {
display: grid;
justify-items: center;
align-content: center;
min-height: 248px;
padding: 34px 28px;
text-align: center;
}
.story-card + .story-card[b-dp0oy34yb6] {
margin-left: 0;
}
.story-card .story-icon[b-dp0oy34yb6] {
margin-bottom: 18px;
}
.story-icon.cloud[b-dp0oy34yb6] {
background: #fff0de;
}
.story-icon.sparkle[b-dp0oy34yb6] {
background: #fff0e2;
}
.story-icon.star[b-dp0oy34yb6] {
background: #fff3cf;
}
.story-card strong[b-dp0oy34yb6] {
font-family: var(--font-serif);
color: var(--foyer-muted);
font-size: 2.95rem;
font-weight: 560;
line-height: 1;
font-variation-settings: "SOFT" 70, "WONK" 0.35;
}
.story-card span:not(.story-icon)[b-dp0oy34yb6] {
margin-top: 8px;
color: #2f2b27;
font-size: 1.02rem;
line-height: 1.35;
}
.story-card small[b-dp0oy34yb6] {
max-width: 220px;
margin-top: 7px;
color: #665d55;
font-size: 0.92rem;
line-height: 1.35;
}
.story-breakdown[b-dp0oy34yb6] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
margin-top: 28px;
padding: 30px 34px;
}
.breakdown-item[b-dp0oy34yb6] {
display: grid;
grid-template-columns: 52px 1fr;
grid-template-rows: auto auto auto;
column-gap: 20px;
align-items: center;
padding: 0 26px;
}
.breakdown-item + .breakdown-item[b-dp0oy34yb6] {
border-left: 1px solid var(--foyer-border);
}
.breakdown-item .story-icon[b-dp0oy34yb6] {
grid-row: 1 / span 3;
}
.breakdown-item strong[b-dp0oy34yb6] {
font-family: var(--font-serif);
color: var(--foyer-muted);
font-size: 2rem;
font-weight: 560;
line-height: 1;
font-variation-settings: "SOFT" 70, "WONK" 0.35;
}
.breakdown-item span:not(.story-icon)[b-dp0oy34yb6] {
color: #2f2b27;
font-weight: 700;
line-height: 1.25;
}
.breakdown-item small[b-dp0oy34yb6] {
margin-top: 6px;
color: #665d55;
line-height: 1.35;
}
.guest-invitation-section[b-dp0oy34yb6] {
margin-top: 34px;
}
.guest-invitation-heading[b-dp0oy34yb6] {
margin-bottom: 26px;
}
.guest-invitation-grid[b-dp0oy34yb6] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
max-width: 920px;
margin: 0 auto;
}
.guest-invitation-card[b-dp0oy34yb6] {
min-height: 178px;
padding: 28px 30px;
display: grid;
grid-template-columns: 48px minmax(0, 1fr);
gap: 18px;
align-items: start;
align-content: start;
text-align: left;
cursor: pointer;
color: inherit;
font: inherit;
background:
linear-gradient(180deg, rgba(255, 252, 246, 0.86), rgba(255, 246, 235, 0.78));
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.guest-invitation-card:hover[b-dp0oy34yb6] {
border-color: rgba(196, 111, 63, 0.32);
box-shadow: 0 18px 44px rgba(108, 75, 48, 0.07);
}
.guest-invitation-card-wide[b-dp0oy34yb6] {
grid-column: 1 / -1;
min-height: 132px;
align-items: center;
}
.guest-invitation-card:focus-visible[b-dp0oy34yb6] {
outline: 3px solid rgba(196, 111, 63, 0.28);
outline-offset: 4px;
}
.guest-invitation-icon[b-dp0oy34yb6] {
width: 48px;
height: 48px;
background: #fff2e8;
}
.guest-invitation-copy[b-dp0oy34yb6] {
display: grid;
gap: 10px;
}
.guest-invitation-copy strong[b-dp0oy34yb6] {
color: #3f312b;
font-family: var(--font-serif);
font-size: 1.18rem;
line-height: 1.18;
letter-spacing: 0;
}
.guest-invitation-copy span[b-dp0oy34yb6] {
color: #514840;
font-size: 0.95rem;
line-height: 1.45;
}
.featured-section[b-dp0oy34yb6] {
margin-top: 42px;
}
.featured-theme[b-dp0oy34yb6] {
display: grid;
grid-template-columns: minmax(390px, 0.92fr) minmax(360px, 1.08fr);
gap: 46px;
align-items: stretch;
padding: 16px 44px 16px 16px;
overflow: hidden;
}
.featured-image-wrap[b-dp0oy34yb6] {
overflow: hidden;
border-radius: 10px 0 0 10px;
background: #f4e8d8;
height: 100%;
min-height: 280px;
}
.featured-image[b-dp0oy34yb6] {
display: block;
width: 100%;
height: 100%;
min-height: 280px;
object-fit: cover;
}
.featured-copy[b-dp0oy34yb6] {
display: grid;
justify-items: start;
align-content: center;
}
.featured-copy h2[b-dp0oy34yb6] {
margin: 0;
font-size: clamp(1.55rem, 2.4vw, 2.05rem);
line-height: 1.12;
}
.featured-copy > p[b-dp0oy34yb6] {
max-width: 490px;
margin: 18px 0 26px;
color: #4f4944;
line-height: 1.45;
}
.featured-copy .foyer-button[b-dp0oy34yb6] {
min-width: 190px;
min-height: 46px;
padding-inline: 20px;
color: #342820;
background: #ffc99d;
border-color: transparent;
box-shadow: none;
}
.foyer-pause[b-dp0oy34yb6] {
display: grid;
grid-template-columns: 52px 1fr;
align-items: center;
gap: 40px;
min-height: 112px;
margin-block: 38px;
padding: 26px 42px;
}
.pause-icon[b-dp0oy34yb6] {
display: grid;
place-items: center;
width: 56px;
height: 56px;
border-radius: 50%;
background: #fff0e3;
color: #c46f3f;
font-size: 1.65rem;
box-shadow: inset 0 0 0 1px rgba(232, 211, 193, 0.6);
}
.foyer-pause blockquote[b-dp0oy34yb6] {
margin: 0;
text-align: center;
}
.foyer-pause p[b-dp0oy34yb6] {
margin: 0;
font-size: clamp(1.3rem, 2.1vw, 1.85rem);
font-style: italic;
line-height: 1.2;
}
.foyer-pause footer[b-dp0oy34yb6] {
margin-top: 8px;
color: #564d45;
font-size: 0.94rem;
}
.next-section[b-dp0oy34yb6] {
margin-top: 12px;
}
.next-grid[b-dp0oy34yb6] {
gap: 28px;
}
.next-card[b-dp0oy34yb6] {
min-height: 142px;
padding: 28px 26px;
display: grid;
grid-template-columns: 52px 1fr auto;
gap: 18px;
align-items: center;
text-align: left;
cursor: pointer;
}
.next-card + .next-card[b-dp0oy34yb6] {
margin-left: 0;
}
.next-copy strong[b-dp0oy34yb6] {
color: #2f2b27;
font-size: 1rem;
}
.next-arrow[b-dp0oy34yb6] {
align-self: end;
color: #a36543;
font-size: 1.2rem;
}
.sidebar-overlay[b-dp0oy34yb6] {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
touch-action: none;
}
.sidebar-overlay.hidden[b-dp0oy34yb6] {
display: none;
}
.foyer-content-shell[b-dp0oy34yb6] .main-footer {
width: 100%;
margin-left: 0;
margin-top: 56px;
box-sizing: border-box;
}
.foyer-content-shell[b-dp0oy34yb6] .main-footer.sidebar-hidden {
width: 100%;
margin-left: 0;
}
.foyer-content-shell[b-dp0oy34yb6] .footer-container {
margin: 0 auto;
}
@media (max-width: 1024px) {
[b-dp0oy34yb6] .mobile-floating-header {
display: flex !important;
z-index: 1200;
}
.app-layout[b-dp0oy34yb6] {
padding-top: var(--mobile-topbar-height, 60px);
width: 100%;
max-width: 100vw;
}
.sidebar[b-dp0oy34yb6] {
top: var(--mobile-topbar-height, 60px);
height: calc(100vh - var(--mobile-topbar-height, 60px));
transform: translateX(-100%);
}
.sidebar.visible[b-dp0oy34yb6] {
transform: translateX(0);
}
.foyer-content-shell[b-dp0oy34yb6],
.foyer-content-shell.sidebar-hidden[b-dp0oy34yb6] {
margin-left: 0;
width: 100%;
max-width: 100%;
}
.foyer-main[b-dp0oy34yb6] {
width: 100%;
max-width: 720px;
padding: 26px 18px 24px;
}
.foyer-content-shell[b-dp0oy34yb6] .main-footer {
margin-top: 42px;
}
.guest-invitation-grid[b-dp0oy34yb6] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.foyer-hero-card[b-dp0oy34yb6] {
grid-template-columns: 1fr;
min-height: auto;
text-align: center;
justify-items: center;
row-gap: 10px;
}
.foyer-portrait[b-dp0oy34yb6] {
width: 100%;
min-height: clamp(232px, 44vw, 312px);
}
.foyer-granny[b-dp0oy34yb6] {
width: min(78vw, 350px);
max-height: 312px;
}
.foyer-welcome[b-dp0oy34yb6] {
width: 100%;
padding-top: 0;
}
.foyer-welcome h1[b-dp0oy34yb6],
.foyer-lede[b-dp0oy34yb6] {
margin-inline: auto;
}
.foyer-actions[b-dp0oy34yb6] {
justify-content: center;
}
.foyer-help-link[b-dp0oy34yb6] {
justify-content: center;
}
.featured-theme[b-dp0oy34yb6] {
grid-template-columns: 1fr;
padding: 12px;
}
.featured-copy[b-dp0oy34yb6] {
padding: 0 16px 18px;
}
}
@media (max-width: 820px) {
.foyer-main[b-dp0oy34yb6] {
max-width: 680px;
padding-inline: clamp(14px, 4vw, 28px);
}
.foyer-hero[b-dp0oy34yb6] {
margin-bottom: 30px;
}
.foyer-section[b-dp0oy34yb6] {
margin-block: 28px;
}
.foyer-section-heading[b-dp0oy34yb6] {
margin-bottom: 18px;
}
.foyer-section-heading h2[b-dp0oy34yb6] {
font-size: clamp(1.45rem, 6vw, 2rem);
}
.foyer-proactive[b-dp0oy34yb6] {
grid-template-columns: auto minmax(0, 1fr);
margin: -4px 0 30px;
}
.proactive-action[b-dp0oy34yb6] {
grid-column: 2;
justify-self: start;
}
.whispers-row[b-dp0oy34yb6],
.story-grid[b-dp0oy34yb6],
.guest-invitation-grid[b-dp0oy34yb6],
.next-grid[b-dp0oy34yb6],
.story-breakdown[b-dp0oy34yb6] {
grid-template-columns: 1fr;
gap: 14px;
}
.whisper-card + .whisper-card[b-dp0oy34yb6],
.breakdown-item + .breakdown-item[b-dp0oy34yb6] {
margin-left: 0;
margin-top: -1px;
border-left: 0;
}
.breakdown-item[b-dp0oy34yb6] {
padding: 16px 0;
}
.foyer-pause[b-dp0oy34yb6] {
grid-template-columns: 1fr;
justify-items: center;
gap: 14px;
margin-block: 30px;
padding: 24px;
}
}
@media (max-width: 560px) {
.foyer-main[b-dp0oy34yb6] {
padding: 18px var(--mobile-page-margin, 16px) 22px;
}
.foyer-hero[b-dp0oy34yb6] {
margin-bottom: 24px;
}
.foyer-portrait[b-dp0oy34yb6] {
min-height: 224px;
}
.foyer-granny[b-dp0oy34yb6] {
width: min(82vw, 302px);
max-height: 264px;
}
.foyer-welcome h1[b-dp0oy34yb6] {
font-size: clamp(2.05rem, 9.4vw, 2.55rem);
line-height: 1.06;
}
.foyer-lede[b-dp0oy34yb6] {
margin-top: 14px;
font-size: 1rem;
line-height: 1.48;
}
.foyer-actions[b-dp0oy34yb6] {
gap: 12px;
margin-top: 22px;
}
.foyer-actions[b-dp0oy34yb6],
.foyer-button[b-dp0oy34yb6] {
width: 100%;
}
.foyer-button[b-dp0oy34yb6] {
min-width: 0;
min-height: 50px;
padding-inline: 18px;
font-size: 0.96rem;
}
.foyer-help-link[b-dp0oy34yb6] {
margin-top: 16px;
}
.foyer-proactive[b-dp0oy34yb6] {
gap: 13px;
padding: 16px;
}
.proactive-mark[b-dp0oy34yb6] {
width: 39px;
height: 39px;
}
.proactive-copy h2[b-dp0oy34yb6] {
font-size: 1.08rem;
}
.whisper-card[b-dp0oy34yb6],
.guest-invitation-card[b-dp0oy34yb6],
.next-card[b-dp0oy34yb6] {
grid-template-columns: 42px minmax(0, 1fr);
grid-template-rows: auto;
gap: 16px;
min-height: auto;
padding: 18px;
}
.whisper-icon[b-dp0oy34yb6],
.guest-invitation-icon[b-dp0oy34yb6],
.next-icon[b-dp0oy34yb6] {
width: 42px;
height: 42px;
}
.whisper-icon svg[b-dp0oy34yb6],
.guest-invitation-icon svg[b-dp0oy34yb6],
.next-icon svg[b-dp0oy34yb6] {
width: 22px;
height: 22px;
}
.next-arrow[b-dp0oy34yb6] {
display: none;
}
.whisper-copy[b-dp0oy34yb6],
.guest-invitation-copy[b-dp0oy34yb6],
.next-copy[b-dp0oy34yb6] {
min-width: 0;
}
.whisper-copy strong[b-dp0oy34yb6],
.guest-invitation-copy strong[b-dp0oy34yb6] {
max-width: none;
font-size: 1.12rem;
line-height: 1.18;
}
.whisper-copy span[b-dp0oy34yb6],
.guest-invitation-copy span[b-dp0oy34yb6],
.next-copy span[b-dp0oy34yb6] {
font-size: 0.95rem;
line-height: 1.42;
}
.guest-invitation-section[b-dp0oy34yb6],
.featured-section[b-dp0oy34yb6] {
margin-top: 28px;
}
.featured-theme[b-dp0oy34yb6] {
gap: 18px;
padding: 10px;
}
.featured-image-wrap[b-dp0oy34yb6],
.featured-image[b-dp0oy34yb6] {
min-height: 250px;
}
.featured-copy[b-dp0oy34yb6] {
justify-items: center;
padding: 0 8px 16px;
text-align: center;
}
.featured-copy h2[b-dp0oy34yb6] {
font-size: 1.48rem;
}
.featured-copy > p[b-dp0oy34yb6] {
margin: 14px 0 20px;
font-size: 0.98rem;
}
.foyer-pause p[b-dp0oy34yb6] {
font-size: 1.22rem;
}
}
.caring-continuity[b-dp0oy34yb6] {
margin-top: 1.5rem;
}
.caring-continuity-grid[b-dp0oy34yb6] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
max-width: 920px;
margin: 1.25rem auto 0;
}
.care-shelf[b-dp0oy34yb6] {
padding: 1.25rem;
text-align: left;
}
.care-shelf h3[b-dp0oy34yb6] {
margin: 0 0 0.85rem;
color: #61483f;
font-family: var(--font-serif);
font-size: 1.15rem;
}
.care-shelf-item[b-dp0oy34yb6] {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: 0.75rem;
padding: 0.7rem 0;
border-top: 1px solid rgba(123, 90, 83, 0.12);
}
.care-shelf-item time[b-dp0oy34yb6] {
color: #9a7e70;
font-family: var(--font-sans);
font-size: 0.78rem;
}
.care-shelf-item p[b-dp0oy34yb6] {
margin: 0;
color: #5f514a;
font-family: var(--font-sans);
font-size: 0.9rem;
line-height: 1.5;
overflow-wrap: anywhere;
}
.care-shelf small[b-dp0oy34yb6] {
display: block;
margin-top: 0.75rem;
color: #8a776e;
font-family: var(--font-sans);
font-size: 0.76rem;
line-height: 1.45;
}
@media (max-width: 720px) {
.caring-continuity-grid[b-dp0oy34yb6] {
grid-template-columns: 1fr;
}
}
/* LovOne editorial application identity. */
.app-layout[b-dp0oy34yb6] { --foyer-bg: var(--lov-paper); --foyer-surface: var(--lov-surface); --foyer-border: var(--lov-line); --foyer-ink: var(--lov-ink); --foyer-muted: var(--lov-muted); --foyer-accent: var(--lov-green); background: var(--lov-paper); }
.foyer-main[b-dp0oy34yb6] { padding-top: 48px; }
.foyer-hero[b-dp0oy34yb6] { margin-bottom: 64px; }
.foyer-hero-card[b-dp0oy34yb6] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; min-height: 0; }
.foyer-portrait[b-dp0oy34yb6] { grid-column: 2; grid-row: 1; min-height: 0; height: 100%; align-self: stretch; }
.foyer-granny[b-dp0oy34yb6] { width: 100%; height: 100%; min-height: 420px; max-height: 620px; object-fit: cover; object-position: 60% center; filter: none; border-radius: 3px; }
.foyer-welcome[b-dp0oy34yb6] { grid-column: 1; grid-row: 1; padding-block: 24px; text-align: left; }
.foyer-eyebrow[b-dp0oy34yb6] { margin: 0 0 20px; font: 600 .75rem/1.5 var(--font-sans); letter-spacing: .13em; text-transform: uppercase; color: var(--lov-green); }
.foyer-welcome h1[b-dp0oy34yb6] { font-size: clamp(2.3rem, 3.7vw, 3.65rem); font-weight: 450; line-height: 1.08; letter-spacing: -.035em; text-wrap: balance; }
.foyer-lede[b-dp0oy34yb6] { font-size: 1.05rem; line-height: 1.7; color: var(--lov-muted); }
.foyer-actions[b-dp0oy34yb6] { justify-content: flex-start; gap: 12px; }
.foyer-button[b-dp0oy34yb6] { min-width: 0; padding: 14px 20px; font-weight: 600; border-radius: 5px; line-height: 1.5; }
.foyer-button.primary[b-dp0oy34yb6] { background: var(--lov-green); color: var(--lov-on-green); border-color: var(--lov-green); }
.foyer-button.secondary[b-dp0oy34yb6] { color: var(--lov-green); border-color: var(--lov-line); }
.foyer-button:hover[b-dp0oy34yb6] { transform: none; box-shadow: none; }
.foyer-help-link[b-dp0oy34yb6] { color: var(--lov-green); font-size: .9rem; font-style: normal; line-height: 1.6; }
.foyer-disclosure[b-dp0oy34yb6] { max-width: 35rem; margin: 20px 0 0; font-size: .78rem; line-height: 1.65; color: var(--lov-muted); }
.soft-card[b-dp0oy34yb6] { box-shadow: none; border-radius: 5px; }
.foyer-section-heading.centered[b-dp0oy34yb6] { text-align: left; align-items: flex-start; }
.foyer-section-heading h2[b-dp0oy34yb6] { font-weight: 450; font-size: clamp(1.8rem, 2.6vw, 2.5rem); }
.foyer-section-heading p[b-dp0oy34yb6] { font-style: normal; color: var(--lov-muted); line-height: 1.65; }
.guest-invitation-grid[b-dp0oy34yb6] { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 40px; }
.guest-invitation-card[b-dp0oy34yb6], .guest-invitation-card-wide[b-dp0oy34yb6] { grid-column: auto; display: flex; gap: 20px; align-items: flex-start; min-height: 0; padding: 26px 0; background: transparent; border: 0; border-bottom: 1px solid var(--lov-line); border-radius: 0; text-align: left; }
.guest-invitation-card:hover[b-dp0oy34yb6] { background: transparent; transform: none; box-shadow: none; }
.guest-invitation-icon[b-dp0oy34yb6] { flex: 0 0 28px; width: 28px; height: 28px; background: transparent; color: var(--lov-green); box-shadow: none; }
.guest-invitation-copy strong[b-dp0oy34yb6] { color: var(--lov-ink); font-size: 1.35rem; font-weight: 450; }
.guest-invitation-copy span[b-dp0oy34yb6] { color: var(--lov-muted); font-size: .95rem; line-height: 1.6; }
.featured-section[b-dp0oy34yb6] { margin-top: 64px; }
.featured-theme[b-dp0oy34yb6] { padding: 0; overflow: hidden; border: 0; background: var(--lov-green); grid-template-columns: 1fr 1fr; gap: 0; }
.featured-image-wrap[b-dp0oy34yb6], .featured-image[b-dp0oy34yb6] { height: 100%; min-height: 360px; border-radius: 0; }
.featured-copy[b-dp0oy34yb6] { padding: 36px; align-content: center; }
.featured-copy h2[b-dp0oy34yb6], .featured-copy > p[b-dp0oy34yb6] { color: var(--lov-on-green); }
.featured-copy h2[b-dp0oy34yb6] { font-size: 2.25rem; font-weight: 450; }
.featured-copy .foyer-button[b-dp0oy34yb6] { background: var(--lov-paper); color: var(--lov-green); border-color: var(--lov-paper); }
.foyer-pause[b-dp0oy34yb6] { grid-template-columns: minmax(0, 1fr); background: transparent; border: 0; border-bottom: 1px solid var(--lov-line); padding-block: 48px; }
.pause-icon[b-dp0oy34yb6] { display: none; }
.foyer-pause p[b-dp0oy34yb6] { font-weight: 450; }
.foyer-pause footer[b-dp0oy34yb6], .next-copy span[b-dp0oy34yb6], .story-card small[b-dp0oy34yb6], .breakdown-item small[b-dp0oy34yb6], .care-shelf-item p[b-dp0oy34yb6], .care-shelf-item time[b-dp0oy34yb6], .care-shelf small[b-dp0oy34yb6] { color: var(--lov-muted); }
.next-copy strong[b-dp0oy34yb6], .story-card span:not(.story-icon)[b-dp0oy34yb6], .breakdown-item span:not(.story-icon)[b-dp0oy34yb6], .care-shelf h3[b-dp0oy34yb6] { color: var(--lov-ink); }
.foyer-main :is(button,a):focus-visible[b-dp0oy34yb6] { outline: 3px solid var(--lov-green); outline-offset: 5px; }
.featured-copy .foyer-button.primary:hover[b-dp0oy34yb6] { background: var(--lov-paper); color: var(--lov-green); border-color: var(--lov-paper); }
.foyer-main .featured-copy .foyer-button:focus-visible[b-dp0oy34yb6] { outline-color: var(--lov-on-green); }
@media(max-width: 1100px) { .foyer-hero-card[b-dp0oy34yb6] { gap: 24px; } .foyer-main[b-dp0oy34yb6] { padding-inline: 28px; } }
@media(max-width: 700px) {
.foyer-main[b-dp0oy34yb6] { padding: 28px 20px 48px; }
.foyer-hero-card[b-dp0oy34yb6] { grid-template-columns: minmax(0,1fr); gap: 24px; }
.foyer-welcome[b-dp0oy34yb6] { grid-column: 1; grid-row: 1; padding: 0; }
.foyer-portrait[b-dp0oy34yb6] { grid-column: 1; grid-row: 2; max-width: none; width: 100%; margin: 0; }
.foyer-granny[b-dp0oy34yb6] { min-height: 0; max-height: none; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.foyer-welcome h1[b-dp0oy34yb6] { font-size: clamp(2.2rem, 9vw, 3rem); }
.foyer-eyebrow[b-dp0oy34yb6] { margin-bottom: 14px; }
.foyer-hero[b-dp0oy34yb6] { margin-bottom: 40px; }
.guest-invitation-grid[b-dp0oy34yb6], .featured-theme[b-dp0oy34yb6] { grid-template-columns: minmax(0,1fr); }
.guest-invitation-card[b-dp0oy34yb6] { padding: 22px 0; }
.featured-copy[b-dp0oy34yb6] { padding: 28px 24px; text-align: left; justify-items: start; }
.featured-image-wrap[b-dp0oy34yb6], .featured-image[b-dp0oy34yb6] { min-height: 0; height: auto; aspect-ratio: 4 / 3; width: 100%; }
}
@media(prefers-reduced-motion: reduce) { .foyer-main *[b-dp0oy34yb6] { transition: none; } }
/* /Components/Pages/GuestChat.razor.rz.scp.css */
/* Main layout structure */
:global(:root)[b-vhsyrt31hq] {
--primary-bg: #E8F4F8;
--secondary-bg: #F5F3F2;
--ai-bubble: #D8E8E5;
--user-bubble: #FFFFFF;
--highlight: #FFC7B6;
--text-dark: #3A3A3A;
--text-light: #5A5A5A;
--input-bg: rgba(255, 255, 255, 0.9);
--type-ramp-base-font-size: 16px;
}
body[b-vhsyrt31hq] {
/* inherited font-sans */
background: linear-gradient(45deg, var(--primary-bg), var(--secondary-bg));
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
transition: background 0.3s ease, color 0.3s ease;
}
body.night-mode[b-vhsyrt31hq] {
background: linear-gradient(45deg, var(--night-primary-bg), var(--night-secondary-bg));
color: var(--night-text-dark);
}
.main-container[b-vhsyrt31hq] {
display: flex;
flex: 1;
gap: 1.0rem;
padding: 1.4rem;
height: 100vh;
width: 100vw;
max-width: 100%;
}
.side-panel[b-vhsyrt31hq] {
flex: 0.25;
background: rgba(255, 255, 255, 0.5);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
text-align: center;
transition: background 0.3s ease;
}
.side-panel h2[b-vhsyrt31hq] {
font-size: 1.8rem;
color: var(--text-dark);
transition: color 0.3s ease;
margin-top: 0.5rem;
}
.side-panel .ai-avatar[b-vhsyrt31hq] {
padding: 1rem;
font-size: 3rem;
margin-bottom: 1rem;
}
.solace-avatar[b-vhsyrt31hq] {
transition: opacity 0.3s ease, box-shadow 0.3s ease;
}
.side-panel p[b-vhsyrt31hq] {
color: var(--text-light);
transition: color 0.3s ease;
}
.side-panel .action-buttons button[b-vhsyrt31hq] {
display: block;
width: 100%;
margin: 1rem 0;
padding: 0.8rem;
border: none;
border-radius: 8px;
background: var(--highlight);
color: white;
cursor: pointer;
transition: transform 0.2s, background 0.3s ease;
}
.side-panel .action-buttons button:hover[b-vhsyrt31hq] {
transform: scale(1.05);
}
.chat-area[b-vhsyrt31hq] {
flex: 0.75;
display: flex;
flex-direction: column;
justify-content: space-between;
background: rgba(255, 255, 255, 0.9);
border-radius: 12px;
padding: 1rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease;
max-height: 100vh;
}
.warning-message[b-vhsyrt31hq] {
background: rgba(255, 230, 100, 0.2);
color: var(--text-dark);
font-size: 0.9rem;
font-weight: bold;
padding: 0.5rem 1rem;
border-radius: 8px;
margin-bottom: 1rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease, color 0.3s ease;
}
.chat-messages[b-vhsyrt31hq] {
flex: 1;
overflow-y: scroll;
padding-right: 0.5rem;
margin-bottom: 1rem;
min-height: 300px;
scrollbar-width: none;
max-height: calc(100vh - 200px);
scroll-behavior: smooth;
}
.chat-messages[b-vhsyrt31hq]::-webkit-scrollbar {
display: none;
}
.chat-messages .message[b-vhsyrt31hq] {
display: flex;
align-items: flex-start;
margin-bottom: 1.5rem;
flex-direction: column;
}
.chat-messages .message.ai[b-vhsyrt31hq] {
flex-direction: row;
}
.chat-messages .message.user[b-vhsyrt31hq] {
align-items: flex-end;
}
.chat-messages .message .avatar[b-vhsyrt31hq] {
width: 40px;
height: 40px;
border-radius: 50%;
margin-right: 10px;
margin-top: 1.5em;
align-self: flex-start;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s ease;
}
.chat-messages .message.user .avatar[b-vhsyrt31hq] {
margin-left: 10px;
margin-right: 0;
}
.chat-messages .message .message-content[b-vhsyrt31hq] {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.chat-messages p[b-vhsyrt31hq] {
font-size: 16px;
line-height: 1.6;
margin: 0;
}
.chat-messages .message.user .message-content[b-vhsyrt31hq] {
align-items: flex-end;
}
.chat-messages .message .bubble[b-vhsyrt31hq] {
max-width: 70%;
padding: 1rem;
border-radius: 15px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: background 0.3s ease;
word-wrap: break-word;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.chat-messages .message.ai .bubble[b-vhsyrt31hq] {
border-radius: 1px 15px 15px 15px;
background: var(--ai-bubble);
}
.chat-messages .message.user .bubble[b-vhsyrt31hq] {
background: var(--user-bubble);
border-radius: 15px 1px 15px 15px;
}
.chat-messages .message .timestamp[b-vhsyrt31hq] {
font-size: 0.8rem;
color: var(--text-light);
margin-bottom: 4px;
transition: color 0.3s ease;
}
.typing-indicator[b-vhsyrt31hq] {
font-size: 0.9rem;
font-style: italic;
color: var(--text-light);
margin-top: 0.5rem;
text-align: left;
padding-left: 1rem;
white-space: nowrap;
overflow: hidden;
border-right: 2px solid var(--text-light);
width: 30ch;
animation: typing-b-vhsyrt31hq 2s steps(15, end) infinite, blink-b-vhsyrt31hq 0.7s step-end infinite;
transition: color 0.3s ease;
}
@keyframes typing-b-vhsyrt31hq {
from { width: 0 }
to { width: 30ch }
}
@keyframes blink-b-vhsyrt31hq {
50% { border-color: transparent }
}
/* Chat toolbar */
.chat-toolbar[b-vhsyrt31hq] {
display: flex;
gap: 6px;
align-items: center;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.2);
width: fit-content;
margin-bottom: 6px;
transition: background 0.3s ease;
}
.chat-action-btn[b-vhsyrt31hq] {
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
padding: 4px 8px;
border-radius: 6px;
background: rgba(50, 50, 50, 0.3);
border: 1px solid;
color: #fff;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
white-space: nowrap;
}
.chat-action-btn:hover[b-vhsyrt31hq] {
background: rgba(0, 0, 0, 0.1);
}
.chat-action-btn:active[b-vhsyrt31hq] {
transform: scale(0.97);
}
/* Input area */
.chat-input[b-vhsyrt31hq] {
display: flex;
gap: 0.5rem;
align-items: center;
}
.chat-textarea[b-vhsyrt31hq] {
flex: 1;
padding: 0.8rem;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
background: var(--input-bg);
font-size: 1rem;
resize: none;
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.chat-send-btn[b-vhsyrt31hq] {
padding: 0.8rem 1.2rem;
border: none;
border-radius: 8px;
background: var(--highlight);
color: white;
cursor: pointer;
transition: transform 0.2s ease, background 0.3s ease;
}
.chat-send-btn:hover:not(:disabled)[b-vhsyrt31hq] {
transform: scale(1.05);
}
.chat-send-btn:disabled[b-vhsyrt31hq] {
opacity: 0.5;
cursor: not-allowed;
}
/* Night mode adjustments */
body.night-mode .chat-area[b-vhsyrt31hq] {
background: var(--night-secondary-bg);
}
body.night-mode .side-panel[b-vhsyrt31hq] {
background: rgba(40, 40, 40, 0.5);
}
body.night-mode .side-panel h2[b-vhsyrt31hq] {
color: var(--night-text-dark);
}
body.night-mode .side-panel p[b-vhsyrt31hq] {
color: var(--night-text-light);
}
body.night-mode .chat-messages .message.ai .bubble[b-vhsyrt31hq] {
background: var(--night-ai-bubble);
}
body.night-mode .chat-messages .message.user .bubble[b-vhsyrt31hq] {
background: var(--night-user-bubble);
}
body.night-mode .chat-textarea[b-vhsyrt31hq] {
background: var(--night-input-bg);
color: var(--night-text-light);
border-color: rgba(255, 255, 255, 0.1);
}
body.night-mode .chat-messages .message .timestamp[b-vhsyrt31hq] {
color: var(--night-text-light);
}
body.night-mode .warning-message[b-vhsyrt31hq] {
background: rgba(255, 180, 50, 0.2);
color: var(--night-text-dark);
}
body.night-mode .chat-toolbar[b-vhsyrt31hq] {
background: rgba(30, 30, 30, 0.9);
}
body.night-mode .chat-action-btn[b-vhsyrt31hq] {
background: rgba(50, 50, 50, 0.8);
}
body.night-mode .chat-send-btn[b-vhsyrt31hq] {
background: var(--night-highlight);
}
body.night-mode .typing-indicator[b-vhsyrt31hq] {
color: var(--night-text-light);
border-color: var(--night-text-light);
}
body.night-mode .file-preview[b-vhsyrt31hq] {
background: var(--night-secondary-bg);
border-color: var(--night-text-light);
}
body.night-mode .uploaded-image[b-vhsyrt31hq] {
box-shadow: 0 2px 5px rgba(255, 255, 255, 0.1);
filter: brightness(0.85);
}
body.night-mode .chat-input textarea[b-vhsyrt31hq] {
background: var(--night-input-bg);
color: var(--night-text-light);
}
body.night-mode .chat-input button[b-vhsyrt31hq] {
background: var(--night-highlight);
}
/* File handling */
.file-preview[b-vhsyrt31hq] {
display: flex;
flex-direction: column;
align-items: center;
background: #f3f3f3;
border: 1px solid #ccc;
border-radius: 10px;
padding: 10px;
margin: 5px 0;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
transition: background 0.3s ease, border-color 0.3s ease;
}
.uploaded-image[b-vhsyrt31hq] {
max-width: 100%;
height: auto;
border-radius: 6px;
margin-bottom: 6px;
cursor: pointer;
transition: transform 0.3s ease, filter 0.3s ease;
}
.uploaded-image:hover[b-vhsyrt31hq] {
transform: scale(1.05);
}
.preview-thumbnail[b-vhsyrt31hq] {
width: 60px;
height: 60px;
border-radius: 10px;
object-fit: cover;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.remove-preview-btn[b-vhsyrt31hq] {
position: absolute;
top: -6px;
right: -6px;
background: rgba(0, 0, 0, 0.6);
color: white;
font-size: 12px;
border: none;
cursor: pointer;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.3s ease;
}
.remove-preview-btn:hover[b-vhsyrt31hq] {
background: red;
}
/* Responsive design */
@media (max-width: 768px) {
.main-container[b-vhsyrt31hq] {
flex-direction: column;
height: auto;
padding: 0.7rem;
}
.side-panel[b-vhsyrt31hq] {
flex: none;
margin-bottom: 1rem;
}
.chat-area[b-vhsyrt31hq] {
flex: 1;
max-height: calc(100vh - 200px);
}
.message .bubble[b-vhsyrt31hq] {
max-width: 85%;
}
.chat-messages[b-vhsyrt31hq] {
max-height: calc(100vh - 350px);
}
}
/* Language flag buttons styling */
.language-buttons[b-vhsyrt31hq] {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.lang-flag-btn[b-vhsyrt31hq] {
display: flex;
align-items: center;
gap: 4px;
padding: 6px 10px;
border: none;
border-radius: 20px;
background: var(--highlight);
color: white;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.lang-flag-btn:hover[b-vhsyrt31hq] {
background: #ffb199;
transform: scale(1.05);
}
.lang-flag-btn.selected[b-vhsyrt31hq] {
background: #333;
color: #fff;
}
.lang-flag-btn img[b-vhsyrt31hq] {
width: 18px;
height: 14px;
border-radius: 2px;
border: none;
}
/* --- Appended Responsive Enhancements --- */
@media (max-width: 1024px) {
.side-panel[b-vhsyrt31hq] {
transform: translateX(-100%);
transition: transform 0.3s ease;
position: absolute;
left: 0;
top: 50px; /* below top bar */
height: calc(100% - 50px);
z-index: 999;
background: rgba(255, 255, 255, 0.9);
border-radius: 0 12px 12px 0;
box-shadow: 2px 0 6px rgba(0,0,0,0.1);
}
.main-container[b-vhsyrt31hq] {
padding-left: 0;
}
.chat-area[b-vhsyrt31hq] {
flex: 1;
width: 100%;
}
}
@media (max-width: 600px) {
.side-panel[b-vhsyrt31hq] {
display: none;
}
.chat-area[b-vhsyrt31hq] {
width: 100%;
max-width: 100%;
}
}
/* /Components/Pages/Help.razor.rz.scp.css */
[b-d3rcfhla0z] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
}
.app-layout[b-d3rcfhla0z],
[b-d3rcfhla0z] .app-layout {
display: flex;
width: 100%;
max-width: 100%;
min-width: 0;
min-height: 100vh;
box-sizing: border-box;
background: linear-gradient(180deg, #FBF2E5 0%, #F8EDDF 100%);
padding-top: 80px;
}
.app-layout[b-d3rcfhla0z] {
display: block;
}
@media (max-width: 1024px) {
[b-d3rcfhla0z] .toggle-sidebar {
display: none !important;
}
}
[b-d3rcfhla0z] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-d3rcfhla0z] .sidebar.hidden {
transform: translateX(-100%);
}
[b-d3rcfhla0z] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
[b-d3rcfhla0z] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-d3rcfhla0z] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
[b-d3rcfhla0z] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
[b-d3rcfhla0z] .container-v3 {
flex: 1;
min-width: 0;
max-width: 1240px;
margin: 30px auto;
margin-left: 280px;
padding: 0 24px 56px;
display: flex;
flex-direction: column;
gap: 36px;
transition: margin-left 0.3s ease, left 0.3s ease, width 0.3s ease;
box-sizing: border-box;
}
[b-d3rcfhla0z] .container-v3.sidebar-hidden {
margin-left: 0;
}
@media (min-width: 1025px) {
[b-d3rcfhla0z] .container-v3 {
width: min(1240px, calc(100% - 328px));
max-width: 1240px;
margin: 30px auto;
margin-left: auto;
margin-right: auto;
position: relative;
left: 140px;
}
[b-d3rcfhla0z] .container-v3.sidebar-hidden {
width: min(1240px, calc(100% - 48px));
margin-left: auto;
margin-right: auto;
left: 0;
}
}
.sidebar-overlay[b-d3rcfhla0z] {
position: fixed;
inset: 0;
background-color: rgba(63, 43, 31, 0.3);
z-index: 9;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-d3rcfhla0z] {
display: none;
}
[b-d3rcfhla0z] .help-container {
width: 100%;
min-width: 0;
color: #4F4A45;
}
[b-d3rcfhla0z] .help-container,
[b-d3rcfhla0z] .help-container *,
[b-d3rcfhla0z] .help-container *::before,
[b-d3rcfhla0z] .help-container *::after {
box-sizing: border-box;
}
[b-d3rcfhla0z] .granny-hero-section {
position: relative;
overflow: hidden;
padding: clamp(28px, 4vw, 48px);
border-radius: 34px;
border: 1px solid rgba(168, 133, 98, 0.2);
background: linear-gradient(135deg, rgba(255, 249, 240, 0.98) 0%, rgba(255, 244, 232, 0.98) 100%);
box-shadow: 0 22px 55px rgba(120, 89, 67, 0.08);
}
[b-d3rcfhla0z] .granny-hero-section::before {
content: "";
position: absolute;
top: -100px;
right: -70px;
width: 320px;
height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(245, 197, 148, 0.25) 0%, rgba(245, 197, 148, 0) 72%);
pointer-events: none;
}
[b-d3rcfhla0z] .granny-hero-content {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: minmax(210px, 320px) minmax(0, 1fr);
gap: clamp(24px, 4vw, 46px);
align-items: center;
}
[b-d3rcfhla0z] .granny-illustration-wrapper {
display: flex;
justify-content: center;
align-items: flex-end;
}
[b-d3rcfhla0z] .granny-illustration {
width: min(100%, 310px);
height: auto;
object-fit: contain;
filter: drop-shadow(0 14px 24px rgba(123, 90, 83, 0.15));
}
[b-d3rcfhla0z] .granny-welcome-text {
display: flex;
flex-direction: column;
gap: 14px;
}
[b-d3rcfhla0z] .help-kicker {
display: inline-flex;
align-self: flex-start;
padding: 8px 14px;
border-radius: 999px;
background: rgba(251, 207, 168, 0.35);
color: #8D5E3B;
font-size: 0.88rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
[b-d3rcfhla0z] .granny-title {
margin: 0;
color: #3F2B1F;
font-family: var(--font-serif);
font-size: clamp(2.2rem, 5vw, 4.2rem);
line-height: 0.95;
font-weight: var(--mobile-hero-heading-weight);
}
[b-d3rcfhla0z] .help-section-header h2,
[b-d3rcfhla0z] .help-panel h2,
[b-d3rcfhla0z] .help-callout-copy h2 {
margin: 0;
color: #3F2B1F;
font-family: var(--font-serif);
font-size: clamp(2.2rem, 5vw, 4.2rem);
line-height: 0.95;
font-weight: var(--mobile-section-heading-weight);
}
[b-d3rcfhla0z] .granny-subtitle {
max-width: 660px;
margin: 0;
color: #7D695D;
font-size: 1.12rem;
line-height: 1.75;
}
[b-d3rcfhla0z] .granny-hero-actions,
[b-d3rcfhla0z] .help-callout-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 6px;
}
[b-d3rcfhla0z] .btn {
display: inline-flex;
max-width: 100%;
box-sizing: border-box;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 0 22px;
border-radius: 999px;
border: 1px solid #E5D3BC;
background: #F7E2CB;
color: #4F4A45;
font-family: var(--font-sans);
font-size: var(--mobile-button-font-size);
font-weight: var(--mobile-button-font-weight);
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
[b-d3rcfhla0z] .btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(105, 76, 54, 0.08);
}
[b-d3rcfhla0z] .btn-hero-primary,
[b-d3rcfhla0z] .btn-callout-primary {
background: linear-gradient(180deg, #F5C994 0%, #E1AE73 100%);
border-color: #D8A56D;
color: #3F2B1F;
}
[b-d3rcfhla0z] .btn-hero-secondary,
[b-d3rcfhla0z] .btn-callout-secondary {
background: rgba(255, 249, 240, 0.85);
color: #6E594D;
}
[b-d3rcfhla0z] .help-panel,
[b-d3rcfhla0z] .help-callout {
border-radius: 30px;
border: 1px solid rgba(173, 145, 117, 0.18);
background: rgba(255, 250, 244, 0.94);
box-shadow: 0 16px 36px rgba(120, 89, 67, 0.05);
}
[b-d3rcfhla0z] .help-section {
padding: 0;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
}
[b-d3rcfhla0z] .help-section-header {
margin-bottom: 28px;
padding: 0 4px;
}
[b-d3rcfhla0z] .help-section-header h2,
[b-d3rcfhla0z] .help-panel h2,
[b-d3rcfhla0z] .help-callout-copy h2 {
font-size: clamp(1.8rem, 3vw, 2.6rem);
line-height: 1.08;
}
[b-d3rcfhla0z] .help-section-header p,
[b-d3rcfhla0z] .help-panel p,
[b-d3rcfhla0z] .help-info-card p,
[b-d3rcfhla0z] .help-step-card p,
[b-d3rcfhla0z] .help-feature-card p,
[b-d3rcfhla0z] .help-faq-card p,
[b-d3rcfhla0z] .help-callout-copy p {
margin: 0;
color: #7D695D;
line-height: 1.75;
font-size: 1rem;
}
[b-d3rcfhla0z] .help-overview-grid,
[b-d3rcfhla0z] .help-steps-grid,
[b-d3rcfhla0z] .help-feature-grid,
[b-d3rcfhla0z] .help-faq-grid {
display: grid;
gap: 18px;
}
[b-d3rcfhla0z] .help-overview-grid,
[b-d3rcfhla0z] .help-steps-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[b-d3rcfhla0z] .help-feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
}
[b-d3rcfhla0z] .help-feature-hero {
display: flex;
align-items: center;
gap: 28px;
padding: 28px 32px;
border-radius: 24px;
border: 1px solid rgba(210, 162, 111, 0.28);
background: linear-gradient(135deg, rgba(255, 244, 228, 0.96) 0%, rgba(251, 234, 208, 0.92) 100%);
text-decoration: none;
margin-bottom: 6px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
[b-d3rcfhla0z] .help-feature-hero::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: linear-gradient(180deg, #F5C994 0%, #E1AE73 100%);
border-radius: 24px 0 0 24px;
}
[b-d3rcfhla0z] .help-feature-hero:hover {
transform: translateY(-2px);
border-color: rgba(210, 162, 111, 0.55);
box-shadow: 0 18px 40px rgba(120, 89, 67, 0.10);
}
[b-d3rcfhla0z] .help-feature-hero-text {
display: flex;
flex-direction: column;
gap: 8px;
}
[b-d3rcfhla0z] .help-feature-hero h3 {
margin: 0;
font-family: var(--font-sans);
font-size: 1.4rem;
font-weight: 600;
color: #3F2B1F;
line-height: 1.25;
}
[b-d3rcfhla0z] .help-feature-hero p {
margin: 0;
color: #7D695D;
font-size: 1.05rem;
line-height: 1.75;
}
[b-d3rcfhla0z] .help-faq-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[b-d3rcfhla0z] .help-info-card,
[b-d3rcfhla0z] .help-step-card,
[b-d3rcfhla0z] .help-feature-card,
[b-d3rcfhla0z] .help-faq-card {
padding: 26px;
border-radius: 24px;
border: 1px solid rgba(186, 160, 136, 0.08);
background: rgba(255, 255, 255, 0.82);
box-shadow: 0 4px 24px rgba(140, 105, 78, 0.06), 0 1px 4px rgba(140, 105, 78, 0.03);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
[b-d3rcfhla0z] .help-info-card:hover,
[b-d3rcfhla0z] .help-step-card:hover,
[b-d3rcfhla0z] .help-faq-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 32px rgba(140, 105, 78, 0.10), 0 2px 8px rgba(140, 105, 78, 0.04);
}
[b-d3rcfhla0z] .help-info-card h3,
[b-d3rcfhla0z] .help-step-card h3,
[b-d3rcfhla0z] .help-feature-card h3,
[b-d3rcfhla0z] .help-faq-card h3 {
margin: 0 0 10px;
color: #463126;
font-size: 1.25rem;
line-height: 1.25;
}
[b-d3rcfhla0z] .help-step-card {
position: relative;
padding-top: 88px;
}
[b-d3rcfhla0z] .help-step-number {
position: absolute;
top: 24px;
left: 26px;
width: 52px;
height: 52px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: radial-gradient(circle at 35% 28%, #FFF2D7 0%, #F5D19F 58%, #E7B777 100%);
color: #734D2F;
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 700;
font-variant-numeric: lining-nums;
letter-spacing: -0.035em;
line-height: 1;
padding-bottom: 0.06em;
box-shadow: inset 0 0 0 1px rgba(139, 92, 49, 0.16), 0 10px 22px rgba(115, 77, 47, 0.14);
}
[b-d3rcfhla0z] .help-feature-card {
display: flex;
flex-direction: column;
gap: 10px;
min-height: 100%;
height: 100%;
text-decoration: none;
transition: all 0.3s ease;
}
[b-d3rcfhla0z] .help-feature-card:hover {
transform: translateY(-2px);
border-color: rgba(210, 162, 111, 0.5);
box-shadow: 0 16px 30px rgba(120, 89, 67, 0.08);
}
[b-d3rcfhla0z] .help-feature-link,
[b-d3rcfhla0z] .help-inline-link {
display: inline-flex;
align-items: center;
width: fit-content;
color: #8D5E3B;
font-family: var(--font-sans);
font-weight: 700;
text-decoration: none;
border-bottom: 1px solid rgba(141, 94, 59, 0.28);
padding-bottom: 2px;
transition: all 0.3s ease;
}
[b-d3rcfhla0z] .help-feature-link {
margin-top: auto;
}
[b-d3rcfhla0z] .help-feature-card:hover .help-feature-link,
[b-d3rcfhla0z] .help-feature-hero:hover .help-feature-link,
[b-d3rcfhla0z] .help-inline-link:hover,
[b-d3rcfhla0z] .help-feature-link:hover {
color: #6F4529;
border-bottom-color: rgba(111, 69, 41, 0.62);
transform: translateX(3px);
}
[b-d3rcfhla0z] .help-support-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
}
[b-d3rcfhla0z] .help-panel {
padding: clamp(24px, 3vw, 34px);
}
[b-d3rcfhla0z] .help-panel-kicker {
display: inline-block;
margin-bottom: 14px;
color: #8D5E3B;
font-size: 0.9rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
}
[b-d3rcfhla0z] .help-list {
margin: 18px 0 22px;
padding: 0;
list-style: none;
display: grid;
gap: 12px;
}
[b-d3rcfhla0z] .help-list li {
position: relative;
padding-left: 22px;
color: #6F5A4E;
line-height: 1.65;
}
[b-d3rcfhla0z] .help-list li::before {
content: "";
position: absolute;
top: 11px;
left: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: #E1AE73;
}
[b-d3rcfhla0z] .help-callout {
padding: clamp(24px, 3vw, 34px);
display: flex;
justify-content: space-between;
align-items: center;
gap: 24px;
}
[b-d3rcfhla0z] .help-callout-copy {
max-width: 720px;
}
@media (min-width: 993px) {
[b-d3rcfhla0z] .main-footer {
width: min(1240px, calc(100% - 328px));
margin: 80px auto 0;
padding: 60px 24px 30px;
box-sizing: border-box;
position: relative;
left: 0;
}
[b-d3rcfhla0z] .main-footer.sidebar-hidden {
width: min(1240px, calc(100% - 48px));
left: 0;
}
[b-d3rcfhla0z] .footer-container {
max-width: none;
margin: 0;
padding: 0;
}
}
@media (max-width: 1024px) {
.app-layout[b-d3rcfhla0z],
[b-d3rcfhla0z] .app-layout {
flex-direction: column;
align-items: stretch;
width: 100%;
max-width: 100%;
min-width: 0;
padding-top: 60px;
overflow-x: clip;
overflow-y: visible;
overscroll-behavior-y: auto;
touch-action: pan-y pinch-zoom;
-webkit-overflow-scrolling: touch;
}
[b-d3rcfhla0z] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-d3rcfhla0z] .sidebar.visible {
transform: translateX(0);
}
[b-d3rcfhla0z] .container-v3 {
flex: 0 1 auto;
width: 100%;
max-width: 100%;
min-width: 0;
margin: 65px 0 30px !important;
padding: 0 16px 36px;
box-sizing: border-box;
}
[b-d3rcfhla0z] .help-container,
[b-d3rcfhla0z] .help-section,
[b-d3rcfhla0z] .granny-hero-section,
[b-d3rcfhla0z] .help-panel,
[b-d3rcfhla0z] .help-callout,
[b-d3rcfhla0z] .help-feature-hero,
[b-d3rcfhla0z] .help-overview-grid,
[b-d3rcfhla0z] .help-steps-grid,
[b-d3rcfhla0z] .help-feature-grid,
[b-d3rcfhla0z] .help-faq-grid,
[b-d3rcfhla0z] .help-support-grid,
[b-d3rcfhla0z] .help-info-card,
[b-d3rcfhla0z] .help-step-card,
[b-d3rcfhla0z] .help-feature-card,
[b-d3rcfhla0z] .help-faq-card {
width: 100%;
max-width: 100%;
min-width: 0;
}
[b-d3rcfhla0z] .granny-hero-content,
[b-d3rcfhla0z] .help-overview-grid,
[b-d3rcfhla0z] .help-steps-grid,
[b-d3rcfhla0z] .help-feature-grid,
[b-d3rcfhla0z] .help-faq-grid,
[b-d3rcfhla0z] .help-support-grid,
[b-d3rcfhla0z] .help-callout {
grid-template-columns: 1fr;
}
[b-d3rcfhla0z] .granny-hero-content {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
[b-d3rcfhla0z] .granny-illustration-wrapper {
width: 300px;
max-width: 100%;
margin: 0 auto;
}
[b-d3rcfhla0z] .granny-illustration {
width: 100%;
margin-top: 0;
}
[b-d3rcfhla0z] .granny-welcome-text {
width: 100%;
min-width: 0;
align-items: center;
}
[b-d3rcfhla0z] .granny-hero-actions {
width: 100%;
max-width: 100%;
justify-content: center;
}
[b-d3rcfhla0z] .help-callout {
display: grid;
}
[b-d3rcfhla0z] .help-feature-card {
height: auto;
min-height: 0;
}
}
@media (max-width: 640px) {
[b-d3rcfhla0z] .granny-hero-section,
[b-d3rcfhla0z] .help-panel,
[b-d3rcfhla0z] .help-callout {
padding: 22px 18px;
border-radius: 24px;
}
[b-d3rcfhla0z] .help-section {
padding: 0;
}
[b-d3rcfhla0z] .help-feature-hero {
padding: 22px 18px;
border-radius: 20px;
}
[b-d3rcfhla0z] .help-feature-hero h3 {
font-size: 1.2rem;
}
[b-d3rcfhla0z] .granny-title {
font-size: 2.35rem;
}
[b-d3rcfhla0z] .granny-subtitle,
[b-d3rcfhla0z] .help-section-header p,
[b-d3rcfhla0z] .help-panel p,
[b-d3rcfhla0z] .help-info-card p,
[b-d3rcfhla0z] .help-step-card p,
[b-d3rcfhla0z] .help-feature-card p,
[b-d3rcfhla0z] .help-faq-card p,
[b-d3rcfhla0z] .help-callout-copy p {
font-size: 0.96rem;
}
[b-d3rcfhla0z] .btn {
width: 100%;
min-width: 0;
}
[b-d3rcfhla0z] .granny-hero-actions,
[b-d3rcfhla0z] .help-callout-actions {
width: 100%;
flex-direction: column;
}
}
/* Align first-viewport hero placement with the ThemesAll rhythm. */
@media (min-width: 1025px) {
.app-layout[b-d3rcfhla0z],
[b-d3rcfhla0z] .app-layout {
padding-top: 64px;
}
[b-d3rcfhla0z] .container-v3 {
margin-top: 0;
}
}
@media (max-width: 1024px) {
[b-d3rcfhla0z] .container-v3 {
margin: 22px 0 30px !important;
}
}
[b-d3rcfhla0z] .granny-title { color: var(--lov-ink); font-size: clamp(2rem,3.5vw,3.2rem); }
[b-d3rcfhla0z] .btn-hero-primary, [b-d3rcfhla0z] .btn-callout-primary { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); }
/* One post-sidebar canvas keeps the page inside the viewport and its reading areas calm. */
.app-layout[b-d3rcfhla0z],
[b-d3rcfhla0z] .app-layout {
min-width: 0;
background: var(--lov-paper);
padding-top: 0;
}
[b-d3rcfhla0z] .container-v3.help-container {
width: calc(100% - 280px);
max-width: none;
min-width: 0;
margin: 0 0 0 280px;
padding: 48px clamp(24px, 4vw, 64px) 64px;
box-sizing: border-box;
position: static;
left: auto;
color: var(--lov-ink);
}
[b-d3rcfhla0z] .container-v3.help-container.sidebar-hidden {
width: 100%;
margin-left: 0;
}
[b-d3rcfhla0z] .help-container > * {
width: 100%;
max-width: 1120px;
margin-inline: auto;
}
[b-d3rcfhla0z] .granny-hero-section { border: 0; border-bottom: 1px solid var(--lov-line); border-radius: 0; background: transparent; box-shadow: none; padding: 0 0 32px; }
[b-d3rcfhla0z] .granny-hero-section::before { display: none; }
[b-d3rcfhla0z] .granny-hero-content { grid-template-columns: minmax(0,1fr) 140px; }
[b-d3rcfhla0z] .granny-illustration-wrapper { grid-column: 2; grid-row: 1; }
[b-d3rcfhla0z] .granny-welcome-text { grid-column: 1; grid-row: 1; }
[b-d3rcfhla0z] .granny-illustration { width: 140px; filter: none; }
[b-d3rcfhla0z] .help-kicker { background: transparent; padding: 0; color: var(--lov-muted); font-size: .75rem; }
[b-d3rcfhla0z] .granny-subtitle { color: var(--lov-muted); font-size: 1rem; }
[b-d3rcfhla0z] .help-section-header h2, [b-d3rcfhla0z] .help-panel h2, [b-d3rcfhla0z] .help-callout-copy h2 { color: var(--lov-ink); font-size: clamp(1.5rem,2.5vw,2.2rem); line-height: 1.2; }
@media(max-width:1024px) {
[b-d3rcfhla0z] .container-v3.help-container,
[b-d3rcfhla0z] .container-v3.help-container.sidebar-hidden {
width: 100%;
margin: 0 !important;
padding: 88px 20px 36px;
}
}
@media(max-width:600px) { [b-d3rcfhla0z] .granny-hero-content { grid-template-columns: minmax(0,1fr); } [b-d3rcfhla0z] .granny-illustration-wrapper { display: none; } }
[b-d3rcfhla0z] .granny-hero-content { display: block; }
[b-d3rcfhla0z] .granny-welcome-text { text-align: left; max-width: 52rem; }
[b-d3rcfhla0z] .granny-hero-section .granny-title { text-align: left; font-weight: 450; letter-spacing: -.025em; }
[b-d3rcfhla0z] .granny-hero-actions .btn { border-radius: 6px; box-shadow: none; }
[b-d3rcfhla0z] .btn-hero-primary {
background: var(--lov-green);
border-color: var(--lov-green);
color: var(--lov-on-green);
}
[b-d3rcfhla0z] .btn-hero-secondary,
[b-d3rcfhla0z] .btn-callout-secondary {
background: transparent;
border-color: var(--lov-line);
color: var(--lov-green);
}
[b-d3rcfhla0z] .help-info-card,
[b-d3rcfhla0z] .help-step-card,
[b-d3rcfhla0z] .help-feature-card,
[b-d3rcfhla0z] .help-faq-card {
padding: 24px;
border: 1px solid var(--lov-line);
border-radius: 10px;
background: var(--lov-surface);
box-shadow: none;
transition: border-color 160ms ease, background-color 160ms ease;
}
[b-d3rcfhla0z] .help-info-card:hover,
[b-d3rcfhla0z] .help-step-card:hover,
[b-d3rcfhla0z] .help-feature-card:hover,
[b-d3rcfhla0z] .help-faq-card:hover {
transform: none;
border-color: var(--lov-green);
box-shadow: none;
}
[b-d3rcfhla0z] .help-info-card h3,
[b-d3rcfhla0z] .help-step-card h3,
[b-d3rcfhla0z] .help-feature-card h3,
[b-d3rcfhla0z] .help-faq-card h3 {
color: var(--lov-ink);
font-family: var(--font-serif);
font-weight: 450;
}
[b-d3rcfhla0z] .help-info-card p,
[b-d3rcfhla0z] .help-step-card p,
[b-d3rcfhla0z] .help-feature-card p,
[b-d3rcfhla0z] .help-faq-card p {
color: var(--lov-muted);
line-height: 1.7;
}
[b-d3rcfhla0z] .help-step-card {
padding-top: 24px;
}
[b-d3rcfhla0z] .help-step-number {
position: static;
display: block;
width: auto;
height: auto;
margin: 0 0 14px;
padding: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--lov-green);
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
line-height: 1.2;
}
[b-d3rcfhla0z] .help-feature-card:focus-visible {
outline: 2px solid var(--lov-focus);
outline-offset: 3px;
}
[b-d3rcfhla0z] .help-feature-hero,
[b-d3rcfhla0z] .help-panel,
[b-d3rcfhla0z] .help-callout {
border-color: var(--lov-line);
border-radius: 10px;
background: var(--lov-surface);
box-shadow: none;
}
[b-d3rcfhla0z] .help-feature-hero::before {
width: 2px;
border-radius: 0;
background: var(--lov-green);
}
[b-d3rcfhla0z] .help-feature-link,
[b-d3rcfhla0z] .help-inline-link {
color: var(--lov-green);
border-bottom-color: var(--lov-line);
}
[b-d3rcfhla0z] .help-feature-card:hover .help-feature-link,
[b-d3rcfhla0z] .help-feature-hero:hover .help-feature-link,
[b-d3rcfhla0z] .help-inline-link:hover,
[b-d3rcfhla0z] .help-feature-link:hover {
color: var(--lov-green);
border-bottom-color: var(--lov-green);
transform: none;
}
[b-d3rcfhla0z] .help-feature-hero h3 { color: var(--lov-ink); }
[b-d3rcfhla0z] .help-feature-hero p,
[b-d3rcfhla0z] .help-panel p,
[b-d3rcfhla0z] .help-callout-copy p,
[b-d3rcfhla0z] .help-list li { color: var(--lov-muted); }
[b-d3rcfhla0z] .help-panel-kicker { color: var(--lov-green); }
/* /Components/Pages/Keepsakes.razor.rz.scp.css */
/* ===========================================
LAYOUT & NAVIGATION STYLES
=========================================== */
/* Sidebar Overlay */
.sidebar-overlay[b-91w7vtwoww] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none;
/* Prevent scroll-through when overlay is visible */
}
.sidebar-overlay.hidden[b-91w7vtwoww] {
display: none;
}
/* App Layout */
[b-91w7vtwoww] .app-layout {
display: flex;
min-height: 100vh;
width: 100%;
min-width: 0;
overflow-x: hidden;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px;
/* Account for fixed logo */
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-91w7vtwoww] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-91w7vtwoww] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-91w7vtwoww] .sidebar.hidden {
transform: translateX(-100%);
}
[b-91w7vtwoww] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-91w7vtwoww] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-91w7vtwoww] .sidebar a:hover {
color: #000;
}
[b-91w7vtwoww] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar Logo Styles */
[b-91w7vtwoww] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-91w7vtwoww] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-91w7vtwoww] .app-logo-link:hover {
outline: none;
border: none;
background: none;
}
[b-91w7vtwoww] .app-logo-link:focus {
outline: none;
border: none;
background: none;
}
[b-91w7vtwoww] .sidebar-logo {
text-align: center;
}
[b-91w7vtwoww] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
transition: none !important;
}
[b-91w7vtwoww] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-91w7vtwoww] .sidebar a:hover {
color: #000;
}
/* Sidebar Bottom User Section */
[b-91w7vtwoww] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-91w7vtwoww] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-91w7vtwoww] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease-in-out;
}
[b-91w7vtwoww] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-91w7vtwoww] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: var(--text, #4F4A45);
}
[b-91w7vtwoww] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
/* User Dropdown */
[b-91w7vtwoww] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-91w7vtwoww] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
animation: fadeIn-b-91w7vtwoww 0.2s ease-in-out;
}
@keyframes fadeIn-b-91w7vtwoww {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[b-91w7vtwoww] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-91w7vtwoww] .dropdown-item:hover {
background-color: #f0dad3;
}
/* Button Styles */
[b-91w7vtwoww] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
}
[b-91w7vtwoww] .btn:hover {
background-color: #FADDAA;
}
[b-91w7vtwoww] .btn-login {
background-color: #FBCFA8;
}
[b-91w7vtwoww] .btn-primary {
padding: 12px 25px;
margin-top: 10px;
background-color: #FBCFA8;
}
[b-91w7vtwoww] .btn-secondary {
padding: 8px 18px;
margin-top: 10px;
}
/* Toggle Sidebar Button */
[b-91w7vtwoww] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Main Messages Container - Two Column Layout */
[b-91w7vtwoww] .messages-container {
flex: 1;
margin-left: 280px;
padding: 0;
max-width: 1200px;
min-width: 0;
transition: margin-left 0.3s ease;
min-height: 100vh;
background: var(--lov-paper);
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"header header"
"main-content sidebar-content";
gap: 0;
box-sizing: border-box;
}
[b-91w7vtwoww] .messages-container.sidebar-hidden {
margin-left: 0;
}
/* ===========================================
VAULT MESSAGES - ELEGANT MASONRY DESIGN
=========================================== */
/* Page Layout & Container */
[b-91w7vtwoww] .messages-container {
min-height: calc(100vh - 60px);
padding: 0;
background: var(--lov-paper);
}
/* Vault Header */
[b-91w7vtwoww] .vault-header {
grid-area: header;
text-align: center;
padding: 3rem 2rem 2rem;
max-width: 800px;
margin: 0 auto;
}
/* Filters Row */
[b-91w7vtwoww] .filters-panel {
background: rgba(255, 252, 247, 0.94);
border: 1px solid rgba(216, 168, 138, 0.42);
border-radius: 14px;
padding: 1.35rem;
box-shadow: 0 14px 34px rgba(124, 90, 83, 0.09);
margin-bottom: 2rem;
position: sticky;
top: 2rem;
}
[b-91w7vtwoww] .filters-panel-header {
/* inherited font-sans */
font-size: 1.05rem;
font-weight: 600;
color: #5A413A;
letter-spacing: 0;
margin-bottom: 0.25rem;
}
[b-91w7vtwoww] .filters-panel-status {
font-size: 0.8rem;
color: #8A7169;
line-height: 1.35;
}
[b-91w7vtwoww] .filters-panel-header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
padding-bottom: 1rem;
margin-bottom: 1rem;
border-bottom: 1px solid rgba(216, 168, 138, 0.22);
}
[b-91w7vtwoww] .filters-clear-btn {
border: none;
background: rgba(123, 90, 83, 0.08);
color: #6B4A43;
border-radius: 999px;
padding: 0.45rem 0.75rem;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
white-space: nowrap;
}
[b-91w7vtwoww] .filters-clear-btn:hover,
[b-91w7vtwoww] .filters-clear-btn:focus-visible {
background: rgba(123, 90, 83, 0.14);
color: #4B2E2E;
}
[b-91w7vtwoww] .filters-clear-btn:focus-visible {
outline: 2px solid rgba(123, 90, 83, 0.32);
outline-offset: 2px;
}
[b-91w7vtwoww] .mobile-filters-trigger-row,
[b-91w7vtwoww] .mobile-filters-backdrop {
display: none;
}
[b-91w7vtwoww] .mobile-filters-trigger {
display: inline-flex;
align-items: center;
gap: 0.65rem;
border: 1px solid #D8A88A;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #5A413A;
padding: 0.7rem 1rem;
font-size: 0.92rem;
font-weight: 600;
box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
}
[b-91w7vtwoww] .mobile-filters-trigger.has-active {
background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}
[b-91w7vtwoww] .mobile-filters-trigger-badge {
min-width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #7B5A53;
color: #fff;
font-size: 0.8rem;
}
[b-91w7vtwoww] .mobile-filters-close {
display: none;
border: none;
border-radius: 999px;
background: rgba(123, 90, 83, 0.1);
color: #5A413A;
padding: 0.55rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
}
[b-91w7vtwoww] .filters-panel-section {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin-bottom: 1.35rem;
}
[b-91w7vtwoww] .filters-panel-section:last-of-type {
margin-bottom: 0;
}
[b-91w7vtwoww] .filters-panel-label {
/* inherited font-sans */
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #A67B5B;
}
[b-91w7vtwoww] .filter-search-shell {
position: relative;
display: flex;
align-items: center;
}
[b-91w7vtwoww] .filter-search-icon {
position: absolute;
left: 0.8rem;
color: #9A7A70;
pointer-events: none;
}
[b-91w7vtwoww] .filter-search-input {
width: 100%;
min-height: 2.75rem;
border: 1px solid rgba(216, 168, 138, 0.34);
border-radius: 10px;
background: rgba(255, 255, 255, 0.72);
color: #4B2E2E;
padding: 0.65rem 0.85rem 0.65rem 2.35rem;
font-size: 0.92rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
[b-91w7vtwoww] .filter-search-input::placeholder {
color: #9A8780;
}
[b-91w7vtwoww] .filter-search-input:focus {
outline: none;
background: #fff;
border-color: rgba(123, 90, 83, 0.46);
box-shadow: 0 0 0 3px rgba(246, 217, 198, 0.46);
}
[b-91w7vtwoww] .filter-pill-tray {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
position: relative;
}
[b-91w7vtwoww] .filter-pill {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
max-width: 100%;
min-height: 2.25rem;
padding: 0.42rem 0.95rem;
border-radius: 999px;
border: 1px solid transparent;
background: rgba(248, 238, 222, 0.62);
/* inherited font-sans */
font-size: 0.88rem;
color: #6B5B57;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
box-shadow: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[b-91w7vtwoww] .filter-pill:hover {
background: rgba(246, 217, 198, 0.5);
color: #4B2E2E;
transform: translateY(-1px);
}
[b-91w7vtwoww] .filter-pill:focus-visible {
outline: 2px solid rgba(123, 90, 83, 0.45);
outline-offset: 2px;
}
[b-91w7vtwoww] .filter-pill.active {
background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
border-color: transparent;
color: #4B2E2E;
box-shadow: none;
font-weight: 600;
}
[b-91w7vtwoww] .filter-pill-check {
flex: 0 0 auto;
width: 1rem;
height: 1rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(123, 90, 83, 0.12);
color: #7B5A53;
font-size: 0.68rem;
line-height: 1;
}
[b-91w7vtwoww] .theme-filter-tray {
padding-bottom: 0.1rem;
}
[b-91w7vtwoww] .filters-panel-link-wrap {
display: flex;
justify-content: center;
padding-top: 0.35rem;
}
@media (min-width: 1025px) {
[b-91w7vtwoww] .filters-panel {
max-height: calc(100vh - 4rem);
overflow: hidden;
}
[b-91w7vtwoww] .theme-filter-section.expanded {
margin-bottom: 0;
}
[b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray {
max-height: min(42vh, 390px);
overflow-y: auto;
padding-right: 0.25rem;
scrollbar-width: thin;
scrollbar-color: rgba(123, 90, 83, 0.38) transparent;
overscroll-behavior: contain;
}
[b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray::-webkit-scrollbar {
width: 6px;
}
[b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray::-webkit-scrollbar-track {
background: transparent;
}
[b-91w7vtwoww] .theme-filter-section.expanded .theme-filter-tray::-webkit-scrollbar-thumb {
background: rgba(123, 90, 83, 0.28);
border-radius: 999px;
}
[b-91w7vtwoww] .theme-filter-section.expanded .filters-panel-link-wrap {
position: sticky;
bottom: -0.35rem;
margin: 0 -0.25rem;
padding: 0.85rem 0 0.15rem;
background: linear-gradient(180deg, rgba(255, 252, 247, 0), rgba(255, 252, 247, 0.98) 42%);
z-index: 1;
}
}
/* Main Content Area (left column) */
[b-91w7vtwoww] .main-content-area {
grid-area: main-content;
padding: 0 3rem 3rem 3rem;
position: relative;
}
/* Sidebar Content Area (right column) */
[b-91w7vtwoww] .sidebar-content-area {
grid-area: sidebar-content;
padding: 0 2rem 3rem 1.5rem;
position: relative;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: stretch;
}
[b-91w7vtwoww] .vault-header h1 {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: var(--mobile-hero-heading-weight);
color: #2C2A28;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
[b-91w7vtwoww] .vault-subtitle {
/* inherited font-sans */
font-size: 1.1rem;
line-height: 1.6;
color: #6B5B57;
margin: 0;
max-width: 600px;
margin: 0 auto;
}
/* ===========================================
TODAY'S MEMORY CARD - SIDEBAR PLACEMENT
=========================================== */
[b-91w7vtwoww] .today-memory-wrapper {
margin-bottom: 2rem;
}
[b-91w7vtwoww] .today-memory-card {
background: #FFF8F3;
border: 1px solid #F0E6D2;
border-radius: 16px;
padding: 1.5rem;
width: 100%;
box-shadow: 0 4px 20px rgba(43, 42, 40, 0.08);
position: relative;
transform: rotate(-0.3deg);
transition: all 0.3s ease;
}
[b-91w7vtwoww] .today-memory-card:hover {
transform: rotate(0deg) translateY(-2px);
box-shadow: 0 6px 30px rgba(43, 42, 40, 0.12);
}
[b-91w7vtwoww] .today-memory-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
[b-91w7vtwoww] .today-memory-icon {
font-size: 1.2rem;
}
[b-91w7vtwoww] .today-memory-title {
/* inherited font-sans */
font-weight: 600;
font-size: 0.9rem;
color: #7B5A53;
text-transform: uppercase;
letter-spacing: 0.05em;
}
[b-91w7vtwoww] .today-memory-text {
font-family: var(--font-serif);
font-size: 1.1rem;
line-height: 1.6;
color: #2C2A28;
margin-bottom: 1.5rem;
font-weight: 300;
}
[b-91w7vtwoww] .today-memory-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
[b-91w7vtwoww] .today-memory-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #F0E6D2;
}
[b-91w7vtwoww] .today-memory-name {
/* inherited font-sans */
font-weight: 500;
font-size: 0.9rem;
color: #7B5A53;
}
[b-91w7vtwoww] .today-memory-context {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
[b-91w7vtwoww] .today-memory-date {
/* inherited font-sans */
font-size: 0.85rem;
color: #A67B5B;
opacity: 0.8;
}
/* ===========================================
FILTER & SORT SECTION
=========================================== */
[b-91w7vtwoww] .vault-filters {
display: flex;
justify-content: flex-end;
padding: 0 2rem;
margin-bottom: 2rem;
position: relative;
}
[b-91w7vtwoww] .filter-sort-btn {
background: #F5E6D3;
border: 1px solid #E8DCC0;
border-radius: 25px;
padding: 0.6rem 1.2rem;
/* inherited font-sans */
font-size: 0.9rem;
font-weight: 500;
color: #7B5A53;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
[b-91w7vtwoww] .filter-sort-btn:hover {
background: #EFDCC7;
border-color: #D4C19A;
}
[b-91w7vtwoww] .filter-icon {
font-size: 0.8rem;
transform: rotate(0deg);
transition: transform 0.2s ease;
}
[b-91w7vtwoww] .filter-dropdown {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #E8DCC0;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(43, 42, 40, 0.15);
padding: 1.5rem;
width: 280px;
z-index: 100;
margin-top: 0.5rem;
}
[b-91w7vtwoww] .filter-dropdown-title {
/* inherited font-sans */
font-size: 1rem;
font-weight: 600;
color: #2C2A28;
margin-bottom: 1rem;
}
[b-91w7vtwoww] .filter-group {
margin-bottom: 1rem;
}
[b-91w7vtwoww] .filter-label {
display: block;
/* inherited font-sans */
font-size: 0.85rem;
font-weight: 500;
color: #7B5A53;
margin-bottom: 0.4rem;
}
[b-91w7vtwoww] .filter-select {
width: 100%;
padding: 0.5rem;
border: 1px solid #E8DCC0;
border-radius: 8px;
/* inherited font-sans */
font-size: 0.9rem;
background: white;
color: #2C2A28;
}
[b-91w7vtwoww] .filter-actions {
margin-top: 1.5rem;
text-align: right;
}
[b-91w7vtwoww] .filter-close-btn {
background: #7B5A53;
color: white;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
/* inherited font-sans */
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s ease;
}
[b-91w7vtwoww] .filter-close-btn:hover {
background: #6B4A43;
}
/* ===========================================
MASONRY GRID LAYOUT - LEFT COLUMN
=========================================== */
[b-91w7vtwoww] .vault-masonry {
column-count: 2;
column-gap: 2rem;
width: 100%;
margin: 0;
padding: 0;
}
[b-91w7vtwoww] .keepsakes-load-more {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
margin: 0.8rem auto 0;
padding: 1.2rem 0 0.4rem;
break-inside: avoid;
}
[b-91w7vtwoww] .keepsakes-load-more-status {
color: #8A7169;
font-size: 0.86rem;
line-height: 1.3;
text-align: center;
}
[b-91w7vtwoww] .keepsakes-load-more-btn {
min-height: 2.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
border: 1px solid rgba(123, 90, 83, 0.18);
border-radius: 999px;
background: #7B5A53;
color: #fff;
padding: 0.78rem 1.45rem;
font-size: 0.95rem;
font-weight: 700;
cursor: pointer;
box-shadow: 0 12px 24px rgba(123, 90, 83, 0.16);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
[b-91w7vtwoww] .keepsakes-load-more-btn:hover:not(:disabled),
[b-91w7vtwoww] .keepsakes-load-more-btn:focus-visible:not(:disabled) {
background: #654940;
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(123, 90, 83, 0.22);
}
[b-91w7vtwoww] .keepsakes-load-more-btn:focus-visible {
outline: 3px solid rgba(246, 217, 198, 0.9);
outline-offset: 3px;
}
[b-91w7vtwoww] .keepsakes-load-more-btn:disabled {
cursor: wait;
opacity: 0.76;
transform: none;
}
[b-91w7vtwoww] .keepsakes-load-more-arrow {
font-size: 1rem;
line-height: 1;
transform: translateY(-1px);
}
[b-91w7vtwoww] .keepsakes-load-more-spinner {
width: 1rem;
height: 1rem;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.38);
border-top-color: #fff;
animation: keepsakes-load-spin-b-91w7vtwoww 0.75s linear infinite;
}
@keyframes keepsakes-load-spin-b-91w7vtwoww {
to {
transform: rotate(360deg);
}
}
@media (max-width: 1024px) {
[b-91w7vtwoww] .vault-masonry {
column-count: 2;
column-gap: 1.2rem;
}
[b-91w7vtwoww] .keepsakes-load-more {
padding-top: 1rem;
}
}
@media (max-width: 640px) {
[b-91w7vtwoww] .vault-masonry {
column-count: 1;
padding: 0 1rem 3rem;
}
[b-91w7vtwoww] .keepsakes-load-more {
padding: 0.5rem 0 0;
}
[b-91w7vtwoww] .keepsakes-load-more-btn {
width: min(100%, 19rem);
padding-inline: 1rem;
}
}
/* ===========================================
VAULT CARDS - ORGANIC MASONRY DESIGN
=========================================== */
[b-91w7vtwoww] .vault-card {
break-inside: avoid;
background: white;
border: 1px solid #F0E6D2;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 3px 15px rgba(43, 42, 40, 0.08);
/* Enhanced shadow for button feel */
transition: all 0.3s ease;
position: relative;
width: 100%;
display: inline-block;
user-select: none;
/* Prevent text selection */
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
cursor: pointer;
/* Universal clickable cue */
}
[b-91w7vtwoww] .vault-card:hover {
transform: translateY(-4px);
/* Elegant lift effect */
box-shadow: 0 8px 25px rgba(43, 42, 40, 0.12);
/* Soft, premium shadow */
border-color: #E8DCC0;
}
[b-91w7vtwoww] .vault-card:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(43, 42, 40, 0.08);
transition: all 0.1s ease;
}
/* Card Clickable Area */
[b-91w7vtwoww] .vault-card-clickable {
cursor: pointer;
user-select: none;
position: relative;
transition: all 0.2s ease;
}
[b-91w7vtwoww] .vault-card-clickable:hover {
background-color: rgba(240, 230, 210, 0.3);
}
[b-91w7vtwoww] .vault-card-clickable:active {
transform: scale(0.98) translateY(1px);
background-color: rgba(240, 230, 210, 0.5);
transition: all 0.1s ease;
}
/* Mobile Chat Hint - Layer 3 Affordance */
[b-91w7vtwoww] .vault-card-chat-hint {
position: absolute;
bottom: 12px;
right: 12px;
opacity: 0.6;
color: #8B7355;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: 1;
}
/* Show hint more prominently on mobile */
@media (max-width: 768px) {
[b-91w7vtwoww] .vault-card-chat-hint {
opacity: 0.8;
}
[b-91w7vtwoww] .vault-card:hover .vault-card-chat-hint {
opacity: 1;
color: #6B5B47;
}
}
/* Hide hint on desktop hover for clean experience */
@media (min-width: 769px) {
[b-91w7vtwoww] .vault-card:hover .vault-card-chat-hint {
opacity: 0.3;
}
}
/* Card Header */
[b-91w7vtwoww] .vault-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
[b-91w7vtwoww] .vault-card-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #F0E6D2;
flex-shrink: 0;
}
[b-91w7vtwoww] .vault-card-name {
/* inherited font-sans */
font-weight: 500;
font-size: 0.85rem;
color: #7B5A53;
margin-left: 0.5rem;
flex-grow: 1;
}
/* Three Dots Menu Button */
[b-91w7vtwoww] .three-dots-menu {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
opacity: 0.6;
z-index: 10;
}
[b-91w7vtwoww] .three-dots-menu:hover {
background-color: rgba(167, 123, 91, 0.1);
opacity: 1;
transform: scale(1.1);
}
[b-91w7vtwoww] .three-dots-menu:active {
transform: scale(0.95);
}
[b-91w7vtwoww] .three-dots-menu svg {
width: 16px;
height: 16px;
fill: #7B5A53;
}
/* Vault Card Dropdown Menu */
[b-91w7vtwoww] .vault-card-dropdown {
position: absolute;
top: 2.5rem;
right: 0.5rem;
background: white;
border: 1px solid #E8DCC0;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(43, 42, 40, 0.15);
z-index: 1000;
min-width: 140px;
overflow: hidden;
}
[b-91w7vtwoww] .vault-action-sheet-backdrop {
position: fixed;
inset: 0;
background: rgba(24, 16, 12, 0.3);
z-index: 1205;
}
[b-91w7vtwoww] .vault-action-sheet {
position: fixed;
left: 50%;
bottom: calc(0.75rem + env(safe-area-inset-bottom));
width: min(92vw, 360px);
background: #ffffff;
border-radius: 20px;
padding: 0.35rem 0;
box-shadow: 0 16px 36px rgba(83, 51, 43, 0.2);
transform: translate(-50%, 12px);
animation: keepsake-sheet-rise-b-91w7vtwoww 0.2s ease-out forwards;
z-index: 1210;
}
[b-91w7vtwoww] .vault-action-sheet-item {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 1.1rem;
color: #4b2e2e;
/* inherited font-sans */
font-size: 0.95rem;
text-align: left;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
[b-91w7vtwoww] .vault-action-sheet-item:hover,
[b-91w7vtwoww] .vault-action-sheet-item:focus-visible {
background: #f7f2ee;
}
[b-91w7vtwoww] .vault-action-sheet-item:active {
background: #efe7e1;
}
[b-91w7vtwoww] .vault-action-sheet-item.danger {
color: #b24a3a;
}
@keyframes keepsake-sheet-rise-b-91w7vtwoww {
from {
opacity: 0;
transform: translate(-50%, 18px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
[b-91w7vtwoww] .vault-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
/* inherited font-sans */
font-size: 0.85rem;
color: #7B5A53;
cursor: pointer;
transition: background-color 0.2s ease;
border: none;
background: none;
width: 100%;
text-align: left;
}
[b-91w7vtwoww] .vault-dropdown-item:hover {
background-color: #F5E6D3;
}
[b-91w7vtwoww] .vault-dropdown-item:active {
background-color: #E8DCC0;
}
[b-91w7vtwoww] .vault-dropdown-item svg {
width: 14px;
height: 14px;
fill: currentColor;
opacity: 0.7;
}
[b-91w7vtwoww] .vault-dropdown-item.danger {
color: #b04747;
}
[b-91w7vtwoww] .vault-dropdown-item.danger:hover {
background-color: #f7e2e2;
}
[b-91w7vtwoww] .vault-dropdown-item.danger:active {
background-color: #f1d1d1;
}
[b-91w7vtwoww] .unsave-btn {
background: none;
border: none;
color: #A67B5B;
/* inherited font-sans */
font-size: 0.8rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
opacity: 0;
transform: translateX(10px);
}
[b-91w7vtwoww] .vault-card:hover .unsave-btn {
opacity: 1;
transform: translateX(0);
}
[b-91w7vtwoww] .unsave-btn:hover {
background: #F5E6D3;
color: #7B5A53;
}
/* Card Message */
[b-91w7vtwoww] .vault-card-message {
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.6;
color: #2C2A28;
margin-bottom: 1rem;
font-weight: 300;
}
/* Match LovedOneChat image sizing for inline images in vault messages */
[b-91w7vtwoww] .vault-card-message img {
max-width: 220px !important;
max-height: 220px !important;
width: auto !important;
height: auto !important;
border-radius: 10px;
object-fit: cover !important;
display: block;
}
@media (max-width: 768px) {
[b-91w7vtwoww] .vault-card-message img {
max-width: 160px !important;
max-height: 160px !important;
}
}
/* Card Footer */
[b-91w7vtwoww] .vault-card-footer {
display: flex;
align-items: center;
gap: 0.5rem;
}
[b-91w7vtwoww] .vault-card-context {
display: flex;
align-items: center;
gap: 0.4rem;
}
[b-91w7vtwoww] .context-icon {
font-size: 0.85rem;
opacity: 0.7;
}
[b-91w7vtwoww] .context-text {
/* inherited font-sans */
font-size: 0.8rem;
color: #A67B5B;
opacity: 0.8;
}
/* ===========================================
FOOTER STYLES
=========================================== */
/* Footer Styles */
[b-91w7vtwoww] .main-footer {
/* Keep footer aligned with content width and sidebar offset */
width: calc(100% - 280px);
max-width: min(1200px, calc(100% - 280px));
margin-left: 280px;
margin-right: auto;
background-color: #FAF3E5;
padding: 60px 0 30px 0;
margin-top: 80px;
color: #4F4A45;
border-top: 1px solid #f0dad3;
box-sizing: border-box;
}
[b-91w7vtwoww] .main-footer.sidebar-hidden {
/* Match the main container width when sidebar is hidden */
width: 100%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
[b-91w7vtwoww] .footer-container {
/* Keep the inner footer content aligned with main container padding */
max-width: 1440px;
width: 100%;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-91w7vtwoww] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
}
[b-91w7vtwoww] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-91w7vtwoww] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-91w7vtwoww] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
[b-91w7vtwoww] .footer-nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 80px;
margin-bottom: 40px;
}
[b-91w7vtwoww] .footer-section {
padding: 0 var(--mobile-page-margin);
}
[b-91w7vtwoww] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-91w7vtwoww] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-91w7vtwoww] .footer-section ul li {
margin-bottom: 10px;
}
[b-91w7vtwoww] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-91w7vtwoww] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
[b-91w7vtwoww] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
gap: 20px;
}
[b-91w7vtwoww] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-91w7vtwoww] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-91w7vtwoww] .footer-languages a:hover,
[b-91w7vtwoww] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
[b-91w7vtwoww] .footer-legal-origin {
text-align: right;
}
[b-91w7vtwoww] .footer-made-by {
font-size: 0.85em;
color: #888;
margin: 0 0 5px 0;
}
[b-91w7vtwoww] .footer-copyright {
font-size: 0.85em;
color: #888;
margin: 0;
text-align: left;
}
/* ===========================================
RESPONSIVE DESIGN
=========================================== */
@media (max-width: 768px) {
[b-91w7vtwoww] .vault-header {
padding: 2rem var(--mobile-page-margin) 1.5rem;
}
[b-91w7vtwoww] .vault-header h1 {
font-size: 2rem;
}
[b-91w7vtwoww] .vault-subtitle {
font-size: 1rem;
}
[b-91w7vtwoww] .today-memory-wrapper {
padding: 0 var(--mobile-page-margin);
}
[b-91w7vtwoww] .today-memory-card {
padding: 1.5rem;
}
[b-91w7vtwoww] .vault-filters {
padding: 0 var(--mobile-page-margin);
}
[b-91w7vtwoww] .filter-dropdown {
width: calc(100vw - 2rem);
right: 1rem;
}
}
@media (max-width: 480px) {
[b-91w7vtwoww] .vault-header h1 {
font-size: 1.8rem;
}
[b-91w7vtwoww] .today-memory-card {
padding: 1.2rem;
}
[b-91w7vtwoww] .vault-card {
padding: 1.2rem;
}
}
/* Mobile touch scroll fixes - REMOVED to fix window scrolling */
@media (max-width: 768px) {
/*
::deep .app-layout {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
-webkit-overflow-scrolling: touch;
}
::deep .container-v3,
::deep .messages-container {
overflow-x: hidden;
touch-action: pan-y pinch-zoom;
overscroll-behavior: contain;
}
*/
}
/* Responsive Layout Styles */
@media (max-width: 1024px) {
[b-91w7vtwoww] .toggle-sidebar {
display: none;
}
[b-91w7vtwoww] .app-layout {
padding-top: 60px;
}
[b-91w7vtwoww] .messages-container {
margin-left: 0 !important;
margin-top: 70px;
padding: var(--mobile-page-margin);
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main-content"
"sidebar-content";
}
[b-91w7vtwoww] .main-content-area {
padding: 1rem 0;
}
[b-91w7vtwoww] .sidebar-content-area {
padding: 1rem 0 2rem;
}
[b-91w7vtwoww] .sidebar-content-area::before {
display: none;
}
[b-91w7vtwoww] .filters-panel {
display: none;
position: static;
margin-bottom: 1.5rem;
}
[b-91w7vtwoww] .filters-panel.mobile-open {
display: block;
position: fixed;
left: max(1rem, env(safe-area-inset-left));
right: max(1rem, env(safe-area-inset-right));
bottom: calc(1rem + env(safe-area-inset-bottom));
top: auto;
z-index: 1300;
margin: 0;
max-height: min(78vh, calc(100dvh - 6rem));
overflow-y: auto;
padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
border-radius: 24px;
box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
}
[b-91w7vtwoww] .filters-panel-section {
margin-bottom: 1.25rem;
}
[b-91w7vtwoww] .filter-pill-tray {
gap: 0.5rem;
}
[b-91w7vtwoww] .filter-pill {
font-size: 0.88rem;
padding: 0.45rem 1rem;
}
[b-91w7vtwoww] .mobile-filters-trigger-row {
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
}
[b-91w7vtwoww] .mobile-filters-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(43, 42, 40, 0.42);
backdrop-filter: blur(2px);
}
[b-91w7vtwoww] .mobile-filters-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[b-91w7vtwoww] .main-footer {
width: 100% !important;
margin-left: 0 !important;
max-width: 100%;
}
[b-91w7vtwoww] .footer-container {
margin: 0 auto;
padding: 0 1rem;
}
[b-91w7vtwoww] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-91w7vtwoww] .sidebar.visible {
transform: translateX(0);
}
[b-91w7vtwoww] .sidebar.hidden {
transform: translateX(-100%);
}
}
@media (max-width: 768px) {
[b-91w7vtwoww] .messages-container {
padding: var(--mobile-page-margin);
margin-top: 60px;
}
[b-91w7vtwoww] .filters-panel {
padding: 1.4rem 1.2rem;
}
[b-91w7vtwoww] .filter-pill {
font-size: 0.85rem;
padding: 0.4rem 0.9rem;
}
[b-91w7vtwoww] .filter-pill-tray {
gap: 0.45rem;
}
[b-91w7vtwoww] .invitation-card {
padding: 2rem 1.5rem;
}
[b-91w7vtwoww] .filters-panel.mobile-open {
left: max(0.85rem, env(safe-area-inset-left));
right: max(0.85rem, env(safe-area-inset-right));
bottom: calc(0.85rem + env(safe-area-inset-bottom));
}
[b-91w7vtwoww] .vault-header {
padding: 1.5rem var(--mobile-page-margin);
}
[b-91w7vtwoww] .vault-header h1 {
font-size: 2rem;
}
[b-91w7vtwoww] .today-memory-wrapper {
padding: 0 var(--mobile-page-margin);
margin: 1.5rem auto 2rem;
}
[b-91w7vtwoww] .vault-filters {
padding: 0 var(--mobile-page-margin);
}
[b-91w7vtwoww] .footer-nav-links {
flex-direction: column;
align-items: center;
gap: 40px;
}
[b-91w7vtwoww] .footer-section {
text-align: center;
}
[b-91w7vtwoww] .footer-bottom {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
[b-91w7vtwoww] .footer-legal-origin {
text-align: center;
}
[b-91w7vtwoww] .footer-copyright {
text-align: center;
}
}
@media (max-width: 480px) {
[b-91w7vtwoww] .mobile-top-bar,
[b-91w7vtwoww] .sidebar-overlay,
[b-91w7vtwoww] .sidebar {
display: block;
}
[b-91w7vtwoww] .toggle-sidebar {
display: inline-grid;
}
[b-91w7vtwoww] .messages-container {
padding: var(--mobile-page-margin);
}
[b-91w7vtwoww] .vault-header h1 {
font-size: 1.8rem;
}
[b-91w7vtwoww] .mobile-top-bar {
display: flex;
}
}
/* ===========================================
SIDEBAR & LAYOUT COMPATIBILITY
=========================================== */
/* Invitation card styling */
[b-91w7vtwoww] .invitation-card {
background: transparent;
border: 0;
border-top: 1px solid var(--lov-line);
border-radius: 0;
padding: 1.5rem 1rem;
text-align: left;
box-shadow: none;
}
[b-91w7vtwoww] .vault-cta-icon {
display: none;
}
[b-91w7vtwoww] .vault-cta h2 {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 450;
color: var(--lov-ink);
margin-bottom: 0.85rem;
}
[b-91w7vtwoww] .vault-cta p {
/* inherited font-sans */
font-size: 0.98rem;
color: var(--lov-muted);
margin-bottom: 1.8rem;
line-height: 1.65;
}
[b-91w7vtwoww] .cta-button {
background: var(--lov-green);
color: var(--lov-on-green);
border: none;
border-radius: 6px;
min-height: 44px;
padding: 0.85rem 2rem;
/* inherited font-sans */
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none;
}
[b-91w7vtwoww] .cta-button:hover {
background: var(--lov-green);
text-decoration: underline;
text-underline-offset: .2em;
}
[b-91w7vtwoww] .cta-button:focus-visible {
outline: 2px solid var(--lov-focus);
outline-offset: 3px;
}
/* ===========================================
UNSAVE CONFIRMATION MODAL STYLES
=========================================== */
/* Modal Overlay for Centering and Background */
[b-91w7vtwoww] .modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
[b-91w7vtwoww] .modal-overlay.visible {
opacity: 1;
visibility: visible;
}
/* Modal Content for Unsave Confirmation */
[b-91w7vtwoww] .modal-content.layered-modal {
background-color: rgb(255, 242, 236);
/* Match page background */
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
max-width: 450px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
padding: 24px;
}
[b-91w7vtwoww] .modal-overlay.visible .modal-content {
transform: scale(1);
}
/* Modal Header */
[b-91w7vtwoww] .modal-header {
display: flex;
justify-content: flex-end;
padding: 0 0 16px 0;
margin-bottom: 8px;
}
[b-91w7vtwoww] .modal-close-icon-button {
background: none;
border: none;
font-size: 24px;
color: #999;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color 0.2s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
[b-91w7vtwoww] .modal-close-icon-button:hover {
color: #666;
background-color: rgba(0, 0, 0, 0.05);
}
/* Modal Body */
[b-91w7vtwoww] .modal-body {
padding: 0 8px 24px 8px;
}
[b-91w7vtwoww] .modal-title {
font-size: 24px;
font-weight: 600;
color: #2c2c2c;
margin: 0 0 16px 0;
text-align: center;
}
[b-91w7vtwoww] .modal-subtitle {
font-size: 16px;
color: #666;
margin: 0 0 24px 0;
text-align: center;
line-height: 1.5;
}
/* Message Preview Card */
[b-91w7vtwoww] .message-preview-card {
background: #fafafa;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 16px;
margin: 16px 0;
text-align: left;
}
[b-91w7vtwoww] .preview-content {
position: relative;
}
[b-91w7vtwoww] .preview-text {
font-size: 14px;
line-height: 1.5;
color: #4a4a4a;
margin: 0;
font-style: italic;
}
/* Modal Actions */
[b-91w7vtwoww] .modal-actions {
display: flex;
gap: 12px;
justify-content: center;
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid #f0f0f0;
}
/* Button Styles */
[b-91w7vtwoww] .btn-secondary-action {
background-color: transparent;
color: #666;
border: 1px solid #e5e5e5;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
[b-91w7vtwoww] .btn-secondary-action:hover {
background-color: #f5f5f5;
border-color: #d1d1d1;
color: #555;
}
[b-91w7vtwoww] .btn-danger-action {
background-color: #e53e3e;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
[b-91w7vtwoww] .btn-danger-action:hover {
background-color: #c53030;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}
[b-91w7vtwoww] .btn-danger-action:active {
transform: translateY(0);
}
/* Mobile Responsiveness for Modal */
@media (max-width: 768px) {
[b-91w7vtwoww] .modal-content.layered-modal {
max-width: 95%;
margin: 0 auto;
padding: 20px;
}
[b-91w7vtwoww] .modal-title {
font-size: 20px;
margin-bottom: 12px;
}
[b-91w7vtwoww] .modal-subtitle {
font-size: 15px;
margin-bottom: 20px;
}
[b-91w7vtwoww] .modal-actions {
flex-direction: column;
gap: 8px;
}
[b-91w7vtwoww] .btn-secondary-action,
[b-91w7vtwoww] .btn-danger-action {
width: 100%;
padding: 14px 24px;
}
}
/* ===========================================
KEEPSAKE PERSONA PICKER
=========================================== */
[b-91w7vtwoww] .persona-cta-container {
margin-top: 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
[b-91w7vtwoww] .persona-cta {
align-self: flex-start;
border: none;
background: linear-gradient(135deg, #f0c2b1 0%, #f7a8bc 100%);
color: #4b2e2a;
font-weight: 600;
padding: 0.55rem 1rem;
border-radius: 999px;
cursor: pointer;
box-shadow: 0 4px 10px rgba(75, 46, 42, 0.15);
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[b-91w7vtwoww] .persona-cta:hover {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(75, 46, 42, 0.2);
}
[b-91w7vtwoww] .persona-picker {
background: #fff9f4;
border: 1px solid rgba(75, 46, 42, 0.15);
box-shadow: 0 12px 32px rgba(75, 46, 42, 0.2);
border-radius: 16px;
padding: 1.25rem;
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 320px;
}
[b-91w7vtwoww] .persona-picker-title {
font-size: 0.95rem;
color: #5b403b;
font-weight: 600;
margin: 0;
}
[b-91w7vtwoww] .persona-picker-options {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
[b-91w7vtwoww] .persona-option {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: #3f2c28;
background: rgba(247, 231, 223, 0.6);
padding: 0.55rem 0.75rem;
border-radius: 12px;
cursor: pointer;
transition: background 0.2s ease;
}
[b-91w7vtwoww] .persona-option:hover {
background: rgba(247, 231, 223, 0.9);
}
[b-91w7vtwoww] .persona-option input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: #d98473;
}
[b-91w7vtwoww] .persona-picker-actions {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
[b-91w7vtwoww] .persona-action {
border: none;
border-radius: 12px;
padding: 0.55rem 0.9rem;
font-weight: 600;
cursor: pointer;
background: linear-gradient(135deg, #f7cbbb, #f3a0ba);
color: #472922;
transition: opacity 0.2s ease, transform 0.2s ease;
}
[b-91w7vtwoww] .persona-action.secondary {
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(75, 46, 42, 0.15);
}
[b-91w7vtwoww] .persona-action:disabled {
opacity: 0.45;
cursor: not-allowed;
transform: none;
}
[b-91w7vtwoww] .persona-action:not(:disabled):hover {
transform: translateY(-1px);
}
/* Compact layout on tiny screens */
@media (max-width: 420px) {
[b-91w7vtwoww] .persona-picker {
width: 100%;
}
}
/* ==========================================================
Keepsake Anthology Card Styling
========================================================== */
[b-91w7vtwoww] .keepsake-card {
margin-bottom: 2.2rem;
break-inside: avoid;
display: inline-block;
width: 100%;
position: relative;
padding: 1.5rem 1.6rem 1.4rem;
background: linear-gradient(180deg, #fff9f1 0%, #fff3e4 100%);
border-radius: 22px;
border: 1px solid rgba(241, 225, 205, 0.85);
box-shadow: 0 16px 32px rgba(79, 59, 52, 0.12);
color: #402f2a;
overflow: visible;
}
[b-91w7vtwoww] .keepsake-card .three-dots-menu {
position: absolute;
top: 1.1rem;
right: 1.1rem;
}
[b-91w7vtwoww] .keepsake-card-head {
display: flex;
align-items: center;
gap: 0.85rem;
margin-bottom: 1.25rem;
padding-bottom: 0.45rem;
}
[b-91w7vtwoww] .keepsake-letterhead {
position: relative;
}
[b-91w7vtwoww] .keepsake-letterhead::after {
content: "";
position: absolute;
left: 0;
bottom: -0.6rem;
width: 100%;
height: 1px;
background: linear-gradient(90deg, rgba(122, 98, 93, 0.35) 0%, rgba(122, 98, 93, 0.05) 100%);
}
[b-91w7vtwoww] .keepsake-avatar {
width: 52px;
height: 52px;
border-radius: 50%;
object-fit: cover;
border: 3px solid rgba(255, 236, 221, 0.9);
box-shadow: 0 10px 18px rgba(79, 59, 52, 0.18);
}
[b-91w7vtwoww] .keepsake-card-head-text {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
[b-91w7vtwoww] .keepsake-author {
font-weight: 700;
font-size: 1.08rem;
color: #3c2a26;
}
[b-91w7vtwoww] .keepsake-subtitle {
font-style: italic;
font-size: 0.95rem;
color: #7a625d;
}
[b-91w7vtwoww] .keepsake-card-body {
font-size: 1.05rem;
font-family: var(--font-serif);
line-height: 1.8;
color: #3d2c28;
min-height: 110px;
}
[b-91w7vtwoww] .keepsake-card-body p {
margin: 0 0 0.85rem;
}
[b-91w7vtwoww] .keepsake-card-body p:last-child {
margin-bottom: 0;
}
[b-91w7vtwoww] .keepsake-card-text {
position: relative;
}
[b-91w7vtwoww] .keepsake-card-body.truncated {
position: relative;
}
[b-91w7vtwoww] .keepsake-card-body.truncated .keepsake-card-text {
max-height: 11rem;
overflow: hidden;
}
[b-91w7vtwoww] .keepsake-card-body.truncated .keepsake-card-text::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3.6rem;
/* Match the card's bottom gradient stop (#fff3e4) so the fade dissolves seamlessly into the paper */
background: linear-gradient(180deg, rgba(255, 243, 228, 0) 0%, rgba(255, 243, 228, 0.85) 55%, rgba(255, 243, 228, 1) 100%);
pointer-events: none;
transition: opacity 0.25s ease;
}
[b-91w7vtwoww] .keepsake-card:hover .keepsake-card-text::after {
opacity: 0.92;
}
[b-91w7vtwoww] .keepsake-card-hint-btn {
margin-top: 1rem;
/* inherited font-sans */
font-size: 0.86rem;
font-weight: 500;
color: #7B5A53;
letter-spacing: 0.02em;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: transparent;
border: none;
padding: 0;
cursor: pointer;
transition: transform 0.25s ease, color 0.2s ease;
}
[b-91w7vtwoww] .keepsake-card-hint-btn .keepsake-card-hint-icon {
font-size: 1rem;
line-height: 1;
transition: transform 0.2s ease;
}
[b-91w7vtwoww] .keepsake-card-hint-btn:focus-visible {
outline: 2px solid rgba(123, 90, 83, 0.45);
outline-offset: 3px;
}
[b-91w7vtwoww] .keepsake-card-hint-btn[aria-expanded="true"] .keepsake-card-hint-icon {
transform: rotate(90deg);
}
[b-91w7vtwoww] .keepsake-card:hover .keepsake-card-hint-btn,
[b-91w7vtwoww] .keepsake-card-hint-btn:hover {
transform: translateY(-1px);
color: #5f3f38;
}
[b-91w7vtwoww] .filters-panel-link {
margin-top: 0.75rem;
padding: 0;
background: none;
border: none;
color: #7B5A53;
/* inherited font-sans */
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
transition: color 0.2s ease, transform 0.2s ease;
}
[b-91w7vtwoww] .filters-panel-link:hover,
[b-91w7vtwoww] .filters-panel-link:focus-visible {
color: #5f3f38;
}
[b-91w7vtwoww] .filters-panel-link:focus-visible {
outline: 2px solid rgba(123, 90, 83, 0.35);
outline-offset: 4px;
}
[b-91w7vtwoww] .keepsake-image {
width: 100%;
border-radius: 16px;
object-fit: cover;
box-shadow: 0 12px 28px rgba(79, 59, 52, 0.18);
}
[b-91w7vtwoww] .keepsake-audio {
width: 100%;
margin-top: 0.75rem;
}
[b-91w7vtwoww] .keepsake-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.35rem;
font-size: 0.92rem;
}
[b-91w7vtwoww] .keepsake-footer-meta {
display: flex;
align-items: center;
gap: 0.9rem;
flex-wrap: wrap;
row-gap: 0.35rem;
color: #6f5a55;
}
[b-91w7vtwoww] .keepsake-footer-chip {
display: inline-flex;
align-items: center;
gap: 0.35rem;
background: rgba(255, 245, 237, 0.9);
padding: 0.25rem 0.65rem;
border-radius: 999px;
box-shadow: inset 0 0 0 1px rgba(111, 90, 85, 0.12);
}
[b-91w7vtwoww] .keepsake-footer-icon {
width: 18px;
height: 18px;
color: #7a625d;
}
[b-91w7vtwoww] .keepsake-footer-chip svg {
display: block;
flex-shrink: 0;
}
[b-91w7vtwoww] .keepsake-shared-chip {
background: rgba(206, 133, 104, 0.12);
color: #a85e46;
box-shadow: inset 0 0 0 1px rgba(168, 94, 70, 0.2);
}
[b-91w7vtwoww] .keepsake-shared-chip svg {
color: #a85e46;
}
[b-91w7vtwoww] .keepsake-chat {
border: 1px solid rgba(126, 100, 92, 0.25);
background: rgba(255, 245, 237, 0.95);
color: #6f5a55;
width: 42px;
height: 42px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 22px rgba(79, 59, 52, 0.16);
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
[b-91w7vtwoww] .keepsake-chat:hover {
transform: translateY(-1px);
box-shadow: 0 14px 28px rgba(79, 59, 52, 0.2);
}
[b-91w7vtwoww] .keepsake-chat-icon {
width: 20px;
height: 20px;
}
[b-91w7vtwoww] .keepsake-persona-popover {
position: absolute;
right: 1.1rem;
bottom: 4.6rem;
z-index: 30;
}
[b-91w7vtwoww] .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ===========================================
EMPTY STATE
=========================================== */
[b-91w7vtwoww] .empty-state {
text-align: center;
padding: 4rem 2rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 16px;
border: 1px dashed #E8DCC0;
}
[b-91w7vtwoww] .empty-state-icon {
font-size: 2.5rem;
margin-bottom: 1rem;
}
[b-91w7vtwoww] .empty-state h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 400;
color: #5A413A;
margin-bottom: 0.75rem;
}
[b-91w7vtwoww] .empty-state p {
/* inherited font-sans */
font-size: 1rem;
color: #8B7355;
margin-bottom: 1.5rem;
line-height: 1.6;
}
[b-91w7vtwoww] .empty-state-action {
background: linear-gradient(135deg, #7B5A53, #A86F5C);
color: #fffaf6;
border: none;
border-radius: 999px;
padding: 0.85rem 2rem;
/* inherited font-sans */
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
[b-91w7vtwoww] .empty-state-action:hover {
background: linear-gradient(135deg, #6B4A43, #915847);
transform: translateY(-2px);
}
@media (max-width: 768px) {
[b-91w7vtwoww] .keepsake-card {
padding: 1.2rem 1.25rem 1.2rem;
}
[b-91w7vtwoww] .keepsake-card-footer {
flex-direction: column;
align-items: flex-start;
}
[b-91w7vtwoww] .keepsake-chat {
align-self: flex-end;
}
[b-91w7vtwoww] .keepsake-persona-popover {
position: static;
margin-top: 1rem;
}
}
/* Keepsakes mobile polish - keeps the anthology cards but fixes the page frame. */
@media (max-width: 1024px) {
[b-91w7vtwoww] .mobile-floating-header {
z-index: 1200;
}
.app-layout[b-91w7vtwoww],
[b-91w7vtwoww] .app-layout {
display: block;
width: 100%;
max-width: 100vw;
padding-top: 60px;
overflow-x: hidden;
background-color: var(--lov-paper);
}
.messages-container[b-91w7vtwoww],
[b-91w7vtwoww] .messages-container,
.messages-container.sidebar-hidden[b-91w7vtwoww],
[b-91w7vtwoww] .messages-container.sidebar-hidden {
width: 100%;
max-width: 720px;
min-width: 0;
margin: 0 auto !important;
padding: 0 0 44px;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main-content"
"sidebar-content";
box-sizing: border-box;
overflow-x: hidden;
}
.vault-header[b-91w7vtwoww],
[b-91w7vtwoww] .vault-header {
width: 100%;
max-width: 680px;
padding: 30px 18px 22px;
box-sizing: border-box;
}
.vault-header h1[b-91w7vtwoww],
[b-91w7vtwoww] .vault-header h1 {
font-size: clamp(2.05rem, 7vw, 2.7rem);
line-height: 1.1;
letter-spacing: 0;
margin-bottom: 1rem;
}
.vault-subtitle[b-91w7vtwoww],
[b-91w7vtwoww] .vault-subtitle {
max-width: 36rem;
font-size: clamp(1.05rem, 2.8vw, 1.25rem);
line-height: 1.55;
}
.main-content-area[b-91w7vtwoww],
[b-91w7vtwoww] .main-content-area {
width: 100%;
padding: 0 18px 2.5rem;
box-sizing: border-box;
}
.mobile-filters-trigger-row[b-91w7vtwoww],
[b-91w7vtwoww] .mobile-filters-trigger-row {
margin-bottom: 1rem;
}
.vault-masonry[b-91w7vtwoww],
[b-91w7vtwoww] .vault-masonry {
width: 100%;
padding: 0;
column-gap: 1rem;
}
}
@media (max-width: 680px) {
.messages-container[b-91w7vtwoww],
[b-91w7vtwoww] .messages-container,
.messages-container.sidebar-hidden[b-91w7vtwoww],
[b-91w7vtwoww] .messages-container.sidebar-hidden {
max-width: 680px;
padding-bottom: 40px;
}
.vault-header[b-91w7vtwoww],
[b-91w7vtwoww] .vault-header {
padding: 24px var(--mobile-page-margin, 16px) 16px;
}
.vault-header h1[b-91w7vtwoww],
[b-91w7vtwoww] .vault-header h1 {
font-size: clamp(2.05rem, 9.2vw, 2.35rem);
line-height: 1.12;
}
.vault-subtitle[b-91w7vtwoww],
[b-91w7vtwoww] .vault-subtitle {
font-size: clamp(1.02rem, 4.4vw, 1.16rem);
line-height: 1.55;
}
.main-content-area[b-91w7vtwoww],
[b-91w7vtwoww] .main-content-area {
padding: 0 var(--mobile-page-margin, 16px) 2.5rem;
}
.vault-masonry[b-91w7vtwoww],
[b-91w7vtwoww] .vault-masonry {
column-count: 1;
padding: 0;
}
.keepsake-card[b-91w7vtwoww],
[b-91w7vtwoww] .keepsake-card {
border-radius: 18px;
padding: 1.2rem 1.25rem 1.25rem;
margin-bottom: 1.6rem;
box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
}
.keepsake-card-body[b-91w7vtwoww],
[b-91w7vtwoww] .keepsake-card-body {
font-size: clamp(1rem, 4.4vw, 1.12rem);
line-height: 1.72;
}
}
@media (max-width: 420px) {
.vault-header[b-91w7vtwoww],
[b-91w7vtwoww] .vault-header {
padding-top: 22px;
}
.keepsake-card-head[b-91w7vtwoww],
[b-91w7vtwoww] .keepsake-card-head {
gap: 0.75rem;
}
.keepsake-avatar[b-91w7vtwoww],
[b-91w7vtwoww] .keepsake-avatar {
width: 48px;
height: 48px;
}
}
/* Editorial collection heading and primary action. */
[b-91w7vtwoww] .vault-header h1 { color: var(--lov-ink); font-size: clamp(2rem,3.5vw,3.2rem); font-weight: 450; }
[b-91w7vtwoww] .vault-subtitle { color: var(--lov-muted); }
[b-91w7vtwoww] .btn-primary, [b-91w7vtwoww] .btn-primary:hover { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); }
/* Collection hierarchy: the saved words are the visual focus. */
.vault-header[b-91w7vtwoww], [b-91w7vtwoww] .vault-header { text-align: left; padding-bottom: 24px; }
.vault-subtitle[b-91w7vtwoww], [b-91w7vtwoww] .vault-subtitle { max-width: 68ch; margin-left: 0; margin-right: 0; font-size: 1rem; line-height: 1.65; }
.keepsake-card[b-91w7vtwoww], [b-91w7vtwoww] .keepsake-card { background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: none; }
.keepsake-card-body[b-91w7vtwoww], [b-91w7vtwoww] .keepsake-card-body { color: var(--lov-ink); }
.empty-state[b-91w7vtwoww], [b-91w7vtwoww] .empty-state { max-width: 720px; margin-inline: auto; padding: 32px 24px; background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: none; }
.empty-state-action[b-91w7vtwoww], [b-91w7vtwoww] .empty-state-action { min-height: 44px; background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; }
/* Keep nested content legible on the selected application surface. */
[b-91w7vtwoww] .keepsake-author, [b-91w7vtwoww] .empty-state h3 { color: var(--lov-ink); }
[b-91w7vtwoww] .keepsake-subtitle, [b-91w7vtwoww] .empty-state p { color: var(--lov-muted); }
[b-91w7vtwoww] .keepsake-card-hint-btn, [b-91w7vtwoww] .keepsake-card:hover .keepsake-card-hint-btn, [b-91w7vtwoww] .keepsake-card-hint-btn:hover { color: var(--lov-green); }
[b-91w7vtwoww] .keepsake-card-hint-btn:focus-visible { outline-color: var(--lov-focus); }
[b-91w7vtwoww] .keepsake-shared-chip { color: var(--lov-ink); background: var(--lov-selected); }
[b-91w7vtwoww] .keepsake-shared-chip svg { color: currentColor; stroke: currentColor; }
@media (min-width: 1025px) {
.messages-container[b-91w7vtwoww] {
width: min(1200px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
margin-right: auto;
}
.messages-container.sidebar-hidden[b-91w7vtwoww] {
width: min(1200px, 100%);
margin-inline: auto;
}
.app-layout[b-91w7vtwoww] .main-footer.main-footer {
width: min(1200px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
margin-right: auto;
}
.app-layout[b-91w7vtwoww] .main-footer.main-footer.sidebar-hidden {
width: min(1200px, 100%);
max-width: 1200px;
margin-inline: auto;
}
}
/* /Components/Pages/LostWorldBooks.razor.rz.scp.css */
:host[b-n4ltcxwjf0] {
display: block;
width: 100%;
background: var(--lov-paper);
}
.app-layout[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .app-layout {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
overflow-x: hidden;
background: var(--lov-paper);
}
.sidebar-overlay[b-n4ltcxwjf0] {
position: fixed;
inset: 0;
z-index: 9;
background: rgba(0, 0, 0, 0.42);
}
.sidebar-overlay.hidden[b-n4ltcxwjf0] {
display: none;
}
.sidebar[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 10;
display: flex;
width: 280px;
flex-direction: column;
align-items: center;
padding: 1.5rem;
border-right: 1px solid #efd9cf;
background: var(--lov-paper);
transition: transform 0.3s ease;
}
.sidebar.hidden[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .sidebar.hidden {
transform: translateX(-100%);
}
.sidebar-top-content[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .sidebar-top-content {
display: flex;
width: 100%;
flex-shrink: 0;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
}
.app-logo-link[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .app-logo-link {
display: block;
width: 100%;
margin-top: -1.2rem;
text-align: center;
text-decoration: none;
}
.sidebar-logo img[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .sidebar-logo img {
display: inline-block;
width: auto;
max-width: 180px;
height: 50px;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
vertical-align: middle;
}
[b-n4ltcxwjf0] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
display: inline-grid;
}
.lost-world-books-page[b-n4ltcxwjf0] {
--books-ink: #2d2119;
--books-muted: #785f4e;
--books-rust: #a55232;
--books-gold: #e5b85f;
--books-forest: #10231d;
--books-line: rgba(132, 87, 55, 0.22);
flex: 1;
width: calc(100% - 280px);
min-height: 100vh;
margin-left: 280px;
color: var(--books-ink);
background:
radial-gradient(circle at 82% 4%, rgba(228, 180, 98, 0.2), transparent 27rem),
repeating-linear-gradient(90deg, rgba(99, 69, 45, 0.022) 0 1px, transparent 1px 6px),
#f8efe2;
transition: width 0.3s ease, margin-left 0.3s ease;
}
.lost-world-books-page.sidebar-hidden[b-n4ltcxwjf0] {
width: 100%;
margin-left: 0;
}
.books-hero[b-n4ltcxwjf0] {
width: min(72rem, calc(100% - 3rem));
margin-inline: auto;
padding: clamp(5.5rem, 10vw, 9rem) 0 clamp(3.5rem, 7vw, 6.5rem);
}
.books-eyebrow[b-n4ltcxwjf0] {
margin: 0 0 1rem;
color: var(--books-rust);
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.19em;
text-transform: uppercase;
}
.books-hero h1[b-n4ltcxwjf0],
.living-book-invitation h2[b-n4ltcxwjf0],
.living-book-invitation h3[b-n4ltcxwjf0],
.available-worlds h2[b-n4ltcxwjf0],
.world-card h3[b-n4ltcxwjf0] {
font-family: var(--font-serif);
}
.books-hero h1[b-n4ltcxwjf0] {
max-width: 10ch;
margin: 0;
font-size: clamp(4rem, 10vw, 8rem);
font-weight: 450;
line-height: 0.88;
letter-spacing: -0.06em;
}
.books-hero > p:last-child[b-n4ltcxwjf0] {
max-width: 42rem;
margin: 2rem 0 0;
color: var(--books-muted);
font-family: var(--font-sans);
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.65;
}
.books-loading[b-n4ltcxwjf0] {
width: min(72rem, calc(100% - 3rem));
min-height: 17rem;
display: flex;
align-items: center;
gap: 0.9rem;
margin-inline: auto;
color: var(--books-muted);
font-family: var(--font-sans);
}
.books-loading span[b-n4ltcxwjf0],
.worlds-state > span[b-n4ltcxwjf0] {
width: 1.3rem;
height: 1.3rem;
flex: 0 0 auto;
border: 2px solid rgba(165, 82, 50, 0.2);
border-top-color: var(--books-rust);
border-radius: 50%;
animation: books-spin-b-n4ltcxwjf0 800ms linear infinite;
}
[b-n4ltcxwjf0] .story-edition-shelf__inner {
width: min(72rem, calc(100% - 3rem));
}
[b-n4ltcxwjf0] .story-edition-shelf__grid {
max-width: none;
}
.living-book-invitation[b-n4ltcxwjf0] {
color: #fffaf0;
background:
radial-gradient(circle at 82% 25%, rgba(229, 184, 95, 0.13), transparent 34rem),
linear-gradient(145deg, #142a22, #0d1c18 72%);
padding: clamp(4rem, 6vw, 5.75rem) max(1.5rem, calc((100% - 72rem) / 2));
}
.living-book-invitation__intro[b-n4ltcxwjf0] {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
gap: clamp(2.5rem, 5vw, 5rem);
align-items: stretch;
}
.living-book-invitation__intro .books-eyebrow[b-n4ltcxwjf0],
.living-book-invitation__promise .books-eyebrow[b-n4ltcxwjf0] {
color: var(--books-gold);
}
.living-book-invitation__lead[b-n4ltcxwjf0] {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
}
.living-book-invitation__lead h2[b-n4ltcxwjf0] {
max-width: 11ch;
margin: 0;
font-size: clamp(3.25rem, 5vw, 4.8rem);
font-weight: 450;
line-height: 0.96;
letter-spacing: -0.045em;
}
.living-book-invitation__lead > p:last-of-type[b-n4ltcxwjf0] {
max-width: 45rem;
margin: 1.5rem 0 0;
color: #d8ccba;
font-family: var(--font-sans);
font-size: 1.05rem;
line-height: 1.7;
}
.living-book-invitation__actions[b-n4ltcxwjf0] {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.6rem;
}
.books-button[b-n4ltcxwjf0] {
min-height: 3.2rem;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1.35rem;
border: 1px solid var(--books-gold);
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 760;
text-decoration: none;
}
.books-button--primary[b-n4ltcxwjf0] {
color: #1c241e;
background: var(--books-gold);
}
.books-button--secondary[b-n4ltcxwjf0] {
color: #fffaf0;
background: transparent;
}
.books-button:hover[b-n4ltcxwjf0] {
transform: translateY(-1px);
}
.living-book-invitation__promise[b-n4ltcxwjf0] {
display: flex;
min-width: 0;
flex-direction: column;
justify-content: center;
padding: clamp(1.5rem, 3vw, 2.3rem);
border: 1px solid rgba(229, 184, 95, 0.25);
border-radius: 1.5rem;
background: rgba(255, 250, 240, 0.055);
}
.living-book-invitation__promise h3[b-n4ltcxwjf0] {
max-width: 14ch;
margin: 0;
font-size: clamp(2rem, 3.25vw, 3.15rem);
font-weight: 480;
line-height: 1.03;
}
.living-book-invitation__promise > p:last-child[b-n4ltcxwjf0] {
margin: 1.3rem 0 0;
color: #d8ccba;
font-family: var(--font-sans);
line-height: 1.7;
}
.living-book-steps[b-n4ltcxwjf0] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px;
margin: clamp(3rem, 5vw, 4.5rem) 0 0;
padding: 0;
border-block: 1px solid rgba(229, 184, 95, 0.22);
list-style: none;
}
.living-book-steps li[b-n4ltcxwjf0] {
min-width: 0;
padding: 2rem clamp(1rem, 3vw, 2rem);
border-right: 1px solid rgba(229, 184, 95, 0.22);
}
.living-book-steps li:last-child[b-n4ltcxwjf0] {
border-right: 0;
}
.living-book-steps span[b-n4ltcxwjf0] {
color: var(--books-gold);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.15em;
}
.living-book-steps h3[b-n4ltcxwjf0] {
margin: 0.75rem 0 0;
font-size: 1.5rem;
font-weight: 520;
}
.living-book-steps p[b-n4ltcxwjf0] {
margin: 0.75rem 0 0;
color: #cbbfab;
font-family: var(--font-sans);
line-height: 1.55;
}
.available-worlds[b-n4ltcxwjf0] {
width: min(72rem, calc(100% - 3rem));
margin-inline: auto;
padding: clamp(5rem, 9vw, 8.5rem) 0;
}
.available-worlds > header[b-n4ltcxwjf0] {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
column-gap: clamp(2rem, 7vw, 7rem);
align-items: end;
}
.available-worlds > header .books-eyebrow[b-n4ltcxwjf0] {
grid-column: 1 / -1;
}
.available-worlds h2[b-n4ltcxwjf0] {
max-width: 12ch;
margin: 0;
font-size: clamp(2.8rem, 6vw, 5.7rem);
font-weight: 450;
line-height: 0.96;
letter-spacing: -0.045em;
}
.available-worlds > header > p:last-child[b-n4ltcxwjf0] {
margin: 0;
color: var(--books-muted);
font-family: var(--font-sans);
line-height: 1.7;
}
.world-cards[b-n4ltcxwjf0] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1.25rem;
margin-top: clamp(2.5rem, 6vw, 5rem);
}
.world-card[b-n4ltcxwjf0] {
position: relative;
isolation: isolate;
min-height: clamp(27rem, 46vw, 39rem);
overflow: hidden;
border-radius: 0.4rem 3rem 0.4rem 0.4rem;
color: #fffaf0;
background: #263b31;
box-shadow: 0 1.5rem 4rem rgba(83, 51, 29, 0.14);
}
.world-card picture[b-n4ltcxwjf0],
.world-card img[b-n4ltcxwjf0],
.world-card__shade[b-n4ltcxwjf0] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.world-card img[b-n4ltcxwjf0] {
z-index: -2;
object-fit: cover;
transition: transform 600ms ease;
}
.world-card:hover img[b-n4ltcxwjf0] {
transform: scale(1.025);
}
.world-card__shade[b-n4ltcxwjf0] {
z-index: -1;
background: linear-gradient(180deg, rgba(8, 20, 16, 0.04) 20%, rgba(8, 20, 16, 0.9) 88%);
}
.world-card__copy[b-n4ltcxwjf0] {
position: absolute;
inset: auto 0 0;
padding: clamp(1.5rem, 4vw, 3rem);
}
.world-card__copy > p[b-n4ltcxwjf0] {
margin: 0 0 0.75rem;
color: var(--books-gold);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.15em;
text-transform: uppercase;
}
.world-card h3[b-n4ltcxwjf0] {
max-width: 13ch;
margin: 0;
font-size: clamp(2.3rem, 4vw, 4rem);
font-weight: 470;
line-height: 0.98;
}
.world-card__copy > span[b-n4ltcxwjf0] {
display: block;
max-width: 39rem;
margin-top: 1rem;
color: #eee3d3;
font-family: var(--font-sans);
line-height: 1.55;
}
.world-card__copy a[b-n4ltcxwjf0] {
display: inline-flex;
gap: 0.7rem;
margin-top: 1.4rem;
color: #fffaf0;
font-family: var(--font-sans);
font-weight: 780;
text-decoration: none;
}
.worlds-state[b-n4ltcxwjf0] {
min-height: 12rem;
display: flex;
align-items: center;
gap: 0.9rem;
margin-top: 2rem;
color: var(--books-muted);
font-family: var(--font-sans);
}
.worlds-state--error[b-n4ltcxwjf0] {
display: block;
}
.worlds-state button[b-n4ltcxwjf0] {
min-height: 2.8rem;
margin-top: 0.75rem;
padding: 0.65rem 1.1rem;
border: 1px solid var(--books-rust);
border-radius: 999px;
color: #fffaf3;
background: var(--books-rust);
font: 750 0.9rem var(--font-sans);
cursor: pointer;
}
@keyframes books-spin-b-n4ltcxwjf0 {
to { transform: rotate(360deg); }
}
@media (max-width: 1024px) {
.sidebar[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .sidebar {
top: 60px;
bottom: 0;
transform: translateX(-100%);
}
.sidebar.visible[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .sidebar.visible {
transform: translateX(0);
}
[b-n4ltcxwjf0] .toggle-sidebar {
display: none;
}
.lost-world-books-page[b-n4ltcxwjf0],
.lost-world-books-page.sidebar-hidden[b-n4ltcxwjf0] {
width: 100%;
margin-left: 0;
padding-top: 60px;
}
.living-book-invitation__intro[b-n4ltcxwjf0] {
grid-template-columns: 1fr;
gap: 2rem;
}
.living-book-invitation__promise[b-n4ltcxwjf0] {
margin-top: 0;
}
}
@media (max-width: 720px) {
.books-hero[b-n4ltcxwjf0],
.books-loading[b-n4ltcxwjf0],
.available-worlds[b-n4ltcxwjf0],
[b-n4ltcxwjf0] .story-edition-shelf__inner {
width: min(calc(100% - 2rem), 72rem);
}
.books-hero[b-n4ltcxwjf0] {
padding: 4rem 0 3.5rem;
}
.books-hero h1[b-n4ltcxwjf0] {
font-size: clamp(3.5rem, 19vw, 5.7rem);
}
.living-book-invitation[b-n4ltcxwjf0] {
padding-inline: 1rem;
}
.living-book-invitation__lead h2[b-n4ltcxwjf0] {
font-size: clamp(2.7rem, 14vw, 4.5rem);
}
.living-book-invitation__actions[b-n4ltcxwjf0],
.books-button[b-n4ltcxwjf0] {
width: 100%;
}
.living-book-steps[b-n4ltcxwjf0] {
grid-template-columns: 1fr;
}
.living-book-steps li[b-n4ltcxwjf0] {
border-right: 0;
border-bottom: 1px solid rgba(229, 184, 95, 0.22);
}
.living-book-steps li:last-child[b-n4ltcxwjf0] {
border-bottom: 0;
}
.available-worlds > header[b-n4ltcxwjf0],
.world-cards[b-n4ltcxwjf0] {
grid-template-columns: 1fr;
}
.available-worlds > header > p:last-child[b-n4ltcxwjf0] {
margin-top: 1.5rem;
}
.world-card[b-n4ltcxwjf0] {
min-height: 31rem;
border-radius: 0.35rem 2rem 0.35rem 0.35rem;
}
[b-n4ltcxwjf0] .story-edition-shelf__grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.world-card img[b-n4ltcxwjf0],
.books-button[b-n4ltcxwjf0],
.sidebar[b-n4ltcxwjf0],
.lost-world-books-page[b-n4ltcxwjf0] {
transition: none;
}
}
/* The library shares the app's paper while book artwork carries its atmosphere. */
.lost-world-books-page[b-n4ltcxwjf0] { --books-ink: var(--lov-ink); --books-muted: var(--lov-muted); --books-line: var(--lov-line); background: var(--lov-paper); }
.books-hero[b-n4ltcxwjf0] { padding-top: 48px; padding-bottom: 40px; }
.books-hero h1[b-n4ltcxwjf0] { max-width: 24ch; font-size: clamp(2.3rem,5vw,4rem); line-height: 1.12; letter-spacing: -.035em; }
.books-button--primary[b-n4ltcxwjf0] { background: var(--lov-green); color: var(--lov-on-green); border-color: var(--lov-green); }
/* A private library is a working collection, with atmosphere in the covers. */
.books-hero[b-n4ltcxwjf0] { width: min(74rem, calc(100% - 3rem)); padding-block: 40px 28px; }
.books-eyebrow[b-n4ltcxwjf0] { color: var(--lov-muted); margin-bottom: 12px; }
.books-hero > p:last-child[b-n4ltcxwjf0] { margin-top: 16px; font-size: 1rem; max-width: 65ch; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf { background: transparent; color: var(--lov-ink); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__inner { width: min(74rem, calc(100% - 3rem)); padding-block: 24px 48px; border-top: 1px solid var(--lov-line); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__eyebrow { display: none; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__heading h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.2; letter-spacing: -.025em; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__heading > p:last-child { color: var(--lov-muted); margin-top: 10px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__grid { max-width: none; margin-top: 24px; gap: 24px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book { background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 4px 8px 8px 4px; box-shadow: none; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book:hover { transform: none; border-color: var(--lov-green); box-shadow: none; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__copy { padding: 22px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__status,
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__world { color: var(--lov-green); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__passages,
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book time { color: var(--lov-muted); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__read { min-height: 44px; color: var(--lov-green); border-color: var(--lov-line); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__utilities { gap: 8px 16px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__utilities a,
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__utilities button { min-height: 44px; color: var(--lov-ink); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__utilities .story-edition-book__edit { border-radius: 6px; border-color: var(--lov-line); background: transparent; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__utilities button::before,
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__utilities .story-edition-book__edit::before { color: currentColor; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book a:focus-visible,
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book button:focus-visible { outline: 2px solid var(--lov-focus); outline-offset: 3px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__loading,
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__message { background: var(--lov-surface); color: var(--lov-ink); border-color: var(--lov-line); border-radius: 8px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__message h3,
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__error { color: var(--lov-ink); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__message button:focus-visible { outline: 2px solid var(--lov-focus); outline-offset: 3px; }
@media (max-width: 768px) {
.books-hero[b-n4ltcxwjf0] { padding-top: 28px; }
.books-hero[b-n4ltcxwjf0],
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-shelf__inner { width: calc(100% - 32px); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book { grid-template-columns: minmax(0, 32%) minmax(0, 1fr); }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__copy { padding: 16px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__cover { padding: 16px 12px; }
.lost-world-books-page[b-n4ltcxwjf0] .story-edition-book__cover strong { font-size: 1.1rem; overflow-wrap: anywhere; }
}
/* /Components/Pages/LostWorlds.razor.rz.scp.css */
.lost-worlds-page[b-v1ct4h70iz] {
--paper: #f7f0e4;
--paper-deep: #e7d4b4;
--ink: #29231f;
--ink-soft: #675c50;
--night: #13211e;
--night-soft: #c7b89d;
--gold: #e3b965;
--terracotta: #ad5b3f;
min-width: 0;
min-height: 100vh;
overflow-x: clip;
color: var(--ink);
background: var(--paper);
font-family: var(--font-sans, Inter, "Helvetica Neue", Arial, sans-serif);
}
.campaign-header[b-v1ct4h70iz],
.campaign-footer[b-v1ct4h70iz],
.section-shell[b-v1ct4h70iz] {
width: min(calc(100% - 48px), 1180px);
box-sizing: border-box;
margin-inline: auto;
}
.campaign-header[b-v1ct4h70iz] {
position: absolute;
z-index: 5;
inset: 0 0 auto;
height: 82px;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand-link[b-v1ct4h70iz] {
display: inline-flex;
align-items: center;
color: inherit;
text-decoration: none;
}
.brand-link:hover[b-v1ct4h70iz],
.brand-link:focus-visible[b-v1ct4h70iz] {
color: inherit;
text-decoration: none;
}
.brand-link:hover[b-v1ct4h70iz] {
opacity: .82;
}
.campaign-header .brand-link[b-v1ct4h70iz] {
--libbu-brand-ink: #fffdf7;
--libbu-brand-symbol: #fffdf7;
padding: 6px 10px;
border-radius: 6px;
color: #fffdf7;
background: rgba(11, 25, 22, 0.66);
}
.campaign-header .brand-link:hover[b-v1ct4h70iz] {
opacity: 1;
background: rgba(11, 25, 22, 0.78);
}
.brand-link img[b-v1ct4h70iz] {
display: block;
width: auto;
height: 42px;
filter: brightness(0) invert(1);
}
.header-link[b-v1ct4h70iz] {
min-height: 40px;
display: inline-flex;
align-items: center;
padding: 0 15px;
border: 1px solid rgba(255, 252, 245, 0.24);
border-radius: 999px;
color: #fffdf7;
background: rgba(11, 25, 22, 0.66);
box-shadow: 0 5px 18px rgba(0, 0, 0, 0.16);
font-size: 0.82rem;
font-weight: 650;
text-decoration: none;
}
.header-link:hover[b-v1ct4h70iz] {
color: #fff;
text-decoration: underline;
text-underline-offset: 0.3em;
}
.hero[b-v1ct4h70iz] {
position: relative;
isolation: isolate;
min-height: min(900px, 100svh);
display: flex;
align-items: center;
justify-content: center;
padding: 116px max(24px, calc((100vw - 1180px) / 2)) 88px;
overflow: hidden;
color: #fffdf7;
background: var(--night);
}
.hero-atlas[b-v1ct4h70iz],
.hero-atlas img[b-v1ct4h70iz],
.hero-shade[b-v1ct4h70iz] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.hero-atlas[b-v1ct4h70iz] {
z-index: -2;
display: block;
}
.hero-atlas img[b-v1ct4h70iz] {
display: block;
object-fit: cover;
object-position: center;
}
.hero-shade[b-v1ct4h70iz] {
z-index: -1;
background:
linear-gradient(90deg, rgba(12, 25, 22, 0.34) 0%, transparent 30%, transparent 70%, rgba(12, 25, 22, 0.24) 100%),
linear-gradient(0deg, rgba(12, 25, 22, 0.48), transparent 48%);
}
.hero-content[b-v1ct4h70iz] {
position: relative;
z-index: 1;
width: min(100%, 620px);
box-sizing: border-box;
padding: clamp(34px, 4vw, 54px);
border: 1px solid rgba(255, 252, 245, 0.18);
border-radius: 4px 48px 4px 4px;
text-align: center;
background: rgba(12, 25, 22, 0.82);
box-shadow: 0 28px 72px rgba(0, 0, 0, 0.3);
backdrop-filter: blur(8px);
}
.eyebrow[b-v1ct4h70iz],
.sample-label[b-v1ct4h70iz] {
margin: 0 0 18px;
color: var(--terracotta);
font-size: 0.73rem;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.hero .eyebrow[b-v1ct4h70iz],
.echoes-section .eyebrow[b-v1ct4h70iz],
.trust-section .eyebrow[b-v1ct4h70iz] {
color: var(--gold);
}
.hero h1[b-v1ct4h70iz],
.section-heading h2[b-v1ct4h70iz],
.echoes-intro h2[b-v1ct4h70iz],
.sample-card h2[b-v1ct4h70iz],
.street-copy h2[b-v1ct4h70iz],
.trust-inner h2[b-v1ct4h70iz],
.save-copy h2[b-v1ct4h70iz],
.final-cta h2[b-v1ct4h70iz] {
margin: 0;
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-weight: 450;
letter-spacing: -0.04em;
}
.hero h1[b-v1ct4h70iz] {
max-width: 10ch;
margin-inline: auto;
font-size: clamp(3.4rem, 5.4vw, 6rem);
line-height: 0.93;
}
.hero-body[b-v1ct4h70iz],
.hero-caption[b-v1ct4h70iz],
.section-heading > p[b-v1ct4h70iz],
.echoes-intro > p:not(.eyebrow)[b-v1ct4h70iz],
.street-copy > p:not(.eyebrow)[b-v1ct4h70iz],
.trust-inner > p:not(.eyebrow):not(.trust-quote)[b-v1ct4h70iz],
.save-copy > p:not(.eyebrow)[b-v1ct4h70iz],
.final-cta > p:not(.eyebrow)[b-v1ct4h70iz] {
font-size: clamp(1rem, 1.4vw, 1.17rem);
line-height: 1.65;
}
.hero-body[b-v1ct4h70iz] {
max-width: 52ch;
margin: 30px auto 0;
color: rgba(255, 252, 245, 0.92);
}
.hero-caption[b-v1ct4h70iz] {
margin: 17px auto 0;
color: var(--night-soft);
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-style: italic;
}
.hero-index[b-v1ct4h70iz] {
position: absolute;
right: max(24px, calc((100vw - 1180px) / 2));
bottom: 34px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
max-width: calc(100% - 48px);
gap: 12px;
color: rgba(255, 252, 245, 0.74);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.hero-index span[b-v1ct4h70iz] {
padding: 7px 10px;
border: 1px solid rgba(255, 252, 245, 0.18);
border-radius: 999px;
background: rgba(12, 25, 22, 0.4);
}
.button[b-v1ct4h70iz] {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-top: 30px;
padding: 0 27px;
border: 1px solid transparent;
border-radius: 999px;
font-size: 0.96rem;
font-weight: 750;
line-height: 1.2;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.button-primary[b-v1ct4h70iz] {
color: #2c241c;
background: var(--gold);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}
.button-primary:hover[b-v1ct4h70iz] {
color: #2c241c;
background: #efd08b;
transform: translateY(-2px);
}
.section-shell[b-v1ct4h70iz] {
padding-block: clamp(84px, 10vw, 146px);
}
.section-heading[b-v1ct4h70iz] {
max-width: 760px;
}
.section-heading h2[b-v1ct4h70iz],
.echoes-intro h2[b-v1ct4h70iz],
.sample-card h2[b-v1ct4h70iz],
.street-copy h2[b-v1ct4h70iz],
.trust-inner h2[b-v1ct4h70iz],
.save-copy h2[b-v1ct4h70iz],
.final-cta h2[b-v1ct4h70iz] {
font-size: clamp(2.55rem, 4.8vw, 5.1rem);
line-height: 1.01;
}
.section-heading > p[b-v1ct4h70iz],
.echoes-intro > p:not(.eyebrow)[b-v1ct4h70iz] {
margin: 22px 0 0;
color: var(--ink-soft);
}
.worlds-section[b-v1ct4h70iz] {
padding-top: clamp(76px, 9vw, 126px);
}
.worlds-loading[b-v1ct4h70iz],
.worlds-unavailable[b-v1ct4h70iz] {
max-width: 680px;
margin-top: 50px;
color: var(--ink-soft);
}
.worlds-loading[b-v1ct4h70iz] {
display: flex;
align-items: center;
gap: 13px;
}
.worlds-loading span[b-v1ct4h70iz] {
width: 22px;
height: 22px;
border: 2px solid rgba(173, 91, 63, 0.2);
border-top-color: var(--terracotta);
border-radius: 50%;
animation: lost-worlds-spin-b-v1ct4h70iz 800ms linear infinite;
}
.world-portals[b-v1ct4h70iz] {
display: grid;
gap: clamp(28px, 4vw, 52px);
margin-top: clamp(52px, 7vw, 88px);
}
.world-portal[b-v1ct4h70iz] {
min-width: 0;
}
.world-portal__link[b-v1ct4h70iz] {
position: relative;
min-height: clamp(440px, 54vw, 650px);
display: flex;
align-items: flex-end;
box-sizing: border-box;
overflow: hidden;
border-radius: 6px 72px 6px 6px;
color: #fffdf7;
background: var(--night);
box-shadow: 0 28px 70px rgba(54, 38, 24, 0.18);
text-decoration: none;
isolation: isolate;
}
.world-portal__media[b-v1ct4h70iz],
.world-portal__media img[b-v1ct4h70iz],
.world-portal__shade[b-v1ct4h70iz] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.world-portal__media[b-v1ct4h70iz] {
z-index: -2;
}
.world-portal__media img[b-v1ct4h70iz] {
object-fit: cover;
transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.world-portal__shade[b-v1ct4h70iz] {
z-index: -1;
background:
linear-gradient(0deg, rgba(12, 25, 22, 0.93) 0%, rgba(12, 25, 22, 0.64) 38%, rgba(12, 25, 22, 0.06) 72%),
linear-gradient(90deg, rgba(12, 25, 22, 0.35), transparent 60%);
}
.world-portal__link:hover .world-portal__media img[b-v1ct4h70iz] {
transform: scale(1.025);
}
.world-portal__copy[b-v1ct4h70iz] {
width: min(100%, 760px);
padding: clamp(30px, 6vw, 72px);
}
.world-portal__number[b-v1ct4h70iz],
.world-portal__name[b-v1ct4h70iz] {
margin: 0;
font-size: 0.72rem;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.world-portal__number[b-v1ct4h70iz] {
color: var(--gold);
}
.world-portal__name[b-v1ct4h70iz] {
margin-top: 12px;
color: rgba(255, 252, 245, 0.76);
}
.world-portal h3[b-v1ct4h70iz] {
max-width: 14ch;
margin: 10px 0 0;
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: clamp(2.35rem, 5.2vw, 5.45rem);
font-weight: 450;
letter-spacing: -0.04em;
line-height: 0.98;
}
.world-portal__copy > p:last-of-type[b-v1ct4h70iz] {
max-width: 56ch;
margin: 18px 0 0;
color: rgba(255, 252, 245, 0.78);
font-size: 1rem;
line-height: 1.6;
}
.world-portal__action[b-v1ct4h70iz],
.echo-card__action[b-v1ct4h70iz] {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 24px;
font-size: 0.91rem;
font-weight: 750;
}
.world-portal__action > span[b-v1ct4h70iz],
.echo-card__action > span[b-v1ct4h70iz] {
transition: transform 180ms ease;
}
.world-portal__link:hover .world-portal__action > span[b-v1ct4h70iz],
.echo-card:hover .echo-card__action > span[b-v1ct4h70iz] {
transform: translateX(4px);
}
.echoes-section[b-v1ct4h70iz] {
color: #fff9ee;
background:
radial-gradient(circle at 78% 15%, rgba(227, 185, 101, 0.12), transparent 32%),
var(--night);
}
.echoes-inner[b-v1ct4h70iz] {
padding-block: clamp(94px, 12vw, 172px);
}
.echoes-intro[b-v1ct4h70iz] {
max-width: 790px;
}
.echoes-intro > p:not(.eyebrow)[b-v1ct4h70iz] {
color: rgba(255, 249, 238, 0.7);
}
.echoes-grid[b-v1ct4h70iz] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 18px;
margin-top: clamp(50px, 7vw, 82px);
}
.echo-card[b-v1ct4h70iz] {
min-width: 0;
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(255, 249, 238, 0.16);
border-radius: 4px 38px 4px 4px;
color: #fff9ee;
background: rgba(255, 249, 238, 0.055);
text-decoration: none;
transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease;
}
.echo-card:nth-child(even)[b-v1ct4h70iz] {
transform: translateY(24px);
}
.echo-card:hover[b-v1ct4h70iz] {
border-color: rgba(227, 185, 101, 0.52);
background: rgba(255, 249, 238, 0.08);
transform: translateY(-4px);
}
.echo-card:nth-child(even):hover[b-v1ct4h70iz] {
transform: translateY(20px);
}
.echo-card__portrait[b-v1ct4h70iz] {
aspect-ratio: 4 / 3;
display: block;
overflow: hidden;
background: #2a312b;
}
.echo-card__portrait img[b-v1ct4h70iz] {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center 28%;
filter: saturate(0.82) sepia(0.06);
transition: transform 400ms ease;
}
.echo-card:hover .echo-card__portrait img[b-v1ct4h70iz] {
transform: scale(1.025);
}
.echo-card__copy[b-v1ct4h70iz] {
flex: 1;
padding: 26px;
}
.echo-card__relation[b-v1ct4h70iz] {
margin: 0;
color: var(--gold);
font-size: 0.68rem;
font-weight: 750;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.echo-card__relation span[b-v1ct4h70iz] {
margin-inline: 5px;
}
.echo-card h3[b-v1ct4h70iz] {
margin: 13px 0 0;
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: clamp(1.7rem, 2.7vw, 2.45rem);
font-weight: 470;
line-height: 1.02;
}
.echo-card__copy > p:not(.echo-card__relation)[b-v1ct4h70iz] {
margin: 15px 0 0;
color: rgba(255, 249, 238, 0.67);
font-size: 0.94rem;
line-height: 1.58;
}
.echo-card__action[b-v1ct4h70iz] {
color: #fff2d6;
}
.route-steps[b-v1ct4h70iz] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0 44px;
margin: 64px 0 0;
padding: 0;
list-style: none;
}
.route-steps li[b-v1ct4h70iz] {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 14px;
padding-top: 20px;
border-top: 1px solid rgba(41, 35, 31, 0.2);
}
.route-steps span[b-v1ct4h70iz] {
color: var(--terracotta);
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: 0.83rem;
}
.route-steps h3[b-v1ct4h70iz] {
margin: -4px 0 8px;
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: 1.3rem;
font-weight: 500;
}
.route-steps p[b-v1ct4h70iz] {
margin: 0;
color: var(--ink-soft);
font-size: 0.95rem;
line-height: 1.6;
}
.sample-section[b-v1ct4h70iz] {
padding: 0 max(24px, calc((100vw - 1180px) / 2)) clamp(90px, 11vw, 154px);
}
.sample-card[b-v1ct4h70iz] {
max-width: 800px;
box-sizing: border-box;
margin: 0 auto;
padding: clamp(34px, 6vw, 72px);
border: 1px solid rgba(122, 88, 57, 0.21);
border-radius: 28px;
color: #3d3229;
background: #fcf8ef;
box-shadow: 0 22px 60px rgba(67, 50, 34, 0.08);
}
.sample-card > p:not(.sample-label)[b-v1ct4h70iz] {
max-width: 58ch;
margin: 19px 0 0;
color: var(--ink-soft);
line-height: 1.65;
}
.sample-choices[b-v1ct4h70iz] {
margin-top: 30px;
padding: 22px;
border-left: 3px solid var(--gold);
background: rgba(226, 185, 109, 0.12);
}
.sample-choices p[b-v1ct4h70iz] {
margin: 0;
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: 1.13rem;
}
.sample-choices ul[b-v1ct4h70iz] {
display: flex;
flex-wrap: wrap;
gap: 9px;
margin: 16px 0 0;
padding: 0;
list-style: none;
}
.sample-choices li[b-v1ct4h70iz] {
padding: 9px 13px;
border: 1px solid rgba(184, 99, 69, 0.3);
border-radius: 999px;
color: #76503e;
font-size: 0.89rem;
line-height: 1.25;
}
.street-section[b-v1ct4h70iz],
.save-section[b-v1ct4h70iz] {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(280px, 0.78fr);
align-items: center;
gap: clamp(48px, 9vw, 136px);
}
.street-media[b-v1ct4h70iz],
.objects-media[b-v1ct4h70iz] {
min-width: 0;
margin: 0;
overflow: hidden;
border-radius: 4px 64px 4px 4px;
background: var(--paper-deep);
box-shadow: 0 25px 65px rgba(60, 42, 28, 0.14);
}
.street-media picture[b-v1ct4h70iz],
.street-media img[b-v1ct4h70iz],
.objects-media picture[b-v1ct4h70iz],
.objects-media img[b-v1ct4h70iz] {
display: block;
width: 100%;
}
.street-media img[b-v1ct4h70iz] {
aspect-ratio: 3 / 2;
}
.objects-media img[b-v1ct4h70iz] {
aspect-ratio: 4 / 3;
}
.street-media img[b-v1ct4h70iz],
.objects-media img[b-v1ct4h70iz] {
height: auto;
object-fit: cover;
}
.street-copy > p:not(.eyebrow)[b-v1ct4h70iz],
.save-copy > p:not(.eyebrow)[b-v1ct4h70iz] {
margin: 23px 0 0;
color: var(--ink-soft);
}
.trust-section[b-v1ct4h70iz] {
color: #faf4e8;
background: var(--night);
}
.trust-inner[b-v1ct4h70iz] {
max-width: 900px;
padding-block: clamp(92px, 12vw, 168px);
}
.trust-quote[b-v1ct4h70iz] {
max-width: 28ch;
margin: 30px 0 20px;
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: clamp(1.45rem, 2.6vw, 2.2rem);
line-height: 1.28;
}
.trust-inner > p:last-child[b-v1ct4h70iz] {
max-width: 63ch;
margin: 0;
color: rgba(250, 244, 232, 0.72);
}
.save-section[b-v1ct4h70iz] {
grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.05fr);
}
.save-points[b-v1ct4h70iz] {
display: grid;
gap: 13px;
margin: 28px 0 0;
padding: 0;
color: var(--ink-soft);
line-height: 1.55;
list-style: none;
}
.save-points li[b-v1ct4h70iz] {
position: relative;
padding-left: 22px;
}
.save-points li[b-v1ct4h70iz]::before {
content: "";
position: absolute;
top: 0.57em;
left: 0;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--terracotta);
}
.objects-media[b-v1ct4h70iz] {
border-radius: 64px 4px 4px 4px;
}
.final-cta[b-v1ct4h70iz] {
padding: clamp(96px, 13vw, 182px) 24px;
text-align: center;
background:
radial-gradient(circle at 50% 110%, rgba(226, 185, 109, 0.68), transparent 42%),
var(--paper-deep);
}
.final-cta .eyebrow[b-v1ct4h70iz],
.final-cta h2[b-v1ct4h70iz],
.final-cta > p:not(.eyebrow)[b-v1ct4h70iz] {
max-width: 780px;
margin-inline: auto;
}
.final-cta > p:not(.eyebrow)[b-v1ct4h70iz] {
margin-top: 22px;
color: var(--ink-soft);
}
.campaign-footer[b-v1ct4h70iz] {
min-height: 134px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.campaign-footer .brand-link img[b-v1ct4h70iz] {
filter: none;
}
.campaign-footer p[b-v1ct4h70iz] {
margin: 0;
color: var(--ink-soft);
font-family: var(--font-serif, Fraunces, Georgia, serif);
font-size: 0.94rem;
font-style: italic;
text-align: right;
}
.brand-link:focus-visible[b-v1ct4h70iz],
.header-link:focus-visible[b-v1ct4h70iz],
.button:focus-visible[b-v1ct4h70iz],
.world-portal__link:focus-visible[b-v1ct4h70iz],
.echo-card:focus-visible[b-v1ct4h70iz] {
outline: 3px solid #fff;
outline-offset: 4px;
}
.campaign-footer .brand-link:focus-visible[b-v1ct4h70iz],
.world-portal__link:focus-visible[b-v1ct4h70iz] {
outline-color: var(--terracotta);
}
@keyframes lost-worlds-spin-b-v1ct4h70iz {
to { transform: rotate(360deg); }
}
@media (max-width: 1100px) {
.echoes-grid[b-v1ct4h70iz] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 860px) {
.echoes-grid[b-v1ct4h70iz] {
grid-template-columns: 1fr;
gap: 14px;
}
.echo-card[b-v1ct4h70iz],
.echo-card:nth-child(even)[b-v1ct4h70iz] {
min-height: 210px;
display: grid;
grid-template-columns: 190px minmax(0, 1fr);
transform: none;
}
.echo-card:hover[b-v1ct4h70iz],
.echo-card:nth-child(even):hover[b-v1ct4h70iz] {
transform: translateY(-3px);
}
.echo-card__portrait[b-v1ct4h70iz] {
height: 100%;
aspect-ratio: auto;
}
}
@media (max-width: 760px) {
.campaign-header[b-v1ct4h70iz],
.campaign-footer[b-v1ct4h70iz],
.section-shell[b-v1ct4h70iz] {
width: min(calc(100% - 32px), 1180px);
}
.campaign-header[b-v1ct4h70iz] {
height: 64px;
}
.brand-link img[b-v1ct4h70iz] {
height: 34px;
}
.hero[b-v1ct4h70iz] {
box-sizing: border-box;
min-height: 100svh;
display: flex;
align-items: flex-end;
justify-content: center;
padding: calc(78px + env(safe-area-inset-top, 0px)) 22px calc(24px + env(safe-area-inset-bottom, 0px));
}
.hero-atlas[b-v1ct4h70iz] {
position: absolute;
height: 100%;
background: var(--gold);
}
.hero-atlas img[b-v1ct4h70iz] {
object-position: center;
}
.hero-atlas--carthage img[b-v1ct4h70iz] {
object-position: 56% center;
}
.hero-atlas--sumer img[b-v1ct4h70iz] {
object-position: 48% center;
}
.hero-atlas--alexandria img[b-v1ct4h70iz] {
object-position: 70% center;
}
.hero-shade[b-v1ct4h70iz] {
height: 100%;
background:
linear-gradient(180deg, rgba(7, 18, 16, 0.06) 0%, rgba(7, 18, 16, 0.08) 30%, rgba(7, 18, 16, 0.46) 55%, rgba(7, 18, 16, 0.92) 84%, rgba(7, 18, 16, 0.98) 100%),
linear-gradient(90deg, rgba(7, 18, 16, 0.2), transparent 36%, transparent 68%, rgba(7, 18, 16, 0.16));
}
.hero-content[b-v1ct4h70iz] {
width: 100%;
max-width: 480px;
margin: auto auto 0;
padding: 0;
border: 0;
border-radius: 0;
text-align: left;
background: transparent;
box-shadow: none;
backdrop-filter: none;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.28);
}
.hero .eyebrow[b-v1ct4h70iz] {
margin-bottom: 12px;
font-size: 0.68rem;
}
.hero h1[b-v1ct4h70iz] {
max-width: 11ch;
margin-inline: 0;
font-size: clamp(2.65rem, 11vw, 3.65rem);
line-height: 0.94;
}
.hero-body[b-v1ct4h70iz] {
margin-top: 16px;
font-size: 0.92rem;
line-height: 1.5;
}
.hero-caption[b-v1ct4h70iz] {
display: none;
}
.hero-index[b-v1ct4h70iz] {
display: none;
}
.button[b-v1ct4h70iz] {
width: 100%;
}
.hero .button[b-v1ct4h70iz] {
width: auto;
min-width: 0;
margin-top: 20px;
padding: 0;
color: var(--gold);
background: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
text-shadow: 0 2px 18px rgba(0, 0, 0, 0.4);
}
.hero .button[b-v1ct4h70iz]::after {
content: "\2192";
margin-left: 0.7em;
transition: transform 180ms ease;
}
.hero .button:hover[b-v1ct4h70iz]::after,
.hero .button:focus-visible[b-v1ct4h70iz]::after {
transform: translateX(4px);
}
.world-portal__link[b-v1ct4h70iz] {
min-height: 510px;
border-radius: 4px 36px 4px 4px;
}
.world-portal__copy[b-v1ct4h70iz] {
padding: 28px 24px 30px;
}
.world-portal h3[b-v1ct4h70iz] {
font-size: clamp(2.3rem, 10.5vw, 3.6rem);
}
.route-steps[b-v1ct4h70iz] {
grid-template-columns: 1fr;
gap: 28px;
margin-top: 42px;
}
.sample-section[b-v1ct4h70iz] {
padding-inline: 16px;
}
.street-section[b-v1ct4h70iz],
.save-section[b-v1ct4h70iz] {
grid-template-columns: 1fr;
gap: 40px;
}
.street-copy[b-v1ct4h70iz] {
order: -1;
}
.street-media[b-v1ct4h70iz],
.objects-media[b-v1ct4h70iz] {
border-radius: 4px 36px 4px 4px;
}
.objects-media[b-v1ct4h70iz] {
border-radius: 36px 4px 4px 4px;
}
.section-heading h2[b-v1ct4h70iz],
.echoes-intro h2[b-v1ct4h70iz],
.sample-card h2[b-v1ct4h70iz],
.street-copy h2[b-v1ct4h70iz],
.trust-inner h2[b-v1ct4h70iz],
.save-copy h2[b-v1ct4h70iz],
.final-cta h2[b-v1ct4h70iz] {
font-size: clamp(2.35rem, 10vw, 3.65rem);
}
.campaign-footer[b-v1ct4h70iz] {
min-height: 128px;
flex-direction: column;
justify-content: center;
gap: 12px;
}
.campaign-footer p[b-v1ct4h70iz] {
text-align: center;
}
}
@media (max-width: 540px) {
.echo-card[b-v1ct4h70iz],
.echo-card:nth-child(even)[b-v1ct4h70iz] {
min-height: 0;
grid-template-columns: 96px minmax(0, 1fr);
border-radius: 4px 24px 4px 4px;
}
.echo-card__copy[b-v1ct4h70iz] {
padding: 18px 16px;
}
.echo-card__relation[b-v1ct4h70iz] {
font-size: 0.59rem;
}
.echo-card h3[b-v1ct4h70iz] {
margin-top: 9px;
font-size: 1.5rem;
}
.echo-card__copy > p:not(.echo-card__relation)[b-v1ct4h70iz] {
margin-top: 10px;
font-size: 0.84rem;
line-height: 1.45;
}
.echo-card__action[b-v1ct4h70iz] {
margin-top: 14px;
font-size: 0.8rem;
}
}
@media (prefers-reduced-motion: reduce) {
.lost-worlds-page *[b-v1ct4h70iz],
.lost-worlds-page *[b-v1ct4h70iz]::before,
.lost-worlds-page *[b-v1ct4h70iz]::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* /Components/Pages/LovedOnesAll.razor.rz.scp.css */
/* ===========================================
LOVED ONES ALL PAGE - POLAROID GALLERY
=========================================== */
/* Sidebar Overlay */
.sidebar-overlay[b-rzeogfwrwt] {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: auto;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none;
}
.sidebar-overlay.hidden[b-rzeogfwrwt] {
display: none;
}
/* App Layout */
[b-rzeogfwrwt] .app-layout,
.app-layout[b-rzeogfwrwt] {
display: flex;
flex-direction: column;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px;
overflow-x: clip;
overflow-y: visible;
max-width: 100%;
overscroll-behavior-x: none;
overscroll-behavior-y: auto;
touch-action: pan-y pinch-zoom;
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-rzeogfwrwt] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-rzeogfwrwt] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-rzeogfwrwt] .sidebar.hidden {
transform: translateX(-100%);
}
[b-rzeogfwrwt] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-rzeogfwrwt] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-rzeogfwrwt] .sidebar a:hover {
color: #000;
}
[b-rzeogfwrwt] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar Logo Styles */
[b-rzeogfwrwt] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-rzeogfwrwt] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-rzeogfwrwt] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
transition: none !important;
}
/* Toggle Sidebar Button */
[b-rzeogfwrwt] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* ===========================================
MAIN CONTENT AREA
=========================================== */
[b-rzeogfwrwt] .messages-container {
flex: 1;
margin-left: 280px;
width: min(100%, calc(100vw - 280px));
max-width: min(1400px, calc(100vw - 280px));
padding: 0;
transition: margin-left 0.3s ease;
box-sizing: border-box;
background: var(--lov-paper);
}
[b-rzeogfwrwt] .messages-container.sidebar-hidden {
margin-left: 0;
width: 100%;
max-width: min(1400px, 100vw);
}
/* Page Header */
[b-rzeogfwrwt] .vault-header {
text-align: center;
padding: 3rem 2rem 2rem;
max-width: 800px;
margin: 0 auto;
}
[b-rzeogfwrwt] .vault-header h1 {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: var(--mobile-hero-heading-weight);
color: #2C2A28;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
[b-rzeogfwrwt] .vault-subtitle {
/* inherited font-sans */
font-size: 1.1rem;
line-height: 1.6;
color: #6B5B57;
margin: 0;
max-width: 600px;
margin: 0 auto;
}
/* Main Content Area */
[b-rzeogfwrwt] .main-content-area {
padding: 1.5rem 3rem 3rem 3rem;
position: relative;
}
/* ===========================================
AUTHENTICATED MEMORY WALL
=========================================== */
[b-rzeogfwrwt] .lovedones-wall-hero {
width: min(100%, 1240px);
min-height: clamp(560px, 48vw, 680px);
margin: 0 auto clamp(3rem, 5vw, 5rem);
display: grid;
grid-template-columns: minmax(340px, 0.88fr) minmax(480px, 1.12fr);
align-items: center;
gap: clamp(2.5rem, 5vw, 5.5rem);
padding: clamp(2.5rem, 5vw, 5rem) clamp(1rem, 3vw, 2rem);
position: relative;
isolation: isolate;
}
[b-rzeogfwrwt] .lovedones-wall-hero::before {
content: "";
position: absolute;
inset: 4% 0 auto 0;
height: 92%;
border-radius: 24px;
background:
linear-gradient(90deg, rgba(255, 219, 206, 0.42) 0%, rgba(255, 247, 237, 0.26) 42%, rgba(255, 247, 237, 0) 80%),
repeating-linear-gradient(0deg, rgba(103, 76, 58, 0.025) 0, rgba(103, 76, 58, 0.025) 1px, transparent 1px, transparent 5px);
border: 1px solid rgba(177, 132, 92, 0.13);
box-shadow: 0 28px 70px rgba(97, 66, 42, 0.08);
z-index: -1;
}
[b-rzeogfwrwt] .lovedones-wall-copy {
max-width: 560px;
position: relative;
z-index: 3;
}
[b-rzeogfwrwt] .wall-eyebrow,
[b-rzeogfwrwt] .section-kicker {
margin: 0 0 1rem;
font-family: var(--font-serif);
font-size: 1.05rem;
font-style: italic;
color: rgba(75, 58, 51, 0.72);
}
[b-rzeogfwrwt] .lovedones-wall-copy h1 {
margin: 0 0 1rem;
font-family: var(--font-serif);
font-size: clamp(3.8rem, 6.4vw, 6.4rem);
line-height: 0.98;
font-weight: var(--mobile-hero-heading-weight);
letter-spacing: 0;
color: #2C2A28;
}
[b-rzeogfwrwt] .wall-subtitle {
max-width: 500px;
margin: 0 0 1.2rem;
font-size: clamp(1.05rem, 1.35vw, 1.25rem);
line-height: 1.65;
color: #6B5B57;
}
[b-rzeogfwrwt] .wall-status {
display: inline-flex;
align-items: center;
min-height: 32px;
margin: 0 0 1.8rem;
padding: 0.35rem 0.85rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.48);
border: 1px solid rgba(168, 124, 83, 0.16);
color: #7B615A;
font-size: 0.92rem;
font-weight: 600;
}
[b-rzeogfwrwt] .wall-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.85rem;
}
[b-rzeogfwrwt] .wall-secondary-action,
[b-rzeogfwrwt] .section-add-button {
min-height: 48px;
border-radius: 999px;
padding: 0.75rem 1.45rem;
font-size: 0.98rem;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
[b-rzeogfwrwt] .wall-photo-action {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
padding: 0.82rem 1.35rem;
border: 1px solid #4A342E;
border-radius: 999px;
background: #4A342E;
color: #FFF9F3;
font: 700 0.96rem/1 var(--font-sans);
cursor: pointer;
box-shadow: 0 12px 26px rgba(67, 42, 34, 0.16);
transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
[b-rzeogfwrwt] .wall-photo-action:hover {
transform: translateY(-2px);
background: #34241F;
box-shadow: 0 16px 32px rgba(67, 42, 34, 0.2);
}
[b-rzeogfwrwt] .wall-photo-action:focus-visible {
outline: 3px solid rgba(191, 111, 86, 0.38);
outline-offset: 4px;
}
[b-rzeogfwrwt] .wall-photo-hint {
max-width: 450px;
margin: 0.8rem 0 0;
color: rgba(107, 83, 73, 0.78);
font-size: 0.86rem;
line-height: 1.5;
}
[b-rzeogfwrwt] .wall-secondary-action,
[b-rzeogfwrwt] .section-add-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
border: 1px solid rgba(120, 88, 60, 0.18);
background: rgba(255, 255, 255, 0.62);
color: #5B463D;
}
[b-rzeogfwrwt] .wall-secondary-action:hover,
[b-rzeogfwrwt] .section-add-button:hover {
transform: translateY(-2px);
background: rgba(255, 249, 241, 0.9);
box-shadow: 0 12px 26px rgba(80, 52, 28, 0.12);
}
[b-rzeogfwrwt] .lovedones-portrait-wall {
position: relative;
min-height: clamp(430px, 42vw, 620px);
width: 100%;
isolation: isolate;
}
[b-rzeogfwrwt] .lovedones-portrait-glow {
position: absolute;
width: 76%;
aspect-ratio: 1;
right: 4%;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
background: rgba(255, 211, 175, 0.38);
filter: blur(44px);
z-index: 0;
}
[b-rzeogfwrwt] .wall-portrait {
position: absolute;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: 10px;
background: #F8E9D2;
border: 1px solid rgba(120, 88, 60, 0.08);
box-shadow: 0 18px 44px rgba(79, 58, 47, 0.16);
}
[b-rzeogfwrwt] .wall-portrait-entry {
appearance: none;
cursor: pointer;
text-align: left;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, filter 0.22s ease;
}
[b-rzeogfwrwt] .wall-portrait img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
filter: sepia(0.11) saturate(0.94) contrast(1.03) brightness(1.02);
}
[b-rzeogfwrwt] .wall-portrait-main {
width: min(74%, 560px);
aspect-ratio: 1;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 5;
border-radius: 14px;
}
[b-rzeogfwrwt] .wall-portrait-main.wall-portrait-entry:hover {
transform: translateY(-50%) scale(1.015);
border-color: rgba(196, 136, 106, 0.32);
box-shadow: 0 24px 52px rgba(79, 58, 47, 0.2);
}
[b-rzeogfwrwt] .wall-portrait-main.wall-portrait-entry:focus-visible,
[b-rzeogfwrwt] .wall-portrait-placeholder.wall-portrait-entry:focus-visible {
outline: 3px solid rgba(196, 136, 106, 0.36);
outline-offset: 6px;
}
[b-rzeogfwrwt] .wall-portrait-caption {
position: absolute;
left: 7%;
bottom: 6%;
max-width: 84%;
padding: 0.55rem 1rem;
border-radius: 999px;
background: rgba(255, 250, 242, 0.88);
color: #5A463F;
font-size: 0.95rem;
font-weight: 700;
box-shadow: 0 8px 18px rgba(80, 52, 28, 0.12);
}
[b-rzeogfwrwt] .wall-portrait-support {
z-index: 1;
opacity: 0.68;
}
[b-rzeogfwrwt] .wall-portrait-one {
width: 30%;
aspect-ratio: 1;
left: 4%;
top: 6%;
transform: rotate(-4deg);
}
[b-rzeogfwrwt] .wall-portrait-two {
width: 28%;
aspect-ratio: 1;
right: 8%;
top: 0;
transform: rotate(3deg);
}
[b-rzeogfwrwt] .wall-portrait-three {
width: 34%;
aspect-ratio: 1;
left: 8%;
bottom: 4%;
transform: rotate(2.5deg);
opacity: 0.76;
z-index: 2;
}
[b-rzeogfwrwt] .wall-portrait-four {
width: 24%;
aspect-ratio: 1;
right: 1%;
bottom: 1%;
transform: rotate(-3deg);
opacity: 0.55;
}
[b-rzeogfwrwt] .wall-portrait-placeholder {
position: absolute;
right: 8%;
top: 50%;
transform: translateY(-50%);
width: min(58%, 420px);
aspect-ratio: 1;
border-radius: 18px;
background: rgba(255, 255, 255, 0.48);
border: 1px dashed rgba(196, 136, 106, 0.36);
display: flex;
align-items: center;
justify-content: center;
color: #C4886A;
font-size: 4rem;
}
[b-rzeogfwrwt] .wall-portrait-placeholder.wall-portrait-entry {
appearance: none;
cursor: pointer;
padding: 0;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}
[b-rzeogfwrwt] .wall-portrait-placeholder.wall-portrait-entry:hover {
transform: translateY(-50%) scale(1.015);
border-color: rgba(196, 136, 106, 0.55);
background: rgba(255, 255, 255, 0.62);
box-shadow: 0 18px 36px rgba(79, 58, 47, 0.14);
}
[b-rzeogfwrwt] .lovedones-section {
width: min(100%, 1180px);
margin: 0 auto clamp(3rem, 5vw, 5rem);
}
[b-rzeogfwrwt] .lovedones-section-header {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 1rem;
padding: 0 clamp(0.5rem, 2vw, 1rem);
margin-bottom: 1.5rem;
}
[b-rzeogfwrwt] .lovedones-section-header h2,
[b-rzeogfwrwt] .lovedones-add-callout h2 {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2rem, 3.2vw, 3rem);
line-height: 1.08;
color: #372A25;
font-weight: 600;
}
[b-rzeogfwrwt] .section-kicker {
margin-bottom: 0.35rem;
font-size: 0.95rem;
}
[b-rzeogfwrwt] .section-add-button {
min-height: 42px;
padding: 0.6rem 1.1rem;
font-size: 0.9rem;
}
[b-rzeogfwrwt] .lovedones-gallery-grid,
[b-rzeogfwrwt] .lovedones-draft-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
justify-content: center;
align-items: start;
gap: clamp(1.4rem, 2.4vw, 2rem);
padding: 0;
max-width: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card,
[b-rzeogfwrwt] .lovedones-draft-grid > .profile-card {
margin: 0 !important;
}
[b-rzeogfwrwt] .draft-profile-card {
opacity: 0.9;
}
[b-rzeogfwrwt] .lovedone-saved-note {
width: min(100%, 760px);
margin: 0 0 1.5rem clamp(0.5rem, 2vw, 1rem);
padding: 1rem 1.1rem;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: start;
gap: 0.85rem;
border: 1px solid rgba(178, 120, 76, 0.24);
border-left: 4px solid rgba(172, 102, 50, 0.56);
border-radius: 14px;
background:
linear-gradient(135deg, rgba(255, 250, 242, 0.96) 0%, rgba(255, 241, 232, 0.92) 100%);
box-shadow: 0 16px 36px rgba(97, 66, 42, 0.09);
color: #5B463D;
}
[b-rzeogfwrwt] .lovedone-saved-note-icon {
width: 2rem;
height: 2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(218, 143, 85, 0.13);
color: #A85F36;
}
[b-rzeogfwrwt] .lovedone-saved-note-icon .card-action-icon {
width: 1.15rem;
height: 1.15rem;
stroke-width: 1.8;
}
[b-rzeogfwrwt] .lovedone-saved-note-copy {
min-width: 0;
}
[b-rzeogfwrwt] .lovedone-saved-note-title {
margin: 0 0 0.18rem;
font-weight: 800;
color: #4B3329;
}
[b-rzeogfwrwt] .lovedone-saved-note p {
margin: 0;
line-height: 1.5;
color: #755C52;
}
[b-rzeogfwrwt] .lovedone-saved-note-dismiss {
width: 2rem;
height: 2rem;
border: 0;
border-radius: 50%;
background: transparent;
color: rgba(91, 70, 61, 0.72);
cursor: pointer;
font-size: 1.3rem;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 0.18s ease, color 0.18s ease;
}
[b-rzeogfwrwt] .lovedone-saved-note-dismiss:hover,
[b-rzeogfwrwt] .lovedone-saved-note-dismiss:focus-visible {
background: rgba(168, 95, 54, 0.1);
color: #4B3329;
outline: none;
}
[b-rzeogfwrwt] .recently-saved-profile-card {
animation: lovedOneSavedArrival-b-rzeogfwrwt 1.6s ease-out 0.15s both;
box-shadow:
0 0 0 3px rgba(218, 143, 85, 0.22),
0 18px 42px rgba(172, 102, 50, 0.2);
}
@keyframes lovedOneSavedArrival-b-rzeogfwrwt {
0% {
transform: rotate(var(--rotation)) translateY(8px);
box-shadow:
0 0 0 0 rgba(218, 143, 85, 0),
0 8px 24px rgba(75, 46, 46, 0.12);
}
35% {
transform: rotate(0deg) translateY(-6px);
box-shadow:
0 0 0 7px rgba(218, 143, 85, 0.2),
0 20px 44px rgba(172, 102, 50, 0.22);
}
100% {
transform: rotate(var(--rotation));
box-shadow:
0 0 0 3px rgba(218, 143, 85, 0.22),
0 18px 42px rgba(172, 102, 50, 0.2);
}
}
@media (prefers-reduced-motion: reduce) {
[b-rzeogfwrwt] .recently-saved-profile-card {
animation: none;
}
}
[b-rzeogfwrwt] .draft-profile-card .card-header-bg {
background: linear-gradient(180deg, #FFF1E8 0%, #FFF8F4 100%);
}
[b-rzeogfwrwt] .draft-profile-card .card-name {
min-height: 3.35rem;
margin-bottom: 0.85rem;
display: flex;
align-items: center;
justify-content: center;
}
[b-rzeogfwrwt] .draft-profile-card .card-description {
min-height: 4.05rem;
max-height: 4.05rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
[b-rzeogfwrwt] .draft-profile-card .portrait-nudge-button {
min-height: 5rem;
}
[b-rzeogfwrwt] .lovedones-add-callout {
width: min(100%, 960px);
margin: 0 auto 3rem;
padding: 1.5rem clamp(1rem, 3vw, 2rem);
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
border-top: 1px solid rgba(120, 88, 60, 0.14);
border-bottom: 1px solid rgba(120, 88, 60, 0.1);
}
[b-rzeogfwrwt] .lovedones-add-callout p {
margin: 0.4rem 0 0;
color: #7B615A;
font-size: 1rem;
}
/* ===========================================
LOADING STATE
=========================================== */
[b-rzeogfwrwt] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
padding: 3rem;
}
[b-rzeogfwrwt] .vault-loader {
text-align: center;
padding: 2rem;
}
[b-rzeogfwrwt] .vault-loader-image {
width: 120px;
height: auto;
margin-bottom: 1.5rem;
animation: candleGlow-b-rzeogfwrwt 2s ease-in-out infinite alternate;
}
@keyframes candleGlow-b-rzeogfwrwt {
0% {
opacity: 0.8;
filter: brightness(1);
}
100% {
opacity: 1;
filter: brightness(1.15);
}
}
[b-rzeogfwrwt] .vault-loader-title {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 400;
color: #5A413A;
margin-bottom: 0.5rem;
}
[b-rzeogfwrwt] .vault-loader-subtitle {
/* inherited font-sans */
font-size: 0.95rem;
color: #8B7355;
opacity: 0.8;
}
/* ===========================================
POLAROID GRID - Scattered Collage Layout
=========================================== */
[b-rzeogfwrwt] .polaroid-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: flex-start;
gap: 2rem;
padding: 2rem;
width: 100%;
max-width: 1200px;
margin: 0 auto;
position: relative;
}
[b-rzeogfwrwt] .polaroid-grid.lovedones-draft-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 300px));
justify-content: center;
align-items: start;
gap: clamp(1.4rem, 2.4vw, 2rem);
padding: 0;
max-width: none;
}
/* Memorial Indicator */
[b-rzeogfwrwt] .card-memorial-indicator {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0.35rem 0 0.8rem;
}
[b-rzeogfwrwt] .memorial-badge {
font-family: var(--font-sans);
font-size: 0.78rem;
color: #8B7355;
letter-spacing: 0.03em;
}
[b-rzeogfwrwt] .memorial-review-note {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
color: #9A6B45;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 650;
line-height: 1.35;
}
[b-rzeogfwrwt] .memorial-review-dot {
width: 6px;
height: 6px;
flex: 0 0 6px;
border-radius: 50%;
background: #C88D55;
box-shadow: 0 0 0 3px rgba(200, 141, 85, 0.14);
}
/* Draft Badge */
[b-rzeogfwrwt] .card-draft-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 3px 12px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(196, 154, 108, 0.15) 0%, rgba(166, 123, 80, 0.15) 100%);
border: 1px solid rgba(196, 154, 108, 0.35);
color: #A67B50;
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
margin-bottom: 0.4rem;
}
[b-rzeogfwrwt] .card-readiness-panel {
width: 100%;
margin: 0 0 0.35rem;
padding: 0.58rem 0.75rem 0.62rem;
height: 4.7rem;
border-radius: 12px;
background: #FFF8F3;
border: 1px solid rgba(196, 136, 106, 0.22);
display: flex;
flex-direction: column;
text-align: left;
overflow: hidden;
appearance: none;
font: inherit;
cursor: pointer;
transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
[b-rzeogfwrwt] .card-readiness-panel:hover {
background: #FFF3EA;
border-color: rgba(196, 136, 106, 0.36);
box-shadow: 0 8px 20px rgba(128, 82, 54, 0.08);
}
[b-rzeogfwrwt] .card-readiness-panel:active {
transform: translateY(1px);
}
[b-rzeogfwrwt] .card-readiness-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.55rem;
color: #7A563F;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 800;
line-height: 1.25;
margin-bottom: 0.2rem;
}
[b-rzeogfwrwt] .card-readiness-heading-copy {
min-width: 0;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
[b-rzeogfwrwt] .card-readiness-icon {
color: #A67B50;
}
[b-rzeogfwrwt] .card-readiness-edit-indicator {
flex: 0 0 auto;
color: #A67B50;
opacity: 0.68;
transition: color 0.18s ease, opacity 0.18s ease, transform 0.18s ease;
}
[b-rzeogfwrwt] .card-readiness-edit-icon {
width: 0.88rem;
height: 0.88rem;
flex-basis: 0.88rem;
stroke-width: 1.9;
}
[b-rzeogfwrwt] .card-readiness-panel:hover .card-readiness-edit-indicator {
color: #7A563F;
opacity: 1;
transform: translateX(1px);
}
[b-rzeogfwrwt] .visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
[b-rzeogfwrwt] .card-readiness-summary {
margin: 0;
color: #6A504B;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 700;
line-height: 1.32;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
[b-rzeogfwrwt] .mark-ready-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
margin: 0.1rem 0 0.75rem;
padding: 0.25rem 0;
border: none;
background: transparent;
color: #9A6B45;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 800;
line-height: 1.25;
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
}
[b-rzeogfwrwt] .mark-ready-button:hover {
color: #6A4631;
}
[b-rzeogfwrwt] .mark-ready-button:disabled {
color: #B99C86;
cursor: not-allowed;
text-decoration: none;
}
[b-rzeogfwrwt] .mark-ready-error {
width: min(100%, 680px);
margin: 0.25rem auto 0;
padding: 0.7rem 0.9rem;
border-radius: 12px;
background: #FFF2EA;
border: 1px solid rgba(154, 95, 69, 0.24);
color: #7A3F32;
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 700;
line-height: 1.4;
text-align: center;
}
/* Chat Link (secondary action below memorial button) */
[b-rzeogfwrwt] .chat-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
color: #A67B50;
font-size: 0.8rem;
font-family: var(--font-sans);
text-decoration: none;
padding: 4px 0;
transition: color 0.2s ease;
cursor: pointer;
}
[b-rzeogfwrwt] .chat-link:hover {
color: #C49A6C;
text-decoration: underline;
}
body.night-mode[b-rzeogfwrwt] .chat-link {
color: #C49A6C;
}
body.night-mode[b-rzeogfwrwt] .chat-link:hover {
color: #D4AA7C;
}
body.night-mode[b-rzeogfwrwt] .card-readiness-panel {
background: rgba(255, 248, 243, 0.07);
border-color: rgba(212, 170, 124, 0.22);
}
body.night-mode[b-rzeogfwrwt] .card-readiness-panel:hover {
background: rgba(255, 248, 243, 0.11);
border-color: rgba(212, 170, 124, 0.36);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}
body.night-mode[b-rzeogfwrwt] .card-readiness-heading,
body.night-mode[b-rzeogfwrwt] .card-readiness-icon,
body.night-mode[b-rzeogfwrwt] .card-readiness-edit-indicator,
body.night-mode[b-rzeogfwrwt] .mark-ready-button {
color: #D4AA7C;
}
body.night-mode[b-rzeogfwrwt] .card-readiness-panel:hover .card-readiness-edit-indicator {
color: #F0CDA8;
}
body.night-mode[b-rzeogfwrwt] .card-readiness-summary {
color: #E3C4AA;
}
body.night-mode[b-rzeogfwrwt] .mark-ready-button:hover {
color: #F0CDA8;
}
body.night-mode[b-rzeogfwrwt] .mark-ready-button:disabled {
color: #A3846C;
}
body.night-mode[b-rzeogfwrwt] .mark-ready-error {
background: rgba(154, 95, 69, 0.16);
border-color: rgba(224, 164, 127, 0.28);
color: #F0CDA8;
}
body.night-mode[b-rzeogfwrwt] .btn-memorial-secondary {
background: rgba(255, 248, 243, 0.08);
color: #D4AA7C;
border-color: rgba(212, 170, 124, 0.42);
box-shadow: none;
}
body.night-mode[b-rzeogfwrwt] .btn-memorial-secondary:hover {
background: rgba(255, 248, 243, 0.13);
color: #F0CDA8;
border-color: rgba(212, 170, 124, 0.65);
}
/* Scattered positions for desktop */
@media (min-width: 769px) {
[b-rzeogfwrwt] .polaroid-grid {
gap: 2.5rem;
padding: 3rem 2rem;
}
[b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(1) {
margin-top: 0;
margin-left: 0;
}
[b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(2) {
margin-top: -30px;
margin-left: 20px;
}
[b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(3) {
margin-top: 40px;
margin-left: -15px;
}
[b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(4) {
margin-top: -20px;
margin-left: 30px;
}
[b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(5) {
margin-top: 50px;
margin-left: -10px;
}
[b-rzeogfwrwt] .polaroid-grid > .profile-card:nth-child(6) {
margin-top: -40px;
margin-left: 15px;
}
}
/* ===========================================
PROFILE CARDS - Warm Profile Design
=========================================== */
[b-rzeogfwrwt] .profile-card {
--rotation: 0deg;
width: 280px;
background: #ffffff;
border-radius: 20px;
box-shadow: 0 8px 24px rgba(75, 46, 46, 0.12);
transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
transform-origin: center center;
transform: rotate(var(--rotation));
overflow: hidden;
}
[b-rzeogfwrwt] .profile-card:hover {
transform: rotate(0deg) translateY(-8px) scale(1.05);
z-index: 50;
box-shadow: 0 20px 40px rgba(75, 46, 46, 0.18);
}
/* Edit button in top-right corner */
[b-rzeogfwrwt] .btn-edit-corner {
position: absolute;
top: 12px;
right: 12px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
color: #8B7355;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.2s ease;
z-index: 10;
box-shadow: 0 2px 8px rgba(75, 46, 46, 0.15);
}
/* Always visible on mobile (no hover) */
@media (max-width: 768px) {
[b-rzeogfwrwt] .btn-edit-corner {
opacity: 1;
}
}
[b-rzeogfwrwt] .profile-card:hover .btn-edit-corner {
opacity: 1;
}
[b-rzeogfwrwt] .btn-edit-corner:hover {
background: #ffffff;
color: #4B2E2E;
transform: scale(1.1);
}
/* Card Header - Warm curved background */
[b-rzeogfwrwt] .card-header-bg {
background: linear-gradient(180deg, #FFE8DC 0%, #FFF5F0 100%);
height: 140px;
position: relative;
border-radius: 20px 20px 0 0;
display: flex;
align-items: flex-end;
justify-content: center;
}
[b-rzeogfwrwt] .card-entry-button {
appearance: none;
width: 100%;
padding: 0;
border: none;
cursor: pointer;
font: inherit;
transition: background 0.2s ease, box-shadow 0.2s ease;
}
[b-rzeogfwrwt] .card-entry-button:hover {
background: linear-gradient(180deg, #FFE2D4 0%, #FFF2EA 100%);
}
[b-rzeogfwrwt] .draft-card-entry-button:hover {
background: linear-gradient(180deg, #FFEFE8 0%, #FFF7F2 100%);
}
[b-rzeogfwrwt] .card-entry-button:hover .card-avatar,
[b-rzeogfwrwt] .card-entry-button:focus-visible .card-avatar {
box-shadow: 0 8px 18px rgba(75, 46, 46, 0.16);
}
/* Avatar - Overlapping header/body boundary */
[b-rzeogfwrwt] .card-avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 4px solid #ffffff;
overflow: hidden;
position: absolute;
bottom: -50px;
left: 50%;
transform: translateX(-50%);
background: #FFF5F0;
box-shadow: 0 4px 12px rgba(75, 46, 46, 0.1);
}
[b-rzeogfwrwt] .card-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
[b-rzeogfwrwt] .avatar-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: #D4A88A;
background: linear-gradient(180deg, #FFE8DC 0%, #FFF5F0 100%);
}
/* Card Body */
[b-rzeogfwrwt] .card-body {
padding: 60px 1.5rem 1.5rem 1.5rem;
text-align: center;
background: #ffffff;
}
[b-rzeogfwrwt] .card-relationship {
/* inherited font-sans */
font-size: 0.9rem;
color: #C4886A;
margin-bottom: 0.25rem;
text-transform: capitalize;
font-weight: 500;
}
[b-rzeogfwrwt] .card-name {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 600;
color: #4B2E2E;
margin-bottom: 1.25rem;
line-height: 1.3;
}
[b-rzeogfwrwt] .card-name-button {
appearance: none;
display: inline-block;
max-width: 100%;
padding: 0;
border: none;
background: transparent;
text-align: center;
cursor: pointer;
transition: color 0.2s ease;
}
[b-rzeogfwrwt] .card-name-button:hover {
color: #8A6045;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
[b-rzeogfwrwt] .draft-card-name-button:hover {
color: #9A6B4F;
}
[b-rzeogfwrwt] .card-description {
/* inherited font-sans */
font-size: 0.9rem;
color: #6A504B;
margin-bottom: 1.25rem;
line-height: 1.5;
}
[b-rzeogfwrwt] .portrait-nudge-button {
width: 100%;
display: flex;
align-items: center;
gap: 0.65rem;
margin: 0 0 1.15rem;
padding: 0.72rem 0.78rem;
border: 1px dashed rgba(196, 136, 106, 0.45);
border-radius: 14px;
background: linear-gradient(180deg, #FFF8F3 0%, #FFF2EA 100%);
color: #5A3E2B;
text-align: left;
cursor: pointer;
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
[b-rzeogfwrwt] .portrait-nudge-button:hover,
[b-rzeogfwrwt] .portrait-nudge-button:focus-visible {
transform: translateY(-1px);
border-color: rgba(196, 136, 106, 0.72);
background: #FFF8F3;
box-shadow: 0 8px 18px rgba(196, 136, 106, 0.16);
outline: none;
}
[b-rzeogfwrwt] .portrait-nudge-icon {
flex: 0 0 2rem;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 218, 207, 0.72);
color: #A05D3C;
font-size: 0.82rem;
}
[b-rzeogfwrwt] .portrait-nudge-copy {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.08rem;
}
[b-rzeogfwrwt] .portrait-nudge-title {
font-size: 0.82rem;
font-weight: 700;
color: #4B2E2E;
line-height: 1.25;
}
[b-rzeogfwrwt] .portrait-nudge-text {
font-size: 0.76rem;
font-weight: 500;
color: #8B7355;
line-height: 1.3;
}
/* Card Actions - Memorial button primary, chat link below */
[b-rzeogfwrwt] .card-actions {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
gap: 0.5rem;
}
.shared-perspective-button[b-rzeogfwrwt] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin-top: 0.8rem;
padding: 0.65rem 0.9rem;
border: 1px solid rgba(123, 82, 67, 0.22);
border-radius: 999px;
background: rgba(255, 250, 246, 0.88);
color: #6b4337;
font: inherit;
font-weight: 700;
cursor: pointer;
pointer-events: auto;
}
.shared-perspective-button:hover[b-rzeogfwrwt] {
background: #fff;
transform: translateY(-1px);
}
.perspective-modal-backdrop[b-rzeogfwrwt] {
position: fixed;
inset: 0;
z-index: 2200;
display: grid;
place-items: center;
padding: 1rem;
background: rgba(61, 43, 38, 0.52);
backdrop-filter: blur(7px);
}
.perspective-modal[b-rzeogfwrwt] {
position: relative;
width: min(680px, 100%);
max-height: min(90vh, 860px);
overflow-y: auto;
padding: clamp(1.5rem, 4vw, 2.6rem);
border: 1px solid rgba(139, 91, 72, 0.2);
border-radius: 28px;
background: linear-gradient(145deg, #fffaf5 0%, #fff 100%);
box-shadow: 0 28px 80px rgba(66, 40, 31, 0.26);
color: #422f2a;
}
.perspective-modal-close[b-rzeogfwrwt] {
position: absolute;
top: 1rem;
right: 1rem;
width: 2.6rem;
height: 2.6rem;
border: 1px solid rgba(123, 82, 67, 0.18);
border-radius: 50%;
background: #fff;
color: #65463e;
font-size: 1.6rem;
cursor: pointer;
}
.perspective-modal-eyebrow[b-rzeogfwrwt] {
margin: 0 3rem 0.6rem 0;
color: #a1604d;
font-size: 0.78rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.perspective-modal h2[b-rzeogfwrwt] {
margin: 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2rem, 5vw, 3.1rem);
line-height: 1.05;
}
.perspective-modal-intro[b-rzeogfwrwt] {
margin: 1rem 0 1.2rem;
color: #755e56;
line-height: 1.6;
}
.perspective-private-note[b-rzeogfwrwt] {
display: flex;
gap: 0.65rem;
align-items: flex-start;
margin-bottom: 1.4rem;
padding: 0.9rem 1rem;
border-radius: 14px;
background: #f8eae3;
color: #674a40;
line-height: 1.45;
}
.perspective-form-grid[b-rzeogfwrwt] {
display: grid;
gap: 1rem;
}
.perspective-form-grid label[b-rzeogfwrwt] {
display: grid;
gap: 0.45rem;
font-weight: 700;
}
.perspective-form-grid input[b-rzeogfwrwt],
.perspective-form-grid textarea[b-rzeogfwrwt] {
width: 100%;
box-sizing: border-box;
padding: 0.85rem 0.95rem;
border: 1px solid rgba(123, 82, 67, 0.25);
border-radius: 14px;
background: rgba(255, 255, 255, 0.9);
color: #402f2a;
font: inherit;
font-weight: 400;
line-height: 1.45;
resize: vertical;
}
.perspective-form-grid input:focus[b-rzeogfwrwt],
.perspective-form-grid textarea:focus[b-rzeogfwrwt] {
outline: 3px solid rgba(223, 150, 122, 0.2);
border-color: #bc806a;
}
.perspective-modal-actions[b-rzeogfwrwt] {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 1.4rem;
}
.perspective-cancel-button[b-rzeogfwrwt],
.perspective-save-button[b-rzeogfwrwt] {
min-height: 46px;
padding: 0.75rem 1.2rem;
border-radius: 999px;
font: inherit;
font-weight: 800;
cursor: pointer;
}
.perspective-cancel-button[b-rzeogfwrwt] {
border: 1px solid rgba(123, 82, 67, 0.24);
background: transparent;
color: #674a40;
}
.perspective-save-button[b-rzeogfwrwt] {
border: 1px solid #714c42;
background: #714c42;
color: #fff;
}
.perspective-save-button:disabled[b-rzeogfwrwt] {
cursor: wait;
opacity: 0.65;
}
.perspective-modal-error[b-rzeogfwrwt] {
margin: 1rem 0 0;
color: #9d372d;
}
.perspective-modal-status[b-rzeogfwrwt] {
padding: 2rem 0;
color: #755e56;
text-align: center;
}
@media (max-width: 600px) {
.perspective-modal[b-rzeogfwrwt] {
max-height: 94vh;
padding: 1.4rem 1rem 1.2rem;
border-radius: 22px;
}
.perspective-modal-actions[b-rzeogfwrwt] {
flex-direction: column-reverse;
}
.perspective-cancel-button[b-rzeogfwrwt],
.perspective-save-button[b-rzeogfwrwt] {
width: 100%;
}
}
[b-rzeogfwrwt] .shared-card-context {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.28rem;
margin: -0.55rem 0 1rem;
padding: 0.65rem 0.75rem;
border: 1px solid rgba(157, 111, 82, 0.18);
border-radius: 12px;
background: linear-gradient(180deg, rgba(250, 242, 235, 0.92) 0%, rgba(255, 250, 246, 0.92) 100%);
}
[b-rzeogfwrwt] .shared-card-badge {
display: inline-flex;
align-items: center;
gap: 0.38rem;
padding: 0.22rem 0.58rem;
border-radius: 999px;
background: rgba(196, 136, 106, 0.12);
color: #7A5140;
font-size: 0.72rem;
font-weight: 750;
line-height: 1.25;
}
[b-rzeogfwrwt] .shared-card-source {
color: #5F453B;
font-size: 0.76rem;
font-weight: 650;
line-height: 1.3;
}
[b-rzeogfwrwt] .shared-card-note {
color: #806B62;
font-size: 0.7rem;
line-height: 1.35;
}
[b-rzeogfwrwt] .family-invite-card-button {
position: relative;
z-index: 3;
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: .45rem;
margin-top: .65rem;
padding: .55rem .75rem;
border: 0;
background: transparent;
color: #7b5a53;
font-size: .82rem;
font-weight: 700;
cursor: pointer;
pointer-events: auto;
}
[b-rzeogfwrwt] .family-invite-card-button:hover {
color: #5f433d;
text-decoration: underline;
}
[b-rzeogfwrwt] .btn-action {
border: none;
border-radius: 50px;
padding: 0.65rem 1.5rem;
/* inherited font-sans */
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
line-height: 1.2;
min-height: 42px;
}
[b-rzeogfwrwt] .card-action-icon {
width: 1rem;
height: 1rem;
flex: 0 0 1rem;
display: inline-block;
fill: none;
stroke: currentColor;
stroke-width: 1.7;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Hero Memorial Button - Dark Gold/Orange */
[b-rzeogfwrwt] .btn-hero-action {
background: linear-gradient(135deg, #D4A574 0%, #C4886A 100%);
color: #ffffff;
padding: 0.75rem 2rem;
font-size: 0.95rem;
box-shadow: 0 4px 12px rgba(196, 136, 106, 0.35);
text-decoration: none;
text-align: center;
}
[b-rzeogfwrwt] .btn-hero-action:hover {
background: linear-gradient(135deg, #C4886A 0%, #B07858 100%);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(196, 136, 106, 0.45);
}
[b-rzeogfwrwt] .btn-memorial-secondary {
min-width: 150px;
padding: 0.6rem 1.35rem;
background: #FFF8F3;
color: #8A6045;
border: 1px solid rgba(196, 136, 106, 0.42);
box-shadow: 0 4px 10px rgba(196, 136, 106, 0.1);
}
[b-rzeogfwrwt] .btn-memorial-secondary:hover {
background: #FFF2EA;
color: #6A4631;
border-color: rgba(196, 136, 106, 0.68);
transform: translateY(-1px);
box-shadow: 0 8px 16px rgba(196, 136, 106, 0.16);
}
[b-rzeogfwrwt] .btn-action:focus-visible,
[b-rzeogfwrwt] .chat-link:focus-visible,
[b-rzeogfwrwt] .family-invite-card-button:focus-visible,
[b-rzeogfwrwt] .card-entry-button:focus-visible,
[b-rzeogfwrwt] .card-name-button:focus-visible,
[b-rzeogfwrwt] .card-readiness-panel:focus-visible,
[b-rzeogfwrwt] .mark-ready-button:focus-visible {
outline: 3px solid rgba(196, 136, 106, 0.35);
outline-offset: 4px;
}
[b-rzeogfwrwt] .btn-primary-action {
background: linear-gradient(135deg, #FFDACF 0%, #FFC4B3 100%);
color: #4B2E2E;
}
[b-rzeogfwrwt] .btn-primary-action:hover {
background: linear-gradient(135deg, #FFC4B3 0%, #FFAB99 100%);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 196, 179, 0.4);
}
[b-rzeogfwrwt] .btn-secondary-action {
background: #FFF5F0;
color: #6A504B;
border: 1px solid #F0DAD3;
}
[b-rzeogfwrwt] .btn-secondary-action:hover {
background: #FFE8DC;
border-color: #D4A88A;
}
/* ===========================================
ADD NEW CARD - Clean Clickable Design
=========================================== */
[b-rzeogfwrwt] .profile-card.add-new-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(180deg, #FFF5F0 0%, #ffffff 100%);
border: 2px dashed #D4A88A;
min-height: 340px;
border-radius: 20px;
box-shadow: 0 4px 16px rgba(75, 46, 46, 0.08);
transform: rotate(0deg) !important; /* No rotation for Add card */
}
[b-rzeogfwrwt] .profile-card.add-new-card:hover {
background: linear-gradient(180deg, #FFE8DC 0%, #FFF5F0 100%);
border-color: #C4886A;
border-style: dashed;
box-shadow: 0 12px 32px rgba(75, 46, 46, 0.15);
transform: translateY(-8px) scale(1.05) !important;
}
[b-rzeogfwrwt] .add-new-content {
text-align: center;
padding: 2rem 1.5rem;
}
[b-rzeogfwrwt] .add-icon-circle {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #FFE8DC 0%, #FFDACF 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.25rem;
color: #C4886A;
font-size: 1.75rem;
transition: all 0.2s ease;
}
[b-rzeogfwrwt] .profile-card.add-new-card:hover .add-icon-circle {
background: linear-gradient(135deg, #FFDACF 0%, #FFC4B3 100%);
color: #B07858;
transform: scale(1.1);
}
[b-rzeogfwrwt] .add-new-title {
font-family: var(--font-serif);
font-size: 1.2rem;
color: #4B2E2E;
margin-bottom: 0.5rem;
font-weight: 600;
}
[b-rzeogfwrwt] .add-new-subtitle {
/* inherited font-sans */
font-size: 0.9rem;
color: #8B7355;
line-height: 1.4;
opacity: 0.85;
}
[b-rzeogfwrwt] .btn-add-action {
background: #FFF5F0;
color: #6A504B;
border: 1px solid #F0DAD3;
border-radius: 50px;
padding: 0.65rem 1.5rem;
/* inherited font-sans */
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
[b-rzeogfwrwt] .btn-add-action:hover {
background: #FFE8DC;
border-color: #D4A88A;
}
/* ===========================================
EMPTY STATE
=========================================== */
.main-content-area.main-content-area--empty[b-rzeogfwrwt] {
padding-top: 0.75rem;
}
.empty-memory-wall[b-rzeogfwrwt] {
width: min(100%, 70rem);
margin: 0 auto 2rem;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
align-items: start;
gap: clamp(1.5rem, 3vw, 3rem);
padding: 1.5rem 0 2rem;
}
.empty-memory-copy[b-rzeogfwrwt] {
min-width: 0;
max-width: 33rem;
padding-top: 0.5rem;
}
.empty-memory-eyebrow[b-rzeogfwrwt] {
margin: 0 0 0.85rem;
color: var(--lov-muted);
font: 600 0.85rem/1.5 var(--font-sans);
letter-spacing: 0.08em;
}
.empty-memory-copy h1[b-rzeogfwrwt] {
margin: 0 0 1.15rem;
color: var(--lov-ink);
font-family: var(--font-serif);
font-size: clamp(2rem, 1.4rem + 2vw, 3.5rem);
font-weight: var(--mobile-hero-heading-weight);
line-height: 1.1;
letter-spacing: -0.025em;
text-wrap: balance;
overflow-wrap: anywhere;
}
.empty-memory-description[b-rzeogfwrwt] {
max-width: 30rem;
margin: 0 0 1.5rem;
color: var(--lov-muted);
font-size: 1.05rem;
line-height: 1.65;
}
.empty-memory-actions[b-rzeogfwrwt] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem 0.75rem;
}
.empty-memory-room-hint[b-rzeogfwrwt],
.empty-memory-account-hint[b-rzeogfwrwt] {
margin: 0.75rem 0 0;
color: var(--lov-muted);
font-size: 0.88rem;
line-height: 1.55;
}
.empty-memory-account-hint[b-rzeogfwrwt] {
margin-top: 1rem;
}
.empty-memory-cta[b-rzeogfwrwt],
.empty-memory-secondary-cta[b-rzeogfwrwt] {
box-sizing: border-box;
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
min-height: 48px;
gap: 0.65rem;
padding: 0.85rem 1rem;
border: 1px solid transparent;
border-radius: 0.35rem;
font: 600 1rem/1.4 var(--font-sans);
text-align: center;
overflow-wrap: anywhere;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.empty-memory-cta[b-rzeogfwrwt] {
background: var(--lov-green);
border-color: var(--lov-green);
color: var(--lov-on-green);
}
.empty-memory-cta:hover[b-rzeogfwrwt] {
background: color-mix(in srgb, var(--lov-green) 90%, var(--lov-ink));
}
.empty-memory-secondary-cta[b-rzeogfwrwt] {
min-height: 44px;
padding-inline: 0.5rem;
background: transparent;
color: var(--lov-ink);
text-decoration: underline;
text-decoration-color: var(--lov-line);
text-underline-offset: 0.25em;
}
.empty-memory-secondary-cta:hover[b-rzeogfwrwt] {
color: var(--lov-green);
text-decoration-color: currentColor;
}
.empty-memory-cta:focus-visible[b-rzeogfwrwt],
.empty-memory-secondary-cta:focus-visible[b-rzeogfwrwt] {
outline: 0.2rem solid var(--lov-focus);
outline-offset: 0.25rem;
}
.empty-memory-example[b-rzeogfwrwt] {
box-sizing: border-box;
min-width: 0;
width: 100%;
max-width: 28rem;
justify-self: end;
margin: 0;
padding: 0.7rem;
border: 1px solid var(--lov-line);
border-radius: 0.4rem;
background: var(--lov-surface);
box-shadow: 0 0.65rem 1.8rem rgba(79, 58, 47, 0.08);
}
.empty-memory-example img[b-rzeogfwrwt] {
display: block;
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
border-radius: 0.15rem;
}
.empty-memory-example figcaption[b-rzeogfwrwt] {
padding: 1.1rem 0.65rem 0.6rem;
overflow-wrap: anywhere;
}
.empty-memory-example-label[b-rzeogfwrwt] {
margin: 0 0 0.6rem;
color: var(--lov-green);
font: 600 0.75rem/1.5 var(--font-sans);
letter-spacing: 0.06em;
}
.empty-memory-example h2[b-rzeogfwrwt] {
margin: 0 0 0.6rem;
color: var(--lov-ink);
font: 500 1.5rem/1.25 var(--font-serif);
}
.empty-memory-example-text[b-rzeogfwrwt] {
margin: 0;
color: var(--lov-ink);
font-size: 0.95rem;
line-height: 1.65;
}
.empty-memory-example-caption[b-rzeogfwrwt] {
margin: 1rem 0 0;
color: var(--lov-muted);
font-size: 0.8rem;
line-height: 1.6;
}
@media (max-width: 64rem) {
.main-content-area.main-content-area--empty[b-rzeogfwrwt] {
padding-top: 0;
}
.empty-memory-wall[b-rzeogfwrwt] {
grid-template-columns: minmax(0, 1fr);
gap: 1.75rem;
padding: 1.5rem 0 1rem;
}
.empty-memory-copy[b-rzeogfwrwt] {
width: 100%;
max-width: 40rem;
padding-top: 0;
}
.empty-memory-example[b-rzeogfwrwt] {
justify-self: start;
}
}
@media (max-width: 30rem) {
.empty-memory-wall[b-rzeogfwrwt] {
padding-top: 1.15rem;
}
.empty-memory-description[b-rzeogfwrwt] {
font-size: 1rem;
margin-bottom: 1.15rem;
}
.empty-memory-actions[b-rzeogfwrwt] {
align-items: stretch;
flex-direction: column;
gap: 0.25rem;
}
.empty-memory-secondary-cta[b-rzeogfwrwt] {
align-self: flex-start;
}
.empty-memory-example figcaption[b-rzeogfwrwt] {
padding-inline: 0.35rem;
}
}
/* ===========================================
MOBILE RESPONSIVENESS
=========================================== */
@media (max-width: 1024px) {
[b-rzeogfwrwt] .app-layout,
.app-layout[b-rzeogfwrwt] {
padding-top: 60px;
}
[b-rzeogfwrwt] .messages-container {
margin-left: 0 !important;
margin-top: 0;
padding: 0 var(--mobile-page-margin) 1rem;
width: 100%;
max-width: 100%;
}
[b-rzeogfwrwt] .main-content-area {
padding: 0;
}
[b-rzeogfwrwt] .lovedones-wall-hero {
width: 100%;
grid-template-columns: 1fr;
min-height: auto;
gap: clamp(0.8rem, 2vw, 1.35rem);
margin: clamp(2rem, 5vw, 3.25rem) auto clamp(2.5rem, 6vw, 4rem);
padding: clamp(1.35rem, 3vw, 2rem) 0 clamp(1.5rem, 4vw, 2.75rem);
overflow: hidden;
}
[b-rzeogfwrwt] .lovedones-wall-hero::before {
inset: 0;
height: 100%;
border-radius: 18px;
}
[b-rzeogfwrwt] .lovedones-wall-copy {
max-width: 680px;
padding: 0 clamp(1.25rem, 4vw, 2rem);
}
[b-rzeogfwrwt] .lovedones-wall-copy h1 {
font-size: clamp(3rem, 10vw, 4.5rem);
}
[b-rzeogfwrwt] .lovedones-portrait-wall {
min-height: clamp(360px, 64vw, 560px);
margin: 0;
}
[b-rzeogfwrwt] .wall-portrait-main {
width: min(76%, 540px);
height: auto;
right: 0;
top: 50%;
border-radius: 14px;
transform: translateY(-50%);
}
[b-rzeogfwrwt] .wall-portrait-main.wall-portrait-entry:hover {
transform: translateY(-50%) scale(1.015);
}
[b-rzeogfwrwt] .wall-portrait-main img {
object-position: 50% 44%;
}
[b-rzeogfwrwt] .wall-portrait-caption {
left: clamp(0.85rem, 3vw, 1.25rem);
right: clamp(0.85rem, 3vw, 1.25rem);
bottom: clamp(0.85rem, 3vw, 1.25rem);
max-width: calc(100% - clamp(1.7rem, 6vw, 2.5rem));
white-space: normal;
}
[b-rzeogfwrwt] .wall-portrait-one {
display: block;
width: 32%;
left: 0;
top: 3%;
}
[b-rzeogfwrwt] .wall-portrait-two {
display: block;
width: 27%;
right: 0;
top: 1%;
}
[b-rzeogfwrwt] .wall-portrait-three {
display: block;
width: 34%;
left: 0;
bottom: 5%;
}
[b-rzeogfwrwt] .wall-portrait-four {
display: block;
width: 24%;
right: 1%;
bottom: 2%;
}
[b-rzeogfwrwt] .lovedones-section {
margin-bottom: 3rem;
}
[b-rzeogfwrwt] .lovedones-section-header,
[b-rzeogfwrwt] .lovedones-add-callout {
padding-left: var(--mobile-page-margin);
padding-right: var(--mobile-page-margin);
}
[b-rzeogfwrwt] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
z-index: 100;
}
[b-rzeogfwrwt] .sidebar.visible {
transform: translateX(0);
}
[b-rzeogfwrwt] .sidebar.hidden {
transform: translateX(-100%);
}
}
@media (max-width: 768px) {
[b-rzeogfwrwt] .app-layout,
.app-layout[b-rzeogfwrwt] {
padding-top: 60px;
}
[b-rzeogfwrwt] .mobile-top-bar {
display: flex;
}
[b-rzeogfwrwt] .messages-container {
margin-left: 0;
margin-top: 0;
padding: 0 var(--mobile-page-margin) 1rem;
}
[b-rzeogfwrwt] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
z-index: 100;
}
[b-rzeogfwrwt] .sidebar.visible {
transform: translateX(0);
}
[b-rzeogfwrwt] .toggle-sidebar {
display: none;
}
[b-rzeogfwrwt] .vault-header {
padding: 1.5rem var(--mobile-page-margin);
}
[b-rzeogfwrwt] .vault-header h1 {
font-size: 2rem;
}
[b-rzeogfwrwt] .vault-subtitle {
font-size: 1rem;
}
[b-rzeogfwrwt] .main-content-area {
padding: 0;
}
[b-rzeogfwrwt] .lovedones-wall-hero {
width: 100%;
margin: 1.75rem auto 2.5rem;
padding: 1.25rem 0 2rem;
gap: 0.75rem;
overflow: hidden;
}
[b-rzeogfwrwt] .lovedones-wall-hero::before {
border-radius: 18px;
}
[b-rzeogfwrwt] .lovedones-wall-copy {
padding: 0 1.25rem;
}
[b-rzeogfwrwt] .wall-eyebrow {
font-size: 0.98rem;
margin-bottom: 0.75rem;
}
[b-rzeogfwrwt] .lovedones-wall-copy h1 {
font-size: 3rem;
margin-bottom: 0.75rem;
}
[b-rzeogfwrwt] .wall-subtitle {
font-size: 1rem;
margin-bottom: 0.9rem;
}
[b-rzeogfwrwt] .wall-status {
font-size: 0.85rem;
margin-bottom: 1.2rem;
}
[b-rzeogfwrwt] .wall-actions {
align-items: stretch;
flex-direction: column;
max-width: none;
}
[b-rzeogfwrwt] .wall-secondary-action {
width: 100%;
}
[b-rzeogfwrwt] .lovedones-portrait-wall {
min-height: clamp(330px, 78vw, 420px);
margin: -0.15rem 0 0;
}
[b-rzeogfwrwt] .lovedones-portrait-glow {
width: 92%;
right: 0;
filter: blur(34px);
}
[b-rzeogfwrwt] .wall-portrait-main {
inset: auto 0 auto auto;
width: 76%;
height: auto;
top: 50%;
border-radius: 12px;
transform: translateY(-50%);
}
[b-rzeogfwrwt] .wall-portrait-main.wall-portrait-entry:hover {
transform: translateY(-50%) scale(1.015);
}
[b-rzeogfwrwt] .wall-portrait-main img {
object-position: 50% 44%;
}
[b-rzeogfwrwt] .wall-portrait-caption {
left: 8%;
right: 8%;
bottom: 5%;
max-width: 84%;
font-size: 0.82rem;
padding: 0.48rem 0.78rem;
white-space: normal;
}
[b-rzeogfwrwt] .wall-portrait-two,
[b-rzeogfwrwt] .wall-portrait-four {
display: none;
}
[b-rzeogfwrwt] .wall-portrait-one {
display: block;
width: 34%;
left: 0;
top: 4%;
}
[b-rzeogfwrwt] .wall-portrait-three {
display: block;
width: 36%;
left: 0;
bottom: 6%;
opacity: 0.68;
}
[b-rzeogfwrwt] .lovedones-section-header {
align-items: flex-start;
flex-direction: column;
margin-bottom: 1.1rem;
padding: 0;
}
[b-rzeogfwrwt] .lovedones-section-header h2,
[b-rzeogfwrwt] .lovedones-add-callout h2 {
font-size: 2rem;
}
[b-rzeogfwrwt] .section-add-button {
width: 100%;
max-width: 260px;
}
[b-rzeogfwrwt] .lovedones-gallery-grid,
[b-rzeogfwrwt] .lovedones-draft-grid {
grid-template-columns: 1fr;
justify-items: center;
gap: 1.4rem;
}
[b-rzeogfwrwt] .lovedones-add-callout {
align-items: flex-start;
flex-direction: column;
padding: 1.25rem 0;
}
[b-rzeogfwrwt] .polaroid-grid {
flex-direction: column;
align-items: center;
gap: 1.5rem;
padding: 1rem;
}
/* Reset scattered margins on mobile */
[b-rzeogfwrwt] .polaroid-grid > .profile-card {
margin: 0 !important;
}
/* Disable rotation on mobile - keep cards straight for usability */
[b-rzeogfwrwt] .profile-card {
--rotation: 0deg !important;
transform: rotate(0deg) !important;
width: 100%;
max-width: 320px;
}
[b-rzeogfwrwt] .profile-card:hover {
transform: translateY(-4px) scale(1.02) !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
[b-rzeogfwrwt] .polaroid-grid {
max-width: 900px;
gap: 2rem;
padding: 2rem 1.5rem;
}
[b-rzeogfwrwt] .profile-card {
width: 260px;
}
[b-rzeogfwrwt] .card-avatar {
width: 100px;
height: 100px;
bottom: -45px;
}
[b-rzeogfwrwt] .card-body {
padding-top: 55px;
}
}
@media (min-width: 1400px) {
[b-rzeogfwrwt] .polaroid-grid {
max-width: 1400px;
gap: 2.5rem;
}
[b-rzeogfwrwt] .profile-card {
width: 300px;
}
[b-rzeogfwrwt] .card-avatar {
width: 130px;
height: 130px;
bottom: -55px;
}
[b-rzeogfwrwt] .card-header-bg {
height: 150px;
}
[b-rzeogfwrwt] .card-body {
padding-top: 65px;
}
}
/* Button Styles */
[b-rzeogfwrwt] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
}
[b-rzeogfwrwt] .btn-primary {
background-color: #C9A85A;
color: #2C2A28;
}
[b-rzeogfwrwt] .btn-primary:hover {
background-color: #B9954D;
}
[b-rzeogfwrwt] .btn-login {
background-color: #FBCFA8;
}
/* Footer alignment to follow sidebar on desktop */
[b-rzeogfwrwt] .main-footer {
margin-left: 280px;
width: calc(100% - 280px);
margin-top: 0;
}
[b-rzeogfwrwt] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
@media (max-width: 992px) {
[b-rzeogfwrwt] .main-footer {
margin-left: 0;
width: 100%;
}
}
/* Completed members use equal portrait-and-details cards; their actions stay available below the image. */
[b-rzeogfwrwt] .lovedones-gallery-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
justify-content: stretch;
gap: clamp(1rem, 2vw, 1.5rem);
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card {
width: 100%;
max-width: none;
min-width: 0;
height: auto;
margin: 0 !important;
display: flex;
flex-direction: column;
border: 1px solid var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
box-shadow: none;
transform: none;
overflow: hidden;
transition: border-color 0.2s ease, background-color 0.2s ease;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:hover {
transform: none;
border-color: var(--lov-green);
box-shadow: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-header-bg {
height: auto;
flex: 0 0 auto;
aspect-ratio: 4 / 3;
display: block;
border-radius: 5px 5px 0 0;
background: var(--lov-paper);
overflow: hidden;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-entry-button {
display: block;
width: 100%;
height: auto;
border-radius: inherit;
overflow: hidden;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-entry-button:hover {
background: var(--lov-paper);
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-avatar {
position: static;
display: block;
width: 100%;
height: 100%;
border: 0;
border-radius: 0;
transform: none;
background: var(--lov-paper);
box-shadow: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-avatar img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 42%;
filter: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .avatar-placeholder {
min-height: 100%;
border-radius: 0;
background: var(--lov-paper);
color: var(--lov-muted);
font-size: 3.2rem;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-body {
position: static;
z-index: auto;
flex: 1 0 auto;
min-height: 0;
padding: clamp(1rem, 2vw, 1.35rem);
display: flex;
flex-direction: column;
align-items: stretch;
background: var(--lov-paper);
color: var(--lov-ink);
text-align: left;
text-shadow: none;
pointer-events: auto;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-relationship {
margin: 0 0 0.35rem;
color: var(--lov-muted);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.02em;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-name {
display: block;
margin: 0 0 0.6rem;
color: var(--lov-ink);
font-family: var(--font-serif);
font-size: clamp(1.45rem, 2.1vw, 1.85rem);
line-height: 1.12;
text-align: left;
overflow-wrap: anywhere;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-name:hover {
color: var(--lov-green);
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-description {
flex: 0 0 auto;
margin: 0;
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
color: var(--lov-muted);
font-size: 0.94rem;
line-height: 1.5;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .shared-card-context,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .portrait-nudge-button {
border-color: var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
color: var(--lov-ink);
box-shadow: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .shared-card-context {
align-items: flex-start;
margin: 0 0 0.85rem;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .shared-perspective-button {
min-height: 44px;
border-color: var(--lov-line);
border-radius: 6px;
background: var(--lov-paper);
color: var(--lov-ink);
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .shared-card-badge,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .shared-card-source,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .shared-card-note,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .portrait-nudge-title,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .portrait-nudge-text {
color: var(--lov-muted);
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-memorial-indicator {
justify-content: flex-start;
margin: 0.75rem 0;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .portrait-nudge-button {
min-height: 44px;
margin: 0 0 0.85rem;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-actions {
order: 6;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: stretch;
gap: 0.5rem;
margin-top: 1rem;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .btn-action,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .chat-link {
width: 100%;
min-height: 44px;
margin: 0;
min-width: 0;
padding: 0.65rem 0.8rem;
border-radius: 6px;
box-sizing: border-box;
font-size: 0.88rem;
font-weight: 700;
line-height: 1.2;
white-space: normal;
overflow-wrap: anywhere;
text-decoration: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .btn-hero-action,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .btn-hero-action:hover {
border: 1px solid var(--lov-green);
background: var(--lov-green);
color: var(--lov-on-green);
box-shadow: none;
transform: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .chat-link,
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .chat-link:hover {
border: 1px solid var(--lov-line);
background: var(--lov-surface);
color: var(--lov-ink);
text-decoration: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .family-invite-card-button {
order: 7;
width: auto;
min-height: 44px;
margin: 0.35rem 0 0;
padding: 0.5rem 0;
justify-content: flex-start;
color: var(--lov-muted);
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .family-invite-card-button:hover {
color: var(--lov-ink);
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .btn-edit-corner {
width: 44px;
height: 44px;
border: 1px solid var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
color: var(--lov-muted);
box-shadow: none;
opacity: 1;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .btn-edit-corner:hover {
color: var(--lov-ink);
transform: none;
}
/* Drafts stay compact and make their next required step clear without hiding any available control. */
[b-rzeogfwrwt] .lovedones-draft-grid {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
justify-content: start;
gap: 1rem;
max-width: 960px;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card {
width: 100%;
max-width: none;
margin: 0 !important;
border: 1px solid var(--lov-line);
border-radius: 6px;
background: var(--lov-paper);
box-shadow: none;
opacity: 1;
transform: none;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card:hover {
transform: none;
border-color: var(--lov-green);
box-shadow: none;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-header-bg {
height: 96px;
border-radius: 5px 5px 0 0;
background: var(--lov-surface);
border-bottom: 1px solid var(--lov-line);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-avatar {
width: 84px;
height: 84px;
bottom: -42px;
border: 2px solid var(--lov-paper);
background: var(--lov-surface);
box-shadow: none;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-body {
padding: 56px 1rem 1rem;
background: var(--lov-paper);
color: var(--lov-ink);
text-align: left;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-draft-badge {
align-self: flex-start;
margin-bottom: 0.5rem;
border-color: var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
color: var(--lov-muted);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-readiness-panel {
height: auto;
min-height: 5rem;
margin-bottom: 0.5rem;
border-color: var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
box-shadow: none;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-readiness-heading,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-readiness-summary,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-readiness-icon,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-readiness-edit-indicator {
color: var(--lov-ink);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .mark-ready-button {
min-height: 44px;
margin: 0 0 0.5rem;
color: var(--lov-green);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .mark-ready-button:disabled {
color: var(--lov-muted);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-relationship,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-description {
color: var(--lov-muted);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-name {
min-height: 0;
margin: 0 0 0.45rem;
color: var(--lov-ink);
text-align: left;
overflow-wrap: anywhere;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-description {
min-height: 0;
max-height: none;
margin-bottom: 0.85rem;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .portrait-nudge-button {
min-height: 44px;
border-color: var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
box-shadow: none;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .portrait-nudge-title,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .portrait-nudge-text {
color: var(--lov-muted);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-actions {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 0.5rem;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .btn-action,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .chat-link {
width: 100%;
min-height: 44px;
margin: 0;
min-width: 0;
padding: 0.65rem 0.8rem;
border-radius: 6px;
box-sizing: border-box;
white-space: normal;
overflow-wrap: anywhere;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .btn-memorial-secondary,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .btn-memorial-secondary:hover,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .chat-link,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .chat-link:hover {
border: 1px solid var(--lov-line);
background: var(--lov-surface);
color: var(--lov-ink);
box-shadow: none;
text-decoration: none;
transform: none;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .btn-hero-action,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .btn-hero-action:hover {
border: 1px solid var(--lov-green);
background: var(--lov-green);
color: var(--lov-on-green);
box-shadow: none;
transform: none;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .family-invite-card-button {
width: auto;
min-height: 44px;
margin: 0.35rem 0 0;
padding: 0.5rem 0;
justify-content: flex-start;
color: var(--lov-muted);
text-align: left;
white-space: normal;
overflow-wrap: anywhere;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .family-invite-card-button:hover {
color: var(--lov-ink);
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .btn-edit-corner {
width: 44px;
height: 44px;
border: 1px solid var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
color: var(--lov-muted);
box-shadow: none;
opacity: 1;
}
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .btn-edit-corner:hover {
color: var(--lov-ink);
transform: none;
}
[b-rzeogfwrwt] .lovedones-gallery-grid :is(.btn-action, .chat-link, .family-invite-card-button, .btn-edit-corner, .card-entry-button, .card-name-button, .portrait-nudge-button, .shared-perspective-button):focus-visible,
[b-rzeogfwrwt] .lovedones-draft-grid :is(.btn-action, .chat-link, .family-invite-card-button, .btn-edit-corner, .card-entry-button, .card-name-button, .portrait-nudge-button, .card-readiness-panel, .mark-ready-button):focus-visible {
outline: 3px solid var(--lov-focus);
outline-offset: 3px;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-entry-button:focus-visible,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-entry-button:focus-visible {
outline-offset: -3px;
}
@media (min-width: 1150px) {
.messages-container.sidebar-hidden[b-rzeogfwrwt] .lovedones-gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 1430px) {
.messages-container:not(.sidebar-hidden)[b-rzeogfwrwt] .lovedones-gallery-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
[b-rzeogfwrwt] .lovedones-gallery-grid,
[b-rzeogfwrwt] .lovedones-draft-grid {
grid-template-columns: minmax(0, 1fr);
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) .card-actions,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card .card-actions {
grid-template-columns: minmax(0, 1fr);
}
}
/* Share content tracks across each card row, including optional notes and links.
Auto-sized tracks grow with names, translations and text zoom. */
@supports (grid-template-rows: subgrid) {
[b-rzeogfwrwt] .lovedones-gallery-grid,
[b-rzeogfwrwt] .polaroid-grid.lovedones-draft-grid {
align-items: stretch;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-row: span 10;
row-gap: 0;
align-self: stretch;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card > .card-header-bg,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card > .card-header-bg {
grid-row: 1;
}
[b-rzeogfwrwt] .lovedones-gallery-grid > .profile-card:not(.add-new-card) > .card-body,
[b-rzeogfwrwt] .lovedones-draft-grid > .draft-profile-card > .card-body {
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: subgrid;
grid-row: 2 / span 9;
row-gap: 0;
align-items: start;
min-width: 0;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > *,
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > * {
min-width: 0;
order: initial;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > .card-relationship {
grid-row: 1;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > .card-name {
grid-row: 2;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > .shared-card-context {
grid-row: 3;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > .card-description {
grid-row: 4;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > .portrait-nudge-button {
grid-row: 5;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > .card-memorial-indicator {
grid-row: 6;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > .card-actions {
grid-row: 7;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > a.family-invite-card-button {
grid-row: 8;
}
[b-rzeogfwrwt] .lovedones-gallery-grid .card-body > button.family-invite-card-button {
grid-row: 9;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .card-draft-badge {
grid-row: 1;
justify-self: start;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .card-readiness-panel {
grid-row: 2;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .mark-ready-button {
grid-row: 3;
justify-self: start;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .card-relationship {
grid-row: 4;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .card-name {
grid-row: 5;
justify-content: flex-start;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .card-description {
grid-row: 6;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .portrait-nudge-button {
grid-row: 7;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > a.family-invite-card-button {
grid-row: 8;
}
[b-rzeogfwrwt] .lovedones-draft-grid .card-body > .card-actions {
grid-row: 9;
}
}
/* Editorial collection heading and primary action. */
[b-rzeogfwrwt] .vault-header h1 { color: var(--lov-ink); font-size: clamp(2rem,3.5vw,3.2rem); font-weight: 450; }
[b-rzeogfwrwt] .vault-subtitle { color: var(--lov-muted); }
[b-rzeogfwrwt] .btn-primary, [b-rzeogfwrwt] .btn-primary:hover { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); }
/* A collection opens on its people and actions, not a second landing-page hero. */
[b-rzeogfwrwt] .lovedones-wall-hero { min-height: 0; display: block; padding: 24px 0 32px; margin-bottom: 32px; border-bottom: 1px solid var(--lov-line); }
[b-rzeogfwrwt] .lovedones-wall-hero::before { display: none; }
[b-rzeogfwrwt] .lovedones-wall-copy { max-width: 760px; }
[b-rzeogfwrwt] .lovedones-wall-copy h1 { font-size: clamp(2rem,3.5vw,3.2rem); line-height: 1.15; color: var(--lov-ink); }
[b-rzeogfwrwt] .lovedones-portrait-wall { display: none; }
[b-rzeogfwrwt] .wall-eyebrow { display: none; }
[b-rzeogfwrwt] .wall-subtitle, [b-rzeogfwrwt] .wall-photo-hint, [b-rzeogfwrwt] .section-kicker { color: var(--lov-muted); }
[b-rzeogfwrwt] .wall-status { background: transparent; border: 0; padding: 0; color: var(--lov-muted); margin-bottom: 20px; }
[b-rzeogfwrwt] .wall-photo-action, [b-rzeogfwrwt] .wall-photo-action:hover { background: var(--lov-green); color: var(--lov-on-green); border-color: var(--lov-green); border-radius: 6px; box-shadow: none; transform: none; }
[b-rzeogfwrwt] .wall-secondary-action, [b-rzeogfwrwt] .section-add-button { background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 6px; box-shadow: none; }
[b-rzeogfwrwt] .lovedones-section-header h2 { color: var(--lov-ink); font-size: clamp(1.5rem,2.5vw,2.2rem); }
/* Pull the saved-memory section closer to its introduction without changing its cards. */
@media (min-width: 769px) {
[b-rzeogfwrwt] .lovedones-wall-hero {
padding: 20px 0 24px;
margin-bottom: 20px;
}
}
@media (min-width: 1025px) {
.messages-container[b-rzeogfwrwt] {
width: min(1400px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1400px) / 2));
margin-right: auto;
}
.messages-container.sidebar-hidden[b-rzeogfwrwt] {
width: min(1400px, 100%);
margin-inline: auto;
}
}
/* /Components/Pages/MagicLinkSignIn.razor.rz.scp.css */
.magic-link-page[b-sj2rplmvah] {
width: 100%;
flex: 1 1 auto;
min-height: 100vh;
min-height: 100svh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(5rem, 8vw, 7rem) 1.5rem 3rem;
background:
linear-gradient(180deg, rgba(255, 246, 232, 0.88) 0%, rgba(255, 239, 214, 0.94) 100%),
radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 245, 229, 0.34) 38%, transparent 70%);
color: #3b2a22;
overflow: hidden;
}
.magic-link-page[b-sj2rplmvah]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(114, 77, 53, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(114, 77, 53, 0.04) 1px, transparent 1px);
background-size: 42px 42px;
opacity: 0.26;
mask-image: radial-gradient(circle at 50% 44%, black 0%, transparent 72%);
}
.magic-link-page[b-sj2rplmvah]::after {
content: "";
position: absolute;
width: min(54rem, 92vw);
height: min(54rem, 92vw);
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 248, 238, 0.28) 43%, transparent 72%);
pointer-events: none;
}
.magic-link-logo[b-sj2rplmvah] {
position: absolute;
top: 1.8rem;
left: 2rem;
z-index: 2;
display: inline-flex;
align-items: baseline;
gap: 0;
color: #5c3f37;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 1.45rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
letter-spacing: 0;
}
.magic-link-logo strong[b-sj2rplmvah] {
color: #ffaaa3;
font-weight: 800;
}
.magic-link-shell[b-sj2rplmvah] {
width: min(100%, 510px);
position: relative;
z-index: 1;
}
.magic-link-card[b-sj2rplmvah] {
position: relative;
width: 100%;
padding: clamp(2rem, 5vw, 2.65rem);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 248, 240, 0.96) 100%);
border: 1px solid rgba(154, 111, 79, 0.2);
box-shadow:
0 28px 70px rgba(92, 62, 39, 0.14),
0 1px 0 rgba(255, 255, 255, 0.82) inset;
text-align: left;
}
.magic-link-icon[b-sj2rplmvah] {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
border-radius: 999px;
color: #8e6346;
background: rgba(255, 239, 223, 0.86);
box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.16);
}
.magic-link-icon--error[b-sj2rplmvah] {
color: #9a4b34;
background: rgba(255, 235, 226, 0.92);
box-shadow: inset 0 0 0 1px rgba(166, 76, 52, 0.18);
}
.magic-link-line-icon[b-sj2rplmvah] {
width: 1.45rem;
height: 1.45rem;
display: block;
}
.magic-link-spinner[b-sj2rplmvah],
.magic-link-progress-spinner[b-sj2rplmvah] {
border-radius: 50%;
border-style: solid;
border-color: rgba(142, 99, 70, 0.22);
border-top-color: #8e6346;
animation: magicLinkSpin-b-sj2rplmvah 0.9s linear infinite;
}
.magic-link-spinner[b-sj2rplmvah] {
width: 1.35rem;
height: 1.35rem;
border-width: 2px;
}
.magic-link-progress-spinner[b-sj2rplmvah] {
width: 1.2rem;
height: 1.2rem;
border-width: 2px;
flex: 0 0 auto;
}
.magic-link-eyebrow[b-sj2rplmvah] {
margin: 0 0 0.45rem;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #a06942;
}
.magic-link-card h1[b-sj2rplmvah] {
margin: 0;
font-family: var(--font-serif, 'Fraunces', serif);
font-size: clamp(2rem, 5vw, 2.65rem);
font-weight: var(--mobile-hero-heading-weight, 700);
line-height: 1.06;
color: #3b271f;
}
.magic-link-intro[b-sj2rplmvah] {
margin: 0.85rem 0 1.5rem;
max-width: 28rem;
color: #745a4a;
font-size: 1.02rem;
line-height: 1.6;
}
.magic-link-status-region[b-sj2rplmvah] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.magic-link-progress[b-sj2rplmvah] {
min-height: 3.5rem;
display: inline-flex;
align-items: center;
gap: 0.75rem;
color: #745a4a;
font-weight: 700;
}
.magic-link-message[b-sj2rplmvah] {
border-radius: 14px;
padding: 1rem;
font-size: 0.95rem;
line-height: 1.5;
}
.magic-link-message--error[b-sj2rplmvah] {
color: #7d3325;
background: rgba(255, 235, 226, 0.92);
border: 1px solid rgba(166, 76, 52, 0.22);
}
.magic-link-actions[b-sj2rplmvah] {
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.magic-link-submit[b-sj2rplmvah] {
width: 100%;
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.2rem;
padding: 0.85rem 1.45rem;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #d4914f 0%, #bd7338 100%);
color: #fffaf4;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 1rem;
font-weight: 800;
text-decoration: none;
cursor: pointer;
box-shadow: 0 12px 26px rgba(175, 99, 46, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.magic-link-submit:hover[b-sj2rplmvah] {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(175, 99, 46, 0.3);
}
.magic-link-secondary-link[b-sj2rplmvah] {
align-self: center;
color: #6f4d3e;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
}
.magic-link-secondary-link:hover[b-sj2rplmvah] {
text-decoration: underline;
}
.magic-link-note[b-sj2rplmvah] {
margin: 1.35rem 0 0;
padding-top: 1rem;
border-top: 1px solid rgba(154, 111, 79, 0.14);
color: #8b735f;
font-size: 0.88rem;
line-height: 1.5;
text-align: center;
}
@media (prefers-reduced-motion: no-preference) {
.magic-link-card[b-sj2rplmvah] {
animation: magicLinkEnter-b-sj2rplmvah 0.42s ease-out both;
}
}
@keyframes magicLinkEnter-b-sj2rplmvah {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes magicLinkSpin-b-sj2rplmvah {
to {
transform: rotate(360deg);
}
}
@media (max-width: 640px) {
.magic-link-page[b-sj2rplmvah] {
align-items: flex-start;
padding: 5.8rem 1rem 2rem;
}
.magic-link-logo[b-sj2rplmvah] {
top: 1.4rem;
left: 1.25rem;
font-size: 1.28rem;
}
.magic-link-card[b-sj2rplmvah] {
border-radius: 16px;
}
.magic-link-icon[b-sj2rplmvah] {
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1rem;
}
}
/* Shared editorial form treatment; authentication behavior is unchanged. */
.magic-link-page[b-sj2rplmvah] { background: var(--lov-paper); color: var(--lov-ink); }
.magic-link-page[b-sj2rplmvah]::before, .magic-link-page[b-sj2rplmvah]::after { display: none; }
.magic-link-card[b-sj2rplmvah] { background: var(--lov-surface); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: none; }
.magic-link-card h1[b-sj2rplmvah] { color: var(--lov-ink); }
.magic-link-intro[b-sj2rplmvah], .magic-link-eyebrow[b-sj2rplmvah] { color: var(--lov-muted); }
.magic-link-submit[b-sj2rplmvah], .magic-link-submit:hover[b-sj2rplmvah] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; }
/* Keep nested content legible on the selected application surface. */
.magic-link-progress[b-sj2rplmvah], .magic-link-note[b-sj2rplmvah] { color: var(--lov-muted); }
.magic-link-secondary-link[b-sj2rplmvah] { color: var(--lov-green); }
/* /Components/Pages/Manifesto.razor.rz.scp.css */
.manifesto-page[b-phxrg8pvvn] {
width: 100%;
min-height: 100dvh;
display: flex;
justify-content: center;
align-items: center;
padding: clamp(3rem, 7vw, 6.5rem) 1.25rem;
background:
radial-gradient(circle at 50% 100%, rgba(166, 123, 80, 0.08), transparent 32rem),
var(--cream-50, #fbf7f0);
color: #4f392f;
}
.manifesto-note[b-phxrg8pvvn] {
position: relative;
width: min(100%, 42rem);
padding-bottom: 4.75rem;
font-family: var(--font-merriweather, Merriweather, Georgia, serif);
font-style: italic;
}
.manifesto-kicker[b-phxrg8pvvn] {
margin: 0 0 1rem;
color: #8b6655;
font-size: 0.83rem;
font-style: normal;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.manifesto-note h1[b-phxrg8pvvn] {
margin: 0 0 clamp(1.75rem, 4vw, 2.75rem);
color: #3d2c25;
font-family: var(--font-merriweather, Merriweather, Georgia, serif);
font-size: clamp(2.6rem, 8vw, 5.1rem);
font-style: italic;
font-weight: 500;
line-height: 0.98;
letter-spacing: 0;
}
.manifesto-note p[b-phxrg8pvvn] {
margin: 0 0 1.25rem;
font-size: clamp(1.08rem, 2vw, 1.32rem);
line-height: 1.85;
letter-spacing: 0;
}
.manifesto-closing[b-phxrg8pvvn] {
color: #6f5145;
}
.manifesto-candle[b-phxrg8pvvn] {
position: absolute;
left: 50%;
bottom: 0;
width: 1.9rem;
height: 1.9rem;
transform: translateX(-50%);
}
@media (max-width: 640px) {
.manifesto-page[b-phxrg8pvvn] {
align-items: flex-start;
padding: 3rem 1.1rem 3.75rem;
}
.manifesto-note[b-phxrg8pvvn] {
padding-bottom: 4rem;
}
.manifesto-note p[b-phxrg8pvvn] {
line-height: 1.72;
}
}
/* /Components/Pages/MemorialEmailVerified.razor.rz.scp.css */
.email-verified-container[b-4xrabppbwk] {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh;
padding: 2rem;
}
.email-verified-card[b-4xrabppbwk] {
max-width: 520px;
text-align: center;
background: linear-gradient(135deg, #FFFBF5, #FFF4E4);
border-radius: 20px;
padding: 3rem 2.5rem;
box-shadow: 0 8px 32px rgba(139, 115, 85, 0.15);
border: 1px solid rgba(232, 213, 200, 0.4);
}
.email-verified-icon[b-4xrabppbwk] {
width: 4rem;
height: 4rem;
color: #A67B50;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1rem;
}
.email-verified-icon svg[b-4xrabppbwk] {
width: 100%;
height: 100%;
}
.email-verified-title[b-4xrabppbwk] {
font-family: var(--font-serif);
font-size: 1.8rem;
color: #3A3228;
margin: 0 0 1rem;
}
.email-verified-message[b-4xrabppbwk] {
font-family: var(--font-sans);
font-size: 1.05rem;
color: #5A534C;
line-height: 1.6;
margin: 0 0 0.75rem;
}
.email-verified-submessage[b-4xrabppbwk] {
font-family: var(--font-sans);
font-size: 0.9rem;
color: #8B7355;
font-style: italic;
line-height: 1.5;
margin: 0 0 1.5rem;
}
.email-verified-link[b-4xrabppbwk] {
display: inline-block;
padding: 0.7rem 1.5rem;
background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
color: white;
text-decoration: none;
border-radius: 24px;
font-family: var(--font-sans);
font-size: 0.95rem;
font-weight: 600;
transition: opacity 0.2s;
}
.email-verified-link:hover[b-4xrabppbwk] {
opacity: 0.9;
}
/* A result belongs to the same quiet paper-and-olive system as its entry point. */
.email-verified-container[b-4xrabppbwk] { width: 100%; box-sizing: border-box; padding: 24px; background: var(--lov-paper); }
.email-verified-card[b-4xrabppbwk] { width: 100%; min-width: 0; box-sizing: border-box; background: var(--lov-surface); border-color: var(--lov-line); border-radius: 8px; box-shadow: none; }
.email-verified-title[b-4xrabppbwk] { color: var(--lov-ink); font-weight: 450; }
.email-verified-message[b-4xrabppbwk], .email-verified-submessage[b-4xrabppbwk] { color: var(--lov-muted); }
.email-verified-link[b-4xrabppbwk] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 5px; min-height: 44px; box-sizing: border-box; }
.email-verified-link:hover[b-4xrabppbwk] { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.email-verified-link:focus-visible[b-4xrabppbwk] { outline: 3px solid var(--lov-green); outline-offset: 4px; }
@media (max-width: 600px) {
.email-verified-container[b-4xrabppbwk] { padding: 20px; }
.email-verified-card[b-4xrabppbwk] { padding: 28px 20px; }
}
/* /Components/Pages/MemorialPage.razor.rz.scp.css */
/* MemorialPage.razor.css - Memorial Room (Minnesrummet) */
/* Loading */
.memorial-loading[b-2pzl15c73n] {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #FDF8F0;
}
.loading-spinner[b-2pzl15c73n] {
width: 40px;
height: 40px;
border: 3px solid rgba(192, 154, 108, 0.2);
border-top-color: #C49A6C;
border-radius: 50%;
animation: spin-b-2pzl15c73n 0.8s linear infinite;
}
@keyframes spin-b-2pzl15c73n {
to { transform: rotate(360deg); }
}
/* ========== CLOSED DOOR — Soft 404 / Private Room ========== */
.memorial-closed-door[b-2pzl15c73n] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
/* background: linear-gradient(180deg, #FDF8F0 0%, #FAF3E5 50%, #F5ECD8 100%); */
padding: 4rem 2rem;
text-align: center;
}
.closed-door-icon[b-2pzl15c73n] {
font-size: 3rem;
opacity: 0.4;
margin-bottom: 2.5rem;
filter: grayscale(30%);
}
.closed-door-heading[b-2pzl15c73n] {
font-family: var(--font-serif);
font-weight: 400;
font-style: normal;
font-size: 3rem;
color: #4A3F35;
letter-spacing: -0.02em;
margin: 0 0 1.5rem;
line-height: 1.2;
}
.closed-door-body[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 1.05rem;
color: #6B5D4D;
max-width: 560px;
line-height: 1.8;
margin: 0 auto 3.5rem;
}
.closed-door-divider[b-2pzl15c73n] {
width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.4), transparent);
margin: 0 auto 3rem;
}
.closed-door-product-heading[b-2pzl15c73n] {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.2rem;
color: #A67B50;
margin: 0 0 0.75rem;
letter-spacing: 0.01em;
}
.closed-door-product-body[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 0.95rem;
color: #7A6B58;
max-width: 480px;
line-height: 1.75;
margin: 0 auto 3rem;
}
.closed-door-cta-link[b-2pzl15c73n] {
text-decoration: none;
}
.closed-door-granny[b-2pzl15c73n] {
margin-top: 8rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
opacity: 0.6;
}
.closed-door-granny-img[b-2pzl15c73n] {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(196, 154, 108, 0.25);
object-fit: cover;
flex-shrink: 0;
}
.closed-door-granny-text[b-2pzl15c73n] {
font-family: var(--font-sans);
font-style: italic;
font-size: 0.85rem;
color: #A0927E;
line-height: 1.5;
margin: 0;
text-align: left;
}
/* Night mode — Closed Door */
:global(body.night-mode) .memorial-closed-door[b-2pzl15c73n] {
background: linear-gradient(180deg, #1a1512, #231e18, #1a1512);
}
:global(body.night-mode) .closed-door-heading[b-2pzl15c73n] {
color: #E8DDD0;
}
:global(body.night-mode) .closed-door-body[b-2pzl15c73n] {
color: #A89880;
}
:global(body.night-mode) .closed-door-divider[b-2pzl15c73n] {
background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.3), transparent);
}
:global(body.night-mode) .closed-door-product-heading[b-2pzl15c73n] {
color: #C4A882;
}
:global(body.night-mode) .closed-door-product-body[b-2pzl15c73n] {
color: #A89880;
}
:global(body.night-mode) .memorial-closed-door .memorial-cta-button[b-2pzl15c73n] {
background: linear-gradient(145deg, #3A3020 0%, #4A3D2A 35%, #3E3322 70%, #352B1C 100%);
color: #D4B882;
box-shadow: 0 2px 12px rgba(180, 140, 60, 0.2), 0 4px 24px rgba(180, 140, 60, 0.1);
outline-color: rgba(180, 140, 90, 0.2);
}
:global(body.night-mode) .closed-door-granny-text[b-2pzl15c73n] {
color: #A89880;
}
/* Responsive — Closed Door */
@media (max-width: 768px) {
.memorial-closed-door[b-2pzl15c73n] {
padding: 3rem 1.5rem;
}
.closed-door-heading[b-2pzl15c73n] {
font-size: 2.2rem;
}
.closed-door-body[b-2pzl15c73n] {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.closed-door-heading[b-2pzl15c73n] {
font-size: 1.8rem;
}
.memorial-closed-door .memorial-cta-button[b-2pzl15c73n] {
padding: 0.85rem 2rem;
font-size: 0.95rem;
}
.closed-door-granny-img[b-2pzl15c73n] {
width: 32px;
height: 32px;
}
.closed-door-granny[b-2pzl15c73n] {
gap: 0.6rem;
}
}
/* ========== END CLOSED DOOR ========== */
/* Layout */
.app-layout[b-2pzl15c73n] {
display: flex;
min-height: 100vh;
width: 100%;
background: #FAF3E5;
}
/* ========== GUEST LAYOUT — Sidebar-free immersive experience ========== */
.memorial-guest-layout[b-2pzl15c73n] {
min-height: 100vh;
width: 100%;
background: #FAF3E5;
}
.memorial-guest-header[b-2pzl15c73n] {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
pointer-events: none;
}
.memorial-guest-header > *[b-2pzl15c73n] {
pointer-events: all;
}
.guest-logo-link[b-2pzl15c73n] {
display: block;
text-decoration: none;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.guest-logo-link:hover[b-2pzl15c73n] {
opacity: 1;
}
.guest-logo[b-2pzl15c73n] {
height: 36px;
width: auto;
display: block;
}
.guest-menu-wrapper[b-2pzl15c73n] {
position: relative;
}
.guest-menu-btn[b-2pzl15c73n] {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(164, 123, 80, 0.2);
background: rgba(253, 248, 240, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}
.guest-menu-btn:hover[b-2pzl15c73n] {
background: rgba(253, 248, 240, 0.95);
border-color: rgba(164, 123, 80, 0.4);
box-shadow: 0 3px 12px rgba(139, 115, 85, 0.14);
}
.guest-menu-dots[b-2pzl15c73n] {
font-size: 1.4rem;
color: #6B5B4E;
letter-spacing: 2px;
line-height: 1;
}
.guest-menu-backdrop[b-2pzl15c73n] {
position: fixed;
inset: 0;
z-index: 60;
}
.guest-menu-dropdown[b-2pzl15c73n] {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 220px;
background: rgba(253, 248, 240, 0.97);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(232, 213, 200, 0.5);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14), 0 2px 8px rgba(139, 115, 85, 0.06);
padding: 0.5rem 0;
z-index: 70;
animation: guestMenuFadeIn-b-2pzl15c73n 0.2s ease-out;
}
@keyframes guestMenuFadeIn-b-2pzl15c73n {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.guest-menu-item[b-2pzl15c73n] {
display: block;
padding: 0.7rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.92rem;
color: #5C4033;
text-decoration: none;
text-align: left;
transition: background 0.15s ease;
}
.guest-menu-item-button[b-2pzl15c73n] {
border: none;
background: transparent;
cursor: pointer;
}
.guest-menu-item:hover[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.08);
}
/* Guest main: full-width, centered content */
.memorial-guest-main[b-2pzl15c73n] {
margin-left: 0 !important;
}
/* Guest disclaimer whisper below CTA */
.memorial-guest-disclaimer[b-2pzl15c73n] {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.78rem;
color: #A89880;
margin: 0.5rem 0 0;
letter-spacing: 0.01em;
}
/* ========== END GUEST LAYOUT ========== */
/* Sidebar */
.sidebar[b-2pzl15c73n] {
width: 280px;
min-width: 280px;
background: #FAF3E5;
display: flex;
flex-direction: column;
padding: 1.5rem;
border-right: 1px solid rgba(232, 213, 200, 0.3);
position: fixed;
top: 0;
left: 0;
height: 100vh;
z-index: 100;
transition: transform 0.3s ease;
}
.sidebar.hidden[b-2pzl15c73n] {
transform: translateX(-100%);
}
.sidebar-top-content[b-2pzl15c73n] {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
.app-logo-link[b-2pzl15c73n] {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
.sidebar-logo img[b-2pzl15c73n] {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
transition: none !important;
}
.memorial-sidebar-back-link[b-2pzl15c73n] {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
margin: -0.25rem 0 0.65rem;
padding: 0.48rem 0.8rem;
border: 1px solid rgba(164, 123, 80, 0.16);
border-radius: 999px;
background: rgba(255, 251, 244, 0.5);
color: rgba(91, 72, 58, 0.76);
font-family: var(--font-sans);
font-size: 0.86rem;
line-height: 1.2;
text-decoration: none;
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.memorial-sidebar-back-link:hover[b-2pzl15c73n],
.memorial-sidebar-back-link:focus-visible[b-2pzl15c73n] {
background: rgba(255, 249, 239, 0.92);
border-color: rgba(164, 123, 80, 0.28);
color: #5C4033;
outline: none;
transform: translateY(-1px);
}
.memorial-sidebar-back-link svg[b-2pzl15c73n] {
flex: 0 0 auto;
}
/* Sidebar Context */
.memorial-sidebar-context[b-2pzl15c73n] {
text-align: center;
padding: 1rem 0;
}
.memorial-sidebar-avatar[b-2pzl15c73n] {
width: 140px;
height: 140px;
margin: 0 auto 1rem;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(192, 154, 108, 0.35);
box-shadow: 0 0 30px rgba(196, 154, 108, 0.2), 0 4px 20px rgba(139, 115, 85, 0.15);
}
.memorial-sidebar-avatar img[b-2pzl15c73n] {
width: 100%;
height: 100%;
object-fit: cover;
}
.memorial-sidebar-name[b-2pzl15c73n] {
font-family: var(--font-serif);
font-size: 1.4rem;
color: #3A3228;
margin: 0 0 0.3rem;
}
.memorial-sidebar-dates[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 0.9rem;
color: #8B7355;
margin: 0 0 0.5rem;
letter-spacing: 0.04em;
}
.memorial-sidebar-tagline[b-2pzl15c73n] {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.95rem;
color: #6B5B4E;
margin: 0;
}
.memorial-sidebar-spacer[b-2pzl15c73n] {
flex: 1;
}
.memorial-sidebar-pending[b-2pzl15c73n] {
display: flex;
flex-direction: column;
gap: 0.7rem;
margin-bottom: 0.95rem;
padding: 0.9rem 1rem;
background: rgba(255, 248, 236, 0.96);
border: 1px solid rgba(196, 154, 108, 0.26);
border-radius: 18px;
box-shadow: 0 2px 10px rgba(139, 115, 85, 0.06);
}
.memorial-sidebar-family-pending[b-2pzl15c73n],
.memorial-family-pending-banner[b-2pzl15c73n] {
background: linear-gradient(135deg, rgba(255, 247, 235, 0.96), rgba(247, 228, 214, 0.84));
}
.memorial-sidebar-pending-text[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 0.9rem;
color: #5C4033;
line-height: 1.45;
}
.memorial-sidebar-pending-btn[b-2pzl15c73n] {
align-self: flex-start;
background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
color: #fff;
border: none;
border-radius: 999px;
padding: 0.45rem 0.95rem;
font-family: var(--font-sans);
font-size: 0.84rem;
cursor: pointer;
transition: opacity 0.2s ease;
}
.memorial-sidebar-pending-btn:hover[b-2pzl15c73n] {
opacity: 0.92;
}
.memorial-sidebar-owner-tools[b-2pzl15c73n] {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-bottom: 1rem;
}
.memorial-sidebar-owner-tools.has-user-footer[b-2pzl15c73n] {
padding-bottom: 6.25rem;
}
.memorial-sidebar-owner-btn[b-2pzl15c73n] {
width: 100%;
display: flex;
align-items: center;
gap: 0.7rem;
justify-content: flex-start;
background: rgba(255, 251, 244, 0.8);
border: 1px solid rgba(164, 123, 80, 0.18);
border-radius: 18px;
padding: 0.85rem 1rem;
font-family: var(--font-sans);
font-size: 0.92rem;
color: #5C4033;
cursor: pointer;
text-align: left;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(139, 115, 85, 0.05);
}
.memorial-sidebar-owner-btn:hover[b-2pzl15c73n] {
background: rgba(255, 249, 239, 0.96);
border-color: rgba(164, 123, 80, 0.35);
transform: translateY(-1px);
}
.memorial-sidebar-owner-link[b-2pzl15c73n] {
text-decoration: none;
}
.memorial-sidebar-owner-icon[b-2pzl15c73n] {
width: 1.25rem;
height: 1.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(139, 90, 43, 0.78);
}
.memorial-sidebar-owner-icon-svg[b-2pzl15c73n] {
width: 1.18rem;
height: 1.18rem;
display: block;
stroke: currentColor;
transition: transform 0.35s ease, opacity 0.35s ease, color 0.35s ease;
}
.memorial-sidebar-owner-btn:hover .memorial-sidebar-owner-icon-svg[b-2pzl15c73n],
.memorial-sidebar-owner-btn:focus-visible .memorial-sidebar-owner-icon-svg[b-2pzl15c73n] {
color: rgba(122, 75, 39, 0.95);
opacity: 1;
transform: scale(1.05) rotate(-2deg);
}
/* Toggle Sidebar Button */
[b-2pzl15c73n] .toggle-sidebar {
position: fixed;
top: 16px;
left: 16px;
z-index: 110;
}
.memorial-collapsed-back-link[b-2pzl15c73n] {
position: fixed;
top: 18px;
left: 72px;
z-index: 109;
display: inline-flex;
align-items: center;
gap: 0.45rem;
max-width: min(260px, calc(100vw - 96px));
padding: 0.48rem 0.82rem;
border: 1px solid rgba(164, 123, 80, 0.18);
border-radius: 999px;
background: rgba(255, 251, 245, 0.9);
color: rgba(91, 72, 58, 0.78);
font-family: var(--font-sans);
font-size: 0.86rem;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 2px 10px rgba(139, 115, 85, 0.08);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.memorial-collapsed-back-link:hover[b-2pzl15c73n],
.memorial-collapsed-back-link:focus-visible[b-2pzl15c73n] {
background: rgba(255, 249, 239, 0.96);
border-color: rgba(164, 123, 80, 0.3);
color: #5C4033;
outline: none;
transform: translateY(-1px);
}
.memorial-collapsed-back-link svg[b-2pzl15c73n] {
flex: 0 0 auto;
}
.memorial-collapsed-back-link span[b-2pzl15c73n] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Main Content */
.memorial-main[b-2pzl15c73n] {
flex: 1;
min-width: 0;
margin-left: 280px;
transition: margin-left 0.3s ease;
overflow-x: hidden;
background: #FAF3E5;
padding-bottom: 90px; /* room for fixed footer */
}
.memorial-main.sidebar-hidden[b-2pzl15c73n] {
margin-left: 0;
}
.memorial-room-stage[b-2pzl15c73n] {
position: relative;
min-height: 100%;
}
.memorial-room-canvas[b-2pzl15c73n] {
position: relative;
z-index: 1;
opacity: 1;
transform: scale(1);
transform-origin: center 6rem;
transition:
opacity 240ms ease,
transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: opacity, transform;
}
.memorial-room-veil[b-2pzl15c73n] {
position: absolute;
inset: 0;
z-index: 2;
opacity: 0;
pointer-events: none;
background:
radial-gradient(ellipse 72% 48% at 50% 14%, rgba(255, 252, 246, 0.16) 0%, transparent 68%),
linear-gradient(180deg, rgba(255, 249, 241, 0.04) 0%, rgba(242, 226, 204, 0.16) 48%, rgba(250, 243, 229, 0.07) 100%);
transition: opacity 220ms ease;
}
.memorial-room-stage--transitioning[b-2pzl15c73n] {
pointer-events: none;
}
.memorial-room-stage--transition-out .memorial-room-canvas[b-2pzl15c73n] {
opacity: 0.2;
transform: scale(0.992);
}
.memorial-room-stage--transition-out .memorial-room-veil[b-2pzl15c73n] {
opacity: 0.18;
}
.memorial-room-stage--transition-in .memorial-room-canvas[b-2pzl15c73n] {
opacity: 1;
transform: scale(1);
}
.memorial-room-stage--transition-in .memorial-room-veil[b-2pzl15c73n] {
opacity: 0.05;
}
/* Hero Section */
.memorial-hero[b-2pzl15c73n] {
text-align: center;
padding: 4rem 4rem 0;
background: linear-gradient(170deg, #FDF4E7 0%, #FAF0E2 60%, #F5ECD8 100%);
position: relative;
overflow: hidden;
}
.memorial-hero[b-2pzl15c73n]::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 80% 55% at 50% 20%, rgba(255, 252, 245, 0.45) 0%, transparent 70%);
pointer-events: none;
}
.memorial-hero-inner[b-2pzl15c73n] {
max-width: 860px;
margin: 0 auto;
position: relative;
}
.memorial-hero-tribute[b-2pzl15c73n] {
display: block;
font-family: var(--font-serif);
font-style: italic;
font-size: 1.2rem;
color: #8B7355;
margin-bottom: 0.3rem;
letter-spacing: 0.02em;
}
.memorial-name[b-2pzl15c73n] {
font-family: var(--font-serif);
font-size: 4em;
font-weight: 400;
color: #2E2318;
margin: 0 0 0.5rem;
letter-spacing: -0.02em;
line-height: 1.05;
}
.memorial-dates[b-2pzl15c73n] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
font-family: var(--font-serif);
font-size: 1.05rem;
color: #6B5B4E;
letter-spacing: 0.08em;
margin: 0 0 0.25rem;
}
.memorial-dates-dash[b-2pzl15c73n] {
color: #C49A6C;
font-size: 1.1em;
}
.memorial-portrait-prompt[b-2pzl15c73n] {
max-width: 680px;
margin: 0.6rem auto 0;
padding: 0.9rem 1rem;
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.9rem;
border: 1px dashed rgba(196, 136, 106, 0.42);
border-radius: 16px;
background: rgba(255, 248, 243, 0.82);
color: #5A3E2B;
box-shadow: 0 10px 24px rgba(107, 72, 48, 0.08);
}
.memorial-portrait-prompt-icon[b-2pzl15c73n] {
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(255, 218, 207, 0.76);
color: #A05D3C;
font-size: 1rem;
}
.memorial-portrait-prompt-copy[b-2pzl15c73n] {
text-align: left;
min-width: 0;
}
.memorial-portrait-prompt-kicker[b-2pzl15c73n] {
margin: 0 0 0.15rem;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #B07858;
}
.memorial-portrait-prompt h2[b-2pzl15c73n] {
margin: 0;
font-family: var(--font-serif);
font-size: 1.25rem;
font-weight: 600;
line-height: 1.2;
color: #4B2E2E;
}
.memorial-portrait-prompt p:last-child[b-2pzl15c73n] {
margin: 0.25rem 0 0;
font-size: 0.92rem;
line-height: 1.45;
color: #7B665B;
}
.memorial-portrait-prompt-action[b-2pzl15c73n] {
border: none;
border-radius: 999px;
padding: 0.68rem 1rem;
background: linear-gradient(135deg, #D4A574 0%, #C4886A 100%);
color: #ffffff;
font-size: 0.9rem;
font-weight: 700;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 6px 16px rgba(196, 136, 106, 0.24);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.memorial-portrait-prompt-action:hover[b-2pzl15c73n],
.memorial-portrait-prompt-action:focus-visible[b-2pzl15c73n] {
transform: translateY(-1px);
background: linear-gradient(135deg, #C4886A 0%, #B07858 100%);
box-shadow: 0 9px 20px rgba(196, 136, 106, 0.32);
outline: none;
}
@media (max-width: 768px) {
.memorial-portrait-prompt[b-2pzl15c73n] {
grid-template-columns: auto minmax(0, 1fr);
align-items: flex-start;
text-align: left;
}
.memorial-portrait-prompt-action[b-2pzl15c73n] {
grid-column: 1 / -1;
width: 100%;
}
}
/* Portrait with vignette fade */
.memorial-portrait-container[b-2pzl15c73n] {
margin: 0.5rem auto 0;
max-width: 620px;
width: 100%;
position: relative;
}
.memorial-portrait[b-2pzl15c73n] {
width: 100%;
height: auto;
display: block;
-webkit-mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
mask-image: radial-gradient(ellipse 68% 72% at 50% 42%, black 28%, transparent 68%);
object-fit: cover;
}
.memorial-tagline[b-2pzl15c73n] {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.1rem;
color: #6B5B4E;
margin: 0.75rem 0 1.15rem;
letter-spacing: 0.02em;
position: relative;
}
.memorial-conversation-invite[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
margin: 0 auto 2.5rem;
padding: 0.9rem 1.8rem;
border: 1px solid rgba(201, 153, 100, 0.28);
border-radius: 999px;
background: linear-gradient(145deg, #FDF3E4 0%, #F4E1C2 50%, #EBCFA5 100%);
box-shadow:
0 8px 24px rgba(180, 132, 77, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.7);
color: #5A3E2B;
font-family: var(--font-serif);
font-size: 1.02rem;
font-weight: 500;
letter-spacing: 0.01em;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.memorial-conversation-invite:hover[b-2pzl15c73n] {
transform: translateY(-1px);
background: linear-gradient(145deg, #FFF7EC 0%, #F7E6CA 50%, #EFD8B2 100%);
box-shadow:
0 12px 28px rgba(180, 132, 77, 0.19),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
.memorial-conversation-invite:hover .memorial-conversation-invite-icon-svg[b-2pzl15c73n],
.memorial-conversation-invite:focus-visible .memorial-conversation-invite-icon-svg[b-2pzl15c73n] {
opacity: 1;
transform: translateY(-1px) scale(1.04);
}
.memorial-conversation-invite:active[b-2pzl15c73n] {
transform: translateY(0);
}
.memorial-conversation-invite-icon[b-2pzl15c73n] {
width: 1.35rem;
height: 1.35rem;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: currentColor;
}
.memorial-conversation-invite-icon-svg[b-2pzl15c73n] {
width: 1.3rem;
height: 1.3rem;
display: block;
stroke: currentColor;
opacity: 0.78;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Owner Action Bar */
.memorial-owner-bar[b-2pzl15c73n] {
max-width: none;
margin: 1.5rem 4rem 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.memorial-owner-actions[b-2pzl15c73n] {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.memorial-pending-banner[b-2pzl15c73n] {
display: flex;
align-items: center;
gap: 0.75rem;
background: #FFF3E0;
border: 1px solid rgba(196, 154, 108, 0.3);
border-radius: 12px;
padding: 0.75rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.95rem;
color: #5C4033;
}
.memorial-review-btn[b-2pzl15c73n] {
background: linear-gradient(135deg, #C49A6C 0%, #A67B50 100%);
color: white;
border: none;
border-radius: 20px;
padding: 0.4rem 1rem;
font-family: var(--font-sans);
font-size: 0.85rem;
cursor: pointer;
transition: opacity 0.2s;
}
.memorial-review-btn:hover[b-2pzl15c73n] {
opacity: 0.9;
}
.memorial-settings-btn[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.7rem;
background: transparent;
border: 1px solid rgba(164, 123, 80, 0.3);
border-radius: 20px;
padding: 0.5rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #6B5B4E;
cursor: pointer;
text-align: center;
transition: all 0.2s;
}
.memorial-settings-btn:hover[b-2pzl15c73n] {
background: rgba(164, 123, 80, 0.08);
border-color: rgba(164, 123, 80, 0.5);
}
.memorial-settings-link[b-2pzl15c73n] {
text-decoration: none;
}
/* Prologue — long-form tribute */
.memorial-tribute-prologue[b-2pzl15c73n] {
padding: 5rem 2rem 3rem;
background: #FAF3E5;
}
.memorial-tribute-inner[b-2pzl15c73n] {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.memorial-tribute-actions[b-2pzl15c73n] {
display: flex;
justify-content: flex-end;
max-width: 660px;
margin: 0 auto 0.85rem;
}
.memorial-section-heading-row[b-2pzl15c73n] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.memorial-section-heading-row--centered[b-2pzl15c73n] {
justify-content: center;
position: relative;
}
.memorial-section-heading-row--centered .memorial-section-edit-link[b-2pzl15c73n] {
position: absolute;
right: 0;
}
.memorial-tapestry-section[b-2pzl15c73n] {
position: relative;
}
.memorial-tapestry-edit-link[b-2pzl15c73n] {
position: absolute;
top: 3.25rem;
right: max(1.5rem, calc((100% - 940px) / 2 + 1.5rem));
z-index: 5;
}
.memorial-section-edit-link.memorial-tapestry-edit-link--mobile[b-2pzl15c73n] {
display: none;
}
.memorial-tribute-title[b-2pzl15c73n] {
margin: 0 auto 1.75rem;
font-family: var(--font-serif);
font-size: clamp(1.8rem, 4vw, 2.45rem);
font-weight: 400;
color: #33271E;
letter-spacing: 0;
line-height: 1.18;
}
.memorial-tribute-text[b-2pzl15c73n] {
max-width: 660px;
margin: 0 auto;
color: #4A3B2E;
font-family: var(--font-serif);
font-size: clamp(1.05rem, 2vw, 1.22rem);
line-height: 1.82;
text-align: left;
transition: max-height 0.48s ease;
}
.memorial-tribute-text p[b-2pzl15c73n] {
margin: 0 0 1.35rem;
}
.memorial-tribute-text p:first-child[b-2pzl15c73n]::first-letter {
float: left;
padding: 0.14rem 0.45rem 0 0;
font-size: 4rem;
line-height: 0.78;
color: #9A6D3E;
}
.memorial-tribute-text--collapsed[b-2pzl15c73n] {
max-height: 320px;
overflow: hidden;
position: relative;
}
.memorial-tribute-text--expanded[b-2pzl15c73n] {
max-height: 12000px;
overflow: visible;
}
.memorial-tribute-text--collapsed[b-2pzl15c73n]::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 112px;
pointer-events: none;
background: linear-gradient(to bottom, rgba(250, 243, 229, 0), #FAF3E5);
}
.memorial-tribute-read-more[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
margin: 1.25rem auto 0;
padding: 0.45rem 1.05rem;
border: 1px solid rgba(176, 127, 78, 0.34);
border-radius: 999px;
background: rgba(255, 248, 238, 0.58);
color: #8A5B32;
font-family: var(--font-serif);
font-size: 0.98rem;
font-style: italic;
cursor: pointer;
box-shadow: 0 8px 22px rgba(126, 87, 47, 0.08);
transition:
transform 0.2s ease,
border-color 0.2s ease,
background 0.2s ease;
}
.memorial-tribute-read-more:hover[b-2pzl15c73n],
.memorial-tribute-read-more:focus-visible[b-2pzl15c73n] {
transform: translateY(-1px);
border-color: rgba(176, 127, 78, 0.58);
background: rgba(255, 250, 244, 0.78);
outline: none;
}
.memorial-foyer-divider[b-2pzl15c73n] {
width: 180px;
height: 1px;
margin: 3rem auto 0;
background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.52), transparent);
position: relative;
}
.memorial-foyer-divider[b-2pzl15c73n]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 7px;
height: 7px;
background: #B98555;
transform: translate(-50%, -50%) rotate(45deg);
opacity: 0.78;
}
.memorial-section-edit-link[b-2pzl15c73n],
.memorial-empty-section-button[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
border: 1px solid rgba(164, 123, 80, 0.24);
background: rgba(255, 251, 244, 0.58);
color: #6B4A34;
font-family: var(--font-sans);
cursor: pointer;
transition: background 0.22s ease, border-color 0.22s ease, transform 0.22s ease;
}
.memorial-section-edit-link[b-2pzl15c73n] {
border-radius: 999px;
padding: 0.45rem 0.85rem;
font-size: 0.84rem;
}
.memorial-empty-section-button[b-2pzl15c73n] {
border-radius: 999px;
padding: 0.8rem 1.25rem;
font-size: 0.94rem;
}
.memorial-section-edit-link:hover[b-2pzl15c73n],
.memorial-empty-section-button:hover[b-2pzl15c73n] {
background: rgba(255, 249, 239, 0.96);
border-color: rgba(164, 123, 80, 0.42);
transform: translateY(-1px);
}
.memorial-section-edit-icon[b-2pzl15c73n],
.memorial-empty-section-icon[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
color: currentColor;
}
.memorial-section-edit-icon[b-2pzl15c73n] {
width: 1rem;
height: 1rem;
}
.memorial-empty-section-icon[b-2pzl15c73n] {
width: 1.2rem;
height: 1.2rem;
}
.memorial-section-edit-icon svg[b-2pzl15c73n],
.memorial-empty-section-icon svg[b-2pzl15c73n] {
width: 100%;
height: 100%;
display: block;
}
.memorial-owner-empty-section[b-2pzl15c73n] {
opacity: 0.92;
}
.memorial-owner-empty-section .memorial-tribute-inner[b-2pzl15c73n],
.memorial-service-empty[b-2pzl15c73n],
.memorial-resting-place-empty[b-2pzl15c73n] {
padding: 1.4rem 1.5rem;
border: 1px dashed rgba(164, 123, 80, 0.24);
border-radius: 18px;
background: rgba(255, 251, 244, 0.32);
}
/* Memorial service — official farewell chapter */
.memorial-service-section[b-2pzl15c73n] {
padding: 1rem 4rem 2rem;
background: #FAF3E5;
}
.memorial-service-card[b-2pzl15c73n] {
width: min(1120px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(300px, 1.04fr) minmax(340px, 0.96fr);
overflow: hidden;
border: 1px solid rgba(196, 154, 108, 0.24);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 252, 246, 0.94) 0%, rgba(248, 238, 222, 0.9) 100%);
box-shadow: 0 18px 46px rgba(139, 115, 85, 0.1);
}
.memorial-service-card--text-only[b-2pzl15c73n] {
grid-template-columns: 1fr;
width: min(820px, 100%);
}
.memorial-service-image[b-2pzl15c73n] {
display: block;
min-height: 360px;
border: 0;
padding: 0;
background: #E9D9BE;
cursor: zoom-in;
overflow: hidden;
}
.memorial-service-image img[b-2pzl15c73n] {
width: 100%;
height: 100%;
min-height: 360px;
display: block;
object-fit: cover;
}
.memorial-service-content[b-2pzl15c73n] {
padding: clamp(1.5rem, 3.2vw, 2.45rem);
color: #3E3026;
}
.memorial-service-content h2[b-2pzl15c73n],
.memorial-service-empty h2[b-2pzl15c73n] {
margin: 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.7rem, 4vw, 2.45rem);
color: #34281F;
line-height: 1.12;
}
.memorial-service-subtitle[b-2pzl15c73n] {
margin: 0.35rem 0 0;
font-family: var(--font-serif);
font-size: 1.02rem;
font-style: italic;
color: #A06F42;
}
.memorial-service-meta[b-2pzl15c73n] {
margin: 1.1rem 0 0;
color: #6D5844;
font-family: var(--font-sans);
font-size: 0.94rem;
line-height: 1.5;
}
.memorial-service-body[b-2pzl15c73n] {
margin-top: 1rem;
color: #4F4134;
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.72;
}
.memorial-service-body p[b-2pzl15c73n] {
margin: 0 0 0.9rem;
}
.memorial-service-program[b-2pzl15c73n] {
margin-top: 1.25rem;
}
.memorial-service-program h3[b-2pzl15c73n] {
margin: 0 0 0.65rem;
color: #4B3829;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 400;
}
.memorial-service-program ul[b-2pzl15c73n] {
display: grid;
gap: 0.45rem;
margin: 0;
padding: 0;
list-style: none;
}
.memorial-service-program li[b-2pzl15c73n] {
display: grid;
grid-template-columns: 1.55rem minmax(0, 1fr);
gap: 0.5rem;
align-items: start;
color: #6B5541;
font-family: var(--font-serif);
font-size: 0.96rem;
line-height: 1.45;
}
.memorial-service-program-kind[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.25rem;
height: 1.25rem;
margin-top: 0.03rem;
color: #A06F42;
text-align: center;
line-height: 1;
}
.memorial-service-program-copy[b-2pzl15c73n] {
display: flex;
align-items: baseline;
gap: 0.65rem;
flex-wrap: wrap;
}
.memorial-service-program-title[b-2pzl15c73n] {
min-width: 0;
}
.memorial-service-program-read[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
border: 0;
border-bottom: 1px solid rgba(160, 111, 66, 0.32);
border-radius: 0;
background: transparent;
padding: 0;
color: #9A6E45;
font-family: var(--font-sans);
font-size: 0.78rem;
line-height: 1.35;
cursor: pointer;
transition: color 0.2s ease, border-color 0.2s ease;
}
.memorial-service-program-read:hover[b-2pzl15c73n],
.memorial-service-program-read:focus-visible[b-2pzl15c73n] {
color: #6B4A34;
border-color: rgba(107, 74, 52, 0.58);
outline: none;
}
.memorial-service-program-read:focus-visible[b-2pzl15c73n] {
box-shadow: 0 2px 0 rgba(196, 154, 108, 0.26);
}
.memorial-program-reader-overlay[b-2pzl15c73n] {
position: fixed;
inset: 0;
z-index: 10020;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 3rem);
background: rgba(48, 38, 28, 0.38);
-webkit-backdrop-filter: blur(10px) saturate(0.98);
backdrop-filter: blur(10px) saturate(0.98);
}
.memorial-program-reader[b-2pzl15c73n] {
width: min(760px, 100%);
max-height: min(88vh, 900px);
display: flex;
flex-direction: column;
overflow: hidden;
border: 1px solid rgba(196, 154, 108, 0.28);
border-radius: 20px;
background:
radial-gradient(900px 420px at 50% -12%, rgba(255, 255, 255, 0.72), transparent 62%),
linear-gradient(180deg, #FFF9EF 0%, #F7ECDC 100%);
box-shadow:
0 28px 80px rgba(52, 40, 31, 0.28),
inset 0 1px 0 rgba(255, 255, 255, 0.68);
}
.memorial-program-reader-header[b-2pzl15c73n] {
display: flex;
justify-content: space-between;
gap: 1.5rem;
padding: clamp(1.3rem, 3vw, 2rem) clamp(1.25rem, 4vw, 2.35rem) 1rem;
border-bottom: 1px solid rgba(196, 154, 108, 0.16);
}
.memorial-program-reader-kicker[b-2pzl15c73n] {
margin: 0 0 0.4rem;
color: #A06F42;
font-family: var(--font-serif);
font-size: 0.98rem;
font-style: italic;
}
.memorial-program-reader h2[b-2pzl15c73n] {
margin: 0;
color: #34281F;
font-family: var(--font-serif);
font-size: clamp(1.85rem, 4vw, 2.7rem);
font-weight: 400;
line-height: 1.1;
}
.memorial-program-reader-meta[b-2pzl15c73n] {
margin: 0.8rem 0 0;
color: #806D5B;
font-family: var(--font-sans);
font-size: 0.88rem;
}
.memorial-program-reader-close[b-2pzl15c73n] {
width: 2.55rem;
height: 2.55rem;
flex: 0 0 auto;
border: 1px solid rgba(164, 123, 80, 0.24);
border-radius: 50%;
background: rgba(255, 251, 244, 0.74);
color: #6B5541;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
transition: background 0.2s ease, transform 0.2s ease;
}
.memorial-program-reader-close:hover[b-2pzl15c73n],
.memorial-program-reader-close:focus-visible[b-2pzl15c73n] {
background: rgba(255, 249, 239, 0.96);
transform: translateY(-1px);
outline: none;
}
.memorial-program-reader-body[b-2pzl15c73n] {
overflow-y: auto;
padding: clamp(1.4rem, 4vw, 2.45rem);
color: #3E3026;
font-family: var(--font-serif);
font-size: clamp(1.04rem, 1.7vw, 1.18rem);
line-height: 1.78;
}
.memorial-program-reader-body p[b-2pzl15c73n] {
max-width: 68ch;
margin: 0 auto 1.15rem;
}
.memorial-program-reader-body p:last-child[b-2pzl15c73n] {
margin-bottom: 0;
}
.memorial-service-empty[b-2pzl15c73n] {
width: min(760px, 100%);
margin: 0 auto;
text-align: center;
}
.memorial-service-empty h2[b-2pzl15c73n] {
margin-bottom: 1rem;
}
/* Resting place — physical grounding */
.memorial-resting-place-section[b-2pzl15c73n] {
padding: 1rem 4rem 8rem;
background: #FAF3E5;
}
.memorial-resting-place-card[b-2pzl15c73n] {
width: min(920px, 100%);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr);
padding: 0;
overflow: hidden;
border: 1px solid rgba(196, 154, 108, 0.22);
border-radius: 18px;
background:
linear-gradient(145deg, rgba(255, 252, 246, 0.9) 0%, rgba(248, 238, 222, 0.88) 100%);
box-shadow: 0 12px 34px rgba(139, 115, 85, 0.08);
}
.memorial-resting-place-card--with-image[b-2pzl15c73n] {
grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
}
.memorial-resting-place-content-wrap[b-2pzl15c73n] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1.25rem;
padding: 1.55rem 1.75rem;
}
.memorial-resting-place-icon[b-2pzl15c73n] {
width: 3.4rem;
height: 3.4rem;
color: #8A6549;
opacity: 0.78;
}
.memorial-resting-place-icon svg[b-2pzl15c73n] {
width: 100%;
height: 100%;
}
.memorial-resting-place-content h2[b-2pzl15c73n],
.memorial-resting-place-empty h2[b-2pzl15c73n] {
margin: 0;
font-family: var(--font-serif);
font-weight: 400;
font-size: clamp(1.45rem, 3vw, 2rem);
color: #362A20;
line-height: 1.15;
}
.memorial-resting-place-body[b-2pzl15c73n] {
margin: 0.9rem 0 0;
color: #554638;
font-family: var(--font-serif);
font-size: 1.02rem;
line-height: 1.7;
}
.memorial-resting-place-details[b-2pzl15c73n] {
margin: 0.75rem 0 0;
color: #7D6956;
font-family: var(--font-sans);
font-size: 0.92rem;
letter-spacing: 0.01em;
}
.memorial-resting-place-note[b-2pzl15c73n] {
margin: 0.9rem 0 0;
color: #765C44;
font-family: var(--font-serif);
font-style: italic;
font-size: 0.98rem;
line-height: 1.65;
}
.memorial-resting-place-link[b-2pzl15c73n] {
display: inline-block;
margin-top: 1rem;
color: #8A5B34;
font-family: var(--font-serif);
font-style: italic;
text-decoration: none;
border-bottom: 1px solid rgba(138, 91, 52, 0.28);
}
.memorial-resting-place-link:hover[b-2pzl15c73n] {
border-bottom-color: rgba(138, 91, 52, 0.58);
}
.memorial-resting-place-image[b-2pzl15c73n] {
display: block;
border: 0;
padding: 0;
min-height: 220px;
background: #E4D6BD;
cursor: zoom-in;
overflow: hidden;
}
.memorial-resting-place-image img[b-2pzl15c73n] {
width: 100%;
height: 100%;
min-height: 220px;
display: block;
object-fit: cover;
}
.memorial-resting-place-empty[b-2pzl15c73n] {
width: min(760px, 100%);
margin: 0 auto;
text-align: center;
}
.memorial-resting-place-empty h2[b-2pzl15c73n] {
margin-bottom: 1rem;
}
/* Memories Toolbar */
.memorial-toolbar[b-2pzl15c73n] {
max-width: none;
margin: 2rem 4rem 1.5rem;
padding: 0.85rem 1.2rem 0.85rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 251, 244, 0.92);
border: 1px solid rgba(232, 213, 200, 0.6);
border-radius: 50px;
box-shadow: 0 2px 10px rgba(139, 115, 85, 0.07);
position: sticky;
top: 1rem;
z-index: 10;
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.memorial-toolbar-title[b-2pzl15c73n] {
font-family: var(--font-serif);
font-size: 1.1rem;
color: #3A3228;
margin: 0;
display: flex;
align-items: center;
gap: 0.45rem;
font-weight: 500;
}
.memorial-toolbar-candle[b-2pzl15c73n] {
font-size: 0.95rem;
}
.memorial-toolbar-right[b-2pzl15c73n] {
display: flex;
align-items: center;
gap: 0.5rem;
}
.memorial-memory-count[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 0.82rem;
color: #8B7355;
}
.memorial-toolbar-icon-btn[b-2pzl15c73n] {
background: transparent;
border: 1px solid rgba(164, 123, 80, 0.2);
border-radius: 8px;
padding: 5px 8px;
cursor: pointer;
color: #8B7355;
display: flex;
align-items: center;
transition: all 0.2s;
}
.memorial-toolbar-icon-btn:hover[b-2pzl15c73n] {
background: rgba(164, 123, 80, 0.08);
border-color: rgba(164, 123, 80, 0.4);
color: #5C4033;
}
.memorial-toolbar-icon-btn--reversed svg[b-2pzl15c73n] {
transform: rotate(180deg);
}
.memorial-status-filters[b-2pzl15c73n] {
margin: -0.65rem 4rem 1.35rem;
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: wrap;
}
.memorial-status-filter[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
gap: 0.4rem;
min-height: 2.25rem;
border: 1px solid rgba(164, 123, 80, 0.18);
border-radius: 999px;
background: rgba(255, 251, 244, 0.78);
color: #6B5B4E;
padding: 0.35rem 0.78rem;
font-family: var(--font-sans);
font-size: 0.82rem;
cursor: pointer;
transition: all 0.2s ease;
}
.memorial-status-filter:hover[b-2pzl15c73n],
.memorial-status-filter--active[b-2pzl15c73n] {
background: rgba(255, 240, 226, 0.96);
border-color: rgba(172, 111, 73, 0.46);
color: #5C4033;
}
.memorial-status-filter-count[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
border-radius: 999px;
background: rgba(164, 123, 80, 0.12);
color: #6A4E3A;
font-size: 0.74rem;
font-weight: 700;
padding: 0 0.28rem;
}
/* Masonry Grid */
.memorial-masonry[b-2pzl15c73n] {
columns: 3;
column-gap: 1.6rem;
padding: 0 4rem 4rem;
max-width: none;
margin: 0;
}
.memorial-card[b-2pzl15c73n] {
break-inside: avoid;
background: #FFFCF6;
border-radius: 14px;
padding: 1.2rem 1.3rem 1rem;
margin-bottom: 1.2rem;
box-shadow: 0 2px 14px rgba(139, 115, 85, 0.07), 0 1px 3px rgba(139, 115, 85, 0.04);
border: 1px solid rgba(232, 213, 200, 0.5);
position: relative;
transition: all 0.25s ease;
}
.memorial-card:hover[b-2pzl15c73n] {
box-shadow: 0 6px 24px rgba(139, 115, 85, 0.13);
transform: translateY(-1px);
}
.memorial-card--owner[b-2pzl15c73n] {
width: 100%;
border: 1px solid rgba(232, 213, 200, 0.5);
background: #FFFCF6;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}
.memorial-card--owner:focus-visible[b-2pzl15c73n] {
outline: 2px solid rgba(164, 123, 80, 0.3);
outline-offset: 3px;
border-color: rgba(174, 132, 87, 0.58);
box-shadow: 0 7px 22px rgba(139, 115, 85, 0.16);
}
.memorial-card-owner-affordance[b-2pzl15c73n] {
position: absolute;
top: 0.7rem;
right: 0.8rem;
width: 1.7rem;
height: 1.7rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
color: rgba(106, 78, 58, 0.72);
background: rgba(255, 250, 242, 0.88);
border: 1px solid rgba(196, 154, 108, 0.24);
opacity: 0;
transform: translateY(-2px) scale(0.96);
transition: opacity 0.22s ease, transform 0.22s ease;
pointer-events: none;
}
.memorial-card--owner:hover .memorial-card-owner-affordance[b-2pzl15c73n],
.memorial-card--owner:focus-visible .memorial-card-owner-affordance[b-2pzl15c73n],
.memorial-card--owner:focus-within .memorial-card-owner-affordance[b-2pzl15c73n] {
opacity: 0.98;
transform: translateY(0) scale(1);
}
@media (hover: hover) {
.memorial-card--owner:hover[b-2pzl15c73n] {
border-color: rgba(174, 132, 87, 0.52);
box-shadow: 0 7px 22px rgba(139, 115, 85, 0.16);
transform: translateY(-1px);
}
}
@media (hover: none), (pointer: coarse) {
.memorial-card-owner-affordance[b-2pzl15c73n] {
opacity: 0.66;
transform: translateY(0);
}
}
.memorial-card-owner-strip[b-2pzl15c73n] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin: 0 2.1rem 0.75rem 0;
}
.memorial-card-status[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
min-height: 1.6rem;
border-radius: 999px;
padding: 0.24rem 0.58rem;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.memorial-card-status--pending[b-2pzl15c73n] {
background: rgba(226, 176, 63, 0.14);
color: #8A6430;
}
.memorial-card-status--published[b-2pzl15c73n] {
background: rgba(124, 151, 101, 0.14);
color: #5B7047;
}
.memorial-card-status--unpublished[b-2pzl15c73n] {
background: rgba(136, 116, 97, 0.13);
color: #6D5B4A;
}
.memorial-card-status--rejected[b-2pzl15c73n] {
background: rgba(153, 93, 64, 0.12);
color: #87523E;
}
.memorial-card-action[b-2pzl15c73n] {
border: 1px solid rgba(171, 120, 78, 0.24);
border-radius: 999px;
background: rgba(255, 252, 246, 0.9);
color: #5D4131;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 700;
min-height: 1.8rem;
padding: 0.25rem 0.62rem;
cursor: pointer;
transition: all 0.2s ease;
}
.memorial-card-action:hover:not(:disabled)[b-2pzl15c73n],
.memorial-card-action:focus-visible[b-2pzl15c73n] {
background: #FFF2E7;
border-color: rgba(171, 120, 78, 0.42);
outline: none;
}
.memorial-card-action:disabled[b-2pzl15c73n] {
opacity: 0.62;
cursor: wait;
}
.memorial-card--status-unpublished[b-2pzl15c73n] {
border-left: 3px solid rgba(136, 116, 97, 0.34);
}
.memorial-card--status-rejected[b-2pzl15c73n] {
border-left: 3px solid rgba(153, 93, 64, 0.28);
}
.memorial-card--status-pending[b-2pzl15c73n] {
border-left: 3px solid rgba(226, 176, 63, 0.34);
}
.memorial-card-candle[b-2pzl15c73n] {
display: block;
font-size: 0.95rem;
margin-bottom: 0.5rem;
line-height: 1;
}
.memorial-card-title[b-2pzl15c73n] {
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
color: #2E2318;
margin: 0 0 0.5rem;
line-height: 1.3;
}
.memorial-card-image-button[b-2pzl15c73n] {
display: block;
width: 100%;
padding: 0;
margin: 0 0 0.85rem;
border: none;
background: transparent;
cursor: pointer;
}
.memorial-card-image[b-2pzl15c73n] {
display: block;
width: 100%;
max-height: 340px;
object-fit: cover;
border-radius: 12px;
box-shadow: 0 8px 20px rgba(139, 115, 85, 0.12);
}
.memorial-card-content[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 0.88rem;
line-height: 1.7;
color: #4A3D35;
margin: 0 0 0.9rem;
}
.memorial-card-footer[b-2pzl15c73n] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.75rem;
border-top: 1px solid rgba(232, 213, 200, 0.3);
padding-top: 0.6rem;
}
.memorial-card-footer-left[b-2pzl15c73n] {
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.memorial-card-author[b-2pzl15c73n] {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.83rem;
color: #6B5B4E;
}
.memorial-card-date[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 0.75rem;
color: #A89880;
margin-left: auto;
}
.memorial-card-report[b-2pzl15c73n] {
flex-shrink: 0;
border: none;
background: transparent;
color: #A89880;
cursor: pointer;
font-family: var(--font-sans);
font-size: 0.75rem;
line-height: 1.2;
padding: 0.1rem 0;
}
.memorial-card-report:hover[b-2pzl15c73n] {
color: #6B5B4E;
}
/* Empty State — Ghost / Skeleton Placeholder Cards */
.memorial-empty-state[b-2pzl15c73n] {
position: relative;
padding: 0 4rem 4rem;
}
.memorial-empty-state--quiet[b-2pzl15c73n] {
min-height: 16rem;
padding-top: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
}
.memorial-ghost-grid[b-2pzl15c73n] {
columns: 3;
column-gap: 1.4rem;
}
.memorial-ghost-card[b-2pzl15c73n] {
break-inside: avoid;
background: rgba(253, 248, 240, 0.7);
border: 1px solid rgba(196, 154, 108, 0.14);
border-radius: 14px;
padding: 1.4rem 1.3rem 1.2rem;
margin-bottom: 1.4rem;
pointer-events: none;
opacity: 0.55;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.memorial-ghost-card--tall[b-2pzl15c73n] {
/* No extra markup needed — more ghost-line bars supply height */
}
.memorial-ghost-card--lower[b-2pzl15c73n] {
margin-top: 2rem;
}
/* Generic shimmer bar */
.ghost-bar[b-2pzl15c73n] {
display: block;
border-radius: 5px;
background: linear-gradient(
90deg,
rgba(196, 154, 108, 0.13) 25%,
rgba(196, 154, 108, 0.26) 50%,
rgba(196, 154, 108, 0.13) 75%
);
background-size: 200% 100%;
animation: shimmer-b-2pzl15c73n 2.2s ease-in-out infinite;
}
@keyframes shimmer-b-2pzl15c73n {
0% { background-position: 200% center; }
100% { background-position: -200% center; }
}
/* Icon placeholder row */
.ghost-icon-row[b-2pzl15c73n] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.ghost-icon[b-2pzl15c73n] {
width: 22px;
height: 22px;
border-radius: 50%;
flex-shrink: 0;
}
.ghost-title[b-2pzl15c73n] {
height: 16px;
width: 60%;
}
.ghost-title--short[b-2pzl15c73n] {
width: 42%;
}
/* Body lines */
.ghost-line[b-2pzl15c73n] {
height: 11px;
width: 100%;
margin-bottom: 0.4rem;
}
.ghost-line--medium[b-2pzl15c73n] {
width: 78%;
}
.ghost-line--short[b-2pzl15c73n] {
width: 52%;
margin-bottom: 0;
}
/* Footer divider + meta */
.ghost-footer[b-2pzl15c73n] {
margin-top: 0.9rem;
padding-top: 0.7rem;
border-top: 1px solid rgba(196, 154, 108, 0.18);
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.ghost-author[b-2pzl15c73n] {
height: 10px;
width: 44%;
}
.ghost-date[b-2pzl15c73n] {
height: 9px;
width: 28%;
}
/* Overlay — invite message floats above ghost cards */
.memorial-empty-overlay[b-2pzl15c73n] {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: radial-gradient(
ellipse 60% 45% at 50% 52%,
rgba(253, 244, 231, 0.93) 30%,
rgba(253, 244, 231, 0.55) 65%,
transparent 100%
);
pointer-events: none;
}
.memorial-empty-overlay--standalone[b-2pzl15c73n] {
position: relative;
inset: auto;
min-height: 11rem;
width: min(100%, 28rem);
background: radial-gradient(
ellipse 62% 52% at 50% 50%,
rgba(253, 244, 231, 0.72) 0%,
rgba(253, 244, 231, 0.34) 56%,
transparent 100%
);
}
.memorial-empty-candle[b-2pzl15c73n] {
font-size: 2.6rem;
margin: 0 0 0.55rem;
animation: candleGlow-b-2pzl15c73n 3s ease-in-out infinite;
filter: drop-shadow(0 0 8px rgba(196, 154, 108, 0.35));
}
.memorial-empty-invite[b-2pzl15c73n] {
font-family: var(--font-serif);
font-size: 1.25rem;
font-style: italic;
color: #7A6652;
text-align: center;
max-width: 240px;
line-height: 1.55;
margin: 0;
}
@keyframes candleGlow-b-2pzl15c73n {
0%, 100% { filter: drop-shadow(0 0 8px rgba(196, 154, 108, 0.3)); }
50% { filter: drop-shadow(0 0 18px rgba(196, 154, 108, 0.55)); }
}
/* Bottom CTA — fixed frosted footer pinned to bottom of viewport */
.memorial-bottom-cta[b-2pzl15c73n] {
position: fixed;
bottom: 0;
right: 0;
/* left: driven by Blazor inline style — tracks sidebar open/closed state */
opacity: 1;
transform: translateY(0);
transition:
left 0.3s ease,
opacity 220ms ease,
transform 220ms cubic-bezier(0.22, 1, 0.36, 1); /* matches sidebar slide animation */
text-align: center;
padding: 1rem 1.2rem 1.3rem;
background: linear-gradient(180deg, transparent 0%, rgba(250, 243, 229, 0.75) 25%, rgba(250, 243, 229, 0.97) 100%);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
z-index: 20;
pointer-events: none; /* let clicks through the transparent top part */
}
.memorial-bottom-cta .memorial-cta-button[b-2pzl15c73n] {
pointer-events: all;
max-width: min(100%, 340px);
padding: 0.62rem 1rem;
font-size: 0.9rem;
line-height: 1.15;
gap: 0.35rem;
}
.memorial-bottom-cta .cta-candle-icon[b-2pzl15c73n] {
width: 34px;
height: 34px;
}
.memorial-bottom-cta--transitioning[b-2pzl15c73n] {
pointer-events: none;
}
.memorial-bottom-cta--transitioning .memorial-cta-button[b-2pzl15c73n] {
pointer-events: none;
}
.memorial-bottom-cta--transition-out[b-2pzl15c73n] {
opacity: 0.2;
transform: translateY(6px);
}
.memorial-bottom-cta--transition-in[b-2pzl15c73n] {
opacity: 1;
transform: translateY(0);
}
/* The button — warm candlewax hybrid: tactile paper feel + golden glow affordance */
.memorial-cta-button[b-2pzl15c73n] {
/* Warm candle-wax gradient — like stearin lit from within */
background: linear-gradient(145deg, #FDF3E4 0%, #F5E4C8 35%, #ECDAB5 70%, #E6CFA5 100%);
color: #5A3E2B;
border: none;
border-radius: 50px;
padding: 1rem 2.4rem;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.03em;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.6rem;
position: relative;
/* Outer glow — soft candlelight halo */
box-shadow:
0 2px 12px rgba(210, 160, 90, 0.25),
0 4px 24px rgba(210, 160, 90, 0.12),
0 1px 0 rgba(255, 255, 255, 0.5) inset;
/* Inner stitched border — tactile parchment feel */
outline: 1.5px dashed rgba(180, 140, 90, 0.3);
outline-offset: -6px;
transition: all 0.35s ease;
}
/* Hover: "the candle lights up" — glow intensifies, button lifts */
.memorial-cta-button:hover[b-2pzl15c73n] {
background: linear-gradient(145deg, #FFF8EE 0%, #FAE9CC 35%, #F2DEBA 70%, #EBD4A8 100%);
transform: translateY(-2px);
box-shadow:
0 4px 20px rgba(220, 165, 70, 0.4),
0 8px 40px rgba(210, 155, 60, 0.2),
0 1px 0 rgba(255, 255, 255, 0.6) inset;
outline-color: rgba(180, 140, 90, 0.45);
}
/* Active press — settle into the parchment */
.memorial-cta-button:active[b-2pzl15c73n] {
transform: translateY(0px);
box-shadow:
0 1px 6px rgba(210, 160, 90, 0.2),
0 1px 0 rgba(255, 255, 255, 0.4) inset;
}
/* Inline variant inside empty state overlay */
.memorial-cta-button--inline[b-2pzl15c73n] {
margin-top: 1.4rem;
font-size: 1.1rem;
padding: 1.05rem 2.6rem;
}
/* Candle PNG icon in CTA button */
.cta-candle-icon[b-2pzl15c73n] {
width: 48px;
height: 48px;
flex-shrink: 0;
animation: candleFlicker-b-2pzl15c73n 3.2s ease-in-out infinite;
transform-origin: center bottom;
filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.4));
}
@keyframes candleFlicker-b-2pzl15c73n {
0%, 100% { transform: scale(1) rotate(-0.5deg); filter: drop-shadow(0 0 4px rgba(255, 200, 100, 0.3)); }
40% { transform: scale(1.06) rotate(0.5deg); filter: drop-shadow(0 0 8px rgba(255, 200, 100, 0.6)); }
70% { transform: scale(0.97) rotate(0deg); filter: drop-shadow(0 0 3px rgba(255, 200, 100, 0.25)); }
}
/* Legacy: keep .cta-flame for other pages if referenced */
.cta-flame[b-2pzl15c73n] {
display: inline-block;
animation: candleFlicker-b-2pzl15c73n 3.2s ease-in-out infinite;
transform-origin: center bottom;
}
/* Sidebar Overlay */
.sidebar-overlay[b-2pzl15c73n] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.3);
z-index: 90;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-2pzl15c73n] {
opacity: 0;
pointer-events: none;
}
/* Responsive */
@media (min-width: 1600px) {
.memorial-hero-inner[b-2pzl15c73n] {
max-width: 1100px;
}
.memorial-portrait-container[b-2pzl15c73n] {
max-width: 720px;
}
.memorial-name[b-2pzl15c73n] {
font-size: 5em;
}
.memorial-masonry[b-2pzl15c73n] {
columns: 4;
padding: 0 5rem 4rem;
}
.memorial-toolbar[b-2pzl15c73n] {
margin: 2rem 5rem 1.5rem;
}
.memorial-status-filters[b-2pzl15c73n] {
margin: -0.65rem 5rem 1.35rem;
}
.memorial-owner-bar[b-2pzl15c73n] {
margin: 1.5rem 5rem 0;
}
.memorial-resting-place-section[b-2pzl15c73n] {
padding-left: 5rem;
padding-right: 5rem;
}
.memorial-service-section[b-2pzl15c73n] {
padding-left: 5rem;
padding-right: 5rem;
}
}
@media (max-width: 1024px) {
.memorial-masonry[b-2pzl15c73n] {
columns: 2;
padding: 0 1.5rem 2rem;
}
.memorial-toolbar[b-2pzl15c73n] {
margin: 1.5rem 1.5rem 1.2rem;
}
.memorial-status-filters[b-2pzl15c73n] {
margin: -0.5rem 1.5rem 1.2rem;
}
.memorial-owner-bar[b-2pzl15c73n] {
margin: 1.2rem 1.5rem 0;
}
.memorial-resting-place-section[b-2pzl15c73n] {
padding: 1rem 1.5rem 7rem;
}
.memorial-service-section[b-2pzl15c73n] {
padding: 1rem 1.5rem 2rem;
}
.memorial-service-card[b-2pzl15c73n],
.memorial-service-card--text-only[b-2pzl15c73n] {
grid-template-columns: 1fr;
}
.memorial-service-image[b-2pzl15c73n],
.memorial-service-image img[b-2pzl15c73n] {
min-height: 300px;
}
.memorial-resting-place-card--with-image[b-2pzl15c73n] {
grid-template-columns: 1fr;
}
.memorial-hero[b-2pzl15c73n] {
padding: 3rem 2rem 0;
}
.memorial-hero-inner[b-2pzl15c73n] {
max-width: 720px;
}
.memorial-portrait-container[b-2pzl15c73n] {
max-width: 420px;
}
.memorial-name[b-2pzl15c73n] {
font-size: 2.8em;
}
.sidebar[b-2pzl15c73n] {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
z-index: 100;
}
.sidebar.visible[b-2pzl15c73n] {
transform: translateX(0);
}
.memorial-main[b-2pzl15c73n] {
margin-left: 0;
margin-top: 60px;
}
.memorial-bottom-cta[b-2pzl15c73n] {
left: 0 !important;
}
}
@media (max-width: 992px) {
.memorial-sidebar-owner-tools.has-user-footer[b-2pzl15c73n] {
padding-bottom: 1rem;
}
}
@media (max-width: 768px) {
.memorial-masonry[b-2pzl15c73n] {
columns: 1;
padding: 0 1rem 1.5rem;
}
.memorial-name[b-2pzl15c73n] {
font-size: 2em;
}
.memorial-conversation-invite[b-2pzl15c73n] {
width: min(100%, 320px);
padding: 0.85rem 1.35rem;
font-size: 0.96rem;
}
.memorial-hero[b-2pzl15c73n] {
padding: 2rem 1rem 0;
}
.memorial-hero-inner[b-2pzl15c73n] {
max-width: 100%;
}
.memorial-portrait-container[b-2pzl15c73n] {
max-width: 320px;
}
.memorial-toolbar[b-2pzl15c73n] {
margin: 1rem 1rem 1rem;
border-radius: 16px;
position: static;
}
.memorial-status-filters[b-2pzl15c73n] {
margin: -0.35rem 1rem 1rem;
}
.memorial-card-owner-strip[b-2pzl15c73n] {
align-items: flex-start;
flex-direction: column;
margin-right: 2rem;
}
.memorial-owner-bar[b-2pzl15c73n] {
margin: 0.75rem 1rem 0;
}
.memorial-tribute-prologue[b-2pzl15c73n] {
padding: 3.5rem 1rem 2.25rem;
}
.memorial-section-heading-row[b-2pzl15c73n],
.memorial-section-heading-row--centered[b-2pzl15c73n] {
flex-direction: column;
align-items: center;
}
.memorial-section-heading-row--centered .memorial-section-edit-link[b-2pzl15c73n] {
position: static;
}
.memorial-tribute-actions[b-2pzl15c73n] {
justify-content: center;
margin-bottom: 0.65rem;
}
.memorial-tapestry-edit-link[b-2pzl15c73n] {
position: static;
margin: 0 auto -1rem;
}
.memorial-tapestry-edit-link--desktop[b-2pzl15c73n] {
display: none;
}
.memorial-section-edit-link.memorial-tapestry-edit-link--mobile[b-2pzl15c73n] {
display: inline-flex;
margin: 0;
}
.memorial-tribute-title[b-2pzl15c73n] {
margin-bottom: 1rem;
}
.memorial-tribute-text[b-2pzl15c73n] {
font-size: 1.02rem;
line-height: 1.78;
}
.memorial-tribute-text--collapsed[b-2pzl15c73n] {
max-height: 300px;
}
.memorial-service-section[b-2pzl15c73n] {
padding: 0.5rem 1rem 1.5rem;
}
.memorial-service-card[b-2pzl15c73n] {
border-radius: 16px;
}
.memorial-service-content[b-2pzl15c73n] {
padding: 1.35rem 1.15rem 1.45rem;
}
.memorial-service-image[b-2pzl15c73n],
.memorial-service-image img[b-2pzl15c73n] {
min-height: 240px;
}
.memorial-service-content .memorial-section-heading-row[b-2pzl15c73n] {
align-items: flex-start;
text-align: left;
}
.memorial-service-program li[b-2pzl15c73n] {
text-align: left;
}
.memorial-service-program-copy[b-2pzl15c73n] {
align-items: flex-start;
flex-direction: column;
gap: 0.3rem;
}
.memorial-program-reader-overlay[b-2pzl15c73n] {
align-items: stretch;
padding: 0;
}
.memorial-program-reader[b-2pzl15c73n] {
width: 100%;
max-height: none;
min-height: 100dvh;
border-radius: 0;
}
.memorial-program-reader-header[b-2pzl15c73n] {
padding-top: calc(1.15rem + env(safe-area-inset-top));
}
.memorial-resting-place-section[b-2pzl15c73n] {
padding: 0.5rem 1rem 7rem;
}
.memorial-resting-place-card[b-2pzl15c73n] {
grid-template-columns: 1fr;
text-align: center;
padding: 0;
}
.memorial-resting-place-content-wrap[b-2pzl15c73n] {
grid-template-columns: 1fr;
padding: 1.35rem 1.15rem;
}
.memorial-resting-place-icon[b-2pzl15c73n] {
margin: 0 auto;
}
.memorial-resting-place-image[b-2pzl15c73n],
.memorial-resting-place-image img[b-2pzl15c73n] {
min-height: 210px;
}
.memorial-resting-place-body[b-2pzl15c73n] {
font-size: 0.98rem;
}
.memorial-owner-actions[b-2pzl15c73n] {
flex-direction: column;
align-items: stretch;
}
[b-2pzl15c73n] .toggle-sidebar {
display: none;
}
.memorial-collapsed-back-link[b-2pzl15c73n] {
display: none;
}
}
@media (max-width: 480px) {
.memorial-name[b-2pzl15c73n] {
font-size: 1.7em;
}
.memorial-portrait-container[b-2pzl15c73n] {
max-width: 260px;
}
}
@media (prefers-reduced-motion: reduce) {
.memorial-room-canvas[b-2pzl15c73n],
.memorial-room-veil[b-2pzl15c73n],
.memorial-bottom-cta[b-2pzl15c73n] {
transition-duration: 120ms;
}
.memorial-room-stage--transition-out .memorial-room-canvas[b-2pzl15c73n],
.memorial-room-stage--transition-in .memorial-room-canvas[b-2pzl15c73n],
.memorial-bottom-cta--transition-out[b-2pzl15c73n],
.memorial-bottom-cta--transition-in[b-2pzl15c73n] {
transform: none;
}
.memorial-room-stage--transition-out .memorial-room-canvas[b-2pzl15c73n] {
opacity: 0.45;
}
.memorial-room-stage--transition-out .memorial-room-veil[b-2pzl15c73n] {
opacity: 0.08;
}
.memorial-room-stage--transition-in .memorial-room-veil[b-2pzl15c73n] {
opacity: 0.02;
}
}
/* Custom Scrollbar */
.memorial-main[b-2pzl15c73n]::-webkit-scrollbar {
width: 6px;
}
.memorial-main[b-2pzl15c73n]::-webkit-scrollbar-track {
background: transparent;
}
.memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb {
background: rgba(196, 154, 108, 0.3);
border-radius: 3px;
}
.memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb:hover {
background: rgba(196, 154, 108, 0.5);
}
/* ================ Night Mode ================ */
body.night-mode .app-layout[b-2pzl15c73n] {
background: #1A2A32;
}
body.night-mode .memorial-hero[b-2pzl15c73n] {
background: linear-gradient(180deg, #1A2A32 0%, #223038 100%);
}
body.night-mode .memorial-hero[b-2pzl15c73n]::after {
background: linear-gradient(180deg, transparent, #1A2A32);
}
body.night-mode .memorial-conversation-invite[b-2pzl15c73n] {
background: linear-gradient(145deg, rgba(120, 92, 56, 0.82) 0%, rgba(96, 74, 47, 0.92) 100%);
border-color: rgba(230, 198, 152, 0.24);
color: #F9E8CC;
box-shadow:
0 10px 30px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
body.night-mode .memorial-conversation-invite:hover[b-2pzl15c73n] {
background: linear-gradient(145deg, rgba(132, 101, 61, 0.88) 0%, rgba(104, 80, 52, 0.96) 100%);
}
body.night-mode .memorial-room-veil[b-2pzl15c73n] {
background:
radial-gradient(ellipse 72% 48% at 50% 14%, rgba(208, 176, 126, 0.08) 0%, transparent 68%),
linear-gradient(180deg, rgba(19, 24, 30, 0.04) 0%, rgba(73, 57, 38, 0.18) 48%, rgba(16, 20, 26, 0.07) 100%);
}
body.night-mode .memorial-avatar[b-2pzl15c73n] {
border-color: rgba(196, 154, 108, 0.25);
box-shadow: 0 0 40px rgba(196, 154, 108, 0.15), 0 4px 24px rgba(0, 0, 0, 0.3);
}
/* Ateljé wrapper */
.memorial-atelier-backdrop[b-2pzl15c73n] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
animation: atelierOverlayIn-b-2pzl15c73n 0.25s ease-out;
}
@keyframes atelierOverlayIn-b-2pzl15c73n {
from { opacity: 0; }
to { opacity: 1; }
}
.memorial-atelier-wrapper[b-2pzl15c73n] {
background: linear-gradient(170deg, #fdfaf5 0%, #faf6f0 40%, #f5efe6 100%);
border-radius: 20px;
border: 1px solid rgba(196, 154, 108, 0.15);
padding: 24px;
max-width: 480px;
width: 94%;
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.6);
animation: atelierContentIn-b-2pzl15c73n 0.3s ease-out;
}
@keyframes atelierContentIn-b-2pzl15c73n {
from { opacity: 0; transform: translateY(12px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.memorial-verified-modal-overlay[b-2pzl15c73n] {
position: fixed;
inset: 0;
z-index: 2200;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 4vw, 2rem);
background: rgba(42, 32, 24, 0.46);
-webkit-backdrop-filter: blur(10px) saturate(108%);
backdrop-filter: blur(10px) saturate(108%);
}
.memorial-verified-modal[b-2pzl15c73n] {
position: relative;
width: min(92vw, 480px);
border-radius: 18px;
background:
radial-gradient(circle at 50% 0%, rgba(255, 237, 211, 0.72), transparent 52%),
linear-gradient(180deg, rgba(255, 252, 246, 0.98), rgba(252, 241, 225, 0.98));
color: #3A3228;
padding: clamp(2rem, 5vw, 2.65rem) clamp(1.35rem, 5vw, 2.45rem) clamp(1.55rem, 4vw, 2.15rem);
text-align: center;
border: 1px solid rgba(182, 137, 91, 0.2);
box-shadow: 0 24px 70px rgba(55, 39, 27, 0.24), 0 1px 0 rgba(255, 255, 255, 0.8) inset;
overflow: hidden;
}
.memorial-verified-modal[b-2pzl15c73n]::before {
content: "";
position: absolute;
inset: 0.65rem;
border: 1px solid rgba(196, 154, 108, 0.14);
border-radius: 14px;
pointer-events: none;
}
.memorial-verified-close[b-2pzl15c73n] {
position: absolute;
top: 0.85rem;
right: 0.85rem;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.15rem;
height: 2.15rem;
border: none;
border-radius: 999px;
background: transparent;
color: rgba(83, 64, 49, 0.68);
cursor: pointer;
transition: all 0.3s ease;
}
.memorial-verified-close:hover[b-2pzl15c73n],
.memorial-verified-close:focus-visible[b-2pzl15c73n] {
background: rgba(164, 123, 80, 0.1);
color: #5C4033;
outline: none;
}
.memorial-verified-icon[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 1rem;
border-radius: 999px;
color: #9D744C;
background: rgba(255, 247, 235, 0.9);
box-shadow: 0 0 0 1px rgba(196, 154, 108, 0.18), 0 10px 28px rgba(142, 98, 55, 0.12);
}
.memorial-verified-icon svg[b-2pzl15c73n] {
width: 2.55rem;
height: 2.55rem;
}
.memorial-verified-modal h2[b-2pzl15c73n] {
font-family: var(--font-serif);
font-size: clamp(1.45rem, 4vw, 1.85rem);
font-weight: 600;
line-height: 1.12;
color: #33291F;
margin: 0 0 0.85rem;
}
.memorial-verified-modal p[b-2pzl15c73n] {
font-family: var(--font-sans);
font-size: 0.98rem;
line-height: 1.7;
color: #665445;
margin: 0 auto 1.5rem;
max-width: 34ch;
}
.memorial-verified-modal .memorial-verified-invitation[b-2pzl15c73n] {
font-size: 0.94rem;
font-style: italic;
color: #7A6655;
margin-bottom: 0.8rem;
}
.memorial-verified-cta[b-2pzl15c73n] {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.75rem;
margin-top: 0.65rem;
border-radius: 999px;
background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
color: #4A3122;
padding: 0.72rem 1.25rem;
font-family: var(--font-sans);
font-size: 0.94rem;
font-weight: 650;
text-decoration: none;
border: 1px solid rgba(144, 91, 50, 0.18);
box-shadow: 0 10px 24px rgba(144, 91, 50, 0.16);
transition: all 0.3s ease;
}
.memorial-verified-cta:hover[b-2pzl15c73n],
.memorial-verified-cta:focus-visible[b-2pzl15c73n] {
color: #3E291E;
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(144, 91, 50, 0.2);
outline: none;
}
@media (max-width: 540px) {
.memorial-verified-modal-overlay[b-2pzl15c73n] {
align-items: flex-end;
padding: 0.85rem;
}
.memorial-verified-modal[b-2pzl15c73n] {
width: 100%;
max-height: calc(100vh - 1.7rem);
overflow-y: auto;
}
.memorial-verified-cta[b-2pzl15c73n] {
width: 100%;
}
}
body.night-mode .memorial-name[b-2pzl15c73n] {
color: #E8F4F8;
}
body.night-mode .memorial-dates[b-2pzl15c73n] {
color: #A0B4BC;
}
body.night-mode .memorial-tagline[b-2pzl15c73n] {
color: #B0C4CC;
}
body.night-mode .memorial-portrait-prompt[b-2pzl15c73n] {
border-color: rgba(216, 180, 124, 0.35);
background: rgba(45, 59, 68, 0.72);
color: #E8DDD0;
}
body.night-mode .memorial-portrait-prompt-icon[b-2pzl15c73n] {
background: rgba(216, 180, 124, 0.18);
color: #F4D6A5;
}
body.night-mode .memorial-portrait-prompt-kicker[b-2pzl15c73n] {
color: #F0C98F;
}
body.night-mode .memorial-portrait-prompt h2[b-2pzl15c73n] {
color: #E8DDD0;
}
body.night-mode .memorial-portrait-prompt p:last-child[b-2pzl15c73n] {
color: #CFC0AF;
}
body.night-mode .memorial-tribute-prologue[b-2pzl15c73n],
body.night-mode .memorial-service-section[b-2pzl15c73n],
body.night-mode .memorial-resting-place-section[b-2pzl15c73n] {
background: #1A2A32;
}
body.night-mode .memorial-tribute-title[b-2pzl15c73n],
body.night-mode .memorial-service-content h2[b-2pzl15c73n],
body.night-mode .memorial-service-empty h2[b-2pzl15c73n],
body.night-mode .memorial-resting-place-content h2[b-2pzl15c73n],
body.night-mode .memorial-resting-place-empty h2[b-2pzl15c73n] {
color: #E8DDD0;
}
body.night-mode .memorial-tribute-text[b-2pzl15c73n],
body.night-mode .memorial-service-body[b-2pzl15c73n],
body.night-mode .memorial-resting-place-body[b-2pzl15c73n] {
color: #CFC0AF;
}
body.night-mode .memorial-tribute-read-more[b-2pzl15c73n] {
border-color: rgba(216, 180, 124, 0.34);
background: rgba(72, 50, 32, 0.62);
color: rgba(246, 221, 185, 0.94);
}
body.night-mode .memorial-tribute-read-more:hover[b-2pzl15c73n],
body.night-mode .memorial-tribute-read-more:focus-visible[b-2pzl15c73n] {
background: rgba(88, 60, 36, 0.78);
border-color: rgba(216, 180, 124, 0.56);
}
body.night-mode .memorial-tribute-text--collapsed[b-2pzl15c73n]::after {
background: linear-gradient(to bottom, rgba(26, 42, 50, 0), #1A2A32);
}
body.night-mode .memorial-resting-place-card[b-2pzl15c73n],
body.night-mode .memorial-service-card[b-2pzl15c73n],
body.night-mode .memorial-owner-empty-section .memorial-tribute-inner[b-2pzl15c73n],
body.night-mode .memorial-service-empty[b-2pzl15c73n],
body.night-mode .memorial-resting-place-empty[b-2pzl15c73n] {
background: rgba(36, 47, 54, 0.74);
border-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .memorial-section-edit-link[b-2pzl15c73n],
body.night-mode .memorial-empty-section-button[b-2pzl15c73n] {
background: rgba(40, 48, 52, 0.72);
border-color: rgba(196, 154, 108, 0.22);
color: #D7B98A;
}
body.night-mode .memorial-resting-place-details[b-2pzl15c73n],
body.night-mode .memorial-service-meta[b-2pzl15c73n],
body.night-mode .memorial-service-program li[b-2pzl15c73n],
body.night-mode .memorial-resting-place-note[b-2pzl15c73n] {
color: #B5A18D;
}
body.night-mode .memorial-service-subtitle[b-2pzl15c73n],
body.night-mode .memorial-service-program-kind[b-2pzl15c73n] {
color: #D7B98A;
}
body.night-mode .memorial-service-program-read[b-2pzl15c73n] {
color: #D7B98A;
border-color: rgba(216, 180, 124, 0.32);
}
body.night-mode .memorial-service-program-read:hover[b-2pzl15c73n],
body.night-mode .memorial-service-program-read:focus-visible[b-2pzl15c73n] {
color: #F9E8CC;
border-color: rgba(249, 232, 204, 0.56);
}
body.night-mode .memorial-program-reader[b-2pzl15c73n] {
background:
radial-gradient(900px 420px at 50% -12%, rgba(230, 198, 152, 0.12), transparent 62%),
linear-gradient(180deg, #26343C 0%, #1F2C34 100%);
border-color: rgba(216, 180, 124, 0.24);
box-shadow:
0 28px 80px rgba(0, 0, 0, 0.42),
inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
body.night-mode .memorial-program-reader h2[b-2pzl15c73n],
body.night-mode .memorial-program-reader-body[b-2pzl15c73n] {
color: #F5E8D8;
}
body.night-mode .memorial-program-reader-kicker[b-2pzl15c73n],
body.night-mode .memorial-program-reader-meta[b-2pzl15c73n] {
color: #D7B98A;
}
body.night-mode .memorial-program-reader-close[b-2pzl15c73n] {
background: rgba(34, 46, 53, 0.86);
color: #F9E8CC;
border-color: rgba(230, 198, 152, 0.24);
}
body.night-mode .memorial-resting-place-link[b-2pzl15c73n] {
color: #D7B98A;
}
body.night-mode .memorial-toolbar-title[b-2pzl15c73n] {
color: #E8F4F8;
}
body.night-mode .memorial-memory-count[b-2pzl15c73n] {
color: #A0B4BC;
}
body.night-mode .memorial-status-filter[b-2pzl15c73n] {
background: rgba(40, 48, 52, 0.72);
border-color: rgba(196, 154, 108, 0.18);
color: #CFD8DC;
}
body.night-mode .memorial-status-filter:hover[b-2pzl15c73n],
body.night-mode .memorial-status-filter--active[b-2pzl15c73n] {
background: rgba(72, 50, 32, 0.62);
border-color: rgba(216, 180, 124, 0.36);
color: #F9E8CC;
}
body.night-mode .memorial-status-filter-count[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.16);
color: #F9E8CC;
}
body.night-mode .memorial-card[b-2pzl15c73n] {
background: #2D3B44;
border-color: rgba(196, 154, 108, 0.15);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
body.night-mode .memorial-card:hover[b-2pzl15c73n] {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
border-left-color: rgba(196, 154, 108, 0.35);
}
body.night-mode .memorial-card--owner:focus-visible[b-2pzl15c73n] {
outline-color: rgba(196, 154, 108, 0.42);
border-color: rgba(196, 154, 108, 0.36);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
}
body.night-mode .memorial-card-owner-affordance[b-2pzl15c73n] {
color: #DCC8B6;
background: rgba(47, 59, 66, 0.92);
border-color: rgba(196, 154, 108, 0.26);
}
body.night-mode .memorial-card-status--pending[b-2pzl15c73n] {
background: rgba(226, 176, 63, 0.18);
color: #E7C174;
}
body.night-mode .memorial-card-status--published[b-2pzl15c73n] {
background: rgba(124, 151, 101, 0.18);
color: #C3D7B0;
}
body.night-mode .memorial-card-status--unpublished[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.14);
color: #DCC8B6;
}
body.night-mode .memorial-card-status--rejected[b-2pzl15c73n] {
background: rgba(153, 93, 64, 0.18);
color: #F0C2AB;
}
body.night-mode .memorial-card-action[b-2pzl15c73n] {
background: rgba(34, 46, 53, 0.86);
color: #F9E8CC;
border-color: rgba(230, 198, 152, 0.24);
}
body.night-mode .memorial-card-image[b-2pzl15c73n] {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
}
body.night-mode .memorial-card-content[b-2pzl15c73n] {
color: #E8F4F8;
}
body.night-mode .memorial-card-footer[b-2pzl15c73n] {
border-top-color: rgba(196, 154, 108, 0.12);
}
body.night-mode .memorial-card-author[b-2pzl15c73n] {
color: #CFD8DC;
}
body.night-mode .memorial-card-relation[b-2pzl15c73n] {
color: #A0B4BC;
}
body.night-mode .memorial-card-date[b-2pzl15c73n] {
color: #7A9AA8;
}
body.night-mode .memorial-cta-button[b-2pzl15c73n] {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
body.night-mode .memorial-bottom-cta[b-2pzl15c73n] {
background: linear-gradient(180deg, transparent, #1A2A32 40%);
}
/* Sidebar - Night Mode */
body.night-mode .sidebar[b-2pzl15c73n] {
background: #1E2E36;
border-right-color: rgba(196, 154, 108, 0.12);
}
body.night-mode .memorial-sidebar-back-link[b-2pzl15c73n] {
background: rgba(34, 46, 53, 0.56);
border-color: rgba(230, 198, 152, 0.16);
color: rgba(249, 232, 204, 0.76);
}
body.night-mode .memorial-sidebar-back-link:hover[b-2pzl15c73n],
body.night-mode .memorial-sidebar-back-link:focus-visible[b-2pzl15c73n] {
background: rgba(34, 46, 53, 0.9);
border-color: rgba(230, 198, 152, 0.28);
color: #F9E8CC;
}
body.night-mode .memorial-sidebar-name[b-2pzl15c73n] {
color: #E8F4F8;
}
body.night-mode .memorial-sidebar-dates[b-2pzl15c73n] {
color: #A0B4BC;
}
body.night-mode .memorial-sidebar-tagline[b-2pzl15c73n] {
color: #B0C4CC;
}
body.night-mode .memorial-sidebar-avatar[b-2pzl15c73n] {
border-color: rgba(196, 154, 108, 0.2);
box-shadow: 0 0 30px rgba(196, 154, 108, 0.12), 0 4px 20px rgba(0, 0, 0, 0.25);
}
body.night-mode .memorial-sidebar-owner-btn[b-2pzl15c73n] {
background: rgba(37, 52, 60, 0.92);
border-color: rgba(196, 154, 108, 0.18);
color: #E8F4F8;
}
body.night-mode .memorial-sidebar-owner-btn:hover[b-2pzl15c73n] {
background: rgba(43, 59, 68, 0.97);
border-color: rgba(196, 154, 108, 0.32);
}
body.night-mode .memorial-sidebar-pending[b-2pzl15c73n] {
background: rgba(37, 52, 60, 0.92);
border-color: rgba(196, 154, 108, 0.18);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
body.night-mode .memorial-sidebar-pending-text[b-2pzl15c73n] {
color: #CFD8DC;
}
body.night-mode .memorial-sidebar-pending-btn[b-2pzl15c73n] {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}
/* Pending Banner - Night Mode */
body.night-mode .memorial-pending-banner[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.1);
border-color: rgba(196, 154, 108, 0.2);
color: #CFD8DC;
}
/* Owner Bar - Night Mode */
body.night-mode .memorial-settings-btn[b-2pzl15c73n] {
color: #CFD8DC;
border-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .memorial-settings-btn:hover[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.1);
}
/* Loading & Not Found - Night Mode */
body.night-mode .memorial-loading[b-2pzl15c73n] {
background: #1A2A32;
}
body.night-mode .loading-spinner[b-2pzl15c73n] {
border-color: rgba(196, 154, 108, 0.15);
border-top-color: #C49A6C;
}
body.night-mode .memorial-not-found[b-2pzl15c73n] {
background: #1A2A32;
}
body.night-mode .not-found-inner h1[b-2pzl15c73n] {
color: #E8F4F8;
}
body.night-mode .not-found-inner p[b-2pzl15c73n] {
color: #A0B4BC;
}
body.night-mode .home-link[b-2pzl15c73n] {
color: #C49A6C;
}
/* Empty State - Night Mode */
body.night-mode .memorial-empty-text[b-2pzl15c73n] {
filter: drop-shadow(0 0 8px rgba(196, 154, 108, 0.4));
}
/* Toggle Button - Night Mode */
body.night-mode .memorial-collapsed-back-link[b-2pzl15c73n] {
background: rgba(34, 46, 53, 0.76);
border-color: rgba(230, 198, 152, 0.16);
color: rgba(249, 232, 204, 0.78);
}
body.night-mode .memorial-collapsed-back-link:hover[b-2pzl15c73n],
body.night-mode .memorial-collapsed-back-link:focus-visible[b-2pzl15c73n] {
background: rgba(34, 46, 53, 0.92);
border-color: rgba(230, 198, 152, 0.28);
color: #F9E8CC;
}
/* Sidebar Overlay - Night Mode */
body.night-mode .sidebar-overlay[b-2pzl15c73n] {
background: rgba(10, 18, 22, 0.5);
}
/* Scrollbar - Night Mode */
body.night-mode .memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb {
background: rgba(196, 154, 108, 0.2);
}
body.night-mode .memorial-main[b-2pzl15c73n]::-webkit-scrollbar-thumb:hover {
background: rgba(196, 154, 108, 0.35);
}
/* Guest Layout - Night Mode */
body.night-mode .memorial-guest-layout[b-2pzl15c73n] {
background: #1A2A32;
}
body.night-mode .guest-menu-btn[b-2pzl15c73n] {
background: rgba(45, 59, 68, 0.85);
border-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .guest-menu-btn:hover[b-2pzl15c73n] {
background: rgba(45, 59, 68, 0.95);
border-color: rgba(196, 154, 108, 0.35);
}
body.night-mode .guest-menu-dots[b-2pzl15c73n] {
color: #CFD8DC;
}
body.night-mode .guest-menu-dropdown[b-2pzl15c73n] {
background: rgba(30, 46, 54, 0.97);
border-color: rgba(196, 154, 108, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
body.night-mode .guest-menu-item[b-2pzl15c73n] {
color: #E8F4F8;
}
body.night-mode .guest-menu-item:hover[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.1);
}
/* Atelier - Night Mode */
body.night-mode .memorial-atelier-backdrop[b-2pzl15c73n] {
background: rgba(0, 0, 0, 0.6);
}
body.night-mode .memorial-atelier-wrapper[b-2pzl15c73n] {
background: linear-gradient(170deg, #2A3640 0%, #253038 40%, #1E2830 100%);
border-color: rgba(196, 154, 108, 0.12);
box-shadow:
0 16px 48px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(196, 154, 108, 0.06);
}
/* Memorial Hero - Night Mode: more depth for carousel zone */
body.night-mode .memorial-hero[b-2pzl15c73n]::before {
background: radial-gradient(ellipse 80% 55% at 50% 20%, rgba(196, 154, 108, 0.06) 0%, transparent 70%);
}
/* Portrait container: tighter tagline spacing below carousel */
body.night-mode .memorial-hero-tribute[b-2pzl15c73n] {
color: #B0C4CC;
}
/* ============================================
MOBILE-ONLY OWNER HEADER
Hidden on desktop, shown only at ≤768px
============================================ */
.memorial-owner-header[b-2pzl15c73n] {
display: none; /* Hidden on desktop — ALWAYS */
}
@media (max-width: 768px) {
.memorial-owner-header[b-2pzl15c73n] {
display: flex;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
pointer-events: none;
}
.memorial-owner-header > *[b-2pzl15c73n] {
pointer-events: all;
}
.memorial-sidebar-back-link[b-2pzl15c73n] {
display: none;
}
.owner-back-link[b-2pzl15c73n] {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: #6B5B4E;
font-family: var(--font-sans);
font-size: 0.9rem;
opacity: 0.7;
transition: opacity 0.3s ease;
padding: 0.4rem 0.8rem;
border-radius: 20px;
background: rgba(253, 248, 240, 0.75);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.owner-back-link:hover[b-2pzl15c73n] {
opacity: 1;
}
.owner-menu-wrapper[b-2pzl15c73n] {
position: relative;
}
.owner-menu-btn[b-2pzl15c73n] {
width: 40px;
height: 40px;
border-radius: 50%;
border: none;
background: rgba(253, 248, 240, 0.75);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
transition: opacity 0.3s ease;
}
.owner-menu-btn:hover[b-2pzl15c73n] {
opacity: 1;
}
.owner-menu-dots[b-2pzl15c73n] {
font-size: 1.3rem;
color: #6B5B4E;
line-height: 1;
}
.owner-menu-backdrop[b-2pzl15c73n] {
position: fixed;
inset: 0;
z-index: 99;
}
.owner-menu-dropdown[b-2pzl15c73n] {
position: absolute;
top: 48px;
right: 0;
min-width: 180px;
background: rgba(253, 248, 240, 0.95);
-webkit-backdrop-filter: blur(16px);
backdrop-filter: blur(16px);
border-radius: 12px;
border: 1px solid rgba(196, 154, 108, 0.15);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
padding: 0.5rem 0;
z-index: 100;
}
.owner-menu-item[b-2pzl15c73n] {
display: block;
width: 100%;
padding: 0.7rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #5A4A3F;
text-decoration: none;
background: none;
border: none;
text-align: left;
cursor: pointer;
transition: background 0.2s ease;
}
.owner-menu-item:hover[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.1);
}
.owner-menu-separator[b-2pzl15c73n] {
height: 1px;
background: rgba(196, 154, 108, 0.15);
margin: 0.3rem 0;
}
.owner-menu-logout[b-2pzl15c73n] {
color: #A05A3C;
}
}
/* Night mode for owner header */
body.night-mode .memorial-owner-header .owner-back-link[b-2pzl15c73n] {
color: #CABFB5;
background: rgba(40, 35, 30, 0.75);
}
body.night-mode .memorial-owner-header .owner-menu-btn[b-2pzl15c73n] {
background: rgba(40, 35, 30, 0.75);
}
body.night-mode .memorial-owner-header .owner-menu-dots[b-2pzl15c73n] {
color: #CABFB5;
}
body.night-mode .memorial-owner-header .owner-menu-dropdown[b-2pzl15c73n] {
background: rgba(40, 35, 30, 0.95);
border-color: rgba(196, 154, 108, 0.2);
}
body.night-mode .memorial-owner-header .owner-menu-item[b-2pzl15c73n] {
color: #CABFB5;
}
body.night-mode .memorial-owner-header .owner-menu-item:hover[b-2pzl15c73n] {
background: rgba(196, 154, 108, 0.15);
}
body.night-mode .memorial-owner-header .owner-menu-logout[b-2pzl15c73n] {
color: #D4836B;
}
/* Keep an unfinished room quiet without changing actual portrait photographs. */
.memorial-hero:has(.memorial-portrait-prompt)[b-2pzl15c73n] {
padding-top: 2rem;
}
.memorial-hero:has(.memorial-portrait-prompt)[b-2pzl15c73n] .memorial-carousel {
max-width: 240px;
margin-block: 1rem;
}
.memorial-hero:has(.memorial-portrait-prompt)[b-2pzl15c73n] .memorial-carousel-image {
filter: saturate(0.45);
}
.memorial-hero:has(.memorial-portrait-prompt)[b-2pzl15c73n] .memorial-carousel-halo {
opacity: 0.25;
}
.memorial-portrait-prompt[b-2pzl15c73n] {
border: 1px solid var(--lov-line);
border-radius: 8px;
background: var(--lov-surface);
box-shadow: none;
}
.memorial-portrait-prompt-icon[b-2pzl15c73n] {
background: var(--lov-selected);
color: var(--lov-green);
}
.memorial-portrait-prompt h2[b-2pzl15c73n] {
color: var(--lov-ink);
}
.memorial-portrait-prompt .memorial-portrait-prompt-kicker[b-2pzl15c73n],
.memorial-portrait-prompt p:last-child[b-2pzl15c73n] {
color: var(--lov-muted);
}
.memorial-portrait-prompt-action[b-2pzl15c73n] {
min-height: 44px;
border-radius: 6px;
background: var(--lov-green);
color: var(--lov-on-green);
box-shadow: none;
}
.memorial-owner-empty-section[b-2pzl15c73n] {
padding-block: 1.5rem;
opacity: 1;
}
.memorial-owner-empty-section .memorial-tribute-inner[b-2pzl15c73n],
.memorial-service-empty[b-2pzl15c73n],
.memorial-resting-place-empty[b-2pzl15c73n],
.memorial-family-empty[b-2pzl15c73n] {
width: min(760px, 100%);
margin-inline: auto;
border: 1px solid var(--lov-line);
border-radius: 8px;
background: var(--lov-surface);
color: var(--lov-ink);
box-shadow: none;
}
.memorial-owner-empty-section h2[b-2pzl15c73n] {
color: var(--lov-ink);
}
.memorial-owner-empty-section .memorial-empty-section-button[b-2pzl15c73n] {
min-height: 44px;
border-color: var(--lov-line);
border-radius: 6px;
background: var(--lov-surface);
color: var(--lov-green);
}
.memorial-portrait-prompt-action:focus-visible[b-2pzl15c73n],
.memorial-owner-empty-section .memorial-empty-section-button:focus-visible[b-2pzl15c73n] {
outline: 3px solid var(--lov-focus);
outline-offset: 3px;
}
.memorial-room-canvas:has(.memorial-tapestry-section) .memorial-resting-place-section[b-2pzl15c73n] {
padding-bottom: 2rem;
}
.memorial-family-empty[b-2pzl15c73n] {
padding: 1.4rem 1.5rem;
text-align: center;
}
.memorial-family-empty h2[b-2pzl15c73n] {
margin: 0 0 1rem;
font-family: var(--font-serif);
font-size: clamp(1.45rem, 3vw, 2rem);
font-weight: 400;
}
.memorial-portrait-prompt-action:hover[b-2pzl15c73n],
.memorial-portrait-prompt-action:focus-visible[b-2pzl15c73n] {
background: var(--lov-green);
color: var(--lov-on-green);
box-shadow: none;
transform: none;
}
/* /Components/Pages/MemoriesAll.razor.rz.scp.css */
/* ===========================================
MEMORIES ALL PAGE - MASONRY LAYOUT
=========================================== */
/* Sidebar Overlay */
.sidebar-overlay[b-iw1lq54kp8] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none;
}
.sidebar-overlay.hidden[b-iw1lq54kp8] {
display: none;
}
/* App Layout */
[b-iw1lq54kp8] .app-layout {
display: flex;
width: 100%;
min-width: 0;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px;
overflow-x: hidden;
overscroll-behavior: none;
touch-action: pan-y pinch-zoom;
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-iw1lq54kp8] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-iw1lq54kp8] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-iw1lq54kp8] .sidebar.hidden {
transform: translateX(-100%);
}
[b-iw1lq54kp8] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-iw1lq54kp8] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-iw1lq54kp8] .sidebar a:hover {
color: #000;
}
[b-iw1lq54kp8] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar Logo Styles */
[b-iw1lq54kp8] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-iw1lq54kp8] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-iw1lq54kp8] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
transition: none !important;
}
/* Button Styles */
[b-iw1lq54kp8] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
}
[b-iw1lq54kp8] .btn:hover {
background-color: #FADDAA;
}
[b-iw1lq54kp8] .btn-login {
background-color: #FBCFA8;
}
/* Toggle Sidebar Button */
[b-iw1lq54kp8] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* ===========================================
MAIN CONTENT - TWO COLUMN LAYOUT
=========================================== */
[b-iw1lq54kp8] .messages-container {
flex: 1;
min-width: 0;
margin-left: 280px;
padding: 0;
max-width: 1200px;
box-sizing: border-box;
transition: margin-left 0.3s ease;
min-height: 100vh;
background: var(--lov-paper);
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"header header"
"main-content sidebar-content";
gap: 0;
}
[b-iw1lq54kp8] .messages-container.sidebar-hidden {
margin-left: 0;
}
/* Page Header */
[b-iw1lq54kp8] .vault-header {
grid-area: header;
text-align: center;
padding: 3rem 2rem 2rem;
max-width: 800px;
margin: 0 auto;
}
[b-iw1lq54kp8] .vault-header h1 {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: var(--mobile-hero-heading-weight);
color: #2C2A28;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
[b-iw1lq54kp8] .vault-subtitle {
/* inherited font-sans */
font-size: 1.1rem;
line-height: 1.6;
color: #6B5B57;
margin: 0;
max-width: 600px;
margin: 0 auto;
}
/* Main Content Area (left column) */
[b-iw1lq54kp8] .main-content-area {
grid-area: main-content;
padding: 0 3rem 3rem 3rem;
position: relative;
}
/* Sidebar Content Area (right column) */
[b-iw1lq54kp8] .sidebar-content-area {
grid-area: sidebar-content;
padding: 0 2rem 3rem 1.5rem;
position: relative;
display: flex;
flex-direction: column;
gap: 2rem;
align-items: stretch;
}
/* ===========================================
LOADING STATE - CANDLE ANIMATION
=========================================== */
[b-iw1lq54kp8] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 400px;
padding: 3rem;
}
[b-iw1lq54kp8] .vault-loader {
text-align: center;
padding: 2rem;
}
[b-iw1lq54kp8] .vault-loader-image {
width: 120px;
height: auto;
margin-bottom: 1.5rem;
animation: candleGlow-b-iw1lq54kp8 2s ease-in-out infinite alternate;
}
@keyframes candleGlow-b-iw1lq54kp8 {
0% {
opacity: 0.8;
filter: brightness(1);
}
100% {
opacity: 1;
filter: brightness(1.15);
}
}
[b-iw1lq54kp8] .vault-loader-title {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 400;
color: #5A413A;
margin-bottom: 0.5rem;
}
[b-iw1lq54kp8] .vault-loader-subtitle {
/* inherited font-sans */
font-size: 0.95rem;
color: #8B7355;
opacity: 0.8;
}
/* ===========================================
MASONRY GRID LAYOUT
=========================================== */
[b-iw1lq54kp8] .vault-masonry {
column-count: 2;
column-gap: 2rem;
width: 100%;
margin: 0;
padding: 0;
}
[b-iw1lq54kp8] .memory-section-card {
column-span: all;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(123, 90, 83, 0.12);
border-radius: 14px;
padding: 1rem 1.2rem;
margin-bottom: 1.25rem;
}
[b-iw1lq54kp8] .draft-section-card {
background: linear-gradient(180deg, rgba(255, 245, 232, 0.95), rgba(255, 250, 244, 0.9));
border-color: rgba(220, 178, 112, 0.32);
}
[b-iw1lq54kp8] .pending-section-card {
background: linear-gradient(180deg, rgba(238, 247, 241, 0.96), rgba(249, 252, 249, 0.92));
border-color: rgba(86, 125, 101, 0.26);
}
[b-iw1lq54kp8] .memory-section-title {
font-size: 1rem;
font-weight: 700;
color: #5A413A;
margin-bottom: 0.25rem;
}
[b-iw1lq54kp8] .memory-section-description {
font-size: 0.9rem;
line-height: 1.5;
color: #7B5A53;
}
/* ===========================================
MEMORY CARDS - MASONRY DESIGN
=========================================== */
[b-iw1lq54kp8] .memory-card {
break-inside: avoid;
background: white;
border: 1px solid #F0E6D2;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 3px 15px rgba(43, 42, 40, 0.08);
transition: all 0.3s ease;
position: relative;
width: 100%;
display: inline-block;
}
[b-iw1lq54kp8] .memory-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(43, 42, 40, 0.12);
border-color: #E8DCC0;
}
/* Archived Card Styling */
[b-iw1lq54kp8] .memory-card.archived {
opacity: 0.85;
background: #F9F7F4;
border-color: #E8E4DC;
}
[b-iw1lq54kp8] .memory-card.draft {
background: linear-gradient(180deg, #fffefb 0%, #fff6eb 100%);
border-color: #efd6ae;
box-shadow: 0 4px 18px rgba(198, 152, 88, 0.12);
}
[b-iw1lq54kp8] .pending-memory-card {
background: linear-gradient(180deg, #fffefb 0%, #f3f8f4 100%);
border-color: rgba(86, 125, 101, 0.28);
box-shadow: 0 4px 18px rgba(64, 103, 79, 0.12);
}
[b-iw1lq54kp8] .pending-memory-card.failed {
background: linear-gradient(180deg, #fffefb 0%, #fff2ed 100%);
border-color: rgba(169, 88, 65, 0.28);
}
[b-iw1lq54kp8] .pending-memory-image {
position: relative;
}
[b-iw1lq54kp8] .pending-memory-photo-status {
position: absolute;
right: 0.8rem;
bottom: 0.8rem;
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 3px solid rgba(255, 255, 255, 0.92);
border-radius: 50%;
background: #567d65;
box-shadow: 0 6px 18px rgba(44, 79, 57, 0.22);
}
[b-iw1lq54kp8] .pending-memory-spinner {
display: inline-block;
width: 18px;
height: 18px;
flex: 0 0 auto;
border: 2px solid rgba(86, 125, 101, 0.24);
border-top-color: #567d65;
border-radius: 50%;
animation: pending-memory-spin-b-iw1lq54kp8 850ms linear infinite;
}
[b-iw1lq54kp8] .pending-memory-photo-status .pending-memory-spinner {
border-color: rgba(255, 255, 255, 0.36);
border-top-color: #fff;
}
[b-iw1lq54kp8] .pending-memory-footer {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
padding: 0.85rem 0.95rem;
border-radius: 12px;
background: rgba(224, 238, 229, 0.76);
color: #496352;
font-size: 0.85rem;
line-height: 1.4;
}
[b-iw1lq54kp8] .pending-memory-card.failed .pending-memory-footer {
background: rgba(255, 226, 216, 0.72);
color: #8a4637;
justify-content: space-between;
}
[b-iw1lq54kp8] .pending-memory-footer div {
display: grid;
gap: 0.15rem;
}
[b-iw1lq54kp8] .pending-memory-footer button {
flex: 0 0 auto;
border: 0;
border-radius: 999px;
padding: 0.55rem 0.85rem;
background: #5a3d36;
color: #fff;
font: inherit;
font-weight: 700;
cursor: pointer;
}
[b-iw1lq54kp8] .pending-memory-footer button:disabled {
opacity: 0.6;
cursor: wait;
}
@keyframes pending-memory-spin-b-iw1lq54kp8 {
to { transform: rotate(360deg); }
}
[b-iw1lq54kp8] .memory-card.archived:hover {
opacity: 0.90;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(43, 42, 40, 0.08);
}
/* Card Header */
[b-iw1lq54kp8] .memory-card-head {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
[b-iw1lq54kp8] .memory-avatar {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
[b-iw1lq54kp8] .memory-avatar-placeholder {
width: 36px;
height: 36px;
border-radius: 50%;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: #7B5A53;
}
[b-iw1lq54kp8] .memory-card-head-text {
display: flex;
flex-direction: column;
gap: 0.2rem;
flex: 1;
min-width: 0;
}
[b-iw1lq54kp8] .memory-loved-one-name {
/* inherited font-sans */
font-weight: 600;
font-size: 0.9rem;
color: #5A413A;
}
[b-iw1lq54kp8] .memory-date-badge {
/* inherited font-sans */
font-size: 0.8rem;
color: #A67B5B;
opacity: 0.8;
}
/* Card Body */
[b-iw1lq54kp8] .memory-card-body {
margin-bottom: 1rem;
}
[b-iw1lq54kp8] .memory-image-container {
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
}
[b-iw1lq54kp8] .memory-image-container img {
max-width: 100%;
max-height: 200px;
width: auto;
height: auto;
object-fit: cover;
border-radius: 8px;
display: block;
}
[b-iw1lq54kp8] .memory-text-content {
margin: 0.15rem 0 0.25rem;
}
[b-iw1lq54kp8] .memory-excerpt {
font-family: var(--font-serif);
font-size: 1.08rem;
line-height: 1.85;
color: #342A25;
margin: 0;
}
[b-iw1lq54kp8] .memory-source-attribution {
margin-top: 0.85rem;
padding-top: 0.8rem;
border-top: 1px solid rgba(240, 230, 210, 0.85);
display: flex;
flex-direction: column;
gap: 0.2rem;
}
[b-iw1lq54kp8] .memory-source-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
color: #A67B5B;
}
[b-iw1lq54kp8] .memory-source-author {
font-size: 0.86rem;
font-weight: 600;
color: #6E5048;
}
/* Card Footer */
[b-iw1lq54kp8] .memory-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 0.75rem;
border-top: 1px solid #F0E6D2;
}
[b-iw1lq54kp8] .memory-tags {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
[b-iw1lq54kp8] .category-tag {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.6rem;
background: rgba(251, 207, 168, 0.25);
border-radius: 999px;
/* inherited font-sans */
font-size: 0.75rem;
color: #7B5A53;
}
[b-iw1lq54kp8] .category-icon {
font-size: 0.7rem;
}
[b-iw1lq54kp8] .memory-voice-indicator {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 1.65rem;
padding: 0.25rem 0.6rem;
background: #fff4eb;
border: 1px solid #ebcbb7;
border-radius: 999px;
color: #7b5144;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
[b-iw1lq54kp8] .memory-voice-icon {
width: 0.9rem;
height: 0.9rem;
flex: 0 0 auto;
}
[b-iw1lq54kp8] .memory-voice-duration {
color: #8d6759;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
[b-iw1lq54kp8] .archived-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.6rem;
background: rgba(139, 139, 139, 0.15);
border: 1px solid rgba(139, 139, 139, 0.2);
border-radius: 999px;
/* inherited font-sans */
font-size: 0.7rem;
color: #6B6B6B;
font-weight: 500;
}
[b-iw1lq54kp8] .draft-badge {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.6rem;
background: rgba(234, 190, 108, 0.18);
border: 1px solid rgba(198, 152, 88, 0.28);
border-radius: 999px;
font-size: 0.72rem;
color: #8a6033;
font-weight: 600;
}
[b-iw1lq54kp8] .memory-chat-btn {
background: none;
border: none;
cursor: pointer;
padding: 0.4rem;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
color: #A67B5B;
}
[b-iw1lq54kp8] .memory-chat-btn:hover {
background-color: rgba(167, 123, 91, 0.1);
color: #7B5A53;
transform: scale(1.1);
}
[b-iw1lq54kp8] .draft-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
align-items: center;
justify-content: flex-end;
}
[b-iw1lq54kp8] .draft-action-btn {
border: none;
border-radius: 999px;
padding: 0.45rem 0.9rem;
font-size: 0.78rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
[b-iw1lq54kp8] .draft-action-btn.approve {
background: #e6c88d;
color: #5a413a;
}
[b-iw1lq54kp8] .draft-action-btn.review {
background: transparent;
border: 1px solid rgba(123, 90, 83, 0.28);
color: #6b4d47;
}
[b-iw1lq54kp8] .draft-action-btn.review:hover {
background: rgba(123, 90, 83, 0.08);
}
[b-iw1lq54kp8] .draft-action-btn.approve:hover {
background: #dcb270;
}
[b-iw1lq54kp8] .draft-action-btn.dismiss {
background: rgba(123, 90, 83, 0.08);
color: #7B5A53;
}
[b-iw1lq54kp8] .draft-action-btn.dismiss:hover {
background: rgba(123, 90, 83, 0.16);
}
[b-iw1lq54kp8] .draft-expiry {
margin-top: 0.85rem;
font-size: 0.76rem;
color: #9b7856;
}
/* Three Dots Menu */
[b-iw1lq54kp8] .three-dots-menu {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
opacity: 0;
pointer-events: none;
transform: translateY(-2px) scale(0.94);
z-index: 10;
}
[b-iw1lq54kp8] .memory-card:hover .three-dots-menu,
[b-iw1lq54kp8] .memory-card:focus-within .three-dots-menu,
[b-iw1lq54kp8] .memory-card:has(.vault-card-dropdown) .three-dots-menu {
opacity: 0.72;
pointer-events: auto;
transform: translateY(0) scale(1);
}
[b-iw1lq54kp8] .three-dots-menu:hover {
background-color: rgba(167, 123, 91, 0.1);
opacity: 1;
transform: scale(1.1);
}
[b-iw1lq54kp8] .three-dots-menu svg {
width: 16px;
height: 16px;
fill: #7B5A53;
}
/* Dropdown Menu */
[b-iw1lq54kp8] .vault-card-dropdown {
position: absolute;
top: 2.5rem;
right: 0.5rem;
background: white;
border: 1px solid #E8DCC0;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(43, 42, 40, 0.15);
z-index: 1000;
min-width: 140px;
overflow: hidden;
}
[b-iw1lq54kp8] .vault-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
/* inherited font-sans */
font-size: 0.85rem;
color: #7B5A53;
cursor: pointer;
transition: background-color 0.2s ease;
border: none;
background: none;
width: 100%;
text-align: left;
}
[b-iw1lq54kp8] .vault-dropdown-item:hover {
background-color: #F5E6D3;
}
[b-iw1lq54kp8] .vault-dropdown-item svg {
width: 14px;
height: 14px;
fill: currentColor;
opacity: 0.7;
}
.memory-action-sheet-backdrop[b-iw1lq54kp8] {
position: fixed;
inset: 0;
z-index: 1205;
background: rgba(43, 42, 40, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
touch-action: none;
}
/* Keep the global host button below the temporary page-level sheet. */
:global(.app-container:has(.memory-action-sheet) .floating-host-container)[b-iw1lq54kp8] {
z-index: 1204;
}
.memory-action-sheet[b-iw1lq54kp8] {
position: fixed;
left: 50%;
bottom: calc(0.85rem + env(safe-area-inset-bottom));
width: min(92vw, 380px);
z-index: 1210;
background: #fffaf5;
border: 1px solid rgba(216, 168, 138, 0.5);
border-radius: 22px;
padding: 0.4rem 0;
box-shadow: 0 28px 58px rgba(43, 42, 40, 0.24);
transform: translate(-50%, 18px);
animation: memory-sheet-rise-b-iw1lq54kp8 0.2s ease-out forwards;
overflow: hidden;
}
.memory-action-sheet-item[b-iw1lq54kp8] {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.95rem 1.2rem;
color: #4b2e2e;
font-size: 0.96rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
.memory-action-sheet-item:hover[b-iw1lq54kp8],
.memory-action-sheet-item:focus-visible[b-iw1lq54kp8] {
background: #f7f0ea;
outline: none;
}
.memory-action-sheet-item:active[b-iw1lq54kp8] {
background: #efe3da;
}
.memory-action-sheet-item.danger[b-iw1lq54kp8] {
color: #a94636;
}
.memory-action-sheet-item svg[b-iw1lq54kp8] {
flex: 0 0 auto;
color: currentColor;
}
@keyframes memory-sheet-rise-b-iw1lq54kp8 {
from {
opacity: 0;
transform: translate(-50%, 18px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
/* ===========================================
FILTERS PANEL - STICKY SIDEBAR
=========================================== */
[b-iw1lq54kp8] .filters-panel {
background: rgba(255, 255, 255, 0.92);
border: 1px solid #E8DCC0;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 12px 28px rgba(124, 90, 83, 0.12);
margin-bottom: 2rem;
position: sticky;
top: 2rem;
}
[b-iw1lq54kp8] .filters-panel-header {
/* inherited font-sans */
font-size: 1.05rem;
font-weight: 600;
color: #5A413A;
letter-spacing: 0.01em;
margin-bottom: 1.5rem;
}
[b-iw1lq54kp8] .filters-panel-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
[b-iw1lq54kp8] .mobile-filters-trigger-row,
[b-iw1lq54kp8] .mobile-filters-backdrop {
display: none;
}
[b-iw1lq54kp8] .mobile-filters-trigger {
display: inline-flex;
align-items: center;
gap: 0.65rem;
border: 1px solid #D8A88A;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #5A413A;
padding: 0.7rem 1rem;
font-size: 0.92rem;
font-weight: 600;
box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
}
[b-iw1lq54kp8] .mobile-filters-trigger.has-active {
background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}
[b-iw1lq54kp8] .mobile-filters-trigger-badge {
min-width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #7B5A53;
color: #fff;
font-size: 0.8rem;
}
[b-iw1lq54kp8] .mobile-filters-close {
display: none;
border: none;
border-radius: 999px;
background: rgba(123, 90, 83, 0.1);
color: #5A413A;
padding: 0.55rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
}
/* Search Section */
[b-iw1lq54kp8] .search-section {
margin-bottom: 1.5rem;
}
[b-iw1lq54kp8] .search-input {
width: 100%;
padding: 0.82rem 1.05rem;
border: 1px solid rgba(216, 168, 138, 0.28);
border-radius: 999px;
/* inherited font-sans */
font-size: 0.9rem;
background: rgba(255, 248, 239, 0.94);
color: #2C2A28;
transition: all 0.2s ease;
box-sizing: border-box;
box-shadow:
inset 0 1px 4px rgba(123, 90, 83, 0.08),
inset 0 -1px 0 rgba(255, 255, 255, 0.72);
}
[b-iw1lq54kp8] .search-input:focus,
[b-iw1lq54kp8] .search-input:focus-visible {
outline: none;
border-color: rgba(216, 168, 138, 0.62);
background: rgba(255, 251, 246, 0.98);
box-shadow:
0 0 0 4px rgba(251, 207, 168, 0.34),
inset 0 1px 4px rgba(123, 90, 83, 0.06);
}
[b-iw1lq54kp8] .search-input::placeholder {
color: #A67B5B;
opacity: 0.7;
}
[b-iw1lq54kp8] .filters-panel-section {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 1.75rem;
}
[b-iw1lq54kp8] .filters-panel-section:last-of-type {
margin-bottom: 0;
}
[b-iw1lq54kp8] .filters-panel-label {
/* inherited font-sans */
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #A67B5B;
}
[b-iw1lq54kp8] .filter-pill-tray {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
position: relative;
}
[b-iw1lq54kp8] .filter-pill {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.45rem 1.1rem;
border-radius: 999px;
border: 1px solid rgba(216, 168, 138, 0.08);
background: rgba(255, 248, 240, 0.48);
/* inherited font-sans */
font-size: 0.9rem;
color: #6B5B57;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: none;
}
[b-iw1lq54kp8] .filter-pill:hover {
border-color: rgba(216, 168, 138, 0.2);
background: rgba(255, 246, 237, 0.76);
box-shadow: 0 4px 12px rgba(124, 90, 83, 0.06);
transform: translateY(-1px);
}
[b-iw1lq54kp8] .filter-pill:focus-visible {
outline: 2px solid rgba(123, 90, 83, 0.6);
outline-offset: 2px;
}
[b-iw1lq54kp8] .filter-pill.active {
background: linear-gradient(135deg, #FFF4EA, #F6D3BF);
border-color: #D8A88A;
color: #4B2E2E;
box-shadow: 0 8px 18px rgba(123, 90, 83, 0.13);
font-weight: 600;
}
[b-iw1lq54kp8] .filters-panel-link {
background: none;
border: none;
/* inherited font-sans */
font-size: 0.85rem;
color: #7B5A53;
cursor: pointer;
text-decoration: underline;
padding: 0.25rem 0;
transition: color 0.2s ease;
}
[b-iw1lq54kp8] .filters-panel-link:hover {
color: #5A413A;
}
/* Reset Filters */
[b-iw1lq54kp8] .filters-reset-section {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid #E8DCC0;
}
[b-iw1lq54kp8] .reset-filters-btn {
width: 100%;
padding: 0.75rem 1rem;
background: linear-gradient(135deg, #7B5A53, #A86F5C);
color: #fffaf6;
border: none;
border-radius: 999px;
/* inherited font-sans */
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 8px 20px rgba(123, 90, 83, 0.2);
}
[b-iw1lq54kp8] .reset-filters-btn:hover {
background: linear-gradient(135deg, #6B4A43, #915847);
transform: translateY(-1px);
}
/* ===========================================
INVITATION CARD
=========================================== */
[b-iw1lq54kp8] .invitation-card {
background: linear-gradient(165deg, rgba(255, 245, 237, 0.95), rgba(250, 227, 208, 0.92));
border: 1px solid rgba(216, 168, 138, 0.45);
border-radius: 24px;
padding: 2.4rem 2rem;
text-align: center;
box-shadow: 0 24px 60px rgba(123, 90, 83, 0.18);
}
[b-iw1lq54kp8] .vault-cta-icon {
width: 3.2rem;
height: 3.2rem;
border-radius: 50%;
background: rgba(255, 255, 255, 0.7);
margin: 0 auto 1.2rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.6rem;
color: #C27A4A;
box-shadow: 0 12px 30px rgba(194, 122, 74, 0.25);
}
[b-iw1lq54kp8] .vault-cta h2 {
font-family: var(--font-serif);
font-size: 1.6rem;
font-weight: 300;
color: #3F2C2C;
margin-bottom: 0.85rem;
}
[b-iw1lq54kp8] .vault-cta p {
/* inherited font-sans */
font-size: 0.98rem;
color: #6B5B57;
margin-bottom: 1.8rem;
line-height: 1.65;
}
[b-iw1lq54kp8] .cta-button {
background: linear-gradient(135deg, #7B5A53, #A86F5C);
color: #fffaf6;
border: none;
border-radius: 999px;
padding: 0.85rem 2rem;
/* inherited font-sans */
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 16px 34px rgba(123, 90, 83, 0.24);
}
[b-iw1lq54kp8] .cta-button:hover {
background: linear-gradient(135deg, #6B4A43, #915847);
transform: translateY(-2px);
}
/* ===========================================
EMPTY STATE
=========================================== */
[b-iw1lq54kp8] .empty-state {
break-inside: avoid;
column-span: all;
text-align: center;
padding: 4rem 2rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 16px;
border: 1px dashed #E8DCC0;
}
[b-iw1lq54kp8] .filtered-empty-state {
width: min(100%, 620px);
max-width: 620px;
margin: 0 auto 1.5rem;
padding: 3rem 2.4rem;
background:
radial-gradient(circle at 12% 10%, rgba(251, 207, 168, 0.22), transparent 34%),
linear-gradient(180deg, rgba(255, 250, 243, 0.97), rgba(250, 236, 218, 0.95));
border: 1px solid rgba(216, 168, 138, 0.34);
box-shadow:
0 18px 44px rgba(123, 90, 83, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
}
[b-iw1lq54kp8] .empty-state h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 400;
color: #5A413A;
margin-bottom: 0.75rem;
}
[b-iw1lq54kp8] .empty-state p {
/* inherited font-sans */
font-size: 1rem;
color: #8B7355;
margin-bottom: 1.5rem;
line-height: 1.6;
}
[b-iw1lq54kp8] .filtered-empty-state p {
max-width: 34rem;
margin-left: auto;
margin-right: auto;
}
[b-iw1lq54kp8] .empty-state-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.8rem;
}
[b-iw1lq54kp8] .empty-state-action {
display: inline-flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #7B5A53, #A86F5C);
color: #fffaf6;
border: none;
border-radius: 999px;
padding: 0.85rem 2rem;
/* inherited font-sans */
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
[b-iw1lq54kp8] .empty-state-action:hover {
background: linear-gradient(135deg, #6B4A43, #915847);
transform: translateY(-2px);
}
[b-iw1lq54kp8] .empty-state-action.secondary {
background: rgba(255, 255, 255, 0.42);
color: #6B4A43;
border: 1px solid rgba(123, 90, 83, 0.24);
box-shadow: none;
}
[b-iw1lq54kp8] .empty-state-action.secondary:hover {
background: rgba(255, 248, 240, 0.82);
border-color: rgba(123, 90, 83, 0.38);
}
[b-iw1lq54kp8] .empty-state-action:focus-visible {
outline: 2px solid rgba(123, 90, 83, 0.64);
outline-offset: 4px;
}
/* ===========================================
LOAD MORE
=========================================== */
[b-iw1lq54kp8] .load-more-container {
display: flex;
justify-content: center;
margin: 2rem 0;
padding: 1rem;
}
[b-iw1lq54kp8] .load-more-btn {
background: transparent;
color: #6A453D;
border: none;
border-bottom: 1px solid rgba(106, 69, 61, 0.32);
padding: 0.35rem 0.15rem 0.22rem;
border-radius: 0;
font-size: 0.96rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: none;
}
[b-iw1lq54kp8] .load-more-btn:hover:not(:disabled) {
color: #4B2E2E;
border-bottom-color: rgba(75, 46, 46, 0.68);
transform: translateY(-1px);
}
[b-iw1lq54kp8] .load-more-btn:focus-visible {
outline: 2px solid rgba(216, 168, 138, 0.72);
outline-offset: 5px;
border-bottom-color: transparent;
}
[b-iw1lq54kp8] .load-more-btn:disabled {
opacity: 0.52;
cursor: not-allowed;
transform: none;
border-bottom-color: rgba(106, 69, 61, 0.18);
}
/* ===========================================
RESPONSIVE DESIGN
=========================================== */
@media (max-width: 1024px) {
[b-iw1lq54kp8] .toggle-sidebar {
display: none;
}
[b-iw1lq54kp8] .app-layout {
padding-top: 60px;
}
[b-iw1lq54kp8] .messages-container {
margin-left: 0 !important;
margin-top: 70px;
padding: 1rem;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main-content"
"sidebar-content";
}
[b-iw1lq54kp8] .main-content-area {
padding: 1rem 0;
}
[b-iw1lq54kp8] .sidebar-content-area {
padding: 1rem 0 2rem;
}
[b-iw1lq54kp8] .filters-panel {
display: none;
position: static;
margin-bottom: 1.5rem;
}
[b-iw1lq54kp8] .filters-panel.mobile-open {
display: block;
position: fixed;
left: max(1rem, env(safe-area-inset-left));
right: max(1rem, env(safe-area-inset-right));
bottom: calc(1rem + env(safe-area-inset-bottom));
top: auto;
z-index: 1300;
margin: 0;
max-height: min(78vh, calc(100dvh - 6rem));
overflow-y: auto;
padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
border-radius: 24px;
box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
}
[b-iw1lq54kp8] .three-dots-menu {
opacity: 0.58;
pointer-events: auto;
transform: none;
background: rgba(255, 248, 240, 0.42);
}
[b-iw1lq54kp8] .vault-masonry {
column-count: 2;
column-gap: 1.2rem;
}
[b-iw1lq54kp8] .mobile-filters-trigger-row {
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
}
[b-iw1lq54kp8] .mobile-filters-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(43, 42, 40, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
[b-iw1lq54kp8] .mobile-filters-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
[b-iw1lq54kp8] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-iw1lq54kp8] .sidebar.visible {
transform: translateX(0);
}
[b-iw1lq54kp8] .sidebar.hidden {
transform: translateX(-100%);
}
}
@media (max-width: 768px) {
[b-iw1lq54kp8] .messages-container {
padding: 1rem var(--mobile-page-margin);
margin-top: 60px;
}
[b-iw1lq54kp8] .vault-header {
padding: 1.5rem var(--mobile-page-margin);
}
[b-iw1lq54kp8] .vault-header h1 {
font-size: 2rem;
}
[b-iw1lq54kp8] .vault-subtitle {
font-size: 1rem;
}
[b-iw1lq54kp8] .filters-panel {
padding: 1.4rem 1.2rem;
}
[b-iw1lq54kp8] .filter-pill {
font-size: 0.85rem;
padding: 0.4rem 0.9rem;
}
[b-iw1lq54kp8] .filters-panel.mobile-open {
left: max(0.85rem, env(safe-area-inset-left));
right: max(0.85rem, env(safe-area-inset-right));
bottom: calc(0.85rem + env(safe-area-inset-bottom));
}
[b-iw1lq54kp8] .invitation-card {
padding: 2rem 1.5rem;
}
}
@media (max-width: 640px) {
[b-iw1lq54kp8] .vault-masonry {
column-count: 1;
padding: 0 1rem 3rem;
}
[b-iw1lq54kp8] .filtered-empty-state {
width: 100%;
padding: 2.4rem 1.35rem;
}
[b-iw1lq54kp8] .empty-state-actions {
flex-direction: column;
align-items: stretch;
}
[b-iw1lq54kp8] .empty-state-action {
width: 100%;
}
}
@media (max-width: 480px) {
[b-iw1lq54kp8] .vault-header h1 {
font-size: 1.8rem;
}
[b-iw1lq54kp8] .memory-card {
padding: 1.2rem;
}
[b-iw1lq54kp8] .mobile-top-bar {
display: flex;
}
}
/* ===========================================
CREATE MEMORY ENTRY POINT
=========================================== */
[b-iw1lq54kp8] .memory-create-panel {
margin: 0 0 1.65rem;
overflow: hidden;
border: 1px solid rgba(151, 104, 77, 0.16);
border-radius: 18px;
background: rgba(255, 251, 245, 0.72);
box-shadow:
0 12px 28px rgba(87, 58, 43, 0.06),
inset 0 1px 0 rgba(255, 255, 255, 0.72);
}
[b-iw1lq54kp8] .family-shared-badge {
display: inline-flex;
align-items: center;
gap: 0.3rem;
padding: 0.25rem 0.6rem;
border: 1px solid rgba(139, 91, 72, 0.24);
border-radius: 999px;
background: rgba(246, 225, 214, 0.55);
color: #7a4f42;
font-size: 0.72rem;
font-weight: 650;
}
[b-iw1lq54kp8] .family-share-pending-badge {
background: rgba(249, 236, 214, 0.72);
color: #7a5a37;
}
[b-iw1lq54kp8] .family-share-review-badge {
background: rgba(244, 229, 226, 0.78);
color: #76504b;
}
[b-iw1lq54kp8] .family-share-review-note {
margin: 0 1rem .8rem;
padding: .75rem .85rem;
border: 1px solid rgba(139, 91, 72, .18);
border-radius: 12px;
background: rgba(249, 236, 230, .68);
color: #6f5148;
font-family: var(--font-sans);
}
[b-iw1lq54kp8] .family-share-review-note strong { font-size: .8rem; }
[b-iw1lq54kp8] .family-share-review-note p { margin: .25rem 0 0; font-size: .82rem; line-height: 1.45; }
[b-iw1lq54kp8] .memory-create-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.5rem;
padding: 1.15rem 1.25rem 1rem;
}
[b-iw1lq54kp8] .memory-create-heading h2 {
margin: 0;
color: #3f302b;
font-family: var(--font-serif);
font-size: clamp(1.35rem, 2.2vw, 1.7rem);
font-weight: 560;
line-height: 1.12;
letter-spacing: -0.02em;
}
[b-iw1lq54kp8] .memory-create-heading p {
max-width: 25rem;
margin: 0;
color: #78645a;
font-family: var(--font-sans);
font-size: 0.88rem;
line-height: 1.45;
text-align: right;
}
[b-iw1lq54kp8] .memory-create-options {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid rgba(151, 104, 77, 0.14);
}
[b-iw1lq54kp8] .memory-create-option {
min-width: 0;
min-height: 104px;
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 18px;
align-items: center;
gap: 0.7rem;
padding: 0.9rem 0.85rem;
border: 0;
background: transparent;
color: #523a30;
font-family: var(--font-sans);
text-align: left;
cursor: pointer;
transition: background-color 160ms ease, color 160ms ease;
}
[b-iw1lq54kp8] .memory-create-option + .memory-create-option {
border-left: 1px solid rgba(151, 104, 77, 0.14);
}
[b-iw1lq54kp8] .memory-create-option:hover {
background: rgba(246, 214, 194, 0.24);
color: #8b5139;
}
[b-iw1lq54kp8] .memory-create-option-icon {
width: 36px;
height: 36px;
display: grid;
place-items: center;
border: 1px solid rgba(164, 102, 69, 0.2);
border-radius: 11px;
background: rgba(255, 244, 231, 0.78);
color: #a26145;
}
[b-iw1lq54kp8] .memory-create-option-icon svg {
width: 23px;
height: 23px;
}
[b-iw1lq54kp8] .memory-create-option-copy {
min-width: 0;
display: grid;
gap: 0.2rem;
}
[b-iw1lq54kp8] .memory-create-option-copy strong {
color: inherit;
font-size: 0.91rem;
font-weight: 700;
line-height: 1.25;
}
[b-iw1lq54kp8] .memory-create-option-copy small {
color: #806d62;
font-size: 0.74rem;
line-height: 1.35;
}
[b-iw1lq54kp8] .memory-create-option-arrow {
width: 18px;
height: 18px;
color: #b27a60;
transition: transform 160ms ease;
}
[b-iw1lq54kp8] .memory-create-option:hover .memory-create-option-arrow {
transform: translateX(3px);
}
[b-iw1lq54kp8] .memory-create-option:focus-visible {
position: relative;
z-index: 1;
outline: 3px solid rgba(181, 111, 75, 0.44);
outline-offset: -3px;
}
/* Footer alignment to follow sidebar on desktop */
[b-iw1lq54kp8] .main-footer {
margin-left: 280px;
width: calc(100% - 280px);
margin-top: 0;
}
[b-iw1lq54kp8] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
@media (max-width: 992px) {
[b-iw1lq54kp8] .main-footer {
margin-left: 0;
width: 100%;
}
}
/* Memories mobile polish - keeps the memory cards but fixes the page frame. */
@media (max-width: 1024px) {
[b-iw1lq54kp8] .mobile-floating-header {
z-index: 1200;
}
.app-layout[b-iw1lq54kp8],
[b-iw1lq54kp8] .app-layout {
display: block;
width: 100%;
max-width: 100vw;
padding-top: 60px;
overflow-x: hidden;
background-color: var(--lov-paper);
}
.messages-container[b-iw1lq54kp8],
[b-iw1lq54kp8] .messages-container,
.messages-container.sidebar-hidden[b-iw1lq54kp8],
[b-iw1lq54kp8] .messages-container.sidebar-hidden {
width: 100%;
max-width: 720px;
min-width: 0;
margin: 0 auto !important;
padding: 0 0 44px;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main-content"
"sidebar-content";
box-sizing: border-box;
overflow-x: hidden;
}
.vault-header[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-header {
width: 100%;
max-width: 680px;
padding: 30px 18px 22px;
box-sizing: border-box;
}
.vault-header h1[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-header h1 {
font-size: clamp(2.05rem, 7vw, 2.7rem);
line-height: 1.1;
letter-spacing: 0;
margin-bottom: 1rem;
}
.vault-subtitle[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-subtitle {
max-width: 36rem;
font-size: clamp(1.05rem, 2.8vw, 1.25rem);
line-height: 1.55;
}
.main-content-area[b-iw1lq54kp8],
[b-iw1lq54kp8] .main-content-area,
.sidebar-content-area[b-iw1lq54kp8],
[b-iw1lq54kp8] .sidebar-content-area {
width: 100%;
padding: 0 18px 2.5rem;
box-sizing: border-box;
}
.mobile-filters-trigger-row[b-iw1lq54kp8],
[b-iw1lq54kp8] .mobile-filters-trigger-row {
margin-bottom: 1rem;
}
.vault-masonry[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-masonry {
width: 100%;
padding: 0;
column-gap: 1rem;
}
.empty-state[b-iw1lq54kp8],
[b-iw1lq54kp8] .empty-state,
.filtered-empty-state[b-iw1lq54kp8],
[b-iw1lq54kp8] .filtered-empty-state,
.invitation-card[b-iw1lq54kp8],
[b-iw1lq54kp8] .invitation-card {
width: 100%;
max-width: none;
margin: 0 0 1.6rem;
box-sizing: border-box;
}
}
@media (max-width: 680px) {
.messages-container[b-iw1lq54kp8],
[b-iw1lq54kp8] .messages-container,
.messages-container.sidebar-hidden[b-iw1lq54kp8],
[b-iw1lq54kp8] .messages-container.sidebar-hidden {
max-width: 680px;
padding-bottom: 40px;
}
.vault-header[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-header {
padding: 24px var(--mobile-page-margin, 16px) 16px;
}
.vault-header h1[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-header h1 {
font-size: clamp(2.05rem, 9.2vw, 2.35rem);
line-height: 1.12;
}
.vault-subtitle[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-subtitle {
font-size: clamp(1.02rem, 4.4vw, 1.16rem);
line-height: 1.55;
}
.main-content-area[b-iw1lq54kp8],
[b-iw1lq54kp8] .main-content-area,
.sidebar-content-area[b-iw1lq54kp8],
[b-iw1lq54kp8] .sidebar-content-area {
padding: 0 var(--mobile-page-margin, 16px) 2.5rem;
}
.vault-masonry[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-masonry {
column-count: 1;
padding: 0;
}
.memory-create-panel[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-panel {
margin-bottom: 1.25rem;
border-radius: 18px;
}
.memory-create-heading[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-heading {
align-items: flex-start;
flex-direction: column;
gap: 0.45rem;
padding: 1.15rem 1.15rem 1rem;
}
.memory-create-heading p[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-heading p {
max-width: 32rem;
text-align: left;
}
.memory-create-options[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-options {
grid-template-columns: 1fr;
}
.memory-create-option[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-option {
min-height: 78px;
padding: 0.8rem 1rem;
}
.memory-create-option + .memory-create-option[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-option + .memory-create-option {
border-top: 1px solid rgba(151, 104, 77, 0.14);
border-left: 0;
}
.memory-card[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-card {
border-radius: 18px;
padding: 1.2rem 1.25rem 1.25rem;
margin-bottom: 1.6rem;
box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
}
.empty-state[b-iw1lq54kp8],
[b-iw1lq54kp8] .empty-state {
border-radius: 18px;
padding: 3rem 1.35rem;
box-shadow: 0 14px 34px rgba(79, 59, 52, 0.1);
}
.empty-state h3[b-iw1lq54kp8],
[b-iw1lq54kp8] .empty-state h3 {
font-size: clamp(1.65rem, 7.5vw, 2rem);
line-height: 1.14;
}
.empty-state p[b-iw1lq54kp8],
[b-iw1lq54kp8] .empty-state p {
font-size: clamp(1rem, 4.2vw, 1.12rem);
line-height: 1.58;
}
.memory-excerpt[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-excerpt {
font-size: clamp(1rem, 4.4vw, 1.12rem);
line-height: 1.72;
}
}
@media (prefers-reduced-motion: reduce) {
.memory-create-option[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-option,
.memory-create-option-arrow[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-create-option-arrow {
transition: none;
}
}
@media (max-width: 420px) {
.vault-header[b-iw1lq54kp8],
[b-iw1lq54kp8] .vault-header {
padding-top: 22px;
}
.memory-card-head[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-card-head {
gap: 0.75rem;
}
.memory-avatar[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-avatar,
.memory-avatar-placeholder[b-iw1lq54kp8],
[b-iw1lq54kp8] .memory-avatar-placeholder {
width: 32px;
height: 32px;
}
}
.family-conversations-entry[b-iw1lq54kp8] { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; margin: .5rem 0 1rem; color: #765247; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.family-conversations-entry:focus-visible[b-iw1lq54kp8] { outline: 3px solid #765247; outline-offset: 4px; }
/* LovOne editorial application identity. */
.messages-container[b-iw1lq54kp8] { display: block; max-width: 1500px; }
.vault-header[b-iw1lq54kp8] { text-align: left; margin: 0; max-width: none; padding: 32px 40px 24px; }
.vault-header h1[b-iw1lq54kp8] { color: var(--lov-ink); font-weight: 450; font-size: clamp(2rem,3.5vw,3.2rem); }
.vault-subtitle[b-iw1lq54kp8] { margin-left: 0; color: var(--lov-muted); }
.main-content-area[b-iw1lq54kp8] { padding: 0 40px 40px; }
.memory-create-panel[b-iw1lq54kp8] { background: transparent; border: 0; box-shadow: none; padding: 0; margin-bottom: 24px; }
.memory-create-options[b-iw1lq54kp8] { gap: 12px; }
.memory-create-option[b-iw1lq54kp8] { border: 1px solid var(--lov-line); border-radius: 6px; background: var(--lov-surface); padding: 16px; }
.memory-create-option + .memory-create-option[b-iw1lq54kp8] { border-left: 1px solid var(--lov-line); }
.memory-create-option-photo[b-iw1lq54kp8] { background: var(--lov-green); color: var(--lov-on-green); }
.memory-create-option-photo :is(strong, small, .memory-create-option-icon)[b-iw1lq54kp8] { color: inherit; }
.memory-create-option-photo:hover[b-iw1lq54kp8] { background: var(--lov-green); }
.sidebar-content-area[b-iw1lq54kp8] { padding: 0; margin-bottom: 24px; }
.filters-panel-section > summary[b-iw1lq54kp8] { cursor: pointer; min-height: 44px; padding: 12px; margin: 0; color: var(--lov-ink); text-transform: none; font: 500 .9rem var(--font-sans); }
.filters-panel-section[open][b-iw1lq54kp8] { background: var(--lov-surface); }
.filters-panel-section .filter-pill-tray[b-iw1lq54kp8] { padding: 8px 12px 12px; }
.filter-pill.active[b-iw1lq54kp8] { background: var(--lov-selected); color: var(--lov-ink); }
@media(min-width: 1025px) {
.filters-panel[b-iw1lq54kp8] { position: relative; top: auto; display: flex; align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.filters-panel-header-row[b-iw1lq54kp8] { display: none; }
.search-section[b-iw1lq54kp8] { flex: 1 1 220px; margin: 0; }
.search-input[b-iw1lq54kp8] { border: 1px solid var(--lov-line); border-radius: 6px; background: var(--lov-surface); min-height: 46px; }
.filters-panel-section[b-iw1lq54kp8] { position: relative; flex: 0 1 auto; border: 1px solid var(--lov-line); border-radius: 6px; margin: 0; padding: 0; }
.filters-panel-section[open][b-iw1lq54kp8] { flex: 1 1 250px; }
.vault-masonry[b-iw1lq54kp8] { column-count: 3; column-gap: 24px; }
}
@media(max-width: 1024px) {
.vault-header[b-iw1lq54kp8] { padding: 24px 20px; }
.main-content-area[b-iw1lq54kp8] { padding: 0 20px 32px; }
.filters-panel-section[b-iw1lq54kp8] { border-bottom: 1px solid var(--lov-line); }
}
/* Keep foreground and surface paired in both day and night palettes. */
[b-iw1lq54kp8] .filters-panel { background: var(--lov-surface); color: var(--lov-ink); border-color: var(--lov-line); }
[b-iw1lq54kp8] .search-input, [b-iw1lq54kp8] .search-input:focus { background: var(--lov-surface); color: var(--lov-ink); border-color: var(--lov-line); }
[b-iw1lq54kp8] .search-input::placeholder { color: var(--lov-muted); }
@media(min-width: 1025px) { .filters-panel[b-iw1lq54kp8] { background: transparent; } }
[b-iw1lq54kp8] .filters-panel-header, [b-iw1lq54kp8] .mobile-filters-close, [b-iw1lq54kp8] .filters-panel-link { color: var(--lov-ink); }
[b-iw1lq54kp8] .mobile-filters-close, [b-iw1lq54kp8] .filter-pill { background: var(--lov-surface); color: var(--lov-ink); border-color: var(--lov-line); }
[b-iw1lq54kp8] .filter-pill:hover, [b-iw1lq54kp8] .filter-pill.active { background: var(--lov-selected); color: var(--lov-ink); border-color: var(--lov-line); }
[b-iw1lq54kp8] .filters-panel-link:hover { color: var(--lov-ink); }
[b-iw1lq54kp8] .filter-pill:focus-visible { outline: 3px solid var(--lov-green); outline-offset: 3px; }
/* Collection workspace: quiet paper surfaces keep photographs and writing primary. */
.vault-header[b-iw1lq54kp8] { padding-top: 48px; }
.memory-create-panel[b-iw1lq54kp8] { border-bottom: 1px solid var(--lov-line); padding-bottom: 28px; margin-bottom: 28px; }
.memory-create-heading h2[b-iw1lq54kp8] { font-size: 1.6rem; font-weight: 450; color: var(--lov-ink); }
.memory-create-option:not(.memory-create-option-photo)[b-iw1lq54kp8] { background: transparent; }
.memory-create-option:not(.memory-create-option-photo) :is(strong,.memory-create-option-icon)[b-iw1lq54kp8] { color: var(--lov-ink); }
.memory-create-option:not(.memory-create-option-photo) small[b-iw1lq54kp8] { color: var(--lov-muted); }
.memory-create-option-icon[b-iw1lq54kp8] { background: transparent; border: 0; box-shadow: none; }
.vault-cta.invitation-card[b-iw1lq54kp8] { background: var(--lov-surface); border: 1px solid var(--lov-line); border-radius: 4px; box-shadow: none; text-align: left; padding: 28px 32px; }
.vault-cta.invitation-card[b-iw1lq54kp8]::before, .vault-cta.invitation-card[b-iw1lq54kp8]::after, .vault-cta-icon[b-iw1lq54kp8], .empty-state-icon[b-iw1lq54kp8] { display: none; }
.vault-cta.invitation-card h2[b-iw1lq54kp8] { color: var(--lov-ink); font-size: 1.7rem; font-weight: 450; }
.vault-cta.invitation-card p[b-iw1lq54kp8] { color: var(--lov-muted); max-width: 65ch; margin-left: 0; line-height: 1.7; }
.vault-cta .cta-button[b-iw1lq54kp8], .empty-state-action[b-iw1lq54kp8] { background: var(--lov-green); color: var(--lov-on-green); border: 1px solid var(--lov-green); border-radius: 5px; box-shadow: none; min-height: 44px; }
.empty-state[b-iw1lq54kp8] { border: 0; border-top: 1px solid var(--lov-line); border-radius: 0; background: transparent; box-shadow: none; text-align: left; padding: 32px 0; }
.empty-state h3[b-iw1lq54kp8] { color: var(--lov-ink); font-weight: 450; }
.empty-state p[b-iw1lq54kp8] { color: var(--lov-muted); max-width: 65ch; margin-left: 0; line-height: 1.7; }
@media(max-width:700px) { .vault-header[b-iw1lq54kp8] { padding-top: 28px; } .vault-cta.invitation-card[b-iw1lq54kp8] { padding: 24px; } }
@media (min-width: 1025px) {
.messages-container[b-iw1lq54kp8] {
width: min(1500px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1500px) / 2));
margin-right: auto;
}
.messages-container.sidebar-hidden[b-iw1lq54kp8] {
width: min(1500px, 100%);
margin-inline: auto;
}
}
/* /Components/Pages/MemoryConversationPage.razor.rz.scp.css */
.conversation-layout[b-yzi5ohgui2] { width: 100%; min-height: 100vh; background: var(--lov-paper); }
.conversation-sidebar[b-yzi5ohgui2] { box-sizing: border-box; position: fixed; inset: 0 auto 0 0; z-index: 20; display: flex; width: 280px; flex-direction: column; padding: 1.25rem; border-right: 1px solid #efd8d0; background: var(--lov-paper); overflow-y: auto; }
.conversation-brand[b-yzi5ohgui2] { margin-bottom: 1rem; text-align: center; }
.conversation-brand img[b-yzi5ohgui2] { width: 154px; height: auto; }
.conversation-content[b-yzi5ohgui2] { margin-left: 280px; min-width: 0; }
.conversation-menu-overlay[b-yzi5ohgui2] { display: none; }
.memory-conversation-page[b-yzi5ohgui2] { max-width: 1040px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 3rem); color: #55453d; font-family: var(--font-sans, sans-serif); overflow-wrap: anywhere; }
.back-link[b-yzi5ohgui2] { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; color: #55453d; font-weight: 650; text-decoration: none; }
header[b-yzi5ohgui2] { max-width: 760px; margin: 3rem 0 2rem; }
.eyebrow[b-yzi5ohgui2] { margin: 0 0 .65rem; color: #996354; font: 700 .78rem/1.5 var(--font-sans, sans-serif); letter-spacing: .12em; text-transform: uppercase; }
h1[b-yzi5ohgui2], h2[b-yzi5ohgui2] { color: #332925; font-family: var(--font-serif, Georgia, serif); }
h1[b-yzi5ohgui2] { margin: 0 0 1rem; font-size: clamp(2.3rem, 5vw, 3.6rem); line-height: 1.1; font-weight: 550; letter-spacing: -.025em; }
h2[b-yzi5ohgui2] { margin: 0 0 .65rem; font-size: 1.65rem; font-weight: 550; line-height: 1.25; }
p[b-yzi5ohgui2] { line-height: 1.7; }
.introduction[b-yzi5ohgui2] { font-size: 1.12rem; max-width: 660px; }
.paper[b-yzi5ohgui2] { margin: 1.5rem 0; padding: clamp(1.2rem, 3vw, 2rem); border: 1px solid #e3cbbf; border-radius: 22px; background: #fffaf4; box-shadow: 0 8px 30px rgba(80,50,30,.035); }
.source[b-yzi5ohgui2] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 2rem; }
.source.text-only[b-yzi5ohgui2] { grid-template-columns: 1fr; }
.memory-photo[b-yzi5ohgui2] { display: block; width: 100%; max-height: 480px; object-fit: contain; border-radius: 9px; }
.memory-words[b-yzi5ohgui2] { white-space: pre-wrap; font: 400 1.2rem/1.8 var(--font-serif, Georgia, serif); }
.attribution[b-yzi5ohgui2] { font-weight: 650; margin-top: .25rem; }
.audience[b-yzi5ohgui2] { margin: -.5rem .4rem 2rem; font-size: .95rem; }
.section-heading[b-yzi5ohgui2], .recollection-heading[b-yzi5ohgui2] { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.recollections[b-yzi5ohgui2] { margin-top: 3rem; }
.recollection[b-yzi5ohgui2] { border-left: 4px solid #c5a297; }
.recollection time[b-yzi5ohgui2] { font-size: .85rem; }
.empty-replies[b-yzi5ohgui2] { padding: 1rem 0; font-style: italic; }
.notice[b-yzi5ohgui2] { padding: 1rem 1.2rem; background: #f6eadc; border-left: 3px solid #906959; border-radius: 6px; }
.error[b-yzi5ohgui2] { background: #fbe9e3; }
button[b-yzi5ohgui2] { min-height: 48px; padding: .7rem 1.2rem; border: 1px solid #765247; border-radius: 24px; background: #765247; color: #fffaf5; font: 600 1rem/1.5 var(--font-sans, sans-serif); cursor: pointer; }
button.secondary[b-yzi5ohgui2] { background: transparent; color: #765247; }
button:disabled[b-yzi5ohgui2] { opacity: .6; cursor: default; }
.consent[b-yzi5ohgui2] { display: flex; gap: .75rem; margin: 1rem 0; line-height: 1.6; }
.consent input[b-yzi5ohgui2] { flex-shrink: 0; width: 22px; height: 22px; accent-color: #765247; }
.invitation-ready[b-yzi5ohgui2] { display: grid; gap: .8rem; }
.invitation-ready button[b-yzi5ohgui2] { justify-self: start; }
.guest-join[b-yzi5ohgui2] { max-width: 640px; }
.guest-join form[b-yzi5ohgui2] { display: grid; gap: .8rem; margin: 1.5rem 0; }
.guest-join form button[b-yzi5ohgui2] { justify-self: start; }
.guest-join input:not([type="checkbox"])[b-yzi5ohgui2] { box-sizing: border-box; width: 100%; min-height: 48px; border: 1px solid #ae8d80; border-radius: 12px; padding: .8rem 1rem; color: #55453d; background: #fffcf8; font: inherit; }
textarea[b-yzi5ohgui2] { box-sizing: border-box; width: 100%; padding: 1rem; border: 1px solid #ae8d80; border-radius: 12px; font: inherit; color: #55453d; background: #fffcf8; resize: vertical; overflow-wrap: anywhere; }
.people ul[b-yzi5ohgui2] { padding: 0; list-style: none; }
.people li[b-yzi5ohgui2] { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-top: 1px solid #e3cbbf; }
.people li div[b-yzi5ohgui2] { display: grid; gap: .3rem; }
.people li span[b-yzi5ohgui2] { font-size: .9rem; }
.people li .invitation-actions[b-yzi5ohgui2] { flex-basis: 100%; min-width: 0; justify-items: start; }
.invitation-actions details[b-yzi5ohgui2] { width: 100%; }
.conversation-summary[b-yzi5ohgui2] { display: block; color: #55453d; text-decoration: none; }
.conversation-summary h2[b-yzi5ohgui2] { margin-top: .65rem; }
.withdraw-access[b-yzi5ohgui2] { margin-top: 2rem; }
summary[b-yzi5ohgui2] { min-height: 44px; cursor: pointer; line-height: 1.6; }
:is(button, a, input, textarea, summary):focus-visible[b-yzi5ohgui2] { outline: 3px solid #765247; outline-offset: 4px; }
@media (max-width: 640px) { header[b-yzi5ohgui2] { margin-top: 1.75rem; } .source[b-yzi5ohgui2] { grid-template-columns: 1fr; gap: 1.25rem; } .memory-photo[b-yzi5ohgui2] { max-height: 360px; } .paper[b-yzi5ohgui2] { border-radius: 16px; } }
@media (max-width: 1024px) {
.conversation-sidebar[b-yzi5ohgui2] { z-index: 1200; width: min(82vw, 320px); visibility: hidden; transform: translateX(-110%); }
.conversation-sidebar.is-open[b-yzi5ohgui2] { visibility: visible; transform: translateX(0); }
.conversation-menu-overlay.is-open[b-yzi5ohgui2] { position: fixed; inset: 0; z-index: 1100; display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: rgba(44,33,29,.38); }
.conversation-content[b-yzi5ohgui2] { margin-left: 0; padding-top: var(--mobile-topbar-height, 60px); }
}
/* /Components/Pages/MyStory.razor.rz.scp.css */
.my-story-layout[b-d3rvyw0rnr] {
width: 100%;
min-height: 100vh;
background: var(--lov-paper);
color: #4f4a45;
}
.my-story-sidebar[b-d3rvyw0rnr] {
position: fixed;
inset: 0 auto 0 0;
z-index: 20;
display: flex;
width: 280px;
flex-direction: column;
padding: 1.25rem;
border-right: 1px solid #efd8d0;
background: var(--lov-paper);
}
.my-story-sidebar__brand[b-d3rvyw0rnr] {
margin: 0 0 1rem;
text-align: center;
}
.my-story-sidebar__brand img[b-d3rvyw0rnr] {
width: 154px;
height: auto;
}
.my-story-sidebar-overlay[b-d3rvyw0rnr] {
display: none;
}
.my-story-main[b-d3rvyw0rnr] {
width: min(calc(100% - 280px), 780px);
margin-left: calc(280px + max(0px, (100vw - 280px - 780px) / 2));
padding: 4.5rem 2rem 5rem;
}
.my-story-back[b-d3rvyw0rnr] {
display: inline-flex;
align-items: center;
gap: .45rem;
min-height: 44px;
max-width: calc(100% - 2rem);
margin: 0 1rem 1.5rem;
color: #4d4039;
font-weight: 600;
line-height: 1.5;
text-decoration: none;
}
.my-story-back:hover[b-d3rvyw0rnr] {
text-decoration: underline;
text-underline-offset: .2em;
}
.my-story-back:focus-visible[b-d3rvyw0rnr] {
outline: 3px solid #79564d;
outline-offset: 4px;
border-radius: 4px;
}
.my-story-hero[b-d3rvyw0rnr],
.my-story-card[b-d3rvyw0rnr],
.my-story-message[b-d3rvyw0rnr] {
box-sizing: border-box;
width: 100%;
border-radius: 20px;
}
.my-story-hero[b-d3rvyw0rnr] {
margin-bottom: 1.4rem;
padding: 1rem 1rem .75rem;
}
.my-story-eyebrow[b-d3rvyw0rnr] {
margin: 0 0 .55rem;
color: #84635c;
font-size: .78rem;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.my-story-hero h1[b-d3rvyw0rnr],
.my-story-message h1[b-d3rvyw0rnr],
.my-story-card h2[b-d3rvyw0rnr] {
margin: 0;
color: #4d4039;
font-family: var(--font-serif);
}
.my-story-hero h1[b-d3rvyw0rnr],
.my-story-message h1[b-d3rvyw0rnr] {
font-size: clamp(2.25rem, 5vw, 3.3rem);
line-height: 1.12;
}
.my-story-hero > p:not(.my-story-eyebrow):not(.my-story-prompt)[b-d3rvyw0rnr],
.my-story-card__heading p[b-d3rvyw0rnr],
.my-story-message p[b-d3rvyw0rnr],
.my-story-note[b-d3rvyw0rnr],
.my-story-private-note[b-d3rvyw0rnr] {
max-width: 62ch;
color: #695f59;
line-height: 1.65;
}
.my-story-prompt[b-d3rvyw0rnr] {
margin: 1.2rem 0 0;
padding: 1rem 1.1rem;
border-left: 3px solid #b58f80;
border-radius: 0 12px 12px 0;
background: rgba(255, 255, 255, .42);
color: #5d4a42;
font-family: var(--font-serif);
font-size: 1.08rem;
line-height: 1.55;
}
.my-story-card[b-d3rvyw0rnr],
.my-story-message[b-d3rvyw0rnr] {
margin-bottom: 1.15rem;
padding: clamp(1.2rem, 3vw, 2rem);
border: 1px solid rgba(167, 129, 113, .2);
background: rgba(255, 253, 250, .84);
box-shadow: 0 14px 34px rgba(79, 59, 52, .08);
}
.my-story-new-entry[b-d3rvyw0rnr] {
display: flex;
justify-content: flex-end;
margin: 0 0 1.15rem;
}
.my-story-saved[b-d3rvyw0rnr] {
margin-top: 2rem;
}
.my-story-journey-question[b-d3rvyw0rnr] {
margin: 1rem 0 1.5rem;
padding: 1rem 1.2rem;
border-left: 3px solid #79564d;
background: #fffaf4;
color: #4d4039;
font-family: var(--font-serif);
font-size: 1.2rem;
line-height: 1.65;
}
.my-story-editor.my-story-title-input[b-d3rvyw0rnr] {
min-height: 48px;
margin-bottom: 1rem;
}
.my-story-card.my-story-kept[b-d3rvyw0rnr] {
border-left: 4px solid #79564d;
}
.my-story-saved-card h2[b-d3rvyw0rnr] {
overflow-wrap: anywhere;
}
.my-story-family-invite[b-d3rvyw0rnr] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-top: 2rem;
border-color: rgba(166, 113, 92, .24);
background: linear-gradient(135deg, rgba(255, 251, 248, .98), rgba(250, 236, 228, .82));
}
.my-story-family-invite h2[b-d3rvyw0rnr] {
margin: .15rem 0 .55rem;
}
.my-story-family-invite p:last-child[b-d3rvyw0rnr] {
margin: 0;
color: #695f59;
line-height: 1.6;
}
.my-story-family-invite > button[b-d3rvyw0rnr] {
flex: 0 0 auto;
}
.my-story-saved__heading[b-d3rvyw0rnr] {
margin: 0 0 1rem;
padding: 0 1rem;
}
.my-story-saved__heading h2[b-d3rvyw0rnr] {
margin: 0;
color: #4d4039;
font-family: var(--font-serif);
font-size: clamp(1.6rem, 3vw, 2.1rem);
}
.my-story-saved__heading p[b-d3rvyw0rnr] {
margin: .4rem 0 0;
color: #695f59;
line-height: 1.6;
}
.my-story-saved-text[b-d3rvyw0rnr] {
margin: 0;
color: #514640;
line-height: 1.7;
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.my-story-card__heading[b-d3rvyw0rnr] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.35rem;
}
.my-story-card__heading h2[b-d3rvyw0rnr] {
font-size: clamp(1.45rem, 3vw, 1.9rem);
}
.my-story-card__heading p[b-d3rvyw0rnr] {
margin: .55rem 0 0;
}
.my-story-status[b-d3rvyw0rnr],
.my-story-duration[b-d3rvyw0rnr] {
display: inline-flex;
flex: 0 0 auto;
padding: .38rem .64rem;
border-radius: 999px;
background: #f7dfd5;
color: #714f45;
font-size: .8rem;
font-weight: 700;
line-height: 1.25;
text-align: center;
}
.my-story-label[b-d3rvyw0rnr] {
display: block;
margin: 0 0 .55rem;
color: #514640;
font-weight: 700;
}
.my-story-editor[b-d3rvyw0rnr] {
box-sizing: border-box;
width: 100%;
resize: vertical;
min-height: 11rem;
padding: 1rem;
border: 1px solid #d9bfb4;
border-radius: 12px;
background: rgba(255, 255, 255, .88);
color: #403733;
font: inherit;
line-height: 1.65;
}
.my-story-editor:focus-visible[b-d3rvyw0rnr],
.my-story-primary:focus-visible[b-d3rvyw0rnr],
.my-story-secondary:focus-visible[b-d3rvyw0rnr],
.my-story-danger:focus-visible[b-d3rvyw0rnr],
.my-story-mode:focus-visible[b-d3rvyw0rnr] {
outline: 3px solid #875e50;
outline-offset: 3px;
}
.my-story-editor:disabled[b-d3rvyw0rnr] {
cursor: not-allowed;
background: #f2e7df;
color: #82766f;
}
.my-story-consent[b-d3rvyw0rnr] {
display: flex;
align-items: flex-start;
gap: .7rem;
margin-top: 1rem;
color: #554c47;
line-height: 1.5;
}
.my-story-consent input[b-d3rvyw0rnr] {
width: 1.15rem;
height: 1.15rem;
margin-top: .18rem;
accent-color: #875e50;
}
.my-story-consent small[b-d3rvyw0rnr] {
display: block;
margin-top: .2rem;
color: #746861;
font-size: .86rem;
line-height: 1.4;
}
.my-story-consent--optional[b-d3rvyw0rnr] {
padding: .8rem .9rem;
border: 1px solid rgba(135, 94, 80, .18);
border-radius: 14px;
background: rgba(255, 251, 247, .72);
}
.my-story-private-note[b-d3rvyw0rnr] {
margin: .75rem 0 0;
font-size: .94rem;
}
.my-story-note[b-d3rvyw0rnr] {
margin: .7rem 0 0;
font-size: .94rem;
}
.my-story-actions[b-d3rvyw0rnr] {
display: flex;
flex-wrap: wrap;
gap: .7rem;
margin-top: 1.2rem;
}
.my-story-primary[b-d3rvyw0rnr],
.my-story-secondary[b-d3rvyw0rnr],
.my-story-danger[b-d3rvyw0rnr] {
min-height: 2.75rem;
padding: .64rem 1rem;
border-radius: 10px;
cursor: pointer;
font: inherit;
font-weight: 700;
}
.my-story-primary[b-d3rvyw0rnr] {
border: 1px solid #765247;
background: #765247;
color: #fffaf6;
}
.my-story-secondary[b-d3rvyw0rnr] {
border: 1px solid #b68b7d;
background: transparent;
color: #67473e;
}
.my-story-danger[b-d3rvyw0rnr] {
border: 1px solid #a4665a;
background: transparent;
color: #8a4035;
}
.my-story-primary:hover:not(:disabled)[b-d3rvyw0rnr] {
background: #604138;
}
.my-story-secondary:hover:not(:disabled)[b-d3rvyw0rnr],
.my-story-danger:hover:not(:disabled)[b-d3rvyw0rnr] {
background: rgba(255, 255, 255, .68);
}
.my-story-primary:disabled[b-d3rvyw0rnr],
.my-story-secondary:disabled[b-d3rvyw0rnr],
.my-story-danger:disabled[b-d3rvyw0rnr] {
cursor: not-allowed;
opacity: .55;
}
.my-story-notice[b-d3rvyw0rnr],
.my-story-error[b-d3rvyw0rnr] {
margin: 0 0 1rem;
padding: .85rem 1rem;
border-radius: 10px;
line-height: 1.5;
}
.my-story-notice[b-d3rvyw0rnr] {
border: 1px solid #aabbb0;
background: #edf4ee;
color: #395549;
}
.my-story-error[b-d3rvyw0rnr] {
border: 1px solid #d7a49a;
background: #fff1ed;
color: #7f3f34;
}
[b-d3rvyw0rnr] .memory-voice-recorder {
margin-top: .35rem;
}
.my-story-mode-grid[b-d3rvyw0rnr] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .85rem;
}
.my-story-mode[b-d3rvyw0rnr] {
display: flex;
min-height: 10rem;
flex-direction: column;
align-items: flex-start;
gap: .9rem;
padding: 1.1rem;
border: 1px solid #d8bcb0;
border-radius: 16px;
background: rgba(255, 255, 255, .48);
color: #594941;
cursor: pointer;
font: inherit;
text-align: left;
transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.my-story-mode:hover[b-d3rvyw0rnr] {
transform: translateY(-2px);
border-color: #a97c6d;
background: rgba(255, 255, 255, .76);
}
.my-story-mode svg[b-d3rvyw0rnr] {
width: 2rem;
height: 2rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.45;
}
.my-story-mode span[b-d3rvyw0rnr] {
display: grid;
gap: .35rem;
color: #695f59;
line-height: 1.45;
}
.my-story-mode strong[b-d3rvyw0rnr] {
color: #4d4039;
font-family: var(--font-serif);
font-size: 1.18rem;
}
.my-story-mode--interview[b-d3rvyw0rnr] {
border-color: #c99d8c;
background: linear-gradient(145deg, rgba(250, 228, 216, .72), rgba(255, 255, 255, .55));
}
.my-story-interview[b-d3rvyw0rnr] {
border-color: rgba(154, 105, 88, .34);
background:
radial-gradient(circle at 100% 0, rgba(244, 207, 190, .42), transparent 34%),
rgba(255, 253, 250, .92);
}
.my-story-interview__acknowledgement[b-d3rvyw0rnr] {
margin: 0 0 1rem;
color: #674b41;
font-family: var(--font-serif);
font-size: 1.08rem;
line-height: 1.55;
}
.my-story-interview__question[b-d3rvyw0rnr] {
margin: 1rem 0 1.25rem;
padding: 1.1rem 1.2rem;
border-left: 3px solid #a87868;
border-radius: 0 14px 14px 0;
background: rgba(250, 232, 220, .62);
}
.my-story-interview__question span[b-d3rvyw0rnr],
.my-story-insight span[b-d3rvyw0rnr] {
color: #87665b;
font-size: .75rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.my-story-interview__question p[b-d3rvyw0rnr] {
margin: .35rem 0 0;
color: #4d4039;
font-family: var(--font-serif);
font-size: clamp(1.25rem, 3vw, 1.55rem);
line-height: 1.45;
}
.my-story-interview__progress[b-d3rvyw0rnr] {
margin: 1rem 0 0;
color: #72544a;
font-weight: 700;
}
.my-story-interview__voice[b-d3rvyw0rnr] {
margin-top: 1.2rem;
padding-top: 1.2rem;
border-top: 1px solid rgba(167, 129, 113, .24);
}
.my-story-interview__voice h3[b-d3rvyw0rnr],
.my-story-insights h3[b-d3rvyw0rnr] {
margin: 0;
color: #4d4039;
font-family: var(--font-serif);
font-size: 1.25rem;
}
.my-story-interview__voice > p[b-d3rvyw0rnr],
.my-story-insights > p[b-d3rvyw0rnr] {
margin: .4rem 0 0;
color: #695f59;
line-height: 1.55;
}
.my-story-interview__session-actions[b-d3rvyw0rnr] {
padding-top: .25rem;
}
.my-story-insights[b-d3rvyw0rnr] {
margin-top: 1.6rem;
padding-top: 1.35rem;
border-top: 1px solid rgba(167, 129, 113, .28);
}
.my-story-insight[b-d3rvyw0rnr] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: .8rem;
padding: .9rem 1rem;
border: 1px solid rgba(167, 129, 113, .24);
border-radius: 12px;
background: rgba(255, 255, 255, .52);
}
.my-story-insight p[b-d3rvyw0rnr] {
margin: .3rem 0 0;
color: #514640;
line-height: 1.5;
}
.my-story-insight .my-story-actions[b-d3rvyw0rnr] {
flex: 0 0 auto;
margin-top: 0;
}
.my-story-view-tabs[b-d3rvyw0rnr] {
display: flex;
flex-wrap: wrap;
gap: .35rem;
margin: 0 1rem 1.35rem;
border-bottom: 1px solid rgba(167, 129, 113, .28);
}
.my-story-view-tabs[role="tablist"][b-d3rvyw0rnr] {
flex-wrap: nowrap;
gap: .2rem;
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scrollbar-width: none;
}
.my-story-view-tabs[role="tablist"][b-d3rvyw0rnr]::-webkit-scrollbar { display: none; }
.my-story-view-tabs[role="tablist"] .my-story-view-tab[b-d3rvyw0rnr] { flex: 0 0 auto; padding-inline: .65rem; white-space: nowrap; }
.my-story-view-tab[b-d3rvyw0rnr] {
overflow-wrap: anywhere;
position: relative;
display: inline-flex;
min-height: 2.75rem;
align-items: center;
padding: .55rem 1rem .7rem;
color: #735f56;
font-weight: 700;
text-decoration: none;
}
.my-story-view-tab[b-d3rvyw0rnr]::after {
position: absolute;
right: .75rem;
bottom: -1px;
left: .75rem;
height: 3px;
border-radius: 3px 3px 0 0;
background: transparent;
content: "";
}
.my-story-view-tab:hover[b-d3rvyw0rnr] {
color: #4d4039;
}
.my-story-view-tab.is-active[b-d3rvyw0rnr] {
color: #4d4039;
}
.my-story-view-tab.is-active[b-d3rvyw0rnr]::after {
background: #b47764;
}
.my-story-view-tab:focus-visible[b-d3rvyw0rnr],
.my-story-portrait__token button:focus-visible[b-d3rvyw0rnr],
.my-story-portrait__suggestion:focus-visible[b-d3rvyw0rnr],
.my-story-portrait__choice-group button:focus-visible[b-d3rvyw0rnr],
.my-story-portrait__remove-image:focus-visible[b-d3rvyw0rnr] {
outline: 3px solid #875e50;
outline-offset: 3px;
}
.my-story-portrait[b-d3rvyw0rnr] {
box-sizing: border-box;
width: 100%;
overflow: hidden;
padding: clamp(1.25rem, 3.5vw, 2.25rem);
border: 1px solid rgba(167, 129, 113, .24);
border-radius: 22px;
background: rgba(255, 253, 250, .9);
box-shadow: 0 16px 38px rgba(79, 59, 52, .08);
}
.my-story-portrait__heading[b-d3rvyw0rnr] {
display: grid;
grid-template-columns: minmax(9rem, 11rem) minmax(0, 1fr) auto;
align-items: flex-start;
gap: 1.25rem;
}
.my-story-portrait__identity[b-d3rvyw0rnr] {
display: grid;
gap: .85rem;
}
.my-story-portrait__image[b-d3rvyw0rnr] {
position: relative;
display: grid;
width: 100%;
max-width: 10rem;
aspect-ratio: 4 / 5;
place-items: center;
overflow: hidden;
padding: 0;
border: 1px solid rgba(161, 119, 101, .34);
border-radius: 18px;
background:
linear-gradient(145deg, rgba(255, 251, 245, .9), rgba(242, 218, 202, .8)),
#f8e8dc;
box-shadow:
0 12px 24px rgba(77, 58, 50, .11),
inset 0 0 0 6px rgba(255, 253, 250, .7);
cursor: pointer;
font: inherit;
transition:
transform .2s ease,
border-color .2s ease,
box-shadow .2s ease;
}
.my-story-portrait__image[b-d3rvyw0rnr]::after {
position: absolute;
inset: .38rem;
border: 1px solid rgba(255, 255, 255, .72);
border-radius: 13px;
content: "";
pointer-events: none;
}
.my-story-portrait__image img[b-d3rvyw0rnr] {
width: 100%;
height: 100%;
object-fit: cover;
}
.my-story-portrait__image > span:first-child[b-d3rvyw0rnr] {
color: #835f52;
font-family: var(--font-serif);
font-size: clamp(2.5rem, 7vw, 3.6rem);
}
.my-story-portrait__image:hover:not(:disabled)[b-d3rvyw0rnr] {
border-color: rgba(132, 89, 77, .62);
box-shadow:
0 16px 28px rgba(77, 58, 50, .16),
inset 0 0 0 6px rgba(255, 253, 250, .76);
transform: translateY(-2px);
}
.my-story-portrait__image:focus-visible[b-d3rvyw0rnr] {
outline: 3px solid #875e50;
outline-offset: 4px;
}
.my-story-portrait__image:disabled[b-d3rvyw0rnr] {
cursor: default;
}
.my-story-portrait__edit-mark[b-d3rvyw0rnr] {
position: absolute;
right: .7rem;
bottom: .7rem;
z-index: 1;
display: grid;
width: 2.35rem;
height: 2.35rem;
place-items: center;
border: 1px solid rgba(132, 89, 77, .25);
border-radius: 999px;
background: rgba(255, 253, 250, .94);
box-shadow: 0 5px 14px rgba(77, 58, 50, .14);
color: #785448;
}
.my-story-portrait__edit-mark svg[b-d3rvyw0rnr] {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.my-story-portrait__image:disabled .my-story-portrait__edit-mark[b-d3rvyw0rnr] {
display: none;
}
.my-story-portrait__image-editor[b-d3rvyw0rnr] {
box-sizing: border-box;
display: grid;
width: 100%;
gap: .7rem;
margin-top: 1.15rem;
min-width: 0;
padding: .85rem;
border: 1px solid rgba(167, 129, 113, .24);
border-radius: 14px;
background: #fbf2eb;
}
.my-story-portrait__image-editor p[b-d3rvyw0rnr],
.my-story-portrait__image-editor small[b-d3rvyw0rnr] {
margin: 0;
color: #6b5c55;
font-size: .82rem;
line-height: 1.45;
}
.my-story-portrait__image-editor small[b-d3rvyw0rnr] {
color: #89756c;
}
.my-story-portrait__image-actions[b-d3rvyw0rnr] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
gap: .5rem;
}
.my-story-portrait__image-actions > button[b-d3rvyw0rnr] {
box-sizing: border-box;
display: inline-flex;
width: 100%;
min-height: 2.75rem;
align-items: center;
justify-content: center;
padding: .62rem .8rem;
border-radius: 11px;
cursor: pointer;
font: inherit;
font-size: .86rem;
font-weight: 750;
text-align: center;
}
.my-story-portrait__image-actions .my-story-secondary[b-d3rvyw0rnr] {
padding: .62rem .8rem;
font-size: .86rem;
}
.my-story-portrait__remove-image[b-d3rvyw0rnr] {
border: 0;
background: transparent;
color: #9a4537;
text-decoration: underline;
text-underline-offset: .18em;
}
.my-story-portrait__heading h2[b-d3rvyw0rnr],
.my-story-portrait__section h3[b-d3rvyw0rnr],
.my-story-portrait__discoveries h3[b-d3rvyw0rnr],
.my-story-portrait__interview h3[b-d3rvyw0rnr],
.my-story-portrait__preview h3[b-d3rvyw0rnr] {
margin: 0;
color: #4d4039;
font-family: var(--font-serif);
}
.my-story-portrait__heading h2[b-d3rvyw0rnr] {
font-size: clamp(1.8rem, 4vw, 2.45rem);
}
.my-story-portrait__heading-copy > p:last-child[b-d3rvyw0rnr],
.my-story-portrait__section-heading p[b-d3rvyw0rnr],
.my-story-portrait__discoveries > div > p:last-child[b-d3rvyw0rnr],
.my-story-portrait__interview-copy > p:last-child[b-d3rvyw0rnr],
.my-story-portrait__preview > div > p:last-child[b-d3rvyw0rnr] {
margin: .45rem 0 0;
color: #695f59;
line-height: 1.6;
}
.my-story-portrait__privacy[b-d3rvyw0rnr] {
display: grid;
gap: .18rem;
margin: 1.3rem 0 0;
padding: .8rem 1rem;
border-radius: 12px;
background: #edf4ee;
color: #496055;
line-height: 1.45;
}
.my-story-portrait__privacy span[b-d3rvyw0rnr] {
font-size: .92rem;
}
.my-story-portrait__summary[b-d3rvyw0rnr] {
margin: 1.25rem 0 0;
padding: clamp(1.15rem, 3vw, 1.65rem);
border-left: 3px solid #b47764;
border-radius: 0 16px 16px 0;
background: #fbefe6;
}
.my-story-portrait__summary > span[b-d3rvyw0rnr] {
color: #87665b;
font-size: .74rem;
font-weight: 800;
letter-spacing: .09em;
text-transform: uppercase;
}
.my-story-portrait__summary p[b-d3rvyw0rnr] {
margin: .45rem 0 0;
color: #493d37;
font-family: var(--font-serif);
font-size: clamp(1.16rem, 2.5vw, 1.38rem);
line-height: 1.55;
}
.my-story-portrait__discoveries[b-d3rvyw0rnr] {
margin-top: 1.55rem;
padding: 1.3rem;
border: 1px solid rgba(167, 129, 113, .23);
border-radius: 16px;
background: rgba(250, 232, 220, .42);
}
.my-story-portrait__discoveries h3[b-d3rvyw0rnr],
.my-story-portrait__preview h3[b-d3rvyw0rnr] {
font-size: 1.35rem;
}
.my-story-portrait__sections[b-d3rvyw0rnr] {
margin-top: 1.6rem;
border-top: 1px solid rgba(167, 129, 113, .25);
}
.my-story-portrait__section[b-d3rvyw0rnr] {
padding: 1.55rem 0;
border-bottom: 1px solid rgba(167, 129, 113, .25);
}
.my-story-portrait__section h3[b-d3rvyw0rnr] {
font-size: clamp(1.3rem, 2.5vw, 1.55rem);
}
.my-story-portrait__tokens[b-d3rvyw0rnr] {
display: flex;
flex-wrap: wrap;
gap: .6rem;
margin-top: 1rem;
}
.my-story-portrait__token[b-d3rvyw0rnr] {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
gap: .42rem;
padding: .45rem .55rem .45rem .8rem;
border: 1px solid #d8c1b6;
border-radius: 999px;
background: #fffaf6;
color: #584941;
font-weight: 650;
line-height: 1.25;
}
.my-story-portrait__token--preferred[b-d3rvyw0rnr] {
border-color: #b8c8bd;
background: #f0f6f1;
}
.my-story-portrait__token--avoided[b-d3rvyw0rnr] {
border-color: #dfbeb5;
background: #fff2ee;
}
.my-story-portrait__token button[b-d3rvyw0rnr] {
display: inline-grid;
width: 2.75rem;
height: 2.75rem;
place-items: center;
margin: -.45rem -.55rem -.45rem 0;
border: 0;
border-radius: 999px;
background: transparent;
color: #84594d;
cursor: pointer;
font: inherit;
font-size: 1.25rem;
}
.my-story-portrait__token button:hover[b-d3rvyw0rnr] {
background: rgba(132, 89, 77, .09);
}
.my-story-portrait__empty[b-d3rvyw0rnr] {
margin: .9rem 0 0;
color: #8a7770;
font-style: italic;
line-height: 1.55;
}
.my-story-portrait__suggestions[b-d3rvyw0rnr] {
margin-top: 1.2rem;
padding-top: 1rem;
border-top: 1px dashed rgba(167, 129, 113, .28);
}
.my-story-portrait__suggestions > span[b-d3rvyw0rnr] {
display: block;
margin-bottom: .65rem;
color: #75645c;
font-size: .86rem;
font-weight: 700;
}
.my-story-portrait__suggestions > div[b-d3rvyw0rnr] {
display: flex;
flex-wrap: wrap;
gap: .55rem;
}
.my-story-portrait__suggestion[b-d3rvyw0rnr] {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
gap: .4rem;
padding: .55rem .8rem;
border: 1px dashed #c7a99d;
border-radius: 999px;
background: transparent;
color: #6b544b;
cursor: pointer;
font: inherit;
font-weight: 650;
}
.my-story-portrait__suggestion:hover[b-d3rvyw0rnr] {
border-style: solid;
background: #fffaf6;
}
.my-story-portrait__choice-group[b-d3rvyw0rnr] {
margin: 1.1rem 0 0;
padding: 0;
border: 0;
}
.my-story-portrait__choice-group legend[b-d3rvyw0rnr] {
margin-bottom: .6rem;
color: #5a4b44;
font-weight: 750;
}
.my-story-portrait__choice-group > div[b-d3rvyw0rnr] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .55rem;
}
.my-story-portrait__choice-group button[b-d3rvyw0rnr] {
min-height: 3rem;
padding: .65rem .7rem;
border: 1px solid #d8c1b6;
border-radius: 12px;
background: #fffaf6;
color: #6a5951;
cursor: pointer;
font: inherit;
font-weight: 700;
}
.my-story-portrait__choice-group button.is-selected[b-d3rvyw0rnr] {
border-color: #8d6759;
background: #f8dfd4;
color: #4d4039;
box-shadow: inset 0 0 0 1px #8d6759;
}
.my-story-portrait__preferences[b-d3rvyw0rnr] {
display: grid;
gap: .65rem;
margin: 1rem 0 0;
}
.my-story-portrait__preferences > div[b-d3rvyw0rnr] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
padding: .75rem 0;
border-bottom: 1px dashed rgba(167, 129, 113, .25);
}
.my-story-portrait__preferences dt[b-d3rvyw0rnr] {
color: #75645c;
font-weight: 700;
}
.my-story-portrait__preferences dd[b-d3rvyw0rnr] {
margin: 0;
color: #4d4039;
font-weight: 750;
text-align: right;
}
.my-story-portrait__edit-actions[b-d3rvyw0rnr] {
justify-content: flex-end;
}
.my-story-portrait__interview[b-d3rvyw0rnr] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
margin-top: 1.7rem;
padding: 1.3rem;
border: 1px solid rgba(164, 126, 108, .3);
border-radius: 18px;
background:
radial-gradient(circle at 8% 10%, rgba(255, 255, 255, .82), transparent 34%),
linear-gradient(135deg, #f9e6db 0%, #f6eee7 100%);
}
.my-story-portrait__interview-icon[b-d3rvyw0rnr] {
display: inline-grid;
width: 3.25rem;
height: 3.25rem;
place-items: center;
border: 1px solid rgba(164, 126, 108, .35);
border-radius: 50%;
background: rgba(255, 253, 250, .76);
color: #8a5f50;
}
.my-story-portrait__interview-icon svg[b-d3rvyw0rnr] {
width: 1.55rem;
height: 1.55rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
}
.my-story-portrait__interview h3[b-d3rvyw0rnr] {
font-size: 1.35rem;
}
.my-story-portrait__interview-action[b-d3rvyw0rnr] {
min-width: 10.5rem;
}
.my-story-portrait__interview-question[b-d3rvyw0rnr] {
grid-column: 2 / -1;
padding: 1rem 1.1rem;
border-left: 3px solid #a87868;
border-radius: 0 14px 14px 0;
background: rgba(255, 253, 250, .8);
}
.my-story-portrait__interview-question span[b-d3rvyw0rnr] {
color: #87665b;
font-size: .75rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.my-story-portrait__interview-question p[b-d3rvyw0rnr] {
margin: .38rem 0 0;
color: #4d4039;
font-family: var(--font-serif);
font-size: 1.12rem;
line-height: 1.5;
}
.my-story-portrait__preview[b-d3rvyw0rnr] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1rem;
margin-top: 1.7rem;
padding: 1.25rem;
border-radius: 16px;
background: #f7eee7;
}
.my-story-portrait__preview-question[b-d3rvyw0rnr] {
grid-column: 1 / -1;
padding: 1.1rem 1.2rem;
border-left: 3px solid #a87868;
border-radius: 0 14px 14px 0;
background: rgba(255, 253, 250, .88);
}
.my-story-portrait__preview-question span[b-d3rvyw0rnr] {
color: #87665b;
font-size: .75rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.my-story-portrait__preview-question p[b-d3rvyw0rnr] {
margin: .38rem 0 0;
color: #4d4039;
font-family: var(--font-serif);
font-size: 1.18rem;
line-height: 1.5;
}
@media (max-width: 1024px) {
.my-story-sidebar[b-d3rvyw0rnr] {
width: min(82vw, 320px);
transform: translateX(-110%);
transition: transform .25s ease;
}
.my-story-sidebar.is-open[b-d3rvyw0rnr] {
transform: translateX(0);
}
.my-story-sidebar-overlay.is-open[b-d3rvyw0rnr] {
position: fixed;
inset: 0;
z-index: 15;
display: block;
width: 100%;
height: 100%;
border: 0;
background: rgba(44, 33, 29, .38);
}
.my-story-main[b-d3rvyw0rnr] {
width: min(100%, 780px);
margin: 0 auto;
padding: calc(var(--mobile-topbar-height, 60px) + 1.4rem) 1rem 3rem;
}
}
@media (max-width: 620px) {
.my-story-main[b-d3rvyw0rnr] {
padding-right: var(--mobile-page-margin, 12px);
padding-left: var(--mobile-page-margin, 12px);
}
.my-story-hero[b-d3rvyw0rnr] {
padding-right: .4rem;
padding-left: .4rem;
}
.my-story-back[b-d3rvyw0rnr] {
max-width: calc(100% - .8rem);
margin-right: .4rem;
margin-left: .4rem;
}
.my-story-card[b-d3rvyw0rnr],
.my-story-message[b-d3rvyw0rnr] {
padding: 1.15rem;
border-radius: 16px;
}
.my-story-card__heading[b-d3rvyw0rnr] {
flex-direction: column;
}
.my-story-family-invite[b-d3rvyw0rnr] {
align-items: stretch;
flex-direction: column;
}
.my-story-family-invite > button[b-d3rvyw0rnr] {
width: 100%;
}
.my-story-status[b-d3rvyw0rnr],
.my-story-duration[b-d3rvyw0rnr] {
align-self: flex-start;
}
.my-story-actions > button[b-d3rvyw0rnr] {
width: 100%;
}
.my-story-mode-grid[b-d3rvyw0rnr] {
grid-template-columns: 1fr;
}
.my-story-mode[b-d3rvyw0rnr] {
min-height: auto;
flex-direction: row;
align-items: center;
}
.my-story-insight[b-d3rvyw0rnr] {
align-items: stretch;
flex-direction: column;
}
.my-story-view-tabs[b-d3rvyw0rnr] {
margin-right: .4rem;
margin-left: .4rem;
}
.my-story-view-tab[b-d3rvyw0rnr] {
min-width: 0;
min-height: 3.15rem;
flex: 1 1 0;
justify-content: center;
padding: .55rem .35rem .7rem;
font-size: .92rem;
line-height: 1.2;
text-align: center;
}
.my-story-view-tab[b-d3rvyw0rnr]::after {
right: .45rem;
left: .45rem;
}
.my-story-portrait[b-d3rvyw0rnr] {
padding: 1.15rem;
border-radius: 16px;
}
.my-story-portrait__heading[b-d3rvyw0rnr],
.my-story-portrait__interview[b-d3rvyw0rnr],
.my-story-portrait__preview[b-d3rvyw0rnr] {
grid-template-columns: 1fr;
align-items: stretch;
}
.my-story-portrait__identity[b-d3rvyw0rnr] {
justify-items: start;
}
.my-story-portrait__image[b-d3rvyw0rnr] {
width: 8rem;
}
.my-story-portrait__image-editor[b-d3rvyw0rnr] {
box-sizing: border-box;
width: 100%;
min-width: 0;
}
.my-story-portrait__image-actions[b-d3rvyw0rnr] {
grid-template-columns: 1fr;
}
.my-story-portrait__heading > button[b-d3rvyw0rnr],
.my-story-portrait__interview-action[b-d3rvyw0rnr],
.my-story-portrait__preview > button[b-d3rvyw0rnr] {
width: 100%;
}
.my-story-portrait__interview-icon[b-d3rvyw0rnr] {
width: 3rem;
height: 3rem;
}
.my-story-portrait__interview-question[b-d3rvyw0rnr] {
grid-column: 1;
}
.my-story-portrait__choice-group > div[b-d3rvyw0rnr] {
grid-template-columns: 1fr;
}
.my-story-portrait__preferences > div[b-d3rvyw0rnr] {
align-items: flex-start;
flex-direction: column;
gap: .25rem;
}
.my-story-portrait__preferences dd[b-d3rvyw0rnr] {
text-align: left;
}
}
body.night-mode .my-story-layout[b-d3rvyw0rnr],
body.night-mode .my-story-sidebar[b-d3rvyw0rnr] {
background: var(--primary-bg);
}
body.night-mode .my-story-card[b-d3rvyw0rnr],
body.night-mode .my-story-message[b-d3rvyw0rnr],
body.night-mode .my-story-prompt[b-d3rvyw0rnr],
body.night-mode .my-story-mode[b-d3rvyw0rnr],
body.night-mode .my-story-insight[b-d3rvyw0rnr],
body.night-mode .my-story-interview__question[b-d3rvyw0rnr],
body.night-mode .my-story-portrait[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__summary[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__discoveries[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__interview[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__interview-icon[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__interview-question[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__preview[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__preview-question[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__token[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__suggestion[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__choice-group button[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__image-editor[b-d3rvyw0rnr] {
border-color: rgba(255, 255, 255, .14);
background: var(--secondary-bg);
}
body.night-mode .my-story-hero h1[b-d3rvyw0rnr],
body.night-mode .my-story-message h1[b-d3rvyw0rnr],
body.night-mode .my-story-card h2[b-d3rvyw0rnr],
body.night-mode .my-story-saved__heading h2[b-d3rvyw0rnr],
body.night-mode .my-story-label[b-d3rvyw0rnr],
body.night-mode .my-story-consent[b-d3rvyw0rnr],
body.night-mode .my-story-mode strong[b-d3rvyw0rnr],
body.night-mode .my-story-interview__question p[b-d3rvyw0rnr],
body.night-mode .my-story-interview__voice h3[b-d3rvyw0rnr],
body.night-mode .my-story-insights h3[b-d3rvyw0rnr],
body.night-mode .my-story-insight p[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__heading h2[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__section h3[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__discoveries h3[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__interview h3[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__interview-question p[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__preview h3[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__summary p[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__preferences dd[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__preview-question p[b-d3rvyw0rnr] {
color: var(--text-dark);
}
body.night-mode .my-story-hero > p:not(.my-story-eyebrow)[b-d3rvyw0rnr],
body.night-mode .my-story-family-invite p:last-child[b-d3rvyw0rnr],
body.night-mode .my-story-card__heading p[b-d3rvyw0rnr],
body.night-mode .my-story-saved__heading p[b-d3rvyw0rnr],
body.night-mode .my-story-saved-text[b-d3rvyw0rnr],
body.night-mode .my-story-note[b-d3rvyw0rnr],
body.night-mode .my-story-private-note[b-d3rvyw0rnr],
body.night-mode .my-story-mode span[b-d3rvyw0rnr],
body.night-mode .my-story-interview__acknowledgement[b-d3rvyw0rnr],
body.night-mode .my-story-interview__voice > p[b-d3rvyw0rnr],
body.night-mode .my-story-insights > p[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__heading-copy > p:last-child[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__section-heading p[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__discoveries > div > p:last-child[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__interview-copy > p:last-child[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__preview > div > p:last-child[b-d3rvyw0rnr],
body.night-mode .my-story-portrait__empty[b-d3rvyw0rnr] {
color: var(--text-light);
}
body.night-mode .my-story-editor[b-d3rvyw0rnr] {
border-color: rgba(255, 255, 255, .2);
background: rgba(0, 0, 0, .18);
color: var(--text-dark);
}
.my-story-lovedone-editor[b-d3rvyw0rnr] { margin-bottom: 1.25rem; }
.my-story-main [hidden][b-d3rvyw0rnr] { display: none !important; }
button.my-story-view-tab[b-d3rvyw0rnr] { border: 0; background: transparent; font: inherit; font-weight: 700; }
/* Shared editorial hierarchy for the personal story workspace. */
.my-story-layout[b-d3rvyw0rnr] { color: var(--lov-ink); }
.my-story-sidebar[b-d3rvyw0rnr] { border-color: var(--lov-line); }
.my-story-hero h1[b-d3rvyw0rnr], .my-story-card h2[b-d3rvyw0rnr] { color: var(--lov-ink); }
.my-story-card[b-d3rvyw0rnr] { background: var(--lov-surface); border-color: var(--lov-line); border-radius: 8px; box-shadow: none; }
.my-story-primary[b-d3rvyw0rnr], .my-story-primary:hover:not(:disabled)[b-d3rvyw0rnr] { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); }
.my-story-secondary[b-d3rvyw0rnr] { border-color: var(--lov-line); color: var(--lov-ink); }
/* /Components/Pages/OneMemory.razor.rz.scp.css */
.one-memory-page[b-o7rjjctfc2] {
--paper: var(--lov-paper);
--paper-deep: var(--lov-selected);
--ink: var(--lov-ink);
--ink-soft: var(--lov-muted);
--coral: #f4b9a8;
--coral-deep: #d98470;
min-height: 100vh;
overflow: hidden;
color: var(--ink);
background: var(--paper);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.campaign-header[b-o7rjjctfc2],
.campaign-footer[b-o7rjjctfc2] {
width: min(100% - 48px, 1320px);
margin-inline: auto;
display: flex;
align-items: center;
justify-content: space-between;
}
.campaign-header[b-o7rjjctfc2] {
position: absolute;
z-index: 5;
inset: 0 0 auto;
height: 84px;
}
.brand-link[b-o7rjjctfc2] {
display: inline-flex;
align-items: center;
}
.brand-link img[b-o7rjjctfc2] {
display: block;
width: auto;
height: 42px;
}
.header-link[b-o7rjjctfc2],
.legal-links a[b-o7rjjctfc2] {
color: var(--ink-soft);
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 0;
text-decoration: none;
text-underline-offset: 0.3em;
}
.header-link:hover[b-o7rjjctfc2],
.legal-links a:hover[b-o7rjjctfc2] {
text-decoration: underline;
}
.hero[b-o7rjjctfc2] {
position: relative;
min-height: 100svh;
display: grid;
grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.88fr);
align-items: center;
gap: clamp(48px, 7vw, 128px);
padding: 104px max(24px, calc((100vw - 1320px) / 2)) 48px;
background: linear-gradient(112deg, var(--paper) 0 53%, var(--paper-deep) 53.15% 100%);
}
.hero-copy[b-o7rjjctfc2] {
position: relative;
z-index: 2;
max-width: 690px;
}
.eyebrow[b-o7rjjctfc2] {
margin: 0 0 18px;
color: var(--coral-deep);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0;
text-transform: uppercase;
}
.hero h1[b-o7rjjctfc2],
.proof-copy h2[b-o7rjjctfc2],
.trust-heading h2[b-o7rjjctfc2],
.final-cta h2[b-o7rjjctfc2] {
margin: 0;
font-family: Georgia, "Times New Roman", serif;
font-weight: 400;
letter-spacing: 0;
}
.hero h1[b-o7rjjctfc2] {
max-width: 12ch;
font-size: clamp(3.4rem, 5.5vw, 6.4rem);
line-height: 0.98;
}
.hero-body[b-o7rjjctfc2] {
max-width: 590px;
margin: 28px 0 0;
color: var(--ink-soft);
font-size: clamp(1.05rem, 1.45vw, 1.28rem);
line-height: 1.65;
}
.begin-ways[b-o7rjjctfc2] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
margin-top: 30px;
border-block: 1px solid rgba(63, 48, 44, 0.16);
}
.begin-way[b-o7rjjctfc2] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 10px;
min-width: 0;
padding: 18px 16px 18px 0;
color: var(--ink);
text-decoration: none;
transition: color 180ms ease, background-color 180ms ease;
}
.begin-way + .begin-way[b-o7rjjctfc2] {
padding-left: 16px;
border-left: 1px solid rgba(63, 48, 44, 0.16);
}
.begin-way-index[b-o7rjjctfc2] {
padding-top: 3px;
color: var(--coral-deep);
font-family: Georgia, "Times New Roman", serif;
font-size: 0.67rem;
}
.begin-way strong[b-o7rjjctfc2],
.begin-way small[b-o7rjjctfc2] {
display: block;
}
.begin-way strong[b-o7rjjctfc2] {
font-family: Georgia, "Times New Roman", serif;
font-size: 1rem;
font-weight: 400;
}
.begin-way small[b-o7rjjctfc2] {
margin-top: 5px;
color: var(--ink-soft);
font-size: 0.72rem;
line-height: 1.35;
}
.begin-way:hover[b-o7rjjctfc2],
.begin-way:focus-visible[b-o7rjjctfc2] {
color: #9f5948;
background: rgba(244, 185, 168, 0.12);
}
.hero-actions[b-o7rjjctfc2] {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 32px;
}
.button[b-o7rjjctfc2] {
min-height: 52px;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 26px;
border: 1px solid transparent;
border-radius: 6px;
font-size: 0.96rem;
font-weight: 700;
text-decoration: none;
transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}
.button:hover[b-o7rjjctfc2] {
transform: translateY(-2px);
}
.button-primary[b-o7rjjctfc2] {
color: var(--lov-on-green);
background: var(--lov-green);
box-shadow: none;
}
.button-primary:hover[b-o7rjjctfc2] {
background: var(--lov-green);
}
.button-secondary[b-o7rjjctfc2] {
color: var(--ink);
border-color: rgba(63, 48, 44, 0.24);
background: var(--lov-surface);
}
.button-secondary:hover[b-o7rjjctfc2] {
border-color: rgba(63, 48, 44, 0.46);
background: var(--paper);
}
.hero-trust[b-o7rjjctfc2] {
display: flex;
flex-wrap: wrap;
gap: 8px 22px;
margin: 24px 0 0;
padding: 0;
color: var(--ink-soft);
font-size: 0.875rem;
list-style: none;
}
.hero-trust li[b-o7rjjctfc2] {
position: relative;
}
.hero-trust li:not(:first-child)[b-o7rjjctfc2]::before {
content: "·";
position: absolute;
left: -13px;
color: var(--coral-deep);
}
.hero-portrait[b-o7rjjctfc2] {
position: relative;
z-index: 1;
width: min(100%, 440px, calc(60svh - 108px));
margin: 0 auto;
padding: 0;
}
.hero-portrait picture[b-o7rjjctfc2],
.hero-portrait img[b-o7rjjctfc2] {
display: block;
width: 100%;
}
.hero-portrait picture[b-o7rjjctfc2] {
overflow: hidden;
border: 1px solid rgba(92, 67, 58, 0.12);
border-radius: 28px;
background: #f5e6d3;
box-shadow: 0 28px 72px rgba(81, 58, 49, 0.15);
}
.hero-portrait img[b-o7rjjctfc2] {
aspect-ratio: 960 / 1611;
height: auto;
object-fit: cover;
filter: sepia(0.06) contrast(0.98);
}
.hero-portrait figcaption[b-o7rjjctfc2] {
margin-top: 14px;
text-align: center;
color: var(--ink-soft);
font-family: Georgia, "Times New Roman", serif;
font-size: 0.95rem;
font-style: italic;
}
.proof-section[b-o7rjjctfc2] {
width: min(100% - 48px, 1180px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(300px, 0.76fr) minmax(0, 1fr);
align-items: center;
gap: clamp(56px, 9vw, 140px);
padding: clamp(92px, 11vw, 168px) 0;
}
.proof-media[b-o7rjjctfc2] {
position: relative;
padding: 0 0 36px 34px;
}
.proof-media[b-o7rjjctfc2]::before {
content: "";
position: absolute;
inset: 56px 32px 0 0;
border-radius: 180px 180px 20px 20px;
background: var(--paper-deep);
}
.proof-frame[b-o7rjjctfc2] {
position: relative;
max-height: 680px;
overflow: hidden;
border: 9px solid #fffdf8;
border-radius: 32px;
background: #fffdf8;
box-shadow: 0 26px 70px rgba(81, 58, 49, 0.16);
}
.proof-frame[b-o7rjjctfc2]::after {
content: "";
position: absolute;
inset: auto 0 0;
height: 20%;
background: linear-gradient(transparent, rgba(255, 253, 248, 0.94));
}
.proof-frame img[b-o7rjjctfc2] {
display: block;
width: 100%;
height: auto;
}
.proof-copy h2[b-o7rjjctfc2],
.trust-heading h2[b-o7rjjctfc2],
.final-cta h2[b-o7rjjctfc2] {
font-size: clamp(2.5rem, 4.2vw, 4.8rem);
line-height: 1.05;
}
.section-intro[b-o7rjjctfc2],
.trust-heading > p:last-child[b-o7rjjctfc2],
.final-cta > p:not(.eyebrow)[b-o7rjjctfc2] {
max-width: 610px;
color: var(--ink-soft);
font-size: 1.08rem;
line-height: 1.7;
}
.section-intro[b-o7rjjctfc2] {
margin: 22px 0 0;
}
.memory-steps[b-o7rjjctfc2] {
margin: 42px 0 0;
padding: 0;
list-style: none;
}
.memory-steps li[b-o7rjjctfc2] {
display: grid;
grid-template-columns: 50px 1fr;
gap: 20px;
padding: 24px 0;
border-top: 1px solid rgba(63, 48, 44, 0.16);
}
.memory-steps li:last-child[b-o7rjjctfc2] {
border-bottom: 1px solid rgba(63, 48, 44, 0.16);
}
.step-number[b-o7rjjctfc2],
.trust-list span[b-o7rjjctfc2] {
color: var(--coral-deep);
font-family: Georgia, "Times New Roman", serif;
font-size: 0.84rem;
letter-spacing: 0;
}
.memory-steps h3[b-o7rjjctfc2] {
margin: -2px 0 5px;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.34rem;
font-weight: 400;
}
.memory-steps p[b-o7rjjctfc2] {
margin: 0;
color: var(--ink-soft);
line-height: 1.55;
}
.trust-section[b-o7rjjctfc2] {
padding: clamp(88px, 10vw, 148px) max(24px, calc((100vw - 1180px) / 2));
color: #fff9f1;
background: #4b5f54;
}
.trust-heading[b-o7rjjctfc2] {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
align-items: end;
column-gap: 80px;
}
.trust-heading .eyebrow[b-o7rjjctfc2] {
grid-column: 1 / -1;
color: #f4c9bd;
}
.trust-heading > p:last-child[b-o7rjjctfc2] {
margin: 0;
color: rgba(255, 249, 241, 0.72);
}
.trust-list[b-o7rjjctfc2] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 52px;
margin: 64px 0 0;
padding: 0;
list-style: none;
}
.trust-list li[b-o7rjjctfc2] {
display: grid;
grid-template-columns: 42px 1fr;
gap: 12px;
padding: 23px 0;
border-top: 1px solid rgba(255, 249, 241, 0.2);
font-family: Georgia, "Times New Roman", serif;
font-size: 1.2rem;
line-height: 1.45;
}
.trust-list span[b-o7rjjctfc2] {
color: #f4c9bd;
}
.legal-links[b-o7rjjctfc2] {
display: flex;
gap: 24px;
margin-top: 46px;
}
.legal-links a[b-o7rjjctfc2] {
color: rgba(255, 249, 241, 0.74);
}
.final-cta[b-o7rjjctfc2] {
position: relative;
overflow: hidden;
padding: clamp(96px, 12vw, 180px) 24px;
text-align: center;
background:
radial-gradient(circle at 50% 120%, rgba(244, 185, 168, 0.55), transparent 42%),
var(--paper-deep);
}
.final-cta h2[b-o7rjjctfc2],
.final-cta > p:not(.eyebrow)[b-o7rjjctfc2] {
max-width: 760px;
margin-inline: auto;
}
.final-cta > p:not(.eyebrow)[b-o7rjjctfc2] {
margin-top: 22px;
}
.final-cta .button[b-o7rjjctfc2] {
margin-top: 22px;
}
.campaign-footer[b-o7rjjctfc2] {
min-height: 138px;
gap: 32px;
}
.campaign-footer p[b-o7rjjctfc2] {
margin: 0;
color: var(--ink-soft);
font-family: Georgia, "Times New Roman", serif;
font-size: 0.95rem;
font-style: italic;
text-align: right;
}
.hero-reveal[b-o7rjjctfc2] {
opacity: 1;
transform: none;
}
.reveal-on-scroll[b-o7rjjctfc2] {
animation: one-memory-rise-b-o7rjjctfc2 linear both;
animation-timeline: view();
animation-range: entry 5% cover 35%;
}
@keyframes one-memory-rise-b-o7rjjctfc2 {
from {
opacity: 0.45;
transform: translateY(42px) rotate(-1deg);
}
to {
opacity: 1;
transform: translateY(0) rotate(0);
}
}
@media (max-width: 900px) {
.campaign-header[b-o7rjjctfc2] {
height: 64px;
}
.hero[b-o7rjjctfc2] {
min-height: auto;
grid-template-columns: 1fr;
gap: 40px;
padding-top: 106px;
background: linear-gradient(155deg, var(--paper) 0%, var(--paper) 64%, var(--paper-deep) 100%);
}
.hero h1[b-o7rjjctfc2] {
max-width: 14ch;
}
.hero-portrait[b-o7rjjctfc2] {
width: min(72%, 440px);
}
.proof-section[b-o7rjjctfc2] {
grid-template-columns: minmax(260px, 0.7fr) 1fr;
gap: 48px;
}
.trust-heading[b-o7rjjctfc2] {
grid-template-columns: 1fr;
gap: 22px;
}
.trust-list[b-o7rjjctfc2] {
grid-template-columns: 1fr;
}
}
@media (max-width: 640px) {
.campaign-header[b-o7rjjctfc2],
.campaign-footer[b-o7rjjctfc2],
.proof-section[b-o7rjjctfc2] {
width: min(100% - 32px, 1180px);
}
.campaign-header[b-o7rjjctfc2] {
height: 58px;
}
.brand-link img[b-o7rjjctfc2] {
height: 34px;
}
.header-link[b-o7rjjctfc2] {
font-size: 0.75rem;
}
.hero[b-o7rjjctfc2] {
min-height: auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: 28px;
padding: 82px 16px 38px;
background: linear-gradient(165deg, var(--paper) 0%, var(--paper) 58%, var(--paper-deep) 100%);
}
.hero-copy[b-o7rjjctfc2] {
width: 100%;
}
.eyebrow[b-o7rjjctfc2] {
margin-bottom: 10px;
font-size: 0.66rem;
}
.hero h1[b-o7rjjctfc2] {
max-width: 100%;
font-size: clamp(2.45rem, 11vw, 3.25rem);
line-height: 0.98;
}
.hero-body[b-o7rjjctfc2] {
margin-top: 14px;
font-size: 0.94rem;
line-height: 1.5;
}
.hero-actions[b-o7rjjctfc2] {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
margin-top: 18px;
}
.begin-ways[b-o7rjjctfc2] {
grid-template-columns: 1fr;
margin-top: 20px;
}
.begin-way[b-o7rjjctfc2] {
padding: 12px 4px;
}
.begin-way + .begin-way[b-o7rjjctfc2] {
padding-left: 4px;
border-top: 1px solid rgba(63, 48, 44, 0.12);
border-left: 0;
}
.begin-way strong[b-o7rjjctfc2] {
font-size: 0.94rem;
}
.begin-way small[b-o7rjjctfc2] {
font-size: 0.7rem;
}
.button[b-o7rjjctfc2] {
min-height: 46px;
padding: 0 14px;
font-size: 0.82rem;
}
.hero-trust[b-o7rjjctfc2] {
gap: 8px 16px;
margin-top: 14px;
font-size: 0.875rem;
line-height: 1.5;
}
.hero-trust li:not(:first-child)[b-o7rjjctfc2]::before {
left: -10px;
}
.hero-portrait[b-o7rjjctfc2] {
width: min(72vw, 300px);
margin: 0 auto;
}
.hero-portrait picture[b-o7rjjctfc2] {
border-radius: 22px;
box-shadow: 0 20px 52px rgba(81, 58, 49, 0.14);
}
.hero-portrait figcaption[b-o7rjjctfc2] {
margin-top: 9px;
font-size: 0.74rem;
}
.proof-section[b-o7rjjctfc2] {
grid-template-columns: 1fr;
gap: 58px;
padding: 92px 0;
}
.proof-media[b-o7rjjctfc2] {
width: min(88%, 390px);
margin-inline: auto;
padding-left: 22px;
}
.proof-frame[b-o7rjjctfc2] {
max-height: 520px;
border-width: 7px;
border-radius: 25px;
}
.proof-copy h2[b-o7rjjctfc2],
.trust-heading h2[b-o7rjjctfc2],
.final-cta h2[b-o7rjjctfc2] {
font-size: clamp(2.3rem, 10vw, 3.4rem);
}
.section-intro[b-o7rjjctfc2],
.trust-heading > p:last-child[b-o7rjjctfc2],
.final-cta > p:not(.eyebrow)[b-o7rjjctfc2] {
font-size: 0.98rem;
}
.memory-steps[b-o7rjjctfc2] {
margin-top: 32px;
}
.memory-steps li[b-o7rjjctfc2] {
grid-template-columns: 38px 1fr;
gap: 10px;
padding: 20px 0;
}
.memory-steps h3[b-o7rjjctfc2] {
font-size: 1.2rem;
}
.memory-steps p[b-o7rjjctfc2] {
font-size: 0.92rem;
}
.trust-section[b-o7rjjctfc2] {
padding: 86px 16px;
}
.trust-list[b-o7rjjctfc2] {
margin-top: 44px;
}
.trust-list li[b-o7rjjctfc2] {
grid-template-columns: 34px 1fr;
padding: 19px 0;
font-size: 1.05rem;
}
.final-cta[b-o7rjjctfc2] {
padding: 104px 16px;
}
.campaign-footer[b-o7rjjctfc2] {
min-height: 120px;
flex-direction: column;
justify-content: center;
gap: 10px;
}
.campaign-footer p[b-o7rjjctfc2] {
text-align: center;
}
}
@media (max-width: 390px) and (max-height: 860px) {
.hero h1[b-o7rjjctfc2] {
font-size: 2.35rem;
}
.hero-body[b-o7rjjctfc2] {
font-size: 0.88rem;
}
.hero-portrait[b-o7rjjctfc2] {
width: min(72vw, 270px);
}
}
@media (prefers-reduced-motion: reduce) {
.hero-reveal[b-o7rjjctfc2],
.reveal-on-scroll[b-o7rjjctfc2] {
opacity: 1;
transform: none;
animation: none;
}
.button[b-o7rjjctfc2] {
transition: none;
}
.button:hover[b-o7rjjctfc2] {
transform: none;
}
}
/* Keep nested content legible on the selected application surface. */
.begin-way:hover[b-o7rjjctfc2], .begin-way:focus-visible[b-o7rjjctfc2] { color: var(--lov-green); }
/* /Components/Pages/OracleChamber.razor.rz.scp.css */
:host[b-l0fyn2snb0] {
display: block;
background: #130c0a;
overflow-x: hidden;
}
[b-l0fyn2snb0] .app-layout {
display: flex;
min-height: 100vh;
/* inherited font-sans */
background-color: #130c0a;
padding-top: 0;
}
.oracle-chamber-container[b-l0fyn2snb0] {
flex: 1 1 auto;
width: calc(100vw - 280px);
max-width: calc(100vw - 280px);
margin-left: 280px;
min-height: 100vh;
position: relative;
transition: margin-left 0.3s ease;
overflow: hidden;
box-sizing: border-box;
}
.oracle-chamber-container.sidebar-hidden[b-l0fyn2snb0] {
margin-left: 0;
width: 100vw;
max-width: 100%;
}
.oracle-chamber-background[b-l0fyn2snb0] {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
/* filter: saturate(1.1) brightness(0.67); */
}
.oracle-chamber-overlay[b-l0fyn2snb0] {
position: absolute;
inset: 0;
background: radial-gradient(circle at center, rgba(118, 73, 40, 0.15), rgba(11, 6, 4, 0.75));
}
.oracle-chamber-content[b-l0fyn2snb0] {
position: relative;
z-index: 1;
width: 100%;
max-width: none;
margin: 0;
padding: clamp(1rem, 2.5vw, 1.8rem);
min-height: 100vh;
display: flex;
flex-direction: column;
}
.oracle-loader[b-l0fyn2snb0] {
width: min(720px, 100%);
margin: 0 auto;
min-height: 420px;
border-radius: 22px;
display: flex;
align-items: center;
justify-content: center;
color: #f1d8b8;
font-family: var(--font-serif);
font-size: 1.45rem;
background: rgba(12, 7, 5, 0.55);
border: 1px solid rgba(220, 179, 132, 0.2);
}
.oracle-message[b-l0fyn2snb0] {
width: min(720px, 100%);
margin: 0.85rem auto 0;
border-radius: 12px;
padding: 0.7rem 0.9rem;
line-height: 1.4;
}
.oracle-message.info[b-l0fyn2snb0] {
color: #f8e7cf;
background: rgba(58, 41, 22, 0.72);
border: 1px solid rgba(224, 178, 127, 0.32);
}
.oracle-message.error[b-l0fyn2snb0] {
color: #ffe4da;
background: rgba(96, 30, 30, 0.66);
border: 1px solid rgba(230, 155, 144, 0.38);
}
[b-l0fyn2snb0] .loved-one-chat-sidebar {
width: 280px;
background-color: var(--lov-surface) !important;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
padding: 1.5rem;
transition: transform 0.3s ease;
}
[b-l0fyn2snb0] .loved-one-chat-sidebar.hidden {
transform: translateX(-100%);
}
[b-l0fyn2snb0] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
[b-l0fyn2snb0] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-l0fyn2snb0] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
.loved-one-chat-sidebar .avatar[b-l0fyn2snb0] {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 50%;
border: 3px solid #f3c4af;
margin-bottom: 0.9rem;
}
.loved-one-chat-sidebar h2[b-l0fyn2snb0] {
font-size: 1.3rem;
margin-bottom: 0.35rem;
text-align: center;
color: #4b2e2e;
font-family: var(--font-serif);
}
.loved-one-chat-sidebar p[b-l0fyn2snb0] {
font-size: 0.9rem;
margin-bottom: 1rem;
color: #6a504b;
text-align: center;
line-height: 1.45;
}
.pen-pal-sidebar-block[b-l0fyn2snb0] {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.6rem;
margin: 0.85rem 0 1rem;
}
.loved-one-chat-sidebar .pen-pal-invite-btn[b-l0fyn2snb0] {
width: 100%;
background: transparent !important;
border: 1px solid rgba(206, 160, 128, 0.7);
border-radius: 16px;
padding: 0.7rem 0.9rem;
color: #4b2e2e;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
box-shadow: 0 6px 14px rgba(122, 92, 70, 0.12);
transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
cursor: pointer;
}
.loved-one-chat-sidebar .pen-pal-invite-btn:hover[b-l0fyn2snb0] {
background: rgba(255, 228, 210, 0.6) !important;
border-color: rgba(186, 130, 95, 0.75);
transform: translateY(-1px);
}
.pen-pal-icon[b-l0fyn2snb0] {
font-size: 1.1rem;
}
[b-l0fyn2snb0] .sidebar-bottom.pinned {
position: relative !important;
bottom: auto !important;
left: auto !important;
width: 100% !important;
flex-shrink: 0;
z-index: auto !important;
}
[b-l0fyn2snb0] .loved-one-chat-toggle {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
.sidebar-overlay[b-l0fyn2snb0] {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 9;
}
.sidebar-overlay.hidden[b-l0fyn2snb0] {
display: none;
}
@media (max-width: 1024px) {
[b-l0fyn2snb0] .loved-one-chat-toggle {
display: none !important;
}
.oracle-chamber-container[b-l0fyn2snb0] {
margin-left: 0;
width: 100%;
min-height: calc(100vh - 60px);
}
.oracle-chamber-content[b-l0fyn2snb0] {
padding-top: 1rem;
}
}
@media (max-width: 768px) {
.oracle-chamber-content[b-l0fyn2snb0] {
padding: 0.8rem 0.65rem 1.2rem;
}
}
/* /Components/Pages/Oracles.razor.rz.scp.css */
:host[b-5g2zqcp57o] {
display: block;
background: #fdf5f0;
}
[b-5g2zqcp57o] .app-layout {
display: flex;
min-height: 100vh;
width: 100%;
min-width: 0;
overflow-x: hidden;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px;
}
/* ─── Main Container ─── */
.oracles-container[b-5g2zqcp57o] {
flex: 1;
max-width: 1120px;
margin: 0 auto;
margin-left: 280px;
min-width: 0;
padding: 3rem 2rem 2rem;
box-sizing: border-box;
transition: margin-left 0.3s ease;
}
.oracles-container.sidebar-hidden[b-5g2zqcp57o] {
margin-left: 0;
max-width: 1120px;
}
/* ─── Hero ─── */
.oracles-hero[b-5g2zqcp57o] {
text-align: center;
margin: 0 auto 64px;
max-width: 880px;
}
.oracles-hero h1[b-5g2zqcp57o] {
font-family: var(--font-serif);
font-size: 2.8rem;
font-weight: var(--mobile-hero-heading-weight);
color: #2C2A28;
margin: 0 0 1rem 0;
}
.oracles-hero p[b-5g2zqcp57o] {
/* inherited font-sans */
font-size: 1.15rem;
line-height: 1.6;
color: #6B5B57;
margin: 0 auto;
max-width: 600px;
letter-spacing: 0.01em;
}
/* ─── Oracle Flow Steps ─── */
.oracle-flow[b-5g2zqcp57o] {
margin: 34px auto 0;
display: inline-flex;
align-items: center;
gap: 0;
border-radius: 22px;
background: #fff9f5;
border: 1px solid #efddd0;
box-shadow: 0 8px 24px rgba(95, 63, 48, 0.07);
padding: 20px 32px;
}
.flow-step[b-5g2zqcp57o] {
display: flex;
align-items: center;
gap: 14px;
}
.flow-icon-wrapper[b-5g2zqcp57o] {
width: 52px;
height: 52px;
border-radius: 50%;
background: #f6e2d6;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.flow-icon-wrapper svg[b-5g2zqcp57o] {
width: 28px;
height: 28px;
color: #8d6756;
}
.flow-text[b-5g2zqcp57o] {
text-align: left;
}
.flow-text strong[b-5g2zqcp57o] {
display: block;
color: #4f3328;
font-size: 1.35rem;
line-height: 1.15;
/* inherited font-sans */
font-weight: 700;
}
.flow-text small[b-5g2zqcp57o] {
display: block;
color: #8f6f62;
font-size: 0.95rem;
margin-top: 3px;
}
.flow-arrow[b-5g2zqcp57o] {
color: #d1ab95;
font-size: 1.8rem;
line-height: 1;
margin: 0 24px;
}
/* ─── Section Layout ─── */
.oracle-section[b-5g2zqcp57o] {
margin: 0 auto 72px;
max-width: 1020px;
}
/* Featured section: centered heading + filters stacked below */
.section-header-centered[b-5g2zqcp57o] {
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
margin-bottom: 32px;
}
/* All oracles: left-aligned heading + filters stacked below */
.section-header-stacked[b-5g2zqcp57o] {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
margin-bottom: 28px;
}
.oracle-section h2[b-5g2zqcp57o] {
margin: 0;
font-family: var(--font-serif);
color: #4b2f24;
font-size: clamp(1.8rem, 3vw, 2.4rem);
line-height: 1.1;
font-weight: 500;
}
/* ─── Filter Pills ─── */
.oracle-filters[b-5g2zqcp57o] {
display: flex;
flex-wrap: wrap;
gap: 10px 12px;
justify-content: center;
}
.section-header-stacked .oracle-filters[b-5g2zqcp57o] {
justify-content: flex-start;
}
.oracle-filter[b-5g2zqcp57o] {
border: 1px solid #e5cdb8;
border-radius: 999px;
padding: 10px 18px;
background: #fff8f3;
color: #734f40;
font-size: 0.98rem;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
box-shadow: 0 2px 10px rgba(95, 63, 48, 0.04);
transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
/* inherited font-sans */
}
.oracle-filter:hover[b-5g2zqcp57o] {
background: #f8e5d7;
border-color: #ddc0ac;
}
.oracle-filter.active[b-5g2zqcp57o] {
background: #efd4bf;
border-color: #d6b299;
color: #4a2f24;
font-weight: 600;
box-shadow: 0 4px 14px rgba(95, 63, 48, 0.08);
}
/* ─── Card Role Chips ─── */
.card-role-chips[b-5g2zqcp57o] {
display: flex;
flex-wrap: wrap;
gap: 6px 8px;
margin-top: 10px;
}
.card-role-chip[b-5g2zqcp57o] {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
background: linear-gradient(135deg, #f8ece3, #f3dfd2);
border: 1px solid #e8d0c0;
color: #6f4e3d;
font-size: 0.78rem;
font-weight: 500;
letter-spacing: 0.02em;
line-height: 1.3;
white-space: nowrap;
}
.featured-card .card-role-chips[b-5g2zqcp57o] {
margin-top: 12px;
}
.featured-card .card-role-chip[b-5g2zqcp57o] {
padding: 5px 14px;
font-size: 0.85rem;
}
/* ─── Featured Grid ─── */
.featured-grid[b-5g2zqcp57o] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 28px;
}
.featured-card[b-5g2zqcp57o] {
background: #fff9f4;
border: 1px solid #eedfd3;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 6px 28px rgba(91, 59, 45, 0.07);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.featured-card:hover[b-5g2zqcp57o] {
box-shadow: 0 10px 36px rgba(91, 59, 45, 0.12);
transform: translateY(-2px);
}
.card-image-wrapper[b-5g2zqcp57o] {
width: 100%;
height: 320px;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
.card-image-wrapper img[b-5g2zqcp57o] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.4s ease;
}
.featured-card:hover .card-image-wrapper img[b-5g2zqcp57o] {
transform: scale(1.03);
}
.card-content[b-5g2zqcp57o] {
padding: 26px 28px 28px;
}
.featured-card h3[b-5g2zqcp57o] {
margin: 0;
font-family: var(--font-serif);
font-size: 2.4rem;
line-height: 1.08;
color: #4b2f24;
font-weight: 500;
}
.featured-card .role[b-5g2zqcp57o] {
margin: 8px 0 0;
color: #8a6d60;
font-size: 1.1rem;
font-style: italic;
}
.featured-card .description[b-5g2zqcp57o] {
margin: 13px 0 0;
color: #5f463b;
font-size: 0.97rem;
line-height: 1.55;
}
/* ─── Card Buttons ─── */
.card-actions[b-5g2zqcp57o] {
margin-top: 24px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 12px;
}
.btn-primary[b-5g2zqcp57o],
.btn-secondary[b-5g2zqcp57o],
.btn-outline[b-5g2zqcp57o] {
text-decoration: none;
border-radius: 999px;
font-size: 1rem;
padding: 12px 28px;
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.25s ease;
cursor: pointer;
/* inherited font-sans */
}
.btn-primary[b-5g2zqcp57o] {
border: 1px solid #c9a08a;
background: #3d2b22;
color: #fff;
font-weight: 600;
}
.btn-primary:hover[b-5g2zqcp57o] {
background: #4f3a2f;
}
.btn-secondary[b-5g2zqcp57o] {
border: 1px solid #d8c0b0;
background: #fffaf7;
color: #6a4a3d;
}
.btn-secondary:hover[b-5g2zqcp57o] {
background: #f5e8de;
}
.coming-soon-badge[b-5g2zqcp57o],
.badge[b-5g2zqcp57o] {
margin-top: 20px;
display: inline-flex;
border-radius: 999px;
border: 1px solid #e5c6b5;
background: #f3ddd1;
color: #835f50;
font-size: 1rem;
padding: 10px 24px;
}
.lifecycle-badge[b-5g2zqcp57o] {
margin-top: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid #e5c6b5;
background: #f3ddd1;
color: #835f50;
font-size: 1rem;
line-height: 1;
padding: 10px 24px;
}
.lifecycle-badge--sunsetting[b-5g2zqcp57o] {
border-color: #d6b67d;
background: #f5ead1;
color: #745a23;
}
.lifecycle-badge--retired[b-5g2zqcp57o],
.lifecycle-badge--draft[b-5g2zqcp57o] {
border-color: #d4ccc6;
background: #eee8e3;
color: #6f625c;
}
.card-actions .coming-soon-badge[b-5g2zqcp57o],
.card-actions .lifecycle-badge[b-5g2zqcp57o] {
margin-top: 0;
}
/* ─── All Oracles Grid ─── */
.oracle-masonry-grid[b-5g2zqcp57o] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
.oracle-card[b-5g2zqcp57o] {
border: 1px solid #eddfd4;
background: #fff9f4;
border-radius: 20px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 4px 18px rgba(91, 59, 45, 0.06);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.oracle-card:hover[b-5g2zqcp57o] {
box-shadow: 0 8px 30px rgba(91, 59, 45, 0.11);
transform: translateY(-2px);
}
.oracle-card .card-image-wrapper[b-5g2zqcp57o] {
height: 210px;
border-radius: 20px 20px 0 0;
}
.oracle-card:hover .card-image-wrapper img[b-5g2zqcp57o] {
transform: scale(1.03);
}
.oracle-card .card-content[b-5g2zqcp57o] {
padding: 20px 22px 24px;
flex: 1;
display: flex;
flex-direction: column;
}
.oracle-card h3[b-5g2zqcp57o] {
margin: 0;
color: #4b2f24;
font-family: var(--font-serif);
font-size: 1.75rem;
line-height: 1.1;
font-weight: 500;
}
.oracle-card .role[b-5g2zqcp57o] {
margin: 6px 0 0;
color: #8a6d60;
font-size: 1.02rem;
font-style: italic;
}
.oracle-card .description.small[b-5g2zqcp57o] {
margin: 12px 0 0;
color: #6b5348;
font-size: 0.92rem;
line-height: 1.55;
}
.btn-outline[b-5g2zqcp57o] {
margin-top: auto;
padding-top: 16px;
border: 1px solid #ddc5b5;
color: #6f4e41;
background: #fff;
font-size: 0.95rem;
padding: 10px 22px;
align-self: flex-start;
}
.oracle-card .btn-outline[b-5g2zqcp57o],
.oracle-card .lifecycle-badge[b-5g2zqcp57o] {
margin-top: auto;
align-self: flex-start;
box-sizing: border-box;
min-width: 132px;
min-height: 42px;
padding: 10px 22px;
font-size: 0.95rem;
}
.oracle-card .lifecycle-badge[b-5g2zqcp57o] {
width: auto;
}
.btn-outline:hover[b-5g2zqcp57o] {
background: #f5e8de;
border-color: #c9a999;
}
/* ─── Sidebar ─── */
[b-5g2zqcp57o] .sidebar {
width: 280px;
background: var(--lov-paper);
border-right: 1px solid #d8b8ad;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
padding: 1.5rem;
transition: transform 0.3s ease;
}
[b-5g2zqcp57o] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-5g2zqcp57o] .sidebar.hidden {
transform: translateX(-100%);
}
[b-5g2zqcp57o] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
[b-5g2zqcp57o] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-5g2zqcp57o] .sidebar-logo {
text-align: center;
}
[b-5g2zqcp57o] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
[b-5g2zqcp57o] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* --- New Footer Styles (Matching FrontPage) --- */
[b-5g2zqcp57o] .main-footer {
/* This creates the full-width "floor" for the page */
margin-left: 280px;
/* Start where main content starts */
background-color: #FAF3E5;
/* Match the warm card background color */
padding: 60px 0 30px 0;
margin-top: 80px;
/* Space above the footer */
color: #4F4A45;
border-top: 1px solid #f0dad3;
/* Remove grid-area, as the footer is no longer part of the content grid */
}
[b-5g2zqcp57o] .main-footer.sidebar-hidden {
margin-left: 0;
/* Remove left margin when sidebar is hidden */
width: 100%;
}
/* A container to keep the footer content aligned with the main page content */
[b-5g2zqcp57o] .footer-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
}
/* When sidebar is hidden, use full width container */
[b-5g2zqcp57o] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
/* Center when sidebar is hidden */
}
/* 1. Brand Section */
[b-5g2zqcp57o] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-5g2zqcp57o] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-5g2zqcp57o] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
/* 2. Navigation Links Section */
[b-5g2zqcp57o] .footer-nav-links {
/* Use Flexbox to group and center the items */
display: flex;
justify-content: center;
flex-wrap: wrap;
/* Allows wrapping on smaller screens */
/* The 'gap' now controls the space BETWEEN the columns */
gap: 80px;
/* Adjust this value to your liking (e.g., 60px, 100px) */
margin-bottom: 40px;
}
[b-5g2zqcp57o] .footer-section {
padding: 0 15px;
/* Adds some space for smaller screens */
}
[b-5g2zqcp57o] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-5g2zqcp57o] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-5g2zqcp57o] .footer-section ul li {
margin-bottom: 10px;
}
[b-5g2zqcp57o] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-5g2zqcp57o] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
/* 3. Bottom Bar (Utilities & Legal) */
[b-5g2zqcp57o] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
/* Allows items to wrap on small screens */
gap: 20px;
}
[b-5g2zqcp57o] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-5g2zqcp57o] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-5g2zqcp57o] .footer-languages a:hover,
[b-5g2zqcp57o] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
/* NEW: Wrapper for the right-aligned text */
[b-5g2zqcp57o] .footer-legal-origin {
text-align: right;
}
/* NEW: Style for the "Made by" line */
[b-5g2zqcp57o] .footer-made-by {
font-size: 0.85em;
color: #888;
margin: 0 0 5px 0;
/* Add a little space below it */
}
[b-5g2zqcp57o] .footer-copyright {
font-size: 0.85em;
color: #888;
margin: 0;
text-align: left;
}
.sidebar-overlay[b-5g2zqcp57o] {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.35);
z-index: 9;
}
.sidebar-overlay.hidden[b-5g2zqcp57o] {
display: none;
}
/* ─── Responsive ─── */
@media (max-width: 1200px) {
.card-image-wrapper[b-5g2zqcp57o] {
height: 280px;
}
.featured-card h3[b-5g2zqcp57o] {
font-size: 2.1rem;
}
.oracle-card h3[b-5g2zqcp57o] {
font-size: 1.55rem;
}
}
@media (max-width: 1024px) {
[b-5g2zqcp57o] .mobile-floating-header {
z-index: 1200;
}
[b-5g2zqcp57o] .toggle-sidebar {
display: none !important;
}
/* Sidebar starts below the floating mobile header */
[b-5g2zqcp57o] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
[b-5g2zqcp57o] .sidebar.visible {
transform: translateX(0);
}
[b-5g2zqcp57o] .sidebar.hidden {
transform: translateX(-100%);
}
/* Adjust app layout for mobile top bar */
.app-layout[b-5g2zqcp57o],
[b-5g2zqcp57o] .app-layout {
display: block;
padding-top: 60px;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
background-color: var(--lov-paper);
}
.oracles-container[b-5g2zqcp57o],
.oracles-container.sidebar-hidden[b-5g2zqcp57o] {
flex: none;
margin-right: auto;
margin-left: auto;
width: 100%;
max-width: 720px;
padding: 26px 18px 24px;
}
[b-5g2zqcp57o] .main-footer {
margin-left: 0 !important;
}
.featured-grid[b-5g2zqcp57o] {
grid-template-columns: 1fr;
gap: 24px;
}
.oracle-masonry-grid[b-5g2zqcp57o] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.oracles-hero p[b-5g2zqcp57o] {
font-size: 1.1rem;
}
}
/* ≤768px: Reinforce sidebar positioning for phones */
@media (max-width: 768px) {
.app-layout[b-5g2zqcp57o],
[b-5g2zqcp57o] .app-layout {
padding-top: 60px;
overflow-x: hidden;
}
[b-5g2zqcp57o] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-5g2zqcp57o] .sidebar.visible {
transform: translateX(0);
}
[b-5g2zqcp57o] .sidebar.hidden {
transform: translateX(-100%);
}
}
@media (max-width: 680px) {
.oracles-container[b-5g2zqcp57o],
.oracles-container.sidebar-hidden[b-5g2zqcp57o] {
width: 100%;
max-width: 680px;
padding: 22px var(--mobile-page-margin, 16px) 36px;
}
.oracles-hero[b-5g2zqcp57o] {
margin-bottom: 30px;
max-width: none;
}
.oracles-hero h1[b-5g2zqcp57o] {
font-size: clamp(2.05rem, 9vw, 2.45rem);
line-height: 1.08;
margin-bottom: 0.75rem;
}
.oracles-hero p[b-5g2zqcp57o] {
font-size: 1rem;
line-height: 1.45;
max-width: 23rem;
}
/* Stack the flow vertically on mobile */
.oracle-flow[b-5g2zqcp57o] {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
box-sizing: border-box;
margin-top: 24px;
padding: 20px 18px;
gap: 16px;
background: #fff9f5;
overflow: visible;
}
.flow-step[b-5g2zqcp57o] {
width: 100%;
justify-content: flex-start;
gap: 14px;
min-width: 0;
}
.flow-icon-wrapper[b-5g2zqcp57o] {
width: 46px;
height: 46px;
}
.flow-icon-wrapper svg[b-5g2zqcp57o] {
width: 24px;
height: 24px;
}
.flow-text[b-5g2zqcp57o] {
min-width: 0;
}
.flow-text strong[b-5g2zqcp57o] {
font-size: 1.2rem;
line-height: 1.2;
}
.flow-text small[b-5g2zqcp57o] {
font-size: 0.95rem; /* Smaller subtitle */
}
.flow-arrow[b-5g2zqcp57o] {
display: none;
}
/* Ensure hierarchy in headers on mobile */
.oracle-section h2[b-5g2zqcp57o] {
font-size: clamp(1.45rem, 6.2vw, 1.9rem);
}
.oracle-section[b-5g2zqcp57o] {
margin-bottom: 46px;
max-width: none;
}
.section-header-centered[b-5g2zqcp57o] {
margin-bottom: 22px;
}
.section-header-stacked[b-5g2zqcp57o] {
align-items: stretch;
margin-bottom: 20px;
}
.oracle-filters[b-5g2zqcp57o] {
width: 100%;
overflow-x: visible;
flex-wrap: wrap;
padding-bottom: 0;
}
.oracle-filter[b-5g2zqcp57o] {
padding: 10px 18px;
font-size: 0.95rem;
white-space: nowrap;
}
.oracle-masonry-grid[b-5g2zqcp57o] {
grid-template-columns: 1fr;
gap: 20px;
}
.card-image-wrapper[b-5g2zqcp57o] {
height: 252px;
}
.featured-card[b-5g2zqcp57o],
.oracle-card[b-5g2zqcp57o] {
border-radius: 16px;
}
.card-image-wrapper[b-5g2zqcp57o],
.oracle-card .card-image-wrapper[b-5g2zqcp57o] {
border-radius: 16px 16px 0 0;
}
.card-content[b-5g2zqcp57o],
.oracle-card .card-content[b-5g2zqcp57o] {
padding: 20px;
}
.featured-card h3[b-5g2zqcp57o] {
font-size: 1.75rem;
}
.oracle-card h3[b-5g2zqcp57o] {
font-size: 1.6rem;
}
}
@media (max-width: 480px) {
.oracles-hero h1[b-5g2zqcp57o] {
font-size: clamp(1.95rem, 8.6vw, 2.22rem);
}
.oracle-section h2[b-5g2zqcp57o] {
font-size: 1.55rem;
}
.featured-card h3[b-5g2zqcp57o] {
font-size: 1.7rem;
}
.oracles-container[b-5g2zqcp57o],
.oracles-container.sidebar-hidden[b-5g2zqcp57o] {
padding-inline: var(--mobile-page-margin, 16px);
}
.oracle-flow[b-5g2zqcp57o] {
border-radius: 14px;
padding: 18px;
}
.card-image-wrapper[b-5g2zqcp57o] {
height: 238px;
}
.featured-card .card-role-chip[b-5g2zqcp57o] {
font-size: 0.78rem;
}
.btn-primary[b-5g2zqcp57o],
.btn-secondary[b-5g2zqcp57o],
.btn-outline[b-5g2zqcp57o] {
width: 100%;
min-height: 48px;
}
}
/* ===== SUBSCRIPTION STATUS INDICATOR ===== */
.subscription-status[b-5g2zqcp57o] {
display: flex;
align-items: center;
gap: 6px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid rgba(180, 140, 80, 0.15);
font-size: 0.78rem;
color: #8B7355;
font-style: italic;
cursor: pointer;
transition: color 0.2s ease;
text-decoration: none;
}
.subscription-status:hover[b-5g2zqcp57o] {
color: #6b4520;
}
.subscription-status-icon[b-5g2zqcp57o] {
font-size: 0.85rem;
line-height: 1;
}
.oracles-hero h1[b-5g2zqcp57o] { color: var(--lov-ink); font-size: clamp(2rem,3.5vw,3.2rem); }
.btn-primary[b-5g2zqcp57o], .btn-primary:hover[b-5g2zqcp57o] { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); }
/* A quiet catalogue frame lets the oracle worlds carry the atmosphere. */
.app-layout[b-5g2zqcp57o] { display: block; width: 100%; min-width: 0; background: var(--lov-paper); }
.oracles-container[b-5g2zqcp57o] {
width: calc(100% - 280px);
max-width: none;
margin: 0 0 0 280px;
padding: 48px clamp(24px, 4vw, 64px) 64px;
}
.oracles-container.sidebar-hidden[b-5g2zqcp57o] { width: 100%; max-width: none; margin-left: 0; }
.oracles-hero[b-5g2zqcp57o], .oracle-section[b-5g2zqcp57o] { width: 100%; max-width: 1120px; margin-inline: auto; }
.oracles-hero[b-5g2zqcp57o] { text-align: left; margin-bottom: 40px; }
.oracles-hero p[b-5g2zqcp57o] { margin-left: 0; color: var(--lov-muted); }
.oracle-flow[b-5g2zqcp57o] { display: flex; flex-wrap: wrap; gap: 20px 32px; margin: 28px 0 0; padding: 20px 0; border: 0; border-block: 1px solid var(--lov-line); border-radius: 0; box-shadow: none; background: transparent; }
.flow-step[b-5g2zqcp57o] { flex: 1 1 220px; min-width: 0; }
.flow-icon-wrapper[b-5g2zqcp57o] { width: 36px; height: 36px; background: transparent; }
.flow-icon-wrapper svg[b-5g2zqcp57o], .flow-text strong[b-5g2zqcp57o] { color: var(--lov-green); }
.flow-text strong[b-5g2zqcp57o] { font-size: 1rem; line-height: 1.4; }
.flow-text small[b-5g2zqcp57o] { color: var(--lov-muted); }
.flow-arrow[b-5g2zqcp57o] { display: none; }
.section-header-centered[b-5g2zqcp57o] { align-items: flex-start; }
.oracle-section h2[b-5g2zqcp57o], .featured-card h3[b-5g2zqcp57o], .oracle-card h3[b-5g2zqcp57o] { color: var(--lov-ink); }
.featured-card[b-5g2zqcp57o], .oracle-card[b-5g2zqcp57o] { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.featured-card:hover[b-5g2zqcp57o], .oracle-card:hover[b-5g2zqcp57o] { transform: none; box-shadow: none; }
.featured-card:hover .card-image-wrapper img[b-5g2zqcp57o], .oracle-card:hover .card-image-wrapper img[b-5g2zqcp57o] { transform: none; }
.card-image-wrapper[b-5g2zqcp57o], .oracle-card .card-image-wrapper[b-5g2zqcp57o] { border-radius: 4px; }
.card-content[b-5g2zqcp57o], .oracle-card .card-content[b-5g2zqcp57o] { padding: 20px 0 24px; }
.featured-card .role[b-5g2zqcp57o], .featured-card .description[b-5g2zqcp57o], .oracle-card .role[b-5g2zqcp57o], .oracle-card .description.small[b-5g2zqcp57o] { color: var(--lov-muted); }
.oracle-filter[b-5g2zqcp57o], .card-role-chip[b-5g2zqcp57o] { background: var(--lov-surface); color: var(--lov-green); border-color: var(--lov-line); box-shadow: none; }
.oracle-filter[b-5g2zqcp57o] { border-radius: 5px; min-height: 44px; white-space: normal; }
.oracle-filter:hover[b-5g2zqcp57o] { background: var(--lov-paper); border-color: var(--lov-green); }
.oracle-filter.active[b-5g2zqcp57o] { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); box-shadow: none; }
.card-role-chip[b-5g2zqcp57o] { border-radius: 3px; }
.btn-primary[b-5g2zqcp57o], .btn-secondary[b-5g2zqcp57o], .btn-outline[b-5g2zqcp57o] { border-radius: 5px; min-height: 44px; line-height: 1.4; box-sizing: border-box; }
.btn-secondary[b-5g2zqcp57o], .btn-outline[b-5g2zqcp57o] { background: var(--lov-surface); border-color: var(--lov-line); color: var(--lov-green); }
.btn-secondary:hover[b-5g2zqcp57o], .btn-outline:hover[b-5g2zqcp57o] { background: var(--lov-paper); border-color: var(--lov-green); color: var(--lov-green); }
.oracle-filter:focus-visible[b-5g2zqcp57o], .btn-primary:focus-visible[b-5g2zqcp57o], .btn-secondary:focus-visible[b-5g2zqcp57o], .btn-outline:focus-visible[b-5g2zqcp57o] { outline: 3px solid var(--lov-green); outline-offset: 4px; }
.all-oracles[b-5g2zqcp57o] { border-top: 1px solid var(--lov-line); padding-top: 32px; }
.subscription-status[b-5g2zqcp57o], .subscription-status:hover[b-5g2zqcp57o], .subscription-status:focus-visible[b-5g2zqcp57o] { color: var(--lov-green); border-color: var(--lov-line); }
.subscription-status:focus-visible[b-5g2zqcp57o] { outline: 3px solid var(--lov-green); outline-offset: 4px; }
@media (max-width: 1024px) {
.app-layout[b-5g2zqcp57o] { padding-top: 72px; }
.oracles-container[b-5g2zqcp57o], .oracles-container.sidebar-hidden[b-5g2zqcp57o] { width: 100%; margin: 0; padding: 32px 24px 48px; }
}
@media (max-width: 700px) {
.oracles-container[b-5g2zqcp57o], .oracles-container.sidebar-hidden[b-5g2zqcp57o] { padding-inline: 20px; }
.featured-grid[b-5g2zqcp57o], .oracle-masonry-grid[b-5g2zqcp57o] { grid-template-columns: minmax(0, 1fr); }
.oracle-flow[b-5g2zqcp57o] { align-items: stretch; gap: 16px; }
.flow-step[b-5g2zqcp57o] { flex-basis: 100%; }
.card-image-wrapper[b-5g2zqcp57o], .oracle-card .card-image-wrapper[b-5g2zqcp57o] { height: auto; aspect-ratio: 16 / 10; }
.featured-card h3[b-5g2zqcp57o] { font-size: 1.9rem; }
}
/* /Components/Pages/PenPals.razor.rz.scp.css */
/* PenPals page styles */
/* Global overflow prevention */
/* :global(html) {
overflow-x: hidden;
overscroll-behavior-x: none;
}
:global(body) {
overflow-x: hidden;
overscroll-behavior: none;
} */
/* App Layout */
.app-layout[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
align-self: stretch;
width: 100%;
min-width: 0;
max-width: 100%;
min-height: 100vh;
background-color: var(--lov-paper);
overflow-x: hidden;
overscroll-behavior-x: none;
touch-action: pan-y pinch-zoom;
}
[b-q26ymkgqmn] .app-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px;
overflow-x: hidden;
overscroll-behavior: none;
touch-action: pan-y pinch-zoom;
width: 100%;
}
/* Sidebar Overlay */
.sidebar-overlay[b-q26ymkgqmn] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none;
}
.sidebar-overlay.hidden[b-q26ymkgqmn] {
display: none;
}
/* Sidebar */
[b-q26ymkgqmn] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-q26ymkgqmn] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-q26ymkgqmn] .sidebar.hidden {
transform: translateX(-100%);
}
[b-q26ymkgqmn] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-q26ymkgqmn] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-q26ymkgqmn] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
/* Toggle Sidebar Button */
[b-q26ymkgqmn] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-q26ymkgqmn] .toggle-sidebar {
display: none !important;
}
/* Sidebar starts below the floating mobile header */
[b-q26ymkgqmn] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
[b-q26ymkgqmn] .sidebar.visible {
transform: translateX(0);
}
[b-q26ymkgqmn] .sidebar.hidden {
transform: translateX(-100%);
}
/* Adjust app layout for mobile top bar */
.app-layout[b-q26ymkgqmn] {
padding-top: 60px;
}
[b-q26ymkgqmn] .app-layout {
padding-top: 60px;
}
}
.penpals-main[b-q26ymkgqmn] {
--penpals-cream: #f8efe6;
--penpals-paper: #fdf7f1;
--penpals-peach: #f7c9b9;
--penpals-gold: #c9a27a;
--penpals-ink: #5a3f3a;
--penpals-muted: #7c6a60;
--penpals-bg: var(--lov-paper);
flex: 1;
margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
padding: 48px 48px 96px;
/* background: radial-gradient(circle at top, #f9efe4 0%, #f4e2d3 45%, #f1d8c7 100%); */
width: min(1200px, calc(100% - 280px));
max-width: min(1200px, calc(100% - 280px)); /* Constrain width to the content area beside the sidebar. */
/* margin-right: auto; -- Removed to Left Align like Terms/MemoriesAll */
min-height: 100vh;
min-width: 0;
box-sizing: border-box;
overflow-x: hidden;
}
.penpals-main.sidebar-hidden[b-q26ymkgqmn] {
margin-left: max(0px, calc((100% - 1200px) / 2));
width: min(1200px, 100%);
max-width: min(1200px, 100%);
}
/* Footer Styles Overlay to Ensure Alignment */
[b-q26ymkgqmn] .main-footer {
margin-left: 280px;
width: calc(100% - 280px);
margin-top: 0;
}
[b-q26ymkgqmn] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
[b-q26ymkgqmn] .footer-container {
max-width: 1200px;
width: 100%;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
.penpals-hero[b-q26ymkgqmn] {
text-align: center;
margin-bottom: 40px;
}
.penpals-title[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: var(--mobile-hero-heading-weight);
color: #2C2A28;
margin-bottom: 1rem;
letter-spacing: 0;
overflow-wrap: anywhere;
text-wrap: balance;
}
.penpals-subtitle[b-q26ymkgqmn] {
/* inherited font-sans */
font-size: 1.1rem;
line-height: 1.6;
color: #6B5B57;
max-width: 600px;
margin: 0 auto;
overflow-wrap: anywhere;
}
.penpals-avatars[b-q26ymkgqmn] {
margin-top: 28px;
margin-bottom: 24px;
min-width: 0;
max-width: 100%;
}
.penpals-avatars-header[b-q26ymkgqmn] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 18px;
margin-bottom: 14px;
}
.penpals-section-title[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 1.5rem;
color: var(--penpals-ink);
margin: 0;
}
.penpals-avatars-action[b-q26ymkgqmn] {
border: 1px solid rgba(124, 90, 75, 0.2);
background: rgba(255, 255, 255, 0.48);
color: rgba(90, 63, 58, 0.82);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: all 0.3s ease;
}
.penpals-avatars-action:hover[b-q26ymkgqmn],
.penpals-avatars-action:focus-visible[b-q26ymkgqmn] {
background: rgba(247, 201, 185, 0.52);
border-color: rgba(201, 162, 122, 0.58);
transform: translateY(-1px);
}
.penpals-filters[b-q26ymkgqmn] {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: flex-end;
max-width: min(680px, 100%);
}
/* Mobile filter trigger — hidden on desktop */
.penpals-mobile-filters-trigger-row[b-q26ymkgqmn] {
display: none;
}
.penpals-mobile-filters-backdrop[b-q26ymkgqmn] {
display: none;
}
.penpals-filters-header-row[b-q26ymkgqmn] {
display: none;
}
.penpals-mobile-filters-close[b-q26ymkgqmn] {
display: none;
}
.penpals-filters-pill-tray[b-q26ymkgqmn] {
display: contents;
}
.penpals-mobile-filters-trigger[b-q26ymkgqmn] {
display: inline-flex;
align-items: center;
gap: 0.65rem;
border: 1px solid #D8A88A;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #5A413A;
padding: 0.7rem 1rem;
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
transition: all 0.3s ease;
}
.penpals-mobile-filters-trigger.has-active[b-q26ymkgqmn] {
background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}
.penpals-mobile-filters-badge[b-q26ymkgqmn] {
min-width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #7B5A53;
color: #fff;
font-size: 0.8rem;
}
.penpals-filter[b-q26ymkgqmn] {
border: 1px solid rgba(124, 90, 75, 0.25);
background: rgba(255, 255, 255, 0.55);
color: var(--penpals-ink);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.penpals-filter.active[b-q26ymkgqmn],
.penpals-filter:hover[b-q26ymkgqmn] {
background: rgba(247, 201, 185, 0.6);
border-color: rgba(201, 162, 122, 0.6);
}
.penpals-avatars-row[b-q26ymkgqmn] {
display: flex;
gap: 12px;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
max-width: 100%;
min-width: 0;
padding: 4px 2px 8px;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
-ms-overflow-style: none;
}
.penpals-avatars-row[b-q26ymkgqmn]::-webkit-scrollbar {
display: none;
}
.penpals-carousel-wrap[b-q26ymkgqmn] {
position: relative;
max-width: 100%;
min-width: 0;
}
.penpals-carousel-wrap[b-q26ymkgqmn]::before,
.penpals-carousel-wrap[b-q26ymkgqmn]::after {
content: "";
position: absolute;
top: 0;
bottom: 46px;
width: 28px;
pointer-events: none;
z-index: 2;
}
.penpals-carousel-wrap[b-q26ymkgqmn]::before {
left: 0;
background: linear-gradient(to right, var(--penpals-bg), rgba(255, 255, 255, 0));
}
.penpals-carousel-wrap[b-q26ymkgqmn]::after {
right: 0;
background: linear-gradient(to left, var(--penpals-bg), rgba(255, 255, 255, 0));
}
.penpals-avatar[b-q26ymkgqmn] {
background: rgba(255, 255, 255, 0.66);
border: 1px solid rgba(124, 90, 75, 0.14);
border-radius: 8px;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 8px;
color: var(--penpals-ink);
flex: 0 0 148px;
min-width: 148px;
max-width: 148px;
min-height: 158px;
padding: 12px 10px 10px;
scroll-snap-align: start;
scroll-snap-stop: always;
box-shadow: 0 12px 26px rgba(90, 63, 58, 0.08);
transition: all 0.3s ease;
}
.penpals-avatar:hover[b-q26ymkgqmn],
.penpals-avatar:focus-visible[b-q26ymkgqmn] {
transform: translateY(-2px);
background: rgba(255, 255, 255, 0.92);
border-color: rgba(201, 162, 122, 0.46);
box-shadow: 0 18px 34px rgba(90, 63, 58, 0.14);
}
.penpals-avatar:focus-visible[b-q26ymkgqmn] {
outline: 3px solid rgba(247, 201, 185, 0.56);
outline-offset: 2px;
}
.penpals-avatar.highlighted[b-q26ymkgqmn] {
background: rgba(255, 245, 239, 0.96);
border-color: rgba(247, 201, 185, 0.82);
}
.penpals-avatar.highlighted .penpals-avatar-image[b-q26ymkgqmn] {
border-color: rgba(247, 201, 185, 0.9);
box-shadow: 0 0 0 6px rgba(247, 201, 185, 0.35), 0 16px 30px rgba(90, 63, 58, 0.22);
animation: penpalPulse-b-q26ymkgqmn 1.6s ease-in-out infinite;
}
.penpals-avatar-image[b-q26ymkgqmn] {
position: relative;
width: 62px;
height: 62px;
border-radius: 8px;
background: var(--penpals-paper);
box-shadow: 0 10px 22px rgba(90, 63, 58, 0.16);
border: 1px solid rgba(201, 162, 122, 0.34);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.penpals-avatar img[b-q26ymkgqmn] {
width: 100%;
height: 100%;
object-fit: cover;
}
.penpals-status-dot[b-q26ymkgqmn] {
position: absolute;
bottom: 5px;
right: 5px;
width: 13px;
height: 13px;
border-radius: 50%;
border: 2px solid #fff;
}
.penpals-status-dot.active[b-q26ymkgqmn] {
background: #4d9f63;
box-shadow: 0 0 0 4px rgba(77, 159, 99, 0.2);
}
.penpals-status-dot.paused[b-q26ymkgqmn] {
background: #9c8c80;
box-shadow: 0 0 0 4px rgba(90, 63, 58, 0.12);
}
.penpals-avatar-name[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 0.95rem;
font-weight: 650;
text-align: center;
max-width: 126px;
line-height: 1.2;
min-height: 2.3em;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.penpals-avatar-next[b-q26ymkgqmn] {
font-family: var(--font-sans);
font-size: 0.72rem;
font-style: italic;
font-weight: 450;
color: rgba(90, 63, 58, 0.58);
min-height: 1.1rem;
line-height: 1.35;
text-align: center;
}
.penpals-avatar.add[b-q26ymkgqmn] {
background: rgba(255, 255, 255, 0.44);
border-style: dashed;
}
.penpals-avatar.add .penpals-avatar-image[b-q26ymkgqmn] {
border-style: dashed;
background: rgba(255, 255, 255, 0.5);
}
.penpals-avatar-add[b-q26ymkgqmn] {
font-size: 1.8rem;
color: var(--penpals-gold);
}
.penpals-carousel-controls[b-q26ymkgqmn] {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-top: 12px;
}
.penpals-carousel-nav[b-q26ymkgqmn] {
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(75, 46, 46, 0.15);
background: rgba(255, 255, 255, 0.95);
color: var(--penpals-ink);
font-family: var(--font-sans);
font-size: 1.12rem;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 18px rgba(90, 63, 58, 0.11);
transition: all 0.3s ease;
}
.penpals-carousel-nav:hover[b-q26ymkgqmn],
.penpals-carousel-nav:focus-visible[b-q26ymkgqmn] {
background: rgba(247, 201, 185, 0.5);
border-color: rgba(201, 162, 122, 0.62);
transform: scale(1.08);
}
.penpals-carousel-nav:focus-visible[b-q26ymkgqmn] {
outline: 3px solid rgba(247, 201, 185, 0.56);
outline-offset: 2px;
}
/* Credit skip nudge banner */
.penpals-credit-nudge[b-q26ymkgqmn] {
display: flex;
align-items: flex-start;
gap: 12px;
max-width: 800px;
margin: 0 auto 24px;
padding: 16px 20px;
background: linear-gradient(135deg, #FFF8F0, #FFF0E0);
border: 1px solid #F0DCC8;
border-radius: 14px;
color: #5A4A3A;
font-size: 0.95rem;
line-height: 1.5;
}
.penpals-credit-nudge-icon[b-q26ymkgqmn] {
font-size: 1.5rem;
line-height: 1;
flex-shrink: 0;
margin-top: 2px;
}
.penpals-credit-nudge-text[b-q26ymkgqmn] {
flex: 1;
}
.penpals-credit-nudge-text p[b-q26ymkgqmn] {
margin: 0 0 4px;
}
.penpals-credit-nudge-link[b-q26ymkgqmn] {
color: #B08D6E;
font-style: italic;
font-weight: 500;
text-decoration: none;
transition: color 0.2s;
}
.penpals-credit-nudge-link:hover[b-q26ymkgqmn] {
color: #8B7355;
text-decoration: underline;
}
.penpals-credit-nudge-dismiss[b-q26ymkgqmn] {
background: none;
border: none;
color: #B0A090;
cursor: pointer;
font-size: 1rem;
padding: 0 4px;
line-height: 1;
flex-shrink: 0;
transition: color 0.2s;
}
.penpals-credit-nudge-dismiss:hover[b-q26ymkgqmn] {
color: #8B7355;
}
@media (max-width: 540px) {
.penpals-credit-nudge[b-q26ymkgqmn] {
margin: 0 12px 20px;
padding: 14px 16px;
font-size: 0.9rem;
}
}
.penpals-letters[b-q26ymkgqmn] {
margin-top: 22px;
min-width: 0;
max-width: 100%;
}
.penpals-letters-header[b-q26ymkgqmn] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 18px;
}
.penpals-letter-list[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
gap: 22px;
min-width: 0;
max-width: 100%;
}
.penpal-letter-card[b-q26ymkgqmn] {
appearance: none;
width: 100%;
max-width: 100%;
min-width: 0;
color: inherit;
font: inherit;
text-align: left;
border: 1px solid rgba(201, 162, 122, 0.3);
background: linear-gradient(145deg, #fdf7f1 0%, #f8ede2 100%);
border-radius: 20px;
padding: 24px 28px;
display: grid;
grid-template-columns: 56px minmax(0, 1fr) auto;
gap: 18px;
align-items: center;
color: var(--penpals-ink);
box-shadow: 0 16px 34px rgba(100, 70, 60, 0.16);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
position: relative;
text-decoration: none;
overflow: hidden;
}
.penpal-letter-card:focus-visible[b-q26ymkgqmn] {
outline: 3px solid rgba(201, 162, 122, 0.5);
outline-offset: 4px;
}
.penpal-letter-card:hover[b-q26ymkgqmn] {
transform: translateY(-2px);
box-shadow: 0 20px 40px rgba(100, 70, 60, 0.2);
}
.penpal-letter-card.unread[b-q26ymkgqmn] {
border-color: rgba(201, 162, 122, 0.7);
}
/* Answered stamp styling - vintage ink stamp effect */
/* Desktop: Large stamp inline within actions area */
.penpal-letter-stamp[b-q26ymkgqmn] {
width: 72px;
height: 72px;
transform: rotate(-20deg);
opacity: 0.8;
mix-blend-mode: multiply;
pointer-events: none;
flex-shrink: 0;
margin-right: 8px;
}
.penpal-letter-stamp .stamp-svg[b-q26ymkgqmn] {
width: 100%;
height: 100%;
color: #8b6347;
}
.penpal-letter-stamp .stamp-border-outer[b-q26ymkgqmn] {
fill: none;
stroke: #8b6347;
stroke-width: 2;
stroke-dasharray: 3 2;
}
.penpal-letter-stamp .stamp-border-mid[b-q26ymkgqmn] {
fill: none;
stroke: #8b6347;
stroke-width: 1;
}
.penpal-letter-stamp .stamp-border-inner[b-q26ymkgqmn] {
fill: none;
stroke: #8b6347;
stroke-width: 1.5;
stroke-dasharray: 8 4;
}
.penpal-letter-stamp .stamp-icon-group[b-q26ymkgqmn] {
color: #8b6347;
}
.penpal-letter-stamp .stamp-detail[b-q26ymkgqmn] {
opacity: 0.7;
}
.penpal-letter-stamp .stamp-text-curved[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.15em;
fill: #8b6347;
text-transform: uppercase;
}
.penpal-letter-stamp .stamp-date[b-q26ymkgqmn] {
font-family: var(--font-sans);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.08em;
fill: #8b6347;
}
.penpal-letter-stamp .stamp-dot[b-q26ymkgqmn] {
fill: #8b6347;
}
.penpal-letter-avatar[b-q26ymkgqmn] {
width: 56px;
height: 56px;
border-radius: 16px;
background: rgba(247, 201, 185, 0.4);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 1px solid rgba(214, 168, 135, 0.7);
box-shadow: 0 8px 18px rgba(100, 70, 60, 0.18);
flex-shrink: 0;
}
.penpal-letter-body[b-q26ymkgqmn] {
min-width: 0;
overflow: hidden;
}
.penpal-letter-avatar img[b-q26ymkgqmn] {
width: 100%;
height: 100%;
object-fit: cover;
}
.penpal-letter-subject[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 1.2rem;
margin-bottom: 6px;
line-height: 1.25;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.penpal-letter-meta[b-q26ymkgqmn] {
font-family: var(--font-sans);
font-size: 0.9rem;
color: var(--penpals-muted);
margin-bottom: 10px;
overflow-wrap: anywhere;
}
.penpal-letter-preview[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-style: italic;
color: var(--penpals-ink);
line-height: 1.65;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
overflow-wrap: anywhere;
}
.penpal-letter-actions[b-q26ymkgqmn] {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
min-width: 120px;
max-width: 100%;
flex-wrap: wrap;
justify-content: flex-end;
}
.penpal-letter-badge[b-q26ymkgqmn] {
background: rgba(201, 162, 122, 0.2);
color: var(--penpals-ink);
padding: 4px 10px;
border-radius: 999px;
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.08em;
white-space: nowrap;
}
.penpal-letter-cta[b-q26ymkgqmn] {
background: rgba(247, 201, 185, 0.9);
border-radius: 999px;
padding: 8px 16px;
font-family: var(--font-sans);
font-weight: 600;
color: var(--penpals-ink);
white-space: nowrap;
}
@keyframes penpalPulse-b-q26ymkgqmn {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.04);
}
}
.penpals-empty[b-q26ymkgqmn] {
background: rgba(255, 255, 255, 0.7);
border: 1px solid rgba(201, 162, 122, 0.3);
border-radius: 20px;
padding: 36px 40px;
text-align: center;
box-shadow: 0 14px 30px rgba(100, 70, 60, 0.12);
}
.penpals-empty-icon[b-q26ymkgqmn] {
font-size: 5rem;
margin-bottom: 12px;
}
.penpals-empty h3[b-q26ymkgqmn] {
font-family: var(--font-serif);
color: var(--penpals-ink);
margin-bottom: 8px;
}
.penpals-empty p[b-q26ymkgqmn] {
color: var(--penpals-muted);
max-width: 520px;
margin: 0 auto 18px;
line-height: 1.6;
}
.penpals-empty-cta[b-q26ymkgqmn] {
background: rgba(247, 201, 185, 0.9);
border: none;
border-radius: 999px;
padding: 10px 22px;
font-family: var(--font-sans);
font-weight: 600;
color: var(--penpals-ink);
cursor: pointer;
}
.penpal-picker-backdrop[b-q26ymkgqmn] {
position: fixed;
inset: 0;
width: 100vw;
min-height: 100dvh;
background: rgba(39, 24, 19, 0.35);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1500;
padding: 1.5rem;
}
.penpal-picker-modal[b-q26ymkgqmn] {
width: min(720px, 95vw);
background: rgba(253, 248, 243, 0.98);
border: 1px solid rgba(218, 184, 155, 0.6);
border-radius: 24px;
padding: 2rem 2rem 1.6rem;
box-shadow: 0 20px 50px rgba(75, 46, 46, 0.25);
display: flex;
flex-direction: column;
gap: 1rem;
position: relative;
max-height: 86vh;
animation: penPalLift-b-q26ymkgqmn 0.25s ease-out;
}
.penpal-picker-close[b-q26ymkgqmn] {
position: absolute;
top: 16px;
right: 16px;
border: none;
background: rgba(235, 216, 206, 0.8);
color: #6a504b;
width: 36px;
height: 36px;
border-radius: 50%;
font-size: 1.3rem;
cursor: pointer;
}
.penpal-picker-title[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 1.6rem;
color: var(--penpals-ink);
margin: 0.2rem 0 0;
}
.penpal-picker-subtitle[b-q26ymkgqmn] {
color: var(--penpals-muted);
margin: 0 0 0.4rem;
}
.penpal-picker-search[b-q26ymkgqmn] {
display: flex;
align-items: center;
gap: 0.6rem;
border-radius: 999px;
padding: 0.6rem 0.9rem;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(218, 184, 155, 0.6);
}
.penpal-picker-search-icon[b-q26ymkgqmn] {
width: 20px;
height: 20px;
color: rgba(90, 63, 58, 0.6);
}
.penpal-picker-search-input[b-q26ymkgqmn] {
border: none;
background: transparent;
width: 100%;
font-size: 1rem;
font-family: var(--font-sans);
color: var(--penpals-ink);
outline: none;
}
.penpal-picker-tabs[b-q26ymkgqmn] {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.penpal-picker-tab[b-q26ymkgqmn] {
border: 1px solid rgba(124, 90, 75, 0.25);
background: rgba(255, 255, 255, 0.6);
color: var(--penpals-ink);
border-radius: 999px;
padding: 8px 14px;
font-family: var(--font-sans);
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s ease;
}
.penpal-picker-tab.active[b-q26ymkgqmn],
.penpal-picker-tab:hover[b-q26ymkgqmn] {
background: rgba(247, 201, 185, 0.65);
border-color: rgba(201, 162, 122, 0.6);
}
.penpal-picker-list[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
gap: 14px;
margin-top: 0.2rem;
flex: 1;
min-height: 0;
overflow-y: auto;
padding-right: 4px;
scrollbar-width: thin;
scrollbar-color: rgba(139, 90, 43, 0.2) transparent;
}
.penpal-picker-list[b-q26ymkgqmn]::-webkit-scrollbar {
width: 7px;
}
.penpal-picker-list[b-q26ymkgqmn]::-webkit-scrollbar-track {
background: transparent;
}
.penpal-picker-list[b-q26ymkgqmn]::-webkit-scrollbar-thumb {
background: rgba(139, 90, 43, 0.2);
border-radius: 999px;
}
.penpal-picker-list:hover[b-q26ymkgqmn] {
scrollbar-color: rgba(139, 90, 43, 0.28) transparent;
}
.penpal-picker-list:hover[b-q26ymkgqmn]::-webkit-scrollbar-thumb {
background: rgba(139, 90, 43, 0.28);
}
.penpal-picker-card[b-q26ymkgqmn] {
display: grid;
grid-template-columns: 72px 1fr auto;
gap: 16px;
align-items: center;
background: rgba(255, 255, 255, 0.72);
border: 1px solid rgba(201, 162, 122, 0.35);
border-radius: 20px;
padding: 12px 16px;
box-shadow: 0 12px 28px rgba(100, 70, 60, 0.12);
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
appearance: none;
font: inherit;
color: inherit;
text-align: left;
}
.penpal-picker-card:hover[b-q26ymkgqmn],
.penpal-picker-card:focus-within[b-q26ymkgqmn] {
background: rgba(255, 250, 246, 0.86);
border-color: rgba(201, 162, 122, 0.55);
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(100, 70, 60, 0.16);
}
.penpal-picker-card.unavailable[b-q26ymkgqmn] {
opacity: 0.5;
filter: grayscale(0.2);
box-shadow: none;
cursor: not-allowed;
pointer-events: none;
}
.penpal-picker-card.unavailable .penpal-picker-avatar[b-q26ymkgqmn] {
filter: grayscale(0.4);
}
.penpal-picker-card.unavailable .penpal-picker-action[b-q26ymkgqmn] {
background: rgba(231, 214, 202, 0.7);
border-color: rgba(201, 162, 122, 0.2);
color: rgba(90, 63, 58, 0.7);
opacity: 0.8;
box-shadow: none;
cursor: not-allowed;
}
.penpal-picker-avatar[b-q26ymkgqmn] {
width: 72px;
height: 72px;
border-radius: 16px;
object-fit: cover;
border: 1px solid rgba(214, 168, 135, 0.8);
}
.penpal-picker-info[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
gap: 4px;
}
.penpal-picker-name[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 1.05rem;
color: var(--penpals-ink);
}
.penpal-picker-line[b-q26ymkgqmn] {
color: var(--penpals-muted);
font-size: 0.95rem;
line-height: 1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.penpal-picker-action[b-q26ymkgqmn] {
background: rgba(255, 255, 255, 0.4);
border: 1px solid rgba(139, 90, 43, 0.2);
border-radius: 999px;
padding: 10px 18px;
font-family: var(--font-sans);
font-weight: 600;
color: rgba(75, 46, 46, 0.74);
cursor: pointer;
white-space: nowrap;
opacity: 0.78;
box-shadow: 0 4px 12px rgba(179, 119, 84, 0.08);
transition: all 0.3s ease;
}
.penpal-picker-card:not(.unavailable):hover .penpal-picker-action:not(:disabled)[b-q26ymkgqmn],
.penpal-picker-card:not(.unavailable):focus-within .penpal-picker-action:not(:disabled)[b-q26ymkgqmn],
.penpal-picker-action:not(:disabled):hover[b-q26ymkgqmn],
.penpal-picker-action:not(:disabled):focus-visible[b-q26ymkgqmn] {
background: rgba(247, 201, 185, 0.9);
border-color: rgba(201, 162, 122, 0.62);
color: var(--penpals-ink);
opacity: 1;
box-shadow: 0 8px 18px rgba(179, 119, 84, 0.2);
transform: translateY(-1px);
}
.penpal-picker-action:focus-visible[b-q26ymkgqmn] {
outline: 2px solid rgba(139, 90, 43, 0.42);
outline-offset: 3px;
}
.penpal-picker-empty[b-q26ymkgqmn] {
text-align: center;
color: var(--penpals-muted);
padding: 12px;
}
.penpals-letter-more[b-q26ymkgqmn] {
display: flex;
justify-content: center;
margin-top: 0.9rem;
}
.penpal-picker-more[b-q26ymkgqmn] {
align-self: center;
border: 1px solid rgba(201, 162, 122, 0.32);
border-radius: 999px;
background: rgba(255, 255, 255, 0.52);
color: rgba(75, 46, 46, 0.78);
font-family: var(--font-sans);
font-size: 0.92rem;
font-weight: 600;
line-height: 1;
padding: 0.72rem 1.15rem;
cursor: pointer;
margin-top: 0.3rem;
box-shadow: 0 8px 18px rgba(90, 63, 58, 0.08);
transition: all 0.3s ease;
}
.penpal-picker-more:hover[b-q26ymkgqmn],
.penpal-picker-more:focus-visible[b-q26ymkgqmn] {
background: rgba(253, 248, 243, 0.92);
border-color: rgba(201, 162, 122, 0.58);
color: var(--penpals-ink);
transform: translateY(-1px);
}
.penpal-picker-more:focus-visible[b-q26ymkgqmn] {
outline: 3px solid rgba(247, 201, 185, 0.5);
outline-offset: 3px;
}
.pen-pal-modal-backdrop[b-q26ymkgqmn] {
position: fixed;
inset: 0;
background: rgba(39, 24, 19, 0.35);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
display: flex;
align-items: center;
justify-content: center;
z-index: 1500;
padding: 1.5rem;
}
.pen-pal-modal[b-q26ymkgqmn] {
width: min(420px, 92vw);
background: rgba(253, 248, 243, 0.98);
border: 1px solid rgba(218, 184, 155, 0.6);
border-radius: 22px;
padding: 1.3rem 1.4rem 1.4rem;
box-shadow: 0 18px 40px rgba(75, 46, 46, 0.25);
display: flex;
flex-direction: column;
gap: 1rem;
animation: penPalLift-b-q26ymkgqmn 0.25s ease-out;
}
.pen-pal-modal-header[b-q26ymkgqmn] {
display: flex;
align-items: center;
gap: 0.9rem;
}
.pen-pal-modal-avatar[b-q26ymkgqmn] {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(214, 168, 135, 0.8);
box-shadow: 0 6px 16px rgba(122, 92, 70, 0.2);
}
.pen-pal-modal-title[b-q26ymkgqmn] {
font-size: 1.05rem;
font-weight: 700;
color: #4b2e2e;
}
.pen-pal-modal-body[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 0.95rem;
color: rgba(75, 46, 46, 0.85);
}
.pen-pal-modal-body p[b-q26ymkgqmn] {
line-height: 1.5;
}
.pen-pal-choice[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pen-pal-choice-label[b-q26ymkgqmn] {
font-size: 0.8rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: rgba(75, 46, 46, 0.55);
}
.pen-pal-segmented[b-q26ymkgqmn] {
display: flex;
gap: 0.4rem;
background: rgba(255, 255, 255, 0.6);
border: 1px solid rgba(214, 168, 135, 0.45);
border-radius: 999px;
padding: 0.3rem;
}
.pen-pal-segment[b-q26ymkgqmn] {
flex: 1;
background: transparent;
border: none;
border-radius: 999px;
padding: 0.45rem 0.4rem;
font-size: 0.85rem;
font-weight: 600;
color: rgba(75, 46, 46, 0.8);
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.pen-pal-segment.active[b-q26ymkgqmn] {
background: linear-gradient(135deg, #ffd6c5, #f4bf9b);
color: #4b2e2e;
box-shadow: 0 4px 10px rgba(171, 112, 80, 0.25);
}
.pen-pal-toggle[b-q26ymkgqmn] {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.5rem 0.6rem;
border-radius: 999px;
background: rgba(255, 255, 255, 0.65);
border: 1px solid rgba(214, 168, 135, 0.45);
}
.pen-pal-toggle.locked[b-q26ymkgqmn] {
opacity: 0.7;
cursor: not-allowed;
}
.pen-pal-toggle input[b-q26ymkgqmn] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.pen-pal-toggle-track[b-q26ymkgqmn] {
width: 40px;
height: 22px;
border-radius: 999px;
background: rgba(231, 214, 202, 0.9);
border: 1px solid rgba(171, 124, 96, 0.45);
position: relative;
transition: background 0.2s ease, border-color 0.2s ease;
flex-shrink: 0;
}
.pen-pal-toggle-thumb[b-q26ymkgqmn] {
width: 18px;
height: 18px;
background: #ffffff;
border-radius: 50%;
position: absolute;
top: 1px;
left: 1px;
box-shadow: 0 2px 6px rgba(75, 46, 46, 0.18);
transition: transform 0.2s ease;
}
.pen-pal-toggle input:checked + .pen-pal-toggle-track[b-q26ymkgqmn] {
background: linear-gradient(135deg, #ffd6c5, #f4bf9b);
border-color: rgba(173, 112, 80, 0.6);
}
.pen-pal-toggle input:checked + .pen-pal-toggle-track .pen-pal-toggle-thumb[b-q26ymkgqmn] {
transform: translateX(18px);
}
.pen-pal-toggle-text[b-q26ymkgqmn] {
font-size: 0.9rem;
color: rgba(75, 46, 46, 0.8);
display: inline-flex;
align-items: center;
gap: 0.45rem;
flex-wrap: wrap;
}
.pen-pal-premium-chip[b-q26ymkgqmn] {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.1rem 0.45rem;
background: rgba(123, 90, 83, 0.1);
color: rgba(91, 58, 47, 0.82);
border: 1px solid rgba(123, 90, 83, 0.16);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0;
}
.pen-pal-toggle-note[b-q26ymkgqmn] {
margin-top: 0.35rem;
color: rgba(88, 65, 58, 0.68);
font-size: 0.82rem;
line-height: 1.35;
}
.pen-pal-modal-footer[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.pen-pal-primary[b-q26ymkgqmn] {
background: linear-gradient(135deg, #ffc7b6, #f2b08e);
border: none;
border-radius: 999px;
padding: 0.7rem 1rem;
font-weight: 700;
color: #4b2e2e;
cursor: pointer;
box-shadow: 0 10px 22px rgba(179, 119, 84, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.pen-pal-primary:hover[b-q26ymkgqmn] {
transform: translateY(-1px);
box-shadow: 0 12px 26px rgba(179, 119, 84, 0.28);
}
.pen-pal-secondary[b-q26ymkgqmn] {
background: transparent;
border: 1px solid rgba(206, 160, 128, 0.7);
border-radius: 999px;
padding: 0.6rem 1rem;
color: #6a504b;
font-weight: 600;
cursor: pointer;
}
.pen-pal-secondary:hover[b-q26ymkgqmn] {
background: rgba(255, 228, 210, 0.55);
}
@keyframes penPalLift-b-q26ymkgqmn {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 1024px) {
.penpals-main[b-q26ymkgqmn] {
margin-left: 0;
padding: 32px var(--mobile-page-margin) 64px;
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
.penpals-main.sidebar-hidden[b-q26ymkgqmn] {
margin-left: 0;
width: 100%;
max-width: 100%;
}
.penpal-letter-card[b-q26ymkgqmn] {
grid-template-columns: 56px minmax(0, 1fr);
}
.penpal-letter-actions[b-q26ymkgqmn] {
grid-column: 1 / -1;
justify-content: flex-start;
min-width: 0;
width: 100%;
}
[b-q26ymkgqmn] .main-footer {
margin-left: 0 !important;
width: 100%;
max-width: 100%;
}
.penpals-avatars-header[b-q26ymkgqmn],
.penpals-letters-header[b-q26ymkgqmn] {
align-items: flex-start;
flex-direction: column;
gap: 12px;
}
/* Mobile filter trigger & bottom sheet */
.penpals-mobile-filters-trigger-row[b-q26ymkgqmn] {
display: flex;
justify-content: flex-start;
margin-bottom: 0;
}
.penpals-mobile-filters-backdrop[b-q26ymkgqmn] {
display: block;
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(43, 42, 40, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
.penpals-filters[b-q26ymkgqmn] {
display: none;
}
.penpals-filters.mobile-open[b-q26ymkgqmn] {
display: block;
position: fixed;
left: max(1rem, env(safe-area-inset-left));
right: max(1rem, env(safe-area-inset-right));
bottom: calc(1rem + env(safe-area-inset-bottom));
top: auto;
z-index: 1300;
margin: 0;
max-height: min(78vh, calc(100dvh - 6rem));
overflow-y: auto;
padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
border-radius: 24px;
background: #FDF8F0;
box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
}
.penpals-filters-header-row[b-q26ymkgqmn] {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
.penpals-filters-header[b-q26ymkgqmn] {
font-family: var(--font-serif);
font-size: 1.15rem;
font-weight: 600;
color: #3A3228;
}
.penpals-mobile-filters-close[b-q26ymkgqmn] {
display: inline-flex;
align-items: center;
border: none;
border-radius: 999px;
background: rgba(123, 90, 83, 0.1);
color: #5A413A;
padding: 0.55rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
}
.penpals-filters-pill-tray[b-q26ymkgqmn] {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.penpals-avatars-row[b-q26ymkgqmn] {
gap: 16px;
padding-bottom: 12px;
}
.penpals-carousel-wrap[b-q26ymkgqmn]::before,
.penpals-carousel-wrap[b-q26ymkgqmn]::after,
.penpals-carousel-controls[b-q26ymkgqmn] {
display: none;
}
.penpals-avatar[b-q26ymkgqmn] {
flex-basis: 124px;
min-width: 124px;
max-width: 124px;
min-height: 146px;
padding: 10px 8px;
}
.penpals-avatar-name[b-q26ymkgqmn] {
font-size: 0.82rem;
max-width: 110px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
line-height: 1.35;
}
.penpals-avatar-next[b-q26ymkgqmn] {
font-size: 0.7rem;
}
}
@media (max-width: 768px) {
[b-q26ymkgqmn] .app-layout {
padding-top: 60px;
overflow-x: hidden;
}
[b-q26ymkgqmn] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-q26ymkgqmn] .sidebar.visible {
transform: translateX(0);
}
[b-q26ymkgqmn] .sidebar.hidden {
transform: translateX(-100%);
}
.penpals-main.sidebar-hidden[b-q26ymkgqmn] {
margin-top: 0;
}
.penpals-title[b-q26ymkgqmn] {
font-size: 2.1rem;
}
.penpals-subtitle[b-q26ymkgqmn] {
font-size: 1rem;
}
.penpal-letter-card[b-q26ymkgqmn] {
grid-template-columns: minmax(0, 1fr);
align-items: flex-start;
gap: 14px;
padding: 20px;
}
/* Mobile: smaller stamp inline next to CTA button (clean "action bar" layout) */
.penpal-letter-stamp[b-q26ymkgqmn] {
width: 44px;
height: 44px;
margin-right: 4px;
}
.penpal-letter-stamp .stamp-text-curved[b-q26ymkgqmn] {
font-size: 8px;
}
.penpal-letter-stamp .stamp-date[b-q26ymkgqmn] {
font-size: 7px;
}
.penpal-letter-actions[b-q26ymkgqmn] {
align-items: center;
flex-direction: row;
flex-wrap: wrap;
gap: 8px;
justify-content: flex-start;
min-width: 0;
width: 100%;
}
.penpal-picker-modal[b-q26ymkgqmn] {
width: 100%;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
padding:
calc(1.1rem + env(safe-area-inset-top))
calc(1.2rem + env(safe-area-inset-right))
calc(1.2rem + env(safe-area-inset-bottom))
calc(1.2rem + env(safe-area-inset-left));
overflow: hidden;
}
.penpal-picker-close[b-q26ymkgqmn] {
top: calc(12px + env(safe-area-inset-top));
right: calc(12px + env(safe-area-inset-right));
}
.penpal-picker-card[b-q26ymkgqmn] {
grid-template-columns: 1fr;
text-align: left;
}
.penpal-picker-avatar[b-q26ymkgqmn] {
width: 100%;
height: 160px;
border-radius: 18px;
}
.penpal-picker-action[b-q26ymkgqmn] {
width: 100%;
justify-self: stretch;
}
.penpal-picker-backdrop[b-q26ymkgqmn] {
padding: 0;
align-items: stretch;
}
}
@media (max-width: 480px) {
.penpals-avatar[b-q26ymkgqmn] {
min-width: 112px;
max-width: 112px;
flex-basis: 112px;
}
.penpals-avatar-image[b-q26ymkgqmn] {
width: 58px;
height: 58px;
}
.penpals-avatar-name[b-q26ymkgqmn] {
font-size: 0.78rem;
max-width: 100px;
}
}
/* Guest Mode Hero */
.penpals-hero.guest-mode[b-q26ymkgqmn] {
padding-bottom: 2rem;
}
.guest-actions[b-q26ymkgqmn] {
margin-top: 1.5rem;
display: flex;
justify-content: center;
}
.cta-button[b-q26ymkgqmn] {
background: var(--lov-green);
color: var(--lov-on-green);
padding: 0.8rem 1.6rem;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 600;
border: none;
cursor: pointer;
box-shadow: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cta-button:hover[b-q26ymkgqmn] {
text-decoration: underline;
text-underline-offset: 3px;
}
/* How It Works Strip */
.how-it-works[b-q26ymkgqmn] {
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid rgba(0,0,0,0.05);
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.how-step[b-q26ymkgqmn] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
max-width: 120px;
text-align: center;
}
.how-icon[b-q26ymkgqmn] {
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
color: var(--lov-green);
background: var(--lov-selected);
border-radius: 50%;
}
.how-text[b-q26ymkgqmn] {
font-size: 0.85rem;
color: var(--text-secondary, #666);
font-weight: 500;
}
.how-arrow[b-q26ymkgqmn] {
color: var(--text-muted, #ccc);
font-size: 1.2rem;
}
/* Sample Badge */
.penpal-letter-badge.sample[b-q26ymkgqmn] {
background-color: #64748b; /* Slate 500 */
color: white;
}
.penpal-letter-card.sample[b-q26ymkgqmn] {
border-color: rgba(100, 116, 139, 0.2);
}
.penpal-letter-card.sample:hover[b-q26ymkgqmn] {
border-color: #64748b;
background-color: rgba(100, 116, 139, 0.02);
}
@media (max-width: 600px) {
.how-it-works[b-q26ymkgqmn] {
gap: 0.8rem;
}
.how-arrow[b-q26ymkgqmn] {
display: none;
}
.how-step[b-q26ymkgqmn] {
flex: 1;
min-width: 80px;
}
}
/* Mobile polish: keep Penpals content inside the same calm page frame as the other feature pages. */
@media (max-width: 1024px) {
[b-q26ymkgqmn] .mobile-floating-header {
z-index: 1200;
}
.app-layout[b-q26ymkgqmn],
[b-q26ymkgqmn] .app-layout {
display: block;
width: 100%;
max-width: 100vw;
padding-top: 60px;
overflow-x: hidden;
background-color: var(--lov-paper);
}
.penpals-main[b-q26ymkgqmn],
.penpals-main.sidebar-hidden[b-q26ymkgqmn] {
width: 100%;
max-width: 720px;
min-width: 0;
margin: 0 auto !important;
padding: 0 18px 44px;
box-sizing: border-box;
overflow-x: hidden;
}
.penpals-hero[b-q26ymkgqmn] {
width: 100%;
max-width: 680px;
margin: 0 auto 34px;
padding: 30px 0 0;
box-sizing: border-box;
}
.penpals-title[b-q26ymkgqmn] {
font-size: clamp(2.05rem, 7vw, 2.7rem);
line-height: 1.1;
letter-spacing: 0;
margin-bottom: 1rem;
}
.penpals-subtitle[b-q26ymkgqmn] {
max-width: 36rem;
font-size: clamp(1.05rem, 2.8vw, 1.25rem);
line-height: 1.55;
}
.guest-actions[b-q26ymkgqmn] {
margin-top: 1.5rem;
}
.how-it-works[b-q26ymkgqmn] {
width: 100%;
margin: 2.4rem auto 0;
padding: 1.8rem 0 0;
gap: 1rem;
}
.penpals-avatars[b-q26ymkgqmn],
.penpals-letters[b-q26ymkgqmn],
.penpals-credit-nudge[b-q26ymkgqmn] {
width: 100%;
max-width: 100%;
margin-left: 0;
margin-right: 0;
box-sizing: border-box;
}
.penpals-avatars-header[b-q26ymkgqmn],
.penpals-letters-header[b-q26ymkgqmn] {
width: 100%;
align-items: flex-start;
padding: 0;
}
.penpals-section-title[b-q26ymkgqmn] {
font-size: clamp(1.8rem, 5vw, 2.3rem);
line-height: 1.12;
}
.penpals-carousel-wrap[b-q26ymkgqmn],
.penpals-avatars-row[b-q26ymkgqmn],
.penpals-letter-list[b-q26ymkgqmn] {
width: 100%;
max-width: 100%;
min-width: 0;
box-sizing: border-box;
}
.penpals-avatars-row[b-q26ymkgqmn] {
padding: 4px 0 12px;
scroll-padding-left: 0;
}
.penpal-letter-card[b-q26ymkgqmn],
.penpals-empty[b-q26ymkgqmn] {
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
}
@media (max-width: 680px) {
.penpals-main[b-q26ymkgqmn],
.penpals-main.sidebar-hidden[b-q26ymkgqmn] {
max-width: 680px;
width: calc(100% - var(--mobile-page-margin, 16px));
max-width: calc(100% - var(--mobile-page-margin, 16px));
padding: 0 var(--mobile-page-margin, 16px) 40px;
}
.penpals-hero[b-q26ymkgqmn] {
padding-top: 24px;
margin-bottom: 30px;
}
.penpals-title[b-q26ymkgqmn] {
font-size: clamp(2.05rem, 9.2vw, 2.35rem);
line-height: 1.12;
}
.penpals-subtitle[b-q26ymkgqmn] {
font-size: clamp(1.02rem, 4.4vw, 1.16rem);
line-height: 1.55;
}
.cta-button[b-q26ymkgqmn] {
width: min(100%, 320px);
padding: 0.95rem 1.4rem;
font-size: 1rem;
}
.how-it-works[b-q26ymkgqmn] {
justify-content: space-between;
flex-wrap: nowrap;
gap: 0.7rem;
}
.how-step[b-q26ymkgqmn] {
flex: 1 1 0;
min-width: 0;
}
.how-icon[b-q26ymkgqmn] {
width: 46px;
height: 46px;
}
.how-text[b-q26ymkgqmn] {
font-size: 0.86rem;
line-height: 1.15;
}
.penpals-avatars[b-q26ymkgqmn] {
margin-top: 30px;
margin-bottom: 30px;
}
.penpals-avatars-header[b-q26ymkgqmn],
.penpals-letters-header[b-q26ymkgqmn] {
margin-bottom: 16px;
}
.penpals-avatar[b-q26ymkgqmn] {
border-radius: 18px;
box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
}
.penpals-avatar:first-child[b-q26ymkgqmn] {
margin-left: 0;
}
.penpals-letter-list[b-q26ymkgqmn] {
gap: 20px;
}
.penpal-letter-card[b-q26ymkgqmn] {
border-radius: 18px;
padding: 1.25rem 1.3rem;
box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
}
.penpal-letter-subject[b-q26ymkgqmn] {
font-size: clamp(1.35rem, 6vw, 1.75rem);
line-height: 1.2;
}
.penpal-letter-meta[b-q26ymkgqmn] {
font-size: clamp(0.98rem, 4vw, 1.08rem);
}
.penpal-letter-preview[b-q26ymkgqmn] {
font-size: clamp(1.05rem, 4.6vw, 1.18rem);
line-height: 1.65;
}
}
@media (max-width: 420px) {
.penpals-hero[b-q26ymkgqmn] {
padding-top: 22px;
}
.penpals-section-title[b-q26ymkgqmn] {
font-size: clamp(1.75rem, 8vw, 2.05rem);
}
.penpals-avatar[b-q26ymkgqmn] {
flex-basis: 112px;
min-width: 112px;
max-width: 112px;
}
.penpal-letter-card[b-q26ymkgqmn] {
padding: 1.2rem 1.25rem;
}
.penpal-letter-actions[b-q26ymkgqmn] {
gap: 0.7rem;
}
}
/* LovOne editorial application identity. */
.penpals-main[b-q26ymkgqmn] { --penpals-cream: var(--lov-paper); --penpals-paper: var(--lov-surface); --penpals-ink: var(--lov-ink); --penpals-muted: var(--lov-muted); --penpals-bg: var(--lov-paper); }
.penpals-hero[b-q26ymkgqmn] { text-align: left; margin-bottom: 32px; }
.penpals-title[b-q26ymkgqmn] { font-weight: 450; font-size: clamp(2rem, 3.5vw, 3.2rem); color: var(--lov-ink); }
.penpals-subtitle[b-q26ymkgqmn] { margin-left: 0; max-width: 48rem; color: var(--lov-muted); }
.penpals-avatars-action[b-q26ymkgqmn] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; padding: 12px 18px; }
.penpals-avatar[b-q26ymkgqmn] { flex: 0 0 280px; display: grid; grid-template-columns: 64px minmax(0,1fr); grid-template-rows: auto auto; gap: 4px 14px; padding: 16px; text-align: left; align-items: center; border: 1px solid var(--lov-line); border-radius: 6px; box-shadow: none; background: var(--lov-surface); }
.penpals-avatar-image[b-q26ymkgqmn] { grid-row: 1 / 3; width: 64px; height: 64px; margin: 0; }
.penpals-avatar-name[b-q26ymkgqmn] { white-space: normal; display: block; overflow: visible; -webkit-line-clamp: unset; font-size: 1rem; text-align: left; }
.penpals-avatar-next[b-q26ymkgqmn] { grid-column: 2; margin: 0; text-align: left; color: var(--lov-muted); }
.penpal-letter-card[b-q26ymkgqmn] { background: transparent; border: 0; border-bottom: 1px solid var(--lov-line); box-shadow: none; border-radius: 0; padding: 24px 0; }
.penpal-letter-card:hover[b-q26ymkgqmn] { background: var(--lov-surface); box-shadow: none; transform: none; }
.penpal-letter-card.unread[b-q26ymkgqmn] { border-color: var(--lov-line); }
.penpals-filter[b-q26ymkgqmn] { border-radius: 6px; box-shadow: none; }
.penpals-filter.active[b-q26ymkgqmn] { background: var(--lov-selected); color: var(--lov-ink); }
@media(max-width: 640px) { .penpals-avatar[b-q26ymkgqmn] { flex-basis: 250px; } }
.penpals-avatar[b-q26ymkgqmn] { min-width: 280px; max-width: 280px; min-height: 112px; }
.penpals-avatar.add[b-q26ymkgqmn] { align-content: center; }
.penpals-avatar:hover[b-q26ymkgqmn], .penpals-avatar:focus-visible[b-q26ymkgqmn] { background: var(--lov-surface); border-color: var(--lov-green); box-shadow: none; transform: none; }
.penpals-avatars-action:hover[b-q26ymkgqmn], .penpals-avatars-action:focus-visible[b-q26ymkgqmn] { background: var(--lov-green); color: var(--lov-on-green); border-color: var(--lov-green); }
@media(max-width: 640px) { .penpals-avatar[b-q26ymkgqmn] { min-width: 250px; max-width: 250px; } }
/* Letters are the working surface; the introduction stays brief and aligned. */
.penpals-hero[b-q26ymkgqmn] { border-bottom: 1px solid var(--lov-line); padding-bottom: 28px; }
.penpals-hero .guest-actions[b-q26ymkgqmn] { justify-content: flex-start; }
.penpals-hero .cta-button[b-q26ymkgqmn] { border-radius: 5px; min-height: 44px; box-shadow: none; }
.how-it-works[b-q26ymkgqmn] { justify-content: flex-start; gap: 32px; border-top: 0; padding-top: 0; }
.how-step[b-q26ymkgqmn] { align-items: flex-start; max-width: 220px; text-align: left; }
.how-icon[b-q26ymkgqmn] { color: var(--lov-green); background: transparent; box-shadow: none; border: 0; }
.how-arrow[b-q26ymkgqmn] { display: none; }
.penpals-section-title[b-q26ymkgqmn] { font-weight: 450; color: var(--lov-ink); }
.penpal-letter-subject[b-q26ymkgqmn] { font-weight: 450; color: var(--lov-ink); }
.penpal-letter-preview[b-q26ymkgqmn], .penpal-letter-meta[b-q26ymkgqmn] { color: var(--lov-muted); }
@media(max-width:700px) { .how-it-works[b-q26ymkgqmn] { gap: 20px; flex-wrap: wrap; } .how-step[b-q26ymkgqmn] { flex: 1 1 120px; } }
/* The correspondent strip remains browsable by touch and visible controls. */
.penpals-carousel-controls[b-q26ymkgqmn] { display: flex; justify-content: flex-end; margin-top: 16px; }
.penpals-carousel-nav[b-q26ymkgqmn] { width: 44px; height: 44px; border-radius: 5px; background: var(--lov-surface); color: var(--lov-green); border-color: var(--lov-line); box-shadow: none; }
.penpals-carousel-nav:hover[b-q26ymkgqmn], .penpals-carousel-nav:focus-visible[b-q26ymkgqmn] { background: var(--lov-selected); border-color: var(--lov-green); transform: none; }
.penpals-carousel-nav:focus-visible[b-q26ymkgqmn], .penpals-avatar:focus-visible[b-q26ymkgqmn], .penpal-letter-card:focus-visible[b-q26ymkgqmn] { outline: 3px solid var(--lov-green); outline-offset: 3px; }
.penpals-avatars[b-q26ymkgqmn] { margin-top: 36px; }
/* /Components/Pages/Privacy.razor.rz.scp.css */
/* Privacy page styles - copied from Contact.razor.css */
/* Base styles */
[b-2yhuqoxl3p] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
/* inherited font-sans */
}
/* Global body/html overflow prevention - REMOVED */
/* App Layout */
[b-2yhuqoxl3p] .app-layout {
display: flex;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px; /* Account for fixed logo */
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-2yhuqoxl3p] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-2yhuqoxl3p] .sidebar {
width: 280px;
/* background: var(--lov-surface); */
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-2yhuqoxl3p] .sidebar.hidden {
transform: translateX(-100%);
}
[b-2yhuqoxl3p] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-2yhuqoxl3p] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-2yhuqoxl3p] .sidebar a:hover {
color: #000;
}
[b-2yhuqoxl3p] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar Logo Styles */
[b-2yhuqoxl3p] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-2yhuqoxl3p] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-2yhuqoxl3p] .sidebar-logo {
text-align: center;
}
[b-2yhuqoxl3p] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
/* Sidebar Bottom User Section */
[b-2yhuqoxl3p] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-2yhuqoxl3p] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-2yhuqoxl3p] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease-in-out;
}
[b-2yhuqoxl3p] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-2yhuqoxl3p] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: var(--text, #4F4A45);
}
[b-2yhuqoxl3p] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
/* User Dropdown */
[b-2yhuqoxl3p] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-2yhuqoxl3p] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
animation: fadeIn-b-2yhuqoxl3p 0.2s ease-in-out;
}
@keyframes fadeIn-b-2yhuqoxl3p {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[b-2yhuqoxl3p] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-2yhuqoxl3p] .dropdown-item:hover {
background-color: #f0dad3;
}
/* Toggle Button */
[b-2yhuqoxl3p] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Button Styles */
[b-2yhuqoxl3p] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
}
[b-2yhuqoxl3p] .btn:hover {
background-color: #FADDAA;
}
[b-2yhuqoxl3p] .btn-login {
background-color: #FBCFA8;
}
[b-2yhuqoxl3p] .btn-primary {
padding: 12px 25px;
margin-top: 10px;
background-color: #FBCFA8;
}
[b-2yhuqoxl3p] .btn-secondary {
padding: 8px 18px;
margin-top: 10px;
}
/* Main Container */
[b-2yhuqoxl3p] .container-v3 {
flex: 1;
max-width: 1200px;
margin: 0 auto;
margin-left: 280px;
padding: 0;
transition: margin-left 0.3s ease;
/* Explicitly clamp to viewport minus sidebar and include padding in width */
width: calc(100% - 280px);
max-width: min(1200px, calc(100% - 280px));
box-sizing: border-box;
overflow-x: hidden;
}
[b-2yhuqoxl3p] .container-v3.sidebar-hidden {
margin-left: 0;
width: 100%;
}
/* Privacy specific content styles */
/* Let container-v3 control width/margins to match Terms/FrontPage; keep typography/padding */
.privacy-container[b-2yhuqoxl3p] {
width: 100%; /* explicit neutralizer so content spans full container-v3 width */
max-width: 100%;
padding: 0;
line-height: 1.6;
box-sizing: border-box; /* include padding in width to avoid overflow */
overflow-x: hidden; /* prevent horizontal scrollbar from inner elements */
}
.legal-header[b-2yhuqoxl3p] {
text-align: center;
padding: 3rem 2rem 2rem;
max-width: 800px;
margin: 0 auto;
}
.legal-body[b-2yhuqoxl3p] {
padding: 0 2rem 3rem;
box-sizing: border-box;
}
.privacy-container h1[b-2yhuqoxl3p] {
font-family: var(--font-serif);
font-size: 2.5rem;
color: #4F4A45;
margin-bottom: 1.5rem;
text-align: center;
font-weight: var(--mobile-hero-heading-weight);
}
.privacy-container h2[b-2yhuqoxl3p] {
font-family: var(--font-serif);
font-size: 1.5rem;
color: #4F4A45;
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: var(--mobile-section-heading-weight);
}
.privacy-container p[b-2yhuqoxl3p] {
color: #666;
margin-bottom: 1rem;
font-size: 1rem;
/* Stronger text wrapping to prevent long URLs/emails/tokens creating overflow */
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.privacy-container ul[b-2yhuqoxl3p] {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.privacy-container li[b-2yhuqoxl3p] {
color: #666;
margin-bottom: 0.5rem;
/* Stronger text wrapping to prevent long list items/URLs creating overflow */
overflow-wrap: anywhere;
word-break: break-word;
hyphens: auto;
}
.privacy-container a[b-2yhuqoxl3p] {
color: #FBCFA8;
text-decoration: none;
/* Clamp anchor display so long href text can wrap within the line box */
word-break: break-all;
overflow-wrap: anywhere;
max-width: 100%;
display: inline;
}
.privacy-container a:hover[b-2yhuqoxl3p] {
text-decoration: underline;
}
/* Media and inline code/tokens should never overflow its container */
.privacy-container img[b-2yhuqoxl3p],
.privacy-container svg[b-2yhuqoxl3p] {
max-width: 100%;
height: auto;
display: inline-block;
}
.privacy-container code[b-2yhuqoxl3p],
.privacy-container pre[b-2yhuqoxl3p],
.privacy-container .nowrap[b-2yhuqoxl3p],
.privacy-container .token[b-2yhuqoxl3p] {
max-width: 100%;
white-space: normal; /* allow wrapping; override any inherited nowrap */
word-break: break-all; /* aggressive for long tokens */
overflow-wrap: anywhere;
}
.last-updated[b-2yhuqoxl3p] {
font-style: italic;
color: #888;
font-size: 0.9rem;
margin-bottom: 2rem;
text-align: center;
}
/* Bottom CTA section (FrontPage-style) */
.bottom-cta-section[b-2yhuqoxl3p] {
background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
padding: 50px 20px;
margin: 50px 0 30px 0;
border-radius: 16px;
}
.cta-content[b-2yhuqoxl3p] {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.cta-quote-icon[b-2yhuqoxl3p] {
font-size: 3em;
margin-bottom: 20px;
opacity: 0.7;
}
.cta-quote[b-2yhuqoxl3p] {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
.cta-quote p[b-2yhuqoxl3p] {
font-family: var(--font-serif);
font-size: 1.4em;
font-style: italic;
color: #4F4A45;
line-height: 1.6;
margin: 0;
}
.cta-signature[b-2yhuqoxl3p] {
font-family: var(--font-serif);
font-size: 1.1em;
color: #666;
font-weight: 600;
}
@media (max-width: 768px) {
.bottom-cta-section[b-2yhuqoxl3p] {
padding: 40px var(--mobile-page-margin);
margin: 40px 0 20px;
}
.cta-quote-icon[b-2yhuqoxl3p] {
font-size: 2.5em;
}
.cta-quote p[b-2yhuqoxl3p] {
font-size: 1.2em;
}
.cta-signature[b-2yhuqoxl3p] {
font-size: 1em;
}
}
/* Headings */
[b-2yhuqoxl3p] h2, [b-2yhuqoxl3p] h3, [b-2yhuqoxl3p] h4, [b-2yhuqoxl3p] h5 {
font-family: var(--font-serif) !important;
font-weight: var(--mobile-section-heading-weight);
color: #4F4A45;
margin-top: 0;
}
[b-2yhuqoxl3p] h4,
[b-2yhuqoxl3p] h5 {
font-family: var(--font-sans) !important;
font-weight: 600;
}
[b-2yhuqoxl3p] h2 {
font-size: 1.8em;
margin-bottom: 20px;
}
[b-2yhuqoxl3p] h3 {
font-size: 1.7em;
margin-bottom: 10px;
}
[b-2yhuqoxl3p] h4 {
font-size: 1.2em;
margin-bottom: 8px;
}
[b-2yhuqoxl3p] h5 {
font-size: 1.1em;
font-weight: 400;
color: #555;
margin-bottom: 5px;
}
[b-2yhuqoxl3p] p {
margin-bottom: 15px;
color: #666;
font-size: 0.95em;
}
/* Sidebar Overlay */
.sidebar-overlay[b-2yhuqoxl3p] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-2yhuqoxl3p] {
display: none;
}
/* Footer Styles */
/* Fill the main column; the shared footer caps and centers its inner content. */
[b-2yhuqoxl3p] .main-footer {
width: calc(100% - 280px);
margin-left: 280px;
margin-right: auto;
background-color: #FAF3E5;
padding: 60px 0 30px 0;
margin-top: 80px;
color: #4F4A45;
border-top: 1px solid #f0dad3;
box-sizing: border-box;
}
[b-2yhuqoxl3p] .main-footer.sidebar-hidden {
width: 100%;
margin-left: auto;
margin-right: auto;
}
/* Match FrontPage pattern: center the inner container and cap its width, padding aligns with container-v3 */
[b-2yhuqoxl3p] .footer-container {
max-width: 1200px;
width: 100%;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-2yhuqoxl3p] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
}
[b-2yhuqoxl3p] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-2yhuqoxl3p] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-2yhuqoxl3p] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
[b-2yhuqoxl3p] .footer-nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 80px;
margin-bottom: 40px;
}
[b-2yhuqoxl3p] .footer-section {
padding: 0 var(--mobile-page-margin);
}
[b-2yhuqoxl3p] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-2yhuqoxl3p] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-2yhuqoxl3p] .footer-section ul li {
margin-bottom: 10px;
}
[b-2yhuqoxl3p] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-2yhuqoxl3p] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
[b-2yhuqoxl3p] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
gap: 20px;
}
[b-2yhuqoxl3p] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-2yhuqoxl3p] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-2yhuqoxl3p] .footer-languages a:hover,
[b-2yhuqoxl3p] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
[b-2yhuqoxl3p] .footer-legal-origin {
text-align: right;
}
[b-2yhuqoxl3p] .footer-made-by {
font-size: 0.85em;
color: #888;
margin: 0 0 5px 0;
}
[b-2yhuqoxl3p] .footer-copyright {
font-size: 0.85em;
color: #888;
margin: 0;
text-align: left;
}
/* Page-wide guardrail to eliminate horizontal scroll on Privacy */
[b-2yhuqoxl3p] .app-layout {
overflow-x: hidden; /* prevent page-level horizontal scrollbar */
}
/* Ensure the main content never exceeds the available width */
[b-2yhuqoxl3p] .container-v3 {
max-width: 1200px;
width: 100%;
box-sizing: border-box; /* include padding in width calc */
}
/* Footer should also never exceed page width */
[b-2yhuqoxl3p] .main-footer,
[b-2yhuqoxl3p] .footer-container {
box-sizing: border-box;
overflow-x: hidden;
}
/* Responsive Styles */
@media (max-width: 1024px) {
[b-2yhuqoxl3p] .toggle-sidebar {
display: none;
}
[b-2yhuqoxl3p] .app-layout {
padding-top: 60px;
}
[b-2yhuqoxl3p] .container-v3 {
margin-left: 0 !important;
margin-top: 70px;
padding: 0 var(--mobile-page-margin);
width: 100%;
max-width: 100%;
}
[b-2yhuqoxl3p] .sidebar {
top: 60px;
height: calc(100vh - 60px);
}
[b-2yhuqoxl3p] .main-footer {
margin-left: 0 !important;
}
[b-2yhuqoxl3p] .sidebar {
transform: translateX(-100%);
}
[b-2yhuqoxl3p] .sidebar.visible {
transform: translateX(0);
}
[b-2yhuqoxl3p] .sidebar.hidden {
transform: translateX(-100%);
}
[b-2yhuqoxl3p] .toggle-sidebar {
left: 1rem;
z-index: 200;
}
}
@media (max-width: 768px) {
[b-2yhuqoxl3p] .footer-nav-links {
flex-direction: column;
align-items: center;
gap: 40px;
}
[b-2yhuqoxl3p] .footer-section {
text-align: center;
}
[b-2yhuqoxl3p] .footer-bottom {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
[b-2yhuqoxl3p] .footer-legal-origin {
text-align: center;
}
[b-2yhuqoxl3p] .footer-copyright {
text-align: center;
}
[b-2yhuqoxl3p] .container-v3 {
margin-top: 60px;
padding: 0 var(--mobile-page-margin);
}
.legal-header[b-2yhuqoxl3p] {
padding: 1.5rem 0;
}
.legal-body[b-2yhuqoxl3p] {
padding: 0 0 2rem;
}
.privacy-container h1[b-2yhuqoxl3p] {
font-size: 2rem;
}
/* Mobile touch scroll fixes - REMOVED */
[b-2yhuqoxl3p] .app-layout {
/*
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
-webkit-overflow-scrolling: touch;
*/
}
[b-2yhuqoxl3p] .container-v3 {
/*
overflow-x: hidden;
touch-action: pan-y pinch-zoom;
overscroll-behavior: contain;
*/
}
}
@media (max-width: 480px) {
.privacy-container h1[b-2yhuqoxl3p] {
font-size: 1.8rem;
}
}
/* Readable legal text without a full-width line length. */
.legal-header[b-2yhuqoxl3p], .legal-body[b-2yhuqoxl3p] { width: min(100%, 82ch); max-width: 82ch; margin-inline: auto; padding-inline: 24px; }
.legal-header[b-2yhuqoxl3p] { text-align: left; padding-top: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--lov-line); margin-bottom: 24px; }
.privacy-container h1[b-2yhuqoxl3p] { text-align: left; color: var(--lov-ink); font-size: clamp(2rem,3.5vw,3.2rem); }
.privacy-container h2[b-2yhuqoxl3p] { color: var(--lov-ink); line-height: 1.35; }
.privacy-container p[b-2yhuqoxl3p], .privacy-container li[b-2yhuqoxl3p] { color: var(--lov-muted); line-height: 1.75; }
.privacy-container a[b-2yhuqoxl3p] { color: var(--lov-green); text-decoration: underline; text-underline-offset: 3px; }
.privacy-container h3[b-2yhuqoxl3p] { color: var(--lov-ink); font-size: 1.2rem; line-height: 1.4; margin-block: 1.5rem .65rem; }
.legal-body li + li[b-2yhuqoxl3p] { margin-top: .5rem; }
/* The sidebar consumes space once; inherited centering must not add another offset. */
.app-layout[b-2yhuqoxl3p] { width: 100%; max-width: none; margin: 0; }
.container-v3.privacy-container[b-2yhuqoxl3p] { width: calc(100% - 280px); max-width: none; margin: 0 0 0 280px; }
.container-v3.privacy-container.sidebar-hidden[b-2yhuqoxl3p] { width: 100%; margin-left: 0; }
@media (max-width: 1024px) {
.app-layout[b-2yhuqoxl3p] { padding-top: 64px; }
.container-v3.privacy-container[b-2yhuqoxl3p] { width: 100%; margin: 0; }
}
/* /Components/Pages/ResetPassword.razor.rz.scp.css */
.reset-password-page[b-eyu4y1t2px] {
width: 100%;
flex: 1 1 auto;
min-height: 100vh;
min-height: 100svh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(5rem, 8vw, 7rem) 1.5rem 3rem;
background:
linear-gradient(180deg, rgba(255, 246, 232, 0.88) 0%, rgba(255, 239, 214, 0.94) 100%),
radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.88) 0%, rgba(255, 245, 229, 0.34) 38%, transparent 70%);
color: #3b2a22;
overflow: hidden;
}
.reset-password-page[b-eyu4y1t2px]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(90deg, rgba(114, 77, 53, 0.05) 1px, transparent 1px),
linear-gradient(180deg, rgba(114, 77, 53, 0.04) 1px, transparent 1px);
background-size: 42px 42px;
opacity: 0.26;
mask-image: radial-gradient(circle at 50% 44%, black 0%, transparent 72%);
}
.reset-password-page[b-eyu4y1t2px]::after {
content: "";
position: absolute;
width: min(54rem, 92vw);
height: min(54rem, 92vw);
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0%, rgba(255, 248, 238, 0.28) 43%, transparent 72%);
pointer-events: none;
}
.reset-password-logo[b-eyu4y1t2px] {
position: absolute;
top: 1.8rem;
left: 2rem;
z-index: 2;
display: inline-flex;
align-items: baseline;
gap: 0;
color: #5c3f37;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 1.45rem;
font-weight: 800;
line-height: 1;
text-decoration: none;
letter-spacing: 0;
}
.reset-password-logo strong[b-eyu4y1t2px] {
color: #ffaaa3;
font-weight: 800;
}
.reset-password-shell[b-eyu4y1t2px] {
width: min(100%, 510px);
position: relative;
z-index: 1;
}
.reset-password-card[b-eyu4y1t2px] {
position: relative;
width: 100%;
padding: clamp(2rem, 5vw, 2.65rem);
border-radius: 18px;
background: linear-gradient(145deg, rgba(255, 253, 249, 0.98) 0%, rgba(255, 248, 240, 0.96) 100%);
border: 1px solid rgba(154, 111, 79, 0.2);
box-shadow:
0 28px 70px rgba(92, 62, 39, 0.14),
0 1px 0 rgba(255, 255, 255, 0.82) inset;
text-align: left;
}
.reset-password-icon[b-eyu4y1t2px] {
width: 3rem;
height: 3rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 1.25rem;
border-radius: 999px;
color: #8e6346;
background: rgba(255, 239, 223, 0.86);
box-shadow: inset 0 0 0 1px rgba(154, 111, 79, 0.16);
}
.reset-password-line-icon[b-eyu4y1t2px] {
width: 1.45rem;
height: 1.45rem;
display: block;
}
.reset-password-eyebrow[b-eyu4y1t2px] {
margin: 0 0 0.45rem;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #a06942;
}
.reset-password-card h1[b-eyu4y1t2px] {
margin: 0;
font-family: var(--font-serif, 'Fraunces', serif);
font-size: clamp(2rem, 5vw, 2.65rem);
font-weight: var(--mobile-hero-heading-weight, 700);
line-height: 1.06;
color: #3b271f;
}
.reset-password-intro[b-eyu4y1t2px] {
margin: 0.85rem 0 1.7rem;
max-width: 28rem;
color: #745a4a;
font-size: 1.02rem;
line-height: 1.6;
}
.reset-password-status-region[b-eyu4y1t2px] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.reset-password-form[b-eyu4y1t2px] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.reset-password-field[b-eyu4y1t2px] {
display: flex;
flex-direction: column;
gap: 0.45rem;
}
.reset-password-field label[b-eyu4y1t2px] {
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 0.95rem;
font-weight: 700;
color: #4d3427;
}
.reset-password-input[b-eyu4y1t2px] {
width: 100%;
min-height: 54px;
padding: 0.85rem 1rem;
border: 1px solid rgba(142, 113, 82, 0.28);
border-radius: 12px;
background: rgba(255, 255, 255, 0.92);
color: #2f241d;
font-size: 1rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.reset-password-input:focus[b-eyu4y1t2px] {
outline: none;
border-color: rgba(195, 122, 63, 0.58);
background: #fff;
box-shadow: 0 0 0 4px rgba(216, 145, 81, 0.14);
}
.reset-password-hint[b-eyu4y1t2px],
.reset-password-note[b-eyu4y1t2px] {
margin: 0;
color: #8b735f;
font-size: 0.88rem;
line-height: 1.5;
}
.reset-password-submit[b-eyu4y1t2px] {
width: 100%;
min-height: 54px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0.2rem;
padding: 0.85rem 1.45rem;
border: none;
border-radius: 999px;
background: linear-gradient(135deg, #d4914f 0%, #bd7338 100%);
color: #fffaf4;
font-family: var(--font-sans, 'Inter', sans-serif);
font-size: 1rem;
font-weight: 800;
text-decoration: none;
cursor: pointer;
box-shadow: 0 12px 26px rgba(175, 99, 46, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.reset-password-submit:hover:not(:disabled)[b-eyu4y1t2px] {
transform: translateY(-1px);
box-shadow: 0 16px 32px rgba(175, 99, 46, 0.3);
}
.reset-password-submit:disabled[b-eyu4y1t2px] {
cursor: not-allowed;
opacity: 0.55;
box-shadow: none;
}
.reset-password-submit--link[b-eyu4y1t2px] {
margin-top: 0.25rem;
}
.reset-password-secondary-link[b-eyu4y1t2px] {
align-self: center;
color: #6f4d3e;
font-size: 0.95rem;
font-weight: 700;
text-decoration: none;
}
.reset-password-secondary-link:hover[b-eyu4y1t2px] {
text-decoration: underline;
}
.reset-password-note[b-eyu4y1t2px] {
margin-top: 1.35rem;
padding-top: 1rem;
border-top: 1px solid rgba(154, 111, 79, 0.14);
text-align: center;
}
.reset-password-message[b-eyu4y1t2px] {
border-radius: 14px;
padding: 1rem;
font-size: 0.95rem;
line-height: 1.5;
}
.reset-password-message--error[b-eyu4y1t2px] {
color: #7d3325;
background: rgba(255, 235, 226, 0.92);
border: 1px solid rgba(166, 76, 52, 0.22);
}
.reset-password-message--success[b-eyu4y1t2px] {
display: flex;
flex-direction: column;
gap: 0.3rem;
color: #425235;
background: rgba(240, 248, 231, 0.92);
border: 1px solid rgba(104, 132, 76, 0.22);
}
.reset-password-loading[b-eyu4y1t2px] {
min-height: 7rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
color: #745a4a;
font-weight: 700;
}
.reset-password-spinner[b-eyu4y1t2px] {
width: 1.35rem;
height: 1.35rem;
border: 2px solid rgba(142, 99, 70, 0.22);
border-top-color: #8e6346;
border-radius: 50%;
animation: resetPasswordSpin-b-eyu4y1t2px 0.9s linear infinite;
}
@keyframes resetPasswordSpin-b-eyu4y1t2px {
to {
transform: rotate(360deg);
}
}
@media (max-width: 640px) {
.reset-password-page[b-eyu4y1t2px] {
align-items: flex-start;
padding: 5.8rem 1rem 2rem;
}
.reset-password-logo[b-eyu4y1t2px] {
top: 1.4rem;
left: 1.25rem;
font-size: 1.28rem;
}
.reset-password-card[b-eyu4y1t2px] {
border-radius: 16px;
}
.reset-password-icon[b-eyu4y1t2px] {
width: 2.75rem;
height: 2.75rem;
margin-bottom: 1rem;
}
}
/* Editorial application surfaces. */
.reset-password-page[b-eyu4y1t2px] { background: var(--lov-paper); color: var(--lov-ink); }
.reset-password-page[b-eyu4y1t2px]::before, .reset-password-page[b-eyu4y1t2px]::after { display: none; }
.reset-password-card[b-eyu4y1t2px] { background: var(--lov-surface); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: 0 12px 36px #30382d0a; }
.reset-password-card h1[b-eyu4y1t2px] { color: var(--lov-ink); font-size: clamp(2rem,4vw,2.6rem); }
.reset-password-intro[b-eyu4y1t2px], .reset-password-note[b-eyu4y1t2px], .reset-password-eyebrow[b-eyu4y1t2px] { color: var(--lov-muted); }
.reset-password-submit[b-eyu4y1t2px], .reset-password-submit:hover:not(:disabled)[b-eyu4y1t2px] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; box-shadow: none; }
.reset-password-icon[b-eyu4y1t2px] { background: var(--lov-selected); color: var(--lov-green); border-color: var(--lov-line); }
/* Keep nested content legible on the selected application surface. */
.reset-password-field label[b-eyu4y1t2px] { color: var(--lov-ink); }
.reset-password-hint[b-eyu4y1t2px], .reset-password-loading[b-eyu4y1t2px] { color: var(--lov-muted); }
.reset-password-secondary-link[b-eyu4y1t2px] { color: var(--lov-green); }
/* /Components/Pages/SharedStory.razor.rz.scp.css */
/* SharedStory - Public full-bleed page with standard sidebar */
/* ================ Loading & Not Found ================ */
.shared-story-loading[b-kydlmryx4n] {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--lov-paper);
}
.loading-spinner[b-kydlmryx4n] {
width: 40px;
height: 40px;
border: 3px solid #f0e4d6;
border-top-color: #c4755d;
border-radius: 50%;
animation: spin-b-kydlmryx4n 0.8s linear infinite;
}
@keyframes spin-b-kydlmryx4n {
to {
transform: rotate(360deg);
}
}
.shared-story-not-found[b-kydlmryx4n],
.story-closed-door[b-kydlmryx4n] {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100vh;
width: 100vw;
padding: 4rem 2rem;
text-align: center;
background: linear-gradient(180deg, #FDF8F0 0%, #FAF3E5 50%, #F5ECD8 100%);
box-sizing: border-box;
}
.closed-door-icon[b-kydlmryx4n] {
font-size: 3rem;
opacity: 0.4;
margin-bottom: 2.5rem;
filter: grayscale(30%);
}
.closed-door-heading[b-kydlmryx4n] {
font-family: var(--font-serif);
font-weight: 400;
font-style: normal;
font-size: 2.6rem;
color: #4A3F35;
letter-spacing: -0.02em;
margin: 0 0 1.5rem;
line-height: 1.2;
}
.closed-door-body[b-kydlmryx4n] {
font-family: var(--font-sans);
font-size: 1.05rem;
color: #6B5D4D;
max-width: 540px;
line-height: 1.8;
margin: 0 auto 3.5rem;
}
.closed-door-divider[b-kydlmryx4n] {
width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.4), transparent);
margin: 0 auto 3rem;
}
.closed-door-product-heading[b-kydlmryx4n] {
font-family: var(--font-serif);
font-style: italic;
font-weight: 400;
font-size: 1.15rem;
color: #A67B50;
margin: 0 0 0.75rem;
letter-spacing: 0.01em;
}
.closed-door-product-body[b-kydlmryx4n] {
font-family: var(--font-sans);
font-size: 0.95rem;
color: #7A6B58;
max-width: 480px;
line-height: 1.75;
margin: 0 auto 3rem;
}
/* Parchment CTA button — matches Memorial pattern */
.story-cta-button[b-kydlmryx4n] {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 1rem 2.5rem;
background: linear-gradient(145deg, #F5ECD8 0%, #EDE1C9 35%, #E8D9BE 70%, #DFD0B2 100%);
color: #5A4A3A;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.01em;
border-radius: 12px;
text-decoration: none;
outline: 2px dashed rgba(180, 150, 100, 0.25);
outline-offset: 4px;
box-shadow:
0 2px 8px rgba(160, 120, 60, 0.12),
0 4px 20px rgba(160, 120, 60, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.story-cta-button:hover[b-kydlmryx4n] {
transform: translateY(-2px);
box-shadow:
0 4px 16px rgba(160, 120, 60, 0.2),
0 8px 32px rgba(160, 120, 60, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.cta-candle-icon[b-kydlmryx4n] {
width: 24px;
height: 24px;
object-fit: contain;
animation: candleFlicker-b-kydlmryx4n 3s ease-in-out infinite;
}
@keyframes candleFlicker-b-kydlmryx4n {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.85; transform: scale(1.04); }
}
.closed-door-cta-link[b-kydlmryx4n] {
text-decoration: none;
}
.closed-door-granny[b-kydlmryx4n] {
margin-top: 8rem;
display: flex;
flex-direction: row;
align-items: center;
gap: 0.75rem;
opacity: 0.6;
}
.closed-door-granny-img[b-kydlmryx4n] {
width: 38px;
height: 38px;
border-radius: 50%;
border: 1.5px solid rgba(196, 154, 108, 0.25);
object-fit: cover;
flex-shrink: 0;
}
.closed-door-granny-text[b-kydlmryx4n] {
font-family: var(--font-sans);
font-style: italic;
font-size: 0.85rem;
color: #A0927E;
line-height: 1.5;
margin: 0;
text-align: left;
}
/* Night mode — Closed Door */
:global(body.night-mode) .story-closed-door[b-kydlmryx4n] {
background: linear-gradient(180deg, #1a1512, #231e18, #1a1512);
}
:global(body.night-mode) .closed-door-heading[b-kydlmryx4n] {
color: #E8DDD0;
}
:global(body.night-mode) .closed-door-body[b-kydlmryx4n] {
color: #A89880;
}
:global(body.night-mode) .closed-door-divider[b-kydlmryx4n] {
background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.3), transparent);
}
:global(body.night-mode) .closed-door-product-heading[b-kydlmryx4n] {
color: #C4A882;
}
:global(body.night-mode) .closed-door-product-body[b-kydlmryx4n] {
color: #A89880;
}
:global(body.night-mode) .story-cta-button[b-kydlmryx4n] {
background: linear-gradient(145deg, #3A3020 0%, #4A3D2A 35%, #3E3322 70%, #352B1C 100%);
color: #D4B882;
box-shadow: 0 2px 12px rgba(180, 140, 60, 0.2), 0 4px 24px rgba(180, 140, 60, 0.1);
outline-color: rgba(180, 140, 90, 0.2);
}
:global(body.night-mode) .closed-door-granny-text[b-kydlmryx4n] {
color: #A89880;
}
/* Responsive — Closed Door */
@media (max-width: 768px) {
.story-closed-door[b-kydlmryx4n] {
padding: 3rem 1.5rem;
}
.closed-door-heading[b-kydlmryx4n] {
font-size: 2rem;
}
.closed-door-body[b-kydlmryx4n] {
font-size: 1rem;
}
}
@media (max-width: 480px) {
.closed-door-heading[b-kydlmryx4n] {
font-size: 1.7rem;
}
.story-cta-button[b-kydlmryx4n] {
padding: 0.85rem 2rem;
font-size: 0.95rem;
}
.closed-door-granny-img[b-kydlmryx4n] {
width: 32px;
height: 32px;
}
.closed-door-granny[b-kydlmryx4n] {
gap: 0.6rem;
margin-top: 5rem;
}
}
/* ================ App Layout ================ */
/* MainLayout wraps @Body in `.layout-content { display:flex; justify-content:center }`,
which would otherwise shrink-wrap our flex container to its content's natural width
and then center it (causing cream gutters on either side of the hero).
Force full-width so .story-main can correctly fill the space past the fixed sidebar. */
.app-layout[b-kydlmryx4n] {
display: flex;
width: 100%;
align-items: stretch;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--lov-paper);
}
/* ================ Sidebar (unchanged) ================ */
[b-kydlmryx4n] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #d8b8ad;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-kydlmryx4n] .sidebar.hidden {
transform: translateX(-100%);
}
[b-kydlmryx4n] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
[b-kydlmryx4n] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-kydlmryx4n] .app-logo-link:hover,
[b-kydlmryx4n] .app-logo-link:focus {
outline: none;
border: none;
background: none;
}
[b-kydlmryx4n] .sidebar-logo {
text-align: center;
}
[b-kydlmryx4n] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
/* ================ Sidebar Context (Story) ================ */
.story-sidebar-context[b-kydlmryx4n] {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0.5rem 0.5rem 0;
gap: 4px;
}
.story-sidebar-avatar[b-kydlmryx4n] {
width: 132px;
height: 132px;
border-radius: 50%;
overflow: hidden;
border: 3px solid rgba(196, 117, 93, 0.25);
box-shadow: 0 4px 18px rgba(90, 50, 20, 0.14);
margin-bottom: 6px;
flex-shrink: 0;
}
.story-sidebar-avatar img[b-kydlmryx4n] {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.story-sidebar-title[b-kydlmryx4n] {
margin: 0;
font-family: var(--font-serif);
font-size: 1.55rem;
font-weight: 600;
color: #4a2f21;
line-height: 1.12;
max-width: 220px;
}
.story-sidebar-lifespan[b-kydlmryx4n] {
margin: 6px 0 16px;
font-family: var(--font-serif);
font-size: 1.05rem;
color: rgba(92, 64, 51, 0.72);
line-height: 1.2;
}
.story-sidebar-description[b-kydlmryx4n] {
margin: 0 0 18px;
max-width: 218px;
font-family: var(--font-serif);
font-size: 1.03rem;
font-style: italic;
color: rgba(74, 47, 33, 0.72);
line-height: 1.58;
}
.story-sidebar-shared-by[b-kydlmryx4n] {
display: flex;
flex-direction: column;
align-items: center;
gap: 2px;
margin-top: 2px;
padding: 12px 20px;
background: rgba(250, 237, 222, 0.65);
border-radius: 12px;
}
.shared-by-label[b-kydlmryx4n] {
font-size: 0.7rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #a08060;
font-weight: 600;
}
.shared-by-name[b-kydlmryx4n] {
font-family: var(--font-serif);
font-size: 1.08rem;
font-weight: 600;
color: #5b3b2a;
}
.story-sidebar-spacer[b-kydlmryx4n] {
flex: 1;
}
.story-sidebar-cta[b-kydlmryx4n] {
text-align: center;
padding: 0 1rem 1.5rem;
}
.story-sidebar-cta-text[b-kydlmryx4n] {
margin: 0 0 10px;
font-family: var(--font-serif);
font-size: 0.92rem;
font-style: italic;
color: rgba(90, 60, 40, 0.68);
line-height: 1.5;
}
.story-sidebar-cta-link[b-kydlmryx4n] {
display: inline-block;
padding: 10px 22px;
color: #7f4e35;
text-decoration: none;
font-family: var(--font-serif);
font-size: 0.92rem;
font-weight: 600;
border: 1.5px solid rgba(127, 78, 53, 0.3);
border-radius: 999px;
transition: all 0.3s ease;
}
.story-sidebar-cta-link:hover[b-kydlmryx4n] {
background: rgba(127, 78, 53, 0.06);
border-color: rgba(127, 78, 53, 0.5);
transform: translateY(-1px);
}
/* ================ Toggle Button ================ */
[b-kydlmryx4n] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
@media (max-width: 1024px) {
[b-kydlmryx4n] .toggle-sidebar {
display: none !important;
}
}
/* Hide CTA on mobile top bar — this is a gift, not a funnel */
[b-kydlmryx4n] .mobile-create-btn {
display: none !important;
}
/* ================ Sidebar Overlay (mobile) ================ */
.sidebar-overlay[b-kydlmryx4n] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none;
}
.sidebar-overlay.hidden[b-kydlmryx4n] {
display: none;
}
/* ================ Main Content (Fade-to-Cream) ================ */
.story-main[b-kydlmryx4n] {
/* fill the remaining flex space past the fixed sidebar */
flex: 1 1 auto;
width: auto;
min-width: 0;
margin-left: 280px;
margin-top: 0;
padding-top: 0;
min-height: 100vh;
position: relative;
overflow-x: hidden;
/* ThemeExperience-style cream foundation under the atmosphere layer */
background:
radial-gradient(circle at 50% 0%, rgba(255, 244, 227, 0.9) 0%, rgba(253, 248, 240, 0.36) 42%, rgba(253, 248, 240, 0) 76%),
linear-gradient(180deg, #fbf6ef 0%, #fdf8f0 100%);
transition: margin-left 0.3s ease;
}
.story-main.sidebar-hidden[b-kydlmryx4n] {
margin-left: 0;
}
/* Atmospheric image layer — mirrors ThemeExperienceAtmosphere:
absolute image + cream fade, so content starts inside the atmosphere instead of below it. */
.shared-keepsake-hero[b-kydlmryx4n] {
position: absolute;
top: 0;
left: 0;
right: 0;
display: block;
width: 100%;
margin: 0;
height: clamp(560px, 82vh, 760px);
background-color: var(--cream-50, #FBF7F0);
overflow: hidden;
z-index: 0;
pointer-events: none;
}
.shared-keepsake-hero[b-kydlmryx4n]::before {
content: '';
position: absolute;
inset: 0;
background-image: var(--hero-bg);
background-size: cover;
background-position: center 20%;
background-repeat: no-repeat;
transform: scale(1.04);
filter: saturate(0.95) contrast(0.96) brightness(0.94);
-webkit-mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
mask-image: linear-gradient(180deg, #000 0%, #000 40%, transparent 85%);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
}
/* Cream wash keeps the title readable while the image still spans the full canvas. */
.shared-keepsake-hero[b-kydlmryx4n]::after {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 50% 18%, rgba(253, 248, 240, 0.92) 0%, rgba(253, 248, 240, 0.72) 24%, rgba(253, 248, 240, 0.38) 46%, rgba(253, 248, 240, 0) 68%),
linear-gradient(
180deg,
rgba(253, 248, 240, 0.1) 0%,
rgba(253, 248, 240, 0.24) 18%,
rgba(253, 248, 240, 0.52) 34%,
rgba(253, 248, 240, 0.84) 50%,
rgba(253, 248, 240, 0.98) 66%,
rgba(253, 248, 240, 1) 78%
);
pointer-events: none;
}
.story-main[b-kydlmryx4n]::before {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(circle at 50% 15%, rgba(255, 241, 220, 0.4) 0%, transparent 32%),
radial-gradient(circle at 22% 24%, rgba(255, 255, 255, 0.2) 0%, transparent 20%);
}
/* Reading column — body text directly on cream, like a printed page.
Position relative so the wax seal can absolutely position off-center against it. */
.story-reading-column[b-kydlmryx4n] {
position: relative;
z-index: 1;
max-width: 660px;
margin: 0 auto;
padding: clamp(44px, 6vh, 72px) 1.5rem 96px;
background: transparent;
border: none;
border-radius: 0;
box-shadow: none;
overflow: visible;
}
/* Whisper strip — quiet header, no border */
.story-whisper-strip[b-kydlmryx4n] {
text-align: center;
margin: 0 0 32px;
padding: 0;
border: none;
}
.story-whisper-text[b-kydlmryx4n] {
margin: 0;
font-family: var(--font-serif);
font-size: 1.35rem;
font-style: italic;
color: rgba(75, 46, 46, 0.62);
letter-spacing: 0.01em;
}
.story-body[b-kydlmryx4n] {
padding: 0;
background: transparent;
border: none;
}
.story-type-badge[b-kydlmryx4n] {
text-align: center;
margin: 0 0 14px;
color: #aa7c57;
font-family: var(--font-sans);
font-size: 0.78rem;
letter-spacing: 0.22em;
font-weight: 700;
text-transform: uppercase;
}
.story-title[b-kydlmryx4n] {
margin: 0 0 32px;
text-align: center;
color: #2f1d12;
font-family: var(--font-serif);
font-weight: 500;
font-size: clamp(2.1rem, 4.4vw, 3.4rem);
line-height: 1.12;
letter-spacing: -0.01em;
}
.story-theme-card[b-kydlmryx4n] {
width: fit-content;
max-width: 100%;
margin: 0 auto 36px;
padding: 8px;
border-radius: 14px;
background: rgba(255, 250, 244, 0.55);
border: 1px solid rgba(190, 158, 130, 0.28);
box-shadow: 0 6px 22px rgba(86, 53, 29, 0.10);
text-align: center;
}
.story-theme-image[b-kydlmryx4n] {
display: block;
width: 400px;
max-width: 100%;
object-fit: cover;
border-radius: 8px;
}
.story-theme-caption[b-kydlmryx4n] {
display: block;
margin-top: 10px;
padding: 0 8px 6px;
color: #5b3b2a;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 500;
font-style: italic;
}
/* Personal note — attribution flanked by copper hairlines */
.story-dedication[b-kydlmryx4n] {
margin: 30px 0 26px;
padding: 0;
border: none;
background: transparent;
border-radius: 0;
text-align: center;
}
.dedication-attribution[b-kydlmryx4n] {
display: flex;
align-items: center;
justify-content: center;
gap: 18px;
margin: 0 0 14px;
font-family: var(--font-handwriting);
font-size: 1.55rem;
font-weight: 400;
font-style: normal;
color: #875f44;
line-height: 1.2;
}
.dedication-attribution[b-kydlmryx4n]::before,
.dedication-attribution[b-kydlmryx4n]::after {
content: '';
flex: 1;
max-width: 170px;
height: 1px;
background: rgba(184, 131, 95, 0.42);
}
.dedication-attribution span[b-kydlmryx4n] {
flex: 0 1 auto;
}
.dedication-text[b-kydlmryx4n] {
margin: 0;
font-family: var(--font-serif);
font-size: 1.18rem;
font-style: italic;
color: #4b2e2e;
line-height: 1.7;
}
/* Reading column — body text directly on cream */
.story-content[b-kydlmryx4n] {
color: #3e2b1f;
font-family: var(--font-serif);
font-size: 1.15rem;
line-height: 1.8;
}
.story-content[b-kydlmryx4n] p {
margin: 0 0 1.25em;
}
.story-content[b-kydlmryx4n] p:last-child {
margin-bottom: 0;
}
.story-content[b-kydlmryx4n] em {
color: #4b3022;
}
.story-content[b-kydlmryx4n] strong {
color: #4a2f21;
font-weight: 600;
}
.story-content[b-kydlmryx4n] blockquote {
margin: 1.4em 0;
padding-left: 18px;
border-left: 2px solid rgba(167, 129, 95, 0.45);
color: #644532;
font-style: italic;
}
.story-content[b-kydlmryx4n] h2,
.story-content[b-kydlmryx4n] h3 {
font-family: var(--font-serif);
color: #3a2218;
font-weight: 500;
line-height: 1.2;
margin: 1.6em 0 0.6em;
}
.story-content[b-kydlmryx4n] h2 {
font-size: 1.55rem;
}
.story-content[b-kydlmryx4n] h3 {
font-size: 1.3rem;
}
.story-footer[b-kydlmryx4n] {
margin-top: 18px;
padding-top: 20px;
border-top: 1px solid rgba(169, 139, 110, 0.22);
text-align: center;
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
.story-cta-link[b-kydlmryx4n] {
color: #7f4e35;
text-decoration: none;
font-family: var(--font-serif);
font-size: 1.02rem;
font-weight: 500;
transition: color 0.2s ease;
}
.story-cta-link:hover[b-kydlmryx4n] {
text-decoration: underline;
color: #5e3a27;
}
.story-cta-divider[b-kydlmryx4n] {
color: #b79a7f;
}
.story-microcopy[b-kydlmryx4n] {
margin: 10px 0 0;
text-align: center;
font-family: var(--font-serif);
font-size: 0.95rem;
color: rgba(92, 60, 44, 0.68);
font-style: italic;
}
.story-sigill-wrap[b-kydlmryx4n] {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 42px auto 0;
}
/* Sigill — centered closing stamp above the final CTA, matching the shared-letter seal. */
[b-kydlmryx4n] .story-sigill {
display: block;
width: 118px;
height: auto;
position: relative;
left: auto;
bottom: auto;
margin: 0;
z-index: 4;
filter:
drop-shadow(0 2px 4px rgba(60, 30, 8, 0.32))
drop-shadow(0 8px 16px rgba(80, 40, 10, 0.18))
drop-shadow(0 0 22px rgba(193, 140, 70, 0.10));
transition: transform 0.4s ease, filter 0.4s ease;
cursor: default;
pointer-events: auto;
}
[b-kydlmryx4n] .story-sigill:hover {
transform: rotate(-6deg) translateY(-2px) scale(1.01);
filter:
drop-shadow(0 3px 5px rgba(60, 30, 8, 0.36))
drop-shadow(0 10px 20px rgba(80, 40, 10, 0.22))
drop-shadow(0 0 28px rgba(193, 140, 70, 0.16));
}
/* Desktop shared-letter composition: compact, centered, and fully readable in one ceremonial view. */
@media (min-width: 1025px) {
.story-reading-column[b-kydlmryx4n] {
max-width: 620px;
padding: clamp(32px, 4.6vh, 52px) 1.5rem 38px;
}
.story-whisper-strip[b-kydlmryx4n] {
margin-bottom: 20px;
}
.story-whisper-text[b-kydlmryx4n] {
font-size: 1.02rem;
}
.story-type-badge[b-kydlmryx4n] {
margin-bottom: 10px;
font-size: 0.62rem;
letter-spacing: 0.24em;
}
.story-title[b-kydlmryx4n] {
max-width: 11.5em;
margin: 0 auto 16px;
font-size: clamp(2rem, 2.7vw, 2.55rem);
line-height: 1.06;
}
.story-theme-card[b-kydlmryx4n] {
margin-bottom: 24px;
padding: 6px;
border-radius: 10px;
box-shadow: 0 5px 18px rgba(86, 53, 29, 0.09);
}
.story-theme-image[b-kydlmryx4n] {
width: 400px;
aspect-ratio: 16 / 9;
border-radius: 6px;
}
.story-theme-caption[b-kydlmryx4n] {
margin-top: 7px;
padding: 0 6px 4px;
font-size: 0.82rem;
}
.story-dedication[b-kydlmryx4n] {
margin: 24px 0 18px;
}
.dedication-attribution[b-kydlmryx4n] {
gap: 16px;
margin-bottom: 6px;
font-size: 1.2rem;
}
.dedication-attribution[b-kydlmryx4n]::before,
.dedication-attribution[b-kydlmryx4n]::after {
max-width: 128px;
}
.dedication-text[b-kydlmryx4n] {
font-size: 0.98rem;
line-height: 1.42;
}
.story-content[b-kydlmryx4n] {
max-width: 620px;
margin: 0 auto;
font-size: 1.2rem;
line-height: 1.62;
}
.story-content[b-kydlmryx4n] p {
margin-bottom: 1.05em;
}
.story-sigill-wrap[b-kydlmryx4n] {
margin-top: 24px;
}
[b-kydlmryx4n] .story-sigill {
width: 88px;
}
.story-footer[b-kydlmryx4n] {
max-width: 560px;
margin: 10px auto 0;
padding-top: 12px;
gap: 12px;
}
.story-cta-link[b-kydlmryx4n] {
font-size: 0.88rem;
}
.story-microcopy[b-kydlmryx4n] {
margin-top: 6px;
font-size: 0.76rem;
}
}
/* ================ Bottom Brand (mobile) ================ */
.story-bottom-brand[b-kydlmryx4n] {
display: none;
}
.story-bottom-brand a[b-kydlmryx4n] {
display: inline-flex;
flex-direction: column;
align-items: center;
gap: 6px;
text-decoration: none;
color: #8b7355;
}
.story-bottom-brand .brand-logo[b-kydlmryx4n] {
height: 28px;
width: auto;
opacity: 0.7;
}
.story-bottom-brand .brand-tagline[b-kydlmryx4n] {
font-size: 0.72rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #9a8575;
}
/* ================ Floating Guest Header (mobile only) ================ */
.story-guest-header[b-kydlmryx4n] {
display: none; /* desktop: sidebar has the logo */
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 50;
align-items: center;
justify-content: space-between;
padding: 0.8rem 1.25rem;
pointer-events: none;
}
.story-guest-header > *[b-kydlmryx4n] {
pointer-events: all;
}
.story-guest-logo-link[b-kydlmryx4n] {
display: block;
text-decoration: none;
opacity: 0.75;
transition: opacity 0.3s ease;
}
.story-guest-logo-link:hover[b-kydlmryx4n] { opacity: 1; }
.story-guest-logo[b-kydlmryx4n] {
height: 34px;
width: auto;
display: block;
}
.story-guest-menu-wrapper[b-kydlmryx4n] { position: relative; }
.story-guest-menu-btn[b-kydlmryx4n] {
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(164, 123, 80, 0.2);
background: rgba(253, 248, 240, 0.85);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(139, 115, 85, 0.08);
}
.story-guest-menu-btn:hover[b-kydlmryx4n] {
background: rgba(253, 248, 240, 0.95);
border-color: rgba(164, 123, 80, 0.4);
}
.story-guest-menu-dots[b-kydlmryx4n] {
font-size: 1.4rem;
color: #6B5B4E;
letter-spacing: 2px;
line-height: 1;
}
.story-guest-menu-backdrop[b-kydlmryx4n] {
position: fixed;
inset: 0;
z-index: 60;
}
.story-guest-menu-dropdown[b-kydlmryx4n] {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 210px;
background: rgba(253, 248, 240, 0.97);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border: 1px solid rgba(232, 213, 200, 0.5);
border-radius: 14px;
box-shadow: 0 8px 32px rgba(139, 115, 85, 0.14);
padding: 0.5rem 0;
z-index: 70;
animation: storyGuestMenuFadeIn-b-kydlmryx4n 0.2s ease-out;
}
@keyframes storyGuestMenuFadeIn-b-kydlmryx4n {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.story-guest-menu-item[b-kydlmryx4n] {
display: block;
padding: 0.7rem 1.2rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #5C4033;
text-decoration: none;
transition: background 0.15s ease;
}
.story-guest-menu-item:hover[b-kydlmryx4n] {
background: rgba(196, 117, 93, 0.06);
}
/* ================ Responsive: Tablet <=1024px ================ */
@media (max-width: 1024px) {
.app-layout[b-kydlmryx4n] {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
overflow-x: hidden;
}
.story-guest-header[b-kydlmryx4n] {
display: flex; /* show floating header, MobileTopBar is gone */
}
.story-main[b-kydlmryx4n] {
width: 100%;
flex: 1 1 auto;
margin-left: 0 !important;
min-height: 100vh;
}
[b-kydlmryx4n] .sidebar {
top: 0;
height: 100vh;
transform: translateX(-100%);
}
[b-kydlmryx4n] .sidebar.visible {
transform: translateX(0);
}
[b-kydlmryx4n] .sidebar.hidden {
transform: translateX(-100%);
}
.shared-keepsake-hero[b-kydlmryx4n] {
height: clamp(360px, 48vh, 460px);
}
.story-reading-column[b-kydlmryx4n] {
padding: clamp(78px, 10vh, 96px) 1.5rem 84px;
}
}
/* ================ Responsive: Mobile <=768px ================ */
@media (max-width: 768px) {
/* Mobile uses the clean cream top from the reference image; no atmospheric image behind the header/title. */
.shared-keepsake-hero[b-kydlmryx4n] {
display: none;
}
.story-main[b-kydlmryx4n]::before {
display: none;
}
.story-reading-column[b-kydlmryx4n] {
padding: 92px 1.5rem 72px;
}
.story-whisper-text[b-kydlmryx4n] {
font-size: 1.18rem;
}
.story-title[b-kydlmryx4n] {
font-size: clamp(1.85rem, 7vw, 2.4rem);
margin-bottom: 26px;
}
.story-theme-image[b-kydlmryx4n] {
width: min(82vw, 400px);
}
.story-theme-caption[b-kydlmryx4n] {
font-size: 1rem;
}
.story-dedication[b-kydlmryx4n] {
margin: 28px 0 30px;
}
.dedication-attribution[b-kydlmryx4n] {
font-size: 1.4rem;
}
.dedication-text[b-kydlmryx4n] {
font-size: 1.08rem;
}
.story-content[b-kydlmryx4n] {
font-size: 1.08rem;
line-height: 1.78;
}
.story-footer[b-kydlmryx4n] {
margin-top: 18px;
}
[b-kydlmryx4n] .story-sigill {
width: 102px;
}
.story-sigill-wrap[b-kydlmryx4n] {
margin-top: 34px;
}
}
/* ================ Responsive: Small Mobile <=480px ================ */
@media (max-width: 480px) {
.shared-keepsake-hero[b-kydlmryx4n] {
display: none;
}
.story-reading-column[b-kydlmryx4n] {
padding: 92px 1.25rem 64px;
}
.story-whisper-strip[b-kydlmryx4n] {
margin-bottom: 24px;
}
.story-whisper-text[b-kydlmryx4n] {
font-size: 1.08rem;
}
.story-title[b-kydlmryx4n] {
font-size: clamp(1.7rem, 8vw, 2.05rem);
}
.story-content[b-kydlmryx4n] {
font-size: 1.04rem;
}
.story-footer[b-kydlmryx4n] {
gap: 8px;
}
[b-kydlmryx4n] .story-sigill {
width: 92px;
}
}
/* /Components/Pages/StoryEditionEditor.razor.rz.scp.css */
:host[b-e8ladk1bmw] {
display: block;
width: 100%;
background: var(--lov-paper);
}
.app-layout[b-e8ladk1bmw],
[b-e8ladk1bmw] .app-layout {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
overflow-x: clip;
background: var(--lov-paper);
}
.sidebar-overlay[b-e8ladk1bmw] {
position: fixed;
inset: 0;
z-index: 9;
background: rgba(0, 0, 0, 0.4);
}
.sidebar-overlay.hidden[b-e8ladk1bmw] {
display: none;
}
.sidebar[b-e8ladk1bmw],
[b-e8ladk1bmw] .sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 10;
display: flex;
width: 280px;
flex-direction: column;
align-items: center;
padding: 1.5rem;
border-right: 1px solid #f0dad3;
background: var(--lov-paper);
transition: transform 0.3s ease;
}
.sidebar.hidden[b-e8ladk1bmw],
[b-e8ladk1bmw] .sidebar.hidden {
transform: translateX(-100%);
}
.sidebar-top-content[b-e8ladk1bmw],
[b-e8ladk1bmw] .sidebar-top-content {
display: flex;
width: 100%;
flex-shrink: 0;
flex-direction: column;
align-items: center;
margin-bottom: 1rem;
}
.app-logo-link[b-e8ladk1bmw],
[b-e8ladk1bmw] .app-logo-link {
display: block;
width: 100%;
margin-top: -1.2rem;
text-align: center;
text-decoration: none;
}
.sidebar-logo img[b-e8ladk1bmw],
[b-e8ladk1bmw] .sidebar-logo img {
display: inline-block;
width: auto;
max-width: 180px;
height: 50px;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
vertical-align: middle;
}
[b-e8ladk1bmw] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
display: inline-grid;
}
.book-editor-page[b-e8ladk1bmw] {
--ink: #2b1f18;
--muted: #7e6654;
--rust: #a9512f;
--line: rgba(129, 86, 55, 0.22);
flex: 1;
width: calc(100% - 280px);
min-height: 100vh;
margin-left: 280px;
color: var(--ink);
background:
radial-gradient(circle at 10% 4%, rgba(238, 194, 132, 0.25), transparent 28rem),
repeating-linear-gradient(90deg, rgba(102, 73, 47, 0.025) 0 1px, transparent 1px 5px),
#f8f0e4;
padding-bottom: clamp(4rem, 8vw, 8rem);
transition: width 0.3s ease, margin-left 0.3s ease;
}
.book-editor-page.sidebar-hidden[b-e8ladk1bmw] {
width: 100%;
margin-left: 0;
}
.book-editor-layout--studio[b-e8ladk1bmw] {
--studio-appbar-height: 4.5rem;
--studio-sticky-top: var(--studio-appbar-height);
min-height: 100dvh;
padding-top: 0;
background: #f8f0e4;
}
.book-editor-page--studio[b-e8ladk1bmw] {
width: 100%;
min-height: 100dvh;
margin-left: 0;
padding-bottom: 0;
}
.audio-studio-appbar[b-e8ladk1bmw] {
position: sticky;
top: 0;
z-index: 40;
display: grid;
grid-template-columns: minmax(10rem, 1fr) auto minmax(10rem, 1fr);
align-items: center;
gap: 1rem;
min-height: var(--studio-appbar-height);
padding: 0.65rem clamp(0.8rem, 2.5vw, 2rem);
border-bottom: 1px solid rgba(120, 82, 55, 0.2);
background: rgba(250, 242, 230, 0.94);
box-shadow: 0 0.45rem 1.6rem rgba(66, 42, 24, 0.08);
backdrop-filter: blur(18px) saturate(1.15);
}
.audio-studio-appbar__back[b-e8ladk1bmw] {
display: inline-flex;
align-items: center;
justify-self: start;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.45rem 0.75rem;
border: 1px solid rgba(120, 82, 55, 0.2);
border-radius: 999px;
background: rgba(255, 251, 244, 0.72);
color: var(--ink);
font-size: 0.86rem;
font-weight: 780;
text-decoration: none;
}
.audio-studio-appbar__back:hover[b-e8ladk1bmw] {
border-color: rgba(169, 81, 47, 0.4);
background: #fffaf3;
}
.audio-studio-appbar__identity[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
min-width: 0;
text-align: left;
}
.audio-studio-appbar__identity > div[b-e8ladk1bmw] {
display: grid;
min-width: 0;
}
.audio-studio-appbar__identity h1[b-e8ladk1bmw] {
margin: 0;
color: var(--ink);
font-family: var(--font-serif);
font-size: 1rem;
line-height: 1.1;
}
.audio-studio-appbar__identity > div > span[b-e8ladk1bmw] {
overflow: hidden;
max-width: min(34vw, 28rem);
color: var(--muted);
font-size: 0.72rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-studio-appbar__mark[b-e8ladk1bmw] {
display: grid;
grid-template-columns: repeat(2, 0.42rem);
gap: 0.18rem;
place-content: center;
width: 2rem;
height: 2rem;
border: 1px solid rgba(169, 81, 47, 0.18);
border-radius: 0.65rem;
background: #fffaf3;
box-shadow: 0 0.35rem 0.9rem rgba(66, 42, 24, 0.08);
}
.audio-studio-appbar__mark i[b-e8ladk1bmw] {
width: 0.42rem;
height: 1.1rem;
border-radius: 0.16rem;
background: #7b5a53;
}
.audio-studio-appbar__mark i:last-child[b-e8ladk1bmw] {
background: #f1baa7;
}
.audio-studio-appbar__actions[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-self: end;
gap: 0.7rem;
}
.audio-studio-appbar__status[b-e8ladk1bmw] {
display: flex;
align-items: center;
gap: 0.45rem;
color: #426148;
}
.audio-studio-appbar__status > span[b-e8ladk1bmw] {
width: 0.55rem;
height: 0.55rem;
border-radius: 50%;
background: #53785a;
box-shadow: 0 0 0 0.3rem rgba(83, 120, 90, 0.1);
}
.audio-studio-appbar__status.is-dirty[b-e8ladk1bmw],
.audio-studio-appbar__status.is-working[b-e8ladk1bmw] {
color: #865f2d;
}
.audio-studio-appbar__status.is-dirty > span[b-e8ladk1bmw],
.audio-studio-appbar__status.is-working > span[b-e8ladk1bmw] {
background: #b7834e;
box-shadow: 0 0 0 0.3rem rgba(183, 131, 78, 0.12);
}
.audio-studio-appbar__status.is-error[b-e8ladk1bmw] {
color: #9a3f35;
}
.audio-studio-appbar__status.is-error > span[b-e8ladk1bmw] {
background: #b94d42;
box-shadow: 0 0 0 0.3rem rgba(185, 77, 66, 0.12);
}
.audio-studio-appbar__status strong[b-e8ladk1bmw] {
font-size: 0.78rem;
}
.audio-studio-appbar__sound[b-e8ladk1bmw] {
display: inline-grid;
width: 2.75rem;
height: 2.75rem;
padding: 0;
place-items: center;
border: 1px solid rgba(120, 82, 55, 0.2);
border-radius: 50%;
background: rgba(255, 251, 244, 0.72);
color: var(--ink);
cursor: pointer;
transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.audio-studio-appbar__sound:hover[b-e8ladk1bmw],
.audio-studio-appbar__sound.is-muted[b-e8ladk1bmw] {
border-color: rgba(169, 81, 47, 0.4);
background: #fffaf3;
}
.audio-studio-appbar__sound svg[b-e8ladk1bmw] {
width: 1.15rem;
height: 1.15rem;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.8;
}
.audio-studio-appbar__sound:active[b-e8ladk1bmw] {
transform: scale(0.94);
}
.book-editor-page--studio[b-e8ladk1bmw] .audio-studio {
min-height: calc(100dvh - var(--studio-appbar-height));
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 0;
box-shadow: none;
}
.audio-studio-appbar a:focus-visible[b-e8ladk1bmw],
.audio-studio-appbar button:focus-visible[b-e8ladk1bmw] {
outline: 3px solid rgba(169, 81, 47, 0.38);
outline-offset: 2px;
}
.book-editor-context[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
width: min(72rem, calc(100% - 2rem));
margin-inline: auto;
padding-top: 1.25rem;
}
.book-editor-context__back[b-e8ladk1bmw],
.book-editor-context__save[b-e8ladk1bmw] {
color: var(--ink);
font-weight: 700;
text-decoration: none;
}
.book-editor-kicker[b-e8ladk1bmw],
.book-editor-chapters__heading p[b-e8ladk1bmw],
.book-editor-preview > header p[b-e8ladk1bmw],
.book-editor-preview__chapter-number[b-e8ladk1bmw],
.book-editor-finish > p[b-e8ladk1bmw],
.book-editor-state > p[b-e8ladk1bmw] {
display: block;
color: var(--rust);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.book-editor-context__save[b-e8ladk1bmw],
.book-editor-finish__save[b-e8ladk1bmw],
.book-editor-state button[b-e8ladk1bmw] {
border: 1px solid rgba(141, 72, 43, 0.35);
border-radius: 999px;
background: #8e432d;
color: #fffaf3;
cursor: pointer;
}
.book-editor-context__save[b-e8ladk1bmw] {
min-width: 8rem;
padding: 0.72rem 1.1rem;
}
.book-editor-context__save.is-saved[b-e8ladk1bmw] {
border-color: rgba(73, 112, 65, 0.3);
background: #edf4e9;
color: #486a42;
}
.book-editor-context__save:disabled[b-e8ladk1bmw],
.book-editor-finish__save:disabled[b-e8ladk1bmw] {
cursor: default;
opacity: 0.6;
}
.book-editor-access[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
width: min(72rem, calc(100% - 2rem));
margin: 1.25rem auto 0;
padding: 1rem 1.15rem;
border: 1px solid rgba(141, 72, 43, 0.2);
border-radius: 1.15rem;
background: rgba(255, 250, 243, 0.84);
box-shadow: 0 0.75rem 2rem rgba(73, 46, 28, 0.06);
}
.book-editor-access div[b-e8ladk1bmw] {
display: grid;
gap: 0.18rem;
}
.book-editor-access p[b-e8ladk1bmw],
.book-editor-access h2[b-e8ladk1bmw],
.book-editor-access span[b-e8ladk1bmw] {
margin: 0;
}
.book-editor-access p[b-e8ladk1bmw] {
color: var(--rust);
font-size: 0.68rem;
font-weight: 850;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.book-editor-access h2[b-e8ladk1bmw] {
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(1.25rem, 2.5vw, 1.65rem);
font-weight: 650;
}
.book-editor-access div > span[b-e8ladk1bmw] {
color: var(--muted);
line-height: 1.5;
}
.book-editor-access > a[b-e8ladk1bmw] {
flex: 0 0 auto;
padding: 0.72rem 1rem;
border-radius: 999px;
background: #8e432d;
color: #fffaf3;
font-weight: 780;
text-decoration: none;
}
.book-editor-intro[b-e8ladk1bmw],
.book-editor-workspace[b-e8ladk1bmw],
.book-cover-studio[b-e8ladk1bmw],
.book-editor-preview[b-e8ladk1bmw],
.book-editor-finish[b-e8ladk1bmw],
.book-editor-state[b-e8ladk1bmw] {
width: min(72rem, calc(100% - 2rem));
margin-inline: auto;
}
.book-editor-intro[b-e8ladk1bmw] {
padding: clamp(4rem, 9vw, 8rem) 0 clamp(2.5rem, 6vw, 5rem);
text-align: center;
}
.book-editor-intro--studio[b-e8ladk1bmw] {
padding: 1rem 0 0.75rem;
text-align: left;
}
.book-editor-intro--studio > .book-editor-kicker[b-e8ladk1bmw],
.book-editor-intro--studio > h1[b-e8ladk1bmw],
.book-editor-intro--studio > p:not(.book-editor-kicker)[b-e8ladk1bmw],
.book-editor-intro--studio > .book-editor-ai-help[b-e8ladk1bmw] {
display: none;
}
.book-editor-intro--studio .book-editor-modes[b-e8ladk1bmw] {
margin: 0 auto;
}
.book-editor-intro h1[b-e8ladk1bmw],
.book-editor-state h1[b-e8ladk1bmw] {
max-width: 15ch;
margin: 0.5rem auto 1rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2.8rem, 7vw, 6rem);
font-weight: 500;
line-height: 0.98;
}
.book-editor-intro > p:not(.book-editor-kicker)[b-e8ladk1bmw] {
max-width: 44rem;
margin-inline: auto;
color: var(--muted);
font-size: clamp(1.05rem, 2vw, 1.35rem);
line-height: 1.65;
}
.book-editor-ai-help[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
max-width: 48rem;
margin: 2rem auto 0;
padding: 1.15rem 1.3rem;
border: 1px solid rgba(169, 81, 47, 0.24);
border-radius: 1.25rem;
background: rgba(255, 250, 243, 0.82);
text-align: left;
}
.book-editor-ai-help__copy[b-e8ladk1bmw],
.book-editor-ai-help__state[b-e8ladk1bmw] {
display: grid;
gap: 0.3rem;
}
.book-editor-ai-help__copy[b-e8ladk1bmw] {
flex: 1 1 auto;
}
.book-editor-ai-help__copy > strong[b-e8ladk1bmw] {
font-family: var(--font-serif);
font-size: 1.15rem;
}
.book-editor-ai-help__copy > span[b-e8ladk1bmw],
.book-editor-ai-help__state > span[b-e8ladk1bmw] {
color: var(--muted);
line-height: 1.5;
}
.book-editor-ai-help__copy > small[b-e8ladk1bmw] {
margin-top: 0.35rem;
color: #426148;
font-weight: 750;
line-height: 1.45;
}
.book-editor-ai-help__state[b-e8ladk1bmw] {
flex: 0 0 min(19rem, 42%);
gap: 0.55rem;
padding-left: 1.25rem;
border-left: 1px solid rgba(169, 81, 47, 0.18);
}
.book-editor-ai-help__state > strong:not(.book-editor-ai-help__price)[b-e8ladk1bmw] {
color: var(--ink);
font-size: 1rem;
}
.book-editor-ai-help__price[b-e8ladk1bmw] {
color: var(--rust);
font-size: 0.95rem;
line-height: 1.45;
}
.book-editor-ai-help button[b-e8ladk1bmw],
.book-editor-ai-help a[b-e8ladk1bmw] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
justify-self: start;
padding: 0.8rem 1rem;
border: 1px solid rgba(169, 81, 47, 0.35);
border-radius: 999px;
background: transparent;
color: var(--rust);
font-family: inherit;
font-size: 0.92rem;
font-weight: 800;
text-decoration: none;
cursor: pointer;
}
.book-editor-ai-help button:hover[b-e8ladk1bmw],
.book-editor-ai-help a:hover[b-e8ladk1bmw] {
border-color: var(--rust);
background: rgba(169, 81, 47, 0.06);
}
.book-editor-ai-help button:disabled[b-e8ladk1bmw] {
cursor: wait;
opacity: 0.65;
}
.book-editor-ai-help button span[b-e8ladk1bmw],
.book-editor-ai-help a span[b-e8ladk1bmw] {
color: inherit;
}
.book-editor-ai-help__progress[b-e8ladk1bmw] {
display: inline-flex;
align-items: center;
gap: 0.55rem;
}
.book-editor-ai-help__spinner[b-e8ladk1bmw] {
width: 0.95rem;
height: 0.95rem;
flex: 0 0 auto;
border: 2px solid rgba(169, 81, 47, 0.2);
border-top-color: var(--rust);
border-radius: 50%;
animation: book-editor-spin-b-e8ladk1bmw 0.8s linear infinite;
}
.book-editor-ai-help__error[b-e8ladk1bmw] {
color: #9d3f2e !important;
font-weight: 700;
}
@keyframes book-editor-spin-b-e8ladk1bmw {
to { transform: rotate(360deg); }
}
.book-editor-modes[b-e8ladk1bmw] {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
width: 100%;
box-sizing: border-box;
margin-top: 2rem;
padding: 0.3rem;
border: 1px solid var(--line);
border-radius: 999px;
background: rgba(255, 251, 244, 0.7);
}
.book-editor-modes button[b-e8ladk1bmw] {
flex: 1 1 10rem;
min-width: 0;
overflow-wrap: anywhere;
padding: 0.75rem 1.1rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--muted);
font-weight: 700;
cursor: pointer;
}
.book-editor-modes button.is-active[b-e8ladk1bmw] {
background: var(--ink);
color: #fffaf3;
}
.book-editor-workspace[b-e8ladk1bmw],
.book-cover-studio[b-e8ladk1bmw],
.book-editor-preview[b-e8ladk1bmw],
.book-editor-finish[b-e8ladk1bmw],
.book-editor-state[b-e8ladk1bmw] {
border: 1px solid var(--line);
border-radius: 2rem;
background: rgba(255, 251, 244, 0.78);
box-shadow: 0 1.5rem 5rem rgba(66, 42, 24, 0.08);
}
.book-editor-workspace[b-e8ladk1bmw] {
padding: clamp(1.2rem, 4vw, 3.5rem);
}
.book-editor-draft-source[b-e8ladk1bmw],
.book-editor-suggestion-action[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
padding: 1.15rem 1.3rem;
border: 1px solid rgba(66, 97, 72, 0.28);
border-radius: 1.2rem;
background: rgba(238, 245, 234, 0.76);
}
.book-editor-draft-source[b-e8ladk1bmw] {
flex-wrap: wrap;
margin-bottom: 2rem;
}
.book-editor-draft-source__copy[b-e8ladk1bmw],
.book-editor-suggestion-action > div[b-e8ladk1bmw] {
display: grid;
gap: 0.3rem;
}
.book-editor-draft-source strong[b-e8ladk1bmw],
.book-editor-suggestion-action strong[b-e8ladk1bmw] {
font-family: var(--font-serif);
font-size: 1.08rem;
}
.book-editor-draft-source__copy > span[b-e8ladk1bmw],
.book-editor-suggestion-action span[b-e8ladk1bmw] {
color: var(--muted);
line-height: 1.5;
}
.book-editor-draft-source__primary[b-e8ladk1bmw],
.book-editor-suggestion-action button[b-e8ladk1bmw] {
flex: 0 0 auto;
min-height: 2.75rem;
padding: 0.8rem 1rem;
border: 1px solid rgba(66, 97, 72, 0.42);
border-radius: 999px;
background: #426148;
color: #fffaf3;
font-family: inherit;
font-weight: 800;
cursor: pointer;
}
.book-editor-draft-source__actions[b-e8ladk1bmw] {
display: flex;
flex: 1 1 20rem;
align-items: center;
justify-content: flex-end;
gap: 0.65rem;
flex-wrap: wrap;
}
.book-editor-draft-source__save-status[b-e8ladk1bmw] {
display: inline-flex;
flex: 1 0 100%;
align-items: center;
justify-content: flex-end;
gap: 0.42rem;
color: #426148;
font-size: 0.78rem;
font-weight: 800;
}
.book-editor-draft-source__save-status.is-error[b-e8ladk1bmw] {
color: #9d3f2e;
}
.book-editor-draft-source__secondary[b-e8ladk1bmw] {
min-height: 2.75rem;
padding: 0.65rem 0.35rem;
border: 0;
background: transparent;
color: var(--rust);
font: inherit;
font-weight: 750;
text-decoration: underline;
text-decoration-color: rgba(169, 81, 47, 0.35);
text-underline-offset: 0.24em;
cursor: pointer;
}
.book-editor-draft-source__secondary:hover[b-e8ladk1bmw] {
text-decoration-color: currentColor;
}
.book-editor-draft-source__primary:focus-visible[b-e8ladk1bmw],
.book-editor-draft-source__secondary:focus-visible[b-e8ladk1bmw],
.book-editor-suggestion-action button:focus-visible[b-e8ladk1bmw] {
outline: 3px solid rgba(66, 97, 72, 0.34);
outline-offset: 3px;
}
.book-editor-draft-source__primary:disabled[b-e8ladk1bmw],
.book-editor-draft-source__secondary:disabled[b-e8ladk1bmw],
.book-editor-suggestion-action button:disabled[b-e8ladk1bmw] {
cursor: wait;
opacity: 0.65;
}
.book-editor-draft-source__error[b-e8ladk1bmw],
.book-editor-suggestion-action__error[b-e8ladk1bmw] {
flex-basis: 100%;
margin: 0;
color: #9d3f2e;
font-weight: 750;
}
.book-editor-draft-source small[b-e8ladk1bmw] {
color: #426148;
font-size: 0.7rem;
font-weight: 850;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.book-editor-draft-source.is-preserved-journey[b-e8ladk1bmw] {
border-color: rgba(169, 81, 47, 0.24);
background: rgba(255, 248, 238, 0.72);
}
.book-editor-draft-source.is-preserved-journey small[b-e8ladk1bmw] {
color: var(--rust);
}
.book-cover-studio[b-e8ladk1bmw] {
display: grid;
grid-template-columns: minmax(18rem, 25rem) minmax(0, 1fr);
gap: clamp(2rem, 6vw, 5.5rem);
align-items: start;
padding: clamp(1.2rem, 4vw, 3.5rem);
}
.book-cover-studio__preview[b-e8ladk1bmw] {
position: sticky;
top: 6rem;
min-height: 35rem;
}
.book-cover-studio__preview[b-e8ladk1bmw] .book-cover-studio__book {
min-height: 35rem;
}
.book-cover-studio__controls h2[b-e8ladk1bmw] {
margin: .45rem 0 .8rem;
font-family: var(--font-serif);
font-size: clamp(2.2rem, 4vw, 3.8rem);
font-weight: 500;
line-height: 1;
}
.book-cover-studio__intro[b-e8ladk1bmw] {
margin: 0 0 2rem;
color: var(--muted);
line-height: 1.65;
}
.book-cover-studio fieldset[b-e8ladk1bmw] {
margin: 0;
padding: 1.5rem 0;
border: 0;
border-top: 1px solid var(--line);
}
.book-cover-studio legend[b-e8ladk1bmw] {
margin-bottom: .9rem;
color: var(--ink);
font-family: var(--font-sans);
font-size: .78rem;
font-weight: 800;
letter-spacing: .1em;
text-transform: uppercase;
}
.book-cover-studio__choices[b-e8ladk1bmw] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: .65rem;
}
.book-cover-studio__choices button[b-e8ladk1bmw],
.book-cover-studio__artwork button[b-e8ladk1bmw],
.book-cover-studio__palette button[b-e8ladk1bmw] {
border: 1px solid var(--line);
background: #fffaf3;
color: var(--ink);
font-family: var(--font-sans);
cursor: pointer;
}
.book-cover-studio__choices button[b-e8ladk1bmw] {
display: grid;
gap: .35rem;
min-height: 7rem;
padding: 1rem;
border-radius: 1rem;
text-align: left;
}
.book-cover-studio__choices button strong[b-e8ladk1bmw] {
font-family: var(--font-serif);
font-size: 1.05rem;
}
.book-cover-studio__choices button span[b-e8ladk1bmw] {
color: var(--muted);
font-size: .78rem;
line-height: 1.45;
}
.book-cover-studio__choices button.is-selected[b-e8ladk1bmw],
.book-cover-studio__artwork button.is-selected[b-e8ladk1bmw],
.book-cover-studio__palette button.is-selected[b-e8ladk1bmw] {
border-color: #426148;
box-shadow: 0 0 0 2px rgba(66, 97, 72, .14);
}
.book-cover-studio__palette[b-e8ladk1bmw],
.book-cover-studio__artwork[b-e8ladk1bmw] {
display: flex;
flex-wrap: wrap;
gap: .65rem;
}
.book-cover-studio__palette button[b-e8ladk1bmw],
.book-cover-studio__artwork button[b-e8ladk1bmw] {
min-height: 2.85rem;
padding: .65rem .85rem;
border-radius: 999px;
font-weight: 750;
}
.book-cover-studio__palette button[b-e8ladk1bmw] {
display: inline-flex;
align-items: center;
gap: .55rem;
}
.book-cover-studio__palette button > span[b-e8ladk1bmw] {
width: 1.25rem;
height: 1.25rem;
border-radius: 50%;
background: #3f5c51;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .13);
}
.book-cover-studio__palette .palette-clay > span[b-e8ladk1bmw] { background: #73504c; }
.book-cover-studio__palette .palette-midnight > span[b-e8ladk1bmw] { background: #273743; }
.book-cover-studio__atelier[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: .7rem;
padding: 1.15rem 1.25rem;
border: 1px solid rgba(169, 81, 47, .22);
border-radius: 1.1rem;
background: rgba(255, 248, 238, .78);
}
.book-cover-studio__atelier div[b-e8ladk1bmw] {
display: grid;
gap: .25rem;
}
.book-cover-studio__atelier strong[b-e8ladk1bmw] {
font-family: var(--font-serif);
font-size: 1.08rem;
}
.book-cover-studio__atelier div span[b-e8ladk1bmw] {
color: var(--muted);
font-size: .82rem;
line-height: 1.45;
}
.book-cover-studio__atelier > span[b-e8ladk1bmw] {
flex: 0 0 auto;
padding: .45rem .7rem;
border-radius: 999px;
background: #f4e1d4;
color: #8e432d;
font-size: .7rem;
font-weight: 800;
}
.book-editor-details[b-e8ladk1bmw] {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: 1.25rem;
padding-bottom: 3rem;
border-bottom: 1px solid var(--line);
}
.book-editor-details label[b-e8ladk1bmw],
.book-editor-chapter > label[b-e8ladk1bmw] {
display: grid;
gap: 0.55rem;
color: var(--muted);
font-size: 0.84rem;
font-weight: 800;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.book-editor-details input[b-e8ladk1bmw],
.book-editor-chapter input[b-e8ladk1bmw],
.book-editor-chapter textarea[b-e8ladk1bmw] {
width: 100%;
box-sizing: border-box;
border: 1px solid var(--line);
border-radius: 1rem;
outline: none;
background: #fffaf3;
color: var(--ink);
}
.book-editor-details input[b-e8ladk1bmw] {
min-height: 3.5rem;
padding: 0.8rem 1rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.1rem;
}
.book-editor-details input:focus[b-e8ladk1bmw],
.book-editor-chapter input:focus[b-e8ladk1bmw],
.book-editor-chapter textarea:focus[b-e8ladk1bmw] {
border-color: var(--rust);
box-shadow: 0 0 0 3px rgba(169, 81, 47, 0.1);
}
.book-editor-chapters__heading[b-e8ladk1bmw] {
display: flex;
align-items: end;
justify-content: space-between;
gap: 2rem;
padding: 3rem 0 1.5rem;
}
.book-editor-chapters__heading h2[b-e8ladk1bmw] {
margin: 0.4rem 0;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2rem, 4vw, 3.5rem);
}
.book-editor-chapters__heading span[b-e8ladk1bmw] {
color: var(--muted);
}
.book-editor-chapters__heading button[b-e8ladk1bmw],
.book-editor-chapter footer button[b-e8ladk1bmw],
.book-editor-finish__error button[b-e8ladk1bmw] {
border: 0;
border-bottom: 1px solid currentColor;
background: transparent;
color: var(--rust);
font-weight: 800;
cursor: pointer;
}
.book-editor-chapters[b-e8ladk1bmw] {
display: grid;
gap: 1rem;
}
.book-editor-chapter[b-e8ladk1bmw] {
display: grid;
gap: 1rem;
padding: clamp(1rem, 3vw, 2rem);
border: 1px solid var(--line);
border-radius: 1.5rem;
background: rgba(255, 253, 248, 0.92);
transition: opacity 150ms ease;
}
.book-editor-chapter.is-excluded[b-e8ladk1bmw] {
opacity: 0.58;
}
.book-editor-chapter > header[b-e8ladk1bmw],
.book-editor-chapter > footer[b-e8ladk1bmw] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.book-editor-chapter > header span[b-e8ladk1bmw] {
display: block;
color: var(--rust);
font-size: 0.75rem;
font-weight: 800;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.book-editor-chapter > header strong[b-e8ladk1bmw] {
display: block;
margin-top: 0.25rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.25rem;
}
.book-editor-chapter__move[b-e8ladk1bmw] {
display: flex;
gap: 0.4rem;
}
.book-editor-chapter__move button[b-e8ladk1bmw] {
width: 2.5rem;
height: 2.5rem;
border: 1px solid var(--line);
border-radius: 50%;
background: transparent;
color: var(--ink);
cursor: pointer;
}
.book-editor-chapter__move button:disabled[b-e8ladk1bmw] {
cursor: default;
opacity: 0.25;
}
.book-editor-chapter input[b-e8ladk1bmw],
.book-editor-chapter textarea[b-e8ladk1bmw] {
padding: 0.9rem 1rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.05rem;
line-height: 1.65;
resize: vertical;
}
.book-editor-chapter__include[b-e8ladk1bmw] {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--ink);
font-weight: 700;
}
.book-editor-chapter__include input[b-e8ladk1bmw] {
width: 1.15rem;
height: 1.15rem;
accent-color: var(--rust);
}
.book-editor-preview[b-e8ladk1bmw] {
max-width: 58rem;
padding: clamp(2rem, 7vw, 6rem);
}
.book-editor-preview__cover[b-e8ladk1bmw] {
width: min(25rem, 100%);
min-height: 35rem;
margin: 0 auto clamp(4rem, 8vw, 7rem);
}
.book-editor-preview__cover[b-e8ladk1bmw] .book-editor-preview__book-cover {
min-height: 35rem;
}
.book-editor-preview--suggestion[b-e8ladk1bmw] {
border-color: rgba(66, 97, 72, 0.32);
box-shadow: 0 1.5rem 5rem rgba(66, 97, 72, 0.1);
}
.book-editor-preview--suggestion > header p[b-e8ladk1bmw] {
color: #426148;
}
.book-editor-suggestion-action[b-e8ladk1bmw] {
flex-wrap: wrap;
margin: -2rem 0 clamp(2.5rem, 6vw, 4rem);
}
.book-editor-preview > header[b-e8ladk1bmw] {
padding-bottom: clamp(3rem, 7vw, 6rem);
text-align: center;
}
.book-editor-preview > header h2[b-e8ladk1bmw] {
margin: 0.6rem 0 1rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2.8rem, 7vw, 5rem);
font-weight: 500;
line-height: 1;
}
.book-editor-preview > header span[b-e8ladk1bmw] {
color: var(--muted);
font-family: Georgia, 'Times New Roman', serif;
font-size: 1.2rem;
font-style: italic;
}
.book-editor-preview section[b-e8ladk1bmw] {
padding: clamp(2.5rem, 6vw, 5rem) 0;
border-top: 1px solid var(--line);
}
.book-editor-preview section h3[b-e8ladk1bmw] {
margin: 0.6rem 0 2rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2rem, 5vw, 3.4rem);
font-weight: 500;
line-height: 1.05;
}
.book-editor-preview__paragraph[b-e8ladk1bmw] {
margin: 0 0 1.45rem;
color: var(--ink);
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(1.12rem, 2.3vw, 1.35rem);
font-weight: 400;
letter-spacing: normal;
line-height: 1.85;
text-transform: none;
}
.book-editor-finish[b-e8ladk1bmw] {
display: grid;
justify-items: center;
margin-top: 2rem;
padding: clamp(2rem, 6vw, 4rem);
text-align: center;
}
.book-editor-finish h2[b-e8ladk1bmw] {
margin: 0.6rem 0 0.8rem;
font-family: Georgia, 'Times New Roman', serif;
font-size: clamp(2rem, 4vw, 3.2rem);
}
.book-editor-finish > span[b-e8ladk1bmw] {
max-width: 42rem;
color: var(--muted);
line-height: 1.6;
}
.book-editor-finish__save[b-e8ladk1bmw] {
min-width: min(22rem, 100%);
margin-top: 1.8rem;
padding: 1rem 1.5rem;
font-size: 1rem;
font-weight: 800;
}
.book-editor-finish__error[b-e8ladk1bmw] {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1.5rem;
color: #8c3127;
}
.book-editor-publish[b-e8ladk1bmw] {
display: grid;
gap: 1.5rem;
width: min(72rem, calc(100% - 2rem));
box-sizing: border-box;
margin: 1.5rem auto 0;
padding: clamp(1.5rem, 4vw, 3.5rem);
border: 1px solid rgba(69, 91, 74, 0.28);
border-radius: 2rem;
background: linear-gradient(145deg, rgba(235, 242, 231, 0.94), rgba(255, 251, 244, 0.92));
box-shadow: 0 1.5rem 5rem rgba(66, 42, 24, 0.08);
}
.book-editor-publish__copy > p[b-e8ladk1bmw] {
margin: 0;
color: #55705b;
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.book-editor-publish__copy h2[b-e8ladk1bmw] {
max-width: 20ch;
margin: 0.55rem 0 0.85rem;
font-family: var(--font-serif);
font-size: clamp(2rem, 4vw, 3.7rem);
font-weight: 500;
line-height: 1.05;
}
.book-editor-publish__copy > span[b-e8ladk1bmw],
.book-editor-publish__boundary span[b-e8ladk1bmw],
.book-editor-publish__status span[b-e8ladk1bmw] {
display: block;
max-width: 48rem;
color: var(--muted);
font-family: var(--font-sans);
line-height: 1.65;
}
.book-editor-publish__boundary[b-e8ladk1bmw] {
display: grid;
gap: 0.35rem;
padding: 1rem 1.15rem;
border-left: 3px solid #6f8a70;
border-radius: 0.3rem 1rem 1rem 0.3rem;
background: rgba(255, 253, 248, 0.76);
}
.book-editor-publish__boundary strong[b-e8ladk1bmw],
.book-editor-publish__controls label > span[b-e8ladk1bmw],
.book-editor-publish__status strong[b-e8ladk1bmw] {
color: var(--ink);
font-family: var(--font-sans);
}
.book-editor-publish__controls[b-e8ladk1bmw] {
display: grid;
gap: 0.45rem;
max-width: 22rem;
}
.book-editor-publish__controls label[b-e8ladk1bmw] {
display: grid;
gap: 0.55rem;
font-size: 0.84rem;
font-weight: 800;
}
.book-editor-publish__controls select[b-e8ladk1bmw] {
min-height: 3rem;
padding: 0.65rem 0.9rem;
border: 1px solid var(--line);
border-radius: 0.85rem;
background: #fffaf3;
color: var(--ink);
font-family: var(--font-sans);
}
.book-editor-publish__controls small[b-e8ladk1bmw] {
color: var(--muted);
font-family: var(--font-sans);
line-height: 1.5;
}
.book-editor-publish__status[b-e8ladk1bmw] {
display: grid;
gap: 0.25rem;
padding: 1rem 1.15rem;
border: 1px solid var(--line);
border-radius: 1rem;
background: rgba(255, 251, 244, 0.72);
}
.book-editor-publish__status.is-published[b-e8ladk1bmw] {
border-color: rgba(82, 124, 86, 0.3);
background: rgba(231, 241, 229, 0.82);
}
.book-editor-earnings[b-e8ladk1bmw] {
display: grid;
gap: 1.25rem;
padding: clamp(1.25rem, 3vw, 2rem);
border: 1px solid rgba(87, 105, 79, 0.24);
border-radius: 1.5rem;
background: rgba(255, 253, 248, 0.84);
}
.book-editor-earnings__header[b-e8ladk1bmw] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1.5rem;
}
.book-editor-earnings__header p[b-e8ladk1bmw] {
margin: 0;
color: #55705b;
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.book-editor-earnings__header h3[b-e8ladk1bmw] {
max-width: 24ch;
margin: 0.4rem 0 0.65rem;
color: var(--ink);
font-family: var(--font-serif);
font-size: clamp(1.55rem, 3vw, 2.35rem);
font-weight: 500;
line-height: 1.08;
}
.book-editor-earnings__header span[b-e8ladk1bmw],
.book-editor-earnings__note[b-e8ladk1bmw],
.book-editor-earnings__error[b-e8ladk1bmw] {
color: var(--muted);
font-family: var(--font-sans);
line-height: 1.55;
}
.book-editor-earnings__header span[b-e8ladk1bmw] {
display: block;
max-width: 46rem;
}
.book-editor-earnings__split[b-e8ladk1bmw] {
flex: 0 0 auto;
padding: 0.6rem 0.85rem;
border: 1px solid rgba(82, 124, 86, 0.28);
border-radius: 999px;
background: rgba(231, 241, 229, 0.86);
color: #426148;
font-family: var(--font-sans);
font-size: 0.78rem;
white-space: nowrap;
}
.book-editor-earnings__metrics[b-e8ladk1bmw] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.65rem;
margin: 0;
}
.book-editor-earnings__metrics > div[b-e8ladk1bmw] {
min-width: 0;
padding: 1rem;
border: 1px solid rgba(126, 104, 86, 0.16);
border-radius: 1rem;
background: rgba(248, 242, 233, 0.72);
}
.book-editor-earnings__metrics > div.is-creator[b-e8ladk1bmw] {
border-color: rgba(82, 124, 86, 0.28);
background: rgba(231, 241, 229, 0.86);
}
.book-editor-earnings__metrics dt[b-e8ladk1bmw] {
color: var(--muted);
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 700;
}
.book-editor-earnings__metrics dd[b-e8ladk1bmw] {
margin: 0.45rem 0 0;
overflow-wrap: anywhere;
color: var(--ink);
font-family: var(--font-serif);
font-size: clamp(1.35rem, 2.5vw, 2rem);
line-height: 1;
}
.book-editor-earnings__note[b-e8ladk1bmw],
.book-editor-earnings__error[b-e8ladk1bmw] {
margin: 0;
font-size: 0.86rem;
}
.book-editor-earnings__error[b-e8ladk1bmw] {
color: #8c3f2a;
font-weight: 700;
}
.book-editor-publish__error[b-e8ladk1bmw] {
padding: 0.9rem 1rem;
border-radius: 0.85rem;
background: #fff0eb;
color: #8c3f2a;
font-family: var(--font-sans);
font-weight: 700;
}
.book-editor-publish__actions[b-e8ladk1bmw] {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.book-editor-publish__actions button[b-e8ladk1bmw] {
min-height: 3rem;
padding: 0.75rem 1.2rem;
border-radius: 999px;
font-family: var(--font-sans);
font-weight: 800;
cursor: pointer;
}
.book-editor-publish__actions button:disabled[b-e8ladk1bmw] {
cursor: default;
opacity: 0.58;
}
.book-editor-publish__primary[b-e8ladk1bmw] {
border: 1px solid #426148;
background: #426148;
color: #fffaf3;
}
.book-editor-publish__secondary[b-e8ladk1bmw] {
border: 1px solid rgba(126, 78, 55, 0.35);
background: transparent;
color: #744b3a;
}
.book-editor-state[b-e8ladk1bmw] {
display: grid;
place-items: center;
min-height: 55vh;
margin-top: clamp(2rem, 8vw, 7rem);
padding: 3rem;
text-align: center;
}
.book-editor-state > span[b-e8ladk1bmw] {
color: var(--muted);
}
.book-editor-state button[b-e8ladk1bmw] {
margin-top: 1.5rem;
padding: 0.9rem 1.4rem;
}
@media (max-width: 1024px) {
[b-e8ladk1bmw] .toggle-sidebar {
display: none !important;
}
.app-layout[b-e8ladk1bmw],
[b-e8ladk1bmw] .app-layout {
padding-top: 60px;
}
.book-editor-layout--studio[b-e8ladk1bmw] {
padding-top: 0;
}
.sidebar[b-e8ladk1bmw],
[b-e8ladk1bmw] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
.sidebar.visible[b-e8ladk1bmw],
[b-e8ladk1bmw] .sidebar.visible {
transform: translateX(0);
}
.sidebar.hidden[b-e8ladk1bmw],
[b-e8ladk1bmw] .sidebar.hidden {
transform: translateX(-100%);
}
.book-editor-page[b-e8ladk1bmw],
.book-editor-page.sidebar-hidden[b-e8ladk1bmw] {
width: 100%;
margin-left: 0;
}
}
@media (max-width: 720px) {
.book-editor-layout--studio[b-e8ladk1bmw] {
--studio-appbar-height: 3.75rem;
}
.audio-studio-appbar[b-e8ladk1bmw] {
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 0.55rem;
min-height: var(--studio-appbar-height);
padding: 0.45rem 0.55rem;
}
.audio-studio-appbar__back[b-e8ladk1bmw] {
min-width: 2.75rem;
min-height: 2.75rem;
justify-content: center;
padding: 0.4rem;
}
.audio-studio-appbar__back > span:last-child[b-e8ladk1bmw] {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
.audio-studio-appbar__identity[b-e8ladk1bmw] {
justify-content: flex-start;
}
.audio-studio-appbar__identity > div > span[b-e8ladk1bmw] {
max-width: 44vw;
}
.audio-studio-appbar__mark[b-e8ladk1bmw] {
display: none;
}
.audio-studio-appbar__actions[b-e8ladk1bmw] {
gap: 0.45rem;
}
.audio-studio-appbar__status strong[b-e8ladk1bmw] {
font-size: 0.72rem;
}
.audio-studio-appbar__sound[b-e8ladk1bmw] {
width: 2.75rem;
height: 2.75rem;
}
.book-editor-context[b-e8ladk1bmw] {
align-items: stretch;
flex-direction: column;
padding-top: 0.75rem;
}
.book-editor-context__save[b-e8ladk1bmw] {
width: 100%;
}
.book-editor-access[b-e8ladk1bmw] {
align-items: stretch;
flex-direction: column;
width: min(100% - 1rem, 72rem);
margin-top: 0.75rem;
}
.book-editor-access > a[b-e8ladk1bmw] {
align-self: flex-start;
}
.book-editor-intro[b-e8ladk1bmw],
.book-editor-workspace[b-e8ladk1bmw],
.book-cover-studio[b-e8ladk1bmw],
.book-editor-preview[b-e8ladk1bmw],
.book-editor-finish[b-e8ladk1bmw],
.book-editor-publish[b-e8ladk1bmw],
.book-editor-state[b-e8ladk1bmw] {
width: min(100% - 1rem, 72rem);
}
.book-editor-intro[b-e8ladk1bmw] {
padding-top: 3rem;
}
.book-editor-ai-help[b-e8ladk1bmw] {
align-items: stretch;
flex-direction: column;
}
.book-editor-ai-help__state[b-e8ladk1bmw] {
padding-top: 1rem;
padding-left: 0;
border-top: 1px solid rgba(169, 81, 47, 0.18);
border-left: 0;
}
.book-editor-draft-source[b-e8ladk1bmw],
.book-editor-suggestion-action[b-e8ladk1bmw] {
align-items: stretch;
flex-direction: column;
}
.book-editor-draft-source__actions[b-e8ladk1bmw] {
display: grid;
width: 100%;
justify-content: stretch;
}
.book-editor-draft-source__save-status[b-e8ladk1bmw] {
justify-content: flex-start;
}
.book-editor-draft-source__primary[b-e8ladk1bmw],
.book-editor-draft-source__secondary[b-e8ladk1bmw],
.book-editor-suggestion-action button[b-e8ladk1bmw] {
width: 100%;
}
.book-editor-ai-help button[b-e8ladk1bmw],
.book-editor-ai-help a[b-e8ladk1bmw] {
justify-self: stretch;
text-align: center;
}
.book-editor-modes:has(button:nth-child(3))[b-e8ladk1bmw] {
flex-wrap: wrap;
border-radius: 1.25rem;
}
.book-editor-modes:has(button:nth-child(3)) button[b-e8ladk1bmw] {
flex: 1 1 9rem;
}
.book-editor-earnings__header[b-e8ladk1bmw] {
flex-direction: column;
}
.book-editor-earnings__metrics[b-e8ladk1bmw] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.book-editor-workspace[b-e8ladk1bmw],
.book-cover-studio[b-e8ladk1bmw],
.book-editor-preview[b-e8ladk1bmw],
.book-editor-finish[b-e8ladk1bmw] {
border-radius: 1.25rem;
}
.book-editor-publish[b-e8ladk1bmw] {
border-radius: 1.25rem;
}
.book-editor-publish__actions[b-e8ladk1bmw] {
flex-direction: column;
}
.book-editor-publish__actions button[b-e8ladk1bmw] {
width: 100%;
}
.book-editor-details[b-e8ladk1bmw] {
grid-template-columns: 1fr;
}
.book-cover-studio[b-e8ladk1bmw] {
grid-template-columns: 1fr;
}
.book-cover-studio__preview[b-e8ladk1bmw] {
position: relative;
top: auto;
width: min(24rem, 100%);
margin-inline: auto;
}
.book-cover-studio__choices[b-e8ladk1bmw] {
grid-template-columns: 1fr;
}
.book-cover-studio__atelier[b-e8ladk1bmw] {
align-items: flex-start;
flex-direction: column;
}
.book-editor-chapters__heading[b-e8ladk1bmw] {
align-items: start;
flex-direction: column;
}
.book-editor-chapter > header[b-e8ladk1bmw],
.book-editor-chapter > footer[b-e8ladk1bmw] {
align-items: flex-start;
}
.book-editor-chapter > footer[b-e8ladk1bmw] {
flex-direction: column;
}
.book-editor-finish__error[b-e8ladk1bmw] {
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.audio-studio-appbar__sound[b-e8ladk1bmw],
.book-editor-chapter[b-e8ladk1bmw],
.book-editor-ai-help__spinner[b-e8ladk1bmw] {
transition: none;
animation: none;
}
.book-editor-layout--studio[b-e8ladk1bmw] *,
.book-editor-layout--studio[b-e8ladk1bmw] *::before,
.book-editor-layout--studio[b-e8ladk1bmw] *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
.book-editor-proposal-history[b-e8ladk1bmw] {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .5rem;
margin-bottom: 1rem;
}
.book-editor-proposal-history select[b-e8ladk1bmw] {
max-width: 100%;
padding: .5rem .75rem;
color: inherit;
min-height: 44px;
background: #fffaf3;
border: 1px solid var(--line);
border-radius: .5rem;
font: inherit;
}
.book-editor-proposal-history select:focus-visible[b-e8ladk1bmw] {
outline: 2px solid var(--rust);
outline-offset: 3px;
}
/* Editorial application surfaces. */
/* The print-oriented editor retains coordinated light proof and studio surfaces. */
.book-editor-page[b-e8ladk1bmw] { --lov-paper: #faf7f0; --lov-surface: #fffdf8; --lov-ink: #30382d; --lov-muted: #62665c; --lov-line: #d9dace; --lov-green: #394d37; --lov-on-green: #fffdf8; --lov-selected: #e6eadf; --ink: var(--lov-ink); --muted: var(--lov-muted); --line: var(--lov-line); color: var(--ink); background: var(--lov-paper); }
.book-editor-intro:not(.book-editor-intro--studio)[b-e8ladk1bmw] { text-align: left; padding-top: 24px; padding-bottom: 24px; }
.book-editor-intro h1[b-e8ladk1bmw] { max-width: none; margin-inline: 0; font-size: clamp(2rem,3.5vw,3.2rem); line-height: 1.15; letter-spacing: -.025em; }
.book-editor-intro > p:not(.book-editor-kicker)[b-e8ladk1bmw] { max-width: 76ch; margin: 16px 0; font-size: 1rem; line-height: 1.65; }
.book-editor-ai-help[b-e8ladk1bmw] { max-width: none; margin: 24px 0; border-radius: 6px; background: var(--lov-surface); border-color: var(--lov-line); box-shadow: none; }
.book-editor-modes[b-e8ladk1bmw] { max-width: none; margin: 24px 0 0; justify-content: flex-start; border-radius: 6px; background: var(--lov-surface); border: 1px solid var(--lov-line); flex-wrap: wrap; }
.book-editor-modes button[b-e8ladk1bmw] { min-height: 44px; color: var(--lov-muted); border-radius: 4px; }
.book-editor-modes button.is-active[b-e8ladk1bmw] { background: var(--lov-green); color: var(--lov-on-green); }
.book-editor-workspace[b-e8ladk1bmw] { padding: clamp(20px,3vw,40px); background: var(--lov-surface); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: none; }
/* /Components/Pages/StoryLibrary.razor.rz.scp.css */
.story-library-page[b-msbqbfs3h3] {
--library-ink: #30382d;
--library-muted: #62665c;
--library-paper: #faf7f0;
--library-paper-deep: #f1e3cf;
--library-rose: #d98282;
--library-green: #3f5c51;
min-height: 100vh;
color: var(--library-ink);
background: var(--library-paper);
font-family: var(--font-sans);
}
.library-header[b-msbqbfs3h3] {
width: min(1180px, calc(100% - 48px));
min-height: 86px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(88, 61, 55, .14);
}
.library-brand img[b-msbqbfs3h3] { display: block; width: 148px; height: auto; }
.library-header nav[b-msbqbfs3h3] { display: flex; align-items: center; gap: 28px; }
.library-header nav a[b-msbqbfs3h3] { color: var(--library-muted); font-size: .83rem; font-weight: 600; text-decoration: none; }
.library-header nav a[aria-current="page"][b-msbqbfs3h3] { color: var(--library-ink); }
.story-library-page main[b-msbqbfs3h3] { width: min(1180px, calc(100% - 48px)); margin: 0 auto; }
.library-intro[b-msbqbfs3h3] {
display: grid;
grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr);
gap: clamp(48px, 8vw, 112px);
align-items: end;
padding: clamp(40px, 5vw, 64px) 0 40px;
}
.library-eyebrow[b-msbqbfs3h3] {
margin: 0 0 18px;
color: #a05c57;
font-size: .68rem;
font-weight: 700;
letter-spacing: .16em;
text-transform: uppercase;
}
.library-intro h1[b-msbqbfs3h3] {
max-width: 780px;
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2.5rem, 4.5vw, 4.2rem);
font-weight: 450;
line-height: .92;
letter-spacing: -.055em;
}
.library-intro__body[b-msbqbfs3h3] { max-width: 650px; margin: 30px 0 0; color: var(--library-muted); font-size: clamp(1rem, 1.4vw, 1.2rem); line-height: 1.7; }
.library-promise[b-msbqbfs3h3] {
display: flex;
gap: 22px;
padding: 28px 0 5px;
border-top: 1px solid rgba(88, 61, 55, .24);
}
.library-promise > span[b-msbqbfs3h3] { color: var(--library-rose); font-family: var(--font-serif); font-size: 3rem; line-height: .8; }
.library-promise strong[b-msbqbfs3h3] { font-family: var(--font-serif); font-size: 1.35rem; font-weight: 550; }
.library-promise p[b-msbqbfs3h3] { margin: 8px 0 0; color: var(--library-muted); font-size: .9rem; line-height: 1.55; }
.library-shelf[b-msbqbfs3h3] { padding: 40px 0 72px; border-top: 1px solid rgba(88, 61, 55, .14); }
.library-shelf__header[b-msbqbfs3h3] { display: grid; grid-template-columns: 1fr minmax(280px, 480px); gap: 56px; align-items: end; margin-bottom: 48px; }
.library-shelf__header h2[b-msbqbfs3h3], .library-how h2[b-msbqbfs3h3] { margin: 0; font-family: var(--font-serif); font-size: clamp(2.4rem, 4.5vw, 4.2rem); font-weight: 450; line-height: 1; letter-spacing: -.035em; }
.library-shelf__header > p[b-msbqbfs3h3] { margin: 0; color: var(--library-muted); line-height: 1.65; }
.story-grid[b-msbqbfs3h3] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); }
.story-card[b-msbqbfs3h3] { min-width: 0; }
.story-card__cover-link[b-msbqbfs3h3] {
display: block;
min-height: 430px;
text-decoration: none;
transition: transform .25s ease, box-shadow .25s ease;
}
.story-card__cover-link:hover[b-msbqbfs3h3] { transform: translateY(-5px) rotate(-.25deg); }
.story-card__cover-link[b-msbqbfs3h3] .story-card__cover { min-height: 430px; }
.story-card__cover-link[b-msbqbfs3h3] .story-edition-cover__title h3 { font-size: clamp(2rem, 3vw, 2.9rem); }
.story-card__details[b-msbqbfs3h3] { padding: 25px 4px 0; }
.story-card__formats[b-msbqbfs3h3] { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.story-card__formats span[b-msbqbfs3h3] { padding: 5px 9px; border: 1px solid rgba(88,61,55,.16); border-radius: 999px; color: #775f55; font-size: .64rem; font-weight: 750; letter-spacing: .07em; text-transform: uppercase; }
.story-card__formats span.is-audio[b-msbqbfs3h3] { border-color: rgba(64,93,82,.25); background: #eef4ea; color: #405d52; }
.story-card__details > p[b-msbqbfs3h3] { display: -webkit-box; min-height: 4.65em; margin: 0; overflow: hidden; color: var(--library-muted); font-family: var(--font-serif); font-size: 1rem; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.story-card dl[b-msbqbfs3h3] { display: flex; gap: 28px; margin: 23px 0; padding: 16px 0; border-top: 1px solid rgba(88, 61, 55, .14); border-bottom: 1px solid rgba(88, 61, 55, .14); }
.story-card dl div[b-msbqbfs3h3] { min-width: 0; }
.story-card dt[b-msbqbfs3h3] { color: #9a8781; font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.story-card dd[b-msbqbfs3h3] { margin: 5px 0 0; font-size: .82rem; }
.story-card__open[b-msbqbfs3h3] { color: var(--library-ink); font-size: .85rem; font-weight: 700; text-decoration: none; }
.story-card__open span[b-msbqbfs3h3] { margin-left: 7px; color: var(--library-rose); }
.library-state[b-msbqbfs3h3], .library-empty[b-msbqbfs3h3] { min-height: 310px; display: grid; place-items: center; align-content: center; text-align: center; border: 1px solid rgba(88, 61, 55, .14); background: rgba(255,255,255,.28); }
.library-state h3[b-msbqbfs3h3], .library-empty h3[b-msbqbfs3h3] { margin: 0; font-family: var(--font-serif); font-size: 2rem; font-weight: 500; }
.library-state p[b-msbqbfs3h3], .library-empty > p:not(.library-eyebrow)[b-msbqbfs3h3] { max-width: 520px; color: var(--library-muted); line-height: 1.6; }
.library-state button[b-msbqbfs3h3], .library-empty a[b-msbqbfs3h3] { padding: 12px 20px; color: #fff; background: var(--library-green); border: 0; border-radius: 999px; font: inherit; font-size: .85rem; text-decoration: none; cursor: pointer; }
.library-loader[b-msbqbfs3h3] { width: 28px; height: 28px; border: 2px solid rgba(63,92,81,.18); border-top-color: var(--library-green); border-radius: 50%; animation: library-spin-b-msbqbfs3h3 .8s linear infinite; }
@keyframes library-spin-b-msbqbfs3h3 { to { transform: rotate(360deg); } }
.library-create[b-msbqbfs3h3] {
display: grid;
grid-template-columns: minmax(0, 1.3fr) minmax(280px, .7fr);
gap: clamp(24px, 4vw, 48px);
align-items: end;
padding: clamp(28px, 4vw, 48px);
border-radius: 6px;
color: #fff9ee;
background:
radial-gradient(circle at 86% 8%, rgba(217, 130, 130, .19), transparent 23rem),
var(--library-green);
box-shadow: none;
}
.library-create .library-eyebrow[b-msbqbfs3h3] { color: #f1bd97; }
.library-create h2[b-msbqbfs3h3] { max-width: 24ch; margin: 0; font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.7rem); font-weight: 450; line-height: 1.12; letter-spacing: -.045em; }
.library-create__copy > p:not(.library-eyebrow)[b-msbqbfs3h3] { max-width: 56ch; margin: 24px 0 0; color: rgba(255, 249, 238, .76); line-height: 1.65; }
.library-create__action a[b-msbqbfs3h3] { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; box-sizing: border-box; padding: 12px 24px; border-radius: 6px; color: var(--library-ink); background: #f4d39d; font-size: .9rem; font-weight: 750; text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.library-create__action a:hover[b-msbqbfs3h3] { color: var(--library-ink); background: #f7dfb7; transform: translateY(-2px); }
.library-create__action a span[b-msbqbfs3h3] { color: #9a4f48; }
.library-create__action p[b-msbqbfs3h3] { margin: 15px 0 0; color: rgba(255, 249, 238, .65); font-size: .8rem; line-height: 1.5; }
.library-create__action a:focus-visible[b-msbqbfs3h3] { outline: 3px solid #fff; outline-offset: 4px; }
.library-how[b-msbqbfs3h3] { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(50px, 9vw, 130px); padding: 90px 0 112px; border-top: 1px solid rgba(88, 61, 55, .14); }
.library-how ol[b-msbqbfs3h3] { margin: 0; padding: 0; list-style: none; }
.library-how li[b-msbqbfs3h3] { display: grid; grid-template-columns: 44px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid rgba(88, 61, 55, .14); }
.library-how li span[b-msbqbfs3h3] { color: var(--library-rose); font-family: var(--font-serif); }
.library-how li p[b-msbqbfs3h3] { margin: 0; color: var(--library-muted); line-height: 1.55; }
@media (max-width: 900px) {
.library-intro[b-msbqbfs3h3], .library-shelf__header[b-msbqbfs3h3], .library-create[b-msbqbfs3h3], .library-how[b-msbqbfs3h3] { grid-template-columns: 1fr; }
.story-grid[b-msbqbfs3h3] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.library-promise[b-msbqbfs3h3] { max-width: 480px; }
}
@media (max-width: 640px) {
.library-header[b-msbqbfs3h3] { width: calc(100% - 32px); min-height: 72px; }
.library-header nav[b-msbqbfs3h3] { gap: 14px; }
.library-header nav a:nth-child(3)[b-msbqbfs3h3] { display: none; }
.library-header nav a[b-msbqbfs3h3] { font-size: .72rem; }
.library-brand img[b-msbqbfs3h3] { width: 116px; }
.story-library-page main[b-msbqbfs3h3] { width: calc(100% - 32px); }
.library-intro[b-msbqbfs3h3] { gap: 42px; padding: 58px 0 64px; }
.library-intro h1[b-msbqbfs3h3] { font-size: clamp(3.2rem, 16vw, 4.6rem); }
.library-shelf[b-msbqbfs3h3] { padding: 54px 0 74px; }
.library-shelf__header[b-msbqbfs3h3] { gap: 20px; margin-bottom: 34px; }
.story-grid[b-msbqbfs3h3] { grid-template-columns: 1fr; gap: 54px; }
.story-card__cover-link[b-msbqbfs3h3],
.story-card__cover-link[b-msbqbfs3h3] .story-card__cover { min-height: 390px; }
.library-create[b-msbqbfs3h3] { gap: 24px; padding: 28px 20px; border-radius: 6px; }
.library-create__action a[b-msbqbfs3h3] { width: 100%; }
.library-how[b-msbqbfs3h3] { gap: 32px; padding: 70px 0 80px; }
}
@media (prefers-reduced-motion: reduce) {
.story-card__cover-link[b-msbqbfs3h3], .library-create__action a[b-msbqbfs3h3] { transition: none; }
.library-loader[b-msbqbfs3h3] { animation: none; }
}
/* /Components/Pages/StoryLibraryReader.razor.rz.scp.css */
.story-reader-page[b-31hxjijw9s] {
--reader-ink: #382826;
--reader-muted: #776862;
--reader-paper: #fbf4e7;
--reader-green: #405d52;
--reader-rose: #d77f7f;
min-height: 100vh;
color: var(--reader-ink);
background:
radial-gradient(circle at 10% 20%, rgba(218, 165, 127, .12), transparent 24rem),
linear-gradient(180deg, #fffaf1, var(--reader-paper));
font-family: var(--font-sans);
}
.reader-header[b-31hxjijw9s] {
width: min(1120px, calc(100% - 48px));
min-height: 82px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(87, 61, 55, .14);
}
.reader-brand img[b-31hxjijw9s] { display: block; width: 148px; height: auto; }
.reader-header nav[b-31hxjijw9s] { display: flex; gap: 26px; }
.reader-header nav a[b-31hxjijw9s] { color: var(--reader-muted); font-size: .8rem; font-weight: 600; text-decoration: none; }
.story-reader-page main[b-31hxjijw9s] { width: min(1120px, calc(100% - 48px)); margin: 0 auto; }
.reader-eyebrow[b-31hxjijw9s] { margin: 0 0 17px; color: #a05b56; font-size: .67rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.reader-preview[b-31hxjijw9s] {
display: grid;
grid-template-columns: minmax(300px, .76fr) minmax(0, 1.24fr);
gap: clamp(54px, 9vw, 124px);
align-items: start;
padding: clamp(62px, 9vw, 112px) 0 120px;
}
.reader-preview__title[b-31hxjijw9s] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
.reader-preview__cover[b-31hxjijw9s] {
position: sticky;
top: 36px;
min-height: 560px;
}
.reader-preview__cover[b-31hxjijw9s] .reader-preview-cover { min-height: 560px; }
.reader-preview__content[b-31hxjijw9s] { padding-top: 22px; }
.reader-format-switcher[b-31hxjijw9s] {
display: inline-grid;
grid-template-columns: repeat(2, 1fr);
gap: 4px;
margin: 0 0 2rem;
padding: 4px;
border: 1px solid rgba(87, 61, 55, .18);
border-radius: 999px;
background: rgba(255, 255, 255, .52);
}
.reader-format-switcher button[b-31hxjijw9s] {
min-height: 2.7rem;
padding: 0 1.1rem;
border: 0;
border-radius: 999px;
background: transparent;
color: var(--reader-muted);
font: inherit;
font-size: .8rem;
font-weight: 750;
cursor: pointer;
}
.reader-format-switcher button.is-active[b-31hxjijw9s] {
background: var(--reader-ink);
color: #fffaf2;
}
.reader-format-switcher button:focus-visible[b-31hxjijw9s] {
outline: 3px solid rgba(64, 93, 82, .35);
outline-offset: 2px;
}
.reader-audio-teaser[b-31hxjijw9s] {
margin: 0 0 2.25rem;
padding: 1rem;
border: 1px solid rgba(87, 61, 55, .14);
border-radius: 1.5rem;
background: rgba(255, 253, 248, .76);
}
.reader-audio-teaser[b-31hxjijw9s] .story-roll__header {
display: none;
}
.reader-audio-teaser[b-31hxjijw9s] .story-roll__paper {
max-height: 26rem;
}
.reader-preview blockquote[b-31hxjijw9s] { margin: 0; padding: 0; border: 0; font-family: var(--font-serif); font-size: clamp(2rem, 3.6vw, 3.55rem); line-height: 1.12; letter-spacing: -.032em; }
.reader-preview dl[b-31hxjijw9s] { display: flex; gap: 56px; margin: 42px 0 0; padding: 20px 0; border-top: 1px solid rgba(87,61,55,.15); border-bottom: 1px solid rgba(87,61,55,.15); }
.reader-preview dt[b-31hxjijw9s] { color: #9a8780; font-size: .62rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.reader-preview dd[b-31hxjijw9s] { margin: 7px 0 0; font-size: .9rem; }
.access-panel[b-31hxjijw9s] { margin-top: 52px; padding: 36px 38px; background: rgba(255,255,255,.45); border: 1px solid rgba(87,61,55,.14); box-shadow: 0 18px 50px rgba(56,37,31,.07); }
.access-panel h2[b-31hxjijw9s] { margin: 0; font-family: var(--font-serif); font-size: 2.15rem; font-weight: 500; letter-spacing: -.025em; }
.access-panel > p:not(.reader-eyebrow):not(.access-message):not(.access-fineprint)[b-31hxjijw9s] { color: var(--reader-muted); line-height: 1.6; }
.story-balance[b-31hxjijw9s] { display: grid; grid-template-columns: 1fr auto; gap: 5px 20px; margin: 26px 0; padding: 18px 20px; color: #fff; background: var(--reader-green); }
.story-balance span[b-31hxjijw9s] { font-size: .78rem; opacity: .72; }
.story-balance strong[b-31hxjijw9s] { grid-row: span 2; font-family: var(--font-serif); font-size: 1.65rem; font-weight: 500; }
.story-balance small[b-31hxjijw9s] { font-size: .68rem; opacity: .62; }
.access-actions[b-31hxjijw9s] { display: flex; flex-wrap: wrap; gap: 10px; }
.reader-button[b-31hxjijw9s] { min-height: 45px; padding: 0 22px; border-radius: 999px; font: inherit; font-size: .83rem; font-weight: 700; cursor: pointer; }
.reader-button--primary[b-31hxjijw9s] { color: #fff; background: var(--reader-rose); border: 1px solid var(--reader-rose); text-decoration: none; display: inline-flex; align-items: center; }
.reader-button--secondary[b-31hxjijw9s] { color: var(--reader-ink); background: transparent; border: 1px solid rgba(87,61,55,.26); }
.reader-button:disabled[b-31hxjijw9s] { opacity: .55; cursor: wait; }
.access-message[b-31hxjijw9s] { margin: 18px 0 0; color: var(--reader-muted); font-size: .82rem; line-height: 1.5; }
.access-message--warning[b-31hxjijw9s] { color: #9a4f49; }
.access-fineprint[b-31hxjijw9s] { margin: 20px 0 0; color: #9a8780; font-size: .7rem; line-height: 1.5; }
.reader-book[b-31hxjijw9s] { width: min(760px, 100%); margin: 0 auto; padding: clamp(72px, 10vw, 128px) 0 120px; }
.reader-book__cover[b-31hxjijw9s] { width: min(430px, 86vw); min-height: 610px; margin: 0 auto clamp(72px, 10vw, 112px); }
.reader-book__cover[b-31hxjijw9s] .reader-full-cover { min-height: 610px; }
.reader-book__title[b-31hxjijw9s] { text-align: center; }
.reader-book__title h1[b-31hxjijw9s] { margin: 0; font-family: var(--font-serif); font-size: clamp(3.6rem, 8vw, 6.7rem); font-weight: 450; line-height: .94; letter-spacing: -.055em; }
.reader-book__subtitle[b-31hxjijw9s] { margin: 22px 0 0; color: var(--reader-muted); font-family: var(--font-serif); font-size: 1.35rem; font-style: italic; }
.reading-window[b-31hxjijw9s] { width: fit-content; margin: 34px auto 0; padding: 10px 16px; display: flex; align-items: center; gap: 9px; color: var(--reader-muted); border: 1px solid rgba(87,61,55,.15); border-radius: 999px; }
.reading-window span[b-31hxjijw9s] { width: 7px; height: 7px; background: #6f9a7f; border-radius: 50%; }
.reading-window p[b-31hxjijw9s] { margin: 0; font-size: .7rem; }
.reader-chapters[b-31hxjijw9s] { margin-top: 96px; }
.reader-chapter[b-31hxjijw9s] { padding: 64px 0; border-top: 1px solid rgba(87,61,55,.16); }
.reader-chapter__number[b-31hxjijw9s] { margin: 0 0 16px; color: var(--reader-rose); font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.reader-chapter h2[b-31hxjijw9s] { margin: 0 0 34px; font-family: var(--font-serif); font-size: clamp(2.2rem, 4.4vw, 3.6rem); font-weight: 470; line-height: 1; letter-spacing: -.035em; }
.reader-chapter__body[b-31hxjijw9s] { color: #4a3b37; font-family: var(--font-serif); font-size: clamp(1.08rem, 1.55vw, 1.22rem); line-height: 1.82; }
.reader-chapter__body[b-31hxjijw9s] p { margin: 0 0 1.4em; }
.reader-chapter__body[b-31hxjijw9s] h3 { margin: 2em 0 .7em; font-size: 1.35em; }
.reader-book__footer[b-31hxjijw9s] { padding: 72px 0 0; text-align: center; border-top: 1px solid rgba(87,61,55,.16); }
.reader-book__footer span[b-31hxjijw9s] { color: var(--reader-rose); }
.reader-book__footer p[b-31hxjijw9s] { color: var(--reader-muted); font-family: var(--font-serif); font-style: italic; }
.reader-book__footer a[b-31hxjijw9s] { color: var(--reader-ink); font-size: .82rem; font-weight: 700; }
.reader-state[b-31hxjijw9s] { min-height: 70vh; display: grid; place-items: center; align-content: center; text-align: center; }
.reader-state h1[b-31hxjijw9s] { max-width: 620px; margin: 0; font-family: var(--font-serif); font-size: clamp(3rem, 7vw, 5.8rem); font-weight: 450; line-height: .95; }
.reader-state > p:not(.reader-eyebrow)[b-31hxjijw9s] { max-width: 500px; color: var(--reader-muted); line-height: 1.6; }
.reader-state a[b-31hxjijw9s] { margin-top: 10px; color: var(--reader-ink); font-weight: 700; }
.reader-loader[b-31hxjijw9s] { width: 28px; height: 28px; border: 2px solid rgba(63,92,81,.18); border-top-color: var(--reader-green); border-radius: 50%; animation: reader-spin-b-31hxjijw9s .8s linear infinite; }
@keyframes reader-spin-b-31hxjijw9s { to { transform: rotate(360deg); } }
@media (max-width: 820px) {
.reader-preview[b-31hxjijw9s] { grid-template-columns: 1fr; }
.reader-preview__cover[b-31hxjijw9s] { position: relative; top: auto; min-height: 470px; }
.reader-preview__cover[b-31hxjijw9s] .reader-preview-cover { min-height: 470px; }
}
@media (max-width: 640px) {
.reader-header[b-31hxjijw9s] { width: calc(100% - 32px); min-height: 72px; }
.reader-brand img[b-31hxjijw9s] { width: 116px; }
.reader-header nav[b-31hxjijw9s] { gap: 12px; }
.reader-header nav a[b-31hxjijw9s] { font-size: .7rem; }
.story-reader-page main[b-31hxjijw9s] { width: calc(100% - 32px); }
.reader-preview[b-31hxjijw9s] { gap: 48px; padding: 48px 0 80px; }
.reader-preview__cover[b-31hxjijw9s],
.reader-preview__cover[b-31hxjijw9s] .reader-preview-cover { min-height: 420px; }
.reader-preview dl[b-31hxjijw9s] { gap: 28px; }
.access-panel[b-31hxjijw9s] { margin-top: 38px; padding: 28px 22px; }
.reader-book[b-31hxjijw9s] { padding: 68px 0 84px; }
.reader-chapters[b-31hxjijw9s] { margin-top: 62px; }
.reader-chapter[b-31hxjijw9s] { padding: 48px 0; }
}
@media (prefers-reduced-motion: reduce) {
.reader-loader[b-31hxjijw9s] { animation: none; }
}
/* /Components/Pages/Subscription.razor.rz.scp.css */
/* Subscription.razor.css - Subscription Page Styles */
/* Base styles inherited from FrontPage but with warmer tones */
[b-di6eaw51zi] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
/* inherited font-sans */
}
/* App Layout */
[b-di6eaw51zi] .app-layout,
.app-layout[b-di6eaw51zi] {
display: flex;
flex-direction: column;
min-height: 100vh;
/* inherited font-sans */
background: var(--lov-paper);
padding-top: 0;
width: 100%;
max-width: 100%;
overflow-x: clip;
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-di6eaw51zi] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-di6eaw51zi] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-di6eaw51zi] .sidebar.hidden {
transform: translateX(-100%);
}
[b-di6eaw51zi] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 1.0rem;
}
[b-di6eaw51zi] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-di6eaw51zi] .sidebar-logo img {
max-width: 180px;
width: auto;
height: 50px;
}
[b-di6eaw51zi] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-di6eaw51zi] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
}
[b-di6eaw51zi] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-di6eaw51zi] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-di6eaw51zi] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease;
}
[b-di6eaw51zi] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-di6eaw51zi] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: #4F4A45;
}
[b-di6eaw51zi] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
[b-di6eaw51zi] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-di6eaw51zi] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
}
[b-di6eaw51zi] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-di6eaw51zi] .dropdown-item:hover {
background-color: #f0dad3;
}
/* Toggle Sidebar Button */
[b-di6eaw51zi] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Main Container */
[b-di6eaw51zi] .container-v3 {
flex: 1;
width: min(1200px, calc(100vw - 280px));
max-width: min(1200px, calc(100vw - 280px));
margin: 30px 0;
margin-left: calc(280px + max(0px, (100vw - 280px - 1200px) / 2));
padding: 0 20px;
padding-bottom: 40px;
display: flex;
flex-direction: column;
gap: 40px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-di6eaw51zi] .container-v3.sidebar-hidden {
margin-left: max(0px, calc((100vw - 1200px) / 2));
width: min(1200px, 100%);
max-width: min(1200px, 100vw);
}
/* Granny Hero Section */
[b-di6eaw51zi] .granny-hero-section {
/* background: linear-gradient(135deg, rgba(255, 249, 240, 0.95) 0%, rgba(255, 244, 228, 0.95) 100%);
border-radius: 25px;
padding: 50px 40px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
border: 2px solid #f5e5d3; */
position: relative;
overflow: hidden;
}
[b-di6eaw51zi] .granny-hero-section::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(251, 207, 168, 0.18) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
animation: candleFlicker-b-di6eaw51zi 4s ease-in-out infinite;
}
[b-di6eaw51zi] .granny-hero-section::after {
content: '';
position: absolute;
left: 12%;
right: 12%;
bottom: -12px;
height: 22px;
background: radial-gradient(circle, rgba(84, 52, 33, 0.05) 0%, rgba(84, 52, 33, 0) 70%);
filter: blur(2px);
pointer-events: none;
}
[b-di6eaw51zi] .granny-hero-content {
display: flex;
align-items: center;
/* gap: 40px; */
position: relative;
z-index: 1;
}
[b-di6eaw51zi] .granny-illustration-wrapper {
flex-shrink: 0;
/* transform: translateY(-20px);*/
}
[b-di6eaw51zi] .granny-illustration {
max-width: 400px;
height: auto;
filter: drop-shadow(0 4px 15px rgba(0, 0, 0, 0.1));
}
@keyframes candleFlicker-b-di6eaw51zi {
0%, 100% {
opacity: 0.9;
transform: scale(1);
}
50% {
opacity: 1;
transform: scale(1.015);
}
70% {
opacity: 0.96;
transform: scale(1.01);
}
}
[b-di6eaw51zi] .granny-welcome-text {
flex: 1;
}
[b-di6eaw51zi] .granny-title {
font-family: var(--font-serif, 'Fraunces', serif);
font-size: 2.5em;
font-weight: var(--mobile-hero-heading-weight);
color: #4F4A45;
margin: 0 0 20px 0;
line-height: 1.2;
}
[b-di6eaw51zi] .granny-subtitle {
font-size: 1.2em;
color: #666;
line-height: 1.6;
margin: 0;
}
/* Granny Section Base */
[b-di6eaw51zi] .granny-section {
/* background: rgba(255, 255, 255, 0.7); */
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
/* border-radius: 20px; */
padding: 40px;
/* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(245, 229, 211, 0.6); */
}
[b-di6eaw51zi] .granny-section-header {
text-align: center;
margin-bottom: 35px;
}
[b-di6eaw51zi] .granny-section-title {
/* inherited font-sans */
font-size: 2em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 10px 0;
}
[b-di6eaw51zi] .granny-section-subtitle {
font-size: 1.1em;
color: #666;
margin: 0;
font-style: italic;
}
/* Cards Grid */
[b-di6eaw51zi] .granny-cards-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 25px;
}
[b-di6eaw51zi] .granny-card {
background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
border-radius: 15px;
padding: 30px;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
border: 1px solid #f0dad3;
transition: all 0.3s ease;
}
[b-di6eaw51zi] .granny-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
[b-di6eaw51zi] .granny-card-highlight {
background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
border: 2px solid #E8B076;
}
[b-di6eaw51zi] .granny-card-icon {
font-size: 2.5em;
margin-bottom: 15px;
text-align: center;
}
[b-di6eaw51zi] .granny-card-title {
/* inherited font-sans */
font-size: 1.3em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 10px 0;
}
[b-di6eaw51zi] .granny-card-text {
font-size: 1em;
color: #666;
line-height: 1.6;
margin: 0;
}
/* Progress Cards */
[b-di6eaw51zi] .granny-progress-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 25px;
}
[b-di6eaw51zi] .granny-progress-card {
background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
border-radius: 15px;
padding: 30px;
text-align: center;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
border: 2px solid #f5e5d3;
transition: all 0.3s ease;
}
[b-di6eaw51zi] .granny-progress-card:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
[b-di6eaw51zi] .progress-icon {
font-size: 3em;
margin-bottom: 15px;
}
[b-di6eaw51zi] .progress-number {
font-size: 3em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 10px;
}
[b-di6eaw51zi] .progress-label {
font-size: 1em;
color: #666;
font-weight: 600;
}
/* Featured Theme */
[b-di6eaw51zi] .granny-featured-theme {
display: flex;
background: linear-gradient(135deg, #FFF9F0 0%, #FFF4E4 100%);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid #f5e5d3;
transition: all 0.3s ease;
}
[b-di6eaw51zi] .granny-featured-theme:hover {
transform: translateY(-3px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
[b-di6eaw51zi] .theme-image {
width: 40%;
object-fit: cover;
border-radius: 20px;
margin: 1em;
}
[b-di6eaw51zi] .theme-content {
flex: 1;
padding: 40px;
display: flex;
flex-direction: column;
justify-content: center;
}
[b-di6eaw51zi] .theme-title {
/* inherited font-sans */
font-size: 1.8em;
font-weight: 700;
color: #4F4A45;
margin: 0 0 15px 0;
}
[b-di6eaw51zi] .theme-description {
font-size: 1.1em;
color: #666;
line-height: 1.6;
margin: 0 0 25px 0;
}
[b-di6eaw51zi] .btn-theme {
align-self: flex-start;
padding: 12px 30px;
background-color: #FBCFA8;
color: #4F4A45;
border: 2px solid #F0C07A;
border-radius: 25px;
font-weight: 700;
font-size: 1em;
cursor: pointer;
transition: all 0.3s ease;
}
[b-di6eaw51zi] .btn-theme:hover {
background-color: #F0C07A;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(251, 207, 168, 0.4);
}
/* Wisdom Section */
[b-di6eaw51zi] .granny-wisdom {
background: linear-gradient(135deg, rgba(251, 207, 168, 0.2) 0%, rgba(255, 249, 240, 0.8) 100%);
}
[b-di6eaw51zi] .granny-wisdom-card {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
[b-di6eaw51zi] .granny-quote-icon {
font-size: 3em;
margin-bottom: 20px;
opacity: 0.7;
}
[b-di6eaw51zi] .granny-quote {
margin: 0 0 20px 0;
padding: 0;
border: none;
}
[b-di6eaw51zi] .granny-quote p {
font-size: 1.4em;
font-style: italic;
color: #4F4A45;
line-height: 1.6;
margin: 0;
}
[b-di6eaw51zi] .granny-signature {
font-size: 1.1em;
color: #666;
font-weight: 600;
}
/* Quick Actions */
[b-di6eaw51zi] .granny-actions-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
[b-di6eaw51zi] .granny-action-btn {
background: linear-gradient(135deg, #FFF9F0 0%, #FBCFA8 100%);
border: 2px solid #f5e5d3;
border-radius: 15px;
padding: 30px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
cursor: pointer;
transition: all 0.3s ease;
/* inherited font-sans */
}
[b-di6eaw51zi] .granny-action-btn:hover {
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, #FBCFA8 0%, #F0C07A 100%);
}
[b-di6eaw51zi] .action-icon {
font-size: 2.5em;
}
[b-di6eaw51zi] .action-label {
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
}
/* Sidebar Overlay */
.sidebar-overlay[b-di6eaw51zi] {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100vh;
width: auto;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-di6eaw51zi] {
display: none;
}
/* Responsive Styles */
@media (max-width: 1024px) {
[b-di6eaw51zi] .mobile-top-bar {
display: flex !important;
}
[b-di6eaw51zi] .toggle-sidebar {
display: none !important;
}
[b-di6eaw51zi] .app-layout,
.app-layout[b-di6eaw51zi] {
display: block;
padding-top: 60px;
width: 100%;
max-width: 100%;
margin-inline: 0;
overflow-x: clip;
}
[b-di6eaw51zi] .container-v3 {
margin-left: 0 !important;
margin-top: 70px;
width: 100%;
max-width: 100%;
}
[b-di6eaw51zi] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-di6eaw51zi] .sidebar.visible {
transform: translateX(0);
}
[b-di6eaw51zi] .granny-hero-content {
flex-direction: column;
text-align: center;
}
[b-di6eaw51zi] .granny-illustration-wrapper {
transform: none;
}
[b-di6eaw51zi] .granny-illustration {
width: 300px;
}
[b-di6eaw51zi] .granny-featured-theme {
flex-direction: column;
}
[b-di6eaw51zi] .theme-image {
width: 100%;
margin: 0;
border-radius: 20px 20px 0 0;
}
}
@media (max-width: 768px) {
[b-di6eaw51zi] .container-v3 {
padding: 0 var(--mobile-page-margin);
margin-top: 20px;
gap: 30px;
}
[b-di6eaw51zi] .granny-hero-section {
padding: 30px 20px;
}
[b-di6eaw51zi] .granny-title {
font-size: 2em;
}
[b-di6eaw51zi] .granny-subtitle {
font-size: 1.1em;
}
[b-di6eaw51zi] .granny-section {
padding: 30px 20px;
}
[b-di6eaw51zi] .granny-section-title {
font-size: 1.6em;
}
[b-di6eaw51zi] .granny-cards-grid {
grid-template-columns: 1fr;
}
[b-di6eaw51zi] .granny-progress-cards {
grid-template-columns: 1fr;
}
[b-di6eaw51zi] .theme-content {
padding: 25px;
}
[b-di6eaw51zi] .theme-title {
font-size: 1.5em;
}
[b-di6eaw51zi] .granny-quote p {
font-size: 1.2em;
}
[b-di6eaw51zi] .granny-actions-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
[b-di6eaw51zi] .granny-illustration {
width: 300px;
}
[b-di6eaw51zi] .granny-title {
font-size: 1.8em;
}
[b-di6eaw51zi] .granny-subtitle {
font-size: 1em;
}
[b-di6eaw51zi] .granny-section-title {
font-size: 1.4em;
}
[b-di6eaw51zi] .granny-card {
padding: 20px;
}
[b-di6eaw51zi] .granny-progress-card {
padding: 20px;
}
[b-di6eaw51zi] .progress-number {
font-size: 2.5em;
}
}
[b-di6eaw51zi] .subscription-line-icon {
width: 1em;
height: 1em;
display: block;
flex: 0 0 auto;
}
[b-di6eaw51zi] .subscription-trust-icon {
width: 1.16rem;
height: 1.16rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: #966947;
flex: 0 0 1.16rem;
}
[b-di6eaw51zi] .subscription-inline-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.05rem;
height: 1.05rem;
vertical-align: -0.15em;
}
[b-di6eaw51zi] .subscription-reassurance {
text-align: center;
font-family: var(--font-handwriting, 'Caveat', cursive);
font-size: 1.18rem;
color: #6e5447;
max-width: 720px;
margin: 0 auto;
padding-bottom: 1.65rem;
line-height: 1.8;
border-width: 0 0 1px 0;
border-style: solid;
border-image: linear-gradient(to right, transparent, rgba(180, 155, 125, 0.28), transparent) 1;
}
/* Editorial plan comparison. Shared rows grow with the longest translated content. */
.pricing-page[b-di6eaw51zi] {
gap: 2.5rem;
padding: 2.5rem clamp(1.25rem, 3vw, 3rem) 4rem;
color: var(--lov-ink);
}
.pricing-page .subscription-hero[b-di6eaw51zi] {
padding: 0;
overflow: visible;
background: transparent;
}
.subscription-hero[b-di6eaw51zi]::before, .subscription-hero[b-di6eaw51zi]::after { display: none; }
.pricing-page .granny-hero-content[b-di6eaw51zi] { display: block; }
.subscription-welcome-text[b-di6eaw51zi] { max-width: 48rem; padding: 0; }
.subscription-title[b-di6eaw51zi] {
margin: 0 0 1rem;
color: var(--lov-ink);
font-family: var(--font-serif);
font-size: clamp(2.3rem, 4vw, 3.8rem);
font-weight: 500;
line-height: 1.12;
letter-spacing: -.035em;
}
.subscription-subtitle[b-di6eaw51zi] {
max-width: 54ch;
margin: 0;
color: var(--lov-muted);
font-size: 1.1rem;
line-height: 1.65;
}
.subscription-offers-section[b-di6eaw51zi] { width: 100%; margin: 0; padding: 0; }
.pricing-currency-control[b-di6eaw51zi] {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: .75rem 1.5rem;
margin-bottom: 1.5rem;
color: var(--lov-muted);
}
.pricing-currency-row[b-di6eaw51zi] { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.pricing-currency-label[b-di6eaw51zi] { font-size: .95rem; font-weight: 600; }
.pricing-currency-options[b-di6eaw51zi] { display: flex; gap: .35rem; }
.pricing-currency-option[b-di6eaw51zi] {
border: 1px solid var(--lov-line);
border-radius: .3rem;
background: var(--lov-surface);
color: var(--lov-ink);
padding: .65rem .9rem;
font: inherit;
cursor: pointer;
}
.pricing-currency-option.is-selected[b-di6eaw51zi] { background: var(--lov-green); color: var(--lov-on-green); border-color: var(--lov-green); }
.pricing-tax-note[b-di6eaw51zi] { margin: 0; font-size: .85rem; line-height: 1.5; }
.subscription-membership-note[b-di6eaw51zi] {
border-left: 3px solid var(--lov-green);
margin: 0 0 1.5rem;
padding: .8rem 1rem;
background: var(--lov-selected);
color: var(--lov-ink);
font-size: 1rem;
line-height: 1.55;
}
.subscription-offers-grid[b-di6eaw51zi] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1rem;
align-items: stretch;
}
.subscription-offer-card[b-di6eaw51zi] {
display: grid;
grid-row: span 4;
grid-template-rows: subgrid;
gap: 1.15rem;
padding: clamp(1.25rem, 2vw, 2rem);
border: 1px solid var(--lov-line);
border-radius: .4rem;
background: var(--lov-surface);
min-width: 0;
position: relative;
}
.subscription-offer-card--premium[b-di6eaw51zi] { background: color-mix(in srgb, var(--lov-selected) 48%, var(--lov-surface)); border-color: var(--lov-green); }
.subscription-offer-heading[b-di6eaw51zi] { min-width: 0; }
.subscription-plan-name[b-di6eaw51zi] {
margin: 0 0 .5rem;
color: var(--lov-ink);
font-family: var(--font-serif);
font-size: 1.8rem;
font-weight: 500;
line-height: 1.2;
}
.subscription-plan-subtitle[b-di6eaw51zi] { margin: 0; color: var(--lov-muted); font-size: 1rem; line-height: 1.5; }
.subscription-offer-price[b-di6eaw51zi] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.subscription-offer-price-amount[b-di6eaw51zi] { font-family: var(--font-serif); font-size: clamp(2.3rem, 3vw, 3rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; }
.subscription-offer-price-period[b-di6eaw51zi] { color: var(--lov-muted); font-size: .9rem; }
.subscription-offer-action[b-di6eaw51zi] { display: flex; align-items: start; }
.subscription-offer-action:empty[b-di6eaw51zi] { display: none; }
.subscription-offer-button[b-di6eaw51zi], .subscription-current-plan[b-di6eaw51zi] {
display: flex;
align-items: center;
justify-content: center;
gap: .5rem;
width: 100%;
min-height: 3rem;
padding: .75rem 1rem;
border: 1px solid var(--lov-green);
border-radius: .3rem;
background: var(--lov-green);
color: var(--lov-on-green);
font: inherit;
font-weight: 600;
line-height: 1.4;
text-align: center;
box-sizing: border-box;
}
.subscription-offer-button[b-di6eaw51zi] { cursor: pointer; }
.subscription-offer-button--free[b-di6eaw51zi], .subscription-current-plan--inactive[b-di6eaw51zi] { border-color: var(--lov-line); background: transparent; color: var(--lov-ink); }
.subscription-current-plan[b-di6eaw51zi] { font-size: .9rem; }
.subscription-offer-list[b-di6eaw51zi] { list-style: none; margin: 0; padding: .5rem 0 0; align-self: start; border-top: 1px solid var(--lov-line); }
.subscription-offer-list li[b-di6eaw51zi] { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .6rem; padding: .65rem 0; font-size: .96rem; line-height: 1.55; color: var(--lov-muted); }
.subscription-check[b-di6eaw51zi] { color: var(--lov-green); font-weight: 600; }
.subscription-credit-feature[b-di6eaw51zi] { font-weight: 600; }
.pricing-subscription-trust-row[b-di6eaw51zi] { display: flex; justify-content: center; flex-wrap: wrap; gap: .8rem 2rem; margin: 1.5rem 0 .75rem; }
.pricing-subscription-trust-item[b-di6eaw51zi] { display: inline-flex; align-items: center; gap: .5rem; color: var(--lov-muted); font-size: .85rem; line-height: 1.5; }
.subscription-trust-icon[b-di6eaw51zi] { display: inline-flex; flex: 0 0 auto; width: 1rem; height: 1rem; color: var(--lov-green); }
.subscription-trust-icon svg[b-di6eaw51zi] { width: 100%; height: 100%; }
.subscription-reassurance[b-di6eaw51zi] { margin: 0; text-align: center; color: var(--lov-muted); font-family: var(--font-serif); font-size: .95rem; font-style: italic; line-height: 1.6; }
.subscription-studio-offer[b-di6eaw51zi] {
display: grid;
grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
gap: 2rem;
margin-top: 2.5rem;
padding: 1.5rem 0;
border-top: 1px solid var(--lov-line);
border-bottom: 1px solid var(--lov-line);
align-items: center;
}
.subscription-studio-offer__eyebrow[b-di6eaw51zi], .patron-kicker[b-di6eaw51zi] { display: block; margin: 0 0 .6rem; color: var(--lov-muted); font-size: .75rem; letter-spacing: .08em; font-weight: 600; text-transform: uppercase; line-height: 1.5; }
.subscription-studio-offer h2[b-di6eaw51zi] { margin: 0 0 .7rem; font-family: var(--font-serif); font-weight: 500; color: var(--lov-ink); font-size: 1.7rem; line-height: 1.2; }
.subscription-studio-offer p:not(.subscription-studio-offer__eyebrow)[b-di6eaw51zi] { margin: 0; font-size: .95rem; line-height: 1.65; color: var(--lov-muted); }
.subscription-studio-offer__credits[b-di6eaw51zi] { padding-left: 2rem; border-left: 1px solid var(--lov-line); }
.patron-section[b-di6eaw51zi], .pricing-credit-balance-section[b-di6eaw51zi] { width: 100%; margin: 0; padding: 0; }
.patron-inner[b-di6eaw51zi] { position: relative; padding: 2rem; border: 1px solid var(--lov-line); border-radius: .4rem; background: var(--lov-surface); }
.patron-owned-badge[b-di6eaw51zi] { display: inline-flex; gap: .5rem; align-items: center; margin-bottom: 1.25rem; color: var(--lov-ink); font-size: .85rem; }
.patron-owned-mark[b-di6eaw51zi] { width: .5rem; height: .5rem; border-radius: 50%; background: var(--lov-green); }
.patron-content[b-di6eaw51zi] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2.5rem; }
.patron-main[b-di6eaw51zi] { min-width: 0; }
.patron-heading[b-di6eaw51zi] { margin: 0 0 .8rem; font-family: var(--font-serif); font-size: 2rem; color: var(--lov-ink); line-height: 1.2; font-weight: 500; }
.patron-subtitle[b-di6eaw51zi], .patron-body[b-di6eaw51zi] { margin: 0 0 1.3rem; font-size: .95rem; color: var(--lov-muted); line-height: 1.65; }
.patron-price-block[b-di6eaw51zi] { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: 1.25rem; }
.patron-price[b-di6eaw51zi] { font-family: var(--font-serif); font-size: 2.25rem; letter-spacing: -.035em; color: var(--lov-ink); line-height: 1.2; }
.patron-price-label[b-di6eaw51zi] { color: var(--lov-muted); font-size: .9rem; }
.patron-cta[b-di6eaw51zi], .pricing-credit-topup-link[b-di6eaw51zi] { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .75rem 1.25rem; border: 1px solid var(--lov-green); border-radius: .3rem; background: var(--lov-green); color: var(--lov-on-green); font: inherit; font-weight: 600; line-height: 1.4; cursor: pointer; }
.patron-cta:disabled[b-di6eaw51zi] { border-color: var(--lov-line); background: var(--lov-selected); color: var(--lov-ink); cursor: default; }
.patron-limited-note[b-di6eaw51zi] { margin: .85rem 0 0; color: var(--lov-muted); font-size: .85rem; line-height: 1.5; }
.patron-detail[b-di6eaw51zi] { padding-left: 2.5rem; border-left: 1px solid var(--lov-line); min-width: 0; }
.patron-features[b-di6eaw51zi] { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.patron-features li[b-di6eaw51zi] { display: grid; grid-template-columns: 1rem minmax(0, 1fr); gap: .6rem; color: var(--lov-muted); font-size: .95rem; line-height: 1.55; }
.patron-check[b-di6eaw51zi] { color: var(--lov-green); }
.patron-feature-text strong[b-di6eaw51zi] { color: var(--lov-ink); }
.pricing-credit-balance-card[b-di6eaw51zi] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .7fr) auto; grid-template-areas: "title balance action" "info balance action"; align-items: center; gap: .65rem 2rem; }
.pricing-credit-balance-header[b-di6eaw51zi] { grid-area: title; display: flex; align-items: center; gap: .6rem; }
.pricing-credit-balance-header h3[b-di6eaw51zi] { margin: 0; color: var(--lov-ink); font-family: var(--font-serif); font-size: 1.6rem; font-weight: 500; line-height: 1.2; }
.pricing-credit-balance-header[b-di6eaw51zi] .credit-balance-icon { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; width: 1.4rem !important; height: 1.4rem !important; flex-basis: 1.4rem !important; display: inline-flex; width: 1.4rem; height: 1.4rem; color: var(--lov-green); }
.pricing-credit-balance-content[b-di6eaw51zi] { grid-area: balance; display: flex; align-items: baseline; gap: .6rem; }
.pricing-credit-count[b-di6eaw51zi] { color: var(--lov-ink); font-family: var(--font-serif); font-size: 3rem; line-height: 1; }
.pricing-credit-label[b-di6eaw51zi] { color: var(--lov-muted); font-size: .9rem; line-height: 1.5; }
.pricing-credit-info[b-di6eaw51zi] { grid-area: info; margin: 0; color: var(--lov-muted); font-size: .9rem; line-height: 1.6; }
.pricing-credit-topup-link[b-di6eaw51zi] { grid-area: action; }
.credit-loading__mark[b-di6eaw51zi] { display: block; width: 1.5rem; height: 1.5rem; border: 2px solid var(--lov-line); border-top-color: var(--lov-green); border-radius: 50%; animation: spin-b-di6eaw51zi 1s linear infinite; }
.pricing-currency-option:focus-visible[b-di6eaw51zi], .subscription-offer-button:focus-visible[b-di6eaw51zi], .patron-cta:focus-visible[b-di6eaw51zi], .pricing-credit-topup-link:focus-visible[b-di6eaw51zi] { outline: 3px solid var(--lov-focus); outline-offset: 3px; }
.pricing-currency-option:hover[b-di6eaw51zi], .subscription-offer-button:hover[b-di6eaw51zi], .patron-cta:not(:disabled):hover[b-di6eaw51zi], .pricing-credit-topup-link:hover[b-di6eaw51zi] { filter: brightness(.95); }
@supports not (grid-template-rows: subgrid) {
.subscription-offer-card[b-di6eaw51zi] { grid-row: auto; grid-template-rows: auto auto auto 1fr; }
}
@media (max-width: 1024px) {
.pricing-page[b-di6eaw51zi] { padding: 2rem 1.5rem 3rem; margin-top: 1rem; }
}
@media (max-width: 800px) {
.subscription-offers-grid[b-di6eaw51zi] { grid-template-columns: minmax(0, 1fr); }
.subscription-offer-card[b-di6eaw51zi] { grid-row: auto; grid-template-rows: auto auto auto auto; }
.subscription-studio-offer[b-di6eaw51zi], .patron-content[b-di6eaw51zi] { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.subscription-studio-offer__credits[b-di6eaw51zi], .patron-detail[b-di6eaw51zi] { border-left: 0; border-top: 1px solid var(--lov-line); padding: 1.25rem 0 0; }
.pricing-credit-balance-card[b-di6eaw51zi] { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title balance" "info info" "action action"; gap: 1rem; }
.pricing-credit-balance-content[b-di6eaw51zi] { flex-direction: column; gap: .3rem; align-items: end; text-align: right; }
.pricing-credit-topup-link[b-di6eaw51zi] { justify-self: start; }
}
@media (max-width: 480px) {
.pricing-page[b-di6eaw51zi] { padding: 1.5rem 1.25rem 3rem; gap: 2rem; }
.subscription-title[b-di6eaw51zi] { font-size: 2.5rem; }
.subscription-subtitle[b-di6eaw51zi] { font-size: 1rem; }
.subscription-offer-card[b-di6eaw51zi], .patron-inner[b-di6eaw51zi] { padding: 1.4rem; }
.pricing-subscription-trust-row[b-di6eaw51zi] { justify-content: start; gap: .75rem; }
.subscription-studio-offer[b-di6eaw51zi] { margin-top: 1.75rem; }
.patron-cta[b-di6eaw51zi] { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .credit-loading__mark[b-di6eaw51zi] { animation: none; } }
/* Footer alignment to follow sidebar on desktop (mirrors ThemesAll layout) */
[b-di6eaw51zi] .main-footer {
margin-left: 280px;
width: calc(100% - 280px);
margin-top: 80px;
padding: 0 clamp(1.25rem, 3vw, 3rem);
box-sizing: border-box;
background: transparent;
color: #4F4A45;
border-top: 0;
transition: margin-left 0.3s ease;
}
[b-di6eaw51zi] .main-footer.sidebar-hidden {
margin-left: 0;
width: 100%;
}
[b-di6eaw51zi] .footer-container {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 60px clamp(1rem, 2vw, 1.5rem) 30px;
box-sizing: border-box;
background-color: var(--lov-paper);
}
@media (max-width: 992px) {
[b-di6eaw51zi] .main-footer {
margin-left: 0 !important;
width: 100%;
padding: 0 var(--mobile-page-margin);
}
}
/* The purchase dialog shares the pricing page's paper and olive identity. */
.subscription-dialog-host[b-di6eaw51zi] .subscription-purchase-overlay {
padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
background: rgb(30 34 28 / 48%);
}
.subscription-dialog-host[b-di6eaw51zi] .subscription-purchase-surface {
width: min(100%, 48rem);
max-height: calc(100dvh - 2rem);
overflow: hidden;
border: 1px solid var(--lov-line);
border-radius: .5rem;
background: var(--lov-surface);
color: var(--lov-ink);
box-shadow: 0 1.5rem 4rem rgb(30 34 28 / 20%);
}
.subscription-purchase[b-di6eaw51zi] { display: flex; flex-direction: column; max-height: inherit; }
.subscription-purchase__header[b-di6eaw51zi] { display: flex; align-items: start; justify-content: space-between; gap: 1rem; padding: 1.75rem 2rem 1.25rem; flex-shrink: 0; }
.subscription-purchase__header > div[b-di6eaw51zi] { min-width: 0; }
.subscription-purchase__eyebrow[b-di6eaw51zi] { margin: 0 0 .45rem; color: var(--lov-muted); font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1.5; }
.subscription-purchase__header h2[b-di6eaw51zi] { margin: 0; color: var(--lov-ink); font-family: var(--font-serif); font-size: clamp(1.7rem, 3vw, 2.2rem); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; }
.subscription-purchase__intro[b-di6eaw51zi] { margin: .7rem 0 0; color: var(--lov-muted); font-size: 1rem; line-height: 1.5; }
.subscription-purchase__close[b-di6eaw51zi] { display: grid; place-items: center; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--lov-line); border-radius: .3rem; background: transparent; color: var(--lov-ink); font: inherit; font-size: 1.5rem; cursor: pointer; }
.subscription-purchase__body[b-di6eaw51zi] { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 2rem 1.25rem; }
.purchase-choices[b-di6eaw51zi] { min-width: 0; margin: 0 0 1.25rem; padding: 0; border: 0; }
.purchase-choices legend[b-di6eaw51zi], .purchase-features h3[b-di6eaw51zi] { margin: 0 0 .6rem; padding: 0; color: var(--lov-ink); font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.5; }
.purchase-billing-options[b-di6eaw51zi] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.purchase-duration-options[b-di6eaw51zi] { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.purchase-choice[b-di6eaw51zi] { display: flex; gap: .65rem; align-items: start; padding: .85rem; border: 1px solid var(--lov-line); border-radius: .3rem; background: var(--lov-paper); cursor: pointer; }
.purchase-choice:has(input:checked)[b-di6eaw51zi] { border-color: var(--lov-green); background: var(--lov-selected); box-shadow: inset 0 0 0 1px var(--lov-green); }
.purchase-choice:hover[b-di6eaw51zi] { border-color: var(--lov-green); }
.purchase-choice[b-di6eaw51zi] input { flex: 0 0 1rem; width: 1rem; height: 1rem; margin: .18rem 0 0; accent-color: var(--lov-green); cursor: inherit; }
.purchase-choice > span[b-di6eaw51zi] { display: flex; flex-direction: column; min-width: 0; gap: .3rem; }
.purchase-choice strong[b-di6eaw51zi] { color: var(--lov-ink); font-size: 1rem; font-weight: 600; line-height: 1.35; }
.purchase-choice span span[b-di6eaw51zi] { color: var(--lov-muted); font-size: .85rem; line-height: 1.45; }
.purchase-choice .purchase-choice__price[b-di6eaw51zi] { color: var(--lov-ink); font-size: 1rem; font-weight: 600; }
.purchase-choice .purchase-choice__equivalent[b-di6eaw51zi] { font-size: .78rem; }
.purchase-choice:has(input:focus-visible)[b-di6eaw51zi] { outline: 3px solid var(--lov-focus); outline-offset: 3px; }
.purchase-choices:disabled .purchase-choice[b-di6eaw51zi] { cursor: wait; }
.purchase-features[b-di6eaw51zi] { border-top: 1px solid var(--lov-line); padding-top: 1.1rem; }
.purchase-features ul[b-di6eaw51zi] { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1.25rem; }
.purchase-features li[b-di6eaw51zi] { position: relative; padding-left: 1.35rem; color: var(--lov-muted); font-size: .9rem; line-height: 1.5; }
.purchase-features li[b-di6eaw51zi]::before { content: '✓'; position: absolute; left: 0; color: var(--lov-green); font-weight: 600; }
.subscription-purchase__footer[b-di6eaw51zi] { flex-shrink: 0; padding: 1.1rem 2rem 1.5rem; border-top: 1px solid var(--lov-line); background: var(--lov-surface); }
.purchase-summary[b-di6eaw51zi] { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: .35rem 1rem; }
.purchase-summary p[b-di6eaw51zi] { margin: 0; }
.purchase-summary__plan[b-di6eaw51zi] { color: var(--lov-ink); font-weight: 600; font-size: 1rem; line-height: 1.5; }
.purchase-summary__plan span[b-di6eaw51zi] { color: var(--lov-muted); font-weight: 400; }
.purchase-summary__price[b-di6eaw51zi] { color: var(--lov-ink); font-family: var(--font-serif); font-size: 1.8rem; line-height: 1.2; text-align: right; }
.purchase-summary__price span[b-di6eaw51zi] { color: var(--lov-muted); font-family: var(--font-sans); font-size: .85rem; }
.purchase-summary__billing[b-di6eaw51zi] { grid-column: 1 / -1; color: var(--lov-ink); font-size: .85rem; line-height: 1.5; }
.purchase-policies[b-di6eaw51zi] { margin: .7rem 0 .9rem; color: var(--lov-muted); font-size: .8rem; line-height: 1.5; }
.purchase-policies a[b-di6eaw51zi] { color: var(--lov-green); text-decoration: underline; text-underline-offset: .15em; }
.purchase-actions[b-di6eaw51zi] { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .75rem; }
.purchase-action[b-di6eaw51zi] { display: flex; justify-content: center; align-items: center; gap: .5rem; min-height: 3rem; padding: .7rem 1.1rem; border: 1px solid var(--lov-line); border-radius: .3rem; background: transparent; color: var(--lov-ink); font: inherit; font-weight: 600; line-height: 1.4; cursor: pointer; }
.purchase-action--primary[b-di6eaw51zi] { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); }
.purchase-action--primary span[b-di6eaw51zi] { flex-shrink: 0; }
.purchase-action:disabled[b-di6eaw51zi], .subscription-purchase__close:disabled[b-di6eaw51zi] { cursor: wait; opacity: .7; }
.purchase-action:not(:disabled):hover[b-di6eaw51zi], .subscription-purchase__close:not(:disabled):hover[b-di6eaw51zi] { filter: brightness(.95); }
.purchase-action:focus-visible[b-di6eaw51zi], .subscription-purchase__close:focus-visible[b-di6eaw51zi], .purchase-policies a:focus-visible[b-di6eaw51zi] { outline: 3px solid var(--lov-focus); outline-offset: 3px; }
.purchase-error[b-di6eaw51zi] { margin: 0 0 .8rem; color: var(--color-error, #903a2a); font-size: .9rem; line-height: 1.5; }
@media (max-width: 600px) {
.subscription-dialog-host[b-di6eaw51zi] .subscription-purchase-overlay { padding: .5rem; }
.subscription-dialog-host[b-di6eaw51zi] .subscription-purchase-surface { max-height: calc(100dvh - 1rem); }
.subscription-purchase__header[b-di6eaw51zi] { padding: 1.1rem 1.1rem .9rem; gap: .5rem; }
.subscription-purchase__header h2[b-di6eaw51zi] { font-size: 1.7rem; }
.subscription-purchase__eyebrow[b-di6eaw51zi] { font-size: .7rem; }
.subscription-purchase__intro[b-di6eaw51zi] { font-size: .9rem; }
.subscription-purchase__body[b-di6eaw51zi] { padding: 0 1.1rem 1rem; }
.purchase-billing-options[b-di6eaw51zi] { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.purchase-duration-options[b-di6eaw51zi] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.purchase-choice[b-di6eaw51zi] { padding: .75rem; }
.purchase-features ul[b-di6eaw51zi] { grid-template-columns: minmax(0, 1fr); }
.subscription-purchase__footer[b-di6eaw51zi] { padding: .9rem 1.1rem 1.1rem; }
.purchase-summary[b-di6eaw51zi] { grid-template-columns: minmax(0, 1fr); gap: .2rem; }
.purchase-summary__price[b-di6eaw51zi] { text-align: left; font-size: 1.6rem; }
.purchase-actions[b-di6eaw51zi] { gap: .5rem; }
.purchase-action[b-di6eaw51zi] { padding: .65rem .8rem; font-size: .9rem; }
}
@media (max-height: 540px) {
.subscription-purchase__header[b-di6eaw51zi] { padding-top: .75rem; padding-bottom: .75rem; }
.subscription-purchase__eyebrow[b-di6eaw51zi], .subscription-purchase__intro[b-di6eaw51zi] { display: none; }
.subscription-purchase__footer[b-di6eaw51zi] { padding-top: .75rem; padding-bottom: .75rem; }
.purchase-summary[b-di6eaw51zi] { grid-template-columns: minmax(0, 1fr) auto; }
.purchase-summary__price[b-di6eaw51zi] { font-size: 1.3rem; }
.purchase-policies[b-di6eaw51zi] { margin: .4rem 0; }
}
@media (forced-colors: active) {
.purchase-choice:has(input:checked)[b-di6eaw51zi] { border: 2px solid Highlight; }
.purchase-action[b-di6eaw51zi], .subscription-purchase__close[b-di6eaw51zi] { border: 1px solid ButtonText; }
}
/* Swish Button - Brand Compliant */
.swish-btn[b-di6eaw51zi] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.subscription-plan-card__action--swish[b-di6eaw51zi] {
background: #ffffff;
color: #7f4f36;
border: 2px solid #d88652;
box-shadow: 0 8px 16px rgba(127, 79, 54, 0.12);
}
.subscription-plan-card__action--swish:hover[b-di6eaw51zi] {
background: #fffaf4;
border-color: #e19c63;
}
.swish-logo-img[b-di6eaw51zi] {
height: 32px;
width: auto;
object-fit: contain;
}
/* Swish Payment Modal Styles */
.swish-payment-overlay[b-di6eaw51zi] {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
animation: fadeIn-b-di6eaw51zi 0.3s ease-in;
}
@keyframes fadeIn-b-di6eaw51zi {
from { opacity: 0; }
to { opacity: 1; }
}
.swish-payment-modal[b-di6eaw51zi] {
background: white;
border-radius: 20px;
padding: 40px;
max-width: 500px;
width: 90%;
position: relative;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
animation: slideUp-b-di6eaw51zi 0.3s ease-out;
}
@keyframes slideUp-b-di6eaw51zi {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.swish-payment-modal__close[b-di6eaw51zi] {
position: absolute;
top: 15px;
right: 15px;
background: transparent;
border: none;
font-size: 32px;
color: #999;
cursor: pointer;
line-height: 1;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.2s;
}
.swish-payment-modal__close:hover[b-di6eaw51zi] {
color: #333;
}
.swish-payment-modal__content[b-di6eaw51zi] {
text-align: center;
}
.swish-payment-modal__title[b-di6eaw51zi] {
font-size: 24px;
font-weight: 700;
color: #333;
margin: 0 0 20px 0;
}
.swish-payment-modal__instruction[b-di6eaw51zi] {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.swish-payment-modal__spinner[b-di6eaw51zi] {
width: 40px;
height: 40px;
margin: 20px auto;
border: 4px solid #f3f3f3;
border-top: 4px solid #1b7bbf;
border-radius: 50%;
animation: spin-b-di6eaw51zi 1s linear infinite;
}
@keyframes spin-b-di6eaw51zi {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.swish-qr-container[b-di6eaw51zi] {
background: white;
padding: 20px;
border-radius: 15px;
display: inline-block;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
margin: 20px auto;
}
.swish-qr-code[b-di6eaw51zi] {
width: 250px;
height: 250px;
display: block;
}
.swish-payment-modal__timer[b-di6eaw51zi] {
margin: 20px 0;
font-size: 20px;
color: #333;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.swish-timer-icon[b-di6eaw51zi] {
width: 1.5rem;
height: 1.5rem;
}
.swish-timer-text[b-di6eaw51zi] {
font-weight: 700;
font-family: 'Monaco', 'Courier New', monospace;
}
.swish-payment-modal__amount[b-di6eaw51zi] {
font-size: 18px;
color: #666;
margin-top: 15px;
font-weight: 600;
}
.swish-payment-modal__retry[b-di6eaw51zi] {
background: #1b7bbf;
color: white;
border: none;
padding: 12px 30px;
border-radius: 10px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
margin-top: 20px;
transition: background 0.2s;
}
.swish-payment-modal__retry:hover[b-di6eaw51zi] {
background: #155a8a;
}
.swish-payment-success[b-di6eaw51zi] {
padding: 30px 0;
}
.swish-success-icon[b-di6eaw51zi] {
color: #6D8B5B;
display: inline-flex;
margin-bottom: 20px;
}
.swish-payment-success h3[b-di6eaw51zi] {
font-size: 24px;
color: #333;
margin: 0 0 10px 0;
}
.swish-payment-success p[b-di6eaw51zi] {
font-size: 16px;
color: #666;
}
.swish-payment-error[b-di6eaw51zi] {
padding: 30px 0;
}
.swish-error-icon[b-di6eaw51zi] {
color: #A05E45;
display: inline-flex;
margin-bottom: 20px;
}
.swish-payment-error h3[b-di6eaw51zi] {
font-size: 24px;
color: #333;
margin: 0 0 10px 0;
}
.swish-payment-error p[b-di6eaw51zi] {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
.swish-payment-expired[b-di6eaw51zi] {
padding: 30px 0;
}
.swish-expired-icon[b-di6eaw51zi] {
color: #B98247;
display: inline-flex;
margin-bottom: 20px;
}
.swish-status-icon[b-di6eaw51zi] {
width: 3.5rem;
height: 3.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
color: #8A6248;
}
.swish-payment-modal__timer .swish-status-icon[b-di6eaw51zi] {
width: 1.5rem;
height: 1.5rem;
margin-bottom: 0;
color: #8A6248;
}
.swish-status-icon--success[b-di6eaw51zi] {
color: #6D8B5B;
}
.swish-status-icon--error[b-di6eaw51zi] {
color: #A05E45;
}
.swish-status-icon--timer[b-di6eaw51zi] {
color: #B98247;
}
.swish-payment-expired h3[b-di6eaw51zi] {
font-size: 24px;
color: #333;
margin: 0 0 10px 0;
}
.swish-payment-expired p[b-di6eaw51zi] {
font-size: 16px;
color: #666;
margin-bottom: 20px;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
.swish-payment-modal[b-di6eaw51zi] {
padding: 30px 20px;
width: 95%;
}
.swish-qr-code[b-di6eaw51zi] {
width: 200px;
height: 200px;
}
.swish-payment-modal__title[b-di6eaw51zi] {
font-size: 20px;
}
}
/* /Components/Pages/Terms.razor.rz.scp.css */
/* Terms page styles - copied from Privacy.razor.css */
/* Base styles */
[b-654y8kq39f] .loading-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 50vh;
/* inherited font-sans */
}
/* Global body/html overflow prevention - REMOVED */
/* App Layout */
[b-654y8kq39f] .app-layout {
display: flex;
min-height: 100vh;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px; /* Account for fixed logo */
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-654y8kq39f] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-654y8kq39f] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-654y8kq39f] .sidebar.hidden {
transform: translateX(-100%);
}
[b-654y8kq39f] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-654y8kq39f] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-654y8kq39f] .sidebar a:hover {
color: #000;
}
[b-654y8kq39f] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar Logo Styles */
[b-654y8kq39f] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-654y8kq39f] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-654y8kq39f] .sidebar-logo {
text-align: center;
}
[b-654y8kq39f] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
}
/* Sidebar Bottom User Section */
[b-654y8kq39f] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-654y8kq39f] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-654y8kq39f] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease-in-out;
}
[b-654y8kq39f] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-654y8kq39f] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: var(--text, #4F4A45);
}
[b-654y8kq39f] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
/* User Dropdown */
[b-654y8kq39f] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-654y8kq39f] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
animation: fadeIn-b-654y8kq39f 0.2s ease-in-out;
}
@keyframes fadeIn-b-654y8kq39f {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[b-654y8kq39f] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-654y8kq39f] .dropdown-item:hover {
background-color: #f0dad3;
}
[b-654y8kq39f] .menu-icon {
margin-right: 0.6rem;
}
/* Toggle Button */
[b-654y8kq39f] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Button Styles */
[b-654y8kq39f] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
}
[b-654y8kq39f] .btn:hover {
background-color: #FADDAA;
}
[b-654y8kq39f] .btn-login {
background-color: #FBCFA8;
}
[b-654y8kq39f] .btn-primary {
padding: 12px 25px;
margin-top: 10px;
background-color: #FBCFA8;
}
[b-654y8kq39f] .btn-secondary {
padding: 8px 18px;
margin-top: 10px;
}
/* Main Container */
[b-654y8kq39f] .container-v3 {
flex: 1;
max-width: 1200px;
margin: 0 auto;
margin-left: 280px;
padding: 0;
transition: margin-left 0.3s ease;
}
[b-654y8kq39f] .container-v3.sidebar-hidden {
margin-left: 0;
}
/* Terms specific content styles */
/* Inherit width from container-v3 to match FrontPage; keep Terms-specific typography/padding tweaks */
.terms-container[b-654y8kq39f] {
/* Remove conflicting width constraints so container-v3 controls layout */
/* flex: 1; */
/* max-width: 800px; */
/* margin: 30px auto; */
/* margin-left: 280px; */
padding: 0;
line-height: 1.6;
/* margin-left handled by container-v3 + .sidebar-hidden */
}
.legal-header[b-654y8kq39f] {
text-align: center;
padding: 3rem 2rem 2rem;
max-width: 800px;
margin: 0 auto;
}
.legal-body[b-654y8kq39f] {
padding: 0 2rem 3rem;
box-sizing: border-box;
}
.terms-container h1[b-654y8kq39f] {
font-family: var(--font-serif);
font-size: 2.5rem;
color: #4F4A45;
margin-bottom: 1.5rem;
text-align: center;
font-weight: var(--mobile-hero-heading-weight);
}
.terms-container h2[b-654y8kq39f] {
font-family: var(--font-serif);
font-size: 1.5rem;
color: #4F4A45;
margin-top: 2rem;
margin-bottom: 1rem;
font-weight: var(--mobile-section-heading-weight);
}
.terms-container p[b-654y8kq39f] {
color: #666;
margin-bottom: 1rem;
font-size: 1rem;
}
.terms-container ul[b-654y8kq39f] {
margin-bottom: 1rem;
padding-left: 1.5rem;
}
.terms-container li[b-654y8kq39f] {
color: #666;
margin-bottom: 0.5rem;
}
.terms-container a[b-654y8kq39f] {
color: #FBCFA8;
text-decoration: none;
}
.terms-container a:hover[b-654y8kq39f] {
text-decoration: underline;
}
.last-updated[b-654y8kq39f] {
font-style: italic;
color: #888;
font-size: 0.9rem;
margin-bottom: 2rem;
text-align: center;
}
.closing[b-654y8kq39f] {
font-style: italic;
color: #4F4A45;
text-align: center;
margin-top: 2rem;
padding: 1.5rem;
background: rgba(251, 207, 168, 0.1);
border-radius: 12px;
border: 1px solid rgba(251, 207, 168, 0.3);
}
/* Headings */
[b-654y8kq39f] h2, [b-654y8kq39f] h3, [b-654y8kq39f] h4, [b-654y8kq39f] h5 {
font-family: var(--font-serif) !important;
font-weight: var(--mobile-section-heading-weight);
color: #4F4A45;
margin-top: 0;
}
[b-654y8kq39f] h4,
[b-654y8kq39f] h5 {
font-family: var(--font-sans) !important;
font-weight: 600;
}
[b-654y8kq39f] h2 {
font-size: 1.8em;
margin-bottom: 20px;
}
[b-654y8kq39f] h3 {
font-size: 1.7em;
margin-bottom: 10px;
}
[b-654y8kq39f] h4 {
font-size: 1.2em;
margin-bottom: 8px;
}
[b-654y8kq39f] h5 {
font-size: 1.1em;
font-weight: 400;
color: #555;
margin-bottom: 5px;
}
[b-654y8kq39f] p {
margin-bottom: 15px;
color: #666;
font-size: 0.95em;
}
/* Sidebar Overlay */
.sidebar-overlay[b-654y8kq39f] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
}
.sidebar-overlay.hidden[b-654y8kq39f] {
display: none;
}
/* Footer Styles */
[b-654y8kq39f] .main-footer {
/* Fill the main column; the shared footer caps and centers its inner content. */
width: calc(100% - 280px);
margin-left: 280px;
margin-right: auto;
background-color: #FAF3E5;
padding: 60px 0 30px 0;
margin-top: 80px;
color: #4F4A45;
border-top: 1px solid #f0dad3;
box-sizing: border-box;
}
[b-654y8kq39f] .main-footer.sidebar-hidden {
/* Match the main column when the sidebar is hidden. */
width: 100%;
margin-left: auto;
margin-right: auto;
}
[b-654y8kq39f] .footer-container {
/* Keep the inner footer content aligned with main container padding */
max-width: 1200px;
width: 100%;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-654y8kq39f] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
}
[b-654y8kq39f] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-654y8kq39f] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-654y8kq39f] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
[b-654y8kq39f] .footer-nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 80px;
margin-bottom: 40px;
}
[b-654y8kq39f] .footer-section {
padding: 0 var(--mobile-page-margin);
}
[b-654y8kq39f] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-654y8kq39f] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-654y8kq39f] .footer-section ul li {
margin-bottom: 10px;
}
[b-654y8kq39f] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-654y8kq39f] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
[b-654y8kq39f] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
gap: 20px;
}
[b-654y8kq39f] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-654y8kq39f] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-654y8kq39f] .footer-languages a:hover,
[b-654y8kq39f] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
[b-654y8kq39f] .footer-legal-origin {
text-align: right;
}
[b-654y8kq39f] .footer-made-by {
font-size: 0.85em;
color: #888;
margin: 0 0 5px 0;
}
[b-654y8kq39f] .footer-copyright {
font-size: 0.85em;
color: #888;
margin: 0;
text-align: left;
}
/* Responsive Styles */
@media (max-width: 1024px) {
[b-654y8kq39f] .toggle-sidebar {
display: none;
}
[b-654y8kq39f] .app-layout {
padding-top: 60px;
}
[b-654y8kq39f] .container-v3 {
margin-left: 0 !important;
margin-top: 70px;
padding: 0 var(--mobile-page-margin);
width: 100%;
max-width: 100%;
}
[b-654y8kq39f] .sidebar {
top: 60px;
height: calc(100vh - 60px);
}
[b-654y8kq39f] .main-footer {
margin-left: 0 !important;
}
[b-654y8kq39f] .sidebar {
transform: translateX(-100%);
}
[b-654y8kq39f] .sidebar.visible {
transform: translateX(0);
}
[b-654y8kq39f] .sidebar.hidden {
transform: translateX(-100%);
}
[b-654y8kq39f] .toggle-sidebar {
left: 1rem;
z-index: 200;
}
}
@media (max-width: 768px) {
[b-654y8kq39f] .footer-nav-links {
flex-direction: column;
align-items: center;
gap: 40px;
}
[b-654y8kq39f] .footer-section {
text-align: center;
}
[b-654y8kq39f] .footer-bottom {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
[b-654y8kq39f] .footer-legal-origin {
text-align: center;
}
[b-654y8kq39f] .footer-copyright {
text-align: center;
}
[b-654y8kq39f] .container-v3 {
margin-top: 60px;
padding: 0 var(--mobile-page-margin);
}
.legal-header[b-654y8kq39f] {
padding: 1.5rem 0;
}
.legal-body[b-654y8kq39f] {
padding: 0 0 2rem;
}
.terms-container h1[b-654y8kq39f] {
font-size: 2rem;
}
.terms-container h2[b-654y8kq39f] {
font-size: 1.3rem;
}
/* Mobile touch scroll fixes - REMOVED */
[b-654y8kq39f] .app-layout {
/*
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
-webkit-overflow-scrolling: touch;
*/
}
[b-654y8kq39f] .container-v3 {
/*
overflow-x: hidden;
touch-action: pan-y pinch-zoom;
overscroll-behavior: contain;
*/
}
}
@media (max-width: 480px) {
.terms-container h1[b-654y8kq39f] {
font-size: 1.8rem;
}
}
/* Readable legal text without a full-width line length. */
.legal-header[b-654y8kq39f], .legal-body[b-654y8kq39f] { width: min(100%, 82ch); max-width: 82ch; margin-inline: auto; padding-inline: 24px; }
.legal-header[b-654y8kq39f] { text-align: left; padding-top: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--lov-line); margin-bottom: 24px; }
.terms-container h1[b-654y8kq39f] { text-align: left; color: var(--lov-ink); font-size: clamp(2rem,3.5vw,3.2rem); }
.terms-container h2[b-654y8kq39f] { color: var(--lov-ink); line-height: 1.35; }
.terms-container p[b-654y8kq39f], .terms-container li[b-654y8kq39f] { color: var(--lov-muted); line-height: 1.75; }
.terms-container a[b-654y8kq39f] { color: var(--lov-green); text-decoration: underline; text-underline-offset: 3px; }
.terms-container h3[b-654y8kq39f] { color: var(--lov-ink); font-size: 1.2rem; line-height: 1.4; margin-block: 1.5rem .65rem; }
.legal-body li + li[b-654y8kq39f] { margin-top: .5rem; }
.app-layout[b-654y8kq39f] { width: 100%; max-width: none; margin: 0; }
.container-v3.terms-container[b-654y8kq39f] { width: calc(100% - 280px); max-width: none; margin: 0 0 0 280px; }
.container-v3.terms-container.sidebar-hidden[b-654y8kq39f] { width: 100%; margin-left: 0; }
@media (max-width: 1024px) {
.app-layout[b-654y8kq39f] { padding-top: 64px; }
.container-v3.terms-container[b-654y8kq39f] { width: 100%; margin: 0; }
}
/* /Components/Pages/ThemeExperience.razor.rz.scp.css */
/* ============================================================
ThemeExperience — main canvas
One continuous manuscript that grows downward.
============================================================ */
.experience-shell[b-mpbzjym3yo] {
display: flex;
flex-direction: row;
width: 100%;
height: 100vh;
height: 100dvh;
overflow: hidden;
position: relative;
background:
radial-gradient(circle at 50% 0%, rgba(255, 244, 227, 0.9) 0%, rgba(253, 248, 240, 0.36) 42%, rgba(253, 248, 240, 0) 76%),
linear-gradient(180deg, #fbf6ef 0%, #fdf8f0 100%);
}
.experience-shell[b-mpbzjym3yo]::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(circle at 82% 90%, rgba(232, 212, 186, 0.12) 0%, transparent 26%),
linear-gradient(180deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0) 14%);
}
.experience-main[b-mpbzjym3yo] {
--thread-scroll-progress: 0;
position: relative;
z-index: 1;
flex: 1 1 auto;
display: flex;
flex-direction: column;
align-items: center;
margin-left: 280px;
height: 100%;
overflow: hidden;
transition: margin-left 0.3s ease;
}
.sidebar-hidden .experience-main[b-mpbzjym3yo] {
margin-left: 0;
}
.sidebar-hidden .experience-surface[b-mpbzjym3yo] {
max-width: none;
}
[b-mpbzjym3yo] .experience-sidebar-toggle {
position: fixed;
top: 16px;
left: 16px;
z-index: 110;
display: inline-grid;
}
[b-mpbzjym3yo] .experience-sidebar-toggle.hidden {
display: none;
}
.experience-surface[b-mpbzjym3yo] {
width: 100%;
max-width: 1640px;
display: grid;
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 1fr) auto;
height: 100%;
min-height: 0;
padding: 0 clamp(1.25rem, 2.2vw, 2.25rem);
}
.experience-thread[b-mpbzjym3yo] {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
overscroll-behavior-y: contain;
scroll-padding-top: 2rem;
scroll-padding-bottom: 8rem;
display: flex;
justify-content: center;
scrollbar-width: none;
-ms-overflow-style: none;
}
.experience-thread[b-mpbzjym3yo]::-webkit-scrollbar {
display: none;
}
.experience-stage[b-mpbzjym3yo] {
width: min(100%, 1280px);
display: flex;
flex-direction: column;
gap: clamp(1.9rem, 3.8vh, 3rem);
padding: clamp(3rem, 7.5vh, 5rem) clamp(1rem, 1.8vw, 1.5rem) 3rem;
}
.experience-prelude[b-mpbzjym3yo] {
width: min(100%, 68ch);
margin: 0 auto;
}
.experience-messages[b-mpbzjym3yo] {
width: min(100%, 68ch);
margin: 0 auto;
display: flex;
flex-direction: column;
gap: clamp(2.3rem, 4.8vh, 3.8rem);
padding-bottom: 1rem;
}
/* When a keepsake quote card is shown as the surface overlay, mute prior
conversation messages so the keepsake is the sole point of focus.
Mirrors the dim/disable intent of the keepsake overlay state. */
.experience-messages.keepsake-overlay-open[b-mpbzjym3yo] {
opacity: 0.4;
pointer-events: none;
filter: saturate(0.85);
transition: opacity 200ms ease, filter 200ms ease;
}
.experience-composer-zone[b-mpbzjym3yo] {
width: min(100%, 1080px);
max-width: 100%;
box-sizing: border-box;
margin: 0 auto;
padding: 0 clamp(1rem, 1.6vw, 1.5rem) calc(1rem + env(safe-area-inset-bottom, 0px));
display: flex;
flex-direction: column;
align-items: center;
gap: 0.95rem;
}
.experience-composer-rail[b-mpbzjym3yo] {
width: min(100%, 840px);
max-width: 100%;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
gap: clamp(0.85rem, 2vw, 1.35rem);
}
.experience-composer-rail-line[b-mpbzjym3yo] {
flex: 1 1 auto;
max-width: 320px;
height: 1px;
background: linear-gradient(90deg, rgba(188, 152, 109, 0.05), rgba(188, 152, 109, 0.30), rgba(188, 152, 109, 0.05));
}
.experience-unavailable-message[b-mpbzjym3yo] {
width: min(100%, 720px);
box-sizing: border-box;
border: 1px solid rgba(191, 151, 117, 0.32);
border-radius: 14px;
background: rgba(255, 249, 243, 0.92);
color: #68463a;
font-size: 0.98rem;
line-height: 1.45;
text-align: center;
padding: 0.95rem 1.1rem;
box-shadow: 0 8px 24px rgba(85, 56, 38, 0.08);
}
.experience-suggestion-chips[b-mpbzjym3yo] {
width: min(100%, 860px);
max-width: 100%;
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.95rem 1rem;
padding: 0 0.5rem;
}
.experience-suggestion-chip[b-mpbzjym3yo] {
border: 1px solid rgba(163, 127, 96, 0.28);
border-radius: 999px;
background: rgba(248, 240, 229, 0.18);
color: rgba(90, 67, 48, 0.94);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.62rem;
padding: 0.88rem 1.65rem;
font-family: var(--font-serif);
font-size: clamp(1rem, 1.15vw, 1.1rem);
line-height: 1.1;
box-shadow: none;
transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease, transform 0.22s ease, opacity 0.22s ease;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.experience-suggestion-chip:hover:not(:disabled)[b-mpbzjym3yo] {
background: rgba(248, 240, 229, 0.32);
border-color: rgba(163, 127, 96, 0.46);
transform: translateY(-1px);
}
.experience-suggestion-chip:focus-visible[b-mpbzjym3yo] {
outline: 2px solid rgba(123, 90, 61, 0.22);
outline-offset: 3px;
}
.experience-suggestion-chip:disabled[b-mpbzjym3yo] {
opacity: 0.6;
}
.experience-suggestion-chip-adornment[b-mpbzjym3yo] {
font-size: 1.02em;
opacity: 0.8;
filter: sepia(0.18);
}
.experience-suggestion-chip-text[b-mpbzjym3yo] {
white-space: nowrap;
}
.experience-scroll-to-latest[b-mpbzjym3yo] {
opacity: 0;
pointer-events: none;
transform: translateY(10px);
width: 56px;
height: 56px;
border-radius: 50%;
border: 1px solid rgba(196, 165, 132, 0.22);
background: rgba(255, 250, 243, 0.96);
color: #7b5a3d;
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow:
0 12px 24px rgba(109, 81, 52, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.86);
transition: opacity 0.22s ease, transform 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.experience-scroll-to-latest svg[b-mpbzjym3yo] {
width: 24px;
height: 24px;
}
.experience-main[data-thread-away-from-bottom="true"] .experience-scroll-to-latest[b-mpbzjym3yo] {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}
.experience-scroll-to-latest:hover[b-mpbzjym3yo] {
background: rgba(255, 255, 255, 0.98);
box-shadow:
0 16px 28px rgba(109, 81, 52, 0.14),
inset 0 1px 0 rgba(255, 255, 255, 0.92);
}
.experience-scroll-to-latest:active[b-mpbzjym3yo] {
transform: translateY(2px) scale(0.96);
}
.experience-scroll-to-latest:focus-visible[b-mpbzjym3yo] {
outline: 2px solid rgba(123, 90, 61, 0.28);
outline-offset: 3px;
}
.experience-reader-overlay[b-mpbzjym3yo] {
position: fixed;
inset: 0;
z-index: 95;
display: flex;
align-items: center;
justify-content: center;
padding: clamp(1rem, 3vw, 2.5rem);
background:
radial-gradient(circle at 50% 18%, rgba(255, 245, 229, 0.24) 0%, rgba(255, 245, 229, 0.08) 32%, rgba(255, 245, 229, 0) 62%),
rgba(54, 40, 28, 0.28);
-webkit-backdrop-filter: blur(14px) saturate(0.92);
backdrop-filter: blur(14px) saturate(0.92);
outline: none;
}
.experience-reader-panel[b-mpbzjym3yo] {
position: relative;
display: flex;
flex-direction: column;
width: min(100%, 46rem);
max-height: min(86dvh, 48rem);
overflow: auto;
padding: clamp(1.7rem, 3vw, 2.45rem);
border-radius: 24px;
background:
radial-gradient(circle at 16% 12%, rgba(255, 244, 224, 0.48) 0%, rgba(255, 244, 224, 0) 32%),
linear-gradient(180deg, rgba(255, 251, 245, 0.96) 0%, rgba(248, 239, 227, 0.94) 100%);
border: 1px solid rgba(196, 157, 118, 0.28);
box-shadow:
0 34px 92px rgba(62, 43, 27, 0.22),
0 12px 28px rgba(112, 80, 52, 0.10),
inset 0 1px 0 rgba(255, 255, 255, 0.78);
color: #34281f;
scrollbar-width: thin;
scrollbar-color: rgba(166, 128, 91, 0.38) transparent;
}
.experience-reader-close[b-mpbzjym3yo] {
position: absolute;
top: 0.95rem;
right: 1rem;
width: 2.35rem;
height: 2.35rem;
border: 1px solid rgba(187, 148, 111, 0.2);
border-radius: 50%;
background: rgba(255, 251, 245, 0.72);
color: #80634c;
font-size: 1.45rem;
line-height: 1;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.experience-reader-close:hover[b-mpbzjym3yo],
.experience-reader-close:focus-visible[b-mpbzjym3yo] {
background: rgba(255, 255, 255, 0.94);
color: #5e4635;
transform: translateY(-1px);
outline: none;
}
.experience-reader-header[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.8rem;
padding-right: 2.8rem;
margin-bottom: 1.25rem;
}
.experience-reader-avatar[b-mpbzjym3yo] {
width: 2.6rem;
height: 2.6rem;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(218, 195, 170, 0.86);
box-shadow: 0 10px 22px rgba(92, 65, 41, 0.12);
}
.experience-reader-meta[b-mpbzjym3yo] {
display: flex;
flex-direction: column;
gap: 0.12rem;
min-width: 0;
}
.experience-reader-badge[b-mpbzjym3yo] {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin-bottom: 0.16rem;
padding: 0.34rem 0.72rem;
border-radius: 999px;
background: rgba(252, 237, 229, 0.9);
color: #b87558;
font-family: var(--font-sans);
font-size: 0.74rem;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
text-transform: uppercase;
}
.experience-reader-name[b-mpbzjym3yo] {
font-family: var(--font-serif);
font-size: 1rem;
color: #5d4736;
}
.experience-reader-time[b-mpbzjym3yo] {
font-family: var(--font-sans);
font-size: 0.78rem;
color: rgba(116, 88, 64, 0.72);
}
.experience-reader-title[b-mpbzjym3yo] {
margin: -0.25rem 0 1rem;
padding-right: 2.8rem;
color: #3f3127;
font-family: var(--font-serif);
font-size: 1.95rem;
font-weight: 760;
line-height: 1.08;
}
.experience-reader-content[b-mpbzjym3yo] {
font-family: var(--font-serif);
font-size: clamp(1.08rem, 1vw + 0.84rem, 1.24rem);
line-height: 1.95;
color: #2f261f;
}
.experience-reader-content[b-mpbzjym3yo] p {
margin: 0 0 1.05em;
}
.friendly-reader-turn + .friendly-reader-turn[b-mpbzjym3yo] {
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--lov-line);
}
.friendly-reader-close-bar[b-mpbzjym3yo] {
position: sticky;
top: 0;
display: flex;
justify-content: flex-end;
flex-shrink: 0;
z-index: 2;
background: var(--lov-paper);
padding-block: .25rem;
}
.friendly-thread-reader .experience-reader-close[b-mpbzjym3yo] {
position: static;
flex-shrink: 0;
}
.friendly-reader-turn[b-mpbzjym3yo] {
overflow-wrap: anywhere;
}
.friendly-reader-turn-meta[b-mpbzjym3yo] {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.4rem 0.8rem;
margin-bottom: 0.65rem;
}
.friendly-reader-user[b-mpbzjym3yo] {
padding-inline-start: 1rem;
border-inline-start: 2px solid var(--lov-line);
}
.friendly-reader-user-text[b-mpbzjym3yo] {
white-space: pre-wrap;
}
.experience-reader-content[b-mpbzjym3yo] p:last-child {
margin-bottom: 0;
}
.experience-reader-content[b-mpbzjym3yo] em {
color: #6d5846;
}
.experience-reader-content[b-mpbzjym3yo] strong {
color: #463428;
}
.experience-reader-content[b-mpbzjym3yo] a {
color: #0b6fae;
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.12em;
cursor: pointer;
pointer-events: auto;
touch-action: manipulation;
-webkit-tap-highlight-color: rgba(11, 111, 174, 0.18);
}
.experience-reader-content[b-mpbzjym3yo] a:hover,
.experience-reader-content[b-mpbzjym3yo] a:focus-visible {
color: #084f7c;
}
.experience-reader-actions[b-mpbzjym3yo] {
position: sticky;
bottom: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 1.45rem;
padding-top: 1rem;
border-top: 1px solid rgba(196, 157, 118, 0.22);
background: linear-gradient(180deg, rgba(248, 239, 227, 0) 0%, rgba(248, 239, 227, 0.96) 28%, rgba(248, 239, 227, 0.98) 100%);
}
.experience-reader-action[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
min-height: 2.85rem;
padding: 0.82rem 1.35rem;
border-radius: 999px;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
line-height: 1.1;
letter-spacing: 0;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.experience-reader-action.primary[b-mpbzjym3yo] {
border: 1px solid rgba(166, 108, 64, 0.32);
background: linear-gradient(180deg, rgba(235, 172, 132, 0.35) 0%, rgba(244, 201, 173, 0.72) 100%);
color: #68412f;
box-shadow: 0 10px 24px rgba(109, 73, 47, 0.12);
}
.experience-reader-action.secondary[b-mpbzjym3yo] {
border: 1px solid rgba(163, 127, 96, 0.28);
background: rgba(255, 250, 243, 0.5);
color: rgba(90, 67, 48, 0.94);
box-shadow: none;
}
.experience-reader-action:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
transform: translateY(-1px);
outline: none;
}
.experience-reader-action.primary:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action.primary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(235, 172, 132, 0.48) 0%, rgba(244, 201, 173, 0.86) 100%);
box-shadow: 0 13px 28px rgba(109, 73, 47, 0.16);
}
.experience-reader-action.secondary:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action.secondary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
background: rgba(255, 250, 243, 0.82);
border-color: rgba(163, 127, 96, 0.46);
}
.experience-reader-action:disabled[b-mpbzjym3yo] {
cursor: default;
opacity: 0.62;
}
.experience-reader-world-status[b-mpbzjym3yo] {
align-self: center;
margin-top: 1.3rem;
outline: none;
}
.experience-reader-world-actions[b-mpbzjym3yo] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0.72rem;
width: 100%;
margin-top: 1.35rem;
padding-top: 1.05rem;
border-top: 1px solid rgba(196, 157, 118, 0.22);
}
.experience-reader-world-action[b-mpbzjym3yo] {
width: 100%;
min-height: 2.85rem;
overflow-wrap: anywhere;
text-align: center;
}
.experience-reader-continuation[b-mpbzjym3yo] {
margin-top: clamp(2.4rem, 6vw, 4.5rem);
padding: clamp(1.35rem, 4vw, 2.15rem);
border: 1px solid rgba(158, 116, 78, 0.24);
border-radius: 20px;
background:
linear-gradient(145deg, rgba(255, 253, 248, 0.88), rgba(244, 229, 207, 0.7));
box-shadow:
0 20px 45px rgba(85, 56, 33, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.76);
}
.experience-reader-continuation-heading[b-mpbzjym3yo] {
max-width: 34rem;
}
.experience-reader-continuation-kicker[b-mpbzjym3yo] {
display: block;
color: #a45f39;
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 760;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.experience-reader-continuation-heading h2[b-mpbzjym3yo] {
margin: 0.5rem 0 0.5rem;
color: #3b2d23;
font-family: var(--font-serif);
font-size: clamp(1.65rem, 2vw + 0.9rem, 2.45rem);
font-weight: 590;
line-height: 1.08;
letter-spacing: -0.02em;
}
.experience-reader-continuation-heading p[b-mpbzjym3yo] {
margin: 0;
color: #806952;
font-family: var(--font-sans);
font-size: 0.92rem;
line-height: 1.55;
}
.experience-reader-continuation-actions[b-mpbzjym3yo] {
display: grid;
grid-template-columns: minmax(0, 1fr);
margin-top: 1.45rem;
border-top: 1px solid rgba(145, 103, 66, 0.22);
}
.experience-reader-action.experience-reader-continuation-action[b-mpbzjym3yo] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
width: 100%;
min-height: 3.6rem;
padding: 0.9rem 0.15rem;
overflow-wrap: anywhere;
border: 0;
border-bottom: 1px solid rgba(145, 103, 66, 0.22);
border-radius: 0;
background: transparent;
color: #52392a;
box-shadow: none;
text-align: left;
}
.experience-reader-action.experience-reader-continuation-action:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action.experience-reader-continuation-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
transform: none;
background: rgba(176, 113, 70, 0.06);
box-shadow: none;
}
.experience-reader-continuation-arrow[b-mpbzjym3yo] {
color: #a45f39;
font-family: var(--font-sans);
font-size: 1.12rem;
}
.experience-reader-continuation-write[b-mpbzjym3yo] {
margin-top: 1.55rem;
}
.experience-reader-continuation-write-heading[b-mpbzjym3yo] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem 1.5rem;
margin-bottom: 0.7rem;
}
.experience-reader-continuation-write-heading > span[b-mpbzjym3yo] {
color: #5b4030;
font-family: var(--font-serif);
font-size: 1.02rem;
font-weight: 700;
}
.experience-reader-continuation-write-heading small[b-mpbzjym3yo] {
color: #806952;
font-family: var(--font-sans);
font-size: 0.72rem;
}
.experience-reader-world-status:focus-visible[b-mpbzjym3yo],
.experience-reader-content:focus-visible[b-mpbzjym3yo] {
outline: 2px solid rgba(166, 108, 64, 0.5);
outline-offset: 5px;
}
.experience-reader-panel.living-book-reader[b-mpbzjym3yo] {
--living-book-ink: #30251c;
--living-book-muted: #806952;
--living-book-accent: #a45f39;
--living-book-rule: rgba(145, 103, 66, 0.22);
width: min(100%, 68rem);
max-height: min(94dvh, 64rem);
padding: 0;
border-radius: 18px;
background:
radial-gradient(circle at 12% 4%, rgba(224, 182, 119, 0.14), transparent 28%),
radial-gradient(circle at 88% 68%, rgba(192, 132, 86, 0.07), transparent 34%),
linear-gradient(90deg, rgba(132, 88, 51, 0.025) 1px, transparent 1px),
#fbf5e9;
background-size: auto, auto, 5px 5px, auto;
color: var(--living-book-ink);
box-shadow:
0 42px 110px rgba(48, 31, 18, 0.28),
0 1px 0 rgba(255, 255, 255, 0.9) inset;
}
.living-book-header[b-mpbzjym3yo] {
position: sticky;
top: 0;
z-index: 4;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
min-height: 5.25rem;
padding: 0.9rem clamp(1.1rem, 3vw, 2.4rem);
border-bottom: 1px solid var(--living-book-rule);
background: rgba(251, 245, 233, 0.92);
-webkit-backdrop-filter: blur(16px) saturate(0.9);
backdrop-filter: blur(16px) saturate(0.9);
transform: translateY(0);
opacity: 1;
transition:
transform 180ms ease,
opacity 150ms ease,
box-shadow 180ms ease,
background-color 180ms ease;
will-change: transform;
}
.living-book-header.living-book-header-compact[b-mpbzjym3yo] {
min-height: 3.75rem;
padding-block: 0.48rem;
background: rgba(251, 245, 233, 0.96);
box-shadow: 0 10px 28px rgba(75, 49, 29, 0.08);
}
.living-book-header.living-book-header-hidden[b-mpbzjym3yo] {
transform: translateY(calc(-100% - 1px));
opacity: 0;
pointer-events: none;
}
.living-book-identity[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.85rem;
min-width: 0;
}
.living-book-avatar[b-mpbzjym3yo] {
flex: 0 0 auto;
width: 2.7rem;
height: 2.7rem;
border-radius: 50%;
object-fit: cover;
border: 1px solid rgba(145, 103, 66, 0.24);
box-shadow: 0 8px 18px rgba(75, 49, 29, 0.1);
transition: width 180ms ease, height 180ms ease;
}
.living-book-overline[b-mpbzjym3yo] {
display: block;
margin-bottom: 0.18rem;
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.69rem;
font-weight: 760;
line-height: 1;
letter-spacing: 0.17em;
text-transform: uppercase;
transition: opacity 120ms ease;
}
.living-book-title[b-mpbzjym3yo] {
max-width: 42rem;
margin: 0;
overflow: hidden;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.08rem, 1.4vw, 1.35rem);
font-weight: 680;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.living-book-header-compact .living-book-avatar[b-mpbzjym3yo] {
width: 2.2rem;
height: 2.2rem;
}
.living-book-header-compact .living-book-overline[b-mpbzjym3yo] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
opacity: 0;
}
.living-book-header-compact .living-book-title[b-mpbzjym3yo] {
font-size: 1rem;
}
.experience-reader-close.living-book-close[b-mpbzjym3yo] {
position: static;
flex: 0 0 auto;
width: 2.75rem;
height: 2.75rem;
background: rgba(255, 252, 246, 0.76);
}
.living-book-manuscript[b-mpbzjym3yo] {
width: min(100%, 48rem);
margin: 0 auto;
padding: clamp(2.25rem, 5vw, 4.8rem) clamp(1.35rem, 5vw, 4.6rem) clamp(2.5rem, 6vw, 5rem);
outline: none;
}
.living-book-opening-mark[b-mpbzjym3yo] {
display: grid;
grid-template-columns: minmax(2rem, 1fr) auto minmax(2rem, 1fr);
align-items: center;
gap: 0.75rem;
margin: 0 auto clamp(2.25rem, 5vw, 3.8rem);
color: rgba(164, 95, 57, 0.7);
font-size: 0.7rem;
}
.living-book-opening-mark span:first-child[b-mpbzjym3yo],
.living-book-opening-mark span:last-child[b-mpbzjym3yo] {
height: 1px;
background: linear-gradient(90deg, transparent, var(--living-book-rule));
}
.living-book-opening-mark span:last-child[b-mpbzjym3yo] {
background: linear-gradient(90deg, var(--living-book-rule), transparent);
}
.living-book-passage[b-mpbzjym3yo] {
position: relative;
margin: 0;
}
.living-book-passage + .living-book-passage[b-mpbzjym3yo] {
margin-top: clamp(2.4rem, 5vw, 4rem);
padding-top: clamp(2.1rem, 4vw, 3.2rem);
border-top: 1px solid var(--living-book-rule);
}
.living-book-passage-label[b-mpbzjym3yo],
.living-book-choice-label[b-mpbzjym3yo] {
display: block;
margin-bottom: 1rem;
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 760;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.living-book-prose[b-mpbzjym3yo] {
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.17rem, 0.72vw + 0.96rem, 1.4rem);
line-height: 1.82;
text-wrap: pretty;
}
.living-book-prose[b-mpbzjym3yo] p {
margin: 0 0 1.25em;
}
.living-book-prose[b-mpbzjym3yo] p:last-child {
margin-bottom: 0;
}
.living-book-prose[b-mpbzjym3yo] em {
color: #705846;
}
.living-book-prose[b-mpbzjym3yo] strong {
color: #3f2c20;
font-weight: 760;
}
.living-book-prose[b-mpbzjym3yo] a {
color: #8d4f31;
font-weight: 700;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.living-book-passage-opening .living-book-prose[b-mpbzjym3yo] p:first-child::first-letter {
float: left;
margin: 0.08em 0.12em 0 0;
color: var(--living-book-accent);
font-size: 3.45em;
font-weight: 560;
line-height: 0.78;
}
.living-book-choice[b-mpbzjym3yo] {
width: min(100%, 35rem);
margin: clamp(2.2rem, 4vw, 3.2rem) auto;
padding: 1.15rem clamp(1.2rem, 4vw, 2.1rem);
border-block: 1px solid var(--living-book-rule);
text-align: center;
}
.experience-choice-divider[b-mpbzjym3yo] {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 0.8rem;
width: 100%;
margin: 0.15rem 0;
color: rgba(112, 82, 61, 0.78);
font-family: var(--font-sans);
font-size: 0.72rem;
font-weight: 650;
letter-spacing: 0.11em;
text-transform: uppercase;
}
.experience-choice-divider[b-mpbzjym3yo]::before,
.experience-choice-divider[b-mpbzjym3yo]::after {
content: "";
flex: 1 1 auto;
height: 1px;
background: rgba(196, 157, 118, 0.28);
}
.suggestion-choice-divider[b-mpbzjym3yo] {
flex: 0 0 100%;
max-width: 34rem;
margin-inline: auto;
}
.living-book-choice-label[b-mpbzjym3yo] {
margin-bottom: 0.55rem;
}
.living-book-choice p[b-mpbzjym3yo] {
margin: 0;
color: #705744;
font-family: var(--font-serif);
font-size: clamp(1rem, 0.4vw + 0.9rem, 1.14rem);
font-style: italic;
line-height: 1.55;
}
.experience-reader-world-status.living-book-status[b-mpbzjym3yo] {
width: fit-content;
max-width: 100%;
margin: clamp(2.5rem, 5vw, 4rem) auto 0;
}
.living-book-narration-start[b-mpbzjym3yo] {
width: 100%;
height: 1px;
pointer-events: none;
}
.living-book-next-page[b-mpbzjym3yo] {
margin-top: clamp(3.2rem, 7vw, 6rem);
padding: clamp(1.6rem, 4vw, 2.6rem);
border: 1px solid rgba(145, 103, 66, 0.22);
border-radius: 20px;
background:
linear-gradient(145deg, rgba(255, 253, 248, 0.82), rgba(244, 229, 207, 0.62));
box-shadow:
0 20px 45px rgba(85, 56, 33, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.74);
}
.living-book-next-heading[b-mpbzjym3yo] {
max-width: 35rem;
}
.living-book-next-kicker[b-mpbzjym3yo] {
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 760;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.living-book-next-heading h2[b-mpbzjym3yo] {
margin: 0.55rem 0 0.55rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.7rem, 2vw + 1rem, 2.8rem);
font-weight: 570;
line-height: 1.04;
letter-spacing: -0.025em;
}
.living-book-next-heading p[b-mpbzjym3yo] {
margin: 0;
color: var(--living-book-muted);
font-family: var(--font-sans);
font-size: 0.92rem;
line-height: 1.55;
}
.experience-reader-world-actions.living-book-actions[b-mpbzjym3yo] {
grid-template-columns: minmax(0, 1fr);
gap: 0;
margin-top: 1.55rem;
padding: 0;
border: 0;
border-top: 1px solid var(--living-book-rule);
}
.experience-reader-action.living-book-action[b-mpbzjym3yo] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1rem;
min-height: 3.7rem;
padding: 0.9rem 0.1rem;
border: 0;
border-bottom: 1px solid var(--living-book-rule);
border-radius: 0;
background: transparent;
color: #52392a;
box-shadow: none;
text-align: left;
}
.experience-reader-action.living-book-action:hover:not(:disabled)[b-mpbzjym3yo],
.experience-reader-action.living-book-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
transform: none;
background: rgba(176, 113, 70, 0.06);
box-shadow: none;
}
.living-book-action-arrow[b-mpbzjym3yo] {
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 1.12rem;
}
.living-book-choice-divider[b-mpbzjym3yo] {
margin: 0.9rem 0 0.35rem;
color: var(--living-book-muted);
}
.experience-reader-action.living-book-action.exploration[b-mpbzjym3yo] {
color: rgba(82, 57, 42, 0.82);
font-weight: 500;
}
.living-book-write[b-mpbzjym3yo] {
margin-top: 1.7rem;
}
.living-book-write-heading[b-mpbzjym3yo] {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem 1.5rem;
margin-bottom: 0.7rem;
}
.living-book-write-heading > span[b-mpbzjym3yo] {
color: #5b4030;
font-family: var(--font-serif);
font-size: 1.02rem;
font-weight: 700;
}
.living-book-write-heading small[b-mpbzjym3yo] {
color: var(--living-book-muted);
font-family: var(--font-sans);
font-size: 0.72rem;
}
.living-book-edition[b-mpbzjym3yo] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 1rem;
margin-top: 2rem;
padding-top: 1.8rem;
border-top: 1px solid var(--living-book-rule);
}
.living-book-edition-mark[b-mpbzjym3yo] {
display: grid;
place-items: center;
width: 2.7rem;
height: 2.7rem;
border: 1px solid rgba(171, 111, 70, 0.26);
border-radius: 50%;
color: var(--living-book-accent);
background: rgba(255, 251, 244, 0.7);
font-family: var(--font-serif);
font-size: 1.15rem;
}
.living-book-edition-copy[b-mpbzjym3yo] {
min-width: 0;
}
.living-book-edition-kicker[b-mpbzjym3yo] {
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.64rem;
font-weight: 760;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.living-book-edition h3[b-mpbzjym3yo] {
margin: 0.4rem 0 0.45rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.25rem, 1vw + 1rem, 1.65rem);
font-weight: 620;
line-height: 1.12;
}
.living-book-edition p[b-mpbzjym3yo] {
max-width: 39rem;
margin: 0;
color: var(--living-book-muted);
font-family: var(--font-sans);
font-size: 0.84rem;
line-height: 1.55;
}
.living-book-edition .living-book-edition-error[b-mpbzjym3yo] {
margin-top: 0.8rem;
color: #8a3f32;
}
.living-book-edition-button[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
gap: 0.65rem;
min-height: 2.85rem;
margin-top: 1rem;
padding: 0.7rem 1.15rem;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.82rem;
font-weight: 730;
}
.living-book-edition-button[b-mpbzjym3yo] {
border: 1px solid #71462f;
color: #fffaf3;
background: #71462f;
text-decoration: none;
cursor: pointer;
transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.living-book-edition-button:hover:not(:disabled)[b-mpbzjym3yo],
.living-book-edition-button:focus-visible:not(:disabled)[b-mpbzjym3yo] {
transform: translateY(-1px);
background: #5d3826;
}
.living-book-edition-button:disabled[b-mpbzjym3yo] {
cursor: default;
opacity: 0.58;
}
.living-book-edition-saved-state[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.65rem;
margin-top: 1rem;
color: #50694a;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 730;
}
.living-book-edition-saved-icon[b-mpbzjym3yo] {
display: grid;
place-items: center;
width: 1.65rem;
height: 1.65rem;
flex: 0 0 auto;
border: 1px solid rgba(82, 112, 72, 0.24);
border-radius: 50%;
background: rgba(239, 246, 233, 0.76);
}
.living-book-edition-continued[b-mpbzjym3yo] {
max-width: 39rem;
margin-top: 1.25rem;
padding: clamp(1rem, 3vw, 1.35rem);
border: 1px solid rgba(181, 132, 62, 0.28);
border-radius: 0.95rem;
background:
linear-gradient(135deg, rgba(249, 231, 189, 0.48), rgba(255, 251, 244, 0.72)),
rgba(255, 251, 244, 0.75);
box-shadow: 0 0.8rem 2rem rgba(95, 67, 38, 0.055);
}
.living-book-edition-continued h4[b-mpbzjym3yo] {
margin: 0.35rem 0 0.4rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.08rem, 0.8vw + 0.9rem, 1.35rem);
line-height: 1.15;
}
.living-book-edition-continued > small[b-mpbzjym3yo] {
display: block;
margin-top: 0.6rem;
color: var(--living-book-muted);
font-family: var(--font-sans);
font-size: 0.68rem;
}
.living-book-edition-actions[b-mpbzjym3yo] {
display: grid;
max-width: 39rem;
margin-top: 1.15rem;
border-top: 1px solid var(--living-book-rule);
}
.living-book-edition-action[b-mpbzjym3yo] {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 0.85rem;
width: 100%;
min-height: 4rem;
padding: 0.78rem 0.2rem;
border: 0;
border-bottom: 1px solid var(--living-book-rule);
color: var(--living-book-ink);
background: transparent;
text-align: left;
cursor: pointer;
transition: color 0.18s ease, padding 0.18s ease, background 0.18s ease;
}
.living-book-edition-action:hover:not(:disabled)[b-mpbzjym3yo],
.living-book-edition-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
padding-inline: 0.7rem;
color: #71462f;
background: rgba(241, 225, 207, 0.3);
}
.living-book-edition-action:disabled[b-mpbzjym3yo] {
cursor: default;
opacity: 0.58;
}
.living-book-edition-action-icon[b-mpbzjym3yo] {
display: grid;
place-items: center;
width: 2.15rem;
height: 2.15rem;
border: 1px solid rgba(171, 111, 70, 0.2);
border-radius: 50%;
color: var(--living-book-accent);
background: rgba(255, 251, 244, 0.76);
font-family: var(--font-serif);
font-size: 0.95rem;
}
.living-book-edition-action > span:nth-child(2)[b-mpbzjym3yo] {
display: grid;
gap: 0.16rem;
}
.living-book-edition-action strong[b-mpbzjym3yo] {
font-family: var(--font-serif);
font-size: 0.9rem;
font-weight: 660;
}
.living-book-edition-action small[b-mpbzjym3yo] {
color: var(--living-book-muted);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 480;
line-height: 1.4;
}
.living-book-edition-action-arrow[b-mpbzjym3yo] {
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.68rem;
font-weight: 780;
letter-spacing: 0.04em;
}
.living-book-polished[b-mpbzjym3yo] {
max-width: 39rem;
margin-top: 1.6rem;
padding: clamp(1.15rem, 3vw, 1.65rem);
border: 1px solid rgba(171, 111, 70, 0.2);
border-radius: 1.1rem;
background:
radial-gradient(circle at 100% 0, rgba(224, 181, 99, 0.12), transparent 38%),
rgba(255, 251, 244, 0.72);
box-shadow: 0 1rem 2.4rem rgba(70, 49, 36, 0.055);
}
.living-book-polished h4[b-mpbzjym3yo] {
margin: 0.35rem 0 0.4rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.1rem, 0.8vw + 0.9rem, 1.38rem);
line-height: 1.14;
}
.living-book-polished-ready[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
color: #50694a;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 730;
}
.living-book-polished-progress[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.85rem;
margin-top: 1rem;
padding: 0.9rem 1rem;
border-radius: 0.8rem;
color: #71462f;
background: rgba(241, 225, 207, 0.42);
}
.living-book-polished-progress > span:last-child[b-mpbzjym3yo] {
display: grid;
gap: 0.16rem;
}
.living-book-polished-progress strong[b-mpbzjym3yo],
.living-book-polished-progress small[b-mpbzjym3yo] {
font-family: var(--font-sans);
}
.living-book-polished-progress strong[b-mpbzjym3yo] {
font-size: 0.78rem;
}
.living-book-polished-progress small[b-mpbzjym3yo] {
color: var(--living-book-muted);
font-size: 0.67rem;
font-weight: 480;
line-height: 1.4;
}
.living-book-edition-revision-picker[b-mpbzjym3yo] {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 0.75rem;
margin-top: 1.1rem;
padding-top: 1rem;
border-top: 1px solid var(--living-book-rule);
color: var(--living-book-muted);
font-family: var(--font-sans);
font-size: 0.7rem;
font-weight: 680;
}
.living-book-edition-revision-picker select[b-mpbzjym3yo] {
min-width: 0;
padding: 0.6rem 2rem 0.6rem 0.75rem;
border: 1px solid rgba(171, 111, 70, 0.24);
border-radius: 0.65rem;
color: var(--living-book-ink);
background: rgba(255, 252, 246, 0.9);
font: inherit;
}
.living-book-polished-manuscript[b-mpbzjym3yo] {
max-width: 39rem;
margin-top: 1.65rem;
padding: clamp(1.4rem, 4vw, 2.4rem);
border: 1px solid rgba(171, 111, 70, 0.18);
border-radius: 0.2rem 1.3rem 1.3rem 0.2rem;
background:
linear-gradient(90deg, rgba(171, 111, 70, 0.08) 0, rgba(171, 111, 70, 0.025) 0.38rem, transparent 0.38rem),
rgba(255, 252, 246, 0.78);
box-shadow: 0 1.1rem 2.8rem rgba(70, 49, 36, 0.07);
}
.living-book-polished-manuscript header > span[b-mpbzjym3yo],
.living-book-polished-manuscript article > span[b-mpbzjym3yo] {
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.61rem;
font-weight: 760;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.living-book-polished-manuscript h4[b-mpbzjym3yo] {
margin: 0.35rem 0 0.35rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.45rem, 1.5vw + 1rem, 2rem);
line-height: 1.08;
}
.living-book-polished-manuscript header[b-mpbzjym3yo] {
padding-bottom: 1.4rem;
border-bottom: 1px solid var(--living-book-rule);
}
.living-book-polished-manuscript article[b-mpbzjym3yo] {
padding-top: 2rem;
}
.living-book-polished-manuscript h5[b-mpbzjym3yo] {
margin: 0.35rem 0 1.1rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.2rem, 1vw + 0.95rem, 1.55rem);
line-height: 1.12;
}
.living-book-polished-manuscript article p[b-mpbzjym3yo],
.living-book-polished-manuscript aside p[b-mpbzjym3yo] {
max-width: none;
margin-top: 0.9rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(0.92rem, 0.32vw + 0.84rem, 1.02rem);
line-height: 1.78;
}
.living-book-polished-manuscript aside[b-mpbzjym3yo] {
margin-top: 2rem;
padding-top: 1.3rem;
border-top: 1px solid var(--living-book-rule);
}
.living-book-polished-manuscript aside > strong[b-mpbzjym3yo] {
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.65rem;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.living-book-edition-source[b-mpbzjym3yo] {
position: relative;
max-width: 39rem;
margin-top: 1.65rem;
padding: clamp(1.35rem, 4vw, 2.2rem) clamp(1rem, 4.5vw, 2.5rem);
border: 1px solid rgba(171, 111, 70, 0.17);
border-radius: 0.2rem 1.25rem 1.25rem 0.2rem;
background:
linear-gradient(90deg, rgba(171, 111, 70, 0.08) 0, rgba(171, 111, 70, 0.025) 0.38rem, transparent 0.38rem),
rgba(255, 252, 246, 0.72);
box-shadow: 0 1.1rem 2.8rem rgba(70, 49, 36, 0.07);
}
.living-book-edition-source > header > span[b-mpbzjym3yo],
.living-book-edition-source-turn > span[b-mpbzjym3yo] {
color: var(--living-book-accent);
font-family: var(--font-sans);
font-size: 0.61rem;
font-weight: 760;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.living-book-edition-source h4[b-mpbzjym3yo] {
margin: 0.35rem 0 0.35rem;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(1.1rem, 0.8vw + 0.9rem, 1.35rem);
line-height: 1.15;
}
.living-book-edition-source > header[b-mpbzjym3yo] {
padding-bottom: 1.25rem;
border-bottom: 1px solid var(--living-book-rule);
}
.living-book-edition-source > header > p[b-mpbzjym3yo] {
max-width: 31rem;
}
.living-book-edition-source > header > small[b-mpbzjym3yo] {
display: block;
margin-top: 0.65rem;
color: #967b68;
font-family: var(--font-sans);
font-size: 0.64rem;
}
.living-book-edition-source-turns[b-mpbzjym3yo] {
margin-top: 1.35rem;
}
.living-book-edition-source-turn[b-mpbzjym3yo] {
margin: 0;
}
.living-book-edition-source-turn.is-traveller[b-mpbzjym3yo] {
margin: 1.45rem 0 1.2rem clamp(0.5rem, 4vw, 2.4rem);
padding-left: 1rem;
border-left: 2px solid rgba(171, 111, 70, 0.38);
}
.living-book-edition-source-turn p[b-mpbzjym3yo] {
max-width: none;
margin: 0.5rem 0 0;
color: var(--living-book-ink);
font-family: var(--font-serif);
font-size: clamp(0.9rem, 0.32vw + 0.82rem, 1rem);
line-height: 1.78;
}
.living-book-edition-source-turn p + p[b-mpbzjym3yo] {
margin-top: 0.95rem;
}
.living-book-edition-source-turn.is-traveller p[b-mpbzjym3yo] {
color: #6b4c38;
font-style: italic;
line-height: 1.55;
}
.living-book-edition-source-turn.is-world > span[b-mpbzjym3yo] {
display: none;
}
.living-book-edition-copy > small[b-mpbzjym3yo] {
display: block;
margin-top: 0.65rem;
color: var(--living-book-muted);
font-family: var(--font-sans);
font-size: 0.7rem;
}
.living-book-edition-spinner[b-mpbzjym3yo] {
width: 0.9rem;
height: 0.9rem;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: living-book-edition-spin-b-mpbzjym3yo 0.8s linear infinite;
}
@keyframes living-book-edition-spin-b-mpbzjym3yo {
to { transform: rotate(360deg); }
}
@media (max-width: 560px) {
.living-book-edition[b-mpbzjym3yo] {
grid-template-columns: 1fr;
}
.living-book-edition-mark[b-mpbzjym3yo] {
width: 2.35rem;
height: 2.35rem;
}
.living-book-edition-button[b-mpbzjym3yo],
.living-book-edition-actions[b-mpbzjym3yo] {
width: 100%;
}
.living-book-edition-button[b-mpbzjym3yo] {
justify-content: center;
}
.living-book-edition-source-turn.is-traveller[b-mpbzjym3yo] {
margin-left: 0.25rem;
}
.living-book-edition-source[b-mpbzjym3yo] {
margin-inline: -0.25rem;
padding-inline: 1rem 0.9rem;
}
.living-book-polished[b-mpbzjym3yo],
.living-book-polished-manuscript[b-mpbzjym3yo] {
margin-inline: -0.25rem;
}
.living-book-edition-continued[b-mpbzjym3yo] {
margin-inline: -0.25rem;
}
.living-book-edition-revision-picker[b-mpbzjym3yo] {
grid-template-columns: 1fr;
}
.living-book-edition-action:hover:not(:disabled)[b-mpbzjym3yo],
.living-book-edition-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
padding-inline: 0.35rem;
}
}
@media (prefers-reduced-motion: reduce) {
.living-book-edition-spinner[b-mpbzjym3yo] {
animation-duration: 1.8s;
}
}
@media (max-width: 768px) {
.experience-composer-zone[b-mpbzjym3yo] {
gap: 0.8rem;
}
.experience-composer-rail[b-mpbzjym3yo] {
gap: 0.75rem;
}
.experience-suggestion-chips[b-mpbzjym3yo] {
width: 100%;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0.7rem;
padding: 0 1rem 0.2rem;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
touch-action: pan-x;
scroll-snap-type: x proximity;
}
.experience-composer-zone.is-composer-writing .experience-suggestion-chips[b-mpbzjym3yo] {
display: none;
}
.experience-suggestion-chip[b-mpbzjym3yo] {
flex: 0 0 auto;
max-width: min(82vw, 320px);
padding: 0.78rem 1.2rem;
font-size: 0.96rem;
scroll-snap-align: start;
justify-content: flex-start;
}
.experience-suggestion-chip-text[b-mpbzjym3yo] {
white-space: normal;
text-align: left;
line-height: 1.25;
overflow-wrap: anywhere;
text-wrap: balance;
}
.suggestion-choice-divider[b-mpbzjym3yo] {
display: none;
}
.experience-suggestion-chips[b-mpbzjym3yo]::-webkit-scrollbar {
display: none;
}
.experience-scroll-to-latest[b-mpbzjym3yo] {
width: 48px;
height: 48px;
}
.experience-scroll-to-latest svg[b-mpbzjym3yo] {
width: 20px;
height: 20px;
}
}
.experience-not-found[b-mpbzjym3yo] {
display: flex;
align-items: center;
justify-content: center;
min-height: 60dvh;
font-family: var(--font-serif);
font-size: 1.15rem;
color: #6B5D4D;
padding: 2rem;
text-align: center;
}
.experience-mobile-header[b-mpbzjym3yo] {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 45;
padding: 14px 16px;
pointer-events: none;
align-items: center;
justify-content: space-between;
background: transparent;
transition: background 0.24s ease, backdrop-filter 0.24s ease, opacity 0.12s ease;
}
.experience-mobile-header.mobile-sidebar-opening[b-mpbzjym3yo] {
opacity: 0;
pointer-events: none;
}
.experience-mobile-header.topbar-scrolled[b-mpbzjym3yo] {
background:
linear-gradient(180deg, rgba(253, 248, 240, 0.58) 0%, rgba(253, 248, 240, 0.32) 70%, rgba(253, 248, 240, 0) 100%);
-webkit-backdrop-filter: blur(8px) saturate(1.03);
backdrop-filter: blur(8px) saturate(1.03);
}
.mobile-back-link[b-mpbzjym3yo],
.mobile-menu-btn[b-mpbzjym3yo] {
pointer-events: auto;
touch-action: manipulation;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
background: rgba(253, 248, 240, 0.88);
border: 1px solid rgba(188, 152, 109, 0.14);
color: #8e7864;
}
.mobile-back-link[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.85rem 0.42rem 0.62rem;
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.82rem;
text-decoration: none;
}
.mobile-menu-btn[b-mpbzjym3yo] {
display: flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border-radius: 50%;
cursor: pointer;
transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.16s ease;
}
.mobile-menu-btn:hover[b-mpbzjym3yo],
.mobile-menu-btn:focus-visible[b-mpbzjym3yo] {
background: rgba(255, 251, 245, 0.96);
border-color: rgba(188, 152, 109, 0.24);
color: #755e4c;
outline: none;
box-shadow: 0 10px 22px rgba(119, 85, 56, 0.10);
}
.mobile-menu-btn:active[b-mpbzjym3yo] {
transform: scale(0.96);
}
.mobile-menu-btn.is-open[b-mpbzjym3yo] {
background: rgba(255, 251, 245, 0.94);
color: #7b5a4a;
border-color: rgba(188, 152, 109, 0.18);
box-shadow:
0 12px 26px rgba(119, 85, 56, 0.13),
inset 0 1px 0 rgba(255, 255, 255, 0.74);
}
.experience-sidebar-overlay[b-mpbzjym3yo] {
display: block;
position: fixed;
inset: 0;
z-index: 38;
background: rgba(28, 22, 16, 0.42);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.experience-world-status[b-mpbzjym3yo] {
width: min(100%, 720px);
box-sizing: border-box;
color: rgba(90, 67, 48, 0.78);
font-family: var(--font-serif);
font-size: 0.98rem;
font-style: italic;
line-height: 1.4;
text-align: center;
padding: 0.45rem 1rem;
}
.experience-world-status-building[b-mpbzjym3yo] {
width: auto;
max-width: min(100%, 720px);
min-height: 2.8rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.52rem;
padding: 0.56rem 0.92rem 0.62rem;
border: 1px solid rgba(188, 152, 109, 0.16);
border-radius: 999px;
background: linear-gradient(180deg, rgba(255, 251, 246, 0.76), rgba(247, 239, 229, 0.62));
box-shadow: 0 12px 24px rgba(103, 74, 46, 0.07);
}
.experience-world-status-copy[b-mpbzjym3yo] {
font-size: 0.94rem;
line-height: 1.45;
}
.experience-world-status-dots[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
gap: 0.22rem;
flex: 0 0 auto;
}
.experience-world-status-dots span[b-mpbzjym3yo] {
width: 0.28rem;
height: 0.28rem;
border-radius: 50%;
background: #b08a65;
opacity: 0.28;
animation: experienceWorldStatusDot-b-mpbzjym3yo 1.35s ease-in-out infinite;
}
.experience-world-status-dots span:nth-child(2)[b-mpbzjym3yo] {
animation-delay: 0.16s;
}
.experience-world-status-dots span:nth-child(3)[b-mpbzjym3yo] {
animation-delay: 0.32s;
}
@keyframes experienceWorldStatusDot-b-mpbzjym3yo {
0%, 60%, 100% { opacity: 0.28; transform: translateY(0); }
30% { opacity: 0.86; transform: translateY(-0.12rem); }
}
@media (prefers-reduced-motion: reduce) {
.experience-world-status-dots span[b-mpbzjym3yo] {
animation: none;
opacity: 0.62;
}
.living-book-header[b-mpbzjym3yo],
.living-book-avatar[b-mpbzjym3yo],
.living-book-overline[b-mpbzjym3yo] {
transition: none;
}
}
.experience-shell.mobile-sidebar-open[b-mpbzjym3yo] {
z-index: 39;
}
.mobile-sidebar-open[b-mpbzjym3yo] .experience-sidebar {
transform: translateX(0) !important;
z-index: 70;
}
.mobile-sidebar-opening[b-mpbzjym3yo] .experience-sidebar {
transform: translateX(0) !important;
z-index: 70;
}
:global(body.night-mode) .experience-shell[b-mpbzjym3yo] {
background:
radial-gradient(circle at 50% 0%, rgba(66, 50, 33, 0.68) 0%, rgba(27, 23, 19, 0.28) 42%, rgba(27, 23, 19, 0) 76%),
linear-gradient(180deg, #201a15 0%, #1b1713 100%);
}
:global(body.night-mode) .experience-shell[b-mpbzjym3yo]::before {
background:
radial-gradient(circle at 82% 90%, rgba(88, 66, 42, 0.12) 0%, transparent 26%),
linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, transparent 14%);
}
:global(body.night-mode) .experience-composer-rail-line[b-mpbzjym3yo] {
background: linear-gradient(90deg, rgba(191, 148, 91, 0.02), rgba(191, 148, 91, 0.24), rgba(191, 148, 91, 0.02));
}
:global(body.night-mode) .experience-scroll-to-latest[b-mpbzjym3yo] {
background: rgba(62, 49, 40, 0.92);
color: #f0dfcc;
border-color: rgba(191, 148, 91, 0.18);
box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18);
}
:global(body.night-mode) .experience-suggestion-chip[b-mpbzjym3yo] {
background: rgba(57, 46, 39, 0.18);
border-color: rgba(191, 148, 91, 0.24);
color: #e5d5c3;
}
:global(body.night-mode) .experience-suggestion-chip:hover:not(:disabled)[b-mpbzjym3yo] {
background: rgba(57, 46, 39, 0.34);
border-color: rgba(191, 148, 91, 0.38);
}
:global(body.night-mode) .experience-world-status-building[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(53, 41, 31, 0.8), rgba(43, 33, 26, 0.72));
border-color: rgba(163, 125, 85, 0.28);
color: rgba(234, 214, 194, 0.82);
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.18);
}
:global(body.night-mode) .mobile-back-link[b-mpbzjym3yo],
:global(body.night-mode) .mobile-menu-btn[b-mpbzjym3yo] {
background: rgba(48, 38, 30, 0.86);
border-color: rgba(191, 148, 91, 0.18);
color: #dcc8b2;
}
:global(body.night-mode) .experience-mobile-header.topbar-scrolled[b-mpbzjym3yo] {
background:
linear-gradient(180deg, rgba(43, 34, 28, 0.56) 0%, rgba(43, 34, 28, 0.32) 70%, rgba(43, 34, 28, 0) 100%);
}
:global(body.night-mode) .mobile-menu-btn:hover[b-mpbzjym3yo],
:global(body.night-mode) .mobile-menu-btn:focus-visible[b-mpbzjym3yo],
:global(body.night-mode) .mobile-menu-btn.is-open[b-mpbzjym3yo] {
background: rgba(62, 49, 40, 0.94);
border-color: rgba(191, 148, 91, 0.28);
color: #f3dfc8;
}
:global(body.night-mode) .experience-reader-overlay[b-mpbzjym3yo] {
background:
radial-gradient(circle at 50% 18%, rgba(128, 92, 55, 0.16) 0%, rgba(128, 92, 55, 0.06) 32%, rgba(128, 92, 55, 0) 62%),
rgba(13, 10, 8, 0.54);
}
:global(body.night-mode) .experience-reader-panel[b-mpbzjym3yo] {
background:
radial-gradient(circle at 16% 12%, rgba(91, 69, 48, 0.44) 0%, rgba(91, 69, 48, 0) 32%),
linear-gradient(180deg, rgba(49, 39, 32, 0.97) 0%, rgba(37, 30, 25, 0.96) 100%);
border-color: rgba(166, 126, 89, 0.34);
color: #f0e2d3;
box-shadow:
0 34px 92px rgba(0, 0, 0, 0.44),
0 12px 28px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
:global(body.night-mode) .experience-reader-close[b-mpbzjym3yo] {
background: rgba(57, 45, 37, 0.76);
border-color: rgba(165, 126, 88, 0.28);
color: #e7d3bf;
}
:global(body.night-mode) .experience-reader-close:hover[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-close:focus-visible[b-mpbzjym3yo] {
background: rgba(72, 57, 46, 0.94);
color: #fff2e3;
}
:global(body.night-mode) .experience-reader-avatar[b-mpbzjym3yo] {
border-color: rgba(168, 130, 91, 0.55);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28);
}
:global(body.night-mode) .experience-reader-name[b-mpbzjym3yo] {
color: #ead8c6;
}
:global(body.night-mode) .experience-reader-badge[b-mpbzjym3yo] {
background: rgba(67, 49, 38, 0.92);
color: #e0b18d;
}
:global(body.night-mode) .experience-reader-time[b-mpbzjym3yo] {
color: rgba(224, 204, 180, 0.72);
}
:global(body.night-mode) .experience-reader-title[b-mpbzjym3yo] {
color: #f2e6d8;
}
:global(body.night-mode) .experience-reader-content[b-mpbzjym3yo] {
color: #f2e6d8;
}
:global(body.night-mode) .experience-reader-content[b-mpbzjym3yo] em {
color: #d9c2aa;
}
:global(body.night-mode) .experience-reader-content[b-mpbzjym3yo] strong {
color: #fff0df;
}
:global(body.night-mode) .experience-reader-actions[b-mpbzjym3yo] {
border-top-color: rgba(166, 126, 89, 0.28);
background: linear-gradient(180deg, rgba(37, 30, 25, 0) 0%, rgba(37, 30, 25, 0.96) 28%, rgba(37, 30, 25, 0.99) 100%);
}
:global(body.night-mode) .experience-reader-world-actions[b-mpbzjym3yo] {
border-top-color: rgba(166, 126, 89, 0.28);
}
:global(body.night-mode) .experience-reader-continuation[b-mpbzjym3yo] {
border-color: rgba(185, 140, 98, 0.26);
background:
linear-gradient(145deg, rgba(57, 45, 36, 0.92), rgba(42, 34, 28, 0.86));
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.18),
inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
:global(body.night-mode) .experience-reader-continuation-kicker[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-continuation-arrow[b-mpbzjym3yo] {
color: #d59a6f;
}
:global(body.night-mode) .experience-reader-continuation-heading h2[b-mpbzjym3yo] {
color: #f0dfca;
}
:global(body.night-mode) .experience-reader-continuation-heading p[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-continuation-write-heading small[b-mpbzjym3yo] {
color: #bca58d;
}
:global(body.night-mode) .experience-reader-continuation-actions[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-action.experience-reader-continuation-action[b-mpbzjym3yo] {
border-color: rgba(201, 157, 112, 0.22);
}
:global(body.night-mode) .experience-reader-action.experience-reader-continuation-action[b-mpbzjym3yo] {
color: #ead8c6;
}
:global(body.night-mode) .experience-reader-action.experience-reader-continuation-action:hover:not(:disabled)[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-action.experience-reader-continuation-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
background: rgba(213, 154, 111, 0.08);
}
:global(body.night-mode) .experience-reader-continuation-write-heading > span[b-mpbzjym3yo] {
color: #ead8c6;
}
:global(body.night-mode) .experience-reader-world-status:focus-visible[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-content:focus-visible[b-mpbzjym3yo] {
outline-color: rgba(224, 177, 137, 0.72);
}
:global(body.night-mode) .experience-reader-action.primary[b-mpbzjym3yo] {
background: linear-gradient(145deg, #8f6948 0%, #6f4e33 100%);
color: #fff3e6;
border-color: rgba(191, 148, 91, 0.24);
box-shadow:
0 16px 32px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:global(body.night-mode) .experience-reader-action.primary:hover:not(:disabled)[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-action.primary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
background: linear-gradient(145deg, #9a7350 0%, #7a573a 100%);
}
:global(body.night-mode) .experience-reader-action.secondary[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(62, 49, 40, 0.92) 0%, rgba(47, 38, 31, 0.92) 100%);
color: #eadfd2;
border-color: rgba(191, 148, 91, 0.32);
}
:global(body.night-mode) .experience-reader-action.secondary:hover:not(:disabled)[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-action.secondary:focus-visible:not(:disabled)[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(69, 54, 44, 0.96) 0%, rgba(52, 42, 35, 0.96) 100%);
border-color: rgba(191, 148, 91, 0.42);
}
:global(body.night-mode) .experience-reader-panel.living-book-reader[b-mpbzjym3yo] {
--living-book-ink: #f0dfca;
--living-book-muted: #bca58d;
--living-book-accent: #d59a6f;
--living-book-rule: rgba(201, 157, 112, 0.22);
background:
radial-gradient(circle at 12% 4%, rgba(145, 99, 57, 0.16), transparent 28%),
radial-gradient(circle at 88% 68%, rgba(130, 78, 46, 0.1), transparent 34%),
linear-gradient(90deg, rgba(255, 255, 255, 0.015) 1px, transparent 1px),
#251e19;
background-size: auto, auto, 5px 5px, auto;
}
:global(body.night-mode) .living-book-header[b-mpbzjym3yo] {
background: rgba(37, 30, 25, 0.92);
}
:global(body.night-mode) .living-book-avatar[b-mpbzjym3yo] {
border-color: rgba(201, 157, 112, 0.28);
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}
:global(body.night-mode) .living-book-title[b-mpbzjym3yo],
:global(body.night-mode) .living-book-prose[b-mpbzjym3yo],
:global(body.night-mode) .living-book-next-heading h2[b-mpbzjym3yo] {
color: var(--living-book-ink);
}
:global(body.night-mode) .living-book-prose[b-mpbzjym3yo] em,
:global(body.night-mode) .living-book-choice p[b-mpbzjym3yo] {
color: #d3baa1;
}
:global(body.night-mode) .living-book-prose[b-mpbzjym3yo] strong {
color: #fff0df;
}
:global(body.night-mode) .living-book-prose[b-mpbzjym3yo] a {
color: #e1a67b;
}
:global(body.night-mode) .living-book-next-page[b-mpbzjym3yo] {
border-color: rgba(201, 157, 112, 0.22);
background: linear-gradient(145deg, rgba(55, 44, 36, 0.88), rgba(42, 34, 28, 0.82));
box-shadow:
0 20px 45px rgba(0, 0, 0, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.035);
}
:global(body.night-mode) .experience-reader-action.living-book-action[b-mpbzjym3yo] {
color: #ead7c3;
background: transparent;
}
:global(body.night-mode) .experience-reader-action.living-book-action:hover:not(:disabled)[b-mpbzjym3yo],
:global(body.night-mode) .experience-reader-action.living-book-action:focus-visible:not(:disabled)[b-mpbzjym3yo] {
background: rgba(213, 154, 111, 0.07);
}
:global(body.night-mode) .living-book-write-heading > span[b-mpbzjym3yo] {
color: #ead7c3;
}
@media (max-width: 1024px) {
.experience-main[b-mpbzjym3yo] {
margin-left: 0;
}
.experience-stage[b-mpbzjym3yo] {
width: min(100%, 1080px);
padding-top: 5.5rem;
}
}
@media (max-width: 768px) {
:global(html:has(.experience-shell))[b-mpbzjym3yo],
:global(body:has(.experience-shell))[b-mpbzjym3yo] {
width: 100%;
height: 100%;
overflow: hidden !important;
overscroll-behavior: none;
}
:global(.app-container:has(.experience-shell))[b-mpbzjym3yo],
:global(.layout-content:has(.experience-shell))[b-mpbzjym3yo] {
width: 100%;
min-height: 100vh;
height: 100vh;
overflow: hidden;
}
@supports (height: 100svh) {
:global(.app-container:has(.experience-shell))[b-mpbzjym3yo],
:global(.layout-content:has(.experience-shell))[b-mpbzjym3yo] {
min-height: 100svh;
height: 100svh;
}
}
.experience-shell[b-mpbzjym3yo] {
--experience-mobile-header-height: calc(72px + env(safe-area-inset-top, 0px));
position: fixed;
inset: 0;
width: 100vw;
max-width: 100vw;
height: 100vh;
min-height: 100vh;
overflow: hidden;
overscroll-behavior: none;
}
@supports (height: 100svh) {
.experience-shell[b-mpbzjym3yo] {
height: 100svh;
min-height: 100svh;
}
}
.experience-main[b-mpbzjym3yo],
.experience-surface[b-mpbzjym3yo] {
height: 100%;
min-height: 0;
overflow: hidden;
}
[b-mpbzjym3yo] .theme-atmosphere,
[b-mpbzjym3yo] .theme-room,
[b-mpbzjym3yo] .room-parchment,
[b-mpbzjym3yo] .atmosphere-content {
height: 100%;
min-height: 0;
overflow: hidden;
}
.experience-thread[b-mpbzjym3yo] {
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
-webkit-overflow-scrolling: touch;
overscroll-behavior-y: contain;
scroll-padding-top: var(--experience-mobile-header-height);
scroll-padding-bottom: 8rem;
touch-action: pan-y;
}
.experience-mobile-header[b-mpbzjym3yo] {
display: flex;
padding: calc(14px + env(safe-area-inset-top, 0px)) calc(16px + env(safe-area-inset-right, 0px)) 10px calc(16px + env(safe-area-inset-left, 0px));
}
[b-mpbzjym3yo] .experience-sidebar-toggle {
display: none;
}
.experience-surface[b-mpbzjym3yo] {
padding: 0 1rem;
}
.experience-stage[b-mpbzjym3yo] {
width: 100%;
padding: calc(var(--experience-mobile-header-height) + 0.7rem) 0 2.25rem;
gap: 1.7rem;
}
.experience-composer-zone[b-mpbzjym3yo] {
width: 100%;
padding: 0 0 calc(1rem + env(safe-area-inset-bottom, 0px));
}
.experience-reader-overlay[b-mpbzjym3yo] {
align-items: stretch;
justify-content: stretch;
padding: 0;
}
.experience-reader-panel[b-mpbzjym3yo] {
width: 100%;
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
padding: calc(1.5rem + env(safe-area-inset-top, 0px)) 1.25rem calc(1.8rem + env(safe-area-inset-bottom, 0px));
box-sizing: border-box;
overscroll-behavior-y: contain;
}
.experience-reader-close[b-mpbzjym3yo] {
top: calc(0.9rem + env(safe-area-inset-top, 0px));
right: calc(1rem + env(safe-area-inset-right, 0px));
}
.experience-reader-title[b-mpbzjym3yo] {
margin-top: -0.1rem;
padding-right: 2.7rem;
font-size: 1.55rem;
}
.experience-reader-content[b-mpbzjym3yo] {
font-size: 1.08rem;
line-height: 1.9;
}
.experience-reader-actions[b-mpbzjym3yo] {
align-items: stretch;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.experience-reader-action[b-mpbzjym3yo] {
width: 100%;
}
.experience-reader-world-actions[b-mpbzjym3yo] {
grid-template-columns: minmax(0, 1fr);
gap: 0.65rem;
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.experience-reader-continuation[b-mpbzjym3yo] {
margin-top: 2.6rem;
padding: 1.3rem 1.1rem;
border-radius: 18px;
}
.experience-reader-continuation-heading h2[b-mpbzjym3yo] {
font-size: clamp(1.6rem, 7.5vw, 2.1rem);
}
.experience-reader-continuation-write-heading[b-mpbzjym3yo] {
align-items: flex-start;
flex-direction: column;
gap: 0.2rem;
}
.experience-reader-panel.living-book-reader[b-mpbzjym3yo] {
height: 100dvh;
max-height: 100dvh;
border-radius: 0;
}
.living-book-header[b-mpbzjym3yo] {
min-height: calc(4.6rem + env(safe-area-inset-top, 0px));
padding: calc(0.75rem + env(safe-area-inset-top, 0px)) calc(1rem + env(safe-area-inset-right, 0px)) 0.72rem calc(1rem + env(safe-area-inset-left, 0px));
}
.living-book-header.living-book-header-compact[b-mpbzjym3yo] {
min-height: calc(3.65rem + env(safe-area-inset-top, 0px));
padding-top: calc(0.42rem + env(safe-area-inset-top, 0px));
padding-bottom: 0.42rem;
}
.living-book-avatar[b-mpbzjym3yo] {
width: 2.45rem;
height: 2.45rem;
}
.living-book-title[b-mpbzjym3yo] {
max-width: min(62vw, 27rem);
font-size: 1.02rem;
}
.living-book-manuscript[b-mpbzjym3yo] {
padding: 2.2rem max(1.25rem, env(safe-area-inset-right, 0px)) calc(2.5rem + env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
}
.living-book-prose[b-mpbzjym3yo] {
font-size: clamp(1.13rem, 4.6vw, 1.28rem);
line-height: 1.78;
}
.living-book-next-page[b-mpbzjym3yo] {
margin-inline: -0.35rem;
padding: 1.35rem 1.15rem;
border-radius: 18px;
}
.living-book-next-heading h2[b-mpbzjym3yo] {
font-size: clamp(1.65rem, 8vw, 2.2rem);
}
.living-book-write-heading[b-mpbzjym3yo] {
align-items: flex-start;
flex-direction: column;
gap: 0.2rem;
}
}
@media (max-width: 480px) {
.experience-surface[b-mpbzjym3yo] {
padding: 0 0.75rem;
}
.experience-stage[b-mpbzjym3yo] {
padding-top: calc(var(--experience-mobile-header-height) + 0.45rem);
}
}
/* Letter settings share the editorial palette without changing the chat room. */
.experience-penpal-host[b-mpbzjym3yo] .experience-penpal-overlay {
background: rgb(30 35 28 / 40%);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
padding: 1rem;
}
.experience-penpal-host[b-mpbzjym3yo] .experience-penpal-dialog {
width: min(100%, 42rem);
max-height: calc(100dvh - 2rem);
overflow: auto;
overscroll-behavior: contain;
border-radius: 0.75rem;
box-shadow: 0 1.5rem 4rem rgb(30 35 28 / 22%);
}
.experience-penpal-modal[b-mpbzjym3yo] {
position: relative;
padding: clamp(1.25rem, 4vw, 2rem);
background: var(--lov-surface);
color: var(--lov-ink);
border: 1px solid var(--lov-line);
border-radius: inherit;
font-family: var(--font-sans);
}
.experience-penpal-close[b-mpbzjym3yo] {
position: absolute;
inset-block-start: 0.65rem;
inset-inline-end: 0.65rem;
display: grid;
place-items: center;
width: 2.75rem;
height: 2.75rem;
border: 0;
border-radius: 0.35rem;
background: transparent;
color: var(--lov-muted);
font: inherit;
font-size: 1.5rem;
cursor: pointer;
}
.experience-penpal-close:hover[b-mpbzjym3yo] { background: var(--lov-selected); color: var(--lov-ink); }
.experience-penpal-hero[b-mpbzjym3yo] {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1fr);
gap: 1.15rem;
align-items: start;
padding-inline-end: 1.75rem;
}
.experience-penpal-avatar[b-mpbzjym3yo] {
display: block;
width: 100%;
aspect-ratio: 1;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--lov-line);
}
.experience-penpal-badge[b-mpbzjym3yo] {
margin: 0 0 0.4rem;
color: var(--lov-muted);
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.experience-penpal-title[b-mpbzjym3yo] {
margin: 0;
color: var(--lov-ink);
font-family: var(--font-serif);
font-size: clamp(1.65rem, 3vw, 2.2rem);
font-weight: 600;
line-height: 1.2;
overflow-wrap: anywhere;
}
.experience-penpal-copy[b-mpbzjym3yo] { margin: 0.75rem 0 0; color: var(--lov-muted); font-size: 1rem; line-height: 1.6; }
.experience-penpal-fields[b-mpbzjym3yo] {
display: grid;
gap: 1.5rem;
margin-block: 1.75rem;
padding-block-start: 1.5rem;
border-top: 1px solid var(--lov-line);
}
.experience-penpal-field[b-mpbzjym3yo] { min-width: 0; margin: 0; padding: 0; border: 0; }
.experience-penpal-label[b-mpbzjym3yo] { display: block; margin-block-end: 0.7rem; padding: 0; color: var(--lov-ink); font-size: 0.9rem; font-weight: 600; }
.experience-penpal-segments[b-mpbzjym3yo] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.experience-penpal-segment[b-mpbzjym3yo] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-height: 2.75rem;
padding: 0.75rem 0.6rem;
border: 1px solid var(--lov-line);
border-radius: 0.35rem;
background: var(--lov-paper);
color: var(--lov-ink);
font-size: 0.9rem;
line-height: 1.4;
cursor: pointer;
}
.experience-penpal-segment:has(input:checked)[b-mpbzjym3yo] { border-color: var(--lov-green); background: var(--lov-selected); font-weight: 600; }
.experience-penpal-segment input[b-mpbzjym3yo],
.experience-penpal-toggle input[b-mpbzjym3yo] { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; margin: 0; accent-color: var(--lov-green); cursor: inherit; }
.experience-penpal-toggle[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.85rem;
min-height: 2.75rem;
padding: 1rem;
border: 1px solid var(--lov-line);
border-radius: 0.35rem;
background: var(--lov-paper);
color: var(--lov-ink);
line-height: 1.5;
cursor: pointer;
}
.experience-penpal-toggle.locked[b-mpbzjym3yo] { color: var(--lov-muted); cursor: default; }
.experience-penpal-toggle-text[b-mpbzjym3yo] { min-width: 0; }
.experience-penpal-premium-hint[b-mpbzjym3yo] { margin: 0.65rem 0 0; color: var(--lov-muted); font-size: 0.875rem; line-height: 1.5; }
.experience-penpal-premium-hint a[b-mpbzjym3yo] { color: var(--lov-green); text-underline-offset: 0.2em; }
.experience-penpal-footer[b-mpbzjym3yo] { display: grid; gap: 1.25rem; padding-block-start: 1.25rem; border-top: 1px solid var(--lov-line); }
.experience-penpal-letter-note[b-mpbzjym3yo] { display: flex; align-items: center; gap: 0.7rem; min-height: 2rem; }
.experience-penpal-letter-note[b-mpbzjym3yo] .experience-penpal-seal { width: 2rem; height: 2rem; flex-shrink: 0; filter: drop-shadow(0 1px 2px rgb(40 30 20 / 25%)); }
.experience-penpal-next[b-mpbzjym3yo] { margin: 0; color: var(--lov-muted); font-size: 0.9rem; line-height: 1.5; }
.experience-penpal-actions[b-mpbzjym3yo] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.experience-penpal-primary[b-mpbzjym3yo],
.experience-penpal-secondary[b-mpbzjym3yo] {
min-height: 2.75rem;
padding: 0.85rem 1rem;
border: 1px solid var(--lov-green);
border-radius: 0.35rem;
font: inherit;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
}
.experience-penpal-primary[b-mpbzjym3yo] { background: var(--lov-green); color: var(--lov-on-green); }
.experience-penpal-primary:hover[b-mpbzjym3yo] { filter: brightness(0.92); }
.experience-penpal-secondary[b-mpbzjym3yo] { border-color: var(--lov-line); background: transparent; color: var(--lov-ink); }
.experience-penpal-secondary:hover[b-mpbzjym3yo] { background: var(--lov-selected); }
.experience-penpal-modal :is(button, input, a):focus-visible[b-mpbzjym3yo],
.experience-penpal-segment:has(input:focus-visible)[b-mpbzjym3yo] { outline: 2px solid var(--lov-focus); outline-offset: 3px; }
@media (max-width: 480px) {
.experience-penpal-host[b-mpbzjym3yo] .experience-penpal-overlay { padding: 0.75rem; }
.experience-penpal-host[b-mpbzjym3yo] .experience-penpal-dialog { max-height: calc(100dvh - 1.5rem); }
.experience-penpal-hero[b-mpbzjym3yo] { grid-template-columns: 3.25rem minmax(0, 1fr); gap: 0.35rem 0.8rem; padding-inline-end: 0; }
.experience-penpal-portrait[b-mpbzjym3yo] { grid-row: 1 / span 2; }
.experience-penpal-header[b-mpbzjym3yo] { display: contents; }
.experience-penpal-badge[b-mpbzjym3yo] { grid-column: 2; margin-block-start: 0.65rem; padding-inline-end: 1.5rem; }
.experience-penpal-title[b-mpbzjym3yo] { grid-column: 2; }
.experience-penpal-copy[b-mpbzjym3yo] { grid-column: 1 / -1; }
.experience-penpal-segments[b-mpbzjym3yo] { grid-template-columns: 1fr; }
.experience-penpal-segment[b-mpbzjym3yo] { justify-content: start; padding-inline: 1rem; }
.experience-penpal-actions[b-mpbzjym3yo] { grid-template-columns: 1fr; }
}
@media (max-width: 360px) {
.experience-penpal-portrait[b-mpbzjym3yo] { grid-row: 1; }
.experience-penpal-badge[b-mpbzjym3yo] { align-self: center; margin-block-start: 0; }
.experience-penpal-title[b-mpbzjym3yo] { grid-column: 1 / -1; margin-block-start: 0.5rem; }
}
.experience-keepsake-context-card[b-mpbzjym3yo] {
width: min(100%, 74ch);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.experience-keepsake-paper[b-mpbzjym3yo] {
width: 100%;
border-radius: 32px;
padding: clamp(1.5rem, 2vw, 2rem);
background: linear-gradient(180deg, rgba(255, 251, 246, 0.96) 0%, rgba(252, 246, 239, 0.94) 100%);
box-shadow: 0 28px 70px rgba(85, 56, 34, 0.12);
border: 1px solid rgba(221, 196, 173, 0.42);
}
.experience-keepsake-badge[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.38rem 0.8rem;
border-radius: 999px;
background: rgba(252, 237, 229, 0.9);
color: #ca8767;
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.experience-keepsake-meta[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 1rem;
color: #7f6854;
font-family: var(--font-sans);
font-size: 0.95rem;
}
.experience-keepsake-meta .source[b-mpbzjym3yo] {
font-weight: 600;
color: #5e4c3a;
}
.experience-keepsake-meta .separator[b-mpbzjym3yo] {
opacity: 0.55;
}
.experience-keepsake-title[b-mpbzjym3yo] {
margin: 0.85rem 0 0;
font-family: var(--font-serif);
font-size: clamp(1.65rem, 2.8vw, 2.2rem);
line-height: 1.08;
color: #3f3127;
}
.experience-keepsake-markdown[b-mpbzjym3yo] {
margin-top: 1rem;
color: #4b3a2e;
font-family: var(--font-serif);
font-size: 1.04rem;
line-height: 1.9;
}
.experience-keepsake-markdown p[b-mpbzjym3yo] {
margin: 0 0 0.95rem;
}
.experience-keepsake-toggle-row[b-mpbzjym3yo] {
margin-top: 0.35rem;
}
.experience-keepsake-toggle[b-mpbzjym3yo] {
border: none;
background: transparent;
color: #c97f59;
font-family: var(--font-sans);
font-size: 0.96rem;
font-weight: 600;
padding: 0;
cursor: pointer;
}
.experience-keepsake-loading[b-mpbzjym3yo] {
display: inline-flex;
justify-content: center;
width: 100%;
padding: 1.3rem 0;
color: #8c7562;
font-family: var(--font-serif);
font-style: italic;
}
.experience-keepsake-action-flap[b-mpbzjym3yo] {
margin-top: -0.65rem;
display: flex;
justify-content: center;
width: 100%;
}
.experience-keepsake-action-wrapper[b-mpbzjym3yo] {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.45rem;
padding: 0.9rem 1.1rem 0;
}
.experience-keepsake-action-chip[b-mpbzjym3yo] {
border: none;
border-radius: 999px;
padding: 0.88rem 1.3rem;
background: linear-gradient(180deg, rgba(235, 172, 132, 0.23) 0%, rgba(244, 201, 173, 0.58) 100%);
color: #714634;
font-family: var(--font-serif);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
box-shadow: 0 10px 28px rgba(109, 73, 47, 0.12);
}
.experience-keepsake-action-helper[b-mpbzjym3yo] {
color: #8a715d;
font-family: var(--font-serif);
font-size: 0.92rem;
font-style: italic;
}
.experience-letter-context-card[b-mpbzjym3yo] {
width: min(100%, 74ch);
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 0;
}
.experience-letter-paper[b-mpbzjym3yo] {
width: 100%;
border-radius: 32px;
padding: clamp(1.5rem, 2vw, 2rem);
background: linear-gradient(180deg, rgba(255, 251, 246, 0.97) 0%, rgba(252, 246, 239, 0.95) 100%);
box-shadow: 0 28px 70px rgba(85, 56, 34, 0.12);
border: 1px solid rgba(221, 196, 173, 0.42);
}
.experience-letter-badge[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.38rem 0.8rem;
border-radius: 999px;
background: rgba(252, 237, 229, 0.9);
color: #ca8767;
font-family: var(--font-sans);
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.experience-letter-badge.badge-new[b-mpbzjym3yo] {
background: rgba(255, 232, 226, 0.92);
color: #b86758;
}
.experience-letter-badge.badge-replied[b-mpbzjym3yo],
.experience-letter-badge.badge-saved[b-mpbzjym3yo],
.experience-letter-badge.badge-draft[b-mpbzjym3yo] {
background: rgba(246, 237, 226, 0.94);
color: #8b6e5a;
}
.experience-letter-meta[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.45rem;
margin-top: 1rem;
color: #7f6854;
font-family: var(--font-sans);
font-size: 0.95rem;
}
.experience-letter-meta .source[b-mpbzjym3yo] {
font-weight: 700;
color: #5e4c3a;
}
.experience-letter-meta .separator[b-mpbzjym3yo] {
opacity: 0.55;
}
.experience-letter-title[b-mpbzjym3yo] {
margin: 0.85rem 0 0;
font-family: var(--font-serif);
font-size: clamp(1.65rem, 2.8vw, 2.35rem);
line-height: 1.12;
color: #3f3127;
}
.experience-letter-markdown[b-mpbzjym3yo] {
margin-top: 1rem;
color: #4b3a2e;
font-family: var(--font-serif);
font-size: 1.08rem;
line-height: 1.95;
}
.experience-letter-markdown p[b-mpbzjym3yo] {
margin: 0 0 0.95rem;
}
.experience-letter-inline-toggle[b-mpbzjym3yo],
.experience-letter-toggle[b-mpbzjym3yo] {
border: none;
background: transparent;
color: #c97f59;
font-family: var(--font-sans);
font-size: 0.96rem;
font-weight: 700;
padding: 0;
cursor: pointer;
}
.experience-letter-inline-toggle[b-mpbzjym3yo] {
display: inline;
margin-left: 0.35rem;
}
.experience-letter-toggle-row[b-mpbzjym3yo] {
margin-top: 0.35rem;
}
.experience-letter-email-note[b-mpbzjym3yo] {
margin: 0.8rem 0 0;
color: #7f6854;
font-family: var(--font-sans);
font-size: 0.92rem;
}
.experience-letter-loading[b-mpbzjym3yo] {
display: inline-flex;
justify-content: center;
width: 100%;
padding: 1.3rem 0;
color: #8c7562;
font-family: var(--font-serif);
font-style: italic;
}
.experience-letter-action-flap[b-mpbzjym3yo] {
margin-top: -0.65rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
gap: 1rem;
padding-top: 1.75rem;
}
.experience-letter-action-header[b-mpbzjym3yo] {
color: #7f6854;
font-family: var(--font-sans);
font-size: clamp(1.05rem, 1.5vw, 1.25rem);
text-align: center;
}
.experience-letter-actions[b-mpbzjym3yo] {
width: min(100%, 58rem);
display: flex;
gap: 1.35rem;
justify-content: center;
flex-wrap: wrap;
}
.experience-letter-action[b-mpbzjym3yo] {
flex: 1 1 18rem;
min-width: 16rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.42rem;
}
.experience-letter-action button[b-mpbzjym3yo] {
width: 100%;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.62rem;
border-radius: 999px;
padding: 0.88rem 1.65rem;
font-family: var(--font-serif);
font-style: italic;
font-weight: 500;
font-size: clamp(1rem, 1.15vw, 1.1rem);
line-height: 1.1;
letter-spacing: 0;
cursor: pointer;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease, color 0.22s ease;
}
.experience-letter-action.primary button[b-mpbzjym3yo] {
border: 1px solid rgba(166, 108, 64, 0.32);
background: rgba(201, 150, 94, 0.55);
color: #5e4128;
box-shadow: 0 8px 18px rgba(169, 106, 61, 0.10);
}
.experience-letter-action.secondary button[b-mpbzjym3yo] {
border: 1px solid rgba(163, 127, 96, 0.28);
background: rgba(248, 240, 229, 0.18);
color: rgba(90, 67, 48, 0.94);
box-shadow: none;
}
.experience-letter-action button:hover[b-mpbzjym3yo] {
transform: translateY(-1px);
}
.experience-letter-action.primary button:hover[b-mpbzjym3yo] {
background: rgba(201, 150, 94, 0.72);
border-color: rgba(166, 108, 64, 0.48);
box-shadow: 0 12px 22px rgba(169, 106, 61, 0.16);
}
.experience-letter-action.secondary button:hover[b-mpbzjym3yo] {
background: rgba(248, 240, 229, 0.32);
border-color: rgba(163, 127, 96, 0.46);
}
.experience-letter-action-helper[b-mpbzjym3yo] {
color: #8a715d;
font-family: var(--font-serif);
font-size: 0.92rem;
font-style: italic;
}
:global(body.night-mode) .experience-letter-paper[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(46, 36, 29, 0.96) 0%, rgba(36, 29, 24, 0.94) 100%);
border-color: rgba(118, 90, 62, 0.48);
box-shadow: 0 28px 70px rgba(0, 0, 0, 0.24);
}
:global(body.night-mode) .experience-letter-badge[b-mpbzjym3yo] {
background: rgba(67, 49, 38, 0.92);
color: #e0b18d;
}
:global(body.night-mode) .experience-letter-meta[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-email-note[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-action-helper[b-mpbzjym3yo] {
color: rgba(224, 204, 180, 0.72);
}
:global(body.night-mode) .experience-letter-meta .source[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-title[b-mpbzjym3yo],
:global(body.night-mode) .experience-letter-markdown[b-mpbzjym3yo] {
color: #eadfd2;
}
:global(body.night-mode) .experience-letter-action-chip[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(151, 108, 74, 0.35) 0%, rgba(102, 73, 51, 0.68) 100%);
color: #f1d8c0;
}
:global(body.night-mode) .experience-letter-action-header[b-mpbzjym3yo] {
color: rgba(224, 204, 180, 0.78);
}
:global(body.night-mode) .experience-letter-action.secondary button[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(62, 49, 40, 0.92) 0%, rgba(47, 38, 31, 0.92) 100%);
color: #eadfd2;
border-color: rgba(191, 148, 91, 0.32);
}
:global(body.night-mode) .experience-letter-action.primary button[b-mpbzjym3yo] {
background: linear-gradient(145deg, #8f6948 0%, #6f4e33 100%);
color: #fff3e6;
border-color: rgba(191, 148, 91, 0.24);
box-shadow:
0 16px 32px rgba(0, 0, 0, 0.24),
inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
:global(body.night-mode) .experience-letter-action.primary button:hover[b-mpbzjym3yo] {
background: linear-gradient(145deg, #9a7350 0%, #7a573a 100%);
}
:global(body.night-mode) .experience-letter-action.secondary button:hover[b-mpbzjym3yo] {
background: linear-gradient(180deg, rgba(69, 54, 44, 0.96) 0%, rgba(52, 42, 35, 0.96) 100%);
border-color: rgba(191, 148, 91, 0.42);
}
.experience-reply-overlay[b-mpbzjym3yo] {
position: fixed;
inset: 0;
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
padding: 1.5rem;
background: rgba(35, 25, 18, 0.72);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
.experience-reply-modal[b-mpbzjym3yo] {
width: min(860px, 92vw);
max-height: 88dvh;
background: linear-gradient(180deg, #fbf2e9 0%, #f4e8dd 100%);
border-radius: 24px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
box-sizing: border-box;
}
.experience-reply-modal.mobile[b-mpbzjym3yo] {
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
border-radius: 0;
}
.experience-reply-header[b-mpbzjym3yo] {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.6rem 2.2rem 1.2rem;
font-family: var(--font-sans);
color: #4b2e2e;
position: relative;
gap: 1rem;
}
.experience-reply-title[b-mpbzjym3yo] {
font-size: 1.25rem;
font-weight: 700;
}
.experience-reply-title strong[b-mpbzjym3yo] {
margin-left: 0.25rem;
}
.experience-reply-meta[b-mpbzjym3yo] {
display: flex;
align-items: center;
gap: 0.8rem;
margin-right: 2.25rem;
color: #7a5950;
font-size: 0.84rem;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.experience-reply-saved[b-mpbzjym3yo] {
font-weight: 700;
}
.experience-reply-close[b-mpbzjym3yo] {
position: absolute;
right: 1.4rem;
top: 1.2rem;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(120, 90, 80, 0.3);
background: rgba(255, 255, 255, 0.78);
color: #5a3f34;
font-size: 1.3rem;
cursor: pointer;
}
.experience-reply-body[b-mpbzjym3yo] {
padding: 0 2.2rem 1.8rem;
overflow-y: auto;
flex: 1;
min-height: 0;
}
.experience-reply-toggle[b-mpbzjym3yo] {
background: transparent;
border: none;
color: #b15f48;
font-family: var(--font-sans);
font-size: 0.95rem;
cursor: pointer;
margin-bottom: 1rem;
padding: 0;
}
.experience-reply-original-letter[b-mpbzjym3yo] {
background: rgba(255, 255, 255, 0.7);
border-radius: 16px;
padding: 1.1rem 1.3rem;
margin-bottom: 1.4rem;
color: #4b2e2e;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.experience-reply-original-subject[b-mpbzjym3yo] {
font-weight: 700;
margin-bottom: 0.6rem;
}
.experience-reply-original-content[b-mpbzjym3yo] {
font-size: 0.95rem;
line-height: 1.5;
}
.experience-reply-label[b-mpbzjym3yo] {
display: block;
font-family: var(--font-sans);
font-size: 1rem;
color: #6a4d3f;
margin: 0.9rem 0 0.5rem;
}
.experience-reply-input[b-mpbzjym3yo],
.experience-reply-textarea[b-mpbzjym3yo] {
width: 100%;
border: 1px solid rgba(180, 150, 130, 0.4);
border-radius: 14px;
padding: 0.8rem 1rem;
font-family: var(--font-sans);
background: rgba(255, 255, 255, 0.75);
color: #4b2e2e;
outline: none;
}
.experience-reply-textarea[b-mpbzjym3yo] {
min-height: 240px;
resize: vertical;
line-height: 1.7;
background-image: repeating-linear-gradient(to bottom, transparent, transparent 26px, rgba(180, 150, 130, 0.2) 27px);
background-attachment: local;
}
.experience-reply-footer[b-mpbzjym3yo] {
padding: 1.3rem 2.2rem 1.8rem;
border-top: 1px solid rgba(200, 170, 150, 0.35);
background: rgba(255, 255, 255, 0.45);
}
.experience-reply-footer-note[b-mpbzjym3yo] {
font-size: 0.9rem;
color: #7a5950;
margin-bottom: 1rem;
}
.experience-reply-actions[b-mpbzjym3yo] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.experience-reply-cancel[b-mpbzjym3yo] {
background: transparent;
border: none;
color: #8b6e5a;
font-size: 1rem;
cursor: pointer;
}
.experience-reply-send[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: linear-gradient(180deg, #d38468 0%, #a85e46 100%);
color: #fff;
border: 1px solid #a85e46;
border-radius: 999px;
padding: 0.9rem 2.8rem;
font-family: var(--font-sans);
font-size: 1.05rem;
cursor: pointer;
box-shadow: 0 4px 12px rgba(168, 94, 70, 0.3);
}
.experience-reply-send:disabled[b-mpbzjym3yo] {
opacity: 0.6;
cursor: not-allowed;
}
.experience-reply-toast[b-mpbzjym3yo] {
position: fixed;
left: 50%;
bottom: 32px;
transform: translateX(-50%);
z-index: 2200;
padding: 0.85rem 1.8rem;
border-radius: 999px;
background: rgba(41, 30, 24, 0.92);
color: #f9f0e6;
font-family: var(--font-sans);
font-size: 1rem;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.experience-system-action[b-mpbzjym3yo] {
width: 100%;
display: flex;
justify-content: center;
}
.experience-system-action-text[b-mpbzjym3yo] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.75rem 1rem;
border-radius: 999px;
background: rgba(244, 225, 209, 0.62);
color: #7c5b46;
font-family: var(--font-serif);
font-size: 0.98rem;
font-style: italic;
text-align: center;
}
@media (max-width: 1024px) {
.experience-reply-overlay[b-mpbzjym3yo] {
padding: 0;
align-items: stretch;
justify-content: stretch;
}
.experience-reply-modal[b-mpbzjym3yo] {
width: 100vw;
height: 100dvh;
max-width: none;
max-height: none;
border-radius: 0;
}
}
@media (max-width: 768px) {
.experience-keepsake-paper[b-mpbzjym3yo] {
border-radius: 24px;
padding: 1.15rem 1rem 1.05rem;
}
.experience-keepsake-meta[b-mpbzjym3yo] {
font-size: 0.86rem;
flex-wrap: wrap;
}
.experience-keepsake-markdown[b-mpbzjym3yo] {
font-size: 0.98rem;
line-height: 1.78;
}
.experience-keepsake-action-chip[b-mpbzjym3yo] {
width: min(100%, 20rem);
}
.experience-letter-paper[b-mpbzjym3yo] {
border-radius: 24px;
padding: 1.15rem 1rem 1.05rem;
}
.experience-letter-meta[b-mpbzjym3yo] {
font-size: 0.86rem;
flex-wrap: wrap;
}
.experience-letter-markdown[b-mpbzjym3yo] {
font-size: 0.98rem;
line-height: 1.78;
}
.experience-letter-actions[b-mpbzjym3yo] {
width: 100%;
gap: 0.85rem;
}
.experience-letter-action[b-mpbzjym3yo] {
flex-basis: 100%;
min-width: 0;
}
.experience-reply-overlay[b-mpbzjym3yo] {
padding: 0;
}
.experience-reply-header[b-mpbzjym3yo],
.experience-reply-body[b-mpbzjym3yo],
.experience-reply-footer[b-mpbzjym3yo] {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
.experience-reply-header[b-mpbzjym3yo] {
align-items: flex-start;
flex-direction: column;
}
.experience-reply-meta[b-mpbzjym3yo] {
margin-right: 2.25rem;
}
.experience-reply-body[b-mpbzjym3yo] {
display: flex;
flex-direction: column;
padding-bottom: 1rem;
}
.experience-reply-textarea[b-mpbzjym3yo] {
flex: 1 1 auto;
min-height: 0;
margin-bottom: 0.75rem;
resize: none;
}
.experience-reply-actions[b-mpbzjym3yo] {
flex-direction: column;
align-items: stretch;
}
.experience-reply-send[b-mpbzjym3yo] {
width: 100%;
justify-content: center;
}
}
/* Editorial reading canvas; preserve the room's existing scroll and overlay model. */
.experience-shell[b-mpbzjym3yo] { background: var(--lov-paper); color: var(--lov-ink); }
.experience-shell[b-mpbzjym3yo]::before { display: none; }
.experience-composer-zone[b-mpbzjym3yo] { background: var(--lov-paper); }
/* The approved family themes are opt-in; other conversation worlds retain their geometry. */
.experience-conversation-opening[b-mpbzjym3yo] {
grid-template-rows: minmax(0, max-content) auto;
align-content: start;
}
.experience-editorial-family .experience-conversation-opening .experience-stage[b-mpbzjym3yo] {
padding-bottom: 1.5rem;
}
.experience-editorial-family .experience-scene-conversation .experience-prelude[b-mpbzjym3yo],
.experience-editorial-family .experience-scene-conversation .experience-messages[b-mpbzjym3yo] {
border-radius: 1rem;
background: color-mix(in srgb, var(--lov-paper) 96%, transparent);
}
.experience-scene-conversation .experience-composer-zone[b-mpbzjym3yo] {
width: min(100%, 68ch);
padding: 1.25rem;
margin-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
border-radius: 1rem;
}
@media (max-width: 768px) {
.experience-scene-conversation .experience-composer-zone[b-mpbzjym3yo] {
padding: 0.75rem;
}
.experience-scene-conversation .experience-suggestion-chips[b-mpbzjym3yo] {
flex-wrap: wrap;
overflow: visible;
justify-content: center;
}
.experience-scene-conversation .experience-suggestion-chip[b-mpbzjym3yo] {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
padding: 0.7rem 0.9rem;
}
.experience-scene-conversation .experience-suggestion-chip-text[b-mpbzjym3yo] {
white-space: normal;
}
}
.experience-editorial-family .experience-stage[b-mpbzjym3yo] {
padding-top: clamp(1.75rem, 4.5vh, 3rem);
gap: clamp(1.2rem, 2.5vh, 1.8rem);
}
.experience-editorial-family .experience-prelude[b-mpbzjym3yo],
.experience-editorial-family .experience-messages[b-mpbzjym3yo] {
background: var(--lov-paper);
padding: 1rem;
border-radius: 0.5rem;
}
.experience-editorial-family[b-mpbzjym3yo] .sidebar-avatar {
border-color: var(--lov-line);
box-shadow: none;
}
.experience-editorial-family[b-mpbzjym3yo] .exp-msg.exp-msg-ai .exp-msg-surface,
.experience-editorial-family[b-mpbzjym3yo] .exp-msg.exp-msg-ai .exp-msg-surface strong,
.experience-editorial-family[b-mpbzjym3yo] .sidebar-theme-name {
color: var(--lov-ink);
}
.experience-editorial-family[b-mpbzjym3yo] .sidebar-theme-ingress {
color: var(--lov-muted);
}
.experience-editorial-family[b-mpbzjym3yo] .exp-msg.exp-msg-ai .exp-msg-surface em {
color: var(--lov-muted);
}
.experience-editorial-family .experience-suggestion-chip[b-mpbzjym3yo] {
color: var(--lov-ink);
background: var(--lov-paper);
border-color: var(--lov-line);
}
.experience-editorial-family .experience-suggestion-chip:hover:not(:disabled)[b-mpbzjym3yo] {
background: var(--lov-selected);
}
.experience-editorial-family .experience-suggestion-chip:focus-visible[b-mpbzjym3yo] {
outline-color: var(--lov-focus);
}
.experience-editorial-family[b-mpbzjym3yo] .theme-input-shell,
.experience-reader-panel.experience-reader-editorial-family[b-mpbzjym3yo] .theme-input-shell {
background: transparent;
}
.experience-editorial-family[b-mpbzjym3yo] .theme-input-shell .theme-input-frame .theme-input-line,
.experience-reader-panel.experience-reader-editorial-family[b-mpbzjym3yo] .theme-input-shell.reader-mode .theme-input-line {
background: var(--lov-surface);
border-color: var(--lov-line);
}
.experience-editorial-family[b-mpbzjym3yo] .theme-textarea::placeholder,
.experience-reader-panel.experience-reader-editorial-family[b-mpbzjym3yo] .theme-textarea::placeholder {
color: var(--lov-muted);
}
.experience-editorial-family[b-mpbzjym3yo] .exp-msg-meta {
color: var(--lov-muted);
}
.experience-reader-panel.experience-reader-editorial-family[b-mpbzjym3yo] {
background: var(--lov-surface);
color: var(--lov-ink);
border-color: var(--lov-line);
}
.experience-reader-editorial-family .experience-reader-continuation[b-mpbzjym3yo] {
margin-top: clamp(1.5rem, 3vw, 2rem);
background: var(--lov-paper);
border-color: var(--lov-line);
box-shadow: none;
}
.experience-reader-editorial-family .experience-reader-continuation-actions[b-mpbzjym3yo] {
margin-top: 1rem;
}
.experience-reader-editorial-family .experience-reader-continuation-heading h2[b-mpbzjym3yo],
.experience-reader-editorial-family .experience-reader-continuation-action[b-mpbzjym3yo],
.experience-reader-editorial-family .experience-reader-continuation-write-heading > span[b-mpbzjym3yo] {
color: var(--lov-ink);
}
.experience-reader-editorial-family .experience-reader-continuation-heading p[b-mpbzjym3yo],
.experience-reader-editorial-family .experience-reader-continuation-write-heading small[b-mpbzjym3yo] {
color: var(--lov-muted);
}
.experience-reader-editorial-family .experience-reader-continuation-kicker[b-mpbzjym3yo],
.experience-reader-editorial-family .experience-reader-continuation-arrow[b-mpbzjym3yo] {
color: var(--lov-green);
}
.experience-reader-editorial-family .experience-reader-content[b-mpbzjym3yo],
.experience-reader-editorial-family .experience-reader-content[b-mpbzjym3yo] strong,
.experience-reader-editorial-family .experience-reader-name[b-mpbzjym3yo] {
color: var(--lov-ink);
}
.experience-reader-editorial-family .experience-reader-content[b-mpbzjym3yo] em,
.experience-reader-editorial-family .experience-reader-time[b-mpbzjym3yo] {
color: var(--lov-muted);
}
@media (max-width: 768px) {
.experience-editorial-family .experience-stage[b-mpbzjym3yo] {
padding-top: calc(var(--experience-mobile-header-height) + 0.7rem);
gap: 1.2rem;
}
.experience-editorial-family .experience-prelude[b-mpbzjym3yo],
.experience-editorial-family .experience-messages[b-mpbzjym3yo] {
padding: 0.75rem;
}
}
/* /Components/Pages/ThemeInterviewDetail.razor.rz.scp.css */
/* Farmors moten detail */
:host[b-9pbuvybe8f] {
display: block;
width: 100%;
background: var(--lov-paper);
}
.app-layout[b-9pbuvybe8f],
[b-9pbuvybe8f] .app-layout {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
background-color: var(--lov-paper);
padding-top: 0;
overflow-x: hidden;
}
.sidebar-overlay[b-9pbuvybe8f] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
}
.sidebar-overlay.hidden[b-9pbuvybe8f] {
display: none;
}
.sidebar[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
.sidebar.hidden[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar.hidden {
transform: translateX(-100%);
}
.sidebar-top-content[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
.app-logo-link[b-9pbuvybe8f],
[b-9pbuvybe8f] .app-logo-link {
display: block;
width: 100%;
text-align: center;
margin-top: -1.2rem;
text-decoration: none;
}
.sidebar-logo img[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
[b-9pbuvybe8f] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
display: inline-grid;
}
.interview-detail-main[b-9pbuvybe8f] {
flex: 1;
margin-left: 280px;
padding: clamp(2.5rem, 3.4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem) 0;
transition: margin-left 0.3s ease;
}
.interview-detail-main.sidebar-hidden[b-9pbuvybe8f] {
margin-left: 0;
}
.interview-article[b-9pbuvybe8f],
.interview-not-found[b-9pbuvybe8f] {
width: min(100%, 1180px);
margin: 0 auto;
}
.interview-hero[b-9pbuvybe8f] {
position: relative;
min-height: clamp(520px, 47vw, 650px);
overflow: hidden;
border: 1px solid rgba(177, 132, 91, 0.2);
border-radius: 8px;
background:
radial-gradient(circle at 10% 12%, rgba(255, 255, 255, 0.82), transparent 34%),
linear-gradient(135deg, rgba(255, 251, 246, 0.96), rgba(246, 233, 214, 0.92));
box-shadow: 0 24px 54px rgba(99, 68, 40, 0.12);
}
.interview-hero[b-9pbuvybe8f]::before {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg,
rgba(255, 250, 244, 0.99) 0%,
rgba(255, 250, 244, 0.98) 26%,
rgba(255, 250, 244, 0.76) 42%,
rgba(255, 250, 244, 0.18) 60%,
rgba(255, 250, 244, 0) 78%),
linear-gradient(180deg,
rgba(255, 250, 244, 0.18) 0%,
rgba(255, 250, 244, 0) 34%,
rgba(255, 250, 244, 0.12) 100%);
pointer-events: none;
}
.interview-hero-copy[b-9pbuvybe8f] {
position: relative;
z-index: 2;
width: min(56%, 680px);
min-height: inherit;
padding: clamp(2rem, 3.4vw, 3.5rem);
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.back-link[b-9pbuvybe8f] {
display: inline-flex;
align-items: center;
width: fit-content;
margin-bottom: 1.25rem;
color: #7B5740;
font-family: var(--font-sans);
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
}
.back-link[b-9pbuvybe8f]::before {
content: "←";
margin-right: 0.45rem;
}
.back-link:hover[b-9pbuvybe8f] {
color: #4B3325;
}
.interview-kicker[b-9pbuvybe8f],
.granny-notes h2[b-9pbuvybe8f],
.afterthought-panel h2[b-9pbuvybe8f] {
margin: 0 0 0.8rem;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #A0633F;
}
.interview-hero h1[b-9pbuvybe8f] {
width: 100%;
max-width: 100%;
margin: 0;
font-family: var(--font-serif);
font-size: clamp(3.1rem, 4.1vw, 5rem);
font-weight: 600;
line-height: 1.02;
color: #2F251D;
}
.interview-meta[b-9pbuvybe8f] {
display: flex;
flex-wrap: wrap;
gap: 0.7rem 1.2rem;
margin: 1rem 0 0;
color: #7C6653;
font-family: var(--font-sans);
font-size: 0.95rem;
}
.interview-meta span + span[b-9pbuvybe8f]::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin: 0 1.2rem 0 0;
border-radius: 999px;
background: rgba(160, 99, 63, 0.55);
vertical-align: middle;
}
.granny-notes[b-9pbuvybe8f] {
margin-top: clamp(1.6rem, 3vw, 2.5rem);
padding-top: 1.5rem;
border-top: 1px solid rgba(177, 132, 91, 0.22);
}
.granny-notes p[b-9pbuvybe8f] {
margin: 0;
color: #5F4F43;
line-height: 1.75;
}
.interview-hero-image[b-9pbuvybe8f] {
position: absolute;
inset: 0;
z-index: 0;
}
.interview-hero-image[b-9pbuvybe8f]::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(255, 250, 244, 0.42) 0%, rgba(255, 250, 244, 0) 48%),
linear-gradient(180deg, rgba(61, 40, 28, 0.04) 0%, rgba(61, 40, 28, 0.1) 100%);
pointer-events: none;
}
.interview-hero-image img[b-9pbuvybe8f] {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
object-position: center center;
}
.interview-body[b-9pbuvybe8f] {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: clamp(1.4rem, 3vw, 2.4rem);
padding: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 1.5rem) 0;
}
.interview-transcript[b-9pbuvybe8f] {
display: flex;
flex-direction: column;
gap: 0;
background: rgba(255, 250, 244, 0.54);
border: 1px solid rgba(177, 132, 91, 0.14);
border-radius: 8px;
}
.interview-turn[b-9pbuvybe8f] {
display: grid;
grid-template-columns: 120px minmax(0, 1fr);
gap: 1.35rem;
padding: 1.45rem 1.65rem;
border-bottom: 1px solid rgba(177, 132, 91, 0.16);
}
.interview-turn:last-child[b-9pbuvybe8f] {
border-bottom: none;
}
.turn-speaker[b-9pbuvybe8f] {
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 800;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #8D6044;
}
.turn-text[b-9pbuvybe8f] {
font-family: var(--font-serif);
font-size: clamp(1.05rem, 1.3vw, 1.2rem);
line-height: 1.8;
color: #2E2924;
}
.turn-text p[b-9pbuvybe8f] {
margin: 0;
}
.turn-text p + p[b-9pbuvybe8f] {
margin-top: 0.8rem;
}
.stage-direction[b-9pbuvybe8f] {
color: #7C6653;
font-style: italic;
}
.interview-empty-transcript[b-9pbuvybe8f] {
margin: 0;
padding: 2rem;
font-family: var(--font-serif);
font-size: 1.2rem;
line-height: 1.8;
color: #4A3A2F;
}
.interview-aside[b-9pbuvybe8f] {
display: flex;
flex-direction: column;
gap: 1rem;
}
.afterthought-panel[b-9pbuvybe8f],
.handoff-panel[b-9pbuvybe8f] {
border-radius: 8px;
border: 1px solid rgba(177, 132, 91, 0.18);
background: rgba(255, 250, 244, 0.76);
box-shadow: 0 18px 34px rgba(99, 68, 40, 0.08);
}
.afterthought-panel[b-9pbuvybe8f] {
padding: 1.6rem;
}
.afterthought-panel p[b-9pbuvybe8f] {
margin: 0;
font-family: var(--font-serif);
font-style: italic;
line-height: 1.8;
color: #5D4737;
}
.afterthought-panel img[b-9pbuvybe8f] {
display: block;
width: 76px;
margin: 1.35rem auto 0;
opacity: 0.88;
}
.handoff-panel[b-9pbuvybe8f] {
padding: 1.6rem;
}
.handoff-panel h2[b-9pbuvybe8f] {
margin: 0;
font-family: var(--font-serif);
font-size: 1.65rem;
font-weight: 600;
line-height: 1.16;
color: #2F251D;
}
.handoff-panel p[b-9pbuvybe8f] {
margin: 0.8rem 0 1.3rem;
line-height: 1.65;
color: #6F5B4C;
}
.handoff-button[b-9pbuvybe8f],
.not-found-button[b-9pbuvybe8f] {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
width: 100%;
border-radius: 999px;
background: linear-gradient(135deg, #B87049, #935536);
color: #FFF8EE;
font-family: var(--font-sans);
font-weight: 800;
text-decoration: none;
box-shadow: 0 12px 24px rgba(147, 85, 54, 0.18);
}
.handoff-button[b-9pbuvybe8f] {
min-height: 52px;
padding: 0.7rem 1rem;
line-height: 1.18;
text-align: center;
white-space: normal;
}
.handoff-button span[b-9pbuvybe8f] {
min-width: 0;
overflow-wrap: anywhere;
}
.handoff-button svg[b-9pbuvybe8f] {
flex: 0 0 auto;
}
.handoff-button:hover[b-9pbuvybe8f],
.not-found-button:hover[b-9pbuvybe8f] {
background: linear-gradient(135deg, #A8623E, #7E452B);
}
.interview-not-found[b-9pbuvybe8f] {
max-width: 780px;
padding: clamp(2rem, 5vw, 4rem);
text-align: center;
border-radius: 8px;
border: 1px solid rgba(177, 132, 91, 0.2);
background: rgba(255, 250, 244, 0.76);
}
.interview-not-found .back-link[b-9pbuvybe8f] {
margin-left: auto;
margin-right: auto;
}
.interview-not-found h1[b-9pbuvybe8f] {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2.4rem, 4vw, 4rem);
color: #2F251D;
}
.interview-not-found p[b-9pbuvybe8f] {
margin: 1rem auto 1.6rem;
max-width: 34rem;
color: #6F5B4C;
line-height: 1.7;
}
.not-found-button[b-9pbuvybe8f] {
width: auto;
padding: 0 1.35rem;
}
@media (max-width: 1024px) {
[b-9pbuvybe8f] .toggle-sidebar,
[b-9pbuvybe8f] .toggle-sidebar {
display: none !important;
}
.app-layout[b-9pbuvybe8f],
[b-9pbuvybe8f] .app-layout {
padding-top: 60px;
}
.sidebar[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
.sidebar.visible[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar.visible {
transform: translateX(0);
}
.sidebar.hidden[b-9pbuvybe8f],
[b-9pbuvybe8f] .sidebar.hidden {
transform: translateX(-100%);
}
.interview-detail-main[b-9pbuvybe8f] {
margin-left: 0;
padding: 1.25rem var(--mobile-page-margin) 3rem;
}
.interview-body[b-9pbuvybe8f] {
grid-template-columns: 1fr;
}
.interview-hero[b-9pbuvybe8f] {
min-height: clamp(500px, 62vw, 610px);
}
.interview-hero-copy[b-9pbuvybe8f] {
width: min(64%, 610px);
}
.interview-aside[b-9pbuvybe8f] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.app-layout[b-9pbuvybe8f],
[b-9pbuvybe8f] .app-layout {
padding-top: 60px;
overflow-x: hidden;
}
.interview-hero[b-9pbuvybe8f] {
display: flex;
flex-direction: column;
min-height: auto;
}
.interview-hero[b-9pbuvybe8f]::before {
display: none;
}
.interview-hero-image[b-9pbuvybe8f] {
position: relative;
order: -1;
min-height: auto;
aspect-ratio: 16 / 9;
}
.interview-hero-image img[b-9pbuvybe8f] {
object-position: center 38%;
}
.interview-hero-copy[b-9pbuvybe8f] {
width: 100%;
min-height: auto;
padding: 1.5rem;
}
.interview-hero h1[b-9pbuvybe8f] {
max-width: none;
font-size: clamp(2.6rem, 12vw, 4rem);
}
.interview-body[b-9pbuvybe8f] {
padding: 1.25rem 0 0;
}
.interview-turn[b-9pbuvybe8f] {
grid-template-columns: 1fr;
gap: 0.55rem;
padding: 1.2rem;
}
.interview-aside[b-9pbuvybe8f] {
grid-template-columns: 1fr;
}
.handoff-panel[b-9pbuvybe8f],
.afterthought-panel[b-9pbuvybe8f] {
padding: 1.25rem;
}
}
/* /Components/Pages/ThemeInterviews.razor.rz.scp.css */
/* Farmors moten archive */
:host[b-ut6aaoxxn6] {
display: block;
width: 100%;
background: var(--lov-paper);
}
.app-layout[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .app-layout {
display: flex;
flex-direction: column;
width: 100%;
min-height: 100vh;
background-color: var(--lov-paper);
padding-top: 0;
overflow-x: hidden;
}
.sidebar-overlay[b-ut6aaoxxn6] {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
}
.sidebar-overlay.hidden[b-ut6aaoxxn6] {
display: none;
}
.sidebar[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
.sidebar.hidden[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar.hidden {
transform: translateX(-100%);
}
.sidebar-top-content[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1rem;
}
.app-logo-link[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .app-logo-link {
display: block;
width: 100%;
text-align: center;
margin-top: -1.2rem;
text-decoration: none;
}
.sidebar-logo img[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
[b-ut6aaoxxn6] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
display: inline-grid;
}
.interviews-main[b-ut6aaoxxn6] {
flex: 1;
margin-left: 280px;
padding: clamp(2.5rem, 3.4vw, 3.5rem) clamp(1.25rem, 3vw, 3rem) 0;
transition: margin-left 0.3s ease;
}
.interviews-main.sidebar-hidden[b-ut6aaoxxn6] {
margin-left: 0;
}
.interviews-hero[b-ut6aaoxxn6] {
position: relative;
width: min(100%, 1180px);
margin: 0 auto clamp(3.25rem, 5.5vw, 5.5rem);
display: grid;
grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
gap: clamp(1.75rem, 4vw, 4rem);
align-items: stretch;
}
.interviews-hero[b-ut6aaoxxn6]::before {
content: "";
position: absolute;
left: clamp(1rem, 5vw, 5rem);
right: clamp(1rem, 5vw, 5rem);
top: 50%;
height: 1px;
background: linear-gradient(90deg, rgba(177, 132, 91, 0), rgba(177, 132, 91, 0.2), rgba(177, 132, 91, 0));
pointer-events: none;
transform: translateY(-50%);
}
.interviews-hero-copy[b-ut6aaoxxn6] {
position: relative;
z-index: 1;
min-width: 0;
align-self: center;
padding: clamp(2rem, 4vw, 3.5rem) 0;
}
.interviews-kicker[b-ut6aaoxxn6],
.featured-label[b-ut6aaoxxn6],
.interview-card-meta[b-ut6aaoxxn6] {
margin: 0 0 0.7rem;
font-family: var(--font-sans);
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: #A0633F;
}
.interviews-hero h1[b-ut6aaoxxn6] {
max-width: 100%;
margin: 0;
font-family: var(--font-serif);
font-size: 5.7rem;
font-weight: 600;
line-height: 0.96;
color: #2F251D;
overflow-wrap: anywhere;
text-wrap: balance;
}
.interviews-hero-copy p:not(.interviews-kicker)[b-ut6aaoxxn6] {
max-width: 36rem;
margin: 1.35rem 0 0;
color: #6B5848;
font-size: clamp(1.02rem, 1.3vw, 1.2rem);
line-height: 1.75;
}
.interviews-hero-note[b-ut6aaoxxn6] {
width: min(100%, 28rem);
margin-top: clamp(1.75rem, 3vw, 2.5rem);
padding-top: 1.1rem;
border-top: 1px solid rgba(177, 132, 91, 0.24);
display: grid;
gap: 0.35rem;
color: #7A604D;
font-family: var(--font-sans);
}
.interviews-hero-note span:first-child[b-ut6aaoxxn6] {
font-family: var(--font-serif);
font-size: clamp(1.16rem, 1.55vw, 1.42rem);
color: #342820;
}
.featured-interview[b-ut6aaoxxn6] {
position: relative;
min-width: 0;
min-height: clamp(390px, 46vw, 560px);
overflow: hidden;
border-radius: 8px;
display: flex;
align-items: flex-end;
color: #FFF8EE;
text-decoration: none;
box-shadow: 0 28px 58px rgba(93, 62, 32, 0.2);
border: 1px solid rgba(106, 74, 43, 0.2);
}
.featured-interview[b-ut6aaoxxn6]::before {
content: "";
position: absolute;
inset: 10px;
z-index: 1;
border: 1px solid rgba(255, 248, 238, 0.18);
border-radius: 5px;
pointer-events: none;
}
.featured-interview img[b-ut6aaoxxn6] {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.featured-interview:hover img[b-ut6aaoxxn6] {
transform: scale(1.025);
}
.featured-interview-shade[b-ut6aaoxxn6] {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(24, 18, 14, 0.08) 0%, rgba(24, 18, 14, 0.3) 38%, rgba(24, 18, 14, 0.76) 100%),
linear-gradient(90deg, rgba(24, 18, 14, 0.4), rgba(24, 18, 14, 0.08));
}
.featured-interview-content[b-ut6aaoxxn6] {
position: relative;
z-index: 2;
width: min(100%, 720px);
padding: clamp(1.65rem, 3vw, 2.75rem);
display: flex;
flex-direction: column;
gap: 0.85rem;
}
.featured-label[b-ut6aaoxxn6] {
color: #F0C99A;
margin-bottom: 0;
}
.featured-interview strong[b-ut6aaoxxn6] {
font-family: var(--font-serif);
font-size: clamp(2rem, 3.8vw, 4.1rem);
font-weight: 600;
line-height: 1.02;
overflow-wrap: anywhere;
}
.featured-interview-content span:not(.featured-label):not(.featured-link)[b-ut6aaoxxn6] {
max-width: 44rem;
color: rgba(255, 248, 238, 0.9);
line-height: 1.65;
}
.featured-link[b-ut6aaoxxn6],
.interview-card-link[b-ut6aaoxxn6],
.interviews-empty a[b-ut6aaoxxn6] {
font-family: var(--font-sans);
font-weight: 700;
color: inherit;
}
.featured-link[b-ut6aaoxxn6] {
margin-top: 0.35rem;
}
.interviews-list-section[b-ut6aaoxxn6] {
width: min(100%, 1100px);
margin: 0 auto;
scroll-margin-top: 5.5rem;
}
.interviews-section-heading[b-ut6aaoxxn6] {
display: flex;
align-items: end;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 1.35rem;
}
.interviews-section-heading h2[b-ut6aaoxxn6],
.interviews-empty h2[b-ut6aaoxxn6] {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2rem, 3vw, 3rem);
font-weight: 600;
color: #2F251D;
scroll-margin-top: 5.5rem;
}
.interviews-section-heading p[b-ut6aaoxxn6],
.interviews-empty p[b-ut6aaoxxn6] {
max-width: 34rem;
margin: 0;
color: #765E4B;
line-height: 1.65;
}
.interviews-grid[b-ut6aaoxxn6] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.15rem;
}
.interview-card[b-ut6aaoxxn6] {
min-height: 100%;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 8px;
background: rgba(255, 249, 241, 0.78);
color: #332820;
border: 1px solid rgba(177, 132, 91, 0.2);
text-decoration: none;
box-shadow: 0 16px 28px rgba(105, 75, 45, 0.09);
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.interview-card:hover[b-ut6aaoxxn6] {
transform: translateY(-3px);
border-color: rgba(177, 132, 91, 0.38);
box-shadow: 0 22px 34px rgba(105, 75, 45, 0.13);
}
.interview-card img[b-ut6aaoxxn6] {
display: block;
flex: 0 0 190px;
width: 100%;
height: 190px;
object-fit: cover;
}
.interview-card-body[b-ut6aaoxxn6] {
position: relative;
z-index: 1;
flex: 1 1 auto;
min-height: 0;
padding: 1.15rem 1.2rem 1.25rem;
display: flex;
flex-direction: column;
gap: 0.68rem;
background: rgba(255, 249, 241, 0.96);
}
.interview-card-meta[b-ut6aaoxxn6] {
margin: 0;
letter-spacing: 0.12em;
color: #A86C46;
}
.interview-card strong[b-ut6aaoxxn6] {
font-family: var(--font-serif);
font-size: 1.35rem;
line-height: 1.18;
overflow-wrap: anywhere;
}
.interview-card span:not(.interview-card-meta):not(.interview-card-link)[b-ut6aaoxxn6] {
color: #6F5B4C;
line-height: 1.62;
}
.interview-card-link[b-ut6aaoxxn6] {
margin-top: auto;
color: #8A4F32;
}
.interviews-empty[b-ut6aaoxxn6] {
width: min(100%, 760px);
margin: 5rem auto;
padding: 3rem;
text-align: center;
border: 1px solid rgba(177, 132, 91, 0.22);
border-radius: 8px;
background: rgba(255, 249, 241, 0.68);
}
.interviews-empty p[b-ut6aaoxxn6] {
margin: 1rem auto 1.4rem;
}
.interviews-empty a[b-ut6aaoxxn6] {
color: #8A4F32;
}
@media (max-width: 1024px) {
[b-ut6aaoxxn6] .toggle-sidebar,
[b-ut6aaoxxn6] .toggle-sidebar {
display: none !important;
}
.app-layout[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .app-layout {
padding-top: 60px;
}
.sidebar[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
.sidebar.visible[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar.visible {
transform: translateX(0);
}
.sidebar.hidden[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .sidebar.hidden {
transform: translateX(-100%);
}
.interviews-main[b-ut6aaoxxn6] {
margin-left: 0;
padding: 1.25rem var(--mobile-page-margin) 3rem;
}
.interviews-hero[b-ut6aaoxxn6] {
grid-template-columns: 1fr;
}
.interviews-hero h1[b-ut6aaoxxn6] {
font-size: 5rem;
}
.interviews-section-heading[b-ut6aaoxxn6] {
display: block;
}
.interviews-section-heading p[b-ut6aaoxxn6] {
margin-top: 0.55rem;
}
.interviews-grid[b-ut6aaoxxn6] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 768px) {
.app-layout[b-ut6aaoxxn6],
[b-ut6aaoxxn6] .app-layout {
padding-top: 60px;
overflow-x: hidden;
}
.interviews-hero h1[b-ut6aaoxxn6] {
font-size: 3.9rem;
}
.interviews-hero[b-ut6aaoxxn6]::before {
display: none;
}
.featured-interview[b-ut6aaoxxn6] {
min-height: 420px;
}
.featured-interview-content[b-ut6aaoxxn6] {
padding-right: 4.75rem;
}
.interviews-grid[b-ut6aaoxxn6] {
grid-template-columns: 1fr;
}
.interview-card[b-ut6aaoxxn6] {
display: flex;
}
.interview-card img[b-ut6aaoxxn6] {
flex-basis: 210px;
height: 210px;
}
.interviews-empty[b-ut6aaoxxn6] {
margin: 3rem auto;
padding: 2rem 1.25rem;
}
}
@media (max-width: 480px) {
.interviews-hero h1[b-ut6aaoxxn6] {
font-size: 3.15rem;
}
}
/* LovOne editorial application identity. */
.interviews-hero[b-ut6aaoxxn6] { display: block; margin-bottom: 40px; }
.interviews-hero[b-ut6aaoxxn6]::before, .featured-interview[b-ut6aaoxxn6]::before, .featured-interview-shade[b-ut6aaoxxn6] { display: none; }
.interviews-hero-copy[b-ut6aaoxxn6] { padding: 0 0 24px; }
.interviews-hero h1[b-ut6aaoxxn6] { font-size: clamp(2rem, 3.6vw, 3.2rem); color: var(--lov-ink); line-height: 1.15; font-weight: 450; }
.interviews-hero-copy p:not(.interviews-kicker)[b-ut6aaoxxn6] { margin-top: 12px; font-size: 1rem; color: var(--lov-muted); }
.interviews-hero-note[b-ut6aaoxxn6] { margin-top: 16px; padding-top: 12px; width: 100%; max-width: none; }
.featured-interview[b-ut6aaoxxn6] { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; min-height: 0; border: 0; border-radius: 6px; background: var(--lov-surface); color: var(--lov-ink); box-shadow: none; }
.featured-interview img[b-ut6aaoxxn6] { position: static; aspect-ratio: 16 / 10; height: auto; object-fit: cover; }
.featured-interview-content[b-ut6aaoxxn6] { padding: 24px; width: auto; }
.featured-interview strong[b-ut6aaoxxn6] { font-size: clamp(1.65rem, 2.5vw, 2.5rem); font-weight: 450; line-height: 1.18; }
.featured-label[b-ut6aaoxxn6], .featured-link[b-ut6aaoxxn6] { color: var(--lov-green); }
.featured-interview-content span:not(.featured-label):not(.featured-link)[b-ut6aaoxxn6] { color: var(--lov-muted); }
.interviews-list-section[b-ut6aaoxxn6] { width: min(100%, 1180px); }
.interviews-section-heading h2[b-ut6aaoxxn6] { font-size: 2rem; }
.interview-card[b-ut6aaoxxn6] { box-shadow: none; border-color: var(--lov-line); background: var(--lov-surface); }
@media(max-width: 700px) { .featured-interview[b-ut6aaoxxn6] { grid-template-columns: 1fr; } .featured-interview-content[b-ut6aaoxxn6] { padding: 20px; } }
.interviews-section-heading h2[b-ut6aaoxxn6], .interviews-empty h2[b-ut6aaoxxn6] { color: var(--lov-ink); }
.interviews-section-heading p[b-ut6aaoxxn6], .interviews-empty p[b-ut6aaoxxn6] { color: var(--lov-muted); }
/* The interview archive follows the homepage's open paper composition. */
.interviews-main[b-ut6aaoxxn6] { padding-top: 48px; }
.interviews-hero-copy[b-ut6aaoxxn6] { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); column-gap: 48px; align-items: start; padding-bottom: 32px; }
.interviews-kicker[b-ut6aaoxxn6], .interviews-hero h1[b-ut6aaoxxn6] { grid-column: 1; }
.interviews-hero h1[b-ut6aaoxxn6] { font-size: clamp(2.5rem,4vw,4rem); letter-spacing: -.03em; }
.interviews-hero-copy p:not(.interviews-kicker)[b-ut6aaoxxn6] { grid-column: 2; grid-row: 2; margin: 0; line-height: 1.7; }
.interviews-hero-note[b-ut6aaoxxn6] { grid-column: 2; }
.featured-interview[b-ut6aaoxxn6] { background: transparent; gap: 32px; }
.featured-interview-content[b-ut6aaoxxn6] { padding: 24px 0; }
.featured-interview img[b-ut6aaoxxn6] { border-radius: 3px; }
.interview-card[b-ut6aaoxxn6] { background: transparent; border: 0; border-radius: 0; }
.interview-card:hover[b-ut6aaoxxn6] { transform: none; box-shadow: none; }
.interview-card img[b-ut6aaoxxn6] { border-radius: 3px; }
.interview-card-body[b-ut6aaoxxn6] { padding: 20px 0 28px; background: transparent; }
.interview-card-meta[b-ut6aaoxxn6], .interviews-kicker[b-ut6aaoxxn6] { color: var(--lov-green); }
.interview-card-body strong[b-ut6aaoxxn6] { color: var(--lov-ink); font-weight: 450; }
.interview-card-body > span:not(.interview-card-meta):not(.interview-card-link)[b-ut6aaoxxn6] { color: var(--lov-muted); }
.interview-card-link[b-ut6aaoxxn6] { color: var(--lov-green); }
.interviews-list-section[b-ut6aaoxxn6] { border-top: 1px solid var(--lov-line); padding-top: 28px; }
.interviews-grid[b-ut6aaoxxn6] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.interview-card[b-ut6aaoxxn6] { display: grid; grid-template-columns: minmax(100px, .65fr) minmax(0, 1fr); align-items: start; gap: 20px; padding-block: 24px; border-bottom: 1px solid var(--lov-line); }
.interview-card img[b-ut6aaoxxn6] { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.interview-card-body[b-ut6aaoxxn6] { min-width: 0; padding: 0; }
.interview-card-body strong[b-ut6aaoxxn6] { font-size: 1.4rem; }
.interview-card:focus-visible[b-ut6aaoxxn6], .featured-interview:focus-visible[b-ut6aaoxxn6] { outline: 3px solid var(--lov-green); outline-offset: 4px; }
@media (max-width: 1200px) {
.interviews-grid[b-ut6aaoxxn6] { grid-template-columns: minmax(0, 1fr); }
.interview-card[b-ut6aaoxxn6] { grid-template-columns: minmax(120px, .4fr) minmax(0, 1fr); }
}
@media(max-width:700px) {
.interviews-main[b-ut6aaoxxn6] { padding-top: 28px; }
.interviews-hero-copy[b-ut6aaoxxn6] { display: block; }
.interviews-hero-copy p:not(.interviews-kicker)[b-ut6aaoxxn6] { margin-top: 18px; }
.featured-interview[b-ut6aaoxxn6] { gap: 0; }
.interview-card[b-ut6aaoxxn6] { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.interview-card img[b-ut6aaoxxn6] { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: cover; }
}
/* /Components/Pages/ThemesAll.razor.rz.scp.css */
/* Page background harmony */
:host[b-xtdjviig2t] {
display: block;
background: rgb(250, 236, 218);
--themes-ink: #35251e;
--themes-muted: #725d53;
}
/* App layout – mirror FrontPage */
[b-xtdjviig2t] .app-layout {
display: flex;
min-height: 100vh;
width: 100%;
min-width: 0;
overflow-x: hidden;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 64px;
/* align with the fixed logo area used by other image-led pages */
}
/* Header */
.showroom-header[b-xtdjviig2t] {
position: sticky;
top: 0;
z-index: 30;
background: rgba(250, 236, 218, 0.95);
backdrop-filter: blur(4px);
}
.header-inner[b-xtdjviig2t] {
max-width: 1100px;
margin: 0 auto;
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.brand img[b-xtdjviig2t] {
height: 28px;
}
.header-actions[b-xtdjviig2t] {
display: flex;
gap: 10px;
align-items: center;
}
.link-btn[b-xtdjviig2t] {
background: transparent;
border: none;
color: #603A2D;
cursor: pointer;
font-weight: 500;
}
.cta-outline[b-xtdjviig2t] {
border: 1px solid #C28B6C;
background: transparent;
color: #6E3E2C;
border-radius: 8px;
padding: 8px 14px;
cursor: pointer;
}
.cta-solid[b-xtdjviig2t] {
background: #E7783C;
color: #fff;
border: none;
border-radius: 8px;
padding: 9px 16px;
cursor: pointer;
box-shadow: 0 2px 6px rgba(231, 120, 60, 0.35);
}
.cta-solid:hover[b-xtdjviig2t] {
filter: brightness(0.98);
}
.header-divider[b-xtdjviig2t] {
height: 1px;
background: rgba(0, 0, 0, 0.05);
}
/* Featured hero */
.featured-hero[b-xtdjviig2t] {
position: relative;
width: 100%;
margin: 18px auto 10px;
min-height: 470px;
border-radius: 22px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
overflow: hidden;
box-shadow: 0 24px 55px rgba(77, 48, 29, 0.17);
border: 1px solid rgba(255, 244, 225, 0.38);
}
.featured-hero .overlay[b-xtdjviig2t] {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(18, 14, 9, 0.67) 0%, rgba(27, 18, 11, 0.43) 48%, rgba(27, 18, 11, 0.08) 100%),
linear-gradient(0deg, rgba(15, 11, 7, 0.22), transparent 48%);
}
.hero-content[b-xtdjviig2t] {
position: relative;
z-index: 1;
color: #FDF6EB;
min-height: 470px;
justify-content: center;
padding: 64px 58px;
max-width: 720px;
display: flex;
flex-direction: column;
gap: 16px;
}
.hero-title[b-xtdjviig2t] {
font-family: var(--font-serif);
max-width: 12ch;
font-size: clamp(3.2rem, 6.2vw, 5.25rem);
line-height: 1.01;
font-weight: var(--mobile-hero-heading-weight);
letter-spacing: -0.5px;
}
.hero-subtitle[b-xtdjviig2t] {
font-size: clamp(1.05rem, 1.7vw, 1.35rem);
line-height: 1.45;
opacity: 0.98;
max-width: 620px;
}
.cta-primary[b-xtdjviig2t] {
align-self: flex-start;
background: #E7783C;
color: #fff;
border: none;
border-radius: 10px;
padding: 14px 24px;
min-height: 48px;
font-family: var(--font-sans);
font-size: var(--mobile-button-font-size);
font-weight: var(--mobile-button-font-weight);
cursor: pointer;
box-shadow: 0 3px 10px rgba(231, 120, 60, 0.35);
transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.cta-primary:hover[b-xtdjviig2t],
.cta-primary:focus-visible[b-xtdjviig2t] {
background: #d96731;
box-shadow: 0 8px 20px rgba(140, 66, 28, 0.3);
transform: translateY(-1px);
}
.cta-primary:focus-visible[b-xtdjviig2t] {
outline: 3px solid rgba(255, 244, 222, 0.9);
outline-offset: 3px;
}
/* Explore section */
.explore-section[b-xtdjviig2t] {
max-width: 1100px;
margin: 18px auto 0;
padding: 0 20px;
}
.explore-title[b-xtdjviig2t] {
font-family: var(--font-serif);
max-width: 14ch;
font-size: clamp(2.7rem, 5vw, 4.4rem);
line-height: 1.02;
font-weight: var(--mobile-section-heading-weight);
color: var(--themes-ink);
margin: 6px 0 10px;
}
/* Initial shelf placeholder: prevents the authenticated page from rendering an empty library phase. */
.theme-library-loading[b-xtdjviig2t] {
max-width: 1100px;
width: 100%;
margin: 22px auto 48px;
padding: 0 20px;
}
.theme-loading-title[b-xtdjviig2t] {
width: min(420px, 52%);
height: 46px;
margin: 0 auto 34px;
border-radius: 8px;
background: rgba(147, 105, 82, 0.12);
}
.theme-loading-grid[b-xtdjviig2t] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px;
}
.theme-loading-card[b-xtdjviig2t] {
min-height: 312px;
padding: 0 0 18px;
overflow: hidden;
border-radius: 8px;
border: 1px solid rgba(186, 135, 99, 0.14);
background: rgba(255, 248, 239, 0.58);
box-shadow: 0 12px 26px rgba(98, 63, 43, 0.06);
}
.theme-loading-image[b-xtdjviig2t] {
width: 100%;
height: 126px;
background: rgba(147, 105, 82, 0.14);
}
.theme-loading-line[b-xtdjviig2t] {
height: 12px;
margin: 14px 18px 0;
border-radius: 8px;
background: rgba(147, 105, 82, 0.12);
}
.theme-loading-line.wide[b-xtdjviig2t] {
width: 72%;
height: 18px;
margin-top: 18px;
}
.theme-loading-line.short[b-xtdjviig2t] {
width: 44%;
}
/* Private favorites shelf */
.favorite-themes-section[b-xtdjviig2t] {
max-width: 1100px;
width: 100%;
margin: 20px auto 10px;
padding: 0 20px;
}
.favorite-themes-section-header[b-xtdjviig2t] {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
margin-bottom: 16px;
}
.favorite-themes-title[b-xtdjviig2t] {
font-family: var(--font-serif);
font-size: 34px;
font-weight: var(--mobile-section-heading-weight);
color: #3A261D;
margin: 0;
}
.favorite-themes-subtitle[b-xtdjviig2t] {
max-width: 520px;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
color: #7A6257;
margin: 0;
}
.favorite-themes-card-grid[b-xtdjviig2t] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 14px;
}
.favorite-theme-card[b-xtdjviig2t] {
display: grid;
grid-template-columns: 128px minmax(0, 1fr);
min-height: 144px;
overflow: hidden;
text-decoration: none;
color: #3A261D;
background: rgba(255, 248, 239, 0.86);
border: 1px solid rgba(186, 135, 99, 0.2);
border-radius: 14px;
box-shadow: 0 14px 30px rgba(98, 63, 43, 0.08);
transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.favorite-theme-card:hover[b-xtdjviig2t],
.favorite-theme-card:focus-visible[b-xtdjviig2t] {
transform: translateY(-2px);
border-color: rgba(167, 104, 72, 0.34);
box-shadow: 0 18px 36px rgba(98, 63, 43, 0.12);
}
.favorite-theme-card:focus-visible[b-xtdjviig2t] {
outline: 2px solid rgba(164, 102, 67, 0.55);
outline-offset: 3px;
}
.favorite-theme-card-image[b-xtdjviig2t] {
width: 100%;
height: 100%;
min-height: 144px;
object-fit: cover;
display: block;
}
.favorite-theme-card-body[b-xtdjviig2t] {
display: flex;
flex-direction: column;
height: 100%;
padding: 16px 18px 14px;
box-sizing: border-box;
}
.favorite-theme-card-persona[b-xtdjviig2t] {
display: block;
margin-bottom: 5px;
overflow: hidden;
color: #9a6a4a;
font-family: var(--font-sans);
font-size: 0.78rem;
font-weight: 650;
letter-spacing: 0;
line-height: 1.24;
text-overflow: ellipsis;
white-space: nowrap;
}
.favorite-theme-card-title[b-xtdjviig2t] {
font-family: var(--font-serif);
font-size: 22px;
line-height: 1.16;
font-weight: 700;
color: #3A261D;
margin-bottom: 8px;
}
.favorite-theme-card-description[b-xtdjviig2t] {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: var(--font-sans);
font-size: 14px;
line-height: 1.43;
color: #6F574D;
}
.favorite-theme-card-action[b-xtdjviig2t] {
margin-top: auto;
padding-top: 14px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
color: #A66342;
}
/* Quiet editorial filters */
.theme-filter-section[b-xtdjviig2t] {
max-width: 1100px;
width: 100%;
margin: -4px auto 12px;
padding: 0 20px;
}
.theme-filter-row[b-xtdjviig2t] {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
gap: 10px;
}
.theme-filter-pill[b-xtdjviig2t] {
appearance: none;
border: 0;
border-radius: 999px;
background: transparent;
color: #80675C;
cursor: pointer;
font-family: var(--font-sans);
font-size: 15px;
font-weight: 600;
padding: 9px 18px;
transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.theme-filter-pill:hover[b-xtdjviig2t],
.theme-filter-pill:focus-visible[b-xtdjviig2t] {
color: #4A2E22;
background: rgba(246, 229, 217, 0.62);
}
.theme-filter-pill:focus-visible[b-xtdjviig2t] {
outline: 2px solid rgba(164, 102, 67, 0.45);
outline-offset: 2px;
}
.theme-filter-pill.active[b-xtdjviig2t] {
background: #F6E5D9;
color: #4A2E22;
}
/* Gallery */
.gallery-section[b-xtdjviig2t] {
max-width: 1100px;
width: 100%;
margin: 20px auto 46px;
padding: 0 20px;
scroll-margin-top: 88px;
}
.theme-shelf-enter[b-xtdjviig2t] {
animation: themeshelf-soft-enter-b-xtdjviig2t 220ms ease both;
}
@keyframes themeshelf-soft-enter-b-xtdjviig2t {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.gallery-header[b-xtdjviig2t] {
max-width: 720px;
margin: 0 0 20px;
}
.gallery-title[b-xtdjviig2t] {
font-family: var(--font-serif);
font-size: clamp(2rem, 3vw, 2.8rem);
line-height: 1.06;
font-weight: var(--mobile-section-heading-weight);
color: var(--themes-ink);
margin: 0 0 6px;
}
.gallery-subtitle[b-xtdjviig2t] {
font-family: var(--font-sans);
font-size: 16px;
max-width: 62ch;
color: var(--themes-muted);
line-height: 1.55;
margin: 0;
}
/* ThemesAll uses ThemeSection/ThemeCard components; adjust layout only. */
[b-xtdjviig2t] .theme-section {
margin-bottom: 0;
overflow: visible !important;
}
[b-xtdjviig2t] .theme-section .section-header {
display: none;
}
[b-xtdjviig2t] .theme-carousel {
justify-content: flex-start !important;
padding-left: 0 !important;
padding-right: 0 !important;
overflow: visible !important;
}
[b-xtdjviig2t] .carousel-load-more-container {
display: none !important;
}
.gallery-section--portrait[b-xtdjviig2t] {
padding-top: 26px;
border-top: 1px solid rgba(104, 75, 57, 0.13);
}
.gallery-section--cinematic[b-xtdjviig2t] {
max-width: none;
margin: 26px 0 58px;
padding: clamp(3rem, 5vw, 4.6rem) clamp(1.25rem, 4vw, 3.5rem);
overflow: hidden;
border: 1px solid rgba(232, 201, 133, 0.18);
border-radius: 26px;
background-color: #13211e;
background-image:
radial-gradient(circle at 88% 12%, rgba(187, 148, 83, 0.12), transparent 31%),
linear-gradient(145deg, #0d1c19 0%, #13211e 58%, #183128 100%);
box-shadow: 0 28px 64px rgba(39, 35, 25, 0.16);
}
.gallery-section--cinematic .gallery-header[b-xtdjviig2t] {
max-width: 790px;
margin-bottom: 28px;
}
.gallery-section--cinematic .gallery-title[b-xtdjviig2t] {
color: #fff8eb;
font-size: clamp(2.5rem, 4.2vw, 4.2rem);
}
.gallery-section--cinematic .gallery-subtitle[b-xtdjviig2t] {
color: rgba(255, 248, 235, 0.76);
}
@media (max-width: 640px) {
[b-xtdjviig2t] .theme-section {
margin-bottom: 18px;
}
}
/* Create your own */
.create-own-section[b-xtdjviig2t] {
max-width: 1100px;
margin: 34px auto 48px;
padding: 0 20px;
}
.create-inner[b-xtdjviig2t] {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: 18px;
align-items: stretch;
padding: clamp(1.5rem, 3vw, 2.4rem);
border: 1px solid rgba(152, 104, 68, 0.16);
border-radius: 20px;
background: rgba(255, 249, 240, 0.76);
box-shadow: 0 18px 40px rgba(91, 60, 38, 0.08);
}
.create-left[b-xtdjviig2t] {
padding: 10px 2px;
}
.create-title[b-xtdjviig2t] {
font-family: var(--font-serif);
font-size: 28px;
font-weight: var(--mobile-section-heading-weight);
color: #3A261D;
margin: 0 0 6px;
}
.create-subtitle[b-xtdjviig2t] {
font-family: var(--font-sans);
font-size: 16px;
color: #6B5248;
margin: 0;
}
.cta-card[b-xtdjviig2t] {
display: grid;
grid-template-columns: 48px 1fr;
gap: 12px;
background: #f2d7aa;
color: #3A261D;
border: 1px solid rgba(151, 99, 58, 0.24);
border-radius: 14px;
padding: 16px;
cursor: pointer;
align-items: center;
text-align: left;
transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.cta-card:hover[b-xtdjviig2t],
.cta-card:focus-visible[b-xtdjviig2t] {
background: #edcc96;
box-shadow: 0 10px 24px rgba(111, 73, 42, 0.14);
transform: translateY(-1px);
}
.cta-card:focus-visible[b-xtdjviig2t] {
outline: 3px solid rgba(151, 99, 58, 0.34);
outline-offset: 3px;
}
.cta-card .cta-icon[b-xtdjviig2t] {
font-size: 28px;
}
.cta-card-title[b-xtdjviig2t] {
font-family: var(--font-sans);
font-size: 18px;
font-weight: 600;
}
.cta-card-sub[b-xtdjviig2t] {
font-family: var(--font-sans);
font-size: 15px;
color: #745343;
}
/* Responsive */
@media (max-width: 1024px) {
.themes-grid[b-xtdjviig2t] {
grid-template-columns: repeat(2, 1fr);
}
.favorite-themes-card-grid[b-xtdjviig2t] {
grid-template-columns: 1fr;
}
.theme-loading-grid[b-xtdjviig2t] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.featured-hero[b-xtdjviig2t] {
min-height: 440px;
margin-top: 40px;
}
.hero-title[b-xtdjviig2t] {
font-size: clamp(40px, 6.5vw, 64px);
}
}
@media (max-width: 640px) {
.themes-grid[b-xtdjviig2t] {
grid-template-columns: 1fr;
}
.create-inner[b-xtdjviig2t] {
grid-template-columns: 1fr;
}
.featured-hero[b-xtdjviig2t] {
min-height: 320px;
margin-top: 40px;
}
/* Use the shared mobile page gutter */
.theme-library-loading[b-xtdjviig2t],
.explore-section[b-xtdjviig2t],
.favorite-themes-section[b-xtdjviig2t],
.theme-filter-section[b-xtdjviig2t],
.gallery-section[b-xtdjviig2t],
.create-own-section[b-xtdjviig2t] {
padding: 0 var(--mobile-page-margin);
}
.favorite-themes-section-header[b-xtdjviig2t] {
align-items: flex-start;
flex-direction: column;
gap: 8px;
}
.favorite-themes-title[b-xtdjviig2t] {
font-size: 30px;
}
.favorite-theme-card[b-xtdjviig2t] {
grid-template-columns: 108px minmax(0, 1fr);
min-height: 132px;
}
.favorite-theme-card-image[b-xtdjviig2t] {
min-height: 132px;
}
.favorite-theme-card-body[b-xtdjviig2t] {
padding: 14px 14px 12px;
}
.favorite-theme-card-title[b-xtdjviig2t] {
font-size: 20px;
}
.hero-content[b-xtdjviig2t] {
padding: 36px 28px;
}
}
@media (max-width: 420px) {
.favorite-theme-card[b-xtdjviig2t] {
grid-template-columns: 94px minmax(0, 1fr);
}
.favorite-theme-card-description[b-xtdjviig2t] {
-webkit-line-clamp: 2;
}
.theme-filter-row[b-xtdjviig2t] {
justify-content: flex-start;
}
.theme-loading-grid[b-xtdjviig2t] {
grid-template-columns: 1fr;
}
.theme-loading-title[b-xtdjviig2t] {
width: 70%;
}
}
@media (prefers-reduced-motion: reduce) {
.theme-shelf-enter[b-xtdjviig2t],
.favorite-theme-card[b-xtdjviig2t],
.theme-filter-pill[b-xtdjviig2t] {
animation: none;
transition: none;
}
.favorite-theme-card:hover[b-xtdjviig2t],
.favorite-theme-card:focus-visible[b-xtdjviig2t] {
transform: none;
}
}
/* Sidebar and layout (mirrors FrontPage) */
/* app-layout flex already defined at top to mirror FrontPage */
/* Button styles (copied from FrontPage) */
[b-xtdjviig2t] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
}
[b-xtdjviig2t] .btn:hover {
background-color: #FADDAA;
}
[b-xtdjviig2t] .btn-login {
background-color: #FBCFA8;
}
/* Sidebar container-specific width for buttons */
[b-xtdjviig2t] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar */
[b-xtdjviig2t] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-xtdjviig2t] .sidebar.hidden {
transform: translateX(-100%);
}
[b-xtdjviig2t] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
margin-bottom: 1.0rem;
}
[b-xtdjviig2t] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-xtdjviig2t] .sidebar-logo {
text-align: center;
}
[b-xtdjviig2t] .sidebar-logo img {
display: inline-block;
max-width: 180px;
height: 50px;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
}
[b-xtdjviig2t] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-xtdjviig2t] .sidebar a:hover {
color: #000;
}
[b-xtdjviig2t] .sidebar-nav {
width: 100%;
text-align: center;
margin-bottom: 1.5rem;
}
[b-xtdjviig2t] .sidebar-nav h3 {
font-family: var(--font-serif);
font-size: 1.2rem;
color: #4b2e2e;
margin-bottom: 0.5rem;
}
[b-xtdjviig2t] .sidebar-nav p {
font-size: 0.95rem;
color: #6a504b;
line-height: 1.4;
margin: 0;
}
[b-xtdjviig2t] .action-buttons {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 1.5rem;
}
[b-xtdjviig2t] .nav-button {
width: 100%;
padding: 0.9rem 1rem;
background-color: var(--loved-one-peach);
color: var(--loved-one-text);
border: none;
border-radius: 10px;
cursor: pointer;
font-weight: 600;
text-align: center;
/* inherited font-sans */
font-size: 0.95rem;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
}
[b-xtdjviig2t] .nav-button:hover,
[b-xtdjviig2t] .nav-button.active {
background-color: var(--loved-one-accent);
}
[b-xtdjviig2t] .nav-button .fas {
font-size: 1em;
}
/* Sidebar bottom user */
[b-xtdjviig2t] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-xtdjviig2t] .sidebar-divider {
width: 100%;
height: 1px;
background: #e0d6d1;
margin-bottom: 1rem;
}
[b-xtdjviig2t] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: background-color .2s ease;
}
[b-xtdjviig2t] .sidebar-user:hover {
background-color: rgba(255, 228, 210, .5);
}
[b-xtdjviig2t] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: #4F4A45;
}
[b-xtdjviig2t] .user-name {
font-size: .95rem;
color: #4b2e2e;
font-weight: 600;
}
[b-xtdjviig2t] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-xtdjviig2t] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background: #fff;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
}
[b-xtdjviig2t] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: .9rem;
color: #4F4A45;
display: flex;
align-items: center;
}
[b-xtdjviig2t] .dropdown-item:hover {
background: #f0dad3;
}
/* Toggle button */
[b-xtdjviig2t] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Hide desktop toggle on mobile/tablet - mobile top bar provides hamburger */
@media (max-width: 1024px) {
[b-xtdjviig2t] .mobile-floating-header {
z-index: 1200;
}
[b-xtdjviig2t] .toggle-sidebar {
display: none !important;
}
/* Sidebar starts below the floating mobile header */
[b-xtdjviig2t] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
transition: transform 0.3s ease;
}
[b-xtdjviig2t] .sidebar.visible {
transform: translateX(0);
}
[b-xtdjviig2t] .sidebar.hidden {
transform: translateX(-100%);
}
/* Adjust app layout for mobile top bar */
.app-layout[b-xtdjviig2t],
[b-xtdjviig2t] .app-layout {
display: block;
padding-top: 60px;
width: 100%;
max-width: 100vw;
overflow-x: hidden;
background-color: var(--lov-paper);
}
.container-v3[b-xtdjviig2t] {
margin-left: 0;
}
[b-xtdjviig2t] .main-footer {
margin-left: 0 !important;
}
}
/* ≤768px: Reinforce sidebar positioning for phones */
@media (max-width: 768px) {
.app-layout[b-xtdjviig2t],
[b-xtdjviig2t] .app-layout {
padding-top: 60px;
overflow-x: hidden;
}
[b-xtdjviig2t] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-xtdjviig2t] .sidebar.visible {
transform: translateX(0);
}
[b-xtdjviig2t] .sidebar.hidden {
transform: translateX(-100%);
}
.container-v3[b-xtdjviig2t] {
padding: 0 var(--mobile-page-margin) 40px;
}
}
/* Mobile top bar - now handled by shared MobileTopBar component */
/* Removed redundant ::deep .mobile-top-bar styles - see Components/MobileTopBar.razor.css */
/* Main content container accounting for sidebar */
.container-v3[b-xtdjviig2t] {
flex: 1;
max-width: 1200px;
margin: 30px auto;
margin-left: 280px;
min-width: 0;
padding: 0 20px 40px;
display: flex;
flex-direction: column;
gap: 24px;
transition: margin-left .3s ease;
box-sizing: border-box;
}
.container-v3.sidebar-hidden[b-xtdjviig2t] {
margin-left: 0;
}
@media (max-width: 1024px) {
.container-v3[b-xtdjviig2t],
.container-v3.sidebar-hidden[b-xtdjviig2t] {
flex: none;
width: 100%;
max-width: 720px;
margin: 0 auto;
padding: 0 0 44px;
gap: 34px;
}
.featured-hero[b-xtdjviig2t] {
width: auto;
min-height: 420px;
margin: 22px 18px 18px;
border-radius: 18px;
background-position: center;
box-shadow: 0 16px 34px rgba(106, 72, 42, 0.13);
}
.featured-hero .overlay[b-xtdjviig2t] {
background:
linear-gradient(90deg, rgba(30, 18, 10, 0.52) 0%, rgba(35, 20, 12, 0.34) 56%, rgba(35, 20, 12, 0.18) 100%);
}
.hero-content[b-xtdjviig2t] {
min-height: 420px;
justify-content: center;
padding: 56px 40px 38px;
max-width: min(680px, 100%);
box-sizing: border-box;
}
.hero-title[b-xtdjviig2t] {
font-size: clamp(2.75rem, 8vw, 4rem);
line-height: 1.08;
letter-spacing: 0;
}
.hero-subtitle[b-xtdjviig2t] {
max-width: 34rem;
font-size: clamp(1.08rem, 3vw, 1.35rem);
line-height: 1.38;
}
.explore-section[b-xtdjviig2t] {
width: 100%;
max-width: 720px;
margin: 0 auto;
}
.explore-title[b-xtdjviig2t] {
font-size: clamp(2.65rem, 8.5vw, 4.4rem);
line-height: 1.12;
letter-spacing: 0;
}
}
@media (max-width: 768px) {
.container-v3[b-xtdjviig2t],
.container-v3.sidebar-hidden[b-xtdjviig2t] {
max-width: 680px;
padding-bottom: 40px;
gap: 30px;
}
}
@media (max-width: 680px) {
.featured-hero[b-xtdjviig2t] {
min-height: 430px;
margin: 22px var(--mobile-page-margin, 16px) 18px;
border-radius: 16px;
background-position: 58% center;
}
.hero-content[b-xtdjviig2t] {
min-height: 430px;
align-items: flex-start;
justify-content: flex-start;
padding: 70px 20px 26px;
gap: 12px;
}
.hero-title[b-xtdjviig2t] {
max-width: 18rem;
font-size: clamp(2.25rem, 10vw, 2.72rem);
}
.hero-subtitle[b-xtdjviig2t] {
max-width: 19.5rem;
font-size: clamp(1.05rem, 5.2vw, 1.28rem);
line-height: 1.36;
}
.cta-primary[b-xtdjviig2t] {
width: 100%;
max-width: 220px;
min-height: 50px;
border-radius: 12px;
padding: 12px 18px;
}
.explore-section[b-xtdjviig2t] {
padding: 0 var(--mobile-page-margin, 16px);
}
.explore-title[b-xtdjviig2t] {
font-size: clamp(2.75rem, 12vw, 3.8rem);
line-height: 1.12;
margin: 0;
}
}
@media (max-width: 420px) {
.hero-content[b-xtdjviig2t] {
padding-top: 68px;
}
.hero-title[b-xtdjviig2t] {
font-size: clamp(2.18rem, 9.7vw, 2.5rem);
}
}
/* Footer alignment identical to FrontPage */
/* --- New Footer Styles --- */
[b-xtdjviig2t] .main-footer {
/* This creates the full-width "floor" for the page */
/* width: calc(100% - 280px); Subtract sidebar width from total width */
margin-left: 280px;
/* Start where main content starts */
background-color: #FAF3E5;
/* Match the warm card background color */
padding: 60px 0 30px 0;
margin-top: 80px;
/* Space above the footer */
color: #4F4A45;
border-top: 1px solid #f0dad3;
/* Remove grid-area, as the footer is no longer part of the content grid */
}
[b-xtdjviig2t] .main-footer.sidebar-hidden {
margin-left: 0;
/* Remove left margin when sidebar is hidden */
width: 100%;
}
/* A container to keep the footer content aligned with the main page content */
[b-xtdjviig2t] .footer-container {
max-width: 1200px;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
}
/* When sidebar is hidden, use full width container */
[b-xtdjviig2t] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
/* Center when sidebar is hidden */
}
/* 1. Brand Section */
[b-xtdjviig2t] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-xtdjviig2t] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-xtdjviig2t] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
/* 2. Navigation Links Section */
[b-xtdjviig2t] .footer-nav-links {
/* Use Flexbox to group and center the items */
display: flex;
justify-content: center;
flex-wrap: wrap;
/* Allows wrapping on smaller screens */
/* The 'gap' now controls the space BETWEEN the columns */
gap: 80px;
/* Adjust this value to your liking (e.g., 60px, 100px) */
margin-bottom: 40px;
}
[b-xtdjviig2t] .footer-section {
padding: 0 var(--mobile-page-margin);
/* Adds some space for smaller screens */
}
[b-xtdjviig2t] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-xtdjviig2t] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-xtdjviig2t] .footer-section ul li {
margin-bottom: 10px;
}
[b-xtdjviig2t] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-xtdjviig2t] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
/* 3. Bottom Bar (Utilities & Legal) */
[b-xtdjviig2t] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
/* Allows items to wrap on small screens */
gap: 20px;
}
[b-xtdjviig2t] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-xtdjviig2t] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-xtdjviig2t] .footer-languages a:hover,
[b-xtdjviig2t] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
/* NEW: Wrapper for the right-aligned text */
[b-xtdjviig2t] .footer-legal-origin {
text-align: right;
}
/* NEW: Style for the "Made by" line */
[b-xtdjviig2t] .footer-made-by {
font-size: 0.85em;
color: #888;
margin: 0 0 5px 0;
/* Add a little space below it */
}
[b-xtdjviig2t] .footer-copyright {
font-size: 0.85em;
color: #888;
margin: 0;
/* Remove default paragraph margins */
text-align: left;
/* Ensure it stays right-aligned */
}
/* Sidebar overlay for mobile */
.sidebar-overlay[b-xtdjviig2t] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, .4);
z-index: 9;
}
.sidebar-overlay.hidden[b-xtdjviig2t] {
display: none;
}
/* Responsive switches */
@media (max-width: 1024px) {
.mobile-top-bar[b-xtdjviig2t] {
display: flex;
}
}
/* Keep desktop hero placement aligned with other image-led landing pages. */
@media (min-width: 1025px) {
[b-xtdjviig2t] .app-layout,
.app-layout[b-xtdjviig2t] {
padding-top: 64px;
}
.container-v3[b-xtdjviig2t],
.container-v3.sidebar-hidden[b-xtdjviig2t] {
margin-top: 0;
}
.featured-hero[b-xtdjviig2t] {
margin-top: 0;
}
}
/* Final responsive overrides for the editorial library bands. */
@media (max-width: 1024px) {
.gallery-section--cinematic[b-xtdjviig2t] {
width: auto;
margin: 20px 18px 50px;
padding: 48px 28px;
}
.gallery-section--cinematic .gallery-header[b-xtdjviig2t] {
margin-bottom: 24px;
}
}
@media (max-width: 680px) {
.gallery-section--cinematic[b-xtdjviig2t] {
margin: 12px var(--mobile-page-margin, 16px) 42px;
padding: 36px 16px 18px;
border-radius: 20px;
}
.gallery-section--cinematic .gallery-title[b-xtdjviig2t] {
font-size: clamp(2.35rem, 11vw, 3.2rem);
}
.gallery-section--portrait[b-xtdjviig2t] {
padding-top: 20px;
}
.create-inner[b-xtdjviig2t] {
padding: 1.25rem;
border-radius: 16px;
}
}
@media (prefers-reduced-motion: reduce) {
.cta-primary[b-xtdjviig2t],
.cta-card[b-xtdjviig2t] {
transition: none;
}
.cta-primary:hover[b-xtdjviig2t],
.cta-primary:focus-visible[b-xtdjviig2t],
.cta-card:hover[b-xtdjviig2t],
.cta-card:focus-visible[b-xtdjviig2t] {
transform: none;
}
}
/* LovOne editorial application identity. */
.library-heading[b-xtdjviig2t] { padding: 16px 0 20px; }
.library-heading h1[b-xtdjviig2t] { font-size: clamp(2rem, 3.5vw, 3.2rem); font-weight: 450; color: var(--lov-ink); }
.library-jump-links[b-xtdjviig2t] { display: flex; flex-wrap: wrap; gap: 8px 20px; padding-bottom: 24px; border-bottom: 1px solid var(--lov-line); }
.library-jump-links a[b-xtdjviig2t] { padding: 10px 0; color: var(--lov-green); font: 500 .95rem var(--font-sans); text-decoration: none; }
.library-jump-links a:hover[b-xtdjviig2t] { text-decoration: underline; text-underline-offset: 5px; }
.gallery-section[b-xtdjviig2t] { margin-top: 32px; scroll-margin-top: 90px; }
.gallery-title[b-xtdjviig2t] { font-size: clamp(1.5rem, 2.4vw, 2rem); color: var(--lov-ink); }
.gallery-subtitle[b-xtdjviig2t] { color: var(--lov-muted); }
.theme-filter-pill.active[b-xtdjviig2t] { background: var(--lov-green); color: var(--lov-on-green); }
@media (max-width: 680px) {
.library-heading[b-xtdjviig2t] { padding-inline: 16px; }
.library-jump-links[b-xtdjviig2t] { margin-inline: 16px; }
}
/* Read the scene, then the invitation: captions sit on paper instead of over imagery. */
.library-heading[b-xtdjviig2t] { max-width: 1100px; margin-inline: auto; padding: 24px 20px 32px; }
.library-heading h1[b-xtdjviig2t] { max-width: 20ch; font-size: clamp(2.5rem,4vw,4rem); line-height: 1.08; letter-spacing: -.03em; }
.library-heading p[b-xtdjviig2t] { max-width: 52ch; margin-top: 18px; color: var(--lov-muted); line-height: 1.7; }
.library-jump-links[b-xtdjviig2t] { max-width: 1060px; margin-inline: auto; gap: 4px 24px; }
.gallery-section[b-xtdjviig2t] { margin-block: 48px 64px; }
.gallery-header[b-xtdjviig2t] { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: none; align-items: end; margin-bottom: 24px; }
.gallery-title[b-xtdjviig2t] { font-weight: 450; font-size: clamp(1.8rem,2.5vw,2.5rem); }
.gallery-subtitle[b-xtdjviig2t] { max-width: 42ch; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card:hover { transform: none; box-shadow: none; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card::before,
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card::after { display: none; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-image { position: static; width: 100%; height: 250px; object-fit: cover; border-radius: 3px; transform: none; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-image { height: 340px; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-content { position: static; display: flex; flex-direction: column; padding: 20px 0 24px; background: transparent; min-height: 0; color: var(--lov-ink); }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-content h3 { color: var(--lov-ink); font-weight: 450; font-size: 1.5rem; line-height: 1.2; text-shadow: none; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-content h3 { font-size: 2rem; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .subtitle { color: var(--lov-muted); font-size: .95rem; line-height: 1.65; text-shadow: none; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-persona-name,
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-card-action { color: var(--lov-green); }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .subscription-status,
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .subscription-status:hover,
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .subscription-status:focus-visible { color: var(--lov-green); }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .subscription-status:focus-visible { outline: 2px solid var(--lov-green); outline-offset: 2px; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card-link:focus-visible { outline: 3px solid var(--lov-green); outline-offset: 5px; border-radius: 3px; }
.gallery-section--cinematic[b-xtdjviig2t] { background: var(--lov-green); border: 0; border-radius: 3px; box-shadow: none; }
.gallery-section--cinematic .gallery-title[b-xtdjviig2t] { color: var(--lov-on-green); }
.gallery-section--cinematic .gallery-subtitle[b-xtdjviig2t] { color: var(--lov-on-green); }
@media(max-width: 700px) {
.library-heading[b-xtdjviig2t] { padding: 20px 16px 24px; }
.library-jump-links[b-xtdjviig2t] { margin-inline: 16px; }
.gallery-header[b-xtdjviig2t] { grid-template-columns: 1fr; gap: 8px; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-image,
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-image { height: auto; aspect-ratio: 4 / 3; }
}
/* One sidebar offset and one shared reading edge across the catalogue. */
.app-layout[b-xtdjviig2t] { display: block; width: 100%; min-width: 0; padding-top: 0; background: var(--lov-paper); }
.container-v3[b-xtdjviig2t] {
width: calc(100% - 280px);
max-width: none;
margin: 0 0 0 280px;
padding: 48px clamp(24px, 4vw, 64px) 64px;
gap: 24px;
}
.container-v3.sidebar-hidden[b-xtdjviig2t] { width: 100%; margin-left: 0; }
.container-v3 > *[b-xtdjviig2t] { width: 100%; max-width: 1120px; margin-inline: auto; }
.library-heading[b-xtdjviig2t] { padding: 0; }
.library-heading h1[b-xtdjviig2t] { max-width: none; margin-top: 0; font-size: clamp(2rem, 3vw, 3.2rem); }
.library-heading p[b-xtdjviig2t] { margin-bottom: 0; }
.library-jump-links[b-xtdjviig2t] { padding-bottom: 20px; }
.gallery-section[b-xtdjviig2t] { margin-block: 8px 32px; }
.gallery-header[b-xtdjviig2t] { margin-bottom: 20px; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-carousel {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: start;
gap: 20px;
padding: 0;
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card {
width: auto;
min-width: 0;
max-width: none;
grid-column: span 1;
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead {
grid-column: span 2;
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-image {
height: 220px;
aspect-ratio: auto;
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-image {
height: 360px;
object-position: var(--catalogue-artwork-position, center top);
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-content h3 {
font-size: 1.75rem;
}
@media (min-width: 1100px) {
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-carousel {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (min-width: 701px) and (max-width: 1099px) {
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-carousel {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-image {
height: 240px;
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-image {
height: 300px;
}
}
@media (max-width: 1024px) {
.app-layout[b-xtdjviig2t] { padding-top: 72px; }
.container-v3[b-xtdjviig2t], .container-v3.sidebar-hidden[b-xtdjviig2t] { width: 100%; max-width: none; margin: 0; padding: 32px 24px 48px; }
}
@media (max-width: 700px) {
.container-v3[b-xtdjviig2t], .container-v3.sidebar-hidden[b-xtdjviig2t] { padding-inline: 20px; }
.library-heading[b-xtdjviig2t] { padding: 0; }
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-carousel {
grid-template-columns: minmax(0, 1fr);
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card,
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead {
grid-column: 1 / -1;
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card .theme-image,
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-image {
height: auto;
aspect-ratio: 4 / 3;
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] .theme-card.theme-card--lead .theme-content h3 {
font-size: 1.6rem;
}
}
.gallery-section:not(.gallery-section--cinematic)[b-xtdjviig2t] { padding-inline: 0; }
/* /Components/Pages/VaultMessages.razor.rz.scp.css */
/* ===========================================
LAYOUT & NAVIGATION STYLES
=========================================== */
/* Global body/html overflow prevention - REMOVED */
/* App Layout */
[b-byq7ws25rc] .app-layout {
display: flex;
width: 100%;
min-width: 0;
min-height: 100vh;
overflow-x: hidden;
/* inherited font-sans */
background-color: var(--lov-paper);
padding-top: 80px;
/* Account for fixed logo */
}
/* Hide desktop toggle-sidebar on mobile - MobileTopBar has hamburger */
@media (max-width: 1024px) {
[b-byq7ws25rc] .toggle-sidebar {
display: none !important;
}
}
/* Sidebar */
[b-byq7ws25rc] .sidebar {
width: 280px;
background: var(--lov-paper);
padding: 1.5rem;
border-right: 1px solid #f0dad3;
display: flex;
flex-direction: column;
align-items: center;
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 10;
transition: transform 0.3s ease;
}
[b-byq7ws25rc] .sidebar.hidden {
transform: translateX(-100%);
}
[b-byq7ws25rc] .sidebar .logo {
font-family: var(--font-sans) !important;
font-size: 1.4em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 2rem;
}
[b-byq7ws25rc] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-byq7ws25rc] .sidebar a:hover {
color: #000;
}
[b-byq7ws25rc] .sidebar .btn-login {
width: 100%;
background: #FBCFA8;
margin-bottom: 1rem;
}
/* Sidebar Logo Styles */
[b-byq7ws25rc] .sidebar-top-content {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
flex-shrink: 0;
margin-bottom: 1.0rem;
}
[b-byq7ws25rc] .app-logo-link {
display: block;
width: 100%;
text-decoration: none;
text-align: center;
margin-top: -1.2rem;
}
[b-byq7ws25rc] .app-logo-link:hover {
outline: none;
border: none;
background: none;
}
[b-byq7ws25rc] .app-logo-link:focus {
outline: none;
border: none;
background: none;
}
[b-byq7ws25rc] .sidebar-logo {
text-align: center;
}
[b-byq7ws25rc] .sidebar-logo img {
display: inline-block;
max-width: 180px;
width: auto;
height: 50px;
vertical-align: middle;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0;
transition: none !important;
}
[b-byq7ws25rc] .sidebar a {
display: block;
margin-bottom: 1rem;
font-weight: 700;
color: #4F4A45;
text-decoration: none;
text-align: center;
cursor: pointer;
}
[b-byq7ws25rc] .sidebar a:hover {
color: #000;
}
/* Sidebar Bottom User Section */
[b-byq7ws25rc] .sidebar-bottom {
margin-top: auto;
padding-top: 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
[b-byq7ws25rc] .sidebar-divider {
width: 100%;
height: 1px;
background-color: #e0d6d1;
margin-bottom: 1rem;
}
[b-byq7ws25rc] .sidebar-user {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.4rem;
cursor: pointer;
transition: background-color 0.2s ease;
padding: 0.5rem;
border-radius: 8px;
transition: background-color 0.3s ease-in-out;
}
[b-byq7ws25rc] .sidebar-user:hover {
background-color: rgba(255, 228, 210, 0.5);
}
[b-byq7ws25rc] .user-avatar-circle {
width: 48px;
height: 48px;
background: linear-gradient(135deg, #ffc4b3, #ffdacf);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 1.2rem;
color: var(--text, #4F4A45);
}
[b-byq7ws25rc] .user-name {
font-size: 0.95rem;
color: #4b2e2e;
font-weight: 600;
}
/* User Dropdown */
[b-byq7ws25rc] .user-dropdown-container {
position: relative;
display: inline-block;
}
[b-byq7ws25rc] .user-dropdown-menu {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-40%);
background-color: white;
border: 1px solid #ccc;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
min-width: 150px;
padding: 8px 0;
animation: fadeIn-b-byq7ws25rc 0.2s ease-in-out;
}
@keyframes fadeIn-b-byq7ws25rc {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
[b-byq7ws25rc] .dropdown-item {
padding: 10px 15px;
cursor: pointer;
font-size: 0.9rem;
color: #4F4A45;
transition: background-color 0.2s ease;
display: flex;
align-items: center;
}
[b-byq7ws25rc] .dropdown-item:hover {
background-color: #f0dad3;
}
/* Button Styles */
[b-byq7ws25rc] .btn {
padding: 10px 20px;
border: none;
border-radius: 25px;
cursor: pointer;
font-weight: 700;
font-size: 1em;
transition: background-color 0.3s ease;
background-color: #F5DDC3;
color: #4F4A45;
border: 1px solid #EADDC0;
}
[b-byq7ws25rc] .btn:hover {
background-color: #FADDAA;
}
[b-byq7ws25rc] .btn-login {
background-color: #FBCFA8;
}
[b-byq7ws25rc] .btn-primary {
padding: 12px 25px;
margin-top: 10px;
background-color: #FBCFA8;
}
[b-byq7ws25rc] .btn-secondary {
padding: 8px 18px;
margin-top: 10px;
}
/* Load More Button */
[b-byq7ws25rc] .load-more-container {
display: flex;
justify-content: center;
margin: 2rem 0;
padding: 1rem;
}
[b-byq7ws25rc] .load-more-btn {
background: #7B5A53;
color: white;
border: none;
padding: 0.75rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(123, 90, 83, 0.2);
}
[b-byq7ws25rc] .load-more-btn:hover:not(:disabled) {
background: #5d453f;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(123, 90, 83, 0.3);
}
[b-byq7ws25rc] .load-more-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
[b-byq7ws25rc] .load-more-btn:disabled:hover {
background: #7B5A53;
box-shadow: 0 2px 8px rgba(123, 90, 83, 0.2);
}
/* Toggle Sidebar Button */
[b-byq7ws25rc] .toggle-sidebar {
position: fixed;
top: 1rem;
left: 1rem;
z-index: 100;
}
/* Main Messages Container - Two Column Layout */
[b-byq7ws25rc] .messages-container {
flex: 1;
min-width: 0;
margin-left: 280px;
padding: 0;
max-width: 1200px;
box-sizing: border-box;
transition: margin-left 0.3s ease;
min-height: 100vh;
background: var(--lov-paper);
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-areas:
"header header"
"main-content sidebar-content";
gap: 0;
}
[b-byq7ws25rc] .messages-container.sidebar-hidden {
margin-left: 0;
}
/* Sidebar Overlay */
.sidebar-overlay[b-byq7ws25rc] {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background-color: rgba(0, 0, 0, 0.4);
z-index: 9;
transition: opacity 0.3s ease;
touch-action: none;
/* Prevent scroll-through when overlay is visible */
}
.sidebar-overlay.hidden[b-byq7ws25rc] {
display: none;
}
/* ===========================================
VAULT MESSAGES - ELEGANT MASONRY DESIGN
=========================================== */
/* Page Layout & Container */
[b-byq7ws25rc] .messages-container {
min-height: calc(100vh - 60px);
padding: 0;
background: var(--lov-paper);
}
/* Vault Header */
[b-byq7ws25rc] .vault-header {
grid-area: header;
text-align: center;
padding: 3rem 2rem 2rem;
max-width: 800px;
margin: 0 auto;
}
/* Main Content Area (left column) */
[b-byq7ws25rc] .main-content-area {
grid-area: main-content;
padding: 0 2rem 3rem 2rem;
position: relative;
}
[b-byq7ws25rc] .loading-container {
display: flex;
align-items: center;
justify-content: center;
min-height: 320px;
padding: 3rem 0;
}
[b-byq7ws25rc] .vault-loader {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.75rem;
text-align: center;
color: #5B4F45;
}
[b-byq7ws25rc] .vault-loader-image {
width: 90px;
height: auto;
animation: candleGlow-b-byq7ws25rc 1.6s ease-in-out infinite alternate;
filter: drop-shadow(0 10px 26px rgba(251, 160, 97, 0.35));
}
[b-byq7ws25rc] .vault-loader-title {
font-family: var(--font-serif);
font-size: 1.3rem;
font-weight: 400;
letter-spacing: 0.01em;
color: #2C2A28;
margin: 0;
}
[b-byq7ws25rc] .vault-loader-subtitle {
/* inherited font-sans */
font-size: 1rem;
color: #7B5A53;
margin: 0;
}
@keyframes candleGlow-b-byq7ws25rc {
0% {
transform: translateY(0px) scale(1);
opacity: 0.95;
}
50% {
transform: translateY(-1px) scale(1.03);
opacity: 1;
}
100% {
transform: translateY(1px) scale(0.98);
opacity: 0.9;
}
}
/* Sidebar Content Area (right column) */
[b-byq7ws25rc] .sidebar-content-area {
grid-area: sidebar-content;
padding: 0 2rem 3rem 1.5rem;
position: relative;
}
[b-byq7ws25rc] .vault-header h1 {
font-family: var(--font-serif);
font-size: 2.5rem;
font-weight: var(--mobile-hero-heading-weight);
color: #2C2A28;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
[b-byq7ws25rc] .vault-subtitle {
/* inherited font-sans */
font-size: 1.1rem;
line-height: 1.6;
color: #6B5B57;
margin: 0;
max-width: 600px;
margin: 0 auto;
}
/* ===========================================
TODAY'S MEMORY CARD - SIDEBAR PLACEMENT
=========================================== */
[b-byq7ws25rc] .today-memory-wrapper {
margin-bottom: 2rem;
}
[b-byq7ws25rc] .today-memory-card {
background: #FFF8F3;
border: 1px solid #F0E6D2;
border-radius: 16px;
padding: 1.5rem;
width: 100%;
box-shadow: 0 4px 20px rgba(43, 42, 40, 0.08);
position: relative;
transform: rotate(-0.3deg);
transition: all 0.3s ease;
}
[b-byq7ws25rc] .today-memory-card:hover {
transform: rotate(0deg) translateY(-2px);
box-shadow: 0 6px 30px rgba(43, 42, 40, 0.12);
}
[b-byq7ws25rc] .today-memory-header {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
[b-byq7ws25rc] .today-memory-icon {
font-size: 1.2rem;
}
[b-byq7ws25rc] .today-memory-title {
/* inherited font-sans */
font-weight: 600;
font-size: 0.9rem;
color: #7B5A53;
text-transform: uppercase;
letter-spacing: 0.05em;
}
[b-byq7ws25rc] .today-memory-text {
font-family: var(--font-sans);
font-size: 1.1rem;
line-height: 1.6;
color: #2C2A28;
margin-bottom: 1.5rem;
font-weight: 300;
}
[b-byq7ws25rc] .today-memory-meta {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
[b-byq7ws25rc] .today-memory-avatar {
width: 32px;
height: 32px;
border-radius: 50%;
background: #F0E6D2;
}
[b-byq7ws25rc] .today-memory-name {
/* inherited font-sans */
font-weight: 500;
font-size: 0.9rem;
color: #7B5A53;
}
[b-byq7ws25rc] .today-memory-context {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
[b-byq7ws25rc] .today-memory-date {
/* inherited font-sans */
font-size: 0.85rem;
color: #A67B5B;
opacity: 0.8;
}
/* ===========================================
FILTER & SORT SECTION
=========================================== */
[b-byq7ws25rc] .vault-filters {
display: flex;
justify-content: flex-end;
padding: 0 2rem;
margin-bottom: 2rem;
position: relative;
}
[b-byq7ws25rc] .filter-sort-btn {
background: #F5E6D3;
border: 1px solid #E8DCC0;
border-radius: 25px;
padding: 0.6rem 1.2rem;
/* inherited font-sans */
font-size: 0.9rem;
font-weight: 500;
color: #7B5A53;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
[b-byq7ws25rc] .filter-sort-btn:hover {
background: #EFDCC7;
border-color: #D4C19A;
}
[b-byq7ws25rc] .filter-icon {
font-size: 0.8rem;
transform: rotate(0deg);
transition: transform 0.2s ease;
}
[b-byq7ws25rc] .filter-dropdown {
position: absolute;
top: 100%;
right: 0;
background: white;
border: 1px solid #E8DCC0;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(43, 42, 40, 0.15);
padding: 1.5rem;
width: 280px;
z-index: 100;
margin-top: 0.5rem;
}
[b-byq7ws25rc] .filter-dropdown-title {
/* inherited font-sans */
font-size: 1rem;
font-weight: 600;
color: #2C2A28;
margin-bottom: 1rem;
}
[b-byq7ws25rc] .filter-group {
margin-bottom: 1rem;
}
[b-byq7ws25rc] .filter-label {
display: block;
/* inherited font-sans */
font-size: 0.85rem;
font-weight: 500;
color: #7B5A53;
margin-bottom: 0.4rem;
}
[b-byq7ws25rc] .filter-select {
width: 100%;
padding: 0.5rem;
border: 1px solid #E8DCC0;
border-radius: 8px;
/* inherited font-sans */
font-size: 0.9rem;
background: white;
color: #2C2A28;
}
[b-byq7ws25rc] .filter-actions {
margin-top: 1.5rem;
text-align: right;
}
[b-byq7ws25rc] .filter-close-btn {
background: #7B5A53;
color: white;
border: none;
border-radius: 8px;
padding: 0.5rem 1rem;
/* inherited font-sans */
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s ease;
}
[b-byq7ws25rc] .filter-close-btn:hover {
background: #6B4A43;
}
/* ===========================================
MASONRY GRID LAYOUT - LEFT COLUMN
=========================================== */
[b-byq7ws25rc] .vault-masonry {
column-count: 2;
column-gap: 1.5rem;
width: 100%;
margin: 0;
padding: 0;
}
@media (max-width: 1024px) {
[b-byq7ws25rc] .vault-masonry {
column-count: 2;
column-gap: 1.2rem;
}
}
@media (max-width: 640px) {
[b-byq7ws25rc] .vault-masonry {
column-count: 1;
padding: 0 1rem 3rem;
}
}
/* ===========================================
VAULT CARDS - ORGANIC MASONRY DESIGN
=========================================== */
[b-byq7ws25rc] .vault-card {
break-inside: avoid;
background: white;
border: 1px solid #F0E6D2;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 3px 15px rgba(43, 42, 40, 0.08);
/* Enhanced shadow for button feel */
transition: all 0.3s ease;
position: relative;
width: 100%;
display: inline-block;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Prevent text selection */
cursor: pointer;
/* Universal clickable cue */
}
[b-byq7ws25rc] .vault-card:hover {
transform: translateY(-4px);
/* Elegant lift effect */
box-shadow: 0 8px 25px rgba(43, 42, 40, 0.12);
/* Soft, premium shadow */
border-color: #E8DCC0;
}
[b-byq7ws25rc] .vault-card:active {
transform: translateY(1px);
box-shadow: 0 2px 10px rgba(43, 42, 40, 0.08);
transition: all 0.1s ease;
}
/* Card Clickable Area */
[b-byq7ws25rc] .vault-card-clickable {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
transition: all 0.2s ease;
}
[b-byq7ws25rc] .vault-card-clickable:hover {
background-color: rgba(240, 230, 210, 0.3);
}
[b-byq7ws25rc] .vault-card-clickable:active {
transform: scale(0.98) translateY(1px);
background-color: rgba(240, 230, 210, 0.5);
transition: all 0.1s ease;
}
/* Mobile Chat Hint - Layer 3 Affordance */
[b-byq7ws25rc] .vault-card-chat-hint {
position: absolute;
bottom: 12px;
right: 12px;
opacity: 0.6;
color: #8B7355;
transition: opacity 0.2s ease;
pointer-events: none;
z-index: 1;
}
/* Show hint more prominently on mobile */
@media (max-width: 768px) {
[b-byq7ws25rc] .vault-card-chat-hint {
opacity: 0.8;
}
[b-byq7ws25rc] .vault-card:hover .vault-card-chat-hint {
opacity: 1;
color: #6B5B47;
}
}
/* Hide hint on desktop hover for clean experience */
@media (min-width: 769px) {
[b-byq7ws25rc] .vault-card:hover .vault-card-chat-hint {
opacity: 0.3;
}
}
/* Card Header */
[b-byq7ws25rc] .vault-card-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1rem;
}
[b-byq7ws25rc] .vault-card-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #F0E6D2;
flex-shrink: 0;
}
[b-byq7ws25rc] .vault-card-name {
/* inherited font-sans */
font-weight: 500;
font-size: 0.85rem;
color: #7B5A53;
margin-left: 0.5rem;
flex-grow: 1;
}
/* Three Dots Menu Button */
[b-byq7ws25rc] .three-dots-menu {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
cursor: pointer;
padding: 0.25rem;
border-radius: 50%;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
opacity: 0.6;
z-index: 10;
}
[b-byq7ws25rc] .three-dots-menu:hover {
background-color: rgba(167, 123, 91, 0.1);
opacity: 1;
transform: scale(1.1);
}
[b-byq7ws25rc] .three-dots-menu:active {
transform: scale(0.95);
}
[b-byq7ws25rc] .three-dots-menu svg {
width: 16px;
height: 16px;
fill: #7B5A53;
}
/* Vault Card Dropdown Menu */
[b-byq7ws25rc] .vault-card-dropdown {
position: absolute;
top: 2.5rem;
right: 0.5rem;
background: white;
border: 1px solid #E8DCC0;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(43, 42, 40, 0.15);
z-index: 1000;
min-width: 140px;
overflow: hidden;
}
[b-byq7ws25rc] .vault-action-sheet-backdrop {
position: fixed;
inset: 0;
z-index: 1205;
background: rgba(43, 42, 40, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
touch-action: none;
}
/* Keep the global host button below the temporary page-level sheet. */
:global(.app-container:has(.vault-action-sheet) .floating-host-container)[b-byq7ws25rc] {
z-index: 1204;
}
[b-byq7ws25rc] .vault-action-sheet {
position: fixed;
left: 50%;
bottom: calc(0.85rem + env(safe-area-inset-bottom));
width: min(92vw, 380px);
z-index: 1210;
background: #fffaf5;
border: 1px solid rgba(216, 168, 138, 0.5);
border-radius: 22px;
padding: 0.4rem 0;
box-shadow: 0 28px 58px rgba(43, 42, 40, 0.24);
transform: translate(-50%, 18px);
animation: vault-sheet-rise-b-byq7ws25rc 0.2s ease-out forwards;
overflow: hidden;
}
[b-byq7ws25rc] .vault-action-sheet-item {
width: 100%;
border: none;
background: transparent;
display: flex;
align-items: center;
gap: 0.8rem;
padding: 0.95rem 1.2rem;
color: #4b2e2e;
font-size: 0.96rem;
font-weight: 600;
text-align: left;
cursor: pointer;
transition: background 0.18s ease, color 0.18s ease;
}
[b-byq7ws25rc] .vault-action-sheet-item:hover,
[b-byq7ws25rc] .vault-action-sheet-item:focus-visible {
background: #f7f0ea;
outline: none;
}
[b-byq7ws25rc] .vault-action-sheet-item:active {
background: #efe3da;
}
[b-byq7ws25rc] .vault-action-sheet-item.danger {
color: #a94636;
}
[b-byq7ws25rc] .vault-action-sheet-item svg {
flex: 0 0 auto;
color: currentColor;
}
@keyframes vault-sheet-rise-b-byq7ws25rc {
from {
opacity: 0;
transform: translate(-50%, 18px);
}
to {
opacity: 1;
transform: translate(-50%, 0);
}
}
[b-byq7ws25rc] .vault-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
/* inherited font-sans */
font-size: 0.85rem;
color: #7B5A53;
cursor: pointer;
transition: background-color 0.2s ease;
border: none;
background: none;
width: 100%;
text-align: left;
}
[b-byq7ws25rc] .vault-dropdown-item:hover {
background-color: #F5E6D3;
}
[b-byq7ws25rc] .vault-dropdown-item:active {
background-color: #E8DCC0;
}
[b-byq7ws25rc] .vault-dropdown-item svg {
width: 14px;
height: 14px;
fill: currentColor;
opacity: 0.7;
}
[b-byq7ws25rc] .unsave-btn {
background: none;
border: none;
color: #A67B5B;
/* inherited font-sans */
font-size: 0.8rem;
cursor: pointer;
padding: 0.25rem 0.5rem;
border-radius: 6px;
transition: all 0.2s ease;
opacity: 0;
transform: translateX(10px);
}
[b-byq7ws25rc] .vault-card:hover .unsave-btn {
opacity: 1;
transform: translateX(0);
}
[b-byq7ws25rc] .unsave-btn:hover {
background: #F5E6D3;
color: #7B5A53;
}
/* Card Message */
[b-byq7ws25rc] .vault-card-message {
font-family: var(--font-serif);
font-size: 1.05rem;
line-height: 1.65;
color: #3A3228;
margin-bottom: 1rem;
font-weight: 400;
}
/* Match LovedOneChat image sizing for inline images in vault messages */
[b-byq7ws25rc] .vault-card-message img {
max-width: 220px !important;
max-height: 220px !important;
width: auto !important;
height: auto !important;
margin: 1rem 0 1.1rem;
border-radius: 12px;
object-fit: cover !important;
display: block;
box-shadow: 0 12px 26px rgba(75, 46, 38, 0.16), 0 2px 6px rgba(75, 46, 38, 0.10);
}
@media (max-width: 768px) {
[b-byq7ws25rc] .vault-card-message img {
max-width: 160px !important;
max-height: 160px !important;
}
}
/* Card Footer */
[b-byq7ws25rc] .vault-card-footer {
display: flex;
align-items: center;
gap: 0.5rem;
}
[b-byq7ws25rc] .vault-card-context {
display: flex;
align-items: center;
}
[b-byq7ws25rc] .context-text {
/* inherited font-sans */
font-size: 0.8rem;
color: #A67B5B;
opacity: 0.8;
font-style: italic;
}
/* ===========================================
FOOTER STYLES
=========================================== */
/* Footer Styles */
[b-byq7ws25rc] .main-footer {
/* Keep footer aligned with content width and sidebar offset */
width: calc(100% - 280px);
max-width: min(1200px, calc(100% - 280px));
margin-left: 280px;
margin-right: auto;
background-color: #FAF3E5;
padding: 60px 0 30px 0;
margin-top: 80px;
color: #4F4A45;
border-top: 1px solid #f0dad3;
box-sizing: border-box;
}
[b-byq7ws25rc] .main-footer.sidebar-hidden {
/* Match the main container width when sidebar is hidden */
width: 100%;
max-width: 1100px;
margin-left: auto;
margin-right: auto;
}
[b-byq7ws25rc] .footer-container {
/* Keep the inner footer content aligned with main container padding */
max-width: 1200px;
width: 100%;
margin: 30px auto;
padding: 0 20px;
transition: margin-left 0.3s ease;
box-sizing: border-box;
}
[b-byq7ws25rc] .main-footer.sidebar-hidden .footer-container {
max-width: 1100px;
margin: 0 auto;
}
[b-byq7ws25rc] .footer-brand {
text-align: center;
margin-bottom: 50px;
}
[b-byq7ws25rc] .footer-logo img {
height: 45px;
width: auto;
margin-bottom: 15px;
}
[b-byq7ws25rc] .footer-tagline {
font-size: 1.1rem;
color: #666;
margin: 0;
}
[b-byq7ws25rc] .footer-nav-links {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 80px;
margin-bottom: 40px;
}
[b-byq7ws25rc] .footer-section {
padding: 0 var(--mobile-page-margin);
}
[b-byq7ws25rc] .footer-section h4 {
font-family: var(--font-sans) !important;
font-size: 1.1em;
font-weight: 700;
color: #4F4A45;
margin-bottom: 15px;
}
[b-byq7ws25rc] .footer-section ul {
list-style: none;
padding: 0;
margin: 0;
}
[b-byq7ws25rc] .footer-section ul li {
margin-bottom: 10px;
}
[b-byq7ws25rc] .footer-section ul li a {
color: #666;
text-decoration: none;
font-size: 0.95em;
transition: color 0.3s ease;
}
[b-byq7ws25rc] .footer-section ul li a:hover {
color: #4F4A45;
text-decoration: underline;
}
[b-byq7ws25rc] .footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 25px;
border-top: 1px solid #f0dad3;
flex-wrap: wrap;
gap: 20px;
}
[b-byq7ws25rc] .footer-languages {
display: flex;
gap: 15px;
align-items: center;
}
[b-byq7ws25rc] .footer-languages a {
color: #666;
text-decoration: none;
font-size: 0.85em;
font-weight: 600;
padding: 4px 8px;
border-radius: 12px;
transition: all 0.3s ease;
}
[b-byq7ws25rc] .footer-languages a:hover,
[b-byq7ws25rc] .footer-languages a.active {
background-color: #FBCFA8;
color: #4F4A45;
}
[b-byq7ws25rc] .footer-legal-origin {
text-align: right;
}
[b-byq7ws25rc] .footer-made-by {
font-size: 0.85em;
color: #888;
margin: 0 0 5px 0;
}
[b-byq7ws25rc] .footer-copyright {
font-size: 0.85em;
color: #888;
margin: 0;
text-align: left;
}
/* ===========================================
RESPONSIVE DESIGN
=========================================== */
@media (max-width: 768px) {
[b-byq7ws25rc] .vault-header {
padding: 2rem 1rem 1.5rem;
}
[b-byq7ws25rc] .vault-header h1 {
font-size: 2rem;
}
[b-byq7ws25rc] .vault-subtitle {
font-size: 1rem;
}
[b-byq7ws25rc] .today-memory-wrapper {
padding: 0 1rem;
}
[b-byq7ws25rc] .today-memory-card {
padding: 1.5rem;
}
[b-byq7ws25rc] .vault-filters {
padding: 0 1rem;
}
[b-byq7ws25rc] .filter-dropdown {
width: calc(100vw - 2rem);
right: 1rem;
}
}
@media (max-width: 480px) {
[b-byq7ws25rc] .vault-header h1 {
font-size: 1.8rem;
}
[b-byq7ws25rc] .today-memory-card {
padding: 1.2rem;
}
[b-byq7ws25rc] .vault-card {
padding: 1.2rem;
}
}
/* Mobile touch scroll fixes - REMOVED to fix window scrolling */
@media (max-width: 768px) {
/*
::deep .app-layout {
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior-y: contain;
touch-action: pan-y pinch-zoom;
-webkit-overflow-scrolling: touch;
}
::deep .container-v3,
::deep .messages-container {
overflow-x: hidden;
touch-action: pan-y pinch-zoom;
overscroll-behavior: contain;
}
*/
}
/* Responsive Layout Styles */
@media (max-width: 1024px) {
[b-byq7ws25rc] .toggle-sidebar {
display: none;
}
[b-byq7ws25rc] .app-layout {
padding-top: 60px;
}
[b-byq7ws25rc] .messages-container {
margin-left: 0 !important;
margin-top: 70px;
padding: 1rem;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main-content"
"sidebar-content";
}
[b-byq7ws25rc] .main-content-area {
padding: 1rem 0;
}
[b-byq7ws25rc] .sidebar-content-area {
padding: 1rem 0 2rem;
}
[b-byq7ws25rc] .sidebar-content-area::before {
display: none;
}
[b-byq7ws25rc] .main-footer {
width: 100% !important;
margin-left: 0 !important;
max-width: 100%;
}
[b-byq7ws25rc] .footer-container {
margin: 0 auto;
padding: 0 1rem;
}
[b-byq7ws25rc] .sidebar {
top: 60px;
height: calc(100vh - 60px);
transform: translateX(-100%);
}
[b-byq7ws25rc] .sidebar.visible {
transform: translateX(0);
}
[b-byq7ws25rc] .sidebar.hidden {
transform: translateX(-100%);
}
}
@media (max-width: 768px) {
[b-byq7ws25rc] .messages-container {
padding: var(--mobile-page-margin);
margin-top: 60px;
}
[b-byq7ws25rc] .filters-panel.mobile-open {
left: max(0.85rem, env(safe-area-inset-left));
right: max(0.85rem, env(safe-area-inset-right));
bottom: calc(0.85rem + env(safe-area-inset-bottom));
}
[b-byq7ws25rc] .vault-header {
padding: 1.5rem var(--mobile-page-margin);
}
[b-byq7ws25rc] .vault-header h1 {
font-size: 2rem;
}
[b-byq7ws25rc] .today-memory-wrapper {
padding: 0 var(--mobile-page-margin);
margin: 1.5rem auto 2rem;
}
[b-byq7ws25rc] .vault-filters {
padding: 0 var(--mobile-page-margin);
}
[b-byq7ws25rc] .footer-nav-links {
flex-direction: column;
align-items: center;
gap: 40px;
}
[b-byq7ws25rc] .footer-section {
text-align: center;
}
[b-byq7ws25rc] .footer-bottom {
flex-direction: column-reverse;
justify-content: center;
text-align: center;
}
[b-byq7ws25rc] .footer-legal-origin {
text-align: center;
}
[b-byq7ws25rc] .footer-copyright {
text-align: center;
}
}
@media (max-width: 480px) {
[b-byq7ws25rc] .mobile-top-bar,
[b-byq7ws25rc] .sidebar-overlay,
[b-byq7ws25rc] .sidebar {
display: block;
}
[b-byq7ws25rc] .toggle-sidebar {
display: inline-grid;
}
[b-byq7ws25rc] .messages-container {
padding: var(--mobile-page-margin);
}
[b-byq7ws25rc] .vault-header h1 {
font-size: 1.8rem;
}
[b-byq7ws25rc] .mobile-top-bar {
display: flex;
}
}
/* ===========================================
SIDEBAR & LAYOUT COMPATIBILITY
=========================================== */
/* Call to Action for non-authenticated users - Sidebar placement */
[b-byq7ws25rc] .vault-cta {
text-align: center;
padding: 2rem 1.5rem;
}
[b-byq7ws25rc] .vault-cta h2 {
font-family: var(--font-serif);
font-size: 1.4rem;
font-weight: 300;
color: #2C2A28;
margin-bottom: 1rem;
}
[b-byq7ws25rc] .vault-cta p {
/* inherited font-sans */
font-size: 0.95rem;
color: #6B5B57;
margin-bottom: 1.5rem;
}
[b-byq7ws25rc] .cta-button {
background: #7B5A53;
color: white;
border: none;
border-radius: 25px;
padding: 0.8rem 1.8rem;
/* inherited font-sans */
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
[b-byq7ws25rc] .cta-button:hover {
background: #6B4A43;
transform: translateY(-1px);
}
/* ===========================================
UNSAVE CONFIRMATION MODAL STYLES
=========================================== */
/* Modal Overlay for Centering and Background */
[b-byq7ws25rc] .modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
[b-byq7ws25rc] .modal-overlay.visible {
opacity: 1;
visibility: visible;
}
/* Modal Content for Unsave Confirmation */
[b-byq7ws25rc] .modal-content.layered-modal {
background-color: rgb(255, 242, 236);
/* Match page background */
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
max-width: 450px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
padding: 24px;
}
[b-byq7ws25rc] .modal-overlay.visible .modal-content {
transform: scale(1);
}
/* Modal Header */
[b-byq7ws25rc] .modal-header {
display: flex;
justify-content: flex-end;
padding: 0 0 16px 0;
margin-bottom: 8px;
}
[b-byq7ws25rc] .modal-close-icon-button {
background: none;
border: none;
font-size: 24px;
color: #999;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color 0.2s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
[b-byq7ws25rc] .modal-close-icon-button:hover {
color: #666;
background-color: rgba(0, 0, 0, 0.05);
}
/* Modal Body */
[b-byq7ws25rc] .modal-body {
padding: 0 8px 24px 8px;
}
[b-byq7ws25rc] .modal-title {
font-size: 24px;
font-weight: 600;
color: #2c2c2c;
margin: 0 0 16px 0;
text-align: center;
}
[b-byq7ws25rc] .modal-subtitle {
font-size: 16px;
color: #666;
margin: 0 0 24px 0;
text-align: center;
line-height: 1.5;
}
/* Message Preview Card */
[b-byq7ws25rc] .message-preview-card {
background: #fafafa;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 16px;
margin: 16px 0;
text-align: left;
}
[b-byq7ws25rc] .preview-content {
position: relative;
}
[b-byq7ws25rc] .preview-text {
font-size: 14px;
line-height: 1.5;
color: #4a4a4a;
margin: 0;
font-style: italic;
}
/* Modal Actions */
[b-byq7ws25rc] .modal-actions {
display: flex;
gap: 12px;
justify-content: center;
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid #f0f0f0;
}
/* Button Styles */
[b-byq7ws25rc] .btn-secondary-action {
background-color: transparent;
color: #666;
border: 1px solid #e5e5e5;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
[b-byq7ws25rc] .btn-secondary-action:hover {
background-color: #f5f5f5;
border-color: #d1d1d1;
color: #555;
}
[b-byq7ws25rc] .btn-danger-action {
background-color: #e53e3e;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
[b-byq7ws25rc] .btn-danger-action:hover {
background-color: #c53030;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}
[b-byq7ws25rc] .btn-danger-action:active {
transform: translateY(0);
}
/* Mobile Responsiveness for Modal */
@media (max-width: 768px) {
[b-byq7ws25rc] .modal-content.layered-modal {
max-width: 95%;
margin: 0 auto;
padding: 20px;
}
[b-byq7ws25rc] .modal-title {
font-size: 20px;
margin-bottom: 12px;
}
[b-byq7ws25rc] .modal-subtitle {
font-size: 15px;
margin-bottom: 20px;
}
[b-byq7ws25rc] .modal-actions {
flex-direction: column;
gap: 8px;
}
[b-byq7ws25rc] .btn-secondary-action,
[b-byq7ws25rc] .btn-danger-action {
width: 100%;
padding: 14px 24px;
}
}
[b-byq7ws25rc] .filters-panel {
background: rgba(255, 255, 255, 0.92);
border: 1px solid #E8DCC0;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 12px 28px rgba(124, 90, 83, 0.12);
margin-bottom: 2rem;
margin-left: auto;
margin-right: 0;
max-width: 360px;
width: 100%;
position: sticky;
top: 2rem;
}
[b-byq7ws25rc] .filters-panel-header {
/* inherited font-sans */
font-size: 1.05rem;
font-weight: 600;
color: #5A413A;
letter-spacing: 0.01em;
margin-bottom: 1.5rem;
}
[b-byq7ws25rc] .filters-panel-header-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
[b-byq7ws25rc] .mobile-filters-trigger-row,
[b-byq7ws25rc] .mobile-filters-backdrop {
display: none;
}
[b-byq7ws25rc] .mobile-filters-trigger {
display: inline-flex;
align-items: center;
gap: 0.65rem;
border: 1px solid #D8A88A;
border-radius: 999px;
background: rgba(255, 255, 255, 0.94);
color: #5A413A;
padding: 0.7rem 1rem;
font-size: 0.92rem;
font-weight: 600;
box-shadow: 0 12px 24px rgba(124, 90, 83, 0.14);
}
[b-byq7ws25rc] .mobile-filters-trigger.has-active {
background: linear-gradient(135deg, #FBEFE4, #F6D9C6);
}
[b-byq7ws25rc] .mobile-filters-trigger-badge {
min-width: 1.6rem;
height: 1.6rem;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #7B5A53;
color: #fff;
font-size: 0.8rem;
}
[b-byq7ws25rc] .mobile-filters-close {
display: none;
border: none;
border-radius: 999px;
background: rgba(123, 90, 83, 0.1);
color: #5A413A;
padding: 0.55rem 0.9rem;
font-size: 0.85rem;
font-weight: 600;
}
[b-byq7ws25rc] .filters-panel-section {
display: flex;
flex-direction: column;
gap: 0.8rem;
margin-bottom: 1.75rem;
}
[b-byq7ws25rc] .filters-panel-section:last-of-type {
margin-bottom: 0;
}
[b-byq7ws25rc] .filters-panel-label {
/* inherited font-sans */
font-size: 0.8rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #A67B5B;
}
[b-byq7ws25rc] .filter-pill-tray {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
[b-byq7ws25rc] .filter-pill {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.45rem 0.9rem;
border-radius: 999px;
border: 1px solid rgba(126, 100, 92, 0.4);
background: rgba(255, 245, 237, 0.9);
color: #6f5a55;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
[b-byq7ws25rc] .filter-pill:hover,
[b-byq7ws25rc] .filter-pill:focus-visible {
border-color: rgba(126, 100, 92, 0.7);
color: #4b3a34;
transform: translateY(-1px);
}
[b-byq7ws25rc] .filter-pill.active {
background: #7b5a53;
color: #fff8f2;
border-color: #7b5a53;
box-shadow: 0 8px 18px rgba(90, 64, 57, 0.22);
}
[b-byq7ws25rc] .filter-pill-avatar {
width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
}
[b-byq7ws25rc] .loved-one-pill {
padding: 0.45rem 1rem 0.45rem 0.55rem;
}
[b-byq7ws25rc] .filters-panel-link {
background: none;
border: none;
color: #7b5a53;
font-weight: 600;
cursor: pointer;
margin-top: 0.5rem;
text-align: left;
padding: 0;
}
@media (max-width: 1024px) {
[b-byq7ws25rc] .filters-panel {
display: none;
position: static;
max-width: none;
margin: 0 auto 2rem;
width: 90%;
}
[b-byq7ws25rc] .filters-panel.mobile-open {
display: block;
position: fixed;
left: max(1rem, env(safe-area-inset-left));
right: max(1rem, env(safe-area-inset-right));
bottom: calc(1rem + env(safe-area-inset-bottom));
top: auto;
z-index: 1300;
margin: 0;
width: auto;
max-width: none;
max-height: min(78vh, calc(100dvh - 6rem));
overflow-y: auto;
padding: 1.4rem 1.2rem calc(1.2rem + env(safe-area-inset-bottom));
border-radius: 24px;
box-shadow: 0 30px 60px rgba(43, 42, 40, 0.22);
}
[b-byq7ws25rc] .mobile-filters-trigger-row {
display: flex;
justify-content: flex-start;
margin-bottom: 1rem;
}
[b-byq7ws25rc] .mobile-filters-backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 1200;
background: rgba(43, 42, 40, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
}
[b-byq7ws25rc] .mobile-filters-close {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
}
/* ===========================================
EMPTY STATE
=========================================== */
[b-byq7ws25rc] .empty-state {
text-align: center;
padding: 4rem 2rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 16px;
border: 1px dashed #E8DCC0;
}
[b-byq7ws25rc] .empty-state-icon {
font-size: 3rem;
margin-bottom: 1rem;
display: block;
}
[b-byq7ws25rc] .empty-state h3 {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 400;
color: #5A413A;
margin-bottom: 0.75rem;
}
[b-byq7ws25rc] .empty-state p {
/* inherited font-sans */
font-size: 1rem;
color: #8B7355;
margin-bottom: 1.5rem;
line-height: 1.6;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
[b-byq7ws25rc] .empty-state-action {
background: linear-gradient(135deg, #7B5A53, #A86F5C);
color: #fffaf6;
border: none;
border-radius: 999px;
padding: 0.85rem 2rem;
/* inherited font-sans */
font-size: 0.92rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
[b-byq7ws25rc] .empty-state-action:hover {
background: linear-gradient(135deg, #6B4A43, #915847);
transform: translateY(-2px);
}
/* VaultMessages mobile polish - keeps the saved message cards but fixes the page frame. */
@media (max-width: 1024px) {
[b-byq7ws25rc] .mobile-floating-header {
z-index: 1200;
}
.app-layout[b-byq7ws25rc],
[b-byq7ws25rc] .app-layout {
display: block;
width: 100%;
max-width: 100vw;
padding-top: 60px;
overflow-x: hidden;
background-color: var(--lov-paper);
}
.messages-container[b-byq7ws25rc],
[b-byq7ws25rc] .messages-container,
.messages-container.sidebar-hidden[b-byq7ws25rc],
[b-byq7ws25rc] .messages-container.sidebar-hidden {
width: 100%;
max-width: 720px;
min-width: 0;
margin: 0 auto !important;
padding: 0 0 44px;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main-content"
"sidebar-content";
box-sizing: border-box;
overflow-x: hidden;
}
.vault-header[b-byq7ws25rc],
[b-byq7ws25rc] .vault-header {
width: 100%;
max-width: 680px;
padding: 30px 18px 22px;
box-sizing: border-box;
}
.vault-header h1[b-byq7ws25rc],
[b-byq7ws25rc] .vault-header h1 {
font-size: clamp(2.05rem, 7vw, 2.7rem);
line-height: 1.1;
letter-spacing: 0;
margin-bottom: 1rem;
}
.vault-subtitle[b-byq7ws25rc],
[b-byq7ws25rc] .vault-subtitle {
max-width: 36rem;
font-size: clamp(1.05rem, 2.8vw, 1.25rem);
line-height: 1.55;
}
.main-content-area[b-byq7ws25rc],
[b-byq7ws25rc] .main-content-area {
width: 100%;
padding: 0 18px 2.5rem;
box-sizing: border-box;
}
.mobile-filters-trigger-row[b-byq7ws25rc],
[b-byq7ws25rc] .mobile-filters-trigger-row {
margin-bottom: 1rem;
}
.vault-masonry[b-byq7ws25rc],
[b-byq7ws25rc] .vault-masonry {
width: 100%;
padding: 0;
column-gap: 1rem;
}
}
@media (max-width: 680px) {
.messages-container[b-byq7ws25rc],
[b-byq7ws25rc] .messages-container,
.messages-container.sidebar-hidden[b-byq7ws25rc],
[b-byq7ws25rc] .messages-container.sidebar-hidden {
max-width: 680px;
padding-bottom: 40px;
}
.vault-header[b-byq7ws25rc],
[b-byq7ws25rc] .vault-header {
padding: 24px var(--mobile-page-margin, 16px) 16px;
}
.vault-header h1[b-byq7ws25rc],
[b-byq7ws25rc] .vault-header h1 {
font-size: clamp(2.05rem, 9.2vw, 2.35rem);
line-height: 1.12;
}
.vault-subtitle[b-byq7ws25rc],
[b-byq7ws25rc] .vault-subtitle {
font-size: clamp(1.02rem, 4.4vw, 1.16rem);
line-height: 1.55;
}
.main-content-area[b-byq7ws25rc],
[b-byq7ws25rc] .main-content-area {
padding: 0 var(--mobile-page-margin, 16px) 2.5rem;
}
.vault-masonry[b-byq7ws25rc],
[b-byq7ws25rc] .vault-masonry {
column-count: 1;
padding: 0;
}
.vault-card[b-byq7ws25rc],
[b-byq7ws25rc] .vault-card {
border-radius: 18px;
padding: 1.2rem 1.25rem 1.25rem;
margin-bottom: 1.6rem;
box-shadow: 0 14px 30px rgba(79, 59, 52, 0.11);
}
.vault-card-message[b-byq7ws25rc],
[b-byq7ws25rc] .vault-card-message {
font-size: clamp(1rem, 4.4vw, 1.12rem);
line-height: 1.72;
}
}
@media (max-width: 420px) {
.vault-header[b-byq7ws25rc],
[b-byq7ws25rc] .vault-header {
padding-top: 22px;
}
.vault-card-header[b-byq7ws25rc],
[b-byq7ws25rc] .vault-card-header {
gap: 0.75rem;
}
.vault-card-avatar[b-byq7ws25rc],
[b-byq7ws25rc] .vault-card-avatar {
width: 32px;
height: 32px;
}
}
/* Editorial collection heading and primary action. */
[b-byq7ws25rc] .vault-header h1 { color: var(--lov-ink); font-size: clamp(2rem,3.5vw,3.2rem); font-weight: 450; }
[b-byq7ws25rc] .vault-subtitle { color: var(--lov-muted); }
[b-byq7ws25rc] .btn-primary, [b-byq7ws25rc] .btn-primary:hover { background: var(--lov-green); border-color: var(--lov-green); color: var(--lov-on-green); }
/* Collection hierarchy: the saved words are the visual focus. */
.messages-container[b-byq7ws25rc] { align-content: start; }
.vault-header[b-byq7ws25rc], [b-byq7ws25rc] .vault-header { text-align: left; padding-bottom: 24px; }
.vault-subtitle[b-byq7ws25rc], [b-byq7ws25rc] .vault-subtitle { max-width: 68ch; margin-left: 0; margin-right: 0; font-size: 1rem; line-height: 1.65; }
.vault-card[b-byq7ws25rc], [b-byq7ws25rc] .vault-card { background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: none; }
.vault-card-message[b-byq7ws25rc], [b-byq7ws25rc] .vault-card-message { color: var(--lov-ink); }
.empty-state[b-byq7ws25rc], [b-byq7ws25rc] .empty-state { max-width: 720px; margin-inline: auto; padding: 32px 24px; background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 8px; box-shadow: none; }
.empty-state-action[b-byq7ws25rc], [b-byq7ws25rc] .empty-state-action { min-height: 44px; background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; }
/* Keep nested content legible on the selected application surface. */
[b-byq7ws25rc] .vault-card-name, [b-byq7ws25rc] .empty-state h3 { color: var(--lov-ink); }
[b-byq7ws25rc] .empty-state p { color: var(--lov-muted); }
[b-byq7ws25rc] .context-text { color: var(--lov-muted); opacity: 1; }
@media (min-width: 1025px) {
.messages-container[b-byq7ws25rc] {
width: min(1200px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
margin-right: auto;
}
.messages-container.sidebar-hidden[b-byq7ws25rc] {
width: min(1200px, 100%);
margin-inline: auto;
}
.app-layout[b-byq7ws25rc] .main-footer.main-footer {
width: min(1200px, calc(100% - 280px));
margin-left: calc(280px + max(0px, (100% - 280px - 1200px) / 2));
margin-right: auto;
}
.app-layout[b-byq7ws25rc] .main-footer.main-footer.sidebar-hidden {
width: min(1200px, 100%);
max-width: 1200px;
margin-inline: auto;
}
.app-layout[b-byq7ws25rc] .main-footer.main-footer.sidebar-hidden .footer-container {
max-width: 1200px;
}
}
/* /Components/Pages/YourStories.razor.rz.scp.css */
.stories-page[b-oji5630ywo] {
--paper: var(--lov-paper);
--paper-deep: var(--lov-selected);
--ink: var(--lov-ink);
--ink-soft: var(--lov-muted);
--accent: #f4b9a8;
--rule: #d9c5b6;
min-height: 100vh;
color: var(--ink);
background: var(--paper);
font-family: var(--font-sans);
line-height: 1.65;
overflow-wrap: anywhere;
}
.page-width[b-oji5630ywo] { width: min(100% - 64px, 1180px); margin-inline: auto; }
.stories-header[b-oji5630ywo], .stories-footer[b-oji5630ywo] { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; }
.stories-page .brand[b-oji5630ywo] { display: inline-flex; flex-shrink: 0; color: inherit; text-decoration: none; }
.stories-page .brand:hover[b-oji5630ywo] { opacity: .82; }
.brand img[b-oji5630ywo] { display: block; max-width: 100%; height: auto; }
.stories-page a[b-oji5630ywo] { color: inherit; text-underline-offset: .3em; }
.stories-header > a:last-child[b-oji5630ywo], .stories-footer nav a[b-oji5630ywo] { display: inline-flex; align-items: center; min-height: 44px; font-size: .9rem; }
.stories-page a:focus-visible[b-oji5630ywo] { outline: 3px solid var(--ink); outline-offset: 5px; border-radius: 4px; }
.skip-link[b-oji5630ywo] { position: absolute; top: 8px; left: 16px; z-index: 10; padding: 12px 20px; background: var(--paper); transform: translateY(-200%); }
.skip-link:focus[b-oji5630ywo] { transform: none; }
.hero[b-oji5630ywo] { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(40px, 7vw, 100px); align-items: center; padding-block: 56px 90px; }
.hero-copy[b-oji5630ywo] { max-width: 650px; }
.eyebrow[b-oji5630ywo] { margin: 0 0 20px; color: var(--ink-soft); font-size: .78rem; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; }
h1[b-oji5630ywo], h2[b-oji5630ywo], h3[b-oji5630ywo], .question[b-oji5630ywo], blockquote[b-oji5630ywo] { font-family: var(--font-serif); font-weight: 400; }
h1[b-oji5630ywo] { margin: 0; font-size: clamp(2.8rem, 4.8vw, 4.8rem); line-height: 1.08; text-wrap: balance; }
h2[b-oji5630ywo] { margin: 0; font-size: clamp(2rem, 3.4vw, 3.35rem); line-height: 1.15; text-wrap: balance; }
h3[b-oji5630ywo] { margin: 0; font-size: clamp(1.6rem, 2.3vw, 2.15rem); line-height: 1.25; }
.intro[b-oji5630ywo] { margin: 28px 0; color: var(--ink-soft); font-size: 1.1rem; max-width: 55ch; }
.stories-page .button[b-oji5630ywo] { display: inline-flex; justify-content: center; align-items: center; min-height: 52px; padding: 12px 26px; border-radius: 6px; background: var(--lov-green); color: var(--lov-on-green); font-weight: 600; text-decoration: none; }
.button:hover[b-oji5630ywo] { background: var(--paper-deep); }
.small-note[b-oji5630ywo], .availability[b-oji5630ywo], .example-note[b-oji5630ywo] { color: var(--ink-soft); font-size: .88rem; }
.small-note[b-oji5630ywo] { margin: 16px 0 0; }
.hero-photo[b-oji5630ywo] { margin: 0; width: min(100%, 360px); justify-self: center; }
.hero-photo img[b-oji5630ywo] { display: block; width: 100%; height: auto; border-radius: 20px; box-shadow: 0 20px 50px #3f302c18; }
.hero-photo figcaption[b-oji5630ywo] { margin-top: 18px; color: var(--ink-soft); font-family: var(--font-serif); font-style: italic; text-align: center; }
.beginnings[b-oji5630ywo] { padding-block: 48px 90px; scroll-margin-top: 30px; }
.beginnings h2[b-oji5630ywo] { max-width: 650px; margin-bottom: 42px; }
.story-path[b-oji5630ywo] { display: grid; grid-template-columns: 44px minmax(0, .85fr) minmax(0, 1.15fr); gap: 24px; padding-block: 34px; border-top: 1px solid var(--rule); }
.path-number[b-oji5630ywo] { color: var(--ink-soft); padding-top: 5px; font-size: .85rem; }
.story-path p[b-oji5630ywo] { margin-top: 0; }
.story-path p.small-note[b-oji5630ywo] { margin: 10px 0 0; }
.text-link[b-oji5630ywo] { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; }
.availability[b-oji5630ywo] { margin: 20px 0 0 68px; max-width: 80ch; }
.availability a[b-oji5630ywo] { display: inline-block; padding-block: 10px; }
.interview[b-oji5630ywo] { background: var(--paper-deep); padding-block: 90px; }
.interview-inner[b-oji5630ywo] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.interview-steps[b-oji5630ywo] { padding-left: 24px; margin-block: 28px; }
.interview-steps li[b-oji5630ywo] { padding-left: 8px; margin-block: 16px; }
.interview-example[b-oji5630ywo] { margin: 0; padding: clamp(24px, 4vw, 48px); background: var(--paper); border-radius: 6px; }
.question[b-oji5630ywo] { font-size: 1.5rem; line-height: 1.4; margin: 0; }
blockquote[b-oji5630ywo] { margin: 26px 0 20px; padding-left: 20px; border-left: 2px solid var(--rule); font-size: 1.3rem; font-style: italic; }
.next-question[b-oji5630ywo] { margin-top: 30px; padding-top: 28px; border-top: 1px solid var(--rule); }
.care[b-oji5630ywo] { padding-block: 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); }
.care-copy p[b-oji5630ywo] { margin: 0 0 24px; }
.closing[b-oji5630ywo] { padding-block: 60px 100px; border-top: 1px solid var(--rule); text-align: center; }
.closing h2[b-oji5630ywo] { max-width: 760px; margin-inline: auto; }
.closing .intro[b-oji5630ywo] { margin-inline: auto; }
.closing-memory[b-oji5630ywo] { display: flex; width: fit-content; max-width: 100%; margin: 18px auto 0; }
.stories-footer[b-oji5630ywo] { border-top: 1px solid var(--rule); }
.stories-footer nav[b-oji5630ywo] { display: flex; gap: 24px; flex-wrap: wrap; }
@media (max-width: 760px) {
.page-width[b-oji5630ywo] { width: min(100% - 40px, 600px); }
.stories-header[b-oji5630ywo] { align-items: flex-start; padding-block: 18px; }
.stories-header .brand[b-oji5630ywo] { width: 124px; padding-top: 7px; }
.stories-header > a:last-child[b-oji5630ywo] { max-width: 48%; text-align: right; }
.hero[b-oji5630ywo] { grid-template-columns: 1fr; padding-block: 36px 60px; gap: 36px; }
h1[b-oji5630ywo] { font-size: clamp(2.5rem, 8vw, 3.6rem); }
.hero-photo[b-oji5630ywo] { width: min(68%, 280px); }
.story-path[b-oji5630ywo] { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; }
.story-path > div[b-oji5630ywo] { grid-column: 2; }
.availability[b-oji5630ywo] { margin-left: 0; }
.interview-inner[b-oji5630ywo], .care[b-oji5630ywo] { grid-template-columns: 1fr; }
.interview[b-oji5630ywo], .care[b-oji5630ywo] { padding-block: 60px; }
.beginnings[b-oji5630ywo] { padding-block: 32px 60px; }
.closing[b-oji5630ywo] { padding-block: 50px 60px; }
.stories-footer[b-oji5630ywo] { flex-direction: column; align-items: flex-start; }
}
@media (forced-colors: active) {
.stories-page .button[b-oji5630ywo] { border: 1px solid ButtonText; }
}
/* /Components/PenPalUpsellModal.razor.rz.scp.css */
.modal-overlay[b-4gpja6ktog] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(28, 17, 14, 0.58);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 1500;
}
.modal-overlay.visible[b-4gpja6ktog] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.modal-content[b-4gpja6ktog] {
background-color: #fdf8f3;
padding: 28px 30px;
border-radius: 18px;
border: 1px solid rgba(184, 136, 90, 0.22);
box-shadow: 0 18px 40px rgba(22, 12, 9, 0.2);
position: relative;
max-width: 520px;
width: 92%;
text-align: center;
transform: translateY(12px) scale(0.98);
transition: transform 0.24s ease;
}
.modal-overlay.visible .modal-content[b-4gpja6ktog] {
transform: translateY(0) scale(1);
}
.modal-close-btn[b-4gpja6ktog] {
position: absolute;
top: 10px;
right: 14px;
width: 44px;
height: 44px;
background: none;
border: none;
font-size: 1.7rem;
color: #b29a8c;
cursor: pointer;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
touch-action: manipulation;
pointer-events: auto;
}
.modal-close-btn:hover[b-4gpja6ktog] {
color: #6a4a42;
}
.modal-title[b-4gpja6ktog] {
margin: 6px 0 10px;
color: #563e3a;
font-size: 1.4rem;
font-weight: 700;
}
.modal-description[b-4gpja6ktog] {
margin: 0 0 18px;
color: #6b4b47;
font-size: 0.98rem;
line-height: 1.45;
}
.pen-pal-upsell-avatar[b-4gpja6ktog] {
width: 88px;
height: 88px;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
display: block;
margin: 4px auto 14px;
border: 3px solid #f6e3d4;
}
.pen-pal-upsell-avatar-wrap[b-4gpja6ktog] {
position: relative;
display: inline-block;
}
.pen-pal-upsell-badge[b-4gpja6ktog] {
position: absolute;
bottom: 6px;
right: 6px;
width: 24px;
height: 24px;
border-radius: 50%;
background: #f4dcc7;
border: 1px solid rgba(184, 136, 90, 0.3);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
box-shadow: 0 4px 10px rgba(41, 24, 18, 0.18);
}
.pen-pal-example[b-4gpja6ktog] {
background: #fffaf6;
border: 1px solid rgba(184, 136, 90, 0.2);
border-radius: 14px;
padding: 16px 18px;
text-align: left;
color: #5b4039;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
overflow: visible;
max-height: none;
}
.pen-pal-example-title[b-4gpja6ktog] {
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.18em;
color: #8f6f63;
margin-bottom: 10px;
}
.pen-pal-example-body[b-4gpja6ktog] {
white-space: pre-line;
font-size: 1.02rem;
color: #4B2E2E;
font-family: var(--font-serif);
margin-bottom: 0.8rem;
line-height: 1.6;
font-style: italic;
}
.modal-actions[b-4gpja6ktog] {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 18px;
}
@media (max-width: 768px) {
.modal-close-btn[b-4gpja6ktog] {
top: calc(8px + env(safe-area-inset-top));
right: 10px;
}
.modal-content.pen-pal-upsell-modal[b-4gpja6ktog] {
width: 100%;
height: 100dvh;
max-width: 100%;
border-radius: 0;
padding: 18px 18px 24px;
display: flex;
flex-direction: column;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.modal-actions[b-4gpja6ktog] {
position: sticky;
bottom: 0;
margin-top: auto;
padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
background: #fdf8f3;
box-shadow: 0 -12px 24px rgba(22, 12, 9, 0.06);
}
}
.btn-primary-action[b-4gpja6ktog] {
background-color: var(--peach);
color: var(--text);
border: none;
padding: 12px 24px;
border-radius: 10px;
font-size: 0.98rem;
font-weight: 700;
cursor: pointer;
transition: filter 0.15s ease, transform 0.1s ease;
}
.btn-primary-action:hover[b-4gpja6ktog] {
filter: brightness(0.98);
}
.btn-primary-action:active[b-4gpja6ktog] {
transform: translateY(1px);
}
.btn-secondary-link[b-4gpja6ktog] {
appearance: none;
background: transparent;
border: none;
color: #7b5a53;
font-size: 0.95rem;
cursor: pointer;
text-decoration: none;
padding: 2px 8px;
}
.btn-secondary-link:hover[b-4gpja6ktog] {
text-decoration: underline;
}
.btn-tertiary-link[b-4gpja6ktog] {
appearance: none;
background: transparent;
border: none;
color: #8a5c51;
font-size: 0.95rem;
cursor: pointer;
padding: 2px 8px;
}
.btn-tertiary-link:hover[b-4gpja6ktog] {
text-decoration: underline;
}
/* /Components/PersonalityPresetCarousel.razor.rz.scp.css */
.personality-preset-header[b-wc5cd2i0js] {
margin-bottom: 0.75rem;
}
.personality-preset-title[b-wc5cd2i0js] {
font-weight: 700;
color: var(--text, #4b2e2e);
margin-bottom: 0.2rem;
}
.personality-preset-subtext[b-wc5cd2i0js] {
font-size: 0.95rem;
color: var(--text-light, #967f6b);
}
.personality-preset-carousel-wrap[b-wc5cd2i0js] {
position: relative;
margin-bottom: 1rem;
}
/* Next arrow button */
.carousel-nav-btn.next[b-wc5cd2i0js] {
position: absolute;
top: 50%;
right: -12px;
transform: translateY(-50%);
z-index: 3;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(75, 46, 46, 0.15);
background: rgba(255, 255, 255, 0.95);
color: var(--text, #4b2e2e);
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
/* Previous arrow button (same visual as next) */
.carousel-nav-btn.prev[b-wc5cd2i0js] {
position: absolute;
top: 50%;
left: -12px;
transform: translateY(-50%);
z-index: 3;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid rgba(75, 46, 46, 0.15);
background: rgba(255, 255, 255, 0.95);
color: var(--text, #4b2e2e);
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.carousel-nav-btn.prev:hover[b-wc5cd2i0js] {
background: var(--peach-bg, var(--lov-surface));
border-color: #EBB180;
transform: translateY(-50%) scale(1.1);
}
.carousel-nav-btn.next:hover[b-wc5cd2i0js] {
background: var(--peach-bg, var(--lov-surface));
border-color: #EBB180;
transform: translateY(-50%) scale(1.1);
}
/* Pagination dots */
.carousel-dots[b-wc5cd2i0js] {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 12px;
}
/* Controls row (arrows + dots aligned on same baseline) */
.carousel-controls[b-wc5cd2i0js] {
display: grid;
grid-template-columns: 36px 1fr 36px;
align-items: center;
column-gap: 12px;
margin-top: 12px;
}
.carousel-controls .carousel-dots[b-wc5cd2i0js] {
margin-top: 0;
}
/* Override absolute positioning when arrows are in the controls row */
.carousel-controls .carousel-nav-btn.prev[b-wc5cd2i0js],
.carousel-controls .carousel-nav-btn.next[b-wc5cd2i0js] {
position: static;
top: auto;
left: auto;
right: auto;
transform: none;
}
.carousel-controls .carousel-nav-btn.prev:hover[b-wc5cd2i0js],
.carousel-controls .carousel-nav-btn.next:hover[b-wc5cd2i0js] {
transform: scale(1.1);
}
.carousel-dot[b-wc5cd2i0js] {
width: 8px;
height: 8px;
border-radius: 50%;
border: none;
background: rgba(75, 46, 46, 0.2);
cursor: pointer;
transition: all 0.2s ease;
padding: 0;
}
.carousel-dot:hover[b-wc5cd2i0js] {
background: rgba(75, 46, 46, 0.4);
}
.carousel-dot.active[b-wc5cd2i0js] {
background: var(--text, #4b2e2e);
width: 24px;
border-radius: 4px;
}
/* Hide nav button on mobile */
@media (max-width: 768px) {
.carousel-nav-btn.next[b-wc5cd2i0js] {
display: none;
}
}
@media (max-width: 768px) {
.carousel-nav-btn.prev[b-wc5cd2i0js] {
display: none;
}
}
/* Edge fades (subtle, always on). */
.personality-preset-carousel-wrap[b-wc5cd2i0js]::before,
.personality-preset-carousel-wrap[b-wc5cd2i0js]::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 24px;
pointer-events: none;
z-index: 2;
}
.personality-preset-carousel-wrap[b-wc5cd2i0js]::before {
right: 0;
background: linear-gradient(to left, var(--modal-bg, #ffffff), rgba(255, 255, 255, 0));
}
.personality-preset-carousel-wrap[b-wc5cd2i0js]::after {
left: 0;
background: linear-gradient(to right, var(--modal-bg, #ffffff), rgba(255, 255, 255, 0));
}
.personality-preset-carousel[b-wc5cd2i0js] {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding: 0.25rem 0.25rem;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/Edge legacy */
}
.personality-preset-carousel[b-wc5cd2i0js]::-webkit-scrollbar {
display: none;
}
.personality-preset-card[b-wc5cd2i0js] {
scroll-snap-align: start;
scroll-snap-stop: always;
flex: 0 0 auto;
width: 150px;
text-align: right;
border: 1px solid rgba(75, 46, 46, 0.12);
background: #ffffff;
border-radius: 14px;
padding: 0.7rem 0.7rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
transition: border-color 0.18s ease, background-color 0.18s ease, transform 0.12s ease;
}
.personality-preset-card:hover[b-wc5cd2i0js] {
transform: translateY(-1px);
}
.personality-preset-card.selected[b-wc5cd2i0js] {
border-color: #EBB180;
background: var(--peach-bg, var(--lov-surface));
}
.personality-preset-image[b-wc5cd2i0js] {
width: 56px;
height: 56px;
object-fit: cover;
border-radius: 14px;
border: 1px solid rgba(75, 46, 46, 0.10);
}
.personality-preset-card-title[b-wc5cd2i0js] {
font-weight: 700;
color: var(--text, #4b2e2e);
font-size: 0.95rem;
line-height: 1.15;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.2em;
}
.personality-preset-card-desc[b-wc5cd2i0js] {
font-size: 0.85rem;
color: var(--text-light, #967f6b);
line-height: 1.25;
text-align: center;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 3.4em;
}
/* /Components/PetLovedOneEditModal.razor.rz.scp.css */
/* Overlay and modal base matching pet create modal */
.modal-overlay[b-ase402vym9] {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(40,25,15,0.55);
opacity: 0;
visibility: hidden;
transition: opacity .25s ease, visibility .25s ease;
z-index: 4000
}
.modal-overlay.visible[b-ase402vym9]{opacity:1;visibility:visible}
.modal-content.pet-edit-modal[b-ase402vym9]{background:#fff8f6;border-radius:20px;width:720px;max-width:95%;box-shadow:0 18px 48px rgba(0,0,0,.18);padding:20px 20px 0;display:flex;flex-direction:column;position:relative;overflow:hidden}
.modal-content.pet-edit-modal .modal-close-icon-button[b-ase402vym9]{position:absolute;top:16px;right:16px;background:none;border:none;font-size:1.5rem;font-weight:400;color:#7B6A66;cursor:pointer;line-height:1;padding:5px;transition:color .2s ease}
.modal-content.pet-edit-modal .modal-close-icon-button:hover[b-ase402vym9]{color:#4B2E2E}
.pet-content[b-ase402vym9]{flex:1;overflow-y:auto;padding:0 4px 12px;-webkit-overflow-scrolling:touch}
.pet-modal-title[b-ase402vym9]{font-size:26px;color:#4B2E2E;margin:4px 0 12px;font-weight:800;padding-right:32px}
.modal-tabs-container[b-ase402vym9]{display:flex;margin-bottom:1.5rem;border-bottom:1px solid var(--soft-border);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.modal-tabs-container[b-ase402vym9]::-webkit-scrollbar{display:none}
.modal-tab-button[b-ase402vym9]{flex:1;padding:.8rem .5rem;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:.9rem;font-weight:500;color:var(--text-light);font-family:var(--font-lato);text-align:center;white-space:nowrap}
.modal-tab-button:hover[b-ase402vym9]{color:var(--text)}
.modal-tab-button.active[b-ase402vym9]{color:var(--text);border-bottom-color:var(--accent);font-weight:600}
.pet-form-grid[b-ase402vym9]{display:grid;grid-template-columns:160px 1fr;gap:18px;align-items:start;margin-bottom:14px}
.avatar-col[b-ase402vym9]{text-align:center}
.avatar-preview-img[b-ase402vym9]{width:128px;height:128px;border-radius:50%;border:2px solid #efd7bb;background:#fdf4ed;box-shadow:0 1px 4px rgba(247,186,173,.07);cursor:pointer}
.avatar-hint[b-ase402vym9]{color:#7B6A66;font-size:12px;margin-top:8px;text-align:center}
.field-label[b-ase402vym9]{font-weight:700;color:#6b4a43;margin:6px 0 6px;display:block}
.text-input[b-ase402vym9],.select-input[b-ase402vym9],.text-area[b-ase402vym9]{width:100%;border-radius:12px;border:1px solid #ecd6cf;padding:12px 14px;font-size:15px;background:#fff;color:#4B2E2E}
.text-area[b-ase402vym9]{resize:vertical}
.slider-group[b-ase402vym9]{margin:10px 0 4px}
.slider-label[b-ase402vym9]{color:#6b4a43;font-weight:700;display:block;margin-bottom:6px}
.slider-row[b-ase402vym9]{display:flex;align-items:center;gap:10px}
.slider-end[b-ase402vym9]{color:#7B6A66;font-size:12px;width:120px;text-align:center}
.range[b-ase402vym9]{flex:1;accent-color:#7B5A53}
.actions-row[b-ase402vym9]{display:flex;gap:12px;align-items:center;margin-top:12px;padding:16px 20px;border-top:1px solid #f0e1d0;background:#fff8f6;box-shadow:0 -4px 10px rgba(0,0,0,.05)}
.btn-primary[b-ase402vym9]{background:#7B5A53;color:#fff;border:none;border-radius:12px;padding:12px 16px;font-weight:700;cursor:pointer}
.btn-outline[b-ase402vym9]{background:transparent;color:#7B5A53;border:2px solid #e8d4cc;border-radius:12px;padding:10px 16px;font-weight:700;cursor:pointer}
/* Avatar picker reuse */
.avatar-picker-overlay[b-ase402vym9]{position:fixed;z-index:4500;inset:0;background:rgba(80,60,44,.24);display:flex;align-items:center;justify-content:center}
.avatar-picker-modal[b-ase402vym9]{background:#fff9f4;padding:2em 2.3em 1.5em;border-radius:22px;box-shadow:0 6px 44px rgba(120,80,55,.11);min-width:320px;max-width:96vw}
.avatar-picker-list[b-ase402vym9]{display:grid;grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:1.2em;justify-items:center;margin:1.4em 0 1.8em}
.avatar-picker-img[b-ase402vym9]{width:80px;height:80px;border-radius:50%;border:2px solid #efd7bb;background:#fdf4ed;box-shadow:0 1px 4px rgba(247,186,173,.07);cursor:pointer;transition:border .16s,box-shadow .16s}
.avatar-picker-img.selected[b-ase402vym9],.avatar-picker-img:hover[b-ase402vym9]{border:2.4px solid #fbbbad;box-shadow:0 2px 8px #fbbbad33}
.form-group-settings[b-ase402vym9] {
margin-bottom: 1.3rem;
}
.form-group-settings label[b-ase402vym9] {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: var(--text-light);
margin-bottom: 0.5rem;
}
.input-hint[b-ase402vym9] {
font-size: 0.8rem;
color: var(--text-light);
}
@media (max-width:640px){
.modal-content.pet-edit-modal[b-ase402vym9]{width:100%;height:100vh;height:100dvh;max-width:100%;border-radius:0;padding:16px 0 0}
.pet-form-grid[b-ase402vym9]{grid-template-columns:1fr;padding:0 16px}
.pet-bottom[b-ase402vym9] {
padding: 0 16px;
}
.pet-modal-title[b-ase402vym9]{padding:0 16px;font-size:24px}
.actions-row[b-ase402vym9]{position:sticky;bottom:0;padding:14px 16px;box-shadow:0 -6px 16px rgba(0,0,0,.08)}
.actions-row .btn-primary[b-ase402vym9],.actions-row .btn-outline[b-ase402vym9]{flex:1}
}
/* Typeahead styles (copy from Step1) */
.typeahead[b-ase402vym9]{position:relative}
.typeahead .text-input[b-ase402vym9]{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%237B6A66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px}
.ta-dropdown[b-ase402vym9]{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:1500;max-height:14rem;overflow:auto;background:#fff;border:1px solid #eadfd8;border-radius:12px;box-shadow:0 12px 28px rgba(80,60,44,.12)}
.ta-item[b-ase402vym9]{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .8rem;cursor:pointer;border-bottom:1px solid #f4eee9}
.ta-item:last-child[b-ase402vym9]{border-bottom:0}
.ta-item:hover[b-ase402vym9],.ta-item.active[b-ase402vym9]{background:#fff5f0}
.ta-label[b-ase402vym9]{font-size:.92rem;color:#5b463c}
.ta-species[b-ase402vym9]{font-size:.78rem;color:#a79083}
.ta-empty[b-ase402vym9]{color:#a79083}
.ta-divider[b-ase402vym9]{height:1px;background:#f0e8e2;margin:.25rem 0}
@media (max-width:640px){.ta-dropdown[b-ase402vym9]{max-height:50vh}}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar{width:10px}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar-track{background:#fff;border-radius:12px}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar-thumb{background:#eadfd8;border-radius:12px}
.ta-dropdown[b-ase402vym9]::-webkit-scrollbar-thumb:hover{background:#e0cfc7}
/* Underline-style slider visuals (brown accent) */
.slider-group .slider-input-row[b-ase402vym9]{display:grid;grid-template-columns:1fr;width:100%;margin:0;padding:0}
.custom-slider[b-ase402vym9]{width:100%;height:2rem;appearance:none;background:transparent;outline:none;margin:0;padding:0}
.custom-slider[b-ase402vym9]::-webkit-slider-thumb{appearance:none;height:1.3rem;width:1.3rem;background:#7B5A53;border-radius:50%;border:0;margin-top:-0.4rem}
.custom-slider[b-ase402vym9]::-webkit-slider-runnable-track{background:#eadfd8;height:.5rem;border-radius:.25rem;border:0}
.custom-slider[b-ase402vym9]::-moz-range-thumb{height:1.3rem;width:1.3rem;background:#7B5A53;border-radius:50%;border:0}
.custom-slider[b-ase402vym9]::-moz-range-track{background:#eadfd8;height:.5rem;border-radius:.25rem;border:0}
.slider-label[b-ase402vym9]{
font-size: 0.9rem;
font-weight: 500;
color:#6b4a43;
margin-bottom: 0.25rem;
}
.slider-extreme-labels[b-ase402vym9]{display:flex;justify-content:space-between;color:#a79083;font-size:.85rem;margin-bottom:.25rem}
.slider-mobile-extremes[b-ase402vym9]{display:none;justify-content:space-between;color:#a79083;font-size:.85rem;margin:.25rem 0}
@media (max-width:640px){.slider-extreme-labels[b-ase402vym9]{display:none}.slider-mobile-extremes[b-ase402vym9]{display:flex}}
/* Tag chips (brown look) */
.tags-container[b-ase402vym9]{
display:flex;
flex-wrap:wrap;
justify-content:center; /* center like LovedOneEditModal screenshot */
column-gap:18px; /* airy spacing between chips */
row-gap:16px; /* vertical space between rows */
margin-bottom:0.25em;
}
.tag-chip[b-ase402vym9]{
background:#fff;
border:1.5px solid #eadfd8;
color:#4B2E2E;
border-radius:24px;
padding:10px 18px;
font-size:.95rem;
cursor:pointer;
}
.tag-chip.selected[b-ase402vym9]{
background:#f6d6cb; /* soft peach */
border-color:#f0c8bb;
color:#4B2E2E;
}
.pet-edit-modal .modal-tabs-container[b-ase402vym9] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
flex: 0 0 auto;
gap: .25rem;
margin: 0;
padding: .5rem 1rem;
overflow: visible;
border-bottom: 1px solid #d5c9b8;
}
.pet-edit-modal .modal-tab-button[b-ase402vym9] {
min-width: 0;
min-height: 2.75rem;
padding: .6rem .4rem;
border-radius: .35rem;
color: #686154;
font-family: var(--font-sans);
font-size: .95rem;
line-height: 1.4;
white-space: normal;
overflow-wrap: anywhere;
}
.pet-edit-modal .modal-tab-button.active[b-ase402vym9] {
color: #503a21;
background: #f1e7d6;
border-bottom-color: #76552f;
}
@media (max-width: 40rem) {
.pet-edit-modal .modal-tabs-container[b-ase402vym9] { grid-template-columns: 1fr; }
}
/* /Components/PhotoMemoryOnboarding.razor.rz.scp.css */
:global(html:has(.photo-memory-overlay))[b-f95mp1doxm],
:global(body:has(.photo-memory-overlay))[b-f95mp1doxm] {
overflow: hidden;
}
.photo-memory-overlay[b-f95mp1doxm] {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: clamp(0.75rem, 2vw, 1.5rem);
background:
radial-gradient(circle at 18% 10%, rgba(255, 221, 202, 0.26), transparent 34%),
rgba(43, 33, 29, 0.62);
backdrop-filter: blur(8px);
}
.photo-memory-dialog[b-f95mp1doxm] {
position: relative;
width: min(100%, 690px);
max-height: min(92dvh, 860px);
overflow: hidden auto;
border: 1px solid rgba(125, 90, 73, 0.16);
border-radius: 28px;
background:
linear-gradient(rgba(255, 250, 245, 0.97), rgba(255, 247, 239, 0.98)),
repeating-linear-gradient(0deg, rgba(102, 72, 55, 0.025) 0 1px, transparent 1px 5px);
box-shadow: 0 32px 90px rgba(41, 29, 24, 0.3);
color: #332925;
font-family: var(--font-sans);
}
.photo-memory-close[b-f95mp1doxm] {
position: absolute;
top: 1rem;
right: 1rem;
z-index: 2;
width: 44px;
height: 44px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(103, 72, 58, 0.15);
border-radius: 50%;
background: rgba(255, 255, 255, 0.68);
color: #6d554d;
font: 400 1.75rem/1 var(--font-sans);
cursor: pointer;
transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}
.photo-memory-close:hover:not(:disabled)[b-f95mp1doxm] {
transform: rotate(4deg);
background: #fff;
border-color: rgba(103, 72, 58, 0.3);
}
.photo-memory-close:disabled[b-f95mp1doxm] {
cursor: wait;
opacity: 0.5;
}
.photo-memory-progress-header[b-f95mp1doxm] {
min-height: 70px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.9rem 4.8rem 0.7rem 1.6rem;
}
.photo-memory-wordmark[b-f95mp1doxm] {
font-family: var(--font-serif);
font-size: 1.12rem;
font-weight: 650;
letter-spacing: -0.02em;
color: #4a3730;
}
.photo-memory-progress-copy[b-f95mp1doxm] {
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #8c7368;
}
.photo-memory-progress-track[b-f95mp1doxm] {
height: 3px;
overflow: hidden;
background: rgba(137, 101, 83, 0.1);
}
.photo-memory-progress-track span[b-f95mp1doxm] {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #c77a61, #dda57b);
transition: width 260ms ease;
}
.photo-memory-stage[b-f95mp1doxm] {
padding: clamp(1.5rem, 4vw, 2.8rem) clamp(1.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 2.8rem);
}
.photo-memory-step[b-f95mp1doxm] {
animation: photo-memory-enter-b-f95mp1doxm 240ms ease both;
}
@keyframes photo-memory-enter-b-f95mp1doxm {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.photo-memory-copy[b-f95mp1doxm] {
max-width: 570px;
margin-bottom: 1.65rem;
}
.photo-memory-eyebrow[b-f95mp1doxm] {
margin: 0 0 0.55rem;
color: #a25f4e;
font-size: 0.78rem;
font-weight: 750;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.photo-memory-copy h2[b-f95mp1doxm],
.photo-memory-success-step h2[b-f95mp1doxm] {
margin: 0;
font-family: var(--font-serif);
font-size: clamp(2.15rem, 5vw, 3.35rem);
font-weight: 520;
line-height: 1.04;
letter-spacing: -0.035em;
color: #332925;
}
.photo-memory-intro[b-f95mp1doxm] {
margin: 0.9rem 0 0;
max-width: 560px;
color: #735f56;
font-size: 1rem;
line-height: 1.6;
}
.photo-memory-upload-shell[b-f95mp1doxm] {
position: relative;
min-height: 315px;
display: grid;
place-items: center;
overflow: hidden;
border: 1.5px dashed rgba(151, 103, 82, 0.42);
border-radius: 22px;
background:
radial-gradient(circle at 50% 10%, rgba(255, 221, 197, 0.45), transparent 48%),
#fffaf6;
transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
.photo-memory-upload-shell:not(.has-photo):hover[b-f95mp1doxm] {
transform: translateY(-2px);
border-color: rgba(151, 86, 65, 0.7);
box-shadow: 0 16px 36px rgba(93, 57, 43, 0.09);
}
.photo-memory-upload-label[b-f95mp1doxm] {
width: 100%;
min-height: 315px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 2rem;
text-align: center;
}
.photo-memory-upload-icon[b-f95mp1doxm] {
width: 68px;
height: 68px;
display: grid;
place-items: center;
margin-bottom: 1rem;
border-radius: 22px;
background: #f8ded0;
color: #9b5f4d;
font-size: 1.7rem;
transform: rotate(-2deg);
box-shadow: 0 10px 22px rgba(129, 78, 57, 0.09);
}
.photo-memory-upload-label > strong[b-f95mp1doxm] {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 580;
color: #44342e;
}
.photo-memory-upload-label > span:not(.photo-memory-upload-icon):not(.photo-memory-upload-button)[b-f95mp1doxm] {
margin-top: 0.35rem;
color: #806c62;
line-height: 1.5;
}
.photo-memory-upload-button[b-f95mp1doxm] {
margin-top: 1.2rem;
padding: 0.7rem 1.15rem;
border-radius: 999px;
background: #4a342e;
color: #fffaf6;
font-size: 0.92rem;
font-weight: 700;
cursor: pointer;
}
.photo-memory-mobile-guide[b-f95mp1doxm],
.photo-memory-mobile-actions[b-f95mp1doxm] {
display: none;
}
[b-f95mp1doxm] .photo-memory-file-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
}
.photo-memory-preview[b-f95mp1doxm] {
width: 100%;
height: min(46dvh, 410px);
display: block;
object-fit: contain;
background: #2f2825;
}
.photo-memory-preview-scrim[b-f95mp1doxm] {
position: absolute;
inset: auto 0 0;
height: 35%;
pointer-events: none;
background: linear-gradient(transparent, rgba(33, 24, 21, 0.55));
}
.photo-memory-change-photo[b-f95mp1doxm] {
position: absolute;
right: 1rem;
bottom: 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.9rem;
border: 1px solid rgba(255, 255, 255, 0.48);
border-radius: 999px;
background: rgba(37, 27, 23, 0.72);
color: white;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
backdrop-filter: blur(8px);
}
.photo-memory-privacy-note[b-f95mp1doxm] {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
margin: 0.9rem 0 0;
color: #806b61;
font-size: 0.84rem;
}
.photo-memory-notice[b-f95mp1doxm] {
display: flex;
gap: 1rem;
padding: 1.2rem;
border: 1px solid rgba(174, 119, 82, 0.22);
border-radius: 18px;
background: rgba(255, 245, 235, 0.84);
}
.photo-memory-notice-icon[b-f95mp1doxm] {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
border-radius: 14px;
background: #f3d8c6;
color: #8d5948;
}
.photo-memory-notice strong[b-f95mp1doxm] {
color: #48352e;
}
.photo-memory-notice p[b-f95mp1doxm] {
margin: 0.25rem 0 0.55rem;
color: #765f55;
line-height: 1.5;
}
.photo-memory-notice a[b-f95mp1doxm] {
color: #8d4f3f;
font-weight: 750;
}
.photo-memory-person-list[b-f95mp1doxm] {
max-height: 320px;
display: grid;
gap: 0.7rem;
overflow: auto;
padding: 0.1rem 0.25rem 0.1rem 0;
}
.photo-memory-person-option[b-f95mp1doxm],
.photo-memory-new-person[b-f95mp1doxm] {
width: 100%;
display: flex;
align-items: center;
gap: 0.9rem;
padding: 0.8rem 1rem;
border: 1px solid rgba(126, 88, 70, 0.16);
border-radius: 17px;
background: rgba(255, 255, 255, 0.7);
color: #44342e;
text-align: left;
cursor: pointer;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.photo-memory-person-option:hover[b-f95mp1doxm],
.photo-memory-new-person:hover[b-f95mp1doxm] {
transform: translateY(-1px);
border-color: rgba(153, 89, 68, 0.4);
box-shadow: 0 10px 24px rgba(87, 53, 41, 0.07);
}
.photo-memory-person-avatar[b-f95mp1doxm],
.photo-memory-new-person-icon[b-f95mp1doxm] {
width: 50px;
height: 50px;
flex: 0 0 50px;
display: grid;
place-items: center;
overflow: hidden;
border-radius: 16px;
background: #f5d9ca;
color: #855445;
font-family: var(--font-serif);
font-size: 1.18rem;
font-weight: 650;
}
.photo-memory-person-avatar img[b-f95mp1doxm] {
width: 100%;
height: 100%;
object-fit: cover;
}
.photo-memory-person-details[b-f95mp1doxm],
.photo-memory-new-person > span:last-child[b-f95mp1doxm] {
min-width: 0;
display: flex;
flex: 1;
flex-direction: column;
}
.photo-memory-person-details strong[b-f95mp1doxm],
.photo-memory-new-person strong[b-f95mp1doxm] {
font-size: 0.98rem;
}
.photo-memory-person-details span[b-f95mp1doxm],
.photo-memory-new-person small[b-f95mp1doxm] {
margin-top: 0.15rem;
overflow: hidden;
color: #89746a;
font-size: 0.82rem;
text-overflow: ellipsis;
white-space: nowrap;
}
.photo-memory-person-option > i[b-f95mp1doxm] {
color: #a98b7e;
font-size: 0.8rem;
}
.photo-memory-divider[b-f95mp1doxm] {
display: flex;
align-items: center;
gap: 0.8rem;
margin: 1.15rem 0;
color: #a18a80;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.photo-memory-divider[b-f95mp1doxm]::before,
.photo-memory-divider[b-f95mp1doxm]::after {
content: "";
height: 1px;
flex: 1;
background: rgba(130, 92, 74, 0.14);
}
.photo-memory-new-person-form[b-f95mp1doxm] {
padding: 1.25rem;
border: 1px solid rgba(135, 94, 74, 0.17);
border-radius: 20px;
background: rgba(255, 255, 255, 0.56);
}
.photo-memory-new-person-form h3[b-f95mp1doxm] {
margin: 0 0 1rem;
font-family: var(--font-serif);
font-size: 1.45rem;
font-weight: 580;
color: #44342e;
}
.photo-memory-field[b-f95mp1doxm] {
display: grid;
gap: 0.5rem;
margin-bottom: 1rem;
}
.photo-memory-field > span[b-f95mp1doxm],
.photo-memory-relationship-fieldset legend[b-f95mp1doxm] {
color: #604a41;
font-size: 0.86rem;
font-weight: 720;
}
.photo-memory-field input[b-f95mp1doxm],
.photo-memory-field textarea[b-f95mp1doxm] {
width: 100%;
border: 1px solid rgba(126, 87, 70, 0.24);
border-radius: 14px;
background: rgba(255, 253, 250, 0.94);
color: #3d302b;
font: inherit;
outline: none;
transition: border-color 160ms ease, box-shadow 160ms ease;
}
.photo-memory-field input[b-f95mp1doxm] {
min-height: 48px;
padding: 0.75rem 0.9rem;
}
.photo-memory-field textarea[b-f95mp1doxm] {
min-height: 190px;
padding: 1rem;
line-height: 1.6;
resize: vertical;
}
.photo-memory-field input:focus[b-f95mp1doxm],
.photo-memory-field textarea:focus[b-f95mp1doxm] {
border-color: #b76f58;
box-shadow: 0 0 0 4px rgba(183, 111, 88, 0.12);
}
.photo-memory-relationship-fieldset[b-f95mp1doxm] {
min-width: 0;
margin: 0 0 1rem;
padding: 0;
border: none;
}
.photo-memory-relationship-fieldset legend[b-f95mp1doxm] {
margin-bottom: 0.65rem;
}
.photo-memory-relationship-grid[b-f95mp1doxm] {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
}
.photo-memory-relationship-option[b-f95mp1doxm] {
min-height: 44px;
padding: 0.55rem 0.85rem;
border: 1px solid rgba(126, 87, 70, 0.2);
border-radius: 999px;
background: #fffaf6;
color: #6b554c;
font: 650 0.85rem/1 var(--font-sans);
cursor: pointer;
}
.photo-memory-relationship-option:hover[b-f95mp1doxm],
.photo-memory-relationship-option.selected[b-f95mp1doxm] {
border-color: #b56c56;
background: #f6ded2;
color: #713f33;
}
.photo-memory-new-person-continue[b-f95mp1doxm] {
width: 100%;
margin-top: 0.2rem;
}
.photo-memory-context-strip[b-f95mp1doxm] {
display: inline-flex;
align-items: center;
gap: 0.65rem;
margin-bottom: 1.25rem;
padding: 0.4rem 0.75rem 0.4rem 0.4rem;
border: 1px solid rgba(128, 88, 69, 0.15);
border-radius: 999px;
background: rgba(255, 255, 255, 0.62);
color: #5b443b;
font-size: 0.84rem;
font-weight: 720;
}
.photo-memory-context-strip img[b-f95mp1doxm] {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.photo-memory-story-field[b-f95mp1doxm] {
margin-bottom: 0.75rem;
}
.photo-memory-voice-card[b-f95mp1doxm] {
display: grid;
gap: 0.9rem;
margin-bottom: 1rem;
padding: 1.15rem;
border: 1px solid rgba(166, 105, 73, 0.25);
border-radius: 20px;
background:
radial-gradient(circle at 92% 8%, rgba(230, 185, 137, 0.23), transparent 42%),
linear-gradient(140deg, rgba(255, 249, 241, 0.96), rgba(248, 235, 220, 0.86));
box-shadow: inset 0 1px rgba(255, 255, 255, 0.72), 0 10px 26px rgba(105, 62, 42, 0.06);
}
.photo-memory-voice-copy[b-f95mp1doxm] {
display: flex;
align-items: flex-start;
gap: 0.8rem;
}
.photo-memory-voice-icon[b-f95mp1doxm] {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: grid;
place-items: center;
border: 1px solid rgba(152, 88, 60, 0.25);
border-radius: 14px;
background: rgba(255, 252, 248, 0.78);
color: #a35f49;
}
.photo-memory-voice-icon svg[b-f95mp1doxm] {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.55;
}
.photo-memory-voice-copy h3[b-f95mp1doxm] {
margin: 0;
color: #49342c;
font-family: var(--font-serif);
font-size: 1.35rem;
font-weight: 590;
line-height: 1.15;
}
.photo-memory-voice-copy p[b-f95mp1doxm] {
margin: 0.3rem 0 0;
color: #786057;
font-size: 0.88rem;
line-height: 1.5;
}
.photo-memory-voice-record[b-f95mp1doxm],
.photo-memory-voice-stop[b-f95mp1doxm],
.photo-memory-re-record[b-f95mp1doxm] {
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.55rem;
border-radius: 999px;
font: 730 0.9rem/1 var(--font-sans);
cursor: pointer;
}
.photo-memory-re-record:disabled[b-f95mp1doxm] {
opacity: 0.55;
cursor: wait;
}
.photo-memory-use-written[b-f95mp1doxm] {
min-height: 44px;
margin: 0 0 1rem;
padding: 0.68rem 0.95rem;
border: 1px solid rgba(139, 83, 62, 0.28);
border-radius: 999px;
background: #fffaf6;
color: #77483a;
font: 720 0.88rem/1.25 var(--font-sans);
cursor: pointer;
}
.photo-memory-voice-record[b-f95mp1doxm] {
width: 100%;
padding: 0.72rem 1rem;
border: 1px solid #9d5b46;
background: linear-gradient(135deg, #ad674f, #8d4c3b);
color: #fffaf4;
box-shadow: 0 9px 18px rgba(122, 67, 47, 0.17);
}
.photo-memory-record-button-icon[b-f95mp1doxm] {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border-radius: 50%;
background: rgba(255, 255, 255, 0.18);
font-size: 0.76rem;
}
.photo-memory-voice-stop[b-f95mp1doxm] {
width: 100%;
padding: 0.72rem 1rem;
border: 1px solid rgba(142, 69, 52, 0.33);
background: rgba(255, 249, 243, 0.86);
color: #874a3b;
}
.photo-memory-recording-state[b-f95mp1doxm],
.photo-memory-capture-processing[b-f95mp1doxm],
.photo-memory-voice-fallback[b-f95mp1doxm],
.photo-memory-review-capture-note[b-f95mp1doxm],
.photo-memory-suggested-draft[b-f95mp1doxm] {
display: flex;
align-items: center;
gap: 0.55rem;
color: #76564a;
font-size: 0.86rem;
line-height: 1.45;
}
.photo-memory-recording-state[b-f95mp1doxm] {
justify-content: center;
min-height: 32px;
color: #914b3c;
font-weight: 750;
}
.photo-memory-recording-pulse[b-f95mp1doxm] {
width: 11px;
height: 11px;
border-radius: 50%;
background: #b24e3d;
box-shadow: 0 0 0 0 rgba(178, 78, 61, 0.38);
animation: photo-memory-recording-pulse-b-f95mp1doxm 1.5s ease-out infinite;
}
@keyframes photo-memory-recording-pulse-b-f95mp1doxm {
70% { box-shadow: 0 0 0 8px rgba(178, 78, 61, 0); }
100% { box-shadow: 0 0 0 0 rgba(178, 78, 61, 0); }
}
.photo-memory-capture-processing[b-f95mp1doxm] {
justify-content: center;
min-height: 32px;
}
.photo-memory-copper-spinner[b-f95mp1doxm] {
width: 14px;
height: 14px;
border-color: rgba(164, 94, 70, 0.22);
border-top-color: #a65f49;
}
.photo-memory-voice-fallback[b-f95mp1doxm] {
margin: 0;
padding: 0.7rem 0.8rem;
border-radius: 12px;
background: rgba(255, 255, 255, 0.5);
}
.photo-memory-voice-preview[b-f95mp1doxm] {
display: grid;
gap: 0.65rem;
padding: 0.85rem;
border: 1px solid rgba(141, 90, 67, 0.18);
border-radius: 14px;
background: rgba(255, 253, 250, 0.7);
color: #6e554a;
font-size: 0.82rem;
font-weight: 700;
}
.photo-memory-voice-preview audio[b-f95mp1doxm] {
width: 100%;
min-height: 44px;
accent-color: #a45e49;
}
.photo-memory-re-record[b-f95mp1doxm] {
justify-self: start;
padding: 0.65rem 0.9rem;
border: 1px solid rgba(139, 83, 62, 0.25);
background: #fffaf6;
color: #7b4a3c;
}
.photo-memory-audio-retention[b-f95mp1doxm] {
min-height: 44px;
display: grid;
grid-template-columns: auto 1fr;
column-gap: 0.65rem;
align-items: center;
padding-top: 0.15rem;
color: #654d43;
cursor: pointer;
}
.photo-memory-audio-retention input[b-f95mp1doxm] {
width: 20px;
height: 20px;
margin: 0;
accent-color: #9c5b47;
}
.photo-memory-audio-retention span[b-f95mp1doxm] {
font-size: 0.87rem;
font-weight: 720;
}
.photo-memory-audio-retention small[b-f95mp1doxm] {
grid-column: 2;
margin-top: 0.12rem;
color: #816b61;
font-size: 0.78rem;
line-height: 1.45;
}
.photo-memory-review-retention[b-f95mp1doxm] {
padding: 0.85rem 1rem;
border: 1px solid rgba(142, 91, 70, 0.2);
border-radius: 14px;
background: rgba(255, 251, 247, 0.76);
}
.photo-memory-suggested-draft[b-f95mp1doxm] {
justify-content: space-between;
margin: -0.2rem 0 0.9rem;
padding: 0.65rem 0.75rem;
border-radius: 12px;
background: rgba(233, 241, 233, 0.72);
color: #46624f;
}
.photo-memory-suggested-draft button[b-f95mp1doxm] {
min-height: 44px;
padding: 0.55rem 0.72rem;
border: 0;
border-radius: 999px;
background: transparent;
color: #386047;
font: 730 0.8rem/1 var(--font-sans);
text-decoration: underline;
cursor: pointer;
}
.photo-memory-review-waiting[b-f95mp1doxm] {
display: flex;
align-items: center;
gap: 0.55rem;
}
.photo-memory-review-capture-note[b-f95mp1doxm] {
margin: 0.8rem 0 0;
padding: 0.8rem 0.9rem;
border-radius: 14px;
background: rgba(246, 226, 205, 0.62);
}
.photo-memory-prompt-note[b-f95mp1doxm] {
display: flex;
align-items: flex-start;
gap: 0.6rem;
padding: 0.85rem 1rem;
border-radius: 14px;
background: rgba(245, 221, 199, 0.48);
color: #786055;
font-size: 0.86rem;
line-height: 1.5;
}
.photo-memory-prompt-note i[b-f95mp1doxm] {
margin-top: 0.15rem;
color: #a56751;
}
.photo-memory-review-card[b-f95mp1doxm] {
overflow: hidden;
border: 1px solid rgba(128, 87, 67, 0.16);
border-radius: 22px;
background: #fffdfa;
box-shadow: 0 18px 44px rgba(77, 48, 37, 0.09);
}
.photo-memory-review-card > img[b-f95mp1doxm] {
width: 100%;
max-height: 330px;
display: block;
object-fit: contain;
background: #2f2825;
}
.photo-memory-review-content[b-f95mp1doxm] {
padding: 1.25rem 1.35rem 1.4rem;
}
.photo-memory-review-label[b-f95mp1doxm] {
color: #a25f4e;
font-size: 0.7rem;
font-weight: 750;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.photo-memory-review-content h3[b-f95mp1doxm] {
margin: 0.2rem 0 0.55rem;
font-family: var(--font-serif);
font-size: 1.55rem;
font-weight: 600;
}
.photo-memory-review-content p[b-f95mp1doxm] {
margin: 0;
color: #614f47;
line-height: 1.65;
white-space: pre-wrap;
}
.photo-memory-private-card[b-f95mp1doxm] {
display: flex;
gap: 0.85rem;
margin-top: 1rem;
padding: 1rem;
border: 1px solid rgba(79, 118, 99, 0.18);
border-radius: 16px;
background: rgba(232, 242, 235, 0.72);
}
.photo-memory-private-icon[b-f95mp1doxm] {
width: 38px;
height: 38px;
flex: 0 0 38px;
display: grid;
place-items: center;
border-radius: 12px;
background: #d8eadf;
color: #426a55;
}
.photo-memory-private-card strong[b-f95mp1doxm] {
color: #385545;
}
.photo-memory-private-card p[b-f95mp1doxm] {
margin: 0.2rem 0 0;
color: #607267;
font-size: 0.88rem;
line-height: 1.5;
}
.photo-memory-private-card .photo-memory-review-voice-kept[b-f95mp1doxm] {
margin-top: 0.55rem;
color: #4f6759;
font-weight: 650;
}
.photo-memory-consent[b-f95mp1doxm] {
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin-top: 1rem;
color: #68554d;
font-size: 0.88rem;
line-height: 1.5;
cursor: pointer;
}
.photo-memory-consent input[b-f95mp1doxm] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.photo-memory-checkbox[b-f95mp1doxm] {
width: 22px;
height: 22px;
flex: 0 0 22px;
display: grid;
place-items: center;
margin-top: 0.05rem;
border: 1.5px solid rgba(116, 77, 60, 0.4);
border-radius: 7px;
background: #fff;
color: transparent;
font-size: 0.7rem;
transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.photo-memory-consent.confirmed .photo-memory-checkbox[b-f95mp1doxm] {
border-color: #5a7b67;
background: #5a7b67;
color: white;
}
.photo-memory-consent:focus-within[b-f95mp1doxm] {
outline: 3px solid rgba(191, 111, 86, 0.34);
outline-offset: 4px;
border-radius: 10px;
}
.photo-memory-save-status[b-f95mp1doxm] {
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin-top: 1rem;
padding: 0.85rem 0.95rem;
border: 1px solid rgba(130, 91, 72, 0.12);
border-radius: 14px;
background: rgba(246, 237, 228, 0.62);
color: #786359;
transition: border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.photo-memory-save-status-icon[b-f95mp1doxm] {
width: 30px;
height: 30px;
flex: 0 0 30px;
display: grid;
place-items: center;
border-radius: 10px;
background: rgba(255, 252, 248, 0.86);
color: #a26650;
}
.photo-memory-save-status p[b-f95mp1doxm] {
margin: 0.18rem 0 0;
font-size: 0.84rem;
line-height: 1.5;
}
.photo-memory-save-status.is-active[b-f95mp1doxm] {
border-color: rgba(166, 95, 73, 0.24);
background: linear-gradient(135deg, rgba(248, 228, 211, 0.82), rgba(255, 248, 240, 0.9));
box-shadow: 0 10px 24px rgba(100, 62, 47, 0.07);
color: #694d42;
font-weight: 680;
}
.photo-memory-save-status.is-active .photo-memory-save-status-icon[b-f95mp1doxm] {
background: #fff9f3;
color: #a75f49;
animation: photo-memory-save-breathe-b-f95mp1doxm 1.8s ease-in-out infinite;
}
@keyframes photo-memory-save-breathe-b-f95mp1doxm {
50% {
transform: scale(1.06);
box-shadow: 0 0 0 6px rgba(167, 95, 73, 0.08);
}
}
.photo-memory-error[b-f95mp1doxm] {
margin: 0.85rem 0 0;
padding: 0.75rem 0.9rem;
border-left: 3px solid #bc604d;
border-radius: 0 10px 10px 0;
background: rgba(255, 232, 226, 0.72);
color: #8b3f32;
font-size: 0.86rem;
line-height: 1.45;
}
.photo-memory-actions[b-f95mp1doxm] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: 1.5rem;
}
.photo-memory-actions-end[b-f95mp1doxm] {
justify-content: flex-end;
}
.photo-memory-primary[b-f95mp1doxm],
.photo-memory-back[b-f95mp1doxm] {
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
border-radius: 999px;
font: 720 0.94rem/1 var(--font-sans);
text-decoration: none;
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}
.photo-memory-primary[b-f95mp1doxm] {
padding: 0.8rem 1.25rem;
border: 1px solid #4a342e;
background: #4a342e;
color: #fffaf6;
box-shadow: 0 10px 22px rgba(71, 45, 37, 0.16);
}
.photo-memory-primary:hover:not(:disabled)[b-f95mp1doxm] {
transform: translateY(-1px);
background: #35251f;
box-shadow: 0 14px 28px rgba(71, 45, 37, 0.2);
}
.photo-memory-primary:disabled[b-f95mp1doxm] {
border-color: #c8b7ae;
background: #c8b7ae;
box-shadow: none;
cursor: not-allowed;
}
.photo-memory-back[b-f95mp1doxm] {
padding: 0.75rem 0.35rem;
border: none;
background: transparent;
color: #755e54;
}
.photo-memory-back:hover:not(:disabled)[b-f95mp1doxm] {
color: #3f2e28;
}
.photo-memory-primary:focus-visible[b-f95mp1doxm],
.photo-memory-back:focus-visible[b-f95mp1doxm],
.photo-memory-close:focus-visible[b-f95mp1doxm],
.photo-memory-person-option:focus-visible[b-f95mp1doxm],
.photo-memory-new-person:focus-visible[b-f95mp1doxm],
.photo-memory-relationship-option:focus-visible[b-f95mp1doxm],
.photo-memory-change-photo:focus-visible[b-f95mp1doxm],
.photo-memory-voice-record:focus-visible[b-f95mp1doxm],
.photo-memory-voice-stop:focus-visible[b-f95mp1doxm],
.photo-memory-re-record:focus-visible[b-f95mp1doxm],
.photo-memory-suggested-draft button:focus-visible[b-f95mp1doxm],
.photo-memory-upload-shell:focus-within[b-f95mp1doxm] {
outline: 3px solid rgba(191, 111, 86, 0.34);
outline-offset: 3px;
}
.photo-memory-spinner[b-f95mp1doxm] {
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.35);
border-top-color: #fff;
border-radius: 50%;
animation: photo-memory-spin-b-f95mp1doxm 800ms linear infinite;
}
@keyframes photo-memory-spin-b-f95mp1doxm {
to { transform: rotate(360deg); }
}
.photo-memory-success-step[b-f95mp1doxm],
.photo-memory-preserving-step[b-f95mp1doxm] {
display: flex;
flex-direction: column;
align-items: center;
min-height: 520px;
justify-content: center;
padding: 1rem 0;
text-align: center;
}
.photo-memory-success-photo[b-f95mp1doxm] {
position: relative;
width: min(72vw, 250px);
aspect-ratio: 4 / 3;
margin-bottom: 1.65rem;
transform: rotate(-2deg);
}
.photo-memory-success-photo img[b-f95mp1doxm] {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
border: 10px solid #fff;
border-bottom-width: 32px;
border-radius: 5px;
background: #eee1d8;
box-shadow: 0 20px 42px rgba(73, 45, 35, 0.18);
}
.photo-memory-success-photo > span[b-f95mp1doxm] {
position: absolute;
right: -10px;
bottom: 16px;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border: 4px solid #fff8f2;
border-radius: 50%;
background: #5a7b67;
color: white;
box-shadow: 0 8px 18px rgba(54, 92, 69, 0.2);
}
.photo-memory-preserving-photo > span[b-f95mp1doxm] {
background: #a76550;
}
.photo-memory-preserving-photo > span .photo-memory-spinner[b-f95mp1doxm] {
position: static;
width: 20px;
height: 20px;
border-width: 2px;
}
.photo-memory-background-note[b-f95mp1doxm] {
max-width: 430px;
border-radius: 14px;
line-height: 1.45;
}
.photo-memory-success-body[b-f95mp1doxm] {
max-width: 470px;
margin: 1rem auto 0;
color: #705b52;
font-size: 1rem;
line-height: 1.6;
}
.photo-memory-success-private[b-f95mp1doxm] {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 1rem 0 0;
padding: 0.5rem 0.8rem;
border-radius: 999px;
background: rgba(224, 238, 229, 0.74);
color: #496352;
font-size: 0.83rem;
font-weight: 680;
}
.photo-memory-success-actions[b-f95mp1doxm] {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 1rem;
margin-top: 1.6rem;
}
@media (min-width: 641px) and (max-width: 1024px) and (orientation: landscape) {
.photo-memory-overlay[b-f95mp1doxm] {
padding: 0.7rem;
}
.photo-memory-dialog[b-f95mp1doxm] {
width: min(92vw, 760px);
max-height: 94dvh;
}
.photo-memory-progress-header[b-f95mp1doxm] {
min-height: 58px;
}
.photo-memory-stage[b-f95mp1doxm] {
padding-top: 1.35rem;
padding-bottom: 1.35rem;
}
.photo-memory-copy[b-f95mp1doxm] {
margin-bottom: 1rem;
}
.photo-memory-story-step .photo-memory-voice-card[b-f95mp1doxm] {
grid-template-columns: minmax(0, 1fr) minmax(190px, 0.72fr);
align-items: center;
}
.photo-memory-story-step .photo-memory-voice-copy[b-f95mp1doxm] {
grid-column: 1;
}
.photo-memory-story-step .photo-memory-voice-preview[b-f95mp1doxm],
.photo-memory-story-step .photo-memory-recording-state[b-f95mp1doxm],
.photo-memory-story-step .photo-memory-capture-processing[b-f95mp1doxm],
.photo-memory-story-step .photo-memory-voice-fallback[b-f95mp1doxm],
.photo-memory-story-step .photo-memory-voice-record[b-f95mp1doxm],
.photo-memory-story-step .photo-memory-voice-stop[b-f95mp1doxm] {
grid-column: 2;
}
.photo-memory-story-step .photo-memory-audio-retention[b-f95mp1doxm] {
grid-column: 1 / -1;
}
.photo-memory-field textarea[b-f95mp1doxm] {
min-height: 140px;
}
}
@media (max-width: 768px) {
.photo-memory-overlay[b-f95mp1doxm] {
place-items: stretch;
padding: 0;
background: #fff8f1;
backdrop-filter: none;
}
.photo-memory-dialog[b-f95mp1doxm] {
width: 100%;
height: 100vh;
height: 100dvh;
min-height: 100vh;
min-height: 100dvh;
max-height: none;
border: none;
border-radius: 0;
box-shadow: none;
overscroll-behavior: contain;
}
.photo-memory-progress-header[b-f95mp1doxm] {
min-height: calc(62px + env(safe-area-inset-top));
padding: calc(0.7rem + env(safe-area-inset-top)) 4rem 0.6rem 1.15rem;
}
.photo-memory-close[b-f95mp1doxm] {
top: calc(0.65rem + env(safe-area-inset-top));
right: 0.75rem;
width: 44px;
height: 44px;
}
.photo-memory-stage[b-f95mp1doxm] {
padding: 1.35rem 1rem max(1.35rem, env(safe-area-inset-bottom));
}
.photo-memory-copy[b-f95mp1doxm] {
margin-bottom: 1.2rem;
}
.photo-memory-copy h2[b-f95mp1doxm],
.photo-memory-success-step h2[b-f95mp1doxm] {
font-size: clamp(2rem, 10vw, 2.75rem);
}
.photo-memory-upload-shell[b-f95mp1doxm],
.photo-memory-upload-label[b-f95mp1doxm] {
min-height: 280px;
}
.photo-memory-upload-label[b-f95mp1doxm] {
justify-content: flex-start;
padding: 1.45rem 1.15rem;
}
.photo-memory-upload-icon[b-f95mp1doxm] {
width: 58px;
height: 58px;
margin-bottom: 0.8rem;
border-radius: 18px;
font-size: 1.45rem;
}
.photo-memory-desktop-upload[b-f95mp1doxm] {
display: none;
}
.photo-memory-mobile-guide[b-f95mp1doxm] {
width: 100%;
display: flex;
align-items: flex-start;
gap: 0.7rem;
margin-top: 1rem;
padding: 0.8rem;
border-radius: 14px;
background: rgba(246, 222, 210, 0.66);
color: #6d5045;
text-align: left;
}
.photo-memory-mobile-guide > i[b-f95mp1doxm] {
margin-top: 0.15rem;
color: #a25f4e;
}
.photo-memory-mobile-guide span[b-f95mp1doxm] {
display: grid;
gap: 0.2rem;
}
.photo-memory-mobile-guide strong[b-f95mp1doxm] {
font-family: var(--font-sans);
font-size: 0.86rem;
font-weight: 750;
}
.photo-memory-mobile-guide small[b-f95mp1doxm] {
color: #80695f;
font-size: 0.78rem;
line-height: 1.45;
}
.photo-memory-mobile-actions[b-f95mp1doxm] {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.55rem;
margin-top: 0.8rem;
}
.photo-memory-mobile-camera[b-f95mp1doxm],
.photo-memory-mobile-library[b-f95mp1doxm] {
min-height: 46px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
padding: 0.65rem 0.7rem;
border-radius: 999px;
font-size: 0.82rem;
font-weight: 740;
cursor: pointer;
}
.photo-memory-mobile-camera[b-f95mp1doxm] {
border: 1px solid #4a342e;
background: #4a342e;
color: #fffaf6;
}
.photo-memory-mobile-library[b-f95mp1doxm] {
border: 1px solid rgba(126, 87, 70, 0.25);
background: rgba(255, 255, 255, 0.76);
color: #5f4940;
}
.photo-memory-preview[b-f95mp1doxm] {
height: min(42dvh, 360px);
}
.photo-memory-person-list[b-f95mp1doxm] {
max-height: 280px;
}
.photo-memory-new-person-form[b-f95mp1doxm] {
padding: 1rem;
}
.photo-memory-relationship-grid[b-f95mp1doxm] {
gap: 0.45rem;
}
.photo-memory-actions[b-f95mp1doxm] {
position: sticky;
bottom: calc(-1 * max(1.35rem, env(safe-area-inset-bottom)));
margin-right: -1rem;
margin-left: -1rem;
padding: 0.85rem 1rem max(0.85rem, env(safe-area-inset-bottom));
background: linear-gradient(rgba(255, 248, 241, 0.82), #fff8f1 32%);
backdrop-filter: blur(8px);
}
.photo-memory-actions .photo-memory-primary[b-f95mp1doxm] {
flex: 1;
}
.photo-memory-success-step[b-f95mp1doxm] {
min-height: 66dvh;
}
}
@media (prefers-reduced-motion: reduce) {
.photo-memory-step[b-f95mp1doxm],
.photo-memory-spinner[b-f95mp1doxm] {
animation: none;
}
.photo-memory-progress-track span[b-f95mp1doxm],
.photo-memory-primary[b-f95mp1doxm],
.photo-memory-close[b-f95mp1doxm],
.photo-memory-person-option[b-f95mp1doxm],
.photo-memory-new-person[b-f95mp1doxm] {
transition: none;
}
.photo-memory-recording-pulse[b-f95mp1doxm] {
animation: none;
}
.photo-memory-save-status.is-active .photo-memory-save-status-icon[b-f95mp1doxm] {
animation: none;
}
}
/* Quiet, token-based dialog surface. Existing step layout and controls remain intact. */
.photo-memory-overlay[b-f95mp1doxm] {
background: rgba(30, 37, 30, 0.58);
}
.photo-memory-dialog[b-f95mp1doxm] {
border-color: var(--lov-line);
border-radius: 12px;
background: var(--lov-surface);
box-shadow: 0 20px 56px rgba(29, 39, 29, 0.24);
color: var(--lov-ink);
}
.photo-memory-close[b-f95mp1doxm] {
border-color: var(--lov-line);
border-radius: 8px;
background: var(--lov-surface);
color: var(--lov-ink);
}
.photo-memory-close:hover:not(:disabled)[b-f95mp1doxm] {
background: var(--lov-selected);
border-color: var(--lov-green);
}
.photo-memory-wordmark[b-f95mp1doxm],
.photo-memory-copy h2[b-f95mp1doxm],
.photo-memory-success-step h2[b-f95mp1doxm],
.photo-memory-upload-label > strong[b-f95mp1doxm],
.photo-memory-notice strong[b-f95mp1doxm],
.photo-memory-new-person-form h3[b-f95mp1doxm],
.photo-memory-voice-copy h3[b-f95mp1doxm],
.photo-memory-person-option[b-f95mp1doxm],
.photo-memory-new-person[b-f95mp1doxm] {
color: var(--lov-ink);
}
.photo-memory-progress-copy[b-f95mp1doxm],
.photo-memory-intro[b-f95mp1doxm],
.photo-memory-upload-label > span:not(.photo-memory-upload-icon):not(.photo-memory-upload-button)[b-f95mp1doxm],
.photo-memory-privacy-note[b-f95mp1doxm],
.photo-memory-person-details span[b-f95mp1doxm],
.photo-memory-new-person small[b-f95mp1doxm],
.photo-memory-notice p[b-f95mp1doxm],
.photo-memory-voice-copy p[b-f95mp1doxm],
.photo-memory-back[b-f95mp1doxm] {
color: var(--lov-muted);
}
.photo-memory-eyebrow[b-f95mp1doxm] {
color: var(--lov-green);
}
.photo-memory-progress-track[b-f95mp1doxm] {
background: var(--lov-selected);
}
.photo-memory-progress-track span[b-f95mp1doxm] {
background: var(--lov-green);
}
.photo-memory-upload-shell[b-f95mp1doxm] {
border-color: var(--lov-line);
border-radius: 12px;
background: var(--lov-surface);
}
.photo-memory-upload-shell:not(.has-photo):hover[b-f95mp1doxm] {
transform: none;
border-color: var(--lov-green);
box-shadow: none;
}
.photo-memory-upload-icon[b-f95mp1doxm],
.photo-memory-notice-icon[b-f95mp1doxm],
.photo-memory-person-avatar[b-f95mp1doxm],
.photo-memory-new-person-icon[b-f95mp1doxm] {
border-radius: 8px;
background: var(--lov-selected);
color: var(--lov-green);
box-shadow: none;
}
.photo-memory-upload-button[b-f95mp1doxm],
.photo-memory-primary[b-f95mp1doxm],
.photo-memory-voice-record[b-f95mp1doxm],
.photo-memory-mobile-camera[b-f95mp1doxm] {
border-color: var(--lov-green);
border-radius: 8px;
background: var(--lov-green);
color: var(--lov-on-green);
box-shadow: none;
}
.photo-memory-primary:hover:not(:disabled)[b-f95mp1doxm],
.photo-memory-voice-record:hover:not(:disabled)[b-f95mp1doxm],
.photo-memory-mobile-camera:hover:not(:disabled)[b-f95mp1doxm] {
background: var(--lov-green);
box-shadow: none;
}
.photo-memory-primary:disabled[b-f95mp1doxm],
.photo-memory-close:disabled[b-f95mp1doxm] {
border-color: var(--lov-line);
background: var(--lov-selected);
color: var(--lov-muted);
opacity: 1;
}
.photo-memory-person-option[b-f95mp1doxm],
.photo-memory-new-person[b-f95mp1doxm],
.photo-memory-new-person-form[b-f95mp1doxm],
.photo-memory-voice-card[b-f95mp1doxm],
.photo-memory-notice[b-f95mp1doxm],
.photo-memory-save-status[b-f95mp1doxm],
.photo-memory-context-strip[b-f95mp1doxm] {
border-color: var(--lov-line);
border-radius: 12px;
background: var(--lov-surface);
box-shadow: none;
}
.photo-memory-person-option:hover[b-f95mp1doxm],
.photo-memory-new-person:hover[b-f95mp1doxm],
.photo-memory-relationship-option:hover[b-f95mp1doxm],
.photo-memory-relationship-option.selected[b-f95mp1doxm] {
transform: none;
border-color: var(--lov-green);
background: var(--lov-selected);
box-shadow: none;
color: var(--lov-ink);
}
.photo-memory-field input[b-f95mp1doxm],
.photo-memory-field textarea[b-f95mp1doxm],
.photo-memory-relationship-option[b-f95mp1doxm],
.photo-memory-use-written[b-f95mp1doxm],
.photo-memory-mobile-library[b-f95mp1doxm] {
border-color: var(--lov-line);
border-radius: 8px;
background: var(--lov-surface);
color: var(--lov-ink);
}
.photo-memory-field input:focus[b-f95mp1doxm],
.photo-memory-field textarea:focus[b-f95mp1doxm] {
border-color: var(--lov-green);
box-shadow: 0 0 0 3px var(--lov-focus);
}
.photo-memory-error[b-f95mp1doxm] {
border-left-color: #b24a3d;
background: #fff1ef;
color: #8b352b;
}
.photo-memory-primary:focus-visible[b-f95mp1doxm],
.photo-memory-back:focus-visible[b-f95mp1doxm],
.photo-memory-close:focus-visible[b-f95mp1doxm],
.photo-memory-person-option:focus-visible[b-f95mp1doxm],
.photo-memory-new-person:focus-visible[b-f95mp1doxm],
.photo-memory-relationship-option:focus-visible[b-f95mp1doxm],
.photo-memory-change-photo:focus-visible[b-f95mp1doxm],
.photo-memory-voice-record:focus-visible[b-f95mp1doxm],
.photo-memory-voice-stop:focus-visible[b-f95mp1doxm],
.photo-memory-re-record:focus-visible[b-f95mp1doxm],
.photo-memory-suggested-draft button:focus-visible[b-f95mp1doxm],
.photo-memory-upload-shell:focus-within[b-f95mp1doxm] {
outline-color: var(--lov-focus);
}
@media (max-width: 768px) {
.photo-memory-overlay[b-f95mp1doxm],
.photo-memory-actions[b-f95mp1doxm] {
background: var(--lov-paper);
}
.photo-memory-actions[b-f95mp1doxm] {
backdrop-filter: none;
}
.photo-memory-mobile-guide[b-f95mp1doxm] {
border-radius: 8px;
background: var(--lov-selected);
color: var(--lov-ink);
}
.photo-memory-mobile-guide > i[b-f95mp1doxm] {
color: var(--lov-green);
}
.photo-memory-mobile-guide small[b-f95mp1doxm] {
color: var(--lov-muted);
}
}
/* F021: every text-bearing status and review surface declares an accessible pair. */
.photo-memory-field > span[b-f95mp1doxm],
.photo-memory-relationship-fieldset legend[b-f95mp1doxm],
.photo-memory-context-strip[b-f95mp1doxm],
.photo-memory-consent[b-f95mp1doxm],
.photo-memory-recording-state[b-f95mp1doxm],
.photo-memory-audio-retention[b-f95mp1doxm],
.photo-memory-review-content h3[b-f95mp1doxm],
.photo-memory-private-card strong[b-f95mp1doxm],
.photo-memory-success-private[b-f95mp1doxm],
.photo-memory-suggested-draft button[b-f95mp1doxm],
.photo-memory-back:hover:not(:disabled)[b-f95mp1doxm] {
color: var(--lov-ink);
}
.photo-memory-capture-processing[b-f95mp1doxm],
.photo-memory-save-status:not(.is-active)[b-f95mp1doxm],
.photo-memory-audio-retention small[b-f95mp1doxm],
.photo-memory-success-body[b-f95mp1doxm],
.photo-memory-review-content p[b-f95mp1doxm],
.photo-memory-review-label[b-f95mp1doxm],
.photo-memory-voice-fallback[b-f95mp1doxm],
.photo-memory-review-retention[b-f95mp1doxm],
.photo-memory-review-capture-note[b-f95mp1doxm],
.photo-memory-prompt-note[b-f95mp1doxm],
.photo-memory-private-card p[b-f95mp1doxm],
.photo-memory-private-card .photo-memory-review-voice-kept[b-f95mp1doxm] {
color: var(--lov-muted);
}
.photo-memory-voice-fallback[b-f95mp1doxm],
.photo-memory-voice-preview[b-f95mp1doxm],
.photo-memory-review-retention[b-f95mp1doxm],
.photo-memory-review-card[b-f95mp1doxm],
.photo-memory-review-content[b-f95mp1doxm] {
border-color: var(--lov-line);
background: var(--lov-surface);
}
.photo-memory-voice-preview[b-f95mp1doxm] {
color: var(--lov-ink);
}
.photo-memory-suggested-draft[b-f95mp1doxm],
.photo-memory-review-capture-note[b-f95mp1doxm],
.photo-memory-prompt-note[b-f95mp1doxm],
.photo-memory-private-card[b-f95mp1doxm],
.photo-memory-success-private[b-f95mp1doxm] {
background: var(--lov-selected);
}
.photo-memory-suggested-draft[b-f95mp1doxm] {
color: var(--lov-ink);
}
.photo-memory-suggested-draft button[b-f95mp1doxm] {
border: 1px solid var(--lov-line);
border-radius: 8px;
background: var(--lov-surface);
}
.photo-memory-prompt-note i[b-f95mp1doxm],
.photo-memory-private-icon[b-f95mp1doxm] {
color: var(--lov-green);
}
.photo-memory-consent:focus-within[b-f95mp1doxm] {
outline-color: var(--lov-focus);
}
.photo-memory-checkbox[b-f95mp1doxm] {
border-color: var(--lov-line);
background: var(--lov-surface);
}
.photo-memory-consent.confirmed .photo-memory-checkbox[b-f95mp1doxm] {
border-color: var(--lov-green);
background: var(--lov-green);
color: var(--lov-on-green);
}
/* /Components/PricingModal.razor.rz.scp.css */
.modal-overlay[b-587tq6eq2r] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(40,25,15,0.55);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 1000;
}
.modal-overlay.visible[b-587tq6eq2r] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
.modal-content.pricing-modal-content[b-587tq6eq2r] {
position: relative;
background-color: var(--card-content-bg, #fff9f5);
padding: 30px;
border-radius: 18px;
max-width: 640px;
width: 90%;
box-shadow: var(--shadow-medium, 0 8px 25px rgba(100,80,70,0.12));
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
}
.modal-overlay.visible .pricing-modal-content[b-587tq6eq2r] {
transform: scale(1);
}
.pricing-modal-content .modal-close-btn[b-587tq6eq2r] {
position: absolute;
top: 16px;
right: 16px;
background: none;
border: none;
font-size: 1.6rem;
font-weight: 300;
color: #a1a1aa;
cursor: pointer;
line-height: 1;
padding: 5px;
transition: color 0.2s ease;
}
.pricing-modal-content .modal-close-btn:hover[b-587tq6eq2r] {
color: #52525b;
}
.pricing-headline[b-587tq6eq2r] {
font-size: 1.8rem;
margin-bottom: 1rem;
font-weight: 600;
color: #5c4033;
}
.plans-container[b-587tq6eq2r] {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
padding-bottom: 0.5rem;
}
.plan-box[b-587tq6eq2r] {
background: #fff7f2;
border: 1px solid var(--soft-border, #e1d4c9);
border-radius: 14px;
padding: 1.2rem 1.4rem;
width: 180px;
box-shadow: var(--shadow-soft, 0 4px 12px rgba(100,80,70,0.08));
display: flex;
flex-direction: column;
align-items: center;
}
.plan-box h3[b-587tq6eq2r] {
margin: 0 0 0.3rem 0;
color: #4b2e2e;
}
.plan-box .price[b-587tq6eq2r] {
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: #6a504b;
}
.plan-box ul[b-587tq6eq2r] {
list-style: none;
padding: 0;
margin: 0 0 0.75rem 0;
font-size: 0.9rem;
color: #6a504b;
}
.plan-box li[b-587tq6eq2r] {
margin-bottom: 0.25rem;
}
.btn-select[b-587tq6eq2r] {
width: 100%;
padding: 0.5rem 1rem;
border-radius: 10px;
background-color: var(--button-card-primary-bg, #ff9d7e);
color: var(--button-card-primary-text, #fff);
border: none;
cursor: pointer;
font-weight: 500;
transition: background-color 0.2s ease;
}
.btn-select:hover:not(:disabled)[b-587tq6eq2r] {
background-color: var(--button-card-primary-hover-bg, #ff855f);
}
.btn-select:disabled[b-587tq6eq2r] {
background-color: #ccc;
cursor: not-allowed;
opacity: 0.7;
}
/* /Components/PrivateReflectionModal.razor.rz.scp.css */
/* PrivateReflectionModal.razor.css */
/* ========================================= */
/* Shared Modal Overlay Styling */
/* ========================================= */
.modal-overlay[b-eeykqepucp] { /* YOUR EXISTING STYLE - UNCHANGED */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(40, 25, 15, 0.55);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
z-index: 2000;
}
.modal-overlay.visible[b-eeykqepucp] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
/* --- Base Modal Content Styling (Common) --- */
.modal-content[b-eeykqepucp] { /* YOUR EXISTING STYLE - UNCHANGED (used as a base) */
position: relative;
/* padding: 30px 45px;*/
border-radius: 18px;
max-width: 440px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
z-index: 1002;
}
.modal-overlay.visible .modal-content[b-eeykqepucp] {
transform: scale(1);
}
/* === Specific styles for the REFINED Reflection Modal === */
/* This targets the
*/
.modal-content.reflection-modal-content[b-eeykqepucp] {
background-color: #FFFCFA; /* Very light, almost white, warm cream (like Reset Password modal) */
border-radius: 16px; /* Softer, larger radius */
max-width: 480px; /* Adjust width if needed, maybe slightly wider for textarea */
/* width: 90%; /* Inherited */
text-align: center; /* Default text align for title/subtitle */
box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12); /* Soft, warm shadow */
display: flex;
flex-direction: column;
max-height: 90vh;
overflow: hidden; /* Important for fixed header/footer layout */
position: relative; /* For absolute positioning of close button */
}
/* Header Section for Reflection Modal - No distinct BG, just structure */
.reflection-modal-header-section[b-eeykqepucp] {
flex-shrink: 0;
padding: 2rem 3rem 1rem 2rem; /* Added right padding for close button */
background: #FFFCFA;
border-bottom: 1px solid #f0e1d0;
position: relative; /* For close button */
}
/* Remove adaptive header backgrounds if not used for this cleaner style */
/* .reflection-modal-header-section.emotion-header-heavy { ... } */
/* .reflection-modal-header-section.emotion-header-balanced { ... } */
/* Back Button - Can be removed if only close button is desired for simplicity */
.modal-back-btn[b-eeykqepucp] {
position: absolute;
left: 18px; /* Consistent with close button */
top: 18px; /* Consistent with close button */
background: none;
border: none;
font-size: 1.3rem; /* Slightly larger if using FontAwesome icon */
color: var(--text-light);
cursor: pointer;
padding: 5px;
transition: color 0.2s ease;
line-height: 1;
}
.modal-back-btn:hover[b-eeykqepucp] {
color: var(--text);
}
.modal-back-btn .fas[b-eeykqepucp] { /* If using FontAwesome */
display: block;
}
.reflection-headline[b-eeykqepucp] { /* Title like "Reset Password", "Ta ett djupt..." */
font-family: var(--font-serif); /* Or your main heading font */
font-size: 1.6rem; /* Large and clear, adjust to fit */
font-weight: 600;
color: #594a3a;
text-align: center;
margin: 0; /* Remove default margins */
line-height: 1.25;
}
/* Close button matching Reset Password modal style */
.modal-close-btn-alt[b-eeykqepucp] {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
font-size: 1.5rem; /* Size of '×' */
font-weight: 400; /* Not too bold */
color: #967f6b;
cursor: pointer;
line-height: 1;
padding: 5px;
transition: color 0.2s ease;
z-index: 10;
}
.modal-close-btn-alt:hover[b-eeykqepucp] {
color: #594a3a;
}
.reflection-modal-body-section[b-eeykqepucp] {
flex: 1;
padding: 1.5rem 2rem;
overflow-y: auto;
text-align: left; /* Align content like labels and textarea to the left */
/* Enable smooth momentum scrolling on iOS/mobile */
-webkit-overflow-scrolling: touch;
}
/* NEW Subtitle style (if you add one like in Reset Password modal) */
.reflection-modal-subtitle[b-eeykqepucp] {
font-size: 0.95rem;
color: #967f6b;
margin-bottom: 1.5rem; /* Space before textarea */
line-height: 1.5;
text-align: center; /* Subtitle is centered */
max-width: 90%;
margin-left: auto;
margin-right: auto;
padding: 0 2rem;
}
.reflection-textarea-styled[b-eeykqepucp] { /* Input field style from Reset Password modal */
width: 100%;
padding: 14px 18px; /* Generous padding */
font-size: 1rem;
border-radius: 12px; /* Rounded corners */
border: 1px solid #E0D8D1; /* Softer, lighter border */
background-color: #fff; /* White background */
color: #594a3a;
line-height: 1.6;
min-height: 120px; /* Adjust as needed */
resize: vertical;
margin-bottom: 0.5rem; /* Space before hint text */
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.reflection-textarea-styled[b-eeykqepucp]::placeholder {
color: #b0a9a7;
}
.reflection-textarea-styled:focus[b-eeykqepucp] {
border-color: #fbbbad; /* Accent color border on focus */
outline: none;
box-shadow: 0 0 0 3px rgba(251, 187, 173, 0.25); /* Accent glow */
}
.reflection-hint[b-eeykqepucp] { /* "This is private..." text */
display: block;
margin-bottom: 1.2rem; /* Space before tags */
font-size: 0.75rem; /* Smaller hint text */
color: #967f6b; /* Softer color */
text-align: left; /* Align with textarea */
}
.reflection-tags-area[b-eeykqepucp] {
margin-top: 1rem;
}
.tags-label[b-eeykqepucp] {
display: block;
font-size: 0.85rem;
font-weight: 500;
color: #594a3a; /* Slightly darker label */
margin-bottom: 0.6rem;
text-align: left;
}
.tags-options-container[b-eeykqepucp] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.tag-option-button[b-eeykqepucp] { /* Softer, more subtle tags */
background-color: transparent;
color: #967f6b;
border: 1px solid #E0D8D1; /* Lighter border */
border-radius: 15px;
padding: 0.35rem 0.9rem;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tag-option-button:hover[b-eeykqepucp] {
border-color: #f9ac9c;
background-color: #FFF9F7; /* Very subtle hover */
}
.tag-option-button.active[b-eeykqepucp] { /* Selected tag */
background-color: #f9ac9c;
color: #594a3a;
border-color: #fbbbad;
font-weight: 500;
}
.reflection-modal-footer-section[b-eeykqepucp] {
flex-shrink: 0;
padding: 1.5rem 2rem;
border-top: 1px solid #f0e1d0; /* Separator line above button */
background: #FFFCFA;
display: flex;
justify-content: flex-end; /* Align buttons to the right */
gap: 0.75rem;
width: 100%;
}
.btn-modal-cancel[b-eeykqepucp] { /* Cancel button */
background-color: #E9E4E0;
color: #594a3a;
border: 1px solid #dcd6d4;
padding: 0.7rem 1.4rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-modal-cancel:hover[b-eeykqepucp] {
background-color: #d9d3cf;
}
.btn-modal-save[b-eeykqepucp] { /* Primary Save button, styled like "Send Reset Link" */
background-color: #fbbbad;
color: #38250d;
padding: 0.7rem 1.4rem;
border-radius: 10px;
border: none;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-modal-save:hover[b-eeykqepucp] {
background-color: #f9ac9c; /* Lighter/darker on hover */
}
.btn-modal-save.disabled[b-eeykqepucp],
.btn-modal-save:disabled[b-eeykqepucp] {
background-color: #E0D8D1 !important;
color: #967f6b !important;
cursor: not-allowed;
}
/* === Mobile Responsiveness === */
@media (max-width: 768px) {
.modal-content.reflection-modal-content[b-eeykqepucp] {
max-width: 95vw;
max-height: 95vh;
}
.reflection-modal-header-section[b-eeykqepucp] {
padding: 1.5rem 2.5rem 1rem 1.5rem; /* Adjusted right padding for close button */
}
.reflection-headline[b-eeykqepucp] {
font-size: 1.4rem;
}
.modal-close-btn-alt[b-eeykqepucp] {
top: 15px;
right: 15px;
font-size: 1.4rem;
}
.reflection-modal-subtitle[b-eeykqepucp] {
padding: 0 1.5rem;
}
.reflection-modal-body-section[b-eeykqepucp] {
padding: 1.5rem 1.5rem;
position: relative;
}
/* Add a subtle shadow/gradient above the footer to hint at scrollable content */
.reflection-modal-body-section[b-eeykqepucp]::after {
content: '';
position: sticky;
bottom: -1px;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to top, rgba(255, 252, 250, 0.9) 0%, rgba(255, 252, 250, 0.3) 50%, transparent 100%);
pointer-events: none;
z-index: 1;
margin: 0 -1.5rem; /* Compensate for body padding */
}
.reflection-modal-footer-section[b-eeykqepucp] {
padding: 1.5rem 1.5rem;
/* Keep buttons right-aligned at 768px, they're still side by side */
/* Add a subtle shadow above the footer */
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}
}
@media (max-width: 480px) {
.modal-content.reflection-modal-content[b-eeykqepucp] {
width: 100%;
height: 100vh;
max-height: none;
max-width: none;
border-radius: 0;
}
.reflection-modal-header-section[b-eeykqepucp] {
padding: 1rem 2rem 0.8rem 1rem; /* Adjusted right padding for close button */
}
.reflection-headline[b-eeykqepucp] {
font-size: 1.2rem;
}
.modal-close-btn-alt[b-eeykqepucp] {
top: 12px;
right: 12px;
font-size: 1.3rem;
}
.reflection-modal-subtitle[b-eeykqepucp] {
padding: 0 1rem;
}
.reflection-modal-body-section[b-eeykqepucp] {
padding: 1rem;
position: relative;
}
/* Add a more prominent shadow/gradient above the footer on very small screens */
.reflection-modal-body-section[b-eeykqepucp]::after {
content: '';
position: sticky;
bottom: -1px;
left: 0;
right: 0;
height: 24px;
background: linear-gradient(to top, rgba(255, 252, 250, 0.95) 0%, rgba(255, 252, 250, 0.4) 60%, transparent 100%);
pointer-events: none;
z-index: 1;
margin: 0 -1rem; /* Compensate for body padding */
}
.reflection-modal-footer-section[b-eeykqepucp] {
padding: 1rem;
/* Enhanced shadow for small screens */
box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
/* Stack buttons vertically on mobile */
flex-direction: column;
gap: 0.75rem;
}
/* Ensure all button types are full width on mobile */
.btn-modal-cancel[b-eeykqepucp], .btn-modal-save[b-eeykqepucp] {
width: 100% !important;
padding: 1rem 2rem;
font-size: 1rem;
}
}
/* /Components/PublicHome.razor.rz.scp.css */
.public-home[b-s06qxemwcd] {
--home-paper: #faf7f0;
--home-ink: #30382d;
--home-muted: #66665b;
--home-green: #394d37;
width: 100%;
min-width: 0;
color: var(--home-ink);
background: var(--home-paper);
font-family: 'Inter', sans-serif;
line-height: 1.65;
overflow: clip;
}
.public-home *[b-s06qxemwcd], .public-home *[b-s06qxemwcd]::before, .public-home *[b-s06qxemwcd]::after { box-sizing: border-box; }
.public-home a[b-s06qxemwcd] { color: inherit; text-decoration: none; }
.public-home a:hover[b-s06qxemwcd] { text-decoration: underline; text-underline-offset: 5px; }
.public-home a:focus-visible[b-s06qxemwcd], .public-home button:focus-visible[b-s06qxemwcd], .public-home summary:focus-visible[b-s06qxemwcd] { outline: 3px solid #957137; outline-offset: 5px; }
.public-home h1[b-s06qxemwcd], .public-home h2[b-s06qxemwcd], .public-home h3[b-s06qxemwcd], .public-home p[b-s06qxemwcd], .public-home figure[b-s06qxemwcd] { margin: 0; }
.public-home h1[b-s06qxemwcd], .public-home h2[b-s06qxemwcd], .public-home h3[b-s06qxemwcd] { font-family: 'Fraunces', Georgia, serif; font-weight: 450; text-wrap: balance; }
.public-home h2[b-s06qxemwcd] { font-size: clamp(2rem, 3.3vw, 3.25rem); line-height: 1.16; letter-spacing: -.035em; }
.skip-link[b-s06qxemwcd] { position: absolute; top: 8px; left: 16px; transform: translateY(-150%); padding: 12px 20px; background: #fff; z-index: 100; }
.skip-link:focus[b-s06qxemwcd] { transform: none; }
.home-header[b-s06qxemwcd] { position: relative; z-index: 5; max-width: 1440px; margin: auto; min-height: 96px; padding: 22px 5%; display: flex; gap: 32px; align-items: center; }
.home-brand[b-s06qxemwcd] { flex-shrink: 0; display: inline-flex; --libbu-brand-ink: var(--home-ink); --libbu-brand-symbol: var(--home-green); }
.desktop-nav[b-s06qxemwcd] { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: .85rem; }
.header-actions[b-s06qxemwcd] { display: flex; gap: 22px; align-items: center; font-size: .85rem; }
.login-link[b-s06qxemwcd] { border: 0; padding: 10px 0; font: inherit; color: inherit; background: none; cursor: pointer; }
.language-menu[b-s06qxemwcd], .mobile-menu[b-s06qxemwcd] { position: relative; }
.language-menu summary[b-s06qxemwcd], .mobile-menu summary[b-s06qxemwcd] { cursor: pointer; padding: 10px 2px; min-height: 44px; }
.language-menu nav[b-s06qxemwcd], .mobile-menu nav[b-s06qxemwcd] { position: absolute; right: 0; top: 100%; min-width: 170px; padding: 10px; background: var(--home-paper); border: 1px solid #d7d3c7; border-radius: 6px; box-shadow: 0 8px 24px #30382d14; }
.language-menu nav a[b-s06qxemwcd], .mobile-menu nav a[b-s06qxemwcd] { display: block; padding: 10px 14px; }
.language-menu [aria-current][b-s06qxemwcd] { font-weight: 600; }
.mobile-menu[b-s06qxemwcd] { display: none; }
.public-home .home-button[b-s06qxemwcd] { display: inline-flex; align-items: center; justify-content: center; gap: 22px; padding: 15px 23px; min-height: 48px; background: var(--home-green); color: #fffdf4; border-radius: 5px; font-size: .9rem; font-weight: 500; line-height: 1.4; text-decoration: none; transition: background .15s; }
.public-home .home-button:hover[b-s06qxemwcd] { background: #263c29; }
.home-button span[b-s06qxemwcd] { font-size: 1.25rem; }
.public-home .header-start[b-s06qxemwcd] { padding: 13px 18px; }
.home-hero[b-s06qxemwcd] { position: relative; max-width: 1600px; min-height: 610px; margin: auto; display: grid; align-items: center; isolation: isolate; }
.hero-photo[b-s06qxemwcd] { position: absolute; inset: 0 0 0 34%; z-index: -1; }
.hero-photo img[b-s06qxemwcd] { width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
.hero-photo[b-s06qxemwcd]::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--home-paper) 0%, #faf7f0ed 6%, #faf7f080 24%, transparent 46%), linear-gradient(0deg, var(--home-paper), transparent 18%); }
.hero-copy[b-s06qxemwcd] { width: 52%; max-width: 730px; padding: 46px 0 70px max(5%, calc((100% - 1296px) / 2)); }
.eyebrow[b-s06qxemwcd] { font-size: .7rem; text-transform: uppercase; letter-spacing: .18em; font-weight: 600; }
.hero-copy h1[b-s06qxemwcd] { margin: 18px 0 24px; font-size: clamp(2.9rem, 4.5vw, 4.5rem); line-height: 1.07; letter-spacing: -.045em; }
.hero-body[b-s06qxemwcd] { max-width: 430px; font-size: 1.02rem; color: #555b50; }
.hero-actions[b-s06qxemwcd] { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin: 28px 0 17px; }
.text-link[b-s06qxemwcd] { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; font-size: .88rem; font-weight: 500; }
.quiet-note[b-s06qxemwcd] { color: var(--home-muted); font-size: .73rem; max-width: 390px; }
.memory-section[b-s06qxemwcd] { max-width: 1240px; margin: auto; padding: 88px 5% 96px; display: grid; grid-template-columns: .95fr 1.05fr; gap: 9%; align-items: center; scroll-margin-top: 32px; }
.memory-copy h2[b-s06qxemwcd] { margin: 14px 0 30px; max-width: 420px; }
.memory-steps[b-s06qxemwcd] { counter-reset: memory; padding: 0; margin: 0 0 18px; list-style: none; }
.memory-steps li[b-s06qxemwcd] { position: relative; padding-left: 52px; margin-bottom: 24px; counter-increment: memory; }
.memory-steps li[b-s06qxemwcd]::before { content: counter(memory, decimal-leading-zero); position: absolute; left: 0; top: -2px; font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-style: italic; color: #7b8069; }
.memory-steps h3[b-s06qxemwcd] { font-size: 1.2rem; line-height: 1.4; margin-bottom: 4px; }
.memory-steps p[b-s06qxemwcd] { font-size: .87rem; color: var(--home-muted); }
.memory-example[b-s06qxemwcd] { min-width: 0; }
.memory-paper[b-s06qxemwcd] { padding: 25px; border: 1px solid #e1dbce; border-radius: 8px; background: #fffcf7; box-shadow: 0 20px 45px #625f4310; transform: rotate(2deg); }
.memory-paper > img[b-s06qxemwcd] { display: block; width: 100%; height: 255px; object-fit: cover; object-position: 50% 35%; border-radius: 3px; }
.memory-writing[b-s06qxemwcd] { padding: 22px 9px 5px; }
.example-label[b-s06qxemwcd] { font-size: .63rem; letter-spacing: .14em; text-transform: uppercase; color: var(--home-muted); }
.memory-writing h3[b-s06qxemwcd] { margin: 9px 0 10px; font-size: 1.7rem; line-height: 1.25; }
.memory-writing > p:not(.example-label)[b-s06qxemwcd] { font-size: .9rem; color: #616254; }
.private-label[b-s06qxemwcd] { margin-top: 22px; display: inline-flex; align-items: center; gap: 7px; color: #626a5a; font-size: .72rem; }
.memory-example figcaption[b-s06qxemwcd] { text-align: center; font-size: .7rem; color: var(--home-muted); margin: 22px 8px 0; }
.worlds-section[b-s06qxemwcd] { position: relative; isolation: isolate; min-height: 410px; display: flex; align-items: center; background: #27382b; color: #fffcf1; overflow: hidden; }
.worlds-image[b-s06qxemwcd] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: -2; }
.worlds-section[b-s06qxemwcd]::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, #253829 0%, #253829ed 30%, #25382970 65%, #25382910); z-index: -1; }
.worlds-copy[b-s06qxemwcd] { width: 100%; max-width: 1296px; margin: auto; padding: 64px 5%; }
.worlds-copy h2[b-s06qxemwcd] { max-width: 530px; margin: 14px 0 18px; }
.worlds-copy > p:not(.eyebrow)[b-s06qxemwcd] { max-width: 450px; color: #e5e5d6; font-size: .95rem; margin-bottom: 26px; }
.public-home .light-button[b-s06qxemwcd] { background: #f5f0df; color: #2c3f2b; }
.public-home .light-button:hover[b-s06qxemwcd] { background: #fffdf5; }
.granny-section[b-s06qxemwcd] { max-width: 1190px; margin: auto; padding: 60px 5%; display: grid; grid-template-columns: 1fr auto; gap: 34px; align-items: center; }
.granny-section > img[b-s06qxemwcd] { width: 130px; height: 150px; object-fit: contain; }
.granny-section h2[b-s06qxemwcd] { font-size: clamp(1.7rem, 2.5vw, 2.3rem); margin: 9px 0 12px; }
.granny-section p:not(.eyebrow)[b-s06qxemwcd] { max-width: 530px; font-size: .88rem; color: var(--home-muted); }
.home-footer[b-s06qxemwcd] { max-width: 1296px; margin: auto; padding: 28px 5% 36px; display: flex; align-items: center; gap: 24px; border-top: 1px solid #dedbcf; font-size: .72rem; color: var(--home-muted); }
.home-footer nav[b-s06qxemwcd] { margin-left: auto; display: flex; flex-wrap: wrap; gap: 20px; }
.home-footer nav a[b-s06qxemwcd] { padding: 10px 0; }
@media (max-width: 1150px) {
.home-header[b-s06qxemwcd] { gap: 22px; }
.desktop-nav[b-s06qxemwcd] { gap: 18px; }
.header-actions[b-s06qxemwcd] { gap: 16px; margin-left: auto; }
.header-start[b-s06qxemwcd] { display: none !important; }
.hero-copy[b-s06qxemwcd] { width: 55%; }
}
@media (max-width: 1000px) {
.desktop-nav[b-s06qxemwcd] { display: none; }
.mobile-menu[b-s06qxemwcd] { display: block; }
}
@media (max-width: 760px) {
.home-header[b-s06qxemwcd] { min-height: 78px; padding: 15px 6%; gap: 16px; }
.home-brand[b-s06qxemwcd] { --libbu-brand-size: 1.75rem; }
.desktop-nav[b-s06qxemwcd] { display: none; }
.mobile-menu[b-s06qxemwcd] { display: block; }
.header-actions[b-s06qxemwcd] { gap: 14px; font-size: .78rem; }
.home-hero[b-s06qxemwcd] { display: flex; flex-direction: column; min-height: 0; }
.hero-copy[b-s06qxemwcd] { width: 100%; padding: 32px 7% 20px; max-width: none; order: 0; }
.hero-copy h1[b-s06qxemwcd] { font-size: clamp(2.5rem, 8.8vw, 3.8rem); max-width: 580px; margin: 14px 0 20px; }
.hero-body[b-s06qxemwcd] { font-size: .95rem; max-width: 510px; }
.hero-actions[b-s06qxemwcd] { gap: 14px 22px; margin: 23px 0 14px; }
.hero-photo[b-s06qxemwcd] { position: relative; inset: auto; order: 1; width: 100%; height: 310px; margin-top: 8px; }
.hero-photo img[b-s06qxemwcd] { object-position: 65% 52%; }
.hero-photo[b-s06qxemwcd]::after { background: linear-gradient(180deg, var(--home-paper), transparent 20%, transparent 80%, var(--home-paper)); }
.memory-section[b-s06qxemwcd] { grid-template-columns: 1fr; gap: 36px; padding: 40px 7% 60px; }
.memory-copy h2[b-s06qxemwcd] { max-width: 420px; }
.memory-paper[b-s06qxemwcd] { transform: none; padding: 18px; }
.memory-paper > img[b-s06qxemwcd] { height: 250px; }
.memory-example[b-s06qxemwcd] { max-width: 490px; width: 100%; justify-self: center; }
.worlds-section[b-s06qxemwcd] { min-height: 470px; align-items: flex-end; }
.worlds-section[b-s06qxemwcd]::before { background: linear-gradient(0deg, #253829 10%, #253829e8 48%, #25382930); }
.worlds-copy[b-s06qxemwcd] { padding: 120px 7% 40px; }
.worlds-copy h2[b-s06qxemwcd] { max-width: 420px; }
.granny-section[b-s06qxemwcd] { grid-template-columns: 1fr; padding: 46px 7%; gap: 18px; }
.granny-section > img[b-s06qxemwcd] { width: 84px; height: 115px; }
.granny-section .text-link[b-s06qxemwcd] { grid-column: 1; }
.home-footer[b-s06qxemwcd] { margin: 0 7%; padding: 25px 0 32px; flex-wrap: wrap; gap: 12px 20px; }
.home-footer nav[b-s06qxemwcd] { width: 100%; margin-left: 0; }
}
@media (max-width: 360px) {
.home-header[b-s06qxemwcd] { padding-inline: 5%; gap: 8px; }
.header-actions[b-s06qxemwcd] { gap: 10px; }
.home-brand[b-s06qxemwcd] { --libbu-brand-size: 1.5rem; }
.hero-actions[b-s06qxemwcd] { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { .public-home .home-button[b-s06qxemwcd] { transition: none; } }
/* /Components/PublishedStoryAudioRoom.razor.rz.scp.css */
.published-audio[b-ba5nvoggtr] {
width: min(100%, 88rem);
margin: 0 auto;
padding: clamp(1rem, 3vw, 3rem);
}
.published-audio__header[b-ba5nvoggtr] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(9rem, 15rem);
gap: clamp(1.25rem, 4vw, 4rem);
align-items: center;
margin-bottom: 1.5rem;
}
.published-audio__header p[b-ba5nvoggtr] {
margin: 0 0 .45rem;
color: #b45332;
font-size: .78rem;
font-weight: 800;
letter-spacing: .12em;
text-transform: uppercase;
}
.published-audio__header h1[b-ba5nvoggtr] {
margin: 0;
color: #30221c;
font-family: var(--font-serif);
font-size: clamp(2.2rem, 6vw, 5rem);
line-height: .98;
}
.published-audio__header span[b-ba5nvoggtr] {
display: block;
margin-top: .8rem;
color: #846c5e;
font-size: 1.1rem;
}
.published-audio__window[b-ba5nvoggtr] {
display: flex;
align-items: center;
gap: .65rem;
margin: 0 0 1.25rem;
padding: .85rem 1rem;
border: 1px solid rgba(75, 119, 84, .24);
border-radius: 1rem;
background: #f1f6ed;
color: #416c4c;
}
.published-audio__window span[b-ba5nvoggtr] {
width: .65rem;
height: .65rem;
border-radius: 50%;
background: #4d7d58;
}
.published-audio__window p[b-ba5nvoggtr] {
margin: 0;
}
.published-audio__download[b-ba5nvoggtr] {
display: inline-flex;
margin-top: 1.25rem;
padding: .8rem 1.15rem;
border: 1px solid #d5c6b8;
border-radius: 999px;
color: #4b382d;
font-weight: 800;
text-decoration: none;
}
.published-audio__download:focus-visible[b-ba5nvoggtr] {
outline: 3px solid rgba(70, 113, 81, .35);
outline-offset: 3px;
}
@media (max-width: 640px) {
.published-audio__header[b-ba5nvoggtr] {
grid-template-columns: 1fr;
}
[b-ba5nvoggtr] .published-audio-cover {
max-width: 11rem;
}
}
/* /Components/ReviewMemoryModal.razor.rz.scp.css */
/* ReviewMemoryModal.razor.css */
.review-modal-overlay[b-bmnsfepcei] {
position: fixed;
inset: 0;
background-color: rgba(38, 29, 22, 0.64);
-webkit-backdrop-filter: blur(10px) saturate(108%);
backdrop-filter: blur(10px) saturate(108%);
display: flex;
justify-content: center;
align-items: center;
z-index: 2100;
padding: clamp(0.85rem, 3vw, 1.5rem);
}
.review-modal-content[b-bmnsfepcei] {
background:
radial-gradient(circle at 50% 0%, rgba(255, 238, 216, 0.7), transparent 50%),
linear-gradient(180deg, #FFFDF8 0%, #FFF4E7 100%);
border-radius: 18px;
width: 100%;
max-width: 590px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 24px 70px rgba(55, 39, 27, 0.24), 0 1px 0 rgba(255, 255, 255, 0.75) inset;
border: 1px solid rgba(196, 154, 108, 0.2);
}
.review-modal-header[b-bmnsfepcei] {
display: flex;
justify-content: flex-end;
padding: 1rem 1.2rem 0;
}
.review-modal-close[b-bmnsfepcei] {
background: none;
border: none;
border-radius: 999px;
font-size: 1.35rem;
color: rgba(91, 69, 52, 0.68);
cursor: pointer;
padding: 0.2rem 0.55rem;
line-height: 1;
transition: all 0.3s ease;
}
.review-modal-close:hover[b-bmnsfepcei],
.review-modal-close:focus-visible[b-bmnsfepcei] {
background: rgba(164, 123, 80, 0.1);
color: #5C4033;
outline: none;
}
.review-modal-body[b-bmnsfepcei] {
padding: 0 clamp(1.15rem, 4vw, 2.2rem) 1.4rem;
text-align: center;
}
.review-icon-circle[b-bmnsfepcei] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 4rem;
height: 4rem;
margin-bottom: 0.9rem;
border-radius: 999px;
color: #9D744C;
background: rgba(255, 247, 235, 0.9);
box-shadow: 0 0 0 1px rgba(196, 154, 108, 0.18), 0 10px 28px rgba(142, 98, 55, 0.12);
}
.review-icon-circle svg[b-bmnsfepcei] {
width: 2.6rem;
height: 2.6rem;
}
.review-title[b-bmnsfepcei] {
font-family: var(--font-serif);
font-size: clamp(1.45rem, 3.8vw, 1.8rem);
font-weight: 600;
line-height: 1.14;
color: #33291F;
margin: 0 0 0.35rem;
}
.review-counter[b-bmnsfepcei] {
font-family: var(--font-sans);
font-size: 0.82rem;
color: #7A604A;
letter-spacing: 0.02em;
margin: 0;
white-space: nowrap;
}
.review-counter-row[b-bmnsfepcei] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
max-width: 100%;
margin: 0 0 1.25rem;
}
.review-stack-nav[b-bmnsfepcei] {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 1.9rem;
height: 1.9rem;
border: 1px solid rgba(142, 103, 68, 0.22);
border-radius: 6px;
background: linear-gradient(135deg, rgba(255, 253, 248, 0.96), rgba(247, 238, 224, 0.82));
box-shadow: 0 5px 14px rgba(82, 54, 31, 0.07), inset 0 -1px 0 rgba(113, 82, 52, 0.08);
color: #6B523E;
cursor: pointer;
font-family: var(--font-serif);
font-size: 1.35rem;
line-height: 1;
transition: all 0.3s ease;
}
.review-stack-nav:hover:not(:disabled)[b-bmnsfepcei],
.review-stack-nav:focus-visible[b-bmnsfepcei] {
background: linear-gradient(135deg, rgba(255, 250, 241, 1), rgba(242, 226, 205, 0.9));
border-color: rgba(125, 88, 58, 0.38);
box-shadow: 0 8px 18px rgba(82, 54, 31, 0.11), inset 0 -1px 0 rgba(113, 82, 52, 0.1);
color: #493425;
}
.review-stack-nav:focus-visible[b-bmnsfepcei] {
outline: 2px solid rgba(145, 102, 61, 0.32);
outline-offset: 3px;
}
.review-stack-nav:disabled[b-bmnsfepcei] {
cursor: not-allowed;
opacity: 0.34;
box-shadow: inset 0 -1px 0 rgba(113, 82, 52, 0.05);
}
/* Memory Card */
.review-memory-card[b-bmnsfepcei] {
background: rgba(255, 252, 246, 0.72);
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 10px;
padding: clamp(1rem, 3vw, 1.25rem);
text-align: left;
margin-bottom: 1rem;
min-height: clamp(12rem, 30vh, 18rem);
opacity: 1;
filter: blur(0);
transition: opacity 0.26s ease, filter 0.26s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.review-memory-card.is-transitioning[b-bmnsfepcei] {
opacity: 0.16;
filter: blur(1.5px);
}
.review-memory-image-wrapper[b-bmnsfepcei] {
width: 100%;
padding: 0;
margin: 0 0 0.9rem;
border: none;
background: transparent;
}
.review-memory-image[b-bmnsfepcei] {
display: block;
width: 100%;
max-height: 280px;
object-fit: cover;
border-radius: 10px;
}
.review-memory-content[b-bmnsfepcei] {
font-family: var(--font-sans);
font-size: 0.95rem;
line-height: 1.7;
color: #3A3228;
margin: 0 0 0.75rem;
}
.review-memory-meta[b-bmnsfepcei] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem;
border-top: 1px solid rgba(232, 213, 200, 0.3);
padding-top: 0.6rem;
}
.review-memory-author[b-bmnsfepcei] {
font-family: var(--font-serif);
font-weight: 600;
font-size: 0.85rem;
color: #6B5B4E;
}
.review-memory-relation[b-bmnsfepcei] {
font-family: var(--font-sans);
font-size: 0.8rem;
color: #8B7355;
}
.review-memory-date[b-bmnsfepcei] {
font-family: var(--font-sans);
font-size: 0.78rem;
color: #A89880;
margin-left: auto;
}
.review-memory-email[b-bmnsfepcei] {
font-family: var(--font-sans);
font-size: 0.82rem;
line-height: 1.45;
color: #5E4938;
margin-top: 0.7rem;
padding-top: 0.65rem;
border-top: 1px solid rgba(196, 154, 108, 0.16);
word-break: break-word;
}
.review-verification-footnote[b-bmnsfepcei] {
margin: 0.28rem 0 0;
max-width: 34rem;
font-family: var(--font-serif);
font-size: 0.79rem;
font-style: italic;
line-height: 1.55;
color: #8A6F58;
}
.review-verification-footnote[b-bmnsfepcei]::before {
content: "";
display: block;
width: 2.35rem;
height: 1px;
margin: 0 0 0.32rem;
background: rgba(142, 103, 68, 0.24);
}
.review-verification-actions[b-bmnsfepcei] {
text-align: left;
font-family: var(--font-sans);
color: #665445;
background: rgba(255, 251, 244, 0.64);
border: 1px solid rgba(196, 154, 108, 0.15);
border-radius: 8px;
padding: 0.85rem 0.95rem;
margin-bottom: 1rem;
}
.review-verification-actions p[b-bmnsfepcei] {
margin: 0 0 0.65rem;
font-size: 0.85rem;
line-height: 1.5;
color: #6D5644;
}
.review-btn-resend[b-bmnsfepcei] {
background: transparent;
border: 1px solid rgba(142, 103, 68, 0.3);
border-radius: 999px;
color: #604733;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.35rem;
font-family: var(--font-sans);
font-size: 0.85rem;
padding: 0.55rem 0.9rem;
transition: all 0.3s ease;
}
.review-btn-resend:hover:not(:disabled)[b-bmnsfepcei],
.review-btn-resend:focus-visible[b-bmnsfepcei] {
background: rgba(246, 228, 206, 0.38);
border-color: rgba(125, 88, 58, 0.42);
}
.review-btn-resend:focus-visible[b-bmnsfepcei] {
outline: 2px solid rgba(145, 102, 61, 0.28);
outline-offset: 3px;
}
.review-btn-resend:disabled[b-bmnsfepcei] {
cursor: not-allowed;
opacity: 0.55;
}
.review-resend-feedback[b-bmnsfepcei] {
margin-top: 0.65rem !important;
font-style: italic;
line-height: 1.45;
}
.review-resend-feedback.is-success[b-bmnsfepcei],
.review-resend-feedback.is-warning[b-bmnsfepcei] {
color: #765D49;
}
.review-action-feedback[b-bmnsfepcei] {
margin: 0.9rem 0 0;
padding: 0.75rem 0.9rem;
border-radius: 10px;
border: 1px solid rgba(153, 93, 64, 0.18);
background: rgba(255, 247, 239, 0.82);
color: #765D49;
font-family: var(--font-sans);
font-size: 0.86rem;
line-height: 1.45;
}
/* AI Toggle */
.review-toggle-group[b-bmnsfepcei] {
text-align: left;
}
.review-toggle-label[b-bmnsfepcei] {
position: relative;
display: flex;
align-items: center;
gap: 0.65rem;
font-family: var(--font-sans);
font-size: 0.9rem;
color: #5C4033;
cursor: pointer;
width: fit-content;
}
.review-toggle-input[b-bmnsfepcei] {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
}
.review-toggle-box[b-bmnsfepcei] {
position: relative;
width: 1.25rem;
height: 1.25rem;
flex: 0 0 1.25rem;
border-radius: 7px;
border: 1.5px solid rgba(164, 123, 80, 0.48);
background: rgba(255, 252, 246, 0.9);
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
transition: all 0.3s ease;
}
.review-toggle-box[b-bmnsfepcei]::after {
content: "";
position: absolute;
left: 0.35rem;
top: 0.18rem;
width: 0.34rem;
height: 0.62rem;
border: solid #4A3122;
border-width: 0 1.8px 1.8px 0;
opacity: 0;
transform: rotate(42deg) scale(0.82);
transition: all 0.3s ease;
}
.review-toggle-input:checked + .review-toggle-box[b-bmnsfepcei] {
border-color: rgba(144, 91, 50, 0.22);
background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
}
.review-toggle-input:checked + .review-toggle-box[b-bmnsfepcei]::after {
opacity: 1;
transform: rotate(42deg) scale(1);
}
.review-toggle-input:focus-visible + .review-toggle-box[b-bmnsfepcei] {
outline: 2px solid rgba(196, 154, 108, 0.45);
outline-offset: 3px;
}
.review-toggle-copy[b-bmnsfepcei] {
line-height: 1.35;
}
.review-toggle-help[b-bmnsfepcei] {
margin: 0.5rem 0 0;
font-family: var(--font-serif);
font-size: 0.81rem;
font-style: italic;
line-height: 1.5;
color: #775E47;
}
.review-image-note[b-bmnsfepcei] {
text-align: left;
font-family: var(--font-sans);
font-size: 0.85rem;
color: #765D49;
background: rgba(196, 154, 108, 0.08);
border: 1px solid rgba(196, 154, 108, 0.18);
border-radius: 10px;
padding: 0.75rem 0.9rem;
}
.review-responsibility-panel[b-bmnsfepcei] {
text-align: left;
margin-top: 0.85rem;
padding: 0.9rem 0.95rem;
border-radius: 10px;
border: 1px solid rgba(196, 154, 108, 0.18);
background: rgba(255, 251, 244, 0.7);
}
.review-responsibility-title[b-bmnsfepcei] {
margin: 0 0 0.3rem;
font-family: var(--font-serif);
font-size: 0.94rem;
font-weight: 650;
line-height: 1.35;
color: #4F3928;
}
.review-responsibility-body[b-bmnsfepcei] {
margin: 0 0 0.8rem;
font-family: var(--font-sans);
font-size: 0.84rem;
line-height: 1.55;
color: #6D5644;
}
.review-responsibility-check[b-bmnsfepcei] {
width: auto;
max-width: 100%;
}
/* Footer */
.review-modal-footer[b-bmnsfepcei] {
padding: 0 clamp(1.15rem, 4vw, 2.2rem) 1.5rem;
text-align: center;
}
.review-footer-actions[b-bmnsfepcei] {
display: flex;
justify-content: center;
gap: 0.75rem;
}
.review-btn-approve[b-bmnsfepcei] {
background: linear-gradient(180deg, #F4C8A7 0%, #E7B58F 100%);
color: #4A3122;
border: 1px solid rgba(144, 91, 50, 0.18);
border-radius: 24px;
padding: 0.72rem 1.3rem;
font-family: var(--font-sans);
font-size: 0.94rem;
font-weight: 650;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
box-shadow: 0 10px 24px rgba(144, 91, 50, 0.16);
transition: all 0.3s ease;
}
.review-btn-approve:hover:not(:disabled)[b-bmnsfepcei],
.review-btn-approve:focus-visible[b-bmnsfepcei] {
transform: translateY(-1px);
box-shadow: 0 14px 30px rgba(144, 91, 50, 0.2);
outline: none;
}
.review-btn-approve:disabled[b-bmnsfepcei] {
background: rgba(196, 154, 108, 0.14);
color: rgba(91, 69, 52, 0.56);
box-shadow: none;
cursor: not-allowed;
}
.review-btn-reject[b-bmnsfepcei] {
background: transparent;
border: 1px solid rgba(164, 123, 80, 0.28);
border-radius: 24px;
padding: 0.72rem 1.3rem;
font-family: var(--font-sans);
font-size: 0.94rem;
font-weight: 600;
color: #6A5645;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.3rem;
transition: all 0.3s ease;
}
.review-btn-reject:hover:not(:disabled)[b-bmnsfepcei],
.review-btn-reject:focus-visible[b-bmnsfepcei] {
background: rgba(164, 123, 80, 0.08);
outline: none;
}
.review-btn-reject:disabled[b-bmnsfepcei] {
opacity: 0.5;
cursor: not-allowed;
}
.review-btn-close[b-bmnsfepcei] {
background: transparent;
border: 1px solid rgba(164, 123, 80, 0.3);
border-radius: 24px;
padding: 0.7rem 1.5rem;
font-family: var(--font-sans);
font-size: 0.95rem;
color: #6B5B4E;
cursor: pointer;
transition: all 0.3s ease;
}
.review-spinner[b-bmnsfepcei] {
display: inline-block;
width: 14px;
height: 14px;
border: 2px solid rgba(74, 49, 34, 0.22);
border-top-color: #4A3122;
border-radius: 50%;
animation: spin-b-bmnsfepcei 0.7s linear infinite;
}
.review-btn-reject .review-spinner[b-bmnsfepcei] {
border-color: rgba(107, 91, 78, 0.3);
border-top-color: #6B5B4E;
}
@keyframes spin-b-bmnsfepcei {
to { transform: rotate(360deg); }
}
@media (max-width: 540px) {
.review-modal-overlay[b-bmnsfepcei] {
align-items: flex-end;
padding: 0;
}
.review-modal-content[b-bmnsfepcei] {
border-radius: 20px 20px 0 0;
max-height: 95vh;
max-width: 100%;
}
.review-footer-actions[b-bmnsfepcei] {
flex-direction: column-reverse;
}
.review-btn-approve[b-bmnsfepcei],
.review-btn-reject[b-bmnsfepcei],
.review-btn-close[b-bmnsfepcei] {
width: 100%;
justify-content: center;
}
.review-memory-date[b-bmnsfepcei] {
margin-left: 0;
width: 100%;
}
.review-counter-row[b-bmnsfepcei] {
width: 100%;
gap: 0.4rem;
}
.review-stack-nav[b-bmnsfepcei] {
width: 1.75rem;
height: 1.75rem;
font-size: 1.2rem;
}
.review-counter[b-bmnsfepcei] {
min-width: 0;
font-size: 0.78rem;
}
.review-memory-card[b-bmnsfepcei] {
min-height: 10.5rem;
}
.review-verification-actions[b-bmnsfepcei] {
padding: 0.8rem 0.85rem;
}
.review-responsibility-panel[b-bmnsfepcei] {
padding: 0.85rem;
}
.review-btn-resend[b-bmnsfepcei] {
max-width: 100%;
white-space: normal;
text-align: left;
}
}
/* /Components/SaveProgressModal.razor.rz.scp.css */
/* ========================================= */
/* Shared Modal Overlay Styling */
/* ========================================= */
.modal-overlay[b-r4mkb7lbi6] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Ensure THIS is the background color applied for BOTH modals */
background-color: rgba(40, 25, 15, 0.55);
/* Lighter overlay */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
/* Base z-index - content inside modals will have higher values */
z-index: 9999;
}
.modal-overlay.visible[b-r4mkb7lbi6] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
/* --- Base Modal Content Styling (Common) --- */
.modal-content[b-r4mkb7lbi6] {
position: relative;
/* Needed for pseudo-elements/absolute positioning */
padding: 30px 45px;
border-radius: 18px;
max-width: 440px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
z-index: 10000;
/* Ensure content is above potential background layers */
}
.modal-overlay.visible .modal-content[b-r4mkb7lbi6] {
transform: scale(1);
}
/* --- Layered Effect for Modal --- */
.modal-content.layered-modal[b-r4mkb7lbi6] {
background-color: rgb(255, 242, 236);
/* The top layer color */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
/* Slightly stronger shadow for top layer */
}
/* The background layer */
.modal-content.layered-modal[b-r4mkb7lbi6]::before {
content: '';
position: absolute;
/* Make it slightly larger than the parent */
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
/* Style the background layer */
background: rgba(255, 255, 255, 0.6);
/* Semi-transparent white - adjust as needed */
border-radius: 22px;
/* Slightly more rounded than the main content */
z-index: -1;
/* Place it behind the main content */
}
/* ========================================= */
/* Save Progress Modal Styling */
/* ========================================= */
.save-progress-modal[b-r4mkb7lbi6] {
max-width: 480px;
position: relative;
/* Ensure absolute positioning of close button works relative to this */
}
/* --- Close Button Styling --- */
.save-progress-modal .modal-close-btn[b-r4mkb7lbi6] {
position: absolute;
top: 10px;
right: 10px;
background: none;
border: none;
font-size: 1.6rem;
font-weight: 300;
color: #a1a1aa;
/* Slightly muted color */
cursor: pointer;
line-height: 1;
padding: 5px;
transition: color 0.2s ease;
z-index: 10;
/* Ensure clickable */
}
.save-progress-modal .modal-close-btn:hover[b-r4mkb7lbi6] {
color: #52525b;
/* Darker on hover */
}
/* --- Header Styling --- */
.save-progress-header[b-r4mkb7lbi6] {
margin-bottom: 25px;
}
.save-progress-headline[b-r4mkb7lbi6] {
font-size: 1.8rem;
font-weight: 600;
color: #5c4033;
margin-top: 0;
margin-bottom: 8px;
line-height: 1.25;
}
.save-progress-subtext[b-r4mkb7lbi6] {
font-size: 1rem;
color: #7d6c66;
margin-bottom: 0;
line-height: 1.4;
padding: 0 10px;
}
/* --- Waiting Room Specific Styling --- */
.waiting-room-icon[b-r4mkb7lbi6] {
margin-bottom: 20px;
display: flex;
justify-content: center;
}
.waiting-room-note[b-r4mkb7lbi6] {
font-size: 0.9rem;
color: #8f8886;
margin-top: 15px;
font-style: italic;
}
/* --- Progress Indicator Styling --- */
.creation-progress[b-r4mkb7lbi6] {
margin: 25px 0;
padding: 20px 0;
border-top: 1px solid #e8e4e2;
border-bottom: 1px solid #e8e4e2;
}
.progress-steps[b-r4mkb7lbi6] {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
}
.progress-step[b-r4mkb7lbi6] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.progress-step.completed[b-r4mkb7lbi6] {
opacity: 1;
}
.progress-step.next[b-r4mkb7lbi6] {
opacity: 0.7;
}
.step-icon[b-r4mkb7lbi6] {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
background-color: #e8e4e2;
color: #7d6c66;
}
.progress-step.completed .step-icon[b-r4mkb7lbi6] {
background-color: #4CAF50;
color: white;
}
.progress-step.next .step-icon[b-r4mkb7lbi6] {
background-color: #ff9d7e;
color: white;
}
.step-label[b-r4mkb7lbi6] {
font-size: 0.8rem;
color: #7d6c66;
font-weight: 500;
}
/* --- Modal Actions Styling --- */
.modal-actions[b-r4mkb7lbi6] {
display: flex;
flex-direction: column;
gap: 10px;
}
.social-button[b-r4mkb7lbi6] {
background-color: #2a2a2a;
color: white;
width: 100%;
padding: 12px 20px;
border: none;
border-radius: 14px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
text-align: left;
}
.social-button:hover[b-r4mkb7lbi6] {
background-color: #3f3f3f;
}
.social-button .social-content[b-r4mkb7lbi6] {
display: flex;
align-items: center;
justify-content: flex-start;
width: 100%;
gap: 12px;
}
.social-button .icon-wrapper[b-r4mkb7lbi6] {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.social-button .label[b-r4mkb7lbi6] {
flex-grow: 1;
text-align: center;
}
.modal-divider[b-r4mkb7lbi6] {
display: flex;
align-items: center;
text-align: center;
color: #b0a9a7;
font-size: 0.85rem;
margin: 6px 0;
text-transform: uppercase;
}
.modal-divider[b-r4mkb7lbi6]::before,
.modal-divider[b-r4mkb7lbi6]::after {
content: '';
flex: 1;
border-bottom: 1px solid #e8e4e2;
}
.modal-divider span[b-r4mkb7lbi6] {
padding: 0 0.8em;
}
.modal-divider[b-r4mkb7lbi6]::before {
margin-right: 0;
}
.modal-divider[b-r4mkb7lbi6]::after {
margin-left: 0;
}
/* --- Email Input Section --- */
.email-input-section[b-r4mkb7lbi6] {
display: flex;
flex-direction: column;
gap: 10px;
}
.email-input[b-r4mkb7lbi6] {
width: 100%;
padding: 12px 15px;
font-size: 1rem;
border-radius: 10px;
border: 1px solid #dcd6d4;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
text-align: left;
background-color: #fff;
}
.email-input[b-r4mkb7lbi6]::placeholder {
color: #b0a9a7;
}
.email-input:focus[b-r4mkb7lbi6] {
border-color: #ff9d7e;
outline: none;
box-shadow: 0 0 0 2px rgba(255, 157, 126, 0.2);
}
.email-continue-button[b-r4mkb7lbi6] {
width: 100%;
padding: 12px;
border-radius: 10px;
background-color: #ff9d7e;
color: white;
font-size: 1rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.email-continue-button:hover:not(:disabled)[b-r4mkb7lbi6] {
background-color: #ff855f;
}
.email-continue-button:disabled[b-r4mkb7lbi6] {
background-color: #dcd6d4;
color: #b0a9a7;
cursor: not-allowed;
}
/* --- Links and Text --- */
.email-link[b-r4mkb7lbi6] {
width: 100%;
padding: 12px 20px;
border-radius: 14px;
background-color: #ff9d7e;
color: white;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.2s ease;
text-align: center;
}
.email-link:hover[b-r4mkb7lbi6] {
background-color: #ff855f;
}
.modal-text-link[b-r4mkb7lbi6] {
color: #d97706;
font-size: 0.95rem;
font-weight: 500;
text-align: center;
display: block;
margin-top: 8px;
text-decoration: none;
cursor: pointer;
padding: 6px;
border-radius: 6px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.modal-text-link:hover[b-r4mkb7lbi6] {
background-color: rgba(217, 119, 6, 0.1);
}
.manual-login-link[b-r4mkb7lbi6] {
text-align: center;
margin-top: 0;
}
.terms-text[b-r4mkb7lbi6] {
font-size: 0.8rem;
color: #8f8886;
text-align: center;
margin-top: 20px;
line-height: 1.4;
}
.terms-text a[b-r4mkb7lbi6] {
color: #7d6c66;
text-decoration: underline;
font-weight: 500;
}
.terms-text a:hover[b-r4mkb7lbi6] {
color: #5c4033;
}
/* --- Waiting Room Actions --- */
.waiting-room-actions[b-r4mkb7lbi6] {
display: flex;
justify-content: center;
margin-top: 20px;
}
.btn-secondary[b-r4mkb7lbi6] {
padding: 10px 20px;
border-radius: 8px;
background-color: #e8e4e2;
color: #5c4033;
font-size: 0.9rem;
font-weight: 500;
border: none;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-secondary:hover[b-r4mkb7lbi6] {
background-color: #dcd6d4;
}
/* --- Skip Section --- */
.skip-section[b-r4mkb7lbi6] {
margin-top: 20px;
text-align: center;
}
.skip-link[b-r4mkb7lbi6] {
color: #8f8886;
font-size: 0.85rem;
text-decoration: underline;
cursor: pointer;
transition: color 0.2s ease;
}
.skip-link:hover[b-r4mkb7lbi6] {
color: #7d6c66;
}
/* --- Responsive Design --- */
@media (max-width: 480px) {
.modal-content[b-r4mkb7lbi6] {
padding: 25px 30px;
max-width: 95%;
}
.save-progress-headline[b-r4mkb7lbi6] {
font-size: 1.6rem;
}
.progress-steps[b-r4mkb7lbi6] {
gap: 20px;
}
.step-icon[b-r4mkb7lbi6] {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
.step-label[b-r4mkb7lbi6] {
font-size: 0.75rem;
}
}
/* /Components/Shared/AccessibleDialog.razor.rz.scp.css */
.accessible-dialog-overlay[b-14hsktvqgk] {
position: fixed;
inset: 0;
z-index: 9999;
display: grid;
place-items: center;
padding: 1rem;
background: rgb(30 24 20 / 52%);
}
.accessible-dialog-surface[b-14hsktvqgk] {
width: min(100%, 40rem);
max-height: calc(100dvh - 2rem);
overflow: auto;
position: relative;
border-radius: 1rem;
background: #fffaf2;
box-shadow: 0 1.5rem 4rem rgb(37 25 20 / 24%);
}
.accessible-dialog-surface--compact[b-14hsktvqgk] {
width: min(100%, 25rem);
background: rgb(255 242 236);
text-align: center;
}
.accessible-dialog-surface--unstyled[b-14hsktvqgk] {
width: min(100%, 60rem);
overflow: visible;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.accessible-dialog-surface--unstyled.accessible-dialog-surface--compact[b-14hsktvqgk] {
width: min(100%, 25rem);
}
.accessible-dialog-overlay--library[b-14hsktvqgk] {
padding: 1.5rem;
background: rgb(39 28 22 / 42%);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
overscroll-behavior: contain;
}
.accessible-dialog-surface--library[b-14hsktvqgk] {
width: min(52rem, 96vw);
max-height: min(88dvh, 58rem);
overscroll-behavior: contain;
}
@media (max-width: 768px) {
.accessible-dialog-overlay--mobile-full[b-14hsktvqgk] {
place-items: stretch;
padding: 0;
overflow: hidden;
background: #fff9f5;
}
.accessible-dialog-surface--mobile-full[b-14hsktvqgk] {
width: 100%;
max-width: none;
min-height: 100dvh;
max-height: 100dvh;
border-radius: 0;
background: #fff9f5;
box-shadow: none;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.accessible-dialog-overlay--library[b-14hsktvqgk] {
place-items: end stretch;
padding: 0;
}
.accessible-dialog-surface--library[b-14hsktvqgk] {
width: 100%;
max-width: none;
max-height: 94dvh;
}
}
/* Shared editorial form treatment; authentication behavior is unchanged. */
.accessible-dialog-surface:not(.accessible-dialog-surface--unstyled)[b-14hsktvqgk] { background: var(--lov-surface); color: var(--lov-ink); border-radius: 8px; }
@media(max-width:768px) {
.accessible-dialog-overlay--mobile-full[b-14hsktvqgk], .accessible-dialog-surface--mobile-full[b-14hsktvqgk] { background: var(--lov-surface); }
.accessible-dialog-surface--mobile-full:not(.accessible-dialog-surface--unstyled)[b-14hsktvqgk] { border-radius: 0; }
}
/* /Components/Shared/ChatInputCapsule.razor.rz.scp.css */
/* =============================================================================
FLOATING CAPSULE CHAT INPUT
A modern, ChatGPT-style floating input that hovers above the page bottom
The input is positioned OVER the chat content (messages scroll behind it)
============================================================================= */
/* === OUTER CONTAINER === */
.floating-chat-input-container[b-rcogdu5lck] {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0 1rem 20px 1rem;
/* Bottom padding lifts off edge */
z-index: 10;
pointer-events: none;
/* Allow clicking through empty areas */
/* background: linear-gradient(to top, rgba(255, 249, 246, 0.95) 0%, rgba(255, 249, 246, 0.8) 60%, transparent 100%); */
}
/* === SUGGESTION CHIPS ROW (Desktop) === */
.suggestion-chips-row[b-rcogdu5lck] {
display: flex;
flex-wrap: wrap;
justify-content: center;
/* Center chips perfectly above input */
gap: 0.6rem;
overflow-x: auto;
padding: 0.4rem 0.2rem;
width: min(800px, 100%);
margin: 0 auto;
margin-bottom: 10px;
/* Breathing room between chips and input - "Luft = Lyx" */
-ms-overflow-style: none;
scrollbar-width: none;
pointer-events: auto;
/* Re-enable clicking on chips */
}
.suggestion-chips-row[b-rcogdu5lck]::-webkit-scrollbar {
display: none;
}
.suggestion-chip[b-rcogdu5lck] {
padding: 0.55rem 1.1rem;
background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
border: 1px solid rgba(232, 213, 200, 0.6);
/* Softer, semi-transparent border */
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.92rem;
color: #4b2e2e;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 2px 10px rgba(83, 51, 43, 0.08);
/* Softer shadow for depth */
white-space: nowrap;
}
.suggestion-chip:hover[b-rcogdu5lck] {
background: linear-gradient(135deg, #ffe3d1 0%, #ffd0c0 100%);
border-color: rgba(255, 208, 192, 0.7);
/* Keep border soft on hover */
transform: translateY(-1px);
box-shadow: 0 4px 14px rgba(83, 51, 43, 0.12);
}
.suggestion-chip:active[b-rcogdu5lck] {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(83, 51, 43, 0.12);
}
/* === THE FLOATING CAPSULE === */
.chat-input-capsule[b-rcogdu5lck] {
width: min(800px, 100%);
/* Wide capsule like ChatGPT */
background: rgba(255, 255, 255, 0.98);
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 26px;
/* Large radius for pill/capsule shape */
box-shadow:
0 8px 32px -8px rgba(75, 46, 46, 0.22),
0 4px 12px rgba(0, 0, 0, 0.08);
padding: 0.35rem 0.6rem;
box-sizing: border-box;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
pointer-events: auto;
/* Re-enable clicking on the capsule */
}
/* Focus state - subtle glow effect */
.chat-input-capsule.focused[b-rcogdu5lck] {
border-color: rgba(200, 140, 110, 0.35);
box-shadow:
0 10px 40px -10px rgba(75, 46, 46, 0.22),
0 4px 16px rgba(0, 0, 0, 0.08),
0 0 0 3px rgba(200, 140, 110, 0.12);
}
/* === INPUT WRAPPER === */
.chat-input-wrapper[b-rcogdu5lck] {
position: relative;
display: flex;
flex-grow: 1;
width: 100%;
}
.input-row[b-rcogdu5lck] {
position: relative;
display: flex;
align-items: center;
width: 100%;
}
/* === TEXTAREA === */
.capsule-textarea[b-rcogdu5lck] {
background-color: transparent;
border: none;
border-radius: 0;
padding: 0.9rem 3.5rem 0.9rem 1.25rem;
font-size: 1.05rem;
resize: none;
width: 100%;
overflow: hidden;
box-shadow: none;
outline: none;
font-family: var(--font-sans);
line-height: 1.5;
min-height: 44px;
box-sizing: border-box;
display: block;
color: #4b2e2e;
}
.capsule-textarea[b-rcogdu5lck]::placeholder {
color: rgba(75, 46, 46, 0.45);
}
.capsule-textarea:disabled[b-rcogdu5lck] {
background-color: transparent;
cursor: not-allowed;
opacity: 0.7;
}
.capsule-textarea.has-sparkle-btn[b-rcogdu5lck] {
padding-left: 3.1rem;
}
/* === SEND BUTTON === */
.send-btn[b-rcogdu5lck] {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 36px;
height: 36px;
border: none;
background: linear-gradient(135deg, #f7d9b8, #f0cba2);
border-radius: 50%;
color: #7d4e2d;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.12);
transition: background 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.send-btn:hover:not(:disabled)[b-rcogdu5lck] {
background: linear-gradient(135deg, #f0cba2, #e8bc8f);
transform: translateY(-50%) scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}
.send-btn:disabled[b-rcogdu5lck] {
opacity: 0.4;
cursor: not-allowed;
}
.send-btn svg[b-rcogdu5lck] {
width: 18px;
height: 18px;
}
/* === SCROLL TO BOTTOM BUTTON === */
.scroll-to-bottom-btn[b-rcogdu5lck] {
position: absolute;
bottom: calc(100% + 12px);
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 40px;
border-radius: 50%;
border: 1px solid rgba(0, 0, 0, 0.08);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
color: #4b2e2e;
animation: slideUp-b-rcogdu5lck 0.2s ease-out;
pointer-events: auto;
/* Enable clicking - parent has pointer-events: none */
}
@keyframes slideUp-b-rcogdu5lck {
from {
opacity: 0;
transform: translateX(-50%) translateY(10px);
}
to {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
}
.scroll-to-bottom-btn:hover[b-rcogdu5lck] {
background: rgba(255, 255, 255, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
transform: translateX(-50%) scale(1.05);
}
.scroll-to-bottom-btn:active[b-rcogdu5lck] {
transform: translateX(-50%) scale(0.95);
}
.scroll-to-bottom-btn svg[b-rcogdu5lck] {
width: 20px;
height: 20px;
}
/* === READ-ONLY BANNER === */
.read-only-banner[b-rcogdu5lck] {
margin-top: 0.5rem;
padding: 0.75rem 1rem;
background: rgba(255, 244, 232, 0.95);
border: 1px solid rgba(150, 110, 80, 0.18);
border-radius: 14px;
width: min(800px, 92%);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
color: #4b2e2e;
pointer-events: auto;
}
.read-only-banner-text[b-rcogdu5lck] {
display: flex;
flex-direction: column;
gap: 0.2rem;
font-size: 0.9rem;
}
.read-only-banner-cta[b-rcogdu5lck] {
font-weight: 700;
}
.read-only-upgrade-btn[b-rcogdu5lck] {
padding: 0.45rem 0.9rem;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, rgba(239, 166, 118, 0.98), rgba(219, 122, 73, 0.98));
color: #fff;
font-weight: 600;
cursor: pointer;
box-shadow: 0 8px 18px rgba(219, 122, 73, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.read-only-upgrade-btn:hover[b-rcogdu5lck] {
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(219, 122, 73, 0.28);
}
/* === DISCLAIMER (Outside the capsule) === */
.capsule-disclaimer[b-rcogdu5lck] {
width: min(800px, 92%);
text-align: center;
margin-top: 0.4rem;
font-size: 0.72rem;
color: rgba(75, 46, 46, 0.45);
font-family: var(--font-sans);
pointer-events: none;
}
/* === SPARKLE MENU (Mobile) === */
.sparkle-input-btn[b-rcogdu5lck] {
display: none;
}
.sparkle-menu[b-rcogdu5lck] {
display: none;
}
.sparkle-backdrop[b-rcogdu5lck] {
display: none;
}
/* Hide desktop chips on mobile */
.desktop-only[b-rcogdu5lck] {
display: flex;
}
/* Hide mobile-only elements on desktop */
.mobile-only[b-rcogdu5lck] {
display: none !important;
}
/* === HERO CHIP (Mobile Keepsake Mode) === */
/* Note: .hero-chip-row uses .mobile-only class, so it's hidden on desktop */
.hero-chip-row[b-rcogdu5lck] {
justify-content: center;
width: min(800px, 100%);
margin: 0 auto;
margin-bottom: 10px;
pointer-events: auto;
}
.hero-chip[b-rcogdu5lck] {
padding: 0.65rem 1.3rem;
background: linear-gradient(135deg, #FFF9F5 0%, #FFE5D0 100%);
border: 1px solid rgba(232, 213, 200, 0.6);
border-radius: 999px;
font-family: var(--font-sans);
font-size: 0.95rem;
color: #4b2e2e;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 3px 12px rgba(83, 51, 43, 0.12);
white-space: nowrap;
}
.hero-chip:hover[b-rcogdu5lck] {
background: linear-gradient(135deg, #ffe3d1 0%, #ffd0c0 100%);
border-color: rgba(255, 208, 192, 0.7);
transform: translateY(-1px);
box-shadow: 0 5px 16px rgba(83, 51, 43, 0.15);
}
.hero-chip:active[b-rcogdu5lck] {
transform: translateY(0);
box-shadow: 0 2px 8px rgba(83, 51, 43, 0.12);
}
/* =============================================================================
MOBILE STYLES
============================================================================= */
@media (max-width: 768px) {
.floating-chat-input-container[b-rcogdu5lck] {
padding: 0 0.5rem 16px 0.5rem;
/* background: linear-gradient(to top, rgba(255, 249, 246, 0.98) 0%, rgba(255, 249, 246, 0.85) 50%, transparent 100%); */
}
.chat-input-capsule[b-rcogdu5lck] {
width: min(96%, 600px);
border-radius: 22px;
padding: 0.25rem 0.4rem;
box-shadow:
0 6px 24px -10px rgba(75, 46, 46, 0.25),
0 3px 10px rgba(0, 0, 0, 0.06);
}
.suggestion-chips-row[b-rcogdu5lck] {
width: min(95%, 600px);
}
.read-only-banner[b-rcogdu5lck] {
width: min(95%, 600px);
}
.capsule-disclaimer[b-rcogdu5lck] {
width: 90%;
font-size: 0.7rem;
/* Hide on mobile */
display: none;
}
.capsule-textarea[b-rcogdu5lck] {
padding: 0.85rem 3.25rem 0.85rem 1rem;
font-size: 1rem;
}
/* Hide desktop chips on mobile */
.desktop-only[b-rcogdu5lck] {
display: none !important;
}
/* Show mobile-only elements (Hero Chip) on mobile */
.mobile-only[b-rcogdu5lck] {
display: flex !important;
}
.hero-chip-row[b-rcogdu5lck] {
width: min(95%, 600px);
margin-bottom: 8px;
}
.hero-chip[b-rcogdu5lck] {
font-size: 0.9rem;
padding: 0.6rem 1.1rem;
}
/* Sparkle button - positioned inside the input field */
.sparkle-input-btn[b-rcogdu5lck] {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 12px;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
background-color: transparent;
border-radius: 50%;
font-size: 18px;
color: #8b5a3c;
cursor: pointer;
padding: 0;
transition: background-color 0.25s ease, transform 0.25s ease;
z-index: 2;
}
.sparkle-input-btn:hover[b-rcogdu5lck] {
background-color: #f7d9b8;
transform: translateY(-50%) scale(1.05);
}
.sparkle-input-btn:active[b-rcogdu5lck] {
transform: translateY(-50%) scale(0.95);
}
.sparkle-input-btn.active[b-rcogdu5lck] {
background-color: #ffe4d2;
}
/* Backdrop for click-outside-to-close */
.sparkle-backdrop[b-rcogdu5lck] {
display: block;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99;
background: transparent;
}
/* Sparkle menu - floating popup like ChatGPT */
.sparkle-menu[b-rcogdu5lck] {
display: flex;
flex-direction: column;
position: absolute;
bottom: calc(100% + 8px);
left: 0;
width: auto;
min-width: 220px;
background: #ffffff;
border: none;
border-radius: 16px;
padding: 8px 0;
z-index: 100;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(8px);
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.sparkle-menu.open[b-rcogdu5lck] {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* Clean menu items - like ChatGPT */
.sparkle-chip[b-rcogdu5lck] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 14px 18px;
font-size: 1rem;
font-weight: 400;
color: #2d2d2d;
background: transparent;
border: none;
border-radius: 0;
cursor: pointer;
transition: background-color 0.15s ease;
text-align: left;
white-space: nowrap;
}
.sparkle-chip:hover[b-rcogdu5lck] {
background: #f7f7f7;
}
.sparkle-chip:active[b-rcogdu5lck] {
background: #efefef;
}
.scroll-to-bottom-btn[b-rcogdu5lck] {
width: 36px;
height: 36px;
bottom: calc(100% + 8px);
}
.scroll-to-bottom-btn svg[b-rcogdu5lck] {
width: 18px;
height: 18px;
}
}
/* =============================================================================
TABLET STYLES
============================================================================= */
@media (max-width: 1024px) and (min-width: 769px) {
.floating-chat-input-container[b-rcogdu5lck] {
margin-bottom: 18px;
}
.chat-input-capsule[b-rcogdu5lck] {
width: min(680px, 92%);
}
}
/* /Components/Shared/ContextualSidebarWidget.razor.rz.scp.css */
:host[b-8lxxy15z0o] {
display: block;
}
.contextual-sidebar-widget[b-8lxxy15z0o] {
width: 100%;
}
.widget-card[b-8lxxy15z0o] {
width: 100%;
border-radius: 20px;
background: radial-gradient(circle at top, rgba(255, 245, 230, 0.98), rgba(245, 221, 191, 0.96) 65%, rgba(231, 201, 167, 0.94));
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.25),
0 14px 28px rgba(109, 72, 54, 0.18);
border: 1px solid rgba(153, 110, 80, 0.2);
padding: 1.2rem 1.4rem 1.4rem;
display: flex;
flex-direction: column;
gap: 0.9rem;
color: #4b2e2e;
position: relative;
background-blend-mode: multiply;
}
button.widget-card[b-8lxxy15z0o] {
border: none;
background: radial-gradient(circle at top, rgba(255, 245, 230, 0.98), rgba(245, 221, 191, 0.96) 65%, rgba(231, 201, 167, 0.94));
text-align: left;
padding: 1.2rem 1.4rem 1.4rem;
}
.widget-card--clickable[b-8lxxy15z0o] {
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.widget-card--clickable:not(:disabled):hover[b-8lxxy15z0o] {
transform: translateY(-2px);
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.3),
0 18px 32px rgba(109, 72, 54, 0.22);
}
.widget-card--clickable:disabled[b-8lxxy15z0o] {
cursor: default;
opacity: 0.65;
}
.widget-header[b-8lxxy15z0o] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.widget-icon[b-8lxxy15z0o] {
font-size: 1.35rem;
line-height: 1;
}
.widget-pill[b-8lxxy15z0o] {
font-size: 0.8rem;
font-weight: 600;
color: #5b361d;
padding: 0.25rem 0.65rem;
border-radius: 999px;
background: linear-gradient(135deg, rgba(249, 212, 168, 0.92), rgba(236, 184, 138, 0.9));
}
.widget-body[b-8lxxy15z0o] {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.widget-title[b-8lxxy15z0o] {
margin: 0;
font-family: var(--font-serif);
font-size: 1.1rem;
}
.widget-description[b-8lxxy15z0o] {
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
color: #5a3c2c;
}
.widget-cta[b-8lxxy15z0o] {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.55rem 0.95rem;
border-radius: 999px;
border: none;
background: linear-gradient(135deg, rgba(239, 166, 118, 0.95), rgba(219, 122, 73, 0.95));
color: #fff;
font-weight: 600;
/* inherited font-sans */
font-size: 0.9rem;
cursor: pointer;
box-shadow: 0 8px 18px rgba(219, 122, 73, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.widget-cta:hover[b-8lxxy15z0o] {
transform: translateY(-1px);
box-shadow: 0 10px 20px rgba(219, 122, 73, 0.28);
}
.widget-cta-icon[b-8lxxy15z0o] {
font-size: 1rem;
line-height: 1;
}
@media (max-width: 768px) {
.widget-card[b-8lxxy15z0o] {
padding: 1rem 1.1rem 1.2rem;
}
}
.widget-placeholder[b-8lxxy15z0o] {
height: 0;
}
/* /Components/Shared/CtaSidebarWidget.razor.rz.scp.css */
:host[b-9xv1cu4m67] {
display: block;
}
.cta-sidebar-widget[b-9xv1cu4m67] {
width: 100%;
margin-top: 5em;
}
.cta-card[b-9xv1cu4m67] {
width: 100%;
border-radius: 22px;
background: radial-gradient(circle at top, rgba(255, 245, 230, 0.98), rgba(245, 221, 191, 0.96) 65%, rgba(231, 201, 167, 0.92));
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.25),
0 14px 28px rgba(109, 72, 54, 0.18);
border: 1px solid rgba(153, 110, 80, 0.18);
padding: 1.4rem 1.6rem 1.6rem;
color: #4b2e2e;
display: flex;
flex-direction: column;
gap: 1rem;
background-blend-mode: multiply;
}
.cta-header[b-9xv1cu4m67] {
display: flex;
align-items: center;
gap: 0.75rem;
}
.cta-icon-image[b-9xv1cu4m67] {
width: 40px;
height: 40px;
object-fit: contain;
filter: drop-shadow(0 6px 12px rgba(122, 88, 59, 0.25));
}
.cta-icon-text[b-9xv1cu4m67] {
font-size: 2rem;
line-height: 1;
}
.cta-title[b-9xv1cu4m67] {
margin: 0;
font-family: var(--font-serif);
font-weight: 700;
font-size: 1.35rem;
}
.cta-body[b-9xv1cu4m67] {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.cta-description[b-9xv1cu4m67] {
margin: 0;
font-size: 1rem;
line-height: 1.65;
color: #553525;
}
.cta-link[b-9xv1cu4m67] {
display: inline-flex;
align-items: center;
gap: 0.35rem;
margin-top: 0.25rem;
font-weight: 700;
font-size: 1rem;
color: #3b2216;
text-decoration: none;
}
.cta-link:hover[b-9xv1cu4m67],
.cta-link:focus[b-9xv1cu4m67] {
text-decoration: underline;
}
.cta-link-arrow[b-9xv1cu4m67] {
font-size: 1.1rem;
}
.cta-citat[b-9xv1cu4m67] {
margin: 0;
font-style: italic;
font-size: 0.95rem;
color: #6b4a3a;
}
@media (max-width: 768px) {
.cta-card[b-9xv1cu4m67] {
padding: 1.2rem 1.3rem 1.4rem;
}
.cta-title[b-9xv1cu4m67] {
font-size: 1.2rem;
}
.cta-description[b-9xv1cu4m67] {
font-size: 0.95rem;
}
}
/* /Components/Shared/FamilyTreeVisualizer.razor.rz.scp.css */
.family-tree-container[b-t2jl87gxyo] {
width: 100%;
min-height: 400px; /* Minimum height, can grow with content */
border: 1px solid var(--border-color);
border-radius: 8px;
overflow: auto;
position: relative;
background: var(--background-subtle);
}
.family-tree-container svg[b-t2jl87gxyo] {
width: 100%;
height: auto; /* Allow height to adjust dynamically */
min-height: 400px;
}
.tree-controls[b-t2jl87gxyo] {
position: absolute;
top: 10px;
right: 10px;
z-index: 1000;
display: flex;
gap: 8px;
background: var(--background-float);
padding: 8px;
border-radius: 6px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.tree-controls button[b-t2jl87gxyo] {
padding: 6px 12px;
border: 1px solid var(--border-color);
background: var(--background-primary);
border-radius: 4px;
cursor: pointer;
font-size: 14px;
transition: background 0.2s ease, transform 0.2s ease;
}
.tree-controls button:hover[b-t2jl87gxyo] {
background: var(--background-hover);
transform: scale(1.05);
}
/* Styling for nodes and their elements */
[b-t2jl87gxyo] .node {
transition: transform 0.3s ease;
}
[b-t2jl87gxyo] .node circle {
fill: #ffffff; /* White fill for nodes */
stroke-width: 2px;
transition: fill 0.3s ease, stroke 0.3s ease;
}
[b-t2jl87gxyo] .node.spouse circle {
stroke: #6a5acd; /* Purple for spouses */
}
[b-t2jl87gxyo] .node.child circle {
stroke: #ffa500; /* Orange for children */
}
[b-t2jl87gxyo] .node:not(.spouse):not(.child) circle {
stroke: #1e90ff; /* Blue for others (e.g., self, parents, siblings) */
}
[b-t2jl87gxyo] .node:hover circle {
fill: var(--accent-primary); /* Highlight on hover with primary accent color */
}
/* Text styling for node labels (only names now) */
[b-t2jl87gxyo] .node text {
font: 14px var(--font-family);
fill: var(--text-primary);
stroke-width: 0;
pointer-events: none;
text-shadow: 1px 1px 0 var(--background-primary), -1px 1px 0 var(--background-primary), 1px -1px 0 var(--background-primary), -1px -1px 0 var(--background-primary);
}
[b-t2jl87gxyo] .name-label {
font-size: 16px;
font-weight: 500;
fill: var(--text-primary);
}
/* Styling for links (connections between nodes) */
[b-t2jl87gxyo] .link {
fill: none;
stroke-width: 1.5px;
transition: stroke 0.3s ease;
}
[b-t2jl87gxyo] .link.spouse {
stroke: #6a5acd; /* Purple for spouse relationships */
stroke-dasharray: 5,5; /* Dashed line for spouses */
}
[b-t2jl87gxyo] .link.child {
stroke: #ffa500; /* Orange for child relationships */
}
[b-t2jl87gxyo] .link:not(.spouse):not(.child) {
stroke: #ccc; /* Default gray for other relationships */
}
/* Hover effects for links */
[b-t2jl87gxyo] .link:hover {
stroke-width: 2px;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
/* Additional styling for node interactions */
[b-t2jl87gxyo] .node:hover {
cursor: pointer;
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.2)); /* Shadow on hover for depth */
}
/* Ensure text wrapping works visually */
[b-t2jl87gxyo] .node text tspan {
dominant-baseline: middle;
text-anchor: middle;
}
/* Position spouses side by side */
[b-t2jl87gxyo] .node.spouse {
transform: translateX(150px); /* Match the JavaScript offset for horizontal spacing */
}
/* /Components/Shared/LocalChatHeader.razor.rz.scp.css */
/* LocalChatHeader.razor.css */
/* Header bar - Apple-style frosted glass */
.local-chat-header[b-rwxc14niik] {
display: flex;
justify-content: space-between;
align-items: center;
width: calc(100% - 1rem);
/* More breathing room with increased horizontal padding */
padding: 0.75rem 1.125rem;
/* Frosted glass - more translucent */
background: rgba(255, 245, 230, 0.18);
/* True frosted glass blur */
-webkit-backdrop-filter: blur(12px) saturate(180%);
backdrop-filter: blur(12px) saturate(180%);
/* Rounded corners */
border-radius: 16px;
/* Feathered bottom edge - soft fade */
-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
z-index: 100;
min-height: 48px;
box-sizing: border-box;
/* Small margin for rounded effect */
margin: 0.5rem;
}
/* Left Column: Back Button - FLAT arrow only, NO visible container */
.header-back-btn[b-rwxc14niik] {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 8px; /* Invisible padding for tap target */
background: transparent; /* Completely invisible */
border: none;
cursor: pointer;
color: #4a3228; /* Warm dark brown for readability */
transition: opacity 0.15s ease, transform 0.1s ease;
flex-shrink: 0;
}
.local-chat-header.topbar-scrolled[b-rwxc14niik] {
background: rgba(255, 245, 230, 0.38);
box-shadow: 0 12px 30px rgba(76, 56, 37, 0.04);
}
.header-back-btn:hover[b-rwxc14niik] {
opacity: 0.7;
}
.header-back-btn:active[b-rwxc14niik] {
transform: scale(0.92);
opacity: 0.6;
}
.header-back-btn svg[b-rwxc14niik] {
width: 22px;
height: 22px;
}
/* Center Column: Title */
.header-title[b-rwxc14niik] {
flex: 1;
text-align: center;
font-family: var(--font-serif);
font-size: 1.05rem;
font-weight: 600;
color: #4b2e2e;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
padding: 0 0.5rem;
line-height: 1.4;
}
/* Right Column: Actions */
.header-actions[b-rwxc14niik] {
display: flex;
align-items: center;
gap: 0.2rem;
flex-shrink: 0;
}
/* Pen Pal quick action */
.header-penpal-btn[b-rwxc14niik] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 8px;
border: none;
border-radius: 0;
background: transparent;
cursor: pointer;
color: #4a3228;
transition: opacity 0.15s ease, transform 0.1s ease;
}
.header-penpal-btn:hover[b-rwxc14niik] {
opacity: 0.7;
}
.header-penpal-btn:active[b-rwxc14niik] {
transform: scale(0.92);
opacity: 0.6;
}
.header-penpal-btn.active[b-rwxc14niik] {
color: #5a3f34;
}
.header-penpal-icon[b-rwxc14niik] {
display: inline-flex;
align-items: center;
justify-content: center;
}
.header-penpal-icon svg[b-rwxc14niik] {
width: 22px;
height: 22px;
}
.header-penpal-badge[b-rwxc14niik] {
position: absolute;
top: -2px;
right: -2px;
width: 16px;
height: 16px;
border-radius: 50%;
background: #f4bf9b;
color: #4b2e2e;
font-size: 0.7rem;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(186, 130, 95, 0.7);
}
/* Right Column: Menu Button - FLAT icon only, NO visible container */
.header-menu-btn[b-rwxc14niik] {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 8px; /* Invisible padding for tap target */
background: transparent; /* Completely invisible */
border: none;
cursor: pointer;
color: #4a3228; /* Warm dark brown for readability */
transition: opacity 0.15s ease, transform 0.1s ease;
flex-shrink: 0;
}
.header-menu-btn:hover[b-rwxc14niik] {
opacity: 0.7;
}
.header-menu-btn:active[b-rwxc14niik] {
transform: scale(0.92);
opacity: 0.6;
}
.header-menu-btn svg[b-rwxc14niik] {
width: 22px;
height: 22px;
}
/* Focus states for accessibility */
.header-back-btn:focus-visible[b-rwxc14niik],
.header-menu-btn:focus-visible[b-rwxc14niik],
.header-penpal-btn:focus-visible[b-rwxc14niik] {
outline: 2px solid rgba(255, 196, 179, 0.8);
outline-offset: 2px;
}
/* Dark mode / Night mode support */
@media (prefers-color-scheme: dark) {
.local-chat-header[b-rwxc14niik] {
background: rgba(40, 30, 25, 0.16);
}
.local-chat-header.topbar-scrolled[b-rwxc14niik] {
background: rgba(40, 30, 25, 0.32);
}
.header-back-btn[b-rwxc14niik],
.header-menu-btn[b-rwxc14niik] {
color: #e8ddd6;
}
.header-title[b-rwxc14niik] {
color: #e8ddd6;
}
.header-penpal-btn[b-rwxc14niik] {
color: #e8ddd6;
}
}
/* /Components/Shared/MemorialDialog.razor.rz.scp.css */
.memorial-dialog-host[b-r2ozvvxzwa] {
--memorial-dialog-paper: #fffdf8;
--memorial-dialog-ink: #35372e;
--memorial-dialog-muted: #686154;
--memorial-dialog-line: #d5c9b8;
--memorial-dialog-gold: #76552f;
/* Memorial paper stays coherent even when the surrounding app uses night colors. */
--lov-paper: var(--memorial-dialog-paper);
--lov-surface: var(--memorial-dialog-paper);
--lov-ink: var(--memorial-dialog-ink);
--lov-muted: var(--memorial-dialog-muted);
--lov-line: var(--memorial-dialog-line);
--lov-green: var(--memorial-dialog-gold);
--lov-on-green: #fffdf8;
--lov-focus: var(--memorial-dialog-gold);
}
.memorial-dialog-host[b-r2ozvvxzwa] .accessible-dialog-overlay--memorial {
padding: clamp(.5rem, 2vw, 1.5rem);
background: rgb(42 35 26 / 42%);
backdrop-filter: blur(5px);
overscroll-behavior: contain;
}
.memorial-dialog-host[b-r2ozvvxzwa] .accessible-dialog-surface--memorial {
width: min(100%, 52rem);
max-height: calc(100dvh - 3rem);
min-width: 0;
outline: none;
}
.memorial-dialog-host[b-r2ozvvxzwa] .accessible-dialog-surface--expanded { width: min(100%, 76rem); }
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
width: 100%;
max-width: none;
min-width: 0;
min-height: 0;
max-height: calc(100dvh - 3rem);
margin: 0;
padding: 0;
overflow: hidden;
transform: none;
border: 1px solid var(--memorial-dialog-line);
border-radius: .875rem;
color: var(--memorial-dialog-ink);
background: var(--memorial-dialog-paper);
box-shadow: 0 1.5rem 4rem rgb(42 35 26 / 22%);
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-header {
flex: 0 0 auto;
padding: 1.5rem 1.75rem 1rem;
gap: 1rem;
border-bottom: 1px solid var(--memorial-dialog-line);
background: var(--memorial-dialog-paper);
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content h2 {
margin: 0;
padding-inline-end: 2.75rem;
font-family: var(--font-serif);
font-size: clamp(1.5rem, 2.5vw, 2rem);
font-weight: 500;
line-height: 1.2;
color: var(--memorial-dialog-ink);
overflow-wrap: anywhere;
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content label,
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content small,
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content [class*="hint"],
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content [class*="kicker"] {
color: var(--memorial-dialog-muted);
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-body {
flex: 1 1 auto;
min-height: 0;
max-height: none;
padding: 1.5rem 1.75rem;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-gutter: stable;
mask-image: none;
-webkit-mask-image: none;
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-footer {
position: static;
flex: 0 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: .75rem;
margin: 0;
padding: 1rem 1.75rem;
border-top: 1px solid var(--memorial-dialog-line);
background: var(--memorial-dialog-paper);
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-primary,
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-secondary {
min-height: 2.75rem;
padding: .65rem 1.15rem;
border: 1px solid var(--memorial-dialog-line);
border-radius: .4rem;
font-family: var(--font-sans);
font-size: 1rem;
font-weight: 600;
line-height: 1.4;
box-shadow: none;
white-space: normal;
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-primary {
color: #fffdf8;
border-color: var(--memorial-dialog-gold);
background: var(--memorial-dialog-gold);
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-primary:hover:not(:disabled) { background: #614422; }
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-secondary { background: transparent; color: var(--memorial-dialog-ink); }
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-secondary:hover:not(:disabled) { background: #f4eee2; }
.memorial-dialog-host[b-r2ozvvxzwa] button:disabled { cursor: default; }
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-close {
flex: 0 0 auto;
min-width: 2.75rem;
min-height: 2.75rem;
padding: .4rem;
border: 1px solid var(--memorial-dialog-line);
border-radius: .4rem;
background: transparent;
color: var(--memorial-dialog-ink);
font-size: 1.5rem;
line-height: 1;
}
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content :is(input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea) {
box-sizing: border-box;
max-width: 100%;
border-color: var(--memorial-dialog-line);
border-radius: .4rem;
background: #fff;
color: var(--memorial-dialog-ink);
font-size: 1rem;
line-height: 1.5;
}
.memorial-dialog-host[b-r2ozvvxzwa] input:where([type=checkbox], [type=radio]) { accent-color: var(--memorial-dialog-gold); }
.memorial-dialog-host[b-r2ozvvxzwa] :is(button, a, input, textarea, select):focus-visible {
outline: 3px solid var(--memorial-dialog-gold);
outline-offset: 3px;
}
.memorial-dialog-host[b-r2ozvvxzwa] :is(h2, h3)[data-dialog-initial-focus]:focus { outline: none; }
@media (max-width: 40rem) {
.memorial-dialog-host[b-r2ozvvxzwa] .accessible-dialog-surface--memorial,
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-content { max-height: calc(100dvh - 1rem); }
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-header { padding: 1rem 1rem .75rem; }
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-body { padding: 1rem; }
.memorial-dialog-host[b-r2ozvvxzwa] .memorial-dialog-footer { padding: .75rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
}
/* /Components/Shared/MemoryConversationLink.razor.rz.scp.css */
.memory-conversation-link[b-ch922nbus0] { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin-top: .6rem; color: #765247; font: 600 .9rem/1.5 var(--font-sans, sans-serif); text-decoration: underline; text-underline-offset: .2em; }
.memory-conversation-link:focus-visible[b-ch922nbus0] { outline: 3px solid #765247; outline-offset: 4px; border-radius: 4px; }
/* /Components/Shared/MemoryInvitationForm.razor.rz.scp.css */
form[b-tkm7s3py74] { display: grid; gap: .8rem; }
h2[b-tkm7s3py74] { margin: 0; font: 550 1.65rem/1.25 var(--font-serif, Georgia, serif); color: #332925; }
p[b-tkm7s3py74] { margin: 0 0 .4rem; line-height: 1.6; }
label[b-tkm7s3py74] { font-weight: 600; }
input[type=email][b-tkm7s3py74], textarea[b-tkm7s3py74] { width: 100%; box-sizing: border-box; min-height: 48px; padding: .8rem; border: 1px solid #ae8d80; border-radius: 12px; background: #fffcf8; color: #332925; font: inherit; }
textarea[b-tkm7s3py74] { resize: vertical; }
.consent[b-tkm7s3py74] { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; font-weight: 400; line-height: 1.6; }
.consent input[b-tkm7s3py74] { flex-shrink: 0; width: 22px; height: 22px; margin-top: .2rem; accent-color: #765247; }
button[b-tkm7s3py74] { justify-self: start; min-height: 48px; padding: .75rem 1.3rem; border: 1px solid #765247; border-radius: 24px; background: #765247; color: #fffaf5; font: 600 1rem/1.5 var(--font-sans, sans-serif); cursor: pointer; }
button:disabled[b-tkm7s3py74] { opacity: .6; cursor: default; }
:is(button, input, textarea):focus-visible[b-tkm7s3py74] { outline: 3px solid #765247; outline-offset: 4px; }
/* /Components/Shared/MemoryRecollectionEditor.razor.rz.scp.css */
form[b-3zc2if2l95] { display: grid; gap: .8rem; }
h2[b-3zc2if2l95] { margin: 0; font: 550 1.65rem/1.25 var(--font-serif, Georgia, serif); color: #332925; }
p[b-3zc2if2l95] { margin: 0; line-height: 1.65; }
label[b-3zc2if2l95] { font-weight: 600; }
textarea[b-3zc2if2l95] { width: 100%; box-sizing: border-box; padding: 1rem; border: 1px solid #ae8d80; border-radius: 12px; background: #fffcf8; color: #332925; font: inherit; line-height: 1.7; resize: vertical; }
.consent[b-3zc2if2l95] { display: flex; gap: .75rem; align-items: flex-start; padding: .6rem 0; font-weight: 400; line-height: 1.6; }
.consent input[b-3zc2if2l95] { flex-shrink: 0; width: 22px; height: 22px; margin-top: .2rem; accent-color: #765247; }
.actions[b-3zc2if2l95] { display: flex; flex-wrap: wrap; gap: .75rem; }
button[b-3zc2if2l95] { min-height: 48px; padding: .75rem 1.3rem; border: 1px solid #765247; border-radius: 24px; background: #765247; color: #fffaf5; font: 600 1rem/1.5 var(--font-sans, sans-serif); cursor: pointer; }
button.secondary[b-3zc2if2l95] { color: #765247; background: transparent; }
button:disabled[b-3zc2if2l95] { opacity: .6; cursor: default; }
:is(button, input, textarea):focus-visible[b-3zc2if2l95] { outline: 3px solid #765247; outline-offset: 4px; }
/* /Components/Shared/MemoryStartChooser.razor.rz.scp.css */
:global(html:has(.memory-start-chooser-overlay))[b-uptnvzlm68],
:global(body:has(.memory-start-chooser-overlay))[b-uptnvzlm68] {
overflow: hidden;
}
.memory-start-chooser-overlay[b-uptnvzlm68] {
position: fixed;
inset: 0;
z-index: 10000;
display: grid;
place-items: center;
padding: clamp(0.8rem, 3vw, 1.5rem);
background:
radial-gradient(circle at 18% 8%, rgba(255, 223, 193, 0.2), transparent 32%),
rgba(42, 31, 26, 0.62);
-webkit-backdrop-filter: blur(7px);
backdrop-filter: blur(7px);
animation: memory-start-chooser-overlay-in-b-uptnvzlm68 180ms ease-out both;
}
.memory-start-chooser-dialog[b-uptnvzlm68] {
width: min(100%, 580px);
max-height: min(92dvh, 730px);
overflow: hidden auto;
border: 1px solid rgba(157, 109, 76, 0.22);
border-radius: 26px;
background:
radial-gradient(circle at 18% 0%, rgba(255, 229, 194, 0.5), transparent 32%),
linear-gradient(145deg, #fffdf8 0%, #fff5e8 100%);
box-shadow:
0 32px 88px rgba(41, 27, 20, 0.34),
0 1px 0 rgba(255, 255, 255, 0.78) inset;
color: #3c2f28;
font-family: var(--font-sans);
animation: memory-start-chooser-sheet-in-b-uptnvzlm68 220ms cubic-bezier(0.2, 0.82, 0.25, 1) both;
}
.memory-start-chooser-handle[b-uptnvzlm68] {
display: none;
}
.memory-start-chooser-header[b-uptnvzlm68] {
min-height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem 0.8rem 1.4rem;
border-bottom: 1px solid rgba(137, 94, 66, 0.13);
}
.memory-start-chooser-person[b-uptnvzlm68] {
min-width: 0;
display: flex;
align-items: center;
gap: 0.7rem;
}
.memory-start-chooser-avatar[b-uptnvzlm68] {
width: 42px;
height: 42px;
flex: 0 0 42px;
display: grid;
place-items: center;
overflow: hidden;
border: 1px solid rgba(165, 113, 77, 0.26);
border-radius: 50%;
background: #f7e7d7;
color: #9a6247;
object-fit: cover;
box-shadow: 0 2px 7px rgba(102, 64, 42, 0.12);
}
.memory-start-chooser-avatar-placeholder svg[b-uptnvzlm68] {
width: 24px;
height: 24px;
}
.memory-start-chooser-person-name[b-uptnvzlm68] {
overflow: hidden;
color: #583f33;
font-family: var(--font-serif);
font-size: 1.08rem;
font-weight: 600;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
.memory-start-chooser-close[b-uptnvzlm68] {
width: 44px;
height: 44px;
flex: 0 0 44px;
display: grid;
place-items: center;
padding: 0;
border: 1px solid rgba(137, 94, 66, 0.18);
border-radius: 50%;
background: rgba(255, 253, 248, 0.78);
color: #785644;
cursor: pointer;
transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease;
}
.memory-start-chooser-close svg[b-uptnvzlm68] {
width: 21px;
height: 21px;
}
.memory-start-chooser-close:hover[b-uptnvzlm68] {
transform: rotate(4deg);
border-color: rgba(151, 93, 64, 0.36);
background: #fff;
}
.memory-start-chooser-body[b-uptnvzlm68] {
padding: clamp(1.45rem, 4vw, 2.15rem) clamp(1.25rem, 5vw, 2.4rem) clamp(1.35rem, 3vw, 2rem);
}
.memory-start-chooser-body h2[b-uptnvzlm68] {
max-width: 430px;
margin: 0;
color: #382a23;
font-family: var(--font-serif);
font-size: clamp(2rem, 5vw, 2.75rem);
font-weight: 520;
line-height: 1.05;
letter-spacing: -0.035em;
}
.memory-start-chooser-intro[b-uptnvzlm68] {
max-width: 420px;
margin: 0.78rem 0 1.55rem;
color: #78645a;
font-size: 0.98rem;
line-height: 1.58;
}
.memory-start-chooser-options[b-uptnvzlm68] {
border-top: 1px solid rgba(137, 94, 66, 0.16);
}
.memory-start-chooser-option[b-uptnvzlm68] {
width: 100%;
min-height: 84px;
display: grid;
grid-template-columns: 42px minmax(0, 1fr) 24px;
align-items: center;
column-gap: 0.9rem;
padding: 0.9rem 0.18rem;
border: 0;
border-bottom: 1px solid rgba(137, 94, 66, 0.16);
background: transparent;
color: #4d382e;
font-family: var(--font-sans);
text-align: left;
cursor: pointer;
transition: padding 160ms ease, color 160ms ease, background-color 160ms ease;
}
.memory-start-chooser-option:hover[b-uptnvzlm68] {
padding-right: 0.55rem;
padding-left: 0.42rem;
background: linear-gradient(90deg, rgba(232, 177, 129, 0.15), transparent 78%);
color: #8d533a;
}
.memory-start-chooser-option-icon[b-uptnvzlm68] {
width: 42px;
height: 42px;
display: grid;
place-items: center;
border: 1px solid rgba(164, 102, 69, 0.22);
border-radius: 13px 15px 12px 14px;
background: rgba(255, 245, 232, 0.76);
color: #a26145;
box-shadow: 0 4px 10px rgba(116, 69, 44, 0.07);
}
.memory-start-chooser-option-icon svg[b-uptnvzlm68] {
width: 27px;
height: 27px;
}
.memory-start-chooser-option-copy[b-uptnvzlm68] {
min-width: 0;
display: grid;
gap: 0.18rem;
}
.memory-start-chooser-option-copy strong[b-uptnvzlm68] {
color: inherit;
font-size: 1rem;
font-weight: 700;
line-height: 1.24;
}
.memory-start-chooser-option-copy small[b-uptnvzlm68] {
color: #806d62;
font-size: 0.84rem;
line-height: 1.38;
}
.memory-start-chooser-option-arrow[b-uptnvzlm68] {
width: 21px;
height: 21px;
color: #b27a60;
transition: transform 160ms ease;
}
.memory-start-chooser-option:hover .memory-start-chooser-option-arrow[b-uptnvzlm68] {
transform: translateX(3px);
}
.memory-start-chooser-close:focus-visible[b-uptnvzlm68],
.memory-start-chooser-option:focus-visible[b-uptnvzlm68] {
outline: 3px solid rgba(181, 111, 75, 0.44);
outline-offset: 3px;
}
:global(body.night-mode) .memory-start-chooser-dialog[b-uptnvzlm68] {
border-color: rgba(234, 190, 148, 0.18);
background:
radial-gradient(circle at 18% 0%, rgba(130, 81, 57, 0.28), transparent 32%),
linear-gradient(145deg, #30251f 0%, #251c18 100%);
color: #f3e8dc;
}
:global(body.night-mode) .memory-start-chooser-header[b-uptnvzlm68],
:global(body.night-mode) .memory-start-chooser-options[b-uptnvzlm68],
:global(body.night-mode) .memory-start-chooser-option[b-uptnvzlm68] {
border-color: rgba(239, 204, 172, 0.15);
}
:global(body.night-mode) .memory-start-chooser-person-name[b-uptnvzlm68],
:global(body.night-mode) .memory-start-chooser-body h2[b-uptnvzlm68],
:global(body.night-mode) .memory-start-chooser-option[b-uptnvzlm68] {
color: #f7e9dc;
}
:global(body.night-mode) .memory-start-chooser-intro[b-uptnvzlm68],
:global(body.night-mode) .memory-start-chooser-option-copy small[b-uptnvzlm68] {
color: #cfbcae;
}
:global(body.night-mode) .memory-start-chooser-close[b-uptnvzlm68],
:global(body.night-mode) .memory-start-chooser-option-icon[b-uptnvzlm68] {
border-color: rgba(239, 204, 172, 0.2);
background: rgba(255, 244, 230, 0.08);
color: #e7ae89;
}
:global(body.night-mode) .memory-start-chooser-option:hover[b-uptnvzlm68] {
background: linear-gradient(90deg, rgba(203, 125, 84, 0.2), transparent 78%);
color: #ffd9be;
}
@keyframes memory-start-chooser-overlay-in-b-uptnvzlm68 {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes memory-start-chooser-sheet-in-b-uptnvzlm68 {
from {
opacity: 0;
transform: translateY(10px) scale(0.985);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 767px) {
.memory-start-chooser-overlay[b-uptnvzlm68] {
display: flex;
align-items: flex-end;
padding: 0;
}
.memory-start-chooser-dialog[b-uptnvzlm68] {
width: 100%;
max-height: 100dvh;
border-right: 0;
border-bottom: 0;
border-left: 0;
border-radius: 25px 25px 0 0;
animation-name: memory-start-chooser-mobile-sheet-in-b-uptnvzlm68;
}
.memory-start-chooser-handle[b-uptnvzlm68] {
width: 42px;
height: 4px;
display: block;
margin: 0.65rem auto -0.1rem;
border-radius: 999px;
background: rgba(120, 82, 62, 0.28);
}
.memory-start-chooser-header[b-uptnvzlm68] {
min-height: 70px;
padding: 0.7rem 1.15rem 0.68rem 1.25rem;
}
.memory-start-chooser-body[b-uptnvzlm68] {
padding: 1.3rem 1.25rem max(1.4rem, env(safe-area-inset-bottom));
}
.memory-start-chooser-body h2[b-uptnvzlm68] {
font-size: clamp(1.92rem, 9vw, 2.55rem);
}
.memory-start-chooser-intro[b-uptnvzlm68] {
margin-bottom: 1.2rem;
}
.memory-start-chooser-option[b-uptnvzlm68] {
min-height: 76px;
}
}
@media (max-width: 767px) and (max-height: 600px) {
.memory-start-chooser-dialog[b-uptnvzlm68] {
min-height: 100dvh;
border-radius: 0;
}
}
@keyframes memory-start-chooser-mobile-sheet-in-b-uptnvzlm68 {
from {
opacity: 0;
transform: translateY(100%);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.memory-start-chooser-overlay[b-uptnvzlm68],
.memory-start-chooser-dialog[b-uptnvzlm68] {
animation: none !important;
}
.memory-start-chooser-close[b-uptnvzlm68],
.memory-start-chooser-option[b-uptnvzlm68],
.memory-start-chooser-option-arrow[b-uptnvzlm68] {
transition: none;
}
}
/* /Components/Shared/MemoryVoicePlayer.razor.rz.scp.css */
.memory-voice-player[b-dd8zyxjmcc] {
--memory-player-ink: #4b332c;
--memory-player-muted: #806d64;
--memory-player-line: rgba(133, 83, 65, 0.2);
color: var(--memory-player-ink);
}
.memory-voice-player__content[b-dd8zyxjmcc] {
display: grid;
gap: 0.8rem;
padding: 1rem;
background: linear-gradient(135deg, rgba(255, 251, 247, 0.96), rgba(255, 241, 227, 0.72));
border: 1px solid var(--memory-player-line);
border-radius: 1rem;
}
.memory-voice-player__heading[b-dd8zyxjmcc] {
display: flex;
align-items: center;
gap: 0.7rem;
}
.memory-voice-player__heading > span:last-child[b-dd8zyxjmcc] {
display: grid;
gap: 0.1rem;
}
.memory-voice-player__heading strong[b-dd8zyxjmcc] {
font-size: 0.98rem;
}
.memory-voice-player__heading small[b-dd8zyxjmcc] {
color: var(--memory-player-muted);
font-size: 0.84rem;
}
.memory-voice-player__icon[b-dd8zyxjmcc] {
display: grid;
width: 2.35rem;
height: 2.35rem;
place-items: center;
color: #a7604c;
background: rgba(255, 255, 255, 0.82);
border: 1px solid var(--memory-player-line);
border-radius: 0.8rem;
}
.memory-voice-player__icon svg[b-dd8zyxjmcc] {
width: 1.15rem;
height: 1.15rem;
}
.memory-voice-player audio[b-dd8zyxjmcc] {
width: 100%;
min-height: 44px;
}
.memory-voice-player__status[b-dd8zyxjmcc],
.memory-voice-player__error[b-dd8zyxjmcc],
.memory-voice-player__empty[b-dd8zyxjmcc] {
margin: 0;
padding: 0.8rem 0.9rem;
border-radius: 0.8rem;
line-height: 1.5;
}
.memory-voice-player__status[b-dd8zyxjmcc],
.memory-voice-player__empty[b-dd8zyxjmcc] {
color: var(--memory-player-muted);
background: rgba(255, 247, 240, 0.82);
}
.memory-voice-player__error[b-dd8zyxjmcc] {
color: #963f34;
background: rgba(255, 233, 228, 0.8);
border-left: 4px solid #c75f4e;
}
/* /Components/Shared/MemoryVoiceRecorder.razor.rz.scp.css */
.memory-voice-recorder[b-gpj0tkwb88] {
--memory-voice-ink: #4b332c;
--memory-voice-muted: #806d64;
--memory-voice-copper: #ad654e;
--memory-voice-line: rgba(133, 83, 65, 0.24);
--memory-voice-paper: #fffaf5;
--memory-voice-wash: #fff1e5;
display: grid;
gap: 1rem;
padding: clamp(1rem, 3vw, 1.5rem);
color: var(--memory-voice-ink);
background: linear-gradient(135deg, rgba(255, 249, 243, 0.96), rgba(255, 240, 226, 0.72));
border: 1px solid var(--memory-voice-line);
border-radius: 1.5rem;
box-shadow: 0 14px 32px rgba(89, 55, 42, 0.06);
}
.memory-voice-recorder__header[b-gpj0tkwb88] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}
.memory-voice-recorder__icon[b-gpj0tkwb88],
.memory-voice-recorder__button-icon[b-gpj0tkwb88] {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
}
.memory-voice-recorder__icon[b-gpj0tkwb88] {
width: 3rem;
height: 3rem;
color: var(--memory-voice-copper);
background: rgba(255, 255, 255, 0.78);
border: 1px solid var(--memory-voice-line);
border-radius: 1rem;
}
.memory-voice-recorder__icon svg[b-gpj0tkwb88],
.memory-voice-recorder__button-icon svg[b-gpj0tkwb88] {
width: 1.4rem;
height: 1.4rem;
}
.memory-voice-recorder__header h3[b-gpj0tkwb88],
.memory-voice-recorder__header p[b-gpj0tkwb88],
.memory-voice-recorder__fallback[b-gpj0tkwb88],
.memory-voice-recorder__error[b-gpj0tkwb88],
.memory-voice-recorder__ready[b-gpj0tkwb88] {
margin: 0;
}
.memory-voice-recorder__header h3[b-gpj0tkwb88] {
font-family: var(--font-serif, Georgia, serif);
font-size: clamp(1.2rem, 2vw, 1.45rem);
line-height: 1.15;
color: #452c25;
}
.memory-voice-recorder__header p[b-gpj0tkwb88],
.memory-voice-recorder__fallback[b-gpj0tkwb88] {
margin-top: 0.35rem;
color: var(--memory-voice-muted);
line-height: 1.55;
}
.memory-voice-recorder__recording[b-gpj0tkwb88],
.memory-voice-recorder__processing[b-gpj0tkwb88],
.memory-voice-recorder__ready[b-gpj0tkwb88] {
display: flex;
align-items: center;
gap: 0.65rem;
font-weight: 650;
}
.memory-voice-recorder__recording[b-gpj0tkwb88] {
color: #9f4739;
}
.memory-voice-recorder__pulse[b-gpj0tkwb88] {
width: 0.7rem;
height: 0.7rem;
background: #c85b4b;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(200, 91, 75, 0.36);
animation: memory-voice-pulse-b-gpj0tkwb88 1.7s ease-out infinite;
}
.memory-voice-recorder__preview[b-gpj0tkwb88] {
display: grid;
gap: 0.5rem;
padding: 0.9rem;
background: rgba(255, 255, 255, 0.68);
border: 1px solid rgba(133, 83, 65, 0.17);
border-radius: 1rem;
}
.memory-voice-recorder__preview-label[b-gpj0tkwb88] {
color: var(--memory-voice-muted);
font-size: 0.9rem;
font-weight: 700;
}
.memory-voice-recorder audio[b-gpj0tkwb88] {
width: 100%;
min-height: 44px;
}
.memory-voice-recorder__primary-action[b-gpj0tkwb88],
.memory-voice-recorder__secondary-action[b-gpj0tkwb88] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.65rem;
min-height: 44px;
padding: 0.75rem 1.15rem;
font: inherit;
font-weight: 750;
cursor: pointer;
transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.memory-voice-recorder__primary-action[b-gpj0tkwb88] {
width: min(100%, 23rem);
color: #fffdf9;
background: #593a31;
border: 1px solid #593a31;
border-radius: 999px;
box-shadow: 0 8px 18px rgba(89, 58, 49, 0.14);
}
.memory-voice-recorder__stop[b-gpj0tkwb88] {
background: #984d40;
border-color: #984d40;
}
.memory-voice-recorder__secondary-action[b-gpj0tkwb88] {
width: fit-content;
color: #6e4b40;
background: transparent;
border: 1px solid var(--memory-voice-line);
border-radius: 999px;
}
.memory-voice-recorder__secondary-action svg[b-gpj0tkwb88] {
width: 1.1rem;
height: 1.1rem;
}
.memory-voice-recorder__primary-action:hover:not(:disabled)[b-gpj0tkwb88],
.memory-voice-recorder__secondary-action:hover:not(:disabled)[b-gpj0tkwb88] {
transform: translateY(-1px);
}
.memory-voice-recorder__primary-action:hover:not(:disabled)[b-gpj0tkwb88] {
background: #47302a;
box-shadow: 0 10px 22px rgba(89, 58, 49, 0.19);
}
.memory-voice-recorder__secondary-action:hover:not(:disabled)[b-gpj0tkwb88] {
background: rgba(255, 255, 255, 0.65);
}
.memory-voice-recorder__primary-action:focus-visible[b-gpj0tkwb88],
.memory-voice-recorder__secondary-action:focus-visible[b-gpj0tkwb88] {
outline: 3px solid rgba(173, 101, 78, 0.42);
outline-offset: 3px;
}
.memory-voice-recorder__primary-action:disabled[b-gpj0tkwb88],
.memory-voice-recorder__secondary-action:disabled[b-gpj0tkwb88] {
cursor: not-allowed;
opacity: 0.55;
}
.memory-voice-recorder__processing[b-gpj0tkwb88] {
min-height: 1.5rem;
color: #805f52;
font-size: 0.94rem;
}
.memory-voice-recorder__spinner[b-gpj0tkwb88] {
width: 1rem;
height: 1rem;
border: 2px solid rgba(173, 101, 78, 0.22);
border-top-color: var(--memory-voice-copper);
border-radius: 50%;
animation: memory-voice-spin-b-gpj0tkwb88 850ms linear infinite;
}
.memory-voice-recorder__ready[b-gpj0tkwb88] {
color: #68633e;
}
.memory-voice-recorder__error[b-gpj0tkwb88] {
padding: 0.8rem 0.95rem;
color: #963f34;
background: rgba(255, 233, 228, 0.8);
border-left: 4px solid #c75f4e;
border-radius: 0.75rem;
line-height: 1.5;
}
@keyframes memory-voice-pulse-b-gpj0tkwb88 {
0% { box-shadow: 0 0 0 0 rgba(200, 91, 75, 0.36); }
70% { box-shadow: 0 0 0 0.65rem rgba(200, 91, 75, 0); }
100% { box-shadow: 0 0 0 0 rgba(200, 91, 75, 0); }
}
@keyframes memory-voice-spin-b-gpj0tkwb88 {
to { transform: rotate(360deg); }
}
@media (max-width: 640px) {
.memory-voice-recorder[b-gpj0tkwb88] {
border-radius: 1.2rem;
}
.memory-voice-recorder__primary-action[b-gpj0tkwb88],
.memory-voice-recorder__secondary-action[b-gpj0tkwb88] {
width: 100%;
}
}
@media (prefers-reduced-motion: reduce) {
.memory-voice-recorder__primary-action[b-gpj0tkwb88],
.memory-voice-recorder__secondary-action[b-gpj0tkwb88],
.memory-voice-recorder__pulse[b-gpj0tkwb88],
.memory-voice-recorder__spinner[b-gpj0tkwb88] {
animation: none;
transition: none;
}
}
/* /Components/Shared/MyMemorialContributions.razor.rz.scp.css */
.contribution-section[b-k8ye7wak0i] {
margin-top: 2.5rem;
padding-top: 2.25rem;
border-top: 1px solid rgba(123, 90, 83, 0.16);
}
.contribution-heading span[b-k8ye7wak0i],
.contribution-modal-eyebrow[b-k8ye7wak0i] {
color: #a5654f;
font-size: 0.76rem;
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
}
.contribution-heading h2[b-k8ye7wak0i],
.contribution-modal h2[b-k8ye7wak0i] {
margin: 0.35rem 0 0.4rem;
color: #442f2b;
font-family: var(--font-serif, Georgia, serif);
font-size: clamp(1.8rem, 4vw, 2.5rem);
line-height: 1.05;
}
.contribution-heading p[b-k8ye7wak0i],
.contribution-modal > p[b-k8ye7wak0i] {
max-width: 42rem;
margin: 0;
color: #78635d;
line-height: 1.55;
}
.contribution-list[b-k8ye7wak0i] {
display: grid;
gap: 1rem;
margin-top: 1.35rem;
}
.contribution-card[b-k8ye7wak0i] {
display: grid;
grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
overflow: hidden;
border: 1px solid rgba(151, 104, 77, 0.18);
border-radius: 18px;
background: rgba(255, 252, 247, 0.86);
box-shadow: 0 12px 35px rgba(91, 56, 44, 0.07);
}
.contribution-card:not(:has(.contribution-image))[b-k8ye7wak0i] {
grid-template-columns: 1fr;
}
.contribution-image[b-k8ye7wak0i] {
width: 100%;
height: 100%;
min-height: 12rem;
object-fit: cover;
}
.contribution-copy[b-k8ye7wak0i] {
padding: 1.25rem 1.35rem;
}
.contribution-card-topline[b-k8ye7wak0i] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
color: #4b332e;
}
.contribution-status[b-k8ye7wak0i] {
flex: 0 0 auto;
padding: 0.3rem 0.65rem;
border-radius: 999px;
background: #f7e8dc;
color: #8a5848;
font-size: 0.75rem;
font-weight: 700;
}
.contribution-status.published[b-k8ye7wak0i] {
background: #e9f2e7;
color: #526d4c;
}
.contribution-status.needs-revision[b-k8ye7wak0i] {
background: #fff0d9;
color: #8c6230;
}
.contribution-text[b-k8ye7wak0i] {
margin: 0.9rem 0;
color: #5e4943;
line-height: 1.6;
}
.contribution-owner-note[b-k8ye7wak0i] {
margin: 0.75rem 0;
padding: 0.8rem 0.9rem;
border-radius: 12px;
background: #fff2df;
color: #6d5148;
line-height: 1.45;
}
.contribution-owner-note strong[b-k8ye7wak0i] {
display: block;
margin-bottom: 0.25rem;
}
.contribution-consent[b-k8ye7wak0i] {
margin: 0.75rem 0 0;
color: #846e67;
font-size: 0.84rem;
}
.contribution-actions[b-k8ye7wak0i] {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-top: 1rem;
}
.contribution-action[b-k8ye7wak0i] {
padding: 0.58rem 0.9rem;
border: 1px solid rgba(123, 90, 83, 0.23);
border-radius: 999px;
background: #fffaf5;
color: #674840;
font: inherit;
font-size: 0.85rem;
font-weight: 700;
cursor: pointer;
}
.contribution-action:hover[b-k8ye7wak0i] {
background: #f7e7dc;
}
.contribution-action.quiet-danger[b-k8ye7wak0i] {
color: #9a514a;
}
.contribution-load-error[b-k8ye7wak0i],
.contribution-action-error[b-k8ye7wak0i] {
color: #9a514a;
}
.contribution-modal-backdrop[b-k8ye7wak0i] {
position: fixed;
z-index: 2200;
inset: 0;
display: grid;
place-items: center;
padding: 1.25rem;
background: rgba(55, 42, 37, 0.62);
backdrop-filter: blur(6px);
}
.contribution-modal[b-k8ye7wak0i] {
position: relative;
width: min(42rem, 100%);
padding: clamp(1.4rem, 4vw, 2.2rem);
border: 1px solid rgba(151, 104, 77, 0.2);
border-radius: 24px;
background: #fffaf4;
box-shadow: 0 24px 70px rgba(48, 31, 27, 0.28);
}
.contribution-modal-close[b-k8ye7wak0i] {
position: absolute;
top: 0.9rem;
right: 1rem;
width: 2.35rem;
height: 2.35rem;
border: 1px solid rgba(123, 90, 83, 0.18);
border-radius: 50%;
background: #fffdf9;
color: #694e47;
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
}
.contribution-field-label[b-k8ye7wak0i] {
display: block;
margin: 1.35rem 0 0.45rem;
color: #4d3832;
font-weight: 700;
}
.contribution-textarea[b-k8ye7wak0i] {
width: 100%;
min-height: 13rem;
padding: 1rem;
resize: vertical;
border: 1px solid rgba(151, 104, 77, 0.28);
border-radius: 14px;
background: #fffdf9;
color: #48342f;
font: inherit;
line-height: 1.55;
box-sizing: border-box;
}
.contribution-character-count[b-k8ye7wak0i] {
display: block;
margin-top: 0.35rem;
color: #8c7770;
text-align: right;
font-size: 0.78rem;
}
.contribution-consent-choice[b-k8ye7wak0i] {
display: flex;
gap: 0.7rem;
align-items: flex-start;
margin-top: 1rem;
color: #644c45;
line-height: 1.45;
}
.contribution-consent-choice input[b-k8ye7wak0i] {
margin-top: 0.25rem;
accent-color: #7b5a53;
}
.contribution-modal-actions[b-k8ye7wak0i] {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
margin-top: 1.5rem;
}
.contribution-modal-primary[b-k8ye7wak0i],
.contribution-modal-secondary[b-k8ye7wak0i] {
padding: 0.72rem 1.15rem;
border-radius: 999px;
font: inherit;
font-weight: 700;
cursor: pointer;
}
.contribution-modal-primary[b-k8ye7wak0i] {
border: 0;
background: #765149;
color: #fff;
}
.contribution-modal-secondary[b-k8ye7wak0i] {
border: 1px solid rgba(123, 90, 83, 0.22);
background: transparent;
color: #674840;
}
.contribution-modal-primary:disabled[b-k8ye7wak0i],
.contribution-modal-secondary:disabled[b-k8ye7wak0i] {
opacity: 0.55;
cursor: default;
}
@media (max-width: 640px) {
.contribution-section[b-k8ye7wak0i] {
margin-top: 2rem;
}
.contribution-card[b-k8ye7wak0i] {
grid-template-columns: 1fr;
}
.contribution-image[b-k8ye7wak0i] {
max-height: 18rem;
}
.contribution-card-topline[b-k8ye7wak0i] {
align-items: flex-start;
}
.contribution-modal-actions[b-k8ye7wak0i] {
flex-direction: column-reverse;
}
.contribution-modal-primary[b-k8ye7wak0i],
.contribution-modal-secondary[b-k8ye7wak0i] {
width: 100%;
}
}
/* /Components/Shared/VoiceDictationButton.razor.rz.scp.css */
.voice-dictation[b-c924b2o7s0] {
position: relative;
display: inline-flex;
align-items: center;
flex: 0 0 auto;
}
.voice-dictation__button[b-c924b2o7s0] {
position: relative;
width: 42px;
height: 42px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(126, 88, 70, 0.22);
border-radius: 999px;
background: rgba(255, 252, 248, 0.94);
color: #765549;
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.is-locked .voice-dictation__button[b-c924b2o7s0] {
color: #8a6253;
background: rgba(255, 247, 240, 0.97);
border-color: rgba(171, 112, 86, 0.32);
}
.voice-dictation__lock[b-c924b2o7s0] {
position: absolute;
right: -4px;
bottom: -3px;
width: 17px;
height: 17px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 2px solid #fffaf5;
border-radius: 50%;
background: #b9785d;
color: #fffaf5;
box-shadow: 0 2px 6px rgba(92, 56, 42, 0.2);
}
.voice-dictation__lock svg[b-c924b2o7s0] {
width: 10px;
height: 10px;
}
.voice-dictation__button:hover:not(:disabled)[b-c924b2o7s0] {
background: #fff8f1;
border-color: rgba(126, 88, 70, 0.38);
transform: translateY(-1px);
}
.voice-dictation__button:focus-visible[b-c924b2o7s0] {
outline: 3px solid rgba(203, 139, 113, 0.3);
outline-offset: 2px;
}
.voice-dictation__button:disabled[b-c924b2o7s0] {
cursor: default;
opacity: 0.62;
}
.voice-dictation__button svg[b-c924b2o7s0] {
width: 20px;
height: 20px;
}
.is-recording .voice-dictation__button[b-c924b2o7s0] {
color: #9c443d;
background: #fff0ed;
border-color: rgba(156, 68, 61, 0.42);
box-shadow: 0 0 0 5px rgba(156, 68, 61, 0.09);
}
.voice-dictation__stop[b-c924b2o7s0] {
width: 11px;
height: 11px;
border-radius: 2px;
background: currentColor;
}
.voice-dictation__spinner[b-c924b2o7s0] {
width: 17px;
height: 17px;
border: 2px solid rgba(118, 85, 73, 0.22);
border-top-color: currentColor;
border-radius: 50%;
animation: voice-dictation-spin-b-c924b2o7s0 0.8s linear infinite;
}
.voice-dictation__status[b-c924b2o7s0] {
position: absolute;
right: 0;
bottom: calc(100% + 10px);
z-index: 12;
width: min(280px, calc(100vw - 32px));
padding: 10px 12px;
border: 1px solid rgba(126, 88, 70, 0.18);
border-radius: 14px;
background: #fffaf5;
box-shadow: 0 10px 30px rgba(76, 52, 42, 0.14);
color: #684d43;
font-size: 0.78rem;
line-height: 1.35;
}
.voice-dictation__status strong[b-c924b2o7s0],
.voice-dictation__status span[b-c924b2o7s0] {
display: block;
}
.voice-dictation__status strong[b-c924b2o7s0] {
margin-bottom: 3px;
font-size: 0.84rem;
}
.voice-dictation__error[b-c924b2o7s0] {
color: #93473f;
}
.voice-upgrade-dialog[b-c924b2o7s0] {
width: min(460px, calc(100vw - 32px));
max-width: none;
padding: 0;
border: 0;
border-radius: 24px;
background: transparent;
color: #5f463d;
overflow: visible;
}
.voice-upgrade-dialog[b-c924b2o7s0]::backdrop {
background: rgba(48, 35, 30, 0.56);
backdrop-filter: blur(3px);
}
.voice-upgrade-dialog__card[b-c924b2o7s0] {
position: relative;
padding: 34px 34px 28px;
border: 1px solid rgba(151, 101, 79, 0.2);
border-radius: 24px;
background:
radial-gradient(circle at 50% 0%, rgba(244, 199, 174, 0.24), transparent 45%),
#fffaf5;
box-shadow: 0 24px 70px rgba(52, 35, 29, 0.26);
text-align: center;
}
.voice-upgrade-dialog__close[b-c924b2o7s0] {
position: absolute;
top: 12px;
right: 14px;
width: 36px;
height: 36px;
border: 0;
border-radius: 50%;
background: transparent;
color: #7b5a4e;
font: 400 1.65rem/1 var(--font-sans);
cursor: pointer;
}
.voice-upgrade-dialog__close:hover[b-c924b2o7s0] {
background: rgba(151, 101, 79, 0.08);
}
.voice-upgrade-dialog__icon[b-c924b2o7s0] {
width: 66px;
height: 66px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
border: 1px solid rgba(171, 112, 86, 0.26);
border-radius: 50%;
background: #fff2e8;
color: #8a5b49;
box-shadow: 0 8px 22px rgba(125, 79, 59, 0.1);
}
.voice-upgrade-dialog__icon svg[b-c924b2o7s0] {
width: 30px;
height: 30px;
}
.voice-upgrade-dialog__eyebrow[b-c924b2o7s0] {
margin: 0 0 7px;
color: #a1664f;
font: 700 0.72rem/1.2 var(--font-sans);
letter-spacing: 0.13em;
text-transform: uppercase;
}
.voice-upgrade-dialog h2[b-c924b2o7s0] {
margin: 0;
color: #553c33;
font: 650 clamp(1.55rem, 5vw, 2rem)/1.15 var(--font-serif);
}
.voice-upgrade-dialog__description[b-c924b2o7s0] {
margin: 14px auto 0;
max-width: 36ch;
color: #70554b;
font: 400 0.98rem/1.58 var(--font-sans);
}
.voice-upgrade-dialog__reassurance[b-c924b2o7s0] {
margin: 18px 0 0;
padding: 12px 14px;
border-radius: 14px;
background: rgba(244, 224, 211, 0.52);
color: #765b50;
font: 400 0.82rem/1.45 var(--font-sans);
}
.voice-upgrade-dialog__actions[b-c924b2o7s0] {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 22px;
}
.voice-upgrade-dialog__primary[b-c924b2o7s0],
.voice-upgrade-dialog__secondary[b-c924b2o7s0] {
min-height: 46px;
border-radius: 999px;
font: 650 0.95rem/1 var(--font-sans);
cursor: pointer;
}
.voice-upgrade-dialog__primary[b-c924b2o7s0] {
border: 1px solid #8c5d4b;
background: #8c5d4b;
color: #fffaf5;
box-shadow: 0 8px 18px rgba(112, 67, 51, 0.16);
}
.voice-upgrade-dialog__primary:hover[b-c924b2o7s0] {
background: #7b4e3e;
}
.voice-upgrade-dialog__secondary[b-c924b2o7s0] {
border: 0;
background: transparent;
color: #76584d;
}
.voice-upgrade-dialog__secondary:hover[b-c924b2o7s0] {
text-decoration: underline;
}
@keyframes voice-dictation-spin-b-c924b2o7s0 {
to { transform: rotate(360deg); }
}
@media (max-width: 520px) {
.voice-dictation__button[b-c924b2o7s0] {
width: 40px;
height: 40px;
}
.voice-upgrade-dialog[b-c924b2o7s0] {
width: calc(100vw - 24px);
}
.voice-upgrade-dialog__card[b-c924b2o7s0] {
padding: 30px 22px 22px;
border-radius: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.voice-dictation__button[b-c924b2o7s0] {
transition: none;
}
.voice-dictation__spinner[b-c924b2o7s0] {
animation-duration: 1.6s;
}
}
/* /Components/ShareKeepsakeModal.razor.rz.scp.css */
/* ShareKeepsakeModal */
.share-modal-overlay[b-vz9mrl836o] {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
z-index: 2100;
animation: shareOverlayIn-b-vz9mrl836o 0.2s ease-out;
}
@keyframes shareOverlayIn-b-vz9mrl836o {
from { opacity: 0; }
to { opacity: 1; }
}
.share-modal-content[b-vz9mrl836o] {
background: #faf6f1;
border-radius: 20px;
width: 480px;
max-width: 94%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
animation: shareContentIn-b-vz9mrl836o 0.25s ease-out;
}
@keyframes shareContentIn-b-vz9mrl836o {
from {
opacity: 0;
transform: translateY(12px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Header */
.share-modal-header[b-vz9mrl836o] {
display: flex;
justify-content: flex-end;
padding: 12px 16px 0 16px;
}
.share-modal-close[b-vz9mrl836o] {
background: none;
border: none;
font-size: 22px;
color: #8b6b66;
cursor: pointer;
padding: 4px 8px;
border-radius: 6px;
line-height: 1;
}
.share-modal-close:hover[b-vz9mrl836o] {
background: rgba(0, 0, 0, 0.04);
color: #5a3a33;
}
/* Body */
.share-modal-body[b-vz9mrl836o] {
padding: 4px 28px 8px 28px;
text-align: center;
}
.share-icon-circle[b-vz9mrl836o] {
font-size: 2.4rem;
margin-bottom: 8px;
}
/* LovOne Wax Seal — "Your gift is sealed" confirmation */
.share-seal-area[b-vz9mrl836o] {
display: flex;
justify-content: center;
margin-bottom: 12px;
}
[b-vz9mrl836o] .share-seal {
width: 90px;
height: 90px;
animation: sealStamp-b-vz9mrl836o 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes sealStamp-b-vz9mrl836o {
0% {
opacity: 0;
transform: rotate(var(--sigill-rotation, -8deg)) scale(1.3);
}
60% {
opacity: 1;
transform: rotate(var(--sigill-rotation, -8deg)) scale(0.95);
}
100% {
opacity: 1;
transform: rotate(var(--sigill-rotation, -8deg)) scale(1);
}
}
.share-title[b-vz9mrl836o] {
font-family: var(--font-serif);
font-size: 1.5rem;
font-weight: 600;
color: #5a3a33;
margin: 0 0 6px 0;
}
.share-subtitle[b-vz9mrl836o] {
color: #6b5a57;
font-size: 0.95rem;
margin: 0 0 20px 0;
line-height: 1.5;
}
/* Error Banner */
.share-error-banner[b-vz9mrl836o] {
background: #fef2f2;
border: 1px solid #f5c6c6;
color: #b73a3a;
padding: 10px 20px;
margin: 0 20px;
border-radius: 10px;
font-size: 0.9rem;
text-align: center;
}
/* Note Input */
.share-note-group[b-vz9mrl836o] {
text-align: left;
}
.share-note-label[b-vz9mrl836o] {
display: block;
font-size: 0.85rem;
color: #8b7355;
margin-bottom: 6px;
font-weight: 500;
}
.share-note-input[b-vz9mrl836o] {
width: 100%;
min-height: 80px;
padding: 12px 14px;
border: 1px solid #e6ddd5;
border-radius: 12px;
background: #fff;
color: #5a3a33;
font-size: 0.95rem;
font-family: inherit;
resize: vertical;
transition: border-color 0.2s;
box-sizing: border-box;
}
.share-note-input:focus[b-vz9mrl836o] {
outline: none;
border-color: #c4755d;
box-shadow: 0 0 0 3px rgba(196, 117, 93, 0.12);
}
.share-note-input[b-vz9mrl836o]::placeholder {
color: #b5a89e;
}
.share-note-charcount[b-vz9mrl836o] {
display: block;
text-align: right;
font-size: 0.78rem;
color: #b5a89e;
margin-top: 4px;
}
/* Link Display */
.share-link-container[b-vz9mrl836o] {
display: flex;
gap: 0;
margin-top: 8px;
border-radius: 12px;
overflow: hidden;
border: 1px solid #e6ddd5;
background: #f3ede6;
}
.share-link-input[b-vz9mrl836o] {
flex: 1;
padding: 12px 14px;
border: none;
background: transparent;
color: #5a3a33;
font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace;
font-size: 0.85rem;
min-width: 0;
outline: none;
}
.share-copy-btn[b-vz9mrl836o] {
padding: 12px 18px;
background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
color: #fff;
border: none;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
white-space: nowrap;
transition: background 0.2s;
min-width: 120px;
}
.share-copy-btn:hover[b-vz9mrl836o] {
background: linear-gradient(180deg, #d99a80 0%, #b86e54 100%);
}
.share-copied-text[b-vz9mrl836o] {
color: #fff;
}
/* Footer */
.share-modal-footer[b-vz9mrl836o] {
padding: 12px 28px 24px 28px;
display: flex;
justify-content: center;
}
.share-btn-primary[b-vz9mrl836o] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 32px;
background: linear-gradient(180deg, #CE8568 0%, #A85E46 100%);
color: #fff;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
min-width: 160px;
box-shadow: 0 2px 8px rgba(168, 94, 70, 0.25);
}
.share-btn-primary:hover:not(:disabled)[b-vz9mrl836o] {
background: linear-gradient(180deg, #d99a80 0%, #b86e54 100%);
transform: translateY(-1px);
}
.share-btn-primary:disabled[b-vz9mrl836o] {
opacity: 0.7;
cursor: not-allowed;
}
.share-btn-close[b-vz9mrl836o] {
padding: 10px 28px;
background: #fff;
color: #6b5a57;
border: 1px solid #e6ddd5;
border-radius: 12px;
font-size: 0.95rem;
cursor: pointer;
transition: background 0.2s;
}
.share-btn-close:hover[b-vz9mrl836o] {
background: #f5efe9;
}
.share-footer-actions[b-vz9mrl836o] {
display: flex;
gap: 0.75rem;
justify-content: space-between;
}
.share-btn-revoke[b-vz9mrl836o] {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: transparent;
color: #a85e46;
border: 1px solid rgba(168, 94, 70, 0.3);
border-radius: 12px;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.2s ease;
}
.share-btn-revoke:hover:not(:disabled)[b-vz9mrl836o] {
background: rgba(168, 94, 70, 0.08);
border-color: rgba(168, 94, 70, 0.5);
}
.share-btn-revoke:disabled[b-vz9mrl836o] {
opacity: 0.6;
cursor: not-allowed;
}
/* Spinner */
.share-spinner[b-vz9mrl836o] {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: #fff;
border-radius: 50%;
animation: shareSpin-b-vz9mrl836o 0.6s linear infinite;
}
@keyframes shareSpin-b-vz9mrl836o {
to { transform: rotate(360deg); }
}
/* Responsive */
@media (max-width: 540px) {
.share-modal-content[b-vz9mrl836o] {
width: 100%;
max-width: 100%;
border-radius: 20px 20px 0 0;
margin-top: auto;
}
.share-modal-overlay[b-vz9mrl836o] {
align-items: flex-end;
}
.share-modal-body[b-vz9mrl836o] {
padding: 4px 20px 8px 20px;
}
.share-modal-footer[b-vz9mrl836o] {
padding: 12px 20px 24px 20px;
}
.share-title[b-vz9mrl836o] {
font-size: 1.3rem;
}
.share-link-container[b-vz9mrl836o] {
flex-direction: column;
}
.share-copy-btn[b-vz9mrl836o] {
border-radius: 0;
padding: 14px 18px;
}
.share-btn-primary[b-vz9mrl836o] {
width: 100%;
}
}
/* /Components/SidebarBottom.razor.rz.scp.css */
/* Styles for SidebarBottom component (sidebar user dropdown) */
.sidebar-bottom[b-lacu6cs1fn] {
padding: 12px 16px;
display: flex;
align-items: center;
justify-content: center;
}
.sidebar-language-wrapper[b-lacu6cs1fn] {
width: 100%;
margin-bottom: 8px;
}
/* Variant for explicit pinning: allows pages to opt-in without depending on specific parent selectors */
.sidebar-bottom.pinned[b-lacu6cs1fn] {
position: absolute;
bottom: 22px;
left: 0;
width: 100%;
display: flex;
flex-direction: column; /* stack divider above avatar/name */
align-items: center; /* center horizontally */
justify-content: center;
padding-left: 0;
}
/* Override for loved-one-chat-sidebar: use relative positioning for proper flex layout */
.loved-one-chat-sidebar .sidebar-bottom.pinned[b-lacu6cs1fn] {
position: relative;
bottom: auto;
left: auto;
width: 100%;
margin-top: auto;
}
/* Desktop: when the sidebar is fixed (desktop layouts), pin the user block to the viewport bottom
so it visually aligns with the fixed sidebar. This avoids relying on parent's positioning
and is a safe, localized override. On small screens the existing media query will revert it. */
@media (min-width: 993px) {
.sidebar-bottom.pinned[b-lacu6cs1fn] {
position: fixed;
left: 0;
bottom: 22px;
width: 280px; /* match the main sidebar width */
padding-left: 0;
display: flex;
flex-direction: column; /* stack divider above avatar/name */
align-items: center; /* center avatar/name horizontally */
justify-content: flex-end; /* keep block pinned near bottom */
z-index: 110; /* ensure it appears above main content but below any high z-index toggles */
}
/* Override for loved-one-chat-sidebar on desktop: keep relative positioning */
.loved-one-chat-sidebar .sidebar-bottom.pinned[b-lacu6cs1fn] {
position: relative;
bottom: auto;
left: auto;
width: 100%;
margin-top: auto;
z-index: auto;
}
/* Ensure the user-dropdown-menu appears centered above the avatar */
.sidebar-bottom.pinned .user-dropdown-container[b-lacu6cs1fn] {
width: 100%;
display: flex;
justify-content: center;
}
.sidebar-bottom.pinned .user-dropdown-menu[b-lacu6cs1fn] {
right: auto;
left: 50%;
transform: translateX(-50%);
}
/* If the sidebar is collapsed/hidden on desktop, ensure this pinned block does not
remain visible due to fixed positioning. Target the generic sidebar hidden state
so the component is not coupled to a specific page implementation. */
.sidebar.hidden .sidebar-bottom.pinned[b-lacu6cs1fn] {
display: none !important;
visibility: hidden !important;
}
}
.sidebar-divider[b-lacu6cs1fn] {
height: 1px;
width: 100%;
background: rgba(75,46,46,0.06);
margin-bottom: 8px;
}
.user-dropdown-container[b-lacu6cs1fn] {
position: relative;
}
.sidebar-user[b-lacu6cs1fn] {
display: flex;
align-items: center;
gap: 12px;
cursor: pointer;
padding: 6px;
border-radius: 8px;
border: 0;
background: transparent;
width: fit-content;
font: inherit;
text-align: left;
}
.sidebar-user:focus-visible[b-lacu6cs1fn] {
outline: 2px solid rgba(123, 90, 83, 0.42);
outline-offset: 3px;
}
.user-avatar-circle[b-lacu6cs1fn] {
width: 44px;
height: 44px;
border-radius: 50%;
background: #F9D5C9;
color: #4B2E2E;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.user-name[b-lacu6cs1fn] {
color: #4B2E2E;
font-weight: 600;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 3px;
}
.user-name-line[b-lacu6cs1fn] {
display: inline-flex;
align-items: center;
line-height: 1.1;
}
.memory-friend-mini-badge[b-lacu6cs1fn] {
display: inline-flex;
align-items: center;
gap: 5px;
width: fit-content;
max-width: 125px;
padding: 2px 7px;
border-radius: 999px;
background: rgba(218, 151, 79, 0.14);
border: 1px solid rgba(170, 112, 59, 0.22);
color: #70482f;
font-size: 0.68rem;
font-weight: 700;
line-height: 1.35;
white-space: nowrap;
}
.memory-friend-mini-badge__mark[b-lacu6cs1fn] {
width: 7px;
height: 7px;
border-radius: 999px;
flex: 0 0 auto;
background: #d7924d;
box-shadow: 0 0 0 2px rgba(215, 146, 77, 0.16);
}
.dropdown-indicator[b-lacu6cs1fn] {
transition: transform .18s ease;
margin-left: 6px;
}
.dropdown-indicator.open[b-lacu6cs1fn] {
transform: rotate(180deg);
}
.user-dropdown-menu[b-lacu6cs1fn] {
position: absolute;
bottom: calc(100% + 8px);
left: 50%;
transform: translateX(-50%); /* Centered */
background-color: white;
border: 1px solid #ccc; /* ThemeExperience border */
border-radius: 8px;
box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
z-index: 100;
min-width: 180px;
width: max-content;
padding: 8px 0;
animation: fadeIn 0.2s ease-in-out; /* ThemeExperience animation */
}
.mobile-account-backdrop[b-lacu6cs1fn] {
display: none;
}
.user-dropdown-menu .dropdown-item[b-lacu6cs1fn] {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 16px;
color: #4B2E2E;
text-decoration: none;
border-radius: 8px;
margin: 2px 8px;
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background-color 0.2s ease;
}
.user-dropdown-menu button.dropdown-item[b-lacu6cs1fn] {
width: calc(100% - 16px);
border: 0;
background: transparent;
font: inherit;
}
.user-dropdown-menu .dropdown-item:hover[b-lacu6cs1fn] {
background: #FCE6DA;
}
.user-dropdown-menu .dropdown-item:focus-visible[b-lacu6cs1fn] {
background: #FCE6DA;
outline: 2px solid #7B5A53;
outline-offset: 1px;
}
/* Menu icons styling - brown/sepia color */
.menu-icon[b-lacu6cs1fn] {
width: 20px;
min-width: 20px;
height: 20px;
font-size: 1rem;
color: #7B5A53;
opacity: 0.85;
text-align: center;
flex-shrink: 0;
}
/* Granny face icon in menu */
.granny-menu-icon[b-lacu6cs1fn] {
width: 20px;
min-width: 20px;
height: 20px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
border: 1.5px solid #FFE5D0;
box-sizing: border-box;
}
/* Special styling for Granny item to make it feel warm */
.dropdown-item.granny-item[b-lacu6cs1fn] {
background: linear-gradient(135deg, rgba(255, 229, 208, 0.15) 0%, rgba(255, 242, 236, 0.1) 100%);
}
.dropdown-item.granny-item:hover[b-lacu6cs1fn],
.dropdown-item.granny-item:focus-visible[b-lacu6cs1fn] {
background: linear-gradient(135deg, rgba(255, 229, 208, 0.4) 0%, rgba(255, 242, 236, 0.3) 100%);
}
/* Separator between main items and logout */
.dropdown-separator[b-lacu6cs1fn] {
height: 1px;
background: rgba(75, 46, 46, 0.1);
margin: 8px 16px;
}
/* Logout item slightly muted */
.dropdown-item.logout-item[b-lacu6cs1fn] {
opacity: 0.85;
}
.dropdown-item.logout-item:hover[b-lacu6cs1fn] {
opacity: 1;
}
/* Language selector item in dropdown */
.dropdown-item.language-item[b-lacu6cs1fn] {
justify-content: flex-start;
}
.dropdown-item.language-item .globe-icon[b-lacu6cs1fn] {
color: #7B5A53;
}
.submenu-arrow[b-lacu6cs1fn] {
margin-left: auto;
font-size: 0.7rem;
opacity: 0.6;
transition: transform 0.18s ease;
}
.submenu-arrow.open[b-lacu6cs1fn] {
transform: rotate(90deg);
}
/* Language submenu */
.language-submenu[b-lacu6cs1fn] {
background: rgba(249, 213, 201, 0.15);
border-radius: 6px;
margin: 4px 8px;
padding: 4px 0;
border-left: 2px solid rgba(123, 90, 83, 0.2);
}
.language-submenu .dropdown-item[b-lacu6cs1fn] {
padding: 10px 16px 10px 24px;
font-size: 0.85rem;
margin: 0;
border-radius: 0;
}
.language-submenu .dropdown-item:first-child[b-lacu6cs1fn] {
border-radius: 6px 6px 0 0;
}
.language-submenu .dropdown-item:last-child[b-lacu6cs1fn] {
border-radius: 0 0 6px 6px;
}
.language-submenu .dropdown-item.active[b-lacu6cs1fn] {
background: rgba(249, 213, 201, 0.4);
font-weight: 600;
}
.language-submenu .dropdown-item.active[b-lacu6cs1fn]::before {
content: "✓";
margin-right: 8px;
font-size: 0.75rem;
}
keyframes fadeIn[b-lacu6cs1fn] {
from{
opacity: 0;
}
to[b-lacu6cs1fn] {
opacity: 1;
}
}
.dropdown-item[b-lacu6cs1fn] {
padding: 10px 15px; /* ThemeExperience */
cursor: pointer;
font-size: 0.9rem;
color: var(--text);
transition: background-color 0.2s ease;
display: flex;
align-items: center;
gap: 0.6rem;
text-decoration: none;
}
.dropdown-item:hover[b-lacu6cs1fn] {
background-color: var(--soft-border);
}
/* ThemeExperience hover */
.dropdown-item .fas[b-lacu6cs1fn] { /* Styles for icons in dropdown */
width: 16px;
text-align: center;
opacity: 0.7;
}
@media (max-width: 768px) {
.sidebar-user[b-lacu6cs1fn] {
width: 100%;
min-width: 0;
}
.mobile-account-backdrop[b-lacu6cs1fn] {
position: fixed;
inset: 0;
display: block;
background: rgba(45, 31, 27, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
z-index: 1200;
}
.user-dropdown-menu[b-lacu6cs1fn] {
position: fixed;
left: 0;
right: 0;
bottom: 0;
top: auto;
width: auto;
min-width: 0;
max-width: none;
transform: none;
padding: 10px 0 calc(16px + env(safe-area-inset-bottom, 0px));
background: linear-gradient(180deg, #fffaf5 0%, #fff1e8 100%);
border: 1px solid rgba(75, 46, 46, 0.14);
border-bottom: 0;
border-radius: 22px 22px 0 0;
box-shadow: 0 -18px 48px rgba(48, 31, 27, 0.24);
z-index: 1300;
animation: accountSheetIn-b-lacu6cs1fn 0.18s ease-out;
}
.user-dropdown-menu[b-lacu6cs1fn]::before {
content: "";
display: block;
width: 42px;
height: 4px;
margin: 0 auto 8px;
border-radius: 999px;
background: rgba(75, 46, 46, 0.22);
}
.user-dropdown-menu .dropdown-item[b-lacu6cs1fn] {
margin: 2px 14px;
min-height: 48px;
padding: 14px 16px;
border-radius: 14px;
font-size: 0.95rem;
}
.language-submenu[b-lacu6cs1fn] {
margin: 6px 14px;
border-radius: 14px;
border-left: 0;
background: rgba(249, 213, 201, 0.22);
}
.language-submenu .dropdown-item[b-lacu6cs1fn] {
margin: 0;
padding-left: 28px;
}
/* On small screens let the sidebar flow naturally (no absolute positioning) */
.sidebar-bottom.pinned[b-lacu6cs1fn] {
position: static;
padding: 12px 16px;
justify-content: center;
}
}
/* Tablet and small-desktop breakpoint: ensure pinned block sits at the bottom of the sidebar overlay
when the sidebar is used as an overlay (mobile-show). This relies on the parent sidebar using
display:flex; flex-direction:column so margin-top:auto will push this block to the bottom. */
@media (max-width: 992px) {
/* If the sidebar becomes an overlay, ensure contents allow pushing bottom block */
.sidebar.mobile-show[b-lacu6cs1fn], .sidebar.mobile-visible-overlay[b-lacu6cs1fn] {
display: flex !important;
flex-direction: column !important;
}
/* Make the pinned block grow/shrink correctly and sit at the bottom */
.sidebar-bottom.pinned[b-lacu6cs1fn] {
position: static !important;
margin-top: auto; /* push to bottom */
padding: 12px 16px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
@media (min-width: 769px) {
/* Keep tablet overlay behavior as the older anchored menu, while phones use the action sheet. */
.sidebar-bottom.pinned .user-dropdown-menu[b-lacu6cs1fn] {
left: 50%;
right: auto;
transform: translateX(-50%);
bottom: calc(72px + env(safe-area-inset-bottom, 0px));
max-width: calc(100% - 32px);
}
}
}
@media (max-width: 768px) {
.sidebar-bottom.pinned .user-dropdown-menu[b-lacu6cs1fn] {
left: 0;
right: 0;
bottom: 0;
max-width: none;
transform: none;
}
}
@keyframes accountSheetIn-b-lacu6cs1fn {
from {
opacity: 0;
transform: translateY(18px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* /Components/SidebarGuestActions.razor.rz.scp.css */
.sidebar-guest-actions[b-p0yirk08xb] {
margin-top: auto;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 0 1rem;
}
/* Primary CTA button */
.sidebar-signup-btn[b-p0yirk08xb] {
width: 100%;
padding: 0.875rem 1.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 24px;
background: #F9C9B6;
color: #4B2E2E;
border: none;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.sidebar-signup-btn:hover[b-p0yirk08xb] {
background: #F5B8A0;
}
.sidebar-signup-btn:active[b-p0yirk08xb] {
transform: scale(0.98);
}
/* Micro-copy under signup */
.sidebar-signup-note[b-p0yirk08xb] {
margin: 0.5rem 0 0.75rem;
font-size: 0.8rem;
line-height: 1.4;
color: #7B6B63;
}
/* Login text with link */
.sidebar-login-text[b-p0yirk08xb] {
margin: 0 0 1.25rem;
font-size: 0.875rem;
color: #7B6B63;
}
.sidebar-login-link[b-p0yirk08xb] {
background: none;
border: none;
padding: 0;
margin-left: 0.25rem;
font-size: 0.875rem;
font-weight: 600;
color: #4B2E2E;
cursor: pointer;
text-decoration: none;
transition: color 0.15s ease;
}
.sidebar-login-link:hover[b-p0yirk08xb] {
color: #7B5A53;
text-decoration: underline;
}
/* Language selector wrapper - more breathing room */
.sidebar-language-wrapper[b-p0yirk08xb] {
margin-top: 0.5rem;
width: 100%;
padding-top: 1rem;
border-top: 1px solid rgba(75, 46, 46, 0.08);
}
@media (max-width: 1024px) {
.sidebar-guest-actions[b-p0yirk08xb] {
padding: 1rem 0 0;
}
.sidebar-signup-btn[b-p0yirk08xb] {
min-height: 52px;
border-radius: 999px;
background: #F8BFAF;
box-shadow: 0 12px 26px rgba(100, 63, 47, 0.12);
}
.sidebar-signup-note[b-p0yirk08xb] {
margin-top: 0.65rem;
margin-bottom: 0.45rem;
color: #7b675c;
}
.sidebar-login-text[b-p0yirk08xb] {
margin-bottom: 1.05rem;
}
.sidebar-language-wrapper[b-p0yirk08xb] {
margin-top: 0.85rem;
padding-top: 1rem;
}
}
@media (max-width: 420px) and (max-height: 740px) {
.sidebar-guest-actions[b-p0yirk08xb] {
padding-top: 0.65rem;
}
.sidebar-signup-btn[b-p0yirk08xb] {
min-height: 46px;
padding-top: 0.7rem;
padding-bottom: 0.7rem;
}
.sidebar-signup-note[b-p0yirk08xb] {
margin-top: 0.42rem;
margin-bottom: 0.28rem;
font-size: 0.74rem;
}
.sidebar-login-text[b-p0yirk08xb] {
margin-bottom: 0.7rem;
font-size: 0.82rem;
}
.sidebar-login-link[b-p0yirk08xb] {
font-size: 0.82rem;
}
.sidebar-language-wrapper[b-p0yirk08xb] {
margin-top: 0.55rem;
padding-top: 0.72rem;
}
}
/* Editorial application surfaces. */
.sidebar-signup-btn[b-p0yirk08xb], .sidebar-signup-btn:hover[b-p0yirk08xb] { background: var(--lov-green); color: var(--lov-on-green); border-radius: 6px; box-shadow: none; }
.sidebar-signup-note[b-p0yirk08xb], .sidebar-login-text[b-p0yirk08xb] { color: var(--lov-muted); }
.sidebar-login-link[b-p0yirk08xb], .sidebar-login-link:hover[b-p0yirk08xb] { color: var(--lov-ink); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.sidebar-language-wrapper[b-p0yirk08xb] { border-color: var(--lov-line); }
/* /Components/SidebarLanguageSelector.razor.rz.scp.css */
.sidebar-language-selector[b-vqtwqkuy5f] {
position: relative;
width: 100%;
}
.language-selector-trigger[b-vqtwqkuy5f] {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.5rem;
width: 100%;
padding: 0.6rem 0.9rem;
background: transparent;
border: none;
color: #4F4A45;
font-size: 0.92rem;
font-weight: 400;
cursor: pointer;
transition: color 0.2s ease;
}
.sidebar-language-selector.compact .language-selector-trigger[b-vqtwqkuy5f] {
padding: 0.45rem 0.75rem;
font-size: 0.86rem;
}
.language-selector-trigger:hover[b-vqtwqkuy5f] {
color: #000;
}
.globe-icon[b-vqtwqkuy5f] {
flex-shrink: 0;
}
.current-language[b-vqtwqkuy5f] {
flex-grow: 1;
text-align: left;
}
.dropdown-arrow[b-vqtwqkuy5f] {
flex-shrink: 0;
transition: transform 0.2s ease;
}
.language-selector-trigger:hover .dropdown-arrow[b-vqtwqkuy5f] {
transform: translateY(-1px);
}
.language-dropdown[b-vqtwqkuy5f] {
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
margin-bottom: 0.5rem;
background: #FFFFFF;
border: 1px solid rgba(79, 74, 69, 0.2);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
min-width: 160px;
overflow: hidden;
z-index: 1000;
}
.language-option[b-vqtwqkuy5f] {
display: block;
padding: 0.7rem 1rem;
color: #4F4A45;
text-decoration: none;
font-size: 0.92rem;
font-weight: 400;
transition: background-color 0.15s ease, color 0.15s ease;
}
.sidebar-language-selector.compact .language-option[b-vqtwqkuy5f] {
font-size: 0.88rem;
}
.language-option:hover[b-vqtwqkuy5f] {
background-color: rgba(251, 216, 205, 0.3);
color: #000;
}
.language-option.active[b-vqtwqkuy5f] {
background-color: rgba(251, 216, 205, 0.5);
color: #000;
font-weight: 600;
}
/* /Components/SidebarMenu.razor.rz.scp.css */
.sidebar-menu[b-96ktk9i5i3] {
display: flex;
flex-direction: column;
gap: 0.25rem;
margin: 0.5rem 0 1.5rem;
width: 100%;
padding: 0 0.5rem;
}
.sidebar-menu-section[b-96ktk9i5i3] {
display: flex;
flex-direction: column;
gap: 0.125rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link {
align-items: center;
border-radius: 10px;
color: var(--text-dark, #4B2E2E);
display: flex;
font-size: 0.925rem;
font-weight: 500;
gap: 0.75rem;
line-height: 1.5;
margin: 0;
padding: 0.625rem 0.875rem;
text-align: left;
text-decoration: none;
transition: background-color 0.15s ease, transform 0.1s ease;
position: relative;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-icon {
align-items: center;
display: inline-flex;
height: 1.25rem;
justify-content: center;
width: 1.25rem;
flex-shrink: 0;
opacity: 0.85;
transition: opacity 0.15s ease;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-icon svg {
height: 1.125rem;
width: 1.125rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:hover {
background: rgba(75, 46, 46, 0.06);
color: var(--text-dark, #4B2E2E);
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:hover .sidebar-menu-icon {
opacity: 1;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:focus-visible {
background: rgba(75, 46, 46, 0.08);
outline: 2px solid rgba(75, 46, 46, 0.2);
outline-offset: -2px;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:active {
transform: scale(0.98);
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link.active {
background: rgba(249, 213, 201, 0.5);
color: #4B2E2E;
font-weight: 600;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link.active .sidebar-menu-icon {
opacity: 1;
}
/* Night mode styles */
body.night-mode .sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link {
color: var(--text-dark, #E8D5C9);
}
body.night-mode .sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:hover {
background: rgba(255, 255, 255, 0.06);
color: var(--text-dark, #E8D5C9);
}
body.night-mode .sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:focus-visible {
background: rgba(255, 255, 255, 0.08);
outline-color: rgba(255, 255, 255, 0.2);
}
body.night-mode .sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link.active {
background: rgba(255, 111, 97, 0.2);
color: var(--text-dark, #E8D5C9);
}
@media (max-width: 1024px) {
.sidebar-menu[b-96ktk9i5i3] {
gap: 0.2rem;
margin: 0;
padding: 0;
}
.sidebar-menu-section[b-96ktk9i5i3] {
gap: 0.18rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link {
min-height: 48px;
border-radius: 18px;
gap: 0.95rem;
padding: 0.78rem 1rem;
font-size: 1.08rem;
letter-spacing: 0;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link--group-start {
margin-top: 1rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link--group-start::before {
content: "";
position: absolute;
top: calc(-0.45rem - 1px);
left: 0.95rem;
right: 0.95rem;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(130, 93, 70, 0.16), transparent);
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-icon {
height: 1.6rem;
width: 1.6rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-icon svg {
height: 1.35rem;
width: 1.35rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link.active {
background: rgba(249, 213, 201, 0.58);
box-shadow: inset 0 0 0 1px rgba(125, 84, 64, 0.08);
}
}
@media (max-width: 380px) {
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link {
min-height: 44px;
border-radius: 16px;
padding: 0.62rem 0.85rem;
font-size: 0.98rem;
}
}
@media (max-width: 420px) and (max-height: 740px) {
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link {
min-height: 40px;
border-radius: 14px;
gap: 0.72rem;
padding: 0.5rem 0.82rem;
font-size: 0.94rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link--group-start {
margin-top: 0.62rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link--group-start::before {
top: calc(-0.34rem - 1px);
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-icon {
height: 1.35rem;
width: 1.35rem;
}
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-icon svg {
height: 1.12rem;
width: 1.12rem;
}
}
/* LovOne editorial application identity. */
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link { border-radius: 6px; min-height: 44px; }
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-label { white-space: normal; overflow-wrap: anywhere; }
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link.active { background: var(--lov-selected); color: var(--lov-ink); }
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:hover { background: var(--lov-selected); color: var(--lov-ink); }
.sidebar-menu[b-96ktk9i5i3] .sidebar-menu-link:focus-visible { outline: 3px solid var(--lov-focus); outline-offset: 2px; }
/* /Components/SidebarMenuToggle.razor.rz.scp.css */
/* Let each page's isolated layout rules control placement and visibility. */
:where(.sidebar-menu-toggle)[b-0uo28buku2] {
display: inline-grid;
place-items: center;
box-sizing: border-box;
width: 3rem;
height: 3rem;
padding: 0;
border: 1px solid var(--lov-menu-line);
border-radius: 1rem;
background: var(--lov-surface);
color: var(--lov-menu-ink);
box-shadow: 0 0.35rem 0.9rem rgb(66 42 24 / 8%);
cursor: pointer;
transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.sidebar-menu-toggle:hover[b-0uo28buku2] {
background: var(--lov-paper);
border-color: var(--lov-menu-ink);
box-shadow: 0 0.4rem 1rem rgb(66 42 24 / 12%);
}
.sidebar-menu-toggle:focus-visible[b-0uo28buku2] {
outline: 3px solid var(--lov-focus);
outline-offset: 3px;
}
.sidebar-menu-toggle:active[b-0uo28buku2] {
box-shadow: 0 0.15rem 0.4rem rgb(66 42 24 / 8%);
}
svg[b-0uo28buku2] {
display: block;
}
.menu-bar[b-0uo28buku2] {
transition: width 160ms ease, x 160ms ease;
}
.menu-bar--sidebar[b-0uo28buku2] {
fill: var(--lov-menu-ink);
}
.menu-bar--page[b-0uo28buku2] {
fill: var(--lov-menu-coral);
}
.sidebar-menu-toggle[aria-expanded="false"] .menu-bar--sidebar[b-0uo28buku2] {
width: 4px;
}
.sidebar-menu-toggle[aria-expanded="false"] .menu-bar--page[b-0uo28buku2] {
x: 11px;
width: 13px;
}
@media (prefers-reduced-motion: reduce) {
.sidebar-menu-toggle[b-0uo28buku2],
.menu-bar[b-0uo28buku2] {
transition: none;
}
}
@media (forced-colors: active) {
.sidebar-menu-toggle[b-0uo28buku2] {
border-color: ButtonText;
box-shadow: none;
}
.menu-bar[b-0uo28buku2] {
fill: ButtonText;
}
}
/* /Components/Sigill.razor.rz.scp.css */
/* ═══════════════════════════════════════════════════════════
Sigill — LovOne ceremonial wax seal
Usage:
*/
.modal-content.user-settings-modal-content[b-hdhpip63hu] {
background-color: #FFFCFA; /* Match Reflection Modal background */
border-radius: 16px; /* Match Reflection Modal */
max-width: 600px; /* Wider for tabbed content */
width: 90%;
text-align: left; /* Default for form content */
box-shadow: 0 8px 25px rgba(100, 80, 70, 0.12); /* Match Reflection Modal */
display: flex;
flex-direction: column;
max-height: 90vh; /* Match Reflection Modal */
overflow: hidden; /* Important for fixed header/footer layout */
position: relative; /* For absolute positioning of close button */
}
/* Close button - identical to PrivateReflectionModal's .modal-close-icon-button */
.user-settings-modal-content .modal-close-icon-button[b-hdhpip63hu] {
position: absolute;
top: 18px;
right: 18px;
background: none;
border: none;
font-size: 1.5rem;
font-weight: 400;
color: #967f6b;
cursor: pointer;
line-height: 1;
padding: 5px;
transition: color 0.2s ease;
z-index: 10;
}
.user-settings-modal-content .modal-close-icon-button:hover[b-hdhpip63hu] {
color: #594a3a;
}
/* Modal Title - "User Settings" */
.user-settings-modal-title[b-hdhpip63hu] {
font-family: var(--font-serif);
font-size: 1.75rem; /* Match Reflection Modal title */
font-weight: 600;
color: #594a3a;
text-align: center;
margin: 0;
padding: 2rem 3rem 1rem 2rem; /* Added right padding for close button */
flex-shrink: 0;
background: #FFFCFA;
border-bottom: 1px solid #f0e1d0;
}
/* Tabs Container Styling */
.modal-tabs-container[b-hdhpip63hu] {
display: flex;
flex-wrap: wrap;
overflow-x: auto;
border-bottom: 1px solid #f0e1d0;
flex-shrink: 0; /* Prevent tabs from shrinking if content is small */
background: #FFFCFA;
padding: 0 2rem;
}
.modal-tab-button[b-hdhpip63hu] {
flex: 1; /* Tabs share width equally */
padding: 0.8rem 0.5rem;
background: none;
border: none;
border-bottom: 3px solid transparent; /* Underline for active tab */
cursor: pointer;
font-size: 0.9rem; /* Slightly smaller than main modal title */
font-weight: 500;
color: #967f6b;
transition: color 0.2s ease, border-color 0.2s ease;
font-family: var(--font-lato);
text-align: center;
white-space: nowrap; /* Prevent tab text from wrapping */
}
.modal-tab-button:hover[b-hdhpip63hu] {
color: #594a3a;
}
.modal-tab-button.active[b-hdhpip63hu] {
color: #594a3a; /* Darker text for active tab */
border-bottom-color: #fbbbad; /* Accent color underline */
font-weight: 600;
}
/* Body for Tab Content */
.user-settings-modal-body[b-hdhpip63hu] {
flex: 1;
overflow-y: auto; /* Allow tab content to scroll if it's too long */
padding: 1.5rem 2rem;
/* Enable smooth momentum scrolling on iOS/mobile */
-webkit-overflow-scrolling: touch;
}
/* Form Group Styling (Common for input fields within tabs) */
.form-group-settings[b-hdhpip63hu] {
margin-bottom: 1.3rem; /* Consistent spacing */
} .form-group-settings label[b-hdhpip63hu] {
display: block;
font-size: 0.85rem; /* Match Reflection Modal tags label */
font-weight: 500;
color: #967f6b;
margin-bottom: 0.5rem;
}
.form-group-settings input[type="text"][b-hdhpip63hu],
.form-group-settings input[type="email"][b-hdhpip63hu],
.form-group-settings input[type="date"][b-hdhpip63hu],
select[b-hdhpip63hu],
.user-settings-modal-body .form-select-styled[b-hdhpip63hu] { /* Scoped select style */
width: 100%;
padding: 12px 15px; /* Match Reflection Modal textarea padding */
font-size: 0.95rem; /* Match Reflection Modal textarea font-size */
border-radius: 10px; /* Match Reflection Modal textarea border-radius */
border: 1px solid #E0D8D1; /* Match Reflection Modal textarea border */
background-color: #fff;
color: #594a3a;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
line-height: 1.5; /* Added for better text display */
}
.form-group-settings input[type="text"]:focus[b-hdhpip63hu],
.form-group-settings input[type="email"]:focus[b-hdhpip63hu],
.form-group-settings input[type="date"]:focus[b-hdhpip63hu],
.user-settings-modal-body .form-select-styled:focus[b-hdhpip63hu] {
border-color: #fbbbad; /* Match Reflection Modal focus */
outline: none;
box-shadow: 0 0 0 3px rgba(251, 187, 173, 0.25); /* Match Reflection Modal focus */
} .form-group-settings input[readonly][b-hdhpip63hu] {
background-color: #f8f6f5; /* Slightly different bg for readonly */
cursor: default; /* Not not-allowed, just non-interactive */
color: #967f6b;
}
.form-group-settings .text-warning[b-hdhpip63hu] {
font-size: 0.8rem;
color: #c87800;
margin-top: 0.25rem;
}
.form-group-settings .text-warning a[b-hdhpip63hu] {
color: #c87800;
text-decoration: underline;
}
.btn-link-like[b-hdhpip63hu] { /* For links like "Change Password" */
background: none;
border: none;
color: #fbbbad;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
padding: 0.25rem 0;
text-decoration: none;
transition: color 0.2s ease;
}
.btn-link-like:hover[b-hdhpip63hu] {
color: #594a3a;
text-decoration: underline;
}
.static-info[b-hdhpip63hu] { /* For displaying non-editable info like subscription tier */
font-size: 0.95rem;
color: #594a3a;
padding: 10px 0; /* To visually align with inputs */
}
.static-info .upgrade-link[b-hdhpip63hu] {
margin-left: 0.75rem;
font-size: 0.85rem;
color: #fbbbad;
}
.soft-link[b-hdhpip63hu] {
color: #E0A96D;
text-decoration: underline;
font-weight: 500;
transition: opacity 0.2s ease;
cursor: pointer;
}
.soft-link:hover[b-hdhpip63hu] {
opacity: 0.8;
}
.modal-content.user-settings-modal-content.family-tree-settings-modal[b-hdhpip63hu] {
max-width: 860px;
}
.memory-friend-status[b-hdhpip63hu] {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.85rem 0.95rem;
margin: 0.75rem 0 1rem;
border: 1px solid rgba(190, 134, 76, 0.28);
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 250, 243, 0.98), rgba(246, 226, 202, 0.66));
color: #5d3a29;
}
.memory-friend-status__mark[b-hdhpip63hu] {
width: 1.75rem;
height: 1.75rem;
border-radius: 999px;
flex: 0 0 auto;
background: radial-gradient(circle at 50% 35%, #fff4d4 0 20%, #d7924d 22% 58%, #8a5b3f 60% 100%);
box-shadow: 0 0 0 4px rgba(215, 146, 77, 0.12);
}
.memory-friend-status__copy[b-hdhpip63hu] {
display: flex;
flex-direction: column;
gap: 0.15rem;
font-size: 0.9rem;
line-height: 1.35;
}
.memory-friend-status__copy strong[b-hdhpip63hu] {
font-size: 0.95rem;
color: #5d3a29;
}
.memory-friend-status__copy span[b-hdhpip63hu] {
color: #7a5a44;
}
.contact-section[b-hdhpip63hu] {
/* Softer, lighter divider to reduce strong sectioning */
border-top: 1px solid rgba(0,0,0,0.06);
padding-top: 20px;
margin-top: 20px;
display: flex;
align-items: flex-start;
gap: 15px;
}
.contact-section .LineItem-image[b-hdhpip63hu] {
flex-shrink: 0;
width: 64px;
height: 64px;
object-fit: contain;
}
.contact-section > div[b-hdhpip63hu] {
flex: 1;
}
.contact-section h3[b-hdhpip63hu] {
margin-top: 0;
margin-bottom: 10px;
}
.support-section[b-hdhpip63hu] {
/* Softer, lighter divider to reduce strong sectioning */
border-top: 1px solid rgba(0,0,0,0.06);
padding-top: 20px;
margin-top: 20px;
}
/* What Granny remembers */
.granny-memories-section[b-hdhpip63hu] {
border-top: 1px solid rgba(0,0,0,0.06);
padding-top: 20px;
margin-top: 20px;
}
.granny-memories-status[b-hdhpip63hu] {
font-size: 0.85rem;
color: #6f5c4a;
margin: 0;
}
.granny-memories-list[b-hdhpip63hu] {
list-style: none;
margin: 0 0 0.75rem 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-height: 240px;
overflow-y: auto;
}
.granny-memories-item[b-hdhpip63hu] {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 0.75rem;
border: 1px solid #f0e1d0;
background: #fff7f2;
border-radius: 10px;
padding: 0.55rem 0.75rem;
}
.granny-memories-text[b-hdhpip63hu] {
min-width: 0;
overflow-wrap: anywhere;
font-size: 0.85rem;
color: #594a3a;
line-height: 1.45;
}
.granny-memories-forget[b-hdhpip63hu],
.granny-memories-forget-all[b-hdhpip63hu] {
border: 1px solid #e3d2c0;
background: transparent;
color: #8a5a3b;
border-radius: 999px;
font-size: 0.78rem;
padding: 0.25rem 0.7rem;
cursor: pointer;
white-space: nowrap;
font-family: var(--font-sans);
}
.granny-memories-forget:hover[b-hdhpip63hu],
.granny-memories-forget-all:hover[b-hdhpip63hu] {
background: #fbeadd;
}
.granny-memories-forget:disabled[b-hdhpip63hu],
.granny-memories-forget-all:disabled[b-hdhpip63hu] {
opacity: 0.5;
cursor: default;
}
.granny-memories-forget-all[b-hdhpip63hu] {
font-size: 0.82rem;
padding: 0.4rem 0.9rem;
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
/* Granny remembers my journey */
.granny-journey-section[b-hdhpip63hu] {
border-top: 1px solid rgba(0,0,0,0.06);
padding-top: 20px;
margin-top: 20px;
}
.granny-journey-toggle[b-hdhpip63hu] {
display: flex;
align-items: flex-start;
gap: 0.9rem;
}
.granny-journey-toggle__copy[b-hdhpip63hu] {
display: flex;
flex-direction: column;
gap: 0.2rem;
}
.granny-journey-toggle__title[b-hdhpip63hu] {
font-size: 0.95rem;
font-weight: 600;
color: #594a3a;
}
.toggle-switch[b-hdhpip63hu] {
position: relative;
display: inline-flex;
flex-shrink: 0;
width: 44px;
height: 24px;
cursor: pointer;
margin-top: 0.15rem;
}
.toggle-switch input[b-hdhpip63hu] {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
margin: 0;
cursor: pointer;
}
.toggle-switch-track[b-hdhpip63hu] {
position: absolute;
inset: 0;
background: #e3d2c0;
border-radius: 999px;
transition: background-color 0.2s ease;
}
.toggle-switch-thumb[b-hdhpip63hu] {
position: absolute;
top: 2px;
left: 2px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,0.25);
transition: transform 0.2s ease;
}
.toggle-switch input:checked + .toggle-switch-track[b-hdhpip63hu] {
background: #E0A96D;
}
.toggle-switch input:checked + .toggle-switch-track .toggle-switch-thumb[b-hdhpip63hu] {
transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-switch-track[b-hdhpip63hu] {
outline: 2px solid #8a5a3b;
outline-offset: 2px;
}
.memory-limit-card[b-hdhpip63hu] {
border: 1px solid #f0e1d0;
background: #fff7f2;
border-radius: 12px;
padding: 0.9rem 1rem;
margin-top: 0.8rem;
text-align: left;
}
.memory-limit-title[b-hdhpip63hu] {
font-size: 0.9rem;
font-weight: 600;
color: #594a3a;
margin-bottom: 0.4rem;
}
.memory-limit-row[b-hdhpip63hu] {
display: flex;
justify-content: space-between;
gap: 1rem;
font-size: 0.85rem;
color: #6f5c4a;
}
.memory-limit-remaining[b-hdhpip63hu] {
font-weight: 600;
color: #8a5b52;
}
.memory-limit-hint[b-hdhpip63hu] {
margin-top: 0.5rem;
font-size: 0.78rem;
color: #967f6b;
line-height: 1.4;
}
.memory-continuity-card[b-hdhpip63hu] {
margin-top: 1.25rem;
}
.memory-continuity-text[b-hdhpip63hu] {
margin: 0.6rem 0 0 0;
font-size: 0.875rem;
line-height: 1.6;
color: #6c757d;
white-space: pre-line;
}
.auth-method-list[b-hdhpip63hu] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.auth-method-chip[b-hdhpip63hu] {
display: inline-flex;
align-items: center;
min-height: 2rem;
padding: 0.35rem 0.85rem;
border: 1px solid #ead8ca;
border-radius: 999px;
background: #fff7f2;
color: #6f5c4a;
font-size: 0.85rem;
font-weight: 600;
line-height: 1.2;
}
.life-profile-link-card[b-hdhpip63hu] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 1.25rem;
margin-top: 1.5rem;
padding: 1.2rem;
border: 1px solid #e5cfc2;
border-radius: 16px;
background: #fff7f2;
}
.life-profile-link-card__eyebrow[b-hdhpip63hu] {
color: #9a6d5d;
font-size: .72rem;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.life-profile-link-card h3[b-hdhpip63hu] {
margin: .25rem 0 0;
color: #594a3a;
font-family: var(--font-serif);
font-size: 1.25rem;
}
.life-profile-link-card p[b-hdhpip63hu] {
margin: .35rem 0 0;
color: #806f63;
line-height: 1.5;
}
.life-profile-link-card__button[b-hdhpip63hu] {
display: inline-flex;
min-height: 2.75rem;
align-items: center;
justify-content: center;
gap: .55rem;
padding: .65rem .9rem;
border: 1px solid #a87868;
border-radius: 10px;
background: transparent;
color: #6b493f;
cursor: pointer;
font: inherit;
font-weight: 700;
white-space: nowrap;
}
.life-profile-link-card__button:hover[b-hdhpip63hu] {
background: #fffdfa;
}
.life-profile-link-card__button:focus-visible[b-hdhpip63hu] {
outline: 3px solid #875e50;
outline-offset: 3px;
}
@media (max-width: 620px) {
.life-profile-link-card[b-hdhpip63hu] {
grid-template-columns: 1fr;
}
.life-profile-link-card__button[b-hdhpip63hu] {
width: 100%;
}
}
/* === Portrait Credits Section === */
.credits-section[b-hdhpip63hu] {
border-top: 1px solid rgba(0,0,0,0.06);
padding-top: 20px;
margin-top: 20px;
}
.credits-balance-card[b-hdhpip63hu] {
border: 1px solid #f0e1d0;
background: #fff7f2;
border-radius: 12px;
padding: 1rem 1.2rem;
text-align: left;
}
.credits-balance-header[b-hdhpip63hu] {
display: flex;
align-items: baseline;
gap: 0.4rem;
margin-bottom: 0.4rem;
}
.credits-count[b-hdhpip63hu] {
font-size: 1.6rem;
font-weight: 700;
color: #594a3a;
font-family: var(--font-serif);
line-height: 1;
}
.credits-label[b-hdhpip63hu] {
font-size: 0.9rem;
color: #967f6b;
font-weight: 500;
}
.credits-hint[b-hdhpip63hu] {
font-size: 0.8rem;
color: #967f6b;
margin: 0.3rem 0 0.8rem 0;
line-height: 1.4;
}
.credits-topup-link[b-hdhpip63hu] {
display: inline-block;
color: #E0A96D;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: color 0.2s ease, opacity 0.2s ease;
}
.credits-topup-link:hover[b-hdhpip63hu] {
color: #c9935a;
text-decoration: underline;
}
/* Footer Styling */
.user-settings-modal-footer[b-hdhpip63hu] {
flex-shrink: 0;
padding: 1.5rem 2rem;
border-top: 1px solid #f0e1d0;
background: #FFFCFA;
display: flex;
justify-content: flex-end; /* Align buttons to right */
gap: 0.75rem;
}
.user-settings-modal-footer.family-tree-footer[b-hdhpip63hu] {
align-items: center;
justify-content: space-between;
}
.family-tree-autosave-note[b-hdhpip63hu] {
color: #8a7464;
font-size: 0.9rem;
font-weight: 600;
line-height: 1.4;
margin-right: auto;
}
/* Buttons .btn-modal-cancel-refined and .btn-modal-save-refined reuse exact styles
from PrivateReflectionModal.razor.css for visual consistency */
.btn-modal-save-refined.disabled[b-hdhpip63hu],
.btn-modal-cancel-refined.disabled[b-hdhpip63hu] {
opacity: 0.5;
cursor: not-allowed;
}
.btn-modal-cancel-refined[b-hdhpip63hu] {
background-color: #E9E4E0;
color: #594a3a;
border: 1px solid #dcd6d4;
padding: 0.7rem 1.4rem;
border-radius: 10px;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s;
}
.btn-modal-cancel-refined:hover[b-hdhpip63hu] {
background-color: #d9d3cf;
}
.btn-modal-save-refined[b-hdhpip63hu] {
background-color: #fbbbad;
color: #38250d;
padding: 0.7rem 1.4rem;
border-radius: 10px;
border: none;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: background-color 0.2s ease;
}
.btn-modal-save-refined:hover[b-hdhpip63hu] {
background-color: #f9ac9c;
}
.btn-modal-save-refined.saving[b-hdhpip63hu] { /* For when IsSaving is true */
background-color: #f9ac9c !important; /* Keep a noticeable color but indicate processing */
cursor: wait;
}
.btn-modal-save-refined.saving .spinner-inline[b-hdhpip63hu] {
width: 1em;
height: 1em;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: #38250d;
border-radius: 50%;
display: inline-block;
animation: spin-b-hdhpip63hu 0.8s linear infinite;
margin-right: 0.5rem;
vertical-align: text-bottom;
}
.btn-modal-save-refined:disabled:not(.saving)[b-hdhpip63hu] { /* Standard HTML disabled, not during saving */
background-color: #e0e0e0 !important;
color: #a0a0a0 !important;
cursor: not-allowed;
}
@keyframes spin-b-hdhpip63hu {
to {
transform: rotate(360deg);
}
}
/* --- Hobby tags styling --- */
.tags-selection-area[b-hdhpip63hu] {
margin-top: 1rem;
width: 100%;
}
.tags-container[b-hdhpip63hu] {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-top: 1rem;
margin-bottom: 1rem;
}
.tag-chip[b-hdhpip63hu] {
background-color: transparent;
color: #967f6b;
border: 1px solid #E0D8D1;
border-radius: 15px;
padding: 0.35rem 0.9rem;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.tag-chip:hover[b-hdhpip63hu] {
border-color: #f9ac9c;
background-color: #FFF9F7;
}
.tag-chip.selected[b-hdhpip63hu] {
background-color: #f9ac9c;
color: #594a3a;
border-color: #fbbbad;
font-weight: 500;
}
.missing-trait-feedback[b-hdhpip63hu] {
text-align: center;
margin-top: 1.1rem;
font-size: 0.92em;
color: #9e8262;
}
.missing-trait-feedback .feedback-link[b-hdhpip63hu] {
color: #a4886c;
text-decoration: none;
transition: color 0.15s;
cursor: pointer;
}
.missing-trait-feedback .feedback-link:hover[b-hdhpip63hu],
.missing-trait-feedback .feedback-link:focus[b-hdhpip63hu] {
color: #fbbbad;
text-decoration: underline;
}
/* === Mobile Responsiveness === */
@media (max-width: 768px) {
.modal-content.user-settings-modal-content[b-hdhpip63hu] {
max-width: 95vw;
max-height: 95vh;
}
.user-settings-modal-title[b-hdhpip63hu] {
padding: 1.5rem 2.5rem 1rem 1.5rem; /* Adjusted right padding for close button */
font-size: 1.3rem;
}
.user-settings-modal-content .modal-close-icon-button[b-hdhpip63hu] {
top: 15px;
right: 15px;
font-size: 1.4rem;
}
.modal-tabs-container[b-hdhpip63hu] {
padding: 0 1.5rem;
}
.user-settings-modal-body[b-hdhpip63hu] {
padding: 1.5rem 1.5rem;
position: relative;
}
/* Add a subtle shadow/gradient above the footer to hint at scrollable content */
.user-settings-modal-body[b-hdhpip63hu]::after {
content: '';
position: sticky;
bottom: -1px;
left: 0;
right: 0;
height: 20px;
background: linear-gradient(to top, rgba(255, 252, 250, 0.9) 0%, rgba(255, 252, 250, 0.3) 50%, transparent 100%);
pointer-events: none;
z-index: 1;
margin: 0 -1.5rem; /* Compensate for body padding */
}
.user-settings-modal-footer[b-hdhpip63hu] {
padding: 1.5rem 1.5rem;
gap: 0.75rem;
/* Add a subtle shadow above the footer */
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
}
.user-settings-modal-footer button[b-hdhpip63hu] {
padding: 1rem 1.5rem;
font-size: 1rem;
}
}
@media (max-width: 480px) {
.modal-content.user-settings-modal-content[b-hdhpip63hu] {
width: calc(100vw - 2rem);
height: 100vh;
max-height: none;
max-width:none;
border-radius: 0;
}
.user-settings-modal-title[b-hdhpip63hu] {
padding: 1rem 2rem 0.8rem 1rem; /* Adjusted right padding for close button */
font-size: 1.2rem;
}
.user-settings-modal-content .modal-close-icon-button[b-hdhpip63hu] {
top: 12px;
right: 12px;
font-size: 1.3rem;
}
.modal-tabs-container[b-hdhpip63hu] {
padding: 0 1rem;
}
.user-settings-modal-body[b-hdhpip63hu] {
padding: 1rem;
position: relative;
}
/* Add a more prominent shadow/gradient above the footer on very small screens */
.user-settings-modal-body[b-hdhpip63hu]::after {
content: '';
position: sticky;
bottom: -1px;
left: 0;
right: 0;
height: 24px;
background: linear-gradient(to top, rgba(255, 252, 250, 0.95) 0%, rgba(255, 252, 250, 0.4) 60%, transparent 100%);
pointer-events: none;
z-index: 1;
margin: 0 -1rem; /* Compensate for body padding */
}
.user-settings-modal-footer[b-hdhpip63hu] {
padding: 1rem;
/* Enhanced shadow for small screens */
box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.08);
}
.user-settings-modal-footer button[b-hdhpip63hu] {
padding: 1rem 1.2rem;
font-size: 1rem;
}
}
/* Editorial application surfaces. */
.modal-content.user-settings-modal-content[b-hdhpip63hu] { background: var(--lov-surface); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 8px; margin-inline: auto; }
.user-settings-modal-title[b-hdhpip63hu], .modal-tabs-container[b-hdhpip63hu], .user-settings-modal-footer[b-hdhpip63hu] { background: var(--lov-surface); border-color: var(--lov-line); color: var(--lov-ink); }
.user-settings-modal-title[b-hdhpip63hu] { text-align: left; }
.modal-tab-button[b-hdhpip63hu] { color: var(--lov-muted); min-height: 44px; }
.modal-tab-button.active[b-hdhpip63hu], .modal-tab-button:hover[b-hdhpip63hu] { color: var(--lov-ink); border-bottom-color: var(--lov-green); }
.form-group-settings label[b-hdhpip63hu] { color: var(--lov-muted); }
.form-group-settings input[type="text"][b-hdhpip63hu], .form-group-settings input[type="email"][b-hdhpip63hu], .form-group-settings input[type="date"][b-hdhpip63hu], .user-settings-modal-body .form-select-styled[b-hdhpip63hu] { background: var(--lov-paper); color: var(--lov-ink); border-color: var(--lov-line); border-radius: 6px; }
.form-group-settings input[readonly][b-hdhpip63hu] { background: var(--lov-selected); color: var(--lov-muted); }
.btn-portal-cta.password-reset-link[b-hdhpip63hu], .btn-portal-cta.manage-subscription-btn[b-hdhpip63hu], .btn-modal-save-refined:not(:disabled)[b-hdhpip63hu] { background: var(--lov-green); color: var(--lov-on-green); border: 1px solid var(--lov-green); border-radius: 6px; box-shadow: none; }
.btn-portal-cta[b-hdhpip63hu] { display: block; padding: 12px 20px; min-height: 44px; text-align: center; text-decoration: none; font-weight: 600; }
.password-reset-link.disabled[b-hdhpip63hu] { opacity: .65; pointer-events: none; }
.btn-modal-cancel-refined[b-hdhpip63hu], .btn-modal-cancel-refined:hover[b-hdhpip63hu] { background: var(--lov-paper); color: var(--lov-ink); border: 1px solid var(--lov-line); border-radius: 6px; }
.user-settings-modal-body[b-hdhpip63hu]::after { display: none; }
@media(max-width:480px) { .modal-content.user-settings-modal-content[b-hdhpip63hu] { width: 100%; height: calc(100dvh - 2rem); max-height: calc(100dvh - 2rem); border-radius: 0; } }
/* Keep nested content legible on the selected application surface. */
.granny-memories-status[b-hdhpip63hu], .granny-memories-forget-all[b-hdhpip63hu], .granny-memories-forget-all:hover[b-hdhpip63hu], .subscription-help[b-hdhpip63hu] { color: var(--lov-muted); }
.user-settings-modal-content .modal-close-icon-button:hover[b-hdhpip63hu] { color: var(--lov-ink); }
.subscription-help[b-hdhpip63hu] { font-size: .875rem; text-align: center; margin-top: 10px; }
.settings-hint[b-hdhpip63hu] { color: var(--lov-muted); }
.granny-memories-forget-all:hover[b-hdhpip63hu] { background: var(--lov-selected); }
/* /Components/ViewAllLovedOnesModal.razor.rz.scp.css */
/* Scoped styles for ViewAllLovedOnesModal, modeled after ViewAllMemoriesModal */
.modal-overlay[b-3hv74k9a4z] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.visible[b-3hv74k9a4z] { opacity: 1; visibility: visible; }
.lovedones-modal[b-3hv74k9a4z] {
background: white;
border-radius: 12px;
width: 90%;
max-width: 1000px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.modal-header[b-3hv74k9a4z] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e0e0e0;
background: #f8f9fa;
border-radius: 12px 12px 0 0;
}
.modal-header h3[b-3hv74k9a4z] { margin: 0; color: #3A3A3A; font-size: 1.25rem; font-weight: 600; }
.close-btn[b-3hv74k9a4z] { background: none; border: none; font-size: 1.25rem; cursor: pointer; color: #666; padding: 0; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
.modal-body[b-3hv74k9a4z] { padding: 1rem 1.25rem; overflow-y: auto; flex: 1; }
.filters-section[b-3hv74k9a4z] { margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid #eaeaea; }
.filter-row[b-3hv74k9a4z] { display: flex; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.search-input[b-3hv74k9a4z] { flex: 1; padding: 0.6rem 0.8rem; border: 1px solid #ddd; border-radius: 8px; font-size: 0.95rem; }
.sort-label[b-3hv74k9a4z] { display: inline-flex; align-items: center; font-size: 0.95rem; color: #555; margin-right: 0.5rem; }
.sort-select[b-3hv74k9a4z] { padding: 0.5rem 0.7rem; border: 1px solid #ddd; border-radius: 8px; background: white; font-size: 0.95rem; }
.loading-state[b-3hv74k9a4z] { text-align: center; padding: 2rem 1rem; color: #666; }
.lovedones-list[b-3hv74k9a4z] {
display: grid;
gap: 1rem;
/* grid-template-columns: repeat(4, 1fr); */
align-items: start;
}
/* The component markup wraps cards in a .cards-grid — ensure it uses a 2-column grid as well */
.cards-grid[b-3hv74k9a4z] { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 992px) {
.cards-grid[b-3hv74k9a4z] { grid-template-columns: 1fr; }
}
/* Match Dashboard memory-card styles so modal cards look identical to dashboard */
.memory-card[b-3hv74k9a4z] {
background: #fff;
border-radius: 1.5rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.08);
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.memory-card:hover[b-3hv74k9a4z] {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
/* Recent Memory / Loved One card specifics */
.recent-memory-card[b-3hv74k9a4z] { background: #fff; }
.memory-card-image[b-3hv74k9a4z] {
height: 160px;
overflow: hidden;
background: var(--card-image-placeholder-bg);
display: flex;
align-items: center;
justify-content: center;
}
.memory-card-image img[b-3hv74k9a4z] { width: 100%; height: 100%; object-fit: cover; }
.memory-placeholder-image[b-3hv74k9a4z] { color: var(--text-light); font-size: 2rem; }
.memory-card-content[b-3hv74k9a4z] { padding: 1.5rem; display: flex; flex-direction: column; justify-content: space-between; }
.memory-loved-one[b-3hv74k9a4z] { font-size: 0.9rem; color: var(--accent); font-weight: 600; margin-bottom: 0.5rem; }
.memory-title[b-3hv74k9a4z] { font-size: 1.1rem; font-weight: 600; color: var(--text); margin-bottom: 0.5rem; line-height: 1.3; }
.memory-date[b-3hv74k9a4z] { font-size: 0.9rem; color: var(--text-light); margin-bottom: 1rem; }
.memory-actions[b-3hv74k9a4z] { display: flex; gap: 0.5rem; }
.btn-view-memory[b-3hv74k9a4z] {
background: var(--accent);
color: white;
border: none;
border-radius: 1.5rem;
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: background 0.2s;
}
.btn-view-memory:hover[b-3hv74k9a4z] { background: var(--accent-hover); }
@media (max-width: 768px) {
.cards-grid[b-3hv74k9a4z] { grid-template-columns: 1fr; }
}
.lovedone-card[b-3hv74k9a4z] { border: 1px solid #e0e0e0; border-radius: 12px; padding: 1rem; background: white; display: flex; flex-direction: column; min-height: 140px; }
.lovedone-header[b-3hv74k9a4z] { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.lovedone-header h4[b-3hv74k9a4z] { margin: 0; font-size: 1.05rem; color: #333; }
.lovedone-meta[b-3hv74k9a4z] { font-size: 0.85rem; color: #666; }
.lovedone-content[b-3hv74k9a4z] { flex: 1; }
.lovedone-notes[b-3hv74k9a4z] { margin: 0; color: #555; font-size: 0.95rem; }
.lovedone-actions[b-3hv74k9a4z] { display: flex; gap: 0.5rem; margin-top: 0.75rem; justify-content: flex-end; }
.btn-view[b-3hv74k9a4z], .btn-edit[b-3hv74k9a4z], .btn-select[b-3hv74k9a4z] { padding: 0.45rem 0.85rem; border-radius: 6px; border: none; cursor: pointer; font-weight: 600; font-size: 0.85rem; }
.btn-view[b-3hv74k9a4z] { background: #e3f2fd; color: #1976d2; }
.btn-edit[b-3hv74k9a4z] { background: #fff8e1; color: #f57c00; }
.btn-select[b-3hv74k9a4z] { background: #e8f5e9; color: #2e7d32; }
.btn-view:hover[b-3hv74k9a4z] { background: #bbdefb; transform: translateY(-1px); }
.btn-edit:hover[b-3hv74k9a4z] { background: #ffe0b2; transform: translateY(-1px); }
.btn-select:hover[b-3hv74k9a4z] { background: #c8e6c9; transform: translateY(-1px); }
.no-lovedones[b-3hv74k9a4z] { text-align: center; padding: 2rem 1rem; color: #666; }
.modal-actions[b-3hv74k9a4z] { display: flex; justify-content: center; padding-top: 1rem; border-top: 1px solid #f0f0f0; }
.btn-secondary-action[b-3hv74k9a4z] { background-color: transparent; color: #666; border: 1px solid #e5e5e5; padding: 10px 20px; border-radius: 8px; font-size: 0.95rem; cursor: pointer; }
@media (max-width: 768px) {
.lovedones-modal[b-3hv74k9a4z] { width: 95%; max-height: 95vh; margin: 1rem; }
.lovedones-list[b-3hv74k9a4z] { grid-template-columns: 1fr; }
.filter-row[b-3hv74k9a4z] { flex-direction: column; }
.lovedone-actions[b-3hv74k9a4z] { justify-content: stretch; }
.btn-view[b-3hv74k9a4z], .btn-edit[b-3hv74k9a4z], .btn-select[b-3hv74k9a4z] { flex: 1; }
}
/* Slightly tighten card content for grid layout */
.memory-card-content[b-3hv74k9a4z], .lovedone-card[b-3hv74k9a4z] { display: flex; flex-direction: column; justify-content: space-between; }
.memory-card-image img[b-3hv74k9a4z] { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; }
.memory-placeholder-image[b-3hv74k9a4z] { width: 64px; height: 64px; display:flex; align-items:center; justify-content:center; background:#f4f4f4; border-radius:8px; }
/* /Components/ViewAllMemoriesModal.razor.rz.scp.css */
/* Modal styles copied from VaultMessages.razor.css (UNSAVE CONFIRMATION MODAL STYLES)
Scoped to this component so the same classes render correctly when used here.
*/
[b-2mhyuuv09x] .modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
[b-2mhyuuv09x] .modal-overlay.visible {
opacity: 1;
visibility: visible;
}
[b-2mhyuuv09x] .modal-content.layered-modal {
background-color: rgb(255, 242, 236);
border-radius: 18px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
position: relative;
max-width: 450px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
padding: 24px;
}
[b-2mhyuuv09x] .modal-overlay.visible .modal-content {
transform: scale(1);
}
[b-2mhyuuv09x] .modal-header {
display: flex;
justify-content: flex-end;
padding: 0 0 16px 0;
margin-bottom: 8px;
}
[b-2mhyuuv09x] .modal-close-icon-button {
background: none;
border: none;
font-size: 24px;
color: #999;
cursor: pointer;
padding: 4px;
line-height: 1;
transition: color 0.2s ease;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
[b-2mhyuuv09x] .modal-close-icon-button:hover {
color: #666;
background-color: rgba(0, 0, 0, 0.05);
}
[b-2mhyuuv09x] .modal-body {
padding: 0 8px 24px 8px;
}
[b-2mhyuuv09x] .modal-title {
font-size: 24px;
font-weight: 600;
color: #2c2c2c;
margin: 0 0 16px 0;
text-align: center;
}
[b-2mhyuuv09x] .modal-subtitle {
font-size: 16px;
color: #666;
margin: 0 0 24px 0;
text-align: center;
line-height: 1.5;
}
[b-2mhyuuv09x] .message-preview-card {
background: #fafafa;
border: 1px solid #e5e5e5;
border-radius: 12px;
padding: 16px;
margin: 16px 0;
text-align: left;
}
[b-2mhyuuv09x] .preview-content {
position: relative;
}
[b-2mhyuuv09x] .preview-text {
font-size: 14px;
line-height: 1.5;
color: #4a4a4a;
margin: 0;
font-style: italic;
}
[b-2mhyuuv09x] .modal-actions {
display: flex;
gap: 12px;
justify-content: center;
padding-top: 24px;
margin-top: 24px;
border-top: 1px solid #f0f0f0;
}
[b-2mhyuuv09x] .btn-secondary-action {
background-color: transparent;
color: #666;
border: 1px solid #e5e5e5;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
[b-2mhyuuv09x] .btn-secondary-action:hover {
background-color: #f5f5f5;
border-color: #d1d1d1;
color: #555;
}
[b-2mhyuuv09x] .btn-danger-action {
background-color: #e53e3e;
color: white;
border: none;
padding: 12px 24px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
min-width: 100px;
}
[b-2mhyuuv09x] .btn-danger-action:hover {
background-color: #c53030;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(229, 62, 62, 0.3);
}
[b-2mhyuuv09x] .btn-danger-action:active {
transform: translateY(0);
}
@media (max-width: 768px) {
[b-2mhyuuv09x] .modal-content.layered-modal {
max-width: 95%;
margin: 0 auto;
padding: 20px;
}
[b-2mhyuuv09x] .modal-title {
font-size: 20px;
margin-bottom: 12px;
}
[b-2mhyuuv09x] .modal-subtitle {
font-size: 15px;
margin-bottom: 20px;
}
[b-2mhyuuv09x] .modal-actions {
flex-direction: column;
gap: 8px;
}
[b-2mhyuuv09x] .btn-secondary-action,
[b-2mhyuuv09x] .btn-danger-action {
width: 100%;
padding: 14px 24px;
}
}
.modal-overlay[b-2mhyuuv09x] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal-overlay.visible[b-2mhyuuv09x] {
opacity: 1;
visibility: visible;
}
.memories-modal[b-2mhyuuv09x] {
background: white;
border-radius: 12px;
width: 90%;
max-width: 1000px;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}
.modal-header[b-2mhyuuv09x] {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem 2rem;
border-bottom: 1px solid #e0e0e0;
background: #f8f9fa;
border-radius: 12px 12px 0 0;
}
.modal-header h3[b-2mhyuuv09x] {
margin: 0;
color: #3A3A3A;
font-size: 1.5rem;
font-weight: 600;
}
.close-btn[b-2mhyuuv09x] {
background: none;
border: none;
font-size: 1.5rem;
cursor: pointer;
color: #666;
padding: 0;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background-color 0.2s ease;
}
.close-btn:hover[b-2mhyuuv09x] {
background-color: #f0f0f0;
}
.modal-body[b-2mhyuuv09x] {
padding: 1.5rem 2rem;
overflow-y: auto;
flex: 1;
}
.filters-section[b-2mhyuuv09x] {
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e0e0e0;
}
.filter-row[b-2mhyuuv09x] {
display: flex;
gap: 1rem;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.filter-select[b-2mhyuuv09x], .filter-input[b-2mhyuuv09x] {
padding: 0.5rem 0.75rem;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 0.9rem;
background: white;
min-width: 150px;
}
.filter-select:focus[b-2mhyuuv09x], .filter-input:focus[b-2mhyuuv09x] {
outline: none;
border-color: #9CB0A3;
box-shadow: 0 0 0 2px rgba(156, 176, 163, 0.2);
}
.search-row[b-2mhyuuv09x] {
display: flex;
gap: 1rem;
}
.search-input[b-2mhyuuv09x] {
flex: 1;
padding: 0.75rem 1rem;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 1rem;
background: white;
}
.search-input:focus[b-2mhyuuv09x] {
outline: none;
border-color: #9CB0A3;
box-shadow: 0 0 0 2px rgba(156, 176, 163, 0.2);
}
.loading-state[b-2mhyuuv09x] {
text-align: center;
padding: 3rem 2rem;
color: #666;
}
.memories-list[b-2mhyuuv09x] {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
/* FIXED: Memory card now uses flexbox for proper tag positioning */
.memory-card[b-2mhyuuv09x] {
border: 1px solid #e0e0e0;
border-radius: 12px;
padding: 1.25rem;
background: white;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
min-height: 200px;
}
.memory-card:hover[b-2mhyuuv09x] {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
transform: translateY(-2px);
}
.memory-header[b-2mhyuuv09x] {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
gap: 1rem;
}
.memory-header h4[b-2mhyuuv09x] {
margin: 0;
color: #3A3A3A;
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
flex: 1;
}
.memory-date[b-2mhyuuv09x] {
font-size: 0.85rem;
color: #666;
white-space: nowrap;
background: #f0f0f0;
padding: 0.25rem 0.5rem;
border-radius: 4px;
}
.memory-image[b-2mhyuuv09x] {
margin-bottom: 1rem;
}
/* Constrain images shown in the memories list so they render as thumbnails
and don't overflow the card. Also target .uploaded-image (used by
CachedMediaDisplay) to ensure the CSS applies regardless of the img class. */
.memory-image img[b-2mhyuuv09x],
.memory-image .uploaded-image[b-2mhyuuv09x] {
max-width: 100%; /* don't exceed the card width */
max-height: 180px; /* cap thumbnail height */
width: auto;
height: auto;
object-fit: contain; /* preserve aspect ratio and fit inside bounds */
border-radius: 8px;
display: block;
}
/* Stronger, specific override for CachedMediaDisplay container to prevent
other global image styles from forcing full-size/fill behavior inside
the memories grid. */
.memory-image .cached-media-container img.uploaded-image[b-2mhyuuv09x] {
max-width: 100% !important;
max-height: 180px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
display: block !important;
}
/* FIXED: Memory content now grows to fill space and push footer to bottom */
.memory-content[b-2mhyuuv09x] {
flex: 1;
display: flex;
flex-direction: column;
}
.memory-content p[b-2mhyuuv09x] {
margin: 0 0 1rem 0;
color: #555;
line-height: 1.5;
font-size: 0.95rem;
flex: 1;
}
/* FIXED: Footer is now always at bottom with margin-top: auto */
.memory-footer[b-2mhyuuv09x] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1.5rem;
margin-top: auto;
padding-top: 1rem;
}
/* Container for tags with proper spacing */
.memory-tags[b-2mhyuuv09x] {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
flex: 1;
}
.loved-one-tag[b-2mhyuuv09x] {
background: #9CB0A3;
color: white;
padding: 0.375rem 0.75rem;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 500;
white-space: nowrap;
align-self: flex-start;
}
.memory-voice-indicator[b-2mhyuuv09x] {
display: inline-flex;
align-items: center;
gap: 0.3rem;
min-height: 1.65rem;
padding: 0.25rem 0.6rem;
background: #fff4eb;
border: 1px solid #ebcbb7;
border-radius: 999px;
color: #7b5144;
font-size: 0.75rem;
font-weight: 600;
line-height: 1.2;
white-space: nowrap;
}
.memory-voice-icon[b-2mhyuuv09x] {
width: 0.9rem;
height: 0.9rem;
flex: 0 0 auto;
}
.memory-voice-duration[b-2mhyuuv09x] {
color: #8d6759;
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.memory-actions[b-2mhyuuv09x] {
display: flex;
gap: 0.5rem;
align-self: flex-start;
}
.btn-view[b-2mhyuuv09x], .btn-chat[b-2mhyuuv09x], .btn-delete[b-2mhyuuv09x] {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.2s ease;
white-space: nowrap;
}
.btn-view[b-2mhyuuv09x] {
background: #e3f2fd;
color: #1976d2;
}
.btn-chat[b-2mhyuuv09x] {
background: #fff3e0;
color: #f57c00;
}
.btn-delete[b-2mhyuuv09x] {
background: #fff3e0;
color: #f57c00;
}
.btn-view:hover[b-2mhyuuv09x] {
background: #bbdefb;
transform: translateY(-1px);
}
.btn-chat:hover[b-2mhyuuv09x] {
background: #ffe0b2;
transform: translateY(-1px);
}
.btn-delete:hover[b-2mhyuuv09x] {
background: #ffe0b2;
transform: translateY(-1px);
}
.no-memories[b-2mhyuuv09x] {
text-align: center;
padding: 3rem 2rem;
color: #666;
}
.no-memories p[b-2mhyuuv09x] {
font-size: 1.1rem;
margin: 0;
}
.pagination[b-2mhyuuv09x] {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid #e0e0e0;
}
.btn-page[b-2mhyuuv09x] {
padding: 0.75rem 1.5rem;
border: 1px solid #ddd;
background: white;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
font-weight: 500;
}
.btn-page:hover:not(:disabled)[b-2mhyuuv09x] {
background: #9CB0A3;
color: white;
border-color: #9CB0A3;
}
.btn-page:disabled[b-2mhyuuv09x] {
opacity: 0.5;
cursor: not-allowed;
}
.page-info[b-2mhyuuv09x] {
color: #666;
font-size: 0.95rem;
font-weight: 500;
}
/* Category tag styling */
.category-tag[b-2mhyuuv09x] {
background: #e8f4fd;
color: #1976d2;
padding: 0.25rem 0.5rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
white-space: nowrap;
align-self: flex-start;
border: 1px solid #bbdefb;
display: flex;
align-items: center;
gap: 0.25rem;
}
.category-icon[b-2mhyuuv09x] {
font-size: 0.8rem;
}
/* Different colors for different categories */
.category-tag[data-category="Life"][b-2mhyuuv09x] {
background: #e8f5e8;
color: #2e7d32;
border-color: #c8e6c9;
}
.category-tag[data-category="Shared"][b-2mhyuuv09x] {
background: #fff3e0;
color: #f57c00;
border-color: #ffcc02;
}
.category-tag[data-category="Personal"][b-2mhyuuv09x] {
background: #f3e5f5;
color: #7b1fa2;
border-color: #ce93d8;
}
.category-tag[data-category="Everyday"][b-2mhyuuv09x] {
background: #e3f2fd;
color: #1976d2;
border-color: #bbdefb;
}
.category-quick-filters[b-2mhyuuv09x] {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
flex-wrap: wrap;
}
.quick-filter-label[b-2mhyuuv09x] {
font-size: 0.9rem;
color: #666;
font-weight: 500;
margin-right: 0.5rem;
}
.quick-filter-btn[b-2mhyuuv09x] {
padding: 0.5rem 1rem;
border: 1px solid #ddd;
background: white;
border-radius: 20px;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.2s ease;
white-space: nowrap;
}
.quick-filter-btn:hover[b-2mhyuuv09x] {
background: #f5f5f5;
}
.quick-filter-btn.active[b-2mhyuuv09x] {
background: #9CB0A3;
color: white;
border-color: #9CB0A3;
}
/* Tabs styling for Memories / Archive */
.memories-tabs[b-2mhyuuv09x] {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.tab-btn[b-2mhyuuv09x] {
padding: 0.35rem 0.75rem;
border-radius: 6px;
border: 1px solid #ddd;
cursor: pointer;
font-weight: 500;
background: white;
}
.tab-active[b-2mhyuuv09x] {
background: #1976d2;
color: white;
border-color: #1976d2;
}
.tab-inactive[b-2mhyuuv09x] {
background: white;
color: #333;
}
/* Archive button styling - matches the look in screenshots */
.btn-archive[b-2mhyuuv09x] {
padding: 0.5rem 0.9rem;
border: 2px solid #333;
border-radius: 6px;
background: transparent;
color: #111;
cursor: pointer;
font-weight: 600;
transition: all 0.12s ease;
}
.btn-archive:hover[b-2mhyuuv09x] {
background: #f5f5f5;
transform: translateY(-1px);
}
/* Restore and permanent delete button styling */
.btn-restore[b-2mhyuuv09x] {
padding: 0.45rem 0.85rem;
border: 1px solid #444;
border-radius: 6px;
background: white;
color: #222;
cursor: pointer;
font-weight: 600;
}
.btn-restore:hover[b-2mhyuuv09x] {
background: #f5f5f5;
transform: translateY(-1px);
}
.btn-delete-perm[b-2mhyuuv09x] {
padding: 0.45rem 0.9rem;
border: 2px solid #b71c1c;
border-radius: 6px;
background: transparent;
color: #b71c1c;
cursor: pointer;
font-weight: 700;
}
.btn-delete-perm:hover[b-2mhyuuv09x] {
background: rgba(183,28,28,0.06);
transform: translateY(-1px);
}
/* Soft button base to match View/Chat style */
.btn-soft[b-2mhyuuv09x] {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 0.85rem;
font-weight: 500;
transition: all 0.16s ease;
white-space: nowrap;
}
/* Archive: neutral soft button */
.btn-archive[b-2mhyuuv09x] {
background: #f5f5f5;
color: #222;
border: none;
font-weight: 500;
}
.btn-archive:hover[b-2mhyuuv09x] { background: #e9e9e9; transform: translateY(-1px); }
/* Restore: soft neutral like archive */
.btn-restore[b-2mhyuuv09x] {
background: #f5f5f5;
color: #222;
border: none;
font-weight: 500;
}
.btn-restore:hover[b-2mhyuuv09x] { background: #e9e9e9; transform: translateY(-1px); }
/* Permanently delete: soft red variant */
.btn-delete-perm[b-2mhyuuv09x] {
background: #ffebee; /* light red */
color: #b71c1c;
border: none;
font-weight: 500;
}
.btn-delete-perm:hover[b-2mhyuuv09x] { background: #ffd5d6; transform: translateY(-1px); }
/* Ensure these buttons adopt the same size/spacing as view/chat */
.memory-actions .btn-archive[b-2mhyuuv09x],
.memory-actions .btn-restore[b-2mhyuuv09x],
.memory-actions .btn-delete-perm[b-2mhyuuv09x] {
margin-left: 0.25rem;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
.memories-modal[b-2mhyuuv09x] {
width: 95%;
max-height: 95vh;
margin: 1rem;
}
.modal-header[b-2mhyuuv09x], .modal-body[b-2mhyuuv09x] {
padding: 1rem;
}
.filter-row[b-2mhyuuv09x] {
flex-direction: column;
}
.filter-select[b-2mhyuuv09x], .filter-input[b-2mhyuuv09x] {
min-width: unset;
}
.memories-list[b-2mhyuuv09x] {
grid-template-columns: 1fr;
gap: 1rem;
}
.memory-footer[b-2mhyuuv09x] {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.memory-tags[b-2mhyuuv09x] {
gap: 0.5rem;
}
.memory-actions[b-2mhyuuv09x] {
justify-content: stretch;
margin-top: 0.5rem;
}
.btn-view[b-2mhyuuv09x], .btn-chat[b-2mhyuuv09x], .btn-delete[b-2mhyuuv09x] {
flex: 1;
text-align: center;
}
.pagination[b-2mhyuuv09x] {
flex-direction: column;
gap: 1rem;
}
.category-quick-filters[b-2mhyuuv09x] {
justify-content: center;
}
.quick-filter-label[b-2mhyuuv09x] {
width: 100%;
text-align: center;
margin-bottom: 0.5rem;
}
}
/* In-place archive confirmation styles */
.memories-list .memory-card[b-2mhyuuv09x]{
transition: height 400ms ease, transform 300ms ease, opacity 400ms ease, padding 300ms ease;
overflow: hidden;
}
.memories-list .memory-card.confirming-archive .memory-image[b-2mhyuuv09x],
.memories-list .memory-card.confirming-archive .memory-content[b-2mhyuuv09x],
.memories-list .memory-card.confirming-archive .memory-footer[b-2mhyuuv09x]{
opacity: 0;
transform: translateY(-6px);
transition: opacity 350ms ease, transform 350ms ease;
}
.memories-list .memory-card.confirming-archive[b-2mhyuuv09x]{
padding-top:6px;
padding-bottom:6px;
}
.memory-confirmation[b-2mhyuuv09x]{
display:flex;
align-items:center;
justify-content:space-between;
width:100%;
gap:12px;
padding:8px 4px;
opacity:0;
transform: translateY(6px);
transition: opacity 350ms ease, transform 350ms ease;
}
.memory-card.confirming-archive .memory-confirmation[b-2mhyuuv09x]{
opacity:1;
transform: translateY(0);
}
.memory-confirmation .confirmation-message[b-2mhyuuv09x]{
font-size:0.95rem;
color:var(--bs-body-color);
}
.memory-confirmation .btn-undo[b-2mhyuuv09x]{
background:transparent;
border:1px solid rgba(0,0,0,0.08);
padding:6px 10px;
border-radius:6px;
color:var(--bs-primary);
cursor:pointer;
}
/* When the card finishes and is removed, parent layout will animate naturally; we ensure the height transition is smooth by relying on padding/overflow. */
/* /Components/WelcomeBackResumeModal.razor.rz.scp.css */
/* ========================================= */
/* Shared Modal Overlay Styling */
/* ========================================= */
.modal-overlay[b-u2h9j6vidd] {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* Ensure THIS is the background color applied for BOTH modals */
background-color: rgba(40, 25, 15, 0.55); /* Lighter overlay */
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0s linear 0.3s;
/* Base z-index - content inside modals will have higher values */
z-index: 1000;
}
.modal-overlay.visible[b-u2h9j6vidd] {
opacity: 1;
visibility: visible;
transition: opacity 0.3s ease;
}
/* --- Base Modal Content Styling (Common) --- */
.modal-content[b-u2h9j6vidd] {
position: relative; /* Needed for pseudo-elements/absolute positioning */
padding: 30px 45px;
border-radius: 18px;
max-width: 440px;
width: 90%;
text-align: center;
transform: scale(0.95);
transition: transform 0.3s ease;
z-index: 1002; /* Ensure content is above potential background layers */
}
.modal-overlay.visible .modal-content[b-u2h9j6vidd] {
transform: scale(1);
}
/* --- Layered Effect for Modal --- */
.modal-content.layered-modal[b-u2h9j6vidd] {
background-color: rgb(255, 242, 236); /* The top layer color */
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); /* Slightly stronger shadow for top layer */
}
/* The background layer */
.modal-content.layered-modal[b-u2h9j6vidd]::before {
content: '';
position: absolute;
/* Make it slightly larger than the parent */
top: -8px;
left: -8px;
right: -8px;
bottom: -8px;
/* Style the background layer */
background: rgba(255, 255, 255, 0.6); /* Semi-transparent white - adjust as needed */
border-radius: 22px; /* Slightly more rounded than the main content */
z-index: -1; /* Place it behind the main content */
}
/* ========================================= */
/* Welcome Back Resume Modal Styling */
/* ========================================= */
.welcome-back-modal[b-u2h9j6vidd] {
max-width: 500px;
}
/* --- Header Styling --- */
.welcome-back-header[b-u2h9j6vidd] {
margin-bottom: 25px;
}
.welcome-back-headline[b-u2h9j6vidd] {
font-size: 1.8rem;
font-weight: 600;
color: #5c4033;
margin-top: 0;
margin-bottom: 8px;
line-height: 1.25;
}
.welcome-back-subtext[b-u2h9j6vidd] {
font-size: 1rem;
color: #7d6c66;
margin-bottom: 0;
line-height: 1.4;
padding: 0 10px;
}
/* --- Progress Indicator Styling --- */
.creation-progress[b-u2h9j6vidd] {
margin: 25px 0;
padding: 20px 0;
border-top: 1px solid #e8e4e2;
border-bottom: 1px solid #e8e4e2;
}
.progress-steps[b-u2h9j6vidd] {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
}
.progress-step[b-u2h9j6vidd] {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.progress-step.completed[b-u2h9j6vidd] {
opacity: 1;
}
.progress-step.next[b-u2h9j6vidd] {
opacity: 0.7;
}
.step-icon[b-u2h9j6vidd] {
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 0.9rem;
background-color: #e8e4e2;
color: #7d6c66;
}
.progress-step.completed .step-icon[b-u2h9j6vidd] {
background-color: #4CAF50;
color: white;
}
.progress-step.next .step-icon[b-u2h9j6vidd] {
background-color: #ff9d7e;
color: white;
}
.step-label[b-u2h9j6vidd] {
font-size: 0.8rem;
color: #7d6c66;
font-weight: 500;
}
/* --- Modal Actions Styling --- */
.modal-actions[b-u2h9j6vidd] {
display: flex;
flex-direction: column;
gap: 12px;
}
.btn-primary-large[b-u2h9j6vidd],
.btn-secondary-large[b-u2h9j6vidd] {
padding: 16px 20px;
border-radius: 14px;
border: none;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
font-size: 1rem;
font-weight: 500;
}
.btn-primary-large[b-u2h9j6vidd] {
background-color: #ff9d7e;
color: white;
}
.btn-primary-large:hover[b-u2h9j6vidd] {
background-color: #ff855f;
transform: translateY(-1px);
}
.btn-secondary-large[b-u2h9j6vidd] {
background-color: #f7f5f4;
color: #5c4033;
border: 1px solid #e8e4e2;
}
.btn-secondary-large:hover[b-u2h9j6vidd] {
background-color: #edf2f7;
transform: translateY(-1px);
}
.button-content[b-u2h9j6vidd] {
display: flex;
align-items: center;
gap: 12px;
}
.button-icon[b-u2h9j6vidd] {
font-size: 1.2rem;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.button-text[b-u2h9j6vidd] {
flex: 1;
}
.button-title[b-u2h9j6vidd] {
font-size: 1rem;
font-weight: 600;
margin-bottom: 2px;
color: inherit;
}
.button-subtitle[b-u2h9j6vidd] {
font-size: 0.85rem;
opacity: 0.8;
color: inherit;
}
.tertiary-action[b-u2h9j6vidd] {
text-align: center;
margin-top: 15px;
}
.discard-link[b-u2h9j6vidd] {
color: #8f8886;
text-decoration: underline;
font-size: 0.85rem;
cursor: pointer;
transition: color 0.2s ease;
}
.discard-link:hover[b-u2h9j6vidd] {
color: #7d6c66;
}
/* --- Responsive Design --- */
@media (max-width: 480px) {
.modal-content[b-u2h9j6vidd] {
padding: 25px 30px;
max-width: 95%;
}
.welcome-back-headline[b-u2h9j6vidd] {
font-size: 1.6rem;
}
.progress-steps[b-u2h9j6vidd] {
gap: 20px;
}
.step-icon[b-u2h9j6vidd] {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
.step-label[b-u2h9j6vidd] {
font-size: 0.75rem;
}
.btn-primary-large[b-u2h9j6vidd],
.btn-secondary-large[b-u2h9j6vidd] {
padding: 14px 16px;
}
.button-content[b-u2h9j6vidd] {
gap: 10px;
}
.button-icon[b-u2h9j6vidd] {
font-size: 1.1rem;
width: 20px;
height: 20px;
}
}