{} *{} #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 { /* I. Core Design Tokens (Variables) - Adapted from User Spec */ --color-primary-spec: #101828; --color-secondary-spec: #475467; --color-accent-spec: #f1cf90; --color-accent-dark-spec: #1D9DD0; --color-text-spec: #5A5A5A; --color-heading-spec: #1E2132; --color-white-spec: #FFFFFF; --color-light-bg-spec: #FAFBFD; --color-standard-border-spec: #e0e0e0; --color-success-spec: #10B981; /* Fonts */ --font-primary-spec: 'Inter', sans-serif; --font-secondary-spec: 'Lora', serif; /* Stacking Card Variables */ --card-header-height-desktop: 80px; --card-header-height-mobile: 70px; --card-stack-initial-offset: 2rem; /* 32px if 1rem = 16px */ --card-border-radius-spec: 8px; --card-shadow-spec: 0 2px 5px rgba(0,0,0,0.1); --card-padding-spec: 20px; --sticky-container-top-offset: 20px; /* Offset for the sticky main container */ } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-primary-spec); background-color: var(--color-light-bg-spec); color: var(--color-text-spec); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .page-main-title { font-family: var(--font-secondary-spec); color: var(--color-heading-spec); font-size: 2.2em; line-height: 1.3; text-align: center; margin-bottom: 1em; padding-top: 50px; } @media (min-width: 768px) { .page-main-title { font-size: 2.5em; margin-bottom: 1.5em; } } .franchise-journey-sticky-wrapper { position: sticky; top: var(--sticky-container-top-offset); z-index: 10; } .franchise-timeline-container { max-width: 700px; margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; padding-bottom: 1rem; position: relative; } .franchise-timeline-layout { position: relative; transition: padding-bottom 0.3s ease-out; } .franchise-timeline-item { /* position: sticky; is applied via inline style when not in finalStateReached */ background-color: var(--color-white-spec); border: 1px solid var(--color-standard-border-spec); border-radius: var(--card-border-radius-spec); box-shadow: var(--card-shadow-spec); margin: 0 auto 1rem auto; /* Default margin, overridden by inline style in final state */ width: 100%; opacity: 0; /* Initially hidden for fade-in */ transform: translateY(30px); /* Initial position for fade-in */ 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-desktop); display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; border-bottom: 1px solid var(--color-standard-border-spec); background-color: var(--color-light-bg-spec); border-top-left-radius: var(--card-border-radius-spec); border-top-right-radius: var(--card-border-radius-spec); overflow: hidden; /* Ensures content within header respects padding */ } .franchise-card-header-info { display: flex; align-items: center; gap: 0.75rem; flex-grow: 1; min-width: 0; /* Prevents overflow in flex container */ } .franchise-step-number-icon { background-color: var(--color-accent-dark-spec); color: var(--color-white-spec); border-radius: 50%; width: 2.25rem; height: 2.25rem; display: flex; align-items: center; justify-content: center; font-size: 1.125rem; font-weight: 600; flex-shrink: 0; } .franchise-card-completed-icon { color: var(--color-success-spec); width: 1.75rem; height: 1.75rem; margin-right: 0.5rem; /* Spacing between icon and title */ flex-shrink: 0; } .franchise-card-title-header { font-family: var(--font-secondary-spec); font-size: 1.25em; font-weight: 600; color: var(--color-heading-spec); transition: color 0.3s ease; white-space: normal; overflow-wrap: break-word; word-break: break-word; /* Ensure long words break */ line-height: 1.3; /* Adjust for better readability if title wraps */ } .franchise-card-title-header.completed { color: var(--color-success-spec); } .franchise-card-content { padding: var(--card-padding-spec); transition: opacity 0.3s ease-out, max-height 0.5s ease-out, padding 0.3s ease-out, border 0.3s ease-out; overflow: hidden; } .franchise-card-content.hidden { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; border-top: 1px solid var(--color-standard-border-spec); margin-top: -1px; /* To ensure the border aligns nicely with the header's bottom border */ overflow: hidden; /* Reinforce hiding content */ } .franchise-card-details p { font-family: var(--font-primary-spec); color: var(--color-text-spec); margin-bottom: 1.5em; line-height: 1.6; } .franchise-action-items-container { margin-top: 1.5em; padding: 1em; background-color: var(--color-light-bg-spec); border-radius: calc(var(--card-border-radius-spec) / 2); border: 1px solid var(--color-standard-border-spec); } .franchise-action-item { display: flex; align-items: flex-start; /* Align checkmark with start of text */ margin-bottom: 0.75em; } .franchise-action-item:last-child { margin-bottom: 0; } .franchise-action-check { color: var(--color-accent-dark-spec); margin-right: 0.75em; font-weight: bold; flex-shrink: 0; margin-top: 0.125em; /* Align with text better */ font-size: 1.1em; } .franchise-action-text { font-family: var(--font-primary-spec); font-size: 0.9em; color: var(--color-text-spec); line-height: 1.6; } /* Responsive adjustments */ @media (max-width: 767px) { .page-main-title { font-size: 2em; margin-bottom: 1.5em; padding-top: 30px; } .franchise-card-header { height: var(--card-header-height-mobile); padding: 0 1rem; } .franchise-step-number-icon { width: 2rem; height: 2rem; font-size: 1rem; } .franchise-card-completed-icon { width: 1.5rem; height: 1.5rem; } .franchise-card-title-header { font-size: 1.1em; } .franchise-card-content { padding: 1rem; } .franchise-action-text { font-size: 0.85em; } }