:root { --paper: #f7f4ee; --paper-2: #fffdf8; --ink: #151716; --muted: #5f6762; --line: #d9d3c6; --line-dark: #2b302e; --teal: #20b9aa; --brand-orange: #c9441f; --orange: #f0744f; --nav-orange: #c9441f; --guide-pink: #df2b91; --yellow: #fff100; --red: #eb0028; --green: #14785d; --review: #a96500; --fail: #b42318; --white: #ffffff; --editor-orange-surface: #d84e2d; /* Dark grayscale editor chrome (canvas.html only, body.editor-dark). Orange stays the brand mark; dieline/guide colours stay saturated because converters read them as technical conventions. */ --editor-dark-bg: #232325; --editor-dark-panel: #313134; --editor-dark-raised: #3d3d41; --editor-dark-hover: #4a4a4f; --editor-dark-line: rgba(255, 255, 255, 0.14); --editor-dark-line-strong: rgba(255, 255, 255, 0.26); --editor-dark-text: #ececea; --editor-dark-muted: rgba(255, 255, 255, 0.62); --editor-topbar-h: 125px; --shadow: 0 24px 80px rgba(20, 23, 22, 0.12); --shadow-soft: 0 14px 40px rgba(20, 23, 22, 0.08); --radius: 8px; --max: 1180px; --font-brand: "Bitcount Grid Single", "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } * { box-sizing: border-box; } /* --- Global UI scale (auto on large / high-DPI displays + a manual header control) ---------------- The app's chrome is rem-based, so ONE knob — the root font-size, set to `calc(16px * --ui-scale)` — scales all type and rem spacing together. This uses NO `zoom`/`transform`, so pointer hit-testing, getBoundingClientRect, and the Konva canvas stay pixel-exact (CSS `zoom` returns inconsistent rects on some Chrome versions, which would break canvas drag; `transform` breaks the sticky topbar / fixed rail). The canvas is px-driven and fit-to-viewport, so it simply re-fits as the chrome resizes. Scoped to app pages (editor / onboarding / app-page-body) via :has(); the marketing landing is left fluid as designed. Responsive defaults below are overridden by the manual header control, which sets `--ui-scale` inline on (Auto removes it to fall back here). Breakpoints are CSS px (a 32" 4K at 150% OS scaling reports a ~2560px-wide viewport). */ html { --ui-scale: 1; } html:has(body.editor-body), html:has(body.onboarding-body), html:has(body.app-page-body) { font-size: calc(16px * var(--ui-scale)); } @media (min-width: 1700px) { html:has(body.editor-body), html:has(body.onboarding-body), html:has(body.app-page-body) { --ui-scale: 0.92; } } @media (min-width: 2000px) { html:has(body.editor-body), html:has(body.onboarding-body), html:has(body.app-page-body) { --ui-scale: 0.86; } } @media (min-width: 2400px) { html:has(body.editor-body), html:has(body.onboarding-body), html:has(body.app-page-body) { --ui-scale: 0.8; } } @media (min-width: 2880px) { html:has(body.editor-body), html:has(body.onboarding-body), html:has(body.app-page-body) { --ui-scale: 0.74; } } /* Compact interface-size control injected into the app header by app-shell.js. */ .ui-scale-control { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-brand); font-size: 0.62rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .ui-scale-control select { font: inherit; text-transform: none; letter-spacing: normal; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); color: var(--ink); cursor: pointer; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: linear-gradient(90deg, rgba(21, 23, 22, 0.035) 1px, transparent 1px), linear-gradient(rgba(21, 23, 22, 0.035) 1px, transparent 1px), var(--paper); background-size: 40px 40px; background-attachment: fixed, fixed, fixed; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; } @keyframes prooflet-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes prooflet-drift { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } @keyframes prooflet-scan { 0% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } a { color: inherit; } img { display: block; max-width: 100%; } button, input, select, textarea { font: inherit; } .site-shell { min-height: 100vh; } .site-header { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid rgba(21, 23, 22, 0.22); background: rgba(201, 68, 31, 0.96); backdrop-filter: blur(18px); } .site-nav { width: min(var(--max), calc(100% - 40px)); min-height: 72px; margin: 0 auto; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 9px; min-width: max-content; color: var(--ink); text-decoration: none; font-weight: 820; letter-spacing: 0; } .brand img { width: auto; height: 34px; object-fit: contain; } .site-header .brand img { width: auto; height: clamp(34px, 2.25vw, 44px); padding: 0; border: 0; border-radius: 0; background: transparent; } .app-sidebar .brand img { width: auto; height: 34px; } .site-footer .brand img { width: auto; height: 34px; } .brand span { font-family: var(--font-brand); font-size: clamp(1.58rem, 2vw, 2.3rem); font-weight: 600; letter-spacing: 0; line-height: 0.9; text-transform: lowercase; } .site-header .brand, .site-footer .brand { color: var(--white); } .app-sidebar .brand { color: var(--brand-orange); } .nav-links { display: flex; align-items: center; justify-content: center; gap: 22px; margin-left: auto; font-size: 0.91rem; color: rgba(255, 255, 255, 0.88); } .nav-links a { text-decoration: none; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--white); text-decoration: underline; text-underline-offset: 4px; } .nav-actions { display: flex; align-items: center; gap: 10px; } .site-header .button.ghost { color: rgba(255, 255, 255, 0.9); } .site-header .button.ghost:hover, .site-header .button.ghost:focus-visible { color: var(--white); } .mobile-menu-button { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid rgba(21, 23, 22, 0.24); border-radius: 6px; background: rgba(255, 253, 248, 0.9); color: var(--ink); cursor: pointer; } .mobile-menu-button span, .mobile-menu-button span::before, .mobile-menu-button span::after { display: block; width: 18px; height: 2px; border-radius: 2px; background: currentcolor; content: ""; } .mobile-menu-button span::before { transform: translateY(-6px); } .mobile-menu-button span::after { transform: translateY(4px); } .button { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-dark); border-radius: 6px; padding: 10px 16px; background: var(--ink); color: var(--white); text-decoration: none; font-weight: 740; font-size: 0.92rem; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; } .button:hover, .button:focus-visible { transform: translateY(-1px); } .button.secondary { border-color: var(--line); background: var(--paper-2); color: var(--ink); } .button.ghost { border-color: transparent; background: transparent; color: rgba(21, 23, 22, 0.82); } .button.warning { border-color: #b89500; background: var(--yellow); color: #1a1a00; } .button[aria-disabled="true"], .button.disabled { cursor: not-allowed; opacity: 0.68; transform: none; } .section { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 86px 0; } body:not(.app-page-body) #main > .section { padding: clamp(58px, 6.8vw, 76px) 0; } .hero { position: relative; width: min(1240px, calc(100% - 40px)); min-height: min(760px, calc(100svh - 72px)); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(500px, 0.92fr); gap: clamp(28px, 4vw, 48px); align-items: start; padding: clamp(42px, 5.6vw, 64px) 0 clamp(34px, 4vw, 48px); } .hero > div:first-child { min-width: 0; animation: prooflet-rise 680ms cubic-bezier(0.16, 1, 0.3, 1) both; } .hero .proof-stack { width: min(100%, 760px); min-width: 0; justify-self: center; animation: prooflet-rise 780ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--brand-orange); font-family: var(--font-brand); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .eyebrow::before { width: 30px; height: 2px; background: currentcolor; content: ""; } h1, h2, h3, p { margin-top: 0; } h1 { max-width: 680px; margin-bottom: 22px; font-size: clamp(3rem, 5.2vw, 5.2rem); line-height: 0.9; letter-spacing: -0.066em; font-weight: 900; } .headline-accent { color: var(--nav-orange); } .headline-contrast { color: var(--brand-orange); } .hero-copy { max-width: 560px; margin-bottom: 0; color: #38413c; font-size: clamp(1rem, 1.25vw, 1.18rem); } .hero-actions, .inline-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; } .hero-actions { margin-top: 24px; } .hero-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 690px; } .meta-tile { min-height: 104px; border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 253, 248, 0.82); padding: 14px; box-shadow: var(--shadow-soft); } .meta-tile strong { display: block; margin-bottom: 8px; font-size: 1.15rem; line-height: 1.1; } .meta-tile span { color: var(--muted); font-size: 0.9rem; } .proof-stack { position: relative; min-width: 0; min-height: 0; } .proof-board { position: relative; border: 1px solid #1d211f; border-radius: var(--radius); background: var(--paper-2); box-shadow: var(--shadow); overflow: hidden; animation: prooflet-drift 7s ease-in-out infinite; } .proof-board::before { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(21, 23, 22, 0.045) 1px, transparent 1px), linear-gradient(rgba(21, 23, 22, 0.045) 1px, transparent 1px); background-size: 22px 22px; content: ""; } .proof-titlebar, .app-titlebar { position: relative; z-index: 2; height: 46px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid var(--line-dark); background: #f1ede4; padding: 0 14px; font-family: var(--font-brand); font-size: 0.75rem; color: #323733; } .window-dots { display: flex; gap: 6px; } .window-dots i { width: 8px; height: 8px; border-radius: 999px; background: var(--orange); } .window-dots i:nth-child(2) { background: var(--teal); } .window-dots i:nth-child(3) { background: var(--brand-orange); } .proof-grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: start; gap: 14px; padding: 18px; --demo-thc-size: 82px; --demo-brand-size: 128px; --window-width: 178px; --window-height: 68px; --window-radius: 10px; --window-top: 176px; --pouch-scale: 1; } .sheet-preview { position: relative; min-height: clamp(340px, 31vw, 420px); border: 1px solid var(--line-dark); background: #fffdf9; overflow: hidden; } .hero .rail-card:nth-child(2) { display: none; } .sheet-preview::before { content: none; } .sheet-preview::after { content: none; } .dieline-panel { --safe-x: 7.143%; --safe-bottom: 7.619%; --warning-clearance: 3.333%; --warning-height: 19.524%; position: absolute; top: calc(50% + 12px); left: 50%; width: min(420px, calc(100% - 64px)); aspect-ratio: 1 / 1; height: auto; border: 3px solid #6f756f; background: linear-gradient(145deg, rgba(201, 68, 31, 0.96), rgba(165, 52, 22, 0.96)), var(--brand-orange); transform: translate(-50%, -50%); } .dieline-panel.pouch-front { box-shadow: inset 0 0 0 calc(22px * var(--pouch-scale)) rgba(255, 253, 248, 0.12), inset 0 0 0 calc(26px * var(--pouch-scale)) rgba(21, 23, 22, 0.36); } .dieline-panel::before, .dieline-panel::after { position: absolute; left: 14px; right: 14px; border-top: 1px dashed rgba(21, 23, 22, 0.35); content: ""; } .dieline-panel.pouch-front::before { inset: 8.095% var(--safe-x) var(--safe-bottom); border: 2px dashed var(--guide-pink); border-top: 2px dashed var(--guide-pink); content: ""; } .dieline-panel.pouch-front::after { top: calc(100% - var(--safe-bottom) - var(--warning-clearance) - var(--warning-height) - var(--warning-clearance) - 6px); bottom: auto; border-color: rgba(223, 43, 145, 0.45); } .dieline-panel:not(.pouch-front)::before { top: 112px; } .dieline-panel:not(.pouch-front)::after { bottom: 42px; } .synthetic-brand { position: absolute; top: 12.857%; left: calc(11.905% + var(--demo-thc-size) + 4.762%); width: max-content; height: calc(var(--demo-brand-size) * 0.31); border: 0; background: transparent; display: inline-flex; align-items: center; gap: calc(var(--demo-brand-size) * 0.06); padding: 0; transition: height 180ms ease, top 180ms ease; cursor: grab; touch-action: none; user-select: none; z-index: 2; } .synthetic-brand img { width: auto; height: 84%; object-fit: contain; } .synthetic-brand span { color: var(--white); font-family: var(--font-brand); font-size: calc(var(--demo-brand-size) * 0.16); font-weight: 600; letter-spacing: 0; line-height: 1; white-space: nowrap; } .proof-stack .synthetic-brand { border: 0 !important; background: transparent !important; box-shadow: none !important; } .thc-badge { position: absolute; top: 11.905%; left: 11.905%; width: var(--demo-thc-size); height: var(--demo-thc-size); transition: width 180ms ease, height 180ms ease; cursor: grab; touch-action: none; user-select: none; z-index: 2; } .pouch-window { position: absolute; top: var(--window-top); left: calc((100% - var(--window-width)) / 2); width: var(--window-width); height: var(--window-height); display: grid; place-items: center; border: 2px solid rgba(255, 253, 248, 0.9); border-radius: var(--window-radius); background: repeating-linear-gradient( 135deg, rgba(255, 253, 248, 0.42) 0 2px, transparent 2px 10px ), rgba(255, 253, 248, 0.12); box-shadow: inset 0 0 0 1px rgba(21, 23, 22, 0.28), 0 10px 24px rgba(0, 0, 0, 0.12); overflow: hidden; pointer-events: none; z-index: 1; } .pouch-window[hidden] { display: none; } .pouch-window span { position: relative; z-index: 2; max-width: calc(100% - 20px); padding: calc(5px * var(--pouch-scale)) calc(9px * var(--pouch-scale)) calc(6px * var(--pouch-scale)); border: 1px solid rgba(255, 253, 248, 0.7); border-radius: 5px; background: var(--brand-orange); box-shadow: 0 0 0 calc(6px * var(--pouch-scale)) var(--brand-orange); color: var(--white); font-family: var(--font-brand); font-size: calc(0.82rem * var(--pouch-scale)); font-weight: 600; line-height: 1; text-align: center; white-space: nowrap; } .synthetic-brand.is-dragging, .thc-badge.is-dragging { cursor: grabbing; } .warning-box { position: absolute; left: calc(var(--safe-x) + var(--warning-clearance)); right: calc(var(--safe-x) + var(--warning-clearance)); bottom: calc(var(--safe-bottom) + var(--warning-clearance)); box-sizing: border-box; height: var(--warning-height); border: 3px solid #111; background: var(--yellow); padding: calc(9px * var(--pouch-scale)) calc(11px * var(--pouch-scale)); color: #000; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: calc(0.42rem * var(--pouch-scale)); line-height: 1.1; font-weight: 400; } .warning-box p { margin: 0; } .warning-box p + p { margin-top: calc(4px * var(--pouch-scale)); } .warning-box strong { font-weight: 900; } .dimension-line { position: absolute; color: var(--guide-pink); font-family: var(--font-brand); font-size: 0.7rem; z-index: 4; pointer-events: none; } .canvas-pouch-label { position: absolute; top: 22px; left: 12px; color: var(--guide-pink); font-family: var(--font-brand); font-size: 0.7rem; writing-mode: vertical-rl; text-orientation: mixed; transform: rotate(180deg); transform-origin: center; z-index: 4; } .dimension-line.top { top: -32px; left: 0; right: 0; text-align: center; transform: none; } .dimension-line.side { top: 0; right: -33px; height: 100%; display: grid; place-items: center; writing-mode: vertical-rl; transform: none; } .dimension-line.top::before, .dimension-line.top::after, .dimension-line.side::before, .dimension-line.side::after { position: absolute; content: ""; } .dimension-line.top::before { left: 0; right: 0; bottom: -7px; border-top: 1px dashed var(--guide-pink); } .dimension-line.top::after { left: 0; right: 0; bottom: -11px; height: 8px; border-left: 1px solid var(--guide-pink); border-right: 1px solid var(--guide-pink); } .dimension-line.side::before { top: 0; bottom: 0; left: -8px; border-left: 1px dashed var(--guide-pink); } .dimension-line.side::after { top: 0; bottom: 0; left: -12px; width: 8px; border-top: 1px solid var(--guide-pink); border-bottom: 1px solid var(--guide-pink); } .logo-control-card { border-color: rgba(201, 68, 31, 0.35); background: rgba(255, 253, 248, 0.9); } .logo-slider-row + .logo-slider-row { margin-top: 14px; } .window-toggle-row { margin-top: 18px; } .window-control-row[hidden] { display: none; } .logo-slider { width: 100%; accent-color: var(--brand-orange); cursor: pointer; } .segmented-control { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 253, 248, 0.8); padding: 4px; } .segmented-control button { min-height: 34px; border: 0; border-radius: 4px; background: transparent; color: var(--muted); font-weight: 760; cursor: pointer; } .segmented-control button.is-active { background: var(--brand-orange); color: var(--white); } .scale-readout { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font-size: 0.78rem; } .scale-readout span { border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); padding: 8px; } .scale-readout strong { display: block; color: var(--brand-orange); } .logo-control-card p { margin: 10px 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.4; } .rail { display: grid; gap: 12px; } .rail-card, .mini-card, .feature-card, .tour-card, .flow-card, .legal-card, .settings-card, .project-row { border: 1px solid var(--line); border-radius: var(--radius); background: rgba(255, 253, 248, 0.92); box-shadow: var(--shadow-soft); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .feature-card:hover, .tour-card:hover, .flow-card:hover, .legal-card:hover, .settings-card:hover, .mini-card:hover, .rail-card:hover, .project-row:hover, .meta-tile:hover, .proof-strip-item:hover { transform: translateY(-3px); border-color: rgba(21, 23, 22, 0.28); box-shadow: var(--shadow); } .rail-card { padding: 14px; } .rail-label, .label, .field-label { display: block; margin-bottom: 6px; color: var(--muted); font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; } .status { display: inline-flex; align-items: center; justify-content: center; min-height: 24px; border-radius: 999px; padding: 3px 9px; font-family: var(--font-brand); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .status.pass { background: rgba(20, 120, 93, 0.12); color: var(--green); } .status.review { background: rgba(255, 241, 0, 0.35); color: #6f4700; } .status.beta { background: rgba(32, 185, 170, 0.12); color: #0f6f66; } .status.fail { background: rgba(235, 0, 40, 0.12); color: var(--fail); } .status.soon { background: rgba(201, 68, 31, 0.11); color: var(--brand-orange); } .rail-list, .check-list, .plain-list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .rail-list li, .check-list li { display: flex; gap: 8px; align-items: flex-start; color: #38413c; font-size: 0.92rem; } .rail-list li::before, .check-list li::before { width: 9px; height: 9px; flex: 0 0 9px; margin-top: 7px; border-radius: 999px; background: var(--teal); content: ""; } .section-heading { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(260px, 0.28fr); gap: 28px; align-items: end; margin-bottom: 30px; } .section-heading h2, .page-title h1 { margin-bottom: 0; font-size: clamp(2.1rem, 4.25vw, 4.35rem); line-height: 0.95; letter-spacing: -0.06em; font-weight: 900; } .section-heading p, .page-title p, .muted { color: var(--muted); } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .feature-card, .tour-card, .flow-card, .legal-card, .settings-card { padding: 22px; } .feature-card h3, .tour-card h3, .flow-card h3, .legal-card h3, .settings-card h3, .mini-card h3 { margin-bottom: 10px; font-size: 1.06rem; letter-spacing: -0.02em; } .feature-card p, .tour-card p, .flow-card p, .legal-card p, .settings-card p, .mini-card p { margin-bottom: 0; color: var(--muted); } .tour-card { min-height: 280px; display: flex; flex-direction: column; gap: 16px; } .tour-visual { min-height: 140px; border: 1px solid var(--line); border-radius: 6px; background: #f6efe2; padding: 12px; overflow: hidden; } .dashboard-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .dashboard-search { margin-bottom: 16px; } .stacked-actions { display: grid; gap: 10px; } .stacked-actions .button { width: 100%; justify-content: center; } .mini-stat { border: 1px solid var(--line); background: var(--paper-2); padding: 10px; font-size: 0.72rem; } .wizard-mini { display: grid; gap: 8px; } .wizard-step-mini { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: var(--paper-2); padding: 8px; font-size: 0.75rem; } .step-dot { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ink); color: #fff; font-family: var(--font-brand); font-size: 0.68rem; } .canvas-mini { position: relative; min-height: 150px; border: 1px dashed var(--orange); background: linear-gradient(90deg, rgba(201, 68, 31, 0.12) 1px, transparent 1px), linear-gradient(rgba(201, 68, 31, 0.12) 1px, transparent 1px), var(--paper-2); background-size: 18px 18px; } .canvas-mini .box { position: absolute; border: 2px solid var(--brand-orange); background: rgba(255, 253, 248, 0.84); transition: transform 240ms ease; } .tour-card:hover .canvas-mini .box.a { transform: translate(4px, -3px); } .tour-card:hover .canvas-mini .box.b { transform: translate(-4px, 3px); } .canvas-mini .box.a { inset: 22px auto 22px 24px; width: 39%; } .canvas-mini .box.b { inset: 22px 24px 22px auto; width: 39%; } .report-mini { display: grid; gap: 8px; } .report-row { display: flex; justify-content: space-between; gap: 12px; border: 1px solid var(--line); background: var(--paper-2); padding: 8px; font-size: 0.76rem; } .workflow { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; } .flow-card { position: relative; min-height: 190px; } .flow-card::before { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; margin-bottom: 20px; border: 1px solid var(--line-dark); border-radius: 999px; background: var(--ink); color: var(--white); font-family: var(--font-brand); font-size: 0.78rem; content: attr(data-step); } .reveal-on-scroll { opacity: 0; transform: translateY(18px); } .reveal-on-scroll.is-visible { opacity: 1; transform: translateY(0); transition: opacity 520ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1); } .proof-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(255, 253, 248, 0.72); } .proof-strip-inner { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); } .proof-strip-item { min-height: 128px; background: var(--paper-2); padding: 20px; } .proof-strip-item strong { display: block; margin-bottom: 8px; } .proof-strip-item span { color: var(--muted); font-size: 0.92rem; } .faq { display: grid; gap: 10px; } details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 18px 20px; } summary { cursor: pointer; font-weight: 780; } details p { margin: 12px 0 0; color: var(--muted); } .site-footer { border-top: 1px solid var(--line-dark); background: #151716; color: #f7f4ee; } .footer-inner { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 36px; padding: 48px 0; } .footer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .footer-grid h3 { margin: 0 0 12px; color: #fff; font-size: 0.86rem; } .footer-grid a, .footer-grid span { display: block; margin: 7px 0; color: #c7c3ba; text-decoration: none; font-size: 0.9rem; } .footer-note { color: #c7c3ba; font-size: 0.9rem; } .page-hero { width: min(var(--max), calc(100% - 40px)); margin: 0 auto; padding: 66px 0 34px; } .page-title { max-width: 780px; } .app-layout { min-height: 100vh; display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #f3efe6; } .app-sidebar { position: sticky; top: 0; height: 100vh; border-right: 1px solid var(--line); background: #fffdf8; padding: 20px; overflow: auto; } .app-sidebar .brand { margin-bottom: 28px; } .app-nav { display: grid; gap: 6px; } .app-nav a { border-radius: 6px; padding: 10px 12px; color: #3b433f; text-decoration: none; font-weight: 700; font-size: 0.93rem; } .app-nav a.active, .app-nav a:hover, .app-nav a:focus-visible { background: #ede8db; color: var(--ink); } .app-main { min-width: 0; } .app-topbar { position: sticky; top: 0; z-index: 18; min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); background: rgba(243, 239, 230, 0.92); backdrop-filter: blur(16px); padding: 0 28px; } .app-content { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 70px; } .app-page-body { min-height: 100vh; background: #eef0f4; color: var(--ink); } .app-page-main { min-height: calc(100vh - 74px); background: #eef0f4; } .app-page-main .app-topbar { position: sticky; top: 74px; background: var(--editor-orange-surface); color: #fff; border-bottom: 0; box-shadow: none; } .app-page-main .app-topbar .label, .app-page-main .app-topbar strong { color: #fff; } .app-page-main .app-content { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 28px 0 64px; } .app-page-main .page-hero, .app-page-main .section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding-left: 0; padding-right: 0; } .legal-page-main .page-hero { padding-top: 34px; padding-bottom: 10px; } .legal-page-main .legal-content { background: rgba(255, 253, 248, 0.92); border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow-soft); padding: 24px; } .app-page-body .auth-wrap { min-height: calc(100vh - 74px); } .app-grid { display: grid; grid-template-columns: 1.4fr 0.85fr; gap: 18px; align-items: start; } .mini-card { padding: 18px; } .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 20px 0; } .metric { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 16px; } .metric strong { display: block; font-size: 1.65rem; letter-spacing: -0.04em; } .metric span { color: var(--muted); font-size: 0.85rem; } .notice { border: 1px solid rgba(201, 68, 31, 0.28); border-radius: var(--radius); background: rgba(201, 68, 31, 0.08); padding: 16px; color: #252869; } .notice strong { display: block; margin-bottom: 4px; } .project-table { display: grid; gap: 10px; } .project-row { display: grid; grid-template-columns: minmax(180px, 1fr) 130px 130px 128px; gap: 12px; align-items: center; padding: 14px; } .project-row.header { border: 0; background: transparent; box-shadow: none; color: var(--muted); font-family: var(--font-brand); font-size: 0.72rem; text-transform: uppercase; } .wizard { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; } .stepper { display: grid; gap: 8px; position: sticky; top: 90px; } .stepper a { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); padding: 10px; color: var(--muted); text-decoration: none; } .stepper a.active { border-color: var(--line-dark); color: var(--ink); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .field { display: grid; gap: 6px; } .field input, .field select, .field textarea { width: 100%; border: 1px solid var(--line); border-radius: 6px; background: #fffdf8; padding: 11px 12px; color: var(--ink); } .field textarea { min-height: 110px; resize: vertical; } .canvas-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; } .canvas-stage { border: 1px solid var(--line-dark); border-radius: var(--radius); background: #fffdf8; overflow: hidden; } .canvas-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; border-bottom: 1px solid var(--line); background: #ede8db; padding: 10px; } .tool-pill { min-height: 32px; display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-2); padding: 5px 10px; color: #3e4742; font-size: 0.82rem; font-weight: 700; } .artboard { position: relative; min-height: 640px; margin: 18px; border: 1px solid var(--line); background: linear-gradient(90deg, rgba(201, 68, 31, 0.1) 1px, transparent 1px), linear-gradient(rgba(201, 68, 31, 0.1) 1px, transparent 1px), #fffdf8; background-size: 24px 24px; overflow: hidden; } .spread { position: absolute; inset: 58px 42px; border: 2px dashed var(--orange); } .spread-panel { position: absolute; top: 42px; bottom: 42px; width: calc(50% - 18px); border: 2px solid var(--brand-orange); background: rgba(201, 68, 31, 0.03); } .spread-panel.front { left: 38px; } .spread-panel.back { right: 38px; } .safe-zone { position: absolute; inset: 26px; border: 1px dashed rgba(20, 120, 93, 0.58); } .no-print { position: absolute; left: 0; right: 0; height: 30px; background: rgba(235, 0, 40, 0.08); border-top: 1px dashed rgba(235, 0, 40, 0.5); border-bottom: 1px dashed rgba(235, 0, 40, 0.5); color: var(--fail); display: flex; align-items: center; justify-content: center; font-family: var(--font-brand); font-size: 0.68rem; } .no-print.top { top: 42px; } .no-print.bottom { bottom: 42px; } .canvas-warning { position: absolute; left: 34px; right: 34px; bottom: 76px; border: 2px solid #111; background: var(--yellow); padding: 12px; font-weight: 820; line-height: 1.18; font-size: 0.78rem; } .canvas-thc { position: absolute; top: 72px; left: 34px; width: 58px; height: 58px; } .canvas-brand { position: absolute; top: 142px; left: 34px; border: 1px solid var(--line-dark); background: #fff; padding: 12px 14px; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; } .canvas-sidebar { display: grid; gap: 12px; } .manifest { display: grid; gap: 8px; } .manifest-row { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; border-bottom: 1px solid var(--line); padding: 9px 0; font-size: 0.9rem; } .manifest-row:last-child { border-bottom: 0; } .manifest-row span:first-child { color: var(--muted); font-family: var(--font-brand); font-size: 0.72rem; text-transform: uppercase; } .settings-card .manifest-row strong { overflow-wrap: anywhere; } .legal-content { max-width: 840px; } .legal-content h2 { margin-top: 34px; font-size: 1.4rem; } .legal-content p, .legal-content li { color: #454e49; } .legal-content ul { padding-left: 20px; } .skip-link { position: absolute; left: -999px; top: 8px; z-index: 99; background: var(--ink); color: #fff; padding: 8px 10px; } .skip-link:focus { left: 8px; } @media (max-width: 1050px) { .hero, .section-heading, .app-grid, .canvas-layout, .wizard, .footer-inner { grid-template-columns: 1fr; } .hero { min-height: auto; gap: 36px; padding: 48px 0 38px; } .hero .proof-stack { width: min(100%, 820px); } .workflow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3, .proof-strip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); } .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 820px) { .site-header .brand img { height: 30px; } .site-nav { width: min(100% - 28px, var(--max)); min-height: 64px; } .mobile-menu-button { display: inline-flex; } .nav-links { position: absolute; top: 64px; left: 14px; right: 14px; display: none; flex-direction: column; align-items: stretch; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); color: var(--ink); padding: 8px; box-shadow: var(--shadow); } .nav-links a:hover, .nav-links a:focus-visible { color: var(--brand-orange); } .site-header.nav-open .nav-links { display: flex; } .nav-links a { padding: 12px; } .nav-actions .ghost { display: none; } .nav-actions .button { min-height: 40px; padding: 8px 12px; font-size: 0.86rem; } .hero, .section, .page-hero, .app-content { width: min(100% - 28px, var(--max)); } .hero { gap: 28px; padding-top: 34px; padding-bottom: 32px; } h1 { margin-bottom: 18px; font-size: clamp(2.75rem, 13vw, 4.4rem); letter-spacing: -0.06em; } .hero-copy { max-width: 62ch; font-size: 1rem; } .hero-actions { margin-top: 22px; } .hero-meta { margin-top: 24px; display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x proximity; scrollbar-width: none; } .hero-meta::-webkit-scrollbar { display: none; } .hero-meta .meta-tile { min-width: min(245px, 78vw); min-height: 112px; scroll-snap-align: start; } .hero-meta, .grid-2, .grid-3, .proof-strip-inner, .workflow, .form-grid, .footer-grid { grid-template-columns: 1fr; } .proof-grid { grid-template-columns: 1fr; padding: 16px; } .hero .rail { gap: 10px; } .hero .rail-card { padding: 12px; } .hero .logo-slider-row + .logo-slider-row { margin-top: 10px; } .hero .window-toggle-row { margin-top: 12px; } body:not(.app-page-body) #main > .section { padding: 54px 0; } .section-heading { gap: 16px; margin-bottom: 24px; } .proof-strip-item { min-height: 116px; padding: 18px; } .app-layout { grid-template-columns: 1fr; } .app-sidebar { position: relative; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .app-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-topbar { padding: 0 14px; } .project-row, .project-row.header { grid-template-columns: 1fr; } .stepper { position: static; } .artboard { min-height: 560px; margin: 10px; } .spread { inset: 44px 16px; } .spread-panel { top: 36px; bottom: 36px; width: calc(50% - 10px); } .spread-panel.front { left: 18px; } .spread-panel.back { right: 18px; } .canvas-warning { left: 16px; right: 16px; font-size: 0.64rem; } } @media (max-width: 480px) { .site-header .brand img { height: 26px; } .brand span { font-size: 1.42rem; } .hero { padding-top: 28px; } h1 { font-size: clamp(2.45rem, 12vw, 3.45rem); } .dieline-panel { top: calc(50% + 4px); left: 50%; width: min(320px, calc(100% - 88px)); aspect-ratio: 1 / 1; height: auto; transform: translate(-50%, -50%); } .sheet-preview { min-height: 390px; } .dieline-panel.pouch-front { box-shadow: inset 0 0 0 calc(22px * var(--pouch-scale)) rgba(255, 253, 248, 0.12), inset 0 0 0 calc(26px * var(--pouch-scale)) rgba(21, 23, 22, 0.36); } .dieline-panel.pouch-front::before { inset: 8.095% var(--safe-x) var(--safe-bottom); } .dimension-line { font-size: 0.62rem; } .canvas-pouch-label { top: 18px; left: 10px; font-size: 0.62rem; } .warning-box { border-width: 2px; padding: calc(9px * var(--pouch-scale)) calc(11px * var(--pouch-scale)); font-size: calc(0.42rem * var(--pouch-scale)); line-height: 1.05; } .warning-box p + p { margin-top: calc(4px * var(--pouch-scale)); } .pouch-window span { padding: calc(5px * var(--pouch-scale)) calc(9px * var(--pouch-scale)) calc(6px * var(--pouch-scale)); box-shadow: 0 0 0 calc(6px * var(--pouch-scale)) var(--brand-orange); font-size: calc(0.82rem * var(--pouch-scale)); } .site-nav { gap: 10px; } .nav-actions .button { max-width: 132px; white-space: normal; line-height: 1.05; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; } .reveal-on-scroll { opacity: 1; transform: none; } } /* --- v1 app: auth, live data states, canvas editor, export --- */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; } .auth-card { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 18px; } .auth-card .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand-orange); font-family: var(--font-brand); } .auth-card .brand img { width: 28px; height: 28px; } .auth-card h1 { font-size: 2rem; margin: 0; } .auth-form { display: flex; flex-direction: column; gap: 14px; } .auth-form .button { margin-top: 6px; } .auth-error { margin: 0; padding: 10px 12px; border-radius: 6px; background: rgba(180, 35, 24, 0.08); border: 1px solid var(--fail); color: var(--fail); font-size: 0.92rem; } .auth-alt { margin: 0; color: var(--muted); font-size: 0.95rem; } .auth-alt a { color: var(--brand-orange); } /* Live data feedback shared across app pages */ .is-loading { opacity: 0.6; pointer-events: none; } [hidden] { display: none !important; } .inline-status { font-family: var(--font-brand); font-size: 0.8rem; color: var(--muted); } .toast { position: fixed; right: 20px; bottom: 20px; max-width: 360px; padding: 12px 16px; border-radius: 8px; background: var(--ink); color: var(--white); box-shadow: var(--shadow-soft); z-index: 50; font-size: 0.92rem; } .toast.error { background: var(--fail); } .toast.success { background: var(--green); } .empty-row { color: var(--muted); padding: 16px 0; } /* Konva canvas host (canvas.html only): matches the dark workspace the stage paints behind the pouch. */ .konva-host { position: relative; width: 100%; min-height: 520px; background: #2b2b2e; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 8px; overflow: hidden; } .lock-pill { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-brand); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .lock-pill::before { content: "LOCK"; font-size: 0.58rem; } /* PDF.js proof preview */ .pdf-preview { width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--paper-2); } .pdf-preview canvas { display: block; width: 100%; height: auto; } .variant-strip { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .variant-chip { font-family: var(--font-brand); font-size: 0.72rem; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; } .variant-chip.is-active { background: var(--ink); color: var(--white); border-color: var(--ink); } /* --- new project onboarding flow --- */ .onboarding-body { min-height: 100vh; background: #eef0f4; } /* Brand-orange field behind the SKU onboarding wizard — the white stepper/panel cards float on top. Scoped to the open wizard (project-onboarding.js toggles is-onboarding-open) so the projects list keeps its neutral surface. .projects-main carries its own bg, so it must be overridden too. */ .onboarding-body.is-onboarding-open, .onboarding-body.is-onboarding-open .projects-main { background: var(--brand-orange); } .onboarding-main { min-height: calc(100vh - 74px); padding: 28px 24px 44px; } .onboarding-shell { width: min(1280px, 100%); margin: 0 auto; display: grid; grid-template-columns: 240px minmax(0, 1fr) 260px; gap: 18px; } .onboarding-stepper { position: sticky; top: 96px; align-self: start; display: grid; gap: 9px; } .onboarding-stepper button { min-height: 52px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 10px; border: 1px solid rgba(21, 23, 22, 0.1); border-radius: 7px; background: var(--paper-2); color: #4f5a55; padding: 10px 12px; text-align: left; font-size: 0.86rem; font-weight: 760; } .onboarding-stepper button span { font-family: var(--font-brand); font-size: 0.72rem; color: var(--brand-orange); } /* Selected step matches the selected product card (peach fill, orange border + text). That card's fill is rgba(201,68,31,0.12) over white; the stepper sits on the orange field, so use the equivalent SOLID colour (#f9e7de) — a translucent tint would composite over the orange and vanish. */ .onboarding-stepper button.is-active { border-color: var(--brand-orange); background: #f9e7de; color: var(--brand-orange); } .onboarding-panel { border: 1px solid rgba(21, 23, 22, 0.1); border-radius: 8px; background: var(--paper-2); padding: 24px; box-shadow: 0 18px 48px rgba(21, 23, 22, 0.08); } .onboarding-panel-head { max-width: 680px; margin-bottom: 22px; } .onboarding-panel-head h1 { margin: 6px 0 8px; font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 0.95; letter-spacing: 0; } .onboarding-panel-head p { margin: 0; max-width: 680px; color: var(--muted); } .onboarding-step { display: none; } .onboarding-step.is-active { display: block; } .onboarding-step .form-grid { max-width: 780px; } .form-grid.compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .product-choice-field { grid-column: 1 / -1; } .product-choice-grid, .subcategory-choice-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .product-choice-grid button, .subcategory-choice-grid button { min-height: 44px; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 7px; background: var(--paper-2); color: var(--ink); font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; letter-spacing: 0; text-align: left; padding: 10px 12px; cursor: pointer; } .product-choice-grid button:hover, .product-choice-grid button:focus-visible, .subcategory-choice-grid button:hover, .subcategory-choice-grid button:focus-visible { border-color: rgba(201, 68, 31, 0.46); background: rgba(201, 68, 31, 0.06); } .product-choice-grid button.is-active, .subcategory-choice-grid button.is-active { border-color: var(--brand-orange); background: rgba(201, 68, 31, 0.12); color: var(--brand-orange); } /* Category cards show the product icon stacked above the label (subcategory buttons stay text-only). */ .product-choice-grid button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; } .product-choice-icon { width: 56px; height: 56px; object-fit: contain; pointer-events: none; } .derived-warning { display: grid; grid-column: 1 / -1; gap: 8px; border: 1px solid rgba(32, 185, 170, 0.34); border-radius: 7px; background: rgba(32, 185, 170, 0.1); padding: 14px; } .derived-warning span, .review-grid span { display: block; color: var(--muted); font-family: var(--font-brand); font-size: 0.68rem; font-weight: 760; text-transform: uppercase; } .derived-warning strong { color: var(--green); font-size: 1rem; } .derived-warning p { margin: 0; color: #3f4a45; font-size: 0.9rem; } .review-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; } .review-grid div { border: 1px solid rgba(21, 23, 22, 0.1); border-radius: 7px; background: rgba(238, 240, 244, 0.65); padding: 14px; } .review-grid strong { display: block; margin-top: 5px; font-size: 0.95rem; } /* --- onboarding live pouch preview (decorative rough guide; aria-hidden) --- */ .onboarding-preview { position: sticky; top: 96px; align-self: start; display: grid; gap: 10px; border: 1px solid rgba(21, 23, 22, 0.1); border-radius: 8px; background: var(--paper-2); padding: 16px; } .onb-pouch-frame { display: grid; place-items: center; min-height: 270px; border-radius: 7px; background: #e7e9ee; padding: 12px; } .onb-pouch { position: relative; border: 1px solid rgba(21, 23, 22, 0.35); border-radius: 3px; box-shadow: 0 10px 26px rgba(21, 23, 22, 0.22); overflow: hidden; transition: width 160ms ease, height 160ms ease, background 160ms ease; } .onb-pouch-thc { position: absolute; top: 6%; left: 7%; width: 20%; max-width: 40px; } .onb-pouch-zipper { position: absolute; top: 14%; left: 4%; right: 4%; border-top: 2px dashed rgba(21, 23, 22, 0.55); } .onb-pouch.is-dark .onb-pouch-zipper { border-top-color: rgba(255, 255, 255, 0.65); } .onb-pouch-tear { position: absolute; top: 10%; left: -1px; width: 7px; height: 7px; background: #e7e9ee; border: 1px solid rgba(21, 23, 22, 0.35); border-radius: 0 50% 50% 0; } .onb-pouch-hang { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); width: 11px; height: 11px; border-radius: 50%; background: #e7e9ee; border: 1px solid rgba(21, 23, 22, 0.35); } .onb-pouch-brand { position: absolute; top: 26%; left: 8%; right: 8%; text-align: center; font-family: var(--font-brand); font-weight: 700; font-size: 0.72rem; color: rgba(21, 23, 22, 0.85); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .onb-pouch.is-dark .onb-pouch-brand { color: rgba(255, 255, 255, 0.92); } .onb-pouch-logo { position: absolute; top: 36%; left: 50%; transform: translateX(-50%); max-width: 46%; max-height: 22%; object-fit: contain; } .onb-pouch-window { position: absolute; left: 40%; top: 56%; width: 22%; height: 12%; border-radius: 6px; border: 1px dashed rgba(21, 23, 22, 0.5); background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.55) 0 3px, rgba(255, 255, 255, 0.15) 3px 6px); } .onb-pouch-gusset { position: absolute; left: 0; right: 0; bottom: 0; height: 9%; background: repeating-linear-gradient(-45deg, rgba(21, 23, 22, 0.14) 0 4px, transparent 4px 8px); border-top: 1px dashed rgba(21, 23, 22, 0.4); } .onb-pouch-warning { position: absolute; left: 6%; right: 6%; bottom: 12%; min-height: 16%; display: grid; place-items: center; background: var(--yellow); border: 2px solid #151716; padding: 2px 4px; } .onb-pouch-warning span { font-size: 0.5rem; font-weight: 700; color: #151716; text-align: center; line-height: 1.15; } .onb-preview-caption { margin: 0; font-family: var(--font-brand); font-size: 0.8rem; font-weight: 700; color: var(--ink); } .onb-preview-note { margin: 0; font-size: 0.74rem; color: var(--muted); } /* --- onboarding size presets --- */ .onb-size-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .onb-size-presets button { display: grid; gap: 3px; text-align: left; border: 1px solid rgba(21, 23, 22, 0.14); border-radius: 7px; background: var(--paper-2); padding: 10px 12px; } .onb-size-presets button strong { font-size: 0.9rem; } .onb-size-presets button span { font-size: 0.74rem; color: var(--muted); } .onb-size-presets button.is-active { border-color: rgba(201, 68, 31, 0.4); background: rgba(201, 68, 31, 0.08); } .onboarding-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 24px; } .projects-main { min-height: calc(100vh - 74px); background: #eef0f4; } .projects-workspace { min-height: calc(100vh - 74px); } .projects-folder-panel { width: min(1440px, 100%); margin: 0 auto; padding: 54px 48px 70px; } /* Drill-down breadcrumbs: Projects › › . Plain links; aria-current lives on the page H1 (the current level is the title, not a crumb). */ .projects-breadcrumbs { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; font-family: var(--font-brand); font-size: 0.8rem; font-weight: 700; } .projects-breadcrumbs a { color: var(--muted); text-decoration: none; padding: 4px 6px; border-radius: 6px; } .projects-breadcrumbs a:hover, .projects-breadcrumbs a:focus-visible { color: var(--ink); background: rgba(21, 23, 22, 0.08); } .projects-breadcrumbs span { color: var(--muted); } .projects-brand-logo { display: flex; align-items: center; margin-left: auto; } .projects-folder-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .projects-folder-head h1 { margin: 6px 0 0; max-width: none; font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 0.95; letter-spacing: -0.055em; } .projects-folder-actions { display: flex; align-items: center; gap: 12px; } .projects-sort { min-height: 44px; display: flex; align-items: center; gap: 7px; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 7px; background: var(--paper-2); padding: 0 12px; color: var(--muted); font-weight: 760; } .projects-sort select { border: 0; background: transparent; color: var(--ink); font-weight: 820; } .projects-search { display: block; margin-bottom: 28px; } .projects-search input { width: 100%; min-height: 62px; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 7px; background: var(--paper-2); padding: 0 20px; color: var(--ink); font-size: 1.08rem; box-shadow: var(--shadow-soft); } .projects-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } /* SKU sections (Exported / Drafts) render their own inner grids under section headings. */ .projects-section-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } .projects-card-grid:has(.projects-section-grid) { display: block; } .projects-section-title { margin: 34px 0 14px; font-size: 1.05rem; letter-spacing: -0.01em; color: var(--muted); font-family: var(--font-brand); font-weight: 700; } .projects-section-title:first-child { margin-top: 0; } .projects-section-empty { color: var(--muted); margin: 0 0 24px; } @media (max-width: 1280px) { .projects-card-grid, .projects-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .projects-card { min-height: 164px; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 8px; background: var(--paper-2); padding: 24px; box-shadow: var(--shadow-soft); } /* Project (group) cards grow to hold the fanned SKU previews. */ .projects-group-card { min-height: 264px; } /* Fan of up to 3 SKU previews: real background colour + brand initial today; real artwork thumbnails replace the interior when the editor starts persisting snapshots. */ .projects-card-fan { display: flex; justify-content: center; align-items: flex-end; min-height: 118px; margin: 6px 0 14px; } .fan-thumb { display: grid; place-items: center; width: 78px; height: 102px; border-radius: 6px; border: 1px solid rgba(21, 23, 22, 0.18); box-shadow: 0 6px 16px rgba(21, 23, 22, 0.22); } .fan-thumb em { font-style: normal; font-family: var(--font-brand); font-weight: 700; font-size: 1.3rem; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .projects-card-fan .fan-thumb:nth-child(1) { transform: rotate(-7deg) translate(14px, 2px); } .projects-card-fan .fan-thumb:nth-child(2) { transform: rotate(0deg); z-index: 1; } .projects-card-fan .fan-thumb:nth-child(3) { transform: rotate(7deg) translate(-14px, 2px); } .fan-thumb-empty { background: transparent; border: 1px dashed rgba(21, 23, 22, 0.3); box-shadow: none; } /* Brand identity: uploaded logo when one exists, initial-letter avatar otherwise. */ .brand-avatar { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 8px; border: 1px solid rgba(21, 23, 22, 0.14); background: var(--paper); color: var(--ink); font-family: var(--font-brand); font-weight: 700; font-size: 1.1rem; overflow: hidden; } img.brand-avatar-logo { object-fit: contain; background: #fff; padding: 4px; } .brand-avatar-lg { width: 64px; height: 64px; font-size: 1.5rem; } /* SKU card: colour-true pouch chip beside the metadata. Doubled class specificity so this row layout wins over the generic `.projects-card { flex-direction: column }` rule later in the file. */ .projects-card.projects-sku-card { flex-direction: row; align-items: center; gap: 16px; } .sku-thumb { flex: 0 0 64px; display: grid; place-items: center; width: 64px; height: 84px; align-self: center; border-radius: 6px; border: 1px solid rgba(21, 23, 22, 0.18); } .sku-thumb em { font-style: normal; font-family: var(--font-brand); font-weight: 700; color: rgba(255, 255, 255, 0.9); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); } .sku-card-body { min-width: 0; flex: 1; } .projects-status-badge { background: #a96000; color: #fff; } /* New Project / Add Brand dialog (native ). */ .dashboard-dialog { min-width: min(440px, 90vw); border: 1px solid rgba(21, 23, 22, 0.14); border-radius: 8px; background: var(--paper-2); color: var(--ink); padding: 24px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); } .dashboard-dialog::backdrop { background: rgba(0, 0, 0, 0.45); } .dashboard-dialog h2 { margin: 0 0 16px; font-size: 1.3rem; } .dashboard-dialog-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; } .projects-card h2 { margin: 8px 0 24px; font-size: 1.35rem; line-height: 1.1; letter-spacing: -0.02em; } .projects-card p { margin: 0 0 22px; color: var(--muted); } .projects-card small { color: var(--muted); font-weight: 760; } .projects-card[hidden] { display: none; } .projects-main .onboarding-shell { padding: 28px 24px 44px; } .onboarding-back { grid-column: 1 / -1; justify-self: start; } /* --- editor workbench: reference-style shell with functional rails --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .editor-body { min-height: 100vh; background: #eef0f4; } .editor-top-nav { position: sticky; top: 0; z-index: 40; min-height: 74px; display: grid; grid-template-columns: minmax(120px, auto) auto minmax(0, 1fr) auto; align-items: center; gap: 14px; border-bottom: 1px solid rgba(21, 23, 22, 0.12); /* Fully opaque so the relocated Project/Brand/SKU chips read cleanly; the previous backdrop-filter is dropped intentionally — it would establish a containing block that breaks the chips' position:fixed dropdown menus (project.js positionOpenCustomSelectMenu). */ background: var(--paper-2); padding: 0 24px; } .editor-top-nav.has-open-nav-select, .editor-top-nav.has-open-warning { z-index: 240; } .editor-brand { color: var(--nav-orange); } .editor-brand img { display: none; } .editor-brand::before { content: ""; width: 34px; height: 34px; flex: 0 0 auto; background: var(--nav-orange); -webkit-mask: url("/public/images/prooflet-icon-v2.png") center / contain no-repeat; mask: url("/public/images/prooflet-icon-v2.png") center / contain no-repeat; } .editor-nav-links { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; padding: 6px; } .editor-nav-links a { flex: 0 0 auto; border-radius: 6px; padding: 8px 10px; color: #4f5a55; text-decoration: none; font-weight: 780; font-size: 0.82rem; } .editor-nav-links a.active, .editor-nav-links a:hover, .editor-nav-links a:focus-visible { background: rgba(201, 68, 31, 0.1); color: var(--brand-orange); } .editor-settings-link { width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; justify-self: end; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 999px; background: var(--paper-2); color: var(--ink); text-decoration: none; font-family: var(--font-body); font-size: 1.08rem; line-height: 1; box-shadow: 0 8px 24px rgba(21, 23, 22, 0.06); } .editor-settings-link:hover, .editor-settings-link:focus-visible { border-color: rgba(201, 68, 31, 0.34); color: var(--brand-orange); outline: none; } .save-state-indicator { justify-self: end; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 7px; background: var(--editor-dark-raised); color: #d6d6d3; padding: 7px 10px; font-family: var(--font-body); font-size: 0.76rem; font-weight: 800; line-height: 1; } .save-state-indicator.is-saved { border-color: rgba(32, 185, 170, 0.36); background: rgba(32, 185, 170, 0.14); color: #7fe0c4; } .save-state-indicator.is-draft { border-color: rgba(240, 116, 79, 0.4); background: rgba(240, 116, 79, 0.14); color: #ffc493; } .editor-main { min-height: calc(100vh - var(--editor-topbar-h)); } .editor-form { min-height: calc(100vh - var(--editor-topbar-h)); } /* Relocated project spec dropdowns. The dedicated .editor-specbar top bar was removed to give the canvas more room; Project/Brand/SKU/Category/Subcategory now all sit in the top nav (.editor-nav-spec), with the pouch-size readout pushed to the far right of that row. They reuse the .editor-project-id/.editor-spec-item tiles and the project.js custom-select widget. */ .editor-nav-spec { display: flex; align-items: center; gap: 8px; min-width: 0; overflow-x: auto; padding: 4px 0; } /* Every dropdown tile flexes equally so they stay uniform and shrink proportionally to fit any width (Rotate/Zoom stay fixed via .toolbar-control-block's flex:0 0 auto). */ .editor-nav-spec .editor-project-id, .editor-nav-spec .editor-spec-item { flex: 1 1 0; min-width: 0; min-height: 46px; } /* Every spec tile (Project/Brand/SKU/Category/Subcategory) shares the dark chip treatment below. */ .editor-project-id, .editor-spec-item { position: relative; min-height: 48px; border: 1px solid var(--editor-dark-line); border-radius: 7px; background: var(--editor-dark-raised); padding: 7px 10px; cursor: pointer; } .editor-project-id .label, .editor-spec-item > span { position: relative; z-index: 3; display: block; margin-bottom: 2px; color: rgba(255, 255, 255, 0.62); font-family: var(--font-brand); font-size: 0.64rem; font-weight: 780; text-transform: uppercase; pointer-events: none; } .editor-project-id input, .editor-project-id select, .editor-spec-item input, .editor-spec-item select { width: 100%; border: 0; background: transparent; color: #fff; padding: 0; font-size: 0.84rem; font-weight: 800; line-height: 1.2; } .editor-native-select { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .editor-project-id select.editor-native-select, .editor-spec-item select.editor-native-select { position: absolute; left: -9999px; width: 1px; height: 1px; padding: 0; opacity: 0; pointer-events: none; } .editor-custom-select { position: absolute; inset: 0; width: 100%; z-index: 2; } /* An open select must raise its whole stacking context above later-sibling tiles (e.g. the stacked Category/Subcategory chips), otherwise the next tile's .editor-custom-select (also z-index:2, later in the DOM) paints over this select's open menu. The fixed menu's own z-index only competes inside this context, so lifting the context here is what actually puts the menu on top. */ .editor-custom-select.is-open { z-index: 200; } .editor-custom-select-button { width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; border: 0; background: transparent; color: #fff; cursor: pointer; padding: 22px 10px 7px; text-align: left; font-family: var(--font-body); font-size: 0.84rem; font-weight: 800; line-height: 1.2; } .editor-custom-select-button::after { content: ""; width: 8px; height: 8px; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: rotate(45deg) translateY(-2px); transition: transform 140ms ease; } .editor-custom-select.is-open .editor-custom-select-button::after { transform: rotate(225deg) translateY(-1px); } .editor-custom-select-button:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.72); outline-offset: 4px; } .editor-custom-select-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor-custom-select-menu { position: absolute; top: calc(100% + 8px); left: -10px; right: -10px; z-index: 80; display: none; max-height: 280px; overflow: auto; border: 1px solid var(--editor-dark-line-strong); border-radius: 7px; background: #2f2f33; box-shadow: 0 18px 36px rgba(0, 0, 0, 0.5); padding: 6px; } .editor-custom-select.is-open .editor-custom-select-menu { display: grid; gap: 3px; } .editor-custom-select-option { width: 100%; border: 0; border-radius: 5px; background: transparent; color: rgba(255, 255, 255, 0.9); cursor: pointer; padding: 9px 10px; text-align: left; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; line-height: 1.2; } .editor-custom-select-option:hover, .editor-custom-select-option:focus-visible { background: var(--editor-dark-hover); color: #fff; outline: none; } .editor-custom-select-option[aria-selected="true"] { background: rgba(255, 255, 255, 0.16); color: #fff; font-weight: 900; } .editor-spec-item strong { display: block; min-height: 24px; overflow: hidden; color: #fff; font-size: 0.84rem; line-height: 1.2; text-overflow: ellipsis; white-space: nowrap; } .editor-project-id select option, .editor-spec-item select option { color: var(--editor-dark-text); background: #2f2f33; } /* Columns are canvas | live compliance | Layers rail: the controls rail moved to the far right edge (hamburger-switched sections) and the compliance panel sits between it and the canvas. */ .editor-workbench { display: grid; grid-template-columns: minmax(480px, 1fr) 252px 300px; min-height: calc(100vh - var(--editor-topbar-h)); } .editor-workbench.compliance-collapsed { grid-template-columns: minmax(480px, 1fr) 0 300px; } .editor-inspector { position: sticky; top: var(--editor-topbar-h); align-self: start; display: flex; flex-direction: column; min-height: 0; /* Bound the rail to the viewport so the accordion stack — not the page — scrolls. 100dvh tracks the real visible height on mobile (toolbars in/out); 100vh is the fallback for engines without dvh. */ height: calc(100vh - var(--editor-topbar-h)); height: calc(100dvh - var(--editor-topbar-h)); overflow: hidden; border-left: 1px solid rgba(0, 0, 0, 0.4); background: var(--editor-dark-panel); color: var(--editor-dark-text); font-size: 0.82rem; } /* Rail header: current section title + the hamburger menu that switches which control section shows. */ .editor-rail-header { position: relative; display: flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 12px 16px; border-bottom: 1px solid var(--editor-dark-line); } .editor-rail-title { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font-family: var(--font-brand); font-size: 0.9rem; font-weight: 780; letter-spacing: 0.04em; text-transform: uppercase; } .editor-rail-menu-button { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; border: 1px solid var(--editor-dark-line-strong); border-radius: 7px; background: var(--editor-dark-raised); color: var(--editor-dark-text); font-size: 1rem; line-height: 1; cursor: pointer; } .editor-rail-menu-button:hover, .editor-rail-menu-button:focus-visible { background: var(--editor-dark-hover); color: #fff; } .editor-rail-menu { position: absolute; top: calc(100% - 6px); right: 12px; z-index: 90; min-width: 232px; max-height: calc(100vh - var(--editor-topbar-h) - 64px); max-height: calc(100dvh - var(--editor-topbar-h) - 64px); overflow-x: hidden; overflow-y: auto; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--editor-dark-line-strong); border-radius: 8px; background: #26262a; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); overscroll-behavior: contain; scrollbar-color: rgba(255, 255, 255, 0.28) #26262a; scrollbar-width: thin; } .editor-rail-menu[hidden] { display: none; } .editor-rail-menu::-webkit-scrollbar { width: 10px; } .editor-rail-menu::-webkit-scrollbar-track { background: #26262a; } .editor-rail-menu::-webkit-scrollbar-thumb { border: 2px solid #26262a; border-radius: 999px; background: rgba(255, 255, 255, 0.28); } .editor-rail-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.42); } .editor-rail-menu button { border: 0; border-radius: 6px; background: transparent; color: #dcdcd9; padding: 9px 12px; font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; text-align: left; cursor: pointer; } .editor-rail-menu button:hover, .editor-rail-menu button:focus-visible { background: var(--editor-dark-hover); color: #fff; outline: none; } .editor-rail-menu button[aria-current="true"] { background: #e8e8e6; color: #1b1b1d; } /* The scrollable settings region: takes the remaining height and scrolls internally; min-height:0 is required so this flex child can shrink below its content and actually scroll. */ .editor-accordion-stack { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; padding: 16px; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; scrollbar-color: rgba(255, 255, 255, 0.28) var(--editor-dark-panel); scrollbar-width: thin; } .editor-accordion-stack::-webkit-scrollbar { width: 12px; } .editor-accordion-stack::-webkit-scrollbar-track { background: var(--editor-dark-panel); } .editor-accordion-stack::-webkit-scrollbar-thumb { border: 3px solid var(--editor-dark-panel); border-radius: 999px; background: rgba(255, 255, 255, 0.28); } .editor-accordion-stack::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.42); } .editor-accordion-stack > .editor-accordion { flex: 0 0 auto; } /* Fixed action footer: stays outside the scroll region (a flex:0 0 auto child after the stack) so Save / Save canvas / Compile & Export and the pouch-size readout are always reachable at any height. */ .editor-rail-actions { display: grid; gap: 9px; flex: 0 0 auto; padding: 14px 16px; border-top: 1px solid var(--editor-dark-line); background: var(--editor-dark-panel); } .editor-size-panel { display: grid; gap: 7px; border: 1px solid var(--editor-dark-line); border-radius: 7px; background: var(--editor-dark-raised); padding: 10px; } .editor-size-panel .rail-label { color: rgba(255, 255, 255, 0.86); font-family: var(--font-brand); font-size: 0.68rem; font-weight: 760; letter-spacing: 0.035em; text-transform: uppercase; } .editor-size-panel .dimension-pill { width: 100%; border-color: var(--editor-dark-line-strong); background: var(--editor-dark-bg); color: var(--editor-dark-text); } .editor-rail-actions .button { width: 100%; min-height: 42px; justify-content: center; } .editor-rail-actions .button.secondary { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-text); } .editor-rail-actions .auth-error { margin: 0; } .editor-inspector .inline-status { color: rgba(255, 255, 255, 0.9); font-family: var(--font-body); font-size: 0.75rem; line-height: 1.35; } .editor-inspector .editor-help, .editor-inspector .muted, .editor-inspector .spot-usage-meta, .editor-inspector .spot-usage-item .spot-warning { color: rgba(255, 255, 255, 0.92); } /* The old always-visible accordion stack became a hamburger-switched rail: exactly one section (details.is-current, forced open by project.js bindRailMenu) shows at a time and the rail header carries its title, so the per-section headers stay hidden. The
markup remains the section container so every control keeps its id and #project-form association. */ .editor-accordion { display: none; border: 0; background: transparent; padding: 0; } .editor-accordion.is-current { display: block; } .editor-accordion summary { display: none; } .editor-control-group { display: grid; gap: 11px; padding: 14px 16px; } .editor-inspector .field { color: #fff; } .editor-inspector .field-label { color: rgba(255, 255, 255, 0.9); font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; letter-spacing: 0; line-height: 1.25; text-transform: none; } .editor-inspector .field input, .editor-inspector .field select, .editor-inspector .field textarea { border-color: rgba(255, 255, 255, 0.18); background: #26262a; color: var(--editor-dark-text); padding: 9px 10px; font-family: var(--font-body); font-size: 0.82rem; line-height: 1.25; } .editor-inspector .field input[type="color"] { min-height: 42px; padding: 4px; } .editor-inspector .field input[type="file"] { width: max-content; max-width: 100%; border: 0; background: transparent; color: transparent; padding: 0; font-size: 0; line-height: 1; } .editor-inspector .field input[type="file"]::file-selector-button { margin: 0; border: 1px solid var(--editor-dark-line-strong); border-radius: 6px; background: var(--editor-dark-raised); color: var(--editor-dark-text); padding: 7px 10px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; cursor: pointer; } .editor-inspector .field input[type="file"]::-webkit-file-upload-button { margin: 0; border: 1px solid var(--editor-dark-line-strong); border-radius: 6px; background: var(--editor-dark-raised); color: var(--editor-dark-text); padding: 7px 10px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; cursor: pointer; } .editor-inspector .logo-import-field { cursor: pointer; } .editor-inspector .logo-import-action { width: 100%; min-height: 42px; justify-content: center; border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-text); } .editor-inspector .logo-import-field:focus-within .logo-import-action { outline: 2px solid rgba(255, 255, 255, 0.82); outline-offset: 2px; } .editor-inspector .logo-import-field.is-busy .logo-import-action { cursor: wait; opacity: 0.68; transform: none; } .editor-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; } .editor-inspector .form-grid, .editor-inspector .form-grid.compact, .editor-inspector .editor-field-row { grid-template-columns: 1fr; } .editor-check { display: flex; align-items: center; gap: 9px; min-height: 34px; font-family: var(--font-body); font-size: 0.82rem; line-height: 1.35; } .editor-check input { width: 18px; height: 18px; accent-color: var(--brand-orange); } .editor-note { border-color: var(--editor-dark-line); background: rgba(255, 255, 255, 0.06); color: #fff; font-family: var(--font-body); font-size: 0.75rem; line-height: 1.4; } .editor-divider { height: 1px; background: var(--editor-dark-line); margin: 3px 0; } .editor-canvas-stage { min-width: 0; border-right: 1px solid rgba(0, 0, 0, 0.45); background: var(--editor-dark-bg); } /* The View/Guides/Rotate/Zoom toolbar lives in the top bar (first header row) beside the brand. It has no surface of its own — the dark header is the surface — and scrolls sideways when the row is tight. */ .editor-canvas-toolbar { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 4px 0; overflow-x: auto; scrollbar-width: thin; } .segmented { display: inline-flex; align-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 7px; background: var(--paper-2); overflow: hidden; } .segmented button, .segmented a { min-height: 36px; border: 0; border-right: 1px solid var(--line); background: transparent; color: #4f5a55; padding: 8px 14px; font-size: 0.84rem; text-decoration: none; font-weight: 780; } .segmented a:last-child { border-right: 0; } .segmented .is-active, .segmented a:hover, .segmented a:focus-visible { background: var(--ink); color: var(--white); } .toolbar-control-block { display: grid; grid-template-rows: minmax(0.6rem, auto) minmax(30px, auto); gap: 4px; align-content: start; align-items: start; flex: 0 0 auto; } .toolbar-control-block > .toolbar-label { display: block; padding: 0 2px; color: #9c9c9a; font-family: var(--font-brand); font-size: 0.66rem; font-weight: 760; letter-spacing: 0.035em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .toolbar-control-group { min-height: 30px; display: inline-flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 7px; background: var(--editor-dark-raised); overflow: hidden; } .toolbar-control-group button, .toolbar-icon-button { min-height: 30px; border: 0; border-left: 1px solid rgba(255, 255, 255, 0.12); background: transparent; color: #d6d6d3; padding: 6px 11px; font-size: 0.8rem; font-weight: 780; cursor: pointer; } .toolbar-control-group button:first-child { border-left: 0; } .toolbar-control-group button:hover, .toolbar-control-group button:focus-visible { background: rgba(255, 255, 255, 0.08); } .toolbar-control-group button.is-active { background: #e8e8e6; color: #1b1b1d; } .toolbar-icon-button { width: 32px; padding: 0; font-size: 0.95rem; } .toolbar-value { min-width: 48px; min-height: 30px; display: inline-flex; align-items: center; justify-content: center; border-left: 1px solid rgba(255, 255, 255, 0.12); padding: 0 10px; color: #d6d6d3; font-size: 0.8rem; font-weight: 780; text-align: center; white-space: nowrap; } /* Rotate/Zoom in the spec row dropped their labels (the icons are self-explanatory), so each is a single group filling the tile height — taller buttons that align with the neighbouring dropdown tiles. */ .editor-nav-spec .editor-spec-tool { display: flex; align-items: center; } .editor-nav-spec .editor-spec-tool .toolbar-control-group, .editor-nav-spec .editor-spec-tool .toolbar-icon-button, .editor-nav-spec .editor-spec-tool .toolbar-value { min-height: 46px; } .dimension-pill { display: grid; align-content: center; gap: 1px; padding: 5px 11px; line-height: 1.08; } .dimension-pill strong { font-size: 0.82rem; } .dimension-pill small { color: var(--editor-dark-muted); font-size: 0.64rem; font-weight: 650; } .editor-artboard { position: relative; min-height: calc(100vh - var(--editor-topbar-h)); display: block; padding: 0; overflow: hidden; cursor: grab; touch-action: none; user-select: none; } .editor-artboard.is-panning { cursor: grabbing; } .editor-artboard .konva-host { position: absolute; inset: 0; width: 100%; height: 100%; box-sizing: border-box; --precision-ruler-gutter-px: 44px; --precision-ruler-left-gutter-px: 44px; --precision-ruler-top-gutter-px: 56px; --canvas-rotation: 0deg; --canvas-rotation-transform: none; --canvas-zoom: 1; --canvas-pan-x: 0px; --canvas-pan-y: 0px; } .editor-artboard .konva-stage-frame { position: absolute; z-index: 1; box-sizing: border-box; overflow: hidden; transform: var(--canvas-rotation-transform); transform-origin: center center; transition: transform 160ms ease; } .editor-artboard .konva-host canvas { display: block; } .editor-canvas-status { position: absolute; top: 16px; left: 16px; z-index: 7; display: grid; gap: 3px; width: min(100% - 32px, 520px); box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 7px; background: rgba(29, 29, 31, 0.84); color: #fff; padding: 9px 12px; pointer-events: none; } .editor-canvas-status strong, .editor-canvas-status .inline-status { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor-canvas-status strong { font-family: var(--font-brand); font-size: 0.82rem; font-weight: 780; line-height: 1.15; } .editor-canvas-status .inline-status { margin: 0; font-size: 0.72rem; line-height: 1.25; } .precision-overlay { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: #d9d9d6; font-family: var(--font-brand); font-size: 0.64rem; font-weight: 780; } .precision-ruler { position: absolute; display: flex; align-items: center; justify-content: center; background: rgba(43, 43, 46, 0.88); border: 1px solid rgba(255, 255, 255, 0.3); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); line-height: 1; } .precision-ruler::before, .precision-ruler::after { content: ""; position: absolute; background: #d9d9d6; } .precision-ruler-x { top: 7px; left: 20px; right: 20px; height: 18px; } .precision-ruler-x::before, .precision-ruler-x::after { top: -5px; width: 1px; height: 28px; } .precision-ruler-x::before { left: 0; } .precision-ruler-x::after { right: 0; } .precision-ruler-y { top: 30px; bottom: 30px; left: 7px; width: 18px; writing-mode: vertical-rl; transform: rotate(180deg); } .precision-ruler-y::before, .precision-ruler-y::after { left: -5px; width: 28px; height: 1px; } .precision-ruler-y::before { top: 0; } .precision-ruler-y::after { bottom: 0; } .precision-scale-badge { position: absolute; right: 8px; bottom: 8px; max-width: min(265px, calc(100% - var(--precision-ruler-left-gutter-px, 44px))); border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 6px; background: rgba(43, 43, 46, 0.92); padding: 6px 8px; color: #cfcfcc; font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; line-height: 1.2; } .precision-tolerance { position: absolute; left: calc(var(--precision-ruler-left-gutter-px, 44px) + 14px); bottom: 10px; display: flex; align-items: center; gap: 6px; color: var(--guide-pink); font-family: var(--font-body); font-size: 0.66rem; font-weight: 800; } .precision-tolerance span { width: var(--tolerance-px); height: var(--tolerance-px); min-width: 6px; min-height: 6px; border: 1.5px solid currentcolor; background: linear-gradient(currentcolor, currentcolor) center / 100% 1px no-repeat, linear-gradient(currentcolor, currentcolor) center / 1px 100% no-repeat; } .precision-static-ruler { position: absolute; z-index: 5; color: #c9c9c6; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; line-height: 1; pointer-events: none; } .precision-ruler-corner { position: absolute; top: 0; left: 0; z-index: 6; box-sizing: border-box; border-right: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); background: #2e2e31; } .precision-static-ruler-y { width: var(--precision-ruler-left-gutter-px, 44px); box-sizing: border-box; border-right: 1px solid rgba(255, 255, 255, 0.14); background: #2e2e31; } .precision-static-ruler-x { height: var(--precision-ruler-top-gutter-px, 56px); box-sizing: border-box; border-bottom: 1px solid rgba(255, 255, 255, 0.14); background: #2e2e31; } .precision-static-ruler-tick { position: absolute; border-top: 1.5px solid currentcolor; } .precision-static-ruler-y .precision-static-ruler-tick { right: 0; } .precision-static-ruler-x .precision-static-ruler-tick { /* Ticks sit on the bottom (canvas-facing) edge, mirroring the left ruler's inner-edge ticks; the numbers go above them, toward the header. */ top: auto; bottom: 0; border-top: 0; border-left: 1.5px solid currentcolor; } .precision-static-ruler-tick-major { width: 26px; color: #c9c9c6; } .precision-static-ruler-x .precision-static-ruler-tick-major { width: 0; height: 26px; } .precision-static-ruler-tick-minor { width: 15px; color: #9d9d9a; } .precision-static-ruler-x .precision-static-ruler-tick-minor { width: 0; height: 15px; } .precision-static-ruler-tick-end { width: 24px; color: #c9c9c6; } .precision-static-ruler-x .precision-static-ruler-tick-end { width: 0; height: 24px; } .precision-ruler-label { position: absolute; display: block; color: #d9d9d6; font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0; line-height: 1; } .precision-static-ruler-y .precision-ruler-label { /* Sit inside the dark ruler, just left of the (shortened) tick, so the number stays readable over a light pouch instead of spilling onto the artboard. */ left: auto; right: 28px; top: -0.39rem; width: 14px; min-width: 0; text-align: right; } .precision-static-ruler-x .precision-ruler-label { /* The label is a child of the (bottom-anchored) tick, so position it from the tick's bottom/canvas edge — bottom:28px lands it in the outer zone ABOVE the 26px tick, exactly mirroring the left ruler's right:28px. */ left: 0; right: auto; top: auto; bottom: 28px; min-width: 12px; text-align: center; transform: translateX(-50%); } .editor-artboard.is-panning .konva-host { transition: none; } .editor-artboard.has-contract-canvas .editor-preview-frame { display: none; } .editor-artboard.has-contract-canvas #brand-mark-geometry { position: absolute; left: 50%; bottom: 32px; z-index: 6; width: min(100% - 64px, 520px); margin: 0; text-align: center; transform: translateX(-50%); pointer-events: none; } .editor-preview-frame { position: absolute; top: 50%; left: 50%; width: min(520px, 78vw); min-width: 300px; --canvas-rotation: 0deg; --canvas-zoom: 1; --canvas-pan-x: 0px; --canvas-pan-y: 0px; transform: translate(calc(-50% + var(--canvas-pan-x)), calc(-50% + var(--canvas-pan-y))); transition: transform 120ms ease; } .editor-artboard.is-panning .editor-preview-frame { transition: none; } .editor-bleed-caption { position: absolute; top: -24px; left: 50%; transform: translateX(-50%); color: var(--guide-pink); font-family: var(--font-brand); font-size: 0.68rem; font-weight: 760; white-space: nowrap; } .editor-pouch { position: relative; width: 100%; aspect-ratio: 170 / 240; border: 2px solid var(--guide-pink); background: #ab3a2c; box-shadow: 0 0 0 28px rgba(255, 255, 255, 0.08), 0 18px 46px rgba(0, 0, 0, 0.4); overflow: visible; transform: rotate(var(--canvas-rotation)) scale(var(--canvas-zoom)); transform-origin: center; transition: transform 160ms ease; } .editor-preview-frame.guides-hidden .editor-bleed-caption, .editor-preview-frame.guides-hidden .preview-safe, .editor-preview-frame.guides-hidden .preview-seal, .editor-preview-frame.guides-hidden .preview-line, .editor-preview-frame.guides-hidden .preview-window, .editor-preview-frame.guides-hidden .preview-hang-hole { opacity: 0; } .preview-safe, .preview-seal, .preview-line, .preview-window, .preview-hang-hole { position: absolute; pointer-events: none; } .preview-safe { inset: 18px; border: 1px dashed rgba(32, 185, 170, 0.86); } .preview-safe span, .preview-seal span, .preview-line span, .preview-window span { position: absolute; left: 6px; top: 4px; color: inherit; font-family: var(--font-brand); font-size: 0.58rem; font-weight: 800; white-space: nowrap; } .preview-seal { border: 1px dashed rgba(223, 43, 145, 0.72); background: rgba(223, 43, 145, 0.07); color: var(--guide-pink); } .preview-seal.side { top: 0; bottom: 0; width: 3%; } .preview-seal.left { left: 0; } .preview-seal.right { right: 0; } .preview-seal.horizontal { left: 0; right: 0; height: 6%; } .preview-seal.top { top: 0; } .preview-seal.bottom { bottom: 0; } .preview-line { left: -32px; right: -32px; height: 0; border-top: 2px dashed currentcolor; color: var(--guide-pink); } .preview-line span { left: -2px; top: -18px; } .preview-line.zipper { color: var(--brand-orange); } .preview-line.perforation { color: var(--teal); } .preview-thc { position: absolute; left: 12%; top: 17%; width: 18%; border: 1px dashed rgba(21, 23, 22, 0.42); padding: 2px; background: rgba(255, 255, 255, 0.22); } .preview-brand { position: absolute; left: 34%; top: 22%; border: 2px dashed var(--brand-orange); padding: 5px 9px; color: var(--ink); font-weight: 900; font-size: clamp(0.9rem, 2vw, 1.22rem); background: rgba(255, 255, 255, 0.04); } .preview-window { display: none; border: 2px dashed var(--green); background: rgba(255, 255, 255, 0.42); color: var(--green); } .preview-window.is-enabled { display: block; } .preview-window.kind-roundedRect { border-radius: var(--preview-window-radius, 14px); } .preview-window.kind-oval, .preview-window.kind-circle { border-radius: 999px; } .preview-window.kind-arch { border-radius: 999px 999px 8px 8px; } .preview-window.kind-wave { clip-path: polygon(0 16%, 20% 8%, 40% 17%, 60% 8%, 80% 16%, 100% 8%, 100% 100%, 0 100%); } .preview-window.kind-castle { clip-path: polygon(0 0, 26% 0, 26% 24%, 36% 24%, 36% 0, 64% 0, 64% 24%, 74% 24%, 74% 0, 100% 0, 100% 100%, 0 100%); } .preview-hang-hole { display: none; width: 22px; height: 22px; border: 2px solid var(--brand-orange); border-radius: 999px; background: rgba(255, 253, 248, 0.72); box-shadow: 0 0 0 4px rgba(201, 68, 31, 0.12); } .preview-hang-hole.is-enabled { display: block; } .preview-warning { position: absolute; left: 7%; right: 7%; bottom: 6%; border: 1pt solid #000; background: #fff100; color: #000; padding: 6pt; font-family: Arial, Helvetica, sans-serif; font-size: 7pt; font-weight: 400; line-height: 8pt; text-align: left; hyphens: none; overflow-wrap: normal; } .preview-warning p { margin: 0; } .preview-warning p + p { margin-top: 3pt; } .preview-warning strong { font-weight: 700; } .preview-warning-attribution { font-size: 6pt; line-height: 7pt; text-align: right; } .editor-compliance-panel { position: sticky; top: var(--editor-topbar-h); z-index: 60; align-self: start; height: calc(100vh - var(--editor-topbar-h)); overflow: visible; display: flex; flex-direction: column; background: var(--editor-dark-panel); color: var(--editor-dark-text); border-left: 1px solid rgba(0, 0, 0, 0.4); font-size: 0.84rem; padding: 18px; } /* Scrollable region for the compliance panel. Everything except the .compliance-toggle tab lives here so the panel's content (now including the relocated Category/Subcategory chips) scrolls internally instead of overflowing below the fixed-height, sticky panel where it would be unreachable. The toggle stays a direct child of the panel so its left-protruding tab is not clipped. Mirrors the .editor-inspector / .editor-accordion-stack scroll pattern. */ .compliance-panel-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .editor-compliance-panel.is-collapsed { overflow: visible; border-left: 0; padding: 0; } .editor-compliance-panel.is-collapsed > :not(.compliance-toggle) { display: none; } .compliance-toggle { position: absolute; top: 88px; left: -36px; z-index: 52; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 262px; padding: 42px 6px 16px; border: 1px solid rgba(255, 255, 255, 0.2); border-right: 0; border-radius: 7px 0 0 7px; background: var(--editor-dark-raised); color: var(--editor-dark-text); cursor: pointer; font-family: var(--font-body); font-size: 0.76rem; font-weight: 800; line-height: 1; letter-spacing: 0.04em; text-transform: none; writing-mode: vertical-rl; box-shadow: -10px 14px 28px rgba(0, 0, 0, 0.35); } .editor-compliance-panel.is-collapsed .compliance-toggle { left: -36px; } .compliance-toggle:hover, .compliance-toggle:focus-visible { background: var(--editor-dark-hover); border-color: rgba(255, 255, 255, 0.36); color: #fff; outline: 2px solid rgba(255, 255, 255, 0.2); outline-offset: 2px; } .compliance-tab-chevron { position: absolute; top: 18px; left: 0; right: 0; font-size: 1.2rem; line-height: 1; text-align: center; writing-mode: horizontal-tb; } .compliance-tab-label { transform: rotate(180deg); } /* Breathing "live" indicator pinned at the bottom of the vertical tab (mirrors the chevron at the top). Centered with margin auto — not translateX — so the transform stays free for the pulse. */ .compliance-live-dot { position: absolute; bottom: 16px; left: 0; right: 0; width: 9px; height: 9px; margin: 0 auto; border-radius: 50%; background: var(--brand-orange); animation: compliance-breathe 2.4s ease-in-out infinite; } @keyframes compliance-breathe { 0%, 100% { transform: scale(0.575); opacity: 0.5; } 50% { transform: scale(1.15); opacity: 1; } } @media (prefers-reduced-motion: reduce) { /* Deliberately keep this pulse under reduced motion — it's a small, slow, non-vestibular live-status cue. !important re-asserts it over the global `* { animation: none !important }` reset above. */ .compliance-live-dot { animation: compliance-breathe 2.4s ease-in-out infinite !important; } } .compliance-panel-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 14px; } .compliance-panel-head strong { display: block; } /* WARNINGS tile toggle: styled to match the .editor-custom-select-button dropdowns in the spec row (dark chip, value + chevron), replacing the old yellow Health-Canada summary treatment. */ .warning-tile .warning-summary-toggle { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; border: 0; background: transparent; color: #fff; cursor: pointer; padding: 22px 10px 7px; text-align: left; font-family: var(--font-body); font-size: 0.84rem; font-weight: 800; line-height: 1.2; } .warning-tile .warning-summary-toggle::after { content: ""; align-self: end; width: 8px; height: 8px; border-right: 2px solid currentcolor; border-bottom: 2px solid currentcolor; transform: rotate(45deg) translateY(-2px); transition: transform 140ms ease; } .warning-tile .warning-summary-toggle[aria-expanded="true"]::after { transform: rotate(225deg) translateY(-1px); } .warning-tile .warning-summary-toggle:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.72); outline-offset: 4px; } .warning-selected-label { display: block; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; font: inherit; } /* The picker floats wide over the canvas — position:fixed escapes the spec row's overflow clip. Standard 8-12px radii here (not the exaggerated rounding from the mockup). */ .warning-option-panel { position: fixed; top: calc(var(--editor-topbar-h) + 14px); left: 50%; transform: translateX(-50%); z-index: 80; display: flex; flex-direction: column; gap: 12px; width: min(1320px, 98vw); max-height: calc((100dvh - var(--editor-topbar-h) - 56px) * 0.7); border: 1px solid var(--editor-dark-line-strong); border-radius: 12px; background: var(--editor-dark-panel); padding: 16px; box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6); } .warning-option-panel[hidden] { display: none; } /* Scoped past `.editor-spec-item strong` (0,1,1), which would otherwise ellipsize/shrink this heading. */ .warning-option-panel .warning-option-derived { color: var(--editor-dark-text); font-family: var(--font-brand); font-size: 0.92rem; font-weight: 800; white-space: normal; overflow: visible; text-overflow: clip; } .warning-option-list { display: grid; gap: 8px; min-height: 0; overflow: auto; } .warning-option { border: 1px solid var(--editor-dark-line); border-radius: 8px; background: var(--editor-dark-raised); color: var(--editor-dark-text); cursor: pointer; font-family: Arial, Helvetica, sans-serif; padding: 12px 14px; text-align: left; } .warning-option:hover, .warning-option:focus-visible { border-color: var(--editor-dark-line-strong); background: rgba(255, 255, 255, 0.06); } .warning-option.is-selected { border-color: rgba(255, 255, 255, 0.7); background: rgba(255, 255, 255, 0.12); } .warning-option-index, .warning-option-copy { display: block; } .warning-option-index { margin-bottom: 6px; font-family: Arial, Helvetica, sans-serif; color: rgba(255, 255, 255, 0.6); font-size: 0.62rem; font-weight: 820; letter-spacing: 0.04em; text-transform: uppercase; } .warning-option-copy { color: var(--editor-dark-text); font-size: 0.8rem; font-weight: 600; line-height: 1.4; } .warning-option-copy.fr { margin-top: 6px; color: var(--editor-dark-muted); } .compliance-score-grid { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 14px; } .score { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 7px; padding: 9px 11px; text-align: left; } .score strong { display: block; order: 2; font-size: 1.08rem; line-height: 1; } .score span { display: block; order: 1; margin-top: 0; font-family: var(--font-brand); font-size: 0.68rem; font-weight: 820; text-transform: uppercase; } .score.pass { background: rgba(32, 185, 170, 0.16); color: #7fe0c4; } .score.review { background: rgba(240, 116, 79, 0.16); color: #ffc493; } .score.fail { background: rgba(220, 60, 48, 0.18); color: #ff9d94; } .compliance-findings { display: grid; gap: 0; padding: 0; margin: 14px 0; list-style: none; } .compliance-findings li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, 0.1); padding: 13px 0 13px 20px; color: rgba(255, 255, 255, 0.75); font-size: 0.82rem; } .compliance-findings li::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; border-radius: 999px; background: var(--teal); } .compliance-findings .status { margin-right: 7px; } /* Actionable fix hint mapping a blocking/review finding to a fillable Compliance-data field. */ .finding-fix { display: block; margin-top: 5px; padding: 4px 8px; border-left: 2px solid var(--teal, #1f9d7a); background: rgba(31, 157, 122, 0.12); color: rgba(255, 255, 255, 0.82); font-size: 0.76rem; font-weight: 500; } /* Shared Compliance-data / product-facts fieldset (onboarding review + editor inspector). */ .product-facts { display: grid; gap: 12px; } .product-facts .pf-qty { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, auto); gap: 6px; } .product-facts .pf-qty input { min-width: 0; } .product-facts .pf-qty select { min-width: 84px; width: 100%; } .product-facts textarea { width: 100%; resize: vertical; font: inherit; } .product-facts-decls, .product-facts-attest { display: grid; gap: 8px; padding-top: 8px; border-top: 1px solid rgba(21, 23, 22, 0.08); } .onboarding-facts { margin: 14px 0; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 10px; padding: 12px 16px; } .onboarding-facts > summary { cursor: pointer; font-weight: 600; } .onboarding-facts[open] > summary { margin-bottom: 10px; } .editor-export-card { margin-top: 16px; } @media (max-width: 1280px) { .editor-workbench { grid-template-columns: minmax(420px, 1fr) 236px 280px; } .editor-workbench.compliance-collapsed { grid-template-columns: minmax(420px, 1fr) 0 280px; } } @media (max-width: 1020px) { .editor-top-nav, .editor-workbench { position: relative; top: auto; } .editor-top-nav { grid-template-columns: 1fr; padding: 12px 16px; } .onboarding-main { padding: 18px 14px 32px; } .onboarding-shell { grid-template-columns: 1fr; } .projects-folder-panel { padding: 34px 18px; } .projects-folder-head { align-items: flex-start; flex-direction: column; } .projects-card-grid, .projects-section-grid { grid-template-columns: 1fr; } .onboarding-stepper { position: static; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow-x: auto; } /* ponytail: in a narrow desktop window (below 900px the app gate takes over entirely) the preview column is dropped rather than stacked — the review step still summarizes everything */ .onboarding-preview { display: none; } .onb-size-presets { grid-template-columns: 1fr; } .onboarding-stepper button { min-width: 136px; } .product-choice-grid, .subcategory-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .editor-back { justify-self: start; } .editor-workbench { display: flex; flex-direction: column; } .editor-inspector, .editor-compliance-panel, .editor-canvas-toolbar { position: relative; top: auto; height: auto; } .editor-canvas-stage { order: 2; } .editor-inspector { order: 1; border-right: 0; /* Stacked layout: the inspector is no longer pinned to the viewport. Give it a DEFINITE bounded height (not height:auto + max-height) so the flex algorithm reliably shrinks the accordion stack and keeps the action footer inside the box (a max-height container can let a flex:0 child overflow + clip). The subtraction leaves room for the header + spec bar so the footer stays reachable by page scroll. */ height: min(68vh, calc(100dvh - 200px)); } .editor-rail-menu { max-height: min(calc(68vh - 64px), calc(100vh - 264px)); max-height: min(calc(68vh - 64px), calc(100dvh - 264px)); } .editor-compliance-panel { order: 3; } .compliance-toggle { position: relative; inset: auto; width: 100%; height: 42px; margin-bottom: 12px; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 7px; writing-mode: horizontal-tb; } .editor-compliance-panel.is-collapsed .compliance-toggle { left: auto; } .compliance-tab-chevron { position: static; } .compliance-tab-label { transform: none; } } @media (max-width: 620px) { .editor-field-row, .compliance-score-grid, .review-grid, .product-choice-grid, .subcategory-choice-grid, .form-grid.compact { grid-template-columns: 1fr; } .editor-canvas-toolbar, .compliance-panel-head { align-items: stretch; flex-direction: column; } .editor-preview-frame { width: min(100%, 360px); } } /* ============================================================ v1 product elevation: nav account menu, toasts, real projects, editor layer list + numeric controls + keep-out warnings. ============================================================ */ /* Nav right-side actions wrapper (Projects / Editor / Report / Settings) */ .editor-top-nav .nav-actions { display: flex; align-items: center; gap: 10px; justify-self: end; } .nav-account { position: relative; } .nav-account-button { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 999px; background: var(--paper-2); padding: 4px 12px 4px 4px; color: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; cursor: pointer; } .nav-account-button:hover, .nav-account-button:focus-visible { border-color: var(--nav-orange); outline: none; } .nav-account-avatar { width: 30px; height: 30px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--nav-orange); color: #fff; font-weight: 800; font-size: 0.82rem; } .nav-account-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-account-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 220px; display: flex; flex-direction: column; gap: 2px; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 10px; background: var(--paper-2); box-shadow: var(--shadow); padding: 8px; z-index: 60; } .nav-account-menu[hidden] { display: none; } .nav-account-email { margin: 4px 8px 8px; color: var(--muted); font-size: 0.78rem; word-break: break-all; } .nav-account-item { display: block; width: 100%; text-align: left; border: 0; border-radius: 7px; background: transparent; padding: 9px 10px; color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; text-decoration: none; cursor: pointer; } .nav-account-item:hover, .nav-account-item:focus-visible { background: rgba(201, 68, 31, 0.1); color: var(--nav-orange); outline: none; } .nav-account-signout { color: var(--fail); } /* Toasts */ .toast-root { position: fixed; right: 18px; bottom: 18px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(92vw, 380px); } .toast { border-radius: 9px; padding: 12px 14px; background: var(--ink); color: #fff; font-size: 0.85rem; font-weight: 600; box-shadow: var(--shadow); opacity: 0; transform: translateY(10px); transition: opacity 0.24s ease, transform 0.24s ease; } .toast.is-visible { opacity: 1; transform: translateY(0); } .toast-error { background: var(--fail); } .toast-success { background: var(--green); } .toast-info { background: var(--ink); } /* Real Projects workspace */ .projects-card { display: flex; flex-direction: column; } .projects-card-link { text-decoration: none; color: inherit; transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease; } .projects-card-link:hover, .projects-card-link:focus-visible { border-color: var(--nav-orange); box-shadow: var(--shadow); transform: translateY(-2px); outline: none; } .projects-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .projects-card-badge { display: inline-block; border-radius: 7px; padding: 4px 8px; background: rgba(201, 68, 31, 0.12); color: var(--nav-orange); font-family: var(--font-brand); font-size: 0.7rem; font-weight: 760; white-space: nowrap; } .projects-card h2 { margin: 10px 0 10px; } .projects-card p { margin: 0 0 14px; } .projects-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; } .projects-card-open { font-family: var(--font-brand); font-weight: 760; font-size: 0.78rem; color: var(--nav-orange); } .projects-empty { grid-column: 1 / -1; border: 1px dashed rgba(21, 23, 22, 0.2); border-radius: 10px; background: var(--paper-2); padding: 44px 28px; text-align: center; color: var(--muted); } .projects-empty h2 { margin: 0 0 8px; color: var(--ink); } .projects-empty .button { margin-top: 16px; } .projects-loading { grid-column: 1 / -1; color: var(--muted); padding: 24px 0; } /* Editor: object / layer list */ .editor-layer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .editor-layer { display: flex; align-items: center; gap: 8px; width: 100%; border: 1px solid var(--editor-dark-line); border-radius: 7px; background: var(--editor-dark-raised); color: #fff; padding: 8px 10px; font-family: var(--font-body); font-size: 0.8rem; text-align: left; cursor: default; } .editor-layer.is-editable { cursor: pointer; } .editor-layer.is-editable:hover, .editor-layer.is-editable.is-selected { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-hover); } .editor-layer-dot { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; background: currentcolor; opacity: 0.85; } .editor-layer-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .editor-layer-tag { flex: 0 0 auto; font-family: var(--font-brand); font-size: 0.62rem; font-weight: 760; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.92; } .editor-layer-tag.is-locked { color: rgba(255, 255, 255, 0.45); } .editor-layer-tag.is-editable { color: rgba(255, 255, 255, 0.9); } .editor-layer-empty { color: rgba(255,255,255,0.78); font-size: 0.78rem; padding: 6px 2px; } /* Editor: keep-out / live-area placement warning */ .editor-keepout-warning { margin: 8px 0 0; border-radius: 7px; padding: 9px 11px; font-size: 0.78rem; font-weight: 700; line-height: 1.35; } .editor-keepout-warning.is-ok { background: rgba(20,120,93,0.16); color: #d7ffe9; } .editor-keepout-warning.is-violation { background: rgba(180,35,24,0.22); color: #ffd7d2; } .editor-keepout-warning[hidden] { display: none; } /* Report: plain-language compliance banner */ .report-plain-status { border-radius: 10px; padding: 16px 18px; margin: 0 0 18px; border: 1px solid rgba(21,23,22,0.1); background: var(--paper-2); } .report-plain-status .report-plain-headline { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.05rem; } .report-plain-status p { margin: 8px 0 0; color: var(--muted); } .report-plain-status.is-pass { border-color: rgba(20,120,93,0.45); } .report-plain-status.is-review { border-color: rgba(169,101,0,0.5); } .report-plain-status.is-fail { border-color: rgba(180,35,24,0.5); } .report-plain-dot { width: 12px; height: 12px; border-radius: 999px; } .report-plain-status.is-pass .report-plain-dot { background: var(--green); } .report-plain-status.is-review .report-plain-dot { background: var(--review); } .report-plain-status.is-fail .report-plain-dot { background: var(--fail); } .report-findings { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .report-findings li { border: 1px solid rgba(21,23,22,0.1); border-radius: 8px; padding: 10px 12px; background: var(--paper-2); } .report-findings .status { margin-right: 8px; } /* Onboarding structural-feature toggles */ .onboarding-structure { grid-column: 1 / -1; margin-top: 8px; } .onboarding-structure-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin-top: 8px; } .onboarding-structure .editor-check { flex-direction: row; align-items: center; gap: 8px; } /* --- Pantone / spot-colour selector + usage panel (spot-colour workflow) ------------------------- */ .colour-input-host { margin-top: 0.75rem; } .colour-input { display: flex; flex-direction: column; gap: 0.5rem; } .colour-panel { display: flex; flex-direction: column; gap: 0.4rem; } .colour-panel[hidden] { display: none; } .colour-field-row { display: flex; gap: 0.5rem; } .colour-field-row .field { flex: 1 1 0; min-width: 0; } .colour-cmyk-note, .colour-preview-note, .colour-pantone-hint { margin: 0; } .spot-host { margin-top: 0.75rem; } .spot-selector { display: flex; flex-direction: column; gap: 0.5rem; } .spot-results { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--border, #d8d8d8); border-radius: 6px; padding: 4px; background: #fff; } .spot-result { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; border: 0; background: transparent; cursor: pointer; font: inherit; text-align: left; border-radius: 4px; } .spot-result:hover, .spot-result:focus { background: rgba(0, 0, 0, 0.06); } .spot-result-custom { font-style: italic; color: var(--muted, #666); } .spot-swatch-chip { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, 0.25); } .spot-selected { display: flex; align-items: flex-start; gap: 10px; padding: 8px; border: 1px solid var(--border, #d8d8d8); border-radius: 6px; background: #fafafa; } .spot-selected .spot-swatch-chip { width: 28px; height: 28px; flex-basis: 28px; } .spot-selected-meta { display: flex; flex-direction: column; gap: 2px; font-size: 0.8rem; min-width: 0; } .spot-source, .spot-preview, .spot-cmyk { color: var(--muted, #666); } .spot-warning { color: #8a5a00; font-size: 0.78rem; } .spot-clear { margin-left: auto; align-self: center; background: transparent; border: 0; color: var(--muted, #666); cursor: pointer; text-decoration: underline; } .spot-print-mode { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .spot-preview-warning, .spot-cmyk-warning { margin: 0; } .spot-import-panel { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 8px; border: 1px dashed var(--border, #d8d8d8); border-radius: 6px; } .spot-usage-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .spot-usage-item { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: start; } .spot-usage-item .spot-warning { grid-column: 1 / -1; } .spot-usage-meta { font-size: 0.8rem; } .link-button { background: transparent; border: 0; color: var(--accent, #2f6fed); cursor: pointer; text-decoration: underline; padding: 0; font: inherit; align-self: flex-start; } .secondary-button { align-self: flex-start; padding: 6px 12px; border: 1px solid var(--border, #d8d8d8); border-radius: 6px; background: #fff; cursor: pointer; font: inherit; } .inline-status.error { color: #b00020; } /* --- desktop-only gate --------------------------------------------------------------------------- The app (auth, projects, wizard, editor, report, settings) is explicitly a computer-browser tool: the editor needs a full-size screen and precise pointer input. Below the gate width every app page hides its content and shows one clear message instead. The marketing pages stay responsive. CSS-only: body children hide; the message renders as a body pseudo-element, which `body > *` cannot match. Public legal pages (privacy/terms/legal/disclaimers) share the app shell classes but must stay readable on phones — footer and search links land there — so they opt out. */ @media (max-width: 900px) { body.editor-body:not(.legal-app-body) > *, body.onboarding-body > *, body.app-page-body:not(.legal-app-body) > * { display: none !important; } body.editor-body:not(.legal-app-body)::before, body.onboarding-body::before, body.app-page-body:not(.legal-app-body)::before { content: "Prooflet is a desktop tool.\A\AThe pouch editor needs a full-size screen and precise mouse input, so the app only runs in a computer browser.\A\AOpen prooflet.ca on your computer to continue."; white-space: pre-line; position: fixed; inset: 0; z-index: 9999; display: grid; place-content: center; padding: 32px 24px 32px; text-align: center; font-size: 1rem; line-height: 1.55; color: var(--ink); background: var(--paper) url("/public/images/prooflet-icon-color-v2.png") no-repeat center 22% / 56px; } } /* --- dark grayscale editor chrome (canvas.html, body.editor-dark) -------------------------------- Scoped overrides for the SHARED chrome primitives the editor reuses (top nav, account menu, buttons, fields, statuses). Canvas-only classes are dark-themed at their base rules above; this block only covers classes that other (light) app pages also use, so nothing leaks outside the editor. The regulated Health Canada warning surfaces keep their yellow/black treatment. */ .editor-dark { background: var(--editor-dark-bg); color: var(--editor-dark-text); color-scheme: dark; /* Free hooks the spot-colour panel already references via var(--border)/var(--accent); --muted lifts every stray var(--muted) text (spot metadata, labels) to readable on dark. */ --border: rgba(255, 255, 255, 0.2); --accent: #d9d9d6; --muted: var(--editor-dark-muted); } .editor-dark .editor-check input { accent-color: #d9d9d6; } /* Two-row top bar: brand + view tools + nav/account on the first row, the Project/Brand/SKU context strip on the second. Markup order (links -> spec -> actions) is unchanged; the grid places the spec group on its own row. */ .editor-dark .editor-top-nav { grid-template-columns: auto auto minmax(0, 1fr) auto; grid-template-areas: "brand links toolbar actions" "spec spec spec spec"; grid-template-rows: minmax(64px, auto) auto; row-gap: 0; min-height: 0; background: var(--editor-dark-panel); /* Divider as a shadow, not a border: the sticky offsets below assume the header is exactly --editor-topbar-h tall (64px row + 61px spec row) and a border would add an uncounted 1px. */ border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); padding: 0 18px; } .editor-dark .editor-brand { grid-area: brand; } .editor-dark .editor-nav-links { grid-area: links; } .editor-dark .editor-top-nav > .editor-canvas-toolbar { grid-area: toolbar; } .editor-dark .editor-top-nav > .nav-actions { grid-area: actions; } .editor-dark .editor-nav-spec { grid-area: spec; border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 7px 0; } .editor-dark .editor-nav-links a { color: #b9b9b6; } .editor-dark .editor-nav-links a.active, .editor-dark .editor-nav-links a:hover, .editor-dark .editor-nav-links a:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; } .editor-dark .editor-settings-link { border-color: rgba(255, 255, 255, 0.2); background: var(--editor-dark-raised); color: var(--editor-dark-text); box-shadow: none; } .editor-dark .editor-settings-link:hover, .editor-dark .editor-settings-link:focus-visible { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .editor-dark .nav-account-button { border-color: rgba(255, 255, 255, 0.2); background: var(--editor-dark-raised); color: var(--editor-dark-text); } .editor-dark .nav-account-button:hover, .editor-dark .nav-account-button:focus-visible { border-color: rgba(255, 255, 255, 0.4); } .editor-dark .nav-account-avatar { background: #6a6a6f; } .editor-dark .nav-account-menu { border-color: var(--editor-dark-line-strong); background: #2f2f33; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .editor-dark .nav-account-email { color: var(--editor-dark-muted); } .editor-dark .nav-account-item { color: var(--editor-dark-text); } .editor-dark .nav-account-item:hover, .editor-dark .nav-account-item:focus-visible { background: var(--editor-dark-hover); color: #fff; } .editor-dark .nav-account-signout { color: #ff9d94; } .editor-dark .ui-scale-control { color: var(--editor-dark-muted); } .editor-dark .ui-scale-control select { border-color: rgba(255, 255, 255, 0.2); background: var(--editor-dark-raised); color: var(--editor-dark-text); } /* Shared button primitives: the light primary reads as the strongest action on dark chrome. */ .editor-dark .button { background: #e8e8e6; border-color: transparent; color: #1b1b1d; } .editor-dark .button.secondary { background: var(--editor-dark-raised); border-color: var(--editor-dark-line-strong); color: var(--editor-dark-text); } .editor-dark .button.ghost { color: rgba(255, 255, 255, 0.82); } .editor-dark .btn-ghost { border: 1px solid var(--editor-dark-line-strong); border-radius: 6px; background: transparent; color: var(--editor-dark-text); padding: 8px 10px; font: inherit; cursor: pointer; } .editor-dark .btn-ghost:hover, .editor-dark .btn-ghost:focus-visible { background: rgba(255, 255, 255, 0.08); } .editor-dark .inline-status { color: var(--editor-dark-muted); } /* Re-assert the brighter rail treatment: this scope block ties with .editor-inspector .inline-status on specificity and would otherwise win by order and dim the rail's status lines. */ .editor-dark .editor-inspector .inline-status { color: rgba(255, 255, 255, 0.9); } .editor-dark .inline-status.error { color: #ff9d94; } .editor-dark .auth-error { background: rgba(220, 60, 48, 0.16); border-color: rgba(255, 130, 118, 0.5); color: #ff9d94; } .editor-dark .rail-label { color: rgba(255, 255, 255, 0.72); } /* The Health Canada warning picker stays yellow/black (regulated treatment). */ .editor-dark .warning-summary-toggle .rail-label { color: #000; } .editor-dark .rail-card { border-color: var(--editor-dark-line); background: var(--editor-dark-raised); box-shadow: none; } .editor-dark .rail-card:hover { border-color: var(--editor-dark-line-strong); box-shadow: none; transform: none; } .editor-dark .tool-pill { border-color: var(--editor-dark-line); background: var(--editor-dark-raised); color: var(--editor-dark-text); } /* Re-assert the size panel's own treatment: the two scope rules above tie with .editor-size-panel .rail-label / .dimension-pill on specificity and would win by order. */ .editor-dark .editor-size-panel .rail-label { color: rgba(255, 255, 255, 0.86); } .editor-dark .editor-size-panel .dimension-pill { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-bg); } /* Pouch-size readout now lives at the far right of the spec row (directly under the account menu + gear), laid out horizontally and sized to the spec tiles so the two-row header stays exactly --editor-topbar-h. */ /* Pouch size now sits in the top-middle toolbar slot (was the View/Zoom toolbar). */ .editor-dark .editor-canvas-toolbar .editor-size-panel { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 6px 10px; } /* One-line pill (mm + inches side by side) keeps the panel compact within the header row. */ .editor-dark .editor-canvas-toolbar .editor-size-panel .dimension-pill { width: auto; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 7px; } /* The brand font (Bitcount Grid) seats its glyphs high in the line box, so even centred the label reads high vs the pill's text. Nudge it down so POUCH SIZE sits level with the dimensions. */ .editor-dark .editor-canvas-toolbar .editor-size-panel .rail-label { line-height: 1; position: relative; top: 4px; } .editor-dark .lock-pill { color: var(--editor-dark-muted); } /* Spot-colour / Pantone panel hardcoded light surfaces. */ .editor-dark .spot-results { background: #26262a; } .editor-dark .spot-result:hover, .editor-dark .spot-result:focus { background: rgba(255, 255, 255, 0.08); } .editor-dark .spot-selected { background: var(--editor-dark-raised); } .editor-dark .spot-swatch-chip { border-color: rgba(255, 255, 255, 0.3); } .editor-dark .spot-warning { color: #ffce7a; } .editor-dark .secondary-button { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-text); } @media (max-width: 1020px) { /* The stacked narrow-desktop layout: collapse the two-row header grid back to a single column. */ .editor-dark .editor-top-nav { grid-template-columns: 1fr; grid-template-areas: none; grid-template-rows: none; /* The 0-2-0 base rule above zeroes these; the shared 1020px .editor-top-nav rule (0-1-0) cannot win them back, so restore the stacked rhythm here. */ padding: 12px 16px; row-gap: 14px; } .editor-dark .editor-brand, .editor-dark .editor-nav-links, .editor-dark .editor-top-nav > .editor-canvas-toolbar, .editor-dark .editor-top-nav > .nav-actions, .editor-dark .editor-nav-spec { grid-area: auto; } .editor-dark .editor-top-nav > .editor-canvas-toolbar { justify-content: flex-start; } } /* ============================================================================ Pricing page (pricing.html) Plans priced by SKU exports/month. Middle tier is the emphasized "Most popular" card: light-orange tint (~8% of --brand-orange) + brand border. Reuses the marketing header/footer, .section reveal, .button, .status.soon. ========================================================================== */ /* Pricing content stays visible without depending on scroll-observer timing (print/headless-safe). */ .pricing-page .reveal-on-scroll { opacity: 1; transform: none; transition: none; } .pricing-hero .page-title p { color: #38413c; font-size: clamp(1rem, 1.2vw, 1.14rem); max-width: 62ch; } .pricing-terms { display: inline-flex; align-items: center; gap: 9px; margin-top: 18px; color: var(--muted); font-family: var(--font-brand); font-size: 0.74rem; letter-spacing: 0.05em; text-transform: uppercase; } .pricing-terms::before { width: 26px; height: 2px; background: var(--brand-orange); content: ""; } /* --- plan cards --- */ .plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; } .plan-card { position: relative; display: flex; flex-direction: column; padding: 26px 24px 28px; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--paper-2); box-shadow: var(--shadow-soft); transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease; } .plan-card:hover { transform: translateY(-3px); border-color: rgba(21, 23, 22, 0.28); box-shadow: var(--shadow); } .plan-card.is-popular { border-color: var(--brand-orange); /* light-orange tint ≈ 8% of --brand-orange, layered so it holds over any bg */ background-color: var(--paper-2); background-image: linear-gradient(rgba(201, 68, 31, 0.08), rgba(201, 68, 31, 0.08)); box-shadow: 0 22px 60px rgba(201, 68, 31, 0.16); } .plan-card.is-selected { outline: 2px solid var(--brand-orange); outline-offset: 3px; } .plan-badge { position: absolute; top: -13px; left: 24px; display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 999px; background: var(--brand-orange); color: var(--white); font-family: var(--font-brand); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; box-shadow: 0 6px 18px rgba(201, 68, 31, 0.32); } .plan-name { margin: 0 0 4px; color: var(--ink); font-family: var(--font-brand); font-size: 1.02rem; font-weight: 700; } .plan-tagline { min-height: 2.7em; margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; line-height: 1.35; } .plan-skus { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin: 0 0 6px; } .plan-skus b { color: var(--ink); font-size: clamp(2.4rem, 4.4vw, 3rem); font-weight: 900; letter-spacing: -0.05em; line-height: 1; } .plan-skus span { color: #38413c; font-size: 0.96rem; font-weight: 600; } .plan-price { margin: 0 0 18px; color: var(--ink); font-size: 1.04rem; } .plan-price b { font-weight: 800; } .plan-price span { color: var(--muted); font-size: 0.9rem; } .plan-overage { margin: 0 0 20px; padding-top: 16px; border-top: 1px dashed var(--line); color: #38413c; font-size: 0.9rem; line-height: 1.5; } .plan-overage b { color: var(--ink); font-weight: 700; } .plan-card.is-popular .plan-overage { border-top-color: rgba(201, 68, 31, 0.3); } .plan-cta { width: 100%; } .button.brand { border-color: var(--brand-orange); background: var(--brand-orange); color: var(--white); } .button.brand:hover, .button.brand:focus-visible { background: #b23a19; border-color: #b23a19; } .plan-includes-title { margin: 24px 0 12px; color: var(--muted); font-family: var(--font-brand); font-size: 0.72rem; letter-spacing: 0.05em; text-transform: uppercase; } .plan-includes { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; } .plan-includes li { display: flex; gap: 10px; align-items: flex-start; color: #38413c; font-size: 0.92rem; line-height: 1.4; } .plan-includes svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 2px; color: var(--green); } /* --- comparison table --- */ .compare-wrap { /* Keep the wide table's paint inside its own scroll container so it cannot widen mobile pages. */ contain: paint; overflow-x: auto; border: 1px solid var(--line); border-radius: calc(var(--radius) + 4px); background: var(--paper-2); box-shadow: var(--shadow-soft); } .compare-wrap:focus-visible { outline: 2px solid var(--brand-orange); outline-offset: 2px; } .compare-table { width: 100%; min-width: 660px; border-collapse: collapse; } .compare-table caption { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .compare-table th, .compare-table td { padding: 15px 20px; border-bottom: 1px solid var(--line); font-size: 0.94rem; text-align: center; vertical-align: middle; } .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; } .compare-table thead th { background: var(--paper-2); border-bottom: 1.5px solid var(--line-dark); color: var(--ink); font-family: var(--font-brand); font-size: 0.92rem; font-weight: 700; } .compare-table thead th small { display: block; margin-top: 3px; color: var(--muted); font-family: var(--font-body); font-size: 0.74rem; font-weight: 400; } .compare-table th[scope="row"] { color: var(--ink); font-family: var(--font-body); font-weight: 600; text-align: left; } .compare-table tbody tr:nth-child(even) td, .compare-table tbody tr:nth-child(even) th[scope="row"] { background: rgba(21, 23, 22, 0.02); } .compare-table .col-popular { background: rgba(201, 68, 31, 0.055); } .compare-table thead th.col-popular { color: var(--brand-orange); } .compare-table thead th.col-popular small { color: var(--brand-orange); } .compare-table tbody tr:nth-child(even) td.col-popular { background: rgba(201, 68, 31, 0.085); } .compare-yes { width: 18px; height: 18px; color: var(--green); } .compare-no { color: var(--muted); } .compare-strong { color: var(--ink); font-weight: 800; } /* --- honesty note --- */ .pricing-note { margin: 24px auto 0; max-width: 780px; color: var(--muted); font-size: 0.9rem; line-height: 1.55; text-align: center; } /* --- billing alert (503 / errors) --- */ .billing-alert { display: none; margin: 0 0 22px; padding: 14px 18px; border: 1px solid var(--review); border-radius: var(--radius); background: rgba(255, 241, 0, 0.14); color: #5f4300; font-size: 0.92rem; line-height: 1.5; } .billing-alert[data-show="true"] { display: block; } .billing-alert.is-error { border-color: var(--fail); background: rgba(235, 0, 40, 0.08); color: var(--fail); } /* --- embedded checkout modal --- */ .checkout-overlay { position: fixed; inset: 0; z-index: 100; /* modal layer — above the sticky site-header (z-index: 30) */ display: none; place-items: center; padding: 20px; background: rgba(21, 23, 22, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .checkout-overlay[data-open="true"] { display: grid; } .checkout-dialog { width: min(560px, 100%); max-height: min(90vh, 800px); overflow: auto; padding: 20px 22px 24px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-2); box-shadow: var(--shadow); } .checkout-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; } .checkout-dialog-head h2 { margin: 0; font-size: 1.2rem; letter-spacing: -0.02em; } .checkout-dialog-head p { margin: 5px 0 0; color: var(--muted); font-size: 0.88rem; } .checkout-close { flex: 0 0 auto; display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); font-size: 1.35rem; line-height: 1; cursor: pointer; } .checkout-close:hover, .checkout-close:focus-visible { border-color: rgba(21, 23, 22, 0.3); } #checkout { margin-top: 16px; min-height: 60px; } .button[aria-busy="true"] { opacity: 0.72; cursor: progress; } @media (max-width: 940px) { .plan-grid { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .plan-card.is-popular { order: -1; /* surface the recommended plan first when cards stack */ } .plan-tagline { min-height: 0; } } .billing-soon-note { max-width: 720px; margin: 20px auto 0; padding: 12px 16px; border: 1px dashed var(--review); border-radius: var(--radius); background: rgba(255, 241, 0, 0.1); color: #5f4300; font-size: 0.9rem; line-height: 1.5; text-align: center; } /* Export paywall dialog (app-shell.js exportPaywall) — reuses the checkout modal chrome. */ .paywall-dialog { max-width: 460px; } .paywall-dialog h2 { margin: 0 0 8px; font-size: 1.3rem; } .paywall-dialog .paywall-copy { margin: 0 0 18px; color: var(--muted); line-height: 1.5; } /* --- dark workspace shell (project.html dashboard; assets.html joins later) ---------------------- The Projects dashboard shares the editor's dark tokens but NOT `.editor-dark` itself: that class carries canvas-specific chrome (the two-row toolbar/spec header grid) that a nav-only page must not inherit. Every rule is guarded with :not(.is-onboarding-open) so opening the SKU wizard reverts the page to its light/orange treatment — the wizard's paper panels stay untouched. */ .workspace-dark:not(.is-onboarding-open) { background: var(--editor-dark-bg); color: var(--editor-dark-text); color-scheme: dark; --border: rgba(255, 255, 255, 0.2); --accent: #d9d9d6; --muted: var(--editor-dark-muted); } .workspace-dark:not(.is-onboarding-open) .projects-main { background: var(--editor-dark-bg); } /* Single-row dark nav variant (the editor's two-row grid stays scoped to .editor-body.editor-dark). */ .workspace-dark:not(.is-onboarding-open) .editor-top-nav { background: var(--editor-dark-panel); border-bottom: 0; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5); } .workspace-dark:not(.is-onboarding-open) .editor-nav-links a { color: #b9b9b6; } .workspace-dark:not(.is-onboarding-open) .editor-nav-links a.active, .workspace-dark:not(.is-onboarding-open) .editor-nav-links a:hover, .workspace-dark:not(.is-onboarding-open) .editor-nav-links a:focus-visible { background: rgba(255, 255, 255, 0.1); color: #fff; } .workspace-dark:not(.is-onboarding-open) .editor-settings-link, .workspace-dark:not(.is-onboarding-open) .nav-account-button { border-color: rgba(255, 255, 255, 0.2); background: var(--editor-dark-raised); color: var(--editor-dark-text); box-shadow: none; } .workspace-dark:not(.is-onboarding-open) .editor-settings-link:hover, .workspace-dark:not(.is-onboarding-open) .editor-settings-link:focus-visible, .workspace-dark:not(.is-onboarding-open) .nav-account-button:hover, .workspace-dark:not(.is-onboarding-open) .nav-account-button:focus-visible { border-color: rgba(255, 255, 255, 0.4); color: #fff; } .workspace-dark:not(.is-onboarding-open) .nav-account-avatar { background: #6a6a6f; } .workspace-dark:not(.is-onboarding-open) .nav-account-menu { border-color: var(--editor-dark-line-strong); background: #2f2f33; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .workspace-dark:not(.is-onboarding-open) .nav-account-email { color: var(--editor-dark-muted); } .workspace-dark:not(.is-onboarding-open) .nav-account-item { color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) .nav-account-item:hover, .workspace-dark:not(.is-onboarding-open) .nav-account-item:focus-visible { background: var(--editor-dark-hover); color: #fff; } .workspace-dark:not(.is-onboarding-open) .nav-account-signout { color: #ff9d94; } .workspace-dark:not(.is-onboarding-open) .button { background: #e8e8e6; border-color: transparent; color: #1b1b1d; } .workspace-dark:not(.is-onboarding-open) .button.secondary { background: var(--editor-dark-raised); border-color: var(--editor-dark-line-strong); color: var(--editor-dark-text); } /* Dashboard surfaces on the dark workspace. */ .workspace-dark:not(.is-onboarding-open) .projects-folder-head h1 { color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) .projects-sort, .workspace-dark:not(.is-onboarding-open) .projects-search input { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-text); box-shadow: none; } .workspace-dark:not(.is-onboarding-open) .projects-sort select { color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) .projects-card { border-color: var(--editor-dark-line); background: var(--editor-dark-panel); color: var(--editor-dark-text); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); } .workspace-dark:not(.is-onboarding-open) .projects-card h2, .workspace-dark:not(.is-onboarding-open) .projects-empty h2 { color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) .projects-card-link:hover, .workspace-dark:not(.is-onboarding-open) .projects-card-link:focus-visible { border-color: rgba(255, 255, 255, 0.45); } .workspace-dark:not(.is-onboarding-open) .projects-card-badge { background: var(--editor-dark-raised); color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) .projects-status-badge { background: #a96000; color: #fff; } .workspace-dark:not(.is-onboarding-open) .projects-breadcrumbs a:hover, .workspace-dark:not(.is-onboarding-open) .projects-breadcrumbs a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.1); } .workspace-dark:not(.is-onboarding-open) .fan-thumb, .workspace-dark:not(.is-onboarding-open) .sku-thumb { border-color: rgba(255, 255, 255, 0.28); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.45); } .workspace-dark:not(.is-onboarding-open) .fan-thumb-empty { border-color: rgba(255, 255, 255, 0.3); box-shadow: none; } .workspace-dark:not(.is-onboarding-open) .brand-avatar { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) img.brand-avatar-logo { background: #fff; } .workspace-dark:not(.is-onboarding-open) .dashboard-dialog { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-panel); color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) .dashboard-dialog .field-label { color: var(--editor-dark-muted); } .workspace-dark:not(.is-onboarding-open) .dashboard-dialog input { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-text); } /* --- Assets page (assets.html): Recent exports / Logos tabs on the dark workspace shell ---------- */ .assets-tabs { gap: 8px; } .assets-tab { min-height: 44px; padding: 0 18px; border: 1px solid rgba(21, 23, 22, 0.12); border-radius: 7px; background: var(--paper-2); color: var(--muted); font-weight: 760; cursor: pointer; } .assets-tab.is-active { border-color: var(--brand-orange); color: var(--brand-orange); } .assets-retention-note { margin: 0 0 22px; max-width: 760px; color: var(--muted); } .assets-expiry { margin: 0 0 18px; font-family: var(--font-brand); font-size: 0.78rem; color: var(--review); } .assets-download { white-space: nowrap; } .projects-card.assets-logo-card { flex-direction: row; align-items: center; gap: 16px; } .assets-logo-frame { flex: 0 0 84px; display: grid; place-items: center; width: 84px; height: 84px; border-radius: 6px; border: 1px solid rgba(21, 23, 22, 0.18); background: #fff; overflow: hidden; } .assets-logo-frame img { max-width: 100%; max-height: 100%; object-fit: contain; } .assets-sku-link { font-weight: 760; color: inherit; } .workspace-dark:not(.is-onboarding-open) .assets-tab { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-muted); } .workspace-dark:not(.is-onboarding-open) .assets-tab.is-active { border-color: rgba(255, 255, 255, 0.6); background: var(--editor-dark-hover); color: #fff; } .workspace-dark:not(.is-onboarding-open) .assets-expiry { color: #ffcf7d; } .workspace-dark:not(.is-onboarding-open) .assets-logo-frame { border-color: var(--editor-dark-line-strong); } /* --- card action menus (lib/prooflet-card-actions.js) ------------------------------------------- The "⋯" button sits on a wrapper OUTSIDE each card's link so actions never nest inside an . */ .card-holder { position: relative; min-width: 0; } .card-holder > .projects-card { height: 100%; } /* Reserve the top-right corner for the actions button so avatars/badges never sit under it. */ .card-holder .projects-card-top { padding-right: 38px; } .card-menu-button { position: absolute; top: 10px; right: 10px; z-index: 2; width: 34px; height: 30px; border: 1px solid rgba(21, 23, 22, 0.14); border-radius: 6px; background: var(--paper-2); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; } .card-menu-button:hover, .card-menu-button:focus-visible, .card-menu-button[aria-expanded="true"] { color: var(--ink); border-color: rgba(21, 23, 22, 0.35); } .card-actions-menu { position: absolute; top: 44px; right: 10px; z-index: 30; min-width: 200px; display: grid; padding: 6px; border: 1px solid rgba(21, 23, 22, 0.16); border-radius: 8px; background: var(--paper-2); box-shadow: 0 18px 40px rgba(21, 23, 22, 0.25); } .card-actions-item { border: 0; border-radius: 6px; background: transparent; color: var(--ink); padding: 9px 10px; text-align: left; font-weight: 700; cursor: pointer; } .card-actions-item:hover, .card-actions-item:focus-visible { background: rgba(21, 23, 22, 0.08); } .card-actions-item.is-danger { color: var(--fail, #b72a25); } .card-actions-copy { margin: 0 0 12px; max-width: 460px; color: var(--muted); line-height: 1.5; } .dashboard-dialog .button.is-danger { background: #b72a25; color: #fff; } .workspace-dark:not(.is-onboarding-open) .card-menu-button { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-muted); } .workspace-dark:not(.is-onboarding-open) .card-menu-button:hover, .workspace-dark:not(.is-onboarding-open) .card-menu-button:focus-visible, .workspace-dark:not(.is-onboarding-open) .card-menu-button[aria-expanded="true"] { color: #fff; border-color: rgba(255, 255, 255, 0.5); } .workspace-dark:not(.is-onboarding-open) .card-actions-menu { border-color: var(--editor-dark-line-strong); background: #2f2f33; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5); } .workspace-dark:not(.is-onboarding-open) .card-actions-item { color: var(--editor-dark-text); } .workspace-dark:not(.is-onboarding-open) .card-actions-item:hover, .workspace-dark:not(.is-onboarding-open) .card-actions-item:focus-visible { background: var(--editor-dark-hover); } .workspace-dark:not(.is-onboarding-open) .card-actions-item.is-danger { color: #ff9d94; } .workspace-dark:not(.is-onboarding-open) .dashboard-dialog select { border-color: var(--editor-dark-line-strong); background: var(--editor-dark-raised); color: var(--editor-dark-text); }