/* ============================================================ TOKENS — lifted from hs-pos-pro/public/index.html :root, then generalised when a second theme arrived. ⛔ THESE ARE ROLE RULES, NOT COLOUR FACTS, AND THE DIFFERENCE MATTERS. The earlier version of this block asserted "yellow is never text on cream" and "text ON yellow is ALWAYS ink". Both were true, neither survives a theme swap, and a rule stated as a hex fact is one nobody can apply to the next palette. Restated as roles: - --accent is a SURFACE. It is never text, except on --ink, where it has its own token (--accent-on-ink) precisely because a colour that works as a chip and a colour that works as text on a dark ground are not the same colour in every palette. - text ON --accent is ALWAYS --accent-ink, which inverts between themes. - --accent-ink-dim / -soft are the two dimmed variants of --accent-ink, BAKED. ⛔ Never reintroduce opacity to get them: opacity composites text toward the surface, so the same declaration raises contrast on a light chip and destroys it on a dark one. - --ink-rgb / --paper-rgb are channel twins used by every rgba() that needs the ground at partial alpha. ⛔ They MUST track their hex. - a theme declares EVERY colour token. An omitted one does not error, it inherits the default theme's value. None of that is enforceable by reading. tools/check-contrast.py asserts all of it, measures every text-on-surface pairing in every theme against AA, and carries a --selftest that proves it can go red first. python tools/check-contrast.py --selftest && python tools/check-contrast.py ============================================================ */ :root{ --ink:#000818; /* the logo's own night -- text, header, press */ --ink-rgb:0,8,24; /* ⛔ MUST equal --ink. check-contrast.py asserts it */ --paper:#F0F0F0; /* the silver ramp -- the ground */ --paper-rgb:240,240,240; /* ⛔ MUST equal --paper */ --card:#FFFFFF; --line:#D2D2D2; /* hairline on silver */ --line-ink:rgba(240,240,240,.28); /* hairline on the ink header */ --muted:#5A6270; /* 5.39:1 on silver */ --muted-ink:#A8B4C6; /* 9.55:1 on the navy */ /* ⛔ TWO ACCENT TOKENS, NOT ONE, AND THE SPLIT IS WHAT MAKES THIS PALETTE POSSIBLE AT ALL. No blue is symmetric: a blue dark enough to carry white is 3.28:1 as text on navy, and a blue light enough to read on navy cannot carry white. Serving both roles from one token is how a theme ships invisible text. The retired yellow got away with one token because #FFE600 is 14.54:1 against ink in BOTH directions -- as a chip under ink text AND as text on the dark header. That is the exception, not the rule, which is why the split is permanent and why the alternate below must declare both. */ --accent:#0057E0; /* the CHIP -- white on it 6.11:1 */ --accent-ink:#FFFFFF; /* text ON the chip is white, always */ --accent-on-ink:#3399FF; /* accent AS TEXT, ONLY ever on --ink, 6.81:1 */ --accent-ink-dim:#DCE8FB; /* 4.94:1 -- .card .lab on the chip */ --accent-ink-soft:#F2F6FE; /* 5.64:1 -- .card p on the chip */ --tint:#E6EEFF; /* pale blue — a STATE, never a button */ --ok:#10693C; --warn:#8A5200; --bad:#9B1C1C; --radius:14px; --tap:48px; /* ⛔ minimum a finger can hit */ --wrap:1240px; /* ══════ THE HOUSE PHONE SHELL ══════ Two numbers, each read in more than one place, and that is the whole reason they are variables rather than literals. ⛔ --m-gutter DRIVES BOTH HERO GAPS. The brief is that the gap from the header down to the inset image equals the gap from the screen edge in to it. Two separate numbers cannot stay equal -- somebody nudges the side padding for a longer headline and the top gap stops matching, invisibly. It also positions the dock, so the dock lines up with the hero card rather than merely looking as though it does. ⛔ --dock-h IS READ IN THREE PLACES: the bar is GIVEN this height, the body is padded by it, and the sheet clears it. On a sibling build the bar sized itself and the variable was only used for the page padding -- so it was an ESTIMATE, it was 8px short, and the footer sat under the dock with nothing erroring. */ --m-gutter:16px; --dock-h:68px; /* BRAND METAL AND BRAND LIGHT -- declared ONCE and NOT theme-flipped. This is the same call check-contrast.py already states for --brand-blue: they are non-text brand values with nothing sitting on top of them, so they have no pairing to measure and COLOUR_TOKENS deliberately does not demand them of every theme. The logo does not change when the palette does, so neither does its metal or its halo. MEASURED, AND IT DECIDES WHERE EVERY ONE OF THESE MAY BE USED: this silver ramp is 1.04:1 -> 1.39:1 against --paper and 12.18:1 -> 17.65:1 against --ink. On the cream sections the brightest AND the darkest parts of the metal are both the same value as the page under them -- chrome there is not subtle, it is absent. Metal reads as metal because it is a bright thing in a dark room; the ramp's own internal step is only 1.45:1, so it is the surround doing the work and not the gradient. Every use below is on ink, and that is a measurement rather than a preference. */ --metal-1:#E6E6E6; --metal-3:#FAFAFA; --brand-blue:#006FFF; /* NON-TEXT ONLY -- 4.14:1 on ink, 4.50 on navy */ --brand-blue-rgb:0,111,255; /* the hairline. Transparent at BOTH ends on purpose: a rule that runs edge to edge reads as a border, and a border is exactly what this replaces. */ --metal-rule:linear-gradient(90deg,transparent 0%, rgba(230,230,230,.18) 14%, var(--metal-1) 36%, var(--metal-3) 50%, var(--metal-1) 64%, rgba(230,230,230,.18) 86%, transparent 100%); } /* ============================================================ THE DEFAULT PALETTE -- Connected Spaces silver + blue. ⛔ THIS RECORD DOCUMENTS THE TOKENS IN :root ABOVE, NOT THE BLOCK BELOW. Blue/silver was the ALTERNATE until 2026-09-20, when Mario made it the default. It is Connected Spaces' OWN brand; the yellow it replaced was the house palette this build was forked with. Not one value moved when the block did -- the measurement below is still why each is what it is. Every value below was read off their own logo, then moved only as far as the arithmetic forced. The measured source colours are: signature blue #006FFF wordmark gradient #0050F0 -> #0096FA silver ramp #D2D2D2 #E6E6E6 #F0F0F0 #FAFAFA ground #000410 #000818 #000C1C ⛔ THE SIGNATURE BLUE CANNOT BE THE ACCENT, AND THAT IS ARITHMETIC RATHER THAN TASTE. The accent is a CHIP carrying text in five places, and #006FFF measures: white text ON it 4.45:1 FAIL ink text ON it 4.14:1 FAIL as text on the silver 3.91:1 FAIL as text on this navy 4.50:1 clears by 0.004, which is not a margin So it survives as --brand-blue, used ONLY where nothing sits on top of it, and the chip is the same hue darkened until white clears: 216.7 deg against the brand's 213.9 deg. Same move ancer-pools made (#1A75BC -> #3C9AE4) and ironfield (#F00000 -> #FF3333): a brand colour that fails as text needs a lifted sibling, not a redefinition of what "accessible" means. ⛔ --accent-ink IS WHITE HERE AND INK IN THE DEFAULT THEME. That inversion is the whole reason the accent had to become two tokens. All eleven card icons follow it for free -- .card .ico svg is fill:currentColor resolving to .card .ico's color:var(--accent-ink) -- so they flip to white on blue at 6.11:1 with no edit at all. ⛔ THE HEADER AND FOOTER STAY DARK IN BOTH THEMES, AND THAT IS A DEPENDENCY OF A BINARY ASSET, NOT A COLOUR PREFERENCE. The logo is an additive glow on black: on a light surface its chrome vanishes and the glow reads as a printing fault. It is not a recolourable mark and no dark-on-light variant can be derived by inverting it. Lightening --ink breaks a picture. Measured, all ten pairings, 0 failures: ink/paper 17.58 ink/card 20.04 muted/paper 5.39 muted/card 6.15 paper/ink 17.58 muted-ink/ink 9.55 accent-ink/accent 6.11 dim/accent 4.94 soft/accent 5.64 accent-on-ink/ink 6.81 ⚠ Blue has materially less headroom than yellow everywhere on the light-on- dark side (4.94-6.81 against yellow's 6.57-16.90), and this file sets -webkit-font-smoothing:antialiased, which thins light glyphs on dark. If it reads weak on a real screen the lever is darkening --accent toward #0047B8 -- NOT brightening the dim token, which has a hard ceiling of 6.11 at pure white. ============================================================ */ /* ⛔ THE RETIRED HOUSE PALETTE, KEPT ON PURPOSE AND NOT DELETED. check-contrast.py section A asserts at least two theme blocks -- "a guard that still passes once its subject has been deleted is not a guard" -- so deleting this turns the gate red. It also costs nothing: an alternate INHERITS every token it does not set, so this block is only the overrides. ⛔ --accent-ink INVERTS between the two themes. Both must declare it, or whichever forgets renders 3.28:1 in five places with nothing going red. That is section C, and it is the highest-value assertion in the guard. */ :root[data-theme="yellow"]{ --ink:#141414; /* text, the dark header, the press */ --ink-rgb:20,20,20; /* ⛔ MUST equal --ink */ --paper:#F7F5EF; /* the cream ground */ --paper-rgb:247,245,239; /* ⛔ MUST equal --paper */ --card:#FFFFFF; --line:#DEDCD6; /* hairline on cream */ --line-ink:rgba(247,245,239,.28); --muted:#606060; /* 5.77:1 on cream */ --muted-ink:#A8B1BF; /* 8.51:1 on ink (was recorded 8.65 -- remeasured) */ /* ⛔ BRIGHTER ON MARIO'S CALL, AND THE CHANGE THAT DOES THE WORK IS SATURATION, NOT LUMINANCE. #FFE34D carries a blue channel of 77, which is what made it read mustard. Dropping it to 0 is the visible step. Measured both directions, because yellow is ALSO text here (.press and .story .stat b, both on ink): ink on #FFE34D 14.34:1 -> ink on #FFE600 14.54:1 #FFE34D on ink 14.34:1 -> #FFE600 on ink 14.54:1 Both improved, so nothing had to be traded. One step further is #FFF200 (15.75:1) if he wants more; past that it goes green. */ --accent:#FFE600; /* the press and the money */ --accent-ink:#141414; /* ⛔ INVERTED against the default theme */ --accent-on-ink:#FFE600; /* accent AS TEXT, and ONLY ever on --ink */ --accent-ink-dim:#564F0E; /* was accent-ink @ opacity .72 -- .card .lab */ --accent-ink-soft:#3E3A10; /* was accent-ink @ opacity .82 -- .card p */ --tint:#FFF5CB; /* pale yellow — a STATE, never a button */ } /* ⛔ SCALE EXTENSION, RECORDED DELIBERATELY. The POS sanctioned scale is 13/14/16/18/23/30/40/42px and its own guard enforces membership. That scale was written for a COUNTER SCREEN read at arm's length. This is a marketing homepage whose reference sets its hero near 90px. Rather than silently violate the bar, the scale is EXTENDED for display type only: 56 / 72 / 90. Body copy stays inside the sanctioned set. */ :root{ --d1:90px; --d3:56px; --d4:42px; --d5:30px; } *{box-sizing:border-box} html,body{margin:0} body{ background:var(--paper); color:var(--ink); font:16px/1.55 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing:antialiased; } /* FLAT — bar.md mechanism 5. Nothing on this page casts a shadow. */ img,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} h1,h2,h3{margin:0;font-weight:800;letter-spacing:-.02em;line-height:1.05} p{margin:0} /* ---------- header: ink, like the POS header ---------- */ .hdr{position:sticky;top:0;z-index:50;background:var(--ink);color:var(--paper); border-bottom:1px solid var(--line-ink)} /* THE HAIRLINE IS ADDITIVE AND THE OLD BORDER STAYS UNDER IT ON PURPOSE. --metal-rule is a gradient held in a custom property; an engine that cannot resolve it drops the background and leaves the 1px --line-ink border exactly as it shipped, so the header degrades to what it was rather than to nothing. bottom:-1px lands the gradient ON that border, so the box model does not move by a pixel -- .hdr .wrap's 76px and the sticky offset are untouched. The header is the only ink surface on screen at ALL times, which is why the cheapest chrome on the site belongs here. */ .hdr::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:var(--metal-rule);pointer-events:none} .hdr .wrap{display:flex;align-items:center;gap:28px;height:76px} /* ⛔ THE HEADER IS TYPE, NOT THE LOGO IMAGE, AND THAT IS A MEASUREMENT. The lockup is 11.3:1; at the 36px this row allows it needs ~226px against roughly 160px of free space at 390 once the quote pill and the burger are placed -- it would overflow the phone header, which is the failure this file already documents for the nav. At 40px tall the full logo is illegible anyway. The wordmark's own proportion is width/cap-height 9.81 against Inter 800's ~11.5, so the tracking is pulled in to -.05em to sit closer to the artwork. */ .brand{font-size:23px;font-weight:800;letter-spacing:-.05em;margin-right:auto} /* ⛔ nowrap ON THE NAME ONLY. Putting it on .brand pinned the 59-character sub-line to one line too, which forced the header 126px past a 390px viewport and 155px past a 900px one -- the whole document scrolled sideways. The NAME must never break mid-word; the sub-line may wrap. */ .brand .b1,.brand .b2{white-space:nowrap} /* ⛔ min-width:0 SO THE BRAND CAN ACTUALLY SHRINK. A flex item defaults to min-width:auto, which refuses to go below its min-content -- so at 320 the row overflowed instead of wrapping. Measured: the pre-existing header fitted 320 with EXACTLY zero margin (24+108+12+105+12+35+24 = 320), so a brand name one character longer would have done this whatever it said. With this the two words break onto two lines, which is fine -- what must never happen is a break INSIDE a word, and that is what the nowrap above prevents. */ .brand{min-width:0} .brand .b2{margin-left:.28em} /* ⛔ THE TWO-TONE SPLIT IS BLUE ONLY, DELIBERATELY -- AND BLUE IS NOW DEFAULT. A blue SPACES on the yellow alternate would be the only blue on that page: it reads as a bug, and it puts the brand's own colour into the palette being compared against. So the rule is UNCONDITIONAL and the alternate stands it down, rather than the alternate switching it on. ⛔ check-contrast.py section E pins color:var(--accent-on-ink) at exactly 5 uses. This is one of them; color:inherit below adds none. */ .brand .b2{color:var(--accent-on-ink)} :root[data-theme="yellow"] .brand .b2{color:inherit} .brand small{display:block;font-size:13px;font-weight:400;color:var(--muted-ink);letter-spacing:0} /* ⛔ THE SUB-LINE STANDS DOWN IN ONE NARROW BAND, AND ONLY THERE. Between 861 and 1023 the row carries the brand, the full nav, the phone, the theme control AND the quote pill -- it was already tuned to the edge before the theme control existed, and the sub-line pushed it 33px past the viewport. Below 861 the nav collapses to the dock and the room comes back; above 1023 there was never a problem. Measured, not guessed: 0 document overflow at every width from 320 to 1920 afterwards. */ /* ⛔ AND IT STANDS DOWN BELOW 390 TOO, for the opposite reason: there it does not overflow, it WRAPS -- to 3 lines at 360 and 4 at 320, taking the header from its designed 69px to 90px. 390 is the width the phone shell was measured at and the sub-line fits in 2 lines there, holding 69px exactly. Narrower than that the name alone carries it; the tagline is still in the hero and the footer. */ @media (max-width:389px){ .brand small{display:none} } @media (min-width:861px) and (max-width:1023px){ .brand small{display:none} /* ⛔ AND THE ROW ITSELF HAS TO GIVE, because hiding the sub-line was not enough: the brand name alone is 228px and the row still ran 33px past the viewport. This band is the one place the full nav, the phone, the theme control and the quote pill are ALL present at once -- it was already at its limit before the theme control was added to it. */ .hdr .wrap{gap:18px} .nav{gap:16px} .pill-o{padding:0 12px} } .nav{display:flex;gap:26px;align-items:center} .nav a{font-size:14px;font-weight:600;color:var(--paper);opacity:.86} .nav a:hover{opacity:1} /* ---------- the Solutions drop-down ---------- ⛔ THE MARKUP SHIPPED WITHOUT THIS BLOCK and the panel rendered as eleven links inline across the header. Pure CSS: :hover for a mouse, :focus-within for Tab. The panel is the ink ground, so it reads as part of the header and every text/surface pairing is one the contrast guard already measures (--paper on --ink). */ .nav-drop{position:relative;display:flex;align-items:center;height:76px} .nav-drop>a::after{content:"";display:inline-block;margin-left:6px;vertical-align:2px; border:4px solid transparent;border-top-color:currentColor;border-bottom:0} .nav-drop-panel{position:absolute;top:100%;left:-18px;min-width:260px; display:none;flex-direction:column;padding:8px 0; background:var(--ink);border:1px solid var(--line-ink);border-top:0; border-radius:0 0 var(--radius) var(--radius);box-shadow:0 18px 40px rgba(0,0,0,.35)} .nav-drop:hover .nav-drop-panel,.nav-drop:focus-within .nav-drop-panel{display:flex} .nav-drop-panel a{display:block;padding:10px 18px;font-size:14px;white-space:nowrap} .nav-drop-panel a:hover,.nav-drop-panel a:focus{background:rgba(var(--paper-rgb),.08);opacity:1} /* the yellow pill = "where you are" / the primary action (POS 'Sell') */ .pill{background:var(--accent);color:var(--accent-ink);font-size:14px;font-weight:700; padding:0 20px;height:var(--tap);display:inline-flex;align-items:center; border-radius:var(--radius)} /* the theme control. ⛔ It is an FIRST and a handler second: if the script fails to mount it still works, costing a reload instead of being instant. ⛔ It is deliberately NOT tinted with --accent -- a control that changes colour with the thing it is comparing contaminates the comparison. */ .theme-t{gap:8px} .theme-t .tv,.sheet [data-theme-toggle] .tv{font-weight:400;color:var(--muted-ink)} .pill-o{border:1px solid var(--line-ink);color:var(--paper);font-size:14px;font-weight:700; padding:0 20px;height:var(--tap);display:inline-flex;align-items:center;border-radius:var(--radius)} .burger{display:none;background:none;border:1px solid var(--line-ink);color:var(--paper); border-radius:10px;width:var(--tap);height:var(--tap);font-size:18px} /* ---------- hero ---------- */ .hero{position:relative;min-height:88svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)} .hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .hero .scrim{position:absolute;inset:0; background:linear-gradient(90deg,rgba(var(--ink-rgb),.88) 0%,rgba(var(--ink-rgb),.62) 42%,rgba(var(--ink-rgb),.15) 78%,rgba(var(--ink-rgb),0) 100%)} .hero .wrap{position:relative;padding-bottom:92px;padding-top:120px} .hero h1{font-size:var(--d1);color:var(--paper)} .hero p.sub{font-size:var(--d3);font-weight:400;color:var(--paper);letter-spacing:-.02em; line-height:1.1;margin-top:6px;max-width:16ch} .hero .cta{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap} /* the ink press with yellow text — POS 'Charge', bar.md mechanism 2 */ .press{background:var(--ink);color:var(--accent-on-ink);font-size:16px;font-weight:800; height:var(--tap);padding:0 26px;display:inline-flex;align-items:center; border-radius:var(--radius);border:1px solid var(--line-ink)} .press-y{background:var(--accent);color:var(--accent-ink);border:0} .press-o{background:transparent;color:var(--paper);border:1px solid rgba(var(--paper-rgb),.5)} /* ---------- section furniture ---------- */ section{padding:104px 0} .eyebrow{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .stitle{font-size:var(--d4);margin-top:14px;max-width:22ch} .stitle b{font-weight:800} .stitle .thin{font-weight:400} /* ---------- 11 solution cards: a CAROUSEL, which is how Nice runs them ---- Measured in Nice's homepage.css: .solutions-cards__slide{padding:40px;max-width:520px;border-radius:10px} .solutions-cards .swiper-button-prev/next{width:40px;height:40px} .solutions-cards .swiper-button-prev/next{display:none} (<=767px) ie. a swiper with arrows on desktop and swipe-only on a phone. The first build flattened that into a static 4-up grid -- which is most of why it read as a spec sheet rather than a brand. COLOUR: the POS palette has ink, cream and one yellow, and no third hue to spend. So the colour is the PHOTOGRAPH -- each card carries the picture from that category's own page on niceforyou.com -- and yellow stays what it is everywhere else on this page: the accent you point at. */ /* ⛔ NO PARTIAL CARDS. The first build sized a card at clamp(280px,25vw,420px) -- a width with no relationship to the track it sits in -- so whatever was left over after the last whole card became a sliver of the next one. That is not a "there is more" affordance, it just reads as unfinished, which is exactly how Mario read it. The width is DERIVED from the track instead, so N cards and their gaps fill it exactly and there is nothing left over to cut. A percentage flex-basis resolves against the flex container's CONTENT box, which is what makes this land on the pixel rather than near it: .wrap 1240 - 48 padding = 1192, minus the track's own 8 = 1184 3 cards = (1184 - 40) / 3 = 381.33 and 3*381.33 + 40 = 1184 exactly 11 cards three at a time is 8 steps, and the last step lands on cards 9-11 whole -- so there is no partial at the END of the track either, which is the half of this that a fixed card width gets wrong even when it fits. */ .carou{position:relative;margin-top:44px;--per:3;--gap:20px} .track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:4px 4px 10px; scrollbar-width:none;-ms-overflow-style:none} .track::-webkit-scrollbar{display:none} .card{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per)); scroll-snap-align:start; background:var(--card);border:1px solid var(--line);border-radius:var(--radius); overflow:hidden;display:flex;flex-direction:column; transition:border-color .18s ease} .card:hover,.card:focus-visible{border-color:var(--accent);outline:none} .card .shot{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--ink)} .card .shot img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .card:hover .shot img{transform:scale(1.05)} /* the icon rides the photograph on a yellow tab -- it keeps Nice's own iconography (9 of 11 of which were white-on-white until they were fixed) and is the one place the accent shows on a card at rest */ .card .ico{position:absolute;left:18px;bottom:0;width:56px;height:56px; background:var(--accent);color:var(--accent-ink); border-radius:var(--radius) var(--radius) 0 0; display:flex;align-items:center;justify-content:center;padding:11px} .card .ico svg{width:100%;height:100%;fill:currentColor;display:block} .card .body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1; transition:background .18s ease} .card:hover .body,.card:focus-visible .body{background:var(--accent)} /* ⛔ THE CHIP FLIPS ON :hover AND ON :focus-visible, SO EVERY TEXT RULE MUST DO BOTH. It used to paint the chip on focus and recolour the text on hover only, so tabbing to a card gave --muted on the accent: 4.96:1 in yellow (survivable, which is why nobody saw it) and 1.01:1 the moment the accent is a dark blue -- invisible text, reachable by keyboard alone. ⛔ AND h3 / .more CARRIED NO color AT ALL. They inherited --ink, which is correct on a white card by accident and is 3.28:1 the moment --accent-ink has to invert to white. A missing declaration does not error; it inherits. ⛔ THE opacity IS GONE AND MUST NOT COME BACK. opacity composites text TOWARD the surface, so dimming dark-on-light RAISES contrast and dimming light-on-dark DESTROYS it -- the same declaration, opposite outcomes, and no token-pair guard can see it because the pair it would measure is not the pixel that gets painted. The two dim tokens are the composited pixels, baked: ink @.72 over #FFE600 -> #564F0E (6.57:1, byte-identical to today) ink @.82 over #FFE600 -> #3E3A10 (8.62:1, byte-identical to today) */ .card .lab{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)} .card:hover .lab,.card:focus-visible .lab{color:var(--accent-ink-dim)} .card h3{font-size:18px;margin-top:6px} .card:hover h3,.card:focus-visible h3{color:var(--accent-ink)} .card p{font-size:14px;color:var(--muted);margin-top:12px;flex:1} .card:hover p,.card:focus-visible p{color:var(--accent-ink-soft)} .card .more{font-size:14px;font-weight:700;margin-top:18px} .card:hover .more,.card:focus-visible .more{color:var(--accent-ink)} .card .more::after{content:" \2192"} /* arrows: Nice puts them after the track, right-aligned. 40px there, 48 here because --tap is the minimum a finger can hit and that rule is not ours to relax. */ .carou-nav{display:flex;gap:14px;justify-content:flex-end;margin-top:28px} .cbtn{width:var(--tap);height:var(--tap);border-radius:100px;background:transparent; border:1px solid var(--line);color:var(--ink);font-size:20px;line-height:1; display:flex;align-items:center;justify-content:center;cursor:pointer; transition:background .16s ease,border-color .16s ease} .cbtn:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)} /* ---------- 8 product spotlights ---------- MEASURED, not chosen. Nice: max-height 543px, media and text 50% each, picture aspect-ratio 1.56132, and their .container is width:100% -- full bleed. The first build put these inside the 1240px wrap with a 64px gap, which computes to a 564x301 image where Nice's is ~848x543: 2.9x less picture. That is exactly what Mario saw. 1776px outer - 80px padding = 1696 content; 1696/2 = 848 wide; 848 / 1.56132 = 543 tall -- ie. lands precisely on Nice's own cap. */ .prod-wrap{max-width:1776px;margin:0 auto;padding:0 40px} .spot{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin-top:104px} .spot:first-of-type{margin-top:56px} .spot.flip .media{order:2} /* ⛔ PRE-EXISTING, NOT FROM THIS ROUND -- old.html overflows by the same 12px, so it shipped in the build that is already deployed. .spot is align-items:stretch, so the media was stretched to the row height that the TEXT column sets, and aspect-ratio then derived its WIDTH from that height. At 900px: text 300.7 tall -> 300.7 * 1.56132 = 469.5 wide, in a 426px track, and the document scrolls sideways. It only looked correct at desktop BY COINCIDENCE: there max-height:543 caps the stretch, and 543 * 1.56132 = 848, which is exactly the track width. A layout that lands right at one viewport and blows out at the others is not a layout, it is an accident. width:100% + align-self:start makes the WIDTH drive and the height follow, which gives the identical 848x543 at desktop and fits every other width. */ .spot .media{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden; width:100%;align-self:start; aspect-ratio:1.56132;max-height:543px} .spot .media img{width:100%;height:100%;object-fit:cover} /* ⛔ A FOCAL POINT IS A PROPERTY OF THE PHOTOGRAPH, NOT OF THE VIEWPORT, so this sits OUTSIDE the media query and applies at every width. `cover` centres what it keeps, which is only ever correct when the subject is centred -- and a marketing banner's subject usually is not. Measured on the speaker banner (2000x1150): the speaker occupies source x 1230-2000, ie. it runs off the right edge of the photograph itself. A centred window ending at x 1575 showed under half of it on a phone, and even the desktop window clipped it at x 1899. Right-aligning the window is the only thing that shows the whole product, at BOTH widths. */ .spot .media img.fx-r{object-position:100% 50%} .spot>div:last-child{display:flex;flex-direction:column;align-items:flex-start; justify-content:center;padding:0 0 0 72px} .spot.flip>div:last-child{padding:0 72px 0 0} .spot h3{font-size:var(--d4);max-width:16ch} .spot .lab{font-size:13px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted); margin-bottom:12px;display:block} .spot p{font-size:16px;color:var(--muted);margin-top:18px;max-width:46ch} .spot .press{margin-top:32px} .spot .cta{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap} .spot .cta .press{margin-top:0} /* ---------- his story band (NOT Nice's corporate story) ---------- */ /* THE LOGO'S OWN LIGHT, NOT THE THEME'S. The halo is part of the artwork -- the webp is 38% soft glow -- so it stays --brand-blue in BOTH palettes, the same way the logo image itself does. It is a background with nothing on top of it, so --brand-blue's 4.14:1 is not a text figure and no pairing applies. This band is the largest flat ink surface on the page and carried nothing at all before this. */ .story{background:var(--ink);color:var(--paper);position:relative} .story::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(46% 88% at 20% 64%, rgba(var(--brand-blue-rgb),.17) 0%, rgba(var(--brand-blue-rgb),.05) 45%, transparent 70%)} .story .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center} .story h2{font-size:var(--d4);color:var(--paper);max-width:18ch} .story p{font-size:16px;color:var(--muted-ink);margin-top:20px;max-width:52ch} .story .stat{display:flex;gap:40px;margin-top:36px} .story .stat b{display:block;font-size:var(--d5);color:var(--accent-on-ink);font-variant-numeric:tabular-nums} .story .stat span{font-size:13px;color:var(--muted-ink);letter-spacing:.06em;text-transform:uppercase} .story img{border-radius:var(--radius)} /* ---------- the brand band ---------- */ /* THE ONE PLACE THE LOGO IS SHOWN THE WAY IT WAS DRAWN. Before this the artwork appeared exactly ONCE on the whole page -- the footer, 260px wide, the last thing anybody sees before they leave -- and 38% of that file is soft glow made for a near-black ground it was never given. This band is that ground. INK ONLY, and that is load-bearing rather than a colour preference: the asset has no dark-on-light variant and none can be derived by inverting it, and its silver measures 1.04:1 against the cream. Lighten this band and the logo does not look worse, it disappears. */ .brandband{position:relative;background:var(--ink);padding:76px 24px;text-align:center; border-top:1px solid var(--line-ink);border-bottom:1px solid var(--line-ink)} .brandband::before,.brandband::after{content:"";position:absolute;left:0;right:0; height:1px;background:var(--metal-rule);pointer-events:none} .brandband::before{top:-1px} .brandband::after{bottom:-1px} .brandband .glow{position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 120% at 50% 46%, rgba(var(--brand-blue-rgb),.20) 0%, rgba(var(--brand-blue-rgb),.07) 40%, transparent 72%)} .brandband img{position:relative;display:inline-block;width:min(400px,74vw);height:auto} .brandband p{position:relative;margin:20px auto 0;font-size:12px;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--muted-ink)} @media (max-width:760px){ .brandband{padding:56px 20px} .brandband p{letter-spacing:.1em;font-size:11px} } /* ---------- closing CTA ---------- */ /* ---------- request a quote (the form Sage can fill) ---------- Ink text on --card and --paper only; --ok / --bad carry the result line. ⛔ font-size 16px on the fields is load-bearing: under 16px iOS Safari zooms the page on focus and leaves it zoomed. */ .quote{background:var(--paper)} .quote .wrap{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:start} .quote-intro p{font-size:16px;color:var(--muted);margin-top:20px;max-width:46ch} .quote-intro a{color:var(--ink);font-weight:700;text-decoration:underline} .quote-form{background:var(--card);border:1px solid var(--line);border-radius:var(--radius); padding:32px;display:grid;gap:18px} .qf-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px} .qf-row{display:grid;gap:6px;min-width:0} .qf-row label{font-size:14px;font-weight:700;color:var(--ink)} .quote-form input,.quote-form textarea{font:inherit;font-size:16px;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:10px; min-height:var(--tap);padding:10px 14px;width:100%;box-sizing:border-box} .quote-form textarea{resize:vertical;min-height:110px} .quote-form input:focus,.quote-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)} .qf-hint{font-size:13px;color:var(--muted);margin:-8px 0 0} .quote-form .press{justify-self:start;cursor:pointer} .quote-form .press:disabled{opacity:.6;cursor:progress} .qf-status{font-size:15px;font-weight:600;margin:0;padding:12px 14px;border-radius:10px; border:1px solid var(--line);color:var(--ink);background:var(--paper)} .qf-status a{color:inherit;text-decoration:underline} .qf-ok{color:var(--ok);border-color:var(--ok)} .qf-bad{color:var(--bad);border-color:var(--bad);background:var(--card)} @media (max-width:860px){ .quote .wrap{grid-template-columns:1fr;gap:28px} .quote-form{padding:20px} .qf-pair{grid-template-columns:1fr} .quote-form .press{justify-self:stretch;justify-content:center} } .cta-band{position:relative;overflow:hidden;background:var(--ink)} /* ⛔ object-position IS LOAD-BEARING HERE, NOT A NUDGE. This band is a fixed ~460px tall and as wide as the viewport, so cover shows only a shallow horizontal window of the source and throws the rest away: 3200x1792 source -> rendered 1920x1075 -> 615px of it overflows centred (the default 50%), the visible window is source y 512..1279 and her eyes sit ON the top edge with the crown of her head cut off. 30% lifts the window to roughly source y 307..1074, which puts her whole face (about y 400..850) comfortably inside. ⛔ Do NOT "fix" this by cropping the source file instead -- the band's aspect ratio changes with every viewport width, so a baked-in crop is only ever correct at one of them. */ .cta-band img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 30%} .cta-band .scrim{position:absolute;inset:0; background:linear-gradient(90deg,rgba(var(--ink-rgb),.9) 0%,rgba(var(--ink-rgb),.6) 50%,rgba(var(--ink-rgb),.1) 100%)} .cta-band .wrap{position:relative;padding:132px 24px} .cta-band h2{font-size:var(--d3);color:var(--paper);max-width:14ch} .cta-band .press{margin-top:32px} /* ---------- footer: ink ---------- */ .ftr{background:var(--ink);color:var(--paper);padding:72px 0 40px} .ftr .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px} .ftr h4{font-size:14px;font-weight:700;margin:0 0 16px} .ftr a,.ftr p{font-size:14px;color:var(--muted-ink);display:block;margin-bottom:10px} .ftr a:hover{color:var(--paper)} .ftr p.sarea{line-height:1.6} /* ⛔ THE LOGO IS A SIBLING OF .fbrand, NOT ITS CONTENT. See the markup. ⛔ AND IT ONLY EVER SITS ON A DARK GROUND. It is an additive glow on black: on --paper or --card the silver chrome vanishes and the glow reads as a printing fault. It is not a recolourable mark and no dark-on-light variant can be derived by inverting it, which makes 'the header and footer stay ink' a dependency of a binary asset rather than a colour preference. */ .ftr .flogo{display:block;width:min(260px,72%);height:auto;margin-bottom:14px} .ftr .fbrand{font-size:23px;font-weight:800;letter-spacing:-.03em;margin-bottom:18px} .ftr .base{border-top:1px solid var(--line-ink);margin-top:48px;padding-top:24px; display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap} .ftr .base p{font-size:13px;margin:0} .disc{font-size:13px;color:var(--muted-ink);max-width:70ch;margin-top:12px} /* ══════════════════════ THE HOUSE PHONE SHELL ══════════════════════ Slim header · inset hero · copy in a card under it · app dock at the foot. Every client site ships this from commit 1; it is template, not polish. 🔴 IT IS ALSO A BUG FIX HERE, AND THAT IS THE REAL REASON IT IS URGENT. Before this block, at <=860px the page did .nav,.pill-o{display:none} and showed a burger -- and grep found the string "burger" exactly three times in this file: the CSS, that display rule, and the button markup. THERE WAS NO HANDLER. So every phone visitor had NO navigation at all: Solutions, Products, About and Contact were unreachable except by scrolling the whole page, and the page looked completely fine. That is the documented failure -- a nav that fails to mount does not degrade, it DELETES itself, and nothing goes red. ⛔ .hero-media EXISTS SO THE DESKTOP HERO IS BYTE-FOR-BYTE UNCHANGED. The video was position:absolute directly inside .hero. To inset it on a phone it needs a box of its own -- so the wrapper takes the absolute positioning on desktop (identical result) and becomes a real, flowing, inset card below 860. Restyling the