/* ASQA Design Tokens — loaded in to prevent FOUC Based on the FormFactor tokens structure, retuned to the ASQA Brand Guidelines v1.1 (December 2020). Component styles live in the CSS Tokens content snippet (rendered via Header). This file provides only tokens + base styles that must load before first paint. -------------------------------------------------------------------------- Variable names are preserved as --ff-* so existing Power Pages components, web templates, and Liquid snippets continue to resolve. Only the values have changed. */ :root { /* Brand — ASQA Plum is the primary action colour (Brand Guidelines p.27). ASQA Dark Blue handles secondary/link roles. Charcoal is the deep neutral. */ --ff-primary: #AF0066; /* ASQA Plum */ --ff-primary-hover: #8E0053; /* darkened plum for hover */ --ff-primary-light: #FBE3EE; /* tint for filled-light backgrounds */ /* Semantic — kept distinct from the primary plum so error states still read as error. Dark blue acts as the secondary brand colour. */ --ff-secondary: #005287; /* ASQA Dark Blue */ --ff-success: #2D5A12; /* accessible green, paired with token */ --ff-success-light: #E8F5E1; --ff-warning: #6B4A00; /* muted amber for text on warning bg */ --ff-warning-light: #FFF3D9; --ff-error: #AF0066; /* re-use plum — brand-aligned error */ --ff-error-light: #FBE3EE; /* Surfaces */ --ff-bg: #F4F6F8; /* page background, very subtle cool grey */ --ff-surface: #FFFFFF; --ff-surface-hover: #EFF5F9; /* 15% tint of ASQA Light Blue */ --ff-border: #D6DBE2; --ff-border-strong: #6691AA; /* ASQA Ash Blue */ /* Text */ --ff-text: #323747; /* ASQA Charcoal */ --ff-text-secondary: #474D58; --ff-text-muted: #5A6271; --ff-text-inverse: #FFFFFF; /* Accent — bright green and bright fuchsia. Use sparingly: never as backgrounds, never for body text. Reserved for large display headlines on dark surfaces and small accent details (Brand Guidelines p.27). */ --ff-accent-green: #CDFF00; --ff-accent-fuchsia: #FF007B; /* Typography — Brand Guidelines p.30–33. Display: Canela Light → Times New Roman fallback Subhead/UI: TT Commons Demibold → Arial Bold fallback Body: TT Commons Regular → Arial fallback */ --ff-font-family: 'TT Commons', 'TTCommons', Arial, Helvetica, sans-serif; --ff-font-display: 'Canela', 'Canela Light', 'Times New Roman', Times, serif; --ff-font-size-xs: 0.8125rem; --ff-font-size-sm: 0.875rem; --ff-font-size-base: 1rem; --ff-font-size-md: 1.0625rem; --ff-font-size-lg: 1.25rem; --ff-font-size-xl: 1.5rem; --ff-font-size-2xl: 2rem; /* Spacing */ --ff-spacing-xs: 0.25rem; --ff-spacing-sm: 0.5rem; --ff-spacing-md: 1rem; --ff-spacing-lg: 1.5rem; --ff-spacing-xl: 2rem; --ff-spacing-2xl: 3rem; /* Layout */ --ff-container-max-width: 1400px; /* Radii — ASQA uses pill-shaped CTAs (see business-card design p.52 and event collateral). Standard radius stays modest; pill is exposed for buttons specifically. */ --ff-radius: 6px; --ff-radius-lg: 10px; --ff-radius-sm: 4px; --ff-radius-pill: 999px; /* Shadows */ --ff-shadow-sm: 0 1px 2px rgba(50, 55, 71, 0.06); --ff-shadow-md: 0 2px 8px rgba(50, 55, 71, 0.08); --ff-shadow-lg: 0 8px 24px rgba(50, 55, 71, 0.12); /* Footer — Charcoal-based dark footer matching the brand's deep neutral */ --ff-footer-bg: #1F2330; /* darker than charcoal for separation */ --ff-footer-text: #B5BAC5; --ff-footer-heading: #FFFFFF; --ff-footer-link: #B5BAC5; /* accent green for links on dark bg */ --ff-footer-border: #323747; /* ASQA Charcoal */ } /* ----- Base Styles (FOUC prevention) ----- */ html { font-size: 16px !important; } body { font-family: var(--ff-font-family) !important; font-size: var(--ff-font-size-base) !important; line-height: 1.5 !important; /* TT Commons spec: font + 33% applied per-element */ color: var(--ff-text) !important; background: var(--ff-bg) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body p, body span, body div, body label, body input, body textarea, body select, body button, body a, body li, body td, body th, .navbar, .nav-link, .dropdown-item, .username, .btn, .form-control, .form-select, .page-copy, .wrapper-body { font-family: var(--ff-font-family) !important; } /* Display typeface (Canela Light fallback) for headlines. Brand rule: sentence case only, never UPPERCASE or Title Case (p.30). */ body h1, body h2, .MuiTypography-h1, .MuiTypography-h2 { font-family: var(--ff-font-display) !important; font-weight: 300 !important; /* Canela Light */ text-transform: none !important; letter-spacing: 0 !important; line-height: 1.1 !important; /* Canela spec: font + 10% */ } /* Subheadings — TT Commons Demibold (or Arial Bold fallback). Sentence case, no end punctuation (p.31). */ body h3, body h4, body h5, body h6, .MuiTypography-h3, .MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 { font-family: var(--ff-font-family) !important; font-weight: 600 !important; /* Demibold */ text-transform: none !important; } /* portalbasictheme.css sets `a, .a { font-size: 14px }` globally, which sticks to tags inside MUI Typography (PCF RTF content) because Typography sizes the container, not descendant anchors. Force inheritance so RTF links match surrounding body text. Scoped to .MuiTypography-root to avoid touching nav/footer/portal-chrome links, which rely on their own component sizing. */ .MuiTypography-root a, .MuiTypography-root a:link, .MuiTypography-root a:visited { font-size: inherit !important; color: var(--ff-secondary) !important; /* ASQA Dark Blue */ text-decoration: underline; text-underline-offset: 3px; } .MuiTypography-root a:hover, .MuiTypography-root a:focus { color: var(--ff-primary) !important; /* hover to plum */ } h1, h2, h3, h4 { line-height: 1.2; } /* Selection — ASQA bright green highlight, with charcoal text for legibility */ ::selection { background: var(--ff-accent-green); color: var(--ff-text); } /* ----- Frame pages: hide all chrome early to prevent flash ----- */ body[data-sitemap-state*="form-submission-frame"] .navbar, body[data-sitemap-state*="form-submission-frame"] footer, body[data-sitemap-state*="form-submission-frame"] .ff-footer, body[data-sitemap-state*="form-submission-frame"] .ff-breadcrumb-bar, body[data-sitemap-state*="form-submission-frame"] .private-mode-banner, body[data-sitemap-state*="Form-Submission-Frame"] .navbar, body[data-sitemap-state*="Form-Submission-Frame"] footer, body[data-sitemap-state*="Form-Submission-Frame"] .ff-footer, body[data-sitemap-state*="Form-Submission-Frame"] .ff-breadcrumb-bar, body[data-sitemap-state*="Form-Submission-Frame"] .private-mode-banner { display: none !important; } body[data-sitemap-state*="form-submission-frame"], body[data-sitemap-state*="Form-Submission-Frame"] { background: var(--ff-surface) !important; padding: 0 !important; margin: 0 !important; } body[data-sitemap-state*="form-submission-frame"] .content-wrapper, body[data-sitemap-state*="form-submission-frame"] .wrapper-body, body[data-sitemap-state*="form-submission-frame"] .page-copy, body[data-sitemap-state*="form-submission-frame"] .container, body[data-sitemap-state*="form-submission-frame"] .row, body[data-sitemap-state*="form-submission-frame"] .col-lg-12, body[data-sitemap-state*="form-submission-frame"] .sectionBlockLayout, body[data-sitemap-state*="Form-Submission-Frame"] .content-wrapper, body[data-sitemap-state*="Form-Submission-Frame"] .wrapper-body, body[data-sitemap-state*="Form-Submission-Frame"] .page-copy, body[data-sitemap-state*="Form-Submission-Frame"] .container, body[data-sitemap-state*="Form-Submission-Frame"] .row, body[data-sitemap-state*="Form-Submission-Frame"] .col-lg-12, body[data-sitemap-state*="Form-Submission-Frame"] .sectionBlockLayout { min-height: 0 !important; padding: 0 !important; margin: 0 !important; max-width: 100% !important; } /* Anonymous form: hide chrome */ body[data-sitemap-state*="form-submission-anonymous"] .ff-footer, body[data-sitemap-state*="form-submission-anonymous"] .navbar { display: none !important; } /* Optional body-class toggles */ body.ff-hide-header .navbar { display: none !important; } body.ff-hide-breadcrumb .ff-breadcrumb-bar { display: none !important; } body.ff-hide-footer .ff-footer { display: none !important; } /* Hide PCF loading overlay so portal skeleton shows */ .MuiBackdrop-root, .MuiBackdrop-root[style] { background-color: transparent !important; background: transparent !important; color: transparent !important; opacity: 0 !important; } .MuiBackdrop-root > .MuiCircularProgress-root { display: none !important; } /* ----- Focus state — brand-aligned plum outline (accessibility) ----- */ *:focus-visible { outline: 2px solid var(--ff-primary); outline-offset: 2px; border-radius: 2px; } /* ----- Reduced motion ----- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }