/* ========================================================================== LIVE AT ST MARY'S — BRAND TOKENS ========================================================================== This file holds the brand's fonts, colours and corner shapes. You normally DON'T need to edit this file. If the brand team gives you a new colour, change it once here and it updates across the whole website. ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTS — Graphie (the Live at St Mary's typeface) -------------------------------------------------------------------------- */ @font-face { font-family: "Graphie"; src: url("../../fonts/Graphie-Light.otf") format("opentype"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Graphie"; src: url("../../fonts/Graphie-Regular.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Graphie"; src: url("../../fonts/Graphie-Italic.otf") format("opentype"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Graphie"; src: url("../../fonts/Graphie-SemiBold.otf") format("opentype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Graphie"; src: url("../../fonts/Graphie-Bold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Graphie"; src: url("../../fonts/Graphie-ExtraBold.otf") format("opentype"); font-weight: 800; font-style: normal; font-display: swap; } /* -------------------------------------------------------------------------- 2. BRAND COLOURS These hex codes were sampled directly from the official Live at St Mary's logo and triangle pattern artwork. Don't change these unless the brand itself changes. -------------------------------------------------------------------------- */ :root { /* -- The signature gradient ramp, warm to cool -- */ --crimson: #e4004e; --pink: #c2007c; --purple: #7a2a9e; --violet: #4a2a9e; --indigo: #24259b; --blue: #0f6fb0; --teal: #00a9b1; --teal-bright: #00c9d4; /* Darker versions of the brand colours, for small text on a white background where the bright originals would be too pale to read. */ --crimson-deep: #b3003f; --teal-deep: #0c6a8c; /* -- The brand gradient. Used for rules, buttons and headline text. -- */ --gradient-brand: linear-gradient( 90deg, var(--crimson) 0%, var(--pink) 20%, var(--purple) 38%, var(--indigo) 60%, var(--blue) 80%, var(--teal) 100% ); /* A shorter, punchier version for buttons */ --gradient-cta: linear-gradient(100deg, var(--crimson) 0%, var(--pink) 45%, var(--purple) 100%); /* A cool version for secondary moments. It ends on the deeper teal rather than the bright one because white text sits on top of it — white on the bright teal is too faint to read. */ --gradient-cool: linear-gradient(100deg, var(--indigo) 0%, var(--blue) 55%, var(--teal-deep) 100%); /* ------------------------------------------------------------------------ 3. LIGHT THEME The site is light: dark text on white. These are the tokens that decide how light or dark everything is. ------------------------------------------------------------------------ */ /* -- Backgrounds -- */ --page: #ffffff; /* the main page background */ --page-alt: #f4f5fa; /* alternating bands and the footer */ --surface: #ffffff; /* cards and panels */ --surface-alt: #f7f8fc; /* insets inside a card */ /* -- Lines -- */ --border: #e3e5ef; /* normal hairline borders */ --border-strong: #c8cbdb; /* borders that need to be noticed */ /* -- Text -- */ /* These greys are deliberately dark enough to pass WCAG AA contrast on both --page and --page-alt. If you lighten them, small print stops being readable for a lot of people. */ --text: #0d0d24; /* headings and strong text */ --text-muted: #4e5167; /* body copy */ --text-subtle: #656980; /* captions, meta and small print */ --on-media: #ffffff; /* text sitting over the hero video */ /* -- Sold out / disabled -- */ --off-bg: #f1f2f7; --off-border: #d6d9e5; --off-text: #666a7e; /* -- Shadows. Light themes need these to separate cards from the page. -- */ --shadow-sm: 0 1px 2px rgba(13, 13, 36, 0.05), 0 1px 3px rgba(13, 13, 36, 0.04); --shadow-md: 0 10px 24px -12px rgba(13, 13, 36, 0.18); --shadow-lg: 0 24px 50px -22px rgba(13, 13, 36, 0.22); --shadow-cta: 0 8px 22px -10px rgba(228, 0, 78, 0.5); /* ------------------------------------------------------------------------ 4. CORNERS ------------------------------------------------------------------------ Buttons are square-edged. If you ever want rounded buttons back, set --radius-button to something like 999px for pill shapes, or 8px for softly rounded ones. Every button, badge and form field on the site follows these two settings. ------------------------------------------------------------------------ */ --radius-button: 0px; /* buttons, badges and form fields */ --radius-card: 4px; /* cards, panels and images */ /* ------------------------------------------------------------------------ 5. TYPE AND LAYOUT ------------------------------------------------------------------------ */ --font-brand: "Graphie", "Segoe UI", "Helvetica Neue", Arial, sans-serif; --page-max: 1240px; --page-gutter: clamp(1.25rem, 4vw, 3rem); /* -- Shape of the event image tiles. -- 1 / 1 = square (best match for the current artist images) 4 / 5 = portrait 3 / 4 = taller portrait 16 / 9 = landscape */ --tile-ratio: 1 / 1; /* -- How tall the hero banner is -- */ --hero-height: clamp(30rem, 74vh, 44rem); /* -- The bar across the top of every page -- The hero sits underneath the bar rather than below it, which means the hero has to be pulled up by exactly the bar's height. Get that wrong and a strip of white shows above the logo. The bar is as tall as whichever is taller — the logo, or the round menu button beside it — plus the space above and below, plus its hairline border. The menu button is the taller one on a phone, which is where that white strip used to appear. The script measures the real bar once it is built and corrects this, so these values only have to be close enough to avoid a jump on loading. */ --header-padding: 0.9rem; --header-logo: clamp(38px, 5vw, 52px); --header-control: 46px; --header-height: calc( var(--header-padding) * 2 + max(var(--header-logo), var(--header-control)) + 1px ); /* -- Motion -- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --speed: 0.35s; } /* -------------------------------------------------------------------------- 6. SMALL BRAND HELPERS -------------------------------------------------------------------------- */ /* Text filled with the brand gradient */ .gradient-text { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } /* A thin gradient rule — the brand's main divider device */ .gradient-rule { height: 3px; border: 0; background: var(--gradient-brand); }