/** * Neil O'Connor — design language utilities (Hello Elementor child) * * Purpose: BASE for the design system — tokens live in design-tokens.css. * Typography, colors on canvas, and layout are owned by Elementor Site Settings / Kit. * This file: utility classes, optional opt-in prose block, focus, motion preference. * * Source: NeilOConnor-Design-Language-Reference.html + html/styles.css * Last updated: 2026-04-09 — .accent widget class: gold spans (Elementor Advanced → CSS Classes). */ html { -webkit-font-smoothing: antialiased; /* * NMO hero (and similar) use 100vw full-bleed strips; vw counts the scrollbar gutter, * so the page can grow a few pixels wider than the visible layout and show a horizontal bar. */ overflow-x: clip; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /** * Optional: wrap non-Elementor or HTML-widget copy that should match brand type scale. * Do not put on — add the class on a container when you want this (archives, legal, etc.). */ .nloc-prose { font-family: var(--font-body); color: var(--text-dark); line-height: 1.65; } .nloc-prose h1, .nloc-prose h2, .nloc-prose h3, .nloc-prose h4 { font-family: var(--font-serif); line-height: 1.15; color: var(--navy); } .nloc-prose h1 { font-size: clamp(2.6rem, 5.5vw, 4.2rem); font-weight: 900; } .nloc-prose h2 { font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; } .nloc-prose h3 { font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; } .nloc-prose h4 { font-size: 1.2rem; font-weight: 700; } .nloc-prose a { color: inherit; text-decoration: none; transition: color var(--transition); } /* * Content width + gutters (html/.container parity). * Opt-in on Elementor: container/section → Advanced → CSS Classes. * - .nloc-inner / .nloc-container — max-width var(--max-w) + horizontal var(--pad-x) * - .nloc-gutter — horizontal var(--pad-x) only (use on e-con-full when layout stays full bleed) */ .nloc-container, .nloc-inner { width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } .nloc-gutter { padding-left: var(--pad-x); padding-right: var(--pad-x); } /* * NMO full-bleed widgets set their own spacing (var(--pad-x), hero min-height, etc.). * Elementor .e-con defaults --padding-* (often 10px) and may re-set them in post-*.css after this file. * Use !important so we win over .elementor-{id} .elementor-element-* rules. Any elementor-widget-nmo-* descendant qualifies. */ .page-content .e-con-full:has([class*="elementor-widget-nmo-"]), main#content .e-con-full:has([class*="elementor-widget-nmo-"]) { /* * Kit defaults often paint flex containers navy; NMO heroes are white-column. Opaque white behind the * widget stack stops bleed-through at edges and between flex items. Inner widgets (e.g. credential strip) * keep their own backgrounds. */ background-color: var(--white, #ffffff) !important; --container-default-padding-top: 0 !important; --container-default-padding-right: 0 !important; --container-default-padding-bottom: 0 !important; --container-default-padding-left: 0 !important; --padding-top: 0 !important; --padding-right: 0 !important; --padding-bottom: 0 !important; --padding-left: 0 !important; /* * Elementor containers can apply a default "gap" between child widgets. * NMO full-bleed sections own their vertical rhythm, so zero the gap when the container * is acting as a pure wrapper for NMO widgets. */ --gap: 0px !important; gap: 0 !important; row-gap: 0 !important; column-gap: 0 !important; padding-block-start: 0 !important; padding-block-end: 0 !important; padding-inline-start: 0 !important; padding-inline-end: 0 !important; } /* Section label / gold bar (HTML widget or Advanced → CSS class) */ .nloc-section-label, .section-label { display: inline-block; font-family: var(--font-sans); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; } .nloc-section-divider, .section-divider { width: 48px; height: 3px; background: var(--gold); margin: 1rem 0 1.75rem; } .section-divider.center { margin-left: auto; margin-right: auto; } /* CTA patterns — parity with html/; prefer .nloc-btn* in new work */ .btn, .nloc-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2.25rem; font-family: var(--font-sans); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-radius: 3px; cursor: pointer; transition: var(--transition); border: 2px solid transparent; text-decoration: none; } /* * Links — override Elementor kit defaults (pink). * Scope to main content so header/nav/footer can keep their own styling. */ main#content a:not(.btn):not(.nloc-btn):not(.elementor-button) { color: var(--gold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); } main#content a:not(.btn):not(.nloc-btn):not(.elementor-button):visited { color: var(--gold); } main#content a:not(.btn):not(.nloc-btn):not(.elementor-button):hover { color: var(--navy); text-decoration-color: color-mix(in srgb, currentColor 45%, transparent); } .btn-gold, .nloc-btn--gold { background: var(--gold); color: var(--white); border-color: var(--gold); } .btn-gold:hover, .nloc-btn--gold:hover { background: transparent; color: var(--gold); } .btn-navy, .nloc-btn--navy { background: var(--navy); color: var(--white); border-color: var(--navy); } .btn-navy:hover, .nloc-btn--navy:hover { background: transparent; color: var(--navy); } .btn-outline-white, .nloc-btn--outline-white { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.6); } .btn-outline-white:hover, .nloc-btn--outline-white:hover { background: var(--white); color: var(--navy); border-color: var(--white); } .btn-outline-navy, .nloc-btn--outline-navy { background: transparent; color: var(--navy); border-color: var(--navy); } .btn-outline-navy:hover, .nloc-btn--outline-navy:hover { background: var(--navy); color: var(--white); } .nloc-top-accent { height: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-light)); } .elementor-widget-container a:focus-visible, .elementor-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /** * Elementor: add CSS class `accent` on the widget (Advanced → CSS Classes). * Any inside that widget uses brand gold (e.g. split heading lines). */ .elementor-element.accent span { color: var(--gold, #c8922a); }