/* St Bernard's (heritage) landing: the page's colour, in one place.

   Two palettes, chosen by ONE class on <html> in
   templates/school_landing_heritage.html:

     <html lang="en" class="pal-c">   school colours (the default)
     <html lang="en" class="pal-a">   light school paper
     <html lang="en" class="pal-b">   flat navy

   Both are flat: no gradients for colour, no glows, no frosted glass, no
   tinted photographs, low neutral shadows. Gold is a line, a number or one
   button, never a light. The crest navy (--navy, the school's brand colour)
   is solid ink and solid bands.

   Linked after the page's inline styles, so for equal weight this file
   decides. Loaded only by the heritage template (demos): no other school
   reads it.                                                              */

/* =====================================================================
   SHARED BY BOTH
   ===================================================================== */
html.pal-a, html.pal-b {
  --film-ground: #111214;
  --tray-dark: #163B66;
}

/* the opening film's progress line: a plain hairline, not a brass glow */
html[class*="pal-"] .sf-reel { background: rgba(255, 255, 255, .14); }

/* the app band (pwa/promo.html, shared with other schools): flattened here
   only, under this page's palette class */
html[class*="pal-"] .cn-app { background: var(--cn-brand); }
html[class*="pal-"] .cn-phone { background: #2A2D31; }
html[class*="pal-"] .cn-phone__rail { background: #3A3D42; }
html[class*="pal-"] .cn-phone__lens { background: #1A1C1F; box-shadow: 0 0 0 1px rgba(0, 0, 0, .85); }
html[class*="pal-"] .cn-phone__glare { display: none; }
html[class*="pal-"] .cn-ui { background: #F3F4F6; }
html[class*="pal-"] .cn-ui__bar { background: var(--cn-brand); }
html[class*="pal-"] .cn-ui__dot { background: var(--cn-brand); }
html[class*="pal-"] .cn-ui__dot--2 { background: #2F7A5B; }
html[class*="pal-"] .cn-ui__dot--3 { background: #A97A1F; }
html[class*="pal-"] .cn-ui__dot--4 { background: #7A4E96; }
html[class*="pal-"] .cn-ui__dot--5 { background: #B3563A; }
html[class*="pal-"] .cn-ui__dot--6 { background: #2F6E8C; }

/* =====================================================================
   OPTION A: LIGHT SCHOOL PAPER (kept, not the default)
   White pages, a light grey for the alternate sections, navy as ink.
   Two navy bands only: "Switch on only what you need" and the app band.
   The hero keeps its photograph under a neutral scrim from the left edge;
   the ticker under it is a white strip with navy words.
   ===================================================================== */
html.pal-a {
  --nav-plate: var(--navy);
  --ticker-ground: #FFFFFF;
  --ticker-ink: var(--navy);
}
html.pal-a .ticker { border-bottom: 1px solid #E1E4E8; }

html.pal-a footer { background: #F2F3F5; color: #4D5867; border-top: 1px solid #E1E4E8; }
html.pal-a footer h4 { color: var(--navy); }
html.pal-a footer a:hover { color: var(--navy); text-decoration: underline; }
html.pal-a footer .motto-f { color: var(--brass-ink); }
html.pal-a footer .grid { border-bottom-color: #E1E4E8; }
html.pal-a footer .fine { color: #5E6672; }

/* =====================================================================
   OPTION B: FLAT NAVY
   Keeps a dark identity, entirely flat: one solid crest navy and a plain
   near-black, with white sections between them for rhythm. The photograph
   in the hero sits under one even shade (no gradient). Gold is type and
   rules only, so the buttons are white with navy words.
   ===================================================================== */
html.pal-b {
  --nav-plate: #111214;
  --ticker-ground: #111214;
  --ticker-ink: #ECEEF1;
}

/* hero: one even, neutral shade over the photograph */
html.pal-b .hb-veil { background: rgba(14, 15, 17, .62); }
@media (max-width: 1080px) { html.pal-b .hb-veil { background: rgba(14, 15, 17, .7); } }

/* buttons: white and navy; gold stays in the type */
html.pal-b .btn.solid { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; }
html.pal-b .btn.solid .ic { background: rgba(4, 38, 76, .1); }
html.pal-b .btn.solid:hover { background: #E8EAED; }
html.pal-b .top nav a.in { background: #FFFFFF; color: var(--navy); }
html.pal-b .top nav a.in:hover { background: #E8EAED; }
html.pal-b .thumb a { background: #FFFFFF; color: var(--navy); }

/* the school day: a near-black band */
html.pal-b .day { background: #111214; }
html.pal-b .day .head h2 { color: #FFFFFF; }
html.pal-b .day .head p { color: #B3B9C2; }
html.pal-b .day .clock { color: #A9AFB8; }
html.pal-b .day .track { border-color: #2E3136; background: #1A1C1F; }
html.pal-b .day .slot.teach { background: #1A1C1F; border-color: #2E3136; }
html.pal-b .day .slot.teach span { color: #A9AFB8; }
html.pal-b .day .legend div { border-bottom-color: #2E3136; }
html.pal-b .day .legend b { color: var(--gold-light); }
html.pal-b .day .legend span { color: #C9CED6; }

/* portals on light grey, so white doors sit on something */
html.pal-b .portals { background: #F2F3F5; }
html.pal-b .reach { background: #FFFFFF; border: 1px solid #E1E4E8; }

/* footer: near-black */
html.pal-b footer { background: #111214; }

/* ---- Option A: the light hero ----------------------------------------
   White paper, navy type. The school's photograph is a plain panel on the
   right, in its own colour, behind the laptop (on a phone: behind the
   laptop, under the words). No scrim; nothing sits on it but the devices. */
html.pal-a .top { position: absolute; background: #FFFFFF; border-bottom: 1px solid #E1E4E8; padding: .8rem 0; }
html.pal-a .top .mark b { color: var(--navy); }
html.pal-a .top .mark b span { color: var(--brass-ink); }
html.pal-a .top nav { background: transparent; padding: 0; }
html.pal-a .top nav a { color: var(--navy); }
html.pal-a .top nav a:hover { color: var(--navy); background: #F2F3F5; }
html.pal-a .top nav a.in { background: var(--navy); color: #FFFFFF; }
html.pal-a .top nav a.in:hover { background: #0B3A6E; }

html.pal-a .hero { background: #FFFFFF; color: var(--ink); }
html.pal-a .hero-bg { left: 50%; top: 0; }
html.pal-a .hb-veil { display: none; }
html.pal-a .hero-brand span { color: var(--brass-ink); }
html.pal-a .hero h1 { color: var(--navy); }
html.pal-a .rot > span { color: var(--brass-ink); }
html.pal-a .hero .lede { color: #4D5867; }
html.pal-a .hero .lede b { color: var(--navy); }
html.pal-a .btn.solid { background: var(--navy); color: #FFFFFF; border-color: var(--navy); }
html.pal-a .btn.solid .ic { background: rgba(255, 255, 255, .16); }
html.pal-a .btn.solid:hover { background: #0B3A6E; }
html.pal-a .btn.ghost { color: var(--navy); border-color: #C9CED6; }
html.pal-a .btn.ghost:hover { border-color: var(--navy); background: #F2F3F5; }
html.pal-a .thumb { background: #FFFFFF; border-top: 1px solid #E1E4E8; }
html.pal-a .thumb a { background: var(--navy); color: #FFFFFF; }

html.pal-a .hero-foot { background: #FFFFFF; }
html.pal-a .counts { border-top-color: #E1E4E8; }
html.pal-a .counts .fig + .fig,
html.pal-a .counts .fig:nth-child(even) { border-left-color: #E1E4E8; }
html.pal-a .counts .fig:nth-child(n+3) { border-top-color: #E1E4E8; }
html.pal-a .fig .num { color: var(--navy); }
html.pal-a .fig small { color: #5E6672; }
html.pal-a .counts .note { color: #5E6672; }
html.pal-a .ticker { border-top: 1px solid #E1E4E8; }
html.pal-a .tk-run svg { fill: var(--gold); }

@media (max-width: 1080px) {
  html.pal-a .hero-bg { left: 0; top: 52%; }
}

/* the opening film, on paper: the photograph in its own colour under a
   plain white wash, navy words */
html.pal-a { --film-ground: #FFFFFF; }
html.pal-a .sf-body { color: var(--navy); }
html.pal-a .sf-shot { background-color: #FFFFFF; }
html.pal-a .sf-veil { background: rgba(255, 255, 255, .62); }
html.pal-a .sf-line.l3 span { color: var(--brass-ink); }
html.pal-a .sf-motto { color: var(--brass-ink); }
html.pal-a .sf-skip, html.pal-a .sf-sound { background: #FFFFFF; color: var(--navy); border-color: #C9CED6; }
html.pal-a .sf-skip:hover, html.pal-a .sf-sound:hover { background: #F2F3F5; border-color: var(--navy); }
html.pal-a .sf-sound.on { background: #E8EAED; border-color: var(--navy); }
html.pal-a .sf-reel { background: #E1E4E8; }
html.pal-a .sf-reel i { background: var(--navy); }

/* =====================================================================
   OPTION C: SCHOOL COLOURS (the default)
   The crest's navy and gold as flat, solid colour, and the school's own
   photograph in natural colour. The hero is split: a solid navy panel for
   the words, the photograph unshaded on the right behind the laptop. Below
   it the sections take turns: a pale crest-blue, solid navy, a cool pale
   gold, deep navy. Cards stay white. No gradients, glows or glass.
   ===================================================================== */
html.pal-c {
  --c-blue: #EAEFF6;     /* a pale tint of the crest navy */
  --c-gold: #F3EFDA;     /* a cool pale gold, not cream */
  --c-deep: #021A38;     /* deeper flat navy */
  --line: #D8DFE8;
  --nav-plate: transparent;
  --ticker-ground: var(--gold);
  --ticker-ink: var(--navy);
  --film-ground: var(--navy);
}

/* masthead: a solid navy bar */
html.pal-c .top { background: var(--navy); border-bottom: 1px solid rgba(255, 255, 255, .12); padding: .8rem 0; }
html.pal-c .top .mark b { color: #FFFFFF; }
html.pal-c .top nav { padding: 0; }
html.pal-c .top nav a { color: #E3E7ED; }
html.pal-c .top nav a:hover { color: #FFFFFF; background: rgba(255, 255, 255, .1); }
html.pal-c .top nav a.in { background: var(--gold); color: var(--navy); }
html.pal-c .top nav a.in:hover { background: var(--gold-light); }

/* hero: solid navy for the words, the photograph bare on the right */
html.pal-c .hero { background: var(--navy); }
html.pal-c .hero-bg { left: 50%; top: 0; }
html.pal-c .hb-veil { display: none; }
html.pal-c .hero h1 { color: #FFFFFF; }
html.pal-c .rot > span { color: var(--gold-light); }
html.pal-c .hero .lede { color: #D5DBE4; }
html.pal-c .btn.solid { background: var(--gold); color: var(--navy); border-color: var(--gold); }
html.pal-c .btn.solid .ic { background: rgba(4, 38, 76, .12); }
html.pal-c .btn.ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, .4); }
html.pal-c .thumb { background: var(--navy); }
html.pal-c .thumb a { color: var(--navy); }
@media (max-width: 1080px) { html.pal-c .hero-bg { left: 0; top: 52%; } }

/* the figures on a deeper navy, gold numbers; the ticker a gold band */
html.pal-c .hero-foot { background: var(--c-deep); }
html.pal-c .counts { border-top: 0; }
html.pal-c .tk-run svg { fill: var(--navy); }

/* sections, in turn */
html.pal-c body { background: var(--c-blue); }
html.pal-c .offices { background: var(--c-blue); }
html.pal-c .day { background: var(--c-gold); }
html.pal-c .day .track { border-color: #DCD5B4; }
html.pal-c .day .legend div { border-bottom-color: #DCD5B4; }
html.pal-c .taught { background: var(--c-deep); }
html.pal-c .taught .head h2, html.pal-c .taught .level h3 { color: #FFFFFF; }
html.pal-c .taught .head p, html.pal-c .taught .level p { color: #C9D0DA; }
html.pal-c .taught .level { border-top-color: var(--gold); }
html.pal-c .taught .level .years { color: var(--gold-light); }
html.pal-c .taught .chip { border-color: #FFFFFF; }
html.pal-c .taught .chip.more { color: var(--gold-light); border-color: var(--gold-light); }
html.pal-c .portals { background: var(--c-blue); }
html.pal-c .reach { background: #FFFFFF; }
html.pal-c footer { background: var(--c-deep); }

/* the opening film: solid navy behind the school's photographs, which play
   at full strength in their own colour (no navy showing through them) */
html.pal-c .sf-veil { background: rgba(10, 12, 16, .42); }
html.pal-c .sf-shot { animation-name: sfc-shot; }
html.pal-c .sf-shot.s3 { animation-name: sfc-shot-last; }
@keyframes sfc-shot {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s0)); }
  24%, 76% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--x1), var(--y1)) scale(var(--s1)); }
}
@keyframes sfc-shot-last {
  0% { opacity: 0; transform: translate(var(--x0), var(--y0)) scale(var(--s0)); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: translate(var(--x1), var(--y1)) scale(var(--s1)); }
}