/* =========================================================
   SmartD ClickHelp Portal Home
   Brand Guide — September 2026

   COLORS
   Rich Black : #101010
   Charcoal   : #1B1B1B
   Emerald    : #4FDA6E
   Dark Green : #163F2D
   Mint       : #ACFFC9

   TYPOGRAPHY
   Headings   : Sora
   Body       : Plus Jakarta Sans
   ========================================================= */


/* =========================================================
   01 — FONTS
   ========================================================= */

@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Sora:wght@600;700&display=swap");


/* =========================================================
   02 — BRAND VARIABLES
   ========================================================= */

.Home_page {
  --sd-black: #101010;
  --sd-charcoal: #1B1B1B;
  --sd-green: #4FDA6E;
  --sd-dark-green: #163F2D;
  --sd-mint: #ACFFC9;
  --sd-white: #FFFFFF;

  --sd-text: #FFFFFF;
  --sd-text-muted: rgba(255, 255, 255, 0.72);
  --sd-text-subtle: rgba(255, 255, 255, 0.55);

  --sd-border-soft: rgba(79, 218, 110, 0.45);

  --sd-font-heading: "Sora", Arial, sans-serif;
  --sd-font-body: "Plus Jakarta Sans", Arial, sans-serif;

  --sd-max-width: 1240px;

  --sd-radius: 8px;
  --sd-radius-large: 10px;

  --sd-grid-gap: 16px;

  --sd-card-padding: 18px;
  --sd-card-min-height: 102px;

  --sd-icon-size: 52px;
  --sd-icon-radius: 7px;

  --sd-image-opacity: 0.18;

  min-height: 100vh;

  background: var(--sd-black);
  color: var(--sd-text);

  font-family: var(--sd-font-body);
}


/* Make the surrounding page dark when this is the Home page */
body:has(.Home_page) {
  background: var(--sd-black);
}


/* Predictable sizing */
.Home_page *,
.Home_page *::before,
.Home_page *::after {
  box-sizing: border-box;
}


/* =========================================================
   03 — PAGE CONTAINER
   ========================================================= */

.Home_page :is(
  main,
  .main,
  .content,
  .pageContent,
  .Body,
  .CHBody,
  .CHContent
) {
  width: 100%;
  max-width: var(--sd-max-width);

  margin-inline: auto;
}


/* =========================================================
   04 — TYPOGRAPHY
   ========================================================= */

.Home_page {
  font-family: var(--sd-font-body);
}


.Home_page :is(
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
) {
  font-family: var(--sd-font-heading);

  color: var(--sd-white);
}


.Home_page :is(
  p,
  span,
  label,
  input,
  button
) {
  font-family: var(--sd-font-body);
}


/* Section headings */
.Home_page h2 {
  margin: 30px 0 14px;

  padding-left: 14px;

  border-left: 4px solid var(--sd-green);

  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.015em;

  color: var(--sd-white);
}


/* =========================================================
   05 — HERO / SEARCH AREA
   ========================================================= */

.Home_page :is(
  .CHHeroBannerBlock,
  .CHHomeHeroBlock,
  .HeroBannerBlock,
  .CHBlock_heroBanner
) {
  position: relative;

  overflow: hidden;

  margin: 12px 0 22px;
  padding: 26px 22px;

  border: 1px solid var(--sd-border-soft);
  border-radius: var(--sd-radius-large);

  background:
    radial-gradient(
      circle at top right,
      rgba(79, 218, 110, 0.12),
      transparent 42%
    ),
    linear-gradient(
      135deg,
      var(--sd-charcoal) 0%,
      var(--sd-black) 100%
    );

  color: var(--sd-white);
}


/* Hero headings */
.Home_page :is(
  .CHHeroBannerBlock,
  .CHHomeHeroBlock,
  .HeroBannerBlock,
  .CHBlock_heroBanner
) :is(
  h1,
  h2,
  h3
) {
  color: var(--sd-white);
}


/* =========================================================
   06 — SEARCH FIELD
   ========================================================= */

