/* Theme Name: AUI Group Theme URI: https://auigroup.example/ Description: AUI Group child theme for Hello Elementor. Carries the design system from project-references/aui-group-site as a real stylesheet, so Elementor is used for page structure while the CSS stays canonical. Author: Mojo Creative Digital Template: hello-elementor Version: 2.5.0 Text Domain: aui */ /* ------------------------------------------------------------------------- WordPress + Elementor adjustments. The design system itself lives in assets/css/aui.css, copied verbatim from the reference site so it stays diffable against the original. ------------------------------------------------------------------------- */ /* Hello Elementor constrains content; the reference design is full-bleed and handles its own gutters via .section padding. */ .site-main, .page-content, .elementor-section-wrap, .entry-content { max-width: none; margin: 0; padding: 0; } /* Elementor wraps page content in .elementor > .e-con; neutralise its default padding so .section owns spacing exactly as in the reference. */ .elementor-element.e-con, .elementor > .e-con { --padding-top:0; --padding-right:0; --padding-bottom:0; --padding-left:0; } /* Admin bar must not sit on top of the sticky nav. */ body.admin-bar .nav-bar { top: 32px; } @media (max-width: 782px) { body.admin-bar .nav-bar { top: 46px; } } /* Active nav link — reference used JS + [data-page]; WordPress knows this server-side, so the class is applied in the template instead. */ .nav-links a.is-active { color: var(--accent); } /* ------------------------------------------------------------------------- Atomic (Elementor V4) widget compatibility. The page head is built from atomic elements so the eyebrow, H1 and lede are editable in Elementor. Elementor emits base styles for those elements as `.elementor .e-*-base` (specificity 0,2,0) from base-desktop.css, which is enqueued after aui.css — so they outrank the design system's single-class rules. Each rule below re-asserts a value that aui.css already declares; the extra `.e-*-base` class is only there to win the cascade. ------------------------------------------------------------------------- */ /* Nested atomic divs are pure structure; they carry no padding in the reference. */ .elementor .page-head.e-div-block-base, .elementor .page-head .e-div-block-base, .elementor .section.e-div-block-base, .elementor .section .e-div-block-base { padding: 0; min-width: 0; } /* Atomic elements carry `.e-con`, whose `width:var(--width)` = 100%. That is correct everywhere except the .sec-head text column, which is a flex item and must shrink to its content so .lede's max-width:560px governs the measure. The same applies to the name/role block inside `.quote-meta`: at 100% it fills the row and pushes the arrows onto a second line. Scoped tightly — `.page-head` and `.section` are themselves flex items of Elementor's outer container, so widening the selector collapses them whenever their content is narrow (e.g. after an AJAX form confirmation). */ .elementor .page-head .sec-head > .e-div-block-base { width: auto; } /* Re-assert the padding aui.css declares. NOTE: `.section` here restates `.section{padding:96px clamp(24px,6vw,100px)}`. The reference also has `.page-head + .section{padding-top:56px}`, which Elementor's container wrapping currently breaks — if that is ever fixed, fix it here too. */ .elementor .page-head.e-div-block-base { padding: 56px clamp(24px,6vw,100px) 52px; } .elementor .section.e-div-block-base { padding: 96px clamp(24px,6vw,100px); } .elementor .contact-item.e-div-block-base { padding: 24px 28px; } .elementor .partner-cell.e-div-block-base { padding: 40px 24px; } .elementor .case-image.e-div-block-base { padding: 20px; } .elementor .svc-row.e-div-block-base { padding: 26px 0; } .elementor .stat-flat.e-div-block-base { padding: 26px 20px; } .elementor .feature-index-item.e-div-block-base { padding: 18px 0; } .elementor .hero-badge.e-div-block-base { padding: 16px 18px; } .elementor .home-index a.e-div-block-base { padding: 28px 26px; } /* `.hero-photo` overrides `.section`'s vertical padding; the re-assertion above is more specific than the design system, so it has to be restated. */ .elementor .hero-photo.e-div-block-base { padding-top: 64px; padding-bottom: 64px; } /* `.hero-pill` is a shrink-to-fit chip: the generic reset above zeroes its padding and `.e-con`'s width:100% stretches it across the column. */ .elementor .hero-pill.e-div-block-base { padding: 8px 14px; width: auto; } .elementor .svc-icon-box.e-div-block-base { padding: 0; } /* Display modes the design system owns — vs .e-div-block-base{display:block} */ .elementor .sec-head.e-div-block-base { display: flex; } .elementor .contact-strip.e-div-block-base { display: grid; } .elementor .partner-grid.e-div-block-base { display: grid; } .elementor .partner-cell.e-div-block-base { display: flex; } .elementor .case-study.e-div-block-base { display: grid; } .elementor .case-image.e-div-block-base { display: flex; } .elementor .svc-row.e-div-block-base { display: grid; } .elementor .about-layout.e-div-block-base { display: grid; } .elementor .home-index.e-div-block-base { display: grid; } .elementor .hero-photo.e-div-block-base, .elementor .hero-inner.e-div-block-base, .elementor .hero-actions.e-div-block-base, .elementor .hero-badge.e-div-block-base { display: flex; } .elementor .hero-pill.e-div-block-base { display: inline-flex; } .elementor .stat-flat-row.e-div-block-base { display: grid; } .elementor .about-media.e-div-block-base, .elementor .brand-row.e-div-block-base, .elementor .feature-index.e-div-block-base, .elementor .feature-index-item.e-div-block-base { display: flex; } .elementor .svc-icon-box.e-div-block-base { display: flex; } /* Review carousel. Each review is a complete `.quote-block` in the page so it can be edited in Elementor; only the active one is on screen. The extra `.e-div-block-base` keeps these ahead of the atomic base's `display:block`. Until reviews.js marks the section `reviews-ready`, the first slide shows and the rest are hidden — so the page is never blank, and reads correctly with JavaScript off. Once the script is running, `.is-active` takes over. */ /* With no published testimonials the shortcode outputs nothing, but the section would still paint an empty tinted band. Hiding it lets the page fall back to the lede, which already explains that no reviews are published yet. `:has()` is unsupported on very old browsers — they simply see the band. */ .elementor .reviews-band.e-div-block-base:not(:has(.review-slide)) { display: none; } .review-slide { display: none; } .review-slide:first-of-type { display: flex; } .reviews-ready .review-slide:first-of-type { display: none; } .reviews-ready .review-slide.is-active { display: flex; } /* .label{margin-bottom:14px}, .page-head .lede{margin-top:16px} and .crumbs{margin-bottom:16px} — vs .e-paragraph-base{margin:0} */ .elementor .label.e-paragraph-base { margin-bottom: 14px; } .elementor .page-head .lede.e-paragraph-base { margin-top: 16px; } .elementor .page-head .crumbs.e-paragraph-base { margin-bottom: 16px; } .elementor .contact-item .k.e-paragraph-base { margin-bottom: 10px; } .elementor .case-loc.e-paragraph-base { margin-bottom: 12px; } .elementor .case-copy h3.e-heading-base { margin-bottom: 18px; } /* `.svc-name` is an h3 so the eight services sit in the document outline; the reference used a div, which inherited `line-height:normal`. Headings here pick up 1.2 from the theme, so restore the reference's line box. */ .elementor .svc-name.e-heading-base { margin-bottom: 4px; line-height: normal; } /* Same story for the about feature headings: the reference's h3 inherited `line-height:normal`, the theme gives headings 1.2. */ .elementor .feature-index h3.e-heading-base { margin-bottom: 5px; line-height: normal; } .elementor .hero-title.e-heading-base { margin: 18px 0 22px; } .elementor .home-index h3.e-heading-base { margin: 10px 0 6px; line-height: normal; } /* Same again for the stat row: `.n` and `.l` are unstyled for line-height in aui.css, so the reference renders them at `normal` while `body{line-height:1.5}` from Hello Elementor's reset stretches them here — most visible on the 52px numbers (78px tall vs 66px). Converted blocks are held to the reference. */ .elementor .stat-flat .n.e-paragraph-base, .elementor .stat-flat .l.e-paragraph-base { line-height: normal; } .elementor .stat-flat .l.e-paragraph-base { margin-top: 8px; } /* The reference marked the "06 / 06" separator with , which is not in e-paragraph's allowed inline-tag list; is, and renders identically once the italic is removed. Mirrors aui.css's `.sec-index i`. */ .sec-index em { font-style: normal; opacity: .5; margin: 0 2px; } /* The reference carried these four declarations as an inline style on `.page-head .sec-head`; as a rule they apply to every interior page head. */ .page-head .sec-head { border: none; padding: 0; margin: 0; align-items: flex-end; } /* aui.css changes several of these below 900px. The re-assertions above are unconditional and outrank the design system, so every responsive rule they would otherwise swallow has to be mirrored here. Audited against every `@media` block in aui.css that touches a re-asserted property. */ @media (max-width: 900px) { .elementor .section.e-div-block-base { padding-top: 64px; padding-bottom: 64px; } .elementor .svc-row.e-div-block-base { padding: 20px 0; } } /* ------------------------------------------------------------------------- WPForms → AUI design system. The quote form on /contact/ is WPForms form #49, rendered with WPForms' own stylesheets switched off (Settings → Include Form Styling → "No styling"), so nothing has to be un-styled first. Every field carries the design system's `field` class via its WPForms "CSS Classes" setting, so aui.css's `.field`, `.field label` and `.field input/select/textarea` rules style the form directly. Only the parts WPForms owns are mapped below. ------------------------------------------------------------------------- */ /* `.contact-form` lands on WPForms' container div, which wraps the
— the box (max-width, border, padding) is therefore already correct. */ /* Two-up rows. The reference wrapped each pair in `.grid.g2`; WPForms emits one flat field container, so the columns are declared here instead. Column gap matches `.grid{gap:24px}`; vertical rhythm stays with `.field`'s margin. */ .contact-form .wpforms-field-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .contact-form .wpforms-field { grid-column: span 2; min-width: 0; } .contact-form .wpforms-field.aui-half { grid-column: span 1; } /* Mirrors aui.css's `@media (max-width:560px){.g2{grid-template-columns:1fr}}`. In the reference each pair sat in its own `.grid.g2`, so when that collapsed to one column the grid's 24px gap stayed between the two stacked fields while the gap between pairs remained `.field`'s 18px margin. `aui-pair-end` marks the second field of each pair so that uneven rhythm is reproduced exactly. */ @media (max-width: 560px) { .contact-form .wpforms-field.aui-half { grid-column: span 2; } .contact-form .wpforms-field.aui-pair-end { margin-top: 24px; } } /* WPForms' anti-spam honeypots are injected by JavaScript and rely on WPForms' own stylesheet to stay out of sight — with styling disabled they land in the field grid and their decoy labels show up in the page text. Every real field carries the design system's `field` class, so anything without it is a decoy. Taken out of flow and hidden the same way WPForms hides them itself, rather than with `display:none`, which some bots test for. */ .contact-form .wpforms-field:not(.field) { position: absolute !important; visibility: hidden !important; width: 1px; height: 1px; overflow: hidden; } /* The reference carried `width:100%; border:none` inline on the submit button. */ .contact-form .wpforms-submit { width: 100%; border: none; } .contact-form .wpforms-submit-container { margin: 0; } /* No field was required in the reference, so it has no asterisk style. The inputs carry `required` and the label span is aria-hidden, so hiding it costs assistive tech nothing. Remove this rule to show the asterisks. */ .contact-form .wpforms-required-label { display: none; } /* Validation and confirmation states, which the reference never had. Built from design tokens so they read as part of the system rather than bolted on. */ .contact-form .wpforms-error, .contact-form .wpforms-field-error { display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; text-transform: uppercase; color: var(--accent); margin-top: 6px; } .contact-form input.wpforms-error, .contact-form select.wpforms-error, .contact-form textarea.wpforms-error { border-color: var(--accent); } /* With AJAX submit on, the confirmation replaces the *inside* `.contact-form`, so the bordered box and its padding are already there — only the message typography needs setting, matching `.lede`. */ .contact-form .wpforms-confirmation-container { font-size: 16px; line-height: 1.7; color: var(--muted); } .contact-form .wpforms-confirmation-container p { margin: 0; } /* ------------------------------------------------------------------------- Project case studies. The reference painted each project photo as an inline `background-image` with a path relative to the page, which 404s once the page lives at /projects/. They are real elements now — served from the media library, so they carry alt text, srcset and lazy-loading, and are swappable from wp-admin. These rules make an behave as the background did. ------------------------------------------------------------------------- */ .case-image { position: relative; overflow: hidden; } .case-image .case-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* was background-size: cover */ object-position: center; /* was background-position: center */ } /* The Box Hill photo is portrait in a landscape frame; the reference nudged the crop down with `background-position:center 30%`. */ .case-image .case-photo.pos-lower { object-position: center 30%; } /* The tag chip has to sit above the photo now that the photo is a real element. */ .case-image .tag { position: relative; z-index: 1; } /* On the Home page a project's photo is a slider (AUI Field Slider plugin) placed straight in `.case-media`, and the tag chip beside it keeps the corner it had in `.case-image`: 20px in from the top left, above the slider's chevrons (z-index 2). */ .case-media { position: relative; } .case-media > .tag { position: absolute; top: 20px; left: 20px; z-index: 3; pointer-events: none; } /* Project detail lists. aui.css styles these as `.proj-detail li`, but no atomic element can render `ul`/`ol`/`li` — Elementor's tag enums stop at div/section/article/etc. To make each bullet editable the list is a div of paragraphs, so the `li` rules are mirrored onto `.proj-detail-item` here. `.proj-detail` already carries `list-style:none` and draws its dash with `::before`, so the rendering is unchanged; only the tag names differ. Semantics are restored with role="list"/"listitem" in functions.php. */ .proj-detail-item { padding-left: 18px; position: relative; } .proj-detail-item::before { content: "—"; position: absolute; left: 0; color: var(--accent); } /* `.proj-detail li{margin-top:8px}` — vs `.e-paragraph-base{margin:0}` */ .elementor .proj-detail-item.e-paragraph-base { margin-top: 8px; } /* e-button ships a styled base (padding, background, radius, inline-block); `.proj-link` is a plain inline link, so that base has to be undone. */ .elementor .proj-link.e-button-base { padding: 0; background: transparent; border-radius: 0; border: none; text-align: left; display: inline-flex; } /* ------------------------------------------------------------------------- About page. ------------------------------------------------------------------------- */ /* aui.css targets `.feature-index li`; no atomic element renders list tags, so each entry is a div and the `li` rules are mirrored onto its class. Semantics are restored with role="list"/"listitem" in functions.php. */ .feature-index-item { gap: 16px; border-top: 1px solid var(--line); } .feature-index-item:first-child { border-top: none; } .elementor .feature-index-item.e-div-block-base:first-child { padding-top: 0; } /* The two brand logos are raw SVG markup; without this their widget wrappers, not the logos, would be `.brand-row`'s flex items and the 32px gap would sit in the wrong place. */ .brand-row .elementor-widget-html { display: contents; } /* The reference carried `style="max-width:none"` inline on this one lede. */ .about-media .lede { max-width: none; } /* ------------------------------------------------------------------------- Front page. ------------------------------------------------------------------------- */ /* `.hero-badge strong` / `.hero-badge span` are styled by tag in aui.css, and e-paragraph only offers p/span — so the two lines carry classes instead and the declarations are mirrored here. */ .hero-badge .badge-title { display: block; font-size: 13px; font-weight: 700; line-height: 1.3; font-family: var(--aui-display); } .hero-badge .badge-sub { font-size: 11.5px; color: var(--muted); } /* The decorative corner marks and the two icons stay as raw SVG markup; their widget wrappers must not become boxes of their own inside the flex parents. */ .hero-pill .elementor-widget-html, .hero-badge .elementor-widget-html, .hero-photo > .elementor-widget-html { display: contents; } /* e-button ships a styled base — background, padding, radius, inline-block — which outranks `.btn`. Restate the design system's button box, then the variants, which `.e-button-base` would otherwise repaint. */ .elementor .btn.e-button-base { padding: 16px 28px; border: 1px solid transparent; border-radius: 2px; background: transparent; display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-align: center; } .elementor .btn-accent.e-button-base { background: var(--accent); color: #fff; } .elementor .btn-accent.e-button-base:hover { background: #E64E00; } .elementor .btn-outline.e-button-base { background: transparent; color: var(--ink); border-color: var(--ink); } .elementor .hero-photo .btn-outline.e-button-base { background: rgba(0,0,0,.4); color: #fff; border-color: rgba(255,255,255,.5); } .elementor .hero-photo .btn-outline.e-button-base:hover { background: rgba(0,0,0,.65); color: #fff; } /* These carry no line-height in aui.css, so the reference renders them at `normal` while Hello Elementor's `body{line-height:1.5}` stretches them. Converted blocks are held to the reference. */ .elementor .btn.e-button-base, .elementor .hero-pill { line-height: normal; } /* An inline child's line box is set by its parent's line-height, so patching the child alone does nothing — `.hero-badge`'s sub-line and `.home-index`'s number are both inline and inherit 1.5 through their container. Setting the container back to `normal` is what the reference actually has. */ .elementor .hero-badge.e-div-block-base, .elementor .home-index a.e-div-block-base { line-height: normal; } /* ------------------------------------------------------------------------- Site header. The header's inner markup comes from an Elementor template rendered inside `