carrying the theme's 16px block margins — 16 + 36 + 16 = 68px of card height for one chip. Card children are spaced by the container's flex gap; let it do the job. `.rr-project-address p` already zeroes its own margin the same way. */ .rr-project-card .elementor-widget-text-editor p { margin: 0; } /* ─── DARK BAND MODIFIER ────────────────────────────────────────────────── `rr-band-dark` flips a full-width band onto the charcoal ground. The background itself is an Elementor setting (the `secondary` global), so this block only re-points the text and rules that were written for cream. The specificity here is deliberate, not defensive padding. Elementor emits per-element colour as `.elementor-209 .elementor-element.elementor-element-9a000003 .elementor-heading-title` — (0,4,0) — and its stylesheet loads after this file, so a four-class rule ties and loses, and the stat numbers stay blue on charcoal. */ .rr-band-dark .rr-pullquote { color: rgba(255,255,255,.9); } /* three classes: the page's own `.rr-statband .rr-stat` border rule is (0,2,0) and loads later, so a two-class rule here would not win either */ .rr-band-dark.rr-statband .rr-stat { border-left-color: rgba(255,255,255,.15); } /* the stat value goes gold, matching every other dark band on the site */ .rr-band-dark .rr-stat > .elementor-element:first-child.elementor-element .elementor-heading-title { color: var(--warm); } /* and its label to a light tint of the brand blue, not plain grey */ .rr-band-dark .rr-stat > .elementor-element:last-child.elementor-element .elementor-heading-title { color: rgba(214,234,245,.72); } /* numbered list used by "why choose us" */ .rr-why-list .rr-why-item { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid rgba(26,22,18,.12); } .rr-why-list .rr-why-item:first-child { padding-top: 0; } .rr-why-num { font-family: var(--serif); font-size: 38px; font-weight: 600; color: var(--blue); line-height: 1; flex-shrink: 0; width: 44px; } .rr-why-text h4 { font-family: var(--serif); font-size: 23px; font-weight: 600; color: var(--ink); margin: 0 0 6px; } .rr-why-text p { font-size: 15px; color: var(--mid); line-height: 1.7; margin: 0; } @media (max-width: 767px) { .rr-why-num { font-size: 30px; width: 36px; } } /* large display tagline / pull quote on a band */ .rr-tagline { font-family: var(--serif); font-size: 36px; font-weight: 500; font-style: italic; line-height: 1.4; color: var(--white); margin: 0; text-align: center; } .rr-tagline-dark { color: var(--ink); } /* Image crop helper — Elementor's image widget has no crop control. Put .rr-img-cover on the widget and set the height with a size modifier. The `.elementor-element` prefix is load-bearing: this file is enqueued BEFORE Elementor's frontend CSS, so a one-class rule here ties with Elementor's own `img { height: auto }` and loses. Two classes deep wins. Page-level custom_css does not need this — it loads after Elementor. */ .elementor-element.rr-img-cover img { width: 100%; object-fit: cover; display: block; border-radius: 2px; } .elementor-element.rr-img-h340 img { height: 340px; } .elementor-element.rr-img-h420 img { height: 420px; } .elementor-element.rr-img-h480 img { height: 480px; } @media (max-width: 1024px) { .rr-tagline { font-size: 29px; } .elementor-element.rr-img-h420 img, .elementor-element.rr-img-h480 img { height: 380px; } } @media (max-width: 767px) { .rr-tagline { font-size: 23px; } .elementor-element.rr-img-h340 img, .elementor-element.rr-img-h420 img, .elementor-element.rr-img-h480 img { height: 280px; } } /* ─── DEFAULT CONTENT (non-Elementor pages) ─── */ .rr-content { padding: 72px 0 96px; } .rr-content .section-inner { max-width: 820px; } .entry-title { font-size: clamp(34px, 4.4vw, 52px); margin-bottom: 24px; } .entry-content { color: var(--mid); font-size: 17px; line-height: 1.8; } .entry-content > * + * { margin-top: 20px; } .entry-content h2, .entry-content h3, .entry-content h4 { color: var(--ink); margin-top: 40px; } .entry-content h2 { font-size: 34px; } .entry-content h3 { font-size: 27px; } .entry-content a { color: var(--blue-txt); text-decoration: underline; } .entry-content ul, .entry-content ol { padding-left: 22px; } .entry-content li + li { margin-top: 8px; } .entry-content blockquote { border-left: 3px solid var(--blue); padding-left: 20px; font-family: var(--serif); font-size: 22px; color: var(--ink); } .entry-meta { font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-txt); margin-bottom: 12px; } .rr-archive-list { display: grid; gap: 40px; } .rr-pagination { margin-top: 56px; display: flex; gap: 8px; flex-wrap: wrap; } .rr-pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); color: var(--charcoal); font-size: 14px; } .rr-pagination .page-numbers.current { background: var(--blue); border-color: var(--blue); color: var(--white); } /* screen-reader text */ .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; } .skip-link:focus { clip: auto; clip-path: none; height: auto; width: auto; margin: 0; padding: 12px 20px; position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--white); color: var(--charcoal); border-radius: var(--radius); } /* ─── RESPONSIVE ─── */ @media (max-width: 1024px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } } @media (max-width: 768px) { :root { --section-gap: 64px; } .nav-links, .nav-cta { display: none; } .mobile-toggle { display: flex; } .topbar { font-size: 13px; padding: 7px 0; position: fixed; top: 0; left: 0; right: 0; z-index: 200; } .topbar-inner { flex-direction: row; justify-content: center; gap: 16px; padding: 0 16px; } .topbar-contact a:nth-child(3) { display: none; } /* hide email */ .topbar-social { display: none; } .site-header { position: fixed; top: 35px; left: 0; right: 0; z-index: 199; } body { padding-top: calc(35px + 64px); } .nav-inner { padding: 0 16px; height: 64px; } .logo-img { height: 44px; } .logo-name { font-size: 20px; letter-spacing: .04em; } .logo-tagline { font-size: 9px; letter-spacing: .12em; } .footer-grid { grid-template-columns: 1fr; } .section-inner, .rr-shell { padding: 0 20px; } } /* Admin bar offset for the fixed mobile header */ @media (max-width: 768px) { body.admin-bar .topbar { top: 46px; } body.admin-bar .site-header { top: 81px; } body.admin-bar { padding-top: calc(35px + 64px); } } /* ─── ENQUIRY FAB ───────────────────────────────────────────────────────── Sits directly above .wa-fab (bottom 28 + 56 tall + 12 gap = 96). */ .rr-eq-fab { position: fixed; bottom: 96px; right: 28px; z-index: 999; width: 56px; height: 56px; padding: 0; border: none; cursor: pointer; background: var(--blue); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 20px rgba(27,163,216,.4); transition: transform .2s, box-shadow .2s, background .2s; } .rr-eq-fab:hover { transform: scale(1.1); background: var(--blue-dk); box-shadow: 0 6px 28px rgba(27,163,216,.5); } .rr-eq-fab:focus-visible { outline: 3px solid var(--warm); outline-offset: 3px; } .rr-eq-fab-icon { display: flex; } .rr-eq-fab svg { width: 26px; height: 26px; fill: var(--white); } .rr-eq-fab-label { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); white-space: nowrap; background: var(--charcoal); color: var(--white); font-family: var(--sans); font-size: 13px; letter-spacing: .04em; padding: 7px 12px; border-radius: var(--radius); opacity: 0; visibility: hidden; transition: opacity .2s; pointer-events: none; } .rr-eq-fab:hover .rr-eq-fab-label, .rr-eq-fab:focus-visible .rr-eq-fab-label { opacity: 1; visibility: visible; } /* ─── ENQUIRY POPUP ─── */ .rr-eq-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; overflow-y: auto; } .rr-eq-overlay[hidden] { display: none; } .rr-eq-backdrop { position: fixed; inset: 0; background: rgba(16,30,38,.78); opacity: 0; transition: opacity .25s; } .rr-eq-overlay.is-open .rr-eq-backdrop { opacity: 1; } body.rr-eq-open { overflow: hidden; } /* Two panels side by side: an editorial aside carrying the brand over a photo, and the form. `min-width: 0` on the panel is load-bearing — without it the flex item refuses to shrink below its content and the form column pushes the modal past its max-width instead of scrolling. */ .rr-eq-modal { position: relative; width: 100%; max-width: 940px; margin: auto; display: flex; align-items: stretch; max-height: calc(100vh - 48px); background: var(--white); border-radius: 10px; overflow: hidden; box-shadow: 0 30px 90px rgba(16,30,38,.5); opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .3s, transform .3s; } .rr-eq-aside { flex: 0 0 40%; position: relative; display: flex; align-items: flex-end; background-image: url('assets/img/enquiry-tower.jpg'); background-size: cover; background-position: center; } .rr-eq-aside-inner { width: 100%; padding: 34px 32px 32px; background: linear-gradient(180deg, rgba(17, 30, 37, 0.57) 0%, rgba(28,58,74,.86) 58%, rgba(28,58,74,.97) 100%);} /* mirrors .section-eyebrow — gold is the theme's accent on dark grounds only */ .rr-eq-eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--warm); } .rr-eq-eyebrow::before { content: ''; flex-shrink: 0; width: 26px; height: 1px; background: currentColor; } .rr-eq-welcome { font-family: var(--serif); font-size: 32px; font-weight: 600; line-height: 1.14; color: var(--white); margin: 0; } .rr-eq-callus { display: flex; flex-direction: column; gap: 2px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); font-family: var(--sans); font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.7); } /* two classes deep for the same reason every other link rule in this file is — the kit ships `.elementor-kit-9 a { color }` (0,1,1) and loads after us, so a bare `.rr-eq-callus a` loses the tie and the number comes out kit-blue */ .rr-eq-aside .rr-eq-callus a { color: var(--white); font-size: 16px; font-weight: 600; letter-spacing: .02em; transition: color .2s; } .rr-eq-aside .rr-eq-callus a:hover { color: var(--warm); } /* The panel is the scroller, not .rr-eq-body — that keeps the heading in the flow so it scrolls away with the form instead of staying pinned above it. Only the close button stays fixed, and it is absolute to the modal. */ .rr-eq-panel { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--white); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .rr-eq-panel::-webkit-scrollbar { width: 7px; } .rr-eq-panel::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; } @supports (height: 100dvh) { .rr-eq-modal { max-height: calc(100dvh - 48px); } } .rr-eq-overlay.is-open .rr-eq-modal { opacity: 1; transform: none; } /* the close button now sits over the white form panel, not a dark header */ .rr-eq-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 34px; height: 34px; padding: 0; cursor: pointer; background: var(--white); border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background .2s, border-color .2s, transform .25s; } .rr-eq-close:hover { background: var(--cream); border-color: var(--blue); transform: rotate(90deg); } .rr-eq-close:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; } .rr-eq-close svg { width: 15px; height: 15px; fill: var(--mid); } .rr-eq-head { flex-shrink: 0; padding: 38px 40px 22px; } /* Two classes deep on purpose: the Elementor kit ships `.elementor-kit-9 h2` at 50px (0,1,1), which outranks a bare one-class rule and silently sized this heading at 50px regardless of what was set here. */ .rr-eq-head .rr-eq-heading { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.16; color: var(--ink); margin: 0; padding-right: 44px; /* clear of the close button */ } .rr-eq-head .rr-eq-sub { font-family: var(--sans); font-size: 14px; line-height: 1.55; color: var(--mid); margin: 10px 0 0; } .rr-eq-body { flex: 0 0 auto; padding: 0 40px 34px; } .rr-eq-body .wpcf7 { margin: 0; } .rr-eq-body .wpcf7-form p { margin: 0; } .rr-eq-body .rr-eq-field { margin: 0 0 20px; } .rr-eq-body .rr-eq-field br { display: none; } /* Three classes deep, and the third one is load-bearing: the radio questions are `
` and `.rr-eq-body .wpcf7-form p { margin: 0 }` above is (0,2,1), so a two-class rule here loses the tie and the margin silently does nothing — only on the radio questions, since the text-field ones are