likebutter.app/src/css/custom.css

/**
 * Butter brand styles — ported from the Jekyll _scss folder.
 * Infima variables are overridden to match the original palette and typography.
 */

/* ---- Fonts ---- */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/poppins-v15-latin-regular.woff2') format('woff2'),
       url('/fonts/poppins-v15-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/poppins-v15-latin-600.woff2') format('woff2'),
       url('/fonts/poppins-v15-latin-600.woff') format('woff');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/poppins-v15-latin-700.woff2') format('woff2'),
       url('/fonts/poppins-v15-latin-700.woff') format('woff');
}
@font-face {
  font-family: 'Prata';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/prata-v13-latin-regular.woff2') format('woff2'),
       url('/fonts/prata-v13-latin-regular.woff') format('woff');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/inter-v3-latin-regular.woff2') format('woff2'),
       url('/fonts/inter-v3-latin-regular.woff') format('woff');
}

/* ---- Brand variables ---- */
:root {
  --butter-white: #ffffff;
  --butter-cream: #FFFBEB;
  --butter-black: #000000;
  --butter-dark-gray: #242424;
  --butter-gray: #595959;
  --butter-gold: #FFDF3F;
  --butter-shade-gold: #EECF06;
  --butter-royal-blue: #6166E9;

  --butter-base-font: 'Poppins', sans-serif;
  --butter-text-font: 'Prata', serif;
  --butter-footer-font: 'Inter', sans-serif;

  /* Infima overrides */
  --ifm-color-primary: #6166E9;
  --ifm-color-primary-dark: #464cdf;
  --ifm-color-primary-darker: #3a40dc;
  --ifm-color-primary-darkest: #2127b8;
  --ifm-color-primary-light: #7c80ed;
  --ifm-color-primary-lighter: #888cef;
  --ifm-color-primary-lightest: #aeb0f4;
  --ifm-font-family-base: var(--butter-base-font);
  --ifm-heading-font-family: var(--butter-base-font);
  --ifm-navbar-background-color: var(--butter-gold);
  --ifm-footer-background-color: var(--butter-shade-gold);
  --ifm-footer-color: var(--butter-dark-gray);
  --ifm-footer-link-color: var(--butter-dark-gray);
  --ifm-footer-title-color: var(--butter-dark-gray);
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}

[data-theme='dark'] {
  --ifm-color-primary: #FFDF3F;
  --ifm-color-primary-dark: #f5d10b;
  --ifm-color-primary-darker: #e8c60b;
  --ifm-color-primary-darkest: #bfa309;
  --ifm-color-primary-light: #ffe668;
  --ifm-color-primary-lighter: #ffe97a;
  --ifm-color-primary-lightest: #fff0a6;
  --ifm-background-color: #242424;
  --ifm-navbar-background-color: #4a3f07;
  --ifm-footer-background-color: #1b1b1b;
  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

/* ---- General typography ---- */
body {
  font-family: var(--butter-base-font);
  font-weight: 400;
}

/* ---- Butter hero band (gold) ---- */
.butter-hero {
  background-color: var(--butter-gold);
  padding: 3.5rem 0 3rem;
  text-align: center;
}
.butter-hero .hero-logo {
  display: block;
  margin: 0 auto 1.25rem;
  max-width: 240px;
  width: 60%;
  height: auto;
}
.butter-hero .hero-title {
  font-size: 42px;
  font-weight: 800;
  color: var(--butter-black);
  margin: 0 0 .75rem;
}
.butter-hero .hero-subtitle {
  font-family: var(--butter-text-font);
  font-size: 22px;
  color: var(--butter-black);
  letter-spacing: .4px;
  line-height: 1.5;
  max-width: 760px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .butter-hero { padding: 2.25rem 0 2rem; }
  .butter-hero .hero-title { font-size: 32px; }
  .butter-hero .hero-subtitle { font-size: 18px; }
}

/* ---- Content area (lighter cream background) ---- */
.butter-content {
  background-color: var(--butter-cream);
  padding: 3.5rem 0 4rem;
}
[data-theme='dark'] .butter-content {
  background-color: var(--ifm-background-color);
}
.butter-content .section {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
}
.butter-content .section:last-child {
  margin-bottom: 0;
}
.butter-content h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 .75rem;
}
.butter-content .content-text {
  font-family: var(--butter-text-font);
  font-size: 20px;
  line-height: 1.6;
  color: var(--butter-black);
  letter-spacing: .4px;
  margin: 0 0 1.25rem;
}
[data-theme='dark'] .butter-content .content-text,
[data-theme='dark'] .butter-content h2 {
  color: var(--ifm-font-color-base);
}
@media (max-width: 768px) {
  .butter-content .content-text { font-size: 17px; }
  .butter-content h2 { font-size: 24px; }
}

/* ---- Device image ---- */
.butter-content .device-image {
  margin: 1rem auto 2.5rem;
  text-align: center;
}
.butter-content .device-image img {
  display: block;
  margin: 0 auto;
  max-width: 70%;
  border-radius: 8px;
}
.butter-content .device-image .caption {
  font-family: var(--butter-text-font);
  font-size: 15px;
  color: var(--butter-gray);
  margin: .75rem auto 0;
  max-width: 70%;
}

/* ---- Pill button matching the original .btn-main ---- */
.btn-main {
  display: inline-block;
  font-weight: 600;
  color: var(--butter-white);
  text-align: center;
  user-select: none;
  background-color: var(--butter-royal-blue);
  border: 1px solid var(--butter-royal-blue);
  padding: 1.25em 2.75em;
  font-size: 12px;
  letter-spacing: 1px;
  line-height: 1.5;
  border-radius: 50rem;
  transition: all .2s ease;
  text-decoration: none;
  margin-bottom: 10px;
}
.btn-main:hover,
.btn-main:focus {
  background-color: #7378ec;
  color: var(--butter-white);
  text-decoration: none;
}