/* ========================================================================== Marigold — the motherhood journey Design tokens Saffron-gold and deep plum on warm cream: the flower of thresholds and beginnings. Deliberately distinct from the sibling sites (Cadence porcelain /green, Relief paper/ember, Cocoon dark cocoa). ========================================================================== */ :root { --ink: #2e1f26; --ink-soft: #6f5c63; --paper: #fbf6ec; --surface: #f4eada; --surface-deep: #ead9be; --line: rgba(46, 31, 38, 0.14); --line-soft: rgba(46, 31, 38, 0.07); /* Marigold gold — the master accent, and the Breastfeeding stage */ --gold: #e8a33d; --gold-deep: #b87a1c; --gold-tint: #faecd2; /* Fresh green — Pre-Pregnancy. Beginnings, the first shoot. */ --leaf: #5f8354; --leaf-deep: #456138; --leaf-tint: #e0ecdb; /* Deep rose — Postpartum. Recovery, tenderness. */ --rose: #b0546a; --rose-deep: #8a3a4e; --rose-tint: #f7e0e5; --accent: var(--gold); --accent-deep: var(--gold-deep); --accent-tint: var(--gold-tint); --radius: 6px; --radius-lg: 14px; --shadow-card: 0 1px 2px rgba(46, 31, 38, 0.06); --display: "Newsreader", Georgia, "Times New Roman", serif; --body-font: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* The label treatment (mono + uppercase + letter-spacing) read as machine-generated, so --mono now resolves to the body font. Kept as a token so existing var(--mono) usages still work; figures keep their column alignment with font-variant-numeric instead. */ --mono: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --content-width: 1120px; } /* Stage themes — set on so a whole page takes its stage's colour. */ body.theme-pre-pregnancy { --accent: var(--leaf); --accent-deep: var(--leaf-deep); --accent-tint: var(--leaf-tint); } body.theme-breastfeeding { --accent: var(--gold); --accent-deep: var(--gold-deep); --accent-tint: var(--gold-tint); } body.theme-postpartum { --accent: var(--rose); --accent-deep: var(--rose-deep); --accent-tint: var(--rose-tint); } /* ========================================================================== Reset & base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @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; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body-font); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--display); font-weight: 560; line-height: 1.1; margin: 0 0 0.5em; letter-spacing: -0.01em; } p { margin: 0 0 1em; } ul, ol { padding-left: 1.2em; } button { font-family: inherit; } :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 3px; } .wrap { max-width: var(--content-width); margin: 0 auto; padding: 0 24px; } .eyebrow { font-family: var(--mono); font-size: 0.75rem; color: var(--accent-deep); display: inline-block; margin-bottom: 0.9em; } .section { padding: 72px 0; border-bottom: 1px solid var(--line-soft); } .section--tight { padding: 48px 0; } .section-head { max-width: 640px; margin-bottom: 40px; } .section-head p { color: var(--ink-soft); font-size: 1.0625rem; } .mono { font-family: var(--mono); } .muted { color: var(--ink-soft); } .cite { font-family: var(--mono); font-size: 0.8125rem; color: var(--ink-soft); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.85em 1.5em; border-radius: var(--radius); font-weight: 600; font-size: 0.95rem; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent); color: var(--paper); border-color: var(--accent); } .btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); } .btn-block { width: 100%; justify-content: center; } .btn[disabled] { opacity: 0.55; cursor: default; } /* ========================================================================== Header / nav ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(251, 246, 236, 0.92); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; } .wordmark { font-family: var(--display); font-style: italic; font-weight: 600; font-size: 1.5rem; text-decoration: none; color: var(--ink); display: flex; align-items: center; min-height: 44px; gap: 0.4em; } /* The brand mark — a two-ring marigold rosette. It lives in CSS rather than in the markup so every page picks it up from one place, and so the same rosette can appear in the header and the footer without duplicated SVG ids. The wordmark link text supplies the accessible name, which makes the mark itself decorative. */ .wordmark__dot { width: 30px; height: 30px; flex: 0 0 auto; display: inline-block; border-radius: 0; box-shadow: none; background: url("data:image/svg+xml,") center / contain no-repeat; } .site-footer .wordmark__dot { width: 26px; height: 26px; } .nav { display: flex; align-items: center; gap: 28px; } .nav__links { display: flex; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav__links a { text-decoration: none; font-size: 0.95rem; font-weight: 500; position: relative; padding: 6px 0; } .nav__links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--gold), var(--rose)); transition: right 0.2s ease; } .nav__links a:hover::after, .nav__links a[aria-current="page"]::after { right: 0; } .nav__links a[aria-current="page"] { color: var(--accent-deep); } .nav__toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 10px; min-width: 44px; min-height: 44px; cursor: pointer; } .nav__toggle span { display: block; width: 20px; height: 2px; background: var(--ink); margin: 4px 0; } @media (max-width: 860px) { .nav__toggle { display: block; } .nav { position: fixed; inset: 76px 0 auto 0; background: var(--paper); border-bottom: 1px solid var(--line); flex-direction: column; align-items: stretch; padding: 12px 24px 24px; transform: translateY(-8px); opacity: 0; /* visibility (not just opacity) is what takes the closed menu's links out of the tab order and away from screen readers. It's held until the fade finishes so the transition still reads. */ visibility: hidden; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; } .nav.is-open { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s; } /* Stop the page scrolling behind the open drawer. */ body.nav-open { overflow: hidden; } .nav__links { flex-direction: column; gap: 4px; } .nav__links a { display: block; padding: 12px 4px; } .nav__cta { margin-top: 12px; } } /* ========================================================================== Hero ========================================================================== */ .hero { padding: 64px 0 56px; } .hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } } .hero h1 { font-size: clamp(2.4rem, 4.4vw, 3.6rem); max-width: 14ch; } .hero .ritual { font-family: var(--display); font-style: italic; color: var(--accent-deep); font-size: 1.25rem; margin-bottom: 0.6em; display: block; } .hero p.lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 46ch; } .hero__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; } .hero__price { margin-top: 26px; font-family: var(--mono); font-size: 0.9rem; color: var(--ink-soft); } .hero__price strong { color: var(--ink); font-size: 1.05rem; } /* ========================================================================== Evidence ranking (ordered, meaningful numbering) ========================================================================== */ .evidence-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 860px) { .evidence-grid { grid-template-columns: 1fr; } } .evidence-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px 26px; position: relative; } .evidence-card__rank { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.08em; } .evidence-card h3 { font-size: 1.3rem; margin-top: 0.3em; } .evidence-card p { color: var(--ink-soft); font-size: 0.95rem; } .evidence-card--1 { border-color: var(--accent); box-shadow: 0 2px 0 var(--accent) inset; } /* ========================================================================== Product family grid ========================================================================== */ .product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 900px) { .product-grid { grid-template-columns: 1fr; } } .product-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; display: flex; flex-direction: column; text-decoration: none; color: var(--ink); transition: border-color 0.15s ease, transform 0.15s ease; } .product-card:hover { border-color: var(--card-accent, var(--ink)); transform: translateY(-2px); } .product-card__tag { align-self: flex-start; font-family: var(--mono); font-size: 0.7rem; background: var(--card-tint, var(--gold-tint)); color: var(--card-accent, var(--gold-deep)); padding: 4px 10px; border-radius: 999px; margin-bottom: 16px; } .product-card h3 { font-size: 1.5rem; margin-bottom: 0.25em; } .product-card .ritual { font-family: var(--display); font-style: italic; color: var(--card-accent, var(--gold-deep)); font-size: 1rem; } .product-card p.desc { color: var(--ink-soft); font-size: 0.95rem; flex-grow: 1; } .product-card__price { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.85rem; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 16px; display: flex; justify-content: space-between; align-items: baseline; } /* Per-product card colour, inherited from the product's stage. */ .product-card--pillow, .product-card--ovulation { --card-accent: var(--leaf-deep); --card-tint: var(--leaf-tint); } .product-card--alcohol-strips, .product-card--nipple-butter, .product-card--breast-therapy { --card-accent: var(--gold-deep); --card-tint: var(--gold-tint); } .product-card--postpartum-underwear { --card-accent: var(--rose-deep); --card-tint: var(--rose-tint); } /* ========================================================================== Diagram frames (SVG illustrations) ========================================================================== */ .diagram-frame { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; display: flex; align-items: center; justify-content: center; } .diagram-frame svg { width: 100%; height: auto; } /* ========================================================================== Two column content sections ========================================================================== */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 860px) { .split { grid-template-columns: 1fr; } } .split--reverse .split__media { order: 2; } @media (max-width: 860px) { .split--reverse .split__media { order: 0; } } .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { padding-left: 1.8em; position: relative; margin-bottom: 0.9em; } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); } /* ========================================================================== Specs table ========================================================================== */ .specs { width: 100%; border-collapse: collapse; } .specs th, .specs td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--line); vertical-align: top; } .specs th { font-variant-numeric: tabular-nums; width: 220px; font-weight: 600; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); } .specs tr:last-child th, .specs tr:last-child td { border-bottom: none; } /* ========================================================================== Steps (how to use) — genuine sequence ========================================================================== */ .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .steps li { counter-increment: step; background: var(--surface); border-radius: var(--radius-lg); padding: 22px 20px; border: 1px solid var(--line); } .steps li::before { content: counter(step, decimal-leading-zero); font-family: var(--mono); color: var(--accent-deep); font-size: 0.85rem; display: block; margin-bottom: 10px; } /* ========================================================================== Safety callout ========================================================================== */ .safety { background: var(--surface); border: 1px solid var(--accent); border-left-width: 5px; border-radius: var(--radius); padding: 24px 26px; } .safety--warn { border-color: var(--rose-deep); } .safety h3 { font-size: 1.05rem; margin-bottom: 0.5em; display: flex; align-items: center; gap: 0.5em; } .safety ul { margin-bottom: 0; } .safety p:last-child { margin-bottom: 0; } /* ========================================================================== FAQ (native details/summary) ========================================================================== */ .faq-item { border-bottom: 1px solid var(--line); } .faq-item summary { cursor: pointer; padding: 20px 4px; font-family: var(--display); font-size: 1.1rem; font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--mono); font-size: 1.4rem; color: var(--accent-deep); flex-shrink: 0; transition: transform 0.15s ease; } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-item .faq-answer { padding: 0 4px 22px; color: var(--ink-soft); max-width: 68ch; } /* ========================================================================== Comments ========================================================================== */ .comments-head { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 12px; } .comment-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; margin: 28px 0 40px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; } @media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } } label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; } input[type="text"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], select, textarea { width: 100%; font-family: var(--body-font); font-size: 0.95rem; /* 12px keeps the control on a 44px tap target. */ padding: 12px 13px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--ink); } input:focus, select:focus, textarea:focus { border-color: var(--accent); } textarea { resize: vertical; min-height: 96px; } .form-field { margin-bottom: 16px; } .form-note { font-size: 0.82rem; color: var(--ink-soft); margin-top: 10px; } .comment-list { list-style: none; margin: 0; padding: 0; } .comment { border-bottom: 1px solid var(--line-soft); padding: 20px 0; } .comment__meta { display: flex; gap: 10px; align-items: baseline; margin-bottom: 6px; } .comment__name { font-weight: 700; } .comment__date { font-family: var(--mono); font-size: 0.75rem; color: var(--ink-soft); } .comment__body { color: var(--ink); margin: 0; } .comment-empty { color: var(--ink-soft); font-style: italic; padding: 12px 0; } .toast { margin-top: 14px; padding: 12px 16px; border-radius: var(--radius); background: var(--accent-tint); color: var(--accent-deep); font-size: 0.9rem; font-weight: 600; display: none; } .toast.is-visible { display: block; } /* ========================================================================== Related products / cross-sell ========================================================================== */ .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 860px) { .related-grid { grid-template-columns: 1fr; } } /* ========================================================================== Contact page ========================================================================== */ .contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; } @media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } } .contact-info h3 { font-size: 1rem; font-family: var(--mono); color: var(--ink-soft); margin-bottom: 0.6em; } .contact-info .block { margin-bottom: 28px; } /* ========================================================================== Footer ========================================================================== */ .site-footer { padding: 56px 0 40px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; margin-bottom: 40px; } @media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer-grid h4 { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); margin-bottom: 1em; } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: 0.6em; } .footer-grid a { text-decoration: none; font-size: 0.92rem; } .footer-grid a:hover { color: var(--accent-deep); } .disclaimer { background: var(--surface); border-radius: var(--radius-lg); padding: 22px 24px; font-size: 0.85rem; color: var(--ink-soft); margin-bottom: 28px; } .disclaimer strong { color: var(--ink); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 0.82rem; color: var(--ink-soft); padding-top: 24px; border-top: 1px solid var(--line); } /* ========================================================================== Breadcrumb ========================================================================== */ .crumb { display: inline-flex; align-items: center; gap: 8px; /* Vertical padding gives the link a 44px tap target without moving it. */ min-height: 44px; padding: 11px 0; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); text-decoration: none; margin-bottom: 11px; } .crumb:hover { color: var(--ink); } /* ========================================================================== Quick-facts band (sits directly under a product hero) ========================================================================== */ .factband { background: var(--accent); color: var(--paper); } .factband .wrap { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; padding: 18px 24px; font-family: var(--mono); font-size: 0.85rem; text-align: center; } .factband b { font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1rem; display: block; } .factband span small { display: block; opacity: 0.8; font-size: 0.72rem; margin-top: 2px; } /* ========================================================================== In-page jump nav (chip links to sections of a long product page) ========================================================================== */ .jumpnav { display: flex; gap: 10px; flex-wrap: wrap; padding: 22px 0 4px; } .jumpnav a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: 0.78rem; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; color: var(--ink-soft); transition: border-color 0.15s ease, color 0.15s ease; } .jumpnav a:hover { border-color: var(--accent); color: var(--ink); } /* ========================================================================== Vision statement (homepage, centered mission copy) ========================================================================== */ .vision { max-width: 680px; margin: 0 auto; text-align: center; } .vision .eyebrow { display: block; } .vision p { font-size: 1.1rem; color: var(--ink-soft); } /* ========================================================================== Promise cards (explicit USP statements) ========================================================================== */ .promise-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 900px) { .promise-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .promise-grid { grid-template-columns: 1fr; } } .promise-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 24px; } .promise-card svg { width: 30px; height: 30px; margin-bottom: 16px; color: var(--accent-deep); } .promise-card h3 { font-size: 1.1rem; margin-bottom: 0.4em; } .promise-card p { color: var(--ink-soft); font-size: 0.92rem; margin: 0; } /* ========================================================================== Us vs. them comparison ========================================================================== */ .compare { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } @media (max-width: 700px) { .compare { grid-template-columns: 1fr; } } .compare-col { border-radius: var(--radius-lg); padding: 30px 28px; } .compare-col--us { background: var(--ink); color: var(--paper); } .compare-col--them { background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); } .compare-lbl { font-family: var(--mono); font-size: 0.72rem; margin-bottom: 16px; opacity: 0.85; display: block; } .compare-col ul { list-style: none; margin: 0; padding: 0; } .compare-col li { padding: 10px 0 10px 26px; position: relative; font-size: 0.95rem; } .compare-col--us li { border-bottom: 1px solid rgba(251, 246, 236, 0.14); } .compare-col--them li { border-bottom: 1px solid var(--line-soft); } .compare-col li:last-child { border-bottom: none; } .compare-col--us li::before { content: "✓"; position: absolute; left: 0; color: var(--accent-deep); font-family: var(--mono); } .compare-col--them li::before { content: "✕"; position: absolute; left: 0; color: var(--ink-faint, var(--ink-soft)); font-family: var(--mono); font-size: 0.85rem; } /* ========================================================================== Calm safety box (deliberately not alarmist) ========================================================================== */ .safety-box { background: var(--surface); border-left: 4px solid var(--accent); border-radius: var(--radius); padding: 24px 26px; display: flex; gap: 18px; align-items: flex-start; } /* A firmer variant for the things that genuinely need a doctor. */ .safety-box--warn { border-left-color: var(--rose-deep); background: var(--rose-tint); } .safety-box--warn .safety-box__icon { background: var(--rose-deep); color: #fff; } .safety-box__icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 0.9rem; font-weight: 500; line-height: 1; margin-top: 2px; } .safety-box__body h3 { font-size: 1.05rem; margin-bottom: 0.5em; } .safety-box__body p { color: var(--ink-soft); margin: 0; } /* ========================================================================== Register-interest form (Relief · Pulse) ========================================================================== */ .interest-form.done .interest-form__inner { display: none; } .interest-form__done { display: none; text-align: center; padding: 20px 6px; } .interest-form__done.show { display: block; } .interest-form__done .check { width: 52px; height: 52px; border-radius: 50%; background: var(--accent); display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; color: var(--paper); } .interest-form__done h3 { font-size: 1.35rem; margin-bottom: 0.5em; } .interest-form__done p { max-width: 40ch; margin: 0 auto; } .consent-row { display: flex; gap: 9px; align-items: flex-start; font-size: 0.85rem; color: var(--ink-soft); font-weight: 400; margin: 4px 0 16px; line-height: 1.5; } .consent-row input { margin-top: 3px; width: 16px; height: 16px; flex: 0 0 auto; accent-color: var(--accent); } /* ========================================================================== Fade-in on load (respects reduced motion via base rule above) ========================================================================== */ .fade-up { animation: fadeUp 0.6s ease both; } @keyframes fadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .delay-1 { animation-delay: 0.08s; } .delay-2 { animation-delay: 0.16s; } /* --------------------------------------------------------------------- Layer-2 research survey (inline success-state + standalone survey.html) --------------------------------------------------------------------- */ .survey { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px; } /* Inline variant sits under a form's success toast. */ .survey--inline { margin-top: 20px; } .survey__eyebrow { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-deep); margin-bottom: 10px; } .survey__title { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3.5vw, 1.9rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 10px; } .survey__ask { font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 22px; } .survey__hint { font-family: var(--mono); font-size: 0.6rem; color: var(--ink-soft); font-weight: 400; } .survey__other { width: 100%; margin-top: 10px; } .survey__other[hidden] { display: none; } .survey__ask strong { color: var(--ink); } .survey__q { margin-bottom: 22px; } .survey__q-label { font-size: 0.9rem; font-weight: 600; color: var(--ink); margin-bottom: 10px; } .survey__opts { display: flex; flex-wrap: wrap; gap: 8px; } .survey__opt { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--body-font); font-size: 0.88rem; padding: 8px 16px; border: 1px solid var(--line); border-radius: 100px; background: var(--paper); color: var(--ink); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .survey__opt:hover { border-color: var(--accent); } .survey__opt.is-selected { background: var(--accent); border-color: var(--accent); color: #fff; } .survey__text { margin-top: 2px; min-height: 64px; } .survey__msg { font-size: 0.82rem; color: var(--accent-deep); min-height: 1em; margin: 4px 0 12px; } .survey__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .survey__skip { background: none; border: none; min-height: 44px; font-family: var(--body-font); font-size: 0.85rem; color: var(--ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; padding: 12px 0; } .survey__skip:hover { color: var(--ink); } .survey__skipped { font-size: 0.95rem; color: var(--ink-soft); margin: 0; padding: 6px 0; } .survey__done { text-align: center; padding: 10px 6px; } .survey__gift { font-size: 2rem; margin-bottom: 8px; } .survey__done h3 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; margin: 0 0 8px; } .survey__done p { color: var(--ink-soft); font-size: 0.95rem; margin: 0 auto; max-width: 42ch; } /* --------------------------------------------------------------------- Reading (article index + article pages) --------------------------------------------------------------------- */ .reading-list { display: grid; gap: 18px; max-width: 760px; } .reading-card { display: block; padding: 26px 28px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); text-decoration: none; color: inherit; transition: border-color 0.15s, transform 0.15s; } .reading-card:hover { border-color: var(--accent); transform: translateY(-2px); } .reading-card h3 { font-family: var(--display); font-weight: 400; font-size: 1.35rem; margin: 8px 0 8px; line-height: 1.2; } .reading-card p { color: var(--ink-soft); font-size: 0.98rem; margin: 0 0 12px; } .reading-card .more { font-family: var(--mono); font-size: 0.72rem; color: var(--accent-deep); } /* Long-form article body */ .article { max-width: 68ch; } .article p { margin: 0 0 18px; } .article h2 { margin: 34px 0 12px; } .article__meta { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0 0 4px; } .article__back { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 0; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); text-decoration: none; } .article__back:hover { color: var(--ink); } /* --------------------------------------------------------------------- Comment replies (single-level threading) --------------------------------------------------------------------- */ .comment__replies { list-style: none; margin: 14px 0 0; padding: 0 0 0 20px; border-left: 2px solid var(--line); } .comment--reply { border-bottom: none; padding: 12px 0; } .comment__reply-wrap { margin-top: 8px; } .comment__reply-btn { background: none; border: none; padding: 0; cursor: pointer; font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); } .comment__reply-btn:hover { color: var(--accent-deep); } .comment__reply-form { margin-top: 12px; padding: 16px; background: var(--surface); border-radius: var(--radius); max-width: 480px; } .comment__reply-form input, .comment__reply-form textarea { margin-bottom: 10px; } .comment__reply-form textarea { min-height: 70px; } .comment__reply-actions { display: flex; align-items: center; gap: 12px; } .comment__reply-cancel { background: none; border: none; padding: 0; cursor: pointer; font-size: 0.85rem; color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; } .comment__reply-cancel:hover { color: var(--ink); } .comment__reply-msg { font-size: 0.82rem; color: var(--accent-deep); margin-top: 8px; min-height: 1em; } .comment__reply-note { margin: 10px 0 0; font-size: 0.85rem; color: var(--ink-soft); } /* --------------------------------------------------------------------- Mobile-first polish — tighter vertical rhythm and comfortable tap targets on small screens (the base scale is tuned for desktop). --------------------------------------------------------------------- */ @media (max-width: 560px) { .wrap { padding: 0 20px; } .section { padding: 44px 0; } .section--tight { padding: 34px 0; } .section-head { margin-bottom: 26px; } .hero { padding: 40px 0 34px; } /* Footer: tighter rhythm + finger-friendly links */ .site-footer { padding: 40px 0 30px; } .footer-grid { gap: 24px 20px; margin-bottom: 28px; } .footer-grid h4 { margin-bottom: 0.35em; } .footer-grid li { margin-bottom: 0; } .footer-grid ul a { display: inline-block; padding: 9px 0; font-size: 0.98rem; } .footer-bottom { gap: 8px; } /* Reading cards: a touch tighter on small screens */ .reading-card { padding: 20px 20px; } } /* ========================================================================== Stage tiles — the three doorways into the range The structural move borrowed from frida.com/pages/mom: pick where you are before you look at anything. Each tile carries its own stage colour. ========================================================================== */ .stage-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 900px) { .stage-tiles { grid-template-columns: 1fr; } } .stage-tile { --tile: var(--gold); --tile-deep: var(--gold-deep); --tile-tint: var(--gold-tint); position: relative; display: flex; flex-direction: column; min-height: 320px; padding: 30px 28px 26px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--tile-tint); text-decoration: none; color: var(--ink); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; } .stage-tile:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(46, 31, 38, 0.09); } .stage-tile--pre-pregnancy { --tile: var(--leaf); --tile-deep: var(--leaf-deep); --tile-tint: var(--leaf-tint); } .stage-tile--breastfeeding { --tile: var(--gold); --tile-deep: var(--gold-deep); --tile-tint: var(--gold-tint); } .stage-tile--postpartum { --tile: var(--rose); --tile-deep: var(--rose-deep); --tile-tint: var(--rose-tint); } /* The petal motif, bled off the bottom-right corner. */ .stage-tile__motif { position: absolute; right: -34px; bottom: -34px; width: 168px; height: 168px; color: var(--tile); opacity: 0.24; pointer-events: none; } .stage-tile__no { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.09em; color: var(--tile-deep); margin-bottom: 14px; } .stage-tile h3 { font-size: 1.65rem; margin-bottom: 0.35em; position: relative; } .stage-tile p { color: var(--ink-soft); font-size: 0.98rem; position: relative; max-width: 28ch; } .stage-tile__count { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); margin-top: auto; padding-top: 18px; } .stage-tile__go { position: relative; margin-top: 10px; font-weight: 700; font-size: 0.95rem; color: var(--tile-deep); display: inline-flex; align-items: center; gap: 0.45em; } .stage-tile:hover .stage-tile__go { gap: 0.75em; } /* ========================================================================== Spotlight — a single product given a whole band to itself ========================================================================== */ .spotlight { display: grid; grid-template-columns: 1fr 1fr; gap: 44px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line-soft); } .spotlight:last-child { border-bottom: none; } @media (max-width: 860px) { .spotlight { grid-template-columns: 1fr; gap: 26px; padding: 30px 0; } /* Keep the visual above the words on every band, regardless of order. */ .spotlight__media { order: -1; } } .spotlight--flip .spotlight__media { order: -1; } @media (max-width: 860px) { .spotlight--flip .spotlight__media { order: -1; } } .spotlight h3 { font-size: 1.9rem; margin-bottom: 0.3em; } .spotlight .lede { color: var(--ink-soft); font-size: 1.0625rem; max-width: 44ch; } .spotlight__price { font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 0.9rem; margin-bottom: 18px; display: flex; align-items: baseline; gap: 10px; } .spotlight__price .old { text-decoration: line-through; color: var(--ink-soft); } .spotlight__price .new { font-size: 1.15rem; font-weight: 500; color: var(--accent-deep); } /* ========================================================================== Stage page hero — a tinted band naming where you are ========================================================================== */ .stage-hero { background: var(--accent-tint); border-bottom: 1px solid var(--line); padding: 54px 0 46px; } .stage-hero h1 { font-size: clamp(2.1rem, 5vw, 3rem); margin-bottom: 0.3em; } .stage-hero p { color: var(--ink-soft); font-size: 1.0625rem; max-width: 56ch; margin-bottom: 0; } @media (max-width: 560px) { .stage-hero { padding: 34px 0 30px; } .stage-tile { min-height: 0; padding: 24px 22px 22px; } .stage-tile__motif { width: 128px; height: 128px; } .spotlight h3 { font-size: 1.55rem; } } /* A standalone text link that still hits a 44px tap target on mobile. */ .more-link { display: inline-block; padding: 12px 0; font-weight: 600; color: var(--accent-deep); } /* ========================================================================== Sticky pre-book bar (mobile only) On a phone the reserve form is a long way down a product page, so the price and the action follow you in the thumb zone. Mirrors the pattern Cadence uses. The bar is built by js/main.js from what's already on the page, so the product pages carry no extra markup. ========================================================================== */ :root { --mbar-h: 0px; } body { padding-bottom: var(--mbar-h); } .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; align-items: center; gap: 12px; /* env() keeps the bar clear of the home indicator on notched phones. */ padding: 10px var(--gutter, 20px) calc(10px + env(safe-area-inset-bottom)); background: rgba(251, 246, 236, 0.96); backdrop-filter: blur(10px); border-top: 1px solid var(--line); transform: translateY(110%); transition: transform 0.25s ease; } .mbar.is-shown { transform: none; } .mbar__txt { flex: 1; min-width: 0; line-height: 1.25; } .mbar__price { font-variant-numeric: tabular-nums; display: block; font-family: var(--mono); font-size: 1rem; font-weight: 500; color: var(--ink); } .mbar__price .strike { margin-right: 6px; font-weight: 400; color: var(--ink-soft); text-decoration: line-through; } .mbar__note { font-size: 0.72rem; color: var(--ink-soft); } .mbar .btn { flex: 0 0 auto; min-height: 44px; padding: 0.7em 1.35em; font-size: 0.92rem; } @media (min-width: 861px) { .mbar { display: none; } } @media (max-width: 860px) { body.has-mbar { --mbar-h: 72px; } }