/* Sewadora components, ported from the approved mockup (sites/sewadora/design/mockup-2026-09-27.html); the tokens are in tokens.css. Naming: every mockup class carries the sw- prefix (.hero -> .sw-hero, .product -> .sw-product), since Astra, WordPress and WooCommerce print many of the bare names themselves (.product, .post, .gallery); helpers inside one component keep the mockup's short names (.sw-hero .lede). Mockup-only rules (the view switcher, the brand sheet, the draft and "planned topics" labels, the mirrored-text note) are not ported. */ /* ---- Base ---------------------------------------------------------------------------------------------------- */ html{font-size:100%} /* Linen on every page (the mockup's body): Astra paints the container class it puts on - plain and page-builder white, separate grey - and one class outranks a bare `body`. */ body,.ast-separate-container,.ast-plain-container,.ast-page-builder-template{background:var(--bg)} body{margin:0;color:var(--ink);font-family:var(--text);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased} h1,h2,h3,.sw-display{font-family:var(--display);font-weight:500;line-height:1.1;text-wrap:balance;margin:0} h1,h2,h3,h4,h5,h6{color:inherit} /* The mockup reset p, a and img everywhere; here only inside the theme's own markup, so Astra's pages, posts and WooCommerce keep their spacing and link colours. A template that adds a new root adds it to these three lists. */ :where(.sw-site-head,.sw-site-foot,.sw-home,.sw-archive,.sw-single,.sw-crumbs,.sw-pdp,.sw-desc,.sw-page) p{margin:0} :where(.sw-site-head,.sw-site-foot,.sw-home,.sw-archive,.sw-single,.sw-crumbs,.sw-pdp,.sw-desc,.sw-page) :is(a,a:hover,a:focus){color:inherit} :where(.sw-site-head,.sw-site-foot,.sw-home,.sw-archive,.sw-single,.sw-crumbs,.sw-pdp,.sw-desc,.sw-page) img{display:block;max-width:100%;height:auto} /* ---- Astra --------------------------------------------------------------------------------------------------- */ .ast-container{max-width:1180px;padding-inline:16px} /* The homepage lays out its own full-width bands and .sw-wrap containers. */ .home .site-content > .ast-container{display:block;max-width:none;padding-inline:0} /* ---- Shared -------------------------------------------------------------------------------------------------- */ .sw-wrap{max-width:1180px;margin:0 auto;padding-inline:16px} .sw-eyebrow{font-family:var(--text);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--moss)} .sw-stitch{height:2px;background:repeating-linear-gradient(90deg,var(--moss-soft) 0 9px,transparent 9px 17px);margin:0} .sw-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.25rem;border-radius:999px;font-weight:700;font-size:.95rem;text-decoration:none;border:2px solid var(--pine);cursor:pointer;line-height:1} .sw-btn.sw-btn-primary{background:var(--pine);color:var(--linen)} .sw-btn.sw-btn-ghost{background:transparent;color:var(--pine)} .sw-btn:focus-visible{outline:3px solid var(--cranberry);outline-offset:3px} /* ---- Site header --------------------------------------------------------------------------------------------- */ .sw-site-head{background:var(--paper);border-bottom:1px solid var(--oat-deep)} .sw-announce{background:var(--pine);color:var(--linen);text-align:center;font-size:.8rem;font-weight:600;letter-spacing:.04em;padding:.45rem 16px} .sw-head-row{display:flex;align-items:center;gap:1.5rem;padding-block:.9rem;flex-wrap:wrap} .sw-brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:inherit} .sw-brand svg{width:44px;height:44px} .sw-brand .word{font-family:var(--display);font-size:1.7rem;font-weight:500;letter-spacing:-.01em} .sw-nav{display:flex;gap:1.3rem;flex-wrap:wrap;font-weight:600;font-size:.95rem} .sw-nav a{text-decoration:none;color:var(--moss)} .sw-nav .current-menu-item > a,.sw-nav a[aria-current="page"]{color:var(--pine);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px} .sw-head-right{margin-left:auto;font-size:.85rem;color:var(--moss);font-weight:600} /* The menus: eight occasions and the type dropdown (spec §3) where the mockup had six short links, so the brand and the Etsy note share the first row and the menus take a row of their own. */ .sw-head-row .sw-head-right{order:2} .sw-head-row .sw-nav{order:3;flex-basis:100%;min-width:0;align-items:center} .sw-nav ul{display:flex;gap:.4rem 1.3rem;flex-wrap:wrap;list-style:none;margin:0;padding:0} .sw-types{position:relative} .sw-types summary{cursor:pointer;color:var(--moss);list-style:none;white-space:nowrap} .sw-types summary::-webkit-details-marker{display:none} .sw-types summary::after{content:"";display:inline-block;width:.4em;height:.4em;margin-left:.45em;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-.2em) rotate(45deg)} .sw-types[open] summary::after{transform:translateY(.05em) rotate(-135deg)} .sw-types ul{position:absolute;z-index:20;top:calc(100% + .6rem);left:0;min-width:14rem;flex-direction:column;flex-wrap:nowrap;gap:0;padding:.5rem;background:var(--paper);border:1px solid var(--oat-deep);border-radius:var(--radius);box-shadow:0 6px 18px rgba(31,59,45,.15)} .sw-types ul a{display:block;padding:.45rem .6rem;border-radius:6px;white-space:nowrap} .sw-types ul a:hover{background:var(--oat)} /* ---- Hero ---------------------------------------------------------------------------------------------------- */ .sw-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center;padding-block:3.5rem 3rem} .sw-hero h1{font-size:clamp(2.4rem,5.2vw,4.4rem);letter-spacing:-.015em;margin-top:.6rem} .sw-hero .lede{font-size:1.15rem;max-width:34ch;margin-top:1.1rem;color:var(--moss)} .sw-hero .cta{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.6rem} .sw-hero .art{position:relative} .sw-hero .art img{border-radius:18px;aspect-ratio:1;object-fit:cover;width:100%} .sw-hero .tag{position:absolute;left:14px;bottom:14px;background:var(--paper);border-radius:999px;padding:.45rem .8rem;font-size:.78rem;font-weight:700;color:var(--pine);box-shadow:0 6px 18px rgba(31,59,45,.15)} .sw-hero .tag .thread{color:var(--cranberry)} /* ---- Sections and type cards --------------------------------------------------------------------------------- */ .sw-section{padding-block:3rem} .sw-section-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem} .sw-section-head h2{font-size:clamp(1.7rem,3vw,2.4rem)} .sw-section-head a{font-weight:700;color:var(--moss);text-decoration:none;font-size:.9rem} .sw-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem} .sw-col-card{background:var(--paper);border-radius:var(--radius);overflow:hidden;border:1px solid var(--oat-deep);text-decoration:none;display:flex;flex-direction:column;color:inherit} .sw-col-card img{aspect-ratio:4/3;object-fit:cover;width:100%} .sw-col-card .body{padding:1rem 1.1rem 1.2rem} .sw-col-card h3{font-size:1.35rem} .sw-col-card p{color:var(--moss);font-size:.92rem;margin-top:.25rem} .sw-col-card .from{margin-top:.6rem;font-weight:700;font-size:.85rem} /* ---- Promise ------------------------------------------------------------------------------------------------- */ .sw-promise{background:var(--oat);border-radius:18px;padding:2.5rem clamp(1.2rem,4vw,3rem)} .sw-promise h2{font-size:clamp(1.8rem,3.2vw,2.6rem);max-width:18ch;margin-top:.5rem} .sw-promise .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1.8rem} .sw-promise h3{font-size:1.25rem;margin-bottom:.35rem} .sw-promise p{color:var(--moss)} /* ---- How it works -------------------------------------------------------------------------------------------- */ .sw-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.25rem} .sw-step{background:var(--paper);border:1px solid var(--oat-deep);border-radius:var(--radius);padding:1.2rem} .sw-step .n{font-family:var(--display);font-size:2rem;color:var(--hoop);line-height:1} .sw-step h3{font-size:1.15rem;margin-top:.5rem} .sw-step p{color:var(--moss);font-size:.92rem;margin-top:.3rem} /* ---- Product cards ------------------------------------------------------------------------------------------- */ /* Two a row on a phone, three on a tablet, four from 1024 px (the media blocks at the end): the featured band's eight cards lay out 4 + 4, where the mockup's auto-fill grid gave 5 + 3 in the 1180 px container. */ .sw-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;list-style:none;margin:0;padding:0} .sw-product{text-decoration:none;display:flex;flex-direction:column;gap:.5rem;color:inherit} .sw-product img{aspect-ratio:1;object-fit:cover;border-radius:var(--radius);width:100%;background:var(--oat)} .sw-product h3{font-family:var(--text);font-weight:700;font-size:.95rem;line-height:1.35} .sw-product .price{color:var(--moss);font-size:.9rem;font-weight:600} /* One line at the mockup's size: a long type label ends in an ellipsis rather than wrapping the card. */ .sw-product .meta{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--moss-soft);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---- Story, trust bar, journal ------------------------------------------------------------------------------- */ .sw-story{display:grid;grid-template-columns:.9fr 1.1fr;gap:2.5rem;align-items:center} .sw-story img{border-radius:18px;aspect-ratio:4/5;object-fit:cover;width:100%} .sw-story :is(h1,h2){font-size:clamp(1.9rem,3.4vw,2.8rem);margin-top:.5rem} .sw-story p{margin-top:1rem;font-size:1.05rem;max-width:52ch} .sw-story .cta{margin-top:1.2rem} .sw-trust{display:flex;gap:1rem 2.5rem;flex-wrap:wrap;justify-content:center;padding-block:1.4rem;font-weight:700;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:var(--moss)} .sw-trust span::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--cranberry);margin-right:.55rem;vertical-align:middle} .sw-journal{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.25rem} .sw-post{background:var(--paper);border:1px solid var(--oat-deep);border-radius:var(--radius);padding:1.2rem} .sw-post h3{font-size:1.2rem} .sw-post h3 a{text-decoration:none} .sw-post p{color:var(--moss);font-size:.9rem;margin-top:.4rem} /* ---- Site footer --------------------------------------------------------------------------------------------- */ .sw-site-foot{background:var(--pine);color:var(--linen);margin-top:2rem} .sw-foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding-block:2.5rem} .sw-foot-grid h4{margin:0 0 .6rem;font-family:var(--text);font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75} .sw-foot-grid a{display:block;text-decoration:none;opacity:.9;margin-bottom:.35rem;font-size:.95rem} .sw-foot-grid .sw-brand{display:flex;opacity:1;margin-bottom:.8rem;font-size:inherit} .sw-foot-grid ul{list-style:none;margin:0;padding:0} .sw-foot-grid p{opacity:.85;font-size:.95rem;max-width:36ch} .sw-foot-bottom{border-top:1px solid rgba(246,241,232,.2);padding-block:1rem;font-size:.8rem;opacity:.75;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap} /* ---- Product page (woocommerce/single-product.php) ----------------------------------------------------------- */ /* Astra makes .ast-container a flex box on every page: the product page takes its full width. */ .sw-single{width:100%;min-width:0} .sw-crumbs{font-size:.85rem;color:var(--moss);padding-block:1.2rem .4rem} .sw-crumbs a{text-decoration:none} .sw-crumbs a:hover,.sw-crumbs a:focus-visible{text-decoration:underline} .sw-crumbs .sep{margin-inline:.45rem;color:var(--moss-soft)} .sw-pdp{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:start;padding-block:1rem 3rem} .sw-gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem} .sw-gallery img:first-child{grid-column:1/-1;aspect-ratio:1;object-fit:cover;border-radius:14px} .sw-gallery img{aspect-ratio:1;object-fit:cover;border-radius:8px} .sw-buy h1{font-size:clamp(1.6rem,2.8vw,2.3rem);margin-top:.5rem} .sw-buy .price{font-size:1.5rem;font-weight:700;margin-top:.9rem} .sw-buy .price small{font-size:.85rem;font-weight:600;color:var(--moss);margin-left:.5rem} .sw-buy .facts{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem} .sw-buy .facts span{background:var(--oat);border-radius:999px;padding:.3rem .7rem;font-size:.78rem;font-weight:700;color:var(--moss)} .sw-opt{margin-top:1.4rem} .sw-opt h3{font-family:var(--text);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--moss);margin-bottom:.5rem} .sw-chips{display:flex;gap:.45rem;flex-wrap:wrap} .sw-chip{border:1px solid var(--oat-deep);background:var(--paper);border-radius:8px;padding:.4rem .65rem;font-size:.85rem;font-weight:600} .sw-chip.more{border-style:dashed;color:var(--moss)} .sw-buybox{margin-top:1.6rem;background:var(--paper);border:1px solid var(--oat-deep);border-radius:14px;padding:1.2rem} .sw-buybox .sw-btn{width:100%;justify-content:center;font-size:1.05rem;padding:1rem} .sw-buybox p{font-size:.85rem;color:var(--moss);margin-top:.7rem;text-align:center} .sw-desc{padding-block:1rem 3rem;max-width:68ch} .sw-desc h2{font-size:1.6rem;margin-bottom:.8rem} /* The listing's own section headers (the sync's

), sized as the mockup's "Materials and craftsmanship". / .sw-desc h3{font-size:1.2rem;margin:1.4rem 0 .6rem} .sw-desc p{margin-bottom:.9rem} .sw-desc ul{margin:.2rem 0 1rem 1.2rem;padding:0;color:var(--moss)} / ---- Occasion and type archives (taxonomy-product_cat.php) ----------------------------------------------------- / / Astra makes .ast-container a flex box on every page: the archive takes its full width. / .sw-archive{width:100%;min-width:0;padding-block:2rem 1rem} .sw-archive-head{max-width:46rem;margin-bottom:2rem} .sw-archive-head h1{font-size:clamp(2rem,4.5vw,3.2rem)} .sw-archive-intro{margin-top:.9rem;color:var(--moss);font-size:1.05rem} .sw-archive-intro p + p{margin-top:.75rem} .sw-archive-empty{padding-block:1.5rem;color:var(--moss);font-size:1.05rem} .sw-archive .woocommerce-pagination{margin-top:2rem} .sw-archive-links ul{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0 0 1.75rem;padding:0} .sw-archive-links h3{font-size:1.2rem;margin-bottom:.75rem} .sw-archive-links a{display:block;padding:.35rem .9rem;border:1px solid var(--oat-deep);border-radius:999px;background:var(--paper);text-decoration:none;font-weight:600;font-size:.9rem} .sw-archive-links a:hover,.sw-archive-links a:focus-visible{border-color:var(--pine)} / ---- Pages (page.php, page-our-story.php, page-how-it-works.php) ------------------------------------------------ / / Astra makes .ast-container a flex box on every page: the page takes its full width. / .sw-page{width:100%;min-width:0;padding-block:2rem 1rem} .sw-page-head{max-width:46rem;margin-bottom:1.5rem} .sw-page-head h1{font-size:clamp(2rem,4.5vw,3.2rem)} .sw-page .sw-story{padding-top:1rem} .sw-prose{max-width:68ch;padding-block:1.5rem 1rem;font-size:1.05rem} .sw-page-head + .sw-prose{padding-top:0} .sw-prose h2{font-size:1.45rem;margin:2rem 0 .6rem} .sw-prose > h2:first-child{margin-top:0} .sw-prose p{margin:0 0 1rem} .sw-prose ul{margin:0 0 1rem 1.2rem;padding:0} .sw-prose li{margin-bottom:.4rem} .sw-prose a:not(.sw-btn){color:var(--pine);text-decoration:underline;text-underline-offset:3px} .sw-prose a:not(.sw-btn):hover{color:var(--cranberry)} .sw-prose code{font-size:.9em;background:var(--oat);border-radius:4px;padding:.05em .3em} / ---- Phone (the mockup's single breakpoint) ------------------------------------------------------------------ / @media (max-width:820px){ .sw-hero,.sw-story,.sw-pdp{grid-template-columns:1fr} .sw-foot-grid{grid-template-columns:1fr 1fr} .sw-head-right{display:none} / The occasions are one row of chips that scrolls sideways (every link stays in the page). While more chips are hidden, the right edge fades (.has-more, set by assets/js/nav.js); the current occasion is a filled chip. The dropdown stays outside the scroller so it is not clipped. / .sw-nav{flex-wrap:nowrap;gap:.75rem} .sw-occasions-wrap{position:relative;flex:1 1 auto;min-width:0} .sw-occasions-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:2.5rem;background:linear-gradient(to right,rgba(255,253,249,0),var(--paper) 85%);pointer-events:none;opacity:0;transition:opacity .15s} .sw-occasions-wrap.has-more::after{opacity:1} .sw-nav .sw-occasions{flex-wrap:nowrap;gap:.4rem;overflow-x:auto;white-space:nowrap;scrollbar-width:none;padding-block:.1rem} .sw-occasions::-webkit-scrollbar{display:none} .sw-occasions a{display:block;padding:.3rem .75rem;border:1px solid var(--oat-deep);border-radius:999px;background:var(--paper);font-size:.9rem} .sw-occasions .current-menu-item > a{border-color:var(--pine);background:var(--pine);color:var(--linen);text-decoration:none} .sw-types ul{left:auto;right:0} } / ---- The product grid past the phone (see Product cards) ------------------------------------------------------ */ @media (min-width:821px){ .sw-products{grid-template-columns:repeat(3,minmax(0,1fr))} } @media (min-width:1024px){ .sw-products{grid-template-columns:repeat(4,minmax(0,1fr))} } @media (prefers-reduced-motion:no-preference){ .sw-btn{transition:transform .15s ease} .sw-btn:hover{transform:translateY(-1px)} }