/* ===================================================================== MYSA — Base stylesheet Source of truth for tokens: STYLE_GUIDE.md ===================================================================== */ /* ---------- 1. Fonts ---------- */ @import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@400..600&family=Ribeye+Marrow&family=Space+Grotesk:wght@300..700&family=Lora:ital,wght@0,400..700;1,400..700&display=swap"); /* ---------- 2. Design tokens ---------- */ :root { --color-bubblegum-pop: #f655a6; --color-lavender-haze: #e4d6ff; --color-mint-cloud: #c8f9e9; --color-sky-glow: #c5eafc; --color-charcoal-mist: #3a1f47; --color-cream-cloud: #fcfaf7; --color-blush-dream: #ffd6e4; --color-golden-ticket: #ffdf80; --color-acid-green: #39ff14; --color-electric-blue: #00fff0; --color-hot-pink: #ff10f0; --color-cyber-purple: #bc13fe; --background: var(--color-cream-cloud); --foreground: var(--color-charcoal-mist); --primary: var(--color-bubblegum-pop); --secondary: var(--color-lavender-haze); --muted: var(--color-blush-dream); --accent: var(--color-sky-glow); --destructive: #ef4343; --border: #ecc6d9; --input: #ecc6d9; --ring: var(--color-bubblegum-pop); --font-ribeye: "Ribeye Marrow", "Fredoka", sans-serif; --font-ui: "Fredoka", "Space Grotesk", sans-serif; --font-syne: var(--font-ui); /* alias — UI font is now Fredoka */ --font-grotesk: "Space Grotesk", sans-serif; --font-lora: "Lora", serif; --radius: 1.5rem; --radius-2xl: 1rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem; --radius-5xl: 2.5rem; --radius-6xl: 3rem; --shadow-pop-sm: 4px 4px 0px 0px var(--color-charcoal-mist); --shadow-pop: 6px 6px 0px 0px var(--color-charcoal-mist); --shadow-pop-lg: 8px 8px 0px 0px var(--color-charcoal-mist); --shadow-pop-xl: 12px 12px 0px 0px var(--color-charcoal-mist); --shadow-pop-pink: 8px 8px 0px 0px var(--color-bubblegum-pop); --shadow-pop-sky: 8px 8px 0px 0px var(--color-sky-glow); --shadow-pop-mint: 8px 8px 0px 0px var(--color-mint-cloud); --shadow-pop-lavender: 8px 8px 0px 0px var(--color-lavender-haze); --shadow-pop-sky-xl: 12px 12px 0px 0px var(--color-sky-glow); --shadow-pop-acid: 12px 12px 0px 0px var(--color-acid-green); /* --theme-pop: per-page accent. Override on below. */ --theme-pop: var(--color-bubblegum-pop); --theme-pop-soft: rgba(246, 85, 166, .14); } /* Per-page theme accent — used by .text-pop, .hh-emphasis, eyebrow, etc. */ :root { --theme-pop-dark: #d8478e; } body.theme-flows { --theme-pop: #f655a6; --theme-pop-soft: rgba(246, 85, 166, .14); --theme-pop-dark: #d8478e; } body.theme-knows { --theme-pop: #2fbf8a; --theme-pop-soft: rgba(47, 191, 138, .14); --theme-pop-dark: #1f8e64; } body.theme-asks { --theme-pop: #ff8c42; --theme-pop-soft: rgba(255, 140, 66, .14); --theme-pop-dark: #d96a1f; } body.theme-grows { --theme-pop: #3aa9e8; --theme-pop-soft: rgba(58, 169, 232, .14); --theme-pop-dark: #1f7fbf; } body.theme-glows { --theme-pop: #a47cf3; --theme-pop-soft: rgba(164, 124, 243, .14); --theme-pop-dark: #7b54d6; } body.theme-pairs { --theme-pop: #e85d75; --theme-pop-soft: rgba(232, 93, 117, .14); --theme-pop-dark: #c23f56; } body.theme-shares { --theme-pop: #f0b400; --theme-pop-soft: rgba(240, 180, 0, .15); --theme-pop-dark: #c79300; } /* ---------- 3. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--font-grotesk); font-size: 1rem; line-height: 1.6; color: var(--foreground); background: var(--background); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; transition: color .2s ease; } a:hover { color: var(--color-bubblegum-pop); } button { font: inherit; cursor: pointer; border: none; background: none; } /* ---------- 4. Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-ribeye); font-weight: 400; color: var(--foreground); line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase; } p { font-family: var(--font-grotesk); } .eyebrow { display: inline-block; font-family: var(--font-syne); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-charcoal-mist); } .serif { font-family: var(--font-lora); } .text-pop { color: var(--theme-pop); } .text-myth-underline { color: var(--color-myth, #ef4360); text-decoration: underline; text-decoration-color: var(--color-myth, #ef4360); text-decoration-thickness: 4px; text-underline-offset: 6px; } .text-strike { color: rgba(58, 31, 71, .42); text-decoration: line-through; text-decoration-thickness: 4px; text-decoration-color: rgba(58, 31, 71, .5); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- 5. Layout ---------- */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 1rem; } @media (min-width: 768px) { .container { padding: 0 2rem; } } .section { padding: 4rem 0; } @media (min-width: 768px) { .section { padding: 6rem 0; } } /* ---------- 6. Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: 1rem 2rem; border-radius: 9999px; font-family: var(--font-syne); font-weight: 700; font-size: .875rem; text-transform: uppercase; letter-spacing: 0.05em; transition: transform .3s ease, background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease; border: 2px solid transparent; } .btn:hover { transform: translate(-2px, -2px); text-decoration: none; } .btn-primary { background: linear-gradient(135deg, var(--theme-pop) 0%, var(--theme-pop-dark) 100%); color: #fff; border: 2px solid var(--color-charcoal-mist); box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); } .btn-primary:hover { color: #fff; background: linear-gradient(135deg, var(--theme-pop-dark) 0%, var(--theme-pop) 100%); filter: brightness(1.05); box-shadow: 8px 8px 0 0 var(--color-charcoal-mist); } .btn-dark { background: linear-gradient(135deg, var(--color-charcoal-mist) 0%, #5a3870 100%); color: #fff; border: 2px solid var(--color-charcoal-mist); box-shadow: 5px 5px 0 0 var(--color-bubblegum-pop); } .btn-dark:hover { color: #fff; box-shadow: 8px 8px 0 0 var(--color-bubblegum-pop); } .btn-outline { background: #fff; color: var(--color-charcoal-mist); border: 2px solid var(--color-charcoal-mist); box-shadow: 5px 5px 0 0 var(--color-bubblegum-pop); } .btn-outline:hover { color: var(--color-bubblegum-pop); box-shadow: 8px 8px 0 0 var(--color-bubblegum-pop); } /* ---------- 7. Header / nav ---------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(252, 250, 247, .85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(58, 31, 71, .08); } .nav { display: flex; align-items: center; gap: .85rem; padding: .75rem 0; flex-wrap: nowrap; min-width: 0; } .nav > .nav-logo { flex-shrink: 0; } .nav > .shes-toggle-bar { flex: 1 1 auto; min-width: 0; justify-content: center; } .nav-logo { font-family: var(--font-ribeye); font-weight: 700; font-size: 1.875rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-charcoal-mist); line-height: 1; } .nav-logo:hover { color: var(--color-charcoal-mist); } .nav-links { display: none; gap: 1.75rem; list-style: none; } @media (min-width: 768px) { .nav-links { display: flex; } } .nav-link { font-family: var(--font-syne); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--color-charcoal-mist); } .nav-link:hover, .nav-link.active { color: var(--color-bubblegum-pop); } /* ---------- 8. Footer ---------- */ .site-footer { background: var(--color-charcoal-mist); color: #fff; padding: 4rem 0 2rem; margin-top: 6rem; } .site-footer a { color: rgba(255,255,255,.85); } .site-footer a:hover { color: #fff; } .site-footer .footer-grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; text-align: center; } @media (min-width: 768px) { .site-footer .footer-grid { grid-template-columns: auto 1fr auto; text-align: left; align-items: center; gap: 2rem; } } .footer-logo { font-family: var(--font-ribeye); font-weight: 400; font-size: 2.25rem; text-transform: uppercase; letter-spacing: -0.01em; color: #fff; line-height: 1; } .footer-logo:hover { color: #fff; } .footer-nav { display: flex; flex-wrap: wrap; gap: 1.5rem; list-style: none; justify-content: center; } .footer-nav a { font-family: var(--font-syne); font-weight: 700; font-size: .8125rem; text-transform: uppercase; letter-spacing: 0.12em; } .footer-socials { display: flex; gap: .75rem; justify-content: center; list-style: none; } .footer-socials a { width: 40px; height: 40px; border-radius: 9999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: background .3s ease, color .3s ease; color: #fff; } .footer-socials a:hover { background: var(--color-bubblegum-pop); } .footer-socials svg { width: 18px; height: 18px; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.12); margin-top: 3rem; padding-top: 1.5rem; text-align: center; font-family: var(--font-grotesk); font-size: .85rem; color: rgba(255,255,255,.6); } /* ---------- 9. Decorative orb ---------- */ .orb { position: absolute; border-radius: 9999px; filter: blur(100px); pointer-events: none; z-index: 0; } /* ===================================================================== 10. "She Knows / Grows / Glows" — top-anchored toggle bar ===================================================================== */ .shes-toggle-bar { display: flex; justify-content: center; padding: 0; position: relative; z-index: 10; margin: 0; flex: 1 1 auto; min-width: 0; } .shes-toggle-bar > ul { display: flex; list-style: none; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .3rem; box-shadow: 6px 6px 0 0 var(--color-charcoal-mist); gap: .15rem; flex-wrap: nowrap; width: 100%; max-width: 100%; overflow: hidden; } .shes-toggle-bar > ul > li { flex: 1 1 0; min-width: 0; display: flex; } .shes-tab { --tab-color: var(--color-bubblegum-pop); --tab-color-soft: rgba(246, 85, 166, .14); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .1rem; width: 100%; font-family: var(--font-ribeye); font-weight: 700; text-transform: uppercase; padding: .45rem .35rem; border-radius: 9999px; color: var(--color-charcoal-mist); text-align: center; text-decoration: none; transition: background .25s ease, color .25s ease, box-shadow .25s ease; letter-spacing: -0.01em; min-width: 0; } /* per-tab theme colors — pink / green / blue / purple */ .shes-tab--flows { --tab-color: #f655a6; --tab-color-soft: rgba(246, 85, 166, .14); } .shes-tab--knows { --tab-color: #2fbf8a; --tab-color-soft: rgba(47, 191, 138, .14); } .shes-tab--asks { --tab-color: #ff8c42; --tab-color-soft: rgba(255, 140, 66, .14); } .shes-tab--shares { --tab-color: #f0b400; --tab-color-soft: rgba(240, 180, 0, .14); } .shes-tab--pairs { --tab-color: #e85d75; --tab-color-soft: rgba(232, 93, 117, .14); } .shes-tab--grows { --tab-color: #3aa9e8; --tab-color-soft: rgba(58, 169, 232, .14); } .shes-tab--glows { --tab-color: #a47cf3; --tab-color-soft: rgba(164, 124, 243, .14); } @media (min-width: 768px) { .shes-tab { padding: .5rem .5rem; } } @media (min-width: 1280px) { .shes-tab { padding: .55rem .8rem; } } .shes-tab:hover { background: var(--tab-color); color: #fff; } .shes-tab.active { background: var(--tab-color); color: #fff; box-shadow: inset 0 0 0 2px #fff, 0 3px 0 0 rgba(58, 31, 71, .9); } /* "She Pairs" — always-on red accent so it stands apart in the toggle */ .shes-tab--pairs:not(.active):not(:hover) { color: var(--tab-color); box-shadow: inset 0 0 0 1.5px var(--tab-color); } /* ===================================================================== 11. Hero ===================================================================== */ .hero { position: relative; padding: 2.5rem 0 4rem; overflow: hidden; } @media (min-width: 1024px) { .hero { padding: 3.5rem 0 7rem; } } .hero .orb-a { top: -15%; left: -10%; width: 45%; height: 45%; background: var(--color-lavender-haze); opacity: .35; } .hero .orb-b { bottom: -25%; right: -10%; width: 55%; height: 55%; background: var(--color-bubblegum-pop); opacity: .15; } .hero-grid { display: grid; gap: 2.5rem; align-items: center; position: relative; z-index: 1; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; } } .hero-eyebrow { display: inline-block; background: var(--color-sky-glow); color: var(--color-charcoal-mist); border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .25rem 1rem; font-family: var(--font-syne); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; box-shadow: var(--shadow-pop-sm); margin-bottom: 1.25rem; } .hero-headline { font-family: var(--font-ribeye); font-weight: 400; font-synthesis: none; font-size: clamp(2.2rem, 4.6vw + .25rem, 4.75rem); line-height: .95; letter-spacing: -0.025em; text-transform: uppercase; margin: 0 0 1.75rem; color: var(--color-charcoal-mist); } .hh-line { display: block; white-space: nowrap; /* keep "for the Girlies" on a single line */ } .hh-small { font-size: 0.7em; color: var(--color-charcoal-mist); margin-right: .15em; text-shadow: .6px 0 0 currentColor, -.6px 0 0 currentColor, 0 .6px 0 currentColor, 0 -.6px 0 currentColor; } .hh-line .hh-small + .hh-emphasis, .hh-line .hh-emphasis + .hh-small, .hh-line .hh-small + .hh-plain, .hh-line .hh-plain + .hh-small { margin-left: .1em; } .hh-emphasis { color: var(--theme-pop); } .hh-plain { color: var(--color-charcoal-mist); text-shadow: .6px 0 0 currentColor, -.6px 0 0 currentColor, 0 .6px 0 currentColor, 0 -.6px 0 currentColor; } .hero-sub { font-family: var(--font-grotesk); font-weight: 500; font-size: clamp(1.05rem, 2.4vw + .25rem, 1.5rem); line-height: 1.4; color: rgba(58, 31, 71, .9); margin: 0 0 2rem; } .hero-sub .hs-line { display: block; } .hero-media .frame { aspect-ratio: 4 / 5; background: var(--color-blush-dream); width: 100%; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); overflow: hidden; box-shadow: var(--shadow-pop-pink); } .hero-media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ===================================================================== 12. Section heading block ===================================================================== */ .section-head { text-align: center; margin: 0 auto 3rem; max-width: 100%; } .section-head .eyebrow { display: inline-block; color: var(--theme-pop); margin-bottom: 1rem; } /* CANONICAL — section H2 uses Ribeye Marrow (display font, matches .hero-headline). See STYLE_GUIDE.md §2.3. Do NOT switch this back to --font-ui / --font-syne / --font-grotesk. */ .section-head h2 { font-family: var(--font-ribeye); font-weight: 700; font-size: clamp(1.75rem, 5.5vw, 3.75rem); text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; margin-bottom: 1rem; white-space: nowrap; color: var(--color-charcoal-mist); } .section-head h2 .text-pop { font-weight: 700; } .section-head p { font-family: var(--font-grotesk); font-weight: 500; color: rgba(58, 31, 71, .9); font-size: clamp(.875rem, 2vw + .35rem, 1.25rem); line-height: 1.4; white-space: nowrap; } /* ===================================================================== 13. Why Mysa — mission strip with compact flip cards ===================================================================== */ .purpose { background: var(--color-cream-cloud); } /* Mission band — wraps the strip with subtle theme emphasis */ .purpose--mission .purpose-strip { position: relative; padding: 1.25rem; border-radius: var(--radius-4xl); border: 2px solid var(--color-charcoal-mist); background: linear-gradient(135deg, var(--theme-pop-soft) 0%, rgba(255, 255, 255, .6) 50%, var(--theme-pop-soft) 100%); box-shadow: 8px 8px 0 0 var(--theme-pop); } .purpose--mission .purpose-strip::before { content: "Our promise"; position: absolute; top: -.7rem; left: 1.5rem; background: var(--color-charcoal-mist); color: var(--color-cream-cloud); font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 9999px; } .purpose-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; } @media (min-width: 768px) { .purpose-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } .purpose-card { position: relative; perspective: 1200px; height: 180px; cursor: pointer; outline: none; } @media (min-width: 768px) { .purpose-card { height: 200px; } } @media (min-width: 1100px){ .purpose-card { height: 220px; } } .purpose-shadow { position: absolute; inset: 0; border-radius: var(--radius-3xl); z-index: 0; transform: translate(6px, 6px); pointer-events: none; opacity: .6; } .purpose-grid > li:nth-child(1) .purpose-shadow { background: var(--color-bubblegum-pop); } .purpose-grid > li:nth-child(2) .purpose-shadow { background: var(--color-sky-glow); } .purpose-grid > li:nth-child(3) .purpose-shadow { background: var(--color-mint-cloud); } .purpose-card-inner { position: relative; z-index: 1; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.22, .61, .36, 1); } .purpose-card:hover .purpose-card-inner, .purpose-card:focus-visible .purpose-card-inner, .purpose-card.is-flipped .purpose-card-inner { transform: rotateY(180deg); } .purpose-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); padding: 1rem 1.1rem; display: flex; flex-direction: row; align-items: center; justify-content: center; text-align: center; gap: .65rem; flex-wrap: wrap; } .purpose-face.front { background: linear-gradient(135deg, #ffffff 0%, #ffffff 50%, rgba(58, 31, 71, .04) 100%); } .purpose-grid > li:nth-child(1) .purpose-face.front { background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, rgba(246, 85, 166, .12) 100%); } .purpose-grid > li:nth-child(2) .purpose-face.front { background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, rgba(197, 234, 252, .42) 100%); } .purpose-grid > li:nth-child(3) .purpose-face.front { background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, rgba(200, 249, 233, .42) 100%); } .purpose-face.back { background: var(--color-charcoal-mist); color: #fff; transform: rotateY(180deg); flex-direction: column; gap: .55rem; padding: 1rem 1.1rem; } .purpose-face.back p { font-family: var(--font-grotesk); font-weight: 500; font-size: clamp(.82rem, .55vw + .55rem, .95rem); line-height: 1.4; color: rgba(255,255,255,.95); max-width: 100%; text-align: center; } .purpose-face.back .back-label { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .18em; color: var(--theme-pop); } .word-before { font-family: var(--font-ui); font-weight: 600; font-size: clamp(.95rem, 1.1vw + .35rem, 1.15rem); text-transform: lowercase; letter-spacing: -0.01em; line-height: 1; color: rgba(58, 31, 71, .45); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: var(--theme-pop); } .word-after { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.5rem, 2.4vw + .5rem, 2.2rem); text-transform: lowercase; letter-spacing: -0.02em; line-height: .95; color: var(--color-charcoal-mist); } /* ===================================================================== 14. Inside the Box — left list | image | right list ===================================================================== */ .box-section { background: linear-gradient(180deg, rgba(228, 214, 255, .25), rgba(255, 214, 228, .15), rgba(228, 214, 255, .25)); } .box-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: center; margin-top: 2.5rem; } @media (min-width: 768px) { .box-layout { grid-template-columns: 1fr minmax(320px, 460px) 1fr; gap: 2rem; } } @media (min-width: 1024px) { .box-layout { grid-template-columns: 1fr minmax(380px, 520px) 1fr; gap: 2.5rem; } } .box-image-wrap { order: 1; margin: 0 auto; width: 100%; max-width: 520px; aspect-ratio: 4 / 3; border-radius: var(--radius-4xl); background: var(--color-blush-dream); border: 4px solid var(--color-charcoal-mist); overflow: hidden; box-shadow: var(--shadow-pop-sky-xl); } .box-image-wrap img { width: 100%; height: 100%; object-fit: cover; } @media (min-width: 768px) { .box-image-wrap { order: 2; max-width: 100%; } } .box-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 2rem; margin-top: 2.5rem; } .box-explore-link { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-syne); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-charcoal-mist); text-decoration: underline; text-decoration-color: var(--theme-pop); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; } .box-explore-link:hover { color: var(--theme-pop); text-decoration-color: var(--color-charcoal-mist); } .box-explore-link svg { width: 14px; height: 14px; } .box-list { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; padding: 0; margin: 0; } @media (min-width: 768px) { .box-list { display: flex; flex-direction: column; gap: .65rem; } .box-list-left { order: 1; align-items: flex-end; } .box-list-right { order: 3; align-items: flex-start; } } .box-list li { display: flex; align-items: center; gap: .55rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .55rem .85rem; font-family: var(--font-ui); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--color-charcoal-mist); box-shadow: var(--shadow-pop-sm); line-height: 1.2; white-space: nowrap; } @media (min-width: 768px) { .box-list li { font-size: .8rem; padding: .6rem 1rem; } } .box-arrow { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-bubblegum-pop); } @media (min-width: 768px) { .box-list-left li { flex-direction: row-reverse; } .box-list-left .box-arrow { transform: scaleX(-1); } } /* ===================================================================== 15. Testimonials ===================================================================== */ .testimonial-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin-top: 3rem; } @media (min-width: 640px) { .testimonial-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .testimonial-grid { grid-template-columns: repeat(4, 1fr); } } .testimonial { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); padding: 1.75rem; display: flex; flex-direction: column; gap: 1.25rem; height: 100%; } .testimonial:nth-child(1) { box-shadow: var(--shadow-pop-pink); } .testimonial:nth-child(2) { box-shadow: var(--shadow-pop-mint); } .testimonial:nth-child(3) { box-shadow: var(--shadow-pop-sky); } .testimonial:nth-child(4) { box-shadow: var(--shadow-pop-lavender); } .testimonial blockquote { font-family: var(--font-grotesk); font-size: .95rem; line-height: 1.55; color: var(--color-charcoal-mist); flex-grow: 1; } .testimonial cite { display: flex; gap: .75rem; align-items: center; font-style: normal; margin-top: auto; } .avatar-placeholder { width: 44px; height: 44px; border-radius: 9999px; background: var(--color-lavender-haze); border: 2px solid var(--color-charcoal-mist); flex-shrink: 0; display: grid; place-items: center; font-family: var(--font-syne); font-weight: 800; font-size: 1rem; color: var(--color-charcoal-mist); } .testimonial:nth-child(1) .avatar-placeholder { background: var(--color-sky-glow); } .testimonial:nth-child(2) .avatar-placeholder { background: var(--color-blush-dream); } .testimonial:nth-child(3) .avatar-placeholder { background: var(--color-mint-cloud); } .testimonial:nth-child(4) .avatar-placeholder { background: var(--color-golden-ticket); } .testimonial-name { font-family: var(--font-syne); font-weight: 700; font-size: .9rem; color: var(--color-charcoal-mist); line-height: 1.2; display: block; } .testimonial-rel { font-family: var(--font-grotesk); font-size: .8rem; color: rgba(58, 31, 71, .7); margin-top: .15rem; display: block; } /* ===================================================================== 16. Unboxing wall ===================================================================== */ .wall-section { background: linear-gradient(180deg, var(--color-cream-cloud), rgba(255, 214, 228, .35)); } .wall-scroller { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 1rem .25rem 2.5rem; margin: 1rem -1rem 0; scrollbar-width: none; } .wall-scroller::-webkit-scrollbar { display: none; } .wall-scroller::before, .wall-scroller::after { content: ''; flex: 0 0 calc(1rem - .25rem); } .tile { flex: 0 0 78%; max-width: 320px; aspect-ratio: 4 / 5; border-radius: var(--radius-4xl); border: 2px solid var(--color-charcoal-mist); scroll-snap-align: center; position: relative; overflow: hidden; background: var(--color-blush-dream); display: flex; align-items: flex-end; padding: 1.25rem; box-shadow: var(--shadow-pop-sm); } @media (min-width: 768px) { .tile { flex: 0 0 42%; } } @media (min-width: 1024px) { .tile { flex: 0 0 28%; max-width: 360px; } } .tile-video { background: linear-gradient(135deg, var(--color-bubblegum-pop), var(--color-lavender-haze)); } .tile-photo { background: var(--color-mint-cloud); } .tile-photo.alt-1 { background: var(--color-sky-glow); } .tile-photo.alt-2 { background: var(--color-golden-ticket); } .tile-story { background: #fff; align-items: center; text-align: center; padding: 2rem 1.75rem; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 64px; height: 64px; border-radius: 9999px; background: rgba(255, 255, 255, .95); border: 2px solid var(--color-charcoal-mist); display: grid; place-items: center; } .play-icon::before { content: ''; width: 0; height: 0; margin-left: 5px; border-left: 16px solid var(--color-charcoal-mist); border-top: 11px solid transparent; border-bottom: 11px solid transparent; } .tile-tag { display: inline-block; background: rgba(255,255,255,.92); padding: .25rem .75rem; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-charcoal-mist); position: relative; z-index: 2; } .tile-quote { font-family: var(--font-lora); font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: var(--color-charcoal-mist); } .tile-quote-attrib { display: block; margin-top: 1rem; font-family: var(--font-syne); font-style: normal; font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(58, 31, 71, .65); } /* ===================================================================== 17. Closing CTA band ===================================================================== */ .closing-cta { background: var(--color-charcoal-mist); color: #fff; text-align: center; padding: 5rem 0 6rem; position: relative; overflow: hidden; } .closing-cta .orb-a { top: -30%; left: -10%; width: 40%; height: 40%; background: var(--color-bubblegum-pop); opacity: .25; } .closing-cta .orb-b { bottom: -40%; right: -10%; width: 50%; height: 50%; background: var(--color-lavender-haze); opacity: .2; } .closing-cta-inner { position: relative; z-index: 1; } .closing-cta h2 { font-family: var(--font-ribeye); font-weight: 400; color: #fff; font-size: clamp(2rem, 5vw + .5rem, 4rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 auto 2.25rem; white-space: nowrap; } .closing-cta .btn-primary { border: 2px solid #fff; box-shadow: var(--shadow-pop-sky-xl); } .closing-cta .reassurance { margin-top: 1.25rem; font-family: var(--font-grotesk); color: rgba(255,255,255,.8); font-size: clamp(.85rem, 2vw + .25rem, 1.05rem); white-space: nowrap; } /* ===================================================================== 18a. Contact page — hero, embedded meet options, form ===================================================================== */ .contact-hero { padding: 3.5rem 0 2.5rem; } @media (min-width: 1024px) { .contact-hero { padding: 5rem 0 3.5rem; } } .contact-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 44rem; margin: 0 auto; } .contact-hero .hero-headline { margin: 0 auto 1.25rem; } .contact-hero .hero-sub { white-space: normal; margin: 0 auto; } .contact-headline { white-space: nowrap; font-size: clamp(1.6rem, 7.5vw, 5rem); max-width: none; } /* Eyebrow on contact page — brand pink instead of acid green */ .contact-hero .hero-eyebrow { background: var(--color-bubblegum-pop); color: #fff; border-color: var(--color-charcoal-mist); } /* --- Form section --- */ .form-section { padding-top: 1rem; } @media (min-width: 768px) { .form-section { padding-top: 2.5rem; } } .contact-form { width: 75%; max-width: 1100px; margin: 0 auto; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-5xl); padding: 2rem 1.5rem; box-shadow: var(--shadow-pop-lavender); display: flex; flex-direction: column; gap: 1.5rem; } @media (max-width: 767px) { .contact-form { width: 100%; } } @media (min-width: 768px) { .contact-form { padding: 3rem 3rem; gap: 1.75rem; } } @media (min-width: 1024px) { .contact-form { padding: 3.5rem 4rem; } } /* --- Embedded meet options (3 ways to reach us) --- */ .meet-options { display: grid; grid-template-columns: 1fr; gap: .75rem; } @media (min-width: 640px) { .meet-options { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } .meet-option { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.25rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); text-decoration: none; text-align: left; font-family: inherit; cursor: pointer; color: var(--color-charcoal-mist); box-shadow: var(--shadow-pop-sm); transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease; min-width: 0; } .meet-option:hover, .meet-option:focus-visible { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--color-bubblegum-pop); color: var(--color-charcoal-mist); } .meet-icon { width: 38px; height: 38px; flex-shrink: 0; border-radius: 9999px; background: var(--color-blush-dream); border: 2px solid var(--color-charcoal-mist); display: grid; place-items: center; } .meet-options > .meet-option:nth-child(2) .meet-icon { background: var(--color-sky-glow); } .meet-options > .meet-option:nth-child(3) .meet-icon { background: var(--color-lavender-haze); } .meet-icon svg { width: 18px; height: 18px; color: var(--color-charcoal-mist); } .meet-text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; } .meet-label { font-family: var(--font-syne); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--color-charcoal-mist); line-height: 1; } .meet-detail { font-family: var(--font-grotesk); font-size: .85rem; color: rgba(58, 31, 71, .75); line-height: 1.3; } /* --- "Or send a note" divider --- */ .form-divider { display: flex; align-items: center; gap: 1rem; color: rgba(58, 31, 71, .55); font-family: var(--font-syne); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; margin: .25rem 0; } .form-divider::before, .form-divider::after { content: ''; flex: 1 1 auto; height: 2px; background: rgba(58, 31, 71, .12); border-radius: 2px; } .form-row { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; gap: 1.5rem; } } .field { display: flex; flex-direction: column; gap: .5rem; border: 0; padding: 0; margin: 0; min-width: 0; } .field-label { font-family: var(--font-syne); font-weight: 800; font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--color-charcoal-mist); display: inline-block; } .field-optional { font-weight: 500; color: rgba(58, 31, 71, .55); font-size: .8rem; letter-spacing: .04em; text-transform: none; margin-left: .35rem; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; font-family: var(--font-grotesk); font-size: 1rem; line-height: 1.4; color: var(--color-charcoal-mist); background: #fff; border: 2px solid var(--border); border-radius: 14px; padding: .85rem 1rem; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .contact-form textarea { resize: vertical; min-height: 140px; border-radius: 18px; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: rgba(58, 31, 71, .4); } .contact-form input:hover, .contact-form textarea:hover { border-color: rgba(58, 31, 71, .35); } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--color-bubblegum-pop); box-shadow: 0 0 0 4px rgba(246, 85, 166, .18); } @keyframes field-pulse { 0% { box-shadow: 0 0 0 0 rgba(246, 85, 166, .55); border-color: var(--color-bubblegum-pop); } 60% { box-shadow: 0 0 0 12px rgba(246, 85, 166, 0); border-color: var(--color-bubblegum-pop); } 100% { box-shadow: 0 0 0 0 rgba(246, 85, 166, 0); } } .contact-form input.field-pulse { animation: field-pulse 1.4s ease-out; border-color: var(--color-bubblegum-pop); } /* --- Multi-select chip group --- */ .reasons { gap: .65rem; } .reasons legend { padding: 0; } .chip-group { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .25rem; } .chip { position: relative; display: inline-flex; align-items: center; cursor: pointer; user-select: none; } .chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .chip span { display: inline-block; background: #fff; color: var(--color-charcoal-mist); border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .55rem 1rem; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .chip:hover span { transform: translateY(-1px); box-shadow: var(--shadow-pop-sm); } .chip input:checked + span { background: var(--color-bubblegum-pop); color: #fff; box-shadow: var(--shadow-pop-sm); } .chip input:focus-visible + span { outline: 3px solid var(--color-bubblegum-pop); outline-offset: 3px; } /* --- Form actions --- */ .form-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; margin-top: .5rem; text-align: center; } .form-note { font-family: var(--font-grotesk); font-weight: 500; font-size: 1rem; color: var(--color-bubblegum-pop); margin: 0; } /* ===================================================================== 18b. Live page background — fixed, gradient, parallax orbs ===================================================================== */ .page-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 15% -10%, rgba(228, 214, 255, .35), transparent 55%), radial-gradient(110% 70% at 90% 110%, rgba(255, 214, 228, .35), transparent 55%), var(--color-cream-cloud); } .page-bg-orb { position: absolute; border-radius: 9999px; filter: blur(110px); transform: translate3d(var(--bg-x, 0), var(--bg-y, 0), 0); transition: transform .12s linear; will-change: transform; } .page-bg-orb.orb-pink { width: 38vw; height: 38vw; top: -8%; left: -10%; background: var(--color-bubblegum-pop); opacity: .22; } .page-bg-orb.orb-sky { width: 42vw; height: 42vw; top: 35%; right: -12%; background: var(--color-sky-glow); opacity: .28; } .page-bg-orb.orb-mint { width: 30vw; height: 30vw; top: 70%; left: 25%; background: var(--color-mint-cloud); opacity: .24; } .page-bg-orb.orb-lavender { width: 34vw; height: 34vw; top: 110%; right: 30%; background: var(--color-lavender-haze); opacity: .26; } /* subtle grain / glass film */ .page-bg-grain { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.35) 50%, rgba(255,255,255,.0) 100%); backdrop-filter: blur(40px) saturate(1.1); -webkit-backdrop-filter: blur(40px) saturate(1.1); mix-blend-mode: screen; opacity: .35; } /* keep the body itself transparent so the fixed bg shows through */ body { background: transparent; } /* gentle drift loop (always running, very slow) */ @keyframes orb-drift-a { 0%, 100% { transform: translate3d(var(--bg-x, 0), var(--bg-y, 0), 0); } 50% { transform: translate3d(calc(var(--bg-x, 0) + 30px), calc(var(--bg-y, 0) - 20px), 0); } } @keyframes orb-drift-b { 0%, 100% { transform: translate3d(var(--bg-x, 0), var(--bg-y, 0), 0); } 50% { transform: translate3d(calc(var(--bg-x, 0) - 25px), calc(var(--bg-y, 0) + 30px), 0); } } .page-bg-orb.orb-pink { animation: orb-drift-a 18s ease-in-out infinite; } .page-bg-orb.orb-sky { animation: orb-drift-b 22s ease-in-out infinite; } .page-bg-orb.orb-mint { animation: orb-drift-a 26s ease-in-out infinite; } .page-bg-orb.orb-lavender { animation: orb-drift-b 30s ease-in-out infinite; } /* ===================================================================== 18c. Hero carousel — layered card stack with dots + swipe ===================================================================== */ .hero-media { position: relative; } .hero-carousel { position: relative; width: 100%; max-width: 460px; margin: 0 auto; padding-bottom: 4.5rem; /* room for dots/arrows below */ } .hero-slides { position: relative; list-style: none; width: 100%; aspect-ratio: 4 / 5; margin: 0; padding: 0; } .hero-slide { position: absolute; inset: 0; list-style: none; opacity: 0; pointer-events: none; transition: transform .65s cubic-bezier(.22, .61, .36, 1), opacity .5s ease, box-shadow .5s ease; transform-origin: center; will-change: transform, opacity; } .hero-slide-inner { position: relative; width: 100%; height: 100%; background: var(--color-blush-dream); border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); overflow: hidden; box-shadow: var(--shadow-pop-pink); } .hero-slide-inner.alt-sky { background: var(--color-sky-glow); box-shadow: var(--shadow-pop-mint); } .hero-slide-inner.alt-mint { background: var(--color-mint-cloud); box-shadow: var(--shadow-pop-lavender); } .hero-slide-inner.alt-lavender { background: var(--color-lavender-haze); box-shadow: var(--shadow-pop-sky); } .hero-slide-inner img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-slide-tag { position: absolute; top: 1rem; left: 1rem; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .25rem .75rem; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-charcoal-mist); box-shadow: var(--shadow-pop-sm); } /* Active slide — front and center, slight tilt */ .hero-slide.is-active { opacity: 1; pointer-events: auto; transform: rotate(-2deg); z-index: 5; } /* Stack 1 — peek to right behind active */ .hero-slide.is-stack-1 { opacity: 1; transform: translate(7%, 4%) rotate(5deg) scale(.94); z-index: 4; } /* Stack 2 — peek further behind */ .hero-slide.is-stack-2 { opacity: .85; transform: translate(-6%, 7%) rotate(-6deg) scale(.88); z-index: 3; } /* Carousel nav — arrows + dots below */ .carousel-nav { position: absolute; bottom: .5rem; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: .85rem; z-index: 6; } .carousel-arrow { width: 36px; height: 36px; border-radius: 9999px; background: #fff; border: 2px solid var(--color-charcoal-mist); display: grid; place-items: center; box-shadow: var(--shadow-pop-sm); cursor: pointer; transition: transform .25s ease, background .25s ease, color .25s ease; } .carousel-arrow:hover { background: var(--color-bubblegum-pop); color: #fff; transform: translateY(-2px); } .carousel-arrow svg { width: 16px; height: 16px; } .carousel-dots { list-style: none; display: flex; gap: .45rem; padding: 0; margin: 0; } .carousel-dot { width: 10px; height: 10px; border-radius: 9999px; background: rgba(58, 31, 71, .25); border: 2px solid var(--color-charcoal-mist); padding: 0; cursor: pointer; transition: background .25s ease, transform .25s ease, width .25s ease; } .carousel-dot:hover { background: rgba(58, 31, 71, .55); } .carousel-dot.is-active { background: var(--color-bubblegum-pop); width: 28px; } /* drag/swipe affordance */ .hero-carousel { touch-action: pan-y; user-select: none; cursor: grab; } .hero-carousel:active { cursor: grabbing; } /* ===================================================================== 18d. Doodles — sparkles, squiggles, streamers ===================================================================== */ .doodle { position: absolute; pointer-events: none; z-index: 2; } .doodle-sparkle { width: 28px; height: 28px; color: var(--color-bubblegum-pop); filter: drop-shadow(2px 2px 0 var(--color-charcoal-mist)); animation: sparkle-pulse 2.6s ease-in-out infinite; } .doodle-sparkle--a { top: 12%; left: 4%; } .doodle-sparkle--b { top: 28%; right: 6%; width: 20px; height: 20px; color: var(--color-sky-glow); animation-delay: .9s; } @keyframes sparkle-pulse { 0%, 100% { transform: scale(1) rotate(0deg); opacity: .85; } 50% { transform: scale(1.25) rotate(15deg); opacity: 1; } } .doodle-squiggle { width: 110px; height: 22px; color: var(--color-bubblegum-pop); bottom: 8%; left: 4%; opacity: .55; } .doodle-streamer { width: 70px; height: 70px; color: var(--color-charcoal-mist); top: 8%; right: 38%; opacity: .35; transform: rotate(15deg); } @media (max-width: 767px) { .doodle-sparkle--a, .doodle-streamer { display: none; } } /* ===================================================================== 18e. Toggle bar — anchored inside the sticky site header (centered) ===================================================================== */ .shes-toggle-bar { padding: 0; background: transparent; position: relative; z-index: auto; } .shes-toggle-bar > ul { box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); padding: .4rem; gap: .25rem; background: #fff; transition: box-shadow .35s ease, transform .35s ease; } .shes-toggle-bar > ul:hover { box-shadow: 7px 7px 0 0 var(--color-bubblegum-pop); } /* multi-line tab: label + small description */ .shes-tab { display: flex; flex-direction: column; align-items: center; gap: .12rem; line-height: 1.05; padding: .55rem 1rem; } .shes-tab-label { display: block; font-family: var(--font-ui); font-weight: 600; font-size: clamp(.9rem, 1.2vw, 1.2rem); line-height: 1.1; letter-spacing: 0; text-transform: none; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .shes-tab-desc { display: block; font-family: var(--font-grotesk); font-weight: 500; font-size: clamp(.74rem, .95vw, .92rem); text-transform: none; letter-spacing: 0; color: rgba(58, 31, 71, .6); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .shes-tab.active .shes-tab-desc, .shes-tab:hover .shes-tab-desc { color: rgba(255, 255, 255, .9); } @media (min-width: 1280px) { .shes-tab-label { font-size: 1.15rem; } .shes-tab-desc { font-size: .82rem; } } /* small attention pulse on the bar so it announces itself */ @keyframes toggle-bar-pulse { 0%, 100% { box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); } 50% { box-shadow: 7px 7px 0 0 var(--color-bubblegum-pop); } } .shes-toggle-bar > ul { animation: toggle-bar-pulse 4.5s ease-in-out infinite; } /* ===================================================================== 18f. Section head — multi-line h2 support (.hd-line) ===================================================================== */ .section-head h2 .hd-line { display: block; white-space: normal; } .section-head h2 { white-space: normal; } /* override prior nowrap so .hd-line wraps cleanly */ /* gradient hairline divider used between sections (where helpful) */ .section-divider { height: 2px; background: linear-gradient(90deg, transparent, var(--color-bubblegum-pop) 30%, var(--color-sky-glow) 70%, transparent); border: 0; margin: 0 auto; max-width: 60%; opacity: .55; } /* ===================================================================== 18. Focus states & motion preferences ===================================================================== */ :where(a, button, input, textarea, [role="button"]):focus-visible { outline: 3px solid var(--color-bubblegum-pop); outline-offset: 3px; border-radius: 4px; } .btn:focus-visible { outline-offset: 5px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } .purpose-card-inner { transition: none !important; } } /* ===================================================================== 19. Blog page ===================================================================== */ /* --- Hero --- */ .blog-hero { padding: 3rem 0 2rem; } @media (min-width: 1024px) { .blog-hero { padding: 4.5rem 0 3rem; } } .blog-hero-inner { position: relative; z-index: 1; text-align: center; max-width: 50rem; margin: 0 auto; } .blog-hero .hero-headline { margin: 0 auto 1rem; line-height: 1; display: block; font-family: var(--font-ui); font-weight: 700; letter-spacing: -0.03em; } .blog-hero .hero-headline .hh-line { display: block; width: 100%; font-weight: 700; } .blog-hero .hero-headline .hh-emphasis { font-family: var(--font-ribeye); font-weight: 400; } .blog-hero .hero-headline .hh-line + .hh-line { margin-top: .15em; } .blog-hero .hero-sub { margin: 0 auto 1.5rem; } .blog-hero .hero-eyebrow { background: var(--color-bubblegum-pop); color: #fff; border-color: var(--color-charcoal-mist); } /* Italic serif subtitle in hero */ .blog-hero-sub { font-family: var(--font-lora); font-style: italic; font-weight: 400; font-size: clamp(1rem, 1.6vw + .45rem, 1.3rem); color: rgba(58, 31, 71, .8); position: relative; padding-top: 1rem; margin-top: -.25rem; white-space: nowrap; } .blog-hero-sub::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 48px; height: 2px; background: var(--color-bubblegum-pop); border-radius: 2px; } .blog-hero-sub em { font-style: italic; } /* --- Page-wide search (spans the full container) --- */ .page-search { display: flex; align-items: center; gap: .5rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .5rem .5rem .5rem 1.5rem; width: 100%; margin: 2rem 0 0; box-shadow: var(--shadow-pop-sky); transition: box-shadow .25s ease, transform .25s ease; } .page-search:focus-within { box-shadow: var(--shadow-pop-pink); transform: translate(-2px, -2px); } .page-search-icon { display: grid; place-items: center; width: 26px; height: 26px; color: var(--color-charcoal-mist); flex-shrink: 0; } .page-search-icon svg { width: 24px; height: 24px; } .page-search input[type="search"] { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; font-family: var(--font-grotesk); font-size: 1.0625rem; padding: .85rem .5rem; color: var(--color-charcoal-mist); } @media (min-width: 768px) { .page-search input[type="search"] { font-size: 1.15rem; padding: .95rem .5rem; } } .page-search input[type="search"]::placeholder { color: rgba(58, 31, 71, .45); } .page-search input[type="search"]::-webkit-search-cancel-button { display: none; } .page-search-clear { width: 42px; height: 42px; border-radius: 9999px; background: var(--color-charcoal-mist); color: #fff; font-size: 1.4rem; line-height: 1; display: grid; place-items: center; flex-shrink: 0; transition: background .2s ease, transform .2s ease; } .page-search-clear:hover { background: var(--color-bubblegum-pop); transform: scale(1.06); } .page-search-status { font-family: var(--font-syne); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(58, 31, 71, .65); margin-top: .85rem; min-height: 1em; } /* --- Archive section + filters --- */ .archive-section { padding-top: 3rem; } .archive-toolbar { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; margin-bottom: 2.25rem; } @media (min-width: 900px) { .archive-toolbar { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; } } .filter-chip-group { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; } .filter-chip { display: inline-block; background: #fff; color: var(--color-charcoal-mist); border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .5rem 1rem; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .filter-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop-sm); } .filter-chip.is-active { background: var(--color-bubblegum-pop); color: #fff; box-shadow: var(--shadow-pop-sm); } .archive-sort { position: relative; flex-shrink: 0; } .archive-sort select { appearance: none; -webkit-appearance: none; background: #fff; color: var(--color-charcoal-mist); border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .55rem 2.25rem .55rem 1.1rem; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%233a1f47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; } /* --- Post grid --- */ .post-grid { display: grid; grid-template-columns: 1fr; gap: 1.75rem; list-style: none; } @media (min-width: 640px) { .post-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .post-grid { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .post-body { padding: 1.1rem 1.1rem 1.3rem; gap: .55rem; } .post-title { font-size: 1.15rem; } .post-excerpt { font-size: .9rem; } } @media (min-width: 1280px) { .post-grid { gap: 1.75rem; } } .post-card { position: relative; list-style: none; } .post-card.is-hidden { display: none; } .post-card-link { display: flex; flex-direction: column; height: 100%; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); overflow: hidden; color: var(--color-charcoal-mist); box-shadow: var(--shadow-pop); transition: transform .25s ease, box-shadow .25s ease, color .25s ease; } .post-card-link:hover, .post-card-link:focus-visible { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 0 var(--color-bubblegum-pop); color: var(--color-charcoal-mist); } .post-thumb { aspect-ratio: 16 / 10; position: relative; display: grid; place-items: center; border-bottom: 2px solid var(--color-charcoal-mist); overflow: hidden; } .post-thumb::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(58, 31, 71, .12) 1px, transparent 1.5px); background-size: 14px 14px; opacity: .55; } .post-thumb-mark { position: relative; font-family: var(--font-ribeye); font-size: 3.5rem; color: rgba(58, 31, 71, .45); text-transform: uppercase; } .post-thumb-a { background: var(--color-blush-dream); } .post-thumb-b { background: var(--color-sky-glow); } .post-thumb-c { background: var(--color-mint-cloud); } .post-thumb-d { background: var(--color-lavender-haze); } .post-thumb-e { background: var(--color-golden-ticket); } .post-thumb-f { background: var(--color-blush-dream); } .post-body { display: flex; flex-direction: column; gap: .65rem; padding: 1.4rem 1.4rem 1.6rem; flex: 1 1 auto; } .post-tag { align-self: flex-start; display: inline-block; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .25rem .7rem; font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; line-height: 1.1; } .tag-puberty { background: var(--color-blush-dream); } .tag-caregivers { background: var(--color-lavender-haze); } .tag-science { background: var(--color-mint-cloud); } .tag-stories { background: var(--color-golden-ticket); } .tag-products { background: var(--color-sky-glow); } .tag-schools { background: var(--color-acid-green); } .post-title { font-family: var(--font-ribeye); font-weight: 700; font-size: 1.3rem; line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase; margin: 0; color: var(--color-charcoal-mist); } .post-excerpt { font-family: var(--font-grotesk); font-size: .95rem; line-height: 1.45; color: rgba(58, 31, 71, .8); margin: 0; } .post-meta { display: flex; gap: .5rem; margin-top: auto; padding-top: .75rem; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(58, 31, 71, .55); } .archive-empty { text-align: center; font-family: var(--font-grotesk); font-size: 1rem; color: rgba(58, 31, 71, .7); background: #fff; border: 2px dashed rgba(58, 31, 71, .25); border-radius: var(--radius-4xl); padding: 2.5rem 1.5rem; margin-top: 1rem; } .archive-more { text-align: center; margin-top: 2.5rem; } /* --- Social preview cards --- */ .social-section { background: linear-gradient(180deg, rgba(228, 214, 255, .25), rgba(197, 234, 252, .25)); } .social-preview-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; list-style: none; margin-top: .5rem; } @media (min-width: 640px) { .social-preview-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .social-preview-grid { grid-template-columns: repeat(4, 1fr); gap: 1.75rem; } } .social-preview > a { position: relative; display: flex; flex-direction: column; gap: 1.1rem; height: 100%; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); padding: 1.75rem 1.5rem 1.4rem; color: var(--color-charcoal-mist); box-shadow: var(--shadow-pop); transition: transform .25s ease, box-shadow .25s ease, color .25s ease; overflow: hidden; } .social-preview > a:hover, .social-preview > a:focus-visible { transform: translate(-4px, -4px); box-shadow: 12px 12px 0 0 var(--color-bubblegum-pop); color: var(--color-charcoal-mist); } .social-preview-icon { width: 76px; height: 76px; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-pop-sm); transition: transform .3s cubic-bezier(.22, .61, .36, 1); } .social-preview > a:hover .social-preview-icon { transform: rotate(-6deg) scale(1.06); } .social-preview-icon svg { width: 38px; height: 38px; color: var(--color-charcoal-mist); } .social-preview-instagram .social-preview-icon { background: var(--color-blush-dream); } .social-preview-tiktok .social-preview-icon { background: var(--color-mint-cloud); } .social-preview-youtube .social-preview-icon { background: var(--color-lavender-haze); } .social-preview-pinterest .social-preview-icon { background: var(--color-sky-glow); } .social-preview-body { display: flex; flex-direction: column; gap: .35rem; flex: 1 1 auto; } .social-preview-handle { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(58, 31, 71, .55); } .social-preview-name { font-family: var(--font-ribeye); font-size: 1.6rem; text-transform: uppercase; line-height: 1; letter-spacing: -0.01em; } .social-preview-blurb { font-family: var(--font-grotesk); font-size: .9rem; line-height: 1.4; color: rgba(58, 31, 71, .75); margin-top: .15rem; } .social-preview-stats { margin-top: .35rem; font-family: var(--font-grotesk); font-size: .85rem; color: rgba(58, 31, 71, .8); } .social-preview-stats strong { font-weight: 700; color: var(--color-charcoal-mist); } .social-preview-cta { align-self: flex-start; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-bubblegum-pop); margin-top: .25rem; } /* --- Newsletter archive --- */ .newsletter-section { background: var(--color-cream-cloud); } .newsletter-subscribe { display: flex; flex-direction: column; gap: .75rem; max-width: 32rem; margin: 0 auto 2.5rem; } @media (min-width: 640px) { .newsletter-subscribe { flex-direction: row; gap: .65rem; } } .newsletter-subscribe input[type="email"] { flex: 1 1 auto; font-family: var(--font-grotesk); font-size: 1rem; color: var(--color-charcoal-mist); background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .85rem 1.25rem; outline: none; transition: box-shadow .2s ease, transform .2s ease; } .newsletter-subscribe input[type="email"]:focus { box-shadow: 0 0 0 4px rgba(246, 85, 166, .18); } .newsletter-subscribe input::placeholder { color: rgba(58, 31, 71, .4); } .newsletter-archive { list-style: none; display: flex; flex-direction: column; gap: 0; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); overflow: hidden; box-shadow: var(--shadow-pop); counter-reset: issue; } .newsletter-issue { border-bottom: 2px solid var(--color-charcoal-mist); } .newsletter-issue:last-child { border-bottom: none; } .newsletter-issue.is-hidden { display: none; } .newsletter-issue > a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.25rem; padding: 1.25rem 1.4rem; color: var(--color-charcoal-mist); transition: background .2s ease, color .2s ease; } .newsletter-issue > a:hover, .newsletter-issue > a:focus-visible { background: var(--color-blush-dream); color: var(--color-charcoal-mist); } .newsletter-issue-meta { display: flex; flex-direction: column; gap: .15rem; text-align: left; min-width: 4.5rem; } .newsletter-issue-num { font-family: var(--font-ribeye); font-size: 1.5rem; line-height: 1; color: var(--color-bubblegum-pop); text-transform: uppercase; } .newsletter-issue-date { font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(58, 31, 71, .6); } .newsletter-issue-body { display: flex; flex-direction: column; gap: .25rem; min-width: 0; } .newsletter-issue-title { font-family: var(--font-ribeye); font-weight: 700; font-size: 1.15rem; line-height: 1.1; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; } .newsletter-issue-blurb { font-family: var(--font-grotesk); font-size: .9rem; line-height: 1.4; color: rgba(58, 31, 71, .75); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .newsletter-issue-arrow { font-family: var(--font-ribeye); font-size: 1.5rem; color: var(--color-charcoal-mist); transition: transform .2s ease; } .newsletter-issue > a:hover .newsletter-issue-arrow { transform: translateX(4px); color: var(--color-bubblegum-pop); } @media (max-width: 560px) { .newsletter-issue > a { grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 1.1rem; } .newsletter-issue-arrow { display: none; } .newsletter-issue-num { font-size: 1.25rem; } .newsletter-issue-title { font-size: 1.05rem; } } /* ===================================================================== Wall scroll indicator dots (landing page) ===================================================================== */ .wall-dots { display: flex; justify-content: center; gap: .65rem; margin: 1rem 0 0; padding-bottom: 1rem; } .wall-dot { width: 11px; height: 11px; border-radius: 9999px; background: rgba(58, 31, 71, .22); border: none; padding: 0; cursor: pointer; transition: background .25s ease, transform .25s ease; } .wall-dot:hover { background: rgba(58, 31, 71, .4); } .wall-dot.active { background: var(--color-bubblegum-pop); transform: scale(1.35); } /* ===================================================================== Landing-page newsletter strip — full-stretch lavender band ===================================================================== */ .join-strip { background: var(--color-lavender-haze); color: var(--color-charcoal-mist); padding: 5rem 0; text-align: center; position: relative; overflow: hidden; } .join-strip-inner { max-width: 640px; margin: 0 auto; position: relative; z-index: 1; } .join-strip h2 { font-family: var(--font-ribeye); font-weight: 700; font-size: clamp(1.85rem, 4.5vw + .5rem, 3.5rem); line-height: 1; text-transform: uppercase; letter-spacing: -0.02em; margin: 0 0 .9rem; color: var(--color-charcoal-mist); } .join-strip h2 .hd-line { display: block; white-space: nowrap; } .join-sub { font-family: var(--font-grotesk); font-weight: 500; font-size: clamp(.95rem, 2vw + .25rem, 1.2rem); color: rgba(58, 31, 71, .85); margin: 0 0 .25rem; white-space: nowrap; } .join-form { display: flex; align-items: center; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .35rem; max-width: 480px; margin: 1.75rem auto 1.25rem; box-shadow: var(--shadow-pop-lg); gap: .25rem; } .join-input { flex: 1; min-width: 0; border: none; outline: none; padding: .65rem 1rem; font-family: var(--font-grotesk); font-size: 1rem; background: transparent; color: var(--color-charcoal-mist); } .join-input::placeholder { color: rgba(58, 31, 71, .5); } .join-btn { flex-shrink: 0; padding: .7rem 1.4rem; font-size: .85rem; } .join-meta { font-family: var(--font-grotesk); font-size: .9rem; color: rgba(58, 31, 71, .8); max-width: 38rem; margin: 0 auto; line-height: 1.5; } /* ===================================================================== Mini text link (e.g., "read more stories") ===================================================================== */ .mini-link-wrap { text-align: center; margin-top: 2.75rem; } .mini-link { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-ui); font-weight: 600; font-size: .85rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-bubblegum-pop); border-bottom: 2px solid var(--color-bubblegum-pop); padding-bottom: .25rem; transition: gap .25s ease, color .25s ease, border-color .25s ease; } .mini-link:hover { color: var(--color-charcoal-mist); border-bottom-color: var(--color-charcoal-mist); gap: .8rem; } .mini-link svg { width: 14px; height: 14px; } /* ===================================================================== Footer (compact) — newsletter on left, multi-column links on right ===================================================================== */ .site-footer { position: relative; padding: 6rem 0 1.5rem; margin-top: 0; overflow: hidden; } /* Pastel gradient strip on top, distinct from the purple body */ .site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3.5rem; background: linear-gradient(90deg, var(--color-blush-dream) 0%, var(--color-lavender-haze) 25%, var(--color-sky-glow) 50%, var(--color-mint-cloud) 75%, var(--color-golden-ticket) 100%); border-bottom: 2px solid var(--color-charcoal-mist); z-index: 0; } .site-footer .container { position: relative; z-index: 1; } .site-footer .footer-grid { grid-template-columns: 1fr; gap: 2rem; text-align: left; align-items: start; } @media (min-width: 768px) { .site-footer .footer-grid { grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: start; } } .footer-col-left { display: flex; flex-direction: column; gap: .7rem; align-items: flex-start; } .footer-col-right { display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; } @media (min-width: 768px) { .footer-col-right { align-items: flex-end; text-align: right; } } .site-footer .footer-logo { margin: 0 0 .15rem; font-size: 2rem; } .footer-newsletter-note { font-family: var(--font-ribeye); font-weight: 400; font-size: clamp(1.5rem, 2.5vw + .75rem, 2.4rem); text-transform: uppercase; letter-spacing: -0.015em; line-height: 1.05; color: #fff; max-width: 26rem; margin: 0 0 .65rem; } .footer-form { display: flex; align-items: center; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .3rem; width: 100%; max-width: 380px; box-shadow: 5px 5px 0 0 var(--color-bubblegum-pop); gap: .25rem; margin: .15rem 0; } .footer-input { flex: 1; min-width: 0; border: none; outline: none; padding: .5rem .85rem; font-family: var(--font-grotesk); font-size: .9rem; background: transparent; color: var(--color-charcoal-mist); } .footer-input::placeholder { color: rgba(58, 31, 71, .45); } .footer-form .btn { padding: .5rem 1.05rem; font-size: .75rem; box-shadow: none; border-width: 2px; } .footer-form .btn:hover { transform: none; box-shadow: none; } .footer-newsletter-meta { font-family: var(--font-grotesk); font-size: .95rem; color: rgba(255,255,255,.88); line-height: 1.5; max-width: 30rem; margin: .25rem 0 0; } .footer-socials-row { display: flex; gap: .5rem; list-style: none; margin: 0; padding: 0; } .footer-socials-row a { width: 36px; height: 36px; border-radius: 9999px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); display: grid; place-items: center; transition: background .3s ease; color: #fff; } .footer-socials-row a:hover { background: var(--color-bubblegum-pop); } .footer-socials-row svg { width: 16px; height: 16px; } .footer-link-list { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: .55rem 2.75rem; margin: 0; padding: 0; } @media (min-width: 768px) { .footer-col-right .footer-link-list { justify-items: end; } } .footer-link-list a { font-family: var(--font-ui); font-weight: 500; font-size: .95rem; color: rgba(255,255,255,.9); text-transform: none; letter-spacing: 0; white-space: nowrap; } .footer-link-list a:hover { color: var(--color-bubblegum-pop); } .footer-link-list--legal { display: flex; flex-direction: row; flex-wrap: wrap; gap: .35rem 1rem; grid-template-columns: none; } .footer-link-list--legal a { font-size: .75rem; color: rgba(255,255,255,.55); } .footer-link-list--legal a:hover { color: rgba(255,255,255,.9); } .site-footer .footer-bottom { margin-top: 1.75rem; padding-top: 1rem; font-size: .78rem; } /* Bottom row: copyright on the left, logo placeholder on the right */ .footer-bottom-row { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(255,255,255,.14); } .footer-bottom-row .footer-bottom { margin: 0; padding-top: 0; border-top: none; text-align: left; flex: 1 1 auto; } .footer-logo-img { display: grid; place-items: center; width: 84px; height: 84px; flex-shrink: 0; border-radius: 18px; background: linear-gradient(135deg, var(--color-bubblegum-pop), var(--color-cyber-purple)); border: 2px solid rgba(255,255,255,.22); overflow: hidden; box-shadow: 4px 4px 0 0 rgba(0,0,0,.18); transition: transform .25s ease, box-shadow .25s ease; } .footer-logo-img:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 rgba(0,0,0,.22); } .footer-logo-img img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 560px) { .footer-bottom-row { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; } .footer-logo-img { width: 72px; height: 72px; align-self: flex-end; } } /* ===================================================================== 25. She Knows — page-themed accents (left-aligned hero, green page-bg) ===================================================================== */ body.theme-knows .hero-eyebrow { background: var(--color-mint-cloud); } body.theme-knows .hero .orb-a { background: var(--color-mint-cloud); opacity: .55; } body.theme-knows .hero .orb-b { background: #2fbf8a; opacity: .18; } body.theme-knows .page-bg { background: radial-gradient(120% 80% at 15% -10%, rgba(200, 249, 233, .55), transparent 55%), radial-gradient(110% 70% at 90% 110%, rgba(47, 191, 138, .18), transparent 55%), radial-gradient(80% 60% at 80% 30%, rgba(255, 214, 228, .35), transparent 60%), radial-gradient(70% 50% at 5% 70%, rgba(228, 214, 255, .35), transparent 60%), var(--color-cream-cloud); } body.theme-knows .page-bg-orb.orb-pink { background: var(--color-blush-dream); opacity: .55; } body.theme-knows .page-bg-orb.orb-sky { background: rgba(47, 191, 138, .55); } body.theme-knows .page-bg-orb.orb-mint { background: var(--color-sky-glow); opacity: .35; } body.theme-knows .page-bg-orb.orb-lavender { background: var(--color-lavender-haze); opacity: .55; } /* She Knows — multi-color accents on cards & section heads */ .learn-section .section-head .eyebrow, .bodymap-section .section-head .eyebrow, .cycle-section .section-head .eyebrow, .glossary-section .section-head .eyebrow, .resources-section .section-head .eyebrow, .normal-section .section-head .eyebrow, .myth-section .section-head .eyebrow { transition: color .2s ease; } body.theme-knows .learn-section .section-head .eyebrow { color: var(--color-bubblegum-pop); } body.theme-knows .bodymap-section .section-head .eyebrow { color: #a47cf3; } body.theme-knows .normal-section .section-head .eyebrow { color: #3aa9e8; } body.theme-knows .myth-section .section-head .eyebrow { color: var(--color-bubblegum-pop); } body.theme-knows .cycle-section .section-head .eyebrow { color: var(--theme-pop); } body.theme-knows .glossary-section .section-head .eyebrow { color: #a47cf3; } body.theme-knows .resources-section .section-head .eyebrow { color: var(--color-bubblegum-pop); } body.theme-knows .learn-grid-item:nth-child(4n+2) > .learn-card:not(.learn-card--featured) { box-shadow: 4px 4px 0 0 var(--color-bubblegum-pop); } body.theme-knows .learn-grid-item:nth-child(4n+3) > .learn-card:not(.learn-card--featured) { box-shadow: 4px 4px 0 0 var(--color-sky-glow); } body.theme-knows .learn-grid-item:nth-child(4n+4) > .learn-card:not(.learn-card--featured) { box-shadow: 4px 4px 0 0 var(--color-lavender-haze); } body.theme-knows .learn-grid-item:nth-child(4n+2) > .learn-card .learn-card-icon, body.theme-knows .learn-grid-item:nth-child(4n+2) > .learn-card .learn-card-num, body.theme-knows .learn-grid-item:nth-child(4n+2) > .learn-card .learn-card-arrow { color: #f655a6; } body.theme-knows .learn-grid-item:nth-child(4n+3) > .learn-card .learn-card-icon, body.theme-knows .learn-grid-item:nth-child(4n+3) > .learn-card .learn-card-num, body.theme-knows .learn-grid-item:nth-child(4n+3) > .learn-card .learn-card-arrow { color: #3aa9e8; } body.theme-knows .learn-grid-item:nth-child(4n+4) > .learn-card .learn-card-icon, body.theme-knows .learn-grid-item:nth-child(4n+4) > .learn-card .learn-card-num, body.theme-knows .learn-grid-item:nth-child(4n+4) > .learn-card .learn-card-arrow { color: #a47cf3; } /* Normal-card alternating accent border + shadow */ body.theme-knows .normal-scroll > li:nth-child(3n+2) .normal-card-face { border-color: var(--color-bubblegum-pop); } body.theme-knows .normal-scroll > li:nth-child(3n+2) .normal-card-face.front { box-shadow: 3px 3px 0 0 var(--color-bubblegum-pop); } body.theme-knows .normal-scroll > li:nth-child(3n+2) .normal-card-face.back { background: var(--color-bubblegum-pop); } body.theme-knows .normal-scroll > li:nth-child(3n+2) .normal-flip-indicator { background: rgba(246, 85, 166, .14); color: var(--color-bubblegum-pop); } body.theme-knows .normal-scroll > li:nth-child(3n+3) .normal-card-face { border-color: #a47cf3; } body.theme-knows .normal-scroll > li:nth-child(3n+3) .normal-card-face.front { box-shadow: 3px 3px 0 0 #a47cf3; } body.theme-knows .normal-scroll > li:nth-child(3n+3) .normal-card-face.back { background: #a47cf3; } body.theme-knows .normal-scroll > li:nth-child(3n+3) .normal-flip-indicator { background: rgba(164, 124, 243, .14); color: #a47cf3; } body.theme-knows .hero-media .frame, body.theme-knows .hero-carousel { box-shadow: 8px 8px 0 0 #2fbf8a; } /* Left-aligned hero copy — already default — explicit guard */ .hero-copy { text-align: left; } /* ===================================================================== 26. Learn grid — 5×3 boxes with featured "First period" tile ===================================================================== */ .learn-section { padding: 4rem 0 6rem; position: relative; } @media (min-width: 768px) { .learn-section { padding: 5rem 0 8rem; } } .learn-section .section-head h2 { white-space: normal; max-width: 22ch; margin-left: auto; margin-right: auto; } .learn-section .section-head p { white-space: normal; } .learn-grid { list-style: none; display: grid; grid-auto-flow: column dense; grid-template-rows: repeat(3, minmax(120px, 1fr)); grid-auto-columns: 46%; gap: .9rem; margin: 0 -1rem; padding: .25rem 1rem 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; } .learn-grid::-webkit-scrollbar { display: none; } .learn-grid > li { scroll-snap-align: start; min-width: 0; } .learn-grid-item { display: flex; } .learn-grid-item > .learn-card { width: 100%; height: 100%; } .learn-grid-item--featured { grid-row: 1 / span 2; grid-column: span 1; } @media (min-width: 540px) { .learn-grid { grid-auto-columns: 32%; grid-template-rows: repeat(3, minmax(130px, 1fr)); gap: 1rem; } } @media (min-width: 768px) { .learn-grid { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(3, minmax(140px, auto)); grid-auto-columns: auto; gap: 1.1rem; overflow: visible; margin: 0; padding: 0; scroll-snap-type: none; } .learn-grid-item--featured { grid-column: 1 / span 2; grid-row: 1 / span 2; } } @media (min-width: 1100px){ .learn-grid { grid-template-rows: repeat(3, minmax(150px, auto)); gap: 1.25rem; } } .learn-card { position: relative; width: 100%; border-radius: var(--radius-3xl); border: 2px solid var(--color-charcoal-mist); background: linear-gradient(135deg, #ffffff 0%, #ffffff 55%, var(--theme-pop-soft) 100%); padding: 1rem .9rem; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: .5rem; text-align: left; cursor: pointer; color: var(--color-charcoal-mist); box-shadow: 4px 4px 0 0 var(--color-charcoal-mist); transition: transform .25s ease, box-shadow .25s ease, background .25s ease; } .learn-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 0 var(--theme-pop); background: linear-gradient(135deg, #ffffff 0%, #ffffff 45%, var(--theme-pop-soft) 100%); } .learn-card:focus-visible { outline: 3px solid var(--theme-pop); outline-offset: 3px; } .learn-card-num { font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop); } .learn-card-icon { width: 32px; height: 32px; color: var(--theme-pop); flex-shrink: 0; } .learn-card-title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(1rem, 1.1vw + .55rem, 1.25rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--color-charcoal-mist); } .learn-card-arrow { width: 20px; height: 20px; align-self: flex-end; color: var(--theme-pop); transition: transform .25s ease; } .learn-card:hover .learn-card-arrow { transform: translate(2px, -2px); } /* ----- Featured "First period" tile ----- */ .learn-card--featured { background: linear-gradient(135deg, var(--theme-pop) 0%, var(--theme-pop) 60%, var(--color-charcoal-mist) 100%); color: var(--color-cream-cloud); padding: 1.5rem 1.4rem; gap: .75rem; box-shadow: 6px 6px 0 0 var(--color-charcoal-mist); } .learn-card--featured:hover { background: linear-gradient(135deg, var(--theme-pop) 0%, var(--theme-pop) 50%, var(--color-charcoal-mist) 100%); box-shadow: 9px 9px 0 0 var(--color-charcoal-mist); } .learn-card--featured .learn-card-num { color: var(--color-cream-cloud); opacity: .85; font-size: .85rem; } .learn-card--featured .learn-card-icon { width: 56px; height: 56px; color: var(--color-cream-cloud); align-self: flex-start; margin-top: .25rem; } .learn-card--featured .learn-card-title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(2rem, 4.5vw + .25rem, 3.6rem); line-height: .95; letter-spacing: -0.025em; color: var(--color-cream-cloud); margin-top: auto; } .learn-card-cta { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-cream-cloud); padding: .5rem .9rem; border-radius: 9999px; background: rgba(255, 255, 255, .18); border: 2px solid var(--color-cream-cloud); align-self: flex-start; transition: background .2s ease, transform .2s ease; } .learn-card-cta svg { width: 14px; height: 14px; } .learn-card--featured:hover .learn-card-cta { background: var(--color-cream-cloud); color: var(--color-charcoal-mist); } /* ===================================================================== 27. Learn modal — page-wide popup with prev/next pagination ===================================================================== */ .learn-modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 1rem; } .learn-modal.is-open { display: flex; } .learn-modal-backdrop { position: absolute; inset: 0; background: rgba(58, 31, 71, .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .learn-modal-card { position: relative; width: min(960px, 100%); max-height: 90vh; background: var(--color-cream-cloud); border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); box-shadow: 10px 10px 0 0 var(--theme-pop); display: flex; flex-direction: column; overflow: hidden; animation: learn-modal-in .28s cubic-bezier(.22, .61, .36, 1); } @keyframes learn-modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .learn-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 2px solid rgba(58, 31, 71, .12); gap: 1rem; } .learn-modal-topic { font-family: var(--font-syne); font-weight: 700; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop); flex: 1; } .learn-modal-counter { font-family: var(--font-syne); font-weight: 600; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(58, 31, 71, .5); } .learn-modal-close { width: 40px; height: 40px; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); background: #fff; display: grid; place-items: center; color: var(--color-charcoal-mist); font-size: 1.4rem; line-height: 1; box-shadow: 3px 3px 0 0 var(--color-charcoal-mist); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .learn-modal-close:hover { background: var(--theme-pop); color: #fff; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); } .learn-modal-body { padding: 1.5rem 1.5rem 2rem; overflow-y: auto; flex: 1; } @media (min-width: 768px) { .learn-modal-body { padding: 2.25rem 2.5rem 2.75rem; } } .learn-modal-title { font-family: var(--font-ui); font-weight: 600; font-size: clamp(1.85rem, 4vw + .5rem, 3rem); line-height: 1; letter-spacing: -0.02em; color: var(--color-charcoal-mist); margin-bottom: .5rem; } .learn-modal-eyebrow { display: inline-block; font-family: var(--font-syne); font-weight: 700; font-size: .85rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop); margin-bottom: 1.25rem; padding: .35rem .8rem; border-radius: 9999px; background: var(--theme-pop-soft); } .learn-modal-content { font-family: var(--font-grotesk); font-size: 1rem; line-height: 1.6; color: rgba(58, 31, 71, .92); } .learn-modal-content p + p { margin-top: 1rem; } .learn-modal-content h3 { font-family: var(--font-ribeye); font-weight: 700; font-size: 1.25rem; margin: 1.5rem 0 .5rem; text-transform: uppercase; letter-spacing: -0.01em; color: var(--color-charcoal-mist); } .learn-modal-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border-top: 2px solid rgba(58, 31, 71, .12); background: rgba(255, 255, 255, .6); } .learn-modal-nav button { display: inline-flex; align-items: center; gap: .5rem; padding: .65rem 1.1rem; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); background: #fff; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--color-charcoal-mist); box-shadow: 3px 3px 0 0 var(--color-charcoal-mist); transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease; } .learn-modal-nav button:hover:not(:disabled) { background: var(--theme-pop); color: #fff; transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); } .learn-modal-nav button:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; } .learn-modal-nav .learn-modal-pagedots { display: flex; gap: .55rem; align-items: center; flex: 1; justify-content: center; } .learn-modal-pagedot { width: 7px; height: 7px; border-radius: 9999px; background: rgba(58, 31, 71, .22); border: none; padding: 0; cursor: pointer; transition: background .2s ease, width .2s ease; } .learn-modal-pagedot.is-active { background: var(--theme-pop); width: 22px; } body.modal-open { overflow: hidden; } /* ===================================================================== 28. She Knows — shared utilities ===================================================================== */ /* Myth/Fact tokens (Section 5) */ :root { --color-myth: #ef4360; --color-myth-soft: #ffe4e9; --color-fact: #2fbf8a; --color-fact-soft: #d6f5e7; } /* Box placeholder — used for every illustration / mascot / map / thumbnail */ .box-placeholder { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; width: 100%; background: var(--theme-pop-soft, rgba(47, 191, 138, .14)); border: 2px dashed var(--theme-pop, #2fbf8a); border-radius: var(--radius-3xl); color: var(--theme-pop, #2fbf8a); font-family: var(--font-syne); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; padding: 1rem; overflow: hidden; } .box-placeholder::before { content: ""; position: absolute; inset: 6px; border: 1px dashed rgba(47, 191, 138, .3); border-radius: calc(var(--radius-3xl) - 6px); pointer-events: none; } .box-placeholder > span { position: relative; z-index: 1; } .mascot-box { aspect-ratio: 1 / 1; max-width: 220px; } .card-icon-box { aspect-ratio: 1 / 1; width: 56px; height: 56px; padding: .35rem; font-size: .55rem; border-radius: 9999px; } .body-map-box { aspect-ratio: 3 / 4; } .phase-detail-box { aspect-ratio: 4 / 3; } .resource-thumb-box{ aspect-ratio: 1 / 1; } /* Generic dot-guide pagination — used wherever a section scrolls horizontally */ .scroll-dots { display: flex; gap: .45rem; justify-content: center; align-items: center; margin-top: 1.25rem; list-style: none; padding: 0; flex-wrap: wrap; } .scroll-dots[hidden] { display: none; } .scroll-dots li { display: inline-flex; } .scroll-dots button { width: 8px; height: 8px; border-radius: 9999px; background: rgba(58, 31, 71, .25); border: none; padding: 0; cursor: pointer; transition: background .25s ease, width .25s ease, transform .25s ease; } .scroll-dots button:hover { background: rgba(58, 31, 71, .55); } .scroll-dots button.is-active { background: var(--theme-pop); width: 24px; } .scroll-dots button:focus-visible { outline: 2px solid var(--theme-pop); outline-offset: 3px; } /* ===================================================================== 29. Section 1 — Ask Mysa hero ===================================================================== */ .ask-hero { position: relative; padding: 3rem 0 4rem; overflow: hidden; } @media (min-width: 1024px) { .ask-hero { padding: 4.5rem 0 6rem; } } .ask-hero-grid { display: grid; gap: 2rem; align-items: center; position: relative; z-index: 1; grid-template-columns: 1fr; text-align: center; } @media (min-width: 900px) { .ask-hero-grid { grid-template-columns: auto 1fr; text-align: left; gap: 3rem; } } .ask-hero-mascot { display: flex; justify-content: center; } .ask-hero-headline { font-family: var(--font-ribeye); font-weight: 700; text-transform: uppercase; font-size: clamp(4rem, 12vw, 9rem); line-height: .85; letter-spacing: -0.04em; color: var(--color-charcoal-mist); margin: 0 0 1rem; } .ask-hero-headline .ah-line { display: block; } .ask-hero-headline .ah-accent { color: var(--theme-pop); } .ask-hero-sub { font-family: var(--font-grotesk); font-weight: 500; font-size: clamp(1rem, 2vw + .25rem, 1.25rem); line-height: 1.4; color: rgba(58, 31, 71, .85); margin: 0 0 2rem; max-width: 38ch; } @media (max-width: 899px) { .ask-hero-sub { margin-left: auto; margin-right: auto; } } /* Search bar */ .ask-search { position: relative; display: flex; align-items: center; gap: .5rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .4rem .4rem .4rem 1.5rem; box-shadow: 0 0 0 6px rgba(47, 191, 138, .14), 6px 6px 0 0 var(--theme-pop); max-width: 540px; width: 100%; transition: box-shadow .25s ease, transform .25s ease; } @media (max-width: 899px) { .ask-search { margin: 0 auto; } } .ask-search:focus-within { box-shadow: 0 0 0 6px rgba(47, 191, 138, .24), 8px 8px 0 0 var(--theme-pop); transform: translate(-1px, -1px); } .ask-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-grotesk); font-size: 1rem; color: var(--color-charcoal-mist); padding: .85rem 0; min-width: 0; } .ask-search input::placeholder { color: rgba(58, 31, 71, .45); } .ask-search-submit { width: 48px; height: 48px; border-radius: 9999px; background: var(--color-charcoal-mist); color: #fff; display: grid; place-items: center; flex-shrink: 0; transition: background .25s ease, transform .25s ease; } .ask-search-submit:hover { background: var(--theme-pop); transform: scale(1.05); } .ask-search-submit svg { width: 20px; height: 20px; } /* Quick-tap pills */ .ask-pills { margin-top: 1.5rem; list-style: none; display: grid; gap: .65rem; grid-template-columns: 1fr; max-width: 540px; } @media (min-width: 540px) { .ask-pills { grid-template-columns: 1fr 1fr; } } @media (max-width: 899px) { .ask-pills { margin-left: auto; margin-right: auto; } } .ask-pill { display: inline-flex; align-items: center; justify-content: space-between; width: 100%; gap: .5rem; padding: .85rem 1.1rem; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); font-family: var(--font-syne); font-weight: 600; font-size: .9rem; text-align: left; color: var(--color-charcoal-mist); box-shadow: 3px 3px 0 0 var(--color-charcoal-mist); transition: transform .2s ease, box-shadow .2s ease; cursor: pointer; } .ask-pill:hover, .ask-pill:focus-visible { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); outline: none; } .ask-pill .ask-pill-emoji { font-size: 1.15rem; } .ask-pill--pink { background: #ffd6e4; color: #b3326b; } .ask-pill--green { background: #d6f5e7; color: #1e7a52; } .ask-pill--purple { background: #e4d6ff; color: #6b3fb3; } .ask-pill--cyan { background: #cdeefb; color: #1d6c8f; } /* ===================================================================== 30. Section 3 — Interactive body maps ===================================================================== */ .bodymap-section { padding: 3.5rem 0 4.5rem; } @media (min-width: 768px) { .bodymap-section { padding: 5rem 0 6rem; } } .bodymap-section .section-head h2, .bodymap-section .section-head p { white-space: normal; } .bodymap-toggle { display: flex; gap: .25rem; width: max-content; margin: 0 auto 1.75rem; padding: .35rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; box-shadow: 4px 4px 0 0 var(--theme-pop); } .bodymap-toggle-btn { font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-charcoal-mist); background: transparent; border: none; padding: .65rem 1.1rem; border-radius: 9999px; cursor: pointer; transition: background .2s ease, color .2s ease; white-space: nowrap; } .bodymap-toggle-btn:hover { background: var(--theme-pop-soft); } .bodymap-toggle-btn.is-active { background: var(--theme-pop); color: #fff; } .bodymap-stack { display: block; } .bodymap-stack > [data-bodymap-panel] { display: none; } .bodymap-stack > [data-bodymap-panel].is-active { display: block; } .bodymap { position: relative; border-radius: var(--radius-4xl); border: 2px solid var(--color-charcoal-mist); background: #fff; padding: 1.25rem; box-shadow: 6px 6px 0 0 var(--theme-pop); } .bodymap--solo { width: 100%; max-width: 100%; padding: 2rem 1.5rem; } @media (min-width: 768px) { .bodymap--solo { padding: 2.5rem 2.5rem; } .bodymap--solo .bodymap-stage { max-width: 540px; margin: 0 auto; aspect-ratio: 3 / 4; } } .bodymap-title { font-family: var(--font-ribeye); font-weight: 700; text-transform: uppercase; font-size: clamp(1.6rem, 2.5vw + .5rem, 2.4rem); letter-spacing: -0.025em; line-height: 1; text-align: center; margin: 0 0 1.25rem; color: var(--color-charcoal-mist); } .bodymap-title::after { content: ""; display: block; width: 60px; height: 4px; margin: .55rem auto 0; background: var(--theme-pop); border-radius: 9999px; } .bodymap-stage { position: relative; width: 100%; } .body-hotspot { position: absolute; width: 28px; height: 28px; border-radius: 9999px; background: transparent; border: none; padding: 0; cursor: pointer; transform: translate(-50%, -50%); display: grid; place-items: center; z-index: 2; } .body-hotspot::before { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 9999px; background: var(--theme-pop); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--theme-pop), 0 2px 6px rgba(47, 191, 138, .4); transition: transform .2s ease; } .body-hotspot::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 9999px; background: var(--theme-pop); opacity: .5; animation: hotspot-pulse 2s ease-out infinite; } @keyframes hotspot-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(2.6); opacity: 0; } 100% { transform: scale(2.6); opacity: 0; } } .body-hotspot:hover::before, .body-hotspot:focus-visible::before { transform: scale(1.2); } .body-hotspot:focus-visible { outline: 3px solid var(--theme-pop); outline-offset: 4px; border-radius: 9999px; } .body-hotspot.is-active::before { background: var(--color-charcoal-mist); box-shadow: 0 0 0 2px var(--color-charcoal-mist); } .body-hotspot-tooltip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--color-charcoal-mist); color: #fff; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; padding: .35rem .6rem; border-radius: 9999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s ease; } .body-hotspot:hover .body-hotspot-tooltip, .body-hotspot:focus-visible .body-hotspot-tooltip { opacity: 1; } /* Body detail panel */ .body-detail { margin-top: 1.5rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); padding: 1.25rem 1.5rem; box-shadow: 4px 4px 0 0 var(--color-charcoal-mist); display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } .body-detail[hidden] { display: none; } .body-detail-eyebrow { font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop); margin-bottom: .25rem; } .body-detail-title { font-family: var(--font-ribeye); text-transform: uppercase; font-size: 1.4rem; letter-spacing: -0.01em; color: var(--color-charcoal-mist); margin: 0 0 .35rem; } .body-detail-text { font-family: var(--font-grotesk); font-size: .95rem; line-height: 1.5; color: rgba(58, 31, 71, .85); } .body-detail-close { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); background: #fff; display: grid; place-items: center; font-size: 1.05rem; line-height: 1; color: var(--color-charcoal-mist); } .body-detail-close:hover { background: var(--theme-pop); color: #fff; } /* ===================================================================== 30b. She Asks — Questions from other girls (sticky-note wall) ===================================================================== */ .sticky-section { padding: 3.5rem 0 1rem; } @media (min-width: 768px) { .sticky-section { padding: 5rem 0 1.5rem; } } .sticky-section .section-head h2, .sticky-section .section-head p { white-space: normal; } .sticky-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 1.5rem; } .sticky-filter-group { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; margin: 0; padding: 0; min-width: 0; } .sticky-filter { display: inline-block; background: #fff; color: var(--color-charcoal-mist); border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .45rem .95rem; font-family: var(--font-syne); font-weight: 700; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; line-height: 1.1; cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease; } .sticky-filter:hover { transform: translateY(-1px); box-shadow: var(--shadow-pop-sm); } .sticky-filter.is-active { background: var(--theme-pop); color: #fff; border-color: var(--theme-pop); box-shadow: var(--shadow-pop-sm); } .sticky-filter:focus-visible { outline: 3px solid var(--theme-pop); outline-offset: 3px; } .sticky-post-btn { display: inline-flex; align-items: center; gap: .45rem; padding: .65rem 1.15rem; font-size: .9rem; white-space: nowrap; flex-shrink: 0; } .sticky-post-btn-plus { font-size: 1.2rem; line-height: 1; font-weight: 700; } /* Sticky-note grid */ .sticky-grid { list-style: none; margin: 0; padding: 1rem 0 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 640px) { .sticky-grid { grid-template-columns: repeat(3, 1fr); gap: 1.1rem; } } @media (min-width: 1000px) { .sticky-grid { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; } } .sticky-grid > li { min-width: 0; } /* Sticky note */ .sticky-note { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 170px; padding: 1.1rem 1rem .9rem; background: #fff7a8; border-radius: 4px 18px 6px 14px; box-shadow: 4px 5px 0 rgba(0, 0, 0, .08), 1px 2px 0 rgba(0, 0, 0, .04); transform: rotate(-1.4deg); transition: transform .2s ease, box-shadow .2s ease; } .sticky-note::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(-4deg); width: 38px; height: 14px; background: rgba(255, 255, 255, .55); border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); } .sticky-note:hover { transform: rotate(-1.4deg) translateY(-3px) scale(1.02); box-shadow: 6px 7px 0 rgba(0, 0, 0, .1), 1px 2px 0 rgba(0, 0, 0, .04); z-index: 2; } /* Pastel rotation — alternate colors and tilts */ .sticky-grid > li:nth-child(4n+1) .sticky-note { background: #fff3a3; transform: rotate(-1.4deg); } .sticky-grid > li:nth-child(4n+2) .sticky-note { background: #ffd3e5; transform: rotate(1.6deg); } .sticky-grid > li:nth-child(4n+3) .sticky-note { background: #cdeafd; transform: rotate(-2deg); } .sticky-grid > li:nth-child(4n+4) .sticky-note { background: #d6f5d6; transform: rotate(1.2deg); } .sticky-grid > li:nth-child(4n+1) .sticky-note:hover { transform: rotate(-1.4deg) translateY(-3px) scale(1.02); } .sticky-grid > li:nth-child(4n+2) .sticky-note:hover { transform: rotate(1.6deg) translateY(-3px) scale(1.02); } .sticky-grid > li:nth-child(4n+3) .sticky-note:hover { transform: rotate(-2deg) translateY(-3px) scale(1.02); } .sticky-grid > li:nth-child(4n+4) .sticky-note:hover { transform: rotate(1.2deg) translateY(-3px) scale(1.02); } .sticky-note-category { display: inline-block; align-self: flex-start; background: rgba(255, 255, 255, .55); border: 1.5px solid rgba(0, 0, 0, .2); border-radius: 9999px; padding: .15rem .55rem; font-family: var(--font-syne); font-weight: 700; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-charcoal-mist); margin-bottom: .55rem; } .sticky-note-q { font-family: var(--font-lora); font-style: italic; font-size: clamp(.95rem, .8vw + .65rem, 1.05rem); line-height: 1.35; color: var(--color-charcoal-mist); margin: 0 0 .75rem; word-wrap: break-word; } .sticky-note-meta { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-syne); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(0, 0, 0, .55); } /* Composer overlay */ .sticky-composer { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 1rem; } .sticky-composer[hidden] { display: none; } .sticky-composer-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 30, .45); backdrop-filter: blur(2px); } .sticky-note--composer { position: relative; width: 100%; max-width: 380px; min-height: 320px; background: #fff3a3; padding: 1.5rem 1.25rem 1.1rem; transform: rotate(-1.5deg); z-index: 1; } .sticky-note--composer:hover { transform: rotate(-1.5deg); } .sticky-composer-close { position: absolute; top: .55rem; right: .65rem; width: 26px; height: 26px; border-radius: 9999px; background: rgba(255, 255, 255, .65); border: 1.5px solid rgba(0, 0, 0, .2); display: grid; place-items: center; color: var(--color-charcoal-mist); cursor: pointer; } .sticky-composer-close:hover { background: #fff; } .sticky-note-category-select { appearance: none; -webkit-appearance: none; align-self: flex-start; background: rgba(255, 255, 255, .65) url("data:image/svg+xml;utf8,") no-repeat right .65rem center/10px 7px; border: 1.5px solid rgba(0, 0, 0, .25); border-radius: 9999px; padding: .35rem 1.85rem .35rem .8rem; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--color-charcoal-mist); margin-bottom: .75rem; cursor: pointer; } .sticky-note-category-select:focus-visible { outline: 2px solid var(--theme-pop); outline-offset: 2px; } .sticky-note-textarea { flex: 1; width: 100%; min-height: 140px; resize: none; background: transparent; border: none; outline: none; font-family: var(--font-lora); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--color-charcoal-mist); padding: 0; margin-bottom: .65rem; } .sticky-note-textarea::placeholder { color: rgba(0, 0, 0, .4); } .sticky-note-counter { font-variant-numeric: tabular-nums; } .sticky-note-post { margin-top: .8rem; align-self: flex-end; padding: .55rem 1.1rem; font-size: .85rem; } /* ===================================================================== 31. Section 4 — "What's normal?" — vertical strips, 2 cols, front=question ===================================================================== */ .normal-section { padding: 3.5rem 0 4.5rem; } @media (min-width: 768px) { .normal-section { padding: 5rem 0 6rem; } } .normal-section .section-head h2, .normal-section .section-head p { white-space: normal; } /* Mobile: horizontal scroll-snap, single column, 4 rows per page. Desktop: 3-column × 4-row page (12 cards visible), swipe right to reveal more. */ .normal-scroll { list-style: none; margin: 0 -1rem; padding: 1rem 1rem 1.5rem; display: grid; grid-auto-flow: column; grid-template-columns: none; grid-template-rows: repeat(4, minmax(110px, 1fr)); grid-auto-columns: 100%; gap: .6rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; } .normal-scroll::-webkit-scrollbar { display: none; } .normal-scroll > li { scroll-snap-align: start; min-width: 0; } @media (min-width: 768px) { .normal-scroll { grid-template-rows: repeat(4, minmax(120px, 1fr)); grid-auto-columns: calc((100% - .75rem) / 2); gap: .7rem .75rem; } } @media (min-width: 1100px) { .normal-scroll { margin: 0; padding: 1rem 0 1.5rem; grid-auto-columns: calc((100% - 1.5rem) / 3); gap: .75rem; } } .normal-card { position: relative; perspective: 1200px; width: 100%; height: 100%; min-height: 96px; cursor: pointer; outline: none; transition: transform .25s ease, z-index 0s linear .25s; } .normal-card:hover, .normal-card:focus-visible { transform: scale(1.06); z-index: 10; transition: transform .25s ease, z-index 0s; } .normal-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.22, .61, .36, 1); } .normal-card.is-flipped .normal-card-inner { transform: rotateY(180deg); } .normal-card-face { position: absolute; inset: 0; width: 100%; height: 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2px solid var(--theme-pop); border-radius: 18px; display: flex; align-items: center; padding: .85rem 1.1rem; text-align: left; box-sizing: border-box; } .normal-card-face.front { background: #fff; box-shadow: 3px 3px 0 0 var(--theme-pop); padding-right: 2.75rem; } .normal-card-face.front .normal-q { font-family: var(--font-ui); font-weight: 600; font-size: clamp(1rem, 1.1vw + .65rem, 1.2rem); line-height: 1.25; color: var(--color-charcoal-mist); margin: 0; } .normal-flip-indicator { position: absolute; right: .55rem; bottom: .5rem; width: 26px; height: 26px; border-radius: 9999px; display: grid; place-items: center; background: var(--theme-pop-soft); color: var(--theme-pop); pointer-events: none; } .normal-flip-indicator svg { width: 14px; height: 14px; } .normal-card.is-flipped .normal-flip-indicator { opacity: 0; } .normal-card-face.back { background: var(--theme-pop); color: #fff; transform: rotateY(180deg); } .normal-card-face.back p { font-family: var(--font-grotesk); font-size: clamp(.88rem, .9vw + .55rem, 1rem); line-height: 1.35; color: rgba(255,255,255,.96); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .normal-card:focus-visible { outline: 3px solid var(--theme-pop); outline-offset: 3px; border-radius: 18px; } /* ===================================================================== 32. Section 5 — Myth vs Fact flip cards ===================================================================== */ .myth-section { padding: 3.5rem 0 4.5rem; } @media (min-width: 768px) { .myth-section { padding: 5rem 0 6rem; } } .myth-section .section-head h2, .myth-section .section-head p { white-space: normal; } .myth-grid { list-style: none; margin: 0 -1rem; padding: .25rem 1rem 1rem; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, minmax(140px, auto)); grid-auto-columns: 70%; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; cursor: grab; } .myth-grid:active { cursor: grabbing; } .myth-grid.is-dragging { scroll-snap-type: none; cursor: grabbing; user-select: none; } .myth-grid::-webkit-scrollbar { display: none; } .myth-grid > li { scroll-snap-align: start; min-width: 0; } @media (min-width: 640px) { .myth-grid { grid-auto-columns: 46%; } } @media (min-width: 900px) { .myth-grid { grid-auto-columns: 30%; } } /* Desktop: 4×3 flat grid, all visible */ @media (min-width: 1100px) { .myth-grid { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-template-rows: none; grid-auto-columns: auto; overflow: visible; scroll-snap-type: none; margin: 0; padding: 0; gap: 1.25rem; } } .myth-card { position: relative; perspective: 1200px; aspect-ratio: 4 / 3; cursor: pointer; outline: none; } .myth-card-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .7s cubic-bezier(.22, .61, .36, 1); } .myth-card.is-flipped .myth-card-inner { transform: rotateY(180deg); } .myth-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); padding: 1.5rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .75rem; } .myth-face.front { background: var(--color-myth-soft); color: var(--color-charcoal-mist); box-shadow: 6px 6px 0 0 var(--color-charcoal-mist); } .myth-face.back { background: var(--color-fact); color: #fff; transform: rotateY(180deg); box-shadow: 6px 6px 0 0 var(--color-charcoal-mist); } .myth-label { display: inline-block; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; background: rgba(255,255,255,.28); border: 1px solid rgba(255,255,255,.45); color: #fff; padding: .25rem .75rem; border-radius: 9999px; } .myth-face.front .myth-label { background: rgba(0,0,0,.18); border-color: rgba(0,0,0,.35); color: var(--color-charcoal-mist); } .myth-text { font-family: var(--font-ribeye); font-size: clamp(1.1rem, 2vw + .25rem, 1.5rem); line-height: 1.1; letter-spacing: -0.01em; text-transform: uppercase; color: #fff; margin: 0; } .myth-face.front .myth-text { font-family: var(--font-ui); font-weight: 800; font-size: clamp(1.25rem, 2.4vw + .35rem, 1.85rem); line-height: 1.15; letter-spacing: -0.015em; text-transform: none; color: var(--color-charcoal-mist); } .myth-card:focus-visible { outline: 3px solid var(--color-charcoal-mist); outline-offset: 4px; border-radius: var(--radius-4xl); } /* ===================================================================== 33. Section 6 — Cycle timeline / interactive infographic ===================================================================== */ .cycle-section { padding: 3.5rem 0 4.5rem; } @media (min-width: 768px) { .cycle-section { padding: 5rem 0 6rem; } } .cycle-section .section-head h2, .cycle-section .section-head p { white-space: normal; } .cycle-timeline { position: relative; display: grid; gap: 1.25rem; grid-template-columns: 1fr; list-style: none; padding: 0; margin: 0 0 2rem; } @media (min-width: 760px) { .cycle-timeline { grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 1rem; } .cycle-timeline::before { content: ""; position: absolute; top: 38px; left: 6%; right: 6%; height: 4px; background: rgba(47, 191, 138, .25); border-radius: 9999px; z-index: 0; } .cycle-timeline::after { content: ""; position: absolute; top: 38px; left: 6%; width: 0; height: 4px; background: var(--theme-pop); border-radius: 9999px; transition: width 1.2s cubic-bezier(.22, .61, .36, 1); z-index: 0; } .cycle-timeline.is-revealed::after { width: 88%; } } .cycle-phase { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; z-index: 1; } .cycle-phase-btn { background: none; border: none; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .65rem; width: 100%; outline: none; } .cycle-phase-node { width: 76px; height: 76px; border-radius: 9999px; background: linear-gradient(135deg, var(--theme-pop) 0%, #1e9d6c 100%); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--theme-pop), 4px 4px 0 0 var(--color-charcoal-mist); display: grid; place-items: center; color: #fff; font-family: var(--font-ribeye); text-transform: uppercase; font-size: 1.3rem; transition: transform .25s ease, opacity .25s ease; } .cycle-phase[data-size="lg"] .cycle-phase-node { width: 92px; height: 92px; } .cycle-phase[data-size="sm"] .cycle-phase-node { width: 60px; height: 60px; font-size: 1rem; } .cycle-phase-name { font-family: var(--font-ribeye); text-transform: uppercase; font-size: 1.1rem; color: var(--color-charcoal-mist); letter-spacing: -0.01em; } .cycle-phase-days { font-family: var(--font-syne); font-weight: 600; font-size: .8rem; letter-spacing: .08em; color: rgba(58, 31, 71, .65); } .cycle-phase.is-active .cycle-phase-node { transform: scale(1.05); } .cycle-timeline.has-active .cycle-phase:not(.is-active) .cycle-phase-node { opacity: .4; } .cycle-phase-btn:focus-visible .cycle-phase-node { outline: 3px solid var(--theme-pop); outline-offset: 6px; } @media (max-width: 759px) { .cycle-timeline { position: relative; padding-left: 1.25rem; } .cycle-timeline::before { content: ""; position: absolute; top: 0; bottom: 0; left: 1.25rem; width: 4px; background: rgba(47, 191, 138, .25); border-radius: 9999px; } .cycle-phase { flex-direction: row; align-items: center; gap: 1rem; } .cycle-phase-btn { flex-direction: row; align-items: center; gap: 1rem; } .cycle-phase-node { flex-shrink: 0; } } .cycle-detail { border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); background: #fff; padding: 1.5rem; box-shadow: 6px 6px 0 0 var(--theme-pop); display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 760px) { .cycle-detail { grid-template-columns: 1fr 1.5fr; padding: 2rem; gap: 2rem; align-items: center; } } .cycle-detail[hidden] { display: none; } .cycle-detail-text h3 { font-family: var(--font-ribeye); text-transform: uppercase; font-size: 1.6rem; color: var(--color-charcoal-mist); letter-spacing: -0.01em; margin: 0 0 .5rem; } .cycle-detail-eyebrow { display: inline-block; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop); margin-bottom: .35rem; } .cycle-detail-text p { font-family: var(--font-grotesk); font-size: 1rem; line-height: 1.5; color: rgba(58, 31, 71, .85); margin: 0; } /* ===================================================================== 34. Section 7 — Glossary / Words to know ===================================================================== */ .glossary-section { padding: 3.5rem 0 4.5rem; } @media (min-width: 768px) { .glossary-section { padding: 5rem 0 6rem; } } .glossary-section .section-head h2, .glossary-section .section-head p { white-space: normal; } /* Box wrapper — search + A-Z + entries all live in here */ .glossary-box { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); box-shadow: 6px 6px 0 0 var(--theme-pop); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; height: 540px; min-height: 540px; max-height: 540px; overflow: hidden; } @media (min-width: 768px) { .glossary-box { padding: 1.75rem; gap: 1.25rem; } } .glossary-controls { display: flex; flex-direction: column; gap: .85rem; flex-shrink: 0; } .glossary-search { display: flex; align-items: center; gap: .5rem; background: var(--color-cream-cloud); border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: .25rem .25rem .25rem 1.25rem; width: 100%; margin: 0; } .glossary-search input { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font-grotesk); font-size: .95rem; color: var(--color-charcoal-mist); padding: .65rem 0; min-width: 0; } .glossary-search input::placeholder { color: rgba(58, 31, 71, .45); } .glossary-search-icon { width: 38px; height: 38px; border-radius: 9999px; background: var(--color-charcoal-mist); color: #fff; display: grid; place-items: center; flex-shrink: 0; } .glossary-search-icon svg { width: 16px; height: 16px; } .glossary-az { display: flex; flex-wrap: nowrap; gap: .3rem; list-style: none; padding: 0 .25rem 4px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; scroll-snap-type: x proximity; } .glossary-az::-webkit-scrollbar { display: none; } .glossary-az li { flex-shrink: 0; scroll-snap-align: start; } @media (min-width: 768px) { .glossary-az { flex-wrap: wrap; justify-content: center; overflow: visible; padding: 0; gap: .35rem; } } .glossary-az button { width: 32px; height: 32px; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); background: #fff; font-family: var(--font-syne); font-weight: 700; font-size: .75rem; color: var(--color-charcoal-mist); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease; } .glossary-az button:hover:not(:disabled) { background: var(--theme-pop); color: #fff; transform: translate(-1px, -1px); } .glossary-az button.is-active { background: var(--theme-pop); color: #fff; } .glossary-az button:disabled { opacity: .35; cursor: not-allowed; border-style: dashed; } /* Scrollable inner content area — scrolls within the box; page never jumps */ .glossary-content { position: relative; flex: 1; min-height: 0; overflow-y: auto; padding-right: .25rem; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; } .glossary-content::-webkit-scrollbar { width: 8px; } .glossary-content::-webkit-scrollbar-thumb { background: rgba(58, 31, 71, .15); border-radius: 9999px; } .glossary-list { display: grid; gap: .65rem; list-style: none; padding: 0; margin: 0; } @media (min-width: 700px) { .glossary-list { grid-template-columns: 1fr 1fr; gap: .75rem; } } @media (min-width: 1000px) { .glossary-list { grid-template-columns: repeat(2, 1fr); } } .glossary-item { background: #fff; border: 2px solid rgba(58, 31, 71, .12); border-radius: var(--radius-3xl); padding: 1rem 1.25rem; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; cursor: pointer; } .glossary-item:hover { border-color: var(--theme-pop); transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--theme-pop); } .glossary-item[hidden] { display: none; } .glossary-item.is-expanded { grid-column: 1 / -1; border-color: var(--theme-pop); box-shadow: 4px 4px 0 0 var(--theme-pop); transform: none; } .glossary-item.is-expanded:hover { transform: none; } .glossary-related { margin-top: .9rem; padding-top: .85rem; border-top: 1px dashed rgba(58, 31, 71, .25); } .glossary-related-label { display: block; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop); margin-bottom: .5rem; } .glossary-related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .glossary-related a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border: 1.5px solid var(--theme-pop); border-radius: 9999px; background: var(--theme-pop-soft); font-family: var(--font-grotesk); font-size: .82rem; color: var(--color-charcoal-mist); text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; } .glossary-related a:hover { background: var(--theme-pop); color: #fff; transform: translate(-1px, -1px); } .glossary-related a svg { width: 11px; height: 11px; } .glossary-related-tag { font-family: var(--font-syne); font-weight: 700; font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-pop); padding: .12rem .4rem; border-radius: 9999px; background: rgba(255,255,255,.7); } .glossary-item.is-expanded .glossary-related a:hover .glossary-related-tag { color: var(--theme-pop); } .glossary-letter-heading { display: none !important; } .glossary-term { font-family: var(--font-syne); font-weight: 700; font-size: 1rem; color: var(--color-charcoal-mist); margin: 0 0 .25rem; } .glossary-def { font-family: var(--font-grotesk); font-size: .9rem; line-height: 1.45; color: rgba(58, 31, 71, .8); margin: 0; } .glossary-empty { text-align: center; padding: 2rem 1rem; font-family: var(--font-grotesk); color: rgba(58, 31, 71, .6); border: 2px dashed rgba(58, 31, 71, .2); border-radius: var(--radius-3xl); grid-column: 1 / -1; } .glossary-empty[hidden] { display: none; } /* ===================================================================== 35. Section 8 — Resources hub ===================================================================== */ .resources-section { padding: 3.5rem 0 4.5rem; } @media (min-width: 768px) { .resources-section { padding: 5rem 0 6rem; } } .resources-section .section-head h2, .resources-section .section-head p { white-space: normal; } .resources-tabs { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-bottom: 2.25rem; list-style: none; padding: 0; } .resources-tab { font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; padding: .55rem 1.1rem; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); background: #fff; color: var(--color-charcoal-mist); cursor: pointer; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .resources-tab:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 0 var(--color-charcoal-mist); } .resources-tab.is-active { background: var(--theme-pop); color: #fff; box-shadow: 3px 3px 0 0 var(--color-charcoal-mist); } .resources-panel { display: none; } .resources-panel.is-active { display: block; } .resources-grid { list-style: none; margin: 0 -1rem; padding: .25rem 1rem 1rem; display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; touch-action: pan-x; scrollbar-width: none; cursor: grab; } .resources-grid:active { cursor: grabbing; } .resources-grid::-webkit-scrollbar { display: none; } .resources-grid > li { scroll-snap-align: start; min-width: 0; display: flex; } .resources-grid > li > .resource-card { width: 100%; } @media (min-width: 640px) { .resources-grid { grid-auto-columns: 46%; } } @media (min-width: 900px) { .resources-grid { grid-auto-columns: 32%; } } @media (min-width: 1200px) { .resources-grid { grid-auto-columns: 26%; gap: 1.25rem; } } .resource-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); padding: 1rem; color: var(--color-charcoal-mist); box-shadow: 4px 4px 0 0 var(--color-charcoal-mist); transition: transform .25s ease, box-shadow .25s ease; position: relative; } .resource-card:hover { transform: translate(-3px, -3px); box-shadow: 7px 7px 0 0 var(--theme-pop); color: var(--color-charcoal-mist); } .resource-card .resource-thumb-box { margin-bottom: .85rem; border-radius: var(--radius-3xl); } .resource-title { font-family: var(--font-ribeye); text-transform: uppercase; font-size: 1.05rem; letter-spacing: -0.01em; margin: 0 0 .35rem; display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; } .resource-title svg { flex-shrink: 0; width: 14px; height: 14px; color: var(--theme-pop); margin-top: .2rem; } .resource-desc { font-family: var(--font-grotesk); font-size: .9rem; line-height: 1.45; color: rgba(58, 31, 71, .8); margin: 0; } /* Newsletter callout */ .resources-newsletter { margin-top: 2.5rem; background: var(--color-charcoal-mist); color: #fff; border-radius: var(--radius-4xl); padding: 2rem 1.5rem; text-align: center; border: 2px solid var(--color-charcoal-mist); box-shadow: 6px 6px 0 0 var(--theme-pop); } @media (min-width: 768px) { .resources-newsletter { padding: 2.5rem 2rem; } } .resources-newsletter h3 { font-family: var(--font-ribeye); text-transform: uppercase; font-size: clamp(1.5rem, 3vw + .25rem, 2.25rem); letter-spacing: -0.01em; color: #fff; margin: 0 0 .5rem; } .resources-newsletter p { font-family: var(--font-grotesk); color: rgba(255,255,255,.8); margin: 0 0 1.25rem; } .resources-newsletter form { display: flex; flex-direction: column; gap: .65rem; max-width: 480px; margin: 0 auto; } @media (min-width: 540px) { .resources-newsletter form { flex-direction: row; } } .resources-newsletter input { flex: 1; padding: .9rem 1.25rem; border-radius: 9999px; border: 2px solid rgba(255,255,255,.25); background: rgba(255,255,255,.1); font-family: var(--font-grotesk); font-size: .95rem; color: #fff; outline: none; min-width: 0; } .resources-newsletter input::placeholder { color: rgba(255,255,255,.55); } .resources-newsletter input:focus { border-color: var(--theme-pop); background: rgba(255,255,255,.15); } .resources-newsletter button { background: var(--theme-pop); color: #fff; border: none; padding: .9rem 1.75rem; border-radius: 9999px; font-family: var(--font-syne); font-weight: 700; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; transition: background .25s ease, transform .25s ease; } .resources-newsletter button:hover { background: #1e9d6c; transform: translateY(-1px); } body.theme-knows .closing-cta .orb-a { background: var(--theme-pop); opacity: .25; } /* ===================================================================== 27. She Grows — page-themed accents (blue) ===================================================================== */ body.theme-grows .hero-eyebrow { background: var(--color-sky-glow); } /* Nudge sparkle out of the eyebrow's path on She Grows */ body.theme-grows .doodle-sparkle--a { top: 4%; left: 2%; } body.theme-grows .doodle-streamer { top: 4%; right: 42%; } body.theme-grows .hero .orb-a { background: var(--color-sky-glow); opacity: .65; } body.theme-grows .hero .orb-b { background: #3aa9e8; opacity: .20; } body.theme-grows .page-bg { background: radial-gradient(120% 80% at 15% -10%, rgba(197, 234, 252, .65), transparent 55%), radial-gradient(110% 70% at 90% 110%, rgba(58, 169, 232, .20), transparent 55%), radial-gradient(80% 60% at 85% 25%, rgba(255, 214, 228, .35), transparent 60%), radial-gradient(70% 50% at 8% 75%, rgba(200, 249, 233, .45), transparent 60%), var(--color-cream-cloud); } body.theme-grows .page-bg-orb.orb-pink { background: var(--color-blush-dream); opacity: .60; } body.theme-grows .page-bg-orb.orb-sky { background: rgba(58, 169, 232, .50); } body.theme-grows .page-bg-orb.orb-mint { background: var(--color-mint-cloud); opacity: .55; } body.theme-grows .page-bg-orb.orb-lavender { background: var(--color-lavender-haze); opacity: .50; } /* She Grows / She Shares — multi-color accents on cards & section heads */ body.theme-grows .share-section .section-head .eyebrow, body.theme-shares .share-section .section-head .eyebrow { color: var(--theme-pop); } body.theme-grows .stories-section .section-head .eyebrow, body.theme-grows .stories-grid + .section-head .eyebrow, body.theme-shares .stories-section .section-head .eyebrow, body.theme-shares .stories-grid + .section-head .eyebrow { color: var(--theme-pop); } /* Story cards rotate shadow accent — pink, mint, lavender, sky */ body.theme-grows .stories-grid > .story-card:nth-child(4n+1), body.theme-shares .stories-grid > .story-card:nth-child(4n+1) { box-shadow: 5px 5px 0 0 var(--color-bubblegum-pop); } body.theme-grows .stories-grid > .story-card:nth-child(4n+2), body.theme-shares .stories-grid > .story-card:nth-child(4n+2) { box-shadow: 5px 5px 0 0 #2fbf8a; } body.theme-grows .stories-grid > .story-card:nth-child(4n+3), body.theme-shares .stories-grid > .story-card:nth-child(4n+3) { box-shadow: 5px 5px 0 0 #a47cf3; } body.theme-grows .stories-grid > .story-card:nth-child(4n+4), body.theme-shares .stories-grid > .story-card:nth-child(4n+4) { box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); } body.theme-grows .stories-grid > .story-card:hover, body.theme-shares .stories-grid > .story-card:hover { box-shadow: 8px 8px 0 0 var(--theme-pop); } /* Hero event cards rotate sky-pop accent — kept subtle */ body.theme-grows .hero-event:nth-child(3n+1) .hero-event-date { background: var(--color-blush-dream); } body.theme-grows .hero-event:nth-child(3n+2) .hero-event-date { background: var(--color-mint-cloud); } body.theme-grows .hero-event:nth-child(3n+3) .hero-event-date { background: var(--color-lavender-haze); } /* Theme-aware outline button — picks up per-page accent */ body.theme-flows .btn-outline, body.theme-knows .btn-outline, body.theme-grows .btn-outline, body.theme-shares .btn-outline, body.theme-glows .btn-outline { box-shadow: 5px 5px 0 0 var(--theme-pop); } body.theme-flows .btn-outline:hover, body.theme-knows .btn-outline:hover, body.theme-grows .btn-outline:hover, body.theme-shares .btn-outline:hover, body.theme-glows .btn-outline:hover { color: var(--theme-pop); border-color: var(--theme-pop); box-shadow: 8px 8px 0 0 var(--theme-pop); } /* ===================================================================== 27b. She Shares — page-themed accents (yellow) ===================================================================== */ body.theme-shares .hero-eyebrow { background: #fef3c7; } body.theme-shares .doodle-sparkle--a { top: 4%; left: 2%; color: #f0b400; } body.theme-shares .doodle-sparkle--b { color: #f0b400; } body.theme-shares .doodle-streamer { top: 4%; right: 42%; color: #f0b400; } body.theme-shares .doodle-squiggle { color: #f0b400; } body.theme-shares .hero .orb-a { background: #ffe69a; opacity: .75; } body.theme-shares .hero .orb-b { background: #f0b400; opacity: .22; } body.theme-shares .page-bg { background: radial-gradient(120% 80% at 15% -10%, rgba(255, 240, 195, .55), transparent 55%), radial-gradient(110% 70% at 90% 110%, rgba(240, 180, 0, .12), transparent 55%), radial-gradient(80% 60% at 85% 25%, rgba(255, 222, 232, .25), transparent 60%), radial-gradient(70% 50% at 8% 75%, rgba(255, 250, 220, .5), transparent 60%), var(--color-cream-cloud); } body.theme-shares .page-bg-orb.orb-pink { background: var(--color-blush-dream); opacity: .45; } body.theme-shares .page-bg-orb.orb-sky { background: #fff1bf; opacity: .55; } body.theme-shares .page-bg-orb.orb-mint { background: #fff7d4; opacity: .50; } body.theme-shares .page-bg-orb.orb-lavender { background: rgba(240, 180, 0, .18); } /* Hero share panel accent on She Shares */ body.theme-shares .hero-share-stat-num { color: var(--theme-pop-dark); } /* Closing CTA on She Shares */ body.theme-shares .closing-cta .btn-primary { border-color: #fff; box-shadow: 12px 12px 0 0 var(--theme-pop-soft); } body.theme-shares .closing-cta .orb-a { background: var(--theme-pop); opacity: .25; } body.theme-shares .closing-cta .orb-b { background: #ffe69a; opacity: .55; } /* Closing CTA — theme-aware */ body.theme-grows .closing-cta .btn-primary { border-color: #fff; box-shadow: 12px 12px 0 0 var(--theme-pop-soft); } body.theme-grows .closing-cta .orb-a { background: var(--theme-pop); opacity: .25; } body.theme-grows .closing-cta .orb-b { background: var(--color-sky-glow); opacity: .55; } /* Hero share panel — She Shares hero sidebar (mirrors Ask Mysa box width) */ .hero-share { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); box-shadow: 8px 8px 0 0 var(--theme-pop, #3aa9e8); padding: 1.75rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: none; margin: 0; } body.theme-grows .hero-share, body.theme-shares .hero-share { padding: 1.75rem; gap: 1.1rem; } body.theme-shares .hero-media { display: flex; } @media (min-width: 1024px) { body.theme-grows .hero-share, body.theme-shares .hero-share { flex: 1; min-height: 40.5rem; } body.theme-shares .hero-media { align-self: stretch; } } .hero-share-meta { font-family: var(--font-grotesk); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(58, 31, 71, .65); margin: 0; } .hero-share-meta strong { color: var(--theme-pop, #3aa9e8); font-weight: 700; } .hero-share-head { display: flex; flex-direction: column; gap: .25rem; padding-bottom: .75rem; border-bottom: 1px dashed rgba(58, 31, 71, .18); } .hero-share-eyebrow { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); } .hero-share-title { font-family: var(--font-ribeye); text-transform: uppercase; font-size: 1.6rem; letter-spacing: -0.01em; margin: 0; color: var(--color-charcoal-mist); } .hero-share-desc { font-family: var(--font-grotesk); font-size: .95rem; line-height: 1.5; color: rgba(58, 31, 71, .82); margin: 0; } .hero-share-stats { list-style: none; margin: .25rem 0 .5rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; text-align: center; } .hero-share-stats li { display: flex; flex-direction: column; gap: .15rem; padding: .65rem .25rem; background: var(--color-cream-cloud); border-radius: var(--radius-2xl); border: 1px dashed rgba(58, 31, 71, .18); } .hero-share-stat-num { font-family: var(--font-ribeye); font-size: 1.15rem; color: var(--theme-pop, #3aa9e8); letter-spacing: -0.01em; } .hero-share-stat-label { font-family: var(--font-grotesk); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: rgba(58, 31, 71, .7); } .hero-share-cta { align-self: flex-start; } /* Hero events panel — events sidebar on She Grows */ .hero-events { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); box-shadow: 8px 8px 0 0 var(--theme-pop, #3aa9e8); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; width: 100%; max-width: 460px; margin-left: auto; } .hero-events-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding-bottom: .75rem; border-bottom: 1px dashed rgba(58, 31, 71, .18); } .hero-events-eyebrow { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); } .hero-events-title { font-family: var(--font-ui); font-weight: 700; font-size: 1.05rem; margin: .15rem 0 0; color: var(--color-charcoal-mist); } .hero-events-link { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); text-decoration: none; white-space: nowrap; } .hero-events-link:hover { text-decoration: underline; } .hero-events-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; } .hero-event { display: grid; grid-template-columns: 56px 1fr auto; gap: .9rem; align-items: center; padding: .65rem; border-radius: 1rem; background: linear-gradient(135deg, #fff 0%, #fff 60%, var(--theme-pop-soft, rgba(58,169,232,.14)) 100%); border: 1px solid rgba(58, 31, 71, .10); transition: transform .2s ease, box-shadow .2s ease; } .hero-event:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 0 var(--theme-pop, #3aa9e8); } .hero-event-date { display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--color-sky-glow); border: 1.5px solid var(--color-charcoal-mist); border-radius: .75rem; padding: .35rem .25rem; width: 56px; } .hero-event-month { font-family: var(--font-syne); font-weight: 700; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; color: var(--color-charcoal-mist); line-height: 1; } .hero-event-day { font-family: var(--font-syne); font-weight: 800; font-size: 1.4rem; line-height: 1; color: var(--color-charcoal-mist); } .hero-event-body { min-width: 0; } .hero-event-title { font-family: var(--font-ui); font-weight: 600; font-size: .95rem; line-height: 1.2; color: var(--color-charcoal-mist); margin: 0 0 .15rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .hero-event-meta { font-family: var(--font-ui); font-size: .75rem; color: rgba(58, 31, 71, .65); margin: 0; } .hero-event-rsvp { font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; background: var(--theme-pop, #3aa9e8); color: #fff; border: 1.5px solid var(--color-charcoal-mist); border-radius: 999px; padding: .45rem .85rem; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; } .hero-event-rsvp:hover { transform: translateY(-1px); background: #1f7fbf; box-shadow: 2px 2px 0 0 var(--color-charcoal-mist); } /* ===================================================================== 28. She Grows — events card sizing in hero right column Mirrors theme-asks .ask-box layout: fills full column width, stretches to match hero-copy column height, content distributes to fill space. ===================================================================== */ body.theme-grows .hero-media { display: flex; } body.theme-grows .hero-events { margin: 0; max-width: none; width: 100%; padding: 1.75rem; gap: 1.1rem; } @media (min-width: 1024px) { body.theme-grows .hero-media { align-self: stretch; } body.theme-grows .hero-events { flex: 1; min-height: 40.5rem; } body.theme-grows .hero-events-list { flex: 1; } body.theme-grows .hero-event { flex: 1; } } body.theme-grows .hero-events-list { gap: .85rem; } body.theme-grows .hero-events-head { padding-bottom: .85rem; } body.theme-grows .hero-events-title { font-size: 1.15rem; } body.theme-grows .hero-event { padding: 1.1rem; grid-template-columns: 64px 1fr auto; gap: 1rem; cursor: pointer; align-items: center; } body.theme-grows .hero-event-date { width: 64px; padding: .55rem .3rem; } body.theme-grows .hero-event-day { font-size: 1.65rem; } body.theme-grows .hero-event-title { font-size: 1.05rem; -webkit-line-clamp: 1; } body.theme-grows .hero-event-meta { font-size: .8rem; margin-bottom: .4rem; } body.theme-grows .hero-event-desc { font-family: var(--font-grotesk); font-size: .85rem; line-height: 1.45; color: rgba(58, 31, 71, .78); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } body.theme-grows .hero-event-rsvp { font-size: .72rem; padding: .5rem .9rem; } body.theme-grows .hero-event-rsvp.is-registered { background: var(--color-mint-cloud); color: var(--color-charcoal-mist); } .hero-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; margin-bottom: 1rem; } .hero-cta-row .btn-link { font-family: var(--font-syne); font-weight: 700; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); text-decoration: none; border-bottom: 2px solid transparent; padding-bottom: 2px; transition: border-color .2s ease, transform .2s ease; } .hero-cta-row .btn-link:hover { border-color: var(--theme-pop, #3aa9e8); transform: translateY(-1px); } .hero-stat-row { display: flex; flex-wrap: wrap; gap: .35rem .7rem; margin: .25rem 0 0; font-family: var(--font-ui); font-size: .8rem; color: rgba(58, 31, 71, .7); } .hero-stat-row strong { color: var(--theme-pop, #3aa9e8); font-weight: 700; } /* Events detail Register state + Add to calendar dropdown */ .events-large-detail-actions { position: relative; } #events-detail-register.is-registered { background: var(--color-mint-cloud); color: var(--color-charcoal-mist); border-color: var(--color-charcoal-mist); } .events-add-cal { position: relative; display: inline-block; } .events-add-cal-menu { position: absolute; top: calc(100% + .35rem); left: 0; list-style: none; margin: 0; padding: .35rem; background: #fff; border: 1.5px solid var(--color-charcoal-mist); border-radius: 14px; box-shadow: 4px 4px 0 0 var(--color-charcoal-mist); min-width: 200px; z-index: 10; } .events-add-cal-menu li { margin: 0; } .events-add-cal-menu button { display: block; width: 100%; text-align: left; background: transparent; border: 0; font-family: var(--font-ui); font-size: .9rem; color: var(--color-charcoal-mist); padding: .55rem .7rem; border-radius: 10px; cursor: pointer; } .events-add-cal-menu button:hover { background: rgba(58, 169, 232, .12); color: var(--theme-pop, #3aa9e8); } .events-cta-note { margin-top: .5rem; font-family: var(--font-ui); font-size: .8rem; color: rgba(58, 31, 71, .65); } #events-large-title.is-flash { color: var(--theme-pop, #3aa9e8); transition: color .2s ease; } .story-card-react.is-liked { color: var(--theme-pop, #3aa9e8); border-color: var(--theme-pop, #3aa9e8); background: rgba(58, 169, 232, .12); } /* ===================================================================== 29. Share-your-story form section ===================================================================== */ .share-section { padding: 4rem 0 5rem; position: relative; } @media (min-width: 768px) { .share-section { padding: 5rem 0 7rem; } } /* Share form sits on top of .contact-form — fills the section container, blue accent. */ .share-form.contact-form { width: 100%; max-width: none; box-shadow: 8px 8px 0 0 var(--theme-pop, #3aa9e8); } .share-form .chip input:checked + span { background: var(--theme-pop, #3aa9e8); } .share-form .chip input:focus-visible + span { outline-color: var(--theme-pop, #3aa9e8); } .share-form .chip--consent { align-self: flex-start; } .share-form .form-note { color: var(--theme-pop, #3aa9e8); } .share-form input:focus, .share-form textarea:focus, .share-form select:focus { border-color: var(--theme-pop, #3aa9e8) !important; box-shadow: 0 0 0 4px rgba(58, 169, 232, .18) !important; } .share-form select { width: 100%; font-family: var(--font-grotesk); font-size: 1rem; line-height: 1.4; color: var(--color-charcoal-mist); background: #fff; border: 2px solid var(--border); border-radius: 14px; padding: .85rem 1rem; transition: border-color .2s ease, box-shadow .2s ease; } /* ===================================================================== 30. Stories wall — search, filters, preview cards ===================================================================== */ .stories-section { padding: 3rem 0 5rem; position: relative; } @media (min-width: 768px) { .stories-section { padding: 4rem 0 7rem; } } .stories-controls { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2rem; } @media (min-width: 768px) { .stories-controls { flex-direction: row; align-items: center; justify-content: space-between; gap: 1.5rem; } } .stories-search { position: relative; flex: 0 0 auto; width: 100%; max-width: 360px; } .stories-search input { width: 100%; padding: .8rem 2.5rem .8rem 2.75rem; font-family: var(--font-ui); font-size: .95rem; color: var(--color-charcoal-mist); background: #fff; border: 1.5px solid var(--color-charcoal-mist); border-radius: 999px; transition: box-shadow .2s ease; } .stories-search input:focus { outline: none; box-shadow: 0 0 0 3px rgba(58, 169, 232, .25); } .stories-search-icon { position: absolute; top: 50%; left: 1rem; transform: translateY(-50%); width: 18px; height: 18px; color: rgba(58, 31, 71, .5); pointer-events: none; } .stories-filter { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; } .stories-filter-btn { --chip-color: #3aa9e8; font-family: var(--font-syne); font-weight: 700; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: .45rem .9rem; border-radius: 999px; border: 1.5px solid var(--chip-color); background: #fff; color: var(--chip-color); cursor: pointer; transition: all .2s ease; } .stories-filter-btn:hover { background: var(--chip-color); color: #fff; transform: translateY(-1px); box-shadow: 0 2px 0 rgba(0,0,0,.15); } .stories-filter-btn.is-active { background: var(--chip-color); color: #fff; border-color: var(--color-charcoal-mist); box-shadow: 2px 2px 0 rgba(0,0,0,.18); } /* Per-tag yellow shades — She Shares theme */ .stories-filter-btn[data-filter="all"] { --chip-color: #b08200; } .stories-filter-btn[data-filter="first-period"] { --chip-color: #f0b400; } .stories-filter-btn[data-filter="cramps"] { --chip-color: #d49a00; } .stories-filter-btn[data-filter="leaks"] { --chip-color: #e9aa00; } .stories-filter-btn[data-filter="body-image"] { --chip-color: #c79300; } .stories-filter-btn[data-filter="moods"] { --chip-color: #f4c430; } .stories-filter-btn[data-filter="confidence"] { --chip-color: #a87b00; } /* ----- 3-row column-flow grid: max 3x3 visible, overflow scrolls horizontally ----- */ .stories-grid { list-style: none; margin: 0 -1rem; padding: 1rem 1rem 1.5rem; display: grid; grid-template-columns: none; grid-template-rows: repeat(3, minmax(220px, auto)); grid-auto-flow: column; grid-auto-columns: 86%; gap: 1rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; scroll-padding-left: 1rem; } .stories-grid::-webkit-scrollbar { display: none; } .stories-grid > .story-card { scroll-snap-align: start; min-width: 0; } @media (min-width: 640px) { .stories-grid { grid-auto-columns: 46%; gap: 1.25rem; } } @media (min-width: 1024px) { .stories-grid { margin: 0; padding: 1rem 0 1.5rem; grid-auto-columns: calc((100% - 2.5rem) / 3); gap: 1.25rem; } } /* Scroll-right hint: peek arrow that pulses when there's overflow */ .stories-grid-wrap { position: relative; } .stories-scroll-hint { position: absolute; top: 50%; right: -.5rem; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9999px; background: var(--theme-pop, #3aa9e8); color: #fff; display: grid; place-items: center; pointer-events: none; z-index: 4; box-shadow: 3px 3px 0 rgba(0,0,0,.15); animation: stories-scroll-hint-pulse 1.6s ease-in-out infinite; opacity: .92; } .stories-scroll-hint svg { width: 18px; height: 18px; } .stories-grid-wrap.is-end .stories-scroll-hint { opacity: 0; transition: opacity .25s ease; } @keyframes stories-scroll-hint-pulse { 0%, 100% { transform: translate(0, -50%); } 50% { transform: translate(6px, -50%); } } @media (prefers-reduced-motion: reduce) { .stories-scroll-hint { animation: none; } } .story-card { display: flex; flex-direction: column; gap: .85rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 1.5rem; padding: 1.4rem 1.3rem 1.2rem; box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); transition: transform .25s ease, box-shadow .25s ease; cursor: pointer; text-align: left; } .story-card:hover { transform: translate(-3px, -3px); box-shadow: 8px 8px 0 0 var(--theme-pop, #3aa9e8); } .story-card[hidden] { display: none; } .story-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-family: var(--font-syne); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; } .story-card-author { font-weight: 700; color: var(--theme-pop, #3aa9e8); } .story-card-meta { color: rgba(58, 31, 71, .55); font-weight: 600; } .story-card-title { font-family: var(--font-syne); font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; color: var(--color-charcoal-mist); margin: 0; } .story-card-body { font-family: var(--font-ui); font-size: .92rem; line-height: 1.5; color: rgba(58, 31, 71, .75); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .story-card-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .story-card-tag { display: inline-block; font-family: var(--font-ui); font-size: .72rem; padding: .2rem .6rem; border-radius: 999px; background: rgba(58, 169, 232, .12); color: var(--theme-pop, #3aa9e8); font-weight: 600; } .story-card-foot { display: flex; align-items: center; justify-content: space-between; padding-top: .65rem; border-top: 1px dashed rgba(58, 31, 71, .12); margin-top: auto; } .story-card-react { display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; background: transparent; border: none; color: var(--color-charcoal-mist); cursor: pointer; padding: 0; } .story-card-react span:first-child { color: var(--theme-pop, #3aa9e8); font-size: 1rem; } .story-card-read { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); text-decoration: none; } .story-card-read:hover { text-decoration: underline; } .stories-empty { text-align: center; font-family: var(--font-ui); color: rgba(58, 31, 71, .55); padding: 2rem 0; } .stories-loadmore { text-align: center; margin-top: 2.5rem; } /* ===================================================================== 31. Story article — opens full-page when a card is clicked ===================================================================== */ .story-modal { position: fixed; inset: 0; z-index: 60; display: none; background: var(--color-cream-cloud); overflow-y: auto; -webkit-overflow-scrolling: touch; } .story-modal.is-open { display: block; } body.is-article-open { overflow: hidden; } .story-modal-backdrop { display: none; } .story-modal-card { position: relative; z-index: 1; background: transparent; border: 0; border-radius: 0; box-shadow: none; max-width: 760px; width: 100%; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } @media (min-width: 768px) { .story-modal-card { padding: 2.5rem 2rem 6rem; } } @media (min-width: 1024px) { .story-modal-card { padding: 3.5rem 2rem 7rem; } } .story-modal-close { position: sticky; top: 1rem; display: inline-flex; align-items: center; gap: .5rem; width: auto; height: auto; padding: .55rem 1rem .55rem .85rem; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); background: #fff; font-family: var(--font-syne); font-weight: 700; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--color-charcoal-mist); cursor: pointer; margin: 0 0 1.75rem; box-shadow: 4px 4px 0 0 var(--theme-pop, #3aa9e8); transition: transform .2s ease, box-shadow .2s ease; } .story-modal-close::before { content: "←"; font-size: 1rem; line-height: 1; } .story-modal-close:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--theme-pop, #3aa9e8); } .story-modal-meta { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); margin-bottom: .75rem; } .story-modal-title { font-family: var(--font-ribeye); font-weight: 700; font-size: clamp(2rem, 4.5vw + .25rem, 3.5rem); line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase; color: var(--color-charcoal-mist); margin: 0 0 1.75rem; } .story-modal-body { font-family: var(--font-ui); font-size: 1.1rem; line-height: 1.7; color: var(--color-charcoal-mist); } .story-modal-body p { margin: 0 0 1.25rem; } .story-modal-body p:last-child { margin-bottom: 0; } .story-modal-tags { list-style: none; margin: 2.25rem 0 0; padding: 1.5rem 0 0; border-top: 1px dashed rgba(58, 31, 71, .15); display: flex; flex-wrap: wrap; gap: .4rem; } /* ===================================================================== 32. Mysa Live — LARGE calendar with event pins on day cells ===================================================================== */ .events-section { padding: 3rem 0 5rem; } @media (min-width: 768px) { .events-section { padding: 4rem 0 7rem; } } .events-large { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); box-shadow: 8px 8px 0 0 var(--theme-pop, #3aa9e8); padding: 1.5rem; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 1024px) { .events-large { grid-template-columns: minmax(0, 1.8fr) minmax(280px, 1fr); padding: 2rem; gap: 2rem; } } .events-large-cal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .events-large-title { font-family: var(--font-syne); font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; color: var(--color-charcoal-mist); margin: 0; } .events-large-nav { display: flex; gap: .5rem; } .events-large-nav button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--color-charcoal-mist); background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--color-charcoal-mist); transition: background .2s ease; } .events-large-nav button:hover { background: var(--color-sky-glow); } .events-large-weekdays { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); gap: .25rem; margin: 0 0 .5rem; padding: 0; } .events-large-weekdays li { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; color: rgba(58, 31, 71, .55); padding: .35rem 0; } .events-large-grid { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(86px, 1fr); gap: .35rem; margin: 0; padding: 0; } @media (min-width: 768px) { .events-large-grid { grid-auto-rows: minmax(100px, 1fr); } } .events-large-day { position: relative; border: 1px solid rgba(58, 31, 71, .12); border-radius: 12px; padding: .4rem .45rem; background: #fff; display: flex; flex-direction: column; gap: .25rem; min-height: 0; transition: border-color .2s ease, background .2s ease; } .events-large-day.is-empty { border: 1px dashed rgba(58, 31, 71, .08); background: transparent; } .events-large-day.is-today { border-color: var(--theme-pop, #3aa9e8); background: rgba(197, 234, 252, .25); } .events-large-day-num { font-family: var(--font-syne); font-weight: 700; font-size: .85rem; color: var(--color-charcoal-mist); } .events-large-day.is-today .events-large-day-num { color: var(--theme-pop, #3aa9e8); } .events-large-pin { display: block; width: 100%; text-align: left; padding: .25rem .4rem; border-radius: 6px; border: none; background: var(--theme-pop, #3aa9e8); color: #fff; font-family: var(--font-ui); font-weight: 600; font-size: .7rem; line-height: 1.15; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform .15s ease, background .15s ease; } .events-large-pin:hover { transform: translateY(-1px); background: #1f7fbf; } .events-large-pin.is-selected { outline: 2px solid var(--color-charcoal-mist); outline-offset: 1px; } .events-large-pin--workshop { background: #2fbf8a; } .events-large-pin--workshop:hover { background: #1e9d6c; } .events-large-pin--panel { background: #a47cf3; } .events-large-pin--panel:hover { background: #7e54d4; } .events-large-pin--circle { background: #f655a6; } .events-large-pin--circle:hover { background: #d8478e; } /* Side panel: selected event details */ .events-large-detail { background: linear-gradient(135deg, #fff 0%, #fff 60%, var(--theme-pop-soft, rgba(58,169,232,.14)) 100%); border: 1.5px solid rgba(58, 31, 71, .12); border-radius: 1.25rem; padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; } .events-large-detail-tag { align-self: flex-start; display: inline-block; font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 999px; background: var(--theme-pop, #3aa9e8); color: #fff; } .events-large-detail-title { font-family: var(--font-syne); font-weight: 800; font-size: 1.25rem; line-height: 1.2; letter-spacing: -.01em; color: var(--color-charcoal-mist); margin: 0; } .events-large-detail-meta { font-family: var(--font-ui); font-size: .85rem; color: rgba(58, 31, 71, .65); margin: 0; } .events-large-detail-host { font-family: var(--font-ui); font-size: .9rem; color: var(--color-charcoal-mist); margin: 0; font-weight: 600; } .events-large-detail-desc { font-family: var(--font-ui); font-size: .92rem; line-height: 1.55; color: rgba(58, 31, 71, .8); margin: 0; } .events-large-detail-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .25rem; } .events-large-detail-actions .btn { padding: .65rem 1.1rem; font-size: .8rem; } .events-legend { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; font-family: var(--font-ui); font-size: .8rem; color: rgba(58, 31, 71, .65); } .events-legend-item { display: inline-flex; align-items: center; gap: .4rem; } .events-legend-swatch { width: 12px; height: 12px; border-radius: 4px; display: inline-block; } .events-legend-swatch--qa { background: var(--theme-pop, #3aa9e8); } .events-legend-swatch--workshop { background: #2fbf8a; } .events-legend-swatch--panel { background: #a47cf3; } .events-legend-swatch--circle { background: #f655a6; } .events-cta { margin-top: 2.25rem; display: flex; flex-direction: column; align-items: center; gap: .75rem; text-align: center; } .events-cta p { font-family: var(--font-ui); color: rgba(58, 31, 71, .8); margin: 0; } /* ===================================================================== 33. World map — pins, tooltip, detail panel, stat ===================================================================== */ .worldmap-section { padding: 3rem 0 5rem; } @media (min-width: 768px) { .worldmap-section { padding: 4rem 0 7rem; } } .worldmap-stage { position: relative; background: var(--color-cream-cloud, #fdf6ef); border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); box-shadow: 8px 8px 0 0 var(--theme-pop, #3aa9e8); padding: 1rem; overflow: hidden; } .worldmap-svg, .worldmap-img { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 500; border-radius: 1.25rem; background: linear-gradient(135deg, rgba(197, 234, 252, .55), rgba(58, 169, 232, .18)); border: 1.5px solid rgba(58, 31, 71, .12); } .worldmap-img { object-fit: cover; aspect-ratio: auto; } .worldmap-svg .worldmap-land path { transition: fill .25s ease; } .worldmap-stage { position: relative; } .map-pin { position: absolute; background: transparent; border: none; padding: 0; cursor: pointer; transform: translate(-50%, -50%); z-index: 2; } .map-pin-dot { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--theme-pop, #3aa9e8); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--color-charcoal-mist), 0 0 0 6px rgba(58, 169, 232, .25); transition: transform .2s ease, box-shadow .2s ease; } .map-pin:hover .map-pin-dot, .map-pin.is-active .map-pin-dot { transform: scale(1.25); box-shadow: 0 0 0 2px var(--color-charcoal-mist), 0 0 0 10px rgba(58, 169, 232, .35); } .map-pin-tooltip { position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); min-width: 180px; max-width: 240px; background: #fff; border: 1.5px solid var(--color-charcoal-mist); border-radius: 12px; padding: .55rem .75rem; box-shadow: 4px 4px 0 0 var(--color-charcoal-mist); text-align: left; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .map-pin:hover .map-pin-tooltip, .map-pin:focus-visible .map-pin-tooltip { opacity: 1; transform: translateX(-50%) translateY(-2px); } .map-pin-place { display: block; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); margin-bottom: .15rem; } .map-pin-snippet { display: block; font-family: var(--font-ui); font-size: .8rem; line-height: 1.35; color: var(--color-charcoal-mist); } .worldmap-detail { margin-top: 1.5rem; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 1.5rem; box-shadow: 5px 5px 0 0 var(--theme-pop, #3aa9e8); padding: 1.5rem 1.5rem 1.4rem; position: relative; display: flex; flex-direction: column; gap: .6rem; } .worldmap-detail-eyebrow { font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); } .worldmap-detail h3 { font-family: var(--font-syne); font-weight: 800; font-size: 1.35rem; letter-spacing: -.01em; color: var(--color-charcoal-mist); margin: 0; } .worldmap-detail p { font-family: var(--font-ui); font-size: .95rem; line-height: 1.55; color: rgba(58, 31, 71, .8); margin: 0; } .worldmap-detail-link { align-self: flex-start; font-family: var(--font-syne); font-weight: 700; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); text-decoration: none; margin-top: .3rem; } .worldmap-detail-link:hover { text-decoration: underline; } .worldmap-detail-quote { margin: .25rem 0 .5rem; padding: .85rem 1rem; border-left: 4px solid var(--theme-pop, #3aa9e8); background: rgba(58, 169, 232, .08); border-radius: 0 14px 14px 0; font-family: var(--font-lora, "Lora", serif); font-style: italic; font-size: 1.05rem; line-height: 1.45; color: var(--color-charcoal-mist); } .worldmap-detail-section { display: flex; flex-direction: column; gap: .3rem; } .worldmap-detail-section-label { font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--theme-pop, #3aa9e8); } .worldmap-detail-section p { margin: 0; } .worldmap-detail-resources { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; } .worldmap-detail-resources a { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border: 1.5px solid var(--theme-pop, #3aa9e8); border-radius: 9999px; background: rgba(58, 169, 232, .12); font-family: var(--font-ui); font-size: .82rem; color: var(--color-charcoal-mist); text-decoration: none; transition: background .2s ease, color .2s ease, transform .2s ease; } .worldmap-detail-resources a:hover { background: var(--theme-pop, #3aa9e8); color: #fff; transform: translate(-1px, -1px); } .worldmap-detail-close { position: absolute; top: .9rem; right: 1rem; width: 32px; height: 32px; border-radius: 50%; border: 1.5px solid var(--color-charcoal-mist); background: #fff; cursor: pointer; font-size: 1.1rem; color: var(--color-charcoal-mist); } .worldmap-stat { text-align: center; margin-top: 1.5rem; font-family: var(--font-ui); color: rgba(58, 31, 71, .7); font-size: .95rem; } .worldmap-stat span { font-weight: 700; color: var(--theme-pop, #3aa9e8); } /* ===================================================================== 28. She Glows — page (purple theme, scoped via body.theme-glows) ===================================================================== */ body.theme-glows { --glow: #a47cf3; --glow-dark: #7b54d6; --glow-tint: #f1ebff; --theme-pop: var(--glow); --theme-pop-soft: rgba(164, 124, 243, .14); --theme-pop-dark: var(--glow-dark); } body.theme-glows .shes-tab--glows { --tab-color: var(--glow); --tab-color-soft: rgba(164, 124, 243, .14); } body.theme-glows .hero-eyebrow { background: var(--glow-tint); } body.theme-glows .hero .orb-a { background: var(--glow-tint); opacity: 1; } body.theme-glows .hero .orb-b { background: var(--glow); opacity: .22; } body.theme-glows .page-bg { background: radial-gradient(120% 80% at 15% -10%, rgba(164, 124, 243, .32), transparent 55%), radial-gradient(110% 70% at 90% 110%, rgba(123, 84, 214, .18), transparent 55%), radial-gradient(80% 60% at 85% 25%, rgba(228, 214, 255, .55), transparent 60%), radial-gradient(70% 50% at 8% 75%, rgba(241, 235, 255, .9), transparent 60%), var(--color-cream-cloud); } body.theme-glows .page-bg-orb.orb-pink { background: var(--glow); opacity: .35; } body.theme-glows .page-bg-orb.orb-sky { background: var(--color-lavender-haze); opacity: .55; } body.theme-glows .page-bg-orb.orb-mint { background: var(--glow-tint); opacity: .8; } body.theme-glows .page-bg-orb.orb-lavender { background: var(--color-lavender-haze); opacity: .45; } /* ---------- Hero ---------- */ .glows-hero-discount { margin: 1.5rem 0 0; padding: 0; font-family: var(--font-grotesk); font-weight: 500; font-size: .92rem; letter-spacing: 0; text-transform: none; color: rgba(58, 31, 71, .8); background: none; border: none; border-radius: 0; display: block; text-align: center; } .glows-hero-discount code { display: inline-block; font-family: var(--font-syne); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--glow-dark); background: var(--glow-tint); border: 1.5px dashed var(--glow); padding: .12rem .6rem; border-radius: 9999px; margin-left: .35rem; vertical-align: 1px; } .glows-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.25rem; } .glows-hero-link { font-family: var(--font-syne); font-weight: 700; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em; color: var(--glow-dark); border-bottom: 2px solid transparent; padding-bottom: .15rem; transition: color .2s ease, border-color .2s ease; } .glows-hero-link:hover { color: var(--glow-dark); border-bottom-color: var(--glow-dark); } /* Featured product card (right side of hero) */ .glows-feature-card { position: relative; width: 100%; max-width: 460px; margin: 0 0 0 auto; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); padding: 1.5rem; box-shadow: 8px 8px 0 0 var(--glow); } @media (min-width: 768px) { .glows-feature-card { padding: 2.25rem; } } .glows-feature-tag { position: absolute; top: -.85rem; left: 1.5rem; background: var(--color-charcoal-mist); color: #fff; font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 9999px; } .glows-feature-img { background: var(--glow-tint); border: 1.5px solid rgba(58, 31, 71, .12); border-radius: var(--radius-3xl); aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 1.25rem; display: grid; place-items: center; } .glows-feature-img img { width: 100%; height: 100%; object-fit: contain; padding: 1rem; } .glows-feature-brand { font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--glow-dark); margin-bottom: .35rem; } .glows-feature-name { font-family: var(--font-syne); font-weight: 700; font-size: clamp(1.5rem, 2vw + .5rem, 2rem); text-transform: none; letter-spacing: -0.005em; line-height: 1.1; color: var(--color-charcoal-mist); margin: 0 0 .85rem; } .glows-feature-desc { font-family: var(--font-grotesk); color: rgba(58, 31, 71, .85); margin: 0 0 1rem; line-height: 1.5; } .glows-feature-meta { display: grid; gap: .55rem; margin: 0 0 1.25rem; font-family: var(--font-grotesk); font-size: .9rem; } .glows-feature-meta dt { font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--color-charcoal-mist); } .glows-feature-meta dd { margin: 0; color: rgba(58, 31, 71, .85); } .glows-code-callout { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; background: #fff; border: 2px dashed var(--glow); border-radius: var(--radius-3xl); padding: .8rem 1.1rem; margin: 0 0 1.25rem; font-family: var(--font-grotesk); color: var(--color-charcoal-mist); } .glows-code-callout strong { font-family: var(--font-syne); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: var(--glow-tint); border: 1.5px solid var(--glow); color: var(--glow-dark); padding: .25rem .65rem; border-radius: 9999px; font-size: .82rem; } .glows-feature-card .btn { width: 100%; } /* ---------- Section heads (this page) ---------- */ .glows-section { padding: 3.5rem 0; } @media (min-width: 768px) { .glows-section { padding: 5rem 0; } } .glows-section-head { margin: 0 auto 2.5rem; text-align: center; max-width: 720px; } .glows-section-head h2 { font-family: var(--font-ribeye); font-weight: 700; font-size: clamp(1.85rem, 4vw + .5rem, 3rem); text-transform: uppercase; letter-spacing: -0.015em; line-height: 1; color: var(--color-charcoal-mist); margin: 0 0 .75rem; } .glows-section-head h2 .text-pop { color: var(--glow-dark); } .glows-section-head p { font-family: var(--font-grotesk); font-size: 1.05rem; line-height: 1.5; color: rgba(58, 31, 71, .8); margin: 0; } /* ---------- Endorsed grid (the top 7) ---------- */ .glows-endorsed-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .glows-endorsed-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .glows-endorsed-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .glows-endorsed-grid { grid-template-columns: repeat(4, 1fr); } } .glows-endorsed-card { position: relative; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); padding: 1.25rem; display: flex; flex-direction: column; gap: .85rem; box-shadow: 6px 6px 0 0 rgba(58, 31, 71, .12); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .glows-endorsed-card:hover { transform: translate(-3px, -3px); box-shadow: 9px 9px 0 0 var(--glow); border-color: var(--glow-dark); } .glows-endorsed-rank { position: absolute; top: .85rem; right: 1.1rem; font-family: var(--font-ribeye); font-size: 1.85rem; letter-spacing: -.02em; color: var(--glow-dark); line-height: 1; } /* ---------- Category grids (smaller cards) ---------- */ .glows-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 600px) { .glows-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .glows-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1200px) { .glows-grid { grid-template-columns: repeat(4, 1fr); } } /* Shared product card */ .glows-card { background: #fff; border: 2px solid rgba(58, 31, 71, .12); border-radius: var(--radius-3xl); padding: 1rem; display: flex; flex-direction: column; gap: .7rem; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .glows-card:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 0 var(--glow); border-color: var(--glow); } .glows-card-img { background: var(--glow-tint); border-radius: var(--radius-2xl); aspect-ratio: 1 / 1; overflow: hidden; display: grid; place-items: center; } .glows-card-img img { width: 100%; height: 100%; object-fit: contain; padding: .9rem; } .glows-card-brand { font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--glow-dark); } .glows-card-name { font-family: var(--font-syne); font-weight: 600; font-size: 1.15rem; text-transform: none; letter-spacing: -0.005em; line-height: 1.2; color: var(--color-charcoal-mist); margin: 0; } .glows-card-desc { font-family: var(--font-grotesk); font-size: .9rem; color: rgba(58, 31, 71, .82); line-height: 1.45; margin: 0; } .glows-card-for { font-family: var(--font-grotesk); font-size: .78rem; color: rgba(58, 31, 71, .65); margin: 0; padding: .35rem 0; border-top: 1px dashed rgba(58, 31, 71, .15); } .glows-card-for strong { font-family: var(--font-syne); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .68rem; color: var(--color-charcoal-mist); margin-right: .35rem; } .glows-card-cta { margin-top: auto; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--glow-dark); display: inline-flex; align-items: center; gap: .35rem; align-self: flex-start; border-bottom: 2px solid transparent; padding-bottom: .1rem; transition: color .2s ease, border-color .2s ease, gap .2s ease; } .glows-card-cta:hover { color: var(--glow-dark); border-bottom-color: var(--glow-dark); gap: .55rem; } /* ---------- Trust note ---------- */ .glows-trust { background: var(--glow-tint); border: 2px solid var(--glow); border-radius: var(--radius-3xl); padding: 1.25rem 1.75rem; text-align: center; max-width: 920px; margin: 0 auto 4rem; font-family: var(--font-grotesk); font-size: .9rem; line-height: 1.55; color: rgba(58, 31, 71, .9); box-shadow: 5px 5px 0 0 var(--glow); } .glows-trust strong { color: var(--glow-dark); font-weight: 700; } .glows-trust-line { display: block; } /* ---------- Filters — detached card under the discount strip ---------- */ .glows-filter { margin: 1.75rem 0 .75rem; } .glows-filter-card { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); padding: .9rem 1.1rem; box-shadow: 6px 6px 0 0 var(--glow); display: flex; flex-direction: column; gap: .55rem; } @media (min-width: 768px) { .glows-filter-card { padding: 1rem 1.25rem; } } .glows-filter-row { display: flex; align-items: center; gap: .75rem; } .glows-filter-row + .glows-filter-row { border-top: 1px dashed rgba(58, 31, 71, .15); padding-top: .65rem; } .glows-filter-label { flex: 0 0 auto; font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(58, 31, 71, .6); min-width: 3.5rem; } .glows-filter ul { list-style: none; margin: 0; padding: 0; display: flex; gap: .45rem; overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; flex: 1 1 auto; } .glows-filter ul::-webkit-scrollbar { display: none; } .glows-filter li { flex: 0 0 auto; } .glows-filter-chip { font-family: var(--font-syne); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-charcoal-mist); background: #fff; border: 2px solid rgba(58, 31, 71, .18); border-radius: 9999px; padding: .4rem .85rem; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease; } .glows-filter-chip:hover { border-color: var(--glow); color: var(--glow-dark); transform: translate(-1px, -1px); } .glows-filter-chip.is-active { background: var(--glow); color: #fff; border-color: var(--color-charcoal-mist); box-shadow: 3px 3px 0 0 var(--color-charcoal-mist); } .glows-filter-chip--sort.is-active { background: var(--glow-dark); } .glows-filter-chip:focus-visible { outline: 2px solid var(--glow-dark); outline-offset: 2px; } /* She Glows section heads inherit the universal .section-head style for cross-page consistency. */ /* ===================================================================== She Asks — page-themed accents (orange) + Ask Mysa hero ===================================================================== */ body.theme-asks { --asks-orange: #ff8c42; --asks-orange-soft: #ffe7d4; --asks-orange-dark: #d96a1f; --asks-orange-deeper: #b8520f; } /* Hero — orange accents to match other pages */ body.theme-asks .hero-eyebrow { background: var(--asks-orange-soft); color: var(--asks-orange-deeper); } body.theme-asks .hero .orb-a { background: var(--asks-orange-soft); opacity: .80; } body.theme-asks .hero .orb-b { background: var(--asks-orange); opacity: .18; } body.theme-asks .hero-media .frame, body.theme-asks .hero-carousel { box-shadow: 8px 8px 0 0 var(--asks-orange); } body.theme-asks .page-bg { background: radial-gradient(120% 80% at 15% -10%, rgba(255, 220, 190, .65), transparent 55%), radial-gradient(110% 70% at 90% 110%, rgba(255, 140, 66, .20), transparent 55%), radial-gradient(80% 60% at 80% 30%, rgba(255, 214, 228, .35), transparent 60%), radial-gradient(70% 50% at 5% 70%, rgba(255, 223, 128, .35), transparent 60%), var(--color-cream-cloud); } body.theme-asks .page-bg-orb.orb-pink { background: var(--color-blush-dream); opacity: .55; } body.theme-asks .page-bg-orb.orb-sky { background: rgba(255, 140, 66, .55); } body.theme-asks .page-bg-orb.orb-mint { background: var(--color-golden-ticket); opacity: .35; } body.theme-asks .page-bg-orb.orb-lavender { background: var(--color-blush-dream); opacity: .55; } /* She Asks — ask box fills full column width and matches carousel height */ body.theme-asks .hero-media--ask { display: flex; } body.theme-asks .hero-media--ask .ask-box { width: 100%; max-width: none; margin: 0; } @media (min-width: 1024px) { body.theme-asks .hero-media--ask { align-self: stretch; } body.theme-asks .hero-media--ask .ask-box { flex: 1; min-height: 40.5rem; } body.theme-asks .ask-box-answer { flex: 1; max-height: none; } body.theme-asks .ask-box-chips { flex-wrap: wrap; } } /* Ask box — embedded chat panel inside the hero right column */ .ask-box { width: 100%; max-width: 460px; margin-left: auto; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-4xl); box-shadow: 8px 8px 0 0 var(--asks-orange); padding: 1.25rem; display: flex; flex-direction: column; gap: 1rem; position: relative; overflow: hidden; transition: border-color .35s ease, box-shadow .35s ease, transform .35s ease; } .ask-box.is-highlighted { border: 3px solid var(--asks-orange-dark); box-shadow: 8px 8px 0 0 var(--asks-orange), 0 0 0 6px rgba(255, 140, 66, .22); transform: translate(-2px, -2px); } @media (min-width: 768px) { .ask-box { padding: 1.75rem; gap: 1.1rem; } } /* Top: input + Ask button */ .ask-box-form { display: flex; align-items: center; gap: .55rem; background: var(--asks-orange-soft); border: 1.5px solid var(--asks-orange); border-radius: 9999px; padding: .35rem .35rem .35rem 1.1rem; transition: box-shadow .25s ease, border-color .25s ease; } .ask-box-form:focus-within { border-color: var(--asks-orange-dark); box-shadow: 0 0 0 4px rgba(255, 140, 66, .18); } .ask-box-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-family: var(--font-ui); font-size: 1rem; color: var(--color-charcoal-mist); padding: .7rem .25rem; } .ask-box-input::placeholder { color: rgba(58, 31, 71, .42); } .ask-box-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: .35rem; padding: .65rem 1.1rem; background: var(--color-charcoal-mist); color: #fff; border: 0; border-radius: 9999px; font-family: var(--font-ui); font-weight: 600; font-size: .95rem; cursor: pointer; transition: background .2s ease, transform .2s ease; } .ask-box-btn:hover { background: var(--asks-orange-dark); transform: translateY(-1px); } .ask-box-btn:active { transform: translateY(0); } /* Chips row — wraps on desktop, scrolls on mobile */ .ask-box-chips-wrap { position: relative; margin: 0 -.25rem; } .ask-box-chips { list-style: none; display: flex; gap: .5rem; padding: .25rem; margin: 0; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .ask-box-chips::-webkit-scrollbar { display: none; } @media (min-width: 1024px) { .ask-box-chips { flex-wrap: wrap; overflow-x: visible; } } .ask-box-chips > li { scroll-snap-align: start; flex-shrink: 0; } .ask-chip { font-family: var(--font-ui); font-weight: 600; font-size: .92rem; color: var(--asks-orange-deeper); background: var(--asks-orange-soft); border: 1.5px solid transparent; border-radius: 9999px; padding: .55rem 1rem; cursor: pointer; white-space: nowrap; transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; line-height: 1.15; } .ask-chip:hover { background: var(--asks-orange); color: #fff; transform: translateY(-1px); } .ask-chip.is-active { background: var(--asks-orange); color: #fff; border-color: var(--asks-orange-dark); } /* Answer area */ .ask-box-answer { background: rgba(255, 231, 212, .35); border: 1px dashed var(--asks-orange); border-radius: 18px; padding: 1rem 1.1rem; font-family: var(--font-grotesk); color: var(--color-charcoal-mist); line-height: 1.65; max-height: 320px; overflow-y: auto; min-height: 110px; display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .ask-box-answer { padding: 1.25rem 1.4rem; min-height: 140px; max-height: 360px; } } .ask-box-placeholder { margin: 0; color: rgba(58, 31, 71, .55); font-style: italic; text-align: center; } .ask-box-qa { display: flex; flex-direction: column; gap: .65rem; max-width: 60ch; animation: ask-fade-in .35s ease-out both; } @keyframes ask-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ask-box-q { margin: 0; font-family: var(--font-ui); font-weight: 600; font-size: 1.05rem; color: var(--asks-orange-deeper); } .ask-box-q::before { content: "Q "; font-family: var(--font-ribeye); font-weight: 400; margin-right: .25rem; color: var(--asks-orange); } .ask-box-a { margin: 0; font-size: 1rem; line-height: 1.65; color: var(--color-charcoal-mist); } /* Ask page section-head + normal flip cards — orange theme */ body.theme-asks .normal-section .section-head .eyebrow { color: var(--asks-orange-dark); } /* All asks back cards: dark charcoal text on soft orange backgrounds for legibility */ body.theme-asks .normal-card-face.back { background: var(--asks-orange-soft); } body.theme-asks .normal-card-face.back p { color: var(--color-charcoal-mist); } body.theme-asks .normal-scroll > li:nth-child(3n+2) .normal-card-face { border-color: var(--asks-orange-dark); } body.theme-asks .normal-scroll > li:nth-child(3n+2) .normal-card-face.front { box-shadow: 3px 3px 0 0 var(--asks-orange-dark); } body.theme-asks .normal-scroll > li:nth-child(3n+2) .normal-card-face.back { background: #ffd9bd; } body.theme-asks .normal-scroll > li:nth-child(3n+2) .normal-flip-indicator { background: rgba(217, 106, 31, .14); color: var(--asks-orange-dark); } body.theme-asks .normal-scroll > li:nth-child(3n+3) .normal-card-face { border-color: #ffb37a; } body.theme-asks .normal-scroll > li:nth-child(3n+3) .normal-card-face.front { box-shadow: 3px 3px 0 0 #ffb37a; } body.theme-asks .normal-scroll > li:nth-child(3n+3) .normal-card-face.back { background: #ffe9d4; } body.theme-asks .normal-scroll > li:nth-child(3n+3) .normal-flip-indicator { background: rgba(255, 179, 122, .18); color: var(--asks-orange-dark); } /* ===================================================================== Age-range eyebrow pill (replaces "For girls ages 10 to 18") Black/white, identical look across all pages and themes. ===================================================================== */ .hero-age-pill { position: relative; display: inline-flex; align-items: center; background: var(--color-charcoal-mist); color: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; padding: 0; margin-bottom: 1.25rem; box-shadow: var(--shadow-pop-sm); font-family: var(--font-syne); font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .12em; transition: transform .2s ease, box-shadow .2s ease; } .hero-age-pill:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 0 var(--color-charcoal-mist); } .hero-age-pill::after { content: ""; position: absolute; right: 1rem; top: 50%; width: 7px; height: 7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: translateY(-70%) rotate(45deg); pointer-events: none; } .hero-age-pill select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; border: 0; padding: .4rem 2.4rem .4rem 1rem; margin: 0; font: inherit; color: #fff; letter-spacing: inherit; text-transform: inherit; cursor: pointer; outline: none; border-radius: 9999px; width: 100%; } .hero-age-pill select option { color: var(--color-charcoal-mist); background: #fff; text-transform: none; letter-spacing: 0; font-weight: 600; } .hero-age-pill select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } /* Override per-theme eyebrow background paints — pill stays charcoal everywhere */ body.theme-flows .hero-age-pill, body.theme-knows .hero-age-pill, body.theme-grows .hero-age-pill, body.theme-glows .hero-age-pill, body.theme-asks .hero-age-pill { background: var(--color-charcoal-mist); color: #fff; } /* ===================================================================== Stories: age + country filter dropdowns (replaces search bar) ===================================================================== */ .stories-filter-select { display: inline-flex; align-items: center; gap: .4rem; background: #fff; border: 1.5px solid var(--color-charcoal-mist); border-radius: 999px; padding: .15rem .35rem .15rem .9rem; font-family: var(--font-syne); font-weight: 700; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(58, 31, 71, .6); } .stories-filter-select select { appearance: none; -webkit-appearance: none; -moz-appearance: none; background: transparent; border: 0; padding: .4rem 1.5rem .4rem .35rem; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-charcoal-mist); cursor: pointer; outline: none; border-radius: 999px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 14px) center, calc(100% - 9px) center; background-size: 5px 5px; background-repeat: no-repeat; } .stories-filter-select select option { font-family: var(--font-grotesk); text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--color-charcoal-mist); } .stories-filters-row { display: flex; flex-wrap: wrap; gap: .65rem; align-items: center; } /* ===================================================================== She Pairs — page styles ===================================================================== */ /* Header CTA nav-link variant */ .nav-link--cta { background: var(--theme-pop); color: #fff !important; border: 2px solid var(--theme-pop); padding: .45rem 1rem !important; border-radius: 9999px; font-weight: 700; letter-spacing: .02em; box-shadow: 2px 2px 0 var(--theme-pop-dark); transition: transform .15s ease, box-shadow .15s ease; } .nav-link--cta:hover { transform: translateY(-1px); box-shadow: 3px 3px 0 var(--theme-pop-dark); } /* ---- Hero (pairs-specific) — matches universal .hero-grid layout for cross-page parity ---- */ .hero-grid--pairs { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; } @media (min-width: 1024px) { .hero-grid--pairs { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 4rem; } } .hero-cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 1.5rem; } .btn-pill-lg { padding: .85rem 1.6rem; font-size: 1rem; } .hero-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; } .hero-bullets li { font-family: var(--font-grotesk); font-size: .95rem; color: var(--color-charcoal-mist); line-height: 1.4; padding-left: 1.4rem; position: relative; } .hero-bullets li::before { content: '✦'; position: absolute; left: 0; top: 0; color: var(--theme-pop); font-weight: 700; } /* Hero spotlight card — mirrors Glows .glows-feature-card chrome for cross-page parity */ .hero-media--pairs { position: relative; display: flex; min-height: 380px; } @media (min-width: 1024px) { .hero-media--pairs { align-self: stretch; min-height: 40.5rem; } } .pairs-hero-spotlight { position: relative; width: 100%; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); box-shadow: 8px 8px 0 0 var(--theme-pop); padding: 1.75rem; display: flex; flex-direction: column; gap: .85rem; } @media (min-width: 1024px) { .pairs-hero-spotlight { flex: 1; min-height: 40.5rem; } } .pairs-hero-tag-top { position: absolute; top: -.85rem; left: 1.5rem; background: var(--color-charcoal-mist); color: #fff; font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 9999px; } .pairs-hero-portrait { flex-shrink: 0; width: 100%; height: 240px; border-radius: var(--radius-2xl); background: radial-gradient(circle at 30% 35%, rgba(255,255,255,.6), transparent 55%), linear-gradient(135deg, var(--theme-pop-soft), var(--theme-pop)); border: 1.5px solid rgba(58, 31, 71, .12); margin-bottom: .15rem; } .pairs-hero-meta { font-family: var(--font-grotesk); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(58, 31, 71, .65); margin: 0; } .pairs-hero-meta strong { color: var(--theme-pop-dark); font-weight: 700; } .pairs-hero-name { font-family: var(--font-lora); font-weight: 600; font-style: italic; font-size: clamp(1.25rem, 1.4vw + .5rem, 1.6rem); line-height: 1.2; text-transform: none; letter-spacing: -0.005em; color: var(--color-charcoal-mist); margin: 0; } .pairs-hero-desc { font-family: var(--font-grotesk); font-size: .92rem; line-height: 1.5; color: rgba(58, 31, 71, .82); margin: 0; } .pairs-hero-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .pairs-hero-bullets li { font-family: var(--font-grotesk); font-size: .88rem; color: var(--color-charcoal-mist); padding-left: 1.2rem; position: relative; } .pairs-hero-bullets li::before { content: '✦'; position: absolute; left: 0; color: var(--theme-pop); font-weight: 700; } .pairs-hero-cta { margin-top: auto; align-self: flex-start; } /* === Shared featured spotlight (matches pairs hero card sizing/format) === */ .featured-spotlight { position: relative; width: 100%; max-width: none; margin: 0; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: var(--radius-3xl); box-shadow: 8px 8px 0 0 var(--theme-pop); padding: 1.75rem; display: flex; flex-direction: column; gap: .85rem; overflow: visible; } @media (min-width: 1024px) { .featured-spotlight { flex: 1; min-height: 40.5rem; } } /* Make hero-media columns on featured-spotlight pages stretch (mirrors Glows) */ body.theme-flows .hero-media, body.theme-knows .hero-media, body.theme-asks .hero-media--ask, body.theme-grows .hero-media { display: flex; align-self: stretch; } .featured-spotlight-tag { position: absolute; top: -.85rem; left: 1.5rem; background: var(--color-charcoal-mist); color: #fff; font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; padding: .35rem .9rem; border-radius: 9999px; z-index: 6; } .featured-spotlight-portrait { flex-shrink: 0; width: 100%; height: 240px; border-radius: var(--radius-2xl); background: radial-gradient(circle at 30% 35%, rgba(255,255,255,.6), transparent 55%), linear-gradient(135deg, var(--theme-pop-soft), var(--theme-pop)); border: 1.5px solid rgba(58, 31, 71, .12); margin-bottom: .15rem; } .featured-spotlight-meta { font-family: var(--font-grotesk); font-size: .85rem; letter-spacing: .04em; text-transform: uppercase; color: rgba(58, 31, 71, .65); margin: 0; } .featured-spotlight-meta strong { color: var(--theme-pop-dark); font-weight: 700; } .featured-spotlight-name { font-family: var(--font-lora); font-weight: 600; font-style: italic; font-size: clamp(1.25rem, 1.4vw + .5rem, 1.6rem); line-height: 1.2; color: var(--color-charcoal-mist); margin: 0; } .featured-spotlight-desc { font-family: var(--font-grotesk); font-size: .92rem; line-height: 1.5; color: rgba(58, 31, 71, .82); margin: 0; } .featured-spotlight-bullets { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .featured-spotlight-bullets li { font-family: var(--font-grotesk); font-size: .88rem; color: var(--color-charcoal-mist); padding-left: 1.2rem; position: relative; } .featured-spotlight-bullets li::before { content: '✦'; position: absolute; left: 0; color: var(--theme-pop); font-weight: 700; } .featured-spotlight-cta { margin-top: auto; align-self: flex-start; } /* When applied to existing components, override their conflicting outer styling. */ .ask-box.featured-spotlight, .hero-events.featured-spotlight { max-width: none; margin: 0; border-radius: var(--radius-3xl); padding: 1.75rem; gap: .85rem; overflow: visible; } @media (min-width: 1024px) { .ask-box.featured-spotlight, .hero-events.featured-spotlight { min-height: 40.5rem; } } /* Wrap a hero carousel in a featured-spotlight card */ .featured-spotlight .hero-carousel { max-width: 100%; margin: 0; padding-bottom: 3.5rem; } /* ---- How it works ---- */ .how-it-works-pairs { padding: 3.5rem 0 1rem; } @media (min-width: 768px) { .how-it-works-pairs { padding: 4.5rem 0 1.5rem; } } .how-pairs-grid { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; counter-reset: how; } @media (min-width: 768px) { .how-pairs-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .how-pairs-card { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 22px; padding: 1.5rem 1.25rem 1.25rem; position: relative; box-shadow: 4px 4px 0 var(--theme-pop); } .how-pairs-card h3 { margin: .65rem 0 .35rem; font-family: var(--font-ui); font-weight: 700; font-size: 1.15rem; color: var(--color-charcoal-mist); } .how-pairs-card p { margin: 0; font-family: var(--font-grotesk); font-size: .92rem; line-height: 1.45; color: rgba(58, 31, 71, .8); } .how-pairs-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; background: var(--theme-pop); color: #fff; font-family: var(--font-ui); font-weight: 700; font-size: 1rem; } /* ---- Mentor section ---- */ .mentor-section { padding: 3.5rem 0 4.5rem; } @media (min-width: 768px) { .mentor-section { padding: 5rem 0 6rem; } } .mentor-scroll { list-style: none; display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 1rem -1rem 1.25rem; padding: .5rem 1rem 1.5rem; scrollbar-width: none; } .mentor-scroll::-webkit-scrollbar { display: none; } .mentor-card { flex: 0 0 78%; max-width: 320px; scroll-snap-align: start; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 22px; padding: 1.1rem 1.1rem 1.25rem; box-shadow: 5px 5px 0 var(--theme-pop); cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: .6rem; transition: transform .2s ease, box-shadow .2s ease; } @media (min-width: 640px) { .mentor-card { flex: 0 0 46%; } } @media (min-width: 1024px) { .mentor-card { flex: 0 0 28%; max-width: 340px; } } .mentor-card:hover { transform: translateY(-3px); box-shadow: 7px 7px 0 var(--theme-pop); } .mentor-card:focus-visible { outline: 3px solid var(--theme-pop); outline-offset: 4px; } .mentor-card-photo { aspect-ratio: 4 / 3; width: 100%; border-radius: 16px; background: linear-gradient(135deg, var(--theme-pop-soft), var(--theme-pop)); border: 2px solid var(--color-charcoal-mist); display: grid; place-items: center; font-family: var(--font-ribeye); color: #fff; font-size: 3rem; text-shadow: 2px 2px 0 rgba(0,0,0,.15); } .mentor-card-name-row { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; flex-wrap: wrap; } .mentor-card-name { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 1.15rem; color: var(--color-charcoal-mist); } .mentor-card-meta { font-family: var(--font-syne); font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(58, 31, 71, .65); } .mentor-card-vibe { font-family: var(--font-lora); font-style: italic; font-size: .92rem; color: rgba(58, 31, 71, .8); margin: 0; line-height: 1.35; } .mentor-card-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .mentor-card-tags li { font-family: var(--font-syne); font-size: .65rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--theme-pop-soft); color: var(--theme-pop-dark); padding: .25rem .55rem; border-radius: 9999px; } .mentor-card-cta { margin-top: auto; display: inline-flex; align-items: center; gap: .35rem; font-family: var(--font-syne); font-weight: 700; font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--theme-pop); } .mentor-cta-row { display: flex; justify-content: center; margin-top: 1rem; } /* ---- Mentor bio modal ---- */ .mentor-modal { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 1rem; } .mentor-modal[hidden] { display: none; } .mentor-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 30, .55); backdrop-filter: blur(3px); } .mentor-modal-card { position: relative; width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto; background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 24px; padding: 1.75rem 1.5rem 1.5rem; box-shadow: 6px 6px 0 var(--theme-pop); z-index: 1; } .mentor-modal-close { position: absolute; top: .85rem; right: .85rem; width: 32px; height: 32px; border-radius: 9999px; background: var(--theme-pop-soft); border: 1.5px solid var(--color-charcoal-mist); display: grid; place-items: center; color: var(--color-charcoal-mist); cursor: pointer; } .mentor-modal-close:hover { background: var(--theme-pop); color: #fff; } .mentor-modal-head { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.25rem; padding-right: 2rem; } .mentor-modal-avatar { flex-shrink: 0; width: 84px; height: 84px; border-radius: 9999px; background: linear-gradient(135deg, var(--theme-pop-soft), var(--theme-pop)); border: 2px solid var(--color-charcoal-mist); display: grid; place-items: center; color: #fff; font-family: var(--font-ribeye); font-size: 2rem; } .mentor-modal-id { min-width: 0; } .mentor-modal-name { margin: 0; font-family: var(--font-ui); font-weight: 700; font-size: 1.4rem; color: var(--color-charcoal-mist); } .mentor-modal-meta { margin: .15rem 0 .4rem; display: flex; gap: .4rem; font-family: var(--font-syne); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: rgba(58, 31, 71, .65); } .mentor-modal-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem; } .mentor-modal-tags li { font-family: var(--font-syne); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--theme-pop-soft); color: var(--theme-pop-dark); padding: .2rem .5rem; border-radius: 9999px; } .mentor-modal-vibe-line { font-family: var(--font-lora); font-style: italic; font-size: 1.05rem; line-height: 1.4; color: var(--theme-pop-dark); border-left: 3px solid var(--theme-pop); background: var(--theme-pop-soft); padding: .65rem .9rem; border-radius: 0 12px 12px 0; margin: 0 0 1.25rem; } .mentor-modal-section { margin-bottom: 1rem; } .mentor-modal-eyebrow { display: block; font-family: var(--font-syne); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-pop); margin-bottom: .35rem; } .mentor-modal-section p { margin: 0; font-family: var(--font-grotesk); font-size: .95rem; line-height: 1.5; color: var(--color-charcoal-mist); } .mentor-modal-topics { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; } .mentor-modal-topics li { font-family: var(--font-grotesk); font-size: .8rem; background: #fff; border: 1.5px solid var(--color-charcoal-mist); padding: .25rem .65rem; border-radius: 9999px; color: var(--color-charcoal-mist); } .mentor-modal-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1rem; padding-top: 1rem; border-top: 1.5px dashed rgba(0,0,0,.15); } /* ===================================================================== She Pairs — Quiz page ===================================================================== */ .page-quiz main.quiz-main { padding: 2rem 0 4rem; } @media (min-width: 768px) { .page-quiz main.quiz-main { padding: 3rem 0 5rem; } } .quiz-container { max-width: 720px; } .quiz-intro { text-align: center; margin-bottom: 2rem; } .quiz-title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.75rem, 3vw + .5rem, 2.5rem); letter-spacing: -0.02em; color: var(--color-charcoal-mist); margin: .5rem 0 .75rem; } .quiz-lede { font-family: var(--font-grotesk); font-size: 1rem; color: rgba(58, 31, 71, .75); max-width: 38rem; margin: 0 auto; line-height: 1.5; } .quiz-progress { height: 8px; background: var(--theme-pop-soft); border-radius: 9999px; overflow: hidden; margin: 0 auto; max-width: 460px; } .quiz-progress-fill { display: block; height: 100%; width: 14%; background: var(--theme-pop); transition: width .3s ease; border-radius: 9999px; } .quiz-step-label { text-align: center; font-family: var(--font-syne); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--theme-pop); margin: .65rem 0 1.5rem; } .quiz-form { background: #fff; border: 2px solid var(--color-charcoal-mist); border-radius: 24px; padding: 1.75rem 1.5rem; box-shadow: 6px 6px 0 var(--theme-pop); } @media (min-width: 768px) { .quiz-form { padding: 2.25rem 2rem; } } .quiz-step { border: none; padding: 0; margin: 0; display: none; } .quiz-step.is-active { display: block; } .quiz-step-title { font-family: var(--font-ui); font-weight: 700; font-size: 1.35rem; color: var(--color-charcoal-mist); margin: 0 0 .4rem; padding: 0; } .quiz-step-sub { font-family: var(--font-grotesk); font-size: .92rem; color: rgba(58, 31, 71, .7); margin: 0 0 1.5rem; line-height: 1.4; } .quiz-field { margin-bottom: 1.25rem; } .quiz-field label, .quiz-label { display: block; font-family: var(--font-syne); font-weight: 700; font-size: .82rem; letter-spacing: .04em; color: var(--color-charcoal-mist); margin-bottom: .45rem; } .quiz-field-hint { font-family: var(--font-grotesk); font-weight: 400; font-size: .8rem; color: rgba(58, 31, 71, .55); margin-left: .35rem; } .quiz-field input[type="text"], .quiz-field input[type="email"], .quiz-field select, .quiz-field textarea { width: 100%; font-family: var(--font-grotesk); font-size: 1rem; background: #fff; border: 1.5px solid rgba(58, 31, 71, .25); border-radius: 12px; padding: .7rem .85rem; color: var(--color-charcoal-mist); transition: border-color .15s ease, box-shadow .15s ease; } .quiz-field input:focus, .quiz-field select:focus, .quiz-field textarea:focus { outline: none; border-color: var(--theme-pop); box-shadow: 0 0 0 3px var(--theme-pop-soft); } .quiz-field textarea { resize: vertical; min-height: 90px; } .quiz-field select { appearance: none; -webkit-appearance: none; background: #fff url("data:image/svg+xml;utf8,") no-repeat right .85rem center/12px 8px; padding-right: 2.5rem; cursor: pointer; } .quiz-chip-group { display: flex; flex-wrap: wrap; gap: .45rem; } .quiz-chip { position: relative; cursor: pointer; font-family: var(--font-syne); font-weight: 700; font-size: .82rem; letter-spacing: .02em; } .quiz-chip input { position: absolute; opacity: 0; pointer-events: none; } .quiz-chip span { display: inline-block; padding: .5rem .95rem; border: 2px solid var(--color-charcoal-mist); border-radius: 9999px; background: #fff; color: var(--color-charcoal-mist); transition: all .15s ease; } .quiz-chip:hover span { transform: translateY(-1px); box-shadow: 2px 2px 0 var(--theme-pop); } .quiz-chip input:checked + span { background: var(--theme-pop); color: #fff; border-color: var(--theme-pop); box-shadow: 2px 2px 0 var(--theme-pop-dark); } .quiz-chip input:focus-visible + span { outline: 3px solid var(--theme-pop); outline-offset: 3px; } .quiz-radio-group { display: flex; flex-direction: column; gap: .5rem; } .quiz-radio { display: flex; align-items: center; gap: .65rem; padding: .7rem .85rem; border: 1.5px solid rgba(58, 31, 71, .25); border-radius: 12px; cursor: pointer; font-family: var(--font-grotesk); font-size: .95rem; color: var(--color-charcoal-mist); transition: border-color .15s, background .15s; } .quiz-radio:hover { border-color: var(--theme-pop); } .quiz-radio input { accent-color: var(--theme-pop); margin: 0; } .quiz-radio input:checked ~ span { font-weight: 600; } .quiz-radio:has(input:checked) { border-color: var(--theme-pop); background: var(--theme-pop-soft); } .quiz-field--checkbox { margin-bottom: .85rem; } .quiz-checkbox { display: flex; gap: .65rem; align-items: flex-start; cursor: pointer; font-family: var(--font-grotesk); font-size: .9rem; color: var(--color-charcoal-mist); line-height: 1.4; } .quiz-checkbox input { accent-color: var(--theme-pop); margin-top: .2rem; flex-shrink: 0; } .quiz-nav { display: flex; justify-content: space-between; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1.5px dashed rgba(0,0,0,.15); } .quiz-nav .btn { min-width: 120px; } #quiz-next, #quiz-submit { margin-left: auto; } /* Success state */ .quiz-success { text-align: center; padding: 1rem 0; } .quiz-success-icon { width: 72px; height: 72px; border-radius: 9999px; background: var(--theme-pop-soft); color: var(--theme-pop); display: grid; place-items: center; margin: 0 auto 1rem; border: 2px solid var(--theme-pop); } .quiz-success-title { font-family: var(--font-ui); font-weight: 700; font-size: clamp(1.5rem, 2.5vw + .5rem, 2rem); margin: 0 0 .75rem; color: var(--color-charcoal-mist); } .quiz-success-lede { font-family: var(--font-grotesk); font-size: 1rem; line-height: 1.5; color: rgba(58, 31, 71, .8); max-width: 32rem; margin: 0 auto 1.5rem; } .quiz-success-next { list-style: none; margin: 0 auto 1.75rem; padding: 1.25rem; max-width: 28rem; background: var(--theme-pop-soft); border-radius: 16px; text-align: left; display: grid; gap: .55rem; } .quiz-success-next li { font-family: var(--font-grotesk); font-size: .92rem; color: var(--color-charcoal-mist); line-height: 1.4; } .quiz-success-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .65rem; } /* ===================================================================== Site nav — right-side hamburger + slide-in drawer ===================================================================== */ .nav-hamburger { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 9999px; border: 2px solid var(--color-charcoal-mist); background: #fff; color: var(--color-charcoal-mist); cursor: pointer; margin-left: .65rem; transition: background .18s ease, color .18s ease, transform .15s ease, box-shadow .18s ease; } .nav-hamburger:hover { background: var(--theme-pop, var(--color-charcoal-mist)); color: #fff; border-color: var(--color-charcoal-mist); transform: translateY(-1px); box-shadow: 2px 2px 0 var(--color-charcoal-mist); } .nav-hamburger:focus-visible { outline: 3px solid var(--theme-pop); outline-offset: 3px; } .nav-hamburger svg { width: 20px; height: 20px; } .nav-drawer { position: fixed; inset: 0; z-index: 200; display: none; } .nav-drawer.is-open { display: block; } .nav-drawer-backdrop { position: absolute; inset: 0; background: rgba(20, 20, 30, .5); backdrop-filter: blur(2px); animation: nav-drawer-fade .2s ease; } .nav-drawer-panel { position: absolute; top: 0; left: 0; height: 100vh; width: min(340px, 86vw); background: #fff; border-right: 2px solid var(--color-charcoal-mist); box-shadow: 6px 0 0 rgba(0, 0, 0, .07); padding: 4.25rem 1.5rem 2rem; animation: nav-drawer-slide .26s cubic-bezier(.22, .61, .36, 1); overflow-y: auto; } .nav-drawer-section + .nav-drawer-section { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px dashed rgba(58, 31, 71, .18); } .nav-drawer-section-title { display: block; font-family: var(--font-syne); font-weight: 700; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--theme-pop, var(--color-charcoal-mist)); margin: 0 0 .75rem; } /* "Pages" — She tab list with label + sub-line */ .nav-drawer-panel ul.nav-drawer-pages { gap: .3rem; } .nav-drawer-page { display: flex !important; flex-direction: column; gap: .15rem; padding: .7rem .9rem !important; font-family: var(--font-syne) !important; text-decoration: none; border-radius: 14px !important; border: 1.5px solid transparent !important; transition: background .15s ease, border-color .15s ease, color .15s ease; } .nav-drawer-page-label { font-weight: 700; font-size: 1rem; letter-spacing: 0; color: var(--color-charcoal-mist); } .nav-drawer-page-desc { font-family: var(--font-grotesk); font-weight: 500; font-size: .78rem; color: rgba(58, 31, 71, .65); letter-spacing: 0; text-transform: none; } .nav-drawer-page.is-active { background: var(--theme-pop-soft); border-color: var(--theme-pop) !important; } .nav-drawer-page.is-active .nav-drawer-page-label { color: var(--theme-pop-dark, var(--theme-pop)); } .nav-drawer-close { position: absolute; top: 1rem; right: 1rem; width: 36px; height: 36px; border-radius: 9999px; border: 1.5px solid var(--color-charcoal-mist); background: #fff; color: var(--color-charcoal-mist); cursor: pointer; display: grid; place-items: center; } .nav-drawer-close:hover { background: var(--theme-pop); color: #fff; border-color: var(--theme-pop); } .nav-drawer-title { display: block; font-family: var(--font-syne); font-weight: 700; font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: var(--theme-pop, var(--color-charcoal-mist)); margin-bottom: .85rem; } .nav-drawer-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; } .nav-drawer-panel li a { display: block; padding: .85rem 1rem; font-family: var(--font-syne); font-weight: 700; font-size: 1rem; letter-spacing: .03em; color: var(--color-charcoal-mist); border-radius: 12px; text-decoration: none; border: 1.5px solid transparent; transition: background .15s ease, border-color .15s ease, color .15s ease; } .nav-drawer-panel li a:hover { background: var(--theme-pop-soft); color: var(--theme-pop-dark, var(--theme-pop)); border-color: var(--theme-pop); } .nav-drawer-title--socials { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px dashed rgba(58, 31, 71, .18); } .nav-drawer-panel ul.nav-drawer-socials { display: flex; flex-direction: row; gap: .65rem; } .nav-drawer-socials li { display: flex; } .nav-drawer-socials a { display: inline-flex !important; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0 !important; border-radius: 9999px !important; border: 2px solid var(--color-charcoal-mist) !important; color: var(--color-charcoal-mist); background: #fff; box-shadow: 3px 3px 0 0 var(--theme-pop, var(--color-charcoal-mist)); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .nav-drawer-socials a svg { width: 26px; height: 26px; } .nav-drawer-socials a:hover { background: var(--theme-pop, var(--color-charcoal-mist)); color: #fff; border-color: var(--theme-pop, var(--color-charcoal-mist)); transform: translateY(-1px); } @keyframes nav-drawer-fade { from { opacity: 0; } to { opacity: 1; } } @keyframes nav-drawer-slide { from { transform: translateX(-100%); } to { transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { .nav-drawer-backdrop, .nav-drawer-panel { animation: none; } }