/* ========================================================================== Ojas — base: resets, elements, typography, layout primitives ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } /* Components that set their own display (buttons, cards) would otherwise ignore the hidden attribute, which several scripts toggle. */ [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* * Every anchor target clears the sticky header. This is the native path — * reduced motion, touch, no JavaScript; motion.js measures the real chrome * (header plus any bar pinned under it) for the smooth-scrolled one. */ scroll-padding-top: calc(var(--ojas-header-h) + 16px); /* * The mobile nav is position:fixed and parks off-canvas at translateX(100%). * Fixed descendants escape `overflow-x: hidden` on body, so the closed drawer * still adds ~23px of sideways scroll. `clip` does contain it, and unlike * `overflow: hidden` it does not turn this element into a scroll container, * so position: sticky keeps working. */ overflow-x: clip; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ojas-bg); color: var(--ojas-text); font-family: var(--ojas-font-body); font-size: var(--ojas-size-body); font-weight: var(--ojas-weight-body); line-height: var(--ojas-lh-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* * `hidden` here would make the containing scroll box for every * position: sticky descendant, silently breaking the pinned sections. * `clip` contains sideways overflow without doing that (html does the same). */ overflow-x: clip; } /* ---------- Headings ------------------------------------------------------- Quitos, sentence case, set close. The guideline never uppercases the display face; hierarchy comes from size and the Amazon/ink colour split. */ h1, h2, h3, h4, .ojas-h1, .ojas-h2, .ojas-h3, .ojas-h4 { margin: 0 0 var(--ojas-space-md); font-family: var(--ojas-font-display); font-weight: var(--ojas-weight-display); letter-spacing: var(--ojas-track-display); color: var(--ojas-heading); text-wrap: balance; /* Display type reaches 88px, so one long word can outgrow a 375px screen. */ overflow-wrap: break-word; } h1, .ojas-h1 { font-size: var(--ojas-size-h1); line-height: var(--ojas-lh-display); } h2, .ojas-h2 { font-size: var(--ojas-size-h2); line-height: var(--ojas-lh-display); } h3, .ojas-h3 { font-size: var(--ojas-size-h3); line-height: 1.12; } h4, .ojas-h4 { font-size: var(--ojas-size-h4); line-height: var(--ojas-lh-heading); } h5, h6, .ojas-h5, .ojas-h6 { margin: 0 0 var(--ojas-space-sm); font-family: var(--ojas-font-body); font-weight: var(--ojas-weight-semibold); line-height: var(--ojas-lh-heading); color: var(--ojas-ink); } h5, .ojas-h5 { font-size: var(--ojas-size-h5); } h6, .ojas-h6 { font-size: var(--ojas-size-h6); } /* A Jasmine word inside an Amazon headline, as on guideline page 2. */ .ojas-hl { color: var(--ojas-jasmine); } .ojas-section--dark .ojas-hl { color: var(--ojas-jasmine); } p { margin: 0 0 var(--ojas-space-md); } p:last-child { margin-bottom: 0; } .ojas-lead { font-size: var(--ojas-size-lead); line-height: 1.6; } /* ---------- Links ---------------------------------------------------------- */ a { color: var(--ojas-link); text-decoration-thickness: 1px; text-underline-offset: 0.25em; transition: color var(--ojas-transition) var(--ojas-ease); } a:hover { color: var(--ojas-jasmine-text); } /* Visible focus everywhere. The source theme had no consistent focus style. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ojas-focus); outline-offset: 3px; border-radius: var(--ojas-space-2xs); } .ojas-section--dark :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .ojas-footer :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline-color: var(--ojas-lemon); } /* ---------- Media ---------------------------------------------------------- */ img, svg, video, canvas, iframe { max-width: 100%; height: auto; display: block; } figure { margin: 0 0 var(--ojas-space-md); } figcaption { margin-top: var(--ojas-space-xs); font-size: var(--ojas-size-ui); color: var(--ojas-muted); } /* ---------- Lists, quotes, rules, code ------------------------------------- */ ul, ol { margin: 0 0 var(--ojas-space-md); padding-left: 1.25em; } li { margin-bottom: var(--ojas-space-2xs); } blockquote { margin: var(--ojas-space-xl) 0; padding-left: var(--ojas-space-lg); border-left: 3px solid var(--ojas-jasmine); font-family: var(--ojas-font-display); font-size: var(--ojas-size-h4); font-weight: var(--ojas-weight-display); line-height: var(--ojas-lh-heading); color: var(--ojas-heading); } blockquote cite { display: block; margin-top: var(--ojas-space-sm); font-family: var(--ojas-font-body); font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); font-style: normal; letter-spacing: var(--ojas-track-label); text-transform: uppercase; color: var(--ojas-eyebrow); } hr { height: 0; margin: var(--ojas-space-xl) 0; border: 0; border-top: 1px solid var(--ojas-border); } code, pre, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; } pre { overflow-x: auto; padding: var(--ojas-space-md); background: var(--ojas-bg-alt); border-radius: var(--ojas-radius-sm); } /* ---------- Tables --------------------------------------------------------- */ .ojas-table-wrap { overflow-x: auto; margin-bottom: var(--ojas-space-md); } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--ojas-space-sm) var(--ojas-space-md); border-bottom: 1px solid var(--ojas-border); text-align: left; } th { 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); } /* ========================================================================== Layout primitives ========================================================================== */ .ojas-container { width: 100%; max-width: var(--ojas-container); margin-inline: auto; padding-inline: var(--ojas-gutter); } .ojas-container--narrow { max-width: var(--ojas-container-narrow); } .ojas-section { padding-block: var(--ojas-section-y); } .ojas-section--large { padding-block: var(--ojas-section-y-large); } /* * One vertical rhythm for the whole site, with a single deliberate exception: * the first section after a page header sits closer to it, because the header's * own bottom padding is already there. Pages used to mix the two scales * arbitrarily — 97px here, 134px there — which reads as carelessness rather * than as a decision. */ .ojas-page-header + .ojas-section { padding-top: var(--ojas-section-y); } .ojas-section--flush-top { padding-top: 0; } .ojas-section--flush-bottom { padding-bottom: 0; } .ojas-section--band { background: var(--ojas-bg-alt); } .ojas-section--dark { background: var(--ojas-bg-inverse); color: var(--ojas-text-on-dark); } .ojas-section--dark :is(h1, h2, h3, h4, h5, h6) { color: var(--ojas-white); } /* * Prose links only. A button carries its own ground and its own contrast: the * accent button is ink on Orange Slice at 4.56:1, and this rule was repainting * it vanilla on that same orange — 2.63:1, under AA, on the "Request a quote" * button across ten pages. Buttons opt out; components that want a different * treatment on this ground already say so by class further down. */ .ojas-section--dark a:not(.ojas-btn) { color: var(--ojas-vanilla); } .ojas-section--dark a:not(.ojas-btn):hover { color: var(--ojas-white); } .ojas-section--accent { /* Jasmine ground: ink text only (7.4:1) */ background: var(--ojas-bg-accent); color: var(--ojas-ink); } .ojas-section--accent :is(h1, h2, h3, h4, h5, h6) { color: var(--ojas-ink); } .ojas-grid { display: grid; gap: var(--ojas-grid-gap); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } /* * The second value is a cap, not 1fr. With 1fr an auto-fit grid stretches * whatever is in the last row across the full measure — so a single location * card, or the third of three packages, became twice its design width and * dragged its 4:3 photograph up to match: 960px tall for one address. * Capping the track and centring the row keeps a lone card the size it was * drawn at. */ .ojas-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 560px)); justify-content: center; } .ojas-grid--fixed-3 { grid-template-columns: repeat(3, 1fr); } .ojas-grid--fixed-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 1024px) { .ojas-grid--fixed-4 { grid-template-columns: repeat(2, 1fr); } .ojas-grid--fixed-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .ojas-grid--fixed-4, .ojas-grid--fixed-3 { grid-template-columns: 1fr; } } .ojas-stack > * + * { margin-top: var(--ojas-space-md); } .ojas-cluster { display: flex; flex-wrap: wrap; gap: var(--ojas-space-sm) var(--ojas-space-md); align-items: center; } /* ---------- Utilities ------------------------------------------------------ */ .ojas-center { text-align: center; } .ojas-center .ojas-eyebrow { justify-content: center; } .ojas-measure { max-width: 62ch; } .ojas-center .ojas-measure { margin-inline: auto; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .screen-reader-text:focus { position: fixed !important; top: var(--ojas-space-md); left: var(--ojas-space-md); z-index: var(--ojas-z-skip); width: auto; height: auto; padding: var(--ojas-space-sm) var(--ojas-space-md); clip-path: none; background: var(--ojas-amazon); color: var(--ojas-white); border-radius: var(--ojas-radius-pill); font-size: var(--ojas-size-meta); font-weight: var(--ojas-weight-semibold); letter-spacing: var(--ojas-track-label); text-transform: uppercase; text-decoration: none; } /* ---------- Scroll reveal -------------------------------------------------- A light IntersectionObserver reveal, no scroll-pinning library. Elements start hidden only when JS is present (the .ojas-js class), so content is never trapped invisible if the script fails. */ .ojas-js .ojas-reveal { opacity: 0; /* * A small lift and a barely-perceptible scale rather than a slide. The scale * is what makes it read as the element arriving rather than sliding in from * somewhere off-screen — at 0.985 it is below the threshold of being noticed * as a scale, and above the threshold of being felt. */ transform: translate3d(0, 24px, 0) scale(0.985); transition: opacity var(--ojas-reveal-duration) var(--ojas-ease-entrance), transform var(--ojas-reveal-duration) var(--ojas-ease-entrance); will-change: opacity, transform; } .ojas-js .ojas-reveal.is-visible { opacity: 1; transform: none; /* Nothing more is animating; stop asking the compositor for a layer. */ will-change: auto; } @media (prefers-reduced-motion: reduce) { .ojas-js .ojas-reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- WordPress core alignment classes ------------------------------- */ .alignleft { float: left; margin: 0 var(--ojas-space-lg) var(--ojas-space-md) 0; } .alignright { float: right; margin: 0 0 var(--ojas-space-md) var(--ojas-space-lg); } .aligncenter { display: block; margin-inline: auto; } .alignwide, .alignfull { margin-inline: auto; } .alignfull { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); } @media (max-width: 767px) { .alignleft, .alignright { float: none; margin: 0 0 var(--ojas-space-md); } } .wp-caption { max-width: 100%; } .sticky .ojas-card__title::before { content: "★ "; color: var(--ojas-jasmine-text); }