.preview-image { position:relative; } .preview-image canvas { position:absolute; inset:0; width:100%; height:100%; opacity:.14; } .preview-image img { position:relative; z-index:1; }
:root { --ink:#183b5f; --brand:#00b3aa; --coral:#db7d81; --paper:#fff; --soft:#f4f0e4; --muted:#718198; --line:#dfe3e7; }
* { box-sizing:border-box; } body { margin:0; color:var(--ink); background:#fff; font-family:'DM Sans',sans-serif; } a { color:inherit; text-decoration:none; }
.calculator-header { border-bottom:1px solid var(--line); background:#fff; } .utility-bar,.main-bar { display:flex; align-items:center; justify-content:space-between; padding:0 7vw; } .utility-bar { min-height:64px; color:var(--ink); font-size:13px; gap:28px; } .utility-bar > span:first-of-type { margin-left:auto; color:#1689e8; font-weight:700; } .country { border:1px solid var(--line); border-radius:30px; padding:10px 16px; } .main-bar { min-height:82px; } .logo img { width:154px; display:block; transform:translateX(-10px); } .main-bar nav { display:flex; gap:30px; margin-left:auto; margin-right:45px; font-size:14px; font-weight:600; } .main-bar nav a:hover,.utility-bar a:hover { color:var(--coral); } .back-link { font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:5px; }
main { max-width:1150px; margin:auto; padding:0 6vw 90px; } .breadcrumbs { margin-top:22px; color:var(--muted); font-size:12px; } .breadcrumbs a { color:#9aabba; } .breadcrumbs span { padding:0 8px; } .calculator-intro { padding:72px 3vw 48px; } .kicker { display:flex; align-items:center; gap:10px; color:var(--coral); text-transform:uppercase; letter-spacing:1.8px; font-size:10px; font-weight:700; } .kicker span { width:24px; height:2px; background:var(--brand); } h1 { margin:20px 0 14px; font:600 clamp(44px,6vw,74px)/.95 'Space Grotesk',sans-serif; letter-spacing:-4px; } h1 em { color:var(--brand); font-style:normal; } .calculator-intro > p:last-child { max-width:550px; margin:0; color:#5f6d7d; line-height:1.7; }
.calculator-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:52px; padding:0 3vw; align-items:start; } .calculator-form { padding-top:8px; } .form-heading { display:flex; align-items:center; gap:14px; margin-bottom:30px; } .form-heading span { color:var(--brand); font-size:12px; font-weight:700; } h2 { margin:0; font:600 28px 'Space Grotesk',sans-serif; letter-spacing:-1px; } label,legend { display:block; margin-bottom:10px; font-size:13px; font-weight:600; } select,input { width:100%; height:58px; border:1px solid var(--line); border-radius:0; background:#fff; color:var(--ink); padding:0 16px; outline:none; font:15px 'DM Sans',sans-serif; } select:focus,input:focus { border-color:var(--brand); } .form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:30px; } .quantity { display:flex; } .quantity button { width:48px; border:1px solid var(--line); background:var(--soft); color:var(--ink); font-size:22px; cursor:pointer; } .quantity input { text-align:center; border-left:0; border-right:0; } fieldset { margin:32px 0 0; padding:0; border:0; } legend { padding:0; } .check-row { display:flex; align-items:center; gap:12px; padding:15px 0; border-top:1px solid var(--line); font-size:14px; font-weight:400; } .check-row input { width:18px; height:18px; accent-color:var(--brand); } .check-row span { flex:1; } .check-row b { font-size:12px; } .form-note { margin:28px 0; padding:16px; border-left:3px solid var(--brand); background:#f3fffd; color:#657487; font-size:12px; line-height:1.5; } .submit-button { width:100%; padding:17px; border:0; background:var(--brand); color:var(--ink); font:700 14px 'DM Sans',sans-serif; cursor:pointer; transition:transform .2s,background .2s; } .submit-button:hover { transform:translateY(-3px); background:#12c5bb; } .submit-button span { margin-left:20px; font-size:18px; } .sent-message { display:none; margin:16px 0 0; padding:14px; background:var(--soft); color:var(--ink); font-size:13px; } .sent-message.show { display:block; }
.quote-preview { position:relative; overflow:hidden; border:1px solid var(--line); background:#fff; box-shadow:14px 18px 35px rgba(24,59,95,.1); } .quote-preview::before { content:''; position:absolute; top:0; left:0; width:100%; height:5px; background:var(--brand); } .preview-top { display:flex; justify-content:space-between; padding:25px 26px 15px; color:var(--muted); font-size:10px; font-weight:700; letter-spacing:1.5px; } .spark { color:var(--coral); font-size:20px; } .preview-image { height:245px; margin:0 26px; display:grid; place-items:center; background:var(--soft); overflow:hidden; } .preview-image img { width:100%; height:100%; object-fit:cover; transition:opacity .25s,transform .35s; } .preview-image img:hover { transform:scale(1.04); } .preview-details { padding:25px 26px 18px; } .preview-label { margin:0 0 5px; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:1px; } .preview-details > strong { display:block; color:var(--ink); font:600 38px 'Space Grotesk',sans-serif; letter-spacing:-2px; } .summary { display:flex; justify-content:space-between; gap:15px; padding-top:13px; margin-top:13px; border-top:1px solid var(--line); color:#667688; font-size:12px; } .summary span:last-child { color:var(--ink); font-weight:700; } .preview-foot { padding:16px 26px; color:#fff; background:var(--ink); font:600 13px 'Space Grotesk',sans-serif; }
@media (max-width:800px) { .utility-bar { gap:12px; font-size:11px; } .utility-bar > span:first-of-type { display:none; } .main-bar nav { display:none; } .calculator-intro { padding:55px 0 38px; } .calculator-layout { grid-template-columns:1fr; padding:0; gap:42px; } }
@media (max-width:520px) { .utility-bar { justify-content:space-between; padding:0 6vw; } .utility-bar a:nth-child(2) { display:none; } .main-bar { padding:0 6vw; } .logo img { width:130px; } .back-link { font-size:11px; } main { padding-left:6vw; padding-right:6vw; } .form-row { grid-template-columns:1fr; } .calculator-intro { padding-top:45px; } h1 { letter-spacing:-3px; } .preview-image { height:210px; margin:0 18px; } .preview-top,.preview-details { padding-left:18px; padding-right:18px; } }