#ft_background {
background-image: url("../../img/organiser/74002502aea049f9a643a376c1ec6399/template/background.jpg");
}
#ft_headerLogo {
width: 135px;
height: 55px;
background-image: url("../../img/organiser/74002502aea049f9a643a376c1ec6399/template/logo_header.png");
background-repeat: no-repeat;
background-size: 135px 55px;
}
#ft_introLogo {
width: 300px;
height: 300px;
background-image: url("../../img/organiser/74002502aea049f9a643a376c1ec6399/template/logo_intro.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
@media print {
h1:before {
position: relative;
top: -50px;
margin-right: -65px;
content: url("../../img/organiser/74002502aea049f9a643a376c1ec6399/logo_header.png");
}
}
/* -- Custom CSS -- */
/* ============================================================================
* TYPEFACES
*
* The two faces the streaming app uses, so a customer moving from
* play.infinityenm.com to a booking page is not handed a different product.
* From onplay/app/src/app.css: Space Grotesk for headings (`--display`),
* Archivo for everything else (`--sans`).
*
* This replaces Work Sans, which nothing here references any more. Same
* delivery as before — the CSS Google Fonts serves, pasted in, because the
* organiser stylesheet is the only file we control on this host and it cannot
* add a to the page head.
*
* All three subsets, latin / latin-ext / vietnamese, and the last of those is
* not optional: the catalogue is Vietnamese-language titles, and NHÀ BÀ NỮ and
* CÔ DÂU HÀO MÔN have to come out of the same font as the row they sit in.
* ========================================================================== */
/* vietnamese */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 500;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 600;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLySOxK-vA.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLyTOxK-vA.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 700;
font-stretch: 100%;
font-display: swap;
src: url(https://fonts.gstatic.com/s/archivo/v25/k3kPo8UDI-1M0wlSV9XAw6lQkqWY8Q82sLydOxI.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb54C-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb54C-s0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPb94C-s0.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Space Grotesk';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/spacegrotesk/v22/V8mDoQDjQSkFtoMM3T6r8E7mPbF4Cw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ============================================================================
* PALETTE
*
* Lifted from OnPlay's `:root` (onplay/app/src/app.css) so the ticketing site,
* the streaming app and the gradient mark in the main site's logo all speak the
* same colour. Ferve's red came in with the VEOnline white-label and matched
* none of them.
*
* Three inks, one violet for anything you can click, and the brand gradient for
* the handful of moments worth spending it on: the primary button, the tile
* edges, the numbers. Prefixed `--ie-` so nothing Ferve or Bootstrap defines
* can collide with it.
*
* Four steps of dark rather than one. A page this sparse has almost nothing on
* it, so what stops it reading as a blank canvas is not more colour — it is
* having planes at all: page, then the sheet the content sits on, then a card
* on the sheet, then whatever is raised off the card. Each step is the one
* below it with a little more light and a little more violet in it, so they
* separate as depth rather than as four greys.
* ========================================================================== */
:root {
color-scheme: dark;
--ie-bg: #08070f; /* the page itself */
--ie-panel: #110f1e; /* the sheet the content sits on */
--ie-surface: #1b1930; /* a card on that sheet */
--ie-surface-2: #262240; /* raised off the card: inputs, hover, headers */
--ie-ink: #f4f2fa;
--ie-ink-mid: rgba(244, 242, 250, 0.62);
--ie-ink-dim: rgba(244, 242, 250, 0.38);
--ie-line: rgba(244, 242, 250, 0.10);
--ie-line-strong: rgba(244, 242, 250, 0.24);
/* The lit top edge that makes a dark plane look like a surface catching
light rather than a hole cut in the one behind it. */
--ie-sheen: inset 0 1px 0 rgba(255, 255, 255, 0.055);
/*
* The light card, and its ink. OnPlay's light theme, not an invented white
* — `--bg` / `--ink` / `--ink-mid` from the `[data-theme='light']` block of
* the same file the dark values come from. Used where a card is meant to
* read as a card cut out of the page rather than a slightly lighter part of
* it: the Account Main tiles, which are the whole of that page.
*/
--ie-card: #f7f5fc;
--ie-card-ink: #0e0c18;
--ie-card-ink-mid: rgba(14, 12, 24, 0.62);
--ie-card-line: rgba(14, 12, 24, 0.10);
--ie-accent: #8b5cf6;
--ie-accent-2: #e5117b;
--ie-accent-3: #22b8e8;
--ie-accent-ink: #0b0714;
/*
* `--ie-accent` is the brand violet and it is the right colour for a fill —
* a button, a bar, a focus ring. As *text* on a background this dark it is
* only about 3.9:1, which is under the 4.5 a link or a heading needs and
* reads exactly as reported: dark, and not separating from the page. This
* is the same hue two steps up (violet-400), at 7.1:1. Anywhere the accent
* is set on type rather than behind it, it is this one.
*/
--ie-accent-text: #a78bfa;
--ie-grad: linear-gradient(103deg, #c026d3 0%, #8b5cf6 45%, #3b82f6 78%, #22b8e8 100%);
}
/* DO NOT ALLOW EXCHANGE TO OTHER SESSIONS */
#ft_exchangeManual {
display: none
}
body, #ft_container {
font-family: 'Archivo', 'Manrope', system-ui, -apple-system, sans-serif !important;
}
/*
* The page is dark, and it stays dark — the light comes from two places that
* are deliberately not the same.
*
* Here, on `body` and `fixed`: a slow wash keyed to the viewport rather than to
* the document, so a two-screen booking list gets the same light as a
* one-screen dashboard instead of scrolling out of its own lighting and going
* dead flat at the bottom. It never gets bright enough to be a colour; it is
* there so no part of the page is the same value as any other part.
*
* The colour you actually notice is on `#ft_mainContent` further down, which
* scrolls, and is anchored to the top of the content where the eye starts.
*
* `html body`, not `body`. This stylesheet is loaded BEFORE Bootstrap in the
* page head, so a bare element selector loses every tie — Bootstrap's own
* `body { color: #333; background-color: #fff }` would win and the page would
* come up white. Same reason the `a` and `hr` rules below are written the way
* they are. (It is also why `.table-striped` needs its `!important`.)
*/
html body {
background:
radial-gradient(1100px 680px at 4% 6%, rgba(192, 38, 211, 0.13), transparent 60%),
radial-gradient(900px 560px at 98% 14%, rgba(34, 184, 232, 0.10), transparent 58%),
radial-gradient(1200px 760px at 50% 106%, rgba(139, 92, 246, 0.14), transparent 62%),
var(--ie-bg);
background-attachment: fixed;
background-repeat: no-repeat;
color: var(--ie-ink);
/* Every page here is light-on-dark, which thickens stems and closes
counters. Greyscale smoothing is what keeps the face at the weight it was
drawn at. Both of these are on `html, body` in the streaming app too. */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/*
* Ferve sets 14px/normal on the panel and leaves line-height to the browser, so
* body copy ran at about 1.15 — fine for a form label, too tight for the
* synopsis, the restrictions list or a wrapped booking title. 15/1.55 is the
* step the streaming app uses for the same kind of copy.
*/
.ft_panelWhite, .ft_panelGrey {
font-size: 15px;
line-height: 1.55;
}
/*
* Headings, on the streaming app's terms: Space Grotesk at 700 with the
* tracking pulled in and the leading closed up, which is the `h1, h2, h3` rule
* from onplay/app/src/app.css verbatim.
*
* `!important` on the family because ferve.css declares
* `h1 { font-family: "Muli" !important }` as well as on body, so without it
* every page heading stayed Muli while its own body copy changed underneath.
* Same reason `#ft_eventTitle` names the font again further down.
*
* And a colour, which they did not have: a heading was whatever it inherited,
* which on the pages where that was the accent violet came out at about 3.9:1
* — dark, and not far enough off the background. Light by default; where a
* heading is meant to carry the brand instead, it takes `--ie-accent-text` or
* the cyan, both of which clear 7:1.
*/
h1, h2, h3 {
font-family: 'Space Grotesk', 'Archivo', system-ui, sans-serif !important;
font-weight: 700;
letter-spacing: -0.032em;
line-height: 1.05;
color: var(--ie-ink);
text-wrap: balance;
}
/*
* Link colour, and the one rule in this file that has never actually worked:
* it was a bare `a` at (0,0,1), and Bootstrap — which loads after this sheet —
* carries `a { color: #337ab7 }` at the same weight. Every link on the site has
* been Bootstrap blue this whole time, not the colour named here.
*
* Scoped to the content panels rather than fixed with a bare `a:link`. Ferve
* colours its own links white where they sit on something coloured — the
* Browse Program tile, the footer, the account tiles — all at (0,1,1), and a
* global `a:link` is also (0,1,1) and would win on order and turn those
* violet-on-blue. Inside a panel there is nothing but page background, so this
* is where a link should take the brand colour and nowhere else.
*/
.ft_panelWhite a:link, .ft_panelWhite a:visited,
.ft_accountContent a:link, .ft_accountContent a:visited,
.ft_accountPlayDetail a:link, .ft_accountPlayDetail a:visited {
color: var(--ie-accent-text);
text-decoration: none;
}
.ft_panelWhite a:hover,
.ft_accountContent a:hover,
.ft_accountPlayDetail a:hover {
color: var(--ie-accent-3);
text-decoration: none;
}
#ft_logo {
pointer-events: none; /* don't allow clicking on the logo */
}
/*
* The panel is a surface again. It was transparent, which let the wash run
* edge to edge behind everything — and with nothing under the content, three
* tiles and a heading had nothing to sit on and read as objects floating in a
* void. A dark sheet is still dark; it just has an edge.
*/
.ft_panelWhite,
#ft_checkoutRight {
color: var(--ie-ink) !important;
background: var(--ie-panel) !important;
}
/*
* On an account page that panel is also `.ft_panelContent` — one element,
* capped at 1115px and centred — so it is the sheet the whole page sits on and
* it gets treated as one: an edge, a corner radius, a lit top edge, and a
* shadow deep enough to separate it from a background this dark.
*
* account.css also puts `overflow: hidden` on this panel. It used to be
* harmless — nothing overflowed — but the per-row actions menu on the booking
* and ticket tables (Receipt / Exchange Tickets / Watch) opens downwards from
* its row, and from the last row it has to hang past the panel's bottom edge;
* the clip cut it off, and on an account with a single booking that row *is*
* the last row, which left the customer with no reachable Watch at all. The
* tiles clip themselves and the tables round their own corner cells (both
* below), so nothing needs the panel to clip for it any more. `!important`
* because account.css reaches the panel through a chain of `:not(#id)`s whose
* specificity no plain selector can match.
*/
body[id^="ft_account"] .ft_panelWhite.ft_panelContent,
body[id^="ft_browse"] .ft_panelWhite.ft_panelContent,
body[id^="ft_browse"] .ft_panelWhite.ft_panelItems {
border: 1px solid var(--ie-line);
border-radius: 16px;
box-shadow:
0 30px 70px rgba(0, 0, 0, 0.55),
var(--ie-sheen);
min-height: calc(100vh - 260px);
margin-bottom: 70px !important;
}
body[id^="ft_account"] .ft_panelWhite.ft_panelContent {
overflow: visible !important;
}
/* Full width at Ferve's own bottom breakpoint, where a floating sheet with
corners would be a 16px radius against the edge of the screen. */
@media (max-width: 736px) {
body[id^="ft_account"] .ft_panelWhite.ft_panelContent,
body[id^="ft_browse"] .ft_panelWhite.ft_panelContent,
body[id^="ft_browse"] .ft_panelWhite.ft_panelItems {
border-left: 0;
border-right: 0;
border-radius: 0;
margin-bottom: 0 !important;
}
}
/*
* Ferve's login form puts `col-md-offset-3` and `col-md-12` on the same div —
* a 25% margin plus a 100% width, which is 125% of its row and hangs 70px off
* the right of every desktop viewport. It is Ferve's markup and it does this on
* the live site too; it is one line to stop the page scrolling sideways.
*/
@media (min-width: 992px) {
.ft_loginForm .col-md-offset-3.col-md-12 {
width: 75%;
}
}
/*
* Ferve gives the heading a white bar the full width of the panel, which on a
* dark page was a white bar.
*
* `!important` on the size because ferve.css carries a bare
* `h1 { font-size: 28px !important }`, which no amount of specificity gets
* past — the clamp here has been inert since it was written, and every page
* title has come out 28px regardless of window width.
*
* px and vw rather than rem: Ferve sets `html { font-size: 10px }`, so a value
* in rem is five eighths of what it reads as, and `1.35rem + 1vw` came out at
* 28px on a 1440 window — the same size it was replacing.
*/
body[id^="ft_account"] h1,
body[id^="ft_browse"] h1 {
background: none;
font-size: clamp(27px, 20px + 1.25vw, 40px) !important;
letter-spacing: -0.032em;
}
/*
* A short gradient rule under the page title — the section mark the streaming
* app puts above its rails. On pages this sparse it is the one thing standing
* between a heading and a very short list. Not on `#ft_eventTitle`: a film
* title already has a synopsis and a Play button under it.
*/
body[id^="ft_account"] h1:not(#ft_eventTitle)::after {
content: '';
display: block;
width: 54px;
height: 3px;
margin-top: 14px;
border-radius: 2px;
background: var(--ie-grad);
}
/* HEADERS */
/*
* A solid black bar. `#ft_header` is a fixed overlay across the top of every
* page — `.ft_v2` gives it `background-color: #ffffff`, which is a white band
* across the top of a dark site. This was a scrim that faded out by its own
* bottom edge; a bar it is fixed over scrolling content either way, and solid
* black keeps the icons and cart legible over anything that passes under it.
*
* `background`, not `background-color`: the shorthand is what resets Ferve's.
*/
#ft_header {
background: #000000 !important;
box-shadow: none !important;
padding: 0px !important;
}
/*
* The icons are dark PNGs, so they have to be inverted. This filter used to sit
* on `#ft_navigation` itself, which inverted everything inside it — including
* the cart total, which is why that came out light. Scoped to the glyphs, so
* text in the header can be given a colour rather than an inversion of one.
*/
#ft_menuToggle [class*="fticon-"],
#ft_navigation [class*="fticon-"],
.fticon-menu {
filter: invert(1) brightness(2) !important;
}
/*
* And the cart total and account name, which `.ft_v2` sets to #000000 for the
* white header it expects. Ferve reaches them at (0,3,2,1) — three ids and two
* classes — so this has to name the same chain to get near it; at a tie this
* sheet wins on order. Nothing shorter than this touches them.
*/
.ft_v2 header #ft_header #ft_shoppingControls .ft_shoppingItem #ft_cart,
.ft_v2 header #ft_header #ft_shoppingControls .ft_shoppingItem #ft_account,
.ft_v2 header #ft_header.ft_scrolled #ft_shoppingControls .ft_shoppingItem #ft_cart,
.ft_v2 header #ft_header.ft_scrolled #ft_shoppingControls .ft_shoppingItem #ft_account {
color: var(--ie-ink);
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
#ft_logo {
padding-top: 20px !important;
margin-left: 35px !important;
}
#ft_eventDetailsCenter {
padding-top: 20px !important;
}
/* COLORS */
#ft_ferveFooter,
footer,
.ft_progress-container-small,
.ft_eventStatus, .fticon-location {
display: none !important;
}
/*
* The colour, and the only place on the page that gets a real dose of it.
*
* On the content rather than on `body`, so it scrolls: it is anchored to the
* top of the page where the eye starts and where the header scrim fades out,
* and it runs out about a screen down. Magenta in from the left, cyan from the
* right, the two ends of the brand gradient — the same light OnPlay gets for
* free from a hero still, on pages that have no still to give it.
*/
#ft_mainContent {
background:
radial-gradient(1000px 460px at 14% -60px, rgba(192, 38, 211, 0.30), transparent 62%),
radial-gradient(880px 420px at 88% -20px, rgba(34, 184, 232, 0.20), transparent 60%),
linear-gradient(180deg, rgba(139, 92, 246, 0.16) 0%, rgba(139, 92, 246, 0) 560px);
background-repeat: no-repeat;
}
#ft_timer {
background: var(--ie-surface-2);
color: var(--ie-ink);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
font-variant-numeric: tabular-nums;
text-align: center;
padding: 6px 0;
box-shadow: inset 0 -1px 0 var(--ie-line);
}
input {
max-width: 100%;
color: var(--ie-ink) !important;
}
/* ferve.css names the font again on this one, `!important`, so the `h1, h2, h3`
rule above cannot reach it. */
#ft_eventTitle {
font-family: 'Space Grotesk', 'Archivo', system-ui, sans-serif !important;
font-weight: 700;
}
/* A subhead, one step under a page title and well over body copy — it was
16px/600, which at 15px body was barely a heading at all. */
h2 {
background: none !important;
font-size: 19px;
}
#ft_checkout_account h2 {
margin-left: 0 !important;
}
.form-control,
.ft_loginForm input {
background-color: var(--ie-surface-2) !important;
color: var(--ie-ink);
border: 1px solid var(--ie-line-strong) !important;
border-radius: 8px;
box-shadow: none;
transition: border-color .2s ease, box-shadow .2s ease;
}
/*
* Bootstrap's focus state is a blue glow it draws with `box-shadow`, which on
* this palette was the one piece of #66afe9 left in the product. A field you
* are typing in is worth more than a border colour, so it takes a ring as well
* — and the ring is what carries it for anyone who cannot see the hue change.
*/
.form-control:focus,
.ft_loginForm input:focus {
border-color: var(--ie-accent) !important;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.28);
outline: none;
}
.form-control::placeholder,
.ft_loginForm input::placeholder {
color: var(--ie-ink-dim);
}
/*
* Ferve flags a required field with a 45° corner triangle in coral — the last
* of the old red left on a form. Its JS writes that gradient as an inline
* style, so `!important` is the only way to reach it; the position and size
* come from the same inline style and are left alone.
*/
.form-control:required,
.ft_loginForm input:required {
background-image: linear-gradient(45deg, transparent calc(50% - 1px), var(--ie-accent-2) 50%) !important;
}
.ft_eventType {
display: none !important
}
/* The three cards a checkout is made of. Same surface, same radius, same lit
top edge as every other card on the site. */
#ft_bookingSummary,
#ft_paymentMethod-content,
#ft_bookingItems .ft_fcItem {
background-color: var(--ie-surface) !important;
border: none;
border-radius: 12px !important;
box-shadow: var(--ie-sheen), 0 0 0 1px var(--ie-line);
}
#ft_paymentMethod-content {
padding: 12px 16px;
}
.ft_bookingSummaryCurrency,
.ft_bookingSummaryVoucher {
display: none/*Prices are displayed in AUD*/
}
/* Cyan rather than the violet: violet is what you can click on this site, and
a total is not a link. */
.ft_bookingSummaryTotal .ft_bookingSummaryLineRight {
color: var(--ie-accent-3)
}
.ft_bookingSummaryLine {
padding-top: 5px;
padding-bottom: 5px;
}
.ft_bookingSummaryLineLeft {
width: 70%;
text-align: left;
}
.ft_bookingSummaryLineRight {
width: 30%;
text-align: right;
}
#ft_paymentCard-new-card {
background-color: inherit !important;
border: 0;
border-radius: 4px;
}
#ft_paymentCard-new {
display: none
}
.ft_help-input-lock span {
width: 10px
}
#ft_contactNumberType {
display: none
}
#ft_contactNumber {
margin-left: 15px;
}
#ft_checkout-questions label,
#ft_checkout-processing,
#ft_voucher p,
.ft_passwordMessage,
#ft_checkout_emailLists label {
font-weight: 400;
color: var(--ie-ink-mid);
}
#ft_voucher p,
#ft_checkout_emailLists label,
#ft_checkout-authorisation label {
font-size: 12px;
}
#ft_voucher .list-group-item {
border: 1px solid var(--ie-line);
border-radius: 10px;
box-sizing: border-box;
line-height: 1.5;
color: var(--ie-ink);
background: var(--ie-surface);
box-shadow: var(--ie-sheen);
}
#ft_voucher u {
color: var(--ie-ink) !important;
text-decoration: none;
}
@media (min-width: 768px) {
#ft_voucher .col-sm-3,
#ft_checkout-questions .col-md-8 {
width: unset;
}
}
#ft_checkout-questions img {
display: none
}
#ft_checkout_emailLists .form-control-static {
display: none
}
#ft_voucher > p {
margin-top: 0
}
/*
* The primary button is where the brand gradient is worth spending: it is the
* one element on a checkout or a login that anyone is looking for, and it is
* the same shape the streaming app uses for Play. Near-black label rather than
* white, because white over the violet end of the gradient is only about 3.4:1
* and this text is 14px — `--ie-accent-ink` is what the palette carries the
* colour with, and it clears 7:1 across the whole sweep.
*
* The gradient is oversized and slides on hover, so the button has somewhere to
* go without changing colour.
*/
#ft_checkoutApplyButton-code,
#ft_confirmBooking,
#ft_checkoutDoneButton,
button.btn-primary,
.ft_loginForm-guest button {
border: 0;
border-radius: 6px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
white-space: nowrap;
text-transform: uppercase;
text-decoration: none;
color: var(--ie-accent-ink);
background-image: var(--ie-grad);
background-size: 160% 100%;
background-position: 0% 0;
transition: background-position .45s ease, box-shadow .3s, opacity .4s;
display: block;
box-sizing: border-box;
text-align: center;
font-size: 14px;
width: 100% !important;
}
#ft_checkoutApplyButton-code:hover,
#ft_confirmBooking:hover,
#ft_checkoutDoneButton:hover,
button.btn-primary:hover,
.ft_loginForm-guest button:hover {
background-position: 100% 0;
box-shadow: 0 6px 22px rgba(139, 92, 246, 0.35);
color: var(--ie-accent-ink);
}
.ft_login-single .ft_loginForm-submit-button,
.ft_loginForm-guest {
overflow: visible;
margin-top: 0px;
}
#ft_checkoutDoneButton {
padding: 5px
}
#ft_checkoutApplyButton-code,
#ft_confirmBooking {
padding: 16px 24px;
margin-top: 16px;
}
/* ****************************** BROWSE LISTINGS (cards + list) ****************************** */
/*
* The filter bar above every listing: an #eee block with white controls, and
* the last light thing left on the site once the grid below it went dark.
*
* It was left alone until now because it is not a colour change. Ferve draws
* the select caret and the search magnifier as dark PNGs set as
* `background-image` on the control itself — so the moment the control goes
* dark the glyph disappears into it, and it cannot be inverted with a filter
* either, because the filter would take the label with it. They are replaced
* below with inline SVG in the ink colour: same two shapes, drawn light, and no
* new asset to host.
*/
#ft_browseOptions {
background: rgba(244, 242, 250, 0.03);
border: 1px solid var(--ie-line);
border-radius: 12px;
padding: 16px 16px 18px;
}
#ft_browseOptions a {
color: var(--ie-ink-mid);
}
#ft_browseOptions a:hover {
color: var(--ie-ink);
}
#ft_browseOptions .ft_selected {
color: var(--ie-accent-text);
}
#ft_browseOptions hr {
border-top-color: var(--ie-line);
}
.ft_menuBox,
.ft_textBox {
border: 1px solid var(--ie-line-strong);
border-radius: 8px;
background: var(--ie-surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M3 5 6.5 8.5 10 5' fill='none' stroke='%23f4f2fa' stroke-opacity='.62' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 8px center no-repeat;
color: var(--ie-ink);
transition: border-color .2s ease;
}
.ft_menuBox:hover,
.ft_textBox:hover {
border-color: var(--ie-line-strong);
}
/* Ferve sets this one `!important`, for a white control. */
.ft_menuBox a {
color: var(--ie-ink) !important;
}
/* The search field has no caret — it has the magnifier, on the input rather
than on the box, and the box behind it must not draw one too. */
.ft_textBox {
background-image: none;
}
.ft_textBox input {
background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 15 15'%3E%3Ccircle cx='6.3' cy='6.3' r='4.3' fill='none' stroke='%23f4f2fa' stroke-opacity='.62' stroke-width='1.5'/%3E%3Cpath d='M9.5 9.5 13 13' stroke='%23f4f2fa' stroke-opacity='.62' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") left center no-repeat;
color: var(--ie-ink);
}
.ft_textBox input::placeholder {
color: var(--ie-ink-dim);
}
/* Bootstrap's unscoped placeholder rule is #666, which is the same value as
this page's background. */
::-webkit-input-placeholder {
color: var(--ie-ink-dim);
}
#ft_callouts {
border-bottom-color: var(--ie-line);
}
/*
* The listing grid was never carried into the dark theme. `.ft_gray` is a
* #f1f1f1 band, every card inside it is #fff, and `.ft_panelWhite` around them
* sets `color: white !important` — so any card text outside the card's own
* was white on white. On Demand and Browse Program both opened as a light panel
* dropped into a dark page.
*
* `background: none` rather than a colour: the same class also wraps the home
* page's "Browse Program" strip, and letting both inherit means one rule covers
* a listing panel and a landing strip without either naming a colour.
*/
.ft_gray {
background: none;
}
/*
* `.ft_panelGrey` is the strip that holds it, still on Ferve's #f1f1f1 — the
* last light block on the site once the listings went dark, and it was sitting
* on the landing page.
*/
.ft_panelGrey {
background: none;
color: var(--ie-ink);
}
/*
* And the button inside it, still Ferve's stock #338cb9. `background-color`
* only: the document glyph beside the label is the shorthand's image layer and
* has to survive.
*/
.ft_buttonProgram {
background-color: var(--ie-surface-2);
border: 1px solid var(--ie-line);
border-radius: 6px;
transition: border-color .3s, background-color .3s, box-shadow .3s;
}
.ft_buttonProgram:hover {
background-color: var(--ie-surface-2);
border-color: var(--ie-accent);
box-shadow: 0 10px 28px rgba(139, 92, 246, 0.22);
text-decoration: none;
}
/*
* A ring rather than a border: a grid2 card is a fixed 300x176 with
* `overflow: hidden` around a 280px image in a 10px padding box, so a real
* border would take two pixels off the image and clip it.
*/
.ft_grid1 .ft_event,
.ft_grid2 .ft_event,
.ft_grid3 .ft_event,
.ft_grid4 .ft_event,
.ft_grid5 .ft_event {
background: var(--ie-surface);
border-radius: 6px;
box-shadow: 0 0 0 1px var(--ie-line);
transition: box-shadow .22s ease, transform .22s ease, background-color .22s;
}
/* Lifts and picks up the accent, so a listing behaves like something you browse
rather than a table of results. */
.ft_grid1 .ft_event:hover,
.ft_grid2 .ft_event:hover,
.ft_grid3 .ft_event:hover,
.ft_grid4 .ft_event:hover,
.ft_grid5 .ft_event:hover {
background-color: var(--ie-surface-2);
box-shadow:
0 0 0 1px var(--ie-accent),
0 12px 30px rgba(139, 92, 246, 0.22);
transform: translateY(-3px);
}
/*
* Behind the artwork rather than instead of it. Ferve's card markup carries an
* `onerror` that hides the , so a title with no image left a hole in the
* card; it now leaves a gradient tile, which is what the streaming app shows
* for a title it has no poster for.
*/
.ft_grid1 .ft_event .ft_image,
.ft_grid2 .ft_event .ft_image,
.ft_grid3 .ft_event .ft_image,
.ft_grid4 .ft_event .ft_image,
.ft_grid5 .ft_event .ft_image {
background-image: var(--ie-grad);
border-radius: 3px;
overflow: hidden;
}
/* Ferve's card link colour is #404040, for a white card. */
.ft_grid1 .ft_event a,
.ft_grid2 .ft_event a,
.ft_grid3 .ft_event a,
.ft_grid4 .ft_event a,
.ft_grid5 .ft_event a,
.ft_list .ft_event a {
color: var(--ie-ink);
}
/* The title is the line you are scanning for; everything beside it is context
and reads dimmer, the same as the reference numbers in the booking table. */
.ft_event .ft_title {
color: var(--ie-ink);
font-size: 14px;
font-weight: 600;
letter-spacing: -0.005em;
line-height: 1.35;
}
.ft_event .ft_venue,
.ft_event .ft_date,
.ft_event .ft_runtime,
.ft_event .ft_code {
font-size: 12px;
letter-spacing: 0.01em;
}
.ft_event .ft_venue,
.ft_event .ft_date,
.ft_event .ft_runtime,
.ft_event .ft_description,
.ft_event .ft_code {
color: var(--ie-ink-mid);
}
/*
* The "Selling Fast" flag, which this file has hidden site-wide since before
* the rebrand — but it hides `.ft_eventStatus`, and a browse card wraps the
* same icon in `.ft_status` instead. So every card carried an unexplained
* orange dot in its bottom right corner: the one part of a feature that is
* switched off everywhere else.
*/
.ft_event .ft_status {
display: none;
}
/* List view — reachable from the grid/list toggle on every listing page. */
.ft_list .ft_event {
border-bottom-color: var(--ie-line);
}
.ft_list h3 {
color: var(--ie-ink);
}
/* *************************************** ACCOUNT VIEW *************************************** */
/* These sit inside the sheet, so they take its colour rather than another one:
the sheet is the plane, and a plane wants one value across it. */
.ft_accountMain, .ft_accountContent, #ft_headerFixed {
background: transparent !important;
}
#ft_accountNavigation {
display: none !important;
}
/*
* ...but Ferve still reserves the 160px column that navigation used to sit
* in, on every account page, so the content sat an eighth of the window
* off-centre with nothing in the gap — and below about 900px the reserved
* strip squeezed the tables until `.ft_panelContent`'s `overflow:hidden`
* clipped their last column off the screen. `.ft_panelContent` already
* centres on a 1115px cap, so there is nothing to replace it with.
*/
.ft_accountContent, .ft_accountMain {
margin-left: 0;
margin-right: 0;
padding: 30px 34px 44px;
}
.ft_details, .ft_today, .ft_wishlist, .ft_passes {
display: none;
}
/* ── Account Main: the dashboard tiles ── */
/*
* Ferve ships these as flood-filled cards, a gradient each, and this file used
* to swap the gradients for three flat colours — orange, pink, magenta. Three
* saturated blocks were the only thing on the page, and none of the three was a
* brand colour.
*
* The colour moves to a 3px bar across the top and to the 72px number, both
* drawn from the brand gradient at a different point along its sweep so the
* tiles still tell themselves apart. `.ft_accountBox` is already
* `position: relative` and `overflow: hidden` in account.css, which is what
* lets the bar be a pseudo-element and follow the corner radius.
*
* And the card is light. Account Main is three tiles and a heading, and against
* the sheet a dark card on a dark panel is a difference of a few points of
* luminance — the tiles were there, but they were not objects. Cut out of the
* page in the streaming app's own light-theme ink, they are the page.
*
* No border: at this contrast an edge is drawn by the value change itself, and
* a line would only muddy it. The lift comes from the shadow, and the sheen
* (which is a white inset highlight) comes off, because there is nothing for a
* white highlight to do on white.
*/
.ft_accountBox {
height: 185px;
background: var(--ie-card);
border: 0;
color: var(--ie-card-ink);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
transition: transform .22s ease, box-shadow .22s ease;
}
.ft_accountBox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--ie-grad);
}
.ft_accountBox:hover {
transform: translateY(-3px);
box-shadow: 0 20px 44px rgba(139, 92, 246, 0.35);
}
/* Magenta end of the sweep. */
.ft_bookings::before {
background: linear-gradient(90deg, #e5117b 0%, #c026d3 100%);
}
/* Middle. */
.ft_vouchers::before {
background: linear-gradient(90deg, #c026d3 0%, #8b5cf6 100%);
}
/* Cyan end. */
.ft_cards::before {
background: linear-gradient(90deg, #3b82f6 0%, #22b8e8 100%);
}
/*
* The number takes the same gradient, clipped to the glyphs — the mechanism
* OnPlay uses for its gradient text. `color: transparent` is the fallback if a
* browser ignores the clip, so the digit is invisible rather than wrong; every
* browser Ferve supports has had `background-clip: text` for years.
*
* The three below are not the same three as the bars above them. A bar is a
* fill and can be as bright as it likes; a number is type, and the cyan end of
* the sweep comes to about 2:1 on a card this light. Each number takes the dark
* half of its own bar instead, which holds the tiles apart and still clears the
* 3:1 that display-size type needs.
*/
.ft_accountBoxNumber {
background-image: var(--ie-grad);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
font-variant-numeric: tabular-nums;
letter-spacing: -0.045em;
line-height: 1;
top: 8px;
}
.ft_bookings .ft_accountBoxNumber {
background-image: linear-gradient(135deg, #e5117b 0%, #c026d3 100%);
}
.ft_vouchers .ft_accountBoxNumber {
background-image: linear-gradient(135deg, #c026d3 0%, #7c3aed 100%);
}
.ft_cards .ft_accountBoxNumber {
background-image: linear-gradient(135deg, #2563eb 0%, #0284c7 100%);
}
/*
* Everything written on the tile, now that the tile is light. `.ft_panelWhite`
* sets `color: var(--ie-ink) !important` on the sheet, so anything that does
* not name a colour here inherits near-white and disappears; the card sets its
* own ink and each of these takes a step off it.
*
* `:link` on the link rules to match the weight of the panel link rule near the
* top of this file, which is otherwise more specific than a bare
* `.ft_accountBox a` and would win.
*/
.ft_accountBox a:link, .ft_accountBox a:visited {
color: var(--ie-card-ink-mid);
}
.ft_accountBox a:hover {
color: var(--ie-card-ink);
}
/* The two at the foot of a tile are its actions, not its small print. */
.ft_accountBoxFooterLeft a:link, .ft_accountBoxFooterLeft a:visited,
.ft_accountBoxFooterRight a:link, .ft_accountBoxFooterRight a:visited {
color: var(--ie-card-ink);
font-weight: 600;
}
.ft_accountBoxFooterLeft a:hover,
.ft_accountBoxFooterRight a:hover {
color: var(--ie-accent);
}
/*
* The tile heading is the label, not the content — the number is the content —
* so it stays a small uppercase mark rather than a heading, and it takes the
* tile's own colour so the label and the bar above it say the same thing.
* Overrides the global `h1, h2, h3` colour, which is set for a dark page.
*/
.ft_accountBox h3 {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.10em;
line-height: 1.2;
text-transform: uppercase;
color: var(--ie-card-ink-mid);
}
.ft_bookings h3 { color: #c026d3; }
.ft_vouchers h3 { color: #7c3aed; }
.ft_cards h3 { color: #2563eb; }
/* An empty tile is saying nothing happened, so it should not say it in the
same voice as the tile that has something to report. */
.ft_accountBox > span {
color: var(--ie-card-ink-mid);
}
.ft_vouchers .ft_accountBoxItem {
background: none !important;
}
/* The zebra inside a tile's item list is #f6f7f9 — near enough to the card
colour to keep, as an overlay so it tracks whatever the card is. */
.ft_accountBoxItem:nth-child(even) {
background: rgba(14, 12, 24, 0.05);
}
/* ── Account tables: bookings, tickets ── */
.table-striped>tbody>tr:nth-of-type(odd) {
background-color: var(--ie-surface) !important;
}
/*
* On the account tables the stripe moves from the row to its cells: the table
* no longer clips its children to the radius (see the actions-menu note on the
* `.table` rule below), and a `