/* ============================================================================ PQC — Design tokens + page styles :root design tokens (colors, type, spacing, ...) followed by the page-specific rules that consume them, in a single file so the two never drift out of sync. FONTS ----- For a STANDALONE preview (opening the HTML from disk), add this line to so the fonts resolve without the site theme: The Font Awesome variables (--fa-*) are injected by the Font Awesome library itself and are intentionally omitted here. ============================================================================ */ :root { /* ---- Type families ---- */ --font-family-text: "Poppins", sans-serif; /* body copy */ --font-family-title: "Space Grotesk", sans-serif; /* headings */ /* ---- Brand colours ---- */ --color-black: #121212; --color-green: #2c826b; /* brand green — links, headings, accents */ --color-green-light: #34dcb3; /* light green — hovers, highlights */ --color-grey-verydark: #272727; --color-grey-dark: #575757; /* secondary text */ --color-grey: #d1d1d1; /* borders / rules */ --color-grey-light: #f0f0f0; /* light panels */ --color-red: #ad1a2b; /* alerts / errors */ --color-white: #fff; /* ---- Semantic slots (1→9 map to the palette order above) ---- */ --color-text-1: var(--color-black); --color-text-2: var(--color-green); --color-text-3: var(--color-green-light); --color-text-4: var(--color-grey-verydark); --color-text-5: var(--color-grey-dark); --color-text-6: var(--color-grey); --color-text-7: var(--color-grey-light); --color-text-8: var(--color-red); --color-text-9: var(--color-white); --color-background-1: var(--color-black); --color-background-2: var(--color-green); --color-background-3: var(--color-green-light); --color-background-4: var(--color-grey-verydark); --color-background-5: var(--color-grey-dark); --color-background-6: var(--color-grey); --color-background-7: var(--color-grey-light); --color-background-8: var(--color-red); --color-background-9: var(--color-white); --color-border-1: var(--color-black); --color-border-2: var(--color-green); --color-border-3: var(--color-green-light); --color-border-4: var(--color-grey-verydark); --color-border-5: var(--color-grey-dark); --color-border-6: var(--color-grey); --color-border-7: var(--color-grey-light); --color-border-8: var(--color-red); --color-border-9: var(--color-white); /* ---- Type scale (reference = 16px = 1rem) ---- */ --font-size-reference: 16; --font-size-10: calc((10 / var(--font-size-reference)) * 1rem); --font-size-12: calc((12 / var(--font-size-reference)) * 1rem); --font-size-14: calc((14 / var(--font-size-reference)) * 1rem); --font-size-16: calc((16 / var(--font-size-reference)) * 1rem); --font-size-18: calc((18 / var(--font-size-reference)) * 1rem); --font-size-20: calc((20 / var(--font-size-reference)) * 1rem); --font-size-22: calc((22 / var(--font-size-reference)) * 1rem); --font-size-24: calc((24 / var(--font-size-reference)) * 1rem); --font-size-26: calc((26 / var(--font-size-reference)) * 1rem); --font-size-30: calc((30 / var(--font-size-reference)) * 1rem); --font-size-36: calc((36 / var(--font-size-reference)) * 1rem); --font-size-50: calc((50 / var(--font-size-reference)) * 1rem); --font-size-70: calc((70 / var(--font-size-reference)) * 1rem); --font-size-default: var(--font-size-14); --font-size-smaller: smaller; /* ---- Weights / styles ---- */ --font-weight-light: 300; --font-weight-regular: 400; --font-weight-bold: 700; --font-style-italic: italic; --font-variant-small-caps: all-small-caps; /* ---- Line heights ---- */ --line-height-100: 100%; --line-height-120: 120%; --line-height-130: 130%; --line-height-150: 150%; --line-height-default: var(--line-height-150); /* ---- Spacing: margins ---- */ --margin-2: 2px; --margin-5: 5px; --margin-8: 8px; --margin-10: 10px; --margin-16: 16px; --margin-20: 20px; /* ---- Spacing: paddings ---- */ --padding-5: 5px; --padding-8: 8px; --padding-10: 10px; --padding-14: 14px; --padding-16: 16px; --padding-20: 20px; --padding-24: 24px; --padding-30: 30px; --padding-40: 40px; --padding-50: 50px; --padding-80: 80px; --padding-100: 100px; /* ---- Spacing: gaps ---- */ --gap-4: 4px; --gap-6: 6px; --gap-10: 10px; --gap-12: 12px; --gap-14: 14px; --gap-16: 16px; --gap-18: 18px; --gap-20: 20px; --gap-30: 30px; --gap-40: 40px; --gap-60: 60px; --gap-80: 80px; --gap-160: 160px; --gap-main: var(--gap-40); /* ---- Layout widths / heights ---- */ --width-page-print: 1000px; --max-width-inner: 1920px; --max-width-main: 1200px; --max-width-content: 940px; --max-width-sidebar: calc(var(--max-width-main) - var(--gap-main) - var(--max-width-content)); --height-header-small: 80px; --height-header-large: 130px; /* ---- Radii / borders ---- */ --border-radius-5: 5px; --border-radius-10: 10px; --border-radius-round: 50%; --border-width-1: 1px; --border-width-2: 2px; --border-width-4: 4px; /* ---- Aspect ratios ---- */ --aspect-ratio-16-9: 16/9; --aspect-ratio-3-2: 3/2; --aspect-ratio-1: 1; --aspect-ratio-2-3: 2/3; /* ---- Opacity ---- */ --opacity-0: 0; --opacity-1: 1; /* ---- Transitions ---- */ --transition-duration-0-25: 0.25s; --transition-duration-0-5: 0.5s; --transition-function-ease: ease; /* ---- Z-index stack ---- */ --z-index-menu: 40; --z-index-skip-links: 30; --z-index-header: 20; --z-index-cookies: 10; --z-index-above: 1; --z-index-base: 0; --z-index-below: -1; } /* Page shell — role variables map onto the design tokens above. Two-column flex layout: main content on the left, sticky TOC sidebar on the right (collapses to a single column on mobile, see media query below). */ .pqc-page { /* Local roles mapped onto the PQC design tokens above */ --navy: var(--color-black); /* section headings & labels — bitflip c-title--appearance-dark */ --teal: var(--color-green); /* time labels */ --green: var(--color-green-light); /* light accent */ --blue: var(--color-green); /* links (PQC uses green) */ --ink: var(--color-black); /* body text #121212 */ --ink-soft: var(--color-grey-dark); /* secondary #575757 */ --line: var(--color-grey); /* rules #d1d1d1 */ --mint: var(--color-grey-light); /* light panel #f0f0f0 */ display: flex; align-items: flex-start; gap: var(--gap-40, 2.5rem); font-family: var(--font-family-text, "Poppins", sans-serif); color: var(--ink); line-height: 1.5; font-size: var(--font-size-default); /* 14px, like BITFLIP body */ } .pqc-page, .pqc-page *, .pqc-page *::before, .pqc-page *::after { box-sizing: border-box; } .pqc-page h1, .pqc-page h2, .pqc-page h3 { font-family: var(--font-family-title, "Space Grotesk", sans-serif); line-height: 1.3; } /* Main content column (the max-width the page used to carry directly) */ .pqc-content { flex: 1 1 auto; min-width: 0; max-width: 660px; } /* Table of contents — mirrors the "Table of contents" block on the BITFLIP page (built there via JS from the h2 anchors). Sticks to the left as the page scrolls, and highlights the section in view. */ .pqc-toc { flex: 0 0 190px; width: 190px; position: sticky; top: 1.5rem; align-self: flex-start; font-size: var(--font-size-14); } .pqc-toc-heading { margin: 0 0 0.7rem; display: flex; align-items: center; justify-content: flex-end; width: 100%; } /* Toggle button (the accordion "selector") — a caret only, no label. Hidden on desktop (the list is always shown there, see media query below). It becomes the real accordion opener on mobile. */ .pqc-toc-toggle { display: none; align-items: center; justify-content: center; background: none; border: none; padding: 0.2rem; margin: 0 0 0 -0.2rem; color: var(--ink-soft); font: inherit; cursor: default; pointer-events: none; } .pqc-toc-toggle:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } .pqc-toc-caret { display: inline-block; font-size: var(--font-size-12); } .pqc-toc ul { list-style: none; margin: 0; padding: 0; } .pqc-toc li { margin: 0; } .pqc-toc-link { display: block; padding: 0.35rem 0 0.35rem 0.7rem; border-left: 2px solid var(--line); color: var(--ink-soft); text-decoration: none; line-height: 1.3; transition: color 0.2s ease, border-color 0.2s ease; } .pqc-toc-link:hover { color: var(--ink); } .pqc-toc-link.is-active { color: var(--color-green); border-left-color: var(--color-green); font-weight: 600; } /* Anchored h2s scroll to a bit below the top, clear of any fixed site header, instead of landing flush with the viewport edge. */ .pqc-page h2[id] { scroll-margin-top: 1.5rem; } /* Mobile layout: single column, and the TOC becomes a tap-to-expand accordion instead of a sticky sidebar. */ @media (max-width: 900px) { .pqc-page { display: block; } .pqc-toc { position: static; width: auto; margin: 0 0 1.8rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); } .pqc-toc-heading { margin: 0; padding: 0.5rem 0; justify-content: space-between; } .pqc-toc-toggle { display: inline-flex; cursor: pointer; pointer-events: auto; } .pqc-toc-caret { transition: transform 0.2s ease; } .pqc-toc.is-open .pqc-toc-caret { transform: rotate(180deg); } .pqc-toc > ul { display: none; margin-top: 0.7rem; } .pqc-toc.is-open > ul { display: block; } .pqc-content { max-width: 100%; } } /* Header: PQC logo overlaid on the ECW banner, on a white plate */ .pqc-header { position: relative; margin: 0 0 2rem; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; line-height: 0; } .pqc-header-strip img { display: block; width: 100%; height: auto; } .pqc-header-logo { position: absolute; top: 50%; left: 2.5%; transform: translateY(-50%); background: #ffffff; border-radius: 8px; padding: 0.6rem 0.9rem; box-shadow: 0 2px 12px rgba(11, 20, 100, 0.22); line-height: 0; } .pqc-header-logo img { display: block; width: 24vw; max-width: 210px; min-width: 140px; height: auto; } /* Language toggle — sits at the right of the TOC heading row, in the space the old "on this page" title used to occupy. */ .pqc-lang-toggle { display: flex; align-items: center; gap: 0.3rem; line-height: 1; } .pqc-lang-toggle a, .pqc-lang-toggle span { display: inline-flex; align-items: center; gap: 0.3rem; font-size: var(--font-size-14); font-weight: 700; padding: 0.2rem 0.4rem; border-radius: 999px; text-decoration: none; } .pqc-lang-toggle a { color: var(--ink-soft); } .pqc-lang-toggle a:hover { color: var(--ink); background: var(--mint); } .pqc-lang-toggle span.is-current { color: var(--ink); } .pqc-lang-toggle .pqc-lang-sep { color: var(--line); padding: 0; font-weight: 400; } /* Section headings (About, Programme, Practical infos, ...) */ .pqc-page h2 { font-size: var(--font-size-26); color: var(--navy); margin: 2.4rem 0 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--line); } .pqc-page ul { margin: 0 0 1rem; padding-left: 1.2rem; } .pqc-page li { margin-bottom: 0.5rem; } /* Organising committee — condensed two-column list of names, tighter than the default .pqc-page li spacing (no bullets, minimal gaps). */ ul.pqc-committee-list { list-style: none; padding-left: 0; margin: 0 0 1.2rem; columns: 2; column-gap: 1.5rem; } ul.pqc-committee-list li { margin: 0 0 0.25rem; line-height: 1.35; break-inside: avoid; } @media (max-width: 480px) { ul.pqc-committee-list { columns: 1; } } /* Info list — used for "Practical infos" and submission details, matching BITFLIP's own pattern: a bold label, then its content stacked underneath, as plain list items (no side-by-side columns). */ ul.pqc-info-list { list-style: none; padding-left: 0; margin: 0 0 1.2rem; } ul.pqc-info-list li { padding: 0.75rem 0; } ul.pqc-info-list li strong { display: block; color: var(--navy); margin-bottom: 0.2rem; } ul.pqc-info-list li p { margin: 0; color: var(--ink-soft); } ul.pqc-info-list li strong .pqc-icon { color: var(--ink); width: 1.1em; margin-right: 0.4rem; display: inline-block; text-align: center; } /* Inline variant — label and value sit on the same line, used for the poster submission practical details. */ ul.pqc-info-list--inline li { display: flex; flex-wrap: wrap; align-items: baseline; margin-bottom: 0; padding: 0.2rem 0; padding-left: 1.2rem; } ul.pqc-info-list--inline li strong { display: inline; flex: 0 0 auto; margin: 0 0.4rem 0 0; } ul.pqc-info-list--inline li p { flex: 1 1 auto; } /* Programme list — each session stacked: time label, then title, then a short description, matching BITFLIP's own agenda items (time bullet followed by a nested heading). */ ul.pqc-programme-list { list-style: none; padding-left: 0; margin: 0 0 1rem; } ul.pqc-programme-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--line); } ul.pqc-programme-list li:last-child { border-bottom: none; } ul.pqc-programme-list .time { display: block; font-size: var(--font-size-14); font-weight: 700; color: var(--teal); letter-spacing: 0.03em; margin-bottom: 0.3rem; } ul.pqc-programme-list h3.title { margin: 0 0 0.3rem; font-size: var(--font-size-18); font-weight: 700; color: var(--color-black, #121212); } ul.pqc-programme-list .desc { margin: 0; color: var(--ink-soft); font-size: var(--font-size-default); line-height: 1.55; } .pqc-schedule-note { color: var(--ink-soft); font-size: 0.92rem; font-style: italic; margin-top: 1rem; } /* Italic note under a section intro */ .pqc-note { color: var(--ink-soft); font-style: italic; margin: 0 0 1.4rem; } /* Call-to-action link, e.g. "Register for the conference" */ .pqc-cta { font-weight: 600; color: var(--blue); text-decoration: underline; } .pqc-cta:hover { color: var(--teal); } .pqc-page a { color: var(--blue); } .pqc-page a:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; } /* Partner logos — single row at the bottom of the page */ .pqc-partners { margin-top: 2.4rem; padding-top: 1.6rem; border-top: 1px solid var(--line); } .pqc-partners-heading { margin: 0 0 1rem; font-size: var(--font-size-12); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); } .pqc-partners-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 1.1rem; } .pqc-partners-row img { display: block; height: 28px; width: auto; } /* Tablets/narrow: tighten up the partner-logo row */ @media (max-width: 720px) { .pqc-partners-row { gap: 0.5rem 0.9rem; } .pqc-partners-row img { height: 24px; } } /* Small phones: shrink the padding around the overlaid PQC logo */ @media (max-width: 520px) { .pqc-header-logo { padding: 0.45rem 0.7rem; } }