/* ===================================================================== hub-forms.css — the Knowledge Hub's public forms and plain pages (redesign SPEC §5.1–5.2): the Contact form, the event registration form, the newsletter sign-up (hub/partials/newsletter_form), the pages kept in the database (About, Our Mission, Our Vision, Privacy Policy, Certification, Chapter) with the team, and — section 6 — the pages the Hub shares with Country Profiles (log in, register, password reset, profile, newsletter replies and the "page not found" page). Those shared pages keep Country Profiles' markup (its classes .auth-card, .btn-gold, .page-404 …), which Country Profiles styles in app.css / v5.css; this file — loaded only by layouts/hub.php — gives the same markup the CRCGS kit's look on the Hub. Country Profiles never loads it, so its pages are untouched. Colours, fonts and sizes come from the kit's --ck- tokens only. Sections: 1 shared form parts · 2 contact · 3 newsletter sign-up · 4 database pages · 5 team · 6 shared account / newsletter / 404 pages · 7 small screens · 8 reduced motion ===================================================================== */ /* ---- 1. Shared form parts ---- */ /* The honeypot field robots fill in and people never see (forms without a session token) */ .hub-hp,body.ck:not(.v5) .hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden} .hub-form{padding:var(--ck-space-6);background:var(--ck-white);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)} .hub-form--compact{padding:0;border:0;box-shadow:none;background:transparent} .ck .hub-form__title{margin:0 0 var(--ck-space-4);font-size:1.4rem} .hub-form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--ck-space-4)} .hub-form__optional{color:var(--ck-muted);font-weight:400} .ck .hub-form__privacy{margin:0 0 var(--ck-space-4);color:var(--ck-muted);font-size:14px;line-height:1.5} .hub-form .ck-field{margin-bottom:var(--ck-space-4)} .hub-form__summary{margin:0 0 var(--ck-space-5)} .hub-form__summary:focus{outline:none} .hub-form__summary:focus-visible{outline:3px solid var(--ck-navy);outline-offset:2px} .hub-form__summary p{margin:0 0 4px} .hub-form__summary ul{margin:0;padding-left:1.2em} .hub-form__summary a{color:var(--ck-danger);font-weight:600} .hub-form--done{text-align:center} .hub-form__done-icon{color:var(--ck-success);margin-bottom:var(--ck-space-2)} .ck .hub-form--done h2{font-size:1.5rem} .hub-form__actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--ck-space-3) var(--ck-space-5);margin:var(--ck-space-5) 0 0} /* ---- 2. Contact: the introduction beside the form ---- */ /* The page container only: the Contact page's carries the class hub-contact too (HubContactController's body_class) */ .ck-wrap.hub-contact{padding-top:var(--ck-space-7);padding-bottom:var(--ck-space-8)} .hub-contact__grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:var(--ck-space-7);align-items:start} .hub-contact__intro h1{margin-bottom:var(--ck-space-4)} .hub-contact__intro .ck-prose{font-size:17px} /* ---- 3. Newsletter sign-up (hub/partials/newsletter_form) ---- */ .hub-nl{color:var(--ck-text)} .hub-nl--card{padding:var(--ck-space-5) var(--ck-space-6);background:var(--ck-light);border-radius:var(--ck-radius);box-shadow:inset 4px 0 0 var(--ck-blue);--ck-blue-text:var(--ck-blue-text-deep)} .ck .hub-nl__title{margin:0 0 var(--ck-space-2);font-size:1.35rem} .ck .hub-nl__intro{margin:0 0 var(--ck-space-4);color:var(--ck-muted)} .hub-nl__form{margin:0} .hub-nl__row{display:flex;gap:var(--ck-space-2);align-items:stretch} .ck .hub-nl__input{flex:1 1 auto;min-width:0;min-height:46px} .hub-nl__row .ck-btn{flex:0 0 auto} .ck .hub-nl__hint{margin-top:var(--ck-space-2)} .ck-section--navy .hub-nl,.ck-section--navy .hub-nl__intro,.ck-section--navy .hub-nl .ck-label,.ck-section--navy .hub-nl .ck-hint{color:var(--ck-on-navy)} /* ---- 4. Pages kept in the database (About, Our Mission, Our Vision, Privacy Policy, Certification, Chapter) ---- */ .hub-doc{padding-top:var(--ck-space-7);padding-bottom:var(--ck-space-8)} .hub-doc__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ck-space-7);align-items:start} .hub-doc__grid--aside{grid-template-columns:minmax(0,1fr) 15rem} .hub-doc__title{max-width:46rem;margin-bottom:var(--ck-space-5)} .hub-doc__aside{position:sticky;top:calc(var(--ck-sticky-top) + var(--ck-space-5));padding:var(--ck-space-4) var(--ck-space-5); background:var(--ck-neutral);border-radius:var(--ck-radius);transition:top var(--ck-dur-slow) var(--ck-ease);--ck-blue-text:var(--ck-blue-text-deep)} .ck .hub-doc__aside-title{margin:0 0 var(--ck-space-2);color:var(--ck-muted);font:600 12px/1.3 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase} .hub-doc__aside ul{margin:0;padding:0;list-style:none} .hub-doc__aside a{display:block;padding:7px 10px;margin:0 -10px;border-radius:var(--ck-radius-sm);color:var(--ck-navy);text-decoration:none;font-weight:500} .hub-doc__aside a:hover{background:var(--ck-white)} .hub-doc__aside a[aria-current="page"]{background:var(--ck-white);box-shadow:inset 3px 0 0 var(--ck-blue);font-weight:700} /* ---- 5. The team on About (only when Homepage → Team has published members) ---- */ .hub-team{margin:var(--ck-space-8) 0 0;padding-top:var(--ck-space-6);border-top:1px solid var(--ck-line);scroll-margin-top:calc(var(--ck-sticky-top) + var(--ck-space-4))} .hub-team__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:var(--ck-space-6) var(--ck-space-5);margin:var(--ck-space-5) 0 0;padding:0;list-style:none} .hub-team__member{text-align:center} .hub-team__photo{display:block;width:140px;height:140px;margin:0 auto var(--ck-space-3);border-radius:50%;object-fit:cover;border:4px solid var(--ck-white);box-shadow:var(--ck-shadow)} .hub-team__photo--none{display:grid;place-items:center;background:var(--ck-light);color:var(--ck-navy);font:700 2.5rem/1 var(--ck-font-head)} .ck .hub-team__name{margin:0;color:var(--ck-navy);font:600 1.1rem/1.3 var(--ck-font-head)} .ck .hub-team__role{margin:4px 0 0;color:var(--ck-muted);font-size:14px;line-height:1.45} /* ---- 6. Pages shared with Country Profiles, on the Hub (Country Profiles' markup, the kit's look) ---- */ body.ck:not(.v5) .container{max-width:var(--ck-wrap);margin:0 auto;padding:0 var(--ck-gutter) var(--ck-space-8)} body.ck:not(.v5) .card{background:var(--ck-white);border:1px solid var(--ck-line);border-radius:var(--ck-radius);box-shadow:var(--ck-shadow)} body.ck:not(.v5) .muted{color:var(--ck-muted)} body.ck:not(.v5) .page-intro{max-width:46rem;color:var(--ck-muted);font-size:1.05rem} body.ck:not(.v5) .container > .alert{max-width:46rem} /* Buttons: gold = the kit's primary (orange, navy text); navy = secondary */ body.ck:not(.v5) .btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ck-space-2);min-height:46px;padding:0 var(--ck-space-5); border:2px solid transparent;border-radius:var(--ck-radius-sm);font:600 15px/1.2 var(--ck-font-body);text-decoration:none;cursor:pointer; transition:background-color var(--ck-dur) ease,transform var(--ck-dur) ease,box-shadow var(--ck-dur) ease} body.ck:not(.v5) .btn:hover{transform:translateY(-1px);box-shadow:var(--ck-shadow)} body.ck:not(.v5) .btn-gold{background:var(--ck-orange);color:var(--ck-navy)} body.ck:not(.v5) .btn-gold:hover{background:var(--ck-orange-hover);color:var(--ck-navy)} body.ck:not(.v5) .btn-navy{background:var(--ck-navy);color:var(--ck-white)} body.ck:not(.v5) .btn-navy:hover{background:var(--ck-navy-deep);color:var(--ck-white)} body.ck:not(.v5) .btn-block{display:flex;width:100%} /* Fields: bare labels and inputs, as on Country Profiles' forms */ body.ck:not(.v5) :is(.auth-card,.admin-form,.resend-form,.error-search) label{display:block;margin:var(--ck-space-4) 0 6px;color:var(--ck-text);font:600 14px/1.4 var(--ck-font-body)} body.ck:not(.v5) :is(.auth-card,.admin-form,.resend-form,.error-search) :is(input[type="email"],input[type="password"],input[type="text"],input[type="search"],select){ display:block;width:100%;margin:0;padding:11px 14px;border:1px solid var(--ck-input-line);border-radius:8px;background:var(--ck-white); color:var(--ck-text);font:400 15px/1.4 var(--ck-font-body);transition:border-color var(--ck-dur) ease,box-shadow var(--ck-dur) ease} body.ck:not(.v5) :is(.auth-card,.admin-form,.resend-form,.error-search) :is(input,select):hover{border-color:var(--ck-muted)} body.ck:not(.v5) :is(.auth-card,.admin-form,.resend-form,.error-search) :is(input,select):focus-visible{outline:2px solid var(--ck-navy);outline-offset:0;border-color:var(--ck-navy);box-shadow:0 0 0 5px var(--ck-focus-halo)} body.ck:not(.v5) .field-hint{display:block;margin:6px 0 0;color:var(--ck-muted);font-size:13.5px;line-height:1.5} body.ck:not(.v5) .alert{margin:0 0 var(--ck-space-4);padding:var(--ck-space-3) var(--ck-space-4);border-radius:var(--ck-radius-sm);font-size:15px;line-height:1.5} body.ck:not(.v5) .alert-error{background:var(--ck-cream);color:var(--ck-danger);box-shadow:inset 3px 0 0 var(--ck-danger)} body.ck:not(.v5) .alert-success{background:var(--ck-light);color:var(--ck-success);box-shadow:inset 3px 0 0 var(--ck-success)} /* Log in, register, forgotten and new password */ body.ck:not(.v5) .auth-card{max-width:30rem;margin:var(--ck-space-7) auto var(--ck-space-8);padding:var(--ck-space-6)} body.ck:not(.v5) .auth-card h1{margin:0 0 var(--ck-space-3);font-size:clamp(1.75rem,1.5rem + 1vw,2.25rem)} body.ck:not(.v5) .auth-card > .muted{margin:var(--ck-space-4) 0 0;font-size:15px} body.ck:not(.v5) .auth-card form{margin:0} body.ck:not(.v5) .auth-card .btn-block{margin-top:var(--ck-space-5)} body.ck:not(.v5) .pw-field{display:flex;align-items:stretch;gap:6px} body.ck:not(.v5) .pw-field input{flex:1 1 auto;min-width:0} body.ck:not(.v5) .pw-toggle{flex:0 0 auto;min-width:64px;padding:0 var(--ck-space-3);border:1px solid var(--ck-line-strong);border-radius:8px;background:var(--ck-neutral); color:var(--ck-navy);font:600 14px/1 var(--ck-font-body);cursor:pointer} body.ck:not(.v5) .pw-toggle:hover{border-color:var(--ck-navy);background:var(--ck-light)} body.ck:not(.v5) .form-aside{margin:var(--ck-space-2) 0 0;font-size:14px} body.ck:not(.v5) .sso-row{display:flex;flex-wrap:wrap;gap:var(--ck-space-2)} /* Your account (profile) */ body.ck:not(.v5) .container > h1{margin:var(--ck-space-6) 0 var(--ck-space-3)} body.ck:not(.v5) .admin-form{max-width:46rem;margin:var(--ck-space-5) 0;padding:var(--ck-space-5) var(--ck-space-6) var(--ck-space-6)} body.ck:not(.v5) .admin-form .btn{margin-top:var(--ck-space-5)} body.ck:not(.v5) .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 var(--ck-space-4)} body.ck:not(.v5) .inline-form{display:inline;margin:0} /* Newsletter replies and "page not found" */ body.ck:not(.v5) .page-404{max-width:44rem;padding-top:var(--ck-space-8);padding-bottom:var(--ck-space-8);text-align:center} body.ck:not(.v5) .page-404 h1{margin-bottom:var(--ck-space-4)} body.ck:not(.v5) .page-404 > p{color:var(--ck-text);font-size:1.075rem} body.ck:not(.v5) .error-eyebrow{margin:0 0 var(--ck-space-2);color:var(--ck-blue-text);font:600 13px/1.3 var(--ck-font-body);letter-spacing:.12em;text-transform:uppercase} body.ck:not(.v5) .error-search{display:flex;gap:var(--ck-space-2);max-width:32rem;margin:var(--ck-space-5) auto} body.ck:not(.v5) .error-search input{flex:1 1 auto;min-width:0} body.ck:not(.v5) .error-actions{margin:var(--ck-space-5) 0} body.ck:not(.v5) .error-links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--ck-space-2) var(--ck-space-5);margin-top:var(--ck-space-4)} body.ck:not(.v5) .resend-form{display:flex;flex-direction:column;align-items:stretch;gap:var(--ck-space-2);max-width:26rem;margin:var(--ck-space-5) auto;text-align:left} body.ck:not(.v5) .resend-form label{margin-top:0} body.ck:not(.v5) .resend-form .btn{align-self:flex-start;margin-top:var(--ck-space-2)} /* ---- 7. Small screens ---- */ @media (max-width:900px){ .hub-contact__grid,.hub-doc__grid--aside{grid-template-columns:minmax(0,1fr);gap:var(--ck-space-5)} .hub-doc__aside{position:static} } @media (max-width:600px){ .hub-form{padding:var(--ck-space-5) var(--ck-space-4)} .hub-form__row{grid-template-columns:minmax(0,1fr)} .hub-nl--card{padding:var(--ck-space-4)} .hub-nl__row{flex-direction:column} .hub-nl__row .ck-btn{width:100%} body.ck:not(.v5) .auth-card{margin:var(--ck-space-5) var(--ck-gutter) var(--ck-space-7);padding:var(--ck-space-5) var(--ck-space-4)} body.ck:not(.v5) .admin-form{padding:var(--ck-space-4)} body.ck:not(.v5) .error-search{flex-direction:column} } /* Touch screens: 44px tap targets (review R3-07) */ @media (pointer:coarse){ .hub-doc__aside a{padding-top:11px;padding-bottom:11px} } /* ---- 8. Reduced motion ---- */ @media (prefers-reduced-motion:reduce){ .hub-doc__aside,body.ck:not(.v5) .btn,body.ck:not(.v5) :is(.auth-card,.admin-form,.resend-form,.error-search) :is(input,select){transition:none} body.ck:not(.v5) .btn:hover{transform:none} } /* ---------- Team review 2026-10-18 (h3): the account pages' menu, Settings and the reading list ---------- The account pages (Your account, Settings, Your reading list) share a row of links under their heading (partials/account_nav.php); Settings is three small cards (pages/account_settings.php); the reading list is a plain list with a Remove button on each row (hub/account/reading_list.php). Country Profiles' markup, the kit's look, as in section 6. */ body.ck:not(.v5) .account-nav{margin:0 0 var(--ck-space-5)} body.ck:not(.v5) .account-nav ul{display:flex;flex-wrap:wrap;gap:var(--ck-space-2);margin:0;padding:0;list-style:none} body.ck:not(.v5) .account-nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 var(--ck-space-4);border:1px solid var(--ck-line-strong); border-radius:var(--ck-radius-pill);background:var(--ck-white);color:var(--ck-navy);font:500 15px/1.2 var(--ck-font-body);text-decoration:none; transition:background-color var(--ck-dur) ease,border-color var(--ck-dur) ease,color var(--ck-dur) ease} body.ck:not(.v5) .account-nav a:hover{background:var(--ck-light);border-color:var(--ck-navy)} body.ck:not(.v5) .account-nav a[aria-current="page"]{background:var(--ck-navy);border-color:var(--ck-navy);color:var(--ck-white);font-weight:600} body.ck:not(.v5) .account-section{margin:0 0 var(--ck-space-5)} body.ck:not(.v5) .account-section h2{margin:0 0 var(--ck-space-3);font-size:1.35rem} body.ck:not(.v5) .account-email{margin:0;overflow-wrap:anywhere} body.ck:not(.v5) .account-section .field-hint + form > label:first-of-type{margin-top:var(--ck-space-5)} body.ck:not(.v5) .account-check{margin:0} body.ck:not(.v5) .admin-form .account-check label{display:flex;align-items:flex-start;gap:var(--ck-space-3);margin:0;font-weight:500} body.ck:not(.v5) .account-check input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--ck-navy)} body.ck:not(.v5) .alert-info{background:var(--ck-light);color:var(--ck-navy);box-shadow:inset 3px 0 0 var(--ck-blue)} /* Your reading list */ body.ck:not(.v5) .hub-readlist-count{margin:0 0 var(--ck-space-3)} body.ck:not(.v5) .hub-readlist{max-width:52rem;margin:0;padding:0;list-style:none;border-top:1px solid var(--ck-line)} body.ck:not(.v5) .hub-readlist__item{display:flex;align-items:center;justify-content:space-between;gap:var(--ck-space-3) var(--ck-space-5); padding:var(--ck-space-4) 0;border-bottom:1px solid var(--ck-line)} body.ck:not(.v5) .hub-readlist__text{min-width:0} body.ck:not(.v5) .hub-readlist__title{margin:0 0 4px;font:600 1.2rem/1.35 var(--ck-font-head);text-wrap:pretty} body.ck:not(.v5) .hub-readlist__title a{color:var(--ck-navy);text-decoration:none} body.ck:not(.v5) .hub-readlist__title a:hover{text-decoration:underline} body.ck:not(.v5) .hub-readlist__meta{display:flex;flex-wrap:wrap;gap:4px var(--ck-space-4);margin:0;color:var(--ck-muted);font-size:14px} body.ck:not(.v5) .hub-readlist__meta a{color:var(--ck-blue-text);font-weight:600;text-decoration:none} body.ck:not(.v5) .hub-readlist__meta a:hover{color:var(--ck-navy);text-decoration:underline} body.ck:not(.v5) .hub-readlist__remove{flex:0 0 auto;margin:0} body.ck:not(.v5) .hub-readlist__remove .btn{min-height:40px;padding:0 var(--ck-space-4);border-color:var(--ck-line-strong);background:var(--ck-white);color:var(--ck-navy);font-size:14px} body.ck:not(.v5) .hub-readlist__remove .btn:hover{border-color:var(--ck-navy);background:var(--ck-navy);color:var(--ck-white)} body.ck:not(.v5) .hub-readlist-empty{max-width:46rem;padding:var(--ck-space-5) var(--ck-space-6);background:var(--ck-neutral);border-radius:var(--ck-radius)} body.ck:not(.v5) .hub-readlist-empty p{margin:0 0 var(--ck-space-3)} body.ck:not(.v5) .hub-readlist-empty p:last-child{margin:0} @media (max-width:600px){ body.ck:not(.v5) .hub-readlist__item{flex-direction:column;align-items:flex-start} body.ck:not(.v5) .hub-readlist-empty{padding:var(--ck-space-4)} } @media (pointer:coarse){ body.ck:not(.v5) .account-nav a,body.ck:not(.v5) .hub-readlist__remove .btn{min-height:44px} } @media (prefers-reduced-motion:reduce){ body.ck:not(.v5) .account-nav a{transition:none} } /* ---------- Team review round 3 (q2): "Delete my account" on Settings ---------- The last card of Settings (pages/account_settings.php): what is deleted and what is kept, the newsletter question (only while the address is on the list: two radios, a plain fieldset), the password, the "I understand" tick and the button. A red edge marks the one card that cannot be undone; the button is the kit's danger colour (white text on it: 6.6:1). */ body.ck:not(.v5) .account-delete{box-shadow:inset 4px 0 0 var(--ck-danger),var(--ck-shadow)} body.ck:not(.v5) .account-delete h3{margin:var(--ck-space-5) 0 var(--ck-space-2);font-size:1.15rem} body.ck:not(.v5) .account-delete__list{margin:0;padding-left:1.25em} body.ck:not(.v5) .account-delete__list li{margin:0 0 var(--ck-space-2);line-height:1.55} body.ck:not(.v5) .account-delete form{margin-top:var(--ck-space-5);padding-top:var(--ck-space-2);border-top:1px solid var(--ck-line)} body.ck:not(.v5) .account-delete .account-check{margin-top:var(--ck-space-4)} body.ck:not(.v5) .account-delete__choice{min-width:0;margin:var(--ck-space-4) 0 0;padding:0;border:0} body.ck:not(.v5) .account-delete__choice legend{margin:0 0 var(--ck-space-1);padding:0;color:var(--ck-text);font:600 14px/1.4 var(--ck-font-body)} body.ck:not(.v5) .account-delete .account-delete__choice .account-check{margin-top:var(--ck-space-2)} body.ck:not(.v5) .btn-danger{background:var(--ck-danger);color:var(--ck-white)} body.ck:not(.v5) .btn-danger:hover{background:var(--ck-alert-deep);color:var(--ck-white)} @media (prefers-reduced-motion:reduce){ body.ck:not(.v5) .btn-danger:hover{transform:none} } /* ---------- Join as an Author 2026-10-19: the application form, its page and the homepage's pop-up ---------- Owner, 2026-10-19: "a pop-up form for them to fill their details and experience". One form (hub/authors/ _apply_panel.php) in two places: the page /join-as-an-author (the introduction beside the form, like Contact; one column below 900px) and the homepage's modal