Styling and Theming

Relevant source files

The following files were used as context for generating this wiki page:

• css/style.css
• css/custom.css
• css/changes.css
• css/fonts.css
• about.html
• properties.html
• js/script.js

The Vandore Heritage website employs a multi-layered styling approach, combining third-party libraries with a set of custom stylesheets to create its distinct visual identity. The system is built on a plain CSS workflow without pre-processors like SASS or LESS, as indicated by the project's dependencies. Styles are loaded directly in the HTML <head>, with a specific order of precedence that allows for base styling, modifications, and custom brand overrides.

The theming is characterized by a dark, professional color palette with a strong red accent color. Responsiveness is handled through media queries, which adjust layout, typography, and component visibility for different screen sizes. Dynamic styling is achieved using JavaScript (jQuery) to toggle classes based on user interactions like scrolling or clicking.

CSS Architecture

The project's styling is segmented into several CSS files, each with a specific role. These files are loaded in a cascade, allowing for a structured and overridable system.

File Loading Order

The CSS files are loaded in a specific sequence within the <head> of each HTML page to ensure a predictable cascade. Custom styles are loaded after library and base styles, allowing them to take precedence.

This diagram illustrates the loading flow of stylesheets.

Key Stylesheet Summary

File	Purpose
css/style.css	Provides the main base styles for the entire website, likely including resets, typography, and layout primitives.
css/changes.css	Contains modifications and overrides to the base style.css. Its purpose is to apply specific tweaks without altering the base file.
css/custom.css	Implements brand-specific styles, custom components like the property filter bar, and responsive media queries.
css/fonts.css	Defines custom font-face rules, such as the rtmicon icon font used throughout the site.

Sources: about.html:8-11, css/custom.css, css/fonts.css

Core Styling Concepts

Color Palette

The website uses a consistent color palette to enforce its brand identity. The primary accent color is a deep red, used for buttons, active states, and highlights.

Color	Hex Code	Usage Example	Source File
Primary	#480607	.filter-bar .btn.active, .filter-bar .btn-primary	css/custom.css:30, 41
Text/UI	#5C5C5B	.filter-bar .form-group label, .active-filters .chip	css/custom.css:11, 56
Borders	rgba(175, 164, 149, 0.4)	.filter-bar, .filter-bar .form-control	css/custom.css:5, 20
Background	#ffffff	.filter-bar background	css/custom.css:2

Typography and Fonts

The project leverages Google Fonts and a custom icon font.

• Google Fonts: Noto Sans (weights 400, 600) and Noto Serif (weight 700) are imported for body text and headings.
  Sources: about.html:7
• Custom Icon Font: css/fonts.css defines an rtmicon font family, which is used for icons like arrows (rtmicon-arrow-right) and location pins (rtmicon-location).
  Sources: properties.html:329, css/fonts.css

Component Styling: Property Filter

The properties page features a filter bar that is a key example of custom component styling and responsive design.

Sources: properties.html:168-223, css/custom.css:1-100

Desktop View

On larger screens, the filter bar is a horizontal component with input fields for location, price range, and buttons for bedroom count.

/* css/custom.css:1-5 */
.filter-bar {
    background-color: #ffffff;
    padding: 12px 16px;
    border-radius: 8px;
    border: 1px solid rgba(175, 164, 149, 0.4);
}

The active state of filter buttons uses the primary brand color.

/* css/custom.css:30-34 */
.filter-bar .btn-group .btn.active {
    background-color: #480607;
    color: #ffffff;
    border-color: #480607;
}

Mobile/Responsive View

On smaller screens (below 1024px), the filter bar is hidden and replaced by a "Filters" button that toggles an off-canvas drawer. This behavior is controlled by media queries in css/custom.css.

This diagram shows the logic for displaying the filter UI based on screen width.

The media query responsible for this change:

/* css/custom.css:88-91 */
@media (min-width: 768px) {
    .filter-drawer {
        display: none;
    }
}

And for smaller screens:

/* css/custom.css:84-87 */
@media (max-width: 767px) {
    .filter-drawer {
        display: block;
    }
}

Dynamic Styling with JavaScript

JavaScript is used to add or remove CSS classes dynamically, creating interactive visual effects. The primary script for this is js/script.js, which uses jQuery.

Header Scroll Effect

When the user scrolls down more than 100 pixels, the glass-effect class is added to the <header> element. This class likely applies a translucent background or a box shadow to distinguish the header from the content it scrolls over.

This sequence diagram shows the interaction between the user, browser, and JavaScript to apply the style.

The corresponding code snippet:

// js/script.js:7-12
$(window).on('scroll', function () {
    var scroll = $(window).scrollTop();
    $("#header").toggleClass('glass-effect', scroll > 100);

    // Jalankan fungsi checkScroll juga saat scroll
    checkScroll();
});

Tab Component Activation

The script also handles tabbed interfaces. When a .tab element is clicked, it removes the active class from its siblings and adds it to the clicked tab. It then shows the corresponding content pane by matching the data-tab attribute to an element ID.

// js/script.js:15-25
$(document).on('click', '.tab', function () {
    let tabs = $(this).closest('.tabs');
    let tabContent = tabs.siblings('.tab-content');

    tabs.find('.tab').removeClass('active');
    $(this).addClass("active");

    let selectedTab = $(this).data("tab");
    tabContent.find(".content").removeClass("active");
    tabContent.find("#" + selectedTab).addClass("active");
});

This pattern is used for the "Meet the team" section on the about.html page.

Sources: js/script.js:15-25, about.html:283-341