Skip to main content

​
Overview

Adosa Real Estate uses a custom CSS design system built with CSS custom properties (variables) for consistent theming across the application. The system is defined in two main files:
  • src/styles/theme.css - Core design tokens
  • src/styles/global.css - Global styles and utilities

​
Color Palette

The site uses a premium color palette with warm, earthy tones: 
:root {
  /* Primary Colors */
  --color-1: #F2F1EB;  /* Background (Beige Light) */
  --color-2: #AEADA5;  /* Secondary (Gray Medium) */
  --color-3: #D7AE56;  /* Accent (Gold/Ochre) */
  --color-4: #53534B;  /* Text (Dark Gray Ochre) */

  /* Additional Colors */
  --color-overlay: #1a1a1a;
  --color-text-inverse: #ffffff;
}

Color 1

#F2F1EB - Background

Color 2

#AEADA5 - Secondary

Color 3

#D7AE56 - Accent Gold

Color 4

#53534B - Text
The color palette creates a sophisticated, premium feel appropriate for luxury real estate.

​
Typography

​
Font Family

The site uses Onest from Google Fonts for both headings and body text: 
:root {
  --font-heading: 'Onest', sans-serif;
  --font-body: 'Onest', sans-serif;
  --font-main: var(--font-body); /* Alias for compatibility */
}
Fonts are loaded in BaseLayout.astro: 
<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=Onest:[email protected]&display=swap" rel="stylesheet" />

​
Font Scale

:root {
  --font-size-h1: 4.5rem;   /* 72px */
  --font-size-h2: 3.5rem;   /* 56px */
  --font-size-h3: 2rem;     /* 32px */
  --font-size-p: 1.1rem;    /* 17.6px */
  --font-size-nav: 0.9rem;  /* 14.4px */
}

​
Layout Utilities

​
Container

The .container class provides consistent content width and padding: 
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 var(--spacing-md);
  position: relative;
  z-index: 2;
}

​
Section Utilities

.section {
  padding: var(--spacing-xl) 0;
}

.section-fullscreen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--spacing-xl) 0;
}

​
Spacing Variables

:root {
  --spacing-container: 4rem;    /* 64px */
  --height-nav: 90px;
}

@media (max-width: 768px) {
  :root {
    --spacing-container: 1.5rem; /* 24px */
    --height-nav: 70px;
  }
}

​
Button Styles

​
Base Button

.btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  font-family: var(--font-main);
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all var(--transition-smooth);
  text-decoration: none;
}

​
Button Variants

.btn-primary {
  background-color: var(--color-3); /* Gold */
  color: white;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(215, 174, 86, 0.3);
  opacity: 1;
}
Buttons include hover animations with smooth transforms and custom shadows.

​
Grid System

Flexible grid utilities for responsive layouts: 
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* Mobile: Stack all grids */
@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

​
Usage Example

<div class="grid grid-3">
  <div class="card">Item 1</div>
  <div class="card">Item 2</div>
  <div class="card">Item 3</div>
</div>

​
Animation Variables

:root {
  --ease-premium: cubic-bezier(0.25, 1, 0.5, 1);
  --duration-slow: 1.2s;
  --duration-medium: 0.8s;
}
Animation utilities for GSAP integration: 
.fade-in-section {
  opacity: 0;
  transform: translateY(50px);
}

.text-reveal {
  opacity: 0;
  transform: translateY(60px);
  will-change: transform, opacity;
}

/* Stagger delay classes */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
/* ... up to .delay-600 */

​
Utility Classes

.text-center {
  text-align: center;
}

.text-secondary {
  color: var(--color-2);
}

​
Responsive Design

​
Breakpoints

The primary breakpoint is 768px for mobile/desktop split: 
@media (max-width: 768px) {
  /* Mobile styles */
}

/* Desktop-first approach */
Lenis smooth scroll is disabled on mobile (screens < 1025px) to preserve native touch scrolling.
Dedicated print styles for property PDFs: 
@media print {
  @page {
    margin: 1.5cm !important;
    size: auto;
  }
  
  .navigation,
  .footer,
  .floating-dock {
    display: none !important;
  }
  
  .print-only-wc {
    display: block !important;
  }
}
See src/styles/global.css:368 for the complete print stylesheet.

​
Best Practices

1

Use CSS Variables

Always use design tokens instead of hardcoded values:
/* Good */
color: var(--color-3);

/* Bad */
color: #D7AE56;
2

Responsive Typography

Use clamp() for fluid typography that scales smoothly:
font-size: clamp(2rem, 4vw, var(--font-size-h2));
3

Mobile-First Grid

Let grids collapse automatically on mobile:
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Architecture

Learn about the overall project structure

Components

Explore pre-built components using the design system

Animations

Understand GSAP animation patterns

Styling Guide

Best practices for custom component styles

Build docs developers (and LLMs) love

Get started for freeTalk to us