Styling and Theming Soumyajit Landing Pages

Global styles in the Soumyajit Landing Pages template live in src/style.css, which uses CSS custom properties (variables) to drive the major visual decisions — backgrounds, gradients, and accent colors — from a single location. Component-specific overrides use class-name-based rules in the same file. Bootstrap is extended rather than replaced: the template layers its own !important declarations on top of Bootstrap’s utility classes wherever custom behavior is needed.

CSS custom properties

The entire visual theme is anchored by three custom properties declared on the html element at the top of src/style.css.

src/style.css

html {
  --section-background-colorr: linear-gradient(
    to bottom left,
    rgba(17, 16, 16, 0.582),
    rgba(12, 8, 24, 0.904)
  );

  --image-gradientt: linear-gradient(
    to bottom left,
    rgba(17, 16, 16, 0.678),
    rgba(12, 10, 22, 0.863)
  );

  --imp-text-color: #c770f0;
}

Variable	What it controls
`--section-background-colorr`	The semi-transparent dark gradient overlay applied to the Projects, About, and Resume section backgrounds via `background-image`. Two stops blend from a slightly lighter dark top-right to a deeper near-black bottom-left.
`--image-gradientt`	A similar but slightly denser gradient intended for use over hero/avatar images. It is available for any section that layers a gradient over a background image.
`--imp-text-color`	The global accent/highlight color used by the `.purple` utility class. Changing this single value recolors every highlighted name, heading word, and link underline across the whole site.

Note the intentional double-r in --section-background-colorr and double-t in --image-gradientt. These are the actual variable names in the source; use them exactly when referencing the variables elsewhere in your CSS.

Scrollbar

The custom scrollbar styles in src/style.css target WebKit-based browsers (Chrome, Edge, Safari).

src/style.css

::-webkit-scrollbar {
  width: 7px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #2d1950;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: rgba(178, 121, 216, 0.959);
  border-radius: 12px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: rgba(222, 130, 235, 0.911);
  border-radius: 12px;
}

