/* ========================================================= Habitech Panchtatva — custom theme layered on top of Bootstrap 5.3 Load this AFTER bootstrap.min.css and bootstrap-icons. ========================================================= */ /* ========================================================= THEME SYSTEM Every color in this file is a var(--token). To add a new theme, add another [data-theme="..."] block below with the same token names — nothing else in this file needs to change. The active theme is set via data-theme on (see js/theme.js), and falls back to "elements" (the default, defined on :root) when no attribute — or an unrecognised one — is present. ========================================================= */ :root, [data-theme="elements"]{ /* brand tokens — derived from the Habitech Panchtatva five-elements logo (fire / earth-leaf / water / air / space arranged around the building mark) */ --ink: #143826; /* deep forest green — matches the logo wordmark */ --ink-soft: #4b5f52; --paper: #f2f6f1; --paper-raised:#ffffff; --line: #d3ddd0; --line-strong:#a9bda8; --accent: #e2701c; /* fire — flame orange */ --accent-soft:#fbe2c8; --accent2: #1f77b4; /* water — droplet blue */ --accent2-soft:#d7e8f5; --gold: #efa30f; /* warm amber, echoes the fire's lighter highlight */ --gold-soft: #fbead0; --fire: #d1401c; /* flame red-orange, for alerts/badges */ --fire-soft: #f8ddd3; --earth: #3f9142; /* leaf green */ --earth-soft: #dcefdc; --air: #29b6e8; /* air cyan */ --air-soft: #d6f1fa; --space: #4a3f8f; /* space indigo */ --space-soft: #e2dff5; /* re-theme Bootstrap's root tokens */ --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-body-font-family: 'Public Sans', system-ui, -apple-system, sans-serif; --bs-link-color: var(--accent2); --bs-link-color-rgb: 31,119,180; --bs-link-hover-color: var(--ink); --bs-link-hover-color-rgb: 20,56,38; --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-primary: var(--ink); --bs-primary-rgb: 20,56,38; --bs-secondary: var(--accent2); --bs-secondary-rgb: 31,119,180; --bs-dark: var(--ink); --bs-dark-rgb: 20,56,38; --bs-light: var(--paper-raised); --bs-light-rgb: 255,255,255; color-scheme: light; --navbar-bg: rgba(255,255,255,0.88); --inverted-surface: #143826; --inverted-text: #ffffff; --inverted-accent: #ffc857; } /* ---- alternate theme: Classic Earth (the original navy/brass/verdigris palette) ---- */ [data-theme="classic"]{ --ink: #16202b; --ink-soft: #4b564d; --paper: #eef0ea; --paper-raised:#f7f8f3; --line: #c9cdbd; --line-strong:#a9ae9b; --accent: #8a6a2f; --accent-soft:#e7dcc2; --accent2: #3c5a4e; --accent2-soft:#dbe6de; --gold: #b8860b; --gold-soft: #f3e6c4; --fire: #a8462f; --fire-soft: #f1ddd4; --earth: #6b8f5a; --earth-soft: #e3ecdd; --air: #7c8a72; --air-soft: #e5e9df; --space: #5b5470; --space-soft: #e4e2ea; --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-body-font-family: 'Public Sans', system-ui, -apple-system, sans-serif; --bs-link-color: var(--accent2); --bs-link-color-rgb: 60,90,78; --bs-link-hover-color: var(--ink); --bs-link-hover-color-rgb: 22,32,43; --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-primary: var(--ink); --bs-primary-rgb: 22,32,43; --bs-secondary: var(--accent2); --bs-secondary-rgb: 60,90,78; --bs-dark: var(--ink); --bs-dark-rgb: 22,32,43; --bs-light: var(--paper-raised); --bs-light-rgb: 247,248,243; color-scheme: light; --navbar-bg: rgba(247,248,243,0.9); --inverted-surface: #16202b; --inverted-text: #ffffff; --inverted-accent: #f3e6c4; } /* ---- alternate theme: Midnight (dark mode) ---- */ [data-theme="midnight"]{ --ink: #eef2ee; --ink-soft: #b7c2ba; --paper: #101915; --paper-raised:#16211c; --line: #28362f; --line-strong:#3a4c42; --accent: #ff8a3d; --accent-soft:#3a2416; --accent2: #4fb3e0; --accent2-soft:#173446; --gold: #ffc857; --gold-soft: #3a2c10; --fire: #ff6b4a; --fire-soft: #3a1912; --earth: #67c76b; --earth-soft: #153a19; --air: #4fd8ea; --air-soft: #0f3238; --space: #a08bff; --space-soft: #241c46; --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-body-font-family: 'Public Sans', system-ui, -apple-system, sans-serif; --bs-link-color: var(--accent2); --bs-link-color-rgb: 79,179,224; --bs-link-hover-color: var(--ink); --bs-link-hover-color-rgb: 238,242,238; --bs-border-color: var(--line); --bs-border-color-translucent: var(--line); --bs-primary: var(--accent2); --bs-primary-rgb: 79,179,224; --bs-secondary: var(--accent); --bs-secondary-rgb: 255,138,61; --bs-dark: var(--paper-raised); --bs-dark-rgb: 22,33,28; --bs-light: var(--ink); --bs-light-rgb: 238,242,238; color-scheme: dark; --navbar-bg: rgba(16,25,21,0.88); --inverted-surface: #0a100d; --inverted-text: #ffffff; --inverted-accent: #ffc857; } html{ overflow-x:hidden; font-size:18px; zoom:1.1; } body{ line-height:1.6; overflow-x:hidden; width:100%; } img, svg, iframe{ max-width:100%; } .container, .container-fluid{ width:100%; } h1,h2,h3,h4,h5,h6{ font-family:'Fraunces', Georgia, serif; font-weight:600; color:var(--ink); } .font-mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; } /* ---- eyebrow / kicker label ---- */ .eyebrow{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; } .section-kicker{ font-family:'IBM Plex Mono', ui-monospace, monospace; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); font-weight:500; display:inline-block; margin-bottom:.5rem; } /* ---- gallery showcase: big preview + thumbnail rail ---- */ .gallery-showcase{ display:grid; grid-template-columns:2.2fr 1fr; gap:1.25rem; align-items:stretch; } .gallery-main{ position:relative; overflow:hidden; border-radius:1rem; box-shadow:0 10px 30px rgba(20,20,20,.14); height:420px; background:#111; } .gallery-main img{ width:100%; height:100%; object-fit:cover; display:block; } .gallery-main-caption{ position:absolute; left:0; right:0; bottom:0; margin:0; padding:1.25rem 1.5rem 1rem; background:linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,0) 100%); color:#fff; font-weight:600; font-size:1.05rem; } .gallery-thumbs{ display:grid; grid-template-columns:repeat(3, 1fr); gap:.75rem; align-content:start; max-height:420px; overflow-y:auto; padding-right:.25rem; } .gallery-thumb{ position:relative; overflow:hidden; border-radius:.6rem; aspect-ratio:1/1; padding:0; background:none; border:2px solid transparent; cursor:pointer; transition:border-color .2s ease, transform .2s ease; } .gallery-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.82; transition:opacity .2s ease; } .gallery-thumb:hover img, .gallery-thumb:focus-visible img{ opacity:1; } .gallery-thumb:hover, .gallery-thumb:focus-visible{ transform:translateY(-2px); } .gallery-thumb.active{ border-color:var(--accent); } .gallery-thumb.active img{ opacity:1; } @media (max-width:991.98px){ .gallery-showcase{ grid-template-columns:1fr; } .gallery-main{ height:400px; } .gallery-thumbs{ grid-template-columns:repeat(5, 1fr); max-height:none; overflow-y:visible; } } @media (max-width:575.98px){ .gallery-thumbs{ grid-template-columns:repeat(4, 1fr); gap:.5rem; } } /* ---- buttons: re-skin the component-scoped variables Bootstrap 5.3 exposes ---- */ .btn{ font-weight:600; border-radius:.5rem; } .btn-primary{ --bs-btn-bg:var(--ink); --bs-btn-border-color:var(--ink); --bs-btn-hover-bg:#0d2a1c; --bs-btn-hover-border-color:#0d2a1c; --bs-btn-active-bg:#0d2a1c; --bs-btn-active-border-color:#0d2a1c; --bs-btn-color:var(--paper); --bs-btn-hover-color:var(--paper); --bs-btn-active-color:var(--paper); } .btn-outline-primary{ --bs-btn-color:var(--ink); --bs-btn-border-color:var(--ink); --bs-btn-hover-bg:var(--ink); --bs-btn-hover-border-color:var(--ink); --bs-btn-hover-color:var(--paper); --bs-btn-active-bg:var(--ink); --bs-btn-active-border-color:var(--ink); } .btn-accent{ --bs-btn-bg:var(--accent2); --bs-btn-border-color:var(--accent2); --bs-btn-color:#fff; --bs-btn-hover-bg:#175d8c; --bs-btn-hover-border-color:#175d8c; --bs-btn-hover-color:#fff; --bs-btn-active-bg:#175d8c; --bs-btn-active-border-color:#175d8c; } .btn-gold{ --bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-color:var(--ink); --bs-btn-hover-bg:#b3560f; --bs-btn-hover-border-color:#b3560f; --bs-btn-hover-color:#fff; } /* ---- navbar ---- */ .navbar-brand{ font-family:'Fraunces', serif; font-weight:600; font-size:1.25rem; color:var(--ink)!important; letter-spacing:.01em; } .navbar-panchtava{ background:var(--navbar-bg); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); box-shadow:0 2px 16px rgba(20,56,38,.07); } .navbar-panchtava .nav-link{ position:relative; color:var(--ink-soft); font-weight:500; padding:.5rem .9rem!important; transition:color .2s ease; } .navbar-panchtava .nav-link::after{ content:""; position:absolute; left:50%; bottom:.15rem; width:0; height:2px; background:linear-gradient(90deg, var(--accent), var(--accent2)); border-radius:2px; transition:width .25s ease, left .25s ease; } .navbar-panchtava .nav-link:hover{ color:var(--ink); } .navbar-panchtava .nav-link:hover::after, .navbar-panchtava .nav-link.active::after{ width:60%; left:20%; } .navbar-panchtava .nav-link.active{ color:var(--ink); font-weight:600; } .navbar-panchtava .btn-primary{ box-shadow:0 4px 14px rgba(20,56,38,.22); transition:transform .2s ease, box-shadow .2s ease; } .navbar-panchtava .btn-primary:hover{ transform:translateY(-1px); box-shadow:0 6px 18px rgba(20,56,38,.28); } .brand-seal{ width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .3s ease; } .navbar-brand:hover .brand-seal{ transform:rotate(-6deg) scale(1.08); } .brand-seal svg, .brand-seal img{ width:100%; height:100%; display:block; object-fit:contain; } /* logo-only navbar brand: bigger, clearer mark now that the wordmark text is gone */ .navbar-brand .brand-seal{ width:58px; height:58px; } /* ---- surfaces ---- */ .bg-paper-raised{ background:var(--paper-raised); } .bg-accent2-soft{ background:var(--accent2-soft); } .bg-accent-soft{ background:var(--accent-soft); } .section{ padding-top:5.5rem; padding-bottom:5.5rem; } /* ---- cards ---- */ .card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:.85rem; box-shadow:0 1px 2px rgba(22,32,43,.05), 0 8px 24px rgba(22,32,43,.05); } .card .card-title{ font-size:1.05rem; } /* ---- badges / tags ---- */ .badge-soft{ font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; padding:.4em .7em; border-radius:99px; } .badge-gold{ background:var(--gold-soft); color:var(--gold); } .badge-brass{ background:var(--accent-soft); color:var(--accent); } .badge-verdigris{ background:var(--accent2-soft); color:var(--accent2); } .badge-fire{ background:var(--fire-soft); color:var(--fire); } /* ---- avatars ---- */ .avatar-circle{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.85rem; flex-shrink:0; } /* ---- stars ---- */ .stars{ color:var(--gold); letter-spacing:2px; } /* ---- footer: compact, higher-contrast text ---- */ footer.site-footer{ background:var(--ink); color:var(--paper); padding-top:2.25rem!important; padding-bottom:1.25rem!important; font-size:.92rem; } footer.site-footer a{ color:var(--paper); opacity:.88; } footer.site-footer a:hover{ opacity:1; color:var(--paper); } footer.site-footer .footer-divider{ border-color:rgba(238,240,234,.15); padding-bottom:1.5rem!important; } footer.site-footer .row.g-4{ --bs-gutter-y:1.25rem; } footer.site-footer .eyebrow{ margin-bottom:.85rem!important; font-size:.7rem; } footer.site-footer p, footer.site-footer .small, footer.site-footer div{ opacity:.92; } footer.site-footer p[style*="opacity"], footer.site-footer div[style*="opacity"]{ opacity:1!important; color:rgba(242,246,241,.85); } footer.site-footer .brand-seal + span{ font-size:1.05rem; } footer.site-footer ul li{ line-height:1.3; } footer.site-footer .pt-3{ padding-top:.9rem!important; } footer.site-footer .social-circle{ width:32px; height:32px; border-radius:50%; border:1px solid rgba(238,240,234,.3); display:flex; align-items:center; justify-content:center; color:var(--paper); } /* ---- forms ---- */ .form-control, .form-select{ border-color:var(--line-strong); border-radius:.5rem; background:var(--paper); } .form-control:focus, .form-select:focus{ border-color:var(--accent2); box-shadow:0 0 0 .2rem var(--accent2-soft); } .form-floating>label{ color:var(--ink-soft); } /* ---- accordion (Know Your Society FAQ) ---- */ .accordion-button{ font-weight:600; background:var(--paper-raised); } .accordion-button:not(.collapsed){ color:var(--ink); background:var(--accent2-soft); box-shadow:none; } .accordion-button:focus{ box-shadow:0 0 0 .2rem var(--accent2-soft); } .accordion-item{ border-color:var(--line); background:var(--paper-raised); } /* ---- table ---- */ .table{ --bs-table-bg:var(--paper-raised); --bs-table-border-color:var(--line); } .table thead th{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); font-weight:600; border-bottom-width:1px; } /* ---- illustration frame ---- */ .illustration-frame{ border-radius:1rem; overflow:hidden; } .video-frame{ position:relative; border-radius:.85rem; overflow:hidden; box-shadow:0 8px 32px rgba(22,32,43,.15); } .video-frame .play-btn{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:76px; height:76px; border-radius:50%; background:rgba(238,240,234,0.94); display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:1.6rem; } .video-frame .caption-chip{ position:absolute; bottom:16px; left:16px; padding:.3rem .75rem; border-radius:99px; background:rgba(22,32,43,.55); color:var(--paper); font-family:'IBM Plex Mono',monospace; font-size:.72rem; } /* ---- term pills (Committee page) ---- */ .term-pills .nav-link{ color:var(--ink-soft); font-weight:600; border-radius:99px; padding:.5rem 1.1rem; border:1px solid var(--line); margin:0 .25rem .5rem 0; font-size:.9rem; } .term-pills .nav-link.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); } .term-pills .nav-link .term-tag{ font-family:'IBM Plex Mono',monospace; font-size:.68rem; opacity:.7; display:block; } /* ---- filter pills (News page) ---- */ .filter-pills .btn{ border-radius:99px; font-size:.82rem; font-weight:600; padding:.4rem 1rem; border:1px solid var(--line); color:var(--ink-soft); background:transparent; } .filter-pills .btn.active{ background:var(--ink); color:var(--paper); border-color:var(--ink); } /* ---- hero banner with YouTube background video ---- */ .hero-banner{ position:relative; overflow:hidden; isolation:isolate; min-height:88vh; display:flex; align-items:center; background:var(--ink); } .hero-video-wrap{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; opacity:.58; } .hero-video{ position:absolute; top:50%; left:50%; width:177.78vh; height:56.25vw; min-width:100%; min-height:100%; transform:translate(-50%,-50%); border:0; } .hero-overlay{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(22,32,43,.72) 0%, rgba(22,32,43,.55) 45%, rgba(22,32,43,.88) 100%); } .hero-blob{ position:absolute; z-index:1; border-radius:50%; filter:blur(60px); opacity:.35; animation:float-blob 12s ease-in-out infinite; pointer-events:none; } .hero-blob-1{ width:340px; height:340px; background:var(--accent2); top:-80px; left:-80px; } .hero-blob-2{ width:280px; height:280px; background:var(--gold); bottom:-60px; right:-60px; animation-delay:-6s; } @keyframes float-blob{ 0%,100%{ transform:translate(0,0) scale(1); } 50%{ transform:translate(30px,-24px) scale(1.08); } } .hero-content{ position:relative; z-index:2; padding-top:3rem; padding-bottom:2rem; } .hero-video-credit{ position:absolute; z-index:2; bottom:14px; right:16px; font-family:'IBM Plex Mono',monospace; font-size:.68rem; letter-spacing:.03em; color:rgba(238,240,234,.6); } .eyebrow-on-dark{ color:var(--inverted-accent); } .hero-scroll-cue{ position:absolute; z-index:2; bottom:22px; left:50%; transform:translateX(-50%); color:rgba(238,240,234,.85); font-size:1.4rem; animation:bounce-cue 2s ease-in-out infinite; } @keyframes bounce-cue{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,8px); } } .hero-stat{ font-family:'Fraunces',serif; font-size:2.1rem; color:#fff; font-weight:600; line-height:1; } .hero-stat-label{ font-size:.8rem; color:rgba(238,240,234,.68); margin-top:.25rem; } /* ---- scroll reveal ---- */ .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; } .reveal.in-view{ opacity:1; transform:translateY(0); } .reveal-delay-1.in-view{ transition-delay:.1s; } .reveal-delay-2.in-view{ transition-delay:.2s; } .reveal-delay-3.in-view{ transition-delay:.3s; } /* ---- tower cards ---- */ .photo-strip{ display:grid; grid-template-columns:1.35fr .85fr .85fr; grid-template-rows:repeat(2, 1fr); gap:.8rem; height:360px; } .photo-strip img{ width:100%; height:100%; min-height:0; object-fit:cover; border-radius:1rem; box-shadow:0 12px 30px rgba(22,32,43,.12); } .photo-strip img:first-child{ grid-row:span 2; } @media (max-width:767.98px){ .photo-strip{ grid-template-columns:1fr; grid-template-rows:none; height:auto; } .photo-strip img, .photo-strip img:first-child{ height:auto; min-height:210px; grid-row:auto; } } .tower-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:1rem; padding:1rem 1rem 1.35rem; text-align:center; height:100%; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; overflow:hidden; } .tower-card:hover{ transform:translateY(-8px); box-shadow:0 16px 32px rgba(22,32,43,.14); border-color:var(--accent2); } .tower-card-icon{ width:56px; height:56px; margin:0 auto .9rem; border-radius:50%; background:var(--accent2-soft); color:var(--accent2); display:flex; align-items:center; justify-content:center; font-size:1.5rem; transition:transform .3s ease; } .tower-card:hover .tower-card-icon{ transform:scale(1.12) rotate(-4deg); } .tower-card-photo{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:.75rem; margin-bottom:1rem; background:var(--accent2-soft); } .tower-floors{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.06em; color:var(--accent); font-weight:600; margin-bottom:.35rem; } .tower-name{ margin-bottom:.15rem; font-size:1.1rem; } .tower-card-studio{ background:var(--inverted-surface); border-color:var(--inverted-surface); } .tower-card-studio .tower-name{ color:var(--inverted-text); } .tower-card-studio .tower-card-icon{ background:rgba(255,255,255,.12); color:var(--inverted-accent); } .tower-card-studio .tower-floors{ color:var(--inverted-accent); } .tower-card-studio .small{ color:var(--inverted-accent)!important; } /* ---- inner-page top banner (About Us, etc.) ---- */ .page-banner{ position:relative; overflow:hidden; isolation:isolate; min-height:6080px; display:flex; align-items:center; background-size:cover; background-position:center; background-color:var(--ink); } .page-banner-overlay{ position:absolute; inset:0; z-index:0; background:linear-gradient(160deg, rgba(10,28,19,.94) 0%, rgba(18,68,102,.82) 55%, rgba(10,28,19,.94) 100%); } .page-banner-content{ position:relative; z-index:1; padding:3rem 0; } .page-banner-content h1, .page-banner-content h2, .page-banner-content h3, .page-banner-content p, .page-banner-content .eyebrow-on-dark{ color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45); } .page-banner-content .eyebrow-on-dark{ color:var(--inverted-accent); } /* ---- five-element accent cards ---- */ .element-card{ border-top-width:3px; border-top-style:solid; } .element-card-fire{ border-top-color:var(--accent); } .element-card-earth{ border-top-color:var(--earth); } .element-card-water{ border-top-color:var(--accent2); } .element-card-air{ border-top-color:var(--air); } .element-card-space{ border-top-color:var(--space); } /* ---- theme switcher ---- */ .theme-switcher .btn{ line-height:1; } .theme-swatch{ display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:.6rem; border:1px solid rgba(0,0,0,.15); vertical-align:middle; } .theme-swatch-elements{ background:linear-gradient(135deg,#e2701c,#1f77b4); } .theme-swatch-classic{ background:linear-gradient(135deg,#8a6a2f,#3c5a4e); } .theme-swatch-midnight{ background:linear-gradient(135deg,#101915,#4fb3e0); } .theme-switcher .dropdown-item.active{ background:var(--accent2-soft); color:var(--ink); font-weight:600; } /* ---- advertisement / external embed slot ---- */ .ad-slot-inner{ border:2px dashed var(--line-strong); border-radius:1rem; background:var(--paper-raised); padding:3rem 1.5rem; } /* ---- marketing video playlist (News page) ---- */ .video-playlist-item{ display:flex; align-items:center; gap:.75rem; text-align:left; background:var(--paper-raised); border:1px solid var(--line); border-radius:.75rem; padding:.5rem; cursor:pointer; width:100%; transition:border-color .2s ease, background .2s ease; } .video-playlist-item img{ width:96px; height:56px; object-fit:cover; border-radius:.5rem; flex-shrink:0; } .video-playlist-item span{ font-weight:600; font-size:.9rem; color:var(--ink); } .video-playlist-item:hover{ border-color:var(--accent2); } .video-playlist-item.active{ border-color:var(--accent2); background:var(--accent2-soft); } /* ---- society member cards — one full-width row of 10, responsive ---- */ .committee-grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:1.75rem; } @media (max-width:991px){ .committee-grid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:575px){ .committee-grid{ grid-template-columns:repeat(2, 1fr); } } .committee-grid-full{ grid-template-columns:repeat(6, 1fr); gap:1rem; } .committee-grid-full .member-photo{ width:84px; height:84px; } .committee-grid-full .member-info h5{ font-size:1rem; } .committee-grid-full .member-info p{ font-size:.85rem; } .committee-grid-full .member-card{ padding:1.25rem .9rem; } @media (max-width:991px){ .committee-grid-full{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:575px){ .committee-grid-full{ grid-template-columns:repeat(2, 1fr); } } /* ---- office bearers: a featured, larger lead row ---- */ .committee-grid-lead{ grid-template-columns:repeat(4, 1fr); gap:1.5rem; } @media (max-width:991px){ .committee-grid-lead{ grid-template-columns:repeat(2, 1fr); } } @media (max-width:575px){ .committee-grid-lead{ grid-template-columns:1fr; } } .member-card-lead{ position:relative; padding:2.25rem 1.5rem 1.9rem; background:linear-gradient(180deg, var(--paper-raised) 0%, var(--paper-raised) 70%, var(--accent-soft) 250%); } .member-card-lead .member-photo{ width:130px; height:130px; border-width:4px; } .member-card-lead .member-info h5{ font-size:1.3rem; } .member-role-icon{ position:absolute; top:1.1rem; right:1.1rem; font-size:1.15rem; opacity:.35; color:var(--ink); } .member-card{ background:var(--paper-raised); border:1px solid var(--line); border-top-width:4px; border-top-style:solid; border-radius:1rem; padding:1.85rem 1.4rem; text-align:center; transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; } .member-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(22,32,43,.16); } /* cycle the five element colors across the 5-wide grid columns */ .committee-grid .member-card:nth-child(5n+1){ border-top-color:var(--accent); } .committee-grid .member-card:nth-child(5n+2){ border-top-color:var(--earth); } .committee-grid .member-card:nth-child(5n+3){ border-top-color:var(--accent2); } .committee-grid .member-card:nth-child(5n+4){ border-top-color:var(--air); } .committee-grid .member-card:nth-child(5n+5){ border-top-color:var(--space); } .member-photo{ width:112px; height:112px; border-radius:50%; object-fit:cover; object-position:top center; border:3px solid var(--accent2-soft); margin:0 auto 1.1rem; display:block; box-shadow:0 4px 14px rgba(20,56,38,.14); } .member-info h5{ font-weight:700; font-size:1.2rem; color:var(--ink); margin-bottom:.55rem; } .member-role{ display:inline-block; font-family:'IBM Plex Mono', monospace; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:600; padding:.35em .9em; border-radius:99px; margin-bottom:.85rem; } .committee-grid .member-card:nth-child(5n+1) .member-role{ color:var(--accent); background:var(--accent-soft); } .committee-grid .member-card:nth-child(5n+2) .member-role{ color:var(--earth); background:var(--earth-soft); } .committee-grid .member-card:nth-child(5n+3) .member-role{ color:var(--accent2); background:var(--accent2-soft); } .committee-grid .member-card:nth-child(5n+4) .member-role{ color:#12799e; background:var(--air-soft); } .committee-grid .member-card:nth-child(5n+5) .member-role{ color:var(--space); background:var(--space-soft); } .member-info p{ font-size:1rem; color:var(--ink-soft); margin-bottom:0; } /* ---- amenities gallery ---- */ .gallery-card{ border:1px solid var(--line); border-radius:1rem; overflow:hidden; background:var(--paper-raised); transition:transform .3s ease, box-shadow .3s ease; } .gallery-card:hover{ transform:translateY(-6px); box-shadow:0 16px 32px rgba(22,32,43,.14); } .gallery-img{ display:block; width:100%; height:170px; object-fit:cover; } .gallery-caption{ font-family:'IBM Plex Mono',monospace; font-size:.78rem; letter-spacing:.04em; padding:.75rem 1rem; color:var(--ink-soft); font-weight:600; } /* ---- utility ---- */ .max-w-ch{ max-width:60ch; } .rounded-xl{ border-radius:1rem; } .text-accent{ color:var(--accent); } .text-accent2{ color:var(--accent2); } .text-ink-soft{ color:var(--ink-soft); } /* ---- accessibility: skip link ---- */ .skip-link{ position:absolute; left:-9999px; top:auto; z-index:2000; background:var(--ink); color:var(--paper); padding:.75rem 1.25rem; border-radius:0 0 .5rem 0; font-weight:600; text-decoration:none; } .skip-link:focus{ left:0; top:0; } /* ---- reduced motion ---- */ @media (prefers-reduced-motion: reduce){ .reveal{ opacity:1!important; transform:none!important; transition:none!important; } .hero-scroll-cue, .hero-blob{ animation:none!important; } } /* ---- theme dropdown: mark current option for screen readers ---- */ .theme-switcher .dropdown-item[aria-checked="true"]::after{ content:"\2713"; margin-left:.5rem; } /* ---- inline form status / alerts ---- */ .form-status{ font-size:.85rem; margin-top:.6rem; display:none; } .form-status.is-visible{ display:block; } .form-status.is-success{ color:var(--earth); } .form-status.is-error{ color:var(--fire); } /* ---- quick-route chips (Contact page) act as buttons now ---- */ .chip-btn{ border:1px solid var(--line); background:var(--paper-raised); border-radius:.5rem; padding:.5rem .9rem; font-size:.85rem; font-weight:600; color:var(--ink); cursor:pointer; } .chip-btn:hover, .chip-btn:focus-visible{ border-color:var(--accent2); background:var(--accent2-soft); } /* ---- map fallback link ---- */ .map-fallback-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; margin-top:.6rem; } /* ---- reviews: loading skeleton ---- */ .review-skeleton{ background:linear-gradient(90deg, var(--line) 25%, var(--paper) 37%, var(--line) 63%); background-size:400% 100%; animation:review-shimmer 1.4s ease infinite; border-radius:.5rem; } @keyframes review-shimmer{ 0%{ background-position:100% 50%; } 100%{ background-position:0 50%; } } /* ---- password visibility toggle ---- */ .password-field{ position:relative; } .password-toggle{ position:absolute; right:.9rem; top:50%; transform:translateY(-50%); background:none; border:0; color:var(--ink-soft); cursor:pointer; z-index:5; padding:.25rem; } /* ---- announcement cards are clickable ---- */ .announcement-card{ cursor:pointer; text-align:left; width:100%; background:none; border:0; padding:0; } .announcement-card .card{ transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .announcement-card:hover .card, .announcement-card:focus-visible .card{ transform:translateY(-4px); box-shadow:0 16px 32px rgba(22,32,43,.14); border-color:var(--accent2); } .announcement-read-more{ font-family:'IBM Plex Mono',monospace; font-size:.72rem; letter-spacing:.04em; color:var(--accent2); font-weight:600; margin-top:auto; } /* ---- responsive fixes ---- */ @media (max-width:575.98px){ .navbar-brand{ font-size:1.02rem; gap:.5rem!important; } .brand-seal{ width:30px; height:30px; } .navbar-brand .brand-seal{ width:44px; height:44px; } .hero-scroll-cue, .hero-video-credit{ display:none; } .hero-content{ padding-top:1.5rem; } .filter-pills{ width:100%; margin-top:.5rem; } } @media (max-width:400px){ .navbar-brand span:not(.brand-seal){ font-size:.92rem; } }