/* ssx-legacy.css — site-wide polish for legacy (non-v2) pages. Loaded on every front-end view. Keep scoped/defensive so it never fights the ssx.css v2 front page or landing templates. */ /* 1) Kill horizontal scroll from WPBakery .vc_row-fluid -15px gutters, the GTranslate flag widget, and wide gallery embeds. */ html, body { overflow-x: hidden; max-width: 100%; } /* 2) Keep WPBakery rows inside the viewport; the fluid gutter is cosmetic. */ .vc_row.vc_row-fluid { margin-left: 0; margin-right: 0; } .vc_row.vc_row-fluid > .wpb_column > .vc_column-inner { padding-left: 15px; padding-right: 15px; } /* 3) Responsive media inside legacy content. */ .entry-content img, .wpb_wrapper img, .wpb_single_image img { max-width: 100%; height: auto; } .wpb_video_widget iframe, .wpb_gmaps_widget iframe { max-width: 100%; } /* 4) GTranslate switcher shouldn't overhang the right edge. */ .gt_switcher { max-width: 100%; } /* ===== SSX-LEGACY-TYPO: v2 brand typography on legacy pages ===== Scoped to #content, which exists ONLY on legacy pages — the v2 front page and landing templates render #ssx and have no #content, so they are untouched. Fixes the missing "Myriad Set Pro Thin" Apple font + 24px base + blue links. */ :root{--ss-ink:#18181b;--ss-body:#27272a;--ss-gold:#f5a300;--ss-gold-dk:#9a6300;} #content{font-family:"Figtree",-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.7;color:var(--ss-body);} #content h1,#content h2,#content h3,#content h4,#content h5{font-family:"Archivo","Figtree",Arial,sans-serif;font-weight:800;color:var(--ss-ink);line-height:1.2;} #content h1{font-size:32px;margin:.2em 0 .55em;} #content h2{font-size:25px;margin:1.15em 0 .5em;} #content h3{font-size:20px;margin:1em 0 .4em;} #content h4{font-size:17px;margin:1em 0 .35em;} #content p,#content li{font-size:16px;line-height:1.7;} #content p{margin:0 0 1em;} #content ul,#content ol{margin:0 0 1em 1.4em;} #content a:not(.button):not(.btn):not(.vc_btn3):not(.wp-block-button__link):not(.ss-buy-btn){color:var(--ss-gold-dk);} #content a:not(.button):not(.btn):not(.vc_btn3):not(.wp-block-button__link):not(.ss-buy-btn):hover{color:var(--ss-gold);} /* Consistent form controls on legacy content (contact/quote/etc.). */ #content input[type=text],#content input[type=email],#content input[type=tel],#content input[type=url], #content input[type=number],#content input[type=password],#content input[type=search],#content textarea,#content select{ max-width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid #d4d4d8;border-radius:8px; font-family:inherit;font-size:15px;line-height:1.4;background:#fff;color:var(--ss-ink); } #content input:focus,#content textarea:focus,#content select:focus{outline:none;border-color:var(--ss-gold);box-shadow:0 0 0 3px rgba(245,163,0,.18);} /* ===== SSX-LEGACY-MEASURE: readable line length on wide screens ===== On a 1880px display the legacy content column grows to ~1300px, giving 1270-1330px paragraph lines. Cap the text blocks together (copy AND headings, so they stay aligned with one another) and centre them. Only binds above ~1000px, so narrower screens and already-narrow designed columns are untouched. Media/tables keep their full width, which reads as an intentional editorial layout. */ #content p,#content ul,#content ol,#content blockquote, #content h2,#content h3,#content h4{ max-width:980px;margin-left:auto;margin-right:auto; } /* ===== SSX-HEADER-DROPDOWN: real hover dropdowns on the main nav ===== */ @media only screen and (min-width:1000px){ #menu-main-nav > li{position:relative;} #menu-main-nav .sub-menu{ position:absolute;top:100%;left:0;min-width:252px;margin:0;padding:8px 0;list-style:none; background:#15130f;border:1px solid rgba(255,255,255,.10);border-radius:10px; box-shadow:0 18px 42px rgba(0,0,0,.45); opacity:0;visibility:hidden;transform:translateY(6px); transition:opacity .16s ease,transform .16s ease,visibility .16s; z-index:9999;text-align:left; } #menu-main-nav > li:hover > .sub-menu, #menu-main-nav > li:focus-within > .sub-menu{opacity:1;visibility:visible;transform:translateY(0);} /* keep the last dropdowns inside the viewport */ #menu-main-nav > li:nth-last-child(-n+4) .sub-menu{left:auto;right:0;} #menu-main-nav .sub-menu li{display:block;float:none;width:auto;margin:0;padding:0;} #menu-main-nav .sub-menu a{ display:block;padding:10px 18px;white-space:nowrap; font-family:"Figtree",-apple-system,"Segoe UI",Arial,sans-serif; font-size:14px;line-height:1.35;color:#e8e3d9;text-transform:none;letter-spacing:0; } #menu-main-nav .sub-menu a:hover{background:rgba(245,163,0,.14);color:#f5a300;} /* caret to signal a dropdown */ #menu-main-nav > li.menu-item-has-children > a::after{ content:"";display:inline-block;margin-left:7px;vertical-align:middle;opacity:.65; border:4px solid transparent;border-top-color:currentColor; } } /* Mobile: submenus render inline and indented instead of floating */ @media only screen and (max-width:999px){ #menu-main-nav .sub-menu{position:static;display:block;margin:0;padding:0 0 0 18px;list-style:none;background:none;box-shadow:none;border:0;} #menu-main-nav .sub-menu a{display:block;padding:8px 0;font-size:14px;opacity:.9;} } /* ===== SSX-GTRANSLATE: the language switcher overhung the header and its rows overlapped (fixed heights from the plugin). Contain and space it. ===== */ .gt_switcher{max-width:100%;} .gt_switcher .gt_option{max-height:280px;overflow-y:auto;overflow-x:hidden;border-radius:0 0 8px 8px;box-shadow:0 14px 34px rgba(0,0,0,.35);} .gt_switcher .gt_option a,.gt_switcher .gt_selected a{ height:auto!important;line-height:1.5!important;padding:7px 10px!important; display:flex!important;align-items:center;gap:8px;white-space:nowrap; } .gt_switcher .gt_option a img,.gt_switcher .gt_selected a img{margin:0!important;flex:0 0 auto;} /* SSX-DROPDOWN-DISPLAY: the parent theme hides submenus with display:none, which defeats the opacity/visibility reveal above. Keep them laid out and let visibility/opacity do the showing and hiding. */ @media only screen and (min-width:1000px){ #menu-main-nav .sub-menu{display:block;} } /* ===== SSX-CHROME-V2: brand the header bar and unify every button ===== */ /* The header bar was Bootstrap's slate #404852 (#header-main.navbar), not the v2 black. */ #header-main,#header-main.navbar{background:#141310 !important;border:0 !important;border-radius:0 !important;box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);} nav.ss-menu{background:transparent !important;} .ss-menu a.logo{display:inline-flex !important;align-items:center;} /* source is 250x94 (from Drive) — 36px display height keeps it ~2.6x, retina-crisp */ .ss-menu a.logo img{height:36px !important;width:auto !important;max-width:none !important;display:block;} #viewcart{width:26px !important;height:auto !important;} #ldsposignin{height:24px !important;width:auto !important;} @media only screen and (min-width:1000px){ #main-nav-wrapper{align-items:center;} #menu-main-nav > li > a{font-family:"Figtree",sans-serif;font-size:15px;font-weight:600;color:#e8e3d9;} #menu-main-nav > li > a:hover{color:#f5a300;} } /* ONE button spec everywhere (add-to-cart was rendering at 9.6px / 23px tall). */ #content .button,#content input[type=submit],#content button[type=submit], .woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce #respond input#submit{ font-family:"Archivo","Figtree",sans-serif !important;font-weight:700 !important; font-size:15px !important;line-height:1.2 !important;letter-spacing:0 !important; padding:13px 24px !important;border-radius:9px !important;border:0 !important; text-transform:none !important;box-shadow:none !important; background:#f5a300 !important;color:#1a1710 !important; display:inline-flex !important;align-items:center;justify-content:center;min-height:46px; } #content .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover, .woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{ background:#d98e00 !important;color:#1a1710 !important; } /* Language switcher: was a white box overhanging the dark header. */ .gt_switcher{width:auto !important;} .gt_switcher .gt_selected a{background:rgba(255,255,255,.08) !important;color:#e8e3d9 !important;border:1px solid rgba(255,255,255,.16) !important;border-radius:8px !important;} .gt_switcher .gt_option{background:#15130f !important;border:1px solid rgba(255,255,255,.12) !important;border-radius:0 0 8px 8px;} .gt_switcher .gt_option a{background:transparent !important;color:#e8e3d9 !important;} .gt_switcher .gt_option a:hover{background:rgba(245,163,0,.14) !important;color:#f5a300 !important;} /* ===== SSX-GT-V2: GTranslate renders .gtranslate_wrapper > .gt_switcher > .gt_option > a.nturl and ships its own high-specificity