/* COGNO Core — listing & directory styles. Intentionally light; inherits site fonts/colours. */ /* ================================================================= COGNO design system — tokens + base layer for custom-coded pages. Scoped + !important where needed so the Elementor theme kit can't override it. Used by .cogno-page and all cogno-core widgets. ================================================================= */ :root { /* Self-contained brand palette — NOT linked to Elementor's global kit, so the page builder can never shift our widgets' colours. Edit these values to re-brand. */ --cogno-navy: #001f53; --cogno-navy-2: #324a6d; --cogno-purple: #393292; /* brand "Primary Dark Lila" — primary buttons */ --cogno-blue: #1f58e6; /* brand Royal Blue — links/accents */ --cogno-coral: #ff4433; /* brand coral — CTA fill only (never a border) */ --cogno-ink: #324a6d; --cogno-ink-soft: #46586f; --cogno-bg: #f7f9fc; --cogno-bg-soft: #eef4ff; --cogno-line: #e3e9f1; --cogno-line-strong: #cfd9e6; --cogno-border-width: 1.5px; /* one consistent border width across all controls */ --cogno-radius: 12px; --cogno-radius-inner: 8px; /* nested elements inside a card (images, insets) — always smaller than --cogno-radius */ --cogno-radius-pill: 999px; --cogno-font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --cogno-section-y: clamp(60px, 11vw, 150px); /* top/bottom page padding */ --cogno-text: 1rem; /* base body copy size (16px) */ --cogno-section-title-size: 1.75rem; /* section heading size (28px) */ --cogno-maxw: 1140px; --cogno-card-pad: 16px; /* consistent card inner padding (media + body) */ /* Spacing scale — the ONE source of truth for margins / padding / gaps. Use these everywhere instead of ad-hoc px so vertical rhythm stays consistent. */ --cogno-space-xs: 8px; --cogno-space-sm: 12px; --cogno-space-md: 20px; --cogno-space-lg: 32px; --cogno-space-xl: 48px; /* Font weights — Figtree. Brand rule: headings/body stay at 'normal' (400); 'medium' (500) for footer/section labels; 'semibold' (600) is the button/pill weight only. */ --cogno-weight-normal: 400; --cogno-weight-medium: 500; --cogno-weight-semibold: 600; --cogno-modal-maxw: 720px; /* default modal max-width */ --cogno-modal-maxw-wide: 920px; /* wide variant — committee bio profiles */ --cogno-surface: #fff; /* panel/card/dropdown background */ --cogno-shadow: 0 10px 30px rgba(16,36,59,.12); /* dropdown & popup shadow */ --cogno-shadow-card: 0 6px 22px rgba(16,36,59,.10); /* card hover shadow */ /* ── Responsive breakpoints — MIRROR the Elementor Site Settings → Breakpoints. Keep these in sync with Elementor so COGNO components reflow at the same widths as Elementor content. NOTE: CSS @media rules cannot read var(); these are the canonical reference values + are read by JS (matchMedia). Every @media in cogno-core.css / cogno-layout.css MUST use one of these literal px values: Mobile Portrait ≤ 736 · Tablet Portrait ≤ 1024 · Laptop ≤ 1440 · Widescreen ≥ 2400 Elementor content width 1366 / container padding 24 (see --cogno-trial wrap, kit). */ --cogno-bp-mobile: 736px; --cogno-bp-tablet: 1024px; --cogno-bp-laptop: 1440px; --cogno-bp-wide: 2400px; } /* Full custom-page layout, isolated from the Elementor theme. */ .cogno-page { font-family: var(--cogno-font) !important; color: var(--cogno-ink); padding-top: var(--cogno-section-y) !important; padding-bottom: var(--cogno-section-y) !important; } .cogno-page__inner { max-width: var(--cogno-maxw); margin-left: auto; margin-right: auto; padding-left: clamp(20px, 5vw, 40px); padding-right: clamp(20px, 5vw, 40px); } .cogno-page h1, .cogno-page h2, .cogno-page h3, .cogno-page h4 { font-family: var(--cogno-font) !important; color: var(--cogno-navy) !important; line-height: 1.15 !important; margin: 0 0 .5em !important; } .cogno-page h1 { font-size: clamp(2rem, 4.2vw, 2.8rem) !important; font-weight: 400 !important; } .cogno-page h2 { font-size: clamp(1.5rem, 3vw, 2rem) !important; font-weight: 400 !important; } .cogno-page h3 { font-size: 1.2rem !important; font-weight: 400 !important; } /* Brand rule: headings never exceed weight 400 (Figtree). */ .cogno-page h4, .cogno-card__title, .cogno-card__name, .cogno-slide__title, .cogno-member__welcome, .cogno-member__name, .cogno-member__subhead, .cogno-login__title, .cogno-sg h1, .cogno-sg h2, .cogno-sg h3 { font-weight: 400 !important; } .cogno-page p { color: var(--cogno-ink-soft); line-height: 1.65; margin: 0 0 1em; } .cogno-page a:not([class]) { color: var(--cogno-blue); } .cogno-page > .cogno-page__inner > :first-child { margin-top: 0 !important; } /* Design-system buttons (reusable, isolated). */ .cogno-page .cogno-btn, .cogno-btn { display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 28px; border-radius: var(--cogno-radius-pill); font-weight: 600; text-decoration: none; cursor: pointer; border: var(--cogno-border-width, 1.5px) solid transparent; font-family: var(--cogno-font); } .cogno-btn--primary { background: var(--cogno-purple); color: #fff !important; } .cogno-btn--primary:hover { background: var(--cogno-navy); } .cogno-btn--ghost { background: transparent; color: var(--cogno-blue) !important; border-color: var(--cogno-line-strong); } .cogno-btn--ghost:hover { border-color: var(--cogno-blue); } /* Style guide */ .cogno-sg__swatches { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; } .cogno-sg__swatch { width: 132px; } .cogno-sg__swatch span { display: block; height: 64px; border-radius: 10px; border: 1px solid rgba(0,0,0,.08); margin-bottom: 6px; } .cogno-sg__swatch b { display: block; font-size: .85rem; color: var(--cogno-ink); } .cogno-sg__swatch code { font-size: .76rem; color: var(--cogno-ink-soft); } .cogno-sg__row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 10px; } .cogno-sg h2 { margin-top: 1.6em !important; border-top: 1px solid var(--cogno-line); padding-top: 1.2em; } .cogno-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); } .cogno-cols-1 { grid-template-columns: 1fr; } .cogno-cols-2 { grid-template-columns: repeat(2, 1fr); } .cogno-cols-3 { grid-template-columns: repeat(3, 1fr); } .cogno-cols-4 { grid-template-columns: repeat(4, 1fr); } /* Responsive ladder — aligned to the Elementor site breakpoints (Laptop 1440 / Tablet Portrait 1024 / Mobile Portrait 736). Each column choice cascades DOWN one step per breakpoint, so picking "4" gives 4 → 3 → 2 → 1: cols-4: 4 (desktop) · 3 (≤1440 laptop) · 2 (≤1024 tablet) · 1 (≤736 mobile) cols-3: 3 · 3 · 2 · 1 cols-2: 2 · 2 · 2 · 1 */ @media (max-width: 1440px) { .cogno-cols-4 { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1024px) { .cogno-cols-3, .cogno-cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 736px) { .cogno-grid { grid-template-columns: 1fr; } /* People/committee cards are photo-forward — keep a 2-up "team grid" on mobile (text-heavy publication/trial/news cards stay 1-up above). Two-class selector beats the 1fr rule. */ .cogno-grid.cogno-grid--card-committee, .cogno-grid.cogno-people { grid-template-columns: repeat(2, 1fr); gap: 14px; } } .cogno-card { display: flex; flex-direction: column; background: var(--cogno-surface); border: 1px solid var(--cogno-line); border-radius: var(--cogno-radius); overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; } .cogno-card:hover { box-shadow: var(--cogno-shadow-card); transform: translateY(-2px); } .cogno-card__media { /* aspect-ratio: 16 / 9; */ overflow: hidden; background: #f4f7fb; } /* !important: the theme/Elementor forces img{height:auto}, which leaves empty space below wide images. Force the card image to fill + cover its media box. */ .cogno-card__media img, .cogno-card__img { /*width: 100% !important; height: 100% !important; display: block;*/object-fit: cover !important; display: inline; } .cogno-card__body { padding: 16px 18px; } .cogno-card__title { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.3; } .cogno-card__title a { text-decoration: none; color: inherit; } .cogno-card__email { font-size: .9rem; word-break: break-word; } .cogno-card__excerpt { margin: 6px 0 0; font-size: .9rem; opacity: .8; } /* Publication card */ .cogno-card--publication .cogno-card__body { padding: 20px 22px; } .cogno-card__tag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #1f58e6; background: #e8effd; padding: 3px 9px; border-radius: 999px; margin-bottom: 10px; } .cogno-card--publication .cogno-card__title { font-size: 1.02rem; line-height: 1.35; } .cogno-card--publication .cogno-card__title a { color: #16243b; } .cogno-card--publication .cogno-card__title a:hover { color: #1f58e6; } .cogno-card__meta { margin: 8px 0 0; font-size: .82rem; font-weight: 600; opacity: .7; } .cogno-card__cite { margin: 10px 0 0; font-size: .86rem; line-height: 1.55; color: #46586f; } .cogno-card__cite p { margin: 0; } .cogno-card--publication .cogno-card__title { text-transform: uppercase; font-size: .98rem; letter-spacing: .01em; color: #16243b; margin: 0 0 10px; } .cogno-card .cogno-card__more { display: inline-flex; align-items: center; gap: 7px; margin-top: 14px; font-size: .85rem; font-weight: 600; color: #1f58e6; text-decoration: none; } .cogno-card .cogno-card__more:hover { color: #001f53; } .cogno-card .cogno-card__more svg { flex: none; } /* Member dashboard + login */ .cogno-member { max-width: 720px; } /* Headings inherit .cogno-page h2/h3 typography tokens — only spacing is set here. */ .cogno-member__name { margin: 0 0 var(--cogno-space-md); } .cogno-member__welcome { margin: 0 0 var(--cogno-space-md); } .cogno-member__subhead { margin: var(--cogno-space-lg) 0 var(--cogno-space-sm); } .cogno-member__links { display: flex; flex-wrap: wrap; gap: var(--cogno-space-sm); margin: 0 0 var(--cogno-space-lg); } .cogno-member__grid { display: grid; grid-template-columns: 220px 1fr; gap: 0; margin: 0; border: 1px solid var(--cogno-line); border-radius: var(--cogno-radius); overflow: hidden; } .cogno-member__grid dt { padding: var(--cogno-space-sm) var(--cogno-space-md); background: var(--cogno-bg); font-weight: 600; color: var(--cogno-ink); border-bottom: 1px solid var(--cogno-line); } .cogno-member__grid dd { padding: var(--cogno-space-sm) var(--cogno-space-md); margin: 0; color: var(--cogno-ink-soft); border-bottom: 1px solid var(--cogno-line); } .cogno-member__grid dt:last-of-type, .cogno-member__grid dd:last-of-type { border-bottom: none; } /* Quick-link pills: match the style-guide button geometry (btn padding/size + pill radius); normal weight (no bold). */ .cogno-member__link { display: inline-flex; align-items: center; padding: var(--cogno-btn-py, 9px) var(--cogno-btn-px, 18px); border-radius: var(--cogno-radius-pill, 999px); background: var(--cogno-bg-soft, #eef4ff); color: var(--cogno-blue, #1f58e6) !important; font-size: var(--cogno-btn-size, 14px); font-weight: var(--cogno-weight-normal); text-decoration: none !important; transition: background .15s ease, color .15s ease; } /* !important on the hover colour: the Elementor kit's `.elementor-kit-14 a:hover` (#393292) has higher specificity and would otherwise win, leaving dark text on the blue pill. */ .cogno-member__link:hover { background: var(--cogno-blue, #1f58e6) !important; color: #fff !important; } .cogno-member__pw { margin-top: var(--cogno-space-lg); border: 1px solid var(--cogno-line); border-radius: var(--cogno-radius); padding: 0 var(--cogno-space-md); } .cogno-member__pw summary { display: flex; align-items: center; gap: var(--cogno-space-xs); cursor: pointer; font-weight: 600; color: var(--cogno-ink); padding: var(--cogno-space-sm) 0; list-style: none; } .cogno-member__pw summary::-webkit-details-marker { display: none; } /* replace the default ▶ with Lucide icons */ .cogno-member__pw summary .cogno-ico { width: 18px; height: 18px; } .cogno-member__pw summary .cogno-member__pw-lock { color: var(--cogno-purple); } .cogno-member__pw summary .cogno-member__pw-caret { margin-left: auto; color: var(--cogno-ink-soft); transition: transform .15s ease; } .cogno-member__pw[open] summary .cogno-member__pw-caret { transform: rotate(180deg); } .cogno-pwform { display: flex; flex-wrap: wrap; gap: var(--cogno-space-sm); align-items: flex-end; padding: var(--cogno-space-xs) 0 var(--cogno-space-md); } .cogno-pwform label { display: flex; flex-direction: column; gap: 5px; font-size: .85rem; color: var(--cogno-ink-soft); } /* Inputs + button share the same 48px height so they align on the flex-end baseline. */ .cogno-pwform input { height: 48px; padding: 0 14px; border: 1px solid var(--cogno-line-strong); border-radius: var(--cogno-radius-inner); min-width: 200px; } .cogno-member__btn { height: 48px; padding: 0 22px; border: none; border-radius: var(--cogno-radius-pill); background: var(--cogno-purple); color: #fff; font-weight: var(--cogno-weight-semibold); cursor: pointer; } .cogno-member__btn:hover { background: var(--cogno-navy); } .cogno-member__notice { padding: var(--cogno-space-xs) var(--cogno-space-sm); border-radius: var(--cogno-radius-inner); font-size: .9rem; margin: 0 0 var(--cogno-space-sm); } .cogno-member__notice--ok { background: #e7f5ee; color: #0c5b3c; } .cogno-member__notice--err { background: #fbe9e7; color: #b7791f; } .cogno-login__title { margin: 0 0 var(--cogno-space-md); } /* size/colour from .cogno-page h2 tokens */ /* .cogno-member scope beats `.cogno-page p { margin:0 0 1em }` (which was resetting margin-top to 0). */ .cogno-member .cogno-member__logout { margin-top: var(--cogno-space-lg); } /* Log out = secondary action → neutral outline button on the style-guide button tokens (btn size/padding/weight), with a Lucide icon. */ .cogno-member__logout a { display: inline-flex; align-items: center; gap: var(--cogno-space-xs); padding: var(--cogno-btn-py, 9px) var(--cogno-btn-px, 18px); border: var(--cogno-border-width, 1.5px) solid var(--cogno-line-strong); border-radius: var(--cogno-radius-pill); background: transparent; color: var(--cogno-ink) !important; font-size: var(--cogno-btn-size, 14px); font-weight: var(--cogno-weight-semibold); text-decoration: none !important; transition: background .15s ease, color .15s ease, border-color .15s ease; } .cogno-member__logout a:hover { border-color: var(--cogno-purple); color: var(--cogno-purple) !important; background: var(--cogno-bg); } .cogno-member__logout a .cogno-ico { width: 17px; height: 17px; } /* "Forgot your password?" stays a plain text link. */ .cogno-login__lost a { color: var(--cogno-blue, #1f58e6) !important; text-decoration: underline; } .cogno-login__lost a:hover { color: var(--cogno-navy, #001f53) !important; } .cogno-login { max-width: 440px; } .cogno-login form { margin: 0; } .cogno-login p { margin: 0 0 var(--cogno-space-sm); } /* even rhythm between form rows */ .cogno-login .login-remember { margin-bottom: var(--cogno-space-md); } .cogno-login .login-remember label { display: flex; align-items: center; gap: var(--cogno-space-xs); font-weight: 400; margin: 0; } .cogno-login__lost { margin: var(--cogno-space-md) 0 0; } /* !important + full property set: fully override the theme's Elementor kit (.elementor-kit-14 …) and reset.css on the member/login controls, so these forms match the design system 100%. */ .cogno-login input[type="text"], .cogno-login input[type="password"], .cogno-login input[type="email"], .cogno-pwform input[type="password"] { width: 100% !important; height: 48px !important; padding: 0 16px !important; border: 1px solid var(--cogno-line-strong, #cfd9e6) !important; border-radius: var(--cogno-radius-inner, 8px) !important; background: var(--cogno-surface, #fff) !important; background-image: none !important; font-family: var(--cogno-font) !important; font-size: 1rem !important; font-weight: 400 !important; line-height: normal !important; letter-spacing: normal !important; text-transform: none !important; color: var(--cogno-ink, #324a6d) !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; margin-bottom: var(--cogno-space-sm); } .cogno-login label { display: block; font-family: var(--cogno-font) !important; font-weight: 600; color: var(--cogno-ink, #324a6d); margin-bottom: 6px; } .cogno-login .button, .cogno-login input[type="submit"], .cogno-member__btn { display: inline-block !important; width: auto !important; background: var(--cogno-purple, #393292) !important; background-image: none !important; color: #fff !important; border: none !important; border-radius: var(--cogno-radius-pill, 999px) !important; height: 48px !important; line-height: 48px !important; padding: 0 28px !important; font-family: var(--cogno-font) !important; font-size: 1rem !important; font-weight: var(--cogno-weight-semibold) !important; letter-spacing: normal !important; text-transform: none !important; text-shadow: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; cursor: pointer !important; transition: background .15s ease !important; } .cogno-login .button:hover, .cogno-login input[type="submit"]:hover, .cogno-member__btn:hover { background: var(--cogno-navy, #001f53) !important; } .cogno-login input:focus-visible, .cogno-pwform input:focus-visible { outline: 2px solid var(--cogno-blue, #1f58e6) !important; outline-offset: 1px; } /* The shared hardened rule adds margin-bottom (for the STACKED login form). The reset-password form is a horizontal flex row, so that bottom margin misaligns the button — remove it here. (Same specificity as the hardened selector, later in the file → wins, no !important needed.) */ .cogno-pwform input[type="password"] { margin-bottom: 0; } @media (max-width: 560px){ .cogno-member__grid { grid-template-columns: 1fr; } .cogno-member__grid dt { border-bottom: none; padding-bottom: 0; background: var(--cogno-surface, #fff); } } /* Single-page field output */ .cogno-field { margin: 0 0 12px; } .cogno-field__label { font-weight: 700; color: #16243b; } .cogno-field__value { color: #46586f; } .cogno-field--html .cogno-field__value p { margin: 0 0 10px; } .cogno-field__img { max-width: 100%; height: auto; border-radius: 8px; } /* ==================================================================== ELEMENTOR OVERRIDE RULE — mandatory for every interactive element ==================================================================== Two Elementor stylesheets both override our widget styles on the live frontend (they load AFTER cogno-core.css and have equal or higher specificity): 1. reset.css → targets `button`, `[type=button]`, `[type=submit]`: display: inline-block ← collapses flex layout → button shrinks width: auto ← breaks width: 100% on flex children background: transparent border: 1px solid #c36 (coral!) border-radius: 3px color: #c36 padding: .5rem 1rem 2. kit post-14.css → targets `.elementor-kit-NN button`, `.elementor-kit-NN input[type=button]`: background-color: #393292 (purple!) font-family: Poppins, Sans-serif border-radius: 40px padding: 12px 24px The Elementor editor preview loads a different stylesheet order, so styles appear correct there but break on the live page. RULE: Every