body,.et_pb_column_1_2 .et_quote_content blockquote cite,.et_pb_column_1_2 .et_link_content a.et_link_main_url,.et_pb_column_1_3 .et_quote_content blockquote cite,.et_pb_column_3_8 .et_quote_content blockquote cite,.et_pb_column_1_4 .et_quote_content blockquote cite,.et_pb_blog_grid .et_quote_content blockquote cite,.et_pb_column_1_3 .et_link_content a.et_link_main_url,.et_pb_column_3_8 .et_link_content a.et_link_main_url,.et_pb_column_1_4 .et_link_content a.et_link_main_url,.et_pb_blog_grid .et_link_content a.et_link_main_url,body .et_pb_bg_layout_light .et_pb_post .post-content,body .et_pb_bg_layout_dark .et_pb_post .post-content{font-size:16px}.et_pb_slide_content,.et_pb_best_value{font-size:18px}body{color:#1f2937}h1,h2,h3,h4,h5,h6{color:#1b365d}body,.et_pb_column_1_2 .et_quote_content blockquote cite,.et_pb_column_1_2 .et_link_content a.et_link_main_url,.et_pb_column_1_3 .et_quote_content blockquote cite,.et_pb_column_3_8 .et_quote_content blockquote cite,.et_pb_column_1_4 .et_quote_content blockquote cite,.et_pb_blog_grid .et_quote_content blockquote cite,.et_pb_column_1_3 .et_link_content a.et_link_main_url,.et_pb_column_3_8 .et_link_content a.et_link_main_url,.et_pb_column_1_4 .et_link_content a.et_link_main_url,.et_pb_blog_grid .et_link_content a.et_link_main_url,body .et_pb_bg_layout_light .et_pb_post .post-content,body .et_pb_bg_layout_dark .et_pb_post .post-content{font-weight:400}.et_pb_slide_content,.et_pb_best_value{font-weight:400}#et_search_icon:hover,.mobile_menu_bar:before,.mobile_menu_bar:after,.et_toggle_slide_menu:after,.et-social-icon a:hover,.et_pb_sum,.et_pb_pricing li a,.et_pb_pricing_table_button,.et_overlay:before,.entry-summary p.price ins,.et_pb_member_social_links a:hover,.et_pb_widget li a:hover,.et_pb_filterable_portfolio .et_pb_portfolio_filters li a.active,.et_pb_filterable_portfolio .et_pb_portofolio_pagination ul li a.active,.et_pb_gallery .et_pb_gallery_pagination ul li a.active,.wp-pagenavi span.current,.wp-pagenavi a:hover,.nav-single a,.tagged_as a,.posted_in a{color:#1b365d}.et_pb_contact_submit,.et_password_protected_form .et_submit_button,.et_pb_bg_layout_light .et_pb_newsletter_button,.comment-reply-link,.form-submit .et_pb_button,.et_pb_bg_layout_light .et_pb_promo_button,.et_pb_bg_layout_light .et_pb_more_button,.et_pb_contact p input[type="checkbox"]:checked+label i:before,.et_pb_bg_layout_light.et_pb_module.et_pb_button{color:#1b365d}.footer-widget h4{color:#1b365d}.et-search-form,.nav li ul,.et_mobile_menu,.footer-widget li:before,.et_pb_pricing li:before,blockquote{border-color:#1b365d}.et_pb_counter_amount,.et_pb_featured_table .et_pb_pricing_heading,.et_quote_content,.et_link_content,.et_audio_content,.et_pb_post_slider.et_pb_bg_layout_dark,.et_slide_in_menu_container,.et_pb_contact p input[type="radio"]:checked+label i:before{background-color:#1b365d}a{color:#c5a572}#main-header .nav li ul{background-color:#c5a572}.nav li ul{border-color:#eeecea}.et_secondary_nav_enabled #page-container #top-header{background-color:#1b365d!important}#et-secondary-nav li ul{background-color:#1b365d}.et_header_style_centered .mobile_nav .select_page,.et_header_style_split .mobile_nav .select_page,.et_nav_text_color_light #top-menu>li>a,.et_nav_text_color_dark #top-menu>li>a,#top-menu a,.et_mobile_menu li a,.et_nav_text_color_light .et_mobile_menu li a,.et_nav_text_color_dark .et_mobile_menu li a,#et_search_icon:before,.et_search_form_container input,span.et_close_search_field:after,#et-top-navigation .et-cart-info{color:#1b365d}.et_search_form_container input::-moz-placeholder{color:#1b365d}.et_search_form_container input::-webkit-input-placeholder{color:#1b365d}.et_search_form_container input:-ms-input-placeholder{color:#1b365d}#top-menu li.current-menu-ancestor>a,#top-menu li.current-menu-item>a,#top-menu li.current_page_item>a{color:#c5a572}#main-footer{background-color:#122440}#main-footer .footer-widget h4,#main-footer .widget_block h1,#main-footer .widget_block h2,#main-footer .widget_block h3,#main-footer .widget_block h4,#main-footer .widget_block h5,#main-footer .widget_block h6{color:#1b365d}.footer-widget li:before{border-color:#1b365d}.footer-widget .et_pb_widget div,.footer-widget .et_pb_widget ul,.footer-widget .et_pb_widget ol,.footer-widget .et_pb_widget label{line-height:1.7em}#footer-widgets .footer-widget li:before{top:10.6px}.bottom-nav,.bottom-nav a,.bottom-nav li.current-menu-item a{color:rgba(255,255,255,0.6)}#et-footer-nav .bottom-nav li.current-menu-item a{color:rgba(255,255,255,0.6)}#footer-bottom{background-color:#122440}#footer-info,#footer-info a{color:rgba(255,255,255,0.6)}body .et_pb_bg_layout_light.et_pb_button:hover,body .et_pb_bg_layout_light .et_pb_button:hover,.et_pb_module .et_pb_button:hover,body .et_pb_button:hover{border-radius:0px}@media only screen and (min-width:981px){.et_pb_section{padding:2% 0}.et_pb_fullwidth_section{padding:0}.et_header_style_left #et-top-navigation,.et_header_style_split #et-top-navigation{padding:50px 0 0 0}.et_header_style_left #et-top-navigation nav>ul>li>a,.et_header_style_split #et-top-navigation nav>ul>li>a{padding-bottom:50px}.et_header_style_split .centered-inline-logo-wrap{width:100px;margin:-100px 0}.et_header_style_split .centered-inline-logo-wrap #logo{max-height:100px}.et_pb_svg_logo.et_header_style_split .centered-inline-logo-wrap #logo{height:100px}.et_header_style_centered #top-menu>li>a{padding-bottom:18px}.et_header_style_slide #et-top-navigation,.et_header_style_fullscreen #et-top-navigation{padding:41px 0 41px 0!important}.et_header_style_centered #main-header .logo_container{height:100px}#logo{max-height:67%}.et_pb_svg_logo #logo{height:67%}.et_header_style_centered.et_hide_primary_logo #main-header:not(.et-fixed-header) .logo_container,.et_header_style_centered.et_hide_fixed_logo #main-header.et-fixed-header .logo_container{height:18px}.et_fixed_nav #page-container .et-fixed-header#top-header{background-color:#1b365d!important}.et_fixed_nav #page-container .et-fixed-header#top-header #et-secondary-nav li ul{background-color:#1b365d}.et-fixed-header #top-menu a,.et-fixed-header #et_search_icon:before,.et-fixed-header #et_top_search .et-search-form input,.et-fixed-header .et_search_form_container input,.et-fixed-header .et_close_search_field:after,.et-fixed-header #et-top-navigation .et-cart-info{color:#1b365d!important}.et-fixed-header .et_search_form_container input::-moz-placeholder{color:#1b365d!important}.et-fixed-header .et_search_form_container input::-webkit-input-placeholder{color:#1b365d!important}.et-fixed-header .et_search_form_container input:-ms-input-placeholder{color:#1b365d!important}.et-fixed-header #top-menu li.current-menu-ancestor>a,.et-fixed-header #top-menu li.current-menu-item>a,.et-fixed-header #top-menu li.current_page_item>a{color:#c5a572!important}.et-fixed-header#top-header a{color:#1b365d}}@media only screen and (min-width:1350px){.et_block_row{padding:27px 0}.et_pb_section{padding:27px 0}.single.et_pb_pagebuilder_layout.et_full_width_page .et_post_meta_wrapper{padding-top:81px}.et_pb_fullwidth_section{padding:0}}h1,h1.et_pb_contact_main_title,.et_pb_title_container h1{font-weight:600}h2,.product .related h2,.et_pb_column_1_2 .et_quote_content blockquote p{font-weight:600}h3{font-weight:600}h4,.et_pb_circle_counter h3,.et_pb_number_counter h3,.et_pb_column_1_3 .et_pb_post h2,.et_pb_column_1_4 .et_pb_post h2,.et_pb_blog_grid h2,.et_pb_column_1_3 .et_quote_content blockquote p,.et_pb_column_3_8 .et_quote_content blockquote p,.et_pb_column_1_4 .et_quote_content blockquote p,.et_pb_blog_grid .et_quote_content blockquote p,.et_pb_column_1_3 .et_link_content h2,.et_pb_column_3_8 .et_link_content h2,.et_pb_column_1_4 .et_link_content h2,.et_pb_blog_grid .et_link_content h2,.et_pb_column_1_3 .et_audio_content h2,.et_pb_column_3_8 .et_audio_content h2,.et_pb_column_1_4 .et_audio_content h2,.et_pb_blog_grid .et_audio_content h2,.et_pb_column_3_8 .et_pb_audio_module_content h2,.et_pb_column_1_3 .et_pb_audio_module_content h2,.et_pb_gallery_grid .et_pb_gallery_item h3,.et_pb_portfolio_grid .et_pb_portfolio_item h2,.et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2{font-weight:600}h5{font-weight:600}h6{font-weight:600}.et_pb_slide_description .et_pb_slide_title{font-weight:600}.et_pb_gallery_grid .et_pb_gallery_item h3,.et_pb_portfolio_grid .et_pb_portfolio_item h2,.et_pb_filterable_portfolio_grid .et_pb_portfolio_item h2,.et_pb_column_1_4 .et_pb_audio_module_content h2{font-weight:600}@media only screen and (max-width:980px){.et_header_style_centered .mobile_nav .select_page,.et_header_style_split .mobile_nav .select_page,.et_mobile_menu li a,.mobile_menu_bar:before,.et_nav_text_color_light #top-menu>li>a,.et_nav_text_color_dark #top-menu>li>a,#top-menu a,.et_mobile_menu li a,#et_search_icon:before,#et_top_search .et-search-form input,.et_search_form_container input,#et-top-navigation .et-cart-info{color:#1b365d}.et_close_search_field:after{color:#1b365d!important}.et_search_form_container input::-moz-placeholder{color:#1b365d}.et_search_form_container input::-webkit-input-placeholder{color:#1b365d}.et_search_form_container input:-ms-input-placeholder{color:#1b365d}}#main-content{background-color:#ffffff}	h1,h2,h3,h4,h5,h6{font-family:var(--et_global_heading_font)}body,input,textarea,select{font-family:var(--et_global_body_font)}#main-header,#et-top-navigation{font-family:'Inter',Helvetica,Arial,Lucida,sans-serif}# 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}