:root { color-scheme: light; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Floral theme palette (added 2026-07-11) -- reference is the RevenueCat Paywall Gallery template screenshot Bart pointed to: soft mint page background, purple/lavender primary actions and selected states, warm gold for the star-rating flourish. This is a palette + motif match, not a pixel recreation -- there's no image-generation tool available this session, so home.html's hanging-floral header is hand-coded SVG (a simplified interpretation of the same sunflower/wisteria/poppy hanging- border idea), not the original illustrated artwork. */ --color-primary: #7c6fe0; --color-primary-hover: #6a5dd1; --color-primary-soft: #ece9fb; --color-mint: #e8f5ef; --color-mint-deep: #d9f0e4; --color-gold: #f5a623; --color-text: #1f2937; --color-text-muted: #6b7280; --color-border: #e5e7eb; --color-card: #ffffff; } body { margin: 0; background: var(--color-mint); color: var(--color-text); } /* Pages that include the bottom dock (see .dock below) add this class to so page content never sits underneath the fixed dock bar. Pages without the dock (gift.html, claim.html -- linear checkout/claim flows where Bart deliberately kept primary nav out of the way) don't need it. */ body.has-dock { /* env(safe-area-inset-bottom) added 2026-07-12 (task #70) -- on an iPhone with a home indicator, running as an installed PWA (standalone display-mode), a fixed-position bar sitting flush at the viewport's bottom edge can end up partly underneath/obscured by that indicator's gesture area. `env()` only returns a non-zero value when the page's viewport meta tag includes `viewport-fit=cover` (added alongside this to every page that has the dock) -- without it this falls back to 0, a harmless no-op on browsers/devices without a safe-area inset. */ padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .shell { max-width: 640px; margin: 0 auto; padding: 48px 24px; } h1 { margin: 0 0 4px; } .tagline { color: #6b7280; font-size: 14px; margin: 0 0 32px; } section { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 20px; margin-bottom: 20px; } section h2 { margin-top: 0; font-size: 16px; } form { display: flex; gap: 8px; } input[type="email"] { flex: 1; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; } button { padding: 10px 16px; background: var(--color-primary); color: #ffffff; border: none; border-radius: 8px; font-size: 14px; cursor: pointer; } button:hover { background: var(--color-primary-hover); } button.secondary { background: #ffffff; color: var(--color-primary); border: 1px solid var(--color-primary-soft); } button.secondary:hover { background: var(--color-primary-soft); } /* Plain styled as a pill button -- used by home.html's hero CTAs, which need to be links (not JS click handlers) since they navigate to a different page. */ a.button-link { display: inline-block; padding: 12px 22px; border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; } a.button-link-primary { background: var(--color-primary); color: #ffffff; } a.button-link-primary:hover { background: var(--color-primary-hover); } a.button-link-secondary { background: #ffffff; color: var(--color-primary); border: 1px solid var(--color-primary-soft); } a.button-link-secondary:hover { background: var(--color-primary-soft); } #request-link-status { font-size: 13px; color: #6b7280; margin: 12px 0 0; } .field { flex: 1; display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; } /* Found live 2026-07-12 while debugging task #69: any element with BOTH class="field" and the HTML `hidden` attribute (e.g. create.html's idea-share-block, admin-share-block) rendered visible anyway -- `.field`'s `display: flex` above is an author-stylesheet rule, which always wins over the browser's own UA-stylesheet default of `[hidden] { display: none }`, regardless of selector specificity (UA rules only apply when nothing else sets the property). Confirmed via getComputedStyle() on the live site: idea-share-block had hasAttribute("hidden") === true but computed display: "flex" and was fully visible/checked on a bare create.html visit with no Pattern Ideas query string, contradicting app.js's own gating logic. This rule restores the correct behavior for every current and future `.field`. */ .field[hidden] { display: none; } .field label { font-size: 13px; font-weight: 600; color: #374151; } .field textarea, .field select, .field input[type="number"] { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 14px; font-family: inherit; } /* Skill Level's derived Width/Height/Max Colors/Stitches-per-hour fields (added 2026-07-07) stay visible but grayed out for the three named tiers, per Bart's request -- only "Custom" enables them. Distinct from the browser's own default disabled-input look so it reads as "this is set by your tier above", not "this is broken". */ .field input[type="number"]:disabled { background: #f3f4f6; color: #6b7280; border-color: #e5e7eb; cursor: not-allowed; } /* Pattern Ideas' opt-out "share to Pattern Library" checkbox (added 2026-07-10, task #32) -- only .field on index.html that isn't a text input/select, so it needed its own small layout rule rather than reusing .field's column flex-direction. */ .checkbox-field { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #374151; cursor: pointer; } .checkbox-field input[type="checkbox"] { margin-top: 2px; } /* Expand/collapse sections (added 2026-07-10) -- native

, styled to sit flush inside the existing card-style .field spacing rather than looking like a separate nested box. */ .collapsible-section { margin-bottom: 14px; border: 1px solid #e5e7eb; border-radius: 8px; padding: 4px 12px; } .collapsible-section summary { cursor: pointer; font-size: 13px; font-weight: 600; color: #374151; padding: 8px 0; list-style: none; display: flex; align-items: center; justify-content: space-between; } .collapsible-section summary::-webkit-details-marker { display: none; } /* Chevron built from a rotating pseudo-element instead of relying on the browser's default triangle marker, which is inconsistent across browsers/OSes and can't be hidden without also hiding on Safari. */ .collapsible-section summary::after { content: "\25BE"; font-size: 12px; color: #9ca3af; transition: transform 0.15s ease; } .collapsible-section[open] summary::after { transform: rotate(180deg); } .collapsible-section .collapsible-content { padding: 4px 0 12px; } .collapsible-section .collapsible-content .field:last-child, .collapsible-section .collapsible-content .field-row:last-child { margin-bottom: 0; } .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; min-width: 0; } .button-row { display: flex; gap: 8px; margin-bottom: 8px; } .status-text { font-size: 13px; color: #6b7280; margin: 8px 0 0; min-height: 18px; } .hint { font-size: 12px; color: #9ca3af; font-style: italic; } #artwork-preview-block { margin-top: 16px; } #artwork-preview { max-width: 100%; border-radius: 8px; border: 1px solid #e5e7eb; display: block; } .revised-prompt { font-size: 12px; color: #6b7280; font-style: italic; margin: 8px 0 0; } #pattern-options-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid #e5e7eb; } #pattern-result-block { margin-top: 8px; } /* Renamed from the old single #pattern-download-link 2026-07-07 when the two-file architecture landed (Pattern Overview + Stitching Chart, both independently Pattern Keeper-importable -- see app.js/index.html). This selector had gone stale for one round (the links existed but were unstyled) until caught here. */ #pattern-overview-download-link, #stitching-chart-download-link { display: inline-block; padding: 10px 16px; background: #16a34a; color: #ffffff; border-radius: 8px; font-size: 14px; font-weight: 600; text-decoration: none; margin-top: 8px; } /* ---------- Bottom dock (added 2026-07-11) ---------- */ /* Matches Pyrography Patterns v2's mobile-tabbar concept, adapted for this app's separate-pages architecture (see home.html's own comment for why this is plain links between pages rather than Pyrography's single-page JS view-router): 4 icons, active page highlighted in the theme's primary purple. Duplicated as identical markup on every page that includes it (home.html, create.html, ideas.html, gallery.html, pattern.html) rather than a shared JS-injected component -- no build step/bundler in this repo to share partials across plain HTML files, and 4 links is little enough duplication to not be worth adding one just for this. */ .dock { position: fixed; left: 0; right: 0; bottom: 0; display: flex; background: #ffffff; border-top: 1px solid var(--color-border); box-shadow: 0 -2px 10px rgba(17, 24, 39, 0.06); z-index: 50; /* Matches body.has-dock's safe-area comment above -- padding (not just relying on the body's own bottom padding) so the dock's white background/border extends all the way to the true bottom edge, with the tap targets themselves still sitting above the home indicator. */ padding-bottom: env(safe-area-inset-bottom); } .dock-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px 8px; text-decoration: none; color: var(--color-text-muted); font-size: 11px; font-weight: 600; } .dock-item-icon { font-size: 20px; line-height: 1; } .dock-item-active { color: var(--color-primary); } /* ---------- Floral hero (home.html) ---------- */ .home-hero { background: linear-gradient(180deg, var(--color-mint-deep) 0%, var(--color-mint) 100%); border-radius: 16px; overflow: hidden; text-align: center; margin-bottom: 20px; border: 1px solid var(--color-border); } .floral-border { display: block; width: 100%; height: auto; } .home-hero-body { padding: 8px 24px 32px; } .home-hero-body .tagline { margin: 0 auto 24px; /* Widened 2026-07-15 (440px -> 560px) -- the tagline paragraph grew longer as part of the Home page's SEO/new-user-friendly expansion (a real app description, not just a one-line hook), so the old 440px width was making it wrap awkwardly narrow. */ max-width: 560px; } .home-hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .home-account-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--color-text-muted); margin-bottom: 16px; } .home-account-bar a, .home-account-bar button.secondary { padding: 6px 12px; font-size: 12px; } .home-section-title { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-muted); margin: 0 0 12px; } .home-highlight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; } .home-highlight-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: 12px; padding: 16px; text-decoration: none; color: inherit; display: block; } .home-highlight-card-icon { font-size: 22px; display: block; margin-bottom: 6px; } .home-highlight-card strong { display: block; font-size: 14px; margin-bottom: 4px; } .home-highlight-card span { font-size: 12px; color: var(--color-text-muted); }