/* * Global light-mode layer. * * portal.js applies .portal-light to the root element. Older theme * files used body.portal-light-theme, so their light palettes were never * reached. Keep every selector rooted at html.portal-light so this layer * works consistently on the homepage, archives, game pages and static pages. */ html.portal-light { color-scheme: light; } html.portal-light body, html.portal-light .all, html.portal-light .portal-app, html.portal-light .portal-main-shell, html.portal-light .portal-home, html.portal-light .portal-free-games, html.portal-light .portal-developers-page, html.portal-light .portal-info-page, html.portal-light .portal-legal-page, html.portal-light .portal-account-page, html.portal-light .portal-game-page, html.portal-light .portal-archive, html.portal-light .gf-word-page, html.portal-light .pcp-page { background-color: #f6f4f7 !important; color: #241f29; } /* Site chrome */ html.portal-light .portal-app-header, html.portal-light .site-header, html.portal-light .portal-sidebar, html.portal-light .portal-header-overflow__menu { background: rgba(255, 255, 255, .94) !important; border-color: rgba(44, 37, 52, .15) !important; color: #302a36 !important; } html.portal-light .portal-sidebar a, html.portal-light .portal-app-header a, html.portal-light .site-header a { color: #4b4452; } html.portal-light .portal-header-search .portal-search, html.portal-light .portal-header-search input, html.portal-light .site-header input, html.portal-light .portal-icon-button, html.portal-light .portal-header-action { background-color: #fff !important; border-color: rgba(44, 37, 52, .18) !important; color: #4b4452 !important; } html.portal-light .portal-header-search input::placeholder, html.portal-light .portal-search::placeholder { color: #766e7e !important; opacity: 1; } /* Shared content surfaces */ html.portal-light .portal-section, html.portal-light .portal-home .portal-play-showcase, html.portal-light .portal-home .portal-frog-follow, html.portal-light .portal-home-panel, html.portal-light .portal-home-intro, html.portal-light .portal-home-promo, html.portal-light .portal-home-cta, html.portal-light .portal-article-hub, html.portal-light .portal-faq, html.portal-light .portal-published-game, html.portal-light .portal-download-app, html.portal-light .game-info-intro, html.portal-light .game-info-panel, html.portal-light .portal-category-info, html.portal-light .portal-account-dashboard, html.portal-light .portal-account-panel, html.portal-light .portal-free-games__hero, html.portal-light .portal-free-games__directory, html.portal-light .portal-free-games__faq, html.portal-light .portal-developers-page__hero, html.portal-light .portal-developers-page__benefits article, html.portal-light .portal-developers-page__section--steps, html.portal-light .portal-info-page__article, html.portal-light .portal-info-page__hero, html.portal-light .portal-info-page__section, html.portal-light .portal-legal-page__article, html.portal-light .portal-word-hero, html.portal-light .portal-word-game, html.portal-light .portal-word-section, html.portal-light .pcp-hero, html.portal-light .pcp-collection, html.portal-light .pcp-info, html.portal-light .pcp-faq, html.portal-light .portal-page-card { background: #fff !important; border-color: rgba(44, 37, 52, .15) !important; box-shadow: 0 12px 30px rgba(44, 37, 52, .07); } /* Top Picks has its own arcade skin in frog-follow.css, so give it an * explicit light surface instead of letting the dark skin win in light mode. */ html.portal-light .portal-home .portal-play-showcase { background: radial-gradient(circle at 87% 76%, rgba(255, 157, 24, .18), transparent 21rem), linear-gradient(135deg, #ffffff 0%, #fff8ef 54%, #eef5fb 100%) !important; border-color: rgba(218, 111, 0, .32) !important; box-shadow: 0 16px 34px rgba(56, 39, 45, .12) !important; } html.portal-light .portal-free-games__hero, html.portal-light .portal-developers-page__hero, html.portal-light .portal-info-page__hero, html.portal-light .pcp-hero { background: radial-gradient(circle at 90% 10%, rgba(255, 141, 0, .16), transparent 31%), linear-gradient(135deg, #fffaf5, #fff 58%, #f2f8fb) !important; } /* Readable type in ordinary page panels. Do not target game-card overlays, * because those labels deliberately remain white over the artwork. */ html.portal-light .portal-home__title, html.portal-light .portal-archive__heading, html.portal-light .portal-archive__heading h1, html.portal-light .portal-section__header h2, html.portal-light .portal-article-hub h2, html.portal-light .portal-faq h2, html.portal-light .portal-free-games h1, html.portal-light .portal-free-games h2, html.portal-light .portal-free-games h3, html.portal-light .portal-developers-page h1, html.portal-light .portal-developers-page h2, html.portal-light .portal-developers-page h3, html.portal-light .portal-info-page h1, html.portal-light .portal-info-page h2, html.portal-light .portal-info-page h3, html.portal-light .portal-legal-page h1, html.portal-light .portal-legal-page h2, html.portal-light .portal-legal-page h3, html.portal-light .portal-account-dashboard h1, html.portal-light .portal-account-dashboard h2, html.portal-light .portal-account-dashboard h3, html.portal-light .game-info-intro h2, html.portal-light .game-info-panel h2, html.portal-light .portal-published-game h2, html.portal-light .portal-download-app h2, html.portal-light .gf-word-page h1, html.portal-light .gf-word-page h2, html.portal-light .gf-word-page h3, html.portal-light .pcp-page h1, html.portal-light .pcp-page h2, html.portal-light .pcp-page h3 { color: #241f29 !important; text-shadow: none !important; } html.portal-light .portal-free-games p, html.portal-light .portal-developers-page p, html.portal-light .portal-info-page p, html.portal-light .portal-legal-page p, html.portal-light .portal-account-dashboard p, html.portal-light .portal-archive .archive-description, html.portal-light .game-info-lead, html.portal-light .game-info-content, html.portal-light .gf-word-page p, html.portal-light .pcp-page p { color: #625b69 !important; } html.portal-light .portal-section__more, html.portal-light .portal-article-hub__more, html.portal-light .portal-free-games a:not(.portal-game-card):not(.portal-button), html.portal-light .portal-info-page a:not(.portal-button), html.portal-light .portal-legal-page a:not(.portal-button) { color: #625b69 !important; } html.portal-light .portal-section__more:hover, html.portal-light .portal-section__more:focus-visible, html.portal-light .portal-article-hub__more:hover, html.portal-light .portal-article-hub__more:focus-visible, html.portal-light .portal-free-games a:hover, html.portal-light .portal-info-page a:hover, html.portal-light .portal-legal-page a:hover { color: #b85000 !important; } /* Forms, menus and disclosure rows */ html.portal-light input, html.portal-light select, html.portal-light textarea, html.portal-light .portal-free-games__sort, html.portal-light .portal-free-games__sort-menu, html.portal-light .portal-archive__controls select, html.portal-light .portal-archive__controls .selecter-selected, html.portal-light .portal-archive__controls .selecter-options, html.portal-light .portal-free-games__faq details, html.portal-light .portal-info-page details, html.portal-light .portal-legal-page details { background-color: #fff !important; border-color: rgba(44, 37, 52, .18) !important; color: #302a36 !important; } html.portal-light .portal-free-games__faq summary, html.portal-light .portal-info-page summary, html.portal-light .portal-legal-page summary, html.portal-light label, html.portal-light .portal-account-profile label { color: #302a36 !important; } /* Footer — this must be global because it appears below every template. */ html.portal-light footer.portal-site-footer { background: linear-gradient(135deg, #faf8fb, #eef5fa) !important; border-color: rgba(44, 37, 52, .14) !important; color: #554d5c !important; } html.portal-light footer.portal-site-footer:before { background: radial-gradient(circle at 8% 15%, rgba(255, 139, 0, .13), transparent 24%) !important; } html.portal-light .portal-site-footer__brand, html.portal-light .portal-site-footer__bottom { border-color: rgba(44, 37, 52, .14) !important; } html.portal-light .portal-site-footer__brand p, html.portal-light .portal-site-footer__bottom p, html.portal-light .portal-site-footer__play-card small { color: #6a6271 !important; } html.portal-light .portal-site-footer__links h2, html.portal-light .portal-site-footer__links a, html.portal-light .portal-site-footer__play-card strong { color: #302a36 !important; } html.portal-light .portal-site-footer__links a:hover, html.portal-light .portal-site-footer__links a:focus-visible { color: #b85000 !important; } html.portal-light .portal-site-footer__play-card, html.portal-light .portal-site-footer__social-link { background: #fff !important; border-color: rgba(44, 37, 52, .16) !important; color: #4b4452 !important; } @media (max-width: 767px) { html.portal-light .portal-main-shell, html.portal-light .portal-home, html.portal-light .portal-free-games, html.portal-light .portal-developers-page, html.portal-light .portal-info-page, html.portal-light .portal-legal-page, html.portal-light .portal-account-page, html.portal-light .portal-game-page, html.portal-light .portal-archive, html.portal-light .gf-word-page, html.portal-light .pcp-page { background-color: #f8f6f9 !important; } }