Track (#2d1950) — the channel the thumb slides inside. Change this to match your dark background color.
Thumb (rgba(178, 121, 216, …)) — the draggable handle. Adjust the RGBA values or swap in a hex color to match your accent.
Thumb on hover — a slightly lighter/brighter version of the thumb color to give hover feedback.

To remove the custom scrollbar and fall back to the OS default, delete all four ::-webkit-scrollbar rule blocks. The navbar uses two states — a transparent default and a frosted-glass sticky state that activates once the user scrolls 20 px down the page.

src/style.css

/* Scrolled / sticky state */
.sticky {
  background-color: #1b1a2ea9 !important;
  transition: all 0.3s ease-out 0s !important;
  box-shadow: 0px 10px 10px 0px rgba(9, 5, 29, 0.171) !important;
  backdrop-filter: blur(15px) !important;
}

/* Default fixed state */
.navbar {
  position: fixed !important;
  transition: all 0.3s ease-out 0s !important;
  padding: 0.3rem 2rem !important;
  font-size: 1.2rem !important;
}

backdrop-filter: blur(15px) creates the frosted-glass blur effect when the navbar is sticky. Increase the pixel value for a heavier blur, or remove the property to go fully opaque.
background-color: #1b1a2ea9 — the a9 alpha suffix makes the background semi-transparent. Adjust the hex or alpha to change the tint.
At mobile widths (max-width: 767px), the navbar switches to a fully opaque dark background (#181a27) to keep text legible over the hero content.

The hamburger menu icon is drawn with three <span> elements whose color is controlled by:

src/style.css

.navbar-toggler span {
  display: block !important;
  background-color: #be50f4 !important;
  height: 4px !important;
  width: 27px !important;
  margin-top: 5px !important;
  margin-bottom: 5px !important;
}

Change background-color: #be50f4 to any color to restyle the hamburger bars.

Section backgrounds

Each main section has its own class that applies the global gradient variable as a background-image.

src/style.css

.home-section {
  position: relative;
  z-index: -1;
  background-position: top center;
  background-repeat: no-repeat;
  padding-bottom: 30px !important;
  padding-top: 30px !important;
}

.about-section {
  position: relative !important;
  padding-top: 150px !important;
  padding-bottom: 30px !important;
  background-image: var(--section-background-colorr) !important;
  color: rgb(26, 25, 25) !important;
}

.project-section {
  position: relative !important;
  padding-top: 150px !important;
  padding-bottom: 30px !important;
  background-image: var(--section-background-colorr) !important;
}

.resume-section {
  position: relative !important;
  padding-top: 110px !important;
  padding-bottom: 30px !important;
  background-image: var(--section-background-colorr) !important;
  color: white !important;
}

To swap any section from the gradient to a solid color, override background-image with background-color:

src/style.css

/* Example: give the projects section a solid dark purple background */
.project-section {
  background-image: none !important;
  background-color: #1a0a2e !important;
}

To use a custom gradient, replace the var() reference with your own linear-gradient():

src/style.css

.about-section {
  background-image: linear-gradient(
    135deg,
    rgba(116, 76, 250, 0.15),
    rgba(10, 4, 22, 0.95)
  ) !important;
}

Typography

The site inherits Bootstrap’s system font stack by default (-apple-system, BlinkMacSystemFont, "Segoe UI", etc.). To add a custom Google Font, follow these two steps:

Add the Google Fonts link to index.html

Insert a <link> element inside the <head> of public/index.html, before the closing </head> tag:

public/index.html

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
  rel="stylesheet"
/>

Apply the font in style.css

Add a body rule in src/style.css to set the new font family:

src/style.css

body {
  font-family: "Inter", sans-serif;
}

Because Bootstrap sets font-family on body itself, adding !important may be needed if the override does not take effect without it.

Bootstrap overrides

The template overrides Bootstrap’s .btn-primary style so that all primary buttons use the brand’s purple palette instead of Bootstrap blue.

src/style.css

.btn-primary {
  color: #fff !important;
  background-color: #623686 !important;
  border-color: #623686 !important;
}

.btn-primary:hover {
  color: #fff !important;
  background-color: #6d20c5d7 !important;
  border-color: #6d20c5d7 !important;
}

Change #623686 to your brand’s button color. The !important declarations are necessary to override Bootstrap’s specificity. If you introduce additional button variants (e.g., .btn-secondary, .btn-outline-primary), add corresponding override blocks here following the same pattern.

Dark vs light mode

The template is dark-mode-first — most sections use white or light text on dark gradient backgrounds. However, the home and about sections are intentionally lighter to contrast with the particle animation and hero imagery.

Area	Text color rule	Location in `style.css`
Hero heading & home copy	`color: black`	`.home-content`
Home “about” description	`color: black !important`	`.home-about-description`
Home social label	`color: black !important`	`.home-about-social`
About section body	`color: rgb(26, 25, 25) !important`	`.about-section`
Project card text	`color: black !important`	`.project-card-view`, `.blog-card-view`
Project section heading	`color: black !important`	`.project-heading`
Resume section	`color: white !important`	`.resume-section`
Navbar links	`color: white !important`	`.navbar-nav .nav-link`
Footer text	`color: white !important`	`.footer h3`

To switch the entire site to a light theme, update the section background variables to light gradients or solid colors and change the color rules in .home-content, .about-section, and the remaining dark-text classes to a dark foreground value (e.g., #111).

The quickest way to re-theme is to update --imp-text-color in src/style.css first. Head to Branding for the full accent-color workflow.

Get Started

Customization

Components

Deployment

Styling and Theming Soumyajit Landing Pages

CSS custom properties

Scrollbar

Navbar

Section backgrounds

Typography

Bootstrap overrides

Dark vs light mode

Build docs developers (and LLMs) love

Get Started

Customization

Components

Deployment

Documentation Index

​CSS custom properties

​Scrollbar

​Navbar

​Section backgrounds

​Typography

​Bootstrap overrides

​Dark vs light mode

Build docs developers (and LLMs) love

CSS custom properties

Scrollbar

Navbar

Section backgrounds

Typography

Bootstrap overrides

Dark vs light mode