/* Theme Name: Modern Design Consultants Theme URI: https://www.moderndesignqld.com Description: Child theme of Hello Elementor for Modern Design Consultants. Self-hosted fonts (Spectral / Jost / Mulish). Author: Kartia Template: hello-elementor Version: 1.1.2 Text Domain: mdc-child */ /* ---------- self-hosted web fonts ---------- */ @font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spectral-500.woff2') format('woff2');} @font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600.woff2') format('woff2');} @font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jost-400.woff2') format('woff2');} @font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jost-500.woff2') format('woff2');} @font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/jost-600.woff2') format('woff2');} @font-face{font-family:'Mulish';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/mulish-400.woff2') format('woff2');} @font-face{font-family:'Mulish';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/mulish-600.woff2') format('woff2');} @font-face{font-family:'Mulish';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/mulish-700.woff2') format('woff2');} /* ---------- base type scale (fluid / clamp) ---------- body{ font-family:'Mulish',-apple-system,'Segoe UI',sans-serif; color:#1E211C; font-size:clamp(15px, 0.35vw + 14px, 17px); line-height:1.62; } h1{ font-family:'Spectral',Georgia,serif; font-weight:600; line-height:.98; letter-spacing:-.02em; font-size:clamp(42px, 7.4vw, 92px); } h2{ font-family:'Spectral',Georgia,serif; font-weight:600; line-height:1.05; letter-spacing:-.01em; font-size:clamp(28px, 4vw, 52px); } h3{ font-family:'Spectral',Georgia,serif; font-weight:600; line-height:1.15; font-size:clamp(20px, 2vw, 26px); } h4{ font-family:'Jost',sans-serif; font-weight:600; font-size:clamp(16px, 1.4vw, 19px); } h5,h6{ font-family:'Jost',sans-serif; font-weight:600; font-size:clamp(13px, 1vw, 15px); } /* Residential photo hairline (the one image kept in natural colour). */ .mdc-photo-keyline img{border:1px solid #DDD5C4;} /* Hide the desktop nav links on mobile (mockup has no hamburger; keep logo + CTA). */ @media (max-width:767px){ .mdc-nav-links{ display:none !important; } } /* EPP Mega Menu — enforce the hamburger breakpoint in CSS. EPP ships NO static show/hide rules for the active breakpoint (only for -none); the switch is JS-driven and flaky on a global header, so the desktop nav + hamburger can both show. EPP also renames the wrapper class between versions: -s (9.8.8) → -mobile (9.8.12) for the "Mobile (>767px)" setting. Target ALL variants so it survives updates. (Tablet setting = -m / -tablet ≤1024.) */ @media (min-width:768px){ .bdt-mega-menu-hamburger-s .megamenu-header-default, .bdt-mega-menu-hamburger-mobile .megamenu-header-default{ display:flex !important; } .bdt-mega-menu-hamburger-s .megamenu-header-mobile, .bdt-mega-menu-hamburger-mobile .megamenu-header-mobile{ display:none !important; } } @media (max-width:767px){ .bdt-mega-menu-hamburger-s .megamenu-header-default, .bdt-mega-menu-hamburger-mobile .megamenu-header-default{ display:none !important; } .bdt-mega-menu-hamburger-s .megamenu-header-mobile, .bdt-mega-menu-hamburger-mobile .megamenu-header-mobile{ display:flex !important; justify-content:flex-end; } } /* Number chip in "The difference" — cream square behind 01/02/03/04. */ .mdc-num .elementor-heading-title{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; background:#F4F0E6; } /* Client chip (mockup .ck) — outlined pill for the "who we've worked with" row on dark sections. Widgets already set Jost/12px/uppercase/cream; this adds the border + padding. */ .mdc-chip .elementor-heading-title{ display:inline-block; border:1px solid #8A9A8A; padding:9px 16px; } /* ---------- Projects grid ( [mdc_projects] shortcode ) ---------- Interactive states are forced to brand colours (with !important + high specificity) so Elementor's global link/button hover colour can't bleed in. */ .mdc-proj-filters{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 28px; } .mdc-projects .mdc-proj-filter{ font-family:'Jost',sans-serif; font-size:12px; font-weight:500; letter-spacing:1.2px; text-transform:uppercase; color:#3E4A3F; background:transparent; border:1px solid #8A9A8A; border-radius:0; padding:9px 16px; cursor:pointer; transition:background .15s, color .15s, border-color .15s; } .mdc-projects .mdc-proj-filter:hover, .mdc-projects .mdc-proj-filter:focus, .mdc-projects .mdc-proj-filter:active{ color:#3E4A3F !important; background:transparent !important; border-color:#728472 !important; outline:none; box-shadow:none; } .mdc-projects .mdc-proj-filter.is-active, .mdc-projects .mdc-proj-filter.is-active:hover, .mdc-projects .mdc-proj-filter.is-active:focus, .mdc-projects .mdc-proj-filter.is-active:active{ background:#3E4A3F !important; border-color:#3E4A3F !important; color:#F4F0E6 !important; } .mdc-proj-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:20px; } .mdc-proj-card{ background:#FFFFFF; border:1px solid #DDD5C4; padding:26px 26px 22px; display:flex; flex-direction:column; } /* Optional featured image — full-bleed across the card top, only rendered when set. */ .mdc-proj-thumb{ margin:-26px -26px 18px; } .mdc-proj-thumb img{ display:block; width:100%; height:210px; object-fit:cover; } .mdc-proj-sector{ font-family:'Jost',sans-serif; font-size:11px; font-weight:600; letter-spacing:1.4px; text-transform:uppercase; color:#9C6B4A; margin-bottom:10px; } .mdc-proj-title{ font-family:'Spectral',Georgia,serif; font-weight:600; font-size:22px; line-height:1.2; color:#3E4A3F; margin:0 0 8px; } .mdc-proj-meta{ font-family:'Jost',sans-serif; font-size:13px; line-height:1.5; color:#6B6B63; margin:0 0 12px; } /* Collapsed = first 2 lines + ellipsis; expanded = full. */ .mdc-proj-desc{ font-family:'Mulish',sans-serif; font-size:15px; line-height:1.6; color:#1E211C; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; } .mdc-proj-card.is-open .mdc-proj-desc{ display:block; -webkit-line-clamp:unset; line-clamp:unset; overflow:visible; } .mdc-proj-desc p{ margin:0; } .mdc-projects .mdc-proj-toggle{ align-self:flex-start; margin-top:12px; padding:0; background:none; border:0; cursor:pointer; font-family:'Jost',sans-serif; font-size:12px; font-weight:600; letter-spacing:1px; text-transform:uppercase; color:#728472; } .mdc-projects .mdc-proj-toggle:hover, .mdc-projects .mdc-proj-toggle:focus, .mdc-projects .mdc-proj-toggle:active{ color:#3E4A3F !important; background:none !important; outline:none; box-shadow:none; } .mdc-proj-empty{ font-family:'Mulish',sans-serif; color:#6B6B63; } @media (max-width:600px){ .mdc-proj-grid{ grid-template-columns:1fr; } } /* ---------- Ninja Forms — brand styling (Contact enquiry form) ---------- */ .nf-form-cont .nf-field-label label{ font-family:'Jost',sans-serif; font-weight:600; font-size:14px; letter-spacing:.3px; color:#3E4A3F; } .nf-form-cont .ninja-forms-req-symbol{ color:#9C6B4A; } .nf-form-cont .nf-field-description, .nf-form-cont .nf-field-description p{ font-family:'Mulish',sans-serif; font-size:13.5px; line-height:1.5; color:#6B6B63; } .nf-form-cont input:not([type=button]):not([type=submit]), .nf-form-cont textarea, .nf-form-cont select{ font-family:'Mulish',sans-serif; font-size:15px; color:#1E211C; background:#FFFFFF; border:1px solid #DDD5C4; border-radius:0; padding:12px 14px; box-shadow:none; } .nf-form-cont input:not([type=button]):focus, .nf-form-cont textarea:focus, .nf-form-cont select:focus{ border-color:#728472 !important; outline:none; box-shadow:none; } .nf-form-cont .submit-wrap input, .nf-form-cont input[type=submit], .nf-form-cont input[type=button]{ font-family:'Jost',sans-serif !important; font-weight:600 !important; font-size:13px !important; letter-spacing:1.5px !important; text-transform:uppercase !important; background:#3E4A3F !important; color:#F4F0E6 !important; border:0 !important; border-radius:0 !important; padding:15px 32px !important; cursor:pointer; box-shadow:none !important; width:auto !important; } .nf-form-cont .submit-wrap input:hover, .nf-form-cont input[type=submit]:hover, .nf-form-cont input[type=button]:hover{ background:#728472 !important; color:#F4F0E6 !important; } /* ---------- Forminator — brand styling (Contact enquiry form) ---------- */ .forminator-ui.forminator-custom-form .forminator-label{ font-family:'Jost',sans-serif !important; font-weight:600 !important; font-size:14px !important; letter-spacing:.3px !important; color:#3E4A3F !important; } .forminator-ui .forminator-required, .forminator-ui .forminator-icon-required, .forminator-ui .forminator-label .forminator-required{ color:#9C6B4A !important; } .forminator-ui.forminator-custom-form input:not([type=submit]):not([type=file]):not([type=checkbox]):not([type=radio]), .forminator-ui.forminator-custom-form textarea, .forminator-ui.forminator-custom-form select{ font-family:'Mulish',sans-serif !important; font-size:15px !important; color:#1E211C !important; background:#FFFFFF !important; border:1px solid #DDD5C4 !important; border-radius:0 !important; box-shadow:none !important; } .forminator-ui.forminator-custom-form input:focus, .forminator-ui.forminator-custom-form textarea:focus, .forminator-ui.forminator-custom-form select:focus{ border-color:#728472 !important; box-shadow:none !important; } .forminator-ui .forminator-field-description, .forminator-ui .forminator-description{ font-family:'Mulish',sans-serif !important; font-size:13.5px !important; color:#6B6B63 !important; } .forminator-ui.forminator-custom-form .forminator-button-upload{ border:1px dashed #8A9A8A !important; background:#FFFFFF !important; color:#3E4A3F !important; border-radius:0 !important; font-family:'Jost',sans-serif !important; } .forminator-ui.forminator-custom-form button.forminator-button-submit, .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit, .forminator-ui .forminator-button-submit{ font-family:'Jost',sans-serif !important; font-weight:600 !important; font-size:13px !important; letter-spacing:1.5px !important; text-transform:uppercase !important; background:#3E4A3F !important; color:#F4F0E6 !important; border:0 !important; border-radius:0 !important; padding:15px 32px !important; box-shadow:none !important; } .forminator-ui.forminator-custom-form button.forminator-button-submit:hover, .forminator-ui .forminator-button-submit:hover{ background:#728472 !important; color:#F4F0E6 !important; } /* ---------- Sector mosaic ( .mdc-mosaic — 4-tile CSS-grid masonry ) ---------- Drop a
with exactly 4 inside (any Elementor HTML widget). 4-col × 5-row grid; tiles span in a staggered pinwheel so heights offset. */ .mdc-mosaic{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(5,1fr); gap:14px; aspect-ratio:1 / 1.12; } .mdc-mosaic img{ width:100%; height:100%; object-fit:cover; display:block; } .mdc-mosaic img:nth-child(1){ grid-area:1 / 1 / 4 / 3; } /* top-left, tall */ .mdc-mosaic img:nth-child(2){ grid-area:1 / 3 / 3 / 5; } /* top-right, short */ .mdc-mosaic img:nth-child(3){ grid-area:3 / 3 / 6 / 5; } /* bottom-right, tall */ .mdc-mosaic img:nth-child(4){ grid-area:4 / 1 / 6 / 3; } /* bottom-left, short */ @media (max-width:600px){ .mdc-mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:auto; aspect-ratio:auto; } .mdc-mosaic img{ grid-area:auto !important; aspect-ratio:1 / 1; } } /* ---------- Sector mosaic — NATIVE Elementor Grid version ( .mdc-mosaic-grid ) ---------- Add the CSS class `mdc-mosaic-grid` to a Grid container (4 cols × 5 rows, 14px gap) holding 4 Image widgets. Each image's tile position is set in the UI via Advanced ▸ Grid Item ▸ Column/Row Span → Custom. This CSS only forces each image to FILL its cell (Elementor images otherwise size to their own ratio). */ /* aspect-ratio fixes overall height; the grid's row tracks are set to repeat(5, minmax(0,1fr)) in Elementor so they divide that height evenly instead of the image's intrinsic height blowing them out. */ .mdc-mosaic-grid{ aspect-ratio:1 / 1.12; width:100%; } /* Each Image widget is a grid item stretched to its cell. The image is taken OUT of flow (absolute) so its intrinsic height can't inflate the row tracks — that lets aspect-ratio + minmax(0,1fr) rows govern the size. */ .mdc-mosaic-grid .elementor-widget-image{ position:relative; min-height:0; } .mdc-mosaic-grid .elementor-widget-image > .elementor-widget-container, .mdc-mosaic-grid .elementor-widget-image .elementor-image, .mdc-mosaic-grid .elementor-widget-image figure{ position:absolute; inset:0; margin:0; height:100%; width:100%; } .mdc-mosaic-grid .elementor-widget-image img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } @media (max-width:600px){ .mdc-mosaic-grid{ aspect-ratio:auto; grid-template-rows:auto !important; } .mdc-mosaic-grid .elementor-widget-image{ grid-column:1 / -1 !important; grid-row:auto !important; aspect-ratio:1 / 1; } .mdc-mosaic-grid .elementor-widget-image > .elementor-widget-container, .mdc-mosaic-grid .elementor-widget-image .elementor-image, .mdc-mosaic-grid .elementor-widget-image figure, .mdc-mosaic-grid .elementor-widget-image img{ position:absolute; } }