/* Theme Name: Fable & Fantasy Theme URI: https://fableenfantasy.nl Author: Fable & Fantasy Author URI: https://fableenfantasy.nl Description: Custom theme for the Fable & Fantasy fantasy festival (26-27 June 2027, Rensenpark Emmen). Built from a high-fidelity design handoff; no ACF, no WooCommerce, no custom post types - content lives in Pages, Posts and Categories. Version: 1.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: fable-fantasy */ /* ========================================================================= 1. Design tokens ========================================================================= */ :root { /* colors */ --ff-bg: #f3ead2; --ff-bg-solid: #d9c7a0; --ff-ink: #4a3a22; --ff-heading-dark: #2c1c0d; --ff-muted: #7a6647; --ff-gold: #a9762f; --ff-gold-hover: #c9922f; --ff-btn-brown: #7a4a24; --ff-btn-text: #f6ecd4; --ff-card-fill: #ece0c2; --ff-footer-bg: #2c1c0d; --ff-cta-bg: #43301c; --ff-ticket-panel-bg: #3a2412; --ff-sage: #4f6b3a; --ff-sage-light: #8fb56f; --ff-border: rgba(169, 118, 47, 0.3); --ff-border-soft: rgba(169, 118, 47, 0.2); --ff-border-faint: rgba(169, 118, 47, 0.14); /* type */ --ff-font-logo: 'FableLogo', 'Cinzel Decorative', serif; --ff-font-decorative: 'Cinzel Decorative', serif; --ff-font-kicker: 'Cinzel', serif; --ff-font-body: 'EB Garamond', serif; --ff-font-fine: 'Jost', sans-serif; /* shape */ --ff-radius-pill: 999px; --ff-radius-lg: 28px; --ff-radius-md: 20px; --ff-radius-sm: 14px; /* shadow */ --ff-shadow-card: 0 18px 44px rgba(74, 52, 28, 0.12); --ff-shadow-nav: 0 10px 32px rgba(74, 52, 28, 0.18); --ff-shadow-panel: 0 20px 50px rgba(58, 36, 18, 0.25); } /* ========================================================================= 2. Reset & base ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ff-bg); color: var(--ff-ink); font-family: var(--ff-font-body); font-size: 17px; line-height: 1.5; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ff-gold); text-decoration: none; } a:hover { color: var(--ff-gold-hover); } h1, h2, h3, h4 { margin: 0; font-weight: 400; } .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .skip-link { position: absolute; left: 10px; top: -80px; z-index: 10000; background: var(--ff-btn-brown); color: var(--ff-btn-text); padding: 12px 20px; border-radius: var(--ff-radius-sm); transition: top .2s; } .skip-link:focus { top: 10px; } :focus-visible { outline: 2px solid var(--ff-gold-hover); outline-offset: 2px; } /* parchment texture, applied to */ .parchment-bg { position: relative; background-color: var(--ff-bg-solid); background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSczMDAnIGhlaWdodD0nMzAwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPSczJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PGZlQ29sb3JNYXRyaXggdHlwZT0nbWF0cml4JyB2YWx1ZXM9JzAgMCAwIDAgMC4zNSAgMCAwIDAgMCAwLjI3ICAwIDAgMCAwIDAuMTYgIDAgMCAwIDAuNSAwJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+"), radial-gradient(ellipse 55% 38% at 22% 18%, rgba(139, 105, 60, .32) 0%, transparent 60%), radial-gradient(ellipse 45% 32% at 85% 12%, rgba(120, 90, 50, .28) 0%, transparent 55%), radial-gradient(ellipse 50% 40% at 90% 85%, rgba(110, 80, 45, .3) 0%, transparent 58%), radial-gradient(ellipse 50% 36% at 8% 88%, rgba(120, 90, 50, .28) 0%, transparent 55%), radial-gradient(ellipse 65% 46% at 50% 50%, rgba(238, 224, 190, .38) 0%, transparent 65%), radial-gradient(ellipse 38% 28% at 30% 62%, rgba(90, 130, 72, .24) 0%, transparent 70%), radial-gradient(ellipse 32% 24% at 72% 40%, rgba(78, 116, 62, .22) 0%, transparent 70%), radial-gradient(ellipse 34% 26% at 60% 88%, rgba(90, 130, 72, .2) 0%, transparent 70%), radial-gradient(ellipse 26% 20% at 12% 30%, rgba(100, 138, 80, .18) 0%, transparent 70%), radial-gradient(ellipse 24% 18% at 90% 68%, rgba(90, 130, 72, .18) 0%, transparent 70%); background-size: 300px 300px, cover, cover, cover, cover, cover, cover, cover, cover, cover; background-attachment: fixed; box-shadow: inset 0 0 90px 20px rgba(74, 52, 28, .4), inset 0 0 220px 60px rgba(74, 52, 28, .22); } @media (max-width: 782px) { /* fixed backgrounds are expensive/buggy on mobile Safari */ .parchment-bg { background-attachment: scroll; } } .fable-logo-text { background: linear-gradient(180deg, #6f4c2a 0%, #5c3d20 55%, #492f18 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--ff-font-logo); font-weight: 400; } .ff-kicker { font-family: var(--ff-font-kicker); font-size: 12px; letter-spacing: .34em; text-transform: uppercase; color: var(--ff-gold); margin-bottom: 16px; display: block; } .ff-kicker--sage { color: var(--ff-sage); } /* ========================================================================= 3. Buttons ========================================================================= */ .ff-btn { cursor: pointer; display: inline-block; font-family: var(--ff-font-kicker); font-weight: 700; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; padding: 16px 36px; border-radius: var(--ff-radius-pill); border: 1.5px solid transparent; background: var(--ff-btn-brown); color: var(--ff-btn-text); transition: transform .2s, box-shadow .2s, background .2s; } .ff-btn:hover { background: #8a5a2e; color: var(--ff-btn-text); } .ff-btn--outline { background: transparent; border-color: var(--ff-btn-brown); color: #5a3a1c; } .ff-btn--outline:hover { background: rgba(122, 74, 36, .08); color: #5a3a1c; } .ff-btn--gold { background: var(--ff-gold-hover); color: #3a2412; font-size: 15px; padding: 18px 44px; } .ff-btn--gold:hover { background: #d9a544; color: #3a2412; } /* ========================================================================= 4. Nav ========================================================================= */ .ff-nav-wrap { position: fixed; top: 16px; left: 0; right: 0; z-index: 100; display: flex; justify-content: center; padding: 0 24px; } .ff-nav { position: relative; max-width: 1400px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 26px; border-radius: var(--ff-radius-pill); background: rgba(243, 234, 210, .92); backdrop-filter: blur(10px); border: 1px solid var(--ff-border); box-shadow: var(--ff-shadow-nav); } .ff-nav__right { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .ff-nav__logo { cursor: pointer; white-space: nowrap; flex-shrink: 0; font-size: 28px; letter-spacing: .01em; } .ff-nav__logo a { color: inherit; } .ff-nav__toggle { display: none; background: none; border: 1px solid var(--ff-border); border-radius: var(--ff-radius-pill); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; } .ff-nav__toggle span, .ff-nav__toggle span::before, .ff-nav__toggle span::after { display: block; width: 18px; height: 2px; background: var(--ff-heading-dark); position: relative; } .ff-nav__toggle span::before, .ff-nav__toggle span::after { content: ''; position: absolute; } .ff-nav__toggle span::before { top: -6px; } .ff-nav__toggle span::after { top: 6px; } .ff-nav__menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; align-items: center; flex-wrap: wrap; row-gap: 8px; font-family: var(--ff-font-kicker); font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } .ff-nav__item { position: relative; } .ff-nav__item > a { cursor: pointer; display: inline-block; white-space: nowrap; padding: 11px 14px; border-radius: var(--ff-radius-pill); color: #3a2412; } .ff-nav__item.current-menu-item > a, .ff-nav__item.current-menu-parent > a, .ff-nav__item.current_page_item > a { color: var(--ff-btn-text); background: rgba(122, 74, 36, .92); } .ff-nav__item.menu-item-has-children > a::after { content: ' \25BE'; } .ff-nav__submenu { position: absolute; top: 100%; left: 0; display: none; list-style: none; margin: 8px 0 0; padding: 8px; background: #f6ecd4; border: 1px solid var(--ff-border); border-radius: 16px; box-shadow: var(--ff-shadow-panel); z-index: 200; min-width: 220px; } .ff-nav__item:hover > .ff-nav__submenu, .ff-nav__item.ff-open > .ff-nav__submenu { display: block; } .ff-nav__submenu a { display: block; cursor: pointer; padding: 11px 16px; border-radius: 10px; color: #6b5636; white-space: nowrap; font-size: 12px; letter-spacing: .08em; } .ff-nav__submenu a:hover { color: var(--ff-heading-dark); background: rgba(169, 118, 47, .16); } .ff-nav__langs { display: flex; gap: 6px; align-items: center; margin-left: 10px; padding-left: 16px; border-left: 1px solid var(--ff-border-soft); flex-shrink: 0; } .ff-nav__lang { padding: 5px 7px; border-radius: 8px; font-size: 18px; line-height: 1; opacity: .45; filter: grayscale(.5); } .ff-nav__lang.is-active { opacity: 1; filter: none; box-shadow: 0 0 0 2px rgba(201, 162, 74, .7); } .ff-nav__cta { white-space: nowrap; flex-shrink: 0; background: var(--ff-btn-brown); color: var(--ff-btn-text); padding: 13px 20px; border-radius: var(--ff-radius-pill); margin-left: 10px; font-weight: 600; } .ff-nav__cta:hover { color: var(--ff-btn-text); background: #8a5a2e; } @media (max-width: 980px) { .ff-nav__toggle { display: flex; } .ff-nav__right { display: none; flex-direction: column; align-items: stretch; width: 100%; position: absolute; top: calc(100% + 10px); left: 0; right: 0; background: rgba(243, 234, 210, .97); border: 1px solid var(--ff-border); border-radius: 20px; padding: 16px; box-shadow: var(--ff-shadow-nav); } .ff-nav.is-open .ff-nav__right { display: flex; } .ff-nav__menu { flex-direction: column; align-items: stretch; } .ff-nav__item > a { display: block; } .ff-nav__submenu { position: static; box-shadow: none; margin: 4px 0 8px; display: none; border-radius: 10px; } .ff-nav__item.ff-open .ff-nav__submenu { display: block; } .ff-nav__langs { margin-left: 0; padding-left: 0; border-left: 0; padding-top: 10px; justify-content: center; } .ff-nav__cta { margin-left: 0; text-align: center; } } /* ========================================================================= 5. Hero ========================================================================= */ .ff-hero { position: relative; text-align: center; padding: 170px 24px 110px; min-height: 620px; display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .ff-hero__media { position: absolute; inset: 0; overflow: hidden; z-index: 0; container-type: size; } /* * A YouTube iframe's player keeps its own 16:9 ratio internally - object-fit * on the