{} *{} #IE-warning { display: none; position: fixed; width: 100%; height: 100%; z-index: 9999; background: white; } .IE-warning-message { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } :root { /* Franchise Theme Colors */ --franchise-color-primary: #3B82F6; /* blue-500 */ --franchise-color-primary-dark: #1E3A8A; /* blue-900 */ --franchise-color-primary-light: #EFF6FF; /* blue-50 */ --franchise-color-secondary-text: #4B5563; /* gray-600 */ --franchise-color-background: #F9FAFB; /* gray-50 */ --franchise-color-card-background: #FFFFFF; /* white */ --franchise-color-border: #E5E7EB; /* gray-200 */ --franchise-color-border-light: #DBEAFE; /* blue-200 */ --franchise-color-success: #10B981; /* green-500 for checkmark */ /* Stacking Card Variables */ --card-header-height-franchise-desktop: 80px; --card-header-height-franchise-mobile: 70px; --card-stack-initial-offset-franchise: 2rem; /* 32px */ --card-border-radius-franchise: 0.75rem; /* 12px */ } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; background-color: var(--franchise-color-background); color: #374151; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .franchise-timeline-container { max-width: 900px; margin-left: auto; margin-right: auto; padding: 1rem 1rem 0 1rem; position: relative; } .franchise-timeline-layout { position: relative; } .franchise-timeline-item { position: sticky; background-color: var(--franchise-color-card-background); border: 1px solid var(--franchise-color-border); border-radius: var(--card-border-radius-franchise); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); margin: 0 auto 1rem auto; width: clamp(320px, 90%, 700px); opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; } .franchise-timeline-item.is-visible { opacity: 1; transform: translateY(0); } .franchise-card-header { height: var(--card-header-height-franchise-desktop); display: flex; align-items: center; justify-content: space-between; /* This will allow the title info to expand */ padding: 0 1.5rem; border-bottom: 1px solid var(--franchise-color-border-light); background-color: var(--franchise-color-primary-light); border-top-left-radius: var(--card-border-radius-franchise); border-top-right-radius: var(--card-border-radius-franchise); overflow: hidden; } .franchise-card-header-info { display: flex; align-items: center; gap: 0.75rem; flex-grow: 1; /* Allow this section to grow */ min-width: 0; /* Important for flex items to allow shrinking/wrapping if needed */ } .franchise-card-icon { background-color: var(--franchise-color-primary); color: white; border-radius: 9999px; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; flex-shrink: 0; } .franchise-card-completed-icon { color: var(--franchise-color-success); width: 1.5rem; /* w-6 */ height: 1.5rem; /* h-6 */ margin-right: 0.5rem; /* mr-2 */ flex-shrink: 0; } .franchise-card-title-header { font-size: 1.125rem; font-weight: 600; color: var(--franchise-color-primary-dark); transition: color 0.3s ease; /* Allow title to wrap if it's very long, even with more space */ white-space: normal; overflow-wrap: break-word; word-break: break-word; } .franchise-card-title-header.completed { color: var(--franchise-color-success); } .franchise-card-step-number { font-size: 1rem; font-weight: 500; color: var(--franchise-color-secondary-text); flex-shrink: 0; /* Prevent step number from shrinking if space is tight */ margin-left: 0.75rem; /* Add some space if it's visible */ } .franchise-card-content { padding: 1.5rem; } .franchise-card-details p { color: var(--franchise-color-secondary-text); margin-bottom: 1.5rem; line-height: 1.6; } .franchise-action-items-container { margin-top: 1.5rem; padding: 1rem; background-color: var(--franchise-color-background); border-radius: 0.5rem; border: 1px solid var(--franchise-color-border); } .franchise-action-item { display: flex; align-items: flex-start; margin-bottom: 0.75rem; } .franchise-action-item:last-child { margin-bottom: 0; } .franchise-action-check { color: var(--franchise-color-primary); margin-right: 0.75rem; font-weight: bold; flex-shrink: 0; margin-top: 0.125rem; } .franchise-action-text { font-size: 0.875rem; color: #374151; line-height: 1.5; } @media (max-width: 767px) { /* md breakpoint */ .franchise-card-header { height: var(--card-header-height-franchise-mobile); padding: 0 1rem; } .franchise-card-icon { width: 2rem; height: 2rem; font-size: 1rem; } .franchise-card-title-header { font-size: 1rem; /* Adjusted for mobile to give a bit more breathing room */ } .franchise-card-content { padding: 1rem; } .franchise-action-text { font-size: 0.8rem; } .franchise-card-completed-icon { width: 1.25rem; /* w-5 */ height: 1.25rem; /* h-5 */ } .franchise-card-step-number { font-size: 0.9rem; /* Slightly smaller on mobile */ } }