/* Theme Name: MINDS Film Festival 2026 (V5) Theme URI: https://minds.org.sg/film-festival Description: Block theme for the MINDS Film Festival 2026 — a Singapore festival celebrating stories of persons with intellectual disabilities through film. Built from the V5 design (Cream + Forest, pink ticker) with the type system: Montserrat (display/body), Cadet (labels/buttons), Source Serif 4 (italic accents). Content lives in editable core blocks; layout is locked via content-only patterns. Author: MINDS Film Festival Author URI: https://minds.org.sg Version: 2.4.63 Requires at least: 6.6 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: minds-film-festival-theme Tags: full-site-editing, block-patterns, custom-colors, custom-menu, editor-style, one-column, wide-blocks */ /* ===================================================================== FONTS Cadet is loaded here explicitly (front-end + editor stylesheet) rather than relying solely on theme.json's fontFace, which some hosts (incl. WordPress.com) silently drop, making every Cadet label/button/nav item fall back to Montserrat. This linked-stylesheet @font-face always ships. ===================================================================== */ @font-face { font-family: "Cadet"; src: url("assets/fonts/CadetTest-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } /* ===================================================================== TOKENS ===================================================================== */ :root { --mff-cream: var(--wp--preset--color--cream); --mff-ink: var(--wp--preset--color--ink); --mff-forest: var(--wp--preset--color--forest); --mff-red: var(--wp--preset--color--marquee-red); --mff-butter: var(--wp--preset--color--butter); --mff-pink: var(--wp--preset--color--pink); --mff-teal: var(--wp--preset--color--teal); --mff-rule: var(--wp--preset--color--rule); --mff-muted: var(--wp--preset--color--muted); --mff-on-image: var(--wp--preset--color--on-image); --mff-on-image-muted: var(--wp--preset--color--on-image-muted); --mff-display: var(--wp--preset--font-family--montserrat); --mff-body: var(--wp--preset--font-family--montserrat); --mff-label: var(--wp--preset--font-family--cadet); --mff-serif: var(--wp--preset--font-family--source-serif); /* Standard paragraph size; nav + all buttons match this (2.4.15). */ --mff-fs-body: 1.125rem; /* 18px */ --mff-pad-x: 56px; --mff-on-dark-rule: rgba(244,237,224,0.18); --mff-on-dark-muted: rgba(244,237,224,0.62); } /* ===================================================================== BASE ===================================================================== */ html { scroll-behavior: smooth; } body { margin: 0; background: var(--mff-cream); color: var(--mff-ink); font-family: var(--mff-body); font-size: var(--mff-fs-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; } * { box-sizing: border-box; } img { max-width: 100%; height: auto; } h1, h2, h3, h4, h5, h6 { font-family: var(--mff-display); font-weight: 800; letter-spacing: -0.02em; line-height: 0.95; color: var(--mff-forest); margin: 0; } h1 em, h2 em, h3 em, h4 em, .mff-em { font-family: var(--mff-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; } .mff-eyebrow { font-family: var(--mff-label); font-weight: 700; font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.15em; color: var(--mff-red); margin: 0 0 16px; display: block; } .mff-label { font-family: var(--mff-label); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; } /* ===================================================================== BUTTONS ===================================================================== */ .wp-block-button.is-style-mff-primary .wp-block-button__link, .wp-block-button.is-style-mff-secondary .wp-block-button__link, .wp-block-button.is-style-mff-accent .wp-block-button__link { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); text-transform: uppercase; letter-spacing: 0.12em; padding: 14px 22px; border-radius: 0; text-decoration: none; display: inline-block; transition: opacity .18s ease; } .wp-block-button.is-style-mff-primary .wp-block-button__link { background: var(--mff-forest); color: var(--mff-cream); border: none; } .wp-block-button.is-style-mff-secondary .wp-block-button__link { background: transparent; color: var(--mff-ink); border: 1px solid var(--mff-ink); } .wp-block-button.is-style-mff-accent .wp-block-button__link { background: var(--mff-butter); color: var(--mff-forest); border: none; } .wp-block-button .wp-block-button__link:hover { opacity: 0.88; } /* ===================================================================== SECTION RHYTHM ===================================================================== */ .mff-section { padding: 88px var(--mff-pad-x); } .mff-section--tight { padding: 32px var(--mff-pad-x) 88px; } .mff-on-forest { background: var(--mff-forest); color: var(--mff-cream); } .mff-on-forest :where(h1,h2,h3) { color: var(--mff-cream); } .mff-section > *, .mff-section--tight > * { max-width: 1280px; margin-left: auto; margin-right: auto; } /* ===================================================================== DROPDOWN NAV (shared; dark on hero, light on inner pages) ===================================================================== */ .mff-nav { display: flex; gap: 36px; flex-wrap: wrap; justify-content: center; } .mff-nav__item { position: relative; padding-bottom: 4px; } .mff-nav__trigger { font-family: var(--mff-body); font-weight: 700; font-size: var(--mff-fs-body); text-transform: uppercase; background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 0 0 4px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; } .mff-nav__caret { transition: transform .2s ease; } .mff-nav__item:hover .mff-nav__caret, .mff-nav__item.is-open .mff-nav__caret { transform: rotate(180deg); } .mff-nav__panel { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 12px; min-width: 264px; background: var(--mff-cream); border: 1px solid var(--mff-rule); box-shadow: 0 12px 32px rgba(0,0,0,0.18); display: none; z-index: 60; } .mff-nav__panel::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; } .mff-nav__item:hover .mff-nav__panel, .mff-nav__item.is-open .mff-nav__panel { display: block; } .mff-nav__panel a { display: block; padding: 15px 24px; font-family: var(--mff-body); font-weight: 700; font-size: 1rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mff-ink); text-decoration: none; white-space: nowrap; transition: background .15s ease; } .mff-nav__panel a:nth-child(3n+1):hover { background: var(--mff-butter); } .mff-nav__panel a:nth-child(3n+2):hover { background: var(--mff-pink); } .mff-nav__panel a:nth-child(3n+3):hover { background: var(--mff-teal); } .mff-nav__panel a.is-child { padding-left: 40px; } /* dark variant (hero overlay) */ .mff-nav--dark .mff-nav__trigger { color: var(--mff-on-image); letter-spacing: 0.04em; text-shadow: 0 1px 8px rgba(0,0,0,0.55); } .mff-nav--dark .mff-nav__item:hover .mff-nav__trigger, .mff-nav--dark .mff-nav__item.is-open .mff-nav__trigger { color: var(--mff-butter); border-bottom-color: var(--mff-butter); } /* light variant (inner header) */ .mff-nav--light .mff-nav__trigger { color: var(--mff-ink); letter-spacing: 0.04em; } .mff-nav--light .mff-nav__item:hover .mff-nav__trigger, .mff-nav--light .mff-nav__item.is-open .mff-nav__trigger { color: var(--mff-red); border-bottom-color: var(--mff-red); } /* ===================================================================== HERO ===================================================================== */ .mff-hero { position: relative; height: 760px; background: var(--mff-ink); } .mff-hero__slides { position: absolute; inset: 0; overflow: hidden; z-index: 1; } .mff-hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .mff-hero__slide.is-active { opacity: 1; } .mff-hero__slide figure.wp-block-image, .mff-hero__slide figure.wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; } .mff-hero__slide figure.wp-block-image img { object-fit: cover; display: block; object-position: center; } .mff-hero__slide .mff-hero__img.mff-hero__img--psb img { object-position: center top; } .mff-hero__scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(46,35,16,0.82) 0%, rgba(46,35,16,0.70) 16%, rgba(46,35,16,0.40) 34%, rgba(46,35,16,0.0) 60%, rgba(15,22,18,0.42) 80%, rgba(15,22,18,0.82) 100%); } .mff-hero__top { position: absolute; top: 0; left: 0; right: 0; z-index: 5; padding: 40px var(--mff-pad-x) 32px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .mff-hero__logo-wrap { position: relative; width: 100%; display: flex; justify-content: center; } .mff-hero__logo { width: 240px; height: auto; display: block; filter: drop-shadow(0 2px 12px rgba(0,0,0,0.45)); } .mff-hero__search { position: absolute; top: 8px; right: 0; color: var(--mff-on-image); filter: drop-shadow(0 2px 8px rgba(0,0,0,0.55)); display: flex; } .mff-hero__caption { position: absolute; left: var(--mff-pad-x); right: var(--mff-pad-x); bottom: 88px; z-index: 4; color: var(--mff-on-image); opacity: 0; transition: opacity 1.2s ease; pointer-events: none; } .mff-hero__caption.is-active { opacity: 1; } .mff-hero__title { font-family: var(--mff-display); font-weight: 800; font-size: 64px; line-height: 0.95; margin: 0; color: var(--mff-on-image); max-width: 900px; text-shadow: 0 2px 20px rgba(0,0,0,0.5); } .mff-hero__dots { position: absolute; bottom: 48px; left: var(--mff-pad-x); z-index: 4; display: flex; gap: 8px; } .mff-hero__dots button { width: 10px; height: 4px; padding: 0; border: none; cursor: pointer; background: rgba(255,255,255,0.45); transition: all .3s ease; } .mff-hero__dots button.is-active { width: 28px; background: var(--mff-on-image); } .mff-hero__arrows { position: absolute; bottom: 40px; right: var(--mff-pad-x); z-index: 4; display: flex; gap: 8px; } .mff-hero__arrow { width: 44px; height: 44px; padding: 0; border: 1px solid rgba(255,255,255,0.55); background: rgba(15,22,18,0.45); color: var(--mff-on-image); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .mff-hero__arrow:hover { background: rgba(15,22,18,0.8); } .mff-hero__sound { position: absolute; right: var(--mff-pad-x); bottom: 100px; z-index: 6; width: 48px; height: 48px; border-radius: 50%; padding: 0; border: 2px solid var(--mff-on-image); background: rgba(15,22,18,0.55); color: var(--mff-on-image); cursor: pointer; display: none; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .mff-hero__sound.is-visible { display: flex; } .mff-hero__sound:hover { background: rgba(15,22,18,0.85); } .mff-hero__sound .mff-hero__sound-icon--on { display: none; } .mff-hero__sound[aria-pressed="true"] .mff-hero__sound-icon--on { display: block; } .mff-hero__sound[aria-pressed="true"] .mff-hero__sound-icon--off { display: none; } .mff-hero__play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: 96px; height: 96px; border-radius: 50%; padding: 0; border: 2px solid var(--mff-on-image); background: rgba(15,22,18,0.55); color: var(--mff-on-image); cursor: pointer; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(2px); } .mff-hero__video { position: absolute; inset: 0; z-index: 10; background: #000; } .mff-hero__video iframe { width: 100%; height: 100%; border: 0; display: block; } /* ===================================================================== PROGRAMME INTRO ===================================================================== */ .mff-intro__grid-blocks.wp-block-columns { gap: 56px; align-items: start; } .mff-intro__title { font-size: 72px; line-height: 0.95; letter-spacing: -0.025em; } .mff-intro__title em { color: var(--mff-red); } .mff-intro__lede { font-family: var(--mff-body); font-size: var(--mff-fs-body); line-height: 1.55; color: var(--mff-ink); margin: 0; max-width: 480px; } .mff-intro__buttons { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; } /* ===================================================================== FILMS ===================================================================== */ .mff-films { padding-top: 88px; } .mff-films__title { font-size: 88px; line-height: 0.9; letter-spacing: -0.03em; margin: 0 auto 32px; } .mff-films__grid.wp-block-columns { gap: 24px; align-items: stretch; } .mff-films__grid .wp-block-column { flex-basis: 0; } .mff-filmcard { padding: 28px; display: flex; flex-direction: column; } .mff-filmcard--butter { background: var(--mff-butter); } .mff-filmcard--pink { background: var(--mff-pink); } figure.mff-filmcard__img.wp-block-image { aspect-ratio: 16/9; background: var(--mff-ink); margin: 0 0 20px; overflow: hidden; } .mff-filmcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-filmcard h3 { font-size: 36px; margin: 0 0 10px; line-height: 1; letter-spacing: -0.02em; } .mff-filmcard__meta { font-family: var(--mff-label); font-weight: 700; font-size: 11px; color: var(--mff-ink); text-transform: uppercase; margin: 0 0 14px; letter-spacing: 0.08em; } .mff-filmcard p { font-family: var(--mff-body); font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0 0 20px; line-height: 1.5; max-width: 460px; } .mff-filmcard p.mff-filmcard__more-wrap { margin: 20px 0 0; margin-top: auto; } .mff-filmcard__more { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); color: var(--mff-cream); background: var(--mff-forest); text-decoration: none; text-transform: uppercase; letter-spacing: 0.12em; padding: 14px 22px; display: inline-block; } /* ===================================================================== SCHEDULE ===================================================================== */ .mff-sched__head { margin-bottom: 40px; border-bottom: 1px solid var(--mff-cream); padding-bottom: 24px; } .mff-sched__head .mff-eyebrow { color: var(--mff-butter); font-size: 12px; letter-spacing: 0.18em; } .mff-sched__title { font-size: 64px; line-height: 0.95; } .mff-sched__row { display: grid; grid-template-columns: 200px 180px 1fr 240px; gap: 28px; align-items: center; padding: 32px 0; border-bottom: 1px solid rgba(244,237,224,0.18); } .mff-sched__row:last-child { border-bottom: none; } .mff-sched__date { font-family: var(--mff-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; } .mff-sched__date .is-day { color: var(--mff-butter); } .mff-sched__date .is-dow { color: var(--mff-cream); } .mff-sched__region { font-family: var(--mff-label); font-weight: 700; font-size: 14px; color: var(--mff-pink); text-transform: uppercase; letter-spacing: 0.16em; } .mff-sched__venue { font-family: var(--mff-display); font-weight: 800; font-size: 28px; color: var(--mff-cream); letter-spacing: -0.01em; } .mff-sched__reserve { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); color: var(--mff-forest); background: var(--mff-butter); padding: 12px 18px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; text-align: center; justify-self: end; white-space: nowrap; } .mff-sched__cta { margin-top: 44px; display: flex; justify-content: center; } .mff-sched__cta-btn { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); color: var(--mff-forest); background: var(--mff-butter); padding: 18px 34px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.14em; } /* ===================================================================== KEY-VISUAL BANNER ===================================================================== */ .mff-kvbanner { background: var(--mff-cream); } .mff-kvbanner__img.wp-block-image { margin: 0; } .mff-kvbanner__img img { width: 100%; height: auto; display: block; } /* ===================================================================== ABOUT ===================================================================== */ .mff-about { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: start; max-width: 1280px; margin-left: auto; margin-right: auto; } .mff-about h2 { font-size: 48px; line-height: 0.95; } .mff-about__body p { font-family: var(--mff-body); font-size: var(--mff-fs-body); line-height: 1.55; color: var(--mff-ink); margin: 0; } .mff-about__body > * + * { margin-top: 22px; } .mff-about__body p + p { margin-top: 30px; } .mff-about__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--mff-ink); } .mff-stat__num { font-family: var(--mff-display); font-weight: 800; font-size: 56px; color: var(--mff-red); line-height: 1; } .mff-stat__label { font-family: var(--mff-label); font-weight: 700; font-size: 11px; color: var(--mff-muted); text-transform: uppercase; margin-top: 8px; letter-spacing: 0.12em; } .mff-about__body .wp-block-buttons { margin-top: 32px; } /* ===================================================================== SOCIAL GRID ===================================================================== */ .mff-social__head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--mff-ink); } .mff-social__head .mff-eyebrow { letter-spacing: 0.18em; margin-bottom: 12px; } .mff-social__title { font-size: 56px; line-height: 0.95; letter-spacing: -0.025em; } .mff-social__title em { color: var(--mff-red); } .mff-social__title em, .mff-about__head h2 em { font-family: var(--mff-body); font-style: italic; font-weight: 400; } .mff-about__head h2 em { color: var(--mff-red); } .mff-social__follow { font-family: var(--mff-label); font-weight: 700; font-size: 11px; color: var(--mff-ink); text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; border-bottom: 1px solid var(--mff-ink); padding-bottom: 4px; } .mff-social__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .mff-social__tile { position: relative; aspect-ratio: 1/1; background: var(--mff-ink); overflow: hidden; } .mff-social__tile img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-social__tile span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 20px; font-family: var(--mff-display); font-weight: 800; font-size: 24px; line-height: 1.05; letter-spacing: -0.02em; color: var(--mff-ink); } .mff-social__tile--butter { background: var(--mff-butter); } .mff-social__tile--pink { background: var(--mff-pink); } .mff-social__tile--green { background: var(--mff-forest); } .mff-social__tile--green span { color: var(--mff-cream); } .mff-social__tile--bordered { background: var(--mff-cream); border: 1px solid var(--mff-ink); } .mff-social__note { font-family: var(--mff-label); font-weight: 700; font-size: 9px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.15em; margin-top: 18px; text-align: right; } /* ===================================================================== TICKER ===================================================================== */ .mff-ticker { background: var(--mff-pink); color: var(--mff-ink); padding: 14px 0; overflow: hidden; } .mff-ticker__track { display: flex; gap: 48px; width: max-content; font-family: var(--mff-display); font-weight: 800; font-size: 22px; white-space: nowrap; animation: mff-marquee 32s linear infinite; } .mff-ticker__item { display: inline-flex; align-items: center; gap: 48px; } .mff-ticker__star { color: var(--mff-forest); } @keyframes mff-marquee { from { transform: translateX(0); } to { transform: translateX(-33.333%); } } /* ===================================================================== LIGHT HEADER (inner pages) ===================================================================== */ .mff-header { background: var(--mff-cream); padding: 32px var(--mff-pad-x) 24px; border-bottom: 1px solid var(--mff-rule); display: flex; flex-direction: column; align-items: center; gap: 22px; } .mff-header__logo-wrap { position: relative; width: 100%; display: flex; justify-content: center; } .mff-header__logo { width: 220px; height: auto; display: block; } .mff-header__search { position: absolute; top: 6px; right: 0; color: var(--mff-ink); display: flex; } /* ===================================================================== FOOTER ===================================================================== */ .mff-footer { background: var(--mff-forest); padding: 56px var(--mff-pad-x) 24px; color: var(--mff-cream); } .mff-footer__top { display: flex; align-items: center; justify-content: space-between; gap: 56px; padding-bottom: 36px; border-bottom: 1px solid var(--mff-on-dark-rule); } .mff-footer__mff { width: 240px; height: auto; display: block; } .mff-footer__org { display: flex; flex-direction: column; align-items: center; gap: 14px; } .mff-footer__org-label { font-family: var(--mff-label); font-weight: 700; font-size: 10px; color: var(--mff-on-dark-muted); text-transform: uppercase; letter-spacing: 0.18em; white-space: nowrap; } .mff-footer__org-logos { display: inline-flex; gap: 28px; align-items: center; } .mff-footer__org-logos img { height: 44px; width: auto; display: block; } .mff-footer__org-logos .mff-sfs { height: 50px; } .mff-footer__social-wrap { padding: 32px 0 28px; } .mff-footer__social-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 20px; } .mff-footer__social-head .mff-label { font-size: 11px; color: var(--mff-butter); letter-spacing: 0.22em; } .mff-footer__social-head .mff-line { flex: 1; height: 1px; background: var(--mff-on-dark-rule); } .mff-footer__social { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .mff-footer__card { display: flex; align-items: center; gap: 14px; text-decoration: none; padding: 18px; color: var(--mff-ink); } .mff-footer__card:nth-child(1) { background: var(--mff-butter); } .mff-footer__card:nth-child(2) { background: var(--mff-pink); } .mff-footer__card:nth-child(3) { background: var(--mff-red); } .mff-footer__card:nth-child(4) { background: var(--mff-teal); } .mff-footer__card svg { display: block; flex-shrink: 0; } .mff-footer__card span { min-width: 0; } .mff-footer__card-label { display: block; font-family: var(--mff-label); font-weight: 700; font-size: 9px; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.14em; } .mff-footer__card-handle { display: block; font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); margin-top: 4px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mff-footer__base { font-family: var(--mff-label); font-weight: 700; font-size: 10px; color: var(--mff-on-dark-muted); text-transform: uppercase; padding-top: 20px; display: flex; justify-content: space-between; letter-spacing: 0.14em; border-top: 1px solid var(--mff-on-dark-rule); } /* ===================================================================== RESPONSIVE ===================================================================== */ @media (max-width: 900px) { :root { --mff-pad-x: 24px; } .mff-hero { height: 600px; } .mff-hero__title { font-size: 40px; } .mff-nav { gap: 18px; } .mff-intro__grid-blocks.wp-block-columns, .mff-films__grid.wp-block-columns, .mff-about { grid-template-columns: 1fr; gap: 32px; } .mff-films__title { font-size: 56px; } .mff-sched__title { font-size: 40px; } .mff-sched__row { grid-template-columns: 1fr 1fr; gap: 10px 16px; } .mff-sched__reserve { justify-self: start; } .mff-social__grid { grid-template-columns: 1fr 1fr; } .mff-footer__top { flex-direction: column; align-items: center; text-align: center; } .mff-footer__social { grid-template-columns: 1fr 1fr; } .mff-footer__base { flex-direction: column; gap: 6px; } } @media (prefers-reduced-motion: reduce) { .mff-ticker__track { animation: none; } .mff-hero__slide, .mff-hero__caption { transition: none; } html { scroll-behavior: auto; } } /* ===================================================================== ==================== INNER PAGES (Phase 5/6) ====================== ===================================================================== */ /* Dark-ink section (mirrors mff-on-forest) */ .mff-on-ink { background: var(--mff-ink); color: var(--mff-cream); } .mff-on-ink :where(h1,h2,h3) { color: var(--mff-cream); } /* ---- Standard page hero (eyebrow + huge italic title + lede) ---- */ .mff-phero { border-bottom: 1px solid var(--mff-rule); } .mff-phero__eyebrow { color: var(--mff-red); letter-spacing: 0.18em; } .mff-phero__title { font-size: clamp(3rem, 9vw, 8.25rem); line-height: 0.9; letter-spacing: -0.035em; color: var(--mff-forest); max-width: 1100px; margin: 0; } .mff-phero__lede { font-family: var(--mff-body); font-size: var(--mff-fs-body); line-height: 1.45; color: var(--mff-ink); margin: 36px 0 0; max-width: 720px; } .mff-phero__title em, .mff-sched-hero__title em { color: var(--mff-red); } .mff-phero__inner { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 40px 64px; align-items: end; } .mff-phero__inner .mff-phero__title { font-size: clamp(2.5rem, 6vw, 6rem); line-height: 0.92; letter-spacing: -0.03em; max-width: none; } .mff-phero__inner .mff-phero__lede { margin: 0; max-width: 540px; } .mff-page-faqs .mff-phero__title { max-width: 1280px; margin: 0 auto; } .mff-fw-pink { color: var(--mff-pink); } .mff-fw-blue { color: var(--mff-teal); } .mff-fw-green { color: var(--mff-forest); } /* ===================================================================== ABOUT ===================================================================== */ .mff-about-hero { border-bottom: 1px solid var(--mff-rule); } .mff-about-hero__grid { display: grid; grid-template-columns: 7fr 5fr; gap: 32px; align-items: stretch; } .mff-about-hero__title { font-size: clamp(2.25rem, 5vw, 3.75rem); line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 32px; } .mff-about-hero__text p { font-size: var(--mff-fs-body); line-height: 1.55; color: var(--mff-ink); margin: 0; } .mff-about-hero__text p + p { margin-top: 20px; } .mff-about-hero__text strong { font-weight: 600; } .mff-about-hero__title em { color: var(--mff-red); } .mff-about-hero__stats { display: grid; grid-template-rows: repeat(4, 1fr); gap: 16px; } .mff-statbox { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 24px; padding: 24px 28px; min-height: 116px; } .mff-statbox__num { font-family: var(--mff-display); font-weight: 800; font-size: 56px; line-height: 0.9; letter-spacing: -0.04em; white-space: nowrap; } .mff-statbox__label { font-family: var(--mff-display); font-weight: 800; font-size: 20px; line-height: 1.15; letter-spacing: -0.01em; text-transform: lowercase; } @media (max-width: 600px) { .mff-statbox { padding: 20px; } .mff-statbox__label { font-size: 14px; white-space: nowrap; } } .mff-statbox--butter { background: var(--mff-butter); } .mff-statbox--pink { background: var(--mff-pink); } .mff-statbox--teal { background: var(--mff-teal); } .mff-statbox--green { background: var(--mff-forest); } .mff-statbox--butter .mff-statbox__num { color: var(--mff-red); } .mff-statbox--butter .mff-statbox__label, .mff-statbox--pink .mff-statbox__num, .mff-statbox--pink .mff-statbox__label, .mff-statbox--teal .mff-statbox__num, .mff-statbox--teal .mff-statbox__label { color: var(--mff-forest); } .mff-statbox--green .mff-statbox__num { color: var(--mff-butter); } .mff-statbox--green .mff-statbox__label { color: var(--mff-cream); } .mff-partners { border-bottom: 1px solid var(--mff-rule); } .mff-partners__title { font-size: clamp(2.25rem, 5vw, 3.5rem); margin: 0 0 32px; } .mff-partners__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; align-items: center; } .mff-partners__cell { border: none; padding: 28px 24px; min-height: 120px; display: flex; align-items: center; justify-content: center; } .mff-partners__cell img { width: 100%; max-width: 180px; height: auto; } .mff-mission__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 64px; align-items: start; } .mff-mission__title { font-size: clamp(2.25rem, 5vw, 3.5rem); line-height: 0.95; color: var(--mff-cream); } .mff-mission__title em { color: var(--mff-butter); } .mff-mission__body p { font-size: var(--mff-fs-body); line-height: 1.55; color: var(--mff-cream); margin: 0; } .mff-mission__body p + p { margin-top: 24px; } .mff-mission__body strong { font-weight: 600; color: var(--mff-butter); } .mff-mission__body strong.is-pink { color: var(--mff-pink); } .mff-values__title { font-size: clamp(2.5rem, 6vw, 4rem); margin: 0 0 56px; max-width: 900px; } .mff-values__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .mff-valuecard { padding: 32px; } .mff-valuecard--butter { background: var(--mff-butter); } .mff-valuecard--pink { background: var(--mff-pink); } .mff-valuecard__head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 16px; } .mff-valuecard__num { font-family: var(--mff-display); font-weight: 800; font-size: 56px; color: var(--mff-forest); line-height: 0.9; letter-spacing: -0.04em; } .mff-valuecard__tag { font-size: 28px; color: var(--mff-forest); margin: 0; line-height: 1.05; letter-spacing: -0.015em; } .mff-valuecard p { font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0; line-height: 1.55; } .mff-timeline__title { font-size: clamp(2.25rem, 5vw, 3.5rem); margin: 0 0 40px; border-top: 1px solid var(--mff-ink); padding-top: 40px; } .mff-tl__row { display: grid; grid-template-columns: 160px 1fr; gap: 32px; align-items: start; padding: 32px 0; border-top: 1px solid var(--mff-rule); } .mff-timeline__rows > .mff-tl__row:first-child { border-top: none; padding-top: 0; } .mff-tl__year { font-family: var(--mff-display); font-weight: 800; font-size: 64px; color: var(--mff-red); line-height: 0.9; letter-spacing: -0.03em; } .mff-tl__title { font-size: 26px; color: var(--mff-forest); margin: 0 0 10px; letter-spacing: -0.015em; } .mff-tl__body { font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0 0 28px; line-height: 1.55; max-width: 800px; } .mff-tl__detail { display: grid; grid-template-columns: 180px 1fr; gap: 32px; align-items: start; } .mff-poster { position: relative; aspect-ratio: 2/3; border: 1px solid var(--mff-rule); display: flex; align-items: center; justify-content: center; text-align: center; } .mff-poster::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(31,42,36,0.32); } .mff-poster--butter { background-image: repeating-linear-gradient(135deg, var(--mff-butter) 0 12px, rgba(31,42,36,0.06) 12px 24px); } .mff-poster--pink { background-image: repeating-linear-gradient(135deg, var(--mff-pink) 0 12px, rgba(31,42,36,0.06) 12px 24px); } .mff-poster--teal { background-image: repeating-linear-gradient(135deg, var(--mff-teal) 0 12px, rgba(31,42,36,0.06) 12px 24px); } .mff-poster span { position: relative; z-index: 1; } .mff-poster__tag { display: block; font-family: var(--mff-label); font-size: 9px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.55; margin-bottom: 6px; } .mff-poster__year { display: block; font-family: var(--mff-display); font-weight: 800; font-size: 22px; opacity: 0.85; } .mff-tl__poster { margin: 0; align-self: start; } .mff-tl__poster-img { display: block; width: 100%; height: auto; } .mff-tl__tagline { font-family: var(--mff-serif); font-style: italic; font-size: 18px; color: var(--mff-forest); margin: 0 0 20px; line-height: 1.4; max-width: 540px; } .mff-tl__films-label { font-family: var(--mff-label); font-size: 10px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 12px; } .mff-tl__films-list { margin: 0; padding: 0; list-style: none; } .mff-tl__films-list li { font-size: 15px; color: var(--mff-ink); padding: 8px 0; border-top: 1px solid var(--mff-rule); } .mff-timeline__more > summary { cursor: pointer; list-style: none; font-family: var(--mff-label); font-size: 12px; text-transform: uppercase; letter-spacing: 0.15em; padding: 16px 28px; margin-top: 32px; background: var(--mff-forest); color: var(--mff-cream); border: 1px solid var(--mff-forest); display: inline-block; } .mff-timeline__more[open] > summary { background: transparent; color: var(--mff-forest); } .mff-timeline__more > summary::-webkit-details-marker { display: none; } .mff-timeline__more-open { display: none; } .mff-timeline__more[open] .mff-timeline__more-closed { display: none; } .mff-timeline__more[open] .mff-timeline__more-open { display: inline; } .mff-timeline__more .mff-tl__row { border-top: 1px solid var(--mff-rule); } .mff-cta-band { background: var(--mff-butter); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-top: 64px; padding-bottom: 64px; } .mff-cta-band > * { max-width: none; margin: 0; } .mff-cta-band__title { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--mff-forest); margin: 0; line-height: 1; letter-spacing: -0.02em; } .mff-cta-band__buttons { display: flex; gap: 12px; flex-wrap: wrap; } /* ===================================================================== ORGANISERS ===================================================================== */ .mff-org__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: stretch; } .mff-org__grid + .mff-org__grid { margin-top: 64px; padding-top: 64px; border-top: 1px solid var(--mff-rule); } .mff-org__gallery { display: flex; flex-direction: column; gap: 8px; } .mff-org__gallery-main { position: relative; width: 100%; flex-grow: 1; min-height: 360px; overflow: hidden; } .mff-org__gallery-main--butter { background: var(--mff-butter); } .mff-org__gallery-main--pink { background: var(--mff-pink); } .mff-org__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s ease; } .mff-org__slide.is-active { opacity: 1; } .mff-org__thumbs { display: flex; gap: 6px; } .mff-org__thumb { flex: 1; aspect-ratio: 4/3; padding: 0; border: 2.5px solid transparent; background: none; cursor: pointer; overflow: hidden; transition: border-color .2s; } .mff-org__thumb.is-active { border-color: var(--mff-forest); } .mff-org__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-org__logo { padding: 28px; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; min-height: 180px; } .mff-org__logo--butter { background: var(--mff-butter); } .mff-org__logo--pink { background: var(--mff-pink); } .mff-org__logo img { height: 150px; width: auto; max-width: 92%; object-fit: contain; display: block; filter: brightness(0); } .mff-org__logo.mff-org__logo--butter img { filter: none; } .mff-org__body { font-family: var(--mff-body); font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0 0 16px; line-height: 1.6; } .mff-org__links { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--mff-rule); display: flex; gap: 12px; flex-wrap: wrap; } .mff-org__link { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); padding: 14px 22px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; } .mff-org__link--solid { background: var(--mff-forest); color: var(--mff-cream); } .mff-org__link--outline { border: 1px solid var(--mff-forest); color: var(--mff-forest); } /* ===================================================================== GET INVOLVED ===================================================================== */ .mff-give__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .mff-givecard { padding: 28px; display: flex; flex-direction: column; } .mff-givecard--butter { background: var(--mff-butter); } .mff-givecard--pink { background: var(--mff-pink); } .mff-givecard--teal { background: var(--mff-teal); } .mff-givecard__img { aspect-ratio: 4/3; overflow: hidden; margin: 0 0 22px; background: rgba(31,42,36,0.08); } .mff-givecard__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-givecard__tag { font-family: var(--mff-label); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 12px; color: var(--mff-ink); opacity: 0.75; } .mff-givecard__title { font-family: var(--mff-display); font-weight: 800; font-size: 36px; margin: 0 0 16px; line-height: 0.95; color: var(--mff-forest); letter-spacing: -0.02em; } .mff-givecard__body { font-size: var(--mff-fs-body); line-height: 1.55; margin: 0 0 28px; flex: 1; color: var(--mff-ink); } .mff-givecard__cta { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); text-transform: uppercase; letter-spacing: 0.15em; color: var(--mff-cream); background: var(--mff-forest); text-decoration: none; padding: 14px 22px; align-self: flex-start; } .mff-stories__cta { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); text-transform: uppercase; letter-spacing: 0.16em; color: var(--mff-cream); background: var(--mff-forest); text-decoration: none; padding: 16px 28px; display: inline-block; } .mff-stories { background: var(--mff-butter); } .mff-stories__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: center; } .mff-stories__media img { display: block; width: 100%; height: auto; } .mff-stories__content .mff-eyebrow { color: var(--mff-red); } .mff-stories__lede { font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0 0 32px; line-height: 1.55; max-width: 460px; } /* ===================================================================== SCHEDULE ===================================================================== */ .mff-sched-hero { text-align: center; border-bottom: 1px solid var(--mff-rule); } .mff-sched-hero__eyebrow { color: var(--mff-red); letter-spacing: 0.18em; } .mff-sched-hero__title { font-size: clamp(3rem, 11vw, 8.25rem); line-height: 0.92; letter-spacing: -0.035em; } .mff-facts__eyebrow { font-family: var(--mff-label); font-size: 11px; color: var(--mff-butter); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 40px; display: flex; align-items: center; gap: 14px; } .mff-facts__rule { display: inline-block; width: 24px; height: 1px; background: var(--mff-butter); } .mff-facts__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; } .mff-facts__lead-p { font-family: var(--mff-display); font-weight: 800; font-size: clamp(2rem, 4vw, 3.375rem); line-height: 1.08; letter-spacing: -0.025em; color: var(--mff-cream); margin: 0; } .mff-facts__lead-p em { font-family: var(--mff-serif); font-style: italic; font-weight: 400; color: var(--mff-butter); } .mff-facts__aside { border-left: 1px solid rgba(244,237,224,0.22); padding-left: 28px; padding-top: 8px; display: flex; flex-direction: column; gap: 28px; } .mff-facts__hl-title { font-family: var(--mff-display); font-weight: 800; font-size: 22px; color: var(--mff-cream); letter-spacing: -0.02em; margin-bottom: 6px; } .mff-facts__hl-tag { font-size: 16px; line-height: 1.5; color: rgba(244,237,224,0.75); margin: 0; } .mff-facts__hl-name { font-family: var(--mff-body); font-style: italic; font-weight: 600; font-size: 16px; color: var(--mff-butter); margin-bottom: 4px; } .mff-facts__hl-body { font-size: 15px; line-height: 1.5; color: rgba(244,237,224,0.75); margin: 0; } .mff-facts__hl-cta { font-family: var(--mff-label); font-weight: 700; font-size: var(--mff-fs-body); color: var(--mff-forest); background: var(--mff-butter); padding: 16px 22px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.18em; display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; } .mff-tickets__list { display: flex; flex-direction: column; gap: 22px; } .mff-ticket { display: grid; grid-template-columns: 300px 2px 1fr; background: var(--mff-cream); border: 1.5px solid var(--mff-ink); } .mff-ticket__stub { padding: 28px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; } .mff-ticket__stub--butter { background: var(--mff-butter); } .mff-ticket__stub--pink { background: var(--mff-pink); } .mff-ticket__date { font-family: var(--mff-display); font-weight: 800; font-size: 72px; color: var(--mff-forest); line-height: 0.9; letter-spacing: -0.04em; } .mff-ticket__mon { font-size: 48px; } .mff-ticket__dow { font-family: var(--mff-label); font-weight: 700; font-size: 18px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 10px; } .mff-ticket__region { font-family: var(--mff-label); font-weight: 700; font-size: 14px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 6px; } .mff-ticket__venue { font-family: var(--mff-display); font-weight: 800; font-size: 22px; color: var(--mff-forest); line-height: 1.2; letter-spacing: -0.015em; } .mff-ticket__perf { background-image: radial-gradient(circle, var(--mff-muted) 1.4px, transparent 1.6px); background-size: 2px 10px; background-repeat: repeat-y; } .mff-ticket__shows { display: flex; flex-direction: column; justify-content: space-around; padding: 20px 28px; } .mff-ticket__shows > * + * { border-top: 1px dashed var(--mff-rule); } .mff-ticket__show { display: grid; grid-template-columns: 72px 1fr 100px auto; gap: 20px; align-items: center; padding: 12px 0; } .mff-ticket__poster { width: 72px; height: 96px; object-fit: cover; display: block; } .mff-ticket__film-title { font-family: var(--mff-display); font-weight: 800; font-size: 24px; color: var(--mff-forest); line-height: 1.05; letter-spacing: -0.015em; } .mff-ticket__film { min-width: 0; } .mff-ticket__film-note { font-family: var(--mff-body); font-style: italic; font-size: 13px; color: var(--mff-muted); margin-top: 4px; } .mff-ticket__time { border-left: 1px solid var(--mff-rule); padding-left: 16px; } .mff-ticket__time-num { font-family: var(--mff-display); font-weight: 800; font-size: 24px; color: var(--mff-ink); line-height: 1; letter-spacing: -0.01em; } .mff-ticket__time-dur { font-family: var(--mff-label); font-size: 10px; color: var(--mff-muted); margin-top: 4px; letter-spacing: 0.1em; } .mff-ticket__rsvp { font-family: var(--mff-label); font-size: var(--mff-fs-body); color: var(--mff-cream); background: var(--mff-forest); padding: 12px 18px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap; align-self: center; } .mff-ticket__agenda { display: flex; gap: 16px; align-items: baseline; padding: 7px 0; } .mff-ticket__agenda-time { font-family: var(--mff-label); font-size: 11px; color: var(--mff-muted); min-width: 80px; letter-spacing: 0.06em; flex-shrink: 0; } .mff-ticket__agenda-label { font-family: var(--mff-body); font-style: italic; font-size: 13px; color: var(--mff-ink); } /* ===================================================================== VENUES ===================================================================== */ /* Venues — map row with clickable pins */ .mff-vmap__head { margin: 0 0 36px; } .mff-vmap__title { font-size: clamp(1.75rem, 5vw, 2.75rem); line-height: 0.98; letter-spacing: -0.025em; margin: 0; } .mff-vmap__wrap { position: relative; width: 100%; } .mff-vmap__img { display: block; width: 100%; height: auto; } .mff-vmap__pin { position: absolute; width: 60px; height: 60px; transform: translate(-50%, -50%); } .mff-vmap__hot { position: absolute; inset: 0; display: block; border-radius: 50%; cursor: pointer; } .mff-vmap__pin:hover .mff-vmap__hot, .mff-vmap__pin:focus-within .mff-vmap__hot { box-shadow: 0 0 0 5px rgba(255,255,255,0.35); } .mff-vmap__pop { position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%) translateY(6px); width: 250px; padding: 20px 20px 18px; z-index: 40; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 18px 44px rgba(0,0,0,0.24); font-family: var(--mff-label); } .mff-vmap__pin:hover .mff-vmap__pop, .mff-vmap__pin:focus-within .mff-vmap__pop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } .mff-vmap__pin--butter .mff-vmap__pop { background: var(--mff-butter); } .mff-vmap__pin--pink .mff-vmap__pop { background: var(--mff-pink); } .mff-vmap__pop::before { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; } .mff-vmap__pop::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); top: 100%; border: 9px solid transparent; border-top-color: var(--mff-butter); } .mff-vmap__pin--pink .mff-vmap__pop::after { border-top-color: var(--mff-pink); } .mff-vmap__pin.is-below .mff-vmap__pop { bottom: auto; top: calc(100% + 12px); transform: translateX(-50%) translateY(-6px); } .mff-vmap__pin.is-below:hover .mff-vmap__pop, .mff-vmap__pin.is-below:focus-within .mff-vmap__pop { transform: translateX(-50%) translateY(0); } .mff-vmap__pin.is-below .mff-vmap__pop::before { top: auto; bottom: 100%; } .mff-vmap__pin.is-below .mff-vmap__pop::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--mff-butter); } .mff-vmap__pin--pink.is-below .mff-vmap__pop::after { border-bottom-color: var(--mff-pink); } .mff-vmap__pop-eyebrow { font-weight: 700; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mff-forest); opacity: 0.75; margin-bottom: 8px; } .mff-vmap__pop-title { font-weight: 700; font-size: 18px; line-height: 1.15; color: var(--mff-forest); margin-bottom: 10px; letter-spacing: 0.01em; } .mff-vmap__pop-addr { font-weight: 700; font-size: 11px; line-height: 1.45; color: var(--mff-ink); opacity: 0.85; margin-bottom: 16px; } .mff-vmap__pop-btns { display: flex; flex-direction: column; gap: 8px; } .mff-vmap__pop-btn { font-weight: 700; font-size: var(--mff-fs-body); letter-spacing: 0.1em; text-transform: uppercase; padding: 11px 10px; text-decoration: none; text-align: center; flex: 1; white-space: nowrap; } .mff-vmap__pop-btn--solid { background: var(--mff-forest); color: var(--mff-cream); } .mff-vmap__pop-btn--outline { border: 1px solid var(--mff-forest); color: var(--mff-forest); } /* Always-on venue name labels overlaid on the map (crisp HTML text, so they stay legible at any map width — the illustration's baked-in text was removed). */ .mff-vmap__label { position: absolute; top: calc(50% + 22px); left: 50%; transform: translateX(-50%); width: max-content; max-width: 190px; padding: 4px 10px; background: var(--mff-cream); color: var(--mff-forest); font-family: var(--mff-label); font-weight: 700; font-size: clamp(12px, 1.5vw, 16px); line-height: 1.15; text-align: center; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); pointer-events: none; z-index: 6; } .mff-vmap__label--bl { transform: translateX(-74%); } @media (max-width: 600px) { .mff-vmap__pop { display: none; } .mff-vmap__label { font-size: 12px; padding: 3px 8px; top: calc(50% + 13px); } .mff-vmap__label--narrow { max-width: 120px; } .mff-vmap__label--l { transform: translateX(-72%); } .mff-vmap__label--r { transform: translateX(-22%); } .mff-vmap__label--bl { transform: translateX(-64%); } } /* Venues — boarding-pass cards */ .mff-pass { display: grid; grid-template-columns: 220px 320px 1fr; background: var(--mff-cream); border: 1px solid var(--mff-ink); overflow: hidden; scroll-margin-top: 24px; } .mff-venues .mff-pass + .mff-pass { margin-top: 24px; } .mff-pass__stub { position: relative; padding: 28px 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; min-height: 280px; border-right: 1px dashed rgba(31,42,36,0.32); } .mff-pass__stub--butter { background: var(--mff-butter); } .mff-pass__stub--pink { background: var(--mff-pink); } .mff-pass__date { font-family: var(--mff-display); font-weight: 800; font-size: 48px; color: var(--mff-forest); line-height: 0.95; letter-spacing: -0.03em; } .mff-pass__mon { font-size: 32px; } .mff-pass__dow { font-family: var(--mff-label); font-weight: 700; font-size: 16px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 8px; } .mff-pass__region { font-family: var(--mff-label); font-weight: 700; font-size: 16px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.1em; } .mff-pass__perf { position: absolute; top: 0; right: -6px; height: 100%; width: 12px; background-image: radial-gradient(circle, var(--mff-cream) 4px, transparent 5px); background-size: 12px 22px; background-repeat: repeat-y; background-position: center; } .mff-pass__photo { border-right: 1px solid var(--mff-ink); position: relative; overflow: hidden; min-height: 280px; } .mff-pass__photo--butter { background: var(--mff-butter); } .mff-pass__photo--pink { background: var(--mff-pink); } .mff-pass__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mff-pass__body { padding: 28px 32px; } .mff-pass__name { font-family: var(--mff-display); font-weight: 800; font-size: 36px; margin: 0; color: var(--mff-forest); line-height: 1; letter-spacing: -0.025em; } .mff-pass__address { font-size: 15px; color: var(--mff-ink); margin-top: 8px; } .mff-pass__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--mff-rule); } .mff-pass__col-label { font-family: var(--mff-label); font-size: 10px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: 8px; } .mff-pass__col-label--sub { margin-top: 12px; } .mff-pass__transit { display: flex; flex-direction: column; gap: 8px; } .mff-pass__trow { display: flex; gap: 10px; align-items: baseline; } .mff-pass__mode { font-family: var(--mff-label); font-size: 9px; font-weight: 700; color: var(--mff-cream); padding: 3px 6px; text-transform: uppercase; letter-spacing: 0.12em; flex-shrink: 0; } .mff-pass__mode--mrt { background: var(--mff-red); } .mff-pass__mode--lrt { background: var(--mff-forest); } .mff-pass__mode--bus { background: var(--mff-ink); } .mff-pass__tinfo { font-size: 13px; color: var(--mff-ink); line-height: 1.35; } .mff-pass__tname { font-family: var(--mff-display); font-weight: 700; font-size: 13px; color: var(--mff-forest); } .mff-pass__tline { font-family: var(--mff-label); font-size: 10px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.12em; margin-left: 6px; } .mff-pass__tdetail { display: block; font-size: 13px; color: var(--mff-muted); margin-top: 2px; } .mff-pass__cap { font-size: 13px; color: var(--mff-ink); line-height: 1.45; margin-bottom: 10px; } .mff-pass__parking { font-size: 13px; color: var(--mff-ink); line-height: 1.45; } .mff-pass__access { display: flex; flex-wrap: wrap; gap: 6px; } .mff-pass__chip { font-family: var(--mff-label); font-size: 9px; color: var(--mff-ink); padding: 4px 8px; border: 1px solid var(--mff-rule); text-transform: uppercase; letter-spacing: 0.1em; } .mff-pass__cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; } .mff-pass__btn { font-family: var(--mff-label); font-size: var(--mff-fs-body); padding: 10px 16px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; } .mff-pass__btn--solid { background: var(--mff-forest); color: var(--mff-cream); } .mff-pass__btn--outline { border: 1px solid var(--mff-forest); color: var(--mff-forest); } /* ===================================================================== FAQ ===================================================================== */ .mff-faq__jump { margin-bottom: 48px; } .mff-faq__jump-label { display: block; font-family: var(--mff-label); font-size: 11px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; } .mff-faq__jump-links { display: flex; gap: 12px; flex-wrap: wrap; } .mff-faq__chip { font-family: var(--mff-label); font-size: 11px; padding: 10px 18px; text-decoration: none; color: var(--mff-ink); text-transform: uppercase; letter-spacing: 0.15em; } .mff-faq__chip--butter { background: var(--mff-butter); } .mff-faq__chip--pink { background: var(--mff-pink); } .mff-faq__chip--cream { background: var(--mff-cream); } .mff-faq__chip.is-bordered { border: 1px solid var(--mff-ink); } .mff-faq__group { margin-top: 0; } .mff-faq__groups > .mff-faq__group:first-child { margin-top: 0; } .mff-faq__group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; } .mff-faq__swatch { width: 12px; height: 12px; flex-shrink: 0; } .mff-faq__swatch--butter { background: var(--mff-butter); } .mff-faq__swatch--pink { background: var(--mff-pink); } .mff-faq__swatch--cream { background: var(--mff-cream); } .mff-faq__swatch.is-bordered { border: 1px solid var(--mff-ink); } .mff-faq__group-tag { font-family: var(--mff-label); font-size: 11px; color: var(--mff-ink); text-transform: uppercase; letter-spacing: 0.18em; } .mff-faq__group-line { flex: 1; height: 1px; background: var(--mff-rule); } .mff-faq__group-count { font-family: var(--mff-label); font-size: 11px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.15em; white-space: nowrap; } .mff-faq__item { border-top: 1px solid var(--mff-ink); padding: 24px 0; } .mff-faq__q { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; cursor: pointer; list-style: none; font-family: var(--mff-display); font-weight: 800; font-size: 26px; color: var(--mff-forest); letter-spacing: -0.015em; line-height: 1.1; } .mff-faq__q::-webkit-details-marker { display: none; } .mff-faq__sign { font-family: var(--mff-label); font-size: 18px; color: var(--mff-red); line-height: 1; } .mff-faq__item[open] .mff-faq__sign { transform: rotate(45deg); display: inline-block; } .mff-faq__a { font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 16px 0 0; line-height: 1.6; max-width: 900px; } .mff-faq-cta__grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } .mff-faq-cta__eyebrow { font-family: var(--mff-label); font-size: 11px; color: var(--mff-butter); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; } .mff-faq-cta__title { font-size: clamp(2rem, 4vw, 2.75rem); color: var(--mff-cream); margin: 0; line-height: 1; letter-spacing: -0.02em; } .mff-faq-cta__title em { color: var(--mff-butter); } .mff-faq-cta__btn { font-family: var(--mff-label); font-size: var(--mff-fs-body); padding: 16px 24px; background: var(--mff-butter); color: var(--mff-ink); text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; white-space: nowrap; } .mff-faq-contact { background: var(--mff-teal); } .mff-faq-contact__text { font-family: var(--mff-body); font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0; line-height: 1.5; } .mff-faq-contact__text a { color: var(--mff-forest); font-weight: 600; } /* ===================================================================== FILMS LISTING ===================================================================== */ .mff-filmspread { border-bottom: 1px solid var(--mff-rule); } .mff-filmspread__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: start; } .mff-filmspread__img { aspect-ratio: 16/9; overflow: hidden; } .mff-filmspread__img--butter { background: var(--mff-butter); } .mff-filmspread__img--pink { background: var(--mff-pink); } .mff-filmspread__img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-filmspread__title { display: inline-block; font-size: 48px; margin: 0 0 14px; color: var(--mff-forest); line-height: 1; letter-spacing: -0.02em; padding: 12px 22px 16px; } .mff-filmspread__title--butter { background: var(--mff-butter); } .mff-filmspread__title--pink { background: var(--mff-pink); } .mff-filmspread__blurb { font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0 0 28px; line-height: 1.55; } .mff-filmspread__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding-top: 20px; border-top: 1px solid var(--mff-rule); margin-bottom: 32px; } .mff-filmspread__facts-label { font-family: var(--mff-label); font-size: 10px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.15em; } .mff-filmspread__facts-val { font-size: 16px; color: var(--mff-ink); margin-top: 6px; } .mff-filmspread__btns { gap: 12px; flex-wrap: wrap; } .mff-films-cta { text-align: center; } .mff-prognote__grid { display: grid; grid-template-columns: 1fr 2fr; gap: 56px; align-items: start; } .mff-prognote__title { font-size: clamp(2.5rem, 5vw, 3.75rem); color: var(--mff-cream); margin: 0; line-height: 1; letter-spacing: -0.02em; } .mff-prognote__title em { color: var(--mff-red); } .mff-prognote__body p { font-size: var(--mff-fs-body); line-height: 1.55; color: var(--mff-cream); margin: 0; } .mff-prognote__muted { color: rgba(244,237,224,0.72); margin-top: 24px; } /* ===================================================================== FILM DETAIL ===================================================================== */ .mff-fd__crumb { display: flex; align-items: center; gap: 12px; padding: 20px var(--mff-pad-x) 0; flex-wrap: wrap; } .mff-fd__crumb-back { font-family: var(--mff-label); font-size: 11px; color: var(--mff-muted); text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; } .mff-fd__crumb-sep { font-family: var(--mff-label); font-size: 11px; color: var(--mff-muted); opacity: 0.5; } .mff-fd__crumb-title { font-family: var(--mff-label); font-size: 11px; color: var(--mff-ink); text-transform: uppercase; letter-spacing: 0.18em; } .mff-fd__crumb-line { flex: 1; height: 1px; background: var(--mff-rule); margin-left: 16px; min-width: 20px; } .mff-fd__crumb-note { font-family: var(--mff-label); font-size: 11px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.18em; display: inline-flex; align-items: center; gap: 8px; } .mff-fd__dot { width: 8px; height: 8px; background: var(--mff-red); border-radius: 50%; } .mff-fd__hero { position: relative; height: 720px; overflow: hidden; background: var(--mff-ink); margin-top: 20px; } .mff-fd__hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .mff-fd__hero-img.is-pos-psb { object-position: center 25%; } .mff-fd__gallery { position: relative; aspect-ratio: 16/9; overflow: hidden; } .mff-fd__gslide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; } .mff-fd__gslide.is-active { opacity: 1; } .mff-fd__gallery-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 48px; height: 48px; padding: 0; border: 1px solid rgba(255,255,255,0.55); background: rgba(15,22,18,0.5); color: var(--mff-on-image); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s ease; } .mff-fd__gallery-arrow:hover { background: rgba(15,22,18,0.85); } .mff-fd__gallery-arrow--prev { left: 16px; } .mff-fd__gallery-arrow--next { right: 16px; } .mff-fd__trailer-frame[data-yt] { cursor: pointer; } .mff-fd__trailer-iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .mff-fd__hero-scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,30,24,0.55) 0%, rgba(20,30,24,0.05) 30%, rgba(20,30,24,0) 50%, rgba(20,30,24,0.92) 100%); } .mff-fd__hero-index { position: absolute; top: 28px; left: var(--mff-pad-x); right: var(--mff-pad-x); display: flex; justify-content: space-between; gap: 16px; color: var(--mff-on-image); font-family: var(--mff-label); font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.9; } .mff-fd__hero-prog { color: var(--mff-butter); } .mff-fd__hero-titlewrap { position: absolute; left: var(--mff-pad-x); right: var(--mff-pad-x); bottom: 64px; } .mff-fd__hero-title { font-family: var(--mff-display); font-weight: 800; font-size: clamp(2.5rem, 9vw, 6.25rem); line-height: 0.88; color: var(--mff-on-image); letter-spacing: -0.04em; max-width: 1100px; margin: 0; text-shadow: 0 2px 24px rgba(0,0,0,0.5); } .mff-fd__infobar { background: var(--mff-cream); padding: 40px var(--mff-pad-x); border-bottom: 1px solid var(--mff-rule); display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .mff-fd__info { padding-left: 24px; border-left: 1px solid var(--mff-rule); } .mff-fd__infobar .mff-fd__info:first-child { padding-left: 0; border-left: none; } .mff-fd__info-label { font-family: var(--mff-label); font-size: 10px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.18em; } .mff-fd__info-val { font-size: var(--mff-fs-body); color: var(--mff-ink); margin-top: 10px; line-height: 1.45; } .mff-fd__synopsis { background: var(--mff-cream); padding: 88px var(--mff-pad-x); display: grid; grid-template-columns: 1fr 1.4fr; gap: 56px; align-items: start; } .mff-fd__synopsis-tab { display: flex; align-items: center; padding: 36px 32px; align-self: stretch; } .mff-fd__synopsis-tab--butter { background: var(--mff-butter); } .mff-fd__synopsis-tab span { font-family: var(--mff-display); font-weight: 800; font-size: 72px; color: var(--mff-forest); line-height: 0.95; letter-spacing: -0.035em; } .mff-fd__synopsis-lede { font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0; line-height: 1.6; } .mff-fd__synopsis-body p { font-size: var(--mff-fs-body); color: var(--mff-ink); line-height: 1.6; } .mff-fd__synopsis-body p + p { margin-top: 24px; } .mff-fd__reserve { background: var(--mff-cream); padding: 0 var(--mff-pad-x) 80px; text-align: center; } .mff-fd__reserve-btn { font-family: var(--mff-label); font-size: var(--mff-fs-body); padding: 18px 32px; background: var(--mff-forest); color: var(--mff-cream); text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; display: inline-block; } .mff-fd__synopsis-body .mff-fd__reserve-btn { margin-top: 32px; } .mff-fd__trailer { padding: 96px var(--mff-pad-x); } .mff-fd__trailer--pink { background: var(--mff-pink); } .mff-fd__trailer--butter { background: var(--mff-butter); } .mff-fd__trailer-head { margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid rgba(31,42,36,0.22); } .mff-fd__trailer-title { font-size: clamp(2.5rem, 6vw, 4rem); color: var(--mff-forest); margin: 0; line-height: 0.95; letter-spacing: -0.03em; } .mff-fd__trailer-title em { color: var(--mff-red); } .mff-fd__trailer-frame { position: relative; display: block; aspect-ratio: 16/9; background: #000; overflow: hidden; box-shadow: 0 0 0 8px var(--mff-forest); } .mff-fd__trailer-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .mff-fd__trailer-dim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(20,30,24,0.15), rgba(20,30,24,0.45)); } .mff-fd__trailer-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 96px; height: 96px; border-radius: 50%; background: var(--mff-butter); color: var(--mff-forest); display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .mff-fd__trailer-play svg { margin-left: 4px; } .mff-fd__stills { background: var(--mff-forest); padding: 64px var(--mff-pad-x); } .mff-fd__stills-main { aspect-ratio: 16/9; background: var(--mff-ink); overflow: hidden; } .mff-fd__stills-main img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-fd__stills-strip { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; margin-top: 20px; } .mff-fd__still { aspect-ratio: 16/9; background: var(--mff-ink); overflow: hidden; } .mff-fd__still img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-fd__quote { position: relative; overflow: hidden; padding: 180px var(--mff-pad-x) 140px; } .mff-fd__quote--butter { background: var(--mff-butter); } .mff-fd__quote--pink { background: var(--mff-pink); } .mff-fd__quote-mark { position: absolute; font-family: var(--mff-display); font-weight: 800; color: var(--mff-red); font-size: 360px; line-height: 1; letter-spacing: -0.08em; height: 200px; overflow: hidden; opacity: 0.92; pointer-events: none; } .mff-fd__quote-mark--open { top: 40px; left: 36px; } .mff-fd__quote-mark--close { bottom: -110px; right: 56px; } .mff-fd__quote-inner { position: relative; max-width: 980px; margin-left: 96px; padding-top: 80px; } .mff-fd__quote-eyebrow { font-family: var(--mff-label); font-size: 11px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 28px; display: flex; align-items: center; gap: 14px; } .mff-fd__quote-rule { width: 24px; height: 1px; background: var(--mff-red); } .mff-fd__quote-text { font-family: var(--mff-serif); font-style: italic; font-weight: 400; font-size: clamp(1.75rem, 4.5vw, 2.875rem); line-height: 1.1; color: var(--mff-forest); margin: 0; letter-spacing: -0.02em; } .mff-fd__quote-accent { font-style: normal; color: var(--mff-red); } .mff-fd__quote-attr { display: flex; align-items: center; gap: 16px; margin-top: 44px; font-family: var(--mff-label); font-size: 16px; color: var(--mff-forest); text-transform: uppercase; letter-spacing: 0.18em; opacity: 0.85; } .mff-fd__quote-attr-rule { width: 48px; height: 1px; background: var(--mff-forest); opacity: 0.5; } .mff-fd__themes { background: var(--mff-cream); padding: 96px var(--mff-pad-x); } .mff-fd__themes-head { margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--mff-rule); } .mff-fd__themes-title { font-size: clamp(2.5rem, 6vw, 4rem); color: var(--mff-forest); margin: 0; line-height: 0.95; letter-spacing: -0.03em; } .mff-fd__themes-title em { color: var(--mff-red); } .mff-fd__themes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .mff-fd__theme { padding: 32px 28px 36px; display: flex; flex-direction: column; min-height: 280px; } .mff-fd__theme--butter { background: var(--mff-butter); } .mff-fd__theme--pink { background: var(--mff-pink); } .mff-fd__theme--teal { background: var(--mff-teal); } .mff-fd__theme-title { font-size: 30px; color: var(--mff-forest); margin: 0 0 14px; line-height: 1.05; letter-spacing: -0.02em; } .mff-fd__theme p { font-size: var(--mff-fs-body); color: var(--mff-ink); margin: 0; line-height: 1.6; } .mff-fd__screenings { padding: 96px var(--mff-pad-x); } .mff-fd__screenings-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--mff-cream); } .mff-fd__screenings-eyebrow { font-family: var(--mff-label); font-size: 11px; color: var(--mff-butter); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; } .mff-fd__screenings-title { font-size: clamp(2.5rem, 6vw, 4rem); color: var(--mff-cream); margin: 0; line-height: 0.95; letter-spacing: -0.03em; } .mff-fd__screenings-title em { color: var(--mff-butter); } .mff-fd__screenings-link { font-family: var(--mff-label); font-size: 12px; color: var(--mff-butter); text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; border-bottom: 1px solid var(--mff-butter); padding-bottom: 4px; white-space: nowrap; } .mff-fd__srow { display: grid; grid-template-columns: 200px 150px 1fr 130px 220px; gap: 28px; align-items: center; padding: 28px 0; border-bottom: 1px solid rgba(244,237,224,0.18); } .mff-fd__srow:last-child { border-bottom: none; } .mff-fd__sdate { font-family: var(--mff-display); font-weight: 800; font-size: 28px; line-height: 1.1; letter-spacing: -0.01em; } .mff-fd__sdate .is-day { color: var(--mff-butter); } .mff-fd__sdate .is-dow { color: var(--mff-cream); } .mff-fd__sregion { font-family: var(--mff-label); font-size: 11px; color: var(--mff-pink); text-transform: uppercase; letter-spacing: 0.16em; } .mff-fd__svenue { font-family: var(--mff-display); font-weight: 800; font-size: 18px; color: var(--mff-cream); line-height: 1.1; letter-spacing: -0.015em; } .mff-fd__stime { font-family: var(--mff-label); font-size: 13px; color: var(--mff-cream); letter-spacing: 0.06em; } .mff-fd__srsvp { font-family: var(--mff-label); font-size: var(--mff-fs-body); color: var(--mff-forest); text-align: center; text-transform: uppercase; letter-spacing: 0.14em; background: var(--mff-butter); padding: 12px 16px; text-decoration: none; white-space: nowrap; } .mff-fd__other { display: grid; grid-template-columns: 1fr 1.2fr; align-items: stretch; min-height: 360px; background: var(--mff-cream); border-top: 1px solid var(--mff-rule); } .mff-fd__other-img { overflow: hidden; } .mff-fd__other-img--butter { background: var(--mff-butter); } .mff-fd__other-img--pink { background: var(--mff-pink); } .mff-fd__other-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .mff-fd__other-content { padding: 64px var(--mff-pad-x); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .mff-fd__other-eyebrow { font-family: var(--mff-label); font-weight: 700; font-size: 11px; color: var(--mff-red); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 14px; } .mff-fd__other-title { font-size: clamp(2.25rem, 6vw, 3.5rem); color: var(--mff-forest); margin: 0; line-height: 0.92; letter-spacing: -0.035em; } .mff-fd__other-btn { font-family: var(--mff-label); font-size: var(--mff-fs-body); margin-top: 32px; padding: 16px 28px; background: var(--mff-forest); color: var(--mff-cream); text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; } /* ===================================================================== INNER-PAGE RESPONSIVE ===================================================================== */ @media (max-width: 900px) { .mff-phero__inner, .mff-about-hero__grid, .mff-mission__grid, .mff-values__grid, .mff-org__grid, .mff-stories__grid, .mff-facts__grid, .mff-pass, .mff-filmspread__grid, .mff-prognote__grid, .mff-faq-cta__grid, .mff-cta-band, .mff-fd__synopsis, .mff-fd__other { grid-template-columns: 1fr; gap: 32px; } .mff-partners__grid, .mff-fd__infobar, .mff-fd__themes-grid, .mff-pass__cols, .mff-filmspread__facts { grid-template-columns: 1fr 1fr; } .mff-pass__perf { display: none; } .mff-pass__photo { min-height: 220px; } .mff-pass__stub { min-height: 0; } .mff-give__grid { grid-template-columns: 1fr; } .mff-facts__aside { border-left: none; padding-left: 0; } .mff-ticket { grid-template-columns: 1fr; } .mff-ticket__perf { display: none; } .mff-ticket__stub { flex-direction: row; flex-wrap: wrap; } .mff-ticket__show { grid-template-columns: 56px 1fr; } .mff-ticket__time, .mff-ticket__rsvp { grid-column: 2; } .mff-fd__hero { height: 480px; } .mff-fd__srow { grid-template-columns: 1fr 1fr; gap: 12px 20px; } .mff-fd__srsvp { grid-column: 1 / -1; } .mff-fd__quote { padding: 120px var(--mff-pad-x) 100px; } .mff-fd__quote-inner { margin-left: 0; } .mff-fd__quote-mark { font-size: 200px; } .mff-statbox__num { font-size: 40px; } .mff-ticket__date { font-size: 56px; } } @media (max-width: 600px) { .mff-partners__grid, .mff-fd__themes-grid, .mff-fd__infobar { grid-template-columns: 1fr; } .mff-cta-band__buttons { flex-direction: column; align-items: flex-start; } .mff-pass__cols { grid-template-columns: 1fr; gap: 24px; } .mff-vmap__wrap { max-width: 400px; margin-left: auto; margin-right: auto; } .mff-nav { gap: 12px; } .mff-nav__trigger { font-size: clamp(11px, 3.6vw, 16px); } } /* ===================================================================== DYSLEXIA-FRIENDLY READING MODE (toggled by .mff-a11y-btn) ===================================================================== */ @font-face { font-family: "OpenDyslexic"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5/files/opendyslexic-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "OpenDyslexic"; src: url("https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5/files/opendyslexic-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } html.mff-dyslexia { --mff-display: "OpenDyslexic", var(--wp--preset--font-family--montserrat); --mff-body: "OpenDyslexic", var(--wp--preset--font-family--montserrat); --mff-label: "OpenDyslexic", var(--wp--preset--font-family--cadet); --mff-serif: "OpenDyslexic", var(--wp--preset--font-family--source-serif); } html.mff-dyslexia body { letter-spacing: 0.03em; word-spacing: 0.14em; line-height: 1.8; } html.mff-dyslexia em, html.mff-dyslexia i, html.mff-dyslexia .mff-em { font-style: normal; } html.mff-dyslexia h1, html.mff-dyslexia h2, html.mff-dyslexia h3, html.mff-dyslexia h4 { letter-spacing: 0; line-height: 1.18; } .mff-a11y-btn { position: fixed; right: 20px; bottom: 20px; z-index: 200; display: inline-flex; align-items: center; gap: 9px; padding: 12px 18px; background: var(--mff-forest); color: var(--mff-cream); border: none; border-radius: 999px; cursor: pointer; box-shadow: 0 8px 24px rgba(0,0,0,0.28); font-family: var(--mff-label); font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; transition: background .18s ease, transform .18s ease; } .mff-a11y-btn:hover { transform: translateY(-2px); } .mff-a11y-btn:focus-visible { outline: 3px solid var(--mff-butter); outline-offset: 2px; } .mff-a11y-btn svg { display: block; flex-shrink: 0; } .mff-a11y-btn[aria-pressed="true"] { background: var(--mff-butter); color: var(--mff-forest); } @media (max-width: 600px) { .mff-a11y-btn { padding: 13px; } .mff-a11y-btn__label { display: none; } } @media (max-width: 600px) { .wp-block-button.is-style-mff-primary .wp-block-button__link, .wp-block-button.is-style-mff-secondary .wp-block-button__link, .wp-block-button.is-style-mff-accent .wp-block-button__link, .mff-filmcard__more, .mff-sched__reserve, .mff-sched__cta-btn, .mff-org__link, .mff-givecard__cta, .mff-stories__cta, .mff-facts__hl-cta, .mff-ticket__rsvp, .mff-pass__btn, .mff-faq-cta__btn, .mff-fd__reserve-btn, .mff-fd__srsvp, .mff-fd__other-btn { font-size: 14px; letter-spacing: 0.08em; } } /* ===================================================================== PHONE RESPONSIVE SWEEP (v2.4.48) --------------------------------------------------------------------- Audited with WordPress Playground + Playwright at 320/360/375/390/414 across all 10 public pages. Before this block every page had a hard content floor wider than every phone tested: all 10 pages -> 421px (footer: 2 cards x 180px + 12 gap + 48 pad) home -> 458px (.mff-social__title "#MINDSFF2026" @56px = 434px) about -> 501px (.mff-tl__detail 180px poster inside a 94px track) body{overflow-x:clip} was HIDING that overflow, so the content was not scrollable-to -- it was simply cut off. Target: documentElement.scrollWidth == viewport at every width, so the clip is a backstop and never a mask. Rules: - Every clamp() MAX equals the previous fixed px value, so >=900px desktop rendering is byte-identical. Only phones change. - Fluid type is preferred over breakpoint jumps so there is no width between 320 and 900 that is unhandled. ===================================================================== */ /* 0 -- THE ONE THE OVERFLOW SWEEP COULD NOT SEE (v2.4.54) `.mff-intro__title` is a FIXED 72px with no mobile rule -- the only major heading in the theme with no responsive treatment. At 320 the content box is 272px but "Intellectual" needs 426px, so the `overflow-wrap: break-word` it inherits from the block styles CHOPS it mid-word: "throug/h", "Intellect/ual", "Disabilit/y" -- in NORMAL mode, on phones, today. Why 130/130 "clean" missed it: break-word prevents PAGE overflow *by* chopping the word, so documentElement.scrollWidth stays exactly on the viewport while the text visibly breaks. A page-overflow sweep is structurally blind to this; it needs a per-word "does this word fit its box" probe (tools/.../orphans2.mjs). clamp max == 4.5rem == the original 72px, so >=514px is byte-identical. */ .mff-intro__title { font-size: clamp(2rem, 14vw, 4.5rem); } /* 1 -- FLUID DISPLAY TYPE. These were fixed px and set the page floors. max == old value. */ .mff-social__title { font-size: clamp(2rem, 10vw, 3.5rem); } /* was 56px */ .mff-social__tile span { font-size: clamp(0.9375rem, 4.2vw, 1.5rem); } /* was 24px */ .mff-fd__synopsis-tab span { font-size: clamp(2.25rem, 11vw, 4.5rem); } /* was 72px */ .mff-tl__year { font-size: clamp(2.25rem, 9vw, 4rem); } /* was 64px */ .mff-statbox__num { font-size: clamp(2rem, 8vw, 3.5rem); } /* was 56px */ .mff-stat__num { font-size: clamp(1.5rem, 7vw, 3.5rem); } /* was 56px */ .mff-valuecard__num { font-size: clamp(2rem, 8vw, 3.5rem); } /* was 56px */ .mff-ticket__date { font-size: clamp(2.5rem, 9vw, 4.5rem); } /* was 72px/56px */ /* 2 -- UNBREAKABLE TOKENS. "#MINDSFF2026", "MFF@singaporefilmsociety.com", long URLs: a single word wider than its box pins the grid track open and/or spills past the edge. NOTE: `break-word` does NOT reduce the min-content size -- only `anywhere` does -- so `anywhere` is required wherever the box is intrinsically sized (grid/flex tracks). Both only break as a last resort, so normal words are unaffected. */ .mff-social__title, .mff-social__tile span, .mff-tl__films-list li, .mff-footer__card-label, .mff-statbox__label, .mff-faq__a, .mff-faq-contact__text { overflow-wrap: anywhere; } /* 3 -- Fluid stat label. Pass-6 pinned this to nowrap/14px to hold one line; that fits at >=375px but overflowed by ~50px at 320/360. Keeping the one-line intent by scaling the label instead of unpinning it. */ @media (max-width: 600px) { .mff-statbox__label { font-size: clamp(10px, 3.1vw, 14px); letter-spacing: 0; } .mff-statbox { gap: 14px; } } /* 4 -- STACK THE REMAINING FIXED/MULTI-COLUMN GRIDS. Each of these was still 2-4 columns at 414px and below. */ @media (max-width: 600px) { /* Footer -- the site-wide 421px floor, present on all 10 pages */ .mff-footer__social { grid-template-columns: 1fr; } /* Home */ .mff-sched__row { grid-template-columns: 1fr; gap: 6px 16px; } .mff-sched__reserve { justify-self: start; } /* About -- timeline. Nested 160px + 180px tracks; the inner poster column alone was wider than its own parent track. */ .mff-tl__row { grid-template-columns: 1fr; gap: 14px; } .mff-tl__detail { grid-template-columns: 1fr; gap: 22px; } .mff-tl__poster { max-width: 180px; } /* Films / film detail */ .mff-filmspread__facts { grid-template-columns: 1fr; } .mff-fd__srow { grid-template-columns: 1fr; gap: 8px; } .mff-fd__srsvp { justify-self: start; } /* Schedule -- reset the <=900px grid-column pins before restacking, or the children stay pinned to a column that no longer exists. */ .mff-ticket__show { grid-template-columns: 1fr; gap: 6px; } .mff-ticket__time, .mff-ticket__rsvp { grid-column: 1; } .mff-ticket__rsvp { justify-self: start; } /* Nav dropdown panels: see section 7 -- they need re-anchoring, not just a width cap, and the fault extends past 600px. */ } /* 5 -- SOCIAL TILE CAPTIONS. Tiles are square and intrinsically small on phones (~130px at 320). The 20px desktop padding left only 90px for "#MINDSFF2026". Trim the padding so the caption fits on one line instead of relying on the `anywhere` break above, which stays as the guarantee it can never spill whatever caption the client adds later. */ @media (max-width: 600px) { .mff-social__tile span { padding: 10px; } } /* 6 -- VERY NARROW (<=380px). The 3-up homepage stat row and the 2-up value cards stay readable down to 320 via fluid nums above; these are the two that still could not fit. */ @media (max-width: 380px) { .mff-values__grid { grid-template-columns: 1fr; } .mff-social__grid { gap: 8px; } } /* 7 -- NAV DROPDOWN PANELS (v2.4.49) --------------------------------------------------------------------- Each panel is absolutely positioned against its OWN trigger (.mff-nav__item is the containing block) and centred on it via left:50% + translateX(-50%). The nav is centred in the header, so the OUTER triggers sit near the viewport edges -- a 264-350px panel centred on them hangs off the left ("About Us") or the right ("Festival Guide"). Because the panel is a positioned box, body{overflow-x:clip} CROPS it rather than letting you scroll to it: the menu item labels are simply sliced off. Measured cropping (v2.4.48): About Us -52px and Festival Guide +28px at 393; still broken at 601 (-21px), where the panel reverts to nowrap and grows to ~349px. Capping the WIDTH does not fix this -- the panel is mis-ANCHORED. So below the desktop nav, anchor the panel to the whole .mff-nav (which is itself centred in the header) instead of to a single trigger: a centred panel under a centred nav is centred in the viewport, and therefore always fits, for every trigger, at every width. >=768px is deliberately untouched: panels stay anchored under their own trigger, which is the signed-off desktop behaviour. NOTE FOR FUTURE AUDITS: these panels are display:none until opened, so a static overflow sweep CANNOT see them. They must be force-opened (add .is-open to .mff-nav__item) and measured. That blind spot is why v2.4.48 shipped 130/130 "clean" with the nav still cropped. */ @media (max-width: 767px) { .mff-nav { position: relative; } .mff-nav__item { position: static; } .mff-nav__panel { left: 50%; right: auto; transform: translateX(-50%); min-width: 0; width: max-content; max-width: min(92vw, 320px); } .mff-nav__panel a { white-space: normal; } } /* 8 -- DYSLEXIA READING MODE ON NARROW SCREENS (v2.4.50) --------------------------------------------------------------------- OpenDyslexic renders **~47% wider than Montserrat at the same px** (measured: "Persons with Intellectual Disability" @32px = 550px in Montserrat, 806px in OpenDyslexic), on top of letter-spacing .03em and word-spacing .14em. Every size in this theme was tuned for Montserrat, so turning the accessibility toggle ON re-broke 8 of the 10 pages that v2.4.49 had just verified clean -- up to +108px at 320. The a11y mode was the LEAST tested mode on the site, on a festival for a disability charity, so this is the one that most needed the sweep. Three distinct causes, all measured at 320: - long real words at display sizes ("Selection" @56px -> 374px, "Frequently" @48px -> 352px, "enterprises" @36px -> 288px) - `white-space: nowrap` buttons ("Reserve Tickets ->" pinned at 296px; overflow-wrap cannot help a nowrap element -- the pin must be released) - unbreakable tokens (MFF@singaporefilmsociety.com -> 393px, singaporefilmsociety.com @14px -> 360px) Body copy is deliberately NOT scaled down -- full-size body text IS the accessibility win. Only the oversized display type steps back, and only below the desktop nav. `anywhere` breaks a word only as a last resort, so it costs nothing when the text already fits. */ /* 8a -- EVERY WIDTH. Dyslexia mode is NOT a phone-only problem: the theme has fixed-px grid tracks (.mff-fd__srow = 200px 150px 1fr 130px 220px) and a fixed-width popover (.mff-vmap__pop = 250px) whose nowrap labels overflow in OpenDyslexic even at 1440 (measured: film pages +82 at 1440, venues +11 at 768). Scoped to html.mff-dyslexia, so normal (non-dyslexia) rendering at every width is untouched. */ html.mff-dyslexia, html.mff-dyslexia * { overflow-wrap: anywhere; } /* Release the nowrap pins -- overflow-wrap is INERT while nowrap holds, so these must be released explicitly or they keep pinning tracks open. */ html.mff-dyslexia .mff-sched__reserve, html.mff-dyslexia .mff-ticket__rsvp, html.mff-dyslexia .mff-fd__srsvp, html.mff-dyslexia .mff-fd__screenings-link, html.mff-dyslexia .mff-faq-cta__btn, html.mff-dyslexia .mff-faq__group-count, html.mff-dyslexia .mff-footer__card-handle, html.mff-dyslexia .mff-footer__org-label, html.mff-dyslexia .mff-statbox__num, html.mff-dyslexia .mff-statbox__label, html.mff-dyslexia .mff-vmap__pop-btn { white-space: normal; } /* 8b -- NARROW ONLY. Display type steps back; body copy never does. */ @media (max-width: 767px) { /* Display type: tuned for Montserrat, ~47% too wide in OpenDyslexic. Sizes below are DERIVED, not guessed: each was measured with the per-word probe (tools/image-migration/orphans2.mjs) so the LONGEST word in that element fits its box at 320 -- which is what stops `anywhere` from ever firing and chopping a word. Re-run that probe after touching any of these. */ html.mff-dyslexia .mff-films__title, html.mff-dyslexia .mff-social__title, html.mff-dyslexia .mff-sched__title { font-size: clamp(1.5rem, 7.5vw, 2.5rem); } /* "Intellectual"/"Disability" are the long words that drive these two. */ html.mff-dyslexia .mff-intro__title { font-size: clamp(1.5rem, 9.5vw, 4.5rem); } html.mff-dyslexia .mff-about h2 { font-size: clamp(1.5rem, 9.5vw, 3rem); } html.mff-dyslexia .mff-sched-hero__title { font-size: clamp(1.75rem, 13vw, 8.25rem); } html.mff-dyslexia .mff-facts__lead-p { font-size: clamp(1.5rem, 8vw, 3.375rem); } html.mff-dyslexia .mff-fd__theme-title { font-size: clamp(1.25rem, 7.5vw, 1.875rem); } html.mff-dyslexia .mff-faq__q { font-size: clamp(1.125rem, 5.5vw, 1.625rem); } /* 11px UPPERCASE + 0.12em tracking in a ~99px 3-up column. Dropping the uppercase is what actually fixes it (caps are far wider in OpenDyslexic) -- and it is the right call anyway: ALL-CAPS flattens word shape, which is exactly the cue dyslexic readers depend on. Scoped to the mode, so the default rendering keeps its uppercase labels. */ html.mff-dyslexia .mff-stat__label { font-size: 10px; letter-spacing: 0.02em; text-transform: none; } html.mff-dyslexia .mff-fw-pink, html.mff-dyslexia .mff-fw-green, html.mff-dyslexia .mff-fw-blue, html.mff-dyslexia .mff-faq__title, html.mff-dyslexia .mff-values__title, html.mff-dyslexia .mff-timeline__title, html.mff-dyslexia .mff-phero__title, html.mff-dyslexia .mff-vmap__title, html.mff-dyslexia .mff-about-hero__title { font-size: clamp(1.5rem, 6.5vw, 2.25rem); } html.mff-dyslexia .mff-givecard__title, html.mff-dyslexia .mff-pass__name, html.mff-dyslexia .mff-org__name, html.mff-dyslexia .mff-valuecard__tag, html.mff-dyslexia .mff-tl__title { font-size: clamp(1.125rem, 5vw, 1.625rem); } html.mff-dyslexia .mff-fd__synopsis-tab span { font-size: clamp(1.75rem, 8vw, 3rem); } html.mff-dyslexia .mff-tl__year, html.mff-dyslexia .mff-ticket__date { font-size: clamp(1.75rem, 7vw, 3rem); } }