:root { /* Page background colour applied to the . */ --bg: #f4f6fb; /* Background colour used for panel containers (cards). */ --card: #ffffff; /* Default text colour applied to the and inherited by most elements. */ --text: #1f2937; /* Secondary text colour used for less prominent text (e.g. descriptions). */ --muted: #6b7280; /* Accent colour used for interactive elements such as buttons. */ --primary: #2563eb; /* Border colour used for panels, inputs, and UI separators. */ --border: #d1d5db; } * { /* Include padding and borders within element width/height calculations. */ box-sizing: border-box; } body { /* Remove browser default outer spacing. */ margin: 0; /* Set base font family for the entire page. */ font-family: Arial, sans-serif; /* Apply page background colour. */ background: var(--bg); /* Apply base text colour. */ color: var(--text); } /* Constrain content width and centre it horizontally. */ .page { max-width: 900px; margin: 0 auto; padding: 20px 16px 30px; } /* Apply panel styling (background, border, spacing, rounded corners). */ .card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; padding: 18px; margin-bottom: 18px; } /* Completely hide elements from layout and rendering. */ .hidden { display: none; } /* Style individual review input containers. */ .review-box { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 14px; background: white; } /* Place label text above associated input elements. */ label { display: block; margin-bottom: 12px; font-weight: 600; } /* Apply consistent styling to all input, select, and textarea elements. */ input, select, textarea { width: 100%; padding: 10px; margin-top: 6px; border: 1px solid var(--border); border-radius: 10px; font: inherit; background: white; } /* Set minimum height and restrict resizing to vertical direction only. */ textarea { min-height: 90px; resize: vertical; } /* Apply consistent visual styling to all buttons. */ button { padding: 10px 16px; border: 0; border-radius: 8px; background: var(--primary); color: white; cursor: pointer; font: inherit; font-weight: 600; } /* Arrange grouped buttons in a horizontal row with spacing. */ .buttonRow { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } /* Centre-align main page heading. */ h1 { text-align: center; margin-bottom: 6px; } /* Style subtitle text displayed below main heading. */ #subtitle { margin-top: 0; margin-bottom: 22px; text-align: center; color: var(--text); } /* Vertically and horizontally centre content inside result panel container. */ .resultPanelInner { min-height: 190px; display: flex; flex-direction: column; justify-content: center; align-items: center; } /* Define size and weight of main numeric result. */ .bigResult { font-size: 48px; font-weight: 700; line-height: 1.05; } /* Define spacing and appearance of result category text. */ .smallResult { color: var(--text); margin-top: 16px; text-align: center; font-size: 18px; font-weight: 600; } /* Define size and weight of "no score" main message. */ .noScoreText { font-size: 34px; font-weight: 700; line-height: 1.05; } /* Define spacing and appearance of "no score" sub-message. */ .noScoreSubText { color: var(--text); margin-top: 10px; text-align: center; font-size: 16px; font-weight: 600; } /* Standardise spacing for headings inside UC8 panels. */ #analysisPanel h3, #explanationPanel h3, #explanationPanel h4 { margin-top: 0; margin-bottom: 14px; } /* Style container for each analysis result or exclusion message. */ .analysisItem { border: 1px solid var(--border); border-radius: 14px; padding: 14px; margin-bottom: 12px; background: white; } /* Align analysis name (left) and value (right) horizontally. */ .analysisTopRow { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } /* Style text for analysis name label. */ .analysisName { font-weight: 700; font-size: 18px; } /* Style numeric ratio displayed for analysis. */ .analysisValue { font-weight: 700; font-size: 18px; } /* Style descriptive text below each analysis item. */ .analysisSubText { margin-top: 8px; color: var(--muted); line-height: 1.35; font-size: 15px; } /* Style rows explaining the meaning of each ratio. */ .meaningRow { border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; margin-bottom: 8px; background: white; display: flex; justify-content: space-between; gap: 12px; align-items: center; } /* Style left-hand text (ratio name) in meaning row. */ .meaningLeft { color: var(--muted); font-size: 14px; } /* Style right-hand text (ratio explanation) in meaning row. */ .meaningRight { text-align: right; font-size: 14px; } /* Add vertical spacing above calculation section. */ #calculationSection { margin-top: 18px; } /* Style each line of calculation explanation text. */ #calculationText p { margin: 6px 0; line-height: 1.45; white-space: pre-wrap; } /* Apply alternative layout and sizing when viewport width is at least 768px. */ @media (min-width: 768px) { /* Display paired inputs in two equal-width columns instead of stacking. */ .twoCols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } /* Increase page padding for wider layouts. */ .page { padding: 28px 24px 36px; } /* Increase size of main result number. */ .bigResult { font-size: 60px; } /* Increase size of result category text. */ .smallResult { font-size: 20px; } /* Increase size of no-score main message. */ .noScoreText { font-size: 54px; } /* Increase size of no-score sub-message. */ .noScoreSubText { font-size: 18px; } }