/*
Theme Name: Glowflare Horror Festival
Author: Glowflare Limited
Author URI: https://glowflare.com/
Description: Website design system for Glowflare Horror Film Festival.
Version: 1.0
*/
/*
CSS ORGANISATION
01. Global
Theme colours, sizing tokens, reset, typography and shared utilities.
02. Header
Reserved for the final shared website header.
03. Main
03.01 Cards and containers
03.02 Statistics
03.03 Editorial and programming layouts
03.04 Text treatments
03.05 Explore navigation
03.06 Hero
03.07 Sections and background surfaces
03.08 Shared page elements
03.09 About components
03.10 Highlight components
03.11 Feature panels
03.12 Archive navigation
03.13 Information components
03.14 Mission components
03.15 Team components
03.16 Timeline components
03.17 Venue components
03.18 Media layouts
03.19 Image cards
03.20 Panels
03.21 Demonstration components
03.22 Festival data
03.23 Metadata
03.24 Results and awards
03.25 Tables
03.26 Programme components
03.27 Flexible card grids
03.28 Universal card colours
03.29 Explore Festival grid
03.30 Unified borders
03.31 Submission Guide
03.32 Film Categories
03.33 Rules & Submission Information
04. Films
Reserved for future film-page components.
05. Policies
Reserved for future policy-page components.
06. Footer
Reserved for the final shared website footer.
Search for the numbered heading to move directly to a component group.
*/
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------ Global ---------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
Theme colour tokens
Change --gf-accent to update the main highlight colour across the website.
The remaining neutral colours can also be adjusted here without changing
individual components.
*/
:root {
--gf-black: #000000;
--gf-white: #ffffff;
--gf-offwhite: #f7f7f5;
--gf-light: #ececec;
--gf-grey: #535353;
--gf-charcoal: #353535;
--gf-accent: #fe0000;
--gf-frame: 940px;
--gf-radius: 15px;
--gf-gap: 14px;
}
*, *::before, *::after {
box-sizing: border-box;
}
img, svg, video, iframe {
display: block;
max-width: 100%;
}
button, input, select, textarea {
font: inherit;
}
a {
color: var(--gf-accent);
text-decoration: none;
}
a:hover, a:focus-visible {
text-decoration: underline;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
}
h1, h2, h3, h4, h5, h6, strong {
font-weight: 800;
}
table {
border-collapse: separate;
border-spacing: 0;
}
/* =========================================================
ELEMENTS
========================================================= */
a {
color: inherit;
text-decoration: none;
}
a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
a:focus-visible {
text-decoration: underline;
text-underline-offset: 4px;
outline: 3px solid var(--gf-accent);
outline-offset: 4px;
}
a[data-film-link=""] {
cursor: pointer;
}
a[data-film-link=""]::after {
content: "";
}
/* =========================================================
SITE
========================================================= */
.site-frame {
max-width: none;
border-radius: 0;
border: 0;
width: 100%;
margin: 0 auto;
overflow: hidden;
background: var(--gf-charcoal);
}
@media (min-width: 769px) {
.site-frame {
max-width: var(--gf-max);
border-radius: var(--gf-radius);
}
}
/* =========================================================
SKIP
========================================================= */
.skip-link {
position: absolute;
left: -999px;
top: 12px;
z-index: 1000;
padding: 10px 14px;
color: #fff;
background: #000;
border-radius: 8px;
}
.skip-link:focus {
left: 12px;
}
/* =========================================================
BUTTON
========================================================= */
.button {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
padding: 10px 15px;
color: var(--gf-white);
background: var(--gf-charcoal);
border: 0;
border-radius: 15px;
font-size: 15px;
font-weight: 700;
}
.button:hover {
color: var(--gf-white);
background: var(--gf-grey);
text-decoration: none;
}
.button:focus-visible {
color: var(--gf-white);
background: var(--gf-grey);
text-decoration: none;
}
.button-accent {
background: var(--gf-accent);
}
.button-light {
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.16);
}
.button-light:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.button-light:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.button-row {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.button-outline {
color: var(--gf-charcoal);
background: transparent;
border: 2px solid var(--gf-charcoal);
}
.button-primary {
color: var(--gf-white);
background: var(--gf-accent);
}
.button-secondary {
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.18);
}
/* =========================================================
LAYOUT
========================================================= */
/* =========================================================
PRESET
========================================================= */
/* =========================================================
DISPLAY
========================================================= */
.display-title {
margin: 0;
font-size: clamp(34px,5vw,52px);
line-height: 1.06;
}
/* =========================================================
LEAD
========================================================= */
.lead-copy {
max-width: 780px;
margin: 0;
font-size: 18px;
line-height: 1.72;
}
/* =========================================================
SMALL
========================================================= */
.small-copy {
font-size: 14px;
line-height: 1.6;
}
/* =========================================================
QUOTE
========================================================= */
/* =========================================================
USER PREFERENCES
========================================================= */
@media (prefers-reduced-motion:reduce) {
html {
scroll-behavior: auto;
}
*, *::before, *::after {
transition: none !important;
animation: none !important;
}
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------ Header ---------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/* Header styles will be added here later. */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------- Main ----------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
Everything between the shared header and footer belongs here.
Use the available section, layout, card and component variations as a website blueprint.
*/
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.01 Main: Cards and Containers ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.card {
min-width: 0;
padding: 20px;
color: var(--gf-charcoal);
background: var(--gf-white);
border-radius: 14px;
border: 1px solid rgba(53,53,53,.12);
border-top: 0 !important;
}
.card h3 {
margin: 0 0 8px;
font-size: 19px;
line-height: 1.25;
color: var(--gf-accent);
}
.card p {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.6;
}
.card h3::after {
content: none;
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.02 Main: Statistics Layouts ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.stats-panel {
padding: 0;
background: transparent;
border: 0;
border-radius: 0;
}
.stats-heading {
max-width: none;
margin-bottom: 20px;
width: 100%;
}
.stats-heading .section-heading {
margin-bottom: 8px;
}
.stats-heading h2 {
margin: 0 0 8px;
font-size: clamp(23px,3vw,32px);
width: 100%;
max-width: none;
text-wrap: wrap;
}
.stats-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
background: transparent;
border: 0;
border-radius: 0;
overflow: visible;
}
.stats-grid .stat {
align-items: center;
justify-content: center;
text-align: center;
}
.stats-grid .stat strong {
width: 100%;
margin-bottom: 11px;
font-size: clamp(42px,5vw,58px);
line-height: 1;
text-align: center;
display: block;
color: var(--gf-accent) !important;
font-weight: 900;
position: relative;
z-index: 2;
}
.stats-grid .stat span {
width: 100%;
max-width: 170px;
margin: 0 auto;
font-size: 15px;
line-height: 1.35;
text-align: center;
text-transform: capitalize;
}
@media (min-width: 521px) {
.stats-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 769px) {
.stats-grid {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.02 Main: Individual Statistics ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.stat {
position: relative;
display: flex;
min-height: 125px;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
overflow: hidden;
padding: 22px 20px;
text-align: left;
color: var(--gf-white);
background: var(--gf-grey);
border: 0;
border-radius: 15px;
isolation: isolate;
}
.stat::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: linear-gradient( 180deg,rgba(53,53,53,.08) 0%,rgba(53,53,53,.42) 46%,rgba(53,53,53,.96) 100% );
}
.stat strong {
display: block;
margin-bottom: 10px;
color: var(--gf-white);
font-size: 36px;
line-height: 1;
}
.stat span {
display: block;
max-width: 150px;
color: var(--gf-white);
font-size: 14px;
font-weight: 700;
line-height: 1.35;
}
@media (min-width: 521px) {
.stat {
min-height: 170px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.03 Main: Editorial and Programming ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.programming-feature {
overflow: hidden;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: 0;
border-top: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
}
.programming-top {
display: grid;
grid-template-columns: 1fr;
min-height: 390px;
padding-bottom: 24px;
}
.programming-content {
padding: 24px 24px 0;
color: var(--gf-white);
background: linear-gradient(135deg,rgba(53,53,53,1),rgba(32,32,32,1));
}
.programming-content .section-heading {
margin-bottom: 12px;
}
.programming-content h2 {
max-width: 540px;
margin: 0 0 20px;
font-size: clamp(27px,3.6vw,39px);
line-height: 1.12;
}
.programming-content p {
margin: 0 0 16px;
color: #f1f1f1;
font-size: 16px;
line-height: 1.7;
}
.programming-visual {
position: relative;
min-height: 280px;
overflow: hidden;
margin: 24px 24px 0;
background: var(--gf-grey);
border-radius: 15px;
}
.programming-visual img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.programming-visual::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg,rgba(32,32,32,.72) 0%,rgba(32,32,32,.08) 38%),linear-gradient(180deg,rgba(0,0,0,.03),rgba(0,0,0,.28));
pointer-events: none;
}
.programming-footer {
display: grid;
grid-template-columns: auto 1fr;
gap: 16px;
align-items: center;
margin: 0;
padding: 18px 24px 24px;
color: #fff;
background: var(--gf-grey);
border-radius: 15px;
}
.programming-info {
display: flex;
width: 42px;
height: 40px;
align-items: center;
justify-content: center;
color: #fff;
border: 2px solid var(--gf-accent);
border-radius: 50%;
font-weight: 900;
}
.programming-footer p {
margin: 0;
color: #fff;
font-size: 14px;
line-height: 1.55;
}
.programming-footer .button {
white-space: nowrap;
background: var(--gf-accent);
grid-column: 1 / -1;
width: 100%;
}
.programming-footer .button:hover {
background: #d90000;
}
.programming-footer .button:focus-visible {
background: #d90000;
}
.programming-text-section {
padding: 28px 24px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-top: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
}
@media (min-width: 481px) {
.programming-info {
width: 40px;
}
}
@media (min-width: 621px) {
.programming-top {
padding-bottom: 34px;
}
.programming-content {
padding: 34px 34px 0;
}
.programming-visual {
min-height: 300px;
margin: 34px 34px 0 0;
}
.programming-footer {
grid-template-columns: auto 1fr auto;
padding: 18px 34px 34px;
}
.programming-footer .button {
grid-column: revert;
width: revert;
}
}
@media (min-width: 761px) {
.programming-text-section {
padding: 34px;
}
}
@media (min-width: 861px) {
.programming-top {
grid-template-columns: minmax(0,1.03fr) minmax(300px,.97fr);
}
.programming-visual {
min-height: 330px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.04 Main: Text Treatments ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.text-main {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
}
.text-heading .section-heading {
margin-bottom: 10px;
}
.text-heading h2 {
max-width: none;
margin: 0;
color: var(--gf-white);
font-size: clamp(25px,3.2vw,34px);
line-height: 1.16;
width: 100%;
text-wrap: wrap;
}
.text-content p {
margin: 0 0 17px;
color: #f2f2f2;
font-size: 16px;
line-height: 1.72;
}
.text-content p:last-child {
margin-bottom: 0;
}
.text-footer {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: center;
margin-top: 28px;
padding: 18px;
color: var(--gf-white);
background: var(--gf-grey);
border: 1px solid rgba(255,255,255,.1);
border-radius: 15px;
}
.text-footer p {
margin: 0;
color: var(--gf-white);
font-size: 14px;
line-height: 1.55;
}
.text-footer .button {
white-space: nowrap;
background: var(--gf-accent);
grid-column: 1 / -1;
width: 100%;
}
.text-footer .button:hover {
background: #d90000;
}
.text-footer .button:focus-visible {
background: #d90000;
}
.text-heading {
width: 100%;
max-width: none;
}
@media (min-width: 481px) {
.text-footer {
grid-template-columns: auto minmax(0,1fr);
}
}
@media (min-width: 761px) {
.text-main {
grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr);
gap: 34px;
}
.text-footer {
grid-template-columns: auto minmax(0,1fr) auto;
}
.text-footer .button {
grid-column: revert;
width: revert;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.05 Main: Explore Navigation ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.explore-intro {
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: 100%;
padding: 26px;
color: var(--gf-white);
background: var(--gf-accent);
border-radius: 14px;
width: 100%;
max-width: none;
border-top: 0;
}
.explore-intro h2 {
margin-bottom: 12px;
width: 100%;
max-width: none;
color: var(--gf-white);
}
.explore-card {
display: flex;
min-height: 138px;
flex-direction: column;
justify-content: space-between;
gap: 18px;
padding: 20px;
color: var(--gf-charcoal);
background: var(--gf-white);
border-radius: 14px;
border: 1px solid rgba(53,53,53,.12);
text-decoration: none;
border-top: 0 !important;
}
.explore-card-top {
display: block;
}
.explore-card-wide {
grid-column: auto;
min-height: 120px;
}
.explore-intro .section-heading {
color: var(--gf-white) !important;
font-weight: 900;
}
.explore-intro p {
margin: 0;
color: var(--gf-white);
line-height: 1.65;
}
.explore-card h3 {
margin: 0;
font-size: 19px;
line-height: 1.25;
color: var(--gf-accent);
}
.explore-card p {
margin: 0;
color: #555;
font-size: 14px;
line-height: 1.55;
}
.explore-card:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
text-decoration: none;
}
.explore-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
text-decoration: none;
}
.explore-intro h2::after {
content: none !important;
background: var(--gf-white);
display: none !important;
}
@media (min-width: 521px) {
.explore-card-wide {
grid-column: 1 / -1;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.06 Main: Hero ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.hero {
grid-template-columns: 1fr;
padding: 0;
display: block;
color: var(--gf-white);
background: var(--gf-grey);
border: 0;
}
.hero-content h1 {
font-size: 36px;
width: 100%;
max-width: none;
margin: 0 0 18px;
color: var(--gf-accent);
line-height: 1.05;
text-align: center;
text-wrap: wrap;
display: block;
}
.hero-content {
width: 100%;
max-width: none;
padding: 44px 24px;
text-align: center;
background: var(--gf-grey);
border: 0;
border-radius: 0;
margin: 0;
color: var(--gf-white);
}
.hero-content p {
width: 100%;
max-width: 760px;
margin: 0 auto;
color: var(--gf-white);
font-size: clamp(17px,2vw,20px);
line-height: 1.7;
text-align: center;
text-wrap: wrap;
display: block;
}
@media (min-width: 769px) {
.hero {
grid-template-columns: revert;
}
.hero-content h1 {
font-size: clamp(40px,6vw,64px);
}
.hero-content {
padding: 64px 34px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.07 Main: Sections and Surfaces ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.section {
padding: 28px 24px;
}
.section > h2 {
width: 100%;
max-width: none;
}
.section > .section-heading {
width: 100%;
max-width: none;
}
.section .about-glowflare-heading {
width: 100%;
max-width: none;
}
.section .about-glowflare-heading h2 {
width: 100%;
max-width: none;
}
.section h2 {
max-width: none;
width: 100%;
text-wrap: wrap;
margin: 0 0 14px;
font-size: clamp(24px,3.2vw,34px);
line-height: 1.16;
position: relative;
padding-bottom: 0;
}
.section-charcoal h2 {
max-width: none;
width: 100%;
font-size: clamp(23px,3vw,32px);
text-wrap: wrap;
}
.section-heading {
width: 100%;
max-width: none;
margin: 0 0 18px;
color: var(--gf-accent);
font-size: 13px;
letter-spacing: .09em;
text-transform: uppercase;
font-weight: 900;
margin-bottom: 12px;
line-height: 1.3;
}
.section-grey + .section-charcoal {
border-top: 1px solid rgba(255,255,255,.2);
}
.section-charcoal + .section-grey {
border-top: 1px solid rgba(255,255,255,.2);
}
.section > p {
max-width: 790px;
margin: 0 0 14px;
line-height: 1.7;
}
.section-white {
color: var(--gf-charcoal);
background: #f7f7f5;
}
.section + .section {
border-top: 1px solid rgba(53,53,53,.12);
}
.section-surface {
position: relative;
overflow: hidden;
}
.section-surface-offwhite {
color: var(--gf-charcoal);
background: #f7f7f5;
}
.section-surface-light {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-surface-dark {
color: var(--gf-white);
background: var(--gf-grey);
}
.section-surface-charcoal {
color: var(--gf-white);
background: var(--gf-charcoal);
}
.section-surface-accent {
color: var(--gf-white);
background: var(--gf-accent);
}
.section-surface-dark p {
color: #f3f3f3;
}
.section-surface-charcoal p {
color: #f3f3f3;
}
.section-surface-accent p {
color: #f3f3f3;
}
.section-surface-accent .section-heading {
color: var(--gf-white) !important;
font-weight: 900;
}
.section-light {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-grey {
color: var(--gf-white);
background: var(--gf-grey);
}
.section-charcoal {
color: var(--gf-white);
background: var(--gf-charcoal);
}
.section-accent {
color: var(--gf-white);
background: var(--gf-accent);
}
.section-surface-dark .explore-card {
color: var(--gf-charcoal);
background: var(--gf-white);
border-color: rgba(53,53,53,.12);
}
.section-surface-charcoal .explore-card {
color: var(--gf-charcoal);
background: var(--gf-white);
border-color: rgba(53,53,53,.12);
}
.section-surface-accent .explore-card {
color: var(--gf-charcoal);
background: var(--gf-white);
border-color: rgba(53,53,53,.12);
}
.section-grey .explore-card {
color: var(--gf-charcoal);
background: var(--gf-white);
border-color: rgba(53,53,53,.12);
}
.section-charcoal .explore-card {
color: var(--gf-charcoal);
background: var(--gf-white);
border-color: rgba(53,53,53,.12);
}
.section-accent .explore-card {
color: var(--gf-charcoal);
background: var(--gf-white);
border-color: rgba(53,53,53,.12);
}
.section-surface-dark .explore-card h3 {
color: var(--gf-charcoal);
}
.section-surface-charcoal .explore-card h3 {
color: var(--gf-charcoal);
}
.section-surface-accent .explore-card h3 {
color: var(--gf-charcoal);
}
.section-grey .explore-card h3 {
color: var(--gf-charcoal);
}
.section-charcoal .explore-card h3 {
color: var(--gf-charcoal);
}
.section-accent .explore-card h3 {
color: var(--gf-charcoal);
}
.section-surface-dark .explore-card p {
color: #666;
}
.section-surface-charcoal .explore-card p {
color: #666;
}
.section-surface-accent .explore-card p {
color: #666;
}
.section-grey .explore-card p {
color: #666;
}
.section-charcoal .explore-card p {
color: #666;
}
.section-accent .explore-card p {
color: #666;
}
.section-surface-dark .explore-card:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-surface-dark .explore-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-surface-charcoal .explore-card:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-surface-charcoal .explore-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-surface-accent .explore-card:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-surface-accent .explore-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-grey .explore-card:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-grey .explore-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-charcoal .explore-card:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-charcoal .explore-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-accent .explore-card:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-accent .explore-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.section-grey .card p {
color: #555;
}
.section-charcoal .card p {
color: #555;
}
.section-accent .card p {
color: #555;
}
.section-surface-dark .card p {
color: #555;
}
.section-surface-charcoal .card p {
color: #555;
}
.section-surface-accent .card p {
color: #555;
}
.section-grey .highlight-card p {
color: #555;
}
.section-charcoal .highlight-card p {
color: #555;
}
.section-accent .highlight-card p {
color: #555;
}
.section-surface-dark .highlight-card p {
color: #555;
}
.section-surface-charcoal .highlight-card p {
color: #555;
}
.section-surface-accent .highlight-card p {
color: #555;
}
.section-grey .workflow-card p {
color: #555;
}
.section-charcoal .workflow-card p {
color: #555;
}
.section-accent .workflow-card p {
color: #555;
}
.section-surface-dark .workflow-card p {
color: #555;
}
.section-surface-charcoal .workflow-card p {
color: #555;
}
.section-surface-accent .workflow-card p {
color: #555;
}
.section h2::after {
content: none !important;
display: none !important;
width: 58px;
height: 4px;
margin-top: 14px;
background: var(--gf-accent);
border-radius: 999px;
}
.section-surface-accent h2 {
color: var(--gf-white);
}
.section-accent h2 {
color: var(--gf-white);
}
.section-surface-accent h2::after {
background: var(--gf-white);
content: none !important;
display: none !important;
}
.section-accent h2::after {
background: var(--gf-white);
content: none !important;
display: none !important;
}
.section-surface-offwhite p {
color: #555;
}
.section-surface-light p {
color: #555;
}
.section-surface-dark > p {
color: #f3f3f3;
}
.section-surface-charcoal > p {
color: #f3f3f3;
}
.section-surface-accent > p {
color: #f3f3f3;
}
.section-surface-accent > .section-heading {
color: var(--gf-white);
font-weight: 900;
}
.section-accent > .section-heading {
color: var(--gf-white);
font-weight: 900;
}
.section-surface-dark .button-outline {
color: var(--gf-white);
border-color: var(--gf-white);
}
.section-surface-charcoal .button-outline {
color: var(--gf-white);
border-color: var(--gf-white);
}
.section-surface-accent .button-outline {
color: var(--gf-white);
border-color: var(--gf-white);
}
.section-surface-offwhite .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-surface-light .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-surface-dark .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-surface-charcoal .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-white .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-light .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-grey .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-charcoal .section-heading {
color: var(--gf-accent) !important;
font-weight: 900;
}
.section-accent .section-heading {
color: var(--gf-white) !important;
font-weight: 900;
}
.section-surface-white {
color: var(--gf-charcoal);
background: var(--gf-white);
}
@media (min-width: 769px) {
.section {
padding: 32px 34px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.08 Main: Shared Page Elements ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.next-step {
grid-template-columns: 1fr;
gap: 12px;
display: grid;
align-items: stretch;
}
.highlight-card span {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.highlight-card {
display: flex;
min-height: 220px;
height: 100%;
flex-direction: column;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
border-top: 0 !important;
}
.highlight-card h3 {
margin: 0 0 10px;
font-size: 20px;
line-height: 1.25;
color: var(--gf-accent);
}
.highlight-card p {
margin: 0;
color: #555;
line-height: 1.62;
}
.editorial-heading {
width: 100%;
max-width: none;
margin: 0 0 22px;
}
.editorial-heading h2 {
width: 100%;
max-width: none;
margin: 0;
text-wrap: wrap;
}
.editorial-copy {
width: 100%;
max-width: 850px;
}
.editorial-copy p {
max-width: none;
margin: 0 0 16px;
line-height: 1.72;
}
.editorial-copy p:last-child {
margin-bottom: 0;
}
.value-card {
display: flex;
min-height: 205px;
height: 100%;
flex-direction: column;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
}
.value-card h3 {
margin: 0 0 10px;
font-size: 20px;
line-height: 1.25;
}
.value-card p {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.62;
}
.visit-card {
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
}
.visit-card h3 {
margin: 0 0 9px;
font-size: 20px;
}
.visit-card p {
margin: 0;
color: #555;
line-height: 1.65;
}
.deadline-card {
padding: 20px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
border-top: 0 !important;
}
.deadline-card h3 {
margin: 0 0 6px;
font-size: 19px;
color: var(--gf-accent);
}
.deadline-card .deadline-name {
display: block;
margin-bottom: 12px;
color: var(--gf-accent);
font-size: 13px;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
.deadline-card p {
color: #555;
}
.fee-list {
display: grid;
gap: 8px;
margin: 0;
}
.fee-row {
display: flex;
justify-content: space-between;
gap: 14px;
padding-top: 8px;
border-top: 1px solid rgba(53,53,53,.12);
font-size: 14px;
}
.fee-row strong {
color: var(--gf-charcoal);
}
.fee-row span {
color: #666;
}
.workflow-card {
min-height: 205px;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-light);
border-radius: 15px;
border-top: 0 !important;
border: 1px solid rgba(53,53,53,.12);
}
.workflow-stage {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.workflow-card h3 {
margin: 0 0 9px;
font-size: 20px;
color: var(--gf-accent);
}
.workflow-card p {
margin: 0;
color: #555;
line-height: 1.62;
}
.current-stage-note {
margin-top: 14px;
padding: 18px;
color: #fff;
background: #353535;
border-radius: 15px;
}
.current-stage-note p {
margin: 0;
color: #fff;
}
.awards-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.awards-grid .workflow-card {
min-height: 220px;
}
.swatch-grid {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
}
.swatch {
min-height: 110px;
padding: 16px;
border-radius: 15px;
border: 1px solid rgba(53,53,53,.12);
}
.swatch strong {
display: block;
margin-bottom: 6px;
}
.swatch-offwhite {
background: #f7f7f5;
color: var(--gf-charcoal);
}
.swatch-light {
background: var(--gf-light);
color: var(--gf-charcoal);
}
.swatch-dark {
background: var(--gf-grey);
color: var(--gf-white);
}
.swatch-charcoal {
background: var(--gf-charcoal);
color: var(--gf-white);
}
.swatch-accent {
background: var(--gf-accent);
color: var(--gf-white);
}
.showcase-block {
display: grid;
gap: 18px;
}
@media (min-width: 521px) {
.swatch-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 769px) {
.next-step {
grid-template-columns: minmax(0,.9fr) minmax(0,1.35fr);
gap: 18px;
}
}
@media (min-width: 761px) {
.swatch-grid {
grid-template-columns: repeat(5,minmax(0,1fr));
}
}
@media (min-width: 701px) {
.awards-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.09 Main: About Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.about-glowflare-section {
width: 100%;
}
.about-glowflare-heading h2 {
display: block;
width: 100%;
max-width: none;
margin: 0;
text-wrap: wrap;
}
.about-glowflare-copy {
width: 100%;
max-width: 850px;
}
.about-glowflare-copy p {
width: 100%;
max-width: none;
margin: 0 0 16px;
line-height: 1.72;
}
.about-glowflare-heading {
width: 100%;
max-width: none;
margin: 0 0 22px;
}
.about-glowflare-copy p:last-child {
margin-bottom: 0;
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.10 Main: Highlight Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.highlights-intro {
width: 100%;
max-width: 850px;
}
.highlights-intro p {
margin: 0 0 16px;
line-height: 1.72;
}
.highlights-band {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.highlights-band-item {
min-height: 155px;
padding: 20px;
color: var(--gf-white);
background: var(--gf-grey);
border-radius: 15px;
border-top: 0 !important;
}
.highlights-band-item h3 {
margin: 0 0 8px;
font-size: 18px;
color: var(--gf-accent);
}
.highlights-band-item p {
margin: 0;
color: #f2f2f2;
font-size: 14px;
line-height: 1.55;
}
@media (min-width: 561px) {
.highlights-band {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 821px) {
.highlights-band {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.11 Main: Feature Panels ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.feature-highlight {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: stretch;
}
.feature-main {
padding: 26px;
border-radius: 15px;
color: var(--gf-white);
background: var(--gf-charcoal);
}
.feature-side {
padding: 26px;
border-radius: 15px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
}
.feature-highlight span {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.feature-highlight h3 {
margin: 0 0 12px;
font-size: clamp(24px,3vw,34px);
line-height: 1.2;
}
.feature-highlight p {
margin: 0;
line-height: 1.7;
}
.feature-main p {
color: #f2f2f2;
}
@media (min-width: 821px) {
.feature-highlight {
grid-template-columns: minmax(0,1.15fr) minmax(260px,.85fr);
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.12 Main: Archive Navigation ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.archive-note {
padding: 22px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: 15px;
}
.archive-note p {
margin: 0;
line-height: 1.68;
color: var(--gf-white) !important;
}
.archive-status {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 18px auto 0;
padding: 9px 14px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: 999px;
font-size: 13px;
font-weight: 900;
letter-spacing: .05em;
text-transform: uppercase;
}
.archive-status::before {
content: "";
width: 9px;
height: 9px;
background: var(--gf-accent);
border-radius: 50%;
}
.archive-nav {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
align-items: stretch;
}
.archive-link {
display: flex;
min-height: 120px;
flex-direction: column;
justify-content: center;
padding: 20px;
border-radius: 15px;
color: var(--gf-charcoal);
background: var(--gf-white);
text-decoration: none;
}
.archive-current {
display: flex;
min-height: 120px;
flex-direction: column;
justify-content: center;
padding: 20px;
border-radius: 15px;
min-width: 170px;
align-items: center;
color: var(--gf-white);
background: var(--gf-charcoal);
text-align: center;
order: -1;
}
.archive-link:last-child {
text-align: left;
}
.archive-link span {
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.archive-current span {
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.archive-link strong {
margin-top: 6px;
font-size: 19px;
}
.archive-current strong {
margin-top: 6px;
font-size: 19px;
}
.archive-link:hover {
background: var(--gf-light);
text-decoration: none;
}
.archive-link:focus-visible {
background: var(--gf-light);
text-decoration: none;
}
@media (min-width: 621px) {
.archive-nav {
grid-template-columns: 1fr auto 1fr;
}
.archive-current {
order: revert;
}
.archive-link:last-child {
text-align: right;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.13 Main: Information Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.info-bar {
display: grid;
grid-template-columns: auto minmax(0,1fr);
gap: 16px;
align-items: center;
margin-top: 26px;
padding: 18px;
color: var(--gf-white);
background: var(--gf-grey);
border-radius: 15px;
}
.info-bar p {
margin: 0;
color: var(--gf-white);
font-size: 14px;
line-height: 1.55;
}
.info-icon {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
color: var(--gf-white);
border: 2px solid var(--gf-accent);
border-radius: 50%;
font-weight: 900;
}
.info-bar .button {
grid-column: 1 / -1;
width: 100%;
}
.info-card {
padding: 20px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
}
.info-card strong {
display: block;
margin-bottom: 6px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.info-card span {
display: block;
font-weight: 800;
line-height: 1.45;
}
@media (min-width: 769px) {
.info-bar {
grid-template-columns: auto minmax(0,1fr) auto;
}
.info-bar .button {
grid-column: revert;
width: revert;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.14 Main: Mission Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.mission-principles-grid {
grid-template-columns: 1fr;
}
.mission-principles-grid .value-card {
min-height: 190px;
}
@media (min-width: 641px) {
.mission-principles-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.15 Main: Team Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.team-intro {
width: 100%;
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.team-card {
display: flex;
min-width: 0;
height: 100%;
flex-direction: column;
overflow: hidden;
color: var(--gf-charcoal);
background: var(--gf-white);
border-radius: 15px;
border: 1px solid rgba(53,53,53,.12);
}
.team-image {
overflow: hidden;
background: var(--gf-light);
}
.team-image img {
display: block;
width: 100%;
height: 240px;
object-fit: cover;
object-position: center;
transition: transform .35s ease;
}
.team-card:hover .team-image img {
transform: scale(1.03);
}
.team-content {
display: flex;
flex: 1;
flex-direction: column;
padding: 20px;
text-align: center;
}
.team-content h3 {
margin: 0 0 7px;
font-size: 21px;
line-height: 1.25;
color: var(--gf-accent);
}
.team-role {
display: block;
margin-bottom: 11px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
.team-content p {
margin: 0;
color: #555;
font-size: 14px;
line-height: 1.62;
}
@media (min-width: 561px) {
.team-image img {
height: 280px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.16 Main: Timeline Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.timeline {
position: relative;
display: grid;
gap: 18px;
margin-top: 4px;
padding-left: 26px;
}
.timeline::before {
content: "";
position: absolute;
top: 8px;
bottom: 8px;
left: 8px;
width: 3px;
background: var(--gf-accent);
border-radius: 999px;
}
.timeline-item {
position: relative;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
}
.timeline-item::before {
content: "";
position: absolute;
top: 25px;
left: -25px;
width: 16px;
height: 16px;
background: var(--gf-accent);
border: 4px solid var(--gf-light);
border-radius: 50%;
}
.timeline-date {
display: block;
margin-bottom: 7px;
color: var(--gf-accent);
font-size: 13px;
font-weight: 900;
letter-spacing: .07em;
text-transform: uppercase;
}
.timeline-item h3 {
margin: 0 0 8px;
font-size: 21px;
line-height: 1.25;
}
.timeline-item p {
margin: 0;
color: #555;
line-height: 1.62;
}
.timeline-item-featured {
color: var(--gf-white);
background: var(--gf-charcoal);
border-color: rgba(255,255,255,.12);
}
.timeline-item-featured p {
color: #f3f3f3;
}
.timeline-note {
margin-top: 18px;
padding: 18px;
color: var(--gf-white);
background: var(--gf-grey);
border-radius: 15px;
line-height: 1.62;
}
.timeline-status {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin-top: 22px;
}
.timeline-step {
padding: 14px 10px;
background: #fff;
border: 1px solid rgba(53,53,53,.15);
border-radius: 12px;
text-align: center;
font-size: 12px;
font-weight: 800;
line-height: 1.35;
}
.timeline-step.is-complete {
background: #dedede;
}
.timeline-step.is-current {
color: #fff;
background: #fe0000;
border-color: #fe0000;
}
.timeline-step.is-current small {
display: block;
margin-top: 4px;
color: #fff;
font-size: 10px;
letter-spacing: .06em;
text-transform: uppercase;
}
.timeline-item-featured h3 {
color: var(--gf-accent);
}
@media (min-width: 521px) {
.timeline {
padding-left: 34px;
}
.timeline::before {
left: 11px;
}
.timeline-item::before {
left: -31px;
}
}
@media (min-width: 701px) {
.timeline-status {
grid-template-columns: repeat(5,minmax(0,1fr));
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.17 Main: Venue Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.venue-screen-intro {
width: 100%;
max-width: 760px;
margin: 0 0 22px;
color: #666;
font-size: 15px;
line-height: 1.65;
}
.venue-spec-grid .stat {
min-height: 188px;
align-items: center;
justify-content: center;
text-align: center;
background: var(--gf-grey);
}
.venue-spec-grid .stat::after {
display: none;
}
.venue-spec-grid .stat strong {
width: 100%;
margin-bottom: 12px;
font-size: clamp(30px,4vw,42px);
line-height: 1;
text-align: center;
}
.venue-spec-grid .stat span {
width: 100%;
max-width: 185px;
margin: 0 auto;
font-size: 14px;
line-height: 1.5;
text-align: center;
}
.venue-feature {
border-top: 0 !important;
display: grid;
grid-template-columns: 1fr;
gap: 14px;
align-items: stretch;
}
.venue-feature h3 {
color: var(--gf-accent);
}
.venue-image {
min-height: 300px;
border-radius: 15px;
overflow: hidden;
background: var(--gf-grey);
}
.venue-details {
min-height: 300px;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 32px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
}
.venue-image img {
display: block;
width: 100%;
height: 100%;
min-height: 300px;
object-fit: cover;
}
.venue-label {
display: block;
margin-bottom: 8px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.venue-details h3 {
margin: 0 0 14px;
color: var(--gf-charcoal);
font-size: clamp(25px,3vw,34px);
line-height: 1.2;
}
.venue-address {
margin: 0 0 16px;
color: #555;
font-style: normal;
font-weight: 800;
line-height: 1.6;
}
.venue-details p {
margin: 0 0 20px;
color: #555;
line-height: 1.7;
}
.venue-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.venue-image .media-placeholder {
height: 100%;
min-height: inherit;
border-radius: 0;
}
@media (min-width: 761px) {
.venue-feature {
grid-template-columns: minmax(260px,.9fr) minmax(0,1.1fr);
}
.venue-image {
min-height: 390px;
}
.venue-details {
min-height: 390px;
}
.venue-image img {
min-height: 390px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.18 Main: Media Layouts ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.media-feature {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
align-items: stretch;
}
.media-feature-content {
min-height: 350px;
border-radius: 15px;
display: flex;
flex-direction: column;
justify-content: center;
padding: 32px;
color: var(--gf-white);
background: var(--gf-charcoal);
}
.media-feature-image {
min-height: 350px;
border-radius: 15px;
overflow: hidden;
background: var(--gf-grey);
}
.media-feature-content h3 {
margin: 0 0 12px;
color: var(--gf-accent);
font-size: clamp(25px,3vw,36px);
line-height: 1.2;
}
.media-feature-content p {
margin: 0 0 15px;
color: #f3f3f3;
line-height: 1.7;
}
.media-feature-image img {
display: block;
width: 100%;
height: 100%;
min-height: 350px;
object-fit: cover;
}
.media-placeholder {
display: flex;
width: 100%;
min-height: 300px;
align-items: center;
justify-content: center;
padding: 24px;
color: var(--gf-white);
background: linear-gradient(135deg,rgba(254,0,0,.14),transparent 42%),var(--gf-grey);
border-radius: 15px;
text-align: center;
}
.media-placeholder span {
display: inline-flex;
min-height: 44px;
align-items: center;
justify-content: center;
padding: 10px 16px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: 999px;
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.media-feature-image .media-placeholder {
height: 100%;
min-height: inherit;
border-radius: 0;
}
@media (min-width: 821px) {
.media-feature {
grid-template-columns: minmax(0,1.15fr) minmax(250px,.85fr);
}
}
@media (min-width: 581px) {
.media-feature {
grid-template-columns: 1fr 1fr;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.19 Main: Image Cards ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.20 Main: Panels ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.21 Main: Demonstration Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.22 Main: Festival Data ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.festival-number {
display: flex;
min-height: 170px;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 24px 18px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
text-align: center;
}
.festival-number strong {
display: block;
margin-bottom: 11px;
color: var(--gf-accent) !important;
font-size: clamp(42px,5vw,58px);
font-weight: 900;
line-height: 1;
}
.festival-number span {
display: block;
max-width: 150px;
color: var(--gf-charcoal);
font-size: 14px;
font-weight: 800;
line-height: 1.35;
text-transform: uppercase;
letter-spacing: .05em;
width: 100%;
margin: 0 auto;
text-align: center;
}
.festival-numbers {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.festival-numbers-charcoal .festival-number {
color: var(--gf-white);
background: var(--gf-charcoal);
border-color: rgba(255,255,255,.14);
}
.festival-numbers-charcoal .festival-number span {
color: var(--gf-white);
}
.festival-number span .label-line {
display: block;
}
@media (min-width: 521px) {
.festival-numbers {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (min-width: 901px) {
.festival-numbers {
grid-template-columns: repeat(4,minmax(0,1fr));
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.23 Main: Metadata ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.meta-list {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 22px;
}
.meta-item {
display: inline-flex;
align-items: center;
min-height: 38px;
padding: 8px 13px;
color: var(--gf-charcoal);
background: var(--gf-white);
border-radius: 999px;
font-size: 13px;
font-weight: 800;
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.24 Main: Results and Awards ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.result-card {
padding: 18px 20px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
}
.result-label {
display: block;
margin-bottom: 6px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.result-card h3 {
margin: 0 0 7px;
color: var(--gf-charcoal);
font-size: 20px;
}
.result-card p {
margin: 0;
color: #555;
}
.result-card strong {
display: block;
color: var(--gf-charcoal);
font-size: 18px;
}
.result-card span {
display: block;
margin-top: 4px;
color: #666;
font-size: 14px;
}
.link-card {
display: flex;
min-height: 150px;
flex-direction: column;
justify-content: space-between;
padding: 21px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
text-decoration: none;
}
.link-label {
display: block;
margin-bottom: 8px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.link-card h3 {
margin: 0 0 8px;
color: var(--gf-charcoal);
font-size: 20px;
}
.link-card p {
margin: 0;
color: #555;
line-height: 1.6;
}
.link-card:hover {
background: var(--gf-light);
text-decoration: none;
}
.link-card:focus-visible {
background: var(--gf-light);
text-decoration: none;
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.25 Main: Tables ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.table-wrap {
width: 100%;
overflow-x: auto;
border-radius: 15px;
}
.table {
width: 100%;
min-width: 680px;
border-collapse: separate;
border-spacing: 0;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
overflow: hidden;
}
.table th {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid rgba(53,53,53,.12);
color: var(--gf-white);
background: var(--gf-charcoal);
font-size: 13px;
text-transform: uppercase;
letter-spacing: .05em;
}
.table td {
padding: 14px 16px;
text-align: left;
border-bottom: 1px solid rgba(53,53,53,.12);
}
.table tr:last-child td {
border-bottom: 0;
}
.film-link {
display: flex;
min-height: 150px;
flex-direction: column;
justify-content: space-between;
padding: 18px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
text-decoration: none;
}
.film-link[hidden] {
display: none;
}
.film-link h3 {
margin: 0 0 7px;
color: var(--gf-charcoal);
font-size: 19px;
}
.film-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 12px;
}
.film-tag {
padding: 5px 8px;
color: var(--gf-charcoal);
background: var(--gf-light);
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.film-action {
margin-top: 16px;
color: var(--gf-accent);
font-weight: 900;
}
.film-link:hover {
background: var(--gf-light);
text-decoration: none;
}
.film-link:focus-visible {
background: var(--gf-light);
text-decoration: none;
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.26 Main: Programme Components ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.27 Main: Flexible Card Grids ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.27 Main: Flexible Card Grids ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
The grid controls layout only. Card classes control appearance.
balanced-grid-2 = two cards on one desktop row
balanced-grid-3 = three cards on one desktop row
balanced-grid-4 = two-by-two desktop layout
balanced-grid-5 = three cards followed by two wider cards
balanced-grid-6 = three-by-two desktop layout
All versions use one column on phones and two columns on medium screens.
*/
.balanced-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gf-gap);
}
.balanced-grid > * {
min-width: 0;
height: 100%;
}
@media (min-width: 621px) {
.balanced-grid-2, .balanced-grid-3, .balanced-grid-4, .balanced-grid-5, .balanced-grid-6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 901px) {
.balanced-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.balanced-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.balanced-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.balanced-grid-5 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.balanced-grid-5 > :nth-child(-n/**/+3) {
grid-column: span 2;
}
.balanced-grid-5 > :nth-child(n/**/+4) {
grid-column: span 3;
}
.balanced-grid-6 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.28 Main: Universal Card Colours ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
Combine any established card style with colour-card and one surface class.
Examples:
...
...
...
The grid controls placement. The card class controls shape and spacing.
The colour class controls background and readable text colours.
*/
.colour-card {
--card-background: var(--gf-white);
--card-text: var(--gf-charcoal);
--card-muted: #555555;
--card-accent: var(--gf-accent);
color: var(--card-text);
background: var(--card-background);
border-color: rgba(53,53,53,.14);
}
.colour-card h2, .colour-card h3, .colour-card h4, .colour-card strong {
color: var(--card-text);
}
.colour-card p, .colour-card address, .colour-card li {
color: var(--card-muted);
}
.colour-card a {
color: var(--card-accent);
}
.colour-white {
--card-background: var(--gf-white);
--card-text: var(--gf-charcoal);
--card-muted: #555555;
--card-accent: var(--gf-accent);
}
.colour-offwhite {
--card-background: var(--gf-offwhite);
--card-text: var(--gf-charcoal);
--card-muted: #555555;
--card-accent: var(--gf-accent);
}
.colour-light {
--card-background: var(--gf-light);
--card-text: var(--gf-charcoal);
--card-muted: #555555;
--card-accent: var(--gf-accent);
}
.colour-dark {
--card-background: var(--gf-grey);
--card-text: var(--gf-white);
--card-muted: #eeeeee;
--card-accent: var(--gf-accent);
border-color: rgba(255,255,255,.16);
}
.colour-charcoal {
--card-background: var(--gf-charcoal);
--card-text: var(--gf-white);
--card-muted: #eeeeee;
--card-accent: var(--gf-accent);
border-color: rgba(255,255,255,.16);
}
.colour-accent {
--card-background: var(--gf-accent);
--card-text: var(--gf-white);
--card-muted: var(--gf-white);
--card-accent: var(--gf-white);
border-color: rgba(255,255,255,.24);
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.29 Main: Explore Festival Grid ----------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
This is the only card grid that keeps its own layout because it is a repeated
page-ending navigation component rather than a general content grid.
*/
.explore-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gf-gap);
}
.explore-card {
height: 100%;
}
@media (min-width: 701px) {
.explore-grid {
grid-template-columns: repeat(2, minmax(0,1fr));
}
.explore-card-wide {
grid-column: 1 / -1;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.30 Main: Unified Borders ----------------------------- */
/* ------------------------------------------------------------------------------------ */
:root {
--gf-border: rgba(53,53,53,.16);
--gf-border-light: rgba(255,255,255,.20);
--gf-border-width: 1px;
}
/*
All reusable cards receive the same complete 1px border.
Colour-card variants automatically choose the correct border contrast.
*/
.card, .highlight-card, .value-card, .team-card, .deadline-card, .result-card, .visit-card, .info-card, .link-card, .programme-card, .film-link, .explore-card, .archive-link, .archive-current, .media-feature-content, .venue-details, .feature-main, .feature-side, .info-bar, .timeline-item {
border: var(--gf-border-width) solid var(--gf-border);
}
/* Dark cards and panels use a lighter border for contrast. */
.colour-dark, .colour-charcoal, .colour-accent, .section-surface-dark .explore-card, .section-surface-charcoal .explore-card, .section-surface-accent .explore-card, .archive-current, .feature-main {
border-color: var(--gf-border-light);
}
/*
Buttons always have a complete border around every side.
The border is included in the button's dimensions through border-box sizing.
*/
.button, .button-accent, .button-light, .button-outline, .button-primary, .button-secondary {
border: var(--gf-border-width) solid transparent;
}
.button-accent, .button-primary {
border-color: var(--gf-accent);
}
.button-light, .button-secondary {
border-color: var(--gf-border);
}
.button-outline {
border-color: currentColor;
}
.button:hover, .button:focus-visible, .button-accent:hover, .button-accent:focus-visible, .button-light:hover, .button-light:focus-visible, .button-outline:hover, .button-outline:focus-visible, .button-primary:hover, .button-primary:focus-visible, .button-secondary:hover, .button-secondary:focus-visible {
border-width: var(--gf-border-width);
border-style: solid;
}
/* ------------------------------------------------------------------------------------ */
/*
Use one shared grid for groups of two to six cards.
Examples:
...
...
...
...
...
*/
@media (min-width: 621px) {
.balanced-grid-2, .balanced-grid-3, .balanced-grid-4, .balanced-grid-5, .balanced-grid-6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 901px) {
.balanced-grid-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.balanced-grid-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.balanced-grid-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.balanced-grid-5 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.balanced-grid-5 > :nth-child(-n/**/+3) {
grid-column: span 2;
}
.balanced-grid-5 > :nth-child(n/**/+4) {
grid-column: span 3;
}
.balanced-grid-6 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.programme-card {
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: 15px;
}
.programme-time {
display: block;
margin-bottom: 7px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.programme-card h3 {
margin: 0 0 8px;
color: var(--gf-charcoal);
}
.programme-card p {
margin: 0;
color: #555;
line-height: 1.6;
}
/* ------------------------------------- Films ---------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
Film-page components are reserved here for future implementation.
Suggested class names:
.film-page
.film-header
.film-details
.film-credits
.film-screenings
.film-links
*/
/* ------------------------------------------------------------------------------------ */
/* ----------------------------------- Policies --------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
Policy-page components are reserved here for future implementation.
Suggested class names:
.policy-page
.policy-header
.policy-content
.policy-section
.policy-updated
*/
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------ Footer ---------------------------------------- */
/* ------------------------------------------------------------------------------------ */
/* ==========================================================
Glowflare Horror Film Festival — Footer
========================================================== */
/* ---------- Footer foundations ---------- */
.footer {
width: 100%;
max-width: 940px;
margin: 0 auto;
overflow: hidden;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: 15px;
}
.footer a {
color: inherit;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
}
.footer a:hover,
.footer a:focus-visible {
color: var(--gf-accent);
text-decoration: underline;
text-underline-offset: 4px;
}
.footer ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer li + li {
margin-top: 8px;
}
.footer h3,
.footer h4,
.footer p {
margin-top: 0;
}
.footer .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
white-space: nowrap;
border: 0;
clip: rect(0, 0, 0, 0);
}
/* ---------- Hero ---------- */
.footer .identity {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(260px, 1fr);
gap: 28px;
align-items: center;
padding: 34px;
background: var(--gf-accent);
}
.footer .identity > div:first-child > .kicker {
display: none;
}
.footer .identity h3 {
max-width: 620px;
margin: 0 0 14px;
font-size: clamp(28px, 5vw, 46px);
line-height: 1.05;
}
.footer .identity > div:first-child > p {
max-width: 760px;
margin-bottom: 0;
line-height: 1.6;
text-wrap: balance;
}
.footer .newsletter {
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border-radius: 14px;
}
.footer .newsletter p {
line-height: 1.55;
}
.footer .newsletter a {
display: inline-block;
margin-top: 8px;
padding: 10px 15px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: 15px;
font-size: 15px;
font-weight: 700;
}
.footer .newsletter a:hover,
.footer .newsletter a:focus-visible {
color: var(--gf-white);
background: var(--gf-grey);
}
/* ---------- Full-width newsletter ---------- */
.footer .footer-newsletter {
padding: 28px 34px;
color: var(--gf-charcoal);
background: var(--gf-light);
border-top: 1px solid rgba(53, 53, 53, 0.12);
border-bottom: 1px solid rgba(53, 53, 53, 0.12);
}
.footer .footer-newsletter-inner {
width: 100%;
margin: 0 auto;
}
.footer .footer-newsletter-copy {
margin-bottom: 18px;
text-align: center;
}
.footer .footer-newsletter-copy h3 {
margin: 0 0 6px;
color: var(--gf-accent);
font-size: 22px;
line-height: 1.2;
letter-spacing: 0.02em;
text-transform: uppercase;
}
.footer .footer-newsletter-copy p {
margin: 0;
color: #555555;
font-size: 15px;
line-height: 1.5;
}
.footer .footer-newsletter-form {
display: grid;
grid-template-columns: 1fr 1fr 1.35fr auto;
gap: 10px;
align-items: stretch;
}
.footer .footer-newsletter-form input,
.footer .footer-newsletter-form button {
min-height: 46px;
border-radius: 15px;
font: inherit;
}
.footer .footer-newsletter-form input {
width: 100%;
min-width: 0;
padding: 0 14px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53, 53, 53, 0.15);
outline: none;
}
.footer .footer-newsletter-form input:focus {
border-color: var(--gf-accent);
}
.footer .footer-newsletter-form button {
padding: 0 22px;
color: var(--gf-white);
background: var(--gf-accent);
border: 1px solid var(--gf-accent);
font-size: 15px;
font-weight: 700;
cursor: pointer;
}
.footer .footer-newsletter-form button:hover,
.footer .footer-newsletter-form button:focus-visible {
filter: brightness(0.94);
}
.footer .footer-newsletter-consent {
margin: 12px 0 0;
color: #555555;
font-size: 12px;
line-height: 1.45;
text-align: center;
}
.footer .footer-newsletter-consent a {
color: var(--gf-charcoal);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---------- Directory ---------- */
.footer .directory {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 24px;
padding: 34px;
border-top: 1px solid rgba(255, 255, 255, 0.28);
}
.footer .kicker {
margin-bottom: 10px;
color: var(--gf-accent);
font-size: 13px;
letter-spacing: 0.09em;
text-transform: uppercase;
}
.footer .policies-mobile {
display: none;
}
/* ---------- Desktop policies ---------- */
.footer .policies-desktop {
display: flex;
flex-wrap: wrap;
gap: 12px 20px;
align-items: center;
justify-content: center;
padding: 18px 26px;
color: var(--gf-charcoal);
background: var(--gf-light);
border-top: 1px solid rgba(53, 53, 53, 0.12);
border-bottom: 1px solid rgba(53, 53, 53, 0.12);
text-align: center;
}
.footer .policies-desktop a {
color: var(--gf-charcoal);
}
.footer .policies-desktop a:last-child,
.footer .policies-mobile li:last-child a {
font-weight: 700;
}
/* ---------- Footer section headings ---------- */
.footer-section-heading {
margin: 0;
color: var(--gf-white);
font-size: 13px;
letter-spacing: 0.09em;
text-align: center;
text-transform: uppercase;
}
.footer .trust-heading {
padding: 24px 24px 0;
background: var(--gf-grey);
}
.footer .social-heading {
padding: 8px 24px 0;
background: var(--gf-grey);
}
/* ---------- Partner logos ---------- */
.footer .trust-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
align-items: center;
justify-content: center;
padding: 26px 34px 12px;
color: var(--gf-white);
background: var(--gf-grey);
}
.footer .trust-logo {
display: flex;
min-width: 0;
align-items: center;
justify-content: center;
padding: 0;
background: transparent;
border: 0;
}
.footer .trust-logo:hover,
.footer .trust-logo:focus-visible {
background: transparent;
text-decoration: none;
}
.footer .trust-logo img {
display: block;
width: auto;
height: auto;
max-width: 155px;
max-height: 56px;
object-fit: contain;
}
/* ---------- Legal and reCAPTCHA ---------- */
.footer .legal {
padding: 18px 24px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-top: 1px solid rgba(255, 255, 255, 0.28);
font-size: 13px;
line-height: 1.55;
text-align: center;
}
.footer .legal p {
margin: 0;
}
.footer .legal p + p {
margin-top: 0;
}
.footer .recaptcha {
padding: 18px 24px;
color: var(--gf-white);
background: var(--gf-grey);
border-top: 1px solid rgba(255, 255, 255, 0.28);
font-size: 13px;
line-height: 1.55;
text-align: center;
}
.footer .recaptcha-line {
display: block;
}
.footer .recaptcha a {
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.footer-page-gap {
display: none;
}
@media (min-width: 769px) {
.footer-page-gap {
display: block;
width: 100%;
height: 10px;
}
}
/* ==========================================================
Mobile and tablet
All responsive footer rules are kept together here.
========================================================== */
@media (max-width: 768px) {
body {
padding: 0;
}
.footer {
max-width: 100%;
margin: 0;
border-radius: 0;
}
.footer .identity {
grid-template-columns: 1fr;
padding: 28px 24px;
}
.footer .newsletter {
width: 100%;
}
.footer .footer-newsletter {
padding: 28px 24px;
}
.footer .footer-newsletter-copy,
.footer .footer-newsletter-consent {
text-align: left;
}
.footer .footer-newsletter-form {
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.footer .footer-newsletter-form input:nth-of-type(1) {
grid-column: 1;
}
.footer .footer-newsletter-form input:nth-of-type(2) {
grid-column: 2;
}
.footer .footer-newsletter-form input:nth-of-type(3),
.footer .footer-newsletter-form button {
grid-column: 1 / -1;
}
.footer .directory {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px 18px;
padding: 24px 20px;
}
.footer .policies-desktop {
display: none;
}
.footer .policies-mobile {
display: block;
}
.footer .trust-row {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 20px;
padding: 24px 20px 12px;
}
.footer .trust-logo:last-child {
grid-column: 1 / -1;
}
.footer .trust-logo img {
max-width: 135px;
max-height: 50px;
}
.footer .recaptcha {
padding: 16px 18px;
font-size: 12.5px;
line-height: 1.5;
}
}
/* Stack the newsletter name fields on very small screens. */
@media (max-width: 420px) {
.footer .footer-newsletter-form {
grid-template-columns: 1fr;
}
.footer .footer-newsletter-form input,
.footer .footer-newsletter-form button {
grid-column: 1;
}
}
.footer-preview {
padding-bottom: 32px;
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.31 Main: Submission Guide ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.submission-guide-nav {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
margin-top: 24px;
}
.submission-guide-nav a {
display: flex;
min-height: 54px;
align-items: center;
justify-content: center;
padding: 12px 14px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: var(--gf-border-width, 1px) solid var(--gf-border, rgba(53,53,53,.16));
border-radius: 15px;
font-size: 14px;
font-weight: 800;
line-height: 1.3;
text-align: center;
}
.submission-guide-nav a:hover,
.submission-guide-nav a:focus-visible {
color: var(--gf-white);
background: var(--gf-accent);
text-decoration: none;
}
.submission-guide-intro {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.submission-guide-intro .feature-main,
.submission-guide-intro .feature-side {
min-height: 100%;
}
.submission-guide-date-grid,
.submission-guide-card-grid,
.submission-guide-material-grid,
.submission-guide-process-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.submission-guide-date-card,
.submission-guide-topic-card,
.submission-guide-material-card,
.submission-guide-process-card {
min-width: 0;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: var(--gf-border-width, 1px) solid var(--gf-border, rgba(53,53,53,.14));
border-radius: 15px;
}
.submission-guide-date-card span,
.submission-guide-topic-card > span,
.submission-guide-material-card > span,
.submission-guide-process-card > span {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
line-height: 1.3;
text-transform: uppercase;
}
.submission-guide-date-card strong {
display: block;
margin-bottom: 7px;
color: var(--gf-charcoal);
font-size: 21px;
line-height: 1.25;
}
.submission-guide-date-card p,
.submission-guide-topic-card p,
.submission-guide-material-card p,
.submission-guide-process-card p {
margin: 0;
color: #555;
line-height: 1.65;
}
.submission-guide-topic-card h3,
.submission-guide-material-card h3,
.submission-guide-process-card h3 {
margin: 0 0 9px;
color: var(--gf-accent);
font-size: 20px;
line-height: 1.25;
}
.submission-guide-checklist {
display: grid;
gap: 10px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.submission-guide-checklist li {
position: relative;
margin: 0;
padding: 14px 16px 14px 46px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: var(--gf-border-width, 1px) solid var(--gf-border, rgba(53,53,53,.14));
border-radius: 12px;
line-height: 1.55;
}
.submission-guide-checklist li::before {
content: "✓";
position: absolute;
top: 13px;
left: 16px;
display: flex;
width: 22px;
height: 22px;
align-items: center;
justify-content: center;
color: var(--gf-white);
background: var(--gf-accent);
border-radius: 50%;
font-size: 13px;
font-weight: 900;
}
.submission-guide-fees {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.submission-guide-fees .deadline-card {
min-height: 100%;
}
.submission-guide-tbc {
color: #666;
font-style: italic;
}
.submission-guide-callout {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 16px;
align-items: center;
margin-top: 22px;
padding: 18px;
color: var(--gf-white);
background: var(--gf-charcoal);
border: var(--gf-border-width, 1px) solid var(--gf-border-light, rgba(255,255,255,.18));
border-radius: 15px;
}
.submission-guide-callout .info-icon {
flex: 0 0 auto;
}
.submission-guide-callout p {
margin: 0;
color: var(--gf-white);
line-height: 1.6;
}
.submission-guide-submit-panel {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: center;
padding: 28px 24px;
color: var(--gf-white);
background: var(--gf-accent);
}
.submission-guide-submit-panel h2 {
margin: 0 0 10px;
color: var(--gf-white);
}
.submission-guide-submit-panel p {
max-width: 760px;
margin: 0;
color: var(--gf-white);
line-height: 1.7;
}
.submission-guide-submit-panel .button-row {
align-items: stretch;
}
.submission-guide-submit-panel .button {
min-width: 190px;
color: var(--gf-charcoal);
background: var(--gf-white);
}
.submission-guide-submit-panel .button:hover,
.submission-guide-submit-panel .button:focus-visible {
color: var(--gf-white);
background: var(--gf-charcoal);
}
.submission-guide-faq-list {
display: grid;
gap: 10px;
}
.submission-guide-faq-item {
overflow: hidden;
color: var(--gf-charcoal);
background: var(--gf-white);
border: var(--gf-border-width, 1px) solid var(--gf-border, rgba(53,53,53,.14));
border-radius: 15px;
}
.submission-guide-faq-item summary {
position: relative;
padding: 18px 54px 18px 20px;
cursor: pointer;
font-weight: 800;
line-height: 1.45;
list-style: none;
}
.submission-guide-faq-item summary::-webkit-details-marker {
display: none;
}
.submission-guide-faq-item summary::after {
content: "+";
position: absolute;
top: 50%;
right: 20px;
color: var(--gf-accent);
font-size: 28px;
font-weight: 900;
transform: translateY(-50%);
}
.submission-guide-faq-item[open] summary {
color: var(--gf-white);
background: var(--gf-accent);
}
.submission-guide-faq-item[open] summary::after {
content: "−";
color: var(--gf-white);
}
.submission-guide-faq-answer {
padding: 0 20px 20px;
color: #555;
line-height: 1.68;
}
.submission-guide-faq-answer p:last-child {
margin-bottom: 0;
}
@media (min-width: 561px) {
.submission-guide-nav {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.submission-guide-date-grid,
.submission-guide-material-grid,
.submission-guide-process-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.submission-guide-card-grid,
.submission-guide-fees {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 769px) {
.submission-guide-nav {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.submission-guide-intro {
grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
}
.submission-guide-date-grid {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.submission-guide-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.submission-guide-material-grid,
.submission-guide-process-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.submission-guide-fees {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.submission-guide-submit-panel {
grid-template-columns: minmax(0, 1fr) auto;
padding: 34px;
}
}
/* ------------------------------------------------------------------------------------ */
/* 03.31 Main: Submission Guide — Detailed entry and selected-film guidance */
/* ------------------------------------------------------------------------------------ */
.submission-guide-policy-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
.submission-guide-policy-card {
min-width: 0;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: var(--gf-radius);
}
.submission-guide-policy-card > span {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.submission-guide-policy-card h3 {
margin: 0 0 10px;
color: var(--gf-charcoal);
font-size: 20px;
line-height: 1.25;
}
.submission-guide-policy-card p {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.65;
}
.submission-guide-selected-layout {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: start;
}
.submission-guide-selected-list {
display: grid;
gap: 10px;
}
.submission-guide-selected-list article {
padding: 18px;
color: var(--gf-charcoal);
background: var(--gf-white);
border-radius: var(--gf-radius);
}
.submission-guide-selected-list strong {
display: block;
margin-bottom: 7px;
color: var(--gf-accent);
font-size: 16px;
}
.submission-guide-selected-list p {
margin: 0;
color: #555;
line-height: 1.62;
}
.submission-guide-selection-note {
padding: 24px;
color: var(--gf-white);
background: var(--gf-charcoal);
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--gf-radius);
}
.submission-guide-selection-note > span {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.submission-guide-selection-note h3 {
margin: 0 0 12px;
color: var(--gf-white);
font-size: 24px;
line-height: 1.2;
}
.submission-guide-selection-note p {
margin: 0 0 18px;
color: #f2f2f2;
line-height: 1.68;
}
.submission-guide-selection-note > strong {
display: block;
padding-top: 16px;
color: var(--gf-white);
border-top: 1px solid rgba(255,255,255,.18);
font-size: 18px;
line-height: 1.4;
}
@media (min-width: 661px) {
.submission-guide-policy-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (min-width: 861px) {
.submission-guide-selected-layout {
grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr);
gap: 20px;
}
.submission-guide-selection-note {
position: sticky;
top: 20px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.32 Main: Film Categories --------------------------- */
/* ------------------------------------------------------------------------------------ */
.gf-categories-page .gf-categories-guidance > p {
width: 100%;
max-width: none;
margin: 0;
color: #555;
font-size: 17px;
line-height: 1.72;
}
@media (min-width: 769px) {
.gf-categories-page .gf-categories-guidance > p {
font-size: 18px;
}
}
.gf-categories-page .gf-category-list {
width: 100%;
}
.gf-categories-page .gf-category-entry {
min-height: 0;
}
.gf-categories-page .gf-category-entry h2 {
max-width: 900px;
margin: 0 0 16px;
color: var(--gf-charcoal);
font-size: clamp(26px,3vw,34px);
line-height: 1.15;
}
.gf-categories-page .gf-category-description {
width: 100%;
max-width: 920px;
}
.gf-categories-page .gf-category-description p {
max-width: none;
margin: 0 0 16px;
color: #555;
font-size: 17px;
line-height: 1.72;
}
.gf-categories-page .gf-category-description p:last-child {
margin-bottom: 0;
}
.gf-categories-page .gf-category-entry.section-white,
.gf-categories-page .gf-category-entry.section-light {
border-top-color: rgba(53,53,53,.12);
}
.gf-categories-page .gf-categories-empty h2 {
margin-top: 0;
}
.gf-categories-page .gf-categories-empty > p:last-child {
max-width: 840px;
margin-bottom: 0;
}
.gf-categories-page .gf-categories-notice .info-bar {
margin-top: 0;
background: var(--gf-grey);
}
.gf-categories-page .gf-categories-notice .info-bar > div:last-child {
min-width: 0;
}
.gf-categories-page .gf-categories-notice h2 {
margin: 0 0 8px;
color: var(--gf-white);
font-size: 21px;
line-height: 1.25;
}
.gf-categories-page .gf-categories-notice h2::after {
content: none !important;
display: none !important;
}
.gf-categories-page .gf-categories-notice .info-bar p {
max-width: none;
color: var(--gf-white);
font-size: 14px;
line-height: 1.65;
}
@media (min-width: 769px) {
.gf-categories-page .gf-category-description p {
font-size: 18px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.33 Main: Rules & Eligibility ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.gf-rules-page .gf-rules-primary-action {
margin-top: 24px;
}
.gf-rules-page .gf-rules-scope-note {
width: 100%;
max-width: 980px;
margin-top: 22px;
padding: 18px 20px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: var(--gf-radius);
}
.gf-rules-page .gf-rules-scope-note p {
margin: 0;
color: var(--gf-white);
font-size: 15px;
line-height: 1.65;
}
.gf-rules-page .gf-rules-grid,
.gf-rules-page .gf-rules-eligibility-grid,
.gf-rules-page .gf-rules-link-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gf-gap);
border: 0;
}
.gf-rules-page .gf-rules-card,
.gf-rules-page .gf-rules-eligibility-item,
.gf-rules-page .gf-rules-link-card {
position: relative;
min-width: 0;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.16);
border-radius: var(--gf-radius);
clip-path: none;
transform: none;
transition: background-color .18s ease;
}
.gf-rules-page .gf-rules-card {
min-height: 220px;
}
.gf-rules-page .gf-rules-link-card {
display: flex;
min-height: 190px;
flex-direction: column;
text-decoration: none;
}
.gf-rules-page .gf-rules-card::before,
.gf-rules-page .gf-rules-card::after,
.gf-rules-page .gf-rules-eligibility-item::before,
.gf-rules-page .gf-rules-eligibility-item::after,
.gf-rules-page .gf-rules-link-card::before,
.gf-rules-page .gf-rules-link-card::after {
content: none;
display: none;
}
.gf-rules-page .gf-rules-card:hover,
.gf-rules-page .gf-rules-card:focus-within,
.gf-rules-page .gf-rules-eligibility-item:hover,
.gf-rules-page .gf-rules-eligibility-item:focus-within,
.gf-rules-page .gf-rules-link-card:hover,
.gf-rules-page .gf-rules-link-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-offwhite);
border-color: rgba(53,53,53,.16);
transform: none;
text-decoration: none;
}
.gf-rules-page .gf-rules-card-number {
display: block;
margin-bottom: 14px;
color: var(--gf-accent);
font-size: 13px;
font-weight: 900;
letter-spacing: .08em;
}
.gf-rules-page .gf-rules-card h3,
.gf-rules-page .gf-rules-eligibility-item h3 {
margin: 0 0 10px;
color: var(--gf-charcoal);
font-size: 21px;
line-height: 1.25;
}
.gf-rules-page .gf-rules-card p,
.gf-rules-page .gf-rules-eligibility-item p,
.gf-rules-page .gf-rules-link-card p {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.65;
}
.gf-rules-page .gf-rules-eligibility-item h3 {
color: var(--gf-accent);
font-size: 19px;
}
.gf-rules-page .gf-rules-copy {
width: 100%;
max-width: none;
}
.gf-rules-page .gf-rules-copy p {
width: 100%;
max-width: none;
margin: 0 0 16px;
line-height: 1.72;
}
.gf-rules-page .gf-rules-copy p:last-child {
margin-bottom: 0;
}
.gf-rules-page .gf-rules-section .text-content a,
.gf-rules-page .gf-rules-copy a {
color: var(--gf-accent);
font-weight: 800;
}
.gf-rules-page .gf-rules-link-card span {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.gf-rules-page .gf-rules-link-card strong {
display: block;
margin-bottom: 10px;
color: var(--gf-charcoal);
font-size: 22px;
line-height: 1.25;
}
.gf-rules-page .gf-rules-contact {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
align-items: center;
margin-top: 22px;
padding: 20px;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: var(--gf-radius);
}
.gf-rules-page .gf-rules-contact p {
margin: 0;
color: var(--gf-white);
line-height: 1.6;
}
.gf-rules-page .gf-rules-contact .button {
width: 100%;
}
.gf-rules-page .section-charcoal .gf-rules-copy p {
color: rgba(255,255,255,.88);
}
.gf-rules-page .section-charcoal .editorial-heading h2 {
color: var(--gf-white);
}
@media (min-width: 641px) {
.gf-rules-page .gf-rules-grid,
.gf-rules-page .gf-rules-link-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
.gf-rules-page .gf-rules-eligibility-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (min-width: 769px) {
.gf-rules-page .gf-rules-contact {
grid-template-columns: minmax(0,1fr) auto;
}
.gf-rules-page .gf-rules-contact .button {
width: auto;
}
}
@media (min-width: 961px) {
.gf-rules-page .gf-rules-eligibility-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
/* Submission Guide related resources */
.submission-guide-page .submission-guide-resource-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gf-gap);
}
.submission-guide-page .submission-guide-resource-card {
display: flex;
min-height: 185px;
flex-direction: column;
padding: 22px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.12);
border-radius: var(--gf-radius);
text-decoration: none;
}
.submission-guide-page .submission-guide-resource-card:hover,
.submission-guide-page .submission-guide-resource-card:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-offwhite);
text-decoration: none;
}
.submission-guide-page .submission-guide-resource-card span {
display: block;
margin-bottom: 9px;
color: var(--gf-accent);
font-size: 12px;
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
}
.submission-guide-page .submission-guide-resource-card strong {
display: block;
margin-bottom: 10px;
font-size: 21px;
line-height: 1.25;
}
.submission-guide-page .submission-guide-resource-card p {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.62;
}
@media (min-width: 641px) {
.submission-guide-page .submission-guide-resource-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (min-width: 961px) {
.submission-guide-page .submission-guide-resource-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
.gf-rules-page .gf-rules-eligibility-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--gf-gap);
}
.gf-rules-page .gf-rules-eligibility-item {
padding: 20px;
color: var(--gf-charcoal);
background: var(--gf-offwhite);
border: 1px solid rgba(53,53,53,.12);
border-radius: var(--gf-radius);
}
.gf-rules-page .gf-rules-eligibility-item h3 {
margin: 0 0 9px;
color: var(--gf-accent);
font-size: 19px;
line-height: 1.25;
}
.gf-rules-page .gf-rules-eligibility-item p {
margin: 0;
color: #555;
font-size: 15px;
line-height: 1.62;
}
@media (min-width: 641px) {
.gf-rules-page .gf-rules-eligibility-grid {
grid-template-columns: repeat(2,minmax(0,1fr));
}
}
@media (min-width: 961px) {
.gf-rules-page .gf-rules-eligibility-grid {
grid-template-columns: repeat(3,minmax(0,1fr));
}
}
/* =============================================================================
Footer newsletter: MailPoet integration
Custom class names use hyphens only.
============================================================================= */
.footer .footer-newsletter-inner {
width: 100%;
margin: 0 auto;
}
.footer .footer-newsletter-form {
width: 100%;
margin: 0;
}
.footer .gf-mailpoet-clean,
.footer .gf-mailpoet-clean > div,
.footer .gf-mailpoet-clean [id^="mailpoet_form_"] {
width: 100% !important;
max-width: none !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.footer .glowflare-newsletter-form {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1.35fr)
minmax(150px, auto) !important;
gap: 10px !important;
align-items: start !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.footer .gf-mailpoet-clean .mailpoet_form_columns,
.footer .gf-mailpoet-clean .mailpoet_form_column {
display: contents !important;
}
.footer .newsletter-field,
.footer .newsletter-submit {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 6px !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.footer .newsletter-field-first-name {
grid-column: 1 !important;
}
.footer .newsletter-field-last-name {
grid-column: 2 !important;
}
.footer .newsletter-field-email {
grid-column: 3 !important;
}
.footer .newsletter-submit {
grid-column: 4 !important;
grid-row: 1 !important;
}
.footer .gf-mailpoet-clean label {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
border: 0 !important;
}
.footer .gf-mailpoet-clean input[type="text"],
.footer .gf-mailpoet-clean input[type="email"],
.footer .gf-mailpoet-clean input[type="tel"],
.footer .gf-mailpoet-clean select,
.footer .gf-mailpoet-clean textarea:not(.g-recaptcha-response) {
display: block !important;
width: 100% !important;
min-width: 0 !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 14px !important;
color: var(--gf-charcoal) !important;
background: var(--gf-white) !important;
border: 1px solid rgba(53, 53, 53, 0.15) !important;
border-radius: 15px !important;
outline: none !important;
}
.footer .gf-mailpoet-clean input:focus,
.footer .gf-mailpoet-clean select:focus,
.footer .gf-mailpoet-clean textarea:focus {
border-color: var(--gf-accent) !important;
}
.footer .gf-mailpoet-clean input[type="submit"],
.footer .gf-mailpoet-clean button[type="submit"],
.footer .gf-mailpoet-clean .mailpoet_submit {
display: inline-flex !important;
width: 100% !important;
min-width: 0 !important;
height: 46px !important;
min-height: 46px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 22px !important;
color: var(--gf-white) !important;
background: var(--gf-accent) !important;
border: 1px solid var(--gf-accent) !important;
border-radius: 15px !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
}
/* Remove only PHP-classified hidden MailPoet/security wrappers. */
.footer .newsletter-hidden,
.footer .gf-mailpoet-clean input[type="hidden"],
.footer .gf-mailpoet-clean textarea.g-recaptcha-response,
.footer .gf-mailpoet-clean textarea[name="g-recaptcha-response"] {
position: absolute !important;
display: none !important;
width: 0 !important;
height: 0 !important;
min-width: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Field validation remains beneath its own field. */
.footer .gf-mailpoet-clean .parsley-errors-list,
.footer .gf-mailpoet-clean .mailpoet_validate_error {
width: 100% !important;
min-height: 34px !important;
margin: 0 !important;
padding: 7px 10px !important;
color: #a32626 !important;
background: rgba(254, 0, 0, 0.06) !important;
border: 1px solid rgba(254, 0, 0, 0.22) !important;
border-radius: 15px !important;
font-size: 12px !important;
line-height: 1.35 !important;
text-align: center !important;
list-style: none !important;
}
.footer .gf-mailpoet-clean .parsley-errors-list:empty,
.footer .gf-mailpoet-clean .mailpoet_validate_error:empty,
.footer .gf-mailpoet-clean .mailpoet_validate_success:empty,
.footer .gf-mailpoet-clean .mailpoet_message:empty,
.footer .gf-mailpoet-clean .mailpoet_error:empty,
.footer .gf-mailpoet-clean .mailpoet_success:empty {
display: none !important;
}
/* Full-width MailPoet responses appear below the fields. */
.footer .newsletter-status:not(:empty),
.footer .gf-mailpoet-clean .mailpoet_validate_success:not(:empty),
.footer .gf-mailpoet-clean .mailpoet_message:not(:empty),
.footer .gf-mailpoet-clean .mailpoet_error:not(:empty),
.footer .gf-mailpoet-clean .mailpoet_success:not(:empty) {
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 14px !important;
border-radius: 15px !important;
font-size: 13px !important;
line-height: 1.4 !important;
text-align: center !important;
}
.footer .gf-mailpoet-clean .mailpoet_validate_success:not(:empty),
.footer .gf-mailpoet-clean .mailpoet_success:not(:empty) {
color: #176b42 !important;
background: rgba(30, 180, 110, 0.10) !important;
border: 1px solid rgba(30, 180, 110, 0.28) !important;
}
.footer .gf-mailpoet-clean .mailpoet_error:not(:empty),
.footer .gf-mailpoet-clean .mailpoet_validate_error:not(:empty),
.footer .gf-mailpoet-clean .mailpoet_message:not(:empty) {
color: #a32626 !important;
background: rgba(254, 0, 0, 0.06) !important;
border: 1px solid rgba(254, 0, 0, 0.22) !important;
}
/* Keep every notice at the requested radius. */
.footer .gf-mailpoet-clean .parsley-errors-list,
.footer .gf-mailpoet-clean .parsley-errors-list li,
.footer .gf-mailpoet-clean .mailpoet_validate_error,
.footer .gf-mailpoet-clean .mailpoet_validate_success,
.footer .gf-mailpoet-clean .mailpoet_message,
.footer .gf-mailpoet-clean .mailpoet_error,
.footer .gf-mailpoet-clean .mailpoet_success,
.footer .newsletter-status {
border-radius: 15px !important;
}
/*
* Consent is outside MailPoet. Its spacing now comes only from the original
* footer rule and cannot be affected by hidden form or reCAPTCHA children.
*/
.footer .footer-newsletter-consent {
margin: 12px 0 0 !important;
}
/* Google badge remains functional and visible. */
.grecaptcha-badge {
z-index: 999998 !important;
}
@media (max-width: 768px) {
.footer .glowflare-newsletter-form {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
gap: 12px !important;
}
.footer .newsletter-field-first-name {
grid-column: 1 !important;
}
.footer .newsletter-field-last-name {
grid-column: 2 !important;
}
.footer .newsletter-field-email,
.footer .newsletter-submit,
.footer .newsletter-status {
grid-column: 1 / -1 !important;
grid-row: auto !important;
}
}
@media (max-width: 520px) {
.footer .glowflare-newsletter-form {
grid-template-columns: 1fr !important;
}
.footer .newsletter-field,
.footer .newsletter-submit,
.footer .newsletter-status {
grid-column: 1 !important;
}
}
/* =============================================================================
MailPoet field-wrapper and empty-status correction
============================================================================= */
/*
* A MailPoet form column may also be one of our classified field wrappers.
* These selectors intentionally outrank the earlier display:contents rule.
*/
.footer .gf-mailpoet-clean .mailpoet_form_column.newsletter-field,
.footer .gf-mailpoet-clean .mailpoet_form_column.newsletter-submit,
.footer .gf-mailpoet-clean .mailpoet_paragraph.newsletter-field,
.footer .gf-mailpoet-clean .mailpoet_paragraph.newsletter-submit,
.footer .gf-mailpoet-clean .mailpoet_form_paragraph.newsletter-field,
.footer .gf-mailpoet-clean .mailpoet_form_paragraph.newsletter-submit,
.footer .gf-mailpoet-clean .newsletter-field,
.footer .gf-mailpoet-clean .newsletter-submit {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Explicit desktop placement after MailPoet's own column rules. */
.footer .gf-mailpoet-clean .newsletter-field-first-name {
grid-column: 1 !important;
grid-row: 1 !important;
}
.footer .gf-mailpoet-clean .newsletter-field-last-name {
grid-column: 2 !important;
grid-row: 1 !important;
}
.footer .gf-mailpoet-clean .newsletter-field-email {
grid-column: 3 !important;
grid-row: 1 !important;
}
.footer .gf-mailpoet-clean .newsletter-submit {
grid-column: 4 !important;
grid-row: 1 !important;
}
/*
* Hide status wrappers unless JavaScript confirms that they contain readable
* MailPoet or validation text. This also catches nested empty UL/DIV markup.
*/
.footer .gf-mailpoet-clean .newsletter-status,
.footer .gf-mailpoet-clean .mailpoet_validate_error,
.footer .gf-mailpoet-clean .mailpoet_validate_success,
.footer .gf-mailpoet-clean .mailpoet_message,
.footer .gf-mailpoet-clean .mailpoet_error,
.footer .gf-mailpoet-clean .mailpoet_success,
.footer .gf-mailpoet-clean .parsley-errors-list {
display: none !important;
}
.footer .gf-mailpoet-clean .newsletter-status.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_validate_error.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_validate_success.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_message.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_error.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_success.newsletter-status-visible,
.footer .gf-mailpoet-clean .parsley-errors-list.newsletter-status-visible {
display: block !important;
}
/* General responses span the full form width. */
.footer .gf-mailpoet-clean .newsletter-status.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_validate_success.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_message.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_error.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_success.newsletter-status-visible {
grid-column: 1 / -1 !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 14px !important;
border-radius: 15px !important;
font-size: 13px !important;
line-height: 1.4 !important;
text-align: center !important;
}
/* Field errors remain within their classified field wrapper. */
.footer .gf-mailpoet-clean .parsley-errors-list.newsletter-status-visible,
.footer .gf-mailpoet-clean .mailpoet_validate_error.newsletter-status-visible {
width: 100% !important;
min-height: 34px !important;
margin: 0 !important;
padding: 7px 10px !important;
border-radius: 15px !important;
font-size: 12px !important;
line-height: 1.35 !important;
text-align: center !important;
}
/* Preserve the requested exact radius. */
.footer .gf-mailpoet-clean .newsletter-status-visible,
.footer .gf-mailpoet-clean .newsletter-status-visible li {
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
@media (max-width: 768px) {
.footer .gf-mailpoet-clean .newsletter-field-first-name {
grid-column: 1 !important;
grid-row: auto !important;
}
.footer .gf-mailpoet-clean .newsletter-field-last-name {
grid-column: 2 !important;
grid-row: auto !important;
}
.footer .gf-mailpoet-clean .newsletter-field-email,
.footer .gf-mailpoet-clean .newsletter-submit {
grid-column: 1 / -1 !important;
grid-row: auto !important;
}
}
@media (max-width: 520px) {
.footer .gf-mailpoet-clean .newsletter-field,
.footer .gf-mailpoet-clean .newsletter-submit {
grid-column: 1 !important;
grid-row: auto !important;
}
}
/* =============================================================================
Dedicated visual newsletter row
============================================================================= */
.footer .gf-mailpoet-clean .glowflare-newsletter-form,
.footer .gf-mailpoet-clean form {
display: block !important;
width: 100% !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
}
.footer .newsletter-controls {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1.35fr)
minmax(150px, auto) !important;
gap: 10px !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.footer .newsletter-controls > .newsletter-control {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
gap: 6px !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.footer .newsletter-controls > .newsletter-control-first-name {
grid-column: 1 !important;
}
.footer .newsletter-controls > .newsletter-control-last-name {
grid-column: 2 !important;
}
.footer .newsletter-controls > .newsletter-control-email {
grid-column: 3 !important;
}
.footer .newsletter-controls > .newsletter-control-submit {
grid-column: 4 !important;
}
.footer .newsletter-controls .mailpoet_form_column,
.footer .newsletter-controls .mailpoet_paragraph,
.footer .newsletter-controls .mailpoet_form_paragraph {
display: grid !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
}
.footer .newsletter-controls input[type="text"],
.footer .newsletter-controls input[type="email"],
.footer .newsletter-controls input[type="tel"],
.footer .newsletter-controls select,
.footer .newsletter-controls textarea:not(.g-recaptcha-response) {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 14px !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
.footer .newsletter-controls input[type="submit"],
.footer .newsletter-controls button[type="submit"],
.footer .newsletter-controls .mailpoet_submit {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
.footer .gf-mailpoet-clean .newsletter-status,
.footer .gf-mailpoet-clean .mailpoet_validate_error,
.footer .gf-mailpoet-clean .mailpoet_validate_success,
.footer .gf-mailpoet-clean .mailpoet_message,
.footer .gf-mailpoet-clean .mailpoet_error,
.footer .gf-mailpoet-clean .mailpoet_success,
.footer .gf-mailpoet-clean .parsley-errors-list {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
border: 0 !important;
}
.footer .gf-mailpoet-clean .newsletter-status-visible {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 10px 0 0 !important;
padding: 10px 14px !important;
overflow: visible !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
font-size: 13px !important;
line-height: 1.4 !important;
text-align: center !important;
}
.footer .gf-mailpoet-clean .newsletter-status-visible,
.footer .gf-mailpoet-clean .newsletter-status-visible li {
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
}
.footer .footer-newsletter-consent {
margin: 12px 0 0 !important;
}
@media (max-width: 768px) {
.footer .newsletter-controls {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
gap: 12px !important;
}
.footer .newsletter-controls > .newsletter-control-first-name {
grid-column: 1 !important;
}
.footer .newsletter-controls > .newsletter-control-last-name {
grid-column: 2 !important;
}
.footer .newsletter-controls > .newsletter-control-email,
.footer .newsletter-controls > .newsletter-control-submit {
grid-column: 1 / -1 !important;
}
}
@media (max-width: 520px) {
.footer .newsletter-controls {
grid-template-columns: 1fr !important;
}
.footer .newsletter-controls > .newsletter-control {
grid-column: 1 !important;
}
}
/* =============================================================================
Final four-control visual row
============================================================================= */
/*
* The JavaScript now moves only the real controls into these cells.
* MailPoet's original nested wrappers remain outside this visual row.
*/
.footer .newsletter-controls {
display: grid !important;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1.35fr)
minmax(150px, auto) !important;
gap: 10px !important;
align-items: stretch !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.footer .newsletter-controls > .newsletter-control {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 !important;
}
.footer .newsletter-controls > .newsletter-control-first-name {
grid-column: 1 !important;
grid-row: 1 !important;
}
.footer .newsletter-controls > .newsletter-control-last-name {
grid-column: 2 !important;
grid-row: 1 !important;
}
.footer .newsletter-controls > .newsletter-control-email {
grid-column: 3 !important;
grid-row: 1 !important;
}
.footer .newsletter-controls > .newsletter-control-submit {
grid-column: 4 !important;
grid-row: 1 !important;
}
.footer .newsletter-controls > .newsletter-control > input[type="text"],
.footer .newsletter-controls > .newsletter-control > input[type="email"],
.footer .newsletter-controls > .newsletter-control > input[type="tel"],
.footer .newsletter-controls > .newsletter-control > select,
.footer .newsletter-controls > .newsletter-control > textarea:not(.g-recaptcha-response) {
display: block !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 46px !important;
min-height: 46px !important;
margin: 0 !important;
padding: 0 14px !important;
color: var(--gf-charcoal) !important;
background: var(--gf-white) !important;
border: 1px solid rgba(53, 53, 53, 0.15) !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
outline: none !important;
font: inherit !important;
}
.footer .newsletter-controls > .newsletter-control > input[type="submit"],
.footer .newsletter-controls > .newsletter-control > button[type="submit"],
.footer .newsletter-controls > .newsletter-control > .mailpoet_submit {
display: inline-flex !important;
box-sizing: border-box !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
height: 46px !important;
min-height: 46px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 22px !important;
color: var(--gf-white) !important;
background: var(--gf-accent) !important;
border: 1px solid var(--gf-accent) !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
font: inherit !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1 !important;
cursor: pointer !important;
}
/*
* Collapse abandoned MailPoet visual wrappers after their controls have been
* moved. Hidden inputs and security data remain inside the original form.
*/
.footer .gf-mailpoet-clean .mailpoet_paragraph:empty,
.footer .gf-mailpoet-clean .mailpoet_form_paragraph:empty,
.footer .gf-mailpoet-clean .mailpoet_form_column:empty,
.footer .gf-mailpoet-clean p:empty {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure no earlier positioning rule affects the generated cells. */
.footer .newsletter-controls .newsletter-control {
position: static !important;
float: none !important;
transform: none !important;
}
/* Notifications stay hidden until a real post-submit message is returned. */
.footer .gf-mailpoet-clean .newsletter-status:not(.newsletter-status-visible),
.footer .gf-mailpoet-clean .mailpoet_validate_error:not(.newsletter-status-visible),
.footer .gf-mailpoet-clean .mailpoet_validate_success:not(.newsletter-status-visible),
.footer .gf-mailpoet-clean .mailpoet_message:not(.newsletter-status-visible),
.footer .gf-mailpoet-clean .mailpoet_error:not(.newsletter-status-visible),
.footer .gf-mailpoet-clean .mailpoet_success:not(.newsletter-status-visible),
.footer .gf-mailpoet-clean .parsley-errors-list:not(.newsletter-status-visible) {
display: none !important;
width: 0 !important;
height: 0 !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
}
.footer .gf-mailpoet-clean .newsletter-status-visible {
display: block !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
margin: 10px 0 0 !important;
padding: 10px 14px !important;
border-radius: 15px !important;
-webkit-border-radius: 15px !important;
font-size: 13px !important;
line-height: 1.4 !important;
text-align: center !important;
}
@media (max-width: 768px) {
.footer .newsletter-controls {
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr) !important;
gap: 12px !important;
}
.footer .newsletter-controls > .newsletter-control-first-name {
grid-column: 1 !important;
grid-row: 1 !important;
}
.footer .newsletter-controls > .newsletter-control-last-name {
grid-column: 2 !important;
grid-row: 1 !important;
}
.footer .newsletter-controls > .newsletter-control-email {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
}
.footer .newsletter-controls > .newsletter-control-submit {
grid-column: 1 / -1 !important;
grid-row: 3 !important;
}
}
@media (max-width: 520px) {
.footer .newsletter-controls {
grid-template-columns: 1fr !important;
}
.footer .newsletter-controls > .newsletter-control {
grid-column: 1 !important;
grid-row: auto !important;
}
}
/* =============================================================================
Newsletter isolated visual layer — definitive layout
============================================================================= */
/* Completely isolate MailPoet's internal visual controls without disabling it. */
.footer .newsletter-mailpoet-functional {
position: absolute !important;
left: -10000px !important;
top: auto !important;
width: 1px !important;
height: 1px !important;
min-width: 1px !important;
min-height: 1px !important;
overflow: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
/* Google reCAPTCHA badge stays visible and functional. */
.grecaptcha-badge {
z-index: 999998 !important;
}
/* Stable visual form row, independent of MailPoet's markup. */
.footer .newsletter-visual {
width: 100%;
margin: 0;
}
.footer .newsletter-visual-fields {
display: grid;
grid-template-columns:
minmax(0, 1fr)
minmax(0, 1fr)
minmax(0, 1.35fr)
minmax(150px, auto);
gap: 10px;
align-items: stretch;
width: 100%;
}
.footer .newsletter-visual-field {
min-width: 0;
}
.footer .newsletter-visual-field label {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
white-space: nowrap;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
border: 0;
}
.footer .newsletter-visual-field input {
box-sizing: border-box;
display: block;
width: 100%;
min-width: 0;
height: 46px;
margin: 0;
padding: 0 14px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53, 53, 53, 0.15);
border-radius: 15px;
-webkit-border-radius: 15px;
outline: none;
font: inherit;
}
.footer .newsletter-visual-field input:focus {
border-color: var(--gf-accent);
}
.footer .newsletter-visual-field input.newsletter-field-invalid {
border-color: rgba(254, 0, 0, 0.65);
}
.footer .newsletter-visual-submit {
box-sizing: border-box;
display: inline-flex;
width: 100%;
min-width: 150px;
height: 46px;
align-items: center;
justify-content: center;
margin: 0;
padding: 0 22px;
color: var(--gf-white);
background: var(--gf-accent);
border: 1px solid var(--gf-accent);
border-radius: 15px;
-webkit-border-radius: 15px;
font: inherit;
font-size: 15px;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
cursor: pointer;
}
.footer .newsletter-visual-submit:hover {
filter: brightness(0.94);
}
/* No banner exists in the layout until text is supplied. */
.footer .newsletter-visual-message[hidden] {
display: none !important;
}
.footer .newsletter-visual-message {
display: block;
width: 100%;
box-sizing: border-box;
margin: 10px 0 0;
padding: 10px 14px;
border-radius: 15px;
-webkit-border-radius: 15px;
font-size: 13px;
line-height: 1.4;
text-align: center;
}
.footer .newsletter-visual-message.newsletter-message-error {
color: #a32626;
background: rgba(254, 0, 0, 0.06);
border: 1px solid rgba(254, 0, 0, 0.22);
}
.footer .newsletter-visual-message.newsletter-message-success {
color: #176b42;
background: rgba(30, 180, 110, 0.10);
border: 1px solid rgba(30, 180, 110, 0.28);
}
.footer .footer-newsletter-consent {
margin: 12px 0 0 !important;
}
/*
* Override every previous generated MailPoet visual-row rule. The old row is
* inside the isolated functional layer and must never affect page layout.
*/
.footer .newsletter-controls,
.footer .newsletter-control,
.footer .newsletter-status,
.footer .newsletter-status-visible {
all: unset !important;
}
@media (max-width: 768px) {
.footer .newsletter-visual-fields {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 12px;
}
.footer .newsletter-visual-field:nth-child(3),
.footer .newsletter-visual-submit {
grid-column: 1 / -1;
}
}
@media (max-width: 520px) {
.footer .newsletter-visual-fields {
grid-template-columns: 1fr;
}
.footer .newsletter-visual-field,
.footer .newsletter-visual-submit {
grid-column: 1;
}
}
/* =============================================================================
Hidden MailPoet security-field safeguard
============================================================================= */
.footer .newsletter-mailpoet-functional input,
.footer .newsletter-mailpoet-functional select,
.footer .newsletter-mailpoet-functional textarea,
.footer .newsletter-mailpoet-functional button {
max-width: 1px !important;
max-height: 1px !important;
}
/* The Google badge remains the only visible reCAPTCHA element. */
.footer .newsletter-mailpoet-functional .g-recaptcha-response {
display: none !important;
}
/* =============================================================================
Hidden security validation safeguard
============================================================================= */
.footer .newsletter-mailpoet-functional :invalid {
outline: none !important;
}
.footer .newsletter-mailpoet-functional .parsley-errors-list,
.footer .newsletter-mailpoet-functional .mailpoet_validate_error {
max-width: 1px !important;
max-height: 1px !important;
overflow: hidden !important;
}
/* =========================================================
LINK STATE CONSISTENCY
Keeps visited links visually consistent with unvisited links.
This block is intentionally last so browser/theme :visited
rules cannot override the approved hover and focus colours.
========================================================= */
a:visited {
color: inherit;
}
a:hover,
a:focus-visible,
a:visited:hover,
a:visited:focus-visible {
color: var(--gf-accent);
}
/* Footer directory and ordinary text links */
.footer a:visited {
color: inherit;
}
.footer a:hover,
.footer a:focus-visible,
.footer a:visited:hover,
.footer a:visited:focus-visible {
color: var(--gf-accent);
}
/* Dark newsletter call-to-action */
.footer .newsletter a:visited {
color: var(--gf-white);
}
.footer .newsletter a:hover,
.footer .newsletter a:focus-visible,
.footer .newsletter a:visited:hover,
.footer .newsletter a:visited:focus-visible {
color: var(--gf-white);
background: var(--gf-grey);
}
/* Policy strip */
.footer .policies-desktop a:visited,
.footer .policies-mobile a:visited,
.footer .footer-newsletter-consent a:visited {
color: var(--gf-charcoal);
}
.footer .policies-desktop a:hover,
.footer .policies-desktop a:focus-visible,
.footer .policies-desktop a:visited:hover,
.footer .policies-desktop a:visited:focus-visible,
.footer .policies-mobile a:hover,
.footer .policies-mobile a:focus-visible,
.footer .policies-mobile a:visited:hover,
.footer .policies-mobile a:visited:focus-visible,
.footer .footer-newsletter-consent a:hover,
.footer .footer-newsletter-consent a:focus-visible,
.footer .footer-newsletter-consent a:visited:hover,
.footer .footer-newsletter-consent a:visited:focus-visible {
color: var(--gf-accent);
}
/* Partner logos remain visually neutral */
.footer .trust-logo:visited,
.footer .trust-logo:hover,
.footer .trust-logo:focus-visible,
.footer .trust-logo:visited:hover,
.footer .trust-logo:visited:focus-visible {
color: inherit;
background: transparent;
text-decoration: none;
}
/* ------------------------------------------------------------------------------------ */
/* Footer socials: reuse the header social button design from style.css */
/* ------------------------------------------------------------------------------------ */
/*
* The footer markup now uses .social-media-links, so button size, radius, colours,
* icon sizing and hover behaviour come directly from style.css.
* These rules only position that shared component inside the footer.
*/
.footer .footer-social-media-links {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
padding: 12px 24px 24px;
color: var(--gf-white);
background: var(--gf-grey);
}
/* Preserve the shared style.css states inside the footer, including visited links. */
.footer .footer-social-media-links a:link,
.footer .footer-social-media-links a:visited,
.footer .footer-social-media-links a:active {
color: #fff;
background-color: #FE0000;
text-decoration: none;
}
.footer .footer-social-media-links a:hover,
.footer .footer-social-media-links a:focus-visible,
.footer .footer-social-media-links a:visited:hover,
.footer .footer-social-media-links a:visited:focus-visible {
color: #FE0000;
background-color: #353535;
text-decoration: none;
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- 03.34 Main: Error Pages ------------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
Error-page components are namespaced with gf404-.
The film template contains structure and behaviour only; all visual rules live here.
*/
.gf404-wrap,
.gf404-wrap * {
box-sizing: border-box;
}
.gf404-wrap {
width: 100%;
max-width: var(--gf-frame);
margin: 0 auto;
overflow: hidden;
color: var(--gf-white);
background: var(--gf-charcoal);
border-radius: var(--gf-radius);
font-family: Arial,Helvetica,sans-serif;
}
.gf404-hero {
position: relative;
display: grid;
grid-template-columns: minmax(0,1.35fr) minmax(240px,.65fr);
gap: 28px;
align-items: center;
min-height: 440px;
padding: 42px 36px;
overflow: hidden;
color: var(--gf-white);
background: linear-gradient(135deg,#242424,#090909);
isolation: isolate;
}
.gf404-film-rotator,
.gf404-film-slide,
.gf404-film-shade {
position: absolute;
inset: 0;
}
.gf404-film-rotator {
z-index: -3;
overflow: hidden;
background: #1b1b1b;
}
.gf404-film-slide {
z-index: 0;
opacity: 0;
visibility: hidden;
transition: opacity 2.2s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 2.2s;
}
.gf404-film-slide.is-active,
.gf404-film-slide.is-leaving {
visibility: visible;
transition: opacity 2.2s cubic-bezier(.22, .61, .36, 1), visibility 0s linear 0s;
}
.gf404-film-slide.is-active {
z-index: 2;
opacity: 1;
}
.gf404-film-slide.is-leaving {
z-index: 1;
opacity: 0;
}
.gf404-film-slide img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
max-width: none;
object-fit: cover;
object-position: center;
transform-origin: center;
animation: none;
will-change: transform;
filter: none !important;
}
.gf404-film-slide.is-active.is-panning.is-pan-forward img {
animation: gf404PanForward 12.2s linear both;
}
.gf404-film-slide.is-active.is-panning.is-pan-reverse img {
animation: gf404PanReverse 12.2s linear both;
}
.gf404-film-shade {
display: none !important;
background: none !important;
opacity: 0 !important;
}
.gf404-film-heading {
position: absolute;
z-index: 4;
top: 18px;
right: 20px;
left: 20px;
text-align: right;
filter: );
}
.gf404-film-title {
margin: 0;
color: var(--gf-white);
font-size: clamp(15px,1.5vw,18px);
font-weight: 900;
line-height: 1.1;
letter-spacing: -.025em;
}
.gf404-film-edition {
display: block;
margin-top: 5px;
color: rgba(255,255,255,.86);
font-size: 10px;
font-weight: 800;
line-height: 1.2;
letter-spacing: .12em;
text-transform: uppercase;
}
.gf404-film-link {
position: absolute;
z-index: 5;
bottom: 18px;
left: 20px;
display: inline-flex;
min-height: 40px;
align-items: center;
justify-content: center;
padding: 0 16px;
color: var(--gf-white) !important;
background: var(--gf-accent);
border: 1px solid var(--gf-accent);
border-radius: 15px;
font-size: 12px;
font-weight: 900;
letter-spacing: .055em;
text-decoration: none !important;
text-transform: uppercase;
white-space: nowrap;
}
.gf404-film-link:hover,
.gf404-film-link:focus-visible {
color: var(--gf-white);
background: #d90000;
text-decoration: none;
}
.gf404-title {
margin: 0 0 15px;
color: var(--gf-white);
font-size: clamp(36px,6vw,58px);
line-height: 1.02;
}
.gf404-lead {
max-width: 650px;
margin: 0;
color: var(--gf-white);
font-size: 18px;
line-height: 1.65;
}
.gf404-code-card {
padding: 24px;
color: var(--gf-charcoal);
text-align: center;
background: rgba(255,255,255,.96);
border: 1px solid rgba(53,53,53,.12);
border-radius: 14px;
}
.gf404-code {
display: block;
margin: 0;
color: var(--gf-accent);
font-size: clamp(72px,13vw,132px);
font-weight: 900;
line-height: .86;
}
.gf404-code-label {
display: block;
margin-top: 14px;
font-size: 14px;
font-weight: 800;
letter-spacing: .08em;
text-transform: uppercase;
}
/* Flat Search and Browse section */
.gf404-search-browse {
margin: 0;
border-top: 1px solid rgba(255,255,255,.18);
border-bottom: 1px solid rgba(255,255,255,.18);
}
.gf404-search-browse-grid {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 34px;
align-items: stretch;
}
.gf404-search-browse-block {
display: flex;
min-width: 0;
flex-direction: column;
}
.gf404-search-browse-block + .gf404-search-browse-block {
padding-left: 34px;
border-left: 1px solid rgba(255,255,255,.20);
}
.gf404-search-browse h2 {
margin: 0 0 8px;
color: var(--gf-white);
font-size: 20px;
line-height: 1.25;
}
.gf404-search-browse p {
margin: 0 0 14px;
color: #f2f2f2;
font-size: 15px;
line-height: 1.6;
}
.gf404-search-form {
display: grid;
width: 100%;
grid-template-columns: minmax(0,1fr) auto;
gap: 10px;
align-items: center;
margin-top: auto;
}
.gf404-search-form input[type="search"] {
width: 100%;
min-width: 0;
height: 44px;
min-height: 44px;
padding: 0 15px;
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid rgba(53,53,53,.16);
border-radius: 15px;
outline: 0;
}
.gf404-search-form input[type="search"]:focus {
border-color: var(--gf-accent);
}
.gf404-browse-links {
flex-wrap: nowrap;
margin-top: auto;
}
.gf404-browse-links .button {
min-height: 44px;
height: 44px;
white-space: nowrap;
}
/* Recovery cards */
.gf404-recovery {
margin: 0;
}
.gf404-recovery-grid {
gap: var(--gf-gap);
margin: 0;
}
.gf404-recovery-card {
display: flex;
min-height: 148px;
flex-direction: column;
align-items: flex-start;
border: 1px solid rgba(53,53,53,.12) !important;
border-top: 1px solid rgba(53,53,53,.12) !important;
}
.gf404-recovery-card h3 {
margin-bottom: 8px;
}
.gf404-recovery-card p {
margin-bottom: 10px;
}
.gf404-recovery-card > .button {
margin-top: 0;
}
/* Broken-link report */
.gf404-report {
display: grid;
grid-template-columns: minmax(0,1fr) auto;
gap: 24px;
align-items: center;
margin: 0;
border-top: 0;
}
.gf404-report h2 {
margin: 0 0 7px;
color: var(--gf-white);
font-size: 19px;
line-height: 1.25;
}
.gf404-report p {
margin: 0;
color: rgba(255,255,255,.92);
line-height: 1.55;
}
.gf404-report .button-light {
white-space: nowrap;
}
/* Focus and motion */
.gf404-wrap a:focus-visible,
.gf404-wrap button:focus-visible,
.gf404-wrap input:focus-visible {
outline: 3px solid var(--gf-accent);
outline-offset: 3px;
}
@keyframes gf404PanForward {
0% {
transform: translate3d(-4%,0,0) scale(1.10);
}
100% {
transform: translate3d(4%,0,0) scale(1.10);
}
}
@keyframes gf404PanReverse {
0% {
transform: translate3d(4%,0,0) scale(1.10);
}
100% {
transform: translate3d(-4%,0,0) scale(1.10);
}
}
@media (prefers-reduced-motion: reduce) {
.gf404-film-slide,
.gf404-film-slide img {
transition: none !important;
animation: none !important;
}
}
@media (max-width: 760px) {
.gf404-wrap {
width: 100%;
margin: 0;
border-radius: 0;
}
.gf404-hero {
grid-template-columns: 1fr;
min-height: 560px;
padding: 34px 24px 74px;
}
.gf404-code-card {
order: -1;
}
.gf404-code {
font-size: 88px;
}
.gf404-film-heading {
top: 16px;
right: 16px;
left: 16px;
}
.gf404-film-link {
bottom: 16px;
left: 16px;
}
.gf404-search-browse-grid {
grid-template-columns: 1fr;
gap: 24px;
}
.gf404-search-browse-block + .gf404-search-browse-block {
padding-top: 24px;
padding-left: 0;
border-top: 1px solid rgba(255,255,255,.20);
border-left: 0;
}
.gf404-browse-links {
flex-wrap: wrap;
}
.gf404-report {
grid-template-columns: 1fr;
}
.gf404-report .button-light {
width: 100%;
}
}
@media (max-width: 480px) {
.gf-vote-ballot .fmv-web-inline-info {
margin-top: 8px;
}
.gf404-search-form {
grid-template-columns: 1fr;
}
.gf404-search-form .button {
width: 100%;
}
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------- 03.35 Error Page Edition Links ---------------------------- */
/* ------------------------------------------------------------------------------------ */
a.gf404-film-edition {
display: block;
width: max-content;
margin-top: 5px;
margin-left: auto;
color: rgba(255,255,255,.86);
text-decoration: none;
}
a.gf404-film-edition:hover,
a.gf404-film-edition:focus-visible {
color: var(--gf-white);
text-decoration: underline;
text-underline-offset: 3px;
}
.gf404-film-edition-missing {
opacity: .72;
}
/* ------------------------------------------------------------------------------------ */
/* ---------------------- 03.36 Error Film Label + Report Tone ------------------------- */
/* ------------------------------------------------------------------------------------ */
/* Slightly increase the top-right film title and edition label. */
.gf404-film-title {
font-size: clamp(17px,1.8vw,21px);
}
.gf404-film-edition {
margin-top: 6px;
font-size: 12px;
line-height: 1.25;
}
/* Match the report area to the dark-slate Search/Browse section. */
.gf404-report,
.section-accent.gf404-report,
.section-surface-accent.gf404-report {
color: var(--gf-white);
background: var(--gf-grey);
border-top: 1px solid rgba(255,255,255,.18);
}
.gf404-report h2,
.gf404-report p {
color: var(--gf-white);
}
.gf404-report .button-light {
color: var(--gf-white);
background: var(--gf-accent);
border: 0;
}
.gf404-report .button-light:hover,
.gf404-report .button-light:focus-visible {
color: var(--gf-white);
background: #d90000;
}
/* ------------------------------------------------------------------------------------ */
/* -------------------------- 03.37 Red Search Browse Area ----------------------------- */
/* ------------------------------------------------------------------------------------ */
.gf404-search-browse,
.section-grey.gf404-search-browse,
.section-surface-dark.gf404-search-browse {
color: var(--gf-white);
background: var(--gf-accent);
border-top: 1px solid rgba(255,255,255,.22);
border-bottom: 1px solid rgba(255,255,255,.22);
}
.gf404-search-browse h2,
.gf404-search-browse p {
color: var(--gf-white);
}
.gf404-search-browse-block + .gf404-search-browse-block {
border-left-color: rgba(255,255,255,.34);
}
.gf404-search-form .button-accent {
color: var(--gf-charcoal);
background: var(--gf-white);
}
.gf404-search-form .button-accent:hover,
.gf404-search-form .button-accent:focus-visible {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.gf404-browse-links .button {
color: var(--gf-white);
background: var(--gf-charcoal);
}
.gf404-browse-links .button:hover,
.gf404-browse-links .button:focus-visible {
color: var(--gf-white);
background: var(--gf-grey);
}
@media (max-width: 760px) {
.gf404-search-browse-block + .gf404-search-browse-block {
border-top-color: rgba(255,255,255,.34);
}
}
/* ------------------------------------------------------------------------------------ */
/* -------------------- 03.38 Error Page Buttons + Clean Mobile Layout ---------------- */
/* ------------------------------------------------------------------------------------ */
/* All three recovery-card actions use exactly the same button treatment. */
.gf404-recovery-card .button,
.gf404-recovery-card .button-accent {
min-height: 44px;
padding: 10px 15px;
color: var(--gf-white) !important;
background: var(--gf-charcoal) !important;
border: 1px solid var(--gf-charcoal) !important;
border-radius: 15px !important;
font-size: 15px;
font-weight: 700;
}
.gf404-recovery-card .button:hover,
.gf404-recovery-card .button:focus-visible,
.gf404-recovery-card .button-accent:hover,
.gf404-recovery-card .button-accent:focus-visible {
color: var(--gf-white) !important;
background: var(--gf-grey) !important;
border-color: var(--gf-grey) !important;
text-decoration: none;
}
@media (max-width: 760px) {
/*
* The mobile site header is already part of normal document flow.
* Do not add margin above the 404 wrapper.
*/
.gf404-wrap {
width: 100%;
margin: 0 !important;
overflow: hidden;
border-radius: 0;
}
/*
* Use a single mobile hero layout. The film image starts immediately below
* the menu because the rotator sits at z-index 0 rather than behind the hero.
*/
.gf404-hero {
position: relative;
display: flex;
min-height: 680px;
flex-direction: column;
justify-content: flex-end;
gap: 20px;
padding: 110px 20px 32px;
overflow: hidden;
isolation: isolate;
}
.gf404-film-rotator {
position: absolute;
inset: 0;
z-index: 0;
}
.gf404-film-slide {
z-index: 0;
}
.gf404-film-slide.is-active {
z-index: 2;
}
.gf404-hero::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(
180deg,
rgba(0,0,0,.08) 0%,
rgba(0,0,0,.16) 34%,
rgba(0,0,0,.68) 76%,
rgba(0,0,0,.86) 100%
);
pointer-events: none;
}
.gf404-film-heading {
position: absolute;
z-index: 4;
top: 22px;
right: 20px;
left: auto;
width: min(48%,220px);
margin: 0;
text-align: right;
}
.gf404-film-title {
font-size: 18px;
}
.gf404-film-edition {
font-size: 12px;
}
/*
* The 404 card is in normal flow above the message, but the background image
* remains visible behind it from the very top of the hero.
*/
.gf404-code-card {
position: relative;
inset: auto;
z-index: 3;
order: 1;
width: min(82%,320px);
margin: 0 auto;
padding: 18px 16px;
}
.gf404-code {
font-size: clamp(68px,19vw,92px);
line-height: .9;
}
.gf404-code-label {
margin-top: 10px;
font-size: 11px;
}
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
position: relative;
z-index: 3;
order: 2;
width: 100%;
}
.gf404-title {
margin: 0 0 12px;
font-size: clamp(38px,10vw,52px);
line-height: 1.04;
}
.gf404-lead {
max-width: 650px;
margin: 0;
font-size: 17px;
line-height: 1.55;
}
.gf404-film-link {
position: relative;
inset: auto;
z-index: 3;
order: 3;
align-self: flex-start;
margin: 2px 0 0;
}
/* Search and Browse form one complete vertical mobile section. */
.gf404-search-browse {
padding: 28px 20px 30px;
}
.gf404-search-browse-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
.gf404-search-browse-block + .gf404-search-browse-block {
padding-top: 24px;
padding-left: 0;
border-top: 1px solid rgba(255,255,255,.32);
border-left: 0;
}
.gf404-search-browse h2 {
font-size: 23px;
}
.gf404-search-form {
grid-template-columns: 1fr;
gap: 10px;
}
.gf404-search-form input[type="search"],
.gf404-search-form .button {
width: 100%;
}
.gf404-browse-links {
display: grid;
grid-template-columns: repeat(3,minmax(0,1fr));
gap: 8px;
width: 100%;
}
.gf404-browse-links .button {
width: 100%;
min-width: 0;
padding-right: 10px;
padding-left: 10px;
}
/* Lower cards and report remain fully visible in one column. */
.gf404-recovery {
padding: 26px 20px;
}
.gf404-recovery-grid,
.balanced-grid.gf404-recovery-grid,
.balanced-grid-3.gf404-recovery-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
.gf404-recovery-card {
min-height: 0;
}
.gf404-report {
grid-template-columns: 1fr;
gap: 16px;
padding: 26px 20px;
}
.gf404-report .button-light {
width: 100%;
}
}
@media (max-width: 420px) {
.gf404-hero {
min-height: 650px;
gap: 18px;
padding: 100px 16px 28px;
}
.gf404-film-heading {
top: 18px;
right: 16px;
width: 50%;
}
.gf404-code-card {
width: min(86%,280px);
padding: 16px 14px;
}
.gf404-code {
font-size: 68px;
}
.gf404-title {
font-size: 38px;
}
.gf404-browse-links {
grid-template-columns: 1fr;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------- 03.39 Shared Mobile Content Reset --------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
* The live theme applies reserved top spacing to its shared content wrappers on mobile.
* That spacing appears as an empty charcoal/grey banner between the mobile header and
* the first page section. Glowflare page sections provide their own internal spacing,
* so the reserved wrapper space is removed at mobile widths only.
*/
@media (max-width: 768px) {
#page,
.site,
.site-frame,
#content,
.site-content,
.content-area,
#primary,
.site-main,
main.site-main,
#main-content {
margin-top: 0 !important;
padding-top: 0 !important;
}
.site-header + #content,
.site-header + .site-content,
header + #content,
header + .site-content,
header + main,
.site-content > #primary,
.site-content > .content-area,
#primary > .site-main,
.content-area > .site-main {
margin-top: 0 !important;
padding-top: 0 !important;
}
#content > :first-child,
.site-content > :first-child,
#primary > :first-child,
.content-area > :first-child,
.site-main > :first-child,
#main-content > :first-child {
margin-top: 0 !important;
}
/* Ensure the 404 artwork begins immediately after the mobile navigation. */
.gf404-wrap,
.gf404-hero {
margin-top: 0 !important;
}
}
/* ------------------------------------------------------------------------------------ */
/* ---------------------------- 03.40 Mobile Hero Polish ------------------------------- */
/* ------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
/*
* Pull the hero slightly beneath the curved mobile header so the small
* exposed corners disappear.
*/
.gf404-hero {
min-height: 620px;
margin-top: -15px;
gap: 22px;
padding-top: 105px;
}
/* Make the 404 panel feel more like a badge than the dominant hero element. */
.gf404-code-card {
width: min(72%,270px);
margin-bottom: 26px;
padding: 14px;
}
.gf404-code {
font-size: 58px;
}
.gf404-code-label {
margin-top: 9px;
font-size: 10px;
}
/* Give the film identification a little more breathing room below the menu. */
.gf404-film-heading {
top: 36px;
right: 18px;
}
/* Add separation between the explanatory copy and the film action. */
.gf404-film-link {
margin-top: 18px;
}
}
@media (max-width: 420px) {
.gf404-hero {
min-height: 590px;
margin-top: -15px;
gap: 20px;
padding-top: 96px;
}
.gf404-code-card {
width: min(74%,250px);
margin-bottom: 22px;
padding: 13px;
}
.gf404-code {
font-size: 54px;
}
.gf404-film-heading {
top: 32px;
right: 16px;
}
}
/* ------------------------------------------------------------------------------------ */
/* -------------------------- 03.41 Compact Mobile Error Hero -------------------------- */
/* ------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
/*
* Compact the complete mobile hero instead of relying on an outer negative margin.
*/
.gf404-hero {
min-height: 540px;
margin-top: 0;
gap: 14px;
padding: 76px 20px 24px;
}
/*
* Move the 404 badge upward within the hero and make the numerals more prominent.
*/
.gf404-code-card {
width: min(76%,280px);
margin: -18px auto 8px;
padding: 14px 15px;
}
.gf404-code {
font-size: 68px;
line-height: .88;
}
.gf404-code-label {
margin-top: 9px;
font-size: 10px;
}
/*
* Pull the message and film action upward by reducing vertical separation.
*/
.gf404-title {
margin-bottom: 10px;
}
.gf404-lead {
line-height: 1.5;
}
.gf404-film-link {
margin-top: 8px;
}
/*
* Keep film identification visible without consuming additional hero height.
*/
.gf404-film-heading {
top: 18px;
right: 18px;
}
}
@media (max-width: 420px) {
.gf404-hero {
min-height: 510px;
gap: 12px;
padding: 68px 16px 22px;
}
.gf404-code-card {
width: min(80%,260px);
margin-top: -16px;
margin-bottom: 6px;
padding: 13px 14px;
}
.gf404-code {
font-size: 64px;
}
.gf404-title {
font-size: 36px;
}
.gf404-film-heading {
top: 16px;
right: 16px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------- 03.42 Final Mobile 404 Correction ------------------------- */
/* ------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
/*
* Physically overlap the 404 page beneath the curved mobile menu.
* Transform is used because margin-top was being neutralised by the live layout.
*/
.gf404-wrap {
position: relative;
z-index: 0;
transform: translateY(-15px);
margin-bottom: -15px !important;
}
/*
* Keep the hero compact while giving the error card more visual presence.
*/
.gf404-hero {
min-height: 520px;
gap: 14px;
padding: 72px 20px 24px;
}
.gf404-code-card {
width: min(84%,320px);
margin: -20px auto 12px;
padding: 18px 16px;
}
.gf404-code {
font-size: 76px;
line-height: .88;
}
.gf404-code-label {
margin-top: 10px;
font-size: 13px;
letter-spacing: .08em;
}
.gf404-title {
margin-bottom: 10px;
}
.gf404-lead {
max-width: 620px;
font-size: 17px;
line-height: 1.48;
}
.gf404-film-link {
margin-top: 10px;
}
.gf404-film-heading {
top: 18px;
right: 18px;
}
}
@media (max-width: 420px) {
.gf404-wrap {
transform: translateY(-15px);
margin-bottom: -15px !important;
}
.gf404-hero {
min-height: 500px;
gap: 12px;
padding: 68px 16px 22px;
}
.gf404-code-card {
width: min(86%,290px);
margin-top: -18px;
margin-bottom: 10px;
padding: 16px 14px;
}
.gf404-code {
font-size: 72px;
}
.gf404-code-label {
font-size: 12px;
}
.gf404-title {
font-size: 36px;
}
.gf404-film-heading {
top: 16px;
right: 16px;
}
}
/* ------------------------------------------------------------------------------------ */
/* --------------------- 03.43 Mobile Film Title + 404 Scale --------------------------- */
/* ------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
/*
* Give the film title the full available width while keeping it aligned right.
* Prevent wrapping wherever the viewport can accommodate the complete title.
*/
.gf404-film-heading {
top: 18px;
right: 18px;
left: 18px;
width: auto;
max-width: none;
text-align: right;
}
.gf404-film-title {
width: 100%;
max-width: none;
font-size: clamp(16px,4.6vw,20px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.gf404-film-edition {
width: max-content;
margin-left: auto;
}
/*
* Enlarge the 404 content inside the card and lift the card by 10px.
*/
.gf404-code-card {
width: min(86%,330px);
margin-top: -30px;
margin-bottom: 12px;
padding: 18px 16px;
}
.gf404-code {
font-size: 86px;
line-height: .86;
}
.gf404-code-label {
margin-top: 10px;
font-size: 14px;
letter-spacing: .08em;
}
/*
* Drop the main error message by 15px to rebalance the larger card.
*/
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
transform: translateY(15px);
}
.gf404-film-link {
transform: translateY(15px);
}
}
@media (max-width: 420px) {
.gf404-film-heading {
top: 16px;
right: 14px;
left: 14px;
}
.gf404-film-title {
font-size: clamp(15px,4.4vw,18px);
}
.gf404-code-card {
width: min(88%,300px);
margin-top: -28px;
padding: 16px 14px;
}
.gf404-code {
font-size: 80px;
}
.gf404-code-label {
font-size: 13px;
}
}
/* ------------------------------------------------------------------------------------ */
/* -------------------------- 03.44 Mobile Film Title Lowered -------------------------- */
/* ------------------------------------------------------------------------------------ */
@media (max-width: 760px) {
.gf404-film-heading {
top: 33px;
}
}
@media (max-width: 420px) {
.gf404-film-heading {
top: 31px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------- 03.45 Mobile Hero Bottom Spacing -------------------------- */
/* ------------------------------------------------------------------------------------ */
@media (max-width:760px){
/* Remove hero bottom padding so the red search section spans full width */
.gf404-hero{
padding-top:72px;
padding-right:20px;
padding-bottom:0;
padding-left:20px;
}
/* Leave spacing beneath the button instead */
.gf404-film-link{
margin-top:18px;
margin-bottom:32px;
}
}
@media (max-width:420px){
.gf404-hero{
padding-top:68px;
padding-right:16px;
padding-bottom:0;
padding-left:16px;
}
.gf404-film-link{
margin-bottom:28px;
}
}
/* ------------------------------------------------------------------------------------ */
/* --------------------- 03.46 Centred Message + Glass 404 Card ------------------------ */
/* ------------------------------------------------------------------------------------ */
/*
* Use a translucent panel on desktop and mobile so the film artwork remains
* visible while the 404 message stays clear.
*/
.gf404-code-card {
color: var(--gf-charcoal);
background: rgba(255,255,255,.82);
border: 1px solid rgba(255,255,255,.68);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* Centre the main error message beneath the 404 panel on both layouts. */
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
text-align: center;
}
.gf404-title,
.gf404-lead {
margin-right: auto;
margin-left: auto;
}
.gf404-film-link {
justify-self: center;
}
@media (min-width: 761px) {
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
display: flex;
flex-direction: column;
align-items: center;
}
.gf404-title {
max-width: 720px;
}
.gf404-lead {
max-width: 680px;
}
}
@media (max-width: 760px) {
/*
* Increase the mobile horizontal inset so the copy and View Film button align
* cleanly and the bottom corners feel balanced before the red search section.
*/
.gf404-hero {
padding-right: 28px;
padding-left: 28px;
}
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.gf404-title {
max-width: 620px;
}
.gf404-lead {
max-width: 560px;
}
.gf404-film-link {
align-self: center;
margin-right: auto;
margin-bottom: 36px;
margin-left: auto;
}
.gf404-code-card {
background: rgba(255,255,255,.78);
border-color: rgba(255,255,255,.64);
}
}
@media (max-width: 420px) {
.gf404-hero {
padding-right: 22px;
padding-left: 22px;
}
.gf404-film-link {
margin-bottom: 32px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ---------------- 03.47 Left Film Action + More Transparent 404 Card ---------------- */
/* ------------------------------------------------------------------------------------ */
/* Make the 404 panel more transparent on desktop. */
.gf404-code-card {
background: rgba(255,255,255,.62);
border-color: rgba(255,255,255,.52);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
/* Keep the View Film action aligned to the left edge of the hero content. */
.gf404-film-link {
justify-self: start;
align-self: flex-start;
}
@media (max-width: 760px) {
/*
* Add another 10px of horizontal image/content inset.
* Previous mobile inset: 28px. New inset: 38px.
*/
.gf404-hero {
padding-right: 38px;
padding-left: 38px;
}
.gf404-film-link {
align-self: flex-start;
margin-right: 0;
margin-bottom: 48px;
margin-left: 0;
}
.gf404-code-card {
background: rgba(255,255,255,.56);
border-color: rgba(255,255,255,.48);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
}
@media (max-width: 420px) {
/*
* Previous extra-small inset: 22px. New inset: 32px.
*/
.gf404-hero {
padding-right: 32px;
padding-left: 32px;
}
.gf404-film-link {
margin-bottom: 44px;
}
.gf404-code-card {
background: rgba(255,255,255,.54);
}
}
/* ------------------------------------------------------------------------------------ */
/* ---------------------------- 03.48 Final Hero Refinements --------------------------- */
/* ------------------------------------------------------------------------------------ */
/* Make the 404 panel more transparent on desktop and mobile. */
.gf404-code-card {
background: rgba(255,255,255,.45);
border: 1px solid rgba(255,255,255,.35);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
/* Desktop: restore left-aligned message and action. */
@media (min-width: 761px) {
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
display: block;
text-align: left;
}
.gf404-title,
.gf404-lead {
max-width: 680px;
margin-right: 0;
margin-left: 0;
}
.gf404-film-link {
align-self: flex-start;
justify-self: flex-start;
margin-left: 0;
}
}
/* Mobile: roll back the last two spacing changes and restore left alignment. */
@media (max-width: 760px) {
.gf404-hero {
padding-top: 72px;
padding-right: 20px;
padding-bottom: 0;
padding-left: 20px;
}
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
display: block;
text-align: left;
transform: none;
}
.gf404-title,
.gf404-lead {
max-width: 100%;
margin-right: 0;
margin-left: 0;
}
.gf404-film-link {
display: inline-flex;
align-self: flex-start;
justify-self: flex-start;
margin-top: 18px;
margin-right: 0;
margin-bottom: 36px;
margin-left: 0;
transform: none;
}
.gf404-code-card {
background: rgba(255,255,255,.42);
border-color: rgba(255,255,255,.32);
}
}
@media (max-width: 420px) {
.gf404-hero {
padding-top: 68px;
padding-right: 16px;
padding-bottom: 0;
padding-left: 16px;
}
.gf404-film-link {
margin-bottom: 32px;
}
.gf404-code-card {
background: rgba(255,255,255,.40);
}
}
/* ------------------------------------------------------------------------------------ */
/* -------------------- 03.49 Dark Slate 404 + Mobile Centred Copy -------------------- */
/* ------------------------------------------------------------------------------------ */
/* Dark-slate translucent 404 panel on desktop and mobile. */
.gf404-code-card {
color: var(--gf-white);
background: rgba(53,53,53,.46);
border: 1px solid rgba(255,255,255,.24);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
.gf404-code {
color: var(--gf-accent);
}
.gf404-code-label {
color: var(--gf-white);
}
@media (max-width: 760px) {
/*
* Centre only the main error heading and supporting sentence on mobile.
* View Film remains left aligned.
*/
.gf404-hero > div:not(.gf404-film-rotator):not(.gf404-code-card) {
text-align: center;
}
.gf404-title,
.gf404-lead {
margin-right: auto;
margin-left: auto;
}
.gf404-film-link {
align-self: flex-start;
justify-self: flex-start;
margin-left: 0;
}
.gf404-code-card {
background: rgba(53,53,53,.42);
border-color: rgba(255,255,255,.22);
}
}
@media (max-width: 420px) {
.gf404-code-card {
background: rgba(53,53,53,.40);
}
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------- 03.50 Desktop Hero Alignment ------------------------------ */
/* ------------------------------------------------------------------------------------ */
@media (min-width: 761px) {
/*
* Match the desktop 404 panel to the completed mobile dark-slate treatment.
*/
.gf404-code-card {
background: rgba(53,53,53,.42);
border-color: rgba(255,255,255,.22);
}
/*
* Use one consistent 36px desktop inset on every side.
* Film title/edition and View Film now align to the same hero padding.
*/
.gf404-film-heading {
top: 36px;
right: 36px;
left: 36px;
width: auto;
max-width: none;
text-align: right;
}
.gf404-film-title {
width: 100%;
max-width: none;
margin: 0;
}
.gf404-film-edition {
width: max-content;
margin-left: auto;
}
.gf404-film-link {
bottom: 36px;
left: 36px;
}
}
/* ------------------------------------------------------------------------------------ */
/* ------------------------ 03.51 Desktop Film Title Alignment ------------------------- */
/* ------------------------------------------------------------------------------------ */
@media (min-width: 761px) {
.gf404-film-heading {
top: 28px;
}
.gf404-film-title {
margin: 0;
line-height: 1.05;
}
.gf404-film-edition {
margin-top: 2px;
}
}
/* ------------------------------------------------------------------------------------ */
/* -------------------------- Universal Arrow Stepper ---------------------------------- */
/* ------------------------------------------------------------------------------------ */
/*
* Reusable progress/navigation component inspired by the Glowflare kiosk ballot.
*
* Markup:
* .gf-stepper
* .gf-stepper__track
* button.gf-stepper__step
* .gf-stepper__shape
* .gf-stepper__number
* .gf-stepper__title
* .gf-stepper__mobile
*
* States:
* .is-active Current step: wide red arrow showing its title.
* .is-complete Completed step.
* .is-available Optional navigable state.
* :disabled Future/unavailable step.
*/
.gf-stepper {
--gf-stepper-active: var(--gf-accent, #fe0000);
--gf-stepper-complete: #8f1717;
--gf-stepper-pending: #e7a1a1;
--gf-stepper-pending-text: #ffffff;
--gf-stepper-gap: 0px;
width: 100%;
margin: 0 0 10px;
padding: 0;
overflow: hidden;
border-radius: var(--gf-radius, 15px);
}
.gf-stepper__track {
display: flex;
width: 100%;
min-width: 0;
align-items: stretch;
gap: var(--gf-stepper-gap);
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
scrollbar-color: var(--gf-stepper-active) rgba(255,255,255,.1);
}
.gf-stepper__step {
position: relative;
z-index: 1;
display: block;
min-width: 68px;
flex: .72 1 68px;
margin: 0 -12px 0 0;
padding: 0;
overflow: visible;
border: 0;
background: transparent;
color: var(--gf-stepper-pending-text);
font: inherit;
cursor: pointer;
transition: flex-basis .22s ease, flex-grow .22s ease, opacity .18s ease, transform .18s ease;
}
.gf-stepper__step:last-child {
margin-right: 0;
}
.gf-stepper__shape {
position: relative;
display: flex;
width: 100%;
min-height: 64px;
align-items: center;
justify-content: center;
padding: 12px 25px 12px 29px;
overflow: hidden;
background: var(--gf-stepper-pending);
clip-path: polygon(
0 0,
calc(100% - 24px) 0,
100% 50%,
calc(100% - 24px) 100%,
0 100%,
24px 50%
);
transition: background-color .18s ease, color .18s ease;
}
.gf-stepper__step:first-child .gf-stepper__shape {
padding-left: 20px;
clip-path: polygon(
0 0,
calc(100% - 24px) 0,
100% 50%,
calc(100% - 24px) 100%,
0 100%
);
border-radius: var(--gf-radius, 15px) 0 0 var(--gf-radius, 15px);
}
.gf-stepper__step:last-child .gf-stepper__shape {
padding-right: 20px;
clip-path: polygon(
0 0,
100% 0,
100% 100%,
0 100%,
24px 50%
);
border-radius: 0 var(--gf-radius, 15px) var(--gf-radius, 15px) 0;
}
.gf-stepper__number,
.gf-stepper__title {
display: block;
color: inherit;
font-weight: 900;
line-height: 1.05;
text-align: center;
}
.gf-stepper__number {
font-size: 25px;
}
.gf-stepper__title {
display: none;
width: 100%;
overflow: hidden;
font-size: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.gf-stepper__step.is-active {
z-index: 5;
min-width: 250px;
flex: 2.65 1 250px;
}
.gf-stepper__step.is-active .gf-stepper__shape {
background: var(--gf-stepper-active);
}
.gf-stepper__step.is-active .gf-stepper__number {
display: none;
}
.gf-stepper__step.is-active .gf-stepper__title {
display: block;
}
.gf-stepper__step.is-complete:not(.is-active) .gf-stepper__shape {
background: var(--gf-stepper-complete);
}
.gf-stepper__step.is-available:not(.is-active):hover .gf-stepper__shape,
.gf-stepper__step.is-available:not(.is-active):focus-visible .gf-stepper__shape {
background: #c94747;
}
.gf-stepper__step:focus-visible {
z-index: 8;
outline: 3px solid #ffffff;
outline-offset: -4px;
}
.gf-stepper__step:disabled {
cursor: not-allowed;
opacity: .72;
}
.gf-stepper__step:disabled .gf-stepper__shape {
filter: saturate(.76);
}
.gf-stepper__mobile {
display: none;
min-height: 54px;
align-items: center;
justify-content: space-between;
gap: 14px;
padding: 13px 16px;
color: var(--gf-white, #ffffff);
background: var(--gf-charcoal, #353535);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--gf-radius, 15px);
font-size: 14px;
font-weight: 900;
}
/* Inline film information, using the review-style full-width panel. */
.gf-vote-ballot .fmv-web-inline-info[hidden] {
display: none;
}
.gf-vote-ballot .fmv-web-inline-info {
width: 100%;
flex: 0 0 100%;
margin: 4px 0 0;
overflow: hidden;
color: var(--gf-white);
background: var(--gf-charcoal);
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--gf-radius);
}
.gf-vote-ballot .fmv-web-inline-info-bar {
display: flex;
min-height: 52px;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 11px 16px;
color: var(--gf-white);
background: var(--gf-accent);
}
.gf-vote-ballot .fmv-web-inline-info-bar strong {
font-size: 15px;
font-weight: 900;
letter-spacing: .04em;
text-transform: uppercase;
}
.gf-vote-ballot .fmv-web-inline-info-close {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
padding: 0;
color: var(--gf-white);
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.45);
border-radius: 50%;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.gf-vote-ballot .fmv-web-inline-info-close:hover,
.gf-vote-ballot .fmv-web-inline-info-close:focus-visible {
background: rgba(0,0,0,.34);
}
.gf-vote-ballot .fmv-web-inline-info-body {
padding: 22px;
}
.gf-vote-ballot .fmv-web-info-button.is-active {
color: var(--gf-white);
background: var(--gf-accent);
border-color: var(--gf-white);
}
.gf-vote-ballot .fmv-web-film-info-content {
width: 100%;
}
.gf-vote-ballot .fmv-web-modal-title {
margin: 0 0 18px;
color: var(--gf-white);
font-size: 32px;
line-height: 1.05;
}
.gf-vote-ballot .fmv-web-modal-section + .fmv-web-modal-section {
margin-top: 22px;
}
.gf-vote-ballot .fmv-web-modal-section h3 {
margin: 0 0 10px;
color: var(--gf-accent);
font-size: 16px;
letter-spacing: .06em;
text-transform: uppercase;
}
.gf-vote-ballot .fmv-web-modal-copy {
max-width: none;
color: #f1f1f1;
line-height: 1.65;
}
.gf-vote-ballot .fmv-web-modal-copy p:last-child {
margin-bottom: 0;
}
.gf-vote-ballot .fmv-web-modal-meta {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 0 20px;
margin: 0;
}
.gf-vote-ballot .fmv-web-modal-meta > div {
display: grid;
grid-template-columns: minmax(130px,.7fr) minmax(0,1.3fr);
gap: 14px;
padding: 11px 0;
border-top: 1px solid rgba(255,255,255,.13);
}
.gf-vote-ballot .fmv-web-modal-meta dt {
color: var(--gf-white);
font-weight: 900;
}
.gf-vote-ballot .fmv-web-modal-meta dd {
margin: 0;
color: #e6e6e6;
}
.gf-vote-ballot .fmv-web-action-slot > .fmv-web-button {
justify-content: center;
}
/* Flat voting controls: no button or action-bar shadows. */
.gf-vote-ballot__actions,
.gf-vote-ballot button,
.gf-vote-ballot .button,
.gf-vote-ballot .fmv-web-button,
.gf-vote-ballot .fmv-web-info-button,
.gf-vote-ballot .fmv-web-inline-info-close {
}
@media (max-width: 960px) {
.gf-stepper__step {
min-width: 62px;
flex-basis: 62px;
}
.gf-stepper__step.is-active {
min-width: 220px;
flex-basis: 220px;
}
.gf-stepper__title {
font-size: 18px;
}
}
@media (max-width: 720px) {
.gf-vote-ballot .fmv-web-modal-meta {
grid-template-columns: 1fr;
}
.gf-vote-ballot .fmv-web-inline-info-body {
padding: 18px;
}
}
@media (max-width: 720px) {
.gf-stepper__track {
display: none;
}
.gf-stepper__mobile {
display: flex;
}
}
@media (prefers-reduced-motion: reduce) {
.gf-stepper__step,
.gf-stepper__shape {
transition: none !important;
}
}
/* ==========================================================
NORMAL WEBSITE VOTING BALLOT
Glowflare theme component for the public desktop/mobile vote.
Visual design only: submission and ballot behaviour remain in vote-ballot.php.
========================================================== */
.gf-vote-ballot,
.gf-vote-ballot * {
box-sizing: border-box;
}
.gf-vote-ballot {
--fmv-line-dark: rgba(255,255,255,.17);
--fmv-line-light: rgba(53,53,53,.16);
--fmv-copy-dark: #f4f4f4;
--fmv-copy-light: #4b4b4b;
--fmv-muted-dark: rgba(255,255,255,.76);
width: 100%;
margin: 0;
padding: 0;
color: var(--gf-white);
font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.gf-vote-ballot .fmv-web-shell {
width: 100%;
max-width: 1040px;
margin: 0 auto 10px;
padding: 0;
}
/* Header follows the shared Glowflare charcoal hero treatment. */
.gf-vote-ballot__hero {
display: flex;
align-items: center;
justify-content: center;
text-align: center;
gap: 24px;
margin: 0 0 10px;
padding: 30px 28px;
color: var(--gf-white);
background: var(--gf-charcoal);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--gf-radius);
}
.gf-vote-ballot .fmv-web-ballot-heading-group {
width: 100%;
min-width: 0;
}
.gf-vote-ballot .fmv-web-overline,
.gf-vote-ballot .fmv-web-step-kicker,
.gf-vote-ballot .fmv-web-review-award {
color: var(--gf-accent);
font-weight: 900;
letter-spacing: .09em;
text-transform: uppercase;
}
.gf-vote-ballot .fmv-web-overline {
margin: 0 0 8px;
font-size: 15px;
}
.gf-vote-ballot .fmv-web-heading {
max-width: none;
margin: 0;
color: var(--gf-white);
font-size: 52px;
font-weight: 900;
line-height: .98;
letter-spacing: -.04em;
}
.gf-vote-ballot .fmv-web-intro-copy {
max-width: 760px;
margin: 12px auto 0;
color: var(--fmv-copy-dark);
font-size: 16px;
line-height: 1.58;
}
/* Shared arrow stepper receives a darker Glowflare pending state on ballots. */
.gf-vote-ballot .gf-stepper {
--gf-stepper-active: var(--gf-accent);
--gf-stepper-complete: #c94747;
--gf-stepper-pending: #e7a1a1;
--gf-stepper-pending-text: var(--gf-white);
margin-bottom: 10px;
}
.gf-vote-ballot .gf-stepper__step:disabled {
opacity: .64;
}
/* Category surface follows shared grey sections rather than blue gradients. */
.gf-vote-ballot__section {
display: none;
margin: 0;
padding: 24px;
color: var(--gf-white);
background: var(--gf-charcoal);
border: 1px solid rgba(255,255,255,.14);
border-radius: var(--gf-radius);
}
.gf-vote-ballot__section.is-active {
display: block;
}
.gf-vote-ballot .fmv-web-step-head {
margin: 0 0 20px;
}
.gf-vote-ballot .gf-vote-category-intro {
width: 100%;
max-width: none;
margin-bottom: 22px;
}
.gf-vote-ballot .fmv-web-category-description {
width: 100%;
max-width: none;
margin: 10px 0 0;
color: #f1f1f1;
font-size: 15px;
line-height: 1.58;
}
.gf-vote-ballot .fmv-web-category-description p {
margin: 0 0 9px;
}
.gf-vote-ballot .fmv-web-category-description p:last-child {
margin-bottom: 0;
}
.gf-vote-ballot .fmv-web-category-prompt {
margin: 12px 0 0;
color: var(--gf-white);
font-size: 14px;
font-weight: 900;
}
.gf-vote-ballot .fmv-web-step-kicker {
display: inline-block;
margin: 0 0 8px;
font-size: 15px;
}
.gf-vote-ballot .fmv-web-award-title {
margin: 0;
color: var(--gf-white);
font-size: 38px;
font-weight: 900;
line-height: 1.05;
letter-spacing: -.025em;
}
.gf-vote-ballot .fmv-web-category-help {
margin: 9px 0 0;
color: var(--fmv-muted-dark);
font-size: 15px;
line-height: 1.48;
}
.gf-vote-ballot .fmv-web-options {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
margin: 0;
padding: 0;
}
.gf-vote-ballot .fmv-web-option-wrap {
width: calc((100% - 32px) / 3);
flex: 0 1 calc((100% - 32px) / 3);
}
.gf-vote-ballot .fmv-web-option-wrap,
.gf-vote-ballot .fmv-web-option {
position: relative;
min-width: 0;
}
.gf-vote-ballot .fmv-web-option {
display: block;
height: 100%;
}
.gf-vote-ballot .fmv-web-option input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
/* Nominee cards use white Glowflare cards with cinematic images. */
.gf-vote-ballot .fmv-web-tile {
position: relative;
display: block;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
color: var(--gf-white);
background: var(--gf-charcoal);
border: 2px solid rgba(53,53,53,.18);
border-radius: var(--gf-radius);
cursor: pointer;
line-height: 0;
transition: border-color .18s ease;
}
.gf-vote-ballot .fmv-web-option:hover .fmv-web-tile {
transform: none;
border-color: var(--gf-accent);
}
.gf-vote-ballot .fmv-web-option input:focus-visible + .fmv-web-tile {
outline: 3px solid var(--gf-white);
outline-offset: 4px;
}
.gf-vote-ballot .fmv-web-option input:checked + .fmv-web-tile {
border-color: var(--gf-accent);
}
.gf-vote-ballot .fmv-web-thumb {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
background: var(--gf-charcoal);
}
.gf-vote-ballot .fmv-web-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transform: none;
transition: none;
}
.gf-vote-ballot .fmv-web-option:hover .fmv-web-thumb img {
transform: none;
}
.gf-vote-ballot .fmv-web-thumb-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--gf-white);
font-weight: 800;
}
.gf-vote-ballot .fmv-web-tile-shade {
position: absolute;
inset: 0;
background: linear-gradient(180deg,rgba(0,0,0,.03) 34%,rgba(0,0,0,.93) 100%);
}
.gf-vote-ballot .fmv-web-option-name {
position: absolute;
z-index: 3;
left: 16px;
right: 16px;
bottom: 14px;
color: var(--gf-white);
font-size: 18px;
font-weight: 900;
line-height: 1.18;
}
.gf-vote-ballot .fmv-web-selected-state {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: rgba(254,0,0,.82);
color: var(--gf-white);
opacity: 0;
transition: opacity .18s ease;
}
.gf-vote-ballot .fmv-web-selected-state strong {
font-size: 22px;
letter-spacing: .05em;
text-transform: uppercase;
}
.gf-vote-ballot .fmv-web-selected-check {
display: flex;
width: 40px;
height: 40px;
align-items: center;
justify-content: center;
border: 2px solid var(--gf-white);
border-radius: 50%;
font-size: 23px;
font-weight: 900;
}
.gf-vote-ballot .fmv-web-option input:checked + .fmv-web-tile .fmv-web-selected-state {
opacity: 1;
}
.gf-vote-ballot .fmv-web-info-button {
position: absolute;
z-index: 8;
top: 12px;
left: 12px;
display: flex;
width: 42px;
height: 42px;
align-items: center;
justify-content: center;
color: var(--gf-white);
background: rgba(53,53,53,.9);
border: 2px solid rgba(255,255,255,.85);
border-radius: 50%;
font: 900 24px/1 Georgia,serif;
cursor: pointer;
}
.gf-vote-ballot .fmv-web-info-button:hover {
color: var(--gf-white);
background: var(--gf-accent);
border-color: var(--gf-white);
}
.gf-vote-ballot .fmv-web-info-button:focus-visible,
.gf-vote-ballot .fmv-web-button:focus-visible {
outline: 3px solid var(--gf-white);
outline-offset: 3px;
}
.gf-vote-ballot .fmv-web-empty {
padding: 18px;
color: var(--gf-charcoal);
background: var(--gf-offwhite);
border: 1px solid var(--fmv-line-light);
border-radius: var(--gf-radius);
}
/* Sticky action surface mirrors Glowflare info bars and button groups. */
.gf-vote-ballot__actions {
position: static;
display: flex;
width: 100%;
min-height: 78px;
align-items: center;
justify-content: space-between;
gap: 16px;
margin: 10px 0 0;
padding: 13px 14px;
color: var(--gf-white);
background: var(--gf-grey);
border: 1px solid rgba(255,255,255,.16);
border-radius: var(--gf-radius);
transform: none;
}
.gf-vote-ballot .fmv-web-action-slot {
display: flex;
min-width: 0;
align-items: center;
gap: 10px;
}
.gf-vote-ballot .fmv-web-action-slot--left {
justify-content: flex-start;
}
.gf-vote-ballot .fmv-web-action-slot--right {
justify-content: flex-end;
}
.gf-vote-ballot .fmv-web-action-slot > .fmv-web-button {
width: 190px;
min-width: 190px;
min-height: 52px;
}
.gf-vote-ballot .fmv-web-button--exit {
color: var(--gf-white);
background: var(--gf-accent);
text-decoration: none;
}
.gf-vote-ballot .fmv-web-button--exit:hover,
.gf-vote-ballot .fmv-web-button--exit:focus-visible {
color: var(--gf-white);
background: #d90000;
text-decoration: none;
}
.gf-vote-ballot .fmv-web-button {
display: inline-flex;
min-height: 50px;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
color: var(--gf-white);
background: var(--gf-accent);
border: 0;
border-radius: var(--gf-radius);
font: inherit;
font-weight: 900;
cursor: pointer;
}
.gf-vote-ballot .fmv-web-button:hover {
color: var(--gf-white);
background: #d90000;
}
.gf-vote-ballot .fmv-web-button[disabled] {
color: rgba(255,255,255,.64);
background: #8c3333;
cursor: not-allowed;
}
.gf-vote-ballot .fmv-web-button--secondary {
color: var(--gf-charcoal);
background: var(--gf-white);
border: 1px solid var(--fmv-line-light);
}
.gf-vote-ballot .fmv-web-button--secondary:hover {
color: var(--gf-charcoal);
background: var(--gf-light);
}
.gf-vote-ballot .fmv-web-review-list {
display: grid;
grid-template-columns: repeat(2,minmax(0,1fr));
gap: 12px;
margin-top: 18px;
}
.gf-vote-ballot .fmv-web-review-item {
display: grid;
grid-template-columns: 104px minmax(0,1fr) auto;
gap: 14px;
align-items: center;
padding: 12px;
color: var(--gf-charcoal);
background: var(--gf-offwhite);
border: 1px solid var(--fmv-line-light);
border-radius: var(--gf-radius);
}
.gf-vote-ballot .fmv-web-review-thumb {
width: 104px;
height: 76px;
overflow: hidden;
background: var(--gf-charcoal);
border-radius: 10px;
}
.gf-vote-ballot .fmv-web-review-thumb img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.gf-vote-ballot .fmv-web-review-award {
margin: 0 0 4px;
font-size: 12px;
}
.gf-vote-ballot .fmv-web-review-film {
color: var(--gf-charcoal);
font-size: 17px;
font-weight: 900;
}
.gf-vote-ballot .fmv-web-review-copy {
min-width: 0;
}
.gf-vote-ballot .fmv-web-review-edit {
display: inline-flex;
min-width: 132px;
min-height: 44px;
align-items: center;
justify-content: center;
padding: 10px 14px;
color: var(--gf-white);
background: var(--gf-accent);
border: 1px solid var(--gf-accent);
border-radius: 12px;
font: inherit;
font-size: 14px;
font-weight: 900;
cursor: pointer;
}
.gf-vote-ballot .fmv-web-review-edit:hover,
.gf-vote-ballot .fmv-web-review-edit:focus-visible {
color: var(--gf-white);
background: #d90000;
border-color: #d90000;
}
.gf-vote-ballot .fmv-web-message {
margin: 0 0 10px;
padding: 14px 16px;
border-radius: var(--gf-radius);
line-height: 1.45;
text-align: center;
}
.gf-vote-ballot .fmv-web-message--error {
color: #fee2e2;
background: #450a0a;
border: 1px solid #fecaca;
}
/* Film details modal uses the shared charcoal information surface. */
@media (max-width: 960px) {
.gf-vote-ballot .fmv-web-heading { font-size: 44px; }
.gf-vote-ballot .fmv-web-option-wrap {
width: calc((100% - 16px) / 2);
flex-basis: calc((100% - 16px) / 2);
}
.gf-vote-ballot .fmv-web-review-list { grid-template-columns: 1fr; }
.gf-vote-ballot .fmv-web-review-edit {
min-width: 124px;
}
}
@media (max-width: 720px) {
.gf-vote-ballot__hero {
align-items: flex-start;
flex-direction: column;
padding: 22px 20px;
}
.gf-vote-ballot .fmv-web-heading { font-size: 38px; }
.gf-vote-ballot .gf-stepper__track { display: none; }
.gf-vote-ballot .fmv-web-progress-mobile { display: flex; }
.gf-vote-ballot__actions {
min-height: 70px;
gap: 8px;
padding: 9px;
}
.gf-vote-ballot__actions > .fmv-web-button,
.gf-vote-ballot .fmv-web-action-slot {
width: 50%;
flex: 1 1 50%;
}
.gf-vote-ballot .fmv-web-action-slot > .fmv-web-button {
width: 100%;
min-width: 0;
}
.gf-vote-ballot__actions > .fmv-web-button--exit {
width: 50%;
flex: 1 1 50%;
}
}
@media (max-width: 480px) {
.gf-vote-ballot__section { padding: 18px; }
.gf-vote-ballot .fmv-web-award-title { font-size: 30px; }
.gf-vote-ballot .fmv-web-options { gap: 12px; }
.gf-vote-ballot .fmv-web-option-wrap {
width: 100%;
flex-basis: 100%;
}
.gf-vote-ballot .fmv-web-action-slot {
align-items: stretch;
}
.gf-vote-ballot .fmv-web-action-slot .fmv-web-button {
width: 100%;
min-height: 48px;
padding: 10px 9px;
font-size: 13px;
}
.gf-vote-ballot__actions > .fmv-web-button--exit {
min-height: 48px;
padding: 10px 9px;
font-size: 13px;
}
.gf-vote-ballot .fmv-web-review-item {
grid-template-columns: 78px minmax(0,1fr);
}
.gf-vote-ballot .fmv-web-review-thumb { width: 78px; height: 62px; }
.gf-vote-ballot .fmv-web-review-edit {
grid-column: 1 / -1;
width: 100%;
min-width: 0;
}
}
@media (prefers-reduced-motion: reduce) {
.gf-vote-ballot * {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
/* ------------------------------------------------------------------------------------ */
/* ----------------------------- Global Flat Design ----------------------------------- */
/* ------------------------------------------------------------------------------------ */
:where(
button,
input,
select,
textarea,
.button,
[class*="button"],
[class*="card"],
[class*="panel"],
[class*="modal"],
[class*="tile"],
[class*="bar"],
[class*="hero"],
[class*="section"]
) {
box-shadow: none !important;
text-shadow: none !important;
}