/* ============================================================ DEALS TO GROW — edge-style test layer Toggles global corner treatment: rounded (default) / square / chamfer. Activated by a class on : .edge-square or .edge-chamfer. Injected + controlled by site.js (persists in localStorage). ============================================================ */ /* shared list of shaped surfaces */ :root{--ch:13px;--chs:8px;} /* ---------- SQUARE ---------- */ html.edge-square .btn, html.edge-square .card, html.edge-square .card-soft, html.edge-square .icard, html.edge-square .price-card, html.edge-square .addon-card, html.edge-square .epx-card, html.edge-square .statbar, html.edge-square .statbar .ico, html.edge-square .step, html.edge-square .stepitem, html.edge-square .stepitem.bordered, html.edge-square .num-tab, html.edge-square .pop-tab, html.edge-square .trade-card, html.edge-square .trade-tile, html.edge-square .quote-card, html.edge-square .metric-tile, html.edge-square .form-card, html.edge-square .calc-card, html.edge-square .booker, html.edge-square .booker .bk-nav button, html.edge-square .cta-panel, html.edge-square .acc, html.edge-square .mini-feat, html.edge-square .mini-feat .mf-ico, html.edge-square image-slot, html.edge-square .compare-card, html.edge-square .casefile, html.edge-square .diffcol, html.edge-square .plate, html.edge-square .statuswrap, html.edge-square .res-card, html.edge-square .res-card .ri, html.edge-square .leadcard, html.edge-square .vs-split, html.edge-square .vs-split .vs-mid, html.edge-square .hero-chip, html.edge-square .tag, html.edge-square .field input, html.edge-square .field select, html.edge-square .field textarea, html.edge-square .cfield input, html.edge-square .cfield select, html.edge-square .times button, html.edge-square .cal .day, html.edge-square .rcard, html.edge-square .vs-table, html.edge-square .chk-table, html.edge-square .booker, html.edge-square .site-footer .socials a, html.edge-square .casefile .stamp, html.edge-square .compare .vs, html.edge-square .ba .vs, html.edge-square .car-arrow, html.edge-square .chart .bar .col, html.edge-square .bk-confirm, html.edge-square #terr-result, html.edge-square .nav-drop, html.edge-square .m-cta, html.edge-square .menu-toggle, html.edge-square .leadcard{ border-radius:0 !important; } /* ---------- SQUARE — additional surfaces (blog, article, mega-menu) ---------- */ /* Catch every remaining rounded rectangle so "no rounded edges" holds site-wide. Genuine circles (logo badge, dots, the round VS badge) keep border-radius:50%. */ html.edge-square .blog-card, html.edge-square .blog-feat, html.edge-square .blog-feat-tag, html.edge-square .blog-filter-bar, html.edge-square .blog-search, html.edge-square .blog-search input, html.edge-square .art-callout, html.edge-square .art-img-break, html.edge-square .art-hero, html.edge-square .art-keytakeaways, html.edge-square .art-share a, html.edge-square .art-author img, html.edge-square .stat-card, html.edge-square .phys-card, html.edge-square .city-chip, html.edge-square .trade-trust, html.edge-square .mega-drop, html.edge-square .mega-tile, html.edge-square .mega-tile .mt-img, html.edge-square .nav-drop, html.edge-square .scroll-cta, html.edge-square .jump-nav, html.edge-square .pill, html.edge-square .chip, html.edge-square .stat-pill, html.edge-square .eyebrow-num, html.edge-square img{ border-radius:0 !important; } /* draws the picture inside a shadow-DOM part — square the frame and the image so the rounded "rounded"/radius variants render square too. */ html.edge-square image-slot::part(frame), html.edge-square image-slot::part(image){ border-radius:0 !important; } /* ---------- CHAMFER (logo-style notched corners) ---------- */ /* small controls just go square in chamfer mode */ html.edge-chamfer .tag, html.edge-chamfer .num-tab, html.edge-chamfer .pop-tab, html.edge-chamfer .statbar .ico, html.edge-chamfer .mini-feat .mf-ico, html.edge-chamfer .res-card .ri, html.edge-chamfer .field input, html.edge-chamfer .field select, html.edge-chamfer .field textarea, html.edge-chamfer .cfield input, html.edge-chamfer .cfield select, html.edge-chamfer .times button, html.edge-chamfer .cal .day, html.edge-chamfer .booker .bk-nav button{ border-radius:0 !important; } /* large surfaces: octagon clip, border kept on straight edges, shadow via drop-shadow */ html.edge-chamfer .card, html.edge-chamfer .card-soft, html.edge-chamfer .icard, html.edge-chamfer .price-card, html.edge-chamfer .addon-card, html.edge-chamfer .epx-card, html.edge-chamfer .statbar, html.edge-chamfer .step, html.edge-chamfer .trade-card, html.edge-chamfer .trade-tile, html.edge-chamfer .quote-card, html.edge-chamfer .metric-tile, html.edge-chamfer .form-card, html.edge-chamfer .calc-card, html.edge-chamfer .booker, html.edge-chamfer .cta-panel, html.edge-chamfer .acc, html.edge-chamfer .mini-feat, html.edge-chamfer image-slot, html.edge-chamfer .compare-card, html.edge-chamfer .diffcol, html.edge-chamfer .statuswrap, html.edge-chamfer .res-card, html.edge-chamfer .leadcard, html.edge-chamfer .plate, html.edge-chamfer .vs-split, html.edge-chamfer .rcard, html.edge-chamfer .hero-chip{ border-radius:0 !important; clip-path:polygon(var(--ch) 0, calc(100% - var(--ch)) 0, 100% var(--ch), 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, var(--ch) 100%, 0 calc(100% - var(--ch)), 0 var(--ch)); } /* preserve depth — clip-path kills box-shadow, drop-shadow follows the shape */ html.edge-chamfer .card, html.edge-chamfer .icard, html.edge-chamfer .price-card, html.edge-chamfer .epx-card, html.edge-chamfer .statbar, html.edge-chamfer .step, html.edge-chamfer .trade-card, html.edge-chamfer .trade-tile, html.edge-chamfer .quote-card, html.edge-chamfer .metric-tile, html.edge-chamfer .compare-card.good, html.edge-chamfer .statuswrap, html.edge-chamfer .res-card, html.edge-chamfer .rcard, html.edge-chamfer .acc, html.edge-chamfer .mini-feat, html.edge-chamfer .hero-chip{ box-shadow:none !important; filter:drop-shadow(0 14px 20px rgba(18,18,20,.20)); } html.edge-chamfer .form-card, html.edge-chamfer .calc-card, html.edge-chamfer .booker, html.edge-chamfer .cta-panel{ box-shadow:none !important; filter:drop-shadow(0 24px 34px rgba(18,18,20,.26)); } /* buttons: tighter chamfer */ html.edge-chamfer .btn{ border-radius:0 !important; clip-path:polygon(var(--chs) 0, calc(100% - var(--chs)) 0, 100% var(--chs), 100% calc(100% - var(--chs)), calc(100% - var(--chs)) 100%, var(--chs) 100%, 0 calc(100% - var(--chs)), 0 var(--chs)); } html.edge-chamfer .btn-primary{box-shadow:none !important;} /* ============================================================ Edge switcher control (fixed, bottom-left) ============================================================ */ .edge-switch{ position:fixed;left:18px;bottom:18px;z-index:200; display:flex;align-items:center;gap:0; background:var(--black);border:1.5px solid var(--black);border-radius:6px; box-shadow:0 18px 40px -16px rgba(18,18,20,.6);overflow:hidden; font-family:var(--head); } .edge-switch .es-label{ color:#8A8A87;text-transform:uppercase;font-size:10px;letter-spacing:.16em; padding:0 12px 0 14px;white-space:nowrap; } .edge-switch button{ background:transparent;border:0;border-left:1px solid #2a2a2d;cursor:pointer; color:#C9C9C6;font-family:var(--head);text-transform:uppercase;letter-spacing:.08em; font-size:12px;padding:11px 15px;line-height:1;display:flex;align-items:center;gap:7px; transition:background .15s ease,color .15s ease; } .edge-switch button:hover{color:#fff;background:#1d1d20;} .edge-switch button.active{background:var(--orange);color:#fff;} .edge-switch .es-ico{width:15px;height:15px;border:1.5px solid currentColor;flex:none;} .edge-switch button[data-edge="rounded"] .es-ico{border-radius:5px;} .edge-switch button[data-edge="square"] .es-ico{border-radius:0;} .edge-switch button[data-edge="chamfer"] .es-ico{border-radius:0;clip-path:polygon(33% 0,67% 0,100% 33%,100% 67%,67% 100%,33% 100%,0 67%,0 33%);} @media(max-width:680px){.edge-switch .es-label{display:none;}.edge-switch button{padding:10px 12px;}}