/* Make in Bulk: shared brand tokens, type and motion. Loaded by the hub and both tools before their own stylesheet. Everything here is namespaced --mib-* / .mib-* so it can't collide with a tool's own variables. */ :root { /* Surfaces */ --mib-bg: #f5f6fd; --mib-bg-tint-1: rgba(99, 102, 241, 0.16); /* indigo glow */ --mib-bg-tint-2: rgba(20, 184, 166, 0.14); /* teal glow */ --mib-surface: #ffffff; --mib-surface-2: #f0f2fb; --mib-glass: rgba(255, 255, 255, 0.72); --mib-ink: #13162b; --mib-ink-soft: #464c6b; --mib-muted: #5f6588; /* ≥ 4.9:1 on every light surface, including the tinted ones */ --mib-line: #e3e6f3; /* Brand */ --mib-brand: #4f46e5; --mib-brand-2: #7c3aed; --mib-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 48%, #0ea5a4 100%); --mib-gradient-soft: linear-gradient(135deg, #eef0ff 0%, #f3ecff 50%, #e3f7f5 100%); /* Per tool: PDF mail merge is indigo, QR codes are teal */ --mib-pdf: #4f46e5; --mib-pdf-strong: #3f37c9; --mib-pdf-soft: #eceeff; --mib-qr: #0d9488; --mib-qr-strong: #0b7c72; --mib-qr-soft: #e2f6f3; --mib-warm: #f59e0b; --mib-focus: #f5b301; /* Shape and depth */ --mib-radius-sm: 10px; --mib-radius: 16px; --mib-radius-lg: 24px; --mib-shadow-sm: 0 1px 2px rgba(19, 22, 43, 0.06), 0 2px 8px rgba(19, 22, 43, 0.05); --mib-shadow: 0 2px 4px rgba(19, 22, 43, 0.05), 0 12px 32px -8px rgba(40, 44, 110, 0.18); --mib-shadow-lg: 0 4px 8px rgba(19, 22, 43, 0.06), 0 28px 60px -12px rgba(40, 44, 110, 0.28); /* Type */ --mib-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --mib-font-body: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* Motion */ --mib-ease: cubic-bezier(0.22, 1, 0.36, 1); --mib-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); } @media (prefers-color-scheme: dark) { :root { --mib-bg: #0b0e1d; --mib-bg-tint-1: rgba(99, 102, 241, 0.22); --mib-bg-tint-2: rgba(20, 184, 166, 0.16); --mib-surface: #151a30; --mib-surface-2: #1b2140; --mib-glass: rgba(21, 26, 48, 0.72); --mib-ink: #eef0fb; --mib-ink-soft: #c3c8e2; --mib-muted: #959bbd; --mib-line: #2a3154; --mib-brand: #8b93ff; --mib-brand-2: #b18cff; --mib-gradient: linear-gradient(135deg, #818cf8 0%, #a78bfa 48%, #2dd4bf 100%); --mib-gradient-soft: linear-gradient(135deg, #1c2150 0%, #251d4a 50%, #10302f 100%); --mib-pdf: #8b93ff; --mib-pdf-strong: #a5acff; --mib-pdf-soft: #1e2350; --mib-qr: #2dd4bf; --mib-qr-strong: #5eead4; --mib-qr-soft: #0f302d; --mib-shadow-sm: none; --mib-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6); --mib-shadow-lg: 0 28px 60px -16px rgba(0, 0, 0, 0.7); } } /* Page backdrop: two soft colour glows behind everything. Apply with class="mib-backdrop" on . */ .mib-backdrop { background-color: var(--mib-bg); background-image: radial-gradient(60rem 36rem at -10% -10%, var(--mib-bg-tint-1), transparent 60%), radial-gradient(50rem 32rem at 110% 20%, var(--mib-bg-tint-2), transparent 60%); background-repeat: no-repeat; } /* Gradient text for a highlighted phrase in a headline. */ .mib-gradient-text { background: var(--mib-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ---- Motion ---- Above-the-fold entrances use CSS keyframes only (they run without JavaScript). Below the fold, add data-reveal to an element: /assets/motion.js adds .motion to and .is-visible to each element as it scrolls into view. Without JS, nothing is hidden. data-reveal-delay="1".."6" staggers siblings. */ .motion [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s var(--mib-ease), transform 0.7s var(--mib-ease); } .motion [data-reveal="left"] { transform: translateX(-24px); } .motion [data-reveal="right"] { transform: translateX(24px); } .motion [data-reveal="zoom"] { transform: scale(0.94); } .motion [data-reveal].is-visible { opacity: 1; transform: none; } .motion [data-reveal-delay="1"] { transition-delay: 0.08s; } .motion [data-reveal-delay="2"] { transition-delay: 0.16s; } .motion [data-reveal-delay="3"] { transition-delay: 0.24s; } .motion [data-reveal-delay="4"] { transition-delay: 0.32s; } .motion [data-reveal-delay="5"] { transition-delay: 0.40s; } .motion [data-reveal-delay="6"] { transition-delay: 0.48s; } @keyframes mib-rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @keyframes mib-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes mib-pop { 0% { opacity: 0; transform: scale(0.85); } 60% { opacity: 1; transform: scale(1.04); } 100% { transform: scale(1); } } @keyframes mib-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes mib-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.92); } } @keyframes mib-shimmer { from { background-position: -200% 0; } to { background-position: 200% 0; } } @keyframes mib-spin { to { transform: rotate(360deg); } } @keyframes mib-draw { from { stroke-dashoffset: var(--mib-dash, 400); } to { stroke-dashoffset: 0; } } .mib-rise { animation: mib-rise 0.8s var(--mib-ease) both; } .mib-rise-1 { animation-delay: 0.08s; } .mib-rise-2 { animation-delay: 0.16s; } .mib-rise-3 { animation-delay: 0.24s; } .mib-rise-4 { animation-delay: 0.32s; } .mib-float { animation: mib-float 6s ease-in-out infinite; } /* Buttons that lift slightly and show a light sweep on hover. Add to any button/link. */ .mib-lift { transition: transform 0.25s var(--mib-ease), box-shadow 0.25s var(--mib-ease), background-color 0.2s; } .mib-lift:hover { transform: translateY(-2px); box-shadow: var(--mib-shadow); } .mib-lift:active { transform: translateY(0); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* PDF to Excel (added for the third tool; appended so nothing above changes). Spreadsheet green, deliberately greener and less blue than the QR tool's teal. --mib-xls is for dots, icons and fills; --mib-xls-strong is text-safe on white (5:1); --mib-xls-ink is for text on --mib-xls-soft (6.4:1). */ :root { --mib-xls: #16a34a; --mib-xls-strong: #15803d; --mib-xls-ink: #166534; --mib-xls-soft: #e8f7ee; } @media (prefers-color-scheme: dark) { :root { --mib-xls: #4ade80; --mib-xls-strong: #86efac; --mib-xls-ink: #bbf7d0; --mib-xls-soft: #0f2e1c; } }