/** Shopify CDN: Minification failed Line 2351:1 Unexpected "{" Line 2351:2 Expected identifier but found "%" Line 2354:17 Expected identifier but found whitespace Line 2354:18 Unexpected "3-col" Line 2358:1 Expected identifier but found "%" Line 2360:0 Unexpected "<" Line 2363:3 Expected identifier but found "%" Line 2363:44 Expected identifier but found "%" Line 2364:2 Unexpected "<" Line 2368:41 Unexpected "{" ... and 101 more hidden warnings **/ /* ============================================================= 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: #1C1C1C; /* All text — full #1C1C1C, no opacity */ --tx-ink-soft: #1C1C1C; /* Body text — full strength */ --tx-ink-mist: #1C1C1C; /* Eyebrows, captions, tags */ --tx-ink-muted: #4A4A48; /* Secondary text — solid dark grey, fully readable */ --tx-ink-faint: rgba(28,28,28,0.62); /* Purely decorative — numbers, rules */ --tx-border: #E0DDD6; /* Dividers, section borders */ --tx-border-mid: #C8C4BB; /* Input borders, card borders */ --tx-paper-dark: #EFEEE9; /* Tonal panel background */ --tx-white: #FFFFFF; /* Form inputs, reading surface */ --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: 15px; /* Body copy */ --tx-size-small: 14px; /* 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.14; --tx-lh-body: 1.85; --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: 124px; /* 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; --tx-reading-width: 680px; /* ── 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: 400; 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, .template-page-about-texaura .page-header, .template-page-about-texaura .page__heading, .template-page-about-texaura .main-page-title, .template-page-texaura-philosophy .page-header, .template-page-texaura-philosophy .page__heading, .template-page-texaura-philosophy .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); opacity: 1; } .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); } /* ── Multiline editorial headings ── Explicit line breaks need more leading than single-line headings. */ .tx-block :is(h1, h2):has(br) { line-height: 1.24 !important; } /* ── Body text ── */ .tx-body { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 400; 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: 400; 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: 400; 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 Three variants for custom Liquid sections. Prestige native buttons are controlled by Theme Settings (Customise → Colours → Buttons) — see §23. ============================================================= */ /* Primary button — deep ink, paper text Use on light backgrounds (paper / warm sections). Avoids forest green which reads too heavily on page. */ .tx-btn { display: inline-block; padding: 13px 32px; background: var(--tx-ink-soft); 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-ink-soft); cursor: pointer; transition: background var(--tx-ease), border-color var(--tx-ease), opacity var(--tx-ease); -webkit-appearance: none; border-radius: 0; } .tx-btn:hover { opacity: 1; 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 #8A8A86; 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: 94vh; min-height: 680px; 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.84) 0%, #4A4A48 42%, #E0DDD6 100% ); } .tx-hero__content { position: relative; z-index: 2; padding: 0 var(--tx-pad-h) calc(var(--tx-space-lg) + 12px); max-width: 560px; } .tx-hero__sub { font-family: var(--tx-font-body); font-size: 15px; font-weight: 300; line-height: 1.95; color: rgba(246,245,240,0.68); margin-bottom: 36px; max-width: 440px; } /* ============================================================= 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.012); } .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 #E0DDD6; border-bottom: 1px solid #E0DDD6; 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: 52px 42px; 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 #E0DDD6; } .tx-strip__item { padding: 28px 32px; border-right: 1px solid #EDEAE3; 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 #C8C4BB; 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; } .tx-reading { max-width: var(--tx-reading-width); margin-left: auto; margin-right: auto; } .tx-reading--left { margin-left: 0; margin-right: auto; } .tx-reading--narrow { max-width: 560px; } .tx-editorial-image { position: relative; overflow: hidden; } .tx-editorial-image img { width: 100%; height: auto; display: block; } .tx-editorial-image__content { position: absolute; bottom: 8%; left: 6%; max-width: 520px; } /* ============================================================= 22. FAQ PAGE Section: tx-page-faq.liquid ============================================================= */ .txfq { background: var(--tx-paper); min-height: 80vh; } .txfq__header { padding: 100px var(--tx-pad-h) 64px; border-bottom: 1px solid var(--tx-border); } .txfq__title { margin: 0; } .txfq__layout { display: grid; grid-template-columns: 260px 1fr; min-height: 60vh; } .txfq__sidebar { border-right: 1px solid var(--tx-border); padding: var(--tx-space-md) 0; position: sticky; top: 80px; align-self: start; } .txfq__cat-btn { display: block; width: 100%; text-align: left; padding: 13px var(--tx-pad-h); color: var(--tx-ink-muted); background: none; border: none; cursor: pointer; transition: color var(--tx-ease); letter-spacing: 0.02em; } .txfq__cat-btn:hover { color: var(--tx-ink); } .txfq__cat-btn--active { color: var(--tx-ink); font-family: var(--tx-font-heading); font-weight: 400; font-style: italic; } .txfq__panels { padding: var(--tx-space-md) var(--tx-pad-h) 100px; } .txfq__panel { display: none; } .txfq__panel--active { display: block; } .txfq__panel-title { margin: 0 0 40px; } .txfq__item { border-top: 1px solid var(--tx-border); } .txfq__item:last-child { border-bottom: 1px solid var(--tx-border); } .txfq__question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 22px 0; background: none; border: none; cursor: pointer; text-align: left; gap: var(--tx-space-sm); } .txfq__question-text { font-weight: 300; line-height: 1.5; } .txfq__question[aria-expanded="true"] .txfq__question-text { font-weight: 400; } .txfq__icon { font-family: var(--tx-font-body); font-size: 18px; font-weight: 200; color: var(--tx-ink-muted); flex-shrink: 0; line-height: 1; transition: transform 0.25s ease; } .txfq__question[aria-expanded="true"] .txfq__icon { transform: rotate(45deg); } .txfq__answer-inner { padding: 0 0 28px; } .txfq__answer-inner p { margin: 0 0 var(--tx-space-xs); } .txfq__answer-inner p:last-child { margin-bottom: 0; } .txfq__answer-inner a { color: var(--tx-ink); text-decoration: underline; text-underline-offset: 3px; } /* ============================================================= 23. READABILITY OVERRIDES Keep the editorial tone while making body text easier to read. ============================================================= */ .tx-block p, .tx-block li, .tx-block label, .tx-block input, .tx-block select, .tx-block textarea, .tx-block button, .tx-block .tx-body, .tx-block .tx-small, .tx-block .tx-caption { font-weight: 400; } .tx-block p, .tx-block li, .tx-block label { color: var(--tx-ink-soft); } .tx-block ::placeholder { color: var(--tx-ink-muted); } /* ============================================================= 24. 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 #EDEAE3; } } @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: 88vh; min-height: 620px; } .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); } .txfq__header { padding: 72px var(--tx-pad-h-mob) var(--tx-space-md); } .txfq__layout { grid-template-columns: 1fr; } .txfq__sidebar { position: static; border-right: none; border-bottom: 1px solid var(--tx-border); padding: var(--tx-space-sm) var(--tx-pad-h-mob); display: flex; flex-wrap: wrap; gap: 8px; } .txfq__cat-btn { padding: 8px var(--tx-space-xs); width: auto; border: 1px solid var(--tx-border-mid); font-size: 11px; letter-spacing: 0.08em; } .txfq__cat-btn--active { border-color: var(--tx-ink); } .txfq__panels { padding: 40px var(--tx-pad-h-mob) 72px; } } @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; } } /* ============================================================= 24. PRESTIGE NATIVE BUTTON OVERRIDES Philosophy: defer to Prestige's own button colour system wherever possible. Override only shape, font, and spacing to keep Texaura's typographic language consistent. We do NOT force a background colour on standard buttons — Prestige's theme settings (Customise → Colours → Buttons) control the fill. This means the merchant can update the button colour from the Theme Editor without touching code. We only override: — border-radius → 0 (Prestige defaults to rounded) — font-family (match DM Sans throughout) — font-size / weight / letter-spacing / text-transform — padding (consistent with .tx-btn) — box-shadow → none (Prestige adds shadow on some themes) On-image ghost buttons retain a semi-transparent dark fill for legibility — this is a layout necessity, not a brand colour decision. ============================================================= */ /* ── All standard Prestige buttons — shape & type only ── */ a.button, button.button { 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), opacity var(--tx-ease) !important; } a.button:hover, button.button:hover { box-shadow: none !important; opacity: 0.88; } /* ── Buttons that sit over images — ghost for legibility ── Semi-transparent dark fill + opaque white border ensures the button reads on any image tone. ── */ .tx-hero .button, [class*="image-banner"] .button, [class*="image-with-text"] .button, [class*="collection-banner"] .button, [class*="slideshow"] .button { background-color: #8A8A86 !important; background: #8A8A86 !important; color: var(--tx-paper) !important; border-color: rgba(246,245,240,0.70) !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: #6A6A66 !important; border-color: rgba(246,245,240,0.95) !important; opacity: 1 !important; } /* ============================================================= 24. SHOPIFY DYNAMIC CHECKOUT BUTTON (BUY IT NOW) Philosophy: match shape and typography to Add to Cart. Background colour deferred to Prestige's CSS variable system (set via Customise → Colours → Buttons) so both buttons stay visually consistent without hardcoding a colour here. We override only: — border-radius → 0 — font-family / size / weight / letter-spacing — padding, min-height, box-shadow — background-image: none (strips Prestige gradient layer) ============================================================= */ .shopify-payment-button__button--unbranded { /* Font and shape only — do not touch background or background-image. Prestige's gradient system controls the fill; interfering breaks the button. */ 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; border-radius: 0 !important; } /* ============================================================= 25. BUNDLE PRODUCT DESCRIPTION Formats — dash lines and body paragraph in the Shopify product description field across all bundle pages. No inline styles needed — paste plain text into description. ============================================================= */ .product-description p { padding-left: 20px; text-indent: -14px; margin: 0 0 8px 0; font-family: var(--font-body-family); font-size: 13px; color: #2a2a2a; line-height: 1.6; } .product-description p:last-child { text-indent: 0; padding-left: 0; margin-top: 16px; color: #4a4740; } /* ============================================================= 26. ARTICLE / BLOG POST TYPOGRAPHY 16px body, left-aligned, hyphens, Texaura editorial voice. !important defeats all inline Word/MSO style overrides. ============================================================= */ /* ── Strip all Word/MSO inline font overrides ── */ .article__wrapper .prose *, .article__wrapper .prose p, .article__wrapper .prose span, .article__wrapper .prose li, .article__wrapper .prose div { font-family: var(--tx-font-body) !important; font-size: 16px !important; color: var(--tx-ink-soft) !important; line-height: 1.9 !important; } /* ── Base prose ── */ .article__wrapper .prose { font-family: var(--tx-font-body) !important; font-size: 16px !important; font-weight: 400; line-height: 1.9; color: var(--tx-ink-soft) !important; text-align: left; hyphens: auto; -webkit-hyphens: auto; -webkit-font-smoothing: antialiased; } /* ── Paragraphs ── */ .article__wrapper .prose p { margin-top: 0; margin-bottom: 1.5em; text-align: left; } /* ── Opening subtitle — first paragraph ── */ .article__wrapper .prose > p:first-child, .article__wrapper .prose > p:first-child span { font-family: var(--tx-font-heading) !important; font-size: 16px !important; font-style: italic !important; color: var(--tx-ink-mist) !important; text-align: left !important; margin-bottom: 2.2em; line-height: 1.7 !important; } /* ── Lists ── */ .article__wrapper .prose ul, .article__wrapper .prose ol { margin-top: 0; margin-bottom: 1.5em; padding-left: 1.5em; } .article__wrapper .prose li { margin-bottom: 0.5em; } .article__wrapper .prose li:last-child { margin-bottom: 0; } /* ── Bold / strong ── */ .article__wrapper .prose strong, .article__wrapper .prose b, .article__wrapper .prose strong span, .article__wrapper .prose b span { font-family: var(--tx-font-body) !important; font-size: 16px !important; font-weight: 600 !important; color: var(--tx-ink) !important; } /* ── Links ── */ .article__wrapper .prose a, .article__wrapper .prose a span { font-family: var(--tx-font-body) !important; font-size: 16px !important; color: var(--tx-ink) !important; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(48, 64, 56, 0.35); transition: text-decoration-color var(--tx-ease); } .article__wrapper .prose a:hover, .article__wrapper .prose a:hover span { text-decoration-color: var(--tx-ink); } /* ── Blockquote ── */ .article__wrapper .prose blockquote { border-left: 2px solid var(--tx-num); margin: 2rem 0; padding-left: 1.5rem; } .article__wrapper .prose blockquote p, .article__wrapper .prose blockquote p span { font-family: var(--tx-font-heading) !important; font-style: italic !important; font-size: 16px !important; color: var(--tx-ink-mist) !important; } /* ── H2 — section heading ── */ .article__wrapper .prose h2, .article__wrapper .prose h2 span { font-family: var(--tx-font-heading) !important; font-size: 24px !important; font-weight: 400 !important; line-height: 1.22 !important; letter-spacing: 0.01em; color: var(--tx-ink) !important; text-align: left !important; margin-top: 3.2rem; margin-bottom: 0.75rem; } /* ── H3 — sub-section heading ── */ .article__wrapper .prose h3, .article__wrapper .prose h3 span { font-family: var(--tx-font-heading) !important; font-size: 19px !important; font-weight: 400 !important; font-style: italic !important; line-height: 1.3 !important; color: var(--tx-ink) !important; text-align: left !important; margin-top: 2.8rem; margin-bottom: 0.6rem; } /* ── Horizontal rule ── */ .article__wrapper .prose hr { border: none; border-top: 1px solid var(--tx-num); margin: 3.5rem auto; width: 60px; } /* ── Images ── */ .article__wrapper .prose img { width: 100%; height: auto; display: block; margin: 2.5rem 0; } /* ── Closing lines after hr — left aligned, no italic ── */ .article__wrapper .prose hr + p, .article__wrapper .prose hr + p span { text-align: left !important; font-family: var(--tx-font-body) !important; font-style: normal !important; font-size: 16px !important; color: var(--tx-ink-soft) !important; margin-top: 0; line-height: 1.9 !important; } /* ── Mobile ── */ @media (max-width: 768px) { .article__wrapper .prose *, .article__wrapper .prose p, .article__wrapper .prose span { font-size: 15px !important; line-height: 1.85 !important; } .article__wrapper .prose h2, .article__wrapper .prose h2 span { font-size: 21px !important; margin-top: 2.6rem; } .article__wrapper .prose h3, .article__wrapper .prose h3 span { font-size: 17px !important; margin-top: 2.2rem; } } /* ============================================================= 26b. ARTICLE LIST ITEM FIX Fixes detached bullet point rendering in Prestige blog posts. ============================================================= */ .article__wrapper .prose ul, .article__wrapper .prose ol { padding-left: 1.6em; margin-top: 0; margin-bottom: 1.5em; list-style-position: outside; } .article__wrapper .prose ul li, .article__wrapper .prose ol li { display: list-item; padding-left: 0.3em; margin-bottom: 0.6em; line-height: 1.9; } .article__wrapper .prose ul li::marker, .article__wrapper .prose ol li::marker { font-size: 16px; color: var(--tx-ink-soft); } /* ============================================================= 27. DAWN THEME — GLOBAL HEADER OVERRIDES Targets Dawn's native header, announcement bar, and nav links. All selectors tested against Dawn theme structure (texaura.com). ============================================================= */ /* ── Announcement bar — smaller font ── */ .announcement-bar__message, .announcement-bar__message p, .announcement-bar .announcement-bar__message { font-size: 11px !important; letter-spacing: 0.08em; } /* ── Nav links — uppercase ── */ .header__menu-item, .header__menu-item a, .header__menu-item .link, .header__menu-item span, header .list-menu__item, header .list-menu__item a { text-transform: uppercase !important; letter-spacing: 0.10em !important; } /* ── Nav links — remove underline on hover ── */ /* Dawn uses (not ) for dropdown nav items — must target summary.link */ summary.header__menu-item:hover, summary.header__menu-item:focus, summary.link:hover, summary.link:focus, header summary:hover, header summary:focus, .header__menu-item:hover, .header__menu-item:focus { text-decoration: none !important; background-image: none !important; background-size: 0 !important; } /* ============================================================ TEXAURA DESIGN SYSTEM — Phase 1 additions Paste into texaura-design-system.css at the bottom Covers: tx-section-hero + tx-section-intro ============================================================ */ /* ───────────────────────────────────────────── SECTION: HERO (.txh) Dynamic CSS (veil, height, focal-point) stays inline in the section file as it uses Liquid. Static structure lives here. ───────────────────────────────────────────── */ .txh { position: relative; width: 100%; overflow: hidden; background: #1a1814; display: block; } .txh__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .txh__bg--fallback { background: linear-gradient(160deg, #c8bfa8 0%, #9a8f7a 30%, #6b5e4e 60%, #2a2018 100%); } .txh__veil { position: absolute; inset: 0; pointer-events: none; } .txh__scroll { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); z-index: 2; } .txh__scroll-track { width: 1px; height: 48px; background: rgba(246, 245, 240, 0.15); position: relative; overflow: hidden; } .txh__scroll-track::after { content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%; background: rgba(246, 245, 240, 0.45); animation: txh-fall 2.4s 1s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes txh-fall { 0% { top: -100%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 200%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .txh__scroll-track::after { animation: none; top: 0; opacity: 0.65; } .txh video { display: none; } } /* ───────────────────────────────────────────── SECTION: INTRO (.txi) Section 02 — First Words Centred, typographic opening ───────────────────────────────────────────── */ .txi { background: var(--tx-paper); padding: 160px var(--tx-pad-h); border-bottom: 1px solid rgba(28, 28, 28, 0.07); text-align: center; } .txi__inner { max-width: 580px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .txi__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(28, 28, 28, 0.38); margin-bottom: 22px; display: block; } .txi__h1 { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 28px; } .txi__body { font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; line-height: 1.9; color: var(--tx-ink); max-width: 400px; margin-bottom: 36px; } .txi__ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } @media (max-width: 768px) { .txi { padding: 100px var(--tx-pad-h-mob); } .txi__h1 { font-size: 24px; } } /* ============================================================= 28. DAWN — POLICY PAGE STYLES Selectors confirmed from live HTML inspection. Structure: .shopify-policy__container > .shopify-policy__title + .shopify-policy__body > .rte ============================================================= */ /* ── Container — match Texaura editorial policy layout ── */ .shopify-policy__container { max-width: none !important; width: 100% !important; margin: 0 !important; padding: 96px var(--tx-pad-h) 140px !important; background: var(--tx-paper) !important; text-align: left !important; } /* ── Page title ── */ .shopify-policy__title { max-width: 560px !important; margin: 0 auto 80px !important; text-align: center !important; } .shopify-policy__title h1 { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: 40px !important; font-weight: 400 !important; line-height: 1.12 !important; letter-spacing: 0 !important; color: #1C1C1C !important; text-align: center !important; text-transform: none !important; margin: 0 !important; } /* ── Body wrapper ── */ .shopify-policy__body { max-width: 1000px !important; margin: 0 auto !important; text-align: left !important; } .shopify-policy__body .rte { max-width: 760px !important; margin: 0 auto !important; padding: 0 !important; background: transparent !important; border: none !important; box-shadow: none !important; } /* ── Paragraphs ── */ .shopify-policy__body .rte p { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.85 !important; color: #1C1C1C !important; text-align: left !important; margin: 0 0 16px !important; padding: 0 !important; border: none !important; } .shopify-policy__body .rte p:empty, .shopify-policy__body .rte p:has(br:only-child) { display: none !important; } /* ── Section headings — strong tags acting as h2 ── */ .shopify-policy__body .rte strong { font-family: inherit !important; font-size: inherit !important; font-weight: 500 !important; color: inherit !important; text-transform: none !important; letter-spacing: 0 !important; display: inline !important; opacity: 1 !important; } /* ── Standalone strong that is the only content in a p — treat as heading ── */ .shopify-policy__body .rte p > strong:only-child { display: block !important; font-family: 'Libre Baskerville', Georgia, serif !important; font-size: 20px !important; font-weight: 400 !important; color: #1C1C1C !important; margin: 44px 0 18px !important; padding-top: 0 !important; border-top: none !important; } .shopify-policy__body .rte hr { display: none !important; } .shopify-policy__body .rte::before, .shopify-policy__body .rte::after, .shopify-policy__body .rte *::before, .shopify-policy__body .rte *::after { border-color: transparent !important; } .shopify-policy__body .rte > *:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: none !important; } .shopify-policy__body .rte > * + * { margin-top: 0 !important; } /* ── Links ── */ .shopify-policy__body .rte a { color: #1C1C1C !important; text-decoration: underline !important; text-underline-offset: 3px !important; } /* ── Kill any remaining centering ── */ .shopify-policy__body .rte, .shopify-policy__body .rte * { text-align: left !important; } @media (max-width: 768px) { .shopify-policy__container { padding: 72px var(--tx-pad-h-mob) 100px !important; } .shopify-policy__title { margin-bottom: 48px !important; } .shopify-policy__title h1 { font-size: 30px !important; } .shopify-policy__body .rte { max-width: none !important; } } {% comment %} TEXAURA — tx-section-collection-page.liquid Master Collection Page Section Fendi-inspired: 3-col grid, 3px gap, card background, centred product image Used by all collection JSON templates CSS → texaura-design-system.css (.txcl classes) Install: Sections → Add new section → tx-section-collection-page {% endcomment %}
{%- comment %} ── Page header ── {% endcomment %}

{{ collection.title }}

{{ collection.products_count }} {% if collection.products_count == 1 %}piece{% else %}pieces{% endif %}
{%- comment %} ── Product grid — Fendi style ── {% endcomment %}
{%- for product in collection.products -%}
{%- comment %} Image — centred with padding, card bg ── {% endcomment %}
{%- if product.featured_image -%} {{ product.featured_image.alt | default: product.title | escape }} {%- if product.images[1] -%} {{ product.images[1].alt | default: product.title | escape }} {%- endif -%} {%- else -%}
{%- endif -%}
{%- comment %} Meta ── {% endcomment %}
{{ product.title }}
{%- if product.compare_at_price > product.price -%} {{ product.compare_at_price | money }} {%- endif -%} {{ product.price | money }}
{%- assign color_opt = product.options_by_name['Color'] | default: product.options_by_name['Colour'] -%} {%- if color_opt and color_opt.values.size > 1 -%} {{ color_opt.values.size }} colours {%- endif -%}
{%- else -%}

No products found.

{%- endfor -%}
{%- comment %} ── Collection description — SEO ── {% endcomment %} {%- if collection.description != blank -%}
{{ collection.description }}
{%- endif -%}
{% schema %} { "name": "TX Collection Page", "tag": "div", "class": "tx-shopify-section", "settings": [], "presets": [{ "name": "TX Collection Page", "category": "Texaura" }] } {% endschema %} /* ============================================================ TEXAURA — Collection Page (.txcl) Paste into texaura-design-system.css at the bottom Fendi-inspired: 3-col, 3px gap, card bg, centred image ============================================================ */ /* ── Header ── */ .txcl__header { padding: 32px var(--tx-pad-h) 0; border-bottom: 1px solid #E0DDD6; } .txcl__crumb { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .txcl__crumb-link { font-family: var(--tx-font-body); font-size: 11px; letter-spacing: 0.06em; color: #4A4A48; text-decoration: none; transition: color 0.2s; } .txcl__crumb-link:hover { color: var(--tx-ink); } .txcl__crumb-sep { font-size: 11px; color: #C8C4BB; } .txcl__crumb-current { font-family: var(--tx-font-body); font-size: 11px; color: var(--tx-ink); } .txcl__title { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); text-align: center; padding: 24px 0 20px; } .txcl__bar { display: flex; justify-content: space-between; align-items: center; padding-bottom: 16px; } .txcl__count { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #4A4A48; } .txcl__sort { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink); background: none; border: none; outline: none; cursor: pointer; -webkit-appearance: none; appearance: none; } /* ── Grid — 3 columns, 3px gap ── */ .txcl__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; background: #EDEAE3; } /* ── Card ── */ .txcl__card { background: #F5F4F2; position: relative; } .txcl__card-link { display: block; text-decoration: none; color: inherit; } /* ── Image wrap — portrait with padding, image centred ── */ .txcl__img-wrap { position: relative; aspect-ratio: 3 / 4; overflow: hidden; background: #F5F4F2; display: flex; align-items: center; justify-content: center; padding: 24px; } .txcl__img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; transition: opacity 0.5s ease; } .txcl__img--main { opacity: 1; } .txcl__img--alt { opacity: 0; } .txcl__card-link:hover .txcl__img--main { opacity: 0; } .txcl__card-link:hover .txcl__img--alt { opacity: 1; } .txcl__img-empty { width: 100%; height: 100%; background: #EDEAE3; position: absolute; inset: 0; } /* ── Meta ── */ .txcl__meta { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 4px; background: #F5F4F2; } .txcl__name { font-family: var(--tx-font-body); font-size: 13px; font-weight: 400; color: var(--tx-ink); line-height: 1.4; transition: opacity 0.2s; } .txcl__card-link:hover .txcl__name { opacity: 1; } .txcl__price-row { display: flex; align-items: baseline; gap: 8px; } .txcl__price { font-family: var(--tx-font-body); font-size: 13px; font-weight: 400; color: var(--tx-ink); } .txcl__price--was { font-size: 11px; color: #4A4A48; text-decoration: line-through; } .txcl__variants { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.12em; color: #4A4A48; } /* ── Empty state ── */ .txcl__empty { grid-column: 1 / -1; padding: 100px var(--tx-pad-h); font-family: var(--tx-font-body); font-size: 14px; color: #4A4A48; text-align: center; background: var(--tx-paper); } /* ── SEO Description ── */ .txcl__desc { max-width: 680px; margin: 72px auto 0; padding: 0 var(--tx-pad-h) 120px; font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; line-height: 1.9; color: var(--tx-ink); text-align: center; } .txcl__desc h1, .txcl__desc h2 { font-family: var(--tx-font-heading); font-size: 20px; font-weight: 400; line-height: 1.2; margin-bottom: 16px; } .txcl__desc p { margin-bottom: 12px; } .txcl__desc p:last-child { margin-bottom: 0; } .txcl__desc a { color: var(--tx-ink); border-bottom: 1px solid #C8C4BB; padding-bottom: 1px; } /* ── Mobile ── */ @media (max-width: 768px) { .txcl__header { padding: 20px var(--tx-pad-h-mob) 0; } .txcl__title { font-size: 22px; } .txcl__grid { grid-template-columns: repeat(2, 1fr); gap: 2px; } .txcl__desc { padding: 0 var(--tx-pad-h-mob) 80px; margin-top: 48px; } } /* ============================================================= 29. DAWN — PRODUCT PAGE STYLES Targets Dawn's main-product section and component CSS. Scoped to .template-product to avoid collection page bleed. ============================================================= */ /* ── Product layout spacing ── */ .template-product .product { gap: 0 !important; } .template-product .product__info-wrapper { padding: 48px 48px 48px 56px !important; } /* ── Collection breadcrumb / vendor ── */ .template-product .product__text.caption-with-letter-spacing { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 10px !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; color: #1C1C1C !important; } .template-product .product__text a { color: #1C1C1C !important; text-decoration: none !important; border-bottom: 1px solid #C8C4BB !important; } /* ── Product title ── */ .template-product .product__title { font-family: 'Libre Baskerville', Georgia, serif !important; font-size: 28px !important; font-weight: 400 !important; line-height: 1.15 !important; letter-spacing: -0.01em !important; color: #1C1C1C !important; margin-bottom: 12px !important; } /* ── Short description / tagline ── */ .template-product .product__description p:first-child { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; line-height: 1.7 !important; color: #1C1C1C !important; } /* ── Price ── */ .template-product .price__container { margin: 20px 0 !important; } .template-product .price .price-item--regular, .template-product .price .price-item--sale { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 300 !important; letter-spacing: 0.02em !important; color: #1C1C1C !important; } /* ── Delivery / shipping note ── */ .template-product .product__tax { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 300 !important; color: #1C1C1C !important; letter-spacing: 0.05em !important; } /* ── Variant picker label ── */ .template-product .product-form__input > .form__label, .template-product fieldset.js-contents legend { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: #1C1C1C !important; margin-bottom: 12px !important; } /* ── Variant pills (size — Queen/King) ── */ .template-product .variant-radios .swatch-input--radio + label, .template-product .variant-radios input[type="radio"] + label, .template-product fieldset.js-contents .swatch:not(.swatch--image) label { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 300 !important; letter-spacing: 0.08em !important; color: #1C1C1C !important; border: 1px solid #C8C4BB !important; border-radius: 0 !important; padding: 10px 20px !important; background: transparent !important; transition: border-color 0.2s, background 0.2s !important; min-width: 64px !important; text-align: center !important; } .template-product .variant-radios .swatch-input--radio:checked + label, .template-product .variant-radios input[type="radio"]:checked + label { border-color: #1C1C1C !important; background: #1C1C1C !important; color: #F6F5F0 !important; } .template-product .variant-radios .swatch-input--radio + label:hover { border-color: #1C1C1C !important; } /* ── Colour swatches ── */ .template-product .swatch-input--radio.color + label, .template-product .color-swatch { border-radius: 50% !important; width: 28px !important; height: 28px !important; padding: 0 !important; min-width: unset !important; border: 2px solid transparent !important; outline: 2px solid transparent !important; } .template-product .swatch-input--radio.color:checked + label { outline: 2px solid #1C1C1C !important; outline-offset: 2px !important; border: 2px solid #ffffff !important; background: initial !important; color: initial !important; } /* ── Quantity selector ── */ .template-product .quantity { border: 1px solid #C8C4BB !important; border-radius: 0 !important; height: 44px !important; } .template-product .quantity__button { font-size: 18px !important; color: #1C1C1C !important; background: transparent !important; border: none !important; width: 44px !important; } .template-product .quantity__input { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 300 !important; color: #1C1C1C !important; background: transparent !important; border: none !important; border-left: 1px solid #C8C4BB !important; border-right: 1px solid #C8C4BB !important; } /* ── Add to cart button ── */ .template-product .product-form__submit[name="add"] { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; background: #304038 !important; color: #F6F5F0 !important; border: none !important; border-radius: 0 !important; height: 52px !important; transition: opacity 0.2s !important; } .template-product .product-form__submit[name="add"]:hover { opacity: 0.85 !important; background: #304038 !important; } /* ── Buy it now button ── */ .template-product .shopify-payment-button__button--unbranded { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 11px !important; font-weight: 400 !important; letter-spacing: 0.20em !important; text-transform: uppercase !important; background: transparent !important; color: #1C1C1C !important; border: 1px solid #8A8A86 !important; border-radius: 0 !important; height: 52px !important; transition: border-color 0.2s !important; } .template-product .shopify-payment-button__button--unbranded:hover { border-color: #1C1C1C !important; background: transparent !important; } /* ── Product description bullet lines ── */ .template-product .product__description li, .template-product .product__description p { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.8 !important; color: #1C1C1C !important; } /* ── Accordion blocks (What's Included, Care, Delivery) ── */ .template-product details.accordion > summary { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: #1C1C1C !important; padding: 18px 0 !important; border-top: 1px solid #E0DDD6 !important; } .template-product details.accordion[open] > summary { border-bottom: none !important; } .template-product details.accordion .accordion__content p, .template-product details.accordion .accordion__content li { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 300 !important; line-height: 1.85 !important; color: #1C1C1C !important; } /* ── Specs / metafields table if present ── */ .template-product .product__column-sticky table td, .template-product .product__column-sticky table th { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 300 !important; color: #1C1C1C !important; padding: 10px 0 !important; border-bottom: 1px solid #E0DDD6 !important; letter-spacing: 0.03em !important; } .template-product .product__column-sticky table th { letter-spacing: 0.12em !important; text-transform: uppercase !important; font-size: 10px !important; opacity: 0.70 !important; } /* ── Trust bar ── */ .template-product .product__description .icon-with-text, .template-product [class*="trust"] { font-family: 'DM Sans', Helvetica, sans-serif !important; font-size: 10px !important; letter-spacing: 0.15em !important; text-transform: uppercase !important; color: #1C1C1C !important; } /* ── Thumbnail strip ── */ .template-product .thumbnail-slider .thumbnail { border: 1px solid transparent !important; border-radius: 0 !important; } .template-product .thumbnail-slider .thumbnail.is-active, .template-product .thumbnail-slider .thumbnail:hover { border-color: #1C1C1C !important; } /* ── Mobile ── */ @media (max-width: 768px) { .template-product .product__info-wrapper { padding: 32px var(--tx-pad-h-mob) 48px !important; } .template-product .product__title { font-size: 24px !important; } } /* ============================================================ TEXAURA — Newsletter + Trust Strip Paste into texaura-design-system.css at the bottom Covers: .txnw (newsletter) + .txtr (trust strip) ============================================================ */ /* ───────────────────────────────────────────── NEWSLETTER (.txnw) ───────────────────────────────────────────── */ .txnw { background: var(--tx-paper); border-top: 1px solid #E0DDD6; padding: 100px var(--tx-pad-h); text-align: center; } .txnw__inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 0; } .txnw__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #4A4A48; display: block; margin-bottom: 18px; } .txnw__title { font-family: var(--tx-font-heading); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 16px; } .txnw__body { font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; line-height: 1.85; color: rgba(28,28,28,0.58); max-width: 420px; margin-bottom: 36px; } .txnw__form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .txnw__field-wrap { display: flex; width: 100%; max-width: 440px; } .txnw__input { flex: 1; padding: 14px 18px; font-family: var(--tx-font-body); font-size: 13px; background: none; border: 1px solid #C8C4BB; border-right: none; color: var(--tx-ink); outline: none; -webkit-appearance: none; border-radius: 0; transition: border-color 0.2s; } .txnw__input:focus { border-color: var(--tx-ink); } .txnw__input::placeholder { color: #4A4A48; } .txnw__btn { padding: 14px 24px; background: var(--tx-ink); color: var(--tx-paper); font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid var(--tx-ink); cursor: pointer; white-space: nowrap; transition: opacity 0.2s; border-radius: 0; } .txnw__btn:hover { opacity: 1; } .txnw__note { font-family: var(--tx-font-body); font-size: 11px; color: #4A4A48; letter-spacing: 0.04em; } .txnw__success { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; font-style: italic; color: var(--tx-ink); line-height: 1.5; } @media (max-width: 768px) { .txnw { padding: 80px var(--tx-pad-h-mob); } .txnw__field-wrap { max-width: 100%; flex-direction: column; } .txnw__input { border-right: 1px solid #C8C4BB; border-bottom: none; } .txnw__btn { padding: 14px; } } /* ───────────────────────────────────────────── TRUST STRIP (.txtr) ───────────────────────────────────────────── */ .txtr { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid #E0DDD6; background: var(--tx-paper); } .txtr__item { padding: 40px 32px; border-right: 1px solid #E0DDD6; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; } .txtr__item:last-child { border-right: none; } .txtr__icon { width: 32px; height: 32px; color: var(--tx-ink); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; } .txtr__label { font-family: var(--tx-font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-ink); line-height: 1.5; } .txtr__text { font-family: var(--tx-font-body); font-size: 13px; font-weight: 400; line-height: 1.7; color: #6A6A66; } @media (max-width: 900px) { .txtr { grid-template-columns: repeat(2, 1fr); } .txtr__item:nth-child(2) { border-right: none; } .txtr__item:nth-child(3) { border-top: 1px solid #E0DDD6; } .txtr__item:nth-child(4) { border-top: 1px solid #E0DDD6; } } @media (max-width: 480px) { .txtr { grid-template-columns: 1fr; } .txtr__item { border-right: none; border-bottom: 1px solid #E0DDD6; padding: 32px 24px; } .txtr__item:last-child { border-bottom: none; } } /* ============================================================= MIGRATED SECTION CSS — Honest Standard Page Source: tx-page-honest-standard.liquid ============================================================= */ .txhs { background: var(--tx-paper); padding-bottom: 0; } /* ── Header ── */ .txhs .txhs__header { padding: 100px var(--tx-pad-h) 80px; max-width: 860px; margin: 0 auto; border-bottom: 1px solid var(--tx-border); } .txhs .txhs__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink); display: block; margin-bottom: 24px; } .txhs .txhs__title { font-family: var(--tx-font-heading); font-size: clamp(36px, 5.5vw, 64px); font-weight: 400; color: var(--tx-ink); margin: 0 0 40px; } .txhs .txhs__rule { width: 32px; height: 1px; background: var(--tx-ink); margin: 0 0 32px; } .txhs .txhs__tagline { font-family: var(--tx-font-heading); font-size: 18px; font-weight: 400; font-style: normal; color: var(--tx-ink); margin: 0 0 32px; } .txhs .txhs__questions { display: flex; flex-direction: column; gap: 8px; max-width: 600px; } .txhs .txhs__question { font-family: var(--tx-font-body); font-size: var(--tx-size-body-lg, 15px); font-weight: 300; line-height: 1.8; color: var(--tx-ink); margin: 0; } /* ── Editorial images ── */ .txhs .txhs__image-holder { width: 70%; aspect-ratio: 16 / 9; margin: 96px auto; overflow: hidden; background: var(--tx-paper-dark); } .txhs .txhs__image-holder--bottom { margin-top: 40px; } .txhs .txhs__image, .txhs .txhs__image-placeholder { width: 100%; height: 100%; display: block; object-fit: cover; } .txhs .txhs__image-placeholder { color: rgba(28,28,28,0.16); } /* ── Shared label ── */ .txhs .txhs__label { font-family: var(--tx-font-body); font-size: 12px; font-weight: 400; line-height: 1.4; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-ink); display: block; } /* ── Myths ── */ .txhs .txhs__myths { background: var(--tx-paper-dark, #EFEEE9); padding: 80px var(--tx-pad-h); border-bottom: 1px solid var(--tx-border); } .txhs .txhs__myths-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 48px; } .txhs .txhs__myths-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; background: var(--tx-border); } .txhs .txhs__myth { background: var(--tx-paper); padding: 40px 32px; display: flex; flex-direction: column; gap: 20px; } .txhs .txhs__myth-top { display: flex; align-items: baseline; gap: 12px; } .txhs .txhs__myth-num { font-family: var(--tx-font-body); font-size: 10px; font-weight: 300; letter-spacing: 0.12em; color: var(--tx-ink); } .txhs .txhs__myth-tag { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; color: var(--tx-ink); margin: 0; } .txhs .txhs__myth-claim, .txhs .txhs__myth-truth { display: flex; flex-direction: column; gap: 6px; } .txhs .txhs__myth-side { font-family: var(--tx-font-body); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); } .txhs .txhs__myth-side--truth { color: var(--tx-forest); } .txhs .txhs__myth-text { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--tx-ink); margin: 0; } .txhs .txhs__myth-divider { width: 100%; height: 1px; background: var(--tx-border); } /* ── The Choices ── */ .txhs .txhs__choices { max-width: calc(1100px + var(--tx-pad-h) + var(--tx-pad-h)); margin: 0 auto; padding: 80px var(--tx-pad-h); } .txhs .txhs__choices-header { padding-bottom: 56px; border-bottom: 1px solid var(--tx-border); margin-bottom: 0; } .txhs .txhs__choice-item { display: grid; grid-template-columns: 280px 1fr; gap: 48px; align-items: start; padding: 56px 0; border-bottom: 1px solid var(--tx-border); } .txhs .txhs__choice-item:last-child { border-bottom: none; } .txhs .txhs__choice-left { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 100px; } .txhs .txhs__choice-num { font-family: var(--tx-font-body); font-size: 10px; font-weight: 300; letter-spacing: 0.15em; color: var(--tx-ink); } .txhs .txhs__choice-title { font-family: var(--tx-font-heading); font-size: 20px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin: 0; } .txhs .txhs__choice-right { display: flex; flex-direction: column; gap: 16px; } .txhs .txhs__choice-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); margin: 0; } /* ── Impact list ── */ .txhs .txhs__impact-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .txhs .txhs__impact-list li { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: 1.7; color: var(--tx-ink); padding: 12px 0 12px 20px; border-bottom: 1px solid var(--tx-border); position: relative; } .txhs .txhs__impact-list li::before { content: '—'; position: absolute; left: 0; font-size: 11px; color: var(--tx-ink); } .txhs .txhs__choice-note { font-family: var(--tx-font-body); font-size: 12px; font-weight: 300; letter-spacing: 0.08em; color: var(--tx-ink); margin: 8px 0 0; text-transform: uppercase; } /* ── Closing ── */ .txhs .txhs__closing { background: var(--tx-paper-dark, #EFEEE9); padding: 100px var(--tx-pad-h); text-align: center; } .txhs .txhs__closing-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } .txhs .txhs__closing-quote { font-family: var(--tx-font-heading); font-size: clamp(17px, 2vw, 21px); font-weight: 400; font-style: normal; line-height: 1.55; color: var(--tx-ink); margin: 0; padding: 0; border: none; } .txhs .txhs__closing-body { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: 1.8; color: var(--tx-ink); margin: 0; } .txhs .txhs__closing-link { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); border-bottom: 1px solid var(--tx-ink); padding-bottom: 2px; text-decoration: none; transition: opacity 0.2s; } .txhs .txhs__closing-link:hover { opacity: 1; } /* ── Mobile ── */ @media (max-width: 900px) { .txhs .txhs__myths-grid { grid-template-columns: 1fr; } .txhs .txhs__choice-item { grid-template-columns: 1fr; gap: 24px; } .txhs .txhs__choice-left { position: static; } } @media (max-width: 768px) { .txhs .txhs__header { padding: 72px var(--tx-pad-h-mob) 56px; } .txhs .txhs__image-holder { width: calc(100% - 48px); margin: 64px auto; } .txhs .txhs__image-holder--bottom { margin-top: 24px; } .txhs .txhs__myths { padding: 64px var(--tx-pad-h-mob); } .txhs .txhs__choices { padding: 56px var(--tx-pad-h-mob); } .txhs .txhs__closing { padding: 72px var(--tx-pad-h-mob); } } /* ============================================================= MIGRATED SECTION CSS — Contact Section Source: tx-section-contact.liquid ============================================================= */ .txct { background: var(--tx-paper); padding: 80px var(--tx-pad-h) 140px; } /* ── Header ── */ .txct .txct__header { text-align: center; max-width: 640px; margin: 0 auto 80px; } .txct .txct__title { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 24px; } .txct .txct__intro { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 400; line-height: var(--tx-lh-body); color: var(--tx-ink); max-width: 520px; margin: 0 auto 40px; } .txct .txct__rule { width: 1px; height: 56px; background: var(--tx-border-mid); margin: 0 auto; } /* ── Body — two columns ── */ .txct .txct__body { display: grid; grid-template-columns: 3fr 2fr; gap: 100px; max-width: 1100px; margin: 0 auto; align-items: start; } /* ── Column title ── */ .txct .txct__col-title { font-family: var(--tx-font-heading) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--tx-ink) !important; margin-bottom: 12px !important; } .txct .txct__col-intro { font-family: var(--tx-font-body); font-size: 13px; font-weight: 400; line-height: 1.8; color: var(--tx-ink); margin-bottom: 36px; } /* ── Form ── */ .txct .txct__form { display: flex; flex-direction: column; gap: 28px; } .txct .txct__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .txct .txct__field { display: flex; flex-direction: column; gap: 8px; } .txct .txct__label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-ink); } .txct .txct__label span { color: var(--tx-ink); } .txct .txct__input, .txct .txct__select, .txct .txct__textarea { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 400; color: var(--tx-ink); background: none; border: none; border-bottom: 1px solid var(--tx-border-mid); padding: 10px 0; outline: none; width: 100%; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; border-radius: 0; } .txct .txct__input:focus, .txct .txct__select:focus, .txct .txct__textarea:focus { border-color: var(--tx-ink); } .txct .txct__textarea { resize: none; line-height: 1.7; } .txct .txct__select { cursor: pointer; } .txct .txct__privacy { font-family: var(--tx-font-body); font-size: 11px; line-height: 1.7; color: var(--tx-ink-muted); } .txct .txct__privacy a { color: var(--tx-ink); border-bottom: 1px solid var(--tx-border-mid); padding-bottom: 1px; transition: border-color 0.2s; } .txct .txct__privacy a:hover { border-color: var(--tx-ink); } .txct .txct__submit { width: 100%; padding: 16px; background: var(--tx-ink); color: var(--tx-paper); font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; border: 1px solid var(--tx-ink); cursor: pointer; transition: opacity 0.2s; margin-top: 8px; } .txct .txct__submit:hover { opacity: 1; } .txct .txct__success { font-family: var(--tx-font-body); font-size: var(--tx-size-body); line-height: 1.8; color: var(--tx-ink); padding: 24px 0; border-top: 1px solid var(--tx-border); border-bottom: 1px solid var(--tx-border); } /* ── Right: contact info ── */ .txct .txct__right { display: flex; flex-direction: column; gap: 0; padding-top: 0; } .txct .txct__info-block { padding: 20px 0; border-bottom: 1px solid var(--tx-border); display: flex; flex-direction: column; gap: 6px; } .txct .txct__info-block:first-of-type { border-top: 1px solid var(--tx-border); } .txct .txct__info-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-ink); } .txct .txct__info-link { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; color: var(--tx-ink); text-decoration: none; transition: opacity 0.2s; display: block; } .txct .txct__info-link:hover { opacity: 1; } .txct .txct__info-link--icon { display: flex; align-items: center; gap: 8px; } .txct .txct__social { display: flex; flex-direction: column; gap: 12px; margin-top: 4px; } .txct .txct__social-link { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; color: var(--tx-ink); text-decoration: none; display: flex; align-items: center; gap: 10px; transition: opacity 0.2s; } .txct .txct__social-link:hover { opacity: 1; } .txct .txct__info-body { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: 1.8; color: var(--tx-ink); } .txct .txct__privacy { font-family: var(--tx-font-body); font-size: 11px; line-height: 1.7; color: var(--tx-ink); } .txct .txct__privacy a { color: var(--tx-ink); border-bottom: 1px solid var(--tx-ink); padding-bottom: 1px; transition: opacity 0.2s; } .txct .txct__privacy a:hover { opacity: 1; } /* ── Mobile ── */ @media (max-width: 768px) { .txct { padding: 60px var(--tx-pad-h-mob) 100px; } .txct .txct__body { grid-template-columns: 1fr; gap: 64px; } .txct .txct__right { padding-top: 0; } .txct .txct__row { grid-template-columns: 1fr; gap: 28px; } } /* ============================================================= MIGRATED SECTION CSS — Journal Blog Source: tx-blog-journal.liquid ============================================================= */ .txjn { background: var(--tx-paper); padding-bottom: 0; } /* ── Header ── */ .txjn .txjn__header { padding: 80px var(--tx-pad-h) 48px; border-bottom: 1px solid var(--tx-border); } .txjn .txjn__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink); display: block; margin-bottom: 16px; } .txjn .txjn__header-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .txjn .txjn__title { font-family: var(--tx-font-heading); font-size: clamp(28px, 4vw, 44px); font-weight: 400; color: var(--tx-ink); margin: 0; line-height: 1.1; } .txjn .txjn__filter { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .txjn .txjn__filter-btn { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-ink); text-decoration: none; opacity: 0.4; transition: opacity 0.2s; padding-bottom: 2px; border-bottom: 1px solid transparent; } .txjn .txjn__filter-btn:hover { opacity: 0.8; } .txjn .txjn__filter-btn--active { opacity: 1; border-bottom-color: var(--tx-ink); } /* ── Shared meta elements ── */ .txjn .txjn__tag { font-family: var(--tx-font-body); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); } .txjn .txjn__date { font-family: var(--tx-font-body); font-size: 11px; font-weight: 300; color: var(--tx-ink); } /* ── Featured post ── */ .txjn .txjn__featured { display: grid; grid-template-columns: 55fr 45fr; min-height: 560px; border-bottom: 1px solid var(--tx-border); } .txjn .txjn__featured-img-wrap { display: block; overflow: hidden; position: relative; } .txjn .txjn__featured-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; } .txjn .txjn__featured-img-wrap:hover img { transform: scale(1.02); } .txjn .txjn__featured-img-placeholder { width: 100%; height: 100%; min-height: 560px; background: linear-gradient(145deg, #d4d0c0 0%, #b8b2a0 100%); } .txjn .txjn__featured-text { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; gap: 20px; background: var(--tx-paper); } .txjn .txjn__featured-meta { display: flex; align-items: center; gap: 16px; } .txjn .txjn__featured-title { font-family: var(--tx-font-heading); font-size: clamp(22px, 3vw, 32px); font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin: 0; } .txjn .txjn__featured-title a { color: var(--tx-ink); text-decoration: none; } .txjn .txjn__featured-excerpt { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: 1.8; color: var(--tx-ink); margin: 0; } .txjn .txjn__featured-link { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); text-decoration: none; border-bottom: 1px solid var(--tx-ink); padding-bottom: 2px; width: fit-content; margin-top: 8px; transition: opacity 0.2s; } .txjn .txjn__featured-link:hover { opacity: 1; } /* ── Article grid ── */ .txjn .txjn__grid-wrap { padding: 64px var(--tx-pad-h) 80px; } .txjn .txjn__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; } .txjn .txjn__card { display: flex; flex-direction: column; gap: 0; } .txjn .txjn__card-img-wrap { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--tx-paper-dark, #EFEEE9); } .txjn .txjn__card-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .txjn .txjn__card-img-wrap:hover img { transform: scale(1.03); } .txjn .txjn__card-img-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg, #d4d0c0 0%, #b8b2a0 100%); } .txjn .txjn__card-body { padding: 20px 0 0; display: flex; flex-direction: column; gap: 10px; background: transparent; } .txjn .txjn__card-meta { display: flex; align-items: center; gap: 12px; } .txjn .txjn__card-title { font-family: var(--tx-font-heading); font-size: 17px; font-weight: 400; line-height: 1.3; color: var(--tx-ink); margin: 0; } .txjn .txjn__card-title a { color: var(--tx-ink); text-decoration: none; transition: opacity 0.2s; } .txjn .txjn__card-title a:hover { opacity: 1; } /* ── Pagination ── */ .txjn .txjn__pagination { display: flex; align-items: center; justify-content: center; gap: 40px; padding: 0 var(--tx-pad-h) 80px; border-top: 1px solid var(--tx-border); padding-top: 40px; } .txjn .txjn__page-link { font-family: var(--tx-font-body); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink); text-decoration: none; border-bottom: 1px solid var(--tx-ink); padding-bottom: 2px; transition: opacity 0.2s; } .txjn .txjn__page-link:hover { opacity: 1; } .txjn .txjn__page-count { font-family: var(--tx-font-body); font-size: 11px; font-weight: 300; color: var(--tx-ink); letter-spacing: 0.1em; } /* ── Mobile ── */ @media (max-width: 900px) { .txjn .txjn__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .txjn .txjn__header { padding: 64px var(--tx-pad-h-mob) 40px; } .txjn .txjn__header-row { flex-direction: column; align-items: flex-start; } .txjn .txjn__featured { grid-template-columns: 1fr; } .txjn .txjn__featured-img-wrap { min-height: 280px; aspect-ratio: 4/3; } .txjn .txjn__featured-text { padding: 40px var(--tx-pad-h-mob); } .txjn .txjn__grid-wrap { padding: 48px var(--tx-pad-h-mob) 64px; } .txjn .txjn__grid { grid-template-columns: 1fr; gap: 40px; } } /* ============================================================= MIGRATED SECTION CSS — Journal Article Source: tx-article-journal.liquid ============================================================= */ .txar { background: var(--tx-paper); padding-bottom: 0; } /* ── Back link ── */ .txar .txar__back-wrap { padding: 40px var(--tx-pad-h) 0; max-width: 1200px; margin: 0 auto; } .txar .txar__back { font-family: var(--tx-font-body); font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink); text-decoration: none; opacity: 1; transition: opacity 0.2s; } .txar .txar__back:hover { opacity: 1; } /* ── Header ── */ .txar .txar__header { padding: 48px var(--tx-pad-h) 56px; } .txar .txar__header-inner { max-width: 720px; margin: 0 auto; } .txar .txar__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .txar .txar__tag { font-family: var(--tx-font-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink); text-decoration: none; border-bottom: 1px solid var(--tx-ink); padding-bottom: 1px; } .txar .txar__date, .txar .txar__read-time { font-family: var(--tx-font-body); font-size: 11px; font-weight: 300; color: var(--tx-ink); letter-spacing: 0.05em; } .txar .txar__title { font-family: var(--tx-font-heading); font-size: clamp(32px, 4.5vw, 48px); font-weight: 400; line-height: 1.1; color: var(--tx-ink); margin: 0 0 24px; letter-spacing: -0.01em; } .txar .txar__excerpt { font-family: var(--tx-font-body); font-size: 17px; font-weight: 300; line-height: 1.7; color: var(--tx-ink); margin: 0; } /* ── Hero image ── */ .txar .txar__hero { width: 100%; max-height: 580px; overflow: hidden; } .txar .txar__hero img { width: 100%; height: 100%; object-fit: cover; display: block; max-height: 580px; } /* ── Article body — white reading surface ── */ .txar .txar__body-wrap { padding: 72px var(--tx-pad-h); } .txar .txar__body { max-width: 720px; margin: 0 auto; background: var(--tx-white, #FFFFFF); padding: 64px 72px; } /* ── Kill Dawn's article content overrides ── */ .article-template__content, .article-template__content p, .article-template__content h1, .article-template__content h2, .article-template__content h3, .article-template__content h4, .article-template__content li { font-size: unset !important; line-height: unset !important; font-family: unset !important; } /* ── Body typography ── */ .txar .txar__body p { font-family: var(--tx-font-body) !important; font-size: 16px !important; font-weight: 300 !important; line-height: 2.0 !important; color: var(--tx-ink) !important; margin: 0 0 24px !important; } .txar .txar__body h2 { font-family: var(--tx-font-heading) !important; font-size: 22px !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--tx-ink) !important; margin: 48px 0 20px !important; } .txar .txar__body h3 { font-family: var(--tx-font-heading) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--tx-ink) !important; margin: 36px 0 16px !important; } .txar .txar__body h4 { font-family: var(--tx-font-body) !important; font-size: 12px !important; font-weight: 400 !important; letter-spacing: 0.18em !important; text-transform: uppercase !important; color: var(--tx-ink) !important; margin: 32px 0 12px !important; } .txar .txar__body a { color: var(--tx-ink) !important; text-decoration: underline !important; text-underline-offset: 3px !important; } .txar .txar__body ul, .txar .txar__body ol { padding-left: 24px !important; margin: 0 0 24px !important; } .txar .txar__body li { font-family: var(--tx-font-body) !important; font-size: 16px !important; font-weight: 300 !important; line-height: var(--tx-lh-body) !important; color: var(--tx-ink) !important; margin-bottom: 8px !important; } .txar .txar__body table { width: 100% !important; border-collapse: collapse !important; margin: 40px 0 !important; font-family: var(--tx-font-body) !important; font-size: 13px !important; line-height: 1.65 !important; color: var(--tx-ink) !important; } .txar .txar__body th, .txar .txar__body td { padding: 16px 14px !important; border-top: 1px solid var(--tx-border) !important; text-align: left !important; vertical-align: top !important; } .txar .txar__body thead th { font-size: 10px !important; font-weight: 400 !important; letter-spacing: var(--tx-ls-tag) !important; text-transform: uppercase !important; color: var(--tx-ink-muted) !important; } .txar .txar__body tbody tr:last-child td { border-bottom: 1px solid var(--tx-border) !important; } .txar .txar__body blockquote { margin: 40px 0 !important; padding: 0 0 0 24px !important; border-left: 2px solid #304038 !important; } .txar .txar__body blockquote p { font-family: var(--tx-font-heading) !important; font-size: 20px !important; font-weight: 400 !important; font-style: normal !important; line-height: 1.55 !important; color: var(--tx-ink) !important; margin: 0 !important; } .txar .txar__body img { width: 100% !important; height: auto !important; display: block !important; margin: 40px 0 !important; } .txar .txar__body hr { border: none !important; border-top: 1px solid var(--tx-border) !important; margin: 48px 0 !important; } .txar .txar__body strong { font-weight: 500 !important; color: var(--tx-ink) !important; } /* ── Author ── */ .txar .txar__author-wrap { padding: 0 var(--tx-pad-h) 56px; } .txar .txar__author { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding-top: 24px; border-top: 1px solid var(--tx-border); } .txar .txar__author-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-ink); } .txar .txar__author-name { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; color: var(--tx-ink); } /* ── Related posts ── */ .txar .txar__related { background: var(--tx-paper-dark, #EFEEE9); padding: 72px var(--tx-pad-h) 80px; border-top: 1px solid var(--tx-border); } .txar .txar__related-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .txar .txar__related-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink); } .txar .txar__related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .txar .txar__related-card { display: flex; flex-direction: column; gap: 0; } .txar .txar__related-img-wrap { display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #d4d0c0; } .txar .txar__related-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .txar .txar__related-img-wrap:hover img { transform: scale(1.03); } .txar .txar__related-placeholder { width: 100%; height: 100%; background: linear-gradient(145deg, #d4d0c0 0%, #b8b2a0 100%); } .txar .txar__related-body { padding: 18px 0 0; display: flex; flex-direction: column; gap: 8px; } .txar .txar__related-meta { display: flex; align-items: center; gap: 12px; } .txar .txar__related-title { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; line-height: 1.3; color: var(--tx-ink); margin: 0; } .txar .txar__related-title a { color: var(--tx-ink); text-decoration: none; transition: opacity 0.2s; } .txar .txar__related-title a:hover { opacity: 1; } .txar .txar__related-cta { text-align: center; } .txar .txar__related-link { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); text-decoration: none; border-bottom: 1px solid var(--tx-ink); padding-bottom: 2px; transition: opacity 0.2s; } .txar .txar__related-link:hover { opacity: 1; } /* ── Mobile ── */ @media (max-width: 900px) { .txar .txar__related-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .txar .txar__back-wrap { padding: 32px var(--tx-pad-h-mob) 0; } .txar .txar__header { padding: 40px var(--tx-pad-h-mob) 48px; } .txar .txar__body-wrap { padding: 48px var(--tx-pad-h-mob); } .txar .txar__body { padding: 40px 28px; } .txar .txar__body p, .txar .txar__body li { font-size: var(--tx-size-body-lg, 15px); } .txar .txar__body blockquote p { font-size: 18px; } .txar .txar__author-wrap { padding: 0 var(--tx-pad-h-mob) 48px; } .txar .txar__related { padding: 56px var(--tx-pad-h-mob) 64px; } .txar .txar__related-grid { grid-template-columns: 1fr; } } /* ============================================================= MIGRATED SECTION CSS — Footer Source: tx-footer.liquid ============================================================= */ /* ============================================================= TX FOOTER — texaura.com (Dawn theme) Mirrors texaura.in Prestige footer layout. ============================================================= */ /* ── Hide Dawn's native footer ── */ footer.footer { display: none !important; } /* ── Footer wrapper ── */ .tx-footer { background: #FDFDFC; border-top: 1px solid #E5E1D8; font-family: var(--tx-font-body); -webkit-font-smoothing: antialiased; } /* ── Main grid — 4 columns ── */ .tx-footer__inner { display: grid; grid-template-columns: 1fr 1fr 1.4fr 1.4fr; gap: 48px; max-width: 1440px; margin: 0 auto; padding: 72px 64px 56px; } /* ── Column heading ── */ .tx-footer__heading { font-family: var(--tx-font-heading); font-size: 11px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tx-ink); margin: 0 0 20px 0; } /* ── Link list ── */ .tx-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .tx-footer__links a { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; color: var(--tx-ink); text-decoration: none; opacity: 1; transition: opacity 0.2s ease; } .tx-footer__links a:hover { opacity: 1; text-decoration: none; } /* ── Newsletter column ── */ .tx-footer__newsletter-desc { font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--tx-ink); opacity: 1; margin: 0 0 20px 0; } .tx-footer__form-row { display: flex; flex-direction: column; gap: 10px; } .tx-footer__input { width: 100%; padding: 12px 14px; font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; color: var(--tx-ink); background: var(--tx-white, #FFFFFF); border: 1px solid #E5E1D8; border-radius: 0; outline: none; transition: border-color 0.2s ease; } .tx-footer__input::placeholder { color: var(--tx-ink-muted); } .tx-footer__input:focus { border-color: var(--tx-forest); } .tx-footer__btn { display: inline-block; width: fit-content; padding: 12px 28px; background: var(--tx-forest); color: var(--tx-paper); font-family: var(--tx-font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.20em; text-transform: uppercase; border: none; border-radius: 0; cursor: pointer; transition: opacity 0.2s ease; } .tx-footer__btn:hover { opacity: 1; } .tx-footer__success { font-size: 12px; color: var(--tx-forest); margin-top: 10px; } .tx-footer__error { font-size: 12px; color: #8B0000; margin-top: 10px; } /* ── About column ── */ .tx-footer__about-text { font-size: 13px; font-weight: 300; line-height: 1.75; color: var(--tx-ink); opacity: 0.8; margin: 0 0 16px 0; } .tx-footer__about-text strong { font-weight: 500; opacity: 1; } /* ── Bottom bar ── */ .tx-footer__bottom { border-top: 1px solid #E5E1D8; } .tx-footer__bottom-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1440px; margin: 0 auto; padding: 20px 64px; } .tx-footer__copy { font-size: 11px; font-weight: 300; color: var(--tx-ink); opacity: 1; margin: 0; } .tx-footer__social { display: flex; gap: 16px; align-items: center; } .tx-footer__social a { color: var(--tx-ink); opacity: 1; text-decoration: none; transition: opacity 0.2s ease; display: flex; align-items: center; } .tx-footer__social a:hover { opacity: 1; } /* ── Mobile ── */ @media (max-width: 900px) { .tx-footer__inner { grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 24px 40px; } .tx-footer__col--newsletter, .tx-footer__col--about { grid-column: span 2; } .tx-footer__bottom-inner { padding: 16px 24px; flex-direction: column; gap: 12px; text-align: center; } } @media (max-width: 480px) { .tx-footer__inner { grid-template-columns: 1fr; gap: 36px; } .tx-footer__col--newsletter, .tx-footer__col--about { grid-column: span 1; } } /* ============================================================= MIGRATED SECTION CSS — About Page Source: tx-page-about.liquid ============================================================= */ .txab { background: var(--tx-paper); } .txab .txab__block { max-width: 640px; margin: 0 auto; padding: 100px var(--tx-pad-h); display: grid; grid-template-columns: 120px 1fr; gap: 0 48px; align-items: start; } .txab .txab__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-muted); padding-top: 4px; } .txab .txab__content { display: flex; flex-direction: column; gap: 24px; } .txab .txab__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); text-align: justify; margin: 0; } .txab .txab__divider { max-width: 640px; margin: 0 auto; border: none; border-top: 1px solid var(--tx-border); } @media (max-width: 768px) { .txab .txab__block { grid-template-columns: 1fr; gap: 20px 0; padding: 64px var(--tx-pad-h-mob); } } /* ============================================================= MIGRATED SECTION CSS — Hotels Page Source: tx-page-hotels.liquid ============================================================= */ .txht { background: var(--tx-paper); padding-bottom: 0; } /* ── Header ── */ .txht .txht__header { padding: 100px var(--tx-pad-h) 72px; text-align: center; border-bottom: 1px solid var(--tx-border); } .txht .txht__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-muted); display: block; margin-bottom: 16px; } .txht .txht__title { font-family: var(--tx-font-heading); font-size: clamp(28px, 4.5vw, 56px); font-weight: 400; line-height: 1.12; color: var(--tx-ink); margin: 0 0 36px; } .txht .txht__rule { width: 1px; height: 56px; background: var(--tx-border-mid); margin: 0 auto 36px; } .txht .txht__lead { font-family: var(--tx-font-body); font-size: var(--tx-size-body-lg, 15px); font-weight: 300; line-height: var(--tx-lh-body); color: var(--tx-ink-soft); max-width: 680px; margin: 0 auto; } /* ── Perspective ── */ .txht .txht__perspective { background: var(--tx-paper-dark, #EFEEE9); padding: 96px var(--tx-pad-h); border-bottom: 1px solid var(--tx-border); } .txht .txht__perspective-inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; } .txht .txht__quote { font-family: var(--tx-font-heading); font-size: clamp(18px, 2.2vw, 24px); font-weight: 400; font-style: normal; line-height: 1.55; color: var(--tx-ink); margin: 12px 0; padding: 0; border: none; } .txht .txht__perspective-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); margin: 0; } /* ── Section label (shared) ── */ .txht .txht__section-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink-muted); } /* ── Split sections ── */ .txht .txht__section--split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--tx-border); min-height: 520px; } .txht .txht__section--rev .txht__section-img { order: 2; } .txht .txht__section--rev .txht__section-text { order: 1; } .txht .txht__section-img { overflow: hidden; display: flex; align-items: flex-end; padding: 40px; min-height: 520px; position: relative; } .txht .txht__section-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .txht .txht__section-img--1 { background: linear-gradient(145deg, #d4d0c0 0%, #b0aa96 100%); } .txht .txht__section-img--2 { background: linear-gradient(145deg, #c8ccd0 0%, #a0a8b0 100%); } .txht .txht__section-img--3 { background: linear-gradient(145deg, #c8d0c8 0%, #a0b09a 100%); } .txht .txht__section-num { font-family: var(--tx-font-heading); font-size: 72px; font-weight: 400; color: var(--tx-ink-faint); line-height: 1; position: relative; z-index: 1; } .txht .txht__section-text { padding: 72px 80px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .txht .txht__section-title { font-family: var(--tx-font-heading); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); } .txht .txht__section-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: 420px; } /* ── Cert tags ── */ .txht .txht__cert { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--tx-border); flex-wrap: wrap; } .txht .txht__cert-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink-muted); } .txht .txht__cert-tag { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink); padding: 8px 16px; border: 1px solid var(--tx-border-mid); } /* ── Inline quote ── */ .txht .txht__inline-quote { font-family: var(--tx-font-heading); font-size: var(--tx-size-body-lg, 15px); font-weight: 400; font-style: normal; line-height: 1.6; color: var(--tx-ink); margin: 8px 0 0; padding: 20px 0 0; border-top: 1px solid var(--tx-border); max-width: 420px; } /* ── Specifications ── */ .txht .txht__specs { padding: 80px var(--tx-pad-h); border-bottom: 1px solid var(--tx-border); } .txht .txht__specs-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 32px; } .txht .txht__specs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--tx-border); border-left: 1px solid var(--tx-border); margin-top: 16px; } .txht .txht__spec-item { display: flex; flex-direction: column; gap: 8px; padding: 28px 32px; border-right: 1px solid var(--tx-border); border-bottom: 1px solid var(--tx-border); } .txht .txht__spec-key { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--tx-ink-muted); } .txht .txht__spec-val { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; line-height: 1.6; color: var(--tx-ink); } /* ── Form ── */ .txht .txht__form-wrap { padding: 96px var(--tx-pad-h); border-bottom: 1px solid var(--tx-border); } .txht .txht__form-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 80px; align-items: start; } .txht .txht__form-intro { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; } .txht .txht__form-title { font-family: var(--tx-font-heading); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin: 8px 0 0; } .txht .txht__form-desc { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--tx-ink-soft); margin: 0; } .txht .txht__form-email { font-family: var(--tx-font-body); font-size: 12px; font-weight: 300; line-height: 1.8; color: var(--tx-ink-muted); margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--tx-border); } .txht .txht__form-email a { color: var(--tx-ink); text-decoration: none; border-bottom: 1px solid var(--tx-border-mid); padding-bottom: 1px; } .txht .txht__form-fields { display: flex; flex-direction: column; gap: 20px; } .txht .txht__form-row { display: flex; flex-direction: column; gap: 20px; } .txht .txht__form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .txht .txht__field { display: flex; flex-direction: column; gap: 8px; } .txht .txht__label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink-muted); } .txht .txht__label span { color: #8A8A86; } .txht .txht__input { width: 100%; padding: 13px 14px; font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; color: var(--tx-ink); background: var(--tx-white, #FFFFFF); border: 1px solid var(--tx-border-mid); border-radius: 0; outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; box-sizing: border-box; } .txht .txht__input::placeholder { color: var(--tx-border-mid); } .txht .txht__input:focus { border-color: var(--tx-forest); } .txht .txht__textarea { resize: vertical; min-height: 120px; } .txht .txht__select-wrap { position: relative; } .txht .txht__select { cursor: pointer; padding-right: 36px; } .txht .txht__select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--tx-ink-muted); pointer-events: none; } .txht .txht__btn { display: inline-block; padding: 14px 36px; background: var(--tx-forest); color: var(--tx-paper); font-family: var(--tx-font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border: none; cursor: pointer; transition: opacity 0.2s; margin-top: 8px; } .txht .txht__btn:hover { opacity: 1; } .txht .txht__success { font-family: var(--tx-font-body); font-size: 13px; color: var(--tx-forest); padding: 16px; border: 1px solid rgba(48,64,56,0.2); margin-top: 8px; } .txht .txht__error { font-family: var(--tx-font-body); font-size: 13px; color: #8B0000; margin-top: 8px; } /* ── Closing ── */ .txht .txht__closing { padding: 72px var(--tx-pad-h); text-align: center; } .txht .txht__closing-text { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; font-style: normal; color: var(--tx-ink); margin: 0; letter-spacing: 0.02em; } /* ── Mobile ── */ @media (max-width: 900px) { .txht .txht__specs-grid { grid-template-columns: 1fr 1fr; } .txht .txht__form-inner { grid-template-columns: 1fr; gap: 48px; } .txht .txht__form-intro { position: static; } } @media (max-width: 768px) { .txht .txht__header { padding: 72px var(--tx-pad-h-mob) 56px; } .txht .txht__perspective { padding: 64px var(--tx-pad-h-mob); } .txht .txht__section--split, .txht .txht__section--rev { grid-template-columns: 1fr; } .txht .txht__section--rev .txht__section-img { order: 0; } .txht .txht__section--rev .txht__section-text { order: 1; } .txht .txht__section-img { min-height: 280px; } .txht .txht__section-text { padding: 48px var(--tx-pad-h-mob); } .txht .txht__section-body { max-width: 100%; } .txht .txht__inline-quote { max-width: 100%; } .txht .txht__specs { padding: 56px var(--tx-pad-h-mob); } .txht .txht__specs-grid { grid-template-columns: 1fr; } .txht .txht__form-wrap { padding: 64px var(--tx-pad-h-mob); } .txht .txht__form-row--2 { grid-template-columns: 1fr; } .txht .txht__closing { padding: 56px var(--tx-pad-h-mob); } } /* ============================================================= MIGRATED SECTION CSS — Partner Page Source: tx-page-partner.liquid ============================================================= */ .txpp { background: var(--tx-paper); padding-bottom: 0; } .txpp .txpp__header { padding: 100px var(--tx-pad-h) 72px; text-align: center; border-bottom: 1px solid var(--tx-border); } .txpp .txpp__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-muted); display: block; margin-bottom: 16px; } .txpp .txpp__title { font-family: var(--tx-font-heading); font-size: clamp(40px, 6vw, 72px); font-weight: 400; line-height: 1.08; color: var(--tx-ink); margin: 0 0 36px; } .txpp .txpp__title em { font-style: normal; } .txpp .txpp__rule { width: 1px; height: 56px; background: var(--tx-border-mid); margin: 0 auto 36px; } .txpp .txpp__lead { font-family: var(--tx-font-body); font-size: var(--tx-size-body-lg, 15px); font-weight: 300; line-height: var(--tx-lh-body); color: var(--tx-ink-soft); max-width: 640px; margin: 0 auto; } .txpp .txpp__section--split { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--tx-border); min-height: 480px; } .txpp .txpp__section--rev .txpp__section-img { order: 2; } .txpp .txpp__section--rev .txpp__section-text { order: 1; } .txpp .txpp__section-img { overflow: hidden; display: flex; align-items: flex-end; padding: 40px; min-height: 480px; position: relative; } .txpp .txpp__section-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .txpp .txpp__section-img--1 { background: linear-gradient(145deg, #d4d0c0 0%, #b0aa96 100%); } .txpp .txpp__section-img--2 { background: linear-gradient(145deg, #c8d0c8 0%, #a0b09a 100%); } .txpp .txpp__section-num { font-family: var(--tx-font-heading); font-size: 72px; font-weight: 400; color: var(--tx-ink-faint); line-height: 1; position: relative; z-index: 1; } .txpp .txpp__section-text { padding: 72px 80px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .txpp .txpp__section-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink-muted); } .txpp .txpp__section-title { font-family: var(--tx-font-heading); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); } .txpp .txpp__section-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: 420px; } .txpp .txpp__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; max-width: 420px; } .txpp .txpp__list li { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--tx-ink-soft); padding: 10px 0 10px 16px; border-bottom: 1px solid var(--tx-border); position: relative; } .txpp .txpp__list li::before { content: '—'; position: absolute; left: 0; color: var(--tx-border-mid); font-size: 11px; } .txpp .txpp__bring { background: var(--tx-paper-dark, #EFEEE9); padding: 96px var(--tx-pad-h); border-bottom: 1px solid var(--tx-border); } .txpp .txpp__bring-inner { max-width: 1100px; margin: 0 auto; } .txpp .txpp__bring-title { font-family: var(--tx-font-heading); font-size: 22px; font-weight: 400; color: var(--tx-ink); margin: 16px 0 56px; } .txpp .txpp__bring-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .txpp .txpp__bring-item:nth-child(4), .txpp .txpp__bring-item:nth-child(5) { grid-column: auto; } @media (min-width: 901px) { .txpp .txpp__bring-grid { grid-template-columns: repeat(3, 1fr); } .txpp .txpp__bring-item:nth-child(4) { grid-column: 1; } .txpp .txpp__bring-item:nth-child(5) { grid-column: 2; } } .txpp .txpp__bring-item { display: flex; flex-direction: column; gap: 12px; padding-top: 24px; border-top: 1px solid var(--tx-border-mid); } .txpp .txpp__bring-num { font-family: var(--tx-font-body); font-size: 11px; font-weight: 300; letter-spacing: 0.12em; color: var(--tx-ink-muted); } .txpp .txpp__bring-heading { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; color: var(--tx-ink); line-height: 1.3; margin: 0; } .txpp .txpp__bring-body { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--tx-ink-soft); margin: 0; } .txpp .txpp__form-wrap { padding: 96px var(--tx-pad-h); border-bottom: 1px solid var(--tx-border); } .txpp .txpp__form-inner { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr; gap: 80px; align-items: start; } .txpp .txpp__form-intro { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 100px; } .txpp .txpp__form-title { font-family: var(--tx-font-heading); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin: 8px 0 0; } .txpp .txpp__form-desc { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--tx-ink-soft); margin: 0; } .txpp .txpp__form-email { font-family: var(--tx-font-body); font-size: 12px; font-weight: 300; line-height: 1.8; color: var(--tx-ink-muted); margin: 8px 0 0; padding-top: 16px; border-top: 1px solid var(--tx-border); } .txpp .txpp__form-email a { color: var(--tx-ink); text-decoration: none; border-bottom: 1px solid var(--tx-border-mid); padding-bottom: 1px; } .txpp .txpp__form-fields { display: flex; flex-direction: column; gap: 20px; } .txpp .txpp__form-row { display: flex; flex-direction: column; gap: 20px; } .txpp .txpp__form-row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .txpp .txpp__field { display: flex; flex-direction: column; gap: 8px; } .txpp .txpp__label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink-muted); } .txpp .txpp__label span { color: #8A8A86; } .txpp .txpp__input { width: 100%; padding: 13px 14px; font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; color: var(--tx-ink); background: var(--tx-white, #FFFFFF); border: 1px solid var(--tx-border-mid); border-radius: 0; outline: none; transition: border-color 0.2s; -webkit-appearance: none; appearance: none; box-sizing: border-box; } .txpp .txpp__input::placeholder { color: var(--tx-border-mid); } .txpp .txpp__input:focus { border-color: var(--tx-forest); } .txpp .txpp__textarea { resize: vertical; min-height: 120px; } .txpp .txpp__select-wrap { position: relative; } .txpp .txpp__select { cursor: pointer; padding-right: 36px; } .txpp .txpp__select-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-size: 11px; color: var(--tx-ink-muted); pointer-events: none; } .txpp .txpp__btn { display: inline-block; padding: 14px 36px; background: var(--tx-forest); color: var(--tx-paper); font-family: var(--tx-font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; border: none; cursor: pointer; transition: opacity 0.2s; margin-top: 8px; } .txpp .txpp__btn:hover { opacity: 1; } .txpp .txpp__success { font-family: var(--tx-font-body); font-size: 13px; color: var(--tx-forest); padding: 16px; border: 1px solid rgba(48,64,56,0.2); margin-top: 8px; } .txpp .txpp__error { font-family: var(--tx-font-body); font-size: 13px; color: #8B0000; margin-top: 8px; } .txpp .txpp__closing { padding: 72px var(--tx-pad-h); text-align: center; } .txpp .txpp__closing-text { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; font-style: normal; color: var(--tx-ink); margin: 0; letter-spacing: 0.02em; } @media (max-width: 900px) { .txpp .txpp__bring-grid { grid-template-columns: 1fr 1fr; } .txpp .txpp__form-inner { grid-template-columns: 1fr; gap: 48px; } .txpp .txpp__form-intro { position: static; } } @media (max-width: 768px) { .txpp .txpp__header { padding: 72px var(--tx-pad-h-mob) 56px; } .txpp .txpp__section--split, .txpp .txpp__section--rev { grid-template-columns: 1fr; } .txpp .txpp__section--rev .txpp__section-img { order: 0; } .txpp .txpp__section--rev .txpp__section-text { order: 1; } .txpp .txpp__section-img { min-height: 280px; } .txpp .txpp__section-text { padding: 48px var(--tx-pad-h-mob); } .txpp .txpp__section-body { max-width: 100%; } .txpp .txpp__bring { padding: 64px var(--tx-pad-h-mob); } .txpp .txpp__bring-grid { grid-template-columns: 1fr 1fr; gap: 28px; } .txpp .txpp__bring-item:nth-child(4), .txpp .txpp__bring-item:nth-child(5) { grid-column: auto; } .txpp .txpp__form-wrap { padding: 64px var(--tx-pad-h-mob); } .txpp .txpp__form-row--2 { grid-template-columns: 1fr; } .txpp .txpp__closing { padding: 56px var(--tx-pad-h-mob); } } /* ============================================================= MIGRATED SECTION CSS — Philosophy Page Source: tx-page-philosophy.liquid ============================================================= */ .txph { background: var(--tx-paper); padding-bottom: 0; } /* ── Header ── */ .txph .txph__header { padding: 120px var(--tx-pad-h) 80px; text-align: center; border-bottom: 1px solid var(--tx-border); } .txph .txph__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-muted); display: block; margin-bottom: 20px; } .txph .txph__title { font-family: var(--tx-font-heading); font-size: clamp(48px, 7vw, 88px); font-weight: 400; line-height: 1.05; letter-spacing: -0.01em; color: var(--tx-ink); margin-bottom: 36px; } .txph .txph__title em { font-style: italic; } .txph .txph__rule { width: 1px; height: 56px; background: var(--tx-border-mid); margin: 0 auto 36px; } .txph .txph__lead { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; font-style: italic; line-height: 1.65; color: var(--tx-ink); max-width: 620px; margin: 0 auto; } /* ── Alternating sections ── */ .txph .txph__section { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--tx-border); min-height: 480px; } .txph .txph__section--rev .txph__section-img { order: 2; } .txph .txph__section--rev .txph__section-text { order: 1; } /* ── Image panel ── */ .txph .txph__section-img { overflow: hidden; display: flex; align-items: flex-end; padding: 40px; min-height: 480px; position: relative; } .txph .txph__section-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .txph .txph__section-img--1 { background: linear-gradient(145deg, #d4d0c0 0%, #b0aa96 100%); } .txph .txph__section-img--2 { background: linear-gradient(145deg, #c8d0c8 0%, #a0b09a 100%); } .txph .txph__section-img--3 { background: linear-gradient(145deg, #d4c8bc 0%, #b0a090 100%); } .txph .txph__section-img--4 { background: linear-gradient(145deg, #c8ccd0 0%, #a0a8b0 100%); } .txph .txph__section-num { font-family: var(--tx-font-heading); font-size: 72px; font-weight: 400; color: var(--tx-ink-faint); line-height: 1; position: relative; z-index: 1; } /* ── Text panel ── */ .txph .txph__section-text { padding: 72px 80px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .txph .txph__section-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink-muted); } .txph .txph__section-title { font-family: var(--tx-font-heading); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); } .txph .txph__section-body { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 400; line-height: var(--tx-lh-body); color: var(--tx-ink); max-width: 420px; } /* ── Certification tag ── */ .txph .txph__cert { display: flex; align-items: center; gap: 14px; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--tx-border); flex-wrap: wrap; } .txph .txph__cert-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink-muted); white-space: nowrap; } .txph .txph__cert-tag { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--tx-ink); padding: 8px 16px; border: 1px solid var(--tx-border-mid); white-space: nowrap; } /* ── Closing ── */ .txph .txph__close { padding: 120px var(--tx-pad-h); text-align: center; border-top: 1px solid var(--tx-border); } .txph .txph__close-inner { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 20px; } .txph .txph__close-title { font-family: var(--tx-font-heading); font-size: 22px; font-weight: 400; font-style: italic; line-height: 1.4; color: var(--tx-ink); } .txph .txph__close-body { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 400; line-height: var(--tx-lh-body); color: var(--tx-ink); max-width: 460px; } .txph .txph__close-link { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); border-bottom: 1px solid var(--tx-border-mid); padding-bottom: 2px; text-decoration: none; transition: border-color 0.2s; } .txph .txph__close-link:hover { border-color: var(--tx-ink); } /* ── Mobile ── */ @media (max-width: 768px) { .txph .txph__header { padding: 80px var(--tx-pad-h-mob) 60px; } .txph .txph__lead { font-size: var(--tx-size-body-lg, 15px); } .txph .txph__section, .txph .txph__section--rev { grid-template-columns: 1fr; } .txph .txph__section--rev .txph__section-img { order: 0; } .txph .txph__section--rev .txph__section-text { order: 1; } .txph .txph__section-img { min-height: 300px; aspect-ratio: 4/3; } .txph .txph__section-text { padding: 48px var(--tx-pad-h-mob); } .txph .txph__section-body { max-width: 100%; } .txph .txph__close { padding: 80px var(--tx-pad-h-mob); } } /* ============================================================= MIGRATED SECTION CSS — Shipping Page Source: tx-page-shipping.liquid ============================================================= */ .txpl { background: var(--tx-paper); } .txpl .txpl__header { padding: 100px var(--tx-pad-h) 72px; border-bottom: 1px solid var(--tx-border); max-width: 760px; margin: 0 auto; text-align: left; } .txpl .txpl__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-muted); display: block; margin-bottom: 16px; } .txpl .txpl__title { font-family: var(--tx-font-heading); font-size: clamp(28px, 4vw, 44px); font-weight: 400; line-height: 1.1; color: var(--tx-ink); margin: 0 0 32px; } .txpl .txpl__rule { width: 32px; height: 1px; background: var(--tx-border-mid); margin: 0 0 32px; } .txpl .txpl__lead { font-family: var(--tx-font-body); font-size: var(--tx-size-body-lg, 15px); font-weight: 300; line-height: var(--tx-lh-body); color: var(--tx-ink-soft); margin: 0; } .txpl .txpl__body { padding: 72px var(--tx-pad-h) 120px; } .txpl .txpl__body-inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; } .txpl .txpl__block { padding: 40px 0; border-bottom: 1px solid var(--tx-border); display: grid; grid-template-columns: 220px 1fr; gap: 40px; align-items: start; } .txpl .txpl__block:last-child { border-bottom: none; } .txpl .txpl__block--highlight { background: var(--tx-paper-dark, #EFEEE9); margin: 0 -32px; padding: 40px 32px; border-bottom: none; border-top: 1px solid var(--tx-border); margin-bottom: 0; } .txpl .txpl__block-title { font-family: var(--tx-font-heading); font-size: var(--tx-size-body-lg, 15px); font-weight: 400; line-height: 1.3; color: var(--tx-ink); margin: 0; padding-top: 2px; } .txpl .txpl__block-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); margin: 0 0 12px; } .txpl .txpl__block-body:last-child { margin-bottom: 0; } .txpl .txpl__block-note { font-family: var(--tx-font-body); font-size: 13px; font-weight: 300; line-height: 1.8; color: var(--tx-ink-muted); margin: 12px 0 0; } .txpl .txpl__block-body a, .txpl .txpl__block-note a { color: var(--tx-ink); text-decoration: underline; text-underline-offset: 3px; } .txpl .txpl__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .txpl .txpl__list li { font-family: var(--tx-font-body); font-size: var(--tx-size-body); font-weight: 300; line-height: 1.8; color: var(--tx-ink-soft); padding-left: 16px; position: relative; } .txpl .txpl__list li::before { content: '—'; position: absolute; left: 0; color: var(--tx-border-mid); font-size: 11px; top: 3px; } .txpl .txpl__list a { color: var(--tx-ink); text-decoration: underline; text-underline-offset: 3px; } @media (max-width: 768px) { .txpl .txpl__header { padding: 72px var(--tx-pad-h-mob) 56px; } .txpl .txpl__body { padding: 48px var(--tx-pad-h-mob) 80px; } .txpl .txpl__block { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; } .txpl .txpl__block--highlight { margin: 0 -16px; padding: 32px 16px; } } /* ============================================================= MIGRATED SECTION CSS — Our Story Section Source: tx-section-our-story.liquid ============================================================= */ .txos { background: var(--tx-paper); padding-bottom: 140px; } /* ── Hero image — full width, tall ── */ .txos .txos__hero { width: 100%; aspect-ratio: 16 / 8; overflow: hidden; } .txos .txos__hero-img { width: 100%; height: 100%; object-fit: cover; display: block; } .txos .txos__hero-placeholder { width: 100%; height: 100%; background: linear-gradient(160deg, #d4ccc0 0%, #a8a090 40%, #6c6050 100%); } /* ── Title block — below hero, left aligned ── */ .txos .txos__title-wrap { padding: 64px var(--tx-pad-h) 56px; max-width: 860px; } .txos .txos__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-muted); display: block; margin-bottom: 20px; } .txos .txos__title { font-family: var(--tx-font-heading); font-size: clamp(36px, 5vw, 64px); font-weight: 400; line-height: 1.08; color: var(--tx-ink); margin: 0; } .txos .txos__title em { font-style: italic; } /* ── Narrative — constrained width, centred ── */ .txos .txos__narrative { max-width: 760px; margin: 0 auto; padding: 0 var(--tx-pad-h); } /* ── Text block ── */ .txos .txos__text-block { margin-bottom: 56px; } /* ── Section title — h2 within narrative ── */ .txos .txos__section-title { font-family: var(--tx-font-heading); font-size: 24px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 28px; } /* ── Body paragraph ── */ .txos .txos__para { font-family: var(--tx-font-body); font-size: var(--tx-size-body-lg, 15px); font-weight: 400; line-height: 2; color: var(--tx-ink); margin-bottom: 20px; } .txos .txos__para:last-child { margin-bottom: 0; } /* ── Pull quote ── */ .txos .txos__quote { border-left: 2px solid var(--tx-border-mid); padding: 8px 0 8px 32px; margin: 0 0 56px; } .txos .txos__quote p { font-family: var(--tx-font-heading); font-size: 20px; font-weight: 400; font-style: italic; line-height: 1.6; color: var(--tx-ink); } .txos .txos__quote--brand { border-left: none; padding-left: 0; text-align: center; margin: 0 0 56px; } .txos .txos__quote--brand p { font-size: 22px; letter-spacing: 0.04em; } /* ── Image break — default: centered within narrative column ── */ .txos .txos__img-break { margin: 0 0 64px; display: flex; gap: 16px; } /* ── Full bleed override ── */ .txos .txos__img-break--full { width: 100vw; position: relative; left: 50%; transform: translateX(-50%); margin-bottom: 64px; display: block; } .txos .txos__img-break--full .txos__figure { width: 100%; } .txos .txos__img-break--full .txos__figure img { width: 100%; height: 70vh; object-fit: cover; display: block; } .txos .txos__img-break--full .txos__caption { max-width: var(--txos-col-width, 640px); margin: 12px auto 0; padding: 0 var(--tx-pad-h); display: block; } /* ── Double: two portrait images side by side ── */ .txos .txos__img-break--double { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 64px; } /* ── Figure ── */ .txos .txos__figure { margin: 0; padding: 0; width: 100%; display: flex; flex-direction: column; gap: 12px; } .txos .txos__figure img { width: 100%; height: auto; display: block; object-fit: cover; } .txos .txos__img-break--double .txos__figure img { aspect-ratio: 4 / 5; object-fit: cover; } /* ── Caption ── */ .txos .txos__caption { font-family: var(--tx-font-body); font-size: 11px; font-weight: 300; font-style: italic; line-height: 1.6; color: var(--tx-ink); letter-spacing: 0.02em; } .txos .txos__img-placeholder { width: 100%; aspect-ratio: 3 / 2; background: linear-gradient(145deg, #d8d2c4 0%, #b4aa9a 100%); } /* ── Closing ── */ .txos .txos__closing { padding-top: 64px; border-top: 1px solid var(--tx-border); display: flex; flex-direction: column; gap: 4px; } .txos .txos__closing-line { font-family: var(--tx-font-heading); font-size: 20px; font-weight: 400; font-style: italic; color: var(--tx-ink); line-height: 1.5; } .txos .txos__closing-line--light { color: var(--tx-ink-muted); } @media (max-width: 768px) { .txos .txos__hero { aspect-ratio: 4 / 3; } .txos .txos__title-wrap { padding: 48px var(--tx-pad-h-mob) 40px; } .txos .txos__title { font-size: 32px; } .txos .txos__narrative { padding: 0 var(--tx-pad-h-mob); } .txos .txos__img-break--double { grid-template-columns: 1fr; } .txos .txos__img-break--double .txos__figure img { aspect-ratio: 4 / 3; } .txos .txos__quote { padding-left: 20px; } .txos .txos__quote p { font-size: 17px; } .txos .txos__section-title { font-size: 20px; } } /* ============================================================= MIGRATED SECTION CSS — Policy Section Source: tx-section-policy.liquid ============================================================= */ .txpo { background: var(--tx-paper); padding: 96px var(--tx-pad-h) 140px; } /* ── Header ── */ .txpo .txpo__header { text-align: center; max-width: 560px; margin: 0 auto 80px; } .txpo .txpo__title { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 28px; } .txpo .txpo__rule { width: 1px; height: 48px; background: var(--tx-border-mid); margin: 0 auto; } /* ── Body ── */ .txpo .txpo__body { display: grid; grid-template-columns: 180px 1fr; gap: 80px; max-width: 1040px; margin: 0 auto; align-items: start; } /* ── Left nav ── */ .txpo .txpo__nav { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 12px; } .txpo .txpo__nav-title { font-family: var(--tx-font-body); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--tx-ink-muted); margin-bottom: 4px; display: block; } .txpo .txpo__nav-link { font-family: var(--tx-font-body); font-size: 11px; letter-spacing: 0.1em; color: var(--tx-ink-muted); text-decoration: none; line-height: 1.5; transition: color 0.2s; } .txpo .txpo__nav-link:hover { color: var(--tx-ink); } .txpo .txpo__nav-link--active { color: var(--tx-ink); } /* ── Policy content — rich text styles ── */ .txpo .txpo__prose { font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; line-height: 1.75; color: var(--tx-ink); text-align: left; max-width: 760px; border: none; box-shadow: none; } .txpo .txpo__prose *, .txpo .txpo__prose p, .txpo .txpo__prose h1, .txpo .txpo__prose h2, .txpo .txpo__prose h3, .txpo .txpo__prose li { text-align: left !important; } /* Headings within policy body */ .txpo .txpo__prose h1, .txpo .txpo__prose h2 { font-family: var(--tx-font-heading); font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 20px; margin-top: 0; padding-top: 0; border-top: none; } .txpo .txpo__prose h1:first-child, .txpo .txpo__prose h2:first-child { padding-top: 0; border-top: none; } .txpo .txpo__prose h3 { font-family: var(--tx-font-body); font-size: 10px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink-muted); margin: 24px 0 10px; } .txpo .txpo__prose hr { display: none; } /* Paragraphs */ .txpo .txpo__prose p { font-size: 14px; line-height: 1.75; margin: 0 0 14px; padding: 0; border: none; } .txpo .txpo__prose p:last-child { margin-bottom: 0; } .txpo .txpo__prose p:empty, .txpo .txpo__prose p:has(br:only-child) { display: none; } .txpo .txpo__prose::before, .txpo .txpo__prose::after, .txpo .txpo__prose *::before, .txpo .txpo__prose *::after { border-color: transparent; } .txpo .txpo__prose > *:first-child { margin-top: 0; padding-top: 0; border-top: none; } .txpo .txpo__prose > * + * { margin-top: 0; } /* Lists */ .txpo .txpo__prose ul, .txpo .txpo__prose ol { margin: 10px 0 18px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; } .txpo .txpo__prose ul li, .txpo .txpo__prose ol li { font-size: 14px; padding-left: 18px; position: relative; line-height: 1.75; } .txpo .txpo__prose ul li::before { content: '—'; position: absolute; left: 0; color: var(--tx-border-mid); font-size: 11px; top: 3px; } .txpo .txpo__prose ol { counter-reset: policy-list; } .txpo .txpo__prose ol li { counter-increment: policy-list; } .txpo .txpo__prose ol li::before { content: counter(policy-list) '.'; position: absolute; left: 0; color: var(--tx-ink-muted); font-size: 12px; } /* Links */ .txpo .txpo__prose a { color: var(--tx-ink); border-bottom: 1px solid var(--tx-border-mid); padding-bottom: 1px; transition: border-color 0.2s; } .txpo .txpo__prose a:hover { border-color: var(--tx-ink); } /* Strong / em */ .txpo .txpo__prose strong { font-weight: 500; } .txpo .txpo__prose em { font-style: italic; } /* ── Contact prompt ── */ .txpo .txpo__contact { margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--tx-border); display: flex; align-items: center; gap: 24px; } .txpo .txpo__contact-text { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; font-style: italic; color: var(--tx-ink); } .txpo .txpo__contact-link { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); border-bottom: 1px solid var(--tx-border-mid); padding-bottom: 2px; text-decoration: none; white-space: nowrap; transition: border-color 0.2s; } .txpo .txpo__contact-link:hover { border-color: var(--tx-ink); } /* ── Mobile ── */ @media (max-width: 768px) { .txpo { padding: 72px var(--tx-pad-h-mob) 100px; } .txpo .txpo__header { margin-bottom: 48px; } .txpo .txpo__title { font-size: 26px; } .txpo .txpo__body { grid-template-columns: 1fr; gap: 40px; } .txpo .txpo__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 0; padding-bottom: 28px; border-bottom: 1px solid var(--tx-border); } .txpo .txpo__nav-title { display: none; } .txpo .txpo__nav-link { border-bottom: none; padding: 8px 16px 8px 0; font-size: 12px; } .txpo .txpo__contact { flex-direction: column; align-items: flex-start; gap: 14px; } } /* ============================================================= MIGRATED SECTION CSS — Gifting Section Source: tx-section-gifting.liquid ============================================================= */ .txgi { background: var(--tx-paper); } /* ── Hero ── */ .txgi .txgi__hero { position: relative; height: 90vh; min-height: 560px; overflow: hidden; } .txgi .txgi__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .txgi .txgi__hero-fallback { position: absolute; inset: 0; background: linear-gradient(160deg, #2a2420 0%, #1a1410 100%); } .txgi .txgi__hero-veil { position: absolute; inset: 0; background: linear-gradient(to right, rgba(10,8,6,0.80) 0%, rgba(10,8,6,0.20) 60%, transparent 100%); } .txgi .txgi__hero-content { position: absolute; bottom: 0; left: 0; z-index: 2; padding: 0 var(--tx-pad-h) 72px; max-width: 620px; } .txgi .txgi__hero-eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(246,245,240,0.45); display: block; margin-bottom: 16px; } .txgi .txgi__hero-title { font-family: var(--tx-font-heading); font-size: clamp(28px, 4vw, 48px); font-weight: 400; line-height: 1.1; color: rgba(246,245,240,0.95); margin-bottom: 16px; } .txgi .txgi__hero-title em { font-style: italic; } .txgi .txgi__hero-sub { font-family: var(--tx-font-body); font-size: 14px; line-height: 1.8; color: rgba(246,245,240,0.60); margin-bottom: 28px; max-width: 420px; } .txgi .txgi__hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .txgi .txgi__btn-outline { display: inline-block; padding: 12px 24px; background: none; color: rgba(246,245,240,0.90); font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(246,245,240,0.35); text-decoration: none; transition: border-color 0.2s; } .txgi .txgi__btn-outline:hover { border-color: rgba(246,245,240,0.8); } .txgi .txgi__btn-ghost { display: inline-block; padding: 12px 24px; background: rgba(246,245,240,0.10); color: rgba(246,245,240,0.80); font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; border: 1px solid rgba(246,245,240,0.20); text-decoration: none; transition: background 0.2s; } .txgi .txgi__btn-ghost:hover { background: rgba(246,245,240,0.18); } /* ── Pillars strip ── */ .txgi .txgi__pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid #E8E5DE; } .txgi .txgi__pillar { padding: 32px 40px; border-right: 1px solid #E8E5DE; text-align: center; } .txgi .txgi__pillar:last-child { border-right: none; } .txgi .txgi__pillar-label { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #6A6A66; display: block; margin-bottom: 6px; } .txgi .txgi__pillar-value { font-family: var(--tx-font-heading); font-size: 15px; font-weight: 400; color: var(--tx-ink); line-height: 1.3; } /* ── Shared eyebrow ── */ .txgi .txgi__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #6A6A66; display: block; margin-bottom: 16px; } /* ── Why section ── */ .txgi .txgi__why { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; border-bottom: 1px solid #E8E5DE; } .txgi .txgi__why-img { overflow: hidden; min-height: 600px; position: relative; } .txgi .txgi__why-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .txgi .txgi__why-fallback { width: 100%; height: 100%; background: linear-gradient(145deg, #d0ccc0 0%, #a8a090 100%); min-height: 600px; } .txgi .txgi__why-text { padding: 80px 72px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .txgi .txgi__why-title { font-family: var(--tx-font-heading); font-size: clamp(24px, 2.8vw, 36px); font-weight: 400; line-height: 1.15; color: var(--tx-ink); } .txgi .txgi__why-body { font-family: var(--tx-font-body); font-size: 14px; line-height: 1.9; color: var(--tx-ink); max-width: 380px; } .txgi .txgi__why-list { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-top: 4px; } .txgi .txgi__why-list li { font-family: var(--tx-font-body); font-size: 13px; line-height: 1.6; color: var(--tx-ink); padding-left: 16px; position: relative; } .txgi .txgi__why-list li::before { content: '—'; position: absolute; left: 0; color: #8A8A86; font-size: 11px; } /* ── Dark statement ── */ .txgi .txgi__statement { background: #1C1C1C; padding: 100px var(--tx-pad-h); text-align: center; } .txgi .txgi__statement .txgi__eye { color: rgba(246,245,240,0.35); } .txgi .txgi__statement-title { font-family: var(--tx-font-heading); font-size: clamp(28px, 4vw, 48px); font-weight: 400; line-height: 1.1; color: rgba(246,245,240,0.92); margin-bottom: 8px; } .txgi .txgi__statement-title em { font-style: italic; } .txgi .txgi__statement-sub { font-family: var(--tx-font-body); font-size: 14px; color: rgba(246,245,240,0.45); margin-bottom: 64px; } .txgi .txgi__statement-pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid rgba(246,245,240,0.08); padding-top: 56px; text-align: left; } .txgi .txgi__stat-pillar { padding-right: 40px; border-right: 1px solid rgba(246,245,240,0.08); } .txgi .txgi__stat-pillar:last-child { border-right: none; padding-right: 0; } .txgi .txgi__stat-pillar:first-child { padding-left: 0; } .txgi .txgi__stat-title { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; color: rgba(246,245,240,0.82); margin-bottom: 10px; line-height: 1.3; } .txgi .txgi__stat-body { font-family: var(--tx-font-body); font-size: 13px; line-height: 1.8; color: rgba(246,245,240,0.42); } /* ── Occasions ── */ .txgi .txgi__occasions { padding: 100px var(--tx-pad-h); border-bottom: 1px solid #E8E5DE; } .txgi .txgi__occasions-title { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; text-align: center; color: var(--tx-ink); margin-bottom: 56px; } .txgi .txgi__occasions-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; } .txgi .txgi__occasion-card { background: #F0EEE8; padding: 48px 40px; display: flex; flex-direction: column; gap: 12px; } .txgi .txgi__occasion-num { font-family: var(--tx-font-heading); font-size: 48px; font-weight: 400; color: #E8E5DE; line-height: 1; } .txgi .txgi__occasion-title { font-family: var(--tx-font-heading); font-size: 20px; font-weight: 400; color: var(--tx-ink); line-height: 1.2; } .txgi .txgi__occasion-body { font-family: var(--tx-font-body); font-size: 13px; line-height: 1.85; color: var(--tx-ink); flex: 1; } .txgi .txgi__occasion-tags { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.12em; color: #6A6A66; text-transform: uppercase; padding-top: 16px; border-top: 1px solid #E8E5DE; } /* ── Testimonial ── */ .txgi .txgi__testimonial { padding: 80px var(--tx-pad-h); text-align: center; background: #1C1C1C; } .txgi .txgi__quote { font-family: var(--tx-font-heading); font-size: clamp(18px, 2.5vw, 26px); font-weight: 400; font-style: italic; line-height: 1.5; color: rgba(246,245,240,0.88); max-width: 680px; margin: 0 auto 16px; } .txgi .txgi__cite { font-family: var(--tx-font-body); font-size: 11px; letter-spacing: 0.12em; color: rgba(246,245,240,0.35); font-style: normal; } /* ── Bulk enquiry ── */ .txgi .txgi__bulk { display: grid; grid-template-columns: 1fr 1fr; min-height: 600px; border-top: 1px solid #E8E5DE; } .txgi .txgi__bulk-img { overflow: hidden; position: relative; min-height: 600px; } .txgi .txgi__bulk-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .txgi .txgi__bulk-fallback { width: 100%; height: 100%; background: linear-gradient(145deg, #2a2420 0%, #1a1410 100%); min-height: 600px; } .txgi .txgi__bulk-form-wrap { padding: 72px 64px; display: flex; flex-direction: column; justify-content: center; gap: 16px; background: #F0EEE8; } .txgi .txgi__bulk-title { font-family: var(--tx-font-heading); font-size: 22px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); } .txgi .txgi__bulk-sub { font-family: var(--tx-font-body); font-size: 13px; line-height: 1.8; color: #6A6A66; margin-bottom: 8px; } .txgi .txgi__form { display: flex; flex-direction: column; gap: 16px; } .txgi .txgi__form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .txgi .txgi__form-field { display: flex; flex-direction: column; gap: 6px; } .txgi .txgi__form-label { font-family: var(--tx-font-body); font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #6A6A66; } .txgi .txgi__form-input { font-family: var(--tx-font-body); font-size: 13px; color: var(--tx-ink); background: none; border: none; border-bottom: 1px solid #C8C4BB; padding: 8px 0; outline: none; width: 100%; transition: border-color 0.2s; } .txgi .txgi__form-input:focus { border-color: var(--tx-ink); } .txgi .txgi__form-input::placeholder { color: #8A8A86; } .txgi .txgi__form-submit { background: var(--tx-ink); color: var(--tx-paper); font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; border: none; padding: 15px; cursor: pointer; margin-top: 8px; transition: opacity 0.2s; } .txgi .txgi__form-submit:hover { opacity: 1; } .txgi .txgi__form-note { font-family: var(--tx-font-body); font-size: 11px; color: #6A6A66; text-align: center; } .txgi .txgi__form-note a { color: var(--tx-ink); border-bottom: 1px solid #C8C4BB; } .txgi .txgi__form-success { font-family: var(--tx-font-body); font-size: 14px; line-height: 1.8; color: var(--tx-ink); padding: 24px 0; border-top: 1px solid #E8E5DE; } /* ── FAQ ── */ .txgi .txgi__faq { padding: 100px var(--tx-pad-h) 120px; max-width: 800px; margin: 0 auto; } .txgi .txgi__faq-title { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; text-align: center; color: var(--tx-ink); margin-bottom: 48px; } .txgi .txgi__faq-list { display: flex; flex-direction: column; } .txgi .txgi__faq-item { border-top: 1px solid #E8E5DE; } .txgi .txgi__faq-item:last-child { border-bottom: 1px solid #E8E5DE; } .txgi .txgi__faq-q { font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; color: var(--tx-ink); padding: 20px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; user-select: none; } .txgi .txgi__faq-q::after { content: '+'; font-size: 18px; font-weight: 300; color: #8A8A86; transition: transform 0.2s; flex-shrink: 0; margin-left: 16px; } .txgi .txgi__faq-item[open] .txgi__faq-q::after { content: '−'; } .txgi .txgi__faq-a { font-family: var(--tx-font-body); font-size: 14px; line-height: 1.9; color: var(--tx-ink); padding-bottom: 20px; } .txgi .txgi__faq-a a { color: var(--tx-ink); border-bottom: 1px solid #C8C4BB; } /* ── Mobile ── */ @media (max-width: 768px) { .txgi .txgi__hero-content { padding: 0 var(--tx-pad-h-mob) 48px; max-width: 100%; } .txgi .txgi__pillars { grid-template-columns: repeat(2, 1fr); } .txgi .txgi__why { grid-template-columns: 1fr; } .txgi .txgi__why-text { padding: 48px var(--tx-pad-h-mob); } .txgi .txgi__why-img { min-height: auto; aspect-ratio: 4/3; } .txgi .txgi__statement-pillars { grid-template-columns: 1fr 1fr; gap: 32px; } .txgi .txgi__occasions { padding: 80px var(--tx-pad-h-mob); } .txgi .txgi__occasions-grid { grid-template-columns: 1fr; } .txgi .txgi__bulk { grid-template-columns: 1fr; } .txgi .txgi__bulk-img { min-height: auto; aspect-ratio: 4/3; } .txgi .txgi__bulk-form-wrap { padding: 48px var(--tx-pad-h-mob); } .txgi .txgi__form-row { grid-template-columns: 1fr; } .txgi .txgi__faq { padding: 80px var(--tx-pad-h-mob) 100px; } .txgi .txgi__stat-pillar { padding-right: 24px; } } /* ============================================================= MIGRATED SECTION CSS — First Words Section Source: tx-section-firstwords.liquid ============================================================= */ .txfw { background: var(--tx-paper); padding: 140px var(--tx-pad-h); } .txfw .txfw__inner { max-width: var(--tx-max-width); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; } .txfw .txfw__headline { font-family: var(--tx-font-heading); font-size: clamp(36px, 4.5vw, 62px); font-weight: 400; line-height: 1.08; color: var(--tx-ink); margin: 0; } .txfw .txfw__body { font-family: var(--tx-font-body); font-size: 16px; font-weight: 400; line-height: 1.85; color: var(--tx-ink-soft); margin: 0 0 40px 0; max-width: 420px; } .txfw .txfw__ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } @media (max-width: 900px) { .txfw { padding: 100px var(--tx-pad-h); } .txfw .txfw__inner { grid-template-columns: 1fr; gap: 40px; align-items: start; } .txfw .txfw__body { max-width: 100%; } } @media (max-width: 768px) { .txfw { padding: 80px var(--tx-pad-h-mob); } .txfw .txfw__headline { font-size: 30px; } } /* ============================================================= MIGRATED SECTION CSS — Fabric Care Section Source: tx-section-fabric-care.liquid ============================================================= */ .txfc { background: var(--tx-paper); padding: 80px var(--tx-pad-h) 140px; } .txfc .txfc__header { text-align: center; max-width: 560px; margin: 0 auto 80px; } .txfc .txfc__title { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 20px; } .txfc .txfc__intro { font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; line-height: 1.9; color: var(--tx-ink); margin-bottom: 36px; } .txfc .txfc__rule { width: 1px; height: 48px; background: #E0DDD6; margin: 0 auto; } .txfc .txfc__body { display: grid; grid-template-columns: 180px 1fr; gap: 80px; max-width: 1000px; margin: 0 auto; align-items: start; } .txfc .txfc__nav { position: sticky; top: 100px; display: flex; flex-direction: column; gap: 16px; } .txfc .txfc__nav-link { font-family: var(--tx-font-body); font-size: 11px; letter-spacing: 0.1em; color: #6A6A66; text-decoration: none; line-height: 1.5; transition: color 0.2s; } .txfc .txfc__nav-link:hover { color: var(--tx-ink); } .txfc .txfc__block { padding: 28px 0; border-top: 1px solid #E8E5DE; } .txfc .txfc__block:last-of-type { border-bottom: 1px solid #E8E5DE; } .txfc .txfc__block-title { font-family: var(--tx-font-heading); font-size: 18px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); margin-bottom: 20px; } .txfc .txfc__list { list-style: none; display: flex; flex-direction: column; gap: 10px; } .txfc .txfc__list li { font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; line-height: 1.75; color: var(--tx-ink); padding-left: 18px; position: relative; } .txfc .txfc__list li::before { content: '—'; position: absolute; left: 0; color: #8A8A86; font-size: 11px; top: 3px; } .txfc .txfc__contact { margin-top: 64px; padding-top: 40px; border-top: 1px solid #E8E5DE; display: flex; align-items: center; gap: 24px; } .txfc .txfc__contact-text { font-family: var(--tx-font-heading); font-size: 16px; font-weight: 400; font-style: italic; color: var(--tx-ink); } .txfc .txfc__contact-link { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); border-bottom: 1px solid #C8C4BB; padding-bottom: 2px; text-decoration: none; white-space: nowrap; transition: border-color 0.2s; } .txfc .txfc__contact-link:hover { border-color: var(--tx-ink); } @media (max-width: 768px) { .txfc { padding: 60px var(--tx-pad-h-mob) 100px; } .txfc .txfc__body { grid-template-columns: 1fr; gap: 40px; } .txfc .txfc__nav { position: static; flex-direction: row; flex-wrap: wrap; gap: 10px 20px; padding-bottom: 28px; border-bottom: 1px solid #E8E5DE; } .txfc .txfc__contact { flex-direction: column; align-items: flex-start; gap: 14px; } } /* ============================================================= MIGRATED SECTION CSS — Collections Section Source: tx-section-collections.liquid ============================================================= */ .txco .txco__row { display: grid; grid-template-columns: 65fr 35fr; border-top: 1px solid #E8E5DE; min-height: 580px; } .txco .txco__row--rev { grid-template-columns: 35fr 65fr; } .txco .txco__img { overflow: hidden; min-height: 580px; } .txco .txco__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.9s ease; } .txco .txco__row:hover .txco__img img { transform: scale(1.02); } .txco .txco__placeholder { width: 100%; height: 100%; min-height: 580px; background: #E8E4DC; } .txco .txco__row--rev .txco__img { order: 2; } .txco .txco__row--rev .txco__text { order: 1; } .txco .txco__text { display: flex; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 48px 52px; } .txco .txco__eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: #6A6A66; } .txco .txco__h2 { font-family: var(--tx-font-heading); font-size: 18px; font-weight: 400; line-height: 1.25; color: var(--tx-ink); } .txco .txco__link { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--tx-ink); border-bottom: 1px solid #C8C4BB; padding-bottom: 3px; display: inline-block; transition: border-color 0.2s; } .txco .txco__link:hover { border-color: var(--tx-ink); } @media (max-width: 768px) { .txco .txco__row, .txco .txco__row--rev { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; } .txco .txco__img, .txco .txco__row--rev .txco__img { order: 1; min-height: 300px; aspect-ratio: 4 / 3; } .txco .txco__text, .txco .txco__row--rev .txco__text { order: 2; padding: 36px var(--tx-pad-h-mob); } } /* ============================================================= MIGRATED SECTION CSS — Collection Page Dawn Suppression Source: tx-section-collection-page.liquid ============================================================= */ /* Hide Dawn's native collection title */ .collection__title { display: none !important; } /* ============================================================= MIGRATED SECTION CSS — Closing Section Source: tx-section-closing.liquid ============================================================= */ .txclose { padding: 160px var(--tx-pad-h); border-top: 1px solid #E8E5DE; text-align: center; } .txclose .txclose__inner { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 24px; } .txclose .txclose__h1 { font-family: var(--tx-font-heading); font-size: 29px; font-weight: 400; line-height: 1.2; color: var(--tx-ink); } .txclose .txclose__body { font-family: var(--tx-font-body); font-size: 14px; font-weight: 400; line-height: 1.85; color: var(--tx-ink); max-width: 360px; } @media (max-width: 768px) { .txclose { padding: 100px var(--tx-pad-h-mob); } .txclose .txclose__h1 { font-size: 24px; } } .txgi .txgi__eye--faq { text-align: center; display: block; margin-bottom: var(--tx-space-xs); } /* ============================================================= FINAL READABILITY OVERRIDES Loaded last so migrated section styles cannot soften body copy. ============================================================= */ .tx-block p, .tx-block li, .tx-block label, .tx-block input, .tx-block select, .tx-block textarea, .tx-block button, .tx-block .tx-body, .tx-block .tx-small, .tx-block .tx-caption { font-weight: 400; } .tx-block p, .tx-block li, .tx-block label { color: var(--tx-ink-soft); } .tx-block ::placeholder { color: var(--tx-ink-muted); } /* ============================================================= FINAL NATIVE POLICY LAYOUT OVERRIDE Matches Fabric Care page rhythm for Shopify native policy pages. ============================================================= */ body:has(.shopify-policy__container) main, .template-policy main, .shopify-policy__container, .shopify-policy__body, .shopify-policy__body .rte { background: var(--tx-paper) !important; } .shopify-policy__container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 80px var(--tx-pad-h) 140px !important; text-align: left !important; } .shopify-policy__title { max-width: 560px !important; margin: 0 auto 80px !important; padding: 0 !important; text-align: center !important; border: 0 !important; } .shopify-policy__title h1 { font-family: var(--tx-font-heading) !important; font-size: 29px !important; font-weight: 400 !important; line-height: 1.2 !important; letter-spacing: 0 !important; color: var(--tx-ink) !important; text-align: center !important; text-transform: none !important; margin: 0 !important; } .shopify-policy__body { width: 100% !important; max-width: 1000px !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; } .shopify-policy__body .rte { width: 100% !important; max-width: 760px !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; } .shopify-policy__body .rte, .shopify-policy__body .rte * { text-align: left !important; } .shopify-policy__body .rte p, .shopify-policy__body .rte li { font-family: var(--tx-font-body) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.75 !important; color: var(--tx-ink) !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important; } .shopify-policy__body .rte p:empty, .shopify-policy__body .rte p:has(br:only-child) { display: none !important; } .shopify-policy__body .rte strong { font-family: inherit !important; font-size: inherit !important; font-weight: 500 !important; color: inherit !important; display: inline !important; letter-spacing: 0 !important; text-transform: none !important; } .shopify-policy__body .rte p > strong:only-child { display: block !important; font-family: var(--tx-font-heading) !important; font-size: 18px !important; font-weight: 400 !important; line-height: 1.2 !important; color: var(--tx-ink) !important; margin: 44px 0 20px !important; padding: 0 !important; border: 0 !important; } .shopify-policy__body .rte > p:first-child > strong:only-child, .shopify-policy__body .rte > *:first-child { margin-top: 0 !important; padding-top: 0 !important; border-top: 0 !important; } .shopify-policy__body .rte ul, .shopify-policy__body .rte ol { margin: 10px 0 18px !important; padding-left: 28px !important; } .shopify-policy__body .rte hr, .shopify-policy__body .rte::before, .shopify-policy__body .rte::after, .shopify-policy__body .rte *::before, .shopify-policy__body .rte *::after { border: 0 !important; box-shadow: none !important; } .shopify-policy__body .rte hr { display: none !important; } @media (max-width: 768px) { .shopify-policy__container { padding: 60px var(--tx-pad-h-mob) 100px !important; } .shopify-policy__title { margin-bottom: 56px !important; } .shopify-policy__title h1 { font-size: 26px !important; } .shopify-policy__body .rte { max-width: none !important; } .shopify-policy__body .rte p > strong:only-child { font-size: 18px !important; margin-top: 36px !important; } } /* ============================================================= TXPDP — Product Detail Page texaura.com — Dawn theme Note: most TXPDP styles are scoped inline in tx-section-pdp.liquid using #txid-{{ section.id }} selectors. Only shared/fallback classes live here. ============================================================= */ .txpdp { max-width: 1340px; margin: 0 auto; padding: 0 64px 140px; } /* Inclusion line */ .txpdp__inclusion-wrap { margin-top: 24px; text-align: center; } .txpdp__inclusion-eye { font-family: var(--tx-font-body); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(28,28,28,0.38); display: block; margin: 0 0 5px; } .txpdp__inclusion-line { font-family: var(--tx-font-body); font-size: 12px; letter-spacing: 0.06em; color: rgba(28,28,28,0.55); margin: 0; } /* Attribute tiles wrapper — needed for padding-top */ .txpdp__attrs-wrap { padding-top: 96px; } /* Detail section border */ .txpdp__detail { border-top: 1px solid rgba(28,28,28,0.10); padding-top: 80px; margin-top: 96px; } /* Accordion shared */ .txpdp__acc { border-top: 1px solid rgba(28,28,28,0.10); } .txpdp__acc-item { border-bottom: 1px solid rgba(28,28,28,0.10); } /* End spacer */ .txpdp__end-spacer { height: 100px; } @media (max-width: 768px) { .txpdp { padding: 0 24px 80px; } .txpdp__attrs-wrap { padding-top: 64px; } .txpdp__detail { margin-top: 56px; } .txpdp__end-spacer { height: 60px; } }