/* tgs-pressed.css — THE PRESSED LOOK OF EVERY GOLD BUTTON, ONE RULE (round 10, B1). Adam, 9 Oct 2026: "Pressed buttons, every page, every device: gold at rest; pressed = #183965 with a gold stroke at the same weight as the website's desktop buttons; no gold tint. One shared rule where possible. The blog READ buttons' stroke currently looks thicker than the rest, so make it match. Include buttons on the blue background on Resources." THE WEBSITE'S WEIGHT, MEASURED (thegoldstandard-mobile @ aeff572, 1440 wide, mouse button held down; Chromium, WebKit and Firefox, device scale 1 and 2): ONE CSS pixel of #AA8355 on the button's own outer edge — its main button's "border: 1px solid var(--gold)" (site.css, .btn) and its card button's "box-shadow: inset 0 0 0 1px var(--gold)" (resources.css, ":root .res-btn.is-pressed") draw the same line. Linked by every page that has a gold button (Quick Start, Switching, Webinars, Resources, the login page and the two welcome pages; Support Home, Helpful Videos and SwitchMax have none), with /shared/tgs-pressed.js, which holds the list of buttons, marks each one that is gold .tgs-pressable, and puts .is-pressed on it while a finger or a mouse button is down on it (and "is-touch" on while the page is used by touch). The four ":not(#_)" add weight and nothing else (no element has that id): the pages' own button rules are written with up to three ids and "!important", and this rule has to win on every one of them without a copy per page. Net: .sync-staging/r10-b1-verify.cjs. */ /* nothing of the browser's own flashes over a tapped button */ .tgs-pressable{ -webkit-tap-highlight-color:transparent; } /* THE RULE. Pressed: solid navy, white lettering, a 1px gold stroke on the button's edge. --tgs-press-ring is set on each button by the script: 0px on a button that has a border (the border itself turns gold and is exactly 1px), 1px on a button that has none (a 1px line inside its edge). Never both. */ html .tgs-pressable.is-pressed:not(#_):not(#_):not(#_):not(#_){ background-color:#183965 !important; background-image:none !important; color:#ffffff !important; border-color:#AA8355 !important; border-width:calc(1px - var(--tgs-press-ring, 1px)) !important; box-shadow:inset 0 0 0 var(--tgs-press-ring, 1px) #AA8355 !important; filter:none !important; transition:none !important; } /* NO GOLD TINT, NOTHING LEFT BEHIND. A touch screen leaves :hover and :focus on the last tapped button: its hover colour, ring, lift or tint stayed until something else was touched. While the page is used by touch a button that is not being pressed is its resting gold (keyboard focus keeps its own look), and nothing fades. The third selector is for a mouse, as the website has it (site.css: ".btn:focus:not(:focus-visible):not(:hover)"): a button that was clicked keeps the focus, and the login page's LOG IN stayed pale gold (#FED48A) and its "Open an Account" navy until something else was clicked; once the pointer has left it, it is gold again. */ html.is-touch .tgs-pressable:hover:not(.is-pressed):not(:focus-visible):not(#_):not(#_):not(#_):not(#_), html.is-touch .tgs-pressable:focus:not(.is-pressed):not(:focus-visible):not(#_):not(#_):not(#_):not(#_), .tgs-pressable:focus:not(:hover):not(.is-pressed):not(:focus-visible):not(#_):not(#_):not(#_):not(#_){ background-color:#AA8355 !important; color:#ffffff !important; box-shadow:none !important; filter:none !important; } html.is-touch .tgs-pressable:not(:focus-visible):not(#_):not(#_):not(#_):not(#_){ transform:none !important; transition:none !important; } /* ROUND 11, C1 (Adam, 12 Oct 2026; the team's desktop note of 12 Oct: "All buttons should turn #183965 when hovered over or clicked. If against a blue background, then the gold stroke should be applied. Copy button functionality from the website. This applies to quickstart guides, resources page, helpful videos, switching page.") UNDER A REAL POINTER, FROM 1025 WIDE, on those four pages (the buttons the script marks .tgs-hov): under the pointer AND with the mouse button down solid #183965, white lettering, nothing moves the gold stroke ONLY on a button that sits on blue (.tgs-onblue, read from the page by the script): 1px #AA8355 on its own edge. A button on a light background has NO stroke, under the pointer or pressed timing the fill fades over .3s (ease), in and out; the stroke is there at once keyboard focus the same #183965; each button's own focus ring is untouched THE WEBSITE, MEASURED (thegoldstandard-mobile @ f74aa5d, 1440 wide, a mouse; .sync-staging/round11-c1-probe.cjs): its card buttons (.res-btn, resources.css) are gold at rest; under the pointer, pressed and with keyboard focus solid rgb(24, 57, 101) with white lettering, "transition: background-color .3s"; on its navy strip (the Newsletter's VIEW / DOWNLOAD / SUBSCRIBE, READ MORE) they carry one CSS pixel of #AA8355 on the edge and on its light cards (TAKE QUIZ, the eBooks' VIEW / DOWNLOAD) none. A clicked button is gold again once the pointer has left it. THIS CHANGES round 10's B1 for a mouse from 1025 wide: there a pressed button on a light background had the stroke too, and the pointer's colour was #335076 over .15s. Phones, tablets (upright and on their side) and a window under 1025 wide are NOT changed: a touch screen answers neither "hover: hover" nor "pointer: fine", and carries .is-touch while it is used by touch — there every pressed button keeps round 10's navy with the gold stroke. Net: .sync-staging/round11-c1-verify.cjs. */ @media (min-width:1025px) and (hover:hover) and (pointer:fine){ html:not(.is-touch) .tgs-pressable.tgs-hov:not(#_):not(#_):not(#_):not(#_){ transition:background-color .3s ease !important; } html:not(.is-touch) .tgs-pressable.tgs-hov:hover:not(:focus-visible):not(#_):not(#_):not(#_):not(#_), html:not(.is-touch) .tgs-pressable.tgs-hov.is-pressed:not(:focus-visible):not(#_):not(#_):not(#_):not(#_){ background-color:#183965 !important; background-image:none !important; color:#ffffff !important; border-color:transparent !important; box-shadow:none !important; transform:none !important; filter:none !important; transition:background-color .3s ease !important; } html:not(.is-touch) .tgs-pressable.tgs-hov.tgs-onblue:hover:not(:focus-visible):not(#_):not(#_):not(#_):not(#_), html:not(.is-touch) .tgs-pressable.tgs-hov.tgs-onblue.is-pressed:not(:focus-visible):not(#_):not(#_):not(#_):not(#_){ border-color:#AA8355 !important; border-width:calc(1px - var(--tgs-press-ring, 1px)) !important; box-shadow:var(--tgs-hov-line, inset 0 0 0 1px #AA8355) !important; /* "none" on a button whose own border is the stroke: no shadow of any size is left on it */ } html:not(.is-touch) .tgs-pressable.tgs-hov:focus-visible:not(#_):not(#_):not(#_):not(#_){ background-color:#183965 !important; } } /* ROUND 11, C4 (Adam, 12 Oct 2026: "Login page: remove the login button's dark gold and drop shadow on mouse hover (no shadows). Give it the same hover as C1.") The login card's buttons (.tgs-hov-any: LOG IN and the Forgot-PIN form's buttons, one class on the page) under a real pointer: C1's look exactly — solid #183965, white lettering, nothing moves, no shadow, the fill fading over .3s, and the 1px gold stroke because the card they sit on is navy (.tgs-onblue, read from the page). At EVERY width: the old hover was at every width, and with it gone a narrow window would show no hover at all. Keyboard focus keeps the page's own look. A touch screen is not changed (round 10's B1). Net: .sync-staging/round11-c4-verify.cjs. */ @media (hover:hover) and (pointer:fine){ html:not(.is-touch) .tgs-pressable.tgs-hov-any:not(#_):not(#_):not(#_):not(#_){ transition:background-color .3s ease !important; } html:not(.is-touch) .tgs-pressable.tgs-hov-any:hover:not(:focus-visible):not(#_):not(#_):not(#_):not(#_), html:not(.is-touch) .tgs-pressable.tgs-hov-any.is-pressed:not(:focus-visible):not(#_):not(#_):not(#_):not(#_){ background-color:#183965 !important; background-image:none !important; color:#ffffff !important; border-color:transparent !important; box-shadow:none !important; transform:none !important; filter:none !important; transition:background-color .3s ease !important; } html:not(.is-touch) .tgs-pressable.tgs-hov-any.tgs-onblue:hover:not(:focus-visible):not(#_):not(#_):not(#_):not(#_), html:not(.is-touch) .tgs-pressable.tgs-hov-any.tgs-onblue.is-pressed:not(:focus-visible):not(#_):not(#_):not(#_):not(#_){ border-color:#AA8355 !important; border-width:calc(1px - var(--tgs-press-ring, 1px)) !important; box-shadow:var(--tgs-hov-line, inset 0 0 0 1px #AA8355) !important; /* "none" on a button whose own border is the stroke: no shadow of any size is left on it */ } }