.Home_page :is(
  .CHHeroBannerBlock,
  .CHHomeHeroBlock,
  .HeroBannerBlock,
  .CHBlock_heroBanner
) :is(
  input[type="search"],
  input[type="text"],
  .CHSearchBox_input
) {
  width: min(820px, 100%);
  height: 52px;

  padding: 0 16px;

  border: 2px solid var(--sd-border-soft);
  border-radius: var(--sd-radius);

  background: var(--sd-charcoal);

  color: var(--sd-white);
  caret-color: var(--sd-green);

  font-size: 1rem;

  outline: none;

  transition:
    border-color 0.18s ease,
    background-color 0.18s ease,
    box-shadow 0.18s ease;
}


/* Placeholder */
.Home_page :is(
  .CHHeroBannerBlock,
  .CHHomeHeroBlock,
  .HeroBannerBlock,
  .CHBlock_heroBanner
) :is(
  input[type="search"],
  input[type="text"],
  .CHSearchBox_input
)::placeholder {
  color: var(--sd-text-subtle);

  opacity: 1;
}


/* Hover */
.Home_page :is(
  .CHHeroBannerBlock,
  .CHHomeHeroBlock,
  .HeroBannerBlock,
  .CHBlock_heroBanner
) :is(
  input[type="search"],
  input[type="text"],
  .CHSearchBox_input
):hover {
  border-color: var(--sd-green);
}


/* Focus */
.Home_page :is(
  .CHHeroBannerBlock,
  .CHHomeHeroBlock,
  .HeroBannerBlock,
  .CHBlock_heroBanner
) :is(
  input[type="search"],
  input[type="text"],
  .CHSearchBox_input
):focus {
  border-color: var(--sd-green);

  background: var(--sd-black);

  box-shadow:
    0 0 0 3px rgba(79, 218, 110, 0.18);
}


/* Search icon */
.Home_page :is(
  .CHSearchBox_icon,
  .CHSearchButton,
  .CHSearchBox_button
) {
  color: var(--sd-green);
}


/* =========================================================
   07 — PUBLICATION GRID
   ========================================================= */

.Home_page .CHPubsListBlock_pubsContainer {
  margin: 0 0 22px;
}


.Home_page
.CHPubsListBlock_pubsContainer
.CHPubsListBlock_pubsList {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: var(--sd-grid-gap);

  align-items: stretch;
}


/* =========================================================
   08 — PUBLICATION CARD
   ========================================================= */

.Home_page a.CHPubsListBlock_clickableCard {
  position: relative;

  display: block;

  overflow: hidden;

  border: 2px solid var(--sd-green);
  border-radius: var(--sd-radius);

  background: var(--sd-charcoal);

  text-decoration: none;

  transform: translateY(0);

  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease;
}


/* =========================================================
   09 — CARD BACKGROUND IMAGE
   ========================================================= */

.Home_page
a.CHPubsListBlock_clickableCard::before {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 0;

  background-image: var(--sd-card-bg);
  background-size: cover;
  background-position: center;

  opacity: var(--sd-image-opacity);

  filter:
    saturate(0.8)
    contrast(1.05);

  transition:
    opacity 0.18s ease,
    filter 0.18s ease;
}


/* Dark readability layer */
.Home_page
a.CHPubsListBlock_clickableCard::after {
  content: "";

  position: absolute;
  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      105deg,
      rgba(27, 27, 27, 0.97) 0%,
      rgba(27, 27, 27, 0.90) 60%,
      rgba(16, 16, 16, 0.82) 100%
    );

  transition:
    background 0.18s ease;
}


/* =========================================================
   10 — CARD CONTENT
   ========================================================= */

.Home_page
.CHPubsListBlock_cardContent {
  position: relative;

  z-index: 2;

  display: flex;
  align-items: center;

  min-height: var(--sd-card-min-height);

  padding: var(--sd-card-padding);

  gap: 16px;

  background: transparent;
}


.Home_page
.CHPubsListBlock_cardHorizontal {
  width: 100%;
}


/* =========================================================
   11 — ICON CONTAINER
   ========================================================= */

.Home_page
.CHPubsListBlock_iconContainer {
  width: var(--sd-icon-size);
  height: var(--sd-icon-size);

  flex:
    0 0 var(--sd-icon-size);

  display: grid;

  place-items: center;

  overflow: hidden;

  border: 2px solid var(--sd-green);
  border-radius: var(--sd-icon-radius);

  background: var(--sd-green);

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease;
}


