/* ========================================================================== Tribe Aura — Design Tokens -------------------------------------------------------------------------- THE single source of truth for every design value in this theme. Derived from: Tribe_Aura_Brand_Guidelines.pdf §03 Colour System · §04 Typography · §06 Website UI Direction (spacing) RULES 1. No other stylesheet may contain a raw hex, px font-size, or px spacing value. Reference a token instead. Rebranding = editing this file only. 2. Tokens are namespaced --ta-* so they never collide with Elementor's --e-* or hello-elementor's variables. 3. Breakpoints CANNOT be tokens — CSS custom properties are not valid inside @media queries. The canonical values are listed at the bottom of this file; copy them literally into media queries. ========================================================================== */ :root { /* ---------------------------------------------------------------------- 1. COLOUR — brand guidelines §03 Palette is warm and restrained on purpose. The interface stays neutral so product photography supplies the colour. Gold and earth are accents, never large decorative blocks. ---------------------------------------------------------------------- */ /* Raw brand palette — the six approved values. Do not use these directly in components; use the semantic roles below so intent stays readable. */ --ta-palette-ink: #1C1C1C; /* Primary Ink */ --ta-palette-ivory: #F7F3EC; /* Warm Ivory */ --ta-palette-sand: #E8DED0; /* Soft Sand */ --ta-palette-earth: #6B5545; /* Earth Brown */ --ta-palette-gold: #B08A52; /* Muted Gold */ --ta-palette-white: #FFFFFF; /* Pure White */ /* Derived tints/shades. Mixed from the six above — no new brand colours, only lighter/darker steps needed for borders, hovers and disabled states. */ --ta-palette-ink-80: #3A3A3A; /* softened ink — secondary headings */ --ta-palette-ink-60: #5C5C5C; /* muted body copy */ /* Was #8C8C8C, described as "placeholder / disabled". In practice 22 rules used it for real content — dates, counts, meta labels — where it measured 3.04:1 on ivory and 2.53:1 on sand, both below the 4.5:1 AA floor. #636363 is the LIGHTEST neutral that clears 4.5:1 on all three grounds (ivory 5.43, sand 4.52, white 6.01). It now sits very close to ink-60, and that is the honest outcome rather than an oversight: on grounds this light, AA leaves room for only one muted grey below ink. These two are separated by SIZE, WEIGHT and TRACKING — subtle is used at 12px uppercase with wide tracking — not by lightness. Do not lighten this back to regain a visual step. */ --ta-palette-ink-40: #636363; /* muted meta text — AA on all grounds */ --ta-palette-ink-30: #8C8C8C; /* the OLD ink-40. Placeholder and disabled ONLY: WCAG 1.4.3 exempts inactive controls, so it is legitimate there and nowhere else. */ --ta-palette-sand-deep: #D8C9B5; /* stronger separator on ivory */ --ta-palette-ivory-deep: #EFE8DC; /* hover wash on ivory surfaces */ --ta-palette-earth-deep: #54422F; /* earth hover / pressed */ /* Was #8A6A3C and commented "AA-contrast gold for TEXT on light" — true on ivory (4.51) and white (4.99), but it was never checked against SAND, where it measured 3.75:1 and failed. Every sand panel using accent text was below AA. #775B34 clears all three (ivory 5.70, sand 4.74, white 6.31). */ --ta-palette-gold-deep: #775B34; /* AA gold for TEXT on ivory/sand/white */ /* Semantic surfaces */ --ta-color-bg: var(--ta-palette-ivory); /* page ground */ --ta-color-bg-alt: var(--ta-palette-sand); /* panels, callouts */ --ta-color-surface: var(--ta-palette-white); /* cards, content */ --ta-color-surface-hover: var(--ta-palette-ivory-deep); --ta-color-overlay: rgba(28, 28, 28, 0.55); /* image scrims, modals */ /* Semantic text */ --ta-color-text: var(--ta-palette-ink); --ta-color-text-muted: var(--ta-palette-ink-60); --ta-color-text-subtle: var(--ta-palette-ink-40); /* Placeholder and disabled text only. WCAG 1.4.3 exempts inactive controls from the contrast minimum, which is the one place the old light grey is still correct. Never use this for content. */ --ta-color-text-disabled: var(--ta-palette-ink-30); --ta-color-text-invert: var(--ta-palette-ivory); --ta-color-heading: var(--ta-palette-ink); /* Semantic accents. NOTE: --ta-palette-gold is ~2.9:1 on ivory and ~2.4:1 on sand — DECORATIVE ONLY (rules, icons, micro-details), and not even for large text, which still needs 3:1. Anything that carries meaning, star ratings included, must use --ta-color-accent-text. */ --ta-color-accent: var(--ta-palette-gold); --ta-color-accent-text: var(--ta-palette-gold-deep); --ta-color-accent-soft: var(--ta-palette-earth); --ta-color-accent-soft-hover: var(--ta-palette-earth-deep); /* Borders & rules */ --ta-color-border: var(--ta-palette-sand); --ta-color-border-strong: var(--ta-palette-sand-deep); --ta-color-border-ink: var(--ta-palette-ink); /* Interactive */ --ta-color-link: var(--ta-palette-ink); --ta-color-link-hover: var(--ta-palette-earth); --ta-color-focus: var(--ta-palette-earth); /* focus ring */ /* Status — commerce feedback. Hue-shifted to sit inside the warm palette rather than using stock browser red/green. */ /* success was 4.47:1 on sand and warning only 2.87:1 — both below AA, and both carry real meaning ("In stock", "Low stock"), so neither is decorative. Darkened along their own hue so the warm palette is unchanged. */ --ta-color-success: #4A6546; /* in stock, order placed — AA 4.87+ */ --ta-color-warning: #765523; /* low stock — AA 5.10+ */ --ta-color-danger: #9B3B2F; /* errors, out of stock */ --ta-color-sale: #9B3B2F; /* sale badge */ /* Button roles */ --ta-btn-primary-bg: var(--ta-palette-ink); --ta-btn-primary-text: var(--ta-palette-ivory); --ta-btn-primary-bg-hover: var(--ta-palette-earth); --ta-btn-secondary-bg: transparent; --ta-btn-secondary-text: var(--ta-palette-ink); --ta-btn-secondary-border: var(--ta-palette-ink); /* ---------------------------------------------------------------------- 2. TYPOGRAPHY — brand guidelines §04 Serif (Cormorant Garamond) sparingly, for large headlines, collection titles and editorial moments. Sans (Inter) for all interface text: navigation, product info, prices, filters, buttons, forms, body. ---------------------------------------------------------------------- */ --ta-font-display: "Cormorant Garamond", "Playfair Display", Georgia, "Times New Roman", serif; --ta-font-body: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --ta-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; /* Type scale. clamp() interpolates the guidelines' mobile → desktop ranges across the viewport, so there is no separate mobile type block to keep in sync. Ranges are taken verbatim from §04 Hierarchy. */ --ta-text-3xs: 0.6875rem; /* 11px — legal, micro-labels */ --ta-text-2xs: 0.75rem; /* 12px — §04 Small/UI floor */ --ta-text-xs: 0.8125rem; /* 13px — §04 Buttons floor */ --ta-text-sm: 0.875rem; /* 14px — §04 Small/UI ceiling */ --ta-text-base: clamp(0.9375rem, 0.9rem + 0.2vw, 1.0625rem); /* 15→17px — §04 Body */ /* * FORM CONTROLS HAVE A HARD 16px FLOOR, and it is not a style choice. * * iOS Safari zooms the entire page when a text field smaller than 16px takes * focus, and does not zoom back out afterwards. --ta-text-base is fluid and * resolves to about 15.2px on a phone, so every input, select and textarea on * the site was triggering it — including every field in the checkout. * * max() keeps the fluid size wherever it is already large enough (17px on * desktop) and clamps only where it would drop below the floor. */ --ta-input-size: max(16px, var(--ta-text-base)); --ta-text-md: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17→19px — lead paragraph */ --ta-text-lg: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem); /* 20→24px — H4 / card title*/ --ta-text-xl: clamp(1.375rem, 1.2rem + 0.9vw, 1.75rem); /* 22→28px — H3 */ --ta-text-2xl: clamp(1.5rem, 1.15rem + 1.75vw, 2.5rem); /* 24→40px — H2, §04 */ --ta-text-3xl: clamp(1.875rem, 1.25rem + 3.1vw, 3.5rem); /* 30→56px — H1, §04 */ --ta-text-4xl: clamp(2.25rem, 1.4rem + 4.25vw, 4.25rem); /* 36→68px — hero display */ /* Weights — Inter/Cormorant shared scale */ --ta-weight-light: 300; --ta-weight-regular: 400; --ta-weight-medium: 500; /* §04: buttons are medium weight */ --ta-weight-semibold: 600; --ta-weight-bold: 700; /* Line heights */ --ta-leading-none: 1; --ta-leading-tight: 1.15; /* display headlines */ --ta-leading-snug: 1.3; /* headings, card titles*/ --ta-leading-normal: 1.6; /* body copy */ --ta-leading-relaxed: 1.75; /* long-form editorial */ /* Letter spacing — the serif needs none; small caps UI needs a lot. */ --ta-tracking-tight: -0.02em; /* large display */ --ta-tracking-normal: 0; --ta-tracking-wide: 0.04em; /* buttons, nav */ --ta-tracking-wider: 0.12em; /* eyebrow / section kicker */ /* Measure — §07 of the build plan calls for a 65–75ch editorial column. */ --ta-measure: 68ch; --ta-measure-narrow: 52ch; /* ---------------------------------------------------------------------- 3. SPACING — brand guidelines §06 ("generous whitespace, consistent spacing tokens, premium editorial catalogue not discount marketplace") 4px base unit, doubling through the upper end for section rhythm. ---------------------------------------------------------------------- */ --ta-space-3xs: 0.25rem; /* 4px */ --ta-space-2xs: 0.5rem; /* 8px */ --ta-space-xs: 0.75rem; /* 12px */ --ta-space-sm: 1rem; /* 16px */ --ta-space-md: 1.5rem; /* 24px */ --ta-space-lg: 2rem; /* 32px */ --ta-space-xl: 3rem; /* 48px */ --ta-space-2xl: 4rem; /* 64px */ --ta-space-3xl: 6rem; /* 96px */ --ta-space-4xl: 8rem; /* 128px */ /* Section rhythm — vertical padding between homepage/editorial bands. Fluid so mobile stays compact without losing the airy desktop feel. */ --ta-section-y: clamp(3rem, 2rem + 5vw, 6rem); --ta-section-y-tight: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); --ta-section-y-loose: clamp(4rem, 2.5rem + 7vw, 8rem); /* Gutter — horizontal breathing room at the viewport edge. */ --ta-gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem); /* Grid gaps */ --ta-gap-sm: var(--ta-space-sm); --ta-gap-md: var(--ta-space-md); --ta-gap-lg: var(--ta-space-lg); /* ---------------------------------------------------------------------- 4. CONTAINERS ---------------------------------------------------------------------- */ --ta-container-narrow: 46rem; /* 736px — editorial / long-form */ --ta-container-content: 60rem; /* 960px — support & legal pages */ --ta-container: 75rem; /* 1200px — default page width */ --ta-container-wide: 86.25rem; /* 1380px — shop grids, wide galleries */ --ta-container-full: 100%; /* edge-to-edge hero bands */ /* ---------------------------------------------------------------------- 5. RADII — restrained. Handcrafted/editorial reads squarer than SaaS. ---------------------------------------------------------------------- */ --ta-radius-none: 0; --ta-radius-xs: 2px; --ta-radius-sm: 4px; --ta-radius-md: 6px; --ta-radius-lg: 10px; --ta-radius-pill: 999px; /* badges, filter chips */ --ta-radius-circle: 50%; /* Component defaults — change these to reshape the whole UI at once. */ --ta-radius-button: var(--ta-radius-sm); --ta-radius-input: var(--ta-radius-sm); --ta-radius-card: var(--ta-radius-xs); --ta-radius-image: var(--ta-radius-xs); /* ---------------------------------------------------------------------- 6. SHADOWS — warm-tinted (ink, not pure black) so they sit on ivory without going grey. Kept shallow; §06 asks for minimal decorative UI. ---------------------------------------------------------------------- */ --ta-shadow-none: none; --ta-shadow-xs: 0 1px 2px rgba(28, 28, 28, 0.05); --ta-shadow-sm: 0 2px 6px rgba(28, 28, 28, 0.06); --ta-shadow-md: 0 6px 16px rgba(28, 28, 28, 0.08); --ta-shadow-lg: 0 14px 36px rgba(28, 28, 28, 0.10); --ta-shadow-xl: 0 24px 60px rgba(28, 28, 28, 0.12); /* Focus ring — drawn with outline, sized here for consistency. */ --ta-focus-width: 2px; --ta-focus-offset: 2px; /* ---------------------------------------------------------------------- 7. BORDERS, MOTION, LAYERING ---------------------------------------------------------------------- */ /* Inline UI asset. A data: URI cannot read a CSS custom property, so the arrow's stroke has to be a literal colour. Declaring the whole URI here keeps that literal inside the tokens file rather than leaking it into base.css. The stroke is --ta-palette-ink-60 (#5C5C5C); update both together. */ --ta-select-arrow: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%235C5C5C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); --ta-border-width: 1px; --ta-border-width-thick: 2px; --ta-border: var(--ta-border-width) solid var(--ta-color-border); --ta-duration-fast: 120ms; --ta-duration-base: 220ms; --ta-duration-slow: 400ms; --ta-ease: cubic-bezier(0.4, 0, 0.2, 1); --ta-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ta-transition: var(--ta-duration-base) var(--ta-ease); --ta-z-base: 1; --ta-z-dropdown: 100; --ta-z-sticky: 200; --ta-z-header: 300; --ta-z-drawer: 400; --ta-z-overlay: 500; --ta-z-modal: 600; --ta-z-toast: 700; /* Media aspect ratios — §05 asks for consistent crops across product cards. */ --ta-ratio-product: 3 / 4; /* portrait — suits sarees and jewellery alike */ --ta-ratio-square: 1 / 1; --ta-ratio-wide: 16 / 9; --ta-ratio-hero: 4 / 3; /* mobile hero; widened per breakpoint */ } /* ========================================================================== BREAKPOINTS - reference only -------------------------------------------------------------------------- Custom properties do not work inside @media queries. These are the canonical values; write them literally. Mobile-first, so always min-width. min-width: 480px sm - large phone min-width: 768px md - tablet portrait min-width: 1024px lg - tablet landscape / small laptop min-width: 1280px xl - desktop ========================================================================== */ /* Respect the OS "reduce motion" setting globally by collapsing the motion tokens, so components inherit the preference without each re-declaring it. */ @media (prefers-reduced-motion: reduce) { :root { --ta-duration-fast: 0ms; --ta-duration-base: 0ms; --ta-duration-slow: 0ms; } }