/* ========================================================================== Flurto — pages.css Page-level composition tweaks, decorative touches, motion utilities, print. Pages are targeted through (read by js/main.js). ========================================================================== */ /* ========================================================================== 1. ENTRANCE ANIMATION UTILITY .reveal is only hidden when the shell has added class="js" to . With JS disabled (or blocked) every .reveal renders normally. ========================================================================== */ .reveal { --reveal-delay: 0ms; --reveal-shift: 18px; } html.js .reveal { opacity: 0; transform: translate3d(0, var(--reveal-shift), 0); transition: opacity var(--dur-reveal) var(--ease-out) var(--reveal-delay), transform var(--dur-reveal) var(--ease-out) var(--reveal-delay); will-change: opacity, transform; } html.js .reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); will-change: auto; } /* Gentle stagger for children of a revealed grid/list */ html.js .grid > .reveal:nth-child(2), html.js .blog-grid > .reveal:nth-child(2) { --reveal-delay: 70ms; } html.js .grid > .reveal:nth-child(3), html.js .blog-grid > .reveal:nth-child(3) { --reveal-delay: 140ms; } html.js .grid > .reveal:nth-child(4), html.js .blog-grid > .reveal:nth-child(4) { --reveal-delay: 210ms; } html.js .grid > .reveal:nth-child(5), html.js .blog-grid > .reveal:nth-child(5) { --reveal-delay: 280ms; } html.js .grid > .reveal:nth-child(6), html.js .blog-grid > .reveal:nth-child(6) { --reveal-delay: 350ms; } .reveal--fade { --reveal-shift: 0px; } .reveal--rise { --reveal-shift: 32px; } /* Motion-safe fallback: never trap content behind an animation. */ @media (prefers-reduced-motion: reduce) { html.js .reveal, html.js .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ========================================================================== 2. DECORATIVE TOUCHES ========================================================================== */ /* Soft, blurred organic wash behind alternating sections. */ .section--alt { overflow: hidden; } .section--alt::before { content: ""; position: absolute; inset-block-start: -6%; inset-inline-end: -4%; z-index: 0; inline-size: clamp(180px, 26vw, 380px); aspect-ratio: 1; border-radius: var(--radius-blob-b); background: var(--grad-blob-b); opacity: 0.18; filter: blur(24px); pointer-events: none; } .section--alt > * { position: relative; z-index: var(--z-base); } /* A tiny coral "smile" under section titles — pure decoration. */ .section__head .section__title::after { content: ""; display: block; inline-size: 3.25rem; block-size: 4px; margin-block-start: var(--space-4); margin-inline: auto; border-radius: var(--radius-pill); background: var(--grad-primary); } /* Optional utility: a full-width soft divider between two flat sections. */ .divider-soft { block-size: 1px; border: 0; background: var(--grad-rule); margin-block: 0; } /* ========================================================================== 3. SHARED PAGE UTILITIES (small, additive — beyond the inventory) ========================================================================== */ .stack { display: flex; flex-direction: column; gap: var(--space-4); } .center-x { display: flex; justify-content: center; } .text-center { text-align: center; } .lead { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--color-ink-muted); max-inline-size: var(--measure-short); } .narrow { max-inline-size: var(--container-narrow); margin-inline: auto; } .section__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-block-start: clamp(2rem, 1.4rem + 2vw, 3rem); } /* ========================================================================== 4. PAGE: HOME ========================================================================== */ body[data-page="home"] .hero { padding-block-end: clamp(3rem, 2rem + 4vw, 5.5rem); } /* Steps read as a numbered journey — connect them on wide screens. */ @media (min-width: 900px) { body[data-page="home"] .grid--3 > .step + .step::before { content: ""; position: absolute; inset-block-start: calc(clamp(1.4rem, 1rem + 1.2vw, 2rem) + 1.75rem); inset-inline-start: calc(-1 * var(--gap-grid) - 1px); inline-size: var(--gap-grid); block-size: 2px; background: var(--grad-rule); } } body[data-page="home"] .hero__stats .stat__value { color: var(--color-primary-deep); } /* ========================================================================== 5. PAGE: FEATURES ========================================================================== */ body[data-page="features"] .section:nth-of-type(even) .section__head { margin-inline: auto; } body[data-page="features"] .feature-card ul, body[data-page="features"] .card ul { display: flex; flex-direction: column; gap: var(--space-2); margin-block-start: var(--space-4); } body[data-page="features"] .feature-card li, body[data-page="features"] .card li { position: relative; padding-inline-start: var(--space-6); font-size: var(--text-base); color: var(--color-ink-muted); } body[data-page="features"] .feature-card li::before, body[data-page="features"] .card li::before { content: "✓"; position: absolute; inset-inline-start: 0; inset-block-start: 0; color: var(--color-sage-700); font-weight: var(--weight-bold); line-height: inherit; } /* ========================================================================== 6. PAGE: MEETUPS ========================================================================== */ body[data-page="meetups"] .event-card__cover { min-block-size: clamp(140px, 20vw, 180px); } body[data-page="meetups"] .section--alt .step { background: var(--color-surface); } /* Host-a-meetup call-out block */ body[data-page="meetups"] .card--host, body[data-page="meetups"] .host-callout { align-items: center; text-align: center; gap: var(--space-4); background: linear-gradient(150deg, var(--color-peach-tint) 0%, var(--color-lavender-tint) 100%); border-color: transparent; border-radius: var(--radius-2xl); padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.25rem); } /* ========================================================================== 7. PAGE: SAFETY ========================================================================== */ body[data-page="safety"] .pillar { border-start-start-radius: var(--radius-2xl); border-end-end-radius: var(--radius-2xl); border-start-end-radius: var(--radius-md); border-end-start-radius: var(--radius-md); } body[data-page="safety"] .pillar:nth-child(even) { border-start-start-radius: var(--radius-md); border-end-end-radius: var(--radius-md); border-start-end-radius: var(--radius-2xl); border-end-start-radius: var(--radius-2xl); } /* Commitment statement reads like a promise, not a legal notice. */ body[data-page="safety"] .commitment, body[data-page="safety"] .section--alt .narrow p { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-ink); } /* ========================================================================== 8. PAGE: ABOUT ========================================================================== */ body[data-page="about"] .value-card:nth-child(4n + 1) { background: linear-gradient(170deg, var(--color-surface), var(--color-coral-tint)); } body[data-page="about"] .value-card:nth-child(4n + 2) { background: linear-gradient(170deg, var(--color-surface), var(--color-peach-tint)); } body[data-page="about"] .value-card:nth-child(4n + 3) { background: linear-gradient(170deg, var(--color-surface), var(--color-lavender-tint)); } body[data-page="about"] .value-card:nth-child(4n) { background: linear-gradient(170deg, var(--color-surface), var(--color-sage-tint)); } body[data-page="about"] .mission, body[data-page="about"] .narrow p { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--color-plum-600); } /* ========================================================================== 9. PAGE: BLOG INDEX ========================================================================== */ body[data-page="blog"] .hero--page { padding-block-end: clamp(1.5rem, 1rem + 2vw, 2.5rem); } body[data-page="blog"] .section { padding-block-start: var(--space-8); } /* First card gets a wider footprint on large screens — editorial feel. */ @media (min-width: 1000px) { body[data-page="blog"] .blog-grid > .post-card:first-child { grid-column: span 2; } body[data-page="blog"] .blog-grid > .post-card:first-child .post-card__cover { min-block-size: 230px; font-size: 4rem; } body[data-page="blog"] .blog-grid > .post-card:first-child .post-card__title { font-size: var(--text-2xl); } } /* ========================================================================== 10. PAGE: SINGLE POST ========================================================================== */ body[data-page="post"] .post__header .badge, body[data-page="post"] .post__header .post-card__category { margin-inline: 0; margin-block-start: 0; } body[data-page="post"] .post__body > :first-child { font-size: var(--text-lg); color: var(--color-ink); } /* Empty / not-found state */ .post--empty, .post__notfound { max-inline-size: var(--measure); margin-inline: auto; padding-block: var(--space-11); text-align: center; color: var(--color-ink-muted); } /* ========================================================================== 11. RESPONSIVE SAFETY NETS (375 / 768 / 1280 verified) ========================================================================== */ @media (max-width: 599.98px) { .hero__stats { gap: var(--space-6); } .stat { min-inline-size: 5.5rem; } .hero__ctas .btn { inline-size: 100%; } .footer__bottom { justify-content: flex-start; } .testimonial::before { font-size: 3.5rem; } } @media (max-width: 899.98px) { .hero__inner { justify-items: center; text-align: center; } .hero__title, .hero__subtitle { margin-inline: auto; } .hero__ctas, .hero__stats { justify-content: center; } .hero__art { order: -1; min-block-size: clamp(280px, 62vw, 420px); } } /* Very wide screens: keep the reading rhythm from stretching. */ @media (min-width: 1440px) { .hero__art { min-block-size: 540px; } } /* ========================================================================== 12. PRINT ========================================================================== */ @media print { html.js .reveal, html.js .reveal.is-visible { opacity: 1 !important; transform: none !important; } .navbar, .navbar__burger, .lang-toggle, .cta-band, .footer, .skip-link, .hero__art, .blob, .phone-mock { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .section, .post { padding-block: 1rem; } .card, .feature-card, .event-card, .post-card, .step, .pillar, .testimonial, .value-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } }