/* ========================================================================== babaLucas Creative — tokens.css v1.9 · 2026-10-09 · Master Brand Guide v1.6. Testimonials are upright: Lustria has no italic, so blockquote sets font-style:normal and font-synthesis:none (GeneratePress's main.min.css makes every blockquote italic, so dropping our own italic wasn't enough), and .quotes blockquote is the lead size (1.2rem / 1.6) instead of 1.18rem. Cards lift on hover only when the whole card is a link: .card:hover becomes a.card:hover. Visible change: the homepage testimonials stop slanting, and the nine service cards (not links) stop lifting. v1.8 · 2026-10-08 · feature icons are brand orange #F26722 on every dark surface (Master Brand Guide v1.5). Classic Light moves from #C1521B to #F26722; Duotone Light is "ember tint", #F26722 for both layers with the secondary at 35% opacity, replacing #C1521B + #C6A19A at full opacity. Comment-only change: no rule in this file styles icons. v1.7 · 2026-10-07 · all reading text on dark is warm white (Master Brand Guide v1.4, Visual System & Dev Guide v3.2). --text and --muted move #DEC9C5 / #D0B5AC → #FFF9F6 (same as --text-strong; the three names stay so existing rules keep working), and the rules that set text in --maroon-light (featured card, footer text and links) use --text. Both old values passed WCAG AAA (11.3:1, 9.26:1) but read dim and pink; warm white is 17.13:1 on --bg. --maroon-light stays a palette tint, not text. v1.6 · 2026-10-06 · type-scale tokens added (Master Brand Guide v1.3, Visual System & Dev Guide v3.1): nine --fs-* sizes plus three aliases, --lh-*, --fw-*, --tracking-* and --measure-prose. ADDITIVE ONLY: no existing rule changed and nothing uses the new tokens yet, so the live site renders exactly as v1.5. babalucas.com's component rules move onto them when the site adopts the scale. Orange-on-bg contrast note corrected: 5.73:1 passes AA at all sizes. v1.5 · 2026-09-27 · one file again. The live theme had forked this file (generatepress-child/assets/css/babalucas-tokens.css, labelled "v1.3") with site-tuned component values that never came back upstream. Merged here so Drive, the theme and the local design-handoff copy are byte-identical: body 1.1rem; card min-height 357px, h3 1.3rem (featured 1.4rem) centred in a 3.64rem box, .fa-light icons 1.875rem, p 1rem, featured tag gap 20px; blockquote cite styled like footer; .quotes blockquote 1.18rem; footer and .f-bottom 1rem; --maroon-mid kept as a derived token (no current users). Token colours unchanged. Contrast notes corrected to the surface they were measured on. Verified to reproduce the live homepage exactly (1280px, 17 measurements). Theme-fork history folded in: body 1.05rem → 1.1rem on 2026-08-30 (long-form reading comfort; the serif body reads smaller than a sans at equal px); card min-height on 2026-08-31; the other component changes were made before 2026-09-05 11:42 and are undated. v1.4 · 2026-09-05 · --muted nudged lighter (#BFA49B → #D0B5AC) for stronger perceived contrast on dark surfaces; prior value passed WCAG AAA (7.65:1 on --bg) but read visually flat against --text. New value: 9.26:1 on --bg, 10.1:1 on --bg-deep. Same change made in Master Brand Guide and Visual System & Dev Guide. v1.3 · 2026-08-31 · reconciled to Master Brand Guide v1.1 and Visual System & Dev Guide v1.3. The public palette is only Orange, Maroon, Espresso, and Warm White. Remaining values are derived implementation tokens for accessible states, surfaces, and contrast—not peer colors. v1.2 · 2026-08-23 · accessibility rollout promoted shared CTA patterns. v1.1 · 2026-08-20 · design-handoff cut. v1.0 · 2026-08-19 · extracted from approved homepage mock. Source of truth: Master Brand Guide v1.6, Visual Identity section. Do not invent values; change the Master Guide, then regenerate this file. Copies that must stay byte-identical to this one: ~/Local_Sites/babalucas/app/public/wp-content/themes/generatepress-child/assets/css/babalucas-tokens.css ~/Local_Sites/babalucas/design-handoff/tokens.css ========================================================================== FONTS — load via Google Fonts: Oleo Script is for the logo/wordmark ONLY — never body or headings. Archivo is used at 125% width ("Archivo Expanded"): the wdth axis in the URL is mandatory, plus font-stretch:125% on heading elements (set below). ========================================================================== CONTRAST (WCAG): --text, --text-strong, --muted on --bg 17.13:1 (18.68:1 on --bg-deep, 15.22:1 on --card): all warm white --orange on --bg 5.73:1 (AA at all sizes; on warm white 2.99:1, so never text on light surfaces) ========================================================================== ICONOGRAPHY — the current babalucas.com rule (Font Awesome Pro 7.3.1) The two approved feature treatments are both LIGHT weight; choose by context, not by a locked global rule: - Classic Light (single tone): maximum clarity / minimum visual noise. - Duotone Light (two-tone): use at 30px+ when additional visual richness will read clearly. Small / inline UI uses Solid. Regular, Sharp, Thin, and other families are not approved. The client portal's Duotone-only self-hosted setup is a separate implementation track. Classic Light on every dark surface, standard or featured: fa-light fa-; color #F26722 (brand orange; 5.09-6.39:1 on the four standard dark surfaces, 3.83-4.69:1 across the featured gradient). Duotone Light on every dark surface, standard or featured ("ember tint"): fa-duotone fa-light fa-; color #F26722 (both layers inherit it); --fa-secondary-opacity:.35. Lines are 5.09:1 on --card, 5.73:1 on --bg and 3.83-4.69:1 across the featured gradient. Do not use maroon / maroon-light as an icon layer directly on dark surfaces. Approved homepage service glyphs: Brand Identity fa-microphone-lines Website Design & Development fa-palette Website Update & Redesign fa-arrows-rotate Messaging & Marketing Strategy fa-bullhorn Care & Growth Plans fa-seedling Website Accessibility & Inclusive Design fa-universal-access SEO Optimization fa-magnifying-glass-chart Answer Engine Optimization fa-message-quote AI, Built Into Your Website fa-robot-astromech babalucas.com's own Font Awesome wiring/kit connection is handled by Rob; this section documents icon selection and color, not an integration step. ========================================================================= */ :root{ /* PUBLIC CORE PALETTE — the only four public brand colors */ --orange:#F26722; --maroon:#7D2818; --bg:#221410; --warm-white:#FFF9F6; /* DERIVED IMPLEMENTATION TOKENS — functional, not extra brand colors */ --orange-dark:#C1521B; --orange-darkest:#913D14; --orange-mid:#F8B390; --maroon-dark:#642013; --maroon-darkest:#4B180E; --maroon-light:#DEC9C5; --maroon-mid:#BE938B; /* dark surfaces (one page-wide Gradient B "Espresso") */ --bg-deep:#150A06; --footer:#100704; --card:#301E16; --band:rgba(255,249,246,.035); --line:rgba(255,249,246,.14); /* text on dark */ --text:#FFF9F6; --text-strong:#FFF9F6; --muted:#FFF9F6; /* one reading colour: warm white (v1.7) */ /* type roles */ --head:'Archivo',sans-serif; --body:'Lustria',serif; /* TYPE SCALE (v1.6) — nine sizes, three aliases. Fluid sizes run linearly from a 400px to a 1200px viewport (16px root): 32→54.4, 28.8→40, 27.2→36.8px. Once component rules adopt the scale: Lustria 400 only, never below --fs-small; nothing below --fs-label. */ --fw-regular:400; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800; --tracking-display:-.01em; --tracking-label:.04em; --fs-h1:clamp(2rem, 1.3rem + 2.8vw, 3.4rem); --fs-stat:clamp(1.8rem, 1.45rem + 1.4vw, 2.5rem); --fs-h2:clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); --fs-h3:1.3rem; --fs-lead:1.2rem; --fs-body:1.1rem; --fs-small:1rem; --fs-ui:.9rem; --fs-label:.8rem; --fs-title:var(--fs-body); --fs-button:var(--fs-small); --fs-eyebrow:var(--fs-ui); --lh-h1:1.1; --lh-stat:1; --lh-h2:1.2; --lh-h3:1.3; --lh-title:1.3; --lh-lead:1.6; --lh-body:1.7; --lh-small:1.6; --lh-button:1.2; --lh-ui:1.4; --lh-eyebrow:1.3; --lh-label:1.3; --measure-prose:37.5rem; } /* ---- base ---------------------------------------------------------------- */ *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} } body{font-family:var(--body);color:var(--text);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-deep) 100%);font-size:1.1rem;line-height:1.7} h1,h2,h3,.btn,nav{font-family:var(--head);font-stretch:125%} img{max-width:100%} a{color:var(--orange-mid)} a:focus-visible,button:focus-visible{outline:3px solid var(--orange-mid);outline-offset:2px;border-radius:4px} section{padding:88px 0} .wrap{max-width:1120px;margin:0 auto;padding:0 24px} .nowrap{white-space:nowrap} /* ---- shared: CTA row + micro note (used by home hero/final + any page CTA) --- */ .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .micro{font-size:.9rem;color:var(--muted)} /* ---- buttons ------------------------------------------------------------- */ .btn{display:inline-block;background:var(--orange-dark);color:#fff;text-decoration:none;font-weight:700;font-size:1rem;padding:14px 28px;border-radius:8px;transition:background .2s, transform .2s} .btn:hover{background:var(--orange-darkest);transform:translateY(-1px)} .btn.big{background:var(--orange);font-size:1.2rem;padding:16px 34px} .btn.big:hover{background:var(--orange-dark)} .btn.ghost{background:transparent;color:var(--orange-mid);border:2px solid var(--orange-mid)} .btn.ghost:hover{background:rgba(248,179,144,.12)} /* ---- section heads & grids ------------------------------------------------ */ .sec-head{max-width:640px;margin-bottom:48px} .sec-head h2{font-size:clamp(1.7rem,3vw,2.3rem);color:var(--orange);font-weight:800;margin-bottom:14px;line-height:1.2} .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} /* ---- cards ---------------------------------------------------------------- */ .card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 26px;transition:transform .2s, box-shadow .2s;min-height:357px} /* 357px = the tallest of the 3 service-grid rows (measured live, row of SEO/AEO/AI cards). .grid's default align-items:stretch already equalizes cards WITHIN a row, but each of the 3 rows sizes independently, so the grid's 9 cards landed at 3 different heights (280/334/ 357px) despite every card being the same height as its own row-mates. A shared min-height makes all 9 match regardless of which row they're in. */ /* lift only when the whole card is a link (Master Brand Guide v1.6) */ a.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -22px rgba(75,24,14,.35)} .card .t{display:flex;align-items:center;gap:12px;margin-bottom:12px} .card .t svg{flex:none;width:24px;height:24px;stroke:var(--orange)} .card .t .fa-light{flex:none;font-size:1.875rem;line-height:1} .card h3{font-size:1.3rem;color:var(--text-strong);font-weight:700;line-height:1.3;margin-bottom:0;min-height:3.64rem;display:flex;align-items:center} /* GP's Dynamic Typography default (20px) was invisibly inflating .t's flex cross-size, off-centering the icon against it -- same root cause as the .step p fix in page-home.css. min-height reserves the same space on every card regardless of actual line count, so the paragraph below always starts at the same offset; display:flex+align-items:center centers the heading's own text within that reserved space (top-aligned by default otherwise), keeping icon/text centering correct via .t's own align-items. Deliberately rem (root-relative), not em (self-relative), and sized off the LARGER featured tier, not this rule's own 1.3rem: min-height is a floor, not a cap, so a featured heading's actual 2-line height at its bigger 1.4rem font (line-height 1.3 x 2 x 1.4rem = 3.64rem) already exceeds anything sized off 1.3rem and would silently win anyway -- basing the shared floor on 3.64rem instead pads the smaller-font cards UP to match rather than leaving a gap between tiers. */ .card p{font-size:1rem} .card.featured{background:linear-gradient(165deg,var(--maroon-darkest) 30%,var(--maroon-dark));border:1px solid rgba(242,103,34,.5);color:var(--warm-white)} .card.featured h3{color:var(--orange);font-size:1.4rem} .card.featured .t svg{stroke:var(--orange)} .card.featured p{color:var(--text)} .card.featured .tag{display:inline-block;font-family:var(--head);font-size:.74rem;font-weight:700;letter-spacing:.04em;background:var(--orange-dark);color:#fff;border-radius:99px;padding:4px 11px;margin-bottom:20px} /* back to its own row above .t (an inline-with-the-heading layout was tried and reverted -- too cramped against the heading text, and forced the AI/AEO headings to fight the pill for width). margin-bottom is the visible gap between the tag and the header below it. Non-featured cards do NOT get a matching placeholder -- that was considered and dropped; they simply start flush at the top as before. */ /* ---- testimonials ---------------------------------------------------------- */ blockquote{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:30px 28px 26px;font-size:1rem;position:relative;font-style:normal;font-synthesis:none} blockquote::before{content:"\201C";font-family:var(--head);font-size:3.4rem;color:var(--orange);position:absolute;top:2px;left:20px;line-height:1;font-style:normal} blockquote p{padding-left:34px} /* WordPress outputs for the attribution; the static mocks use