/** * ISTST theme custom styles. * Tailwind utility classes handle layout/spacing/color directly in * markup (via the Tailwind CDN engine loaded in html.html.twig). * This file only holds things Tailwind utilities can't express: * animations, keyframes, and a few component-level states. */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* * For authenticated users (admin toolbar visible), our theme adds an * "istst-logged-in" class to via istst_theme_preprocess_html() * in istst_theme.theme. The admin toolbar sits on top of our normally * fixed header, so for logged-in users we just drop the header out * of fixed positioning entirely and push it down with a flat margin. */ body.istst-logged-in #header-wrapper { position: static; margin-top: 105px; } /* * Contextual Links (the pencil-icon block edit overlay Drupal shows * admins on hover) sits on top of our nav items and intercepts the * mouse before the CSS :hover dropdown can trigger -- effectively * breaking the Organization/Gallery/Events/Member dropdowns for * logged-in admins only. */ #header-wrapper .contextual { display: none !important; } /* ========================================================================== DRUPAL STATUS MESSAGES (MODERN BOTTOM TOAST WITH SCROLL) ========================================================================== */ /* 1. THE OUTER WRAPPER */ [data-drupal-messages], .webform-message { position: fixed !important; bottom: 2rem !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; z-index: 9999 !important; width: calc(100% - 2rem) !important; max-width: 28rem !important; pointer-events: none; display: flex; flex-direction: column; align-items: center; margin: 0 !important; } /* 2. THE ACTUAL MESSAGE CARD */ [data-drupal-messages] > div, .messages, .webform-message { pointer-events: auto !important; position: relative !important; /* Required for the absolute close button */ width: 100% !important; /* Height constraints & Scrolling */ max-height: 45vh !important; overflow-y: auto !important; border-radius: 1rem !important; /* Extra right padding (3.5rem) ensures text doesn't overlap the close button */ padding: 1.25rem 3.5rem 1.25rem 1.5rem !important; font-size: 0.9375rem !important; font-weight: 500 !important; line-height: 1.5 !important; margin-bottom: 0.75rem !important; border: 1px solid rgba(0,0,0,0.05) !important; background-color: #ffffff !important; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important; /* Snappy slide-up animation on load */ animation: toastSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards !important; will-change: transform, opacity; } /* Custom Minimalist Scrollbar for the Toast */ [data-drupal-messages] > div::-webkit-scrollbar, .messages::-webkit-scrollbar, .webform-message::-webkit-scrollbar { width: 6px; } [data-drupal-messages] > div::-webkit-scrollbar-track, .messages::-webkit-scrollbar-track, .webform-message::-webkit-scrollbar-track { background: transparent; margin: 1rem 0; /* Keeps track away from rounded corners */ } [data-drupal-messages] > div::-webkit-scrollbar-thumb, .messages::-webkit-scrollbar-thumb, .webform-message::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.15); border-radius: 10px; } [data-drupal-messages] > div::-webkit-scrollbar-thumb:hover, .messages::-webkit-scrollbar-thumb:hover, .webform-message::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.25); } /* Hide default visually-hidden headings */ [data-drupal-messages] .visually-hidden, .webform-message .visually-hidden { display: none !important; } /* Animations */ @keyframes toastSlideUp { 0% { opacity: 0; transform: translateY(1.5rem) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastSlideDown { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(1.5rem) scale(0.95); } } /* Strip default Drupal list styles */ [data-drupal-messages] ul, .messages ul, .webform-message ul { list-style: none !important; margin: 0 !important; padding: 0 !important; } [data-drupal-messages] li, .messages li, .webform-message li { margin-bottom: 0.375rem !important; } [data-drupal-messages] li:last-child, .messages li:last-child, .webform-message li:last-child { margin-bottom: 0 !important; } /* 3. COLOR MODIFIERS & ICONS */ [aria-label="Error message"], .messages--error, .webform-message--error { background-color: #FEF2F2 !important; color: #991B1B !important; border-color: #FCA5A5 !important; } [aria-label="Error message"] [role="alert"]::before, .messages--error::before, .webform-message--error::before { content: "⚠ "; font-weight: 700; margin-right: 0.5rem; } [aria-label="Status message"], .messages--status, .webform-message--status { background-color: #ECFDF5 !important; color: #065F46 !important; border-color: #6EE7B7 !important; } [aria-label="Status message"] [role="alert"]::before, .messages--status::before, .webform-message--status::before { content: "✓ "; font-weight: 700; margin-right: 0.5rem; } [aria-label="Warning message"], .messages--warning, .webform-message--warning { background-color: #FFFBEB !important; color: #92400E !important; border-color: #FCD34D !important; } [aria-label="Warning message"] [role="alert"]::before, .messages--warning::before, .webform-message--warning::before { content: "⚠ "; font-weight: 700; margin-right: 0.5rem; } /* ========================================================================== THEME COMPONENTS & ANIMATIONS ========================================================================== */ /* Scroll reveal animation */ .reveal { opacity: 0; transform: translateY(30px); transition: all 0.8s cubic-bezier(0.5, 0, 0, 1); } .reveal.active { opacity: 1; transform: none; } /* Hero slider transitions */ .slide { opacity: 0; transition: opacity 1s ease-in-out; position: absolute; inset: 0; z-index: 0; } .slide.active { opacity: 1; z-index: 10; } .slide-content { opacity: 0; transform: translateY(20px); transition: all 0.8s ease-out 0.3s; } .slide.active .slide-content { opacity: 1; transform: translateY(0); } /* Desktop dropdown menu */ @media (min-width: 1024px) { .group:hover .dropdown-menu { display: block; animation: fadeUp 0.2s ease-out forwards; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .nav-trigger { color: #0F4D61; } .group:hover .nav-trigger { background-color: #E9F8F9; color: #2997AA; } .nav-dropdown-link { display: block; padding: 0.65rem 1.25rem; font-size: 0.875rem; font-weight: 500; color: #454F5E; border-left: 2px solid transparent; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, padding-left 0.15s ease; } .nav-dropdown-link:hover { background-color: #E9F8F9; color: #0F4D61; border-left-color: #3AA6B9; padding-left: 1.6rem; } /* Mobile drawer transition */ #mobile-menu { transition: transform 0.3s ease-in-out; transform: translateX(100%); } #mobile-menu.open { transform: translateX(0); } /* * Belt-and-suspenders fix for the mobile drawer: force full height, * solid background, and a z-index well above the hero slider's * .slide.active (z-index:10) and the fixed header (z-50), using * plain CSS rather than relying solely on Tailwind's w-64/z-50 * utility classes resolving correctly in every context. This was * previously in place but was dropped during the toast-notification * styling merge -- re-added here. */ #mobile-menu { height: 100vh; background-color: #ffffff; z-index: 9999; } #menu-overlay { z-index: 9998; } /* Number counter */ .counter-value { font-variant-numeric: tabular-nums; } /* Marquee (announcement bar) */ .marquee-container { overflow: hidden; white-space: nowrap; width: 100%; display: flex; } .marquee-content { display: inline-flex; align-items: center; animation: marquee 20s linear infinite; } .marquee-container:hover .marquee-content { animation-play-state: paused; } @keyframes marquee { 0% { transform: translateX(100vw); } 100% { transform: translateX(-100%); } } /* Lightbox for the Gallery page */ .istst-lightbox { transition: opacity 0.25s ease; } /* ========================================================================== WEBFORM STYLING ========================================================================== */ .istst-webform-wrapper label { display: block; font-weight: 600; font-size: 0.875rem; color: #0F172A; margin-bottom: 0.375rem; } .istst-webform-wrapper .form-item, .istst-webform-wrapper .webform-composite { margin-bottom: 1.5rem; } .istst-webform-wrapper input[type="text"], .istst-webform-wrapper input[type="email"], .istst-webform-wrapper input[type="tel"], .istst-webform-wrapper input[type="date"], .istst-webform-wrapper input[type="number"], .istst-webform-wrapper textarea, .istst-webform-wrapper select { width: 100%; border: 1px solid #E5E7EB; border-radius: 0.75rem; padding: 0.65rem 1rem; font-size: 0.9375rem; color: #0F172A; background-color: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .istst-webform-wrapper input:focus, .istst-webform-wrapper textarea:focus, .istst-webform-wrapper select:focus { outline: none; border-color: #3AA6B9; box-shadow: 0 0 0 3px rgba(58, 166, 185, 0.15); } /* * Invalid-field state -- Drupal adds an ".error" class (and * aria-invalid="true") to any field that failed validation on * submit. We never styled that state before, so failed fields * looked identical to normal ones apart from the message list at * the top of the page. This highlights the specific field(s) too. */ .istst-webform-wrapper input.error, .istst-webform-wrapper textarea.error, .istst-webform-wrapper select.error, .istst-webform-wrapper input[aria-invalid="true"], .istst-webform-wrapper textarea[aria-invalid="true"], .istst-webform-wrapper select[aria-invalid="true"] { border-color: #DC2626; background-color: #FEF2F2; } .istst-webform-wrapper input.error:focus, .istst-webform-wrapper textarea.error:focus, .istst-webform-wrapper select.error:focus, .istst-webform-wrapper input[aria-invalid="true"]:focus, .istst-webform-wrapper textarea[aria-invalid="true"]:focus, .istst-webform-wrapper select[aria-invalid="true"]:focus { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15); } /* The .iti wrapper hides the underlying input's own border, so the Phone field's error state needs to target the wrapper itself. */ .istst-webform-wrapper .iti:has(input.error), .istst-webform-wrapper .iti:has(input[aria-invalid="true"]) { border-radius: 0.75rem; box-shadow: 0 0 0 1px #DC2626; } .istst-webform-wrapper textarea { min-height: 5rem; resize: vertical; } .istst-webform-wrapper .iti { width: 100%; } .istst-webform-wrapper .iti input[type="tel"] { padding-left: 3.75rem; } .istst-webform-wrapper .iti__flag-container { z-index: 2; } .istst-webform-wrapper fieldset { border: 1px solid #E5E7EB; border-radius: 1rem; padding: 1.25rem; margin-bottom: 1.5rem; } .istst-webform-wrapper fieldset legend { font-weight: 700; font-size: 0.9375rem; color: #0F4D61; padding: 0 0.5rem; } .istst-webform-wrapper .webform-composite .form-item { margin-bottom: 1rem; } .istst-webform-wrapper .form-required::after { content: ' *'; color: #DC2626; } .istst-webform-wrapper .webform-submit, .istst-webform-wrapper input[type="submit"] { width: 100%; background-color: #0F4D61; color: #ffffff; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; font-size: 0.875rem; border: none; border-radius: 9999px; padding: 0.9rem 2rem; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; } .istst-webform-wrapper .webform-submit:hover, .istst-webform-wrapper input[type="submit"]:hover { background-color: #2997AA; transform: translateY(-1px); } @media (min-width: 640px) { .istst-webform-wrapper .webform-composite .form-item { display: inline-block; width: 48%; margin-right: 2%; vertical-align: top; } } /* ========================================================================== ENHANCED COMPACT FORM LAYOUT ========================================================================== */ @media (min-width: 768px) { .webform-submission-member-registration-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; } .webform-submission-member-registration-form > .form-item, .webform-submission-member-registration-form > .webform-composite, .webform-submission-member-registration-form > fieldset, .webform-submission-member-registration-form > .form-actions { grid-column: span 2; margin-bottom: 0; } .webform-submission-member-registration-form .form-item-date-of-birth, .webform-submission-member-registration-form .form-item-qualification, .webform-submission-member-registration-form .form-item-mci-regn-no, .webform-submission-member-registration-form .form-item-present-position, .webform-submission-member-registration-form .form-item-phone, .webform-submission-member-registration-form .form-item-email { grid-column: span 1 !important; } } .istst-webform-wrapper .webform-composite .form-item { width: 100%; margin-right: 0; margin-bottom: 0; } @media (min-width: 640px) { .webform-type-webform-address .fieldset-wrapper, .webform-type-webform-name .fieldset-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.25rem; } .webform-type-webform-address .form-item-address-address, .webform-type-webform-address .form-item-address-address-2 { grid-column: span 2; } } .istst-webform-wrapper fieldset { padding: 1.25rem 1rem; margin-top: 0.5rem; background-color: #FAFAFA; border: 1px solid #E5E7EB; border-radius: 1rem; } .istst-webform-wrapper fieldset legend { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #0F4D61; padding: 0 0.5rem; } .istst-webform-wrapper input::placeholder, .istst-webform-wrapper textarea::placeholder { color: #9CA3AF; opacity: 1; } .istst-webform-wrapper .js-webform-radios { display: flex !important; flex-direction: row !important; flex-wrap: wrap; gap: 1.5rem; align-items: center; padding-top: 0.25rem; } .istst-webform-wrapper .form-type-radio { display: flex !important; align-items: center; margin-bottom: 0 !important; margin-top: 0 !important; } .istst-webform-wrapper .form-type-radio input[type="radio"] { width: auto !important; margin-right: 0.5rem; margin-bottom: 0; cursor: pointer; } .istst-webform-wrapper .form-type-radio label { margin-bottom: 0; font-weight: 500; cursor: pointer; } /* ========================================================================== MEMBERS LIST VIEW STYLING (view id: members, display: page_1) Targets Drupal core Views' default markup/classes directly -- no custom Views templates needed for the form/table/pager themselves, only the outer wrapper (views-view--members.html.twig). ========================================================================== */ /* --- Exposed filters (Name / Membership No. search) --- */ .istst-members-filters #views-exposed-form-members-page-1 { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; padding: 1rem 1.25rem; background-color: #F9FAFB; border-radius: 1rem; border: 1px solid #E5E7EB; } .istst-members-filters .form-item { flex: 1 1 220px; min-width: 180px; margin: 0; } .istst-members-filters label { display: block; font-size: 0.8125rem; font-weight: 600; color: #454F5E; margin-bottom: 0.375rem; } .istst-members-filters input[type="text"] { width: 100%; border: 1px solid #E5E7EB; border-radius: 0.75rem; padding: 0.6rem 1rem; font-size: 0.9375rem; background-color: #ffffff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .istst-members-filters input[type="text"]:focus { outline: none; border-color: #3AA6B9; box-shadow: 0 0 0 3px rgba(58, 166, 185, 0.15); } .istst-members-filters .form-actions { margin: 0; flex: 0 0 auto; } .istst-members-filters input[type="submit"] { background-color: #0F4D61; color: #ffffff; font-weight: 700; font-size: 0.8125rem; letter-spacing: 0.03em; text-transform: uppercase; border: none; border-radius: 9999px; padding: 0.65rem 1.5rem; cursor: pointer; transition: background-color 0.2s ease; } .istst-members-filters input[type="submit"]:hover { background-color: #2997AA; } /* --- Table --- */ .istst-members-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid #E5E7EB; border-radius: 1rem; } .istst-members-table-wrap table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; min-width: 480px; /* keeps columns readable; wrapper scrolls on mobile */ } .istst-members-table-wrap thead th { background-color: #E9F8F9; color: #0F4D61; font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; text-align: left; padding: 0.85rem 1.25rem; white-space: nowrap; } .istst-members-table-wrap tbody td { padding: 0.85rem 1.25rem; color: #454F5E; border-top: 1px solid #F1F5F9; } .istst-members-table-wrap tbody tr:hover { background-color: #FAFAFA; } .istst-members-table-wrap tbody tr:nth-child(even) { background-color: #FCFCFD; } .istst-members-table-wrap tbody tr:nth-child(even):hover { background-color: #F5F5F5; } /* --- Pager --- */ .istst-members-pager .pager__items { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.375rem; list-style: none; margin: 0; padding: 0; } .istst-members-pager .pager__item { margin: 0; } .istst-members-pager .pager__item a, .istst-members-pager .pager__item.is-active a { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.6rem; border-radius: 0.5rem; font-size: 0.875rem; font-weight: 600; color: #0F4D61; text-decoration: none; border: 1px solid transparent; transition: background-color 0.15s ease, border-color 0.15s ease; } .istst-members-pager .pager__item a:hover { background-color: #E9F8F9; } .istst-members-pager .pager__item.is-active a { background-color: #0F4D61; color: #ffffff; } .istst-members-pager .pager__item--ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 2.25rem; height: 2.25rem; color: #9CA3AF; } /* Mobile: tighten padding and hide the "Last »" full label in favor of a compact icon-only feel via smaller font, keeping the link functional (text stays for accessibility). */ @media (max-width: 640px) { .istst-members-pager .pager__item a { min-width: 2rem; height: 2rem; padding: 0 0.4rem; font-size: 0.8125rem; } } .page-title { max-width: 80rem; margin: 0 auto; padding: 2rem 1.5rem 0 1.5rem; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.875rem; color: #0F172A; } @media (min-width: 768px) { .page-title { font-size: 2.5rem; padding-top: 2.5rem; } }