inside the WordPress Elementor HTML widget — both cases match identically. */ .calc-page, .calc-page *, .calc-page *::before, .calc-page *::after{ box-sizing:border-box; } .calc-page{ font-family:var(--font-body); background:var(--bg); color:var(--black); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .calc-page img, .calc-page svg{ display:block; } .calc-page a{ color:inherit; } .calc-page h1, .calc-page h2, .calc-page h3, .calc-page h4{ font-family:var(--font-head); color:var(--navy); margin:0; letter-spacing:-.01em; } .calc-page .container{ max-width:1120px; margin:0 auto; padding:0 24px; } /* ---------- nav ---------- */ .calc-page .site-nav{ position:sticky; top:0; z-index:40; background:var(--white); border-bottom:1px solid var(--hairline); } .calc-page .site-nav .row{ display:flex; align-items:center; justify-content:space-between; height:64px; } .calc-page .brand{ display:flex; align-items:center; gap:9px; text-decoration:none; } .calc-page .brand-logo{ height:26px; width:auto; } .calc-page .crumbs{ font-size:13px; color:var(--grey); display:flex; align-items:center; gap:8px; } .calc-page .crumbs a{ text-decoration:none; color:var(--steel); font-weight:500; } .calc-page .crumbs a:hover{ text-decoration:underline; } .calc-page .crumbs .sep{ color:var(--grey-line); } .calc-page .crumbs .current{ color:var(--navy); font-weight:600; } /* ---------- hero ---------- */ .calc-page .hero{ padding:56px 0 28px; } .calc-page .hero .eyebrow{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-head); font-weight:600; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); background:var(--light-blue); padding:6px 13px 6px 10px; border-radius:var(--radius-sm); margin-bottom:18px; } .calc-page .hero .eyebrow svg{ width:14px; height:14px; } .calc-page .hero h1{ font-size:clamp(30px,4.2vw,44px); font-weight:700; line-height:1.06; max-width:16ch; } .calc-page .hero p.lede{ margin-top:14px; font-size:17px; line-height:1.55; color:var(--grey); max-width:56ch; } /* ---------- reveal-on-load ---------- */ .calc-page .reveal{ opacity:0; transform:translateY(14px); animation:reveal .6s cubic-bezier(.2,.7,.2,1) forwards; } @keyframes reveal{ to{ opacity:1; transform:none; } } .calc-page .d1{ animation-delay:.05s; } .calc-page .d2{ animation-delay:.12s; } .calc-page .d3{ animation-delay:.19s; } .calc-page .d4{ animation-delay:.26s; } .calc-page .d5{ animation-delay:.33s; } .calc-page .d6{ animation-delay:.4s; } /* ---------- layout: calculator workspace ---------- */ .calc-page .workspace{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:24px; align-items:start; padding:8px 0 40px; } @media (max-width:900px){ .calc-page .workspace{ grid-template-columns:1fr; } } .calc-page .card{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-card); box-shadow:var(--shadow-card); padding:28px; } .calc-page .card + .card{ margin-top:20px; } .calc-page .card-title{ font-size:13px; font-weight:600; color:var(--steel); text-transform:uppercase; letter-spacing:.06em; margin-bottom:20px; } /* ---------- form ---------- */ .calc-page .field{ margin-bottom:18px; } .calc-page .field:last-child{ margin-bottom:0; } .calc-page .field label{ display:flex; align-items:center; gap:6px; font-size:13px; font-weight:600; color:var(--navy); margin-bottom:7px; } .calc-page .field .hint{ font-weight:400; color:var(--grey); font-size:12px; cursor:help; position:relative; } .calc-page .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } @media (max-width:520px){ .calc-page .field-row{ grid-template-columns:1fr; } } .calc-page .input-wrap{ position:relative; } .calc-page .input-wrap .prefix, .calc-page .input-wrap .suffix{ position:absolute; top:0; bottom:0; display:flex; align-items:center; color:var(--grey); font-size:14.5px; font-weight:500; pointer-events:none; } .calc-page .input-wrap .prefix{ left:14px; } .calc-page .input-wrap .suffix{ right:14px; } .calc-page .input-wrap input.prefixed{ padding-left:28px; } .calc-page .input-wrap input.suffixed{ padding-right:34px; } .calc-page input[type="number"], .calc-page input[type="text"], .calc-page select{ width:100%; font-family:var(--font-body); font-size:14.5px; color:var(--black); background:var(--bg); border:1.5px solid var(--hairline); border-radius:var(--radius-sm); padding:11px 13px; outline:none; transition:border-color .15s, box-shadow .15s, background .15s; appearance:none; } .calc-page input[type="number"]:focus, .calc-page input[type="text"]:focus, .calc-page select:focus{ border-color:var(--steel); background:var(--white); box-shadow:0 0 0 4px var(--light-blue); } .calc-page input[type="number"]::-webkit-outer-spin-button, .calc-page input[type="number"]::-webkit-inner-spin-button{ margin:0; } .calc-page select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23457b9d' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; padding-right:32px; cursor:pointer; } .range-row{ display:flex; align-items:center; gap:12px; } .calc-page input[type="range"]{ flex:1; appearance:none; height:5px; border-radius:999px; background:var(--hairline); outline:none; } .calc-page input[type="range"]::-webkit-slider-thumb{ appearance:none; width:18px; height:18px; border-radius:50%; background:var(--navy); border:3px solid var(--white); box-shadow:0 1px 4px rgba(29,53,87,.35); cursor:pointer; } .calc-page input[type="range"]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--navy); border:3px solid var(--white); cursor:pointer; } .calc-page .toggle-group{ display:inline-flex; background:var(--bg); border:1.5px solid var(--hairline); border-radius:var(--radius-sm); padding:3px; } .calc-page .toggle-group button{ border:none; background:transparent; font-family:var(--font-head); font-weight:600; font-size:12.5px; color:var(--grey); padding:7px 14px; border-radius:6px; cursor:pointer; transition:.15s; } .calc-page .toggle-group button.active{ background:var(--navy); color:#fff; } .calc-page .repeat-row{ display:grid; grid-template-columns:1.3fr .9fr .7fr .9fr auto; gap:10px; align-items:end; margin-bottom:12px; } @media (max-width:760px){ .calc-page .repeat-row{ grid-template-columns:1fr 1fr; grid-template-areas:"name name" "bal apr" "min remove"; } } .calc-page .repeat-row .rm{ width:36px; height:36px; border-radius:var(--radius-sm); border:1.5px solid var(--hairline); background:var(--white); color:var(--red); font-size:16px; cursor:pointer; transition:.15s; } .calc-page .repeat-row .rm:hover{ background:var(--red-bg); border-color:var(--red); } .calc-page .btn-add{ font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--steel); background:var(--light-blue-soft); border:1.5px dashed var(--steel); border-radius:var(--radius-sm); padding:10px 14px; cursor:pointer; width:100%; transition:.15s; } .calc-page .btn-add:hover{ background:var(--light-blue); } /* ---------- results ---------- */ .calc-page .result-hero{ background:linear-gradient(150deg, var(--navy) 0%, #234671 62%, var(--steel) 130%); border-radius:var(--radius-card); padding:28px; color:#fff; position:relative; overflow:hidden; } .calc-page .result-hero::after{ content:""; position:absolute; inset:0; background:radial-gradient(320px 200px at 90% -10%, rgba(255,255,255,.16), transparent 60%); } .calc-page .result-hero .label{ font-size:12.5px; font-weight:600; text-transform:uppercase; letter-spacing:.07em; color:#cfe0f0; position:relative; } .calc-page .result-hero .amount{ font-family:var(--font-head); font-weight:700; font-size:clamp(34px,4.6vw,46px); margin-top:8px; position:relative; letter-spacing:-.01em; } .calc-page .result-hero .sub{ margin-top:6px; font-size:13.5px; color:#d6e4f2; position:relative; } .calc-page .result-hero .badge{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; position:relative; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); border-radius:var(--radius-sm); padding:6px 12px; font-size:12.5px; font-weight:600; } .calc-page .result-hero .badge.good{ background:rgba(47,143,91,.28); } .calc-page .result-hero .badge.warn{ background:rgba(200,30,58,.28); } .calc-page .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; } @media (max-width:420px){ .calc-page .stat-grid{ grid-template-columns:1fr; } } .calc-page .stat{ background:var(--bg); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:14px 16px; } .calc-page .stat .k{ font-size:12px; color:var(--grey); font-weight:500; } .calc-page .stat .v{ font-family:var(--font-head); font-size:19px; font-weight:700; color:var(--navy); margin-top:3px; } .calc-page .stat .v.pos{ color:var(--green); } .calc-page .stat .v.neg{ color:var(--red); } .calc-page .chart-wrap{ margin-top:20px; } .calc-page .chart-tabs{ display:flex; gap:8px; margin-bottom:14px; } .calc-page .chart-tabs button{ font-family:var(--font-head); font-weight:600; font-size:12.5px; color:var(--steel); background:var(--white); border:1.5px solid var(--hairline); border-radius:var(--radius-sm); padding:7px 13px; cursor:pointer; transition:.15s; } .calc-page .chart-tabs button.active{ background:var(--navy); border-color:var(--navy); color:#fff; } .calc-page .chart-legend{ display:flex; gap:16px; margin-top:12px; flex-wrap:wrap; } .calc-page .chart-legend span{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--grey); } .calc-page .chart-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; } .calc-page .chart-legend i.dash{ width:14px; height:0; border-radius:0; border-top:2px dashed; background:none; } .calc-page .chart-legend .note{ width:100%; font-size:12px; color:var(--grey-muted); margin-top:2px; } .calc-page canvas{ max-width:100%; } /* ---------- formula card ---------- */ .calc-page .formula-card .formula{ font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; background:var(--navy-ink); color:#eaf2fb; border-radius:var(--radius-sm); padding:16px 18px; font-size:14px; overflow-x:auto; line-height:1.7; margin:12px 0; } .calc-page .formula-card .legend{ font-size:13.5px; color:var(--grey); line-height:1.8; } .calc-page .formula-card .legend b{ color:var(--navy); font-family:var(--font-head); } /* ---------- accordion ---------- */ .calc-page .accordion-section{ padding:36px 0 8px; } .calc-page .accordion-section h2{ font-size:23px; margin-bottom:6px; } .calc-page .accordion-section p.intro{ color:var(--grey); font-size:14.5px; margin-bottom:20px; } .calc-page .accordion{ border-top:1px solid var(--hairline); } .calc-page .acc-item{ border-bottom:1px solid var(--hairline); } .calc-page .acc-item button.acc-trigger{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; background:none; border:none; text-align:left; cursor:pointer; padding:18px 2px; font-family:var(--font-head); font-weight:600; font-size:15.5px; color:var(--navy); } .calc-page .acc-item button.acc-trigger:hover{ color:var(--steel); } .calc-page .acc-icon{ flex:none; width:26px; height:26px; border-radius:50%; border:1.5px solid var(--grey-line); display:flex; align-items:center; justify-content:center; position:relative; transition:transform .25s, background .2s, border-color .2s; } .calc-page .acc-icon::before, .calc-page .acc-icon::after{ content:""; position:absolute; background:var(--steel); transition:transform .25s; } .calc-page .acc-icon::before{ width:10px; height:1.6px; } .calc-page .acc-icon::after{ width:1.6px; height:10px; } .calc-page .acc-item[data-open="true"] .acc-icon{ background:var(--navy); border-color:var(--navy); transform:rotate(45deg); } .calc-page .acc-item[data-open="true"] .acc-icon::before, .calc-page .acc-item[data-open="true"] .acc-icon::after{ background:#fff; } .calc-page .acc-panel{ max-height:0; overflow:hidden; transition:max-height .32s cubic-bezier(.2,.7,.2,1); } .calc-page .acc-panel-inner{ padding:0 2px 20px; font-size:14.5px; line-height:1.65; color:var(--grey); } .calc-page .acc-panel-inner .def-label, .calc-page .acc-panel-inner .formula-label{ display:block; font-family:var(--font-head); font-weight:600; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--steel); margin:10px 0 4px; } .calc-page .acc-panel-inner .formula-label{ margin-top:14px; } .calc-page .acc-panel-inner code{ display:block; font-family:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace; background:var(--bg); border:1px solid var(--hairline); border-radius:var(--radius-sm); padding:10px 13px; font-size:13.5px; color:var(--navy); overflow-x:auto; } /* ---------- disclaimer + footer ---------- */ .calc-page .disclaimer{ margin:36px 0 0; padding:16px 18px; background:var(--light-blue-soft); border:1px solid var(--light-blue); border-radius:var(--radius-sm); font-size:12.5px; line-height:1.6; color:var(--navy); } .calc-page .disclaimer b{ font-family:var(--font-head); } .calc-page .site-footer{ border-top:1px solid var(--hairline); margin-top:50px; padding:28px 0 40px; text-align:center; color:var(--grey); font-size:12.5px; } .calc-page .site-footer a{ color:var(--steel); text-decoration:none; font-weight:600; } /* ---------- hub / landing ---------- */ .calc-page .calc-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; padding:12px 0 20px; } @media (max-width:900px){ .calc-page .calc-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:600px){ .calc-page .calc-grid{ grid-template-columns:1fr; } } .calc-page .calc-card{ background:var(--white); border:1px solid var(--hairline); border-radius:var(--radius-card); padding:26px; text-decoration:none; display:block; transition:transform .22s, box-shadow .22s, border-color .22s; box-shadow:var(--shadow-card); position:relative; overflow:hidden; } .calc-page .calc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-card-hover); border-color:var(--light-blue); } .calc-page .calc-card .icon{ width:46px; height:46px; border-radius:12px; background:var(--light-blue); color:var(--navy); display:flex; align-items:center; justify-content:center; margin-bottom:18px; } .calc-page .calc-card .icon svg{ width:23px; height:23px; } .calc-page .calc-card h3{ font-size:18px; margin-bottom:8px; } .calc-page .calc-card p{ font-size:13.5px; color:var(--grey); line-height:1.55; margin:0 0 16px; } .calc-page .calc-card .go{ font-family:var(--font-head); font-weight:600; font-size:13px; color:var(--steel); display:flex; align-items:center; gap:6px; } .calc-page .calc-card .go svg{ width:14px; height:14px; transition:transform .2s; } .calc-page .calc-card:hover .go svg{ transform:translateX(3px); } .calc-page .trust-line{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:13px; color:var(--grey); } .calc-page .trust-line svg{ width:15px; height:15px; color:var(--green); flex:none; }