/* SparkSome brand layer: fonts, colour tokens and the shared footer. Source of truth: branding/assets/css/sparksome-brand.css (copied to each landing by branding/sync.sh). Font URLs are relative, so keep the fonts/ folder next to this file. */ @font-face { font-family: Satoshi; src: url('fonts/Satoshi-Medium.woff2') format('woff2'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: Satoshi; src: url('fonts/Satoshi-Bold.woff2') format('woff2'); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: Satoshi; src: url('fonts/Satoshi-Black.woff2') format('woff2'); font-weight: 800 900; font-style: normal; font-display: swap; } :root { --ss-font: Satoshi, "Helvetica Neue", Arial, sans-serif; --ss-heading: #111827; --ss-text: #3B4355; --ss-muted: #6B7280; --ss-cyan: #06B6D4; --ss-cyan-dark: #0891B2; --ss-cyan-text: #0E7490; --ss-red: #E11D48; --ss-red-dark: #BE123C; --ss-yellow: #FFDC2A; --ss-light: #F3F4F6; --ss-border: #E1E1E1; --ss-white: #FFFFFF; --ss-dark: #111827; --ss-dark-soft: #102838; --ss-radius-pill: 999px; --ss-radius-card: 24px; --ss-radius-panel: 32px; /* Content width as on sparksome.pl (1216 px container minus 16 px padding each side). */ --ss-container: 1184px; --ss-gutter: 20px; } /* ---- Shared footer (same layout as sparksome.pl) ---- */ .ss-footer { margin-top: 0; padding: 80px 0 40px; background: var(--ss-white); color: var(--ss-text); font-family: var(--ss-font); font-size: 15px; line-height: 1.6; } .ss-footer * { box-sizing: border-box; } .ss-footer a { color: inherit; text-decoration: none; } .ss-footer__wrap { width: min(calc(100% - 2 * var(--ss-gutter)), var(--ss-container)); margin: 0 auto; } .ss-footer__panel { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 32px; padding: 56px; border-radius: var(--ss-radius-panel); background: var(--ss-cyan); color: var(--ss-white); } .ss-footer__panel p { margin: 0 0 14px; font-size: 14px; color: rgba(255, 255, 255, .92); } .ss-footer__panel a:hover { text-decoration: underline; text-underline-offset: 3px; } .ss-footer__logo { display: block; width: 180px; height: auto; margin-bottom: 28px; } .ss-footer__social { display: flex; gap: 18px; } .ss-footer__social a { display: inline-flex; width: 28px; height: 28px; align-items: center; justify-content: center; color: var(--ss-white); } .ss-footer__social svg { width: 22px; height: 22px; fill: currentColor; } .ss-footer__title { margin: 0 0 8px !important; color: var(--ss-white) !important; font-size: 15px !important; font-weight: 700; } .ss-footer__contact { display: flex; flex-direction: column; gap: 8px; font-size: 14px; } .ss-footer__panel > * { min-width: 0; } .ss-footer__contact a { display: inline-flex; align-items: center; gap: 10px; overflow-wrap: anywhere; } .ss-footer__contact svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* Landings style bare nav/footer elements; keep the footer nav independent of them. */ .ss-footer nav { display: block !important; margin: 0 !important; gap: 0 !important; } .ss-footer__bottom { display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding: 36px 0 0; } .ss-footer__bottom .ss-footer__title { color: var(--ss-heading) !important; font-size: 14px !important; } .ss-footer__sites { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; padding: 0; list-style: none; font-size: 14px; font-weight: 500; } .ss-footer__sites a:hover, .ss-footer__legal a:hover { color: var(--ss-cyan-text); } .ss-footer__sites [aria-current="page"] { color: var(--ss-cyan-text); font-weight: 700; } .ss-footer__legal { text-align: right; font-size: 13px; color: var(--ss-muted); } .ss-footer__legal p { margin: 0; } .ss-footer__badge { display: block; width: 220px; height: 100px; margin: 0 0 12px auto; border: 0; } .ss-footer a:focus-visible { outline: 3px solid var(--ss-yellow); outline-offset: 3px; border-radius: 4px; } @media (max-width: 991px) { .ss-footer__panel { grid-template-columns: 1fr 1fr; padding: 40px 32px; } .ss-footer__bottom { grid-template-columns: 1fr; } .ss-footer__legal { text-align: left; } .ss-footer__badge { margin-left: 0; } } @media (max-width: 620px) { .ss-footer { padding-top: 56px; } .ss-footer__panel { grid-template-columns: 1fr; gap: 24px; padding: 32px 24px; border-radius: var(--ss-radius-card); } .ss-footer__logo { margin-bottom: 18px; } .ss-footer__sites { flex-direction: column; } } /* ---- Accessibility controls in the header (same as nis2.sparksome.pl: A− A A+ and contrast) ---- */ .ss-a11y { display: inline-flex; align-items: center; gap: 4px; flex: none; font-family: var(--ss-font); } .ss-a11y button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ss-heading); font-family: var(--ss-font); font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; } .ss-a11y button:hover { color: var(--ss-cyan-text); } .ss-a11y button[aria-pressed="true"]:not([data-ss-contrast]) { color: var(--ss-cyan-text); background: #E6F7FA; } .ss-a11y button:focus-visible { outline: 3px solid var(--ss-yellow); outline-offset: 2px; } .ss-a11y__contrast svg { width: 22px; height: 22px; } @media (max-width: 620px) { .ss-a11y { gap: 0; } .ss-a11y button { min-width: 34px; height: 40px; padding: 0 4px; font-size: 13px; } .ss-a11y__contrast svg { width: 20px; height: 20px; } } /* ---- High contrast: dark background, white text, yellow links and buttons ---- */ html.ss-contrast { color-scheme: dark; } /* :where() keeps this base rule at low specificity so links, buttons and fields below win. */ html.ss-contrast body, html.ss-contrast body :where(*:not(img, picture, video, iframe, svg, svg *)) { background-color: #111827 !important; background-image: none !important; color: #FFFFFF !important; border-color: #FFFFFF !important; box-shadow: none !important; text-shadow: none !important; } html.ss-contrast body *::before, html.ss-contrast body *::after { background-image: none !important; box-shadow: none !important; } html.ss-contrast body a, html.ss-contrast body a :where(*:not(img)) { color: #FFDC2A !important; } /* Decorative shapes drawn with borders turn into white blocks; hide them. */ html.ss-contrast .hero-glow { display: none !important; } html.ss-contrast main a:not([class*="button"]):not([class*="btn"]) { text-decoration: underline !important; text-underline-offset: 3px; } html.ss-contrast :is(.button, .btn, [class*="button-"], .header-call, .submit-button, button[type="submit"], .mobile-call a, .mobile-cta a), html.ss-contrast :is(.button, .btn, [class*="button-"], .header-call, .submit-button, button[type="submit"], .mobile-call a, .mobile-cta a) * { background-color: #FFDC2A !important; color: #111827 !important; border-color: #FFDC2A !important; } html.ss-contrast :is(input, select, textarea) { background-color: #000000 !important; color: #FFFFFF !important; border: 2px solid #FFFFFF !important; } html.ss-contrast ::placeholder { color: #D1D5DB !important; opacity: 1; } html.ss-contrast :focus-visible { outline: 3px solid #FFDC2A !important; outline-offset: 3px; } html.ss-contrast img[src*="sparksome-logo.svg"] { filter: brightness(0) invert(1); } html.ss-contrast .ss-a11y button { background-color: transparent !important; color: #FFDC2A !important; } html.ss-contrast .ss-a11y button[aria-pressed="true"] { outline: 2px solid #FFDC2A; } html.ss-contrast .ss-a11y button[data-ss-contrast][aria-pressed="true"] { outline: 2px solid #FFDC2A; } html.ss-contrast .ss-footer__panel { border: 2px solid #FFFFFF; } html.ss-contrast .ss-footer__sites [aria-current="page"] { text-decoration: underline; } html.ss-contrast :is(.logo-grid, .nis2-logo-grid) img { opacity: 1 !important; filter: none !important; } html.ss-contrast .menu-toggle span { background-color: #FFFFFF !important; } /* ---- Mobile navigation bar, modelled on sparksome.pl (≤991px) ---- Hooks: [data-ss-menu] on the