/** * PicZFlip — Stitch Design System * Source of truth for all design tokens, typography, and shared components. * Import this on every page AFTER the Google Fonts link. * * Google Fonts (include in ): * Plus Jakarta Sans: wght 400–800 * Inter: wght 400–600 * Material Symbols Outlined */ /* ─────────────────────────────────────────────── */ /* DESIGN TOKENS */ /* ─────────────────────────────────────────────── */ :root { /* Primary green palette */ --primary: #4f6353; --primary-dim: #445748; --primary-light: #6b8870; --primary-container: #d2e8d4; --on-primary: #ffffff; --on-primary-container: #1a2e1c; /* Secondary */ --secondary: #7b5556; --secondary-container: #f5d7d8; --on-secondary: #ffffff; /* Surface / Background */ --surface: #faf9f7; --surface-dim: #f0ede8; --surface-container: #edeeeb; --surface-container-low: #f4f5f2; --surface-container-lowest: #ffffff; /* Text (on-surface) */ --on-surface: #2f3331; --on-surface-variant: #5c605d; /* Outline */ --outline: #777c79; --outline-variant: #c2c7c3; /* Semantic */ --success: #4f6353; --warning: #d4820a; --error: #b3261e; /* Shadows */ --shadow-card: 0 8px 32px rgba(47,51,49,0.04); --shadow-float: 0 16px 48px rgba(47,51,49,0.08); --shadow-editorial: 0 8px 32px rgba(47,51,49,0.04); /* Border radii */ --radius: 1rem; /* 16px default */ --radius-sm: 0.75rem; /* 12px */ --radius-lg: 2rem; /* 32px */ --radius-full: 9999px; /* pill */ /* Nav */ --nav-glass: rgba(250,249,247,0.85); --nav-blur: blur(24px); } /* ─────────────────────────────────────────────── */ /* RESET & BASE */ /* ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; background-color: var(--surface); color: var(--on-surface); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; margin: 0; } /* ─────────────────────────────────────────────── */ /* TYPOGRAPHY */ /* ─────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; font-weight: 700; color: var(--on-surface); line-height: 1.2; letter-spacing: -0.02em; margin-top: 0; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 800; } h2 { font-size: clamp(1.5rem, 3.5vw, 2.25rem); } h3 { font-size: clamp(1.125rem, 2.5vw, 1.5rem); } p, li, td, th { font-family: 'Plus Jakarta Sans', system-ui, sans-serif; line-height: 1.6; color: var(--on-surface-variant); } label, .label, small, .caption, .tag, .badge { font-family: 'Inter', system-ui, sans-serif; font-weight: 500; } /* ─────────────────────────────────────────────── */ /* MATERIAL SYMBOLS */ /* ─────────────────────────────────────────────── */ .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; vertical-align: middle; line-height: 1; user-select: none; } /* Icon containers */ .icon-container { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius); background: var(--primary-container); color: var(--primary); } .icon-container.icon-sm { width: 40px; height: 40px; font-size: 1.25rem; } .icon-container.icon-lg { width: 80px; height: 80px; font-size: 2rem; } /* ─────────────────────────────────────────────── */ /* BUTTONS */ /* ─────────────────────────────────────────────── */ .btn-primary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); background: var(--primary); color: #ffffff !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s, transform 0.2s, box-shadow 0.2s; white-space: nowrap; line-height: 1.4; } .btn-primary:hover { background: var(--primary-dim); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(79,99,83,0.25); } .btn-primary:active { transform: translateY(0); } .btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); background: transparent; color: var(--on-surface) !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: 1.5px solid var(--outline-variant); cursor: pointer; transition: all 0.2s; white-space: nowrap; line-height: 1.4; } .btn-secondary:hover { border-color: var(--primary); color: var(--primary) !important; background: var(--primary-container); } .btn-ghost { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-full); background: transparent; color: var(--primary) !important; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 0.95rem; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s; } .btn-ghost:hover { background: var(--primary-container); } /* ─────────────────────────────────────────────── */ /* CARDS */ /* ─────────────────────────────────────────────── */ .card { background: var(--surface-container-lowest); border-radius: var(--radius); box-shadow: var(--shadow-editorial); padding: 1.5rem; border: 1px solid var(--outline-variant); transition: transform 0.3s cubic-bezier(.22,.68,0,1.2), box-shadow 0.3s ease; } .card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(47,51,49,0.10); } .card-flat { background: var(--surface-container-lowest); border-radius: var(--radius); padding: 1.5rem; border: 1px solid var(--outline-variant); } /* ─────────────────────────────────────────────── */ /* BOTTOM NAV (app pages) */ /* ─────────────────────────────────────────────── */ .bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; min-height: 72px; background: var(--surface-container-lowest); border-top: 1px solid var(--outline-variant); display: flex; align-items: center; justify-content: space-around; z-index: 100; padding: 0 0.5rem; padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 16px); } .bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; padding: 0.5rem 1rem; text-decoration: none; color: var(--on-surface-variant) !important; font-family: 'Inter', sans-serif; font-size: 0.65rem; font-weight: 500; letter-spacing: 0.02em; transition: color 0.2s; flex: 1; min-width: 0; } .bottom-nav-item .material-symbols-outlined { font-size: 1.4rem; } .bottom-nav-item:link, .bottom-nav-item:visited { color: var(--on-surface-variant) !important; } .bottom-nav-item.active { color: var(--primary) !important; } .bottom-nav-item.active:link, .bottom-nav-item.active:visited { color: var(--primary) !important; } .bottom-nav-item:hover { color: var(--primary) !important; } /* Scan FAB (center of bottom nav) */ .bottom-nav-fab { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-full); background: var(--primary); color: #ffffff !important; box-shadow: 0 4px 16px rgba(79,99,83,0.35); transition: all 0.2s; flex-shrink: 0; margin-bottom: 0.5rem; } .bottom-nav-fab:hover { background: var(--primary-dim); transform: scale(1.05); } .bottom-nav-fab .material-symbols-outlined { font-size: 1.5rem; } /* ─────────────────────────────────────────────── */ /* SECTION LABELS */ /* ─────────────────────────────────────────────── */ .section-eyebrow { font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); display: block; margin-bottom: 0.5rem; } /* ─────────────────────────────────────────────── */ /* FLIP SCORE BADGE */ /* ─────────────────────────────────────────────── */ .flip-score-badge { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--surface-container-lowest); border-radius: var(--radius-full); padding: 0.35rem 0.75rem; box-shadow: var(--shadow-card); font-family: 'Inter', sans-serif; font-weight: 600; font-size: 0.875rem; color: var(--on-surface); } .flip-score-high { color: #2d7d46; } .flip-score-mid { color: #d4820a; } .flip-score-low { color: #b3261e; } /* ─────────────────────────────────────────────── */ /* FORM ELEMENTS */ /* ─────────────────────────────────────────────── */ input, textarea, select { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--surface-container-lowest); border: 1.5px solid var(--outline-variant); border-radius: var(--radius-sm); color: var(--on-surface); padding: 0.75rem 1rem; width: 100%; font-size: 0.95rem; transition: border-color 0.2s, box-shadow 0.2s; outline: none; } input:focus, textarea:focus, select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79,99,83,0.15); } input::placeholder, textarea::placeholder { color: var(--outline); } /* ─────────────────────────────────────────────── */ /* UTILITY */ /* ─────────────────────────────────────────────── */ .text-primary { color: var(--primary) !important; } .text-muted { color: var(--on-surface-variant) !important; } .bg-surface { background: var(--surface) !important; } .bg-primary { background: var(--primary) !important; } .bg-container { background: var(--primary-container) !important; } /* ─────────────────────────────────────────────── */ /* LEGACY OVERRIDES (migrate old pages to Stitch) */ /* ─────────────────────────────────────────────── */ /* Replace old cream/olive palette globally */ :root { --bg-primary: var(--surface) !important; --bg-secondary: var(--surface-container) !important; --bg-elevated: var(--surface-container-lowest) !important; --accent: var(--primary) !important; --accent-hover: var(--primary-dim) !important; --text-primary: var(--on-surface) !important; --text-secondary: var(--on-surface-variant) !important; --border: var(--outline-variant) !important; }