/* * plannedway-case-studies.css * * Drop this file into your WordPress theme's /css/ folder and enqueue it * in functions.php like this: * * wp_enqueue_style( * 'plannedway-case-studies', * get_template_directory_uri() . '/css/plannedway-case-studies.css', * array(), * '1.0.0' * ); * * ───────────────────────────────────────────────────────────────────────────── * ALSO add these two lines to your theme's (via wp_head hook or * header.php) to load the Google Fonts the design depends on: * * * * * * AND add the Tailwind CDN for all the utility classes used in the templates: * * * * * ───────────────────────────────────────────────────────────────────────────── * The rules below handle everything that Tailwind CDN cannot: the custom * brand CSS variables, the .eyebrow class, the .script class, base resets, * and any Tailwind colour/semantic tokens that appear as CSS custom properties * inside inline styles (e.g. bg-primary, text-primary-foreground, etc.). * ───────────────────────────────────────────────────────────────────────────── */ /* ═══════════════════════════════════════════════════════════════════════════ 1. BRAND CSS CUSTOM PROPERTIES These map exactly to the :root block in the React project's styles.css. They are referenced by Tailwind utilities like bg-primary, text-deep-brown, border-border, etc. after the Tailwind config above wires them in. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* Radius scale */ --radius: 0.75rem; /* ── Raw brand colours ──────────────────────────────────────────── */ --sand: #EDE0CC; --cream: #F5E6CC; --burnt-orange: #B85427; --terracotta: #CC6030; --forest: #4A5530; --sage: #9AB87A; --deep-brown: #3A2510; --charcoal: #3A3A3A; /* ── Semantic tokens (mirrors the React theme) ───────────────────── */ --background: var(--sand); --foreground: var(--deep-brown); --card: var(--cream); --card-foreground: var(--deep-brown); --primary: var(--burnt-orange); --primary-foreground: #FBF3E6; --secondary: var(--forest); --secondary-foreground: var(--cream); --muted: #E6D4B8; --muted-foreground: #6B4A28; --accent: var(--terracotta); --accent-foreground: #FBF3E6; --destructive: #8C3A18; --destructive-foreground: #FBF3E6; --border: rgba(58, 37, 16, 0.14); --input: rgba(58, 37, 16, 0.18); --ring: var(--burnt-orange); /* ── Font stacks ───────────────────────────────────────────────── */ --font-display: "Cormorant Garamond", Georgia, serif; --font-sans: "Lato", system-ui, sans-serif; --font-script: "Great Vibes", cursive; } /* ═══════════════════════════════════════════════════════════════════════════ 2. BASE RESETS Mirrors the @layer base block in the React project's styles.css. Scoped to the case-study post type with .case-study-page to avoid fighting existing WordPress theme styles. If your theme has no conflicting globals you can remove this scope and apply them to html/body directly. ═══════════════════════════════════════════════════════════════════════════ */ /* Scope: add class="case-study-page" to via body_class() filter */ .case-study-page, .post-type-archive-case-study { background-color: var(--background); color: var(--foreground); font-family: var(--font-sans); font-weight: 300; -webkit-font-smoothing: antialiased; } .case-study-page h1, .case-study-page h2, .case-study-page h3, .case-study-page h4, .post-type-archive-case-study h1, .post-type-archive-case-study h2, .post-type-archive-case-study h3, .post-type-archive-case-study h4 { font-family: var(--font-display); font-weight: 600; color: var(--deep-brown); letter-spacing: -0.01em; } /* ═══════════════════════════════════════════════════════════════════════════ 3. CUSTOM UTILITY CLASSES These are the three classes that are NOT Tailwind utilities and therefore NOT provided by the Tailwind CDN. They come from the React project's own styles.css @layer base block and must exist in WordPress separately. ═══════════════════════════════════════════════════════════════════════════ */ /* * .eyebrow * Used on: every section label ("The Work", "The Challenge", "About the Client", etc.) * Source: styles.css lines 104–111 */ .eyebrow { font-family: var(--font-sans); /* Lato */ font-weight: 900; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--burnt-orange); } /* * .script * Used on: the pull-quote section ("“...”") * Source: styles.css lines 112–115 */ .script { font-family: var(--font-script); /* Great Vibes */ font-weight: 400; } /* * .font-display * In the React project this is a Tailwind utility auto-generated from the * `fontFamily.display` config. In WordPress / without Tailwind it must be * an explicit CSS class. Used on: metric values, timeline numbers, logo text, * funnel stage numbers, quote pull-text, revenue figure. */ .font-display { font-family: var(--font-display); /* Cormorant Garamond */ } /* ═══════════════════════════════════════════════════════════════════════════ 4. TAILWIND SEMANTIC COLOUR TOKENS AS REAL CSS PROPERTIES When Tailwind CDN is configured (see the