/* ========================================================================== Ojas Blend — components ========================================================================== */ /* ---------- Eyebrow: small Montserrat label above headings ----------------- */ .ojas-eyebrow { display: inline-flex; align-items: center; gap: var(--ojas-space-xs); margin-bottom: var(--ojas-space-sm); font-family: var(--ojas-font-body); font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); line-height: var(--ojas-lh-tight); letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-eyebrow); } .ojas-eyebrow::before { /* leaf tick, decorative */ content: ""; width: 10px; height: 10px; border-radius: 0 10px 0 10px; /* a leaf-ish lozenge */ background: var(--ojas-jasmine); flex: 0 0 auto; } .ojas-section--dark .ojas-eyebrow, .ojas-hero--dark .ojas-eyebrow { color: var(--ojas-eyebrow-on-dark); } /* * Ink, not Amazon. base.css says of this ground "Jasmine: ink text only * (7.4:1)" and then the eyebrow was set in Amazon anyway — 2.94:1 on Jasmine, * under AA, on every accent section including the booking block on the front * page. The tick goes with it: at 2.94 it was under the 3:1 a meaningful * graphic needs too. */ .ojas-section--accent .ojas-eyebrow { color: var(--ojas-ink); } .ojas-section--accent .ojas-eyebrow::before { background: var(--ojas-ink); } .ojas-eyebrow + :is(h1, h2, h3) { margin-top: var(--ojas-pull); } /* ---------- Chips (dietary, badges) ----------------------------------------- */ .ojas-chips { display: flex; flex-wrap: wrap; gap: var(--ojas-space-xs); margin: 0; padding: 0; list-style: none; } .ojas-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 10px; /* A chip is a word or two. If it is ever handed a sentence it wraps inside its card rather than running out of it — the Dough Therapy card did. */ max-width: 100%; white-space: normal; overflow-wrap: anywhere; text-align: left; border-radius: var(--ojas-radius-pill); background: var(--ojas-vanilla); color: var(--ojas-ink); font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; white-space: nowrap; } .ojas-chip--badge { background: var(--ojas-lemon); } .ojas-chip--new { background: var(--ojas-papaya); } .ojas-chip--dark { background: var(--ojas-amazon); color: var(--ojas-white); } .ojas-section--dark .ojas-chip { background: var(--ojas-glass-fill); color: var(--ojas-offwhite); border: 1px solid var(--ojas-glass-border); } /* ---------- Buttons: pills, 52px ------------------------------------------- */ .ojas-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--ojas-space-xs); min-height: 52px; padding: 14px 26px; border: 1.5px solid transparent; border-radius: var(--ojas-radius-pill); font-family: var(--ojas-font-body); font-size: var(--ojas-size-ui); font-weight: var(--ojas-weight-semibold); line-height: var(--ojas-lh-tight); letter-spacing: var(--ojas-track-button); text-decoration: none; cursor: pointer; transition: background var(--ojas-transition) var(--ojas-ease), color var(--ojas-transition) var(--ojas-ease), border-color var(--ojas-transition) var(--ojas-ease), transform var(--ojas-transition) var(--ojas-ease); } .ojas-btn:hover { transform: translateY(-1px); } .ojas-btn__icon { transition: transform var(--ojas-transition) var(--ojas-ease); } .ojas-btn:hover .ojas-btn__icon { transform: translateX(3px); } .ojas-btn--primary { background: var(--ojas-amazon); color: var(--ojas-white); } /* 6.0:1 */ .ojas-btn--primary:hover { background: var(--ojas-jasmine); color: var(--ojas-ink); } /* 7.4:1 */ /* * The accent CTA is ink, not Orange Slice. * * Orange was the guideline's "appetite CTA" and it did the job it was picked * for — 3.05:1 against the off-white page, so the button announced itself. Ink * announces itself harder (13.9:1 against the same page) and reads restrained * rather than loud, which is the register the rest of this site is in. * * It is distinguished from the primary button by darkness rather than hue — * 2.4:1 between the two — so the pair reads as a hierarchy instead of as two * competing colours. */ .ojas-btn--accent { background: var(--ojas-ink); color: var(--ojas-white); } /* 14.3:1 */ .ojas-btn--accent:hover { background: var(--ojas-amazon); color: var(--ojas-white); } /* 6.0:1 */ /* * ...and reverses on a dark ground, because ink on the deep green sections is * 1.4:1 — a button you cannot see. The CTA band, the gift card, the dark page * headers and the Be-the-creator panel all carry accent buttons, so this is not * hypothetical. The creator panel was found by measuring every accent button on * every page against its own ground, not by reading the templates. */ .ojas-section--dark .ojas-btn--accent, .ojas-hero--dark .ojas-btn--accent, .ojas-giftcard .ojas-btn--accent, .ojas-page-header--amazon .ojas-btn--accent, .ojas-page-header--deep .ojas-btn--accent, .ojas-creator__panel .ojas-btn--accent { background: var(--ojas-white); color: var(--ojas-ink); } .ojas-section--dark .ojas-btn--accent:hover, .ojas-hero--dark .ojas-btn--accent:hover, .ojas-giftcard .ojas-btn--accent:hover, .ojas-page-header--amazon .ojas-btn--accent:hover, .ojas-page-header--deep .ojas-btn--accent:hover, .ojas-creator__panel .ojas-btn--accent:hover { background: var(--ojas-jasmine); color: var(--ojas-ink); } .ojas-btn--secondary { background: var(--ojas-jasmine); color: var(--ojas-ink); } /* 7.4:1 */ .ojas-btn--secondary:hover { background: var(--ojas-amazon); color: var(--ojas-white); } .ojas-btn--ghost { background: transparent; color: var(--ojas-amazon); border-color: var(--ojas-amazon); } .ojas-btn--ghost:hover { background: var(--ojas-amazon); color: var(--ojas-white); } /* * A ghost button over a photograph. The default Amazon-on-transparent measures * 1.13:1 against the header scrim — invisible — where white is 5.29:1 even if * the photograph behind it is pure white. */ .ojas-section--dark .ojas-btn--ghost, .ojas-page-header--amazon .ojas-btn--ghost, .ojas-page-header--deep .ojas-btn--ghost, .ojas-hero--dark .ojas-btn--ghost { color: var(--ojas-white); border-color: var(--ojas-glass-border); } .ojas-section--dark .ojas-btn--ghost:hover, .ojas-page-header--amazon .ojas-btn--ghost:hover, .ojas-page-header--deep .ojas-btn--ghost:hover, .ojas-hero--dark .ojas-btn--ghost:hover { background: var(--ojas-white); color: var(--ojas-amazon); border-color: var(--ojas-white); } /* * A ghost button is a colour and an outline with nothing behind it, so it can * only be read against the ground it sits on. Amazon on Amazon is 1.00:1 — the * phone number on the speciality headers vanished completely the moment those * headers stopped being photographs, because the rule that saved it was keyed * to the scrim. Every ground states its own now. */ .ojas-page-header--jasmine .ojas-btn--ghost, .ojas-page-header--island .ojas-btn--ghost, .ojas-page-header--papaya .ojas-btn--ghost, .ojas-page-header--lemon .ojas-btn--ghost, .ojas-page-header--vanilla .ojas-btn--ghost, .ojas-page-header--band .ojas-btn--ghost { color: var(--ojas-ink); border-color: var(--ojas-ink); } .ojas-page-header--jasmine .ojas-btn--ghost:hover, .ojas-page-header--island .ojas-btn--ghost:hover, .ojas-page-header--papaya .ojas-btn--ghost:hover, .ojas-page-header--lemon .ojas-btn--ghost:hover, .ojas-page-header--vanilla .ojas-btn--ghost:hover, .ojas-page-header--band .ojas-btn--ghost:hover { background: var(--ojas-ink); color: var(--ojas-white); border-color: var(--ojas-ink); } /* Text buttons in a header, same reasoning. */ .ojas-page-header--amazon .ojas-btn--text, .ojas-page-header--deep .ojas-btn--text { color: var(--ojas-vanilla); } .ojas-section--accent .ojas-btn--ghost { color: var(--ojas-ink); border-color: var(--ojas-ink); } .ojas-section--accent .ojas-btn--ghost:hover { background: var(--ojas-ink); color: var(--ojas-white); } .ojas-btn--compact { min-height: 44px; padding: 11px 20px; font-size: 14px; } .ojas-btn--full { width: 100%; } /* * The underlined text CTA. It is not a chunky button, but it is a standalone * control rather than a link inside a sentence, so WCAG 2.2's 24x24 minimum * target applies — it was 21px. The box now clears that on its own, and an * invisible band takes the actual hit area to 44px without moving the * underline off the text. */ .ojas-btn--text { position: relative; min-height: 24px; padding: 2px 0 5px; border: 0; border-bottom: 1.5px solid currentColor; border-radius: 0; background: none; color: var(--ojas-amazon); } .ojas-btn--text::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); } .ojas-btn--text:hover { color: var(--ojas-jasmine-text); transform: none; } .ojas-section--dark .ojas-btn--text { color: var(--ojas-vanilla); } /* ---------- Header --------------------------------------------------------- */ /* * The frosted bar is painted by a pseudo-element, not by the header itself. * * `backdrop-filter` makes the element carrying it a containing block for * fixed-position descendants — and the mobile drawer is a fixed child of this * header, so with the filter here its `top: 96px; bottom: 0` resolved against * the 97px bar instead of the viewport and the panel collapsed to 64px tall. * * The rule applies to whatever has the filter, and a pseudo-element cannot * contain anything, so moving both the tint and the blur onto ::before keeps * the frost at every width and leaves the drawer measuring against the screen. * The tint has to move with it: left on the header it would sit *over* the * blur and hide it. */ .ojas-header { position: sticky; top: 0; z-index: var(--ojas-z-header); background: transparent; border-bottom: 1px solid var(--ojas-border); } .ojas-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(248, 247, 246, 0.92); backdrop-filter: saturate(1.2) blur(10px); } .ojas-header--overlay { position: absolute; inset: 0 0 auto; background: transparent; border-bottom-color: transparent; backdrop-filter: none; } .ojas-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--ojas-space-lg); min-height: var(--ojas-header-h); } .ojas-brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .ojas-brand img { display: block; } /* -------------------------------------------------------------------------- The brand lockup The tagline used to be baked into the wordmark artwork, at 13.5% of its height — a few pixels of raster type at any size a header can carry, and scaling it up only produced a bigger soft thing. The mark now ships without it (assets/images/mark-*.png) and "Food for Soul" is live text: crisp at every size, scaling with the reader's font settings, translatable, selectable and spoken aloud. The artwork's own arrangement is kept — tagline beneath the mark, right edges aligned — and the whole lockup scales from one number, --ojas-lockup-h. -------------------------------------------------------------------------- */ .ojas-lockup { --ojas-lockup-h: 48px; display: inline-flex; flex-direction: column; align-items: flex-end; /* right edges align, as they do in the artwork */ gap: 3px; line-height: 1; } .ojas-lockup__mark { height: var(--ojas-lockup-h); width: auto; display: block; } .ojas-lockup__tagline { font-family: var(--ojas-font-body); font-weight: var(--ojas-weight-medium); /* * Measured off the vector, the tagline's ink is 14.4% of the mark's height. * Live type is set a good deal larger than that, because the point of the * change is that it can be read; the floor stops a small viewport taking it * below legibility. */ font-size: max(11px, calc(var(--ojas-lockup-h) * 0.27)); letter-spacing: 0.02em; white-space: nowrap; color: var(--ojas-brand-mark); } /* * One tagline colour per ground, each measured against it. The tagline is set * in the mark's own ink, so the two must agree: #1D6837 here was sampled from * the guideline-PDF cut, where JPEG had dragged Amazon off by a few points. * The vector inks it #14723A exactly, which is 5.61:1 on the header ground — * less than the 6.36:1 the drifted green measured, and still clear of AA. * * On the deep green footer the artwork's own jasmine is 4.39:1 — under AA for * text this size — so the lockup uses the guideline's Jasmine hex, which is * 4.74:1 and, at a hair apart, indistinguishable beside the mark. */ .ojas-lockup--amazon { --ojas-brand-mark: var(--ojas-amazon); } .ojas-lockup--jasmine { --ojas-brand-mark: var(--ojas-jasmine); } .ojas-lockup--white { --ojas-brand-mark: var(--ojas-white); } .ojas-footer__brand .ojas-lockup { --ojas-lockup-h: 56px; align-items: flex-start; } .ojas-footer__brand .ojas-lockup__tagline { padding-inline-start: 2px; } @media (max-width: 1024px) { .ojas-header .ojas-lockup { --ojas-lockup-h: 40px; } } @media (max-width: 480px) { .ojas-header .ojas-lockup { --ojas-lockup-h: 34px; } } .ojas-brand__name { /* text fallback when no logo is uploaded */ font-family: var(--ojas-font-display); font-size: 30px; line-height: 1; color: var(--ojas-amazon); margin: 0; } .ojas-header--overlay .ojas-brand__name { color: var(--ojas-white); } .ojas-header__actions { display: flex; align-items: center; gap: var(--ojas-space-sm); flex-shrink: 0; } .ojas-header__phone { font-size: var(--ojas-size-ui); font-weight: var(--ojas-weight-medium); text-decoration: none; white-space: nowrap; color: var(--ojas-ink); } @media (max-width: 1200px) { .ojas-header__phone { display: none; } } @media (max-width: 480px) { .ojas-header__actions .ojas-btn { display: none; } } .ojas-nav__actions { display: none; } /* ---------- Navigation ----------------------------------------------------- */ .ojas-nav ul { list-style: none; margin: 0; padding: 0; } .ojas-nav > ul { display: flex; align-items: center; gap: var(--ojas-space-lg); } /* * Scoped to the menu list. Written as `.ojas-nav a` it also claimed the "Book * catering" button that sits under the list in the drawer — a two-part selector * beats `.ojas-btn--primary` — handing it the link's colour, display, padding * and bottom rule. Same shape of bug as `.ojas-faq-nav a` had. */ .ojas-nav li a { display: inline-block; padding: var(--ojas-space-xs) 0; font-size: var(--ojas-size-ui); font-weight: var(--ojas-weight-medium); text-decoration: none; color: var(--ojas-ink); } .ojas-header--overlay .ojas-nav li a { color: var(--ojas-white); } .ojas-nav li a:hover, .ojas-nav .current-menu-item > a, .ojas-nav .current_page_item > a, .ojas-nav .current-menu-ancestor > a { color: var(--ojas-amazon); } .ojas-nav .current-menu-item > a { box-shadow: inset 0 -2px 0 var(--ojas-jasmine); } .ojas-nav li { position: relative; margin: 0; } .ojas-nav .sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; padding: var(--ojas-space-sm) 0; background: var(--ojas-white); border-radius: var(--ojas-radius); box-shadow: var(--ojas-shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--ojas-transition) var(--ojas-ease), transform var(--ojas-transition) var(--ojas-ease), visibility var(--ojas-transition); } .ojas-nav li:hover > .sub-menu, .ojas-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .ojas-nav .sub-menu a { display: block; padding: var(--ojas-space-xs) var(--ojas-space-md); color: var(--ojas-ink); } .ojas-nav .sub-menu a:hover { background: var(--ojas-offwhite); color: var(--ojas-amazon); } .ojas-nav .sub-menu .sub-menu { top: 0; left: 100%; } .ojas-nav-toggle { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; background: transparent; border: 1.5px solid var(--ojas-border); border-radius: var(--ojas-radius-circle); cursor: pointer; color: var(--ojas-amazon); } .ojas-nav-toggle__bar { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: background var(--ojas-transition); } .ojas-nav-toggle__bar::before, .ojas-nav-toggle__bar::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: transform var(--ojas-transition) var(--ojas-ease); } .ojas-nav-toggle__bar::before { top: -6px; } .ojas-nav-toggle__bar::after { top: 6px; } .ojas-nav-toggle[aria-expanded="true"] .ojas-nav-toggle__bar { background: transparent; } .ojas-nav-toggle[aria-expanded="true"] .ojas-nav-toggle__bar::before { transform: translateY(6px) rotate(45deg); } .ojas-nav-toggle[aria-expanded="true"] .ojas-nav-toggle__bar::after { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 1024px) { .ojas-nav-toggle { display: inline-flex; } /* * The drawer opens *below* the header bar rather than behind it. * *
is also sticky with a z-index — a stacking context — so the * drawer's own z-index only ever resolved against its siblings inside that * bar. Two things followed: it painted over the logo and the close button, * and the backdrop (a child of , outside that context) painted over * the whole drawer, washing it out and swallowing every tap. */ .ojas-nav { position: fixed; inset: var(--ojas-header-h) 0 0 auto; z-index: var(--ojas-z-drawer); width: min(360px, 88vw); padding: var(--ojas-space-lg); background: var(--ojas-amazon); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform var(--ojas-transition) var(--ojas-ease); } /* The bar itself stays above the drawer, so the logo and the close button are never covered by it. */ .ojas-brand, .ojas-header__actions { position: relative; z-index: calc(var(--ojas-z-drawer) + 1); } .ojas-nav[data-open="true"] { transform: none; } /* * Below 480px the bar drops its button and below 1200px its phone number, so * the drawer shows whichever is missing. Without this a phone had no way to * book and no way to call anywhere in the navigation. */ /* The last link already draws a rule, so the block needs air, not a second one. */ .ojas-nav__actions { display: grid; gap: var(--ojas-space-md); margin-top: var(--ojas-space-xl); } .ojas-nav__actions .ojas-nav__cta { display: none; } /* * `.ojas-nav a` sets display:block for every link in the drawer and outranks * a single class, so the label and the number ran together on one line. */ .ojas-nav a.ojas-nav__phone { display: grid; gap: 2px; padding: 0; border-bottom: 0; } .ojas-nav__phone-label { font-size: var(--ojas-size-meta); text-transform: uppercase; letter-spacing: var(--ojas-track-label); color: var(--ojas-eyebrow-on-dark); } .ojas-nav__phone-number { font-family: var(--ojas-font-display); font-size: var(--ojas-size-h5, 20px); color: var(--ojas-white); } /* * The page is pinned while the drawer is open (see lock() in theme.js). The * header goes fixed for the duration: sticky needs a scrollport, and there * is not one while the body is pinned. */ body.ojas-nav-open { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } body.ojas-nav-open .ojas-header { position: fixed; top: 0; left: 0; right: 0; } .ojas-nav > ul { flex-direction: column; align-items: stretch; gap: 0; } .ojas-nav li a, .ojas-header--overlay .ojas-nav li a { display: block; padding: var(--ojas-space-sm) 0; color: var(--ojas-white); border-bottom: 1px solid var(--ojas-glass-border); font-size: 17px; box-shadow: none; } .ojas-nav .sub-menu { position: static; min-width: 0; padding: 0 0 0 var(--ojas-space-md); background: transparent; box-shadow: none; opacity: 1; visibility: visible; transform: none; } /* * --ojas-muted-on-dark is off-white at 72%, which composites to 3.72:1 on * the drawer's green — under AA for 17px text, and it applied to every * sub-menu link in the menu. 86% is the first step that clears 4.5:1; the * token is left alone because it is read against darker grounds elsewhere. */ .ojas-nav .sub-menu a { color: rgba(248, 247, 246, 0.86); } .ojas-nav li a:hover, .ojas-nav .sub-menu a:hover { color: var(--ojas-white); background: transparent; box-shadow: none; } /* * The current section was Amazon green on the Amazon-green drawer: a ratio * of 1.00, which is to say invisible. Whichever section you were in vanished * and left a headless group of links behind it. Jasmine is the obvious * substitute and is only 2.94:1 here, so the current state is carried by * white text plus a Lemon rule down the edge — 4.70:1, and a second cue that * is not colour. These selectors sit after the .sub-menu rules, which * otherwise win on source order and flatten the current page back into its * neighbours. */ .ojas-nav .current-menu-item > a, .ojas-nav .current_page_item > a, .ojas-nav .current-menu-ancestor > a, .ojas-nav .current-menu-parent > a, .ojas-nav .sub-menu .current-menu-item > a, .ojas-nav .sub-menu .current_page_item > a { color: var(--ojas-white); background: transparent; box-shadow: inset 2px 0 0 var(--ojas-lemon); padding-left: var(--ojas-space-xs); } /* * Below the header, not below the drawer. The backdrop is a child of * and the drawer is inside the header's stacking context, so "drawer minus * one" still put it on top of the drawer. */ .ojas-nav-backdrop { position: fixed; inset: 0; z-index: calc(var(--ojas-z-header) - 1); background: var(--ojas-scrim-heavy); opacity: 0; visibility: hidden; transition: opacity var(--ojas-transition), visibility var(--ojas-transition); } .ojas-nav-backdrop[data-open="true"] { opacity: 1; visibility: visible; } /* * Nothing floats over an open drawer. The header is sticky with z-index 100, * which makes it a stacking context, so the drawer's 200 only ranks it * against its siblings inside that bar — and the order button, a child of * at the same 100 but later in the document, painted on top of it and * took the taps in that corner. The drawer is modal; these two come back the * moment it closes. */ body.ojas-nav-open .ojas-order, body.ojas-nav-open .ojas-a11y { display: none; } } /* * The drawer button appears exactly where the bar drops its own. It has to come * after the drawer block above: at equal specificity that block's * `display: none` would otherwise win on source order. */ @media (max-width: 480px) { .ojas-nav__actions .ojas-nav__cta { display: inline-flex; justify-self: start; } } /* ---------- Hero: light split, leaf-masked photo (guideline p.2) ------------ */ .ojas-hero { position: relative; padding-block: var(--ojas-section-y) var(--ojas-section-y-large); overflow: hidden; } .ojas-hero__grid { display: grid; gap: clamp(var(--ojas-space-lg), 5vw, var(--ojas-space-3xl)); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); } /* * The hero headline breaks on its own commas, not mid-clause. * * ojas_bind_closing_clause() binds the words after the final comma with * non-breaking spaces, so the line break lands on the comma where the reader * pauses anyway. Two things have to be off for that to work: * * `text-wrap: balance` was tried here first and actively fought it — balance * picks a target line width from the whole block, the bound clause is wider * than that target, and the browser then breaks it wherever it can. Which, * because base.css sets `overflow-wrap: break-word` on everything to stop long * URLs escaping their container, meant mid-word: "not just the roo / m". * * So: balance off (base.css sets it on every heading) and normal wrapping * restored, for this one element. A hero headline is short, hand-written, and * never a URL. */ .ojas-hero h1 { text-wrap: wrap; overflow-wrap: normal; } /* * The eyebrow is 12px everywhere it labels a section, which is right for a * label. In the hero it is not labelling anything — it is the brand line, the * first words on the site, and it was reading as fine print above an 88px * headline. 15px carries it without turning it into a second heading, and the * leaf tick grows with it so the pair stays balanced. */ .ojas-hero .ojas-eyebrow { font-size: var(--ojas-size-ui); letter-spacing: 0.1em; margin-bottom: var(--ojas-space-md); } .ojas-hero .ojas-eyebrow::before { width: 12px; height: 12px; border-radius: 0 12px 0 12px; } .ojas-hero__text { max-width: 54ch; margin-top: var(--ojas-space-md); font-size: var(--ojas-size-lead); line-height: 1.6; } .ojas-hero__actions { margin-top: var(--ojas-space-lg); } .ojas-hero__media { position: relative; } .ojas-hero__media img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; } /* Dark variant: full-bleed photo with an Amazon scrim */ .ojas-hero--dark { color: var(--ojas-white); isolation: isolate; min-height: min(80vh, 760px); display: grid; align-items: center; } .ojas-hero--dark h1 { color: var(--ojas-white); } .ojas-hero--dark .ojas-hero__text { color: var(--ojas-text-on-dark); } .ojas-hero__bg { position: absolute; inset: 0; z-index: -2; } .ojas-hero__bg img { width: 100%; height: 100%; object-fit: cover; } .ojas-hero--dark::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ojas-scrim); } .ojas-hero--dark.ojas-hero--scrim-heavy::after { background: var(--ojas-scrim-heavy); } .ojas-hero--center .ojas-hero__inner { text-align: center; margin-inline: auto; } .ojas-hero--center h1 { max-width: 16ch; margin-inline: auto; } .ojas-hero--center .ojas-hero__text, .ojas-hero--center .ojas-eyebrow { margin-inline: auto; justify-content: center; } .ojas-hero--center .ojas-hero__actions { justify-content: center; } /* Leaf mask: the guideline's signature crop, traced from the logo mark and defined once in header.php. The aspect ratio matches the mark, so the curve keeps its shape at any width. */ .ojas-media--leaf { clip-path: url(#ojas-leaf-clip); aspect-ratio: 1.1446; width: 100%; } .ojas-media--leaf img, .ojas-media--leaf video { display: block; width: 100%; height: 100%; object-fit: cover; } .ojas-media--leaf-placeholder { aspect-ratio: 1.1446; } /* A colour or gradient inside the leaf wrapper fills it; the wrapper has the shape. */ .ojas-media--leaf > .ojas-media--leaf-fill { width: 100%; height: 100%; aspect-ratio: auto; } .ojas-media--rounded { border-radius: var(--ojas-radius-lg); overflow: hidden; } .ojas-media--circle { border-radius: var(--ojas-radius-circle); aspect-ratio: 1; object-fit: cover; } /* Leaf pattern band (guideline p.6) */ /* * The leaf pattern. * * Text on a pattern is a contrast problem before it is a taste problem, and the * numbers here are unforgiving. On the flat Amazon ground white is 6.00:1 and * the guideline's Vanilla eyebrow is 4.83:1 — but where a leaf stroke crossed a * letter at the original .85 opacity those fell to 3.49:1 and 2.81:1, both * under AA. * * Vanilla has almost no headroom — 0.33 above the 4.5:1 line — so the pattern * has to be quiet enough for it rather than the other way round. At a 0.05 * fill every colour on the ground still clears AA against a leaf: white * 5.68:1, off-white 5.31:1, Vanilla 4.57:1. That keeps the guideline's own * eyebrow colour instead of substituting white for it. * * Two earlier attempts are worth not repeating. A veil between the pattern and * the content measured well but could only leave the leaves showing in a strip * along the top and bottom edges — correct, and it looked like a bug. Before * that the pattern was a generic outlined leaf drawn in this stylesheet, which * was a second leaf, slightly different from the one in the logo. */ .ojas-pattern-leaves { /* * Deeper than the plain dark sections, and deliberately so. On Amazon there * is no strength at which this pattern and small body text can both hold: * a full Island stroke under 16px text measures 2.96:1, and Amazon is light * enough that even a 5% texture pushes muted text under AA. #0E4F28 has the * headroom — the leaves run at 15% here and the tightest text on the section * still measures 4.77:1. The ground would carry 20% (4.54:1) if the pattern * is ever wanted stronger; the strength lives in --ojas-leaf-veil. */ background-color: var(--ojas-amazon-deep); /* * The leaf from the wordmark, emitted by ojas_leaf_pattern_style() from the * same outline the photo clip uses. The fallback is a plain ground: a * missing pattern is a section that still reads perfectly. */ /* * Veil first, pattern under it: a layer of the ground colour painted back * over the leaves. It sets the strength without touching the file, so the * SVG stays the client's artwork and this stays a design decision. */ background-image: linear-gradient(var(--ojas-leaf-veil), var(--ojas-leaf-veil)), var(--ojas-leaf-pattern, none); background-size: auto, var(--ojas-leaf-pattern-size, 520px 520px); } /* Page header for inner pages */ .ojas-page-header { padding-block: var(--ojas-section-y); text-align: center; } /* -------------------------------------------------------------------------- Page header grounds Colour rather than photography: a photograph behind a heading always needs a scrim, and a scrim makes every page the same grey-green. Seven grounds from the guideline palette instead, each with the text colour that clears AA on it — the numbers are in the README table, and none of these pairings is below 4.69:1. -------------------------------------------------------------------------- */ /* * background-COLOR, not the `background` shorthand. These rules come after * .ojas-pattern-leaves at equal specificity, so the shorthand was resetting * background-image to none and the CSR page header — which asks for both a * tone and the leaf pattern — had silently been painting no pattern at all * since the tones landed in 1.19.1. A tone only ever meant to set a colour. */ .ojas-page-header--band, .ojas-page-header--vanilla { background-color: var(--ojas-vanilla); } .ojas-page-header--jasmine { background-color: var(--ojas-jasmine); } .ojas-page-header--island { background-color: var(--ojas-island); } .ojas-page-header--lemon { background-color: var(--ojas-lemon); } .ojas-page-header--papaya { background-color: var(--ojas-papaya); } .ojas-page-header--amazon { background-color: var(--ojas-amazon); } .ojas-page-header--deep { background-color: var(--ojas-amazon-deep); } /* A tone sets the ground; a patterned header keeps the deeper one. */ .ojas-page-header.ojas-pattern-leaves { background-color: var(--ojas-amazon-deep); } /* * When a header stands on the same colour as the section beneath it, the two * become one block and their padding stacks — 56px under the header plus 56 * above the section, a hundred and twelve pixels of empty colour between the * lead paragraph and whatever comes next. Only the grounds that genuinely * match are listed: --deep is Amazon deep and --dark is Amazon, which look * close and are not the same value. * * Trimmed to 20px rather than zeroed. At zero the section has no padding to * contain its first child's top margin, the margin collapses out through the * top edge, and 64px of page background appears between two blocks that are * supposed to be one colour — a white stripe where the gap used to be. */ /* * ...unless the header is patterned. Commitments' header is the deeper green * now, so the seam it shares with the Amazon section below is a real colour * change and wants the section's full padding back. The trim only ever earned * its place where the two grounds were identical. */ .ojas-page-header--amazon:not(.ojas-pattern-leaves) + .ojas-section--dark, .ojas-page-header--vanilla + .ojas-section--band, .ojas-page-header--band + .ojas-section--band, .ojas-page-header--jasmine + .ojas-section--accent { padding-top: var(--ojas-space-md); } /* Light grounds: ink throughout, 4.69:1 at worst. */ .ojas-page-header--vanilla, .ojas-page-header--jasmine, .ojas-page-header--island, .ojas-page-header--lemon, .ojas-page-header--papaya { color: var(--ojas-ink); } .ojas-page-header--vanilla h1, .ojas-page-header--jasmine h1, .ojas-page-header--island h1, .ojas-page-header--lemon h1, .ojas-page-header--papaya h1 { color: var(--ojas-ink); } .ojas-page-header--vanilla .ojas-page-header__text, .ojas-page-header--jasmine .ojas-page-header__text, .ojas-page-header--island .ojas-page-header__text, .ojas-page-header--lemon .ojas-page-header__text, .ojas-page-header--papaya .ojas-page-header__text { color: var(--ojas-ink); } /* Amazon is dark enough to carry an Amazon eyebrow only on the two palest. */ .ojas-page-header--band .ojas-eyebrow, .ojas-page-header--vanilla .ojas-eyebrow, .ojas-page-header--lemon .ojas-eyebrow { color: var(--ojas-amazon); } .ojas-page-header--band .ojas-eyebrow::before, .ojas-page-header--vanilla .ojas-eyebrow::before, .ojas-page-header--lemon .ojas-eyebrow::before { background: var(--ojas-amazon); } .ojas-page-header--jasmine .ojas-eyebrow, .ojas-page-header--island .ojas-eyebrow, .ojas-page-header--papaya .ojas-eyebrow { color: var(--ojas-ink); } .ojas-page-header--jasmine .ojas-eyebrow::before, .ojas-page-header--island .ojas-eyebrow::before, .ojas-page-header--papaya .ojas-eyebrow::before { background: var(--ojas-ink); } /* Dark grounds. */ .ojas-page-header--amazon, .ojas-page-header--deep { color: var(--ojas-text-on-dark); } .ojas-page-header--amazon h1, .ojas-page-header--deep h1 { color: var(--ojas-white); } .ojas-page-header--amazon .ojas-page-header__text, .ojas-page-header--deep .ojas-page-header__text { color: var(--ojas-text-on-dark); } .ojas-page-header--amazon .ojas-eyebrow, .ojas-page-header--deep .ojas-eyebrow { color: var(--ojas-vanilla); } .ojas-page-header--amazon .ojas-eyebrow::before, .ojas-page-header--deep .ojas-eyebrow::before { background: var(--ojas-vanilla); } .ojas-page-header--amazon a:not(.ojas-btn), .ojas-page-header--deep a:not(.ojas-btn) { color: var(--ojas-vanilla); } .ojas-page-header--media { position: relative; color: var(--ojas-white); isolation: isolate; padding-block: var(--ojas-section-y-large); } .ojas-page-header--media .ojas-page-header__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; } .ojas-page-header--media .ojas-page-header__media img { width: 100%; height: 100%; object-fit: cover; } .ojas-page-header--media::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ojas-scrim-heavy); } /* A header that actually has a photograph behind it needs the measured scrim. */ .ojas-page-header--media:has(.ojas-page-header__media)::after { background: var(--ojas-scrim-photo); } .ojas-page-header--media h1 { color: var(--ojas-white); } .ojas-page-header--media .ojas-eyebrow { color: var(--ojas-eyebrow-on-dark); } .ojas-page-header__text { max-width: 60ch; margin-inline: auto; font-size: var(--ojas-size-lead); } .ojas-page-header--media .ojas-page-header__text { color: var(--ojas-text-on-dark); } /* ---------- Section heading ---------------------------------------------------- */ .ojas-section-head { margin-bottom: var(--ojas-space-2xl); } .ojas-section-head--center { text-align: center; } .ojas-section-head--center .ojas-eyebrow { justify-content: center; } .ojas-section-head--center .ojas-section-head__text { margin-inline: auto; } .ojas-section-head__text { max-width: 60ch; margin-top: var(--ojas-space-sm); font-size: var(--ojas-size-lead); } .ojas-section-head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--ojas-space-lg); } .ojas-section-head--split > * { margin-bottom: 0; } /* ---------- Cards -------------------------------------------------------------- */ .ojas-card { display: flex; flex-direction: column; background: var(--ojas-white); border-radius: var(--ojas-radius-lg); overflow: hidden; box-shadow: var(--ojas-shadow-sm); transition: transform var(--ojas-transition) var(--ojas-ease), box-shadow var(--ojas-transition) var(--ojas-ease); } .ojas-card:hover { transform: translateY(-4px); box-shadow: var(--ojas-shadow-lg); } .ojas-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ojas-vanilla); } .ojas-menu-media img, .ojas-package-media img { width: 100%; height: 100%; object-fit: cover; } /* Slightly held back, so an unreplaced placeholder reads as pending. */ .ojas-menu-media--empty img { opacity: 0.85; } .ojas-card:hover .ojas-menu-media--empty img, .ojas-card:hover .ojas-package-media--empty img { transform: none; } .ojas-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ojas-ease); } .ojas-card:hover .ojas-card__media img { transform: scale(1.04); } .ojas-card__badge { position: absolute; top: var(--ojas-space-sm); left: var(--ojas-space-sm); } .ojas-card__body { display: flex; flex-direction: column; flex: 1; gap: var(--ojas-space-sm); padding: var(--ojas-space-md) var(--ojas-space-lg) var(--ojas-space-lg); } /* * Card, menu-card, related-card and step titles are set in the body face, not * Quitos. * * Quitos is a display type and it earns its keep at 44px and up, where its * letterforms are the brand. At the 24px a card gives it, with the 1.05 display * leading the heading rule hands down, a two-line title like "Catering for a * fitness brand is not catering for an office" closed up into something you * decode rather than read — and it sat directly above body copy in Montserrat * that was visibly easier to scan. * * So: the body face at h5, semibold for the hierarchy the size no longer * carries, the display tracking removed, and room between the lines. Declared * once for all four, because they are the same thing — the name of an item in a * card — and they were drifting apart: the related card carried its own * font-family, the menu card its own 1.15 leading. The related card keeps a * larger size of its own, set beside its colour further down. * * The booking steps sit four across, which leaves each title about 130px: at * h4 in Quitos "We bring the kitchen to you" wrapped to two cramped lines above * body copy it was supposed to lead. Its numeral badge stays in the display * face — a numeral at 20px in a 44px badge is a mark, not a line to read. * * The feature list is the same story with an icon beside it. Four across on the * home page leaves 193px, and "A restaurant kitchen" was already taking two * lines of Quitos at h4 to say four words — beside a 56px tile, which made the * icon and the title fight over the same vertical space. * * The menu item name was the last one still in the display face, and the worst * of them on a phone: the pizza list leaves 239px beside its photograph, where * every one of the fourteen names wrapped and the longest took four lines. The * restaurant menu shares the class, so its dish rows come with it — which is * the point. A pizza row and a bowl row are the same object and now read the * same way. * * The headings above the grids are still Quitos; nothing about the brand voice * changes, only the size at which it is asked to work. */ .ojas-card__title, .ojas-emenu__title, .ojas-related__title, .ojas-step__title, .ojas-feature__title, .ojas-why__title, .ojas-menu-item__name { font-family: var(--ojas-font-body); font-size: var(--ojas-size-h5); font-weight: var(--ojas-weight-semibold); line-height: 1.35; letter-spacing: 0; } .ojas-card__title { margin: 0; } .ojas-card__title a { text-decoration: none; color: inherit; } .ojas-card__title a:hover { color: var(--ojas-jasmine-text); } .ojas-card__excerpt { margin: 0; color: var(--ojas-muted); } .ojas-card__footer { margin-top: auto; padding-top: var(--ojas-space-sm); display: flex; align-items: center; justify-content: space-between; gap: var(--ojas-space-sm); } .ojas-card__meta { display: flex; flex-wrap: wrap; gap: var(--ojas-space-xs) var(--ojas-space-md); margin: 0; font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-eyebrow); } .ojas-card__price { font-weight: var(--ojas-weight-semibold); color: var(--ojas-amazon); } .ojas-card--tint { background: var(--ojas-vanilla); box-shadow: none; } .ojas-card--plain { background: transparent; box-shadow: none; } .ojas-card--plain:hover { box-shadow: none; } .ojas-card--plain .ojas-card__body { padding-inline: 0; padding-bottom: 0; } .ojas-card--plain .ojas-card__media { border-radius: var(--ojas-radius); } .ojas-section--dark .ojas-card { background: var(--ojas-glass-fill); border: 1px solid var(--ojas-glass-border); box-shadow: none; color: var(--ojas-text-on-dark); } .ojas-section--dark .ojas-card__title { color: var(--ojas-white); } .ojas-section--dark .ojas-card__excerpt { color: var(--ojas-muted-on-dark); } .ojas-section--dark .ojas-card__meta { color: var(--ojas-eyebrow-on-dark); } .ojas-section--dark .ojas-card__price { color: var(--ojas-lemon); } /* ---------- Feature list ----------------------------------------------------- */ .ojas-feature { display: flex; gap: var(--ojas-space-md); } .ojas-feature__icon { flex: 0 0 auto; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 0 20px 0 20px; /* leaf-cornered square */ background: var(--ojas-jasmine); color: var(--ojas-ink); } /* * These tiles used to hold a Unicode character — ✿, ☯, ♥, ♻, a bare dollar * sign — which meant the drawing came from whichever fallback font the reader's * device had: a flat outline on Windows, a full-colour emoji on a phone, a * notdef box where the font had nothing. They hold ojas_icon() now: one 24x24 * grid, one stroke weight, currentColor, so a tile picks up the ink or the * white of whatever section it lands in. */ .ojas-icon { display: block; } .ojas-section--dark .ojas-feature__icon { background: var(--ojas-jasmine); color: var(--ojas-ink); } .ojas-feature__title { margin: 0 0 var(--ojas-space-xs); color: var(--ojas-heading); } /* type comes from the shared card-title rule */ .ojas-section--dark .ojas-feature__title { color: var(--ojas-white); } .ojas-feature__text { margin: 0; color: var(--ojas-muted); } .ojas-section--dark .ojas-feature__text { color: var(--ojas-muted-on-dark); } /* ---------- Testimonials ----------------------------------------------------- */ .ojas-testimonial { max-width: 40ch; margin-inline: auto; text-align: center; } .ojas-testimonial__mark { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto var(--ojas-space-md); border-radius: 0 24px 0 24px; background: var(--ojas-vanilla); font-family: var(--ojas-font-display); font-size: 40px; line-height: 1; color: var(--ojas-amazon); } .ojas-testimonial__quote { margin: 0 0 var(--ojas-space-md); padding: 0; border: 0; font-family: var(--ojas-font-display); font-size: var(--ojas-size-h3); line-height: 1.2; color: var(--ojas-heading); } .ojas-testimonial__name { display: block; font-size: var(--ojas-size-ui); font-weight: var(--ojas-weight-semibold); color: var(--ojas-ink); } .ojas-testimonial__role { display: block; margin-top: var(--ojas-space-2xs); font-size: var(--ojas-size-meta); letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-muted); } .ojas-section--dark .ojas-testimonial__quote { color: var(--ojas-white); } .ojas-section--dark .ojas-testimonial__name { color: var(--ojas-white); } .ojas-section--dark .ojas-testimonial__role { color: var(--ojas-muted-on-dark); } /* * --ojas-muted-on-dark is off-white at 72%. Against the footer's deep green it * composites to 5.53:1 and is fine; against this section's Amazon it is * **3.72:1** — under AA for 16px text, and it has been that way on every dark * section, independently of the leaf pattern. Exactly the same alpha trap as * the drawer sub-menu further up this file, and found the same way: the flat * colour looks like 5.61:1 until you composite the alpha. * * 0.92 clears 4.5:1 here with the pattern's veil in place and still reads as * secondary next to the headings. The token is left alone; it is correct * against the darker grounds it was set for. */ .ojas-section--dark :is(.ojas-card__excerpt, .ojas-feature__text, .ojas-testimonial__role), .ojas-section--dark .ojas-review--feature .ojas-review__meta { color: rgba(248, 247, 246, 0.92); } /* ---------- Menu / price list -------------------------------------------------- */ /* * Capped rather than full-bleed: on a term archive the list sits in the wide * container, and a one-line dish description stretched to 1100px is a stripe, * not a sentence. Inside the narrow container this changes nothing. */ .ojas-menu-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; } .ojas-menu-item { display: grid; grid-template-columns: 1fr auto; gap: var(--ojas-space-2xs) var(--ojas-space-md); padding-block: var(--ojas-space-md); border-bottom: 1px solid var(--ojas-border); margin: 0; } .ojas-menu-item__name { margin: 0; color: var(--ojas-heading); } /* type comes from the shared card-title rule */ .ojas-menu-item__price { font-weight: var(--ojas-weight-semibold); color: var(--ojas-amazon); white-space: nowrap; align-self: start; } .ojas-menu-item__desc { grid-column: 1 / -1; margin: 0; color: var(--ojas-muted); } .ojas-menu-item__diet { grid-column: 1 / -1; margin: var(--ojas-space-2xs) 0 0; } /* * Dish rows carry the photo cutouts from the current site. Every dish gets one * -- a placeholder stands in where there is no photograph -- so the column is * always the same width and the list of names stays on one straight edge. */ .ojas-dish { grid-template-columns: clamp(88px, 13vw, 136px) minmax(0, 1fr) auto; /* Named explicitly so the photo's "1 / -1" has a last line to reach: in an implicit grid -1 resolves back to line 1 and the photo sits in the name's row, stretching it. Rows a dish does not use collapse to zero. */ grid-template-rows: auto auto auto; align-items: start; } .ojas-dish .ojas-menu-item__desc, .ojas-dish .ojas-menu-item__diet { grid-column: 2 / -1; } /* * A square box for every dish, because the menu mixes two kinds of image: the * bowl and bottle cutouts are transparent PNGs that should float on the card, * the wraps, smoothies and juices are photographs with their own backgrounds * that should fill a neat thumbnail. Same box, different fit — so the rows stay * the same height either way. */ /* * The bowls are cut-out PNGs on nothing — a circle of food with no background. * Flat on a white card they read as stickers, so they get a shadow that follows * the silhouette rather than a box: drop-shadow uses the alpha channel, so the * shade falls under the rim of the plate and the plate lifts off the card. * Two shadows, not one — a tight contact shade and a wide soft one, which is * what actually happens under a real object and what a single blur cannot fake. * The size is a variable because the same plate appears at 72px in a menu row * and at 460px on its own page, and one shadow cannot serve both. */ .ojas-dish__media { grid-column: 1; grid-row: 1 / -1; align-self: center; aspect-ratio: 1; --ojas-plate-shadow: drop-shadow(0 6px 7px rgba(26, 45, 32, 0.20)) drop-shadow(0 1px 2px rgba(26, 45, 32, 0.12)); } .ojas-dish__media img { display: block; width: 100%; height: 100%; object-fit: contain; /* * A third of each cut-out's width is empty, so `contain` alone leaves the * plate at 71% of its slot while a framed photograph beside it fills the * whole square. Scaled up they match, and what gets cropped is the * transparent margin, never the food. */ transform: scale(1.22); filter: var(--ojas-plate-shadow); transition: transform 0.5s var(--ojas-ease-entrance), filter 0.5s var(--ojas-ease-entrance); } /* A framed photograph is a rectangle in a rectangle; it needs no silhouette. */ /* * A photograph of a dish is a circle — a plate, the way the cut-outs beside it * already read. A PNG cut-out keeps its transparency and is not clipped: it is * the food on its plate already, and a circle would cut the rim. */ .ojas-dish__media--photo img { object-fit: cover; border-radius: 50%; filter: none; transform: none; } /* Dimmed, so an unreplaced placeholder reads as pending; and it is a drawing, not a plate, so it takes neither the silhouette shadow nor the upscale. */ .ojas-dish__media--empty img { opacity: 0.7; filter: none; transform: none; } @media (max-width: 560px) { /* Too narrow for name and price side by side once the photo takes a column. */ .ojas-dish { grid-template-columns: 72px minmax(0, 1fr); } .ojas-dish .ojas-menu-item__price { grid-column: 2; justify-self: start; } } /* Chapter numbering, as on the catering menu */ .ojas-chapter { margin-bottom: var(--ojas-space-2xl); } .ojas-chapter__label { display: block; margin-bottom: var(--ojas-space-xs); font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-eyebrow); } /* ---------- Location card details ---------------------------------------------- */ .ojas-details { display: grid; gap: var(--ojas-space-sm); margin: 0; } /* * The label carries a small icon so the block can be scanned rather than read — * on the find-us and contact pages people are looking for one of three things * and the eye should land on it without parsing three uppercase labels. The * icon inherits the label's own eyebrow colour, so it never competes with it. */ .ojas-details dt { display: flex; align-items: center; gap: 7px; font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-eyebrow); } .ojas-details dt .ojas-icon { flex: 0 0 auto; } .ojas-details dd { margin: 2px 0 0; } /* ---------- Forms ------------------------------------------------------------------ */ .ojas-field { display: block; margin-bottom: var(--ojas-space-md); } .ojas-label { display: block; margin-bottom: var(--ojas-space-xs); font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-ink); } .ojas-input, .ojas-select, .ojas-textarea, input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="date"], input[type="number"], input[type="search"], input[type="password"], select, textarea { width: 100%; padding: 13px var(--ojas-space-md); background: var(--ojas-white); border: 1.5px solid var(--ojas-border); border-radius: var(--ojas-radius-sm); font-family: var(--ojas-font-body); font-size: var(--ojas-size-body); color: var(--ojas-ink); transition: border-color var(--ojas-transition); } :is(input, select, textarea):focus-visible { border-color: var(--ojas-amazon); outline-offset: 0; } textarea { min-height: 140px; resize: vertical; } ::placeholder { color: var(--ojas-muted); opacity: 0.8; } .ojas-form-note { font-size: var(--ojas-size-meta); color: var(--ojas-muted); } .ojas-form__row { display: grid; gap: var(--ojas-space-md); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); } .ojas-hp { position: absolute; left: -9999px; opacity: 0; } .ojas-alert { padding: var(--ojas-space-md); margin-bottom: var(--ojas-space-md); border-radius: var(--ojas-radius-sm); border-left: 3px solid; } .ojas-alert--ok { background: var(--ojas-vanilla); border-color: var(--ojas-amazon); } .ojas-alert--error { background: var(--ojas-error-bg); border-color: var(--ojas-orange-deep); color: var(--ojas-error-text); } /* ---------- Footer ------------------------------------------------------------------ */ .ojas-footer { padding-block: var(--ojas-section-y) var(--ojas-float-clear); background: var(--ojas-bg-footer); color: var(--ojas-text-on-dark); } .ojas-footer :is(h1, h2, h3, h4, h5, h6) { color: var(--ojas-white); } .ojas-footer a { color: var(--ojas-text-on-dark); text-decoration: none; } .ojas-footer a:hover { color: var(--ojas-jasmine); } /* * The brand block gets a wider track than the link columns; auto-fit on equal * tracks gave the address the same width as a four-word column and wrapped it * to five lines. */ .ojas-footer__grid { display: grid; gap: var(--ojas-space-xl) var(--ojas-space-lg); grid-template-columns: minmax(240px, 1.4fr) repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--ojas-space-2xl); } @media (max-width: 900px) { .ojas-footer__grid { grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr)); } .ojas-footer__brand { grid-column: 1 / -1; max-width: none; } } /* * Phones only. 160px plus a 32px gutter needs 352px of track and a 375px phone * has 335, so auto-fit fell to one column and stacked all five link lists: * 2191px of footer, 2.7 phone screens. Twenty pixels narrower and a tighter * gutter fit two columns, which is 340px shorter. The threshold stays below the * tablet range, where 160px still buys three unwrapped columns and four narrow * ones would be worse. The long speciality labels wrap to two lines here; they * keep their full wording, because the anchor text is the point of them. */ @media (max-width: 560px) { /* * One column, and the columns collapse. * * Two 158px columns put every "What we cater" link onto two or three lines * and left holes beside the short lists — 1,527px of ragged footer, twice the * height of the screen. Full width, each link fits on one line; collapsed, * the whole thing is a short list of section names you can open. */ /* * 64px of grid margin plus the bottom bar's 32px was proportionate when the * columns were tall. Collapsed, the whole footer is 919px and that 96px gap * before the copyright line reads as a hole. Half of it is plenty here. */ .ojas-footer__grid { grid-template-columns: 1fr; row-gap: 0; margin-bottom: var(--ojas-space-lg); } .ojas-footer__col { border-top: 1px solid var(--ojas-glass-border); } .ojas-footer__brand { padding-bottom: var(--ojas-space-lg); } /* The summary is the control now: a full-width row with a chevron. */ .ojas-footer__summary { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--ojas-space-md); padding-block: var(--ojas-space-md); min-height: 48px; -webkit-tap-highlight-color: transparent; } .ojas-footer__summary .ojas-footer__title { margin-bottom: 0; } .ojas-footer__summary::after { content: ""; flex: none; width: 9px; height: 9px; border-right: 2px solid var(--ojas-jasmine); border-bottom: 2px solid var(--ojas-jasmine); transform: rotate(45deg) translate(-2px, -2px); transition: transform var(--ojas-ease-quick, 180ms ease); } .ojas-footer__group[open] > .ojas-footer__summary::after { transform: rotate(-135deg) translate(-3px, -3px); } .ojas-footer__summary:focus-visible { outline: 2px solid var(--ojas-lemon); outline-offset: 2px; } .ojas-footer__group > ul { padding-bottom: var(--ojas-space-md); } .ojas-footer__group > ul li { margin-bottom: 0; } /* 44px rows: the links are the tap targets once a section is open. */ .ojas-footer__group > ul a { display: block; padding-block: 10px; } /* Two groups stacked in one cell need a rule between them too. */ .ojas-footer__group + .ojas-footer__group { border-top: 1px solid var(--ojas-glass-border); } } @media (max-width: 560px) and (prefers-reduced-motion: reduce) { .ojas-footer__summary::after { transition: none; } } /* * There was a `.ojas-footer__brand img { height: 48px; ... }` here, left from * when the footer carried a plain logo image. The only img in that block is now * the lockup mark, and at 0,1,1 this rule outranked `.ojas-lockup__mark` at * 0,1,0 — so the footer lockup rendered at 48px while its own * `--ojas-lockup-h: 56px` sat there doing nothing, and a stray margin-bottom * fought the lockup's 3px gap. Same shape as the other container-beats- * component leaks in this file. Deleted rather than patched: nothing else in * the block is an image. */ .ojas-footer__title { font-family: var(--ojas-font-body); font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-vanilla); margin-bottom: var(--ojas-space-md); } /* -------------------------------------------------------------------------- Footer groups A
per column, printed open. On a wide screen it is not a control at all: the marker is gone, the summary cannot be clicked, and the column reads exactly as it did before. Below 560px it becomes the thing that makes the footer usable on a phone. -------------------------------------------------------------------------- */ .ojas-footer__group > summary { list-style: none; } .ojas-footer__group > summary::-webkit-details-marker { display: none; } .ojas-footer__summary { cursor: default; pointer-events: none; } .ojas-footer__summary .ojas-footer__title { margin-bottom: var(--ojas-space-md); } .ojas-footer ul { list-style: none; margin: 0; padding: 0; } .ojas-footer li { margin-bottom: var(--ojas-space-xs); } .ojas-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ojas-space-md); padding-top: var(--ojas-space-lg); border-top: 1px solid var(--ojas-glass-border); font-size: var(--ojas-size-meta); color: var(--ojas-muted-on-dark); } /* The questions block under "What is included" on a service page. */ .ojas-service__asks-title { margin-top: var(--ojas-space-lg); } .ojas-service__asks { list-style: none; margin: var(--ojas-space-xs) 0 0; padding: 0; display: grid; gap: 6px; color: var(--ojas-muted); } .ojas-service__asks li { position: relative; padding-left: var(--ojas-space-md); } .ojas-service__asks li::before { content: "?"; position: absolute; left: 0; font-weight: var(--ojas-weight-semibold); color: var(--ojas-amazon); } /* -------------------------------------------------------------------------- The explore signpost Two columns where there is room, the button holding the right edge; stacked below that, with the button first to the eye rather than last. -------------------------------------------------------------------------- */ .ojas-explore-cta { display: grid; gap: var(--ojas-space-lg) var(--ojas-space-2xl); grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .ojas-explore-cta__title { font-size: var(--ojas-size-h2); color: var(--ojas-heading); margin: 0 0 var(--ojas-space-sm); } .ojas-explore-cta__text { margin: 0; max-width: 60ch; } .ojas-explore-cta__facets { list-style: none; margin: var(--ojas-space-md) 0 0; padding: 0; display: grid; gap: 4px; font-size: var(--ojas-size-ui); color: var(--ojas-ink); } .ojas-explore-cta__do { justify-self: end; } @media (max-width: 860px) { .ojas-explore-cta { grid-template-columns: minmax(0, 1fr); } .ojas-explore-cta__do { justify-self: start; } } /* On the Jasmine ground the heading is ink like everything else, not Amazon. */ .ojas-section--accent .ojas-explore-cta__title { color: var(--ojas-ink); } /* ---------- Pagination / filters ------------------------------------------------------ */ /* * paginate_links( 'type' => 'list' ) returns