/** * Design Kit — Components layer * Component-specific CSS, added incrementally as each site section is built. * Depends on tokens.css (custom properties) and global.css (base layer). */ /* ── HEADER ─────────────────────────── */ /* Rebuilt fresh against the owner's new 3-column Elementor structure * (Logo image / Navigation menu / CTA button containers -- IDs 4321c3e / * 3e81a8c / 43fc037 -- inside root Header container 64c2ac1, nav widget * 6731330, CTA button widget c18f196). Targets Elementor's own * auto-generated .elementor-element-{id} classes directly -- no custom * dk-* CSS classes added to the structure itself, per instruction to keep * the owner's build exactly as-is structurally. */ /* Desktop-only safety edge padding: the boxed Header container's inner * wrapper (.e-con-boxed > .e-con-inner) only sets max-width (1200px, from * the Kit's Container Width setting) with zero left/right padding of its * own -- confirmed by reading Elementor's core frontend.min.css directly. * At viewport widths at or just above 1200px this leaves the logo/CTA * flush against the browser edge with no breathing room. Reusing the same * 24px value the previous header build used for this exact purpose. */ .elementor-element-64c2ac1 > .e-con-inner { padding-left: 24px; padding-right: 24px; } /* Nav link hover: currently unowned -- UAE ships zero color rule for this * pointer style's hover/focus state (confirmed by reading UAE's own * frontend.css directly: no color rule matches a.hfe-menu-item:hover * outside the "pointer background" style, which isn't in use here), so * hovering currently does nothing at all. Brand amber on hover/focus. */ .elementor-element-6731330 a.hfe-menu-item:hover, .elementor-element-6731330 a.hfe-menu-item:focus { color: var(--dk-brand); transition: color 150ms ease; } /* CTA button glow: the button widget currently has zero custom CSS class * assigned (confirmed via the live Elementor data -- no _css_classes key), * so none of Design Kit's .dk-btn-primary treatment (shadow, hover lift) * reaches it even though it visually resembles that button style. Reusing * the project's own existing --dk-shadow-btn token (0 6px 16px * rgba(232,134,10,0.25)) rather than inventing a new one-off value, since * it's already the established brand glow used elsewhere in Design Kit -- * matches the value the owner suggested almost exactly. */ .elementor-element-c18f196 .elementor-button { box-shadow: var(--dk-shadow-btn); } /* ── HEADER — round 3 (matched against CaterOS_Homepage.dc.html, the * actual ground-truth reference source) ──────────────────────────── */ /* Sticky positioning + hairline bottom shadow: both present in the * reference's
inline style ("position:sticky; top:0; z-index:100; * ...box-shadow:0 1px 0 var(--border);") but absent from the live build * entirely -- this container had no sticky/shadow behavior at all before * now. Plain CSS position:sticky, no JS, matching the reference's own * approach exactly (support.js has nothing related to this). */ .elementor-element-64c2ac1 { position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 0 var(--dk-border); } /* Header-scoped max-width: reference specifies max-width:1180px on the * header's inner row specifically. The site's global Kit "Container Width" * setting is 1200px (used sitewide, not header-specific) -- rather than * changing that global value based on only the header reference, this * overrides max-width for the header's own inner wrapper only. Flagged in * the report: the global 1200px Kit setting itself doesn't match this * reference's 1180px and may be worth a deliberate sitewide decision later. */ .elementor-element-64c2ac1 > .e-con-inner { max-width: 1180px !important; padding-left: 24px; padding-right: 24px; } /* Nav link base color/size/weight/family: previously nothing was set here * at all (pure theme cascade default, unverified/unowned). Reference gives * exact values: color:var(--ink-soft) (#4A4F5E), font-size:15px, * font-weight:600, font-family inherited from the page body (Plus Jakarta * Sans -- already the sitewide font via --dk-font, so no separate * font-family declaration needed here). */ .elementor-element-6731330 a.hfe-menu-item { color: var(--dk-ink-soft); font-size: 15px; font-weight: 600; } /* Nav item spacing: reference's nav row uses "gap:32px" between items. * UAE's widget has no true flex-gap for menu items -- spacing comes from * per-item left/right padding instead (a padding model, not a gap, so it * also touches the outer edges of the first/last items -- an inherent * limitation of this widget, not something CSS alone can fully avoid). * The widget's own default is 15px/15px (=30px effective between items); * bumping to 16px/16px (=32px) matches the reference's gap value exactly. */ .elementor-element-6731330 .menu-item a.hfe-menu-item { padding-left: 16px; padding-right: 16px; } /* ── HERO ─────────────────────────── */ /* Homepage Hero (Wrapper 64c2ac1's sibling on the front page, container * eecc992). Built as native Elementor containers/widgets in _elementor_data * -- every spacing/color/shadow/radius value below is intentionally NOT * used here because it's already set through Elementor's own native * Padding/Margin/Background/Border/Box-Shadow/Typography controls on each * widget's own settings. This CSS block covers ONLY what has no native * equivalent -- three linked exceptions, all stemming from the same root * cause: Elementor's own Container "Position" control (confirmed by * reading Elementor's includes/elements/container.php directly) offers * just Default / Absolute / Fixed -- there is no "Relative" option. That * makes it impossible to natively establish a positioning context for (a) * the decorative background blobs and (b) the floating accent card. */ /* (a) Position-relative anchors for the two spots that need to contain an * absolutely-positioned child: the Wrapper (blobs) and the Browser Frame * (floating accent card). */ .elementor-element-eecc992, .elementor-element-79024a4 { position: relative; } /* Clip the oversized/offset decorative blobs (below) to the Wrapper's own * box so they can never introduce horizontal scroll on narrow viewports -- * verified concern, not a hypothetical: the blobs are deliberately wider * than their positioned edge (e.g. 480px wide at right:-120px). Real * content stays visible; this only clips the intentionally-oversized * decoration. */ .elementor-element-eecc992 { overflow: hidden; } /* (b) Decorative background blobs -- implemented as CSS pseudo-elements, * not DOM containers, so they're inherently invisible to screen readers * (no node exists to read) and can't intercept clicks (pointer-events: * none) -- this satisfies the accessibility requirement without needing an * aria-hidden attribute anywhere. */ .elementor-element-eecc992::before, .elementor-element-eecc992::after { content: ""; position: absolute; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, var(--dk-brand) 0%, transparent 70%); opacity: 0.06; } .elementor-element-eecc992::before { width: 480px; height: 480px; top: -160px; right: -120px; } .elementor-element-eecc992::after { width: 360px; height: 360px; bottom: -80px; left: -100px; } /* Keep real content above the decorative blob layer. */ .elementor-element-eecc992 > .e-con-inner { position: relative; z-index: 1; } /* (c) Floating accent card: an intentional overlap of the browser-frame's * bottom-left corner. No native Elementor control produces an overlap * between a container and its own child, so the exact placement is custom * CSS, anchored to the Frame's position:relative set above in (a). */ .elementor-element-b76cc65 { position: absolute; left: -24px; bottom: -24px; z-index: 2; max-width: 240px; } @media (max-width: 480px) { .elementor-element-b76cc65 { left: 12px; } } /* ── FOOTER ─────────────────────────── */ .dk-footer { background: var(--dk-bg-dark); } .dk-footer-inner { width: 100%; margin-left: auto; margin-right: auto; margin-inline-start: auto; margin-inline-end: auto; padding: 96px 24px 48px; } /* Final CTA */ .dk-footer-cta { text-align: center; padding-bottom: 64px; border-bottom: 1px solid rgba(255,255,255,0.1); } /* Elementor's heading default binds to the "Primary" global color slot * (brand orange) — same conflict already documented for the header logo. * Explicit override needed anywhere a heading sits on the dark footer. */ .dk-footer-cta .dk-footer-cta-heading .elementor-heading-title { color: #fff; font-size: 42px; } /* Elementor's text-editor widget default is ".elementor-widget-text-editor * { color: var(--e-global-color-text); }" (0,1,0) — a bare single-class * override of ours would TIE that, and lose on source order (same pattern * as every other color fix on this page). Scoped through ".dk-footer-cta" * for 0,2,0. */ .dk-footer-cta .dk-footer-cta-text { color: rgba(255,255,255,0.75); } .dk-footer-cta .dk-footer-cta-note { color: rgba(255,255,255,0.6); font-size: 14px; margin-top: 16px; } /* Large CTA button modifier — same wrapper-vs-inner-link targeting as the * header CTA button (Elementor puts _css_classes on the outer wrapper, the * real link is the nested .elementor-button). */ .dk-btn-primary--lg:not(.elementor-widget-button), .dk-btn-primary--lg.elementor-widget-button .elementor-button { font-size: 18px; padding: 18px 40px; } /* SEO columns */ .dk-footer-seo { padding-top: 64px; padding-bottom: 48px; } /* Same heading-color conflict as the CTA heading above (0,2,0 alone ties * Elementor's own ".elementor-widget-heading .elementor-heading-title" * rule and loses on source order) — scoped through ".dk-footer-seo" for * 0,3,0. */ .dk-footer-seo .dk-footer-col-heading .elementor-heading-title { color: #fff; font-size: 15px; font-weight: 700; } /* Same tie as the CTA text above (0,1,0) — scoped through ".dk-footer-seo" * for 0,2,0. */ .dk-footer-seo .dk-footer-col-text { color: rgba(255,255,255,0.65); font-size: 14px; line-height: 1.65; } /* Bottom bar */ .dk-footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); padding-top: 24px; padding-bottom: 24px; } /* Same specificity conflict already documented for the header nav: * Elementor's own default is ".elementor-widget-navigation-menu .menu-item * a.hfe-menu-item" (3 classes + element = 0,3,1). A bare ".dk-footer-links * a.hfe-menu-item" (0,2,1) would lose that fight, so this is scoped through * ".dk-footer .dk-footer-bottom" to reach 4 classes (0,4,1). */ .dk-footer .dk-footer-bottom .dk-footer-links a.hfe-menu-item { font-size: 13px; color: rgba(255,255,255,0.55); padding-left: 10px; padding-right: 10px; } .dk-footer .dk-footer-bottom .dk-footer-links a.hfe-menu-item:hover, .dk-footer .dk-footer-bottom .dk-footer-links a.hfe-menu-item:focus { color: rgba(255,255,255,0.9); } /* Dot separators between footer links, skipping the first item */ .dk-footer .dk-footer-bottom .dk-footer-links li.menu-item:not(:first-child) a.hfe-menu-item::before { content: "\00b7"; margin-right: 10px; color: rgba(255,255,255,0.35); } /* Same tie as above (0,1,0) — scoped through ".dk-footer-bottom" for 0,2,0. */ .dk-footer-bottom .dk-footer-copyright { color: rgba(255,255,255,0.55); font-size: 13px; } /* ── FOOTER — MOBILE (<=768px) ─────────────────────────────────────── */ @media (max-width: 768px) { .dk-footer-seo { flex-direction: column !important; gap: 40px; } .dk-footer-seo .dk-footer-col { width: 100% !important; } .dk-footer-bottom { flex-direction: column !important; text-align: center; gap: 16px; } .dk-footer-links { display: flex; flex-wrap: wrap; justify-content: center; } }