The complete visual and component reference for all Real Estate Moguls pages, landing pages, and Elementor embeds. Every color, type scale, component, and voice principle — in one place.
Seven CSS variables power the entire platform. Never introduce colors outside this system. Consistency is the brand.
One font family. System-native. No Google Fonts. Helvetica Neue with Arial and sans-serif as fallbacks. Weight and size do all the work.
Three button styles. All share the same padding, border-radius, and font treatment. The difference is context — where it appears and what it needs to do.
| Style | Class | Background | Text | Border | Hover |
|---|---|---|---|---|---|
| .btn-p | Primary | #29ABE2 | #fff | #29ABE2 | --blue-dk fill |
| .btn-g | Ghost Light | transparent | #fff | rgba(255,255,255,.55) | Blue border + text |
| .btn-o | Ghost Blue | transparent | #29ABE2 | #29ABE2 | Blue fill, white text |
/* All buttons share these base properties */
padding: 16px 34px | font-size: 15px | font-weight: 700
letter-spacing: .06em | text-transform: uppercase | border-radius: 3px | border: 2px solid transparent
Five section types. They alternate to create rhythm and visual breathing room. Never stack two dark sections without a light or alt section between them.
| Class | Background | Text Color | Usage |
|---|---|---|---|
| .sec | #ffffff (white) | --dark / --mid | Primary content sections. Default. |
| .sec-alt | --lite / #F7F9FA | --dark / --mid | Alternating sections. Cards, features, specs. |
| .sec-dark | --dark / #111111 | #fff / rgba(255,255,255,.65) | High-impact sections. Progression, stats, closing statements. |
| .offer-block | --dark + 5px blue top/bottom border | #fff / --blue | Primary value proposition block. |
| .fnd | --dark + 5px blue top border | #fff / rgba(255,255,255,.38) | Final CTA section. Always last before footer. |
This is what the .offer-block looks like — dark background, 5px blue border top and bottom, centered text, italic blue subhead.
Every repeating element in the system. Use these exactly. Build new pages by combining these components — never by inventing new patterns.
Used in 3-column grids. Light on .sec and .sec-alt backgrounds. Dark (.card-dk) inside .sec-dark sections.
Border: 1px solid --bdr. Background: white. Used on light and alt section backgrounds.
Cards always sit in a 3-column grid with 22px gap. On mobile they stack to 1 column.
The three-card structure is: what it is, what it builds, what it makes you. Follow this logic.
Border: 1px solid rgba(41,171,226,.2). Background: rgba(255,255,255,.04). Use inside .sec-dark sections.
Card headings are white. Body text is rgba(255,255,255,.55). Label stays --blue.
Never four cards in a row. Never two. The rhythm is always three.
Used to isolate the single most important supporting statement in a section. Always immediately after the opening body paragraph.
This is the .series-block component. Blue-lt background, 4px left border in --blue, border-radius on right side only. Used for the one sentence in a section that the reader must not miss. Never use more than one per section.
Two pull quote styles. One for light sections, one for dark.
Used for process flows. Blue circle number, 2-column grid, border-separated rows.
Not an application. Not a form. A fifteen-minute conversation where we learn about your market, your relationships, and your vision.
Selected hosts receive a formal invitation. You review it. You accept it. We get to work.
Episode by episode, your name becomes the one people reference. Your content library grows. Your network deepens.
Always 50/50. Image fills its column via object-fit: cover. Copy column has padding: 72px 64px. Three copy variants: white, .alt (--lite), .dk (--dark).
Copy column always starts with an eyebrow, then H2 or H3, then body, then .spts if needed.
This is a .spt — left border 3px --blue. Title is 700 weight. Body is 15px #666.
Use .spts inside split copy sections only. Never more than three per column.
Used inside .sec-dark sections only. Three columns, separated by subtle blue borders. Large ghost number, prog-tag eyebrow, white heading, muted body.
Large ghost numbers at 15% opacity. Blue prog-tag above heading. White heading. Muted rgba body text.
Columns separated by 1px rgba(41,171,226,.2) border. Never use on light backgrounds.
Always three cards. Always inside sec-dark. Always follows this structure: number, tag, heading, body.
A single-sentence statement immediately below the hero. Bold opener, supporting context. No background, just border separation.
3-column grid with 3px gap (tight, no breathing room between images). 240–280px tall. Gradient overlay fades from bottom. Name and title at lower left.
The exact values that govern layout, spacing, and structure across every page. Never approximate these.
| Token | Value | Usage |
|---|---|---|
| --rad | 6px | All border-radius values across all components |
| max-width full | 1100px | Primary content containers — .inn |
| max-width mid | 840px | Mid-width prose and featured blocks — .mid |
| max-width narrow | 700px | Narrow prose, offer copy, CTA explanations |
| section padding | 90px 40px | All sections, desktop |
| section padding mobile | 64px 24px | All sections, max-width 960px |
| hero height | 680px | Full-bleed hero with image |
| card gap | 22px | All 3-column card grids |
| host card gap | 3px | Host card grid only — intentionally tight |
| split copy padding | 72px 64px | Copy column in all split layouts |
| step grid | 60px 1fr | Step number column : content column |
| step-n size | 48px circle | Blue circle step number |
| btn padding | 16px 34px | All button variants |
| btn border-radius | 3px | All button variants — slightly less than --rad |
| hero overlay | linear-gradient(100deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.12) 100%) | All full-bleed hero image overlays |
| offer border | 5px solid --blue | Top and bottom of .offer-block and .fnd |
| pull border | 4px solid --blue | Left border of all .pull components |
| spt border | 3px solid --blue | Left border of .spt inside split copy |
| series-block border | 4px solid --blue | Left border of .series-block highlight |
| image row tall | 320px | Full-bleed image row — tall variant |
| image row short | 240px | Full-bleed image row — short variant |
The writing is as much the brand as the color. These principles govern every headline, button label, eyebrow, and body paragraph written for the platform.
"The Series." "What changes." "Already in the room." "Where this leads." These are observations, not pitches. Keep them under five words.
The best headlines break at a natural pause and use the second line to complete or subvert the first. The em color on one word does the emotional work.
"Book your introduction call →" not "Submit." "Let's Connect →" not "Contact Us." The arrow implies momentum. Always include it.
How to paste new pages into Elementor correctly every time. Follow this exactly — no exceptions.
In Elementor, drag an HTML widget onto the page. Paste the full HTML file — from the opening html tag to the closing html tag — directly into the widget's code editor.
Every page includes its own style block. No external stylesheet is needed. No additional CSS in Elementor. The HTML file is the complete, self-contained page unit.
All image src values must be full absolute URLs pointing to images already uploaded in the WordPress Media Library. Never use relative paths.
Every href must be a full URL. All external links must include target="_blank" rel="noopener noreferrer". Never use anchor links that reference IDs outside the widget.
Every page is built with BOOKING_LINK_HERE as a placeholder. Search the code for this string and replace it with the live GHL calendar link before the page goes live.
Use Elementor's mobile preview mode after pasting. Check hero text size, card stacking, and button wrapping. All pages are built mobile-responsive but confirm before publish.
