/* ============================================================ AerialQuote — phone layout, multi-page nav, map viewport. Loads after styles.css and only overrides. Nothing here renames an existing class, so the desktop design is intact. ============================================================ */ /* ---------- nav: a hamburger instead of squeezed buttons ---------- */ .navToggle{display:none; width:42px; height:42px; border-radius:11px; place-items:center; background:transparent; border:1px solid var(--line-2); color:var(--ink); cursor:pointer} .navToggle svg{display:block} nav .navCta{display:flex; gap:9px; align-items:center} .mobileMenu{display:none} .navlinks a.cur{color:var(--blue-lit)} /* the hamburger takes over as soon as the link buttons would wrap (split screens, small laptops) */ @media(max-width:1180px){ nav .navCta{display:none} .navToggle{display:grid} .mobileMenu{position:fixed; left:0; right:0; top:var(--navH,62px); bottom:0; z-index:79; background:var(--page); padding:20px 18px 44px; overflow-y:auto; flex-direction:column; gap:7px} .mobileMenu.open{display:flex} .mobileMenu a{padding:16px 15px; border-radius:12px; text-decoration:none; font:600 18px/1 Figtree,sans-serif; color:var(--ink); border:1px solid var(--line-2); background:var(--card)} .mobileMenu a.cur{border-color:var(--blue); color:var(--blue-lit)} .mobileMenu .mmRow{display:flex; gap:10px; margin-top:16px} .mobileMenu .mmRow .btn{flex:1} } @media(max-width:940px){ nav{padding:11px 15px; gap:12px} .brand{font-size:19px} .brand svg{width:26px; height:26px} } /* ---------- "straight to the tool", high on every page ---------- */ .quickBar{position:sticky; top:var(--navH,62px); z-index:70; display:flex; align-items:center; gap:14px; padding:12px 22px; flex-wrap:wrap; background:linear-gradient(180deg, rgba(47,107,255,.22), rgba(23,65,196,.13)); border-bottom:1px solid rgba(110,156,255,.30); backdrop-filter:blur(14px)} html[data-mode="light"] .quickBar{ background:linear-gradient(180deg,#E7EFFF,#DAE7FF); border-bottom-color:#C3D5F5} .quickBar b{font:700 16px/1.3 Figtree,sans-serif; color:var(--ink)} .quickBar span{font-size:14.5px; color:var(--ink-2)} .quickBar .sp{flex:1} .quickBar .btn{text-decoration:none} @media(max-width:700px){ /* [stated] it covered "MEASURE FROM THE SKY" at the top of the hero. Sticky furniture is worth its screen space on a long page; this is a two-word shortcut for returning visitors and it was eating 55px of a phone forever, then sitting on the headline. It stays at the top where they will see it. */ .quickBar{position:static; top:auto; padding:10px 13px; gap:10px; flex-wrap:nowrap} .quickBar b{font-size:14.5px; flex:1 1 auto; min-width:0} .quickBar span{display:none} .quickBar .btn{flex:0 0 auto; padding:10px 14px; font-size:14px} } /* ============================================================ THE TOOL PAGE — an app shell, not a section of a long page ============================================================ */ /* the map is a transformed layer inside a clipping viewport, at every size */ body.toolPage .stage{display:block; padding:0; overflow:hidden; touch-action:none} body.toolPage .viewport{position:absolute; inset:0; overflow:hidden} body.toolPage .canvasbox{position:absolute; left:0; top:0; border-radius:0; transform-origin:0 0; will-change:transform; box-shadow:0 26px 60px -24px #000} body.toolPage #base{width:100%; height:100%} /* desktop keeps the boxed shell it already had — only the top padding shrinks, now that nothing sits above the tool on this page */ @media(min-width:1001px){ body.toolPage .appWrap{padding:30px 24px 48px} } /* phone and small tablet: a full-screen app shell, no page scrolling */ @media(max-width:1000px){ body.toolPage{overflow:hidden} body.toolPage footer{display:none} body.toolPage .appWrap{padding:0; overflow:visible; scroll-margin-top:0} body.toolPage .appWrap::before{display:none} body.toolPage .appShell{max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; display:flex; flex-direction:column; height:calc(100svh - var(--navH,62px)); min-height:480px} body.toolPage .wrap{grid-template-columns:1fr; flex:1; min-height:0; height:auto; grid-template-rows:minmax(0,1fr)} body.toolPage .stage{height:auto; min-height:0} /* results float over the map instead of stealing its height */ /* --safeB is how far Safari's address bar reaches up over the layout viewport, published by map-view.js. Without it the Results button and the "more below" cue sit behind the browser's own chrome. */ body.toolPage .panel{position:fixed; left:0; right:0; z-index:60; bottom:max(var(--safeB,0px), env(safe-area-inset-bottom,0px)); border-left:0; border-top:1px solid var(--line); height:auto; max-height:52svh; overflow-y:auto; overflow-x:hidden; padding:0 15px 26px; border-radius:20px 20px 0 0; box-shadow:0 -18px 44px -18px rgba(0,0,0,.85)} body.toolPage .panel.collapsed{max-height:none; height:auto; overflow:hidden; /* the Results button must never sit flush with the bottom of the glass: iOS moves its own bar around as you use the page, and a button with no room under it is the first thing that gets eaten */ padding-bottom:max(14px, env(safe-area-inset-bottom,0px))} /* slid all the way up: the map is behind it and the take-off is one screen */ body.toolPage .panel.full{max-height:calc(100svh - var(--navH,62px) - 6px)} body.toolPage .panel.collapsed > *:not(.sheetHead){display:none !important} } /* zoom controls */ .zoomPad{position:absolute; right:14px; top:50%; transform:translateY(-50%); z-index:12; display:flex; flex-direction:column; gap:6px} .zoomPad button{width:44px; height:44px; border-radius:12px; cursor:pointer; font-size:21px; font-weight:600; line-height:1; display:grid; place-items:center; color:#EDF2FF; background:rgba(10,16,30,.9); border:1px solid rgba(110,156,255,.32); backdrop-filter:blur(10px)} .zoomPad button:active{background:rgba(47,107,255,.45)} .zoomHint{position:absolute; left:50%; transform:translateX(-50%); bottom:14px; z-index:12; padding:8px 14px; border-radius:99px; background:rgba(10,16,30,.86); backdrop-filter:blur(10px); border:1px solid rgba(110,156,255,.3); color:#A7B7D6; font-size:13px; max-width:calc(100% - 24px); text-align:center; line-height:1.45; pointer-events:none; transition:opacity .4s} .zoomHint.gone{opacity:0} /* magnifier, so a fingertip is not covering the point being placed */ .loupe{position:absolute; width:132px; height:132px; border-radius:50%; z-index:20; border:2px solid #fff; box-shadow:0 10px 30px rgba(0,0,0,.7); overflow:hidden; pointer-events:none; display:none; background:#04060C} .loupe.on{display:block} .loupe canvas{display:block; width:100%; height:100%} .loupe::after{content:''; position:absolute; left:50%; top:50%; width:15px; height:15px; transform:translate(-50%,-50%); border:2px solid #fff; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.5)} /* the results sheet grip */ .sheetGrip{display:none} @media(max-width:1000px){ body.toolPage .sheetHead{position:sticky; top:0; z-index:3; margin-bottom:4px; padding-top:11px; background:linear-gradient(180deg,#0E1628 82%,transparent)} html[data-mode="light"] body.toolPage .sheetHead{ background:linear-gradient(180deg,#fff 82%,transparent)} body.toolPage .sheetHead::before{content:''; position:absolute; left:50%; top:5px; transform:translateX(-50%); width:44px; height:4px; border-radius:99px; background:var(--line-2)} body.toolPage .sheetGrip{display:flex; align-items:center; gap:12px; padding:4px 0 13px; cursor:pointer; border:0; width:100%; text-align:left; background:transparent} html[data-mode="light"] body.toolPage .sheetGrip{ background:linear-gradient(180deg,#fff 72%,transparent)} body.toolPage .sheetGrip .lead{flex:1; min-width:0; display:flex; align-items:baseline; gap:9px} body.toolPage .sheetGrip .lead b{font:600 27px/1 "IBM Plex Mono",monospace; color:var(--blue-lit); font-variant-numeric:tabular-nums} body.toolPage .sheetGrip .lead i{font:600 12px/1 Figtree,sans-serif; font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)} /* the way into the results was too easy to miss — make it a real button */ body.toolPage .sheetGrip .caret{flex:none; display:inline-flex; align-items:center; gap:7px; padding:11px 15px; border-radius:11px; font:700 15.5px/1 Figtree,sans-serif; color:#fff; background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 5px 16px -6px var(--glow)} body.toolPage .sheetGrip.nudge .caret{animation:gripPulse 1.5s ease-out 3} @keyframes gripPulse{ 0%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 0 rgba(47,107,255,.62)} 70%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 15px rgba(47,107,255,0)} 100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 0 rgba(47,107,255,0)}} @media(prefers-reduced-motion:reduce){ body.toolPage .sheetGrip.nudge .caret{animation:none} } } /* floating map chrome, repositioned for thumbs */ @media(max-width:1000px){ body.toolPage .srcbar{top:0; left:0; right:0; bottom:auto; max-width:none; border-radius:0; border-left:0; border-right:0; border-top:0; justify-content:center; padding:8px 10px; gap:8px} body.toolPage .srcbar select{flex:1 1 auto; min-width:0} /* The reading, Outline my lot and the trace colours share ONE row. The wrapper is absolutely positioned; the three of them go static inside it so flex can space them out at whatever width the phone is. */ body.toolPage .mapRow{position:absolute; z-index:15; top:8px; left:10px; right:10px; display:flex; align-items:center; justify-content:space-between; gap:8px; pointer-events:none} body.toolPage .mapRow > *{position:static !important; transform:none !important; inset:auto !important; pointer-events:auto; flex:none} body.toolPage .readout{padding:7px 10px; min-width:0; text-align:left} body.toolPage .readout .big{font-size:19px} body.toolPage .readout .sub2{margin-top:3px; font-size:9.5px; letter-spacing:.08em} body.toolPage .tracebar{padding:5px 6px; gap:4px} body.toolPage .tracebar > span{display:none} body.toolPage .tracebar button{width:20px; height:20px; border-radius:6px} /* the middle item is the one that gives up room first */ body.toolPage .mapRow .snapBar{flex:0 1 auto; min-width:0; max-width:none; padding:4px} body.toolPage .mapRow .snapBar .tool{font-size:12.5px; padding:8px 9px; overflow:hidden; text-overflow:ellipsis} /* the dismiss cross costs ~29px of a 390px row and buys little: the bar is re-offered on every address lookup anyway, and tracing replaces it */ body.toolPage .mapRow .snapBar .snapX{display:none} /* The tool row sits as low as it can without touching the results grip — the collapsed sheet is 115px, so 119px leaves a 4px seam instead of the 15px it used to keep. Everything it gains goes to the map. */ /* [stated] the floating tool row "kind of sticks out in the map". It now sits ON the top edge of the shut results sheet — square bottom corners, no gap — so it reads as the top of the sheet rather than something adrift over the property. Its height is the shut sheet's, so the two move together. */ body.toolPage .toolbar{top:auto; bottom:calc(129px + var(--safeB,0px)); left:0; right:0; padding:5px 8px; border-radius:12px 12px 0 0; border-bottom:0; display:flex; flex-wrap:nowrap; justify-content:space-between; gap:3px; overflow:visible} body.toolPage .tool{padding:10px 6px; font-size:13px; white-space:nowrap; flex:1 1 auto; min-width:0; text-align:center; letter-spacing:-.01em} body.toolPage .zoomPad{right:10px} body.toolPage .zoomHint{bottom:calc(186px + var(--safeB,0px))} /* clears the tool row */ /* nothing floating over the map is worth painting once the sheet covers it */ body.toolPage.sheetFull .toolbar, body.toolPage.sheetFull .zoomHint, body.toolPage.sheetFull .mapRow{opacity:0; pointer-events:none} body.toolPage #status{display:none} body.toolPage .attrib{font-size:10px} } /* address row collapses to one line on a phone */ .moreToggle{background:none; border:0; color:var(--blue-lit); cursor:pointer; font:600 14px/1 Figtree,sans-serif; text-decoration:underline; padding:8px 2px; display:none} .howBtn{display:inline-block; background:rgba(47,107,255,.18); border:1px solid rgba(110,156,255,.4); color:var(--ink); border-radius:9px; padding:8px 13px; font:600 14px/1 Figtree,sans-serif; cursor:pointer} /* on the tool page the tutorial is an overlay, never 300px of scroll */ body.toolPage .tut{position:fixed; left:50%; transform:translateX(-50%); bottom:16px; z-index:90; width:min(1100px, calc(100vw - 24px)); margin:0; max-height:74svh; overflow-y:auto; display:none; background:linear-gradient(160deg,#141F3A,#0B1220); border-color:rgba(110,156,255,.5); box-shadow:0 34px 80px -22px rgba(0,0,0,.92)} html[data-mode="light"] body.toolPage .tut{background:linear-gradient(160deg,#FFFFFF,#EEF4FF)} html[data-mode="light"] body.toolPage .tutSteps h3, html[data-mode="light"] body.toolPage .tutStep span i{color:#0B1220} html[data-mode="light"] body.toolPage .tutStep span{color:#3D4E6B} body.toolPage .tut.show{display:grid} @media(max-width:900px){ .moreToggle{display:inline-block} body.toolPage .searchBar{padding:8px 11px; gap:7px; align-items:center; flex-wrap:nowrap} body.toolPage .searchBar label{display:none} body.toolPage .searchBar .sField{flex:1 1 auto; min-width:110px} body.toolPage .searchBar .sField.zip{flex:0 0 76px; min-width:0} body.toolPage .searchBar #go{padding:10px 13px} body.toolPage .searchBar .sField.narrow, body.toolPage .searchBar #latlon{display:none} body.toolPage .searchBar.more{flex-wrap:wrap} body.toolPage .searchBar .sField{flex:1 1 0; min-width:0} body.toolPage .searchBar .fld{width:100%; min-width:0} body.toolPage .searchBar #go{flex:0 0 auto} body.toolPage .searchBar.more .sField.narrow{display:flex; flex:1 1 100%} body.toolPage .searchBar.more #latlon{display:inline-flex} body.toolPage .searchBar .moreToggle{display:none} body.toolPage .appBar .moreToggle{display:inline-block; font-size:13px; padding:6px 2px} body.toolPage .appBar{padding:7px 11px; gap:8px; flex-wrap:nowrap; overflow:hidden} body.toolPage .appBar .tag{display:none} body.toolPage .roleswitch{padding:3px} body.toolPage .roleswitch button{padding:8px 13px; font-size:13.5px} body.toolPage .appBar .howBtn{padding:8px 11px; font-size:13.5px; white-space:nowrap} body.toolPage .tut{left:10px; right:10px; bottom:10px; width:auto; transform:none} } .searchBar .sField.zip{flex:0 0 118px; min-width:0} /* ---------- simple page heads (dataset) ---------- */ .pageHead{position:relative; background:var(--void); padding:56px 30px 48px; overflow:hidden; border-bottom:1px solid var(--line)} .pageHead::before{content:''; position:absolute; width:820px; height:820px; left:50%; transform:translateX(-50%); top:-560px; border-radius:50%; background:radial-gradient(circle, rgba(47,107,255,.28), transparent 62%); pointer-events:none} .pageHead .inner{position:relative; z-index:2} /* --void stays dark in BOTH themes, but --ink / --ink-2 flip to near-black in light mode, which put near-black type on a near-black band. The footer never had the problem because it hard-codes its colours; do the same here. */ .pageHead h1{font-size:clamp(31px,4.4vw,50px); font-weight:800; color:#F3F7FF; margin:14px 0 0; letter-spacing:-.03em} .pageHead p{font-size:18px; line-height:1.6; color:#B9C9E8; margin:16px 0 0; max-width:62ch} .pageHead .kicker{color:#8FB4FF} .pageHead a:not(.btn){color:#9DC0FF} @media(max-width:640px){ .pageHead{padding:34px 17px 30px} .pageHead p{font-size:16.5px} } .pageHead + section.band{padding-top:30px} @media(max-width:640px){ .pageHead + section.band{padding-top:22px} } /* ---------- general phone tightening ---------- */ @media(max-width:640px){ section.band{padding:46px 17px} .hero{padding:44px 17px 40px} .heroStats{gap:20px} .guideGrid{margin-top:24px} .mapWrap{gap:18px} footer .fInner{flex-direction:column; align-items:flex-start; gap:14px} } /* ---------- light mode on the full-bleed tool page ---------- */ html[data-mode="light"] body.toolPage .appBar{ background:linear-gradient(180deg,#FFFFFF,#F1F6FE); border-bottom-color:var(--edge)} html[data-mode="light"] body.toolPage .appBar .tag{color:var(--ink-3)} html[data-mode="light"] body.toolPage .roleswitch{background:#EEF3FC; border-color:var(--edge)} html[data-mode="light"] body.toolPage .roleswitch button{color:#4A5C7C} html[data-mode="light"] body.toolPage .roleswitch button[aria-pressed="true"]{color:#fff} html[data-mode="light"] .howBtn{color:#12326E; background:rgba(47,107,255,.12)} html[data-mode="light"] .zoomPad button{background:rgba(255,255,255,.92); color:#12326E; border-color:rgba(47,107,255,.3)} html[data-mode="light"] .zoomHint{background:rgba(255,255,255,.92); color:#3D4E6B; border-color:rgba(47,107,255,.28)} /* ---------- dark-ground buttons in light mode ---------- .hero, .pageHead and the footer stay dark in both themes, but .gloss-dark takes its text colour from --ink, which flips to near-black in light mode — so "I'm a contractor" went invisible on the hero. Keep those light. */ html[data-mode="light"] .hero .gloss-dark, html[data-mode="light"] .pageHead .gloss-dark, html[data-mode="light"] footer .gloss-dark{ color:#EDF2FF; border-color:rgba(160,190,255,.34); background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.03) 46%, rgba(0,0,0,.18)); box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 0 4px 14px -6px rgba(0,0,0,.55)} html[data-mode="light"] .hero .gloss-dark:hover, html[data-mode="light"] .pageHead .gloss-dark:hover, html[data-mode="light"] footer .gloss-dark:hover{ border-color:var(--blue-lit); color:#fff; background:linear-gradient(180deg, rgba(110,156,255,.28), rgba(47,107,255,.10) 50%, rgba(0,0,0,.16))} /* the mobile menu sits on the page background, so it follows the nav treatment */ html[data-mode="light"] .mobileMenu .gloss-dark{ background:linear-gradient(180deg,#FFFFFF,#EBF1FB); border-color:#C6D4EC; color:#0A1024; box-shadow:inset 0 1px 0 #fff, 0 2px 7px rgba(10,20,45,.09)} /* ============================================================ MAP GUIDE — the first-run "how do I use this" popup ============================================================ */ .guideBack{position:fixed; inset:0; z-index:120; display:grid; place-items:center; padding:18px; background:rgba(3,6,14,.88); overflow-y:auto} /* no blur — see .modalBack */ .guideBack[hidden]{display:none !important} .guideCard2{position:relative; width:min(560px,100%); max-height:92svh; overflow-y:auto; border-radius:20px; padding:26px 26px 24px; background:linear-gradient(165deg,#16223E,#0B1220); border:1px solid rgba(110,156,255,.42); box-shadow:0 40px 90px -26px rgba(0,0,0,.92)} html[data-mode="light"] .guideCard2{background:linear-gradient(165deg,#FFFFFF,#EEF4FF); border-color:var(--edge)} .guideCard2 h3{font-size:25px; font-weight:800; color:var(--ink); margin:10px 0 0; letter-spacing:-.03em} html[data-mode="dark"] .guideCard2 h3{color:#fff} .mgSteps{list-style:none; margin:20px 0 0; padding:0; display:grid; gap:16px} .mgSteps li{display:flex; gap:13px; align-items:flex-start} .mgN{flex:none; width:30px; height:30px; border-radius:10px; display:grid; place-items:center; font:600 15px/1 "IBM Plex Mono",monospace; color:#fff; background:linear-gradient(180deg,var(--blue-lit),var(--blue-deep)); box-shadow:inset 0 1px 0 rgba(255,255,255,.45)} .mgSteps b{display:block; font:700 17px/1.35 Figtree,sans-serif; color:var(--ink)} html[data-mode="dark"] .mgSteps b{color:#fff} .mgSteps p{margin:4px 0 0; font-size:15.5px; line-height:1.55; color:var(--ink-2)} .mgKey{display:inline-block; padding:2px 7px; border-radius:6px; font-weight:600; font-size:13.5px; background:rgba(110,156,255,.20); border:1px solid rgba(110,156,255,.42); color:var(--ink); white-space:nowrap} html[data-mode="dark"] .mgKey{color:#DCE7FF} .mgFine{margin:20px 0 14px; padding-top:15px; border-top:1px solid var(--line); font-size:13.5px; line-height:1.55; color:var(--ink-3)} .guideCard2 #mgGo{position:sticky; bottom:-1px} @media(max-width:520px){ .guideBack{padding:10px} .guideCard2{padding:20px 16px 16px} .guideCard2 h3{font-size:21px} .mgSteps{gap:13px} .mgSteps b{font-size:16px} .mgSteps p{font-size:14.5px} .mgFine{margin:16px 0 12px; padding-top:12px; font-size:12.5px} } /* ============================================================ ZOOM LIMITS — say so instead of just not responding ============================================================ */ .zoomPad button.off{opacity:.34; cursor:default} .zoomPad button.off:active{background:rgba(10,16,30,.9)} html[data-mode="light"] .zoomPad button.off:active{background:rgba(255,255,255,.92)} /* ============================================================ THE JOB CHIP — what you are measuring, beside the Results button ============================================================ */ .sheetHead{position:relative} .jobChip{display:none} @media(max-width:1000px){ body.toolPage .jobChip{display:flex; align-items:center; gap:9px; width:100%; cursor:pointer; padding:8px 11px; margin:0 0 8px; border-radius:11px; text-align:left; background:rgba(47,107,255,.15); border:1px solid rgba(110,156,255,.36)} html[data-mode="light"] body.toolPage .jobChip{background:rgba(47,107,255,.09); border-color:rgba(47,107,255,.26)} body.toolPage .jobChip .jcLabel{flex:none; font:600 10.5px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)} body.toolPage .jobChip b{flex:1; min-width:0; font:700 15px/1.25 Figtree,sans-serif; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} body.toolPage .jobChip .jcGo{flex:none; font:600 13px/1 Figtree,sans-serif; color:var(--blue-lit)} } /* ============================================================ THE PICKER ============================================================ */ .pickCard{width:min(620px,100%)} .pickSub{margin:9px 0 0; font-size:15.5px; line-height:1.55; color:var(--ink-2)} .pickFilter{width:100%; margin:16px 0 4px} .pickBody{max-height:none} .pickGroup{margin-top:20px} .pickGroup[hidden]{display:none} .pickGroup h4{margin:0 0 10px; font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:flex; align-items:baseline; gap:10px; flex-wrap:wrap} .pickGroup h4 span{font:400 12.5px/1.3 Figtree,sans-serif; letter-spacing:0; text-transform:none; color:var(--ink-3); opacity:.8} .pickWrap{display:flex; flex-wrap:wrap; gap:8px} .pickBtn{cursor:pointer; padding:11px 14px; border-radius:11px; font:600 15px/1 Figtree,sans-serif; color:var(--ink); background:rgba(110,156,255,.12); border:1px solid var(--line-2); transition:transform .13s, border-color .13s, background .13s} html[data-mode="light"] .pickBtn{background:#fff; border-color:var(--edge)} .pickBtn:hover{transform:translateY(-1px); border-color:var(--blue); background:rgba(47,107,255,.22); color:#fff} html[data-mode="light"] .pickBtn:hover{background:rgba(47,107,255,.12); color:#0A1024} .pickBtn[hidden]{display:none} .pickNone{margin:22px 0 0; font-size:15px; color:var(--ink-3)} @media(max-width:520px){ .pickBtn{padding:11px 12px; font-size:14.5px} .pickSub{font-size:15px} .pickGroup{margin-top:17px} } /* ============================================================ ERROR TOAST — the results panel is a closed sheet on a phone, so anything in #err has to be repeated where the eye already is ============================================================ */ .mapToast{position:absolute; top:58px; left:10px; right:10px; z-index:32; display:flex; align-items:flex-start; gap:10px; padding:13px 14px; border-radius:13px; background:rgba(58,12,20,.94); border:1px solid rgba(255,90,110,.55); color:#FFD7DC; backdrop-filter:blur(12px); box-shadow:0 16px 40px -14px rgba(0,0,0,.9); font-size:14.5px; line-height:1.5} html[data-mode="light"] .mapToast{background:rgba(255,244,245,.97); color:#8A1024; border-color:rgba(214,45,70,.5)} .mapToast[hidden]{display:none !important} .mapToast b{color:#fff} html[data-mode="light"] .mapToast b{color:#5E0A18} .mapToast .mtMsg{flex:1; min-width:0; overflow-wrap:anywhere} .mapToast .mtX{flex:none; width:28px; height:28px; border-radius:8px; cursor:pointer; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); color:inherit; font-size:13px; line-height:1; display:grid; place-items:center} @media(min-width:901px){ .mapToast{top:14px; left:auto; right:14px; max-width:420px} } /* ============================================================ THE LIVE MAP ============================================================ */ #lmap{position:absolute; inset:0; background:#04060C; z-index:0} #lmap .leaflet-container{background:#04060C; font-family:inherit; outline:none} #lmap .leaflet-tile-container img{image-rendering:auto} body.toolPage .stage{position:relative} body.toolPage #draw{position:absolute; inset:0; z-index:6; cursor:crosshair; touch-action:none; width:100%; height:100%} body.toolPage .stage.panning #draw{cursor:grab} /* the parcel and roof outlines sit between the imagery and the tracing */ #lmap .leaflet-overlay-pane{z-index:4} .aqOutline{filter:drop-shadow(0 1px 3px rgba(0,0,0,.8))} /* ---------- one-tap outline bar ---------- */ .snapBar{position:absolute; top:12px; left:50%; transform:translateX(-50%); z-index:14; display:flex; align-items:center; gap:5px; padding:6px; max-width:calc(100% - 20px); transition:opacity .25s} .snapBar.gone{opacity:0; pointer-events:none} .snapBar .tool{white-space:nowrap; font-size:13.5px; padding:9px 12px} .snapBar .snapX{width:30px; height:30px; border-radius:9px; cursor:pointer; flex:none; background:transparent; border:0; color:#8FA3C8; font-size:12px; line-height:1; display:grid; place-items:center} .snapBar .snapX:hover{color:#fff; background:rgba(110,156,255,.16)} @media(max-width:640px){ .snapBar{top:8px; gap:3px; padding:5px} .snapBar .tool{font-size:12.5px; padding:9px 9px} } /* on a wide screen the tool row and the trace colours own the top of the map, so the outline prompt drops below them */ @media(min-width:901px){ .snapBar{top:64px} .zoomHint{bottom:56px} } /* ============================================================ PRICING ============================================================ */ .priceGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:22px; margin-top:30px; align-items:start} .priceCard{position:relative; padding:26px 24px 24px; border-radius:18px; background:var(--card); border:1px solid var(--edge)} html[data-mode="dark"] .priceCard{background:linear-gradient(180deg,#101A2E,#0B1220); border-color:var(--line)} .priceCard.pro{border-color:rgba(110,156,255,.55); box-shadow:0 34px 80px -34px var(--glow)} .pTag{display:inline-flex; align-items:center; gap:8px; font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)} .pTag.pro{color:var(--blue-lit)} .pTag i{font-style:normal; letter-spacing:.06em; text-transform:none; font-size:11.5px; padding:3px 8px; border-radius:99px; background:rgba(255,176,32,.16); border:1px solid rgba(255,176,32,.45); color:#FFB020} .pAmt{display:flex; align-items:baseline; gap:6px; margin:14px 0 2px} .pAmt b{font:800 46px/1 Outfit,sans-serif; letter-spacing:-.04em; color:var(--ink)} .pAmt span{font-size:16px; color:var(--ink-3)} .pAlt{font-size:14.5px; color:var(--ink-2)} .pSub{margin:12px 0 0; font-size:15.5px; color:var(--ink-2)} .pList{list-style:none; margin:18px 0 22px; padding:0; display:grid; gap:11px} .pList li{position:relative; padding-left:26px; font-size:15.5px; line-height:1.5; color:var(--ink-2)} .pList li::before{content:''; position:absolute; left:0; top:7px; width:15px; height:15px; border-radius:50%; background:rgba(18,226,154,.16); box-shadow:inset 0 0 0 1.5px rgba(18,226,154,.75)} .pList li b{color:var(--ink)} .pBtns{display:grid; gap:9px} .btn.waiting{opacity:.55; cursor:not-allowed} .pSoon{margin:14px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-3)} .termsBox{margin-top:34px; padding:24px 26px; border-radius:16px; background:rgba(110,156,255,.07); border:1px solid var(--line)} .termsBox h3{font-size:20px; margin:0 0 14px; color:var(--ink)} .termsBox ul{margin:0; padding-left:20px; display:grid; gap:10px} .termsBox li{font-size:15.5px; line-height:1.55; color:var(--ink-2)} .termsBox li b{color:var(--ink)} .termsBox .mini{margin-top:16px} /* ============================================================ ACCOUNT ============================================================ */ .acctWho{font:500 16px/1.5 "IBM Plex Mono",monospace; color:var(--blue-lit)} a.btn{text-decoration:none} .acctGrid{display:grid; grid-template-columns:1fr; gap:20px} @media(min-width:900px){ .acctGrid{grid-template-columns:1fr 1fr} } .acctCard{padding:22px 22px 20px} .acctCard.wide{grid-column:1 / -1} .acctCard h3{font-size:19px; margin:0 0 6px; color:var(--ink)} .acctCard.locked{opacity:.8} .planNow{display:flex; align-items:baseline; gap:10px; margin:6px 0 10px} .planNow b{font:800 26px/1 Outfit,sans-serif; color:var(--ink)} .planNow span{font-size:14px; color:var(--ink-3)} .acctCard .btn{margin-top:12px; margin-right:8px} .fGrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px; margin-top:14px} .fGrid label, .fWide{display:flex; flex-direction:column; gap:6px; font:600 12px/1 Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3)} .fWide{margin-top:16px} .fSub{margin:22px 0 0; font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)} .fRow{display:flex; align-items:center; gap:14px; margin-top:18px; flex-wrap:wrap} textarea.fld{resize:vertical; font:inherit; line-height:1.5; padding:11px 13px} .rowList{list-style:none; margin:14px 0 0; padding:0; display:grid; gap:2px} .rowItem{display:flex; align-items:center; gap:14px; padding:13px 14px; border-radius:11px; background:rgba(110,156,255,.06); border:1px solid transparent; flex-wrap:wrap} .rowItem:hover{border-color:var(--line-2)} .rowItem > div:first-child{flex:1; min-width:0} .rowItem b{display:block; font:600 15.5px/1.35 Figtree,sans-serif; color:var(--ink); overflow:hidden; text-overflow:ellipsis} .rowItem span{font-size:13.5px; color:var(--ink-3)} .rowActs{display:flex; align-items:center; gap:12px; flex:none} .qTotal{font:600 14.5px/1 "IBM Plex Mono",monospace; color:var(--mint)} .qStatus{font:600 11px/1 Figtree,sans-serif; letter-spacing:.1em; text-transform:uppercase; padding:4px 8px; border-radius:99px; background:rgba(110,156,255,.14); color:var(--ink-3)} .qStatus.won{background:rgba(18,226,154,.16); color:var(--mint)} .qStatus.sent{background:rgba(255,176,32,.16); color:#FFB020} .emptyRow{padding:16px 4px; font-size:15px; color:var(--ink-3)} .linkBtn{background:none; border:0; padding:0; cursor:pointer; color:var(--blue-lit); font:600 13.5px/1 Figtree,sans-serif; text-decoration:underline} .linkBtn:hover{color:var(--ink)} .acctFoot{grid-column:1 / -1; margin-top:8px} .dataTable{width:100%; border-collapse:collapse; margin-top:12px; font-size:14.5px} .dataTable th{text-align:left; font:600 11.5px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3); padding:0 10px 8px 0} .dataTable td{padding:8px 10px 8px 0; border-top:1px solid var(--line); color:var(--ink-2)} /* ---------- save buttons in the results panel ---------- */ .saveBox{display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:6px 0 16px; padding-top:16px; border-top:1px solid var(--line)} .saveMsg{font-size:13.5px; flex:1 1 100%} .saveMsg.good{color:var(--mint)} .saveMsg.bad{color:#FF9AA6} /* ---------- button rows ---------- Two .btn elements inline in a

overlap once they wrap: .btn is inline-flex with line-height 1 and 14px padding (~44px tall) while the paragraph's line box is ~26px. Lay them out as a flex row instead of relying on line boxes. */ .btnRow{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px} .btnRow.center{justify-content:center} @media(max-width:520px){ .btnRow{flex-direction:column; align-items:stretch} .btnRow .btn{width:100%} } /* ---------- guides hub: grouped, so a reader can find their own half ---------- */ .guideGroup{margin:44px 0 0; font:700 22px/1.15 Outfit,sans-serif; letter-spacing:-.025em; color:var(--ink); display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; scroll-margin-top:86px} .guideGroup span{font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3)} .guideGroupSub{font-size:16px; line-height:1.55; color:var(--ink-2); margin:9px 0 0; max-width:60ch} .guideGroup + .guideGroupSub + .guideGrid{margin-top:20px} @media(max-width:640px){ .guideGroup{margin-top:34px; font-size:20px} } /* ---------- homepage guide tiles ---------- The homepage used to render all twelve guide cards. On a phone that is a single column of twelve, which buries everything below it. Two tiles by audience send people to the hub instead. */ .hubTile{display:flex; flex-direction:column; gap:14px; padding:26px 24px; border-radius:16px; background:var(--card); border:1px solid var(--edge); text-decoration:none; color:inherit; transition:transform .16s, border-color .16s, box-shadow .16s} .hubTile:hover{transform:translateY(-3px); border-color:var(--blue); box-shadow:0 20px 44px -22px rgba(6,14,40,.7)} .hubTile h3{font:700 21px/1.15 Outfit,sans-serif; letter-spacing:-.025em; color:var(--ink); margin:0} .hubTile > p{font-size:15.5px; line-height:1.55; color:var(--ink-2); margin:0} .hubList{list-style:none; margin:2px 0 0; padding:0; display:grid; gap:9px} .hubList li{position:relative; padding-left:19px; font-size:15px; line-height:1.45; color:var(--ink-2)} .hubList li::before{content:''; position:absolute; left:0; top:7px; width:7px; height:7px; border-radius:50%; background:var(--blue-lit)} .hubTile.pro .hubList li::before{background:var(--amber)} .hubMore{margin-top:auto; padding-top:4px; font:600 15px/1 Figtree,sans-serif; color:var(--blue-lit)} .hubTile.pro .hubMore{color:var(--amber)} /* ---------- dataset explainer ---------- Four short answers: what the data is, where it comes from, and what it does for each of the two audiences. The section used to assert one sentence and drop straight into a map. */ .dataExplain{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:26px 0 30px} @media(max-width:1080px){ .dataExplain{grid-template-columns:repeat(2,1fr)} } @media(max-width:620px){ .dataExplain{grid-template-columns:1fr; gap:13px; margin:20px 0 24px} } .dataExplain article{padding:20px 19px; border-radius:14px; background:var(--card); border:1px solid var(--edge)} .dataExplain .deN{display:block; font:700 11px/1 Figtree,sans-serif; letter-spacing:.15em; text-transform:uppercase; color:var(--blue); margin-bottom:11px} .dataExplain article:nth-child(3) .deN{color:#0DBE80} .dataExplain article:nth-child(4) .deN{color:#C77800} html[data-mode="dark"] .dataExplain article:nth-child(3) .deN{color:var(--mint)} html[data-mode="dark"] .dataExplain article:nth-child(4) .deN{color:var(--amber)} .dataExplain h3{margin:0 0 8px; font:700 17.5px/1.2 Outfit,sans-serif; letter-spacing:-.02em; color:var(--ink)} .dataExplain p{font-size:14.8px; line-height:1.52; color:var(--ink-2); margin:0} /* ---------- Pro preview ---------- Two mock screens so a contractor can see what the subscription actually looks like before paying for it. Deliberately styled as screenshots-in-a- frame rather than live UI, so nobody mistakes the sample figures for data. */ .previewGrid{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:30px} @media(max-width:900px){ .previewGrid{grid-template-columns:1fr} } .shot{margin:0; border-radius:15px; overflow:hidden; border:1px solid var(--edge); background:var(--bg); box-shadow:0 24px 54px -30px rgba(6,14,40,.75)} .shotBar{display:flex; align-items:center; gap:6px; padding:10px 14px; background:rgba(120,150,210,.10); border-bottom:1px solid var(--edge)} .shotBar i{width:9px; height:9px; border-radius:50%; background:var(--edge)} .shotBar span{margin-left:9px; font:600 12px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)} .shotBody{padding:18px 18px 16px} .qHead{display:flex; align-items:center; gap:11px; padding-bottom:13px; border-bottom:1px solid var(--edge)} .qLogo{width:38px; height:38px; flex:0 0 38px; border-radius:9px; display:grid; place-items:center; font:800 14px/1 Outfit,sans-serif; color:#fff; background:linear-gradient(140deg,#6E9CFF,#1741C4)} .qHead b{display:block; font:700 15px/1.2 Outfit,sans-serif; color:var(--ink)} .qHead small{display:block; margin-top:3px; font-size:11.5px; color:var(--ink-3)} .qStatus{margin-left:auto; padding:4px 10px; border-radius:99px; font:600 11px/1 Figtree,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#046B47; background:#E4FBF3; border:1px solid #B6F0DA} html[data-mode="dark"] .qStatus{color:#12E29A; background:rgba(18,226,154,.13); border-color:rgba(18,226,154,.32)} .qAddr{margin:13px 0 9px; font:600 13.5px/1.35 Figtree,sans-serif; color:var(--ink-2)} .qTable{width:100%; border-collapse:collapse; font-size:13px} .qTable td{padding:7px 0; border-bottom:1px solid var(--edge); color:var(--ink-2); vertical-align:top} .qTable td:nth-child(2){text-align:right; white-space:nowrap; color:var(--ink-3); font-family:"IBM Plex Mono",monospace; font-size:11.5px; padding-left:10px} .qTable td:last-child{text-align:right; white-space:nowrap; width:1%; padding-left:12px; font-family:"IBM Plex Mono",monospace; color:var(--ink)} .qTable .qOP td{color:var(--ink-3)} .qTable .qTot td{border-bottom:0; padding-top:11px; font-weight:700; color:var(--ink); font-size:14.5px} .qTable .qTot td:last-child{font-size:17px; color:var(--blue-lit)} .qFoot{margin-top:12px; font-size:11.5px; line-height:1.45; color:var(--ink-3)} .dHead{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; padding-bottom:12px; border-bottom:1px solid var(--edge)} .dHead b{font:700 15px/1.2 Outfit,sans-serif; color:var(--ink)} .dHead span{font-size:11.5px; color:var(--ink-3)} .dBig{margin:15px 0 0; font:600 30px/1 "IBM Plex Mono",monospace; color:var(--blue-lit); letter-spacing:-.02em} .dBig em{font:400 13px/1 Figtree,sans-serif; font-style:normal; color:var(--ink-3)} .dRange{display:flex; align-items:center; gap:9px; margin:15px 0 0} .dLo,.dHi{font:600 11.5px/1 "IBM Plex Mono",monospace; color:var(--ink-3)} .dBar{position:relative; flex:1; height:7px; border-radius:99px; background:linear-gradient(90deg,#6E9CFF,#12E29A)} .dBar i{position:absolute; top:-4px; width:4px; height:15px; border-radius:2px; background:var(--ink); box-shadow:0 0 0 2px var(--bg)} .dNote{margin-top:10px; font-size:12.5px; line-height:1.45; color:var(--ink-2)} .dTable{width:100%; border-collapse:collapse; font-size:13px; margin-top:14px} .dTable td{padding:7px 0; border-bottom:1px solid var(--edge); color:var(--ink-2)} .dTable td:last-child{text-align:right; white-space:nowrap; color:var(--ink); font-family:"IBM Plex Mono",monospace; font-size:12px} .dTable tr:last-child td{border-bottom:0} /* ============================================================ THE JOB ASK — the question, over the map The chip lives at the bottom of the screen inside a closed sheet, which is the last place a first-time user looks. Until they have chosen a job, ask on the map itself. ============================================================ */ /* display:flex beats the UA [hidden]{display:none}, so `prompt.hidden = true` did nothing: the Step 1 box stayed on screen after a job was chosen, while .askOn came off and "Outline my lot" rode back up underneath it. Same trap as .modalBack. Any absolutely-positioned overlay needs this guard. */ .jobAsk[hidden]{display:none !important} .jobAsk{position:absolute; z-index:26; left:12px; right:12px; top:12px; display:flex; align-items:center; gap:11px; cursor:pointer; text-align:left; padding:11px 13px; border-radius:13px; background:linear-gradient(180deg, rgba(255,176,32,.20), rgba(255,176,32,.10)); border:1px solid rgba(255,176,32,.55); box-shadow:0 14px 34px -16px rgba(0,0,0,.7); animation:askIn .34s ease-out both} html[data-mode="light"] .jobAsk{background:linear-gradient(180deg,#FFF7E8,#FFEFD2); border-color:#F0C173; box-shadow:0 10px 26px -14px rgba(60,40,0,.34)} @keyframes askIn{from{opacity:0; transform:translateY(-8px)} to{opacity:1; transform:none}} @media(prefers-reduced-motion:reduce){ .jobAsk{animation:none} } .jobAsk .jaN{flex:none; width:23px; height:23px; border-radius:50%; display:grid; place-items:center; font:700 13px/1 Figtree,sans-serif; color:#3A2600; background:var(--amber)} .jobAsk .jaT{flex:1; min-width:0} .jobAsk .jaT b{display:block; font:700 15px/1.2 Figtree,sans-serif; color:#FFD79A} html[data-mode="light"] .jobAsk .jaT b{color:#6B4400} .jobAsk .jaT i{display:block; margin-top:2px; font:400 12.5px/1.3 Figtree,sans-serif; font-style:normal; color:#D9B888} html[data-mode="light"] .jobAsk .jaT i{color:#8A6320} .jobAsk .jaGo{flex:none; padding:6px 11px; border-radius:99px; font:700 12.5px/1 Figtree,sans-serif; color:#3A2600; background:var(--amber)} @media(max-width:420px){ .jobAsk{gap:9px; padding:10px 11px} .jobAsk .jaT b{font-size:14.5px} .jobAsk .jaT i{font-size:12px} .jobAsk .jaGo{padding:6px 9px; font-size:12px} } /* the chip, while nothing has been chosen, asks instead of asserting */ @media(max-width:1000px){ body.toolPage .jobChip.unset{background:rgba(255,176,32,.16); border-color:rgba(255,176,32,.52)} html[data-mode="light"] body.toolPage .jobChip.unset{background:#FFF6E6; border-color:#F0C173} body.toolPage .jobChip.unset b{color:#FFD79A} html[data-mode="light"] body.toolPage .jobChip.unset b{color:#6B4400} body.toolPage .jobChip.unset .jcGo{color:var(--amber)} html[data-mode="light"] body.toolPage .jobChip.unset .jcGo{color:#A96C00} } /* The ask is a PHONE fix. Below 900px the results panel is a closed sheet, so the most important question on the page has nowhere to live but the map. At 901px and up the panel is open beside the map and already shows "What are you measuring?" with the mode tabs and job dropdown — a full-width orange bar over the map there is redundant, and it landed on the tool row. So: overlay on phones, highlight the panel's own section on desktop. */ @media(min-width:1001px){ .jobAsk{display:none} } /* matches the band where the ask is shown, which is the band where the results panel is a bottom sheet — the two must stay in step */ @media(max-width:1000px){ .stage.askOn .mapRow{top:calc(var(--askH,57px) + 18px)} /* kept for the desktop band below 1001px where .mapRow is display:contents */ .stage.askOn .snapBar{top:calc(var(--askH,57px) + 22px)} } /* desktop: point at the panel section that already asks the question */ @media(min-width:901px){ body.jobUnset .panel .sec:first-of-type, body.jobUnset .panel #jobSec{border-radius:12px; padding:11px 12px; margin-left:-12px; margin-right:-12px; background:rgba(255,176,32,.10); box-shadow:inset 0 0 0 1px rgba(255,176,32,.46)} html[data-mode="light"] body.jobUnset .panel .sec:first-of-type, html[data-mode="light"] body.jobUnset .panel #jobSec{background:#FFF8EC; box-shadow:inset 0 0 0 1px #F0C173} body.jobUnset .panel .sec:first-of-type > label::after{content:'Start here'; margin-left:9px; padding:3px 8px; border-radius:99px; vertical-align:1px; font:700 10px/1 Figtree,sans-serif; letter-spacing:.12em; text-transform:uppercase; color:#3A2600; background:var(--amber)} } /* ============================================================ FAVOURITE JOBS — the star, the list, and the box ============================================================ */ .pickCell{display:inline-flex; align-items:stretch; border-radius:11px; overflow:hidden; border:1px solid var(--line-2); background:rgba(110,156,255,.12); transition:transform .13s, border-color .13s, background .13s} html[data-mode="light"] .pickCell{background:#fff; border-color:var(--edge)} .pickCell[hidden]{display:none} .pickCell:hover{transform:translateY(-1px); border-color:var(--blue)} /* the pill's own border now lives on the cell */ .pickCell .pickBtn{border:0; background:transparent; border-radius:0; padding:11px 10px 11px 14px} .pickCell .pickBtn:hover{transform:none; background:rgba(47,107,255,.22); color:#fff} html[data-mode="light"] .pickCell .pickBtn:hover{background:rgba(47,107,255,.12); color:#0A1024} /* The star was a pale grey glyph on the pill's own background, which read as decoration rather than a control. It now sits in its own tinted well with a real divider, so the pill visibly has two halves to press. */ .favStar{flex:none; width:42px; cursor:pointer; border:0; font-size:18px; line-height:1; border-left:1px solid var(--line-2); color:#F0B43C; background:rgba(255,176,32,.13); display:grid; place-items:center; transition:color .13s, background .13s} html[data-mode="light"] .favStar{border-left-color:var(--edge); color:#C88A16; background:#FFF6E6} .favStar:hover{color:var(--amber); background:rgba(255,176,32,.30)} html[data-mode="light"] .favStar:hover{background:#FFECC9; color:#9A6A00} .favStar.on{color:var(--amber); background:rgba(255,176,32,.24)} html[data-mode="light"] .favStar.on{color:#B8790A; background:#FFEFD2} .favStar.on:hover{color:#FFC85A} @media(max-width:520px){ .favStar{width:38px; font-size:17px} } /* Shown only while the list is empty — the "tap a star" line used to live in the Your list header, which is hidden until you already have favourites. */ .pickHint{margin:10px 0 0; font:500 13.5px/1.45 Figtree,sans-serif; color:var(--ink-2)} .pickHint b{color:var(--amber); font-size:15px} html[data-mode="light"] .pickHint b{color:#B8790A} .pickHint[hidden]{display:none} .favGroup h4{color:var(--amber)} .favGroup{padding-bottom:16px; border-bottom:1px solid var(--line-2)} html[data-mode="light"] .favGroup{border-bottom-color:var(--edge)} .favOnly{display:flex; align-items:center; gap:10px; cursor:pointer; margin:14px 0 2px; padding:10px 13px; border-radius:11px; background:rgba(255,176,32,.10); border:1px solid rgba(255,176,32,.34); font:600 14.5px/1.3 Figtree,sans-serif; color:var(--ink)} html[data-mode="light"] .favOnly{background:#FFF8EC; border-color:#F0C173; color:#5C3D00} .favOnly[hidden]{display:none} .favOnly input{width:18px; height:18px; flex:none; accent-color:#E8A21C; cursor:pointer} /* ---------- favourites, on the account page ---------- */ .favSettings{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:16px} @media(max-width:820px){ .favSettings{grid-template-columns:1fr; gap:18px} } .favSettings h4{margin:0 0 10px; font:600 12px/1 Figtree,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); display:flex; gap:8px; align-items:baseline} .favSettings h4 span{font:400 12px/1 Figtree,sans-serif; letter-spacing:0; text-transform:none} .favChips{display:flex; flex-wrap:wrap; gap:8px} .favPool{max-height:290px; overflow:auto; padding:4px 4px 4px 0; margin-top:10px} .favEmpty[hidden]{display:none} .favChip{display:inline-flex; align-items:center; gap:8px; cursor:pointer; text-align:left; padding:8px 10px 8px 12px; border-radius:11px; background:rgba(110,156,255,.10); border:1px solid var(--line-2); transition:border-color .13s, background .13s} html[data-mode="light"] .favChip{background:#fff; border-color:var(--edge)} .favChip b{font:600 14px/1.15 Figtree,sans-serif; color:var(--ink)} .favChip i{font:400 11.5px/1 Figtree,sans-serif; font-style:normal; color:var(--ink-3)} /* The + was an 11px grey glyph in a near-invisible well, so the chip did not look like it did anything. It is now a filled blue affordance at the size of a real control, and the x it turns into inherits the same weight. */ .favChip .favX{width:24px; height:24px; flex:none; border-radius:50%; display:grid; place-items:center; font:700 15px/1 Figtree,sans-serif; color:#CFE0FF; background:rgba(47,107,255,.34); transition:background .13s, color .13s} html[data-mode="light"] .favChip .favX{background:#DCE7FF; color:#1B47B8} .favChip:hover .favX{background:var(--blue); color:#fff} .favChip.on .favX{font-size:12px} .favChip:hover{border-color:var(--blue)} .favChip.on{background:rgba(255,176,32,.13); border-color:rgba(255,176,32,.46)} html[data-mode="light"] .favChip.on{background:#FFF8EC; border-color:#F0C173} .favChip.on .favX{color:#8A5200; background:rgba(255,176,32,.30)} .favChip.on:hover{border-color:var(--amber)} /* ---------- footer link row ---------- This is a