/* Remove ClickHelp's internal icon background */
.Home_page
.CHPubsListBlock_iconBackground {
  display: none;
}


/* =========================================================
   12 — FONT-BASED ICONS
   ========================================================= */

.Home_page
.CHPubsListBlock_icon {
  font-size: 21px;
  line-height: 1;

  color: var(--sd-black) !important;
}


/* =========================================================
   13 — IMAGE ICONS
   ========================================================= */

.Home_page
.CHPubsListBlock_imgIcon {
  width: 68%;
  height: 68%;

  object-fit: contain;

  /*
     ClickHelp publication icons may be supplied in
     dark gray or black. Force them to SmartD Rich Black
     for consistent visibility on the Emerald square.
  */
  filter: brightness(0);
}


/* =========================================================
   14 — PUBLICATION TITLE
   ========================================================= */

.Home_page
.CHPubsListBlock_clickableCard
.CHPubsListBlock_pubName {
  display: -webkit-box;

  overflow: hidden;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  flex: 1 1 auto;

  font-family: var(--sd-font-heading);

  font-weight: 600;
  line-height: 1.25;

  color: var(--sd-white);

  transition:
    color 0.18s ease;
}


/* Override ClickHelp inline colors */
.Home_page
.CHPubsListBlock_clickableCard
.CHPubsListBlock_pubName[style*="color"] {
  color: var(--sd-white) !important;
}


/* =========================================================
   15 — PUBLICATION DESCRIPTION
   ========================================================= */

.Home_page :is(
  .CHPubsListBlock_pubDescription,
  .CHCardsListBlock_cardDescription,
  .CHCardsListBlock_desc
) {
  display: -webkit-box;

  overflow: hidden;

  margin-top: 6px;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;

  line-height: 1.45;

  color: var(--sd-text-muted);

  transition:
    color 0.18s ease;
}


/* Override ClickHelp inline colors */
.Home_page
.CHPubsListBlock_clickableCard
:is(
  .CHPubsListBlock_pubDescription,
  .CHCardsListBlock_cardDescription,
  .CHCardsListBlock_desc
)[style*="color"] {
  color: var(--sd-text-muted) !important;
}


/* =========================================================
   16 — CARD HOVER
   Dark card → Emerald card
   ========================================================= */

.Home_page
a.CHPubsListBlock_clickableCard:hover {
  border-color: var(--sd-green);

  transform: translateY(-2px);

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.22);
}


/* Green card surface */
.Home_page
a.CHPubsListBlock_clickableCard:hover::after {
  background:
    rgba(79, 218, 110, 0.96);
}


/* Background image remains subtly visible */
.Home_page
a.CHPubsListBlock_clickableCard:hover::before {
  opacity: 0.07;

  filter:
    grayscale(1)
    contrast(1.1);
}


/* Title → black */
.Home_page
a.CHPubsListBlock_clickableCard:hover
.CHPubsListBlock_pubName {
  color: var(--sd-black) !important;
}


/* Description → black */
.Home_page
a.CHPubsListBlock_clickableCard:hover
:is(
  .CHPubsListBlock_pubDescription,
  .CHCardsListBlock_cardDescription,
  .CHCardsListBlock_desc
) {
  color: rgba(16, 16, 16, 0.82) !important;
}


/* Icon box → black */
.Home_page
a.CHPubsListBlock_clickableCard:hover
.CHPubsListBlock_iconContainer {
  background: var(--sd-black);

  border-color: var(--sd-black);
}


/* Font icon → green */
.Home_page
a.CHPubsListBlock_clickableCard:hover
.CHPubsListBlock_icon {
  color: var(--sd-green) !important;
}


/* Image icon → white */
.Home_page
a.CHPubsListBlock_clickableCard:hover
.CHPubsListBlock_imgIcon {
  filter:
    brightness(0)
    invert(1);
}


/* =========================================================
   17 — KEYBOARD FOCUS
   Same visual logic as hover
   ========================================================= */

