/* FILE LOCATION: public/css/theme.css */ /* BUILD: step113-v1-signinwait */ /* The light face of the brand, following youngmaster.org: paper-white and honey-cream surfaces, gold as the one accent, near-black for type. The frame around that content - the sidebar and the top header - is its own dark "chrome" layer instead: the bee's own black, so honey reads as a bright accent against it rather than competing with it as a page background would. Chrome and content also scroll independently now (see "the fixed frame" below) - each keeps its own scrollbar. */ :root { --ink: #0E0E0E; /* type, borders, the bee's own black */ --honey: #FFC61E; /* the single accent */ --honey-deep: #C98A0E; /* honey that has to sit on white and be read */ --wax: #FFF9E8; /* the cream page */ --line: #E8E2D2; --paper: #FFFFFF; --muted: #6B665C; /* The chrome: sidebar + top header. Deliberately not honey/gold (that stays the one accent, not a background) and not the page's own white or cream, so the frame reads as a distinct layer around the content. */ --chrome: #1A1712; --chrome-line: rgba(255,255,255,.09); --chrome-text: #B9B2A2; /* inactive nav text/icons on chrome */ --chrome-text-hi: #F5F1E6; /* hovered/emphasised text on chrome */ /* ----------------------------------------------------------------- MODULE TINTS. The chrome (sidebar + top bar) stays black-and-honey; the CONTENT frame wears its module's own colour - a chip beside every panel headline, the count badge, the table-header rule, the summary-card cap. app-shell.js reads the page address and puts a pg-* class on ; pages without one keep the honey default. Each accent passes AA as text on white (checked, not eyeballed). ----------------------------------------------------------------- */ --pg: var(--honey); /* the marker colour (chips, rules, caps) */ --pg-ink: #8A6A00; /* the same idea, dark enough to READ */ --pg-soft: #FFF4D6; /* its wash, for badges and tints */ --pg-page: var(--wax); /* the page behind the panels */ } /* Mild, warm-leaning tones - dusty rather than sharp, sitting close to the honey rather than fighting it. Each still reads as text on white (all checked >= 4.5:1, not eyeballed). */ /* EVERY sidebar destination wears its own tone - sixteen mild, muted hues around the wheel, each in four depths: the marker (--pg), its readable ink, the wash cream surfaces take (--wax is redefined so hero panels, table headers, cards and hovers follow), and the page behind the panels. All sixteen pass AA (>=4.5:1) as text on white - computed, not eyeballed. The Dashboard alone stays pure honey. Grouped tabs follow their section: Exams and Announcements wear the Competitions copper; the book reader wears the Resources sage; the workshop designer wears the Workshops plum. */ body.pg-students { --pg: #4A6FA5; --pg-ink: #405F8E; --pg-soft: #DEE3E8; --wax: #EDEFEF; --pg-page: #D4DBE3; } body.pg-partners { --pg: #96536E; --pg-ink: #81475F; --pg-soft: #ECDEDE; --wax: #F4ECE9; --pg-page: #E6D4D6; } body.pg-accounts { --pg: #5B6E7F; --pg-ink: #4E5F6D; --pg-soft: #E1E3E1; --wax: #EFEFEB; --pg-page: #D8DBDA; } body.pg-competitions { --pg: #9A6410; --pg-ink: #84560E; --pg-soft: #EDE1CD; --wax: #F5EEE0; --pg-page: #E7D8C0; } body.pg-entries { --pg: #3E7482; --pg-ink: #356470; --pg-soft: #DCE4E2; --wax: #ECEFEB; --pg-page: #D1DCDB; } body.pg-packages { --pg: #A14D5D; --pg-ink: #8A4250; --pg-soft: #EEDDDB; --wax: #F6EBE8; --pg-page: #E8D3D2; } body.pg-finance { --pg: #67762C; --pg-ink: #596526; --pg-soft: #E4E5D2; --wax: #F0F0E3; --pg-page: #DBDDC6; } body.pg-bank { --pg: #47764A; --pg-ink: #3D6540; --pg-soft: #DEE5D8; --wax: #EDF0E6; --pg-page: #D3DDCD; } body.pg-resources { --pg: #4E7A6A; --pg-ink: #43695B; --pg-soft: #DFE5DE; --wax: #EDF0E9; --pg-page: #D5DED5; } body.pg-workshops { --pg: #7D639C; --pg-ink: #6C5586; --pg-soft: #E8E1E7; --wax: #F2EEEE; --pg-page: #E0D8E1; } body.pg-results { --pg: #8F6A1E; --pg-ink: #7B5B1A; --pg-soft: #EBE3D0; --wax: #F4EEE1; --pg-page: #E4DAC3; } body.pg-archive { --pg: #6E7440; --pg-ink: #5F6437; --pg-soft: #E5E4D6; --wax: #F0EFE5; --pg-page: #DCDCCB; } body.pg-calllog { --pg: #A05A3C; --pg-ink: #8A4D34; --pg-soft: #EEE0D5; --wax: #F6EDE4; --pg-page: #E8D6CA; } body.pg-profile { --pg: #8A5E8A; --pg-ink: #775177; --pg-soft: #EAE0E3; --wax: #F3EDEC; --pg-page: #E3D7DD; } body.pg-help { --pg: #5F6BAB; --pg-ink: #525C93; --pg-soft: #E2E3E9; --wax: #EFEEEF; --pg-page: #D9DAE5; } body.pg-settings { --pg: #607089; --pg-ink: #536076; --pg-soft: #E2E4E3; --wax: #EFEFEC; --pg-page: #D9DBDD; } * { box-sizing: border-box; } body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--pg-page); color: var(--ink); } /* ---- the signed-out pages: sign in, register, parent confirmation ---- */ .center-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 30px 16px; background: var(--wax); /* a faint honeycomb, drawn in CSS - texture, not decoration */ background-image: radial-gradient(circle at 50% 50%, rgba(255,198,30,.16) 0 2px, transparent 3px), radial-gradient(circle at 0 50%, rgba(255,198,30,.10) 0 2px, transparent 3px); background-size: 46px 46px, 46px 46px; background-position: 0 0, 23px 23px; } .card { background: var(--paper); padding: 40px; width: 360px; border-radius: 10px; border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(14,14,14,.07); } .card h1 { margin: 0 0 6px; font-size: 26px; font-weight: 900; letter-spacing: -0.03em; text-transform: uppercase; } .card h1 span { color: var(--honey-deep); } .card p.sub { margin: 0 0 26px; color: var(--muted); font-size: 14px; } label { display: block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; margin-bottom: 6px; } input { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; font-size: 15px; margin-bottom: 18px; font-family: inherit; background: var(--paper); } input:focus { outline: 2px solid var(--pg); border-color: transparent; } button { width: 100%; padding: 13px; background: var(--honey); border: 0; border-radius: 5px; font-weight: 800; font-size: 15px; cursor: pointer; font-family: inherit; color: var(--ink); } button:hover { background: #F0B400; } .msg { color: #B3261E; font-size: 13px; min-height: 18px; margin-bottom: 10px; } /* ---- app shell ---- A fixed frame: the sidebar and the header never scroll away, only the content between them does. .shell is pinned to the viewport height with its own overflow hidden; .sidebar gets its own scrollbar if the menu is ever taller than the screen; `main` is a column of fixed bands (the view-as banner, the header, the section tabs) plus one flexible band - .page - which is the only thing that scrolls. */ html, body { height: 100%; } .shell { display: flex; height: 100vh; overflow: hidden; } .sidebar { /* Wide enough for the doubled 44px icons to breathe. */ width: 92px; flex: 0 0 92px; background: var(--chrome); color: var(--chrome-text); padding: 18px 0; border-right: 1px solid var(--chrome-line); overflow-y: auto; } .brand { font-weight: 900; font-size: 20px; line-height: 1.05; letter-spacing: -0.03em; text-transform: uppercase; padding: 0 0 16px; border-bottom: 1px solid var(--chrome-line); } .brand span { color: var(--honey); } .sidebar nav { display: flex; flex-direction: column; padding-top: 12px; } .sidebar nav a { color: var(--chrome-text); text-decoration: none; padding: 12px 0; font-size: 14px; font-weight: 600; border-left: 3px solid transparent; display: flex; align-items: center; justify-content: center; gap: 13px; position: relative; } .sidebar nav a:hover { color: var(--chrome-text-hi); background: rgba(255,255,255,.06); } .sidebar nav a.active { color: var(--honey); border-left-color: var(--honey); background: rgba(255,198,30,.12); } /* The icon takes the link's colour, so it lightens on hover and turns honey on the open page exactly as the text does. */ .nav-ico { display: flex; align-items: center; justify-content: center; } .nav-ico svg { display: block; } .nav-label { display: none; white-space: nowrap; } /* The name as a tooltip while the rail is narrow. Ink on cream, so it stays legible against the light content behind it (the tooltip floats past the edge of the dark rail, over the page). */ .sidebar nav a::after { content: attr(data-label); position: absolute; left: calc(100% + 8px); top: 50%; transform: translate(-4px, -50%); background: var(--ink); color: #fff; padding: 6px 11px; border-radius: 5px; font-size: 13px; font-weight: 600; white-space: nowrap; opacity: 0; pointer-events: none; z-index: 60; transition: opacity .13s ease, transform .13s ease; box-shadow: 0 4px 14px rgba(14,14,14,.22); } .sidebar nav a:hover::after { opacity: 1; transform: translate(0, -50%); } /* Opened out: names beside the icons, no tooltips needed. */ .shell.nav-open .sidebar { width: 230px; flex-basis: 230px; } .shell.nav-open .sidebar nav a { justify-content: flex-start; padding-left: 19px; } .shell.nav-open .nav-label { display: inline; } .shell.nav-open .sidebar nav a::after { display: none; } main { flex: 1; min-width: 0; background: var(--pg-page); display: flex; flex-direction: column; height: 100%; overflow: hidden; } /* The header band: dark chrome, held to the page by a honey rule, with the page name in white and its icon in honey. Fixed - it never scrolls. */ .topbar { background: var(--chrome); border-bottom: 3px solid var(--honey); padding: 13px 30px; display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; } .topbar h1 { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -0.02em; color: var(--chrome-text-hi); } .topbar h1 .page-ico { display: inline-flex; align-items: center; margin-right: 12px; color: var(--honey); vertical-align: -3px; } .user { display: flex; align-items: center; gap: 12px; } .avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--honey); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 13px; color: var(--ink); border: 2px solid var(--chrome); box-shadow: 0 0 0 1px rgba(255,255,255,.14); } .who strong { display: block; font-size: 13px; color: var(--chrome-text-hi); } .who em { font-style: normal; font-size: 11px; color: var(--honey); font-weight: 700; } .user button { width: auto; padding: 8px 16px; font-size: 13px; background: var(--honey); border: none; color: var(--ink); font-weight: 700; border-radius: 5px; } .user button:hover { background: #F0B400; } /* The only band that scrolls: fills whatever height `main`'s fixed bands (view-as banner, header, section tabs) leave behind. min-height:0 is what lets a flex child actually shrink below its content size instead of pushing the whole frame taller than the viewport. */ .page { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 34px 40px 60px; position: relative; } /* ---- panels, forms, tables ---- */ .panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 24px 26px; margin-bottom: 24px; position: relative; overflow: hidden; } .panel h2 { margin: 0 0 18px; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* the module chip beside every panel headline */ .panel h2::before { content: ""; width: 5px; height: 19px; border-radius: 3px; background: var(--pg); flex: 0 0 auto; } /* ...and the panel's OPENING headline becomes a tinted band across the card, so a page's module colour is unmissable at a glance */ .panel > h2:first-child { margin: -24px -26px 20px !important; padding: 15px 26px; background: var(--pg-soft); border-bottom: 2px solid var(--pg); border-radius: 8px 8px 0 0; } .hint { margin: -10px 0 18px; color: var(--muted); font-size: 13px; max-width: 70ch; } .count { font-weight: 700; color: var(--pg-ink); font-size: 12px; background: var(--pg-soft); padding: 2px 10px; border-radius: 12px; } .form-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 18px; } @media (max-width: 1100px) { .form-grid { grid-template-columns: repeat(2, 1fr); } } select, textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 5px; font-size: 15px; margin-bottom: 18px; font-family: inherit; background: var(--paper); } .filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; } .filters input, .filters select { width: auto; min-width: 170px; margin-bottom: 0; padding: 9px 11px; font-size: 14px; } .band-row { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 0 14px; align-items: end; margin-bottom: 4px; } .band-row .remove { width: auto; background: var(--paper); border: 1px solid var(--line); padding: 11px 16px; font-size: 13px; font-weight: 600; margin-bottom: 18px; color: #B3261E; } button.ghost { width: auto; background: var(--paper); border: 1px solid var(--line); padding: 10px 18px; font-size: 14px; color: var(--ink); } button.ghost:hover { border-color: var(--pg); background: var(--wax); } table { width: 100%; border-collapse: collapse; font-size: 14px; } /* The header row was solid black; on a light page a cream band under a honey rule holds the columns together without shouting. */ th { text-align: left; background: var(--wax); color: var(--ink); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 12px; font-weight: 800; border-bottom: 2px solid var(--pg); } td { padding: 10px 12px; border-bottom: 1px solid var(--line); } tbody tr:nth-child(even) { background: #FEFCF5; } tbody tr:hover { background: var(--pg-soft); } .empty { color: #8C877C; font-size: 14px; } .pill { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; } .pill-on { background: #E9F7EC; color: #1B7F3B; } .pill-off { background: #F3F0E7; color: #6B665C; } /* ---- summary cards ---- */ .summary-cards { display: flex; flex-wrap: wrap; gap: 12px; } .s-card { background: var(--wax); border: 1px solid var(--line); border-top: 3px solid var(--pg); border-radius: 6px; padding: 14px 20px; min-width: 140px; } .s-label { font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8C877C; font-weight: 700; margin-bottom: 4px; } .s-value { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; } /* ---- brand imagery ---- */ .logo-img { display: block; width: min(300px, 85%); margin: 0 auto 20px; } .brand-card { display: block; background: var(--paper); border-radius: 6px; padding: 4px 6px; margin: 0 9px; } .shell.nav-open .brand-card { padding: 6px 10px; margin: 0 16px; } .brand-card img { display: block; width: 100%; } .hero-img { display: block; max-width: 100%; border-radius: 6px; margin: 0 auto; } /* ---- the bees ---- Corner marks, sized and faded so they read as texture. They sit behind everything and never take a click. */ .bee-corner { position: absolute; pointer-events: none; z-index: 0; opacity: .13; } .bee-corner.tr { right: -6px; top: -6px; } .bee-corner.br { right: -8px; bottom: -10px; } .panel > *:not(.bee-corner) { position: relative; z-index: 1; } /* The page's own bee, larger and fainter, in the far corner. */ .bee-page { position: fixed; right: 14px; bottom: 10px; opacity: .10; pointer-events: none; z-index: 0; } /* A bee at readable size, used inline beside a heading or a category. */ .bee-inline { display: inline-flex; vertical-align: -6px; margin-right: 8px; } /* ---- links and the sign-up call-to-action ---- */ .card a, .tick a { color: var(--honey-deep); font-weight: 700; text-decoration: none; } .page a { color: var(--pg-ink); font-weight: 700; text-decoration: none; } .card a:hover, .page a:hover, .tick a:hover { text-decoration: underline; } .aux-link { display: inline-block; margin-top: 2px; font-size: 14px; } .signup-box { background: var(--wax); border: 1px solid var(--honey); border-radius: 8px; padding: 18px 20px; margin-top: 22px; } .signup-box .head { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 800; color: #8A6A00; margin: 0 0 12px; } .signup-box .row { display: flex; gap: 10px; flex-wrap: wrap; } .signup-box .row button { flex: 1; min-width: 150px; padding: 12px 10px; font-size: 14px; } .signup-box .row button.ghost { background: var(--paper); } /* ---- the icon rail ---- */ .sidebar { transition: width 0.18s ease, flex-basis 0.18s ease; } .navtoggle { width: 40px; height: 38px; padding: 0; font-size: 19px; line-height: 1; background: var(--wax); color: var(--honey-deep); border: 1px solid var(--line); border-radius: 5px; margin-right: 14px; flex: 0 0 auto; } .navtoggle:hover { background: var(--honey); color: var(--ink); } .topbar h1 { flex: 1; } .topbar h1 .page-ico svg { display: block; } /* ---- the system's own dialogs ---- alert() and confirm() were drawn by Chrome in Chrome's clothes; these replace them, drawn by the page in the platform's own: paper card, honey rule, ink text. Buttons close them - never a stray click. */ .ym-overlay { position: fixed; inset: 0; background: rgba(14, 14, 14, .55); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 20px; animation: ymFade .15s ease; } @keyframes ymFade { from { opacity: 0; } to { opacity: 1; } } .ym-dialog { background: var(--paper); border-radius: 10px; max-width: 480px; width: 100%; padding: 24px 28px 22px; border-top: 4px solid var(--honey); box-shadow: 0 18px 50px rgba(14, 14, 14, .35); animation: ymPop .16s ease; } @keyframes ymPop { from { transform: translateY(10px) scale(.98); opacity: .6; } to { transform: none; opacity: 1; } } .ym-dialog .ym-title { font-weight: 900; font-size: 17px; letter-spacing: -.01em; margin: 0 0 10px; } .ym-dialog .ym-msg { font-size: 14.5px; line-height: 1.65; white-space: pre-line; margin: 0 0 20px; color: var(--ink); max-height: 55vh; overflow-y: auto; } .ym-dialog .ym-btns { display: flex; gap: 10px; justify-content: flex-end; } .ym-dialog .ym-btns button { width: auto; padding: 10px 22px; font-size: 14px; } .ym-dialog .ym-danger { background: #B3261E; color: #fff; } .ym-dialog .ym-danger:hover { background: #921E18; } /* ------------------------------------------------------------------- Wide tables scroll SIDEWAYS inside their own panel. The fixed-frame layout clips the page's right edge, and the doubled sidebar narrowed the content area - without this, the last action button on a wide row (Accounts' "View as" was the first casualty) slid out of view with only a distant scrollbar to hint at it. ------------------------------------------------------------------- */ #tableWrap { overflow-x: auto; } #tableWrap table { min-width: 100%; } /* ------------------------------------------------------------------- reCAPTCHA attribution. Google allows the floating badge to be hidden ONLY if the page says, in words a person can see, that reCAPTCHA is in use and links to its two policies. That is the whole deal, and this is our half of it. The badge itself was a 70px box pinned over the bottom-right corner of every page - including a child's exam paper for ninety minutes, and the certificate page, which people print. This is one line of small grey text in the same corner instead. pointer-events is off on the line and back on for the two links, so it can never swallow a click meant for the page underneath. And it is removed for printing, so it cannot land on a certificate. The line is injected by firebase-init.js, and ONLY when App Check actually started - no key, no reCAPTCHA, nothing to attribute. ------------------------------------------------------------------- */ .grecaptcha-badge { visibility: hidden !important; } #ymRecaptchaNote { position: fixed; right: 12px; bottom: 10px; z-index: 90; max-width: 280px; margin: 0; text-align: right; font-size: 11px; line-height: 1.45; color: var(--muted); opacity: .85; pointer-events: none; } #ymRecaptchaNote a { color: inherit; text-decoration: underline; pointer-events: auto; } #ymRecaptchaNote a:hover { color: var(--ink); } @media (max-width: 700px) { #ymRecaptchaNote { max-width: 200px; font-size: 10px; right: 8px; bottom: 6px; } } /* Never on paper. */ @media print { #ymRecaptchaNote { display: none !important; } } /* ------------------------------------------------------------------- A disabled button must LOOK disabled. There was no rule for this anywhere, so a button that had been switched off still wore full honey and still lit up on hover - it looked entirely pressable and simply did nothing. That is at its worst in the two places where a disabled button is the whole point: the sign-in wait after repeated wrong passwords, and "Start the exam in 1:00" on the instruction page, which a child stares at. Nothing here changes which buttons are disabled - only how an already-disabled one reads. ------------------------------------------------------------------- */ button:disabled, button[disabled] { opacity: .5; filter: grayscale(.5); cursor: not-allowed; } button:disabled:hover, button[disabled]:hover { background: var(--honey); /* no lift - it is not going to move */ } button.ghost:disabled:hover, button.ghost[disabled]:hover { background: transparent; border-color: var(--line); }