padding here. */ .hero-top { padding: 1.5rem 0 2rem; } .hero-title { font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; margin-bottom: 1.25rem; } .gradient-text { background: linear-gradient(90deg, var(--accent-400), #f2c078 60%, #cfe0f5); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-image-wrap { max-width: 64rem; margin: 3rem auto 0; } .hero-image { display: block; width: 100%; height: auto; border-radius: var(--bs-border-radius-lg); border: 1px solid var(--border-subtle); /* The source render's corners are already near-black, close to --surface-0 - fading the edges to transparent lets it melt into the page background instead of showing a hard rectangular boundary. */ mask-image: linear-gradient( to bottom, transparent 0, black 2rem, black calc(100% - 3rem), transparent 100% ); } /* All four tool landing pages (Poster Maker, Prop Scaler, Unfolder, Pattern Editor): same visual language as the homepage hero-banner below (full-width, rounded, a bottom scrim with a feature list overlaid on the image). Each page has its own *_hero_bg.webp, a render pre-composited on a dark background so it sits flush in the box with no mask needed. Reuses the homepage's .hero-banner-features list styling (and its sub-576px hidden state) directly, just in a tool-specific wrapper. */ .tool-hero-banner { position: relative; margin: 3rem auto 0; border-radius: var(--bs-border-radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); aspect-ratio: 1915 / 821; } .tool-hero-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tool-hero-banner-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 35%, rgba(10, 10, 12, .85) 100%); } /* Element-qualified (ul.___) so this outranks the later .hero-banner-features { padding: 0; } rule below - equal-specificity classes on the same element would otherwise let source order silently zero out this padding. */ ul.tool-hero-banner-features { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 clamp(1rem, 4vw, 3rem) clamp(0.6rem, 1.5vw, 1.1rem); } /* The homepage's six items wrap onto 2-3 lines, which fills each equal .hero-banner-features li column edge to edge - the horizontal spacing there comes for free from justify-content: space-between. These labels are short one-liners (three or four per tool page vs. six on the homepage), so the same equal-width columns would leave each one left-aligned with a lot of dead space after it. Size each item to its own content instead, so space-between distributes gaps between the actual icon+text groups the same way it visually reads on the homepage. */ ul.tool-hero-banner-features li { flex: 0 0 auto; } /* ========================================================================== Hero banner (home page, full-width image with text overlay) ========================================================================== */ .hero-banner { position: relative; margin: 2rem auto 0; border-radius: var(--bs-border-radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); /* Matches the source render's own proportions (1916x821) so the whole scene shows uncropped, exactly as composed - the render already has a near-black band above the mannequin's head and a darker workbench band at the bottom, which is where the text below is placed to sit on, rather than over the busy middle of the image. */ aspect-ratio: 1916 / 821; } .hero-banner-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-banner-scrim { position: absolute; inset: 0; /* Light touch only - the render's own top/bottom bands already do most of the contrast work, this just reinforces them a bit and stays fully clear over the middle so the illustration reads at full brightness there, same as the reference layout. */ background: linear-gradient( 180deg, rgba(10, 10, 12, .55) 0%, rgba(10, 10, 12, .18) 22%, rgba(10, 10, 12, 0) 34%, rgba(10, 10, 12, 0) 66%, rgba(10, 10, 12, .2) 80%, rgba(10, 10, 12, .62) 100% ); } .hero-banner-content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: clamp(0.5rem, 1.5vw, 1.25rem) clamp(1rem, 4vw, 3rem) clamp(0.25rem, 0.75vw, 0.5rem); } .hero-banner-text { text-align: center; } .hero-banner-title { font-size: clamp(1.15rem, 3.6vw, 2.75rem); font-weight: 700; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: 0.2em; text-shadow: 0 2px 16px rgba(0, 0, 0, .7); } .hero-banner-dot { color: var(--accent-400); margin: 0 0.2em; } .hero-banner-subtitle { max-width: 46rem; margin: 0 auto; color: rgba(242, 242, 240, .9); font-size: clamp(0.6rem, 1.35vw, 1.05rem); line-height: 1.3; text-shadow: 0 1px 10px rgba(0, 0, 0, .7); } .hero-banner-features { list-style: none; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; margin: 0; padding: 0; gap: clamp(0.25rem, 1.5vw, 1rem); } .hero-banner-features li { display: flex; align-items: center; gap: 0.5em; flex: 1 1 0; min-width: 0; text-align: left; } .hero-banner-features span { display: block; font-size: clamp(0.5rem, 1vw, 0.8rem); font-weight: 600; line-height: 1.25; color: rgba(242, 242, 240, .92); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); } .hero-banner-features i { flex-shrink: 0; color: var(--accent-400); font-size: clamp(0.85rem, 1.8vw, 1.4rem); text-shadow: 0 1px 8px rgba(0, 0, 0, .7); } @media (max-width: 575.98px) { /* The locked aspect-ratio leaves ~170px of height at phone width, not enough room for the subtitle and six badges to stay legible - drop both and keep just the headline as the image's caption. The full-text hero right below repeats this same copy accessibly. */ .hero-banner-subtitle, .hero-banner-features { display: none; } } /* ========================================================================== Step indicator (wizard pages) ========================================================================== */ .step-indicator { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 2.5rem; padding: 0; list-style: none; } .step-indicator li { display: flex; align-items: center; gap: 0.25rem; } .step-indicator .step-dot { display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--text-muted); font-size: 0.8rem; font-weight: 600; background: var(--surface-1); } .step-indicator .step-label { font-size: 0.85rem; color: var(--text-muted); margin-right: 0.5rem; } .step-indicator .step-connector { width: 1.5rem; height: 1px; background: var(--border-subtle); margin-inline: 0.25rem; } .step-indicator li.is-complete .step-dot { background: var(--accent-500); border-color: var(--accent-500); color: #14100a; } .step-indicator li.is-current .step-dot { border-color: var(--accent-500); color: var(--accent-400); } .step-indicator li.is-current .step-label { color: var(--text-primary); font-weight: 600; } /* ========================================================================== Forms ========================================================================== */ .form-control, .form-select { background-color: var(--surface-1); border-color: var(--border-strong); color: var(--text-primary); padding: 0.55rem 0.85rem; } .form-control:focus, .form-select:focus { background-color: var(--surface-1); color: var(--text-primary); border-color: var(--accent-500); box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25); } .form-check-input { background-color: var(--surface-1); border-color: var(--border-strong); } .form-check-input:checked { background-color: var(--accent-500); border-color: var(--accent-500); } .form-label { font-weight: 500; color: var(--text-muted); font-size: 0.9rem; } /* ========================================================================== Image / canvas preview containers (calibrate + configure) ========================================================================== */ .preview-frame { display: inline-block; position: relative; border-radius: var(--bs-border-radius-lg); overflow: hidden; border: 1px solid var(--border-subtle); background: var(--surface-1); line-height: 0; } .preview-frame img { display: block; max-width: 100%; height: auto; } /* Shown while the source image Blob is still being read out of IndexedDB and decoded - without a forced min-height here the frame has zero content box (the has no src yet) and collapses to nothing, so the spinner would have no visible frame to sit inside. */ .preview-frame.is-loading { min-width: 260px; min-height: 260px; } .preview-frame-loading { position: absolute; inset: 0; } input[type="color"].form-control { max-width: 4.5rem; padding: 0.25rem; } .crop-mark-preview-canvas { display: block; width: 100%; max-width: 260px; height: auto; aspect-ratio: 260 / 180; border-radius: var(--bs-border-radius); border: 1px solid var(--border-subtle); } .grid-drag-surface { cursor: grab; touch-action: none; } .grid-drag-surface.is-grabbing { cursor: grabbing; } /* Prop Scaler's fit screen: the overlay image is deliberately allowed to render larger than its frame (max-width: none) since scaling it past the background's own size is a normal part of fitting a prop - .preview-frame's overflow: hidden clips it visually rather than the image being capped. draggable="false"/-webkit-user-drag are defensive leftovers from an earlier attempt at listening for drag directly on this - dragging is now handled entirely by .prop-scaler-drag-surface (see below), which sidesteps browsers' native image-drag-out gesture entirely rather than fighting it, but there's no harm in also telling the browser this image itself isn't meant to be dragged. */ .prop-scaler-overlay-img { max-width: none; -webkit-user-drag: none; user-select: none; pointer-events: none; } /* An otherwise-invisible layer over the whole frame that owns all pointer interaction for the fit screen - both dragging (pointerdown) and measuring (click) - so neither has to fight the overlay 's native drag-out behavior, mirroring tiling_preview_controller.js's own canvas-based (not img-based) drag surface. Cursor alone communicates which of the two modes is currently active. */ .prop-scaler-drag-surface { cursor: grab; touch-action: none; } .prop-scaler-drag-surface.is-grabbing { cursor: grabbing; } .prop-scaler-drag-surface.is-measuring { cursor: crosshair; } /* Sits directly on top of .prop-scaler-drag-surface (later in DOM order, so it wins hit-testing) with the exact same left/top/width/height/rotate transform as .prop-scaler-overlay-img, kept in sync imperatively in prop_scaler_fit_controller.js's render() - a plain child-element position/rotate follows its parent's CSS transform for free, so each handle only needs a fixed local position within this box, not its own rotation math. pointer-events: none here (re-enabled per-handle below) lets clicks in the empty parts of the box fall through to the drag surface underneath for ordinary move/measure interaction. */ .prop-scaler-handle-layer { pointer-events: none; } .prop-scaler-handle-layer.is-measuring { display: none; } .prop-scaler-handle { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 2px; background: #fff; border: 2px solid #0d6efd; pointer-events: auto; touch-action: none; } .prop-scaler-handle-nw { top: 0; left: 0; cursor: nwse-resize; } .prop-scaler-handle-ne { top: 0; left: 100%; cursor: nesw-resize; } .prop-scaler-handle-se { top: 100%; left: 100%; cursor: nwse-resize; } .prop-scaler-handle-sw { top: 100%; left: 0; cursor: nesw-resize; } .prop-scaler-handle-n { top: 0; left: 50%; cursor: ns-resize; } .prop-scaler-handle-s { top: 100%; left: 50%; cursor: ns-resize; } .prop-scaler-handle-e { top: 50%; left: 100%; cursor: ew-resize; } .prop-scaler-handle-w { top: 50%; left: 0; cursor: ew-resize; } /* Floats above the box's top-center edge, connected by a thin stem - the whole thing rotates for free along with .prop-scaler-handle-layer. */ .prop-scaler-handle-rotate { top: -28px; left: 50%; border-radius: 50%; cursor: grab; } .prop-scaler-handle-rotate.is-rotating { cursor: grabbing; } .prop-scaler-handle-rotate::before { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 16px; background: #0d6efd; transform: translateX(-50%); } /* ========================================================================== Nudge pad (configure page - manual grid offset) ========================================================================== */ .nudge-pad { display: grid; grid-template-columns: repeat(3, 2.25rem); grid-template-rows: repeat(3, 2.25rem); gap: 0.25rem; flex-shrink: 0; } .nudge-btn { display: flex; align-items: center; justify-content: center; background: var(--surface-1); border: 1px solid var(--border-strong); border-radius: var(--bs-border-radius-sm); color: var(--text-primary); font-size: 1rem; line-height: 1; cursor: pointer; } .nudge-btn:hover { border-color: var(--accent-500); color: var(--accent-400); } .nudge-btn:active { background: var(--bs-primary-bg-subtle); } .nudge-up { grid-column: 2; grid-row: 1; } .nudge-left { grid-column: 1; grid-row: 2; } .nudge-reset { grid-column: 2; grid-row: 2; font-size: 0.9rem; } .nudge-right { grid-column: 3; grid-row: 2; } .nudge-down { grid-column: 2; grid-row: 3; } /* ========================================================================== Option groups + tooltips (configure/calibrate forms) ========================================================================== */ .option-group + .option-group { margin-top: 1.75rem; padding-top: 1.75rem; border-top: 1px solid var(--border-subtle); } .option-group-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; } /* Compact variant for settings panels denser than a typical form (e.g. the Unfolder's pattern-layout options and its Blender-style toolbars/ sidebars) - a toolbar reads as a toolbar through small, tight controls with minimal always-on prose, not through a smaller copy of a regular form. Overrides Bootstrap's own --bs-*-font-size/padding custom properties rather than fighting specificity, since .btn-sm/.form- select-sm/.input-group-sm set their sizing that way - EXCEPT for padding, which two site-wide rules (.btn's own padding-inline, and .form-control/.form-select's own padding) set as literal physical properties rather than through Bootstrap's --bs-btn-padding-*-sm custom-property mechanism. Those two rules load after Bootstrap's own -sm padding at equal-or-lower specificity, so they win regardless of which --bs-* custom property a button/control carries - overriding just the custom properties here has no visible effect on padding. Fixed below by setting padding directly at higher specificity (.options-compact ), the only thing that reliably wins. */ .options-compact { font-size: 0.6875rem; } .options-compact.panel { padding: 1.25rem 1.75rem; } .options-compact .option-group + .option-group { margin-top: 0.65rem; padding-top: 0.65rem; } .options-compact .option-group-title { margin-bottom: 0.3rem; font-size: 0.62rem; } .options-compact .btn-sm, .options-compact .btn-group-sm > .btn { --bs-btn-font-size: 0.6875rem; --bs-btn-padding-y: 0.15rem; --bs-btn-padding-x: 0.4rem; --bs-btn-border-radius: 0.25rem; padding-block: 0.15rem; padding-inline: 0.4rem; font-size: 0.6875rem; } /* Every button site-wide is bold with generous letter-spacing (see .btn's own rule above) - reads as a prominent CTA, which is right for a marketing page but wrong for a dense tool surface where every row is a button; Blender's own toolbar/panel buttons use plain body-weight text throughout, nothing shouting for attention. */ .options-compact .btn { font-weight: 500; letter-spacing: normal; } /* Blender's toolbar/panel buttons are flat - a faint fill (barely distinct from the panel itself) with NO outline in their resting state, only gaining a visible border/highlight on hover or when toggled active. Bootstrap's stock .btn-outline-secondary is the opposite (a full 1px border always visible, transparent fill) - the single biggest reason this still reads as "a web form" rather than "a tool panel." Restated via the same --bs-btn-* custom-property mechanism .btn-primary/.btn-outline-primary already use above (Bootstrap bakes literal colors onto these per variant, so overriding the root --bs-secondary token alone has no effect). */ .options-compact .btn-outline-secondary { --bs-btn-color: var(--text-primary); --bs-btn-bg: var(--surface-2); --bs-btn-border-color: transparent; --bs-btn-hover-color: var(--text-primary); --bs-btn-hover-bg: var(--surface-2); --bs-btn-hover-border-color: var(--border-strong); --bs-btn-active-color: var(--accent-400); --bs-btn-active-bg: rgba(var(--accent-rgb), 0.18); --bs-btn-active-border-color: var(--accent-500); --bs-btn-focus-shadow-rgb: var(--accent-rgb); --bs-btn-disabled-color: var(--text-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: transparent; } /* Same "flat, not bordered" idea as the buttons above, applied to fields - Bootstrap's default border-color (--border-strong) is the same weight whether the field sits in a roomy form or a dense toolbar; against this sidebar's identical-color panel background it's the field's ONLY visual definition, so it has to stay fairly visible - Blender solves this differently, giving fields a darker, recessed fill (looks "sunken" into the panel) so the boundary reads from the fill contrast instead of a bright outline, and the border itself can drop to barely-there. */ .options-compact .form-select, .options-compact .form-control { background-color: var(--surface-0); border-color: var(--border-subtle); } .options-compact .form-select-sm { font-size: 0.6875rem; border-radius: 0.25rem; /* Right side stays roomy - the base .form-select's own dropdown-arrow icon (a background-image, not a real child element) is positioned at a fixed offset from the right edge regardless of padding, so a uniformly tight padding here would visually collide with it. Fixed in rem (root-relative), not em, so it stays anchored to that same pixel offset regardless of how small this rule's own font-size gets - only the other 3 sides track the tighter scale. */ padding: 0.15rem 1.6rem 0.15rem 0.35rem; } .options-compact .input-group-sm > .form-control, .options-compact .input-group-sm > .input-group-text, .options-compact .form-control-sm { font-size: 0.6875rem; border-radius: 0.25rem; padding: 0.15rem 0.35rem; } .options-compact .input-group-sm > .input-group-text { background-color: var(--surface-2); border-color: var(--border-subtle); color: var(--text-muted); } /* Toolbar rows (measure/scale/reset-view above the 3D view; select/pan/ rotate + zoom above the pattern layout) reuse gap-2 for spacing between buttons, same as the sidebar's own control rows - tightened here so the whole tool surface (toolbar + sidebar) reads as one consistently dense unit rather than two different densities. */ .options-compact .gap-2 { gap: 0.3rem; } /* .tooltip-icon is a shared site-wide class (login, calibrate, upload pages) - scoped down here rather than shrinking its own base rule, which those other, roomier forms should keep as-is. */ .options-compact .tooltip-icon { width: 0.9rem; height: 0.9rem; font-size: 0.58rem; } /* Pattern Editor's menu bar (File/Edit/Object/View) - a flat, borderless look (no visible button chrome until hover/open), the same "reads as a tool surface, not a web form" idea .options-compact .btn-outline- secondary already applies elsewhere, just for a plain .btn with no color variant (Bootstrap's bare .btn has no background/border of its own to override). */ .editor-menu-bar .btn { background: transparent; border-color: transparent; color: var(--text-primary); } .editor-menu-bar .btn:hover, .editor-menu-bar .btn:focus, .editor-menu-bar .btn.show { background: var(--surface-2); border-color: var(--border-subtle); } /* Bootstrap's own .dropdown-menu-dark ships a hardcoded generic dark palette (its own $dark variable), not this site's theme tokens - remapped here so the menu bar's dropdowns match the rest of the dark theme exactly rather than a slightly-different generic gray. */ .editor-menu-bar .dropdown-menu-dark { --bs-dropdown-bg: var(--surface-1); --bs-dropdown-border-color: var(--border-subtle); --bs-dropdown-link-color: var(--text-primary); --bs-dropdown-link-hover-color: var(--text-primary); --bs-dropdown-link-hover-bg: var(--surface-2); --bs-dropdown-link-disabled-color: var(--text-muted); --bs-dropdown-divider-bg: var(--border-subtle); font-size: 0.75rem; } /* Hover flyout submenu for menu-bar dropdowns (e.g. Object > Alignment) - a plain nested