/* * SENZA Formations - design system stylesheet. * * Shared foundation for the training and trainer page redesigns. * * Every selector is prefixed with "sz-" and every bare element rule is scoped under ".sz-page": * this sheet is loaded next to Bootstrap and the Skillgro theme (main.css), which already own * generic class names such as .btn, .badge, .card and .container. * * Colors, typography and weights come from the "--tg-*" tokens already declared in main.css and * are never redefined here. Only the layout tokens missing from the theme are introduced below. */ :root { /* * 1320px, not the 1240px of the mock-up "--container" token. * * The mock-ups contradict themselves: they declare "--container: 1240px" with a ".container" * class, but that class is instantiated zero time in the three files, while every page level * wrapper is written inline as "max-width:1320px; margin:0 auto; padding: 32px" -- * 20 occurrences across the three files, and not a single 1240px. The 1240px rule is dead * code in the mock-ups; 1320px with a 32px gutter is what the client actually sees. */ --sz-container: 1320px; --sz-radius-pill: 50px; --sz-radius-card: 16px; --sz-radius-sm: 8px; /* Hard drop shadow: the signature of the Skillgro buttons. */ --sz-shadow-btn: 4px 6px 0 0 var(--tg-common-color-blue); --sz-shadow-btn-yellow: 4px 4px 0 0 #3d3d3d; --sz-shadow-card: 0 12px 30px rgba(87, 81, 225, 0.08); } /* ============================================================= Page scope ============================================================= */ .sz-page { background: var(--tg-common-color-white); font-family: var(--tg-body-font-family); font-size: var(--tg-body-font-size); font-weight: var(--tg-fw-regular); color: var(--tg-body-color); line-height: var(--tg-body-line-height); -webkit-font-smoothing: antialiased; } /* * The page scope is wrapped in :where() so it adds no specificity: these rules are defaults for * bare elements and must always lose to a component class. * * Written as ".sz-page a", the base link rule scores 0-1-1 and beats ".sz-btn" (0-1-0): every * rendered its label in primary blue on a primary blue background. The same * trap applies to ".sz-page h4" against ".sz-footer__title" and to ".sz-page p" against * ".sz-note". Scoping for isolation must not create a collision of its own. * * Link colour goes one step further and excludes classed elements outright -- see the note on * the rule itself. */ :where(.sz-page) *, :where(.sz-page) *::before, :where(.sz-page) *::after { box-sizing: border-box; } /* Not a component concern, so it applies to every link. */ :where(.sz-page) a { text-decoration: none; transition: all 0.25s ease; } /* * ":not([class])" rather than specificity arithmetic. Colour IS a component concern, and dropping * the scope to zero was not enough: ":where(.sz-page) a:hover" still scored 0-1-1 through its * pseudo-class and repainted any classed link that had no hover rule of its own -- an * turned yellow on hover. A rule that cannot match a classed element at * all cannot be outweighed by one either. * * Deliberately NOT applied to the heading and paragraph rules below: ".sz-price-sidebar__title" * is an

that carries a class and only overrides the font size, relying on the base rule for * its family, colour and weight. Excluding classed elements there would break it. */ :where(.sz-page) a:not([class]) { color: var(--tg-theme-primary); } :where(.sz-page) a:not([class]):hover { color: var(--tg-theme-secondary); } /* * ============================================================================================ * RULE FOR EVERY COMPONENT OF THIS SHEET BUILT ON AN OR A