/*
Theme Name: Tewar
Theme URI: https://tewar.in
Description: Child theme of Blocksy for TEWAR by Mirevanio — modern-luxury Indian D2C
jewellery. All brand tokens live in theme.json; see docs/design-plan.md
for the canonical blueprint and docs/brand-content.md for founder copy.
Author: Bigadtruck
Author URI: https://bigadtruck.com
Template: blocksy
Version: 0.2.0
Text Domain: tewar
License: Proprietary — built for Mirevanio (Tewar). Not for redistribution.
*/
/* ============================================================================
Type scale — defined here, not inherited
---------------------------------------------------------------------------
These duplicate theme.json's fontSizes on purpose. theme.json presets are
generated by WordPress and merged with the parent theme's; when that merge does
not go our way the variables silently resolve to nothing and headings collapse
to body size — which is exactly what shipped. Colours and spacing survived the
merge, type did not, and there is no way to tell from local preview which will.
Declaring them locally removes the whole class of failure. theme.json keeps its
copies so the block editor still offers the right sizes.
========================================================================= */
:root {
--tw-meta: 0.75rem;
--tw-small: 0.875rem;
--tw-body: 1rem;
--tw-lead: clamp(1.0625rem, 1.0rem + 0.35vw, 1.25rem);
--tw-h3: clamp(1.375rem, 1.18rem + 0.94vw, 1.875rem);
--tw-h2: clamp(1.875rem, 1.46rem + 2.05vw, 3rem);
--tw-h1: clamp(2.5rem, 1.88rem + 3.13vw, 5rem);
--tw-hero: clamp(3.25rem, 2.19rem + 5.31vw, 7.5rem);
/* Font families, for the same reason as the sizes above: the parent theme's
theme.json wins the typography merge, so --wp--preset--font-family--* resolves
to nothing and every heading silently falls back to Blocksy's sans. Colours
survive the merge; type does not. Declare ours and stop guessing. */
--tw-display: Fraunces, 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
--tw-ui: Montserrat, 'Helvetica Neue', Arial, sans-serif;
/* Spacing, bound locally for the same reason as type. Also retuned: every section
was padding 6.5rem top AND bottom, so any two adjacent sections put ~13rem of
dead space between them. Generous whitespace is the look; a void is not. The
section step is now fluid and roughly a third smaller. */
--tw-s1: 0.5rem;
--tw-s2: 1rem;
--tw-s3: 1.5rem;
--tw-s4: clamp(1.75rem, 3vw, 2.5rem);
--tw-s5: clamp(2.25rem, 4vw, 3.25rem);
--tw-s6: clamp(2.75rem, 5vw, 4.25rem);
}
/* Tokens are defined in theme.json (--wp--preset--color--*). This file carries only the
brand's signature treatments that theme.json cannot express. */
/* ---- The .chrome label: uppercase Montserrat, wide tracking -------------------------
Canonical label style — nav, buttons, prices, product names, meta. Reuse it; never
re-specify letter-spacing ad hoc. */
.chrome {
font-family: var(--tw-ui);
font-size: .75rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
line-height: 1.4;
}
/* ---- Ghost buttons with dash-prefixed labels: "— ADD TO BAG" ----------------------- */
.tewar-btn,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
font-family: var(--tw-ui);
font-size: .75rem;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
background: transparent;
color: var(--wp--preset--color--emerald);
border: 1px solid var(--wp--preset--color--emerald);
border-radius: 0;
padding: .95rem 1.75rem;
transition: background-color .25s ease, color .25s ease;
}
.tewar-btn::before,
.woocommerce a.button::before,
.woocommerce button.button::before,
.woocommerce input.button::before { content: "— "; }
.tewar-btn:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
background: var(--wp--preset--color--emerald);
color: var(--wp--preset--color--ivory);
}
/* On emerald sections the ghost button inverts to gold. */
.has-emerald-background-color .tewar-btn,
.tewar-section--emerald .tewar-btn {
color: var(--wp--preset--color--gold);
border-color: var(--wp--preset--color--gold);
}
.has-emerald-background-color .tewar-btn:hover,
.tewar-section--emerald .tewar-btn:hover {
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--emerald);
}
/* ---- Signature motif: the four-point star from the logo ----------------------------
Replaces the diamond bullet. Drawn in CSS so it inherits colour and needs no asset. */
.tewar-star,
.tewar-list li::marker { color: var(--wp--preset--color--gold); }
.tewar-star {
/* Four-point sparkle, matching the mark set between the E and W of the wordmark.
Drawn with quadratic curves so the waist is concave — a straight-edged polygon
reads as a plus sign at label sizes, which is the whole reason this isn't clip-path. */
--tewar-star-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 0Q56 44 100 50Q56 56 50 100Q44 56 0 50Q44 44 50 0Z'/%3E%3C/svg%3E");
display: inline-block;
width: .78em;
height: .78em;
background: currentColor;
-webkit-mask: var(--tewar-star-shape) center / contain no-repeat;
mask: var(--tewar-star-shape) center / contain no-repeat;
vertical-align: -.06em;
}
/* ---- Giant pale watermark words (तेवर, riwaaz, roz) -------------------------------- */
.tewar-watermark {
position: absolute;
inset-inline-start: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: var(--tw-display);
font-size: clamp(4rem, 18vw, 16rem);
line-height: .8;
color: var(--wp--preset--color--emerald);
opacity: .05;
pointer-events: none;
user-select: none;
white-space: nowrap;
z-index: 0;
}
/* Any section carrying a watermark must contain it, and every *other* child of that
section has to be lifted above it. Styling only the watermark's immediate sibling
isn't enough — an absolutely-positioned element creates a stacking context and will
paint over later static siblings (which is exactly what happened to the collection
tiles). */
.tewar-has-watermark { position: relative; overflow: hidden; }
.tewar-has-watermark > *:not(.tewar-watermark) { position: relative; z-index: 1; }
/* ---- Hairline column rules --------------------------------------------------------- */
.tewar-rule { border: 0; border-top: 1px solid var(--wp--preset--color--line); }
.tewar-rule--gold{ border-top-color: var(--wp--preset--color--gold); opacity: .5; }
/* ---- Prices: gold for the active/sale price, struck MRP in muted ------------------- */
.woocommerce .price { font-family: var(--tw-ui);
letter-spacing: .1em; font-weight: 600; }
.woocommerce .price ins { color: var(--wp--preset--color--gold-ink); text-decoration: none; }
.woocommerce .price del { color: var(--wp--preset--color--muted); opacity: .8; }
/* ---- Out of stock stays live: style Notify-me as a first-class action, not a dead end
(the catalogue is mostly 1-of-a-kind, so this is a primary state — see
docs/inventory-audit.md 3). */
.tewar-notify { border-style: dashed; }
.woocommerce .stock.out-of-stock {
font-family: var(--tw-ui);
letter-spacing: .12em;
text-transform: uppercase;
font-size: .7rem;
color: var(--wp--preset--color--muted);
}
/* ---- Motion is progressive enhancement; content is visible by default -------------- */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* =====================================================================
Homepage patterns
===================================================================== */
/* ---- Split-screen hero. The h1 is the LCP element: it is text, it is in the
markup, and nothing animates it in. The image sits beside it, not behind it,
so a slow image never blocks the headline. ---------------------------------- */
/* 40% + 60% leaves no room for a gap, so a wrapping flex row drops the image onto
its own line. Pin it to one row on desktop; the media query below restores stacking.
Height is capped deliberately. Left to itself the row grew to the height of the padded
text column and pushed the headline below the fold — and the headline is the LCP
element, so it has to be on screen at first paint, not one scroll down. */
.tewar-hero {
align-items: stretch;
flex-wrap: nowrap;
gap: 0;
min-height: min(78svh, 680px);
max-height: 820px;
}
.tewar-hero__sub {
font-size: var(--tw-lead);
color: var(--wp--preset--color--muted);
max-width: 32ch;
margin-block: 1rem 2rem;
}
.tewar-hero__image,
.tewar-hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
margin: 0;
background: var(--wp--preset--color--sand); /* holds the space before the image lands */
}
/* Until the emerald-satin hero photography exists (docs/inventory-audit.md 1.3) the
slot is an explicit placeholder rather than a broken ![]()
showing its alt text. */
.tewar-hero__placeholder {
display: grid;
place-content: center;
min-height: 60vh;
background: var(--wp--preset--color--sand);
color: var(--wp--preset--color--muted);
font-size: .65rem;
letter-spacing: .18em;
text-transform: uppercase;
text-align: center;
padding: 2rem;
}
/* ---- Collection tiles ------------------------------------------------------ */
.tewar-collections__grid { gap: 1.5rem; }
.tewar-tile { display: block; text-decoration: none; }
.tewar-tile__img {
display: block;
aspect-ratio: 3 / 4;
background: var(--wp--preset--color--sand);
margin-bottom: .9rem;
transition: opacity .3s ease;
}
.tewar-tile__img[data-tint="blush"] { background: var(--wp--preset--color--blush); }
.tewar-tile__img[data-tint="mint"] { background: var(--wp--preset--color--mint); }
.tewar-tile__img[data-tint="sky"] { background: var(--wp--preset--color--sky); }
.tewar-tile__img[data-tint="sand"] { background: var(--wp--preset--color--sand); }
.tewar-tile:hover .tewar-tile__img { opacity: .82; }
.tewar-tile__name {
display: block;
font-family: var(--tw-display);
font-size: var(--tw-h3);
color: var(--wp--preset--color--emerald);
line-height: 1.1;
}
.tewar-tile__story {
display: block;
font-size: .8rem;
line-height: 1.55;
color: var(--wp--preset--color--muted);
margin-top: .35rem;
max-width: 30ch;
}
/* ---- Promise strip --------------------------------------------------------- */
.tewar-promise__title { color: var(--wp--preset--color--gold-ink); margin-bottom: .5rem; }
.tewar-promise__body { font-size: .875rem; line-height: 1.6; margin: 0; }
/* ---- Price bands ----------------------------------------------------------- */
.tewar-bands__grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-top: 2rem;
}
.tewar-band {
display: grid;
place-content: center;
gap: .4rem;
text-align: center;
min-height: 190px;
padding: 2rem 1rem;
border: 1px solid var(--wp--preset--color--line);
text-decoration: none;
transition: border-color .25s ease, background-color .25s ease;
}
.tewar-band:hover { border-color: var(--wp--preset--color--gold); background: #fff; }
.tewar-band__label {
font-size: .65rem; letter-spacing: .16em; text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.tewar-band__figure {
font-family: var(--tw-display);
font-size: var(--tw-h3);
color: var(--wp--preset--color--emerald);
}
/* ---- Mobile: the hero stacks, tiles go 2-up (never 1-up — a single tile per
screen buries the other three). ------------------------------------------- */
@media (max-width: 781px) {
/* Phone hero: image first and shorter, headline immediately under it. Buyers here are
overwhelmingly on phones, so the first screen has to carry the name and the CTA —
not a full-bleed photograph with the words somewhere below. */
.tewar-hero { flex-wrap: wrap; min-height: 0; max-height: none; }
.tewar-hero .wp-block-column:first-child { order: 2; padding: 2rem 1.25rem 2.5rem !important; }
.tewar-hero .wp-block-column:last-child { order: 1; }
.tewar-hero__image { aspect-ratio: 4 / 3; height: auto; }
.tewar-hero__sub { margin-block: .85rem 1.5rem; }
.tewar-collections__grid { display: grid; grid-template-columns: 1fr 1fr; }
.tewar-collections__grid > .wp-block-column { flex-basis: auto !important; }
}
/* ---------------------------------------------------------------------------
Gold, and where it is allowed to be text
---------------------------------------------------------------------------
Champagne gold #B8912F on ivory measures 2.71:1 — it fails WCAG AA for small
text (4.5) and even for large text (3.0). Every gold label on the site was
therefore unreadable to anyone with reduced contrast sensitivity, which on a
jewellery site skews older and skews buying.
So gold splits in two:
--gold decorative only — stars, hairlines, fills, progress, focus
--gold-ink #8F6B18, 4.50:1 on ivory — gold TEXT on light grounds
--gold-soft #D8BD77, 6.81:1 on emerald — gold TEXT on dark grounds
The accent still reads as gold; it just stops being decoration pretending
to be language.
--------------------------------------------------------------------------- */
/* ---- Editorial banners -----------------------------------------------------
A tall tint panel with the photograph offset over its OUTER edge, and the copy
set beside it. Banner B mirrors the whole thing — the alternating direction is
what stops a long homepage reading as a list.
The offset deliberately hangs outward, never inward: pushing the image toward
the copy column makes it cover the text at narrow widths. --------------------- */
.tewar-editorial {
/* Own the width rather than relying on the block layout engine — this has to hold
in the preview harness too, which has no layout engine. */
max-width: 1360px;
margin-inline: auto;
padding: var(--tw-s6) var(--tw-s3);
}
.tewar-editorial__inner {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: var(--tw-s5);
}
.tewar-editorial__media {
position: relative;
grid-column: 1;
}
.tewar-editorial__block {
aspect-ratio: 4 / 5;
width: 100%;
}
.tewar-editorial__block[data-tint="blush"] { background: var(--wp--preset--color--blush); }
.tewar-editorial__block[data-tint="sky"] { background: var(--wp--preset--color--sky); }
.tewar-editorial__block[data-tint="mint"] { background: var(--wp--preset--color--mint); }
.tewar-editorial__block[data-tint="sand"] { background: var(--wp--preset--color--sand); }
.tewar-editorial__image {
position: absolute;
top: 10%;
left: clamp(-2.5rem, -3vw, -1rem); /* hangs off the outer edge */
width: 76%;
aspect-ratio: 4 / 5;
display: grid;
place-content: center;
text-align: center;
background: var(--wp--preset--color--sand);
color: var(--wp--preset--color--muted);
font-size: .65rem;
letter-spacing: .18em;
text-transform: uppercase;
line-height: 1.9;
}
.tewar-editorial__copy { grid-column: 2; }
.tewar-editorial__eyebrow { color: var(--wp--preset--color--gold-ink); margin: 0 0 .75rem; }
.tewar-editorial__title {
font-family: var(--tw-display);
font-size: var(--tw-h1);
color: var(--wp--preset--color--emerald);
line-height: 1.02;
letter-spacing: -.03em;
margin: 0 0 1rem;
}
.tewar-editorial__title em { font-style: italic; }
.tewar-editorial__body { max-width: 42ch; margin: 0 0 1.75rem; }
/* Mirrored: media right, copy left, offset flips to hang off the right edge. */
.tewar-editorial__inner--mirrored .tewar-editorial__media { grid-column: 2; }
.tewar-editorial__inner--mirrored .tewar-editorial__copy {
grid-column: 1;
grid-row: 1;
text-align: right;
}
.tewar-editorial__inner--mirrored .tewar-editorial__image {
left: auto;
right: clamp(-2.5rem, -3vw, -1rem);
}
.tewar-editorial__inner--mirrored .tewar-editorial__body { margin-left: auto; }
/* ---- Footer ---------------------------------------------------------------- */
.tewar-footer {
background: var(--wp--preset--color--emerald);
color: var(--wp--preset--color--sand);
padding: var(--tw-s6) var(--tw-s3) var(--tw-s4);
margin-top: var(--tw-s6);
}
.tewar-footer__top { text-align: center; max-width: 1360px; margin: 0 auto var(--tw-s5); }
.tewar-footer__logo { width: 220px; height: auto; margin: 0 auto; display: block; }
.tewar-footer__tagline {
font-family: var(--tw-display);
font-style: italic;
font-size: var(--tw-lead);
opacity: .85;
margin-top: 1rem;
}
.tewar-footer__cols {
max-width: 1360px;
margin: 0 auto;
display: grid;
gap: var(--tw-s4);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.tewar-footer__heading { color: var(--wp--preset--color--gold-soft); margin: 0 0 1rem; }
.tewar-footer__col ul { list-style: none; margin: 0; padding: 0; }
.tewar-footer__col li { margin-bottom: .55rem; font-size: .85rem; }
.tewar-footer a { color: var(--wp--preset--color--sand); text-decoration: none; }
.tewar-footer a:hover { color: var(--wp--preset--color--gold); }
/* Anything still waiting on the founders is visibly marked rather than quietly missing. */
.tewar-todo { opacity: .5; font-style: italic; }
.tewar-footer__legal {
max-width: 1360px;
margin: var(--tw-s5) auto 0;
padding-top: var(--tw-s3);
border-top: 1px solid rgb(255 255 255 / .14);
display: flex;
flex-wrap: wrap;
gap: 1rem 2rem;
justify-content: space-between;
font-size: .72rem;
opacity: .8;
}
.tewar-footer__legal p { margin: 0; }
.tewar-footer__policies { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.tewar-watermark--footer { color: var(--wp--preset--color--sand); opacity: .06; font-size: clamp(3rem, 13vw, 11rem); }
@media (max-width: 781px) {
.tewar-editorial__inner,
.tewar-editorial__inner--mirrored { grid-template-columns: 1fr; }
.tewar-editorial__media,
.tewar-editorial__inner--mirrored .tewar-editorial__media { grid-column: 1; grid-row: 1; }
.tewar-editorial__copy,
.tewar-editorial__inner--mirrored .tewar-editorial__copy {
grid-column: 1; grid-row: 2; text-align: left; padding-top: 2rem;
}
.tewar-editorial__image,
.tewar-editorial__inner--mirrored .tewar-editorial__image {
left: 8%; right: auto; width: 84%;
}
.tewar-editorial__body { margin-left: 0; }
}
/* ---- Our Story -------------------------------------------------------------
Long-form editorial. The lede is set at display size because it is the
founders' own words and carries the page. --------------------------------- */
.tewar-story { max-width: 1360px; margin-inline: auto; padding: var(--tw-s5) var(--tw-s3) var(--tw-s6); }
.tewar-story__header { padding-block: var(--tw-s6) var(--tw-s4); text-align: center; }
.tewar-story__eyebrow { color: var(--wp--preset--color--gold-ink); margin: 0 0 1rem; }
.tewar-story__eyebrow--gold { color: var(--wp--preset--color--gold-ink); }
.tewar-story__title {
font-family: var(--tw-display);
font-size: var(--tw-h1);
color: var(--wp--preset--color--emerald);
line-height: 1.05;
letter-spacing: -.03em;
margin: 0;
}
.tewar-story__title em { font-style: italic; }
.tewar-story__lede {
font-family: var(--tw-display);
font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
line-height: 1.5;
color: var(--wp--preset--color--emerald);
max-width: 34ch;
margin: 0 auto var(--tw-s5);
text-align: center;
}
.tewar-story__body { max-width: 58ch; }
.tewar-story__map { padding-block: var(--tw-s5); max-width: 900px; margin-inline: auto; }
.tewar-story__places { list-style: none; margin: 2rem 0 0; padding: 0; }
.tewar-story__places li {
display: grid;
grid-template-columns: 1.5rem 9rem 1fr;
align-items: baseline;
gap: .75rem;
padding: .85rem 0;
border-bottom: 1px solid var(--wp--preset--color--line);
}
.tewar-story__places span {
font-size: .75rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
color: var(--wp--preset--color--emerald);
}
.tewar-story__places em { font-style: normal; color: var(--wp--preset--color--muted); font-size: .875rem; }
.tewar-story__places i { color: var(--wp--preset--color--gold); }
.tewar-story__promise {
background: var(--wp--preset--color--emerald);
color: var(--wp--preset--color--sand);
padding: var(--tw-s5) var(--tw-s4);
margin-block: var(--tw-s5);
text-align: center;
}
.tewar-story__pillars {
display: grid;
gap: var(--tw-s4);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
text-align: left;
margin-top: 2rem;
}
.tewar-story__pillars .chrome { color: var(--wp--preset--color--gold-soft); margin: 0 0 .6rem; }
.tewar-story__pillars p:last-child { font-size: .875rem; line-height: 1.6; margin: 0; opacity: .9; }
.tewar-story__philosophy {
border: 0;
border-top: 1px solid var(--wp--preset--color--line);
border-bottom: 1px solid var(--wp--preset--color--line);
margin: var(--tw-s5) auto;
padding: var(--tw-s4) 0;
max-width: 48ch;
text-align: center;
}
.tewar-story__philosophy p {
font-family: var(--tw-display);
font-style: italic;
font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
line-height: 1.5;
color: var(--wp--preset--color--emerald);
margin: 0;
}
.tewar-story__cta { text-align: center; }
/* ---- Product page ---------------------------------------------------------- */
.tewar-pdp__collection a { color: var(--wp--preset--color--gold-ink); }
.tewar-pdp__promise { list-style: none; margin: 1.75rem 0; padding: 1.25rem 0; border-block: 1px solid var(--wp--preset--color--line); display: grid; gap: .6rem; }
.tewar-pdp__promise i { color: var(--wp--preset--color--gold); }
.tewar-pdp__social { color: var(--wp--preset--color--muted); font-size: .7rem; }
.tewar-pdp__accordions { max-width: 760px; margin: var(--tw-s5) auto; }
.tewar-accordion { border-bottom: 1px solid var(--wp--preset--color--line); }
.tewar-accordion summary {
cursor: pointer; list-style: none; padding: 1.15rem 0;
color: var(--wp--preset--color--emerald); display: flex; justify-content: space-between; align-items: center;
}
.tewar-accordion summary::-webkit-details-marker { display: none; }
.tewar-accordion summary::after { content: "+"; color: var(--wp--preset--color--gold-ink); font-size: 1.1rem; }
.tewar-accordion[open] summary::after { content: "–"; }
.tewar-accordion__body { padding-bottom: 1.5rem; font-size: .9rem; line-height: 1.7; }
.tewar-specs { width: 100%; border-collapse: collapse; font-size: .875rem; }
.tewar-specs th { text-align: left; width: 40%; padding: .55rem 0; font-weight: 600; color: var(--wp--preset--color--emerald); vertical-align: top; }
.tewar-specs td { padding: .55rem 0; color: var(--wp--preset--color--muted); }
/* ---- Listing card ----------------------------------------------------------
Hover swaps to the second gallery image. The swap is opacity-only so nothing
reflows, and it is disabled where hover doesn't exist rather than left to fire
on a tap. --------------------------------------------------------------- */
/* Cards must be equal height with their actions aligned, whatever the name length —
an uneven bottom edge reads as a broken grid, and product names here run from
"Olive Stud Earrings" to "Shobita Kashmiri Gold Dangler". */
.tewar-card {
list-style: none;
display: flex;
flex-direction: column;
height: 100%;
}
.tewar-card__link { display: flex; flex-direction: column; flex: 1 1 auto; text-decoration: none; }
.tewar-card__media {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 4 / 5;
background: var(--wp--preset--color--sand);
}
.tewar-card__img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity .45s ease;
}
.tewar-card__img--swap { opacity: 0; }
@media (hover: hover) {
.tewar-card__link:hover .tewar-card__img--swap { opacity: 1; }
}
.tewar-card__flag {
position: absolute;
inset-block-start: .75rem;
inset-inline-start: .75rem;
background: var(--wp--preset--color--ivory);
color: var(--wp--preset--color--muted);
padding: .3rem .6rem;
font-size: .6rem;
}
.tewar-card--soldout .tewar-card__img { opacity: .72; }
.tewar-card__row {
display: flex;
justify-content: space-between;
align-items: flex-start; /* not baseline — a two-line name drags the price out of line */
gap: 1rem;
padding: .85rem 0 .35rem;
}
.tewar-card__name {
color: var(--wp--preset--color--emerald);
/* Two lines maximum, so the grid keeps its rhythm. */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.tewar-card__price { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tewar-card__price .amount { color: var(--wp--preset--color--ink); }
.tewar-card .tewar-btn,
.tewar-card .button {
width: 100%; text-align: center; padding: .7rem 1rem; font-size: .65rem;
margin-top: auto; /* pin the action to the bottom of every card */
}
/* ---- Product grid ---------------------------------------------------------- */
.tewar-grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
align-items: stretch;
gap: var(--tw-s4) 1.25rem;
grid-template-columns: repeat(2, 1fr); /* 2-up on mobile, per the plan */
}
@media (min-width: 782px) {
.tewar-grid { grid-template-columns: repeat(4, 1fr); }
}
/* ---- Product shelf (bestsellers / new drops) -------------------------------- */
.tewar-shelf { max-width: 1360px; margin-inline: auto; padding: var(--tw-s6) var(--tw-s3); }
.tewar-shelf__head {
display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
gap: 1rem 2rem; margin-bottom: var(--tw-s4);
padding-bottom: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--line);
}
.tewar-shelf__title {
font-family: var(--tw-display);
font-size: var(--tw-h2);
color: var(--wp--preset--color--emerald);
letter-spacing: -.025em; margin: 0;
}
.tewar-shelf__tabs { display: flex; gap: 1.75rem; }
.tewar-shelf__tab {
background: none; border: 0; padding: .25rem 0; cursor: pointer;
color: var(--wp--preset--color--muted); border-bottom: 1px solid transparent;
transition: color .2s ease, border-color .2s ease;
}
.tewar-shelf__tab:hover { color: var(--wp--preset--color--emerald); }
.tewar-shelf__tab.is-active { color: var(--wp--preset--color--emerald); border-bottom-color: var(--wp--preset--color--gold); }
.tewar-shelf__more { text-align: center; margin-top: var(--tw-s4); }
.tewar-card__swatches { display: block; color: var(--wp--preset--color--muted); font-size: .6rem; padding-bottom: .9rem; }
/* ---- Community / Instagram ------------------------------------------------- */
.tewar-community { max-width: 1360px; margin-inline: auto; padding: var(--tw-s6) var(--tw-s3); }
.tewar-community__head { text-align: center; margin-bottom: var(--tw-s4); }
.tewar-community__tag { color: var(--wp--preset--color--gold-ink); margin: 0 0 .6rem; }
.tewar-community__title {
font-family: var(--tw-display);
font-size: var(--tw-h2);
color: var(--wp--preset--color--emerald); margin: 0 0 .5rem; letter-spacing: -.025em;
}
.tewar-community__sub { color: var(--wp--preset--color--muted); margin: 0; }
.tewar-community__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.tewar-community__cell { aspect-ratio: 1; display: block; background: var(--wp--preset--color--sand); }
.tewar-community__cell[data-tint="blush"] { background: var(--wp--preset--color--blush); }
.tewar-community__cell[data-tint="mint"] { background: var(--wp--preset--color--mint); }
.tewar-community__cell[data-tint="sky"] { background: var(--wp--preset--color--sky); }
.tewar-community__whatsapp {
aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; gap: .5rem;
padding: 1.75rem; text-decoration: none;
background: var(--wp--preset--color--emerald); color: var(--wp--preset--color--sand);
}
.tewar-community__whatsapp i { color: var(--wp--preset--color--gold); }
.tewar-community__wa-title { font-family: var(--tw-display); font-size: 1.4rem; line-height: 1.15; }
.tewar-community__wa-body { font-size: .8rem; line-height: 1.55; opacity: .85; }
.tewar-community__wa-cta { color: var(--wp--preset--color--gold); margin-top: .35rem; }
/* ---- Journal --------------------------------------------------------------- */
.tewar-journal { max-width: 1360px; margin-inline: auto; padding: var(--tw-s6) var(--tw-s3); }
.tewar-journal__head { margin-bottom: var(--tw-s4); }
.tewar-journal__title {
font-family: var(--tw-display);
font-size: var(--tw-h2);
color: var(--wp--preset--color--emerald); margin: 0 0 .5rem; letter-spacing: -.025em;
}
.tewar-journal__sub { color: var(--wp--preset--color--muted); margin: 0; max-width: 52ch; }
.tewar-journal__grid { display: grid; gap: var(--tw-s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: start; }
.tewar-journal__img { display: block; aspect-ratio: 4 / 3; background: var(--wp--preset--color--sand); margin-bottom: 1rem; }
.tewar-journal__img[data-tint="blush"] { background: var(--wp--preset--color--blush); }
.tewar-journal__img[data-tint="mint"] { background: var(--wp--preset--color--mint); }
.tewar-journal__meta { color: var(--wp--preset--color--gold-ink); margin: 0 0 .5rem; }
.tewar-journal__headline {
font-family: var(--tw-display); font-weight: 400;
font-size: 1.35rem; line-height: 1.25; color: var(--wp--preset--color--emerald); margin: 0;
}
/* The tilt is decoration, so it is opt-in for anyone who asked for less motion,
and it never applies on narrow screens where it would break the grid rhythm. */
@media (min-width: 782px) and (prefers-reduced-motion: no-preference) {
.tewar-journal__card--tilt { transform: rotate(-1.6deg); transition: transform .4s ease; }
.tewar-journal__card--tilt:hover { transform: rotate(0deg); }
}
/* ---- Listing page ---------------------------------------------------------- */
.tewar-listing { max-width: 1360px; margin-inline: auto; padding: 0 var(--tw-s3) var(--tw-s6); }
.tewar-listing__header { padding-block: var(--tw-s5) var(--tw-s4); text-align: center; }
.tewar-crumbs { color: var(--wp--preset--color--muted); margin-bottom: 1.5rem; font-size: .65rem; }
.tewar-crumbs a { color: var(--wp--preset--color--muted); }
.tewar-crumbs a:hover { color: var(--wp--preset--color--gold); }
.tewar-listing__title {
font-family: var(--tw-display);
font-size: var(--tw-h1);
color: var(--wp--preset--color--emerald);
letter-spacing: -.035em; line-height: 1.08; margin: 0;
}
.tewar-listing__story {
font-family: var(--tw-display);
font-size: var(--tw-lead);
color: var(--wp--preset--color--muted); margin: 1rem 0 0;
}
.tewar-listing__bar {
display: flex; align-items: center; justify-content: space-between; gap: 1rem;
padding: 1rem 0; margin-bottom: var(--tw-s3);
border-block: 1px solid var(--wp--preset--color--line);
}
.tewar-filter-toggle {
background: none; border: 0; cursor: pointer; padding: .35rem 0;
color: var(--wp--preset--color--emerald); display: inline-flex; align-items: center; gap: .5rem;
}
.tewar-filter-toggle i { color: var(--wp--preset--color--gold); }
.tewar-listing__count { color: var(--wp--preset--color--muted); }
.tewar-sort__select {
font-family: var(--tw-ui);
font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
color: var(--wp--preset--color--emerald);
background: transparent; border: 0; border-bottom: 1px solid var(--wp--preset--color--line);
padding: .35rem 1.5rem .35rem .25rem; cursor: pointer;
}
/* Both controls are the most-tapped thing on a listing page and sit well under the
44px touch minimum at the desktop padding above. */
@media (max-width: 781px) {
.tewar-filter-toggle,
.tewar-sort__select { padding-block: 1rem; }
}
.tewar-filters {
display: grid; gap: var(--tw-s3) var(--tw-s4);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
padding: var(--tw-s3) 0 var(--tw-s4);
border-bottom: 1px solid var(--wp--preset--color--line);
margin-bottom: var(--tw-s4);
}
.tewar-filters__heading { color: var(--wp--preset--color--gold-ink); margin: 0 0 .85rem; }
.tewar-filters ul { list-style: none; margin: 0; padding: 0; }
.tewar-filters li { margin-bottom: .5rem; }
.tewar-filters label { display: flex; align-items: center; gap: .6rem; font-size: .85rem; cursor: pointer; }
.tewar-filters input[type="checkbox"] { accent-color: var(--wp--preset--color--emerald); }
.tewar-filters__note { font-size: .72rem; line-height: 1.5; color: var(--wp--preset--color--muted); margin: .9rem 0 0; }
/* The styling note is genuine editorial, capped at a readable measure — this is the
place design-plan 3.2 warns against filling with 2,500 words of SEO filler. */
.tewar-listing__note {
max-width: 62ch; margin: var(--tw-s6) auto 0;
padding-top: var(--tw-s4); border-top: 1px solid var(--wp--preset--color--line);
}
.tewar-listing__note h2, .tewar-listing__note h3 {
font-family: var(--tw-display); font-weight: 400;
color: var(--wp--preset--color--emerald); letter-spacing: -.02em;
}
.tewar-listing__note h2 { font-size: var(--tw-h3); margin: 0 0 1rem; }
.tewar-listing__note h3 { font-size: 1.15rem; margin: 2rem 0 .75rem; }
.tewar-listing__note p { font-size: .925rem; line-height: 1.75; margin: 0 0 1rem; }
.screen-reader-text {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ---- Product page layout --------------------------------------------------- */
.tewar-pdp { max-width: 1360px; margin-inline: auto; padding: var(--tw-s3) var(--tw-s3) var(--tw-s6); }
.tewar-pdp .tewar-crumbs { text-align: left; margin-bottom: var(--tw-s3); }
.tewar-pdp__main { display: grid; gap: var(--tw-s5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
.tewar-pdp__main { grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); align-items: start; }
/* The buy box follows the gallery on long pages rather than scrolling away. */
.tewar-pdp__buy { position: sticky; top: 2rem; }
}
.tewar-pdp__gallery { display: grid; gap: 1rem; grid-template-columns: 76px 1fr; }
.tewar-pdp__rail { display: flex; flex-direction: column; gap: .75rem; }
.tewar-pdp__thumb {
aspect-ratio: 4 / 5; padding: 0; cursor: pointer; overflow: hidden;
background: var(--wp--preset--color--sand); border: 1px solid transparent;
display: grid; place-content: center;
font-size: .55rem; letter-spacing: .12em; text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.tewar-pdp__thumb.is-active { border-color: var(--wp--preset--color--gold); }
.tewar-pdp__thumb img { width: 100%; height: 100%; object-fit: cover; }
.tewar-pdp__stage { margin: 0; aspect-ratio: 4 / 5; background: var(--wp--preset--color--sand); overflow: hidden; }
.tewar-pdp__stage img { width: 100%; height: 100%; object-fit: cover; }
.tewar-pdp__title {
font-family: var(--tw-display); font-weight: 400;
font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
line-height: 1.08; letter-spacing: -.025em;
color: var(--wp--preset--color--emerald); margin: .35rem 0 1rem;
}
.tewar-pdp__rating { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.tewar-stars i { color: var(--wp--preset--color--gold); opacity: .35; margin-right: .1rem; }
.tewar-pdp__reviews { color: var(--wp--preset--color--muted); font-size: .65rem; }
.tewar-pdp__price { margin: 0 0 1.75rem; display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.tewar-pdp__amount {
font-family: var(--tw-display);
font-size: 1.85rem; color: var(--wp--preset--color--emerald); font-variant-numeric: tabular-nums;
}
.tewar-pdp__tax { font-size: .7rem; color: var(--wp--preset--color--muted); }
.tewar-pdp__label { color: var(--wp--preset--color--muted); margin: 0 0 .7rem; }
.tewar-pdp__label span { color: var(--wp--preset--color--emerald); }
.tewar-pdp__swatches { display: flex; gap: .6rem; margin-bottom: 1.5rem; }
.tewar-pdp__swatch {
width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
background: var(--sw); border: 1px solid var(--wp--preset--color--line);
box-shadow: 0 0 0 2px var(--wp--preset--color--ivory) inset;
position: relative; /* anchors the enlarged touch target below */
}
/* 34px reads right at this size, but is under the 44px touch minimum — grow the
hit area only, the same trick as the header icons above. */
.tewar-pdp__swatch::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
.tewar-pdp__swatch.is-active { outline: 1px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.tewar-pdp__stock { color: var(--wp--preset--color--gold-ink); margin: 0 0 1.25rem; }
.tewar-pdp__actions { display: grid; gap: .75rem; margin-bottom: 1.75rem; }
.tewar-btn--solid { background: var(--wp--preset--color--emerald); color: var(--wp--preset--color--ivory); }
.tewar-btn--solid:hover { background: var(--wp--preset--color--emerald-deep); border-color: var(--wp--preset--color--emerald-deep); }
.tewar-pdp__actions .tewar-btn { text-align: center; }
.tewar-pdp__pincode { padding: 1.25rem 0; border-block: 1px solid var(--wp--preset--color--line); margin-bottom: 1.5rem; }
.tewar-pdp__pincode label { display: block; color: var(--wp--preset--color--muted); margin-bottom: .7rem; }
.tewar-pdp__pinrow { display: flex; gap: .5rem; }
.tewar-pdp__pinrow input {
flex: 1; min-width: 0; padding: .7rem .8rem; font: inherit; font-size: .85rem;
border: 1px solid var(--wp--preset--color--line); background: transparent; border-radius: 0;
}
.tewar-pdp__pinrow input:focus-visible { outline: 1px solid var(--wp--preset--color--gold); outline-offset: -1px; }
.tewar-pdp__pinrow button {
padding: .7rem 1.1rem; cursor: pointer; background: transparent;
border: 1px solid var(--wp--preset--color--emerald); color: var(--wp--preset--color--emerald);
}
.tewar-pdp__pinnote { font-size: .72rem; color: var(--wp--preset--color--muted); margin: .8rem 0 0; line-height: 1.5; }
.tewar-pdp__returns { font-size: .75rem; color: var(--wp--preset--color--muted); margin: 0; }
.tewar-pdp__cross { margin-top: var(--tw-s6); }
.tewar-pdp__crosstitle {
font-family: var(--tw-display); font-weight: 400;
font-size: var(--tw-h3); color: var(--wp--preset--color--emerald);
margin: 0 0 var(--tw-s3); letter-spacing: -.02em;
}
@media (max-width: 600px) {
.tewar-pdp__gallery { grid-template-columns: 1fr; }
.tewar-pdp__rail { flex-direction: row; overflow-x: auto; }
.tewar-pdp__thumb { flex: 0 0 68px; }
}
/* ---- Cart, free shipping, checkout ------------------------------------------ */
.tewar-freeship { padding: 1rem 0 1.25rem; }
.tewar-freeship p { color: var(--wp--preset--color--emerald); margin: 0 0 .6rem; }
.tewar-freeship__track { display: block; height: 2px; background: var(--wp--preset--color--line); }
.tewar-freeship__fill { display: block; height: 100%; background: var(--wp--preset--color--gold); transition: width .4s ease; }
.tewar-prepaid { color: var(--wp--preset--color--muted); margin: 0 0 1rem; }
.tewar-prepaid i { color: var(--wp--preset--color--gold); }
/* WooCommerce's own cart/checkout tables, brought into the type system. */
.woocommerce table.shop_table { border: 0; border-radius: 0; }
.woocommerce table.shop_table th {
font-family: var(--tw-ui); font-size: .7rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted);
border-bottom: 1px solid var(--wp--preset--color--line);
}
.woocommerce table.shop_table td { border-top: 1px solid var(--wp--preset--color--line); }
.woocommerce .cart_totals h2,
.woocommerce-checkout h3 {
font-family: var(--tw-display); font-weight: 400;
color: var(--wp--preset--color--emerald); letter-spacing: -.02em;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
border: 1px solid var(--wp--preset--color--line); border-radius: 0;
padding: .8rem .9rem; font: inherit; font-size: .9rem; background: transparent;
}
.woocommerce form .form-row label {
font-family: var(--tw-ui); font-size: .68rem; font-weight: 600;
letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--muted);
}
/* ---- Editorial documents (care, size guide, FAQs, contact, policies) --------
One shared long-form treatment, capped at a readable measure. Anything still
awaiting the founders or a lawyer is flagged by [data-todo] so it is
impossible to publish a placeholder by accident. ---------------------------- */
.tewar-doc { max-width: 68ch; margin-inline: auto; padding: var(--tw-s5) var(--tw-s3) var(--tw-s6); }
.tewar-doc__header { margin-bottom: var(--tw-s5); }
.tewar-doc__eyebrow { color: var(--wp--preset--color--gold-ink); margin: 0 0 1rem; }
.tewar-doc__title {
font-family: var(--tw-display); font-weight: 400;
font-size: var(--tw-h1);
color: var(--wp--preset--color--emerald); letter-spacing: -.035em;
/* Not line-height:1 — Fraunces' descenders (g, y, j) then collide with the lede. */
line-height: 1.08; margin: 0;
}
.tewar-doc__lede {
font-family: var(--tw-display);
font-size: var(--tw-lead); line-height: 1.55;
color: var(--wp--preset--color--muted); margin: 1.75rem 0 0;
}
.tewar-doc h2 {
font-family: var(--tw-display); font-weight: 400;
font-size: var(--tw-h3); color: var(--wp--preset--color--emerald);
letter-spacing: -.02em; margin: var(--tw-s5) 0 1rem;
padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--line);
}
.tewar-doc h3 {
font-family: var(--tw-display); font-weight: 400; font-size: 1.2rem;
color: var(--wp--preset--color--emerald); margin: 1.75rem 0 .5rem;
}
.tewar-doc p { font-size: .95rem; line-height: 1.8; margin: 0 0 1.1rem; }
.tewar-doc__note { font-size: .8rem; color: var(--wp--preset--color--muted); }
.tewar-doc__list { list-style: none; margin: 0 0 1.25rem; padding: 0; }
.tewar-doc__list li { display: grid; grid-template-columns: 1.4rem 1fr; gap: .6rem; align-items: start; margin-bottom: .85rem; font-size: .95rem; line-height: 1.7; }
.tewar-doc__list i { color: var(--wp--preset--color--gold); margin-top: .45em; }
.tewar-doc__table { width: 100%; border-collapse: collapse; margin: 0 0 1.25rem; font-size: .9rem; }
.tewar-doc__table th {
text-align: left; vertical-align: top; width: 38%; padding: .8rem 1rem .8rem 0;
font-family: var(--tw-ui); font-size: .7rem; font-weight: 600;
letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--emerald);
border-top: 1px solid var(--wp--preset--color--line);
}
.tewar-doc__table td { padding: .8rem 0; line-height: 1.65; border-top: 1px solid var(--wp--preset--color--line); }
.tewar-doc .tewar-accordion { border-bottom: 1px solid var(--wp--preset--color--line); }
/* Unresolved content is visibly unresolved. Never let a placeholder pass for copy. */
[data-todo] { position: relative; }
.tewar-doc [data-todo] {
border-left: 2px solid var(--wp--preset--color--gold);
padding-left: 1rem;
background: color-mix(in srgb, var(--wp--preset--color--sand) 45%, transparent);
}
/* ---- Contact cards --------------------------------------------------------- */
.tewar-contact__grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); margin-bottom: var(--tw-s4); }
.tewar-contact__card {
display: flex; flex-direction: column; gap: .5rem; padding: 1.75rem 1.5rem;
border: 1px solid var(--wp--preset--color--line); text-decoration: none;
transition: border-color .25s ease;
}
.tewar-contact__card:hover { border-color: var(--wp--preset--color--gold); }
.tewar-contact__card i { color: var(--wp--preset--color--gold); }
.tewar-contact__title { font-family: var(--tw-display); font-size: 1.35rem; color: var(--wp--preset--color--emerald); line-height: 1.15; }
.tewar-contact__body { font-size: .82rem; line-height: 1.6; color: var(--wp--preset--color--muted); }
.tewar-contact__cta { color: var(--wp--preset--color--emerald); margin-top: auto; padding-top: .6rem; word-break: break-word; }
/* ---- Track order form ------------------------------------------------------- */
.tewar-track { display: grid; gap: 1.25rem; max-width: 26rem; margin-bottom: var(--tw-s4); }
.tewar-track__row { display: grid; gap: .55rem; }
.tewar-track label { color: var(--wp--preset--color--muted); }
.tewar-track input {
padding: .8rem .9rem; font: inherit; font-size: .9rem; background: transparent;
border: 1px solid var(--wp--preset--color--line); border-radius: 0;
}
.tewar-track input:focus-visible { outline: 1px solid var(--wp--preset--color--gold); outline-offset: -1px; }
.tewar-track .tewar-btn { justify-self: start; }
/* ---- Gifting hub ------------------------------------------------------------ */
.tewar-gift { max-width: 1360px; margin-inline: auto; padding: 0 var(--tw-s3) var(--tw-s5); }
.tewar-gift__header { text-align: center; padding-block: var(--tw-s6) var(--tw-s5); }
.tewar-gift__eyebrow { color: var(--wp--preset--color--gold-ink); margin: 0 0 1rem; }
.tewar-gift__title {
font-family: var(--tw-display); font-weight: 400;
font-size: var(--tw-h1); color: var(--wp--preset--color--emerald);
letter-spacing: -.035em; line-height: 1.08; margin: 0;
}
.tewar-gift__lede {
font-family: var(--tw-display);
font-size: var(--tw-lead); color: var(--wp--preset--color--muted);
max-width: 44ch; margin: 1.5rem auto 0; line-height: 1.55;
}
.tewar-gift__bands { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-bottom: var(--tw-s6); }
.tewar-gift__service {
display: grid; gap: var(--tw-s4); align-items: center;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
background: var(--wp--preset--color--blush);
padding: var(--tw-s5) var(--tw-s4);
margin-bottom: var(--tw-s6);
}
.tewar-gift__service p { font-size: .95rem; line-height: 1.75; margin: 0 0 1rem; }
.tewar-gift__subtitle {
font-family: var(--tw-display); font-weight: 400;
font-size: var(--tw-h3); color: var(--wp--preset--color--emerald);
letter-spacing: -.02em; margin: 0 0 1rem;
}
.tewar-gift__box {
aspect-ratio: 4 / 3; display: grid; place-content: center; text-align: center;
background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--muted);
font-size: .65rem; letter-spacing: .18em; text-transform: uppercase; line-height: 1.9;
}
/* ============================================================================
Site header
========================================================================= */
/* ---- Announcement bar: three messages, cross-fading on a pure-CSS timeline.
No JS, no layout shift, and it holds on the first message for anyone who has
asked for reduced motion. ------------------------------------------------ */
.tewar-announce {
background: var(--wp--preset--color--emerald);
color: var(--wp--preset--color--sand);
text-align: center;
overflow: hidden;
/* Must be positioned: the hero image is animated, and a transform creates a stacking
context that otherwise paints it over this static bar. */
position: relative;
z-index: 41;
}
.tewar-announce__track { position: relative; height: 2.4rem; }
.tewar-announce p {
position: absolute; inset: 0;
display: grid; place-content: center;
margin: 0; font-size: .65rem; opacity: 0;
animation: tewar-announce 15s infinite;
}
.tewar-announce p:nth-child(2) { animation-delay: 5s; }
.tewar-announce p:nth-child(3) { animation-delay: 10s; }
@keyframes tewar-announce {
0%, 2% { opacity: 0; }
6%, 30% { opacity: 1; }
34%,100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.tewar-announce p { animation: none; opacity: 0; }
.tewar-announce p:first-child { opacity: 1; }
}
/* ---- Header rows ----------------------------------------------------------- */
.tewar-header {
position: sticky; top: 0; z-index: 40;
background: var(--wp--preset--color--ivory);
border-bottom: 1px solid var(--wp--preset--color--line);
}
.tewar-header__inner {
max-width: 1360px; margin-inline: auto;
padding: 1rem var(--tw-s3);
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
}
.tewar-header__nav { display: flex; align-items: center; gap: 1.75rem; }
.tewar-header__nav--right { justify-content: flex-end; gap: 1.25rem; }
.tewar-header__link {
background: none; border: 0; padding: .35rem 0; cursor: pointer;
color: var(--wp--preset--color--emerald); text-decoration: none;
border-bottom: 1px solid transparent; transition: border-color .2s ease;
}
.tewar-header__link:hover { border-bottom-color: var(--wp--preset--color--gold); }
.tewar-header__logo { display: block; justify-self: center; }
.tewar-header__logo img { width: 150px; height: auto; display: block; }
.tewar-header__icon { display: inline-flex; position: relative; color: var(--wp--preset--color--emerald); }
/* Touch target: the icon itself is 20px, well under the 44px minimum. An invisible,
absolutely-positioned pseudo-element enlarges the hit area without growing the
icon's own box — the count badge below is positioned against that same box, and
padding here would drag the badge out of place. */
.tewar-header__icon::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
.tewar-header__icon svg {
width: 20px; height: 20px; fill: none;
stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
.tewar-header__icon:hover { color: var(--wp--preset--color--gold); }
.tewar-header__count {
position: absolute; top: -6px; right: -8px; min-width: 15px; height: 15px;
border-radius: 999px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--emerald);
font-size: .55rem; font-weight: 700; display: grid; place-content: center; padding: 0 3px;
}
/* ---- Mega menu ------------------------------------------------------------- */
.tewar-mega { position: static; }
.tewar-mega__panel {
position: absolute; left: 0; right: 0; top: 100%;
background: var(--wp--preset--color--ivory);
border-bottom: 1px solid var(--wp--preset--color--line);
box-shadow: 0 18px 40px -30px rgb(14 59 46 / .45);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.tewar-mega:hover .tewar-mega__panel,
.tewar-mega:focus-within .tewar-mega__panel { opacity: 1; visibility: visible; transform: none; }
.tewar-mega__inner {
max-width: 1360px; margin-inline: auto;
padding: var(--tw-s4) var(--tw-s3);
display: grid; gap: var(--tw-s4);
grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(200px, .8fr);
}
.tewar-mega__heading { color: var(--wp--preset--color--gold-ink); margin: 0 0 1rem; }
.tewar-mega__col ul { list-style: none; margin: 0; padding: 0; }
.tewar-mega__col li { margin-bottom: .55rem; }
.tewar-mega__col a { font-size: .875rem; color: var(--wp--preset--color--ink); text-decoration: none; }
.tewar-mega__col a:hover { color: var(--wp--preset--color--gold); }
.tewar-mega__col em { font-style: normal; color: var(--wp--preset--color--muted); font-size: .78rem; }
.tewar-mega__tile { display: block; text-decoration: none; }
.tewar-mega__tileimg {
display: block; aspect-ratio: 4 / 5; margin-bottom: .7rem;
background: var(--wp--preset--color--blush) center / cover no-repeat;
}
.tewar-mega__tilelabel { color: var(--wp--preset--color--gold-ink); font-size: .65rem; }
/* ---- Mobile tab bar --------------------------------------------------------- */
.tewar-tabbar { display: none; }
@media (max-width: 900px) {
.tewar-header__nav--left { display: none; }
.tewar-header__inner { grid-template-columns: 1fr auto 1fr; padding-inline: 1rem; }
.tewar-header__logo img { width: 118px; }
.tewar-tabbar {
position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
display: grid; grid-template-columns: repeat(5, 1fr);
background: var(--wp--preset--color--ivory);
border-top: 1px solid var(--wp--preset--color--line);
padding-bottom: env(safe-area-inset-bottom);
}
.tewar-tabbar a {
display: grid; justify-items: center; gap: .25rem; padding: .6rem 0 .5rem;
color: var(--wp--preset--color--emerald); text-decoration: none;
font-size: .58rem; letter-spacing: .1em; text-transform: uppercase;
}
.tewar-tabbar svg {
width: 19px; height: 19px; fill: none; stroke: currentColor;
stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round;
}
/* Keep the tab bar from covering the end of the page. */
body { padding-bottom: 3.9rem; }
}
/* ============================================================================
Imagery in editorial slots
---------------------------------------------------------------------------
Every [data-placeholder="unsplash"] image is stock, standing in until the
founders' own photography exists. They appear ONLY in mood and editorial
slots — never as product imagery, because a stock photograph of someone
else's jewellery presented as a Tewar product would be a lie to the customer.
Find them all with: grep -rn 'data-placeholder' wordpress/themes/
========================================================================= */
.tewar-tile__img,
.tewar-community__cell,
.tewar-journal__img,
.tewar-editorial__image,
.tewar-gift__box,
.tewar-mega__tileimg,
.tewar-hero__image { overflow: hidden; }
.tewar-tile__img img,
.tewar-community__cell img,
.tewar-journal__img img,
.tewar-editorial__image img,
.tewar-gift__box img,
.tewar-mega__tileimg img,
.tewar-hero__image img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.tewar-gift__box { padding: 0; }
/* ============================================================================
Motion — quiet, slow, and never load-bearing
---------------------------------------------------------------------------
The reveal state is scoped to .js-reveal, which the script adds to
itself. No script means no hidden state: the page renders visible. This is
why the headline never waits on JavaScript.
========================================================================= */
@media (prefers-reduced-motion: no-preference) {
.js-reveal [data-reveal] {
opacity: 0;
transform: translateY(18px);
/* Long, decelerating — luxury reads as unhurried, not as a bounce. */
transition: opacity .9s cubic-bezier(.22,.61,.36,1),
transform .9s cubic-bezier(.22,.61,.36,1);
will-change: opacity, transform;
}
.js-reveal [data-reveal].is-in { opacity: 1; transform: none; }
/* Images breathe on hover — slow enough to read as material, not as a UI event. */
.tewar-tile__img img,
.tewar-journal__img img,
.tewar-community__cell img,
.tewar-card__img {
transition: transform 1.2s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
}
.tewar-tile:hover .tewar-tile__img img,
.tewar-journal__card:hover .tewar-journal__img img,
.tewar-community__cell:hover img { transform: scale(1.045); }
@media (hover: hover) {
.tewar-card__link:hover .tewar-card__img { transform: scale(1.04); }
}
/* Hero drifts almost imperceptibly. 24s, and it never loops back sharply. */
.tewar-hero__image img { animation: tewar-drift 24s ease-in-out infinite alternate; }
@keyframes tewar-drift {
from { transform: scale(1) translate3d(0, 0, 0); }
to { transform: scale(1.055) translate3d(0, -1.2%, 0); }
}
/* Ghost buttons fill from the left rather than snapping. */
.tewar-btn { position: relative; overflow: hidden; z-index: 0; }
.tewar-btn::after {
content: ""; position: absolute; inset: 0; z-index: -1;
background: var(--wp--preset--color--emerald);
transform: scaleX(0); transform-origin: left;
transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.tewar-btn:hover::after { transform: scaleX(1); }
/* Nav links: a gold hairline sweeps in. */
.tewar-header__link { position: relative; border-bottom-color: transparent !important; }
.tewar-header__link::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: var(--wp--preset--color--gold);
transform: scaleX(0); transform-origin: left;
transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.tewar-header__link:hover::after,
.tewar-header__link:focus-visible::after { transform: scaleX(1); }
.tewar-band, .tewar-contact__card { transition: border-color .4s ease, background-color .4s ease, transform .5s cubic-bezier(.22,.61,.36,1); }
.tewar-band:hover, .tewar-contact__card:hover { transform: translateY(-3px); }
}
/* Header condenses on scroll — a hairline shadow, nothing more. */
.tewar-header { transition: box-shadow .4s ease, padding .4s ease; }
.tewar-header.is-scrolled { box-shadow: 0 10px 30px -26px rgb(14 59 46 / .5); }
.tewar-header.is-scrolled .tewar-header__inner { padding-block: .6rem; }
.tewar-header__inner { transition: padding .4s ease; }
/* Focus is always visible, and it is gold — the accent doing real work. */
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 2px solid var(--wp--preset--color--gold);
outline-offset: 3px;
}
/* Hero copy column — padding lives here so it can respond to viewport. */
.tewar-hero__copy {
padding: var(--tw-s4) clamp(1.25rem, 4vw, var(--tw-s5));
}
/* ---- Craft traditions: asymmetric mosaic + hairline label column -------------
One tall image and two shorter ones under it, with the labels set against a
ruled column. The rules are the same hairlines used everywhere else — this
section is where they carry the most weight. ------------------------------- */
.tewar-craft { max-width: 1360px; margin-inline: auto; padding: var(--tw-s6) var(--tw-s3); }
.tewar-craft__inner {
display: grid;
gap: var(--tw-s5);
grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
align-items: start;
}
.tewar-craft__mosaic {
display: grid;
gap: .9rem;
grid-template-columns: 1fr 1fr;
}
.tewar-craft__lead { grid-column: 1 / -1; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; }
.tewar-craft__small { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.tewar-craft figure img {
width: 100%; height: 100%; object-fit: cover; display: block;
background: var(--wp--preset--color--sand);
}
.tewar-craft__aside { padding-top: .5rem; }
.tewar-craft__list { margin: 0; }
.tewar-craft__row {
padding: 1.15rem 0;
border-top: 1px solid var(--wp--preset--color--line);
}
.tewar-craft__row:first-child { border-top: 0; padding-top: 0; }
.tewar-craft__row dt { color: var(--wp--preset--color--emerald); margin-bottom: .4rem; }
.tewar-craft__row dd { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--wp--preset--color--muted); }
.tewar-craft__statement {
font-family: var(--tw-display);
font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem);
line-height: 1.45;
color: var(--wp--preset--color--emerald);
margin: var(--tw-s5) 0 0;
padding-top: var(--tw-s3);
border-top: 1px solid var(--wp--preset--color--line);
}
@media (prefers-reduced-motion: no-preference) {
.tewar-craft figure img { transition: transform 1.4s cubic-bezier(.22,.61,.36,1); }
.tewar-craft figure:hover img { transform: scale(1.04); }
}
@media (max-width: 900px) {
.tewar-craft__inner { grid-template-columns: 1fr; gap: var(--tw-s4); }
.tewar-craft__lead { aspect-ratio: 4 / 3; }
.tewar-craft__statement { margin-top: var(--tw-s4); }
}
/* ============================================================================
Full-bleed video hero
---------------------------------------------------------------------------
Cinematic banner. The rule that shapes everything here: the poster is the LCP
element, not the video. The video only ever enhances a frame that has already
painted — and on phones it never loads at all.
========================================================================= */
.tewar-vhero {
position: relative;
isolation: isolate;
min-height: min(88svh, 860px);
display: grid;
align-items: end;
overflow: hidden;
background: #0a0a0a;
}
.tewar-vhero__media {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
/* Scrim: dark at the bottom-left where the type sits, clear at the top so the
photograph is still the subject. Two stops, not a flat overlay — a flat wash
greys out the gold, which is the whole point of the image. */
.tewar-vhero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to top, rgb(8 8 8 / .82) 0%, rgb(8 8 8 / .38) 38%, rgb(8 8 8 / 0) 68%),
linear-gradient(to right, rgb(8 8 8 / .5) 0%, rgb(8 8 8 / 0) 55%);
}
.tewar-vhero__inner {
position: relative;
max-width: 1360px;
margin-inline: auto;
width: 100%;
padding: var(--tw-s6) var(--tw-s3) var(--tw-s5);
}
.tewar-vhero__eyebrow { color: var(--wp--preset--color--gold-soft); margin: 0 0 1.25rem; }
.tewar-vhero__title {
font-family: var(--tw-display);
font-weight: 400;
font-size: var(--tw-hero);
line-height: 1.02;
letter-spacing: -.035em;
color: var(--wp--preset--color--ivory);
margin: 0 0 1rem;
max-width: 14ch;
}
.tewar-vhero__title em { font-style: italic; color: var(--wp--preset--color--gold-soft); }
.tewar-vhero__sub {
font-family: var(--tw-display);
font-style: italic;
font-size: var(--tw-lead);
color: rgb(247 245 241 / .82);
max-width: 36ch;
margin: 0 0 2rem;
}
.tewar-vhero__cta { display: flex; flex-wrap: wrap; gap: .85rem; margin: 0; }
.tewar-btn--onDark { color: var(--wp--preset--color--ivory); border-color: rgb(247 245 241 / .55); }
.tewar-btn--onDark:hover { color: var(--wp--preset--color--emerald); border-color: var(--wp--preset--color--gold); }
.tewar-btn--onDark::after { background: var(--wp--preset--color--gold); }
.tewar-btn--ghost { border-color: rgb(247 245 241 / .28); }
.tewar-vhero__cue {
position: absolute; left: 50%; bottom: 1.25rem; transform: translateX(-50%);
color: var(--wp--preset--color--gold); z-index: 1;
}
@media (prefers-reduced-motion: no-preference) {
.tewar-vhero__cue i { animation: tewar-cue 2.8s ease-in-out infinite; }
@keyframes tewar-cue {
0%, 100% { opacity: .35; transform: translateY(0); }
50% { opacity: 1; transform: translateY(5px); }
}
}
/* ---- Phones: poster only, shorter, and the type stops fighting the image ----
No video element is ever fetched here (preload="none" plus the script only
attaching sources above 900px), so the hero costs one image. */
@media (max-width: 900px) {
.tewar-vhero { min-height: min(74svh, 620px); }
.tewar-vhero__inner { padding: var(--tw-s5) 1.25rem var(--tw-s4); }
.tewar-vhero__title { max-width: 100%; }
.tewar-vhero__sub { max-width: 30ch; margin-bottom: 1.5rem; }
.tewar-vhero__cta { flex-direction: column; align-items: flex-start; }
.tewar-vhero__cta .tewar-btn { width: 100%; text-align: center; }
.tewar-vhero__cue { display: none; }
/* Stronger bottom scrim: small screens crop the image tighter, so the type
needs more help than it does on desktop. */
.tewar-vhero__scrim {
background: linear-gradient(to top, rgb(8 8 8 / .88) 0%, rgb(8 8 8 / .45) 45%, rgb(8 8 8 / .08) 100%);
}
}
/* ============================================================================
Hero v3 — portrait in a rounded frame with floating detail cards
---------------------------------------------------------------------------
The cards overlap the image on desktop and fall below it on phones. They are
never absolutely positioned on small screens: a card floating over a face at
390px covers the subject and the copy becomes unreadable over skin tones.
========================================================================= */
.tewar-hero3 { padding: var(--tw-s3) var(--tw-s3) 0; }
.tewar-hero3__frame {
position: relative;
max-width: 1500px;
margin-inline: auto;
border-radius: 14px;
overflow: hidden;
background: var(--wp--preset--color--sand);
aspect-ratio: 16 / 8;
min-height: 460px;
}
.tewar-hero3__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tewar-hero3__scrim {
position: absolute; inset: 0;
background: linear-gradient(to top, rgb(30 22 12 / .34) 0%, rgb(30 22 12 / .06) 34%, transparent 62%);
}
.tewar-hero3__lede { position: absolute; top: clamp(1.5rem, 4vw, 3rem); left: clamp(1.5rem, 4vw, 3.25rem); }
.tewar-hero3__eyebrow { color: var(--wp--preset--color--ivory); opacity: .9; margin: 0 0 .6rem; }
.tewar-hero3__title {
font-family: var(--tw-display);
font-weight: 400;
font-size: clamp(2rem, 1.2rem + 3vw, 4rem);
line-height: 1.04; letter-spacing: -.035em;
color: var(--wp--preset--color--ivory);
margin: 0; text-shadow: 0 2px 24px rgb(20 14 8 / .35);
}
.tewar-hero3__title em { font-style: italic; color: var(--wp--preset--color--gold-soft); }
.tewar-hero3__card {
position: absolute;
background: rgb(255 255 255 / .94);
backdrop-filter: blur(6px);
border-radius: 10px;
padding: 1rem;
width: min(300px, 34%);
box-shadow: 0 20px 50px -30px rgb(30 22 12 / .55);
}
.tewar-hero3__card--left { left: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem); }
.tewar-hero3__card--right {
right: clamp(1rem, 3vw, 2.5rem); bottom: clamp(1rem, 3vw, 2.5rem);
width: min(420px, 44%); display: flex; gap: 1rem; align-items: center;
}
.tewar-hero3__thumb { display: block; border-radius: 6px; overflow: hidden; flex: 0 0 auto; }
.tewar-hero3__card--left .tewar-hero3__thumb { aspect-ratio: 4 / 3; margin-bottom: .85rem; }
.tewar-hero3__card--right .tewar-hero3__thumb { width: 118px; aspect-ratio: 1; }
.tewar-hero3__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tewar-hero3__cardtitle {
font-family: var(--tw-display); font-weight: 400;
font-size: 1.1rem; line-height: 1.2; letter-spacing: -.01em;
color: var(--wp--preset--color--emerald); margin: 0 0 .35rem;
}
.tewar-hero3__cardbody { font-size: .78rem; line-height: 1.55; color: var(--wp--preset--color--muted); margin: 0; }
.tewar-hero3__link {
display: inline-block; margin-top: .6rem;
color: var(--wp--preset--color--gold-ink);
text-decoration: underline; text-underline-offset: 3px;
}
@media (max-width: 860px) {
/* Cards drop out of the frame and stack beneath it. Overlaying a face at phone
width hides the subject and puts body copy on top of skin. */
.tewar-hero3__frame { aspect-ratio: 4 / 5; min-height: 0; border-radius: 10px; }
.tewar-hero3__card { position: static; width: auto; box-shadow: none; background: transparent; backdrop-filter: none; padding: 0; }
.tewar-hero3__cards { display: grid; gap: 1.5rem; }
.tewar-hero3 { padding-bottom: var(--tw-s3); }
}
/* The card wrapper is inert on desktop (cards are absolutely positioned) and
becomes the stacking container on phones. */
.tewar-hero3__cards { display: contents; }
@media (max-width: 860px) {
.tewar-hero3__cards {
display: grid; gap: 1.75rem;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
max-width: 1500px; margin: 1.75rem auto 0;
}
.tewar-hero3__card--right { flex-direction: row; align-items: flex-start; }
}
/* ============================================================================
Shringaar — the showroom
========================================================================= */
.tewar-shringaar,
.tewar-collindex,
.tewar-jindex,
.tewar-look-page { max-width: 1360px; margin-inline: auto; padding: 0 var(--tw-s3) var(--tw-s6); }
.tewar-shringaar__hero,
.tewar-collindex__header,
.tewar-jindex__header { text-align: center; padding-block: var(--tw-s6) var(--tw-s5); }
.tewar-shringaar__lede,
.tewar-collindex__lede {
font-family: var(--tw-display);
font-size: var(--tw-lead); line-height: 1.55;
color: var(--wp--preset--color--muted); max-width: 46ch; margin: 1.5rem auto 0;
}
.tewar-shringaar__h2 {
font-family: var(--tw-display); font-weight: 400;
font-size: var(--tw-h3); color: var(--wp--preset--color--emerald);
letter-spacing: -.02em; margin: 0 0 .6rem;
}
.tewar-shringaar__sub { color: var(--wp--preset--color--muted); margin: 0 0 var(--tw-s3); max-width: 56ch; }
/* Festival chips — the real entry point in an Indian shopping year. */
.tewar-festivals { padding-block: var(--tw-s3) var(--tw-s5); }
.tewar-festivals__row { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tewar-fest {
display: grid; gap: .3rem; padding: 1.1rem 1.15rem; text-decoration: none;
border: 1px solid var(--wp--preset--color--line);
transition: border-color .35s ease, background-color .35s ease, transform .45s cubic-bezier(.22,.61,.36,1);
}
.tewar-fest:hover { border-color: var(--wp--preset--color--gold); background: #fff; transform: translateY(-2px); }
.tewar-fest__name { font-family: var(--tw-display); font-size: 1.2rem; color: var(--wp--preset--color--emerald); line-height: 1.1; }
.tewar-fest__note { font-size: .72rem; color: var(--wp--preset--color--muted); }
/* Four looks */
.tewar-looks { display: grid; gap: var(--tw-s4); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.tewar-look { display: block; text-decoration: none; }
.tewar-look__img { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--sand); }
.tewar-look__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tewar-look__tag {
position: absolute; top: .85rem; left: .85rem;
background: var(--wp--preset--color--ivory); color: var(--wp--preset--color--emerald);
padding: .35rem .65rem; font-size: .58rem;
}
.tewar-look__body { display: block; padding-top: 1rem; }
.tewar-look__name { display: block; font-family: var(--tw-display); font-size: 1.6rem; line-height: 1.1; color: var(--wp--preset--color--emerald); }
.tewar-look__desc { display: block; font-size: .85rem; line-height: 1.65; color: var(--wp--preset--color--muted); margin: .5rem 0 .7rem; }
.tewar-look__meta { display: block; color: var(--wp--preset--color--gold-ink); font-size: .62rem; }
@media (prefers-reduced-motion: no-preference) {
.tewar-look__img img { transition: transform 1.2s cubic-bezier(.22,.61,.36,1); }
.tewar-look:hover .tewar-look__img img { transform: scale(1.05); }
}
/* Reading list */
.tewar-shringaar__reading { margin-top: var(--tw-s6); padding-top: var(--tw-s3); border-top: 1px solid var(--wp--preset--color--line); }
.tewar-shringaar__links { display: grid; gap: 0; }
.tewar-shringaar__links a {
display: grid; grid-template-columns: 7rem 1fr; gap: 1rem; align-items: baseline;
padding: 1rem 0; border-bottom: 1px solid var(--wp--preset--color--line);
text-decoration: none; font-size: .95rem; color: var(--wp--preset--color--emerald);
}
.tewar-shringaar__links a:hover { color: var(--wp--preset--color--gold-ink); }
.tewar-shringaar__links .chrome { color: var(--wp--preset--color--gold-ink); font-size: .62rem; }
/* Single look page */
.tewar-look-page__head { display: grid; gap: var(--tw-s4); grid-template-columns: 1fr 1fr; align-items: center; padding-block: var(--tw-s4) var(--tw-s5); }
.tewar-look-page__lede { font-size: 1rem; line-height: 1.75; color: var(--wp--preset--color--muted); max-width: 46ch; margin-top: 1.25rem; }
.tewar-look-page__hero { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--sand); }
.tewar-look-page__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tewar-look-page__set { padding-block: var(--tw-s4) var(--tw-s2); }
.tewar-styleit { display: grid; gap: var(--tw-s5); grid-template-columns: 1fr 1fr; padding-block: var(--tw-s5); }
.tewar-styleit__off i { opacity: .45; }
@media (max-width: 860px) {
.tewar-look-page__head, .tewar-styleit { grid-template-columns: 1fr; }
}
/* ---- Collections index: alternating editorial rows ------------------------- */
.tewar-collindex__grid { display: grid; gap: var(--tw-s5); }
.tewar-collrow { display: grid; gap: var(--tw-s4); grid-template-columns: 1fr 1fr; align-items: center; text-decoration: none; }
.tewar-collrow:nth-child(even) .tewar-collrow__img { order: 2; }
.tewar-collrow__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--sand); }
.tewar-collrow__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tewar-collrow__body { display: block; }
.tewar-collrow__name { display: block; font-family: var(--tw-display); font-size: var(--tw-h2); line-height: 1.05; letter-spacing: -.03em; color: var(--wp--preset--color--emerald); }
.tewar-collrow__story { display: block; font-size: .95rem; line-height: 1.75; color: var(--wp--preset--color--muted); margin: 1rem 0 1.25rem; max-width: 44ch; }
.tewar-collrow__cta { color: var(--wp--preset--color--gold-ink); }
@media (prefers-reduced-motion: no-preference) {
.tewar-collrow__img img { transition: transform 1.3s cubic-bezier(.22,.61,.36,1); }
.tewar-collrow:hover .tewar-collrow__img img { transform: scale(1.045); }
}
@media (max-width: 860px) {
.tewar-collrow { grid-template-columns: 1fr; gap: 1.25rem; }
.tewar-collrow:nth-child(even) .tewar-collrow__img { order: 0; }
}
/* ---- Journal index --------------------------------------------------------- */
.tewar-jlead { display: grid; gap: var(--tw-s4); grid-template-columns: 1.2fr 1fr; align-items: center; text-decoration: none; margin-bottom: var(--tw-s6); }
.tewar-jlead__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--wp--preset--color--sand); }
.tewar-jlead__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tewar-jlead__meta { display: block; color: var(--wp--preset--color--gold-ink); margin-bottom: .75rem; }
.tewar-jlead__title { display: block; font-family: var(--tw-display); font-size: var(--tw-h2); line-height: 1.1; letter-spacing: -.025em; color: var(--wp--preset--color--emerald); }
.tewar-jlead__excerpt { display: block; font-size: .95rem; line-height: 1.75; color: var(--wp--preset--color--muted); margin: 1rem 0 1.25rem; max-width: 46ch; }
.tewar-jgrid { display: grid; gap: var(--tw-s4); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
@media (max-width: 860px) { .tewar-jlead { grid-template-columns: 1fr; } }
/* ---- Journal post ---------------------------------------------------------- */
.tewar-post { max-width: 1360px; margin-inline: auto; padding: var(--tw-s3) var(--tw-s3) var(--tw-s6); }
.tewar-post__header { max-width: 46rem; margin: 0 auto var(--tw-s4); text-align: center; }
.tewar-post__header .tewar-crumbs { text-align: center; }
.tewar-post__hero { margin: 0 0 var(--tw-s5); aspect-ratio: 21 / 9; overflow: hidden; background: var(--wp--preset--color--sand); }
.tewar-post__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 62ch is the reading measure. Long-form that runs the full 1360px is unreadable
however good the type is. */
.tewar-post__body { max-width: 62ch; margin-inline: auto; }
.tewar-post__lede { font-family: var(--tw-display); font-size: 1.3rem; line-height: 1.55; color: var(--wp--preset--color--emerald); margin-bottom: 2rem; }
.tewar-post__body h2 {
font-family: var(--tw-display); font-weight: 400;
font-size: 1.5rem; color: var(--wp--preset--color--emerald);
letter-spacing: -.02em; margin: 2.5rem 0 .75rem;
}
.tewar-post__body p { font-size: 1rem; line-height: 1.85; margin: 0 0 1.25rem; }
.tewar-post__note { font-size: .875rem; color: var(--wp--preset--color--muted); font-style: italic; }
.tewar-post__cross { max-width: 1360px; margin: var(--tw-s6) auto 0; }
/* ---- Wear it together: rail beside a full-bleed worn shot -------------------
The rail is a native scroll container with snap points. Arrows are an
enhancement on top; swipe, trackpad and keyboard all work without them. --- */
.tewar-together {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
gap: 0;
margin-block: var(--tw-s6);
}
.tewar-together__panel {
padding: var(--tw-s5) clamp(1.25rem, 4vw, var(--tw-s5));
display: flex; flex-direction: column; justify-content: center;
background: var(--wp--preset--color--sand);
}
.tewar-together__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; margin-bottom: var(--tw-s3); }
.tewar-together__sub { color: var(--wp--preset--color--muted); font-size: .9rem; max-width: 40ch; margin: 0; }
.tewar-together__nav { display: flex; gap: .5rem; flex: 0 0 auto; }
.tewar-together__arrow {
width: 38px; height: 38px; display: grid; place-content: center; cursor: pointer;
background: transparent; border: 1px solid var(--wp--preset--color--line);
color: var(--wp--preset--color--emerald);
transition: border-color .3s ease, background-color .3s ease;
position: relative; /* anchors the enlarged touch target below */
}
/* 38px is close but still short of the 44px touch minimum. */
.tewar-together__arrow::before {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 44px; height: 44px;
transform: translate(-50%, -50%);
}
.tewar-together__arrow:hover { border-color: var(--wp--preset--color--gold); background: var(--wp--preset--color--ivory); }
.tewar-together__arrow svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.tewar-together__arrow[disabled] { opacity: .3; cursor: default; }
.tewar-together__rail { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tewar-together__rail::-webkit-scrollbar { display: none; }
.tewar-together__rail .tewar-grid,
.tewar-together__rail ul.products {
display: flex; gap: 1rem; padding-bottom: .5rem;
}
.tewar-together__rail .tewar-card { flex: 0 0 clamp(150px, 42%, 210px); scroll-snap-align: start; }
.tewar-together__cta { margin: var(--tw-s3) 0 0; }
.tewar-together__shot { position: relative; margin: 0; overflow: hidden; min-height: 460px; background: var(--wp--preset--color--sand); }
.tewar-together__shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tewar-together__shot figcaption {
position: absolute; left: 1.5rem; bottom: 1.5rem;
color: var(--wp--preset--color--ivory); text-shadow: 0 1px 14px rgb(20 14 8 / .6);
}
@media (max-width: 900px) {
.tewar-together { grid-template-columns: 1fr; }
.tewar-together__shot { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
.tewar-together__panel { padding-block: var(--tw-s4); }
}
/* ============================================================================
Core block layout — belt and braces
---------------------------------------------------------------------------
The patterns use core columns for layout. WordPress normally supplies this CSS,
but only when it has actually parsed blocks on the page. These declarations mean
the layout no longer *depends* on that happening: if wp-block-library is missing,
dequeued by an optimisation plugin, or the block parser is bypassed, the grid
still holds. Cheap insurance against a failure that looks catastrophic — one
image filling the whole viewport — and is invisible in local preview.
========================================================================= */
.wp-block-columns {
display: flex;
flex-wrap: wrap;
align-items: normal;
gap: var(--tw-s3); /* the block-editor spacing presets resolve to nothing here */
box-sizing: border-box;
}
.wp-block-columns.are-vertically-aligned-center { align-items: center; }
.wp-block-column {
flex-grow: 1;
min-width: 0;
flex-basis: 100%;
box-sizing: border-box;
}
@media (min-width: 782px) {
.wp-block-column { flex-basis: 0; flex-grow: 1; }
.wp-block-column[style*="flex-basis"] { flex-grow: 0; }
}
.wp-block-group { box-sizing: border-box; }
.wp-block-heading.has-text-align-center { text-align: center; }
.wp-block-image { margin: 0; }
.wp-block-image img { max-width: 100%; height: auto; display: block; }
.has-mint-background-color { background-color: var(--wp--preset--color--mint); }
.has-blush-background-color { background-color: var(--wp--preset--color--blush); }
.has-sky-background-color { background-color: var(--wp--preset--color--sky); }
.has-sand-background-color { background-color: var(--wp--preset--color--sand); }
.has-ivory-background-color { background-color: var(--wp--preset--color--ivory); }
.has-emerald-background-color { background-color: var(--wp--preset--color--emerald); }
.has-background { background-clip: padding-box; }
/* Images inside our own tiles are always contained by their frame, whatever the
surrounding layout does. This is the specific failure that shipped. */
.tewar-tile__img,
.tewar-community__cell,
.tewar-journal__img,
.tewar-collrow__img,
.tewar-look__img,
.tewar-jlead__img { display: block; position: relative; overflow: hidden; }
.tewar-tile__img { aspect-ratio: 3 / 4; }
.tewar-community__cell { aspect-ratio: 1; }
.tewar-journal__img { aspect-ratio: 4 / 3; }
.tewar-tile__img > img,
.tewar-community__cell > img,
.tewar-journal__img > img,
.tewar-collrow__img > img,
.tewar-look__img > img,
.tewar-jlead__img > img {
position: absolute; inset: 0;
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ============================================================================
Headings — beating the parent theme
---------------------------------------------------------------------------
theme.json's elements.heading styles lose to Blocksy's own heading CSS, which
is more specific. Core `wp:heading` blocks were rendering in Blocksy's sans and
navy while our own classed headings were correct — an inconsistency that reads
as a broken page rather than a styling preference. Stated explicitly here so
every heading on the site comes from one place.
========================================================================= */
/* Scoped to CORE block headings and post content only.
This previously included `#main-container h1..h4`, an ID-scoped blanket that
captured every heading on the site — including the hero titles, which turned
emerald on a dark photograph. Our own components carry their own classes and
set their own colour; they must not be swept up by a catch-all. */
.entry-content :where(h1, h2, h3, h4),
:where(h1, h2, h3, h4).wp-block-heading {
font-family: var(--tw-display);
font-weight: 400;
line-height: 1.08;
letter-spacing: -.025em;
color: var(--wp--preset--color--emerald);
}
h1.wp-block-heading { font-size: var(--tw-h1); }
h2.wp-block-heading { font-size: var(--tw-h2); }
h3.wp-block-heading { font-size: var(--tw-h3); }
/* Blocksy sets its own body font stack; ours must win for body copy too. */
.entry-content :where(p, li, dd),
:where(p, li).wp-block-paragraph { font-family: var(--tw-ui); }
/* WooCommerce shortcode output inside our rails/grids should use our card grid,
not Woo's float-based columns. */
.woocommerce ul.products,
.woocommerce-page ul.products {
display: grid;
/* minmax(0,…) not plain 1fr: a bare 1fr floors at min-content, so one long product
title stretches its track and every other card in the row shrinks to compensate. */
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tw-s4) 1.25rem;
margin: 0;
padding: 0;
list-style: none;
}
@media (min-width: 782px) {
.woocommerce ul.products,
.woocommerce-page ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
width: auto !important;
float: none !important;
margin: 0 !important;
clear: none !important;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after { display: none; }
/* The [products] shortcode takes class="tewar-grid", but WooCommerce puts that class on the
wrapper it prints -- -- not on the
inside it. So .tewar-grid turned the *wrapper* into a 4-track grid whose only child was
the list: track 1 blew out to the list's min-content width (670px of a 1312px shelf) and
the remaining three tracks sat empty, eating the right half of every product section and
squeezing the cards into mismatched widths. The is the real grid; the wrapper is not.
Only inc/product-page.php puts .tewar-grid on a genuine , which this leaves alone. */
.woocommerce.tewar-grid { display: block; }
/* ---- Category archive banner ------------------------------------------------ */
.tewar-ahero {
position: relative;
isolation: isolate;
display: grid;
align-items: end;
min-height: min(46svh, 420px);
overflow: hidden;
background: #0a0a0a;
margin-bottom: var(--tw-s4);
}
.tewar-ahero__img {
position: absolute; inset: 0; z-index: -2;
width: 100%; height: 100%; object-fit: cover; display: block;
}
.tewar-ahero__scrim {
position: absolute; inset: 0; z-index: -1;
background:
linear-gradient(to top, rgb(8 8 8 / .78) 0%, rgb(8 8 8 / .3) 45%, rgb(8 8 8 / .05) 75%),
linear-gradient(to right, rgb(8 8 8 / .45) 0%, rgb(8 8 8 / 0) 60%);
}
.tewar-ahero__inner {
position: relative;
max-width: 1360px; margin-inline: auto; width: 100%;
padding: var(--tw-s5) var(--tw-s3) var(--tw-s4);
}
.tewar-ahero .tewar-crumbs,
.tewar-ahero .tewar-crumbs a { color: rgb(247 245 241 / .72); }
.tewar-ahero .tewar-crumbs a:hover { color: var(--wp--preset--color--gold-soft); }
.tewar-ahero__title {
font-family: var(--tw-display);
font-weight: 400;
font-size: var(--tw-h1);
line-height: 1.05;
letter-spacing: -.035em;
color: var(--wp--preset--color--ivory);
margin: .35rem 0 0;
text-shadow: 0 2px 22px rgb(20 14 8 / .4);
}
.tewar-ahero__lede {
font-family: var(--tw-display);
font-style: italic;
font-size: var(--tw-lead);
color: rgb(247 245 241 / .82);
max-width: 46ch;
margin: .85rem 0 0;
}
@media (max-width: 781px) {
.tewar-ahero { min-height: min(38svh, 300px); }
.tewar-ahero__inner { padding-inline: 1.25rem; }
}
/* Split-screen hero headline. Sized by class, not by an inline preset variable that
may not exist. */
.tewar-hero__title,
h1.tewar-hero__title {
font-family: var(--tw-display);
font-weight: 400;
font-size: var(--tw-hero);
line-height: 1.02;
letter-spacing: -.04em;
color: var(--wp--preset--color--emerald, #0E3B2E);
margin: 0;
}
/* ============================================================================
Section rhythm
---------------------------------------------------------------------------
One rule for vertical space between sections, so the page has a rhythm instead
of an accumulation of individual paddings. Adjacent sections previously summed
their own top and bottom padding and left a visible void.
========================================================================= */
.tewar-shelf,
.tewar-community,
.tewar-journal,
.tewar-craft,
.tewar-editorial,
.tewar-bands,
.tewar-collections,
.tewar-shringaar,
.tewar-collindex,
.tewar-jindex { padding-block: var(--tw-s6); }
/* Where two padded sections meet, collapse one side rather than stacking both. */
.tewar-shelf + .tewar-editorial,
.tewar-editorial + .tewar-craft,
.tewar-craft + .tewar-promise,
.tewar-promise + .tewar-editorial,
.tewar-editorial + .tewar-together,
.tewar-together + .tewar-bands,
.tewar-bands + .tewar-community,
.tewar-community + .tewar-journal { padding-block-start: 0; }
/* Tinted sections keep their own padding — the colour block needs the breathing
room to read as a block rather than a stripe. */
.tewar-promise { padding-block: var(--tw-s5) !important; }
/* ============================================================================
Heritage — jewellery traditions of India
---------------------------------------------------------------------------
A long editorial page, so it is built as a column of regions rather than a
grid of cards floating on nothing: hairline rules separate the regions, and
each place is a rule-topped block. Mobile first — one column until 640px,
because the definition lists are unreadable at half a phone's width.
========================================================================= */
.tewar-heritage { max-width: 1360px; margin-inline: auto; padding: 0 var(--tw-s3) var(--tw-s6); }
.tewar-heritage__hero { text-align: center; padding-block: var(--tw-s6) var(--tw-s4); }
.tewar-heritage__hero .tewar-crumbs { text-align: center; }
.tewar-heritage__lede {
font-family: var(--tw-display);
font-style: italic;
font-size: var(--tw-lead);
line-height: 1.65;
color: var(--wp--preset--color--muted);
max-width: 56ch;
margin: 1.5rem auto 0;
}
/* Jump nav. Nineteen states is too long to scroll blind, so the five regions are
addressable from the top. Anchors, not JS — they work with the page half-loaded. */
.tewar-heritage__jump {
display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center;
padding-bottom: var(--tw-s5);
}
.tewar-heritage__jump a {
border: 1px solid var(--wp--preset--color--line);
padding: .7rem 1rem;
font-size: .62rem;
color: var(--wp--preset--color--emerald);
transition: border-color .25s ease, color .25s ease;
}
.tewar-heritage__jump a:hover,
.tewar-heritage__jump a:focus-visible {
border-color: var(--wp--preset--color--gold);
color: var(--wp--preset--color--gold-ink);
}
.tewar-heritage__region {
padding-block: var(--tw-s5);
border-top: 1px solid var(--wp--preset--color--line);
/* Clears the sticky header when a jump link lands here. */
scroll-margin-top: 5rem;
}
.tewar-heritage__h2 {
font-family: var(--tw-display);
font-weight: 400;
font-size: var(--tw-h2);
line-height: 1.05;
letter-spacing: -.03em;
color: var(--wp--preset--color--emerald);
margin: 0 0 1rem;
}
.tewar-heritage__intro {
font-size: .95rem;
line-height: 1.8;
color: var(--wp--preset--color--muted);
max-width: 62ch;
margin: 0 0 var(--tw-s4);
}
.tewar-heritage__grid {
display: grid;
gap: var(--tw-s4) var(--tw-s5);
/* min() keeps the track from exceeding the viewport at 390px, where a bare
minmax(300px, 1fr) overflows once the page padding is subtracted. */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.tewar-place { padding-top: 1.25rem; border-top: 1px solid var(--wp--preset--color--line); }
.tewar-place__name {
font-family: var(--tw-display);
font-weight: 400;
font-size: var(--tw-h3);
line-height: 1.1;
letter-spacing: -.02em;
color: var(--wp--preset--color--emerald);
margin: 0;
}
.tewar-place__where {
/* Gold on ivory: gold-ink, never --gold. --gold fails contrast at this size. */
color: var(--wp--preset--color--gold-ink);
font-size: .62rem;
margin: .5rem 0 1.1rem;
}
.tewar-place__dl { margin: 0; }
.tewar-place__dl dt {
color: var(--wp--preset--color--gold-ink);
font-size: .6rem;
margin-bottom: .4rem;
}
.tewar-place__dl dd {
margin: 0 0 1.15rem;
font-size: .9rem;
line-height: 1.75;
color: var(--wp--preset--color--ink);
}
.tewar-place__dl dd:last-child { margin-bottom: 0; }
.tewar-place__dl em { font-style: italic; color: var(--wp--preset--color--emerald); }
.tewar-heritage__closing {
padding-block: var(--tw-s5);
border-top: 1px solid var(--wp--preset--color--line);
max-width: 68ch;
}
.tewar-heritage__closing p { font-size: .95rem; line-height: 1.8; margin: 0 0 1.1rem; }
.tewar-heritage__disclaimer {
font-family: var(--tw-display);
font-style: italic;
color: var(--wp--preset--color--emerald);
}
/* ============================================================================
Shared bits for the new pages
========================================================================= */
/* The gold rule on unresolved copy is scoped to .tewar-doc; these pages are not
docs, so extend it rather than leaving placeholders looking like finished copy. */
.tewar-heritage [data-todo],
.tewar-drops [data-todo],
.tewar-search [data-todo] {
border-left: 2px solid var(--wp--preset--color--gold);
padding-left: 1rem;
background: color-mix(in srgb, var(--wp--preset--color--sand) 45%, transparent);
}
/* Search bar — 404 and search results. Wraps rather than overflowing on a 390px
phone, which a fixed-width input plus a 1.75rem-padded button will do. */
.tewar-searchbar {
display: flex;
flex-wrap: wrap;
gap: .5rem;
max-width: 32rem;
margin: var(--tw-s3) auto 0;
}
.tewar-searchbar input[type="search"] {
flex: 1 1 12rem;
min-width: 0;
border: 1px solid var(--wp--preset--color--line);
border-radius: 0;
background: transparent;
padding: .9rem 1rem;
font-family: var(--tw-ui);
font-size: .85rem;
color: var(--wp--preset--color--ink);
-webkit-appearance: none;
appearance: none;
}
.tewar-searchbar input[type="search"]:focus-visible {
outline: 1px solid var(--wp--preset--color--gold);
outline-offset: -1px;
}
.tewar-searchbar .tewar-btn { flex: 0 0 auto; padding-inline: 1.2rem; }
/* ---- New drops -------------------------------------------------------------- */
.tewar-drops__facts {
display: grid;
gap: var(--tw-s3) var(--tw-s4);
grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
padding: var(--tw-s3) 0 var(--tw-s4);
border-block: 1px solid var(--wp--preset--color--line);
margin-bottom: var(--tw-s4);
}
.tewar-drops__factlabel { color: var(--wp--preset--color--gold-ink); margin: 0 0 .5rem; }
.tewar-drops__factbody { font-size: .875rem; line-height: 1.7; margin: 0; color: var(--wp--preset--color--muted); }
.tewar-drops__factbody em { font-style: italic; color: var(--wp--preset--color--emerald); }
.tewar-drops__more { text-align: center; margin: var(--tw-s4) 0 0; }
/* ---- Offers ------------------------------------------------------------------ */
.tewar-code {
display: inline-block;
border: 1px dashed var(--wp--preset--color--gold);
color: var(--wp--preset--color--gold-ink);
padding: .3rem .7rem;
white-space: nowrap;
}
.tewar-offers__cta { margin-top: var(--tw-s4); }
/* ---- 404 --------------------------------------------------------------------- */
.tewar-notfound { text-align: center; }
/* Only the headline block is centred; lists and cards read badly centred. */
.tewar-notfound .tewar-doc__list,
.tewar-notfound .tewar-fest { text-align: left; }
.tewar-notfound h2 { margin-top: var(--tw-s5); }
/* ---- Search ------------------------------------------------------------------ */
.tewar-search__query { color: var(--wp--preset--color--muted); font-size: .875rem; margin: var(--tw-s3) 0 0; }
.tewar-search__term { font-style: italic; color: var(--wp--preset--color--emerald); }
.tewar-search__empty { max-width: 62ch; margin-inline: auto; padding-block: var(--tw-s5); }
.tewar-search__emptytitle {
font-family: var(--tw-display);
font-weight: 400;
font-size: var(--tw-h3);
line-height: 1.1;
color: var(--wp--preset--color--emerald);
margin: 0 0 1rem;
}
/* Four-column tables do not fit a 390px phone. Scroll the table rather than
crushing every cell to three wrapped lines. */
.tewar-doc__tablewrap { overflow-x: auto; margin: 0 0 1.25rem; }
.tewar-doc__tablewrap .tewar-doc__table { min-width: 26rem; margin-bottom: 0; }
/* ============================================================================
Product detail page — the live WooCommerce one
---------------------------------------------------------------------------
The .tewar-pdp__* block above (gallery rail, stage, buy box, pincode) is shared
with patterns/page-product.php, which is the static reference layout. What
follows is only what the real page adds: the lightbox, Notify me, the share
row, the sticky mobile bar and the cross-sell rows.
Gold on ivory is 2.71:1 — below AA for text — so every gold *word* here uses
--gold-ink. Plain --gold is left for rules, borders and the star motif.
========================================================================= */
/* ---- Gallery: single-image is the common case ------------------------------
117 photographs against 179 products (docs/inventory-audit.md 1.3), so most
PDPs have exactly one shot. That state gets a clean full-width stage rather
than a rail holding one lonely thumbnail. */
.tewar-pdp__gallery--single { grid-template-columns: 1fr; }
.tewar-pdp__zoom { display: block; cursor: zoom-in; }
.tewar-pdp__stageimg { display: block; width: 100%; height: 100%; object-fit: cover; }
.tewar-pdp__thumb { cursor: pointer; }
.tewar-pdp__thumb:focus-visible { outline: 1px solid var(--wp--preset--color--gold); outline-offset: 2px; }
.tewar-pdp__noimage {
position: absolute;
inset-block-start: var(--tw-s2);
inset-inline-start: var(--tw-s2);
font-family: var(--tw-ui);
font-size: var(--tw-meta);
letter-spacing: .16em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
}
.tewar-pdp__stage { position: relative; }
/* The sticky mobile bar's own CTAs jump back up to these two ids (inc/product-page.php).
Without scroll-margin-top the sticky header lands right on top of the target —
same fix as .tewar-heritage__region above. */
#tewar-pdp-stage,
#tewar-notify-email { scroll-margin-top: 5rem; }
/* ---- Lightbox: built in-theme so the page never loads Woo's gallery bundle - */
.tewar-lightbox {
position: fixed;
inset: 0;
z-index: 200;
display: grid;
place-items: center;
padding: var(--tw-s4);
background: color-mix(in srgb, var(--wp--preset--color--emerald) 92%, transparent);
}
.tewar-lightbox img { max-width: 100%; max-height: 88vh; object-fit: contain; }
.tewar-lightbox__close {
position: absolute;
inset-block-start: var(--tw-s2);
inset-inline-end: var(--tw-s2);
background: transparent;
border: 1px solid var(--wp--preset--color--gold-soft);
color: var(--wp--preset--color--gold-soft);
padding: .6rem 1.1rem;
cursor: pointer;
}
.tewar-lightbox__close:hover {
background: var(--wp--preset--color--gold-soft);
color: var(--wp--preset--color--emerald);
}
/* ---- Notify me -------------------------------------------------------------
Sold out is the normal state of this catalogue, not an edge case, so this is
given the weight of a buy box: framed, on sand, above the fold. */
.tewar-notifyform {
margin: 0 0 var(--tw-s3);
padding: var(--tw-s3);
background: color-mix(in srgb, var(--wp--preset--color--sand) 55%, transparent);
border: 1px solid var(--wp--preset--color--line);
}
.tewar-notifyform__title { color: var(--wp--preset--color--emerald); margin: 0 0 .6rem; }
.tewar-notifyform__blurb {
margin: 0 0 var(--tw-s2);
font-size: var(--tw-small);
line-height: 1.65;
color: var(--wp--preset--color--muted);
}
.tewar-notifyform__row { display: flex; flex-wrap: wrap; gap: .5rem; }
.tewar-notifyform__row input {
flex: 1 1 11rem;
min-width: 0;
border: 1px solid var(--wp--preset--color--line);
border-radius: 0;
background: var(--wp--preset--color--ivory);
padding: .9rem 1rem;
font-family: var(--tw-ui);
font-size: var(--tw-small);
color: var(--wp--preset--color--ink);
-webkit-appearance: none;
appearance: none;
}
.tewar-notifyform__row input:focus-visible { outline: 1px solid var(--wp--preset--color--gold); outline-offset: -1px; }
.tewar-notifyform__row .tewar-btn { flex: 0 0 auto; }
.tewar-notifyform__result,
.tewar-pdp__pinresult {
margin: var(--tw-s2) 0 0;
font-size: var(--tw-small);
line-height: 1.6;
color: var(--wp--preset--color--ink);
}
.tewar-notifyform__result[data-state="error"],
.tewar-pdp__pinresult[data-state="error"] { color: #8A2F22; }
.tewar-notifyform__result[data-state="pending"],
.tewar-pdp__pinresult[data-state="pending"] { color: var(--wp--preset--color--muted); }
.tewar-notifyform__fineprint {
margin: var(--tw-s1) 0 0;
font-size: var(--tw-meta);
color: var(--wp--preset--color--muted);
}
/* ---- Pincode ---------------------------------------------------------------
No Shiprocket, so no delivery date is ever printed here. The [data-todo]
marker on the result line is the flag that the honest fallback is in force. */
.tewar-pdp__pinwa { color: var(--wp--preset--color--gold-ink); text-decoration: underline; white-space: nowrap; }
.tewar-pdp__pinrow button { cursor: pointer; }
/* ---- Anything still waiting on the founders --------------------------------
Deliberately visible rather than hidden: an unanswered materials line the team
can see gets answered; one buried in a comment does not. */
.tewar-pdp__returns[data-todo],
.tewar-specs tr[data-todo] td { font-style: italic; color: var(--wp--preset--color--muted); }
/* ---- Share row: WhatsApp first, because that is where it gets sent --------- */
.tewar-pdp__share {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .9rem;
margin: var(--tw-s3) 0 0;
padding-block-start: var(--tw-s2);
border-block-start: 1px solid var(--wp--preset--color--line);
}
.tewar-pdp__sharelabel { color: var(--wp--preset--color--muted); }
.tewar-pdp__sharebtn {
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
color: var(--wp--preset--color--gold-ink);
text-decoration: none;
border-bottom: 1px solid currentColor;
}
.tewar-pdp__sharebtn:hover { color: var(--wp--preset--color--emerald); }
.tewar-pdp__sharenote { font-size: var(--tw-meta); color: var(--wp--preset--color--muted); }
/* ---- Cross-sell rows ------------------------------------------------------- */
.tewar-pdp__cross + .tewar-pdp__cross { margin-top: var(--tw-s5); }
.tewar-pdp__cross .products {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--tw-s3);
list-style: none;
margin: var(--tw-s3) 0 0;
padding: 0;
}
@media (min-width: 900px) {
.tewar-pdp__cross .products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* ---- Sticky mobile add-to-bag bar ------------------------------------------
Phones only, and only once the real buy box has scrolled past. It sits above
the mobile tab bar rather than on top of it. Hidden until JS reveals it, so a
no-JS page is never covered by a bar whose observer never ran. */
.tewar-stickybar { display: none; }
@media (max-width: 900px) {
.tewar-stickybar {
position: fixed;
inset-inline: 0;
bottom: calc(3.9rem + env(safe-area-inset-bottom));
z-index: 49;
display: flex;
align-items: center;
gap: var(--tw-s2);
padding: .7rem 1rem;
background: var(--wp--preset--color--ivory);
border-top: 1px solid var(--wp--preset--color--line);
box-shadow: 0 -6px 18px rgb(14 59 46 / .07);
transform: translateY(140%);
transition: transform .25s ease;
}
/* The bar ships with [hidden] and only JS removes it. Our display:flex would
otherwise beat the UA's [hidden]{display:none}, so restate it explicitly —
a no-JS page must never carry a bar whose observer never ran. */
.tewar-stickybar[hidden] { display: none; }
.tewar-stickybar.is-visible { transform: translateY(0); }
.tewar-stickybar__info { flex: 1 1 auto; min-width: 0; }
.tewar-stickybar__name {
display: block;
color: var(--wp--preset--color--emerald);
font-size: .62rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.tewar-stickybar__meta { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.tewar-stickybar__price { font-family: var(--tw-ui); font-size: var(--tw-small); font-weight: 600; color: var(--wp--preset--color--emerald); }
.tewar-stickybar__price del { color: var(--wp--preset--color--muted); font-weight: 400; }
.tewar-stickybar__variant { font-size: .58rem; color: var(--wp--preset--color--muted); }
.tewar-stickybar__form { margin: 0; }
.tewar-stickybar__cta { flex: 0 0 auto; padding: .8rem 1.15rem; font-size: .68rem; white-space: nowrap; }
/* Room for both bars at the end of the page. */
body.tewar-has-stickybar { padding-bottom: 8.4rem; }
}
@media (prefers-reduced-motion: reduce) {
.tewar-stickybar { transition: none; }
}
/* ---------------------------------------------------------------------------
Headings on dark grounds
---------------------------------------------------------------------------
The #main-container heading rule above carries ID specificity, so it beats any
plain class — including the hero titles, which turned emerald on a dark
photograph and became almost unreadable. These restate the on-dark colours at
matching specificity.
Worth remembering as a rule of thumb: an ID-scoped blanket override for a whole
element type will silently capture every exception you have already written.
--------------------------------------------------------------------------- */
.tewar-vhero__title,
.tewar-ahero__title,
.tewar-hero3__title {
color: var(--wp--preset--color--ivory);
}
.tewar-vhero__title em,
.tewar-hero3__title em {
color: var(--wp--preset--color--gold-soft);
font-style: italic;
}
.tewar-vhero__eyebrow,
.tewar-ahero .tewar-crumbs,
.tewar-hero3__eyebrow { color: var(--wp--preset--color--gold-soft); }
/* Same problem, same fix, for headings inside emerald blocks. */
.tewar-story__promise h2,
.tewar-footer h2,
.tewar-community__whatsapp .tewar-community__wa-title,
.tewar-together__shot figcaption { color: var(--wp--preset--color--ivory); }
/* Blocksy styles bare h1..h6. Our classed titles restate their colour so the parent
theme's element-level rule cannot win by load order. */
h1.tewar-vhero__title,
h1.tewar-ahero__title,
h1.tewar-hero3__title { color: var(--wp--preset--color--ivory); }
h1.tewar-hero__title,
h1.tewar-doc__title,
h1.tewar-listing__title,
h1.tewar-gift__title { color: var(--wp--preset--color--emerald); }
h2.tewar-shelf__title,
h2.tewar-shringaar__h2,
h2.tewar-community__title,
h2.tewar-journal__title,
h2.tewar-finder__title,
h2.tewar-editorial__title { color: var(--wp--preset--color--emerald); }
/* ---- Empty collection / category archive ------------------------------------
Paired with the woocommerce_no_products_found handler in inc/woocommerce.php.
Nine of the thirteen scaffolded category pages and two of the four collections
ship with zero stock, so this state is common enough at launch to deserve real
composition rather than a bare sentence. Centred, generous, and quiet — it should
read as a considered pause, not an error page. */
.tewar-empty-archive {
max-width: 46rem;
margin: var(--tw-s6) auto;
padding: var(--tw-s5) var(--tw-s3);
text-align: center;
}
.tewar-empty-archive__eyebrow {
margin: 0 0 var(--tw-s2);
color: var(--wp--preset--color--gold-ink); /* never plain --gold as text on ivory: 2.71:1 fails AA */
}
.tewar-empty-archive__title {
font-family: var(--tw-display);
font-size: var(--tw-h2);
line-height: 1.1;
letter-spacing: -0.015em;
color: var(--wp--preset--color--emerald);
margin: 0 0 var(--tw-s3);
}
.tewar-empty-archive__body {
font-size: var(--tw-lead);
color: var(--wp--preset--color--body);
margin: 0 auto var(--tw-s4);
max-width: 34rem;
}
.tewar-empty-archive__links {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 0;
}
/* ---- "Coming soon" states ---------------------------------------------------
Nine of thirteen categories and two of four collections have no stock at launch
(docs/category-mapping.md). Rather than link a visitor into an empty grid, those
entries stay visible but inert. They must read as *deliberate restraint* — the
brand choosing not to show something yet — never as a broken or disabled control,
so: no grey-out, no "not-allowed" cursor, no strikethrough. Just a quieter tile
and an honest gold label. */
.tewar-tile--soon {
cursor: default;
position: relative;
}
/* The tile is no longer an , so kill only the affordances that implied a click.
The image keeps its full opacity — a dimmed photo reads as "unavailable". */
.tewar-tile--soon:hover .tewar-tile__img { opacity: 1; }
.tewar-tile--soon .tewar-tile__name { color: var(--wp--preset--color--emerald); }
.tewar-tile__badge {
display: inline-block;
margin-top: .625rem;
color: var(--wp--preset--color--gold-ink); /* --gold on ivory is 2.71:1 and fails AA */
font-size: var(--tw-meta);
}
/* Mega-menu entries for the same not-yet-stocked sections. The (not )
already removes the click; this keeps it aligned with its linked siblings so the
column doesn't look ragged, and softens it just enough to sit second in the eye. */
.tewar-mega__soon > span {
display: block;
color: var(--wp--preset--color--body);
opacity: .72;
cursor: default;
}
.tewar-mega__soon em {
font-style: normal;
color: var(--wp--preset--color--gold-ink);
font-size: var(--tw-meta);
}