/* ============================================================ MnrAgent — Custom Styles Palette & paths are configured in config.toml -> [params.brand] This file uses CSS variables; switch theme via the toggle in the header. Dark mode is enabled by [data-theme="dark"] on . ============================================================ */ /* ---------- Theme variables ---------- */ :root { --text-primary: #2D2D2D; --text-muted: #5A5A5A; --accent: #F57C00; --accent-hover: #FF9800; --accent-dark: #E65100; --accent-soft: #FFF4E6; --bg-page: #FAFAFA; --bg-card: #FFFFFF; --bg-section: #FFFFFF; --border: #E5E5E5; --hero-from: #FFF4E6; --hero-mid: #FFFFFF; --hero-to: #FAFAFA; --shadow-soft: rgba(45, 45, 45, 0.08); --shadow-card: rgba(245, 124, 0, .1); --shadow-btn: rgba(245, 124, 0, .3); --hover-row: #FAFAFA; --footer-bg: #1f1f1f; --footer-text: #aaa; --footer-muted: #777; --cta-from: #2D2D2D; --cta-to: #1a1a1a; --cta-text: #d0d0d0; } [data-theme="dark"] { --text-primary: #E8E8E8; --text-muted: #A0A0A0; --accent: #FF9800; --accent-hover: #FFB74D; --accent-dark: #FFB74D; --accent-soft: #3A2410; --bg-page: #121212; --bg-card: #1E1E1E; --bg-section: #181818; --border: #2E2E2E; --hero-from: #2A1F12; --hero-mid: #1A1A1A; --hero-to: #121212; --shadow-soft: rgba(0, 0, 0, .5); --shadow-card: rgba(255, 152, 0, .15); --shadow-btn: rgba(255, 152, 0, .4); --hover-row: #252525; --footer-bg: #0A0A0A; --footer-text: #888; --footer-muted: #555; --cta-from: #0A0A0A; --cta-to: #000000; --cta-text: #b0b0b0; } /* ---------- Global ---------- */ body { color: var(--text-primary); background: var(--bg-page); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transition: background-color .2s ease, color .2s ease; } /* PaperMod overrides */ :root { --main-width: 1080px; --theme: #F57C00; } [data-theme="dark"] { --theme: #FF9800; } a { color: var(--accent); text-decoration: none; transition: color .15s ease; } a:hover { color: var(--accent-hover); text-decoration: underline; } /* ---------- Layout container ---------- */ .section { padding: 4rem 1.5rem; } .section-inner { max-width: 1080px; margin: 0 auto; } .section-title { font-size: 2.25rem; font-weight: 800; color: var(--text-primary); margin: 0 0 .75rem; text-align: center; letter-spacing: -0.02em; } .section-sub { font-size: 1.1rem; color: var(--text-muted); text-align: center; margin: 0 0 3rem; max-width: 640px; margin-left: auto; margin-right: auto; } /* ---------- Hero ---------- */ .hero { background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-mid) 60%, var(--hero-to) 100%); padding: 5rem 1.5rem 4rem; text-align: center; border-bottom: 1px solid var(--border); transition: background .2s ease, border-color .2s ease; } .hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.15; margin: 0 0 1rem; color: var(--text-primary); letter-spacing: -0.02em; } .hero h1 .accent { color: var(--accent); } .hero p.lead { font-size: 1.25rem; color: var(--text-muted); max-width: 680px; margin: 0 auto 2rem; } .hero .ctas { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .hero .mockup { margin-top: 3rem; max-width: 960px; max-height: 480px; margin-left: auto; margin-right: auto; border-radius: 16px; overflow: hidden; background: transparent; aspect-ratio: 16 / 9; } .hero .mockup img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } /* Subtle lift for marketing images against any background */ [data-theme="dark"] .hero .mockup img, [data-theme="dark"] .scenario .visual img, [data-theme="dark"] .workbench-card img { box-shadow: 0 12px 40px rgba(0, 0, 0, .5); } /* ---------- Buttons ---------- */ .btn { display: inline-block; padding: .75rem 1.5rem; border-radius: 8px; font-weight: 600; font-size: 1rem; border: 1px solid transparent; cursor: pointer; transition: all .15s ease; text-decoration: none; line-height: 1.2; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 12px var(--shadow-btn); } .btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; } /* ---------- Pillar grid ---------- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .pillar { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 2rem; text-align: center; transition: all .2s ease; } .pillar:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 24px var(--shadow-card); } .pillar .icon { width: 48px; height: 48px; background: var(--accent-soft); color: var(--accent); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; font-weight: 700; } .pillar h3 { font-size: 1.25rem; margin: 0 0 .5rem; color: var(--text-primary); } .pillar p { color: var(--text-muted); margin: 0; line-height: 1.6; } /* ---------- Scenario cards ---------- */ .scenario { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; } .scenario.reverse { direction: rtl; } .scenario.reverse > * { direction: ltr; } .scenario .pain { border-left: 4px solid var(--accent-dark); padding: 1.25rem 1.5rem; background: var(--bg-card); margin-bottom: 1rem; border-radius: 0 8px 8px 0; } .scenario .pain h4 { margin: 0 0 .5rem; color: var(--accent-dark); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; } .scenario .pain ul { margin: .5rem 0 0; padding-left: 1.2rem; color: var(--text-muted); } .scenario .pain li { margin-bottom: .35rem; } .scenario .solution { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 1.5rem; border-radius: 0 8px 8px 0; } .scenario .solution h4 { margin: 0 0 .75rem; color: var(--accent-dark); font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; } .scenario .solution p { margin: 0 0 1rem; color: var(--text-primary); } .scenario .task { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: .75rem 1rem; margin: .5rem 0; font-size: .95rem; color: var(--text-primary); } .scenario .task::before { content: "›"; color: var(--accent); font-weight: 700; margin-right: .5rem; } .scenario .visual img { width: 100%; border-radius: 12px; /* No border — image is its own visual; shadow added in dark mode */ } /* ---------- Workbench UI section ---------- */ .workbench { background: var(--bg-page); } .workbench-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .workbench-card { background: transparent; padding: 0; } .workbench-card h4 { margin: 0 0 .5rem; color: var(--text-primary); } .workbench-card p { color: var(--text-muted); margin: 0 0 1rem; font-size: .95rem; } .workbench-card img { width: 100%; border-radius: 12px; display: block; } .annotation { display: inline-block; background: var(--accent-soft); color: var(--accent-dark); font-size: .75rem; font-weight: 700; padding: .15rem .5rem; border-radius: 4px; margin: 0 .25rem; } /* ---------- Comparison table ---------- */ .comparison { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; } .comparison thead th { background: var(--accent); color: #fff; font-weight: 700; padding: 1rem; text-align: left; font-size: .95rem; } .comparison tbody td { padding: 1rem; border-top: 1px solid var(--border); color: var(--text-primary); vertical-align: top; background: var(--bg-card); } .comparison tbody tr:hover td { background: var(--hover-row); } .comparison td.mnragent, .comparison th.mnragent { background: var(--accent-soft) !important; } .comparison th.mnragent { color: var(--accent-dark); } .comparison tbody td:first-child { font-weight: 600; color: var(--text-muted); } /* ---------- One-liner summary ---------- */ .summary { background: var(--accent-soft); border-left: 4px solid var(--accent); padding: 2rem 2.5rem; border-radius: 0 12px 12px 0; margin: 3rem 0; font-size: 1.25rem; font-weight: 500; line-height: 1.6; color: var(--text-primary); } .summary::before { content: "“"; color: var(--accent); font-size: 3rem; font-weight: 700; line-height: 0; vertical-align: -0.4em; margin-right: .25rem; } .summary::after { content: "”"; color: var(--accent); font-size: 3rem; font-weight: 700; line-height: 0; vertical-align: -0.4em; margin-left: .25rem; } /* ---------- Final CTA ---------- */ .cta-final { text-align: center; background: linear-gradient(135deg, var(--cta-from) 0%, var(--cta-to) 100%); color: #fff; padding: 4rem 1.5rem; } .cta-final h2 { font-size: 2rem; margin: 0 0 1rem; } .cta-final p { color: var(--cta-text); margin: 0 0 2rem; max-width: 560px; margin-left: auto; margin-right: auto; } .cta-final .btn-primary { background: var(--accent); border-color: var(--accent); } .cta-final .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } /* ---------- Footer ---------- */ .site-footer { background: var(--footer-bg); color: var(--footer-text); padding: 2.5rem 1.5rem; text-align: center; font-size: .9rem; transition: background .2s ease, color .2s ease; } .site-footer a { color: var(--accent); } .site-footer .links { margin-bottom: 1rem; } .site-footer .links a { margin: 0 .75rem; } /* Hide PaperMod's default footer; our extend_footer.html provides the replacement */ body > footer.footer, main + footer.footer { display: none !important; } /* ---------- Responsive ---------- */ @media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } .workbench-grid { grid-template-columns: 1fr; } .scenario { grid-template-columns: 1fr; gap: 1.5rem; } .hero h1 { font-size: 2.25rem; } .section-title { font-size: 1.75rem; } .comparison { font-size: .9rem; } .comparison thead th, .comparison tbody td { padding: .65rem; } } @media (max-width: 600px) { .section { padding: 3rem 1rem; } .hero { padding: 3rem 1rem 2.5rem; } .hero h1 { font-size: 1.85rem; } .hero p.lead { font-size: 1.05rem; } .section-title { font-size: 1.5rem; } .summary { padding: 1.25rem 1.5rem; font-size: 1.05rem; } .summary::before, .summary::after { font-size: 2rem; } .cta-final h2 { font-size: 1.5rem; } .cta-final { padding: 3rem 1rem; } .pricing-hero h1 { font-size: 1.85rem !important; } } /* Mobile menu trigger from PaperMod — make sure it remains visible */ #menu-toggle { display: inline-flex !important; } /* Tighten header on small screens */ @media (max-width: 900px) { .header-nav { padding: 0 1rem; gap: .5rem; } .logo a { font-size: .95rem; } .menu a { font-size: 14px !important; padding: 0 .35rem !important; } .menu { gap: 0; } } @media (max-width: 480px) { .logo a { font-size: .85rem; } .menu { width: 100%; justify-content: space-between; padding: 0; } .menu a { font-size: 13px !important; } .menu li { flex: 1; text-align: center; } .header { margin-bottom: .5rem; } } /* Ensure body has top padding so content isn't under the fixed header */ @media (max-width: 900px) { body { padding-top: 0; } }