/* Values come from docs/everlitpets/2026-10-22-everlitpets-design.pen (variables + 01 Home frames). */ @font-face { font-family: 'Cormorant Garamond'; font-style: normal; font-weight: 500 600; font-display: swap; src: url('/fonts/cormorant-garamond-latin.woff2') format('woff2'); } @font-face { font-family: 'Cormorant Garamond'; font-style: italic; font-weight: 500; font-display: swap; src: url('/fonts/cormorant-garamond-italic-latin.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/newsreader-latin.woff2') format('woff2'); } @font-face { font-family: 'Newsreader'; font-style: italic; font-weight: 400 600; font-display: swap; src: url('/fonts/newsreader-italic-latin.woff2') format('woff2'); } @font-face { font-family: 'Parisienne'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/parisienne-latin.woff2') format('woff2'); } :root { --font-size-11: 11px; --font-size-12: 12px; --font-size-13: 13px; --font-size-14: 14px; --font-size-15: 15px; --font-size-16: 16px; --font-size-17: 17px; --font-size-18: 18px; --font-size-19: 19px; --font-size-20: 20px; --font-size-21: 21px; --font-size-22: 22px; --font-size-23: 23px; --font-size-24: 24px; --font-size-25: 25px; --font-size-26: 26px; --font-size-28: 28px; --font-size-30: 30px; --font-size-32: 32px; --font-size-34: 34px; --font-size-36: 36px; --font-size-38: 38px; --font-size-40: 40px; --font-size-42: 42px; --font-size-44: 44px; --font-size-46: 46px; --font-size-48: 48px; --font-size-52: 52px; --font-size-56: 56px; --font-size-60: 60px; --font-size-64: 64px; --font-size-72: 72px; --font-size-92: 92px; --font-size-120: 120px; --space-0: 0px; --space-2: 2px; --space-3: 3px; --space-4: 4px; --space-5: 5px; --space-6: 6px; --space-7: 7px; --space-8: 8px; --space-9: 9px; --space-10: 10px; --space-11: 11px; --space-12: 12px; --space-13: 13px; --space-14: 14px; --space-16: 16px; --space-18: 18px; --space-20: 20px; --space-22: 22px; --space-24: 24px; --space-26: 26px; --space-28: 28px; --space-32: 32px; --space-34: 34px; --space-36: 36px; --space-40: 40px; --space-44: 44px; --space-48: 48px; --space-56: 56px; --space-64: 64px; --space-72: 72px; --space-80: 80px; --space-88: 88px; --space-96: 96px; --space-150: 150px; --space-240: 240px; --radius-2: 2px; --radius-4: 4px; --radius-5: 5px; --radius-6: 6px; --radius-8: 8px; --radius-10: 10px; --radius-12: 12px; --radius-13: 13px; --radius-14: 14px; --radius-16: 16px; --radius-20: 20px; --radius-22: 22px; --radius-24: 24px; --radius-26: 26px; --radius-28: 28px; --radius-32: 32px; --radius-99: 99px; --radius-160: 160px; --radius-200: 200px; --radius-999: 999px; --radius-card: 20px; --radius-glass: 22px; color-scheme: light dark; --bg: light-dark(#FCEFE4, #17100B); --surface: light-dark(#FFFFFF, #24180F); --blush: light-dark(#F8E4D4, #1F150E); --primary: light-dark(#AE492F, #EDB36C); --on-primary: light-dark(#FFFFFF, #2A1A0E); --text: light-dark(#2A1B11, #F6EBDD); --muted: light-dark(#5B4537, #CDB9A3); --border: light-dark(#F1D5C0, #4A3628); --glass: light-dark(#FFF5ECB3, #2A1D14B3); --menu-shadow: light-dark(#1C23401F, #1C23401F); --card: light-dark(#FFF5ECB8, #2A1D14D9); --forever: light-dark(#2A1B11, #F6EBDD); --on-forever: light-dark(#F6EBDD, #2A1B11); --amber-text: light-dark(#A9472A, #F2B866); --candle: light-dark(#F2A541, #F7C873); --danger: light-dark(#B3261E, #F2B8B5); --scrim: light-dark(#20170F66, #20170F66); --glass-border: light-dark(#FFFFFF99, #FFFFFF99); --on-avatar: light-dark(#FFF6EA, #FFF6EA); --avatar-1: light-dark(#C9825B, #C9825B); --avatar-2: light-dark(#8E6B4E, #8E6B4E); --avatar-3: light-dark(#B79A6A, #B79A6A); --avatar-4: light-dark(#7C5A48, #7C5A48); --hero-glow: light-dark(#FBE6DA, #2A1A10); --hero-glow-wide: light-dark(#FBE6DA, #17100B); --hero-scrim-1: light-dark(#FCEFE4E6, #17100BE6); --hero-scrim-2: light-dark(#FCEFE4D4, #17100BD7); --hero-scrim-3: light-dark(#FCEFE4AC, #17100BD4); --hero-scrim-4: light-dark(#FCEFE473, #17100B4E); --hero-scrim-5: light-dark(#FCEFE460, #17100B40); --hero-top-0: light-dark(#FCEFE400, #17100B); --hero-top-1: light-dark(#FCEFE400, #17100BF2); --hero-top-2: light-dark(#FCEFE400, #17100BD9); --hero-top-3: light-dark(#FCEFE400, #17100BF0); --hero-top-4: light-dark(#FCEFE400, #17100B99); --photo-shade: light-dark(#00000040, #00000040); --video-bg: light-dark(#000000, #000000); --lamp-glow: light-dark(#F6C98A66, #F6C98A66); --lamp-halo: light-dark(#F5B54A66, #F5B54A66); --switch-knob: light-dark(#FFFFFF, #FFFFFF); --gallery-bg: light-dark(#120C08, #120C08); --gallery-control: light-dark(#FFFFFF1F, #FFFFFF1F); --on-gallery: light-dark(#F6EBDD, #F6EBDD); --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Newsreader', Georgia, serif; --font-story: 'Newsreader', Georgia, serif; --font-script: 'Parisienne', cursive; --pad-x: var(--space-20); } /* The visitor's pick from the footer switch; without one the system decides. */ :root[data-scheme="light"] { color-scheme: light; } :root[data-scheme="dark"] { color-scheme: dark; } /* Pictures that exist in a day and a night version: the page carries both, the scheme hides one. */ @media (prefers-color-scheme: light) { :root:not([data-scheme="dark"]) .only-dark { display: none !important; } } @media (prefers-color-scheme: dark) { :root:not([data-scheme="light"]) .only-light { display: none !important; } } :root[data-scheme="light"] .only-dark, :root[data-scheme="dark"] .only-light { display: none !important; } @media (min-width: 900px) { :root { --pad-x: var(--space-64); } } *, *::before, *::after { box-sizing: border-box; } body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } h1, h2, h3, p, ol, ul { margin: 0; } h1 em, h2 em { font-style: italic; color: var(--amber-text); } ol, ul { padding: 0; list-style: none; } a { color: inherit; } img { display: block; max-width: 100%; } .icon { display: inline-flex; flex: none; } .icon svg { width: 100%; height: 100%; } .icon-16 { width: 16px; height: 16px; } .icon-18 { width: 18px; height: 18px; } .icon-24 { width: 24px; height: 24px; } .icon-28 { width: 28px; height: 28px; } [hidden] { display: none !important; } /* Pen components Button/Primary (RqQUh) and Button/Secondary (ujWbm). */ .btn { display: inline-flex; justify-content: center; align-items: center; gap: var(--space-8); padding: var(--space-13) var(--space-26); border-radius: var(--radius-999); font: 500 var(--font-size-17)/20px var(--font-body); text-decoration: none; } .btn-primary { background: var(--primary); color: var(--on-primary); } .btn.btn-secondary { box-shadow: inset 0 0 0 1px var(--text); background: var(--glass); color: var(--text); } .btn.btn-danger { box-shadow: inset 0 0 0 1px var(--danger); color: var(--danger); } .btn:disabled { opacity: 0.45; pointer-events: none; } .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* Pen component Button/Secondary · Small (BtnSm). */ .btn.btn-small { padding: var(--space-8) var(--space-16); font-size: var(--font-size-14); line-height: 18px; } .btn-block { width: 100%; } .btn-fill { flex: 1 1 0; min-width: 0; white-space: nowrap; } .btn.btn-google { gap: var(--space-10); } .btn-mark { flex: none; } .nav { display: flex; justify-content: space-between; align-items: center; padding: var(--space-10) var(--pad-x); } .logo { display: flex; flex: none; align-items: center; text-decoration: none; } .logo img { width: auto; height: 30px; } .nav-links, .nav-right { display: none; align-items: center; gap: var(--space-36); } .nav-right { gap: var(--space-12); } .nav-links a, .nav-sign-in { font: 400 var(--font-size-16)/1.2 var(--font-body); color: var(--text); text-decoration: none; } .nav-sign-in { padding: var(--space-13) var(--space-20); border-radius: var(--radius-999); background: var(--glass); } /* Pen Nav/Desktop · Signed in (MkG4O), Nav/Memorial · Signed in (lmVAq / UBrYz) and Menu/Account (u6UdH). */ .account-menu { position: relative; } .account-avatar { display: flex; flex: none; justify-content: center; align-items: center; width: 32px; height: 32px; border-radius: var(--radius-999); background: var(--primary); color: var(--on-primary); font: 600 var(--font-size-14)/1 var(--font-body); } /* Trimmed to the capital's height, so the letter sits in the middle of the circle, not the line box. */ .account-initial { display: block; text-box: trim-both cap alphabetic; } summary.account-avatar { list-style: none; cursor: pointer; } summary.account-avatar::-webkit-details-marker { display: none; } summary.account-avatar:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } .nav-right .account-avatar { width: 36px; height: 36px; font-size: var(--font-size-15); } .account-panel { position: absolute; top: calc(100% + var(--space-8)); right: 0; z-index: 20; width: 256px; padding: var(--space-6) 0; border: 1px solid var(--border); border-radius: var(--radius-12); background: var(--surface); box-shadow: 0 6px 18px var(--menu-shadow); } .account-who { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin: 0; } .account-panel .account-who { padding: var(--space-8) var(--space-16) var(--space-10); border-bottom: 1px solid var(--border); } .account-caption { font: 400 var(--font-size-13)/1.2 var(--font-body); color: var(--muted); } .account-email { overflow: hidden; font: 600 var(--font-size-15)/1.2 var(--font-body); color: var(--text); text-overflow: ellipsis; white-space: nowrap; } .account-items { padding-top: var(--space-6); } .account-items form { margin: 0; } .account-item { display: flex; align-items: center; gap: var(--space-12); width: 100%; height: 40px; padding: 0 var(--space-16); border: 0; background: none; font: 400 var(--font-size-15)/1.2 var(--font-body); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; } .account-item:hover, .account-item:focus-visible { outline: none; background: var(--glass); } .account-icon { color: var(--muted); } .nav-menu-open, .nav-menu-close { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: calc(-1 * var(--space-10)); padding: 0; border: 0; background: none; color: var(--text); cursor: pointer; } dialog.nav-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--bg); color: var(--text); } dialog.nav-menu[open] { display: flex; flex-direction: column; } dialog.nav-menu::backdrop { background: var(--bg); } html:has(#site-menu[open]) { overflow: hidden; } .nav-menu-bar { display: flex; flex: none; justify-content: space-between; align-items: center; height: 44px; padding: 0 var(--space-20); margin-top: var(--space-10); } .nav-menu-links { display: flex; flex-direction: column; padding: var(--space-16) var(--space-22) 0; } .nav-menu-links a, .nav-menu-item { display: flex; align-items: center; height: 64px; border-bottom: 1px solid var(--border); font: 500 var(--font-size-30)/1.2 var(--font-display); color: var(--text); text-decoration: none; } .nav-menu-item { margin: 0 var(--space-22); } .nav-menu-account { padding: var(--space-28) var(--space-22) 0; } .nav-menu-account-card { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-16); background: var(--surface); } .nav-menu-account-card form { margin: 0; } .nav-menu-account-who { display: flex; align-items: center; gap: var(--space-12); margin: 0; padding: var(--space-14) var(--space-16); } .nav-menu-account-item { display: flex; align-items: center; width: 100%; height: 53px; padding: 0 var(--space-16); border: 0; border-top: 1px solid var(--border); background: none; font: 500 var(--font-size-17)/1.2 var(--font-body); color: var(--text); text-align: left; text-decoration: none; cursor: pointer; } .nav-menu-bottom { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); margin-top: auto; padding: 0 var(--space-22) var(--space-34); } .nav-menu-note { margin: 0; font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } @media (min-width: 1100px) { .nav { padding: var(--space-24) var(--pad-x); } .nav .logo img { height: 40px; } .nav-links, .nav-right { display: flex; } .nav-menu-open, dialog.nav-menu, dialog.nav-menu[open] { display: none; } } .section-title { font: 500 var(--font-size-28)/1.2 var(--font-display); } @media (min-width: 900px) { .section-title { font-size: var(--font-size-40); } } /* Home (Pen "01 Home D · Everlit": cVrFb / kP9R0 desktop, j6ZRW / Gd4lG mobile). */ body.nav-overlay { background: linear-gradient(180deg, var(--hero-glow) 0, var(--bg) 25%); } .home-hero { display: flex; flex-direction: column; } .home-hero-copy { display: flex; flex-direction: column; gap: var(--space-18); max-width: 640px; padding: var(--space-12) var(--space-22) var(--space-4); } .home-title { font: 500 var(--font-size-46)/1 var(--font-display); letter-spacing: -1px; } .home-sub { font: 400 var(--font-size-17)/1.45 var(--font-body); color: var(--muted); } .home-ctas { display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-6); } .home-note { font: 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); text-align: center; } .home-stage { position: relative; display: flex; justify-content: center; padding: var(--space-150) var(--space-44) var(--space-44); } .home-stage-photo, .home-stage-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .home-stage::before { content: ''; position: absolute; z-index: 1; inset: 0; background: linear-gradient(180deg, var(--bg) 0, transparent 28%, transparent 85%, var(--bg) 100%); } /* Pen cards: solid · glass · tint · forever; corners from --radius-card / --radius-glass. */ .card { border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); } .card-glass { box-shadow: inset 0 0 0 1px var(--glass-border); border-radius: var(--radius-glass); background: var(--card); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .card-tint { background: var(--blush); box-shadow: none; } .card-forever { box-shadow: none; background: var(--forever); color: var(--on-forever); } a.card:hover { box-shadow: inset 0 0 0 1px var(--primary); } a.card:focus-visible { box-shadow: inset 0 0 0 1px var(--primary); } .candle-art { display: block; flex: none; } .example-card { position: relative; z-index: 2; display: flex; flex-direction: column; gap: var(--space-10); width: 240px; padding: var(--space-12); } .example-photo { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius-12); } .example-info { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-6); } .example-name { font: 500 var(--font-size-30)/1 var(--font-display); } .example-meta { font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .example-stat { display: flex; align-items: center; gap: var(--space-6); font: 400 var(--font-size-14)/1.2 var(--font-body); } .example-candles { padding: var(--space-4) 0 var(--space-2); } .example-candles .candle-art { width: 20px; height: 20px; } .example-messages, .example-quote { display: none; } .example-visitors { display: flex; align-items: center; } .avatar, .avatar-more { display: inline-flex; justify-content: center; align-items: center; height: 28px; border-radius: var(--radius-14); font: 600 var(--font-size-12)/1 var(--font-body); } .avatar { width: 28px; border: 2px solid var(--bg); color: var(--on-avatar); } .avatar + .avatar, .avatar + .avatar-more { margin-left: calc(-1 * var(--space-7)); } .avatar-more { padding: 0 var(--space-8); border: 1px solid var(--border); background: var(--bg); color: var(--muted); font-weight: 400; } .keep-close { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-56) var(--pad-x) var(--space-48); } .keep-close-text, .birthdays-text { display: contents; } .keep-close-head, .birthdays-head { display: flex; flex-direction: column; gap: var(--space-14); } .keep-close-lead, .birthdays-lead { order: 1; font: 400 var(--font-size-17)/1.5 var(--font-body); color: var(--muted); } .keep-close-photo { order: 2; width: 100%; height: 260px; object-fit: cover; border-radius: var(--radius-20); } .features { order: 3; display: flex; flex-direction: column; gap: var(--space-20); } .eyebrow { font: 600 var(--font-size-11)/1.2 var(--font-body); letter-spacing: 2.4px; color: var(--amber-text); } .keep-close-title, .birthdays-title { font: 500 var(--font-size-32)/1.08 var(--font-display); } .feature { display: flex; gap: var(--space-14); } .feature-icon { display: flex; flex: none; justify-content: center; align-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-20); background: var(--blush); color: var(--amber-text); } .feature-copy { display: flex; flex-direction: column; gap: var(--space-4); } .feature-title { font: 600 var(--font-size-17)/1.3 var(--font-body); } .feature-body { font: 400 var(--font-size-15)/1.5 var(--font-body); color: var(--muted); } .birthdays { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-8) var(--pad-x) var(--space-48); } .birthdays-remind { order: 2; } .pricing { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-56) var(--space-20); background: var(--blush); } .pricing-title { font: 500 var(--font-size-34)/1.08 var(--font-display); } .tiers { display: flex; flex-direction: column; gap: var(--space-24); } .tier { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); } .tier-name { font: 600 var(--font-size-14)/1.2 var(--font-body); letter-spacing: 1.5px; } .tier-price { display: flex; align-items: flex-end; gap: var(--space-8); } .tier-amount { font: 500 var(--font-size-48)/1 var(--font-display); } .tier-note { font: 400 var(--font-size-15)/1.2 var(--font-body); } .tier-free .tier-name, .tier-free .tier-note { color: var(--muted); } .tier-items { display: flex; flex-direction: column; gap: var(--space-10); } .tier-items li { display: flex; align-items: flex-start; gap: var(--space-10); font: 400 var(--font-size-16)/1.25 var(--font-body); } .tier-items .icon { width: 16px; height: 16px; margin-top: var(--space-2); color: var(--amber-text); } .tier-forever .tier-items .icon { color: var(--primary); } @media (min-width: 900px) { body.nav-overlay { background: var(--bg); } .home-hero-copy { padding-inline: var(--pad-x); } .pricing { align-items: center; gap: var(--space-40); padding: var(--space-96) var(--space-64); } .pricing-title { font-size: var(--font-size-48); line-height: 1.2; text-align: center; } .tiers { flex-direction: row; align-items: stretch; } .tier-items { flex: 1; } .tier { width: 400px; gap: var(--space-20); padding: var(--space-36); } .tier-name { font-size: var(--font-size-15); } .tier-price { gap: var(--space-10); padding-bottom: var(--space-4); } .tier-amount { font-size: var(--font-size-60); } .tier-note { font-size: var(--font-size-16); } .tier-items { gap: var(--space-12); padding: var(--space-4) 0 var(--space-8); } .tier-items li { font-size: var(--font-size-17); } .tier-items .icon { width: 18px; height: 18px; margin-top: var(--space-3); } } @media (min-width: 1100px) { body.nav-overlay .nav { position: absolute; top: 0; left: 0; right: 0; z-index: 2; } .home-hero { position: relative; height: 900px; overflow: hidden; } .home-hero-copy { position: absolute; z-index: 2; top: 170px; left: var(--pad-x); width: 600px; max-width: none; gap: var(--space-26); padding: 0; } .home-title { font-size: var(--font-size-92); line-height: 0.98; } .home-sub { max-width: 470px; font-size: var(--font-size-21); } .home-ctas { flex-direction: row; gap: var(--space-16); padding-top: var(--space-8); } .home-note { font-size: var(--font-size-15); text-align: left; } .home-stage { position: absolute; inset: 0; display: block; padding: 0; } .home-stage::before { inset: 0 auto 0 0; width: 860px; background: linear-gradient(90deg, var(--hero-scrim-1) 0, var(--hero-scrim-2) 52%, var(--hero-scrim-3) 62%, var(--hero-scrim-4) 76%, var(--hero-scrim-5) 80%, transparent 100%); } .home-stage::after { content: ''; position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(180deg, transparent, var(--bg)); } /* Pen kpCTx: photo on the left, everything about Maple on the right. */ .example-card { position: absolute; z-index: 2; top: 430px; left: 53.125%; flex-direction: row; align-items: center; width: 560px; gap: var(--space-20); padding: var(--space-14); } .example-photo { flex: none; width: 262px; border-radius: var(--radius-14); } .example-info { flex: 1; justify-content: center; gap: var(--space-8); padding: var(--space-8) var(--space-4) var(--space-4) 0; } .example-name { font-size: var(--font-size-32); } .example-meta { font-size: var(--font-size-16); } .example-stat { gap: var(--space-8); font-size: var(--font-size-15); } .example-candles { padding: var(--space-4) 0 0; } .example-candles .candle-art { width: 24px; height: 24px; } .example-messages { display: flex; } /* Same disc as candle.svg, so the two counts read as a pair. */ .example-stat-icon { display: flex; flex: none; justify-content: center; align-items: center; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle 14.4px at 50% 38%, #FFFAF0 0, #FFEFD2 45%, #F8C887 100%); box-shadow: inset 0 0 0 0.6px rgb(233 160 111 / 0.55); } .example-stat-icon .icon { width: 14px; height: 14px; color: #7E3420; } .avatar, .avatar-more { height: 32px; border-radius: var(--radius-16); font-size: var(--font-size-14); } .avatar { width: 32px; } .avatar + .avatar, .avatar + .avatar-more { margin-left: calc(-1 * var(--space-8)); } .avatar-more { padding: 0 var(--space-10); font-size: var(--font-size-13); } .keep-close { flex-direction: row; align-items: center; gap: var(--space-72); padding: var(--space-40) var(--pad-x) var(--space-96); } .keep-close-photo { order: 0; flex: none; width: 520px; height: 400px; border-radius: var(--radius-24); } .keep-close-text, .birthdays-text { display: flex; flex: 1; flex-direction: column; gap: var(--space-22); } .keep-close-head, .birthdays-head { display: contents; } .eyebrow { font-size: var(--font-size-13); } .keep-close-title, .birthdays-title { font-size: var(--font-size-52); } .keep-close-lead, .birthdays-lead { max-width: 470px; font-size: var(--font-size-19); } .features { display: none; } .birthdays { flex-direction: row; align-items: center; gap: var(--space-72); padding: 0 var(--pad-x) var(--space-96); } .birthdays-remind { flex: none; width: 420px; } } @media (min-width: 1100px) { .home-stage-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--hero-top-1) 0, var(--hero-top-2) 10%, transparent 22%); } .home-stage-photo::before { content: ''; position: absolute; z-index: 1; top: 0; left: 0; right: 0; height: 230px; background: linear-gradient(180deg, var(--hero-top-0) 0, var(--hero-top-3) 40%, var(--hero-top-4) 70%, transparent 100%); } .example-quote { display: block; width: 220px; font: 400 var(--font-size-24)/1.3 var(--font-script); color: var(--amber-text); text-align: center; transform: rotate(4deg); } } @media (min-width: 900px) { body.nav-overlay { background: linear-gradient(180deg, var(--hero-glow-wide) 0, var(--bg) 25%); } } /* Footers get their own layer and whole-pixel line heights: the compositor snaps the layer to whole pixels, so a footer renders pixel-identically however tall the page above it is. */ .footer, .mem-footer { will-change: transform; } .footer { display: flex; flex-direction: column; gap: var(--space-16); margin-top: auto; padding: var(--space-32) var(--pad-x) var(--space-40); border-top: 1px solid var(--border); font: 400 var(--font-size-14)/18px var(--font-body); color: var(--muted); } .footer-links { display: flex; flex-wrap: wrap; gap: var(--space-18); } .scheme-switch { display: flex; align-self: flex-start; gap: var(--space-2); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-999); } .scheme-switch button { padding: var(--space-5) var(--space-12); border: 0; border-radius: var(--radius-999); background: transparent; color: var(--muted); font: 400 var(--font-size-13)/16px var(--font-body); cursor: pointer; } .scheme-switch button[aria-pressed="true"] { background: var(--blush); color: var(--text); } .footer-links a { text-decoration: none; } @media (min-width: 900px) { .footer { flex-direction: row; justify-content: space-between; align-items: center; padding: var(--space-40) var(--pad-x); font-size: var(--font-size-15); line-height: 20px; } .footer-links { gap: var(--space-28); } } /* Create flow (Pen "02a Create · Name"): column 600 on desktop, gap 20/24. */ .flow { display: flex; justify-content: center; padding: var(--space-16) var(--pad-x) var(--space-40); } .flow-column { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; max-width: 600px; } .progress { display: flex; flex-direction: column; gap: var(--space-10); } .progress-step { font: 600 var(--font-size-13)/1.2 var(--font-body); color: var(--primary); } .progress-bar { display: flex; gap: var(--space-6); } .progress-bar span { flex: 1; height: 4px; border-radius: var(--radius-2); background: var(--border); } .progress-bar span.on { background: var(--primary); } .flow-title { font: 500 var(--font-size-40)/1.05 var(--font-display); letter-spacing: -0.5px; } .flow-lead { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .field { display: flex; flex-direction: column; gap: var(--space-8); margin: 0; padding: 0; border: 0; min-width: 0; text-align: left; } .field-label { padding: 0; font: 500 var(--font-size-15)/1.2 var(--font-body); } .field-optional { font: 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); } legend.field-label { margin-bottom: var(--space-8); } /* legend sits outside the fieldset flex gap */ .input { height: 52px; padding: var(--space-14) var(--space-16); border: 0; box-shadow: inset 0 0 0 1px var(--border); border-radius: var(--radius-12); background: var(--surface); color: var(--text); font: 400 var(--font-size-16)/1.2 var(--font-body); } .input:focus { outline: 2px solid var(--primary); outline-offset: 1px; } .field-error { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--danger); } .input[aria-invalid="true"] { box-shadow: inset 0 0 0 2px var(--danger); } .check { display: flex; gap: var(--space-10); align-items: flex-start; font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--text); } .check input { flex: none; width: 18px; height: 18px; margin: var(--space-2) 0 0; } .chips { display: flex; flex-wrap: wrap; gap: var(--space-8); } .chip input { position: absolute; opacity: 0; pointer-events: none; } .chip span { display: inline-block; padding: var(--space-10) var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-999); background: var(--surface); font: 600 var(--font-size-15)/1.2 var(--font-body); cursor: pointer; } .chip input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .chip input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } button.btn { border: 0; cursor: pointer; } /* Pen "02b Create · Photos": grid gap 10, tiles 104/180 high; drop zone p[28,20] g8. */ .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); margin: 0; padding: 0; list-style: none; } .photo-grid img { display: block; width: 100%; height: 104px; object-fit: cover; border-radius: var(--radius-14); } .dropzone-pick { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-28) var(--space-20); border: 2px solid var(--border); border-radius: var(--radius-16); background: var(--surface); text-align: center; cursor: pointer; } .dropzone-pick:focus-within { outline: 2px solid var(--primary); outline-offset: 2px; } .dropzone-pick svg { width: 28px; height: 28px; color: var(--primary); } .dropzone-title { font: 600 var(--font-size-16)/1.2 var(--font-body); } .dropzone-hint { font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); } .dropzone-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropzone noscript .btn { margin-top: var(--space-10); } .video-step { display: flex; flex-direction: column; gap: var(--space-12); } .video-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-8); } .video-item video { display: block; width: 100%; max-height: 420px; border-radius: var(--radius-14); background: var(--video-bg); } /* Pen "02c Create · Dates & story": dates row g12, story box h180, hint and note 13 muted. */ .field-row { display: flex; gap: var(--space-12); } .field-row .field { flex: 1; } .input-story { height: 180px; resize: vertical; line-height: 1.45; } .input-gift { height: 88px; resize: vertical; line-height: 1.45; } .field-hint { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .flow-note { font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); } /* Pen "02d Create · Publish (email)": 56px blush badge, 26px mail icon. */ .flow-badge { display: flex; justify-content: center; align-items: center; width: 56px; height: 56px; border-radius: var(--radius-28); background: var(--blush); color: var(--primary); } .flow-badge svg { width: 26px; height: 26px; } .flow-note a { color: inherit; } .input::placeholder { color: var(--muted); } .form-error { font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--danger); } .flow-skip { align-self: flex-start; font: 500 var(--font-size-15)/1.2 var(--font-body); color: var(--muted); text-decoration: none; } /* Pen 02a–02e: a photo panel with the live preview card; a strip above the form on phones. */ .flow-preview { position: relative; order: -1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; width: 100%; max-width: 600px; height: 150px; padding: var(--space-12); border-radius: var(--radius-24); } .flow-preview-bg, .flow-preview-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .flow-preview::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, transparent 55%, var(--photo-shade) 100%); } .preview-card { position: relative; z-index: 1; display: none; flex-direction: column; gap: var(--space-12); width: 290px; padding: var(--space-14); } .preview-photo { width: 100%; border-radius: var(--radius-14); } .preview-info { display: flex; flex-direction: column; gap: var(--space-6); padding-top: var(--space-8); } /* React islands wrap server html without adding a box of their own. */ [data-island] { display: contents; } .preview-name { font: 500 var(--font-size-32)/1 var(--font-display); overflow-wrap: anywhere; } .preview-meta { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--muted); } .preview-caption { font: italic 400 var(--font-size-13)/1.2 var(--font-body); color: var(--muted); } /* Pen TEX5D "Maple card": a published page's own cover on phones; the cover fills the panel on desktop. */ .flow-page-card { display: none; } .flow-preview-page { height: auto; padding: 0; overflow: visible; border-radius: 0; } .flow-preview-page::after, .flow-preview-page .flow-preview-bg { display: none; } .flow-preview-page .flow-page-card { display: flex; align-items: center; gap: var(--space-16); width: 100%; padding: var(--space-12); border-radius: var(--radius-20); background: var(--card); box-shadow: inset 0 0 0 1px var(--border); } .flow-page-cover { flex: none; width: 80px; border-radius: var(--radius-14); } .flow-page-info { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .flow-page-name { font: 500 var(--font-size-26)/1 var(--font-display); overflow-wrap: anywhere; } .flow-page-meta { font: 400 var(--font-size-14)/1.3 var(--font-body); color: var(--muted); } .flow-page-counts { display: flex; align-items: center; gap: var(--space-6); padding-top: var(--space-4); font: 400 var(--font-size-14)/1.3 var(--font-body); } .flow-page-counts .candle-art { width: 18px; height: 18px; } @media (max-width: 1099px) { .flow { flex-direction: column; align-items: center; gap: var(--space-20); } } @media (min-width: 900px) { .flow-column { gap: var(--space-24); } .photo-grid img { height: 180px; } } @media (min-width: 1100px) { .flow { align-items: flex-start; gap: var(--space-72); padding: var(--space-56) var(--pad-x) var(--space-96); } .flow-column { flex: none; width: 540px; max-width: none; } .flow-title { font-size: var(--font-size-56); } .flow-preview { order: 0; flex: 1; max-width: none; height: 620px; padding: var(--space-32); } .preview-card { display: flex; } .flow-preview-page { height: 620px; padding: var(--space-32); overflow: hidden; border-radius: var(--radius-24); } .flow-preview-page::after, .flow-preview-page .flow-preview-bg { display: block; } .flow-preview-page .flow-page-card { display: none; } /* Pen apDbw: the photo in a memorial's card is 5:6 (262×314). */ } /* Memorial page: layout only, until the visual direction is chosen (PRO-261 comment 41f73e0b). */ .memorial { display: flex; flex-direction: column; } .memorial form { display: flex; flex-direction: column; gap: var(--space-12); } /* Pen 03 Memorial (ZLbSf desktop, amF4u mobile). */ .mem-hero { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-8) var(--space-20) var(--space-40); } .mem-cover { width: 100%; aspect-ratio: 5 / 6; border-radius: var(--radius-26); } /* A cover drawn through CoverHelper: the image is sized and shifted so its crop box fills the 5:6 frame. */ .cover-crop { position: relative; display: block; overflow: hidden; aspect-ratio: 5 / 6; } .cover-crop img { position: absolute; max-width: none; } .cover-neutral { background: var(--blush); } .mem-hero-text { display: flex; flex-direction: column; gap: var(--space-16); } .mem-eyebrow { font: 600 var(--font-size-12)/1.2 var(--font-body); letter-spacing: 2.2px; text-transform: uppercase; color: var(--amber-text); } .mem-name { font: 500 var(--font-size-72)/1 var(--font-display); overflow-wrap: anywhere; } .mem-meta { font: 400 var(--font-size-16)/1.3 var(--font-body); color: var(--muted); } .mem-actions { display: flex; flex-wrap: wrap; gap: var(--space-10); padding-top: var(--space-6); } .mem-actions .btn-primary { flex: 1; } /* Phones: the candle on its own row, then message and share side by side. */ .mem-actions .mem-light { flex: 1 0 100%; } .mem-light .btn-primary { width: 100%; } .mem-actions .btn.btn-secondary { flex: 1 1 0; min-width: 0; } .mem-share-long { display: none; } .mem-counts { font: 400 var(--font-size-15)/1.3 var(--font-body); color: var(--muted); } .mem-h2 { font: 500 var(--font-size-32)/1.1 var(--font-display); } .mem-story { display: flex; flex-direction: column; gap: var(--space-14); padding: var(--space-40) var(--space-20); background: var(--blush); } .mem-story .mem-h2 { font-size: var(--font-size-34); } .mem-story-body { display: flex; flex-direction: column; gap: 1.6em; font: 400 var(--font-size-17)/1.6 var(--font-body); color: var(--muted); } .mem-photos { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-40) var(--space-20) var(--space-20); } .mem-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-10); } .mem-grid img, .mem-grid video { width: 100%; height: 170px; object-fit: cover; border-radius: var(--radius-16); } /* Pen 03g: photos and videos open in the gallery (vk6FG grid tile; RCiFO / pv8TM mobile, K0mTp / aktIY desktop, same in light and dark). */ .mem-cover-link { display: block; flex: none; border-radius: var(--radius-26); } .mem-tile { position: relative; display: block; border-radius: var(--radius-16); } .mem-tile video { display: block; } .mem-tile-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: auto; border-radius: var(--radius-999); background: var(--photo-shade); color: var(--on-gallery); } .mem-tile-play svg { width: 22px; height: 22px; } .mem-tile-time { position: absolute; left: var(--space-10); bottom: var(--space-10); display: flex; align-items: center; height: 24px; padding: 0 var(--space-8); border-radius: var(--radius-999); background: var(--photo-shade); font: 500 var(--font-size-13)/1 var(--font-body); color: var(--on-gallery); } dialog.gallery { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--gallery-bg); color: var(--on-gallery); } dialog.gallery[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; } dialog.gallery::backdrop { background: transparent; } html:has(dialog.gallery[open]) { overflow: hidden; } .gallery-top { display: flex; align-items: center; justify-content: space-between; padding: max(var(--space-8), env(safe-area-inset-top)) var(--space-12) var(--space-8) var(--space-20); } .gallery-count { font: 500 var(--font-size-15)/1.2 var(--font-body); font-variant-numeric: tabular-nums; } .gallery-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-999); background: var(--gallery-control); color: var(--on-gallery); cursor: pointer; } .gallery-btn svg { width: 24px; height: 24px; } .gallery-close svg { width: 22px; height: 22px; } .gallery-stage { display: flex; align-items: center; justify-content: center; min-height: 0; } .gallery-stage > * { display: block; max-width: 100%; max-height: 100%; } .gallery-stage video { background: var(--video-bg); } .gallery-nav { display: flex; align-items: center; justify-content: space-between; padding: var(--space-12) var(--space-20) max(var(--space-32), env(safe-area-inset-bottom)); } .mem-messages { display: flex; flex-direction: column; gap: var(--space-14); padding: var(--space-28) var(--space-20) var(--space-40); } .mem-messages-head { display: contents; } .mem-messages-head .btn { order: 1; } .mem-cards { display: flex; flex-direction: column; gap: var(--space-14); } .mem-message, .mem-empty { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-20); border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--surface); } .mem-message-text { font: 400 var(--font-size-17)/1.5 var(--font-body); overflow-wrap: anywhere; white-space: pre-line; } .mem-message-who { font: 400 var(--font-size-14)/1.3 var(--font-body); color: var(--muted); } .mem-message-delete { align-self: flex-start; padding: 0; border: 0; background: none; font: 500 var(--font-size-14)/1.3 var(--font-body); color: var(--danger); cursor: pointer; } .mem-empty { align-items: center; gap: var(--space-6); text-align: center; font: 400 var(--font-size-15)/1.4 var(--font-body); color: var(--muted); } .mem-empty-title { font: 500 var(--font-size-26)/1.2 var(--font-display); color: var(--text); } /* Pen 03b Memorial · just published, owner's view (ZppE9 desktop, TdLTD mobile). */ .mem-live { display: flex; align-items: center; gap: var(--space-10); margin: var(--space-4) var(--space-20) var(--space-8); padding: var(--space-14) var(--space-18); border: 1px solid var(--border); border-radius: var(--radius-16); background: var(--card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); font: 400 var(--font-size-16)/1.4 var(--font-body); } .mem-live .icon { width: 18px; height: 18px; color: var(--amber-text); } .mem-live-long { display: none; } .mem-cover-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-10); border: 1px solid var(--border); background: var(--blush); font: 500 var(--font-size-17)/1.3 var(--font-body); color: var(--text); text-decoration: none; } .mem-cover-add .icon { width: 28px; height: 28px; color: var(--amber-text); } .mem-story-invite:hover { text-decoration: underline; } /* Pen CE3xK M6LVRQ / GMSJH VRmOo */ .mem-owner-bar { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--space-10) var(--space-8); padding: var(--space-10) var(--space-12) var(--space-16) var(--space-20); background: var(--blush); } .mem-owner-bar .btn { grid-column: 1 / -1; grid-row: 2; } .mem-owner-bar-close { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: var(--radius-999); background: none; color: var(--muted); cursor: pointer; } .mem-owner-bar-close svg { width: 18px; height: 18px; } .mem-owner-bar-close:hover { background: var(--surface); } .mem-owner-bar-text { font: 400 var(--font-size-15)/1.3 var(--font-body); color: var(--muted); } /* Pen 15a TPfwj / ZDmiP */ .mem-counts-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8); } /* Pen 15p gift row (e9C53G desktop, EwIGw phone): every gift on offer, each opening the gift dialog. */ /* Pen 15r Left for card (Gk0MR desktop, oTyha phone): on the cover's bottom-left corner, or in the hero text when there is no cover. */ .mem-cover-wrap { position: relative; flex: none; } .mem-cover-wrap .mem-left-for { position: absolute; left: var(--space-12); right: var(--space-12); bottom: var(--space-12); } .mem-left-for { display: flex; flex-direction: column; gap: var(--space-12); padding: calc(var(--space-16) - 1px); border: 1px solid var(--glass-border); border-radius: var(--radius-glass); background: var(--card); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .mem-left-for-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); } .mem-left-for-eyebrow { font: 600 var(--font-size-12)/1.2 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } .mem-left-for-all { font: 400 var(--font-size-12)/1.2 var(--font-body); color: var(--muted); text-decoration: none; } .mem-left-for .mem-lamps { gap: var(--space-12); padding: calc(var(--space-12) - 1.5px); border: 1.5px solid var(--candle); border-radius: var(--radius-14); background: var(--card); box-shadow: 0 0 18px #F2A54166; } .mem-left-for .mem-lamp { width: 44px; height: 44px; } .mem-left-for .mem-lamp-icon { width: 44px; height: 44px; } .mem-left-for .mem-lamps-text { gap: var(--space-2); } .mem-left-for .mem-lamps-title { font-size: var(--font-size-15); } .mem-left-for .mem-lamps-who { font-size: var(--font-size-13); } .mem-tallies { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .mem-tallies:not(:has(li)) { display: none; } .mem-tally { display: flex; align-items: center; gap: 3px; padding: 2px calc(var(--space-10) - 1px) 2px 2px; border: 1px solid var(--border); border-radius: var(--radius-999); background: var(--surface); font: 600 var(--font-size-13)/1 var(--font-body); color: var(--text); } .mem-tally-art { width: 24px; height: 24px; } .mem-tally-extra { display: none; } .mem-tally-more { height: 32px; padding: 0 calc(var(--space-10) - 1px); color: var(--muted); } .mem-gift-row { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-8); min-width: 0; } .mem-gift-row-label { display: flex; align-items: center; gap: var(--space-6); font: 400 var(--font-size-15)/1.3 var(--font-body); color: var(--muted); } .mem-gift-row-label .icon { display: flex; color: var(--amber-text); } .mem-gift-row-label .icon svg { width: 16px; height: 16px; } .mem-gift-chips { display: flex; gap: var(--space-8); margin: 0 calc(-1 * var(--space-20)); padding: 0 var(--space-20) var(--space-2); overflow-x: auto; scrollbar-width: none; } .mem-gift-chips::-webkit-scrollbar { display: none; } .mem-gift-chip { display: flex; flex: none; align-items: center; gap: var(--space-8); padding: var(--space-6) var(--space-14) var(--space-6) var(--space-6); border-radius: var(--radius-999); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); font: 500 var(--font-size-14)/1.3 var(--font-body); color: var(--text); text-decoration: none; white-space: nowrap; } .mem-gift-chip:hover { box-shadow: inset 0 0 0 1px var(--primary); } .mem-gift-chip-art { width: 28px; height: 28px; } @media (min-width: 900px) { .mem-gift-chips { flex-wrap: wrap; margin: 0; padding: 0; overflow: visible; } } .mem-see-everyone { font: 500 var(--font-size-15)/1.3 var(--font-body); color: var(--primary); text-decoration: none; } .mem-see-everyone:hover { text-decoration: underline; } .mem-story-head { display: flex; flex-direction: column; gap: var(--space-14); } .mem-story-invite { font: 400 var(--font-size-17)/1.6 var(--font-body); color: var(--amber-text); text-decoration: none; } .mem-photos-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-8); height: 140px; border: 1px solid var(--border); border-radius: var(--radius-20); background: var(--blush); font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--muted); text-decoration: none; text-align: center; } .mem-photos-empty .icon, .mem-empty .icon { width: 24px; height: 24px; color: var(--amber-text); } .mem-empty { gap: var(--space-8); padding: var(--space-36) var(--space-24); border-radius: var(--radius-20); font-size: var(--font-size-16); } .mem-empty p:last-child { max-width: 300px; } /* Pen 15a: the glowing lamps in the hero (fXa8r / TGs42 one, nDclo / upbg0 several) and the gift shelf under it. */ .mem-lamps { display: flex; align-items: center; gap: var(--space-12); } .mem-lamps-icons { display: flex; flex: none; align-items: center; } .mem-lamps-icons > * + * { margin-left: calc(-1 * var(--space-16)); } .mem-lamp { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-999); background: radial-gradient(50% 50% at 50% 50%, var(--lamp-halo) 0, transparent 100%); } .mem-lamp-icon { width: 36px; height: 36px; } .mem-lamps-more { display: flex; align-items: center; height: 28px; padding: 0 var(--space-10); border: 1px solid var(--border); border-radius: var(--radius-16); background: var(--bg); font: 400 var(--font-size-13)/1 var(--font-body); color: var(--muted); text-decoration: none; } .mem-lamps-icons > span:empty { margin: 0; } .mem-lamps-text { display: flex; flex: 1; flex-direction: column; gap: var(--space-4); } .mem-lamps-title { font: 600 var(--font-size-15)/1.3 var(--font-body); color: var(--text); } .mem-lamps-who { font: 400 var(--font-size-13)/1.3 var(--font-body); color: var(--muted); } .gift-shelf { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-36) var(--space-20); } .gift-shelf-head { display: contents; } .gift-shelf-head .btn { order: 1; } .gift-shelf-heading { display: flex; flex-direction: column; gap: var(--space-8); } .gift-shelf-eyebrow { font-size: var(--font-size-13); letter-spacing: 2.4px; } .gift-shelf-title { font-size: var(--font-size-30); } .gift-shelf-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-12); } .gift-shelf-card { display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-16); } .gift-shelf-icon { width: 48px; height: 48px; } .gift-shelf-name { font: 600 var(--font-size-16)/1.3 var(--font-body); } .gift-shelf-quote { font: 400 var(--font-size-15)/1.45 var(--font-body); } .gift-shelf-who { font: 400 var(--font-size-13)/1.3 var(--font-body); color: var(--muted); } .gift-shelf-when { display: none; } .gift-shelf-all { order: 2; font: 600 var(--font-size-15)/1.3 var(--font-body); color: var(--amber-text); text-decoration: none; } .gift-shelf-all:hover { text-decoration: underline; } /* The memorial page's messages beyond MESSAGES_ON_PAGE, on Everyone: styled like the shelf's link. */ .mem-messages-all { align-self: flex-start; font: 600 var(--font-size-15)/1.3 var(--font-body); color: var(--amber-text); text-decoration: none; } .mem-messages-all:hover { text-decoration: underline; } /* Pen 15a u8Zcg: friends of a Free page give it Forever from here, not from the gift chooser. */ /* Pen 15p Forever card (Trhtl desktop, JWvY6 phone): the shelf's last block. */ .mem-forever { order: 3; display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-24); border-radius: var(--radius-card); background: var(--forever); color: var(--on-forever); } .mem-forever-text { display: flex; flex-direction: column; gap: var(--space-8); } .mem-forever-eyebrow { font: 600 var(--font-size-13)/1.3 var(--font-body); letter-spacing: 2.4px; text-transform: uppercase; } .mem-forever-title { margin: 0; font: 500 var(--font-size-26)/1.15 var(--font-display); } .mem-forever-body { font: 400 var(--font-size-15)/1.45 var(--font-body); } .gift-shelf-empty { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-24); } .gift-shelf-empty-text { display: flex; flex-direction: column; gap: var(--space-10); } .gift-shelf-empty-icons { display: flex; gap: var(--space-8); } .gift-shelf-empty-icon { width: 40px; height: 40px; } .gift-shelf-empty-title { font: 500 var(--font-size-26)/1.1 var(--font-display); } .gift-shelf-empty-body { font: 400 var(--font-size-16)/1.5 var(--font-body); color: var(--muted); } /* Pen 15f: everything people left for the pet. */ /* Pen 15f hp9tt: everyone who remembered the pet. */ .everyone { flex: 1; display: flex; flex-direction: column; gap: var(--space-18); padding: var(--space-24) var(--space-20) var(--space-40); } .everyone-back { align-self: flex-start; font: 500 var(--font-size-15)/1.3 var(--font-body); color: var(--primary); text-decoration: none; } .everyone-back:hover { text-decoration: underline; } .everyone-heading { display: flex; flex-direction: column; gap: var(--space-10); } .everyone-eyebrow { font-size: var(--font-size-13); } .everyone-title { font: 500 var(--font-size-34)/1.05 var(--font-display); } .everyone-counts { font: 400 var(--font-size-15)/1.3 var(--font-body); color: var(--muted); } .everyone-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .everyone-filters { display: flex; flex-wrap: wrap; gap: var(--space-8); } .everyone-filter { padding: var(--space-6) var(--space-12); border: 1px solid var(--border); border-radius: var(--radius-999); background: var(--bg); color: var(--text); font: 400 var(--font-size-13)/1 var(--font-body); text-decoration: none; } .everyone-filter:hover, .everyone-filter:focus-visible { border-color: var(--text); } .everyone-filter[aria-current="page"] { border-color: var(--text); background: var(--text); color: var(--bg); font-weight: 600; } .everyone-rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; } .everyone-row { display: flex; gap: var(--space-12); padding: var(--space-14) 0; border-bottom: 1px solid var(--border); scroll-margin-top: var(--space-24); } .everyone-row:target { margin: 0 calc(-1 * var(--space-12)); padding-inline: var(--space-12); border-radius: var(--radius-12); background: var(--blush); } .everyone-icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-999); background: var(--blush); color: var(--amber-text); } .everyone-icon .icon { width: 18px; height: 18px; } .everyone-icon-gift { background: none; } .everyone-icon-gift img { width: 40px; height: 40px; } .everyone-icon-lamp { background: radial-gradient(50% 50% at 50% 50%, var(--lamp-halo) 0, transparent 100%); } .everyone-icon-lamp img { width: 32px; height: 32px; } .everyone-text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); } .everyone-row-title { font: 600 var(--font-size-16)/1.25 var(--font-body); overflow-wrap: anywhere; } .everyone-row-message { font: 400 var(--font-size-15)/1.45 var(--font-body); overflow-wrap: anywhere; } .everyone-row-when { font: 400 var(--font-size-13)/1.3 var(--font-body); color: var(--muted); } .everyone-empty { padding: var(--space-24) 0; font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } .everyone-more { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-6); } .everyone-more .btn { width: 100%; } .everyone-more-note { font: 400 var(--font-size-13)/1.3 var(--font-body); color: var(--muted); } @media (min-width: 900px) { .mem-hero { flex-direction: row; align-items: center; gap: var(--space-72); padding: var(--space-24) var(--space-64) var(--space-72); } /* Narrow desktops keep 340px beside the cover for the name and the actions. */ .mem-cover { flex: none; width: min(560px, calc(100vw - 540px)); border-radius: var(--radius-32); } .mem-hero-text { flex: 1; gap: var(--space-20); } .mem-eyebrow { font-size: var(--font-size-13); letter-spacing: 2.4px; } .mem-name { font-size: var(--font-size-120); } .mem-meta { font-size: var(--font-size-20); } .mem-actions { gap: var(--space-12); padding-top: var(--space-12); } .mem-actions .btn-primary, .mem-actions .mem-light { flex: none; } .mem-actions .btn.btn-secondary { flex: none; } .mem-share-long { display: inline; } .mem-counts { font-size: var(--font-size-16); } .mem-h2 { font-size: var(--font-size-44); } .mem-story { flex-direction: row; gap: var(--space-72); padding: var(--space-80) var(--space-64); } .mem-story .mem-h2 { flex: none; width: 400px; font-size: var(--font-size-48); line-height: 1.08; } .mem-story-body { flex: 1; font-size: var(--font-size-20); } .mem-photos { gap: var(--space-28); padding: var(--space-80) var(--space-64) var(--space-40); } .mem-grid { grid-template-columns: repeat(4, 1fr); gap: var(--space-16); } .mem-grid img, .mem-grid video { height: 300px; border-radius: var(--radius-20); } .mem-cover-link { border-radius: var(--radius-32); } .mem-tile { border-radius: var(--radius-20); } .gallery-top { padding: var(--space-20) var(--space-24) var(--space-20) var(--space-32); } .gallery-count { font-size: var(--font-size-16); } .gallery-close { width: 48px; height: 48px; } .gallery-close svg { width: 24px; height: 24px; } dialog.gallery { --gallery-arrow: 56px; } .gallery-stage, .gallery-nav { grid-area: 2 / 1; padding: var(--space-56) calc(var(--space-24) * 2 + var(--gallery-arrow)); } .gallery-stage > * { max-width: min(900px, 100%); max-height: min(600px, 100%); border-radius: var(--radius-12); } .gallery-nav { padding-inline: var(--space-24); pointer-events: none; } .gallery-arrow { width: var(--gallery-arrow); height: var(--gallery-arrow); pointer-events: auto; } .gallery-arrow svg { width: 28px; height: 28px; } .mem-messages { gap: var(--space-28); padding: var(--space-56) var(--space-64) var(--space-88); } .mem-messages-head { display: flex; align-items: center; justify-content: space-between; } .mem-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-16); } .mem-message { gap: var(--space-14); padding: var(--space-28); border-radius: var(--radius-20); } .mem-empty { padding: var(--space-36) var(--space-24); } .mem-empty-title { font-size: var(--font-size-30); } .mem-empty p:last-child { max-width: 520px; } .mem-live { margin: 0 var(--space-64) var(--space-8); } .mem-live-long { display: inline; } .mem-owner-bar { grid-template-columns: 1fr auto auto; padding: var(--space-16) var(--space-64); } .mem-owner-bar .btn { grid-column: auto; grid-row: auto; } .mem-see-everyone { font-size: var(--font-size-16); } .mem-story-head { flex: none; width: 400px; gap: var(--space-16); } .mem-story-head .mem-h2 { width: auto; } .mem-story-invite { flex: 1; font-size: var(--font-size-20); } .mem-photos-empty { height: 200px; } .mem-message-text { font-size: var(--font-size-19); } .mem-message-who { font-size: var(--font-size-15); } .mem-lamps { gap: var(--space-16); } .mem-lamps-icons > * + * { margin-left: calc(-1 * var(--space-20)); } .mem-lamp { width: 64px; height: 64px; } .mem-lamp-icon { width: 44px; height: 44px; } .mem-lamps-more { height: 32px; } .mem-lamps-title { font-size: var(--font-size-17); } .mem-lamps-who { font-size: var(--font-size-15); } .mem-cover-wrap .mem-left-for { left: var(--space-16); right: var(--space-16); bottom: var(--space-16); } .mem-tallies { gap: var(--space-8); } .mem-tally { gap: var(--space-6); padding: 3px calc(var(--space-12) - 1px) 3px 3px; font-size: var(--font-size-14); } .mem-tally-art { width: 28px; height: 28px; } .mem-tally-extra { display: flex; } .mem-tally-more { display: none; } .gift-shelf { gap: var(--space-28); padding: var(--space-72) var(--space-64); } .gift-shelf:has(.gift-shelf-empty) { gap: var(--space-24); } .gift-shelf-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); } .gift-shelf-head .btn, .gift-shelf-empty .btn { flex: none; width: auto; } .gift-shelf-heading { gap: var(--space-12); } .gift-shelf-title { font-size: var(--font-size-44); } .gift-shelf-cards { grid-template-columns: repeat(4, 1fr); gap: var(--space-20); } .gift-shelf-card { gap: var(--space-14); padding: var(--space-24); } .gift-shelf-icon { width: 64px; height: 64px; } .gift-shelf-name { font-size: var(--font-size-19); } .gift-shelf-quote { font-size: var(--font-size-17); } .gift-shelf-who { font-size: var(--font-size-15); } .gift-shelf-when { display: inline; } .gift-shelf-all, .mem-messages-all { font-size: var(--font-size-16); } .gift-shelf-empty { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-20); padding: var(--space-36) var(--space-40); } .gift-shelf-empty-text { width: 620px; gap: var(--space-12); } .gift-shelf-empty-icons { gap: var(--space-10); } .gift-shelf-empty-icon { width: 48px; height: 48px; } .gift-shelf-empty-title { font-size: var(--font-size-34); } .gift-shelf-empty-body { font-size: var(--font-size-18); } .everyone { gap: var(--space-28); padding: var(--space-48) var(--space-64) var(--space-88); } .everyone-heading, .everyone-note, .everyone-rows, .everyone-empty { max-width: 760px; } .everyone-eyebrow { font-size: var(--font-size-13); } .everyone-title { font-size: var(--font-size-56); } .everyone-counts { font-size: var(--font-size-17); } .everyone-note { font-size: var(--font-size-16); } .everyone-filter { padding: var(--space-8) var(--space-16); font-size: var(--font-size-15); } .everyone-row { gap: var(--space-16); padding: var(--space-18) 0; } .everyone-icon { width: 48px; height: 48px; } .everyone-icon .icon { width: 20px; height: 20px; } .everyone-icon-gift img { width: 48px; height: 48px; } .everyone-icon-lamp img { width: 40px; height: 40px; } .everyone-row-title { font-size: var(--font-size-18); } .everyone-row-message { font-size: var(--font-size-17); } .everyone-row-when { font-size: var(--font-size-14); } .everyone-more { align-items: flex-start; } .everyone-more .btn { width: auto; } } /* Memorial page themes: the mt-* variables of the `memorial` theme axis in the .pen (frames 10–12). */ [data-memorial-theme="hearth"] { --bg: light-dark(#FCEFE4, #17100B); --surface: light-dark(#FFFFFF, #24180F); --blush: light-dark(#F8E4D4, #1F150E); --border: light-dark(#F1D5C0, #4A3628); --primary: light-dark(#AE492F, #EDB36C); --on-primary: light-dark(#FFFFFF, #2A1A0E); --amber-text: light-dark(#A9472A, #F2B866); } [data-memorial-theme="meadow"] { --bg: light-dark(#F1F3EA, #111712); --surface: light-dark(#FFFFFF, #1C251E); --blush: light-dark(#E3E9D9, #18201A); --border: light-dark(#D3DCC6, #34443A); --primary: light-dark(#4F6F48, #A9C79A); --on-primary: light-dark(#FFFFFF, #142014); --amber-text: light-dark(#48663F, #B5D3A5); } [data-memorial-theme="dusk"] { --bg: light-dark(#EEEDF5, #12111F); --surface: light-dark(#FFFFFF, #1E1C34); --blush: light-dark(#E1DFEE, #1A1830); --border: light-dark(#D5D2E6, #36335A); --primary: light-dark(#4A4290, #E9C77B); --on-primary: light-dark(#FFFFFF, #1B1730); --amber-text: light-dark(#4A4290, #EBCB85); } [data-memorial-theme] { background: var(--bg); color: var(--text); } /* Pen 03 memorial footer (U0FgCf / sFSUW). */ .mem-footer { display: flex; flex-direction: column; gap: var(--space-8); margin-top: auto; padding: var(--space-22) var(--space-20) var(--space-34); border-top: 1px solid var(--border); font: 400 var(--font-size-14)/18px var(--font-body); color: var(--muted); } .mem-footer a { color: inherit; text-decoration: none; } @media (min-width: 900px) { .mem-footer { flex-direction: row; justify-content: space-between; align-items: center; padding: var(--space-28) var(--space-64); font-size: var(--font-size-15); line-height: 20px; } } /* Pen "11 Password": logo-only header, no footer, the card in a radial glow that fills the rest of the screen. */ .nav-bare .logo img { height: 32px; } .locked, .lamp-share { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: var(--space-24) var(--pad-x); background: radial-gradient(50% 50% at 50% 50%, var(--lamp-glow) 0, transparent 100%); } .locked-card { display: flex; flex-direction: column; gap: var(--space-16); width: 100%; max-width: 480px; padding: var(--space-28); text-align: center; } .locked-card .form-error { text-align: left; } .locked-icon { display: inline-flex; align-self: center; justify-content: center; align-items: center; width: 56px; height: 56px; border-radius: var(--radius-999); background: var(--blush); color: var(--amber-text); } .locked-icon svg { width: 24px; height: 24px; } .locked-title { font: 500 var(--font-size-32)/1.15 var(--font-display); } .locked-lead { font-size: var(--font-size-17); line-height: 1.5; color: var(--muted); } .locked-card .field { margin-top: var(--space-8); } .locked-note { font-size: var(--font-size-14); line-height: 1.45; color: var(--muted); } .locked-card .form-error { font-size: var(--font-size-14); } @media (min-width: 1100px) { .nav-bare .logo img { height: 40px; } .locked { align-items: center; padding: 0 var(--pad-x); } .locked-card { padding: var(--space-44); } .locked-title { font-size: var(--font-size-40); } } /* Owner pages in one card (Pen 15g Gifts on the page): logo-only header. */ .settings { display: flex; flex-direction: column; gap: var(--space-16); padding: var(--space-16) var(--space-20) var(--space-40); } .settings-back { align-self: flex-start; font-size: var(--font-size-15); color: var(--muted); text-decoration: none; } .settings-card { display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-22); } .settings-title { font: 500 var(--font-size-28)/1.15 var(--font-display); } .settings-group { display: flex; flex-direction: column; gap: var(--space-10); padding-top: var(--space-8); } .settings-label { padding: 0; font-size: var(--font-size-15); font-weight: 600; } .settings-hint { font-size: var(--font-size-14); line-height: 1.45; color: var(--muted); } .settings-saved { font-size: var(--font-size-15); color: var(--amber-text); } .gift-owner-head { display: flex; flex-direction: column; gap: var(--space-8); } .gift-owner-lead { font-size: var(--font-size-15); line-height: 1.5; color: var(--muted); } .gift-owner-rows { margin: 0; padding: 0; list-style: none; } .gift-owner-empty { padding: var(--space-16) 0; border-bottom: 1px solid var(--border); font-size: var(--font-size-15); line-height: 1.5; color: var(--muted); } .gift-owner-row { display: grid; grid-template-columns: 40px 1fr; column-gap: var(--space-12); align-items: start; padding: var(--space-16) 0; border-bottom: 1px solid var(--border); } .gift-owner-icon { width: 40px; height: 40px; } .gift-owner-text { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; } .gift-owner-name { font-size: var(--font-size-16); font-weight: 600; } .gift-owner-quote { font-size: var(--font-size-15); line-height: 1.45; } .gift-owner-when { font-size: var(--font-size-13); color: var(--muted); } .gift-owner-hidden .gift-owner-name, .gift-owner-hidden .gift-owner-quote { color: var(--muted); } .gift-owner-hidden .gift-owner-icon { opacity: .45; } .gift-owner-hidden .gift-owner-when { font-weight: 600; color: var(--amber-text); } .gift-owner-action { grid-column: 2; padding-top: var(--space-10); } .gift-owner-note { font-size: var(--font-size-13); line-height: 1.5; color: var(--muted); } .switch-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); } .switch { appearance: none; flex: none; width: 46px; height: 28px; margin: 0; padding: var(--space-3); border-radius: var(--radius-99); background: var(--border); cursor: pointer; } .switch::before { content: ''; display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--switch-knob); transition: transform .15s; } .switch:checked { background: var(--primary); } .switch:checked::before { transform: translateX(18px); } .switch:disabled { cursor: not-allowed; } .switch:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } @media (min-width: 1100px) { .settings { padding: var(--space-24) var(--space-240) var(--space-80); gap: var(--space-20); } .settings-back { font-size: var(--font-size-16); } .settings-card { padding: var(--space-36); } .settings-title { font-size: var(--font-size-34); } .gift-owner-lead { font-size: var(--font-size-16); } .gift-owner-empty { padding: var(--space-18) 0; font-size: var(--font-size-16); } .gift-owner-row { grid-template-columns: 48px 1fr auto; column-gap: var(--space-16); align-items: center; padding: var(--space-18) 0; } .gift-owner-icon { width: 48px; height: 48px; } .gift-owner-name { font-size: var(--font-size-17); } .gift-owner-quote { font-size: var(--font-size-16); } .gift-owner-action { grid-column: 3; padding-top: 0; } } /* Pen "05 Upgrade · Forever": the create-flow layout with a comparison table, price, waiver box and trust line. */ .flow-eyebrow { font: 600 var(--font-size-14)/1.2 var(--font-body); color: var(--primary); } .compare { width: 100%; table-layout: fixed; border: 1px solid var(--border); border-radius: var(--radius-20); border-collapse: separate; border-spacing: 0; background: var(--surface); } .compare th, .compare td { padding: var(--space-14) var(--space-20); font: 400 var(--font-size-15)/1 var(--font-body); text-align: center; } .compare thead th { font-size: var(--font-size-14); font-weight: 600; color: var(--muted); } .compare thead th:last-child { font-weight: 700; color: var(--primary); } .compare tbody th { padding-right: var(--space-8); text-align: left; color: var(--text); } .compare tbody th, .compare tbody td { border-top: 1px solid var(--border); } .compare th:not(:first-child), .compare td { padding-left: 0; padding-right: 0; } .compare tr > :nth-child(2) { width: 72px; color: var(--muted); } .compare tr > :nth-child(3) { width: 84px; box-sizing: content-box; padding-right: var(--space-20); } .compare tbody td:last-child { font-weight: 600; color: var(--text); } .upgrade-price { display: flex; align-items: flex-end; gap: var(--space-10); } .upgrade-amount { font: 500 var(--font-size-48)/1 var(--font-display); } .upgrade-once { padding-bottom: var(--space-6); font: 400 var(--font-size-15)/1.2 var(--font-body); color: var(--muted); } .waiver { display: flex; gap: var(--space-12); padding: var(--space-14) var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-12); background: var(--surface); font: 400 var(--font-size-14)/1.45 var(--font-body); } .waiver input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); } .upgrade-trust { display: flex; align-items: center; gap: var(--space-8); font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); } .upgrade-trust .icon { width: 14px; height: 14px; } .upgrade-trust a { color: inherit; text-decoration: none; } .upgrade-trust a:hover, .upgrade-trust a:focus-visible { text-decoration: underline; } /* Pen "08a Sign in", "08 Sign-in link sent", "09b Link expired", "08b Continue": the create-flow layout. */ .flow-badge-lg { width: 64px; height: 64px; border-radius: var(--radius-32); } .flow-badge-lg svg { width: 30px; height: 30px; } .alert { display: flex; align-items: center; gap: var(--space-10); padding: var(--space-12) var(--space-14); border-radius: var(--radius-12); background: var(--blush); font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--text); } .alert .icon { color: var(--danger); } .or-rule { display: flex; align-items: center; gap: var(--space-12); font: 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); } .or-rule::before, .or-rule::after { content: ''; flex: 1; height: 1px; background: var(--border); } .tips { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-20); border: 1px solid var(--border); border-radius: var(--radius-20); background: var(--surface); } .tips-title { font: 600 var(--font-size-15)/1.2 var(--font-body); } .tips-body { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .flow-link { align-self: flex-start; font: 500 var(--font-size-15)/1.2 var(--font-body); color: var(--primary); text-decoration: none; } .flow-link:hover, .flow-link:focus-visible { text-decoration: underline; } .flow-link-button, .chosen-gift-change { padding: 0; border: 0; background: none; cursor: pointer; } .form-default-submit { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); } .flow-continue { gap: var(--space-24); padding-bottom: var(--space-48); } .flow-continue .flow-column { gap: var(--space-16); } .flow-continue .eyebrow { font-size: var(--font-size-13); } .flow-continue .flow-lead { font-size: var(--font-size-18); } .flow-buttons { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-8); } @media (min-width: 1100px) { .flow-continue { padding-bottom: var(--space-96); } .flow-continue .flow-column { gap: var(--space-20); width: 620px; } .flow-continue .flow-lead { font-size: var(--font-size-21); } .flow-continue .flow-buttons { flex-direction: row; } .flow-continue .flow-preview { height: 460px; } } /* Pen "13" Privacy / Terms / Refunds / Contact: ruled sections, photo on desktop only for the three policies. */ .legal-updated { font: italic 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); } .legal-section { display: flex; flex-direction: column; gap: var(--space-8); padding-top: var(--space-12); border-top: 1px solid var(--border); } .legal-section h2 { font: 500 var(--font-size-26)/1.2 var(--font-display); } .legal-section p, .legal-section li { font: 400 var(--font-size-16)/1.6 var(--font-body); color: var(--muted); } .legal-section strong { font-weight: 600; color: var(--text); } .legal-section a { color: inherit; } .legal-section ul { margin: 0; padding-left: var(--space-20); list-style: disc; display: flex; flex-direction: column; gap: var(--space-8); } .flow-legal .flow-preview { display: none; } .contact-card { display: flex; align-items: center; gap: var(--space-14); padding: var(--space-20); } .contact-icon { display: flex; flex: none; justify-content: center; align-items: center; width: 44px; height: 44px; border-radius: var(--radius-22); background: var(--blush); color: var(--amber-text); } .contact-icon svg { width: 20px; height: 20px; } .contact-text { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .contact-address { font: 500 var(--font-size-24)/1.2 var(--font-display); color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .contact-note { font: 400 var(--font-size-15)/1.3 var(--font-body); color: var(--muted); } @media (min-width: 1100px) { .legal-section { padding-top: var(--space-16); } .legal-section h2 { font-size: var(--font-size-30); } .legal-section p, .legal-section li { font-size: var(--font-size-18); } .flow-legal .flow-preview { display: flex; height: 520px; } .contact-address { font-size: var(--font-size-28); } } /* Pen "17 Guide article": one reading column, 680 on desktop; text sizes step up at 1100. */ .guide { display: flex; justify-content: center; padding: var(--space-16) var(--pad-x) var(--space-48); } .guide-column { display: flex; flex-direction: column; gap: var(--space-32); width: 100%; max-width: 680px; } .guide-head { display: flex; flex-direction: column; gap: var(--space-16); } .guide-head .eyebrow, .guide-more .eyebrow { font-size: var(--font-size-13); } .guide-title { font: 500 var(--font-size-40)/1.05 var(--font-display); letter-spacing: -0.5px; } .guide-lead { font: 400 var(--font-size-18)/1.45 var(--font-body); color: var(--muted); } .guide-meta { font: italic 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); } .guide-section, .guide-end { display: flex; flex-direction: column; gap: var(--space-16); } .guide-section h2, .guide-end h2 { font: 500 var(--font-size-26)/1.2 var(--font-display); } .guide-section p { font: 400 var(--font-size-17)/1.65 var(--font-body); } .guide-end { padding: var(--space-24); border-radius: var(--radius-24); background: var(--surface); } .guide-end p { font: 400 var(--font-size-16)/1.6 var(--font-body); color: var(--muted); } .guide-end p.guide-end-note { font-size: var(--font-size-14); line-height: 1.2; } .guide-more { display: flex; flex-direction: column; gap: var(--space-12); } .guide-more a { font: 500 var(--font-size-21)/1.25 var(--font-display); color: var(--text); text-decoration: none; } .guide-more a:hover, .guide-more a:focus-visible { text-decoration: underline; } @media (min-width: 1100px) { .guide { padding: var(--space-56) var(--space-64) var(--space-96); } .guide-column { gap: var(--space-48); } .guide-head { gap: var(--space-20); } .guide-title { font-size: var(--font-size-56); } .guide-lead { font-size: var(--font-size-21); } .guide-section h2, .guide-end h2 { font-size: var(--font-size-30); } .guide-section p { font-size: var(--font-size-18); line-height: 1.7; } .guide-end { padding: var(--space-32); } .guide-end .btn { align-self: flex-start; } .guide-end p { font-size: var(--font-size-18); } .guide-more a { font-size: var(--font-size-24); } } /* Pen NcOMK / CVs5c (mobile) and rG5a5 (desktop): My memorials. */ .my-page { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; max-width: 600px; margin: 0 auto; padding: var(--space-20) var(--space-20) var(--space-32); } .my-head, .my-head-text { display: contents; } .my-page p, .my-page h1 { margin: 0; } .my-title { font: 400 var(--font-size-38)/1.15 var(--font-display); color: var(--text); } .my-intro { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--muted); } .my-create { width: 100%; } .my-filters { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); } .my-filter, .my-browse { font: 400 var(--font-size-15)/1.4 var(--font-body); color: var(--primary); text-decoration: none; } .my-filter[aria-current="page"], .my-filter:hover, .my-filter:focus-visible, .my-browse:hover, .my-browse:focus-visible { text-decoration: underline; text-underline-offset: 4px; } /* Every card as tall as the tallest, so a draft lines up with the published pages (Pen NcOMK, uePww). */ .my-cards { display: grid; grid-auto-rows: 1fr; gap: inherit; margin: 0; padding: 0; list-style: none; } .my-card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); scroll-margin-top: var(--space-20); } .my-identity { display: flex; align-items: center; gap: var(--space-14); } .my-thumb { flex: none; width: 64px; height: 64px; border-radius: var(--radius-32) var(--radius-32) var(--radius-10) var(--radius-10); object-fit: cover; } .my-thumb-empty, .my-details { display: none; } .my-text { display: flex; flex-direction: column; gap: var(--space-4); flex: 1; min-width: 0; } .my-name { font: 400 var(--font-size-25)/1.4 var(--font-body); color: var(--text); overflow-wrap: anywhere; } .my-status { font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .my-actions { display: flex; gap: var(--space-10); margin-top: auto; } /* Pen PwUj1 / YweCD (phone): its own row on the card, the link or totals on a second line. */ .my-since { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-8); font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .my-since-news { grid-template-columns: 8px minmax(0, 1fr); align-items: start; color: var(--primary); } .my-since-news > :not(.my-since-dot) { grid-column: 2; } .my-since-dot { grid-row: span 2; width: 8px; height: 8px; margin-top: calc((1.4em - var(--space-8)) / 2); border-radius: 50%; background: var(--primary); } .my-since-sep { display: none; } .my-since-more { color: inherit; text-decoration: none; white-space: nowrap; } .my-since-more:hover, .my-since-more:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .my-since-wide { display: none; } .copy-link-text { align-self: flex-start; padding: 0; border: 0; background: none; font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--primary); white-space: pre; cursor: pointer; } .copy-link-text:hover, .copy-link-text:focus-visible { text-decoration: underline; } .my-card .copy-link { gap: var(--space-8); } /* Pen n4XkC (phone) / zNSsb (desktop): the notice after a delete, Undo restores. */ .my-deleted-notice { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-14) var(--space-16); border-radius: var(--radius-12); background: var(--surface); font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--text); } .my-deleted-notice p, .my-deleted-notice form { margin: 0; } .my-undo { padding: 0; border: 0; background: none; font: inherit; color: var(--primary); cursor: pointer; } .my-undo:hover, .my-undo:focus-visible { text-decoration: underline; } /* Pen p4O0Rw: Recently deleted, last on the list. */ .my-deleted { display: flex; flex-direction: column; gap: var(--space-12); } .my-deleted-title, .my-deleted-note { margin: 0; } .my-deleted-title { font: 400 var(--font-size-21)/1.4 var(--font-body); color: var(--text); } .my-deleted-note { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } .my-thumb-deleted { opacity: 0.5; } .my-status.my-status-deleted { color: var(--text); } @media (min-width: 600px) { .my-deleted-notice { flex-direction: row; align-items: center; gap: var(--space-16); padding: var(--space-14) var(--space-20); } .my-deleted-notice p { flex: 1; } } /* MEkfh: under 600px the confirmation is the whole screen; rG5a5: from 600px a dialog over the list. */ .leave-scrim.delete-scrim { align-items: stretch; padding: 0; background: var(--bg); } .leave-dialog.delete-dialog { max-width: none; margin: 0; border-radius: 0; background: none; } .delete-dialog p, .delete-dialog h2 { margin: 0; } .delete-dialog .leave-dialog-context { flex: none; } .delete-dialog .leave-dialog-actions { gap: var(--space-24); } .delete-title { font: 400 var(--font-size-34)/1.45 var(--font-body); color: var(--text); } @media (min-width: 600px) { .leave-scrim.delete-scrim { align-items: center; padding: var(--space-20); background: var(--scrim); } .leave-dialog.delete-dialog { max-width: 560px; margin: auto; gap: var(--space-24); border-radius: var(--radius-16); background: var(--surface); } .delete-dialog .leave-dialog-actions { gap: var(--space-12); } .delete-title { font: 400 var(--font-size-34)/1.15 var(--font-display); } } /* Pen JjaOa (phone, the whole screen) / YuWk6 (from 600px, over the editor): deleting a published page. */ .delete-memorial { gap: var(--space-20); } .delete-memorial .delete-title { font: 400 var(--font-size-30)/1.15 var(--font-display); } .delete-goes { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-12); background: var(--blush); font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } .delete-goes ul { display: contents; margin: 0; padding: 0; list-style: none; white-space: pre-wrap; } .delete-goes-title { color: var(--text); } .delete-download { align-self: flex-start; font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--primary); text-decoration: none; } .delete-download:hover, .delete-download:focus-visible { text-decoration: underline; } .delete-memorial-form { display: flex; flex-direction: column; gap: var(--space-20); } @media (min-width: 600px) { .leave-dialog.delete-memorial { gap: var(--space-20); padding: var(--space-32); } .delete-memorial .delete-title { font-size: var(--font-size-34); } .delete-memorial .leave-dialog-actions { flex-direction: row; } .delete-memorial .leave-dialog-actions .btn { flex: 1; } } /* Pen T84Kb1: last in published Settings, below everything that saves. */ .editor-delete { display: flex; flex-direction: column; gap: var(--space-12); padding-top: var(--space-24); border-top: 1px solid var(--border); } .editor-delete p, .editor-delete h2 { margin: 0; } .editor-delete-note { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } @media (min-width: 1100px) { .editor-delete-open { align-self: flex-start; } } /* Pen uePww / TkDaH: one 960 column, the title beside Create, one row per memorial. */ @media (min-width: 1100px) { .my-page { max-width: calc(960px + 2 * var(--space-48)); gap: var(--space-28); padding: var(--space-56) var(--space-48) var(--space-72); } .my-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-24); } .my-head-text { display: flex; flex-direction: column; gap: var(--space-10); flex: 1; } .my-title { font-size: var(--font-size-44); } .my-create { align-self: flex-start; width: auto; } .my-head .my-create { align-self: auto; flex: none; } .my-filters { flex-wrap: nowrap; gap: var(--space-32); box-shadow: inset 0 -1px 0 var(--border); } .my-filter { padding-bottom: var(--space-12); color: var(--muted); } .my-filter[aria-current="page"] { color: var(--primary); box-shadow: inset 0 -2px 0 var(--primary); } .my-filter[aria-current="page"], .my-filter:hover, .my-filter:focus-visible { text-decoration: none; } .my-filter:hover, .my-filter:focus-visible { color: var(--primary); } .my-cards { gap: var(--space-16); } .my-card { flex-direction: row; align-items: center; gap: var(--space-24); padding: var(--space-20); } .my-identity { flex: 1; min-width: 0; gap: var(--space-24); } .my-thumb { width: 88px; height: 88px; } .my-thumb-empty { display: flex; align-items: center; justify-content: center; background: var(--blush); color: var(--muted); } .my-details { display: block; font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .my-status-live { color: var(--text); } /* Pen R5Ge1l / N1Z4J (desktop): one line under the status. */ .my-since-narrow { display: none; } .my-since-wide { display: block; padding-top: var(--space-4); } .my-since-wide .my-since-dot { display: inline-block; vertical-align: middle; margin: -0.15em var(--space-8) 0 0; } .my-since-wide .my-since-sep { display: inline; padding: 0 0.3em; } .my-card .copy-link { order: 1; margin-inline-end: var(--space-2); } .my-actions { order: 2; flex-direction: row-reverse; margin-top: 0; } .my-actions .btn-fill { flex: none; } .my-browse { font-size: var(--font-size-16); } } /* Pen i9EMFM (mobile) / WvlvQ (desktop) Browse memorials. */ .browse-page { display: flex; flex-direction: column; gap: var(--space-20); width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--space-20) var(--space-20) var(--space-32); } .browse-page p, .browse-page h1 { margin: 0; } .browse-head, .browse-heading, .browse-toolbar, .browse-controls { display: flex; flex-direction: column; gap: var(--space-20); } .browse-title { font: 500 var(--font-size-38)/1.15 var(--font-display); color: var(--text); } .browse-sub { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--muted); } .browse-switch { display: flex; gap: var(--space-20); font: 400 var(--font-size-15)/1.4 var(--font-body); color: var(--primary); } .browse-switch a { color: inherit; text-decoration: none; } .browse-switch a[aria-current="page"], .browse-switch a:hover { text-decoration: underline; text-underline-offset: 4px; } .browse-search { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-12); background: var(--surface); } .browse-search:focus-within { box-shadow: inset 0 0 0 1px var(--text); } .browse-search-icon { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--muted); } .browse-search-input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; color: var(--text); font: 400 var(--font-size-16)/1.4 var(--font-body); } .browse-search-input::placeholder { color: var(--muted); opacity: 1; } .browse-filters { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-24); } .browse-filter { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--primary); text-decoration: none; } .browse-filter[aria-current="page"], .browse-filter:hover { text-decoration: underline; text-underline-offset: 4px; } .browse-count, .browse-principle { font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .browse-empty { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--muted); } .browse-empty a { color: var(--primary); } .browse-grid { display: grid; gap: var(--space-20); margin: 0; padding: 0; list-style: none; } .browse-card { position: relative; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); } .browse-cover { display: block; width: 100%; aspect-ratio: 5 / 6; border-radius: var(--radius-12); } .browse-initial { display: flex; justify-content: center; align-items: center; background: var(--blush); font: 500 var(--font-size-64)/1 var(--font-display); color: var(--amber-text); } .browse-text { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; } .browse-name { font: 400 var(--font-size-30)/1.4 var(--font-body); color: var(--text); text-decoration: none; overflow-wrap: anywhere; } .browse-name::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } .browse-card:has(.browse-name:hover) .browse-name, .browse-name:focus-visible { text-decoration: underline; text-underline-offset: 4px; } .browse-name:focus-visible { outline: 0; } .browse-card:has(.browse-name:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; } .browse-meta { font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .browse-foot { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); } .browse-more { width: 100%; } .browse-card { scroll-margin-top: var(--space-20); } .browse-principle { text-align: center; } @media (min-width: 900px) { .browse-page { gap: var(--space-40); padding: var(--space-56) var(--space-64) var(--space-96); } .browse-head { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: var(--space-24); } .browse-heading { gap: var(--space-12); } .browse-title { font-size: var(--font-size-56); line-height: 1.05; letter-spacing: -0.5px; } .browse-sub { max-width: 560px; line-height: 1.45; } .browse-switch { display: none; } .browse-toolbar { flex-direction: row; justify-content: space-between; align-items: center; gap: var(--space-24); } .browse-controls { flex-direction: row; align-items: center; gap: var(--space-24); } .browse-search { width: 400px; padding: var(--space-14) var(--space-16); box-shadow: inset 0 0 0 1px var(--border); } .browse-filters { gap: var(--space-8); } .browse-filter { padding: var(--space-10) var(--space-16); border-radius: var(--radius-999); box-shadow: inset 0 0 0 1px var(--border); background: var(--surface); font: 500 var(--font-size-15)/1.2 var(--font-body); color: var(--text); } .browse-filter:hover { text-decoration: none; box-shadow: inset 0 0 0 1px var(--text); } .browse-filter[aria-current="page"] { box-shadow: none; background: var(--text); color: var(--bg); text-decoration: none; } .browse-count { flex: none; font-size: var(--font-size-15); } .browse-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-24); } .browse-card { gap: 0; padding: 0; overflow: hidden; } .browse-cover { border-radius: 0; } .browse-text { gap: var(--space-4); padding: var(--space-16); } .browse-name { font: 500 var(--font-size-20)/1.2 var(--font-display); } .browse-meta { font-size: var(--font-size-13); line-height: 1.4; } .browse-visit { display: none; } .browse-more { width: auto; } } /* Pen 04 Leave a memory (xRJtH desktop, E8gWx mobile). */ .alert-error { display: flex; align-items: center; gap: var(--space-8); padding: var(--space-12) var(--space-14); border: 1px solid var(--danger); border-radius: var(--radius-12); font: 500 var(--font-size-14)/1.45 var(--font-body); color: var(--danger); } .alert-error .icon { width: 18px; height: 18px; } .lit-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-10); padding: var(--space-28) var(--space-20); text-align: center; } .lit-badge { display: flex; justify-content: center; align-items: center; width: 64px; height: 64px; border-radius: var(--radius-32); background: var(--blush); color: var(--candle); } .lit-badge svg { width: 30px; height: 30px; } .lit-badge:has(> .candle-art) { background: none; } .lit-badge .candle-art { width: 64px; height: 64px; } .lit-title { font: 500 var(--font-size-22)/1.2 var(--font-display); } .lit-sub { font: 400 var(--font-size-14)/1.3 var(--font-body); color: var(--muted); } .memory-form { display: flex; flex-direction: column; gap: var(--space-20); } .input-memory { height: 140px; resize: vertical; line-height: 1.45; } .gift-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); padding: var(--space-20); } .gift-card-title { display: flex; align-items: center; gap: var(--space-8); font: 600 var(--font-size-18)/1.3 var(--font-body); } .gift-card-title .icon { width: 20px; height: 20px; color: var(--primary); } .gift-card-body { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } /* Pen Card/Remind me (u68BG) · Sent (r3wUF9): the gift card's shell, title wraps from the top. */ .remind-card-title { align-items: flex-start; } .remind-form { display: flex; flex-direction: column; gap: var(--space-10); align-self: stretch; } .remind-card .alert-error { align-self: stretch; } .remind-note { font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); } @media (max-width: 1099px) { /* Phones: the lit card sits above the photo strip, the rest below it. */ .flow-memory .flow-column { display: contents; } .flow-memory .flow-column > * { width: 100%; max-width: 600px; } .flow-memory .lit-card, .flow-memory .remind-card { order: -2; } } @media (min-width: 900px) { .memory-form { gap: var(--space-24); } } /* Pen 15b Gifts · Panel after the candle (fhRaV desktop, v3gNOL mobile); 15c Gift form (NrSAo, mn9nt, error JkIqY). */ .flow-gifts .eyebrow { font-size: var(--font-size-13); } .gift-picks { display: flex; flex-direction: column; gap: var(--space-12); } .gift-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .gift-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); } .gift-pick { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-16) var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-16); background: var(--surface); color: var(--text); font: 600 var(--font-size-15)/1.2 var(--font-body); text-align: center; text-decoration: none; } .gift-pick:hover, .gift-pick:focus-visible { border-color: var(--primary); } .gift-icon { width: 48px; height: 48px; } .chosen-gift { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-16); padding: var(--space-20); } .chosen-gift { flex-direction: row; align-items: center; } .gift-offer-icon { flex: none; width: 64px; height: 64px; } .chosen-gift .gift-offer-icon { width: 56px; height: 56px; } .gift-offer-text { display: flex; flex: 1; flex-direction: column; gap: var(--space-6); min-width: 0; } .chosen-gift .gift-offer-text { gap: var(--space-4); } .gift-offer-title, .chosen-gift-name { font: 600 var(--font-size-18)/1.3 var(--font-body); } .gift-offer-body, .chosen-gift-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .chosen-gift-change { font: 600 var(--font-size-14)/1.2 var(--font-body); color: var(--amber-text); text-decoration: none; } .chosen-gift-change:hover, .chosen-gift-change:focus-visible { text-decoration: underline; } .waiver-invalid { border-color: var(--danger); } /* Pen 15d: the gift itself as the badge, 72px; the receipt line is 14/1.45 muted. */ .gift-badge { width: 72px; height: 72px; } .gift-receipt { font-size: var(--font-size-14); } /* Pen 15e: the lamp card on the glow, 480 wide; 28 padding and 32/17 type on phones, 44 and 38/19 from 1100. */ .lamp-share { align-items: center; } .lamp-share-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-16); width: 100%; max-width: 480px; padding: var(--space-28); text-align: center; } /* Pen i8Pe0N / kGZQq: a 5:6 arch, 220×264 on phones and 260×312 on desktop. */ .lamp-share-photo { width: 220px; height: auto; aspect-ratio: 5 / 6; border-radius: var(--radius-160) var(--radius-160) var(--radius-20) var(--radius-20); object-fit: cover; } .lamp-share-kicker { display: flex; align-items: center; gap: var(--space-10); } .lamp-share-icon { width: 44px; height: 44px; } .lamp-share-eyebrow { font: 600 var(--font-size-13)/1.2 var(--font-body); letter-spacing: 2.4px; color: var(--amber-text); } .lamp-share-title { font: 500 var(--font-size-32)/1.1 var(--font-display); } .lamp-share-quote { font: italic 400 var(--font-size-17)/1.45 var(--font-body); } .lamp-share-who { font: 400 var(--font-size-15)/1.2 var(--font-body); color: var(--muted); } .lamp-share-note { font: 400 var(--font-size-13)/1.2 var(--font-body); color: var(--muted); } @media (min-width: 1100px) { .lamp-share { padding-block: var(--space-56); } .lamp-share-card { padding: var(--space-44); } .lamp-share-photo { width: 260px; } .lamp-share-title { font-size: var(--font-size-38); } .lamp-share-quote { font-size: var(--font-size-19); } } .waiver-invalid input { outline: 1px solid var(--danger); } @media (min-width: 600px) { .gift-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .gift-icon { width: 56px; height: 56px; } } @media (max-width: 1099px) { .flow-gifts .flow-preview { display: none; } } @media (min-width: 1100px) { .chosen-gift .gift-offer-icon { width: 64px; height: 64px; } } /* Pen "CREATE · 02" (Y911S) and the sign-in-to-create boards: a link beside the bare logo, a blush note, a native select. */ .flow-status { padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .flow-note-14 { font-size: var(--font-size-14); } .flow-return { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } .input-select { appearance: none; padding-right: var(--space-40); cursor: pointer; background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%235B4537' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") no-repeat right var(--space-16) center; } .editor { gap: var(--space-16); } .editor-status { padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); } .editor-status p { margin: 0; font-size: var(--font-size-14); line-height: 1.4; color: var(--muted); } .editor-status .form-error { white-space: pre-line; color: var(--danger); } /* Pen eIj8x colours: title in text, line muted; sizes stay at status-line scale. */ .editor-saved-title, .editor-saved-line { display: block; } .editor-saved-title { font-size: var(--font-size-17); color: var(--text); } .editor-saved-line { color: var(--muted); } /* Pen x3eTg9 / ydDoD: leaving with unsaved changes. */ .leave-scrim { position: fixed; inset: 0; z-index: 50; display: flex; justify-content: center; align-items: center; padding: var(--space-20); background: var(--scrim); overflow-y: auto; } .leave-dialog { display: flex; flex-direction: column; gap: var(--space-24); width: 100%; max-width: 560px; margin: auto; padding: var(--space-24); border-radius: var(--radius-16); background: var(--surface); } .leave-dialog-head { display: flex; align-items: center; gap: var(--space-20); } .leave-dialog-context { flex: 1; font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--primary); text-transform: uppercase; } .leave-dialog-close { display: inline-flex; justify-content: center; align-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted); font: 400 var(--font-size-28)/1 var(--font-body); cursor: pointer; } .leave-dialog-title { font: 400 var(--font-size-32)/1.15 var(--font-display); color: var(--text); } .leave-dialog-body { font: 400 var(--font-size-17)/1.45 var(--font-body); color: var(--muted); } .leave-dialog-actions { display: flex; flex-direction: column; gap: var(--space-12); } .leave-dialog-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .leave-dialog .leave-dialog-discard { box-shadow: inset 0 0 0 1px var(--border); background: var(--surface); color: var(--danger); } @media (min-width: 600px) { .leave-dialog { gap: var(--space-20); padding: var(--space-32); } .leave-dialog-actions { flex-direction: row; } .leave-dialog-actions .btn { flex: 1; } } .editor-tabs { display: flex; gap: var(--space-6); } .editor-tab { flex: 1; display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius-8); background: var(--blush); color: var(--muted); font-size: var(--font-size-15); text-decoration: none; } .editor-tab[aria-current="page"] { background: var(--primary); color: var(--on-primary); } .editor-unsaved { font-size: var(--font-size-14); color: var(--muted); } .editor-form { display: contents; } /* its panels sit in the column like the photos panel, so a closed form leaves no gap */ .editor-panel { display: flex; flex-direction: column; gap: var(--space-20); } .editor-panel[hidden] { display: none; } .editor-note { padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); font-size: var(--font-size-14); line-height: 1.45; color: var(--muted); } .editor-choice { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-16); border-radius: var(--radius-12); background: var(--surface); font-size: var(--font-size-15); } .editor-choice > span { display: flex; flex-direction: column; gap: var(--space-4); } .editor-choice input { margin-top: var(--space-3); accent-color: var(--primary); } .editor-link { font-size: var(--font-size-15); color: var(--primary); } .editor-panel .section-title { font: 400 var(--font-size-25)/1.4 var(--font-body); } .editor-choice strong { font: 400 var(--font-size-18)/1.4 var(--font-body); } /* The save status (handoff E2 「状态文案」): one line, a dot that turns primary for unsaved changes and danger for a failed save. */ .editor-save-status { display: flex; align-items: center; gap: var(--space-8); margin: 0; font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .editor-save-status::before { content: ''; flex: none; width: 8px; height: 8px; border-radius: var(--radius-999); background: var(--muted); } .editor-save-status[data-state="dirty"]::before { background: var(--primary); } .editor-save-status[data-state="failed"] { color: var(--danger); } .editor-save-status[data-state="failed"]::before { background: var(--danger); } .editor-back-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-16); margin: 0; } .editor-live-link { font-size: var(--font-size-16); color: var(--primary); } /* Phone (Pen qmQhr / FPcwe): the save bar is fixed to the bottom, so the page keeps room for it under its last item. */ .editor-savebar { position: fixed; right: 0; bottom: 0; left: 0; z-index: 20; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-12) var(--space-20) max(calc(var(--space-24) + var(--space-6)), env(safe-area-inset-bottom)); border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -6px 18px var(--menu-shadow); transition: visibility 0s 0.3s; } .editor-savebar .editor-save-status { font-size: var(--font-size-13); } .editor-savebar .editor-save-status::before { display: none; } .editor-savebar-actions { display: flex; gap: var(--space-10); } /* A text field has the keyboard: the bar would ride on top of it and cover the line being typed. It comes back once the keyboard is gone, so a tap that closed the keyboard still lands where it began. */ .editor-page:has(textarea:focus, input:not([type="checkbox"], [type="radio"], [type="file"]):focus) .editor-savebar { visibility: hidden; transition-delay: 0s; } @media (max-width: 1099px) { .flow.editor-page { padding-bottom: var(--space-150); } } /* Editor desktop shell (Pen wZXjI / WlFJX / umeG9 / ZoN3F): side 210 · column 584–720 (head + form) · cover preview 320, gaps 32. The second row takes the height the side and the preview need, so the head's row stays as tall as the head. */ .editor-side, .editor-aside, .editor-head { display: none; } .editor-main { display: contents; } @media (min-width: 1100px) { .flow.editor-page { display: grid; grid-template-columns: 210px minmax(584px, 720px) 320px; grid-template-rows: auto 1fr; justify-content: center; gap: var(--space-32); align-items: start; padding: var(--space-40); } .editor-page .editor-mobile, .editor .editor-tabs, .editor .editor-unsaved, .editor .settings-saved { display: none; } .editor-side { grid-row: span 3; display: flex; flex-direction: column; gap: var(--space-24); } .editor-side p { margin: 0; overflow-wrap: anywhere; } .editor-side-name { font: 500 var(--font-size-34)/1.1 var(--font-display); } .editor-side-status { font: 400 var(--font-size-15)/1.4 var(--font-body); color: var(--muted); } .editor-side-nav { display: flex; flex-direction: column; gap: var(--space-24); } .editor-side-link { font: 400 var(--font-size-18)/1.2 var(--font-body); color: var(--text); text-decoration: none; } .editor-side-link[aria-current="page"] { color: var(--primary); } .editor-side-link:hover, .editor-side-link:focus-visible { text-decoration: underline; } /* Pen DLABj M4tUMi: the whole card is the link. */ .editor-promo { display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-card); background: var(--blush); color: var(--text); text-decoration: none; } .editor-promo-eyebrow { display: flex; align-items: center; gap: var(--space-6); font: 600 var(--font-size-12)/1.2 var(--font-body); letter-spacing: 1.2px; text-transform: uppercase; color: var(--amber-text); } .editor-promo-eyebrow .icon, .editor-promo-eyebrow svg { width: 14px; height: 14px; } .editor-promo-title { font: 500 var(--font-size-22)/1.2 var(--font-display); } .editor-promo-body { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .editor-promo-link { font: 500 var(--font-size-14)/1.2 var(--font-body); color: var(--primary); } .editor-promo:hover .editor-promo-link, .editor-promo:focus-visible .editor-promo-link { text-decoration: underline; } .flow-column.editor { grid-column: 2; gap: var(--space-20); width: auto; } /* Pen pM8eR: status, title and the way back on the left, Discard and Save on the right. It is a grid item of the whole page, so it stays stuck however far down the page goes. The 20px drawn above it while stuck comes back off the margin, so at rest it sits where Pen has it. */ .editor-head { grid-column: 2; position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-16); margin-top: calc(-1 * var(--space-20)); padding: var(--space-20) 0; border-bottom: 1px solid var(--border); background: var(--bg); } .editor-head-title { display: flex; flex-direction: column; gap: var(--space-12); min-width: 0; } .editor-head .editor-save-status { white-space: nowrap; } .editor-head-title h1 { margin: 0; font: 400 var(--font-size-38)/1.15 var(--font-display); } .editor-head-back { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--muted); text-decoration: none; overflow-wrap: anywhere; } .editor-head-back:hover, .editor-head-back:focus-visible { text-decoration: underline; } .editor-head-actions { display: flex; flex: none; align-items: center; gap: var(--space-12); } .editor-aside { grid-column: 3; grid-row: 1 / span 2; position: sticky; top: var(--space-20); display: flex; flex-direction: column; gap: var(--space-20); min-width: 0; } .editor-aside p { margin: 0; } .editor-aside-title { font: 400 var(--font-size-23)/1.4 var(--font-body); } .editor-cover-card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-16); background: var(--surface); } .editor-cover { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius-32) var(--radius-32) var(--radius-10) var(--radius-10); } .editor-cover-name { font: 400 var(--font-size-30)/1.4 var(--font-body); overflow-wrap: anywhere; } .editor-cover-meta { font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .editor-cover-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 400 var(--font-size-15)/1.4 var(--font-body); color: var(--muted); } } /* Pen IxrxB: narrower than 1280 the three columns stay, each a little narrower; the column takes what is left. */ @media (min-width: 1100px) and (max-width: 1279px) { .flow.editor-page { grid-template-columns: 180px minmax(0, 720px) 240px; gap: var(--space-24); padding: var(--space-40) var(--space-32); } } .editor-choice .settings-hint, .editor-card .settings-hint { line-height: 1.4; } .editor-choice:has(input[type="checkbox"]:disabled) { opacity: 0.6; } .editor-card { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); } .editor-card-title { font: 400 var(--font-size-19)/1.4 var(--font-body); } .editor-themes { display: flex; gap: var(--space-24); } .editor-theme { position: relative; font: 400 var(--font-size-17)/1.4 var(--font-body); color: var(--primary); cursor: pointer; } .editor-theme input { position: absolute; opacity: 0; pointer-events: none; } .editor-theme:has(input:checked) span::after { content: " ✓"; } .editor-theme:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 4px; border-radius: var(--radius-4); } .editor-theme-free { font: 400 var(--font-size-17)/1.4 var(--font-body); color: var(--primary); } .editor-links { display: flex; flex-direction: column; font-size: var(--font-size-16); line-height: 1.4; } .editor-links .editor-link { font-size: inherit; } /* A
lays its content out in its own box, so the gap goes on a wrapper. Pen 12 Password (ZWbuC): toggle row, then the field, 10 apart. */ .editor-password-body { display: flex; flex-direction: column; gap: var(--space-10); } .editor-password > summary { list-style: none; cursor: pointer; } .editor-password > summary::-webkit-details-marker { display: none; } .editor-password[open] > summary { display: none; } /* Pen P4SIL (desktop: under the nav, staying in view) / wnLNg (phone: fixed to the bottom). */ .preview-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 6; display: flex; flex-direction: column; gap: var(--space-10); padding: var(--space-12) var(--space-20) var(--space-28); background: var(--blush); } body:has(.preview-bar) { padding-bottom: 132px; } .preview-bar-text { display: flex; align-items: center; gap: var(--space-8); margin: 0; font: 400 var(--font-size-14)/1.2 var(--font-body); color: var(--text); } .preview-bar-text .icon, .preview-bar-text svg { width: 16px; height: 16px; color: var(--muted); } .preview-bar-actions { display: flex; gap: var(--space-10); } .preview-bar-actions .btn { flex: 1; } .preview-bar-long { display: none; } .preview-publish:not(:target) { display: none; } .preview-publish { display: flex; flex-direction: column; gap: var(--space-20); padding: var(--space-32) var(--pad-x); } .preview-publish-title { margin: 0; font: 500 var(--font-size-28)/1.2 var(--font-display); } .publish-access { margin: 0; padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .publish-form { display: flex; flex-direction: column; gap: var(--space-20); } .publish-check { display: flex; gap: var(--space-12); align-items: flex-start; padding: var(--space-8) 0; cursor: pointer; } .publish-check input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); } .publish-check-text { display: flex; flex-direction: column; gap: var(--space-2); } .publish-check-label { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--text); } .publish-check-hint { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .publish-note { margin: 0; font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } @media (min-width: 900px) { .preview-bar { position: sticky; top: 0; bottom: auto; flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-14) var(--space-64); } body:has(.preview-bar) { padding-bottom: 0; } .preview-bar-text { gap: var(--space-10); font-size: var(--font-size-15); } .preview-bar-text .icon, .preview-bar-text svg { width: 18px; height: 18px; } .preview-bar-actions { gap: var(--space-12); } .preview-bar-actions .btn { flex: none; } .preview-bar-long { display: inline; } .preview-bar-short { display: none; } /* Pen XeNC0. */ .mem-dialog:has(.publish-form) { width: 480px; } } /* Pen NRC8R (phone: the cover under the title) / I1KJnx (from 900px: the cover beside the actions). */ .flow.published-page { display: grid; grid-template-columns: minmax(0, 600px); justify-content: center; gap: var(--space-24); padding: var(--space-24); } .published-column { display: contents; } .published-column > .state-icon, .published-title { order: -2; } .published-cover { order: -1; } .published-column > .state-icon { justify-self: start; } @media (min-width: 900px) { .flow.published-page { display: flex; flex-direction: row; align-items: center; gap: var(--space-56); padding: var(--space-48) var(--pad-x) var(--space-72); } .published-column { display: flex; flex: 0 1 440px; width: auto; gap: var(--space-24); } .published-cover { order: 0; flex: 0 1 400px; } } .published-column p, .published-column h1 { margin: 0; } .published-title { font: 400 var(--font-size-36)/1.15 var(--font-display); } .state-icon { display: flex; color: var(--primary); } .state-icon svg { width: 36px; height: 36px; } .published-cover { width: 100%; aspect-ratio: 5 / 6; object-fit: cover; border-radius: var(--radius-14); } .published-access { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .published-note { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } .published-column .flow-link { font: 400 var(--font-size-16)/1.45 var(--font-body); } .copy-link { display: flex; flex-direction: column; gap: var(--space-12); } .copy-link-field { width: 100%; } @media (min-width: 600px) { .publish-status .leave-dialog-actions .btn-secondary { order: -1; } } /* PRO-287 · Pen PCxFR / Q5c1Yx / Z0NzN6 "Selected paid gift": what signing in will come back to. */ .sign-in-gift { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); } .sign-in-gift-summary { margin: 0; font: 400 var(--font-size-18)/1.4 var(--font-body); color: var(--text); } .sign-in-gift-note { margin: 0; font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } /* Pen Foy2T SYAnp: the account the receipt goes to, read-only, on every paid form. */ .signed-in-as { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); } .signed-in-as p { margin: 0; } .signed-in-as-label, .signed-in-as-note { font: 400 var(--font-size-14)/1.4 var(--font-body); color: var(--muted); } .signed-in-as-email { font: 400 var(--font-size-16)/1.4 var(--font-body); color: var(--text); overflow-wrap: anywhere; } /* PRO-287: a paid button's place while PaymentsGate is closed; same box as .alert, not an error. */ .gifts-closed { display: flex; align-items: center; gap: var(--space-10); margin: 0; padding: var(--space-12) var(--space-14); border-radius: var(--radius-12); background: var(--blush); font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--text); } .gifts-closed .icon { color: var(--primary); flex: none; } /* PRO-287 · Pen igcGc / kyNvn / W7bJql: one payment's status, seen by whoever paid. */ .order-status { gap: var(--space-24); } .order-status p, .order-status h1 { margin: 0; } .order-status[data-state="confirming"] [data-when]:not([data-when~="confirming"]), .order-status[data-state="unknown"] [data-when]:not([data-when~="unknown"]), .order-status[data-state="paused"] [data-when]:not([data-when~="paused"]) { display: none; } .order-heading { font: 400 var(--font-size-34)/1.45 var(--font-body); color: var(--text); } .order-title { font: 400 var(--font-size-34)/1.45 var(--font-body); color: var(--text); } .order-context { font: 400 var(--font-size-20)/1.45 var(--font-body); color: var(--text); } .order-icon { width: 40px; height: 40px; color: var(--primary); } .order-icon svg { width: 100%; height: 100%; } .order-advice { font: 400 var(--font-size-17)/1.45 var(--font-body); color: var(--text); } .order-guidance, .order-intro, .order-gift-from, .order-receipt { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .order-reference, .order-fine { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .order-copy, .order-support, .order-restore { align-self: flex-start; padding: 0; border: 0; background: none; font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--primary); cursor: pointer; text-decoration: none; } .order-copy-fallback { width: 100%; padding: var(--space-8); border: 1px solid var(--border); border-radius: var(--radius-10); background: var(--surface); color: var(--text); font: 400 var(--font-size-14)/1.4 var(--font-body); } .order-gift-art { width: 100px; height: 100px; } .order-gift-message { font: 400 var(--font-size-24)/1.45 var(--font-body); color: var(--text); } /* Pen 15d (a0s7d / s5at6D / qzMgJ desktop, J7qjm / Nk6CH / pvYJJ phone): a gift's payment beside their own page. On phones the page sits between the words and the buttons, so the column's own box steps aside there. */ .order-flow { align-items: stretch; } .order-flow .order-status { display: contents; } .order-flow .order-status > * { order: 2; } .order-flow .order-status > :is(.order-badge, .order-display, .order-text) { order: 0; } .order-badge { width: 72px; height: 72px; } .order-display { font: 500 var(--font-size-40)/1.05 var(--font-display); letter-spacing: -0.5px; } .order-lead { display: block; color: var(--text); } .order-accent { display: block; font-style: italic; color: var(--amber-text); } .order-text { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .order-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .order-link { align-self: flex-start; font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--primary); text-decoration: none; } .order-page { position: relative; order: 1; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: var(--space-150) var(--space-12) var(--space-12); border-radius: var(--radius-20); background: var(--blush); } .order-page-plain { padding-top: var(--space-12); } .order-page-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .order-page:not(.order-page-plain)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0, transparent 55%, var(--photo-shade) 100%); } .order-page-card { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16); } .order-page-card p { margin: 0; } .order-page-head { display: flex; justify-content: space-between; align-items: center; } .order-page-eyebrow { font: 600 var(--font-size-12)/1.2 var(--font-body); letter-spacing: 1.4px; text-transform: uppercase; color: var(--muted); } .order-page-where { display: none; font: 400 var(--font-size-12)/1.2 var(--font-body); color: var(--muted); } .order-shelf { display: flex; gap: var(--space-10); margin: 0; padding: 0; list-style: none; } .order-gift { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-6); min-width: 0; padding: var(--space-12); border-radius: var(--radius-14); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); } .order-gift-new { box-shadow: inset 0 0 0 2px var(--amber-text); } .order-gift-arriving { background: var(--card); } .order-gift-arriving .order-gift-icon { opacity: 0.35; } .order-gift-icon { width: 40px; height: 40px; } .order-gift-title { font: 600 var(--font-size-14)/1.25 var(--font-body); color: var(--text); overflow-wrap: anywhere; } .order-gift-who { font: 400 var(--font-size-12)/1.25 var(--font-body); color: var(--muted); overflow-wrap: anywhere; } .order-gift-new .order-gift-who { color: var(--amber-text); } .order-more-item { display: flex; flex: none; width: 60px; } .order-gift-desktop, .order-more-item-desktop { display: none; } .order-more { display: flex; flex: 1; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-2); border-radius: var(--radius-14); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); text-decoration: none; } .order-more-count { font: 600 var(--font-size-17)/1.2 var(--font-body); color: var(--text); } .order-more-label { font: 400 var(--font-size-12)/1.2 var(--font-body); color: var(--muted); } .order-page-counts { display: flex; align-items: center; gap: var(--space-6); height: 20px; padding: 0 var(--space-4); font: 400 var(--font-size-14)/1 var(--font-body); color: var(--text); } .order-page-counts .candle-art { width: 20px; height: 20px; } .order-lamp { display: flex; flex-direction: column; align-items: center; gap: var(--space-8); padding: var(--space-16); border-radius: var(--radius-14); background: var(--blush); text-align: center; } .order-lamp-glow { display: flex; justify-content: center; align-items: center; width: 96px; height: 96px; border-radius: var(--radius-999); background: radial-gradient(50% 50% at 50% 50%, var(--lamp-halo) 0, transparent 100%); } .order-lamp-icon { width: 64px; height: 64px; } .order-lamp-arriving .order-lamp-icon { opacity: 0.35; } .order-lamp-title { font: 600 var(--font-size-15)/1.3 var(--font-body); color: var(--text); } .order-lamp-who { font: 400 var(--font-size-13)/1.3 var(--font-body); color: var(--muted); } @media (min-width: 1100px) { .order-flow .order-status { display: flex; } .order-display { font-size: var(--font-size-56); } .order-page { flex: 1; height: 620px; padding: var(--space-32); border-radius: var(--radius-24); } .order-page-where { display: block; } .order-gift-desktop, .order-more-item-desktop { display: flex; } .order-more-item-phone { display: none; } .order-more-item { width: 64px; } } /* Pen z5J28c / ZR5CW In04f: the last attempt's outcome above the restored form. */ .payment-notice { display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); } .payment-notice p { margin: 0; } .payment-notice-title { font: 600 var(--font-size-18)/1.3 var(--font-body); color: var(--text); } .payment-notice-body { font: 400 var(--font-size-15)/1.4 var(--font-body); color: var(--muted); } .payment-notice-link { align-self: flex-start; font: 500 var(--font-size-15)/1.4 var(--font-body); color: var(--primary); } /* Pen V2 Gifts · 01 Choose (wDy5I mobile, eqYGQ desktop): column gap 20 at every width, Newsreader throughout. */ .flow-gifts .gift-choose { gap: var(--space-20); } .gift-choose-back { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--primary); text-decoration: none; } .gift-choose-title { font: 400 var(--font-size-34)/1.45 var(--font-body); } .gift-choose-intro { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .gift-choose-steps { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--primary); } .gift-choose-pet { display: flex; align-items: center; gap: var(--space-12); } .gift-choose-pet-photo { flex: none; width: 56px; aspect-ratio: 1; border-radius: var(--radius-12); } .gift-choose-pet-text { font: 400 var(--font-size-16)/1.45 var(--font-body); } .gift-choose-form { display: flex; flex-direction: column; gap: var(--space-20); } .gift-choose-group { display: flex; flex-direction: column; gap: var(--space-20); margin: 0; padding: 0; border: 0; min-width: 0; } .gift-choose-type { margin-bottom: var(--space-20); padding: 0; font: 400 var(--font-size-22)/1.45 var(--font-body); } .gift-choose-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .gift-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-12); } .gift-option { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-10); padding: var(--space-14); border-radius: var(--radius-12); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; } .gift-option:has(input:checked) { box-shadow: inset 0 0 0 2px var(--primary); } .gift-option:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; } .gift-option:has(input:disabled) { cursor: default; opacity: 0.6; } .gift-option input { position: absolute; opacity: 0; pointer-events: none; } .gift-option-art { width: 64px; height: 64px; } .gift-option-label { align-self: stretch; font: 400 var(--font-size-16)/1.45 var(--font-body); text-align: center; } .gift-option-label::before, .gift-option-lamp-label::before { content: '○ '; } .gift-option:has(input:checked) .gift-option-label::before, .gift-option:has(input:checked) .gift-option-lamp-label::before { content: '● '; } .gift-option-lamp { align-items: stretch; padding: var(--space-16); } .gift-option-lamp-label { font: 400 var(--font-size-21)/1.45 var(--font-body); } .gift-option-lamp-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .gift-preview { display: none; } @media (min-width: 600px) { .gift-options { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1100px) { .gift-preview { flex: 1; display: flex; flex-direction: column; gap: var(--space-24); padding: var(--space-32); border-radius: var(--radius-24); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); } } .gift-preview-for { display: flex; align-items: center; gap: var(--space-14); } .gift-preview-avatar { flex: none; width: 48px; aspect-ratio: 1; border-radius: var(--radius-999); } .gift-preview-name { font: 400 var(--font-size-22)/1.2 var(--font-display); } .gift-preview-meta { margin-top: var(--space-2); font: 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); } .gift-preview-rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--border); } .gift-preview-eyebrow { margin-bottom: calc(var(--space-14) - var(--space-24)); font: 600 var(--font-size-13)/1.2 var(--font-body); letter-spacing: 2.4px; color: var(--amber-text); } .gift-preview-shelf { display: flex; justify-content: center; padding: var(--space-28) var(--space-24); border-radius: var(--radius-16); background: var(--bg); } .gift-preview-lamp { flex: 1; } .gift-preview-card { display: flex; flex-direction: column; gap: var(--space-14); width: 280px; padding: var(--space-24); border-radius: var(--radius-card); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); } .gift-preview-art { width: 64px; height: 64px; } .gift-preview-title { font: 600 var(--font-size-19)/1.2 var(--font-body); } .gift-preview-message { font: 400 var(--font-size-17)/1.45 var(--font-body); color: var(--muted); overflow-wrap: anywhere; } .gift-preview-message-typed { color: var(--text); } .gift-preview-who { font: 400 var(--font-size-15)/1.2 var(--font-body); color: var(--muted); } .gift-preview-next { margin-top: calc(var(--space-14) - var(--space-24)); font: 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); } .gift-preview-duration { font: 400 var(--font-size-16)/1.45 var(--font-body); } .gift-preview-price { display: flex; justify-content: space-between; align-items: center; } .gift-preview-item { font: 600 var(--font-size-18)/1.2 var(--font-body); } .gift-preview-amount { font: 400 var(--font-size-28)/1.2 var(--font-display); } .gift-preview-terms { margin-top: calc(var(--space-4) - var(--space-24)); font: 400 var(--font-size-14)/1.2 var(--font-body); color: var(--muted); } /* Pen V2 Upgrade · Gift Forever (f4VOw light, FY6qJ dark): one column, gap 20, Newsreader throughout. */ .give-forever { gap: var(--space-20); } .give-forever-back { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--primary); text-decoration: none; } .give-forever-title { font: 400 var(--font-size-34)/1.45 var(--font-body); } .give-forever-intro { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .give-forever-for { font: 400 var(--font-size-22)/1.45 var(--font-body); } .give-forever-price { font: 400 var(--font-size-34)/1.45 var(--font-body); color: var(--primary); } .give-forever-benefits { font: 400 var(--font-size-18)/1.45 var(--font-body); } .give-forever-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .give-forever .waiver { padding: var(--space-8) 0; border: 0; background: none; } /* Pen f3utej / QQcWo, the owner adding a video: the same column as giving Forever. */ .upgrade-recipient { display: flex; align-items: center; gap: var(--space-14); padding: var(--space-16); border-radius: var(--radius-12); background: var(--surface); } .upgrade-recipient p { flex: 1; font: 400 var(--font-size-18)/1.45 var(--font-body); } .upgrade-recipient-cover { position: relative; flex: none; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-12); background: var(--border); } .upgrade-recipient-cover img { position: absolute; } .upgrade-small { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } /* On the page the head, body and foot are one column; in a dialog they become its three parts. */ .give-forever-head, .give-forever-titlebar, .give-forever-body, .give-forever-foot, .give-forever-actions { display: contents; } /* Pen 15r gZyfK (was h5o0Zj / Am2AI): the offer as a dialog, 560 wide. Title and ✕ stay at the top and the way to pay at the bottom; only the offer between them scrolls, on a thin scrollbar. */ dialog.upgrade-dialog { width: calc(100% - 2 * var(--space-20)); max-width: 560px; max-height: calc(100% - 2 * var(--space-20)); overflow: hidden; padding: 0; border: 0; border-radius: var(--radius-16); background: var(--surface); color: var(--text); } dialog.upgrade-dialog[open] { display: flex; flex-direction: column; } dialog.upgrade-dialog::backdrop { background: var(--scrim); } html:has(dialog.upgrade-dialog[open]) { overflow: hidden; } .upgrade-dialog .give-forever { flex: 1 1 auto; min-height: 0; width: 100%; max-width: none; gap: 0; } .upgrade-dialog .give-forever-head { display: block; padding: var(--space-32) var(--space-32) var(--space-16); } .upgrade-dialog .give-forever-back { display: none; } .upgrade-dialog .give-forever-titlebar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); } .upgrade-dialog .give-forever-title, .upgrade-dialog .give-forever-price { font-size: var(--font-size-36); } .upgrade-close { display: flex; flex: none; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; } .upgrade-close svg { width: 20px; height: 20px; } .upgrade-dialog .give-forever-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-20); min-height: 0; padding: 0 var(--space-32) var(--space-24); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--border) transparent; } .upgrade-dialog .give-forever-foot { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-16) var(--space-32) var(--space-24); border-top: 1px solid var(--border); } .upgrade-dialog .give-forever-actions { display: flex; flex-direction: row-reverse; gap: var(--space-12); } .upgrade-dialog .give-forever-actions > * { flex: 1 1 auto; } .upgrade-dialog .give-forever-actions > [data-upgrade-close]:not(:only-child) { flex: none; width: auto; } .upgrade-grabber { display: none; } /* Pen 15r D6QbW (was HwgbT): on a phone it rises from the bottom as a sheet, buttons stacked. */ @media (max-width: 599px) { dialog.upgrade-dialog { width: 100%; max-width: none; max-height: 92vh; margin: auto 0 0; border-radius: var(--radius-24) var(--radius-24) 0 0; } .upgrade-grabber { display: block; flex: none; padding-top: var(--space-12); } .upgrade-grabber::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: var(--radius-2); background: var(--border); } .upgrade-dialog .give-forever-head { padding: var(--space-8) var(--space-24) var(--space-12); } .upgrade-dialog .give-forever-body { padding: 0 var(--space-24) var(--space-20); } .upgrade-dialog .give-forever-foot { padding: var(--space-16) var(--space-24) max(var(--space-34), env(safe-area-inset-bottom)); } .upgrade-dialog .give-forever-actions { flex-direction: column; } .upgrade-dialog .give-forever-actions > [data-upgrade-close]:not(:only-child) { width: 100%; } } /* Pen 15k candle name: phone sheet hmlB5 / FPtsg (GB2Tw), desktop dialog S8jQFE / su4og (f8Xk5p). */ .leave-scrim.candle-scrim { align-items: flex-end; padding: 0; } .candle-sheet { position: relative; display: flex; flex-direction: column; gap: var(--space-20); width: 100%; padding: var(--space-12) var(--space-24) var(--space-34); border: 1px solid var(--border); border-bottom: 0; border-radius: var(--radius-24) var(--radius-24) 0 0; background: var(--surface); } .candle-grabber { align-self: center; width: 40px; height: 4px; border-radius: var(--radius-2); background: var(--border); } .candle-close { position: absolute; top: var(--space-20); right: var(--space-20); display: flex; color: var(--muted); } .candle-close .icon svg { width: 20px; height: 20px; } .candle-heading { display: flex; align-items: center; gap: var(--space-12); padding-right: var(--space-28); } .candle-badge { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-22); background: var(--blush); color: var(--candle); } .candle-badge .icon svg { width: 22px; height: 22px; } .candle-badge:has(> .candle-art) { background: none; } .candle-badge .candle-art { width: 44px; height: 44px; } .candle-title { margin: 0; font: 500 var(--font-size-26)/1.1 var(--font-display); color: var(--text); } .candle-form { display: flex; flex-direction: column; gap: var(--space-20); } .candle-footnote { margin: 0; font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); text-align: center; } @media (min-width: 900px) { .leave-scrim.candle-scrim { align-items: center; padding: var(--space-20); } .candle-sheet { width: 440px; margin: auto; padding: var(--space-32); border-bottom: 1px solid var(--border); border-radius: var(--radius-16); } .candle-grabber { display: none; } .candle-close { top: var(--space-32); right: var(--space-32); } .candle-title { font-size: var(--font-size-28); } } /* Pen 15m–15o: the memorial page's own dialogs, on the 15k sheet. */ .mem-dialog { max-height: calc(100dvh - var(--space-24)); overflow-y: auto; overscroll-behavior: contain; } .mem-dialog:focus { outline: none; } .mem-dialog-close { padding: 0; border: 0; background: none; cursor: pointer; } .mem-dialog-badge-amber { color: var(--amber-text); } .mem-dialog-badge-primary { color: var(--primary); } .mem-dialog-badge-danger { color: var(--danger); } .mem-dialog-badge-muted { color: var(--muted); } .icon[data-icon="loader-circle"] svg { animation: mem-spin 1.2s linear infinite; } @keyframes mem-spin { to { transform: rotate(360deg); } } /* Pen 15q IKtac share panel. */ .share-lead { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } .share-link { display: flex; align-items: center; gap: var(--space-8); } .share-link-field { flex: 1; min-width: 0; color: var(--muted); } .share-link .btn { flex: none; padding: 13px var(--space-20); } .share-options { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); } .share-option { display: flex; align-items: center; justify-content: center; gap: var(--space-10); height: 48px; padding: 0 var(--space-16); border: 1px solid var(--border); border-radius: var(--radius-999); background: var(--glass); font: 500 var(--font-size-16)/1 var(--font-body); color: var(--text); text-decoration: none; cursor: pointer; } .share-option:hover { border-color: var(--text); } .share-icon { flex: none; width: 20px; height: 20px; } .share-note { font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); } @media (prefers-reduced-motion: reduce) { .icon[data-icon="loader-circle"] svg { animation: none; } } /* lib/land_on_page: a candle or gift just left, flying from mid-screen to its place on the cover. */ .landing-art { position: fixed; top: 0; left: 0; z-index: 1000; width: 112px; height: 112px; pointer-events: none; filter: drop-shadow(0 10px 24px rgb(126 52 32 / 0.25)); } .mem-dialog-lead { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .mem-dialog-what { font: 500 var(--font-size-16)/1.45 var(--font-body); color: var(--text); } .mem-dialog-status { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--muted); } .mem-dialog-form { display: flex; flex-direction: column; gap: var(--space-20); } .mem-gift-tier { display: flex; flex-direction: column; gap: var(--space-10); } .mem-gift-note { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .mem-gift-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-10); } .mem-gift-tile, .mem-gift-lamp { position: relative; border-radius: var(--radius-12); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; } .mem-gift-tile { display: flex; flex-direction: column; align-items: center; gap: var(--space-6); padding: var(--space-12) var(--space-6); } .mem-gift-tile:has(input:checked), .mem-gift-lamp:has(input:checked) { background: var(--blush); box-shadow: inset 0 0 0 2px var(--primary); } .mem-gift-tile:has(input:focus-visible), .mem-gift-lamp:has(input:focus-visible) { outline: 2px solid var(--primary); outline-offset: 2px; } .mem-gift-tile input, .mem-gift-lamp input { position: absolute; opacity: 0; pointer-events: none; } .mem-gift-tile-art { width: 44px; height: 44px; } .mem-gift-tile-label { align-self: stretch; font: 400 var(--font-size-13)/1.3 var(--font-body); color: var(--text); text-align: center; } .mem-gift-lamp { display: flex; align-items: center; gap: var(--space-12); padding: var(--space-14); } .mem-gift-lamp-art { flex: none; width: 40px; height: 40px; } .mem-gift-lamp-text { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); } .mem-gift-lamp-label { font: 500 var(--font-size-16)/1.3 var(--font-body); color: var(--text); } .mem-gift-lamp-note { font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); } .mem-waiver { display: flex; align-items: flex-start; gap: var(--space-10); font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); cursor: pointer; } .mem-waiver input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--primary); } .mem-gift-signed-in { font: 400 var(--font-size-13)/1.45 var(--font-body); color: var(--muted); } .mem-remind { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-20); border-radius: var(--radius-card); background: var(--blush); } .mem-remind-title { display: flex; align-items: center; gap: var(--space-8); font: 600 var(--font-size-15)/1.3 var(--font-body); color: var(--text); } .mem-remind-title .icon { display: flex; flex: none; color: var(--amber-text); } .mem-remind-title .icon svg { width: 18px; height: 18px; } .mem-remind-body { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .mem-remind-form { display: flex; align-items: center; gap: var(--space-8); } .mem-remind-form .input { flex: 1; min-width: 0; } .mem-remind-form .btn { flex: none; } @media (min-width: 900px) { .mem-dialog { max-height: none; overflow: visible; } .mem-dialog-wide { width: 540px; } .mem-dialog .mem-dialog-close { position: static; align-self: flex-end; } .mem-dialog .candle-heading { padding-right: 0; } .mem-gift-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } .mem-forever { flex-direction: row; align-items: center; gap: var(--space-32); padding: var(--space-32) var(--space-40); } .mem-forever-text { flex: 1; } .mem-forever-title { font-size: var(--font-size-30); } .mem-forever .btn { flex: none; } } /* Photos & videos tab (PRO-288; Pen BPmsQ list, TjNgn upload panel, cvWAh filters). */ .media-editor { display: flex; flex-direction: column; gap: var(--space-20); } .media-status { padding: var(--space-14); border-radius: var(--radius-10); background: var(--blush); color: var(--muted); font: 400 var(--font-size-14)/1.4 var(--font-body); white-space: pre-line; } .media-heading { color: var(--text); font: 400 var(--font-size-25)/1.4 var(--font-body); } .media-filters { display: flex; gap: var(--space-8); } .media-filter { height: 36px; padding: 0 var(--space-14); border: 1px solid var(--border); border-radius: var(--radius-999); background: var(--surface); color: var(--text); font: 400 var(--font-size-14)/1 var(--font-body); } .media-filter[aria-pressed="true"] { border-color: var(--primary); background: var(--primary); color: var(--on-primary); } .media-list { display: flex; flex-direction: column; gap: var(--space-20); margin: 0; padding: 0; list-style: none; } .media-row { display: flex; align-items: center; gap: var(--space-12); } .media-row.is-removed .media-thumb { opacity: 0.4; } .media-thumb { position: relative; flex: none; width: 84px; height: 84px; overflow: hidden; border-radius: var(--radius-14); background: var(--blush); } .media-thumb img, .media-thumb video { width: 100%; height: 100%; object-fit: cover; } .media-duration { position: absolute; top: 60px; left: 6px; padding: var(--space-2) var(--space-6); border-radius: var(--radius-6); background: color-mix(in srgb, var(--gallery-bg) 70%, transparent); color: var(--on-gallery); font: 400 var(--font-size-12)/1.2 var(--font-body); } .media-controls { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-8); min-width: 0; } .media-label { color: var(--text); font: 400 var(--font-size-18)/1.4 var(--font-body); } .media-new { color: var(--muted); font-size: var(--font-size-14); } /* Pen BPmsQ: one full-width action, then Replace or Move up beside Remove. */ .media-actions { display: flex; flex-direction: column; gap: var(--space-6); } .media-action-pair { display: flex; gap: var(--space-6); } .media-btn { flex: 1 1 0; height: 44px; padding: 0 var(--space-10); border: 1px solid var(--border); border-radius: var(--radius-8); background: none; color: var(--primary); font: 400 var(--font-size-14)/1 var(--font-body); white-space: nowrap; } .media-btn.media-remove { color: var(--danger); } .media-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-14); padding: var(--space-24); border-radius: var(--radius-12); background: var(--blush); color: var(--muted); font: 400 var(--font-size-16)/1.45 var(--font-body); text-align: center; } .media-empty-icon { color: var(--primary); } .media-hint { color: var(--muted); font: 400 var(--font-size-14)/1.4 var(--font-body); white-space: pre-line; } /* Pen DLABj P6pXXf. */ .media-forever-link { align-self: flex-start; font: 500 var(--font-size-14)/1.2 var(--font-body); color: var(--primary); text-decoration: none; } .media-forever-link:hover, .media-forever-link:focus-visible { text-decoration: underline; } .media-link { padding: 0; border: 0; background: none; color: var(--primary); font: inherit; text-decoration: underline; } .media-add { position: relative; width: 100%; } .media-add: focus-within { outline: 2px solid var(--primary); outline-offset: 2px; } .media-add-input { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Cover crop, Pen r7i31y: a full page on phones, a dialog from tablet up. */ .leave-scrim.crop-scrim { align-items: stretch; padding: 0; background: var(--bg); } .leave-dialog.crop-dialog { max-width: none; margin: 0; padding: var(--space-20); gap: var(--space-24); border-radius: 0; background: var(--bg); } .crop-dialog p, .crop-dialog h2 { margin: 0; } /* Taller than a phone screen: the page scrolls, the 5:6 frame and preview keep their shape. */ .crop-dialog > * { flex: none; } .crop-title { color: var(--text); font: 400 var(--font-size-36)/1.4 var(--font-body); } .crop-help { color: var(--muted); font: 400 var(--font-size-16)/1.4 var(--font-body); } .crop-frame { border-radius: var(--radius-16); overflow: hidden; cursor: grab; touch-action: none; user-select: none; } .crop-frame: active { cursor: grabbing; } .crop-frame: focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; } .crop-view { width: 100%; } .crop-zoom { display: flex; align-items: center; gap: var(--space-12); color: var(--primary); font: 400 var(--font-size-22)/1.4 var(--font-body); } .crop-zoom input { flex: 1 1 0; accent-color: var(--primary); } .crop-zoom-step { width: 44px; height: 44px; border: 0; background: none; color: inherit; font: inherit; } .crop-preview-label { color: var(--text); font: 400 var(--font-size-20)/1.4 var(--font-body); } .crop-preview { width: 150px; border-radius: var(--radius-12); } @media (min-width: 600px) { .leave-scrim.crop-scrim { align-items: center; padding: var(--space-20); background: var(--scrim); } .leave-dialog.crop-dialog { max-width: 560px; margin: auto; border-radius: var(--radius-16); background: var(--surface); } } /* Pen bnbN2 MORMm: a video picked on Free, explained instead of uploaded. */ .media-notice { display: flex; flex-direction: column; gap: var(--space-12); padding: var(--space-14); border: 1px solid var(--border); border-radius: var(--radius-10); background: var(--blush); } .media-notice p { margin: 0; } .media-notice-file { display: flex; align-items: center; gap: var(--space-12); } .media-notice-thumb { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 64px; overflow: hidden; border-radius: var(--radius-8); background: var(--border); } .media-notice-thumb video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.7; } .media-play-icon { position: relative; color: var(--on-gallery); } /* Pen BPmsQ l5NT7: 32 round badge at 26,26 on the 84 thumbnail. */ .media-play { position: absolute; top: 26px; left: 26px; display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-16); background: color-mix(in srgb, var(--gallery-bg) 60%, transparent); } .media-notice-title { color: var(--text); font: 600 var(--font-size-16)/1.3 var(--font-body); } .media-notice-reason { margin-top: var(--space-2); color: var(--muted); font: 400 var(--font-size-14)/1.4 var(--font-body); } .media-notice-actions { display: flex; align-items: center; gap: var(--space-8); } .media-notice-actions .btn { flex: 1 1 0; } .media-notice-actions .upload-link { align-self: stretch; padding: 0 var(--space-16); } .media-player { gap: var(--space-16); } .media-player video { width: 100%; max-height: 70vh; border-radius: var(--radius-12); background: var(--video-bg); } .upload-panel { display: flex; flex-direction: column; gap: var(--space-10); } .upload-card { display: flex; gap: var(--space-12); padding: var(--space-16); border-radius: var(--radius-12); background: var(--surface); } .upload-thumb { flex: none; width: 56px; height: 56px; border-radius: var(--radius-8); object-fit: cover; background: var(--blush); } .upload-body { display: flex; flex: 1 1 0; flex-direction: column; gap: var(--space-10); min-width: 0; } .upload-name { overflow: hidden; color: var(--text); font: 400 var(--font-size-18)/1.3 var(--font-body); text-overflow: ellipsis; white-space: nowrap; } .upload-state { color: var(--muted); font: 400 var(--font-size-14)/1.4 var(--font-body); } .upload-error { color: var(--danger); font: 400 var(--font-size-14)/1.4 var(--font-body); } .upload-track { height: 6px; overflow: hidden; border-radius: var(--radius-999); background: var(--border); } .upload-track span { display: block; height: 100%; border-radius: var(--radius-999); background: var(--primary); } .upload-actions { display: flex; gap: var(--space-8); } /* Pen TjNgn: card buttons are the secondary button (ujWbm) sharing the row; Cancel is a text action. */ .upload-actions .btn { flex: 1 1 0; } .upload-link { align-self: flex-start; padding: 0; border: 0; background: none; color: var(--primary); font: 400 var(--font-size-15)/1.4 var(--font-body); cursor: pointer; } .media-controls > .media-btn { flex: none; align-self: flex-start; min-width: 120px; } .media-actions > .media-btn { flex: none; } @media (min-width: 1100px) { .media-row[draggable="true"] { cursor: grab; } .media-row.is-dragging { opacity: 0.5; } } /* Pen j2or1n candle lit (zU5HS): one column, gap 20, Newsreader throughout; 36 / 16 / 20 / 16 / 14. */ .candle-lit { padding-top: var(--space-8); } .candle-lit-back { font: 400 var(--font-size-15)/1.45 var(--font-body); color: var(--primary); text-decoration: none; } .candle-lit-title { font: 400 var(--font-size-36)/1.45 var(--font-body); } .candle-lit-intro { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--muted); } .candle-lit-icon { display: block; width: 48px; height: 48px; color: var(--primary); } .candle-lit-icon .candle-art { width: 100%; height: 100%; } .candle-lit-count { font: 400 var(--font-size-20)/1.45 var(--font-body); } .candle-lit-remind { font: 400 var(--font-size-16)/1.45 var(--font-body); color: var(--primary); text-decoration: none; } .candle-lit-free { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } /* Pen 15k status line (UQrFM / A2Dzj / bduvJ / VXg5M): 14 / 1.45, muted, danger when it went wrong; a waiting button at 0.55. */ .candle-status { font: 400 var(--font-size-14)/1.45 var(--font-body); color: var(--muted); } .candle-status-error { color: var(--danger); }