/* ========================================================================== VMUG Sydney — brand layer for the pretix ticket shop Implements sydney-vmug-brand-guide.html v1.0 (July 2026) -------------------------------------------------------------------------- Injected into by the pretix_vmug_brand plugin, on events where the plugin is enabled. Loads AFTER pretix's compiled stylesheet, so plain specificity wins and !important is almost never needed. Division of labour: Settings → General → Shop design primary_color, background, body font This file everything the settings API cannot reach Guide references are section numbers, e.g. [§04] = the harbour wash. ========================================================================== */ /* -------------------------------------------------------------------------- @font-face — REQUIRED, and easy to assume otherwise -------------------------------------------------------------------------- pretix's register_fonts signal puts a family in the Design dropdown and makes it available to the PDF renderer. It does NOT serve it to the browser: get_font_stylesheet() only emits @font-face for the single selected primary_font. So Inter arrives because it is the body font, and every rule below asking for "Archivo Black" was silently falling through to Helvetica until these were added. Paths are relative to this file. Django's static storage rewrites them to the hashed filenames during collectstatic, so cache-busting still works. -------------------------------------------------------------------------- */ @font-face { font-family: "Archivo Black"; src: url("fonts/ArchivoBlack-Regular.c5a843baa390.woff2") format("woff2"), url("fonts/ArchivoBlack-Regular.d35cf52707d1.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { /* Single-weight face: bold maps to the same files so a inside a heading cannot drop mid-line to a system font. */ font-family: "Archivo Black"; src: url("fonts/ArchivoBlack-Regular.c5a843baa390.woff2") format("woff2"), url("fonts/ArchivoBlack-Regular.d35cf52707d1.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo Black"; src: url("fonts/ArchivoBlack-Italic.116adc84a823.woff2") format("woff2"), url("fonts/ArchivoBlack-Italic.b8a07bf2d36c.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/Archivo-Regular.b49874fe4047.woff2") format("woff2"), url("fonts/Archivo-Regular.5f982120d240.woff") format("woff"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/Archivo-Bold.a4a4d53480a6.woff2") format("woff2"), url("fonts/Archivo-Bold.aae023426e35.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Archivo"; src: url("fonts/Archivo-Italic.0e3129da0047.woff2") format("woff2"), url("fonts/Archivo-Italic.f0a54196bf50.woff") format("woff"); font-weight: 600; font-style: italic; font-display: swap; } :root { /* [§02] The five official colours, with the contrast note that governs where each may be used. Getting this wrong is the failure the guide calls out by name: "the trouble starts when lime is used for text or cyan is used for body copy." */ --vmug-navy: #1e345d; /* Ground 12.3:1 on white — safe at any size */ --vmug-cyan: #00a0df; /* Action 2.9:1 on white — FILLS AND RULES ONLY */ --vmug-lime: #c3d500; /* Highlight 12.8:1 with BLACK on top */ --vmug-sage: #77bc7f; /* Support 9.3:1 with BLACK on top */ --vmug-ink: #000000; /* Type */ /* Derived neutrals. Not brand colours in their own right. */ --vmug-mist: #eaf3ee; /* page grounds */ --vmug-deep: #14243f; /* gradient ends */ --vmug-rule: rgba(30, 52, 93, .14); /* [§03] Three faces. The fourth, Caveat Brush, is marketing only. */ --vmug-display: "Archivo Black", "Archivo", "Helvetica Neue", Arial, sans-serif; --vmug-ui: "Archivo", "Helvetica Neue", Arial, sans-serif; --vmug-body: "Inter", "Helvetica Neue", Arial, sans-serif; /* [§04] gives 8% for the bridge on light surfaces. That is a print value — on a backlit screen, over the wash, it disappears. Tune it live before committing a number: document.body.style.setProperty("--vmug-bridge-opacity", "0.2") then put the value you like here. */ --vmug-bridge-opacity: 0.22; /* Size and placement of the bridge. [§04] anchors it to the lower-left, bleeding off the corner — which assumes a poster, not a 2600px browser window where the lower-left is a long way from anything. These are the knobs; all four take live values: document.body.style.setProperty("--vmug-bridge-width", "110%") document.body.style.setProperty("--vmug-bridge-height", "70vh") document.body.style.setProperty("--vmug-bridge-bottom", "4%") document.body.style.setProperty("--vmug-bridge-left", "-6%") */ --vmug-bridge-width: 85%; --vmug-bridge-height: 75vh; --vmug-bridge-left: -4%; --vmug-bridge-bottom: 2%; /* The content column's surface. Transparent lets the wash run clean behind everything; opaque white hides it. 0.68 sits between: the wash and the bridge read through, and body copy keeps a surface to sit on. Tune live: document.body.style.setProperty("--vmug-box-bg", "rgba(255,255,255,.55)") Note this is set on :root, so the console needs it on documentElement: document.documentElement.style.setProperty("--vmug-box-bg", "...") */ --vmug-box-bg: rgba(255, 255, 255, 0.68); /* body comes from primary_font — set it to Inter in Shop design */ } /* -------------------------------------------------------------------------- [§03] Typography -------------------------------------------------------------------------- Display: Archivo Black, 400 only, tracking -2%, sentence case. UI: Archivo 600/700 for labels, buttons, eyebrows. Body: Inter 400/500, 1.6 line height — via primary_font, not repeated here. -------------------------------------------------------------------------- */ .page-header h1, h1, h2, h3, .panel-title, .product-row .product-name { font-family: var(--vmug-display); font-weight: 400; /* Archivo Black is already 900 by design */ letter-spacing: -0.02em; /* [§03] tracking -2% */ font-synthesis: none; /* stop the browser faking a heavier cut */ -webkit-font-smoothing: antialiased; } /* pretix nests the event date inside the heading as , so it inherits the display face and the -2% tracking meant for it. [§03] gives that tracking to Archivo Black only; a date is metadata and belongs in the body face. Without this it reads as part of the title and collides with a long one. */ h1 small, h2 small, h3 small, .content-header small, .page-header h1 small { display: block; /* its own line — event titles run long */ font-family: var(--vmug-body); font-weight: 400; font-size: 0.5em; /* Bootstrap's inline 65% is large on a new line */ letter-spacing: 0; margin: 0.35em 0 0; white-space: normal; /* overrides pretix's nowrap, now that it wraps */ color: #555; } /* UI chrome: buttons, labels, form legends, table headers. */ .btn, label, legend, th, .nav-tabs > li > a, .eyebrow { font-family: var(--vmug-ui); font-weight: 600; letter-spacing: 0; } body { line-height: 1.6; /* [§03] Inter body, 1.6 */ } /* [§06] All-caps is reserved for eyebrows and speaker name plates, always at 0.14em tracking. Never all-caps a v-prefixed term — uppercasing vBeers destroys the lowercase v, so this class is opt-in rather than applied to any heading wholesale. */ .vmug-eyebrow { font-family: var(--vmug-ui); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78em; color: var(--vmug-navy); } /* -------------------------------------------------------------------------- [§04] The harbour wash -------------------------------------------------------------------------- Three soft radial fields at 14-34% opacity: sage upper-left, cyan upper-right, lime lower-right. Values copied verbatim from the guide. The guide says every piece sits on this. A ticket shop is a transactional page rather than artwork, so it is applied to the page ground only and left well behind the content. To switch it off, comment out this one rule — nothing else depends on it. -------------------------------------------------------------------------- */ body { background-color: var(--vmug-mist); background-image: radial-gradient(52% 62% at 12% 22%, rgba(119, 188, 127, .34), transparent 68%), radial-gradient(46% 58% at 86% 12%, rgba(0, 160, 223, .30), transparent 70%), radial-gradient(58% 66% at 72% 96%, rgba(195, 213, 0, .16), transparent 66%); background-attachment: fixed; background-repeat: no-repeat; } /* [§04] Bridge line art, 2pt strokes bleeding off the lower-left corner. A pseudo-element rather than a fourth background layer, because CSS cannot set the opacity of a single background layer — this way the strength is one variable instead of a rebuild. Artwork is the guide's own, extracted from sydney-vmug-brand-guide.html. */ body::before { content: ""; position: fixed; left: var(--vmug-bridge-left, -4%); bottom: var(--vmug-bridge-bottom, 2%); width: var(--vmug-bridge-width, 85%); height: var(--vmug-bridge-height, 75vh); background: url("harbour-bridge.276b307e49b0.svg") left bottom / contain no-repeat; opacity: var(--vmug-bridge-opacity, 0.22); pointer-events: none; z-index: 0; } /* The wash is the page ground [§04], so the content column does not cover it. Panels below stay opaque, which is where body copy actually lives. */ .main-box { background: var(--vmug-box-bg, transparent); margin-left: auto; /* pretix sets `margin: 20px auto`; keep the centring */ margin-right: auto; border-radius: 0; /* square, so no inset panel edge reads as a stray line */ position: relative; /* with z-index below, keeps content above the bridge */ z-index: 1; } /* Content panels sit on paper so body copy never lands on a colour field. */ .panel, .card, .checkout-button-row, .product-row { background-color: #ffffff; } /* -------------------------------------------------------------------------- Chrome removal -------------------------------------------------------------------------- Two lines pretix inherits from Bootstrap 3 that fight the brand. 1. .page-header carries `border-bottom: 1px solid #eee` from Bootstrap's _type.scss. pretix only clears it for .page-header.logo-large, so a standard-size logo gets a grey rule underneath it. Confirmed on the live DOM as 0.67px solid rgb(238,238,238). 2. .main-box is inset with `margin: 20px auto` and a border-radius whenever the page background is not white — which setting Harbour Mist makes true. That leaves a sliver of mist down each side that reads as a vertical line. Squaring it off lets the harbour wash run edge to edge, which is closer to what [§04] describes anyway. -------------------------------------------------------------------------- */ .page-header { border-bottom: none; } /* -------------------------------------------------------------------------- [§01] Logo size -------------------------------------------------------------------------- pretix serves the organiser logo at one of two thumbnail sizes: 5000x120 (capped at 120px tall) when organizer_logo_image_large is off, or 1170 wide when it is on, in which case pretix stretches it to width:100%. Turn organizer_logo_image_large ON so the served file is high resolution, then cap it here instead of letting it run full width. Upscaling the 120px thumbnail with CSS would only make it soft. -------------------------------------------------------------------------- */ .page-header.logo-large img.organizer-logo { width: auto; max-width: 300px; /* the one number to tune */ height: auto; } /* -------------------------------------------------------------------------- [§05] The facet wedge — DELIBERATELY NOT USED -------------------------------------------------------------------------- The guide gives the wedge as one of three layout devices: a right-angled triangle in lime or sage, anchored to the right edge, one per piece. It is off here by choice. On a poster the wedge has a job — it gives the QR code a home and balances a large empty field. On a shop header there is no QR and no empty field, so it reads as decoration stuck to the corner rather than as structure. The harbour wash and the bridge line art carry the brand on this page without it. To bring it back, uncomment. The 88px width and the right anchor are the guide's proportions. .page-header { position: relative; overflow: hidden; } .page-header::after { content: ""; position: absolute; top: 0; right: 0; width: 88px; height: 100%; background: var(--vmug-sage); clip-path: polygon(100% 0, 100% 100%, 0 100%); pointer-events: none; } @media (max-width: 600px) { .page-header::after { display: none; } } -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- [§05] The speaker rule -------------------------------------------------------------------------- "A two-tone sage-to-lime rule under every speaker name, 4 px, full width of the name block. It separates the name from the role without a box." [§06] Speaker credit: name in Archivo Black, then role and employer on one line in italics — "Product Manager · VMware Cloud Foundation". Usage in frontpage_text, which keeps p/div and class attributes:

Sentil Velaytham

Principal Engineer · Example Co

No image is involved, so pretix stripping out of frontpage_text does not affect this device at all. Headshots are a separate question — see docs/FINDINGS.md on the front_page_top signal. -------------------------------------------------------------------------- */ .vmug-speaker { margin: 1.5rem 0; } .vmug-speaker-name { display: inline-block; font-family: var(--vmug-display); font-weight: 400; letter-spacing: -0.02em; font-size: 1.15rem; color: var(--vmug-ink); /* [§02] headlines on light surfaces are black */ margin: 0; padding-bottom: 6px; border-bottom: 4px solid transparent; border-image: linear-gradient(90deg, var(--vmug-sage), var(--vmug-lime)) 1; } .vmug-speaker-role { font-style: italic; margin: 0.4rem 0 0; color: #333; } /* -------------------------------------------------------------------------- [§05] The community strip -------------------------------------------------------------------------- "A lime bar across the foot carrying the three things every meeting offers. Black type, 0.06em tracking." [§06] Sentence case deliberately, NOT all-caps: uppercasing vBeers destroys the lowercase v that makes it the community's word. Generated content, because the settings API cannot add a footer element. It is therefore tied to pretix's footer markup and is the first thing to re-check after a pretix upgrade. -------------------------------------------------------------------------- */ .vmug-community-strip, footer.text-center::before { content: "vBeers · Technical presentations · vCommunity networking"; display: block; margin: 2rem -9999px 0; padding: 0.9rem 9999px; background: var(--vmug-lime); color: var(--vmug-ink); /* [§02] lime ALWAYS pairs with black */ font-family: var(--vmug-ui); font-weight: 600; letter-spacing: 0.06em; text-align: center; } /* -------------------------------------------------------------------------- [§02] Accents — the 60/25/10/5 split -------------------------------------------------------------------------- 60% white or mist, 25% navy, 10% sage or cyan, 5% lime. Lime earns its energy by being rare: the community strip is its one appearance, so nothing below uses it. -------------------------------------------------------------------------- */ /* Cyan is 2.9:1 — fills and rules only. Safe as a hairline, never as text. */ hr, .panel > .panel-heading { border-color: var(--vmug-rule); } .panel > .panel-heading { border-top: 3px solid var(--vmug-cyan); } /* primary_color already sets the button fill to navy via SCSS; this only adds the UI face and matches the guide's tracking. */ .btn-primary { font-family: var(--vmug-ui); font-weight: 700; letter-spacing: 0; } /* Sage panels take black type, per the 9.3:1 note. Never white. */ .vmug-panel-sage { background: var(--vmug-sage); color: var(--vmug-ink); padding: 1rem; } /* -------------------------------------------------------------------------- Deliberately not implemented -------------------------------------------------------------------------- Bridge line art [§04] — 2 pt strokes bleeding off the lower-left at 8% opacity. It is an SVG asset, not CSS, and the guide's four master files are logo artwork rather than the bridge. Add it as a background-image on body once the SVG exists. Caveat Brush [§03] — marker face, two words per piece. No place on a checkout flow. The QR code [§05] — pretix generates its own ticket QR codes and the branded code resolves to the shop itself, so it would be circular here. -------------------------------------------------------------------------- */ /* === vmug-inline-images-1.7.0 — appended from the 1.7.0 bundle === */ /* --------------------------------------------------------------------------- * Inline images — append this block to pretix_vmug_brand/static/vmugbrand/brand.css * * Pairs with vmug-images.js. The JS turns pretix's stripped redirect links back * into elements; these rules size and place them. * * Sizing has to live here because pretix gives no way to set width from the * shop text — the markup is generated, so the class is the only hook. * ------------------------------------------------------------------------ */ /* --- Anti-flash ----------------------------------------------------------- * html.vmug-img-js is set by the script the moment it parses, in , * before the body renders. In-scope redirect links stay hidden until the * script has decided what each one is. Links it leaves alone get * .vmug-link-ok and come straight back. * * visibility (not display) keeps the layout box, so nothing reflows on swap. * If the script never runs or throws, it removes .vmug-img-js and every rule * below stops applying — the page falls back to plain links. */ .vmug-img-js #content a[href*="/redirect/"], .vmug-img-js .site-notice-bottom a[href*="/redirect/"] { visibility: hidden; } .vmug-img-js #content a.vmug-link-ok, .vmug-img-js .site-notice-bottom a.vmug-link-ok { visibility: visible; } /* --- Base ---------------------------------------------------------------- */ .vmug-img { display: inline-block; vertical-align: middle; max-width: 100%; height: auto; } /* --- Speaker headshots ---------------------------------------------------- * Circular crop at a fixed box. object-fit stops a non-square source being * squashed — headshots arrive at whatever dimensions the speaker sent, and * nothing in the ingest path normalises them. */ .vmug-img-headshot { width: 96px; height: 96px; object-fit: cover; object-position: center top; border-radius: 50%; margin: 0 0.9rem 0.4rem 0; background: var(--vmug-box-bg, rgba(255, 255, 255, 0.68)); box-shadow: 0 1px 4px rgba(30, 52, 93, 0.18); } /* Sits to the left of the name when the link is written immediately before the presenter line, which is the intended authoring pattern. */ .vmug-img-headshot + strong, .vmug-img-headshot + b { vertical-align: middle; } /* --- Sponsor logos -------------------------------------------------------- * Height-constrained rather than width-constrained, so wordmarks of different * aspect ratios sit on a common baseline. No crop — a clipped sponsor logo is * a conversation nobody wants to have. */ .vmug-img-sponsor { max-height: 44px; width: auto; margin: 0.5rem 1.25rem 0.5rem 0; } .site-notice-bottom .vmug-img-sponsor { max-height: 36px; margin: 0.4rem 0.9rem; } /* --- Mobile --------------------------------------------------------------- * pretix's presale grid is Bootstrap 3. Below the sm breakpoint the content * column is full width and a 96px circle crowds the name, so the headshot * goes above the text rather than beside it. */ @media (max-width: 767px) { .vmug-img-headshot { display: block; width: 80px; height: 80px; margin: 0 0 0.5rem 0; } .vmug-img-sponsor { max-height: 32px; } } /* --- Print ---------------------------------------------------------------- * Attendees do print event pages. Circles and shadows waste toner. */ @media print { .vmug-img-headshot { box-shadow: none; border-radius: 4px; } }