:root { --ink: #21191d; --muted: #6c5963; --rose: #e94d78; --marigold: #f6b73c; --mint: #7ad6b5; --plum: #54285f; --paper: #fff8f2; --line: rgba(33, 25, 29, 0.14); --shadow: 0 24px 80px rgba(84, 40, 95, 0.18); --bg-1: #fff8f2; --bg-2: #ffeef2; --bg-3: #f7fff8; } * { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: clip; } body { margin: 0; min-height: 100vh; overflow-x: clip; color: var(--ink); background: radial-gradient(circle at 12% 8%, rgba(246, 183, 60, 0.28), transparent 28rem), radial-gradient(circle at 88% 18%, rgba(122, 214, 181, 0.24), transparent 30rem), linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 42%, var(--bg-3) 100%); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background 420ms ease, color 420ms ease; overflow-wrap: break-word; } img, video, iframe { max-width: 100%; height: auto; } /* * Wishes page color themes (data-color-theme on , set per page in the studio). * --rose/--marigold/--mint are vibrant accents used as gradient fills behind white text * (buttons, hero placeholder, drop-icon), so they're kept medium-to-saturated rather than * pale/pastel. --plum stays dark in every theme because it also doubles as readable text * (eyebrows, stat numbers) on the light card backgrounds used throughout the page. */ body[data-color-theme="sunset"] { --rose: #ff6a45; --marigold: #ffab2e; --mint: #ffd166; --plum: #6b2545; --bg-1: #fff1dd; --bg-2: #ffe2d6; --bg-3: #fff7bd; } body[data-color-theme="lagoon"] { --rose: #00a8cc; --marigold: #2ec4b6; --mint: #7fe7dc; --plum: #1b3a6b; --bg-1: #e9fbff; --bg-2: #e7fff4; --bg-3: #f1f0ff; } body[data-color-theme="rose"] { --rose: #ef476f; --marigold: #ff9f6b; --mint: #c86bd6; --plum: #6a1b4d; --bg-1: #fff0f4; --bg-2: #fff8fb; --bg-3: #f2ecff; } body[data-color-theme="midnight"] { --rose: #8a5cff; --marigold: #ffb648; --mint: #00c2e0; --plum: #2b1a52; --bg-1: #f3f0ff; --bg-2: #eafcff; --bg-3: #fdf1ff; } body[data-color-theme="garden"] { --rose: #ff6b6b; --marigold: #f4a72e; --mint: #6fcf97; --plum: #1f6b4a; --bg-1: #f2fff7; --bg-2: #fff9d9; --bg-3: #ffeef0; } /* Reveal-page layout templates (data-layout on , chosen per page in the studio) */ body[data-layout="cinematic"] .hero { min-height: 100svh; align-items: center; } body[data-layout="cinematic"] .hero-content { text-align: center; margin-inline: auto; } body[data-layout="cinematic"] .hero-copy { margin-inline: auto; } body[data-layout="cinematic"] .hero-actions { width: min(100%, 48rem); margin-inline: auto; justify-content: flex-end; } body[data-layout="cinematic"] h1 { margin-inline: auto; font-size: clamp(2.7rem, 7.2vw, 5.1rem); } body[data-layout="cinematic"] .media-card { grid-column: span 12; } body[data-layout="cinematic"] .media-card.is-portrait { grid-column: span 6; } body[data-layout="cinematic"] .media-card.is-square, body[data-layout="cinematic"] .media-card.is-audio { grid-column: span 6; } body[data-layout="scrapbook"] .section.collection { background: color-mix(in srgb, var(--paper) 60%, white); } body[data-layout="scrapbook"] .media-card { padding: 0.6rem 0.6rem 0.9rem; border: 1px solid rgba(33, 25, 29, 0.08); border-radius: 4px; background: #fffdf9; box-shadow: 0 18px 30px rgba(84, 40, 95, 0.16); transform: rotate(-1.4deg); } body[data-layout="scrapbook"] .media-card:nth-child(even) { transform: rotate(1.6deg); } body[data-layout="scrapbook"] .media-card:nth-child(3n) { transform: rotate(-0.6deg); } body[data-layout="scrapbook"] .media-card:hover { transform: rotate(0deg) scale(1.02); transition: transform 220ms ease; } body[data-layout="scrapbook"] .media-frame { border-radius: 2px; } body[data-layout="scrapbook"] .media-card.is-landscape { grid-column: span 6; } body[data-layout="grid"] .media-card, body[data-layout="grid"] .media-card.is-portrait, body[data-layout="grid"] .media-card.is-square, body[data-layout="grid"] .media-card.is-landscape, body[data-layout="grid"] .media-card.is-wide, body[data-layout="grid"] .media-card.is-audio { grid-column: span 4; } body[data-layout="grid"] .media-frame { aspect-ratio: 1 / 1; } body[data-layout="grid"] .hero { min-height: 68svh; } body[data-layout="timeline"] .media-grid { grid-template-columns: 1fr; max-width: 42rem; margin-inline: auto; position: relative; padding-left: 1.6rem; } body[data-layout="timeline"] .media-grid::before { content: ""; position: absolute; left: 0.35rem; top: 0.5rem; bottom: 0.5rem; width: 2px; background: linear-gradient(var(--rose), var(--mint)); opacity: 0.5; } body[data-layout="timeline"] .media-card, body[data-layout="timeline"] .media-card.is-portrait, body[data-layout="timeline"] .media-card.is-square, body[data-layout="timeline"] .media-card.is-landscape, body[data-layout="timeline"] .media-card.is-wide, body[data-layout="timeline"] .media-card.is-audio { grid-column: 1 / -1; } button, input { font: inherit; } a { color: inherit; } [hidden] { display: none !important; } #confetti { position: fixed; inset: 0; z-index: 20; width: 100%; height: 100%; pointer-events: none; } body.face-pick-mode #confetti, body[data-confetti="off"] #confetti { display: none !important; } .music-controls { position: fixed; right: 1rem; bottom: 1rem; z-index: 100; display: grid; grid-template-columns: auto 7rem auto auto; align-items: center; gap: 0.42rem; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; padding: 0.35rem 0.5rem; color: white; background: rgba(33, 25, 29, 0.5); box-shadow: 0 16px 42px rgba(33, 25, 29, 0.18); font-weight: 900; pointer-events: auto; backdrop-filter: blur(16px); } .music-controls.is-playing { background: linear-gradient(135deg, rgba(233, 77, 120, 0.9), rgba(246, 183, 60, 0.9)); } .music-button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: 50%; padding: 0; color: white; background: rgba(255, 255, 255, 0.14); font-size: 0.78rem; font-weight: 900; cursor: pointer; } .music-button.primary { color: var(--ink); background: white; } .music-progress { width: 100%; accent-color: var(--marigold); } .music-progress, .music-volume input { height: 0.25rem; cursor: pointer; } .music-volume { display: flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; font-weight: 500; } .music-volume input { width: 3.8rem; accent-color: var(--mint); } .music-time { min-width: 2.35rem; font-size: 0.72rem; font-weight: 500; color: rgba(255, 255, 255, 0.9); } #backgroundMusic { position: fixed; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .spotify-player { position: fixed; right: 1rem; bottom: 1rem; z-index: 99; width: min(22rem, calc(100vw - 2rem)); overflow: hidden; border-radius: 12px; box-shadow: 0 16px 42px rgba(33, 25, 29, 0.18); } .spotify-player iframe { display: block; width: 100%; max-width: none; height: 152px; border: 0; } .spotify-player.is-soundcloud iframe { height: 166px; } .spotify-player.is-compact iframe { height: 80px; } body.has-spotify-player .music-controls:not([hidden]) { bottom: 11.5rem; } body.has-spotify-player:has(.spotify-player.is-soundcloud) .music-controls:not([hidden]) { bottom: calc(166px + 2rem); } /* Keep Submit + full footer clear of the fixed embed when scrolled to the end. */ body.has-spotify-player .site-footer { padding-bottom: calc(12.75rem + env(safe-area-inset-bottom, 0px)); } body.has-spotify-player:has(.spotify-player.is-compact) .site-footer { padding-bottom: calc(7.75rem + env(safe-area-inset-bottom, 0px)); } .admin-lock { position: fixed; left: calc(0.55rem + env(safe-area-inset-left, 0px)); top: auto; bottom: calc(0.55rem + env(safe-area-inset-bottom, 0px)); z-index: 100; border: 0; padding: 0.18rem 0.3rem; color: rgba(33, 25, 29, 0.52); background: rgba(255, 255, 255, 0.52); border-radius: 4px; font-size: 0.58rem; font-weight: 500; cursor: pointer; } .celebration-footer { padding-top: 1.35rem; } .celebration-footer .invite-footer-branding { margin-bottom: 0.75rem; } .celebration-brand { display: inline-flex; align-items: center; gap: 0.32rem; color: #241b21; text-decoration: none; font-size: 0.88rem; font-weight: 1000; line-height: 1; white-space: nowrap; } .celebration-brand .brand-mark { width: 1.15rem; height: 1.15rem; border-radius: 0.28rem; } .admin-modal { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 1rem; background: rgba(33, 25, 29, 0.46); backdrop-filter: blur(10px); } .admin-modal[hidden] { display: none; } .admin-panel { width: min(42rem, 100%); max-height: min(42rem, calc(100vh - 2rem)); overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: var(--paper); box-shadow: var(--shadow); } .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .admin-head h2 { margin: 0; font-size: 1.1rem; } .admin-close { border: 0; background: transparent; color: var(--ink); font-size: 1.5rem; cursor: pointer; } .admin-login { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.5rem; margin-top: 1rem; } .admin-upload { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.5rem; margin-top: 0.5rem; } .admin-upload[hidden] { display: none; } .admin-login input, .admin-upload select, .admin-upload input, .admin-upload button, .admin-login button, .admin-file button { border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.75rem; } .admin-upload select, .admin-upload input { background: white; } .admin-login button, .admin-upload button, .admin-file button { color: white; background: var(--ink); font-weight: 800; cursor: pointer; } .admin-message { margin-top: 0.75rem; color: var(--muted); font-size: 0.9rem; } .admin-list { display: grid; gap: 0.5rem; margin-top: 1rem; } .admin-file { display: grid; grid-template-columns: auto 4.2rem minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem; background: white; } .admin-preview { display: grid; width: 4.2rem; height: 4.2rem; place-items: center; overflow: hidden; border-radius: 8px; border: 1px solid var(--line); background: rgba(33, 25, 29, 0.08); color: var(--muted); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.04em; } .admin-preview img, .admin-preview video { width: 100%; height: 100%; object-fit: cover; } .admin-preview audio { width: 100%; height: 100%; } .admin-bucket { border-radius: 999px; padding: 0.18rem 0.45rem; color: white; background: var(--plum); font-size: 0.68rem; font-weight: 800; } .admin-path { overflow-wrap: anywhere; font-size: 0.86rem; } .admin-info { display: grid; gap: 0.15rem; min-width: 0; } .admin-name { font-size: 0.9rem; font-weight: 900; } .admin-meta { color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .admin-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; align-items: center; max-width: 16rem; } .admin-file.is-hidden { opacity: 0.56; } .hero { position: relative; display: grid; align-items: end; min-height: 94svh; overflow: hidden; isolation: isolate; } .hero-media, .hero-scrim { position: absolute; inset: 0; } .hero-media { z-index: -3; display: flex; flex-wrap: wrap; align-content: stretch; gap: 0.45rem; background: linear-gradient(135deg, var(--rose), var(--marigold) 38%, var(--mint) 68%, var(--plum)); } .hero-tile, .hero-media .placeholder-tile { position: relative; display: grid; flex: 1 1 clamp(10rem, 24vw, 22rem); min-height: 12rem; place-items: center; overflow: hidden; background: var(--plum); animation: heroTileIn 700ms ease backwards; transition: transform 160ms ease; will-change: transform; } .hero-tile:nth-child(2), .hero-media .placeholder-tile:nth-child(2) { animation-delay: 90ms; } .hero-tile:nth-child(3), .hero-media .placeholder-tile:nth-child(3) { animation-delay: 180ms; } .hero-tile:nth-child(4), .hero-media .placeholder-tile:nth-child(4) { animation-delay: 270ms; } .hero-tile:nth-child(n+5), .hero-media .placeholder-tile:nth-child(n+5) { animation-delay: 340ms; } @keyframes heroTileIn { from { opacity: 0; transform: perspective(900px) scale(0.94); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-tile, .hero-media .placeholder-tile { animation: none; } } .hero-tile.is-portrait { flex-basis: clamp(9rem, 18vw, 16rem); } .hero-tile.is-wide { flex-basis: clamp(17rem, 38vw, 34rem); } .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(1.08) contrast(1.02); } .hero-media .placeholder-tile { min-height: 13rem; /* Stays transparent so the one continuous gradient on .hero-media shows through as a single flowing backdrop instead of a repeated gradient per tile. */ background: transparent; } .hero-scrim { z-index: -2; background: linear-gradient( 90deg, color-mix(in srgb, var(--plum) 78%, black) 0%, color-mix(in srgb, var(--plum) 34%, transparent) 54%, color-mix(in srgb, var(--plum) 10%, transparent) 100% ), linear-gradient( 0deg, color-mix(in srgb, var(--plum) 68%, black) 0%, color-mix(in srgb, var(--plum) 4%, transparent) 48% ); } .hero-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .hero-orb { position: absolute; border-radius: 50%; filter: blur(2.6rem); opacity: 0.55; animation: morphBlob 9s ease-in-out infinite; } .hero-orb.orb-a { top: -4rem; right: 8%; width: 16rem; height: 16rem; background: var(--marigold); } .hero-orb.orb-b { bottom: -6rem; left: 4%; width: 20rem; height: 20rem; background: var(--mint); animation-delay: -3s; } .hero-orb.orb-c { top: 32%; left: 46%; width: 12rem; height: 12rem; background: var(--rose); animation-delay: -6s; } .hero-sparkles { position: absolute; top: 3.6rem; left: 2rem; display: flex; gap: 0.5rem; transform: rotate(-8deg); } .hero-sparkles span { display: block; width: 0.6rem; height: 1.8rem; border-radius: 999px; background: var(--marigold); animation: sparkleStep 1.8s ease-in-out infinite; } .hero-sparkles span:nth-child(2) { background: var(--rose); animation-delay: 0.16s; } .hero-sparkles span:nth-child(3) { background: var(--mint); animation-delay: 0.32s; } .hero-sparkles span:nth-child(4) { background: var(--plum); animation-delay: 0.48s; } .hero-sparkles span:nth-child(5) { background: var(--marigold); animation-delay: 0.64s; } @media (max-width: 720px) { .hero-orb { display: none; } } .hero-content { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; padding: 9rem 0 7rem; color: white; } .kicker, .eyebrow { margin: 0 0 0.75rem; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; } /* .kicker only ever appears over the dark hero scrim; marigold reads well there. */ .kicker { color: var(--marigold); } /* .eyebrow appears on light card/section backgrounds elsewhere, so it needs a dark, readable accent. */ .eyebrow { color: var(--plum); } .evil-eye { opacity: 0.72; font-size: 0.85em; margin-left: 0.18rem; } h1, h2, h3, p { text-wrap: pretty; } h1 { max-width: 48rem; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.25rem, 6.2vw, 4.35rem); line-height: 0.92; letter-spacing: 0; } .hero-copy { max-width: 37rem; margin: 1.35rem 0 0; color: rgba(255, 255, 255, 0.9); font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.55; } .hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.75rem; max-width: 48rem; margin-top: 2rem; } .button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 999px; padding: 0.78rem 1.1rem; color: white; background: rgba(255, 255, 255, 0.12); font-weight: 800; text-decoration: none; backdrop-filter: blur(14px); cursor: pointer; } .button.primary { border-color: transparent; background: linear-gradient(135deg, var(--rose), var(--marigold)); color: white; box-shadow: 0 14px 34px rgba(233, 77, 120, 0.28); } .button.wide { width: 100%; } /* Action clusters sit on the right of their column. Centered pages keep that column centred. */ .landing-nav-actions, .landing-hero-actions, .workspace-group-actions, .workspace-bottom-actions, .dashboard-actions, .create-page-actions, .upload-login-actions, .face-pick-actions, .face-reference-actions, .saved-face-actions, .recording-actions, .media-source-actions, .analytics-toolbar-actions { justify-content: flex-end; } .landing-final .landing-hero-actions { width: min(100%, 36rem); justify-content: flex-end; } .dashboard-edit-grid > .button, .dashboard-panel > form > .button:not(.wide), .add-invitee-form > .button { grid-column: 1 / -1; justify-self: end; } .reveal-card > .button { justify-self: end; } .hero-status { position: absolute; right: 1rem; bottom: 1rem; max-width: min(24rem, calc(100% - 2rem)); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 0.65rem 0.9rem; color: rgba(255, 255, 255, 0.86); background: rgba(22, 11, 18, 0.42); font-size: 0.82rem; backdrop-filter: blur(16px); } .wishes-band { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border-block: 1px solid var(--line); } .wish { min-width: 0; min-height: 10rem; padding: 1.5rem; background: color-mix(in srgb, var(--bg-1) 82%, white); } .wish span { display: block; color: var(--plum); font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.8rem, 7vw, 5rem); line-height: 0.9; } .wish p { margin: 0.8rem 0 0; color: var(--muted); font-weight: 800; } .section { width: min(72rem, calc(100% - 2rem)); margin: 0 auto; padding: 5.5rem 0; } .section-heading { display: grid; gap: 0.35rem; margin-bottom: 1.6rem; } .section-heading h2 { max-width: 48rem; margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(2.1rem, 7vw, 4.4rem); line-height: 0.98; letter-spacing: 0; } .event-section .section-heading h2 { max-width: 100%; line-height: 1.15; overflow-wrap: anywhere; word-break: break-word; } .toolbar { display: flex; gap: 0.55rem; overflow-x: auto; padding-bottom: 0.85rem; } .chip { flex: 0 0 auto; border: 1px solid var(--line); border-radius: 999px; padding: 0.62rem 0.9rem; color: var(--ink); background: rgba(255, 255, 255, 0.68); font-weight: 800; cursor: pointer; } .chip.active { border-color: transparent; background: var(--ink); color: white; } .face-pick-banner, .face-scan-status { border: 1px solid var(--line); border-radius: 12px; padding: 0.9rem 1rem; background: rgba(255, 255, 255, 0.82); color: var(--ink); } .face-pick-banner { margin-bottom: 0.75rem; } .face-pick-copy { display: flex; flex-direction: column; gap: 0.75rem; } .face-pick-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; } .face-pick-actions .button, .face-pick-actions label.button { margin: 0; } .face-pick-actions .button:not(.primary), .face-pick-actions label.button, .face-camera-panel .button:not(.primary) { color: var(--ink); border-color: var(--line); background: rgba(255, 255, 255, 0.92); } .face-pick-actions input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .face-camera-panel { margin-bottom: 0.75rem; color: var(--ink); position: relative; z-index: 30; } .face-camera-panel .eyebrow { color: var(--plum); } .face-camera-panel h3, .face-camera-panel .recording-status { color: var(--ink); } .face-camera-panel video, .face-enroll-stage video { width: 100%; max-height: min(50vh, 22rem); object-fit: cover; transform: scaleX(-1); } .face-enroll-stage { position: relative; width: min(100%, 22rem); margin: 0.35rem auto 0; aspect-ratio: 1; overflow: hidden; border-radius: 50%; background: #1b1216; } .face-enroll-stage video, .face-enroll-overlay { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; transform: scaleX(-1); } .face-enroll-ring { position: absolute; inset: 8px; border-radius: 50%; pointer-events: none; border: 3px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 0 0 2px rgba(233, 77, 120, calc(var(--enroll-progress, 0) * 0.85)); background: conic-gradient( var(--rose) calc(var(--enroll-progress, 0) * 1%), transparent 0 ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); } .face-enroll-pose-label, .face-enroll-progress { margin: 0.7rem 0 0; color: var(--ink); font-weight: 800; text-align: center; } .face-enroll-progress { color: var(--muted); font-size: 0.88rem; font-weight: 700; } .face-enroll-preview { display: block; width: 6rem; height: 6rem; margin: 0.75rem auto 0; border: 1px solid var(--line); border-radius: 16px; object-fit: cover; } .face-my-photos { margin-bottom: 0.75rem; } .face-my-photos-grid { display: flex; gap: 0.65rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 0.35rem; } .face-my-photo { flex: 0 0 auto; width: 5.5rem; height: 5.5rem; padding: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: transparent; cursor: pointer; } .face-my-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } @media (max-width: 520px) { .face-pick-banner { flex-direction: column; align-items: stretch; } .face-pick-banner .button, .face-pick-actions .button, .face-pick-actions label.button { width: 100%; } .face-enroll-stage { width: min(100%, 18rem); } .face-reference-profile { flex-direction: column; align-items: flex-start; } .face-reference-actions .button, .saved-face-actions .button { width: 100%; } } .face-pick-banner p { margin: 0; color: var(--muted); } .face-scan-status { margin-bottom: 0.75rem; color: var(--muted); } body.face-pick-mode .face-pick-target { cursor: crosshair; outline: 2px dashed rgba(233, 77, 120, 0.75); outline-offset: 3px; } .face-reference-profile { display: flex; align-items: center; gap: 1rem; } .face-reference-thumb { width: 96px; height: 96px; border-radius: 16px; object-fit: cover; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.8); flex: 0 0 96px; } .face-reference-copy { display: grid; gap: 0.75rem; } .face-reference-actions, .saved-face-actions, .face-duplicate-suggestions { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; } .face-enroll-name-field { display: grid; gap: 0.35rem; color: var(--muted); font-size: 0.92rem; } .face-enroll-name-field input, .face-enroll-name-field select { width: 100%; min-height: 2.75rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.55rem 0.75rem; background: rgba(255, 255, 255, 0.9); color: var(--ink); } .face-people-chips { display: flex; gap: 0.55rem; overflow-x: auto; padding: 0 0 0.85rem; } .saved-faces { display: grid; gap: 1rem; margin: 1rem 0; } .saved-face-card { display: grid; gap: 0.85rem; padding: 0.9rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.72); } .saved-face-head { display: grid; gap: 0.75rem; } .saved-selfie-sets { display: grid; gap: 0.85rem; } .saved-selfie-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.55rem; } .saved-selfie { display: grid; gap: 0.3rem; margin: 0; justify-items: center; } .saved-selfie img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 10px; background: rgba(255, 255, 255, 0.8); border: 1px solid var(--line); } .saved-selfie-pose { margin: 0; font-size: 0.78rem; line-height: 1.2; color: var(--muted); text-align: center; } .saved-selfie-delete { margin: 0; padding: 0; border: 0; background: none; color: var(--muted); font: inherit; font-size: 0.72rem; cursor: pointer; text-decoration: underline; } .saved-selfie-delete:hover, .saved-selfie-delete:focus-visible { color: var(--ink); } .status-panel, .mini-status { border: 1px solid var(--line); border-radius: 8px; padding: 0.9rem 1rem; color: var(--muted); background: rgba(255, 255, 255, 0.7); } .media-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-flow: dense; gap: 1rem; margin-top: 1rem; } .media-card { position: relative; grid-column: span 6; overflow: visible; border: 1px solid var(--line); border-radius: 8px; background: rgba(255, 255, 255, 0.82); box-shadow: var(--shadow); transition: transform 160ms ease, box-shadow 160ms ease; will-change: transform; } .media-card:hover { box-shadow: 0 30px 60px rgba(84, 40, 95, 0.24); } /* Scroll-reveal entrance, toggled by an IntersectionObserver in app.js/invite.js */ .reveal-item { opacity: 0; transform: translateY(24px); transition: opacity 560ms ease, transform 560ms ease; } .reveal-item.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal-item { opacity: 1; transform: none; transition: none; } } .media-card.is-portrait { grid-column: span 4; } .media-card.is-square { grid-column: span 5; } .media-card.is-landscape { grid-column: span 7; } .media-card.is-wide { grid-column: span 12; } .media-card.is-audio { grid-column: span 4; align-self: start; } .media-caption { display: grid; gap: 0.2rem; border-top: 1px solid var(--line); padding: 0.55rem 0.7rem 0.65rem; color: var(--muted); } .media-chrome { position: absolute; right: 0.35rem; top: 0.35rem; z-index: 4; display: inline-flex; align-items: center; gap: 0.2rem; } .media-flag-button, .media-rotate-button { position: relative; display: inline-grid; place-items: center; width: 1.55rem; height: 1.55rem; min-height: 1.55rem; min-width: 1.55rem; padding: 0; border: 0; border-radius: 0; background: transparent; color: rgba(255, 255, 255, 0.72); font-size: 0; line-height: 0; cursor: pointer; touch-action: manipulation; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45)); } .media-flag-button:hover, .media-flag-button:focus-visible, .media-rotate-button:hover, .media-rotate-button:focus-visible { color: rgba(255, 255, 255, 0.95); } .media-flag-button svg, .media-rotate-button svg { width: 0.78rem; height: 0.78rem; fill: currentColor; pointer-events: none; } .hero-tile .media-chrome { right: 0.45rem; top: 0.45rem; } .media-flag-button:disabled, .media-rotate-button:disabled { opacity: 0.55; } .media-reactions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.35rem; padding: 0.45rem 0.65rem 0.15rem; } .media-reaction-button { position: relative; display: inline-flex; align-items: center; gap: 0.28rem; min-height: 2rem; padding: 0.2rem 0.55rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: var(--ink); font-size: 0.78rem; font-weight: 700; line-height: 1; cursor: pointer; touch-action: manipulation; } .media-reaction-emoji { font-size: 0.95rem; line-height: 1; pointer-events: none; } .media-reaction-button[data-reaction="download"].is-active { border-color: rgba(56, 132, 196, 0.45); background: rgba(56, 132, 196, 0.12); } .media-reaction-button[data-reaction="bookmark"].is-active { border-color: rgba(180, 120, 40, 0.5); background: rgba(246, 183, 60, 0.18); } .media-reaction-button[data-reaction="share"].is-active { border-color: rgba(59, 130, 246, 0.45); background: rgba(59, 130, 246, 0.12); } .media-reaction-button[data-reaction="heart"].is-active { border-color: rgba(225, 29, 72, 0.45); background: rgba(225, 29, 72, 0.12); } .media-reaction-button[data-reaction="clap"].is-active { border-color: rgba(196, 164, 132, 0.55); background: rgba(196, 164, 132, 0.18); } .media-reaction-button[data-reaction="like"].is-active { border-color: rgba(234, 179, 8, 0.55); background: rgba(234, 179, 8, 0.16); } .media-reaction-button:disabled { opacity: 0.7; } .media-chrome [data-tooltip]::after, .media-reaction-button[data-tooltip]::after { content: attr(data-tooltip); position: absolute; z-index: 20; left: 50%; width: max-content; max-width: 11rem; padding: 0.28rem 0.45rem; border-radius: 0.35rem; background: rgba(33, 25, 29, 0.92); color: #fff; font-size: 0.68rem; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; white-space: nowrap; opacity: 0; transform: translateX(-50%) translateY(0.15rem); pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; } .media-chrome [data-tooltip]::after { top: calc(100% + 0.35rem); } .media-reaction-button[data-tooltip]::after { bottom: calc(100% + 0.35rem); top: auto; transform: translateX(-50%) translateY(-0.15rem); } .media-chrome [data-tooltip]:hover::after, .media-chrome [data-tooltip]:focus-visible::after, .media-reaction-button[data-tooltip]:hover::after, .media-reaction-button[data-tooltip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); } .hero-tile .media-reactions { position: absolute; right: 0.45rem; left: auto; bottom: 0.45rem; z-index: 4; padding: 0; } .hero-tile .media-reaction-button { background: rgba(35, 25, 29, 0.62); border-color: rgba(255, 255, 255, 0.35); color: rgba(255, 255, 255, 0.95); } .hero-tile .media-reaction-button.is-active { background: rgba(35, 25, 29, 0.82); border-color: rgba(255, 255, 255, 0.55); } .caption-name { font-size: 0.82rem; font-weight: 700; color: var(--ink); } .caption-text { font-size: 0.84rem; line-height: 1.35; } .media-frame { display: grid; min-height: 8rem; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--plum) 14%, transparent), color-mix(in srgb, var(--mint) 18%, transparent)), var(--plum); } .media-frame img, .media-frame video { width: 100%; height: 100%; object-fit: contain; object-position: center; } .media-unavailable { display: grid; width: 100%; height: 100%; min-height: 8rem; place-items: center; color: rgba(255, 248, 242, 0.78); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .media-frame audio { width: min(100%, 22rem); } .media-card.is-audio .media-frame { min-height: 0; aspect-ratio: auto; padding: 0.75rem; background: rgba(33, 25, 29, 0.9); } .file-badge { display: grid; width: 6rem; height: 6rem; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--plum), var(--rose)); font-weight: 900; } .upload-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; } .event-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; align-items: start; } .event-detail-list { display: grid; gap: 0.85rem; margin: 0; } .event-detail-list dt { margin: 0 0 0.15rem; color: var(--muted); font-size: 0.76rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; } .event-detail-list dd { margin: 0; font-size: 0.95rem; line-height: 1.45; overflow-wrap: anywhere; } .event-location-link-row { margin-top: 0.35rem; } .event-location-link, .event-details-notes a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; word-break: break-word; } .event-schedule-list { display: grid; gap: 0.55rem; margin: 0; padding: 0; list-style: none; } .event-schedule-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.65rem; align-items: center; padding: 0.7rem 0.8rem; border-radius: 12px; background: rgba(255, 255, 255, 0.55); border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); } .event-schedule-item-copy { display: grid; gap: 0.15rem; min-width: 0; } .event-schedule-item-copy strong, .event-schedule-item-copy strong a { font-size: 0.95rem; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } .event-schedule-item-copy strong a { color: inherit; text-decoration: underline; text-underline-offset: 0.12em; } .event-schedule-item-copy span { color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; word-break: break-word; } .event-schedule-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; } .event-schedule-link { display: inline-flex; align-items: center; justify-content: center; justify-self: end; width: 2.35rem; height: 2.35rem; border-radius: 999px; color: #fff; background: #333; text-decoration: none; flex-shrink: 0; } .event-schedule-link .music-follow-logo { width: 1.15rem; height: 1.15rem; fill: currentColor; } .event-schedule-link-youtube, .event-schedule-link-youtubeMusic, .event-schedule-link-youtubeShorts { background: #ff0000; } .event-schedule-link-spotify { background: #1db954; color: #04130a; } .event-schedule-link-instagram { background: #e1306c; } .event-schedule-link-facebook { background: #1877f2; } .event-schedule-link-tiktok { background: #111; } .event-schedule-link-zoom { background: #2d8cff; } .event-schedule-link-x { background: #111; } .event-schedule-link-threads { background: #111; } .event-schedule-link-whatsapp { background: #25d366; color: #06210d; } .event-schedule-link-appleMusic { background: #fc3c44; } .event-schedule-link-soundcloud { background: #ff5500; } .event-schedule-link-link { background: color-mix(in srgb, var(--plum) 80%, #1a1020); } .section.event-schedule-section { padding-top: 1rem; padding-bottom: 0.35rem; } .invite-body .section.event-section { padding-top: 0.85rem; padding-bottom: 0.35rem; } .invite-event-card { width: min(40rem, 100%); margin: 0 auto 1rem; border-radius: 20px; padding: 1.35rem 1.05rem 1.25rem; color: var(--ink); background: radial-gradient(circle at 12% 0%, color-mix(in srgb, var(--marigold) 42%, transparent), transparent 42%), radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--rose) 38%, transparent), transparent 40%), linear-gradient(165deg, color-mix(in srgb, white 88%, var(--bg-1)), color-mix(in srgb, var(--bg-2) 55%, white)); border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); box-shadow: var(--shadow); } .event-section-past .invite-event-card { background: #f0f0f0; border-color: #dedede; color: #686868; box-shadow: none; } .event-section-past .invite-event-heading .eyebrow, .event-section-past .invite-event-heading h2, .invite-body .event-section-past .event-detail-list dt, .invite-body .event-section-past .event-detail-list dd { color: #686868; } .event-section-past .invite-event-cover img { filter: grayscale(1); } .invite-event-heading { display: grid; gap: 0.35rem; margin: 0 0 1rem; text-align: center; justify-items: center; } .invite-event-cover { width: min(8.5rem, 46vw); aspect-ratio: 1; border-radius: 16px; overflow: hidden; margin: 0 0 0.35rem; box-shadow: 0 14px 30px rgba(84, 40, 95, 0.22); border: 1px solid color-mix(in srgb, var(--line) 50%, transparent); } .invite-event-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .invite-event-heading .eyebrow { margin: 0; color: color-mix(in srgb, var(--plum) 70%, var(--muted)); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .invite-event-heading h2 { margin: 0; max-width: 100%; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.7rem, 5.8vw, 2.55rem); line-height: 1.12; letter-spacing: -0.01em; overflow-wrap: anywhere; word-break: break-word; } .invite-body .event-layout { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; } @media (min-width: 720px) { .invite-body .event-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0.85rem; } } .invite-body .event-details-card, .invite-body .event-rsvp-card, .invite-body .event-verify-card { margin: 0; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); background: color-mix(in srgb, white 86%, transparent); box-shadow: none; } .invite-body .event-details-card { padding: 0.95rem 0.95rem 1rem; } .invite-body .event-detail-list { gap: 0.95rem; } .invite-body .event-detail-list dt { color: color-mix(in srgb, var(--plum) 55%, var(--muted)); font-size: 0.72rem; } .invite-body .event-detail-list dd { font-size: 1.02rem; font-weight: 650; line-height: 1.4; } .invite-body .event-detail-when dd, .invite-body .event-detail-where dd:first-of-type { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.05rem, 3.4vw, 1.22rem); font-weight: 500; } .invite-body .event-rsvp-card { padding: 0.95rem; } .invite-body .event-rsvp-card .dashboard-panel-head h2 { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-weight: 600; } .invite-body .event-rsvp-card .button.primary { margin-top: 0.35rem; } .event-schedule-card { width: min(36rem, 100%); margin: 0 auto 1rem; border-radius: 20px; padding: 1.25rem 1.05rem 1.2rem; color: var(--ink); background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--mint) 28%, transparent), transparent 42%), radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--plum) 18%, transparent), transparent 40%), linear-gradient(165deg, color-mix(in srgb, white 90%, var(--bg-1)), color-mix(in srgb, var(--bg-3) 40%, white)); box-shadow: var(--shadow); border: 1px solid color-mix(in srgb, var(--line) 65%, transparent); } .event-schedule-title { margin: 0 0 0.9rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 4.8vw, 1.9rem); line-height: 1.15; text-align: center; } .invite-body .event-schedule-item { padding: 0.85rem 0.9rem; border-radius: 14px; background: color-mix(in srgb, white 88%, var(--bg-1)); border: 1px solid color-mix(in srgb, var(--line) 55%, transparent); box-shadow: 0 8px 18px rgba(84, 40, 95, 0.06); } .invite-body .event-schedule-item-copy strong { font-family: Georgia, "Times New Roman", serif; font-size: 1.02rem; font-weight: 600; } .invite-body .event-schedule-item-past { background: #f0f0f0; border-color: #dedede; box-shadow: none; } .invite-body .event-schedule-item-past .event-schedule-item-copy strong, .invite-body .event-schedule-item-past .event-schedule-item-copy span { color: #686868; } .event-verify-card .invite-link-field { margin-top: 0.4rem; } .invite-auth-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } @media (max-width: 720px) { .event-layout { grid-template-columns: minmax(0, 1fr); } } .upload-login-required { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: rgba(255, 255, 255, 0.78); box-shadow: var(--shadow); } .upload-login-required p { margin: 0 0 0.75rem; color: var(--muted); font-weight: 700; } .upload-login-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.55rem; } .upload-login-actions .button { min-height: 2.75rem; } .cloud-import-login-required { margin-top: 0.85rem; border: 0; border-left: 4px solid var(--rose); border-radius: 6px; box-shadow: none; background: rgba(255, 248, 242, 0.86); } .upload-box, .upload-results, .uploaded-media-results { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: rgba(255, 255, 255, 0.78); box-shadow: var(--shadow); } .upload-box.is-disabled { opacity: 0.62; pointer-events: none; } .drop-zone { position: relative; display: grid; min-height: 16rem; place-items: center; gap: 0.35rem; overflow: hidden; border: 2px dashed rgba(84, 40, 95, 0.32); border-radius: 8px; padding: 1.25rem; text-align: center; cursor: pointer; background: rgba(255, 248, 242, 0.76); touch-action: manipulation; } .drop-zone.dragging { border-color: var(--rose); background: rgba(233, 77, 120, 0.08); } .drop-zone input[type="file"] { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0.01; color: transparent; font-size: 4rem; cursor: pointer; pointer-events: auto; } .drop-zone > *:not(input) { position: relative; z-index: 1; pointer-events: none; } .upload-choice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.65rem; margin-bottom: 0.85rem; } .upload-choice-grid.is-without-google { grid-template-columns: repeat(2, minmax(0, 1fr)); } .upload-choice-card { display: grid; gap: 0.28rem; min-height: 5.2rem; border: 1px solid rgba(84, 40, 95, 0.14); border-radius: 8px; padding: 0.78rem; color: var(--ink); background: rgba(255, 255, 255, 0.82); text-align: left; cursor: pointer; box-shadow: 0 10px 24px rgba(84, 40, 95, 0.07); } .upload-choice-card span { color: var(--plum); font-size: 0.74rem; font-weight: 1000; letter-spacing: 0.08em; text-transform: uppercase; } .upload-choice-card strong { font-size: 0.94rem; line-height: 1.25; } .upload-choice-card:focus-visible, .upload-focus-ring { outline: 3px solid rgba(233, 77, 120, 0.24); outline-offset: 3px; } .drop-icon { display: grid; width: 4rem; height: 4rem; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, var(--rose), var(--marigold)); font-size: 2.5rem; font-weight: 500; } .drop-zone small { color: var(--muted); } .media-source-actions { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.55rem; margin-top: 0.75rem; } .media-source-actions input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; opacity: 0; color: transparent; -webkit-text-fill-color: transparent; font-size: 0; pointer-events: none; } .media-source-button { margin: 0; cursor: pointer; } .button.media-source-photos, .dashboard-v2 .button.media-source-photos { border-color: transparent; color: white; background: linear-gradient(135deg, #ff4f8b, #f08a24); box-shadow: 0 12px 26px rgba(255, 79, 139, 0.22); } .button.media-source-videos, .dashboard-v2 .button.media-source-videos { border-color: transparent; color: white; background: linear-gradient(135deg, #7b4dff, #4c6fff); box-shadow: 0 12px 26px rgba(123, 77, 255, 0.22); } .button.media-source-audio, .dashboard-v2 .button.media-source-audio { border-color: transparent; color: white; background: linear-gradient(135deg, #0bbf9b, #008f7a); box-shadow: 0 12px 26px rgba(11, 191, 155, 0.22); } .button.media-source-record-video, .dashboard-v2 .button.media-source-record-video { border-color: transparent; color: white; background: linear-gradient(135deg, #f08a24, #ffd166); box-shadow: 0 12px 26px rgba(240, 138, 36, 0.22); } .button.media-source-record-audio, .dashboard-v2 .button.media-source-record-audio { border-color: transparent; color: white; background: linear-gradient(135deg, #00a8cc, #2ec4b6); box-shadow: 0 12px 26px rgba(0, 168, 204, 0.22); } .button.media-source-google, .dashboard-v2 .button.media-source-google { border-color: transparent; color: white; background: linear-gradient(135deg, #1a73e8, #34a853); box-shadow: 0 12px 26px rgba(26, 115, 232, 0.22); } .button.media-source-cover, .dashboard-v2 .button.media-source-cover { border-color: transparent; color: white; background: linear-gradient(135deg, #c86bd6, #ef476f); box-shadow: 0 12px 26px rgba(200, 107, 214, 0.22); } .media-source-button[aria-disabled="true"] { pointer-events: none; opacity: 0.55; } .media-source-help { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.8rem; line-height: 1.45; } .media-source-help-tip { position: relative; flex: 0 0 auto; } .media-source-help-tip > summary { display: inline-grid; place-items: center; width: 1.65rem; height: 1.65rem; list-style: none; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: var(--muted); font-size: 0.78rem; font-weight: 700; line-height: 1; cursor: help; } .media-source-help-tip > summary::-webkit-details-marker { display: none; } .media-source-help-tip > p { position: absolute; z-index: 30; right: 0; bottom: calc(100% + 0.4rem); width: max-content; max-width: min(18.5rem, 78vw); margin: 0; padding: 0.55rem 0.65rem; border-radius: 0.45rem; background: rgba(33, 25, 29, 0.94); color: #fff; font-size: 0.72rem; font-weight: 500; line-height: 1.4; letter-spacing: 0.01em; text-align: left; box-shadow: 0 10px 24px rgba(33, 25, 29, 0.18); } @media (hover: hover) and (pointer: fine) { .media-source-help-tip:not([open]):hover > p, .media-source-help-tip:not([open]):focus-within > p { display: block; } } .recording-panel, .google-photos-ready { margin-top: 0.85rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.85rem; background: rgba(255, 248, 242, 0.72); } .recording-panel-head { display: flex; align-items: start; justify-content: space-between; gap: 0.75rem; } .recording-panel .eyebrow { margin: 0 0 0.12rem; } .recording-panel h3 { margin: 0; font-size: 1rem; } .recording-status, .google-photos-ready p { color: var(--muted); font-size: 0.82rem; line-height: 1.4; } .recording-status { max-width: 20rem; text-align: right; } .recording-panel video, .recording-panel audio { display: block; width: 100%; margin-top: 0.8rem; border-radius: 7px; background: var(--plum); } .recording-panel video { max-height: 18rem; } .recording-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.55rem; margin-top: 0.8rem; } .recording-actions .button, .google-photos-ready .button { margin: 0; } .cloud-import-panel { display: grid; gap: 0.65rem; margin-top: 0.85rem; } .cloud-import-panel input { font-size: 16px; } .cloud-import-actions { display: grid; gap: 0.5rem; } .cloud-import-actions .button, .invite-body .upload-box .cloud-import-actions .button { margin-top: 0; width: 100%; border-color: transparent; color: #fff; -webkit-text-fill-color: #fff; background: linear-gradient(135deg, #1a73e8, #34a853); box-shadow: 0 12px 26px rgba(26, 115, 232, 0.22); } .cloud-import-actions #cloudImportStopButton, .invite-body .upload-box .cloud-import-actions #cloudImportStopButton { background: linear-gradient(135deg, #c0392b, #e67e22); box-shadow: 0 12px 26px rgba(192, 57, 43, 0.22); } @media (min-width: 640px) { .cloud-import-actions { grid-template-columns: 1fr 1fr; } } .cloud-import-progress { display: grid; gap: 0.45rem; } .cloud-import-progress p { margin: 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; } .cloud-import-progress progress { width: 100%; height: 0.7rem; accent-color: var(--plum); } .upload-submit-actions { display: grid; gap: 0.5rem; } .upload-submit-actions .button { width: 100%; } .google-photos-ready { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.65rem; } .google-photos-ready p { margin: 0; flex: 1 1 15rem; } .hero-more-button, .media-load-more { position: relative; z-index: 2; margin: 0.75rem auto 0; border: 1px solid rgba(255, 255, 255, 0.64); border-radius: 999px; padding: 0.5rem 0.85rem; color: white; background: rgba(84, 40, 95, 0.7); font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; } .hero-more-button:hover, .hero-more-button:focus-visible { background: var(--plum); } .media-load-more { display: block; width: fit-content; margin: 1.25rem auto 0; border-color: var(--line); color: var(--muted); background: rgba(255, 255, 255, 0.82); } .config-field { display: grid; gap: 0.4rem; margin-top: 0.95rem; color: var(--muted); font-size: 0.9rem; font-weight: 400; } .config-field input, .config-field select, .config-field textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.8rem 0.85rem; color: var(--ink); background: white; font: inherit; } .config-field textarea { resize: vertical; line-height: 1.4; min-height: 5.6rem; } .studio-page .config-field { gap: 0.22rem; margin-top: 0.55rem; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; overflow-wrap: anywhere; } .studio-page .config-field input, .studio-page .config-field select, .studio-page .config-field textarea { padding: 0.5rem 0.6rem; font-size: 0.86rem; font-weight: 400; text-transform: none; letter-spacing: normal; } .studio-page .config-field textarea { min-height: 4rem; } .studio-page .dashboard-edit-grid, .studio-page .create-content-grid { gap: 0.5rem; } .studio-page .dashboard-panel, .studio-page .mini-status, .studio-page .copy-option span, .studio-page .dashboard-media-copy span { overflow-wrap: anywhere; } .path-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .upload-box .button { margin-top: 1rem; } .upload-box .media-source-actions .button, .invite-body .upload-box .media-source-actions .button { margin-top: 0; } .upload-box .upload-results { margin-top: 1.1rem; } .uploaded-media-results { margin-top: 0.65rem; } .upload-results h3, .uploaded-media-results h3 { margin: 0 0 0.8rem; font-size: 1.2rem; } .preview-list { display: grid; gap: 0.8rem; margin-top: 1rem; } .preview-list:empty { display: none; } .preview-item { display: grid; grid-template-columns: 4.5rem 1fr; gap: 0.75rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem; background: white; } .preview-thumb { display: grid; width: 4.5rem; min-height: 4.5rem; aspect-ratio: 1 / 1; place-items: center; overflow: hidden; border-radius: 6px; background: rgba(84, 40, 95, 0.1); font-weight: 900; } .preview-thumb img, .preview-thumb video { width: 100%; height: 100%; max-height: 8rem; object-fit: contain; object-position: center; } .preview-copy { color: var(--muted); font-size: 0.95rem; font-weight: 800; } .invite-main { width: min(56rem, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0 4rem; } .contributor-invite { position: relative; display: grid; gap: 1.4rem; overflow: hidden; isolation: isolate; border-radius: 12px; padding: clamp(1.4rem, 4vw, 2.4rem); margin-bottom: 2rem; color: white; background: linear-gradient(145deg, color-mix(in srgb, var(--rose) 92%, transparent), color-mix(in srgb, var(--plum) 92%, transparent) 58%, color-mix(in srgb, var(--mint) 88%, transparent)), var(--plum); box-shadow: var(--shadow); transition: transform 160ms ease; will-change: transform; } .contributor-invite .invite-copy { position: relative; z-index: 1; } .invite-copy .eyebrow { color: rgba(255, 255, 255, 0.82); } .invite-copy h2 { margin: 0.2rem 0 0.6rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.05; overflow-wrap: anywhere; } .invite-copy p { margin: 0; max-width: none; color: rgba(255, 255, 255, 0.9); font-size: 1.02rem; line-height: 1.6; } .invite-body .invite-hero { min-height: clamp(20rem, 72svh, 38rem); margin-bottom: 0.75rem; } .invite-body[data-invite-hero="off"] { padding-top: 0.85rem; } .invite-body[data-invite-hero="off"] .invite-main { padding-top: 0.35rem; } .invite-body .invite-showcase { padding-top: 0; margin-bottom: 1rem; } .invite-body .invite-showcase .media-grid { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: center; gap: 0.55rem; margin-top: 0; } .invite-body .invite-showcase .media-card, .invite-body .invite-showcase .media-card.is-portrait, .invite-body .invite-showcase .media-card.is-square, .invite-body .invite-showcase .media-card.is-landscape, .invite-body .invite-showcase .media-card.is-wide, .invite-body .invite-showcase .media-card.is-audio { flex: 1 1 0; grid-column: auto; min-width: 0; max-width: min(100%, calc((100% - (var(--showcase-count, 1) - 1) * 0.55rem) / var(--showcase-count, 1))); } .invite-body .invite-showcase .media-frame { width: 100%; min-height: 0; aspect-ratio: 1 / 1; } .invite-body .invite-main { padding: 0.75rem 0 1rem; } .invite-body .contributor-invite { gap: 0.75rem; padding: 1.5rem 1.7rem; margin-bottom: 1rem; border-radius: 14px; } .invite-body .invite-copy h2 { margin: 0.15rem 0 0.4rem; font-size: clamp(1.7rem, 3.6vw, 2.3rem); line-height: 1.1; } .invite-body .invite-copy p { font-size: 1rem; line-height: 1.5; } .invite-body .upload-section { padding: 0; } .invite-body .section-heading { margin-bottom: 0.5rem; } .invite-body .section-heading h2 { font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } .invite-body .upload-layout { gap: 0.6rem; } .invite-body .upload-login-required { padding: 0.85rem 0.75rem; } .invite-body .upload-box, .invite-body .upload-results, .invite-body .uploaded-media-results { padding: 0.65rem 0.75rem; } .invite-body .upload-box .upload-results { margin-top: 0.6rem; } .invite-body .uploaded-media-results { margin-top: 0.5rem; } .invite-body .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; } .invite-body .event-rsvp-status-row { grid-template-columns: minmax(0, 1fr) 4.75rem; align-items: start; } .invite-body .rsvp-status-field { margin: 0; padding: 0; border: 0; min-width: 0; } .invite-body .rsvp-status-field legend { padding: 0; margin: 0 0 0.35rem; font: inherit; color: inherit; } .invite-body .rsvp-status-radios { display: grid; gap: 0.35rem; } .invite-body .rsvp-status-option { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.45rem 0.55rem; min-height: 2.5rem; border-radius: 12px; border: 1px solid rgba(31, 26, 23, 0.12); background: rgba(255, 248, 242, 0.55); color: inherit; font: inherit; line-height: 1.25; cursor: pointer; } .invite-body .rsvp-status-option:has(input:checked) { border-color: color-mix(in srgb, var(--plum, #54285f) 55%, transparent); background: color-mix(in srgb, var(--plum, #54285f) 12%, #fff8f2); } .invite-body .rsvp-status-option input { margin: 0.15rem 0 0; flex-shrink: 0; width: 1.05rem; height: 1.05rem; } .invite-body .rsvp-guest-count-field input { width: 100%; text-align: center; padding-inline: 0.35rem; } @media (max-width: 420px) { .invite-body .field-row { grid-template-columns: 1fr; } .invite-body .event-rsvp-status-row { grid-template-columns: minmax(0, 1fr) 4.75rem; } } .invite-body .mini-status { padding: 0.55rem 0.7rem; font-size: 0.82rem; } .invite-body .preview-list { gap: 0.5rem; margin-top: 0.5rem; } .invite-body .button { min-height: 2.4rem; padding: 0.5rem 1rem; } .invite-body .prompt-hint { margin-top: -0.05rem; color: var(--muted); font-size: 0.78rem; font-weight: 400; text-transform: none; letter-spacing: normal; } .invite-body .drop-zone { min-height: 5.5rem; padding: 0.5rem; gap: 0.15rem; } .invite-body .drop-icon { width: 2rem; height: 2rem; font-size: 1.2rem; } .invite-body .drop-zone strong { font-size: 0.86rem; } .invite-body .drop-zone small { font-size: 0.76rem; } .invite-body .upload-results h3, .invite-body .uploaded-media-results h3 { margin: 0 0 0.3rem; font-size: 0.92rem; } .invite-body .upload-box .button { margin-top: 0.6rem; } .invite-body .config-field { margin-top: 0.45rem; gap: 0.2rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .invite-body .config-field input, .invite-body .config-field select, .invite-body .config-field textarea { padding: 0.42rem 0.55rem; font-size: 0.85rem; font-weight: 400; text-transform: none; letter-spacing: normal; } .invite-body .config-field textarea { min-height: 2.4rem; line-height: 1.3; } .music-follow-section { padding-top: 0.25rem; } .countdown-section { padding-top: 0.25rem; } .countdown-host-in-follow:empty { display: none; } .countdown-card { width: min(34rem, 100%); margin: 0 auto 1rem; border-radius: 18px; padding: 1.35rem 1.2rem 1.5rem; color: #fff8f2; text-align: center; background: linear-gradient(165deg, color-mix(in srgb, var(--plum) 92%, #120814), color-mix(in srgb, var(--rose) 55%, #1a0c16)); box-shadow: var(--shadow); } .countdown-card--embedded { width: 100%; margin: 0 0 1.15rem; padding: 0; border-radius: 0; background: transparent; box-shadow: none; color: #fff8f2; } .countdown-title { margin: 0 0 0.35rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 5vw, 2.1rem); line-height: 1.15; overflow-wrap: anywhere; } .countdown-card--embedded .countdown-title { font-size: clamp(1.35rem, 4.5vw, 1.75rem); } .countdown-launch-at { margin: 0.85rem 0 0; font-size: 0.95rem; line-height: 1.4; opacity: 0.88; overflow-wrap: anywhere; } .countdown-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; margin-top: 0.35rem; } .countdown-unit { display: grid; gap: 0.25rem; padding: 0.7rem 0.35rem; border-radius: 14px; color: #1a1218; box-shadow: 0 10px 22px rgba(8, 4, 10, 0.22); } .countdown-unit--days { background: linear-gradient(160deg, color-mix(in srgb, var(--rose) 88%, white), color-mix(in srgb, var(--rose) 72%, #7a1038)); color: #fff8f2; } .countdown-unit--hours { background: linear-gradient(160deg, color-mix(in srgb, var(--marigold) 92%, white), color-mix(in srgb, var(--marigold) 70%, #b86a00)); color: #2a1a08; } .countdown-unit--minutes { background: linear-gradient(160deg, color-mix(in srgb, var(--mint) 90%, white), color-mix(in srgb, var(--mint) 68%, #0f6b55)); color: #0f2a22; } .countdown-unit--seconds { background: linear-gradient(160deg, color-mix(in srgb, var(--plum) 55%, #8ec5ff), color-mix(in srgb, var(--plum) 80%, #2a6fd6)); color: #fff8f2; } .countdown-value { font-variant-numeric: tabular-nums; font-size: clamp(1.45rem, 6vw, 2rem); font-weight: 700; line-height: 1; } .countdown-label { font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.9; } .countdown-complete { margin: 0.35rem 0 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.35rem, 4.5vw, 1.8rem); background: linear-gradient(90deg, var(--rose), var(--marigold), var(--mint)); -webkit-background-clip: text; background-clip: text; color: transparent; } .music-follow-card { width: min(28rem, 100%); margin: 0 auto 1rem; border-radius: 18px; padding: 1.35rem 1.2rem 1.5rem; color: #fff8f2; background: linear-gradient(165deg, color-mix(in srgb, var(--plum) 92%, #120814), color-mix(in srgb, var(--rose) 55%, #1a0c16)); box-shadow: var(--shadow); } .music-follow-cover { display: flex; justify-content: center; margin: 0 0 1rem; } .music-follow-cover img { display: block; width: min(12.5rem, 62vw); height: min(12.5rem, 62vw); object-fit: cover; object-position: center; border-radius: 18px; box-shadow: 0 14px 32px rgba(8, 4, 10, 0.35); } .music-follow-artist { margin: 0; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.85rem, 6vw, 2.5rem); line-height: 1.1; text-align: center; overflow-wrap: anywhere; } .music-follow-prompt { margin: 0.55rem 0 1rem; color: rgba(255, 248, 242, 0.86); font-size: 0.98rem; line-height: 1.45; text-align: center; } .music-follow-subscribe { display: grid; gap: 0.55rem; } .music-follow-card .config-field { color: rgba(255, 248, 242, 0.72); } .music-follow-card .config-field input { border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.96); color: var(--ink); } .music-follow-subscribe-message { min-height: 1.2rem; margin: 0.35rem 0 0.7rem; color: rgba(255, 248, 242, 0.88); font-size: 0.86rem; text-align: center; } .notify-prefs { display: grid; gap: 0.4rem; margin: 0.15rem 0 0.35rem; text-align: left; } .notify-pref-row { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0; color: inherit; font-size: 0.86rem; line-height: 1.35; cursor: pointer; } .notify-pref-row input { margin-top: 0.15rem; flex: 0 0 auto; width: 1.05rem; height: 1.05rem; } .music-follow-card .notify-pref-row { color: rgba(255, 248, 242, 0.82); } .notify-prefs-dialog { width: min(24rem, calc(100% - 1.5rem)); max-height: min(90vh, 36rem); margin: auto; border: none; border-radius: 12px; padding: 0; background: transparent; overflow: visible; } .notify-prefs-dialog::backdrop { background: rgba(33, 25, 29, 0.5); backdrop-filter: blur(4px); } .notify-prefs-panel { display: grid; gap: 0.75rem; max-height: min(90vh, 36rem); overflow-y: auto; padding: 1.1rem 1.05rem 1.2rem; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); box-shadow: var(--shadow); color: var(--ink); } .notify-prefs-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .notify-prefs-head h2 { margin: 0; font-size: 1.15rem; line-height: 1.25; } .notify-prefs-copy { margin: 0; color: var(--muted); font-size: 0.92rem; line-height: 1.45; } .notify-prefs-panel .notify-prefs { margin: 0.1rem 0; } .notify-prefs-panel .notify-pref-row { color: var(--ink); } .notify-prefs-message { min-height: 1.1rem; margin: 0; color: var(--muted); font-size: 0.84rem; line-height: 1.35; } .notify-prefs-actions { display: grid; gap: 0.45rem; } .event-notify-section { padding-top: 0.5rem; } .event-notify-card { max-width: 28rem; margin: 0 auto; padding: 1.25rem 1.1rem 1.35rem; border-radius: 1rem; background: rgba(31, 26, 23, 0.04); border: 1px solid rgba(31, 26, 23, 0.1); } .event-notify-title { margin: 0 0 0.4rem; font-size: 1.35rem; text-align: center; } .event-notify-copy { margin: 0 0 1rem; color: var(--muted, rgba(31, 26, 23, 0.72)); font-size: 0.95rem; line-height: 1.45; text-align: center; } .event-notify-form { display: grid; gap: 0.55rem; } .event-notify-message { min-height: 1.2rem; margin: 0.45rem 0 0; font-size: 0.86rem; text-align: center; } .event-rsvp-card .notify-pref-row { margin: 0.35rem 0 0.85rem; color: var(--muted, rgba(31, 26, 23, 0.78)); } .music-follow-streaming { display: grid; gap: 0.55rem; } .music-follow-row { display: flex; align-items: stretch; overflow: hidden; min-height: 2.75rem; border-radius: 999px; color: white; background: rgba(255, 255, 255, 0.16); } .music-follow-link { display: flex; min-width: 0; min-height: 2.75rem; flex: 1; align-items: center; justify-content: center; gap: 0.5rem; border: 0; border-radius: 999px; padding: 0.7rem 0.7rem 0.7rem 1rem; color: inherit; background: transparent; font-weight: 800; text-align: center; text-decoration: none; } .music-follow-row .music-follow-link { border-radius: 0; } .music-follow-share { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 2.75rem; min-height: 2.75rem; margin: 0; padding: 0; border: 0; border-left: 1px solid color-mix(in srgb, currentColor 28%, transparent); color: inherit; background: transparent; appearance: none; font: inherit; cursor: pointer; } .music-follow-share:hover, .music-follow-share:focus-visible { background: color-mix(in srgb, currentColor 14%, transparent); } .music-follow-share:focus-visible { outline: 2px solid currentColor; outline-offset: -3px; } .music-follow-share-icon, .invite-share-icon { width: 1.15rem; height: 1.15rem; flex-shrink: 0; } .music-follow-logo { width: 1.2rem; height: 1.2rem; flex-shrink: 0; fill: currentColor; } .music-follow-link-label { min-width: 0; overflow: visible; white-space: normal; line-height: 1.2; text-wrap: balance; } .music-follow-card .button { min-height: 2.75rem; } .music-follow-page-share { display: flex; width: fit-content; margin-top: 0.85rem; margin-left: auto; gap: 0.45rem; border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.12); } #inviteShareButton { gap: 0.4rem; } .invite-share-status { position: fixed; left: 50%; bottom: 4.75rem; z-index: 110; display: none; max-width: min(22rem, calc(100vw - 2rem)); margin: 0; padding: 0.55rem 0.9rem; border-radius: 999px; color: #fff8f2; background: rgba(33, 25, 29, 0.88); box-shadow: 0 10px 28px rgba(33, 25, 29, 0.22); font-size: 0.86rem; font-weight: 700; text-align: center; transform: translateX(-50%); pointer-events: none; } .invite-share-status:not(:empty) { display: block; } .music-follow-link-spotify { background: #1db954; color: #04130a; } .music-follow-link-youtube, .music-follow-link-youtubeMusic { background: #ff0000; } .music-follow-link-appleMusic { background: #fc3c44; } .music-follow-link-amazonMusic { background: #25d1da; color: #082022; } .music-follow-link-deezer { background: #a238ff; } .music-follow-link-tidal { background: #000; } .music-follow-link-soundcloud { background: #ff5500; } .music-follow-link-jioSaavn { background: #2bc5b4; color: #08201c; } .music-follow-link-audiomack { background: #ffa200; color: #1a1200; } .music-follow-link-instagram { background: #e1306c; } .music-follow-link-tiktok, .music-follow-link-tiktokSound { background: #111; } .music-follow-link-facebook, .music-follow-link-facebookReels { background: #1877f2; } .music-follow-link-x { background: #111; } .music-follow-link-threads { background: #111; } .music-follow-link-whatsapp { background: #25d366; color: #06210d; } .music-follow-link-instagramAudio { background: #e1306c; } .music-follow-link-youtubeShorts { background: #ff0000; } .music-follow-link-snapchatSound { background: #fffc00; color: #1a1800; } .music-follow-group-label { margin: 1rem 0 0.55rem; color: rgba(255, 248, 242, 0.7); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-align: center; text-transform: uppercase; } .music-follow-social-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; } .music-follow-use-row { display: grid; grid-template-columns: 1fr; gap: 0.5rem; } .music-follow-social-row .music-follow-link, .music-follow-use-row .music-follow-link { min-height: 2.75rem; padding: 0.55rem 0.55rem 0.55rem 0.7rem; font-size: 0.86rem; justify-content: flex-start; } .music-follow-social-row .music-follow-link-label, .music-follow-use-row .music-follow-link-label { flex: 1; text-align: left; } @media (max-width: 420px) { .countdown-card:not(.countdown-card--embedded) { padding: 1.15rem 0.85rem 1.3rem; border-radius: 16px; } .countdown-card--embedded { margin-bottom: 1rem; } .countdown-grid { gap: 0.4rem; } .countdown-unit { padding: 0.6rem 0.2rem; border-radius: 12px; } .countdown-label { font-size: 0.65rem; } .music-follow-card { padding: 1.15rem 0.95rem 1.3rem; border-radius: 16px; } .music-follow-cover img { width: min(10.5rem, 70vw); height: min(10.5rem, 70vw); border-radius: 16px; } .music-follow-link, .music-follow-share, .music-follow-card .button { min-height: 2.75rem; } .music-follow-social-row { grid-template-columns: 1fr; } } .section.social-feed-section { padding-top: 1.25rem; padding-bottom: 1.5rem; } .section.discography-section { padding-top: 1.25rem; padding-bottom: 0.35rem; } .section.upcoming-releases-section { padding-top: 0.85rem; padding-bottom: 0.75rem; } .upcoming-releases-card { width: min(34rem, 100%); margin: 0 auto 1rem; border-radius: 18px; padding: 1.15rem 1rem 1.25rem; color: #fff8f2; background: linear-gradient(165deg, color-mix(in srgb, var(--plum) 90%, #120814), color-mix(in srgb, var(--rose) 45%, #1a0c16)); box-shadow: var(--shadow); } .upcoming-releases-title { margin: 0 0 0.85rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 4.8vw, 1.95rem); line-height: 1.15; text-align: center; } .upcoming-releases-list { display: grid; gap: 0.85rem; } .upcoming-release-item { display: grid; gap: 0.75rem; padding: 0.85rem 0.75rem 0.9rem; border-radius: 14px; background: rgba(8, 4, 10, 0.24); } .upcoming-release-item--velvet { background: linear-gradient(160deg, rgba(88, 18, 42, 0.72), rgba(8, 4, 10, 0.55)); } .upcoming-release-item--gold { background: linear-gradient(160deg, rgba(120, 78, 18, 0.7), rgba(28, 14, 8, 0.58)); } .upcoming-release-item--lagoon { background: linear-gradient(160deg, rgba(18, 78, 92, 0.72), rgba(8, 16, 28, 0.58)); } .upcoming-release-item--ember { background: linear-gradient(160deg, rgba(120, 36, 18, 0.72), rgba(28, 8, 10, 0.58)); } .upcoming-release-item--midnight { background: linear-gradient(160deg, rgba(28, 24, 72, 0.78), rgba(8, 6, 18, 0.62)); } .upcoming-release-item--orchid { background: linear-gradient(160deg, rgba(72, 24, 78, 0.75), rgba(18, 8, 24, 0.6)); } .upcoming-release-item--gold .upcoming-release-curtain-panel { background: repeating-linear-gradient(90deg, #b8860b 0 14px, #f0c14b 14px 22px, #8b6914 22px 34px); } .upcoming-release-item--lagoon .upcoming-release-curtain-panel { background: repeating-linear-gradient(90deg, #0e6b7a 0 14px, #2bb7c9 14px 22px, #0a4f5a 22px 34px); } .upcoming-release-item--ember .upcoming-release-curtain-panel { background: repeating-linear-gradient(90deg, #a83218 0 14px, #e85a2e 14px 22px, #7a2410 22px 34px); } .upcoming-release-item--midnight .upcoming-release-curtain-panel { background: repeating-linear-gradient(90deg, #2a2460 0 14px, #5a4fd0 14px 22px, #1a1640 22px 34px); } .upcoming-release-item--orchid .upcoming-release-curtain-panel { background: repeating-linear-gradient(90deg, #6a2468 0 14px, #b24fc0 14px 22px, #451844 22px 34px); } .upcoming-release-stage { position: relative; overflow: hidden; width: min(9.5rem, 48%); margin: 0 auto; border-radius: 12px; aspect-ratio: 1; background: #1a0c14; cursor: pointer; } .upcoming-release-cover, .upcoming-release-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .upcoming-release-curtain { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; pointer-events: none; transition: opacity 0.35s ease; } .upcoming-release-curtain-panel { display: block; height: 100%; background: repeating-linear-gradient( 90deg, #8b1e3f 0 14px, #c43b5c 14px 22px, #7a1835 22px 34px ); transition: transform 0.55s ease; } .upcoming-release-curtain-panel.left { transform-origin: left center; box-shadow: inset -12px 0 24px rgba(0, 0, 0, 0.28); } .upcoming-release-curtain-panel.right { transform-origin: right center; box-shadow: inset 12px 0 24px rgba(0, 0, 0, 0.28); } .upcoming-release-stage.is-peek .upcoming-release-curtain-panel.left, .upcoming-release-stage.is-revealed .upcoming-release-curtain-panel.left { transform: translateX(-72%); } .upcoming-release-stage.is-peek .upcoming-release-curtain-panel.right, .upcoming-release-stage.is-revealed .upcoming-release-curtain-panel.right { transform: translateX(72%); } .upcoming-release-badge { position: absolute; left: 0.7rem; bottom: 0.7rem; margin: 0; padding: 0.28rem 0.55rem; border-radius: 999px; background: rgba(8, 4, 10, 0.62); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .upcoming-release-copy h3 { margin: 0 0 0.25rem; font-size: 1.05rem; } .upcoming-release-when { margin: 0 0 0.55rem; color: rgba(255, 248, 242, 0.78); font-size: 0.88rem; } .upcoming-release-countdown-grid { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.65rem; font-size: 0.82rem; } .upcoming-release-countdown-grid strong { font-size: 1rem; } .upcoming-release-actions { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 0.65rem; justify-content: flex-end; } .upcoming-release-btn-spotify { border-color: #1db954 !important; background: #1db954 !important; color: #04130a !important; display: inline-flex; align-items: center; gap: 0.4rem; } .upcoming-release-btn-youtube { border-color: #ff0000 !important; background: #ff0000 !important; color: #fff !important; display: inline-flex; align-items: center; gap: 0.4rem; } .upcoming-release-btn .music-follow-logo { width: 1.05rem; height: 1.05rem; fill: currentColor; flex-shrink: 0; } .upcoming-release-remind { display: grid; gap: 0.45rem; } .upcoming-release-remind .config-field { color: rgba(255, 248, 242, 0.92); } .upcoming-release-remind-message { margin: 0; min-height: 1.1em; font-size: 0.82rem; } .upcoming-release-editor-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .swatch-preview-match { background: linear-gradient(135deg, rgba(84, 40, 95, 0.18), rgba(233, 77, 120, 0.18)), repeating-linear-gradient( -45deg, transparent, transparent 4px, rgba(84, 40, 95, 0.12) 4px, rgba(84, 40, 95, 0.12) 8px ); } .discography-card { width: min(34rem, 100%); margin: 0 auto 1rem; border-radius: 18px; padding: 1.2rem 1.1rem 1.2rem; color: #fff8f2; background: linear-gradient(165deg, color-mix(in srgb, var(--plum) 88%, #120814), color-mix(in srgb, var(--marigold) 40%, #1a0c16)); box-shadow: var(--shadow); } .discography-title { margin: 0 0 0.85rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 4.8vw, 1.95rem); line-height: 1.15; text-align: center; overflow-wrap: anywhere; } .discography-list { display: grid; gap: 0.75rem; } .discography-item { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto; gap: 0.85rem; align-items: center; padding: 0.55rem 0.65rem 0.55rem 0.55rem; border-radius: 14px; color: inherit; text-decoration: none; background: linear-gradient(135deg, rgba(84, 40, 95, 0.45), rgba(8, 4, 10, 0.55)); border: 1px solid rgba(255, 248, 242, 0.1); } .discography-item--plum { background: linear-gradient(135deg, rgba(98, 36, 110, 0.82), rgba(18, 8, 24, 0.78)); } .discography-item--rose { background: linear-gradient(135deg, rgba(160, 48, 88, 0.82), rgba(28, 8, 18, 0.78)); } .discography-item--gold { background: linear-gradient(135deg, rgba(150, 98, 24, 0.84), rgba(30, 16, 8, 0.8)); } .discography-item--lagoon { background: linear-gradient(135deg, rgba(24, 110, 120, 0.84), rgba(8, 24, 30, 0.8)); } .discography-item--ember { background: linear-gradient(135deg, rgba(156, 52, 28, 0.84), rgba(30, 10, 10, 0.8)); } .discography-item--orchid { background: linear-gradient(135deg, rgba(120, 42, 130, 0.84), rgba(22, 8, 28, 0.8)); } .discography-item--forest { background: linear-gradient(135deg, rgba(28, 110, 72, 0.84), rgba(8, 24, 16, 0.8)); } .discography-item--indigo { background: linear-gradient(135deg, rgba(48, 56, 140, 0.86), rgba(12, 12, 32, 0.8)); } .discography-item:hover, .discography-item:focus-within { border-color: rgba(255, 248, 242, 0.22); } .discography-cover { width: 6.25rem; height: 6.25rem; border-radius: 10px; object-fit: cover; display: block; background: rgba(255, 248, 242, 0.12); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28); } .discography-cover-placeholder { box-shadow: inset 0 0 0 1px rgba(255, 248, 242, 0.18); } .discography-body { display: grid; gap: 0.35rem; min-width: 0; } .discography-copy strong, .discography-title-link { display: block; font-size: 1.05rem; line-height: 1.25; color: inherit; text-decoration: none; overflow-wrap: anywhere; font-weight: 700; } .discography-title-link:hover, .discography-title-link:focus-visible { text-decoration: underline; text-underline-offset: 0.12em; } .discography-platforms { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; justify-self: end; align-self: center; } .discography-platform { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; color: #fff; background: #333; text-decoration: none; } .discography-platform .music-follow-logo { width: 1.05rem; height: 1.05rem; fill: currentColor; } .discography-platform-spotify { background: #1db954; color: #04130a; } .discography-platform-youtube, .discography-platform-youtubeMusic { background: #ff0000; } .discography-platform-appleMusic { background: #fc3c44; } .discography-platform-link { background: color-mix(in srgb, var(--plum) 75%, #1a1020); } @media (max-width: 420px) { .discography-item { grid-template-columns: 5rem minmax(0, 1fr); gap: 0.65rem; } .discography-cover { width: 5rem; height: 5rem; } .discography-platforms { grid-column: 2; justify-self: end; } } .discography-editor-list { display: grid; gap: 0.85rem; } .discography-editor-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.65rem; align-items: start; padding: 0.75rem; border: 1px solid rgba(84, 40, 95, 0.12); border-radius: 10px; background: rgba(255, 255, 255, 0.72); } .discography-editor-row > .button { grid-column: 1 / -1; justify-self: end; } .discography-order-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0.5rem; } .discography-order-actions .button { min-height: 44px; } .discography-editor-row .discography-cover-field { grid-column: 1 / -1; } .discography-cover-studio { margin: 0.35rem 0; } .discography-cover-studio img { width: 4.5rem; height: 4.5rem; border-radius: 8px; object-fit: cover; } .discography-cover-actions input[type="file"] { display: none; } @media (max-width: 720px) { .discography-editor-row { grid-template-columns: 1fr; } } .invite-body .social-feed-section { padding-top: 0.25rem; padding-bottom: 0.5rem; } .social-feed-card { width: min(34rem, 100%); max-width: 100%; margin: 0 auto 1rem; border-radius: 18px; padding: 1.2rem 1.1rem 1.35rem; color: #fff8f2; background: linear-gradient(165deg, color-mix(in srgb, var(--plum) 92%, #120814), color-mix(in srgb, var(--rose) 55%, #1a0c16)); box-shadow: var(--shadow); box-sizing: border-box; overflow-x: clip; } .social-feed-title { margin: 0 0 0.85rem; font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.55rem, 5vw, 2.1rem); line-height: 1.15; text-align: center; overflow-wrap: anywhere; } .social-feed-embed { min-width: 0; max-width: 100%; overflow-x: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; border-radius: 14px; background: rgba(8, 4, 10, 0.28); min-height: 12rem; } .social-feed-embed[data-platform="facebook"], .social-feed-embed[data-platform="threads"] { /* Keep horizontal spill inside the card; allow widgets to grow vertically. */ overflow-x: auto; overflow-y: visible; background: #fff; } .social-feed-list { display: grid; gap: 0; min-width: 0; max-width: 100%; } .social-feed-item { min-width: 0; max-width: 100%; } .social-feed-item + .social-feed-item { margin-top: 1.05rem; padding-top: 1.05rem; border-top: 1px solid rgba(255, 248, 242, 0.16); } .social-feed-frame { display: block; width: 100%; max-width: 100%; border: 0; background: #fff; } .social-feed-frame-profile, .social-feed-frame-page, .social-feed-frame-timeline { height: 34rem; } .social-feed-facebook-page, .social-feed-embed .fb-page { width: 100%; max-width: 100%; min-height: 34rem; background: #fff; } .social-feed-frame-post, .social-feed-frame-reel, .social-feed-frame-tweet { height: 44rem; } .social-feed-frame-video.social-feed-frame-tiktok { height: 46rem; } .social-feed-frame-video.social-feed-frame-youtube, .social-feed-frame-playlist, .social-feed-frame-channel, .social-feed-frame-shorts { aspect-ratio: 16 / 9; height: auto; min-height: 12.5rem; } .social-feed-frame-threads { width: 100%; height: 580px; background: #fff; } .social-feed-embed iframe, .social-feed-embed .fb_iframe_widget, .social-feed-embed .fb_iframe_widget span, .social-feed-embed .fb_iframe_widget iframe, .social-feed-embed .twitter-timeline, .social-feed-embed .twitter-tweet, .social-feed-embed .tiktok-embed, .social-feed-embed .text-post-media { margin: 0 auto !important; max-width: 100% !important; } .social-feed-embed .fb_iframe_widget, .social-feed-embed .fb_iframe_widget span { width: 100% !important; } .social-feed-embed .text-post-media { min-height: 12rem; } .social-feed-fallback { margin: 0; padding: 1.4rem 1rem; text-align: center; color: rgba(255, 248, 242, 0.88); } .social-feed-open { margin: 0.85rem 0 0; text-align: center; } .social-feed-open-link { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.75rem; padding: 0.45rem 1rem; border-radius: 999px; color: #fff; background: #333; font-weight: 650; text-decoration: none; } .social-feed-open-link .music-follow-logo { width: 1.05rem; height: 1.05rem; flex-shrink: 0; fill: currentColor; } .social-feed-open-link-instagram { background: linear-gradient(45deg, #f58529, #dd2a7b 52%, #8134af); color: #fff; } .social-feed-open-link-youtube { background: #ff0000; color: #fff; } .social-feed-open-link-facebook { background: #1877f2; color: #fff; } .social-feed-open-link-threads { background: #111; color: #fff; } .social-feed-open-link-tiktok { background: #111; color: #fff; } .social-feed-open-link-x { background: #111; color: #fff; } .social-feed-open-link:hover, .social-feed-open-link:focus-visible { filter: brightness(1.06); } .social-feed-editor-list { display: grid; gap: 0.65rem; } .social-feed-editor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.55rem 0.75rem; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem; background: white; } .social-feed-editor-row .config-field { margin: 0; } .social-feed-editor-row .hint-text { grid-column: 1 / -1; margin: 0; } .social-feed-editor-row .button { min-height: 2.75rem; } @media (max-width: 420px) { .social-feed-card { padding: 1.05rem 0.7rem 1.2rem; border-radius: 16px; } .social-feed-embed { border-radius: 12px; } .social-feed-frame-profile, .social-feed-frame-page, .social-feed-frame-timeline { height: 28rem; } .social-feed-frame-post, .social-feed-frame-reel, .social-feed-frame-tweet, .social-feed-frame-video.social-feed-frame-tiktok { height: 36rem; } .social-feed-open-link { width: 100%; box-sizing: border-box; } .social-feed-editor-row { grid-template-columns: 1fr; } .social-feed-editor-row .button { width: 100%; } } .invite-body .site-footer { padding: 0.85rem 1rem 1.35rem; } .invite-body .site-footer nav { margin-top: 0.15rem; } .invite-footer-branding { display: grid; justify-items: center; gap: 0.55rem; margin-bottom: 0.55rem; } .invite-footer-links { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.85rem; } .invite-footer-links a { color: rgba(33, 25, 29, 0.72); text-decoration: none; font-size: 0.88rem; font-weight: 700; line-height: 1; min-height: 2.5rem; display: inline-flex; align-items: center; } .invite-footer-links a:hover, .invite-footer-links a:focus-visible { color: rgba(33, 25, 29, 0.95); } .invite-footer-brand { font-size: 1rem; } .invite-footer-brand .brand-mark { width: 1.35rem; height: 1.35rem; } .page-traffic { margin: 0.45rem 0 0; font-size: 0.68rem; font-variant-numeric: tabular-nums; letter-spacing: 0.38em; color: color-mix(in srgb, var(--muted) 34%, transparent); user-select: none; pointer-events: none; } .invite-body .page-traffic { color: color-mix(in srgb, var(--muted) 28%, transparent); } .analytics-toolbar { align-items: end; gap: 1rem; } .analytics-toolbar-actions { display: flex; flex-wrap: wrap; align-items: end; gap: 0.65rem; } .analytics-page-field { min-width: min(18rem, 100%); margin: 0; } .analytics-page-field select { min-height: 2.75rem; } .analytics-body { display: grid; gap: 1rem; } .analytics-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 10.5rem), 1fr)); gap: 0.75rem; } .analytics-kpi { display: grid; gap: 0.28rem; align-content: start; min-height: 5.25rem; padding: 0.9rem 0.95rem; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #8a3ffc 0%, #e94d78 58%, #f6b73c 120%); box-shadow: 0 14px 32px rgba(84, 40, 95, 0.16); } .analytics-kpi:nth-child(2) { background: linear-gradient(145deg, #2f54eb 0%, #00b8d9 70%, #36e6a6 130%); } .analytics-kpi:nth-child(3) { background: linear-gradient(145deg, #7b2ff7 0%, #ff5d73 62%, #ffe4a8 130%); } .analytics-kpi:nth-child(4) { background: linear-gradient(145deg, #247b7b 0%, #00b8d9 55%, #ffe66d 130%); } .analytics-kpi:nth-child(5), .analytics-kpi:nth-child(8) { background: linear-gradient(145deg, #54285f 0%, #e94d78 60%, #ff7a45 130%); } .analytics-kpi:nth-child(6), .analytics-kpi:nth-child(7) { background: linear-gradient(145deg, #9b5cff 0%, #ff7a45 58%, #ffe66d 130%); } .analytics-kpi span { font-size: 0.78rem; letter-spacing: 0.02em; opacity: 0.88; } .analytics-kpi strong { font-size: clamp(1.45rem, 3vw, 1.9rem); line-height: 1.1; font-variant-numeric: tabular-nums; } .analytics-chart-head { align-items: start; gap: 0.75rem; } .analytics-range-tabs { display: flex; flex-wrap: nowrap; gap: 0.35rem; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .analytics-range-tabs button { flex: none; min-height: 2.75rem; padding: 0.4rem 0.8rem; border: 1px solid rgba(84, 40, 95, 0.16); border-radius: 999px; background: rgba(255, 255, 255, 0.9); color: #3d2535; font: inherit; font-size: 0.86rem; white-space: nowrap; } .analytics-range-tabs button.active { border-color: transparent; color: #fff; background: linear-gradient(135deg, #ff4f8b, #6c4dff 58%, #0bbf9b); } .analytics-chart { display: grid; grid-template-columns: repeat(var(--chart-cols, 14), minmax(2.15rem, 1fr)); align-items: end; gap: 0.4rem; min-height: 12.5rem; overflow-x: auto; padding: 0.35rem 0 0; } .analytics-chart-col { display: grid; grid-template-rows: auto minmax(7.5rem, 1fr) auto; justify-items: center; gap: 0.28rem; min-width: 2.15rem; } .analytics-chart-value { color: #3d2535; font-size: 0.68rem; font-variant-numeric: tabular-nums; font-weight: 650; line-height: 1; } .analytics-chart-bar { align-self: end; width: 100%; max-width: 1.35rem; min-height: 0.2rem; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, #8a3ffc, #e94d78); } .analytics-chart-label { color: var(--muted); font-size: 0.62rem; text-align: center; white-space: nowrap; } .analytics-table-wrap { overflow-x: auto; } .analytics-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; } .analytics-table th, .analytics-table td { padding: 0.65rem 0.5rem; text-align: left; border-bottom: 1px solid rgba(84, 40, 95, 0.1); vertical-align: top; } .analytics-table thead th { color: var(--muted); font-size: 0.78rem; font-weight: 600; } .analytics-table tbody th { font-weight: 600; } .analytics-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1rem; } @media (max-width: 420px) { .analytics-toolbar, .analytics-toolbar-actions { align-items: stretch; flex-direction: column; } .analytics-page-field, .analytics-page-field select, #refreshAnalyticsButton { width: 100%; } .analytics-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .analytics-kpi { min-height: 4.8rem; padding: 0.75rem 0.8rem; } .analytics-kpi strong { font-size: 1.35rem; } .analytics-chart-head, .analytics-range-tabs { width: 100%; } .analytics-range-tabs button { min-height: 2.75rem; } .analytics-chart { grid-template-columns: repeat(var(--chart-cols, 14), minmax(2.3rem, 1fr)); } } .legal-page { max-width: 42rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4rem) 1rem 4rem; } .legal-page h1 { margin: 0.2rem 0 0.4rem; font-size: clamp(2.2rem, 5vw, 3rem); } .legal-page h2 { margin-top: 2.2rem; font-size: 1.3rem; } .legal-page p { color: var(--muted); line-height: 1.7; } .legal-updated { font-size: 0.88rem; } .site-footer { display: grid; gap: 0.2rem; justify-items: center; border-top: 1px solid var(--line); padding: 1.15rem 1rem 5.1rem; color: var(--muted); background: rgba(255, 255, 255, 0.5); text-align: center; } .site-footer p { margin: 0; font-size: 0.84rem; font-weight: 400; letter-spacing: 0.02em; } .site-footer nav { display: flex; gap: 1rem; margin-top: 0.3rem; } .site-footer nav a { color: var(--muted); font-size: 0.84rem; text-decoration: none; } .site-footer nav a:hover { text-decoration: underline; } .dashboard-body { background: #f6f7fb; overflow-x: clip; overflow-y: visible; height: auto; min-height: 100svh; overscroll-behavior: auto; -webkit-overflow-scrolling: touch; } .dashboard-shell { width: min(100% - 2rem, 84rem); margin: 0 auto; padding: 1rem 0 3rem; } .dashboard-topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0 1rem; } .dashboard-topbar h1, .dashboard-panel h2, .dashboard-empty h2 { margin: 0; } .dashboard-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } .profile-menu { position: relative; } .profile-inline { display: flex; align-items: center; gap: 0.65rem; border: 1px solid rgba(84, 40, 95, 0.14); border-radius: 999px; padding: 0.35rem 0.42rem 0.35rem 0.35rem; background: rgba(255, 255, 255, 0.84); box-shadow: 0 12px 26px rgba(84, 40, 95, 0.08); } .profile-trigger { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 1rem 0.35rem 0.35rem; background: white; color: var(--ink); font: inherit; font-weight: 700; font-size: 0.88rem; cursor: pointer; } .profile-info { display: flex; align-items: center; gap: 0.65rem; min-width: 0; color: inherit; text-decoration: none; border-radius: 999px; transition: opacity 120ms ease; } .profile-info:hover, .profile-info:focus-visible { opacity: 0.78; } .profile-icon { display: grid; width: 1.9rem; height: 1.9rem; flex: none; place-items: center; border-radius: 50%; color: white; background: linear-gradient(135deg, #ff4f8b, #6c4dff); } .profile-icon svg { width: 1.05rem; height: 1.05rem; } .profile-dropdown { position: absolute; top: calc(100% + 0.6rem); right: 0; z-index: 20; display: grid; gap: 0.7rem; min-width: 13rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.9rem; background: white; box-shadow: var(--shadow); } .profile-email { margin: 0; color: var(--muted); font-size: 0.82rem; word-break: break-all; } .profile-copy { display: grid; min-width: 0; gap: 0.04rem; } .profile-name { color: var(--ink); font-size: 0.84rem; line-height: 1.1; } .profile-logout { border: 0; border-left: 1px solid rgba(84, 40, 95, 0.14); padding: 0.35rem 0.68rem 0.35rem 0.72rem; color: #6c4dff; background: transparent; font: inherit; font-size: 0.84rem; font-weight: 900; cursor: pointer; } .dashboard-auth, .dashboard-app { display: grid; grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.9fr); gap: 1rem; align-items: start; } .dashboard-auth { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dashboard-sidebar, .dashboard-workspace { display: grid; gap: 1rem; } .dashboard-panel, .dashboard-empty { border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: rgba(255, 255, 255, 0.86); box-shadow: 0 18px 48px rgba(33, 25, 29, 0.08); } .dashboard-panel { display: grid; gap: 0.9rem; } .dashboard-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; } .theme-swatch-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.3rem; } .swatch-option { position: relative; display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.35rem 0.8rem 0.35rem 0.35rem; color: var(--ink); font-size: 0.82rem; font-weight: 700; cursor: pointer; } .swatch-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .swatch-preview { display: inline-block; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: linear-gradient(135deg, var(--sw-a), var(--sw-b) 60%, var(--sw-c)); } .swatch-option:has(input:checked) { border-color: transparent; color: white; background: var(--ink); } .layout-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin-top: 0.3rem; } .layout-option { position: relative; display: grid; gap: 0.15rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; cursor: pointer; } .layout-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .layout-option strong { font-size: 0.88rem; } .layout-option span { color: var(--muted); font-size: 0.76rem; } .layout-option:has(input:checked) { border-color: transparent; outline: 2px solid var(--rose); background: rgba(233, 77, 120, 0.06); } .dashboard-panel-head span, .dashboard-message, .dashboard-media-copy span, .page-list-item span { color: var(--muted); font-size: 0.84rem; } .dashboard-message { min-height: 1.1rem; margin: 0; font-weight: 800; } .dashboard-message.is-error { color: #b42318; } .page-list { display: grid; gap: 0.45rem; } .page-list-item { display: grid; gap: 0.12rem; width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 0.75rem; background: white; color: var(--ink); text-align: left; text-decoration: none; cursor: pointer; } .page-list-item.active { border-color: rgba(233, 77, 120, 0.72); box-shadow: 0 0 0 3px rgba(233, 77, 120, 0.12); } .dashboard-edit-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .dashboard-edit-grid .full { grid-column: 1 / -1; } .settings-disclosure { border: 1px solid rgba(84, 40, 95, 0.12); border-radius: 8px; padding: 0.85rem; background: rgba(255, 255, 255, 0.64); } .settings-disclosure summary { color: var(--ink); font-weight: 1000; cursor: pointer; } .settings-disclosure summary::marker { color: var(--plum); } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; margin-top: 0.85rem; } .settings-grid .full { grid-column: 1 / -1; } .toggle-row { display: flex; align-items: center; gap: 0.45rem; color: var(--muted); font-weight: 900; } .dashboard-upload { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6rem; } .dashboard-upload select, .dashboard-upload input { border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; background: white; } .dashboard-media-list { display: grid; gap: 0.55rem; } .dashboard-media-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.55rem; } .dashboard-media-sort { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; } .dashboard-media-sort select { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; padding: 0.45rem 0.7rem; background: white; color: var(--ink); font: inherit; font-weight: 700; } .dashboard-media-size { color: var(--muted); font-size: 0.78rem; font-weight: 700; } .dashboard-media-extension-actions { display: grid; gap: 0.45rem; margin: 0 0 0.85rem; } .dashboard-media-duplicate-actions, .admin-duplicate-actions { display: grid; gap: 0.55rem; margin: 0 0 0.85rem; } .dashboard-media-extension-row, .admin-extension-row { display: flex; flex-wrap: wrap; gap: 0.55rem; align-items: center; justify-content: space-between; } .dashboard-media-extension-buttons, .admin-extension-buttons, .dashboard-media-duplicate-controls, .admin-duplicate-controls { display: flex; flex-wrap: wrap; gap: 0.45rem; } .dashboard-media-extension-buttons .button, .admin-extension-buttons button, .dashboard-media-duplicate-controls .button, .admin-duplicate-controls button { min-height: 2.75rem; } .admin-extension-actions { display: grid; gap: 0.45rem; margin: 0 0 0.75rem; } .dashboard-media-duplicate-list, .admin-duplicate-list { display: grid; gap: 0.4rem; } .dashboard-media-duplicate-group, .admin-duplicate-group { display: grid; gap: 0.2rem; border: 1px solid rgba(15, 23, 42, 0.1); border-radius: 8px; padding: 0.55rem 0.65rem; background: rgba(255, 255, 255, 0.72); } .dashboard-media-duplicate-group span, .admin-duplicate-group span, .dashboard-media-duplicate-more, .admin-duplicate-more { color: var(--muted); font-size: 0.78rem; line-height: 1.35; overflow-wrap: anywhere; } .dashboard-media-row { display: grid; grid-template-columns: 2.75rem 4.5rem minmax(0, 1fr); gap: 0.75rem; align-items: start; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem; background: white; } .dashboard-media-row > .dashboard-media-select { grid-column: 1; grid-row: 1; } .dashboard-media-row > .dashboard-media-actions { grid-column: 2 / -1; grid-row: 1; justify-self: end; max-width: 100%; } .dashboard-media-row > .dashboard-media-preview { grid-column: 2; grid-row: 2; } .dashboard-media-row > .dashboard-media-copy { grid-column: 3; grid-row: 2; } .dashboard-media-row .dashboard-media-actions .button { width: auto; max-width: 100%; min-height: 44px; white-space: normal; } .dashboard-media-row .dashboard-media-actions .media-rotate-button { flex-basis: 2.75rem; width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; } .dashboard-media-row.is-selected { border-color: color-mix(in srgb, var(--plum) 45%, var(--line)); background: color-mix(in srgb, var(--plum) 6%, white); } .dashboard-media-select, .dashboard-media-select-all { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 2.75rem; min-width: 2.75rem; margin: 0; cursor: pointer; } .dashboard-media-select input, .dashboard-media-select-all input { width: 1.15rem; height: 1.15rem; accent-color: var(--plum); } .dashboard-media-selection { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.85rem; margin: 0.65rem 0 0.85rem; padding: 0.65rem 0.75rem; border: 1px solid var(--line); border-radius: 8px; background: color-mix(in srgb, var(--paper) 70%, white); } .dashboard-media-selection-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; } .dashboard-media-selection-actions .button { min-height: 2.75rem; } .button.media-action-delete { border-color: color-mix(in srgb, #a33 35%, var(--line)); color: #8a2424; } .dashboard-media-row.is-hidden { opacity: 0.54; } .dashboard-media-preview { display: grid; width: 4.5rem; height: 4.5rem; place-items: center; overflow: hidden; border-radius: 8px; background: rgba(33, 25, 29, 0.08); color: var(--muted); font-size: 0.7rem; font-weight: 900; } .dashboard-media-preview img, .dashboard-media-preview video { width: 100%; height: 100%; object-fit: cover; } .dashboard-media-copy { display: grid; gap: 0.18rem; min-width: 0; } .dashboard-media-path { color: var(--muted); font-size: 0.82rem; } .dashboard-media-submission { display: grid; gap: 0.12rem; min-width: 0; margin-top: 0.15rem; } .dashboard-media-detail-name { font-size: 0.95rem; } .dashboard-media-detail-relationship, .dashboard-media-detail-prompt { color: var(--muted); font-size: 0.82rem; } .dashboard-media-detail-message { white-space: pre-wrap; width: fit-content; max-width: 100%; } @media (min-width: 720px) { .dashboard-media-submission { grid-template-columns: repeat(3, max-content); column-gap: 0.75rem; align-items: baseline; } .dashboard-media-detail-message { grid-column: 1 / -1; } } .dashboard-media-details { grid-column: 1 / -1; min-width: 0; } .dashboard-media-details-form { display: grid; gap: 0.75rem; padding-top: 0.5rem; } .dashboard-media-details-meta { display: grid; gap: 0.75rem; min-width: 0; } .dashboard-media-details-meta .config-field { margin-top: 0; } .dashboard-media-details-form .dashboard-media-details-message { margin-top: 0; } .dashboard-media-details-form input, .dashboard-media-details-form textarea { width: 100%; min-width: 0; } .studio-page .dashboard-media-details-form textarea, .dashboard-media-details-form textarea { min-height: 0; height: auto; field-sizing: content; overflow: hidden; resize: none; } .dashboard-media-details-save { justify-self: start; } @media (min-width: 720px) { .dashboard-media-details-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); align-items: end; } } .dashboard-media-row.has-video-preview .dashboard-media-preview { grid-column: 2 / -1; width: min(100%, 28rem); height: auto; aspect-ratio: 16 / 9; } .dashboard-media-row.has-video-preview .dashboard-media-copy { grid-column: 2 / -1; grid-row: 3; } .dashboard-media-preview video { object-fit: contain; } .dashboard-media-copy span { overflow-wrap: anywhere; } .dashboard-media-uploader { color: var(--muted); font-size: 0.78rem; font-weight: 700; } .dashboard-media-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-end; align-items: center; max-width: 16rem; } .media-rotate-pair { display: inline-flex; gap: 0.35rem; align-items: center; } .button.media-action-hide, .dashboard-v2 .button.media-action-hide, .admin-file button.media-action-hide { border-color: transparent; color: white; background: linear-gradient(135deg, #6a5362, #3d2535); box-shadow: 0 10px 22px rgba(61, 37, 53, 0.18); } .button.media-action-show, .dashboard-v2 .button.media-action-show, .admin-file button.media-action-show { border-color: transparent; color: white; background: linear-gradient(135deg, #00a878, #11a66d); box-shadow: 0 10px 22px rgba(0, 168, 120, 0.2); } .button.media-action-promote, .dashboard-v2 .button.media-action-promote, .admin-file button.media-action-promote { border-color: transparent; color: white; background: linear-gradient(135deg, #f08a24, #ff4f8b); box-shadow: 0 10px 22px rgba(240, 138, 36, 0.2); } .button.media-action-hide-all, .dashboard-v2 .button.media-action-hide-all, .admin-file button.media-action-hide-all { border-color: transparent; color: white; background: linear-gradient(135deg, #e94d78, #9b1d4a); box-shadow: 0 10px 22px rgba(233, 77, 120, 0.2); } .button.media-action-uphold, .dashboard-v2 .button.media-action-uphold { border-color: transparent; color: white; background: linear-gradient(135deg, #9b1d4a, #6a1b4d); box-shadow: 0 10px 22px rgba(155, 29, 74, 0.2); } .button.media-action-restore, .dashboard-v2 .button.media-action-restore { border-color: transparent; color: white; background: linear-gradient(135deg, #2f6fed, #11a66d); box-shadow: 0 10px 22px rgba(47, 111, 237, 0.2); } .dashboard-media-actions .media-rotate-button, .admin-file .media-rotate-button { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; min-height: 2.5rem; padding: 0; border: 0; border-radius: 999px; color: white; filter: none; } .dashboard-media-actions .media-rotate-button svg, .admin-file .media-rotate-button svg { width: 1.15rem; height: 1.15rem; } .media-rotate-button-left, .dashboard-media-actions .media-rotate-button-left, .admin-file .media-rotate-button-left { background: linear-gradient(135deg, #7b4dff, #d83f87); box-shadow: 0 10px 22px rgba(123, 77, 255, 0.22); } .media-rotate-button-right, .dashboard-media-actions .media-rotate-button-right, .admin-file .media-rotate-button-right { background: linear-gradient(135deg, #00a8cc, #2f6fed); box-shadow: 0 10px 22px rgba(0, 168, 204, 0.22); } .dashboard-flag-badge { color: #9b1d4a; font-size: 0.75rem; font-weight: 800; } .dashboard-rotation-badge { color: #6b5a4a; font-size: 0.75rem; font-weight: 700; } .dashboard-media-row.is-flagged { border-color: rgba(155, 29, 74, 0.35); background: rgba(255, 236, 244, 0.7); } .dashboard-empty { align-self: stretch; min-height: 18rem; place-content: center; text-align: center; } .dashboard-v2 { color: #231922; background: linear-gradient(125deg, rgba(255, 79, 139, 0.16), transparent 34%), linear-gradient(235deg, rgba(35, 213, 171, 0.18), transparent 38%), linear-gradient(180deg, #fff9fd 0%, #f4fff9 45%, #fff8e3 100%); } .dashboard-v2 .dashboard-shell { width: min(100% - 2rem, 84rem); padding: 1rem 0 4rem; } .dashboard-v2 .dashboard-topbar { position: sticky; top: 0; z-index: 40; border: 1px solid rgba(255, 255, 255, 0.68); border-radius: 12px; padding: 0.72rem; background: rgba(255, 255, 255, 0.74); box-shadow: 0 18px 48px rgba(84, 40, 95, 0.1); backdrop-filter: blur(18px); } .dashboard-topnav { display: flex; align-items: center; justify-content: center; gap: 0.85rem; } .dashboard-topnav a { color: #6a5362; font-size: 0.92rem; font-weight: 900; text-decoration: none; } .dashboard-v2 .dashboard-actions { min-width: 7rem; justify-content: flex-end; } .dashboard-v2 .button { border-color: rgba(84, 40, 95, 0.18); color: #3d2535; background: rgba(255, 255, 255, 0.84); box-shadow: 0 12px 26px rgba(84, 40, 95, 0.08); } .dashboard-v2 .button.primary { border-color: transparent; color: white; background: linear-gradient(135deg, #ff4f8b, #6c4dff 58%, #0bbf9b); box-shadow: 0 18px 42px rgba(108, 77, 255, 0.22); } .dashboard-v2 .button.invite-action { border-color: transparent; color: white; } .dashboard-v2 .button.invite-action-onboarding { background: linear-gradient(135deg, #0f9f8c, #1277d8); box-shadow: 0 16px 34px rgba(18, 119, 216, 0.24); } .dashboard-v2 .button.invite-action-create-top { background: linear-gradient(135deg, #ff4f8b, #f08a24); box-shadow: 0 16px 34px rgba(240, 138, 36, 0.24); } .dashboard-v2 .button.invite-action-create-bottom { background: linear-gradient(135deg, #7b4dff, #d83f87); box-shadow: 0 16px 34px rgba(123, 77, 255, 0.23); } .dashboard-v2 .button.invite-action-collaborators { background: linear-gradient(135deg, #2f6fed, #11a66d); box-shadow: 0 16px 34px rgba(47, 111, 237, 0.22); } .dashboard-v2 .button.invite-action-curate-top { background: linear-gradient(135deg, #00a878, #6b6ff5); box-shadow: 0 16px 34px rgba(0, 168, 120, 0.22); } .dashboard-v2 .button.invite-action-curate-bottom { background: linear-gradient(135deg, #c47a00, #18a999); box-shadow: 0 16px 34px rgba(196, 122, 0, 0.22); } .dashboard-v2 .button.invite-action-celebrate-top { background: linear-gradient(135deg, #e84c3d, #b15cff); box-shadow: 0 16px 34px rgba(232, 76, 61, 0.22); } .dashboard-v2 .button.invite-action-celebrate-bottom { background: linear-gradient(135deg, #2b8a3e, #e05f2f); box-shadow: 0 16px 34px rgba(43, 138, 62, 0.22); } .dashboard-v2 .dashboard-auth { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, 0.95fr); gap: 1.2rem; align-items: stretch; padding-top: 1.2rem; } .auth-story, .studio-banner { position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 12px; background: linear-gradient(145deg, rgba(255, 79, 139, 0.95), rgba(108, 77, 255, 0.9) 54%, rgba(35, 213, 171, 0.9)), #6c4dff; color: white; box-shadow: 0 28px 70px rgba(84, 40, 95, 0.2); } .auth-story { display: grid; align-content: end; gap: 1rem; min-height: 41rem; padding: clamp(1.2rem, 3vw, 2.4rem); } .auth-story::before, .studio-banner::before { position: absolute; inset: 1rem; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 10px; content: ""; pointer-events: none; } .auth-story > *, .studio-banner > * { position: relative; z-index: 1; } .auth-story .eyebrow, .studio-banner .eyebrow { color: rgba(255, 255, 255, 0.78); } .auth-story h1, .studio-banner h1 { margin: 0; max-width: 11ch; font-size: 5.3rem; line-height: 0.92; } .auth-story p, .studio-banner p { max-width: 42rem; margin: 0; color: rgba(255, 255, 255, 0.88); font-size: 1.06rem; line-height: 1.65; } .auth-highlights { display: flex; flex-wrap: wrap; gap: 0.55rem; } .auth-highlights span { border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 999px; padding: 0.46rem 0.72rem; background: rgba(255, 255, 255, 0.14); color: white; font-size: 0.82rem; font-weight: 900; } .auth-preview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; margin-top: 0.5rem; } .auth-preview div { display: grid; gap: 0.38rem; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 10px; padding: 0.85rem; background: rgba(255, 255, 255, 0.14); backdrop-filter: blur(14px); } .auth-preview span { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: 50%; color: #3d2535; background: white; font-weight: 1000; } .auth-preview strong, .auth-preview p { margin: 0; } .auth-preview p { font-size: 0.84rem; line-height: 1.45; } .auth-card-stack { display: grid; gap: 1rem; align-content: start; } .dashboard-v2 .dashboard-panel, .dashboard-v2 .dashboard-empty { border-color: rgba(84, 40, 95, 0.12); border-radius: 12px; background: rgba(255, 255, 255, 0.84); box-shadow: 0 24px 64px rgba(84, 40, 95, 0.11); backdrop-filter: blur(18px); } .auth-card { padding: clamp(1rem, 2vw, 1.35rem); } .auth-card.compact { background: rgba(255, 255, 255, 0.72); } .auth-card-head { display: grid; gap: 0.28rem; } .auth-card-head .eyebrow, .dashboard-v2 .dashboard-panel .eyebrow { color: #8a3ffc; } .auth-card-head h2 { margin: 0; } .auth-card-head span { color: #6a5362; font-size: 0.9rem; line-height: 1.45; } .dashboard-v2 .config-field input, .dashboard-v2 .config-field select, .dashboard-v2 .config-field textarea, .dashboard-v2 .dashboard-upload select, .dashboard-v2 .dashboard-upload input { border-color: rgba(84, 40, 95, 0.16); color: #241b21; background: rgba(255, 255, 255, 0.92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); } .dashboard-v2 .config-field input:focus, .dashboard-v2 .config-field select:focus, .dashboard-v2 .config-field textarea:focus, .dashboard-v2 .dashboard-upload select:focus, .dashboard-v2 .dashboard-upload input:focus { outline: 3px solid rgba(108, 77, 255, 0.22); border-color: rgba(108, 77, 255, 0.55); } .dashboard-v2 .dashboard-app { grid-template-columns: 1fr; gap: 1rem; padding-top: 1.2rem; } .studio-banner { display: flex; align-items: end; justify-content: space-between; gap: 1rem; min-height: 18rem; padding: clamp(1.2rem, 3vw, 2rem); } .studio-banner h1 { max-width: 13ch; font-size: 4.4rem; } .studio-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .studio-toolbar h1 { margin: 0; font-size: 1.6rem; } .studio-onboarding { display: grid; grid-template-columns: minmax(12rem, 0.54fr) minmax(0, 1.6fr) auto; align-items: start; justify-content: space-between; gap: 1rem; margin-top: 1rem; border: 1px solid var(--line); border-radius: 8px; padding: 1rem; background: rgba(255, 255, 255, 0.86); } .studio-onboarding-head { display: grid; gap: 0.24rem; } .studio-onboarding-head h2, .create-page-section h3, .create-preview-card h3 { margin: 0; } .onboarding-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .onboarding-steps article { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 0.25rem 0.6rem; min-height: 100%; border: 1px solid rgba(84, 40, 95, 0.1); border-radius: 8px; padding: 0.75rem; background: rgba(255, 255, 255, 0.64); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .onboarding-steps article:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(33, 25, 29, 0.12); } .onboarding-steps article.is-active { box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 10px 24px rgba(33, 25, 29, 0.18); transform: translateY(-2px); } .onboarding-steps article:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.95); outline-offset: 2px; } .onboarding-steps span { display: grid; flex: none; width: 1.6rem; height: 1.6rem; place-items: center; border-radius: 50%; background: linear-gradient(135deg, #ff4f8b, #6c4dff); color: white; font-size: 0.78rem; font-weight: 900; } .onboarding-steps strong { display: block; font-size: 1.65rem; line-height: 1.1; } .onboarding-steps p { grid-column: 2; margin: 0.15rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.35; overflow-wrap: anywhere; } .onboarding-step-action { grid-column: 2; align-self: end; justify-self: end; margin-top: 0.5rem; padding: 0.4rem 0.9rem; font-size: 0.8rem; } .onboarding-steps article.step-create, .onboarding-steps article.step-curate, .onboarding-steps article.step-celebrate { color: white; border-color: transparent; } .onboarding-steps article.step-create p, .onboarding-steps article.step-curate p, .onboarding-steps article.step-celebrate p { color: rgba(255, 255, 255, 0.9); } .onboarding-steps article.step-create span, .onboarding-steps article.step-curate span, .onboarding-steps article.step-celebrate span { background: rgba(255, 255, 255, 0.25); color: white; } .onboarding-steps article.step-create { background: linear-gradient(135deg, var(--rose), #c23663); } .onboarding-steps article.step-curate { background: linear-gradient(135deg, var(--plum), #2f1636); } .onboarding-steps article.step-celebrate { background: linear-gradient(135deg, var(--marigold), var(--rose) 65%, var(--plum)); } .page-preview-frame { overflow: hidden; overflow-x: hidden; border: 1px solid var(--line); border-radius: 8px; aspect-ratio: 16 / 9; background: rgba(33, 25, 29, 0.04); } .studio-preview-panel { gap: 0.45rem; width: auto; min-width: 0; justify-self: stretch; } .studio-preview-panel .dashboard-panel-head { gap: 0.15rem; } .studio-preview-panel .dashboard-panel-head h2 { font-size: 0.95rem; line-height: 1.2; } .studio-preview-panel .page-preview-frame { width: 100%; max-height: none; aspect-ratio: 16 / 9; } .studio-preview-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: start; } .studio-preview-row .mobile-preview-panel { gap: 0.45rem; width: max-content; max-width: 100%; justify-self: end; height: auto; } .studio-preview-row .mobile-preview-panel .dashboard-panel-head h2 { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .studio-preview-row .mobile-preview-frame { width: 11.25rem; max-width: 11.25rem; margin: 0; aspect-ratio: 9 / 17; max-height: min(28rem, 58vh); height: auto; } .studio-section-nav { gap: 0.45rem; } .studio-nav-tree { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; } .studio-nav-group { display: grid; gap: 0.2rem; } .studio-nav-parent, .studio-nav-children button { width: 100%; border: 1px solid transparent; border-radius: 6px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .studio-nav-parent { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; padding: 0.5rem 0.55rem; font-size: 0.82rem; font-weight: 800; color: var(--ink); } .studio-nav-parent::after { content: "▾"; flex: 0 0 auto; font-size: 0.7rem; opacity: 0.7; } .studio-nav-parent[aria-expanded="false"]::after { content: "▸"; } .studio-nav-parent.active { border-color: rgba(233, 77, 120, 0.28); background: rgba(233, 77, 120, 0.08); } .studio-nav-children { list-style: none; margin: 0; padding: 0 0 0 0.45rem; display: grid; gap: 0.12rem; } .studio-nav-children button { padding: 0.38rem 0.5rem; font-size: 0.74rem; font-weight: 650; color: var(--muted); } .studio-nav-children button:hover, .studio-nav-children button:focus-visible { color: var(--ink); background: rgba(84, 40, 95, 0.06); } .slug-rename-head { margin-top: 1rem; } .slug-rename-head h3 { margin: 0; font-size: 0.95rem; } @media (max-width: 1100px) { .studio-preview-row .mobile-preview-frame { width: 10rem; max-width: 10rem; max-height: min(24rem, 52vh); } } .workspace-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; border: 1px solid rgba(84, 40, 95, 0.12); border-radius: 8px; padding: 0.35rem; background: rgba(255, 255, 255, 0.82); box-shadow: 0 14px 34px rgba(84, 40, 95, 0.08); } .workspace-tab { border: 0; border-radius: 6px; padding: 0.7rem 0.85rem; color: var(--muted); background: transparent; font: inherit; font-size: 0.9rem; font-weight: 900; cursor: pointer; } .workspace-tab.active { color: white; background: linear-gradient(135deg, var(--rose), var(--plum)); box-shadow: 0 10px 26px rgba(84, 40, 95, 0.18); } .workspace-tab:focus-visible { outline: 3px solid rgba(108, 77, 255, 0.22); outline-offset: 2px; } .page-preview-frame iframe { display: block; width: 100%; height: 100%; border: 0; } .mobile-preview-frame iframe { max-width: none; width: 200%; height: 200%; border: 0; transform: scale(0.5); transform-origin: top left; } .media-bucket-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; } .workspace-group { display: grid; gap: 0.75rem; } .workspace-group-label { margin: 0; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; } .workspace-group-copy { max-width: 54rem; margin: 0.25rem 0 0; color: var(--muted); font-size: 0.86rem; line-height: 1.45; } .workspace-group-create .workspace-group-label { color: var(--rose); } .workspace-group-curate .workspace-group-label { color: var(--plum); } .workspace-group-celebrate .workspace-group-label { color: #b3720a; } .workspace-group-create .dashboard-panel { background: rgba(233, 77, 120, 0.05); border-color: rgba(233, 77, 120, 0.22); } .workspace-group-curate .dashboard-panel { background: rgba(84, 40, 95, 0.05); border-color: rgba(84, 40, 95, 0.2); } .workspace-group-celebrate .dashboard-panel { background: rgba(246, 183, 60, 0.08); border-color: rgba(246, 183, 60, 0.35); } .workspace-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem; } .workspace-group-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; } .workspace-bottom-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; border-top: 1px solid var(--line); padding-top: 0.75rem; } .autosave-status { color: var(--muted); font-size: 0.78rem; font-weight: 700; } .autosave-status.is-error { color: #b42318; } .collaborator-list { display: grid; gap: 0.5rem; } .collaborators-panel { gap: 0.5rem; } .hint-text { margin: 0; color: var(--muted); font-size: 0.8rem; line-height: 1.35; } .music-follow-link-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .music-follow-group-title { grid-column: 1 / -1; margin: 0.35rem 0 0; color: var(--plum); font-size: 0.76rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase; } .music-follow-group-title:first-child { margin-top: 0; } .music-follow-field-label { display: inline-flex; align-items: center; gap: 0.4rem; } .music-follow-field-label .music-follow-logo { width: 1rem; height: 1rem; fill: var(--plum); } .music-follow-cover-field .hint-text { margin: 0.2rem 0 0.55rem; } .music-follow-cover-studio { display: flex; justify-content: center; margin: 0 0 0.7rem; } .music-follow-cover-studio img { width: min(9.5rem, 56vw); height: min(9.5rem, 56vw); object-fit: cover; object-position: center; border-radius: 16px; background: #1a0c16; } .music-follow-cover-actions { margin-top: 0; } @media (max-width: 420px) { .music-follow-cover-studio img { width: min(8.5rem, 58vw); height: min(8.5rem, 58vw); } } .collaborator-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem; background: white; } .collaborator-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; } .button.is-disabled { opacity: 0.4; pointer-events: none; } .add-invitee-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; } .add-invitee-form input { border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.65rem; color: var(--ink); background: white; font: inherit; font-size: 0.85rem; } .add-invitee-form button { grid-column: 1 / -1; justify-self: end; width: auto; } .invitee-list, .rsvp-list { display: grid; gap: 0.5rem; } .invitee-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem; background: white; } .invitee-row strong, .invitee-row span { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } .schedule-list { display: grid; gap: 0.5rem; } .schedule-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.75rem; align-items: center; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem; background: white; } .schedule-row-actions, .schedule-form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; } .schedule-form-actions { grid-column: 1 / -1; justify-content: flex-start; } .schedule-row-copy strong { display: block; font-size: 0.88rem; overflow-wrap: anywhere; word-break: break-word; } .schedule-row-copy span { display: block; margin-top: 0.1rem; color: var(--muted); font-size: 0.8rem; overflow-wrap: anywhere; word-break: break-word; } .schedule-row-link { display: block; margin-top: 0.2rem; font-size: 0.78rem; color: var(--plum); overflow-wrap: anywhere; word-break: break-word; } .schedule-row-links { display: grid; gap: 0.15rem; margin-top: 0.25rem; } .schedule-links-editor { grid-column: 1 / -1; display: grid; gap: 0.45rem; } .schedule-link-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.45rem; align-items: center; } .schedule-add-form #addScheduleLinkButton { justify-self: start; } .invitee-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.4rem; } .rsvp-row { display: grid; gap: 0.2rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.65rem 0.75rem; background: white; } .rsvp-row-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .rsvp-row-head strong { font-size: 0.9rem; } .rsvp-row-detail { margin: 0; color: var(--muted); font-size: 0.82rem; overflow-wrap: anywhere; } .edit-log-list { display: grid; gap: 0.6rem; max-height: 26rem; overflow-y: auto; } .edit-log-row { display: grid; gap: 0.2rem; border: 1px solid var(--line); border-radius: 8px; padding: 0.7rem 0.8rem; } .edit-log-row.is-reverted { opacity: 0.6; } .edit-log-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .edit-log-meta strong { font-size: 0.88rem; } .edit-log-badge { border-radius: 999px; padding: 0.15rem 0.6rem; color: var(--muted); background: rgba(84, 40, 95, 0.08); font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .edit-log-change { margin: 0; overflow-wrap: anywhere; font-size: 0.84rem; } .edit-log-who { margin: 0; color: var(--muted); font-size: 0.76rem; } .edit-log-row .button { justify-self: start; } .media-bucket-card .drop-zone { min-height: 9rem; padding: 0.9rem; } .media-bucket-card .drop-icon { width: 2.6rem; height: 2.6rem; font-size: 1.6rem; } .media-bucket-card .media-source-actions { margin-top: 0; } .media-bucket-card .media-source-help { margin: 0; } .spotify-music-field, .music-playlist-field { display: grid; gap: 0.45rem; padding-top: 0.35rem; } .spotify-music-field .config-field, .music-playlist-field .config-field { margin-top: 0; } .invite-link-callout { display: grid; gap: 0.5rem; margin-top: 0.2rem; padding-top: 0.9rem; border-top: 1px solid var(--line); } .invite-link-field { display: flex; gap: 0.5rem; } .invite-link-field input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 0.5rem 0.65rem; font-size: 0.82rem; color: var(--ink); background: rgba(255, 255, 255, 0.7); } .event-time-row { display: flex; flex-wrap: wrap; gap: 0.5rem 0.65rem; align-items: end; max-width: 100%; min-width: 0; } .event-time-row .config-field { flex: 0 1 auto; width: max-content; max-width: 100%; min-width: 0; margin-top: 0; } .event-time-row input, .event-time-row input[type="date"], .event-time-row input[type="time"] { width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; } .event-time-row input[type="date"] { width: 10.75rem; max-width: 100%; } .event-time-row input[type="time"] { width: 7.25rem; max-width: 100%; } .dashboard-v2 input[type="date"], .dashboard-v2 input[type="time"], .add-invitee-form input[type="date"], .add-invitee-form input[type="time"] { width: auto; max-width: 100%; min-width: 0; box-sizing: border-box; } .add-invitee-form input[type="time"] { width: 7.25rem; justify-self: start; } /* Keep user-authored copy fully visible on narrow screens */ .invite-body .invite-copy h2, .invite-body .invite-copy p, .invite-body .section-heading h2, .invite-body .music-follow-artist, .invite-body .music-follow-prompt, .invite-body .social-feed-title, .invite-body .countdown-title, .invite-body .countdown-launch-at, .invite-body .countdown-complete, .invite-body .event-detail-list dd, .invite-body .event-details-notes, .invite-body .music-follow-link-label, .invite-body .event-schedule-list, .hero h1, .hero-copy, .section-heading h2, #collection-title, #upload-title, .dashboard-v2 .config-field, .dashboard-v2 .hint-text, .dashboard-v2 .dashboard-panel-head h2, .dashboard-v2 .workspace-group-copy, .dashboard-v2 .workspace-group-label, .dashboard-v2 .schedule-row-copy, .dashboard-v2 .schedule-row-copy strong, .dashboard-v2 .schedule-row-copy span, .dashboard-v2 .invitee-row, .dashboard-v2 .rsvp-row-head strong, .dashboard-v2 .mini-status, .dashboard-v2 .dashboard-message, .profile-event-details dd { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; min-width: 0; } .dashboard-v2 .config-field input, .dashboard-v2 .config-field select, .dashboard-v2 .config-field textarea, .dashboard-v2 .add-invitee-form input, .dashboard-v2 .invite-link-field input, .dashboard-edit-grid, .dashboard-edit-grid > * { max-width: 100%; min-width: 0; } @media (max-width: 720px) { .hero h1, .section-heading h2, .invite-body .invite-copy h2, .invite-body .section-heading h2 { line-height: 1.18; } } .create-page-details { display: grid; gap: 0.95rem; } .create-page-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.6rem; } .create-page-actions .button { flex: 0 1 auto; } .create-page-actions .button.wide { width: auto; } .copy-option-list { display: flex; flex-wrap: wrap; gap: 0.5rem; } .copy-option { position: relative; display: inline-flex; align-items: center; max-width: 14rem; border: 1px solid var(--line); border-radius: 999px; padding: 0.4rem 0.85rem; color: var(--ink); font-size: 0.78rem; font-weight: 700; line-height: 1.25; cursor: pointer; } .copy-option input { position: absolute; width: 1px; height: 1px; opacity: 0; } .copy-option strong { display: block; font-weight: inherit; overflow-wrap: anywhere; } .copy-option:has(input:checked) { border-color: transparent; outline: 2px solid var(--rose, #6c4dff); background: rgba(233, 77, 120, 0.06); } .create-page-section { display: grid; gap: 0.18rem; border-top: 1px solid rgba(84, 40, 95, 0.1); padding-top: 0.95rem; } .create-page-section:first-child { border-top: 0; padding-top: 0; } .create-content-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .create-content-grid .full { grid-column: 1 / -1; } .create-content-grid .config-field, .create-page-details > .config-field { margin-top: 0; } .create-preview-card { display: grid; gap: 0.38rem; overflow: hidden; border: 1px solid rgba(84, 40, 95, 0.14); border-radius: 8px; padding: 1rem; color: white; background: linear-gradient(135deg, rgba(255, 79, 139, 0.92), rgba(108, 77, 255, 0.9) 62%, rgba(11, 191, 155, 0.88)), #6c4dff; } .create-preview-card p { margin: 0; color: rgba(255, 255, 255, 0.76); font-size: 0.72rem; font-weight: 1000; letter-spacing: 0.08em; text-transform: uppercase; } .create-preview-card h3 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.45rem, 4vw, 2.3rem); line-height: 1; } .create-preview-card span { color: rgba(255, 255, 255, 0.86); font-size: 0.9rem; line-height: 1.45; } dialog#createPageDialog { width: min(46rem, calc(100% - 2rem)); max-height: min(90vh, 48rem); border: none; border-radius: 12px; padding: 0; background: transparent; overflow: visible; } dialog#createPageDialog::backdrop { background: rgba(33, 25, 29, 0.5); backdrop-filter: blur(4px); } dialog#createPageDialog .create-page-panel { max-height: min(90vh, 48rem); overflow-y: auto; } .profile-product-grid { grid-template-columns: minmax(0, 1fr); margin-top: 0.25rem; width: 100%; } .profile-account-grid { display: grid; gap: 0.85rem; } .profile-referrals { display: grid; gap: 0.65rem; min-width: 0; padding-top: 0.2rem; } .profile-referrals .dashboard-panel-head h3 { margin: 0; font-size: 0.95rem; } .profile-referral-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 0.55rem; } .profile-referral-row { display: grid; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 0.68rem 0.75rem; background: rgba(255, 255, 255, 0.72); } .profile-referral-copy { display: grid; gap: 0.18rem; min-width: 0; } .profile-referral-copy strong, .profile-referral-copy span { overflow-wrap: anywhere; } .profile-referral-copy span { color: var(--muted); font-size: 0.82rem; } .profile-product-grid .dashboard-panel { padding: 0.85rem 0.95rem; gap: 0.65rem; } .profile-card-grid, .profile-event-list, .profile-submission-list { display: grid; gap: 0.75rem; } .profile-card-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15.25rem), 1fr)); } .profile-event-list, .profile-submission-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); } .profile-summary-card, .profile-event-card, .profile-submission-form { display: grid; gap: 0.7rem; align-content: start; border: 0; border-radius: 14px; padding: 0.95rem; color: #fff; box-shadow: 0 14px 32px rgba(84, 40, 95, 0.16); } .profile-summary-card h3, .profile-summary-card p, .profile-event-card h3, .profile-submission-form h3 { margin: 0; font-size: 1rem; color: inherit; } .profile-page-card .eyebrow, .profile-summary-card .eyebrow, .profile-event-card .eyebrow, .profile-submission-form .eyebrow { color: rgba(255, 255, 255, 0.82); } .profile-page-card:nth-child(6n+1), .profile-summary-card:nth-child(6n+1), .profile-event-card:nth-child(6n+1), .profile-submission-form:nth-child(6n+1) { background: linear-gradient(145deg, #ff4f8b 0%, #6c4dff 100%); } .profile-page-card:nth-child(6n+2), .profile-summary-card:nth-child(6n+2), .profile-event-card:nth-child(6n+2), .profile-submission-form:nth-child(6n+2) { background: linear-gradient(145deg, #00b8d9 0%, #2f54eb 100%); } .profile-page-card:nth-child(6n+3), .profile-summary-card:nth-child(6n+3), .profile-event-card:nth-child(6n+3), .profile-submission-form:nth-child(6n+3) { background: linear-gradient(145deg, #ff7a45 0%, #9b5cff 100%); } .profile-page-card:nth-child(6n+4), .profile-summary-card:nth-child(6n+4), .profile-event-card:nth-child(6n+4), .profile-submission-form:nth-child(6n+4) { background: linear-gradient(145deg, #247b7b 0%, #36e6a6 72%, #ffe66d 100%); color: #21191d; } .profile-page-card:nth-child(6n+4) .eyebrow, .profile-summary-card:nth-child(6n+4) .eyebrow, .profile-event-card:nth-child(6n+4) .eyebrow, .profile-submission-form:nth-child(6n+4) .eyebrow { color: rgba(33, 25, 29, 0.72); } .profile-page-card:nth-child(6n+5), .profile-summary-card:nth-child(6n+5), .profile-event-card:nth-child(6n+5), .profile-submission-form:nth-child(6n+5) { background: linear-gradient(145deg, #8a5cff 0%, #00e0ff 100%); } .profile-page-card:nth-child(6n), .profile-summary-card:nth-child(6n), .profile-event-card:nth-child(6n), .profile-submission-form:nth-child(6n) { background: linear-gradient(145deg, #ff5d73 0%, #7b2ff7 100%); } .profile-summary-card .button, .profile-event-card .button, .profile-submission-form .button { background: rgba(255, 255, 255, 0.16); color: inherit; border-color: rgba(255, 255, 255, 0.35); } .profile-page-card:nth-child(6n+4) .button, .profile-summary-card:nth-child(6n+4) .button, .profile-event-card:nth-child(6n+4) .button, .profile-submission-form:nth-child(6n+4) .button { background: rgba(255, 255, 255, 0.55); border-color: rgba(33, 25, 29, 0.12); color: #21191d; } .profile-event-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; } .profile-event-details, .profile-rsvp-form, .profile-submission-form .dashboard-edit-grid, .profile-event-card .dashboard-edit-grid { color: #21191d; background: rgba(255, 255, 255, 0.92); border: 0; border-radius: 10px; padding: 0.75rem; } .profile-rsvp-form { padding-top: 0.75rem; } .profile-submission-preview { display: grid; min-height: 7rem; place-items: center; overflow: hidden; border-radius: 10px; background: rgba(255, 255, 255, 0.16); } .profile-submission-preview img, .profile-submission-preview video { width: 100%; max-height: 14rem; object-fit: contain; } .profile-submission-preview audio { width: min(100%, 24rem); } @media (min-width: 900px) { .profile-account-grid { grid-template-columns: minmax(12rem, 0.6fr) minmax(24rem, 1.4fr); align-items: start; } #faceReferencePanel { grid-column: 1 / -1; } .profile-product-grid .dashboard-workspace { gap: 0.85rem; } } .dashboard-product-grid { display: grid; grid-template-columns: minmax(10.5rem, 13rem) minmax(0, 1fr); gap: 1rem; align-items: start; } .dashboard-product-grid.profile-product-grid { grid-template-columns: minmax(0, 1fr); width: 100%; } .dashboard-product-grid.profile-product-grid .dashboard-workspace { width: 100%; max-width: none; } .landing-hero > *, .landing-split > *, .dashboard-workspace, .dashboard-sidebar, .invite-copy, .auth-story, .studio-cta-copy, .workspace-group, .dashboard-panel, .button, input, textarea, select { min-width: 0; } .dashboard-sidebar { align-self: start; } .dashboard-sidebar .dashboard-panel { gap: 0.55rem; padding: 0.7rem; } .mobile-preview-frame { overflow: hidden; border: 1px solid var(--line); border-radius: 10px; aspect-ratio: 9 / 17; background: rgba(33, 25, 29, 0.04); } .mobile-preview-frame iframe { max-width: none; } .dashboard-sidebar .dashboard-panel-head h2 { font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .dashboard-sidebar .page-list { gap: 0.3rem; } .dashboard-sidebar .page-list-item { gap: 0.02rem; padding: 0.45rem 0.55rem; border-radius: 6px; } .dashboard-sidebar .page-list-item strong, .dashboard-sidebar .page-list-item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dashboard-sidebar .page-list-item strong { font-size: 0.82rem; } .dashboard-sidebar .page-list-item span { font-size: 0.7rem; } .dashboard-sidebar .page-list-item.active { border-color: transparent; border-left: 3px solid rgba(233, 77, 120, 0.75); padding-left: calc(0.55rem - 2px); background: rgba(233, 77, 120, 0.06); box-shadow: none; transform: none; } .dashboard-v2 .page-list-item { border-color: rgba(84, 40, 95, 0.12); background: rgba(255, 255, 255, 0.9); transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease; } .dashboard-v2 .page-list-item:hover, .dashboard-v2 .page-list-item.active { transform: translateY(-0.08rem); border-color: rgba(108, 77, 255, 0.5); box-shadow: 0 14px 32px rgba(108, 77, 255, 0.12); } .dashboard-v2 .dashboard-media-row { border-color: rgba(84, 40, 95, 0.12); background: rgba(255, 255, 255, 0.86); } .auth-route { min-height: calc(100svh - 6rem); } .auth-route-card { align-self: center; padding: clamp(1.1rem, 2.6vw, 1.65rem); } .auth-switch { margin: 0; color: #6a5362; font-size: 0.9rem; font-weight: 800; text-align: center; } .auth-switch a { color: #6c4dff; font-weight: 1000; } .auth-divider { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.7rem; align-items: center; margin: 0.1rem 0; color: #8a7480; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .auth-divider::before, .auth-divider::after { content: ""; height: 1px; background: rgba(84, 40, 95, 0.14); } .google-login-button { display: flex; align-items: center; justify-content: center; min-height: 2.75rem; width: 100%; font-size: 16px; } .login-route .auth-story { background: linear-gradient(145deg, rgba(18, 24, 38, 0.98), rgba(108, 77, 255, 0.92) 56%, rgba(0, 184, 217, 0.86)), #121826; } .dashboard-gate { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(18rem, 0.95fr); gap: 1rem; align-items: stretch; margin-top: 1.2rem; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 12px; padding: clamp(1.1rem, 3vw, 2rem); background: linear-gradient(145deg, rgba(255, 79, 139, 0.94), rgba(108, 77, 255, 0.88) 58%, rgba(35, 213, 171, 0.86)), #6c4dff; color: white; box-shadow: 0 28px 70px rgba(84, 40, 95, 0.2); } .dashboard-gate[hidden] { display: none; } .dashboard-gate > div:first-child { display: grid; align-content: end; gap: 1rem; } .dashboard-gate .eyebrow, .dashboard-gate p { color: rgba(255, 255, 255, 0.84); } .dashboard-gate h1 { max-width: 12ch; margin: 0; font-size: 4.5rem; line-height: 0.94; } .dashboard-gate p { max-width: 40rem; margin: 0; font-size: 1.06rem; line-height: 1.65; } .studio-snapshot { display: grid; gap: 0.8rem; } .studio-snapshot article { display: grid; gap: 0.35rem; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 10px; padding: 1rem; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(14px); } .studio-snapshot span { width: fit-content; border-radius: 999px; padding: 0.28rem 0.55rem; color: #241b21; background: white; font-size: 0.74rem; font-weight: 1000; text-transform: uppercase; } .studio-snapshot strong, .studio-snapshot p { margin: 0; } .starter-copy-panel { display: grid; gap: 0.7rem; border: 1px solid rgba(108, 77, 255, 0.16); border-radius: 10px; padding: 0.9rem; background: linear-gradient(135deg, rgba(255, 79, 139, 0.08), rgba(35, 213, 171, 0.1)), rgba(255, 255, 255, 0.68); } .starter-copy-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .starter-copy-head h3 { margin: 0; font-size: 1.05rem; } .starter-copy-panel .config-field { margin-top: 0; } .landing-body { color: #241b21; background: linear-gradient(135deg, rgba(255, 248, 242, 0.95), rgba(255, 236, 242, 0.86) 48%, rgba(232, 255, 247, 0.92)), #fff8f2; } .landing-nav { position: sticky; top: 0; z-index: 50; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; border-bottom: 1px solid rgba(33, 25, 29, 0.09); padding: 0.75rem max(1rem, calc((100vw - 78rem) / 2)); background: rgba(255, 248, 242, 0.82); backdrop-filter: blur(18px); } .landing-brand { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; font-size: 1.05rem; font-weight: 1000; } .landing-brand .brand-mark { display: block; width: 2.1rem; height: 2.1rem; border-radius: 8px; } .landing-nav nav, .landing-nav-actions, .landing-hero-actions, .landing-proof { display: flex; align-items: center; gap: 0.75rem; } .landing-nav nav { justify-content: center; } .landing-nav nav a { color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 850; } .landing-nav-compact { display: flex; justify-content: space-between; } .landing-nav-compact .landing-top-links { justify-content: flex-end; gap: 0.9rem; margin-left: auto; } .landing-nav-compact .landing-top-links a { font-size: 0.78rem; letter-spacing: 0; } .landing-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr); gap: 2rem; align-items: center; width: min(100% - 2rem, 78rem); min-height: calc(100svh - 4rem); margin: 0 auto; padding: 3rem 0 4rem; } .landing-hero-copy { display: grid; gap: 1.2rem; max-width: none; min-width: 0; width: 100%; } .landing-kicker { width: fit-content; margin: 0; border: 1px solid rgba(233, 77, 120, 0.24); border-radius: 999px; padding: 0.42rem 0.72rem; color: var(--plum); background: rgba(255, 255, 255, 0.68); font-size: 0.78rem; font-weight: 1000; text-transform: uppercase; } .landing-purpose { max-width: 40rem; } .landing-hero h1 { margin: 0; max-width: none; font-size: clamp(2.35rem, 4.5vw, 4.1rem); line-height: 1.02; } .landing-hero-tagline { margin: 0; font-size: clamp(1.35rem, 3.2vw, 2.1rem); line-height: 1.2; font-weight: 800; } .landing-hero-copy > p:not(.landing-kicker):not(.landing-hero-tagline), .landing-split p, .landing-reveal p, .landing-final p { margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.65; } .landing-hero-actions { flex-wrap: wrap; justify-content: flex-end; } .landing-proof { flex-wrap: wrap; gap: 0.5rem; } .landing-proof span { border: 1px solid rgba(33, 25, 29, 0.1); border-radius: 999px; padding: 0.42rem 0.7rem; background: rgba(255, 255, 255, 0.62); color: var(--muted); font-size: 0.82rem; font-weight: 850; max-width: 100%; white-space: normal; text-align: center; } .landing-visual { position: relative; min-height: 34rem; } .wishes-device { position: relative; display: grid; gap: 1rem; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: 28px; padding: 1rem; background: rgba(255, 255, 255, 0.62); box-shadow: 0 34px 90px rgba(84, 40, 95, 0.22); backdrop-filter: blur(18px); } .wishes-device-top, .wishes-device-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border-radius: 18px; padding: 0.85rem; background: #241b21; color: white; } .wishes-device-top span, .wishes-device-bottom span, .memory-note span, .keepsake-stack span { color: rgba(255, 255, 255, 0.72); font-size: 0.76rem; font-weight: 900; text-transform: uppercase; } .wishes-device-bottom a { border-radius: 999px; padding: 0.45rem 0.7rem; color: var(--ink); background: white; text-decoration: none; font-weight: 1000; } .wishes-collage { display: grid; grid-template-columns: 1fr 0.86fr; grid-auto-rows: 10rem; gap: 0.75rem; } .wishes-collage img, .occasion-preview, .memory-note, .memory-video { width: 100%; height: 100%; overflow: hidden; border-radius: 18px; object-fit: cover; } .wishes-collage img:first-child { grid-row: span 2; } .occasion-preview { grid-row: span 2; display: grid; align-content: end; gap: 0.55rem; padding: 1rem; color: white; background: linear-gradient(180deg, rgba(36, 27, 33, 0.1), rgba(36, 27, 33, 0.78)), radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--theme-sun) 92%, white), transparent 34%), radial-gradient(circle at 76% 32%, color-mix(in srgb, var(--theme-hot) 82%, white), transparent 32%), linear-gradient(135deg, var(--theme-pop), var(--theme-spark)); } .occasion-preview span { color: rgba(255, 255, 255, 0.78); font-size: 0.78rem; font-weight: 1000; text-transform: uppercase; } .occasion-preview strong { font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 0.9; } .memory-note, .memory-video { display: grid; align-content: end; gap: 0.45rem; padding: 1rem; color: white; } .memory-note { background: linear-gradient(135deg, var(--plum), var(--rose)); } .memory-video { background: linear-gradient(rgba(33, 25, 29, 0.18), rgba(33, 25, 29, 0.72)), linear-gradient(135deg, var(--mint), var(--marigold)); } .memory-video span { display: grid; width: 2.6rem; height: 2.6rem; place-items: center; border-radius: 50%; background: white; color: var(--ink); font-weight: 1000; } .memory-video p, .memory-note strong { margin: 0; } .floating-reaction { position: absolute; right: -0.4rem; bottom: 1.6rem; display: grid; gap: 0.25rem; width: min(16rem, 62%); border: 1px solid rgba(255, 255, 255, 0.74); border-radius: 18px; padding: 0.95rem; background: rgba(255, 255, 255, 0.78); box-shadow: 0 18px 48px rgba(33, 25, 29, 0.15); backdrop-filter: blur(16px); } .floating-reaction span { color: var(--muted); font-size: 0.86rem; line-height: 1.45; } .landing-band, .landing-split, .landing-reveal, .landing-final { width: min(100% - 2rem, 78rem); margin: 0 auto; padding: 5rem 0; } .landing-section-heading { display: grid; gap: 0.7rem; max-width: none; width: 100%; min-width: 0; margin-bottom: 1.3rem; } .landing-section-heading h2, .landing-split h2, .landing-reveal h2, .landing-final h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.4rem); line-height: 1.04; text-wrap: balance; } .studio-cta-layout { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem 2.5rem; align-items: center; } .studio-cta-copy { margin-bottom: 0; } .studio-cta-actions { display: grid; justify-items: end; gap: 0.85rem; min-width: min(100%, 15.5rem); } .studio-cta-button { padding: 0.95rem 1.65rem; font-size: 1.05rem; font-weight: 900; text-align: center; white-space: normal; } .landing-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; } .landing-steps article, .preserve-grid article, .keepsake-stack article { display: grid; gap: 0.7rem; border: 1px solid rgba(33, 25, 29, 0.1); border-radius: 8px; padding: 1rem; background: rgba(255, 255, 255, 0.7); } .landing-steps span { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: 8px; color: white; background: var(--plum); font-weight: 1000; } .landing-steps h3, .preserve-grid h3, .keepsake-stack p { margin: 0; } .landing-steps p, .preserve-grid p { margin: 0; color: var(--muted); line-height: 1.5; } .landing-split, .landing-reveal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.86fr); gap: 1.2rem; align-items: center; } .landing-split > div:first-child, .reveal-card { display: grid; gap: 1rem; } .format-grid, .occasion-cloud, .preserve-grid { display: flex; flex-wrap: wrap; gap: 0.55rem; } .format-grid span, .occasion-cloud span { border-radius: 999px; padding: 0.55rem 0.8rem; background: #241b21; color: white; font-size: 0.88rem; font-weight: 900; max-width: 100%; white-space: normal; text-align: center; } .keepsake-stack { display: grid; gap: 0.75rem; } .keepsake-stack article { background: #241b21; color: white; } .keepsake-stack article:nth-child(2) { transform: translateX(-1.8rem); background: linear-gradient(135deg, var(--rose), var(--marigold)); } .keepsake-stack article:nth-child(3) { transform: translateX(1rem); background: linear-gradient(135deg, var(--mint), var(--plum)); } .occasion-band { border-block: 1px solid rgba(33, 25, 29, 0.08); } .page-example-band { border-block: 1px solid color-mix(in srgb, var(--theme-pop) 14%, transparent); } .page-example-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; } .page-example-card, .celebration-type-grid article { overflow: hidden; border: 1px solid color-mix(in srgb, var(--theme-pop) 18%, white); border-radius: 8px; background: color-mix(in srgb, white 74%, var(--theme-bg-1)); box-shadow: 0 18px 44px color-mix(in srgb, var(--theme-pop) 10%, transparent); } .page-example-card { display: grid; grid-template-columns: minmax(8.5rem, 0.82fr) minmax(0, 1fr); min-height: 17rem; } .page-example-card img { width: 100%; height: 100%; min-height: 17rem; object-fit: cover; } .page-example-art { display: grid; align-content: end; gap: 0.55rem; min-height: 17rem; padding: 1rem; color: white; background: linear-gradient(180deg, rgba(36, 27, 33, 0.06), rgba(36, 27, 33, 0.8)), radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--theme-sun) 88%, white), transparent 30%), radial-gradient(circle at 76% 34%, color-mix(in srgb, var(--theme-hot) 78%, white), transparent 28%), linear-gradient(135deg, var(--theme-pop), var(--theme-spark)); } .anniversary-art { background: linear-gradient(180deg, rgba(18, 56, 47, 0.05), rgba(18, 56, 47, 0.82)), radial-gradient(circle at 22% 20%, color-mix(in srgb, var(--theme-sun) 86%, white), transparent 32%), radial-gradient(circle at 80% 34%, color-mix(in srgb, var(--theme-spark) 74%, white), transparent 30%), linear-gradient(135deg, #12382f, #43c59e); } .wall-art { background: linear-gradient(180deg, rgba(9, 36, 58, 0.04), rgba(9, 36, 58, 0.82)), radial-gradient(circle at 24% 20%, color-mix(in srgb, var(--theme-hot) 74%, white), transparent 30%), radial-gradient(circle at 76% 32%, color-mix(in srgb, var(--theme-pop) 76%, white), transparent 30%), linear-gradient(135deg, #09243a, #00b8d9); } .page-example-card .page-example-art span { width: fit-content; border-radius: 999px; padding: 0.42rem 0.6rem; color: #241b21; background: rgba(255, 255, 255, 0.82); font-size: 0.9rem; font-weight: 1000; } .page-example-art strong { font-size: clamp(2.2rem, 4.6vw, 4rem); line-height: 0.88; } .page-example-card > div:not(.page-example-art) { display: grid; align-content: end; gap: 0.65rem; padding: 1rem; } .page-example-card span, .celebration-type-grid span { color: var(--theme-pop); font-size: 0.74rem; font-weight: 1000; text-transform: uppercase; } .page-example-card h3 { margin: 0; font-size: clamp(1.35rem, 2.3vw, 2rem); line-height: 1.08; } .page-example-card p, .celebration-type-grid p { margin: 0; color: var(--theme-muted); line-height: 1.45; } .page-example-card a { width: fit-content; border-radius: 999px; padding: 0.48rem 0.72rem; color: white; background: var(--theme-deep); text-decoration: none; font-size: 0.84rem; font-weight: 950; } .celebration-type-grid { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0.75rem; } .celebration-type-grid article { display: grid; gap: 0.55rem; min-height: 9.5rem; padding: 1rem; } .landing-reveal { align-items: stretch; } .reveal-card { position: relative; isolation: isolate; border-radius: 8px; padding: 1.2rem; color: white; background: radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--theme-sun) 70%, transparent), transparent 28%), radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--theme-hot) 62%, transparent), transparent 30%), linear-gradient(135deg, var(--theme-deep), color-mix(in srgb, var(--theme-pop) 58%, var(--theme-deep))); min-height: 28rem; align-content: end; } .reveal-card h2 { margin: 0; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); } .reveal-card .eyebrow, .reveal-card p { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5); } .reveal-card .eyebrow { color: rgba(255, 255, 255, 0.8); } .preserve-grid { align-content: center; } .preserve-grid article { flex: 1 1 13rem; } .landing-final { display: grid; justify-items: center; gap: 1rem; text-align: center; } .landing-v2 { --theme-bg-1: #fff4f8; --theme-bg-2: #eef9ff; --theme-bg-3: #fff6d7; --theme-ink: #211827; --theme-muted: #685b72; --theme-hot: #ff4f8b; --theme-pop: #6c4dff; --theme-spark: #23d5ab; --theme-sun: #ffd166; --theme-deep: #241b21; color: var(--theme-ink); background: linear-gradient(120deg, color-mix(in srgb, var(--theme-bg-1) 92%, white), color-mix(in srgb, var(--theme-bg-2) 88%, white) 46%, color-mix(in srgb, var(--theme-bg-3) 92%, white)), var(--theme-bg-1); transition: background 420ms ease, color 420ms ease; } .landing-v2[data-theme="sunset"] { --theme-bg-1: #fff1dd; --theme-bg-2: #ffe2d6; --theme-bg-3: #fff7bd; --theme-hot: #ff7a45; --theme-pop: #9b5cff; --theme-spark: #ffcf4a; --theme-sun: #ffe66d; --theme-deep: #351b2f; } .landing-v2[data-theme="lagoon"] { --theme-bg-1: #e9fbff; --theme-bg-2: #e7fff4; --theme-bg-3: #f1f0ff; --theme-hot: #00b8d9; --theme-pop: #2f54eb; --theme-spark: #36e6a6; --theme-sun: #c8ff5f; --theme-deep: #09243a; } .landing-v2[data-theme="rose"] { --theme-bg-1: #fff0f4; --theme-bg-2: #fff8fb; --theme-bg-3: #f2ecff; --theme-hot: #ff5d73; --theme-pop: #7b2ff7; --theme-spark: #ffc2d1; --theme-sun: #ffe4a8; --theme-deep: #33182a; } .landing-v2[data-theme="midnight"] { --theme-bg-1: #121826; --theme-bg-2: #182141; --theme-bg-3: #24153f; --theme-ink: #fbfbff; --theme-muted: rgba(255, 255, 255, 0.72); --theme-hot: #8a5cff; --theme-pop: #00e0ff; --theme-spark: #ff4fd8; --theme-sun: #f7ff61; --theme-deep: #090d18; } .landing-v2[data-theme="garden"] { --theme-bg-1: #f2fff7; --theme-bg-2: #fff9d9; --theme-bg-3: #ffeef0; --theme-hot: #ff6b6b; --theme-pop: #247b7b; --theme-spark: #43c59e; --theme-sun: #ffe66d; --theme-deep: #12382f; } .landing-v2 .landing-nav { border-bottom-color: color-mix(in srgb, var(--theme-pop) 16%, transparent); background: color-mix(in srgb, var(--theme-bg-1) 74%, white 26%); } .landing-v2 .button.primary, .landing-v2 .landing-steps span { color: white; background: linear-gradient( 135deg, color-mix(in srgb, var(--theme-hot) 82%, #54112d), color-mix(in srgb, var(--theme-pop) 84%, #101a44) ); } .landing-v2 .button.primary { border-color: transparent; box-shadow: 0 16px 36px color-mix(in srgb, var(--theme-hot) 34%, transparent); } .landing-v2 .button:not(.primary) { border-color: color-mix(in srgb, var(--theme-ink) 18%, transparent); color: var(--theme-ink); background: color-mix(in srgb, white 84%, var(--theme-bg-2)); box-shadow: 0 12px 30px color-mix(in srgb, var(--theme-pop) 8%, transparent); } .landing-v2[data-theme="midnight"] .button:not(.primary) { border-color: rgba(255, 255, 255, 0.3); color: white; background: rgba(255, 255, 255, 0.13); } .landing-v2[data-theme="midnight"] .landing-nav { background: rgba(9, 13, 24, 0.88); } .landing-v2[data-theme="midnight"] .landing-kicker, .landing-v2[data-theme="midnight"] .landing-proof span, .landing-v2[data-theme="midnight"] .wishes-device, .landing-v2[data-theme="midnight"] .landing-steps article, .landing-v2[data-theme="midnight"] .preserve-grid article, .landing-v2[data-theme="midnight"] .floating-reaction, .landing-v2[data-theme="midnight"] .palette-button { border-color: rgba(255, 255, 255, 0.24); color: white; background: rgba(255, 255, 255, 0.11); } .landing-v2[data-theme="midnight"] .floating-reaction span { color: rgba(255, 255, 255, 0.74); } .landing-v2 .landing-nav nav a, .landing-v2 .landing-hero-copy > p:not(.landing-kicker):not(.landing-hero-tagline), .landing-v2 .landing-split p, .landing-v2 .landing-reveal p, .landing-v2 .landing-final p, .landing-v2 .landing-steps p, .landing-v2 .preserve-grid p, .landing-v2 .landing-section-heading p { color: var(--theme-muted); } .landing-v2 .landing-kicker, .landing-v2 .eyebrow { color: var(--theme-pop); } .landing-v2 .landing-hero { position: relative; isolation: isolate; padding-top: 4.2rem; } .landing-v2 .landing-hero::before, .landing-v2 .landing-hero::after { position: absolute; z-index: -1; width: 17rem; height: 17rem; border-radius: 32% 68% 48% 52%; content: ""; opacity: 0.34; filter: blur(2px); animation: morphBlob 12s ease-in-out infinite; } .landing-v2 .landing-hero::before { left: -6rem; top: 4rem; background: color-mix(in srgb, var(--theme-hot) 76%, white); } .landing-v2 .landing-hero::after { right: 6%; bottom: 1rem; background: color-mix(in srgb, var(--theme-spark) 76%, white); animation-delay: -4s; } .landing-v2 .landing-hero h1 { max-width: none; background: linear-gradient(110deg, var(--theme-ink), var(--theme-pop) 48%, var(--theme-hot)); background-clip: text; color: transparent; } .landing-v2 .landing-kicker, .landing-v2 .landing-proof span, .landing-v2 .wishes-device, .landing-v2 .landing-steps article, .landing-v2 .preserve-grid article { border-color: color-mix(in srgb, var(--theme-pop) 18%, white); background: color-mix(in srgb, white 72%, var(--theme-bg-1)); } .landing-v2 .landing-proof span { color: color-mix(in srgb, var(--theme-ink) 76%, var(--theme-pop)); } .motion-ribbon { position: absolute; z-index: 0; width: 72%; height: 4.6rem; border-radius: 999px; opacity: 0.86; filter: saturate(1.2); animation: driftRibbon 8s ease-in-out infinite; } .ribbon-one { top: 2.4rem; right: -1rem; background: linear-gradient(90deg, var(--theme-hot), var(--theme-sun), var(--theme-spark)); transform: rotate(-12deg); } .ribbon-two { left: -1rem; bottom: 5.8rem; background: linear-gradient(90deg, var(--theme-pop), var(--theme-hot), var(--theme-spark)); transform: rotate(13deg); animation-delay: -3s; } .spark-strip { position: absolute; top: 0.4rem; left: 2rem; z-index: 3; display: flex; gap: 0.55rem; transform: rotate(-10deg); } .spark-strip span { display: block; width: 0.7rem; height: 2.2rem; border-radius: 999px; background: var(--theme-sun); animation: sparkleStep 1.8s ease-in-out infinite; } .spark-strip span:nth-child(2) { background: var(--theme-hot); animation-delay: 0.16s; } .spark-strip span:nth-child(3) { background: var(--theme-spark); animation-delay: 0.32s; } .spark-strip span:nth-child(4) { background: var(--theme-pop); animation-delay: 0.48s; } .spark-strip span:nth-child(5) { background: var(--theme-sun); animation-delay: 0.64s; } .landing-v2 .wishes-device { z-index: 2; transform: rotate(1.4deg); animation: floatDevice 7s ease-in-out infinite; } .landing-v2 .wishes-device-top, .landing-v2 .wishes-device-bottom { background: var(--theme-deep); } .landing-v2 .memory-note { background: linear-gradient(135deg, var(--theme-pop), var(--theme-hot)); } .landing-v2 .memory-video { background: linear-gradient(rgba(33, 25, 29, 0.12), rgba(33, 25, 29, 0.7)), linear-gradient(135deg, var(--theme-spark), var(--theme-sun)); } .landing-v2 .wishes-collage img, .landing-v2 .occasion-preview, .landing-v2 .memory-note, .landing-v2 .memory-video { animation: cardBreathe 6s ease-in-out infinite; } .landing-v2 .wishes-collage img:nth-child(4) { animation-delay: -2s; } .landing-v2 .memory-note { animation-delay: -1s; } .landing-v2 .memory-video { animation-delay: -3s; } .landing-v2 .floating-reaction { border-color: color-mix(in srgb, var(--theme-spark) 28%, white); background: color-mix(in srgb, white 78%, var(--theme-bg-2)); animation: floatSticker 5.5s ease-in-out infinite; } .reaction-two { left: -1.2rem; right: auto; bottom: 8.4rem; width: min(15rem, 60%); animation-delay: -2.5s; } .landing-steps-three { grid-template-columns: repeat(3, minmax(0, 1fr)); } .landing-v2 .landing-steps article { position: relative; overflow: hidden; min-height: 15.5rem; transform: translateY(0); transition: transform 220ms ease, box-shadow 220ms ease; } .landing-v2 .landing-steps article:hover { transform: translateY(-0.35rem) rotate(-0.5deg); box-shadow: 0 24px 60px color-mix(in srgb, var(--theme-pop) 18%, transparent); } .landing-v2 .landing-steps article::after { position: absolute; right: -2rem; bottom: -2rem; width: 8rem; height: 8rem; border-radius: 28% 72% 70% 30%; background: color-mix(in srgb, var(--theme-spark) 54%, transparent); content: ""; animation: morphBlob 10s ease-in-out infinite; } .sensory-section { position: relative; } .kinetic-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; min-height: 28rem; } .memory-tile { position: relative; display: grid; align-content: end; overflow: hidden; border: 1px solid color-mix(in srgb, var(--theme-pop) 18%, white); border-radius: 8px; padding: 1rem; min-height: 12rem; color: white; background: var(--theme-deep); box-shadow: 0 22px 52px color-mix(in srgb, var(--theme-deep) 14%, transparent); animation: galleryFloat 7s ease-in-out infinite; } .memory-tile:nth-child(2) { animation-delay: -1.7s; } .memory-tile:nth-child(3) { animation-delay: -3.2s; } .memory-tile:nth-child(4) { animation-delay: -4.6s; } .memory-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .memory-tile img + * { position: relative; } .text-tile { background: linear-gradient(135deg, var(--theme-hot), var(--theme-pop)); } .audio-tile { background: linear-gradient(135deg, var(--theme-spark), var(--theme-pop)); } .video-tile { background: linear-gradient(135deg, var(--theme-sun), var(--theme-hot)); } .memory-tile span { font-size: 0.78rem; font-weight: 1000; text-transform: uppercase; } .memory-tile p { margin: 0; color: white; font-size: 1.1rem; font-weight: 900; } .waveform { display: flex; align-items: end; gap: 0.26rem; height: 4rem; } .waveform i { display: block; width: 0.48rem; height: 38%; border-radius: 999px; background: white; animation: wavePulse 1s ease-in-out infinite; } .waveform i:nth-child(2) { height: 72%; animation-delay: 0.1s; } .waveform i:nth-child(3) { height: 48%; animation-delay: 0.2s; } .waveform i:nth-child(4) { height: 88%; animation-delay: 0.3s; } .waveform i:nth-child(5) { height: 56%; animation-delay: 0.4s; } .theme-lab { width: min(100% - 2rem, 78rem); margin: 0 auto; border-block: 1px solid color-mix(in srgb, var(--theme-pop) 16%, transparent); padding: 5rem 0; } .palette-switcher { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } .palette-button { display: grid; grid-template-columns: repeat(3, 1.25rem) minmax(0, 1fr); align-items: center; gap: 0.45rem; border: 1px solid color-mix(in srgb, var(--theme-pop) 18%, white); border-radius: 8px; padding: 0.85rem; background: color-mix(in srgb, white 78%, var(--theme-bg-1)); color: var(--theme-ink); font-weight: 1000; cursor: pointer; box-shadow: 0 14px 36px color-mix(in srgb, var(--theme-pop) 8%, transparent); } .palette-button span { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--swatch); } .palette-button.active { outline: 3px solid color-mix(in srgb, var(--theme-hot) 34%, transparent); transform: translateY(-0.1rem); } .landing-v2 .occasion-cloud span { color: white; background: linear-gradient( 135deg, color-mix(in srgb, var(--theme-deep) 86%, var(--theme-pop)), color-mix(in srgb, var(--theme-pop) 76%, #101a44) ); animation: occasionBob 4.2s ease-in-out infinite; } .landing-v2 .occasion-cloud span:nth-child(2n) { color: #241b21; background: linear-gradient( 135deg, color-mix(in srgb, var(--theme-sun) 82%, white), color-mix(in srgb, var(--theme-hot) 34%, white) ); animation-delay: -1.4s; } .landing-v2 .occasion-cloud span:nth-child(3n) { color: white; background: linear-gradient( 135deg, color-mix(in srgb, var(--theme-spark) 68%, #251232), color-mix(in srgb, var(--theme-pop) 74%, #101a44) ); animation-delay: -2.8s; } .landing-v2 .reveal-card { background: radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--theme-sun) 70%, transparent), transparent 28%), radial-gradient(circle at 78% 20%, color-mix(in srgb, var(--theme-hot) 62%, transparent), transparent 30%), linear-gradient(135deg, var(--theme-deep), color-mix(in srgb, var(--theme-pop) 58%, var(--theme-deep))); box-shadow: 0 26px 70px color-mix(in srgb, var(--theme-hot) 22%, transparent); } .landing-v2 .reveal-card .eyebrow, .landing-v2 .reveal-card h2, .landing-v2 .reveal-card p { color: rgba(255, 255, 255, 0.94); text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55); } .landing-v2 .reveal-card .eyebrow { color: rgba(255, 255, 255, 0.82); } .landing-v2 .preserve-grid article { transition: transform 220ms ease, box-shadow 220ms ease; } .landing-v2 .preserve-grid article:hover { transform: rotate(1deg) translateY(-0.24rem); box-shadow: 0 20px 48px color-mix(in srgb, var(--theme-spark) 18%, transparent); } .landing-v2 .page-example-card, .landing-v2 .celebration-type-grid article { transition: transform 220ms ease, box-shadow 220ms ease; } .landing-v2 .page-example-card:hover, .landing-v2 .celebration-type-grid article:hover { transform: translateY(-0.25rem); box-shadow: 0 24px 58px color-mix(in srgb, var(--theme-hot) 16%, transparent); } @keyframes morphBlob { 0%, 100% { border-radius: 32% 68% 48% 52%; transform: rotate(0deg) scale(1); } 50% { border-radius: 64% 36% 34% 66%; transform: rotate(12deg) scale(1.06); } } @keyframes driftRibbon { 0%, 100% { translate: 0 0; } 50% { translate: 0.8rem -0.7rem; } } @keyframes sparkleStep { 0%, 100% { transform: scaleY(0.55); opacity: 0.55; } 50% { transform: scaleY(1); opacity: 1; } } @keyframes floatDevice { 0%, 100% { transform: rotate(1.4deg) translateY(0); } 50% { transform: rotate(-0.8deg) translateY(-0.75rem); } } @keyframes cardBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.025); } } @keyframes floatSticker { 0%, 100% { transform: rotate(-1deg) translateY(0); } 50% { transform: rotate(1.4deg) translateY(-0.65rem); } } @keyframes galleryFloat { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-0.65rem) rotate(1.2deg); } } @keyframes wavePulse { 0%, 100% { transform: scaleY(0.55); } 50% { transform: scaleY(1.08); } } @keyframes occasionBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-0.32rem); } } @media (prefers-reduced-motion: reduce) { .landing-v2 *, .landing-v2 *::before, .landing-v2 *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } } @media (max-width: 820px) { .hero-content { padding: 7rem 0 6rem; } .upload-layout, .path-fields { grid-template-columns: 1fr; } .wishes-band { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wish { min-height: 0; padding: 0.85rem 0.5rem 1rem; text-align: center; } .wish span { font-size: clamp(1.35rem, 6.2vw, 2.2rem); } .wish p { margin: 0.35rem 0 0; font-size: 0.68rem; line-height: 1.25; } .dashboard-v2 .dashboard-auth, .dashboard-gate, .dashboard-product-grid, .studio-onboarding { grid-template-columns: 1fr; } .onboarding-steps { grid-template-columns: 1fr; } .auth-story { min-height: auto; } .auth-story h1 { max-width: none; font-size: clamp(2.4rem, 10vw, 4rem); } .studio-banner { align-items: stretch; flex-direction: column; min-height: auto; } .studio-banner h1 { font-size: 3.4rem; } .dashboard-gate h1 { max-width: none; font-size: clamp(2.2rem, 9vw, 3.6rem); } .media-card, .media-card.is-portrait, .media-card.is-square, .media-card.is-landscape, .media-card.is-wide, .media-card.is-audio, body[data-layout="scrapbook"] .media-card.is-landscape { grid-column: span 12; } .invite-body .invite-showcase .media-card, .invite-body .invite-showcase .media-card.is-portrait, .invite-body .invite-showcase .media-card.is-square, .invite-body .invite-showcase .media-card.is-landscape, .invite-body .invite-showcase .media-card.is-wide, .invite-body .invite-showcase .media-card.is-audio { grid-column: auto; } .media-reactions { flex-wrap: nowrap; justify-content: flex-end; gap: 0.2rem; padding: 0.3rem 0.4rem 0.1rem; } .media-reaction-button { gap: 0.12rem; min-height: 1.55rem; padding: 0.12rem 0.32rem; font-size: 0.62rem; } .media-reaction-emoji { font-size: 0.78rem; } .hero-tile .media-reactions { right: 0.3rem; bottom: 0.3rem; max-width: calc(100% - 0.6rem); } .dashboard-body, .dashboard-body .dashboard-shell, .dashboard-body .dashboard-app, .dashboard-body .dashboard-product-grid, .dashboard-body .dashboard-workspace, .dashboard-body .dashboard-sidebar { overflow: visible; height: auto; max-height: none; } #mobilePreviewPanel, .studio-preview-panel, .studio-preview-row { display: none !important; } } @media (max-width: 520px) { .hero { min-height: 92svh; } .media-reactions { gap: 0.14rem; padding: 0.24rem 0.32rem 0.08rem; } .media-reaction-button { min-height: 1.4rem; padding: 0.08rem 0.24rem; font-size: 0.58rem; } .media-reaction-emoji { font-size: 0.72rem; } .admin-lock { left: calc(0.4rem + env(safe-area-inset-left, 0px)); bottom: calc(0.4rem + env(safe-area-inset-bottom, 0px)); } .celebration-brand .brand-mark { width: 1rem; height: 1rem; } .hero-actions, .landing-nav-actions, .landing-hero-actions, .workspace-group-actions, .workspace-bottom-actions, .dashboard-actions, .create-page-actions, .upload-login-actions, .face-pick-actions, .face-reference-actions, .saved-face-actions, .recording-actions, .media-source-actions, .analytics-toolbar-actions { justify-content: center; } .hero-actions { display: grid; max-width: none; } .landing-final .landing-hero-actions { width: 100%; justify-content: center; } .create-page-actions .button.wide, .add-invitee-form button, .dashboard-edit-grid > .button, .dashboard-panel > form > .button:not(.wide), .onboarding-step-action, .reveal-card > .button, .music-follow-page-share { width: 100%; margin-left: 0; justify-self: center; } .button { width: 100%; } .media-source-button, .media-rotate-button, .media-rotate-pair { width: auto; } .dashboard-media-actions, .admin-actions { max-width: none; } .music-controls { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; max-width: none; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.42rem; padding: 0.35rem 0.5rem; border-radius: 999px; } .music-volume { min-width: 0; } .music-volume input { width: 3rem; min-width: 2.5rem; } .spotify-player { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; } body.has-spotify-player .music-controls:not([hidden]) { bottom: 11.15rem; } body.has-spotify-player .site-footer { padding-bottom: calc(12.5rem + env(safe-area-inset-bottom, 0px)); } body.has-spotify-player:has(.spotify-player.is-compact) .site-footer { padding-bottom: calc(7.5rem + env(safe-area-inset-bottom, 0px)); } .hero-status { left: 1rem; right: 1rem; border-radius: 8px; } .section { width: min(100% - 1rem, 72rem); padding: 4rem 0; } .media-grid { gap: 0.65rem; } .upload-box, .upload-results { padding: 0.75rem; } .dashboard-shell { width: min(100% - 1rem, 84rem); } .dashboard-topbar, .dashboard-panel-head { align-items: stretch; flex-direction: column; } .dashboard-auth, .dashboard-app, .dashboard-gate, .dashboard-product-grid, .dashboard-edit-grid, .settings-grid, .upload-choice-grid, .create-content-grid, .dashboard-upload, .music-follow-link-fields { grid-template-columns: 1fr; } .dashboard-actions, .profile-inline { width: 100%; } .profile-inline { border-radius: 8px; } .profile-copy { flex: 1; } .dashboard-v2 .dashboard-topbar { position: static; } .dashboard-topnav { justify-content: flex-start; overflow-x: auto; } .auth-story, .studio-banner { border-radius: 10px; } .auth-story h1, .studio-banner h1 { max-width: none; font-size: 2.9rem; } .auth-preview { grid-template-columns: 1fr; } .dashboard-gate { border-radius: 10px; } .dashboard-gate h1 { max-width: none; font-size: 2.8rem; } .starter-copy-head { align-items: stretch; flex-direction: column; } .dashboard-media-row { grid-template-columns: 2.75rem 4.5rem minmax(0, 1fr); } .dashboard-media-row > .dashboard-media-actions { grid-column: 2 / -1; } .dashboard-media-selection { align-items: stretch; flex-direction: column; } .dashboard-media-selection-actions { margin-left: 0; } .dashboard-media-selection-actions .button { width: 100%; } .workspace-group-head, .workspace-group-actions, .workspace-bottom-actions, .invite-link-field { align-items: stretch; flex-direction: column; } .workspace-group-actions .button, .workspace-bottom-actions .button, .invite-link-field .button { width: 100%; } .event-time-row { gap: 0.45rem 0.55rem; } .event-time-row .config-field { font-size: 0.72rem; } .event-time-row input[type="date"], .event-time-row input[type="time"], .add-invitee-form input[type="date"], .add-invitee-form input[type="time"] { width: auto; max-width: 100%; min-height: 2.75rem; padding-inline: 0.55rem; font-size: 1rem; } .event-time-row input[type="date"] { width: 10.5rem; } .event-time-row input[type="time"], .add-invitee-form input[type="time"] { width: 7rem; } .landing-nav { grid-template-columns: 1fr; position: static; } .landing-nav-compact { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 0.65rem 0.9rem; } .landing-brand { flex: 0 0 auto; } .landing-nav nav { justify-content: flex-start; overflow-x: auto; padding-bottom: 0.1rem; } .landing-nav-compact .landing-top-links { justify-content: flex-end; overflow-x: visible; padding-bottom: 0; min-width: 0; } .landing-nav-actions, .landing-hero-actions { display: grid; grid-template-columns: 1fr; } .landing-hero, .landing-split, .landing-reveal { grid-template-columns: 1fr; } .landing-hero { width: min(100% - 1rem, 78rem); min-height: auto; padding-top: 2rem; } .landing-hero h1 { max-width: none; font-size: clamp(2.35rem, 12vw, 3.35rem); } .studio-cta-layout { grid-template-columns: 1fr; align-items: stretch; } .studio-cta-actions { width: 100%; min-width: 0; grid-template-columns: 1fr 1fr; } .studio-cta-button { width: 100%; padding: 1rem 1.1rem; font-size: 1rem; } .landing-section-heading h2, .landing-split h2, .landing-reveal h2, .landing-final h2 { font-size: clamp(1.9rem, 8vw, 3rem); } .landing-visual { min-height: auto; } .wishes-collage { grid-auto-rows: 8.2rem; } .floating-reaction { position: static; width: auto; margin-top: 0.75rem; } .landing-band, .landing-split, .landing-reveal, .landing-final { width: min(100% - 1rem, 78rem); padding: 3.4rem 0; } .landing-steps { grid-template-columns: 1fr; } .landing-steps-three, .palette-switcher, .kinetic-gallery, .page-example-layout, .celebration-type-grid { grid-template-columns: 1fr; } .page-example-card { grid-template-columns: 1fr; min-height: 0; } .page-example-card img { aspect-ratio: 16 / 10; min-height: 0; } .page-example-art { aspect-ratio: 16 / 10; min-height: 0; } .celebration-type-grid { grid-column: auto; } .theme-lab { width: min(100% - 1rem, 78rem); padding: 3.4rem 0; } .reaction-two { position: static; width: auto; margin-top: 0.75rem; } .motion-ribbon { width: 92%; height: 3.4rem; } .ribbon-one { top: 6rem; } .ribbon-two { bottom: 10rem; } .spark-strip { left: 1rem; } .landing-v2 .landing-steps article { min-height: 13rem; } .kinetic-gallery { min-height: auto; } .keepsake-stack article:nth-child(2), .keepsake-stack article:nth-child(3) { transform: none; } .reveal-card { min-height: 24rem; } } @media (max-width: 360px) { .auth-story h1, .studio-banner h1, .dashboard-gate h1 { font-size: 2.45rem; } .studio-cta-actions { grid-template-columns: 1fr; } .music-controls { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.32rem; padding: 0.3rem 0.38rem; } .spotify-player { left: 0.5rem; right: 0.5rem; bottom: 0.5rem; } body.has-spotify-player .music-controls:not([hidden]) { bottom: 10.9rem; } body.has-spotify-player .site-footer { padding-bottom: calc(12.25rem + env(safe-area-inset-bottom, 0px)); } body.has-spotify-player:has(.spotify-player.is-compact) .site-footer { padding-bottom: calc(7.25rem + env(safe-area-inset-bottom, 0px)); } .music-volume span { display: none; } .music-volume input { width: 2.4rem; min-width: 2.1rem; } } /* —— Artists music-launch landing (/artists) —— */ .artists-body { --artists-ink: #0b1f33; --artists-muted: #4a6070; --artists-teal: #0f9d8a; --artists-coral: #ff5a3c; --artists-sand: #f3eee4; --artists-mist: #dff3ee; --artists-deep: #072031; --artists-line: rgba(11, 31, 51, 0.12); --artists-display: "Syne", ui-sans-serif, system-ui, sans-serif; --artists-sans: "Figtree", ui-sans-serif, system-ui, sans-serif; color: var(--artists-ink); background: radial-gradient(ellipse 70% 50% at 78% 8%, rgba(15, 157, 138, 0.22), transparent 55%), radial-gradient(ellipse 55% 42% at 12% 18%, rgba(255, 90, 60, 0.14), transparent 50%), linear-gradient(165deg, var(--artists-sand) 0%, #f7f4ed 38%, var(--artists-mist) 100%); font-family: var(--artists-sans); } .artists-body .button { border-radius: 10px; font-weight: 700; } .artists-body .button.primary { background: linear-gradient(135deg, var(--artists-teal), #0b7f72 55%, #0a6b7a); border-color: transparent; color: #f7fffc; } .artists-body .button:not(.primary) { background: rgba(255, 255, 255, 0.72); border-color: var(--artists-line); color: var(--artists-ink); } .artists-nav { position: sticky; top: 0; z-index: 40; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 0.7rem max(1rem, calc((100vw - 72rem) / 2)); border-bottom: 1px solid var(--artists-line); background: rgba(243, 238, 228, 0.86); backdrop-filter: blur(16px); } .artists-nav-brand { display: inline-flex; align-items: center; gap: 0.45rem; text-decoration: none; color: var(--artists-ink); font-family: var(--artists-display); font-size: 1.05rem; font-weight: 800; } .artists-nav-brand .brand-mark { width: 1.75rem; height: 1.75rem; border-radius: 7px; } .artists-nav nav { display: flex; justify-content: center; gap: 1.1rem; } .artists-nav nav a { color: var(--artists-muted); text-decoration: none; font-size: 0.92rem; font-weight: 650; } .artists-nav-actions { display: flex; align-items: center; gap: 0.55rem; } .artists-hero { position: relative; isolation: isolate; display: grid; align-items: end; min-height: calc(100svh - 3.6rem); width: 100%; padding: clamp(3.5rem, 10vw, 7rem) max(1rem, calc((100vw - 72rem) / 2)) clamp(3rem, 8vw, 5rem); overflow: clip; } .artists-hero-plane { position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, rgba(7, 32, 49, 0.88) 0%, rgba(7, 32, 49, 0.55) 42%, rgba(15, 157, 138, 0.35) 100%), radial-gradient(circle at 72% 40%, rgba(255, 90, 60, 0.35), transparent 42%), linear-gradient(180deg, #0b1f33, #0a4a4a); } .artists-stage-glow { position: absolute; inset: 18% 8% auto; height: 55%; background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18), transparent 68%); filter: blur(8px); animation: artistsGlow 7s ease-in-out infinite alternate; } .artists-vinyl { position: absolute; right: max(4%, calc((100vw - 72rem) / 2)); top: 52%; width: min(42vw, 22rem); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #f3eee4 0 14%, #1a1a1a 15% 18%, #0b1f33 19% 34%, #222 35% 38%, #0b1f33 39% 54%, #1f1f1f 55% 58%, #0b1f33 59% 100%); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 30px 80px rgba(0, 0, 0, 0.35); animation: artistsSpin 28s linear infinite; } .artists-vinyl-label { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: var(--artists-deep); font-family: var(--artists-display); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; } .artists-wave { position: absolute; left: max(1rem, calc((100vw - 72rem) / 2)); bottom: 12%; display: flex; align-items: flex-end; gap: 0.35rem; height: 4.5rem; width: min(42%, 18rem); } .artists-wave i { display: block; flex: 1; height: 40%; border-radius: 999px 999px 4px 4px; background: linear-gradient(180deg, #ff8f78, var(--artists-coral)); opacity: 0.85; } .artists-beam { position: absolute; width: 38%; height: 2px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent); opacity: 0.55; animation: artistsBeam 5.5s ease-in-out infinite; } .artists-beam-a { top: 28%; right: 8%; rotate: -18deg; } .artists-beam-b { top: 64%; right: 18%; rotate: 12deg; animation-delay: -2.2s; } .artists-hero-copy { position: relative; z-index: 1; display: grid; gap: 1rem; max-width: min(36rem, 100%); color: #f7f4ed; } .artists-brand { margin: 0; font-family: var(--artists-display); font-size: clamp(3.4rem, 11vw, 6.4rem); font-weight: 800; line-height: 0.92; letter-spacing: -0.04em; } .artists-hero h1 { margin: 0; max-width: 18ch; font-family: var(--artists-display); font-size: clamp(1.55rem, 3.4vw, 2.35rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; } .artists-hero-lede { margin: 0; max-width: 34rem; color: rgba(247, 244, 237, 0.82); font-size: 1.08rem; line-height: 1.55; } .artists-hero-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; justify-content: flex-end; margin-top: 0.35rem; } .artists-hero .button:not(.primary) { background: rgba(247, 244, 237, 0.12); border-color: rgba(247, 244, 237, 0.28); color: #f7f4ed; } .artists-band { width: min(100% - 2rem, 72rem); margin: 0 auto; padding: clamp(3.5rem, 8vw, 5.5rem) 0; } .artists-section-heading { display: grid; gap: 0.85rem; width: 100%; max-width: none; margin-bottom: 2rem; } .artists-eyebrow { margin: 0; color: var(--artists-teal); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .artists-section-heading h2, .artists-final h2 { margin: 0; font-family: var(--artists-display); font-size: clamp(1.85rem, 3.6vw, 2.85rem); font-weight: 750; line-height: 1.12; letter-spacing: -0.025em; } .artists-section-heading p, .artists-final > p:not(.artists-eyebrow) { margin: 0; color: var(--artists-muted); font-size: 1.05rem; line-height: 1.6; } .artists-promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .artists-promise-list li, .artists-beyond-grid article, .artists-launch-points article, .artists-steps li { display: grid; gap: 0.35rem; padding: 1.15rem 0; border-top: 1px solid var(--artists-line); } .artists-promise-list strong, .artists-beyond-grid h3, .artists-launch-points h3, .artists-steps h3 { margin: 0; font-family: var(--artists-display); font-size: 1.2rem; font-weight: 700; } .artists-promise-list span, .artists-beyond-grid p, .artists-launch-points p, .artists-steps p { margin: 0; color: var(--artists-muted); line-height: 1.55; } .artists-launch-stage { display: grid; grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr); gap: 2rem; align-items: start; } .artists-follow-preview { display: grid; gap: 0.75rem; justify-items: center; text-align: center; padding: 1.35rem 1.1rem 1.2rem; border: 1px solid var(--artists-line); border-radius: 22px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 18px 50px rgba(11, 31, 51, 0.1); } .artists-follow-cover { width: 7.5rem; height: 7.5rem; border-radius: 14px; display: grid; place-items: center; color: rgba(247, 244, 237, 0.85); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; background: linear-gradient(145deg, rgba(15, 157, 138, 0.92), rgba(255, 90, 60, 0.78)), #0b1f33; } .artists-follow-preview h3 { margin: 0; font-family: var(--artists-display); font-size: 1.35rem; } .artists-follow-preview > p { margin: 0; color: var(--artists-muted); font-size: 0.92rem; } .artists-follow-email { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.4rem; width: 100%; align-items: center; } .artists-follow-email span, .artists-follow-email strong, .artists-follow-row, .artists-follow-share-page { border-radius: 10px; padding: 0.65rem 0.75rem; font-size: 0.86rem; font-weight: 700; } .artists-follow-email span { border: 1px solid var(--artists-line); color: var(--artists-muted); text-align: left; } .artists-follow-email strong { background: var(--artists-ink); color: #f7f4ed; } .artists-follow-rows { display: grid; gap: 0.4rem; width: 100%; } .artists-follow-row { display: flex; justify-content: space-between; align-items: center; color: #fff; } .artists-follow-row.spotify { background: #1db954; color: #04130a; } .artists-follow-row.apple { background: #fc3c44; } .artists-follow-row.youtube { background: #e11d2e; } .artists-follow-row.tidal { background: #111; } .artists-follow-row em { font-style: normal; opacity: 0.75; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .artists-follow-group { margin: 0.2rem 0 0; color: var(--artists-muted); font-size: 0.78rem; font-weight: 700; } .artists-follow-share-page { width: 100%; border: 1px solid var(--artists-line); background: rgba(15, 157, 138, 0.08); color: var(--artists-ink); } .artists-launch-points { display: grid; gap: 0.25rem; } .artists-beyond-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; } .artists-beyond-grid article:last-child:nth-child(odd) { grid-column: 1 / -1; } .artists-sample-phone { width: min(100%, 28rem); margin: 0 auto 1.5rem; border-radius: 1.4rem; overflow: hidden; border: 1px solid rgba(20, 36, 40, 0.16); background: #101820; aspect-ratio: 9 / 19; box-shadow: 0 24px 50px rgba(16, 24, 32, 0.18); } .artists-sample-phone iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; } .artists-cutout-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; } .artists-cutout { display: grid; gap: 0.45rem; color: inherit; text-decoration: none; } .artists-cutout > span { font-size: 0.82rem; font-weight: 700; } .artists-cutout-frame { display: grid; gap: 0.25rem; align-content: end; min-height: 8.5rem; padding: 0.85rem; border-radius: 14px; color: #fff8f2; overflow: hidden; box-shadow: 0 14px 30px rgba(16, 24, 32, 0.12); transition: transform 0.2s ease; } .artists-cutout:hover .artists-cutout-frame, .artists-cutout:focus-visible .artists-cutout-frame { transform: translateY(-2px); } .artists-cutout-kicker { font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.82; } .artists-cutout-frame strong { font-family: var(--artists-display); font-size: 1.05rem; line-height: 1.15; } .artists-cutout-frame em { font-style: normal; font-size: 0.78rem; opacity: 0.85; } .artists-cutout-follow { background: linear-gradient(160deg, #54285f, #e94d78 70%); } .artists-cutout-countdown { background: linear-gradient(160deg, #1f6f8b, #36e6a6 75%); } .artists-cutout-release { background: linear-gradient(160deg, rgba(18, 8, 14, 0.35), rgba(18, 8, 14, 0.1)), repeating-linear-gradient(90deg, #8b1e3f 0 12px, #c43b5c 12px 20px, #7a1835 20px 30px); } .artists-cutout-social { background: linear-gradient(160deg, #2f1636, #7b2ff7 70%); } .artists-cutout-rsvp { background: linear-gradient(160deg, #247b7b, #ffe66d 85%); color: #142428; } .artists-cutout-upload { background: linear-gradient(160deg, #ff7a45, #9b5cff 70%); } .artists-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } .artists-steps li { border-top: none; padding: 0; gap: 0.55rem; } .artists-steps span { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 8px; background: var(--artists-ink); color: #f7f4ed; font-family: var(--artists-display); font-weight: 800; } .artists-final { width: min(100% - 2rem, 44rem); margin: 0 auto 4rem; padding: 2.5rem 0 1rem; text-align: center; display: grid; gap: 0.9rem; justify-items: center; } .artists-final .artists-hero-actions { justify-content: center; } .artists-footer { border-top: 1px solid var(--artists-line); } .artists-footer a { color: var(--artists-muted); } .artists-body code { font-size: 0.92em; padding: 0.08em 0.28em; border-radius: 5px; background: rgba(11, 31, 51, 0.06); } .artists-reveal { opacity: 0; transform: translateY(14px); transition: opacity 520ms ease, transform 520ms ease; } .artists-reveal.is-visible { opacity: 1; transform: none; } @keyframes artistsSpin { to { rotate: 360deg; } } @keyframes artistsGlow { from { opacity: 0.55; transform: scale(0.96); } to { opacity: 1; transform: scale(1.04); } } @keyframes artistsBeam { 0%, 100% { opacity: 0.25; transform: translateX(0); } 50% { opacity: 0.7; transform: translateX(-1.5rem); } } @media (max-width: 900px) { .artists-nav { grid-template-columns: auto auto; } .artists-nav nav { display: none; } .artists-launch-stage, .artists-beyond-grid, .artists-cutout-grid, .artists-steps { grid-template-columns: 1fr; } .artists-vinyl { width: min(48vw, 14rem); top: 34%; opacity: 0.9; } .artists-wave { width: min(55%, 12rem); bottom: 8%; } } @media (max-width: 640px) { .artists-nav-actions .button:not(.primary) { display: none; } .artists-hero { min-height: calc(100svh - 3.4rem); align-items: center; padding-top: 4.5rem; padding-bottom: 3rem; } .artists-vinyl { top: 22%; right: -6%; width: 11rem; opacity: 0.55; } .artists-wave { left: 1rem; bottom: auto; top: 18%; height: 3rem; width: 8.5rem; opacity: 0.7; } .artists-hero-actions { justify-content: center; width: 100%; } .artists-hero-actions .button { flex: 1 1 100%; text-align: center; } .artists-follow-preview { max-width: 22rem; margin: 0 auto; } } @media (prefers-reduced-motion: reduce) { .artists-vinyl, .artists-stage-glow, .artists-beam, .artists-reveal { animation: none; transition: none; } .artists-reveal { opacity: 1; transform: none; } } /* Crop controls remain in document flow so Curate stays scrollable on phones. */ .media-transform-editor { min-width: 0; margin: 1rem 0; padding: 1rem; border: 1px solid #ccc; border-radius: 12px; } .media-transform-editor p { font-size: 0.875rem; } .media-transform-preview { position: relative; background: #222; overflow: hidden; border-radius: 8px; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .media-transform-preview.is-cropping { touch-action: none; } .media-transform-surface { width: 100%; pointer-events: none; } .media-transform-surface img, .media-transform-surface video { display: block; width: 100%; height: auto; transform-origin: center center; pointer-events: none; -webkit-user-drag: none; } .media-transform-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .media-transform-frame { position: absolute; inset: 0; border: 2px dashed rgba(255, 255, 255, 0.92); box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45); border-radius: 2px; pointer-events: none; } .media-transform-frame[data-active-edge="left"], .media-transform-frame[data-active-edge="right"], .media-transform-frame[data-active-edge="top"], .media-transform-frame[data-active-edge="bottom"] { border-color: #ff8fb0; } .media-transform-edge { position: absolute; z-index: 3; margin: 0; padding: 0; border: 0; background: transparent; pointer-events: auto; touch-action: none; appearance: none; -webkit-appearance: none; } .media-transform-edge[data-edge="left"], .media-transform-edge[data-edge="right"] { top: 12px; bottom: 12px; width: 44px; cursor: ew-resize; } .media-transform-edge[data-edge="left"] { left: 0; } .media-transform-edge[data-edge="right"] { right: 0; } .media-transform-edge[data-edge="top"], .media-transform-edge[data-edge="bottom"] { left: 12px; right: 12px; height: 44px; cursor: ns-resize; } .media-transform-edge[data-edge="top"] { top: 0; } .media-transform-edge[data-edge="bottom"] { bottom: 0; } .media-transform-edge:focus-visible { outline: none; } .media-transform-edge:focus-visible .media-transform-handle, .media-transform-edge.is-dragging .media-transform-handle { transform: scale(1.15); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.85), 0 2px 8px rgba(0, 0, 0, 0.35); } .media-transform-handle { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.95); border-radius: 999px; background: rgba(233, 77, 120, 0.95); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); transform: translate(-50%, -50%); pointer-events: none; } .media-transform-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 0.85rem 0 0.35rem; } .media-transform-mirror-button { display: inline-grid; place-items: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); cursor: pointer; touch-action: manipulation; } .media-transform-mirror-button svg { width: 1.35rem; height: 1.35rem; } .media-transform-mirror-button.is-active, .media-transform-mirror-button[aria-pressed="true"] { border-color: rgba(233, 77, 120, 0.45); background: rgba(233, 77, 120, 0.12); color: #b8325d; } .media-transform-readout { margin: 0; color: var(--muted); font-size: 0.78rem; font-weight: 700; } .media-transform-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .media-transform-actions button { min-height: 44px; } @media (max-width: 480px) { .media-transform-toolbar { align-items: stretch; } .media-transform-readout { width: 100%; } .media-transform-edge[data-edge="left"], .media-transform-edge[data-edge="right"] { width: 48px; } .media-transform-edge[data-edge="top"], .media-transform-edge[data-edge="bottom"] { height: 48px; } } /* Shared artist identity and per-page link choices. */ .artist-page-heading { padding: 18px 20px; } .artist-page-brand { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: inherit; text-decoration: none; } .artist-music-mark { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #dbf8eb; color: #145c4b; font-size: 28px; } .artist-footer-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #241b21; text-decoration: none; font-size: 1rem; font-weight: 700; } .artist-profile-choices { display: grid; gap: 16px; margin-bottom: 16px; } .artist-profile-choices fieldset { min-width: 0; margin: 0; padding: 12px; border: 1px solid #d9d1c7; border-radius: 12px; } .artist-profile-choice { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px 0; cursor: pointer; } .artist-profile-choice input { flex: 0 0 20px; width: 20px; height: 20px; } .artist-profile-choice span { min-width: 0; } .artist-profile-choice strong, .artist-profile-choice small { display: block; overflow-wrap: anywhere; } .artist-profile-choice small { margin-top: 4px; opacity: .75; } .artist-wish-link-list { display: flex; flex-wrap: wrap; gap: 12px; } .artist-wish-link-list .button { min-height: 44px; overflow-wrap: anywhere; } @media (max-width: 820px) { .invite-body .artist-page-heading { padding: calc(0.35rem + env(safe-area-inset-top, 0px)) 1rem 0; } .invite-body:has(.artist-page-heading) .invite-main { padding-top: 0; } .invite-body .music-follow-section, .invite-body .countdown-section { padding-top: 0.4rem; } body:not(.invite-body):has(.artist-page-heading) { position: relative; } body:not(.invite-body) .artist-page-heading { position: absolute; top: 0; left: 0; z-index: 6; width: max-content; max-width: calc(100% - 1rem); padding: calc(0.55rem + env(safe-area-inset-top, 0px)) 0.75rem 0; pointer-events: none; } body:not(.invite-body) .artist-page-brand { pointer-events: auto; } } @media (max-width: 520px) { .artist-wish-link-list { flex-direction: column; } #artistProfileChoicesForm > .button { width: 100%; margin-bottom: 10px; } }