/** * Ratlam's Heritage — custom styles * * Single source of truth for all custom CSS on this site. * * Why here and not elsewhere: * - Elementor Free has no per-widget/section Custom CSS panel. * - Elementor Free has no WooCommerce Builder, so shop/product/cart/checkout * can only be restyled from this file (or via template overrides). * - Customizer "Additional CSS" lives in the database and does NOT deploy * with the theme files, so it is not usable as the primary home. * * The Header rules below were migrated out of Customizer → Additional CSS * (custom_css post ID 9) on 2026-08-17. Rule order is preserved exactly as it * was there, because several rules rely on source order to resolve. Do not * reorder or merge them without checking the header on: home, an inner page, * the blog, and the shop. * * Keep sections in the order below. Add new sections rather than appending * loose rules at the bottom. */ /* ========================================================================== Global / variables ========================================================================== * Palette is anchored to the physical packaging (dark brown + gold), so the * site and the pouch stay in the same family. * * The one cool value, --rh-seal, is lifted from the green veg mark printed on * the pack. Everything else is warm; without a cool anchor nothing has anything * to push against. It carries verification meaning only — GI seal, in stock, * pincode serviceable — never decoration. * * --rh-ghee is a LINE colour. Gold is used for rules, seals and underscores, * never as a full-section background wash; that is what made the previous * design read as undifferentiated. */ :root { --rh-ink: #2a1810; /* pouch brown, near-black — primary dark surface */ --rh-sev: #c9761b; /* the colour of fried sev — accents, active states */ --rh-ghee: #e8b23a; /* gold — rules and seals only */ --rh-paper: #f4ede0; /* warm off-white reading surface */ --rh-laung: #6b3410; /* clove brown — secondary text */ --rh-seal: #1e5b4f; /* verification green, from the pack's veg mark */ --rh-rule: rgba(42, 24, 16, 0.14); --rh-sunk: rgba(42, 24, 16, 0.05); --rh-display: "Fraunces", Georgia, "Times New Roman", serif; --rh-body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --rh-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --rh-deva: "Halant", "Noto Sans Devanagari", serif; --rh-gap: clamp(1.5rem, 4vw, 3.5rem); /* Announcement bar height. Referenced by the sticky-header offset, which has to * match it exactly — see the Sticky header block. */ --rh-bar-h: 2.25rem; /* The content measure the design is drawn to. Astra's own container width is * set in the Customizer and so lives in the database; this keeps the sections * built in this file aligned to each other regardless of that setting. * * Raised from the mockup's 1200px: the comp was drawn at a 1600px preview, and * on a real 1920px display 1200px left the page looking inset and the cart's * summary column too narrow for live courier labels. */ --rh-measure: 1320px; /* A semicircular arch on short piers — the arcade from the wordmark. * Used on product images and on the forthcoming placeholder. */ --rh-arch: 50% 50% 6px 6px / 38% 38% 6px 6px; /* Paper grain. Heritage reads as texture and impression, not as gradient — * this replaces the gold washes with something closer to printed stock. */ --rh-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E"); } /* ========================================================================== Page surface ========================================================================== * Two lines that fix one reported symptom: a band of a *different* cream sitting * between the header and the breadcrumb on /shop/. * * What was happening: Astra sets `#primary { margin: 4em 0 }`, and `#content` — * the element that carries the paper background — has no padding or border of its * own, so that 58px top margin **collapsed straight out of it** and pushed the * whole paper block down the page. The strip it left behind was showing `body`, * which the Customizer had set to #fef9e1, a yellower cream than --rh-paper. * * `display: flow-root` establishes a block formatting context, which is what stops * a child's margin escaping. The 58px of air is unchanged — it is simply inside * the paper now instead of above it. The body colour is corrected as well, so the * overscroll area and any future gap match rather than announcing themselves. */ /* `!important` because Elementor writes a per-page background into its own * stylesheet — `body.elementor-page-15:not(…)` at specificity (0,3,1), from a * setting that lives in the database. /about/ and /contact/ therefore came out * white while /shop/ took the paper. Those two pages already discard Elementor's * layout (see astra_child_plain_content()); its leftover page background is part * of what is being discarded. */ body { background-color: var(--rh-paper) !important; } .site-content { display: flow-root; } /* ========================================================================== Header ========================================================================== */ /* --- Primary navigation colours ------------------------------------------ * REMOVED 2026-08-17. Seven rules migrated from Customizer → Additional CSS * previously lived here, keyed on body:not(.woocommerce-page), body.home, * body.blog and body:not(.home), each with !important. They overlapped by * design ("partly superseded by" was in the original comment), hardcoded * #ffffff / #1a1a1a / #f0a500 — none of which is in the palette — and could * only be reasoned about by reading all seven together. * * They are replaced by the .rh-header--ink / .rh-header--paper pair further * down, which turns the whole thing into one axis: which surface the header sits * on. See inc/header.php for where that class is set. * * Kept in the git-less deployment record on purpose — if the nav colour looks * wrong on the blog archive specifically, that is the case the old * body.blog rule handled and the variant class now has to cover. * -------------------------------------------------------------------------- */ /* --- Full-width header HTML block ---------------------------------------- */ /* Full-width announcement slot. * * This previously used `width: 100vw` with `margin-left: calc(-50vw + 50%)` to * break out of the site container. That was never needed — * .site-header-above-section-center is already the full viewport width — and * 100vw includes the scrollbar, so the bar sat 8px left of the viewport and * bled off the right edge. Plain 100% is exact. * * The children also need to be told to fill: .ast-builder-layout-element is a * flex container, so its block children shrink-to-fit their content (which left * the bar 974px wide inside a full-width slot). `min-width: 0` keeps them * shrinkable too — without it a flex item refuses to go below its content width * and inflates the header, which is what put the whole page into horizontal * overflow back when this slot held a `width: max-content` marquee. */ .ast-header-html-1 { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; padding: 0 !important; } .ast-header-html-1, .ast-header-html-1 .ast-builder-html-element, .ast-header-html-1 .ast-header-html { min-width: 0; max-width: 100%; } .ast-header-html-1 .ast-builder-html-element, .ast-header-html-1 .ast-header-html { flex: 1 1 auto; width: 100%; } /* Astra's above-header wrap has a Customizer-set height (50px here) and is a * CSS grid whose auto-sized track is centred, so the 34px bar sat with an 8px * cream sliver above and below — which reads as a mistake on a dark full-bleed * bar. Rather than fight the grid's alignment (and re-break it whenever that * Customizer height changes), the wrap carries the same ink: leftover row space * is then indistinguishable from the bar. */ .ast-above-header-wrap, .ast-above-header-bar { background-color: var(--rh-ink) !important; background-image: none !important; } .ast-above-header-bar { padding: 0 !important; } /* min-height is the real fix for the sliver described above. * * .site-above-header-wrap is a grid carrying Astra's Customizer "height" setting * — 50px here — while the bar inside it is 36px. That mismatch left 14px of dead * row, which the ink background above only *hid*. Zeroing it makes the strip as * tall as its content and takes 14px off every page's header, which is 14px of * viewport back above the fold. The ink on the wrap stays as belt-and-braces in * case that Customizer value changes again. */ .site-above-header-wrap { padding: 0 !important; min-height: 0 !important; max-width: 100% !important; } /* --- Sticky header ------------------------------------------------------- * Astra's own sticky header is a Pro addon; the free theme ships the * .ast-header-sticked classes but none of the behaviour. Six lines of position: * sticky is the whole feature, so it is implemented here rather than treated as a * missing capability. * * The announcement bar is deliberately NOT sticky. It carries a one-time message * — read once, then it is spent — whereas the nav and the cart total are * persistent utility. Pinning both would cost 100px of every screen for the sake * of a line someone has already read. * * The sticky element must be #masthead itself, NOT the inner * .ast-main-header-wrap. A sticky box only travels within its parent's padding * box, and the masthead is ~104px tall — so sticking the inner wrap pinned it for * 104px of scroll and then let it leave with the header. Measured navTop: -861 at * scrollTop 900, i.e. no stickiness at all. * * Instead the masthead sticks, offset upward by exactly the announcement bar's * height. The bar is parked just above the viewport once scrolled — spent, out of * the way, and back when you scroll up — while the nav bar lands at y=0. * * That is why --rh-bar-h exists and why .rh-bar's height is pinned to it rather * than left to its content: the offset and the bar have to agree exactly, or the * nav bar sits a few pixels off the top edge. * * One selector covers desktop and mobile — Astra renders both variants inside * this masthead. * * z-index 99 sits above page content but below Astra's mobile off-canvas menu * (1000+), so an open menu is not trapped behind the header. * ------------------------------------------------------------------------- */ #masthead { position: sticky; top: calc(-1 * var(--rh-bar-h)); z-index: 99; } /* Shrink slightly once pinned, and cast a shadow. * * The shadow is what tells you the bar is floating over content rather than * sitting in the page; without it an opaque header reads as a hard crop. The logo * also gives back a few pixels. .rh-stuck is set by assets/js/header.js. */ .rh-stuck #masthead { box-shadow: 0 6px 24px rgba(42, 24, 16, 0.28); } .rh-stuck .ast-primary-header-bar .site-primary-header-wrap { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; } .rh-stuck .ast-primary-header-bar .custom-logo { height: clamp(2.2rem, 3.4vw, 2.9rem); } /* Only the shrink animates. The shadow is instant so the pin reads as immediate, * while the logo easing keeps it from snapping. */ .ast-primary-header-bar .custom-logo, .ast-primary-header-bar .site-primary-header-wrap { transition: height 0.22s ease, padding 0.22s ease; } @media (prefers-reduced-motion: reduce) { .ast-primary-header-bar .custom-logo, .ast-primary-header-bar .site-primary-header-wrap { transition: none; } } /* --- Announcement bar ---------------------------------------------------- * Markup comes from inc/announcement-bar.php, injected into Astra's HTML-1 * slot — see that file for why it is not stored in the Customizer. * * Static on desktop. The previous marquee moved constantly while carrying the * least urgent information on the page, and none of the comparable brands * scrolls theirs. Below 768px the four messages cannot share a line, so they * crossfade instead — a calmer device than scrolling, and one that degrades to * a single static message under prefers-reduced-motion. * * The old navy #1a1a2e was the only cold value in an otherwise warm palette; * this uses --rh-ink so the bar belongs to the same system as everything else. * -------------------------------------------------------------------------- */ .rh-bar { display: flex; align-items: center; justify-content: center; width: 100%; max-width: 100%; min-width: 0; /* Fixed, not min-height: the sticky-header offset is -1 * this value, so any * drift here shows up as the nav bar sitting off the top edge. */ height: var(--rh-bar-h); padding: 0 1.25rem; background-color: var(--rh-ink); overflow: hidden; } /* One message at a time, at every width. * * Four competing lines get skimmed as a texture; a single line gets read. The * items are absolutely stacked so the bar height never changes as messages of * different lengths swap — a rotating bar that reflows would push the whole page * down four times a minute. */ .rh-bar__list { position: relative; display: block; width: 100%; height: 1.4em; margin: 0; padding: 0; list-style: none; } .rh-bar__item { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; margin: 0; font-family: var(--rh-mono); font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; line-height: 1.4; text-transform: uppercase; color: var(--rh-paper); text-align: center; opacity: 0; animation: rh-bar-cycle 18s infinite both; } .rh-bar__item:nth-child(1) { animation-delay: 0s; } .rh-bar__item:nth-child(2) { animation-delay: 4.5s; } .rh-bar__item:nth-child(3) { animation-delay: 9s; } .rh-bar__item:nth-child(4) { animation-delay: 13.5s; } /* Hold on hover or keyboard focus. Auto-advancing content that cannot be * stopped fails WCAG 2.2.2, and on a shop it is simply rude to move the * shipping threshold out from under someone mid-read. */ .rh-bar:hover .rh-bar__item, .rh-bar:focus-within .rh-bar__item { animation-play-state: paused; } /* Four items at 25% of an 18s cycle each, run SEQUENTIALLY: each message is fully * out before the next starts in. * * A true crossfade is wrong here. Overlapping images blend; overlapping text at * 50/50 just reads as a smudge — measured at 0.49 opacity on the outgoing line * for ~0.44s of every cycle when the windows overlapped. Ending the fade-out at * 24% and starting the next at 25% leaves a 0.18s beat: imperceptible as a gap, * and each message is legible for its whole turn. */ @keyframes rh-bar-cycle { 0% { opacity: 0; transform: translateY(0.22em); } 1.5%, 23% { opacity: 1; transform: none; } 24.5%, 100% { opacity: 0; transform: translateY(-0.22em); } } @media (max-width: 767px) { .rh-bar { padding: 0 1rem; } .rh-bar__item { font-size: 0.64rem; letter-spacing: 0.1em; } } /* No motion: hold the first message — the shipping threshold — and drop the * rest rather than cycling them. */ @media (prefers-reduced-motion: reduce) { .rh-bar__item { animation: none; opacity: 0; } .rh-bar__item:first-child { opacity: 1; transform: none; } } /* --- Primary header bar -------------------------------------------------- * Two variants, switched by a body class set in inc/header.php: * * .rh-header--ink front page — the hero below it is a dark full-bleed * section, so a paper header would read as a separate bar * sitting on top of the design instead of part of it. * .rh-header--paper everywhere else, which all open on paper. * * Astra's own transparent-header handling already puts the front-page masthead * over the hero; these rules give it a surface and a border so it stops being * transparent, which is what made the old logo/nav float unanchored. * ------------------------------------------------------------------------- */ .rh-header--ink .ast-primary-header-bar { background-color: var(--rh-ink); border-bottom: 1px solid rgba(232, 178, 58, 0.22); } .rh-header--paper .ast-primary-header-bar { background-color: var(--rh-paper); border-bottom: 1px solid var(--rh-rule); } /* Header height. * * Astra's own padding put the nav bar at 105px, which with the 50px announcement * wrap made a 155px header — on a 1080px-tall laptop that is 14% of the viewport * spent before the page begins, and it is why the header read as one heavy slab * rather than a bar. !important is needed because Astra sets this padding as * inline dynamic CSS from the Customizer. * * Together with the min-height fix above this brings the header to ~108px. */ /* Astra pads BOTH the outer bar and the inner wrap, and they nest — so setting * the same value on both applied it twice (45px of padding around a 49px content * row). The outer is zeroed and the inner carries the whole gap. */ .ast-primary-header-bar.main-header-bar { padding-top: 0 !important; padding-bottom: 0 !important; min-height: 0 !important; } /* Padding is the lever for header height, NOT logo size. * * The first attempt at a shorter header shrank the logo to 44px, which just made * the wordmark small — it is a wide horizontal lockup, so height is the only * thing giving it presence. Trimming the padding instead buys the same vertical * space and lets the logo grow: 56px mark inside a ~72px bar, against the * original 52px mark inside a 105px bar. Bigger logo, shorter header. */ .ast-primary-header-bar .site-primary-header-wrap { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; min-height: 0 !important; } .ast-primary-header-bar .custom-logo { height: clamp(2.75rem, 4.4vw, 4rem); width: auto; max-height: none; } /* --- Primary navigation -------------------------------------------------- * Replaces the seven inherited Customizer rules removed above. * * !important is still needed here: Astra prints its nav colours as dynamic CSS * inline in the document head, which an external stylesheet cannot outrank on * specificity or order. This is the one place in this file where !important is * load-bearing rather than inherited. * ------------------------------------------------------------------------- */ .rh-header--ink #ast-hf-menu-1 > li > .menu-link, .rh-header--ink .ast-nav-menu > li > .menu-link { color: var(--rh-paper) !important; } .rh-header--paper #ast-hf-menu-1 > li > .menu-link, .rh-header--paper .ast-nav-menu > li > .menu-link { color: var(--rh-ink) !important; } .rh-header--ink #ast-hf-menu-1 > li > .menu-link:hover, .rh-header--ink #ast-hf-menu-1 > .current-menu-item > .menu-link, .rh-header--ink #ast-hf-menu-1 > .current_page_item > .menu-link { color: var(--rh-ghee) !important; } .rh-header--paper #ast-hf-menu-1 > li > .menu-link:hover, .rh-header--paper #ast-hf-menu-1 > .current-menu-item > .menu-link, .rh-header--paper #ast-hf-menu-1 > .current_page_item > .menu-link { color: var(--rh-sev) !important; } #ast-hf-menu-1 > li > .menu-link { font-family: var(--rh-body); font-size: 0.9rem; font-weight: 500; letter-spacing: 0.01em; } /* --- Utility link (Track order) ------------------------------------------ * Rendered by inc/header.php into the slot Astra's account menu used to hold. * Mono uppercase, deliberately quieter than the nav: it is a returning-customer * errand, not a browsing destination. * ------------------------------------------------------------------------- */ .rh-utility__link { display: inline-block; padding: 0.5rem 0; font-family: var(--rh-mono); font-size: 0.66rem; letter-spacing: 0.13em; text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color 0.2s ease; } .rh-header--ink .rh-utility__link { color: rgba(244, 237, 224, 0.62); } .rh-header--paper .rh-utility__link { color: var(--rh-laung); } .rh-header--ink .rh-utility__link:hover, .rh-header--ink .rh-utility__link:focus-visible { color: var(--rh-ghee); } .rh-header--paper .rh-utility__link:hover, .rh-header--paper .rh-utility__link:focus-visible { color: var(--rh-sev); } /* --- Cart chip ----------------------------------------------------------- * Astra's cart is a basket glyph plus a count bubble. This makes it a bordered * chip reading "CART ₹340", because the rupee figure is the number that decides * whether the basket has cleared the ₹400 free-shipping threshold — a count * does not. The glyph is hidden rather than removed so Astra's flyout, which * binds to the same anchor, keeps working. * ------------------------------------------------------------------------- */ .ast-header-woo-cart .astra-icon, .ast-header-woo-cart .ast-cart-menu-wrap { display: none !important; } .ast-header-woo-cart .ast-site-header-cart .cart-container { display: inline-flex; flex: none; align-items: center; white-space: nowrap; padding: 0.55rem 1rem; border: 1px solid transparent; border-radius: 4px; text-decoration: none; transition: background-color 0.2s ease, border-color 0.2s ease; } /* nowrap is essential, not cosmetic. Between roughly 950px and 1100px the header's * right cluster gets squeezed and the chip wrapped one character per line — "CART * ₹199" rendered as a vertical column of letters. The chip must never wrap. */ .ast-header-woo-cart .ast-woo-header-cart-info-wrap { display: inline-flex; align-items: baseline; gap: 0.5rem; white-space: nowrap; padding: 0 !important; font-family: var(--rh-mono); font-size: 0.7rem; font-weight: 400 !important; letter-spacing: 0.08em; line-height: 1.2 !important; } .ast-woo-header-cart-title { text-transform: uppercase; } /* WooCommerce wraps the amount in its own spans; the price and the symbol both * need the colour, so target the wrapper and let it inherit. */ .ast-woo-header-cart-total, .ast-woo-header-cart-total .amount, .ast-woo-header-cart-total .woocommerce-Price-currencySymbol { color: inherit; font-family: var(--rh-mono); } /* Ink header: outlined chip, gold label, paper figure. */ .rh-header--ink .ast-header-woo-cart .cart-container { border-color: rgba(232, 178, 58, 0.45); } .rh-header--ink .ast-woo-header-cart-title { color: var(--rh-ghee); } .rh-header--ink .ast-woo-header-cart-total { color: var(--rh-paper); } .rh-header--ink .ast-header-woo-cart .cart-container:hover, .rh-header--ink .ast-header-woo-cart .cart-container:focus-visible { background-color: rgba(232, 178, 58, 0.12); border-color: var(--rh-ghee); } /* Paper header: solid ink chip. Inverted rather than outlined, because on paper * an outlined chip is the same weight as the nav beside it and stops reading as * the one action in the header. */ .rh-header--paper .ast-header-woo-cart .cart-container { background-color: var(--rh-ink); border-color: var(--rh-ink); } .rh-header--paper .ast-woo-header-cart-title { color: var(--rh-ghee); } .rh-header--paper .ast-woo-header-cart-total { color: var(--rh-paper); } .rh-header--paper .ast-header-woo-cart .cart-container:hover, .rh-header--paper .ast-header-woo-cart .cart-container:focus-visible { background-color: var(--rh-sev); border-color: var(--rh-sev); } .rh-header--paper .ast-header-woo-cart .cart-container:hover .ast-woo-header-cart-title { color: var(--rh-paper); } .ast-header-woo-cart .cart-container:focus-visible { outline: 2px solid var(--rh-sev); outline-offset: 2px; } /* Right-hand cluster: the utility link and the cart chip read as one group. * * The cart chip is forced last. Astra emits the components in the order they sit * in `header-desktop-items` (woo-cart, then account — and the Track order link * replaces account), which puts the chip before the link. The chip is the * primary action and belongs at the outside edge, so `order` reverses the pair * without a Customizer change. */ .site-header-primary-section-right { gap: 1rem; flex: none; } /* The nav is what should give way when the header runs out of room, not the cart. */ .ast-primary-header-bar .site-header-primary-section-center { min-width: 0; } .site-header-primary-section-right .ast-header-woo-cart { order: 2; } /* --- Mobile header ------------------------------------------------------- * The mobile menu trigger came through as a solid #f0a500 square — the last of * the old orange, and the loudest thing on the page at 390px. Outlined gold on * ink instead: it is a control, not a call to action. * * Astra prints the trigger's colours as inline dynamic CSS, hence !important — * the same constraint as the nav links. * ------------------------------------------------------------------------- */ .ast-mobile-header-wrap .ast-button-wrap .menu-toggle, .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-fill, .ast-mobile-header-wrap .ast-button-wrap .menu-toggle.ast-mobile-menu-trigger-minimal { display: flex; align-items: center; /* Astra leaves the button at `justify-content: normal`, so the 20px icon sits * hard against the left edge of the 44px tap target and the three bars read as * off-centre inside their gold box. This is the "menu bar not aligned" report. */ justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0; border-radius: 4px !important; background-color: transparent !important; } /* The icon span is a flex item; without this it can still be nudged by Astra's * `svg-baseline` vertical-align. */ .ast-mobile-header-wrap .ast-button-wrap .menu-toggle .mobile-menu-toggle-icon { display: flex; align-items: center; justify-content: center; } /* --- Mobile header: the same ink/paper pair as the desktop one ----------- * * This block used to paint the mobile header ink on EVERY template, with a * comment claiming that was fine because "the dark logo is the one Astra serves". * That sentence was the bug. `astra_child_ink_header_logo()` swaps in the light * logo only when the header is ink, and it decides that from `is_front_page()` — * so on /shop/, /cart/, every article and every policy page, the mobile header * was ink while the logo served was the DARK one. A dark wordmark on a dark brown * bar is invisible, which is exactly what was reported. * * CSS cannot pick a different image, so the surface has to follow the logo rather * than the other way round. The mobile header now honours the same * `.rh-header--ink` / `.rh-header--paper` body class as the desktop header, which * removes the special case entirely: ink plus light logo on the front page, paper * plus dark logo everywhere else. * * The colour goes on the *wrap*, not on `.ast-primary-header-bar`. Astra insets * that bar by its own horizontal padding (measured 339px inside a 375px * viewport), so colouring the bar alone left an 18px sliver down each edge. Same * shape of problem as the above-header wrap further up this file: colour the * container, let the inner padding inset only the content. * ------------------------------------------------------------------------- */ .rh-header--ink .ast-mobile-header-wrap, .rh-header--ink .ast-mobile-header-wrap .ast-main-header-wrap { background-color: var(--rh-ink); } .rh-header--paper .ast-mobile-header-wrap, .rh-header--paper .ast-mobile-header-wrap .ast-main-header-wrap { background-color: var(--rh-paper); } .rh-header--ink .ast-mobile-header-wrap .ast-main-header-wrap { border-bottom: 1px solid rgba(232, 178, 58, 0.22); } .rh-header--paper .ast-mobile-header-wrap .ast-main-header-wrap { border-bottom: 1px solid var(--rh-rule); } .ast-mobile-header-wrap .ast-primary-header-bar, .ast-mobile-header-wrap .ast-below-header-bar { background-color: transparent !important; border-bottom: 0; } /* The trigger follows the surface. Astra prints its colours as inline dynamic * CSS, hence !important — the same constraint as the nav links. */ .rh-header--ink .ast-mobile-header-wrap .ast-button-wrap .menu-toggle { border: 1px solid rgba(232, 178, 58, 0.45) !important; color: var(--rh-ghee) !important; } .rh-header--ink .ast-mobile-header-wrap .ast-button-wrap .menu-toggle .ast-mobile-svg { fill: var(--rh-ghee); } .rh-header--paper .ast-mobile-header-wrap .ast-button-wrap .menu-toggle { border: 1px solid rgba(42, 24, 16, 0.25) !important; color: var(--rh-ink) !important; } .rh-header--paper .ast-mobile-header-wrap .ast-button-wrap .menu-toggle .ast-mobile-svg { fill: var(--rh-ink); } /* --- Mobile logo: let the aspect ratio survive -------------------------- * * Astra emits, at the mobile breakpoint, * `.ast-header-break-point .site-branding img { max-width: 100px; width: 100px }` * — a FIXED width. Against the fixed height this file sets for the desktop bar * that produced a squashed wordmark: the file is 130×74, so 100px wide needs 57px * of height, and it was being forced into 44px. That is the "logo compressed by * the header height" that was reported, and it is a distortion rather than a crop. * * Width is released to `auto` so the height drives, and `object-fit: contain` * guards the ratio in case a future Astra rule pins both dimensions again. */ .ast-header-break-point .site-branding img, .ast-header-break-point .custom-logo-link img, .ast-mobile-header-wrap .custom-logo { width: auto !important; max-width: 60vw !important; /* px, not rem, and deliberately so: Astra's responsive typography sets the * root font-size to 14.592px at this breakpoint, so `2.75rem` was quietly * resolving to 40px rather than the 44px it reads as. Header furniture is one * of the few places where the intended pixel size is the point. */ height: 48px; object-fit: contain; } /* A taller bar than Astra's default. The bar was content-height — 40px, exactly * the logo — so the wordmark's arcade and the "HERITAGE" line under it were both * rendering under 6px tall, legible only if you already knew what it said. 68px * gives the 48px logo 10px of air top and bottom. * * `!important` because Astra's dynamic CSS prints `min-height: 0` for the mobile * bar and wins on specificity. */ .ast-mobile-header-wrap .ast-primary-header-bar { min-height: 68px !important; } /* Logo and trigger on one baseline. With the ratio fixed the bar is only as tall * as its contents, so both items centre rather than the taller one setting the * height and the shorter one floating. */ .ast-mobile-header-wrap .ast-primary-header-bar .site-primary-header-wrap { align-items: center; } /* `margin: 0` is the whole fix for "the logo and the menu button are not on the * same line", and it is worth writing down because it looks like an alignment * problem and is not. * * Astra ships `.site-branding { margin-bottom: 5px }`. In a flex row, alignment * centres the *margin box*, so a 40px logo carrying 5px of bottom margin makes a * 45px line and then sits at the top of it, while the trigger — which has no * margin — centres in the same 45px. The logo ended up 2.5px high. Every * `align-items: center` in the chain was already correct and none of them could * fix it; only removing the margin can. */ .ast-mobile-header-wrap .site-branding, .ast-mobile-header-wrap .ast-site-identity { display: flex; align-items: center; margin: 0; padding: 0; } /* ========================================================================== Footer ========================================================================== * Markup comes from inc/footer.php, which REPLACES Astra's footer builder * output rather than restyling it — see that file for why (short version: * Astra's footer content lives in widgets, and widgets live in the database, so * they would not deploy with the theme). * * Consequence for anyone reading this later: Appearance → Customize → Footer * Builder no longer affects the front end. */ .rh-footer { background-color: var(--rh-ink); background-image: var(--rh-grain); background-repeat: repeat; color: var(--rh-paper); } /* --- Arcade frieze ------------------------------------------------------- * The arcade from the wordmark, run as a repeating band across the top of the * footer. * * One repeating background tile, not the 18–26 inline elements the mockup * drew per instance: it costs nothing in the DOM and fills any width without * counting arches. The gold is baked into the data URI because a URL-encoded SVG * cannot read a CSS custom property — so if --rh-ghee ever changes, this hex has * to be changed with it (%23e8b23a is #e8b23a). * ------------------------------------------------------------------------- */ .rh-frieze { height: 2.5rem; border-bottom: 1px solid rgba(232, 178, 58, 0.28); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2244%22%20height%3D%2240%22%20viewBox%3D%220%200%2044%2040%22%3E%3Cpath%20d%3D%22M4%2040%20L4%2021%20A18%2018%200%200%201%2040%2021%20L40%2040%22%20fill%3D%22none%22%20stroke%3D%22%23e8b23a%22%20stroke-width%3D%221%22%20opacity%3D%220.3%22%2F%3E%3C%2Fsvg%3E"); background-repeat: repeat-x; background-position: center bottom; } .rh-footer__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.1fr); gap: 2.75rem; max-width: var(--rh-measure, 1200px); margin: 0 auto; padding: 3.4rem 2.5rem 2.5rem; } /* `.rh-footer .rh-footer__logo`, not `.rh-footer__logo`, and the extra class is * load-bearing: WooCommerce ships `.woocommerce-page img { height: auto; * max-width: 100% }`, which outranks a single class. On /shop/, /cart/ and every * product page — and nowhere else — the footer wordmark was ignoring its 3.6rem * height and rendering at the full 339px column width, 203px tall. That is the * footer that was reported as "not proper"; the same footer on /about/ looked * correct, which is what made it confusing. */ .rh-footer .rh-footer__logo { display: block; width: auto; height: 3.6rem; max-width: 100%; } .rh-footer__wordmark { margin: 0; font-family: var(--rh-display); font-weight: 600; font-size: 1.4rem; color: var(--rh-paper); } .rh-footer__blurb { max-width: 19rem; margin: 1.15rem 0 0; font-family: var(--rh-body); font-size: 0.9rem; line-height: 1.6; color: rgba(244, 237, 224, 0.55); text-wrap: pretty; } /* The record line — FSSAI and the address. Mono, because this is the pack's * voice: printed fact, not copy. overflow-wrap guards the email on narrow * columns. */ .rh-footer__record { margin: 1rem 0 0; font-family: var(--rh-mono); font-size: 0.62rem; line-height: 1.9; letter-spacing: 0.1em; text-transform: uppercase; overflow-wrap: anywhere; color: rgba(232, 178, 58, 0.72); } .rh-footer__record a { color: inherit; text-decoration: none; } .rh-footer__record a:hover { color: var(--rh-ghee); } .rh-footer__heading { margin: 0 0 1rem; font-family: var(--rh-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rh-ghee); } .rh-footer__links { display: flex; flex-direction: column; gap: 0.7rem; margin: 0; padding: 0; list-style: none; } .rh-footer__links a { font-family: var(--rh-body); font-size: 0.9rem; line-height: 1.4; text-decoration: none; color: rgba(244, 237, 224, 0.7); transition: color 0.2s ease; } .rh-footer__links a:hover, .rh-footer__links a:focus-visible { color: var(--rh-ghee); } .rh-footer__place { margin: 0; font-family: var(--rh-display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--rh-paper); } .rh-footer__social { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem; margin: 1.25rem 0 0; padding: 0; list-style: none; } .rh-footer__social a { display: flex; align-items: center; justify-content: center; min-width: 2.375rem; min-height: 2.375rem; border: 1px solid rgba(232, 178, 58, 0.35); border-radius: 4px; font-family: var(--rh-mono); font-size: 0.72rem; letter-spacing: 0.06em; text-decoration: none; color: var(--rh-ghee); transition: background-color 0.2s ease, border-color 0.2s ease; } .rh-footer__social a:hover, .rh-footer__social a:focus-visible { background-color: rgba(232, 178, 58, 0.14); border-color: var(--rh-ghee); } .rh-footer__social-text a { padding: 0 0.9rem; text-transform: uppercase; } /* --- Base bar ------------------------------------------------------------ */ .rh-footer__base { border-top: 1px solid rgba(232, 178, 58, 0.18); } .rh-footer__base-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; max-width: var(--rh-measure, 1200px); margin: 0 auto; padding: 1.15rem 2.5rem; font-family: var(--rh-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(244, 237, 224, 0.4); } /* --- Footer responsive --------------------------------------------------- */ @media (max-width: 992px) { /* Brand column spans, link columns pair up — four narrow columns turn the * link labels into two-line wraps well before this width. */ .rh-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; } .rh-footer__col--brand { grid-column: 1 / -1; } } @media (max-width: 600px) { /* Two columns, not one. Collapsing all four slots to a single column made the * footer 878px tall on a 390px screen — four headings and eleven links in one * unbroken vertical run, which is what "make it better" was about. The two link * lists are four short items each and sit side by side comfortably at 160px; * the brand block and the origin block span. Same footer, 40% shorter. */ .rh-footer__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; padding: 2.25rem 1.25rem 1.75rem; } .rh-footer__col--brand, .rh-footer__col--origin { grid-column: 1 / -1; } /* The wordmark is a lockup — arcade over Devanagari over "HERITAGE" — so it * needs real height to stay readable. 3.6rem resolves against Astra's 14.592px * mobile root, i.e. 52px, and the arcade closes up. Fixed px, for the same * reason as the header logo. */ .rh-footer .rh-footer__logo { height: 74px; } .rh-footer__blurb { max-width: none; margin-top: 0.9rem; } /* A rule under the brand block, so the two link columns read as a new band * rather than as more of the same list. */ .rh-footer__col--brand { padding-bottom: 1.5rem; border-bottom: 1px solid rgba(232, 178, 58, 0.16); } /* The origin block gets its own rule above it, matching the one under the brand * block, so the footer reads as three bands rather than one long column. * * "Ratlam, / Madhya Pradesh" and the IG / X / Contact row deliberately stay * stacked. Side by side they measure 159px + 164px + a gap against 339px of * column — it fits by four pixels, which is not a layout, it is a coincidence * waiting for a longer place name or a wider system font. */ .rh-footer__col--origin { padding-top: 1.25rem; border-top: 1px solid rgba(232, 178, 58, 0.16); } .rh-footer__social { margin-top: 0.9rem; } .rh-footer__base-inner { padding: 1rem 1.25rem; } .rh-frieze { height: 1.75rem; } } @media (prefers-reduced-motion: reduce) { .rh-footer__links a, .rh-footer__social a, .rh-footer__record a, .rh-utility__link, .ast-header-woo-cart .ast-site-header-cart .cart-container { transition: none; } } /* ========================================================================== Home page — Direction A ========================================================================== * Markup comes from inc/home.php via page-templates/home-a.php. * * The page is a sequence of full-bleed bands that alternate ink and paper, so * every section owns its own background and re-establishes the measure inside * itself (--rh-measure). That is why nothing here sits in Astra's .ast-container: * an inset ink band stops being a band. * * Type sizes use clamp() with the mockup's desktop value as the maximum, so the * design is exact at ~1200px and degrades continuously below it rather than * stepping at breakpoints. */ .rh-home { background-color: var(--rh-paper); } /* --- Shared home primitives ---------------------------------------------- */ .rh-eyebrow { margin: 0 0 0.75rem; font-family: var(--rh-mono); font-size: 0.69rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--rh-sev); } .rh-eyebrow--gold { color: var(--rh-ghee); } .rh-h2 { margin: 0; font-family: var(--rh-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2rem, 4.2vw, 3.125rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--rh-ink); text-wrap: pretty; } .rh-h2--paper { color: var(--rh-paper); } /* Buttons. Gold = the one primary action per band; ghost = the secondary. * Never two golds in one band, which is what made the old orange "Shop Now" * buttons stop meaning anything. */ .rh-btn { display: inline-block; padding: 0.95rem 1.9rem; border: 1px solid transparent; border-radius: 4px; font-family: var(--rh-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; } .rh-btn:hover, .rh-btn:focus-visible { transform: translateY(-1px); } .rh-btn--gold { background-color: var(--rh-ghee); border-color: var(--rh-ghee); color: var(--rh-ink); } .rh-btn--gold:hover, .rh-btn--gold:focus-visible { background-color: var(--rh-sev); border-color: var(--rh-sev); color: var(--rh-paper); } /* --- .rh-btn inside a .woocommerce wrapper ------------------------------- * * WooCommerce ships `.woocommerce button.button` — specificity (0,2,1) — which * outranks `.rh-btn` and `.rh-btn--gold` at (0,1,0). Any theme button rendered * inside a WooCommerce wrapper therefore came out in Astra's global colour * (#e98c00) in Open Sans at 12.7px, regardless of the classes on it. The verify * screen's "Show my order" button carried `rh-btn rh-btn--gold` and rendered * bright orange. * * Third time this exact trap has been hit in this file — see the footer logo and * the article surface. `.woocommerce` + element + class is (0,2,1) and ties; * doubling the class makes it (0,3,1) and settles it. * ------------------------------------------------------------------------- */ .woocommerce button.rh-btn.rh-btn, .woocommerce a.rh-btn.rh-btn, .woocommerce input.rh-btn.rh-btn { padding: 0.95rem 1.9rem; border: 1px solid transparent; border-radius: 4px; font-family: var(--rh-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.03em; line-height: 1.2; text-align: center; text-transform: none; } .woocommerce button.rh-btn.rh-btn--gold, .woocommerce a.rh-btn.rh-btn--gold, .woocommerce input.rh-btn.rh-btn--gold { background-color: var(--rh-ghee); border-color: var(--rh-ghee); color: var(--rh-ink); } .woocommerce button.rh-btn.rh-btn--gold:hover, .woocommerce button.rh-btn.rh-btn--gold:focus-visible, .woocommerce a.rh-btn.rh-btn--gold:hover, .woocommerce a.rh-btn.rh-btn--gold:focus-visible, .woocommerce input.rh-btn.rh-btn--gold:hover, .woocommerce input.rh-btn.rh-btn--gold:focus-visible { background-color: var(--rh-sev); border-color: var(--rh-sev); color: var(--rh-paper); } .woocommerce button.rh-btn.rh-btn--ghost-ink, .woocommerce a.rh-btn.rh-btn--ghost-ink, .woocommerce input.rh-btn.rh-btn--ghost-ink { background-color: transparent; border-color: var(--rh-ink); color: var(--rh-ink); } .woocommerce button.rh-btn.rh-btn--ghost-ink:hover, .woocommerce a.rh-btn.rh-btn--ghost-ink:hover, .woocommerce input.rh-btn.rh-btn--ghost-ink:hover { background-color: var(--rh-ink); color: var(--rh-paper); } .rh-btn--ghost-paper { border-color: rgba(244, 237, 224, 0.3); color: var(--rh-paper); } .rh-btn--ghost-paper:hover, .rh-btn--ghost-paper:focus-visible { border-color: var(--rh-ghee); color: var(--rh-ghee); } .rh-btn--ghost-ink { border-color: var(--rh-ink); color: var(--rh-ink); } .rh-btn--ghost-ink:hover, .rh-btn--ghost-ink:focus-visible { background-color: var(--rh-ink); color: var(--rh-paper); } /* Underlined mono link — the "read more" voice. */ .rh-link { display: inline-block; margin-top: 1.5rem; padding-bottom: 3px; border-bottom: 1px solid var(--rh-rule); font-family: var(--rh-mono); font-size: 0.69rem; letter-spacing: 0.15em; text-transform: uppercase; text-decoration: none; color: var(--rh-laung); transition: color 0.2s ease, border-color 0.2s ease; } .rh-link:hover, .rh-link:focus-visible { color: var(--rh-ink); border-color: var(--rh-ink); } .rh-link--gold { border-bottom-color: rgba(232, 178, 58, 0.4); color: var(--rh-ghee); } .rh-link--gold:hover, .rh-link--gold:focus-visible { color: var(--rh-ghee); border-bottom-color: var(--rh-ghee); } /* Section heading pair: text left, origin mark or dek right. */ .rh-section__head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--rh-gap); } .rh-section__head--split { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; } .rh-section__mark { justify-self: end; } .rh-section__dek { max-width: 26rem; margin: 0; font-family: var(--rh-body); font-size: 0.97rem; line-height: 1.6; color: var(--rh-laung); text-wrap: pretty; } /* --- Hero ---------------------------------------------------------------- */ .rh-hero { position: relative; background-color: var(--rh-ink); background-image: var(--rh-grain); background-repeat: repeat; overflow: hidden; } .rh-hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr); align-items: center; gap: 2.5rem; max-width: var(--rh-measure); margin: 0 auto; padding: 4.5rem 2.5rem 0; } .rh-hero__text { padding-bottom: 4.5rem; } .rh-hero .rh-eyebrow { margin-bottom: 1.375rem; letter-spacing: 0.26em; } .rh-hero__title { margin: 0; font-family: var(--rh-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2.6rem, 6vw, 4.625rem); line-height: 0.95; letter-spacing: -0.025em; color: var(--rh-paper); text-wrap: pretty; } .rh-hero__deva { margin: 0.875rem 0 0; font-family: var(--rh-deva); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 500; line-height: 1.3; color: var(--rh-ghee); } .rh-hero__body { max-width: 34rem; margin: 1.375rem 0 0; font-family: var(--rh-body); font-size: clamp(1rem, 1.4vw, 1.09rem); line-height: 1.6; color: rgba(244, 237, 224, 0.72); text-wrap: pretty; } .rh-hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; } .rh-hero__media { position: relative; align-self: end; } /* A drop-shadow filter, not a box-shadow: the pack shot is a transparent PNG * cut-out, so the shadow has to follow the pouches rather than a rectangle. */ .rh-hero__img { display: block; width: 100%; height: auto; filter: drop-shadow(0 26px 46px rgba(0, 0, 0, 0.55)); } .rh-hero__proof { border-top: 1px solid rgba(232, 178, 58, 0.4); border-bottom: 1px solid rgba(232, 178, 58, 0.4); } .rh-hero__proof-inner { max-width: var(--rh-measure); margin: 0 auto; padding: 0 2.5rem; } /* Proof strip, ink variant. Same device as the shop lead. * * Doubled class (.rh-proof.rh-proof--ink) is deliberate and load-bearing. The * base .rh-proof lives in the Shop section, which comes AFTER this one in the * file, so at equal specificity the base rule won on source order — and its * colour is --rh-laung, a dark brown, which on ink rendered the whole rail as * near-invisible dark-on-dark. It also re-applied the gold top and bottom borders * that this variant is meant to drop, doubling them against .rh-hero__proof's own * rules. * * Doubling the class rather than moving the rule keeps each section's styles in * its own section, which is the organising rule for this file. * * The seal's double ring switches its inner colour to the surface it sits on, or * it reads as a cream dot with a green halo. */ .rh-proof.rh-proof--ink { margin: 0; border-top: 0; border-bottom: 0; color: rgba(244, 237, 224, 0.78); } .rh-proof.rh-proof--ink .rh-proof__seal { box-shadow: 0 0 0 2px var(--rh-ink), 0 0 0 3px var(--rh-seal); } /* The separator hairlines have to lift on ink too — at 0.14-alpha ink they were * invisible, so the items ran together as one string. */ .rh-proof.rh-proof--ink .rh-proof__item + .rh-proof__item::before { background-color: rgba(232, 178, 58, 0.75); } /* --- The range ----------------------------------------------------------- */ .rh-range { max-width: var(--rh-measure); margin: 0 auto; padding: 4.5rem 2.5rem 3.5rem; } /* The product bands are the shop's specimen rows, rendered from the same * template. On the home page there is no .woocommerce body class, so Astra's * product grid never applies and only the list reset is needed. */ .rh-products { display: block; margin: 0; padding: 0; list-style: none; } .rh-products > li.product { width: 100%; max-width: none; margin: 0; float: none; } /* --- Ink band (ledger) --------------------------------------------------- */ .rh-band--ink { background-color: var(--rh-ink); background-image: var(--rh-grain); background-repeat: repeat; } .rh-band__inner { max-width: var(--rh-measure); margin: 0 auto; padding: 4.5rem 2.5rem; } .rh-ledger-layout { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); align-items: start; gap: var(--rh-gap); } .rh-band__body { margin: 1.25rem 0 0; font-family: var(--rh-body); font-size: 1rem; line-height: 1.65; color: rgba(244, 237, 224, 0.66); text-wrap: pretty; } /* --- The spec ledger ---------------------------------------------------- * The mockup's central new device, reused for nutrition, receipts, order * summaries and shipment status. A real : three columns of comparable * values is tabular data, and a screen reader should be able to announce the row * header with each cell. * ------------------------------------------------------------------------- */ .rh-ledger { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--rh-ghee); border-bottom: 1px solid var(--rh-ghee); border-collapse: collapse; table-layout: fixed; } .rh-ledger th, .rh-ledger td { padding: 0.85rem 1.25rem 0.85rem 0; border: 0; text-align: left; vertical-align: top; word-break: break-word; } .rh-ledger thead th { padding-top: 0.75rem; padding-bottom: 0.75rem; font-family: var(--rh-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; } .rh-ledger tbody th { font-family: var(--rh-mono); font-size: 0.69rem; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; } .rh-ledger tbody td { font-family: var(--rh-body); font-size: 0.9rem; line-height: 1.45; } /* Column 1 is narrower than the two value columns it labels. */ .rh-ledger thead th:first-child, .rh-ledger tbody th { width: 30%; } /* Ink variant. "Ours" is the only column at full contrast — the comparison is * the argument, so the competing column is deliberately quieter rather than * equally weighted. */ .rh-ledger--ink thead tr { border-bottom: 1px solid rgba(232, 178, 58, 0.22); } .rh-ledger--ink tbody tr { border-bottom: 1px solid rgba(244, 237, 224, 0.09); } .rh-ledger--ink tbody tr:last-child { border-bottom: 0; } .rh-ledger--ink thead th, .rh-ledger--ink tbody th { color: rgba(244, 237, 224, 0.42); } .rh-ledger--ink tbody td { color: rgba(244, 237, 224, 0.42); } .rh-ledger--ink thead th.rh-ledger__ours { color: var(--rh-ghee); } .rh-ledger--ink tbody td.rh-ledger__ours { color: var(--rh-paper); } /* --- Our roots ----------------------------------------------------------- */ .rh-roots__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--rh-gap); max-width: var(--rh-measure); margin: 0 auto; padding: 4.5rem 2.5rem; } /* A flatter arch than the product windows — the pier-to-span ratio has to change * with the aspect ratio or a landscape image reads as a dome. */ .rh-roots__media { position: relative; margin: 0; border-radius: 50% 50% 6px 6px / 30% 30% 6px 6px; overflow: hidden; background-color: var(--rh-ink); } /* The source photograph is a cut-out on black. `screen` drops that black out * against the ink panel behind it, which is the difference between cloves * floating on the surface and a grey rectangle containing cloves. */ .rh-roots__img { display: block; width: 100%; height: auto; mix-blend-mode: screen; opacity: 0.9; } .rh-roots__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.1rem 1.4rem; font-family: var(--rh-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rh-ghee); } .rh-roots__body { margin: 1.25rem 0 0; font-family: var(--rh-body); font-size: clamp(0.97rem, 1.3vw, 1.03rem); line-height: 1.65; color: var(--rh-laung); text-wrap: pretty; } .rh-roots__body + .rh-btn { margin-top: 1.5rem; } /* --- Gifting ------------------------------------------------------------- */ .rh-gifting { border-top: 1px solid var(--rh-rule); } .rh-gifting__inner { max-width: var(--rh-measure); margin: 0 auto; padding: 4.4rem 2.5rem; } .rh-gifts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.375rem; margin-top: 2.4rem; } .rh-gift { display: flex; flex-direction: column; background-color: var(--rh-ink); background-image: var(--rh-grain); background-repeat: repeat; border-radius: 6px; overflow: hidden; } /* The frieze again, at card scale. */ .rh-frieze--card { height: 2.125rem; border-bottom: 1px solid rgba(232, 178, 58, 0.3); background-size: 34px 32px; } .rh-gift__body { flex: 1; padding: 1.6rem 1.5rem 1.75rem; } .rh-gift__name { margin: 0.6rem 0 0; font-family: var(--rh-display); font-weight: 600; font-size: 1.55rem; line-height: 1.12; color: var(--rh-paper); } .rh-gift__desc { margin: 0.625rem 0 0; font-family: var(--rh-body); font-size: 0.9rem; line-height: 1.55; color: rgba(244, 237, 224, 0.6); text-wrap: pretty; } .rh-gift__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.625rem; margin: 1.1rem 0 0; } .rh-gift__price, .rh-gift__price .amount { font-family: var(--rh-mono); font-size: 1.1rem; color: var(--rh-ghee); } .rh-gift__weight { font-family: var(--rh-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(244, 237, 224, 0.4); } .rh-gift .rh-link { margin-top: 1.1rem; } /* --- Reviews ------------------------------------------------------------- */ .rh-reviews { background-color: var(--rh-sunk); border-top: 1px solid var(--rh-rule); } .rh-reviews__inner { max-width: var(--rh-measure); margin: 0 auto; padding: 4.4rem 2.5rem; } .rh-reviews .rh-eyebrow { margin-bottom: 1.875rem; } .rh-reviews__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.375rem; } /* Gold rule on top, not a card border: the quote is a pulled excerpt, and a full * border would make it a tile competing with the product bands above. */ /* font-style is reset: a
inherits italics from Astra's typography, * and Fraunces at 400 is already a distinct enough voice from the body sans. * Italicising it on top made the quotes read as an aside rather than as the * customer's own words. */ .rh-review { margin: 0; padding: 1.875rem 2rem; background-color: var(--rh-paper); border-top: 2px solid var(--rh-ghee); font-style: normal; } .rh-review__quote, .rh-review__who, .rh-review__stars { font-style: normal; } .rh-review__stars { display: flex; align-items: baseline; gap: 0.75rem; margin: 0; font-family: var(--rh-mono); font-size: 0.69rem; letter-spacing: 0.18em; color: var(--rh-sev); } .rh-review__quote { margin: 1rem 0 0; font-family: var(--rh-display); font-optical-sizing: auto; font-weight: 400; font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.45; color: var(--rh-ink); text-wrap: pretty; } .rh-review__who { margin-top: 1.125rem; font-family: var(--rh-mono); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--rh-laung); } /* --- Home responsive ----------------------------------------------------- */ @media (max-width: 992px) { .rh-gifts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .rh-ledger-layout { grid-template-columns: minmax(0, 1fr); row-gap: 2rem; } } @media (max-width: 900px) { /* Hero stacks with the image second — the headline is what has to be above * the fold, and a pack shot pushed to the top would bury it. */ .rh-hero__inner { grid-template-columns: minmax(0, 1fr); padding: 3rem 1.5rem 0; gap: 1.5rem; } .rh-hero__text { padding-bottom: 0; } .rh-hero__media { max-width: 26rem; margin: 0 auto -0.5rem; } .rh-hero__proof-inner, .rh-range, .rh-band__inner, .rh-roots__inner, .rh-gifting__inner, .rh-reviews__inner { padding-left: 1.5rem; padding-right: 1.5rem; } .rh-roots__inner { grid-template-columns: minmax(0, 1fr); } .rh-section__head { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; } .rh-section__mark { justify-self: start; } .rh-reviews__grid { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 600px) { .rh-gifts { grid-template-columns: minmax(0, 1fr); } .rh-hero__actions .rh-btn { flex: 1 1 100%; } /* The ledger's three columns cannot survive a phone. Each row becomes a * stacked block: attribute, ours, theirs — which is how the mockup's own * mobile screen handled it (as an accordion). Kept as a table so the semantics * and the reading order both hold. */ .rh-ledger, .rh-ledger thead, .rh-ledger tbody, .rh-ledger tr, .rh-ledger th, .rh-ledger td { display: block; width: auto; } .rh-ledger thead { display: none; } .rh-ledger tbody tr { padding: 0.9rem 0; } .rh-ledger tbody th, .rh-ledger tbody td { width: auto; padding: 0; } .rh-ledger tbody td { margin-top: 0.35rem; } /* The 4.5rem indent makes room for the ::before row label below, and ONLY the * ink ledger has one. It was applied to every ledger, so the two-column paper * ledgers on /about/ and /contact/ pushed their values 65px right against * nothing at all — label hard left, value floating in the middle of the row, * which is the misalignment that was reported. */ .rh-ledger--ink tbody td { padding-left: 4.5rem; position: relative; } /* Row labels, since the column headers are gone. */ .rh-ledger--ink tbody td::before { content: "Ratlami"; position: absolute; left: 0; top: 0.15rem; font-family: var(--rh-mono); font-size: 0.56rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--rh-ghee); } .rh-ledger--ink tbody td:last-child::before { content: "Ordinary"; color: rgba(244, 237, 224, 0.34); } } @media (prefers-reduced-motion: reduce) { .rh-btn, .rh-link { transition: none; } .rh-btn:hover, .rh-btn:focus-visible { transform: none; } } /* ========================================================================== Shop page (WooCommerce archive) ========================================================================== * Products render as full-width "specimen" bands, not a card grid: with two or * three SKUs a grid reads as an unfinished template. Markup comes from * woocommerce/content-product.php and inc/woocommerce-shop.php. */ .woocommerce.archive .site-content, .woocommerce-page.archive .site-content { background-color: var(--rh-paper); background-image: var(--rh-grain); background-repeat: repeat; } /* --- Lead ---------------------------------------------------------------- */ .rh-lead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--rh-gap); padding: clamp(2rem, 6vw, 4.5rem) 0 0; } .rh-lead__text { max-width: 40rem; } .rh-lead__deva { margin: 0.35rem 0 0; font-family: var(--rh-deva); font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 400; line-height: 1.3; color: var(--rh-sev); } /* --- Origin mark (the signature) ----------------------------------------- * A struck mark, not a rubber stamp: plain geometry, plainly typeset, no * distressing. Ours — deliberately not the official GI logo, whose use is * restricted to registered proprietors. */ .rh-lead__mark { justify-self: end; } .rh-mark { display: block; width: clamp(6rem, 11vw, 8.5rem); height: auto; } .rh-mark__rule, .rh-mark__hair { fill: none; stroke: var(--rh-ghee); } .rh-mark__rule { stroke-width: 1.2; } .rh-mark__hair { stroke-width: 0.5; } .rh-mark__text { font-family: var(--rh-mono); font-size: 6.4px; font-weight: 500; letter-spacing: 1.7px; fill: var(--rh-laung); } .rh-mark__arch path { fill: none; stroke: var(--rh-ink); stroke-width: 2; stroke-linecap: square; } .rh-mark__base { fill: none; stroke: var(--rh-ghee); stroke-width: 1.6; stroke-linecap: square; } .rh-lead__title { margin: 0; font-family: var(--rh-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(2.75rem, 7vw, 4.5rem); line-height: 0.98; letter-spacing: -0.02em; color: var(--rh-ink); } .rh-lead__thesis { margin: 0.75rem 0 0; font-family: var(--rh-body); font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45; color: var(--rh-laung); } /* --- Proof strip (the signature) ----------------------------------------- */ .rh-proof { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding: 0.7rem 0; border-top: 1px solid var(--rh-ghee); border-bottom: 1px solid var(--rh-ghee); font-family: var(--rh-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rh-laung); } .rh-proof__seal { width: 0.62rem; height: 0.62rem; flex: none; border-radius: 50%; background-color: var(--rh-seal); box-shadow: 0 0 0 2px var(--rh-paper), 0 0 0 3px var(--rh-seal); } .rh-proof__item + .rh-proof__item { position: relative; padding-left: 1.25rem; } .rh-proof__item + .rh-proof__item::before { content: ""; position: absolute; left: 0; top: 50%; width: 0.3rem; height: 1px; background-color: var(--rh-ghee); } /* --- Specimen band ------------------------------------------------------- */ /* Unwind Astra's product grid — these are rows, not cards. * * Astra ships its grid in woocommerce-grid.min.css, a separate handle that can * enqueue after custom.css, so load order cannot be relied on. The * [class*="columns-"] attribute selector outranks Astra's `.woocommerce * ul.products` regardless of order, and matches whatever column count the * customizer is set to. */ .woocommerce ul.products[class*="columns-"], .woocommerce-page ul.products[class*="columns-"] { display: block; margin: 0; padding: 0; } .woocommerce ul.products[class*="columns-"] li.product.rh-specimen, .woocommerce-page ul.products[class*="columns-"] li.product.rh-specimen, .rh-specimen { display: grid; grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: var(--rh-gap); align-items: center; width: 100%; max-width: none; margin: 0; padding: clamp(2rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--rh-rule); float: none; clear: both; list-style: none; text-align: left; /* Astra centres loop items */ } /* Astra centres every descendant of a loop item. */ .woocommerce ul.products[class*="columns-"] li.product.rh-specimen .rh-specimen__body, .rh-specimen__body { text-align: left; } .rh-specimen::before, .rh-specimen::after { content: none; } /* Arch frame — the arcade lifted out of the wordmark and used as a window. * The image is cropped to the arch; a gold hairline sits outside it like a * moulding. Derived from their own logo, which is what keeps it from reading * as generic "Indian restaurant" ornament. */ .rh-specimen__media { position: relative; padding: 0.85rem; } .rh-specimen__media::before { content: ""; position: absolute; inset: 0; border: 1px solid var(--rh-ghee); border-radius: var(--rh-arch); pointer-events: none; } .rh-specimen__media-link { display: block; border-radius: var(--rh-arch); overflow: hidden; background-color: var(--rh-sunk); } .rh-specimen__media img { display: block; width: 100%; height: auto; margin: 0; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .rh-specimen:hover .rh-specimen__media img { transform: scale(1.03); } .rh-specimen__eyebrow { margin: 0 0 0.6rem; font-family: var(--rh-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--rh-sev); } /* Astra sets global heading faces with high specificity — match it here. */ .woocommerce ul.products li.product .rh-specimen__title, .rh-specimen__title { margin: 0; font-family: var(--rh-display); font-optical-sizing: auto; font-weight: 600; font-size: clamp(1.75rem, 3.4vw, 2.6rem); line-height: 1.06; letter-spacing: -0.015em; color: var(--rh-ink); } .rh-specimen__title a { color: inherit; text-decoration: none; background-image: linear-gradient(var(--rh-ghee), var(--rh-ghee)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; transition: background-size 0.35s ease; } .rh-specimen__title a:hover, .rh-specimen__title a:focus-visible { color: var(--rh-ink); background-size: 100% 2px; } .rh-specimen__deva { margin: 0.4rem 0 0; font-family: var(--rh-deva); font-size: 1.15rem; font-weight: 400; line-height: 1.35; color: var(--rh-sev); } .rh-specimen__note { max-width: 34rem; margin: 0.85rem 0 0; font-family: var(--rh-body); font-size: 1rem; line-height: 1.6; color: var(--rh-laung); } .rh-specimen__note p { margin: 0; } .rh-specimen__note p + p { margin-top: 0.5rem; } /* --- Spice meter --------------------------------------------------------- */ .rh-spice { display: flex; align-items: center; gap: 0.7rem; margin: 1.15rem 0 0; font-family: var(--rh-mono); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--rh-laung); } .rh-spice__scale { display: inline-flex; gap: 3px; } .rh-spice__pip { width: 0.55rem; height: 0.55rem; border: 1px solid var(--rh-rule); background-color: transparent; } .rh-spice__pip.is-on { border-color: var(--rh-sev); background-color: var(--rh-sev); } .rh-spice__value { color: var(--rh-ink); font-weight: 500; } /* --- Size picker --------------------------------------------------------- */ .rh-sizes { margin: 1.6rem 0 0; } .rh-sizes__set { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; border: 0; } .rh-size { position: relative; display: flex; flex-direction: column; gap: 0.15rem; min-width: 6.25rem; padding: 0.7rem 1rem 0.75rem; border: 1px solid var(--rh-rule); border-radius: 4px; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease; } .rh-size__input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .rh-size__weight { font-family: var(--rh-body); font-size: 0.95rem; font-weight: 500; color: var(--rh-ink); } .rh-size__price { font-family: var(--rh-mono); font-size: 0.85rem; color: var(--rh-laung); } .rh-size:hover { border-color: var(--rh-ink); } /* Selected: inverted, with a gold marker. */ .rh-size:has(.rh-size__input:checked) { background-color: var(--rh-ink); border-color: var(--rh-ink); } .rh-size:has(.rh-size__input:checked) .rh-size__weight { color: var(--rh-paper); } .rh-size:has(.rh-size__input:checked) .rh-size__price { color: var(--rh-ghee); } .rh-size:has(.rh-size__input:focus-visible) { outline: 2px solid var(--rh-sev); outline-offset: 2px; } .rh-size.is-out { opacity: 0.45; cursor: not-allowed; } .rh-size__flag { font-family: var(--rh-mono); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rh-laung); } /* --- Add to cart --------------------------------------------------------- */ /* text-transform is reset explicitly: Astra's button styling uppercases WooCommerce * buttons from the Customizer, and the design sets this one in sentence case — * "Add to cart" beside a price reads as an instruction, "ADD TO CART" as a * banner. */ .woocommerce a.rh-add, .woocommerce button.rh-add, .rh-add { display: inline-block; margin: 1.25rem 0 0; padding: 0.9rem 2.1rem; border: 0; border-radius: 4px; background-color: var(--rh-ink); color: var(--rh-paper); font-family: var(--rh-body); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; line-height: 1; text-transform: none; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease; } .woocommerce a.rh-add:hover, .woocommerce button.rh-add:hover, .rh-add:hover, .rh-add:focus-visible { background-color: var(--rh-sev); color: var(--rh-paper); transform: translateY(-1px); } /* --- Forthcoming specimen ------------------------------------------------ */ .rh-specimen--forthcoming { border-bottom: 0; } .rh-specimen--forthcoming .rh-specimen__eyebrow, .rh-specimen--forthcoming .rh-specimen__title { color: var(--rh-laung); opacity: 0.75; } .rh-specimen__placeholder { aspect-ratio: 1 / 1; border: 1px dashed var(--rh-ghee); border-radius: var(--rh-arch); background-color: var(--rh-sunk); } .rh-specimen--forthcoming .rh-specimen__media::before { border-style: dashed; opacity: 0.6; } .rh-forthcoming { display: inline-flex; align-items: center; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0.45rem 0.9rem; border: 1px solid var(--rh-rule); border-radius: 999px; font-family: var(--rh-mono); font-size: 0.68rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--rh-laung); } /* --- Responsive ---------------------------------------------------------- */ @media (max-width: 900px) { .rh-lead { grid-template-columns: minmax(0, 1fr); row-gap: 1.5rem; } .rh-lead__mark { justify-self: start; } } @media (max-width: 768px) { /* The `[class*="columns-"]` variants have to be repeated here, and this was a * live bug rather than a precaution. * * The base rule further up is * `.woocommerce ul.products[class*="columns-"] li.product.rh-specimen` — five * class-level selectors — while this override was three, so the desktop * `22rem | 1fr` grid survived the media query. On a 375px screen the media track * took 269px and the text track collapsed to 0, putting the product name and the * spice meter outside the viewport: the shop archive scrolled sideways to 552px * and the names rendered at zero width. Measured, not theorised. * * It affected the shop archive all along and only became visible when related * products started using the same specimen. */ .woocommerce ul.products[class*="columns-"] li.product.rh-specimen, .woocommerce-page ul.products[class*="columns-"] li.product.rh-specimen, .woocommerce ul.products li.product.rh-specimen, .rh-specimen { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; } .rh-specimen__media { max-width: 15rem; } .rh-size { flex: 1 1 5.5rem; min-width: 0; } .rh-add { width: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .rh-specimen__media img, .rh-specimen__title a, .rh-add { transition: none; } .rh-specimen:hover .rh-specimen__media img { transform: none; } } /* ========================================================================== Single product page ========================================================================== * Markup from inc/woocommerce-product.php. WooCommerce's own add-to-cart form is * NOT overridden — the size chips are injected into it and its and