/* ========================================================================== Amex Layover Display — marketing site (c) Cybria Enterprises LLC ========================================================================== */ :root { --navy: #002663; --navy-dark: #001a47; --navy-light: #1a3e80; --blue: #006fcf; --blue-light: #2e8bdc; --orange: #e07a00; --orange-light: #ffe4c4; --green: #0c8a4a; --red: #c0392b; --bg: #f1f5f9; --bg-soft: #e2e8f0; --bg-card: #f8fafc; --border: #cbd5e1; --text: #141a28; --text-muted: #5b6477; --text-subtle: #8a94a8; --shadow-sm: 0 1px 2px rgba(10, 22, 50, 0.05), 0 1px 3px rgba(10, 22, 50, 0.08); --shadow-md: 0 4px 10px rgba(10, 22, 50, 0.06), 0 8px 24px rgba(10, 22, 50, 0.08); --shadow-lg: 0 20px 40px rgba(10, 22, 50, 0.12); --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --max-width: 1140px; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, "Helvetica Neue", Arial, sans-serif; } /* ---------- Dark mode ---------- */ /* Manual toggle: JS sets data-theme="dark" on */ /* Auto: follows system via prefers-color-scheme when no data-theme is set */ [data-theme="dark"] { --bg: #111827; --bg-soft: #1a2236; --bg-card: #1e293b; --border: #2d3a50; --text: #e2e8f0; --text-muted: #94a3b8; --text-subtle: #64748b; --navy: #93c5fd; --navy-dark: #60a5fa; --navy-light: #3b82f6; --blue: #60a5fa; --blue-light: #93c5fd; --orange: #fbbf24; --orange-light: #3b2e10; --green: #4ade80; --red: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.3); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #111827; --bg-soft: #1a2236; --bg-card: #1e293b; --border: #2d3a50; --text: #e2e8f0; --text-muted: #94a3b8; --text-subtle: #64748b; --navy: #93c5fd; --navy-dark: #60a5fa; --navy-light: #3b82f6; --blue: #60a5fa; --blue-light: #93c5fd; --orange: #fbbf24; --orange-light: #3b2e10; --green: #4ade80; --red: #f87171; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.3); --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.4); } } /* Hardcoded colors that don't use variables need explicit dark overrides */ [data-theme="dark"] .site-header { background: rgba(17, 24, 39, 0.92); } [data-theme="dark"] .brand { color: #e2e8f0; } [data-theme="dark"] .nav-links a { color: #e2e8f0; } [data-theme="dark"] .nav-toggle { color: #e2e8f0; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #f1f5f9; } [data-theme="dark"] code { background: #1a2236; border-color: #2d3a50; color: #93c5fd; } [data-theme="dark"] .section-dark { background: #0a0f1a; } [data-theme="dark"] .feature-card, [data-theme="dark"] .step, [data-theme="dark"] .price-card, [data-theme="dark"] .channel, [data-theme="dark"] .landing-showcase-img { background: #1e293b; border-color: #2d3a50; } [data-theme="dark"] .feature-card:hover { background: #263050; border-color: #3b5080; } [data-theme="dark"] .feature-icon { background: rgba(96, 165, 250, 0.15); color: #93c5fd; } [data-theme="dark"] .note { background: #162036; border-left-color: #3b82f6; color: #93c5fd; } [data-theme="dark"] .legal-hero { background: linear-gradient(180deg, #111827 0%, #111827 100%); } [data-theme="dark"] .hero { background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,0.15), transparent 60%), radial-gradient(900px 500px at 100% 10%, rgba(251,191,36,0.1), transparent 60%), linear-gradient(180deg, #111827 0%, #111827 100%); } [data-theme="dark"] .cookie-banner, [data-theme="dark"] .cookie-modal { background: #1e293b; border-color: #2d3a50; color: #e2e8f0; } [data-theme="dark"] .cookie-category { border-color: #2d3a50; } [data-theme="dark"] .cookie-banner h3, [data-theme="dark"] .cookie-modal h3 { color: #f1f5f9; } [data-theme="dark"] .btn-ghost { border-color: #2d3a50; color: #e2e8f0; } [data-theme="dark"] .btn-ghost:hover { background: #1a2236; border-color: #93c5fd; color: #93c5fd; } [data-theme="dark"] .btn-primary { background: #3b82f6; color: #fff; } [data-theme="dark"] .btn-primary:hover { background: #2563eb; color: #fff; } [data-theme="dark"] .landing-hero-btn { background: #fff !important; color: #1e3a5f !important; } [data-theme="dark"] .docs-content table th { background: #1a2236; color: #93c5fd; } [data-theme="dark"] .showcase .image-frame { background: #1e293b; } [data-theme="dark"] .step::before { background: #3b82f6; } [data-theme="dark"] .showcase ul li { color: #e2e8f0; } [data-theme="dark"] .landing-showcase-copy ul li { color: #e2e8f0; } [data-theme="dark"] .price-card ul li { color: #e2e8f0; } [data-theme="dark"] .toggle .slider { background: #475569; } /* Auto dark via system preference */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .site-header { background: rgba(17, 24, 39, 0.92); } :root:not([data-theme="light"]) .brand { color: #e2e8f0; } :root:not([data-theme="light"]) .nav-links a { color: #e2e8f0; } :root:not([data-theme="light"]) .nav-toggle { color: #e2e8f0; } :root:not([data-theme="light"]) h1, :root:not([data-theme="light"]) h2, :root:not([data-theme="light"]) h3, :root:not([data-theme="light"]) h4 { color: #f1f5f9; } :root:not([data-theme="light"]) code { background: #1a2236; border-color: #2d3a50; color: #93c5fd; } :root:not([data-theme="light"]) .section-dark { background: #0a0f1a; } :root:not([data-theme="light"]) .feature-card, :root:not([data-theme="light"]) .step, :root:not([data-theme="light"]) .price-card, :root:not([data-theme="light"]) .channel, :root:not([data-theme="light"]) .landing-showcase-img { background: #1e293b; border-color: #2d3a50; } :root:not([data-theme="light"]) .feature-card:hover { background: #263050; border-color: #3b5080; } :root:not([data-theme="light"]) .feature-icon { background: rgba(96, 165, 250, 0.15); color: #93c5fd; } :root:not([data-theme="light"]) .note { background: #162036; border-left-color: #3b82f6; color: #93c5fd; } :root:not([data-theme="light"]) .legal-hero { background: linear-gradient(180deg, #111827 0%, #111827 100%); } :root:not([data-theme="light"]) .hero { background: radial-gradient(1200px 600px at 20% -10%, rgba(59,130,246,0.15), transparent 60%), radial-gradient(900px 500px at 100% 10%, rgba(251,191,36,0.1), transparent 60%), linear-gradient(180deg, #111827 0%, #111827 100%); } :root:not([data-theme="light"]) .cookie-banner, :root:not([data-theme="light"]) .cookie-modal { background: #1e293b; border-color: #2d3a50; color: #e2e8f0; } :root:not([data-theme="light"]) .cookie-category { border-color: #2d3a50; } :root:not([data-theme="light"]) .cookie-banner h3, :root:not([data-theme="light"]) .cookie-modal h3 { color: #f1f5f9; } :root:not([data-theme="light"]) .btn-ghost { border-color: #2d3a50; color: #e2e8f0; } :root:not([data-theme="light"]) .btn-ghost:hover { background: #1a2236; border-color: #93c5fd; color: #93c5fd; } :root:not([data-theme="light"]) .btn-primary { background: #3b82f6; color: #fff; } :root:not([data-theme="light"]) .btn-primary:hover { background: #2563eb; color: #fff; } :root:not([data-theme="light"]) .landing-hero-btn { background: #fff !important; color: #1e3a5f !important; } :root:not([data-theme="light"]) .docs-content table th { background: #1a2236; color: #93c5fd; } :root:not([data-theme="light"]) .showcase .image-frame { background: #1e293b; } :root:not([data-theme="light"]) .step::before { background: #3b82f6; } :root:not([data-theme="light"]) .showcase ul li { color: #e2e8f0; } :root:not([data-theme="light"]) .landing-showcase-copy ul li { color: #e2e8f0; } :root:not([data-theme="light"]) .price-card ul li { color: #e2e8f0; } :root:not([data-theme="light"]) .toggle .slider { background: #475569; } } /* Mobile nav dark */ @media (max-width: 860px) { [data-theme="dark"] .nav-links { background: #1e293b; border-bottom-color: #2d3a50; } } @media (max-width: 860px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nav-links { background: #1e293b; border-bottom-color: #2d3a50; } } /* Dark mode toggle button */ .theme-toggle { background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; color: var(--text-muted); transition: background 0.15s, border-color 0.15s, color 0.15s; padding: 0; line-height: 1; } .theme-toggle:hover { background: var(--bg-soft); border-color: var(--blue); color: var(--blue); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--blue); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--navy); } img { max-width: 100%; display: block; } h1, h2, h3, h4 { font-weight: 700; color: var(--navy); line-height: 1.2; margin: 0 0 0.6em; } h1 { font-size: clamp(2rem, 4vw + 0.5rem, 3.25rem); letter-spacing: -0.02em; } h2 { font-size: clamp(1.5rem, 2vw + 0.75rem, 2.1rem); letter-spacing: -0.01em; } h3 { font-size: 1.2rem; } p { margin: 0 0 1em; } code, pre { font-family: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; font-size: 0.92em; } code { background: var(--bg-soft); padding: 2px 6px; border-radius: 4px; border: 1px solid var(--border); color: var(--navy); } pre { background: #0b1730; color: #d6e4ff; padding: 18px 22px; border-radius: var(--radius); overflow-x: auto; line-height: 1.55; box-shadow: var(--shadow-sm); } pre code { background: transparent; border: none; color: inherit; padding: 0; } .container { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 24px; } /* ---------- Header / Nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(241, 245, 249, 0.92); backdrop-filter: saturate(180%) blur(10px); -webkit-backdrop-filter: saturate(180%) blur(10px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--navy); font-size: 1.05rem; letter-spacing: -0.01em; } .brand-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 14px; font-weight: 800; box-shadow: var(--shadow-sm); } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; padding: 0; margin: 0; } .nav-links a { color: var(--text); font-weight: 500; font-size: 0.95rem; } .nav-links a:hover { color: var(--navy); } .nav-cta { display: inline-flex; } .nav-links .nav-cta a.btn-primary, .nav-links .nav-cta a.btn-primary:hover, .nav-links .nav-cta a.btn-primary:visited { color: #fff !important; } .nav-toggle { display: none; background: transparent; border: 1px solid var(--border); border-radius: 8px; width: 40px; height: 40px; cursor: pointer; color: var(--navy); } @media (max-width: 860px) { .nav-links { position: absolute; top: 68px; left: 0; right: 0; background: var(--bg-card); flex-direction: column; gap: 0; border-bottom: 1px solid var(--border); box-shadow: var(--shadow-md); display: none; } .nav-links.open { display: flex; } .nav-links li { width: 100%; border-top: 1px solid var(--border); } .nav-links a { display: block; padding: 16px 24px; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 0.95rem; padding: 12px 22px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform 0.1s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease; white-space: nowrap; } .btn-primary { background: var(--navy); color: #fff; box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--navy-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--border); } .btn-ghost:hover { border-color: var(--navy); color: var(--navy); background: var(--bg-soft); } .btn-accent { background: var(--orange); color: #fff; } .btn-accent:hover { background: #c66900; color: #fff; } /* ---------- Hero ---------- */ .hero { position: relative; padding: 90px 0 70px; background: radial-gradient( 1200px 600px at 20% -10%, rgba(0, 111, 207, 0.12), transparent 60% ), radial-gradient( 900px 500px at 100% 10%, rgba(224, 122, 0, 0.1), transparent 60% ), linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%); } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; color: var(--orange); background: var(--orange-light); padding: 6px 12px; border-radius: 999px; margin-bottom: 18px; } .hero h1 span.accent { color: var(--orange); display: inline-block; } .hero p.lede { font-size: 1.15rem; color: var(--text-muted); max-width: 560px; margin-bottom: 30px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; } .hero-meta { display: flex; gap: 24px; color: var(--text-subtle); font-size: 0.9rem; flex-wrap: wrap; } .hero-meta span::before { content: "✓"; color: var(--green); font-weight: 700; margin-right: 6px; } .hero-visual { position: relative; } .hero-visual .image-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); background: var(--bg-card); transform: rotate(-0.5deg); } .hero-visual .image-frame img { width: 100%; height: auto; } .hero-visual .image-frame.secondary { position: absolute; bottom: -42px; right: -12px; width: 46%; transform: rotate(2deg); border-radius: var(--radius); } @media (max-width: 900px) { .hero { padding: 60px 0 50px; } .hero-grid { grid-template-columns: 1fr; gap: 50px; } .hero-visual .image-frame.secondary { width: 55%; bottom: -24px; } } /* ---------- Sections ---------- */ .section { padding: 80px 0; } .section-soft { background: var(--bg-soft); } .section-dark { background: var(--navy); color: #fff; } .section-dark h1, .section-dark h2, .section-dark h3 { color: #fff; } .section-dark p { color: #c9d3e8; } .section-header { text-align: center; max-width: 720px; margin: 0 auto 54px; } .section-header .eyebrow { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue); font-weight: 700; margin-bottom: 12px; } .section-header p { color: var(--text-muted); font-size: 1.05rem; } /* ---------- Features ---------- */ .features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .feature-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; box-shadow: var(--shadow-sm); transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: #c9d4e8; } .feature-icon { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(0, 111, 207, 0.12), rgba(0, 38, 99, 0.08)); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 16px; } .feature-card h3 { margin-bottom: 8px; font-size: 1.08rem; } .feature-card p { color: var(--text-muted); font-size: 0.95rem; margin: 0; } @media (max-width: 900px) { .features-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .features-grid { grid-template-columns: 1fr; } } /* ---------- How It Works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; counter-reset: step; } .step { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 26px; position: relative; } .step::before { counter-increment: step; content: counter(step); position: absolute; top: -18px; left: 26px; width: 36px; height: 36px; border-radius: 50%; background: var(--navy); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); } .step h3 { margin-top: 14px; margin-bottom: 8px; } .step p { color: var(--text-muted); margin: 0; } @media (max-width: 860px) { .steps { grid-template-columns: 1fr; } } /* ---------- Showcase screenshots ---------- */ .showcase { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; } .showcase .image-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); background: var(--bg-card); } .showcase .showcase-copy h2 { margin-bottom: 16px; } .showcase .showcase-copy p { color: var(--text-muted); font-size: 1.02rem; } .showcase ul { padding-left: 0; list-style: none; margin: 20px 0 0; } .showcase ul li { padding: 10px 0 10px 28px; position: relative; color: var(--text); } .showcase ul li::before { content: "→"; color: var(--orange); position: absolute; left: 0; font-weight: 700; } @media (max-width: 900px) { .showcase { grid-template-columns: 1fr; } } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .price-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 34px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; } .price-card.popular { border-color: var(--navy); box-shadow: 0 6px 20px rgba(0, 38, 99, 0.15); transform: translateY(-4px); } .price-card.popular::after { content: "Most popular"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 5px 14px; border-radius: 999px; } .price-card h3 { font-size: 1.1rem; margin-bottom: 6px; } .price-card .price { font-size: 2.2rem; font-weight: 800; color: var(--navy); margin: 8px 0 6px; letter-spacing: -0.02em; } .price-card .price small { font-size: 0.95rem; font-weight: 500; color: var(--text-subtle); } .price-card .desc { color: var(--text-muted); margin-bottom: 18px; min-height: 44px; } .price-card ul { padding-left: 0; list-style: none; margin: 0 0 24px; flex: 1; } .price-card ul li { padding: 6px 0 6px 24px; position: relative; color: var(--text); font-size: 0.95rem; } .price-card ul li::before { content: "✓"; color: var(--green); font-weight: 700; position: absolute; left: 0; } .price-card ul li.off::before { content: "—"; color: var(--text-subtle); } .price-card ul li.off { color: var(--text-subtle); } @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } .price-card.popular { transform: none; } } /* ---------- Release channels ---------- */ .channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .channel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px; position: relative; overflow: hidden; } .channel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; } .channel.alpha::before { background: linear-gradient(90deg, #a855f7, #d946ef); } .channel.beta::before { background: linear-gradient(90deg, #0ea5e9, #06b6d4); } .channel.prod::before { background: linear-gradient(90deg, #10b981, #059669); } .channel .tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 14px; } .channel.alpha .tag { background: #f3e8ff; color: #6b21a8; } .channel.beta .tag { background: #e0f2fe; color: #075985; } .channel.prod .tag { background: #d1fae5; color: #065f46; } .channel h3 { margin-bottom: 8px; } .channel p { color: var(--text-muted); margin: 0 0 14px; } .channel ul { padding-left: 18px; margin: 0; color: var(--text-muted); } .channel ul li { margin-bottom: 6px; } @media (max-width: 900px) { .channels { grid-template-columns: 1fr; } } /* ---------- CTA band ---------- */ .cta-band { background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%); color: #fff; border-radius: var(--radius-lg); padding: 48px 40px; display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow-lg); } .cta-band h2 { color: #fff; margin-bottom: 8px; } .cta-band p { margin: 0; color: #c9d6ec; } .cta-band .btn-primary { background: #fff; color: var(--navy); } .cta-band .btn-primary:hover { background: #f6f8fb; color: var(--navy); } @media (max-width: 780px) { .cta-band { flex-direction: column; text-align: center; padding: 40px 28px; } } /* ---------- Docs / API pages ---------- */ .docs-layout { display: grid; grid-template-columns: 240px 1fr; gap: 48px; padding: 60px 0 80px; } .docs-sidebar { position: sticky; top: 96px; align-self: start; border-right: 1px solid var(--border); padding-right: 24px; } .docs-sidebar h4 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-subtle); margin: 20px 0 8px; } .docs-sidebar ul { list-style: none; padding: 0; margin: 0 0 20px; } .docs-sidebar li a { display: block; padding: 6px 0; color: var(--text-muted); font-size: 0.93rem; } .docs-sidebar li a:hover { color: var(--navy); } .docs-content { max-width: 760px; } .docs-content h2 { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--border); } .docs-content h2:first-child { border-top: none; padding-top: 0; margin-top: 0; } .docs-content h3 { margin-top: 26px; } .docs-content ul, .docs-content ol { color: var(--text); } .docs-content table { width: 100%; border-collapse: collapse; margin: 16px 0 26px; font-size: 0.94rem; } .docs-content table th, .docs-content table td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } .docs-content table th { background: var(--bg-soft); color: var(--navy); font-weight: 700; } .docs-content .endpoint { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 6px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 0.95rem; } .method { display: inline-block; font-weight: 800; font-size: 0.75rem; padding: 4px 10px; border-radius: 6px; letter-spacing: 0.05em; } .method.post { background: #d1fae5; color: #065f46; } .method.get { background: #dbeafe; color: #1e40af; } .method.delete { background: #fee2e2; color: #991b1b; } .note { background: #eef4ff; border-left: 4px solid var(--blue); padding: 14px 18px; border-radius: 8px; color: var(--navy); margin: 20px 0; } .note strong { display: block; margin-bottom: 4px; } @media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; gap: 28px; } .docs-sidebar { position: static; border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 12px; } } /* ---------- Legal pages ---------- */ .legal-hero { background: linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 100%); padding: 70px 0 40px; border-bottom: 1px solid var(--border); } .legal-hero h1 { margin-bottom: 8px; } .legal-hero .updated { color: var(--text-subtle); font-size: 0.92rem; } .legal-body { padding: 60px 0 80px; } .legal-body .container { max-width: 820px; } .legal-body h2 { margin-top: 38px; } .legal-body h3 { margin-top: 24px; } .legal-body p, .legal-body li { color: var(--text); } .legal-body ul li { margin-bottom: 6px; } /* ---------- Footer ---------- */ .site-footer { background: #0b1730; color: #c9d3e8; padding: 64px 0 28px; } .site-footer h4 { color: #fff; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 40px; } .footer-grid p { color: #9aa8c4; font-size: 0.95rem; margin-top: 12px; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid ul li { margin-bottom: 8px; } .footer-grid ul li a { color: #c9d3e8; font-size: 0.93rem; } .footer-grid ul li a:hover { color: #fff; } .footer-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: #fff; font-size: 1.05rem; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 22px; display: flex; justify-content: space-between; color: #8a94a8; font-size: 0.88rem; flex-wrap: wrap; gap: 12px; } .footer-disclaimer { max-width: 600px; font-size: 0.82rem; color: #6b7896; line-height: 1.55; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } } /* ---------- Cookie consent ---------- */ .cookie-banner { position: fixed; left: 20px; right: 20px; bottom: 20px; max-width: 560px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: 0 20px 50px rgba(10, 22, 50, 0.18); padding: 22px 24px; z-index: 100; font-size: 0.93rem; color: var(--text); display: none; } .cookie-banner.open { display: block; } .cookie-banner h3 { margin: 0 0 6px; font-size: 1.02rem; color: var(--navy); } .cookie-banner p { margin: 0 0 14px; color: var(--text-muted); line-height: 1.55; } .cookie-banner p a { color: var(--blue); text-decoration: underline; } .cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; } .cookie-actions .btn { padding: 10px 18px; font-size: 0.9rem; flex: 1 1 auto; min-width: 130px; } @media (max-width: 540px) { .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 18px 18px; } .cookie-actions .btn { flex: 1 1 100%; } } /* Preferences modal */ .cookie-modal-backdrop { position: fixed; inset: 0; background: rgba(10, 22, 50, 0.55); backdrop-filter: blur(3px); display: none; align-items: center; justify-content: center; padding: 20px; z-index: 110; } .cookie-modal-backdrop.open { display: flex; } .cookie-modal { background: var(--bg-card); border-radius: var(--radius-lg); max-width: 560px; width: 100%; padding: 28px 28px 22px; max-height: calc(100vh - 40px); overflow-y: auto; box-shadow: var(--shadow-lg); } .cookie-modal h3 { margin: 0 0 6px; color: var(--navy); } .cookie-modal > p { color: var(--text-muted); margin-bottom: 18px; } .cookie-category { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 12px; } .cookie-category-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .cookie-category-header h4 { margin: 0; font-size: 0.98rem; color: var(--navy); } .cookie-category-header .locked { font-size: 0.78rem; color: var(--text-subtle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .cookie-category p { margin: 8px 0 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.5; } /* Toggle switch */ .toggle { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle .slider { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; transition: background 0.2s ease; cursor: pointer; } .toggle .slider::before { content: ""; position: absolute; height: 18px; width: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); } .toggle input:checked + .slider { background: var(--navy); } .toggle input:checked + .slider::before { transform: translateX(18px); } .toggle input:disabled + .slider { background: #94a3b8; cursor: not-allowed; } .cookie-modal-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .cookie-modal-actions .btn { flex: 1 1 auto; min-width: 130px; padding: 10px 18px; font-size: 0.9rem; } /* Footer cookie settings link */ .footer-bottom .cookie-settings-link { background: none; border: none; color: #8a94a8; font-size: 0.88rem; cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; } .footer-bottom .cookie-settings-link:hover { color: #fff; } /* ---------- Utility ---------- */ .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } /* ---------- Landing page ---------- */ .landing-hero { position: relative; padding: 72px 0 64px; background: linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 40%, var(--navy-light) 100%); overflow: hidden; } .landing-hero::before { content: ""; position: absolute; top: -40%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0, 111, 207, 0.2), transparent 70%); pointer-events: none; } .landing-accent { color: var(--orange); } .landing-hero-btn { background: #fff !important; color: var(--navy) !important; font-weight: 700; } .landing-hero-btn:hover { background: #f0f4fa !important; transform: translateY(-1px); } @media (max-width: 700px) { .landing-hero { padding: 52px 0 44px; } } /* ---------- Landing showcases ---------- */ .landing-showcase { margin-bottom: 72px; } .landing-showcase-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--border); background: var(--bg-card); margin-bottom: 32px; } .landing-showcase-img img { width: 100%; height: auto; display: block; } .landing-showcase-img.popup-size { max-width: 420px; } .landing-showcase-copy { max-width: 780px; } .landing-showcase-copy h3 { margin-bottom: 12px; font-size: 1.3rem; } .landing-showcase-copy p { color: var(--text-muted); font-size: 1.02rem; line-height: 1.65; } .landing-showcase-copy ul { padding-left: 0; list-style: none; margin: 18px 0 0; columns: 2; column-gap: 32px; } .landing-showcase-copy ul li { padding: 8px 0 8px 26px; position: relative; color: var(--text); font-size: 0.95rem; break-inside: avoid; } .landing-showcase-copy ul li::before { content: "\2192"; color: var(--orange); position: absolute; left: 0; font-weight: 700; } @media (max-width: 600px) { .landing-showcase-copy ul { columns: 1; } } /* ---------- Landing details row ---------- */ .landing-details-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 16px; padding-top: 40px; border-top: 1px solid var(--border); } .landing-detail h4 { font-size: 1rem; margin-bottom: 6px; } .landing-detail p { color: var(--text-muted); font-size: 0.93rem; margin: 0; line-height: 1.6; } @media (max-width: 700px) { .landing-details-row { grid-template-columns: 1fr; gap: 20px; } } /* ---------- Landing Hero (new redesign) ---------- */ .hero-bg-shapes { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .hero-bg-shapes::before { content: ""; position: absolute; top: -30%; right: -15%; width: 700px; height: 700px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 111, 207, 0.18), transparent 70%); } .hero-bg-shapes::after { content: ""; position: absolute; bottom: -40%; left: -10%; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(224, 122, 0, 0.12), transparent 70%); } .hero-content { position: relative; z-index: 1; text-align: center; max-width: 760px; } .hero-badge { display: inline-block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #fbbf24; background: rgba(251, 191, 36, 0.15); padding: 6px 16px; border-radius: 999px; margin-bottom: 24px; } .landing-hero h1 { color: #fff; font-size: clamp(2.2rem, 5vw + 0.5rem, 3.6rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 20px; } .hero-sub { font-size: 1.12rem; color: #b8c7e0; max-width: 620px; margin: 0 auto 32px; line-height: 1.65; } .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 40px; } .btn-hero { background: #fff; color: var(--navy-dark) !important; font-weight: 700; padding: 14px 28px; border-radius: 999px; font-size: 1rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transition: transform 0.15s, box-shadow 0.15s; } .btn-hero:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.2); color: var(--navy-dark) !important; } .btn-hero-ghost { background: transparent; color: #fff !important; border: 1.5px solid rgba(255, 255, 255, 0.35); padding: 14px 28px; border-radius: 999px; font-size: 1rem; font-weight: 600; transition: background 0.15s, border-color 0.15s; } .btn-hero-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.6); color: #fff !important; } .hero-stats { display: flex; justify-content: center; gap: 48px; } .hero-stat { display: flex; flex-direction: column; align-items: center; } .hero-stat-num { font-size: 2rem; font-weight: 800; color: #fff; line-height: 1; } .hero-stat-label { font-size: 0.82rem; color: #8ea4c8; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-top: 4px; } @media (max-width: 600px) { .hero-stats { gap: 28px; } .hero-stat-num { font-size: 1.6rem; } } /* ---------- Problem / Solution ---------- */ .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .problem-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 28px; box-shadow: var(--shadow-sm); } .problem-card.solution { border-color: var(--green); background: linear-gradient(135deg, rgba(12, 138, 74, 0.04), rgba(12, 138, 74, 0.01)); } .problem-icon { width: 48px; height: 48px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 800; margin-bottom: 16px; } .problem-card:not(.solution) .problem-icon { background: rgba(192, 57, 43, 0.1); color: var(--red); } .problem-card.solution .problem-icon { background: rgba(12, 138, 74, 0.12); color: var(--green); } .problem-card h3 { margin-bottom: 10px; } .problem-card p { color: var(--text-muted); margin: 0; line-height: 1.65; } @media (max-width: 700px) { .problem-grid { grid-template-columns: 1fr; } } /* ---------- Tools Grid ---------- */ .tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .tool-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px 26px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; position: relative; transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s; } .tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: #b0bcd4; } .tool-card.featured { border-color: var(--blue); box-shadow: 0 6px 24px rgba(0, 111, 207, 0.12); } .tool-card.featured:hover { box-shadow: 0 10px 32px rgba(0, 111, 207, 0.18); border-color: var(--blue); } .tool-featured-badge { position: absolute; top: -11px; right: 20px; background: var(--orange); color: #fff; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 14px; border-radius: 999px; } .tool-featured-badge.live { background: #16a34a; } .tool-featured-badge.coming-soon { background: #64748b; } .tool-tag { display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; width: fit-content; } .tool-tag.amex { background: rgba(0, 38, 99, 0.08); color: var(--navy); } .tool-tag.united { background: rgba(0, 111, 207, 0.08); color: var(--blue); } .tool-icon-wrap { width: 52px; height: 52px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; color: #fff; } .tool-icon-wrap.amex-bg { background: linear-gradient(135deg, #002663, #006fcf); } .tool-icon-wrap.finder-bg { background: linear-gradient(135deg, #e07a00, #f59e0b); } .tool-icon-wrap.united-bg { background: linear-gradient(135deg, #004080, #0077c8); } .tool-card h3 { margin-bottom: 8px; font-size: 1.12rem; } .tool-card .tool-desc { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; margin-bottom: 16px; } .tool-features { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; } .tool-features li { padding: 5px 0 5px 22px; position: relative; color: var(--text); font-size: 0.9rem; line-height: 1.55; } .tool-features li::before { content: "\2713"; color: var(--green); font-weight: 700; position: absolute; left: 0; font-size: 0.85rem; } .tool-actions { margin-top: auto; } .btn-sm { padding: 9px 18px; font-size: 0.88rem; } @media (max-width: 960px) { .tools-grid { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; } } /* ---------- Values Grid ---------- */ .values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .value-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 28px 24px; box-shadow: var(--shadow-sm); transition: transform 0.15s, box-shadow 0.2s; } .value-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .value-icon { width: 48px; height: 48px; border-radius: 12px; background: linear-gradient(135deg, rgba(0, 111, 207, 0.1), rgba(0, 38, 99, 0.06)); color: var(--navy); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; } .value-card h4 { margin-bottom: 8px; font-size: 1.05rem; } .value-card p { color: var(--text-muted); font-size: 0.93rem; margin: 0; line-height: 1.6; } @media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .values-grid { grid-template-columns: 1fr; } } /* ---------- CTA section ---------- */ .cta-section { position: relative; overflow: hidden; } .cta-section::before { content: ""; position: absolute; top: -50%; left: -20%; width: 600px; height: 600px; border-radius: 50%; background: radial-gradient(circle, rgba(0, 111, 207, 0.15), transparent 70%); pointer-events: none; } /* ---------- Dark mode overrides for new components ---------- */ [data-theme="dark"] .problem-card { background: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .problem-card.solution { border-color: var(--green); background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), rgba(74, 222, 128, 0.02)); } [data-theme="dark"] .tool-card { background: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .tool-card:hover { background: #263050; border-color: #3b5080; } [data-theme="dark"] .tool-card.featured { border-color: var(--blue); } [data-theme="dark"] .tool-tag.amex { background: rgba(147, 197, 253, 0.12); color: var(--navy); } [data-theme="dark"] .tool-tag.united { background: rgba(96, 165, 250, 0.12); color: var(--blue); } [data-theme="dark"] .tool-features li { color: var(--text); } [data-theme="dark"] .value-card { background: var(--bg-card); border-color: var(--border); } [data-theme="dark"] .value-card:hover { background: #263050; } [data-theme="dark"] .value-icon { background: rgba(96, 165, 250, 0.15); color: #93c5fd; } [data-theme="dark"] .landing-hero { background: linear-gradient(160deg, #0a0f1a 0%, #111827 40%, #1a2236 100%); } [data-theme="dark"] .hero-badge { background: rgba(251, 191, 36, 0.12); color: #fbbf24; } [data-theme="dark"] .btn-hero { background: #e2e8f0; color: #111827 !important; } [data-theme="dark"] .btn-hero:hover { background: #fff; color: #111827 !important; } [data-theme="dark"] .cta-section { background: #0a0f1a; } /* Auto dark mode for new components */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .problem-card { background: var(--bg-card); border-color: var(--border); } :root:not([data-theme="light"]) .problem-card.solution { border-color: var(--green); background: linear-gradient(135deg, rgba(74, 222, 128, 0.06), rgba(74, 222, 128, 0.02)); } :root:not([data-theme="light"]) .tool-card { background: var(--bg-card); border-color: var(--border); } :root:not([data-theme="light"]) .tool-card:hover { background: #263050; border-color: #3b5080; } :root:not([data-theme="light"]) .tool-card.featured { border-color: var(--blue); } :root:not([data-theme="light"]) .tool-tag.amex { background: rgba(147, 197, 253, 0.12); color: var(--navy); } :root:not([data-theme="light"]) .tool-tag.united { background: rgba(96, 165, 250, 0.12); color: var(--blue); } :root:not([data-theme="light"]) .tool-features li { color: var(--text); } :root:not([data-theme="light"]) .value-card { background: var(--bg-card); border-color: var(--border); } :root:not([data-theme="light"]) .value-card:hover { background: #263050; } :root:not([data-theme="light"]) .value-icon { background: rgba(96, 165, 250, 0.15); color: #93c5fd; } :root:not([data-theme="light"]) .landing-hero { background: linear-gradient(160deg, #0a0f1a 0%, #111827 40%, #1a2236 100%); } :root:not([data-theme="light"]) .hero-badge { background: rgba(251, 191, 36, 0.12); color: #fbbf24; } :root:not([data-theme="light"]) .btn-hero { background: #e2e8f0; color: #111827 !important; } :root:not([data-theme="light"]) .btn-hero:hover { background: #fff; color: #111827 !important; } :root:not([data-theme="light"]) .cta-section { background: #0a0f1a; } }