/* ============================================================================ * PolMeth Europe — stylesheet * -------------------------------------------------------------------------- * All colours, fonts and spacing live in the :root block below. Change them * in one place to restyle the whole site. To switch to a different look * (e.g. white + single accent), you only need to edit these variables. * ========================================================================== */ :root { /* ---- Palette (Modern: EU-blue + white) ---- */ --navy: #142c6b; /* primary deep blue (EU-leaning) — hero, headings */ --navy-dark: #0b1c46; /* darker blue — gradients, footer */ --bg: #ffffff; /* page background */ --cream: #f4f7fc; /* subtle cool band for alternating sections */ --card: #ffffff; /* cards */ --ink: #0f172a; /* body text */ --muted: #5b6678; /* secondary text */ --accent: #2563eb; /* vivid blue — links, buttons, highlights */ --accent-soft: #7da2f0; /* light blue — wordmark, active state */ --rule: #e6e9f1; /* hairline borders */ --rule-dark: rgba(255,255,255,.16); --white: #ffffff; /* ---- Typography ---- */ /* Modern sans throughout. For an even crisper look, uncomment the Inter in index.html's (the stack below already prefers Inter). */ --font-head: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ---- Layout ---- */ --maxw: 1100px; --pad: clamp(1.1rem, 4vw, 2.5rem); --radius: 12px; --shadow: 0 1px 2px rgba(15,23,42,.05); } /* ---- Reset-ish ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 1.02rem; line-height: 1.65; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.15; color: var(--navy); font-weight: 700; letter-spacing: -.015em; margin: 0 0 .5em; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.2rem); letter-spacing: -.03em; } h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); } h3 { font-size: 1.22rem; } p { margin: 0 0 1rem; } .container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); } .muted { color: var(--muted); } .center { text-align: center; } /* =============================== Header ================================== */ .site-header { background: var(--bg); color: var(--ink); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--rule); } .site-header .container { display: flex; align-items: center; justify-content: space-between; min-height: 70px; } .brand { display: flex; align-items: baseline; gap: .4ch; color: var(--navy); } .brand:hover { text-decoration: none; } .brand .b1 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; } .brand .b2 { font-family: var(--font-head); font-size: 1.3rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); } .nav { display: flex; align-items: center; gap: clamp(.6rem, 2vw, 1.7rem); } .nav a { color: #44506a; font-size: .95rem; font-weight: 500; padding: .35rem 0; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--accent); text-decoration: none; } .nav a.active { color: var(--accent); border-bottom-color: var(--accent); } .nav-toggle { display: none; background: none; border: 0; cursor: pointer; padding: .4rem; color: var(--navy); } .nav-toggle svg { width: 26px; height: 26px; } @media (max-width: 760px) { .nav-toggle { display: inline-flex; } .nav { position: absolute; top: 70px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--rule); box-shadow: 0 12px 24px rgba(15,23,42,.08); padding: .25rem var(--pad) .75rem; display: none; } .nav.open { display: flex; } .nav a { padding: .8rem 0; border-bottom: 1px solid var(--rule); } .nav a:last-child { border-bottom: 0; } .nav a.active { border-bottom-color: var(--rule); color: var(--accent); } } /* =============================== Buttons ================================= */ .btn { display: inline-flex; align-items: center; gap: .5ch; font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: .7rem 1.3rem; border-radius: var(--radius); border: 1.5px solid transparent; cursor: pointer; transition: .15s; } .btn:hover { text-decoration: none; transform: translateY(-1px); } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover { background: #1d4ed8; color: #fff; } .btn-ghost { background: transparent; color: var(--navy); border-color: var(--rule); } .btn-ghost:hover { border-color: var(--accent); color: var(--accent); } .btn-on-navy { background: rgba(255,255,255,.95); color: var(--navy); } .btn-on-navy:hover { background: #fff; color: var(--navy-dark); } .btn-on-navy-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); } .btn-on-navy-ghost:hover { border-color: #fff; color: #fff; } /* =============================== Hero =================================== */ .hero { background: var(--bg); color: var(--ink); padding: clamp(3.2rem, 8vw, 5.5rem) 0 clamp(2.6rem, 6vw, 3.8rem); } .hero .eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--accent); margin-bottom: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: .7rem; } .hero .eyebrow::before { content: ""; width: 32px; height: 2px; background: var(--accent); display: inline-block; } .hero h1 { color: var(--navy); max-width: 19ch; } .hero .lede { font-size: clamp(1.05rem, 2vw, 1.25rem); color: var(--muted); max-width: 58ch; } .hero .actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.8rem; } /* =============================== Sections =============================== */ .section { padding: clamp(2.5rem, 6vw, 4.5rem) 0; } .section + .section { border-top: 1px solid var(--rule); } .section-cream { background: var(--cream); } .section-white { background: var(--card); } .lead-row { display: grid; grid-template-columns: 1fr; gap: 1rem; } .kicker { text-transform: uppercase; letter-spacing: .15em; font-size: .78rem; color: var(--accent); font-weight: 700; margin-bottom: .6rem; } .prose { max-width: 64ch; } .prose p { font-size: 1.06rem; } /* Page header (for inner pages) */ .page-head { background: var(--bg); color: var(--ink); padding: clamp(2.6rem, 6vw, 3.6rem) 0 clamp(1.4rem, 3vw, 2rem); border-bottom: 1px solid var(--rule); } .page-head h1 { color: var(--navy); margin-bottom: .55rem; } .page-head h1::after { content: ""; display: block; width: 54px; height: 3px; border-radius: 2px; background: var(--accent); margin-top: .7rem; } .page-head p { color: var(--muted); max-width: 62ch; margin: 0; } .page-head p a { color: var(--accent); } /* =============================== Cards ================================== */ .grid { display: grid; gap: 1.3rem; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 560px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } .card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--shadow); } .card h3 { margin-bottom: .3rem; } /* Feature columns on home (flat, editorial — blue rule on top) */ .feature { padding-top: 1.4rem; border-top: 2px solid var(--accent); } .feature .icon { width: 38px; height: 38px; color: var(--accent); margin-bottom: .8rem; } .feature .icon svg { width: 100%; height: 100%; } .feature h3 { color: var(--navy); } .feature p { font-size: .98rem; } /* =========================== Committee grid ============================= */ .people { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; } @media (max-width: 820px) { .people { grid-template-columns: repeat(2,1fr); } } @media (max-width: 480px) { .people { grid-template-columns: 1fr; } } .person { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.5rem; text-align: center; box-shadow: var(--shadow); } .person .avatar { width: 96px; height: 96px; border-radius: 50%; margin: 0 auto .9rem; object-fit: cover; background: var(--navy); display: flex; align-items: center; justify-content: center; overflow: hidden; color: #fff; font-family: var(--font-head); font-size: 1.75rem; font-weight: 700; background: linear-gradient(135deg, var(--navy) 0%, var(--accent) 100%); border: 0; } .person .name { font-family: var(--font-head); font-size: 1.12rem; color: var(--navy); font-weight: 600; } .person .role { color: var(--accent); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-top: .2rem; } .person .aff { color: var(--muted); font-size: .95rem; margin-top: .35rem; } .person .link { font-size: .9rem; display: inline-block; margin-top: .6rem; } /* =========================== Conference list ============================ */ .conf-list { display: flex; flex-direction: column; gap: 1.1rem; } .conf { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.4rem 1.6rem; box-shadow: var(--shadow); } .conf .edition { font-family: var(--font-head); font-size: 1.7rem; font-weight: 700; color: var(--accent); min-width: 2.8ch; line-height: 1.1; letter-spacing: -.01em; } .conf .meta h3 { margin-bottom: .15rem; } .conf .where { color: var(--muted); margin: 0 0 .5rem; } .conf .where strong { color: var(--ink); font-weight: 600; } .conf .links { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin-top: .4rem; } .conf .links a { font-size: .93rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35ch; } .conf.upcoming { border-color: var(--accent); border-width: 1.5px; } .badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .2rem .6rem; border-radius: 999px; background: var(--accent); color: #fff; vertical-align: middle; margin-left: .5rem; } .badge-past { background: #eef1f7; color: var(--muted); } .verify-note { font-size: .82rem; color: var(--muted); font-style: italic; margin-top: .4rem; } @media (max-width: 480px) { .conf { grid-template-columns: 1fr; gap: .4rem; } } /* =============================== News =================================== */ .news { display: flex; flex-direction: column; } .news-item { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); } .news-item:last-child { border-bottom: 0; } .news-item .date { color: var(--accent); font-weight: 600; font-size: .92rem; } .news-item h3 { font-size: 1.08rem; margin: 0 0 .2rem; } @media (max-width: 560px) { .news-item { grid-template-columns: 1fr; gap: .2rem; } } /* ===================== Next-conference highlight ======================= */ .callout { background: var(--card); color: var(--ink); border-radius: var(--radius); border: 1px solid var(--rule); border-left: 4px solid var(--accent); padding: clamp(1.5rem, 4vw, 2.4rem); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.3rem; } .callout h2 { color: var(--navy); margin: 0; } .callout p { color: var(--muted); margin: .4rem 0 0; } .callout .actions { display: flex; gap: .7rem; flex-wrap: wrap; } /* editor note (visible reminder while content is placeholder) */ .editor-note { background: #eef3ff; border: 1px solid #c9d8fb; color: #2a4a93; border-radius: var(--radius); padding: .9rem 1.1rem; font-size: .92rem; margin-bottom: 1.6rem; } .editor-note strong { color: #1d3c80; } /* definition rows (conference page facts) */ .facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .1rem; } .facts li { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; padding: .55rem 0; border-bottom: 1px solid var(--rule); } .facts .k { color: var(--muted); font-weight: 600; } @media (max-width: 480px) { .facts li { grid-template-columns: 1fr; gap: .1rem; } } /* =============================== Footer ================================= */ .site-footer { background: var(--cream); color: var(--muted); padding: 2.6rem 0 2rem; margin-top: 0; border-top: 1px solid var(--rule); } .site-footer .cols { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; } .site-footer p { color: var(--muted); } .site-footer .b1 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--navy); } .site-footer .b2 { font-family: var(--font-head); font-size: 1.2rem; font-weight: 700; letter-spacing: -.02em; color: var(--accent); } .site-footer a { color: #44506a; } .site-footer a:hover { color: var(--accent); } .site-footer nav { display: flex; flex-wrap: wrap; gap: 1rem; } .site-footer .legal { margin-top: 1.8rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: .85rem; color: var(--muted); } /* utilities */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .stack > * + * { margin-top: 1rem; } .icon-inline { width: 1em; height: 1em; vertical-align: -.12em; }