/* ========================================================================= cta-n12.css — one call to action, stated the same way every time. The home page asks four times (hero, where to start, close) and before this file each ask looked slightly different: three paddings, two labels for the same destination, and in the where-to-start band the roles were inverted -- the finder was the solid button and the call was the quiet link, which is backwards from everywhere else on the page. There are exactly THREE roles, and they never swap: PRIMARY book a 15-minute call solid cream, black text -> the calendar, or this page's own offer. SECONDARY find your starting point -> cream text, hairline under, arrow -> still this page's offer: book it, open it, jump to it. TERTIARY see how the software works the same thing in CLAY -> -> a DIFFERENT page. The split between the second and the third is about DESTINATION, not about emphasis. If the link keeps you here -- booking, requesting a login, jumping down the page -- it is cream. If it sends you somewhere else on the site, it is clay. So the colour tells you whether you are about to leave, before you read the label. CLAY, NOT PEACH. The two clay links this replaces on the planning page were peach #E4BCAC, and peach is not a site colour: counted across assets/css, clay #B28479 appears 48 times spread over all three pages, while peach appears 42 times of which 38 are the software page's own two files. It was a habit one page picked up. Clay is the accent the site actually owns, and it measures 5.65:1 on #171413 and 6.2 on #0F0D0C, so it clears 4.5 on both grounds this site uses. A reader who scrolls the whole page sees the same pair three times, so the second and third asks cost nothing to understand -- they are the first ask again, not a new decision. That is the entire point of standardising: repetition is only persuasive if it is recognisable. This file loads last so it wins over the per-section rules without editing them, which keeps hero-v1.css usable by the concept pages that still reference it. ========================================================================= */ /* ------------------------------- primary ------------------------------- .pl-btn-primary is the planning page's. It is listed here rather than restyled there so the two pages cannot drift: one definition, one button, whatever page it is on. */ .n12-cta, .st-btn, .cl-btn, .pl-btn-primary, /* The software page's button was defined separately in software-n12.css and happened to match this to the byte -- same 16/700, same 15px 26px, same cream on black. Happening to match is not the same as being the same rule, and the two would have drifted the first time either moved. It joins the list. */ .sw-btn--primary, /* and the automation page's two, which were 14px in their own file */ .auto-btn--primary, .cs-cta-actions .btn, .cs-modal-foot .btn, /* and the pricing page's two. Same reasoning as the software page's: joining the list rather than restating the rule in pricing-n12.css, so the button cannot drift the first time this one moves. */ .pr12-hero-actions .btn, .pr12-close-actions .btn, .ab12-close-actions .btn{ display:inline-flex;align-items:center;gap:10px; /* 17.5/30, up from 16/26. Swapping Questrial for League Spartan bought a real bold but cost apparent size: League Spartan is the narrower face with the smaller x-height, so the same 16px read visibly smaller than it had, and the button shrank from 205px to 196 with it. This is the same optical size as before, in the heavier face. */ padding:15px 26px;border:0;cursor:pointer; background:var(--n12-cream);color:var(--n12-black); /* Questrial here, League Spartan on a phone (mobile-n12.css). Questrial ships a single weight, so the 700 below is SYNTHESISED -- a smeared approximation the browser draws by thickening the roman. That is why the label has never looked as bold as it is specified, and swapping to League Spartan fixed the weight but changed the shape: narrower, more geometric, visibly not the face the rest of the site is set in. On a desktop, where the button is big enough for the letterforms to register, matching the site wins. At 14.5px on a phone it is the weight that registers, so that is where the real bold goes. */ font-family:'Questrial',sans-serif; /* 16px and 15/26, which is exactly what this was before any of it changed: 205x46. It went to 17.5/16/30 to answer "the button looks like it shrunk" -- and it had, from 205 to 196, because League Spartan is the narrower face. Now that Questrial is back the shrink is gone, so the compensation was counting the same problem twice and the button was 227x50: 22px wider and 4 taller than it ever was. */ font-size:16px;font-weight:700;letter-spacing:normal; line-height:1;white-space:nowrap; transition:background .16s ease,transform .16s ease; } /* shift-anim.css sets .lf-block .n12-cta to 16px, which a bare class here cannot outrank however late the file loads. It happens to be the same 16px now, but the three are restated together so all of them move as one if this ever changes again -- the alternative is the hero's button silently differing from the other two, which is a bug this page has already had once. */ .lf-block .n12-cta, .lf-block .st-btn, .lf-block .cl-btn{font-size:16px} /* THE PRIMARY BREATHES INSTEAD OF LIFTING. It moved 1px up on hover, which she did not want: a solid block shifting under the cursor makes the layout look unstable, and it is the gesture every button made in 2010. Her pick from the bench at /cta-test, after two rounds -- a cream glow that swells and settles while the cursor is on it, at the quietest of the three amplitudes offered. 3.4s, and only 22 -> 30px of blur across the cycle. The slow, shallow version exists because this runs for as long as someone is on the button, which makes it the one hover on the site a reader could get tired of. A big pulse gets annoying much faster than a small one, and a primary that sits on screen the whole time someone reads a band has to survive being looked at. Cream rather than clay: neutral light reads as the button being LIT, where a coloured one reads as something sitting behind it. */ .n12-cta, .st-btn, .cl-btn, .pl-btn-primary, .sw-btn--primary, .auto-btn--primary, .cs-cta-actions .btn, .cs-modal-foot .btn, .pr12-hero-actions .btn, .pr12-close-actions .btn, .ab12-close-actions .btn{box-shadow:0 0 0 0 rgba(246,241,234,0); transition:background .2s ease,box-shadow .28s ease} .n12-cta:hover, .st-btn:hover, .cl-btn:hover, .pl-btn-primary:hover, .sw-btn--primary:hover, .auto-btn--primary:hover, .cs-cta-actions .btn:hover, .cs-modal-foot .btn:hover, .pr12-hero-actions .btn:hover, .pr12-close-actions .btn, .ab12-close-actions .btn:hover{background:#fff;transform:none; animation:n12-breathe 3.4s ease-in-out infinite} @keyframes n12-breathe{ 0%,100%{box-shadow:0 0 22px 1px rgba(246,241,234,.34)} 50% {box-shadow:0 0 30px 2px rgba(246,241,234,.52)} } /* ------------------------------ secondary ------------------------------ All three are