.Home_page
a.CHPubsListBlock_clickableCard:focus-visible {
  outline:
    3px solid var(--sd-mint);

  outline-offset: 3px;

  border-color: var(--sd-green);
}


/* Green surface */
.Home_page
a.CHPubsListBlock_clickableCard:focus-visible::after {
  background:
    rgba(79, 218, 110, 0.96);
}


/* Black title */
.Home_page
a.CHPubsListBlock_clickableCard:focus-visible
.CHPubsListBlock_pubName {
  color: var(--sd-black) !important;
}


/* Black description */
.Home_page
a.CHPubsListBlock_clickableCard:focus-visible
:is(
  .CHPubsListBlock_pubDescription,
  .CHCardsListBlock_cardDescription,
  .CHCardsListBlock_desc
) {
  color:
    rgba(16, 16, 16, 0.82) !important;
}


/* Black icon box */
.Home_page
a.CHPubsListBlock_clickableCard:focus-visible
.CHPubsListBlock_iconContainer {
  background: var(--sd-black);

  border-color: var(--sd-black);
}


/* Green font icon */
.Home_page
a.CHPubsListBlock_clickableCard:focus-visible
.CHPubsListBlock_icon {
  color: var(--sd-green) !important;
}


/* White image icon */
.Home_page
a.CHPubsListBlock_clickableCard:focus-visible
.CHPubsListBlock_imgIcon {
  filter:
    brightness(0)
    invert(1);
}


/* =========================================================
   18 — ACTIVE / CLICK
   ========================================================= */

.Home_page
a.CHPubsListBlock_clickableCard:active {
  transform: translateY(0);
}


/* =========================================================
   19 — PUBLICATION BACKGROUND IMAGES
   ========================================================= */


/* Clean Power VFD User Guide */
.Home_page
a.CHPubsListBlock_clickableCard[
  href="/articles/clean-power-vfd-publication"
] {
  --sd-card-bg:
    url("https://smartd.clickhelp.co/resources/Storage/BG_userguide.png");
}


/* Application Notes */
.Home_page
a.CHPubsListBlock_clickableCard[
  href^="/articles/an"
] {
  --sd-card-bg:
    url("https://smartd.clickhelp.co/resources/Storage/BG_applicationnote.jpg");
}


/* Product Datasheets */
.Home_page
a.CHPubsListBlock_clickableCard[
  href="/articles/products-datasheets-publication"
] {
  --sd-card-bg:
    url("https://smartd.clickhelp.co/resources/Storage/BG_productSpec.jpg");
}


/* =========================================================
   20 — MANUAL CLICKHELP CARDS
   ========================================================= */

.Home_page
.CHCardsListBlock_cardsList {
  display: grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap: var(--sd-grid-gap);

  align-items: stretch;
}


.Home_page
a.CHCardsListBlock_clickableCard {
  position: relative;

  display: block;

  overflow: hidden;

  min-height: var(--sd-card-min-height);

  border: 2px solid var(--sd-green);
  border-radius: var(--sd-radius);

  background: var(--sd-charcoal);

  color: var(--sd-white);

  text-decoration: none;

  transform: translateY(0);

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}


/* Manual card titles */
.Home_page
a.CHCardsListBlock_clickableCard
:is(
  .CHCardsListBlock_cardTitle,
  .CHCardsListBlock_title,
  h3,
  h4
) {
  font-family:
    var(--sd-font-heading);

  font-weight: 600;

  color: var(--sd-white);

  transition:
    color 0.18s ease;
}


/* Manual card descriptions */
.Home_page
a.CHCardsListBlock_clickableCard
:is(
  .CHCardsListBlock_cardDescription,
  .CHCardsListBlock_desc
) {
  color:
    var(--sd-text-muted);

  transition:
    color 0.18s ease;
}


/* Manual card hover */
.Home_page
a.CHCardsListBlock_clickableCard:hover {
  background: var(--sd-green);

  border-color: var(--sd-green);

  transform: translateY(-2px);

  box-shadow:
    0 6px 16px rgba(0, 0, 0, 0.22);
}


