/* * Shared quiz result pages (/character-quiz/:slug, /house-quiz/:slug) * * These are server-rendered landing pages for a single quiz result, reached * from a shared link rather than from taking the quiz. The accent colour is * set per result as the --result-accent custom property on : houses use * their heraldic colour, the character quiz uses the site purple. */ .quiz-result-page { /* No background-attachment: fixed here -- it sizes the gradient to the viewport, so anything below the fold renders on bare white. */ background: linear-gradient(160deg, #1a0b2e 0%, #25103f 55%, #12081f 100%); background-repeat: no-repeat; color: var(--divine-light-white); min-height: 100vh; } .result-page { padding: var(--spacing-lg) 0 var(--spacing-xl); } /* Breadcrumb ------------------------------------------------------------- */ .result-breadcrumb { font-family: var(--font-headers); font-size: 0.9rem; letter-spacing: 1px; margin-bottom: var(--spacing-md); opacity: 0.75; } .result-breadcrumb a { color: var(--divine-light-white); text-decoration: none; } .result-breadcrumb a:hover { color: var(--result-accent, var(--primary-purple-light)); text-decoration: underline; } .result-breadcrumb span { margin: 0 0.5rem; opacity: 0.5; } /* Hero ------------------------------------------------------------------- */ .result-hero { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: var(--spacing-md); align-items: center; margin-bottom: var(--spacing-lg); } .result-art { display: flex; justify-content: center; } .result-art img { width: 100%; max-width: 360px; height: auto; filter: drop-shadow(0 0 35px color-mix(in srgb, var(--result-accent, #9B3DD7) 55%, transparent)); } .result-eyebrow { font-family: var(--font-headers); font-size: 0.95rem; font-weight: 600; letter-spacing: 5px; text-transform: uppercase; color: var(--result-accent, var(--primary-purple-light)); margin: 0 0 0.5rem; } .result-headline h1 { font-family: var(--font-headers); font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.25rem); line-height: 1.05; margin: 0 0 var(--spacing-sm); color: #ffffff; } .result-intro { font-size: 1.2rem; line-height: 1.7; margin: 0 0 var(--spacing-md); color: #e3d8f2; } .result-cta { display: inline-block; background: var(--result-accent, var(--primary-purple)); border-color: var(--result-accent, var(--primary-purple)); box-shadow: 0 0 20px color-mix(in srgb, var(--result-accent, #9B3DD7) 45%, transparent); } .result-cta:hover { background: color-mix(in srgb, var(--result-accent, #9B3DD7) 80%, #ffffff); } /* Sections --------------------------------------------------------------- */ .result-section { /* styles.css pads every
by --spacing-lg; these are subsections of one article and space themselves with the margin below. */ padding: 0; overflow: visible; margin-bottom: var(--spacing-md); max-width: 800px; } .result-section h2 { font-family: var(--font-headers); font-size: 1.6rem; letter-spacing: 1px; margin: 0 0 var(--spacing-sm); padding-bottom: 0.6rem; border-bottom: 2px solid color-mix(in srgb, var(--result-accent, #9B3DD7) 60%, transparent); color: #ffffff; } .result-section p { font-size: 1.1rem; line-height: 1.8; color: #ded2ef; } .result-traits { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.75rem; } .result-traits li { background: rgba(255, 255, 255, 0.05); border-left: 4px solid var(--result-accent, var(--primary-purple-light)); border-radius: 0 var(--border-radius) var(--border-radius) 0; padding: 0.85rem 1.1rem; font-size: 1.05rem; } /* Share ------------------------------------------------------------------ */ .result-share-buttons { display: flex; flex-wrap: wrap; gap: 0.75rem; } .result-share-btn { display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.7rem 1.3rem; border: 2px solid color-mix(in srgb, var(--result-accent, #9B3DD7) 70%, transparent); border-radius: 999px; background: transparent; color: var(--divine-light-white); font-family: var(--font-headers); font-size: 0.95rem; cursor: pointer; text-decoration: none; transition: background var(--transition-speed) var(--transition-smooth), transform var(--transition-speed) var(--transition-smooth); } .result-share-btn:hover { background: color-mix(in srgb, var(--result-accent, #9B3DD7) 30%, transparent); transform: translateY(-2px); } /* Sibling results -------------------------------------------------------- */ .result-siblings { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--spacing-sm); } .result-siblings a { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; padding: 1rem 0.6rem; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--border-radius); background: rgba(255, 255, 255, 0.04); color: var(--divine-light-white); font-family: var(--font-headers); font-size: 0.95rem; text-align: center; text-decoration: none; transition: border-color var(--transition-speed) var(--transition-smooth), transform var(--transition-speed) var(--transition-smooth); } .result-siblings a:hover { border-color: var(--result-accent, var(--primary-purple-light)); transform: translateY(-3px); } .result-siblings img { width: 88px; height: 88px; object-fit: contain; } /* Responsive ------------------------------------------------------------- */ @media (max-width: 860px) { .result-hero { grid-template-columns: 1fr; text-align: center; } .result-art img { max-width: 260px; } .result-section h2 { font-size: 1.4rem; } }