/* ===================================================================== ПОЛУМʼЯ ВОЛІ — Fire Art Charity Festival styles.css --------------------------------------------------------------------- Structure 1. Fonts 2. Design tokens (:root) 3. Base / reset 4. Layout helpers (container, section, eyebrow) 5. Section heading (foreground + LEZO ghost) 6. Buttons (CTA) — clipped corner shape 7. Placeholder image 8. Cards — clipped corner shape 9. Header & navigation 10. Hero 11. Marquee 12. Programme (ЩО ТЕБЕ ЧЕКАЄ) 13. Feels Garden 14. Partners 15. Charity 16. FAQ 17. Banner 18. Footer 19. Responsive breakpoints (Webflow-aligned: 991 / 767 / 479) 20. Reduced motion ===================================================================== */ /* 1. FONTS ----------------------------------------------------------- */ /* NEXA is loaded from Typekit in . LEZO is the decorative display face used ONLY for the large red duplicate titles. WEBFLOW: upload the font file in Project Settings → Fonts, or host it, then replace the url() below with the hosted/Webflow font URL. */ @font-face { font-family: "Lezo"; src: url("./fonts/Lezo.ttf") format("truetype"); /* WEBFLOW: replace URL */ font-weight: 400 900; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('./fonts/Nexa-light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('./fonts/Nexa-regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('./fonts/Nexa-extrabold.ttf') format('truetype'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Nexa'; src: url('./fonts/Nexa-black.otf') format('opentype'); font-weight: 900; font-style: normal; font-display: swap; } /* 2. DESIGN TOKENS --------------------------------------------------- */ :root { /* Brand palette */ --pv-bg: #261c2b; /* dark purple — main background */ --pv-bg-deep: #1c141f; /* deepest layer — footer / marquee */ --pv-bg-alt: #2b2032; /* subtle alternate section background */ --pv-purple: #4c487f; /* primary purple */ --pv-lilac: #8d86c8; /* light purple */ --pv-red: #fd2c2d; /* primary red — fire accent / ghosts */ --pv-orange: #fa8f3f; /* primary orange — fire accent */ --pv-white: #f1ecf2; /* primary white — text */ --pv-ink: #140e18; /* near-black for text on light surfaces*/ /* Derived text + lines */ --pv-muted: rgba(241, 236, 242, 0.66); --pv-faint: rgba(241, 236, 242, 0.42); --pv-border-op: 0.2; --pv-hairline: rgba(141, 134, 200, 0.2); --pv-hairline-2: rgba(141, 134, 200, 0.34); --pv-fire: linear-gradient(90deg, var(--pv-red), var(--pv-orange)); --pv-fire-soft: linear-gradient( 120deg, rgba(253, 44, 45, 0.16), rgba(250, 143, 63, 0.1) ); /* Grain used inside placeholders (self-contained, no network fetch) */ --pv-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* Typography */ --pv-font-ui: "Nexa", sans-serif; --pv-font-display: "Lezo", sans-serif; /* Spacing scale (4 / 8 based) */ --pv-1: 4px; --pv-2: 8px; --pv-3: 12px; --pv-4: 16px; --pv-5: 24px; --pv-6: 32px; --pv-7: 48px; --pv-8: 64px; --pv-9: 96px; --pv-10: 128px; /* Layout */ --pv-container: 1312px; --pv-gutter: 72px; --pv-section-y: clamp(64px, 8vw, 128px); --pv-radius: 2px; /* The required clipped-corner shape (CTA buttons + cards ONLY) */ --pv-clip: polygon( 0px 0px, calc(100% - 10px) 0px, 100% 10px, 100% 100%, 10px 100%, 0px calc(100% - 10px) ); /* Motion */ --pv-t-fast: 0.18s ease; --pv-t: 0.28s cubic-bezier(0.2, 0.7, 0.2, 1); } /* 3. BASE / RESET ---------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { overflow-x: clip; /* contain decorative ghosts */ scroll-behavior: smooth; scroll-padding-top: 96px; /* offset sticky header on anchor jump */ -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--pv-bg); color: var(--pv-white); font-family: var(--pv-font-ui); font-size: 16px; font-weight: 400; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } body.pv-no-scroll { overflow: hidden; } img, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; cursor: pointer; } h1, h2, h3, h4, p, ul, figure { margin: 0; } ul { list-style: none; padding: 0; } ::selection { background: var(--pv-red); color: var(--pv-white); } :focus-visible { outline: 2px solid var(--pv-white); outline-offset: 3px; border-radius: 1px; } .pv-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; } /* 4. LAYOUT HELPERS -------------------------------------------------- */ .pv-container { width: min(100% - var(--pv-gutter), var(--pv-container)); margin-inline: auto; } .pv-section { position: relative; padding-block: var(--pv-section-y); overflow-x: clip; } .pv-section--alt { background: var(--pv-bg-alt); } .pv-section--deep { background: var(--pv-bg-deep); } /* a thin fire divider available between sections */ .pv-rule { height: 1px; border: 0; margin: 0; background: linear-gradient( 90deg, transparent, var(--pv-hairline-2), transparent ); } .pv-eyebrow { display: inline-flex; align-items: center; gap: var(--pv-3); font-size: 12px; font-weight: 700; letter-spacing: 0.24em; text-transform: uppercase; color: var(--pv-lilac); } .pv-eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--pv-fire); } /* 5. SECTION HEADING ------------------------------------------------- */ .pv-heading { position: relative; padding-top: clamp(28px, 5vw, 64px); margin-bottom: var(--pv-7); } .pv-heading__ghost { display: block; font-family: var(--pv-font-display); font-weight: 400; font-size: clamp(24px, 3vw, 168px); line-height: 1; letter-spacing: 0.01em; color: var(--pv-red); white-space: nowrap; pointer-events: none; user-select: none; margin-bottom: -0.9em; } .pv-heading__title { position: relative; font-size: clamp(32px, 5.4vw, 68px); font-weight: 800; line-height: 1.02; letter-spacing: -0.01em; color: var(--pv-white); text-wrap: balance; } .pv-heading__lead { position: relative; z-index: 1; margin-top: var(--pv-4); max-width: 56ch; color: var(--pv-muted); font-size: clamp(16px, 1.4vw, 18px); } /* center variant (banner / charity intros) */ .pv-heading--center { text-align: center; } .pv-heading--center .pv-heading__ghost { text-align: center; width: 100%; } .pv-heading--center .pv-heading__lead { margin-inline: auto; } /* 6. BUTTONS (CTA) — clipped corner shape ---------------------------- */ /* The outer /