/* ========================================================================== AdPillar THEME — the brand, as variables -------------------------------------------------------------------------- Load order in every page head (Bootstrap is NEVER modified): 1. assets/vendor/bootstrap.css vendor, read-only 2. theme.css THIS FILE — fonts, brand tokens, Bootstrap remap 3. style.css base rules, component overrides, reusable blocks WHAT THIS FILE IS The single place a brand value is authored. Every color, face, size, space, radius and shadow the site uses is declared here once, and everything downstream reads it through var(). Change a token here and it changes everywhere at once. This file is written once and then rarely touched. It is edited only to change a brand value or to add a genuinely new one — never to style a page, a section or a component. WHAT NEVER GOES IN HERE A CSS class. A selector other than :root. A page-specific rule. Anything that describes how one thing looks — that is style.css. HOW IT IS ORGANISED §1 @font-face ......... Anko, self-hosted. The other four faces load from Google Fonts in the page head. §2 --ap-* tokens ...... the brand, grouped by what each holds: --ap-color-* every color --ap-font-* the five faces --ap-fs-* the type scale --ap-space-* section rhythm only — all other spacing is Bootstrap's spacer scale (0/.25/.5/1/1.5/3rem) --ap-radius-* corners --ap-shadow-* elevation §3 --bs-* remap ....... every Bootstrap theme color, radius, font and line var points at an --ap-* token. Utilities (.text-*, .bg-*, .border-*, .link-*) read those vars, so they are on-brand for free. LIMIT: compiled COMPONENT variants (.btn-*, .alert-*, .table-*, .list-group-item-*) have literal hex baked in by Bootstrap's build. Those are re-pointed in style.css §6. Section numbering runs continuously across both files: §1–§3 here, §3b–§12 in style.css. A "see §6" reference means style.css §6. UNITS rem for spacing, padding, margin, radii and type (Bootstrap's 1rem base). clamp() for headings, stats and section rhythm — fluid, not stepped. px only for hairlines, border widths and shadow geometry. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTS -------------------------------------------------------------------------- */ @font-face { font-family: 'Anko'; src: url('../fonts/Anko-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Anko'; src: url('../fonts/Anko-Italic.ttf') format('truetype'); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: 'Anko'; src: url('../fonts/Anko-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Anko'; src: url('../fonts/Anko-MediumItalic.ttf') format('truetype'); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Anko'; src: url('../fonts/Anko-SemiBold.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Anko'; src: url('../fonts/Anko-SemiBoldItalic.ttf') format('truetype'); font-weight: 600; font-style: italic; font-display: swap; } @font-face { font-family: 'Anko'; src: url('../fonts/Anko-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Anko'; src: url('../fonts/Anko-BoldItalic.ttf') format('truetype'); font-weight: 700; font-style: italic; font-display: swap; } /* Anko is the only self-hosted face. Inter, Comfortaa, Handlee and Kalam are loaded from Google Fonts in — see the snippet in the design guide. */ /* -------------------------------------------------------------------------- 2. BRAND TOKENS — the only place a brand value is authored Every token is --ap--: --ap-color-*, --ap-font-*, --ap-fs-*, --ap-space-*, --ap-radius-*, --ap-shadow-*. -------------------------------------------------------------------------- */ :root { /* --- Accents. Each maps to a Bootstrap theme color in §3. --- */ --ap-color-blue: #0A6DC2; /* → primary : nav, wayfinding, arrows */ --ap-color-blue-dark: #0959A5; --ap-color-blue-tint: #F0F5FB; --ap-color-blue-line: #C9DEF3; --ap-color-green: #3E9B57; /* → success : the conversion action */ --ap-color-green-dark: #348049; --ap-color-green-tint: #E9F4EC; --ap-color-lime: #B8C93A; /* emphasis marks, underlines, .btn-lime hover — NOT warning */ --ap-color-lime-bright: #E2EF4A; --ap-color-lime-tint: #F3F7CE; --ap-color-lime-line: #E3EA9E; --ap-color-lime-deep: #8F9E1F; /* small marks: legend dots, chart series, an eyebrow dot */ --ap-color-lime-ink: #6E7A18; --ap-color-amber: #895A07; /* → link : every link, unless a section says otherwise */ --ap-color-amber-dark: #6E4705; --ap-color-amber-tint: #FBF3E4; --ap-color-amber-line: #EBD9B4; --ap-color-gold-warm: #E8A317; /* → warning : caution, pending, growth fills */ --ap-color-gold-deep: #C98505; --ap-color-violet: #6C4BD8; /* → info : the customer portal */ --ap-color-violet-tint: #EFEAFB; --ap-color-violet-line: #D8CDF0; --ap-color-violet-soft: #7A6FD0; /* the annotation voice — .hand-note only */ --ap-color-red: #C0492F; /* → danger : loss, errors */ --ap-color-red-tint: #FAEDEA; --ap-color-positive: #5B8A00; /* deltas in the right direction */ --ap-color-star: #FBBC04; /* review stars only */ /* --- Ink --- */ --ap-color-ink: #2B2924; /* → dark, headings, emphasis */ --ap-color-body: #5A554C; /* → body text */ --ap-color-muted: #7C776E; /* → secondary */ --ap-color-faint: #948E84; /* → tertiary, labels */ --ap-color-ghost: #A8A296; /* placeholders */ /* --- Surfaces --- */ --ap-color-paper: #FBFAF8; /* → light, page background */ --ap-color-paper-raised: #FDFCFA; /* navbar, footer */ --ap-color-surface: #FFFFFF; /* cards */ --ap-color-surface-inset: #FBFAF6; /* tiles inside cards */ --ap-color-sand: #F6F2E9; /* full-width feature panel */ /* --- Lines --- */ --ap-color-line: #EDE8DD; --ap-color-line-soft: #F0ECE3; --ap-color-line-strong: #E3DDD0; --ap-color-line-emphasis: #D2CBBC; /* the heaviest line: input borders, inactive dots */ /* --- Decorative atmosphere only, never content --- */ --ap-color-blob-lavender: rgba(198,182,236,.40); --ap-color-blob-lime: rgba(218,222,158,.36); --ap-color-blob-sky: rgba(175,200,218,.36); --ap-color-blob-peach: rgba(245,205,170,.36); /* --- Type --- */ --ap-font-display: 'Anko', Georgia, 'Times New Roman', serif; --ap-font-body: 'Inter', system-ui, -apple-system, Arial, sans-serif; --ap-font-sub: 'Comfortaa', 'Trebuchet MS', sans-serif; /* secondary headings + numbers */ --ap-font-note: 'Handlee', cursive; /* annotations on diagrams */ --ap-font-quote: 'Kalam', cursive; /* a person speaking */ /* Fluid scale. Feeds Bootstrap's .fs-* and .display-* in §4. */ --ap-fs-display-1: clamp(3rem, 1.4rem + 5.6vw, 5.5rem); /* 48 → 88 */ --ap-fs-display-2: clamp(2.5rem, 1.35rem + 4.6vw, 4.5rem); /* 40 → 72 */ --ap-fs-display-3: clamp(2rem, 1.2rem + 3.2vw, 3.5rem); /* 32 → 56 */ --ap-fs-display-4: clamp(1.75rem, 1.1rem + 2.6vw, 3rem); /* 28 → 48 */ --ap-fs-display-5: clamp(1.5rem, 1rem + 2vw, 2.5rem); /* 24 → 40 */ --ap-fs-display-6: clamp(1.25rem, .95rem + 1.4vw, 2rem); /* 20 → 32 */ --ap-fs-1: clamp(3.25rem, 6.4vw, 5.5rem); /* h1 52 → 88 */ --ap-fs-2: clamp(2.375rem, 4.4vw, 3.625rem); /* h2 38 → 58 — the section-heading size */ --ap-fs-3: clamp(1.75rem, 4.4vw, 2.375rem); /* .fs-3 28 → 38 — the step between a section heading and a card title */ --ap-fs-4: clamp(1.25rem, 1.1rem + .6vw, 1.4375rem); /* h3 · .card-title · .modal-title · .fs-4 20 → 23 */ --ap-fs-5: 1rem; /* h4 · h5 · .fs-5 16 */ --ap-fs-6: .875rem; /* h6 · .fs-6 · small text 14 */ --ap-fs-lead: clamp(1.0625rem, 1rem + .35vw, 1.1875rem); /* 17 → 19 */ --ap-fs-lg: clamp(1rem, .96rem + .25vw, 1.09375rem); /* 16 → 17.5 */ --ap-fs-xs: .75rem; /* 12 — also the eyebrow size */ --ap-fs-label: .6875rem; /* 11 */ --ap-fs-note: clamp(1.1875rem, 1.125rem + .2vw, 1.375rem); /* 19 → 22 */ --ap-fs-quote: clamp(1.1875rem, 1.1rem + .3vw, 1.4375rem); /* 19 → 23 */ --ap-fs-stat: clamp(1.5rem, 1.3125rem + .8vw, 1.875rem); /* 24 → 30 */ --ap-fs-stat-lg: clamp(2rem, 1.2rem + 2.4vw, 2.875rem); /* 32 → 46 */ /* --- Spacing: Bootstrap's own spacer scale IS the spacing system. All spacing is written with Bootstrap utilities (.m-* .p-* .gap-* .g-*) or their literal values: 0 / .25rem / .5rem / 1rem / 1.5rem / 3rem. Only section rhythm is fluid, so only it has tokens. --- */ --ap-space-section: clamp(2.75rem, 5vw, 4rem); --ap-space-section-lg: clamp(3.5rem, 7vw, 6rem); /* --- Radii --- */ --ap-radius-sm: .625rem; /* 10 — nav item, chip */ --ap-radius: .875rem; /* 14 — input, inset tile */ --ap-radius-lg: 1.375rem; /* 22 — card */ --ap-radius-xl: 1.625rem; /* 26 — hero media */ --ap-radius-panel: 2.25rem; /* 36 — sand panel */ /* --- Elevation: warm brown, offset down. ONE generic four-step scale, sized not named after where it is used — it drives Bootstrap's .shadow-* utilities (§3), so markup says .shadow-lg, never .shadow-hero. Only two exceptions exist, both because the shadow is a different SHAPE or COLOR, not size. --- */ --ap-shadow-sm: 0 6px 14px -10px rgba(60,50,40,.20); --ap-shadow: 0 12px 24px -14px rgba(60,50,40,.22); --ap-shadow-lg: 0 20px 44px -26px rgba(60,50,40,.50); --ap-shadow-xl: 0 40px 90px -46px rgba(60,50,40,.50); --ap-shadow-nav: 0 8px 30px -22px rgba(60,50,40,.55); /* exception: tight + wide, hugs the bar */ --ap-shadow-cta: 0 6px 18px -6px rgba(62,155,87,.50); /* exception: green-tinted, the CTA's own glow */ --ap-shadow-cta-lime: 0 6px 18px -6px rgba(150,168,20,.55); /* exception: the same glow for the lime CTA */ } /* -------------------------------------------------------------------------- 3. BOOTSTRAP MAPPING Every Bootstrap theme color points at an --ap-* token, so .text-primary, .bg-success, .btn-warning, .border-info, .link-danger and every component that reads them are on-brand with no extra CSS. primary = blue (wayfinding) success = green (convert) secondary = warm neutral warning = lime (growth) info = violet (portal) danger = red (loss/error) Containers, breakpoints and the grid are left exactly as Bootstrap ships. This mapping covers utilities and the *-subtle / *-emphasis vars. It does NOT reach compiled component variants — see §6. -------------------------------------------------------------------------- */ :root { /* Theme colors */ --bs-primary: var(--ap-color-blue); --bs-primary-rgb: 10, 109, 194; --bs-secondary: var(--ap-color-muted); --bs-secondary-rgb: 124, 119, 110; --bs-success: var(--ap-color-green); --bs-success-rgb: 62, 155, 87; --bs-info: var(--ap-color-violet); --bs-info-rgb: 108, 75, 216; --bs-warning: var(--ap-color-gold-warm); --bs-warning-rgb: 232, 163, 23; --bs-danger: var(--ap-color-red); --bs-danger-rgb: 192, 73, 47; --bs-light: var(--ap-color-paper); --bs-light-rgb: 251, 250, 248; --bs-dark: var(--ap-color-ink); --bs-dark-rgb: 43, 41, 36; /* Subtle / border variants of each theme color (5.3 uses these widely) */ --bs-primary-bg-subtle: var(--ap-color-blue-tint); --bs-success-bg-subtle: var(--ap-color-green-tint); --bs-info-bg-subtle: var(--ap-color-violet-tint); --bs-warning-bg-subtle: var(--ap-color-amber-tint); --bs-danger-bg-subtle: var(--ap-color-red-tint); --bs-secondary-bg-subtle: var(--ap-color-sand); --bs-light-bg-subtle: var(--ap-color-paper-raised); --bs-primary-border-subtle: var(--ap-color-blue-line); --bs-success-border-subtle: #CFE6D6; --bs-info-border-subtle: var(--ap-color-violet-line); --bs-warning-border-subtle: var(--ap-color-amber-line); --bs-danger-border-subtle: #F0D9D2; --bs-secondary-border-subtle: var(--ap-color-line-strong); --bs-primary-text-emphasis: var(--ap-color-blue-dark); --bs-success-text-emphasis: var(--ap-color-green-dark); --bs-info-text-emphasis: var(--ap-color-violet); --bs-warning-text-emphasis: var(--ap-color-amber); --bs-danger-text-emphasis: var(--ap-color-red); /* Body, type, links */ --bs-body-font-family: var(--ap-font-body); --bs-body-font-size: 1rem; --bs-body-line-height: 1.62; --bs-body-color: var(--ap-color-body); --bs-body-color-rgb: 90, 85, 76; --bs-body-bg: var(--ap-color-paper); --bs-body-bg-rgb: 251, 250, 248; --bs-emphasis-color: var(--ap-color-ink); --bs-emphasis-color-rgb: 43, 41, 36; --bs-secondary-color: var(--ap-color-muted); --bs-tertiary-color: var(--ap-color-faint); --bs-secondary-bg: var(--ap-color-surface-inset); --bs-tertiary-bg: var(--ap-color-sand); --bs-heading-color: var(--ap-color-ink); --bs-link-color: var(--ap-color-amber); --bs-link-color-rgb: 137, 90, 7; --bs-link-hover-color: var(--ap-color-amber-dark); --bs-link-hover-color-rgb: 110, 71, 5; --bs-link-decoration: none; --bs-code-color: var(--ap-color-violet); --bs-highlight-bg: var(--ap-color-lime-tint); /* Lines, radii, focus */ --bs-border-color: var(--ap-color-line); --bs-border-color-translucent: rgba(60,50,40,.10); --bs-border-radius: var(--ap-radius); --bs-border-radius-sm: var(--ap-radius-sm); --bs-border-radius-lg: var(--ap-radius-lg); --bs-border-radius-xl: var(--ap-radius-xl); --bs-border-radius-xxl: var(--ap-radius-panel); --bs-border-radius-pill: 50rem; --bs-box-shadow-sm: var(--ap-shadow-sm); --bs-box-shadow: var(--ap-shadow); --bs-box-shadow-lg: var(--ap-shadow-lg); --bs-focus-ring-color: rgba(10,109,194,.28); --bs-focus-ring-width: 3px; }