/* * Simple Calculator Tools — Master Calculator Template v2.0 * Frozen shared page shell for Gold Standard calculator pages. * * Desktop: 250px left sidebar | 600px calculator column | 250px right sidebar * Tablet: 220px left sidebar | flexible calculator; right sidebar below * Mobile: calculator first, then left and right sidebars * * This file must load LAST in . Every rule is scoped to * data-sct-template="master-calculator-v2" so existing pages are untouched * until they are deliberately migrated. */ body[data-sct-template="master-calculator-v2"]{ --master-blue:#1769ff; --master-navy:#10213f; --master-text:#20324b; --master-muted:#5f7089; --master-line:#d5e1f0; --master-card:#fff; --master-soft:#f5f9ff; --master-radius:12px; --master-sidebar:250px; --master-center:600px; --master-gap:24px; position:relative; isolation:isolate; overflow-x:hidden; background: radial-gradient(circle at 8% 19%,rgba(37,99,235,.07),transparent 24%), radial-gradient(circle at 91% 38%,rgba(32,180,134,.06),transparent 23%), linear-gradient(180deg,#f8fbff 0%,#f2f7fd 52%,#edf3fa 100%)!important; color:var(--master-text); } body[data-sct-template="master-calculator-v2"]::before{ content:""; position:fixed; inset:0; z-index:-2; pointer-events:none; background-image: linear-gradient(rgba(37,99,235,.035) 1px,transparent 1px), linear-gradient(90deg,rgba(37,99,235,.035) 1px,transparent 1px); background-size:24px 24px; } body[data-sct-template="master-calculator-v2"] .site-header, body[data-sct-template="master-calculator-v2"] main, body[data-sct-template="master-calculator-v2"] .site-footer{ position:relative; z-index:1; } /* One compact header and hero on every calculator page. */ body[data-sct-template="master-calculator-v2"] .site-header .nav{ width:min(1500px,calc(100% - 48px)); min-height:60px!important; height:60px!important; padding:0!important; gap:20px!important; } body[data-sct-template="master-calculator-v2"] .site-header .brand{ flex:0 0 auto; font-size:.98rem!important; } body[data-sct-template="master-calculator-v2"] .site-header .brand-mark{ transform:scale(.88); } body[data-sct-template="master-calculator-v2"] .site-header .nav-links{ display:flex; margin-left:auto; gap:17px!important; flex-wrap:wrap; justify-content:flex-end; font-size:.88rem!important; } body[data-sct-template="master-calculator-v2"] .site-header .nav-links a{ white-space:nowrap; } body[data-sct-template="master-calculator-v2"] .page-hero{ min-height:0!important; padding:15px 0 17px!important; background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(241,247,255,.93))!important; border-bottom:1px solid rgba(37,99,235,.12)!important; box-shadow:0 7px 22px rgba(20,54,100,.045); } body[data-sct-template="master-calculator-v2"] .page-hero>.container{ width:min(1500px,calc(100% - 48px)); } body[data-sct-template="master-calculator-v2"] .page-hero .breadcrumb{ margin-bottom:6px!important; font-size:.78rem!important; } body[data-sct-template="master-calculator-v2"] .page-hero h1{ max-width:none!important; margin:0 0 6px!important; font-size:clamp(1.85rem,3.5vw,2.75rem)!important; line-height:1.04!important; letter-spacing:-.035em!important; } body[data-sct-template="master-calculator-v2"] .page-hero p{ max-width:900px!important; margin:0!important; color:#526784!important; font-size:.95rem!important; line-height:1.42!important; } body[data-sct-template="master-calculator-v2"] .calculator-favorite-btn{ margin:8px 0 0!important; min-height:34px!important; padding:6px 10px!important; border-radius:8px!important; font-size:.76rem!important; } body[data-sct-template="master-calculator-v2"] .sct-premium-bar{ margin-top:8px!important; gap:8px!important; } body[data-sct-template="master-calculator-v2"] .sct-premium-rating{ font-size:.78rem!important; } body[data-sct-template="master-calculator-v2"] .sct-premium-action{ min-height:32px!important; padding:6px 9px!important; border-radius:8px!important; font-size:.75rem!important; } /* Frozen three-column shell. */ body[data-sct-template="master-calculator-v2"] .calculator-section-template{ padding:22px 0 42px!important; } body[data-sct-template="master-calculator-v2"] .calculator-section-template>.container{ width:min(1500px,calc(100% - 48px))!important; max-width:1500px!important; padding:0!important; } body[data-sct-template="master-calculator-v2"] .calculator-layout-template{ display:grid!important; grid-template-columns:var(--master-sidebar) minmax(var(--master-center),1fr) var(--master-sidebar)!important; grid-template-areas:"left main right"; gap:var(--master-gap)!important; align-items:start!important; width:100%!important; max-width:none!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-left{ grid-area:left; } body[data-sct-template="master-calculator-v2"] .template-calculator-main{ grid-area:main; min-width:0!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-right{ grid-area:right; } body[data-sct-template="master-calculator-v2"] .template-sidebar{ width:var(--master-sidebar)!important; max-width:var(--master-sidebar)!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-left{ justify-self:end!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-right{ justify-self:start!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-stack{ display:flex!important; flex-direction:column!important; gap:14px!important; } /* Unified side cards. No workflow-card exception exists in the master. */ body[data-sct-template="master-calculator-v2"] .template-side-card, body[data-sct-template="master-calculator-v2"] .template-ad-box{ width:100%!important; box-sizing:border-box!important; overflow:hidden; margin:0!important; padding:17px!important; border:1px solid var(--master-line)!important; border-radius:var(--master-radius)!important; background:linear-gradient(145deg,rgba(255,255,255,.99),rgba(246,250,255,.98))!important; box-shadow:0 7px 20px rgba(20,54,100,.075)!important; } body[data-sct-template="master-calculator-v2"] .template-side-card h3{ margin:0 0 11px!important; padding:0 0 9px!important; border-bottom:1px solid #e1e9f3; color:var(--master-navy)!important; font-size:.98rem!important; line-height:1.3!important; } body[data-sct-template="master-calculator-v2"] .template-side-card p, body[data-sct-template="master-calculator-v2"] .template-side-card li{ color:var(--master-muted); font-size:.82rem; line-height:1.5; } body[data-sct-template="master-calculator-v2"] .template-side-list{ display:grid; gap:0; } body[data-sct-template="master-calculator-v2"] .template-side-list a, body[data-sct-template="master-calculator-v2"] .sidebar-list a{ position:relative; display:block; padding:10px 18px 10px 0!important; border-bottom:1px solid #e3ebf4!important; color:#294564!important; font-size:.82rem!important; font-weight:750!important; line-height:1.38; } body[data-sct-template="master-calculator-v2"] .template-side-list a:last-child, body[data-sct-template="master-calculator-v2"] .sidebar-list a:last-child{ border-bottom:0!important; } body[data-sct-template="master-calculator-v2"] .template-side-list a::after, body[data-sct-template="master-calculator-v2"] .sidebar-list a::after{ content:"›"; position:absolute; right:2px; color:#8ba3c2; } body[data-sct-template="master-calculator-v2"] .template-fact-grid{ display:grid; gap:0; } body[data-sct-template="master-calculator-v2"] .template-fact, body[data-sct-template="master-calculator-v2"] .sidebar-stat{ display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid #e3ebf4; font-size:.81rem; } body[data-sct-template="master-calculator-v2"] :is(.template-fact,.sidebar-stat):last-child{ border-bottom:0; } body[data-sct-template="master-calculator-v2"] :is(.template-fact,.sidebar-stat) span{ color:#64748b; } body[data-sct-template="master-calculator-v2"] :is(.template-fact,.sidebar-stat) strong{ color:var(--master-navy); text-align:right; } body[data-sct-template="master-calculator-v2"] .template-tip-list{ margin:0; padding-left:18px; } body[data-sct-template="master-calculator-v2"] .template-tip-list li{ margin:6px 0; } /* Exactly 10 authoritative category links on every calculator page. */ body[data-sct-template="master-calculator-v2"] .template-resource-intro{ margin:0 0 7px!important; font-size:12px!important; } body[data-sct-template="master-calculator-v2"] .template-resource-list{ display:grid; gap:0; margin:0; padding-left:20px; } body[data-sct-template="master-calculator-v2"] .template-resource-list li{ margin:0!important; border-bottom:1px solid #e3ebf4; } body[data-sct-template="master-calculator-v2"] .template-resource-list li:last-child{ border-bottom:0; } body[data-sct-template="master-calculator-v2"] .template-resource-list a{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:9px 0; color:#294564!important; font-size:12px!important; font-weight:750!important; line-height:1.38; text-decoration:none!important; } body[data-sct-template="master-calculator-v2"] .template-resource-list a span:last-child{ flex:0 0 auto; color:#6f8fb5; } body[data-sct-template="master-calculator-v2"] .template-resource-list a:hover{ color:var(--master-blue)!important; } /* Sponsored cards are pinned to the top of their sidebar (order 0), matching the DOM order set by affiliate-system.js / master-calculator-v2.js. */ body[data-sct-template="master-calculator-v2"] [data-amazon-sidebar-offer], body[data-sct-template="master-calculator-v2"] [data-cj-sidebar-offer]{ order:0; padding:0!important; } body[data-sct-template="master-calculator-v2"] .sct-amazon-ad, body[data-sct-template="master-calculator-v2"] .sct-amazon-ad__button, body[data-sct-template="master-calculator-v2"] .sct-amazon-ad__visual{ border-radius:8px!important; } /* One 600px light calculator card. */ body[data-sct-template="master-calculator-v2"] .template-calculator-card{ position:relative; width:var(--master-center)!important; max-width:100%!important; box-sizing:border-box!important; overflow:hidden; margin:0 auto!important; padding:24px!important; border:1px solid #d7e1ed!important; border-radius:14px!important; background:linear-gradient(145deg,#fff,#f7f9fc)!important; color:var(--master-text)!important; box-shadow:0 12px 30px rgba(16,33,63,.10)!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:linear-gradient(90deg,#1769ff,#0ea5e9,#20b486); } body[data-sct-template="master-calculator-v2"] .template-calculator-card .calc-card-head{ margin-bottom:20px!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .calc-card-head h2{ margin:0!important; color:var(--master-navy)!important; -webkit-text-fill-color:var(--master-navy)!important; background:none!important; font-size:1.12rem!important; line-height:1.3!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .calc-card-head p{ margin:6px 0 0!important; color:var(--master-muted)!important; font-size:.87rem; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .calc-grid{ gap:18px!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card :is(.field>label,label.field>span,.field label){ display:block; margin-bottom:7px; color:var(--master-text)!important; font-weight:800; } body[data-sct-template="master-calculator-v2"] .template-calculator-card :is(input,select,textarea){ min-height:48px!important; border:1px solid #c8d7ea!important; border-radius:8px!important; background:#fff!important; color:var(--master-text)!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card :is(input,select,textarea):focus{ border-color:var(--master-blue)!important; box-shadow:0 0 0 3px rgba(23,105,255,.14)!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .shape-tabs{ overflow:hidden; border:1px solid #d8e3f1; border-radius:12px!important; background:#f3f6fa; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .shape-tab{ min-height:48px!important; margin:0!important; border-radius:0!important; background:#f7f9fc!important; color:#52627a!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .shape-tab.active{ background:var(--master-blue)!important; color:#fff!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .btn{ min-height:44px!important; margin:0!important; padding:10px 16px!important; border-radius:8px!important; font-weight:800; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .btn:not(.btn-primary){ border:1px solid #d4dfed!important; background:#eef3f9!important; color:var(--master-text)!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .result-panel{ overflow:hidden; margin-top:22px!important; border:1px solid #bfd7f5!important; border-radius:12px!important; background:#eff6ff!important; color:var(--master-text)!important; box-shadow:none!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .concrete-main-result{ background:linear-gradient(135deg,#12325f,#1769aa)!important; } /* Every center-column block uses the calculator's exact width. */ body[data-sct-template="master-calculator-v2"] .template-calculator-main > :is( .content-card, .share-toolbar, .appliance-highlight, .calculator-highlight, .sct-smart-guide, .sct-content-engine, .phase1-related ){ width:var(--master-center)!important; max-width:100%!important; box-sizing:border-box!important; margin-left:auto!important; margin-right:auto!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-main > .share-toolbar{ margin-top:16px!important; margin-bottom:16px!important; border-radius:12px!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-main > .content-card, body[data-sct-template="master-calculator-v2"] .template-calculator-main > .appliance-highlight, body[data-sct-template="master-calculator-v2"] .template-calculator-main > .calculator-highlight, body[data-sct-template="master-calculator-v2"] .template-calculator-main > .sct-smart-guide, body[data-sct-template="master-calculator-v2"] .sct-content-engine .sct-calculator-guide{ border:1px solid var(--master-line)!important; border-radius:14px!important; background:#fff; box-shadow:0 9px 26px rgba(20,54,100,.075)!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-main > .content-card{ margin-top:0!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-main > :is( .concrete-sidebar, .mortgage-sidebar, .paint-sidebar ){ display:none!important; } body[data-sct-template="master-calculator-v2"] .appliance-highlight{ grid-template-columns:44px minmax(0,1fr)!important; gap:15px!important; margin-top:18px!important; padding:21px 22px!important; } body[data-sct-template="master-calculator-v2"] .sct-smart-guide{ margin-top:18px!important; overflow:hidden; } body[data-sct-template="master-calculator-v2"] .smart-guide-header{ padding:17px!important; } body[data-sct-template="master-calculator-v2"] .smart-guide-icon, body[data-sct-template="master-calculator-v2"] .smart-guide-action, body[data-sct-template="master-calculator-v2"] .smart-guide-status, body[data-sct-template="master-calculator-v2"] .smart-guide-response-controls button, body[data-sct-template="master-calculator-v2"] .smart-guide-question-row :is(input,button){ border-radius:8px!important; } body[data-sct-template="master-calculator-v2"] .sct-content-engine{ margin-top:18px!important; padding:0 0 30px!important; } body[data-sct-template="master-calculator-v2"] .sct-content-engine>.container{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } body[data-sct-template="master-calculator-v2"] .sct-content-engine .sct-calculator-guide{ width:100%!important; max-width:none!important; padding:24px!important; } body[data-sct-template="master-calculator-v2"] .sct-content-engine :is(.sct-related-grid a,.sct-affiliate-placement,.notice,details){ border-radius:8px!important; } /* The master owns related links; hide legacy duplicate injections. */ body[data-sct-template="master-calculator-v2"] :is( .sct-workflow-card, .smart-related-section, section[data-smart-related], .related-tools-section ){ display:none!important; } body[data-sct-template="master-calculator-v2"] a:focus-visible, body[data-sct-template="master-calculator-v2"] button:focus-visible, body[data-sct-template="master-calculator-v2"] input:focus-visible, body[data-sct-template="master-calculator-v2"] select:focus-visible, body[data-sct-template="master-calculator-v2"] textarea:focus-visible, body[data-sct-template="master-calculator-v2"] summary:focus-visible{ outline:3px solid rgba(37,99,235,.32)!important; outline-offset:3px!important; } @media(max-width:1100px){ body[data-sct-template="master-calculator-v2"] .calculator-layout-template{ grid-template-columns:220px minmax(0,1fr)!important; grid-template-areas: "left main" "right right"; } body[data-sct-template="master-calculator-v2"] .template-sidebar{ width:220px!important; max-width:220px!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-right{ width:100%!important; max-width:none!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-right .template-sidebar-stack{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:760px){ body[data-sct-template="master-calculator-v2"] .site-header .nav{ width:calc(100% - 28px); min-height:58px!important; height:auto!important; padding:8px 0!important; } body[data-sct-template="master-calculator-v2"] .site-header .nav-links{ display:none; } body[data-sct-template="master-calculator-v2"] .page-hero>.container, body[data-sct-template="master-calculator-v2"] .calculator-section-template>.container{ width:calc(100% - 28px)!important; } body[data-sct-template="master-calculator-v2"] .page-hero{ padding:13px 0 15px!important; } body[data-sct-template="master-calculator-v2"] .page-hero h1{ font-size:1.85rem!important; } body[data-sct-template="master-calculator-v2"] .calculator-layout-template{ grid-template-columns:1fr!important; grid-template-areas: "main" "left" "right"; gap:18px!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar, body[data-sct-template="master-calculator-v2"] .template-sidebar-right{ width:100%!important; max-width:none!important; } body[data-sct-template="master-calculator-v2"] .template-sidebar-right .template-sidebar-stack{ display:flex!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card{ width:100%!important; padding:20px!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .calc-grid{ grid-template-columns:1fr!important; } body[data-sct-template="master-calculator-v2"] .template-calculator-card .form-actions .btn{ width:100%; } body[data-sct-template="master-calculator-v2"] .smart-guide-actions{ grid-template-columns:1fr 1fr!important; } } @media(prefers-reduced-motion:reduce){ body[data-sct-template="master-calculator-v2"] *, body[data-sct-template="master-calculator-v2"] *::before, body[data-sct-template="master-calculator-v2"] *::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } } @media print{ body[data-sct-template="master-calculator-v2"] .template-sidebar, body[data-sct-template="master-calculator-v2"] .share-toolbar, body[data-sct-template="master-calculator-v2"] .sct-smart-guide{ display:none!important; } body[data-sct-template="master-calculator-v2"] .calculator-layout-template{ display:block!important; } }