/* Dominia — surface layer. Owner piece: COLOUR & SURFACE. * * Three jobs, in this order: * 1. THE GROUND. Give the dark sections more than one value and something to look at. * 2. THE EDGE. Decide what a Dominia panel's corner does, and make it a utility. * 3. THE ACCENT. Put --signal on enough elements that it reads as a system. * * Loaded after every section file, so the "bindings" block at the bottom can apply this * vocabulary to markup that exists today without reaching into other builders' files. If those * builders later put the utility classes into index.html, the bindings block can be deleted * wholesale and nothing above it changes. */ :root { /* ---- The chamfer ---- The bar cuts a 13.5px diagonal off one corner of every panel, every piece of media and its CTA chip, via clip-path. 13.5px is not an arbitrary number over there: their root size is 18px, so the cut is 0.75rem — three quarters of the body size. Written the same way here it lands on 12px against our 16px root, which means the cut scales with the type rather than with the viewport, and it lands on our 4px space unit as a side effect. Why a chamfer and not the square HUD brackets we had: brackets say "you are looking THROUGH this" — a viewfinder, a reticle. That is true of the hero frame and the contest map, so those keep their brackets. It is not true of a 300px readout panel, which is an object you are looking AT, and eight little corner ticks on an object is a sticker, not an instrument. A cut corner is a physical fact about a sheet of material. Split accordingly. */ --chamfer: 0.75rem; /* 12px — panels, chips */ --chamfer-lg: 1.5rem; /* 24px — media, full-bleed plates */ /* Dials for the .panel utility are NOT declared here on purpose. A custom property whose value is another var() resolves at its own declaration site, so `--edge-line: var(--hairline-strong)` written on :root would bake the root's hairline and inherit that dead value into .get, where the hairline is a dark line on paper rather than a light one on ink. The utility reads `var(--edge-line, var(--hairline-strong))` instead: the fallback re-resolves per element, so a panel picks up whichever ground it is standing on, and --edge-line stays available as a deliberate per-instance override. Same for --panel-fill / --ink-2. */ /* The ground's texture. Round 1 ran three layers here and the blind read on all three was bad: "one warm near-black fill with a decorative grid and a vignette so faint it reads as compression noise". Both criticisms are correct and they have opposite fixes. THE GRATICULE IS GONE. It was a 128px rule at 2.2% alpha, and on the old L* 5.8 ground it was barely there; on the new L* 3.5 ground the same alpha composites 30% brighter relative to its field and reads as a literal grid. Worse, it was a decorative grid drawn eighty pixels away from an actual map. A page that ships cartography does not need wallpaper cartography, so the token is kept at `transparent` for anything still consuming it. THE LIFT IS NOW STRUCTURAL, not a vignette. A 3.8% wash over a flat field is invisible; a wash that carries the ground from L* 3.5 at the page edges to L* 7.4 behind the board is a 4-unit gradient, about four JNDs, and it reads as a horizon rather than as noise. Measured at the brightest point of the composite: rgb(24,21,16), L* 7.4. Grain stays, and it matters more than it sounds. A near-black flat fill in an 8-bit PNG has nowhere to put a 2% gradient, so any soft lift on it posterises into visible bands — which is exactly what the first pass of this file produced. Desaturated fractal noise at 4.5% dithers the lift back into a continuous field, and on its own it is the difference between "dark colour" and "dark material". */ --graticule: transparent; /* The lift was a Claim-red wash at 8.5%. On the v3 cool ground it read as a pink stain across the top of every screen rather than as a horizon, and v3 keeps light for marks that measure something, so it is off. The token stays for anything still consuming it. */ --ink-lift: transparent; /* THE SURVEY — the ground third layer, and the answer to a charge three separate blind critics laid independently: the bar empty space is working and ours is not. Their /origin runs faint topographic contours edge to edge behind everything. This is NOT contours. Contours are the reference device and they are on-subject for field ecology; borrowed here they would be the loudest possible tell that we studied the bar. And the graticule this file already deleted was killed by a blind critic for being "a decorative grid drawn eighty pixels away from an actual map" — an objection that applies with equal force to any invented pattern. So the field is the city itself. tools/plate/build-survey.mjs reads data/bengaluru.json — the same OpenStreetMap snapshot js/cartography.js draws the board from — and emits the outlines of all 205 road-bounded territories, simplified to 2,451 points. It is the same partition as the board, two scales out and forty times fainter. Nothing is invented and nothing is decorative: the ground is a survey of the ground. The generator emits an opaque stroke for use as a mask. It is consumed here as an ordinary background layer with the colour and alpha baked in instead, because carries its own background, so body background is not propagated to the canvas and a negative-z layer element paints UNDER it — a trap that has already cost this project a debugging round. Retuning the weight means re-running the generator; that is the price of the simpler stack. */ --survey: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='1207' viewBox='0 0 2000 1207'%3E%3Cpath fill='none' stroke='%23F1EFE7' stroke-opacity='0.085' stroke-width='1.6' stroke-linejoin='round' d='M507 864L628 860 629 879 508 883ZM328 187L331 130 369 131 367 188ZM1282 291L1288 290 1314 300 1311 316 1313 330 1319 341 1259 320ZM681 898L762 897 771 894 775 992 685 992ZM1430 413L1438 383 1579 430 1563 474 1559 476 1422 442ZM1550 476L1562 479 1562 482 1541 553 1490 577 1481 553 1468 538 1455 531 1413 528 1410 525 1421 445ZM1490 577L1542 554 1522 637 1536 686 1520 638ZM1524 837L1517 878 1485 864 1458 845 1436 838 1447 805 1439 800 1449 765 1429 762 1439 720 1440 700 1310 718 1314 716 1314 709 1372 656 1465 589 1490 577 1525 650 1534 684 1534 765ZM1324 350L1328 346 1341 350 1581 431 1434 382 1420 442 1364 441ZM1565 477L1581 431 1709 474 1698 509ZM1548 549L1541 553 1542 543 1564 479 1634 496 1635 502 1630 510 1597 523ZM1713 632L1828 562 1837 640 1850 675 1829 702 1786 705 1762 678 1708 635ZM1637 661L1658 641 1709 635 1762 678 1786 707 1709 682 1638 665ZM1637 661L1619 600 1618 594 1621 591 1654 603 1674 622 1708 635 1658 641ZM685 992L772 992 774 1106 692 1107ZM685 1149L693 1138 692 1109 774 1108 776 1214 756 1214 756 1202ZM1109 249L1122 211 1124 214 1127 211 1124 184 1225 229 1202 290 1203 296 1194 289 1122 256 1115 256ZM707 486L713 463 711 355 720 359 742 356 741 367 745 377 787 426 797 444 798 464 794 488 790 492 778 494 720 491ZM703 331L723 308 752 283 745 259 755 296 744 355 716 358 711 355 705 343ZM839 174L855 173 870 181 830 239 818 252 801 262 800 267 863 277 850 284 816 317 804 341 799 344 796 339 794 311 800 265 799 248 788 180ZM891 502L879 497 852 539 838 535 847 515 814 504 792 543 749 527 757 508 784 515 785 497 797 498 816 493 820 480 825 477 832 477ZM1033 390L1086 306 1105 261 1115 256 1122 256 1200 292 1203 301 1209 304 1256 319 1161 420 1089 457 1022 411ZM852 287L864 278 800 267 800 263 818 252 830 239 871 180 906 207 941 227 976 256 973 263 944 277 888 272 859 281ZM847 298L859 281 888 272 944 277 973 263 990 263 1020 275 1047 276 1093 265 1098 267 1079 313 1020 411 945 361 924 356 872 353 856 348 849 339 843 319ZM1202 293L1212 264 1282 287 1256 319 1203 301ZM1000 958L1004 919 1051 936 1068 870 1044 966 1036 970ZM1588 409L1611 341 1631 347 1665 309 1678 327 1712 345 1704 370 1697 372 1735 389 1710 471 1582 428ZM1700 510L1737 389 1704 372 1712 346 1735 342 1784 360 1790 365 1832 445 1845 461 1840 487 1842 534 1814 536ZM1710 259L1677 295 1673 292 1666 265 1656 257 1652 257 1624 292 1612 289 1618 257 1617 245 1610 235 1590 229 1603 161 1640 168 1652 141 1684 147 1700 115 1774 160ZM1162 1026L1180 976 1201 983 1221 993 1348 1107 1315 1155 1293 1139 1277 1161 1249 1132 1216 1065 1189 1040ZM677 821L728 820 733 856 678 859ZM1044 966L1068 869 1075 854 1112 865 1106 884 1092 880 1089 889 1104 894 1100 910 1116 915 1120 901 1141 908 1130 959 1180 976 1162 1026 1159 1027 1082 1001ZM525 1087L532 1079 547 1041 553 1039 573 1036 600 1047 636 1051 637 1129 557 1130 557 1101ZM426 342L405 350 347 360 351 299 359 299 360 292 368 293 369 264 362 263 363 247 376 247 401 269 419 280 464 285 460 327ZM606 1048L573 1036 547 1041 589 951 631 945 633 1000 612 1001ZM731 258L701 246 694 233 682 232 657 242 663 210 682 199 685 227 713 234 732 245 735 251 737 245 745 259 752 283 723 308 702 332 693 312 705 310 712 302 716 288 734 259ZM506 791L478 792 443 800 506 718 559 639 567 641 581 653 587 678 579 711 590 712 586 736 601 737 598 746 601 764 533 786ZM338 465L334 465 355 422 408 394 435 390 443 364 470 425 466 441 466 462ZM645 261L645 249 682 232 694 233 701 246 731 258 709 302 702 309 674 295 667 295 647 304ZM733 856L728 820 793 838 775 889 767 896 738 897ZM506 825L442 827 442 815 535 813 535 789 571 776 573 823ZM508 883L629 879 630 897 628 900 509 903ZM661 972L684 971 692 1107 667 1108ZM442 827L506 825 508 883 443 885ZM506 825L656 821 653 831 655 860 507 864ZM390 970L395 949 401 939 444 905 443 885 508 883 509 903 629 900 537 903 539 974 523 978 513 987 483 988 468 981 455 980 425 993 380 990ZM633 973L661 972 667 1108 640 1107ZM639 1129L640 1121 650 1122 718 1176 713 1183 640 1184ZM633 973L639 1103 646 1115 643 1121 638 1120 636 1051 606 1048 612 1001 634 1000ZM671 1109L692 1109 693 1138 685 1149 650 1122 645 1113 646 1110ZM557 1130L637 1130 639 1184 621 1178 558 1177ZM631 900L656 900 661 972 633 973ZM656 900L681 899 684 971 661 972ZM789 854L795 838 866 859 858 918 777 896ZM840 847L850 791 867 798 866 855 839 851ZM794 837L806 807 828 779 846 737 861 740 858 753 866 778 867 798 850 791 839 851ZM867 794L862 764 913 772 912 788 961 801 991 818 973 852 984 857 985 854 969 885 923 856 922 912 911 942 922 906 923 858 893 835ZM857 919L860 916 866 859 883 862 905 854 923 858 922 906 911 942ZM1314 20L1393 -4 1453 10 1512 32 1500 51 1475 77 1468 65 1445 73 1421 71 1301 25 1305 21ZM969 885L985 854 1024 867 1028 866 1036 841 1075 854 1070 862 1051 936 1004 919 999 958 975 955 982 893ZM255 83L256 72 290 72 288 129 248 127 254 105ZM866 859L867 794 893 835 923 858 905 854 883 862ZM1493 96L1523 57 1533 57 1547 46 1543 120 1531 124 1502 125 1501 114ZM1478 78L1515 37 1545 46 1535 56 1523 57 1494 96ZM652 820L573 823 571 776 627 757 643 748 651 748 681 737 668 786 656 820ZM691 726L693 681 728 682 775 690 774 724 702 731 693 731ZM231 180L248 127 331 130 328 187 246 185ZM1603 64L1614 28 1662 61 1643 91ZM1700 115L1712 91 1754 108 1791 134 1791 138 1776 160ZM291 56L293 9 330 11 336 22 334 58ZM1643 91L1662 61 1711 91 1700 114 1676 101ZM246 185L351 187 329 187 325 260 290 229 256 224ZM225 204L230 183 248 188 256 224 290 229 325 261 267 257 214 247ZM122 229L126 205 166 214 166 192 153 189 164 156 198 168 203 149 212 149 231 169 228 178 221 176 227 180 207 260 119 246ZM1807 1164L1799 1160 1792 1184 1773 1176 1769 1184 1761 1179 1750 1156 1749 1137 1757 1103 1770 1087 1823 1126 1808 1153ZM1011 742L1014 713 1017 709 1063 695 1073 700 1073 705 1040 740ZM920 1105L920 945 944 921 969 885 982 895 975 955 922 946ZM1017 791L1038 742 1045 739 1076 704 1144 764 1138 761 1140 773 1137 781 1099 822 1110 808 1014 797ZM915 748L879 745 847 735 853 729 872 728 1008 741 1016 747 1028 744 974 753ZM1084 843L1108 810 1141 777 1161 772 1175 773 1170 796 1186 800 1181 817 1167 812 1165 818 1147 813 1135 855ZM1535 407L1564 323 1610 341 1580 427 1533 412ZM145 925L87 969 57 981 39 995 27 993 18 987 21 944 28 945 31 900 55 905 59 898 65 900 91 845 93 806 102 810 140 813 193 911ZM776 994L812 994 842 1001 839 1005 841 1022 777 1105ZM1611 339L1622 309 1624 292 1647 298 1664 308 1631 346ZM847 1000L848 953 859 921 896 940 916 945 852 1003ZM859 921L911 944 922 912 923 858 969 885 944 921 920 944 896 940ZM776 989L777 897 857 920 846 959 846 1000 776 992ZM847 1024L854 1018 852 1003 900 957 914 946 920 945 918 1105 847 1106ZM1353 313L1354 306 1346 287 1329 270 1417 255 1462 268 1452 296 1457 313 1446 346ZM1434 382L1341 350 1353 313 1446 346ZM800 1106L777 1105 841 1022 845 1024 845 1106ZM1459 387L1468 354 1543 380 1532 411ZM1419 254L1425 250 1494 235 1502 234 1503 237 1492 267 1461 268ZM1467 128L1485 125 1488 141 1482 164 1500 167 1505 149 1509 147 1502 127 1543 122 1543 211 1537 237 1505 232 1469 193 1471 163ZM1468 354L1480 320 1556 343 1543 380ZM1502 234L1461 243 1462 221 1445 218 1453 174 1449 170 1453 162 1470 163 1469 193 1502 230ZM252 518L279 487 295 502 306 504 296 535 279 529 278 533ZM444 625L452 625 467 635 478 603 486 604 485 607 482 606 477 625 480 626 478 629 491 636 485 648 490 652 497 638 525 655 534 636 543 588 569 604 579 598 585 604 541 661 513 667 509 673 468 638ZM534 564L564 569 573 560 580 566 595 568 590 585 573 604 569 604 550 591 553 572 538 571ZM121 415L123 396 163 399 161 425 173 429 167 450ZM183 342L185 271 203 273 201 343ZM182 392L183 359 201 359 200 435 190 432 183 412ZM719 211L706 210 708 168 739 165 738 242 734 236 733 214ZM628 238L652 239 650 205 642 198 642 188 681 186 681 198 685 186 692 187 688 227 683 223 682 199 661 213 657 242 645 249 644 239ZM895 533L905 509 943 526 943 540 936 553ZM220 89L224 48 254 48 251 100 244 126 247 108 233 106 233 100 241 100 241 90ZM658 713L660 672 693 674 692 703 687 703 686 711 668 708 667 715ZM45 516L29 519 31 513 84 501 170 499 178 497 185 489 161 545 149 541 156 523 154 517 136 511 143 501 99 501 73 505 73 509ZM342 988L369 963 389 937 405 934 395 950 390 971 366 1013 345 1007ZM357 1056L362 1028 394 1039 405 1048 406 1057 416 1060 415 1063 385 1067 370 1058ZM1107 1166L1103 1156 1146 1151 1173 1126 1189 1120 1194 1123 1177 1145 1174 1142 1179 1124 1156 1143 1165 1145 1162 1158 1180 1163 1172 1184 1142 1174 1146 1166ZM1189 1120L1230 1096 1245 1127 1234 1135 1245 1127 1241 1119 1209 1139 1202 1135 1197 1143 1194 1141 1198 1133 1191 1129 1194 1123ZM249 1154L254 1105 278 1105 276 1151ZM1843 478L1840 487 1867 486 1878 479 1882 480 1882 486 1889 486 1891 522 1859 533 1842 533 1840 487ZM1840 487L1848 441 1879 443 1886 449 1884 465 1877 480 1867 486ZM1651 144L1642 139 1652 141 1656 105 1660 106 1662 97 1699 116 1684 147 1654 141ZM1859 441L1848 441 1848 425 1896 402 1920 397 1917 416 1905 416 1906 426 1879 426 1879 443ZM274 946L277 904 277 908 293 910 294 915 320 907 323 930 314 933 312 941 306 947ZM234 928L223 929 225 907 279 894 276 927ZM367 188L369 131 398 114 426 164 418 169 393 124 393 143 377 143 375 196 367 196ZM973 852L1002 796 1014 798 1001 824 1035 843 1028 866 1019 866ZM1135 855L1146 820 1190 839 1182 866ZM1843 1009L1845 996 1855 998 1856 993 1919 1005 1902 1002 1900 1011 1893 1010 1886 1032ZM242 716L249 679 268 683 268 672 280 675 268 674 269 683 301 693 297 705 261 695 259 705 265 709 260 735 246 738ZM1852 860L1794 726 1789 713 1790 707 1821 705 1833 701 1838 690 1853 675 1851 674 1878 662 1902 664 1957 689 1955 869 1858 868ZM1951 983L1941 976 1926 973 1928 967 1915 964 1915 954 1862 928 1867 903 1867 883 1858 868 1955 869 1954 985ZM1833 590L1829 536 1877 532 1959 481 1957 615 1836 614ZM1955 687L1902 664 1878 662 1854 671 1838 637 1836 614 1957 615ZM1236 832L1253 785 1288 756 1311 719 1440 701 1439 720 1429 762 1449 765 1439 800 1447 805 1436 838 1458 845 1485 864 1517 878 1497 1003 1475 1015 1466 1032 1446 1023 1446 1006 1422 994 1390 985 1373 1033 1376 1043 1381 1042 1393 1070 1396 1071 1385 1072 1201 925ZM1511 1067L1510 1064 1459 1053 1396 1071 1393 1070 1381 1042 1376 1043 1373 1033 1390 985 1422 994 1446 1006 1446 1023 1466 1032 1475 1015 1499 1004 1503 957 1531 798 1536 686 1581 676 1637 756 1666 790 1652 921 1640 960 1663 971 1667 975 1667 981 1653 1019 1644 1070 1639 1071 1637 1081 1522 1066ZM469 82L493 80 514 83 508 123 484 122ZM1937 1156L1950 1116 1964 1123 1959 1144 1962 1145 1960 1157 1975 1156 1975 1153 1994 1155 1993 1171 1977 1170 1977 1177ZM1078 478L1084 465 1163 421 1259 320 1309 337 1318 345 1361 441 1282 502 1265 517 1238 550 1141 635 1125 646 1112 650 1094 649 1088 642 1070 504ZM933 -34L980 -17 988 -1 1012 -10 1029 -12 1036 19 1039 53 1035 52 1041 61 1056 150 1122 211 1103 259 1046 274 1020 272 983 260 941 227 906 207 871 180 917 106 864 88 872 79 853 43 891 12ZM1001 824L1014 798 1109 809 1084 843 1107 848 1104 860 1036 841 1028 866 1035 843ZM62 127L67 98 66 84 138 82 139 91 128 97 113 137 84 135 78 133 79 127ZM1247 543L1267 518 1287 500 1360 445 1421 445 1410 525 1413 528 1455 531 1468 538 1481 553 1490 577 1448 601 1372 656 1311 708 1295 715 1285 710 1270 688 1266 676 1241 555 1241 550ZM1793 1058L1798 1051 1802 1053 1807 1045 1811 1047 1825 1024 1825 1027 1835 1032 1839 1024 1870 1034 1843 1088ZM1665 309L1713 256 1775 164 1816 194 1835 194 1835 199 1847 191 1895 186 1894 266 1906 324 1892 341 1873 383 1850 397 1844 416 1845 457 1840 455 1791 364 1785 359 1746 343 1739 333 1736 341 1731 343 1706 341 1678 327ZM9 468L14 431 24 432 20 469 50 472 48 488 7 497ZM1278 49L1279 44 1283 46 1324 99 1369 117 1378 86 1405 123 1401 126 1393 149 1371 143 1350 187 1354 190 1371 201 1373 197 1388 204 1404 182 1412 184 1413 202 1423 208 1430 148 1453 174 1445 218 1462 221 1461 243 1421 251 1417 255 1329 270 1346 287 1354 306 1342 348 1317 339 1313 330 1312 266 1316 258 1314 260 1214 137 1240 96ZM744 355L806 347 932 358 957 370 1019 414 945 526 829 472 800 468 801 453 796 434 743 370ZM557 1130L556 1156 536 1155 536 1148 505 1148 512 1138 489 1133 488 1141 464 1138 463 1147 455 1146 453 1158 449 1160 428 1157 428 1161 382 1152 388 1115 353 1109 350 1126 321 1087 329 1082 308 1051 317 1048 318 1036 325 1035 328 1025 343 1023 359 1026 354 1056 372 1059 385 1067 415 1063 415 1059 406 1057 405 1048 394 1039 360 1028 380 990 425 993 455 980 468 981 483 988 499 987 501 1028 512 1047 512 1059 509 1069 494 1084 514 1091 525 1087 557 1101ZM334 465L429 461 517 466 561 463 564 460 572 414 561 379 561 322 565 316 601 320 564 314 609 317 667 295 684 298 696 308 702 309 709 302 729 261 734 259 705 310 693 312 680 301 667 305 646 350 617 484 621 505 630 506 631 513 615 556 598 580 595 581 594 567 580 566 573 560 564 569 521 560 522 513 492 512 470 509 470 504 460 505 460 523 454 522 454 510 433 501 436 497 423 490 430 463ZM69 1115L79 1099 103 1015 125 1026 143 1022 145 925 166 917 193 912 220 956 215 956 210 1011 218 1013 214 1036 231 1045 230 1080 225 1094 225 1107 220 1116 226 1122 217 1183 203 1181 200 1203 182 1201 183 1191 176 1189 144 1183 135 1186 124 1183 123 1176 131 1145 107 1137ZM146 825L187 830 196 812 246 811 246 802 252 803 254 794 264 797 283 727 334 734 337 720 352 728 348 730 346 746 353 759 360 762 359 769 393 820 360 849 342 872 247 903 194 912ZM1011 431L1022 412 985 387 1084 456 1081 460 1084 465 1070 504 1088 642 1094 649 1089 653 1090 670 1102 672 1121 656 1143 703 1132 753 1074 703 1072 697 1091 672 1041 651 1020 628 1022 589 981 550 945 526ZM728 818L656 820 685 735 776 727 779 682 802 636 874 674 836 761 805 806 793 837ZM1629 666L1642 665 1679 674 1786 707 1815 775 1741 796 1671 794 1637 756 1581 676ZM618 559L616 553 631 513 630 506 621 505 617 484 646 350 665 308 686 312 703 335 704 347 713 365 709 395 710 474 707 489 721 494 749 493 785 497 784 515 756 509 752 501 743 494 721 494 707 489 707 486 683 490 649 579 645 626 629 624 623 614 623 594 611 581ZM1300 718L1308 720 1299 739 1287 755 1262 777 1227 781 1149 767 1132 753 1143 703 1121 656 1192 642 1231 649 1245 656 1256 667 1286 713ZM849 731L889 645 949 680 974 635 988 595 984 590 986 555 1022 589 1020 628 1041 651 1090 672 1075 693 1017 709 1014 713 1011 742 872 728ZM1630 517L1637 507 1658 502 1823 539 1828 543 1838 639 1849 671 1837 640 1827 555 1823 563 1794 582 1708 633 1702 633 1674 622 1654 603 1616 588ZM1467 268L1498 268 1510 232 1537 237 1543 211 1542 170 1543 204 1569 212 1589 229 1603 232 1614 239 1618 257 1612 289 1624 292 1652 257 1656 257 1665 264 1676 295 1664 308 1647 298 1624 292 1622 309 1610 341 1564 323 1556 343 1460 313 1455 296 1460 277ZM443 364L472 357 478 352 487 322 500 319 497 304 527 306 564 314 559 320 559 376 570 414 561 460 519 465 466 462 466 441 470 425ZM347 360L405 350 462 329 467 287 462 202 456 181 412 105 437 90 469 82 484 122 477 126 482 148 486 148 487 159 502 191 502 195 483 200 478 207 484 225 482 244 491 267 493 293 500 319 487 322 477 353 442 366 435 390 413 392 383 405 355 422 349 433 334 426 351 361ZM1183 977L1203 926 1385 1072 1392 1073 1459 1053 1440 1105 1428 1100 1419 1103 1385 1092 1363 1154 1339 1144 1326 1162 1315 1155 1348 1107 1221 993ZM1581 676L1536 686 1535 683 1522 637 1541 565 1541 553 1572 535 1630 510 1635 502 1634 496 1636 505 1630 517 1616 588 1636 662 1628 667ZM1285 30L1296 14 1314 18 1390 -6 1465 12 1509 29 1455 10 1395 -4 1301 23 1421 71 1445 73 1468 65 1494 97 1501 114 1501 125 1466 128 1471 163 1453 162 1449 170 1429 149 1423 208 1413 202 1414 185 1404 182 1388 204 1373 197 1371 201 1350 187 1352 182 1371 143 1393 149 1401 126 1405 123 1378 86 1373 104 1378 86 1387 78 1340 60 1329 59 1315 50 1299 33ZM1199 1200L1207 1172 1203 1168 1220 1145 1231 1152 1220 1165 1230 1171 1241 1157 1269 1175 1254 1193 1253 1199 1229 1202ZM732 134L745 133 768 142 784 158 799 248 800 265 794 303 797 342 802 344 816 317 846 288 841 323 846 336 861 350 795 347 744 355 755 291 741 246 741 175ZM525 1086L514 1091 494 1084 509 1069 512 1059 512 1047 501 1028 499 987 513 987 519 980 539 974 537 903 630 900 631 945 589 949 532 1079ZM1722 68L1756 2 1764 -4 1778 5 1823 90 1827 126 1823 194 1799 180 1777 161 1793 137 1790 131 1757 107 1713 90ZM777 1108L845 1106 845 1024 847 1108 918 1107 863 1202 847 1194 777 1194ZM353 728L383 737 419 753 426 713 433 721 454 678 473 690 488 719 499 721 439 804 407 813 393 822 359 769 360 762 353 759 346 746 348 730ZM351 665L354 666 358 655 364 657 370 642 365 640 372 626 393 623 449 636 472 657 521 690 579 611 605 583 545 655 502 722 488 719 473 690 454 678 433 721 421 708 389 691 390 682 386 676 375 673 366 664ZM814 84L833 64 838 68 837 80 917 106 870 181 855 173 854 168 784 150 801 102ZM1112 650L1125 646 1141 635 1238 550 1265 517 1282 502 1361 441 1361 444 1269 514 1240 550 1268 685 1286 712 1293 717 1306 719 1286 713 1256 667 1245 656 1231 649 1192 642 1121 656ZM522 302L526 226 537 227 541 261 546 267 616 246 645 249 647 304 601 317ZM724 50L756 47 780 37 786 64 814 84 801 102 781 152 754 136 732 132 727 109ZM576 182L577 190 610 191 611 204 620 199 616 225 632 225 632 228 628 228 628 238 644 239 645 249 616 246 546 267 543 265 536 236 537 227 526 226 532 179ZM1847 1085L1874 1027 1919 1049 1967 1059 1986 1070 2006 1091 2005 1094 2000 1094 1977 1090 1983 1089 1984 1073 1972 1076 1961 1072 1959 1077 1922 1057 1917 1064 1913 1063 1902 1080 1904 1084 1925 1104 1950 1116 1938 1153 1927 1154 1885 1095 1864 1110ZM1754 798L1754 793 1814 775 1848 857 1865 881 1864 912 1824 912 1817 909 1816 892 1820 891 1821 878 1809 869 1800 811 1793 802 1788 810 1789 856 1782 857 1781 810 1757 812ZM1651 926L1663 824 1660 850 1666 852 1671 828 1683 826 1693 819 1690 853 1714 854 1710 894 1696 892 1694 909 1687 924 1682 923 1680 936ZM526 226L522 302 496 300 491 267 482 244 484 225 478 210 483 200 502 195 493 169 550 172 551 167 577 169 576 182 532 179ZM656 57L652 51 662 55 724 141 733 139 739 165 734 165 725 157 708 166 704 229 719 233 719 211 733 214 737 244 735 250 732 245 713 234 688 227 692 187 688 186 685 128 674 128 670 84 667 83ZM607 580L623 594 622 610 629 622 629 636 658 641 641 640 642 664 638 664 638 669 620 669 608 664 604 674 586 674 578 649 567 641 558 639ZM279 894L342 872 375 834 407 813 464 799 442 804 442 827 424 827 425 850 369 866 313 889 319 907 294 915 293 910 277 908ZM85 732L94 731 96 725 100 727 107 713 103 711 112 690 105 687 107 681 129 686 156 672 163 672 174 677 189 694 235 638 257 651 229 685 195 712 179 720 138 733 105 732 89 738ZM109 497L131 423 166 451 191 480 180 493 172 497ZM196 628L261 588 271 593 266 598 268 600 281 606 276 615 269 612 257 624 246 618 230 643ZM47 289L70 285 65 233 110 245 105 292 106 319 65 320 59 287ZM376 245L377 233 397 244 415 267 448 268 444 200 440 187 426 164 440 155 456 181 462 207 465 283 416 279ZM1281 45L1293 32 1299 33 1315 50 1329 59 1343 61 1369 117 1324 99ZM219 1164L226 1122 220 1116 225 1107 225 1094 230 1080 231 1045 214 1036 218 1014 249 1018 258 1016 262 1018 259 1050 238 1050 237 1057 234 1057 227 1115 247 1117 240 1167ZM1906 323L1944 319 1938 343 1927 350 1907 348 1899 377 1883 373 1880 384 1898 386 1897 390 1892 389 1892 394 1879 392 1878 397 1868 396 1865 417 1848 425 1846 453 1846 408 1852 395 1875 382 1892 341 1905 329ZM256 651L264 645 271 648 268 663 282 666 269 664 268 683 249 679 242 711 244 738 213 725 196 711 229 685ZM1512 1067L1637 1081 1639 1071 1696 1059 1735 1046 1769 1051 1781 1049 1805 1014 1811 1017 1815 1028 1791 1060 1786 1060 1796 1043 1792 1041 1781 1059 1730 1054 1660 1074 1638 1090 1516 1072ZM65 780L59 790 62 792 48 783 67 755 75 731 85 730 102 755 105 754 108 759 128 770 119 780 140 813 102 810 93 806 93 769 97 750 89 741ZM291 1050L267 1018 264 1020 258 1016 249 1018 210 1011 213 979 233 979 234 973 281 1035 329 1023 325 1035 318 1036 317 1048 308 1051 302 1047 293 1053ZM147 588L169 542 190 540 190 549 180 549 178 555 188 559 187 564 175 563 175 579 210 581 201 608 166 606 158 603 162 593ZM234 638L246 618 264 631 275 619 281 606 334 620 335 623 266 643 257 651ZM269 663L273 648 264 645 266 643 358 617 353 626 349 622 335 625 334 638 331 638 328 647 320 644 322 634 313 635 310 643 313 663 293 654 289 668 294 669 288 688 341 707 269 683 268 674 280 675 282 666ZM775 691L728 682 693 681 695 646 765 674 778 682ZM313 513L329 468 371 467 365 500 348 493 337 509 328 508 326 516ZM209 394L210 345 260 347 259 377 214 377 214 400 209 400ZM104 369L106 335 132 335 152 341 149 356 144 359 143 372ZM802 636L806 629 824 638 828 631 881 659 888 645 898 650 906 636 919 644 912 658 889 645 874 674ZM20 822L65 758 53 758 53 751 68 751 48 783 65 793 47 835 41 832 35 843 22 830 25 825ZM1640 960L1651 926 1674 934 1669 954 1686 959 1683 973 1674 971 1674 976 1666 975ZM645 650L645 640 695 646 693 674 672 674 672 663 663 662 662 672 646 671ZM194 480L208 454 208 423 214 423 213 446 265 446 273 424 276 426 268 452 233 451 280 479 275 485 213 450 201 477 216 486 211 495ZM1788 983L1792 969 1802 972 1806 959 1803 958 1802 951 1805 947 1821 951 1822 948 1827 948 1825 958 1832 959 1820 998ZM1154 967L1160 949 1167 948 1175 925 1185 928 1187 920 1199 925 1180 976ZM1784 1041L1782 1046 1774 1048 1764 1047 1762 1044 1757 1046 1731 1036 1719 1036 1725 1025 1732 1022 1738 1013 1762 1015 1761 1029 1771 1030 1771 1038Z'/%3E%3C/svg%3E"); --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.045'/%3E%3C/svg%3E"); } /* ---------------------------------------------------------------- 0. the inversion * * THE PAGE INVERTS, and it is a page-level beat rather than one section's local trick. * * The bar does this: shots/ref/home-d-02.png is the same site flipped whole to a bone ground, * black chip and all, and shots/ref/home-d-05.png flips it back to near-black for a footer with * the wordmark set edge-to-edge. Ours had the instinct already — travel.css swapped seven tokens * inside .travel — but it was written as an exception, and it had the same flaw the dark side * had: --ink and --ink-2 were BOTH #F2EEE6, so the light band was as flat as the dark one. A * panel on the sheet was distinguishable only by its border, which is the round-1 critique * restated on white. * * So this is now a mode, with its own measured ladder. It took TWO sections, .proof and .get, * and it now takes ONE. * * .proof became .founders, which is a DARK dossier panel, so the inversion is now spent entirely * on the ask. That is a deliberate trade and it is worth being honest about the cost: the page's * light half is now one section instead of two, and the dark run from the hero to the dossier is * correspondingly longer. What it buys is that the ONE paper surface left on the page is the one * carrying the CTA, arriving straight off the darkest panel on the site — the page's single * inversion and its single ask are now the same event. Taking it is the cheapest way to answer the * blind read that "the entire image lives in two bands": a page with a light half has, by * construction, a value structure at page scale and not merely at panel scale. * * Direction note. On the dark side a plane rises by getting lighter. Paper cannot do that — you * cannot add light to a sheet — so on the light side every rung above the ground is a deeper * TINT, and the ladder runs the other way. The rungs are stated in delta-L*, not as ratios: * an L* ratio near white is meaningless (93 -> 88 is 1.05x and plainly visible), whereas * delta-L* is the same perceptual unit at both ends of the scale, which is what lets the two * halves of the page be compared at all. * * token L* dark-side twin role on paper * --ink 93.10 L* 3.5 the sheet * --ink-2 88.61 L* 15.9 a plane laid on the sheet dL* 4.5 * --ink-3 82.00 L* 20.7 a panel standing on the plane dL* 6.6 * --ink-4 74.55 L* 31.0 raised: bar grounds, gauge tracks dL* 7.5 * --bone 13.99 L* 93.1 type, at 13.11:1 on the sheet */ .invert, .get { --ink: #EFEBE1; /* L* 93.10 — the sheet */ --ink-0: #E4DED1; /* L* 88.61 — the well, inverted: a tint, not a hole */ --ink-2: #E4DED1; /* L* 88.61 — dL* 4.5 */ --ink-3: #D4CBBB; /* L* 82.00 — dL* 6.6 */ --ink-4: #C2B6A3; /* L* 74.55 — dL* 7.5 */ --bone: #28231A; /* L* 13.99 — 13.11:1 on the sheet */ --bone-2: #534A3C; /* L* 31.95 */ --slate: #847B6C; /* L* 52.01 — the midtone rung, and the ONE value that is the same on both halves of the page, so muted type reads as the same rank either side of the flip */ --slate-2:#6A6255; /* L* 41.93 */ --hairline: rgba(40, 35, 26, 0.11); /* over the sheet: L* 85.3 */ --hairline-strong: rgba(40, 35, 26, 0.24); /* L* 75.9 */ --hairline-hi: rgba(40, 35, 26, 0.40); /* L* 64.0 */ /* A signal colour is a relationship to its ground, not a hex. The dark side's signal is Claim red, and #D64525 itself measures 3.72:1 on the sheet — round 1 asserted 4.4:1 and was wrong — which fails a 12.6px mono label. So the paper side takes the printing-ink form of the same hue two rungs down: #B0361A, 5.21:1 on the sheet and 4.42:1 on a panel. Every accent rule below therefore flips with the section for free. */ --signal: #B0361A; --signal-dim: #8E2A10; --signal-soft: rgba(176, 54, 26, 0.12); --graticule: transparent; /* the paper draws its own ruling */ --ink-lift: transparent; /* Not decorative. `color` inherits its COMPUTED value, so redefining --bone inside the section does not retint anything that merely inherits from — it stays bone-on-bone and vanishes. Restating it here re-resolves the token at the section boundary and every descendant inherits the flip. */ color: var(--bone); } /* The mode has to actually PAINT, or a section that only redefines tokens shows the body ground through — and then sets dark type on it, because the tokens say the ground is light. This bit the page twice. First .get, which redefined tokens and painted nothing. Then .proof, when the inversion moved to it from .travel: it inherited the light-side tokens, kept the dark body ground, and rendered a 57.6px headline in near-black on near-black. .proof has since been replaced by the dark .founders and is off both lists. THE TWO-LIST TRAP IS NOW CLOSED. This rule used to name .get alone, and the note above it read "anything ADDED to the `.invert, .get` block must be added here too, or it will land in exactly that state" — an instruction that had already been missed twice by the same file. `.invert` paints here as well, so taking the utility is now sufficient by itself and the two lists cannot drift apart again. .get keeps its own entry because it does not carry the class. */ .invert, .get { background-color: var(--ink); } /* ---- .on-ink: the inversion's inverse ---- * * A patch of DARK ground standing inside an inverted section, for chrome that sits on media * rather than on the sheet. Section 003 is the case that produced it: a paper section holding a * near-black video, with the game's own telemetry drawn over the video. Everything in that * overlay reached for --bone and --bone-2 and got the paper ladder's near-blacks, because the * section above it had rebound them — so the readout rendered dark type on a dark plate and was * invisible over the picture's bright half. * * That is the SAME failure this file's note twelve lines up describes .get and .proof hitting, * arriving from the opposite direction: there, light tokens over a dark ground; here, light-mode * tokens over dark media. The fix is the same shape — restate the ladder at the boundary — so it * is written once, as a utility, rather than as a pile of overrides inside one section's rules. * * It restates the DARK side, which is to say the :root values. Duplicating them is the cost of * CSS having no way to say "resolve this token as an ancestor would have"; keep it in step with * css/tokens.css, and keep it to the tokens chrome on media actually reads — type, the midtones * and the hairlines. Grounds are not here on purpose: what an .on-ink element sits on is the * media, and it should paint its own fill rather than inherit a page ground it is not on. */ .on-ink { --bone: #F2EEE6; --bone-2: #E8E3D8; --slate: #8B8F98; --slate-2:#8B8F98; --signal: #FF6A48; --signal-dim: #C3310D; --signal-soft: rgba(214, 69, 37, 0.14); --hairline: rgba(242, 238, 230, 0.08); --hairline-strong: rgba(242, 238, 230, 0.16); --hairline-hi: rgba(242, 238, 230, 0.30); /* `color` inherits its COMPUTED value, so rebinding --bone here does not retint anything that merely inherits from the section — it would stay paper-black on the plate and vanish. Same restatement, same reason, as the one at the foot of the .invert block above. */ color: var(--bone); } /* ---------------------------------------------------------------- 1. the ground */ /* Two layers now, not four: grain, and one broad warm lift behind the top of the page. Both are fixed, so the ground stays put while the page travels over it. The lift is the file's only gradient and it is doing tonal falloff over what is effectively media, which is the use the brief reopened. Measured on the composite it carries the ground L* 3.5 -> 7.4 -> 3.5 across the viewport, which is a readable horizon rather than the "vignette so faint it reads as compression noise" that round 1 shipped. */ html { background-color: var(--ink); } body { background-color: var(--ink); background-image: var(--grain), var(--survey), radial-gradient(130% 62% at 50% 4%, var(--ink-lift) 0%, transparent 72%); background-repeat: repeat, no-repeat, no-repeat; background-size: auto, cover, auto; background-position: 0 0, 50% 38%, 0 0; background-attachment: fixed; } /* Tonal steps between sections. The rule is depth: the nav and the footer are the page's two edges and they sit BELOW the page in the stack, so they take the well value; the body of the page sits on --ink; anything standing on the page takes --ink-2. */ /* The survey runs UNDER these two as well. A blind critic caught the field stopping dead at the header seam — the one place the bar's own ground does not stop. Both bands keep their --ink-0 fill; the survey rides on top of it at the same FIXED viewport anchor as the body's, so the lines cross the seam in register rather than restarting. */ .nav, .footer { background-color: var(--ink-0); background-image: var(--survey); background-repeat: no-repeat; background-size: cover; background-position: 50% 38%; background-attachment: fixed; } /* ...except over the hero, where the nav carries no ground at all. A blind composition critic put it exactly: the opaque slab "turns the hero into three stacked bands (bar / image / text block)". The bar's nav has no ground either — its wordmark and Menu sit straight on the photograph, which is what lets the image own the whole frame. So the nav floats while the hero is on screen and takes the well value the moment it is over content, which is also when it needs one for legibility. `body[data-scrolled]` is already written by the IntersectionObserver in js/main.js for the wordmark square, so this costs no new machinery. The border goes too: a rule under a floating bar is the band we are trying to remove. */ body[data-scrolled="hero"] .nav { background: transparent; border-bottom-color: transparent; } /* ---- THE PLANE ---- This is the change the round-1 blind read turned on. The board's fill and the page ground were the same token, so the map was defined by a hairline and by nothing else, and — the critic's words — nothing in the frame was in front of anything else. The board now sits on --ink-2: L* 15.93 against a page at L* 3.47, a 4.59x L* step, delta-L* 12.5. That is the rung the whole ladder was built to produce, and it is the one you can check by hiding the border. (The WCAG figure for the same pair is 1.32:1, and it is not a useful number: the +0.05 flare term in that formula makes every near-black pair look identical. A 2.5:1 WCAG step off this ground would put the board at L* 35, which is a lit interface, not a city at night.) Written as a local --ink override rather than as `background: var(--ink-2)` on purpose. css/carto.css paints the board with `background: var(--ink)`; rebinding the token underneath it means the cartography lane keeps its own rule, keeps ownership of it, and cannot be broken by this file editing around it. Anything else inside the board that resolves --ink now resolves to the plane it is actually standing on, which is also correct. Plus a falloff of its own, so the plane is not a flat number either: it lifts to about L* 21 under the centre and falls back to the plane value at the edges, which is where the readout and the frame's corner marks sit. A plane with a single value is the same mistake one rung up. */ .carto { --ink: var(--ink-2); background-color: var(--ink-2); background-image: radial-gradient( 88% 128% at 50% 46%, rgba(214, 69, 37, 0.085) 0%, transparent 72% ); } /* The scrim's --ink is the PAGE ground (L* 3.5), not the board's (L* 13.9) — it is a sibling of .hero__map, not a child, so it does not pick up the plane override. That is the behaviour you want: the veil sinks the board's top and bottom edges back down toward the page, which is what makes the plane read as bedded into the page rather than pasted on it, and it leaves the middle 48% almost untouched so the network keeps its own range. Every weight came down from round 1 (74/26/18/62/93 -> 62/14/8/48/88) because the ground it mixes toward is now 40% darker in luminance, so the same percentage removes far more light than it used to. */ /* ---------------------------------------------------------------- 2. the edge */ /* ---- .edge: the cut, on its own ---- Geometry only, no fill and no outline, so it composes onto anything: media, a chip, a plate. Default corner is bottom-right, which is where the bar puts it on panels, media and the CTA. */ .edge { clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100% ); } .edge--tr { clip-path: polygon( 0 0, calc(100% - var(--chamfer)) 0, 100% var(--chamfer), 100% 100%, 0 100% ); } .edge--bl { clip-path: polygon( 0 0, 100% 0, 100% 100%, var(--chamfer) 100%, 0 calc(100% - var(--chamfer)) ); } /* Opposite corners. This is the one that reads as a cut sheet rather than as a styled div, and it is the direct replacement for .hud-corners--two, which marked the same two corners. */ .edge--pair { clip-path: polygon( var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer) ); } .edge--lg { --chamfer: var(--chamfer-lg); } /* ---- .panel: a chamfered surface with a true 1px outline ---- A border and a clip-path do not cooperate — the clip slices the border off across the cut and leaves the corner open. The fix is to paint the outline as the element's own background and float the fill 1px inside it on a pseudo-element. The inner cut is NOT the same size as the outer one. Outer diagonal is x+y = W+H-C; the inner box is inset 1px all round so its diagonal is x+y = W+H-2-c. Setting the perpendicular gap between them to 1px gives c = C - 2 + sqrt(2) = C - 0.586. Get this wrong and the ring is a different weight on the diagonal than on the four straight edges, which is the exact tell that separates a drawn chamfer from a real one. */ .panel { position: relative; border: 0; background-color: var(--edge-line, var(--hairline-strong)); background-image: none; /* a .panel does not also wear corner brackets */ clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100% ); } .panel::before { content: ""; position: absolute; inset: 1px; z-index: 0; background: var(--panel-fill, var(--ink-2)); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - (var(--chamfer) - 0.586px)), calc(100% - (var(--chamfer) - 0.586px)) 100%, 0 100% ); } /* Content has to clear the fill, which is a pseudo-element and therefore paints after the parent's own background but before nothing at all. */ .panel > * { position: relative; z-index: 1; } .panel--pair, .panel--pair::before { clip-path: polygon( var(--chamfer) 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%, 0 var(--chamfer) ); } .panel--pair::before { clip-path: polygon( calc(var(--chamfer) - 0.586px) 0, 100% 0, 100% calc(100% - (var(--chamfer) - 0.586px)), calc(100% - (var(--chamfer) - 0.586px)) 100%, 0 100%, 0 calc(var(--chamfer) - 0.586px) ); } /* A panel being pointed at gets the heavier line rather than a fill change, because changing a panel's fill on hover moves its type's contrast with it. */ .panel--hi { --edge-line: var(--hairline-hi); } /* ---- .registered: the offset outline ---- The bar's media panels carry a second hairline outline sitting a few pixels out from the plate, unfilled and slightly larger, like a die-cut registration mark — see shots/ref/ orig-d-00.png, where it stands about 16px off the image on three sides. It is the cheapest depth cue on that page: one line, no shadow, no gradient, and the plate reads as a physical thing laid on the ground rather than a hole cut in it. */ .registered { position: relative; } .registered::after { content: ""; position: absolute; inset: calc(var(--register-gap, 14px) * -1); border: 1px solid var(--hairline); pointer-events: none; z-index: -1; clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--chamfer-lg)), calc(100% - var(--chamfer-lg)) 100%, 0 100% ); } /* ---- .chip: the primary action, and the answer to "default dark-tactical accent" ---- * * The bar's CTA is a solid acid-lime rectangle with a cut corner and dark mono type, and it is * the loudest object on a 2,046-element page. Round 1 built the identical object in amber and * was told, blind, that amber-on-dark is the most default accent available. It is — see the * arithmetic in tokens.css for why the hue is nearly forced. * * So the chip stops being a coloured button. It is PAPER: --bone at L* 93.1, 16.38:1 on the * ground, which is the highest-contrast object sRGB can put on this page and measurably louder * than the bar's own lime chip at 16.0:1. Behind it, offset 4px on both axes — one space unit — * sits a hard * signal-yellow duplicate of the chip's own chamfered silhouette — a registration misprint, * the same die-cut idea as .registered, in colour instead of in line. * * Why the cut is a gradient here and a clip-path everywhere else. The obvious build is * `clip-path` + `filter: drop-shadow`, and it renders nothing: the painting order in the * filter-effects spec is filter FIRST, then clip-path, so the clip removes the shadow it was * supposed to keep. Shot and confirmed — the computed style read * `drop-shadow(rgb(255,209,23) 3px 3px 0px)` and not one yellow pixel reached the screen. * A `box-shadow` fails the same way, and worse: it would draw the un-cut rectangle. * * So the chip's fill IS the cut. `linear-gradient(135deg, fill S, transparent 0)` leaves alpha 0 * beyond the stop, drop-shadow takes its silhouette from the element's rendered alpha, and the * offset copy therefore carries the chamfer with it. The stop needs the diagonal correction: * a 135deg gradient line in a W x H box is (W+H)/sqrt2 long, so a corner cut of C sits at * 100% - C/sqrt2, i.e. `calc(100% - var(--chamfer) * 0.70711)` = 8.49px at our 12px chamfer. * Get that factor wrong and the cut is 12px on the shadow and 17px on the fill. * * What this buys: the accent's largest appearance on the page is now 4px wide. The yellow is * otherwise spent only on marks — section squares, the live field, the wordmark square — so it * reads as a signal rather than as a theme colour, which is the bar's actual trick (24 of 2,046 * elements, ~1.2%) and not its hue. */ .chip { background-color: transparent; background-image: linear-gradient( 135deg, var(--bone) calc(100% - var(--chamfer) * 0.70711), transparent 0 ); color: var(--ink); clip-path: none; filter: drop-shadow(4px 4px 0 var(--signal)); transition: filter var(--dur-micro) var(--ease); } /* Hover presses the sheet down onto its own register, the way you would flatten a proof. */ .chip:hover { filter: drop-shadow(1px 1px 0 var(--signal-dim)); color: var(--ink); } /* ---- .btn--primary: Brand Guidelines v3's primary action ---- * Claim 600 fill with Bone type (4.82:1, where Bone on Claim itself is 3.83:1), and v3's G3 * halo. It keeps the chamfer, and it is cut the same way the paper chip is — the fill IS the cut, * via the 135deg gradient — because the halo is a drop-shadow, which takes its silhouette from * the rendered alpha. A box-shadow would glow round the un-cut rectangle. One per screen. */ .btn--primary { background-color: transparent; background-image: linear-gradient( 135deg, var(--claim-600) calc(100% - var(--chamfer) * 0.70711), transparent 0 ); color: var(--on-claim); clip-path: none; filter: drop-shadow(0 0 11px var(--g3-claim)); transition: filter var(--dur-micro) var(--ease); } .btn--primary:hover { filter: drop-shadow(0 0 16px rgba(255, 90, 54, 0.6)); color: var(--on-claim); } .chip { display: inline-flex; align-items: center; gap: var(--s-2); } /* Outline form, for a second action that must not compete with the filled one. Cut from the ladder rather than from the palette — a --hairline-hi edge is rung L* 33.7, not a colour. */ .chip--ghost { background-image: none; color: var(--bone); filter: none; box-shadow: inset 0 0 0 1px var(--hairline-hi); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100% ); } .chip--ghost:hover { box-shadow: inset 0 0 0 1px var(--bone); } /* ---------------------------------------------------------------- 3. bindings * * Everything below applies the vocabulary above to the markup as it stands today. It is * separated so the orchestrator can see exactly which of these belong in someone else's file * once the utility classes reach index.html. */ /* ---- accent placement ---- The measured problem: Claim red appeared on four elements sitewide, all of them under 6px, so the page had no accent. The measured target: the bar carries its accent on 24 of 2,046 elements — roughly 1.2% — spent on exactly four kinds of thing, which is the part worth copying. Those four kinds are: the CTA chip, mono index/section labels, small square marks, and live data on the map. Ours follows the same four. Territory colour on the board stays Claim red, because on the board red means "yours" and that meaning is not the site's to spend. */ .btn--primary .btn__kicker { opacity: 0.8; } .btn--primary .btn__action { font-weight: 500; letter-spacing: 0.16em; } /* The nav action was a yellow outline with yellow type. Two filled-or-coloured versions of the same button on one screen is what makes an accent read as a theme, so the nav's is now cut from the ladder instead of from the palette: bone type on a --hairline-hi edge (L* 33.7), which is a rung, not a colour. It gains the signal only on hover, where it becomes the paper chip in miniature. */ .nav__cta { color: var(--bone); border-color: var(--hairline-hi); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100% ); } .nav__cta:hover { background: var(--bone); color: var(--ink); border-color: var(--bone); } .nav__links a:hover { color: var(--bone); } /* (ii) mono section labels are Slate 2, with no square in front, per Brand Guidelines v3. They used to carry the accent (the reference's behaviour), but in Claim red they measured 4.40:1 and failed AA at 12.6px, and they spent red on every screen that the button needs to itself. v3 keeps red for yours, for live, and for the one primary action. */ .section-label { color: var(--slate-2); letter-spacing: 0.16em; } /* (iv) live data. The hero readout's last field is a state, not a coordinate, so it is the one that carries colour — "BOARD LIVE" in amber beside two bone-grey numbers. */ .hud-readout span:last-child { color: var(--signal); } ::selection { background: var(--signal); color: var(--ink); } :focus-visible { outline-color: var(--signal); } /* The instrument's title strip takes the raised rung. Before this it was a hairline rule and nothing else, so a window was one value from bar to base; now the bar sits dL* 7.5 off the panel fill and the panel sits dL* 4.5 off the sheet, which is a three-plane object built out of the same ladder the page uses. This is also where --ink-4 earns its keep: it is the rung with real area in the 25-60% band the round-1 build had nothing in. */ .window__bar { background: var(--ink-4); }