Styles (SCSS)

Styles are written in SCSS in src/scss/ and compiled to assets/css/omnira.css (readable) and omnira.min.css (compressed) by the build. Bootstrap 5's CSS is loaded first from assets/vendor/.

Files#

File	Contains
`omnira.scss`	The entry file that includes all the others.
`_variables.scss`	Default colours, radius, header height, spacing and breakpoints, plus the `up()`/`down()` media-query helpers.
`_base.scss`	CSS variables, typography, section tones and spacing, reveal animations.
`_buttons.scss`	Buttons and the play button.
`_header.scss`, `_nav-extras.scss`	Header, top bar, menus, dropdowns, mobile menu, colour switcher.
`_hero.scss`	All hero variants.
`_sections.scss`	Most content sections.
`_realestate.scss`	Search, property cards, filters, property pages, mortgage, agents, compare, blog article, 404, sign-in, jobs.
`_footer.scss`, `_components.scss`	Footer; forms, lightbox, back-to-top, demo switcher, overview page.
`modules/_core-*.scss`	Detail pages, bento, tabs, slider, before/after, shop and other newer sections.
`modules/_<demo>.scss`	Touches specific to one demo, scoped to `body.demo-<demo>`.

Colours are CSS variables#

Components use variables such as var(--primary), var(--dark) and var(--radius), which each page sets from its demo's theme. That's why changing a hex value in demo.json restyles everything. Inside a section, tone-aware variables adapt to the background: --bg, --fg (text), --hd (headings), --muted, --card, --line, --brand.

Adding your own styles#

Create a file in src/scss/modules/, e.g. _my-site.scss. Every file in that folder is included automatically:

src/scss/modules/_my-site.scss

@use '../variables' as *;

// Larger hero titles on my restaurant site only
.demo-restaurant .hero-title { font-size: clamp(3rem, 2rem + 4vw, 6rem); }

// Rounder cards everywhere
.feature-cards, .service-card, .post-card { border-radius: 24px; }

@include down($bp-md) {
  .hero-text { font-size: 1rem; }
}

Keeping your changes in your own file means template updates won't overwrite them.

Page and demo classes#

Every <body> has demo-<demo> and page-<page> classes, e.g. <body class="demo-cafe page-about …">, so you can target one demo or one page.