:root{ --bg0:#070A12; --bg1:#0B1224; --card:rgba(255,255,255,.08); --card2:rgba(255,255,255,.06); --stroke:rgba(255,255,255,.14); --text:rgba(255,255,255,.92); --muted:rgba(255,255,255,.70); --muted2:rgba(255,255,255,.55); --shadow: 0 30px 80px rgba(0,0,0,.55); --shadow2: 0 16px 40px rgba(0,0,0,.45); --radius: 22px; --radius2: 16px; --pad: clamp(16px, 2.6vw, 28px); --max: 1100px; --accentA: #7C5CFF; --accentB: #2FE6FF; --accentC: #00FFA8; --focus: rgba(47,230,255,.65); --ease: cubic-bezier(.2,.9,.2,1); } *{ box-sizing:border-box; } html, body{ height:100%; } body{ margin:0; color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "SF Pro Display", "SF Pro Text", Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; background: radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.18), transparent 60%), radial-gradient(900px 600px at 85% 15%, rgba(47,230,255,.14), transparent 60%), radial-gradient(900px 700px at 40% 95%, rgba(0,255,168,.12), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1)); overflow-x:hidden; } /* Theme switching (OpenAI can return theme in deck spec) */ body.theme-apple-dark{ color-scheme: dark; } body.theme-apple-light{ color-scheme: light; --bg0:#F6F7FB; --bg1:#EEF2FF; --text:rgba(10,12,18,.92); --muted:rgba(10,12,18,.72); --muted2:rgba(10,12,18,.55); --stroke:rgba(10,12,18,.12); background: radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.10), transparent 60%), radial-gradient(900px 600px at 85% 15%, rgba(47,230,255,.09), transparent 60%), radial-gradient(900px 700px at 40% 95%, rgba(0,255,168,.08), transparent 60%), linear-gradient(180deg, var(--bg0), var(--bg1)); } body.theme-midnight-neon{ color-scheme: dark; --bg0:#050610; --bg1:#070A18; --stroke:rgba(255,255,255,.16); } .skip-link{ position:absolute; left:12px; top:12px; padding:10px 12px; border-radius:999px; border:1px solid var(--stroke); background: rgba(0,0,0,.6); color:var(--text); text-decoration:none; transform: translateY(-160%); transition: transform .25s var(--ease); z-index:9999; } .skip-link:focus{ transform: translateY(0); outline:none; box-shadow: 0 0 0 3px var(--focus); } /* Background layer must sit above the canvas/background of , otherwise custom uploads won't be visible. */ .bg{ position:fixed; inset:0; pointer-events:none; z-index:0; } .bg__custom{ position:absolute; inset:0; z-index: 1; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; opacity: 0; transition: opacity 360ms var(--ease); } .bg__custom.is-on{ opacity: 1; } .bg::before{ content:""; position:absolute; inset:0; /* Custom/preset background image layer */ z-index:1; background-image: var(--bgCustom, none), var(--bgPreset, none); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; opacity: var(--bgOpacity, 1); filter: saturate(1.05) contrast(1.05); } .bg__glow{ position:absolute; filter: blur(60px); opacity:.9; transform: translate3d(0,0,0); /* Glow blobs sit behind uploaded/custom images */ z-index:0; } .bg__glow--a{ width:520px; height:520px; left:-140px; top:-160px; background: radial-gradient(circle at 30% 30%, rgba(124,92,255,.78), transparent 60%); } .bg__glow--b{ width:520px; height:520px; right:-180px; top:-120px; background: radial-gradient(circle at 60% 40%, rgba(47,230,255,.66), transparent 60%); } .bg__glow--c{ width:620px; height:620px; left:10%; bottom:-220px; background: radial-gradient(circle at 40% 60%, rgba(0,255,168,.55), transparent 60%); } .bg__grain{ position:absolute; inset:0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E"); mix-blend-mode: overlay; opacity:.22; z-index:2; } /* Background presets (full screen, responsive) */ body{ --bgPreset: none; --bgCustom: none; --bgOpacity: 1; } body[data-bg="default"]{ --bgPreset: none; } body[data-bg="aurora"]{ --bgPreset: radial-gradient(900px 600px at 15% 20%, rgba(124,92,255,.28), transparent 60%), radial-gradient(800px 520px at 85% 25%, rgba(47,230,255,.22), transparent 60%), radial-gradient(900px 680px at 40% 95%, rgba(0,255,168,.18), transparent 62%), linear-gradient(180deg, rgba(6,10,22,.92), rgba(8,12,28,.92)); --bgOpacity: 1; } body[data-bg="nebula"]{ --bgPreset: radial-gradient(900px 640px at 20% 20%, rgba(255,84,222,.20), transparent 60%), radial-gradient(900px 640px at 80% 30%, rgba(77,106,255,.22), transparent 62%), radial-gradient(900px 740px at 50% 95%, rgba(47,230,255,.12), transparent 62%), linear-gradient(180deg, rgba(6,8,18,.95), rgba(10,6,24,.95)); } body[data-bg="sunset"]{ --bgPreset: radial-gradient(900px 680px at 20% 20%, rgba(255,122,48,.18), transparent 62%), radial-gradient(900px 680px at 80% 30%, rgba(255,77,160,.16), transparent 62%), radial-gradient(900px 760px at 55% 95%, rgba(124,92,255,.14), transparent 62%), linear-gradient(180deg, rgba(10,10,18,.96), rgba(18,8,10,.96)); } body[data-bg="mono"]{ --bgPreset: radial-gradient(900px 680px at 20% 20%, rgba(255,255,255,.08), transparent 62%), radial-gradient(900px 680px at 80% 30%, rgba(255,255,255,.06), transparent 62%), linear-gradient(180deg, rgba(6,8,14,.96), rgba(10,12,18,.96)); --bgOpacity: 1; } /* When a custom image is set, turn down the glow/grain so the image is visible. */ body[data-bg-custom="1"] .bg__glow{ opacity: .35; } body[data-bg-custom="1"] .bg__grain{ opacity: .14; } .topbar{ position: sticky; top:0; z-index:50; display:flex; justify-content:space-between; align-items:center; gap:12px; padding: max(12px, env(safe-area-inset-top)) 16px 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(8,10,18,.84), rgba(8,10,18,.45)); border-bottom:1px solid rgba(255,255,255,.08); } .topbar__left{ display:flex; align-items:center; gap:12px; min-width: 0; } .topbar__right{ display:flex; align-items:center; gap:10px; } .topbar__logo{ height: 28px; width: auto; max-width: 160px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.10); padding: 4px 6px; } .mark{ width:12px; height:12px; border-radius:999px; background: linear-gradient(135deg, var(--accentA), var(--accentB)); box-shadow: 0 0 0 4px rgba(255,255,255,.05); } .topbar__brand{ min-width:0; } .topbar__name{ font-weight:650; letter-spacing:-.02em; line-height:1.1; } .topbar__sub{ font-size:12px; color:var(--muted2); margin-top:2px; } .topbar__right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; } .topbar__user{ display:flex; align-items:center; gap:10px; position: relative; } .topbar__user-dropdown { position: relative; } .topbar__avatar-btn { background: none; border: none; padding: 0; cursor: pointer; border-radius: 50%; transition: transform 0.2s var(--ease); } .topbar__avatar-btn:hover { transform: scale(1.05); } .topbar__avatar-btn:active { transform: scale(0.95); } .topbar__avatar{ width: 32px; height: 32px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); object-fit: cover; background: rgba(255,255,255,.08); display: block; pointer-events: none; } /* User Dropdown Menu */ .user-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; background: linear-gradient(135deg, rgba(12,14,22,.98), rgba(12,14,22,.95)); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius2); padding: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.4); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.2s var(--ease); z-index: 1000; } .user-dropdown.is-open { opacity: 1; visibility: visible; transform: translateY(0); } .user-dropdown__header { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); margin-bottom: 4px; } .user-dropdown__name { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.95); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-dropdown__email { font-size: 13px; color: rgba(255,255,255,.6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .user-dropdown__divider { height: 1px; background: rgba(255,255,255,.08); margin: 8px 0; } .user-dropdown__item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: none; border: none; color: rgba(255,255,255,.85); font-size: 14px; font-weight: 500; text-align: left; cursor: pointer; border-radius: var(--radius1); transition: all 0.15s var(--ease); font-family: inherit; } .user-dropdown__item:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.95); } .user-dropdown__item:active { background: rgba(255,255,255,.12); transform: scale(0.98); } .user-dropdown__item--danger { color: rgba(255,150,150,.9); } .user-dropdown__item--danger:hover { background: rgba(255,100,100,.15); color: rgba(255,150,150,1); } .user-dropdown__item--link { text-decoration: none; color: inherit; } .user-dropdown__item--link:hover { background: rgba(255,255,255,.08); color: rgba(255,255,255,.95); } .user-dropdown__icon { font-size: 16px; line-height: 1; flex-shrink: 0; } .user-dropdown__footer { padding: 8px 16px; margin-top: 4px; border-top: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 10px; } .user-dropdown__footer-link { color: var(--muted2); text-decoration: none; transition: color 0.2s var(--ease); } .user-dropdown__footer-link:hover { color: var(--muted); } .user-dropdown__footer-separator { color: var(--muted2); font-size: 10px; } @media (max-width: 720px) { .user-dropdown { right: -8px; min-width: 220px; } } .chip{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid rgba(255,255,255,.10); background: rgba(255,255,255,.06); color: var(--muted); } .deck{ padding: 18px 16px max(16px, env(safe-area-inset-bottom)); position: relative; z-index: 1; transition: height 600ms var(--ease); will-change: height; } .deck__frame{ max-width: var(--max); margin: 0 auto; border-radius: calc(var(--radius) + 10px); /* Frosted glass: noticeably opaque */ /* Opaque-feeling glass that still lets backdrop blur show through */ background: linear-gradient(180deg, rgba(12,14,22,.92), rgba(12,14,22,.88)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05) inset; overflow:hidden; backdrop-filter: blur(8px) saturate(1.25); -webkit-backdrop-filter: blur(8px) saturate(1.25); position: relative; } .deck__frame::before{ content: ""; position: absolute; inset: 0; border-radius: calc(var(--radius) + 10px); padding: 1px; background: linear-gradient(135deg, rgba(124,92,255,.3), rgba(47,230,255,.2), rgba(0,255,168,.2)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; pointer-events: none; } .deck__viewport{ position:relative; overflow:hidden; touch-action: pan-y; transition: height 600ms var(--ease); will-change: height; height: clamp(400px, 50vh, 600px); min-height: clamp(400px, 50vh, 600px); } .deck__track{ display:flex; width:100%; transform: translate3d(0,0,0); transition: transform 720ms var(--ease); will-change: transform; align-items: flex-start; } .deck__track.is-dragging{ transition:none; cursor:grabbing; } .deck__track.is-dragging ~ .deck__viewport{ transition: none; } .slide{ width:100%; flex: 0 0 100%; padding: var(--pad); min-height: clamp(400px, 50vh, 600px); height: auto; display:flex; flex-direction:column; justify-content:flex-start; gap: 18px; position:relative; transition: min-height 600ms var(--ease); } .slide::before{ content:""; position:absolute; inset: 0; background: radial-gradient(900px 450px at 15% 20%, rgba(124,92,255,.16), transparent 60%), radial-gradient(800px 450px at 85% 35%, rgba(47,230,255,.14), transparent 60%), radial-gradient(800px 600px at 50% 110%, rgba(0,255,168,.12), transparent 60%); opacity:1; pointer-events:none; transition: opacity 0.4s var(--ease); } .slide > *{ position:relative; z-index: 1; } .slide__chrome{ display:flex; justify-content:space-between; align-items:center; gap: 12px; } .slide__kicker{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color: var(--muted2); } .slide__meta{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; align-items:center; } .slide__notes-btn{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 4px 8px; font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease); display: flex; align-items: center; justify-content: center; min-width: 70px; height: 70px; pointer-events: auto; position: relative; z-index: 10; user-select: none; } .slide__btn-icon { width: 60px; height: 60px; display: block; object-fit: contain; } .slide__notes-btn:hover{ background: rgba(47,230,255,.15); border-color: rgba(47,230,255,.3); transform: scale(1.05); } .slide__notes-btn:active{ transform: scale(0.95); } .slide__ai-btn{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 4px 8px; font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease); display: flex; align-items: center; justify-content: center; min-width: 70px; height: 70px; pointer-events: auto; position: relative; z-index: 10; user-select: none; } .slide__ai-btn:hover{ background: rgba(47,230,255,.15); border-color: rgba(47,230,255,.3); transform: scale(1.05); } .slide__ai-btn:active{ transform: scale(0.95); } /* (Removed) AI alternatives button */ .slide__ai-btn--revert{ font-size: 45px; font-weight: 600; } .slide__ai-btn--revert:hover{ background: rgba(255,122,48,.15); border-color: rgba(255,122,48,.3); } .slide__template-btn{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 4px 8px; font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease); display: flex; align-items: center; justify-content: center; min-width: 70px; height: 70px; pointer-events: auto; position: relative; z-index: 10; user-select: none; } .slide__undo-template-btn{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.9); width: 62px; height: 62px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; line-height: 1; cursor: pointer; transition: transform .08s ease, background .15s ease, border-color .15s ease; } .slide__undo-template-btn:hover{ background: rgba(255,122,48,.15); border-color: rgba(255,122,48,.35); } .slide__undo-template-btn:active{ transform: scale(0.95); } .slide__template-btn:hover{ background: rgba(0,255,168,.15); border-color: rgba(0,255,168,.3); transform: scale(1.05); } .slide__template-btn:active{ transform: scale(0.95); } .slide__edit-btn{ background: none; border: none; padding: 4px 8px; color: rgba(255,255,255,.6); font-size: 16px; cursor: pointer; border-radius: 6px; transition: all 0.2s var(--ease); display: inline-flex; align-items: center; justify-content: center; min-width: 70px; height: 70px; } .slide__edit-btn:hover{ background: rgba(255,255,255,.1); color: rgba(255,255,255,.9); } .slide__edit-btn:active{ transform: scale(0.95); } .slide__image-btn{ background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 4px 8px; font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease); display: flex; align-items: center; justify-content: center; min-width: 70px; height: 70px; pointer-events: auto; position: relative; z-index: 10; user-select: none; } .slide__image-btn:hover{ background: rgba(0,255,168,.15); border-color: rgba(0,255,168,.3); transform: scale(1.05); } .slide__image-btn:active{ transform: scale(0.95); } .image-edit-content{ padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 12px; /* more breathing room so buttons never feel on top of preview */ } .image-edit-preview{ display: grid; place-items: center; padding: 8px; background: rgba(0,0,0,.16); border-radius: 14px; border: 1px solid rgba(255,255,255,.10); min-height: 160px; margin-bottom: 4px; /* Show the full image inside the modal viewport (no scrollbars) */ height: min(25.5vh, 364px); overflow: hidden; } .image-edit-preview img{ width: 50%; height: 90%; max-width: 100%; max-height: 100%; display: block; border-radius: 12px; border: 1px solid rgba(255,255,255,.12); object-fit: contain; background: rgba(255,255,255,.04); position: relative; z-index: 0; } .image-edit-actions{ display: flex; flex-direction: column; gap: 10px; margin-top: 6px; /* pushes controls further below preview */ position: relative; z-index: 1; } .image-edit-actions .btn{ width: 100%; justify-content: center; } .image-edit-upload-btn{ cursor: pointer; } .image-edit-delete-btn{ color: #ff6b6b; } .image-edit-message{ padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.16); font-size: 13px; line-height: 1.4; } .badge{ font-size:12px; padding:8px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.15); background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.08)); color: rgba(255,255,255,.9); font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 2px 8px rgba(0,0,0,.2); transition: all 0.2s var(--ease); } .badge:hover{ transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.3); border-color: rgba(47,230,255,.3); } .slide__content{ padding: clamp(24px, 3vw, 32px); border-radius: var(--radius); /* More transparent glass while keeping strong blur */ background: linear-gradient(180deg, rgba(12,14,22,.88), rgba(12,14,22,.85)); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.05) inset, 0 1px 0 rgba(255,255,255,.1) inset; backdrop-filter: blur(8px) saturate(1.35); -webkit-backdrop-filter: blur(8px) saturate(1.35); position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 24px; } /* Side media rail (AI images) */ .slide__layout{ display: flex; align-items: center; gap: clamp(18px, 2.2vw, 28px); } .slide__layout--left{ flex-direction: row-reverse; } .slide__body{ flex: 1 1 60%; min-width: 0; /* allow text to wrap */ } .slide__media{ flex: 0 0 40%; max-width: 40%; max-height: 100%; display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; } .slide__media img{ width: 100%; height: auto; max-width: 100%; max-height: 100%; display: block; border-radius: 14px; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 18px 50px rgba(0,0,0,.45); object-fit: contain; background: rgba(255,255,255,.04); transition: opacity 0.2s var(--ease); } .slide__media--broken{ border-radius: 14px; border: 1px dashed rgba(255,255,255,.22); background: rgba(255,255,255,.04); min-height: 180px; } .slide__media--broken img{ display: none; } .slide__media--broken::after{ content: "Image failed to load"; color: rgba(255,255,255,.75); font-size: 12px; font-weight: 600; letter-spacing: 0.01em; } /* panel__image is no longer used (twoCol images render via .slide__media for hover/edit overlay) */ .slide__media-overlay{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border-radius: 14px; opacity: 0; transition: opacity 0.2s var(--ease); pointer-events: none; z-index: 5; } .slide__media:hover .slide__media-overlay{ opacity: 1; pointer-events: auto; } .slide__media:hover img{ opacity: 0.7; } .slide__media-overlay-text{ color: rgba(255,255,255,.95); font-size: 14px; font-weight: 600; text-align: center; padding: 8px 16px; background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(47,230,255,.9)); border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,.3); letter-spacing: 0.02em; } .slide__media-overlay-sub{ display: block; margin-top: 6px; font-size: 11px; font-weight: 500; opacity: .9; line-height: 1.25; } .slide__media--below{ /* Chart slides: keep chart full width; place image below */ flex: 0 0 auto; width: 100%; max-width: 520px; align-self: center; } .slide__media--below img{ max-height: 240px; aspect-ratio: 16/9; } .slide__media--below .slide__media-overlay{ border-radius: 14px; } .slide__media[data-kind="icon"] img, .slide__media[data-kind="illustration"] img{ object-fit: contain; aspect-ratio: 1/1; padding: 10px; background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)); } @media (max-width: 820px){ .slide__layout{ flex-direction: column; align-items: stretch; } .slide__layout--left{ flex-direction: column; } .slide__media{ width: 100%; max-width: 100% !important; /* override inline max-width from JS */ flex-basis: auto !important; /* override inline flex-basis from JS */ flex: 0 0 auto; /* override desktop flex sizing so it doesn't shrink */ order: 2; max-height: none; } .slide__media img{ width: 100%; height: 240px; /* give the container real height so it doesn't look tiny */ max-height: 320px; object-fit: cover; /* fill the container on mobile */ } /* Keep icons/illustrations un-cropped */ .slide__media[data-kind="icon"] img, .slide__media[data-kind="illustration"] img{ object-fit: contain; height: 200px; max-height: 240px; } } /* Better spacing for content sections */ .slide__content > p + ul, .slide__content > p + ol, .slide__content > .highlight-box + ul, .slide__content > .highlight-box + ol { margin-top: 8px; } .slide__content > h2 + p, .slide__content > h2 + .highlight-box { margin-top: 4px; } .slide__content > *:first-child{ margin-top: 0; } .slide__content > *:last-child{ margin-bottom: 0; } /* Section dividers */ .slide__divider{ height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.2) 20%, rgba(255,255,255,.2) 80%, transparent ); margin: 24px 0; position: relative; } .slide__divider::before{ content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 4px; height: 4px; border-radius: 50%; background: rgba(47,230,255,.8); box-shadow: 0 0 8px rgba(47,230,255,.5); } .slide__divider--small{ margin: 16px 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,.15) 30%, rgba(255,255,255,.15) 70%, transparent ); } .slide__divider--small::before{ display: none; } .slide__content::before{ content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(47,230,255,.08) 0%, transparent 70%); pointer-events: none; opacity: 0; transition: opacity 0.6s var(--ease); } .slide:hover .slide__content::before{ opacity: 1; } h1, h2, h3{ margin:0 0 20px; letter-spacing: -0.03em; } h1{ font-size: clamp(36px, 5vw, 60px); line-height: 1.05; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.88)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; letter-spacing: -0.04em; margin-bottom: 24px; padding-bottom: 12px; } h2{ font-size: clamp(28px, 3.6vw, 44px); line-height: 1.15; color: rgba(255,255,255,.96); font-weight: 750; letter-spacing: -0.035em; margin-bottom: 20px; display: flex; align-items: center; gap: 12px; } .slide__icon{ font-size: 0.85em; display: inline-flex; align-items: center; justify-content: center; width: 1.2em; height: 1.2em; flex-shrink: 0; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); animation: iconPulse 3s ease-in-out infinite; transform-origin: center; } @keyframes iconPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.05); opacity: 0.9; } } h3{ font-size: 16px; letter-spacing: -0.015em; opacity:.95; } /* Sub-header styling */ .slide__subheader{ font-size: clamp(18px, 2vw, 22px); font-weight: 650; letter-spacing: -0.02em; color: rgba(255,255,255,.95); margin: 20px 0 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(255,255,255,.15); position: relative; } .slide__subheader::before{ content: ""; position: absolute; bottom: -1px; left: 0; width: 60px; height: 2px; background: linear-gradient(90deg, rgba(47,230,255,.8), transparent); } p{ margin: 0 0 16px; color: rgba(255,255,255,.88); font-size: clamp(16px, 1.6vw, 18px); line-height: 1.7; letter-spacing: -0.01em; font-weight: 400; } p:last-child{ margin-bottom: 0; } /* Bold text styling */ strong{ font-weight: 650; color: rgba(255,255,255,.98); background: linear-gradient(135deg, rgba(255,255,255,.15), rgba(255,255,255,.05)); padding: 2px 6px; border-radius: 4px; letter-spacing: -0.01em; } /* Italic text styling */ em{ font-style: italic; color: rgba(255,255,255,.92); font-weight: 450; } /* Inline code styling */ code{ font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', monospace; font-size: 0.9em; background: rgba(12,14,22,.6); border: 1px solid rgba(255,255,255,.15); padding: 2px 6px; border-radius: 4px; color: rgba(47,230,255,.95); font-weight: 500; } .lead{ font-size: clamp(18px, 2vw, 22px); color: rgba(255,255,255,.92); line-height: 1.65; max-width: 100%; font-weight: 500; letter-spacing: -0.015em; margin-bottom: 20px; } ul, ol{ margin: 20px 0 24px; padding-left: 28px; color: rgba(255,255,255,.9); list-style: none; } /* Two-column layout for bullets when there are 6+ items - height-safe implementation */ ul.bullets-two-column{ display: grid; grid-template-columns: 1fr; column-gap: 40px; row-gap: 0; padding-left: 28px; /* Ensure grid doesn't interfere with height measurement */ min-height: 0; height: auto; } @media (min-width: 720px){ ul.bullets-two-column{ grid-template-columns: 1fr 1fr; } } li{ margin: 12px 0; line-height: 1.75; position: relative; padding-left: 12px; font-size: clamp(16px, 1.6vw, 18px); color: rgba(255,255,255,.88); letter-spacing: -0.01em; } ul li::before{ content: "•"; position: absolute; left: -24px; color: rgba(47,230,255,.8); font-weight: 700; font-size: 1.2em; line-height: 1; top: 0.1em; } /* Checkmark bullets */ ul.bullets-checkmark li::before{ content: "✓"; color: rgba(0,255,168,.9); font-weight: 600; font-size: 1.1em; left: -28px; top: 0.05em; } /* Nested bullets (sub-bullets) */ ul.bullets-nested { margin-top: 8px; margin-left: 24px; padding-left: 0; } ul.bullets-nested li::before { content: "•"; color: rgba(124,92,255,.8); font-weight: 600; font-size: 1.2em; left: -20px; top: 0.1em; } /* Ensure nested bullets don't get two-column layout */ ul.bullets-nested.bullets-two-column { display: block; column-count: 1; } ol li{ counter-increment: list-counter; } ol li::before{ content: counter(list-counter); position: absolute; left: -36px; color: rgba(255,255,255,.95); background: linear-gradient(135deg, rgba(47,230,255,.3), rgba(124,92,255,.3)); border: 1px solid rgba(47,230,255,.4); font-weight: 650; font-size: 0.85em; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(47,230,255,.2); } ol{ counter-reset: list-counter; } .callout{ margin-top: 20px; padding: 20px 24px; border-radius: var(--radius2); border: 1px solid rgba(47,230,255,.3); background: linear-gradient(135deg, rgba(47,230,255,.15), rgba(124,92,255,.1)); color: rgba(255,255,255,.95); font-weight: 500; box-shadow: 0 8px 32px rgba(47,230,255,.2), 0 0 0 1px rgba(255,255,255,.05) inset; position: relative; overflow: hidden; line-height: 1.7; } .callout::before{ content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--accentA), var(--accentB), var(--accentC)); } .callout::after{ content: "💡"; position: absolute; top: 16px; right: 20px; font-size: 1.2em; opacity: 0.6; } /* Highlight boxes for important content */ .highlight-box{ margin: 20px 0; padding: 18px 22px; border-radius: var(--radius2); border-left: 4px solid rgba(0,255,168,.8); background: linear-gradient(135deg, rgba(0,255,168,.08), rgba(47,230,255,.05)); color: rgba(255,255,255,.95); font-weight: 450; box-shadow: 0 4px 16px rgba(0,255,168,.1); position: relative; } .highlight-box strong{ color: rgba(0,255,168,.95); background: rgba(0,255,168,.15); } .panel{ border-radius: var(--radius2); padding: 18px 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(12,14,22,.85), rgba(12,14,22,.80)); backdrop-filter: blur(8px) saturate(1.25); -webkit-backdrop-filter: blur(8px) saturate(1.25); box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: all 0.3s var(--ease); } .panel:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.4); border-color: rgba(255,255,255,.18); } .panel--accent{ background: radial-gradient(500px 300px at 10% 10%, rgba(124,92,255,.25), transparent 60%), radial-gradient(500px 300px at 90% 20%, rgba(47,230,255,.20), transparent 60%), linear-gradient(135deg, rgba(12,14,22,.85), rgba(12,14,22,.80)); border-color: rgba(47,230,255,.3); box-shadow: 0 8px 32px rgba(47,230,255,.2); } .panel h3.slide__subheader{ font-size: clamp(16px, 1.8vw, 20px); margin-top: 0; margin-bottom: 12px; } .muted{ color: var(--muted2); } .twocol{ display:grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 820px){ .twocol{ grid-template-columns: 1fr 1fr; } } /* Multi-column sections (2–4) */ .twocol--3 .panel:nth-child(3){ grid-column: 1 / -1; /* third section spans full width */ } /* 4 sections: 2x2 by default; switch to 4 columns on very wide screens */ @media (min-width: 1100px){ .twocol--4{ grid-template-columns: repeat(4, 1fr); } .twocol--4 .panel{ grid-column: auto; } } .pills{ display:flex; flex-wrap:wrap; gap: 10px; margin: 10px 0 2px; } .pill{ padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: rgba(255,255,255,.84); font-size: 14px; } .pricing{ display:grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 10px; } @media (min-width: 720px){ .pricing{ grid-template-columns: repeat(3, 1fr); } } .pricecard{ position: relative; border-radius: var(--radius2); padding: 18px 18px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.05)); transition: all 0.3s var(--ease); } .pricecard__highlight-btn{ position: absolute; top: 10px; right: 10px; padding: 6px 10px; font-size: 11px; font-weight: 600; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(0,0,0,.25); color: rgba(255,255,255,.9); cursor: pointer; opacity: 0; transform: translateY(-2px); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease), background 0.15s var(--ease); } .pricecard:hover .pricecard__highlight-btn{ opacity: 1; transform: translateY(0); } .pricecard__highlight-btn:hover{ background: rgba(47,230,255,.18); border-color: rgba(47,230,255,.35); } .pricecard--highlight .pricecard__highlight-btn{ opacity: 1; background: rgba(47,230,255,.22); border-color: rgba(47,230,255,.45); } .pricecard:hover{ transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.3); } .pricecard--highlight{ border-color: rgba(47,230,255,.4); box-shadow: 0 16px 48px rgba(47,230,255,.25); background: linear-gradient(135deg, rgba(47,230,255,.15), rgba(124,92,255,.10)); } .pricecard__tier{ font-weight: 650; margin-bottom: 6px; } .pricecard__price{ font-size: 28px; font-weight: 750; letter-spacing: -0.03em; } .pricecard__meta{ margin-top: 4px; color: var(--muted2); font-size: 13px; } .metrics{ display:grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0 12px; } @media (min-width: 720px){ .metrics{ grid-template-columns: repeat(3, 1fr); } } .metric{ border-radius: var(--radius2); padding: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); } .metric__num{ font-size: 28px; font-weight: 800; letter-spacing: -0.03em; background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(47,230,255,.92), rgba(0,255,168,.90)); -webkit-background-clip: text; background-clip: text; color: transparent; } .metric__label{ color: var(--muted2); margin-top: 6px; font-size: 13px; } .steps{ counter-reset: step; list-style: none; padding-left: 0; margin: 12px 0 0; } .steps li{ counter-increment: step; margin: 10px 0; padding: 12px 12px 12px 50px; position:relative; border-radius: var(--radius2); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); } .steps li::before{ content: counter(step); position:absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 28px; height: 28px; border-radius: 10px; display:grid; place-items:center; font-weight: 800; background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.14); } .chat{ display:grid; gap: 12px; margin-top: 8px; } .chat__bubble{ border-radius: 18px; border: 1px solid rgba(255,255,255,.12); padding: 12px 14px; background: rgba(255,255,255,.05); } .chat__bubble--user{ background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); } .chat__bubble--ai{ background: radial-gradient(420px 260px at 10% 10%, rgba(47,230,255,.14), transparent 58%), rgba(255,255,255,.05); border-color: rgba(47,230,255,.22); } .chat__label{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted2); margin-bottom: 6px; } .chat__text{ color: rgba(255,255,255,.86); line-height: 1.5; } .chat__list{ margin: 8px 0 0; padding-left: 18px; color: rgba(255,255,255,.86); } .deck__controls{ padding: 14px var(--pad) max(14px, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(8,10,18,.30), rgba(8,10,18,.55)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .progress{ height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow:hidden; border: 1px solid rgba(255,255,255,.10); margin-bottom: 12px; } .progress__bar{ height:100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, rgba(124,92,255,.95), rgba(47,230,255,.95), rgba(0,255,168,.95)); box-shadow: 0 8px 24px rgba(47,230,255,.10); transition: width 520ms var(--ease); } .controls{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 10px; } .btn{ appearance:none; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.08)); color: rgba(255,255,255,.92); border-radius: 999px; padding: 12px 14px; font-weight: 650; letter-spacing: -0.01em; box-shadow: 0 10px 26px rgba(0,0,0,.35); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap: 8px; user-select:none; -webkit-tap-highlight-color: transparent; } .btn:hover{ border-color: rgba(255,255,255,.22); } .btn:active{ transform: translateY(1px); } .btn:focus{ outline:none; box-shadow: 0 0 0 3px var(--focus), 0 10px 26px rgba(0,0,0,.35); } .btn[disabled]{ opacity:.6; cursor:not-allowed; transform:none; } #imageEditOk[disabled]{ opacity:.6; } #imageEditOk:not([disabled]){ opacity:1 !important; } .image-edit-options{ display:flex; align-items:center; gap:12px; margin-top: 12px; } .image-edit-options__label{ font-size: 13px; color: rgba(255,255,255,.75); } .image-edit-options__toggle{ display:inline-flex; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); border-radius: 14px; overflow: hidden; } .image-edit-options__btn{ appearance:none; border: none; background: transparent; color: rgba(255,255,255,.85); padding: 10px 14px; font-weight: 600; cursor: pointer; } .image-edit-options__btn[aria-pressed="true"]{ background: rgba(0,255,168,.16); color: rgba(255,255,255,.95); } .image-edit-options__btn:hover{ background: rgba(255,255,255,.06); } .image-edit-options__btn[aria-pressed="true"]:hover{ background: rgba(0,255,168,.22); } .btn--ghost{ background: rgba(255,255,255,.06); box-shadow:none; } /* Improve button readability on light backgrounds */ body.theme-apple-light .btn, body.theme-apple-light .fab{ background: linear-gradient(180deg, rgba(10,12,18,.08), rgba(10,12,18,.12)); border-color: rgba(10,12,18,.2); color: rgba(10,12,18,.92); box-shadow: 0 10px 26px rgba(0,0,0,.15); } body.theme-apple-light .btn:hover, body.theme-apple-light .fab:hover{ border-color: rgba(10,12,18,.3); background: linear-gradient(180deg, rgba(10,12,18,.12), rgba(10,12,18,.16)); box-shadow: 0 12px 28px rgba(0,0,0,.2); } body.theme-apple-light .btn--ghost, body.theme-apple-light .fab--ghost{ background: rgba(10,12,18,.06); border-color: rgba(10,12,18,.15); color: rgba(10,12,18,.85); } body.theme-apple-light .btn--ghost:hover, body.theme-apple-light .fab--ghost:hover{ background: rgba(10,12,18,.1); border-color: rgba(10,12,18,.25); } /* Primary buttons keep their gradient on light backgrounds */ body.theme-apple-light .btn--primary, body.theme-apple-light .fab--primary{ background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(47,230,255,.9)); border-color: rgba(124,92,255,.6); color: rgba(255,255,255,.98); box-shadow: 0 4px 16px rgba(124,92,255,.3); } body.theme-apple-light .btn--primary:hover, body.theme-apple-light .fab--primary:hover{ background: linear-gradient(135deg, rgba(124,92,255,1), rgba(47,230,255,.95)); box-shadow: 0 6px 20px rgba(124,92,255,.4); } .btn__icon{ opacity:.85; } .status{ display:flex; flex-direction:column; align-items:center; gap: 6px; min-width: 160px; } .counter{ font-size: 12px; color: var(--muted2); letter-spacing: .08em; text-transform: uppercase; } .dots{ display:flex; gap: 6px; flex-wrap:wrap; justify-content:center; } .dot{ appearance:none; -webkit-appearance:none; padding: 0; width: 8px; height: 8px; border-radius: 999px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); transition: transform 220ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease); } .dot:focus{ outline: none; box-shadow: 0 0 0 3px var(--focus); } .dot.is-active{ background: rgba(47,230,255,.60); border-color: rgba(47,230,255,.75); transform: scale(1.15); } .hint{ margin-top: 10px; font-size: 12px; color: var(--muted2); text-align:center; } @media (max-width: 520px){ .topbar__right{ display:none; } .status{ min-width: 120px; } .controls{ grid-template-columns: 1fr auto 1fr; } .btn{ padding: 12px 12px; } } .chart-container{ margin: 20px 0; padding: 16px; border-radius: var(--radius2); background: rgba(0,0,0,.15); border: 1px solid rgba(255,255,255,.08); position: relative; min-height: 300px; } .chart-container canvas{ max-height: 400px; } @media (prefers-reduced-motion: reduce){ .deck__track{ transition: none !important; } .progress__bar{ transition: none !important; } .dot{ transition: none !important; } .btn{ transition: none !important; } } /* Generator (Paste & Generate) */ .fabbar{ position: fixed; right: calc((100vw - var(--max)) / 2 - 270px); top: 50%; transform: translateY(-50%); z-index: 80; display:flex; flex-direction: column; justify-content:center; gap: 10px; pointer-events: none; /* let buttons opt-in */ } .fab{ pointer-events: auto; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)); color: rgba(156, 156, 156, 0.92); border-radius: 999px; padding: 12px 14px; font-weight: 650; letter-spacing: -0.01em; cursor: pointer; box-shadow: 0 14px 40px rgba(0,0,0,.45); -webkit-tap-highlight-color: transparent; } .fab--ghost{ background: rgba(255,255,255,.06); box-shadow: 0 14px 40px rgba(0,0,0,.35); } .fab--primary{ background: linear-gradient(135deg, rgba(124,92,255,.95), rgba(47,230,255,.9)); border-color: rgba(124,92,255,.6); color: rgba(255,255,255,.98); box-shadow: 0 14px 40px rgba(124,92,255,.4), 0 0 0 1px rgba(124,92,255,.3); } .fab--primary:hover{ background: linear-gradient(135deg, rgba(124,92,255,1), rgba(47,230,255,.95)); box-shadow: 0 16px 44px rgba(124,92,255,.5), 0 0 0 1px rgba(124,92,255,.4); border-color: rgba(124,92,255,.7); } .fab--primary:active{ transform: translateY(1px); box-shadow: 0 12px 36px rgba(124,92,255,.4), 0 0 0 1px rgba(124,92,255,.3); } .fab:focus{ outline:none; box-shadow: 0 0 0 3px var(--focus), 0 14px 40px rgba(0,0,0,.45); } .fab:active{ transform: translateY(1px); } .modal{ position: fixed; inset:0; z-index: 100; display:none; } .modal.is-open{ display:block; } .modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .modal__panel{ position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(980px, calc(100vw - 24px)); height: min(82vh, 800px); border-radius: 22px; border: 1px solid rgba(255,255,255,.14); /* Solid (opaque) modal background */ background: linear-gradient(180deg, #0c0e16, #080a12); box-shadow: 0 30px 90px rgba(0,0,0,.65); overflow: hidden; display:flex; flex-direction: column; padding: 0; } .modal__panel > div:not(.modal__header):not(.modal__actions):not(.brandingRow):not(.edit-mode-notice):not(.modal__hint):not(.generation-overlay) { overflow-y: auto; overflow-x: hidden; flex: 1; -webkit-overflow-scrolling: touch; } .modal__panel > .textarea { overflow-y: auto; overflow-x: hidden; flex: 1; -webkit-overflow-scrolling: touch; } .modal__panel--welcome > div:not(.modal__header):not(.modal__actions) { overflow-y: visible; flex: 0 1 auto; } .modal__panel--compact{ height: auto; max-height: min(76vh, 520px); } /* Image upload/edit modal: larger, no inner scrollbars */ #imageEditModal .modal__panel--compact{ width: min(728px, calc(70vw - 24px)); max-height: min(68.4vh, 644px); } #imageEditModal .image-edit-content{ overflow: visible !important; } .modal__panel--welcome { max-height: min(90vh, 680px); height: auto; } .modal__header{ padding: 14px 16px; display:flex; align-items:center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.10); } .modal__title{ font-weight: 750; letter-spacing: -0.02em; } .modal__sub{ font-size: 12px; color: rgba(255,255,255,.62); margin-top: 2px; } .iconbtn{ appearance:none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); border-radius: 12px; width: 40px; height: 40px; cursor:pointer; display:grid; place-items:center; } .iconbtn:focus{ outline:none; box-shadow: 0 0 0 3px var(--focus); } .iconbtn:active{ transform: translateY(1px); } .textarea{ flex: 1; width: 100%; min-height: 300px; border: none; outline: none; resize: vertical; padding: 12px 16px; background: rgba(0,0,0,.18); color: rgba(255,255,255,.90); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; font-size: 13px; line-height: 1.55; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; } .brandingRow{ display:flex; align-items:center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.10); flex-shrink: 0; overflow: visible; } .brandingRow__label{ font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); min-width: 46px; } .fileInput{ flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.80); padding: 10px 12px; font-size: 12px; } .fileInput--hidden{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .fileBtn{ white-space: nowrap; } .selectInput{ border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.88); padding: 10px 12px; font-size: 12px; outline: none; } .selectInput:focus{ box-shadow: 0 0 0 3px var(--focus); } .selectInput option{ background: rgba(12,14,22,.95); color: rgba(255,255,255,.92); padding: 8px 12px; } .brandingRow__preview{ width: 54px; height: 34px; border-radius: 10px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); display:grid; place-items:center; overflow:hidden; } .brandingRow__preview img{ max-width: 100%; max-height: 100%; object-fit: contain; display:block; } .modal__actions{ padding: 12px 16px; display:flex; gap: 10px; align-items:center; border-top: 1px solid rgba(255,255,255,.10); } .modal__spacer{ flex: 1; } .shareRow{ padding: 12px 16px 12px; display:flex; gap: 10px; align-items:center; } .shareInput{ flex: 1; min-width: 0; border-radius: 999px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.90); padding: 12px 14px; font-size: 13px; outline: none; } .shareInput:focus{ box-shadow: 0 0 0 3px var(--focus); } /* Share CTA Section */ .share-cta { margin: 20px 16px; padding: 20px; background: linear-gradient(135deg, rgba(124,92,255,.12), rgba(47,230,255,.1)); border: 1px solid rgba(124,92,255,.2); border-radius: 12px; display: flex; align-items: center; gap: 16px; transition: all 0.3s var(--ease); } .share-cta:hover { background: linear-gradient(135deg, rgba(124,92,255,.16), rgba(47,230,255,.14)); border-color: rgba(124,92,255,.3); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(124,92,255,.2); } .share-cta__icon { font-size: 32px; line-height: 1; flex-shrink: 0; } .share-cta__content { flex: 1; min-width: 0; } .share-cta__title { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.95); margin-bottom: 4px; letter-spacing: -0.01em; } .share-cta__subtitle { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.4; } .share-cta__button { flex-shrink: 0; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } .share-cta__button:hover { transform: scale(1.02); } @media (max-width: 720px) { .share-cta { flex-direction: column; text-align: center; gap: 12px; } .share-cta__content { width: 100%; } .share-cta__button { width: 100%; } } .edit-mode-notice { display: flex; align-items: flex-start; gap: 12px; padding: 10px 16px; margin: 0 16px 12px; background: linear-gradient(135deg, rgba(255,122,48,.12), rgba(255,122,48,.08)); border: 1px solid rgba(255,122,48,.25); border-radius: var(--radius1); backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); flex-shrink: 0; overflow: visible; } .edit-mode-notice__icon { font-size: 18px; line-height: 1.4; flex-shrink: 0; } .edit-mode-notice__text { font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.85); } .edit-mode-notice__text strong { color: rgba(255,255,255,.95); font-weight: 600; } .modal__hint{ padding: 0 16px 12px; font-size: 12px; color: rgba(255,255,255,.60); flex-shrink: 0; overflow: visible; } /* Share CTA Styles */ .share-header-cta { text-decoration: none; white-space: nowrap; } .share-cta-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; padding: 16px; background: linear-gradient(180deg, transparent, rgba(12,14,22,.98) 20%); pointer-events: none; } .share-cta-banner__content { max-width: 1200px; margin: 0 auto; padding: 20px 24px; background: linear-gradient(135deg, rgba(124,92,255,.15), rgba(47,230,255,.12)); border: 1px solid rgba(124,92,255,.25); border-radius: 16px; backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); box-shadow: 0 -4px 24px rgba(0,0,0,.3), 0 8px 32px rgba(124,92,255,.15); display: flex; align-items: center; gap: 20px; pointer-events: all; transition: all 0.3s var(--ease); } .share-cta-banner__content:hover { background: linear-gradient(135deg, rgba(124,92,255,.18), rgba(47,230,255,.15)); border-color: rgba(124,92,255,.35); transform: translateY(-2px); box-shadow: 0 -4px 32px rgba(0,0,0,.4), 0 12px 40px rgba(124,92,255,.2); } .share-cta-banner__icon { font-size: 36px; line-height: 1; flex-shrink: 0; animation: share-cta-pulse 2s ease-in-out infinite; } @keyframes share-cta-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.1); opacity: 0.9; } } .share-cta-banner__text { flex: 1; min-width: 0; } .share-cta-banner__title { font-size: 18px; font-weight: 700; color: rgba(255,255,255,.95); margin-bottom: 4px; letter-spacing: -0.02em; } .share-cta-banner__subtitle { font-size: 14px; color: rgba(255,255,255,.75); line-height: 1.4; } .share-cta-banner__button { flex-shrink: 0; white-space: nowrap; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-weight: 600; } .share-cta-banner__button:hover { transform: scale(1.05); } @media (max-width: 720px) { .share-cta-banner { padding: 12px; } .share-cta-banner__content { flex-direction: column; text-align: center; gap: 16px; padding: 20px; } .share-cta-banner__text { width: 100%; } .share-cta-banner__button { width: 100%; } .share-header-cta { display: none; } } /* Welcome Modal Styles */ .modal__panel--welcome { max-width: 560px; width: min(560px, calc(100vw - 32px)); max-height: min(90vh, 680px); height: auto; } .welcome-content { padding: 36px 32px; display: flex; flex-direction: column; gap: 24px; overflow-y: visible; } .welcome-description { color: rgba(255,255,255,.75); line-height: 1.6; text-align: center; margin: 0; font-size: 14px; } .welcome-form { display: flex; flex-direction: column; gap: 16px; } .welcome-inputs { display: flex; flex-direction: column; gap: 12px; } .welcome-input { width: 100%; padding: 14px 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.95); border-radius: 12px; font-size: 15px; font-family: inherit; outline: none; transition: all 0.2s var(--ease); } .welcome-input::placeholder { color: rgba(255,255,255,.5); } .welcome-input:focus { border-color: rgba(124,92,255,.5); background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(124,92,255,.15); } .welcome-input:hover:not(:focus) { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.10); } /* Change Password Modal Styles */ .change-password-content { padding: 28px 24px; flex: 1; display: flex; flex-direction: column; min-height: 0; } .change-password-content .welcome-inputs { margin-bottom: 20px; flex-shrink: 0; } .change-password-error { color: rgba(255,120,120,1); font-size: 14px; line-height: 1.5; padding: 12px 16px; background: rgba(255,100,100,.1); border: 1px solid rgba(255,100,100,.2); border-radius: 8px; display: none; margin-top: 0; flex-shrink: 0; } .change-password-error:not(:empty) { display: block; } /* Change Avatar Modal Styles */ .change-avatar-content { padding: 28px 24px; flex: 1; display: flex; flex-direction: column; min-height: 0; text-align: center; } .change-avatar-preview { margin-bottom: 24px; flex-shrink: 0; } .change-avatar-preview .topbar__avatar { width: 80px; height: 80px; margin: 0 auto; } .change-avatar-content .welcome-inputs { margin-bottom: 20px; flex-shrink: 0; } .change-avatar-error { color: rgba(255,120,120,1); font-size: 14px; line-height: 1.5; padding: 12px 16px; background: rgba(255,100,100,.1); border: 1px solid rgba(255,100,100,.2); border-radius: 8px; display: none; margin-top: 0; flex-shrink: 0; } .change-avatar-error:not(:empty) { display: block; } /* Notes Modal Styles */ .notes-content { padding: 24px; flex: 1; display: flex; flex-direction: column; min-height: 0; } .notes-textarea { width: 100%; min-height: 200px; padding: 16px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); border-radius: var(--radius2); color: rgba(255,255,255,.9); font-size: 14px; line-height: 1.6; font-family: inherit; resize: vertical; transition: all 0.2s var(--ease); } .notes-textarea:focus { outline: none; border-color: rgba(47,230,255,.5); background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(47,230,255,.1); } .notes-textarea::placeholder { color: rgba(255,255,255,.4); } /* (Removed) AI Alternatives Modal Styles */ .slide-preview-mini { font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); } .slide-preview-mini__title { font-size: 16px; font-weight: 650; margin-bottom: 12px; color: rgba(255,255,255,.95); } .slide-preview-mini__content { margin-bottom: 12px; color: rgba(255,255,255,.8); } .slide-preview-mini__bullets { color: rgba(255,255,255,.7); font-size: 12px; line-height: 1.8; } /* (Removed) AI Alternatives Modal Styles */ /* Template Selector Modal Styles */ .template-selector-content { padding: 24px; flex: 1; display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .template-selector-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .template-option { display: flex; align-items: center; gap: 16px; padding: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius2); cursor: pointer; transition: all 0.2s var(--ease); text-align: left; width: 100%; } .template-option:hover { background: rgba(255,255,255,.08); border-color: rgba(0,255,168,.3); transform: translateX(4px); } .template-option--active { background: rgba(0,255,168,.1); border-color: rgba(0,255,168,.4); } .template-option--active:hover { background: rgba(0,255,168,.15); border-color: rgba(0,255,168,.5); } .template-option__icon { font-size: 24px; font-weight: 600; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); border-radius: 8px; flex-shrink: 0; } .template-option__info { flex: 1; min-width: 0; } .template-option__name { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.95); margin-bottom: 4px; } .template-option__desc { font-size: 13px; color: rgba(255,255,255,.7); line-height: 1.4; } .template-option__badge { font-size: 11px; font-weight: 600; color: rgba(0,255,168,.9); padding: 4px 10px; background: rgba(0,255,168,.15); border-radius: 12px; text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0; } .welcome-buttons { display: flex; gap: 12px; } .welcome-buttons .btn { flex: 1; padding: 14px 20px; font-weight: 600; } .welcome-forgot { text-align: center; margin-top: -4px; } .btn--text { padding: 8px 12px; font-size: 13px; color: rgba(255,255,255,.65); background: transparent; border: none; text-decoration: none; } .btn--text:hover { color: rgba(255,255,255,.85); background: rgba(255,255,255,.05); } .welcome-divider { display: flex; align-items: center; gap: 16px; margin: 8px 0; } .welcome-divider__line { flex: 1; height: 1px; background: rgba(255,255,255,.15); } .welcome-divider__text { color: rgba(255,255,255,.5); font-size: 13px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } .welcome-google { display: flex; justify-content: center; } .btn--google { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 14px 24px; width: 100%; font-weight: 600; background: rgba(255,255,255,.95); color: rgba(10,12,18,.9); border: 1px solid rgba(255,255,255,.2); } .btn--google:hover { background: rgba(255,255,255,1); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); } .btn--google:active { transform: translateY(0); } .btn--google svg { flex-shrink: 0; } @media (max-width: 520px) { .modal__panel--welcome { max-width: calc(100vw - 24px); width: calc(100vw - 24px); max-height: 90vh; } .welcome-content { padding: 28px 24px; gap: 20px; } .welcome-buttons { flex-direction: column; } .welcome-buttons .btn { width: 100%; } } .decklist{ padding: 0 16px; display:grid; gap: 10px; margin: 8px 0 0; max-height: 46vh; overflow-x: hidden; overflow-y: auto; width: 100%; box-sizing: border-box; } .deckitem{ display:flex; align-items:center; justify-content:space-between; gap: 12px; padding: 16px; border-radius: var(--radius2); border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); min-width: 0; width: 100%; box-sizing: border-box; overflow: visible; } .deckitem__meta{ display:flex; flex-direction:column; gap: 2px; min-width: 0; flex: 1 1 0; overflow: hidden; } .deckitem__title{ font-weight: 700; letter-spacing: -0.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .deckitem__sub{ font-size: 12px; color: rgba(255,255,255,.62); } .deckitem__actions { display: flex; gap: 6px; align-items: center; flex-shrink: 0; flex-wrap: nowrap; min-width: fit-content; } .deckitem__actions .btn { white-space: nowrap; padding: 8px 10px; font-size: 11px; min-width: auto; flex-shrink: 0; } @media (max-width: 520px){ .modal__panel{ height: min(82vh, 720px); } .fabbar{ right: 12px; left: auto; top: auto; bottom: calc(12px + env(safe-area-inset-bottom)); transform: none; flex-direction: row; justify-content: flex-end; flex-wrap: wrap; } .fab{ flex: 1 1 auto; min-width: 0; justify-content:center; } .deckitem { flex-wrap: wrap; gap: 12px; } .deckitem__meta { max-width: 100%; width: 100%; } .deckitem__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .deckitem__actions .btn { flex: 1 1 auto; min-width: 0; padding: 8px 8px; font-size: 11px; } } /* Upgrade Modal Styles */ .upgrade-container { padding: 24px; text-align: center; } .upgrade-header { margin-bottom: 32px; } .upgrade-header h3 { font-size: 28px; font-weight: 750; letter-spacing: -0.02em; margin-bottom: 12px; background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,255,255,.88)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .upgrade-header p { color: rgba(255,255,255,.7); line-height: 1.6; font-size: 15px; } .upgrade-grid { display: grid; gap: 20px; max-width: 800px; margin: 0 auto; padding-bottom: 24px; } .upgrade-card { border-radius: var(--radius2); padding: 28px; border: 1px solid rgba(255,255,255,.14); background: linear-gradient(135deg, rgba(12,14,22,.88), rgba(12,14,22,.85)); backdrop-filter: blur(8px) saturate(1.35); -webkit-backdrop-filter: blur(8px) saturate(1.35); box-shadow: 0 8px 32px rgba(0,0,0,.3); transition: all 0.3s var(--ease); position: relative; overflow: hidden; } .upgrade-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, rgba(124,92,255,.6), rgba(47,230,255,.6)); opacity: 0; transition: opacity 0.3s var(--ease); } .upgrade-card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0,0,0,.4); border-color: rgba(255,255,255,.2); } .upgrade-card:hover::before { opacity: 1; } .upgrade-card--featured { border-color: rgba(124,92,255,.5); background: linear-gradient(135deg, radial-gradient(400px 300px at 10% 10%, rgba(124,92,255,.2), transparent 60%), radial-gradient(400px 300px at 90% 20%, rgba(47,230,255,.15), transparent 60%), rgba(12,14,22,.88)); box-shadow: 0 12px 48px rgba(124,92,255,.25); } .upgrade-card--featured::before { opacity: 1; background: linear-gradient(90deg, var(--accentA), var(--accentB), var(--accentC)); } .upgrade-card__header { margin-bottom: 20px; } .upgrade-card__title { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin-bottom: 8px; color: rgba(255,255,255,.95); } .upgrade-card__badge { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: linear-gradient(135deg, rgba(124,92,255,.3), rgba(47,230,255,.25)); color: rgba(255,255,255,.9); border: 1px solid rgba(124,92,255,.4); margin-top: 4px; } .upgrade-card__features { list-style: none !important; list-style-type: none !important; padding: 0 !important; margin: 28px auto !important; text-align: center; max-width: 100%; } .upgrade-card__features li, .upgrade-card__features li::before, .upgrade-card__features li::after { list-style: none !important; list-style-type: none !important; padding-left: 0 !important; margin-left: 0 !important; content: none !important; } .upgrade-card__feature { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 16px 12px; color: rgba(255,255,255,.95); font-size: 17px; font-weight: 550; line-height: 1.7; text-align: center; margin: 0 !important; position: relative; } .upgrade-card__feature::before, .upgrade-card__feature::after { content: none !important; display: none !important; } .upgrade-card__feature-icon { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, rgba(47,230,255,.3), rgba(124,92,255,.25)); border: 2px solid rgba(47,230,255,.5); box-shadow: 0 3px 10px rgba(47,230,255,.25); transition: all 0.2s var(--ease); } .upgrade-card__feature:hover .upgrade-card__feature-icon { transform: scale(1.1); box-shadow: 0 4px 14px rgba(47,230,255,.35); border-color: rgba(47,230,255,.7); } .upgrade-card__feature-icon svg { width: 16px; height: 16px; stroke: rgba(47,230,255,1); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } .upgrade-card--featured .upgrade-card__feature-icon { background: linear-gradient(135deg, rgba(47,230,255,.4), rgba(124,92,255,.35)); border-color: rgba(47,230,255,.7); box-shadow: 0 3px 12px rgba(47,230,255,.35); } .upgrade-card--featured .upgrade-card__feature-icon svg { stroke: rgba(47,230,255,1); } .upgrade-card--featured .upgrade-card__feature:hover .upgrade-card__feature-icon { transform: scale(1.1); box-shadow: 0 4px 16px rgba(47,230,255,.45); border-color: rgba(47,230,255,.85); } .upgrade-card__feature-text { flex: 0 1 auto; text-align: center; letter-spacing: -0.01em; } .upgrade-card__pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 24px; } .upgrade-card__price-btn { width: 100%; padding: 14px 20px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.08)); color: rgba(255,255,255,.92); font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease); position: relative; overflow: hidden; } .upgrade-card__price-btn:hover { border-color: rgba(255,255,255,.22); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.2); } .upgrade-card__price-btn:active { transform: translateY(0); } .upgrade-card__price-btn--primary { background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(47,230,255,.85)); border-color: rgba(124,92,255,.5); color: rgba(255,255,255,.98); box-shadow: 0 4px 16px rgba(124,92,255,.3); } .upgrade-card__price-btn--primary:hover { background: linear-gradient(135deg, rgba(124,92,255,1), rgba(47,230,255,.95)); box-shadow: 0 6px 20px rgba(124,92,255,.4); border-color: rgba(124,92,255,.6); } .upgrade-card__price-btn--primary:active { box-shadow: 0 2px 8px rgba(124,92,255,.3); } .upgrade-card__price-btn--current { background: linear-gradient(180deg, rgba(124,92,255,.2), rgba(124,92,255,.15)); border-color: rgba(124,92,255,.4); color: rgba(255,255,255,.85); cursor: not-allowed; opacity: 0.8; } .upgrade-card__price-btn--current:hover { transform: none; border-color: rgba(124,92,255,.4); box-shadow: none; } .upgrade-card--current { border-color: rgba(124,92,255,.3); background: linear-gradient(135deg, rgba(12,14,22,.95), rgba(12,14,22,.92)); } .upgrade-card__price-amount { display: block; font-size: 18px; font-weight: 700; letter-spacing: -0.02em; } .upgrade-card__price-save { display: block; font-size: 11px; opacity: 0.85; margin-top: 2px; font-weight: 500; } @media (max-width: 720px) { .upgrade-card__pricing { grid-template-columns: 1fr; } .upgrade-card { padding: 24px; } .upgrade-header h3 { font-size: 24px; } } /* Subscription Plan Details */ .subscription-plan-card { background: linear-gradient(135deg, rgba(12,14,22,.88), rgba(12,14,22,.85)); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius2); padding: 24px; margin-bottom: 24px; backdrop-filter: blur(8px) saturate(1.35); -webkit-backdrop-filter: blur(8px) saturate(1.35); } .subscription-plan-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; } .subscription-plan-title { font-size: 24px; font-weight: 750; letter-spacing: -0.02em; margin: 0 0 8px 0; color: rgba(255,255,255,.95); } .subscription-plan-price { font-size: 18px; font-weight: 600; color: rgba(124,92,255,.9); margin-top: 4px; } .subscription-plan-badge { display: inline-block; padding: 6px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; background: linear-gradient(135deg, rgba(47,230,255,.25), rgba(124,92,255,.2)); color: rgba(255,255,255,.95); border: 1px solid rgba(47,230,255,.4); } .subscription-plan-details { padding-top: 16px; border-top: 1px solid rgba(255,255,255,.1); } .subscription-plan-detail-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .subscription-plan-detail-label { color: rgba(255,255,255,.7); font-size: 14px; } .subscription-plan-detail-value { color: rgba(255,255,255,.9); font-weight: 600; font-size: 14px; } .subscription-expired { color: rgba(255,107,107,.9); } .subscription-actions { margin-top: 24px; } .subscription-actions-grid { display: grid; gap: 12px; grid-template-columns: 1fr; } @media (min-width: 480px) { .subscription-actions-grid { grid-template-columns: 1fr 1fr; } } .btn--primary { background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(47,230,255,.85)); border-color: rgba(124,92,255,.5); color: rgba(255,255,255,.98); box-shadow: 0 4px 16px rgba(124,92,255,.3); } .btn--primary:hover { background: linear-gradient(135deg, rgba(124,92,255,1), rgba(47,230,255,.95)); box-shadow: 0 6px 20px rgba(124,92,255,.4); border-color: rgba(124,92,255,.6); } .btn--danger { background: linear-gradient(135deg, rgba(255,107,107,.2), rgba(255,77,77,.15)); border-color: rgba(255,107,107,.4); color: rgba(255,107,107,.95); } .btn--danger:hover { background: linear-gradient(135deg, rgba(255,107,107,.3), rgba(255,77,77,.25)); border-color: rgba(255,107,107,.6); color: rgba(255,107,107,1); } /* Generation Loading Overlay */ .generation-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(12,14,22,.98), rgba(12,14,22,.95)); backdrop-filter: blur(20px) saturate(1.5); -webkit-backdrop-filter: blur(20px) saturate(1.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 0.3s var(--ease), visibility 0.3s var(--ease); } .generation-overlay[aria-hidden="false"] { opacity: 1; visibility: visible; } .generation-overlay__content { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 24px; } /* Spinner Animation */ .generation-spinner { position: relative; width: 80px; height: 80px; } .generation-spinner__ring { position: absolute; width: 100%; height: 100%; border: 3px solid transparent; border-top-color: rgba(124,92,255,.8); border-radius: 50%; animation: generation-spin 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; } .generation-spinner__ring:nth-child(1) { animation-delay: 0s; border-top-color: rgba(124,92,255,.8); } .generation-spinner__ring:nth-child(2) { animation-delay: -0.4s; border-top-color: rgba(47,230,255,.7); width: 70%; height: 70%; top: 15%; left: 15%; } .generation-spinner__ring:nth-child(3) { animation-delay: -0.8s; border-top-color: rgba(124,92,255,.5); width: 50%; height: 50%; top: 25%; left: 25%; } @keyframes generation-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Status Text */ .generation-status { display: flex; flex-direction: column; gap: 8px; } .generation-status__title { font-size: 20px; font-weight: 700; color: rgba(255,255,255,.95); letter-spacing: -0.02em; } .generation-status__subtitle { font-size: 14px; color: rgba(255,255,255,.6); font-weight: 500; } /* Pulse animation for status text */ .generation-status__title { animation: generation-pulse 2s ease-in-out infinite; } @keyframes generation-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } } @media (max-width: 720px) { .generation-spinner { width: 60px; height: 60px; } .generation-status__title { font-size: 18px; } .generation-status__subtitle { font-size: 13px; } } /* Templates Library Styles */ .templates-filters { display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); } .template-filter-btn { padding: 8px 16px; border-radius: 20px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s var(--ease); font-family: inherit; } .template-filter-btn:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: rgba(255,255,255,.9); } .template-filter-btn--active { background: linear-gradient(135deg, rgba(124,92,255,.2), rgba(47,230,255,.15)); border-color: rgba(124,92,255,.4); color: rgba(255,255,255,.95); } .templates-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; } .template-card { background: linear-gradient(135deg, rgba(12,14,22,.88), rgba(12,14,22,.85)); border: 1px solid rgba(255,255,255,.14); border-radius: 12px; overflow: hidden; transition: all 0.3s var(--ease); display: flex; flex-direction: column; position: relative; } .template-card:hover { transform: translateY(-4px); border-color: rgba(124,92,255,.3); box-shadow: 0 8px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(124,92,255,.1); } .template-card--featured { border-color: rgba(124,92,255,.3); background: linear-gradient(135deg, rgba(12,14,22,.92), rgba(12,14,22,.88)); } .template-card__badge { position: absolute; top: 12px; right: 12px; padding: 4px 12px; background: linear-gradient(135deg, rgba(124,92,255,.9), rgba(47,230,255,.85)); color: rgba(255,255,255,.98); font-size: 11px; font-weight: 700; border-radius: 12px; z-index: 10; text-transform: uppercase; letter-spacing: 0.5px; } .template-card__thumbnail { width: 100%; height: 160px; background: rgba(255,255,255,.05); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .template-card__thumbnail img { width: 100%; height: 100%; object-fit: cover; } .template-card__placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; font-weight: 700; color: rgba(255,255,255,.2); background: linear-gradient(135deg, rgba(124,92,255,.1), rgba(47,230,255,.1)); } .template-card__content { padding: 16px; flex: 1; display: flex; flex-direction: column; } .template-card__title { font-size: 16px; font-weight: 700; color: rgba(255,255,255,.95); margin-bottom: 8px; letter-spacing: -0.01em; } .template-card__description { font-size: 13px; color: rgba(255,255,255,.65); line-height: 1.5; margin-bottom: 12px; flex: 1; } .template-card__meta { display: flex; gap: 12px; align-items: center; font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 12px; } .template-card__category { padding: 4px 10px; background: rgba(124,92,255,.15); border-radius: 8px; color: rgba(255,255,255,.8); font-weight: 500; text-transform: capitalize; } .template-card__usage { color: rgba(255,255,255,.5); } .template-card__button { width: 100%; padding: 10px 16px; border-radius: 8px; border: 1px solid rgba(124,92,255,.3); background: linear-gradient(135deg, rgba(124,92,255,.2), rgba(47,230,255,.15)); color: rgba(255,255,255,.95); font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s var(--ease); font-family: inherit; } .template-card__button:hover { background: linear-gradient(135deg, rgba(124,92,255,.3), rgba(47,230,255,.25)); border-color: rgba(124,92,255,.5); transform: scale(1.02); } .template-card__button:active { transform: scale(0.98); } @media (max-width: 720px) { .templates-grid { grid-template-columns: 1fr; } .templates-filters { gap: 6px; } .template-filter-btn { padding: 6px 12px; font-size: 13px; } .template-card__thumbnail { height: 140px; } } /* Presentation Mode Styles */ .presentation-mode { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; background: #000; display: none; overflow: hidden; } .presentation-mode[aria-hidden="false"] { display: block; } body.presentation-mode-active { overflow: hidden; } .presentation-mode__overlay { width: 100%; height: 100%; display: flex; position: relative; } /* Audience View - Main Slide */ .presentation-mode__slide-container { flex: 1; display: flex; align-items: center; justify-content: center; padding: 0; background: #000; position: relative; overflow: hidden; } /* Subtle background gradient - very minimal */ .presentation-mode__slide-container::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, rgba(12,14,22,.3) 0%, transparent 70%); pointer-events: none; z-index: 0; } .presentation-mode__slide { width: 100%; height: 100%; max-width: 100%; max-height: 100%; background: linear-gradient(180deg, rgba(12,14,22,.95), rgba(12,14,22,.92)); border: none; border-radius: 0; padding: clamp(40px, 5vw, 80px); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; overflow-y: auto; display: flex; flex-direction: column; position: relative; z-index: 1; animation: slideFadeIn 0.4s ease-out; } @keyframes slideFadeIn { from { opacity: 0; transform: scale(0.98); } to { opacity: 1; transform: scale(1); } } .presentation-mode__slide > * { flex-shrink: 0; } /* Enhanced slide content styling for presentation mode */ .presentation-mode__slide .slide__content { background: transparent; border: none; box-shadow: none; backdrop-filter: none; padding: 0; max-width: 1400px; margin: 0 auto; width: 100%; } .presentation-mode__slide .slide__chrome { display: none; /* Hide slide chrome in presentation mode for cleaner look */ } .presentation-mode__slide h1 { font-size: clamp(48px, 6vw, 72px); margin-bottom: 32px; } .presentation-mode__slide h2 { font-size: clamp(36px, 4.5vw, 56px); margin-bottom: 28px; } .presentation-mode__slide .lead { font-size: clamp(22px, 2.5vw, 28px); margin-bottom: 32px; } .presentation-mode__slide p { font-size: clamp(18px, 2vw, 22px); line-height: 1.8; margin-bottom: 20px; } .presentation-mode__slide li { font-size: clamp(18px, 2vw, 22px); line-height: 1.8; margin: 16px 0; } .presentation-mode__slide .metric__num { font-size: clamp(36px, 4vw, 48px); } .presentation-mode__slide .metric__label { font-size: clamp(14px, 1.5vw, 18px); } /* Chart container styling in presentation mode */ .presentation-mode__slide .chart-container { margin: 32px 0; padding: 24px; min-height: 400px; width: 100%; } .presentation-mode__slide .chart-container canvas { max-height: 500px; width: 100% !important; height: auto !important; } /* Chart container in presenter view previews */ .presentation-mode__slide-preview .chart-container { margin: 12px 0; padding: 12px; min-height: 150px; } .presentation-mode__slide-preview .chart-container canvas { max-height: 120px; } /* Presenter View - Side Panel */ .presentation-mode__presenter-view { width: 400px; background: rgba(7,10,18,.98); border-left: 1px solid rgba(255,255,255,.1); display: flex; flex-direction: column; padding: 20px; overflow-y: auto; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, width 0.3s cubic-bezier(0.4, 0, 0.2, 1), min-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); transform: translateX(0); opacity: 1; flex-shrink: 0; } .presentation-mode__presenter-view.presenter-view--hidden { transform: translateX(100%); opacity: 0; pointer-events: none; width: 0; min-width: 0; padding: 0; border: none; overflow: hidden; } .presentation-mode__slide-container { flex: 1; transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1); min-width: 0; } .presentation-mode__slide-container.slide-container--full-width { width: 100%; max-width: 100%; flex: 1 1 100%; } .presentation-mode__presenter-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid rgba(255,255,255,.1); gap: 12px; } .presentation-mode__header-actions { display: flex; gap: 8px; align-items: center; } .presentation-mode__timer, .presentation-mode__clock { font-size: 18px; font-weight: 600; color: rgba(255,255,255,.9); font-family: 'SF Mono', 'Monaco', monospace; letter-spacing: 0.05em; } .presentation-mode__timer { color: rgba(47,230,255,.9); } .presentation-mode__clock { color: rgba(255,255,255,.7); } .presentation-mode__toggle-panel { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.9); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: all 0.2s var(--ease); font-weight: 600; } .presentation-mode__toggle-panel:hover { background: rgba(47,230,255,.2); border-color: rgba(47,230,255,.4); transform: scale(1.05); } .presentation-mode__exit { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.9); width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; transition: all 0.2s var(--ease); } .presentation-mode__exit:hover { background: rgba(255,77,160,.2); border-color: rgba(255,77,160,.4); transform: scale(1.05); } .presentation-mode__presenter-content { flex: 1; display: flex; flex-direction: column; gap: 20px; } .presentation-mode__current-slide, .presentation-mode__next-slide { background: rgba(12,14,22,.6); border: 1px solid rgba(255,255,255,.1); border-radius: var(--radius2); padding: 12px; overflow: hidden; } .presentation-mode__next-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,.5); margin-bottom: 8px; font-weight: 600; } .presentation-mode__slide-preview { background: rgba(12,14,22,.4); border-radius: 8px; padding: 16px; max-height: 200px; overflow-y: auto; font-size: 12px; line-height: 1.5; color: rgba(255,255,255,.8); } .presentation-mode__slide-preview h1, .presentation-mode__slide-preview h2, .presentation-mode__slide-preview h3 { font-size: 14px; margin-bottom: 8px; } .presentation-mode__slide-preview p { font-size: 11px; margin-bottom: 6px; } .presentation-mode__slide-preview ul, .presentation-mode__slide-preview ol { font-size: 11px; padding-left: 16px; margin-bottom: 8px; } .presentation-mode__notes { background: rgba(47,230,255,.08); border: 1px solid rgba(47,230,255,.2); border-radius: var(--radius2); padding: 16px; flex: 1; min-height: 150px; display: flex; flex-direction: column; } .presentation-mode__notes-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(47,230,255,.8); margin-bottom: 12px; font-weight: 600; } .presentation-mode__notes-content { flex: 1; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.85); white-space: pre-wrap; overflow-y: auto; } .presentation-mode__counter { text-align: center; font-size: 14px; font-weight: 600; color: rgba(255,255,255,.7); padding: 12px; background: rgba(255,255,255,.05); border-radius: var(--radius2); } /* Audience View Controls (minimal) */ .presentation-mode__audience-controls { position: fixed; bottom: 24px; right: 24px; background: rgba(0,0,0,.4); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 8px; padding: 6px 12px; border: none; z-index: 10001; opacity: 0.6; transition: opacity 0.3s ease; } .presentation-mode__audience-controls:hover { opacity: 1; } .presentation-mode__audience-counter { font-size: 11px; font-weight: 500; color: rgba(255,255,255,.7); font-family: 'SF Mono', 'Monaco', monospace; letter-spacing: 0.5px; } /* Floating toggle button (shown when panel is hidden) */ .presentation-mode__floating-toggle { position: fixed; top: 50%; right: 20px; transform: translateY(-50%); background: rgba(47,230,255,.2); border: 1px solid rgba(47,230,255,.4); color: rgba(255,255,255,.9); width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; font-weight: 600; transition: all 0.3s var(--ease); z-index: 10002; box-shadow: 0 4px 16px rgba(47,230,255,.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .presentation-mode__floating-toggle:hover { background: rgba(47,230,255,.35); border-color: rgba(47,230,255,.6); transform: translateY(-50%) scale(1.1); box-shadow: 0 6px 20px rgba(47,230,255,.4); } .presentation-mode__floating-toggle:active { transform: translateY(-50%) scale(0.95); } /* Hide presenter view on smaller screens (mobile) */ @media (max-width: 1024px) { .presentation-mode__presenter-view { display: none; } } /* Responsive adjustments for audience view */ @media (max-width: 768px) { .presentation-mode__slide { padding: clamp(24px, 4vw, 40px); } .presentation-mode__audience-controls { bottom: 16px; right: 16px; padding: 5px 10px; } .presentation-mode__audience-counter { font-size: 10px; } } /* Fullscreen adjustments */ :fullscreen .presentation-mode__overlay, :-webkit-full-screen .presentation-mode__overlay, :-moz-full-screen .presentation-mode__overlay, :-ms-fullscreen .presentation-mode__overlay { width: 100vw; height: 100vh; } /* Image Search Panel */ .image-panel { position: fixed; left: 0; top: 0; bottom: 0; width: 320px; background: linear-gradient(180deg, rgba(12,14,22,.98), rgba(12,14,22,.95)); border-right: 1px solid rgba(255,255,255,.14); box-shadow: 4px 0 24px rgba(0,0,0,.4); backdrop-filter: blur(12px) saturate(1.5); -webkit-backdrop-filter: blur(12px) saturate(1.5); z-index: 60; display: flex; flex-direction: column; transform: translateX(-100%); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .image-panel[aria-hidden="false"] { transform: translateX(0); } .image-panel__header { display: flex; justify-content: space-between; align-items: center; padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } .image-panel__title { font-size: 18px; font-weight: 700; letter-spacing: -0.02em; margin: 0; color: rgba(255,255,255,.95); } .image-panel__close { appearance: none; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); border-radius: 8px; width: 32px; height: 32px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; transition: all 0.2s var(--ease); } .image-panel__close:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.2); } .image-panel__search { padding: 16px; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; gap: 8px; flex-shrink: 0; } .image-panel__search-input { flex: 1; padding: 10px 14px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.95); border-radius: 8px; font-size: 14px; font-family: inherit; outline: none; transition: all 0.2s var(--ease); } .image-panel__search-input::placeholder { color: rgba(255,255,255,.5); } .image-panel__search-input:focus { border-color: rgba(124,92,255,.5); background: rgba(255,255,255,.12); box-shadow: 0 0 0 3px rgba(124,92,255,.15); } .image-panel__search-btn { padding: 10px 16px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.08)); color: rgba(255,255,255,.92); border-radius: 8px; font-weight: 600; font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease); white-space: nowrap; } .image-panel__search-btn:hover { border-color: rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.12)); } .image-panel__grid { flex: 1; min-height: 0; /* critical for overflow scrolling inside flex column */ overflow-y: auto; overflow-x: hidden; padding: 16px; display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; -webkit-overflow-scrolling: touch; } .image-panel__item { position: relative; flex: 0 0 calc(50% - 4px); /* 2 columns with 8px gap */ aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: rgba(0,0,0,.2); cursor: grab; transition: all 0.2s var(--ease); } .image-panel__item:hover { border-color: rgba(124,92,255,.4); transform: scale(1.02); box-shadow: 0 4px 12px rgba(0,0,0,.3); } .image-panel__item:active { cursor: grabbing; transform: scale(0.98); } .image-panel__item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .image-panel__item.dragging { opacity: 0.5; cursor: grabbing; } .image-panel__loading, .image-panel__empty { padding: 40px 16px; text-align: center; color: rgba(255,255,255,.7); flex-shrink: 0; } .image-panel__loading p, .image-panel__empty p { margin-top: 16px; font-size: 14px; } .image-panel__footer{ padding: 12px 16px; border-top: 1px solid rgba(255,255,255,.1); flex-shrink: 0; } .image-panel__loadmore{ width: 100%; padding: 10px 16px; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); color: rgba(255,255,255,.92); border-radius: 10px; font-weight: 650; font-size: 14px; cursor: pointer; transition: all 0.2s var(--ease); } .image-panel__loadmore:hover{ border-color: rgba(255,255,255,.22); background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.10)); } .image-panel__loadmore:disabled{ opacity: .6; cursor: not-allowed; } .image-panel-toggle { position: fixed; left: 12px; top: 50%; transform: translateY(-50%); z-index: 55; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255,255,255,.16); background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)); color: rgba(255,255,255,.92); font-size: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,.3); transition: all 0.3s var(--ease); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .image-panel-toggle::before { content: ""; width: 12px; height: 12px; border-right: 2px solid #000; border-bottom: 2px solid #000; transform: rotate(-45deg); transition: transform 0.3s var(--ease); } .image-panel[aria-hidden="false"] ~ .image-panel-toggle::before { transform: rotate(135deg); } .image-panel-toggle:hover { transform: translateY(-50%) scale(1.1); border-color: rgba(124,92,255,.4); box-shadow: 0 6px 20px rgba(124,92,255,.3); } .image-panel-toggle:active { transform: translateY(-50%) scale(0.95); } .image-panel[aria-hidden="false"] ~ .image-panel-toggle { left: 332px; } /* Drop zone styling for slides */ .slide__media.drag-over { border: 2px dashed rgba(124,92,255,.6); background: rgba(124,92,255,.1); } .slide__media.drag-over img { opacity: 0.7; } .slide__content.drag-over { border: 2px dashed rgba(124,92,255,.6); background: rgba(124,92,255,.1); position: relative; } .slide__content.drag-over::after { content: "Drop image here"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 18px; font-weight: 600; color: rgba(124,92,255,.9); pointer-events: none; z-index: 10; } /* Adjust deck layout when panel is open */ body.image-panel-open .deck { margin-left: 320px; transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Hide panel on mobile */ @media (max-width: 1024px) { .image-panel { width: 100%; max-width: 320px; } body.image-panel-open .deck { margin-left: 0; } .image-panel-toggle { display: none; } } @media (max-width: 720px) { .image-panel { display: none; } .image-panel-toggle { display: none; } }