/* * IT Legends Calculator v2 - Design System * * To integrate into existing project: * 1. Replace your existing CSS with this file * 2. Add the Google Fonts link to your HTML : * * 3. Update HTML classes per the mapping guide below * * CLASS MAPPING (Old → New): * ───────────────────────────────────────────────── * .highlight-text → .highlight * .progress-bar/.progress-fill → .step-indicator (new structure) * .calculator-section → .section-card * .pain-point-card → .challenge-card * .pain-point-card.active → .challenge-card.selected * .pain-point-title → .challenge-title * .pain-point-description → .challenge-description * .tech-card → .tech-pill (new structure - no checkbox) * .tech-card.active → .tech-pill.selected * .ea-card → .toggle-btn * .ea-card.active → .toggle-btn.selected * .seat-input → .number-input * .calculate-btn → .btn-primary * .back-button → .btn-back * .results-section → .results-section (same) * .impact-display → .impact-hero * .impact-value → .impact-value (same) * .lead-gate-section → .lead-section * .form-submit → .btn-submit * .gated-content → .gated-content (same) * .table-section → use .breakdown-card per item instead */ /* ═══════════════════════════════════════════════════════════════ CSS VARIABLES - Design Tokens ═══════════════════════════════════════════════════════════════ */ :root { /* Colors - Core */ --color-bg: #0a0f1a; --color-surface: rgba(15, 25, 45, 0.6); --color-surface-hover: rgba(25, 40, 70, 0.7); /* Colors - Borders */ --color-border: rgba(100, 130, 180, 0.15); --color-border-hover: rgba(100, 180, 255, 0.3); --color-border-active: #4da6ff; /* Colors - Text */ --color-text: #ffffff; --color-text-muted: #8899b3; --color-text-dim: #5a6a85; /* Colors - Brand */ --color-primary: #4da6ff; --color-primary-light: #7fc4ff; --color-accent: #ff7e5f; --color-accent-light: #ffb088; --color-success: #34d399; /* Gradients */ --gradient-primary: linear-gradient(135deg, #3b82f6 0%, #60a5fa 50%, #93c5fd 100%); --gradient-accent: linear-gradient(135deg, #ff7e5f 0%, #feb47b 100%); --gradient-card: linear-gradient(145deg, rgba(20, 35, 65, 0.5) 0%, rgba(15, 25, 50, 0.3) 100%); /* Shadows */ --shadow-glow: 0 0 40px rgba(77, 166, 255, 0.15); --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.3); /* Typography */ --font-display: 'Sora', sans-serif; --font-body: 'DM Sans', sans-serif; /* Spacing & Radius */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 28px; } /* ═══════════════════════════════════════════════════════════════ BASE STYLES ═══════════════════════════════════════════════════════════════ */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-body); background: var(--color-bg); color: var(--color-text); min-height: 100vh; line-height: 1.6; overflow-x: hidden; } /* Subtle animated background */ body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: radial-gradient(ellipse 80% 50% at 20% 40%, rgba(59, 130, 246, 0.08) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 80% 60%, rgba(255, 126, 95, 0.05) 0%, transparent 50%); pointer-events: none; z-index: 0; } /* ═══════════════════════════════════════════════════════════════ LAYOUT ═══════════════════════════════════════════════════════════════ */ .topbar { max-width: 900px; margin: 0 auto; padding: 1.5rem 2rem; display: flex; align-items: center; } .brand-logo { height: 32px; opacity: 0.9; width: auto; } .container { max-width: 900px; margin: 0 auto; padding: 0 2rem 4rem; position: relative; z-index: 1; } /* Expand container width when showing results dashboard */ @media (min-width: 1024px) { .container.results-visible { max-width: 1400px; transition: max-width 0.3s ease; } .topbar.results-visible { max-width: 1400px; transition: max-width 0.3s ease; } } /* ═══════════════════════════════════════════════════════════════ HEADER ═══════════════════════════════════════════════════════════════ */ .header { text-align: center; padding: 2rem 0 3rem; } .header h1 { font-family: var(--font-display); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; letter-spacing: -0.02em; line-height: 1.1; } .header h1 .highlight, .highlight-text, .highlight { background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline; } .header p { font-size: 1.1rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; line-height: 1.7; } .header p strong { color: var(--color-text); font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ VALUE TEASER ═══════════════════════════════════════════════════════════════ */ .value-teaser { display: flex; justify-content: center; align-items: center; gap: 0.5rem; text-align: center; font-size: 0.875rem; color: var(--color-text-muted); margin-top: -2rem; margin-bottom: 1.5rem; padding: 0 1rem; } .value-teaser-intro { font-weight: 500; } .value-teaser-items { display: inline-flex; align-items: center; gap: 0.5rem; } .value-teaser-item { white-space: nowrap; } .value-teaser-separator { opacity: 0.6; } @media (max-width: 767px) { .hero-subtitle > span { white-space: normal !important; text-align: center; } .value-teaser { flex-direction: column; gap: 0.25rem; margin-top: -1.5rem; margin-bottom: 1.25rem; } .value-teaser-items { flex-direction: column; gap: 0.25rem; } .value-teaser-separator { display: none; } } /* ═══════════════════════════════════════════════════════════════ STEP INDICATOR (replaces progress bar) ═══════════════════════════════════════════════════════════════ */ .step-indicator { display: flex; justify-content: center; align-items: center; gap: 0; margin-bottom: 3rem; padding: 0 1rem; } .step { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; position: relative; z-index: 1; } .step-number { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1rem; background: var(--color-surface); border: 2px solid var(--color-border); color: var(--color-text-muted); transition: all 0.4s ease; } .step.active .step-number { background: var(--gradient-primary); border-color: transparent; color: white; box-shadow: 0 0 20px rgba(77, 166, 255, 0.4); } .step.completed .step-number { background: var(--color-success); border-color: transparent; color: white; } .step.completed .step-number::after { content: '✓'; } .step.completed .step-number span { display: none; } .step-label { font-size: 0.8rem; font-weight: 500; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.05em; transition: color 0.3s ease; } .step.active .step-label, .step.completed .step-label { color: var(--color-text-muted); } /* Clickable step indicators (step 1 and 2 only) */ #step1, #step2 { cursor: pointer; transition: transform 0.2s ease, opacity 0.2s ease; } #step1:hover, #step2:hover { transform: translateY(-2px); } #step1:hover .step-number, #step2:hover .step-number { box-shadow: 0 0 20px rgba(77, 166, 255, 0.5); } #step1:hover .step-label, #step2:hover .step-label { color: var(--color-primary); } /* Disabled step indicator (can't skip ahead) */ .step.disabled { cursor: default !important; pointer-events: none; } .step.disabled:hover { transform: none; } .step.disabled:hover .step-number { box-shadow: none; } .step.disabled:hover .step-label { color: var(--color-text-dim); } .step-connector { width: 80px; height: 2px; background: var(--color-border); margin: 0 0.5rem; margin-bottom: 1.5rem; transition: background 0.4s ease; } .step-connector.active { background: var(--gradient-primary); } /* Legacy progress bar support (hidden by default, use step-indicator instead) */ .progress-bar { display: none; } /* ═══════════════════════════════════════════════════════════════ SECTION CARDS (replaces calculator-section) ═══════════════════════════════════════════════════════════════ */ .section-card, .calculator-section { background: var(--gradient-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2.5rem; margin-bottom: 2rem; backdrop-filter: blur(20px); box-shadow: var(--shadow-card); } .section-title, .calculator-section h3, .pain-points-section h3, .questionnaire-section h3 { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; color: var(--color-text); text-align: center; margin-bottom: 0.5rem; } .section-subtitle, .calculator-section p, .pain-points-section > .calculator-section > p, .questionnaire-section > .calculator-section > p { font-size: 0.95rem; color: var(--color-text-muted); text-align: center; margin-bottom: 2rem; } .helper-text, .question-subtitle-inline { font-size: 0.85rem; font-style: italic; color: #64748b; font-weight: 400; text-transform: none; } /* ═══════════════════════════════════════════════════════════════ CHALLENGE CARDS (replaces pain-point-card) ═══════════════════════════════════════════════════════════════ */ .challenges-grid, .pain-points-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.75rem; } .challenge-card, .pain-point-card { background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .challenge-card:hover, .pain-point-card:hover { background: var(--color-surface-hover); border-color: var(--color-border-hover); transform: translateY(-2px); } .challenge-card.selected, .challenge-card.active, .pain-point-card.selected, .pain-point-card.active { background: rgba(77, 166, 255, 0.1); border-color: var(--color-border-active); box-shadow: 0 0 0 1px rgba(77, 166, 255, 0.2), var(--shadow-glow); } /* Checkmark indicator for selected cards */ .challenge-card.selected::after, .challenge-card.active::after, .pain-point-card.selected::after, .pain-point-card.active::after { content: ''; position: absolute; top: 12px; right: 12px; width: 24px; height: 24px; background: var(--gradient-primary); border-radius: 50%; } .challenge-card.selected::before, .challenge-card.active::before, .pain-point-card.selected::before, .pain-point-card.active::before { content: '✓'; position: absolute; top: 14px; right: 18px; font-size: 14px; font-weight: 700; color: white; z-index: 1; } .challenge-card.full-width, .pain-point-card.pain-point-full-width { grid-column: 1 / -1; } /* Challenge card inner elements */ .challenge-card label, .pain-point-card label { display: flex; flex-direction: row; align-items: flex-start; gap: 1rem; cursor: pointer; width: 100%; height: 100%; padding: 0; position: relative; } /* Hide the actual checkbox - we use visual state instead */ .challenge-card input[type="checkbox"], .pain-point-card input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .challenge-icon, .pain-point-icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; background: linear-gradient(135deg, rgba(77, 166, 255, 0.15) 0%, rgba(77, 166, 255, 0.05) 100%); border: 1px solid rgba(77, 166, 255, 0.2); color: var(--color-primary); flex-shrink: 0; } .pain-point-icon svg { width: 24px; height: 24px; stroke: var(--color-primary); } .challenge-title, .pain-point-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--color-text); margin-bottom: 0.35rem; line-height: 1.3; } .challenge-description, .pain-point-description { font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.4; font-style: normal; } /* ═══════════════════════════════════════════════════════════════ TECH PILLS (replaces tech-card grid) ═══════════════════════════════════════════════════════════════ */ .tech-section, .question-block { margin-bottom: 2rem; } .tech-label, .question-block h4 { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem; border: none; padding: 0; } .tech-pills, .tech-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tech-pill, .tech-card { padding: 0.6rem 1.25rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 100px; font-size: 0.9rem; font-weight: 500; color: var(--color-text); cursor: pointer; transition: all 0.25s ease; text-align: center; } .tech-pill:hover, .tech-card:hover { border-color: var(--color-border-hover); background: var(--color-surface-hover); } .tech-pill.selected, .tech-pill.active, .tech-card.selected, .tech-card.active { background: var(--gradient-primary); border-color: transparent; color: white; box-shadow: 0 2px 12px rgba(77, 166, 255, 0.3); } /* Hide checkbox inside tech cards */ .tech-card label { display: flex; align-items: center; justify-content: center; cursor: pointer; width: 100%; gap: 0; } .tech-card input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; } .tech-name { font-weight: 500; } /* ═══════════════════════════════════════════════════════════════ TOGGLE BUTTONS (replaces ea-card) ═══════════════════════════════════════════════════════════════ */ .input-row, .horizontal-questions { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; } .input-group, .question-block.half-width { display: flex; flex-direction: column; gap: 0.5rem; } .input-label { font-size: 0.85rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; } .toggle-group, .ea-options { display: flex; gap: 0.5rem; } .toggle-btn, .ea-card { flex: 1; padding: 0.75rem 1rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: 0.95rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: all 0.25s ease; text-align: center; } .toggle-btn:hover, .ea-card:hover { border-color: var(--color-border-hover); } .toggle-btn.selected, .toggle-btn.active, .ea-card.selected, .ea-card.active { background: var(--gradient-primary); border-color: transparent; color: white; } .ea-card label { display: flex; align-items: center; justify-content: center; cursor: pointer; width: 100%; } .ea-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } /* ═══════════════════════════════════════════════════════════════ NUMBER INPUT (replaces seat-input) ═══════════════════════════════════════════════════════════════ */ .number-input, .seat-input, .seat-input-compact .seat-input { padding: 0.75rem 1rem; background: rgba(255, 255, 255, 0.95); border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: 1.1rem; font-weight: 600; color: var(--color-bg); text-align: center; transition: all 0.25s ease; width: 100%; } .seat-input-compact { max-width: 200px; } .number-input:focus, .seat-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2); } /* ═══════════════════════════════════════════════════════════════ BUTTONS ═══════════════════════════════════════════════════════════════ */ .btn-container, .button-container { display: flex; justify-content: center; gap: 1rem; margin-top: 2rem; position: relative; min-height: 60px; align-items: center; } .btn-back, .back-button { position: absolute; left: 0; top: 50%; transform: translateY(-50%); padding: 0; background: none; border: none; font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; display: flex; align-items: center; gap: 0.5rem; transition: color 0.25s ease; } .btn-back:hover, .back-button:hover { color: var(--color-primary); } .btn-back::before, .back-button::before { content: '←'; font-size: 1.2rem; } .btn-primary, .calculate-btn { padding: 1rem 2.5rem; background: var(--gradient-primary); border: none; border-radius: 100px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: white; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(77, 166, 255, 0.3); text-transform: none; letter-spacing: 0; max-width: none; width: auto; margin: 0; display: inline-flex; align-items: center; justify-content: center; } .btn-primary:hover, .calculate-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(77, 166, 255, 0.4); } .btn-primary:active, .calculate-btn:active { transform: translateY(0); } .btn-secondary { padding: 0.875rem 2rem; background: transparent; border: 2px solid var(--color-border); border-radius: 100px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: all 0.25s ease; } .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ═══════════════════════════════════════════════════════════════ RESULTS SECTION ═══════════════════════════════════════════════════════════════ */ .results-section { display: none; } .results-section.visible { display: block; animation: fadeIn 0.6s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ═══════════════════════════════════════════════════════════════ RESULTS DASHBOARD LAYOUT - 2 Column Grid ═══════════════════════════════════════════════════════════════ */ .results-dashboard { display: grid; grid-template-columns: 1fr; gap: 2rem; } /* Desktop: 2-column layout (60%/40%) */ @media (min-width: 1024px) { .results-hero { text-align: left; padding: 1rem 0 1rem; } .results-dashboard { grid-template-columns: 60% 40%; gap: 2rem; align-items: stretch; } .dashboard-left { display: contents; } .dashboard-right { align-self: stretch; grid-column: 2; grid-row: 1; display: flex; } /* Remove scroll button on desktop - content is visible */ .scroll-to-details { display: none; } /* Impact display in left column - remove max-width constraint */ .results-dashboard .impact-display { margin: 0; max-width: 100%; box-sizing: border-box; grid-column: 1; grid-row: 1; } /* Adjust conquered section for left column */ .results-dashboard .conquered-pain-points { text-align: left; padding: 0; margin-bottom: 2rem; } .results-dashboard .conquered-title { text-align: left; } .results-dashboard .pain-points-list { justify-content: flex-start; } /* Adjust breakdown section for left column */ .results-dashboard .breakdown-section { padding: 0; } .results-dashboard .breakdown-section-title { text-align: left; font-size: 1.5rem; margin-bottom: 1.5rem; } /* Guide section styling for right column - match impact box styling */ .results-dashboard .choose-guide-section { margin-top: 0; padding: 2rem; box-sizing: border-box; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; background: var(--gradient-card); border: 1px solid var(--color-border-active); box-shadow: var(--shadow-glow); } .results-dashboard .choose-guide-header h2 { font-size: 1.5rem; } .results-dashboard .choose-guide-header p { font-size: 0.95rem; margin-bottom: 1.5rem; } /* Guide cards single column in sidebar */ .results-dashboard .guide-cards { grid-template-columns: 1fr; gap: 0.75rem; } .results-dashboard .guide-photo { width: 130px; min-width: 130px; align-self: stretch; } .results-dashboard .guide-info { padding: 0.75rem; } .results-dashboard .guide-name { font-size: 0.95rem; } .results-dashboard .guide-stat .stat-value { font-size: 1rem; } .results-dashboard .breakdown-content { grid-column: 1 / -1; grid-row: 2; } .results-dashboard .pdf-download-section { grid-column: 1 / -1; grid-row: 3; } } /* Mobile: Stack with optimized order for conversion */ @media (max-width: 1023px) { .results-dashboard { display: flex; flex-direction: column; } /* On mobile, reorder: Impact -> Guide -> Details */ .dashboard-left { display: contents; } .dashboard-right { order: 2; } .dashboard-left .impact-display { order: 1; } .dashboard-left .breakdown-content { order: 3; } /* Guide section prominent on mobile */ .dashboard-right .choose-guide-section { margin-top: 0; background: linear-gradient(145deg, rgba(35, 50, 80, 0.8) 0%, rgba(25, 40, 65, 0.6) 100%); border: 2px solid rgba(255, 255, 255, 0.9); box-shadow: 0 0 20px rgba(255, 255, 255, 0.3), 0 0 40px rgba(255, 255, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.3); } } .results-hero { text-align: center; padding: 2rem 0 1.5rem; } .results-title { font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; } .results-subtitle { color: var(--color-text-muted); margin-bottom: 0.5rem; font-size: 1.1rem; } .impact-hero, .impact-display { background: var(--gradient-card); border: 1px solid var(--color-border-active); border-radius: var(--radius-xl); padding: 2.5rem 2rem; max-width: 500px; margin: 0 auto 2rem; box-shadow: var(--shadow-glow); } .impact-label { font-size: 1.1rem; font-weight: 600; color: #ffffff; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.5rem; } .impact-value { font-family: var(--font-display); font-size: clamp(3rem, 8vw, 4rem); font-weight: 800; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; margin-bottom: 0.5rem; } .impact-context { font-size: 0.9rem; color: var(--color-text-muted); margin-bottom: 1rem; } .impact-disclaimer { font-size: 0.75rem; color: var(--color-text-dim); border-top: 1px solid var(--color-border); padding-top: 1rem; line-height: 1.5; font-style: italic; } .scroll-to-details { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding: 0.875rem 1.75rem; background: transparent; border: 2px solid var(--color-border); border-radius: 100px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: all 0.3s ease; } .scroll-to-details:hover { border-color: var(--color-primary); color: var(--color-primary); } /* ═══════════════════════════════════════════════════════════════ CONQUERED CHALLENGES ═══════════════════════════════════════════════════════════════ */ .conquered-section, .conquered-pain-points { text-align: center; margin-bottom: 3rem; padding: 0 2rem; } .conquered-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 1.5rem; color: var(--color-text); } .conquered-list, .pain-points-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; } .conquered-item, .pain-point-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; background: rgba(52, 211, 153, 0.1); border: 1px solid rgba(52, 211, 153, 0.3); border-radius: 100px; font-size: 0.9rem; font-weight: 500; color: var(--color-success); animation: fadeIn 0.4s ease backwards; } .conquered-item .icon { font-size: 1rem; } /* ═══════════════════════════════════════════════════════════════ LEAD FORM SECTION ═══════════════════════════════════════════════════════════════ */ .lead-section, .lead-gate-section { background: var(--gradient-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 2.5rem; text-align: center; margin: 0 0 2rem; } .lead-gate-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text); } .lead-gate-subtitle { color: var(--color-text-muted); margin-bottom: 2rem; font-size: 1rem; } .lead-form { max-width: 450px; margin: 0 auto; text-align: left; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; } .form-group { display: flex; flex-direction: column; gap: 0.4rem; } .form-group.full-width { grid-column: 1 / -1; margin-bottom: 1rem; } .form-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); } .form-input { padding: 0.75rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.95rem; color: var(--color-text); transition: all 0.25s ease; } .form-input::placeholder { color: var(--color-text-dim); } .form-input:focus { outline: none; border-color: var(--color-primary); background: var(--color-surface-hover); } .consent-group, .consent-section { display: flex; align-items: flex-start; gap: 0.75rem; margin-top: 1.5rem; margin-bottom: 1.5rem; } .consent-group input[type="checkbox"], .consent-checkbox input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } .consent-text { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.5; } .consent-text a, .consent-link { color: var(--color-primary); text-decoration: none; } .consent-text a:hover, .consent-link:hover { text-decoration: underline; } .btn-submit, .form-submit { width: 100%; padding: 1rem; background: var(--gradient-accent); border: none; border-radius: 100px; font-family: var(--font-display); font-size: 1rem; font-weight: 600; color: white; cursor: pointer; transition: all 0.3s ease; box-shadow: 0 4px 20px rgba(255, 126, 95, 0.3); margin-top: 1rem; } .btn-submit:hover, .form-submit:hover { transform: translateY(-2px); box-shadow: 0 6px 30px rgba(255, 126, 95, 0.4); } /* ═══════════════════════════════════════════════════════════════ PDF DOWNLOAD BUTTON (Secondary Action) ═══════════════════════════════════════════════════════════════ */ .pdf-download-section { margin-top: 2rem; padding: 1.5rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); text-align: center; } .btn-download-pdf { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.5rem; background: transparent; border: 2px solid var(--color-primary); border-radius: 100px; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: all 0.3s ease; } .btn-download-pdf:hover { background: var(--color-primary); color: var(--color-bg); transform: translateY(-2px); box-shadow: 0 4px 20px rgba(96, 165, 250, 0.3); } .btn-download-pdf svg { flex-shrink: 0; } .pdf-download-hint { margin-top: 0.75rem; font-size: 0.85rem; color: var(--color-text-muted); font-style: italic; } /* ═══════════════════════════════════════════════════════════════ GATED CONTENT / BREAKDOWN ═══════════════════════════════════════════════════════════════ */ .gated-content { display: none; margin-top: 3rem; } .gated-content.visible, .gated-content.unlocked { display: block; animation: fadeIn 0.6s ease; } .table-section { background: transparent; border: none; padding: 0; margin-bottom: 2rem; } .table-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; text-align: center; margin-bottom: 1.5rem; color: var(--color-text); } /* Legacy table styles - kept for backwards compatibility */ .rank-number { width: 48px; height: 48px; background: var(--gradient-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: white; flex-shrink: 0; } .resolution-name { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--color-text); margin-bottom: 0.25rem; } .challenge-struck { font-size: 0.85rem; color: var(--color-text-dim); text-decoration: line-through; margin-bottom: 0.5rem; } .solution-text { font-size: 0.9rem; color: var(--color-text-muted); line-height: 1.5; } .impact-total { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Legacy table support */ .impact-table { background: transparent; } .table-container { width: 100%; } .table-row { display: grid; grid-template-columns: 60px 1fr 150px auto; gap: 1rem; align-items: center; padding: 1.25rem; border-bottom: 1px solid var(--color-border); background: var(--gradient-card); border-radius: var(--radius-lg); margin-bottom: 0.75rem; border: 1px solid var(--color-border); } .table-row:hover { border-color: var(--color-border-hover); } .table-header-row { display: none; /* Hide table headers, use card layout */ } /* ═══════════════════════════════════════════════════════════════ CTA SECTION ═══════════════════════════════════════════════════════════════ */ .cta-section { text-align: center; padding: 3rem 2rem; background: var(--gradient-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); margin-top: 3rem; } .cta-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text); } .cta-subtitle { color: var(--color-text-muted); margin-bottom: 1.5rem; } .cta-buttons { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } /* ═══════════════════════════════════════════════════════════════ CHOOSE YOUR GUIDE SECTION ═══════════════════════════════════════════════════════════════ */ .choose-guide-section { background: linear-gradient(145deg, rgba(20, 35, 65, 0.5) 0%, rgba(15, 25, 50, 0.3) 100%); border: 1px solid var(--color-border); border-radius: var(--radius-xl); padding: 3rem 2rem; margin-top: 3rem; text-align: center; } .choose-guide-header h2 { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.5rem; } .choose-guide-header p { color: var(--color-text-secondary); font-size: 1.05rem; margin-bottom: 2.5rem; } .guide-cta-btn { width: 100%; max-width: 360px; margin: 0 auto; border-radius: 14px; font-size: 1rem; font-weight: 700; padding: 1rem 1.25rem; background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%); border: 1px solid rgba(96, 165, 250, 0.9); color: #ffffff; box-shadow: 0 10px 24px rgba(59, 130, 246, 0.35); transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease; } .guide-cta-btn:hover { background: #ff7e5f; border-color: rgba(254, 180, 123, 0.95); color: #ffffff; -webkit-text-fill-color: #ffffff; box-shadow: 0 12px 28px rgba(255, 126, 95, 0.35); transform: none; } .guide-cta-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 126, 95, 0.35), 0 12px 28px rgba(255, 126, 95, 0.35); } .guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; } .guide-card { background: rgba(15, 25, 45, 0.6); border: 2px solid var(--color-primary); border-radius: var(--radius-lg); padding: 0; overflow: hidden; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; cursor: pointer; } .guide-card:hover { border-color: var(--color-accent); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255, 126, 95, 0.25); } .guide-photo { width: 150px; min-width: 150px; align-self: stretch; overflow: hidden; background: linear-gradient(135deg, rgba(77, 166, 255, 0.2) 0%, rgba(77, 166, 255, 0.05) 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .guide-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; } .guide-card:hover .guide-photo img { transform: scale(1.05); } .guide-photo-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(77, 166, 255, 0.15) 0%, rgba(77, 166, 255, 0.05) 100%); } .guide-initials { font-size: 2rem; font-weight: 700; color: var(--color-primary); opacity: 0.6; } .guide-info { padding: 0.5rem 0.75rem; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; gap: 0.25rem; } .guide-name { font-family: var(--font-display); font-size: 0.9rem; font-weight: 600; color: var(--color-text); margin-bottom: 0; } .guide-title { font-size: 0.7rem; color: var(--color-primary); font-weight: 500; margin-bottom: 0; } .guide-stat { display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; gap: 0.5rem; margin-bottom: 0; padding: 0.5rem 0.75rem; background: rgba(52, 211, 153, 0.1); border-radius: var(--radius-sm); border: 1px solid rgba(52, 211, 153, 0.2); } .guide-stat .stat-value { font-size: 1.25rem; font-weight: 700; color: var(--color-success); margin-top: 0; } .guide-stat .stat-label { font-size: 0.8rem; color: var(--color-text-secondary); } .guide-quote { font-size: 0.75rem; color: var(--color-text-secondary); font-style: italic; line-height: 1.4; margin-bottom: 0; flex: 1; } .guide-subtitle { text-align: center; font-size: 1.1rem; color: var(--color-text-secondary); margin: 1.5rem auto 2rem; max-width: 600px; line-height: 1.6; } .power-ups-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .power-ups-title { font-size: 0.6rem; font-weight: 600; color: var(--color-primary); margin: 0; text-transform: uppercase; letter-spacing: 0.15em; white-space: nowrap; } .guide-interests { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0; } .guide-interests .interest { font-size: 0.65rem; padding: 0.25rem 0.5rem; background: rgba(77, 166, 255, 0.1); border-radius: 20px; color: var(--color-text-secondary); } .guide-select-btn { width: 100%; flex-basis: 100%; padding: 0.5rem 0.75rem; background: var(--color-primary); border: none; border-top: 1px solid var(--color-border); font-family: var(--font-display); font-size: 0.85rem; font-weight: 600; color: white; cursor: pointer; transition: all 0.25s ease; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .guide-card:hover .guide-select-btn { background: var(--color-accent); color: white; } .guide-select-btn .arrow { transition: transform 0.25s ease; } .guide-card:hover .guide-select-btn .arrow { transform: translateX(4px); } .guide-fallback { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .divider-text { color: var(--color-text-muted); font-size: 0.85rem; position: relative; padding: 0 1.5rem; } .divider-text::before, .divider-text::after { content: ''; position: absolute; top: 50%; width: 60px; height: 1px; background: var(--color-border); } .divider-text::before { right: 100%; } .divider-text::after { left: 100%; } .guide-fallback .btn-secondary { padding: 0.875rem 2rem; background: transparent; border: 2px solid var(--color-border); border-radius: var(--radius-lg); color: var(--color-text); font-weight: 600; cursor: pointer; transition: all 0.3s ease; } .guide-fallback .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(77, 166, 255, 0.05); } .guide-download { margin-top: 1rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .btn-download { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); font-size: 0.9rem; cursor: pointer; transition: all 0.3s ease; } .btn-download:hover { border-color: var(--color-primary); color: var(--color-primary); } @media (max-width: 900px) { .guide-cards { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto 2rem; } } @media (max-width: 480px) { .choose-guide-section { padding: 2rem 1.25rem; } .guide-photo { height: 180px; } .choose-guide-header h2 { font-size: 1.5rem; } } /* ═══════════════════════════════════════════════════════════════ UTILITY CLASSES ═══════════════════════════════════════════════════════════════ */ .hidden { display: none !important; } /* ═══════════════════════════════════════════════════════════════ RESPONSIVE ═══════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { .container { padding: 0 1.25rem 3rem; } .section-card, .calculator-section { padding: 1.5rem; } .challenges-grid, .pain-points-grid { grid-template-columns: 1fr; } .input-row, .horizontal-questions { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .step-connector { width: 40px; } .step-label { font-size: 0.7rem; } .rank-number { margin: 0 auto; } .table-row { grid-template-columns: 1fr; text-align: center; } .tech-pills, .tech-grid { justify-content: center; } } @media (max-width: 480px) { .step-label { display: none; } .step-number { width: 36px; height: 36px; font-size: 0.9rem; } .topbar { padding: 1rem; } .brand-logo { height: 24px; } } /* ═══════════════════════════════════════════════════════════════ ANIMATIONS ═══════════════════════════════════════════════════════════════ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Entrance animations for sections */ .section-card, .calculator-section { animation: fadeInUp 0.5s ease; } /* Staggered card animations */ .challenge-card:nth-child(1), .pain-point-card:nth-child(1) { animation-delay: 0.1s; } .challenge-card:nth-child(2), .pain-point-card:nth-child(2) { animation-delay: 0.15s; } .challenge-card:nth-child(3), .pain-point-card:nth-child(3) { animation-delay: 0.2s; } .challenge-card:nth-child(4), .pain-point-card:nth-child(4) { animation-delay: 0.25s; } .challenge-card:nth-child(5), .pain-point-card:nth-child(5) { animation-delay: 0.3s; } .challenge-card:nth-child(6), .pain-point-card:nth-child(6) { animation-delay: 0.35s; } .challenge-card:nth-child(7), .pain-point-card:nth-child(7) { animation-delay: 0.4s; } /* ═══════════════════════════════════════════════════════════════ ESTIMATED SPEND SECTION (formerly Refine Your Estimate) ═══════════════════════════════════════════════════════════════ */ .estimated-spend-section { margin-top: 0.75rem; padding: 1.25rem; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: rgba(30, 41, 59, 0.4); opacity: 0.9; } .estimated-spend-header { margin-bottom: 1rem; } .estimated-spend-title-group { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.25rem; } .estimated-spend-title { font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0; } .auto-estimated-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.6rem; font-size: 0.75rem; font-weight: 500; color: #60a5fa; background: rgba(96, 165, 250, 0.1); border: 1px solid rgba(96, 165, 250, 0.3); border-radius: 999px; } .estimated-spend-section .estimated-spend-subtitle { font-size: 0.85rem; color: var(--color-text-muted); margin: 0; text-align: left; } .refine-inputs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; } .refine-input-group { display: flex; flex-direction: column; gap: 0.5rem; } .refine-input-group label { font-size: 0.9rem; font-weight: 600; color: var(--color-text); } .currency-input-wrapper { position: relative; display: flex; align-items: center; } .currency-symbol { position: absolute; left: 1rem; color: var(--color-text-muted); font-size: 1rem; font-weight: 500; pointer-events: none; } .refine-input { width: 100%; padding: 0.75rem 1rem 0.75rem 2rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font-size: 1rem; font-weight: 500; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .refine-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.2); } .refine-input::placeholder { color: var(--color-text-dim); } .refine-helper { font-size: 0.75rem; color: var(--color-text-dim); font-style: italic; } @media (max-width: 600px) { .refine-inputs-grid { grid-template-columns: 1fr; } } /* ═══════════════════════════════════════════════════════════════ START OVER BUTTON ═══════════════════════════════════════════════════════════════ */ .start-over-btn { margin-top: 1rem; padding: 0.75rem 2rem; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-muted); font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } .start-over-btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: rgba(77, 166, 255, 0.1); } /* Checkmark in conquered challenges */ .checkmark { color: #10b981; font-weight: 600; } /* ═══════════════════════════════════════════════════════════════ BREAKDOWN CARDS - Detailed Impact Section (Redesigned) ═══════════════════════════════════════════════════════════════ */ .breakdown-section { padding: 2rem 0; } .breakdown-section-title { font-family: var(--font-display); font-size: 1.75rem; font-weight: 700; color: var(--color-text); text-align: center; margin-bottom: 2rem; } /* Card Container */ .breakdown-card { background: var(--gradient-card); border: 1px solid var(--color-border); border-radius: var(--radius-xl); margin-bottom: 1rem; overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; } .breakdown-card:hover { border-color: var(--color-border-hover); box-shadow: 0 8px 32px rgba(77, 166, 255, 0.1); } /* Header - Force Grid Layout */ .breakdown-card .breakdown-header { display: grid !important; grid-template-columns: 56px 1fr auto !important; grid-template-rows: auto !important; gap: 1.25rem !important; align-items: center !important; padding: 1.5rem 2rem !important; position: relative; width: 100%; box-sizing: border-box; } /* Rank Badge */ .breakdown-card .breakdown-rank { grid-column: 1; grid-row: 1; width: 56px !important; height: 56px !important; min-width: 56px; min-height: 56px; background: var(--gradient-primary) !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: white; flex-shrink: 0; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3); } /* Info Section */ .breakdown-card .breakdown-info { grid-column: 2; grid-row: 1; min-width: 0; overflow: hidden; } .breakdown-card .breakdown-title { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--color-text); margin-bottom: 0.25rem; line-height: 1.3; } .breakdown-card .breakdown-tagline { font-size: 0.95rem; color: var(--color-text-muted); line-height: 1.4; } /* Impact Value - Right Side */ .breakdown-card .breakdown-impact { grid-column: 3; grid-row: 1; text-align: right; flex-shrink: 0; white-space: nowrap; } .breakdown-card .breakdown-value { font-family: var(--font-display); font-weight: 700; font-size: 1.75rem; background: var(--gradient-primary); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1.1; } .breakdown-card .breakdown-period { font-size: 0.75rem; color: var(--color-text-dim); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.15rem; } /* Expandable Methodology Section */ .breakdown-card .breakdown-methodology { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .breakdown-card .breakdown-methodology.expanded { max-height: 800px; } .breakdown-card .methodology-content { padding: 1rem 1rem 1.25rem; background: rgba(0, 0, 0, 0.2); border-top: 1px solid var(--color-border); } .breakdown-card .methodology-section { margin-bottom: 1rem; } .breakdown-card .methodology-section:last-child { margin-bottom: 0; } .breakdown-card .methodology-label { font-size: 0.7rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.5rem; } .breakdown-card .formula-box { background: rgba(77, 166, 255, 0.08); border: 1px solid rgba(77, 166, 255, 0.2); border-radius: var(--radius-md); padding: 0.875rem 1rem; font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: 0.85rem; color: var(--color-text); line-height: 1.6; } .breakdown-card .formula-box .calc-line { margin-bottom: 0.4rem; } .breakdown-card .formula-box .calc-line:last-child { margin-bottom: 0; } .breakdown-card .formula-result { color: var(--color-success); font-weight: 600; margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px solid rgba(77, 166, 255, 0.15); } .breakdown-card .sources-list { list-style: none; padding: 0; margin: 0; } .breakdown-card .sources-list li { position: relative; padding-left: 1rem; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.4rem; line-height: 1.5; } .breakdown-card .sources-list li::before { content: '•'; position: absolute; left: 0; color: var(--color-primary); } .breakdown-card .sources-list a { color: var(--color-primary); text-decoration: none; transition: color 0.2s ease; } .breakdown-card .sources-list a:hover { color: var(--color-primary-light); text-decoration: underline; } /* Toggle Calculation Button - MUST be at bottom of card */ .breakdown-card .toggle-calc-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.5rem; width: 100% !important; padding: 0.875rem !important; background: transparent !important; border: none !important; border-top: 1px solid var(--color-border) !important; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; transition: all 0.25s ease; margin-top: auto; position: relative !important; top: auto !important; right: auto !important; left: auto !important; bottom: auto !important; float: none !important; flex: none !important; } .breakdown-card .toggle-calc-btn:hover { background: rgba(77, 166, 255, 0.05) !important; color: var(--color-primary); } .breakdown-card .toggle-calc-btn .toggle-arrow { transition: transform 0.3s ease; font-size: 0.75rem; } .breakdown-card .toggle-calc-btn.expanded .toggle-arrow { transform: rotate(180deg); } /* Mobile Responsive - Breakdown Cards */ @media (max-width: 768px) { .breakdown-card .breakdown-header { grid-template-columns: 1fr !important; grid-template-rows: auto auto auto !important; text-align: center; gap: 1rem !important; padding: 1.5rem !important; } .breakdown-card .breakdown-rank { grid-column: 1 !important; grid-row: 1 !important; width: 48px !important; height: 48px !important; min-width: 48px; min-height: 48px; font-size: 1.25rem; margin: 0 auto; } .breakdown-card .breakdown-info { grid-column: 1 !important; grid-row: 2 !important; text-align: center; } .breakdown-card .breakdown-title { font-size: 1.1rem; } .breakdown-card .breakdown-tagline { font-size: 0.9rem; } .breakdown-card .breakdown-impact { grid-column: 1 !important; grid-row: 3 !important; text-align: center; } .breakdown-card .breakdown-value { font-size: 1.5rem; } .breakdown-card .methodology-content { padding: 1.25rem 1.5rem; } .breakdown-card .formula-box { font-size: 0.75rem; padding: 0.875rem 1rem; overflow-x: auto; } } /* ═══════════════════════════════════════════════════════════════ STATE SELECTOR STYLES ═══════════════════════════════════════════════════════════════ */ .state-selector { display: flex; justify-content: center; margin: 2rem 0; } .state-dropdown { width: 100%; max-width: 400px; padding: 1rem 1.5rem; font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); cursor: pointer; transition: all 0.3s ease; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238899b3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 1.25rem; padding-right: 3rem; } .state-dropdown:hover { border-color: var(--color-border-hover); background-color: var(--color-surface-hover); } .state-dropdown:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(77, 166, 255, 0.15); } .state-dropdown option { background: var(--color-bg); color: var(--color-text); padding: 0.75rem; } /* ═══════════════════════════════════════════════════════════════ LEAD FORM MODAL STYLES ═══════════════════════════════════════════════════════════════ */ .lead-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 1rem; } .lead-modal { background: linear-gradient(145deg, rgba(20, 35, 65, 0.95) 0%, rgba(15, 25, 50, 0.98) 100%); border: 1px solid var(--color-border); border-radius: var(--radius-xl); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; padding: 2.5rem; position: relative; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4); } .modal-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; background: transparent; border: 1px solid var(--color-border); border-radius: 50%; color: var(--color-text-muted); font-size: 1.5rem; line-height: 1; cursor: pointer; transition: all 0.2s ease; display: flex; align-items: center; justify-content: center; } .modal-close:hover { background: rgba(255, 100, 100, 0.1); border-color: rgba(255, 100, 100, 0.3); color: #ff6b6b; } .lead-modal-title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; color: var(--color-text); text-align: center; margin-bottom: 0.5rem; } .lead-modal-title span { color: var(--color-primary); } .lead-modal-subtitle { font-size: 1rem; color: var(--color-text-muted); text-align: center; margin-bottom: 2rem; } .lead-modal .lead-form { margin-top: 0; } .lead-modal .form-submit { width: 100%; margin-top: 1.5rem; } /* Mobile Responsive - Modal */ @media (max-width: 768px) { .lead-modal { padding: 1.5rem; max-height: 85vh; } .lead-modal-title { font-size: 1.25rem; padding-right: 2rem; } .state-dropdown { max-width: 100%; } } /* Guide fallback styling */ .guide-fallback { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--color-border); } .guide-fallback .divider-text { color: var(--color-text-muted); font-size: 0.9rem; } .guide-fallback .btn-secondary { padding: 0.875rem 2rem; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text); font-family: var(--font-body); font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .guide-fallback .btn-secondary:hover { background: rgba(77, 166, 255, 0.1); border-color: var(--color-primary); color: var(--color-primary); } /* ═══════════════════════════════════════════════════════════════ NOTIFICATIONS / ALERTS ═══════════════════════════════════════════════════════════════ */ .notification { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; padding: 1.25rem 2rem; border-radius: 12px; z-index: 10000; font-weight: 700; box-shadow: 0 15px 40px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); max-width: 90vw; text-align: center; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } .notification.show { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } /* ═══════════════════════════════════════════════════════════════ SKELETON LOADING STATES ═══════════════════════════════════════════════════════════════ */ @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .skeleton { background: linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .guide-card-skeleton { background: rgba(15, 25, 45, 0.6); border: 2px solid rgba(77, 166, 255, 0.3); border-radius: var(--radius-lg); padding: 0; overflow: hidden; display: flex; flex-direction: row; align-items: stretch; min-height: 180px; } .skeleton-photo { width: 150px; min-width: 150px; background: linear-gradient( 90deg, rgba(77, 166, 255, 0.1) 25%, rgba(77, 166, 255, 0.2) 50%, rgba(77, 166, 255, 0.1) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } .skeleton-info { flex: 1; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; } .skeleton-name { height: 1.5rem; width: 70%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.08) 25%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.08) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .skeleton-title { height: 1rem; width: 50%; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.05) 25%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.05) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 4px; } .skeleton-badges { display: flex; gap: 0.5rem; margin-top: 0.5rem; } .skeleton-badge { height: 1.5rem; width: 4rem; background: linear-gradient( 90deg, rgba(255, 126, 95, 0.1) 25%, rgba(255, 126, 95, 0.2) 50%, rgba(255, 126, 95, 0.1) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: 20px; } .skeleton-button { height: 2.5rem; width: 100%; margin-top: auto; background: linear-gradient( 90deg, rgba(77, 166, 255, 0.1) 25%, rgba(77, 166, 255, 0.2) 50%, rgba(77, 166, 255, 0.1) 75% ); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); } @media (max-width: 1024px) { .skeleton-photo { width: 130px; min-width: 130px; } } /* ═══════════════════════════════════════════════════════════════ SUCCESS MODAL ═══════════════════════════════════════════════════════════════ */ .success-modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 10001; opacity: 0; transition: opacity 0.3s ease; } .success-modal-overlay.visible { opacity: 1; } .success-modal { background: linear-gradient(145deg, rgba(20, 35, 65, 0.95) 0%, rgba(15, 25, 50, 0.95) 100%); border: 2px solid var(--color-success); border-radius: var(--radius-xl); padding: 2.5rem 3rem; text-align: center; max-width: 440px; transform: scale(0.8); transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 40px rgba(52, 211, 153, 0.15); } .success-modal-overlay.visible .success-modal { transform: scale(1); } .success-checkmark { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; animation: checkBounce 0.6s ease 0.2s both; } @keyframes checkBounce { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .success-checkmark svg { width: 40px; height: 40px; stroke: white; stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; } .success-checkmark svg path { stroke-dasharray: 50; stroke-dashoffset: 50; animation: drawCheck 0.4s ease 0.5s forwards; } @keyframes drawCheck { to { stroke-dashoffset: 0; } } .success-title { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; } .success-message { font-size: 1.1rem; color: var(--color-text-muted); line-height: 1.6; } .success-message strong { color: var(--color-primary-light); } .success-modal-close { position: absolute; top: 0.75rem; right: 0.75rem; background: transparent; border: none; color: var(--color-text-muted); font-size: 1.75rem; line-height: 1; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: var(--radius-sm); transition: all 0.2s ease; } .success-modal-close:hover { color: var(--color-text); background: rgba(255, 255, 255, 0.1); } .success-modal { position: relative; } .success-modal-download { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; padding: 0.75rem 1.5rem; background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary-light); font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; border-radius: var(--radius-md); cursor: pointer; transition: all 0.2s ease; } .success-modal-download:hover { background: var(--color-primary); color: white; transform: translateY(-1px); } .success-modal-download svg { flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════ FOOTER ═══════════════════════════════════════════════════════════════ */ .site-footer { width: min(1200px, calc(100% - 2rem)); margin: 1rem auto 2rem; border-top: 1px solid var(--color-border); background: transparent; } .site-footer__inner { min-height: 48px; padding: 0.7rem 0.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .site-footer__brand { display: inline-flex; align-items: center; } .site-footer__logo { width: 80px; height: auto; opacity: 0.85; } .site-footer__copyright { color: var(--color-text-muted); font-size: 0.8rem; margin-left: auto; } .site-footer__copyright a, .site-footer__links a, .site-footer__social a { color: var(--color-text-muted); text-decoration: none; } .site-footer__copyright a:hover, .site-footer__links a:hover, .site-footer__social a:hover { color: var(--color-primary-light); } .site-footer__links, .site-footer__social { display: flex; align-items: center; gap: 0.3rem 0.8rem; font-size: 0.82rem; line-height: 1; } .site-footer__links a, .site-footer__social a { color: var(--color-text-dim); } .site-footer__social a { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .site-footer__social svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 768px) { .site-footer { width: calc(100% - 1rem); margin: 0.8rem auto 1.25rem; } .site-footer__inner { padding: 0.75rem 0; justify-content: center; gap: 0.55rem 1rem; text-align: center; } .site-footer__logo { width: 68px; } .site-footer__copyright { order: 4; margin-left: 0; width: 100%; } }