/* ========================================================================= WISDOM & GRACE — SITE STYLESHEET ========================================================================= CONTENT / BRAND NOTES FOR EDITING LATER ------------------------------------------------------------------------- - Color palette combines the real logo (images/logo/ — deep burgundy line art) with Leah's own supplied fabric/color references, which are named (in order from deepest to lightest): Dusty Rose, Soft Blossom, Sage Leaf, Autumn Ivory. Those four names map directly to the tokens below — change values in :root and the whole site updates. - The overall system deliberately leans neutral (warm ivory, not pink) with rose and sage used as accents, not as the base canvas — this keeps four named colors from reading as "too much pink." - Fonts are loaded from Google Fonts in the of each HTML page. - Product/fabric data lives in js/products.js, not here. ========================================================================= */ /* ------------------------------------------------------------------------- 1. CSS CUSTOM PROPERTIES (THEME) ------------------------------------------------------------------------- */ :root { /* Backgrounds — "Autumn Ivory" as the neutral canvas, "Soft Blossom" reserved for occasional accent sections rather than the whole page */ --background: #f3ecdf; /* Autumn Ivory — main background */ --background-soft: #eae0cb; /* deeper warm ivory — alternating sections */ --background-blossom: #f4dfe1; /* Soft Blossom — used sparingly as an accent tint */ --background-card: #fffdf9; /* slightly lifted card surface */ /* Text */ --text: #392a22; /* warm near-black brown */ --text-muted: #6f5c4e; /* soft warm taupe — WCAG AA (5.4:1) on --background */ --text-faint: #786552; /* muted taupe — WCAG AA (4.7:1) on --background; darkened from an earlier value that failed contrast */ /* Accents — "Dusty Rose" for primary interactive color, the logo's deeper burgundy reserved for hover/emphasis states */ --accent: #7c3c48; /* Dusty Rose — buttons, links, active states */ --accent-dark: #551a24; /* deep logo burgundy — hover/emphasis */ --accent-soft: #f4dfe1; /* Soft Blossom — pale tint for form focus/badges */ --accent-secondary: #8b9a7e; /* Sage Leaf — secondary accent */ --accent-secondary-dark: #5c6b4f; /* deep sage — used for small text on ivory */ /* Borders + lines */ --border: #ddd0b3; --border-soft: #e8ddc4; /* Feedback */ --error: #9a3b3b; /* Typography */ --font-heading: "Cormorant Garamond", "Georgia", serif; --font-body: "Source Sans 3", "Helvetica Neue", Arial, sans-serif; --font-accent: "Cormorant Garamond", serif; /* italic decorative use */ /* Spacing scale */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.75rem; --space-lg: 3rem; --space-xl: 5rem; --space-2xl: 7.5rem; /* Layout */ --content-width: 1180px; --content-width-narrow: 760px; --radius: 2px; /* Motion */ --transition: 220ms ease; } /* ------------------------------------------------------------------------- 2. RESET + BASE ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background-color: var(--background); color: var(--text); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65; overflow-x: hidden; } img { max-width: 100%; display: block; } figure { margin: 0; } a { color: inherit; text-decoration: none; } ul { margin: 0; padding: 0; list-style: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 600; line-height: 1.2; margin: 0 0 var(--space-sm); color: var(--text); } h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); font-weight: 600; } h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); } h3 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); } h4 { font-size: 1.15rem; font-weight: 600; } p { margin: 0 0 var(--space-sm); } /* Editorial italic treatment for a handful of "statement" headings (hero, a few section leads) — used selectively, not on every heading, so it reads as a deliberate accent rather than a global style. */ .display-italic { font-style: italic; font-weight: 500; } /* Visible, deliberate focus states everywhere (accessibility) */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-dark); outline-offset: 3px; border-radius: 2px; } /* Skip link for keyboard users */ .skip-link { position: absolute; left: -999px; top: auto; background: var(--accent-dark); color: var(--background); padding: 0.75rem 1.25rem; z-index: 200; } .skip-link:focus { left: var(--space-sm); top: var(--space-sm); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ------------------------------------------------------------------------- 3. LAYOUT HELPERS ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--content-width); margin: 0 auto; padding: 0 var(--space-md); } .container-narrow { width: 100%; max-width: var(--content-width-narrow); margin: 0 auto; padding: 0 var(--space-md); } .section { padding: var(--space-xl) 0; } .section-soft { background-color: var(--background-soft); } .section-tight { padding: var(--space-lg) 0; } .section-header { max-width: 640px; margin: 0 0 var(--space-lg); } .section-header.center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: inline-block; font-family: var(--font-body); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-secondary-dark); margin-bottom: var(--space-sm); } .lede { font-size: 1.15rem; color: var(--text-muted); } /* Small ornamental divider used between sections/blocks — a hairline with a single centered diamond, echoing the fine circular line in the logo. */ .divider { position: relative; width: 90px; height: 1px; background-color: var(--border); border: none; margin: var(--space-md) 0; } .divider.center { margin-left: auto; margin-right: auto; } .divider::after { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; background-color: var(--accent); transform: translate(-50%, -50%) rotate(45deg); } /* Large decorative ampersand watermark — a quiet nod to the logo's wordmark. Used sparingly (see .hero) so it reads as a signature detail, not decoration for its own sake. */ .ampersand-mark { position: absolute; font-family: var(--font-heading); font-style: italic; font-weight: 500; color: var(--accent-secondary); opacity: 0.16; line-height: 1; pointer-events: none; user-select: none; z-index: 0; } /* ------------------------------------------------------------------------- 3b. STAMP BADGE ------------------------------------------------------------------------- A small circular "hand-stamped" mark — one signature ornamental device used once (see index.html, the craft section), echoing the arced text in the logo without repeating it. Fully original wording/arrangement. ------------------------------------------------------------------------- */ .stamp-badge { width: 148px; height: 148px; color: var(--accent-secondary-dark); flex-shrink: 0; } .stamp-badge .stamp-badge__ring-outer { fill: none; stroke: currentColor; stroke-width: 1.5; } .stamp-badge .stamp-badge__ring-inner { fill: none; stroke: currentColor; stroke-width: 0.75; stroke-dasharray: 1.5 3; opacity: 0.7; } .stamp-badge text { fill: currentColor; font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; } .stamp-badge__center { font-family: var(--font-accent); font-style: italic; font-size: 16px; font-weight: 500; letter-spacing: 0.06em; } .stamp-badge__rule { stroke: currentColor; stroke-width: 1; opacity: 0.6; } .craft-signature { display: flex; align-items: center; justify-content: center; gap: var(--space-md); margin-top: var(--space-lg); } .craft-signature p { margin: 0; max-width: 260px; font-family: var(--font-accent); font-style: italic; font-size: 1.05rem; color: var(--text-muted); } @media (max-width: 560px) { .craft-signature { flex-direction: column; text-align: center; } } /* ------------------------------------------------------------------------- 4. BUTTONS + LINKS ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.9rem 1.75rem; font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; border: 1px solid transparent; border-radius: var(--radius); transition: background-color var(--transition), color var(--transition), border-color var(--transition), transform var(--transition); min-height: 44px; } .btn-primary { background-color: var(--accent); color: var(--background); border-color: var(--accent); } .btn-primary:hover, .btn-primary:focus-visible { background-color: var(--accent-dark); border-color: var(--accent-dark); transform: translateY(-1px); } .btn-outline { background-color: transparent; color: var(--text); border-color: var(--border); } .btn-outline:hover, .btn-outline:focus-visible { border-color: var(--accent); color: var(--accent); } .btn-secondary { background-color: var(--accent-secondary); color: var(--background); border-color: var(--accent-secondary); } .btn-secondary:hover, .btn-secondary:focus-visible { background-color: var(--accent-secondary-dark); border-color: var(--accent-secondary-dark); } .btn-block { width: 100%; } /* Resets a