# SurgeonShortlist — Complete Styling Reference for Divi 5
Use this as your reference while building in the Divi Visual Builder.
Every value here matches the approved landing page.
## Colour Palette
| Name | Hex | Use |
|------|-----|-----|
| Navy (Primary) | `#1B365D` | Headings,nav links,hero bg,buttons |
| Navy Dark | `#122440` | Footer bg,CTA button text |
| Navy Light | `#2A4A7A` | Button hover states |
| Gold (Accent) | `#C5A572` | CTA buttons,badges,section labels,highlights |
| Gold Light | `#D4BB94` | Button hover states,trust card headings |
| Gold Dark | `#A8894E` | Section label text,step time badges |
| White | `#FFFFFF` | Page background,card backgrounds |
| Off-white | `#F8F7F5` | Alternating section backgrounds |
| Light Gray | `#EEECEA` | Borders,nav bottom border,dividers |
| Body Text | `#1F2937` | Default paragraph text |
| Dark Gray | `#374151` | Secondary paragraph text |
| Mid Gray | `#6B7280` | Captions,micro text,placeholder text |
| Border | `#D1D5DB` | Input borders,card outlines |
## Typography
### Fonts-Headings:**Playfair Display** (Google Fonts)-Body:**Inter** (Google Fonts)
### Heading Sizes
| Element | Desktop | Tablet | Mobile | Weight | Line Height | Colour |
|---------|---------|--------|--------|--------|-------------|--------|
| H1 | 48px (3rem) | 40px | 32px (2rem) | 700 | 1.25 | White (on navy bg) or `#1B365D` |
| H2 | 32px (2rem) | 28px | 24px (1.5rem) | 700 | 1.25 | `#1B365D` |
| H3 | 18.4px (1.15rem) | 18px | 18px | 600 | 1.25 | `#1B365D` |
| H4 | 16px (1rem) | 16px | 16px | 600 | 1.25 | `#D4BB94` (trust cards) |
### Body Text
| Element | Size | Weight | Line Height | Colour |
|---------|------|--------|-------------|--------|
| Body default | 16px | 400 | 1.65 | `#1F2937` |
| Lead paragraph | 16.8px (1.05rem) | 400 | 1.8 | `#374151` |
| Small / micro | 13.1px (0.82rem) | 400 | 1.65 | `#6B7280` |
| Section label | 12px (0.75rem) | 600 | 1 | `#A8894E` |
| FAQ answer | 14.4px (0.9rem) | 400 | 1.75 | `#374151` |
| Footer body | 12.8px (0.8rem) | 400 | 1.85 | `rgba(255,255,255,0.6)` |
| Footer bold | 12.8px (0.8rem) | 700 | 1.85 | `rgba(255,255,255,0.8)` |
### Section Labels (small caps above titles)-Font:Inter-Size:12px (0.75rem)-Weight:600-Transform:UPPERCASE-Letter spacing:0.1em-Colour:`#A8894E` (on light bg) or `#D4BB94` (on navy bg)
## Spacing
### Section Padding
| | Desktop | Mobile |
|---|---------|--------|
| Top/Bottom | 80px | 56px |
### Content Width-Max width:**1080px**-Side padding:**24px**-Gutter width:Divi default (3)
### Common Internal Spacing-Title to content:24px-Paragraph to paragraph:16px-Cards grid gap:32px (steps),24px (trust cards)-Highlight box padding:20px top/bottom,24px left/right
## Buttons
### Primary CTA (Gold)
| Property | Value |
|----------|-------|
| Background | `#C5A572` |
| Text colour | `#122440` |
| Font | Inter |
| Size | 16.8px (1.05rem) |
| Weight | 700 |
| Padding | 16px top/bottom,36px left/right |
| Border radius | 8px |
| Hover bg | `#D4BB94` |
| Hover transform | translateY(-1px) |
| Hover shadow | `0 4px 16px rgba(197,165,114,0.3)` |
### Secondary CTA (Navy — nav bar)
| Property | Value |
|----------|-------|
| Background | `#1B365D` |
| Text colour | `#FFFFFF` |
| Font | Inter |
| Size | 14px (0.875rem) |
| Weight | 600 |
| Padding | 10px top/bottom,22px left/right |
| Border radius | 8px |
| Hover bg | `#2A4A7A` |
## Section-by-Section Styles
### Navigation (sticky)-Background:`#FFFFFF`-Bottom border:1px solid `#EEECEA`-Logo font:Playfair Display,21.6px (1.35rem),700-Logo colour:`#1B365D`,the word "Shortlist" in `#C5A572`-Position:sticky top 0,z-index 100
### Hero-Background:linear-gradient(175deg,`#1B365D` 0%,`#122440` 100%)-Text colour:`#FFFFFF`-Subheadline colour:`rgba(255,255,255,0.82)`-Micro text colour:`rgba(255,255,255,0.55)`-Badge:bg `rgba(197,165,114,0.15)`,border `rgba(197,165,114,0.25)`,text `#D4BB94`,12.8px,600 weight,uppercase,50px border radius-Padding:80px top,88px bottom (56px/64px mobile)
### Value Prop-Background:`#FFFFFF`-Highlight box:bg `#F8F7F5`,left border 3px solid `#C5A572`,border radius 0 8px 8px 0
### How It Works-Background:`#F8F7F5`-Step cards:bg `#FFFFFF`,padding 36px/28px,border radius 12px,shadow `0 4px 12px rgba(27,54,93,0.08)`-Step number circle:44px,bg `#1B365D`,text white,Playfair Display 19.2px-Step time badge:bg `rgba(197,165,114,0.12)`,text `#A8894E`,12.5px,600 weight,50px radius
### Report Section-Background:`#FFFFFF`-Two column grid:1fr 1fr,gap 48px (stacks on mobile)-Check icons:22px circle,bg `#1B365D`,white checkmark SVG-Report detail text colour:`#6B7280`-Pricing box:bg `#F8F7F5`,border radius 12px,padding 36px-Price tag:Playfair Display,40px (2.5rem),700,`#1B365D`
### Trust Section-Background:`#1B365D`-Text colour:`rgba(255,255,255,0.72)`-Card heading colour:`#D4BB94`-Cards:bg `rgba(255,255,255,0.06)`,border `rgba(255,255,255,0.1)`,border radius 12px,padding 28px-Two column grid,gap 24px (stacks on mobile)-Bottom divider:`rgba(255,255,255,0.1)`-Bottom text colour:`rgba(255,255,255,0.7)`
### Founder Section-Background:`#F8F7F5`-Grid:200px photo column+1fr text column,gap 40px-Photo placeholder:200x240px,border radius 12px-Name:Inter,14.4px,600 weight,`#1B365D`-Title below name:400 weight,`#6B7280`
### FAQ-Background:`#F8F7F5`-Max width:740px,centered-Question:Inter,15.2px (0.95rem),600,`#1B365D`-Toggle icon:`+` / `−`,colour `#C5A572`,20.8px-Answer:Inter,14.4px (0.9rem),400,`#374151`,line height 1.75-Card:bg `#FFFFFF`,border radius 8px,shadow `0 1px 2px rgba(27,54,93,0.06)`,margin bottom 12px
### Final CTA-Background:`#FFFFFF`-Centered text,max width 600px for title,620px for subtitle
### Footer-Background:`#122440`-Text:`rgba(255,255,255,0.6)`-Bold labels:`rgba(255,255,255,0.8)`-Link hover:`#D4BB94`-Grid:2fr disclaimer+1fr links,gap 48px (stacks on mobile)-Top/bottom divider:`rgba(255,255,255,0.08)`-Credits:logo in `rgba(255,255,255,0.8)` with gold span,ABN+copyright on right
## Shadows
| Name | Value | Use |
|------|-------|-----|
| Small | `0 1px 2px rgba(27,54,93,0.06)` | FAQ cards |
| Medium | `0 4px 12px rgba(27,54,93,0.08)` | Step cards |
| Large | `0 8px 30px rgba(27,54,93,0.12)` | Hero visual overlay |
## Border Radius
| Size | Value | Use |
|------|-------|-----|
| Default | 8px | Buttons,FAQ cards,inputs |
| Large | 12px | Step cards,trust cards,pricing box,founder photo |
| Pill | 50px | Badges,step time tags |
## Responsive Breakpoints
| Breakpoint | Changes |
|------------|---------|
| 768px (tablet) | Steps grid to 1 column. Report grid to 1 column. Trust grid to 1 column. Footer to 1 column. Section padding to 56px. Hero padding to 56px/64px. |
| 480px (mobile) | Nav CTA padding to 8px/16px,font 12.8px. Hero CTA padding to 14px/28px,font 15.2px. |
## Divi Custom CSS (paste into Divi>Theme Options>Custom CSS)
```css
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.et_pb_button{letter-spacing:0!important;text-transform:none!important}.section-label{font-family:'Inter',sans-serif!important;font-size:12px!important;font-weight:600!important;text-transform:uppercase!important;letter-spacing:0.1em!important;color:#A8894E!important;margin-bottom:12px!important}.dark-bg .section-label{color:#D4BB94!important}.highlight-box{background:#F8F7F5;border-left:3px solid #C5A572;padding:20px 24px;border-radius:0 8px 8px 0}.gold-cta{background-color:#C5A572!important;color:#122440!important;font-weight:700!important;border-radius:8px!important;border:none!important}.gold-cta:hover{background-color:#D4BB94!important;transform:translateY(-1px);box-shadow:0 4px 16px rgba(197,165,114,0.3)}.trust-card{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:28px}.et_pb_toggle .et_pb_toggle_title{font-family:'Inter',sans-serif!important;font-size:15.2px!important;font-weight:600!important;color:#1B365D!important}.et_pb_toggle .et_pb_toggle_content{font-size:14.4px!important;color:#374151!important;line-height:1.75!important}.footer-area a:hover{color:#D4BB94!important}.nav-cta{background-color:#1B365D;color:#FFFFFF;padding:10px 22px;border-radius:8px;font-family:'Inter',sans-serif;font-size:14px;font-weight:600;border:none;cursor:pointer;text-decoration:none;transition:background-color 0.2s}.gold-cta:hover{background-color:#D4BB94;color:#122440;transform:translateY(-1px);box-shadow:0 4px 16px rgba(197,165,114,0.3)}#top-menu{display:flex!important;align-items:center!important;gap:0!important}li.nav-cta{display:flex!important;align-items:center!important;width:auto!important;padding:0!important;margin-left:10px!important}li.nav-cta a{background-color:#1B365D!important;color:#FFFFFF!important;padding:10px 22px!important;border-radius:8px!important;font-size:14px!important;font-weight:600!important;font-family:'Inter',sans-serif!important;border:none!important;letter-spacing:0!important;text-transform:none!important;line-height:1.4!important;height:auto!important;display:inline-block!important;width:auto!important}li.nav-cta a:hover{background-color:#2A4A7A!important;   color:#FFFFFF!important}#main-header .container,#page-container #main-header .container{width:100%!important;max-width:100%!important;padding-left:40px!important;padding-right:40px!important}#main-header .et_menu_container,#main-header nav#top-menu-nav{float:right!important}#main-header .logo_container{float:left!important}#top-menu{display:flex!important;align-items:center!important;gap:25px!important}