.Home_page
a.CHCardsListBlock_clickableCard:hover
:is(
  .CHCardsListBlock_cardTitle,
  .CHCardsListBlock_title,
  h3,
  h4
) {
  color: var(--sd-black) !important;
}


.Home_page
a.CHCardsListBlock_clickableCard:hover
:is(
  .CHCardsListBlock_cardDescription,
  .CHCardsListBlock_desc
) {
  color:
    rgba(16, 16, 16, 0.82) !important;
}


/* Manual card keyboard focus */
.Home_page
a.CHCardsListBlock_clickableCard:focus-visible {
  outline:
    3px solid var(--sd-mint);

  outline-offset: 3px;

  background: var(--sd-green);

  border-color: var(--sd-green);
}


.Home_page
a.CHCardsListBlock_clickableCard:focus-visible
:is(
  .CHCardsListBlock_cardTitle,
  .CHCardsListBlock_title,
  h3,
  h4
) {
  color: var(--sd-black) !important;
}


.Home_page
a.CHCardsListBlock_clickableCard:focus-visible
:is(
  .CHCardsListBlock_cardDescription,
  .CHCardsListBlock_desc
) {
  color:
    rgba(16, 16, 16, 0.82) !important;
}


/* =========================================================
   21 — STANDARD LINKS
   ========================================================= */

.Home_page
a:not(
  .CHPubsListBlock_clickableCard,
  .CHCardsListBlock_clickableCard
) {
  color: var(--sd-green);
}


.Home_page
a:not(
  .CHPubsListBlock_clickableCard,
  .CHCardsListBlock_clickableCard
):hover {
  color: var(--sd-mint);
}


/* =========================================================
   22 — TEXT SELECTION
   ========================================================= */

.Home_page ::selection {
  background: var(--sd-green);

  color: var(--sd-black);
}


/* =========================================================
   23 — TABLET
   ========================================================= */

@media (max-width: 1100px) {

  .Home_page
  .CHPubsListBlock_pubsContainer
  .CHPubsListBlock_pubsList,

  .Home_page
  .CHCardsListBlock_cardsList {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

}


/* =========================================================
   24 — MOBILE
   ========================================================= */

@media (max-width: 720px) {

  .Home_page
  .CHPubsListBlock_pubsContainer
  .CHPubsListBlock_pubsList,

  .Home_page
  .CHCardsListBlock_cardsList {
    grid-template-columns: 1fr;
  }


  .Home_page {
    --sd-card-padding: 15px;
    --sd-card-min-height: 92px;
    --sd-icon-size: 48px;
  }


  .Home_page h2 {
    margin-top: 24px;

    padding-left: 11px;

    font-size: 1.35rem;
  }


  .Home_page :is(
    .CHHeroBannerBlock,
    .CHHomeHeroBlock,
    .HeroBannerBlock,
    .CHBlock_heroBanner
  ) {
    padding: 20px 16px;
  }


  .Home_page
  .CHPubsListBlock_cardContent {
    gap: 12px;
  }

}


/* =========================================================
   25 — SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

  .Home_page {
    --sd-grid-gap: 12px;
  }


  .Home_page :is(
    .CHHeroBannerBlock,
    .CHHomeHeroBlock,
    .HeroBannerBlock,
    .CHBlock_heroBanner
  ) :is(
    input[type="search"],
    input[type="text"],
    .CHSearchBox_input
  ) {
    height: 48px;

    font-size: 0.95rem;
  }

}


/* =========================================================
   26 — REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .Home_page *,
  .Home_page *::before,
  .Home_page *::after {
    scroll-behavior: auto !important;
  }


  .Home_page
  a.CHPubsListBlock_clickableCard,

  .Home_page
  a.CHCardsListBlock_clickableCard,

  .Home_page :is(
    input[type="search"],
    input[type="text"],
    .CHSearchBox_input
  ) {
    transition: none;
  }


  .Home_page
  a.CHPubsListBlock_clickableCard:hover,

  .Home_page
  a.CHCardsListBlock_clickableCard:hover {
    transform: none;
  }

}.CHBlock_richTextContent, .CHBlock_container * {font-family: 'Segoe UI',Frutiger,'Frutiger Linotype','Dejavu Sans','Helvetica Neue',Arial,sans-serif;}