/* ============================================================================ PillarTech — Design Tokens Single source of truth for the PillarTech visual system. Plain CSS custom properties: link this file directly into the site. Everything downstream (styleguide.html, the homepage) should read from these variables — never hard-code a hex value or font stack in a component. ============================================================================ */ :root { /* -------------------------------------------------------------------------- COLOR — warm, restrained. Accent (terracotta/amber) is for the logo, CTAs, hairline keylines, and small moments only. Never large accent fills. -------------------------------------------------------------------------- */ /* Ink / dark surfaces — cool slate, matched to the brand mark (#26333D) */ --charcoal: #26333D; /* base ink; dark sections */ --charcoal-soft: #313F4A; /* elevated dark surface (cards on dark) */ --charcoal-line: #3B4A55; /* hairline/border on dark */ /* Warm neutrals / light surfaces (warm paper, cool ink — like ink on paper) */ --cream: #FAF7F2; /* page background */ --bone: #F1EBE1; /* secondary surface / card fill */ --bone-deep: #E7DED0; /* subtle divider / inset on light */ /* Accent */ --terracotta: #B85C38; /* primary accent */ --terracotta-deep: #9A4A2C; /* hover / pressed / accent text on light */ --amber: #D99A4E; /* highlight — small moments only */ /* Text tiers (AA-checked against the surfaces noted) */ --ink: #26333D; /* primary text on cream/bone (12.1:1) */ --ink-muted: #5E6A72; /* secondary text on cream (5.1:1) */ --ink-faint: #7E878F; /* captions/meta on cream (3.4:1, large only) */ --on-dark: #FAF7F2; /* primary text on slate (12.1:1) */ --on-dark-muted: #C9C0B4; /* secondary text on slate (7.3:1) */ --on-accent: #FFFFFF; /* text on terracotta button (4.5:1) */ /* Semantic roles (reference the palette; components use these) */ --bg: var(--cream); --surface: var(--bone); --text: var(--ink); --text-muted: var(--ink-muted); --accent: var(--terracotta); --accent-hover: var(--terracotta-deep); --border: var(--bone-deep); --keyline: var(--terracotta); /* thin accent rule under eyebrows */ /* -------------------------------------------------------------------------- TYPE — three roles, deliberately not the Playfair+Inter default. Display : Fraunces — warmth + trust, soft optical sizing Body/UI : IBM Plex Sans — calm humanist sans Utility : IBM Plex Mono — eyebrows, indices, project meta (builder's mark) Load fonts in the page ; see README for the Google Fonts link. -------------------------------------------------------------------------- */ --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --font-body: "IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Menlo", Consolas, "Liberation Mono", monospace; /* Modular scale (~1.2), fluid where it matters via clamp() */ --text-xs: 0.79rem; /* 12.6px — mono captions/meta */ --text-sm: 0.889rem; /* 14.2px — small UI, labels */ --text-base: 1rem; /* 16px — body */ --text-lead: 1.125rem; /* 18px — lead paragraphs */ --step-1: 1.25rem; /* 20px */ --step-2: 1.5rem; /* 24px */ --step-3: clamp(1.625rem, 1.3rem + 1.4vw, 1.9375rem); /* ~26–31px */ --step-4: clamp(2rem, 1.5rem + 2.2vw, 2.75rem); /* ~32–44px */ --step-5: clamp(2.5rem, 1.7rem + 3.6vw, 3.75rem); /* ~40–60px */ --step-6: clamp(2.9rem, 1.9rem + 4.6vw, 4.75rem); /* hero display */ /* Line-height */ --leading-tight: 1.08; /* display headlines */ --leading-snug: 1.28; /* sub-headlines */ --leading-normal: 1.6; /* body */ /* Weight */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* Letter-spacing */ --tracking-eyebrow: 0.16em; /* mono eyebrows/labels */ --tracking-tight: -0.015em; /* large serif display */ /* Comfortable measure */ --measure: 66ch; --measure-narrow: 46ch; /* -------------------------------------------------------------------------- SPACE — 4px base scale -------------------------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 8rem; /* 128px */ /* Section rhythm + page gutter */ --section-y: clamp(3.5rem, 2rem + 6vw, 7rem); --gutter: clamp(1.25rem, 0.5rem + 3vw, 3rem); --container: 74rem; /* max content width (~1184px) */ /* -------------------------------------------------------------------------- RADIUS — gentle rounded corners -------------------------------------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-pill: 999px; /* -------------------------------------------------------------------------- SHADOW — soft, warm (charcoal-tinted, low opacity) -------------------------------------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(38, 51, 61, 0.07), 0 1px 1px rgba(38, 51, 61, 0.05); --shadow-md: 0 4px 12px rgba(38, 51, 61, 0.09), 0 2px 4px rgba(38, 51, 61, 0.06); --shadow-lg: 0 18px 40px rgba(38, 51, 61, 0.12), 0 6px 14px rgba(38, 51, 61, 0.07); /* Focus ring (visible, accessible) */ --focus-ring: 0 0 0 3px rgba(184, 92, 56, 0.45); /* -------------------------------------------------------------------------- MOTION -------------------------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-fast: 140ms; --dur-base: 220ms; --dur-slow: 420ms; /* -------------------------------------------------------------------------- TEXTURE — subtle paper grain as a reusable overlay. Apply the .grain utility (below) to a positioned element. -------------------------------------------------------------------------- */ --grain-opacity: 0.035; /* on light surfaces */ --grain-opacity-dark: 0.06; } /* ---------------------------------------------------------------------------- GRAIN utility — inline SVG feTurbulence, no external asset. Usage: give a container `position: relative` and add
. Or apply `.has-grain` to paint grain via ::after on the element itself. ---------------------------------------------------------------------------- */ .grain, .has-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; } .has-grain { position: relative; } .on-dark .grain, .on-dark.has-grain::after { opacity: var(--grain-opacity-dark); } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }