:root { /* Brand */ --color-lime-500: #CAFC00; --color-lime-400: #D4FF33; --color-lime-600: #A8D600; --color-lime-950: #1A2100; /* Neutrals — dark mode is the default */ --color-gray-950: #0C0C0E; --color-gray-900: #141416; --color-gray-850: #1A1A1E; --color-gray-800: #222226; --color-gray-700: #2E2E34; --color-gray-600: #3E3E46; --color-gray-500: #5C5C66; --color-gray-400: #8E8E99; --color-gray-300: #ABABB3; --color-gray-200: #D1D1D6; --color-gray-100: #EDEDF0; --color-gray-50: #F5F5F7; /* Semantic */ --color-success: #34D399; --color-warning: #FBBF24; --color-error: #F87171; --color-info: #60A5FA; /* Surfaces */ --bg-base: var(--color-gray-950); --bg-surface: var(--color-gray-850); --bg-elevated: var(--color-gray-800); --bg-canvas: var(--color-gray-900); --bg-input: var(--color-gray-800); --bg-hover: var(--color-gray-700); /* Borders */ --border-subtle: rgba(255, 255, 255, 0.06); --border-default: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.16); --border-accent: rgba(255, 255, 255, 0.30); /* Typography */ --text-2xs: 0.625rem; --text-xs: 0.6875rem; --text-sm: 0.8125rem; --text-base: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.5rem; --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.06em; /* Legacy compat */ --background: 12, 12, 14; --primary: 237, 237, 240; --secondary: 0, 0, 0; --panel: 26, 26, 30; --panel-active: 46, 46, 48; --panel-dim: 20, 20, 22; --modal: 34, 34, 38; --success: var(--color-success); --dropzone-1-ratio: 1 / 1; --dropzone-2-ratio: 1 / 1; --mockup-shadow: 0, 0, 0, 0.99; } /* Inter Variable — loaded from Google Fonts in HTML */ /* JetBrains Mono — loaded from Google Fonts in HTML */ /* Keep EuclidCircularA as fallback for elements that haven't been updated */ @font-face { font-family: "EuclidCircularA"; src: url("fonts/EuclidCircularA-Regular-WebXL.woff") format("woff"), url("fonts/EuclidCircularA-Regular-WebXL.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "EuclidCircularA"; src: url("fonts/EuclidCircularA-Medium-WebXL.woff") format("woff"), url("fonts/EuclidCircularA-Medium-WebXL.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } html { font-family: "Inter", "EuclidCircularA", ui-sans-serif, system-ui, sans-serif; font-weight: 400; font-size: var(--text-base); letter-spacing: var(--tracking-tight); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg-base); color: var(--color-gray-100); line-height: var(--leading-normal); position: fixed !important; left: 0; } /* Monospace for numeric values */ .font-mono, .numeric-value, #output-resolution, #file-size { font-family: "JetBrains Mono", ui-monospace, monospace; font-variant-numeric: tabular-nums; } input[type="file"] { display: none; } [class*="icon-"] { display: block; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background-color: currentColor; background-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: var(--svg); mask-image: var(--svg); } .btn:active:hover, .btn:active:focus { transform: scale(1.0) !important; } a, button { transition: all 250ms ease; } .icon-dnd { background-image: url("img/tabler-icon-click.svg"); background-color: #ffffff; background-size: contain; } .icon-brand-one { background-image: url("img/tabler-icon-photo-filled.svg"); background-color: transparent; background-size: contain; } .icon-x { background-image: url("img/tabler-icon-x.svg"); background-color: transparent; background-size: contain; } .icon-cw { background-image: url("img/Craftwork-Logo.svg"); background-color: transparent; background-size: contain; } .icon-download { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 24' fill='none'%3E%3Cpath d='M4.5 20H20.5M12.5 14V4M12.5 14L16.5 10M12.5 14L8.5 10' stroke='%231A2100' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-color: transparent; background-size: contain; } .icon-dropdown { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M8.50008 10L11.1667 7.33337H5.83341L8.50008 10Z' fill='%231A2100' stroke='%231A2100' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-color: transparent; background-size: contain; } /* Legacy header dropdown styles removed — header redesigned */ /* Loader */ #preloader { background-color: var(--bg-base); height: 100%; width: 100%; position: fixed; margin-top: 0; top: 0; z-index: 999; transition: opacity 0.5s ease; } #preloader-segment-item-1, #preloader-bg-item-1, #preloader-segment-item-2 { background-color: var(--bg-elevated, var(--bg-base)); height: 100%; width: 100%; position: absolute; margin-top: 0; top: 0; z-index: 999; transition: opacity 0.3s ease, visibility 0.3s ease; } #loading-center, #loading-center-segment-item-1, #loading-center-bg-item-1, #loading-center-segment-item-2 { width: 100%; height: 100%; position: relative; display: flex; align-items: center; justify-content: center; } /* Presenta text loader */ .presenta-loader { display: flex; align-items: center; gap: 0; user-select: none; } .presenta-letter { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; font-size: 48px; letter-spacing: 0.02em; color: var(--color-gray-50); display: inline-block; opacity: 0; filter: blur(12px); transform: translateY(20px); animation: presenta-letter-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards, presenta-letter-glow 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * 0.07s), calc(0.8s + var(--i) * 0.07s); } @keyframes presenta-letter-in { 0% { opacity: 0; filter: blur(12px); transform: translateY(20px); } 100% { opacity: 1; filter: blur(0px); transform: translateY(0); } } @keyframes presenta-letter-glow { 0%, 100% { opacity: 0.4; } 50% { opacity: 1; } } /* Legacy loader kept for segment/bg preloaders */ .loader { position: relative; width: 42px; height: 42px; margin: 75px; display: inline-block; vertical-align: middle; background-image: url("Logo-1200_.png"); background-size: contain; animation: loader-outter .75s cubic-bezier(.42, .61, .58, .41) infinite; } @keyframes loader-outter { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } /* Export block — now on the aspect-4/3 wrapper (contains overflow-hidden) */ #exportBlock { cursor: grab; } #exportBlock:active { cursor: grabbing; } /* Visual feedback when dragging files over canvas */ #exportBlock.canvas-dragover { outline: 2px dashed rgba(202, 252, 0, 0.5); outline-offset: -2px; } /* 3D Transform transitions — opt-in via .transform-animate, added briefly by the 3D preset buttons. Off by default so the Size/Position sliders, wheel zoom and direct drag get instant visual response (slider value was visibly racing ahead of the picture by the full 0.4s easing). */ .mockup-module.transform-animate.screenshot .layouts, .mockup-module.transform-animate:not(.screenshot) { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); } /* Transform preset active button */ .transform-preset-btn.transform-preset-active { font-weight: 500; background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.30) !important; color: var(--color-gray-100) !important; } /* Sidebar */ .tooltip.show, .dropdown.open { z-index: 999; } .panel .panel-scroll-view { width: 100%; flex: 1; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: var(--color-gray-700) transparent; padding-bottom: 20px; } .panel .panel-scroll-view > * { max-width: 100%; min-width: 0; } .panel .panel-scroll-view::-webkit-scrollbar { width: 6px; display: block; } .range::-webkit-slider-runnable-track { height: 12px; } .range::-webkit-slider-thumb { width: 22px; height: 22px; background-color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; } .range::-webkit-slider-thumb:active, .range::-webkit-slider-thumb:hover { --tw-scale-x: 1; --tw-scale-y: 1; box-shadow: none; } .range::-moz-range-thumb { background-color: #fff !important; border-color: rgba(255, 255, 255, 0.5) !important; } [aria-disabled] .range.disabled, [aria-disabled] .range:disabled, [aria-disabled] .range[disabled] { opacity: 1; } /*.button-bg-color-wrap:before {*/ /* content: '';*/ /* position: absolute;*/ /* inset: 0;*/ /* border-radius: 8px;*/ /* background: linear-gradient(rgb(241, 241, 243), rgba(241, 241, 243, 0)), linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%) 0 0 / 1em 1em, linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%) 0.5em 0.5em / 1em 1em !important;*/ /*}*/ /* Ensure color-shadow-wrap doesn't clip dropdown */ .color-shadow-wrap { overflow: visible !important; } .color-background-wrap .picker_wrapper, .color-shadow-wrap .picker_wrapper { width: 100% !important; box-shadow: none; background: transparent; padding: 0 !important; } .color-background-wrap .picker_hue, .color-shadow-wrap .picker_hue { height: 12px; padding: 0 !important; margin: 15px 0 5px !important; box-shadow: none; border-radius: 999px; order: 2; } .color-background-wrap .picker_alpha, .color-shadow-wrap .picker_alpha { width: 12px; padding: 0 !important; margin: 0 0 0 10px !important; border-radius: 999px; box-shadow: none; } .color-background-wrap .picker_hue .picker_selector, .color-shadow-wrap .picker_hue .picker_selector { border-radius: 999px; padding: 0; height: 22px; width: 22px; top: 50%; border-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.10), 0 1px 1px rgba(0, 0, 0, 0.06); } .color-background-wrap .picker_alpha .picker_selector, .color-shadow-wrap .picker_alpha .picker_selector { left: 50%; border-color: #fff; } .color-background-wrap .picker_alpha .picker_selector, .color-shadow-wrap .picker_alpha .picker_selector, .color-background-wrap .picker_sl .picker_selector, .color-shadow-wrap .picker_sl .picker_selector { border-radius: 999px; padding: 0; height: 22px; width: 22px; border-color: #fff; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.10), 0 1px 1px rgba(0, 0, 0, 0.06); } .color-background-wrap .picker_sl, .color-shadow-wrap .picker_sl { margin: 0 !important; border-radius: 11px; box-shadow: none; } .color-background-wrap .picker_sl:before, .color-shadow-wrap .picker_sl:before { border: 1px solid rgba(0,0,0,.05); border-radius: 11px; } .color-background-wrap .picker_sample, .color-shadow-wrap .picker_sample, .color-background-wrap .picker_done, .color-shadow-wrap .picker_done { display: none; } .color-background-wrap .picker_editor, .color-shadow-wrap .picker_editor { order: 3 !important; margin: 10px 0 0 !important; width: 100% !important; height: 38px; display: flex; align-items: center; gap: 4px; } .color-background-wrap .picker_editor input, .color-shadow-wrap .picker_editor input { box-shadow: 0 0 0 1px rgba(0, 0, 0, .1) !important; border-radius: 11px; font-size: 14px !important; line-height: 24px !important; height: 100%; padding-left: 12px; padding-right: 12px; font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; flex: 1 0 0; } .color-background-wrap .picker_editor button, .color-shadow-wrap .picker_editor button { background-color: transparent; background-image: none; border: 0; box-shadow: none; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; } .color-background-wrap .picker_editor button:before, .color-shadow-wrap .picker_editor button:before { content: ''; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='icon icon-tabler icons-tabler-outline icon-tabler-color-picker'%3E%3Cpath stroke='none' d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M11 7l6 6' /%3E%3Cpath d='M4 16l11.7 -11.7a1 1 0 0 1 1.4 0l2.6 2.6a1 1 0 0 1 0 1.4l-11.7 11.7h-4v-4z' /%3E%3C/svg%3E"); background-size: cover; display: block; width: 24px; height: 24px; } .shadow-position-wrap .custom-option:has(:checked) span { background: var(--color-gray-100); border-color: var(--color-gray-100); } .shadow-position-wrap .custom-option:hover span { border-color: var(--border-strong); } .icon-filter { --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21.25 12H8.895M4.534 12H2.75M4.534 12C4.534 11.4218 4.76368 10.8673 5.17251 10.4585C5.58134 10.0497 6.13583 9.82001 6.714 9.82001C7.29217 9.82001 7.84666 10.0497 8.25549 10.4585C8.66432 10.8673 8.894 11.4218 8.894 12C8.894 12.5782 8.66432 13.1327 8.25549 13.5415C7.84666 13.9503 7.29217 14.18 6.714 14.18C6.13583 14.18 5.58134 13.9503 5.17251 13.5415C4.76368 13.1327 4.534 12.5782 4.534 12ZM21.25 18.607H15.502M15.502 18.607C15.502 19.1853 15.2718 19.7404 14.8628 20.1494C14.4539 20.5583 13.8993 20.788 13.321 20.788C12.7428 20.788 12.1883 20.5573 11.7795 20.1485C11.3707 19.7397 11.141 19.1852 11.141 18.607M15.502 18.607C15.502 18.0287 15.2718 17.4746 14.8628 17.0657C14.4539 16.6567 13.8993 16.427 13.321 16.427C12.7428 16.427 12.1883 16.6567 11.7795 17.0655C11.3707 17.4743 11.141 18.0288 11.141 18.607M11.141 18.607H2.75M21.25 5.39301H18.145M13.784 5.39301H2.75M13.784 5.39301C13.784 4.81484 14.0137 4.26035 14.4225 3.85152C14.8313 3.44269 15.3858 3.21301 15.964 3.21301C16.2503 3.21301 16.5338 3.2694 16.7983 3.37896C17.0627 3.48851 17.3031 3.64909 17.5055 3.85152C17.7079 4.05395 17.8685 4.29427 17.9781 4.55876C18.0876 4.82325 18.144 5.10673 18.144 5.39301C18.144 5.67929 18.0876 5.96277 17.9781 6.22726C17.8685 6.49175 17.7079 6.73207 17.5055 6.93451C17.3031 7.13694 17.0627 7.29751 16.7983 7.40707C16.5338 7.51663 16.2503 7.57301 15.964 7.57301C15.3858 7.57301 14.8313 7.34333 14.4225 6.93451C14.0137 6.52568 13.784 5.97118 13.784 5.39301Z' stroke='white' stroke-width='1.5' stroke-miterlimit='10' stroke-linecap='round'/%3E%3C/svg%3E"); } label.\!bg-cover { position: relative; } label.\!bg-cover:before { content: ''; position: absolute; inset: 0; border-radius: 12px; background: rgba(255,255,255,.3); opacity: 0; transition: opacity .2s; } label.\!bg-cover:hover:before { opacity: 1; } .mCSB_inside>.mCSB_container { margin-right: 15px; } .custom-label-option:hover, .custom-option:hover { box-shadow: none; border-color: var(--border-strong); } .custom-option:has(:checked):hover { --tw-border-opacity: 1; border-color: var(--fallback-p, oklch(var(--p) / var(--tw-border-opacity, 1))); --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-opacity: 1; --tw-ring-color: var(--fallback-p, oklch(var(--p) / var(--tw-ring-opacity, 1))); } /* /Sidebar */ .frame { will-change: aspect-ratio, font-size, width, height, flex-direction; overflow: hidden; position: relative; display: flex; container-type: size; container-name: frame-container; } .frame .frame-content { font-size: calc((100cqw + 100cqh) / 150); } /* Base layout for all modes — position + dimensions must always be set so that when a transform is applied (drag/zoom), the element still acts as a properly-sized containing block for absolutely-positioned children. */ .mockup-module { position: relative; height: 100%; width: 100%; pointer-events: none; margin: auto; z-index: 4; } .mockup-module.screenshot { --aspect-ratio: 1570 / 2932; --shadow-inset: 2% 4%; --shadow-radius: 6em; --drop-padding: 12.4% 12.5%; --drop-radius: 0; --x: 0em; --y: 0em; --b: 0em; --s: 1; will-change: contents; transform: translateZ(0); } .mockup-module.screenshot { --aspect-ratio: unset; --shadow-inset: 2%; --shadow-radius: 0.6em; --drop-padding: 0; --dropzone-1-ratio: unset; --dropzone-2-ratio: unset; --dropzone-3-ratio: unset; --border-radius: 2.5em; } .mockup-module.screenshot .layouts { aspect-ratio: var(--aspect-ratio); position: absolute; inset: 0; max-height: 100%; margin: auto; display: flex; justify-content: center; align-items: center; pointer-events: all; transform: translateZ(0); will-change: contents, transform, opacity; user-select: none; border: none !important; outline: none !important; } .mockup-module.screenshot .layouts .layouts-item { display: flex; justify-content: center; align-items: center; pointer-events: all; transform: translateZ(0); will-change: contents, transform, opacity; user-select: none; border: none !important; outline: none !important; } .mockup-module .item { transition: all .2s ease; border: none !important; outline: none !important; } .mockup-module.screenshot .item { position: relative; width: 100%; height: 100%; aspect-ratio: var(--aspect-ratio); container-type: size; container-name: item-container; } .mockup-module .item .item-container { width: 100%; height: 100%; min-width: 0; } .mockup-module.screenshot .layouts { /* aspect-ratio: 1.6 / 1; */ aspect-ratio: 1.8 / 1; } .mockup-module.screenshot .layouts.lay-2-items { aspect-ratio: 1 / 0.9; } .mockup-module.screenshot .layouts.lay-3-items { aspect-ratio: 1 / 0.85; } .devices .item .device-asset { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; transform: scale(var(--device-asset-scale)); z-index: 90; } .screenshot .lay-2-items .layouts-item { gap: 3%; } .screenshot .lay-3-items .layouts-item { gap: 1.5%; } .screenshot .item, .screenshot .devices { aspect-ratio: unset !important; width: 100%; height: 100%; max-height: 100%; max-width: 100%; } .screenshot .devices:first-child { position: relative; z-index: 1; } .screenshot.layout-preview.layout-1-1, .screenshot.layout-preview.layout-1-8, .screenshot.layout-preview.layout-1-2 { width: 33.333%; } .screenshot.layout-preview .item { border-radius: 5px; position: relative; z-index: 2; } /* Unified frosted-tile look for Images layout previews — matches .device-preview-cards */ .screenshot.layout-preview .item.bg-empty { background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.10); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.28); } /* Border-radius preview shapes (Sharp / Curved / Round) — same frosted-tile treatment */ .studio-sidebar .bg-empty.border-2.border-black { background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border-color: rgba(255, 255, 255, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 2px 4px rgba(0, 0, 0, 0.28); } /* Shadow preview shapes (None / Hug / Adaptive / Layered / Colored / Neon / Neu / Drop) — frosted-tile fill; existing shadow-* classes keep their own box-shadow demonstrations. */ .studio-sidebar label:has(> input[name="shadow"]) .bg-empty { background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%) !important; border: 1px solid rgba(255, 255, 255, 0.10); } .screenshot.layout-preview .devices { position: relative; z-index: 1; display: block; } .screenshot.layout-preview .devices:before { content: ''; position: absolute; width: 100%; height: 100%; border-radius: 3px; background: rgba(0, 0, 0, 0.05); filter: blur(32.8125px); top: 15%; left: 30%; } .screenshot.layout-preview.layout-1-8 .devices:before, .screenshot.layout-preview.layout-1-2 .devices:before { transform: scale(1.3); top: 30%; } .screenshot.layout-preview.layout-1-2 .devices:before { top: 0; } button .screenshot.layout-preview .item { border-radius: 3px; } .screenshot.layout-1-1 .devices:first-child .item { display: block; } .screenshot.layout-1-8 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, 15%) scale(1.3) rotateX(0deg) rotateY(0deg) rotateZ(0) skewX(0deg) skewY(0deg); } .screenshot.layout-1-2 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, -15%) scale(1.3) rotateX(0deg) rotateY(0deg) rotateZ(0) skewX(0deg) skewY(0deg); } .screenshot.layout-1-3 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, -2%) scale(0.95) rotateX(10deg) rotateY(20deg) rotateZ(-8deg) skewX(0deg) skewY(0deg); } .screenshot.layout-1-5 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, -5%) scale(0.95) rotateX(40deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); } .screenshot.layout-1-6 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, -5%) scale(0.95) rotateX(45deg) rotateY(0deg) rotateZ(-45deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-1 .devices:first-child .item, .screenshot.layout-2-1 .devices:nth-child(2) .item { display: block; } .screenshot.layout-2-5 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, -3%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-5 .devices:nth-child(2) .item { display: block; transform: perspective(400em) translate(0%, 3%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-6 .devices:first-child .item { display: block; transform: perspective(400em) translate(10%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(-10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-6 .devices:nth-child(2) .item { display: block; transform: perspective(400em) translate(-10%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-7 .devices:first-child .item { display: block; transform: perspective(400em) translate(10%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(-10deg) skewX(0deg) skewY(0deg); z-index: 1; } .screenshot.layout-2-7 .devices:nth-child(2) { position: relative; z-index: 2; } .screenshot.layout-2-7 .devices:nth-child(2) .item { display: block; transform: perspective(400em) translate(-10%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-11 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); z-index: 1; } .screenshot.layout-2-11 .devices:nth-child(2) .item { display: block; transform: perspective(400em) translate(0%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-2 .devices:first-child .item { display: block; transform: perspective(400em) rotate(-45deg) skew(15deg, 15deg) translate3d(-25%, 25%, 0) scale(0.9); } .screenshot.layout-2-2 .devices:nth-child(2) .item { display: block; transform: perspective(400em) rotate(-45deg) skew(15deg, 15deg) translate3d(25%, -25%, 0) scale(0.9); } .screenshot.layout-2-8 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(-10deg) skewX(0deg) skewY(0deg); z-index: 1; } .screenshot.layout-2-8 .devices:nth-child(2) .item { display: block; transform: perspective(400em) translate(0%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(-10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-9 .devices:first-child .item { display: block; transform: perspective(400em) rotate(45deg) skew(-15deg, -15deg) translate3d(-25%, -25%, 0) scale(0.9); } .screenshot.layout-2-9 .devices:nth-child(2) .item { display: block; transform: perspective(400em) rotate(45deg) skew(-15deg, -15deg) translate3d(25%, 25%, 0) scale(0.9); } .screenshot.layout-2-10 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-10 .devices:nth-child(2) .item { display: block; transform: perspective(400em) translate(0%, 0%) scale(0.85) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-12 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, 0%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-12 .devices:nth-child(2) .item { display: block; } .screenshot.layout-2-12 .devices:nth-child(3) .item { display: block; } .screenshot.layout-2-13 .devices:first-child .item { display: block; transform: perspective(400em) translate(0%, 8%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); z-index: 1; } .screenshot.layout-2-13 .devices:nth-child(2) .item { display: block; transform: perspective(400em) translate(8%, -8%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-13 .devices:nth-child(3) .item { display: block; transform: perspective(400em) translate(-5%, 20%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-14 .devices:first-child .item { display: block; transform: perspective(400em) translate(25%, 3%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(-10deg) skewX(0deg) skewY(0deg); } .screenshot.layout-2-14 .devices:nth-child(2) { position: relative; z-index: 3; } .screenshot.layout-2-14 .devices:nth-child(2) .item { display: block; } .screenshot.layout-2-14 .devices:nth-child(3) .item { display: block; transform: perspective(400em) translate(-25%, 3%) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(10deg) skewX(0deg) skewY(0deg); } .screenshot .item .item-container { width: unset; height: -moz-max-content; height: max-content; position: absolute; inset: 0; max-height: 100%; margin: auto; } .screenshot .devices:first-child .item .item-container, .screenshot .devices:nth-child(2) .item .item-container, .screenshot .devices:nth-child(3) .item .item-container { /* aspect-ratio: 393 / 852; */ aspect-ratio: 4 / 5; } .mockup-module .item .item-container { font-size: calc((100cqw + 100cqh) / 150); } .mockup-module .lay-2-items .item .item-container { font-size: calc((100cqw + 100cqh) / 70); } .mockup-module .item .drop-wrapper { height: 100%; width: 100%; padding: var(--drop-padding); transition: all .2s ease; overflow: hidden; border: none !important; outline: none !important; pointer-events: all; } .dropzone { position: relative; height: -moz-max-content; height: max-content; width: -moz-max-content; width: max-content; } .mockup-module .item .drop-wrapper .dropzone { height: 100%; width: 100%; border-radius: var(--border-radius); border: none !important; outline: none !important; pointer-events: all; } #mockupModule:not(.screenshot) .item .drop-wrapper .dropzone { overflow: hidden; } .dropzone .active-drop, .dropzone .empty-drop { position: absolute; inset: 0; } .dropzone .file-drop { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; } .mockup-module .item .drop-wrapper .dropzone .empty-drop { height: 100%; max-width: 100% !important; max-height: 100% !important; color: rgba(var(--panel-dim), 1); z-index: 1000; } .filepond--root { font-family: "EuclidCircularA", sans-serif; } .filepond--root .filepond--list-scroller { height: calc(100% - 1.5em); } .filepond--list.filepond--list { inset: 0; } .filepond--item { margin: .25em 1em; } .trans-200 { transition: all .2s ease; } .dropzone .empty-drop .content { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: inherit; } .dropzone .empty-drop .content .title { margin: .5em 0; font: 500 6em / 100% Inter, sans-serif; letter-spacing: -.02em; } .dropzone .empty-drop .content .formats { color: rgba(var(--panel-dim), .6); font: 500 3.5em / 100% Inter, sans-serif; letter-spacing: -.02em; } .dropzone .empty-drop .content .screen-info { margin-top: 1em; font: 600 3.5em / 100% Inter, sans-serif; letter-spacing: -.02em; padding: .32em .4em; border-radius: .5em; border: .1em solid rgba(var(--secondary), .36); } .dropzone .empty-drop .content.hovered { opacity: 0; visibility: hidden; } .dropzone .empty-drop .content svg { width: 8em; height: 8em; } .filepond--root { background-color: transparent; font-size: 0.85rem; } .lay-2-items .filepond--root { font-size: 100%; } .filepond--root .filepond--drop-label { min-height: auto; } #result, #result-2 { height: 100%; } #result canvas, #result img, #result-2 canvas, #result-2 img { max-width: 100%; max-height: 100%; } .dropzone canvas, .dropzone img { min-width: 100%; min-height: 100%; display: block; transition: all .1s ease; } .dropzone img.show-img { position: relative; z-index: 999; background-color: transparent; } .mockup-module .item .device { position: absolute; z-index: 1; width: 100%; pointer-events: none; } .filepond--root { height: 100%; margin-bottom: 0; } .filepond--panel-root, .filepond--drip { background-color: transparent; border: none; } .filepond--drop-label { top: 50%; transform: translateY(-50%) !important; bottom: auto; } .mockup-module .item .shadow-container { position: absolute; inset: 2%; z-index: -5; } .mockup-module .item .shadow-container .shadow-layer { will-change: transform, opacity, filter; position: absolute; inset: 3.5%; border-radius: inherit; pointer-events: none; } .devices .item .adaptive-shadow-layer { position: absolute; inset: 1%; z-index: -5; border-radius: 6em; } .devices .item .adaptive-shadow-layer>div { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; overflow: hidden; } .devices .item .adaptive-shadow-layer>div:first-child { z-index: 1; } /* Phase 4: Shadow preview classes */ .shadow-layered { box-shadow: 0 1px 1px rgba(0,0,0,0.05), 0 2px 2px rgba(0,0,0,0.05), 0 4px 4px rgba(0,0,0,0.05), 0 8px 8px rgba(0,0,0,0.05), 0 16px 16px rgba(0,0,0,0.05); } .shadow-colored { box-shadow: -5px 5px 20px rgba(99, 102, 241, 0.3), -2px 2px 8px rgba(99, 102, 241, 0.2); } .shadow-neon { box-shadow: 0 0 5px rgba(202, 252, 0, 0.5), 0 0 15px rgba(202, 252, 0, 0.3), 0 0 30px rgba(202, 252, 0, 0.15); } .shadow-neumorphism { box-shadow: 4px 4px 8px #bebebe, -4px -4px 8px #ffffff; } .shadow-drop-preview { filter: drop-shadow(-5px 5px 5px rgba(0, 0, 0, 0.15)); } /* Phase 4: Shadow compass */ .shadow-compass-grid { width: 80px; height: 80px; border-radius: 14px; background: var(--bg-elevated); border: 1px solid var(--border-default); display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); padding: 6px; margin: 0 auto; overflow: hidden; } .shadow-compass-grid label { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; border: none; background: transparent; } .shadow-compass-grid label span { width: 8px; height: 8px; border-radius: 50%; background: transparent; border: 1.5px solid var(--color-gray-600); transition: all 0.15s ease; } .shadow-compass-grid label:hover span { border-color: var(--color-gray-400); } .shadow-compass-grid label:has(:checked) span { background: var(--color-gray-100); border-color: var(--color-gray-100); width: 10px; height: 10px; box-shadow: 0 0 6px rgba(255, 255, 255, 0.2); } /* Phase 4: Slider wraps */ .blur-shadow-wrap, .spread-shadow-wrap { flex: 0 0 auto; width: 100%; max-width: 100%; min-width: 0; margin-bottom: 4px; box-sizing: border-box; } /* Allow vertical scrolling through noUiSlider areas in sidebar */ .panel-scroll-view .noUi-target, .panel-scroll-view .noUi-target * { touch-action: pan-y; } .panel-scroll-view .noUi-handle { touch-action: none; } /* ── Slider connect fill: neutral gray instead of brand green ── */ .slider-connect, .noUi-connect.bg-brand, .studio-sidebar .bg-brand.slider-connect { background-color: rgba(255,255,255,0.4) !important; } /* ── Pill Slider Redesign ── */ .panel-scroll-view .noUi-target { height: 24px !important; border-radius: 12px !important; background: var(--color-gray-800) !important; cursor: pointer; position: relative; } .panel-scroll-view .noUi-base { width: 100%; height: 100% !important; position: relative; z-index: 1; } .panel-scroll-view .noUi-origin { height: 100% !important; border-radius: 12px; } .panel-scroll-view .noUi-connects { height: 24px !important; border-radius: 12px !important; overflow: hidden; } .panel-scroll-view .noUi-connect { background: rgba(255,255,255,0.4) !important; height: 100% !important; } .panel-scroll-view .noUi-handle { width: 24px !important; height: 24px !important; background: transparent !important; border: none !important; border-radius: 0 !important; transform: translate(50%, -50%) !important; cursor: grab; box-shadow: none !important; outline: none; top: 50% !important; opacity: 0; } .panel-scroll-view .noUi-handle:active { cursor: grabbing; } .panel-scroll-view .noUi-handle::before, .panel-scroll-view .noUi-handle::after { display: none !important; } /* Wider touch zone so the invisible handle is easy to grab */ .panel-scroll-view .noUi-touch-area { width: 200% !important; height: 200% !important; transform: translate(-25%, -25%); } .panel-scroll-view .noUi-tooltip { display: none !important; } /* Inner value label */ .pill-slider-value { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; padding-left: 10px; font-size: 11px; font-weight: 500; color: var(--color-gray-200); pointer-events: none; z-index: 2; white-space: nowrap; line-height: 1; } /* Hide external value labels next to pill sliders */ .range-number-hidden { display: none !important; } /* Adjust wrapper height for pill sliders */ .panel-scroll-view .range-size-wrap, .panel-scroll-view .range-opacity-shadow-wrap { height: 24px !important; } /* Shadow slider row wrappers also need taller height */ .blur-shadow-wrap > div:has(.noUi-target), .spread-shadow-wrap > div:has(.noUi-target), .opacity-shadow-wrap > div:has(.noUi-target) { height: 24px !important; } span.glass-light { background: rgba(255, 255, 255, 0.6); } span.glass-dark { background: rgba(0, 0, 0, 0.3); } span.item-card { transform: translate3d(-6px, 8px, 0px) rotate(-2deg) scale(0.98); } .filepond--credits { display: none; } /* ── Depth of Field Overlay ── */ .dof-overlay { position: absolute; inset: 0; pointer-events: none; display: none; /* backdrop-filter, mask-image set via JS inline styles */ -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .dof-viewport-overlay { z-index: 25; } .dof-overlay.dof-active { display: block; } /* DOF mode tab buttons */ .dof-mode-btn.dof-mode-active { background: rgba(0, 0, 0, 0.05); color: #000; font-weight: 500; } /* DOF native range slider styling — dark sidebar */ .dof-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--color-gray-700); outline: none; cursor: pointer; margin: 0; } .dof-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.50); } .dof-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); } .dof-range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; cursor: pointer; border: 2px solid rgba(255, 255, 255, 0.50); } .dof-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-gray-700); } .screenshot .item .interface .screenshot-glass { position: absolute; inset: 0; margin: -5px; transform: translateZ(0); overflow: hidden; } .screenshot .lay-2-items .item .interface .screenshot-glass { margin: -.5em; } .screenshot .lay-3-items .item .interface .screenshot-glass { margin: -.9em; } .screenshot .item .interface .screenshot-glass.glass-light { background: hsla(0, 0%, 100%, .6); backdrop-filter: blur(4em) saturate(150%) contrast(150%) brightness(105%); -webkit-backdrop-filter: blur(4em) saturate(150%) contrast(150%) brightness(105%); } .screenshot .item .interface .screenshot-glass.glass-dark { background: rgba(0, 0, 0, .6); backdrop-filter: blur(6em) saturate(250%) contrast(150%) brightness(95%); -webkit-backdrop-filter: blur(6em) saturate(250%) contrast(150%) brightness(95%); } .screenshot .item .interface .screenshot-outline { position: absolute; inset: 0; margin: -8px; border: 2px solid hsla(0, 0%, 39%, .4); } .screenshot .lay-2-items .item .interface .screenshot-outline { margin: -.5em; border: .1em solid hsla(0, 0%, 39%, .4) } .screenshot .item .interface .screenshot-border { position: absolute; inset: 0; margin: -5px; background: #000; } .screenshot .lay-2-items .item .interface .screenshot-border { margin: -.5em; } .screenshot .lay-3-items .item .interface .screenshot-border { margin: -1em; } .screenshot .item .interface .screenshot-retro { position: absolute; inset: 0; margin: -5px; background: #000; } .screenshot .lay-2-items .item .interface .screenshot-retro { margin: -5px; } .screenshot .item .interface .screenshot-retro div { position: absolute; background: #000; z-index: -1; top: 8px; left: 8px; width: 100%; height: 100%; } .screenshot .lay-2-items .item .interface .screenshot-retro div { top: 8px; left: 8px; } .screenshot .item .interface .screenshot-card { position: absolute; inset: 0; overflow: hidden; background: #fff; transform: translate3d(-2.5em, 2em, 0) rotate(-1.5deg) scale(.98); z-index: -1; box-shadow: -1em 1em 4em rgba(0, 0, 0, .2); } .screenshot .item .interface .screenshot-card + div { box-shadow: -1em 1em 4em rgba(0, 0, 0, .2); } .screenshot .lay-2-items .item .interface .screenshot-card { transform: translate3d(-1.75em, 1.5em, 0) rotate(-1.5deg) scale(.98); } .screenshot .item .interface .screenshot-card .filepond--root:before { content: ""; position: absolute; inset: 0; background: hsla(0, 0%, 100%, .5); z-index: 1; } .screenshot .item .interface .screenshot-stack { position: absolute; inset: 0; box-shadow: 0 .5em .5em rgba(0, 0, 0, .2); } .screenshot .item .interface .screenshot-stack>div { position: absolute; overflow: hidden; height: 100%; background: #fff; border-radius: inherit; } .screenshot .item .interface .screenshot-stack>div:first-child { z-index: -1; inset: 15px; box-shadow: inherit; } .screenshot .item .interface .screenshot-stack>div:nth-child(2) { z-index: -2; inset: 30px; box-shadow: inherit; } .screenshot .item .interface .screenshot-stack-two { position: absolute; inset: 0; box-shadow: -1em 1em 4em rgba(0, 0, 0, .2); } .screenshot .item .interface .screenshot-stack-two>div { position: absolute; overflow: hidden; background: #fff; border-radius: inherit; inset: 0em; } .screenshot .item .interface .screenshot-stack-two>div:first-child { z-index: -1; box-shadow: inherit; transform: translate3d(-1.5em, -1.5em, 0) rotate(-1.5deg); } .screenshot .lay-2-items .item .interface .screenshot-stack-two>div:first-child { transform: translate3d(-1em, -1em, 0) rotate(-1.5deg); } .screenshot .lay-3-items .item .interface .screenshot-stack-two>div:first-child { transform: translate3d(-2em, -2em, 0) rotate(-1.5deg); } .screenshot .item .interface .screenshot-stack-two>div:nth-child(2) { z-index: -2; box-shadow: inherit; transform: translate3d(-3.5em, -4em, 0) rotate(-2.5deg) scale(.96); } .screenshot .lay-2-items .item .interface .screenshot-stack-two>div:nth-child(2) { transform: translate3d(-2.5em, -3em, 0) rotate(-2.5deg) scale(.96); } .screenshot .lay-3-items .item .interface .screenshot-stack-two>div:nth-child(2) { transform: translate3d(-4.5em, -5.5em, 0) rotate(-2.5deg) scale(.96); } .screenshot .item .interface .screenshot-card:before { content: ""; position: absolute; inset: 0; background: hsla(0, 0%, 100%, .5); z-index: 1; } .screenshot .item .interface .screenshot-card.screenshot-card:after, .screenshot .item .interface .screenshot-card~.drop-wrapper:after { content: ""; position: absolute; inset: 0; border: .1em solid rgba(0, 0, 0, .15); z-index: 1; border-radius: inherit; } .screenshot .item .interface .img-use { width: 100%; height: 100%; } .screenshot .item .interface .screenshot-card .img-use { transform: scale(1.5); filter: blur(5em); -webkit-filter: blur(5em); } .screenshot .item .interface .screenshot-stack>div .img-use { filter: blur(5em); -webkit-filter: blur(5em); } .screenshot .item .interface .screenshot-stack-two>div .img-use { transform: scale(1.5); filter: blur(5em); -webkit-filter: blur(5em); } .screenshot .item .interface .screenshot-stack-two>div:after, .screenshot .item .interface .screenshot-stack-two~.drop-wrapper:after { content: ""; position: absolute; inset: 0; border: .1em solid rgba(0, 0, 0, .15); z-index: 1; border-radius: inherit; } .screenshot .item .interface .screenshot-stack-two>div:before { content: ""; position: absolute; inset: 0; z-index: 1; } .screenshot .item .interface .screenshot-stack-two>div:first-child:before { background: hsla(0, 0%, 100%, .5); } .screenshot .item .interface .screenshot-stack-two>div:nth-child(2):before { background: hsla(0, 0%, 100%, .5); } .mockup-module .layouts .mockup-item-resize-handle { width: 100%; height: 120%; position: absolute; z-index: -1; } .mockup-module .layouts.lay-2-items .mockup-item-resize-handle { width: 140%; height: 100%; } .mockup-module .layouts .mockup-item-resize-handle .handle-area { width: 12em; aspect-ratio: 1 / 1; position: absolute; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.nw { top: 0; left: 0; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.ne { top: 0; right: 0; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.se { right: 0; bottom: 0; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.sw { left: 0; bottom: 0; } .mockup-module .layouts .mockup-item-resize-handle .handle { width: 20px; aspect-ratio: 1 / 1; position: absolute; border-bottom-right-radius: 20px; border-right: 4px solid #000; border-bottom: 4px solid #000; opacity: 0; visibility: hidden; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.nw .handle { top: 2.5em; left: 2.5em; transform: rotate(180deg); } .mockup-module .layouts .mockup-item-resize-handle .handle-area.ne .handle { top: 2.5em; right: 2.5em; transform: rotate(-90deg); } .mockup-module .layouts .mockup-item-resize-handle .handle-area.se .handle { right: 2.5em; bottom: 2.5em; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.sw .handle { left: 2.5em; bottom: 2.5em; transform: rotate(90deg); } .mockup-module .layouts .mockup-item-resize-handle .handle:after, .mockup-module .layouts .mockup-item-resize-handle .handle:before { content: ""; position: absolute; background: #000; height: 4px; width: 4px; border-radius: 10px; } .mockup-module .layouts .mockup-item-resize-handle .handle:before { top: -2px; right: -4px; } .mockup-module .layouts .mockup-item-resize-handle .handle:after { bottom: -4px; left: -2px; } .mockup-module .layouts .mockup-item-resize-handle .handle-area:hover .handle { visibility: visible; opacity: .5; } .mockup-module .layouts .mockup-item-resize-handle .handle:hover { opacity: 1 !important; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.nw, .mockup-module .layouts .mockup-item-resize-handle .handle-area.se { cursor: nwse-resize; } .mockup-module .layouts .mockup-item-resize-handle .handle-area.ne, .mockup-module .layouts .mockup-item-resize-handle .handle-area.sw { cursor: nesw-resize; } /* ═══════════════════════════════════════════════════════ */ /* Background Effects (Phase 3.4) */ /* ═══════════════════════════════════════════════════════ */ /* Noise / Grain overlay via canvas-generated texture */ .bg-effect-noise { background-repeat: repeat; background-size: 150px 150px; } /* Bokeh circles */ .bg-effect-bokeh .bokeh-circle { position: absolute; border-radius: 50%; opacity: 0.12; filter: blur(15px); } /* Blob shapes */ .bg-effect-blob .blob-shape { position: absolute; border-radius: 50%; opacity: 0.15; filter: blur(60px); } /* Effect button active state */ .bg-effect-btn.active { background-color: var(--bg-hover); border-color: rgba(255, 255, 255, 0.30); color: var(--color-gray-50); } /* Noise mode toggle buttons */ .noise-mode-btn.active { background-color: var(--bg-hover); border-color: rgba(255, 255, 255, 0.30); color: var(--color-gray-50); } /* Effect settings panels */ .effect-settings-panel { animation: effectPanelIn 0.15s ease-out; } @keyframes effectPanelIn { from { opacity: 0; } to { opacity: 1; } } /* Effect range sliders */ .effect-range { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 2px; background: var(--color-gray-700); outline: none; cursor: pointer; } .effect-range::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; background: #fff; border: 2px solid rgba(255, 255, 255, 0.50); border-radius: 50%; cursor: pointer; } .effect-range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12); } .effect-range::-moz-range-track { height: 4px; border-radius: 2px; background: var(--color-gray-700); } .effect-range::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 2px solid rgba(255, 255, 255, 0.50); border-radius: 50%; cursor: pointer; } /* Color preset button active state */ .color-preset-btn.active { outline: 2px solid rgba(255, 255, 255, 0.40); outline-offset: 1px; } @media only screen and (max-width: 1000px){ .adaptive-alert.hidden { display: flex; z-index: 9999; align-items: center; justify-content: center; padding: 15px; } .adaptive-alert:before { backdrop-filter: blur(10px); } } /* ========================================================================= PHASE 5: Drag & Drop Canvas Interaction ========================================================================= */ /* 5.1 Canvas drag cursor — only on the mockup, not whole canvas */ #exportBlock { touch-action: none; } #exportBlock .mockup-module { cursor: grab; } #exportBlock.dragging, #exportBlock.dragging .mockup-module { cursor: grabbing; } /* 5.2 Resize handles */ .resize-handles-container { position: absolute; inset: 0; z-index: 9999; pointer-events: none; } .resize-handle { position: absolute; width: 7px; height: 7px; background: rgba(255, 255, 255, 0.8); border: 1.5px solid rgba(0, 0, 0, 0.2); border-radius: 2px; pointer-events: all; z-index: 9999; opacity: 0; transition: opacity 0.15s ease, border-color 0.15s ease, transform 0.1s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); } .resize-handle:hover { border-color: rgba(0, 0, 0, 0.4); transform: scale(1.15); } .resize-handle:active { border-color: rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.6); } /* 5.3 Alignment guides `mix-blend-mode: difference` + white inverts whatever is underneath, so the line is always readable on top of any gradient / image / dark or light background — no need to sniff bg luminance. */ .alignment-guides-container { position: absolute; inset: 0; z-index: 9998; pointer-events: none; } .alignment-guide { position: absolute; pointer-events: none; background: #ffffff; mix-blend-mode: difference; opacity: 0; transition: opacity 120ms ease-out; } .alignment-guide.is-active { /* difference-blend already amplifies contrast against any bg, so we keep alpha low — the line should *suggest* the axis, not shout. */ opacity: 0.32; } .alignment-guide-h { left: 0; right: 0; top: 50%; height: 1px; transform: translateY(-0.5px) scaleX(0.6); transform-origin: 50% 50%; transition: opacity 120ms ease-out, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); } .alignment-guide-v { top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-0.5px) scaleY(0.6); transform-origin: 50% 50%; transition: opacity 120ms ease-out, transform 160ms cubic-bezier(0.2, 0.8, 0.2, 1); } .alignment-guide-h.is-active { transform: translateY(-0.5px) scaleX(1); } .alignment-guide-v.is-active { transform: translateX(-0.5px) scaleY(1); } /* Micro-animation: when a text element snaps into the center axis, give left/top a brief easing so the jump from "near" to "exactly 50%" reads as a magnetic pull rather than a teleport. Class is toggled on/off from the drag handler for ~90ms on snap entry only. */ .text-element.is-snapping { transition: left 90ms cubic-bezier(0.2, 0.8, 0.2, 1), top 90ms cubic-bezier(0.2, 0.8, 0.2, 1); } /* ======================================== PHASE 7: Dark Studio UI Redesign ======================================== */ /* 7.3 Header — compact 48px toolbar */ .studio-header { height: 48px; background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; position: relative; z-index: 100; } .studio-header .header-logo { display: flex; align-items: center; gap: 12px; } .studio-header .header-logo .logo-mark { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; background: rgba(202, 252, 0, 0.08); border: 1px solid rgba(202, 252, 0, 0.15); color: var(--color-lime-500); } .studio-header .header-logo .logo-mark svg { width: 20px; height: 20px; } .studio-header .header-logo .app-name { font-family: 'Instrument Serif', Georgia, serif; font-size: 22px; font-weight: 400; font-style: italic; color: var(--color-gray-50); letter-spacing: 0.01em; line-height: 1; } .studio-header .header-actions { display: flex; align-items: center; gap: 4px; } .studio-header .header-actions button, .studio-header .header-actions a { display: flex; align-items: center; justify-content: center; gap: 6px; height: 32px; padding: 0 10px; border-radius: 6px; font-size: var(--text-sm); color: var(--color-gray-400); background: transparent; border: none; cursor: pointer; transition: all 150ms ease; text-decoration: none; } .studio-header .header-actions button:hover, .studio-header .header-actions a:hover { background: var(--bg-hover); color: var(--color-gray-100); } .studio-header .header-actions .header-divider { width: 1px; height: 20px; background: var(--border-subtle); margin: 0 4px; } .studio-header .header-actions .header-ext-link { color: var(--color-gray-500); font-size: var(--text-xs); } .studio-header .header-actions .header-ext-link:hover { color: var(--color-gray-100); } .studio-header .header-actions .header-ext-favicon { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; filter: brightness(0) invert(1); opacity: 0.5; transition: opacity 150ms ease; } .studio-header .header-actions .header-ext-link:hover .header-ext-favicon { opacity: 0.85; } /* Inline SVG icon (Craftwork) — no filter, uses currentColor */ .studio-header .header-actions .header-promo-icon { width: 18px; height: 18px; flex-shrink: 0; display: block; overflow: visible; transition: opacity 150ms ease; } .studio-header .header-actions .header-ext-link:hover .header-promo-icon { opacity: 1; } /* Promo links — larger text like Shortcuts button */ .studio-header .header-actions .header-ext-link--promo { position: relative; font-size: var(--text-sm); color: var(--color-gray-400); } .studio-header .header-actions .header-ext-link--promo:hover { color: var(--color-gray-100); } /* Promo tooltip card */ .promo-tooltip { position: absolute; top: calc(100% + 8px); right: 0; transform: translateY(8px); width: 300px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease; z-index: 9999; overflow: hidden; } /* Invisible bridge so tooltip stays open when moving cursor to it */ .header-ext-link--promo::after { content: ''; position: absolute; top: 100%; left: -20px; right: -20px; height: 24px; opacity: 0; pointer-events: none; } .header-ext-link--promo:hover::after { pointer-events: auto; } .header-ext-link--promo:hover .promo-tooltip, .promo-tooltip:hover { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } /* Hover effect on tooltip card */ .promo-tooltip__preview { width: 100%; height: 158px; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .promo-tooltip__og { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms ease; } .promo-tooltip:hover .promo-tooltip__og { transform: scale(1.04); } .promo-tooltip__logo-svg { opacity: 0.85; filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2)); transition: transform 300ms ease, opacity 300ms ease; } .promo-tooltip:hover .promo-tooltip__logo-svg { transform: scale(1.1); opacity: 1; } /* Tooltip body content */ .promo-tooltip__body { padding: 12px 14px 14px; } .promo-tooltip__title { font-size: 13px; font-weight: 600; color: var(--color-gray-50); line-height: 1.3; margin-bottom: 4px; } .promo-tooltip__desc { font-size: 12px; font-weight: 400; color: var(--color-gray-400); line-height: 1.5; margin-bottom: 8px; } .promo-tooltip__url { font-size: 11px; font-weight: 500; color: var(--color-gray-500); display: flex; align-items: center; gap: 4px; } .promo-tooltip__url::before { content: ''; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: var(--color-lime-500); flex-shrink: 0; } /* "by Craftwork" label in header logo */ .studio-header .header-logo .logo-text { display: flex; flex-direction: row; align-items: baseline; gap: 6px; line-height: 1; } .studio-header .header-logo .app-by { font-size: 11px; font-weight: 400; color: var(--color-gray-500); letter-spacing: 0.02em; line-height: 1; opacity: 0.7; } .studio-header .header-logo .app-by a { color: inherit; text-decoration: none; transition: all 150ms ease; } .studio-header .header-logo .app-by a:hover { color: var(--color-gray-300); opacity: 1; } /* Header external link SVG icons */ .studio-header .header-actions .header-ext-icon { width: 14px; height: 14px; flex-shrink: 0; } /* 7.4 Sidebar — dark sidebar (keeping 350px for content compat) */ .studio-sidebar { min-width: 350px; max-width: 350px; background: var(--bg-surface); border-right: 1px solid var(--border-subtle); display: flex; flex-direction: column; height: 100%; z-index: 20; transition: min-width 300ms cubic-bezier(0.4, 0, 0.2, 1), max-width 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease, margin-left 300ms cubic-bezier(0.4, 0, 0.2, 1); } .studio-sidebar.collapsed { min-width: 0; max-width: 0; margin-left: -1px; opacity: 0; overflow: hidden; pointer-events: none; } /* Sidebar expand button (visible when sidebar collapsed) */ .sidebar-expand-btn { position: fixed; left: 12px; bottom: 12px; z-index: 50; width: 40px; height: 40px; border-radius: 10px; background: var(--bg-elevated); border: 1px solid var(--border-default); color: var(--color-gray-300); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transform: scale(0.85); transition: opacity 200ms ease, transform 200ms ease, background 150ms ease, color 150ms ease; } .sidebar-expand-btn.visible { opacity: 1; pointer-events: auto; transform: scale(1); } .sidebar-expand-btn:hover { background: var(--bg-hover); color: var(--color-gray-100); border-color: var(--border-strong); } .studio-sidebar .panel { background: var(--bg-surface) !important; border-right: none; box-shadow: none; } .studio-sidebar .sidebar-form { padding: 20px !important; gap: 20px !important; } /* Ensure all direct children inside sidebar-form have proper spacing */ .studio-sidebar .sidebar-form > div { padding-left: 0; padding-right: 0; } /* Section separator lines should respect padding */ .studio-sidebar .border-t { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } /* Sidebar section headers */ .section-label { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-gray-400); margin-bottom: 8px; } /* Sidebar collapsible sections */ .sidebar-section { border-bottom: 1px solid var(--border-subtle); padding-bottom: 16px; } .sidebar-section:last-child { border-bottom: none; } .sidebar-section summary { font-size: var(--text-xs); font-weight: 500; text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--color-gray-400); cursor: pointer; padding: 4px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; user-select: none; } .sidebar-section summary::-webkit-details-marker { display: none; } .sidebar-section summary::after { content: ''; width: 16px; height: 16px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238E8E99' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; transition: transform 200ms ease; } .sidebar-section[open] summary::after { transform: rotate(180deg); } /* 7.5 Component Restyling */ /* Dark sliders */ .range::-webkit-slider-runnable-track { background: var(--color-gray-700) !important; height: 4px !important; border-radius: 2px; } .range::-webkit-slider-thumb { width: 14px !important; height: 14px !important; background: #fff !important; border: 2px solid rgba(255, 255, 255, 0.50) !important; margin-top: -5px; } .range::-webkit-slider-thumb:hover { box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.12) !important; } .range::-moz-range-track { background: var(--color-gray-700); height: 4px; border-radius: 2px; } .range::-moz-range-thumb { width: 14px; height: 14px; background: #fff; border: 2px solid rgba(255, 255, 255, 0.50); border-radius: 50%; } /* Dark option chips (radio cards) — scoped to sidebar */ .studio-sidebar .option-chip, .studio-sidebar .custom-option, .studio-sidebar .custom-label-option { background: var(--bg-elevated); border-color: var(--border-default); color: var(--color-gray-200); transition: all 150ms ease; } .studio-sidebar .option-chip:hover, .studio-sidebar .custom-option:hover, .studio-sidebar .custom-label-option:hover { border-color: var(--border-strong) !important; background: var(--bg-hover); } .studio-sidebar .option-chip:has(:checked), .studio-sidebar .custom-option:has(:checked), .studio-sidebar .custom-label-option:has(:checked) { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.30) !important; color: var(--color-gray-100); } /* Layout dropdown — constrain to viewport */ #dropdown-layout-wrapper .dropdown-menu:not(.hidden) { display: flex !important; flex-direction: column; overflow: hidden; } #dropdown-layout-wrapper .customScrollbar { max-height: calc(100vh - 300px) !important; height: auto !important; } #dropdown-layout-wrapper .mCSB_container { max-height: none !important; } #dropdown-layout-wrapper .mCustomScrollBox { max-height: calc(100vh - 300px) !important; } /* Dark dropdowns — scoped to sidebar context */ .studio-sidebar .dropdown-menu, .studio-header .dropdown-menu { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; border-radius: 10px !important; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important; } .studio-sidebar .dropdown-menu a, .studio-sidebar .dropdown-menu button:not(.dropdown-toggle), .studio-sidebar .dropdown-menu li { color: var(--color-gray-200) !important; } .studio-sidebar .dropdown-menu a:hover, .studio-sidebar .dropdown-menu button:not(.dropdown-toggle):hover { background: var(--bg-hover) !important; color: var(--color-gray-50) !important; } /* Dark inputs — scoped to sidebar, excluding color picker internals */ .studio-sidebar input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="hidden"]):not(.picker_editor input), .studio-sidebar select, .studio-sidebar textarea { background: var(--bg-input) !important; border-color: var(--border-default) !important; color: var(--color-gray-100) !important; border-radius: 8px; } .studio-sidebar input:not([type="radio"]):not([type="checkbox"]):not([type="range"]):not([type="file"]):not([type="hidden"]):focus, .studio-sidebar select:focus, .studio-sidebar textarea:focus { border-color: rgba(255, 255, 255, 0.30) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10) !important; outline: none; } /* Dark gradient swatches */ .gradient-swatches { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .gradient-swatches label { border-radius: 8px !important; transition: all 150ms ease; } .gradient-swatches label:hover { transform: scale(1.08); } .gradient-swatches label:has(:checked) { outline: 2px solid rgba(255, 255, 255, 0.40); outline-offset: 1px; } /* Gradient/Pattern label checked state in background dropdown */ #background-gradient label:has(:checked), #background-patterns label:has(:checked) { outline: 2px solid rgba(255, 255, 255, 0.40); outline-offset: 1px; border-radius: 12px; } /* Canvas size dropdown */ #dropdown-canvas-size-wrapper { width: 100%; } #dropdown-canvas-size-wrapper .dropdown-menu:not(.hidden) { display: flex !important; flex-direction: column; } /* Toggle: frosted-glass icon with dynamic aspect-ratio shape */ .canvas-size-glass { display: flex; align-items: center; justify-content: center; flex: 0 0 28px; width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(155deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } .canvas-size-preview-shape { display: block; width: 14px; height: 10px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); transition: width 150ms ease, height 150ms ease; } .canvas-size-toggle-text { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex: 1 1 auto; text-align: left; } .canvas-size-toggle-title { font-size: 12px; font-weight: 500; letter-spacing: -0.1px; color: var(--color-gray-300); line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .canvas-size-toggle-subtitle { font-size: 12px; color: var(--color-gray-500); line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; } /* Menu groups */ .canvas-size-group + .canvas-size-group { margin-top: 4px; padding-top: 6px; } .canvas-size-group-title { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.6px; color: var(--color-gray-500); padding: 6px 8px 4px; } .canvas-size-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 7px 8px; border-radius: 8px; color: var(--color-gray-200); background: transparent; border: 0; cursor: pointer; text-align: left; transition: background 120ms ease, color 120ms ease; } .canvas-size-option:hover { background: rgba(255, 255, 255, 0.04); color: var(--color-gray-50); } .canvas-size-option.canvas-size-active { background: rgba(255, 255, 255, 0.05); color: var(--color-gray-50); } .canvas-size-option.canvas-size-active .canvas-size-label { color: var(--color-gray-50); } .canvas-size-label { font-size: 13px; font-weight: 500; line-height: 1.2; } .canvas-size-dims { font-size: 12px; color: var(--color-gray-500); font-variant-numeric: tabular-nums; white-space: nowrap; } .canvas-size-custom-row { display: flex; align-items: center; gap: 6px; padding: 6px 8px 2px; } .canvas-size-custom-row input[type="number"] { flex: 1 1 0; min-width: 0; height: 30px; padding: 0 8px; font-size: 13px; border-radius: 8px; background: var(--bg-input) !important; border: 1px solid var(--border-default) !important; color: var(--color-gray-100) !important; font-variant-numeric: tabular-nums; -moz-appearance: textfield; } .canvas-size-custom-row input[type="number"]::-webkit-outer-spin-button, .canvas-size-custom-row input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .canvas-size-custom-row input[type="number"]:focus { outline: none; border-color: rgba(255, 255, 255, 0.30) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10) !important; } .canvas-size-custom-x { color: var(--color-gray-400); font-size: 13px; } .canvas-size-custom-apply { height: 30px; padding: 0 10px; border-radius: 8px; font-size: 12px; font-weight: 500; color: var(--color-gray-50); background: rgba(255, 255, 255, 0.10); border: 1px solid var(--border-default); cursor: pointer; transition: background 120ms ease; } .canvas-size-custom-apply:hover { background: rgba(255, 255, 255, 0.16); } /* 7.6 Canvas Area — dark with dot grid */ .canvas-area { position: relative; background: var(--bg-canvas); } /* Canvas decoration removed for performance */ /* 7.7 Export Button — lime identity */ .export-button { background: var(--color-lime-500) !important; color: var(--color-lime-950) !important; font-weight: 600; border: none !important; position: relative; overflow: hidden; transition: all 150ms ease; } .export-button:hover { background: var(--color-lime-400) !important; box-shadow: 0 0 20px rgba(202, 252, 0, 0.25); } .export-button:active { background: var(--color-lime-600) !important; } /* Shimmer removed for performance */ /* Export progress bar */ .export-button .export-progress { position: absolute; bottom: 0; left: 0; height: 3px; background: rgba(255, 255, 255, 0.4); border-radius: 0 0 0 10px; transition: width 200ms ease; } /* Export dropdown trigger (right side) */ .export-dropdown-trigger { background: var(--color-lime-500) !important; color: var(--color-lime-950) !important; border-left: 1px solid rgba(26, 33, 0, 0.15) !important; } .export-dropdown-trigger:hover { background: var(--color-lime-400) !important; } /* 7.8 Motion & Micro-interactions */ /* Sidebar section collapse/expand with grid trick */ .sidebar-section-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 200ms ease; } .sidebar-section:not([open]) .sidebar-section-content { grid-template-rows: 0fr; } .sidebar-section-content > div { overflow: hidden; } /* Layout change animation */ .layout-transition { animation: layoutSettle 150ms ease; } @keyframes layoutSettle { 0% { transform: scale(0.97); opacity: 0.8; } 100% { transform: scale(1); opacity: 1; } } /* Staggered fade-in for sidebar sections */ .sidebar-section { animation: fadeInUp 300ms ease both; } .sidebar-section:nth-child(1) { animation-delay: 0ms; } .sidebar-section:nth-child(2) { animation-delay: 30ms; } .sidebar-section:nth-child(3) { animation-delay: 60ms; } .sidebar-section:nth-child(4) { animation-delay: 90ms; } .sidebar-section:nth-child(5) { animation-delay: 120ms; } .sidebar-section:nth-child(6) { animation-delay: 150ms; } .sidebar-section:nth-child(7) { animation-delay: 180ms; } .sidebar-section:nth-child(8) { animation-delay: 210ms; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* All hover transitions: 100-150ms — scoped to studio UI */ .studio-header a, .studio-header button, .studio-sidebar .custom-option, .studio-sidebar .custom-label-option, .studio-sidebar label { transition: all 150ms ease; } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* 7.9 Toast notifications */ .toast-container { position: fixed; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 10000; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; } .toast { pointer-events: auto; background: var(--color-gray-850); border: 1px solid var(--border-strong); border-radius: 14px; padding: 14px 22px; color: var(--color-gray-50); font-size: var(--text-sm); font-weight: 500; letter-spacing: 0.01em; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255,255,255,0.04); display: flex; align-items: center; gap: 10px; animation: toastIn 350ms cubic-bezier(0.175, 0.885, 0.32, 1.275); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); white-space: nowrap; } .toast .toast-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; flex-shrink: 0; } .toast.toast-success .toast-icon { background: rgba(52, 211, 153, 0.15); color: var(--color-success); } .toast.toast-error .toast-icon { background: rgba(248, 113, 113, 0.15); color: var(--color-error); } .toast.toast-info .toast-icon { background: rgba(96, 165, 250, 0.15); color: var(--color-info); } /* Animated checkmark for success */ .toast.toast-success .toast-icon svg .check-path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: drawCheck 400ms 150ms ease forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .toast-exit { animation: toastOut 250ms cubic-bezier(0.55, 0.085, 0.68, 0.53) forwards; } @keyframes toastIn { 0% { opacity: 0; transform: translateY(16px) scale(0.92); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(10px) scale(0.95); } } /* 7.10 Keyboard shortcuts panel */ .shortcuts-panel { position: fixed; inset: 0; z-index: 10001; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); opacity: 0; pointer-events: none; transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1); } .shortcuts-panel.open { opacity: 1; pointer-events: all; } .shortcuts-panel.open .shortcuts-panel-content { transform: translateY(0) scale(1); } .shortcuts-panel-content { background: #111113; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; padding: 0; max-width: 400px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03), 0 24px 80px rgba(0, 0, 0, 0.7), 0 8px 24px rgba(0, 0, 0, 0.4); transform: translateY(8px) scale(0.97); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1); } /* Custom scrollbar */ .shortcuts-panel-content::-webkit-scrollbar { width: 4px; } .shortcuts-panel-content::-webkit-scrollbar-track { background: transparent; } .shortcuts-panel-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.08); border-radius: 4px; } .shortcuts-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .shortcuts-title-group { display: flex; align-items: center; gap: 10px; color: rgba(255, 255, 255, 0.4); } .shortcuts-panel h3 { font-size: 14px; font-weight: 500; color: rgba(255, 255, 255, 0.85); margin: 0; letter-spacing: -0.01em; } .shortcuts-close-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; border: none; background: transparent; color: rgba(255, 255, 255, 0.3); cursor: pointer; transition: all 150ms ease; } .shortcuts-close-btn:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.7); } .shortcuts-group { padding: 8px 20px 4px; } .shortcuts-group + .shortcuts-group { margin-top: 4px; border-top: 1px solid rgba(255, 255, 255, 0.06); padding-top: 14px; } .shortcuts-group:last-child { padding-bottom: 12px; } .shortcuts-group-label { font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.25); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; } .shortcut-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: none; } .shortcut-row:last-child { border-bottom: none; } .shortcut-label { font-size: 13px; color: rgba(255, 255, 255, 0.55); font-weight: 400; } .shortcut-keys { display: flex; gap: 3px; } .shortcut-keys kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 5px; font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, 0.45); line-height: 1; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } /* Reset Panel */ .reset-panel-content { max-width: 360px; } .reset-panel-body { padding: 20px; } .reset-panel-text { font-size: 13px; color: rgba(255, 255, 255, 0.55); line-height: 1.55; margin: 0 0 20px; } .reset-panel-actions { display: flex; gap: 8px; justify-content: flex-end; } .reset-panel-btn { height: 34px; padding: 0 16px; border-radius: 8px; border: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 150ms ease; } .reset-panel-btn--cancel { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.08); } .reset-panel-btn--cancel:hover { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); } .reset-panel-btn--confirm { background: #ef4444; color: #fff; } .reset-panel-btn--confirm:hover { background: #dc2626; } /* 7.12 Context Menus */ .context-menu { position: fixed; z-index: 10003; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 8px; padding: 4px; min-width: 180px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 100ms ease; } .context-menu.open { opacity: 1; pointer-events: all; } .context-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-size: var(--text-sm); color: var(--color-gray-200); transition: background 100ms ease; } .context-menu-item:hover { background: var(--bg-hover); color: var(--color-gray-50); } .context-menu-divider { height: 1px; background: var(--border-subtle); margin: 4px 0; } /* Global dark theme overrides for Tailwind utility classes */ /* Override text-black in sidebar and header context */ .studio-sidebar .text-black, .studio-header .text-black { color: var(--color-gray-100) !important; } .studio-sidebar .bg-white, .studio-sidebar .panel { background-color: var(--bg-surface) !important; } /* Style preview card/stack decorative layers need visible contrast */ .studio-sidebar .style-wrap .item-card.bg-white, .studio-sidebar .style-wrap .custom-option .bg-white { background-color: var(--color-gray-600) !important; } /* Style & border preview — make border-black visible on dark bg */ .studio-sidebar .style-wrap .custom-option .border-black, .studio-sidebar .border-wrap .custom-option .border-black { border-color: var(--color-gray-300) !important; } .studio-sidebar .style-wrap .custom-option .bg-black, .studio-sidebar .border-wrap .custom-option .bg-black { background-color: var(--color-gray-700) !important; } .studio-sidebar .border-stroke-primary-alpha { border-color: var(--border-subtle) !important; } .studio-sidebar .border-stroke-primary-alpha-hover { border-color: var(--border-strong) !important; } .studio-sidebar .hover\:bg-\[\#EFEFEF\]:hover, .studio-sidebar .hover\:bg-\[\#e4e4e4\]:hover { background-color: var(--bg-hover) !important; } .studio-sidebar .text-text-icons-secondary { color: var(--color-gray-400) !important; } .studio-sidebar .text-icons-tertiary, .studio-sidebar .text-sm.text-icons-tertiary { color: var(--color-gray-500) !important; } /* Override white BG classes inside the sidebar */ .studio-sidebar .bg-\[\#EFEFEF\] { background-color: var(--bg-hover) !important; } /* Labels and section titles */ .studio-sidebar h2, .studio-sidebar h3, .studio-sidebar .font-medium { color: var(--color-gray-200); } .studio-sidebar .bg-\[\#F8F8F8\], .studio-sidebar .bg-bg { background-color: var(--bg-elevated) !important; } .studio-sidebar .bg-\[\#FAFAFA\] { background-color: var(--bg-elevated) !important; } .studio-sidebar .bg-gray { background-color: var(--color-gray-800) !important; } /* Sidebar section title text */ .studio-sidebar .text-gray-text { color: var(--color-gray-400) !important; } /* Tab active states in sidebar */ .studio-sidebar [role="tab"][aria-selected="true"], .studio-sidebar .hs-tab-active { background-color: var(--bg-hover) !important; color: var(--color-gray-50) !important; } /* Output resolution text */ #output-resolution { color: var(--color-gray-400); } /* Shadow position grid — dark theme */ .shadow-position-wrap .custom-option { background: var(--bg-elevated); border-color: var(--border-default); } .shadow-position-wrap .custom-option:has(:checked) span { background: var(--color-gray-100) !important; border-color: var(--color-gray-100) !important; } .shadow-position-wrap .custom-option span { background: var(--color-gray-600); border-color: var(--color-gray-600); } /* Color picker dark theme */ .color-background-wrap .dropdown-menu, .color-shadow-wrap .dropdown-menu { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; } .color-background-wrap .picker_editor input, .color-shadow-wrap .picker_editor input { background: var(--bg-input) !important; box-shadow: 0 0 0 1px var(--border-default) !important; color: var(--color-gray-100) !important; } /* Color picker button — dark text overrides */ .color-background-wrap .dropdown-toggle, .color-shadow-wrap .dropdown-toggle { border-color: var(--border-default) !important; } .color-background-wrap .dropdown-toggle:hover, .color-shadow-wrap .dropdown-toggle:hover { border-color: var(--border-strong) !important; } /* Tab bar inside color/gradient picker */ .studio-sidebar [role="tablist"] { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; } .studio-sidebar [role="tab"] { color: var(--color-gray-400) !important; } .studio-sidebar [role="tab"]:hover { color: var(--color-gray-200) !important; } .studio-sidebar [role="tab"][aria-selected="true"], .studio-sidebar [role="tab"].active, .studio-sidebar [data-tab].active.active-tab\:bg-white { color: var(--color-gray-50) !important; background: var(--bg-hover) !important; } /* Override active-tab:text-black in compiled Tailwind */ .studio-sidebar [data-tab].active.active-tab\:text-black { color: var(--color-gray-50) !important; } /* Override active-tab:border-stroke in compiled Tailwind */ .studio-sidebar [data-tab].active.active-tab\:border-stroke { border-color: var(--border-default) !important; } /* Override active-tab:shadow-card in compiled Tailwind */ .studio-sidebar [data-tab].active.active-tab\:shadow-card { box-shadow: none !important; } /* ── Join/toggle groups (Image Format, Image Quality) ── */ .studio-sidebar .join { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; } .studio-sidebar .join .join-item.btn { color: var(--color-gray-400) !important; background: transparent !important; } .studio-sidebar .join .join-item.btn:checked, .studio-sidebar .join input[type="radio"]:checked { background: var(--bg-hover) !important; color: var(--color-gray-50) !important; } /* ── bg-[#f1f1f3] and bg-[#EFEFEF] overrides ── */ .studio-sidebar .bg-\[\#f1f1f3\], .studio-sidebar .bg-\[\#EFEFEF\] { background-color: var(--bg-elevated) !important; } /* ── Size Preset select ── */ .studio-sidebar select[name="img-preset"] { background: var(--bg-elevated) !important; color: var(--color-gray-200) !important; border: 1px solid var(--border-default) !important; } .studio-sidebar select[name="img-preset"]:focus { border-color: rgba(255, 255, 255, 0.30) !important; } .studio-sidebar select option { background: var(--bg-elevated); color: var(--color-gray-200); } /* ── Output Resolution box ── */ #output-resolution { color: var(--color-gray-200) !important; } /* ── Export dropdown (file format/quality) ── */ .studio-sidebar .dropdown-menu.bg-white { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; } /* ── Device search input ── */ #device-search-input { background: var(--bg-elevated) !important; color: var(--color-gray-200) !important; border-color: var(--border-default) !important; } #device-search-input:focus { border-color: rgba(255, 255, 255, 0.30) !important; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10) !important; } #device-search-input::placeholder { color: var(--color-gray-500) !important; } /* ── Device category tabs ── */ .device-category-tabs { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; } .device-category-tab { color: var(--color-gray-400) !important; background: transparent !important; transition: color 0.2s ease, background 0.2s ease; } .device-category-tab:hover { color: var(--color-gray-200) !important; background: var(--bg-hover) !important; } .device-category-tab.active { color: var(--color-gray-50) !important; background: var(--bg-hover) !important; } /* ── Custom ratio preset buttons ── */ .custom-ratio-preset { background: var(--bg-elevated) !important; color: var(--color-gray-300) !important; border-color: var(--border-default) !important; } .custom-ratio-preset:hover { border-color: var(--border-strong) !important; background: var(--bg-hover) !important; } /* ── Device cards in layout dropdown ── */ .studio-sidebar .device-card { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--color-gray-200) !important; } .studio-sidebar .device-card:hover { border-color: var(--border-strong) !important; } .studio-sidebar .device-card.active, .studio-sidebar .device-card:has(:checked) { border-color: rgba(255, 255, 255, 0.30) !important; background: rgba(255, 255, 255, 0.06) !important; } /* ── Style chips (Floating / Stacked / Flat) ── */ .studio-sidebar .style-chip, .studio-sidebar .border-style-option { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--color-gray-300) !important; } .studio-sidebar .style-chip:hover, .studio-sidebar .border-style-option:hover { border-color: var(--border-strong) !important; } .studio-sidebar .style-chip.active, .studio-sidebar .style-chip:has(:checked), .studio-sidebar .border-style-option.active, .studio-sidebar .border-style-option:has(:checked) { border-color: rgba(255, 255, 255, 0.30) !important; background: rgba(255, 255, 255, 0.06) !important; color: var(--color-gray-100) !important; } /* ── All remaining text-black inside sidebar ── */ .studio-sidebar .text-black { color: var(--color-gray-200) !important; } /* Override compiled hover:text-black */ .studio-sidebar .hover\:text-black:hover { color: var(--color-gray-200) !important; } /* Exception: dark text on lime/brand background is intentional */ .studio-sidebar .bg-brand.text-black, #custom-ratio-apply.text-black, .studio-sidebar .export-button .text-black { color: #000 !important; } /* ── Export dropdown: override compiled checked:!bg-white and checked:!text-black ── */ .studio-sidebar .join input[type="radio"]:checked, .studio-sidebar .checked\:\!bg-white:checked { background-color: var(--bg-hover) !important; } .studio-sidebar .checked\:\!text-black:checked { color: var(--color-gray-50) !important; } .studio-sidebar .join input[type="radio"]:checked:hover, .studio-sidebar .checked\:hover\:\!bg-white:hover:checked { background-color: var(--bg-hover) !important; } /* ── Transform preset buttons hover state ── */ .studio-sidebar .transform-preset-btn:hover { color: var(--color-gray-200) !important; border-color: var(--border-strong) !important; } .studio-sidebar .transform-preset-btn.transform-preset-active { background: rgba(255, 255, 255, 0.08) !important; border-color: rgba(255, 255, 255, 0.30) !important; color: var(--color-gray-100) !important; } /* ── Dark mode: DOF mode buttons ── */ .studio-sidebar .dof-mode-btn { color: var(--color-gray-400) !important; } .studio-sidebar .dof-mode-btn:hover { color: var(--color-gray-200) !important; } .studio-sidebar .dof-mode-btn.dof-mode-active { background: rgba(255, 255, 255, 0.08) !important; color: var(--color-gray-100) !important; } /* ── Dark mode: DOF range sliders ── */ .studio-sidebar .dof-range { background: rgba(255, 255, 255, 0.1) !important; } .studio-sidebar .dof-range::-webkit-slider-thumb { background: var(--color-gray-100) !important; border-color: var(--color-gray-600) !important; } .studio-sidebar .dof-range::-moz-range-thumb { background: var(--color-gray-100) !important; border-color: var(--color-gray-600) !important; } .studio-sidebar .dof-range::-moz-range-track { background: rgba(255, 255, 255, 0.1) !important; } .studio-sidebar .dof-val { color: var(--color-gray-300) !important; } /* FilePond dark theme */ .filepond--root { font-family: "Inter", sans-serif; } .studio-sidebar .filepond--panel-root { background-color: var(--bg-elevated) !important; border: 1px dashed var(--border-default); } .mockup-module .filepond--panel-root { background-color: transparent !important; border: none !important; } .filepond--drop-label { color: var(--color-gray-400) !important; } /* Hide FilePond label when image is showing */ .dropzone:has(img.show-img) .empty-drop { opacity: 0; } /* Upload placeholder — icon only */ .upload-placeholder { display: flex; align-items: center; justify-content: center; pointer-events: none; } .upload-placeholder svg { color: rgba(0, 0, 0, 0.12); transition: all 0.25s ease; } .mockup-module .filepond--root:hover .upload-placeholder svg { color: rgba(0, 0, 0, 0.20); } /* Scrollbar — native thin */ .panel-scroll-view { scrollbar-width: thin; scrollbar-color: var(--color-gray-700) transparent; } .panel-scroll-view::-webkit-scrollbar { width: 6px; display: block !important; } .panel-scroll-view::-webkit-scrollbar-track { background: transparent; } .panel-scroll-view::-webkit-scrollbar-thumb { background: var(--color-gray-700); border-radius: 3px; } .panel-scroll-view::-webkit-scrollbar-thumb:hover { background: var(--color-gray-600); } /* Dark tooltips */ .tooltip .tooltip-body { background: var(--bg-elevated) !important; border: 1px solid var(--border-default) !important; color: var(--color-gray-200) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } /* Reset button — dark variant */ #reset-button { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; color: var(--color-gray-200) !important; } #reset-button:hover:not(:disabled) { border-color: var(--border-strong) !important; color: var(--color-gray-50) !important; } /* Adaptive alert — dark */ .adaptive-alert .shadow-dropdown { background: var(--bg-elevated) !important; color: var(--color-gray-100) !important; border: 1px solid var(--border-default) !important; } .adaptive-alert::before { background: rgba(12, 12, 14, 0.7) !important; } /* ── Dark mode overrides: bg-white dropdowns in sidebar ── */ .studio-sidebar .dropdown-menu.bg-white, .studio-sidebar .bg-white:not(.background-device-wrap) { background-color: var(--bg-elevated) !important; } /* ── Dark mode: tab buttons inside sidebar (Color/Gradient/Image tabs) ── */ /* Override active-tab:bg-white, active-tab:text-black, hover:text-black */ .studio-sidebar [role="tab"].active, .studio-sidebar [role="tab"][aria-selected="true"], .studio-sidebar .active-tab\:bg-white.active, .studio-sidebar [role="tab"]:where([class*="active-tab:bg-white"]).active { background-color: var(--bg-hover) !important; color: var(--color-gray-50) !important; border-color: var(--border-default) !important; box-shadow: none !important; } .studio-sidebar [role="tab"]:hover { color: var(--color-gray-200) !important; } /* Tab container bar (bg-background-surface-4) */ .studio-sidebar .bg-background-surface-4, .studio-sidebar nav[role="tablist"] { background-color: var(--bg-elevated) !important; border-color: var(--border-default) !important; } /* ── Dark mode: transform preset buttons hover ── */ .studio-sidebar .transform-preset-btn:hover { color: var(--color-gray-200) !important; border-color: var(--border-strong) !important; } .studio-sidebar .transform-preset-btn { color: var(--color-gray-400) !important; border-color: var(--border-default) !important; } /* ── Dark mode: shadow-dropdown class used in dropdowns ── */ .studio-sidebar .shadow-dropdown { box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2) !important; } /* ── Dark mode: border-stroke class in sidebar ── */ .studio-sidebar .border-stroke { border-color: var(--border-default) !important; } /* ── Canvas area dark mode ── */ .canvas-area { background: var(--bg-canvas); border-color: transparent; } /* ── Dark mode: all dropdown menus with bg-white inside sidebar ── */ .studio-sidebar .dropdown-menu { background: var(--bg-elevated) !important; border-color: var(--border-default) !important; } /* ── Dark mode: text-black labels inside sidebar (shadow controls, export) ── */ .studio-sidebar .text-xs.text-black, .studio-sidebar .text-sm.text-black, .studio-sidebar .text-\[10px\].text-black { color: var(--color-gray-200) !important; } /* ── Dark mode: select with text-black ── */ .studio-sidebar select.text-black { color: var(--color-gray-200) !important; background-color: var(--bg-elevated) !important; } /* ── Dark mode: bg-[#f1f1f3] in export panel ── */ .studio-sidebar .bg-\[\#f1f1f3\] { background-color: var(--bg-elevated) !important; } /* ── Dark mode: layout preview item-card thumbnails ── */ .studio-sidebar .item-card.bg-white { background-color: var(--color-gray-300) !important; } /* ── Dark mode: FilePond dropzone text ── */ .filepond--drop-label .text-black { color: var(--color-gray-200) !important; } .studio-sidebar .filepond--panel-root { background-color: var(--bg-elevated) !important; } /* ── Dark mode: #output-resolution text ── */ #output-resolution.text-black { color: var(--color-gray-200) !important; } /* ── Hide unused device categories ── */ .device-category-tab[data-category="tablet"], .device-category-tab[data-category="laptop"], .device-category-tab[data-category="desktop"], .device-category-tab[data-category="watch"] { display: none !important; } #category-panel-tablet, #category-panel-laptop, #category-panel-desktop, #category-panel-watch { display: none !important; } /* ── Dark mode: upload area icon fixes ── */ .icon-dnd { background-color: transparent !important; } /* ── Auto Blur Background Layer ── */ .blur-bg-layer { background-size: cover; background-position: center center; filter: blur(70px) saturate(1.8) brightness(0.7); transform: scale(1.4); will-change: filter, transform; transition: opacity 0.6s ease; } /* ── Pattern preview labels ── */ .pattern-preview-label { background-color: var(--bg-elevated, #fff); transition: border-color 0.15s, box-shadow 0.15s; } .pattern-preview-label:hover { border-color: var(--border-strong) !important; } .pattern-preview-label:has(input:checked) { border-color: var(--color-lime-500) !important; box-shadow: 0 0 0 1px var(--color-lime-500); } /* ── Pattern controls range sliders ── */ .pattern-controls input[type="range"] { -webkit-appearance: none; appearance: none; height: 4px; border-radius: 999px; background: var(--bg-hover, #333); outline: none; cursor: pointer; } .pattern-controls input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--color-lime-500); box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; } .pattern-controls input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 2px solid var(--color-lime-500); box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; } /* ── Pattern overlay layer ── */ .pattern-overlay-layer { background-color: transparent; } /* ── Gradient PNG skeleton loading ── */ #background-gradient-classic label { background-color: var(--bg-elevated, #222226); position: relative; overflow: hidden; } #background-gradient-classic label::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.05) 40%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.05) 60%, transparent 100%); animation: gradient-skeleton-shimmer 1.8s ease-in-out infinite; z-index: 1; pointer-events: none; } @keyframes gradient-skeleton-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } /* ═══════════════════════════════════════════ 8. About Panel ═══════════════════════════════════════════ */ .about-panel { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 250ms ease; } .about-panel.open { opacity: 1; pointer-events: all; } .about-panel-content { position: relative; background: var(--color-gray-900); border: 1px solid var(--border-default); border-radius: 16px; max-width: 840px; width: 94%; max-height: 88vh; overflow: hidden; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); transform: translateY(12px) scale(0.98); transition: transform 250ms ease; } .about-panel.open .about-panel-content { transform: translateY(0) scale(1); } .about-columns { display: flex; min-height: 0; } .about-left { flex: 1; padding: 32px; overflow-y: auto; max-height: 88vh; border-right: 1px solid var(--border-subtle); } .about-right { width: 340px; flex-shrink: 0; padding: 32px; overflow-y: auto; max-height: 88vh; background: var(--color-gray-950); } /* Logo block */ .about-logo-block { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .about-logo-mark { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(202, 252, 0, 0.08); border: 1px solid rgba(202, 252, 0, 0.15); color: var(--color-lime-500); } .about-logo-text { display: flex; align-items: baseline; white-space: nowrap; } .about-app-name { font-family: 'Instrument Serif', Georgia, serif; font-size: 32px; font-weight: 400; font-style: italic; color: var(--color-gray-50); letter-spacing: 0.01em; line-height: 1; } .about-app-from { margin-left: 10px; font-size: 13px; font-weight: 400; letter-spacing: 0.02em; color: var(--color-gray-500); } .about-app-from-craftwork { font-family: 'EuclidCircularA', sans-serif; font-weight: 600; color: var(--color-gray-400); } /* Meta rows */ .about-meta { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; } .about-meta-row { display: flex; justify-content: space-between; align-items: center; } .about-meta-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.06em; } .about-meta-value { font-size: var(--text-base); color: var(--color-gray-200); font-family: "JetBrains Mono", monospace; } .about-meta-free { color: var(--color-lime-500); font-family: inherit; font-weight: 500; } /* Divider */ .about-divider { height: 1px; background: var(--border-subtle); margin: 24px 0; } /* Description */ .about-description p { font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-gray-400); margin: 0; } /* Credits */ .about-credits { display: flex; flex-direction: column; gap: 12px; } .about-credits-row { display: flex; justify-content: space-between; align-items: center; } .about-credits-label { font-size: var(--text-sm); font-weight: 500; color: var(--color-gray-500); text-transform: uppercase; letter-spacing: 0.06em; } .about-credits-link { font-size: var(--text-base); color: var(--color-gray-200); text-decoration: none; transition: color 150ms ease; } .about-credits-link:hover { color: var(--color-lime-500); } /* Social buttons */ .about-social { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; } .about-social-btn { display: inline-flex; align-items: center; gap: 10px; padding: 11px 16px; background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: 10px; color: var(--color-gray-300); font-size: var(--text-base); text-decoration: none; transition: all 150ms ease; } .about-social-btn:hover { background: var(--bg-hover); color: var(--color-gray-50); border-color: var(--border-strong); } /* Footer links */ .about-footer-links { display: flex; gap: 20px; margin-bottom: 16px; } .about-footer-link { background: none; border: none; padding: 0; font-size: var(--text-sm); color: var(--color-gray-500); cursor: pointer; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; transition: color 150ms ease; } .about-footer-link:hover { color: var(--color-gray-200); } .about-copyright { font-size: var(--text-xs); color: var(--color-gray-600); letter-spacing: 0.02em; } /* Right column: Craftwork promo */ .about-promo-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .about-promo-logo { width: 40px; height: 40px; border-radius: 12px; object-fit: contain; } .about-promo-title { font-family: 'Euclid Circular A', sans-serif; font-size: var(--text-xl); font-weight: 600; color: var(--color-gray-50); } .about-promo-tagline { font-size: var(--text-base); color: var(--color-gray-400); line-height: var(--leading-normal); margin: 0 0 28px 0; } .about-promo-features { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; } .about-promo-feature { display: flex; align-items: center; gap: 10px; font-size: var(--text-base); color: var(--color-gray-300); } .about-promo-feature svg { flex-shrink: 0; } .about-promo-cta-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 28px; } .about-promo-cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; border-radius: 10px; font-size: var(--text-base); font-weight: 600; text-decoration: none; transition: all 150ms ease; background: var(--color-lime-500); color: var(--color-lime-950); } .about-promo-cta:hover { background: var(--color-lime-400); transform: translateY(-1px); } .about-promo-cta--secondary { background: var(--bg-elevated); color: var(--color-gray-200); border: 1px solid var(--border-default); } .about-promo-cta--secondary:hover { background: var(--bg-hover); color: var(--color-gray-50); border-color: var(--border-strong); } .about-promo-note { display: flex; align-items: flex-start; gap: 10px; padding: 14px; background: rgba(202, 252, 0, 0.04); border: 1px solid rgba(202, 252, 0, 0.08); border-radius: 10px; } .about-promo-note svg { flex-shrink: 0; margin-top: 2px; } .about-promo-note span { font-size: var(--text-sm); color: var(--color-gray-400); line-height: var(--leading-normal); } /* Close button (shared) */ .panel-close-btn { background: none; border: none; color: var(--color-gray-400); cursor: pointer; padding: 6px; border-radius: 6px; display: flex; align-items: center; justify-content: center; transition: all 150ms ease; } .panel-close-btn:hover { color: var(--color-gray-100); background: var(--bg-hover); } .about-panel-content > .panel-close-btn { position: absolute; top: 16px; right: 16px; z-index: 2; } /* ═══════════════════════════════════════════ 8.2 Changelog Panel (right side-panel) ═══════════════════════════════════════════ */ .changelog-panel { position: fixed; inset: 0; z-index: 10002; display: flex; align-items: stretch; justify-content: flex-end; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .changelog-panel.open { opacity: 1; pointer-events: all; } .changelog-panel-content { width: 480px; max-width: calc(100vw - 48px); background: var(--color-gray-900); border: 1px solid var(--border-default); margin: 16px 16px 16px 0; border-radius: 16px; display: flex; flex-direction: column; box-shadow: -16px 0 64px rgba(0, 0, 0, 0.4); transform: translateX(24px); transition: transform 250ms ease; } .changelog-panel.open .changelog-panel-content { transform: translateX(0); } .changelog-header { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .changelog-header h3 { font-size: var(--text-base); font-weight: 500; color: var(--color-gray-300); margin: 0; letter-spacing: 0.02em; } .changelog-body { flex: 1; overflow-y: auto; padding: 28px; } .changelog-entry { margin-bottom: 0; } .changelog-separator { height: 1px; background: var(--border-subtle); margin: 32px 0; } .changelog-entry-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .changelog-version-badge { display: inline-block; padding: 4px 12px; font-family: "JetBrains Mono", monospace; font-size: var(--text-xs); font-weight: 600; color: var(--color-lime-500); background: rgba(202, 252, 0, 0.06); border: 1px solid rgba(202, 252, 0, 0.10); border-radius: 8px; } .changelog-date { font-size: var(--text-sm); color: var(--color-gray-500); } .changelog-entry-title { font-size: var(--text-lg); font-weight: 600; color: var(--color-gray-50); margin: 0 0 6px 0; } .changelog-entry-desc { font-size: var(--text-base); color: var(--color-gray-400); line-height: var(--leading-normal); margin: 0 0 24px 0; } .changelog-section { margin-bottom: 20px; } .changelog-section:last-child { margin-bottom: 0; } .changelog-section-title { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--color-gray-200); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 10px; } .changelog-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .changelog-dot--green { background: var(--color-lime-500); } .changelog-dot--blue { background: var(--color-info); } .changelog-dot--amber { background: var(--color-warning); } .changelog-dot--purple { background: #A78BFA; } .changelog-list { list-style: none; padding: 0 0 0 16px; margin: 0; display: flex; flex-direction: column; gap: 8px; border-left: 2px solid var(--border-subtle); } .changelog-list li { font-size: var(--text-base); color: var(--color-gray-300); line-height: var(--leading-normal); padding-left: 0; } /* ═══════════════════════════════════════════ 8.3 Legal Panels (Privacy, Terms, License) ═══════════════════════════════════════════ */ .legal-panel { position: fixed; inset: 0; z-index: 10003; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .legal-panel.open { opacity: 1; pointer-events: all; } .legal-panel-content { background: var(--color-gray-900); border: 1px solid var(--border-default); border-radius: 16px; max-width: 640px; width: 92%; max-height: 85vh; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); transform: translateY(12px); transition: transform 200ms ease; } .legal-panel.open .legal-panel-content { transform: translateY(0); } .legal-header { display: flex; align-items: center; justify-content: space-between; padding: 24px 32px; border-bottom: 1px solid var(--border-subtle); flex-shrink: 0; } .legal-panel h3 { font-size: var(--text-base); font-weight: 500; color: var(--color-gray-300); letter-spacing: 0.02em; } .legal-body { font-size: var(--text-base); color: var(--color-gray-400); line-height: var(--leading-normal); flex: 1; overflow-y: auto; padding: 24px 32px 32px; } .legal-body h4 { font-size: var(--text-md); font-weight: 600; color: var(--color-gray-200); margin: 28px 0 10px 0; } .legal-body h4:first-of-type { margin-top: 16px; } .legal-body p { margin: 0 0 12px 0; } .legal-body ul { padding-left: 20px; margin: 0 0 12px 0; } .legal-body li { margin-bottom: 6px; } .legal-body a { color: var(--color-lime-500); text-decoration: none; } .legal-body a:hover { text-decoration: underline; } .legal-updated { font-size: var(--text-xs); color: var(--color-gray-500); margin-bottom: 8px !important; } /* Scrollbar styling for panels */ .about-left::-webkit-scrollbar, .about-right::-webkit-scrollbar, .changelog-body::-webkit-scrollbar, .legal-panel-content::-webkit-scrollbar { width: 6px; } .about-left::-webkit-scrollbar-track, .about-right::-webkit-scrollbar-track, .changelog-body::-webkit-scrollbar-track, .legal-panel-content::-webkit-scrollbar-track { background: transparent; } .about-left::-webkit-scrollbar-thumb, .about-right::-webkit-scrollbar-thumb, .changelog-body::-webkit-scrollbar-thumb, .legal-panel-content::-webkit-scrollbar-thumb { background: var(--color-gray-700); border-radius: 3px; } .about-left::-webkit-scrollbar-thumb:hover, .about-right::-webkit-scrollbar-thumb:hover, .changelog-body::-webkit-scrollbar-thumb:hover, .legal-panel-content::-webkit-scrollbar-thumb:hover { background: var(--color-gray-600); } /* ─── CARDS (STACKED COMPOSITIONS) ─────────────────────── */ /* Cards base: mirror screenshot layout system exactly */ .mockup-module.cards .layouts { aspect-ratio: 1.6 / 1; position: absolute; inset: 0; max-height: 100%; margin: auto; display: flex; justify-content: center; align-items: center; pointer-events: all; transform: translateZ(0); will-change: contents, transform, opacity; user-select: none; border: none !important; outline: none !important; } .mockup-module.cards .layouts.lay-2-items { aspect-ratio: 1.4 / 1; } .mockup-module.cards .layouts.lay-3-items { aspect-ratio: 1.2 / 1; } .mockup-module.cards .layouts .layouts-item { display: flex; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; pointer-events: all; border: none !important; outline: none !important; } .mockup-module.cards .item { position: relative; width: 100%; height: 100%; container-type: size; container-name: item-container; } .cards .item, .cards .devices { aspect-ratio: unset !important; width: 100%; height: 100%; max-height: 100%; max-width: 100%; } .cards .item .item-container { width: unset; height: max-content; position: absolute; inset: 0; max-height: 100%; margin: auto; } .cards .devices .item .item-container { aspect-ratio: var(--dropzone-1-ratio, unset); } /* All card compositions: .devices overlap via absolute positioning */ .mockup-module.cards .layouts-item .devices { position: absolute; inset: 0; } /* ── Stack: offset stack with shadow depth ── */ .cards.cards-stack .devices:nth-child(1) .item { z-index: 3; } .cards.cards-stack .devices:nth-child(2) .item { transform: translate(6%, 5%) scale(0.92); z-index: 2; } .cards.cards-stack .devices:nth-child(3) .item { transform: translate(12%, 10%) scale(0.84); z-index: 1; opacity: 0.55; } /* ── Fan: fanned cards from center bottom ── */ .cards.cards-fan .devices:nth-child(1) .item { transform: rotate(-12deg) translateX(-15%); transform-origin: 50% 100%; z-index: 3; } .cards.cards-fan .devices:nth-child(2) .item { transform: rotate(0deg); transform-origin: 50% 100%; z-index: 2; } .cards.cards-fan .devices:nth-child(3) .item { transform: rotate(12deg) translateX(15%); transform-origin: 50% 100%; z-index: 1; } /* ── Cascade: diagonal cascade ── */ .cards.cards-cascade .devices:nth-child(1) .item { transform: translate(-20%, -12%) scale(0.85); z-index: 3; } .cards.cards-cascade .devices:nth-child(2) .item { transform: translate(5%, 5%) scale(0.85); z-index: 2; } .cards.cards-cascade .devices:nth-child(3) .item { transform: translate(20%, 14%) scale(0.85); z-index: 1; opacity: 0.7; } /* ── Overlap: horizontal shift ── */ .cards.cards-overlap .devices:nth-child(1) .item { transform: translateX(18%); z-index: 2; } .cards.cards-overlap .devices:nth-child(2) .item { transform: translateX(-18%); z-index: 1; } /* ── Spread: cards spread horizontally with slight rotation ── */ .cards.cards-spread .devices:nth-child(1) .item { transform: translateX(-25%) rotate(-5deg) scale(0.85); z-index: 3; } .cards.cards-spread .devices:nth-child(2) .item { transform: scale(0.9); z-index: 2; } .cards.cards-spread .devices:nth-child(3) .item { transform: translateX(25%) rotate(5deg) scale(0.85); z-index: 1; } /* ── Perspective: dramatic 3D showcase — hero center, sides angled away ── */ .cards.cards-perspective .devices:nth-child(1) .item { transform: perspective(1000px) rotateY(-30deg) translateX(-22%) scale(0.78); transform-origin: right center; z-index: 1; } .cards.cards-perspective .devices:nth-child(2) .item { transform: perspective(1000px) scale(0.95) translateY(-2%); z-index: 3; } .cards.cards-perspective .devices:nth-child(3) .item { transform: perspective(1000px) rotateY(30deg) translateX(22%) scale(0.78); transform-origin: left center; z-index: 1; } /* ── Mosaic: overlapping grid-like arrangement ── */ .cards.cards-mosaic .devices:nth-child(1) .item { transform: translate(-18%, -14%) scale(0.75); z-index: 3; } .cards.cards-mosaic .devices:nth-child(2) .item { transform: translate(14%, -6%) scale(0.70); z-index: 2; } .cards.cards-mosaic .devices:nth-child(3) .item { transform: translate(-4%, 16%) scale(0.72); z-index: 1; } /* ── Float: cards floating at different sizes and positions ── */ .cards.cards-float .devices:nth-child(1) .item { transform: translate(-22%, -10%) scale(0.78) rotate(-3deg); z-index: 3; } .cards.cards-float .devices:nth-child(2) .item { transform: translate(16%, 8%) scale(0.68) rotate(4deg); z-index: 2; } .cards.cards-float .devices:nth-child(3) .item { transform: translate(2%, -18%) scale(0.60) rotate(-6deg); z-index: 1; opacity: 0.85; } /* ── Carousel: 3D coverflow — center hero, sides angled back ── */ .cards.cards-carousel .devices:nth-child(1) .item { transform: perspective(1000px) rotateY(35deg) translateX(-18%) scale(0.78); transform-origin: right center; z-index: 1; } .cards.cards-carousel .devices:nth-child(2) .item { transform: scale(0.92); z-index: 3; } .cards.cards-carousel .devices:nth-child(3) .item { transform: perspective(1000px) rotateY(-35deg) translateX(18%) scale(0.78); transform-origin: left center; z-index: 1; } /* ── Peek: vertical ascending stagger, first card always on top ── */ .cards.cards-peek .devices:nth-child(1) .item { transform: translate(-2%, -10%) scale(0.88); z-index: 3; } .cards.cards-peek .devices:nth-child(2) .item { transform: translate(4%, 4%) scale(0.85); z-index: 2; } .cards.cards-peek .devices:nth-child(3) .item { transform: translate(-6%, 16%) scale(0.80); z-index: 1; opacity: 0.65; } /* ── Tilt: isometric 3D plane — all cards share the same tilt angle ── */ .cards.cards-tilt .devices:nth-child(1) .item { transform: perspective(800px) rotateX(10deg) rotateY(-6deg) rotateZ(-2deg) translate(-14%, -10%) scale(0.80); z-index: 3; } .cards.cards-tilt .devices:nth-child(2) .item { transform: perspective(800px) rotateX(10deg) rotateY(-6deg) rotateZ(-2deg) translate(2%, 3%) scale(0.80); z-index: 2; } .cards.cards-tilt .devices:nth-child(3) .item { transform: perspective(800px) rotateX(10deg) rotateY(-6deg) rotateZ(-2deg) translate(18%, 16%) scale(0.80); z-index: 1; opacity: 0.7; } /* ── Showcase: asymmetric hero + accent composition ── */ .cards.cards-showcase .devices:nth-child(1) .item { transform: translate(-6%, 0%) scale(0.92); z-index: 2; } .cards.cards-showcase .devices:nth-child(2) .item { transform: translate(28%, 18%) scale(0.52); z-index: 3; } /* ── Wave: sine-wave arrangement — left high, center low, right high ── */ .cards.cards-wave .devices:nth-child(1) .item { transform: translate(-26%, -10%) scale(0.78) rotate(-3deg); z-index: 2; } .cards.cards-wave .devices:nth-child(2) .item { transform: translate(0%, 12%) scale(0.82); z-index: 3; } .cards.cards-wave .devices:nth-child(3) .item { transform: translate(26%, -10%) scale(0.78) rotate(3deg); z-index: 2; } /* ── Flip: progressive X-axis rotation, first card always on top ── */ .cards.cards-flip .devices:nth-child(1) .item { transform: perspective(600px) rotateX(0deg) translate(2%, -8%) scale(0.90); transform-origin: center bottom; z-index: 3; } .cards.cards-flip .devices:nth-child(2) .item { transform: perspective(600px) rotateX(15deg) translate(0%, 5%) scale(0.85); transform-origin: center bottom; z-index: 2; } .cards.cards-flip .devices:nth-child(3) .item { transform: perspective(600px) rotateX(30deg) translate(-12%, 15%) scale(0.78); transform-origin: center bottom; z-index: 1; opacity: 0.6; } /* ── Stair: clean diagonal steps, equal-sized cards ── */ .cards.cards-stair .devices:nth-child(1) .item { transform: translate(-18%, -14%) scale(0.78); z-index: 3; } .cards.cards-stair .devices:nth-child(2) .item { transform: scale(0.78); z-index: 2; } .cards.cards-stair .devices:nth-child(3) .item { transform: translate(18%, 14%) scale(0.78); z-index: 1; opacity: 0.7; } /* ── Scatter: organic photo-dump, cards thrown on a desk ── */ .cards.cards-scatter .devices:nth-child(1) .item { transform: translate(-16%, 4%) rotate(-8deg) scale(0.75); z-index: 3; } .cards.cards-scatter .devices:nth-child(2) .item { transform: translate(14%, -8%) rotate(5deg) scale(0.72); z-index: 2; } .cards.cards-scatter .devices:nth-child(3) .item { transform: translate(-2%, 16%) rotate(-2deg) scale(0.68); z-index: 1; opacity: 0.8; } /* ── Shelf: side-by-side with subtle upward perspective tilt ── */ .cards.cards-shelf .devices:nth-child(1) .item { transform: perspective(800px) rotateX(-6deg) translate(-28%, 2%) scale(0.62); z-index: 2; } .cards.cards-shelf .devices:nth-child(2) .item { transform: perspective(800px) rotateX(-6deg) scale(0.68); z-index: 3; } .cards.cards-shelf .devices:nth-child(3) .item { transform: perspective(800px) rotateX(-6deg) translate(28%, 2%) scale(0.62); z-index: 2; } /* ── Trio: inverted triangle — hero on top, two supporting below ── */ .cards.cards-trio .devices:nth-child(1) .item { transform: translate(0%, -16%) scale(0.80); z-index: 3; } .cards.cards-trio .devices:nth-child(2) .item { transform: translate(-20%, 12%) scale(0.68) rotate(-3deg); z-index: 2; } .cards.cards-trio .devices:nth-child(3) .item { transform: translate(20%, 12%) scale(0.68) rotate(3deg); z-index: 2; } /* ── Card device grid preview thumbnails ── */ /* Sizes/offsets are pre-scaled (~1.7×) and rendered natively to avoid the subpixel blur that transform: scale used to introduce. */ .device-preview-cards { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; position: relative; } .device-preview-cards::before, .device-preview-cards::after { content: ''; position: absolute; border-radius: 5px; border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(155deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 3px 6px rgba(0, 0, 0, 0.28); } .device-preview-cards::before { width: 48px; height: 34px; z-index: 2; } .device-preview-cards::after { width: 48px; height: 34px; z-index: 1; opacity: 0.6; } /* Stack preview */ .device-preview-cards[data-card-style="cards-stack"]::after { transform: translate(9px, 7px) rotate(2deg); } /* Fan preview */ .device-preview-cards[data-card-style="cards-fan"]::before { transform: rotate(-6deg); transform-origin: bottom center; } .device-preview-cards[data-card-style="cards-fan"]::after { transform: rotate(6deg); transform-origin: bottom center; } /* Cascade preview */ .device-preview-cards[data-card-style="cards-cascade"]::before { transform: translate(-7px, -5px); } .device-preview-cards[data-card-style="cards-cascade"]::after { transform: translate(7px, 5px); } /* Overlap preview */ .device-preview-cards[data-card-style="cards-overlap"]::before { width: 41px; height: 31px; transform: translateX(9px); } .device-preview-cards[data-card-style="cards-overlap"]::after { width: 41px; height: 31px; transform: translateX(-9px); } /* Spread preview */ .device-preview-cards[data-card-style="cards-spread"]::before { transform: translateX(-12px) rotate(-4deg); } .device-preview-cards[data-card-style="cards-spread"]::after { transform: translateX(12px) rotate(4deg); } /* Perspective preview */ .device-preview-cards[data-card-style="cards-perspective"]::before { width: 37px; height: 27px; transform: perspective(140px) rotateY(-16deg) translateX(-12px); transform-origin: right center; } .device-preview-cards[data-card-style="cards-perspective"]::after { width: 37px; height: 27px; transform: perspective(140px) rotateY(16deg) translateX(12px); transform-origin: left center; } /* Mosaic preview */ .device-preview-cards[data-card-style="cards-mosaic"]::before { width: 37px; height: 27px; transform: translate(-9px, -7px); } .device-preview-cards[data-card-style="cards-mosaic"]::after { width: 34px; height: 24px; transform: translate(9px, 7px); } /* Float preview */ .device-preview-cards[data-card-style="cards-float"]::before { width: 41px; height: 27px; transform: translate(-10px, -5px) rotate(-3deg); } .device-preview-cards[data-card-style="cards-float"]::after { width: 34px; height: 24px; transform: translate(10px, 7px) rotate(4deg); } /* Carousel preview */ .device-preview-cards[data-card-style="cards-carousel"]::before { width: 41px; height: 29px; transform: perspective(170px) rotateY(15deg) translateX(-10px); transform-origin: right center; } .device-preview-cards[data-card-style="cards-carousel"]::after { width: 41px; height: 29px; transform: perspective(170px) rotateY(-15deg) translateX(10px); transform-origin: left center; } /* Peek preview */ .device-preview-cards[data-card-style="cards-peek"]::before { transform: translate(-2px, -9px); } .device-preview-cards[data-card-style="cards-peek"]::after { transform: translate(2px, 9px); } /* Tilt preview */ .device-preview-cards[data-card-style="cards-tilt"]::before { transform: perspective(140px) rotateX(5deg) rotateY(-5deg) translate(-5px, -5px); } .device-preview-cards[data-card-style="cards-tilt"]::after { transform: perspective(140px) rotateX(5deg) rotateY(-5deg) translate(5px, 5px); } /* Showcase preview */ .device-preview-cards[data-card-style="cards-showcase"]::before { width: 48px; height: 34px; transform: translate(-5px, 0px); } .device-preview-cards[data-card-style="cards-showcase"]::after { width: 27px; height: 20px; transform: translate(17px, 10px); } /* Wave preview */ .device-preview-cards[data-card-style="cards-wave"]::before { width: 37px; height: 27px; transform: translate(-14px, -5px) rotate(-3deg); } .device-preview-cards[data-card-style="cards-wave"]::after { width: 37px; height: 27px; transform: translate(14px, -5px) rotate(3deg); } /* Flip preview */ .device-preview-cards[data-card-style="cards-flip"]::before { transform: translate(0px, -5px); } .device-preview-cards[data-card-style="cards-flip"]::after { width: 41px; height: 27px; transform: perspective(140px) rotateX(12deg) translate(0px, 7px); transform-origin: center bottom; } /* Stair preview */ .device-preview-cards[data-card-style="cards-stair"]::before { width: 41px; height: 27px; transform: translate(-9px, -7px); } .device-preview-cards[data-card-style="cards-stair"]::after { width: 41px; height: 27px; transform: translate(9px, 7px); } /* Scatter preview */ .device-preview-cards[data-card-style="cards-scatter"]::before { width: 41px; height: 27px; transform: translate(-9px, 3px) rotate(-8deg); } .device-preview-cards[data-card-style="cards-scatter"]::after { width: 37px; height: 24px; transform: translate(9px, -5px) rotate(5deg); } /* Shelf preview */ .device-preview-cards[data-card-style="cards-shelf"]::before { width: 37px; height: 27px; transform: perspective(140px) rotateX(-5deg) translateX(-14px); } .device-preview-cards[data-card-style="cards-shelf"]::after { width: 37px; height: 27px; transform: perspective(140px) rotateX(-5deg) translateX(14px); } /* Trio preview */ .device-preview-cards[data-card-style="cards-trio"]::before { width: 44px; height: 31px; transform: translate(0px, -9px); } .device-preview-cards[data-card-style="cards-trio"]::after { width: 34px; height: 24px; transform: translate(12px, 9px); } /* ─── Text Elements (Typography Layer) — Phase 1 ─── */ .text-layer { position: absolute; inset: 0; pointer-events: none; } .text-layer[data-z="below"] { z-index: 15; } .text-layer[data-z="above"] { z-index: 100; } /* When a text-layer has no children, drop it from the rendering tree so it doesn't spawn an extra stacking context that the compositor has to walk on every wheel-zoom frame. */ .text-layer:empty { display: none; } .text-element { position: absolute; pointer-events: auto; cursor: default; transform: translate(-50%, -50%); white-space: pre-wrap; word-wrap: break-word; box-sizing: border-box; user-select: none; border-radius: 6px; /* Subtle highlight fades in on hover / selection. Dark-bg defaults to white-alpha; the data-bg-light override below flips it to black-alpha for light backdrops so the highlight stays visible. */ transition: background-color 130ms ease; /* Phase 3: prevent the browser from interpreting a pointer drag as page pan/zoom on touch devices — pointer capture handles the rest. */ touch-action: none; } .text-element:hover { background-color: rgba(255, 255, 255, 0.03); } .text-element[data-selected="true"] { background-color: rgba(255, 255, 255, 0.05); cursor: move; } /* a11y: keyboard focus on a text node — only render when the user is navigating with Tab, not on click/drag. */ .text-element:focus { outline: none; } .text-element:focus-visible { outline: 2px solid #5b8def; outline-offset: 4px; } .text-element[data-editing="true"] { background-color: rgba(255, 255, 255, 0.08); cursor: text; user-select: text; outline: none; } /* Soften the browser-native text selection when editing a text element. The default OS blue is dominant on top of large display text. Use a thin white-alpha (or black-alpha on light bg, see override below) so the selection feels like part of the app theme. */ .text-element ::selection, .text-element-content::selection { background-color: rgba(255, 255, 255, 0.18); color: inherit; } #exportBlock[data-bg-light="true"] .text-element ::selection, #exportBlock[data-bg-light="true"] .text-element-content::selection { background-color: rgba(0, 0, 0, 0.14); color: inherit; } /* Caret fix for empty contenteditable: an empty inline has no baseline box, so the browser falls back to placing the caret at the bottom of the parent's line-box, which makes it look "too tall and shifted down" right after the user deletes all text. A zero-width space gives the span a stable baseline; pseudo content is invisible to innerText so commit/cancel still read the right value. */ .text-element[data-editing="true"] .text-element-content:empty::before { content: '\200B'; } #exportBlock[data-bg-light="true"] .text-element:hover { background-color: rgba(0, 0, 0, 0.03); } #exportBlock[data-bg-light="true"] .text-element[data-selected="true"] { background-color: rgba(0, 0, 0, 0.05); } #exportBlock[data-bg-light="true"] .text-element[data-editing="true"] { background-color: rgba(0, 0, 0, 0.08); } /* ── Side resize handles (visible only when selected/editing) ── */ .text-resize-handle { position: absolute; top: 50%; width: 5px; height: 26px; margin-top: -13px; background: #FFFFFF; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 999px; cursor: ew-resize; opacity: 0; pointer-events: none; transition: opacity 130ms ease; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35); z-index: 1; /* User-select must not fire on drag */ user-select: none; -webkit-user-select: none; touch-action: none; } .text-resize-handle--left { left: -3px; transform: translateX(-100%); } .text-resize-handle--right { right: -3px; transform: translateX(100%); } .text-element[data-selected="true"] .text-resize-handle, .text-element[data-editing="true"] .text-resize-handle { opacity: 1; pointer-events: auto; } #exportBlock[data-bg-light="true"] .text-resize-handle { background: #1A1A1E; border-color: rgba(255, 255, 255, 0.35); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); } /* Promote to its own layer only during the entrance animation so the GPU doesn't keep a layer pinned for the lifetime of the element. */ .text-element--enter { animation: text-element-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; will-change: filter, opacity; } @keyframes text-element-in { 0% { opacity: 0; filter: blur(12px); transform: translate(-50%, -50%) translateY(8px); } 100% { opacity: 1; filter: blur(0px); transform: translate(-50%, -50%) translateY(0); } } /* ── Typography sidebar panel ── */ .typography-wrap .text-input, .typography-wrap .text-select { width: 100%; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 0 10px; height: 32px; color: var(--color-gray-100); font-size: 13px; transition: border-color 150ms ease, background 150ms ease; box-sizing: border-box; } .typography-wrap .text-input:hover, .typography-wrap .text-select:hover { border-color: var(--border-default); background: rgba(255, 255, 255, 0.04); } .typography-wrap .text-input:focus, .typography-wrap .text-select:focus { outline: none; border-color: var(--color-gray-400); background: rgba(255, 255, 255, 0.04); } .typography-wrap textarea.text-input { height: auto; padding: 8px 10px; resize: none; font-family: inherit; line-height: 1.4; } .typography-wrap .text-select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-position: right 10px center; background-repeat: no-repeat; background-size: 12px 12px; padding-right: 28px; cursor: pointer; } /* Icon-only button (delete in actions row) */ .text-icon-btn { width: 32px; height: 32px; flex-shrink: 0; border-radius: 8px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02); color: var(--color-gray-400); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; box-sizing: border-box; padding: 0; } .text-icon-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-default); color: var(--color-gray-50); } .text-icon-btn--danger:hover { color: #ff7a7a; border-color: rgba(255, 122, 122, 0.4); background: rgba(255, 122, 122, 0.08); } /* Compact color chip — sits in the Font row */ .typography-wrap .text-color-wrap { position: relative; } .typography-wrap .text-color-chip { width: 32px; height: 32px; padding: 3px; border: 1px solid var(--border-subtle); border-radius: 8px; background: linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%) 0 0/10px 10px, linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%) 5px 5px/10px 10px; cursor: pointer; flex-shrink: 0; box-sizing: border-box; transition: border-color 150ms ease, transform 150ms ease; } .typography-wrap .text-color-chip:hover { border-color: var(--border-default); } .typography-wrap .text-color-chip > span { border-radius: 5px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.25); } .typography-wrap .text-color-wrap[data-open="true"] .text-color-chip { border-color: var(--color-gray-300); } /* Color popover */ .typography-wrap .text-color-popover { position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 200; background: #1f1f23; border: 1px solid var(--border-default); border-radius: 14px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6); padding: 14px; width: 248px; box-sizing: border-box; animation: text-color-pop-in 140ms cubic-bezier(0.22, 1, 0.36, 1); } .typography-wrap .text-color-popover[hidden] { display: none; } @keyframes text-color-pop-in { 0% { opacity: 0; transform: translateY(4px) scale(0.98); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .typography-wrap .text-color-hex-input { margin-top: 12px; width: 100%; height: 34px; padding: 0 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 9px; color: var(--color-gray-100); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; text-align: center; letter-spacing: 1px; text-transform: uppercase; box-sizing: border-box; transition: border-color 150ms ease, background 150ms ease; } .typography-wrap .text-color-hex-input:focus { outline: none; border-color: var(--color-gray-300); background: rgba(255, 255, 255, 0.06); } /* Vanilla-picker overrides — dark theme, mirrors shadow picker layout */ .typography-wrap .picker_wrapper.popup, .typography-wrap .picker_wrapper { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; width: 220px !important; min-width: 0 !important; font-family: inherit !important; display: flex !important; flex-direction: column !important; } .typography-wrap .picker_arrow { display: none !important; } .typography-wrap .picker_sl { width: 220px !important; height: 150px !important; border-radius: 10px !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; box-shadow: none !important; flex: none !important; order: 1; position: relative; } .typography-wrap .picker_sl:before { content: ''; position: absolute; inset: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06); pointer-events: none; } .typography-wrap .picker_hue { width: 220px !important; height: 12px !important; border-radius: 999px !important; margin: 14px 0 0 0 !important; padding: 0 !important; box-shadow: none !important; flex: none !important; order: 2; position: relative; } .typography-wrap .picker_alpha { display: none !important; } .typography-wrap .picker_sl .picker_selector, .typography-wrap .picker_hue .picker_selector { width: 18px !important; height: 18px !important; border-radius: 999px !important; border: 2px solid #fff !important; box-shadow: 0 2px 6px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.25) !important; padding: 0 !important; background: transparent !important; box-sizing: border-box; } .typography-wrap .picker_hue .picker_selector { top: 50% !important; } .typography-wrap .picker_editor, .typography-wrap .picker_sample, .typography-wrap .picker_done { display: none !important; } .typography-wrap .picker_wrapper * { box-sizing: border-box; } /* Segmented controls (align / z-layer) */ .text-seg-group { display: flex; gap: 2px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--border-subtle); border-radius: 8px; padding: 2px; height: 32px; box-sizing: border-box; } .text-seg-btn { flex: 1; border-radius: 6px; background: transparent; color: var(--color-gray-400); font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 150ms ease, color 150ms ease; border: 0; padding: 0 6px; min-width: 0; } .text-seg-btn:hover { color: var(--color-gray-200); } .text-seg-btn.text-seg-active { background: rgba(255, 255, 255, 0.08); color: var(--color-gray-50); } .text-seg-btn svg { width: 14px; height: 14px; flex-shrink: 0; } .text-action-btn { width: 100%; height: 32px; border-radius: 8px; border: 1px solid var(--border-subtle); background: rgba(255, 255, 255, 0.02); color: var(--color-gray-200); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; box-sizing: border-box; font-family: inherit; padding: 0 12px; } .text-action-btn:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--border-default); color: var(--color-gray-50); } .text-action-btn svg { flex-shrink: 0; } .text-action-btn--danger { color: var(--color-gray-400); } .text-action-btn--danger:hover { color: #ff7a7a; border-color: rgba(255, 122, 122, 0.4); background: rgba(255, 122, 122, 0.08); } /* Hide controls entirely when no text element is selected */ .typography-wrap[data-no-selection="true"] .text-controls-grid { display: none !important; } /* ── Chip list (Phase 2 — multi-element) ── */ .text-chip-list { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .text-chip-list:empty { display: none; } .text-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; height: 26px; padding: 0 4px 0 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border-subtle); border-radius: 999px; color: var(--color-gray-200); font-size: 11px; line-height: 1; cursor: pointer; transition: background 150ms ease, border-color 150ms ease, color 150ms ease; overflow: hidden; flex: 0 1 auto; min-width: 0; } .text-chip:hover { background: rgba(255, 255, 255, 0.07); border-color: var(--border-default); color: var(--color-gray-50); } .text-chip[data-active="true"] { /* Mirrors .text-seg-active (white-alpha) so chips read like the segmented controls already used in the Text panel. */ background: rgba(255, 255, 255, 0.08); border-color: var(--border-default); color: var(--color-gray-50); } .text-chip-label { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-chip-x { width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-gray-400); transition: background 120ms ease, color 120ms ease; flex-shrink: 0; margin-left: 2px; } .text-chip-x:hover { background: rgba(255, 122, 122, 0.18); color: #ff9a9a; } .text-chip-x svg { width: 9px; height: 9px; } .text-chip-add { width: 26px; height: 26px; border-radius: 999px; border: 1px dashed var(--border-subtle); background: transparent; color: var(--color-gray-400); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background 150ms ease; flex-shrink: 0; } .text-chip-add:hover { border-style: solid; border-color: var(--border-default); color: var(--color-gray-50); background: rgba(255, 255, 255, 0.04); } .text-chip-add svg { width: 10px; height: 10px; } /* Hint shown when the user has text elements but nothing selected. */ .text-empty-hint { color: var(--color-gray-400); font-size: 12px; line-height: 1.4; padding: 6px 4px 0; } /* Hide the empty hint by default — JS toggles it on. */ .typography-wrap .text-empty-hint { display: none; } .typography-wrap[data-empty-hint="true"] .text-empty-hint { display: block; } /* When the panel has chips, the standalone Add button becomes redundant (the "+" tail of the chip row takes over). */ .typography-wrap[data-has-elements="true"] #text-add-btn { display: none !important; } /* ── Custom font picker (Phase 4) ── Replaces the native