:root { --link-color: #0a58ca; } a, button.tiny-link-button, button.link-button { color: var(--link-color) } @font-face { font-family: BeckyTahlia; src: url('BeckyTahlia-MP6r.ttf'); font-display: swap; } /* --- Russian (Gothic Cyrillic and Latin) --- */ @font-face { font-family: "Gothic-Latin-And-Cyrillic"; src: url("Gothic_ru.ttf"); font-display: swap; } @font-face { font-family: "Content-Header-Russian"; src: url("Nexa-Script_ru.ttf"); font-display: swap; } @font-face { font-family: "Gothic-Japanese"; src: url("Bakudai-Medium_ja.woff2") format("woff2"); font-display: swap; } @font-face { font-family: "Gothic-Arabic-Urdu"; src: url("NotoKufiArabic-VariableFont_wght_ar_ur.ttf"); font-display: swap; } @font-face { font-family: "Gothic-Chinese"; src: url("MaShanZheng-Regular_zh.ttf"); font-display: swap; } @font-face { font-family: "Gothic-Hindi"; src: url("Amita-Bold_hi.ttf"); font-display: swap; } @font-face { font-family: "Gothic-Bengali"; src: url("TiroBangla-Regular_bn.ttf"); font-display: swap; } /* --- Language Specific Overrides --- */ /* If you use the approach we discussed earlier */ /*html[lang="ru"] {*/ /* --beautiful-font: "Gothic-Latin-And-Cyrillic", serif;*/ /*}*/ /* --- Base Mapping --- */ :root { --beautiful-font: "Gothic-Latin-And-Cyrillic", serif; --readable-font: Arial, sans-serif; --active-font: var(--beautiful-font) } .content-title { font-family: BeckyTahlia, serif; } html[lang="ru"] .content-title { font-family: Content-Header-Russian, serif; } /* Override for Japanese */ html[lang="ja"] { /* Use Seagram for English letters, Bakudai for Japanese */ --beautiful-font: "Gothic-Latin-And-Cyrillic", "Gothic-Japanese", serif; /*font-weight: 1;*/ font-size-adjust: 0.7; letter-spacing: 0.05em; /* Chinese characters often need a tiny bit of breathing room */ line-height: 1.7; /* Complex characters need more vertical space than Latin */ } html[lang="ja"] #content-header { letter-spacing: 0.1em; } html[lang="ja"] #content-header .language-selection { letter-spacing: 0.1em; padding-right: 0; } html[lang="zh"] { --beautiful-font: "Gothic-Latin-And-Cyrillic", "Gothic-Chinese", serif; /*font-weight: 400;*/ font-size-adjust: 0.6; letter-spacing: 0.06em; /* Chinese characters often need a tiny bit of breathing room */ line-height: 1.8; /* Complex characters need more vertical space than Latin */ } html[lang="hi"] { --beautiful-font: "Gothic-Latin-And-Cyrillic", "Gothic-Hindi", serif; } html[lang="ar"], html[lang="ar"] body, html[lang="ur"], html[lang="ur"] body { --beautiful-font: "Gothic-Latin-And-Cyrillic", "Gothic-Arabic-Urdu", serif; text-align: right; direction: rtl; } html[lang="bn"] { --beautiful-font: "Gothic-Latin-And-Cyrillic", "Gothic-Bengali", serif; font-size-adjust: 0.6; letter-spacing: 0.02em; } body { font-family: var(--active-font), serif !important; } /* Apply variables to your elements */ .shapeshifting-font { transition: opacity 0.4s ease; } /*@font-face {*/ /* font-family: Faith Collapsing;*/ /* src: url('Faith Collapsing.ttf');*/ /*}*/ .paragraph { margin-bottom: 1rem; } div.text-content { padding: 3rem 3rem 3rem 3rem; font-size: larger; background-color: #ba8e0d33; box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3); background-clip: padding-box; } div.text-content h1, div.text-content .scriptorium-fabula-title { line-height: 3rem; } .base-layout-footer { text-align: center; } #content-header { position: sticky; top: 0; background-color: white; z-index: 1; /*border-bottom-style: solid;*/ /*border-bottom-color: rgba(0, 0, 0, 0.29);*/ /*border-width: 0 0 0.4rem 0;*/ box-shadow: 0 0.4rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3); background-clip: padding-box; } #content-header .btn { font-size: 1.5rem; } #content-header ul { font-size: 1.4rem; } #content-header .dropdown { justify-self: center; } #content-header .dropdown ul { /*border-width: 0 0 0.4rem 0.4rem;*/ box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3); } .dropdown-menu { max-height: 80dvh; /* Limits height to 80% of the screen height */ overflow-y: auto; /* Adds a vertical scrollbar if content exceeds max-height */ -webkit-overflow-scrolling: touch; /* Ensures smooth scrolling on iOS */ } button.tiny-link-button { background: none; border: none; color: black; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; margin: 0px 0px 0px 10px; font-size: 0.9rem; transition: color 0.3s ease; } button.link-button { background: none; border: none; text-decoration: underline; cursor: pointer; font: inherit; padding: 0; margin: 0; transition: color 0.3s ease; } .invisible-font button.link-button { color: transparent; } /* Hover and Focus States */ button.link-button:hover { color: #00008B; /* Darker blue on hover */ } button.link-button:focus, button.tiny-link-button:focus { outline: 1px dotted #0000EE; /* Accessibility: shows when tabbed to */ } .scriptorium-fabula-heading { padding-bottom: 5px; } .scriptorium-fabula-title { font-size: 2rem; font-weight: bold; } /*The actual picture of divider is being set inside of resources/static/js/utils.js -> initGothicDivider() after page is loaded.*/ .gothic-divider { background: repeat center; background-size: contain; height: 1.5rem; transition: background-color 0.8s ease; } .news-divider { max-width: 60%; margin: 4rem 20%; } /* Because we changed to inline-flex, we must ensure the parent centers it */ nav[aria-label="news pagination"] { text-align: center; } ul.pagination.justify-content-center { /* Shrink-wrap the container to the buttons */ display: inline-flex; /* Apply your shadow */ box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3); /* Ensure it stays rounded if you have border-radius */ border-radius: 0.375rem; } /* RTL Shadow Flip */ html[lang="ar"] ul.pagination.justify-content-center, html[lang="ur"] ul.pagination.justify-content-center { /* Change -0.7rem to 0.7rem to push it to the right instead */ box-shadow: 0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3); /* FIX: Remove default browser padding that causes the gap */ padding: 0; margin-top: 1rem; margin-bottom: 1rem; } html[lang="ar"] .page-item:first-child .page-link, html[lang="ur"] .page-item:first-child .page-link { border-top-right-radius: 0.375rem; border-bottom-right-radius: 0.375rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } html[lang="ar"] .page-item:last-child .page-link, html[lang="ur"] .page-item:last-child .page-link { border-top-left-radius: 0.375rem; border-bottom-left-radius: 0.375rem; border-top-right-radius: 0; border-bottom-right-radius: 0; } .shadowy-button { /* Apply your shadow */ box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3); /* Ensure it stays rounded if you have border-radius */ border-radius: 0.375rem; } ul.pagination a.page-link { text-align: center; } #debug-info > div { width: 50%; } @keyframes navigationButtonAnimation { 0% { color: white; } 25% { color: blue; } 75% { color: cyan; } 100% { color: white; } } .shapeshifting-font { transition: color 0.4s ease; --linkColor: blue; } .shapeshifting-font a { transition: color 0.4s ease; --linkColor: blue; } .invisible-font { color: transparent; } .invisible-font a { color: transparent; } .invisible-font button.tiny-link-button { color: transparent; } .invisible-font .active > .page-link { color: transparent; } img.big-picture { width: 95%; padding: 1.5rem; display: block; margin: 0 auto; } img.medium-picture { width: 50%; padding: 1.5rem; display: block; margin: 0 auto; } img.medium-small-picture { width: 30%; padding: 1.5rem; display: block; margin: 0 auto; } div.content-title h1 { line-height: 1.85rem; margin-top: 0.5rem; margin-bottom: 0.1rem; text-shadow: -0.5rem 0.5rem 0.4rem rgba(0, 0, 0, 0.4); } table, table th, table td { border: 1px solid black; } .break-long-lines { overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; } .div-grid-header { font-weight: bold; } .bordered-div-grid { margin-top: 1rem; } .bordered-div-grid > div.row > div.col { border: 1px solid; } .overflow-wrap-anywhere { overflow-wrap: anywhere; } .overflow-wrap-break-word { overflow-wrap: break-word; } #visitation-statistics-grid > div.row > div.col:nth-child(1) { text-align: right; } #games-created-during-last-seven-days { text-align: center; } .centered { display: flex; align-items: center; justify-content: center; } #statistics-table { padding-top: 0.5rem; } .tooltip-inner { box-shadow: -0.7rem 0.7rem 0.8rem -0.2rem rgba(0, 0, 0, 0.3); background-clip: padding-box; opacity: 1 !important; font-family: var(--active-font), serif; } /* Optional: To make it look perfect, add a shadow to the arrow as well */ .tooltip-arrow::before { /* We use filter: drop-shadow because box-shadow doesn't work on triangles */ filter: drop-shadow(-0.2rem 0.2rem 0.2rem rgba(0, 0, 0, 0.3)); } .base-layout-footer { margin-top: 0.5rem; } nav .pagination { margin-top: 1rem; } /*.message-me {*/ /* text-align: center;*/ /*}*/ /** Below goes configuration for phone viewport with vertical orientation. */ @media (max-aspect-ratio: 0.7) and (any-hover: none) , (max-aspect-ratio: 0.7) and (pointer: none) , (max-aspect-ratio: 0.7) and (pointer: coarse ) { div.text-content { font-size: 3.5rem; } button.tiny-link-button { font-size: 2.5rem; } /*This rule is for title in the header of each page and also header is sticky. SO it should be smaller then regular h1 inside of the text to keep header or else it will constantly take big amount of screen.*/ div.content-title h1 { font-size: 2.9rem; line-height: 3rem; } /*This rule if sor titles inside of the text area of the page.*/ .scriptorium-fabula-title, div.text-content h1 { font-size: 4rem; margin-bottom: 1rem; } div.text-content h2 { font-size: 3.8rem; } div.text-content h3 { font-size: 3.6rem; } #content-header .btn { font-size: 2rem; height: 9rem; margin: 1rem 1rem 1rem 1rem; } #content-header ul { font-size: 3rem; } .base-layout-footer { font-size: 1.6rem; } ul.pagination a.page-link { font-size: 3rem; width: 6rem; } .gothic-divider { height: 2rem; } img.big-picture { width: 98%; } img.medium-picture { width: 98%; } img.medium-small-picture { width: 98%; } img.too-tall-for-small-screen-picture { width: 90%; } #visitation-statistics-grid > div.row > div.col:nth-child(2) { display: flex; align-items: center; justify-content: center; } #visitation-statistics-grid > div.row { line-height: 6rem; } .modal-dialog { max-width: 95% !important; } .modal-body { padding-top: 0.5rem !important; } h1.modal-title { margin-bottom: 0 !important; font-size: 3.9rem !important; } div.text-content h1, div.text-content .scriptorium-fabula-title { line-height: 5.3rem; } div.text-content { line-height: 4.9rem; } /* Target the inner bubble text */ .tooltip-inner { font-size: 2.5rem !important; padding: 15px 25px !important; /* Larger padding for the larger text */ max-width: none !important; /* Allows the tooltip to expand to fit the big text */ } /* Optional: Scale the arrow to match the huge bubble */ .tooltip-arrow { transform: scale(2); margin-bottom: 5px !important; /* Adjust spacing so arrow doesn't overlap text */ } html[lang="ja"] #content-header .language-selection { width: 20%; } } /** Below goes configuration for phone viewport with horizontal orientation. */ @media (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (any-hover: none) , (min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: coarse) ,(min-aspect-ratio: 1.45) and (max-aspect-ratio: 3) and (pointer: none) { div.text-content { font-size: 1.7rem; } .scriptorium-fabula-title, div.text-content h1 { margin-bottom: 1rem; } button.tiny-link-button { font-size: 1.4rem; } #content-header .btn { font-size: 1.8rem; } #content-header ul { font-size: 1.5rem; } ul.pagination a.page-link { font-size: 2.2rem; width: 4.5rem; } img.big-picture { width: 98%; } img.medium-picture { width: 98%; } img.medium-small-picture { width: 98%; } img.too-tall-for-small-screen-picture { width: 60%; } #visitation-statistics-grid > div.row > div.col:nth-child(2) { display: flex; align-items: center; justify-content: center; } #visitation-statistics-grid > div.row { line-height: 3.2rem; } .modal-dialog { max-width: 95% !important; } .modal-body { padding-top: 0.3rem !important; } h1.modal-title { margin-bottom: 0 !important; font-size: 2.1rem !important; } div.modal-header { padding-bottom: 0; } /* Target the inner bubble text */ .tooltip-inner { font-size: 2.5rem !important; padding: 15px 25px !important; /* Larger padding for the larger text */ max-width: none !important; /* Allows the tooltip to expand to fit the big text */ } /* Optional: Scale the arrow to match the huge bubble */ .tooltip-arrow { transform: scale(2); margin-bottom: 5px !important; /* Adjust spacing so arrow doesn't overlap text */ } html[lang="ja"] #content-header .language-selection { width: 20%; } }