.elementor-137 .elementor-element.elementor-element-b0e3dbd{--display:flex;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-137 .c27-main-header:not(.header-scroll) .header-skin{background-color:rgba(25,28,31,0);border-color:rgba(255,255,255,0);}/* Start custom CSS for html, class: .elementor-element-9f7ff93 */.pand-btn--primary:hover {
    color: white;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7d63caa */.pand-btn--ghost-white:hover {
    color: white !important;
}
.pand-btn--secondary:hover {
    color: white !important;
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-b0e3dbd */:root {
  /* PAND Blue System */
  --color-navy:        #002F6E;   /* Primary — deep PAND navy */
  --color-navy-dark:   #001D45;   /* Darkest navy, headers/footer */
  --color-navy-mid:    #1565C0;   /* Medium blue, hover states */
  --color-blue-bright: #2196F3;   /* Electric blue, inline accents */
  --color-blue-light:  #E3F2FD;   /* Near-white blue tint, alt backgrounds */
  --color-blue-pale:   #F0F7FF;   /* Lightest tint, section backgrounds */
  --color-white:       #FFFFFF;
  --color-text-dark:   #0A1628;   /* Almost black with blue undertone */
  --color-text-mid:    #2C3E6B;   /* Mid tone for body text */
  --color-text-light:  #6B7FA8;   /* Muted, captions/labels */
  --color-border:      #D0E4F7;   /* Subtle blue-tinted borders */

  /* Typography */
  --font-display: 'Plus Jakarta Sans', sans-serif;
  --font-body:    'DM Sans', sans-serif;

  --fs-hero:   clamp(2.8rem, 5vw + 1rem, 5.5rem);
  --fs-h1:     clamp(2.2rem, 3.5vw + 0.5rem, 4rem);
  --fs-h2:     clamp(1.75rem, 2.5vw + 0.5rem, 2.75rem);
  --fs-h3:     clamp(1.25rem, 1.5vw + 0.25rem, 1.625rem);
  --fs-body:   clamp(1rem, 0.5vw + 0.875rem, 1.125rem);
  --fs-small:  clamp(0.8rem, 0.4vw + 0.7rem, 0.9rem);
  --fs-label:  0.75rem;

  /* Spacing */
  --space-xs:      clamp(0.5rem, 1vw, 0.75rem);
  --space-sm:      clamp(0.75rem, 1.5vw, 1.25rem);
  --space-md:      clamp(1.5rem, 3vw, 2.5rem);
  --space-lg:      clamp(2.5rem, 5vw, 4rem);
  --space-xl:      clamp(4rem, 8vw, 7rem);
  --space-section: clamp(5rem, 10vw, 9rem);

  /* Layout */
  --container-max:    1200px;
  --container-wide:   1400px;
  --container-narrow: 760px;
  --gutter:           clamp(1.25rem, 3vw, 2rem);

  /* Effects */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   20px;
  --radius-full: 9999px;
  --shadow-sm:   0 1px 4px rgba(0, 47, 110, 0.08);
  --shadow-md:   0 4px 20px rgba(0, 47, 110, 0.12);
  --shadow-lg:   0 12px 40px rgba(0, 47, 110, 0.16);
  --shadow-blue: 0 8px 30px rgba(21, 101, 192, 0.30);

  --transition-fast: 0.2s ease;
  --transition-base: 0.35s ease;
  --transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
```

---

## B. Typography

**Plus Jakarta Sans** (Google Fonts) — all headings, hero, CTAs, labels. Geometric but slightly rounded, carries authority without coldness. Perfect for a community org that needs to feel both official and human.

**DM Sans** (Google Fonts) — all body text. Exceptionally legible at small sizes, warm, bilingual-friendly (renders Farsi fallback gracefully if needed later).

Weights used: 400, 500, 600, 700, 800.

---

## C. Creative Direction

PAND is a bridge between where people come from and where they're going. The visual language should feel like **clarity in motion** — the kind of calm confidence you feel when someone finally explains things in your language. Deep navy anchors every page with institutional trust. The bright electric blue punctuates it with forward energy. Generous white space is not emptiness — it's breathing room for people making real decisions about their lives.

The signature design move is **full-bleed navy sections alternating with white/pale-blue sections**, creating a strong visual rhythm that pulls users down the page. Every section has exactly one job and communicates it in under three seconds. No decorative elements for decoration's sake — every shape, icon, and gradient earns its place. Typography does the heavy lifting: oversized bold numbers, short punchy headlines, clean two-line descriptions. The result should feel like **a Canadian government site got a soul**.

---

## D. Section Blueprints — Homepage
```
## NAV
Fixed top bar. White background with navy text and PAND logo left.
Nav links center. Two CTA buttons right: "Newsletter" (ghost) and 
"Add Your Business" (solid navy). Clean border-bottom on scroll.

## HERO
Full-viewport. Dark navy background (#001D45) with a subtle SVG 
mesh/network pattern overlay at 8% opacity — nods to community 
connection. Two-column (55/45): left has eyebrow label, H1, 
sub-headline, two bold CTAs side by side. Right has a clean abstract 
illustration — stylized Ottawa Parliament silhouette or geometric 
city abstraction in blue tones (SVG, on-brand).
Design move: The H1 has ONE line in electric blue (#2196F3) — 
"Your Ottawa" or similar — while the rest is white. Staggered 
fade-up on load. The two CTA buttons are clearly differentiated: 
primary (white bg, navy text) and secondary (electric blue bg, white 
text). No image dependency — fully CSS/SVG driven.

## STATS STRIP
Full-width. Light blue tint background (#E3F2FD). 4 stats in a row, 
separated by thin navy vertical dividers. Bold navy number, small 
label below. Simple, confident.
Design move: Numbers count up on scroll enter (lightweight JS counter).

## UPCOMING EVENTS
White background. Section label + H2 left-aligned. "View All →" link 
right-aligned, same row. Below: 3 event cards in a row. Each card 
has a date badge (navy circle, white number/month), event title, 
time, language tag (English/Farsi), and CTA link. Cards have 
--shadow-md and a left border in --color-blue-bright.
Design move: Date badge is the visual anchor — bold, geometric, 
immediately scannable. Cards slide up on scroll with staggered delay.

## BUSINESS DIRECTORY PREVIEW
Navy background (#002F6E). White headline + subtitle. Below: 
a 3×2 category grid — each cell is a rounded card with icon, 
category name, and listing count. Cards are semi-transparent 
white-on-navy. One prominent "Explore Full Directory →" CTA button 
(electric blue) centered below the grid.
Design move: Category cards have a glowing blue hover effect 
(box-shadow: --shadow-blue). The entire section feels like opening 
a door to something.

## NEWSLETTER SIGNUP
White background. Two-column (50/50): left has a bold headline 
("Stay Informed. Every Week."), a 3-line value prop, and the 4,000+ 
social proof stat. Right has the email capture form — name field, 
email field, submit button (navy). Clean, no clutter.
Design move: The "4,000+" number is huge — display size, navy, 
anchored visually. It does the persuasion work so the copy doesn't 
have to.

## SERVICES OVERVIEW
Pale blue background (#F0F7FF). Three service cards in a row: 
Pre-Arrival, Post-Arrival, Refugee Sponsorship. Each card: icon 
(navy SVG), bold H3, two-line description, "Learn More →" link. 
White card background, --shadow-sm, --radius-lg.
Design move: Hover lifts card and shifts left border to 
--color-blue-bright. Minimal — this section points elsewhere, 
doesn't try to explain everything.

## FOOTER
Dark navy (#001D45). Three columns: brand/logo + tagline + 
social icons; quick links; contact info + secondary newsletter 
form. Bottom bar: copyright, attribution, language switcher (EN/FA).
Design move: The PAND logo mark (circle icon only, white version) 
sits large behind the footer content at 6% opacity — a subtle 
watermark that reinforces brand without screaming./* End custom CSS */