/* ========================================================================== Ojas Blend — design tokens Source of truth: "Brand Guideline – Ojas Blend" (©2026), pages 4–5. [b] straight from the guideline · [d] derived for the web · [f] adjusted so a text pairing clears WCAG 2.1 AA (the guideline's own hex values stay intact for fills; only text usage is corrected). No selectors belong in this file other than :root. ========================================================================== */ :root { /* ---------- Brand palette [b] ------------------------------------------ */ --ojas-jasmine: #8DC640; /* 01 Jasmine Green — core anchor, fills only for text pairings */ --ojas-amazon: #14723A; /* 02 Amazon — core anchor, headings, dark ground */ --ojas-island: #35A45F; /* 03 Island Green — organic growth, fills/icons */ --ojas-lemon: #F1E933; /* 04 Lemon — highlight */ --ojas-vanilla: #F1E8B0; /* 05 Vanilla — warm light band */ --ojas-orange: #F16022; /* Accent 01 Orange Slice — appetite CTA */ --ojas-papaya: #F89C6D; /* Accent 02 Papaya — soft accent */ /* ---------- Supporting neutrals [d] ------------------------------------ */ --ojas-offwhite: #F8F7F6; /* page ground, sampled from the guideline layouts */ --ojas-white: #FFFFFF; --ojas-ink: #182B26; /* the guideline's heading colour, sampled; 14.3:1 on off-white */ --ojas-muted: #56655A; /* meta text, 5.6:1 on off-white */ --ojas-border: #E4E1D7; /* warm hairline on off-white */ --ojas-amazon-deep: #0E4F28; /* footer / deepest ground */ /* ---------- Accessibility corrections [f] ------------------------------ */ --ojas-jasmine-text: #4F7A1B; /* Jasmine is 1.89:1 on off-white; this is 4.70:1 */ --ojas-orange-deep: #D14A14; /* white on Orange Slice is 3.26:1; on this 4.47:1 */ --ojas-error-bg: #FBE9E4; /* form errors: a tint of Papaya, not red */ --ojas-error-text: #6B2610; /* 8.9:1 on that tint */ /* ---------- Semantic ---------------------------------------------------- */ --ojas-bg: var(--ojas-offwhite); --ojas-bg-alt: var(--ojas-vanilla); --ojas-bg-accent: var(--ojas-jasmine); --ojas-bg-inverse: var(--ojas-amazon); --ojas-bg-footer: var(--ojas-amazon-deep); --ojas-text: var(--ojas-ink); --ojas-heading: var(--ojas-amazon); --ojas-text-on-dark: var(--ojas-offwhite); --ojas-muted-on-dark: rgba(248, 247, 246, 0.72); /* * Leaf-pattern strength. The tile ships at the strength the client drew it; * this veil — the ground colour, painted back over it — is what sets how far * it comes forward, so the asset stays their artwork and the decision stays * in CSS. * * 0.85 leaves 15% of the pattern showing — a design call, and comfortably * inside what the deeper ground (#0E4F28) can carry: every text style clears * AA, the tightest being muted body text at 4.77:1. The ceiling here is 20% * (4.54:1); above that the leaves start eating into small text. Amazon could * not carry any useful strength at all — a full Island stroke under body text * is 2.96:1 there, and even a 5% texture pushed muted text under AA, which is * why the patterned sections use the deeper green instead. See * .ojas-pattern-leaves in components.css. */ --ojas-leaf-veil: rgba(14, 79, 40, 0.85); --ojas-eyebrow: var(--ojas-jasmine-text); --ojas-eyebrow-on-dark: var(--ojas-vanilla); /* 4.83:1 on Amazon; Jasmine is 2.94 */ --ojas-link: var(--ojas-amazon); --ojas-focus: var(--ojas-amazon); /* ---------- Overlays ---------------------------------------------------- */ --ojas-scrim: rgba(14, 79, 40, 0.45); /* Amazon-tinted, not black */ --ojas-scrim-heavy: rgba(14, 79, 40, 0.68); /* * For white text over a photograph. Measured, not guessed: against a * blown-out highlight (the worst a photo can give) 0.68 puts white at * 4.08:1 and the off-white body colour at 3.8:1 — both under AA. At 0.78 * they are 5.31:1 and 4.96:1, so the header stays legible whatever photo * the client swaps in. */ --ojas-scrim-photo: rgba(14, 79, 40, 0.78); /* Behind the pinned stack: blurred photo, then this, then the glass card. */ --ojas-scrim-pin: rgba(14, 79, 40, 0.55); --ojas-glass-pin: rgba(24, 43, 38, 0.62); --ojas-glass-fill: rgba(255, 255, 255, 0.08); --ojas-glass-border: rgba(255, 255, 255, 0.22); /* ---------- Families [b] — self-hosted, see fonts.css ------------------- */ --ojas-font-display: "Quitos", "Iowan Old Style", Georgia, serif; --ojas-font-body: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* ---------- Weights ------------------------------------------------------ */ --ojas-weight-display: 400; /* Quitos ships one weight */ --ojas-weight-body: 400; --ojas-weight-medium: 500; --ojas-weight-semibold: 600; --ojas-weight-bold: 700; /* ---------- Type scale [d] ------------------------------------------------ Sentence case throughout — the guideline never sets Quitos in caps. Endpoints at 375px and 1440px; interpolation verified in the preview. */ /* * Type scales from one multiplier so the reader's own size preference (see * the accessibility panel) moves every step together and the hierarchy holds. * The sizes are px rather than rem, so scaling the root font size would not * have reached them. */ --ojas-text-scale: 1; --ojas-size-h1: clamp(calc(44px * var(--ojas-text-scale)), calc((28.51px + 4.131vw) * var(--ojas-text-scale)), calc(88px * var(--ojas-text-scale))); --ojas-size-h2: clamp(calc(36px * var(--ojas-text-scale)), calc((27.55px + 2.254vw) * var(--ojas-text-scale)), calc(60px * var(--ojas-text-scale))); --ojas-size-h3: clamp(calc(28px * var(--ojas-text-scale)), calc((23.77px + 1.127vw) * var(--ojas-text-scale)), calc(40px * var(--ojas-text-scale))); --ojas-size-h4: calc(24px * var(--ojas-text-scale)); --ojas-size-h5: calc(19px * var(--ojas-text-scale)); --ojas-size-h6: calc(16px * var(--ojas-text-scale)); --ojas-size-lead: calc(19px * var(--ojas-text-scale)); --ojas-size-body: calc(16px * var(--ojas-text-scale)); --ojas-size-ui: calc(15px * var(--ojas-text-scale)); --ojas-size-meta: calc(12px * var(--ojas-text-scale)); /* * Label text: chips, markers, the small caps under a figure. It used to be * written as a bare 10px or 11px in a dozen rules, which meant it was the one * kind of text on the site the reader's "larger text" setting could not * touch — and it is the kind carrying the dietary markers. */ --ojas-size-micro: calc(11px * var(--ojas-text-scale)); /* ---------- Line height / tracking ---------------------------------------- */ --ojas-lh-display: 1.05; --ojas-lh-heading: 1.2; --ojas-lh-body: 1.65; --ojas-lh-tight: 1.1; --ojas-track-display: -0.01em; --ojas-track-label: 0.08em; /* Montserrat uppercase labels */ --ojas-track-button: 0.02em; /* ---------- Layout ---------------------------------------------------------- */ --ojas-container: 1320px; --ojas-container-narrow: 780px; --ojas-gutter: clamp(20px, 4vw, 40px); --ojas-grid-gap: clamp(20px, 2.5vw, 32px); /* Clears the brand lockup: a 48px mark, its tagline, and air either side. */ --ojas-header-h: 96px; /* * What the two floating controls take out of the bottom of the viewport: the * "Reading options" pill on the left and "Order online" on the right, each * 48px tall and sitting 20px up. Anything that must stay readable at the very * end of the page has to clear this, or it ends up underneath them — which is * exactly what happened to the designer credit in the footer. */ --ojas-float-clear: 88px; /* ---------- Spacing ---------------------------------------------------------- */ --ojas-space-2xs: 4px; --ojas-space-xs: 8px; --ojas-space-sm: 12px; --ojas-space-md: 20px; --ojas-space-lg: 32px; --ojas-space-xl: 48px; --ojas-space-2xl: 64px; --ojas-space-3xl: 96px; --ojas-space-4xl: 128px; --ojas-pull: -8px; /* Multiplied by --ojas-space-scale so the Customizer can tighten or loosen the whole page in one move (Design → Layout → Section spacing). */ --ojas-space-scale: 1; --ojas-section-y: calc(clamp(56px, 4vw + 40px, 104px) * var(--ojas-space-scale)); --ojas-section-y-large: calc(clamp(72px, 6vw + 48px, 144px) * var(--ojas-space-scale)); /* ---------- Radii — the guideline's cards are generously rounded ---------- */ --ojas-radius-sm: 12px; --ojas-radius: 20px; --ojas-radius-lg: 28px; --ojas-radius-pill: 999px; --ojas-radius-circle: 50%; /* ---------- Motion ------------------------------------------------------------ */ --ojas-transition: 0.25s; --ojas-ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* * The reveal curve. Nearly no acceleration at the start and a long, flat * settle — the thing that separates a considered entrance from a element * that simply fades. Paired with a longer duration than a UI transition, * because an entrance is being watched and a hover is not. */ --ojas-ease-entrance: cubic-bezier(0.16, 1, 0.3, 1); --ojas-reveal-duration: 0.9s; /* ---------- Elevation --------------------------------------------------------- */ --ojas-shadow-sm: 0 1px 2px rgba(27, 42, 30, 0.06); --ojas-shadow: 0 8px 24px rgba(27, 42, 30, 0.08); --ojas-shadow-lg: 0 20px 48px rgba(27, 42, 30, 0.12); /* ---------- Z-index ------------------------------------------------------------ */ --ojas-z-header: 100; --ojas-z-drawer: 200; --ojas-z-skip: 300; } /* Breakpoints — custom properties cannot be used in @media. mobile <= 767px · tablet <= 1024px · desktop >= 1025px */ /* ========================================================================== Reader preferences Set by the accessibility panel (assets/js/a11y.js) as attributes on , and kept here because they are token overrides, not components. Nothing here claims to make the site accessible on its own — the site is built to meet WCAG 2.1 AA without them; these are preferences on top of that. ========================================================================== */ :root[data-ojas-text="large"] { --ojas-text-scale: 1.15; } :root[data-ojas-text="larger"] { --ojas-text-scale: 1.32; } /* * Higher contrast: the defaults already clear AA, these clear AAA for body * text. Muted goes from 5.6:1 to 11.4:1 on off-white, and the hairline border * from 1.22:1 to 3.46:1 — clearing the 3:1 that WCAG asks of non-text UI — so * card and field edges are visible to a low-vision reader rather than implied. */ :root[data-ojas-contrast="high"] { --ojas-muted: #2A3A2E; --ojas-border: #7E8878; --ojas-jasmine-text: #3C5D14; --ojas-eyebrow: #3C5D14; --ojas-text-on-dark: #FFFFFF; --ojas-eyebrow-on-dark: #FFFFFF; }