/* Variant D: Light & Elegant */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap'); /* --- General Styles --- */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; width: 100%; height: 100%; } body { font-family: "Diatype Mono Variable"; background-color: #f9f9f9; color: #000000; text-align: center; padding: 0px; font-weight: 400; font-style: normal; font-variation-settings: 'slnt' 0, 'MONO' 1; } /* --- Media Box --- */ .media-box { max-width: 1400px; margin: 0 auto; background: #ffffff; padding: 20px; border-radius: 0; box-shadow: 0 0px 0px rgba(0, 0, 0, 0.1); } /* --- Title Bar --- */ .title-bar { background-color: #f0f0f0; padding: 5px; margin-bottom: 10px; box-shadow: 0 0px 0px rgba(0,0,0,0.2); } .title-link { text-decoration: none; color: #393939; font-family: "Social Variable";;; font-size: clamp(4rem, 5vw, 3.5rem); font-style: normal; font-weight: 700; font-variation-settings: 'wdth' 100, 'slnt' 0; font } /* --- Keywords Bar Styling Only --- */ .keywords-bar { display: flex; justify-content: center; } .keywords-bar ul { list-style: none; padding: 0; margin: 0 auto; text-align: center; max-width: 1200px; } .keywords-bar ul li { margin-bottom: 1.5rem; line-height: 1.6; } /* Links invisible until hover */ .keywords-bar a { color: inherit; text-decoration: none; transition: color 0.2s; } /* WORD (first in second
) */ .keywords-bar ul li:nth-of-type(2) b:nth-of-type(1) a:hover { color: #4cc4a1; } /* WEEK (second in second
) */ .keywords-bar ul li:nth-of-type(2) b:nth-of-type(2) a:hover { color: #a96c8b; } /* SPREADSHEET (first in third
) */ .keywords-bar ul li:nth-of-type(3) b:nth-of-type(1) a:hover, /* MORE INFO (second in third
) */ .keywords-bar ul li:nth-of-type(3) b:nth-of-type(2) a:hover { color: #557da9; } /* --- Numbers Section --- */ .numbers-section { position: relative; width: 100%; } /* --- Popup Bar --- */ .popup-bar { background-color: #444; box-shadow: 0 4px 5px rgba(0,0,0,0.2); border-top: 10px solid transparent; border-bottom: 10px solid transparent; height: 40px; line-height: 40px; margin: 10px 0; } /* Centered popup on hover */ .hover-trigger:hover::before { content: attr(data-title); position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: transparent; color: #fff; padding: 5px 10px; font-size: clamp(1.8rem, 3vw, 3rem); z-index: 9999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 95%; pointer-events: none; } /* --- Numbers Bar --- */ .numbers-bar { background-color: #fff; padding: 30px 0; max-width: 95%; margin: 0 auto; max-height: 42vh; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable both-edges; padding-inline-end: 20px; } .numbers-bar ul { list-style: none; padding: 0; margin: 0 auto; display: grid; grid-auto-flow: row; grid-template-columns: repeat(14, auto); gap: 50px 5px; /* 50px between rows, 5px between columns */ } .numbers-bar li { margin: 5px; text-align: center; } .numbers-bar li a { text-decoration: none; background-color: #444; color: #fff; padding: 10px 15px; border-radius: 20px; font-size: clamp(2rem, 4vw, 2.4rem); box-shadow: 0 4px 10px rgba(0,0,0,0.2); transition: background-color 0.3s, transform 0.2s; cursor: pointer; } .numbers-bar li a:hover { background-color: #7e3c3c; transform: translateY(-2px); } /* --- Responsive Adjustments --- */ @media screen and (max-width: 1150px) { .media-box { padding: 15px; } .keywords-bar ul, .numbers-bar ul { gap: 10px; grid-template-columns: repeat(8, auto); } .numbers-bar { max-height: 30vh; } .numbers-bar li a { padding: 6px 10px; font-size: clamp(1.5rem, 3vw, 1.8rem); } } @media screen and (max-width: 768px) { .numbers-bar ul { grid-template-columns: repeat(4, auto); } .numbers-bar { max-height: 20vh; } .numbers-bar li a { font-size: clamp(1.2rem, 5vw, 1.6rem); } }