/* ============================================================================ NIOB Lagos portal — two-theme design system. Every colour is a CSS variable. The default :root values are the AURORA theme (light, airy, modern SaaS). [data-theme="onyx"] overrides them for a dark, high-contrast look. The theme is set on and persisted in a cookie (see the theme switcher). Component markup is shared — only the variables and a handful of theme-scoped tweaks differ. Brand colours (forest green / gold) come from the live nioblagos.org. ========================================================================== */ /* ---------- AURORA (light) — default ---------- */ :root { --brand: #1f7a4d; --brand-deep: #14512f; --brand-soft: #3a9366; --brand-tint: #e9f4ee; --gold: #c9a227; --gold-soft: #e7c65a; --magenta: #c4157a; /* chapter magenta, legible on light */ --magenta-fill: #e5188c; /* from the "Lagos State Chapter" wordmark */ --magenta-bright: #f24aa6; --magenta-bg: #fce4f1; --bg: #eef2f0; --surface: #ffffff; --surface-2: #f6f9f7; --ink: #16211c; --ink-soft: #5d6b64; /* Used in 12 places (.mono-sm, .count-note, filter labels, the pager…) but was never defined, so all of it fell back to the inherited colour. */ --muted-solid: #6b7a72; --line: #e2e8e4; --on-brand: #ffffff; --header-bg: #ffffff; --header-text: #16211c; --footer-bg: #16211c; --danger: #d0392b; --warn: #b7791f; --ok: #1f7a4d; --radius: 14px; --radius-lg: 22px; --shadow: 0 8px 26px rgba(20, 45, 35, 0.07); --shadow-lg: 0 20px 50px rgba(20, 45, 35, 0.16); --ring: 0 0 0 3px rgba(31, 122, 77, 0.18); --font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --serif: "IBM Plex Serif", "Iowan Old Style", Georgia, serif; } /* ---------- ONYX (dark) ---------- */ [data-theme="onyx"] { --brand: #34d17f; --brand-deep: #1f9a5c; --brand-soft: #6ee2a5; --brand-tint: #16261f; --gold: #e7c65a; --gold-soft: #f0d888; --magenta: #ff5bb0; --magenta-fill: #e5188c; --magenta-bright: #ff7cc2; --magenta-bg: rgba(229,24,140,.16); --bg: #0d1311; --surface: #161f1b; --surface-2: #1c2823; --ink: #e9f1ec; --ink-soft: #9db0a7; --muted-solid: #93a79d; --line: #26332c; --on-brand: #06140d; --header-bg: #101815; --header-text: #e9f1ec; --footer-bg: #0a0f0d; --danger: #ff6b5e; --warn: #e7b23c; --ok: #34d17f; --shadow: 0 8px 26px rgba(0, 0, 0, 0.4); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); --ring: 0 0 0 3px rgba(52, 209, 127, 0.25); } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.55; -webkit-font-smoothing: antialiased; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- Top bar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.55rem 1.75rem; background: var(--header-bg); color: var(--header-text); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 30; backdrop-filter: saturate(1.2); } .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; font-size: 1.12rem; color: var(--header-text); letter-spacing: 0.01em; } /* Logo enlarged 40px -> 58px. The header pads down to 0.55rem so the bar itself grows only slightly, and the logo shrinks on phones where a 58px mark would crowd out the menu button. */ .brand img { height: 58px; width: auto; display: block; border-radius: 8px; } @media (max-width: 560px) { .brand img { height: 46px; } } .brand .brand-text span { color: var(--brand); } .brand .brand-sub { display: block; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .inline { display: inline; margin: 0; } .linkbtn { background: none; border: 0; color: var(--ink-soft); cursor: pointer; font: inherit; font-weight: 600; padding: 0.4rem 0.5rem; } .linkbtn:hover { color: var(--danger); } .ribbon { background: color-mix(in srgb, var(--gold) 22%, var(--surface)); color: var(--warn); text-align: center; padding: 0.4rem; font-size: 0.85rem; font-weight: 600; border-bottom: 1px solid var(--line); } .container { max-width: 1040px; margin: 0 auto; padding: 1.9rem 1.25rem 3.5rem; } /* Member portal (dashboard, payments) gets a wider container on desktop — requested so the sidebar + main content have more room than the default 1040px site-wide container. Scoped with :has() so public/marketing pages are unaffected. */ .container:has(> .pd-scope) { max-width: 1360px; } /* ---------- Theme switcher ---------- */ .theme-switch { display: flex; gap: 0.3rem; align-items: center; margin-right: 0.3rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 0.2rem; } .theme-switch a { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 0.8rem; text-decoration: none; } .theme-switch a.aurora { background: linear-gradient(135deg,#ffffff,#cfeadb); color:#14512f; border:1px solid var(--line); } .theme-switch a.onyx { background: linear-gradient(135deg, #16201c, #0d1311); color:#34d17f; } .theme-switch a.active { outline: 2px solid var(--brand); outline-offset: 1px; } /* ---------- Headings ---------- */ h1 { font-size: 1.9rem; margin: 0.2rem 0 0.4rem; letter-spacing: -0.02em; font-weight: 800; } h2 { font-size: 1.25rem; margin: 0 0 0.7rem; font-weight: 700; } h3 { font-size: 1rem; margin: 0 0 0.4rem; font-weight: 700; } .muted { color: var(--ink-soft); } .lead { color: var(--ink-soft); font-size: 1.08rem; } .section-title { text-transform: uppercase; letter-spacing: 0.04em; color: var(--brand-deep); border-left: 5px solid var(--gold); padding-left: 0.7rem; font-weight: 800; } [data-theme="onyx"] .section-title { color: var(--brand); } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.45rem; margin-bottom: 1.15rem; box-shadow: var(--shadow); } .grid { display: grid; gap: 1.15rem; } .grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .card-green { background: linear-gradient(150deg, var(--brand), var(--brand-deep)); color: var(--on-brand); border: 0; } .card-green h2, .card-green h3 { color: var(--on-brand); } .card-green .muted { color: color-mix(in srgb, var(--on-brand) 78%, transparent); } .card-green .num { color: var(--gold-soft) !important; } .stat { text-align: left; } .stat .num { font-size: 1.8rem; font-weight: 800; color: var(--brand-deep); line-height: 1.1; } [data-theme="onyx"] .stat .num { color: var(--brand); } .stat .label { color: var(--ink-soft); font-size: 0.85rem; } /* ---------- Badges ---------- */ .badge { display: inline-block; padding: 0.2rem 0.62rem; border-radius: 999px; font-size: 0.74rem; font-weight: 700; } .badge-ok { background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); } .badge-warn { background: color-mix(in srgb, var(--warn) 18%, var(--surface)); color: var(--warn); } .badge-bad { background: color-mix(in srgb, var(--danger) 16%, var(--surface)); color: var(--danger); } .badge-muted { background: var(--surface-2); color: var(--ink-soft); } .badge-gold { background: var(--gold); color: #3a2e05; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--brand); color: var(--on-brand); border: 0; border-radius: 999px; padding: 0.64rem 1.35rem; font-weight: 700; cursor: pointer; font-size: 0.94rem; transition: transform .06s, box-shadow .15s, background .15s; } .btn:hover { background: var(--brand-deep); text-decoration: none; box-shadow: var(--shadow); } .btn:active { transform: translateY(1px); } .btn-sm { padding: 0.38rem 0.9rem; font-size: 0.85rem; } .btn-block { width: 100%; justify-content: center; } .btn-ghost { background: var(--brand-tint); color: var(--brand-deep); } [data-theme="onyx"] .btn-ghost { color: var(--brand); } .btn-ghost:hover { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); box-shadow: none; } .btn-gold { background: var(--gold); color: #3a2e05; } .btn-gold:hover { background: color-mix(in srgb, var(--gold) 80%, #000); } .btn-danger { background: var(--danger); } .btn-outline-white { background: transparent; border: 1.5px solid rgba(255,255,255,.7); color: #fff; } .btn-outline-white:hover { background: rgba(255,255,255,.14); box-shadow: none; } .btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; } /* ---------- Forms ---------- */ label { display: block; font-weight: 600; font-size: 0.85rem; margin: 0.7rem 0 0.25rem; color: var(--ink); } input, select, textarea { width: 100%; padding: 0.62rem 0.75rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; background: var(--surface); color: var(--ink); } input::placeholder, textarea::placeholder { color: color-mix(in srgb, var(--ink-soft) 70%, transparent); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); } .form-row { display: grid; gap: 0.85rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } fieldset { border: 1px solid var(--line); border-radius: var(--radius); padding: 0.6rem 1.2rem 1.2rem; margin: 0 0 1.15rem; background: var(--surface-2); } legend { font-weight: 800; padding: 0 0.45rem; color: var(--brand-deep); text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.05em; } [data-theme="onyx"] legend { color: var(--brand); } .field { position: relative; } .pw-toggle { position: absolute; right: 0.6rem; top: 2.15rem; background: none; border: 0; cursor: pointer; color: var(--ink-soft); font-size: 0.9rem; padding: 0.2rem; } .checkrow { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0.9rem 0 0.2rem; } .checkrow input { width: auto; margin-top: 0.2rem; } .checkrow label { margin: 0; font-weight: 500; font-size: 0.9rem; } /* ---------- Tables ---------- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 0.62rem 0.65rem; border-bottom: 1px solid var(--line); font-size: 0.92rem; } th { color: var(--ink-soft); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; } tbody tr:hover { background: var(--surface-2); } /* ---------- Flash ---------- */ .flash { padding: 0.78rem 1.05rem; border-radius: 10px; margin-bottom: 0.8rem; font-size: 0.92rem; border-left: 4px solid transparent; } .flash-success { background: color-mix(in srgb, var(--ok) 14%, var(--surface)); color: var(--ok); border-color: var(--ok); } .flash-danger { background: color-mix(in srgb, var(--danger) 14%, var(--surface)); color: var(--danger); border-color: var(--danger); } .flash-warning { background: color-mix(in srgb, var(--warn) 16%, var(--surface)); color: var(--warn); border-color: var(--gold); } .flash-info { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); } [data-theme="onyx"] .flash-info { color: var(--brand); } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .stack > * + * { margin-top: 0.6rem; } .feature-icon { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand); font-size: 1.35rem; margin-bottom: 0.5rem; } [data-theme="onyx"] .feature-icon { background: var(--surface-2); } /* ---------- Mega / dropdown navigation ---------- */ .mainnav { display: flex; align-items: center; gap: 0.15rem; } .mainnav > .navitem { position: relative; } .mainnav > .navitem > a, .mainnav > .navitem > span { display: block; padding: 0.55rem 0.7rem; color: var(--header-text); font-weight: 600; font-size: 0.9rem; cursor: pointer; border-radius: 9px; white-space: nowrap; } .mainnav > .navitem > a:hover, .mainnav > .navitem:hover > span, .mainnav > .navitem:hover > a { color: var(--brand); background: var(--surface-2); text-decoration: none; } .mainnav .caret { font-size: 0.6rem; opacity: 0.6; margin-left: 0.15rem; } .dropdown { position: absolute; top: 100%; left: 0; min-width: 234px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--brand); border-radius: 0 0 12px 12px; box-shadow: var(--shadow-lg); padding: 0.4rem; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s; z-index: 40; } .navitem:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown a { display: block; padding: 0.5rem 0.7rem; border-radius: 8px; color: var(--ink); font-size: 0.88rem; font-weight: 500; } .dropdown a:hover { background: var(--surface-2); color: var(--brand-deep); text-decoration: none; } .dropdown a small { display: block; color: var(--ink-soft); font-weight: 400; font-size: 0.76rem; } .nav-auth { display: flex; align-items: center; gap: 0.55rem; margin-left: 0.4rem; padding-left: 0.6rem; border-left: 1px solid var(--line); } .menu-toggle { display: none; background: var(--surface-2); border: 0; color: var(--brand-deep); font-size: 1.2rem; padding: 0.35rem 0.6rem; border-radius: 9px; cursor: pointer; } [data-theme="onyx"] .menu-toggle { color: var(--brand); } @media (max-width: 960px) { .mainnav { display: none; width: 100%; flex-direction: column; align-items: stretch; margin-top: 0.6rem; } .mainnav.open { display: flex; } .topbar { flex-wrap: wrap; } .menu-toggle { display: inline-block; } .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border: 0; border-left: 3px solid var(--brand-tint); border-radius: 0; padding-left: 0.6rem; display: none; } .navitem.open .dropdown { display: block; } .nav-auth { border-left: 0; padding-left: 0; } } /* ---------- Hero ---------- */ .hero { position: relative; color: #fff; overflow: hidden; background: linear-gradient(135deg, var(--brand-deep) 0%, var(--brand) 55%, var(--brand-soft) 100%); } [data-theme="onyx"] .hero { background: linear-gradient(135deg, #0a1512 0%, #123a28 60%, #145235 100%); } .hero::after { content: ""; position: absolute; right: -60px; top: -60px; width: 320px; height: 320px; background: radial-gradient(circle, rgba(201,162,39,.22), transparent 62%); } .hero-inner { max-width: 1040px; margin: 0 auto; padding: 3.6rem 1.5rem 4.2rem; position: relative; z-index: 2; } .hero .eyebrow { text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.75rem; font-weight: 700; color: var(--gold-soft); } .hero h1 { font-size: 2.7rem; line-height: 1.08; margin: 0.4rem 0 0.7rem; font-weight: 800; letter-spacing: -0.02em; } .hero p { font-size: 1.12rem; max-width: 640px; color: #e6efe9; } .hero .cta { margin-top: 1.4rem; display: flex; gap: 0.7rem; flex-wrap: wrap; } .slant { height: 46px; background: var(--bg); clip-path: polygon(0 46px, 100% 0, 100% 46px, 0 46px); margin-top: -46px; position: relative; z-index: 3; } /* ---------- Page header band ---------- */ .page-header { position: relative; color: #fff; background: linear-gradient(120deg, var(--brand-deep), var(--brand) 70%, var(--brand-soft)); } [data-theme="onyx"] .page-header { background: linear-gradient(120deg, #0a1512, #123a28 70%, #145235); } .page-header::after { content: ""; position: absolute; right: -40px; bottom: -40px; width: 260px; height: 260px; background: radial-gradient(circle, rgba(201,162,39,.20), transparent 62%); } .page-header-inner { max-width: 1040px; margin: 0 auto; padding: 2.5rem 1.5rem 3rem; position: relative; z-index: 2; } .page-header .breadcrumb { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.72rem; font-weight: 700; color: var(--gold-soft); } .page-header .breadcrumb a { color: var(--gold-soft); } .page-header h1 { font-size: 2.1rem; margin: 0.35rem 0 0.3rem; text-transform: uppercase; font-weight: 800; } .page-header p { color: #e6efe9; max-width: 640px; margin: 0; } /* ---------- Prose ---------- */ .prose { max-width: 760px; } .prose p { margin: 0 0 1rem; color: var(--ink); } .prose h2 { margin-top: 1.6rem; } .prose ul, .prose ol { padding-left: 1.2rem; } .prose li { margin: 0.35rem 0; } .lede { font-size: 1.12rem; color: var(--ink-soft); } /* ---------- Team grid ---------- */ .team-grid { display: grid; gap: 1.1rem; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); } .team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); text-align: center; } .team-photo { height: 120px; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); display: grid; place-items: center; color: #fff; font-size: 2.2rem; font-weight: 800; } /* Real portraits. The source files are only ~133-163px wide by ~200px tall, so stretching them to the card width would upscale and blur. Instead the image renders at its natural height (200px = 1:1 pixels, stays sharp) and is centred on a tinted frame, with the width free to follow its own ratio. */ .team-photo.has-img { height: 216px; padding: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--surface-2), var(--brand-tint)); } .team-photo.has-img img { height: 200px; width: auto; max-width: 100%; object-fit: contain; display: block; border-radius: 8px; } .team-card .body { padding: 0.9rem; } .team-card .role { color: var(--gold); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; } .team-card .name { font-weight: 700; margin-top: 0.2rem; } .team-card .post { color: var(--ink-soft); font-size: 0.82rem; } /* ---------- Fees ---------- */ .fee-table td.amt { font-weight: 700; color: var(--brand-deep); text-align: right; white-space: nowrap; } [data-theme="onyx"] .fee-table td.amt { color: var(--brand); } .fee-note { background: var(--brand-tint); border-left: 4px solid var(--gold); padding: 0.85rem 1rem; border-radius: 10px; color: var(--ink); font-size: 0.9rem; } /* ---------- FAQ ---------- */ .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 0.7rem; box-shadow: var(--shadow); } .faq summary { cursor: pointer; padding: 0.95rem 1.1rem; font-weight: 700; color: var(--brand-deep); list-style: none; display: flex; justify-content: space-between; align-items: center; } [data-theme="onyx"] .faq summary { color: var(--brand); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; color: var(--gold); font-size: 1.3rem; font-weight: 700; } .faq details[open] summary::after { content: "\2212"; } .faq .answer { padding: 0 1.1rem 1rem; color: var(--ink); } /* ---------- Timeline ---------- */ .timeline { border-left: 3px solid var(--line); padding-left: 1.2rem; margin: 1rem 0; } .timeline .t-item { position: relative; margin-bottom: 1.1rem; } .timeline .t-item::before { content: ""; position: absolute; left: -1.63rem; top: 0.35rem; width: 11px; height: 11px; border-radius: 50%; background: var(--gold); border: 2px solid var(--surface); } .timeline .t-year { font-weight: 800; color: var(--brand-deep); } [data-theme="onyx"] .timeline .t-year { color: var(--brand); } /* ---------- Contact ---------- */ .contact-grid { display: grid; gap: 1.2rem; grid-template-columns: 1.2fr 1fr; } .contact-item { display: flex; gap: 0.75rem; align-items: flex-start; margin-bottom: 1rem; } .contact-item .ci-ico { flex: none; width: 42px; height: 42px; border-radius: 12px; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; font-size: 1.15rem; } .contact-item .ci-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); font-weight: 700; } @media (max-width: 720px) { .contact-grid { grid-template-columns: 1fr; } } /* ---------- Gallery ---------- */ .gallery { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .gallery .tile { aspect-ratio: 4/3; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; text-align: center; padding: 0.6rem; box-shadow: var(--shadow); background: linear-gradient(140deg, var(--brand), var(--brand-deep)); } .gallery .tile:nth-child(3n+2) { background: linear-gradient(140deg, var(--brand-soft), var(--brand)); } .gallery .tile:nth-child(3n) { background: linear-gradient(140deg, #16211c, #33403a); } /* ---------- Auth split layout ---------- */ .auth-wrap { min-height: calc(100vh - 64px); display: grid; grid-template-columns: 1.05fr 1fr; } .auth-brand { position: relative; overflow: hidden; color: #fff; padding: 3rem 3.2rem; display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(150deg, var(--brand-deep), var(--brand) 65%, var(--brand-soft)); } [data-theme="onyx"] .auth-brand { background: linear-gradient(150deg, #081210, #123a28 65%, #145235); } .auth-brand::after { content: ""; position: absolute; right: -80px; bottom: -80px; width: 380px; height: 380px; background: radial-gradient(circle, rgba(201,162,39,.25), transparent 60%); } .auth-brand .ab-logo { display: flex; align-items: center; gap: 0.6rem; font-weight: 800; position: relative; z-index: 2; } .auth-brand .ab-logo img { height: 44px; border-radius: 10px; background: #fff; padding: 3px; } .auth-brand .ab-headline { position: relative; z-index: 2; } .auth-brand .ab-headline h2 { font-size: 2rem; line-height: 1.15; font-weight: 800; color: #fff; } .auth-brand .ab-headline p { color: #dbeae2; max-width: 420px; } .auth-brand .ab-points { position: relative; z-index: 2; display: grid; gap: 0.6rem; } .auth-brand .ab-points div { display: flex; gap: 0.55rem; align-items: center; font-size: 0.95rem; color: #eaf3ee; } .auth-brand .ab-points .dot { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 0.8rem; color: var(--gold-soft); } .auth-panel { display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.5rem; background: var(--bg); } .auth-card { width: 100%; max-width: 440px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2rem 2.1rem; } .auth-card h1 { font-size: 1.6rem; } .auth-card .sub { color: var(--ink-soft); margin: 0 0 1rem; } .auth-alt { text-align: center; margin-top: 1.1rem; color: var(--ink-soft); font-size: 0.92rem; } .auth-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } @media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } .auth-brand { display: none; } } /* ---------- Member dashboard (sidebar layout) ---------- */ .dash { display: grid; grid-template-columns: 1fr 320px; gap: 1.3rem; align-items: start; } .dash-side { display: grid; gap: 1.15rem; position: sticky; top: 80px; } .side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .side-card .sc-head { padding: 0.85rem 1.1rem; font-weight: 800; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--brand-deep); border-bottom: 1px solid var(--line); } [data-theme="onyx"] .side-card .sc-head { color: var(--brand); } .side-card .sc-body { padding: 1.1rem; } .side-card.dark { background: linear-gradient(160deg, var(--brand-deep), var(--brand)); color: #fff; border: 0; } .side-card.dark .sc-head { color: var(--gold-soft); border-color: rgba(255,255,255,.14); } .side-card.dark a { color: #eaf3ee; } .side-link-list a { display: block; padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 0.9rem; } .side-link-list a:last-child { border-bottom: 0; } .dash-hero { background: linear-gradient(140deg, var(--brand-deep), var(--brand)); color: #fff; border-radius: var(--radius-lg); padding: 1.5rem 1.7rem; box-shadow: var(--shadow); position: relative; overflow: hidden; margin-bottom: 1.15rem; } .dash-hero::after { content:""; position:absolute; right:-50px; top:-50px; width:220px; height:220px; background: radial-gradient(circle, rgba(201,162,39,.28), transparent 62%); } .dash-hero h1 { color: #fff; margin: 0; position: relative; } .dash-hero .dh-meta { color: #dbeae2; position: relative; } .dash-hero .dh-badges { margin-top: 0.7rem; display: flex; gap: 0.5rem; flex-wrap: wrap; position: relative; } .detail-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .detail { border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1rem; background: var(--surface-2); } .detail .dl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-soft); font-weight: 700; } .detail .dv { font-weight: 600; margin-top: 0.15rem; } .event-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; border: 1px solid var(--line); border-radius: 12px; padding: 0.85rem 1.05rem; margin-bottom: 0.6rem; background: var(--surface); } .event-row .ev-name { font-weight: 700; } @media (max-width: 900px) { .dash { grid-template-columns: 1fr; } .dash-side { position: static; } } /* ---------- Footer ---------- */ .site-footer { background: var(--footer-bg); color: #c3d2ca; font-size: 0.88rem; margin-top: 3rem; } .site-footer a { color: #c3d2ca; text-decoration: none; transition: color .15s; } .site-footer a:hover { color: #fff; } /* CTA band sits on top of the footer proper */ .foot-cta { background: linear-gradient(135deg, var(--brand-deep), var(--brand)); position: relative; overflow: hidden; } .foot-cta::after { content: ""; position: absolute; inset: 0; opacity: .45; pointer-events: none; background-image: linear-gradient(rgba(230,195,106,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(230,195,106,.12) 1px, transparent 1px); background-size: 24px 24px; -webkit-mask: radial-gradient(120% 100% at 88% 0, #000, transparent 62%); mask: radial-gradient(120% 100% at 88% 0, #000, transparent 62%); } /* CHANGED: padding increased (2.4rem -> 4.2rem vertical) and min-height added, same reasoning as .cta-band above. */ .foot-cta-in { position: relative; max-width: 1100px; margin: 0 auto; padding: 4.2rem 1.6rem; min-height: 260px; display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; } .foot-cta h3 { color: #fff; font-size: 1.45rem; letter-spacing: -0.02em; } .foot-cta p { color: #d7e6dd; margin-top: 0.35rem; max-width: 46ch; } .foot-cta-actions { display: flex; gap: 0.7rem; flex-wrap: wrap; } .btn-outline-light { background: transparent; border: 1.5px solid rgba(255,255,255,.45); color: #fff; } .btn-outline-light:hover { background: rgba(255,255,255,.14); border-color: #fff; box-shadow: none; } .foot-main { max-width: 1100px; margin: 0 auto; padding: 3rem 1.6rem 2.2rem; display: grid; gap: 2.4rem; grid-template-columns: 1.8fr 1fr 1fr 1.4fr; } @media (max-width: 900px) { .foot-main { grid-template-columns: 1fr 1fr; gap: 2rem; } } @media (max-width: 560px) { .foot-main { grid-template-columns: 1fr; } } .foot-brand .fb-top { display: flex; align-items: center; gap: 0.7rem; } .foot-brand .fb-top img { height: 42px; width: auto; } .foot-brand .fb-top strong { display: block; color: #fff; font-size: 1.08rem; letter-spacing: -0.01em; } .foot-brand .fb-top span { display: block; font-size: 0.74rem; color: var(--gold-soft); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .foot-brand p { color: #93a79c; margin-top: 0.9rem; line-height: 1.6; max-width: 38ch; } .foot-badges { display: flex; gap: 0.5rem; margin-top: 1rem; flex-wrap: wrap; } .fbadge { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); color: #a9bcb1; } .foot-col { display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-start; } .site-footer .fc-head { color: #fff; font-weight: 700; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; } .foot-contact a, .foot-contact .fc-addr { display: flex; gap: 0.55rem; align-items: flex-start; line-height: 1.5; } .foot-contact svg { flex: none; margin-top: 2px; color: var(--gold-soft); } .site-footer .fc-addr { color: #93a79c; } .foot-bar { border-top: 1px solid rgba(255,255,255,.1); max-width: 1100px; margin: 0 auto; padding: 1.1rem 1.6rem 1.6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; font-size: 0.8rem; color: #8b9e93; } .foot-bar-links { display: flex; gap: 1.3rem; } /* ---------- Membership card ---------- */ .memcard { width: 360px; max-width: 100%; border-radius: 18px; color: #fff; position: relative; background: linear-gradient(140deg, var(--brand-deep), var(--brand) 65%, var(--brand-soft)); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-lg); overflow: hidden; } .memcard::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 88% 12%, rgba(201,162,39,.28), transparent 42%); } .memcard > * { position: relative; } .memcard .mc-top { display: flex; justify-content: space-between; align-items: flex-start; } .memcard .mc-brand { font-weight: 800; letter-spacing: 0.05em; } .memcard .mc-name { font-size: 1.25rem; font-weight: 800; margin-top: 1.5rem; } .memcard .mc-meta { font-size: 0.8rem; opacity: 0.92; } .memcard .mc-strip { height: 5px; width: 64px; background: var(--gold); border-radius: 3px; margin: 0.55rem 0; } .memcard .mc-qr { background: #fff; padding: 5px; border-radius: 8px; width: 74px; height: 74px; } /* The QR is inline now, which carries its own width/height attributes (140px from segno) and overflowed the 74px box. Size the svg itself. */ .memcard .mc-qr img, .memcard .mc-qr svg { width: 100%; height: 100%; display: block; } /* ---------- Certificate ---------- */ .certificate { border-radius: 16px; padding: 2.6rem 2rem; text-align: center; background: var(--surface); border: 8px solid transparent; box-shadow: var(--shadow); background: linear-gradient(var(--surface), var(--surface)) padding-box, repeating-linear-gradient(45deg, var(--gold), var(--gold) 6px, var(--brand) 6px, var(--brand) 12px) border-box; } .certificate h1 { font-size: 2rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--brand-deep); } [data-theme="onyx"] .certificate h1 { color: var(--brand); } .certificate .name { font-size: 1.7rem; font-weight: 800; margin: 1rem 0; color: var(--brand); } /* ---------- Chapter magenta accent ---------- */ .btn-magenta { background: var(--magenta-fill); color: #fff; } .btn-magenta:hover { background: var(--magenta-bright); box-shadow: 0 6px 16px rgba(229,24,140,.28); } .badge-magenta { background: var(--magenta-bg); color: var(--magenta); } /* ---------- Admin toolbar + filters ---------- */ .admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: flex-end; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1rem; margin-bottom: 1rem; box-shadow: var(--shadow); } .filters .f { display: flex; flex-direction: column; gap: 0.25rem; } .filters .f label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-solid); font-weight: 700; margin: 0; } .filters .f input, .filters .f select { padding: 0.42rem 0.55rem; font-size: 0.9rem; min-width: 130px; border-radius: 8px; } .filters .f.grow { flex: 1; min-width: 180px; } .filters .f.grow input { width: 100%; } .filters .fbtns { display: flex; gap: 0.5rem; } .filters a.clear { align-self: center; font-size: 0.85rem; color: var(--muted-solid); } /* stat strip */ .stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.8rem; margin-bottom: 1.1rem; } .stat-strip .s { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 0.9rem 1.1rem; box-shadow: var(--shadow); } .stat-strip .s .l { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-solid); font-weight: 700; } .stat-strip .s .v { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 0.2rem; font-variant-numeric: tabular-nums; } /* dense table wrapper */ .table-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .table-scroll { overflow-x: auto; } .table-scroll table { min-width: 640px; } td.money, th.money { text-align: right; font-variant-numeric: tabular-nums; font-family: system-ui; } .mono-sm { font-family: var(--mono); font-size: 0.8rem; color: var(--muted-solid); } .count-note { font-family: var(--mono); font-size: 0.8rem; color: var(--muted-solid); } /* ============================================================================ BLUEPRINT & BRASS retrofit — home, grades & fees, shared bits. ========================================================================== */ .eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--magenta); font-weight: 600; display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--magenta); opacity: .7; } .eyebrow.gold { color: var(--gold); } .eyebrow.gold::before { background: var(--gold); } /* ---------- Home hero (photographic, full-bleed) ---------------------------- The photo lives on the section's own background so it bleeds edge to edge. Two scrim layers sit above it: a left-weighted dark gradient that guarantees contrast for the copy, and a bottom fade that stops the overlapping cards from sitting on a busy part of the image. overflow is VISIBLE on purpose — .hero-boxes deliberately hangs past the section's bottom edge. */ .home-hero { position: relative; overflow: visible; isolation: isolate; background-size: cover; background-position: center 22%; background-repeat: no-repeat; background-color: var(--brand-deep); } /* CHANGED: the left end of the scrim was .93 — almost opaque — which buried the officer standing at the far left. It now starts at .62 and the darkest point sits at 18-40%, i.e. behind the headline rather than over the face. The copy keeps its contrast via the text-shadow below. */ .home-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(100deg, rgba(6,26,18,.62) 0%, rgba(6,26,18,.74) 22%, rgba(6,26,18,.66) 44%, rgba(6,26,18,.34) 68%, rgba(6,26,18,.24) 100%), linear-gradient(to bottom, transparent 60%, rgba(6,26,18,.5) 100%); } /* CHANGED: hero height reduced — top 132->84px, bottom 150->96px at the cap. */ .home-hero-in { position: relative; z-index: 1; max-width: 1040px; margin: 0 auto; padding: clamp(44px, 6vw, 84px) clamp(16px, 4vw, 32px) clamp(56px, 7vw, 96px); } .home-hero .hh-copy { max-width: 40rem; } .home-hero .eyebrow { color: var(--gold-soft); } .home-hero .eyebrow::before { background: var(--gold-soft); } .home-hero h1 { font-size: clamp(34px, 5.4vw, 62px); font-weight: 800; letter-spacing: -.035em; color: #fff; text-wrap: balance; text-shadow: 0 2px 18px rgba(6,26,18,.55); } .home-hero .lede2, .home-hero .trust .t b { text-shadow: 0 1px 12px rgba(6,26,18,.6); } .home-hero h1 em { font-family: var(--serif, "Iowan Old Style", Georgia, serif); font-style: italic; font-weight: 500; color: var(--magenta-bright); } .home-hero .lede2 { margin-top: 20px; font-size: clamp(16px, 2vw, 20px); color: rgba(255,255,255,.86); max-width: 52ch; } .home-hero .cta2 { margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; } /* Ghost button on a photo needs its own treatment — the light-surface .btn-ghost disappears against the scrim. */ .btn-hero-ghost { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .btn-hero-ghost:hover { background: rgba(255,255,255,.22); } .trust { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 14px 30px; } .trust .t b { display: block; font-size: 22px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; } .trust .t span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.7); } /* ---------- The three cards that overlap the hero ---------- */ /* display:flow-root is load-bearing. Without a block formatting context the card row's negative bottom margin collapses straight out through .wrap and .home-hero and just pulls the next section up — the hero keeps its full height and nothing overlaps. flow-root keeps the margin inside, so .wrap ends at the row's midpoint and the hero's background ends there too. */ .wrap { max-width: 1040px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); display: flow-root; } /* Exactly half of the row sits on the hero photo and half on the section below. That needs a known height: --hb-h fixes it, and the negative margin-bottom of half that height pulls the hero's background up to the row's midpoint. Cards taller than --hb-h simply overlap by less than half instead of breaking the layout. */ .hero-boxes { --hb-h: 300px; position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr .8fr; align-items: stretch; min-height: var(--hb-h); margin-bottom: calc(var(--hb-h) / -2); box-shadow: var(--shadow-lg); border-radius: 4px; overflow: hidden; } .hb { padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; } .hb h3 { font-size: clamp(20px, 2.4vw, 27px); font-weight: 800; letter-spacing: -.02em; } .hb p { margin-top: 12px; font-size: 14.5px; line-height: 1.6; flex: 1; } .hb-tint { background: var(--brand-tint); color: var(--brand-deep); } .hb-tint p { color: color-mix(in srgb, var(--brand-deep) 78%, transparent); } [data-theme="onyx"] .hb-tint { color: var(--brand); } [data-theme="onyx"] .hb-tint p { color: var(--ink-soft); } .hb-dark { background: #12241c; color: #fff; } .hb-dark p { color: rgba(255,255,255,.74); } .hb-link { margin-top: 18px; display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid rgba(255,255,255,.45); padding-bottom: 4px; align-self: flex-start; } .hb-link:hover { color: var(--gold-soft); border-color: var(--gold-soft); text-decoration: none; } .btn-white-pill { background: #fff; color: var(--brand-deep); border-radius: 999px; align-self: flex-start; margin-top: 20px; box-shadow: var(--shadow); } .btn-white-pill:hover { background: #fff; color: var(--magenta); box-shadow: var(--shadow-lg); } .hb-media { position: relative; padding: 0; background: var(--magenta-fill); min-height: 180px; } .hb-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .hb-play { position: absolute; inset: 0; margin: auto; width: 58px; height: 58px; border-radius: 50%; background: #fff; color: var(--brand-deep); display: grid; place-items: center; box-shadow: var(--shadow-lg); transition: transform .2s; } .hb-media:hover .hb-play { transform: scale(1.08); } @media (max-width: 980px) { /* Two columns wrap the copy onto more lines, so the row is taller. */ .hero-boxes { grid-template-columns: 1fr 1fr; --hb-h: 420px; } .hb-media { grid-column: span 2; min-height: 150px; } } @media (max-width: 640px) { /* Stacked cards are too tall to overlap gracefully — sit them below. */ .hero-boxes { grid-template-columns: 1fr; margin-bottom: 0; border-radius: 0; min-height: 0; } .hb-media { grid-column: auto; } .home-hero-in { padding-bottom: clamp(48px, 9vw, 70px); } .wrap { padding: 0; } } /* ---------- Home sections ---------- */ .band2 { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); } .band2 .logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; padding: 18px 0; justify-content: center; } .band2 .logos span { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-soft); text-transform: uppercase; } .hsec { padding: clamp(44px, 6vw, 78px) 0; } .hsec .sh h2 { font-size: clamp(24px, 3.4vw, 38px); font-weight: 800; letter-spacing: -.03em; margin-top: 12px; } .hsec .sh p { margin-top: 12px; color: var(--ink-soft); font-size: 16.5px; max-width: 60ch; } .feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 30px; } @media (max-width: 860px) { .feat-grid { grid-template-columns: 1fr; } } .fcard2 { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; } .fcard2:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .fcard2 .fi { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 16px; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand-deep); } .fcard2 .fi.mag { background: var(--magenta-bg); color: var(--magenta); } .fcard2 .fi.brass { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); color: var(--gold); } .fcard2 h3 { font-size: 18px; } .fcard2 p { margin-top: 8px; color: var(--ink-soft); font-size: 14.5px; } .grades-prev { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 28px; } @media (max-width: 860px) { .grades-prev { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .grades-prev { grid-template-columns: 1fr; } } .gp { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); } .gp .gname { font-weight: 700; font-size: 15px; } .gp .gcode { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); } .gp .gfee { margin-top: 10px; font-size: 20px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } .gp .gfee span { font-size: 12px; color: var(--ink-soft); font-weight: 500; } /* CHANGED: padding increased (28-52px -> 44-84px) and min-height added so the CTA band reads as a taller, more hero-like banner — was fairly short before, especially with a background photo now filling it. */ .cta-band { position: relative; overflow: hidden; border-radius: 26px; padding: clamp(44px, 8vw, 84px); min-height: clamp(260px, 32vw, 420px); display: flex; flex-direction: column; justify-content: center; color: var(--on-brand); background: linear-gradient(145deg, var(--brand), var(--brand-deep)); box-shadow: var(--shadow-lg); border: 1px solid rgba(255,255,255,.1); } .cta-band::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(230,195,106,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(230,195,106,.1) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(120% 100% at 92% 0, #000, transparent 60%); mask: radial-gradient(120% 100% at 92% 0, #000, transparent 60%); } .cta-band > * { position: relative; } .cta-band h2 { font-size: clamp(22px, 3.2vw, 34px); } .cta-band p { margin-top: 12px; color: #dbeae2; max-width: 52ch; } .verify-band2 { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow); } @media (max-width: 700px) { .verify-band2 { grid-template-columns: 1fr; } } .motto2 { font-family: var(--serif, "Iowan Old Style", Georgia, serif); font-style: italic; font-size: clamp(19px, 2.8vw, 28px); color: var(--ink); max-width: 26ch; line-height: 1.3; text-align: center; } .motto2 .by { display: block; font-family: var(--font); font-style: normal; font-size: 13px; color: var(--ink-soft); margin-top: 14px; } /* ---------- Grades & fees page ---------- */ .fees-toggle { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; margin: 0 auto; } .fees-toggle button { font-family: var(--font); font-weight: 600; font-size: 13.5px; border: 0; background: transparent; color: var(--ink-soft); padding: 9px 18px; border-radius: 999px; cursor: pointer; } .fees-toggle button.on { background: var(--surface); color: var(--brand-deep); box-shadow: var(--shadow); } .pop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; } @media (max-width: 860px) { .pop-grid { grid-template-columns: 1fr; } } .pcard { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow); } .pcard.feature { border-color: var(--magenta-fill); box-shadow: 0 0 0 1px var(--magenta-fill), var(--shadow-lg); } .pcard .flag { position: absolute; top: -11px; left: 24px; background: var(--magenta-fill); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-weight: 700; } .pcard .pn { font-weight: 800; font-size: 20px; letter-spacing: -.02em; } .pcard .pc { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); } .pcard .amt { margin-top: 16px; font-size: 34px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .pcard .amt small { font-size: 13px; color: var(--ink-soft); font-weight: 500; } .pcard ul { list-style: none; margin: 16px 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .pcard ul li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-soft); } .pcard ul li svg { width: 16px; height: 16px; color: var(--ok, var(--brand)); flex: none; margin-top: 2px; } table.fees { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 640px; } table.fees thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: 15px 18px; border-bottom: 1px solid var(--line); background: var(--surface-2); } table.fees th.r, table.fees td.r { text-align: right; font-variant-numeric: tabular-nums; } table.fees td { padding: 15px 18px; border-bottom: 1px solid var(--line); } table.fees tbody tr:last-child td { border-bottom: 0; } table.fees tbody tr:hover { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); } table.fees td.g { font-weight: 700; } table.fees td.code { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); } table.fees td.due { font-family: var(--mono); font-weight: 700; color: var(--brand-deep); } .fnote { display: flex; gap: 14px; align-items: flex-start; background: var(--magenta-bg); border: 1px solid color-mix(in srgb, var(--magenta-fill) 30%, transparent); border-radius: var(--radius); padding: 16px 18px; margin-top: 22px; } .fnote .ic { color: var(--magenta); flex: none; } .fnote b { font-size: 14px; } .fnote p { font-size: 13.5px; color: var(--ink-soft); margin-top: 3px; } /* ============================================================================ Resources pages — Downloads, News, Gallery. ========================================================================== */ /* ---------- filter chips (shared) ---------- */ .chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; } .chip-row a { font-family: var(--mono); font-size: 12px; padding: 7px 14px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); text-decoration: none; cursor: pointer; } .chip-row a:hover { border-color: var(--brand); color: var(--brand-deep); } .chip-row a.on { background: var(--magenta-fill); border-color: transparent; color: #fff; } /* ---------- Downloads ---------- */ .dl-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } @media (max-width: 860px) { .dl-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .dl-grid { grid-template-columns: 1fr; } } .dl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 20px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; transition: transform .2s, box-shadow .2s; } .dl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .dl-card .fic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand-deep); } [data-theme="onyx"] .dl-card .fic { color: var(--brand); } .dl-card.pdf .fic { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); color: var(--danger); } .dl-card.data .fic { background: var(--magenta-bg); color: var(--magenta); } .dl-card h3 { font-size: 15px; } .dl-card .desc { font-size: 13px; color: var(--ink-soft); flex: 1; } .dl-card .meta { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); letter-spacing: .04em; } .dl-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 4px; } /* ---------- News ---------- */ .news-featured { display: grid; grid-template-columns: 1.15fr 1fr; gap: 0; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 1.6rem; background: var(--surface); } @media (max-width: 760px) { .news-featured { grid-template-columns: 1fr; } } .news-featured .cover { min-height: 240px; position: relative; background: linear-gradient(150deg, var(--brand), var(--brand-deep)); } .news-featured .cover::after { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(230,195,106,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(230,195,106,.12) 1px, transparent 1px); background-size: 22px 22px; } .news-featured .body { padding: 26px 28px; align-self: center; } .news-featured .body .tag { display: inline-block; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--magenta); background: var(--magenta-bg); padding: 3px 10px; border-radius: 999px; } .news-featured .body h2 { font-size: 24px; margin: 12px 0 8px; letter-spacing: -.02em; } .news-featured .body p { color: var(--ink-soft); font-size: 14.5px; } .news-featured .body .date { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-top: 12px; } .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 860px) { .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .news-grid { grid-template-columns: 1fr; } } .art-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; } .art-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .art-card .cover { height: 132px; background: linear-gradient(150deg, var(--brand-soft), var(--brand-deep)); position: relative; } .art-card:nth-child(3n+2) .cover { background: linear-gradient(150deg, var(--brand), var(--brand-deep)); } .art-card:nth-child(3n) .cover { background: linear-gradient(150deg, #33403a, var(--brand-deep)); } .art-card .cover .tag { position: absolute; top: 12px; left: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: #fff; background: rgba(0,0,0,.35); padding: 3px 9px; border-radius: 999px; } .art-card .body { padding: 16px 18px; } .art-card h3 { font-size: 16px; letter-spacing: -.01em; } .art-card .date { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin: 6px 0; } .art-card p { font-size: 13.5px; color: var(--ink-soft); } .newsletter { margin-top: 1.6rem; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; background: linear-gradient(145deg, var(--brand), var(--brand-deep)); color: #fff; border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow); } @media (max-width: 640px) { .newsletter { grid-template-columns: 1fr; } } .newsletter h3 { color: #fff; font-size: 20px; } .newsletter p { color: #dbeae2; font-size: 14px; margin-top: 4px; } .newsletter form { display: flex; gap: 8px; flex-wrap: wrap; } .newsletter input { min-width: 200px; border-radius: 999px; border: 0; padding: 11px 16px; } /* ---------- Gallery + lightbox ---------- */ .gallery .tile { position: relative; cursor: pointer; overflow: hidden; } .gallery .tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 10px; font-size: 12px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.55)); opacity: 0; transition: opacity .2s; } .gallery .tile:hover .cap { opacity: 1; } .gallery .tile .zoom { position: absolute; inset: 0; transition: transform .35s ease; } .gallery .tile:hover .zoom { transform: scale(1.06); } .gallery .tile:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .lightbox { position: fixed; inset: 0; z-index: 200; background: rgba(6,12,9,.86); backdrop-filter: blur(6px); display: none; align-items: center; justify-content: center; padding: 24px; } .lightbox.open { display: flex; } .lightbox .frame { width: min(760px, 92vw); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); } .lightbox .frame .img { aspect-ratio: 16/10; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 1.4rem; text-align: center; padding: 1rem; } .lightbox .frame .bar { background: var(--surface); color: var(--ink); padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; } .lightbox .close { position: absolute; top: 18px; right: 20px; background: rgba(255,255,255,.14); border: 0; color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 20px; cursor: pointer; } .lightbox .nav { background: rgba(255,255,255,.14); border: 0; color: #fff; width: 44px; height: 44px; border-radius: 50%; font-size: 22px; cursor: pointer; flex: none; } /* ============================================================================ Dashboard patterns adapted from a reference layout (stat-card row, icon-row activity list, quick-actions band) — re-skinned in the portal's own pine/brass/magenta palette and IBM Plex Sans, not the source's colours. ========================================================================== */ /* ---------- Stat card row ---------- */ .kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 1.1rem; } @media (max-width: 720px) { .kpi-row { grid-template-columns: 1fr; } } .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; box-shadow: var(--shadow); position: relative; } .kpi .kpi-top { display: flex; justify-content: space-between; align-items: flex-start; } .kpi .kpi-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-soft); } .kpi .kpi-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; } .kpi.k-brand .kpi-ic { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand-deep); } [data-theme="onyx"] .kpi.k-brand .kpi-ic { color: var(--brand); } .kpi.k-gold .kpi-ic { background: color-mix(in srgb, var(--gold) 18%, var(--surface)); color: var(--gold); } .kpi.k-magenta .kpi-ic { background: var(--magenta-bg); color: var(--magenta); } .kpi .kpi-val { font-size: 1.7rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 10px; font-variant-numeric: tabular-nums; } .kpi .kpi-sub { font-size: 0.78rem; color: var(--ink-soft); margin-top: 3px; } /* ---------- Icon-row activity list (payments / orders pattern) ---------- */ .act-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); } .act-row:last-child { border-bottom: 0; } .act-row .act-ic { width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center; background: linear-gradient(150deg, var(--brand), var(--brand-deep)); color: #fff; } .act-row .act-body { flex: 1; min-width: 0; } .act-row .act-title { font-weight: 700; font-size: 0.92rem; } .act-row .act-meta { font-size: 0.78rem; color: var(--ink-soft); font-family: var(--mono); } .act-row .act-right { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .act-row .act-amt { font-weight: 700; font-variant-numeric: tabular-nums; } /* ---------- Quick actions band ---------- */ .qband { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 22px 24px; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); color: var(--on-brand); box-shadow: var(--shadow-lg); margin-top: 1.1rem; } .qband::after { content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: linear-gradient(rgba(230,195,106,.1) 1px, transparent 1px), linear-gradient(90deg, rgba(230,195,106,.1) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask: radial-gradient(120% 100% at 92% 0, #000, transparent 60%); mask: radial-gradient(120% 100% at 92% 0, #000, transparent 60%); } .qband > * { position: relative; } .qband h2 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; } .qband .qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 720px) { .qband .qgrid { grid-template-columns: repeat(2, 1fr); } } .qband .qbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 12px 14px; color: #fff; text-decoration: none; transition: background 0.15s, transform 0.12s; } .qband .qbtn:hover { background: rgba(255,255,255,0.18); text-decoration: none; } .qband .qbtn:active { transform: translateY(1px); } .qband .qbtn .qic { width: 30px; height: 30px; border-radius: 8px; background: rgba(255,255,255,0.16); display: grid; place-items: center; } .qband .qbtn span.lbl { font-weight: 600; font-size: 0.86rem; } .qband .qbtn[disabled], .qband .qbtn.is-disabled { opacity: 0.45; pointer-events: none; } /* ============================================================================ Portal dashboard — structure matched to a reference customer-portal design (left nav shell, gradient nav pill, white stat cards, nested pill-style activity rows, solid status badges). Colours stay this site's own pine/brass/magenta — every token below points at the existing theme-aware variables, so this scope follows Aurora/Onyx automatically. ========================================================================== */ .pd-scope { --pd-primary: var(--brand); --pd-primary-2: var(--brand-soft); --pd-primary-deep: var(--brand-deep); --pd-primary-bg: var(--brand-tint); --pd-green: var(--ok); --pd-green-bg: color-mix(in srgb, var(--ok) 14%, var(--surface)); --pd-blue: var(--gold); /* repurposed: gold is this palette's 3rd accent, not blue */ --pd-blue-bg: color-mix(in srgb, var(--gold) 18%, var(--surface)); --pd-bg: var(--bg); --pd-card: var(--surface); --pd-border: var(--line); --pd-text: var(--ink); --pd-text-soft: var(--ink-soft); background: var(--pd-bg); color: var(--pd-text); border-radius: 20px; padding: 0; margin: -0.4rem -0.2rem; overflow: hidden; } /* ---------- Shell: left nav + main ---------- */ /* Sidebar widened 310px -> 340px alongside the wider .container above, so it doesn't look thin relative to the extra main-column space it now has. */ .pdx-shell { display: grid; grid-template-columns: 340px 1fr; min-height: 100%; } @media (max-width: 980px) { .pdx-shell { grid-template-columns: 1fr; } } .pdx-nav { background: var(--pd-card); border-right: 1px solid var(--pd-border); padding: 22px 16px; } @media (max-width: 980px) { .pdx-nav { border-right: 0; border-bottom: 1px solid var(--pd-border); padding: 16px; } } .pdx-nav-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px 22px; } .pdx-nav-brand .nb-mark { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--pd-primary), var(--pd-primary-deep)); color: #fff; font-weight: 800; font-size: 0.85rem; } .pdx-nav-brand .nb-text { font-weight: 800; font-size: 1.02rem; color: var(--pd-text); line-height: 1.15; } .pdx-nav-brand .nb-sub { font-size: 0.68rem; color: var(--pd-text-soft); font-weight: 600; letter-spacing: 0.03em; } .pdx-nav-list { display: flex; flex-direction: column; gap: 4px; } @media (max-width: 980px) { .pdx-nav-list { flex-direction: row; flex-wrap: wrap; } } .pdx-nav-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 12px; color: var(--pd-text-soft); font-weight: 600; font-size: 0.92rem; text-decoration: none; } .pdx-nav-link:hover { background: var(--pd-bg); text-decoration: none; color: var(--pd-text); } .pdx-nav-link.active { background: linear-gradient(120deg, var(--pd-primary), var(--pd-primary-deep)); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--pd-primary) 35%, transparent); } .pdx-nav-link svg { flex: none; } .pdx-main { padding: 22px clamp(16px, 3vw, 30px) 30px; min-width: 0; } .pdx-topline { display: flex; justify-content: flex-end; margin-bottom: 4px; } .pdx-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--pd-primary), var(--pd-primary-deep)); color: #fff; font-weight: 700; font-size: 0.85rem; overflow: hidden; } /* NEW: uploaded passport photo fills the avatar circle when present. */ .pdx-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .pd-head { margin: 6px 0 22px; } .pd-head h1 { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pd-text); } .pd-head .pd-sub { color: var(--pd-text-soft); margin-top: 5px; font-size: 1rem; } .pd-badges { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .pd-pill { display: inline-flex; align-items: center; gap: 5px; font-size: 0.78rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; } .pd-pill.ok { background: var(--pd-green-bg); color: var(--pd-green); } .pd-pill.warn { background: color-mix(in srgb, var(--warn) 16%, var(--pd-card)); color: var(--warn); } .pd-pill.primary { background: color-mix(in srgb, var(--gold) 20%, var(--pd-card)); color: var(--gold); } .pd-pill.muted { background: var(--pd-border); color: var(--pd-text-soft); } /* solid, high-contrast status pill — used inside activity rows */ .pd-status { display: inline-flex; align-items: center; font-size: 0.76rem; font-weight: 700; padding: 5px 13px; border-radius: 999px; color: #fff; } .pd-status.ok { background: var(--pd-green); } .pd-status.warn { background: var(--warn); } .pd-status.bad { background: var(--danger); } /* ---------- KPI stat cards ---------- */ .pd-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 22px; } .pd-kpi-row.cols-2 { grid-template-columns: repeat(2, 1fr); } /* Collapse to a single column on phones — declared after the modifier so it wins, and as a class (not an inline style) so the media query can override. */ @media (max-width: 720px) { .pd-kpi-row, .pd-kpi-row.cols-2 { grid-template-columns: 1fr; } } .pd-kpi { background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: 18px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(16,16,40,0.05); } .pd-kpi .pk-top { display: flex; justify-content: space-between; align-items: flex-start; } .pd-kpi .pk-label { font-size: 0.92rem; color: var(--pd-text-soft); } .pd-kpi .pk-ic { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; flex: none; } .pd-kpi.pk-purple .pk-ic { background: var(--magenta-bg); color: var(--magenta); } .pd-kpi.pk-green .pk-ic { background: var(--pd-green-bg); color: var(--pd-green); } .pd-kpi.pk-blue .pk-ic { background: var(--pd-blue-bg); color: var(--pd-blue); } .pd-kpi .pk-val { font-size: 2.1rem; font-weight: 800; letter-spacing: -0.02em; margin-top: 16px; color: var(--pd-text); font-variant-numeric: tabular-nums; } .pd-kpi.pk-green .pk-val { color: var(--pd-green); } .pd-kpi.pk-purple .pk-val { color: var(--magenta); font-size: 1.7rem; margin-top: 20px; } .pd-kpi .pk-sub { font-size: 0.85rem; color: var(--pd-text-soft); margin-top: 6px; } /* ---------- Generic white card + header w/ "View all" ---------- */ .pd-card { background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: 18px; padding: 22px 24px; margin-bottom: 18px; box-shadow: 0 1px 3px rgba(16,16,40,0.05); } .pd-card-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 16px; } .pd-card-head h2 { font-size: 1.15rem; font-weight: 800; color: var(--pd-text); letter-spacing: -0.01em; } .pd-card-head .pd-sub2 { font-size: 0.86rem; color: var(--pd-text-soft); margin-top: 3px; } .pd-view-all { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 700; color: var(--pd-text); text-decoration: none; } .pd-view-all:hover { text-decoration: underline; } .pd-card .pd-link { font-size: 0.85rem; font-weight: 600; color: var(--pd-primary); text-decoration: none; } .pd-card .pd-link:hover { text-decoration: underline; } .pd-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 0.8rem; margin-top: 0.9rem; } .pd-detail { border: 1px solid var(--pd-border); border-radius: 12px; padding: 12px 14px; background: var(--pd-bg); } .pd-detail .pdl { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--pd-text-soft); font-weight: 700; } .pd-detail .pdv { font-weight: 600; margin-top: 3px; color: var(--pd-text); } .pd-money-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; margin-bottom: 18px; } @media (max-width: 640px) { .pd-money-row { grid-template-columns: 1fr; } } .pd-money { background: var(--pd-card); border: 1px solid var(--pd-border); border-radius: 18px; padding: 22px 24px; box-shadow: 0 1px 3px rgba(16,16,40,0.05); } .pd-money h3 { font-size: 0.9rem; color: var(--pd-text-soft); font-weight: 600; } .pd-money .pm-val { font-size: 1.8rem; font-weight: 800; margin-top: 8px; color: var(--pd-text); font-variant-numeric: tabular-nums; } .pd-money .pm-sub { font-size: 0.85rem; color: var(--pd-text-soft); margin-top: 4px; } .pd-btn { display: inline-flex; align-items: center; gap: 6px; border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 700; font-size: 0.88rem; cursor: pointer; margin-top: 14px; text-decoration: none; } .pd-btn-primary { background: var(--pd-primary); color: #fff; } .pd-btn-primary:hover { background: var(--pd-primary-deep); } .pd-btn-ghost { background: var(--pd-primary-bg); color: var(--pd-primary-deep); } [data-theme="onyx"] .pd-btn-ghost { color: var(--pd-primary-2); } .pd-btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* ---------- Nested pill-style activity rows (Recent Orders pattern) ---------- */ .pd-row { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 16px; background: var(--pd-bg); margin-bottom: 10px; } .pd-row:last-child { margin-bottom: 0; } .pd-row .pr-ic { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: linear-gradient(135deg, var(--pd-primary), var(--pd-primary-deep)); color: #fff; } .pd-row .pr-body { flex: 1; min-width: 0; } .pd-row .pr-title { font-weight: 700; font-size: 0.96rem; color: var(--pd-text); } .pd-row .pr-meta { font-size: 0.8rem; color: var(--pd-text-soft); margin-top: 2px; } .pd-row .pr-right { text-align: right; flex: none; display: flex; align-items: center; gap: 14px; } .pd-row .pr-amt { font-weight: 800; color: var(--pd-text); font-variant-numeric: tabular-nums; font-size: 1.02rem; } .pd-row .pr-link { font-size: 0.76rem; font-weight: 600; color: var(--pd-primary); text-decoration: none; margin-left: 10px; } .pd-row .pr-link:hover { text-decoration: underline; } /* On narrow screens the icon + text + status/amount cluster can't sit on one line — the status pill gets crushed. Stack the row instead: icon and title on top, then a full-width meta line with status, amount and receipt. */ @media (max-width: 620px) { .pd-row { flex-wrap: wrap; gap: 10px 12px; padding: 14px 15px; } .pd-row .pr-ic { width: 36px; height: 36px; border-radius: 10px; } .pd-row .pr-body { flex: 1 1 auto; } .pd-row .pr-title { font-size: 0.9rem; word-break: break-word; } .pd-row .pr-right { flex: 1 0 100%; justify-content: flex-start; gap: 10px; padding-top: 10px; border-top: 1px dashed var(--pd-border); } .pd-row .pr-amt { margin-left: auto; } /* amount hugs the right edge */ .pd-row .pr-link { margin-left: 0; } .pd-status { padding: 4px 11px; font-size: 0.72rem; } } /* ---------- Quick actions band ---------- */ .pd-qband { background: linear-gradient(150deg, var(--pd-primary), var(--pd-primary-deep)); border-radius: 18px; padding: 22px 24px; color: #fff; margin-bottom: 18px; } .pd-qband h2 { color: #fff; font-size: 1.02rem; margin-bottom: 14px; font-weight: 800; } .pd-qgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 720px) { .pd-qgrid { grid-template-columns: repeat(2, 1fr); } } .pd-qbtn { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16); border-radius: 12px; padding: 12px 14px; color: #fff; text-decoration: none; transition: background 0.15s; } .pd-qbtn:hover { background: rgba(255,255,255,0.18); text-decoration: none; } .pd-qbtn .pq-ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.16); display: grid; place-items: center; } .pd-qbtn .pq-lbl { font-weight: 600; font-size: 0.84rem; } .pd-qbtn.is-disabled, .pd-qbtn[disabled] { opacity: 0.4; pointer-events: none; } /* ---------- Sidebar widgets (membership card, certificates) ---------- */ .pdx-widget { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--pd-border); } .pdx-widget + .pdx-widget { margin-top: 18px; } .pdx-widget-head { display: flex; align-items: center; justify-content: space-between; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--pd-text-soft); margin-bottom: 12px; padding: 0 2px; } .pdx-widget-head .wcount { background: var(--pd-bg); color: var(--pd-text-soft); border-radius: 999px; padding: 2px 8px; font-size: 0.68rem; } .pdx-empty { font-size: 0.82rem; color: var(--pd-text-soft); line-height: 1.5; padding: 0 2px; } /* ============================================================================ Certificate templates — admin editor + member builder. ========================================================================== */ .tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; } .tpl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); } .tpl-thumb { aspect-ratio: 16/11; background: var(--surface-2); display: grid; place-items: center; overflow: hidden; } .tpl-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .tpl-noimg { font-family: var(--mono); font-size: 0.78rem; color: var(--ink-soft); } .tpl-body { padding: 16px 18px; } .tpl-body h3 { font-size: 1rem; } .tpl-body p { font-size: 0.85rem; margin-top: 0.3rem; } .tpl-actions { display: flex; gap: 0.5rem; margin-top: 0.9rem; flex-wrap: wrap; align-items: center; } /* editor layout: artwork stage beside the field inputs */ .cert-editor { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; margin-top: 1rem; } @media (max-width: 900px) { .cert-editor { grid-template-columns: 1fr; } } .cert-stage { position: relative; width: 100%; aspect-ratio: 297/210; /* A4 landscape */ background-size: cover; background-position: center; background-color: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .cert-stage.portrait { aspect-ratio: 210/297; } .stage-empty { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); } /* draggable position markers (admin) */ .cert-marker { position: absolute; transform: translate(-50%, -50%); cursor: grab; background: rgba(255,255,255,.9); border: 1.5px dashed var(--brand); border-radius: 6px; padding: 3px 9px; font-size: 0.75rem; font-weight: 700; white-space: nowrap; user-select: none; touch-action: none; box-shadow: var(--shadow); } .cert-marker:active { cursor: grabbing; } /* rendered preview text (member builder) */ .cert-preview-text { position: absolute; white-space: nowrap; pointer-events: none; font-family: Helvetica, Arial, sans-serif; line-height: 1; } .cert-fields { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow); } /* NEW: a locked field (readonly) in the member-facing certificate builder — visually flagged so it's clear it can't be edited, not just accidentally uneditable-looking. */ .cert-input.is-locked { background: var(--surface-2); color: var(--ink-soft); cursor: not-allowed; } .cert-field-row { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 0.8rem; background: var(--surface-2); } .cert-field-row .cfr-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; font-size: 0.85rem; } .cert-field-row .rm { color: var(--danger); font-size: 0.8rem; } .cert-field-row label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; } .cert-field-row input, .cert-field-row select { padding: 0.4rem 0.5rem; font-size: 0.86rem; } /* ============================================================================ Events — masonry cards with hover excerpt (homepage) + detail page. ========================================================================== */ /* CHANGED: was a CSS multi-column masonry layout (`columns: 3`), which deliberately produces uneven card heights driven by each image's natural aspect ratio. Switched to a grid so every event card in a row is the same height — .ev-card now stretches to fill its grid cell (grid's default align-items: stretch) and .ev-media below is pinned to a fixed aspect ratio instead of the image's natural size. */ .ev-masonry { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } @media (max-width: 900px) { .ev-masonry { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .ev-masonry { grid-template-columns: 1fr; } } .ev-card { display: flex; flex-direction: column; height: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); transition: transform .2s, box-shadow .2s; } .ev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* Image + hover overlay. Fixed 3:2 aspect ratio (was: natural image size, which is what drove the old masonry effect) so every card's image band is the same height regardless of the source photo's dimensions. */ .ev-media { position: relative; overflow: hidden; background: var(--surface-2); display: block; aspect-ratio: 3/2; } .ev-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; } .ev-card:hover .ev-media img { transform: scale(1.05); } .ev-media .ev-noimg { aspect-ratio: 3/2; display: grid; place-items: center; background: linear-gradient(150deg, var(--brand), var(--brand-deep)); color: #fff; font-family: var(--mono); font-size: 0.8rem; letter-spacing: .1em; } .ev-overlay { position: absolute; inset: 0; padding: 18px; color: #fff; background: linear-gradient(to top, rgba(8,20,14,.94) 0%, rgba(8,20,14,.75) 45%, rgba(8,20,14,.25) 100%); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; opacity: 0; transition: opacity .25s ease; } .ev-card:hover .ev-overlay, .ev-card:focus-within .ev-overlay { opacity: 1; } .ev-overlay p { font-size: 0.86rem; line-height: 1.5; color: #e6efe9; } .ev-readmore { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-weight: 700; font-size: 0.84rem; color: #fff; background: var(--magenta-fill); padding: 7px 14px; border-radius: 999px; text-decoration: none; } .ev-readmore:hover { background: var(--magenta-bright); text-decoration: none; } /* Touch devices have no hover — keep the overlay visible so it stays usable. */ @media (hover: none) { .ev-overlay { opacity: 1; } } .ev-body { padding: 16px 18px; } .ev-body .ev-kicker { font-family: var(--mono); font-size: 0.7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--magenta); font-weight: 700; } .ev-body h3 { font-size: 1.05rem; margin-top: 6px; letter-spacing: -0.01em; } .ev-body h3 a { color: var(--ink); text-decoration: none; } .ev-body h3 a:hover { color: var(--brand-deep); } .ev-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: 0.8rem; color: var(--ink-soft); } .ev-meta span { display: inline-flex; align-items: center; gap: 5px; } .ev-meta svg { flex: none; opacity: .75; } .ev-price { margin-top: 10px; font-family: var(--mono); font-size: 0.82rem; color: var(--brand-deep); font-weight: 700; } [data-theme="onyx"] .ev-price { color: var(--brand); } /* tier availability chips */ .tier-window { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); } .tier-closed { opacity: .55; } .badge-closed { background: var(--surface-2); color: var(--ink-soft); } /* admin tier editor rows */ .tier-row { display: grid; grid-template-columns: 1.4fr .8fr 1fr 1fr auto; gap: 10px; align-items: end; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); margin-bottom: 10px; } @media (max-width: 820px) { .tier-row { grid-template-columns: 1fr 1fr; } } .tier-row label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: .05em; margin: 0 0 3px; } .tier-row input, .tier-row select { padding: 0.42rem 0.55rem; font-size: 0.86rem; } .tier-row .rm-tier { color: var(--danger); background: none; border: 0; cursor: pointer; font-weight: 600; font-size: 0.82rem; padding: 0.5rem 0; } .tier-locked { font-size: 0.7rem; color: var(--ink-soft); font-family: var(--mono); } /* ---------- Permissions matrix ---------- */ .perm-card { border-left: 3px solid var(--brand); } .perm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 1rem; } .perm-item { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; background: var(--surface-2); transition: border-color .15s, background .15s; } .perm-item:hover { border-color: var(--brand); } .perm-item.on { border-color: var(--brand); background: var(--brand-tint); } .perm-item input { margin-top: 3px; accent-color: var(--brand); flex: none; } .perm-item b { font-size: 0.88rem; display: block; } .perm-item small { color: var(--ink-soft); font-size: 0.76rem; line-height: 1.4; display: block; margin-top: 2px; } .perm-note { margin-top: 1rem; padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--gold) 12%, var(--surface)); font-size: 0.86rem; border-left: 3px solid var(--gold); } /* ---------- Certificate {{token}} helper ---------- */ .token-help { margin: 0.9rem 0 1.1rem; border: 1px solid var(--line); border-radius: 12px; padding: 12px 15px; background: var(--surface-2); } .token-help summary { cursor: pointer; font-weight: 700; font-size: 0.9rem; color: var(--brand-deep); } [data-theme="onyx"] .token-help summary { color: var(--brand); } .token-help code { font-family: var(--mono); font-size: 0.82rem; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; } .token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; margin-top: 0.8rem; } .token-chip { text-align: left; font-family: var(--mono); font-size: 0.78rem; cursor: pointer; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; color: var(--magenta); font-weight: 700; } .token-chip:hover { border-color: var(--magenta-fill); } .token-chip span { display: block; font-family: var(--font); font-weight: 400; color: var(--ink-soft); font-size: 0.72rem; margin-top: 3px; } /* ============================================================================ Decorative polish — section patterns, corner icons, CTA imagery. ========================================================================== */ /* Faint blueprint grid behind a section. REVERTED: the generated pattern-blueprint.svg background layer was removed by request — back to the original pure-CSS grid, no image. */ .has-pattern { position: relative; isolation: isolate; } .has-pattern::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background-image: linear-gradient(color-mix(in srgb, var(--brand) 7%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--brand) 7%, transparent) 1px, transparent 1px); background-size: 26px 26px; -webkit-mask: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%); mask: radial-gradient(70% 60% at 50% 40%, #000, transparent 78%); } /* Soft brand glow, for hero-adjacent sections. REVERTED: the generated pattern-glow.svg background layer was removed by request — back to the original pure-CSS radial glow, no image. */ .has-glow { position: relative; isolation: isolate; } .has-glow::before { content: ""; position: absolute; inset: -10% -5%; z-index: -1; pointer-events: none; background: radial-gradient(38% 44% at 88% 8%, color-mix(in srgb, var(--magenta-fill) 10%, transparent), transparent 70%), radial-gradient(42% 48% at 6% 92%, color-mix(in srgb, var(--brand) 12%, transparent), transparent 70%); } /* Watermark icon tucked into a section's corner */ .sec-icon { position: relative; } .sec-icon > .sec-icon-mark { position: absolute; top: -6px; right: -4px; width: 92px; height: 92px; color: var(--brand); opacity: .07; pointer-events: none; z-index: 0; } [data-theme="onyx"] .sec-icon > .sec-icon-mark { opacity: .11; } .sec-icon > *:not(.sec-icon-mark) { position: relative; z-index: 1; } @media (max-width: 640px) { .sec-icon > .sec-icon-mark { width: 64px; height: 64px; opacity: .05; } } /* CTA band with a photographic backdrop */ .cta-band.has-bg, .foot-cta.has-bg { position: relative; isolation: isolate; } .cta-band.has-bg .cta-bg, .foot-cta.has-bg .cta-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .cta-band.has-bg::before, .foot-cta.has-bg::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(120deg, color-mix(in srgb, var(--brand-deep) 92%, transparent) 0%, color-mix(in srgb, var(--brand-deep) 72%, transparent) 55%, color-mix(in srgb, var(--brand) 58%, transparent) 100%); } /* ---------- Event cover image + theme block ---------- */ .event-cover { width: 100%; max-height: 300px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 1rem; background: var(--surface-2); } .event-theme { border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 7%, var(--surface)); border-radius: 0 10px 10px 0; padding: 0.85rem 1.1rem; margin: 0.9rem 0; } .event-theme .et-label { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); font-weight: 700; margin-bottom: 4px; } .event-theme p { margin: 0; font-weight: 600; font-size: 1rem; line-height: 1.45; color: var(--ink); } /* ---------- Sidebar: certificate names (plain list, no per-item link) ------ */ .pd-cert-names { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .pd-cert-names li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 9px 0; border-bottom: 1px solid var(--pd-border); } .pd-cert-names li:last-child { border-bottom: 0; } .pcn-title { font-size: 0.88rem; font-weight: 600; color: var(--pd-text); } .pcn-year { font-family: var(--mono); font-size: 0.75rem; color: var(--pd-text-soft); flex: none; } /* ---------- Sidebar: dues & levy ---------- */ .pdx-pay-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 10px; } .pdx-pay-label { display: block; font-size: 0.82rem; font-weight: 600; color: var(--pd-text-soft); } .pdx-pay-amt { display: block; font-size: 1.32rem; font-weight: 800; letter-spacing: -0.02em; color: var(--pd-text); font-variant-numeric: tabular-nums; margin-top: 2px; } .pdx-pay-note { display: block; font-size: 0.75rem; color: var(--pd-text-soft); margin-top: 3px; } .pdx-pay-note a { color: var(--pd-primary); } /* ---------- Sidebar: quick actions (vertical list, not a 4-col grid) ------ */ .pdx-quick { display: flex; flex-direction: column; gap: 2px; } .pdx-qlink { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 9px 10px; border: 0; border-radius: 9px; background: transparent; cursor: pointer; color: var(--pd-text); font-family: var(--font); font-size: 0.86rem; font-weight: 500; text-decoration: none; transition: background .15s, color .15s; } .pdx-qlink:hover { background: var(--pd-bg); color: var(--pd-primary-deep); text-decoration: none; } [data-theme="onyx"] .pdx-qlink:hover { color: var(--pd-primary-2); } .pdx-qlink svg { flex: none; color: var(--pd-primary); } .pdx-qlink[disabled], .pdx-qlink.is-disabled { opacity: .45; pointer-events: none; } /* ---------- Member events grid ---------- */ /* Three across on a wide screen (was two: the 340px minimum only ever fit two in the 1040px container). Falls back to two, then one. */ .mev-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } @media (max-width: 1000px) { .mev-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mev-grid { grid-template-columns: 1fr; } } .mev-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; transition: transform .2s, box-shadow .2s; } .mev-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .mev-cover { position: relative; aspect-ratio: 16/9; overflow: hidden; background: linear-gradient(140deg, var(--brand), var(--brand-deep)); } .mev-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .mev-cover-fallback { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.85); font-family: var(--mono); font-size: 0.9rem; letter-spacing: .14em; } .mev-type, .mev-reg { position: absolute; top: 12px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-weight: 700; } .mev-type { left: 12px; background: rgba(0,0,0,.42); color: #fff; backdrop-filter: blur(4px); } .mev-reg { right: 12px; background: var(--ok); color: #fff; } .mev-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .mev-body h2 { font-size: 1.05rem; letter-spacing: -0.01em; } .mev-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 8px; } .mev-meta span { display: inline-flex; align-items: center; gap: 5px; font-size: 0.8rem; color: var(--ink-soft); } .mev-meta svg { flex: none; color: var(--brand); } .mev-theme { margin-top: 12px; border-left: 3px solid var(--gold); background: color-mix(in srgb, var(--gold) 8%, var(--surface)); border-radius: 0 8px 8px 0; padding: 9px 12px; } .mev-theme span { display: block; font-family: var(--mono); font-size: 0.62rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); font-weight: 700; } .mev-theme p { margin: 3px 0 0; font-size: 0.84rem; font-weight: 600; line-height: 1.45; } .mev-pass { margin-top: 12px; font-size: 0.8rem; color: var(--ink-soft); font-family: var(--mono); background: var(--surface-2); border-radius: 8px; padding: 8px 11px; } .mev-pass b { color: var(--ink); } .mev-cert { margin-top: 12px; display: flex; gap: 10px; align-items: center; justify-content: space-between; border-radius: 10px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface-2); } .mev-cert.open { border-color: color-mix(in srgb, var(--gold) 45%, transparent); background: color-mix(in srgb, var(--gold) 9%, var(--surface)); } .mev-cert.expired { opacity: .8; } .mev-cert b { font-size: 0.82rem; display: block; } .mev-cert p { font-size: 0.74rem; color: var(--ink-soft); margin-top: 2px; } .mev-cert .btn { flex: none; } .mev-tiers { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 8px; } .mev-tier { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mt-name { display: block; font-size: 0.86rem; font-weight: 600; } .mt-note { display: block; font-size: 0.72rem; color: var(--ink-soft); font-family: var(--mono); } .mt-right { display: flex; align-items: center; gap: 10px; flex: none; } .mt-price { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 0.92rem; } .mev-none { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 0.84rem; } @media (max-width: 400px) { .mev-tier { flex-wrap: wrap; } .mt-right { width: 100%; justify-content: space-between; } } /* ---------- Edit profile: sectioned cards, max 2 fields per row ---------- */ .pf-head { max-width: 980px; margin-bottom: 1.4rem; } .pf-head h1 { font-size: 1.9rem; } .pf-head p { color: var(--ink-soft); margin-top: 0.4rem; } .pf-form { max-width: 980px; display: flex; flex-direction: column; gap: 18px; } .pf-section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px 24px; box-shadow: var(--shadow); } .pf-shead { display: flex; gap: 13px; align-items: flex-start; margin-bottom: 1.2rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--line); } .pf-ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; background: color-mix(in srgb, var(--brand) 12%, var(--surface)); color: var(--brand-deep); } [data-theme="onyx"] .pf-ic { color: var(--brand); } .pf-shead h2 { font-size: 1.02rem; letter-spacing: -0.01em; } .pf-shead p { font-size: 0.82rem; color: var(--ink-soft); margin-top: 2px; } /* Two columns at most — the old auto-fit could reach five on a wide screen. */ .pf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; } @media (max-width: 640px) { .pf-grid { grid-template-columns: 1fr; } } .pf-field { display: flex; flex-direction: column; } .pf-field.pf-full { grid-column: 1 / -1; } .pf-field label { font-size: 0.82rem; font-weight: 600; margin: 0 0 0.4rem; display: flex; align-items: center; gap: 7px; } .pf-field input, .pf-field select, .pf-field textarea { width: 100%; } .pf-field textarea { resize: vertical; } .pf-hint { font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.35rem; } .pf-tag { font-family: var(--mono); font-size: 0.62rem; letter-spacing: .06em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--ok) 16%, var(--surface)); color: var(--ok); font-weight: 700; } .pf-photo-row { display: flex; gap: 16px; align-items: flex-start; } .pf-avatar { width: 72px; height: 72px; border-radius: 50%; flex: none; overflow: hidden; display: grid; place-items: center; border: 2px solid var(--line); background: linear-gradient(140deg, var(--brand), var(--brand-deep)); color: #fff; font-weight: 800; font-size: 1.1rem; } .pf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 480px) { .pf-photo-row { flex-direction: column; } } .pf-actions { display: flex; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 0; background: color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter: blur(8px); padding: 14px 0; border-top: 1px solid var(--line); margin-top: 4px; } /* ---------- Back button ---------- */ .pd-back, .back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.88rem; font-weight: 600; color: var(--ink-soft); text-decoration: none; padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); margin-bottom: 1.1rem; } .pd-back:hover, .back-link:hover { color: var(--brand-deep); border-color: var(--brand); text-decoration: none; } [data-theme="onyx"] .pd-back:hover, [data-theme="onyx"] .back-link:hover { color: var(--brand); } .pd-back { background: var(--pd-card); border-color: var(--pd-border); color: var(--pd-text-soft); } /* ---------- Secondary cards, inline in main flow ---------- */ .pd-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; } @media (max-width: 720px) { .pd-pair { grid-template-columns: 1fr; } } .pd-memcard { border-radius: 16px; padding: 18px; color: #fff; position: relative; overflow: hidden; background: linear-gradient(145deg, var(--pd-primary), var(--pd-primary-deep)); border-bottom: 3px solid var(--gold); } .pd-memcard .mc-top { display: flex; justify-content: space-between; align-items: flex-start; } .pd-memcard .mc-brand { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--gold-soft); } .pd-memcard .mc-name { font-weight: 800; margin-top: 18px; font-size: 1.02rem; } .pd-memcard .mc-meta { font-size: 0.78rem; opacity: 0.9; } .pd-link-list a { display: block; padding: 9px 0; border-bottom: 1px solid var(--pd-border); color: var(--pd-text); font-size: 0.9rem; font-weight: 500; text-decoration: none; } .pd-link-list a:last-child { border-bottom: 0; } .pd-link-list a:hover { color: var(--pd-primary); } .pd-link-list .yr { color: var(--pd-text-soft); font-weight: 400; } /* Dashboard "Certificates" widget — replaces the plain link list above with fixed-height boxes (title/year is plain text, not a link; each box has its own "Download Certificate" action). min-height keeps every box the same size regardless of title length. */ .pd-cert-list { display: flex; flex-direction: column; gap: 8px; } .pd-cert-box { display: flex; flex-direction: column; justify-content: space-between; min-height: 84px; padding: 10px 12px; border: 1px solid var(--pd-border); border-radius: 10px; background: var(--pd-bg); } .pd-cert-box .pcb-info { display: flex; flex-direction: column; gap: 2px; } .pd-cert-box .pcb-title { font-size: 0.9rem; font-weight: 600; color: var(--pd-text); } .pd-cert-box .pcb-year { font-size: 0.78rem; color: var(--pd-text-soft); } .pd-cert-box .pcb-dl { margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--pd-primary); text-decoration: none; } .pd-cert-box .pcb-dl:hover { text-decoration: underline; } @media print { .topbar, .footer, .ribbon, .flash, .noprint, .slant { display: none !important; } body { background: #fff; } } /* ============================================================================ HOMEPAGE SECTIONS — about, team, what-we-do, events, news. ========================================================================== */ /* Half of the hero's card row (--hb-h / 2 = 150px) hangs into this section, so the About copy needs that much headroom plus normal section padding. Keep these two in step with .hero-boxes' --hb-h. */ .about-sec { padding-top: 210px; } @media (max-width: 980px) { .about-sec { padding-top: 270px; } } @media (max-width: 640px) { .about-sec { padding-top: clamp(44px, 6vw, 78px); } } .sh.center { text-align: center; max-width: 720px; margin: 0 auto; } .sh.center .eyebrow::before { display: none; } .sh.center p { margin-left: auto; margin-right: auto; } /* ---------- About ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .about-grid h2 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.03em; margin-top: 14px; line-height: 1.15; } .about-grid p { margin-top: 18px; color: var(--ink-soft); font-size: 16px; line-height: 1.7; } .about-grid .btn { margin-top: 28px; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } } .about-panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3.4vw, 40px); } .about-panel .chk { list-style: none; padding: 0; margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; } @media (max-width: 460px) { .about-panel .chk { grid-template-columns: 1fr; } } .about-panel .chk li { display: flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink); } .about-panel .chk li::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 6'/%3E%3C/svg%3E") center/13px no-repeat; } .about-panel .panel-h { font-size: 20px; font-weight: 800; letter-spacing: -.02em; } .about-panel .panel-note { margin-top: 10px; color: var(--ink-soft); font-size: 14.5px; } .about-panel .bar { margin-top: 14px; height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; } .about-panel .bar span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--magenta-fill)); } .about-panel .bar-legend { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; font-variant-numeric: tabular-nums; } .about-panel .btn-white-pill { margin-top: 26px; background: var(--surface); border: 1px solid var(--line); } /* ---------- Team ---------- */ .team-sec { background: var(--surface-2); border-block: 1px solid var(--line); padding-inline: clamp(16px, 4vw, 32px); /* full-bleed tinted band inside the 1040px container */ margin-inline: calc(50% - 50vw); } .team-sec > * { max-width: 1040px; margin-inline: auto; } .team-row { display: grid; grid-template-columns: repeat(3, 1fr) .82fr; gap: 20px; margin-top: 38px; align-items: start; } @media (max-width: 980px) { .team-row { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .team-row { grid-template-columns: 1fr; } } /* CHANGED: was aspect-ratio 3/4 + object-fit:cover, which stretched these portraits to fill the card. The source files are only ~133x200px, so that upscaled them roughly 3x and they looked blurry. They now render at their natural 200px height (1:1 pixels) centred on a tinted frame — the same approach the Exco page already uses. */ .tm-photo { position: relative; height: 232px; overflow: hidden; border-radius: 6px; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--surface), var(--brand-tint)); } .tm-photo img { height: 200px; width: auto; max-width: 100%; object-fit: contain; display: block; border-radius: 4px; transition: transform .35s ease; } .tm:hover .tm-photo img { transform: scale(1.04); } .tm-initial { width: 100%; height: 100%; display: grid; place-items: center; font-size: 54px; font-weight: 800; color: var(--brand); background: var(--brand-tint); } .tm h3 { margin-top: 16px; font-size: 17px; font-weight: 800; text-align: center; } .tm p { margin-top: 6px; font-size: 13.5px; color: var(--ink-soft); text-align: center; } .tm-cta { background: var(--brand-tint); border-radius: 6px; padding: 28px 24px; text-align: center; display: flex; flex-direction: column; align-items: center; } [data-theme="onyx"] .tm-cta { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); } .tmc-ic { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; background: #12241c; color: var(--gold-soft); margin-bottom: 18px; } .tm-cta h3 { font-size: clamp(20px, 2.2vw, 26px); font-weight: 800; letter-spacing: -.02em; color: var(--brand-deep); line-height: 1.2; } [data-theme="onyx"] .tm-cta h3 { color: var(--brand); } .tm-cta p { margin-top: 12px; font-size: 14px; color: var(--ink-soft); } .btn-dark-pill { margin-top: 22px; background: #12241c; color: #fff; border-radius: 999px; } .btn-dark-pill:hover { background: var(--magenta-fill); } /* ---------- What we do ---------- */ .do-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 52px) 32px; margin-top: 44px; } @media (max-width: 900px) { .do-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .do-grid { grid-template-columns: 1fr; } } .do { text-align: center; } .do-ic { display: inline-grid; place-items: center; color: var(--magenta-fill); margin-bottom: 14px; } .do h3 { font-size: 19px; font-weight: 800; letter-spacing: -.02em; } .do p { margin-top: 10px; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); } /* ---------- Events ---------- */ .ev-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; flex-wrap: wrap; } .ev-head h2 { font-size: clamp(26px, 3.6vw, 42px); font-weight: 800; letter-spacing: -.03em; margin-top: 14px; line-height: 1.15; } .ev-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 52px); margin-top: 40px; } @media (max-width: 900px) { .ev-split { grid-template-columns: 1fr; } } .evf-media { position: relative; display: block; aspect-ratio: 16 / 11; overflow: hidden; border-radius: 6px; background: var(--surface-2); } .evf-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .evf-media:hover img { transform: scale(1.04); } .evf-noimg { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--mono); letter-spacing: .12em; color: var(--ink-soft); } .date-badge { position: absolute; left: 0; top: 0; background: var(--magenta-fill); color: #fff; padding: 16px 22px; text-align: center; line-height: 1; } .date-badge b { display: block; font-size: 34px; font-weight: 800; letter-spacing: -.03em; } .date-badge i { display: block; margin-top: 4px; font-style: normal; font-size: 14px; } .evf-meta { margin-top: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--ink-soft); } .evf-meta a { color: var(--magenta); font-weight: 600; } .evf-when { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-weight: 600; } .evf-when svg { color: var(--magenta-fill); } .evf h3 { margin-top: 16px; font-size: clamp(20px, 2.4vw, 26px); font-weight: 800; letter-spacing: -.02em; } .evf h3 a { color: inherit; } .evf h3 a:hover { color: var(--magenta); text-decoration: none; } .evf-ex { margin-top: 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.65; } .evf-loc { margin-top: 18px; display: inline-flex; align-items: center; gap: 10px; background: var(--surface-2); border-radius: 6px; padding: 12px 16px; font-size: 14px; } .evf-loc svg { color: var(--magenta-fill); flex: none; } .ev-list { display: flex; flex-direction: column; } .evl { display: flex; gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--line); } .evl:first-child { padding-top: 0; } .date-block { flex: none; width: 82px; height: 92px; background: #12241c; color: #fff; display: grid; place-content: center; text-align: center; line-height: 1; } .date-block b { font-size: 30px; font-weight: 800; letter-spacing: -.03em; } .date-block i { display: block; margin-top: 5px; font-style: normal; font-size: 13px; } .evl-org { font-size: 13.5px; color: var(--ink-soft); } .evl-org em { font-style: normal; color: var(--magenta); font-weight: 600; } .evl h3 { margin-top: 6px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; } .evl h3 a { color: inherit; } .evl h3 a:hover { color: var(--magenta); text-decoration: none; } .evl p { margin-top: 8px; font-size: 14px; color: var(--ink-soft); line-height: 1.6; } .ev-empty { border: 1px dashed var(--line); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 34px); background: var(--surface-2); } .ev-empty h3 { font-size: 18px; font-weight: 800; letter-spacing: -.02em; } .ev-empty p { margin-top: 10px; font-size: 14.5px; color: var(--ink-soft); line-height: 1.65; } .ev-empty .btn { margin-top: 20px; } /* The team CTA panel should match the height of the portrait cards beside it. */ .team-row .tm-cta { align-self: stretch; justify-content: center; } /* --- Admin pagination ---------------------------------------------------- */ .pager { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 1.1rem; } .pager-count { font-family: var(--mono); font-size: 0.78rem; color: var(--muted-solid); } .pager-links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .pager-links a, .pager-links span { display: inline-grid; place-items: center; min-width: 34px; height: 34px; padding: 0 9px; border-radius: 9px; font-size: 0.85rem; font-weight: 600; border: 1px solid var(--line); background: var(--surface); color: var(--ink); } .pager-links a:hover { background: var(--brand-tint); color: var(--brand-deep); border-color: var(--brand); text-decoration: none; } .pager-links .current { background: var(--brand); border-color: var(--brand); color: var(--on-brand); } .pager-links .disabled { color: var(--muted-solid); opacity: .55; } .pager-links .gap { border: 0; background: none; min-width: 18px; padding: 0; color: var(--muted-solid); } @media (max-width: 560px) { .pager { justify-content: center; } .pager-links a, .pager-links span { min-width: 30px; height: 30px; padding: 0 7px; } } /* Holding-cadre (Public) prompt in place of the dues/levy forms. */ .pdx-join p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 0.5rem; } .pdx-join p b { color: var(--ink); } .pdx-join .pd-btn { margin-top: 0.7rem; } /* --- Searchable select (progressive enhancement, see js/searchable-select.js) */ .ss-wrap { position: relative; } /* The native select stays in the DOM so the form posts unchanged — it is just taken out of the visual flow, not removed. */ .ss-wrap .ss-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .ss-input { width: 100%; } .ss-wrap::after { content: "⌄"; position: absolute; right: 12px; top: 50%; transform: translateY(-60%); pointer-events: none; color: var(--muted-solid); } .ss-menu { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 280px; overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 4px; } .ss-item { padding: 8px 10px; border-radius: 8px; font-size: 0.9rem; cursor: pointer; } .ss-item:hover, .ss-item.is-active { background: var(--brand-tint); color: var(--brand-deep); } [data-theme="onyx"] .ss-item:hover, [data-theme="onyx"] .ss-item.is-active { color: var(--brand); } .ss-none { padding: 8px 10px; font-size: 0.85rem; color: var(--muted-solid); } /* Event pass card in the dashboard sidebar. */ .pd-pass { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 13px; background: var(--surface-2); } .pd-pass + .pd-pass { margin-top: 10px; } .pd-pass .pp-title { font-weight: 700; font-size: 0.9rem; line-height: 1.35; } .pd-pass .pp-meta { margin-top: 3px; font-family: var(--mono); font-size: 0.72rem; color: var(--muted-solid); } /* "You're already registered" panel on the public event page. */ .ev-already { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 16px; border-radius: var(--radius); background: color-mix(in srgb, var(--ok, var(--brand)) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--ok, var(--brand)) 34%, var(--line)); } .ev-already.pending { background: color-mix(in srgb, var(--gold) 12%, var(--surface)); border-color: color-mix(in srgb, var(--gold) 42%, var(--line)); } .ev-already .ea-tick { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ok, var(--brand)); color: #fff; } .ev-already.pending .ea-tick { background: var(--gold); color: #3a2e05; } .ev-already > div { flex: 1 1 220px; } .ev-already p { margin-top: 2px; font-size: 0.85rem; color: var(--ink-soft); } /* A locked certificate field: shown, not editable — there is no input at all. */ .cert-locked { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0.62rem 0.75rem; border-radius: var(--radius); border: 1px dashed var(--line); background: var(--surface-2); font-weight: 600; color: var(--ink); } .cert-locked svg { flex: none; color: var(--muted-solid); }