/* ============================================================================
PKWARE micro-sites — design tokens
----------------------------------------------------------------------------
EVERY VALUE IN THIS FILE WAS READ OUT OF PKWARE's OWN style.css ON 2026-10-20.
Nothing here is picked, matched by eye, or sampled from a screenshot. If a
value looks wrong, it is wrong in this file and not on the website — check it
against the theme rather than adjusting it here.
The main site declares ~90 tokens. This is the subset two reference sites
need. Adding one is allowed; inventing a COLOUR is not. The palette below is
the whole brand palette and there is nothing outside it.
Drop this file in as-is and link it before the site stylesheet:
========================================================================== */
:root {
/* --- Brand palette, verbatim --------------------------------------- */
--pk-navy: #1e3074; /* the brand colour. Headings, header band */
--pk-cyan: #09bcef; /* the action colour. Buttons, focus ring */
--pk-frost: #0fe4a2; /* the accent. Rules, ticks, small marks */
--pk-white: #FFFFFF;
--pk-grey: #f1f5fa; /* the only tint. Alternate bands, table zebra */
--pk-silicone: #47494c; /* body copy */
--pk-slate: #4c5c68; /* secondary copy, captions */
--pk-blue: #1152be; /* links */
--pk-deep-purple: #25275c; /* the darker navy. Footer */
--pk-coral: #f95557; /* warnings only. Almost never used */
/* RGB triplets, so rgba() can be derived without a new colour. */
--pk-navy-rgb: 30, 48, 116;
--pk-cyan-rgb: 9, 188, 239;
--pk-frost-rgb: 15, 228, 162;
--pk-slate-rgb: 76, 92, 104;
--pk-deep-purple-rgb: 37, 39, 92;
--pk-white-rgb: 255, 255, 255;
/* --- Semantic assignments ------------------------------------------
USE THESE IN RULES, not the palette names. Changing where the brand
lands then means changing one line here instead of forty. */
--pk-color-text: var(--pk-silicone);
--pk-color-text-soft: var(--pk-slate);
--pk-color-heading: var(--pk-navy);
--pk-color-link: var(--pk-blue);
--pk-color-link-hover: var(--pk-navy);
--pk-color-bg: var(--pk-white);
--pk-color-bg-alt: var(--pk-grey);
--pk-color-accent: var(--pk-frost);
/* Derived. Not new colours — each is a palette value at an opacity. */
--pk-color-border: rgba(var(--pk-slate-rgb), 0.18);
--pk-color-border-strong: rgba(var(--pk-navy-rgb), 0.32);
--pk-color-focus: var(--pk-cyan);
--pk-shadow-sm: 0 1px 2px rgba(var(--pk-navy-rgb), 0.08);
--pk-shadow-md: 0 4px 12px rgba(var(--pk-navy-rgb), 0.12);
/* --- Type -----------------------------------------------------------
THE SANS IS LATO AND THE MAIN SITE LOADS IT FROM GOOGLE FONTS. THIS
PROJECT MAY NOT: a hosted font is a third-party request on every page
load, which these sites do not make. Two options, both acceptable:
1. Self-host. Put lato-latin-400.woff2 and lato-latin-700.woff2 in
/assets/fonts/ and @font-face them with font-display:swap. Two
files, ~30 KB, no third party. The August port did exactly this
with Raleway.
2. Drop the webfont. The fallback stack below is the theme's own and
renders correctly on every platform; the pages simply use the
system UI face.
The serif is GEORGIA, which is a system font on every target platform
and loads nothing. That is why PKWARE uses it for headings. */
--pk-font-sans: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--pk-font-serif: Georgia, "Times New Roman", serif;
--pk-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--pk-text-xs: 0.75rem;
--pk-text-sm: 0.875rem;
--pk-text-base: 1rem;
--pk-text-lg: 1.125rem;
--pk-text-xl: 1.375rem;
--pk-text-2xl: 1.75rem;
--pk-text-3xl: 2.25rem;
--pk-leading-tight: 1.15;
--pk-leading-snug: 1.35;
--pk-leading-normal: 1.6;
--pk-leading-loose: 1.8; /* legal body copy — long paragraphs need air */
--pk-weight-regular: 400;
--pk-weight-bold: 700;
--pk-weight-black: 900;
/* --- Spacing --------------------------------------------------------
A scale, not arbitrary pixels. If a gap is not on it, use the nearest
value rather than adding a step. */
--pk-space-3xs: 0.25rem;
--pk-space-2xs: 0.5rem;
--pk-space-xs: 0.75rem;
--pk-space-sm: 1rem;
--pk-space-md: 1.5rem;
--pk-space-lg: 2rem;
--pk-space-xl: 3rem;
--pk-space-2xl: 4rem;
/* --- Layout ---------------------------------------------------------
--pk-container-narrow IS THE IMPORTANT ONE HERE. Body copy sits in it.
The main site caps at 1200/1300 because it has figures and card grids;
a licence agreement set to 1200px is unreadable, and that is the single
biggest difference between these sites and www.pkware.com. */
--pk-container-max: 1200px;
--pk-container-narrow: 780px;
--pk-container-pad: var(--pk-space-md);
--pk-header-height: 5rem;
/* --- Radius ---------------------------------------------------------
6px is the house default. Use --pk-radius-sm or none for document
rows; a rounded list row reads as a card and this is not a card UI. */
--pk-radius-none: 0;
--pk-radius-sm: 2px;
--pk-radius-md: 6px;
--pk-radius-lg: 12px;
/* --- Motion ---------------------------------------------------------
Hover and focus transitions only. No entrance animation anywhere. */
--pk-duration-fast: 120ms;
--pk-duration-base: 200ms;
--pk-ease: cubic-bezier(0.4, 0, 0.2, 1);
--pk-transition: var(--pk-duration-base) var(--pk-ease);
}
/* Honour the setting. Required, not a nicety — and trivial here, since the
only motion in the whole build is a hover transition. */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}