/* ════════════════════════════════════════════════════════════════ NAATI CCL Mock Test — style.css VIBGYOR Edu Hub · vibgyor.archaiesth.uk ALL rules scoped to #naati-app to prevent WordPress theme conflicts. Google Fonts (Exo + Barlow) loaded in index.html . ════════════════════════════════════════════════════════════════ */ /* ── Font import (also declared here as fallback) ───────────── */ @import url('https://fonts.googleapis.com/css2?family=Exo:wght@500;600;700;800&family=Barlow:wght@400;500;600;700&display=swap'); /* ── Tokens ─────────────────────────────────────────────────── */ #naati-app { --or: #FF782D; --or-dk: #e8621a; --or-lt: #fff0e8; --pu: #442E66; --pu-lt: #f0ecf7; --white: #ffffff; --bg: #f7f7fa; --card: #ffffff; --bdr: #eaeaea; --bdr-md: #d4d4d4; --t-dark: #222222; --t-body: #555555; --t-muted: #888888; --t-light: #bbbbbb; --green: #28a745; --green-bg: #d4edda; --yellow: #e6a817; --yellow-bg: #fff3cd; --red: #dc3545; --red-bg: #f8d7da; --r-lg: 16px; --r-md: 10px; --r-sm: 8px; --r-pill: 60px; --sh: 0 2px 12px rgba(0,0,0,.08); --sh-md: 0 4px 24px rgba(0,0,0,.13); --ease: cubic-bezier(.4,0,.2,1); --dur: 160ms; --fh: 'Exo', sans-serif; --fb: 'Barlow', sans-serif; --max: 960px; } /* ── Hard reset inside our scope ────────────────────────────── */ #naati-app *, #naati-app *::before, #naati-app *::after { box-sizing: border-box !important; margin: 0; padding: 0; } /* ── Root container ─────────────────────────────────────────── */ #naati-app { font-family: var(--fb) !important; font-size: 15px; line-height: 1.6; color: var(--t-body); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width: 100%; overflow-x: hidden; } /* ── Utility ────────────────────────────────────────────────── */ #naati-app .na-hidden { display: none !important; } #naati-app .na-wrap { max-width: var(--max); margin: 0 auto; padding-left: 20px; padding-right: 20px; width: 100%; } /* ── Spinner ────────────────────────────────────────────────── */ #naati-app .na-spinner { display: inline-block; width: 20px; height: 20px; border: 2.5px solid var(--bdr-md); border-top-color: var(--or); border-radius: 50%; animation: naati-spin .7s linear infinite; flex-shrink: 0; } @keyframes naati-spin { to { transform: rotate(360deg); } } /* ════════════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════════════ */ #naati-app .na-header { background: var(--white); border-bottom: 1px solid var(--bdr); box-shadow: 0 1px 6px rgba(0,0,0,.06); position: sticky; top: 0; z-index: 200; width: 100%; } #naati-app .na-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 13px; padding-bottom: 13px; } #naati-app .na-brand { display: flex; align-items: center; gap: 10px; } #naati-app .na-brand-badge { background: linear-gradient(135deg, var(--or), #ff9a60); color: #fff; font-family: var(--fh) !important; font-size: 11px; font-weight: 800; letter-spacing: 2px; padding: 4px 10px; border-radius: 6px; white-space: nowrap; } #naati-app .na-brand-text { font-family: var(--fh) !important; font-size: 15px; font-weight: 700; color: var(--t-dark); } #naati-app .na-api-pill { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; color: var(--t-muted); background: var(--bg); border: 1px solid var(--bdr); border-radius: 20px; padding: 4px 11px; white-space: nowrap; } #naati-app .na-api-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bdr-md); flex-shrink: 0; transition: background var(--dur), box-shadow var(--dur); } #naati-app .na-api-dot.ok { background: var(--green); box-shadow: 0 0 6px rgba(40,167,69,.5); } #naati-app .na-api-dot.mock { background: var(--yellow); box-shadow: 0 0 6px rgba(230,168,23,.5); } #naati-app .na-api-dot.error { background: var(--red); box-shadow: 0 0 6px rgba(220,53,69,.4); } /* ════════════════════════════════════════════════════════════ HERO ════════════════════════════════════════════════════════════ */ #naati-app .na-hero { background: var(--white); padding: 28px 0 22px; border-bottom: 1px solid var(--bdr); } #naati-app .na-hero-title { font-family: var(--fh) !important; font-size: clamp(20px, 4vw, 28px); font-weight: 800; color: var(--t-dark); line-height: 1.25; margin-bottom: 6px; } #naati-app .na-hero-sub { font-size: 13px; color: var(--t-muted); max-width: 580px; line-height: 1.5; } /* ════════════════════════════════════════════════════════════ BODY LAYOUT ════════════════════════════════════════════════════════════ */ #naati-app .na-body { padding-top: 24px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 20px; } /* ════════════════════════════════════════════════════════════ LANGUAGE FILTER ════════════════════════════════════════════════════════════ */ #naati-app .na-filter-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } #naati-app .na-filter-label { font-family: var(--fh) !important; font-size: 13px; font-weight: 600; color: var(--t-dark); white-space: nowrap; } #naati-app .na-select-wrap { position: relative; display: inline-block; } #naati-app .na-select-wrap select { appearance: none !important; -webkit-appearance: none !important; background: var(--white); border: 1.5px solid var(--bdr-md) !important; border-radius: var(--r-sm) !important; color: var(--t-dark) !important; font-family: var(--fb) !important; font-size: 14px !important; font-weight: 500; padding: 9px 36px 9px 13px !important; cursor: pointer; outline: none !important; min-width: 180px; transition: border-color var(--dur); height: auto !important; line-height: normal !important; } #naati-app .na-select-wrap select:focus { border-color: var(--or) !important; box-shadow: 0 0 0 3px rgba(255,120,45,.15) !important; } #naati-app .na-select-wrap select:disabled { opacity: .5; cursor: not-allowed; } #naati-app .na-select-icon { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; pointer-events: none; stroke: var(--t-muted); } /* ════════════════════════════════════════════════════════════ SECTION LABEL ════════════════════════════════════════════════════════════ */ #naati-app .na-section-label { font-family: var(--fh) !important; font-size: 11px; font-weight: 700; letter-spacing: 2px; color: var(--t-muted); text-transform: uppercase; margin-bottom: -8px; } /* ════════════════════════════════════════════════════════════ DIALOGUE CARDS (horizontal scroll on mobile) ════════════════════════════════════════════════════════════ */ #naati-app .na-cards-scroll { /* enable horizontal scroll on small screens */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -20px; padding: 0 20px; } #naati-app .na-cards-scroll::-webkit-scrollbar { display: none; } #naati-app .na-cards-grid { display: grid; grid-template-columns: repeat(3, minmax(200px, 1fr)); gap: 12px; min-width: max-content; width: 100%; } #naati-app .na-cards-loading { grid-column: 1 / -1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 28px; color: var(--t-muted); font-size: 14px; background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r-lg); } #naati-app .na-cards-empty { grid-column: 1 / -1; text-align: center; padding: 28px; color: var(--t-muted); font-size: 14px; background: var(--card); border: 1.5px dashed var(--bdr-md); border-radius: var(--r-lg); } /* Card */ #naati-app .na-card { background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r-lg); padding: 14px 16px; cursor: pointer; display: flex; align-items: flex-start; gap: 11px; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; min-width: 200px; } #naati-app .na-card:hover { border-color: var(--or-dk); box-shadow: var(--sh); } #naati-app .na-card.selected { border-color: var(--or); background: var(--or-lt); box-shadow: 0 0 0 3px rgba(255,120,45,.15); } /* Radio dot */ #naati-app .na-radio { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--bdr-md); flex-shrink: 0; margin-top: 1px; display: flex; align-items: center; justify-content: center; transition: border-color var(--dur), background var(--dur); } #naati-app .na-card.selected .na-radio { border-color: var(--or); background: var(--or); } #naati-app .na-radio::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity var(--dur); } #naati-app .na-card.selected .na-radio::after { opacity: 1; } #naati-app .na-card-body { flex: 1; min-width: 0; } #naati-app .na-card-title { font-family: var(--fh) !important; font-size: 13px; font-weight: 700; color: var(--t-dark); line-height: 1.3; margin-bottom: 4px; } #naati-app .na-card-meta { font-size: 11px; color: var(--t-muted); font-weight: 500; } #naati-app .na-card.selected .na-card-title { color: var(--or-dk); } /* ════════════════════════════════════════════════════════════ WAVEFORM ════════════════════════════════════════════════════════════ */ #naati-app .na-wave-wrap { background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r-lg); overflow: hidden; min-height: 160px; position: relative; display: flex; align-items: center; justify-content: center; } #naati-app .na-ws-container { width: 100%; padding: 6px 0; } #naati-app .na-rec-canvas { width: 100%; height: 160px; display: block; } #naati-app .na-wave-idle { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 20px; color: var(--t-light); text-align: center; } #naati-app .na-wave-idle svg { width: 130px; } #naati-app .na-wave-idle p { font-size: 13px; color: var(--t-muted); } #naati-app .na-wave-idle strong { color: var(--t-dark); } /* ════════════════════════════════════════════════════════════ CONTROLS ════════════════════════════════════════════════════════════ */ #naati-app .na-controls { display: flex; flex-direction: column; gap: 10px; } #naati-app .na-controls-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #naati-app .na-btn-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* ── Base button ────────────────────────────────────────── */ #naati-app .na-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px; padding: 10px 20px !important; font-family: var(--fb) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; border: none !important; border-radius: var(--r-pill) !important; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; text-decoration: none !important; min-height: 42px; -webkit-tap-highlight-color: transparent; } #naati-app .na-btn svg { width: 14px; height: 14px; flex-shrink: 0; fill: currentColor; display: block; } #naati-app .na-btn:disabled { opacity: .38 !important; cursor: not-allowed !important; transform: none !important; box-shadow: none !important; } #naati-app .na-btn:not(:disabled):active { transform: scale(.95); } /* Start */ #naati-app .na-btn-start { background: var(--or) !important; color: #fff !important; box-shadow: 0 3px 12px rgba(255,120,45,.35); } #naati-app .na-btn-start:not(:disabled):hover { background: var(--or-dk) !important; transform: translateY(-1px); box-shadow: 0 5px 18px rgba(255,120,45,.45); } /* Ghost */ #naati-app .na-btn-ghost { background: var(--white) !important; color: var(--t-body) !important; border: 1.5px solid var(--bdr-md) !important; padding: 9px 16px !important; } #naati-app .na-btn-ghost:not(:disabled):hover { border-color: var(--or) !important; color: var(--or) !important; } /* Download icon adjustment */ #naati-app .na-btn-dl svg { fill: none; } /* Reset */ #naati-app .na-btn-reset { background: var(--or) !important; color: #fff !important; } #naati-app .na-btn-reset:not(:disabled):hover { background: var(--or-dk) !important; transform: translateY(-1px); } /* Measure */ #naati-app .na-btn-measure { background: var(--white) !important; color: var(--t-dark) !important; border: 1.5px solid var(--bdr-md) !important; border-radius: var(--r-sm) !important; font-size: 13px !important; padding: 9px 16px !important; min-height: 40px; } #naati-app .na-btn-measure:not(:disabled):hover { border-color: var(--pu) !important; color: var(--pu) !important; } #naati-app .na-btn-measure.measuring { color: var(--or) !important; border-color: var(--or) !important; pointer-events: none; } /* Timer */ #naati-app .na-timer-box { display: flex; align-items: center; } #naati-app .na-timer { font-family: var(--fh) !important; font-size: 28px; font-weight: 800; color: var(--t-dark); letter-spacing: 2px; min-width: 80px; text-align: right; font-variant-numeric: tabular-nums; } /* Status */ #naati-app .na-status { font-size: 13px; color: var(--t-muted); font-weight: 500; } #naati-app .na-status.active { color: var(--or); font-weight: 600; } #naati-app .na-status.success { color: var(--green); font-weight: 600; } #naati-app .na-status.warn { color: var(--red); font-weight: 600; } /* ════════════════════════════════════════════════════════════ AUDIO PLAYERS ════════════════════════════════════════════════════════════ */ #naati-app .na-players { background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r-lg); overflow: hidden; } #naati-app .na-player-row { display: flex; align-items: center; gap: 14px; padding: 13px 18px; border-bottom: 1px solid var(--bdr); } #naati-app .na-player-row:last-child { border-bottom: none; } #naati-app .na-player-label { font-family: var(--fh) !important; font-size: 13px; font-weight: 700; color: var(--t-dark); min-width: 130px; flex-shrink: 0; } #naati-app .na-player-row audio { flex: 1; min-width: 0; width: 100%; height: 36px; accent-color: var(--or); display: block; } /* ════════════════════════════════════════════════════════════ NOISE METER ════════════════════════════════════════════════════════════ */ #naati-app .na-noise-card { background: var(--card); border: 1.5px solid var(--bdr); border-radius: var(--r-lg); padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } #naati-app .na-noise-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } #naati-app .na-noise-badge { font-family: var(--fh) !important; font-size: 18px; font-weight: 800; color: var(--t-dark); background: var(--bg); border: 1.5px solid var(--bdr-md); border-radius: var(--r-sm); padding: 6px 14px; min-width: 84px; text-align: center; transition: background var(--dur), border-color var(--dur), color var(--dur); } #naati-app .na-noise-badge.green { background: var(--green-bg); border-color: var(--green); color: var(--green); } #naati-app .na-noise-badge.yellow { background: var(--yellow-bg); border-color: var(--yellow); color: #856404; } #naati-app .na-noise-badge.red { background: var(--red-bg); border-color: var(--red); color: var(--red); } #naati-app .na-noise-status { font-size: 13px; color: var(--t-muted); font-weight: 500; } #naati-app .na-noise-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; font-weight: 600; margin-top: -8px; } #naati-app .na-leg-green { color: var(--green); } #naati-app .na-leg-yellow { color: #8a6400; } #naati-app .na-leg-red { color: var(--red); } #naati-app .na-noise-tip { font-size: 12px; color: var(--t-light); font-style: italic; margin-top: -8px; } /* ════════════════════════════════════════════════════════════ TOAST ════════════════════════════════════════════════════════════ */ #naati-app .na-toast { position: fixed; bottom: 20px; right: 16px; left: 16px; z-index: 9999; display: flex; align-items: flex-start; gap: 10px; background: #fff5f5; border: 1px solid rgba(220,53,69,.3); border-radius: var(--r-md); padding: 13px 16px; font-size: 13px; color: #721c24; box-shadow: var(--sh-md); animation: naati-up .22s var(--ease); max-width: 480px; margin: 0 auto; } @keyframes naati-up { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform: translateY(0); } } #naati-app .na-toast svg { width:17px; height:17px; flex-shrink:0; margin-top:1px; stroke: var(--red); } #naati-app #naToastClose { background: none !important; border: none !important; color: var(--t-muted) !important; font-size: 16px !important; cursor: pointer; margin-left: auto; padding: 0 !important; line-height: 1; flex-shrink: 0; } /* ════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════ */ #naati-app .na-footer { background: var(--white); border-top: 1px solid var(--bdr); padding: 16px 0; } #naati-app .na-footer-inner { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--t-muted); } #naati-app .na-footer-inner a { color: var(--or) !important; text-decoration: none !important; font-weight: 600; } #naati-app .na-footer-inner a:hover { text-decoration: underline !important; } /* ════════════════════════════════════════════════════════════ RESPONSIVE — TABLET ≤ 768px ════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { #naati-app .na-cards-grid { /* on tablet keep 2 columns, still scrollable */ grid-template-columns: repeat(2, minmax(190px, 1fr)); } #naati-app .na-timer { font-size: 24px; } #naati-app .na-player-label { min-width: 110px; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE — MOBILE ≤ 520px ════════════════════════════════════════════════════════════ */ @media (max-width: 520px) { /* Tighter wrap padding */ #naati-app .na-wrap { padding-left: 14px; padding-right: 14px; } /* Hero */ #naati-app .na-hero { padding: 20px 0 16px; } #naati-app .na-hero-sub { font-size: 12px; } /* Body gaps */ #naati-app .na-body { gap: 14px; padding-top: 16px; padding-bottom: 40px; } /* Cards — single column, no horizontal scroll needed */ #naati-app .na-cards-scroll { margin: 0; padding: 0; overflow-x: visible; } #naati-app .na-cards-grid { grid-template-columns: 1fr; min-width: 0; width: 100%; } /* Waveform height reduced */ #naati-app .na-wave-wrap { min-height: 120px; } #naati-app .na-rec-canvas { height: 120px; } /* Controls — stack buttons into 2-wide grid */ #naati-app .na-controls-top { flex-direction: column; align-items: stretch; gap: 10px; } #naati-app .na-btn-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Start spans full width */ #naati-app .na-btn-start { grid-column: 1 / -1; } /* Download spans full width */ #naati-app .na-btn-dl { grid-column: 1 / -1; } #naati-app .na-timer-box { justify-content: flex-end; } #naati-app .na-timer { font-size: 22px; min-width: 70px; } /* Audio players — stack label above audio */ #naati-app .na-player-row { flex-direction: column; align-items: flex-start; gap: 7px; padding: 12px 14px; } #naati-app .na-player-label { min-width: 0; } #naati-app .na-player-row audio { width: 100%; min-width: 0; } /* Noise card */ #naati-app .na-noise-card { flex-direction: column; align-items: flex-start; } #naati-app .na-btn-measure { width: 100%; } /* Hide brand text on very small screens */ #naati-app .na-brand-text { display: none; } /* Toast full width */ #naati-app .na-toast { bottom: 12px; right: 12px; left: 12px; } /* Footer */ #naati-app .na-footer-inner { flex-direction: column; gap: 4px; text-align: center; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE — SMALL MOBILE ≤ 360px ════════════════════════════════════════════════════════════ */ @media (max-width: 360px) { #naati-app .na-btn { font-size: 13px !important; padding: 9px 13px !important; } #naati-app .na-btn-row { grid-template-columns: 1fr; } #naati-app .na-brand-badge { font-size: 10px; padding: 3px 8px; } } /* ════════════════════════════════════════════════════════════ SAFE AREA (iPhone notch / home indicator) ════════════════════════════════════════════════════════════ */ @supports (padding-bottom: env(safe-area-inset-bottom)) { #naati-app .na-body { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } }