@charset "UTF-8"; /* ============================================================================ Yodeler — corner language ---------------------------------------------------------------------------- GEOMETRY ONLY. This file changes corner radii and a small number of the border treatments that read as "rounded box". It does NOT touch palette, typography, spacing, shadows, layout or behaviour — check any diff of this file against that rule before merging. test/geometry-overlay.test.js enforces it. Scope: the whole site. Every page opts in by carrying data-geo on and linking this file last in . Both are required, and the test suite fails if a page has one without the other. The attribute is what gives these rules enough specificity to beat the page's own !important radii, and it doubles as the switch between corner values. 0px — what ships 2px — if hard zero reads too severe Circles are out of scope. Radial gauges are conic gradients in a round box, so squaring one turns a gauge into a coloured square; a squared loading spinner looks broken; and dots, avatars and tick marks are not rounded boxes. Only pills (999px / 50px / 20px) and rounded rectangles change. ========================================================================== */ :root{ --geo-r:0px; } html[data-geo="micro"]{ --geo-r:2px; } /* --------------------------------------------------------------------------- 1. Square everything. The !important is load-bearing: well over a hundred of the radii on this site are inline style attributes, and nothing but !important outranks those. The html[data-geo] prefix is load-bearing too — a bare `*` scores 0,0,0 and would LOSE to a rule like .concierge-panel{border-radius:… !important}, leaving one panel rounded in an otherwise squared product. ------------------------------------------------------------------------ */ html[data-geo] body, html[data-geo] *, html[data-geo] *::before, html[data-geo] *::after{ border-radius:var(--geo-r) !important; } /* --------------------------------------------------------------------------- 2. Put the circles back. Everything below is genuinely round, not a rounded box. Source order matters: these come after the block above and match its specificity, so they win. ------------------------------------------------------------------------ */ html[data-geo] .score-radial, html[data-geo] .score-radial::before, html[data-geo] .gauge, html[data-geo] .gauge-inner, html[data-geo] .spin, html[data-geo] .card::after, html[data-geo] .lux-dot, html[data-geo] .lux-dot.green::after, html[data-geo] .lux-dot.warn::after, html[data-geo] .lux-dot.blue::after, html[data-geo] .lux-dot.bad::after, html[data-geo] .lux-tl-node, html[data-geo] .topnav-status .pulse, html[data-geo] .topnav-status .pulse::after, html[data-geo] .topnav-bell, html[data-geo] .badge::before, html[data-geo] .notif-dot, html[data-geo] .msg-unread, html[data-geo] .map-legend-dot, html[data-geo] .check-item .ci-dot, html[data-geo] .check-item::before, html[data-geo] .pricing-feature::before, html[data-geo] .included-item::before, html[data-geo] .opt-what li::before, html[data-geo] .pp-event::before, html[data-geo] .sidebar-avatar, html[data-geo] .msg-chat-avatar, html[data-geo] .appbar-avatar, html[data-geo] .appbar-bell, html[data-geo] .appbar-bell .dot, html[data-geo] .sheet-hd .x, html[data-geo] .check, html[data-geo] .done .check, html[data-geo] .diag-num, html[data-geo] .ss-num, html[data-geo] .concierge-fab, html[data-geo] .concierge-avatar, /* Inline circles. Static markup keeps the author's no-space form; anything set from JS via element.style.cssText comes back RE-SERIALISED with a space. Matching one spelling silently misses half of them — which is exactly the bug that shipped in this file's first draft, against z-index. */ html[data-geo] [style*="border-radius:50%"], html[data-geo] [style*="border-radius: 50%"]{ border-radius:50% !important; } /* --------------------------------------------------------------------------- 3. The parts that need more than a radius change. A pill is not only its corners — it is a small outlined capsule floating in space, so zeroing the radius leaves a weak little rectangle. The components below move their emphasis from an outline to an edge. Every colour here is one already defined elsewhere in the site; nothing new is introduced. ------------------------------------------------------------------------ */ /* Status badges: outline capsule -> flush tag with a lit left edge. The tint, the text colour and the ::before dot are unchanged; only the ring goes. */ html[data-geo] .badge{ border-width:0 0 0 2px !important; padding-left:9px; } /* Sidebar navigation: the active item was a floating rounded pill inset from both edges. It becomes a full-bleed row marked by a champagne left edge — the gradient, text colour and inset highlight are kept. */ html[data-geo] .sidebar-item{ margin-left:0; margin-right:0; border-width:0 0 0 2px !important; border-left-color:transparent !important; padding-left:22px; } html[data-geo] .sidebar-item:hover{ border-left-color:rgba(255,255,255,.14) !important; } html[data-geo] .sidebar-item.active{ border-left-color:var(--gold) !important; } /* Marketing eyebrows and plan flags were solid capsules floating above a card. Squared, they need the same edge emphasis to stay deliberate. */ html[data-geo] .lp-hero-badge, html[data-geo] .hero-badge, html[data-geo] .pricing-badge{ border-width:0 0 0 2px !important; padding-left:14px; } /* Buttons: squared, with a 1px top highlight so a gold face still reads as a raised surface rather than a flat swatch. */ html[data-geo] .btn-gold, html[data-geo] .lp-btn-primary, html[data-geo] .lp-hero-cta, html[data-geo] .btn-primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18); } html[data-geo] .btn-gold:hover{ box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 4px 16px rgba(201,167,108,.35); } /* Message bubbles lost their asymmetric tail corner with the radius. Give the sender's side a champagne right edge so the two voices still read apart. */ html[data-geo] .msg-bubble.me, html[data-geo] .c-msg.user{ border-right:2px solid var(--gold3); }