/* Browser support floor: 2016–2018 (~99% reach). * Android 7+ / Chrome 55+, iOS 12.2+ / Safari 12.2+, desktop evergreen. * Same floor as css/main.css and css/in-person.css. * * The pieces every page shares, in-person-notarization/ included (that page * does not load main.css; css/in-person.css keeps the booking form's rules). * Loaded before main.css and before in-person.css, so either can still * adjust something here. * * 1. Tokens the theme colours (theming decisions, "Colour") * 2. Nav menu _includes/nav.html * 3. Aside _includes/aside.html ("What we do for you.") * 4. Fees _includes/fees.html and _includes/payment-methods.html * 5. Book button .book-button (the "Book Online" call to action) * 6. Standing notice _includes/standing-notice.html (a notary away, a holiday) * * The nav and the aside are sized in px rather than rem: the public pages set * html to 17px and the booking page leaves it at 16px, and these two should * be identical on both. */ /* --- 1. Tokens --- */ :root { /* brand, sampled from images/TNPmast.png */ --navy: #160966; --seal: #961B1E; /* neutrals: text is deep navy, never black */ --paper: #F3F6FA; --surface: #FFFFFF; --surface-sunk: #EEF1F6; --ink: #16204A; --ink-muted: #4A5578; --border: #C9D2E2; --border-soft: #DFE5EF; /* one meaning per hue. green: what to do (steps, services, buttons) */ --green: #2F5D3A; --green-hover: #234A2C; --green-tint: #E3F0E7; --green-border: #97C0A4; /* blue: guidance to read */ --blue: #1B4A87; --blue-hover: #143A6C; --blue-tint: #E2ECF9; --blue-border: #8FB2DE; /* red: warnings */ --red: #961B1E; --red-hover: #7A1517; --red-tint: #FBE9E9; --red-border: #DCA5A6; /* amber: expandable detail panels */ --amber: #7D4A06; --amber-tint: #FDF2D8; --amber-border: #E0C378; /* violet: standing notices (closures, a notary away) */ --violet: #46308A; --violet-tint: #ECE7F9; --violet-border:#B4A4E2; /* yellow: errors (a box the client missed) */ --warn: #6B4E00; --warn-tint: #FFF3C4; --warn-border: #D9A800; --radius: 14px; --radius-sm: 10px; --tap: 56px; /* minimum comfortable target */ --serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Lato is loaded from Google Fonts (_includes/site-head.html); the rest of the stack is what each platform falls back to while it loads. */ --display: Lato, "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", Arial, sans-serif; } /* --- 2. Nav menu --- */ /* A frosted-glass bar on a band of soft colour, under the masthead. The band is what the glass is seen against: a few soft washes of the brand navy, the guidance blue and the seal red. Where backdrop-filter is supported the bar is translucent and blurs them; elsewhere it is a near-opaque white with the same border and shadow, which reads as the same object. Not sticky. The theming decisions record the client turning down a sticky top bar and a floating menu, so the bar scrolls away with the masthead. Below 64em the links fold behind a "Menu" toggle. It is a checkbox (the input just before the