/** Shopify CDN: Minification failed Line 787:17 Unexpected "(" Line 792:79 Unterminated string token **/ /* ========================================================================== Velvet Vanity 2.0 — restyle -------------------------------------------------------------------------- The ONLY stylesheet for redesign work. Loaded last in layout/theme.liquid, after theme.css, so it wins on cascade order without needing !important. Why a separate file: assets/theme.css is 648 KB and already carries 132 !important declarations. Adding to it would make the theme worse and the restyle impossible to back out. One file = one revert. Naming: every custom property is prefixed --vv-. Palo Alto defines ~220 of its own in snippets/css-variables.liquid using --COLOR-* / SCREAMING-KEBAB, so there is no collision. Issue: #2 ========================================================================== */ :root { /* --- Colour ------------------------------------------------------------- Sampled from design/VelvetVanity UIUX.pdf by rasterising each slide at 150dpi and taking the dominant colour of large flat areas, rather than eyeballing. Values are the mock-up's, not yet brand-verified. */ /* Surfaces */ --vv-bg: #eeebe2; /* page background — warm cream */ --vv-surface: #faf9f7; /* cards, panels — near-white */ --vv-surface-alt: #ffffff; /* Ink */ --vv-ink: #0b0b0b; /* body + headings; effectively black */ --vv-ink-muted: #6b6260; /* secondary copy, descriptors */ --vv-ink-on-dark: #faf9f7; /* Brand */ --vv-rose: #a27776; /* dusty rose — headings, accents, brand mark */ /* Greens — all four measured off the artwork, consolidated here in #9. Earlier chunks each sampled one and wondered whether the deck was inconsistent. It isn't: it uses three deliberate depths, and the fourth reading was compression variance on the same colour. --vv-green #214442 hero CTA button, the darkest --vv-green-bar #284c4a primary-button HOVER (the "Take 3, Pay 2" promo bar it was named for was replaced by the marquee in #76) --vv-teal #547173 product-card CTAs (the BUY / ADD TO BAG pills) (the card sampled #516f70 — same colour, the difference is image compression, not intent) ⚠️ The ANNOUNCEMENT BAR and the MARQUEE are no longer these values, and are not driven by these tokens at all. Marketing set both to #7E9C9F in the theme editor on 2026-10-05, just after go-live — a return to the store's `color_accent`, the pale sage the bar used before the redesign. Captured in cfe4a29. Those two bars are SECTION SETTINGS (`bg_color` in sections/group-header.json and templates/index.json), not CSS. Liquid cannot read a CSS custom property, so there is no rule here to change and nothing to "fix" in this file — look in the theme editor. Two consequences worth knowing before touching the greens: · The bar and the card pills USED to match (both --vv-teal). They no longer do: pale sage bar, #547173 pills. If sage is the direction, the pills likely want to follow — marketing's call, not ours. · White on #7E9C9F is 2.94:1, below WCAG AA (4.5:1) and below the 3:1 large-text floor; both bars render white text. The values it replaced passed — #547173 at 5.27:1, #214442 at 10.66:1. Raised with marketing; deliberately NOT reverted, it is their direction. Dark ink on the sage would fix it (#0b0b0b on #7E9C9F is ~7.6:1) if they want the colour kept. */ --vv-green: #214442; --vv-green-bar: #284c4a; --vv-teal: #547173; /* Badges — measured on tatagaltier.com, see issue #9 */ --vv-badge-save-bg: #fff7da; --vv-badge-bg: #ffffff; /* Lines */ --vv-line: rgba(11, 11, 11, 0.12); --vv-line-strong: rgba(11, 11, 11, 0.24); /* --- Type --------------------------------------------------------------- Families are set in #3. Only the scale lives here. */ --vv-text-xs: 0.6875rem; /* 11px — badges, eyebrow labels */ --vv-text-sm: 0.8125rem; /* 13px — descriptors, meta */ --vv-text-base: 1rem; /* 16px — body */ --vv-text-md: 1.125rem; /* 18px */ --vv-text-lg: 1.5rem; /* 24px — card / section headings */ --vv-text-xl: 2rem; /* 32px */ --vv-text-2xl: 2.75rem; /* 44px — hero */ --vv-leading-tight: 1.15; --vv-leading-body: 1.6; --vv-tracking-caps: 0.04em; /* 0.44px at 11px, per the badge measurement */ /* --- Space -------------------------------------------------------------- 4px base step. */ --vv-space-1: 0.25rem; --vv-space-2: 0.5rem; --vv-space-3: 0.75rem; --vv-space-4: 1rem; --vv-space-5: 1.5rem; --vv-space-6: 2rem; --vv-space-7: 3rem; --vv-space-8: 4rem; /* --- Radius -------------------------------------------------------------- */ --vv-radius-sm: 4px; --vv-radius-md: 8px; /* Cards, panels and media. Measured off the mock-up rather than guessed: the corner curve settles ~10.6px on the zoomed spec card, ~10.4px on the zoomed image, and ~8.4px on the full-page mock (where a 1px error is proportionally largest). 10px is the convergent value. Added alongside --md rather than replacing it, because --md is already load-bearing for the mega-menu panel and dropdowns. */ --vv-radius-lg: 10px; --vv-radius-pill: 999px; /* badges, swatches, CTA pills */ /* --- Motion -------------------------------------------------------------- */ --vv-ease: cubic-bezier(0.4, 0, 0.2, 1); --vv-duration: 200ms; } @media (prefers-reduced-motion: reduce) { :root { --vv-duration: 0ms; } } /* ========================================================================== TYPOGRAPHY (issue #3) -------------------------------------------------------------------------- Heading face: the mock-up uses a high-contrast serif with a true calligraphic italic ("Everyday Beauty, *Elevated.*"). The PDF can't tell us which — the mock-ups are raster images, and the only embedded fonts are the deck's own Poppins slide titles. ⚠️ PLAYFAIR DISPLAY IS A STAND-IN, not a confirmed brand face. It is a close match and OFL-licensed, so it is safe to self-host. If the design team names the real face, swapping it is: replace the two woff2 files and the family name in --vv-font-heading. Nothing else references the font directly. Why this matters regardless of the swap: the store currently has NO brand heading font. config/settings_data.json sets `type_heading_font: serif` — the generic option — so headings render as New York on macOS and Times New Roman on Windows. Today's site looks different on every platform. This fixes that. Body face: DM Sans, already loaded by the theme from Shopify's font library (`type_base_font: dm_sans_n4`). Matches the deck's body copy. Left alone. ========================================================================== */ @font-face { font-family: 'VV Playfair'; src: url('vv-playfair-roman.woff2') format('woff2'); font-weight: 400 700; /* variable font */ font-style: normal; font-display: swap; } @font-face { font-family: 'VV Playfair'; src: url('vv-playfair-italic.woff2') format('woff2'); font-weight: 400 700; font-style: italic; font-display: swap; } :root { --vv-font-heading: 'VV Playfair', 'Iowan Old Style', Baskerville, 'Times New Roman', Times, serif; --vv-font-body: var(--FONT-STACK-BODY, 'DM Sans', sans-serif); /* Redefining Palo Alto's own heading stack is how this reaches every heading without fighting individual selectors: theme.css consumes var(--FONT-STACK-HEADING) throughout, and this file loads after both snippets/css-variables.liquid and theme.css, so it wins on document order. */ --FONT-STACK-HEADING: var(--vv-font-heading); } /* The hero pattern from the deck: roman heading with an italic accent phrase in the brand rose. Applied via a class so copy stays authorable. */ .vv-accent-italic { font-style: italic; color: var(--vv-rose); } /* ========================================================================== BUTTONS (issue #3) -------------------------------------------------------------------------- The deck's primary CTA is a solid dark-green button with an uppercase, letter-spaced label. Palo Alto's button classes are .btn plus modifiers (.btn--primary, .btn--solid, .btn--outline …), so these layer onto those rather than introducing a parallel system. Greens measured off the mock-up: #214442 hero "SHOP ALL" button -> --vv-green (primary CTA) #284c4a "Take 3, Pay 2" promo bar -> --vv-green-bar They are close but distinct. The announcement bar sampled lighter again (#3d5b5b-#405d5c) — since resolved as --vv-teal #547173 in #4. ========================================================================== */ .btn { font-family: var(--vv-font-body); text-transform: uppercase; letter-spacing: var(--vv-tracking-caps); font-size: var(--vv-text-sm); border-radius: var(--vv-radius-sm); transition: background-color var(--vv-duration) var(--vv-ease), color var(--vv-duration) var(--vv-ease), opacity var(--vv-duration) var(--vv-ease); } .btn--primary, .btn--solid { background-color: var(--vv-green); color: var(--vv-ink-on-dark); border-color: var(--vv-green); } .btn--primary:hover, .btn--solid:hover { background-color: var(--vv-green-bar); border-color: var(--vv-green-bar); } /* Disabled / sold-out. Tatagaltier's approach, adopted deliberately: keep the brand fill and drop opacity, rather than introducing a grey token. Reused by the sold-out CTA in #15 and the product card in #9. */ .btn[disabled], .btn[aria-disabled='true'], .btn.is-disabled { opacity: 0.5; cursor: not-allowed; } /* Visible keyboard focus — Palo Alto's default is faint against the new palette. */ .btn:focus-visible { outline: 2px solid var(--vv-ink); outline-offset: 2px; } /* ========================================================================== ANNOUNCEMENT BAR (issue #4) -------------------------------------------------------------------------- The mock-up shows every message on ONE line separated by a thin rule, not rotating. Palo Alto shipped only 'slider' and 'marquee', so an 'inline' layout was added to sections/announcement-bar.liquid. Blocks stay separate, so each message keeps its own link and device-targeting settings. ⚠️ THE BAR COLOUR IS NOT SET HERE. The section emits `#Announcement--{id} .top-bar { --bg: … }` from its own theme setting, in a {% style %} block inside the section body — an ID selector, rendered after this file. It cannot be overridden without !important, which this project does not use. It is also client-owned content (sections/group-header.json), so we must not push it. Currently #7e9c9f (pale sage). The mock-up's bar is #547173 — the same hue, deeper. Changing it is one field in the theme editor: Theme editor -> Announcement bar -> Colors -> Background = #547173 The value is --vv-teal, defined with the other greens at the top. ========================================================================== */ :root { /* Gap either side of the separator. Measured off the mock-up: the deck puts exactly 10px between text and rule on BOTH sides. Kept as a component token rather than a new global spacing step, since 10px sits between --vv-space-2 (8px) and --vv-space-3 (12px). */ --vv-bar-separator-gap: 0.625rem; } .top-bar__inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 var(--vv-bar-separator-gap); text-align: center; } /* Each block renders as a plain div in this layout (it reuses the marquee markup). Keep them on the baseline and stop them stretching. */ .top-bar__inline > * { display: inline-flex; align-items: center; flex: 0 1 auto; } /* Separator between messages. Drawn on the element rather than as a text character so it never lands at the start or end of a wrapped row. */ /* The separator is drawn at the START of every item after the first, so the spacing either side of it comes from two different places: left = the flex container's column gap right = this margin They must match or the rule sits off-centre between the two messages. */ .top-bar__inline > * + *::before { content: ''; display: inline-block; width: 1px; height: 1em; margin-inline-end: var(--vv-bar-separator-gap); background-color: currentColor; opacity: 0.45; } /* --- Free-shipping message inside the inline bar ------------------------- theme.css normalises the cart message for the announcement bar in FOUR rules, every one of them scoped to `.top-bar__text`: .top-bar__text .cart__message { padding:0; margin:0; width:100%; font-size:… } .top-bar__text .cart__message.is-hidden { visibility:visible; max-height:none; opacity:1 } .top-bar__text .cart__message .cart__message__default { padding-bottom:0 } .top-bar__text .cart__message .cart__message__default.is-hidden { display:none } `.top-bar__text` exists only in the SLIDER layout. Our inline layout (#4) never had it, so the message kept its cart-drawer styling and two faults showed once a cart was involved: 1. The hidden "spend X more" span fell back to the generic `.cart__message__default.is-hidden { visibility:hidden; max-height:0; padding:0 15px }`. visibility keeps an element in flow and max-height does nothing to an inline span, so on a cart past the threshold it still occupied 257px + 30px of padding — the large gap in the reported screenshot. 2. `.cart__message` kept `padding: 20px`, which no plain text block has. That pushed its text 20px inside its own box and left the separators sitting 10px/30px off-centre rather than evenly between the messages. The theme's own `section.id == 'announcement-bar'` guard (announcement-bar.liquid:210) was meant to drop the cart-drawer class here, but inside a section GROUP the id is not that literal string, so the guard never fires and `cart-drawer__message` is applied anyway. Normalising in CSS rather than touching that condition. Rule 2 above is deliberately NOT ported: it force-shows a message the theme marked hidden, which suits the slider (it cycles through blocks regardless) but would undo the empty-cart behaviour below, where the whole block should vanish. -------------------------------------------------------------------------- */ .top-bar__inline .cart__message { padding: 0; margin: 0; width: 100%; } .top-bar__inline .cart__message .cart__message__default { padding-bottom: 0; } .top-bar__inline .cart__message .cart__message__default.is-hidden, .top-bar__inline .cart__message .cart__message__success.is-hidden { display: none; } /* A block can render with all its content hidden — the free-shipping progress message carries .is-hidden until the cart qualifies, and JS toggles it at runtime. Left alone it still occupies width and draws a separator, leaving an orphaned rule and a gap in the middle of the bar. Hide any item that has no visible child; :has() re-evaluates when JS removes the class, so the message appears correctly once the cart qualifies. */ .top-bar__inline > *:not(:has(> :not(.is-hidden))) { display: none; } /* On narrow screens the three messages can't share a line. Wrapping keeps them readable rather than truncating; the separators still fall between pairs. This stays the no-JS / reduced-motion fallback — see the rotator below. */ @media (max-width: 749px) { .top-bar__inline { gap: var(--vv-space-1) var(--vv-bar-separator-gap); font-size: var(--vv-text-xs); } .top-bar__inline > * + *::before { margin-inline-end: var(--vv-bar-separator-gap); } } /* --- Mobile rotator -------------------------------------------------------- Wrapping three messages made the bar taller than the header on a phone. Below 750px they rotate one at a time instead, the same read as the slider layout. The --rotating class is added by JS, and only when the viewport is narrow AND the visitor has not asked for reduced motion. Without JS, or with reduced motion, none of this applies and the wrapped layout above stands — every message still reachable, nothing moving on its own. Grid rather than absolute positioning: all messages occupy the same cell, so the bar sizes itself to the tallest without a hard-coded height. */ @media (max-width: 749px) { .top-bar__inline--rotating { display: grid; gap: 0; align-items: center; } .top-bar__inline--rotating > * { grid-area: 1 / 1; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0s linear 0.4s; } .top-bar__inline--rotating > .vv-bar-msg--active { opacity: 1; visibility: visible; transition: opacity 0.4s ease; } /* One message on screen at a time, so there is nothing to separate. */ .top-bar__inline--rotating > * + *::before { display: none; } } /* ========================================================================== HEADER (issue #5) -------------------------------------------------------------------------- Navigation decided 2026-10-01: the nav-bar / sidebar slide is authoritative. The category-led nav on the product and shop slides is a leftover the designer did not update. See NAVIGATION-DECISION.md. velvet vanity Shop All ⌄ Bestsellers New In Find Us in Store Gift Card 🔍 👤 🛍 The mega menu under "Shop All" is issue #6; this issue is the bar itself. ========================================================================== */ /* Warm near-white, not pure white. The paint lives on .site-header itself; .site-header__background is set to `background: inherit`, so overriding a --bg custom property there does nothing — verified in the browser before landing on this selector. Scoped to :not(--transparent) so the theme's transparent-header mode (used when a header overlays a full-bleed hero) still works. That class isn't applied on this store today, but the setting exists and #18 may turn it on. */ .site-header:not(.site-header--transparent) { background-color: var(--vv-surface); } /* --- Navigation ---------------------------------------------------------- */ /* The design sets navigation in sentence case. Palo Alto's "Uppercase" typography setting (nav_caps) adds a .caps class to the