/** Shopify CDN: Minification failed Line 206:0 Unexpected "<" **/ /* ============================================================================ dulora-supporting.css — Dulora v11 LIGHT treatment for SUPPORTING pages. The deliberate light counterpart to the dark/gold COMMERCIAL pages (home, collection, product). Loaded conditionally from layout/theme.liquid for: blog index, articles, static info pages (About/Shipping/Returns/FAQ/ Contact/etc.), policy pages, account/customer pages, and search results. NOT loaded on 404 or list-collections (per 2026-06-16 client decision). Source of truth: dulora_supporting_pages_brief.docx (2026-06-16). Plan: docs/superpowers/plans/2026-06-16-dulora-supporting-pages.md Palette (brief): WhiteAsh #EFEEED page background — the ONLY light bg in the palette BlackLord #1A1A1A titles / H2 headings Body #2a2a2a body copy Meta #888 dates / captions / tags (letter-spacing 0.06em) Gold #D8AE4F hover, focus ring, blockquote border, primary CTA bg GoldDark #8a6e2f body-link text (AA contrast on WhiteAsh) LOAD ORDER: this file loads in ; section stylesheets (article.css, blog.css) load in- and therefore win same-specificity ties. So every rule that overrides a base/section rule is prefixed with a body.template-* selector to win on specificity regardless of source order. Fonts come from --display-font-family (Audiowide) / --heading-font-family / --body-font-family (Inter Tight), emitted by snippets/dulora-design-system. ============================================================================ */ /* ---- 1. Page canvas: WhiteAsh --------------------------------------------- Bare `body` is intentional and SAFE: this file only loads on supporting pages (marketing page templates are excluded at the load gate), and it also covers policy pages whose body class is unreliable. */ body { background-color: #EFEEED; } /* ---- 2. Layout: 1440px content, 88px desktop gutter, 760px reading column - */ @media (min-width: 1280px) { body.template-page, body.template-article, body.template-blog, body.template-search, body.template-policy, body[class*="template-customers"] { --gutter: 88px; } } body.template-page .container, body.template-article .container, body.template-blog .container, body.template-search .container, body[class*="template-customers"] .container { max-width: calc(1440px + var(--gutter) * 2); } /* Article / page body column: comfortable ~760px line length at desktop */ body.template-article .article__content.reading-width, body.template-page .page__content.reading-width { max-width: 760px; } /* ---- 3. Titles (h1): Audiowide display, fluid 24–40px --------------------- */ body.template-page .page__title, body.template-article .article__title h1, body.template-blog .container h1, body.template-search .container h1, body[class*="template-customers"] h1, .shopify-policy__title h1 { font-family: var(--display-font-family, "Audiowide"), sans-serif; font-size: clamp(24px, 3vw, 40px); font-weight: 400; line-height: 1.2; color: #1A1A1A; margin-bottom: 16px; text-align: center; } /* ---- 4. Section subheadings (h2): Inter Tight 600, 20–22px ---------------- */ body.template-page .page__content h2, body.template-page .article-content h2, body.template-article .article__content h2, body.template-article .article-content h2, body.template-policy .shopify-policy__container h2, body[class*="template-customers"] .section h2, body[class*="template-customers"] .customer h2 { font-family: var(--heading-font-family, "Inter Tight"), sans-serif; font-weight: 600; font-size: clamp(20px, 2.2vw, 22px); color: #1A1A1A; margin-top: 0; margin-bottom: 10px; } /* ---- 5. Body copy: Inter Tight 400, 16px / 1.75, #2a2a2a ------------------ */ body.template-page .page__content, body.template-page .article-content, body.template-article .article__content, body.template-article .article-content, body.template-policy .shopify-policy__container, body.template-blog .rte.reading-width--inline { font-family: var(--body-font-family, "Inter Tight"), sans-serif; font-size: 16px; line-height: 1.75; color: #2a2a2a; } /* Paragraph spacing 20px (overrides article.css --element-margin-bottom: 2em) */ body.template-page .article-content p, body.template-article .article-content p, body.template-policy .shopify-policy__container p { margin-bottom: 20px; } /* ---- 6. Meta / captions / tags: 11–12px, #888, tracked ------------------- Scoped to editorial meta only (dates, author, tags). NOT form field labels, which must stay legible. */ body.template-article .article__tags a, body.template-article p.text-theme-light, body.template-blog .text-theme-light { font-family: var(--body-font-family, "Inter Tight"), sans-serif; font-size: 12px; color: #888; letter-spacing: 0.06em; } /* ---- 7. Body links: GoldDark text, gold underline on hover --------------- */ body.template-page .page__content a, body.template-page .article-content a, body.template-article .article__content a, body.template-article .article-content a, body.template-policy .shopify-policy__container a { color: #8a6e2f; text-decoration: none; transition: color 0.2s; } body.template-page .page__content a:hover, body.template-page .article-content a:hover, body.template-article .article__content a:hover, body.template-article .article-content a:hover, body.template-policy .shopify-policy__container a:hover { color: #D8AE4F; text-decoration: underline; opacity: 1; } /* ---- 8. Blockquotes: gold left rule, Inter Tight 300 italic --------------- */ body.template-page .article-content blockquote, body.template-article .article-content blockquote { border-left: 3px solid #D8AE4F; padding: 0 0 0 20px; margin-bottom: 20px; font-family: var(--body-font-family, "Inter Tight"), sans-serif; font-weight: 300; font-style: italic; font-size: 18px; line-height: 1.6; color: #555; } /* Reset the desktop blockquote size bump from article.css */ @media (min-width: 1024px) { body.template-page .article-content blockquote, body.template-article .article-content blockquote { font-size: 18px; line-height: 1.6; } } /* ---- 9. Form inputs: gold focus ring -------------------------------------- */ body.template-page .input:focus, body.template-page select:focus, body.template-page textarea:focus, body.template-search .input:focus, body.template-search input[type="search"]:focus, body[class*="template-customers"] .input:focus, body[class*="template-customers"] select:focus, body[class*="template-customers"] textarea:focus { border-color: #D8AE4F; box-shadow: 0 0 0 2px rgba(216, 174, 79, 0.55); outline: 0; } /* ---- 10. Primary CTA buttons: gold bg, dark text ------------------------- e.g. Submit on contact form, Sign-in / Create / Save on account pages. Styled directly (not via --btn-* vars) so .btn--secondary is untouched. */ body.template-page .btn--primary, body[class*="template-customers"] .btn--primary { background: #D8AE4F; border-color: #D8AE4F; outline-color: #D8AE4F; color: #1A1A1A; } body.template-page .btn--primary:not(.slider-nav__btn):hover, body[class*="template-customers"] .btn--primary:not(.slider-nav__btn):hover { background: #c79f43; border-color: #c79f43; color: #1A1A1A; } body.template-blog .container h1, body.template-blog .container .text-theme-text { text-transform: capitalize; }