/* Fonts. Every @font-face on the platform lives here; vite.config.js prepends this file to the app.css and pages.css bundles, and every layout loads one or the other. Bree Serif Latin languages Aleo Vietnamese Noto Serif everything else, plus the tail of every stack Never put Bree Serif and Aleo in the same stack. A glyph missing from one gets pulled from the next family in the list, which mixes two letterforms inside a single word. Only Noto belongs at the end of a stack. "Noto Serif" here is one file per script, split by unicode-range, so the browser only downloads the Thai file when it paints Thai. Faces are self-hosted: no Google Fonts CDN call, no visitor IP sent to Google (GDPR). Each declares its weight and style so Safari matches it instead of synthesising a heavier cut. */ /* Bree Serif, Latin ranges only. Anything outside them (Thai, Arabic, CJK) is left unclaimed and falls through to Noto Serif in the stack. */ @font-face { font-family: "Bree Serif"; src: url('../fonts/BreeSerif-latin.woff2') format('woff2'), url('../fonts/BreeSerif-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Bree Serif"; src: url('../fonts/BreeSerif-latin-ext.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Aleo, Vietnamese. Weight 500, exposed as normal so call sites just ask for "Aleo". No .ttf fallback: the legacy Aleo-Bold.ttf is the 700 cut and would quietly undo the weight. */ @font-face { font-family: "Aleo"; src: url('../fonts/Aleo-latin-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Aleo"; src: url('../fonts/Aleo-latin-ext-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Aleo"; src: url('../fonts/Aleo-vietnamese-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* Noto Serif, one face per script picked by unicode-range. The ranges are the upstream Google Fonts subset definitions. Weights are per-script, all exposed as normal: 500 Armenian, Hebrew, Greek, Arabic, Thai, Cyrillic, Georgian, Bengali, Khmer (and Aleo, above, for Vietnamese) 600 Devanagari, CJK, and the Latin/Vietnamese tail faces To retune, change the weight suffix in the url. fontsource publishes 100-900 for these families; Noto Naskh Arabic only 400-700. */ /* Latin, so a stack ending in "Noto Serif" has something to land on — an English brand name inside a Thai sentence, say. Stays at 600 to read like the Latin around it. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerif-latin-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerif-latin-ext-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Vietnamese, reached only by untagged text — tagged content goes to Aleo via the :lang(vi) rule below. Stays at 600 to match the Latin face above: Vietnamese splits across the two by codepoint, and two weights across that split would put two weights inside one word. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerif-vietnamese-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* Cyrillic — Russian, Ukrainian, Bulgarian, Serbian, ... */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerif-cyrillic-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerif-cyrillic-ext-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* Greek. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerif-greek-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerif-greek-ext-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+1F00-1FFF; } /* Arabic. Noto has no Serif Arabic; Naskh is the serif-class face Google ships instead. Note this family only publishes 400-700. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoNaskhArabic-arabic-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } /* Hebrew. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifHebrew-hebrew-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* Armenian. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifArmenian-armenian-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; } /* Georgian. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifGeorgian-georgian-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0589, U+10A0-10FF, U+1C90-1CBA, U+1CBD-1CBF, U+205A, U+2D00-2D2F, U+2E31; } /* Devanagari — Hindi, Marathi, Nepali, Sanskrit. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifDevanagari-devanagari-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF; } /* Bengali. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifBengali-bengali-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+0951-0952, U+0964-0965, U+0980-09FE, U+1CD0, U+1CD2, U+1CD5-1CD6, U+1CD8, U+1CE1, U+1CEA, U+1CED, U+1CF2, U+1CF5-1CF7, U+200C-200D, U+20B9, U+25CC, U+A8F1; } /* Thai. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifThai-thai-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; } /* Khmer. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifKhmer-khmer-500.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+1780-17FF, U+19E0-19FF, U+200C-200D, U+25CC; } /* CJK. No local() in these stacks: local("Songti SC") and friends resolve to the system Regular, so the pinned weight would never load for most users. The cost is a ~1-1.5MB download, fetched once and only when a CJK glyph is actually painted. This first face catches untagged Han/kana/hangul only. Han is shared between Chinese and Japanese so unicode-range cannot separate them; tagged content is routed by the :lang(zh|ja|ko) rules below. */ @font-face { font-family: "Noto Serif"; src: url('../fonts/noto/NotoSerifSC-chinese-simplified-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; unicode-range: U+1100-11FF, U+2E80-2EFF, U+3000-303F, U+3040-309F, U+30A0-30FF, U+3130-318F, U+31F0-31FF, U+3400-4DBF, U+4E00-9FFF, U+A960-A97F, U+AC00-D7FF, U+F900-FAFF, U+FF00-FFEF; } /* One family per CJK language, so a Japanese sentence does not take its kana from JP and its kanji from SC. */ @font-face { font-family: "Noto Serif SC"; src: url('../fonts/noto/NotoSerifSC-chinese-simplified-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Serif JP"; src: url('../fonts/noto/NotoSerifJP-japanese-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Noto Serif KR"; src: url('../fonts/noto/NotoSerifKR-korean-600.woff2') format('woff2'); font-weight: normal; font-style: normal; font-display: swap; } /* Display and UI faces, language-independent. */ @font-face { font-family: "Luckiest Guy"; src: url('../fonts/LuckiestGuy.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } @font-face { font-family: "Roboto"; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); font-weight: normal; font-style: normal; font-display: swap; } /* Call-site classes. */ .font-bree { font-family: "Bree Serif", "Noto Serif", serif; /* No synthesised bold or italic; that caused the "Arabic renders too bold" report. */ font-synthesis: none; -webkit-font-synthesis: none; /* Bree ships a single 400 cut, so it cannot be lightened by swapping files the way the other families can. Grayscale antialiasing thins the stems instead, bringing it closer to the Aleo and Noto cards. macOS and iOS only — Windows and Android ignore both properties. */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .font-luckiest { font-family: "Luckiest Guy", cursive; font-size: 2.5em; } .font-roboto { font-family: "Roboto", sans-serif; } /* Language routing. Content carries a BCP-47 lang attribute (cardLangTag() in app/helpers.php) and these rules turn that tag into a font stack. Selectors sit at (0,2,0) specificity so they beat the single-class rules that set "Bree Serif" elsewhere in the bundles (.ctrl-panel-text, .modal-text, .option-title) without needing !important. Latin languages have no rule here: they inherit .font-bree, which is already the Bree stack. Only languages needing a different family are listed. */ /* Vietnamese shares the Latin block with Bree, so the swap has to cover the whole run — otherwise "Việt" takes its base letters from Bree and its tone-marked ones from Aleo. */ [lang="vi"], [lang="vi"] .font-bree, .font-bree:lang(vi) { font-family: "Aleo", "Noto Serif", serif; } /* One family per language, so kana and Han agree. */ [lang="zh"], [lang="zh"] .font-bree, .font-bree:lang(zh) { font-family: "Noto Serif SC", serif; } [lang="ja"], [lang="ja"] .font-bree, .font-bree:lang(ja) { font-family: "Noto Serif JP", serif; } [lang="ko"], [lang="ko"] .font-bree, .font-bree:lang(ko) { font-family: "Noto Serif KR", serif; } /* Undo the grayscale antialiasing on everything that is not Bree. .font-bree sits on every card, Latin or not, so without this reset the smoothing would thin Aleo and Noto by the same amount and close none of the gap it was added to close. The list is the non-Latin set CARD_SCRIPT_PATTERNS can emit (app/helpers.php). Add a script there, add it here. */ [lang="vi"], [lang="vi"] .font-bree, .font-bree:lang(vi), [lang="zh"], [lang="zh"] .font-bree, .font-bree:lang(zh), [lang="ja"], [lang="ja"] .font-bree, .font-bree:lang(ja), [lang="ko"], [lang="ko"] .font-bree, .font-bree:lang(ko), [lang="ar"], [lang="ar"] .font-bree, .font-bree:lang(ar), [lang="he"], [lang="he"] .font-bree, .font-bree:lang(he), [lang="th"], [lang="th"] .font-bree, .font-bree:lang(th), [lang="km"], [lang="km"] .font-bree, .font-bree:lang(km), [lang="bn"], [lang="bn"] .font-bree, .font-bree:lang(bn), [lang="hi"], [lang="hi"] .font-bree, .font-bree:lang(hi), [lang="hy"], [lang="hy"] .font-bree, .font-bree:lang(hy), [lang="ka"], [lang="ka"] .font-bree, .font-bree:lang(ka), [lang="el"], [lang="el"] .font-bree, .font-bree:lang(el), [lang="ru"], [lang="ru"] .font-bree, .font-bree:lang(ru) { -webkit-font-smoothing: auto; -moz-osx-font-smoothing: auto; } /* Line-heights tuned for Bree and Aleo clip the marks these scripts stack above and below the baseline: Thai and Khmer vowel signs, Devanagari and Bengali matras, Arabic dots and hamza. Loosened per script rather than globally, which would reflow every English card. */ [lang="th"], [lang="km"], [lang="lo"], [lang="my"], [lang="hi"], [lang="mr"], [lang="ne"], [lang="sa"], [lang="bn"], [lang="ar"], [lang="fa"], [lang="ur"], [lang="he"] { line-height: 1.65; } [lang="zh"], [lang="ja"], [lang="ko"] { line-height: 1.5; } /* Right-to-left. Blade sets dir="rtl" on the element itself, since a font swap alone does not reorder text; these rules cover the layout that follows. */ [dir="rtl"] { text-align: right; } [dir="rtl"] input, [dir="rtl"] textarea { text-align: right; } /* The rule above sits on the element, so it beats the centring a title would otherwise inherit from the jumbotron and pins it to the right edge. */ .jumbo-tagline [dir="rtl"] { text-align: center; } /* Form controls do not inherit font-family — every UA stylesheet resets them to a system font — so a textarea inside a lang="vi" card would render its Vietnamese in the browser default while the card around it is in Aleo. Scoped to lang-tagged subtrees rather than applied globally, which would restyle every control on the site (search, Stripe checkout, admin). The `body` prefix is what keeps it scoped: would otherwise make a bare `[lang] input` match everything. Bootstrap 3 already declares this, so on most pages it is a guard; it matters on the game and slideshow views, which do not always load the full reset. */ body [lang] input, body [lang] textarea, body [lang] select { font-family: inherit; } .no-underline { text-decoration: none !important; /*color:#fff;*/ } .no-underline:hover { text-decoration: none !important; /*color:#fff; */ }/* Font faces and the .font-bree / .font-luckiest / .font-roboto classes live in public/css/fonts.css, which is prepended to this bundle in vite.config.js. They used to be duplicated at the top of six stylesheets. */ @font-face { font-family: "FontAwesome"; font-weight: normal; font-style: normal; } .ico { font-family: "FontAwesome"; } body { background: #F5F6FA; } textarea { resize: none; } .navbar { margin-bottom: 0px; /*min-width:310px;*/ /*width: auto !important;*/ } .navbar-right { margin-left: 5px; margin-right: 5px; } .navbar-text { text-decoration: none !important; } .navbar-text:hover { color: #fff; } .jumbotron { margin-top: 25px; background-image: url("../img/food.jpg"); /*background-image:none;*/ /*background-color:#FAC564;*/ background-attachment: fixed; margin-bottom: 20px; padding-bottom: 2vmin; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .jumbo-header { font-size: 32px; } .jumbo-tagline { font-size: 1.2em; } .footer { margin-top: 2em; margin-bottom: 1em; } .img-small { max-height: 240px; border-radius: 10px; } .img-index { max-height: 150px; border-radius: 5px; /*border: 1px solid LightGray;*/ } .show-problem { font-size: 1.5em; } #upload-file-info { font-size: 1em; } .index-points { font-size: 1.35em; padding-top: 4px; padding-bottom: 4px; } .index-name { font-size: 1.4em; /*background-color: #6787A6;*/ color: #333; padding: 0.4em 0 0.4em 0; } .panel-heading-index { height: auto; /*border-radius: 20px;*/ color: black; } .index-game-stats { font-size: 1.2em; color: #f8a91a; padding: 0; margin: 0; } .panel-body-index { margin: 0; padding: 0 0 1em 0; } .privacy-rules { line-height: 200%; } .game-description { /*overflow: auto;*/ height: auto; font-size: 1em; margin: 0; padding: 0; padding-left: 0.4em; padding-right: 0.4em; } .index-answer { font-size: 1.5em; color: #1e6894; opacity: 0; padding-top: 0; padding-bottom: 0; transition: 0.5s all; } .ctrl-panel-text { font-family: "Bree Serif", "Noto Serif", serif; color: #fff; font-size: 1.4em; } .control-panel-header { padding: 0.6em 0 0.6em 0; } .no-select { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .inline { display: inline; } .badge-danger { background-color: #d43f3a; font-size: 1.1em; } .badge-success { background-color: #34be38; font-size: 1.1em; } .badge-primary { background-color: #3173ad; font-size: 1.1em; } .badge-questions { background-color: #fff; color: #0a91ab; font-size: 1em; padding-top: 1px; padding-bottom: 1px; } .badge-thanks { background-color: #fff; color: #f0386b; font-size: 1em; padding-top: 1px; padding-bottom: 1px; } .badge-info { background-color: #6787a6; /*background-color: #8D98A2;*/ font-size: 1em; padding-top: 1px; padding-bottom: 1px; } .pad-right { padding-right: 0.8em; } .pad-right-mobile { margin-right: 0.6em; } .well { padding-top: 12px; padding-bottom: 12px; background: white; border-radius: 10px; border: 0px solid grey; } .scrollable { overflow: auto; height: 90px; width: 100%; vertical-align: middle; } .game-control-box { height: 55px; } .index-by { padding-top: 16px; padding-bottom: 0px; margin: 0; font-size: 0.84em; } .user-link { padding-top: 0px; padding-bottom: 0px; font-size: 1em; } .mid { vertical-align: middle; } .question-box { overflow: auto; height: 90px; width: 100%; vertical-align: middle; } .imageless-question-box { overflow: auto; height: 90px; width: 100%; vertical-align: middle; } .question-stats { font-size: 1.2em; color: #f8a91a; margin-top: 9px; padding-bottom: 3px; } .question-count { font-size: 1em; } .existing-questions { height: 323px; overflow: auto; border-radius: 3px; } hr { margin: 10px 0 10px 0; } alert { margin: 0; } .shaded { background-color: #f3f5f8; padding: 5px 15px 15px 15px; border-radius: 5px; } .non-shaded { padding: 5px 15px 15px 15px; border-radius: 5px; } .faded-heart { color: #f35f88; } .btn-thanks { background: #f0386b; color: #ffffff; transition: all 0.2s; } .btn-thanks:hover, .btn-thanks:focus, .btn-thanks:active, .btn-thanks.active, .open > .dropdown-toggle.btn-thanks { background: #d83260; color: #ffffff; } .btn-defaulted { background: #8d98a2; color: #ffffff; transition: all 0.2s; } .btn-defaulted:hover, .btn-defaulted:focus, .btn-defaulted:active, .btn-defaulted.active, .open > .dropdown-toggle.btn-defaulted { background: #7e8891; color: #ffffff; } .btn-dangerous { background: #6d6479; /*purpley*/ color: #ffffff; transition: all 0.2s; } .btn-dangerous:hover, .btn-dangerous:focus, .btn-dangerous:active, .btn-dangerous.active, .open > .dropdown-toggle.btn-dangerous { background: #575060; color: #ffffff; } .btn-successful { background: #fb4d3d; /*play baam*/ color: #ffffff; transition: all 0.2s; } .btn-successful:hover, .btn-successful:focus, .btn-successful:active, .btn-successful.active, .open > .dropdown-toggle.btn-successful { background: #c83d30; color: #ffffff; } .btn-infoed { background: #2ebe4e; /*greeny*/ color: #ffffff; transition: all 0.2s; } .btn-infoed:hover, .btn-infoed:focus, .btn-infoed:active, .btn-infoed.active, .open > .dropdown-toggle.btn-infoed { /*background: #269e41;*/ color: #ffffff; } .btn-primaryed { /*add questions background: #1E6894; new turq */ background: #0a91ab; color: #ffffff; transition: all 0.2s; } .btn-primaryed:hover, .btn-primaryed:focus, .btn-primaryed:active, .btn-primaryed.active, .open > .dropdown-toggle.btn-primaryed { background: #087286; color: #ffffff; } .btn-google:hover, .btn-google:focus, .btn-google:active { background-color: #2b6fc2 !important; color: #fff; } .btn-facebook:hover, .btn-facebook:focus, .btn-facebook:active { background-color: #294378 !important; color: #fff; } .btn-pinked { background: #f0386b; color: #ffffff; transition: all 0.2s; } .btn-pinked:hover, .btn-pinked:focus, .btn-pinked:active, .btn-pinked.active, .open > .dropdown-toggle.btn-pinked { background: #d83260; color: #ffffff; } .panel { border: 0; overflow: hidden; } .panel > .panel-heading { /*light bluey background-color: #6787A6; recent: 6497b1*/ background-image: none; background-color: #6787a6; color: #fff; border: 0; } /*.panel-heading { background-color: #fff; color: #6787A6; } */ .panel-menus { border-radius: 3px; padding: 0; margin: 0; border: 0; transition: all 0.2s; } .panel-menus:hover { box-shadow: 0 12px 14px 2px rgba(0, 0, 0, 0.16), 0 3px 24px 5px rgba(0, 0, 0, 0.16), 0 8px 10px -5px rgba(0, 0, 0, 0.24); } .panel-game { border-radius: 3px; padding: 0; margin: 0; border: 0; transition: all 0.3s; } .panel-game:hover { box-shadow: 0 12px 14px 2px rgba(0, 0, 0, 0.14), 0 3px 24px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } .paginator { /* todo */ } .box-shadow--2dp { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); } .box-shadow--3dp { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 1px 8px 0 rgba(0, 0, 0, 0.12); } .box-shadow--4dp { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .box-shadow--6dp { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2); } .box-shadow--8dp { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); } .box-shadow--16dp { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(0, 0, 0, 0.2); } .index-game-settings { font-size: 1.2em; padding: 0.25em; color: #c7c7c7; } .index-game-settings:hover { color: #0a91ab; /*turq*/ } .label-default { background-color: #6787a6; color: #fff; } .pointer-cursor { cursor: pointer; } .label-privacy { cursor: default; font-family: "Bree Serif", "Noto Serif", serif; color: #fff; font-size: 0.95em; border-radius: 3px; padding: 2px 6px 4px 6px; } .label-faded { background-color: #d6dfe7 !important; } .label-private { background-color: #6787a6; /*grey*/ } .label-pending { background-color: #ef8354; /*orange*/ } .label-shared { background-color: #fb4d3d; /*red*/ } .label-hidden { background-color: #8d98a2; /*grey*/ } .label-featured { background-color: #f0386b; /*pink*/ } .label-daily { background-color: #0a91ab; /*turq*/ } .list-group-item { border: 0px solid; } .page-header { margin-top: 0px; margin-bottom: 30px; } .alert-pink { background-image: none; background-color: #f0386b; color: #fff; font-size: 1.2em; border: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); padding: 10px 10px 10px 10px; transition: all 0.2s; } .alert-pink:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .alert-success { background-image: none; background-color: #0a91ab; color: #fff; font-size: 1.2em; border: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); padding: 10px 10px 10px 10px; transition: all 0.2s; } .alert-success:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .alert-danger { background-image: none; background-color: #fb4d3d; color: white; font-size: 1.2em; border: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); padding: 10px 10px 10px 10px; transition: all 0.2s; } .alert-danger:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .alert-info { background-image: none; background-color: #6787a6; color: white; font-size: 1.2em; border: 0; box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12); padding: 10px 10px 10px 10px; transition: all 0.2s; } .alert-info:hover { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.2); } .grid-sizer { /* background-color: red; visibility: hidden; margin:none; padding:none; height: 0; width:0;*/ } .grid-sizer-q { /* background-color: red; visibility: hidden; margin:none; padding:none; height: 0; width:0;*/ } .grid { width: 100%; padding: 0; margin: 0; } /* clearfix */ .grid:after { content: ""; display: block; clear: both; } .btn-link-q { font-size: 1.2em; color: #f8a91a; padding: 0; margin: 0; background-color: #fff; } .created { font-size: 1.2em; padding: 0; margin: 0; background-color: #fff; } .btn-link-d { font-size: 1.2em; padding: 0; margin: 0; background-color: #fff; transition: 2s; } .panel-icon { font-size: 1.2em; color: #f0386b; margin: 0.1em; } .sign-up-benefit-header { color: #444; font-family: "Bree Serif", "Noto Serif", serif; margin-bottom: 14px; } .sign-up-benefit-text { font-style: italic; } .sign-up-image { border-radius: 6px; margin-top: 25px; margin-bottom: 8px; } .btn-plus { background: #f0386b; background: linear-gradient(0deg, rgba(240,56,107,1) 0%, rgba(240,56,203,1) 100%); color: #fff; transition:all 0.2s; } .btn-plus:hover, .btn-plus:focus, .btn-plus:active, .btn-plus.active, .open > .dropdown-toggle.btn-plus { background: #f0386b; background: linear-gradient(0deg, rgb(219, 53, 100) 0%, rgb(226, 50, 191) 100%); color: #fff; } .pricing-faq { margin-bottom: 35px; } .logos { display: block; margin-left: auto; margin-right: auto; width: 75%; } .made-by { display: block; margin-left: auto; margin-right: auto; border-radius: 10px; margin-bottom: 10px; width: 50%; } .login-divider { position: relative; width: 100%; margin-bottom: 63px; } .login-divider .bar { top: 8px; height: 1.72px; width: 45.5%; position: absolute; background: #d3d3d3; } .login-divider .bar-left { left: 0; } .login-divider .bar-right { right: 0; } .login-or { position: absolute; width: 11%; height: 46px; right: 44.5%; text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; border-radius: 10px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: 1.4rem; font-weight: 600; line-height: 30px; color: #888888; top: -14px; } @media only screen and (max-width: 1200px) { .login-button { width: 100% !important; } } @media only screen and (max-width: 992px) { .login-divider .bar { width: 43%; } .login-or { width: 14%; right: 43%; } } @media only screen and (max-width: 768px) { .login-divider .bar { width: 46%; } .login-or { width: 8%; right: 46%; } } @media only screen and (max-width: 600px) { .login-divider .bar { width: 45%; } .login-or { width: 10%; right: 45%; } @media screen and (min-width: 0px) { .made-by { display: block; margin-left: auto; margin-right: auto; border-radius: 6px; margin-bottom: 10px; width: 90%; } } @media screen and (min-width: 768px) { .made-by { display: block; margin-left: auto; margin-right: auto; border-radius: 6px; margin-bottom: 10px; width: 60%; } }