/* =====================================================================
Content Khana — Theme stylesheet
Base tokens, resets, liquid-glass UI, buttons, and a handful of small
structural rules that self-hosted Tailwind (tailwind-built.css) can't
express directly (contact form, floating nav, blog article cards,
scroll-reveal, unlayered cascade-layer bugfix overrides). Most
component styling now lives in Tailwind classes in the .php templates.
===================================================================== */
/* ---- Fonts (self-hosted Manrope for headlines, Inter for everything else) ---- */
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url('../fonts/manrope/manrope-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 300 800;
font-display: swap;
src: url('../fonts/inter/inter-variable.woff2') format('woff2');
}
/* ---- Design tokens ---- */
:root {
--ck-navy: #052162;
--ck-teal: #4c8493;
--ck-orange: #bd5c1a;
--ck-mint: #c6e8e0;
--ck-sky: #c6dae8;
--ck-paper: #ffffff;
--ck-black: #000000;
/* Same HSL triplets as the React source's src/index.css :root block —
kept in this exact format so `hsl(var(--primary))`-style inline
styles copied directly from JSX work unchanged. */
--background: 193 32% 44%;
--foreground: 0 0% 100%;
--card: 0 0% 100%;
--primary: 222 90% 20%;
--ck-radius: 0.5rem;
--ck-font: "Inter", ui-sans-serif, system-ui, sans-serif;
--ck-font-heading: "Manrope", ui-sans-serif, system-ui, sans-serif;
--ck-font-body: "Inter", ui-sans-serif, system-ui, sans-serif;
--ck-shadow-sm: 0 6px 24px rgba(5, 33, 98, 0.08);
--ck-shadow-md: 0 10px 30px rgba(5, 33, 98, 0.1);
--ck-shadow-lg: 0 14px 44px rgba(76, 132, 147, 0.3);
/* ---- New brand palette (client-supplied, Sep 2026) ----
Used by template-parts/site-header.php and
template-parts/section-hero-main.php only. Does NOT replace the
tokens above — every already-built section keeps using
--background/--foreground/--card/--primary unchanged. */
--ck-cloud-white: #F7FAFC;
--ck-sky-blue: #A8DFF0;
--ck-turquoise: #16C6D1;
--ck-deep-blue: #0B3558;
/* Gradient sampled from the client's reference comp (buttons + "Made
Real." heading text) — deep blue to light cyan, left to right. */
--ck-gradient-start: #206892;
--ck-gradient-end: #4FA8C7;
}
/* ---- Reset / base ---- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--ck-font);
background: var(--ck-paper);
color: var(--ck-black);
line-height: 1.5;
overflow-x: hidden;
}
img,
video,
canvas {
max-width: 100%;
height: auto;
display: block;
}
/*
* The reset above is unlayered CSS. Tailwind's utility classes (incl.
* .w-full / .h-full, used by team/gallery/blog thumbnails to make an
* ![]()
fill its object-cover container) are emitted inside
* `@layer utilities` in tailwind-built.css. Per the CSS Cascade Layers
* spec, ANY unlayered rule always wins over ANY layered rule, regardless
* of selector specificity or source order — so the reset above was
* silently defeating .w-full/.h-full on images, leaving them sized to
* their natural aspect ratio (e.g. ~402px tall in a 420px square
* container) instead of filling it. That exposed a sliver of the
* container's background color under object-cover photos (visible as a
* light-blue bar under Team section portraits). Restating these two
* utilities here, unlayered, restores normal specificity-based
* cascading for elements that use them.
*/
img.w-full,
video.w-full,
canvas.w-full {
width: 100%;
}
img.h-full,
video.h-full,
canvas.h-full {
height: 100%;
}
/*
* Same unlayered-vs-layered conflict as above, this time on the footer's
* headings. The global `h1,h2,h3,h4 { margin:0; font-weight:900 }` reset
* below is unlayered CSS and unconditionally wins over Tailwind's layered
* `.mb-6`/`.mb-3`/`.font-bold` utilities used directly on