/* Strumsy visual refresh. Load LAST. Enable with class="strumsy-modern" on . Existing Bootstrap, date/time widgets, IDs and JavaScript remain in place. */ html.strumsy-modern { --sm-ink:#20323d; --sm-muted:#596a73; --sm-wine:#802f40; --sm-teal:#183c51; --sm-line:#dce3e5; --sm-paper:#f5f7f8; } .strumsy-modern body { background:var(--sm-paper); color:var(--sm-ink); font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; } .strumsy-modern h1,.strumsy-modern h2,.strumsy-modern h3,.strumsy-modern h4,.strumsy-modern h5,.strumsy-modern h6 { font-family:inherit; color:var(--sm-teal); font-weight:650; line-height:1.2; letter-spacing:-.025em; } .strumsy-modern h1 { font-size:clamp(28px,3.5vw,42px); } .strumsy-modern h2 { font-size:clamp(24px,2.7vw,32px); } .strumsy-modern h3 { font-size:24px; } .strumsy-modern a { color:var(--sm-wine); } .strumsy-modern a:hover { color:#592030; } .strumsy-modern a:focus-visible,.strumsy-modern button:focus-visible,.strumsy-modern input:focus-visible,.strumsy-modern select:focus-visible { outline:3px solid #258195 !important; outline-offset:3px; } .strumsy-modern .container { width:100%; max-width:1200px; padding-left:24px; padding-right:24px; background:transparent; } .strumsy-modern header { background:#fff; border-top:4px solid var(--sm-wine); border-bottom:1px solid var(--sm-line); padding:24px 0 0; } .strumsy-modern header .logo { display:flex; flex-direction:column-reverse; align-items:center; gap:12px; padding:4px 16px 20px 0; } .strumsy-modern header .logo img { width:180px; max-width:100%; height:auto; } .strumsy-modern header .logo h4 { background:transparent !important; color:var(--sm-muted) !important; font-size:12px !important; line-height:1.5; padding:0 !important; margin:0; max-width:190px; font-weight:500; letter-spacing:.02em; } .strumsy-modern header .search form { display:flex; flex-wrap:wrap; align-items:center; gap:8px; width:100%; padding:8px 0; margin:0; border:0; box-shadow:none; } .strumsy-modern header .search .form-group { margin:0; } .strumsy-modern header .search .form-group:has(#spincode) { flex:1 1 180px; min-width:0; } .strumsy-modern header .search input[type=text] { width:100%; padding-right:28px; } .strumsy-modern #clearable { top:14px; right:8px; } /* Retain the native search select; the old JS may still build its duplicate. */ .strumsy-modern header #search_type { display:inline-block; width:110px; } .strumsy-modern header #mobile_select { width:110px; } .strumsy-modern header #searchType { display:none; } .strumsy-modern .filter-zipcode { flex-basis:100%; float:none; margin:2px 0 0; font-family:inherit; font-size:12px; line-height:1.5; color:var(--sm-muted); } .strumsy-modern .filter-zipcode input { accent-color:var(--sm-wine); vertical-align:middle; } .strumsy-modern .login-info { font-size:13px; padding:8px 0 16px; } .strumsy-modern .login-info nav { padding:0 0 12px; } .strumsy-modern .login-info nav span { padding-right:0 !important; } .strumsy-modern .current-zipcode { padding:12px 14px; background:#f1f5f6; border:1px solid var(--sm-line); border-radius:12px; } .strumsy-modern .current-zipcode > span { font-size:16px !important; font-weight:650; } .strumsy-modern .current-zipcode .payattention2,.strumsy-modern .current-zipcode .payattention3 { font:inherit; font-size:13px; text-shadow:none; animation:none; } .strumsy-modern .current-location { margin-top:5px; } .strumsy-modern .distance form { display:flex; align-items:center; gap:10px; margin-top:10px; } .strumsy-modern .distance select { width:76px; height:36px; border:1px solid var(--sm-line); border-radius:7px; background:white; color:var(--sm-ink); } .strumsy-modern .main-nav .navbar { border:0; margin:12px 0 0; padding:10px 0; border-top:1px solid var(--sm-line); border-radius:0; background:transparent; box-shadow:none; } .strumsy-modern .navbar-collapse { padding-left:0; padding-right:0; } .strumsy-modern .navbar-nav > li > a { font:600 14px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif; color:var(--sm-ink); padding:12px 14px; border-radius:8px; text-shadow:none; } .strumsy-modern .navbar-nav > .active > a,.strumsy-modern .navbar-nav > li > a:hover,.strumsy-modern .navbar-nav > li > a:focus { background:#f3e9ec; color:#6b2637; } .strumsy-modern .navbar-nav > li > a.calltoaction { background:var(--sm-wine); color:white; } .strumsy-modern .navbar-nav > li > a.calltoaction:hover { background:#622133; color:white; } .strumsy-modern .navbar-toggle { min-height:44px; border:0; border-radius:8px; background:var(--sm-wine); } .strumsy-modern .navbar-toggle span { font-family:inherit !important; font-size:14px !important; } .strumsy-modern .dropdown-menu { border:1px solid var(--sm-line); border-radius:12px; padding:8px; box-shadow:0 12px 32px #183c511a; } .strumsy-modern .dropdown-menu > li > a { border-radius:6px; padding:9px 12px; } .strumsy-modern #quotes { position:relative; top:auto; left:auto; min-height:44px; margin:8px 0; font:600 20px/1.4 system-ui,sans-serif; color:var(--sm-teal); text-shadow:none; } .strumsy-modern #quotes-m { text-shadow:none; font:600 14px/1.4 system-ui,sans-serif; } .strumsy-modern .content-area { margin:32px 0; } .strumsy-modern .btn { border-radius:8px; background-image:none; box-shadow:none; text-shadow:none; font-weight:600; padding:10px 16px; line-height:1.4; } .strumsy-modern .btn-inverse,.strumsy-modern .btn-primary { background:var(--sm-wine); border:1px solid var(--sm-wine); color:#fff; } .strumsy-modern .btn-inverse:hover,.strumsy-modern .btn-primary:hover { background:#622133; color:#fff; } .strumsy-modern .btn-default { background:white; color:var(--sm-teal); border:1px solid #bdcbd1; } .strumsy-modern .btn-xs { padding:5px 10px; font-size:12px; } .strumsy-modern .btn-sm { padding:7px 12px; font-size:13px; } .strumsy-modern .form-control { border:1px solid #bac8ce; border-radius:8px; box-shadow:none; min-height:44px; height:auto; padding:10px 12px; font-size:16px; color:var(--sm-ink); } .strumsy-modern .form-control:focus { border-color:#258195; box-shadow:0 0 0 3px #2581951a; } .strumsy-modern .form-horizontal input.form-control,.strumsy-modern .form-horizontal select.form-control,.strumsy-modern .login input.form-control { height:44px; padding:10px 12px; } .strumsy-modern .form-horizontal .form-group { margin-bottom:18px; } .strumsy-modern .input-group-addon { background:#f0f4f5; color:var(--sm-muted); border-color:#bac8ce; } .strumsy-modern .input-group .form-control:not(:first-child):not(:last-child) { border-radius:0; } .strumsy-modern .input-group .form-control:last-child { border-radius:0 8px 8px 0; } .strumsy-modern .input-group-addon:first-child { border-radius:8px 0 0 8px; } .strumsy-modern .myform { background:#fff; padding:28px; margin:24px 0; border:1px solid var(--sm-line); border-radius:16px; box-shadow:0 12px 36px #183c510a; } .strumsy-modern .login { margin:48px 0 64px; } .strumsy-modern .myform h3 { margin:0 0 24px; } .strumsy-modern .panel,.strumsy-modern .thumbnail,.strumsy-modern .well { border:1px solid var(--sm-line); border-radius:12px; background:#fff; box-shadow:none; } .strumsy-modern .panel-heading { border-radius:11px 11px 0 0; background-image:none; } .strumsy-modern .panel-default > .panel-heading { background:#edf3f5; color:var(--sm-teal); } .strumsy-modern .panel-default .panel-title a { color:var(--sm-teal); } .strumsy-modern .panel-primary > .panel-heading { background:var(--sm-teal); color:white; } .strumsy-modern .panel-primary > .panel-heading .panel-title { color:white; } .strumsy-modern .table > thead > tr > th { padding:14px 12px; background:#edf3f5; border-bottom:1px solid var(--sm-line); color:var(--sm-teal); } .strumsy-modern .table > tbody > tr > td { padding:12px; border-color:var(--sm-line); vertical-align:middle; } .strumsy-modern .table-striped > tbody > tr:nth-of-type(odd) { background:#f8fafb; } .strumsy-modern .nav-sidebar > .active > a { background:var(--sm-wine); color:#fff; border-radius:8px; } .strumsy-modern .modal-content { border:0; border-radius:16px; box-shadow:0 24px 80px #10232d40; } .strumsy-modern .modal-header,.strumsy-modern .modal-body,.strumsy-modern .modal-footer { padding:22px; } .strumsy-modern footer { position:static; margin-top:40px; background:var(--sm-teal); } .strumsy-modern footer .container { max-width:1200px; background:transparent; padding:28px 24px; color:#edf4f6; } .strumsy-modern footer a { color:#fff; text-decoration:underline; text-underline-offset:3px; } .strumsy-modern footer .copyright { display:flex; flex-wrap:wrap; align-items:center; gap:14px; font-size:13px; } .strumsy-modern footer .copyright > span:first-child { flex:1 1 550px; } .strumsy-modern footer .pull-right { float:none !important; margin:0 !important; } .strumsy-modern footer img { width:28px; height:28px; object-fit:contain; } @media(min-width:768px) { .strumsy-modern header > .container > .row > .col-md-3 { width:20%; } .strumsy-modern header > .container > .row > .col-md-9 { width:80%; } .strumsy-modern .main-nav .navbar-nav { display:flex; flex-wrap:wrap; gap:4px; float:none; } } @media(max-width:991px) and (min-width:768px) { .strumsy-modern header .col-md-8.col-sm-8 { width:60%; } .strumsy-modern header .col-md-4.col-sm-4 { width:40%; } } @media(max-width:767px) { .strumsy-modern .container { padding-left:18px; padding-right:18px; } .strumsy-modern header { padding-top:16px; } .strumsy-modern header .logo { flex-direction:row; justify-content:space-between; padding:0 0 12px; } .strumsy-modern header .logo img { width:126px; } .strumsy-modern header .logo h4 { max-width:140px; } .strumsy-modern .navbar-brand { height:auto; padding:0 10px; } .strumsy-modern .navbar-brand img { max-width:130px; max-height:72px; } .strumsy-modern .navbar-header h4 { margin-top:0 !important; } .strumsy-modern .navbar-header .col-xs-4:last-child { float:right; } .strumsy-modern .strumsy-mobile-nav { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:center; column-gap:12px; } .strumsy-modern .strumsy-mobile-nav::before,.strumsy-modern .strumsy-mobile-nav::after { display:none; } .strumsy-modern .strumsy-mobile-nav > h4 { grid-column:1 / -1; grid-row:1; margin-bottom:8px; } .strumsy-modern .strumsy-mobile-nav > .col-xs-4 { float:none; min-width:0; width:auto; grid-column:2; grid-row:2 / 4; padding:0 8px; } .strumsy-modern .strumsy-mobile-nav > .col-xs-4:last-child { grid-column:1; grid-row:2; width:auto; } .strumsy-modern .strumsy-mobile-nav > .strumsy-mobile-logo { grid-column:1; grid-row:3; width:auto; margin:0; } .strumsy-modern .strumsy-mobile-logo .navbar-brand { display:flex; align-items:center; justify-content:flex-start; position:relative; float:none; width:100%; height:auto; padding:0; min-height:44px; margin:0; } /* Override legacy .navbar-brand img { position:absolute; top:-14px; height:175%; }. The image must occupy normal flow so the anchor contains its entire tap area. */ .strumsy-modern .strumsy-mobile-logo .navbar-brand img { display:block; position:static; top:auto; right:auto; bottom:auto; left:auto; width:96px; max-width:100%; height:auto; max-height:none; } .strumsy-modern .strumsy-mobile-nav .navbar-toggle { float:left; margin:0; } .strumsy-modern .strumsy-mobile-nav #quotes-m { top:0; min-height:42px; margin-top:8px; } /* Keep the existing JS search toggles aligned with the right content edge. */ .strumsy-modern header > .container > .row:has(#b_show) { display:flex; justify-content:flex-end; margin-top:0; margin-bottom:4px; } .strumsy-modern header > .container > .row:has(#b_show)::before, .strumsy-modern header > .container > .row:has(#b_show)::after { display:none; } .strumsy-modern header > .container > .row:has(#b_show) > div:empty { display:none; } .strumsy-modern header > .container > .row:has(#b_show) > div:not(:has(button)) { display:none; } .strumsy-modern header > .container > .row:has(#b_show) > div:has(button) { float:none; width:auto; margin-left:auto; text-align:right; } .strumsy-modern #b_show,.strumsy-modern #b_hide { min-width:44px; min-height:44px; padding:10px; font-size:22px; line-height:1; background:#edf3f5; color:var(--sm-teal); border:1px solid var(--sm-line); } .strumsy-modern .navbar-nav { margin:8px 0; } .strumsy-modern .navbar-nav > li > a { min-height:44px; } .strumsy-modern .login-info { padding-bottom:0; } .strumsy-modern .current-zipcode { margin:4px 0 12px; } .strumsy-modern .content-area { margin:24px 0; } .strumsy-modern .myform { padding:22px; } .strumsy-modern .login { margin:24px 0 40px; } .strumsy-modern footer .container { padding:24px 18px; } } @media(prefers-reduced-motion:reduce) { .strumsy-modern *, .strumsy-modern *::before, .strumsy-modern *::after { scroll-behavior:auto !important; transition:none !important; } }