@import url('https://fonts.googleapis.com/css2?family=Playwrite+HU:wght@100..400&family=Roboto:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap'); @import url('https://cdn-uicons.flaticon.com/3.0.0/uicons-regular-rounded/css/uicons-regular-rounded.css'); /* Shared stylesheet for the four subject pages (0580 / 0610 / 0620 / 0625). Each page sets its theme via an inline style on : (the *-colour variables live in includes/master.css) */ body { font-family: "Roboto"; margin: 0; } /* Title bar: heading + (0580 only) Extended/Core toggle + syllabus button */ .title { display: flex; justify-content: center; align-items: center; background-color: var(--subject-colour); gap: 3rem; row-gap: 0.5rem; flex-wrap: wrap; text-align: center; padding: 0.5rem; margin: 0; width: 100%; box-sizing: border-box; } .title a { text-decoration: none; color: black; border: 2px solid black; border-radius: 20px; padding: 8px 14px; display: inline-flex; align-items: center; justify-content: center; animation: leftFadeIn 0.4s; } .title a:hover { background-color: black; color: white; } /* Icon-only syllabus button on very narrow screens */ .title a .syllabus-icon { display: none; } /* Extended/Core segmented pill toggle (0580 only) */ .seg-toggle { position: relative; display: inline-flex; background-color: white; border: 2px solid black; border-radius: 20px; animation: rightFadeIn 0.4s; } /* Desktop: place the toggle to the left of the heading (mobile keeps DOM order so .tier-break can drop it onto its own line — see below). */ @media (min-width: 769px) { .title .seg-toggle { order: -1; } } .seg-toggle input[type=radio] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(1px, 1px, 1px, 1px) !important; border: 0 !important; clip-path: inset(50%) !important; white-space: nowrap !important; } .seg-toggle label { position: relative; z-index: 1; width: 100px; padding: 8px 0; text-align: center; color: black; cursor: pointer; box-sizing: border-box; white-space: nowrap; transition: font-weight 0.2s; } .seg-toggle input:checked + label { font-weight: 700; } .seg-toggle input:focus-visible + label { text-decoration: underline; } .seg-thumb { position: absolute; top: 2px; left: 2px; width: calc(50% - 2px); height: calc(100% - 4px); background-color: var(--subject-colour); /* selected segment = subject red */ border-radius: 16px; transition: transform 0.25s ease; } #tier-core:checked ~ .seg-thumb { transform: translateX(100%); } /* Zero-height line-break: forces the toggle onto its own row on mobile (see .tier-break media rule) without stretching the pill itself. */ .tier-break { display: none; } /* On mobile the toggle drops onto its own centred line so the syllabus button can sit next to the heading (matching the science pages). */ @media (max-width: 768px) { .tier-break { display: block; flex-basis: 100%; height: 0; } .title { row-gap: 0.25rem; padding-bottom: 0.9rem; } .title .seg-toggle { margin: 0 auto; } .seg-toggle label { width: 84px; padding: 7px 0; font-size: 0.9rem; } } @media (max-width: 440px) { .title { column-gap: 1rem; } .title a .syllabus-text { display: none; } .title a .syllabus-icon { display: block; } .seg-toggle label { width: 78px; font-size: 0.85rem; } } /* 0580 only: on mobile the Extended/Core toggle is scrapped entirely — all four papers (P1-P4) are shown as separate tables instead, matching the four mobile scroll buttons. */ @media (max-width: 800px) { .tier-break, .title .seg-toggle { display: none; } } /* Find form */ input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } @media (max-width: 850px) { .input-row { flex-direction: column; } .two { gap: 4rem; } } .form-container { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 1rem; box-sizing: border-box; width: 700px; } .two { display: flex; gap: 3.5rem; } .input-row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 20px; max-width: 670px; /* maximum width for neat layout */ } .input-row label { display: flex; flex-direction: column; align-items: center; } .input-row input { margin-top: 0.25rem; padding: 0.5rem; min-width: 40px; } .input-row select { margin-top: 0.25rem; padding: 0.5rem; min-width: 180px; color: black; } #findBtn { font-family: "Roboto", sans-serif; margin-top: 1rem; padding: 0.5rem; width: 100%; box-sizing: border-box; font-size: 1rem; background: white; border: 2px solid var(--subject-colour); color: var(--subject-colour); font-weight: 700; cursor: pointer; transition: background 0.3s ease; border-radius: 10px; } #findBtn:hover { background: var(--subject-colour); color: white; } @media (max-width: 850px) { #findBtn { width: 75%; } } /* Fade animations */ .fade-in { opacity: 0; animation: fadeInAnim 0.8s forwards; } @keyframes fadeInAnim { to { opacity: 1; } } @keyframes leftFadeIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0%); opacity: 1; } } @keyframes rightFadeIn { from { transform: translateX(-100%); opacity: 0; } to { transform: translateX(0%); opacity: 1; } } /* Table design */ .tables-container { display: flex; justify-content: center; gap: 60px; /* space between tables */ flex-wrap: wrap; margin-top: 20px; } .table-group { display: flex; flex-direction: column; align-items: center; opacity: 0; animation: fadeIn 0.8s ease forwards; } .table-heading-paper-type { text-align: center; margin-bottom: 10px; font-size: 1.2rem; font-weight: bold; } table { border-collapse: collapse; min-width: 300px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); } table td, table th { border: 1px solid #000; padding: 10px 15px; /* spacious */ text-align: center; vertical-align: middle; } .year_in_table { writing-mode: vertical-lr; text-align: center; font-weight: bold; white-space: nowrap; } a button { background-color: #000; color: #fff; border: none; border-radius: 4px; padding: 5px 10px; margin: 2px; cursor: pointer; transition: background-color 0.3s ease; } a button:hover { background-color: #444; } @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .tables-container .table-group:nth-child(1) { animation-delay: 0.2s; } .tables-container .table-group:nth-child(2) { animation-delay: 0.4s; } .tables-container .table-group:nth-child(3) { animation-delay: 0.6s; } .tables-container .table-group:nth-child(4) { animation-delay: 0.8s; } @media (max-width: 800px) { .tables-container { flex-direction: column; align-items: center; } table { width: 90%; } } /* Left-edge scroll buttons (mobile only) */ .mobile-buttons { position: fixed; top: 50%; left: 0; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; padding: 5px; } .mobile-buttons button { background-color: #000; color: #fff; border: none; padding: 5px 10px; font-size: 14px; border-radius: 4px; cursor: pointer; } @media (min-width: 800px) { .mobile-buttons { display: none; } } footer { margin-top: 4rem; }