/* ============================================================================ Freshdi — /account-manager landing page styles. Self-contained: design-system tokens (subset of the Freshdi DS colors_and_type.css) + the marketplace button kit + the page's own component CSS. Inter is loaded from Google Fonts in . ============================================================================ */ :root { /* PRIMARY — Freshdi Green */ --green-25: #f3fbf5; --green-50: #e7f6ec; --green-100: #c4e9d0; --green-200: #98d7ae; --green-300: #5fc183; --green-400: #20a656; --green-500: #069b45; --green-600: #008934; --green-700: #00732c; --green-800: #005a23; --green-900: #00481d; /* ACCENT — Freshdi Orange */ --orange-25: #fff8ef; --orange-50: #fef1e0; --orange-100: #fcddb8; --orange-200: #f9c285; --orange-300: #f5a24d; --orange-400: #f08c1f; --orange-500: #eb8000; --orange-600: #c96c00; --orange-700: #9e5500; /* BLUE — action / link ramp */ --blue-25: #f5faff; --blue-50: #eff8ff; --blue-100: #d1e9ff; --blue-200: #b2ddff; --blue-300: #84caff; --blue-400: #53b1fd; --blue-500: #2e91fa; --blue-600: #1570ef; --blue-700: #175cd3; --blue-800: #1849a9; --blue-900: #194185; /* GRAY — neutral ramp */ --gray-25: #fcfcfd; --gray-50: #f9fafb; --gray-100: #f2f4f7; --gray-200: #eaecf0; --gray-300: #d0d5dd; --gray-400: #98a2b3; --gray-500: #667085; --gray-600: #475467; --gray-700: #344054; --gray-800: #1d2939; --gray-900: #101828; /* SEMANTIC ALIASES */ --fg-primary: var(--gray-900); --fg-secondary: var(--gray-700); --fg-tertiary: var(--gray-500); --fg-quaternary: var(--gray-400); --fg-white: #ffffff; --fg-brand: var(--green-600); --bg-primary: #ffffff; --bg-secondary: var(--gray-50); --bg-tertiary: var(--gray-100); --bg-brand: var(--green-600); --bg-brand-soft: var(--green-50); --border-primary: var(--gray-300); --border-secondary: var(--gray-200); --border-brand: var(--green-600); --ring-brand: rgba(0, 137, 52, 0.24); /* TYPE */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* TYPE SCALE */ --display-sm: 1.875rem; --display-sm-lh: 2.375rem; --display-xs: 1.5rem; --display-xs-lh: 2rem; --text-xl: 1.25rem; --text-xl-lh: 1.875rem; --text-lg: 1.125rem; --text-lg-lh: 1.75rem; --text-md: 1rem; --text-md-lh: 1.5rem; --text-sm: 0.875rem; --text-sm-lh: 1.25rem; --text-xs: 0.75rem; --text-xs-lh: 1.125rem; /* RADIUS */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; /* SPACING */ --space-0-5: 2px; --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-12: 48px; --space-16: 64px; /* SHADOWS */ --shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, 0.05); --shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, 0.1), 0 1px 2px 0 rgba(16, 24, 40, 0.06); --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06); --shadow-lg: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03); --shadow-focus-brand: 0 0 0 4px var(--ring-brand); } /* ===== Base ===== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); background: var(--bg-secondary); color: var(--fg-secondary); -webkit-font-smoothing: antialiased; } a { text-decoration: none; color: inherit; } .ds-root { font-family: var(--font-sans); color: var(--fg-secondary); -webkit-font-smoothing: antialiased; } ::-webkit-scrollbar { height: var(--space-2); width: var(--space-2); } ::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: var(--radius-full); } /* ===== Buttons (subset of the marketplace UI kit) ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 600; font-size: 14px; line-height: 20px; border-radius: var(--radius-md); padding: 10px 16px; border: 1px solid transparent; cursor: pointer; box-shadow: var(--shadow-xs); transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .btn svg { width: 18px; height: 18px; } .btn-secondary { background: #fff; color: var(--gray-700); border-color: var(--gray-300); } .btn-secondary:hover { background: var(--gray-50); } .btn-sm { padding: 8px 13px; font-size: 13px; } .btn-block { width: 100%; } /* ===== Keyframes ===== */ @keyframes floatA { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-34px, 24px); } } @keyframes floatB { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(30px, -32px); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } } @keyframes chipPop { 0% { transform: scale(1); } 45% { transform: scale(1.06); } 100% { transform: scale(1); } } @keyframes bobA { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } @keyframes bobB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(9px); } } @keyframes featSwap { 0% { opacity: 0; transform: translateX(120px) rotate(7deg) scale(0.92); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); } } @keyframes featInner { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ===== Sidebar nav ===== */ .navitem { display: flex; align-items: center; gap: var(--space-3); width: 100%; text-align: left; border: none; background: none; padding: var(--space-3) var(--space-4); cursor: pointer; font-family: var(--font-sans); border-top: 1px solid var(--gray-100); transition: background 0.15s, box-shadow 0.15s; } .navitem:first-of-type { border-top: none; } .navitem:hover { background: var(--green-50); } .navitem:hover .nm { color: var(--green-700); } .navitem.on { background: var(--green-50); box-shadow: inset 3px 0 0 var(--green-600); } .navitem .nm { font: var(--fw-semibold) var(--text-sm) / 1.3 var(--font-sans); color: var(--fg-primary); display: block; transition: color 0.15s; } .navitem.on .nm { color: var(--green-700); } /* ===== Listing cards ===== */ .panel { transition: box-shadow 0.2s ease, transform 0.2s ease; } /* Industry filter hides non-matching cards without touching their inline display:flex (see account-manager.js). */ .am-card--hidden { display: none !important; } .panel:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .lbl { font: var(--fw-bold) var(--text-xs) / var(--text-xs-lh) var(--font-sans); color: var(--fg-quaternary); text-transform: uppercase; letter-spacing: 0.06em; display: block; margin-bottom: var(--space-2); } .chip { display: inline-flex; align-items: center; font: var(--fw-medium) var(--text-xs) / var(--text-xs-lh) var(--font-sans); padding: var(--space-1) var(--space-3); border-radius: 8px; background: var(--gray-100); color: var(--gray-700); border: 1px solid var(--gray-200); } .chip-ghost { background: var(--bg-primary); color: var(--fg-tertiary); border: 1px dashed var(--gray-300); } /* ===== Hero visual (featured AM card) ===== */ .hero-visual { flex: 0 0 392px; position: relative; align-self: center; min-height: 340px; display: flex; align-items: center; justify-content: center; animation: fadeInUp 0.7s 0.22s both; } .hero-stack { position: absolute; left: 50%; width: 320px; height: 300px; border-radius: 18px; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.16); } .hero-stack.s1 { transform: translateX(-50%) translateY(26px) rotate(-5deg); } .hero-stack.s2 { transform: translateX(-50%) translateY(14px) rotate(3.5deg); background: rgba(255, 255, 255, 0.11); } .hero-feat-card { position: relative; z-index: 2; width: 340px; background: #fff; border-radius: 18px; padding: 22px; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(255, 255, 255, 0.1); } .hero-feat-card.swap { animation: featSwap 0.95s cubic-bezier(0.25, 0.8, 0.25, 1) both; transform-origin: bottom center; } .hero-feat-card.swap > * { animation: featInner 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both; } .hero-feat-card.swap > *:nth-child(1) { animation-delay: 0.1s; } .hero-feat-card.swap > *:nth-child(2) { animation-delay: 0.2s; } .hero-feat-card.swap > *:nth-child(3) { animation-delay: 0.28s; } .hero-feat-card.swap > *:nth-child(4) { animation-delay: 0.36s; } .feat-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; background: var(--green-600); color: #fff; border: none; cursor: pointer; font: var(--fw-semibold) var(--text-sm) / 1 var(--font-sans); padding: 12px 18px; border-radius: 9px; text-decoration: none; transition: background 0.15s, box-shadow 0.15s, transform 0.15s; box-shadow: 0 6px 16px rgba(0, 137, 52, 0.28); } .feat-btn:hover { background: var(--green-700); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0, 137, 52, 0.34); } .feat-btn svg { transition: transform 0.2s; } .feat-btn:hover svg { transform: translateX(3px); } .float-pill { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: #fff; border-radius: 100px; padding: 8px 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22); white-space: nowrap; font: var(--fw-semibold) 12px / 1 var(--font-sans); color: var(--fg-primary); top: 8px; left: -18px; animation: bobA 6s ease-in-out infinite; } .float-stat { position: absolute; z-index: 3; background: #fff; border-radius: 13px; padding: 13px 16px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.24); bottom: 6px; right: -22px; animation: bobB 7s ease-in-out infinite; } /* ===== Hero industry chips ===== */ .hero-chip { display: inline-flex; align-items: center; padding: 7px 16px; border-radius: 100px; border: 1.5px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.8); font: 500 12px / 1 var(--font-sans); cursor: pointer; white-space: nowrap; transition: background 0.18s, border-color 0.18s, color 0.18s, transform 0.2s, box-shadow 0.2s; } .hero-chip:hover { background: rgba(255, 255, 255, 0.2); border-color: rgba(255, 255, 255, 0.42); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18); } .hero-chip.chip-active { background: #fff; border-color: #fff; color: var(--green-700); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.22); animation: chipPop 0.28s ease; } /* ===== Category accents ===== */ .acc-green .av { background: var(--green-50); color: var(--green-700); } .acc-orange .av { background: var(--orange-50); color: var(--orange-700); } .acc-blue .av { background: var(--blue-50); color: var(--blue-700); } .acc-slate .av { background: var(--gray-100); color: var(--gray-700); } .acc-green .am-l, .acc-orange .am-l, .acc-blue .am-l, .acc-slate .am-l { background: var(--bg-secondary); border-right: 1px solid var(--border-secondary); } .am-l a:hover { opacity: 0.85; } /* ===== Section reveal ===== */ .am-section { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; } .am-section.revealed { opacity: 1; transform: none; } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .am-section { opacity: 1; transform: none; } } @media (max-width: 880px) { .am-rail { display: none !important; } } @media (max-width: 940px) { .hero-row { flex-direction: column !important; align-items: stretch !important; } .hero-visual { flex: 0 0 auto !important; margin-top: 8px; } } @media (max-width: 760px) { .panel { flex-direction: column !important; } .am-l { width: 100% !important; border-right: none !important; border-bottom: 1px solid var(--border-secondary); } .panel > div:last-child { border-left: none !important; } .am-l a[href^="mailto"] { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; text-align: left !important; } } @media (max-width: 480px) { .hero-chips-row { gap: 6px !important; } .float-pill { left: 0 !important; } .float-stat { right: 0 !important; } }