/** Shopify CDN: Minification failed Line 1483:0 Unexpected "}" **/ /* ============================================================= TEXAURA DESIGN SYSTEM Version: 1.0 File: texaura-design-system.css Upload to: Shopify Admin → Online Store → Themes → Edit Code → Assets Usage: Add one line to theme.liquid inside : {{ 'texaura-design-system.css' | asset_url | stylesheet_tag }} Architecture: — This file is the single source of truth for all design tokens, typography, layout components, and utility classes used across every Custom Liquid section on texaura.in — Custom Liquid sections contain HTML only — zero inline CSS — Prestige native sections (rich text, multicolumn, image with text) are used wherever the theme supports the layout natively — This file does not override Prestige's global styles — all classes are namespaced with .tx- to avoid conflicts ============================================================= */ /* ============================================================= 1. DESIGN TOKENS ============================================================= */ :root { /* ── Colour palette ── */ /* Three core colours only. No accents. No gradients. */ --tx-paper: #F6F5F0; /* Page background, primary sections */ --tx-warm: #F6F5F0; /* Alternate section background */ --tx-ink: #304038; /* Headings, dark section background */ --tx-ink-soft: #3F3B34; /* Body text */ --tx-ink-mist: #8A8880; /* Eyebrows, captions, tags, placeholders */ --tx-silver: #FDFDFC; /* Rules, dividers, borders */ --tx-num: #E5E1D8; /* Numbers */ --tx-forest: #304038; /* Buttons · Announcement bar · Testimonials ONLY */ /* ── Typography ── */ --tx-font-heading: 'Libre Baskerville', Georgia, serif; --tx-font-body: 'DM Sans', Helvetica, sans-serif; /* ── Type scale ── */ --tx-size-display: 44px; /* Hero headlines */ --tx-size-h1: 36px; /* Page opening headline */ --tx-size-h2: 28px; /* Section heading */ --tx-size-h3: 18px; /* Card title, sub-section heading */ --tx-size-body: 14px; /* Body copy */ --tx-size-small: 13px; /* Card body, supporting copy */ --tx-size-caption: 12px; /* Footnotes, form notes */ --tx-size-eye: 10px; /* Eyebrow labels */ --tx-size-btn: 10px; /* Button / CTA text */ /* ── Line heights ── */ --tx-lh-heading: 1.08; --tx-lh-body: 1.9; --tx-lh-small: 1.75; /* ── Letter spacing ── */ --tx-ls-eye: 0.22em; --tx-ls-btn: 0.20em; --tx-ls-tag: 0.15em; /* ── Spacing scale ── */ --tx-space-xs: 16px; --tx-space-sm: 24px; --tx-space-md: 48px; --tx-space-lg: 64px; --tx-space-xl: 100px; --tx-space-2xl: 140px; /* ── Section padding ── */ --tx-pad-v: 100px; /* Section vertical padding desktop */ --tx-pad-h: 64px; /* Section horizontal padding desktop */ --tx-pad-v-mob: 56px; /* Section vertical padding mobile */ --tx-pad-h-mob: 24px; /* Section horizontal padding mobile */ /* ── Max content width ── */ --tx-max-width: 1440px; /* ── Transitions ── */ --tx-ease: 0.2s ease; --tx-ease-slow: 0.6s ease; } /* ============================================================= 2. BASE RESET (scoped to .tx-block) All Custom Liquid sections wrap content in
This scope prevents conflicts with Prestige's own styles. ============================================================= */ .tx-block *, .tx-block *::before, .tx-block *::after { box-sizing: border-box; margin: 0; padding: 0; } .tx-block { font-family: var(--tx-font-body); font-weight: 300; font-size: var(--tx-size-body); color: var(--tx-ink-soft); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Remove any margin added by Prestige section wrappers */ margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Strip Prestige padding from shopify-section wrappers that contain a .tx-block child */ .shopify-section:has(.tx-block) { padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; } /* ============================================================= 3. PAGE TITLE SUPPRESSION Hide Prestige's default page header on Custom Liquid pages. Add the relevant class for each page handle. ============================================================= */ .template-page-hotels .page-header, .template-page-hotels .page__heading, .template-page-hotels .main-page-title, .template-page-gifting .page-header, .template-page-gifting .page__heading, .template-page-gifting .main-page-title, .template-page-partner-program .page-header, .template-page-partner-program .page__heading, .template-page-partner-program .main-page-title, .template-page-sustainability .page-header, .template-page-sustainability .page__heading, .template-page-sustainability .main-page-title, .template-page-our-story .page-header, .template-page-our-story .page__heading, .template-page-our-story .main-page-title, .template-page-the-honest-standard .page-header, .template-page-the-honest-standard .page__heading, .template-page-the-honest-standard .main-page-title { display: none !important; } /* ============================================================= 4. SCROLL REVEAL Applied to any .tx-rv element. Triggered by IntersectionObserver in the last section of each page. ============================================================= */ .tx-rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; } .tx-rv.tx-vis { opacity: 1; transform: none; } /* Hero entrance animations — staggered */ @keyframes tx-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } .tx-a1 { animation: tx-rise 0.65s 0.05s ease forwards; opacity: 0; } .tx-a2 { animation: tx-rise 0.65s 0.20s ease forwards; opacity: 0; } .tx-a3 { animation: tx-rise 0.65s 0.38s ease forwards; opacity: 0; } /* ============================================================= 5. TYPOGRAPHY ============================================================= */ /* ── Eyebrow ── */ .tx-eyebrow { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: var(--tx-ls-eye); text-transform: uppercase; margin-bottom: var(--tx-space-xs); display: block; color: var(--tx-ink-mist); } .tx-eyebrow--lt { color: rgba(246,245,240,0.55); } /* ── Display (hero h1) ── */ .tx-display { font-family: var(--tx-font-heading); font-size: var(--tx-size-display); font-weight: 400; line-height: var(--tx-lh-heading); color: var(--tx-ink); margin-bottom: 20px; } .tx-display--light { color: var(--tx-paper); } /* ── H1 ── */ .tx-h1 { font-family: var(--tx-font-heading); font-size: var(--tx-size-h1); font-weight: 400; line-height: 1.12; color: var(--tx-ink); margin-bottom: 18px; } .tx-h1--light { color: var(--tx-paper); } /* ── H2 ── */ .tx-h2 { font-family: var(--tx-font-heading); font-size: var(--tx-size-h2); font-weight: 400; line-height: 1.18; color: var(--tx-ink); margin-bottom: 16px; } .tx-h2--light { color: var(--tx-paper); } /* ── H3 ── */ .tx-h3 { font-family: var(--tx-font-heading); font-size: var(--tx-size-h3); font-weight: 400; line-height: 1.25; color: var(--tx-ink); margin-bottom: 12px; } .tx-h3--light { color: var(--tx-paper); } /* ── Body text ── */ .tx-body { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: var(--tx-lh-body); color: var(--tx-ink-soft); } .tx-body--light { color: rgba(246,245,240,0.7); } .tx-body + .tx-body { margin-top: 14px; } /* ── Small / card body ── */ .tx-small { font-family: var(--tx-font-body); font-size: var(--tx-size-small); font-weight: 300; line-height: var(--tx-lh-small); color: var(--tx-ink-soft); } .tx-small--light { color: rgba(246,245,240,0.6); } /* ── Caption ── */ .tx-caption { font-family: var(--tx-font-body); font-size: var(--tx-size-caption); font-weight: 300; color: var(--tx-ink-mist); line-height: 1.6; } .tx-caption--lt { color: rgba(246,245,240,0.4); } /* ── Italic accent ── */ .tx-italic { font-family: var(--tx-font-heading); font-style: italic; font-weight: 400; } /* ── Tag / cert label ── */ .tx-tag { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: var(--tx-ls-tag); text-transform: uppercase; color: var(--tx-ink-mist); margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(26,24,20,0.07); display: block; } .tx-tag--lt { color: rgba(246,245,240,0.45); border-color: rgba(255,255,255,0.1); } /* ── Horizontal rule ── */ .tx-rule { width: 32px; height: 1px; background: var(--tx-silver); border: none; display: block; margin: 20px 0; } .tx-rule--light { background: rgba(255,255,255,0.2); } /* ============================================================= 6. BUTTONS & CTAs Forest #394943 — buttons only ============================================================= */ /* Primary button — forest background */ .tx-btn { display: inline-block; padding: 13px 32px; background: var(--tx-forest); color: var(--tx-paper); font-family: var(--tx-font-body); font-size: var(--tx-size-btn); font-weight: 400; letter-spacing: var(--tx-ls-btn); text-transform: uppercase; text-decoration: none; border: 1px solid var(--tx-forest); cursor: pointer; transition: background var(--tx-ease), letter-spacing var(--tx-ease); -webkit-appearance: none; border-radius: 0; } .tx-btn:hover { background: #2e3d35; color: var(--tx-paper); } /* Ghost button — on dark backgrounds */ .tx-btn-ghost { display: inline-block; padding: 13px 32px; background: none; color: var(--tx-paper); font-family: var(--tx-font-body); font-size: var(--tx-size-btn); font-weight: 400; letter-spacing: var(--tx-ls-btn); text-transform: uppercase; text-decoration: none; border: 1px solid rgba(246,245,240,0.35); cursor: pointer; transition: border-color var(--tx-ease), background var(--tx-ease); -webkit-appearance: none; border-radius: 0; } .tx-btn-ghost:hover { border-color: rgba(246,245,240,0.7); background: rgba(246,245,240,0.06); color: var(--tx-paper); } .tx-btn-ghost--sm { color: rgba(246,245,240,0.55); border-color: rgba(246,245,240,0.2); } .tx-btn-ghost--sm:hover { color: var(--tx-paper); border-color: rgba(246,245,240,0.55); } /* Outline button — on light backgrounds */ .tx-btn-outline { display: inline-block; padding: 13px 32px; background: none; color: var(--tx-ink); font-family: var(--tx-font-body); font-size: var(--tx-size-btn); font-weight: 400; letter-spacing: var(--tx-ls-btn); text-transform: uppercase; text-decoration: none; border: 1px solid rgba(28,28,28,0.25); cursor: pointer; transition: border-color var(--tx-ease), color var(--tx-ease); -webkit-appearance: none; border-radius: 0; } .tx-btn-outline:hover { border-color: var(--tx-ink); color: var(--tx-ink); } .tx-cta-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; } /* ============================================================= 7. SECTION WRAPPERS ============================================================= */ .tx-section { padding: var(--tx-pad-v) var(--tx-pad-h); background: var(--tx-paper); max-width: var(--tx-max-width); margin-left: auto; margin-right: auto; } .tx-section--warm { background: var(--tx-warm); max-width: none; padding: var(--tx-pad-v) var(--tx-pad-h); } .tx-section--dark { background: var(--tx-ink); max-width: none; padding: var(--tx-pad-v) var(--tx-pad-h); } .tx-section--flush { padding: 0; } /* Full-bleed wrapper (background spans full width, content max-width inside) */ .tx-section-wrap { padding: var(--tx-pad-v) var(--tx-pad-h); } .tx-section-wrap--warm { background: var(--tx-warm); } .tx-section-wrap--dark { background: var(--tx-ink); } .tx-section-inner { max-width: var(--tx-max-width); margin: 0 auto; } /* ============================================================= 8. HERO ============================================================= */ .tx-hero { position: relative; height: 88vh; min-height: 580px; overflow: hidden; display: flex; align-items: flex-end; } .tx-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tx-hero__veil { position: absolute; inset: 0; /* Strengthened gradient — hero text always readable */ background: linear-gradient( to top, rgba(28,28,28,0.92) 0%, rgba(28,28,28,0.48) 42%, rgba(28,28,28,0.18) 100% ); } .tx-hero__content { position: relative; z-index: 2; padding: 0 var(--tx-pad-h) var(--tx-space-lg); max-width: 700px; } .tx-hero__sub { font-family: var(--tx-font-body); font-size: 15px; font-weight: 300; line-height: 1.8; color: rgba(246,245,240,0.72); margin-bottom: 32px; max-width: 480px; } /* ============================================================= 9. SPLIT LAYOUT Image + text, flush — no gap ============================================================= */ .tx-split { display: grid; grid-template-columns: 1fr 1fr; } .tx-split__img { overflow: hidden; position: relative; } .tx-split__img img { width: 100%; height: 100%; object-fit: cover; display: block; min-height: 520px; transition: transform var(--tx-ease-slow); } .tx-split__img:hover img { transform: scale(1.025); } .tx-split__text { padding: var(--tx-pad-lg, 72px) var(--tx-space-lg); display: flex; flex-direction: column; justify-content: center; background: var(--tx-paper); } /* Split text background variants */ .tx-split__text--warm { background: var(--tx-warm); } .tx-split__text--dark { background: var(--tx-ink); } .tx-split__text--stone { background: #EAE5DC; } /* warm stone — enquiry forms */ /* Padding shortcut for split text */ .tx-split__text { padding: 72px 56px; } /* ============================================================= 10. BRIEF LIST Used in split sections for feature/benefit lists ============================================================= */ .tx-list { display: flex; flex-direction: column; gap: 12px; padding: 20px 0; border-top: 1px solid rgba(28,28,28,0.07); border-bottom: 1px solid rgba(28,28,28,0.07); margin-top: 24px; } .tx-list--lt { border-color: rgba(246,245,240,0.1); } .tx-list__item { display: flex; gap: 14px; align-items: baseline; } .tx-list__dash { color: var(--tx-silver); font-size: 11px; flex-shrink: 0; width: 12px; line-height: 1.6; } .tx-list__text { font-family: var(--tx-font-heading); font-size: 15px; font-weight: 400; color: var(--tx-ink-soft); line-height: 1.5; } .tx-list__text--lt { color: rgba(246,245,240,0.75); } /* ============================================================= 11. CARD GRIDS ============================================================= */ /* 2-column */ .tx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px; } /* 3-column */ .tx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } /* 4-column */ .tx-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } /* Base card */ .tx-card { padding: 40px 32px; background: var(--tx-paper); } .tx-card--warm { background: var(--tx-warm); } .tx-card--dark { background: var(--tx-ink); } /* Card with image on top */ .tx-card-img { overflow: hidden; } .tx-card-img__photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform var(--tx-ease-slow); filter: saturate(0.9); } .tx-card-img:hover .tx-card-img__photo { transform: scale(1.03); filter: saturate(1); } .tx-card-img__body { padding: 28px 28px 32px; background: var(--tx-paper); } .tx-card-img__body--dark { background: var(--tx-ink); } .tx-card-img__body--warm { background: var(--tx-warm); } /* Numbered card (for partner/occasion types) */ .tx-card__num { font-family: var(--tx-font-heading); font-size: 32px; font-weight: 400; color: var(--tx-num); line-height: 1; margin-bottom: 20px; display: block; } /* ============================================================= 12. STATS STRIP Full-width dark strip with key numbers ============================================================= */ .tx-stats { background: var(--tx-ink); padding: var(--tx-space-lg) var(--tx-pad-h); display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; } .tx-stat { padding: 0 var(--tx-space-md); border-right: 1px solid rgba(255,255,255,0.08); } .tx-stat:first-child { padding-left: 0; } .tx-stat:last-child { border-right: none; } .tx-stat__num { font-family: var(--tx-font-heading); font-size: 44px; font-weight: 400; color: var(--tx-paper); line-height: 1; margin-bottom: 10px; display: block; } .tx-stat__label { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,245,240,0.45); margin-bottom: 8px; display: block; } .tx-stat__desc { font-family: var(--tx-font-body); font-size: var(--tx-size-small); font-weight: 300; line-height: 1.65; color: rgba(246,245,240,0.55); } /* ============================================================= 13. PULL QUOTE / TESTIMONIALS Forest #394943 — only colour use outside buttons ============================================================= */ .tx-testimonials { background: var(--tx-forest); padding: var(--tx-pad-v) var(--tx-pad-h); } /* Single centred pull quote */ .tx-pull-quote { text-align: center; max-width: 700px; margin: 0 auto; } .tx-pull-quote__text { font-family: var(--tx-font-heading); font-size: 28px; font-weight: 400; font-style: italic; line-height: 1.5; color: rgba(246,245,240,0.92); margin-bottom: 20px; } .tx-pull-quote__attr { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,245,240,0.45); } /* Testimonial card grid (Wall of Love) */ .tx-testimonial-grid { columns: 3; column-gap: 2px; margin-top: var(--tx-space-md); } .tx-testimonial-card { break-inside: avoid; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); padding: 28px 24px; margin-bottom: 2px; display: inline-block; width: 100%; } .tx-testimonial-card--feature { background: rgba(255,255,255,0.1); } .tx-testimonial-card__quote { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; font-style: italic; line-height: 1.6; color: rgba(246,245,240,0.88); margin-bottom: 18px; } .tx-testimonial-card__name { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(246,245,240,0.5); } .tx-testimonial-card__meta { font-family: var(--tx-font-body); font-size: 11px; font-weight: 300; color: rgba(246,245,240,0.35); margin-top: 4px; } /* Filter tabs for Wall of Love */ .tx-filter-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: var(--tx-space-md); } .tx-filter-tab { padding: 8px 20px; font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,245,240,0.5); background: none; border: 1px solid rgba(246,245,240,0.15); cursor: pointer; transition: all var(--tx-ease); } .tx-filter-tab:hover, .tx-filter-tab.active { color: var(--tx-paper); border-color: rgba(246,245,240,0.5); } /* ============================================================= 14. STATEMENT SECTION Dark ink background — one per page maximum ============================================================= */ .tx-statement { background: var(--tx-ink); padding: var(--tx-pad-v) var(--tx-pad-h); } .tx-statement__intro { text-align: center; max-width: 640px; margin: 0 auto var(--tx-space-lg); } .tx-statement__headline { font-family: var(--tx-font-heading); font-size: var(--tx-size-h1); font-weight: 400; line-height: 1.1; color: var(--tx-paper); margin-bottom: 14px; } .tx-statement__sub { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: 1.85; color: rgba(246,245,240,0.55); max-width: 520px; margin: 0 auto; } .tx-statement__pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: var(--tx-space-md); } .tx-statement__pillar { padding: 36px 32px; border-top: 1px solid rgba(255,255,255,0.08); } .tx-statement__pillar-title { font-family: var(--tx-font-heading); font-size: var(--tx-size-h3); font-weight: 400; color: var(--tx-paper); margin-bottom: 12px; line-height: 1.3; } .tx-statement__pillar-body { font-family: var(--tx-font-body); font-size: var(--tx-size-small); font-weight: 300; line-height: var(--tx-lh-small); color: rgba(246,245,240,0.5); } /* ============================================================= 15. FOOTER STRIP 4-col trust/value strip at bottom of pages ============================================================= */ .tx-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid rgba(28,28,28,0.08); } .tx-strip__item { padding: 28px 32px; border-right: 1px solid rgba(28,28,28,0.06); text-align: center; } .tx-strip__item:last-child { border-right: none; } .tx-strip__label { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-ink-mist); margin-bottom: 6px; display: block; } .tx-strip__value { font-family: var(--tx-font-heading); font-size: 15px; font-weight: 400; color: var(--tx-ink); } /* ============================================================= 16. FORM ELEMENTS Used on Hotels, Gifting, and Partner Program enquiry sections. DARK VARIANT → tx-split__text--dark (original, unchanged) LIGHT VARIANT → tx-split__text--stone (new) To switch any form section from dark to light, the only Liquid change needed is: tx-split__text--dark → tx-split__text--stone and remove all --lt / --light modifier classes from children. ============================================================= */ /* ── Form grid ── */ .tx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 24px; } .tx-form-field { display: flex; flex-direction: column; gap: 8px; } .tx-form-field--full { grid-column: 1 / -1; } /* ── Labels ── */ .tx-label { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(246,245,240,0.45); /* dark variant default */ display: block; } /* ── Inputs ── */ .tx-input { padding: 12px 0 !important; border: none !important; border-bottom: 1px solid rgba(255,255,255,0.16) !important; background: none !important; font-family: var(--tx-font-body) !important; font-size: var(--tx-size-body) !important; font-weight: 300 !important; color: var(--tx-paper) !important; /* dark variant default */ outline: none !important; width: 100% !important; transition: border-color var(--tx-ease) !important; -webkit-appearance: none; border-radius: 0 !important; box-shadow: none !important; height: auto !important; line-height: normal !important; } .tx-input:focus { border-bottom-color: rgba(255,255,255,0.55) !important; } .tx-input::placeholder { color: rgba(255,255,255,0.22) !important; } /* ── Form note ── */ .tx-form-note { font-family: var(--tx-font-body); font-size: var(--tx-size-caption); font-weight: 300; color: rgba(246,245,240,0.35); /* dark variant default */ margin-top: 14px; } .tx-form-note a { color: inherit; text-decoration: none; } /* ── Success state ── */ .tx-form-success { padding: 24px 0; } .tx-form-success__headline { font-family: var(--tx-font-heading); font-size: var(--tx-size-h3); font-weight: 400; color: var(--tx-paper); /* dark variant default */ margin-bottom: 10px; } .tx-form-success__body { font-family: var(--tx-font-body); font-size: var(--tx-size-small); font-weight: 300; color: rgba(246,245,240,0.55); /* dark variant default */ line-height: 1.7; } /* ── Error state ── */ .tx-form-error { font-family: var(--tx-font-body); font-size: var(--tx-size-small); color: #e07070; margin-bottom: 16px; } /* ────────────────────────────────────────────────────────────── STONE VARIANT OVERRIDES Scoped to .tx-split__text--stone — no extra class in Liquid. Every selector below overrides a dark-variant colour above. ────────────────────────────────────────────────────────────── */ /* Eyebrow, headings, body, rule — strip --lt / --light defaults */ .tx-split__text--stone .tx-eyebrow { color: var(--tx-ink-mist); } .tx-split__text--stone .tx-h1, .tx-split__text--stone .tx-h2, .tx-split__text--stone .tx-h3 { color: var(--tx-ink); } .tx-split__text--stone .tx-body { color: var(--tx-ink-soft); } .tx-split__text--stone .tx-small { color: var(--tx-ink-soft); } .tx-split__text--stone .tx-rule { background: rgba(48,64,56,0.15); } /* Labels */ .tx-split__text--stone .tx-label { color: var(--tx-ink-mist); } /* Inputs */ .tx-split__text--stone .tx-input { border-bottom: 1px solid rgba(48,64,56,0.2) !important; color: var(--tx-ink-soft) !important; } .tx-split__text--stone .tx-input:focus { border-bottom-color: var(--tx-ink) !important; } .tx-split__text--stone .tx-input::placeholder { color: rgba(48,64,56,0.3) !important; } /* Form note */ .tx-split__text--stone .tx-form-note { color: var(--tx-ink-mist); } .tx-split__text--stone .tx-form-note a:hover { color: var(--tx-ink); } /* Success state */ .tx-split__text--stone .tx-form-success__headline { color: var(--tx-ink); } .tx-split__text--stone .tx-form-success__body { color: var(--tx-ink-soft); } /* Error state — slightly deeper red reads better on light bg */ .tx-split__text--stone .tx-form-error { color: #b94a4a; } /* Submit button — .tx-btn (forest on stone) works perfectly as-is. .tx-btn-ghost is designed for dark backgrounds — swap to .tx-btn in the Liquid file for all three form sections. */ /* ============================================================= 17. CTA SPLIT Two-panel CTA — light and dark side by side ============================================================= */ .tx-cta-split { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .tx-cta-panel { padding: 56px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0; background: var(--tx-paper); } .tx-cta-panel--warm { background: var(--tx-warm); } .tx-cta-panel--dark { background: var(--tx-ink); } .tx-cta-panel__eyebrow { font-family: var(--tx-font-body); font-size: var(--tx-size-eye); font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-mist); margin-bottom: 16px; display: block; } .tx-cta-panel--dark .tx-cta-panel__eyebrow { color: rgba(246,245,240,0.45); } .tx-cta-panel__title { font-family: var(--tx-font-heading); font-size: var(--tx-size-h2); font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 14px; } .tx-cta-panel--dark .tx-cta-panel__title { color: var(--tx-paper); } .tx-cta-panel__body { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: var(--tx-lh-body); color: var(--tx-ink-soft); max-width: 340px; margin-bottom: 32px; } .tx-cta-panel--dark .tx-cta-panel__body { color: rgba(246,245,240,0.6); } /* ============================================================= 18. EDITORIAL OPENING Used on brand/values pages — no hero image ============================================================= */ .tx-editorial { padding: var(--tx-pad-v) var(--tx-pad-h) calc(var(--tx-pad-v) * 0.75); background: var(--tx-paper); max-width: var(--tx-max-width); margin-left: auto; margin-right: auto; text-align: center; display: flex; flex-direction: column; align-items: center; } .tx-editorial .tx-h1, .tx-editorial .tx-eyebrow, .tx-editorial .tx-rule { max-width: 800px; width: 100%; } .tx-editorial__body { display: flex; flex-direction: column; gap: 16px; max-width: 600px; text-align: center; } /* ============================================================= 19. GIFT SET GRID 3-col image-led product cards — Gifting page ============================================================= */ .tx-gift-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .tx-gift-card { overflow: hidden; cursor: pointer; } .tx-gift-card__img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; transition: transform 0.55s ease; filter: saturate(0.88); } .tx-gift-card:hover .tx-gift-card__img { transform: scale(1.03); filter: saturate(1); } .tx-gift-card__body { padding: 20px 22px 26px; background: var(--tx-paper); } .tx-gift-card__body--dark { background: var(--tx-ink); } .tx-gift-card__name { font-family: var(--tx-font-heading); font-size: var(--tx-size-h3); font-weight: 400; color: var(--tx-ink); margin-bottom: 4px; } .tx-gift-card__body--dark .tx-gift-card__name { color: var(--tx-paper); } .tx-gift-card__items { font-family: var(--tx-font-body); font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tx-ink-mist); margin-bottom: 14px; } .tx-gift-card__body--dark .tx-gift-card__items { color: var(--tx-silver); } .tx-gift-card__foot { display: flex; justify-content: space-between; align-items: center; } .tx-gift-card__price { font-family: var(--tx-font-heading); font-size: var(--tx-size-h3); font-weight: 400; color: var(--tx-ink); } .tx-gift-card__body--dark .tx-gift-card__price { color: var(--tx-paper); } .tx-gift-card__link { font-family: var(--tx-font-body); font-size: 9px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink-mist); text-decoration: none; border-bottom: 1px solid rgba(28,28,28,0.18); padding-bottom: 2px; transition: color var(--tx-ease), border-color var(--tx-ease); } .tx-gift-card:hover .tx-gift-card__link { color: var(--tx-ink); border-color: var(--tx-ink); } .tx-gift-card__body--dark .tx-gift-card__link { color: var(--tx-silver); border-color: rgba(246,245,240,0.2); } /* ============================================================= 20. SEO — SEMANTIC STRUCTURE HELPERS These classes enforce correct heading hierarchy and semantic HTML patterns for SEO ============================================================= */ /* Visually hidden but readable by screen readers and search engines */ .tx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Breadcrumb schema helper */ .tx-breadcrumb { font-family: var(--tx-font-body); font-size: var(--tx-size-caption); color: var(--tx-ink-mist); margin-bottom: var(--tx-space-sm); } .tx-breadcrumb a { color: inherit; text-decoration: none; } .tx-breadcrumb a:hover { color: var(--tx-ink); } .tx-breadcrumb__sep { margin: 0 8px; color: var(--tx-silver); } /* ============================================================= 21. UTILITY CLASSES ============================================================= */ .tx-mt-sm { margin-top: var(--tx-space-sm); } .tx-mt-md { margin-top: var(--tx-space-md); } .tx-mt-lg { margin-top: var(--tx-space-lg); } .tx-mb-sm { margin-bottom: var(--tx-space-sm); } .tx-mb-md { margin-bottom: var(--tx-space-md); } .tx-mb-lg { margin-bottom: var(--tx-space-lg); } .tx-center { text-align: center; } .tx-max-sm { max-width: 480px; } .tx-max-md { max-width: 640px; } .tx-max-lg { max-width: 800px; } /* ============================================================= 22. RESPONSIVE ============================================================= */ @media (max-width: 1200px) { :root { --tx-pad-h: 48px; } .tx-grid-4 { grid-template-columns: repeat(2, 1fr); } .tx-statement__pillars { grid-template-columns: repeat(2, 1fr); } .tx-stats { grid-template-columns: repeat(2, 1fr); } .tx-stat { border-right: none; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .tx-stat:nth-child(odd) { padding-right: 32px; } .tx-stat:nth-child(even) { padding-left: 32px; } } @media (max-width: 1024px) { :root { --tx-size-display: 36px; --tx-size-h1: 30px; --tx-size-h2: 24px; --tx-pad-v: 80px; } .tx-grid-3 { grid-template-columns: repeat(2, 1fr); } .tx-gift-grid { grid-template-columns: repeat(2, 1fr); } .tx-testimonial-grid { columns: 2; } .tx-strip { grid-template-columns: repeat(2, 1fr); } .tx-strip__item:nth-child(2) { border-right: none; } .tx-strip__item:nth-child(3) { border-top: 1px solid rgba(28,28,28,0.06); } } @media (max-width: 768px) { :root { --tx-size-display: 30px; --tx-size-h1: 26px; --tx-size-h2: 22px; --tx-size-h3: 17px; --tx-pad-v: 56px; --tx-pad-h: 24px; --tx-pad-v-mob: 56px; --tx-pad-h-mob: 24px; } .tx-split { grid-template-columns: 1fr; } .tx-split__img img { min-height: 320px; } .tx-split__text { padding: 44px 28px; } .tx-hero { height: 80vh; min-height: 500px; } .tx-hero__content { padding: 0 24px 48px; } .tx-hero__sub { font-size: 14px; } .tx-grid-2, .tx-grid-3, .tx-grid-4 { grid-template-columns: 1fr; } .tx-gift-grid { grid-template-columns: 1fr; } .tx-stats { grid-template-columns: 1fr 1fr; padding: 48px 24px; } .tx-stat { padding: 20px 12px; border-bottom: none; border-right: none; } .tx-stat__num { font-size: 32px; } .tx-statement__pillars { grid-template-columns: 1fr; } .tx-statement { padding: 56px 24px; } .tx-statement__headline { font-size: 26px; } .tx-form-grid { grid-template-columns: 1fr; } .tx-cta-split { grid-template-columns: 1fr; } .tx-cta-panel { padding: 44px 28px; } .tx-strip { grid-template-columns: 1fr 1fr; } .tx-testimonial-grid { columns: 1; } .tx-testimonials { padding: 56px 24px; } .tx-pull-quote__text { font-size: 22px; } .tx-editorial { padding: 48px 24px; } .tx-section { padding: var(--tx-pad-v-mob) var(--tx-pad-h-mob); } .tx-section-wrap { padding: var(--tx-pad-v-mob) var(--tx-pad-h-mob); } } @media (prefers-reduced-motion: reduce) { .tx-rv { opacity: 1; transform: none; transition: none; } .tx-a1, .tx-a2, .tx-a3 { animation: none; opacity: 1; } .tx-split__img img, .tx-card-img__photo, .tx-gift-card__img { transition: none; } } /* ============================================================= 23. PRESTIGE NATIVE BUTTON OVERRIDES Normalises all Prestige theme buttons to match .tx-btn-outline. Covers every button variant Prestige renders in native sections (rich text, image with text, multicolumn, collection banners). Target style: outlined — thin border, ink text, no fill. This matches .tx-btn-outline and keeps hierarchy consistent with the custom liquid sections throughout the site. Specificity is intentionally high (element + class) to win over Prestige's own specificity without using !important where avoidable. ============================================================= */ /* ── All standard Prestige buttons — filled dark green on light backgrounds ── Confirmed class from DOM: Matches .tx-btn exactly — forest background, paper text. ── */ a.button, button.button { background-color: var(--tx-forest) !important; background: var(--tx-forest) !important; color: var(--tx-paper) !important; border: 1px solid var(--tx-forest) !important; border-radius: 0 !important; font-family: var(--tx-font-body) !important; font-size: var(--tx-size-btn) !important; font-weight: 400 !important; letter-spacing: var(--tx-ls-btn) !important; text-transform: uppercase !important; padding: 13px 32px !important; box-shadow: none !important; transition: background var(--tx-ease), border-color var(--tx-ease) !important; } a.button:hover, button.button:hover { background-color: #2e3d35 !important; border-color: #2e3d35 !important; color: var(--tx-paper) !important; box-shadow: none !important; } /* ── Buttons that sit over images — reinforced ghost ── Semi-transparent dark fill ensures legibility on both light and dark image areas. Border fully opaque white. ── */ .tx-hero .button, [class*="image-banner"] .button, [class*="image-with-text"] .button, [class*="collection-banner"] .button, [class*="slideshow"] .button { background-color: rgba(28,28,28,0.28) !important; background: rgba(28,28,28,0.28) !important; color: var(--tx-paper) !important; border-color: rgba(246,245,240,0.75) !important; backdrop-filter: blur(2px) !important; } .tx-hero .button:hover, [class*="image-banner"] .button:hover, [class*="image-with-text"] .button:hover, [class*="collection-banner"] .button:hover, [class*="slideshow"] .button:hover { background-color: rgba(28,28,28,0.48) !important; border-color: rgba(246,245,240,1) !important; } }