/* ========================================================================== */ /* Mason Water Polo — CLEANED + ORGANIZED STYLESHEET */ /* Color: Mason Green #006747 */ /* ========================================================================== */ /* ============================================================================= GLOBAL: Variables, Reset, Base ============================================================================= */ :root{ --mason-green:#006747; --mason-green-dark:#005236; --text:#0a0a0a; --gray-50:#fafafa; --gray-100:#f7f7f7; --gray-200:#eee; --shadow-sm:0 2px 5px rgba(0,0,0,.1); --shadow-md:0 6px 16px rgba(0,0,0,.06); --shadow-lg:0 16px 36px rgba(0,0,0,.25); --radius-sm:6px; --radius-md:10px; --radius-lg:12px; --radius-xl:14px; } *, *::before, *::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; height:100%; /* keep layout width consistent across pages */ scrollbar-gutter: stable; overflow-y:scroll; } body{ height:100%; margin:0; padding:0; font-family:Arial, Helvetica, sans-serif; font-size:16px; color:var(--text); background:#fff; /* Sticky footer page layout */ min-height:100vh; display:flex; flex-direction:column; } img,svg,video{ max-width:100%; height:auto; display:block; } a{ color:var(--mason-green); text-decoration:none; } a:hover{ text-decoration:underline; } .visually-hidden{ position:absolute!important; clip:rect(1px,1px,1px,1px)!important; clip-path:inset(50%)!important; height:1px!important; width:1px!important; overflow:hidden!important; white-space:nowrap!important; } .spacer-1in{ margin-top:1in; } /* Main content area grows so footer stays at bottom */ main.content, .content{ flex:1 0 auto; position:relative; z-index:1; padding:40px 20px; color:var(--text); } /* Put background rotator behind content */ .bg-rotator, .bg-layer{ z-index:-1; } /* ============================================================================= GLOBAL: Buttons, Alerts, Cards ============================================================================= */ .btn, .btn-cta, .btn-primary{ display:inline-block; text-align:center; cursor:pointer; border:none; background:var(--mason-green); color:#fff; padding:10px 20px; border-radius:6px; font-weight:800; } .btn:hover, .btn-cta:hover, .btn-primary:hover{ background:var(--mason-green-dark); } .btn-small{ padding:6px 12px; border-radius:6px; font-weight:700; } .btn-danger{ background:#b00020; color:#fff; } .btn-danger:hover{ background:#8b0019; } .btn-outline, .btn-secondary{ background:transparent; color:var(--mason-green); border:2px solid var(--mason-green); } .btn-block{ width:100%; } .alert{ padding:10px 12px; border-radius:var(--radius-md); display:inline-block; } .alert.error{ background:#ffe5e5; color:#7a0000; border:1px solid #ffbfbf; } /* Simple card used on forms like Profile */ .form-card{ max-width:420px; margin:0 auto; background:#fff; padding:20px; border-radius:12px; box-shadow:0 2px 10px rgba(0,0,0,.08); } /* ============================================================================= LAYOUT: Header, Navigation ============================================================================= */ .header-container{ display:flex; flex-direction:column; position:sticky; top:0; z-index:1000; } .top-bar{ background:var(--mason-green); color:#fff; height:70px; padding:0 20px; display:flex; align-items:center; justify-content:space-between; box-shadow:var(--shadow-sm); position:relative; } .header-container.scrolled .top-bar, .header-container.scrolled .service-bar{ box-shadow:0 2px 8px rgba(0,0,0,.15); } /* Secondary service bar — hidden now for all viewports (we use dropdowns) */ .service-bar{ display:none !important; background:#C0C0C0; height:40px; padding:0 20px; overflow-x:auto; align-items:center; box-shadow:0 -2px 5px rgba(0,0,0,.1); } .service-item{ background:#fff; color:#000; font-weight:bold; white-space:nowrap; padding:5px 10px; margin-right:10px; border-radius:var(--radius-sm); box-shadow:0 1px 3px rgba(0,0,0,.2); } .service-item a{ color:inherit; display:block; } .logo-wrapper{ position:absolute; left:50%; transform:translateX(-50%); z-index:5; } .logo-wrapper img{ height:125px; width:auto; filter:drop-shadow(5px 5px 10px rgba(0,0,0,.5)); } .desktop-nav{ display:flex; gap:10px; } .nav-item{ color:#fff; font-weight:bold; padding:10px 15px; border-radius:5px; position:relative; } .nav-item:hover{ background:var(--mason-green-dark); } /* === DROPDOWN MENUS (DESKTOP) === */ .nav-item.has-dropdown > span{ cursor:pointer; display:inline-flex; align-items:center; gap:8px; } .nav-item.has-dropdown .dropdown-menu{ position:absolute; top:100%; left:0; min-width:220px; background:var(--mason-green-dark); border-radius:8px; box-shadow:0 10px 24px rgba(0,0,0,.25); padding:8px; display:none; z-index:20; } .nav-item.has-dropdown:hover .dropdown-menu{ display:block; } .dropdown-menu a{ display:block; padding:10px 12px; border-radius:6px; color:#fff; font-weight:700; text-decoration:none; } .dropdown-menu a:hover{ background:rgba(255,255,255,.12); text-decoration:none; } /* Mobile nav */ .hamburger{ display:none; position:absolute; left:15px; top:15px; z-index:10; font-size:24px; background:none; border:none; color:#fff; } .mobile-nav{ display:none; flex-direction:column; background:var(--mason-green); width:100%; position:absolute; top:70px; left:0; z-index:4; } .mobile-nav.show{ display:flex; } .mobile-item{ border-top:1px solid var(--mason-green-dark); } .mobile-title{ color:#fff; padding:15px; font-weight:bold; cursor:pointer; background:none; border:0; width:100%; text-align:left; } .mobile-subnav{ display:none; flex-direction:column; background:var(--mason-green-dark); } .mobile-subnav.show{ display:flex; } .mobile-subnav .nav-subitem{ padding:10px 30px; color:#fff; font-weight:bold; } .mobile-subnav .nav-subitem a{ color:#fff; display:block; } /* Mobile menu sizing */ .mobile-title { font-size: 18px; /* top-level (hamburger) items */ line-height: 1.2; } .mobile-subnav .nav-subitem, .mobile-subnav .nav-subitem a { font-size: 16px; /* second-level items */ line-height: 1.2; } @media (max-width:1024px), (hover:none) and (pointer:coarse){ .desktop-nav{ display:none; } /* hide desktop navs on tablet/phone */ .hamburger{ display:block; } /* show hamburger */ .logo-wrapper{ position:absolute; top:-10px; left:50%; transform:translateX(-50%); } .logo-wrapper img{ height:90px; width:auto; } } /* ============================================================================= PAGE: Home ============================================================================= */ .home-landing{ text-align:center; color:var(--text); } .bg-rotator{ position:fixed; inset:0; overflow:hidden; } .bg-layer{ position:absolute; inset:0; background-position:center; background-repeat:no-repeat; background-size:cover; opacity:0; transition:opacity 800ms ease; } .bg-layer.show{ opacity:.2; } .home-title{ font-size:60px; line-height:1.2; font-weight:800; color:var(--mason-green); margin:20px auto 0; } .home-tagline{ max-width:1000px; margin:30px auto 0; font-size:28px; line-height:1.6; } .rule-title, .sponsor-title{ margin:60px auto 0; font-weight:800; color:var(--mason-green); display:flex; align-items:center; justify-content:center; gap:16px; } .rule-title{ font-size:40px; } .sponsor-title{ font-size:28px; } .rule-title::before, .rule-title::after, .sponsor-title::before, .sponsor-title::after{ content:""; flex:1 1 50px; height:2px; background:rgba(0,0,0,.15); } .home-subhead{ margin:32px auto 0; font-size:40px; font-weight:800; color:var(--text); } .home-desc{ max-width:900px; margin:16px auto 0; font-size:24px; line-height:1.6; } @media (max-width:768px){ .home-title, .rule-title, .home-subhead{ font-size:32px; } .home-tagline, .home-desc{ font-size:16px; padding:0 16px; } } /* ============================================================================= PAGE: Sign Up / Coaches ============================================================================= */ .signup-container{ max-width:900px; margin:0 auto; text-align:center; } .signup-title{ color:var(--mason-green); font-weight:800; font-size:42px; margin:10px 0 6px; } .signup-subtitle{ font-size:22px; line-height:1.6; max-width:800px; margin:0 auto; } .signup-section-title{ font-size:24px; font-weight:700; margin:0 0 16px; } @media (max-width:768px){ .signup-title{ font-size:32px; } .signup-subtitle{ font-size:16px; padding:0 12px; } .signup-section-title{ font-size:20px; } } .coaches-container{ max-width:1200px; margin:0 auto; padding:10px 16px 60px; text-align:center; } .coaches-title{ color:var(--mason-green); font-weight:800; font-size:42px; margin:10px 0 24px; } .coaches-empty{ font-size:16px; color:#333; margin-top:20px; } .coaches-grid{ margin-top:24px; display:flex; flex-wrap:wrap; justify-content:center; gap:22px; } .coach-card{ background:#fff; border-radius:var(--radius-lg); padding:1px 16px 5px; width:100%; max-width:260px; overflow:hidden; text-align:center; box-shadow:0 8px 18px rgba(0,0,0,.08); transition:transform 120ms ease, box-shadow 120ms ease; } .coach-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(0,0,0,.12); } .coach-name{ margin:10px 0 4px; font-size:20px; font-weight:800; color:var(--text); } .coach-title{ margin:10px 0 10px; font-weight:900; color:#006747; } .coach-photo-wrap{ position:relative; overflow:hidden; border-radius:var(--radius-md); box-shadow:0 10px 24px rgba(0,0,0,.18); display:flex; justify-content:center; align-items:center; background:#fff; border:8px solid #fff; } .coach-photo{ width:100%; height:260px; object-fit:cover; object-position:center; cursor:pointer; transition:transform 160ms ease; } .coach-card:hover .coach-photo{ transform:scale(1.02); } .photo-overlay{ position:absolute; inset:auto 0 0 0; padding:10px 12px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 75%); color:#fff; font-weight:700; text-align:center; opacity:0; transition:opacity 160ms ease; pointer-events:none; } .coach-card:hover .photo-overlay{ opacity:1; } /* Long contact lines stay inside card */ .coach-card a, .coach-card .coach-email, .coach-card .contact-row a{ overflow-wrap:anywhere; word-break:break-word; max-width:100%; } .coach-card .contact-row{ display:flex; flex-direction:column; gap:6px; align-items:center; } /* ---- Coach Bio Modal ---- */ .coach-modal{ position:fixed; inset:0; display:none; z-index:2000; background:rgba(0,0,0,.45); align-items:flex-start; justify-content:center; padding:110px 16px 24px; overflow:auto; } .coach-modal.open{ display:flex !important; justify-content:center !important; align-items:flex-start !important; } .coach-modal__dialog{ margin:0 auto !important; max-width:640px; width:calc(100% - 32px); max-height:calc(100vh - 150px); overflow:auto; -webkit-overflow-scrolling:touch; background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); position:relative; padding:0; animation:modalIn 160ms ease; transform:none !important; left:auto !important; right:auto !important; text-align:center; } @keyframes modalIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} } .coach-modal__header{ position:sticky; top:0; z-index:100; background:#fff; display:block; /* stack on all viewports */ padding:12px 12px; box-shadow:0 6px 8px rgba(0,0,0,.03); text-align:center; } .coach-modal__title{ margin:0; font-size:26px; font-weight:800; } .coach-modal__subtitle{ margin:4px 0 0; } .coach-modal__close{ position:absolute; top:12px; right:12px; width:40px; height:40px; line-height:38px; border:none; background:#f3f3f3; border-radius:10px; font-size:22px; cursor:pointer; z-index:200; } .coach-modal__close:hover{ background:#e9e9e9; } .coach-modal__body{ padding:14px 16px 18px; text-align:center; } .coach-modal__body p{ margin-left:auto; margin-right:auto; } .coach-modal__body a{ display:inline-block; } /* ============================================================================= PAGE: Calendar ============================================================================= */ .page-title, .calendar-page-title{ text-align:center; } .calendar-page{ width:100%; max-width:1400px; margin:0 auto; padding:0 16px; } .calendar-page iframe{ display:block; width:100% !important; min-width:100% !important; height:800px; border:0; } /* ============================================================================= COMPONENT: Sponsor area (index) ============================================================================= */ .sponsors-grid{ display:flex; justify-content:center; align-items:center; gap:16px; flex-wrap:wrap; text-align:center; margin:20px 0; } .sponsors-grid a{ display:inline-flex; align-items:center; justify-content:center; } .sponsors-grid img{ display:block; width:100%; height:auto; max-width:620px; } @media (min-width:769px){ .sponsors-grid img{ max-width:620px; margin:0 auto; } } /* ============================================================================= PAGE: Admin (lookup pages shared styles) ============================================================================= */ .admin-wrap{ max-width:1200px; margin:0 auto; padding:10px 16px 60px; } .admin-title{ color:var(--mason-green); font-weight:800; margin:10px 0 16px; } .table-wrap{ width:100%; overflow-x:auto; } .admin-table{ width:100%; min-width:900px; border-collapse:collapse; margin-bottom:20px; background:#fff; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-md); } .admin-table th, .admin-table td{ padding:10px 12px; border-bottom:1px solid var(--gray-200); vertical-align:top; text-align:left; font-size:14px; } .admin-table th{ background:var(--gray-100); font-weight:700; } .admin-table tr:hover{ background:var(--gray-50); } .admin-table tr:last-child td{ border-bottom:none; } .actions a{ color:var(--mason-green); font-weight:700; text-decoration:none; } .actions a:hover{ text-decoration:underline; } .admin-form{ max-width:800px; background:#fff; padding:16px; border-radius:var(--radius-md); box-shadow:var(--shadow-md); } .admin-form label{ display:block; margin:8px 0 4px; font-weight:700; } .admin-form input[type="text"], .admin-form input[type="email"], .admin-form input[type="number"], .admin-form input[type="file"], .admin-form select, .admin-form textarea{ width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; font-size:14px; } .admin-form textarea{ resize:vertical; } .form-actions{ margin-top:14px; display:flex; gap:10px; align-items:center; } /* Inline edit rows */ .admin-inline-form{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } .admin-inline-form input[type="text"]{ max-width:360px; } /* Keep Save/Delete side-by-side */ .actions .action-bar{ display:flex; gap:8px; align-items:center; flex-wrap:nowrap; } .actions form{ margin:0; display:inline-flex; align-items:center; } .actions .btn{ line-height:1; } /* simple grids for forms like Opponent address */ .grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .grid-3{ display:grid; grid-template-columns:1fr 120px 140px; gap:10px; } @media (max-width:900px){ .grid-2, .grid-3{ grid-template-columns:1fr; } .admin-inline-form input[type="text"]{ max-width:100%; } } @media (max-width:768px){ .admin-form{ padding:12px; } .admin-table{ min-width:720px; } } /* ============================================================================= COMPONENT: Login ============================================================================= */ .login-card{ background:#fff; padding:30px; border-radius:8px; width:300px; text-align:center; box-shadow:0 4px 12px rgba(0,0,0,.1); } .login-card h2{ margin-bottom:20px; color:var(--mason-green); } .login-card input{ width:100%; padding:8px; margin-top:5px; margin-bottom:15px; border:1px solid #ccc; border-radius:4px; } .login-card button{ width:100%; } .form-error{ color:red; margin-top:10px; } .logout-message{ position:fixed; top:50%; left:50%; transform:translate(-50%, -50%); background:rgba(0,103,71,.9); color:#fff; padding:10px 20px; border-radius:4px; box-shadow:0 2px 5px rgba(0,0,0,.2); z-index:9999; white-space:nowrap; } /* ============================================================================= COMPONENT: Footer ============================================================================= */ footer, .site-footer, #site-footer{ display:block; flex-shrink:0; width:100%; clear:both; background:var(--mason-green); color:#fff; padding:16px 20px; position:relative; z-index:2; text-align:center; } footer a, .site-footer a, #site-footer a{ color:#fff; text-decoration:underline; } /* Social icons row (your markup: