/* ============================================================ TrendiestStore — theme tokens THE ONLY PLACE A COLOUR IS DEFINED. Every TrendiestStore component reads a custom property from here; nothing below this file hard-codes a hex. LIGHT ONLY. The dark "aurora" palette and the header toggle that drove it were removed in the 2026-08 revamp — the brief is a white ground with pink accents, and carrying a second palette meant designing and testing every new component twice for a mode nobody had asked for. If dark ever comes back it goes in a `:root[data-theme=dark]` block here and nowhere else. The second half re-points Dawn's own colour scheme variables at these tokens, so the stock Shopify UI — header, cart drawer, buttons, product page, footer — follows the palette instead of staying on Dawn's factory colours. That only works because this file loads AFTER base.css; see snippets/ts-stylesheets.liquid. ------------------------------------------------------------ 1 Brand + surfaces 2 Dawn scheme bridge 3 Product cards 4 Colourway accents ============================================================ */ /* ---------- 1. Brand + surfaces ------------------------------ */ :root { /* Tells the browser which way to paint the widgets IT owns and the page cannot reach: list is drawn by the browser on its own canvas, NOT over the page, so it needs an OPAQUE pair of its own rather than inheriting a translucent surface. See assets/ts-forms.css. */ --ts-select-bg: #fff; --ts-select-text: #1f1b1d; /* the caret sits inside a data URI, which cannot read currentColor */ --ts-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6570' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* The show/hide eye on a password field, for the same reason and with the same catch: WooCommerce draws its own as a background image with a near-black fill baked into the URL, so `color` cannot touch it and the only way to re-colour it is to replace the picture. Muted for "show", brand for the pressed "hide" — the two hexes are --ts-muted and --ts-brand written out, because a data URI cannot read a variable either. Used by ts-account.css §5 and ts-fixes.css §6. */ --ts-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6570' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3C/svg%3E"); --ts-eye-off: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e31c79' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5c1.6 0 3 .5 4.2 1.1M21.5 12S18 18.5 12 18.5c-1.6 0-3-.5-4.2-1.1'/%3E%3Cpath d='M9.9 9.9a3.2 3.2 0 0 0 4.2 4.2'/%3E%3Cpath d='m4 4 16 16'/%3E%3C/svg%3E"); --ts-text: #1f1b1d; --ts-text-2: #3d363b; --ts-muted: #6e6570; --ts-muted-2: #8b8290; /* themed component surfaces */ --ts-nav-bg: rgba(255, 255, 255, 0.9); --ts-nav-bg-stuck: rgba(255, 255, 255, 0.97); --ts-nav-menu-bg: #fff; --ts-footer-bg: #fff5f8; --ts-footer-glow: radial-gradient(circle, rgba(253, 236, 243, 0.9) 0%, rgba(253, 236, 243, 0) 65%); --ts-panel-grad: linear-gradient(150deg, #fff, #fff8fb); --ts-social-grad: linear-gradient(140deg, #fff5f8 0%, #fdecf3 55%, #ffe6f0 100%); --ts-marquee-grad: linear-gradient(90deg, #fdecf3, #ffe6f0); --ts-tile-accent-bg: linear-gradient(150deg, #fdecf3, #ffe0ee); --ts-tile-accent-line: rgba(227, 28, 121, 0.28); --ts-chip-bg: #fff; --ts-backdrop: rgba(31, 27, 29, 0.42); /* soft washes behind the hero and section headers — gradients, never blur filters, which cost real frames on cheap Android phones */ --ts-aurora-1: rgba(255, 214, 232, 0.9); --ts-aurora-2: rgba(255, 228, 240, 0.85); --ts-aurora-3: rgba(255, 240, 246, 0.95); --ts-blob-1: rgba(255, 199, 224, 0.95); --ts-blob-2: rgba(255, 220, 236, 0.85); --ts-blob-3: rgba(255, 236, 245, 0.9); --ts-sh-1: 0 4px 14px -6px rgba(90, 20, 55, 0.16); --ts-sh-2: 0 14px 32px -18px rgba(90, 20, 55, 0.28); --ts-sh-3: 0 30px 60px -26px rgba(90, 20, 55, 0.32); --ts-sh-brand: 0 14px 28px -14px rgba(227, 28, 121, 0.42); --ts-sh-hang: drop-shadow(0 12px 16px rgba(120, 70, 60, 0.28)); --ts-sh-cut: drop-shadow(0 18px 26px rgba(120, 70, 60, 0.3)); --ts-sh-cut-item: drop-shadow(0 8px 12px rgba(120, 70, 60, 0.26)); --ts-sh-cut-lid: drop-shadow(0 12px 18px rgba(120, 70, 60, 0.28)); --ts-stage-shadow: rgba(120, 70, 60, 0.34); --ts-thread-fade: rgba(120, 70, 60, 0.35); /* The logo is a transparent WebP used AS IS — no crop, no blend mode, no filter. The blend-mode tokens the old JPG lockup needed are gone; do not reintroduce them. */ --ts-plate: #fff; --ts-knot-shadow: rgba(0, 0, 0, 0.28); /* brand at low alpha — badge grounds and the eyebrow dot's halo */ --ts-brand-wash: rgba(227, 28, 121, 0.09); /* THE PAGE SCROLLBAR IS LIGHT PINK AT REST AND BRAND PINK UNDER THE POINTER, which is the reverse of the first version. That one sat at --ts-brand and DARKENED to --ts-brand-700 on hover: a full-strength magenta bar down the right edge of a white shop, as loud as the header band and the Add to cart button, and it got louder when you reached for it. The rail is furniture, not a call to action — it reads as brand at a glance and only comes up to full strength while it is actually being dragged. #f5a4c9 is --ts-brand at 40% over white, written opaque because scrollbar-color takes no alpha blending it can rely on. */ --ts-scroll-thumb: #f5a4c9; --ts-scroll-thumb-hover: var(--ts-brand); --ts-dot-glow: rgba(227, 28, 121, 0.18); /* shape + motion */ --ts-r-sm: 10px; --ts-r: 16px; --ts-r-lg: 24px; --ts-r-xl: 32px; --ts-r-pill: 999px; --ts-ease: cubic-bezier(0.22, 0.72, 0.28, 1); --ts-out: cubic-bezier(0.16, 1, 0.3, 1); --ts-bounce: cubic-bezier(0.2, 1.32, 0.36, 1); --ts-accent: var(--ts-brand); } /* ---------- 2. Dawn scheme bridge ---------------------------- */ /* Dawn writes --color-* as bare "R,G,B" triplets and consumes them through rgb()/rgba(), so the values here are triplets too. Every scheme is listed because .color-scheme-N outranks a bare :root. */ :root, .color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5 { --color-background: 255, 255, 255; --gradient-background: #fff; --color-background-contrast: 246, 214, 229; --color-foreground: 31, 27, 29; --color-shadow: 90, 20, 55; --color-button: 227, 28, 121; --color-button-text: 255, 255, 255; --color-secondary-button: 255, 255, 255; --color-secondary-button-text: 227, 28, 121; --color-link: 227, 28, 121; --color-badge-foreground: 31, 27, 29; --color-badge-background: 255, 255, 255; --color-badge-border: 227, 28, 121; --payment-terms-background-color: #fff; } /* the banded sections keep a blush ground so the page still reads as sections rather than one flat sheet of white */ .color-scheme-2, .color-scheme-5 { --color-background: 255, 245, 248; --gradient-background: #fff5f8; --color-secondary-button: 255, 245, 248; --payment-terms-background-color: #fff5f8; } /* ---------- 3. Product cards --------------------------------- */ /* Cards are white tiles on a white or blush page, so they are told explicitly rather than inheriting whatever band they sit in. */ :root { --ts-card: #fff; --ts-card-ink: #1f1b1d; } .card-wrapper .card, .card-wrapper .card__content, .card-wrapper .card__inner, .ts-card { --color-background: 255, 255, 255; --gradient-background: var(--ts-card); --color-foreground: 31, 27, 29; --color-badge-background: 255, 255, 255; --color-badge-foreground: 31, 27, 29; } /* the card heading/price sit on the tile, so they take the tile ink */ .card-wrapper .card__heading a, .card-wrapper .price, .card-wrapper .card__information { color: var(--ts-card-ink); } /* ---------- 4. Colourway accents ----------------------------- */ /* One entry per pack. These are also written onto each product as the trendiest.accent / trendiest.tint metafields — the sections read the metafield so a new colourway needs no CSS, but these stay as the fallback for anything rendered before product data loads. */ :root { --ts-pink-accent: #ff5c9e; --ts-pink-tint: #fdecf3; --ts-candy-accent: #ff4d8d; --ts-candy-tint: #fff0f6; --ts-yellow-accent: #ffc44d; --ts-yellow-tint: #fef6e2; --ts-blue-accent: #38a9e8; --ts-blue-tint: #e7f4fc; --ts-green-accent: #4fc96a; --ts-green-tint: #eaf7e8; --ts-purple-accent: #a970ff; --ts-purple-tint: #f3ebfb; }