/* ============================================================ triviatry.css — faithful recreation of triviatry.com (FiveZero Publishing, WordPress Newspaper theme + tagDiv builder). Every token below is lifted from Triviatry's own assets: logo → wp-content/uploads/2025/09/logo.png (flame-bulb mark, navy wordmark) nav accent → --td_theme_color:#002941 (set in page ) header strip → --custom-color-2:#881622 quiz card system → wp-content/themes/newspaper-child/assets/css/custom.css .questionHeader/.questionContent navy #133d8d / pale blue #e2ebfc .questionAnswersButton pill outline #002941 .correct-answer / .wrong-answer #20cb8a / #f52a54 .next-question pill #133d8d progress value accent #ffb030 giveaway .btn #881622 quiz-UI face → GabaritoBold/GabaritoMedium/GabaritoSemiBold (self-hosted by the quiz plugin); Gabarito is an exact-match Google Font, used here. chrome face → google-fonts link ships Open Sans / Roboto / Muli — Muli(800) is the theme's bold display face, Open Sans the body/nav face. ============================================================ */ body.triviatry { --tt-navy: #002941; /* --td_theme_color — links, nav active, accents */ --tt-blue: #133d8d; /* quiz card header/CTA blue */ --tt-blue-pale: #e2ebfc; /* quiz card content background */ --tt-blue-deep: #1d306b; /* dashboard heading blue */ --tt-green: #20cb8a; /* correct answer */ --tt-red: #f52a54; /* wrong answer */ --tt-amber: #ffb030; /* progress/points accent */ --tt-maroon: #881622; /* header strip / prize CTA */ --tt-rule: #c9d2e3; --tt-ink: #1a1a1a; --tt-muted: #5f5f5f; --tt-display: "Muli", "Open Sans", Arial, sans-serif; --tt-sans: "Open Sans", Arial, Helvetica, sans-serif; --tt-quiz: "Gabarito", "Open Sans", Arial, sans-serif; font-family: var(--tt-sans); color: var(--tt-ink); background: #fff; } body.triviatry a { color: inherit; text-decoration: none; } /* ---------------- header ---------------- */ .tt-top { border-top: 4px solid var(--tt-maroon); border-bottom: 1px solid #eceef2; } .tt-top-in { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 28px; padding: 16px 20px; } .tt-logo img { display: block; height: 34px; width: auto; } .tt-nav { display: flex; align-items: center; gap: 22px; font-family: var(--tt-sans); font-weight: 700; font-size: 13.5px; } .tt-nav a { color: #000; padding: 4px 0; } .tt-nav a:hover, .tt-nav a.active { color: var(--tt-navy); } .tt-nav .caret { font-size: 10px; } .tt-search { margin-left: auto; background: none; border: 0; color: var(--tt-navy); display: grid; place-items: center; } .tt-search svg { width: 19px; height: 19px; } /* ---------------- article head ---------------- */ .tt-main { max-width: 760px; margin: 0 auto; padding: 30px 20px 70px; } .tt-crumb { font-family: var(--tt-sans); font-size: 12.5px; color: var(--tt-muted); margin: 0 0 14px; } .tt-crumb a { color: var(--tt-navy); } .tt-crumb .cur { color: var(--tt-muted); } .tt-cat { display: inline-block; font-family: var(--tt-sans); font-weight: 800; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-blue); background: var(--tt-blue-pale); padding: 5px 10px; border-radius: 5px; margin-bottom: 12px; } .tt-h1 { font-family: var(--tt-display); font-weight: 800; font-size: clamp(26px, 4vw, 36px); line-height: 1.18; letter-spacing: -.01em; color: var(--tt-ink); margin: 0 0 16px; } .tt-byline { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; font-family: var(--tt-sans); font-size: 13.5px; color: var(--tt-muted); } .tt-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; } .tt-avatar svg { width: 100%; height: 100%; display: block; } .tt-byline .who b { color: var(--tt-ink); } .tt-byline .dot { opacity: .6; } /* ---------------- quiz card ---------------- */ .question { border-radius: 32px; overflow: hidden; box-shadow: 0 10px 30px -18px rgba(19,61,141,.35); } .questionHeader { display: flex; align-items: center; justify-content: space-between; height: 50px; padding: 0 25px; background: var(--tt-blue); } .questionHeaderCount { color: #fff; font-family: var(--tt-quiz); font-weight: 600; font-size: 14px; } .questionHeaderRating { display: flex; align-items: center; gap: 5px; color: #f4f8ff; font-family: var(--tt-quiz); font-size: 13px; } .questionContent { background: var(--tt-blue-pale); padding: 26px 26px 22px; display: flex; flex-direction: column; gap: 18px; } .imgContainer.quiz img { display: block; width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 16px; } .questionSectionText.questionText { font-family: var(--tt-quiz); font-weight: 700; font-size: 23px; line-height: 1.35; color: var(--tt-ink); margin: 0; } .questionAnswers { display: flex; gap: 14px; flex-wrap: wrap; } .questionAnswersButton { border-radius: 25px; min-height: 50px; width: calc(50% - 7px); display: flex; align-items: center; position: relative; } .questionAnswersButton p { font-family: var(--tt-quiz); font-weight: 700; font-size: 15px; margin: 0; padding: 4% 6%; width: 100%; text-align: center; } .button-answer { border: 1.5px solid var(--tt-navy); color: var(--tt-navy); } .correct-answer { background: var(--tt-green) !important; border: 2px solid var(--tt-green) !important; color: #fff !important; } .correct-answer p { padding-left: 15%; } .correct-answer::before { content: ""; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; background: url('data:image/svg+xml;utf8,') no-repeat center/contain; } .tt-revealed .questionAnswersButton:not(.correct-answer) { border: 1.5px solid var(--tt-rule); color: #9aa1ab; opacity: .7; } .tt-credit { margin: 8px 2px 0; } .tt-credit figcaption { font-family: var(--tt-sans); font-size: 11.5px; color: var(--tt-muted); } .questionDescriptionContainer { margin-top: 4px; } .tt-explain-label { font-family: var(--tt-quiz); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--tt-blue); margin: 0 0 8px; } .questionDescriptionContainer p:not(.tt-explain-label) { font-family: var(--tt-sans); font-size: 16px; line-height: 1.6; color: var(--tt-ink); margin: 0; } .nextButtonContainer { text-align: center; margin-top: 18px; } .next-question { display: inline-block; border-radius: 50px; padding: 1em 3em; background: var(--tt-blue); color: #fff; font-family: var(--tt-quiz); font-weight: 700; font-size: 14.5px; } .next-question:hover { filter: brightness(1.08); } /* ---------------- more / prize furniture ---------------- */ .tt-more { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--tt-rule); } .tt-more h4 { font-family: var(--tt-quiz); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--tt-muted); margin: 0 0 12px; } .tt-more a.m { display: flex; align-items: center; gap: 10px; padding: 10px 0; font-family: var(--tt-sans); font-size: 15px; color: var(--tt-ink); } .tt-more a.m:hover .chip { filter: brightness(0.95); } .tt-more .chip { flex: none; font-family: var(--tt-sans); font-weight: 800; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase; padding: 4px 8px; border-radius: 5px; } .tt-more .chip.history { background: #fdf1d2; color: #a67a1e; } .tt-more .chip.general { background: #fbe5da; color: #b45c34; } .tt-prize { margin-top: 22px; background: var(--tt-blue-pale); border-radius: 16px; padding: 18px 20px; } .tt-prize p { font-family: var(--tt-sans); font-size: 14.5px; line-height: 1.55; color: var(--tt-ink); margin: 0; } .tt-prize a { color: var(--tt-maroon); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } /* ============================================================ Rewarded gate — skinned as Triviatry's own quiz-reveal furniture: the 32px-radius quiz card language, navy CTA pill, Gabarito headings. ============================================================ */ body.triviatry .gate-eyebrow { font-family: var(--tt-quiz); font-weight: 700; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tt-blue); } body.triviatry .reward-locker { border-radius: 28px; } body.triviatry .reward-locker .lock-badge { background: var(--tt-blue-pale); color: var(--tt-blue); } body.triviatry .reward-locker h3 { font-family: var(--tt-quiz); font-weight: 800; font-size: 24px; letter-spacing: -.01em; color: var(--tt-ink); } body.triviatry .reward-locker p { font-family: var(--tt-sans); font-size: 15px; color: var(--tt-muted); } body.triviatry .rv-cta { background: var(--tt-blue); border-radius: 50px; font-family: var(--tt-quiz); font-weight: 700; font-size: 15.5px; box-shadow: 0 12px 26px -12px rgba(19,61,141,.55); } body.triviatry .rv-cta:hover { filter: brightness(1.07); } body.triviatry .rv-later { font-family: var(--tt-sans); color: var(--tt-muted); } body.triviatry .rv-later:hover { color: var(--tt-navy); } body.triviatry .reward-locker .rv-foot { display: none; } body.triviatry .lk-side { background: var(--tt-blue-pale); } body.triviatry .lk-side h4 { font-family: var(--tt-quiz); color: var(--tt-blue-deep); } body.triviatry .lk-side li { font-family: var(--tt-sans); font-size: 15px; color: var(--tt-ink); } body.triviatry .lk-side li svg { color: var(--tt-green); } body.triviatry .gate-fine { font-family: var(--tt-sans); color: #8a8a8a; } body.triviatry .rv-floating { background: var(--tt-blue-deep); } body.triviatry .rv-floating .txt { font-family: var(--tt-sans); } body.triviatry .rv-floating button { background: var(--tt-amber); color: #1a1a1a; border-radius: 50px; font-family: var(--tt-quiz); font-weight: 700; } /* ---------------- responsive ---------------- */ @media (max-width: 620px) { .tt-nav { gap: 14px; font-size: 12.5px; } .questionAnswersButton { width: 100%; } .questionContent { padding: 20px 16px 18px; } }