/* =====================================================================
MR FRIES OPERATOR ACADEMY — SHARED BRAND STYLESHEET
One source of visual truth for the whole training pack.
Palette / type from Mr Fries Brand Guidelines.
Built to look good on screen AND print clean to A4 PDF (binders).
===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Antonio:wght@300;400;500;600;700&family=Inter:wght@400;500;600;700&display=swap');
:root{
--orange:#EB8038;
--orange-deep:#d96d24;
--yellow:#FDB715;
--charcoal:#393939;
--charcoal-2:#2c2c2c;
--ink:#222;
--muted:#6b6b6b;
--line:#e3e3e3;
--paper:#ffffff;
--paper-2:#faf8f6;
--grad:linear-gradient(95deg,var(--orange),var(--yellow));
--danger:#c0392b;
--danger-bg:#fdecea;
--ok:#2e8b57;
--shadow:0 2px 10px rgba(0,0,0,.08);
--radius:14px;
--maxw:980px;
--head:'Antonio',"Arial Narrow",sans-serif;
--body:'Inter',-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
margin:0;
font-family:var(--body);
color:var(--ink);
background:var(--paper-2);
line-height:1.55;
font-size:16px;
/* keep brand colour in printed PDFs */
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
img{max-width:100%;height:auto}
a{color:var(--orange-deep);text-decoration:none}
a:hover{text-decoration:underline}
/* prevent any long string (codes, URLs) from breaking the page width */
p,li,td,th,dd,dt,h1,h2,h3,h4{overflow-wrap:anywhere;word-break:normal}
/* ---------- Headings ---------- */
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.05;letter-spacing:.2px;margin:.2em 0 .4em}
h1{font-size:40px;text-transform:uppercase}
h2{font-size:27px;text-transform:uppercase;color:var(--charcoal)}
h3{font-size:20px;letter-spacing:.3px}
h4{font-size:16px;text-transform:uppercase;letter-spacing:.6px;color:var(--orange-deep)}
.display{font-family:var(--head);font-weight:700;text-transform:uppercase;line-height:.95}
/* =====================================================================
PAGE SHELL
===================================================================== */
.page{max-width:var(--maxw);margin:0 auto;padding:0 22px 64px;color:var(--ink)}
/* The .page column is ALWAYS the light content surface. Force dark ink even when
it sits inside a dark (the hub), so body copy in
callouts/cards/sections never inherits the dark theme's near-white text. */
.page,.page p,.page li,.page td,.page dd,.page dt,.page h2,.page h3{color:var(--ink)}
.page a{color:var(--orange-deep)}
/* content blocks own their text colour regardless of ancestor theme */
.card,.callout,.lo,.assess,.signoff,.tbl,.kv,.section,.steps li{color:var(--ink)}
/* ---------- Top utility nav (hidden on print) ---------- */
.topnav{
max-width:var(--maxw);margin:0 auto;padding:14px 22px;
display:flex;align-items:center;gap:14px;font-size:13px;color:var(--muted);
flex-wrap:wrap /* never let the crumb row force horizontal overflow on mobile */
}
.topnav a{color:var(--muted);font-weight:600}
.topnav .sep{opacity:.4}
/* Some pages place a logo ![]()
directly in .topnav; cap it so its natural
width can't push the row past the viewport (the doc-header carries the
real branding). */
/* ---------- LOGO CONTROL (single source) ----------
The logo is shown on every page as the .doc-header BACKGROUND image. Inline
logo ![]()
tags were authored inconsistently by different pages (in .topnav,
in .topnav>.wrap, in a.brand…) and rendered at their natural ~1484px size on
some pages. So: hide every inline logo ![]()
by default, then re-show ONLY
the two intentional large ones — the hub hero and the printable certificate. */
img[src$="logo.png"]{display:none}
.hero .logo{display:block}
img.cert-logo{display:block;width:auto;max-width:210px;height:auto}
.crumbs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;min-width:0}
/* ---------- Document header band (charcoal, branded) ----------
Logo is painted as a background image so EVERY page is branded
identically regardless of which agent authored it. url() resolves
relative to this stylesheet (assets/) → assets/logo.png, so it works
from any page depth. Desktop reserves right padding so header text
never runs under the logo; mobile drops it for full-width text. */
.doc-header{
background:url("logo.png") no-repeat right 26px center / 80px auto, var(--charcoal);
color:#fff;border-radius:var(--radius);
padding:26px 30px;margin:8px 0 26px;position:relative;overflow:hidden
}
@media (min-width:741px){.doc-header{padding-right:124px}}
.doc-header::after{ /* subtle swoosh accent, behind the logo */
content:"";position:absolute;right:-40px;top:-30px;width:240px;height:240px;
background:var(--grad);opacity:.14;border-radius:50%;
}
.doc-header .eyebrow{font-family:var(--head);text-transform:uppercase;letter-spacing:2px;
color:var(--yellow);font-size:14px;font-weight:600;margin-bottom:6px;position:relative;z-index:1}
.doc-header h1{color:#fff;margin:0;font-size:38px;position:relative;z-index:1}
.doc-header .sub{color:#d9d9d9;margin-top:8px;font-size:15px;max-width:70ch;position:relative;z-index:1}
/* Inline logo ![]()
(present on some pages) is redundant now — hide it so
those pages don't show two logos. The background logo covers all pages. */
.doc-header .logo{display:none}
@media (max-width:740px){
.doc-header{background-image:none;padding-right:30px}
}
/* ---------- Unit / doc meta chips ---------- */
.meta-row{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 6px;position:relative;z-index:1}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);
padding:5px 11px;border-radius:999px}
.chip svg{width:13px;height:13px}
/* chips on light surfaces */
.chip--light{background:#fff;color:var(--charcoal);border:1px solid var(--line)}
/* ---------- Badges (tier / track) ---------- */
.badge{display:inline-block;font-family:var(--head);font-weight:700;text-transform:uppercase;
letter-spacing:1px;font-size:12px;padding:4px 10px;border-radius:6px;color:#fff}
.badge--a{background:#2f7d6b} /* Track A food safety */
.badge--b{background:#3a6ea5} /* Track B management */
.badge--c{background:var(--orange)}/* Track C Mr Fries */
.badge--crew{background:#6b6b6b}
.badge--lead{background:#b5731f}
.badge--mgr{background:var(--charcoal)}
.badge--sop{background:var(--orange-deep)}
/* =====================================================================
CONTENT BLOCKS
===================================================================== */
.lead{font-size:18px;color:#333}
.section{margin:26px 0}
.rule{height:3px;background:var(--grad);border:0;border-radius:3px;margin:30px 0}
/* learning outcomes */
.lo{background:#fff;border:1px solid var(--line);border-left:4px solid var(--orange);
border-radius:10px;padding:16px 20px;box-shadow:var(--shadow)}
.lo h4{margin-top:0}
.lo ul{margin:0;padding-left:20px}
.lo li{margin:6px 0}
/* generic card */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:20px 22px;box-shadow:var(--shadow);margin:16px 0}
/* two-column grid */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media (max-width:760px){.grid,.grid-3{grid-template-columns:1fr}}
/* ---------- Callouts ---------- */
.callout{border-radius:12px;padding:16px 18px 16px 46px;position:relative;margin:16px 0;font-size:15px}
.callout .ic{position:absolute;left:14px;top:16px;font-size:18px;line-height:1}
.callout h4{margin:.1em 0 .4em}
.callout--app{background:#fff5ec;border:1px solid #f6d3b3;border-left:4px solid var(--orange)}
.callout--app h4{color:var(--orange-deep)}
.callout--law{background:#eef1f5;border:1px solid #cdd6e2;border-left:4px solid #3a6ea5}
.callout--law h4{color:#2c5582}
.callout--danger{background:var(--danger-bg);border:1px solid #f3b7b0;border-left:4px solid var(--danger)}
.callout--danger h4{color:var(--danger)}
.callout--tip{background:#fffbe9;border:1px solid #f3e2a6;border-left:4px solid var(--yellow)}
.callout--tip h4{color:#9a7400}
.callout--ok{background:#eaf6ef;border:1px solid #b7dcc6;border-left:4px solid var(--ok)}
.callout--ok h4{color:var(--ok)}
/* ---------- Tables ---------- */
.tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:14.5px;background:#fff;
border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tbl th{background:var(--charcoal);color:#fff;text-align:left;font-family:var(--head);
font-weight:600;letter-spacing:.4px;text-transform:uppercase;font-size:13px;padding:10px 12px}
.tbl td{padding:9px 12px;border-top:1px solid var(--line);vertical-align:top}
.tbl tr:nth-child(even) td{background:var(--paper-2)}
.tbl--compact td,.tbl--compact th{padding:6px 9px;font-size:13.5px}
.tbl .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Wide multi-column record/form tables can't fit a phone. On small screens
let the table scroll inside its own box instead of pushing the whole page
sideways. Print restores full layout (see @media print). */
@media (max-width:560px){
.tbl--form,.tbl--wide{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl--form thead,.tbl--form tbody,.tbl--form tr{display:table;width:max-content;min-width:100%}
}
/* key-value spec list */
.kv{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:12px 0;font-size:15px}
.kv dt{font-weight:700;color:var(--charcoal)}
.kv dd{margin:0}
/* ---------- Tags (allergens, channels, flavours) ---------- */
.tags{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.tag{font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;
background:#f0eee9;color:#4a4a4a;border:1px solid #e0ddd6}
.tag--allergen{background:#fdecea;color:#a83227;border-color:#f3b7b0}
.tag--hot{background:#fde2dc;color:#b3331f;border-color:#f3a89b}
.tag--med{background:#fff0d9;color:#9a6400;border-color:#f3d9a6}
.tag--mild{background:#eaf6ef;color:#1f7a4d;border-color:#b7dcc6}
/* =====================================================================
ASSESSMENT ITEMS
===================================================================== */
.assess{border:1px solid var(--line);border-radius:10px;background:#fff;padding:14px 16px;margin:12px 0}
.assess .qtype{font-family:var(--head);text-transform:uppercase;letter-spacing:1px;font-size:11px;
font-weight:700;color:#fff;padding:3px 8px;border-radius:5px;margin-right:8px;display:inline-block}
.qtype--mcq{background:#3a6ea5}
.qtype--short{background:#2f7d6b}
.qtype--practical{background:var(--orange)}
.qtype--scenario{background:var(--charcoal)}
.qtype--roleplay{background:#8e5572}
.assess ol{margin:8px 0 0 0}
.answer{font-size:13.5px;color:var(--ok);background:#eaf6ef;border-radius:6px;padding:6px 10px;margin-top:8px}
.answer b{color:#1f7a4d}
/* MCQ options */
.opts{list-style:none;margin:8px 0 0;padding:0}
.opts li{padding:5px 0 5px 28px;position:relative}
.opts li::before{content:attr(data-opt);position:absolute;left:0;top:5px;width:20px;height:20px;
border:1.5px solid #bbb;border-radius:50%;font-size:11px;font-weight:700;color:#777;
display:flex;align-items:center;justify-content:center}
/* =====================================================================
SIGN-OFF / FORMS / CHECKLISTS (printable)
===================================================================== */
.signoff{border:1.5px dashed var(--orange);border-radius:10px;background:#fffaf4;
padding:14px 16px;margin:16px 0}
.signoff h4{margin-top:0}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin-top:8px}
.field{display:flex;align-items:flex-end;gap:8px;font-size:14px;min-width:0}
.field .lbl{font-weight:600;color:var(--charcoal)}
.field .line{flex:1;border-bottom:1.5px solid #b9b9b9;min-height:22px;min-width:40px}
/* On narrow screens collapse the 2-up field grid to 1-up so long labels
(e.g. "RIDDOR reportable?") never push a sign-off form past the viewport. */
@media (max-width:560px){.fields{grid-template-columns:1fr}}
/* Some Track A lessons author the sign-off as a .h heading + a .row of .box
signature cells (instead of the .fields/.field pattern). Without styling, the
label text collides with the 18px checkbox default of .box. Render those as
clean bordered signature cells. Scoped to ".signoff .row" so real checkboxes
(.checklist .box, form .box) are never affected. */
.signoff .h{font-family:var(--head);font-weight:700;text-transform:uppercase;
letter-spacing:.5px;font-size:16px;color:var(--charcoal);margin:0 0 4px}
.signoff .row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media (max-width:560px){.signoff .row{grid-template-columns:1fr}}
.signoff .row .box{
width:auto;height:auto;flex:initial;margin:0;display:block;
border:1px solid var(--line);border-radius:8px;background:#fff;
min-height:58px;padding:9px 12px;
font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--muted)
}
/* checklist rows with printable tick boxes */
.checklist{list-style:none;margin:10px 0;padding:0}
.checklist li{display:flex;align-items:flex-start;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)}
.box{flex:0 0 auto;width:18px;height:18px;border:2px solid var(--charcoal);border-radius:4px;margin-top:2px}
.box--lg{width:22px;height:22px}
/* empty write-in cells for record sheets */
.tbl .write{height:30px}
.tbl--form td{border:1px solid #cfcfcf}
/* =====================================================================
RECIPE CARDS
===================================================================== */
.recipe-cc{background:var(--charcoal);color:#fff;border-radius:10px;padding:12px 16px;margin:14px 0;
display:flex;flex-wrap:wrap;gap:18px;align-items:center;font-size:14px}
.recipe-cc b{color:var(--yellow);font-family:var(--head);letter-spacing:.5px}
.steps{counter-reset:step;list-style:none;margin:12px 0;padding:0}
.steps li{position:relative;padding:10px 0 10px 46px;border-bottom:1px solid var(--line)}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:8px;
width:30px;height:30px;background:var(--grad);color:#fff;font-family:var(--head);font-weight:700;
border-radius:50%;display:flex;align-items:center;justify-content:center}
/* =====================================================================
HUB / COVER (dark theme)
===================================================================== */
.theme-dark{background:var(--charcoal);color:#eee}
.theme-dark a{color:var(--yellow)}
.hero{background:var(--charcoal);color:#fff;position:relative;overflow:hidden;
padding:54px 22px 40px;text-align:left}
.hero .inner{max-width:var(--maxw);margin:0 auto;position:relative;z-index:2}
.hero::before{content:"";position:absolute;inset:0;background:
radial-gradient(900px 300px at 85% -10%,rgba(235,128,56,.30),transparent 60%);z-index:1}
.hero .eyebrow{font-family:var(--head);letter-spacing:3px;text-transform:uppercase;color:var(--yellow);font-weight:600}
.hero h1{font-size:60px;margin:6px 0 10px}
.hero h1 .o{color:var(--orange)}
.hero p{max-width:64ch;color:#dcdcdc;font-size:18px}
.hero .logo{position:absolute;right:26px;top:30px;width:130px;z-index:2}
@media (max-width:680px){.hero h1{font-size:40px}.hero .logo{width:90px}}
/* tile navigation */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:22px 0}
@media (max-width:860px){.tiles{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tiles{grid-template-columns:1fr}}
.tile{display:block;background:#fff;border:1px solid var(--line);border-radius:var(--radius);
padding:18px 18px 16px;box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s;color:var(--ink)}
.tile:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.14);text-decoration:none}
.tile .k{font-family:var(--head);font-size:13px;letter-spacing:1px;text-transform:uppercase;color:var(--orange-deep);font-weight:700}
.tile h3{margin:6px 0 4px;color:var(--charcoal)}
.tile p{margin:0;font-size:13.5px;color:var(--muted)}
.tile .count{float:right;font-family:var(--head);font-size:30px;color:#eadfd5;line-height:1}
/* unit list (track index) */
.unitlist{list-style:none;margin:16px 0;padding:0;display:grid;gap:8px}
.unitlist a{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
border-radius:10px;padding:12px 16px;color:var(--ink);box-shadow:var(--shadow)}
.unitlist a:hover{border-color:var(--orange);text-decoration:none}
.unitlist .code{font-family:var(--head);font-weight:700;color:#fff;background:var(--charcoal);
border-radius:7px;min-width:46px;text-align:center;padding:6px 8px;font-size:15px}
.unitlist .t{flex:1}
.unitlist .t b{display:block;color:var(--charcoal)}
.unitlist .t span{font-size:13px;color:var(--muted)}
/* =====================================================================
FOOTER
===================================================================== */
.foot{border-top:2px solid var(--orange);margin-top:40px;padding:16px 0;color:var(--muted);font-size:12.5px;
display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.foot .brand{font-family:var(--head);text-transform:uppercase;letter-spacing:1px;color:var(--charcoal);font-weight:700}
/* back-to-top / nav buttons */
.btnrow{display:flex;gap:10px;flex-wrap:wrap;margin:24px 0}
.btn{display:inline-block;font-family:var(--head);text-transform:uppercase;letter-spacing:.5px;
font-weight:600;font-size:14px;padding:9px 16px;border-radius:8px;border:2px solid var(--orange);
color:var(--orange-deep);background:#fff}
.btn:hover{background:var(--orange);color:#fff;text-decoration:none}
.btn--solid{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn--solid:hover{background:var(--orange-deep)}
.btn--ghost{border-color:var(--line);color:var(--muted)}
/* =====================================================================
PRINT (A4 binder-ready, ink-aware, no overflow)
===================================================================== */
@media print{
@page{size:A4;margin:14mm}
body{background:#fff;font-size:12pt}
.topnav,.btnrow,.noprint{display:none!important}
.page{max-width:none;padding:0}
.doc-header{border-radius:0;box-shadow:none}
.card,.lo,.callout,.assess,.signoff,.tbl,.recipe-cc{box-shadow:none}
.tile,.card,.assess,.signoff,.lo,.callout,.recipe-cc,tr,.steps li{break-inside:avoid}
h2,h3{break-after:avoid}
a{color:inherit;text-decoration:none}
.hero{padding:30px 0}
}