/* lx-fallback */ /* color-mix()/svh/dvh: fallback value in the rule, modern value in the @supports copy right after it (css_fallbacks.py) */ /* ========================================================================== SKHAI Luxury — bridge layer (child theme, flag-gated, loads after system.css) Neutralises the legacy global CSS where it conflicts, WITHOUT deleting it: every rule is scoped to body.skx-lux, so the classic path is untouched. 01 Font aliasing 05 Forms (CF7, intl-tel-input) 02 Base + typography 06 Breadcrumb, legacy chrome remnants 03 Focus 07 skhai-popup-plugin launcher + panel + popup 04 Buttons & links 08 AI chat widget · 09 project footer band ========================================================================== */ /* 01 ─ Font aliasing ───────────────────────────────────────────────────── Legacy CSS names Trirong / Cormorant / Manrope / DM Sans / Inter / Outfit / Brown in ~400 declarations. Rather than fight each selector, those family NAMES resolve to the Luxury files here (same 3 files, no extra download). Sans aliases are declared 400–500, so a legacy 200/300 request clamps to 400 and 600/700 to 500 (body never below 400). */ @font-face { font-family: "Trirong"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/bodoni-moda-normal-latin-o20.woff2) format("woff2"); } @font-face { font-family: "Trirong"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/bodoni-moda-italic-latin-o20.woff2) format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/bodoni-moda-normal-latin-o20.woff2) format("woff2"); } @font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/bodoni-moda-italic-latin-o20.woff2) format("woff2"); } @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(fonts/bodoni-moda-normal-latin-o20.woff2) format("woff2"); } @font-face { font-family: "DM Serif Display"; font-style: italic; font-weight: 100 900; font-display: swap; src: url(fonts/bodoni-moda-italic-latin-o20.woff2) format("woff2"); } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } @font-face { font-family: "BrownPopup"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } @font-face { font-family: "Jost"; font-style: italic; font-weight: 400 500; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } /* 01b ─ Baht (U+0E3F) and per-cent (U+0025) fix faces under the legacy alias names too, so legacy figures ("฿11.99M", "6–8%") get the same glyph strategy as the Luxury stacks (DESIGN-SYSTEM-CORRECTIONS §3). Descriptors MUST equal the alias face above (sans 400 500, serif 100 900): Chromium only composes unicode-range faces whose weight/style descriptors match, otherwise the family falls to the system font. */ @font-face { font-family: "Trirong"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMkAA4AAAAABfQAAALPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cOgZgP1NUQVREADwRCAqBPIE3CwgAATYCJAMMBCAFhFYHIBvyBMgEHkjv681ksgBzXvOglZQ9dOoAlucKQAV2cCf/n7+m3gEOvBp0ir/u3kXZoimwG3DA0wHd0SoEhwPfsbzyawCumtiDAOwIEDZi7vz8cmxQMMtiiegApFBZx59Pbls82o/RNdrRh9HfYg5imN0tPRjAGS17JeeIdeggV8hqouQlfqKRODH7lpS6tNJ1KdVSaEMZ0SNZRUVZXMJwmqFC/n1EfSpEeiHYSEvSR96hiQYSgcAmAx6Cm/zRwq5uUyhY2G52Cx2BCwpSlSKZdgka5mSDWAfy3Eyq7Mh4oB1z0ANFCGClJckN4KPgpGJ58ekqgFxKXVgsOGey1lCtAj5DnQ/Q1QJfUUoF2doqe91RtTrqDjOE/cqTh4S29OAJOzthv/LRI5YcvzeZ649Y8tCu0n7lA7H0ceevPhBL79vZNVjbWzXe2XmnKy6xPRH3qfaeNmkBp/xTvT3sp34q7JwQOz8l5Ibrb+15fnFW1WjleF1kdf7HrKzU2cU1kTOKts6a/SI/M/1GVngWAPsQa3Jevv/98QNNzhnfbDTtPS4/2PDqTOL0ImXt7n/G/xDlpB5Ftlo/fgv0Rjq9/xkWQzmdBXNrmqym8QYqMpqJA40al3Ch/zRnqCxJ2p4V524qW5nbIpIKjyBI+HgkTsLOozGTOx5FFLs8On4s81gRRrXbiSQmRgiFA14pHTtJMCSLV6GQIUYZoIV+quihHZNuBB0YujCyXjcxGWaMNKKJZow2RulhGFO4ohjL9BM1xWAX0RQxn/wpG02GKKMDmOqkHEOLuBxJKR10MU4/LYxSOYgmeDTEIAZxRBFDDHFi28C6IZMZUzr/Kp0siigii/QtzKmssGzjHIYYZnEXuSC0ZUTVOMBuB4Y+FJPGIXrpoA2WmcX4paLr2j+GQcgFQxdGg7fGaSWKNoYYIJrByeTOa0JXL0cD0HbU0L94EJZdxOEC) format("woff2"); unicode-range: U+0E3F; } @font-face { font-family: "Trirong"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAN0AA8AAAAABuQAAAMcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cKAZgP1NUQVRIADwRCAqCVIIuCw4AATYCJAMYBCAFhRQHIAwHG6wFyAQe+Dzr/SQDOCu1HdnbDjIr4nABcKKO8I3IxDX183zgqQPclPaZtA6KSLICi6b/0d9sAL5pRefk3qi4D6d1BwKwJ9B8IDKyCiqwRUHXdb2gbnDDNUFCrXtv6+R+nM0JyWNFShHrsQJppVQDMX/lJpoIE84Vko2VbGOtCvJ+0BFV64k/LiouyuQyKsPk3f/PgnJcZKmwqePgVemzeqciIxDYIgGeJjA0Na17/OShvTRPbu0VVgg8UURxSViPOyADeoQQ60E6fwGVBM8AX9kURoLWrAA+CmI+hJbWX+vPBWRbZaHruOzI1kFH0I6rADhP8j7FuYQkpFo/ja4riqK4urq6KrV2LrZtTnaOM2aOmdEyetaoypVPnogFT586rHr8mPmPHuWtOvdULHhy1n7l6UfMf3ym/tYXosdh/NzMl2Ne3vLVDmveX6/7RlyP8Y24vtC3+IPFcMMmvCTcUJ+YaGgoCQ8PLw03NCQmGupLw4cGBjkX5Rc4FwcFBgU5FRfkOxUFcaNJaMaBj/EHPsIIZO7AuzHgAzYI8eqlqDXqP+U26Tc5M0nkhHucj212SfhmK8vvzdTDZ/tXr14+l65F/J/9/6yVWZnJVJaeG/kujFht/j/7v62V+QnQca+1PIp5Yhu+DvdBAXfS8gaMouOsacGGadjWEZTDkCNbnzyvPLfoeZG2cwh8xWg/os4iEA6ZBJ7j74l0Gg4r4pjrsGY4NXZnohjMi34kb6yJ9hqEFY7Yg7M2jaAMjT5a6SeXyaZnL2baqaaz3M14JmedkxlgEnEYTaNJtDMRMwNMZhIGBM30ao81JtKNkWKyKPAfm2ljIp2kodFhWe3HzDjK6KSbKfTSykSq6LTw2vgt6yphGDBhIpJ4uuliMhoavVZlPSYMxGI7jHAa295ULV/qRGvXUUQxRWQSP7IpB3P1VpuOxgAzeJC08Dm8MhFKGCoVjBfPOdZXJUxEw0In7fXCqUwhjrPcPwmVkfTD3Zhv1k6hDQPtTw+/gHPiulW4k66W8WezbuzVe1zYyKi/EeYc0ncTRlx9WuhLDitrAAA=) format("woff2"); unicode-range: U+0025; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMkAA4AAAAABfQAAALPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cOgZgP1NUQVREADwRCAqBPIE3CwgAATYCJAMMBCAFhFYHIBvyBMgEHkjv681ksgBzXvOglZQ9dOoAlucKQAV2cCf/n7+m3gEOvBp0ir/u3kXZoimwG3DA0wHd0SoEhwPfsbzyawCumtiDAOwIEDZi7vz8cmxQMMtiiegApFBZx59Pbls82o/RNdrRh9HfYg5imN0tPRjAGS17JeeIdeggV8hqouQlfqKRODH7lpS6tNJ1KdVSaEMZ0SNZRUVZXMJwmqFC/n1EfSpEeiHYSEvSR96hiQYSgcAmAx6Cm/zRwq5uUyhY2G52Cx2BCwpSlSKZdgka5mSDWAfy3Eyq7Mh4oB1z0ANFCGClJckN4KPgpGJ58ekqgFxKXVgsOGey1lCtAj5DnQ/Q1QJfUUoF2doqe91RtTrqDjOE/cqTh4S29OAJOzthv/LRI5YcvzeZ649Y8tCu0n7lA7H0ceevPhBL79vZNVjbWzXe2XmnKy6xPRH3qfaeNmkBp/xTvT3sp34q7JwQOz8l5Ibrb+15fnFW1WjleF1kdf7HrKzU2cU1kTOKts6a/SI/M/1GVngWAPsQa3Jevv/98QNNzhnfbDTtPS4/2PDqTOL0ImXt7n/G/xDlpB5Ftlo/fgv0Rjq9/xkWQzmdBXNrmqym8QYqMpqJA40al3Ch/zRnqCxJ2p4V524qW5nbIpIKjyBI+HgkTsLOozGTOx5FFLs8On4s81gRRrXbiSQmRgiFA14pHTtJMCSLV6GQIUYZoIV+quihHZNuBB0YujCyXjcxGWaMNKKJZow2RulhGFO4ohjL9BM1xWAX0RQxn/wpG02GKKMDmOqkHEOLuBxJKR10MU4/LYxSOYgmeDTEIAZxRBFDDHFi28C6IZMZUzr/Kp0siigii/QtzKmssGzjHIYYZnEXuSC0ZUTVOMBuB4Y+FJPGIXrpoA2WmcX4paLr2j+GQcgFQxdGg7fGaSWKNoYYIJrByeTOa0JXL0cD0HbU0L94EJZdxOEC) format("woff2"); unicode-range: U+0E3F; } @font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAN0AA8AAAAABuQAAAMcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cKAZgP1NUQVRIADwRCAqCVIIuCw4AATYCJAMYBCAFhRQHIAwHG6wFyAQe+Dzr/SQDOCu1HdnbDjIr4nABcKKO8I3IxDX183zgqQPclPaZtA6KSLICi6b/0d9sAL5pRefk3qi4D6d1BwKwJ9B8IDKyCiqwRUHXdb2gbnDDNUFCrXtv6+R+nM0JyWNFShHrsQJppVQDMX/lJpoIE84Vko2VbGOtCvJ+0BFV64k/LiouyuQyKsPk3f/PgnJcZKmwqePgVemzeqciIxDYIgGeJjA0Na17/OShvTRPbu0VVgg8UURxSViPOyADeoQQ60E6fwGVBM8AX9kURoLWrAA+CmI+hJbWX+vPBWRbZaHruOzI1kFH0I6rADhP8j7FuYQkpFo/ja4riqK4urq6KrV2LrZtTnaOM2aOmdEyetaoypVPnogFT586rHr8mPmPHuWtOvdULHhy1n7l6UfMf3ym/tYXosdh/NzMl2Ne3vLVDmveX6/7RlyP8Y24vtC3+IPFcMMmvCTcUJ+YaGgoCQ8PLw03NCQmGupLw4cGBjkX5Rc4FwcFBgU5FRfkOxUFcaNJaMaBj/EHPsIIZO7AuzHgAzYI8eqlqDXqP+U26Tc5M0nkhHucj212SfhmK8vvzdTDZ/tXr14+l65F/J/9/6yVWZnJVJaeG/kujFht/j/7v62V+QnQca+1PIp5Yhu+DvdBAXfS8gaMouOsacGGadjWEZTDkCNbnzyvPLfoeZG2cwh8xWg/os4iEA6ZBJ7j74l0Gg4r4pjrsGY4NXZnohjMi34kb6yJ9hqEFY7Yg7M2jaAMjT5a6SeXyaZnL2baqaaz3M14JmedkxlgEnEYTaNJtDMRMwNMZhIGBM30ao81JtKNkWKyKPAfm2ljIp2kodFhWe3HzDjK6KSbKfTSykSq6LTw2vgt6yphGDBhIpJ4uuliMhoavVZlPSYMxGI7jHAa295ULV/qRGvXUUQxRWQSP7IpB3P1VpuOxgAzeJC08Dm8MhFKGCoVjBfPOdZXJUxEw0In7fXCqUwhjrPcPwmVkfTD3Zhv1k6hDQPtTw+/gHPiulW4k66W8WezbuzVe1zYyKi/EeYc0ncTRlx9WuhLDitrAAA=) format("woff2"); unicode-range: U+0025; } @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMkAA4AAAAABfQAAALPAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cOgZgP1NUQVREADwRCAqBPIE3CwgAATYCJAMMBCAFhFYHIBvyBMgEHkjv681ksgBzXvOglZQ9dOoAlucKQAV2cCf/n7+m3gEOvBp0ir/u3kXZoimwG3DA0wHd0SoEhwPfsbzyawCumtiDAOwIEDZi7vz8cmxQMMtiiegApFBZx59Pbls82o/RNdrRh9HfYg5imN0tPRjAGS17JeeIdeggV8hqouQlfqKRODH7lpS6tNJ1KdVSaEMZ0SNZRUVZXMJwmqFC/n1EfSpEeiHYSEvSR96hiQYSgcAmAx6Cm/zRwq5uUyhY2G52Cx2BCwpSlSKZdgka5mSDWAfy3Eyq7Mh4oB1z0ANFCGClJckN4KPgpGJ58ekqgFxKXVgsOGey1lCtAj5DnQ/Q1QJfUUoF2doqe91RtTrqDjOE/cqTh4S29OAJOzthv/LRI5YcvzeZ649Y8tCu0n7lA7H0ceevPhBL79vZNVjbWzXe2XmnKy6xPRH3qfaeNmkBp/xTvT3sp34q7JwQOz8l5Ibrb+15fnFW1WjleF1kdf7HrKzU2cU1kTOKts6a/SI/M/1GVngWAPsQa3Jevv/98QNNzhnfbDTtPS4/2PDqTOL0ImXt7n/G/xDlpB5Ftlo/fgv0Rjq9/xkWQzmdBXNrmqym8QYqMpqJA40al3Ch/zRnqCxJ2p4V524qW5nbIpIKjyBI+HgkTsLOozGTOx5FFLs8On4s81gRRrXbiSQmRgiFA14pHTtJMCSLV6GQIUYZoIV+quihHZNuBB0YujCyXjcxGWaMNKKJZow2RulhGFO4ohjL9BM1xWAX0RQxn/wpG02GKKMDmOqkHEOLuBxJKR10MU4/LYxSOYgmeDTEIAZxRBFDDHFi28C6IZMZUzr/Kp0siigii/QtzKmssGzjHIYYZnEXuSC0ZUTVOMBuB4Y+FJPGIXrpoA2WmcX4paLr2j+GQcgFQxdGg7fGaSWKNoYYIJrByeTOa0JXL0cD0HbU0L94EJZdxOEC) format("woff2"); unicode-range: U+0E3F; } @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 100 900; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAN0AA8AAAAABuQAAAMcAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cKAZgP1NUQVRIADwRCAqCVIIuCw4AATYCJAMYBCAFhRQHIAwHG6wFyAQe+Dzr/SQDOCu1HdnbDjIr4nABcKKO8I3IxDX183zgqQPclPaZtA6KSLICi6b/0d9sAL5pRefk3qi4D6d1BwKwJ9B8IDKyCiqwRUHXdb2gbnDDNUFCrXtv6+R+nM0JyWNFShHrsQJppVQDMX/lJpoIE84Vko2VbGOtCvJ+0BFV64k/LiouyuQyKsPk3f/PgnJcZKmwqePgVemzeqciIxDYIgGeJjA0Na17/OShvTRPbu0VVgg8UURxSViPOyADeoQQ60E6fwGVBM8AX9kURoLWrAA+CmI+hJbWX+vPBWRbZaHruOzI1kFH0I6rADhP8j7FuYQkpFo/ja4riqK4urq6KrV2LrZtTnaOM2aOmdEyetaoypVPnogFT586rHr8mPmPHuWtOvdULHhy1n7l6UfMf3ym/tYXosdh/NzMl2Ne3vLVDmveX6/7RlyP8Y24vtC3+IPFcMMmvCTcUJ+YaGgoCQ8PLw03NCQmGupLw4cGBjkX5Rc4FwcFBgU5FRfkOxUFcaNJaMaBj/EHPsIIZO7AuzHgAzYI8eqlqDXqP+U26Tc5M0nkhHucj212SfhmK8vvzdTDZ/tXr14+l65F/J/9/6yVWZnJVJaeG/kujFht/j/7v62V+QnQca+1PIp5Yhu+DvdBAXfS8gaMouOsacGGadjWEZTDkCNbnzyvPLfoeZG2cwh8xWg/os4iEA6ZBJ7j74l0Gg4r4pjrsGY4NXZnohjMi34kb6yJ9hqEFY7Yg7M2jaAMjT5a6SeXyaZnL2baqaaz3M14JmedkxlgEnEYTaNJtDMRMwNMZhIGBM30ao81JtKNkWKyKPAfm2ljIp2kodFhWe3HzDjK6KSbKfTSykSq6LTw2vgt6yphGDBhIpJ4uuliMhoavVZlPSYMxGI7jHAa295ULV/qRGvXUUQxRWQSP7IpB3P1VpuOxgAzeJC08Dm8MhFKGCoVjBfPOdZXJUxEw0In7fXCqUwhjrPcPwmVkfTD3Zhv1k6hDQPtTw+/gHPiulW4k66W8WezbuzVe1zYyKi/EeYc0ncTRlx9WuhLDitrAAA=) format("woff2"); unicode-range: U+0025; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMYAA4AAAAABdQAAALAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cQAZgP1NUQVREADwRCAqBIIEjCwgAATYCJAMMBCAFhE4HIBvcBMgEAlpLZ/f2QgQXIPgwfQhLQKrCM8ugblUtyvbn/5p6B3jgsWjQKV22LZr+O/y0ChrQxAcUFTic+FRqk/TshcrmRa0MAdgRoEeI8sr6NmxQSMdiifkfcqFQrfBp3Oju5Vmixsw7DKImls0zRM0Ob5snatvk8BRR/Lamo5VMEpfQQZ6RXaTVpV5iAEM03iHtdal0JaU6DKMQgnd2lclUxWtCnIpU5P9CUJHiLYKrVJAJ8ivFhiARCGxS4KGRiIt2TkxuEzrsHNs2KawQuKA4QIpsxoysAZGQuATyeV+6/JDyQFtstQeKGMCqkSInwC6FTUuW7z/fMritcYXFgnOuai+6VYim6IUMXQ3wdQVKudnaKnvdUY046g6duv3ZDQ6tl/Ng4w2H1tftOuzPbonDm3Z2wv7sWvb7fmt7q4Gvd79OGBljGTSGH36+d291R05RzVN1oiR03sjNahqLq7xYd7iluDg1uSy3Y0/Djqb7Kak1cY1TXZeNAqNn9fV410mO7qz/NjLonP/XRtN+6OLajdWSdOK37Isv/jX8N2mvtZ/jN+Tuc6vfpP3412Dx1l7PW/BmabKLAVmNSajTAmu8xoWqlWtnsY9Je87ktrKlzA2RZFPIBAg3EBInoShkCvkIQpHAHULHj0OEFTF04U5kEhYidBzwSlhhZzjI2fpUaGSBZeYYZpZOphhjG5OWbIY8AcY+fRvbWGSFXJJJZoVRlplikW0aS2IlNUtSF9UTJGOikvouwTYWaDVgnhXaqHyYKRJpwQywnVmG4XZgZrn5oQXmCcEgiRRSMLQZAjPExAtpafBv8qjChIkq8obv8NDzkHAZCyyye+ncxjCTZYRuMAbNhDSe1MQyC0xjZpSXKmH7ZjLbxHTZP2ZjUxNM/dy1nRGSGGWBOZKZ70wd3yBmy9VkBjMdPfa+DYXlHgYeAAAA) format("woff2"); unicode-range: U+0E3F; } @font-face { font-family: "DM Sans"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMYAA4AAAAABdQAAALAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cQAZgP1NUQVREADwRCAqBIIEjCwgAATYCJAMMBCAFhE4HIBvcBMgEAlpLZ/f2QgQXIPgwfQhLQKrCM8ugblUtyvbn/5p6B3jgsWjQKV22LZr+O/y0ChrQxAcUFTic+FRqk/TshcrmRa0MAdgRoEeI8sr6NmxQSMdiifkfcqFQrfBp3Oju5Vmixsw7DKImls0zRM0Ob5snatvk8BRR/Lamo5VMEpfQQZ6RXaTVpV5iAEM03iHtdal0JaU6DKMQgnd2lclUxWtCnIpU5P9CUJHiLYKrVJAJ8ivFhiARCGxS4KGRiIt2TkxuEzrsHNs2KawQuKA4QIpsxoysAZGQuATyeV+6/JDyQFtstQeKGMCqkSInwC6FTUuW7z/fMritcYXFgnOuai+6VYim6IUMXQ3wdQVKudnaKnvdUY046g6duv3ZDQ6tl/Ng4w2H1tftOuzPbonDm3Z2wv7sWvb7fmt7q4Gvd79OGBljGTSGH36+d291R05RzVN1oiR03sjNahqLq7xYd7iluDg1uSy3Y0/Djqb7Kak1cY1TXZeNAqNn9fV410mO7qz/NjLonP/XRtN+6OLajdWSdOK37Isv/jX8N2mvtZ/jN+Tuc6vfpP3412Dx1l7PW/BmabKLAVmNSajTAmu8xoWqlWtnsY9Je87ktrKlzA2RZFPIBAg3EBInoShkCvkIQpHAHULHj0OEFTF04U5kEhYidBzwSlhhZzjI2fpUaGSBZeYYZpZOphhjG5OWbIY8AcY+fRvbWGSFXJJJZoVRlplikW0aS2IlNUtSF9UTJGOikvouwTYWaDVgnhXaqHyYKRJpwQywnVmG4XZgZrn5oQXmCcEgiRRSMLQZAjPExAtpafBv8qjChIkq8obv8NDzkHAZCyyye+ncxjCTZYRuMAbNhDSe1MQyC0xjZpSXKmH7ZjLbxHTZP2ZjUxNM/dy1nRGSGGWBOZKZ70wd3yBmy9VkBjMdPfa+DYXlHgYeAAAA) format("woff2"); unicode-range: U+0E3F; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMYAA4AAAAABdQAAALAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cQAZgP1NUQVREADwRCAqBIIEjCwgAATYCJAMMBCAFhE4HIBvcBMgEAlpLZ/f2QgQXIPgwfQhLQKrCM8ugblUtyvbn/5p6B3jgsWjQKV22LZr+O/y0ChrQxAcUFTic+FRqk/TshcrmRa0MAdgRoEeI8sr6NmxQSMdiifkfcqFQrfBp3Oju5Vmixsw7DKImls0zRM0Ob5snatvk8BRR/Lamo5VMEpfQQZ6RXaTVpV5iAEM03iHtdal0JaU6DKMQgnd2lclUxWtCnIpU5P9CUJHiLYKrVJAJ8ivFhiARCGxS4KGRiIt2TkxuEzrsHNs2KawQuKA4QIpsxoysAZGQuATyeV+6/JDyQFtstQeKGMCqkSInwC6FTUuW7z/fMritcYXFgnOuai+6VYim6IUMXQ3wdQVKudnaKnvdUY046g6duv3ZDQ6tl/Ng4w2H1tftOuzPbonDm3Z2wv7sWvb7fmt7q4Gvd79OGBljGTSGH36+d291R05RzVN1oiR03sjNahqLq7xYd7iluDg1uSy3Y0/Djqb7Kak1cY1TXZeNAqNn9fV410mO7qz/NjLonP/XRtN+6OLajdWSdOK37Isv/jX8N2mvtZ/jN+Tuc6vfpP3412Dx1l7PW/BmabKLAVmNSajTAmu8xoWqlWtnsY9Je87ktrKlzA2RZFPIBAg3EBInoShkCvkIQpHAHULHj0OEFTF04U5kEhYidBzwSlhhZzjI2fpUaGSBZeYYZpZOphhjG5OWbIY8AcY+fRvbWGSFXJJJZoVRlplikW0aS2IlNUtSF9UTJGOikvouwTYWaDVgnhXaqHyYKRJpwQywnVmG4XZgZrn5oQXmCcEgiRRSMLQZAjPExAtpafBv8qjChIkq8obv8NDzkHAZCyyye+ncxjCTZYRuMAbNhDSe1MQyC0xjZpSXKmH7ZjLbxHTZP2ZjUxNM/dy1nRGSGGWBOZKZ70wd3yBmy9VkBjMdPfa+DYXlHgYeAAAA) format("woff2"); unicode-range: U+0E3F; } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMYAA4AAAAABdQAAALAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cQAZgP1NUQVREADwRCAqBIIEjCwgAATYCJAMMBCAFhE4HIBvcBMgEAlpLZ/f2QgQXIPgwfQhLQKrCM8ugblUtyvbn/5p6B3jgsWjQKV22LZr+O/y0ChrQxAcUFTic+FRqk/TshcrmRa0MAdgRoEeI8sr6NmxQSMdiifkfcqFQrfBp3Oju5Vmixsw7DKImls0zRM0Ob5snatvk8BRR/Lamo5VMEpfQQZ6RXaTVpV5iAEM03iHtdal0JaU6DKMQgnd2lclUxWtCnIpU5P9CUJHiLYKrVJAJ8ivFhiARCGxS4KGRiIt2TkxuEzrsHNs2KawQuKA4QIpsxoysAZGQuATyeV+6/JDyQFtstQeKGMCqkSInwC6FTUuW7z/fMritcYXFgnOuai+6VYim6IUMXQ3wdQVKudnaKnvdUY046g6duv3ZDQ6tl/Ng4w2H1tftOuzPbonDm3Z2wv7sWvb7fmt7q4Gvd79OGBljGTSGH36+d291R05RzVN1oiR03sjNahqLq7xYd7iluDg1uSy3Y0/Djqb7Kak1cY1TXZeNAqNn9fV410mO7qz/NjLonP/XRtN+6OLajdWSdOK37Isv/jX8N2mvtZ/jN+Tuc6vfpP3412Dx1l7PW/BmabKLAVmNSajTAmu8xoWqlWtnsY9Je87ktrKlzA2RZFPIBAg3EBInoShkCvkIQpHAHULHj0OEFTF04U5kEhYidBzwSlhhZzjI2fpUaGSBZeYYZpZOphhjG5OWbIY8AcY+fRvbWGSFXJJJZoVRlplikW0aS2IlNUtSF9UTJGOikvouwTYWaDVgnhXaqHyYKRJpwQywnVmG4XZgZrn5oQXmCcEgiRRSMLQZAjPExAtpafBv8qjChIkq8obv8NDzkHAZCyyye+ncxjCTZYRuMAbNhDSe1MQyC0xjZpSXKmH7ZjLbxHTZP2ZjUxNM/dy1nRGSGGWBOZKZ70wd3yBmy9VkBjMdPfa+DYXlHgYeAAAA) format("woff2"); unicode-range: U+0E3F; } @font-face { font-family: "BrownPopup"; font-style: normal; font-weight: 400 500; font-display: swap; src: url(data:font/woff2;base64,d09GMgABAAAAAAMYAA4AAAAABdQAAALAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGx4cQAZgP1NUQVREADwRCAqBIIEjCwgAATYCJAMMBCAFhE4HIBvcBMgEAlpLZ/f2QgQXIPgwfQhLQKrCM8ugblUtyvbn/5p6B3jgsWjQKV22LZr+O/y0ChrQxAcUFTic+FRqk/TshcrmRa0MAdgRoEeI8sr6NmxQSMdiifkfcqFQrfBp3Oju5Vmixsw7DKImls0zRM0Ob5snatvk8BRR/Lamo5VMEpfQQZ6RXaTVpV5iAEM03iHtdal0JaU6DKMQgnd2lclUxWtCnIpU5P9CUJHiLYKrVJAJ8ivFhiARCGxS4KGRiIt2TkxuEzrsHNs2KawQuKA4QIpsxoysAZGQuATyeV+6/JDyQFtstQeKGMCqkSInwC6FTUuW7z/fMritcYXFgnOuai+6VYim6IUMXQ3wdQVKudnaKnvdUY046g6duv3ZDQ6tl/Ng4w2H1tftOuzPbonDm3Z2wv7sWvb7fmt7q4Gvd79OGBljGTSGH36+d291R05RzVN1oiR03sjNahqLq7xYd7iluDg1uSy3Y0/Djqb7Kak1cY1TXZeNAqNn9fV410mO7qz/NjLonP/XRtN+6OLajdWSdOK37Isv/jX8N2mvtZ/jN+Tuc6vfpP3412Dx1l7PW/BmabKLAVmNSajTAmu8xoWqlWtnsY9Je87ktrKlzA2RZFPIBAg3EBInoShkCvkIQpHAHULHj0OEFTF04U5kEhYidBzwSlhhZzjI2fpUaGSBZeYYZpZOphhjG5OWbIY8AcY+fRvbWGSFXJJJZoVRlplikW0aS2IlNUtSF9UTJGOikvouwTYWaDVgnhXaqHyYKRJpwQywnVmG4XZgZrn5oQXmCcEgiRRSMLQZAjPExAtpafBv8qjChIkq8obv8NDzkHAZCyyye+ncxjCTZYRuMAbNhDSe1MQyC0xjZpSXKmH7ZjLbxHTZP2ZjUxNM/dy1nRGSGGWBOZKZ70wd3yBmy9VkBjMdPfa+DYXlHgYeAAAA) format("woff2"); unicode-range: U+0E3F; } /* Figures in legacy markup: low optical size keeps Bodoni hairlines (en dash, 4 diagonal) visible */ .skx-lux :is([class*="stat"], [class*="metric"], [class*="kpi"], [class*="price"], [class*="number"], [class*="figure"], [class*="yield"]) { font-variation-settings: "opsz" 16; font-variant-numeric: lining-nums tabular-nums; } /* Bodoni hairline guard (1x DPR): below display sizes the automatic optical size (opsz follows the font size, clamped at 20 in the subset) thins en/em dashes and hairlines out of existence ('7–10% net yields' read '7 10%'). Everything that is not a display heading is pinned to opsz 16; Jost and the ฿ faces carry no opsz axis, so in practice this only reaches Bodoni text. !important because the page sheets' `font: … !important` shorthands reset font-variation-settings too, and the double id in :not()/:is() lifts it over their (id-carrying) selectors. H1s (≥ 44px) keep automatic sizing; H2s do from 1100px, where the smallest (set at the h3 step) reach 28px; below that they are pinned as well. */ body.skx-lux :not(h1, h2, h1 *, h2 *, #skx-o#skx-p) { font-variation-settings: "opsz" 16 !important; } body.skx-lux :is(.skp-h, .skp-h *, .modal h2, .modal h2 *, h2 .ar-num, #skx-o#skx-p) { font-variation-settings: "opsz" 16 !important; } @media (max-width: 1099px) { body.skx-lux :is(h2, h2 *, #skx-o#skx-p) { font-variation-settings: "opsz" 16 !important; } } /* Display face at 14–16px (captions, small labels): opsz 16 still drops the em dash there; 12 keeps it */ body.skx-lux :is(figcaption, [class*="caption"], .wp-caption-text, small, .insights-nl__phone-headline, .ip-dev-number, .ip-grid-label, #metrics .bg-light span.d-block, #skx-o#skx-p) { font-variation-settings: "opsz" 12 !important; } /* 02 ─ Base + legacy typography ─────────────────────────────────────────── */ body.skx-lux { /* legacy variables re-pointed at the Luxury palette */ --body-bg: var(--c-linen); --body-color: var(--c-ink); --link: var(--c-ink); --dark: var(--c-ink); --light: var(--c-beige); --lighter: var(--c-ivory); --primary: var(--c-beige); --secondary: var(--c-ink); --bs-body-bg: var(--c-linen); --bs-body-color: var(--c-ink); --bs-body-font-family: var(--font-sans); --bs-font-sans-serif: var(--font-sans); --serif: var(--font-display); --sans: var(--font-sans); /* the Luxury header is in flow (sticky); legacy sticky offsets read this variable */ --observer-main-navbar-height: var(--header-h-mobile); --wpbc-main-navbar-height: var(--header-h-mobile); --wpbc-main-navbar-lg-height: var(--header-h); background-color: var(--c-linen); color: var(--c-ink); font-family: var(--font-sans); font-weight: var(--fw-regular); line-height: var(--lh-body); font-synthesis: none; } @media (min-width: 992px) { body.skx-lux { --observer-main-navbar-height: var(--header-h); } } .skx-lux :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, .display-1, .display-2, .display-3, .display-4, .display-5, .display-6):not([class*="lx-"]):not(:is(h5, h6):is(.titletag, .titletagJust, .titletagJost)):not(:where(.lx-header, .lx-mega, .lx-sheet, .lx-drawer, .lx-footer, .lx-sticky-cta, .lx-section, .lx-hero, .lx-modal, .lx-cta-band, .lx-card) *) { font-family: var(--font-display); font-weight: var(--fw-regular); letter-spacing: var(--tr-heading); font-variant-numeric: lining-nums; } /* Rosewood rule, legacy markup: the italic phrase stays italic Bodoni. Colour is inherited (legacy headings sit on photos and dark bands too, where brass-text would fail 4.5:1). */ .skx-lux :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6):not(:where(.lx-header, .lx-mega, .lx-sheet, .lx-drawer, .lx-footer, .lx-sticky-cta, .lx-section, .lx-hero, .lx-modal, .lx-cta-band, .lx-card) *) :is(i, em) { font-family: var(--font-display); font-style: italic; font-weight: var(--fw-regular); } .skx-lux :is(p, li, .lead, .p-lead, small, .small, label, td, th) { font-weight: var(--fw-regular); } .skx-lux :is(.lead, .p-lead) { font-size: var(--fs-lead); line-height: 1.55; } .skx-lux :is(strong, b) { font-weight: var(--fw-medium); } .skx-lux .font-trirong { font-family: var(--font-display) !important; } .skx-lux :is(.font-manrope, .font-jost) { font-family: var(--font-sans) !important; } /* Every `font-family: Trirong|Manrope … !important` rule in custom.css (38 rules, card/insights chrome), family only. The font-face aliases above already render them Luxury, but the declared family must be Luxury too: /developments/, /properties/, search and 404 print .skhai-card outside the Insights page layer. :is() takes its most specific argument, so the html body.skx-lux prefix beats each classic selector. */ html body.skx-lux :is(.skhai-card__title, .col-lg-4 .skhai-card .skhai-card__title, .col-md-6 .skhai-card .skhai-card__title, [data-observe] .skhai-card .skhai-card__title, .wpbc-template-query-row .skhai-card__title, div.skhai-card__title, .skhai-card--je h3.skhai-card__title, .insights-page-header h1, .insights-hero__caption h2, .insights-hero__caption h2 a, .insights-newsletter h3, .insights-nl__title, .insights-nl__phone-headline, .insights-hero-je__title) { font-family: var(--font-display) !important; } html body.skx-lux :is(.col-lg-4 .skhai-card .skhai-card__cats, .col-md-6 .skhai-card .skhai-card__cats, [data-observe] .skhai-card .skhai-card__cats, .col-lg-4 .skhai-card .skhai-card__footer, .col-md-6 .skhai-card .skhai-card__footer, [data-observe] .skhai-card .skhai-card__footer, .skhai-card .skhai-card__cats, div.skhai-card__cats, .skhai-card--je .skhai-card__cats, .skhai-card--je .skhai-card__footer, .insights-primary-nav__link, a.insights-newsletter__btn, .insights-newsletter__label, .insights-newsletter__followus, .insights-nl__label, .insights-nl__desc, .insights-nl__input, .insights-nl__btn, .insights-nl__fine, .insights-nl__phone-brand, .insights-nl__phone-cat, .insights-nl__phone-meta, .insights-hero-je__cats, .insights-hero-je__excerpt, .insights-hero-je__meta, .sp-modal-body .wpcf7 input[type="submit"], .sp-modal-body .wpcf7 button) { font-family: var(--font-sans) !important; } html body.skx-lux .skhai-card--je .skhai-card__img::after { font-family: var(--font-sans) !important; } .skx-lux :is([class*="font-weight-1"], [class*="font-weight-2"], [class*="font-weight-3"], .fw-light, .fw-lighter) { font-weight: var(--fw-regular) !important; } .skx-lux ::selection { background: var(--c-brass-light); color: var(--c-ink); } /* Thai script: keep stacked vowels clear of the next line */ .skx-lux [lang|="th"] { line-height: 1.8; } /* was :lang(th): a universal selector tested on every element on every recalc; line-height inherits */ /* 03 ─ Focus: one two-tone ring everywhere (beats the Phase-0 !important ring) ─ */ html body.skx-lux :is(a, button, .btn, .dropdown-toggle, .navbar-toggler, [role="button"], summary, [tabindex]:not([tabindex="-1"]), input, select, textarea):focus-visible, html body.skx-lux :focus-visible { outline: 2px solid var(--focus) !important; outline-offset: 2px !important; box-shadow: 0 0 0 6px var(--focus-halo) !important; } html body.skx-lux :is(input, select, textarea):focus-visible { outline-offset: 1px !important; } /* 04 ─ Buttons & links (legacy .btn family → lx-btn look; classes/ids unchanged for JS + GTM) */ .skx-lux .btn:not([class*="lx-"]):not(.btn-link):not(.navbar-toggler):not(.btn-close):not(.btn-media-icon):not(.btn-circle):not(.btn-share):not(.btn-modal-close):not(.btn-icon), .skx-lux .wpcf7-submit, .skx-lux .btn-submit { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3); min-height: 52px; padding: 0 1.75rem; border-radius: 0 !important; font: var(--fw-medium) var(--fs-small)/1.2 var(--font-sans) !important; letter-spacing: var(--tr-button) !important; text-transform: uppercase; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } /* primary: brass fill, brass-line edge; hover → espresso */ .skx-lux :is(.btn-dark, .btn-primary, .btn-secondary, .btn-submit, .wpcf7-submit):not(:disabled):not([class*="lx-"]) { background: var(--c-brass) !important; color: var(--c-ink) !important; border: 1px solid var(--c-brass-line) !important; } .skx-lux :is(.btn-dark, .btn-primary, .btn-secondary, .btn-submit, .wpcf7-submit):not(:disabled):not([class*="lx-"]):hover { background: var(--c-espresso) !important; color: var(--c-linen) !important; border-color: var(--c-espresso) !important; } /* secondary: outline in current colour; hover inverts */ .skx-lux :is(.btn-outline-currentColor, .btn-outline-current, .btn-outline-dark, .btn-outline-light, .btn-outline-primary, .btn-outline-secondary, .btn-light, .btn-current) { background: transparent !important; color: inherit; border: 1px solid currentColor !important; } .skx-lux :is(.btn-outline-dark, .btn-outline-primary, .btn-outline-secondary, .btn-light):hover { background: var(--c-ink) !important; color: var(--c-linen) !important; border-color: var(--c-ink) !important; } .skx-lux :is(.btn-outline-light, .btn-outline-currentColor, .btn-outline-current, .btn-current):hover { background: var(--c-linen) !important; color: var(--c-ink) !important; border-color: var(--c-linen) !important; } /* on photos: linen fill */ .skx-lux .btn-white { background: var(--c-linen) !important; color: var(--c-ink) !important; border: 1px solid var(--c-linen) !important; } .skx-lux .btn-white:hover { background: var(--c-brass) !important; border-color: var(--c-brass-line) !important; } /* WhatsApp: off neon — espresso with the WhatsApp mark kept */ .skx-lux .btn-whatsapp { background: var(--c-espresso) !important; color: var(--c-linen) !important; border: 1px solid var(--c-espresso) !important; } .skx-lux .btn-whatsapp:hover { background: var(--c-brass) !important; color: var(--c-ink) !important; border-color: var(--c-brass-line) !important; } /* legacy custom.css greys every CF7 submit to opacity .6 until the site's checkForm() adds .form-ready (functions.php skhai_cf7_button_validation). Luxury: SEND is always brass (DIRECTION); while not ready it only changes cursor and carries the hint below. The dashed look is reserved for CF7's own :disabled. */ .skx-lux .wpcf7 :is(.wpcf7-submit, .btn-submit, .btn-dark) { opacity: 1 !important; } .skx-lux .wpcf7 :is(.btn-submit, .btn-dark):not(.form-ready):not(:disabled):not([class*="lx-"]) { cursor: not-allowed; } .skx-lux .wpcf7 :is(.btn-submit, .btn-dark):not(.form-ready):not(:disabled):not([class*="lx-"]):hover { background: var(--c-brass) !important; color: var(--c-ink) !important; border-color: var(--c-brass-line) !important; } /* disabled-with-reason (e.g. SEND before Turnstile/required fields) */ .skx-lux :is(.wpcf7-submit, .btn):disabled, .skx-lux .btn.disabled { background: transparent !important; color: var(--c-mute) !important; border: 1px dashed var(--c-line-strong) !important; cursor: not-allowed; opacity: 1 !important; } .skx-lux .btn-link { color: var(--c-brass-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; } /* 05 ─ Forms: CF7 + intl-tel-input (markup, ids and CF7 ids untouched) ─── */ .skx-lux .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], select, textarea), .skx-lux .form-default .form-control { width: 100%; min-height: 52px; padding: .8rem 1rem !important; border: 1px solid var(--c-line-strong) !important; border-radius: 0 !important; background-color: var(--c-ivory) !important; color: var(--c-ink) !important; font: var(--fw-regular) var(--fs-body)/1.4 var(--font-sans) !important; /* ≥16px: no iOS focus zoom */ box-shadow: none; } .skx-lux .wpcf7 textarea { min-height: 140px; resize: vertical; } .skx-lux .wpcf7 :is(input, select, textarea)::placeholder { color: var(--c-mute) !important; opacity: 1; } .skx-lux .wpcf7 :is(input, select, textarea):hover { border-color: var(--c-ink) !important; } .skx-lux .wpcf7 [aria-invalid="true"] { border-color: var(--c-error) !important; box-shadow: inset 3px 0 0 var(--c-error) !important; } .skx-lux .wpcf7 .iti { width: 100%; } .skx-lux .wpcf7 .iti input[type="tel"] { padding-left: 88px !important; } .skx-lux .form-default .iti .iti__selected-country { padding-left: 1rem; } .skx-lux .form-default .form-group label, .skx-lux .wpcf7 label:not(.wpcf7-list-item label) { padding-left: 0 !important; font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--c-ink); } .skx-lux .wpcf7 .wpcf7-list-item-label, .skx-lux .form-default .form-check label { font: var(--fw-regular) var(--fs-small)/1.5 var(--font-sans) !important; letter-spacing: 0; text-transform: none; color: var(--c-mute); } .skx-lux .wpcf7 input[type="checkbox"], .skx-lux .wpcf7 input[type="radio"] { width: 20px; height: 20px; accent-color: var(--c-brass-line); } /* Validation: legacy _form.scss pins each tip absolute (110px box, top-right, 10px caps) over the label and hides the form-level response. Luxury: tip in flow under its field; response shown once CF7 has a status. */ .skx-lux .wpcf7 .wpcf7-not-valid-tip { position: static !important; display: block; width: 100%; max-width: none !important; padding: 0 !important; inset: auto !important; margin-top: var(--sp-2); text-align: left !important; text-transform: none !important; letter-spacing: 0 !important; white-space: normal; color: var(--c-error) !important; font: var(--fw-regular) var(--fs-small)/1.4 var(--font-sans) !important; } .skx-lux :is(.form-bg-dark, .on-dark) .wpcf7 .wpcf7-not-valid-tip { color: #F2B8AC !important; } .skx-lux .wpcf7 .wpcf7-response-output { display: none; position: static !important; inset: auto !important; z-index: auto !important; text-align: left !important; border: 1px solid var(--c-brass) !important; background: var(--c-ivory) !important; color: var(--c-ink) !important; font: var(--fw-regular) var(--fs-small)/1.5 var(--font-sans) !important; padding: var(--sp-4) var(--sp-5) !important; margin: var(--sp-5) 0 0 !important; } .skx-lux .wpcf7 form:is([data-status="invalid"], [data-status="unaccepted"], [data-status="spam"], [data-status="failed"], [data-status="aborted"], [data-status="sent"], .invalid, .unaccepted, .spam, .failed, .aborted, .sent) .wpcf7-response-output:not(:empty) { display: block !important; } .skx-lux .wpcf7 form:is([data-status="invalid"], [data-status="unaccepted"], [data-status="spam"], [data-status="failed"], [data-status="aborted"], .invalid, .spam, .failed) .wpcf7-response-output { border-color: var(--c-error) !important; box-shadow: inset 3px 0 0 var(--c-error); } .skx-lux .wpcf7 form:is([data-status="sent"], .sent) .wpcf7-response-output { border-color: var(--c-success) !important; box-shadow: inset 3px 0 0 var(--c-success); } .skx-lux .wpcf7 .form-group { position: relative; } /* Turnstile sits with the submit, not above the first field (CSS order only — markup untouched): flat forms (drawer #359) order it before their submit group; #117 (pre-footer) is laid out as a grid so its fields keep two columns and the widget lands between Message and SEND; #110 is handled in the development-project sheet. */ .skx-lux :is(.skx-lux-drawer-form, .ui-contact, .lxp-form, .modal, #property-inquiry) .wpcf7-form { display: flex; flex-direction: column; } .skx-lux :is(.skx-lux-drawer-form, .ui-contact, .lxp-form, .modal, #property-inquiry) .wpcf7-form > .wpcf7-turnstile { order: 1; min-height: 65px; margin: var(--sp-2) 0 var(--sp-4); } /* after the last field, height reserved */ .skx-lux :is(.skx-lux-drawer-form, .ui-contact, .lxp-form, .modal, #property-inquiry) .wpcf7-form > :is(.form-group-submit, .row) { order: 2; } .skx-lux :is(.skx-lux-drawer-form, .ui-contact, .lxp-form, .modal, #property-inquiry) .wpcf7-form > .wpcf7-response-output { order: 3; } .skx-lux .ui-contact .wpcf7-form { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sp-5); row-gap: 0; } @media (min-width: 640px) { .skx-lux .ui-contact .wpcf7-form { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .skx-lux .ui-contact .wpcf7-form > .row, .skx-lux .ui-contact .wpcf7-form > .row > .col-12 { display: contents; } .skx-lux .ui-contact .wpcf7-form > .row > [class*="col-"] { width: auto; max-width: none; padding: 0; flex: none; } .skx-lux .ui-contact .wpcf7-form > :is(fieldset, .wpcf7-turnstile, .wpcf7-response-output), .skx-lux .ui-contact .wpcf7-form > .row > .col-12 > .form-group { grid-column: 1 / -1; } .skx-lux .ui-contact .wpcf7-form > .row > .col-12 > .form-group-submit { order: 2; } .skx-lux .ui-contact .wpcf7-form > fieldset { margin: 0; padding: 0; border: 0; } /* dark-band forms (project footer band) */ .skx-lux :is(.form-bg-dark, .on-dark) .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea), .skx-lux .form-default.form-bg-dark .form-control { background-color: var(--c-umber) !important; color: var(--c-linen) !important; border-color: rgba(239, 232, 222, .5) !important; } .skx-lux :is(.form-bg-dark, .on-dark) .wpcf7 :is(input, textarea)::placeholder { color: var(--c-taupe) !important; } .skx-lux :is(.form-bg-dark, .on-dark) :is(.form-group label, .wpcf7 label) { color: var(--c-linen); } /* SEND is disabled until Turnstile + required fields: say why instead of a silent grey */ .skx-lux .wpcf7 :is(.submit-wrapper, .form-group-submit, p):has(> .wpcf7-submit:disabled)::after, .skx-lux .wpcf7 :is(.submit-wrapper, .form-group-submit):has(.wpcf7-submit:disabled)::after, .skx-lux .wpcf7 .submit-wrapper:has(> :is(.btn-submit, .btn-dark):not(.form-ready))::after { content: "Complete the required fields to send."; display: block; margin-top: var(--sp-2); font: var(--fw-regular) var(--fs-small)/1.4 var(--font-sans); color: var(--c-mute); letter-spacing: 0; text-transform: none; } /* 06 ─ Breadcrumb + legacy chrome remnants ───────────────────────────── */ .skx-lux #main-breadcrumb { background: transparent; } .skx-lux #main-breadcrumb :is(.breadcrumb, ol) { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: var(--sp-2) 0; background: none; font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-mute); } .skx-lux #main-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; color: var(--c-ink); text-decoration: none; } .skx-lux #main-breadcrumb a:hover { text-decoration: underline; text-decoration-color: var(--c-brass); text-underline-offset: .28em; } @media (max-width: 575px) { .skx-lux #main-breadcrumb { display: none; } } .skx-lux :is(#body-loader, .simulate-main-navbar-h, #main-goup, .main-goup) { display: none !important; } /* the mobile sheet replaces the classic navbar modal; its trigger is gone, keep it inert */ .skx-lux #modal-main-navbar { display: none !important; } /* observer sentinel in the Luxury footer (keeps --observer-main-footer-height fed) */ .skx-lux .lx-footer { position: relative; } .skx-lux .skx-lux-observer { position: absolute; inset: 0; pointer-events: none; z-index: -1; } .skx-lux .lx-social a.lx-social__text { width: auto; padding-inline: var(--sp-3); font: var(--fw-medium) var(--fs-label)/1 var(--font-sans); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; } /* footer mailto (antispam span filled by the classic JS) */ .skx-lux .lx-footer address a { color: var(--c-linen); } .skx-lux .lx-footer__cols > div:first-child { grid-column: auto; } @media (max-width: 991px) { .skx-lux .lx-footer__cols > div:first-child { grid-column: 1 / -1; } } /* drawer form: the site's CF7 enquiry form inside the Luxury drawer */ .skx-lux .skx-lux-drawer-form .lx-label { display: block; margin-bottom: var(--sp-4); color: var(--c-mute); } .skx-lux .skx-lux-drawer-form .wpcf7-submit { width: 100%; } .skx-lux .skx-lux-drawer-form .form-sent { display: none; } .skx-lux .lx-drawer__body .lx-soft { color: var(--c-mute); } /* WhatsApp bubble the theme shows after a conversion: the Luxury sticky bar carries WhatsApp instead */ html body.skx-lux .btn-fixed-whatsapp { display: none !important; } /* 07 ─ skhai-popup-plugin (plugin untouched; restyled + repositioned here) ── #skc-cc becomes the ONE understated enquiry trigger, shown only after the hero at every width (never over hero copy), and never above an open drawer / menu sheet / mega panel: desktop = a quiet linen tab bottom-right (WhatsApp lives in the header drawer); phones = the 56px sticky bar, hidden while typing / menu open. */ html body.skx-lux #skc-cc { font-family: var(--font-sans); gap: 0; z-index: var(--z-sticky-cta); } html body.skx-lux #skc-cc .skc-btn { font: var(--fw-medium) var(--fs-label)/1 var(--font-sans); letter-spacing: .16em; box-shadow: none; border-radius: 0; min-height: 44px; } html.lx-lock body.skx-lux #skc-cc, html.lx-mega-open body.skx-lux #skc-cc, html body.skx-lux.modal-open #skc-cc { visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } @media (min-width: 992px) { html body.skx-lux #skc-cc { right: var(--sp-5); bottom: var(--sp-5); width: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-silk), visibility 0s linear var(--dur-slow); } html body.skx-lux.lx-past-hero #skc-cc { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } html body.skx-lux #skc-cc #skc-wa { display: none !important; } /* plugin JS sets inline display:flex */ html body.skx-lux #skc-cc #skc-spec { background: var(--c-linen); color: var(--c-ink); border: 1px solid var(--c-brass-line); padding: 0 1.25rem; box-shadow: var(--shadow-2); } @supports (color: color-mix(in srgb, red 50%, blue)) { html body.skx-lux #skc-cc #skc-spec { background: color-mix(in srgb, var(--c-linen) 96%, transparent); } } html body.skx-lux #skc-cc #skc-spec:hover { background: var(--c-espresso); color: var(--c-linen); border-color: var(--c-espresso); } } @media (max-width: 991px) { html body.skx-lux #skc-cc { left: 0; right: 0; bottom: 0; width: 100%; max-width: none; flex-direction: row; align-items: stretch; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) calc(var(--sp-2) + env(safe-area-inset-bottom)); background: var(--c-linen); border-top: 1px solid var(--c-sand); /* opaque: page copy never ghosts through */ z-index: var(--z-sticky-cta); transform: translateY(110%); visibility: hidden; transition: transform var(--dur-slow) var(--ease-silk), visibility 0s linear var(--dur-slow); } html body.skx-lux.lx-past-hero #skc-cc { transform: none; visibility: visible; transition-delay: 0s; } html.lx-lock body.skx-lux #skc-cc, html body.skx-lux.lx-typing #skc-cc, html body.skx-lux.modal-open #skc-cc { transform: translateY(110%); visibility: hidden; } html body.skx-lux #skc-cc #skc-spec { flex: 1; min-height: 48px; background: var(--c-brass); color: var(--c-ink); border: 1px solid var(--c-brass-line); font-size: var(--fs-small); letter-spacing: var(--tr-button); } html body.skx-lux #skc-cc #skc-wa { flex: none; width: 48px; min-height: 48px; padding: 0; font-size: 0; gap: 0; background: transparent; color: var(--c-ink); border: 1px solid var(--c-line-strong); } /* the Luxury WhatsApp mark (same drawing as sprite #i-wa) instead of the plugin's filled glyph */ html body.skx-lux #skc-wa .skc-waic { display: none; } html body.skx-lux #skc-cc #skc-wa::before { content: ""; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--skx-wa-mark) center / contain no-repeat; mask: var(--skx-wa-mark) center / contain no-repeat; } } body.skx-lux { --skx-wa-mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3a9 9 0 0 0-7.8 13.5L3 21l4.6-1.2A9 9 0 1 0 12 3z' fill='none' stroke='%23000' stroke-width='1.3'/%3E%3Cpath d='M8.8 8.2c.2-.5.5-.5.8-.5h.5c.2 0 .4 0 .6.4l.8 1.8c.1.2.1.4 0 .6l-.5.7c-.1.2-.1.3 0 .5a6 6 0 0 0 2.7 2.4c.2.1.4.1.5-.1l.7-.8c.2-.2.4-.2.6-.1l1.7.8c.2.1.4.2.4.4 0 .4-.1 1.1-.6 1.5-.5.5-1.4.7-2.2.5a9 9 0 0 1-5.6-5c-.4-1-.2-2 .6-2.6z' fill='%23000'/%3E%3C/svg%3E"); } /* specialist panel */ html body.skx-lux #skc-panel { background: var(--c-linen); border: 1px solid var(--c-sand); box-shadow: var(--shadow-3); font-family: var(--font-sans); color: var(--c-ink); } html body.skx-lux #skc-panel .skc-hd { background: var(--c-espresso); color: var(--c-linen); border-bottom: 0; } html body.skx-lux #skc-panel .skc-hd h4 { color: var(--c-linen); font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans); letter-spacing: var(--tr-label); } html body.skx-lux #skc-panel .skc-x { color: var(--c-taupe); min-width: 44px; min-height: 44px; } html body.skx-lux #skc-panel .skc-x:hover { color: var(--c-linen); } html body.skx-lux #skc-panel .skc-ticks i { background: rgba(239, 232, 222, .18); } html body.skx-lux #skc-panel .skc-ticks i.on { background: var(--c-brass-light); } html body.skx-lux #skc-panel .skc-step-n { color: var(--c-taupe); font-size: var(--fs-label); } html body.skx-lux #skc-panel .skc-q { font: var(--fw-regular) var(--fs-h4)/1.25 var(--font-display); } html body.skx-lux #skc-panel .skc-opt { min-height: 48px; background: var(--c-ivory); border-color: var(--c-line-strong); font: var(--fw-medium) var(--fs-label)/1.3 var(--font-sans); letter-spacing: .12em; } html body.skx-lux #skc-panel .skc-opt:hover { background: var(--c-espresso); border-color: var(--c-espresso); color: var(--c-linen); } html body.skx-lux #skc-panel .skc-in { min-height: 52px; background: var(--c-ivory); border-color: var(--c-line-strong); font-size: var(--fs-body); } html body.skx-lux #skc-panel .skc-send { min-height: 52px; background: var(--c-brass); color: var(--c-ink); border: 1px solid var(--c-brass-line); font: var(--fw-medium) var(--fs-small)/1 var(--font-sans); letter-spacing: var(--tr-button); } html body.skx-lux #skc-panel .skc-send:hover { background: var(--c-espresso); color: var(--c-linen); } html body.skx-lux #skc-panel .skc-err { color: var(--c-error); font-size: var(--fs-small); } html body.skx-lux #skc-panel #skc-email { color: var(--c-mute); font-size: var(--fs-label); min-height: 44px; display: inline-flex; align-items: center; } html body.skx-lux #skc-panel .skc-check :is(circle, path) { stroke: var(--c-brass-line); } html body.skx-lux #skc-toast { background: var(--c-espresso); color: var(--c-linen); font-family: var(--font-sans); } /* #skpO slide-in / exit popup: same palette, square, 44px close */ html body.skx-lux :is(.skp-card, .skp-body, .skp-wrap) { border-radius: 0 !important; font-family: var(--font-sans); } html body.skx-lux .skp-h { font-family: var(--font-display) !important; font-weight: var(--fw-regular) !important; text-transform: none !important; font-variation-settings: "opsz" 40; letter-spacing: var(--tr-heading); } html body.skx-lux .skp-wa-btn { background: var(--c-espresso) !important; color: var(--c-linen) !important; border: 1px solid var(--c-espresso) !important; border-radius: 0 !important; font-family: var(--font-sans) !important; font-weight: var(--fw-medium) !important; letter-spacing: var(--tr-button) !important; min-height: 52px; } html body.skx-lux .skp-wa-btn:hover { background: var(--c-brass) !important; color: var(--c-ink) !important; border-color: var(--c-brass-line) !important; } html body.skx-lux .skp-wa-btn svg { fill: currentColor !important; } html body.skx-lux .skp-x { min-width: 44px; min-height: 44px; } html body.skx-lux :is(.skp-form button, .skp-form [type="submit"]) { background: var(--c-brass) !important; color: var(--c-ink) !important; border: 1px solid var(--c-brass-line) !important; border-radius: 0 !important; font-family: var(--font-sans) !important; letter-spacing: var(--tr-button); text-transform: uppercase; } html body.skx-lux .skp-form input { border-radius: 0 !important; font-size: var(--fs-body) !important; min-height: 52px; } /* 16px at every width (no iOS zoom; desktop legibility): popup + article newsletter inputs */ html body.skx-lux :is(#spEmail, #blogEmail, .sp-input, .sp-email-cta-input, .skp-form input, #skc-panel .skc-in) { font-size: max(16px, var(--fs-body)) !important; } /* Campaign offer bar (skhai-offer-bar.php, Sunrise Suites 1090). Its script pins it under #main-navbar, which Luxury does not print, so it landed at top:0 over the Luxury header. Here it sits under the header (64/88px + 1px rule), follows it when the header auto-hides on scroll, and stays below the header layer so the mega panel, menu sheet, drawer and modals open over it (plugin z 1039 was above all of them). !important beats the script's inline top. */ html body.skx-lux #skhai-offer-bar { top: calc(var(--header-h-mobile) + 1px) !important; z-index: calc(var(--z-header) - 1); transition: top var(--dur-slow) var(--ease-silk); font-family: var(--font-sans); } @media (min-width: 992px) { html body.skx-lux #skhai-offer-bar { top: calc(var(--header-h) + 1px) !important; } } html body.skx-lux:has(.lx-header.is-hidden:not(.is-open):not(:focus-within)) #skhai-offer-bar { top: 0 !important; } /* hero copy clears header + bar when the hero is taller than the screen (short phones): the content box already reserves --header-h (88px) + sp-7, so the extra is the bar (60px on 390, ~90px at 320) less that slack */ html body.skx-lux:has(#skhai-offer-bar:not([hidden])) .lx-hero__content { padding-top: calc(var(--header-h) + var(--sp-7) + 4.5rem); } @media (min-width: 992px) { html body.skx-lux:has(#skhai-offer-bar:not([hidden])) .lx-hero__content { padding-top: calc(var(--header-h) + var(--sp-7) + 3rem); } } html body.skx-lux #skhai-offer-bar .sob-btn { border-radius: 0; font-family: var(--font-sans); letter-spacing: .04em; } /* In-content offer strip (1090 excerpt): inline Trirong -> Luxury display; floating widgets (launcher + Luxury sticky bar) fade while it is on screen (plugin toggles body.skhai-hide-float; the Luxury past-hero rules re-show otherwise) */ html body.skx-lux .skhai-offer-strip [style*="Trirong"] { font-family: var(--font-display) !important; } html body.skx-lux.skhai-hide-float :is(#skc-cc, .lx-sticky-cta) { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity .2s ease, visibility 0s linear .2s; } /* 08 ─ AI chat widget (child-theme asset) ─────────────────────────────── */ html body.skx-lux #skhai-chat-toggle { border-radius: 0; background: var(--c-espresso); color: var(--c-linen); box-shadow: var(--shadow-2); } html body.skx-lux #skhai-chat-panel { border-radius: 0; font-family: var(--font-sans); background: var(--c-linen); } html body.skx-lux #skhai-chat-panel .skhai-chat-header { background: var(--c-espresso); color: var(--c-linen); border-radius: 0; } html body.skx-lux #skhai-chat-panel .skhai-chat-header-title { font-family: var(--font-display); font-weight: var(--fw-regular); } html body.skx-lux #skhai-chat-panel .skhai-chat-close { min-width: 44px; min-height: 44px; } html body.skx-lux #skhai-chat-panel .skhai-chat-input { font-size: var(--fs-body); border-radius: 0; } html body.skx-lux #skhai-chat-panel .skhai-chat-send { border-radius: 0; background: var(--c-brass); color: var(--c-ink); } html body.skx-lux #skhai-chat-panel .skhai-chat-msg-user { background: var(--c-espresso); color: var(--c-linen); } /* stage 7 plugin-UI pass: 44px launcher on phones (was 50×42), AA meta text (footer / timestamps were light grey) */ html body.skx-lux #skhai-chat-toggle { min-width: 44px; min-height: 44px; } html body.skx-lux #skhai-chat-panel :is(.skhai-chat-footer, .skhai-chat-msg-time, .skhai-chat-limit) { color: var(--c-mute) !important; opacity: 1 !important; } html body.skx-lux #skhai-chat-panel .skhai-chat-msg-bot { background: var(--c-ivory); border: 1px solid var(--c-sand); border-radius: 0; color: var(--c-ink); } html body.skx-lux #skhai-chat-panel .skhai-chat-msg-user .skhai-chat-msg-time { color: var(--c-taupe) !important; } html body.skx-lux #skhai-chat-panel .skhai-chat-input { background: var(--c-ivory); border-color: var(--c-line-strong); } html body.skx-lux #skhai-chat-panel .skhai-chat-send { min-width: 44px; min-height: 44px; border: 1px solid var(--c-brass-line); } @media (max-width: 991px) { html body.skx-lux.lx-past-hero #skhai-chat-toggle { bottom: calc(72px + env(safe-area-inset-bottom)); } } /* 09 ─ Project enquiry band (non-default page footer kept above the Luxury footer) */ .skx-lux .skx-lux-footer-extra { background: var(--c-espresso); color: var(--c-linen); } .skx-lux .skx-lux-footer-extra > footer { background: transparent !important; } .skx-lux .skx-lux-footer-extra :is(h2, .h2) { color: var(--c-linen); } .skx-lux .skx-lux-footer-extra :is(h2, .h2) :is(i, em) { color: var(--c-brass-light); } .skx-lux .skx-lux-footer-extra a:not(.btn) { color: var(--c-linen); } /* 10 ─ 404 (template-parts/luxury/404.php) — from mockups/luxury/css/pages/404.css ─ */ .skx-lux .skx-nf-hero { min-height: min(88vh, 900px); background: radial-gradient(ellipse 70% 60% at 50% 38%, rgba(168,138,94,.16), rgba(168,138,94,0) 70%), var(--c-espresso); } @supports (height: 1svh) { .skx-lux .skx-nf-hero { min-height: min(88svh, 900px); } } .skx-lux .skx-nf-hero .lx-hero__content { align-self: center; gap: var(--sp-4); padding-block: var(--sp-9) var(--sp-8); max-width: 60rem; } .skx-lux .skx-nf-numeral { font: italic 400 clamp(4.5rem, 3rem + 6vw, 8.5rem)/.8 var(--font-display); color: var(--c-brass-light); opacity: .55; letter-spacing: -.02em; margin-bottom: var(--sp-2); font-variant-numeric: lining-nums; } .skx-lux .skx-nf-hero .skx-nf-title { max-width: 22ch; font-size: clamp(2.5rem, 1.9rem + 2.4vw, 4.5rem); } .skx-lux .skx-nf-hero .skx-nf-lead { max-width: 40rem; color: #E6DDCF; } .skx-lux .skx-nf-hero .lx-hero__actions { justify-content: center; } .skx-lux .skx-nf-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .skx-lux .skx-nf-more { margin-top: var(--sp-8); } .skx-lux .skx-nf-news .lx-intro { margin-bottom: var(--sp-6); } .skx-lux .skx-nf-news__form { width: min(100%, 36rem); margin-inline: auto; display: grid; gap: var(--sp-3); } @media (min-width: 560px) { .skx-lux .skx-nf-news__form { grid-template-columns: 1fr auto; } .skx-lux .skx-nf-news__fine, .skx-lux .skx-nf-news__msg { grid-column: 1 / -1; } } .skx-lux .skx-nf-news__fine { text-align: center; } .skx-lux .skx-nf-news__msg { font-size: var(--fs-small); color: var(--c-success); text-align: center; } .skx-lux .skx-nf-news__msg.is-error { color: var(--c-error); } .skx-lux .skx-nf-quick { padding-block: var(--sp-6); } .skx-lux .skx-nf-quick ul { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sp-2) var(--sp-4); } .skx-lux .skx-nf-quick a:not(.lx-btn) { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sp-2); font: var(--fw-medium) var(--fs-label)/1 var(--font-sans); letter-spacing: .2em; text-transform: uppercase; color: var(--c-taupe); text-decoration: none; border-bottom: 1px solid transparent; } .skx-lux .skx-nf-quick a:not(.lx-btn):hover { color: var(--c-linen); border-bottom-color: var(--c-brass-light); } .skx-lux .skx-nf-hero .lx-hero__scrim { background: linear-gradient(180deg, rgba(29,24,20,.55), rgba(29,24,20,.72)); } .skx-lux .skx-nf-quick ul { list-style: none; margin: 0; padding: 0; } /* 11 ─ Legacy observeMe scroll-reveal: never leave content blank (audit: reveal blanks). Luxury's own .lx-reveal (below the fold only) is unaffected. */ .skx-lux [data-visible].visible-no, .skx-lux [data-visible]:not(.visible-yes) { opacity: 1 !important; transform: none !important; animation: none !important; } /* 12 ─ The parent theme animates anchor scrolls in JS (scrollToElement); CSS smooth scrolling on top of it double-eases and makes programmatic scrolls async. Keep the parent's single behaviour. */ html:has(> body.skx-lux) { scroll-behavior: auto !important; } /* 13 ─ Header states + legacy hero fit ────────────────────────────────── Solid pages: an opaque linen bar (nothing ghosts through the wordmark / nav). Overlay pages (skx_lux_header_overlay(): home, project, post, 404): transparent bar with linen type over the dark hero, linen once scrolled (ui.js .is-solid) or when a mega panel opens (system.css). */ .skx-lux .lx-header:not(.lx-header--overlay) { background: var(--c-linen); } /* the legacy heroes now start at y=0 under the bar: clear its height for top-anchored hero content */ .skx-lux.skx-lux-overlay .rs_listing_page_header { padding-top: calc(var(--header-h-mobile) + var(--sp-5)) !important; } @media (min-width: 992px) { .skx-lux.skx-lux-overlay .rs_listing_page_header { padding-top: calc(var(--header-h) + var(--sp-5)) !important; } } /* hero copy on the same side gutter as the header bar (legacy containers go edge-to-edge at 768–1199) */ @media (max-width: 1199px) { .skx-lux :is(.ui_page_header_content-container, .rs_listing_page_header > .container, .sp-hero-inner > .container) { padding-inline: var(--gutter) !important; } } /* 14 ─ Legacy content remnants under the flag (restyle only: text, order and presence unchanged) ─ */ /* status chips: brass dot + Jost 500 12px caps (never smaller); on imagery a linen chip keeps contrast */ .skx-lux .skhai-card-status { display: inline-flex !important; align-items: center; gap: .6em; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--c-ink) !important; font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; } .skx-lux .rs_badge { display: inline-flex !important; align-items: center; gap: .6em; padding: .6em .95em !important; border: 0 !important; border-radius: 0 !important; background: var(--c-linen) !important; color: var(--c-ink) !important; backdrop-filter: none !important; font: var(--fw-medium) var(--fs-label)/1 var(--font-sans) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; } .skx-lux :is(.skhai-card-status, .rs_badge-status)::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c-brass-line); } /* eyebrows (h6.titletag / .titletagJust): lx-label, not hairline Bodoni caps */ .skx-lux :is(h5, h6):is(.titletag, .titletagJust, .titletagJost), .skx-lux p.titletagJost { font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans) !important; letter-spacing: var(--tr-label) !important; text-transform: uppercase; color: var(--c-mute); } .skx-lux :is(h5, h6):is(.titletag, .titletagJust) b { font-weight: var(--fw-medium); color: var(--c-ink); } /* /contact/: inline #fafafa helper copy (invisible on the pale photo, pre-existing) + inline neon WhatsApp button */ .skx-lux .ui-contact p[style*="fafafa"] { color: var(--c-ink) !important; opacity: 1 !important; font-family: var(--font-sans) !important; } .skx-lux a[href*="wa.me"][style*="25d366"] { display: inline-flex !important; align-items: center; gap: var(--sp-3); min-height: 52px; padding: 0 1.75rem !important; background: var(--c-espresso) !important; color: var(--c-linen) !important; border: 1px solid var(--c-espresso) !important; font: var(--fw-medium) var(--fs-small)/1.2 var(--font-sans) !important; letter-spacing: var(--tr-button) !important; } .skx-lux a[href*="wa.me"][style*="25d366"]:hover { background: var(--c-brass) !important; color: var(--c-ink) !important; border-color: var(--c-brass-line) !important; } /* home "Free investment guides" band (inline #1D1D1B / white alphas) → espresso, linen/taupe, umber cards */ .skx-lux section.skhai-hp-guide { background: var(--c-espresso) !important; color: var(--c-linen) !important; } .skx-lux .skhai-hp-guide h2 { color: var(--c-linen) !important; font-family: var(--font-display) !important; font-weight: var(--fw-regular) !important; } .skx-lux .skhai-hp-guide p { color: var(--c-taupe) !important; font-family: var(--font-sans) !important; } .skx-lux .skhai-hp-guide > div > p:first-child { color: var(--c-brass-light) !important; font-weight: var(--fw-medium) !important; font-size: var(--fs-label) !important; } .skx-lux .skhai-hp-guide a[href*="/docs/"] { color: var(--c-linen) !important; } .skx-lux .skhai-hp-guide a[href*="/docs/"] > div { background: var(--c-umber) !important; border: 1px solid rgba(239, 232, 222, .12); transition: border-color var(--dur-base) var(--ease-out); } .skx-lux .skhai-hp-guide a[href*="/docs/"]:hover > div { border-color: var(--c-brass-light); } .skx-lux .skhai-hp-guide a[href*="/docs/"] > div > div:first-child { font-family: var(--font-display) !important; font-weight: var(--fw-regular) !important; } .skx-lux .skhai-hp-guide a[href*="/docs/"] > div > div:nth-child(2) { color: var(--c-taupe) !important; font-size: var(--fs-label) !important; } .skx-lux .skhai-hp-guide a[href*="/docs/"] span { font: var(--fw-medium) var(--fs-label)/1 var(--font-sans) !important; letter-spacing: var(--tr-button) !important; border-color: rgba(239, 232, 222, .5) !important; padding: .9rem 1.5rem !important; } /* Instagram band: collapsed by ui.js while the LightWidget feed reports no content (outage never leaves a blank band) */ .skx-lux [data-theme-part="ui-instagram"].skx-empty { display: none; } /* footer: four live columns spread across the container (the mock's fifth, newsletter, is not live content) */ @media (min-width: 992px) { .skx-lux .lx-footer__cols:has(> div:nth-child(4):last-child) { grid-template-columns: repeat(4, auto); justify-content: space-between; } } /* 404: numeral over the photo reads muddy at .55 */ .skx-lux .skx-nf-numeral { opacity: .85; text-shadow: 0 2px 24px rgba(29, 24, 20, .45); } /* project hero (phones): breadcrumb is overprinted by the status badges → hidden ≤575 (as #main-breadcrumb); 576–991: the badge row sits above it instead of on it */ @media (max-width: 575px) { .skx-lux .rs_listing_page_header nav[aria-label="breadcrumb"] { display: none; } } @media (min-width: 576px) and (max-width: 991px) { .skx-lux .rs_listing_page_header nav[aria-label="breadcrumb"] { padding-top: 3.25rem; } } /* 10 ─ Header mega: classic teasers kept (prices, Operating Projects card) + "coming soon" items ── */ .skx-lux .lx-mega__soon > span { display: flex; flex-direction: column; justify-content: center; min-height: 48px; padding-block: 6px; font: var(--fw-regular) var(--fs-h4)/1.2 var(--font-display); color: var(--c-mute); cursor: default; } .skx-lux .lx-mega__soon small { font: var(--fw-medium) var(--fs-label)/1.4 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--c-mute); } .skx-lux .lx-mega__stat { display: grid; gap: var(--sp-2); margin-top: var(--sp-5); padding: var(--sp-5); background: var(--c-ivory); border: 1px solid var(--rule); text-decoration: none; color: var(--c-ink); } .skx-lux .lx-mega__stat:hover { border-color: var(--c-brass-line); } .skx-lux .lx-mega__stat-num { font: var(--fw-regular) var(--fs-numeral)/1 var(--font-display); font-variant-numeric: lining-nums; color: var(--c-brass-text); } .skx-lux .lx-mega__stat-title { font: var(--fw-regular) var(--fs-h4)/1.2 var(--font-display); } .skx-lux .lx-mega__stat-desc { font: var(--fw-regular) var(--fs-small)/1.5 var(--font-sans); color: var(--c-mute); } .skx-lux .lx-sheet__soon > span { display: flex; align-items: baseline; gap: var(--sp-3); min-height: 44px; align-items: center; font-size: var(--fs-body); color: var(--c-taupe); } .skx-lux .lx-sheet__soon small { font: var(--fw-medium) var(--fs-label)/1 var(--font-sans); letter-spacing: .16em; text-transform: uppercase; } /* 992–1279px: the three left items fit beside the wordmark at the tightened tracking — Staylar stays in the bar */ @media (min-width: 992px) and (max-width: 1279px) { .skx-lux .lx-nav__item--wide-only { display: block; } .skx-lux .lx-mega__narrow-only { display: none; } } /* 11 ─ skhai-popup-plugin panel (#skpO): fits the viewport, close always reachable, AA dismiss ─── Plugin untouched. Bold Brown/Outfit requests resolve to the Jost file too (no external font). */ @font-face { font-family: "BrownPopup"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } @font-face { font-family: "Outfit"; font-style: normal; font-weight: 600 900; font-display: swap; src: url(fonts/jost-normal-latin.woff2) format("woff2"); } html body.skx-lux .skp-overlay :is(.skp-body, .skp-p, .skp-trust, .skp-or, .skp-fine, .skp-dismiss, .skp-email-row input, .skp-email-row button, .skp-link) { font-family: var(--font-sans) !important; } html body.skx-lux .skp-overlay :is(.skp-email-row button, .skp-trust) { font-weight: var(--fw-medium) !important; } html body.skx-lux .skp-overlay { padding: 16px; background: var(--c-veil); } @media (max-width: 767px), (max-height: 700px) { html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-wrap { max-height: calc(100vh - 32px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; justify-content: flex-start; } @supports (height: 1dvh) { html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-wrap { max-height: calc(100dvh - 32px); } } } html body.skx-lux .skp-overlay .skp-x { width: 44px !important; height: 44px !important; top: 8px !important; right: 8px !important; z-index: 3; font-size: 24px; color: var(--c-linen) !important; background: rgba(29, 24, 20, .55) !important; border-radius: 50%; } html body.skx-lux .skp-overlay .skp-x:hover { background: var(--c-espresso) !important; } html body.skx-lux .skp-overlay .skp-x:focus-visible { outline: 2px solid var(--c-brass-light); outline-offset: 2px; } html body.skx-lux .skp-overlay .skp-dismiss { min-height: 44px; padding: 10px 16px; margin-top: 8px; color: var(--c-linen) !important; opacity: 1; text-decoration: underline; text-decoration-color: rgba(239, 232, 222, .5); text-underline-offset: .25em; font-size: var(--fs-small); } html body.skx-lux .skp-overlay .skp-dismiss:hover { color: var(--c-brass-light) !important; } html body.skx-lux .skp-overlay.skp-lp .skp-fine, html body.skx-lux .skp-overlay.skp-lp .skp-or { color: var(--c-taupe) !important; } html body.skx-lux .skp-overlay.skp-lp .skp-p { color: rgba(239, 232, 222, .86) !important; } html body.skx-lux .skp-overlay.skp-lp :is(.skp-card, .skp-body) { background: var(--c-espresso) !important; } html body.skx-lux .skp-overlay.skp-lp .skp-trust { color: var(--c-brass-light) !important; letter-spacing: .14em; } /* media: 3:2 header on phones, 4:5 column beside the copy from 768px */ html body.skx-lux .skp-overlay .skp-media { border-radius: 0; } @media (max-width: 767px) { html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-card { flex-direction: column; } html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-media { width: 100% !important; min-height: 0 !important; aspect-ratio: 16 / 9; flex: none; } html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-body { width: 100% !important; padding: 20px 20px 18px !important; } html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-h { font-size: 1.375rem !important; line-height: 1.25 !important; margin-bottom: .75rem !important; } } @media (max-width: 767px) and (min-height: 760px) { html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-media { aspect-ratio: 3 / 2; } } @media (min-width: 768px) { html body.skx-lux .skp-overlay .skp-card { flex-direction: row; align-items: stretch; } html body.skx-lux .skp-overlay .skp-media { width: 40% !important; min-height: 0 !important; aspect-ratio: 4 / 5; align-self: stretch; flex: none; } } html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-card { flex-shrink: 0; } html body.skx-lux .skp-overlay.skp-lp .skp-wa-btn { background: var(--c-brass) !important; color: var(--c-ink) !important; border-color: var(--c-brass-line) !important; } html body.skx-lux .skp-overlay.skp-lp .skp-wa-btn:hover { background: var(--c-linen) !important; border-color: var(--c-linen) !important; } @media (max-width: 767px) { html body.skx-lux .skp-overlay:not(.skp-variant-b) .skp-x { position: fixed !important; top: 24px !important; right: 24px !important; } } html body.skx-lux:has(#skpO.is-visible) #skc-cc { visibility: hidden !important; } /* 12 ─ Editorial lists count in figures (01, 02…) so they never echo the Roman chapter numerals */ .skx-lux .lx-list-editorial > li::before { content: counter(lx, decimal-leading-zero); font-style: normal; font-variant-numeric: lining-nums tabular-nums; } /* 13 ─ Pre-footer "Get in Touch" band (ui-contact template part, CF7 #117): a 5/7 split — the live photo framed 4:5 on the left, heading + form on linen on the right (was a full-bleed photo under a wash). Markup untouched; the bootstrap container/row dissolve into the band's grid at >=992px. */ .skx-lux .ui-contact { background: var(--c-linen) !important; } .skx-lux .ui-contact > .gpy-8 { display: none !important; } .skx-lux .ui-contact .h2 { font: var(--fw-regular) var(--fs-h2)/1.1 var(--font-display); color: var(--c-ink); margin-bottom: var(--sp-6); } .skx-lux .ui-contact .h2 .font-weight-200 { font-weight: var(--fw-regular) !important; } .skx-lux .ui-contact .h2 em { color: var(--accent-text); } .skx-lux .ui-contact .form-detail { font: var(--fw-regular) var(--fs-small)/1.4 var(--font-sans); color: var(--c-mute); display: inline-flex; gap: .4em; align-items: center; } @media (min-width: 992px) { .skx-lux .ui-contact { --uc-w: min(100% - 2 * var(--gutter), var(--container-max)); --uc-g: clamp(3rem, 5vw, 6rem); display: grid; column-gap: 0; align-items: start; padding-block: var(--section-y); grid-template-columns: minmax(0, 1fr) calc((var(--uc-w) - var(--uc-g)) * 5 / 12) var(--uc-g) calc((var(--uc-w) - var(--uc-g)) * 7 / 12) minmax(0, 1fr); } .skx-lux .ui-contact > .container, .skx-lux .ui-contact > .container > .row { display: contents; } .skx-lux .ui-contact > .container > .row > [class*="col-"] { grid-column: 4; width: auto; max-width: none; padding: 0; flex: none; } .skx-lux .ui-contact > .container > .row > [class*="col-"]:first-child { grid-row: 1; } .skx-lux .ui-contact > .container > .row > [class*="col-"]:nth-child(2) { grid-row: 2; } .skx-lux .ui-contact > .ui-contact-background { position: sticky !important; top: calc(var(--header-h) + var(--sp-5)) !important; left: auto !important; right: auto !important; bottom: auto !important; grid-column: 2; grid-row: 1 / span 2; align-self: start; width: 100%; height: auto !important; aspect-ratio: 4 / 5; max-height: calc(100vh - var(--header-h) - 2 * var(--sp-5)); overflow: hidden; background: var(--c-sand); } @supports (height: 1svh) { .skx-lux .ui-contact > .ui-contact-background { max-height: calc(100svh - var(--header-h) - 2 * var(--sp-5)); } } /* the plate travels beside the heading + form (sticky) so the split reads as one plate all the way down (was a 4:5 crop that stopped halfway down the form, leaving an empty linen column). The retired yacht still is swapped for Villa Doppio at dusk (boot.php skx_lux_ui_contact_image): the crop keeps the lit living room over the pool */ .skx-lux .ui-contact > .ui-contact-background img { object-position: 50% 60% !important; } } @media (max-width: 991px) { /* the still opens the band (was an orphan between SEND and the footer) */ .skx-lux .ui-contact { display: flex; flex-direction: column; } .skx-lux .ui-contact > .container { padding-block: var(--sp-7) var(--section-y-sm); } .skx-lux .ui-contact > .ui-contact-background_mobile { order: -1; margin: var(--section-y-sm) var(--gutter) 0 !important; width: auto; aspect-ratio: 3 / 2; } .skx-lux .ui-contact > .ui-contact-background_mobile img { object-position: 50% 60% !important; } .skx-lux .ui-contact > .ui-contact-background_mobile::before { display: none; padding-top: 0; } } /* 13b ─ Theme modals (bootclean toggler as the close button): the two bars were drawn in --primary beige on the white panel (1.3:1) in a 36px box. Ink bars, 44px target; ui.js gives the button its name ("Close"). */ .skx-lux .modal .btn-modal-close { --toggler-color: var(--c-ink); width: 44px; height: 44px; top: 6px; right: 6px; } .skx-lux .modal-video .btn-modal-close { top: 0; right: 0; } .skx-lux .modal .btn-modal-close .ui-toggler { justify-content: center; } .skx-lux .modal .btn-modal-close .ui-toggler-icon, .skx-lux .modal .btn-modal-close .ui-toggler-icon::before, .skx-lux .modal .btn-modal-close .ui-toggler-icon::after { width: 26px; } .skx-lux .modal .btn-modal-close.closed .ui-toggler-icon::before { top: calc(50% - 1px); } .skx-lux .modal .btn-modal-close.closed .ui-toggler-icon::after { bottom: calc(50% - 1px); } .skx-lux .modal .btn-modal-close:hover { --toggler-color: var(--c-brass-text); } /* 14 ─ Home: guides with the destination image, intro still paired with the film, rail link on phones */ .skx-lux .lxp-guide .lxp-guide__media { --ratio: 3 / 2; } .skx-lux .lxp-guide .lxp-guide__media img { opacity: .92; } /* 15 ─ Phones/tablets: a split whose text column opens a chapter reads marker → headline → copy → image */ @media (max-width: 991px) { .skx-lux .lx-split:has(> .lx-split__text .lx-chapter) > .lx-split__text { order: -1; } } /* 16 ─ Target size (WCAG 2.5.8 / 44px house rule): padding, not bigger type */ .skx-lux .lx-footer li a { min-width: 44px; } .skx-lux .lx-table :is(th, td) a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; } .skx-lux .lx-card__title a { display: inline-block; padding-block: 4px; min-height: 44px; } .skx-lux .lx-prose a[data-skx-nextsection] { display: inline-flex !important; align-items: center; min-height: 44px !important; padding-bottom: 0 !important; border-bottom: 0 !important; background: linear-gradient(var(--c-brass), var(--c-brass)) left calc(100% - 8px) / 100% 1px no-repeat; } .skx-lux .lxp-guide-foot .lx-link, .skx-lux .lx-rail-head .lx-link { min-width: 44px; } .skx-lux .lx-breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; } /* 17 ─ Chat panel (skhai-popup-plugin #skc-panel): "Prefer email?" + link spaced */ html body.skx-lux #skc-panel #skc-email u { margin-left: .4em; } /* inline-flex drops the space before */ /* 13 ─ popup "No thanks": on a solid espresso footer under the card (it floated over page copy on phones) */ html body.skx-lux .skp-overlay .skp-dismiss { display: block; width: 100%; margin-top: 0 !important; background: var(--c-espresso) !important; text-align: center; border-top: 1px solid rgba(239, 232, 222, .14); box-sizing: border-box; } /* 18 ─ Solid (sticky) header: its controls never trigger the page's scroll-padding. html has scroll-padding-top (anchor targets clear the header); a focused/scrolled-into-view control INSIDE the sticky header sits within that padding, so the browser scrolled the document up by up to ~440px before a menu tap / Shift+Tab — and the menu lock then saved and restored that wrong offset. A negative scroll margin of the same size puts the header's own controls outside the padding. */ .skx-lux .lx-header :is(a, button, input, select, textarea, [tabindex]) { scroll-margin-top: calc(-1 * (var(--header-h) + 16px)); } /* 19 ─ Desktop enquiry tab (#skc-cc) steps aside while a form control sits under it (bottom-right); ui.js sets .lx-cta-yield. Same fade as its entrance; the tab returns when the control scrolls on. */ @media (min-width: 992px) { html body.skx-lux.lx-past-hero.lx-cta-yield #skc-cc, html body.skx-lux.lx-cta-yield #skc-cc { opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none; } } @media (prefers-reduced-motion: reduce) { html body.skx-lux.lx-past-hero.lx-cta-yield #skc-cc, html body.skx-lux.lx-cta-yield #skc-cc { transform: none; } } /* Phones/tablets: the fixed enquiry bar (#skc-cc, or the .lx-sticky-cta fallback, 64px + safe area) sits over the page bottom, so the footer reserves that much below its last row (copyright + social icons stay clear at the very end). */ @media (max-width: 991px) { html body.skx-lux .lx-footer { padding-bottom: calc(var(--sp-6) + 4.5rem + env(safe-area-inset-bottom)); } } /* Perf: closed overlays (desktop mega panels, phone menu sheet, enquiry drawer with its CF7 form) were only visibility:hidden, so their ~200 elements were styled and laid out on every full recalc (Lighthouse careers: styleLayout +700ms at 4x CPU vs classic). content-visibility:hidden skips that subtree while closed; the discrete transition keeps the content rendered through the existing close fade (it flips back only after the fade). Scripts that measure inside a closed overlay still get layout on demand. */ .skx-lux :is(.lx-sheet, .lx-drawer):not(.is-open), .skx-lux .lx-nav__item:not(.is-open) > .lx-mega { content-visibility: hidden; } .skx-lux .lx-sheet { transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow), content-visibility 0s linear var(--dur-slow) allow-discrete; } .skx-lux .lx-drawer { transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow), content-visibility 0s linear var(--dur-slow) allow-discrete; } .skx-lux .lx-mega { transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base), content-visibility 0s linear var(--dur-base) allow-discrete; } .skx-lux :is(.lx-sheet, .lx-drawer).is-open, .skx-lux .lx-nav__item.is-open > .lx-mega { transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .skx-lux :is(.lx-sheet, .lx-drawer, .lx-mega) { transition-duration: 0s !important; transition-delay: 0s !important; } } /* 17 ─ :has() fallbacks (Firefox < 121, Safari < 15.4, Chromium < 105, Samsung Internet < 20). ui.js adds html.lx-nohas only where CSS.supports('selector(:has(*))') is false and mirrors the few layout states read through :has() above and in the page sheets: lx-skc-live (chat launcher is the phone bar), lx-offerbar, lx-hdr-hidden / lx-hdr-shown, lx-popup-open, data-lx-has on count-aware grids, .lx-split--chapter. Cosmetic :has() rules (focus rings, spinners, empty spacers, smooth scroll) simply do not apply there. No effect in browsers that support :has(). */ html.lx-nohas.lx-hdr-hidden body.skx-lux #skhai-offer-bar { top: 0 !important; } html.lx-nohas.lx-offerbar body.skx-lux .lx-hero__content { padding-top: calc(var(--header-h) + var(--sp-7) + 4.5rem); } @media (min-width: 992px) { html.lx-nohas.lx-offerbar body.skx-lux .lx-hero__content { padding-top: calc(var(--header-h) + var(--sp-7) + 3rem); } } html.lx-nohas.lx-popup-open body.skx-lux #skc-cc { visibility: hidden !important; } @media (min-width: 992px) { html.lx-nohas .skx-lux .lx-footer__cols[data-lx-has="four"] { grid-template-columns: repeat(4, auto); justify-content: space-between; } } @media (max-width: 991px) { html.lx-nohas .skx-lux .lx-split--chapter > .lx-split__text { order: -1; } html.lx-nohas.lx-skc-live:not(.skc-conv) body.skx-lux .ip-sticky-cta, html.lx-nohas.lx-skc-live:not(.skc-conv) body.skx-lux .st-sticky-cta, html.lx-nohas.lx-skc-live:not(.skc-conv) body.skx-lux-property #sticky-property-cta { display: none !important; } } @media (min-width: 992px) { html.lx-nohas.lx-skc-live body.skx-lux-property #sticky-property-cta .d-flex { padding-right: 16rem; } } html.lx-nohas.lx-skc-live body.skx-lux-villas-lp .float-cta { display: none; } html.lx-nohas.lx-hdr-hidden body.skx-lux-property #main-navbar { top: 0; } html.lx-nohas.lx-hdr-hidden body.skx-lux-insights .insights-primary-nav { top: 0 !important; } html.lx-nohas.lx-hdr-shown body.skx-lux .ip-guide-cta { top: var(--header-h-mobile); } @media (min-width: 992px) { html.lx-nohas.lx-hdr-shown body.skx-lux .ip-guide-cta { top: var(--header-h); } } @media (max-width: 767px) { html.lx-nohas .skx-lux .ip-grid[data-lx-has="three"] { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); } html.lx-nohas .skx-lux .ip-grid[data-lx-has="three"] .ip-grid-label { font-size: var(--fs-small); margin-top: var(--sp-2); } html.lx-nohas .skx-lux .ip-grid:not([data-lx-has="three"]) > .ip-grid-cell:last-child:nth-child(odd) { grid-column: 1 / -1; } html.lx-nohas .skx-lux .ip-grid:not([data-lx-has="three"]) > .ip-grid-cell:last-child:nth-child(odd) img { aspect-ratio: 3 / 2; } html.lx-nohas .skx-lux .st-grid[data-lx-has="three"] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%; gap: var(--sp-4); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); scrollbar-width: none; } html.lx-nohas .skx-lux .st-grid[data-lx-has="three"] > .st-grid-cell { scroll-snap-align: start; } html.lx-nohas .skx-lux .st-grid[data-lx-has="three"] .st-grid-cell img { aspect-ratio: 4 / 3; } html.lx-nohas .skx-lux .st-grid:not([data-lx-has="three"]) > .st-grid-cell:last-child:nth-child(odd) { grid-column: 1 / -1; } } @media (min-width: 640px) { html.lx-nohas .skx-lux .ip-dev-grid[data-lx-has="only"] { grid-template-columns: 1fr; } } @media (min-width: 1100px) { html.lx-nohas .skx-lux .ip-dev-grid[data-lx-has="four"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.lx-nohas .skx-lux .ip-dev-grid[data-lx-has="other"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } html.lx-nohas .skx-lux .ip-dev-grid[data-lx-has="other"] > .ip-dev-card:not(.ip-dev-full) { grid-column: span 2; } html.lx-nohas .skx-lux .ip-dev-grid[data-lx-has="other"] > .ip-dev-card:not(.ip-dev-full):nth-child(3n+1):nth-last-child(2):not(:first-child) { grid-column: 2 / span 2; } html.lx-nohas .skx-lux .ip-dev-grid[data-lx-has="other"] > .ip-dev-card:not(.ip-dev-full):nth-child(3n+1):last-child:not(:first-child) { grid-column: 3 / span 2; } } /* 18 ─ Password pages, crawled unlocked 2026-09-30: the Sunrise Lake price list (template-sunrise-lake-pricing.php, client-facing) and the waitlist test print their own