/* site.css: local replacement for the GoDaddy Website Builder framework. Covers the mobile drawer, the FAQ accordion, HTML widget iframes, the navy banner and sections, and the header (logo plus nav on one row). Forms and chat were dropped from the site, so their CSS is gone. */ /* The builder's dead widgets (popup, GoDaddy chat, cookie banner), the "Powered by GoDaddy Airo" branding and the nav's "More" item are no longer hidden by CSS: they were deleted from the HTML. */ /* Nav li elements start out visibility:hidden (.c1-5i/.c1-4r); the builder's script revealed them after measuring overflow. All 5 fit, so keep them shown. */ nav li.nav-item { visibility: visible !important; } /* Mobile navigation drawer (toggled from site.js) */ [data-ux="NavigationDrawer"] { display: none; } [data-ux="NavigationDrawer"].drawer-open { display: block !important; visibility: visible !important; /* the drawer also starts out visibility:hidden */ /* the builder leaves it off-canvas (negative left / translate): force it all */ position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: auto !important; max-width: none !important; transform: none !important; z-index: 99990; background: #0e2444; /* dark zone -> navy (light text) */ overflow: auto; padding: 24px; } [data-ux="NavigationDrawer"] [data-close="true"] { cursor: pointer; } a[data-aid="HAMBURGER_MENU_LINK"] { cursor: pointer; } /* FAQ accordion (the original [aria-expanded] rules still live in the HTML) */ .accordion-question { cursor: pointer; } .accordion-answer { display: none; } [aria-expanded="true"] ~ .accordion-answer { display: block !important; } /* HTML widget iframes (plans, extended coverage), height set from site.js */ iframe[srcdoc] { width: 100%; border: 0; display: block; } /* ---------- Promo banner: navy background, gold lettering ---------- The banner background comes from the .c1-p atomic class, the SAME one the gold buttons use (shared 11 times). That is why .c1-p is NOT touched: only the banner is overridden, through its semantic attribute. Two attributes = specificity (0,2,0), enough to beat the .c1-1e{color:#000 !important} on the text. */ [data-aid="BANNER_RENDERED"][data-ux="PromoBanner"] { background-color: #0e2444 !important; } [data-aid="BANNER_TEXT_RENDERED"][data-ux="PromoBannerText"] { color: #e8b44e !important; } /* ---------- Sections forced to navy (by ID) ---------- These 3 sections had a gold background via the .c1-p / .c1-8d atomic classes, which are SHARED with buttons and banner (untouchable). Each section is overridden by its id alone, and its content contrast adjusted. */ [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="Section"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="Widget"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="Section"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="Widget"], [id="78982fe7-9076-4e70-93dd-366e89a309f1"], [id="78982fe7-9076-4e70-93dd-366e89a309f1"] [data-ux="Section"], [id="78982fe7-9076-4e70-93dd-366e89a309f1"] [data-ux="Widget"] { background-color: #0e2444 !important; } /* #f1cbc275 (About): white text by default; headings and their inner spans in gold (the headline lives in a inside the

). */ [id="f1cbc275-357a-4932-860d-61c1a7fc109f"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] * { color: #f5f5f5 !important; } [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h1, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h1 *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h2, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h2 *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h3, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h3 *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h4, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] h4 * { color: #e8b44e !important; } /* Navy buttons inside navy sections -> gold with navy text (contrast). Covers the 2 buttons in #245f4c52 and the About "Contact US" ButtonSecondary. (#78982fe7 has white buttons that already contrast on navy: left alone.) */ [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"] { background-color: #e8b44e !important; } [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"] *, [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"], [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"] *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"] *, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"], [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"] * { color: #0e2444 !important; } [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonPrimary"]:hover, [id="245f4c52-6af5-4ad3-8f72-177c5463c97e"] [data-ux="ButtonSecondary"]:hover, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonPrimary"]:hover, [id="f1cbc275-357a-4932-860d-61c1a7fc109f"] [data-ux="ButtonSecondary"]:hover { background-color: #d39a2e !important; } /* ---------- Header: logo on the left, on the SAME row as the menu ---------- Requested by Doug: the logo sat in its own strip above the menu, which pushed the hero down and covered the marquee banner on the home page. Now: a single row -> logo flush left, links on the right. All of it inside @media >=768px so the mobile layout is NOT touched (original logo plus hamburger). Driven by CSS over stable hooks (data-stickynav / data-aid); neither the nested HTML nor the drawer JS is touched. */ @media (min-width: 768px) { /* the header's flex container (the one holding both logo and nav) */ [data-stickynav="true"] *:has([data-aid="HEADER_LOGO_RENDERED"]):has([data-aid="HEADER_NAV_RENDERED"]) { flex-direction: row !important; align-items: center !important; justify-content: space-between !important; column-gap: 16px !important; row-gap: 0 !important; } /* Release EVERY logo wrapper. GoDaddy pins a square
inside the link; it used to be masked by a min-width on the image. The whole subtree has to be freed, not just the direct children. */ [data-aid="HEADER_LOGO_RENDERED"], [data-aid="HEADER_LOGO_RENDERED"] *, [data-aid="HEADER_LOGO_OVERHANG_CONTAINER"], [data-aid="HEADER_LOGO_OVERHANG_CONTAINER"] * { width: auto !important; max-width: none !important; height: auto !important; max-height: none !important; min-width: 0 !important; min-height: 0 !important; overflow: visible !important; } /* logo on the left, never shrinking when the menu tightens */ [data-aid="HEADER_LOGO_RENDERED"] { margin: 0 auto 0 0 !important; flex: 0 0 auto !important; } /* After the rule above (same specificity, the later one wins). NOTE: with width:auto the browser does NOT apply the intrinsic ratio here (GoDaddy's wrapper breaks it) and the image comes out square. That is why the width is explicit, computed from sitelogo.png: 495x336 -> 1.473:1, and at 84px tall that is 124px. If the logo changes, recompute both values. */ [data-aid="HEADER_LOGO_IMAGE_RENDERED"] { height: 84px !important; width: 124px !important; max-width: 124px !important; object-fit: contain !important; } /* menu links: a single row on the right, no wrapping */ [data-aid="HEADER_NAV_RENDERED"] { flex: 0 1 auto !important; } [data-aid="HEADER_NAV_RENDERED"] > ul { display: flex !important; flex-wrap: nowrap !important; justify-content: flex-end !important; white-space: nowrap !important; } [data-aid="HEADER_NAV_RENDERED"] > ul > li { white-space: nowrap !important; } /* tighten each link's spacing so all 5 fit at narrower widths */ [data-aid="HEADER_NAV_RENDERED"] a { padding-left: 10px !important; padding-right: 10px !important; letter-spacing: 0.3px !important; } }