/* iOS status-bar strip: a fixed overlay across the top safe-area inset (requires viewport-fit=cover on the viewport meta). CRITICAL: never set a background on for this — that cancels the body->canvas background promotion, and the promoted canvas is the only layer the z-index:-1 backdrop video can paint above. An html background makes body paint its own cream layer directly over the orange film. env() is 0 where there is no notch, so the overlay is invisible on desktop; Android's toolbar uses theme-color instead. */ body::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: #c9441f; z-index: 2147483647; pointer-events: none; } :root { --paper: #fff7e9; /* Daylight-warm cream canvas */ --paper-2: #fffcf4; --radius-pill: 999px; --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: 1920px; /* content column cap — wide, near-full-bleed like the Daylight ref */ --gutter: 24px; /* total horizontal gutter (12px each side); the site's only side padding */ --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; overflow-x: clip; /* contain wide nested scrollers at the viewport root */ } body { margin: 0; font-family: var(--font-body); color: var(--ink); background: var(--paper); /* flat warm cream — spacing, not texture, does the separation */ line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: clip; /* clip (not hidden) so descendant position:sticky still works */ } @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; } /* Daylight-style floating nav: a compact white card centered at the top of the viewport — brand + links + one gradient CTA. Opaque white, so it reads over both the cream page and the dark film chapters. On the homepage it starts above the viewport and slides down once motion.ts adds .is-in. */ .site-header { position: fixed; top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 1.8vh, 18px)); left: 0; right: 0; z-index: 30; display: flex; justify-content: center; border-bottom: 0; background: transparent; color: var(--ink); pointer-events: none; /* the shell spans the viewport; only the card takes clicks */ transition: transform 1s cubic-bezier(0.16, 1.08, 0.38, 0.98); } body.home .site-header { transform: translateY(-150%); } body.home .site-header.is-in { transform: none; } .site-nav { pointer-events: auto; display: flex; align-items: center; gap: 26px; min-height: 0; padding: 8px 8px 8px 20px; border-radius: 14px; background: var(--white); box-shadow: 0 12px 32px rgba(21, 23, 22, 0.14), 0 1px 2px rgba(21, 23, 22, 0.08); } .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: 26px; padding: 0; border: 0; border-radius: 0; background: transparent; } .site-header .brand span { font-size: 1.3rem; color: var(--brand-orange); } .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 { color: inherit; /* follows the header's cream/over-dark state */ } .site-footer .brand { /* the footer is the chip palette at page scale: accent-orange mark on ink */ color: #ec6a33; } .app-sidebar .brand { color: var(--brand-orange); } .nav-links { display: flex; align-items: center; justify-content: center; gap: 24px; margin-left: auto; font-size: 0.91rem; font-weight: 500; color: inherit; } .nav-links a { text-decoration: none; color: inherit; transition: opacity 0.25s ease; } .nav-links a:hover, .nav-links a:focus-visible { opacity: 0.6; text-decoration: none; } .nav-actions { display: flex; align-items: center; gap: 10px; } /* the in-menu language item is mobile-only (see the hamburger dropdown rules) */ .nav-links .nav-lang-item { display: none; } /* EN/FR toggle: its own floating white chip pinned to the page's top-right corner, outside the nav card (same elevation language as the card) */ .lang-toggle { position: absolute; top: 6px; right: clamp(12px, 2vw, 28px); pointer-events: auto; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 15px; border-radius: 12px; background: var(--white); box-shadow: 0 12px 32px rgba(21, 23, 22, 0.14), 0 1px 2px rgba(21, 23, 22, 0.08); color: var(--ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-decoration: none; } .lang-toggle:hover, .lang-toggle:focus-visible { background: var(--ink); color: var(--white); } /* shrink-on-scroll: Header's inline script toggles .is-shrunk while scrolling down; scrolling back up, or hovering/focusing THE NAV CARD ITSELF, restores full size. The hover/focus conditions live on .site-nav, not the header: the EN/FR chip is a header child pinned to the page corner, and it must never wake the nav. Asymmetric timing on purpose — growing back is a slow, fluid settle (the transition on the DESTINATION state wins); shrinking away stays quick so the chrome gets out of the way while reading. */ .site-nav { transform-origin: top center; transition: transform 1100ms cubic-bezier(0.45, 0.05, 0.15, 1); } /* stepped restore is desktop-only: smallest -> 3 upward scroll gestures -> full (data-shrink counts down 3/2/1). Mobile keeps its controls at their full tap size. */ @media (min-width: 821px) { .site-header[data-shrink="1"]:not(.nav-open) .site-nav:not(:hover):not(:focus-within) { transform: scale(0.94); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .site-header[data-shrink="2"]:not(.nav-open) .site-nav:not(:hover):not(:focus-within) { transform: scale(0.88); transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1); } .site-header[data-shrink="3"]:not(.nav-open) .site-nav:not(:hover):not(:focus-within) { transform: scale(0.82); transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); } } /* Reduced motion: the global prefers-reduced-motion kill (see the transition/animation reset further down) zeroes these transitions, so the nav still steps between sizes but without animation — function preserved, motion removed. No extra rule needed here. */ /* the card's CTA: brand-orange gradient, softly rounded (not a pill), flush with the card */ .site-header .nav-actions .button { min-height: 40px; padding: 9px 20px; border-radius: 9px; background: linear-gradient(180deg, #ec6a33, var(--brand-orange)); color: var(--white); } .site-header .nav-actions .button:hover, .site-header .nav-actions .button:focus-visible { transform: translateY(-2px); background: linear-gradient(180deg, #f0744f, var(--brand-orange)); } .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: 44px; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--radius-pill); padding: 10px 22px; background: var(--ink); color: var(--white); text-decoration: none; font-weight: 600; font-size: 0.92rem; letter-spacing: -0.01em; cursor: pointer; white-space: nowrap; transition: transform 0.3s cubic-bezier(0.16, 1.08, 0.38, 0.98), background-color 0.3s ease, color 0.3s ease; } .button:hover, .button:focus-visible { transform: translateY(-4px); background: var(--brand-orange); } .button:focus-visible, .segmented-control button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .button.secondary { border-color: rgba(21, 23, 22, 0.28); background: transparent; color: var(--ink); } .button.secondary:hover, .button.secondary:focus-visible { background: rgba(21, 23, 22, 0.06); 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% - var(--gutter))); margin: 0 auto; padding: 86px 0; } body:not(.app-page-body) #main > .section { padding: clamp(58px, 6.8vw, 76px) 0; } /* Split hero, Daylight-styled: eyebrow · headline · copy · pill actions on the left, the pouch + editing rail on the right. Header is fixed/transparent, so the hero carries its own top clearance. */ .hero { position: relative; /* Daylight-scale gutters: ~5.5vw each side, generous bottom */ width: min(var(--max), calc(100% - clamp(48px, 11vw, 220px))); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1fr); grid-template-rows: auto auto; /* eyebrow · band (heading + subheading ↔ pouch) */ column-gap: clamp(20px, 2vw, 32px); align-items: stretch; /* the pouch spans exactly the heading→subheading band */ padding: clamp(88px, 10vh, 118px) 0 clamp(64px, 8vw, 120px); } .hero .eyebrow { grid-column: 1; grid-row: 1; margin-bottom: 16px; } .hero-text { grid-column: 1; grid-row: 2; min-width: 0; animation: prooflet-rise 680ms cubic-bezier(0.16, 1, 0.3, 1) both; } .hero .proof-stack { grid-column: 2; grid-row: 2; width: 100%; animation: prooflet-rise 780ms 120ms cubic-bezier(0.16, 1, 0.3, 1) both; } /* Looping backdrop video scoped from the top of the page through the film's last chapter: sticky inside .bg-scope, so it fills the whole window while you scroll the scope, then leaves with the jars chapter (the cream sections below sit on the plain body). */ .bg-scope { position: relative; } .bg-holder { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .bg-video { position: sticky; top: 0; display: block; width: 100%; height: 100vh; object-fit: cover; } .hero-band { position: relative; isolation: isolate; } .hero-band .eyebrow { color: rgba(255, 255, 255, 0.85); } .hero-band h1 { color: var(--white); } .hero-band .hero-copy { color: rgba(255, 255, 255, 0.92); } .hero-band .rail-label { color: rgba(255, 255, 255, 0.92); } /* solid white secondary so it reads over the bright glow at the band's base */ .hero-band .button.secondary { border-color: transparent; background: var(--white); color: var(--ink); } .hero-band .button.secondary:hover, .hero-band .button.secondary:focus-visible { background: var(--paper-2); color: var(--ink); } /* After the film's last chapter the backdrop video continues under a much darker tint; everything inside flips to light-on-dark. */ .page-dark { position: relative; /* lighter tint so the orange film reads through the dark stretch */ background: rgba(12, 9, 7, 0.55); color: rgba(255, 255, 255, 0.92); } /* same side gutters as the hero (~5.5vw per side) */ .page-dark .section { width: min(var(--max), calc(100% - clamp(48px, 11vw, 220px))); } .page-dark .section-heading h2, .page-dark .faq summary { color: var(--white); } .page-dark .section-heading p, .page-dark details p, .page-dark .muted { color: rgba(255, 255, 255, 0.72); } body.marketing .page-dark .faq details { border-bottom-color: rgba(255, 255, 255, 0.18); } /* dark-scene buttons: solid white primary, white-outline secondary */ .page-dark .button.stamp { background: var(--white); color: var(--ink); } .page-dark .button.stamp:hover, .page-dark .button.stamp:focus-visible { background: var(--paper-2); color: var(--ink); } .page-dark .button.secondary { border-color: rgba(255, 255, 255, 0.45); background: transparent; color: var(--white); } .page-dark .button.secondary:hover, .page-dark .button.secondary:focus-visible { background: rgba(255, 255, 255, 0.12); color: var(--white); } /* cream surfaces keep their own ink text — don't inherit the dark-scene white */ .page-dark .plan-card, .page-dark .compare-wrap, .page-dark .checkout-dialog { color: var(--ink); } .page-dark .pricing-note { color: rgba(255, 255, 255, 0.65); } .page-dark .billing-alert { border-color: rgba(255, 233, 168, 0.4); background: rgba(255, 241, 0, 0.08); color: #ffe9a8; } .page-dark .billing-alert.is-error { border-color: rgba(255, 120, 110, 0.6); background: rgba(235, 0, 40, 0.14); color: #ffa39b; } .page-dark .start-note a { color: rgba(255, 255, 255, 0.6); } /* hero CTAs live in their own slim band under the hero */ .hero-cta .inline-actions { justify-content: center; margin-top: 0; } body:not(.app-page-body) #main > .section.hero-cta { padding: 0 0 clamp(48px, 5.5vw, 72px); } .eyebrow { display: inline-flex; align-items: center; margin: 0 0 18px; color: var(--brand-orange); font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } 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); } .inline-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 28px; } .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; height: 100%; /* fill the stretched .proof-stack so the card matches the band height */ 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; height: 100%; /* fill the card so the sheet can stretch to the band height */ display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: stretch; 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; } /* Hero demo, boxless: drop the outer "dev box" (card + sheet framing), grow the pouch to fill the framed band flush with the top/bottom lines, and stretch the sliders card to match. */ body.marketing .hero .proof-board { height: 100%; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; animation: none; } .hero .proof-board::before { content: none; } /* pouch centerpiece with the editing rail docked to its right; the pouch column stays the visual anchor (and the intro's landing target), the rail reads as quiet controls */ .hero .proof-grid { padding: 0; gap: clamp(20px, 2.5vw, 40px); grid-template-columns: minmax(0, 448px) minmax(220px, 290px); justify-content: end; /* anchor to the hero's right edge: rail's right inset = headline's left gutter */ align-items: stretch; /* pouch and rail both fill the band height */ } .hero .sheet-preview { min-height: 0; border: 0; background: none; } /* fixed square aspect, statically laid out so it is a stable landing target for the intro's shrink + logo flight (sizes come from the demo vars on .proof-grid / app.js). Background mirrors the intro video's palette (peach edges, warm orange core, sampled from the footage) so the video-to-pouch crossfade reads as one continuous surface — biased slightly deeper than the footage so the white marks keep contrast. */ .hero .dieline-panel.pouch-front { position: relative; inset: auto; width: 100%; height: 100%; /* spans the heading→subheading band (grid stretch); taller than wide, like a real pouch */ aspect-ratio: auto; transform: none; background: none; /* the gradient lives on ::after so the window can punch a hole in it */ box-shadow: none; border: 0; /* the teal surface meets the board directly — no outline */ /* the base 19.5% was tuned for the old square pouch; on the taller pouch it left a slab of empty yellow under the warning text */ --warning-height: 14.5%; } /* keep the dashed safe-area guide above the background layer */ .hero .dieline-panel.pouch-front::before { z-index: 1; } .hero .warning-box { z-index: 1; } /* the pouch surface: gradient + edge rings on ::after (this replaces the old dashed clearance line that ::after used to draw), masked out where the transparent window sits so the page's backdrop video shows through the window (--window-x/y from app.js) */ .hero .dieline-panel.pouch-front::after { content: ""; inset: 0; border: 0; z-index: 0; /* deep-teal pouch (#014a52) — the one cool surface on a warm page; lit from the upper-centre like the old orange ramp */ background: radial-gradient(120% 95% at 45% 42%, #0f6d77 0%, #075d67 48%, #014a52 80%, #013841 100%); /* darker seal edge: the pouch deepens toward its rim instead of catching light */ box-shadow: inset 0 0 0 calc(22px * var(--pouch-scale)) rgba(0, 30, 34, 0.28), inset 0 0 0 calc(26px * var(--pouch-scale)) rgba(0, 20, 24, 0.42); mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0); mask-size: 100% 100%, var(--window-width, 0px) var(--window-height, 0px); mask-position: 0 0, var(--window-x, -9999px) var(--window-y, -9999px); mask-repeat: no-repeat; mask-composite: exclude; } /* window interior is a true see-through: keep the frame + diagonal hatch, no fill */ .hero .pouch-window { background: repeating-linear-gradient(135deg, rgba(255, 253, 248, 0.5) 0 2px, transparent 2px 10px); box-shadow: none; } /* the rail, Daylight-quiet: no cards, left-aligned labels, rows spaced by grid gap. Compact metrics (--slider-h + tight gaps) keep the rail's height flush with the pouch. */ .hero .rail { --slider-h: clamp(18px, 1.7vw, 24px); gap: 12px; text-align: left; align-self: stretch; /* match the pouch row exactly */ } .hero .rail-card.logo-control-card { display: grid; height: 100%; align-content: space-between; /* rows spread to sit flush with the pouch's top/bottom */ gap: 10px; border: 0; background: none; box-shadow: none; padding: 0; } .hero .segmented-control { padding: 3px; } .hero .segmented-control button { min-height: 26px; } .hero .rail-card.logo-control-card:hover { transform: none; border-color: transparent; box-shadow: none; } .hero .logo-slider-row + .logo-slider-row, .hero .window-toggle-row, .hero .textbox-toggle-row { margin-top: 0; } /* toggled "No": the rows stay in place, just greyed out and inert */ .hero .logo-slider-row.is-disabled { opacity: 0.35; filter: grayscale(1); pointer-events: none; } @media (max-width: 820px) { .hero .proof-grid { grid-template-columns: 1fr; /* stack: pouch, then controls */ } } /* slider headings in the heading's font (IBM Plex Sans), slightly smaller */ .hero .rail-label { font-family: var(--font-body); font-size: 0.92rem; font-weight: 600; margin-bottom: 2px; } /* chunky, tall sliders with a box (not circular) handle */ .hero .logo-slider { -webkit-appearance: none; appearance: none; width: 100%; height: var(--slider-h, clamp(28px, 2.6vw, 40px)); background: transparent; cursor: pointer; } /* track: still, dark, slightly transparent orange fill up to the value (--fill, set by JS) so the backdrop video shows through; light track beyond it. */ .hero .logo-slider::-webkit-slider-runnable-track { height: 100%; /* outline drawn as an inset shadow: a real border makes Chrome paint the background inset from it, leaving a light sliver of the card behind at the track's left edge */ box-shadow: inset 0 0 0 1px rgba(21, 23, 22, 0.22); border-radius: 5px; background: linear-gradient(90deg, transparent 0 var(--fill, 0%), rgba(255, 253, 248, 0.92) var(--fill, 0%) 100%), linear-gradient(rgba(122, 36, 9, 0.28), rgba(122, 36, 9, 0.28)); } .hero .logo-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 100%; border: 2px solid rgba(255, 253, 248, 0.95); border-radius: 4px; background: #ff7b21; /* sampled from the backdrop video's orange */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } .hero .logo-slider::-moz-range-track { height: var(--slider-h, clamp(28px, 2.6vw, 40px)); box-shadow: inset 0 0 0 1px rgba(21, 23, 22, 0.22); border-radius: 5px; background: linear-gradient(90deg, transparent 0 var(--fill, 0%), rgba(255, 253, 248, 0.92) var(--fill, 0%) 100%), linear-gradient(rgba(122, 36, 9, 0.28), rgba(122, 36, 9, 0.28)); } .hero .logo-slider::-moz-range-thumb { width: 18px; height: var(--slider-h, clamp(28px, 2.6vw, 40px)); border: 2px solid rgba(255, 253, 248, 0.95); border-radius: 4px; background: #ff7b21; /* sampled from the backdrop video's orange */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25); } /* white product text box: above the warning, same width, adjustable height (--textbox-height) */ .pouch-textbox { position: absolute; /* left/top set by the drag system; width matches the warning box */ width: 79%; height: var(--textbox-height, 12%); border: 2px solid rgba(21, 23, 22, 0.5); border-radius: 2px; background: #fffdf9; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); cursor: ns-resize; /* horizontally center-locked — only vertical movement */ touch-action: none; z-index: 1; } .pouch-textbox[hidden] { 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; /* left/top set by the drag system */ 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; cursor: grab; touch-action: 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, .pouch-window.is-dragging { cursor: grabbing; } /* drag-snap guides: appear while a dragged element is snapped to the pouch's centre/third lines or another element's centre (same pink as the dieline guides) */ .snap-guide { position: absolute; display: none; z-index: 5; background: var(--guide-pink); opacity: 0.9; pointer-events: none; } .snap-guide.is-on { display: block; } .snap-guide-v { top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); } .snap-guide-h { left: 0; right: 0; height: 1.5px; transform: translateY(-50%); } .pouch-textbox.is-dragging { cursor: ns-resize; } .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-ink); } .status.review { background: rgba(255, 241, 0, 0.35); color: #6f4700; } .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-ink); } .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; gap: 16px; margin-bottom: 30px; } .section-heading > p { max-width: 62ch; text-wrap: balance; /* even two-line wraps — no orphaned last words */ } .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; text-wrap: balance; } .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 h2, .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% - var(--gutter))); 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: 0; } details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); padding: 18px 20px; } /* marketing FAQ: quiet, borderless rows separated by hairlines — spacing does the work */ body.marketing .faq details { border: 0; border-bottom: 1px solid rgba(21, 23, 22, 0.14); border-radius: 0; background: transparent; padding: 22px 4px; } /* replace the browser disclosure triangle with a dotted "+" that folds into an "x"; the open question holds the accent so you can see where you are in the list */ body.marketing .faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; } body.marketing .faq summary::-webkit-details-marker { display: none; } body.marketing .faq summary::after { content: "+"; font-family: var(--font-brand); font-weight: 700; font-size: 1.2rem; color: #ec6a33; flex-shrink: 0; transition: transform 200ms ease; } body.marketing .faq details[open] summary::after { transform: rotate(45deg); } 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% - var(--gutter))); 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-bottom { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, 0.14); padding-top: 18px; font-size: 0.82rem; color: #8f8b82; } .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% - var(--gutter))); 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% - var(--gutter))); 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, .app-grid, .canvas-layout, .wizard, .footer-inner { grid-template-columns: 1fr; } .hero { min-height: auto; grid-template-rows: none; gap: 36px; padding: 108px 0 38px; /* clear the fixed transparent header */ } /* stacked: clear the desktop band placement so items flow in one column */ .hero .eyebrow, .hero-text, .hero .proof-stack { grid-column: 1; grid-row: auto; } .hero-text { padding-block: 0; } .hero .proof-stack { width: min(100%, 820px); align-self: auto; justify-self: center; } /* stacked rows are auto-height, so the band-stretch collapses — restore the square pouch */ .hero .dieline-panel.pouch-front { height: auto; aspect-ratio: 1 / 1; } .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) { /* the corner chip retires on mobile — the language toggle lives in the hamburger menu */ .lang-toggle { display: none; } .nav-links .nav-lang-item { display: block; margin-top: 8px; border-top: 1px solid var(--line); color: var(--brand-orange); font-weight: 700; } .site-header .brand img { height: 24px; } .site-header .brand span { font-size: 1.15rem; } .site-nav { width: min(100% - 20px, var(--max)); min-height: 0; gap: 10px; padding: 6px 6px 6px 14px; } .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; } /* owner spec: brand left, CTA centered, hamburger on the RIGHT */ .site-nav .brand { order: 0; } .site-nav .nav-actions { order: 1; margin-left: auto; /* CTA rides directly against the hamburger, not centered */ } .site-nav .mobile-menu-button { order: 2; } /* Sticky pouch: pin the artwork below the nav card while the sliders scroll beneath it. The sticky scope is .proof-grid, whose rail ends at the Text-box-height slider (the second rail card is display:none), so the pouch releases exactly after the last slider. Solid brand-orange backing hides the sliders as they pass behind the pinned artwork. */ .hero .proof-grid { align-items: start; gap: 44px; /* matches the hero-copy -> pouch spacing above (owner-measured) */ } .hero .sheet-preview { position: sticky; /* safe area + responsive header gap + 54px full-size mobile nav + 2px breathing room */ top: calc(env(safe-area-inset-top, 0px) + clamp(10px, 1.8vh, 18px) + 56px); z-index: 5; /* owner spec (tested on iPhone 17 Pro Max): SQUARE pouch about 30% narrower than the column, so the pinned artwork leaves real room for the sliders scrolling beneath it. aspect-ratio + definite width yields a definite height the inner panel can fill. */ width: min(68vw, 320px); aspect-ratio: 1 / 1; height: auto; min-height: 0; justify-self: center; /* NO background here: the pouch gradient (::after) is masked out where the transparent window sits so the backdrop video shows through — an opaque backing fills the hole with flat colour. The gradient itself occludes the sliders passing behind the pinned card everywhere except through that window, which is what a window means. */ border-radius: 14px; box-shadow: 0 16px 30px rgba(21, 23, 22, 0.28); } /* fill the definite-height sticky card with the portrait pouch — outranks both legacy mobile rules that restored a centered square for the old collapsed-stack layout */ .hero .sheet-preview .dieline-panel.pouch-front { position: relative; inset: auto; transform: none; width: 100%; height: 100%; aspect-ratio: auto; } /* tighten: last slider -> Signup for Free / View plans */ .hero-band .hero-cta { padding-top: 10px; padding-bottom: 26px; } .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: calc(env(safe-area-inset-top, 0px) + 96px); /* preserve clearance below the offset header */ 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-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; } /* stacked: proof-grid is one column, so the pouch has no band to stretch into — give the sheet an explicit portrait height (the desktop .hero overrides win on specificity). */ .hero .proof-grid { 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 { 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: calc(env(safe-area-inset-top, 0px) + 92px); /* preserve small-phone clearance below the offset header */ } 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 { padding-inline: 14px; font-size: 0.82rem; } } @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); } .auth-notice { margin: 0; padding: 10px 14px; border: 1px solid rgba(20, 120, 93, 0.4); border-radius: var(--radius); background: rgba(20, 120, 93, 0.1); color: var(--green); font-size: 0.92rem; line-height: 1.45; } /* auth modal: heavier blur + darken than checkout so the page clearly recedes */ .auth-overlay { background: rgba(12, 9, 7, 0.6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .auth-dialog { width: min(430px, 100%); } .auth-dialog .auth-form { margin-top: 14px; } .auth-dialog .auth-alt { margin-top: 14px; } .auth-dialog .auth-error, .auth-dialog .auth-notice { margin-top: 14px; } /* 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); display: grid; grid-template-columns: 220px minmax(0, 1fr); } .projects-rail { display: flex; flex-direction: column; gap: 10px; background: var(--editor-orange-surface); padding: 22px 12px; } .projects-rail button { min-height: 50px; display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 7px; background: rgba(119, 37, 17, 0.24); color: #fff; padding: 12px 14px; font-family: var(--font-brand); font-size: 0.82rem; font-weight: 760; letter-spacing: 0; text-align: left; cursor: pointer; } .projects-rail button:hover, .projects-rail button:focus-visible, .projects-rail button.is-active { background: rgba(119, 37, 17, 0.42); outline: none; } .projects-folder-panel { padding: 70px 48px; } .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(2, minmax(0, 1fr)); gap: 18px; } .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); } .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); 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-workspace { grid-template-columns: 1fr; } .projects-rail { flex-direction: row; overflow-x: auto; padding: 14px; } .projects-rail button { flex: 0 0 170px; } .projects-folder-panel { padding: 34px 18px; } .projects-folder-head { align-items: flex-start; flex-direction: column; } .projects-card-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 compliant SKUs/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-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(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; } @media (max-width: 1180px) { .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .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 { /* the quota is the number buyers compare across cards — it gets the dotted logo face in brand orange, the same readout language as the nav wordmark */ color: var(--brand-orange); font-family: var(--font-brand); font-size: clamp(2.4rem, 4.4vw, 3rem); font-weight: 700; letter-spacing: -0.01em; 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 { 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); 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; } /* the quota row mirrors the plan cards' dotted-orange readout (it's the same 5/20/50) */ .compare-table tbody tr:first-child td { font-family: var(--font-brand); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--brand-orange); } /* --- 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; } } /* ============================================================================ Homepage overhaul — "production proof sheet on a workbench" Confident-craft adaptation of a hand-drawn system: ink OFFSET shadows (no blur), whisper paper-dot texture, dashed DIELINES (domain-authentic cut-marks), one orange hand-drawn underline, press-flat buttons, and tilt QUARANTINED to non-interactive artifacts (never the pouch demo, claims, or status). Scoped to body.marketing so app pages are untouched. Reuses .section, .section-heading, .eyebrow, .flow-card, .feature-card, .status, .faq. ========================================================================== */ :root { --shadow-offset: 5px 5px 0 0 var(--ink); --shadow-offset-sm: 3px 3px 0 0 var(--ink); /* Text-safe accent inks (≥4.5:1 as small text on paper and on the status tints). Bright --brand-orange / --green stay for fills, borders, and graphics. */ --brand-orange-ink: #a83616; --green-ink: #116a50; } body.marketing { overflow-x: clip; } /* Daylight-style type feel on the marketing pages — same fonts, calmer proportions. */ body.marketing h1 { line-height: 1.02; letter-spacing: -0.03em; font-weight: 700; } body.marketing .section-heading h2 { line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; } /* .stamp is now just the pill primary (class kept for old markup / pricing page). */ .button.stamp { box-shadow: none; } body.marketing .proof-board { border: 0; box-shadow: none; } /* the closer centers everything on one axis — heading, copy, buttons, note (the buttons and note were already centered; the heading used to sit left, which read as accidental) */ #start .section-heading { text-align: center; } /* brand corner radius — same 9px as the nav "Start your artwork" */ #start .inline-actions .button { border-radius: 9px; } #start .section-heading > p { margin-inline: auto; } .start-note { margin: 18px 0 0; text-align: center; font-size: 0.88rem; } .start-note a { color: var(--muted); text-underline-offset: 3px; } /* --- section 2: "what Prooflet is" — front-loaded definition + proof chips --- */ .lede { max-width: 62ch; margin: 0 auto 26px; text-align: center; color: #38413c; font-size: clamp(1.12rem, 1.6vw, 1.4rem); line-height: 1.5; } .lede b { color: var(--ink); font-weight: 700; } .proof-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 820px; margin: 0 auto; } .proof-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper-2); box-shadow: var(--shadow-offset-sm); color: var(--ink); font-size: 0.92rem; font-weight: 600; } .proof-chip svg { width: 15px; height: 15px; color: var(--brand-orange); } /* --- section 3: how it works — reuse .flow-card, add dieline connectors --- */ .home-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } body.marketing .flow-card { border-color: var(--line); border-radius: 14px; box-shadow: none; } /* dashed dieline connector running behind the step cards (desktop only) */ .home-flow::before { position: absolute; top: 34px; left: 8%; right: 8%; height: 0; border-top: 2px dashed rgba(21, 23, 22, 0.24); content: ""; z-index: 0; } .home-flow .flow-card { position: relative; z-index: 1; } /* --- section 4: compliance evidence — reuse .feature-card + .status --- */ body.marketing .feature-card { border-color: var(--line); border-radius: 14px; box-shadow: none; } .evidence-verdicts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; } .verdict { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper-2); font-size: 0.86rem; color: #38413c; } .verdict .status { min-height: 20px; } .inline-source { color: var(--brand-orange-ink); text-decoration: underline; text-underline-offset: 3px; } /* --- section 5: what you export — the tilted, taped artifact card --- */ .artifact { position: relative; max-width: 560px; margin: 0 auto; padding: 26px 26px 24px; border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper-2); box-shadow: var(--shadow-offset); transform: rotate(-1.1deg); } .artifact::after { position: absolute; inset: 9px; border: 1.5px dashed rgba(21, 23, 22, 0.24); border-radius: 5px; pointer-events: none; content: ""; } .artifact h3 { margin: 0 0 4px; font-size: 1.1rem; letter-spacing: -0.02em; } .artifact .artifact-sub { margin: 0 0 16px; color: var(--muted); font-size: 0.9rem; } .artifact ul { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; } .artifact li { display: flex; gap: 10px; align-items: baseline; color: #38413c; font-size: 0.92rem; } .artifact li code { flex: 0 0 auto; font-family: var(--font-brand); font-size: 0.8rem; color: var(--ink); } .artifact-note { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line); color: var(--muted); font-size: 0.82rem; line-height: 1.5; } /* --- responsive --- */ @media (max-width: 1050px) { .home-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } .home-flow::before { display: none; } } @media (max-width: 820px) { .home-flow { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .artifact { transform: none; } } /* ========================================================================== Compliance page (/compliance) — rule ledger chapters, health-warning specimen, symbol-placement mock. Reuses .section, .section-heading, .eyebrow, .status, .grid-3, .feature-card, .home-flow, .proof-chips. ========================================================================== */ /* same side gutters as the homepage hero and dark sections (~5.5vw per side) */ body.compliance-page .section, body.legal-page .section { width: min(var(--max), calc(100% - clamp(48px, 11vw, 220px))); } /* legal pages: hero clears the fixed header; prose column stays readable */ .legal-hero { padding-top: clamp(120px, 15vh, 170px) !important; padding-bottom: 0 !important; } .legal-draft-note { max-width: 760px; margin: 6px 0 0; padding: 12px 16px; border: 1.5px dashed var(--review); border-radius: var(--radius); background: rgba(255, 241, 0, 0.1); color: #5f4300; font-size: 0.9rem; font-weight: 600; line-height: 1.5; } .legal-prose { max-width: 72ch; } .legal-prose h2 { margin: 34px 0 10px; font-size: 1.3rem; letter-spacing: -0.02em; } .legal-prose h2:first-child { margin-top: 0; } .legal-prose p, .legal-prose li { color: #38413c; line-height: 1.6; } .legal-prose a { color: var(--brand-orange-ink); text-underline-offset: 3px; } body.legal-page .legal-card { padding: 22px; } body.legal-page .legal-card .status { margin-bottom: 12px; } /* fixed floating header: the first section carries its own top clearance. Split hero like the homepage: copy left, tilted check-record card right. */ .compliance-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 0.52fr); grid-template-areas: "head side" "actions side"; column-gap: clamp(28px, 3.5vw, 64px); align-content: start; padding-top: clamp(120px, 15vh, 170px) !important; } .compliance-hero .section-heading { grid-area: head; } .compliance-hero .inline-actions { grid-area: actions; align-self: start; } /* the check-record card: same tilted, ink-bordered, dash-inset artifact as the homepage. Stretches the full height of the copy column (heading top → CTA bottom), with the check rows distributed across the extra room. */ .dossier { position: relative; grid-area: side; align-self: stretch; display: flex; flex-direction: column; padding: clamp(24px, 2vw, 38px) clamp(24px, 2vw, 38px) clamp(18px, 1.6vw, 26px); border: 1.5px solid var(--ink); border-radius: var(--radius); background: var(--paper-2); box-shadow: var(--shadow-offset); transform: rotate(1.1deg); } .dossier::after { position: absolute; inset: 9px; border: 1.5px dashed rgba(21, 23, 22, 0.24); border-radius: 5px; pointer-events: none; content: ""; } /* the logo font, reserved for the hero's accent phrase */ body.compliance-page .headline-contrast { font-family: var(--font-brand); font-weight: 700; letter-spacing: -0.01em; } .dossier-title { margin: 0 0 18px; font-family: var(--font-body); font-size: clamp(0.8rem, 0.85vw, 0.95rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-orange-ink); } .dossier-list { flex: 1; /* soak up the stretched height; rows spread out evenly */ display: grid; align-content: space-evenly; gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; } .dossier-list li { display: flex; gap: 12px; align-items: flex-start; color: #38413c; font-size: clamp(0.9rem, 0.95vw, 1.05rem); line-height: 1.5; } .dossier-list .status { flex: 0 0 auto; margin-top: 1px; } .dossier-stamp { margin: 0; padding-top: 12px; border-top: 1.5px dashed rgba(201, 68, 31, 0.45); font-family: var(--font-body); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--brand-orange-ink); } /* pills → stamps: square-cornered, tilted, solid-colour verdict tags with white text (page-scoped; each pairing is ≥4.5:1 for the small bold type) */ body.compliance-page .status { border-radius: 2px; padding: 3px 10px; border: 0; transform: rotate(-1.6deg); font-family: var(--font-body); font-weight: 700; letter-spacing: 0.06em; color: var(--white); } body.compliance-page .status.pass { background: var(--green-ink); } body.compliance-page .status.review { background: var(--review); } body.compliance-page .status.fail { background: var(--fail); } /* chapter index: solid brand-orange numeral with a dieline running to the page edge */ .chapter-head { display: flex; align-items: center; gap: 20px; } .chapter-head::after { flex: 1; border-top: 2px dashed rgba(201, 68, 31, 0.4); content: ""; } .chapter-num { margin: 0; font-family: var(--font-brand); font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 4.6rem); line-height: 1; color: var(--brand-orange); } /* chapters with a figure: figure left, rule rows right */ .chapter-body { display: grid; grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr); gap: 36px; align-items: start; } .chapter-figure { position: sticky; top: 96px; margin: 0; max-width: 420px; } .chapter-figure figcaption { margin-top: 12px; color: var(--muted); font-size: 0.88rem; line-height: 1.5; } /* the rule ledger: numbered hairline rows — the requirement, then Prooflet's answer behind a teal dieline (echoes the homepage's teal check bullets) */ .rule-rows { display: grid; counter-reset: rule; } .rule-cols { display: grid; grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr); gap: 28px; padding: 0 4px 12px; } .rule-cols span { font-family: var(--font-body); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .rule-cols span + span { padding-left: 20px; } .rule-row { display: grid; grid-template-columns: minmax(0, 0.52fr) minmax(0, 0.48fr); gap: 28px; padding: 24px 4px; border-top: 1px solid rgba(21, 23, 22, 0.14); counter-increment: rule; } .rule-row:last-child { border-bottom: 1px solid rgba(21, 23, 22, 0.14); } .rule-row h3 { margin: 0 0 8px; font-size: 1.04rem; letter-spacing: -0.02em; } .rule-what h3::before { margin-right: 10px; font-family: var(--font-brand); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; color: var(--brand-orange); content: counter(rule, decimal-leading-zero); } .rule-what p { margin: 0; color: var(--muted); font-size: 0.95rem; line-height: 1.55; } .rule-how { display: grid; gap: 10px; align-content: start; justify-items: start; padding-left: 20px; border-left: 2px dashed rgba(32, 185, 170, 0.55); } .rule-how p { margin: 0; color: #38413c; font-size: 0.95rem; line-height: 1.55; } /* symbol-placement mock: a front panel with the symbol pinned top-left */ .pdp-mock { position: relative; aspect-ratio: 4 / 5; border: 1.5px solid var(--ink); border-radius: 10px; transform: rotate(0.8deg); background: linear-gradient(rgba(21, 23, 22, 0.16), rgba(21, 23, 22, 0.16)) 50% 0 / 1px 100% no-repeat, linear-gradient(rgba(21, 23, 22, 0.16), rgba(21, 23, 22, 0.16)) 0 50% / 100% 1px no-repeat, var(--paper-2); box-shadow: var(--shadow-offset-sm); } .pdp-symbol { position: absolute; top: 9%; left: 7%; width: 26%; height: auto; } .pdp-dim-track { position: absolute; /* same horizontal span as the symbol (left 7%, width 26%), placed just under it: the symbol is square, so its height = 26% of the width = 26% * 4/5 of the mock's height (4:5 aspect) */ left: 7%; width: 26%; top: calc(9% + 26% * 4 / 5 + 10px); display: flex; justify-content: center; } .pdp-dim { padding: 4px 9px; border: 1px dashed rgba(21, 23, 22, 0.4); border-radius: 6px; background: var(--white); color: var(--ink); font-family: var(--font-body); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; line-height: 1.5; white-space: nowrap; /* the markup breaks it into two centered lines */ } /* health-warning specimen: the regulated yellow box, at readable scale */ .hw-specimen { position: relative; transform: rotate(-1deg); padding: 16px 16px 30px; border: 3px solid #111; background: var(--yellow); /* FFF100 — the exact regulated yellow */ color: #000; font-family: "Arial Narrow", Arial, Helvetica, sans-serif; font-size: 0.86rem; line-height: 1.3; box-shadow: var(--shadow-offset-sm); } .hw-specimen p { margin: 0; } .hw-specimen p + p { margin-top: 10px; } .hw-specimen strong { font-weight: 900; } .hw-attrib { position: absolute; right: 12px; bottom: 8px; font-size: 0.68rem; } /* shared note style (warning-library currency, disclaimers) — a tagged field note */ .compliance-note { max-width: 760px; margin: 30px auto 0; padding: 16px 18px 14px; border: 1.5px dashed rgba(201, 68, 31, 0.45); border-radius: var(--radius); background: var(--paper-2); color: #38413c; font-size: 0.9rem; line-height: 1.55; } .compliance-note::before { display: block; margin-bottom: 6px; font-family: var(--font-body); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand-orange-ink); content: "Note"; } .compliance-note a { color: var(--brand-orange-ink); text-underline-offset: 3px; } /* sources: numbered hairline rows matching the FAQ's quiet style */ .sources-list { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: src; } .sources-list li { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 8px; row-gap: 4px; padding: 20px 4px; border-top: 1px solid rgba(21, 23, 22, 0.14); counter-increment: src; } .sources-list li::before { grid-row: 1 / span 2; padding-top: 2px; font-family: var(--font-brand); font-size: 1.05rem; font-weight: 700; color: var(--brand-orange); content: counter(src, decimal-leading-zero); } .sources-list li > a, .sources-list li > span { grid-column: 2; } .sources-list li:last-child { border-bottom: 1px solid rgba(21, 23, 22, 0.14); } .sources-list a { color: var(--ink); font-weight: 700; text-decoration: none; letter-spacing: -0.01em; } .sources-list a:hover, .sources-list a:focus-visible { color: var(--brand-orange-ink); text-decoration: underline; text-underline-offset: 3px; } .sources-list li > span { color: var(--muted); font-size: 0.92rem; } @media (max-width: 1050px) { .compliance-hero { grid-template-columns: 1fr; grid-template-areas: "head" "actions" "side"; } .dossier { max-width: 460px; margin-top: 34px; } .chapter-body { grid-template-columns: 1fr; } .chapter-figure { position: static; max-width: 460px; } } @media (max-width: 820px) { .rule-cols { display: none; } .rule-row { grid-template-columns: 1fr; gap: 12px; } } @media (prefers-reduced-motion: reduce) { .dossier, .hw-specimen, .pdp-mock { transform: none; } } /* --- Hero CTA banner (TIDAL-style band, Prooflet palette): a light-orange card floating on the backdrop film, one oversized headline with the brand-font "free", one gradient button (same radius family as the nav CTA), and a quiet plans link beneath. --- */ .cta-banner { display: flex; flex-direction: column; align-items: center; gap: 26px; /* never full-bleed: ~70% of the section on desktop, with a phone floor */ width: clamp(320px, 70%, 900px); margin-inline: auto; padding: clamp(56px, 9vw, 110px) 24px; border-radius: 22px; background: rgba(249, 233, 225, 0.7); box-shadow: 0 30px 70px rgba(21, 23, 22, 0.28); text-align: center; } /* pouch-style breathe as the card crosses the viewport: 10% smaller on the way in and out, full size while centered. Scroll-driven (no JS); browsers without view() timelines get the static card. The !important is a deliberate, owner-approved exception to the global prefers-reduced-motion kill: the effect only moves while the user scrolls and freezes the moment they stop, so it stays on even with reduced motion set. */ @supports (animation-timeline: view()) { .cta-banner { animation: cta-banner-breathe linear both !important; animation-timeline: view() !important; } } @keyframes cta-banner-breathe { from { transform: scale(0.9); } 35%, 65% { transform: scale(1); } to { transform: scale(0.9); } } .cta-banner-heading { margin: 0; color: var(--ink); font-size: clamp(2.4rem, 6.5vw, 4.6rem); font-weight: 800; letter-spacing: -0.045em; line-height: 1.02; } /* shares the hero's ink-chip treatment — see .brand-word at the end of this file */ .cta-banner-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px 42px; border-radius: 9px; /* the nav "Start your artwork" radius */ background: linear-gradient(180deg, #ec6a33, var(--brand-orange)); color: var(--white); font-size: 1.05rem; font-weight: 700; text-decoration: none; box-shadow: 0 14px 30px rgba(201, 68, 31, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25); transition: transform 160ms ease, box-shadow 160ms ease; } .cta-banner-button:hover, .cta-banner-button:focus-visible { background: linear-gradient(180deg, #f0744f, var(--brand-orange)); transform: translateY(-2px); box-shadow: 0 18px 36px rgba(201, 68, 31, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .cta-banner-plans { margin-top: -8px; color: var(--muted); font-size: 0.92rem; text-decoration: underline; text-underline-offset: 3px; } .cta-banner-plans:hover, .cta-banner-plans:focus-visible { color: var(--brand-orange); } /* the brand-accent word treatment (hero "minutes", banner "free"): an ink chip with the dotted Bitcount face in accent orange — reads like a digital timer, and ink is the one value that pops on both the orange film and the peach card */ .brand-word, .cta-banner-free { display: inline-block; font-family: var(--font-brand); font-weight: 700; color: #ec6a33; letter-spacing: -0.01em; background: var(--ink); padding: 0.04em 0.16em; border-radius: 0.14em; transform: rotate(-1.5deg); }