/* ============================================================ Intuit Mailchimp for Magento / Adobe Commerce — Docs theme by ebizmarts ------------------------------------------------------------ Framework-free HTML + CSS. Drop these tokens and component styles into an MkDocs Material override, or use the two HTML pages as-is. ============================================================ */ /* ------------------------------------------------------------ 1. DESIGN TOKENS Light is the default. Dark mode is applied by setting data-theme="dark" on the element (see theme.js). ------------------------------------------------------------ */ :root { /* Brand palette (Mailchimp) */ --mc-cavendish-yellow: #FFE01B; /* accent — ONE per view, used sparingly */ --mc-peppercorn: #241C15; /* primary text / elements */ --mc-coconut: #EFEDE9; /* soft background */ /* Surfaces & text (light) */ --bg: #FFFFFF; --surface: #EFEDE9; --card: #FFFFFF; --header: rgba(255, 255, 255, 0.82); --search: #FFFFFF; --kbd: #EFEDE9; --text: #241C15; --muted: #6E655B; --text-soft: rgba(36, 28, 21, 0.28); --border: rgba(36, 28, 21, 0.12); --accent: #FFE01B; --on-accent: #241C15; /* Code block */ --code-bg: #241C15; --code-text: #EFEDE9; /* Callouts — muted, functional (kept distinct from the brand accent) */ --info-bg: #EFF3F8; --info-bd: #D7E0EC; --info-fg: #3E668F; --tip-bg: #EBF4EE; --tip-bd: #CFE6D6; --tip-fg: #3C7A50; --warn-bg: #FBEEE8; --warn-bd: #F1D6C7; --warn-fg: #B15532; /* Logo tint (inverted in dark mode) */ --logo-filter: none; /* Typography */ --font-display: 'Bricolage Grotesque', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Spacing scale (px) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-14: 56px; --space-19: 76px; /* Radii */ --radius-sm: 9px; --radius-md: 12px; --radius-lg: 14px; --radius-xl: 16px; --radius-2xl: 18px; --radius-3xl: 20px; --radius-pill: 100px; /* Chrome */ --header-h: 68px; --shadow-card: 0 16px 40px rgba(36, 28, 21, 0.10); --shadow-pop: 0 24px 70px rgba(20, 15, 10, 0.28); /* Motion (200–300ms, per brand) */ --t-fast: 0.15s ease; --t-med: 0.2s ease; --t-slow: 0.3s ease; } html[data-theme="dark"] { --bg: #171310; --surface: #211B15; --card: #1F1A14; --header: rgba(23, 19, 16, 0.82); --search: #211B15; --kbd: #2C251E; --text: #F3F0EA; --muted: #A79C8E; --text-soft: rgba(243, 240, 234, 0.3); --border: rgba(243, 240, 234, 0.14); --accent: #FFE01B; --on-accent: #241C15; --code-bg: #0F0C09; --code-text: #EFEDE9; --info-bg: rgba(90, 140, 200, 0.13); --info-bd: rgba(90, 140, 200, 0.30); --info-fg: #93B6E0; --tip-bg: rgba(80, 170, 110, 0.13); --tip-bd: rgba(80, 170, 110, 0.30); --tip-fg: #7FC494; --warn-bg: rgba(200, 100, 60, 0.15); --warn-bd: rgba(200, 100, 60, 0.32); --warn-fg: #E0A183; --logo-filter: invert(1); --shadow-card: 0 16px 40px rgba(0, 0, 0, 0.35); } /* ------------------------------------------------------------ 2. BASE ------------------------------------------------------------ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); transition: background var(--t-slow); } body { font-family: var(--font-body); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background var(--t-slow), color var(--t-slow); } ::selection { background: var(--mc-cavendish-yellow); color: var(--mc-peppercorn); } a { color: inherit; text-decoration: none; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; } p { margin: 0; } .scroll::-webkit-scrollbar { width: 10px; height: 10px; } .scroll::-webkit-scrollbar-thumb { background: rgba(128, 120, 110, 0.35); border-radius: 20px; border: 3px solid transparent; background-clip: padding-box; } @keyframes mcfade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes mcbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } /* ------------------------------------------------------------ 3. HEADER ------------------------------------------------------------ */ .site-header { position: sticky; top: 0; z-index: 40; display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); padding: 0 28px; background: var(--header); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: var(--space-4); cursor: pointer; flex-shrink: 0; } .brand__logo { height: 44px; width: auto; display: block; filter: var(--logo-filter); transition: filter var(--t-slow); } .brand__divider { width: 1px; height: 26px; background: var(--border); } .brand__label { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--text); letter-spacing: -0.01em; } .header__search-wrap { flex: 1; display: flex; justify-content: center; max-width: 520px; margin: 0 auto; } .search-trigger { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; height: 42px; padding: 0 14px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--search); color: var(--muted); font-family: inherit; font-size: 14px; cursor: pointer; transition: border-color var(--t-med), background var(--t-med); } .search-trigger:hover { border-color: var(--text-soft); } .search-trigger__text { flex: 1; text-align: left; } .kbd-group { display: flex; gap: 3px; font-size: 11px; font-weight: 600; } kbd { padding: 2px 6px; border-radius: 6px; background: var(--kbd); border: 1px solid var(--border); font-family: inherit; color: inherit; } .header__actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* ------------------------------------------------------------ 4. BUTTONS & BADGES ------------------------------------------------------------ */ .icon-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 11px; border: 1px solid var(--border); background: var(--search); color: var(--text); cursor: pointer; transition: background var(--t-med), border-color var(--t-med); } .icon-btn:hover { background: var(--surface); } .btn { display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 18px; border: none; border-radius: 11px; font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; transition: transform var(--t-med), box-shadow var(--t-med), opacity var(--t-med); } .btn--dark { background: var(--text); color: var(--bg); } .btn--dark:hover { opacity: 0.88; } /* The single accent CTA — one per view */ .btn--accent { height: 52px; padding: 0 26px; border-radius: 13px; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: 16px; box-shadow: 0 1px 0 rgba(36, 28, 21, 0.08); } .btn--accent:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(36, 28, 21, 0.14); } .btn--accent.btn--md { height: 48px; padding: 0 22px; border-radius: var(--radius-md); font-size: 15px; } .badge { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border-radius: var(--radius-pill); background: var(--card); border: 1px solid var(--border); font-size: 13px; font-weight: 600; color: var(--muted); } .badge__dot { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--text); color: var(--bg); } .meta-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); } .meta-inline strong { color: var(--text); } .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } /* ------------------------------------------------------------ 5. SEARCH OVERLAY ------------------------------------------------------------ */ .search-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(20, 15, 10, 0.42); backdrop-filter: blur(2px); display: none; justify-content: center; padding-top: 14vh; animation: mcfade 0.18s ease; } .search-overlay[data-open="true"] { display: flex; } .search-panel { width: min(600px, 92vw); height: fit-content; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); box-shadow: var(--shadow-pop); overflow: hidden; } .search-panel__field { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .search-panel__field input { flex: 1; border: none; outline: none; background: transparent; font-family: inherit; font-size: 16px; color: var(--text); } .search-panel__list { padding: 12px; } .search-result { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 11px; cursor: pointer; transition: background var(--t-fast); } .search-result:hover { background: var(--surface); } .search-result__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); flex-shrink: 0; } .search-result__title { font-size: 14px; font-weight: 600; color: var(--text); } .search-result__crumb { font-size: 12px; color: var(--muted); } /* ------------------------------------------------------------ 6. HOME — HERO ------------------------------------------------------------ */ .hero { position: relative; overflow: hidden; background: var(--surface); border-bottom: 1px solid var(--border); min-height: calc(100vh - var(--header-h)); display: flex; flex-direction: column; justify-content: center; } .hero__inner { max-width: 1120px; width: 100%; margin: 0 auto; padding: var(--space-10) var(--space-10) var(--space-14); } .hero__title { font-size: clamp(38px, 5.4vw, 66px); line-height: 1.02; letter-spacing: -0.025em; color: var(--text); margin: 0 0 22px; max-width: 16ch; } .hero__sub { font-size: clamp(17px, 2vw, 20px); line-height: 1.55; color: var(--muted); max-width: 56ch; margin: 0 0 34px; } .hero__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; } .scroll-cue { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); background: none; border: none; } .scroll-cue__label { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .scroll-cue__chev { display: flex; animation: mcbob 1.8s ease-in-out infinite; } /* ------------------------------------------------------------ 7. HOME — SECTIONS ------------------------------------------------------------ */ .section { max-width: 1120px; margin: 0 auto; padding: var(--space-14) var(--space-10) var(--space-2); } .section--pad-top { padding-top: 46px; } .section--reference { padding: 44px var(--space-10) 90px; } .section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; margin-bottom: 26px; } .section__title { font-size: 26px; color: var(--text); margin: 0; } .section__note { font-size: 14px; color: var(--muted); } /* Journey */ .journey-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } .journey-card { position: relative; padding: var(--space-5) var(--space-4); border-radius: var(--radius-xl); background: var(--card); border: 1px solid var(--border); cursor: pointer; transition: transform var(--t-med), border-color var(--t-med); } .journey-card:hover { transform: translateY(-3px); border-color: var(--text-soft); } .journey-card__n { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--surface); font-family: var(--font-display); font-weight: 700; font-size: 15px; color: var(--text); margin-bottom: var(--space-4); } .journey-card__title { font-weight: 600; font-size: 15px; color: var(--text); line-height: 1.3; margin-bottom: 5px; } .journey-card__desc { font-size: 13px; color: var(--muted); line-height: 1.45; } /* Doors */ .doors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } .door { display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-3xl); background: var(--card); border: 1px solid var(--border); cursor: pointer; transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease; } .door:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--text-soft); } .door__icon { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--radius-lg); background: var(--surface); color: var(--text); margin-bottom: var(--space-5); } .door__title { font-size: 22px; letter-spacing: -0.01em; color: var(--text); margin: 8px 0 10px; line-height: 1.15; } .door__desc { font-size: 14.5px; line-height: 1.5; color: var(--muted); margin: 0 0 var(--space-5); flex: 1; } .door__links { display: flex; flex-direction: column; gap: 2px; border-top: 1px solid var(--border); padding-top: var(--space-4); } .door__link { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 500; color: var(--text); padding: 6px 0; } /* Reference (collapsed appendix) */ .reference { border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--card); overflow: hidden; } .reference__head { display: flex; align-items: center; gap: var(--space-4); padding: 22px 26px; cursor: pointer; } .reference__icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius-md); background: var(--surface); color: var(--muted); flex-shrink: 0; } .reference__title { font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--text); } .reference__sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; } .reference__chevron { display: flex; transition: transform 0.25s ease; } .reference[data-open="true"] .reference__chevron { transform: rotate(180deg); } .reference__body { display: none; padding: 4px 26px 24px; border-top: 1px solid var(--border); grid-template-columns: repeat(3, 1fr); gap: 10px 26px; } .reference[data-open="true"] .reference__body { display: grid; } .reference__link { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--text); padding: 11px 0; border-bottom: 1px solid var(--border); } .footer-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 34px; font-size: 13px; color: var(--muted); } /* ------------------------------------------------------------ 8. CONTENT PAGE — LAYOUT ------------------------------------------------------------ */ .doc-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr) 232px; align-items: start; max-width: 1440px; margin: 0 auto; } /* Sidebar */ .sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: 30px 18px 60px 28px; border-right: 1px solid var(--border); } .nav-group { margin-bottom: 22px; } .nav-group__label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); padding: 0 12px 8px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; line-height: 1.3; font-weight: 500; color: var(--muted); background: transparent; transition: background var(--t-fast), color var(--t-fast); } .nav-item:hover { background: var(--surface); } .nav-item__bar { width: 3px; height: 16px; border-radius: 3px; flex-shrink: 0; background: transparent; } .nav-item--active { font-weight: 600; color: var(--text); background: var(--surface); } .nav-item--active .nav-item__bar { background: var(--text); } .nav-reference { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 11px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 14px; font-weight: 500; color: var(--muted); border: 1px dashed var(--border); } /* Article */ .article { min-width: 0; padding: 34px 56px 90px; } .breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 22px; } .breadcrumbs a { cursor: pointer; } .breadcrumbs .current { color: var(--text); font-weight: 600; } .article__title { font-size: clamp(32px, 4vw, 46px); line-height: 1.05; letter-spacing: -0.025em; color: var(--text); margin: 12px 0 18px; } .article__lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 60ch; margin: 0 0 14px; } .article__cta-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin: 26px 0 40px; } .article h2 { font-size: 28px; color: var(--text); margin: 14px 0 8px; scroll-margin-top: 84px; } .article h2.first { margin-top: 0; } .article__sub { font-size: 15px; color: var(--muted); margin: 0 0 30px; } .underline-soft { color: var(--text); font-weight: 600; border-bottom: 1.5px solid var(--text-soft); cursor: pointer; } /* Callouts */ .callout { display: flex; gap: var(--space-4); padding: 18px 20px; border-radius: var(--radius-lg); margin-bottom: 40px; } .callout__icon { flex-shrink: 0; margin-top: 1px; } .callout__title { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 4px; } .callout__body { font-size: 14.5px; line-height: 1.55; color: var(--muted); } .callout--info { background: var(--info-bg); border: 1px solid var(--info-bd); } .callout--info .callout__icon { color: var(--info-fg); } .callout--tip { background: var(--tip-bg); border: 1px solid var(--tip-bd); margin-bottom: 20px; } .callout--tip .callout__icon { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tip-bd); color: var(--tip-fg); margin-top: 0; } .callout--warn { background: var(--warn-bg); border: 1px solid var(--warn-bd); margin-bottom: 44px; } .callout--warn .callout__icon { color: var(--warn-fg); } /* Step-by-step */ .step { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-5); padding-bottom: 34px; } .step__rail { display: flex; flex-direction: column; align-items: center; } .step__n { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--text); color: var(--bg); font-family: var(--font-display); font-weight: 700; font-size: 18px; flex-shrink: 0; } .step__line { flex: 1; width: 2px; background: var(--border); margin-top: 8px; border-radius: 2px; } .step__body { padding-top: 6px; min-width: 0; } .step__title { font-size: 20px; color: var(--text); margin: 0 0 8px; line-height: 1.25; } .step__text { font-size: 15.5px; line-height: 1.6; color: var(--muted); margin: 0 0 var(--space-4); max-width: 56ch; } /* Screenshot frame (drop a real screenshot in place of .shot-frame__ph) */ .shot-frame { margin: 0 0 4px; border-radius: var(--radius-lg); border: 1px solid var(--border); overflow: hidden; background: var(--card); box-shadow: 0 4px 16px rgba(36, 28, 21, 0.06); } .shot-frame__bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .shot-frame__dot { width: 11px; height: 11px; border-radius: 50%; } .shot-frame__dot--r { background: #ef9a9a; } .shot-frame__dot--y { background: #ffd479; } .shot-frame__dot--g { background: #a5d6a7; } .shot-frame__url { margin-left: 8px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--muted); font-family: var(--font-mono); } .shot-frame__ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 300px; color: var(--text-soft); text-align: center; font-size: 13px; background: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(128,120,110,0.05) 10px, rgba(128,120,110,0.05) 20px); } .shot-frame__ph span { color: var(--muted); } .shot-frame img { display: block; width: 100%; height: auto; } /* Code block */ .code-block { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); margin-bottom: 34px; } .code-block__bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; background: var(--surface); border-bottom: 1px solid var(--border); } .code-block__lang { font-size: 12px; font-weight: 600; color: var(--muted); font-family: var(--font-mono); } .code-copy { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--card); color: var(--muted); font-family: inherit; font-size: 12px; font-weight: 600; cursor: pointer; transition: color var(--t-med); } .code-copy:hover { color: var(--text); } .code-block pre { margin: 0; padding: 18px 16px; background: var(--code-bg); overflow-x: auto; } .code-block code { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7; color: var(--code-text); white-space: pre; } /* Pager */ .pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding-top: 8px; border-top: 1px solid var(--border); margin-top: 8px; } .pager__item { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--radius-lg); border: 1px solid var(--border); cursor: pointer; transition: border-color var(--t-med); } .pager__item:hover { border-color: var(--text-soft); } .pager__item--next { align-items: flex-end; text-align: right; } .pager__dir { font-size: 12px; color: var(--muted); } .pager__label { font-weight: 600; color: var(--text); } /* On this page (TOC) */ .toc { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); padding: 38px 24px 40px 8px; } .toc__label { font-size: 11px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .toc__list { display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--border); } .toc__link { padding: 7px 0 7px 16px; margin-left: -1px; font-size: 13.5px; line-height: 1.4; cursor: pointer; border-left: 2px solid transparent; color: var(--muted); font-weight: 400; transition: color var(--t-fast), border-color var(--t-fast); } .toc__link--active { border-left-color: var(--text); color: var(--text); font-weight: 600; } .toc__aside { margin-top: 26px; padding: 16px; border-radius: var(--radius-md); background: var(--surface); } .toc__aside-title { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; } .toc__aside-body { font-size: 13px; line-height: 1.5; color: var(--muted); margin-bottom: 10px; } .toc__aside-link { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer; } /* ------------------------------------------------------------ 9. RESPONSIVE ------------------------------------------------------------ */ @media (max-width: 1100px) { .doc-layout { grid-template-columns: 260px minmax(0, 1fr); } .toc { display: none; } .journey-grid { grid-template-columns: repeat(2, 1fr); } .doors-grid { grid-template-columns: 1fr; } } @media (max-width: 760px) { .doc-layout { grid-template-columns: 1fr; } .sidebar { display: none; } .article { padding: 28px 22px 70px; } .header__search-wrap { display: none; } .journey-grid { grid-template-columns: 1fr; } .reference__body { grid-template-columns: 1fr; } }