/** * Pandora: Fire & Ash — shared chrome (v1.5) * * Design tokens, fixed nav, hamburger + full-screen menu overlay, buttons, * and the site footer. Loaded on the landing page AND (when the site-wide * theme is enabled) on every front-end page. * * Scoped under `.fa-scope`, which is present on the landing wrapper and — * for site-wide mode — added to via the body_class filter. Accent * colors are injected as inline CSS variables from the settings screen. */ /** * Pandora: Fire & Ash — Landing styles (v1.2, mobile-first) * * Scoped under `.fa-scope`. Accent colors overridable via CSS custom * properties set inline from the WP settings screen. * * v1.2 changes: * - Mobile-first: base styles target small screens, desktop is the override. * - Full-screen menu overlay opened by an always-visible hamburger; the menu * is reachable from the top of the page on every device. * - Game links rendered as large tappable cards (min 44px targets throughout). * - Movie-lore sections (duality, world, quote, watch/countdown) removed. */ .fa-scope { /* ---- Color tokens ---- */ --fa-void: #0b0a09; --fa-smoke: #17110d; --fa-smoke-2: #211812; --fa-ember: #ff5714; /* overridable */ --fa-ember-glow: #ff9d3c; --fa-eywa: #3fe0c8; /* overridable */ --fa-bone: #efe6d8; --fa-bone-dim: #a99f92; --fa-line: rgba(239, 230, 216, 0.12); /* ---- Type ---- */ --fa-display: "Cinzel", "Trajan Pro", Georgia, "Times New Roman", serif; --fa-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fa-mono: "JetBrains Mono", "SFMono-Regular", "Courier New", monospace; /* ---- Rhythm ---- */ --fa-max: 1100px; --fa-gutter: clamp(1.1rem, 5vw, 3.5rem); position: relative; background: var(--fa-void); color: var(--fa-bone); font-family: var(--fa-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } .fa-scope *, .fa-scope *::before, .fa-scope *::after { box-sizing: border-box; } .fa-scope h1, .fa-scope h2, .fa-scope h3 { font-family: var(--fa-display); font-weight: 700; line-height: 1.05; margin: 0; letter-spacing: 0.02em; } .fa-scope p { margin: 0; } .fa-scope a { color: inherit; text-decoration: none; } .fa-eyebrow { font-family: var(--fa-mono); font-size: 0.7rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--fa-bone-dim); display: inline-flex; align-items: center; gap: 0.7em; } .fa-eyebrow::before { content: ""; width: 1.6rem; height: 1px; background: linear-gradient(90deg, var(--fa-ember), transparent); } .fa-shell { max-width: var(--fa-max); margin-inline: auto; padding-inline: var(--fa-gutter); } /* ============================================================= NAV BAR */ .fa-nav { position: fixed; inset: 0 0 auto 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem var(--fa-gutter); transition: background 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease; border-bottom: 1px solid transparent; } .fa-nav.is-stuck, .fa-scope.menu-open .fa-nav { background: rgba(11, 10, 9, 0.78); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--fa-line); } .fa-brand { font-family: var(--fa-display); font-weight: 700; font-size: 0.95rem; letter-spacing: 0.26em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; /* tap target */ } .fa-brand__mark { width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--fa-ember-glow), var(--fa-ember) 55%, #7a1600); box-shadow: 0 0 14px 2px rgba(255, 87, 20, 0.65); flex: none; } /* Desktop inline links — hidden on mobile where the overlay takes over */ .fa-nav__links { display: none; gap: 1.4rem; align-items: center; } .fa-nav__links a { font-family: var(--fa-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fa-bone-dim); transition: color 0.25s ease; padding: 0.6rem 0.15rem; } .fa-nav__links a:hover { color: var(--fa-bone); } @media (min-width: 900px) { .fa-nav__links { display: flex; } } /* ---- Hamburger: visible at every size so the menu is always one tap away */ .fa-burger { appearance: none; background: linear-gradient(160deg, var(--fa-smoke), var(--fa-void)); border: 1px solid var(--fa-line); border-radius: 3px; color: var(--fa-bone); font-family: var(--fa-mono); font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; min-width: 44px; padding: 0 0.95rem; cursor: pointer; transition: border-color 0.25s ease, box-shadow 0.25s ease; } .fa-burger:hover { border-color: var(--fa-ember); box-shadow: 0 0 18px rgba(255, 87, 20, 0.25); } .fa-burger__icon { position: relative; width: 18px; height: 12px; flex: none; } .fa-burger__icon::before, .fa-burger__icon::after, .fa-burger__icon span { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease; } .fa-burger__icon::before { top: 0; } .fa-burger__icon span { top: 5px; } .fa-burger__icon::after { top: 10px; } .fa-scope.menu-open .fa-burger__icon::before { top: 5px; transform: rotate(45deg); } .fa-scope.menu-open .fa-burger__icon span { opacity: 0; } .fa-scope.menu-open .fa-burger__icon::after { top: 5px; transform: rotate(-45deg); } /* ---- Full-screen menu overlay */ .fa-menu { position: fixed; inset: 0; z-index: 55; display: flex; flex-direction: column; justify-content: safe center; padding: 5.5rem var(--fa-gutter) 3rem; background: radial-gradient(110% 80% at 50% 115%, rgba(255, 87, 20, 0.22), transparent 60%), rgba(9, 7, 6, 0.96); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .fa-scope.menu-open .fa-menu { opacity: 1; visibility: visible; transition: opacity 0.3s ease; } .fa-menu__label { font-family: var(--fa-mono); font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--fa-bone-dim); margin-bottom: 1.4rem; } .fa-menu__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .fa-menu__list a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-family: var(--fa-display); font-size: clamp(1.5rem, 6.5vw, 2.4rem); text-transform: uppercase; letter-spacing: 0.04em; padding: 0.85rem 0.15rem; min-height: 56px; border-bottom: 1px solid var(--fa-line); transition: color 0.25s ease, padding-left 0.25s ease; opacity: 0; transform: translateY(14px); } .fa-scope.menu-open .fa-menu__list a { animation: fa-rise 0.5s ease forwards; } .fa-menu__list a::after { content: "\2192"; /* arrow */ font-family: var(--fa-mono); font-size: 0.55em; color: var(--fa-ember-glow); opacity: 0.7; transition: transform 0.25s ease, opacity 0.25s ease; } .fa-menu__list a:hover, .fa-menu__list a:focus-visible { color: var(--fa-ember-glow); padding-left: 0.6rem; } .fa-menu__list a:hover::after { transform: translateX(6px); opacity: 1; } .fa-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; font-family: var(--fa-mono); font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; min-height: 48px; /* comfortable thumb target */ padding: 0.8rem 1.5rem; border-radius: 3px; border: 1px solid transparent; cursor: pointer; transition: transform 0.25s ease, box-shadow 0.3s ease, border-color 0.3s ease, color 0.3s ease; } .fa-btn--fire { background: linear-gradient(120deg, var(--fa-ember), var(--fa-ember-glow)); color: #1a0a02; font-weight: 700; box-shadow: 0 8px 30px rgba(255, 87, 20, 0.4); } .fa-btn--fire:hover { transform: translateY(-3px); box-shadow: 0 14px 42px rgba(255, 87, 20, 0.55); } .fa-btn--ghost { border-color: var(--fa-line); color: var(--fa-bone); background: rgba(239, 230, 216, 0.02); } .fa-btn--ghost:hover { border-color: var(--fa-eywa); color: var(--fa-eywa); transform: translateY(-3px); } .fa-btn__play { width: 8px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } @media (max-width: 560px) { .fa-cta-row .fa-btn { flex: 1 1 100%; } /* full-width thumb buttons */ } /* ============================================================= FOOTER */ .fa-footer { border-top: 1px solid var(--fa-line); padding-block: 2.4rem 2rem; } .fa-footer__grid { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.2rem; } .fa-footer__links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; font-family: var(--fa-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fa-bone-dim); } .fa-footer__links a { padding: 0.55rem 0.1rem; } /* tap target */ .fa-footer__links a:hover { color: var(--fa-bone); } .fa-footer__note { margin-top: 1.8rem; padding-top: 1.3rem; border-top: 1px solid var(--fa-line); font-size: 0.72rem; color: var(--fa-bone-dim); max-width: 70ch; line-height: 1.55; } /* ============================================================= MOTION */ .fa-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .fa-reveal.is-visible { opacity: 1; transform: none; } @keyframes fa-rise { to { opacity: 1; transform: none; } } @keyframes fa-fade { to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .fa-scope *, .fa-scope *::before, .fa-scope *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .fa-hero__eyebrow, .fa-hero__title span, .fa-hero__lede, .fa-hero__meta, .fa-cta-row, .fa-reveal, .fa-game, .fa-menu__list a { opacity: 1 !important; transform: none !important; } } .fa-scope a:focus-visible, .fa-scope button:focus-visible { outline: 2px solid var(--fa-eywa); outline-offset: 3px; border-radius: 2px; }