/* fonts.css is linked directly from each page's , not @imported here. An @import forces the browser to download and parse this file before it can even discover the font stylesheet, serialising two render-blocking requests that should happen in parallel. */ :root { --bg: #17120d; --bg-panel: #1f1811; --card: #241b13; --card-border: #3a2c1c; --text: #ede0c8; --text-muted: #b3a084; --gold: #d9b04c; --gold-bright: #f0c862; --ember: #d9772f; --font-display: 'Cinzel', serif; --font-serif: 'Cormorant', 'Georgia', serif; --font-body: 'Inter', system-ui, sans-serif; --radius: 10px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; } /* Cross-document view transitions (progressive enhancement — Chromium today, no-op elsewhere) */ @view-transition { navigation: auto; } ::selection { background: rgba(217, 176, 76, 0.35); color: var(--gold-bright); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } html { scrollbar-color: var(--gold) var(--bg); scrollbar-width: thin; } ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--gold-bright), var(--ember)); border-radius: 8px; border: 2px solid var(--bg); } #work, #about, #contact { scroll-margin-top: 84px; } /* Scroll progress bar */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); box-shadow: 0 0 8px rgba(240, 200, 98, 0.6); z-index: 100; transition: width 0.1s ease-out; } /* Film grain overlay */ .grain-overlay { position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: 0.05; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* Back to top */ .back-to-top { position: fixed; right: 24px; bottom: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--card); border: 1px solid var(--card-border); color: var(--gold-bright); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; z-index: 60; opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .back-to-top:hover { border-color: var(--gold); box-shadow: 0 0 0 4px rgba(217, 176, 76, 0.12); } @media (prefers-reduced-motion: reduce) { .back-to-top { transition: opacity 0.01s linear; } } .wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } a { color: inherit; } /* Header */ .site-header { position: sticky; top: 0; z-index: 20; background: rgba(23, 18, 13, 0.75); backdrop-filter: blur(6px); border-bottom: 1px solid transparent; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .site-header.is-scrolled { background: rgba(20, 15, 10, 0.92); border-bottom-color: var(--card-border); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); } .header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; } .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: 0.02em; color: var(--gold-bright); } .brand-mark { width: 22px; height: 22px; color: var(--ember); flex-shrink: 0; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .brand:hover .brand-mark { transform: rotate(-8deg) scale(1.08); } .footer-brand .brand-mark { vertical-align: -5px; margin-right: 4px; } .site-nav { display: flex; gap: 28px; } .site-nav a { text-decoration: none; color: var(--text-muted); font-size: 0.95rem; font-weight: 500; transition: color 0.15s ease; } .site-nav a:hover { color: var(--gold-bright); } /* Hero */ .hero { position: relative; padding: 160px 0 140px; overflow: hidden; text-align: center; isolation: isolate; } .hero-bg-video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .hero-overlay { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(15, 11, 8, 0.55) 0%, rgba(15, 11, 8, 0.75) 55%, var(--bg) 100%); pointer-events: none; } .hero-glow { position: absolute; top: -200px; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(closest-side, rgba(217, 119, 47, 0.28), transparent 70%); pointer-events: none; z-index: -1; } .hero::after { content: ''; position: absolute; left: 50%; bottom: -10%; transform: translateX(-50%); width: 1100px; height: 420px; background: radial-gradient(closest-side, rgba(217, 119, 47, 0.35), transparent 72%); pointer-events: none; z-index: -1; animation: forge-breathe 5s ease-in-out infinite; } @keyframes forge-breathe { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.08); } } .hero-inner { position: relative; } /* Forge particles */ .forge-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* Scroll reveal */ .reveal { opacity: 0; translate: 0 28px; transition: opacity 0.7s ease, translate 0.7s ease; } .reveal.is-visible { opacity: 1; translate: 0 0; } @media (prefers-reduced-motion: reduce) { .hero::after { animation: none; } .reveal { opacity: 1; translate: none; transition: none; } } .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.78rem; color: var(--ember); font-weight: 600; margin: 0 0 18px; } .hero h1 { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1.15; margin: 0 0 24px; color: var(--gold-bright); text-shadow: 0 0 40px rgba(217, 119, 47, 0.35); } .hero-sub { max-width: 620px; margin: 0 auto 36px; color: var(--text-muted); font-size: 1.05rem; } /* On-load entrance stagger (hero + app-hero) */ .hero .eyebrow, .hero h1, .hero .hero-sub, .hero .btn-primary, .app-hero .back-link, .app-hero .app-icon, .app-hero .app-tagline, .app-hero h1, .app-hero .app-hero-sub, .app-hero .btn-primary { opacity: 0; transform: translateY(16px); animation: rise-in 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; } .hero .eyebrow, .app-hero .back-link { animation-delay: 0.05s; } .hero h1, .app-hero .app-icon { animation-delay: 0.16s; } .hero .hero-sub, .app-hero .app-tagline { animation-delay: 0.28s; } .hero .btn-primary, .app-hero h1 { animation-delay: 0.4s; } .app-hero .app-hero-sub { animation-delay: 0.5s; } .app-hero .btn-primary { animation-delay: 0.6s; } @keyframes rise-in { to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .hero .eyebrow, .hero h1, .hero .hero-sub, .hero .btn-primary, .app-hero .back-link, .app-hero .app-icon, .app-hero .app-tagline, .app-hero h1, .app-hero .app-hero-sub, .app-hero .btn-primary { animation: none; opacity: 1; transform: none; } } .btn { display: inline-block; padding: 13px 28px; border-radius: 6px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.15s ease, border-color 0.15s ease, box-shadow 0.2s ease; } .btn-primary { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--gold-bright), var(--gold)); color: #201607; will-change: transform; } .btn-primary::before { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, 0.55), transparent); transform: skewX(-20deg); transition: left 0.65s ease; } .btn-primary:hover::before { left: 130%; } .btn-primary:hover { box-shadow: 0 8px 24px rgba(217, 176, 76, 0.35); } .btn-secondary { background: transparent; border: 1px solid var(--card-border); color: var(--gold-bright); width: 100%; text-align: center; } .btn-secondary:hover { border-color: var(--gold); background: rgba(217, 176, 76, 0.08); } .btn-disabled { opacity: 0.45; cursor: default; pointer-events: none; } /* Sections */ .section { padding: 90px 0; } .section-title { font-family: var(--font-display); font-size: 2rem; color: var(--gold-bright); margin: 0 0 8px; text-align: center; } .section-sub { text-align: center; color: var(--text-muted); max-width: 520px; margin: 0 auto 48px; } .work { position: relative; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); background-image: linear-gradient(180deg, rgba(15, 11, 8, 0.88), rgba(15, 11, 8, 0.92)), url('assets/work-bg.webp'); background-size: cover; background-position: center 35%; background-attachment: fixed; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .card-grid { perspective: 1200px; } .card { position: relative; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.7s ease, translate 0.7s ease; } .card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); } /* Stagger only the reveal properties (opacity, translate) so hover/tilt stays instant */ .card-grid > .card:nth-child(2) { transition-delay: 0s, 0s, 0s, 0.08s, 0.08s; } .card-grid > .card:nth-child(3) { transition-delay: 0s, 0s, 0s, 0.16s, 0.16s; } .card-spotlight { position: absolute; inset: 0; z-index: 0; opacity: 0; pointer-events: none; background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(240, 200, 120, 0.14), transparent 65%); transition: opacity 0.4s ease; } .card:hover .card-spotlight { opacity: 1; } .card-shot, .card-body { position: relative; z-index: 1; } .card-shot { height: 210px; overflow: hidden; background: var(--card); } .card-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; transition: transform 0.5s ease; -webkit-mask-image: linear-gradient(to bottom, black 10%, transparent 100%); mask-image: linear-gradient(to bottom, black 10%, transparent 100%); } .card:hover .card-shot img { transform: scale(1.06); } .card-body { padding: 28px 28px 32px; display: flex; flex-direction: column; flex-grow: 1; } .card-flag { align-self: flex-start; font-family: var(--font-body); font-size: 0.66rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-bright); background: rgba(217, 119, 47, 0.14); border: 1px solid rgba(217, 176, 76, 0.4); border-radius: 999px; padding: 3px 11px; margin-bottom: 12px; } .card-title { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 10px; color: var(--gold-bright); } .card-desc { color: var(--text-muted); font-size: 0.95rem; flex-grow: 1; margin: 0 0 24px; } /* About */ .about { position: relative; background-image: linear-gradient(180deg, var(--bg) 0%, rgba(15, 11, 8, 0.82) 15%, rgba(15, 11, 8, 0.9) 100%), url('assets/about-bg.webp'); background-size: cover; background-position: center 60%; background-attachment: fixed; } .about-inner { max-width: 700px; text-align: left; } .about-inner .section-title { text-align: left; } .about p { color: var(--text-muted); font-size: 1.02rem; } /* Footer */ .site-footer { padding: 32px 0; border-top: 1px solid var(--card-border); } .footer-inner { display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; align-items: center; color: var(--text-muted); font-size: 0.85rem; } .footer-links a { text-decoration: none; color: var(--text-muted); } .footer-links a:hover { color: var(--gold-bright); } @media (max-width: 640px) { .site-nav { gap: 16px; } .site-nav a { font-size: 0.85rem; } .hero { padding: 90px 0 70px; } } /* App explainer pages */ .app-hero { position: relative; padding: 130px 0 80px; text-align: center; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #201a12 0%, var(--bg) 100%); } .app-hero::after { content: ''; position: absolute; left: 50%; top: -120px; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(closest-side, rgba(217, 119, 47, 0.25), transparent 70%); pointer-events: none; z-index: -1; animation: forge-breathe 5s ease-in-out infinite; } .back-link { display: inline-block; margin-bottom: 24px; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; } .back-link:hover { color: var(--gold-bright); } .app-icon { width: 52px; height: 52px; margin: 0 auto 18px; color: var(--gold-bright); display: block; filter: drop-shadow(0 0 14px rgba(217, 119, 47, 0.55)); animation: icon-flicker 4s ease-in-out infinite; } @keyframes icon-flicker { 0%, 100% { filter: drop-shadow(0 0 12px rgba(217, 119, 47, 0.45)); } 50% { filter: drop-shadow(0 0 20px rgba(240, 180, 80, 0.7)); } } @media (prefers-reduced-motion: reduce) { .app-icon { animation: none; } .brand-mark, .brand:hover .brand-mark { transition: none; transform: none; } } .app-hero h1 { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3rem); color: var(--gold-bright); margin: 0 0 14px; } .app-tagline { color: var(--ember); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.85rem; font-weight: 600; margin: 0 0 20px; } .app-hero-sub { max-width: 600px; margin: 0 auto 32px; color: var(--text-muted); font-size: 1.05rem; } .feature-section { padding: 0; } .feature-row { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; padding: 64px 0; border-bottom: 1px solid var(--card-border); } .feature-row:last-of-type { border-bottom: none; } .feature-row.reverse .feature-shots { order: 2; } .feature-row.reverse .feature-text { order: 1; } .feature-shots { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; } .feature-shots img { max-height: 460px; width: auto; max-width: 100%; border-radius: 14px; border: 1px solid var(--card-border); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55); } .feature-text h2 { font-family: var(--font-display); font-size: 1.6rem; color: var(--gold-bright); margin: 0 0 14px; } .feature-text p { color: var(--text-muted); font-size: 1.02rem; } .cta-band { text-align: center; padding: 90px 0; background: var(--bg-panel); border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); } .cta-band h2 { font-family: var(--font-display); font-size: 1.8rem; color: var(--gold-bright); margin: 0 0 24px; } @media (max-width: 860px) { .feature-row { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; } .feature-row.reverse .feature-shots, .feature-row.reverse .feature-text { order: initial; } .feature-shots img { max-height: 360px; } } /* ============================================================ Craft pass: typography, ornament, and interaction upgrades ============================================================ */ /* Gilded headline treatment */ @supports (-webkit-background-clip: text) or (background-clip: text) { .hero h1, .hero h1 .ch, .app-hero h1 { background: linear-gradient(180deg, #f8e3a0 0%, var(--gold-bright) 38%, var(--gold) 70%, #b98c33 100%); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .hero h1 { filter: drop-shadow(0 0 28px rgba(217, 119, 47, 0.4)); text-shadow: none; } .app-hero h1 { filter: drop-shadow(0 0 22px rgba(217, 119, 47, 0.35)); } } /* Per-letter hero entrance (spans injected by JS) */ .hero h1.split { animation: none; opacity: 1; transform: none; } .hero h1 .ch { display: inline-block; opacity: 0; transform: translateY(0.55em) rotate(6deg); animation: ch-rise 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards; animation-delay: calc(0.3s + var(--i) * 0.04s); } @keyframes ch-rise { to { opacity: 1; transform: translateY(0) rotate(0deg); } } /* Nav sliding underline */ .site-nav a { position: relative; padding-bottom: 4px; } .site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); transform: scaleX(0); transform-origin: left center; transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1); } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); } /* Ornamental divider — line ◆ line */ .ornament { display: flex; align-items: center; justify-content: center; gap: 14px; color: var(--gold); margin: 2px 0 14px; } .ornament span { height: 1px; width: 70px; } .ornament span:first-child { background: linear-gradient(to right, transparent, var(--gold)); } .ornament span:last-child { background: linear-gradient(to left, transparent, var(--gold)); } .ornament-left { justify-content: flex-start; } .ornament-left span:first-child { background: var(--gold); width: 36px; } /* Glyph ticker */ .ticker { overflow: hidden; border-top: 1px solid var(--card-border); border-bottom: 1px solid var(--card-border); background: var(--bg-panel); padding: 13px 0; } .ticker-track { display: flex; width: max-content; animation: ticker-scroll 70s linear infinite; } .ticker-track span { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.32em; text-transform: uppercase; white-space: nowrap; color: rgba(217, 176, 76, 0.4); } @keyframes ticker-scroll { to { transform: translateX(-50%); } } /* Chapter numerals on feature rows */ .chapter { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--ember); margin: 0 0 12px; display: flex; align-items: center; gap: 12px; } .chapter::after { content: ''; height: 1px; width: 46px; background: linear-gradient(to right, var(--ember), transparent); } /* Manuscript voice — old-style serif for reading passages */ .about p, .app-hero-sub, .feature-text p:not(.chapter) { font-family: var(--font-serif); font-size: 1.2rem; line-height: 1.65; } .about p:first-of-type::first-letter { font-family: var(--font-display); font-size: 3.4em; line-height: 0.78; float: left; padding: 6px 12px 0 0; color: var(--gold-bright); } /* Scroll cue — mouse outline with falling dot */ .scroll-cue { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; justify-content: center; opacity: 0; animation: rise-in 0.8s ease 1.2s forwards; transition: opacity 0.4s ease; } .scroll-cue.is-hidden { opacity: 0 !important; pointer-events: none; } /* Screenshot lightbox */ .feature-shots img { cursor: zoom-in; } dialog.lightbox { border: none; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; outline: none; } dialog.lightbox img { max-width: 92vw; max-height: 88vh; display: block; border-radius: 12px; border: 1px solid var(--card-border); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.8); cursor: zoom-out; } dialog.lightbox::backdrop { background: rgba(10, 7, 4, 0.88); backdrop-filter: blur(8px); } /* Footer, guild-hall edition */ .site-footer { padding: 44px 0 28px; } .site-footer .ornament { margin-bottom: 34px; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; margin-bottom: 36px; } .footer-brand { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--gold-bright); margin: 0 0 10px; } .footer-tag { font-family: var(--font-serif); font-style: italic; color: var(--text-muted); font-size: 1.02rem; margin: 0; max-width: 300px; } .footer-col h4 { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin: 0 0 14px; } .footer-col a { display: block; color: var(--text-muted); text-decoration: none; font-size: 0.92rem; margin-bottom: 9px; transition: color 0.15s ease; } .footer-col a:hover { color: var(--gold-bright); } .footer-legal { text-align: center; color: rgba(179, 160, 132, 0.6); font-size: 0.8rem; border-top: 1px solid var(--card-border); padding-top: 20px; margin: 0; } @media (max-width: 700px) { .footer-grid { grid-template-columns: 1fr; gap: 28px; } } /* Reduced-motion coverage for the craft pass */ @media (prefers-reduced-motion: reduce) { .hero h1 .ch { animation: none; opacity: 1; transform: none; } .ticker-track { animation: none; } .scroll-cue { animation: none; opacity: 1; } .site-nav a::after { transition: none; } } /* ============================================================ Modern web-platform enhancements ============================================================ */ /* Fluid typography niceties */ .hero h1, .app-hero h1, .section-title, .card-title, .feature-text h2, .cta-band h2, .footer-brand { text-wrap: balance; } .hero-sub, .app-hero-sub, .section-sub, .card-desc, .about p, .feature-text p:not(.chapter), .footer-tag { text-wrap: pretty; } /* Scroll-driven progress bar — native, GPU-driven (JS fallback stays for older browsers) */ @keyframes grow-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } } @supports (animation-timeline: scroll()) { .scroll-progress { width: 100%; transform-origin: 0 50%; transform: scaleX(0); transition: none; animation: grow-progress linear; animation-timeline: scroll(root block); } } /* Scroll-driven parallax on app screenshots (native view() timeline) */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .feature-shots img { animation: shot-parallax linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; will-change: translate; } @keyframes shot-parallax { from { translate: 0 34px; } to { translate: 0 -34px; } } } } /* Cursor-tracked ambient light in hero (injected .cursor-glow via JS) */ .cursor-glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; background: radial-gradient(circle 420px at var(--cx, 50%) var(--cy, 40%), rgba(240, 200, 120, 0.13), transparent 62%); mix-blend-mode: screen; } .app-hero .cursor-glow { z-index: 0; } .hero.cursor-active .cursor-glow, .app-hero.cursor-active .cursor-glow { opacity: 1; } /* @property-driven gold border that traces the card edge on hover */ @property --bd-angle { syntax: ''; inherits: false; initial-value: 0deg; } .card::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1.5px; background: conic-gradient(from var(--bd-angle), transparent 0deg, rgba(240, 200, 98, 0.9) 40deg, var(--ember) 80deg, transparent 130deg, transparent 360deg); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; } @media (prefers-reduced-motion: no-preference) { .card:hover::after { opacity: 1; animation: trace-border 3.5s linear infinite; } } @keyframes trace-border { to { --bd-angle: 360deg; } } /* Signature d20 scroll cue */ .d20-cue { width: 40px; height: 44px; color: var(--gold); filter: drop-shadow(0 0 8px rgba(217, 119, 47, 0.5)); animation: d20-bob 2.6s ease-in-out infinite; } .d20-cue .d20-spin { transform-box: fill-box; transform-origin: center; animation: d20-turn 9s ease-in-out infinite; } @keyframes d20-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } } @keyframes d20-turn { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } } /* ============================================================ Unified device framing for app screenshots ============================================================ */ /* iPad shots — one consistent slate bezel with a gold rim light */ .shots-ipad-landscape img, .shots-ipad-portrait img { background: #0d0a07; border: 10px solid #0d0a07; border-radius: 22px; box-shadow: 0 0 0 1px rgba(217, 176, 76, 0.25), 0 30px 70px rgba(0, 0, 0, 0.6); } .shots-ipad-landscape img { width: 100%; max-height: none; } .shots-ipad-portrait img { max-height: 520px; } /* Landscape DM shots deserve more of the row */ .feature-row-wide { grid-template-columns: 1.5fr 1fr; } .feature-row-wide.reverse { grid-template-columns: 1fr 1.5fr; } /* The player-side phone strip — full-width row, text centered beneath */ .feature-row-phones { display: block; } .shots-phones { gap: 18px; flex-wrap: nowrap; align-items: flex-start; } .shots-phones img { width: calc(25% - 14px); max-height: none; background: #0d0a07; border: 7px solid #0d0a07; border-radius: 28px; box-shadow: 0 0 0 1px rgba(217, 176, 76, 0.25), 0 24px 50px rgba(0, 0, 0, 0.55); } .feature-text-center { text-align: center; max-width: 640px; margin: 40px auto 0; } .feature-text-center .chapter { justify-content: center; } @media (max-width: 860px) { .feature-row-wide { grid-template-columns: 1fr; } .shots-phones { flex-wrap: wrap; } .shots-phones img { width: calc(50% - 9px); } } /* Homepage card crops */ .card-shot { height: 230px; } .card-shot-roll img { object-position: center 22%; } /* Shared-element cross-document morphs (Chromium; no-op elsewhere) */ .vt-torch { view-transition-name: vt-torch; } .vt-libram { view-transition-name: vt-libram; } .vt-pcs { view-transition-name: vt-pcs; } ::view-transition-group(*) { animation-duration: 0.45s; } @media (prefers-reduced-motion: reduce) { .cursor-glow { display: none; } .d20-cue, .d20-cue .d20-spin { animation: none; } .card:hover::after { animation: none; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } /* --------------------------------------------------------------------------- FAQ blocks and long-form prose. Added for the question sections on the app pages and the AD&D 2e page. Reuses the existing tokens and .section/.wrap rhythm rather than introducing a second visual language. --------------------------------------------------------------------------- */ .faq { background: var(--bg-panel); border-top: 1px solid var(--card-border); } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px 40px; max-width: 900px; margin: 0 auto; } .faq-item { border-left: 2px solid var(--card-border); padding: 2px 0 2px 20px; } .faq-item h3 { font-family: var(--font-serif); font-size: 1.18rem; font-weight: 600; line-height: 1.3; color: var(--gold-bright); margin: 0 0 8px; } .faq-item p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.65; } .faq-item p + p { margin-top: 10px; } .faq-item a { color: var(--gold); } /* Long-form editorial text, used on the AD&D 2e page. */ .prose { max-width: 720px; margin: 0 auto; } .prose h2 { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold-bright); margin: 44px 0 14px; line-height: 1.25; } .prose h2:first-child { margin-top: 0; } .prose p { color: var(--text-muted); line-height: 1.75; margin: 0 0 16px; } .prose strong { color: var(--text); font-weight: 600; } .prose a { color: var(--gold); } .prose ul { margin: 0 0 16px; padding-left: 20px; color: var(--text-muted); line-height: 1.75; } .prose li { margin-bottom: 8px; } .prose li strong { color: var(--text); } /* The "what the engine actually computes" panel. */ .rules-panel { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius); padding: 26px 28px; margin: 28px 0; } .rules-panel h3 { font-family: var(--font-display); font-size: 1.05rem; color: var(--gold); margin: 0 0 14px; letter-spacing: 0.02em; } .rules-panel ul { margin: 0; padding-left: 18px; } @media (max-width: 640px) { .faq-grid { gap: 18px; } .rules-panel { padding: 20px; } .prose h2 { font-size: 1.3rem; margin-top: 34px; } } /* Cormorant defaults to old-style figures, which drops a zero to x-height — "THAC0" ends up reading as "THACo". These sections talk about THAC0, AC numbers and ability scores constantly, so they ask for lining figures. Scoped to the newer content classes so the original pages are untouched. */ .prose, .faq-item, .rules-panel, .lining-figures { font-variant-numeric: lining-nums; }