/* ===================================================== DEBATABLE — Shared Design System Used by: index_gov.tt / index_public.tt / index_advocates.tt Each page sets ===================================================== */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } :root { --navy: #0A1628; --navy-mid: #0D1B2E; --navy-light: #1A2744; --blue: #2563EB; --blue-hover: #1D4ED8; --blue-lt: #60A5FA; --green: #10B981; --green-lt: #34D399; --purple: #8B5CF6; --purple-lt: #A78BFA; --white: #FFFFFF; --gray-50: #F8FAFC; --gray-100: #F1F5F9; --gray-200: #E2E8F0; --gray-300: #CBD5E1; --gray-400: #94A3B8; --gray-600: #475569; --gray-900: #0F172A; /* per-audience accent — overridden per body class below */ --accent: var(--blue); --accent2: var(--blue-lt); } body.audience-gov { --accent: var(--blue); --accent2: var(--blue-lt); } body.audience-public { --accent: var(--green); --accent2: var(--green-lt); } body.audience-advocate { --accent: var(--purple); --accent2: var(--purple-lt); } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', sans-serif; color: var(--gray-900); line-height: 1.6; -webkit-font-smoothing: antialiased; background: var(--white); } /* ── NAV ── */ .d-nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(255,255,255,0.97); backdrop-filter: blur(20px); border-bottom: 1px solid rgba(226,232,240,0.6); padding: 1.25rem 0; z-index: 1000; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .d-nav__inner { max-width: 1400px; margin: 0 auto; padding: 0 3rem; display: flex; justify-content: space-between; align-items: center; } .d-nav__logo img { max-width: 200px; display: block; } .d-nav__logo { text-decoration: none; } .d-nav__links { display: flex; gap: 2.5rem; align-items: center; } .d-nav__link { color: var(--gray-600); text-decoration: none; font-weight: 500; font-size: 0.9375rem; transition: color 0.2s; } .d-nav__link:hover { color: var(--navy); } .d-nav__badge { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 0.25rem 0.75rem; border-radius: 999px; color: var(--accent); border: 1px solid var(--accent); background: transparent; } /* ── HAMBURGER ── */ .d-hamburger-btn { display: none; background: none; border: none; cursor: pointer; width: 32px; height: 32px; flex-direction: column; justify-content: center; gap: 5px; padding: 0.25rem; } .d-hamburger-btn span { display: block; width: 24px; height: 2px; background: var(--navy); transition: all 0.3s; } .d-hamburger-btn.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .d-hamburger-btn.is-open span:nth-child(2) { opacity: 0; } .d-hamburger-btn.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── MOBILE MENU ── */ .d-mobile-menu { display: none; position: fixed; top: 73px; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(20px); border-bottom: 1px solid var(--gray-200); box-shadow: 0 4px 12px rgba(0,0,0,0.08); max-height: 0; overflow: hidden; transition: max-height 0.3s ease; z-index: 999; } .d-mobile-menu.is-open { max-height: 400px; } .d-mobile-menu a { display: block; padding: 1rem 1.5rem; color: var(--gray-600); text-decoration: none; font-weight: 500; border-bottom: 1px solid var(--gray-100); } .d-mobile-menu a:last-child { border-bottom: none; } /* ── BUTTONS ── */ .d-btn { background: var(--accent); color: white; padding: 0.75rem 1.5rem; border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 0.9375rem; border: none; cursor: pointer; display: inline-block; transition: all 0.2s; white-space: nowrap; } .d-btn:hover { filter: brightness(0.88); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,0.18); } .d-btn--lg { padding: 1rem 2rem; font-size: 1rem; } .d-btn--white { background: white; color: var(--navy); } .d-btn--white:hover { background: var(--gray-100); filter: none; box-shadow: 0 8px 24px rgba(255,255,255,0.2); } .d-btn--outline { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.35); } .d-btn--outline:hover { background: rgba(255,255,255,0.08); filter: none; box-shadow: none; transform: translateY(-1px); } .d-btn--ghost { background: transparent; color: var(--navy); border: 2px solid var(--gray-200); } .d-btn--ghost:hover { background: var(--gray-50); border-color: var(--gray-400); filter: none; box-shadow: none; } /* ── HERO ── */ .d-hero { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%); color: white; padding: 10rem 3rem 6rem; position: relative; overflow: hidden; } .d-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(37,99,235,0.15) 0%, transparent 50%), radial-gradient(circle at 80% 70%, rgba(139,92,246,0.12) 0%, transparent 50%); pointer-events: none; } body.audience-public .d-hero::before { background: radial-gradient(circle at 20% 30%, rgba(16,185,129,0.18) 0%, transparent 50%), radial-gradient(circle at 75% 65%, rgba(6,182,212,0.12) 0%, transparent 50%); } body.audience-advocate .d-hero::before { background: radial-gradient(circle at 20% 30%, rgba(139,92,246,0.20) 0%, transparent 50%), radial-gradient(circle at 75% 65%, rgba(244,63,94,0.10) 0%, transparent 50%); } .d-hero__inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; } .d-hero__label { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(37,99,235,0.15); border: 1px solid rgba(96,165,250,0.30); padding: 0.5rem 1rem; border-radius: 20px; font-size: 0.875rem; font-weight: 600; margin-bottom: 2rem; color: var(--blue-lt); } body.audience-public .d-hero__label { background: rgba(16,185,129,0.15); border-color: rgba(52,211,153,0.30); color: var(--green-lt); } body.audience-advocate .d-hero__label { background: rgba(139,92,246,0.15); border-color: rgba(167,139,250,0.30); color: var(--purple-lt); } .d-hero__h1 { max-width: 700px; font-size: 4.5rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.04em; margin-bottom: 1.5rem; } .d-hero__sub { max-width: 660px; font-size: 1.375rem; line-height: 1.55; color: rgba(255,255,255,0.85); margin-bottom: 1rem; } .d-hero__eyebrow { max-width: 660px; font-size: 1rem; color: rgba(255,255,255,0.55); font-weight: 600; margin-bottom: 3rem; } .d-hero__cta { display: flex; gap: 1rem; flex-wrap: wrap; } /* ── PRODUCT WINDOW ── */ .d-window-wrap { max-width: 1400px; margin: -3rem auto 0; padding: 0 3rem; position: relative; z-index: 2; } .d-window { background: white; border-radius: 16px; box-shadow: 0 40px 100px rgba(0,0,0,0.28); overflow: hidden; border: 1px solid var(--gray-200); } .d-window__chrome { background: var(--gray-50); padding: 1rem 1.5rem; border-bottom: 1px solid var(--gray-200); display: flex; align-items: center; gap: 0.5rem; } .d-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--gray-300); flex-shrink: 0; } .d-window__title { font-weight: 600; font-size: 0.875rem; color: var(--gray-600); margin-left: 0.75rem; } .d-window__body { padding: 3rem; background: white; min-height: 400px; } /* ── POLL CARD ── */ .d-poll-card { background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 12px; padding: 2rem; } .d-poll-card__header { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; } .d-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent2)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 700; font-size: 1.125rem; flex-shrink: 0; } .d-poll-card__meta { flex: 1; } .d-poll-card__meta strong { display: block; font-weight: 700; color: var(--navy); } .d-poll-card__meta span { font-size: 0.875rem; color: var(--gray-600); } .d-bill-tag { background: var(--navy); color: white; padding: 0.375rem 0.875rem; border-radius: 6px; font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; } .d-poll-card__title { font-size: 1.375rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; } .d-poll-card__body { color: var(--gray-600); font-size: 1.0625rem; line-height: 1.6; margin-bottom: 1.5rem; } .d-poll-options { display: grid; gap: 0.75rem; } .d-poll-option { background: white; border: 2px solid var(--gray-200); border-radius: 8px; padding: 1.125rem 1.5rem; display: flex; justify-content: space-between; align-items: center; position: relative; overflow: hidden; cursor: pointer; transition: border-color 0.2s; } .d-poll-option:hover { border-color: var(--accent); } .d-poll-option__fill { position: absolute; top: 0; left: 0; bottom: 0; background: linear-gradient(90deg, rgba(37,99,235,0.06), rgba(96,165,250,0.06)); transition: width 1.2s cubic-bezier(0.4,0,0.2,1); } body.audience-public .d-poll-option__fill { background: linear-gradient(90deg,rgba(16,185,129,0.07),rgba(52,211,153,0.07)); } body.audience-advocate .d-poll-option__fill { background: linear-gradient(90deg,rgba(139,92,246,0.07),rgba(167,139,250,0.07)); } .d-poll-option__label { position: relative; font-weight: 600; color: var(--navy); } .d-poll-option__pct { position: relative; font-weight: 800; font-size: 1.25rem; color: var(--accent); } .d-poll-card__footer { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); display: flex; gap: 2rem; font-size: 0.9375rem; color: var(--gray-600); flex-wrap: wrap; } /* ── SECTION SHELL ── */ .d-section { padding: 8rem 3rem; background: white; } .d-section--alt { background: var(--gray-50); } .d-section--dark { background: linear-gradient(180deg, var(--navy) 0%, var(--navy-mid) 100%); color: white; position: relative; overflow: hidden; } .d-section--dark::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 50%, rgba(37,99,235,0.10) 0%, transparent 55%); pointer-events: none; } .d-section__inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; } .d-section__intro { max-width: 800px; margin: 0 auto 5rem; text-align: center; } .d-section__intro--left { text-align: left; margin-left: 0; } .d-tag { display: block; color: var(--accent); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em; margin-bottom: 1rem; } .d-section--dark .d-tag { color: var(--accent2); } .d-h2 { font-size: 3.5rem; font-weight: 900; line-height: 1.1; letter-spacing: -0.03em; color: var(--navy); margin-bottom: 1.5rem; } .d-section--dark .d-h2 { color: white; } .d-sub { font-size: 1.375rem; line-height: 1.6; color: var(--gray-600); } .d-section--dark .d-sub { color: rgba(255,255,255,0.80); } /* ── CARD GRIDS ── */ .d-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; } .d-grid-2 { display: grid; grid-template-columns: repeat(2,1fr); gap: 2rem; } .d-card { background: white; padding: 2.75rem; border-radius: 16px; border: 1px solid var(--gray-200); box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.05); transition: box-shadow 0.2s, transform 0.2s; } .d-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-2px); } .d-section--alt .d-card { background: white; } .d-card__icon { width: 64px; height: 64px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 1.5rem; } .d-card h3 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 1rem; line-height: 1.3; } .d-card p { color: var(--gray-600); line-height: 1.7; font-size: 1.0625rem; margin-bottom: 1.5rem; } .d-quote { background: var(--gray-50); border-left: 3px solid var(--accent); padding: 1.25rem; border-radius: 0 6px 6px 0; font-size: 0.9375rem; color: var(--gray-900); font-style: italic; line-height: 1.6; } /* ── STEPS ── */ .d-steps { display: grid; gap: 4rem; } .d-step { display: grid; grid-template-columns: 100px 1fr; gap: 3rem; align-items: start; } .d-step__num { width: 100px; height: 100px; background: linear-gradient(135deg, var(--accent), var(--accent2)); color: white; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 900; flex-shrink: 0; box-shadow: 0 10px 30px rgba(37,99,235,0.25); } .d-step__body h3 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; color: white; } .d-step__body p { font-size: 1.125rem; line-height: 1.7; color: rgba(255,255,255,0.80); margin-bottom: 1.5rem; } .d-step__quote { background: rgba(255,255,255,0.06); border-left: 3px solid var(--accent2); padding: 1.5rem; border-radius: 0 8px 8px 0; font-size: 1rem; line-height: 1.6; font-style: italic; color: rgba(255,255,255,0.85); } /* ── STATS BAR ── */ .d-stats { background: var(--navy-light); padding: 3rem; } .d-stats__inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; } .d-stat { text-align: center; padding: 1.5rem 2rem; } .d-stat__num { font-size: 3.5rem; font-weight: 900; color: white; letter-spacing: -0.04em; line-height: 1; margin-bottom: 0.5rem; } .d-stat__num em { color: var(--accent2); font-style: normal; } .d-stat__label { font-size: 0.8125rem; color: rgba(255,255,255,0.55); font-weight: 500; text-transform: uppercase; letter-spacing: 0.06em; max-width: 200px; margin: 0 auto; line-height: 1.5; } /* ── FIREWALL DIAGRAM (advocate page) ── */ .d-firewall { display: grid; grid-template-columns: 1fr 64px 1fr; border-radius: 16px; overflow: hidden; border: 1px solid var(--gray-200); box-shadow: 0 20px 60px rgba(0,0,0,0.10); margin-top: 3rem; } .d-firewall__panel { padding: 3rem; background: white; } .d-firewall__panel--dark { background: var(--navy); color: white; } .d-firewall__wall { background: linear-gradient(180deg, var(--blue) 0%, var(--purple) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 2rem 0; } .d-firewall__wall-icon { font-size: 1.75rem; } .d-firewall__wall-label { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.6875rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.80); } .d-firewall__panel h3 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; } .d-firewall__panel--dark h3 { color: white; } .d-firewall__panel > p { font-size: 1.0625rem; line-height: 1.6; color: var(--gray-600); margin-bottom: 1.5rem; } .d-firewall__panel--dark > p { color: rgba(255,255,255,0.70); } .d-firewall__list { list-style: none; display: grid; gap: 0.625rem; } .d-firewall__list li { display: flex; gap: 0.5rem; font-size: 0.9375rem; color: var(--gray-600); align-items: flex-start; line-height: 1.5; } .d-firewall__panel--dark .d-firewall__list li { color: rgba(255,255,255,0.70); } .d-firewall__list li::before { content: "✓"; color: var(--accent); font-weight: 700; flex-shrink: 0; } /* ── FORM ── */ .d-form-wrap { max-width: 540px; margin: 0 auto; background: white; border: 2px solid var(--gray-200); border-radius: 16px; padding: 2.5rem; } .d-form-wrap h3 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; } .d-form-wrap > p { font-size: 0.9375rem; color: var(--gray-600); margin-bottom: 2rem; } .d-field { margin-bottom: 1.25rem; } .d-label { display: block; font-size: 0.875rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; } .d-input, .d-select, .d-textarea { width: 100%; padding: 0.875rem 1rem; border: 2px solid var(--gray-200); border-radius: 8px; font-size: 1rem; color: var(--gray-900); background: white; font-family: inherit; transition: border-color 0.2s; } .d-input:focus, .d-select:focus, .d-textarea:focus { outline: none; border-color: var(--accent); } .d-textarea { resize: vertical; } .d-form-submit { width: 100%; padding: 1rem; background: var(--accent); color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 700; cursor: pointer; font-family: inherit; transition: all 0.2s; margin-top: 0.5rem; } .d-form-submit:hover { filter: brightness(0.88); transform: translateY(-1px); } /* ── CTA BANNER ── */ .d-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); color: white; padding: 8rem 3rem; text-align: center; position: relative; overflow: hidden; } .d-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(37,99,235,0.15) 0%, transparent 60%); pointer-events: none; } body.audience-public .d-cta::before { background: radial-gradient(circle at 50% 50%, rgba(16,185,129,0.15) 0%, transparent 60%); } body.audience-advocate .d-cta::before { background: radial-gradient(circle at 50% 50%, rgba(139,92,246,0.15) 0%, transparent 60%); } .d-cta__inner { max-width: 780px; margin: 0 auto; position: relative; } .d-cta__inner h2 { font-size: 3.5rem; font-weight: 900; line-height: 1.15; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .d-cta__inner p { font-size: 1.375rem; color: rgba(255,255,255,0.85); line-height: 1.6; margin-bottom: 3rem; } .d-cta__btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── FOOTER ── */ .d-footer { background: var(--navy); color: white; padding: 5rem 3rem 3rem; } .d-footer__inner { max-width: 1400px; margin: 0 auto 4rem; display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 4rem; } .d-footer__brand h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; } .d-footer__brand p { color: rgba(255,255,255,0.60); line-height: 1.7; margin-bottom: 1rem; } .d-footer__brand small { color: rgba(255,255,255,0.40); font-size: 0.875rem; } .d-footer__col h4 { font-weight: 700; margin-bottom: 1.5rem; font-size: 1rem; } .d-footer__col a { color: rgba(255,255,255,0.55); text-decoration: none; display: block; margin-bottom: 0.75rem; font-size: 0.9375rem; transition: color 0.2s; } .d-footer__col a:hover { color: white; } .d-footer__bottom { max-width: 1400px; margin: 0 auto; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.10); text-align: center; color: rgba(255,255,255,0.40); font-size: 0.875rem; } /* ── RESPONSIVE ── */ @media (max-width: 1200px) { .d-grid-3 { grid-template-columns: 1fr; } .d-footer__inner { grid-template-columns: 1fr; gap: 2.5rem; } .d-h2 { font-size: 2.75rem; } .d-hero__h1 { font-size: 3.5rem; } .d-step { grid-template-columns: 80px 1fr; gap: 2rem; } .d-step__num { width: 80px; height: 80px; font-size: 2.5rem; } .d-firewall { grid-template-columns: 1fr; } .d-firewall__wall { flex-direction: row; padding: 1rem 2rem; min-height: 60px; } .d-firewall__wall-label { writing-mode: horizontal-tb; transform: none; } } @media (max-width: 768px) { .d-nav__inner { padding: 0 1.5rem; } .d-nav__links { display: none; } .d-hamburger-btn { display: flex; } .d-mobile-menu { display: block; } .d-hero { padding: 7rem 1.5rem 4rem; } .d-hero__h1 { font-size: 2.5rem; } .d-hero__sub { font-size: 1.125rem; } .d-hero__cta { flex-direction: column; } .d-window-wrap { padding: 0 1.5rem; } .d-window__body { padding: 1.5rem; } .d-section { padding: 4rem 1.5rem; } .d-section--dark { padding: 4rem 1.5rem; } .d-section--alt { padding: 4rem 1.5rem; } .d-h2 { font-size: 2.25rem; } .d-cta { padding: 4rem 1.5rem; } .d-cta__inner h2 { font-size: 2.25rem; } .d-footer { padding: 4rem 1.5rem 2rem; } .d-stats { padding: 2rem 1.5rem; } .d-stats__inner { flex-direction: column; align-items: center; } .d-stat__num { font-size: 2.75rem; } .d-grid-2 { grid-template-columns: 1fr; } .d-poll-card__footer { flex-direction: column; gap: 0.5rem; } .d-form-wrap { padding: 1.75rem; } } /* ── EMAIL BAR ── */ .d-email-bar { display: flex; max-width: 480px; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.25); } .d-email-bar input[type=email] { flex: 1; min-width: 0; padding: 0.9rem 1.25rem; border: none; font-size: 1rem; color: var(--navy); font-family: inherit; outline: none; background: white; } .d-email-bar button { background: var(--green); color: white; border: none; padding: 0.9rem 1.5rem; font-size: 0.9375rem; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.2s; flex-shrink: 0; } .d-email-bar button:hover { background: var(--green-lt); } .d-email-bar button:disabled { opacity: 0.6; cursor: default; } .d-email-bar__fine { margin-top: 0.75rem; font-size: 0.8125rem; color: rgba(255,255,255,0.45); letter-spacing: 0.02em; } .d-email-bar__success { margin-top: 0.75rem; font-size: 0.9375rem; font-weight: 600; color: var(--green-lt); } /* CTA section email bar variant */ .d-cta .d-email-bar { margin: 0 auto; box-shadow: 0 4px 20px rgba(0,0,0,0.4); } .d-cta .d-email-bar__fine { text-align: center; } .d-cta .d-email-bar__success { text-align: center; color: var(--green-lt); } @media (max-width: 768px) { .d-email-bar { flex-direction: column; border-radius: 8px; max-width: 100%; } .d-email-bar input[type=email] { border-radius: 8px 8px 0 0; } .d-email-bar button { border-radius: 0 0 8px 8px; padding: 0.9rem; } } /* ── SOCIAL ICONS ── */ .d-footer__social { display: flex; gap: 1.25rem; margin-top: 1.5rem; } .d-footer__social a { color: rgba(255,255,255,0.40); /* Matches your 'small' text color */ font-size: 1.25rem; transition: all 0.2s ease; text-decoration: none; } .d-footer__social a:hover { color: var(--accent); /* Changes based on audience-gov, public, or advocate */ transform: translateY(-3px); } /* ── MEETING CTA SECTION ── */ .d-meeting-cta { background: linear-gradient(135deg, #0A1628 0%, #1A2744 100%); padding: 5rem 2rem; position: relative; overflow: hidden; } .d-meeting-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #ef4444, #2563eb); } .d-meeting-cta__inner { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .d-meeting-cta__label { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; color: #ef4444; text-transform: uppercase; margin-bottom: 0.75rem; } .d-meeting-cta__left h2 { font-size: 2.2rem; font-weight: 800; color: #fff; line-height: 1.2; margin-bottom: 1rem; } .d-meeting-cta__left p { font-size: 1.05rem; color: #94a3b8; line-height: 1.6; margin-bottom: 1.5rem; } .d-meeting-cta__btns { display: flex; gap: 0.875rem; flex-wrap: wrap; margin-bottom: 1.25rem; } .d-btn--primary { background: #2563eb; color: #fff; border: 2px solid #2563eb; } .d-btn--primary:hover { background: #1d4ed8; border-color: #1d4ed8; } .d-meeting-cta__proof { display: flex; flex-direction: column; gap: 0.3rem; } .d-meeting-cta__proof span { font-size: 0.8rem; color: #64748b; } /* Right side card */ .d-meeting-cta__card { background: #111827; border: 1px solid #1e2a3a; border-radius: 14px; padding: 1.5rem; } .d-meeting-cta__card-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; color: #ef4444; text-transform: uppercase; margin-bottom: 0.75rem; } .d-meeting-cta__card-title { font-size: 1.05rem; font-weight: 700; color: #f1f5f9; line-height: 1.4; margin-bottom: 1.25rem; } .d-meeting-cta__bar-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.6rem; } .d-meeting-cta__bar-row span { font-size: 0.8rem; color: #94a3b8; width: 120px; flex-shrink: 0; } .d-meeting-cta__bar-row strong { font-size: 0.8rem; color: #e2e8f0; width: 2.5rem; text-align: right; flex-shrink: 0; } .d-bar-track { flex: 1; height: 8px; background: #1e2a3a; border-radius: 4px; overflow: hidden; } .d-bar-fill { height: 100%; border-radius: 4px; transition: width 0.6s ease; } .d-meeting-cta__card-foot { margin-top: 1rem; font-size: 0.78rem; color: #64748b; } .d-meeting-cta__card-foot a { color: #60a5fa; text-decoration: none; } .d-meeting-cta__card-foot a:hover { text-decoration: underline; } @media (max-width: 768px) { .d-meeting-cta__inner { grid-template-columns: 1fr; gap: 2rem; } .d-meeting-cta__left h2 { font-size: 1.75rem; } .d-meeting-cta__right { order: -1; } .d-meeting-cta__btns { flex-direction: column; } .d-meeting-cta__btns .d-btn { text-align: center; } .d-meeting-cta__bar-row span { width: 100px; font-size: 0.75rem; } }