/* ── Global layout constraints ── */
html {
min-width: 1024px;
}
/* Single source of truth for thumbnail tile padding (applies to .thumb-select-tile, .shape-selector-tile, .design-tile). */
:root {
--thumb-tile-padding: 4px;
}
/* ── Light theme (applied to all pages except create) ───────────────────────
Add class="light-theme" to on a page to flip the global palette to
light. The create page intentionally stays dark. */
body.light-theme {
background-color: #F1F1F5;
color: #1b1b1d;
}
body.light-theme h1,
body.light-theme h2,
body.light-theme h3 {
color: #1b1b1d;
}
body.light-theme .top-nav {
background: #F1F1F5;
border-bottom: 1px solid #e0e0e3;
}
body.light-theme .top-nav-logo {
filter: none;
}
body.light-theme .top-nav-link {
color: #555;
}
body.light-theme .top-nav-link:hover {
color: #1b1b1d;
background: #e0e0e3;
}
body.light-theme .top-nav-link.active {
color: #1b1b1d;
}
.branding-links {
display: flex;
margin-bottom: 10px;
}
.control-section .branding-links {
gap: 5px;
flex-wrap: wrap;
}
.branding-link {
color: #a0a0a3;
text-decoration: none;
font-size: 12px;
background-color: #1b1b1d;
padding: 4px 10px;
border-radius: 3px;
border: none;
transition: background 0.15s, color 0.15s;
cursor: pointer;
}
.branding-link.selected {
color: #e3e3e5;
background-color: #333335;
box-shadow: 0 0 0 1px #a0a0a3 inset;
cursor: default;
}
.branding-link:hover {
color: #e3e3e5;
background: #333335;
}
/* Custom branding text input */
.branding-custom-text-row {
display: flex;
align-items: center;
gap: 8px;
margin-top: 6px;
margin-bottom: 10px;
}
.branding-custom-charcount {
flex-shrink: 0;
width: 38px;
text-align: right;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-variant-numeric: tabular-nums;
color: #656569;
letter-spacing: 0.3px;
}
.branding-custom-input {
width: 100%;
height: 36px;
box-sizing: border-box;
padding: 6px 10px;
background: #0b0b0d;
color: #e3e3e5;
border: 1px solid #333335;
border-radius: 3px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.5px;
outline: none;
}
.branding-custom-input::placeholder {
color: #656569;
}
.branding-custom-input:focus {
border-color: #656569;
}
/* Palette selector UI (number links) */
.palette-selector-row {
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.palette-title {
margin-right: 10px;
}
.palette-links {
display: flex;
gap: 8px;
margin: 0;
flex-wrap: wrap;
}
.palette-link.selected {
color: #000;
background: #d8d2ca;
}
.palette-link:hover {
color: #e3e3e5;
background: #353537;
}
.palette-swatches-row {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 8px;
}
.palette-swatches-row .palette-swatch {
width: 15px;
height: 15px;
border-radius: 3px;
border: 1px solid rgba(255, 255, 255, 0.15);
padding: 0;
cursor: pointer;
transition: all 0.2s ease;
}
.palette-swatches-row .palette-swatch.selected {
border-color: #e3e3e5;
box-shadow: 0 0 0 1px #e3e3e5;
}
.palette-swatches-row .palette-swatch.unselected {
opacity: 0.35;
}
.palette-swatches-row .palette-swatch:hover {
transform: scale(1.1);
}
/* Default palette grid UI (4 columns) */
.palette-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 3px;
margin-top: 10px;
}
/* Extra bottom margin for collections whose palette grid sits above a Re-roll button */
body.abc-shapes .palette-cards-grid,
body.fragments .palette-cards-grid,
body.squares-grid .palette-cards-grid,
body.quadra .palette-cards-grid,
body.grid .palette-cards-grid,
body.blocks-3d .palette-cards-grid {
margin-bottom: 15px;
}
/* Brasília: single 12-colour super palette — full-width row */
body.brasilia .palette-cards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 3px;
margin-top: 10px;
margin-bottom: 15px;
}
body.brasilia .palette-card .palette-swatches {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 3px;
width: 100%;
}
body.brasilia .palette-swatch {
position: relative;
border: none;
height: 20px;
}
body.brasilia .palette-card.selected .palette-swatch.selected {
box-shadow: none;
}
body.brasilia .palette-card.selected .palette-swatch.selected::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
background: var(--check-color, #e3e3e5);
-webkit-mask: url('../assets/icons/color-check.svg') no-repeat center / contain;
mask: url('../assets/icons/color-check.svg') no-repeat center / contain;
}
/* Gradient Rings: palette card grid (4 columns) */
.gradient-rings .palette-cards-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 10px;
}
.grid .palette-card {
border-radius: 3px;
}
/* ABC Shapes: 5-colour swatches */
/* Organics / Primitives: show checkmark for both accent and background (no bg concept) */
body.organics .palette-card.selected .palette-swatch.state-background::after,
body.primitives .palette-card.selected .palette-swatch.state-background::after {
-webkit-mask-image: url('../assets/icons/color-check.svg');
mask-image: url('../assets/icons/color-check.svg');
width: 10px;
height: 10px;
}
body.abc-shapes .palette-swatch,
body.fragments .palette-swatch,
body.concrete .palette-swatch,
body.blocks-3d .palette-swatch,
body.lines .palette-swatch,
body.grid .palette-swatch,
body.squares-grid .palette-swatch,
body.quadra .palette-swatch,
body.geometry .palette-swatch,
body.organics .palette-swatch,
body.trace .palette-swatch,
body.gradient-rings .palette-swatch,
body.grid-systems .palette-swatch,
body.primitives .palette-swatch,
body.echo .palette-swatch,
body.tridimensional .palette-swatch {
position: relative;
border: none;
}
/* Subtle border on the darkest (first) swatch so it doesn't blend into the dark UI */
.palette-swatches .palette-swatch:first-child {
border: 1px solid rgba(255, 255, 255, 0.15);
}
body.abc-shapes .palette-card.selected .palette-swatch.selected,
body.fragments .palette-card.selected .palette-swatch.selected,
body.concrete .palette-card.selected .palette-swatch.selected,
body.blocks-3d .palette-card.selected .palette-swatch.selected,
body.lines .palette-card.selected .palette-swatch.selected,
body.grid .palette-card.selected .palette-swatch.selected,
body.squares-grid .palette-card.selected .palette-swatch.selected,
body.quadra .palette-card.selected .palette-swatch.selected,
body.geometry .palette-card.selected .palette-swatch.selected,
body.organics .palette-card.selected .palette-swatch.selected,
body.trace .palette-card.selected .palette-swatch.selected,
body.gradient-rings .palette-card.selected .palette-swatch.selected,
body.grid-systems .palette-card.selected .palette-swatch.selected,
body.primitives .palette-card.selected .palette-swatch.selected,
body.echo .palette-card.selected .palette-swatch.selected,
body.tridimensional .palette-card.selected .palette-swatch.selected {
box-shadow: none;
}
body.abc-shapes .palette-card.selected .palette-swatch.selected::after,
body.fragments .palette-card.selected .palette-swatch.selected::after,
body.concrete .palette-card.selected .palette-swatch.selected::after,
body.blocks-3d .palette-card.selected .palette-swatch.selected::after,
body.lines .palette-card.selected .palette-swatch.selected::after,
body.grid .palette-card.selected .palette-swatch.selected::after,
body.squares-grid .palette-card.selected .palette-swatch.selected::after,
body.quadra .palette-card.selected .palette-swatch.selected::after,
body.geometry .palette-card.selected .palette-swatch.selected::after,
body.organics .palette-card.selected .palette-swatch.selected::after,
body.trace .palette-card.selected .palette-swatch.selected::after,
body.gradient-rings .palette-card.selected .palette-swatch.selected::after,
body.grid-systems .palette-card.selected .palette-swatch.selected::after,
body.primitives .palette-card.selected .palette-swatch.selected::after,
body.echo .palette-card.selected .palette-swatch.selected::after,
body.tridimensional .palette-card.selected .palette-swatch.selected::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
background: var(--check-color, #e3e3e5);
-webkit-mask: url('../assets/icons/color-check.svg') no-repeat center / contain;
mask: url('../assets/icons/color-check.svg') no-repeat center / contain;
}
/* ── Three-state swatch icons (accent / background / disabled) ──
Card-based grid (e.g. Fragments) — icons only inside the selected card.
Row-based swatches — icons always visible. */
/* Accent: no icon — active colors need no indicator */
/* Background: bg icon (card grid) */
.palette-card.selected .palette-swatch.state-background::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 12px;
height: 12px;
transform: translate(-50%, -50%);
background: var(--check-color, #e3e3e5);
-webkit-mask: url('../assets/icons/color-bg.svg') no-repeat center / contain;
mask: url('../assets/icons/color-bg.svg') no-repeat center / contain;
}
/* Disabled: uncheck icon (card grid) */
.palette-card.selected .palette-swatch.state-disabled::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
background: var(--check-color, #e3e3e5);
-webkit-mask: url('../assets/icons/color-uncheck.svg') no-repeat center / contain;
mask: url('../assets/icons/color-uncheck.svg') no-repeat center / contain;
}
/* Accent: no icon (row swatches) */
/* Background: bg icon (row swatches) */
.palette-swatches-row .palette-swatch.state-background::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
background: var(--check-color, #e3e3e5);
-webkit-mask: url('../assets/icons/color-bg.svg') no-repeat center / contain;
mask: url('../assets/icons/color-bg.svg') no-repeat center / contain;
}
/* Disabled: uncheck icon (row swatches) */
.palette-swatches-row .palette-swatch.state-disabled::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 8px;
height: 8px;
transform: translate(-50%, -50%);
background: var(--check-color, #e3e3e5);
-webkit-mask: url('../assets/icons/color-uncheck.svg') no-repeat center / contain;
mask: url('../assets/icons/color-uncheck.svg') no-repeat center / contain;
}
/* ── Global text link style ── */
.text-link {
color: #3366ff;
text-decoration: none;
font-size: 12px;
letter-spacing: 0.5px;
cursor: pointer;
transition: color 0.2s;
display: inline-block;
}
.text-link:hover {
color: #4097ff;
}
.text-link::after {
content: none;
}
/* Shared invert-colors row for dual-colour swatch sections (MNML, Concrete, etc.) */
.swatch-invert-row {
margin-top: 6px;
margin-bottom: 0;
text-align: left;
display: flex;
justify-content: flex-start;
}
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/* Slider system tokens (used by all collections) */
--range-track-height: 2px;
--range-track-bg: #333335;
--range-thumb-size: 12px;
--range-thumb-bg: #e3e3e5;
--range-vertical-margin: 10px;
font-family: 'Inter', sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-size: 14px;
line-height: 1.6;
color: #e3e3e5;
background-color: #0b0b0d;
overflow-x: hidden;
transition: background-color 0.3s ease, color 0.3s ease;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Homepage */
.homepage-container {
display: flex;
align-items: center;
justify-content: center;
min-height: calc(100vh - 48px);
}
.homepage-title {
font-size: 2.4rem;
font-weight: 400;
letter-spacing: 0.04em;
color: #e3e3e5;
}
h1,
h2,
h3 {
font-family: 'Poppins', sans-serif;
font-weight: 300;
font-size: 48px;
}
/* Top navigation (Shopify-integrated links) */
.top-nav {
position: sticky;
top: 0;
z-index: 10;
background: #1b1b1d;
}
/* Create page: nav uses a 1px hairline instead of a solid bar so the side
columns can be seen sliding behind it on scroll. The line is drawn as a
pseudo-element on .top-nav-inner so it sits within the 1920px max-width
container and is inset by the 30px horizontal padding (i.e. it runs from
the logo's left edge to the right-most menu item's right edge). */
body.create-page .top-nav {
background: transparent;
border-bottom: none;
}
body.create-page .top-nav-inner {
position: relative;
}
body.create-page .top-nav-inner::after {
content: '';
position: absolute;
left: 30px;
right: 30px;
bottom: 0;
height: 1px;
background: #212123;
}
.top-nav-inner {
max-width: 1920px;
margin: 0 auto;
width: 100%;
padding: 8px 30px;
display: flex;
gap: 12px;
align-items: center;
}
.top-nav-inner > a:first-child {
margin-right: auto;
}
.top-nav-logo {
height: 19px;
width: auto;
margin-top: 4px;
display: flex;
align-items: center;
filter: brightness(0) invert(1);
}
.top-nav-link {
color: #aaa;
text-decoration: none;
font-size: 13px;
padding: 6px 10px;
border-radius: 3px;
border: none;
transition: background 0.15s, color 0.15s;
}
.top-nav-link:hover {
color: #e3e3e5;
background: #333;
}
.top-nav-link.active {
color: #e3e3e5;
}
/* Layout Structure */
.app-container {
display: flex;
align-items: flex-start;
max-width: 1920px;
margin: 0 auto;
width: 100%;
/* No margin-top: columns extend right up to the nav (sliding behind it
on scroll). Internal breathing room is added via padding-top on the
columns and the canvas-stack instead. */
/* Gap shrinks 1:1 with the viewport (0.5px each side per 1px lost) so
the canvas keeps its size as long as the gap can give. At 1920px
viewport the gap is 100px; at ~1780px it hits the 30px floor; below
that the canvas starts shrinking because side columns are fixed. */
gap: clamp(30px, calc(0.5 * (100vw - 1720px)), 100px);
padding: 0 30px;
}
/* Left Column - Collections Menu */
.left-column {
/* Default 372px (20% of the 1860px content area at 1920px container).
Allowed to shrink down to 90% (335px ≈ -10%) once the gap has
collapsed and the canvas can't give any more room. */
flex: 0 1 372px;
min-width: 335px;
position: sticky;
top: 0;
/* Padding moved here from .app-container's margin-top so that on scroll
the column box reaches up to the nav (sliding behind it) instead of
leaving a body-color strip above. */
padding-top: 40px;
max-height: 100vh;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
}
.left-column::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.collections-menu {
list-style: none;
}
.collection-item {
margin-bottom: 30px;
cursor: pointer;
transition: opacity 0.3s ease;
}
.collection-item:hover {
opacity: 0.7;
}
.collection-item.active {
opacity: 1;
}
.collection-item.active .collection-name {
text-decoration: underline;
}
.collection-name {
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 5px;
}
.collection-desc {
font-size: 14px;
color: #888;
line-height: 1.4;
margin-bottom: 25px;
}
/* Collection Switcher */
.collection-heading {
letter-spacing: 0.5px;
margin-bottom: 20px;
color: #e3e3e5;
}
/* Recipe Section */
.recipe-loader {
margin: 0 0 20px 0;
display: flex;
flex-direction: column;
gap: 6px;
border-radius: 3px;
background-color: transparent;
padding: 0;
}
.recipe-input-row {
display: flex;
gap: 6px;
}
.recipe-input-row input[type="text"] {
flex: 0 0 calc(70% - 4px);
min-width: 0;
height: 36px;
padding: 6px 10px;
background: #0b0b0d;
color: #e3e3e5;
border: 1px solid #333335;
border-radius: 3px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.5px;
box-sizing: border-box;
}
.recipe-input-row input[type="text"]::placeholder {
color: #656569;
}
.recipe-input-row input[type="text"].recipe-status-success::placeholder,
.recipe-input-row input[type="text"].recipe-status-error::placeholder {
color: #e3e3e5;
}
.recipe-input-row input[type="text"]:focus {
outline: none;
border-color: #656569;
}
.recipe-input-row .recipe-loader-btn {
flex: 0 0 calc(30% - 2px);
min-width: 0;
}
.recipe-loader-btn {
width: 100%;
height: 36px;
background: #1b1b1d;
color: #a0a0a3;
border: none;
border-radius: 3px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.5px;
cursor: pointer;
transition: background 0.2s;
}
.recipe-loader-btn:hover {
background: #333335;
color: #e3e3e5;
}
.recipe-loader-btn:active {
filter: brightness(120%);
}
.recipe-loader-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.copy-recipe-btn {
justify-content: center;
gap: 4px;
}
.copy-recipe-btn.collection-btn {
justify-content: center;
}
.copy-recipe-icon {
width: 16px;
height: 16px;
display: block;
flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(100%);
opacity: 0.2;
}
.copy-recipe-btn:hover .copy-recipe-icon {
opacity: 0.75;
}
.copy-recipe-label {
line-height: 1;
}
.collection-switcher {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 5px;
}
.collection-btn {
height: 36px;
padding: 10px 5px;
background-color: #1b1b1d;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
color: #8b8b8e;
border: none;
border-radius: 3px;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: flex-start;
gap: 5px;
text-align: left;
}
.collection-btn .collection-icon {
width: 18px;
height: 18px;
margin: 0 5px 0 5px;
display: block;
flex-shrink: 0;
filter: brightness(0) saturate(100%) invert(100%);
opacity: 0.2;
}
.collection-btn:hover .collection-icon,
.collection-btn.active .collection-icon {
filter: brightness(0) saturate(100%) invert(100%);
opacity: 0.75;
}
.collection-btn:hover {
color: #e3e3e5;
background-color: #333335;
}
.collection-btn.active {
color: #e3e3e5;
background-color: #333335;
box-shadow: 0 0 0 1px #a0a0a3 inset;
cursor: default;
}
/* Center Column - Canvas */
.center-column {
flex: 1 1 420px; /* keep meaningful space for the poster on desktop */
min-width: 320px; /* prevent collapse to 0 when side columns get wide */
display: flex;
align-items: flex-start;
justify-content: center;
position: sticky;
top: 0;
/* Match the side columns' breathing room (replaces .app-container's
previous margin-top: 40px). */
padding-top: 40px;
}
.canvas-stack {
width: 100%;
/* Cap canvas height at 980px → at 2:3 ratio that's a 653.33px-wide stack. */
max-width: min(100%, calc(980px * 2 / 3));
display: flex;
flex-direction: column;
gap: 10px;
}
/* Vertically responsive canvas: constrain stack width so the 2:3 canvas
+ history bar always fit within the viewport. Only kicks in above 720px
viewport height — below that the layout scrolls naturally.
Overhead breakdown: ~35px nav + 40px margin-top + 10px gap + 22px
history bar + 43px breathing room = ~150px */
@media (min-height: 720px) {
.canvas-stack {
max-width: min(100%, calc((100vh - 150px) * 2 / 3), calc(980px * 2 / 3));
}
}
.canvas-container {
position: relative;
background-color: #1b1b1d;
border: 1px solid #333335;
width: 100%;
max-width: 100%;
/* Always show users the final print ratio (2:3) while composing. */
aspect-ratio: 2 / 3;
overflow: hidden;
padding: 0;
line-height: 0;
}
#design-canvas {
display: block;
/* Absolute-fill the 2:3 container so the DPR-scaled buffer size
has no effect on layout (fixes Safari stretching). */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Typen WebGL overlay (only visible when Typen collection is active) */
#typen-glcanvas {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
pointer-events: none;
z-index: 2;
/* The overlay should be visually identical in size to the 2D canvas.
We keep it bound to the same frame.
*/
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
}
/* ── History bar (below canvas) ── */
#history-bar {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: #999;
user-select: none;
padding: 0 2px;
}
.history-label {
color: #666;
font-weight: 500;
letter-spacing: 0.04em;
}
.history-btn {
background: none;
border: 1px solid #444;
color: #ccc;
width: 22px;
height: 22px;
font-size: 14px;
line-height: 1;
border-radius: 3px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
transition: opacity 0.15s;
}
.history-btn:hover:not(:disabled) {
border-color: #888;
color: #fff;
}
.history-btn:disabled {
opacity: 0.3;
cursor: default;
}
.history-pos {
min-width: 42px;
text-align: center;
font-variant-numeric: tabular-nums;
}
.history-sep {
color: #444;
}
.history-link {
background: none;
border: none;
color: #999;
cursor: pointer;
font-size: 12px;
padding: 0;
text-decoration: none;
transition: color 0.15s;
}
.history-link:hover:not(:disabled) {
color: #fff;
}
.history-link:disabled {
opacity: 0.3;
cursor: default;
}
/* Right Column - Controls */
.right-column {
/* Default 372px; matches .left-column. Allowed to shrink down to 90%
(335px) once the gap has collapsed and the canvas can't give more. */
flex: 0 1 372px;
min-width: 335px;
position: sticky;
top: 0;
/* Same as .left-column: padding-top replaces .app-container's old
margin-top so the column extends up to the nav on scroll. */
padding-top: 40px;
max-height: 100vh;
overflow-y: auto;
scrollbar-width: none; /* Firefox */
}
.right-column::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
.controls-section {
margin-bottom: 40px;
}
.design-specific-controls {
border-top: 1px solid #333;
padding-top: 20px;
margin-top: 20px;
}
.design-specific-controls .section-title {
color: #e3e3e5;
font-size: 11px;
}
.section-title {
font-size: 12px;
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: 20px;
color: #ccc;
}
/* Slider Controls */
.control-group {
margin-bottom: 25px;
}
/* Current UI builds each control as `.control` (JS-generated). */
.control {
margin: 25px 0 25px 0;
}
/* Label-only controls (subheadlines like "Shape", "Graphics") */
.control > label {
font-family: 'Inter', sans-serif;
font-size: 12px;
color: #8b8b8e;
}
/* Section grouping: wraps a headline + child controls into a logical block.
Controls the gap between headline and first child, plus spacing between sections. */
.control-section {
padding-bottom: 40px;
}
.control-section-title {
font-size: 12px;
letter-spacing: 0.7px;
text-transform: uppercase;
color: #d6d6db;
font-weight: 600;
margin-bottom: 15px;
}
.control-section-description {
font-size: 11px;
color: #9b9ba1;
margin-top: -10px;
margin-bottom: 10px;
line-height: 1.4;
}
/* Child controls inside a section collapse their outer margin
so that only the section's own spacing governs the layout. */
.control-section > .control {
margin-top: 8px;
margin-bottom: 0;
}
/* Design grid inside a section: tighten gap between title and thumbnails */
.control-section > .design-grid {
margin-top: 8px;
}
.control-label {
display: flex;
justify-content: space-between;
align-items: center;
font-family: 'Inter', sans-serif;
font-size: 12px;
margin-bottom: 3px;
color: #8b8b8e;
}
/* Keep Colors + Invert together on the left */
.control-label.colors-inline-header {
justify-content: flex-start;
gap: 15px;
}
.mnml-colors-sep {
color: #555;
}
/* Color group - multiple color inputs side by side */
.color-group-container {
display: flex;
gap: 10px;
margin-top: 5px;
}
.color-group-container input[type="color"] {
width: 100%;
height: 36px;
border: 2px solid #333;
border-radius: 3px;
cursor: pointer;
background: transparent;
}
.color-group-container input[type="color"]:hover {
border-color: #666;
}
.control-label label {
margin: 0;
}
.control-value {
color: #e3e3e5;
}
.range-control {
display: flex;
flex-direction: column;
gap: 0;
}
/* Range row control (two sliders side by side) */
.range-row-control {
margin-bottom: 20px;
}
.range-row-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.range-row-item {
display: flex;
flex-direction: column;
}
.range-row-item .control-label {
font-size: 12px;
}
/* Control row (two arbitrary controls side by side; used for paired toggles) */
.control-row-control {
margin-bottom: 20px;
}
.control-row-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.control-row-item {
display: flex;
flex-direction: column;
}
/* Avoid double vertical spacing from nested `.control` wrappers */
.control-row-item .control {
margin: 0;
}
/* Range sliders (shared system style across all collections) */
input[type="range"],
.range-input {
width: 100%;
height: var(--range-track-height);
margin: var(--range-vertical-margin) 0;
background: linear-gradient(to right,
#a0a0a3 0%, #a0a0a3 var(--range-fill-pct, 0%),
var(--range-track-bg) var(--range-fill-pct, 0%), var(--range-track-bg) 100%);
outline: none;
-webkit-appearance: none;
appearance: none;
cursor: pointer;
}
/* Firefox: filled portion of the track */
input[type="range"]::-moz-range-progress,
.range-input::-moz-range-progress {
background: #656569;
height: var(--range-track-height);
}
input[type="range"]::-moz-range-track,
.range-input::-moz-range-track {
background: var(--range-track-bg);
height: var(--range-track-height);
}
input[type="range"]:disabled,
.range-input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
input[type="range"]:disabled::-moz-range-progress,
.range-input:disabled::-moz-range-progress {
background: #656569;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: var(--range-thumb-size);
height: var(--range-thumb-size);
background: var(--range-thumb-bg);
border-radius: 50%;
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
width: var(--range-thumb-size);
height: var(--range-thumb-size);
background: var(--range-thumb-bg);
border-radius: 50%;
cursor: pointer;
border: none;
}
/* Control Buttons (match Reset Canvas button) */
.control-button,
.toggle-btn,
.segmented .segment,
.add-to-cart {
width: 100%;
height: 36px;
background: #1b1b1d;
color: #a0a0a3;
border: none;
border-radius: 3px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.5px;
cursor: pointer;
transition: background 0.15s;
}
.control-button:hover,
.toggle-btn:hover,
.segmented .segment:hover,
.add-to-cart:hover {
background: #333335;
transform: none;
color: #e3e3e5;
transition: background 0.15s;
}
.control-button:not(.toggle-btn):not(.segment):active {
filter: brightness(120%);
}
.control-button:disabled,
.toggle-btn:disabled,
.segmented .segment:disabled,
.add-to-cart:disabled {
cursor: not-allowed;
opacity: 0.35;
pointer-events: none;
}
/* Active state for toggle + segmented */
.toggle-btn.active,
.segmented .segment.active {
color: #e3e3e5;
background-color: #333335;
box-shadow: 0 0 0 1px #a0a0a3 inset;
cursor: default;
}
/* Segmented layout */
.segmented {
display: flex;
gap: 10px;
margin-top: 8px;
}
/* Wrapping segmented: auto-width buttons that flow onto multiple rows */
.segmented.wrap {
flex-wrap: wrap;
gap: 6px;
}
.segmented.wrap .segment {
flex: none;
min-width: 32px;
padding: 4px 6px;
}
/* Vertical segmented stack (used by some negative-value pill groups) */
.segmented.vertical {
flex-direction: column;
}
.segmented.vertical .segment {
flex: none;
width: 100%;
}
.segmented .segment {
width: auto;
flex: 1;
}
/* Color Swatches */
.swatch-container {
display: grid;
grid-template-columns: repeat(8, 1fr);
}
/* Unified swatch grid – fixed 25px cells with 3px gap */
body.mnml .swatch-container,
body.mnml-og .swatch-container,
body.tridimensional .swatch-container,
body.geometry .swatch-container,
body.fragments .swatch-container,
body.concrete .swatch-container,
body.lines .swatch-container,
body.organics .swatch-container,
body.trace .swatch-container,
body.gradient-shapes .swatch-container,
body.gradient-rings .swatch-container,
body.grid .swatch-container,
body.grid-systems .swatch-container,
body.squares-grid .swatch-container,
body.quadra .swatch-container,
body.abc-shapes .swatch-container,
body.brasilia .swatch-container {
grid-template-columns: repeat(8, 1fr);
gap: 6px;
justify-content: start;
align-items: start;
}
/* Superquadra block numbers — 4 columns */
.segmented.sq-blocks-grid {
display: grid;
grid-template-columns: repeat(10, 1fr);
gap: 4px;
}
.segmented.sq-blocks-grid .segment {
min-width: 0;
padding: 4px 2px;
font-size: 11px;
}
/* Half/half palette buttons (BG vs Art) */
.swatch {
width: 100%;
aspect-ratio: 2 / 1;
height: auto;
border: none;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
padding: 0;
overflow: hidden;
position: relative;
display: grid;
place-items: center;
border: 1px solid #2a2a2b;
}
/* Curated color swatches – unified sizing */
body.mnml .swatch,
body.mnml-og .swatch,
body.tridimensional .swatch,
body.geometry .swatch,
body.fragments .swatch,
body.concrete .swatch,
body.lines .swatch,
body.organics .swatch,
body.trace .swatch,
body.gradient-shapes .swatch,
body.gradient-rings .swatch,
body.grid .swatch,
body.grid-systems .swatch,
body.squares-grid .swatch,
body.quadra .swatch,
body.abc-shapes .swatch,
body.brasilia .swatch {
width: 100%;
height: auto;
aspect-ratio: 2 / 1.5;
max-width: 50px;
border-radius: 3px;
}
/* Center rectangle for 2-color swatches: inner = artwork color */
.swatch-dot {
width: 50%;
aspect-ratio: 1.5 / 0.75;
border-radius: 1px;
outline: none;
box-sizing: border-box;
}
/* Hide inner dot for collections that don't use 2-color swatches */
body.fragments .swatch-dot,
body.lines .swatch-dot,
body.organics .swatch-dot,
body.trace .swatch-dot,
body.gradient-shapes .swatch-dot,
body.abc-shapes .swatch-dot,
body.quadra .swatch-dot {
display: none;
}
/* Ensure dot is visible for MNML, Tridimensional, Geometry (outline), Concrete */
body.mnml .swatch-dot,
body.mnml-og .swatch-dot,
body.concrete .swatch-dot,
body.tridimensional .swatch-dot,
body.geometry .swatch-dot {
display: block;
}
.swatch.selected {
border: 1px solid #e3e3e5;
outline: 1px solid #1d1d1f;
outline-offset: -2px;
}
/* Organics collection: inherits Tridimensional swatch style */
.color-swatch {
width: 100%;
aspect-ratio: 1 / 1;
height: auto;
border-radius: 50%;
border: 2px solid #333;
cursor: pointer;
transition: all 0.3s ease;
position: relative;
padding: 0;
overflow: hidden;
}
.color-swatch:hover {
border-color: #666;
transform: scale(1.1);
}
.color-swatch.active {
border-color: #e3e3e5;
box-shadow: 0 0 0 2px #333, 0 0 0 4px #e3e3e5;
transform: scale(1.05);
}
.color-swatch:active {
transform: scale(0.95);
}
/* Inline swatch row (e.g., Fragments Background Color) */
.inline-swatch-header {
display: flex;
align-items: center;
gap: 20px;
}
.inline-swatch-options {
display: flex;
align-items: center;
gap: 8px;
}
/* Palette Grid Control (Fragments color system) */
.palette-grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
margin-top: 8px;
}
.palette-card {
display: flex;
flex-direction: column;
gap: 3px;
padding: 3px 3px;
background: transparent;
border: none;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
}
.palette-card:hover {
background: transparent;
}
.palette-card.selected {
background: transparent;
box-shadow: 0 0 0 1px #a0a0a3 inset;
}
.palette-family {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #999;
}
.palette-swatches {
display: flex;
flex-wrap: nowrap;
gap: 2px;
}
.palette-swatch {
flex: 1 1 0;
min-width: 0;
height: 14px;
border-radius: 1px;
border: 0px solid rgba(255, 255, 255, 0.15);
padding: 0;
cursor: pointer;
}
/* Selected color chips (Fragments palette picking) */
.palette-card.selected .palette-swatch.selected {
border-color: #e3e3e5;
box-shadow: 0 0 0 px #e3e3e5;
}
.palette-card.selected .palette-swatch.unselected {
opacity: 1;
}
/* Only allow picking colors on the active palette */
.palette-card:not(.selected) .palette-swatch {
cursor: default;
pointer-events: none;
}
/* Shape Selector (Fragments multi-select) */
.shape-selector-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 8px;
margin-top: 8px;
}
.shape-selector-tile {
width: 100%;
aspect-ratio: 1 / 1;
border: none;
border-radius: 3px;
cursor: pointer;
transition: all 0.2s ease;
background: #1b1b1d;
padding: var(--thumb-tile-padding);
display: flex;
align-items: center;
justify-content: center;
}
.shape-selector-tile:hover {
background: #333335;
}
.shape-selector-tile.selected {
background: #333335;
box-shadow: 0 0 0 1px #a0a0a3 inset;
}
.shape-selector-tile .thumb {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.shape-selector-tile .thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Thumb Select (single-select thumbnail grid) */
.thumb-select-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 6px;
margin-top: 8px;
}
/* ABC Shapes: extra bottom spacing below the grid */
body.abc-shapes .thumb-select-grid {
margin-bottom: 25px;
}
/* Compact grids (tighter gap) */
body.gradient-rings .thumb-select-grid,
body.grid-systems .thumb-select-grid {
gap: 4px;
}
.thumb-select-tile {
width: 100%;
aspect-ratio: 1 / 1;
border: none;
border-radius: 3px;
cursor: pointer;
transition: none;
background: #1b1b1d;
padding: var(--thumb-tile-padding);
display: flex;
align-items: center;
justify-content: center;
}
.thumb-select-tile:hover,
.thumb-select-tile:active {
transform: none;
background: #333335;
}
.thumb-select-tile.selected {
border: none;
background: #333335;
box-shadow: 0 0 0 1px #a0a0a3 inset;
opacity: 1;
cursor: default;
}
.thumb-select-tile .thumb {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.thumb-select-tile .thumb img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* Global thumbnail dimming: invert-to-white + dimmed, selected/hovered at full brightness.
Applies to all tile variants: .thumb-select-tile, .design-tile, .shape-selector-tile. */
.thumb-select-tile .thumb img,
.design-tile .thumb img,
.shape-selector-tile .thumb img {
filter: invert(1);
opacity: 0.35;
transition: opacity 0.2s ease;
}
.thumb-select-tile.selected .thumb img,
.thumb-select-tile:hover .thumb img,
.design-tile.selected .thumb img,
.design-tile:hover .thumb img,
.shape-selector-tile.selected .thumb img,
.shape-selector-tile:hover .thumb img {
opacity: 1;
}
/* Squares Grid: order badge for selected designs */
body.squares-grid .thumb-select-tile {
position: relative;
}
body.squares-grid .thumb-select-tile .order-badge {
position: absolute;
top: 1px;
right: 0px;
width: 12px;
height: 12px;
border-radius: 3px;
color: #a0a0a3;
font-size: 9px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
/* Design Grid */
.design-grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 4px;
margin-top: 8px;
min-width: 0; /* Safari: allow grid to shrink inside flex parent */
}
.design-tile {
width: 100%;
min-width: 0; /* Safari: allow tile to shrink below image intrinsic size */
aspect-ratio: 1 / 1;
border: none;
border-radius: 3px;
cursor: pointer;
transition: none;
background: #1b1b1d;
padding: var(--thumb-tile-padding);
display: flex;
align-items: center;
justify-content: center;
}
/* No hover/click states for thumbnails (keep selected only) */
.design-tile:hover,
.design-tile:active {
transform: none;
background: #333335;
}
.design-tile.selected {
background: #333335;
box-shadow: 0 0 0 1px #a0a0a3 inset;
cursor: default;
}
.design-tile .thumb {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.design-tile .thumb img {
width: 100%;
height: 100%;
object-fit: contain;
max-width: 100%; /* Safari: prevent image from expanding tile */
}
/* Checkbox Controls */
.checkbox-label {
display: flex !important;
align-items: center;
justify-content: flex-start !important;
gap: 8px;
cursor: pointer;
}
.checkbox-label input[type="checkbox"] {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
}
/* Print Info */
.print-info {
font-family: 'Inter', sans-serif;
font-size: 13px;
color: #a0a0a3;
line-height: 1.5;
margin-top: -5px;
}
/* Add to Cart Button: inherits the shared button style above */
.add-to-cart {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
/* Purchase controls (size + buy) */
.purchase-controls {
margin-top: 16px;
display: flex;
flex-direction: column;
gap: 10px;
}
.purchase-label {
font-size: 11px;
color: #888;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.purchase-size {
width: 100%;
height: 36px;
padding: 0 0 0 10px;
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.5px;
border-radius: 3px;
border: 1px solid #333335;
background: #0b0b0d;
color: #e3e3e5;
outline: none;
-webkit-appearance: none;
appearance: none;
background-image: url('../assets/icons/dropdown-arrow.svg');
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 10px 6px;
}
.buy-print {
width: 100%;
height: 50px;
background-color: #3366ff;
font-family: 'Inter', sans-serif;
font-weight: 600;
color: #e3e3e5;
border: none;
border-radius: 3px;
font-size: 13px;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
text-transform: uppercase;
}
.buy-print:hover {
background-color: #3381ff;
}
.buy-print:disabled {
opacity: 0.65;
cursor: not-allowed;
transform: none;
}
/* ── Mobile wall (shown below 1024px) ── */
#mobile-wall {
display: none;
}
@media (max-width: 1023px) {
#mobile-wall {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: fixed;
inset: 0;
background: #111113;
z-index: 99999;
padding: 40px;
text-align: center;
}
.mobile-wall-headline {
font-family: 'Poppins', sans-serif;
font-size: 22px;
font-weight: 400;
color: #e3e3e5;
margin: 0 0 16px;
}
.mobile-wall-body {
font-family: 'Inter', sans-serif;
font-size: 15px;
color: #666;
line-height: 1.7;
max-width: 380px;
}
}
/* ── About Collections link ── */
.about-collections-link {
margin: 10px 0 30px 0;
}
.about-recipes-link {
margin: 5px 0 10px 0;
align-self: flex-start;
}
/* ── About Collections modal ── */
.about-modal-overlay {
position: fixed;
inset: 0;
z-index: 9000;
background: rgba(0, 0, 0, 0.85);
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 50px 0;
display: flex;
justify-content: center;
align-items: flex-start;
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
}
#about-recipes-modal.about-modal-overlay {
align-items: center;
}
.about-modal {
position: relative;
width: 100%;
max-width: 840px;
background: #19191a;
border-radius: 3px;
padding: 50px;
color: #e3e3e5;
flex-shrink: 0;
}
#about-collections-modal .about-modal {
max-width: 1280px;
}
.about-modal-close {
position: absolute;
top: 15px;
right: 20px;
background: none;
border: none;
color: #d8d2ca;
font-size: 32px;
line-height: 1;
cursor: pointer;
transition: color 0.2s;
}
.about-modal-close:hover {
color: #d8d2ca;
}
.about-modal-title {
color: #d8d2ca;
}
.about-modal-body {
display: flex;
flex-direction: column;
}
#about-collections-modal .about-modal-body {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0 80px;
margin-top: 30px;
}
.about-modal-item {
padding: 40px 0px;
}
.about-modal-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
#about-collections-modal .about-modal-item {
display: grid;
grid-template-columns: 180px 1fr;
gap: 30px;
align-items: start;
border-bottom: 0px solid #29292b;
padding-bottom: 60px;
}
#about-collections-modal .about-modal-item:last-child,
#about-collections-modal .about-modal-item:nth-last-child(2):nth-child(odd) {
border-bottom: none;
padding-bottom: 0;
}
.about-modal-item-img {
width: 100%;
aspect-ratio: 2 / 3;
object-fit: cover;
display: block;
}
.about-modal-item-text {
display: flex;
flex-direction: column;
gap: 8px;
}
.about-modal-item-name {
font-size: 21px;
letter-spacing: 0.5px;
color: #ffffff;
margin-bottom: 5px;
}
.about-modal-item-desc {
font-family: 'Inter', sans-serif;
font-weight: 400;
font-size: 15px;
color: #8b8b8e;
line-height: 1.3;
}
/* Branding options link (below branding options row) */
.branding-options-link {
margin-left: 0;
display: inline-block;
align-self: flex-start;
}
/* Branding examples grid inside modal */
.branding-examples-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
padding-top: 20px;
}
.branding-example-card {
aspect-ratio: 2 / 3;
background: #29292b;
border-radius: 3px;
display: flex;
align-items: center;
justify-content: center;
}
.branding-example-placeholder {
font-size: 13px;
color: #666;
letter-spacing: 0.5px;
}