/* * alabamarealestateclass.com site CSS (ares-child). * Loaded last in . Phone < 768px, tablet 768–1023px, desktop >= 1024px. * * Many rules have to out-rank older overrides: WPBakery per-page CSS (often * ID-scoped and !important), the "Redesign" snippet in Simple Custom CSS & JS * (#5937, lots of !important) and inline styles in page content. Where a rule * uses !important or an ID, the comment says what it's beating. */ /* --------------------------------------------------------------------- * Header * ------------------------------------------------------------------- */ /* Markup: inc/header.php. Utility bar (address, phone, student links) + white main bar (logo, menu, drawer on smaller screens). Desktop menu from 1100px; below that the
drawer. Classes are all .ares-* so the old theme/plugin header CSS doesn't reach them. */ .ares-header { --h-navy-900: #002f4f; --h-navy: #1d506d; --h-gold: #f7c500; --h-line: #e4e8ee; font-family: "Montserrat", "Open Sans", system-ui, sans-serif; /* Above page content: the course page's booking box (.course_book_mobile) has z-index 1000000 and drew over the open mobile menu. */ position: relative; z-index: 1000100; } .ares-header a { text-decoration: none; } /* Theme sets Varela Round / Open Sans on every link */ .ares-header a, .ares-header summary, .ares-header nav { font-family: inherit !important; } .ares-wrap { max-width: 1170px; margin: 0 auto; padding: 0 20px; display: flex; align-items: center; gap: 24px; } /* Utility bar */ .ares-topbar { background: var(--h-navy-900); color: #d6e3ec; font-size: 13px; line-height: 1; } .ares-topbar .ares-wrap { min-height: 40px; justify-content: space-between; } .ares-topbar a { color: #d6e3ec; } .ares-topbar a:hover, .ares-topbar a:focus-visible { color: #fff; } .ares-topbar__contact, .ares-topbar__links { display: flex; align-items: center; gap: 20px; } .ares-topbar__phone { font-weight: 600; color: #fff !important; } .ares-topbar__account { padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .35); border-radius: 999px; } /* Main bar */ .ares-mainbar { background: #fff; border-bottom: 1px solid var(--h-line); } .ares-mainbar .ares-wrap { min-height: 76px; } .ares-logo { display: block; flex: 0 0 auto; line-height: 0; } .ares-logo__img { display: block; width: 64px; height: 64px; } /* Desktop menu */ .ares-nav { margin-left: auto; } .ares-menu { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; } .ares-menu > li { position: relative; list-style: none; } .ares-menu > li > a { display: block; padding: 10px 14px; color: var(--h-navy-900); font-size: 15px; font-weight: 600; border-radius: 8px; position: relative; } .ares-menu > li > a::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 2px; background: var(--h-gold); transform: scaleX(0); transition: transform .15s ease; } .ares-menu > li:hover > a::after, .ares-menu > li:focus-within > a::after, .ares-menu > li.current-menu-item > a::after, .ares-menu > li.current-menu-ancestor > a::after { transform: scaleX(1); } .ares-menu > li.menu-item-has-children > a { padding-right: 26px; } .ares-menu > li.menu-item-has-children > a::before { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: .6; } .ares-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 240px; margin: 0; padding: 8px; list-style: none; background: #fff; border: 1px solid var(--h-line); border-radius: 12px; box-shadow: 0 12px 32px rgba(16, 24, 40, .12); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .ares-menu > li:hover > .sub-menu, .ares-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .ares-menu .sub-menu a { display: block; padding: 10px 12px; color: var(--h-navy-900); font-size: 14px; border-radius: 8px; } .ares-menu .sub-menu a:hover, .ares-menu .sub-menu a:focus-visible { background: #f2f5f9; } .ares-menu > li > a, .ares-menu .sub-menu a { line-height: 1.3 !important; } /* theme line-height inflated the button */ /* "Contact" as the header's button, placed last (menu item 1724) */ .ares-menu > li.menu-item-1724 { order: 99; } .ares-menu > li.menu-item-1724 > a { background: var(--h-navy); color: #fff; padding: 10px 20px; border-radius: 999px; margin-left: 6px; } .ares-menu > li.menu-item-1724.menu-item-has-children > a { padding-right: 34px; } .ares-menu > li.menu-item-1724.menu-item-has-children > a::before { right: 16px; border-color: #fff; opacity: .85; } .ares-menu > li.menu-item-1724 > a::after { display: none; } .ares-menu > li.menu-item-1724 > a:hover { background: var(--h-navy-900); } /* Drawer (below 1100px) */ .ares-drawer { display: none; margin-left: auto; } .ares-drawer__toggle { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--h-line); border-radius: 999px; color: var(--h-navy-900); font-size: 14px; font-weight: 600; } .ares-drawer__toggle::-webkit-details-marker { display: none; } .ares-burger { display: inline-flex; flex-direction: column; gap: 4px; width: 18px; } .ares-burger span { height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s ease, opacity .2s ease; } .ares-drawer[open] .ares-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .ares-drawer[open] .ares-burger span:nth-child(2) { opacity: 0; } .ares-drawer[open] .ares-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .ares-drawer__panel { position: absolute; left: 0; right: 0; top: 100%; max-height: calc(100vh - 120px); overflow-y: auto; background: #fff; border-top: 1px solid var(--h-line); box-shadow: 0 24px 48px rgba(16, 24, 40, .18); padding: 8px 20px 24px; } .ares-drawer__menu { margin: 0; padding: 0; list-style: none; } .ares-drawer__menu li { list-style: none; } .ares-drawer__menu > li { border-bottom: 1px solid var(--h-line); } .ares-drawer__menu > li > a { display: block; padding: 14px 4px; color: var(--h-navy-900); font-size: 16px; font-weight: 600; } .ares-drawer__menu .sub-menu { margin: -6px 0 10px; padding: 0 0 0 12px; } .ares-drawer__menu .sub-menu a { display: block; padding: 10px 4px; color: #3d4b57; font-size: 15px; } .ares-drawer__links { display: grid; gap: 10px; margin-top: 18px; } .ares-drawer__links a { display: block; padding: 12px 16px; border: 1px solid var(--h-line); border-radius: 12px; color: var(--h-navy-900); font-weight: 600; font-size: 15px; } .ares-drawer__links .ares-drawer__phone { background: var(--h-navy); border-color: var(--h-navy); color: #fff; text-align: center; } @media (max-width: 1099px) { .ares-nav { display: none; } .ares-drawer { display: block; } .ares-mainbar { position: relative; } } @media (max-width: 767px) { .ares-topbar .ares-wrap { min-height: 36px; gap: 12px; padding: 0 16px; } .ares-topbar__address, .ares-topbar__account { display: none; } .ares-topbar__links { gap: 14px; } .ares-topbar__links a:first-child { display: none; } /* Course Login is in the drawer */ .ares-mainbar .ares-wrap { min-height: 64px; padding: 0 16px; } .ares-logo__img { width: 52px; height: 52px; } .ares-drawer__label { display: none; } .ares-drawer__toggle { padding: 12px; } } /* --------------------------------------------------------------------- * Home * ------------------------------------------------------------------- */ /* The theme prints the page title ("Home") and a 50px spacer above the hero. */ body.home #post-204 > h1:first-child, body.home #post-204 > h1:first-child + .nd_options_height_20, body.home .nicdark_site > .nd_options_height_50:has(+ .nd_options_container) { display: none; } /* Hero CTAs. They're absolutely positioned over the yellow box's bottom padding; the fixed 100px width clipped "Live/Livestream" on phones and the tablet padding was too short, so the buttons covered the text. #hero_wrap beats the page's own "#hero_wrap .callto_action {... !important}". */ @media (max-width: 767px) { #hero_wrap .tableView .vc_cta3.callto_action { padding-bottom: 165px !important; } body .home_hero_cta { left: 40px; right: 40px; bottom: 35px; flex-direction: column; gap: 10px; } body .home_hero_cta a { width: auto; height: 48px; line-height: 48px; padding: 0 16px; font-size: 16px; text-align: center; white-space: nowrap; } } @media (min-width: 768px) and (max-width: 1023px) { #hero_wrap .tableView .vc_cta3.callto_action { padding-bottom: 110px !important; } } /* Pricing / class-date card headings wrapped to 5 lines in tablet cards. */ @media (min-width: 768px) and (max-width: 1023px) { body .pricing-title { font-size: 24px; line-height: 1.25; } } /* --------------------------------------------------------------------- * Home layout & spacing * * The page (post 204) is WPBakery content whose rows each carried their own * margins/paddings/spacers, so gaps ranged from 0 to 230px. One scale now: * section spacing 80/64/48px (desktop/tablet/phone); gaps between cards * 31px desktop (the WPBakery gutter), 20px when columns stack. * * Rows are targeted by position in .wpb-content-wrapper: * 1 hero (#hero_wrap) 3 class-date cards 4-5 the 2x2 info boxes * 6 grey section: packages (.vc_custom_1701078262162), reviews, About * (.vc_custom_1707454633669) 8 contact band * Re-check these if rows are added/removed/reordered in WPBakery. * ------------------------------------------------------------------- */ body.home { --ares-section: 80px; } @media (max-width: 1023px) { body.home { --ares-section: 64px; } } @media (max-width: 767px) { body.home { --ares-section: 48px; } } /* Hero: was 100px above / 120px below */ body.home #hero_wrap { padding-top: var(--ares-section) !important; padding-bottom: var(--ares-section) !important; } @media (min-width: 768px) { body.home #hero_wrap { padding-bottom: calc(var(--ares-section) - 20px) !important; } /* its cards add 20px */ } /* Tablet hero: four floated half-width columns of unequal height stacked into a staircase. Text box full width, the three course cards in a row below. */ @media (min-width: 768px) and (max-width: 1023px) { body.home #hero_wrap .vc_row:not(.vc_inner) { display: grid; grid-template-columns: repeat(3, 1fr); row-gap: 24px; } body.home #hero_wrap .vc_row:not(.vc_inner)::before, body.home #hero_wrap .vc_row:not(.vc_inner)::after { display: none; } body.home #hero_wrap .vc_row:not(.vc_inner) > .wpb_column { float: none; width: auto; } body.home #hero_wrap .vc_row:not(.vc_inner) > .wpb_column:first-child { grid-column: 1 / -1; } /* Page CSS fixes the box at 460px / min 486px !important; let it fit its content. */ body.home #hero_wrap .tableView .callto_action.vc_general.vc_cta3.vc_cta3-style-classic { min-height: 0 !important; height: auto !important; padding-top: 40px !important; padding-bottom: 130px !important; } } /* White block: class-date cards + 2x2 boxes as one section (was a 30px margin + 80px padding above, 5-50px between) */ body.home #post-204 .wpb-content-wrapper > :nth-child(3) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: var(--ares-section) !important; } body.home #post-204 .wpb-content-wrapper > :nth-child(5) { padding-bottom: var(--ares-section) !important; } /* 2x2 boxes: same outer edges and 31px gutter as the cards above (the rows used -25px margins + 10px column padding, so they stuck out 15px) */ body.home #post-204 .wpb-content-wrapper > :nth-child(4), body.home #post-204 .wpb-content-wrapper > :nth-child(5) { margin-left: -15.5px !important; margin-right: -15.5px !important; } body.home #post-204 .wpb-content-wrapper > :nth-child(4) > .wpb_column, body.home #post-204 .wpb-content-wrapper > :nth-child(5) > .wpb_column { padding-left: 15.5px !important; padding-right: 15.5px !important; } /* Vertical gaps; the columns add 20px of their own (the date cards 10-31px) */ body.home #post-204 .wpb-content-wrapper > :nth-child(4) { margin-top: 20px !important; } body.home #post-204 .wpb-content-wrapper > :nth-child(5) { margin-top: 11px !important; } @media (max-width: 1023px) { body.home #post-204 .wpb-content-wrapper > :nth-child(4) { margin-top: 10px !important; } body.home #post-204 .wpb-content-wrapper > :nth-child(5) { margin-top: 0 !important; } } @media (max-width: 767px) { body.home #post-204 .wpb-content-wrapper > :nth-child(4) { margin-top: -11px !important; } } /* Grey section: packages + reviews. It ended in a 10px grey strip under the white About row; the About row is its own white section now. */ body.home #post-204 .wpb-content-wrapper > :nth-child(6) { padding-top: var(--ares-section) !important; padding-bottom: 0 !important; } body.home .vc_row.vc_custom_1701078262162 { margin-top: 24px !important; } body.home .vc_row.vc_custom_1701078262162 + .vc_row { margin-top: var(--ares-section) !important; } /* reviews sat ~10px under the cards */ body.home .vc_row.vc_custom_1707454633669 { margin-top: var(--ares-section) !important; padding-top: var(--ares-section) !important; padding-bottom: var(--ares-section) !important; } /* Contact band: no white gaps around it. Margins are left alone; WPBakery's full-width row script sets them. */ body.home #post-204 .wpb-content-wrapper > :nth-child(8) { padding-top: 0 !important; padding-bottom: 0 !important; } body.home .nicdark_site > .nd_options_container + .nd_options_height_50 { display: none; } /* 50px theme spacer above the footer */ /* --------------------------------------------------------------------- * Home restyle: "clean & trustworthy" (navy/gold brand, white space, * one card style, one heading style, calmer caps) * ------------------------------------------------------------------- */ body.home { --ares-navy-900: #002f4f; --ares-navy: #1d506d; --ares-gold: #f7c500; --ares-surface: #f5f7fa; --ares-line: #e4e8ee; --ares-radius: 16px; --ares-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .08); --ares-shadow-hover: 0 2px 4px rgba(16, 24, 40, .08), 0 14px 32px rgba(16, 24, 40, .12); } /* Section headings: one style. Was a 50px white-on-blue bar ("MY Exam Prep Packages"), a 50px black heading (reviews) and a 40px grey one (About). */ body.home #post-204 h2.h2Large_heading, body.home .vc_row.vc_custom_1707454633669 h2 { color: var(--ares-navy-900) !important; background: none !important; padding: 0 !important; font-size: 40px !important; line-height: 1.2 !important; letter-spacing: -0.01em; margin: 0 0 8px !important; } @media (max-width: 1023px) { body.home #post-204 h2.h2Large_heading, body.home .vc_row.vc_custom_1707454633669 h2 { font-size: 32px !important; } } @media (max-width: 767px) { body.home #post-204 h2.h2Large_heading, body.home .vc_row.vc_custom_1707454633669 h2 { font-size: 26px !important; } } /* Cards (class dates + packages): white, hairline border, soft shadow */ body.home .pricing-table { background: #fff !important; border: 1px solid var(--ares-line); border-radius: var(--ares-radius) !important; box-shadow: var(--ares-shadow) !important; transition: box-shadow .2s ease, transform .2s ease; } body.home .pricing-table:hover { box-shadow: var(--ares-shadow-hover) !important; transform: translateY(-2px); } body.home .pricing-table ul.features { background: var(--ares-surface) !important; border-radius: 12px !important; box-shadow: none !important; } /* Titles: were forced ALL CAPS in gold (about 1.7:1 contrast on white) */ body.home .pricing-title { text-transform: none !important; color: var(--ares-navy-900) !important; letter-spacing: -0.01em; } body.home .pricing-title::after { content: ""; display: block; width: 44px; height: 3px; border-radius: 2px; background: var(--ares-gold); margin: 14px auto 0; } /* Date lists were squeezed into a narrow box, breaking ranges over two lines */ body.home #post-204 .wpb-content-wrapper > :nth-child(3) .pricing-table ul.features { width: 100% !important; max-width: 340px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box; } /* Equal-height class-date cards with aligned buttons (the row was floats) */ @media (min-width: 768px) { body.home #post-204 .wpb-content-wrapper > :nth-child(3) { display: flex; } body.home #post-204 .wpb-content-wrapper > :nth-child(3) > .wpb_column { float: none; display: flex; } body.home #post-204 .wpb-content-wrapper > :nth-child(3) > .wpb_column > .vc_column-inner, body.home #post-204 .wpb-content-wrapper > :nth-child(3) > .wpb_column > .vc_column-inner > .wpb_wrapper, body.home #post-204 .wpb-content-wrapper > :nth-child(3) .wpb_text_column, body.home #post-204 .wpb-content-wrapper > :nth-child(3) .wpb_text_column > .wpb_wrapper { display: flex; flex-direction: column; flex: 1; width: 100%; } body.home #post-204 .wpb-content-wrapper > :nth-child(3) .pricing-table { flex: 1; display: flex; flex-direction: column; } body.home #post-204 .wpb-content-wrapper > :nth-child(3) .pricing-table > p:last-child { margin-top: auto; } } /* Info boxes: rounded; the near-black one in brand navy; content top-aligned with buttons on a common line (WPBakery centred it vertically) */ body.home .box_style > .vc_column-inner { border-radius: var(--ares-radius); overflow: hidden; justify-content: flex-start !important; } body.home .box_style > .vc_column-inner > .wpb_wrapper { display: flex; flex-direction: column; flex: 1; } body.home .box_style > .vc_column-inner > .wpb_wrapper > .vc_btn3-container { margin-top: auto; } body.home .pre_license.box_style > .vc_custom_1699611589661 { background-color: var(--ares-navy-900) !important; } /* Hero: 2px gold frame (was 5px), rounder corners, rounded photo cards */ body.home #hero_wrap .vc_cta3.callto_action { border-width: 2px !important; border-radius: 20px !important; } body.home #hero_wrap .courses_box img, body.home #hero_wrap .courses_box .vc_single_image-wrapper { border-radius: var(--ares-radius) !important; } /* Buttons: same weight, gentle lift on hover */ body.home #post-204 a.buy-now-btn, body.home #post-204 a.vc_btn3, body.home .home_hero_cta a { font-weight: 600 !important; letter-spacing: .01em; transition: transform .15s ease, box-shadow .15s ease; } body.home #post-204 a.buy-now-btn:hover, body.home #post-204 a.vc_btn3:hover, body.home .home_hero_cta a:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .15); } body.home #post-204 a.buy-now-btn { background: var(--ares-navy) !important; padding: 12px 26px !important; } /* --------------------------------------------------------------------- * Courses * ------------------------------------------------------------------- */ /* Course page schedule table: 10px pills. Sizes are inline styles in the course content, hence !important. */ @media (max-width: 767px) { body .mres-pill, body .mres-cram, body .mres-or { font-size: 12px !important; } } /* Course grid "DETAILS" buttons were 77x29px with 11px text on phones. */ @media (max-width: 767px) { body a.nd_learning_bg_greydark.nd_learning_padding_8_15 { padding: 14px 20px; font-size: 13px !important; } } /* --------------------------------------------------------------------- * Footer * ------------------------------------------------------------------- */ /* County town lists: a fixed 3-column grid with no gap collided on tablets. */ body .global_footer .cell_column ul { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); column-gap: 24px; row-gap: 4px; } /* --------------------------------------------------------------------- * Admin-only * ------------------------------------------------------------------- */ /* Copy & Delete Posts leaves an invisible alert box over the phone menu icon for logged-in admins. */ body .cdp-copy-alert-success { pointer-events: none; }