/* ========================================================= SFA The Drop (sfadrop.com) - GLOBAL SITE CSS - Dark theme w/ SFA-style green/gold accents - Prominent hover highlights for MAIN + SUB menus - No obituary module CSS here (that lives in obituaries.css) ========================================================= */ /* ======================= THEME TOKENS ======================= */ :root{ --bg: #0b0d10; /* near-black */ --panel: #11151b; /* dark gray */ --panel-2:#0f1318; /* darker */ --text: #e7edf5; /* off-white */ --muted:#a9b4c2; /* muted text */ --line: #212a35; /* borders */ --accent:#2f8f5b; /* green */ --accent-2:#c9b26b; /* gold */ --shadow: 0 18px 40px rgba(0,0,0,.35); --shadow-soft: 0 12px 30px rgba(0,0,0,.25); --radius: 18px; --radius-sm: 12px; --max: 1180px; } /* ======================= BASE ======================= */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: radial-gradient(1200px 800px at 20% 0%, rgba(47,143,91,.18), transparent 55%), radial-gradient(900px 700px at 95% 10%, rgba(201,178,107,.12), transparent 60%), var(--bg); color: var(--text); line-height:1.55; } a{ color: inherit; text-decoration:none; } a:hover{ text-decoration: underline; text-underline-offset: 3px; } img{ max-width:100%; height:auto; display:block; } .container{ width: min(var(--max), calc(100% - 40px)); margin: 0 auto; } /* ======================= HEADER / NAV ======================= */ .site-header{ position: sticky; top:0; z-index:1000; background: rgba(11,13,16,.82); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(33,42,53,.70); } .header-inner{ display:flex; align-items:center; justify-content: space-between; gap:16px; padding: 14px 0; } .brand{ display:flex; align-items:center; gap:12px; min-width: 240px; text-decoration:none; } .brand:hover{ text-decoration:none; } .brand-mark{ width:38px; height:38px; border-radius: 12px; background: linear-gradient(135deg, rgba(47,143,91,.95), rgba(201,178,107,.88)); box-shadow: 0 10px 25px rgba(0,0,0,.35); } .brand-text{ display:flex; flex-direction:column; line-height:1.05; } .brand-text .top{ font-weight: 800; letter-spacing: .06em; text-transform: uppercase; font-size: 14px; color: rgba(231,237,245,.85); } .brand-text .title{ font-weight: 900; font-size: 22px; } .brand-text .title span{ color: var(--accent-2); } .header-right{ display:flex; align-items:center; gap:10px; } /* Crest logo in header (left of site title) */ .brand{ display:flex; align-items:center; gap:12px; min-width: 240px; text-decoration:none; } .brand-logo{ width: 48px; height: 48px; object-fit: contain; border-radius: 10px; /* optional: soft edge */ box-shadow: 0 10px 25px rgba(0,0,0,.35); flex: 0 0 auto; } /* Slightly smaller crest on mobile */ @media (max-width: 980px){ .brand-logo{ width: 40px; height: 40px; } } /* ======================= MAIN NAV (PROMINENT HOVER) ======================= */ .nav{ display:flex; align-items:center; gap: 10px; } .nav a{ display:inline-flex; align-items:center; gap:8px; padding: 10px 14px; border-radius: 14px; font-weight: 700; font-size: 16px; border:1px solid transparent; color: rgba(231,237,245,.92); transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease; } .nav a:hover{ text-decoration:none; transform: translateY(-2px); background: linear-gradient(135deg, rgba(47,143,91,.25), rgba(201,178,107,.20)); border-color: rgba(201,178,107,.65); box-shadow: 0 8px 20px rgba(0,0,0,.45), 0 0 0 1px rgba(201,178,107,.35), 0 0 12px rgba(201,178,107,.35); color: #ffffff; } .nav a.active{ background: rgba(47,143,91,.15); border-color: rgba(47,143,91,.35); box-shadow: none; color: #ffffff; } /* ======================= BUTTONS ======================= */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding: 10px 14px; border-radius: 14px; border: 1px solid rgba(33,42,53,.90); background: rgba(17,21,27,.85); color: var(--text); font-weight: 800; box-shadow: 0 10px 25px rgba(0,0,0,.20); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease; } .btn:hover{ text-decoration:none; transform: translateY(-1px); border-color: rgba(201,178,107,.55); box-shadow: 0 12px 26px rgba(0,0,0,.35); } .btn.gold{ border-color: rgba(201,178,107,.55); background: linear-gradient(135deg, rgba(201,178,107,.95), rgba(201,178,107,.45)); color:#0b0d10; } /* ======================= PAGE HEADER / SECTIONS ======================= */ .section{ padding: 22px 0; } .pagehead{ padding: 22px 0 8px; } .pagehead h1{ margin: 0 0 8px; font-size: 26px; } .pagehead p{ margin: 0; color: rgba(169,180,194,.95); } /* ======================= SUBNAV (PROMINENT HOVER) ======================= */ .subnav{ margin: 12px 0 10px; } .subnav-inner{ display:flex; flex-wrap:wrap; gap: 10px; padding: 12px; border-radius: var(--radius); border: 1px solid rgba(33,42,53,.85); background: rgba(17,21,27,.62); box-shadow: var(--shadow-soft); } .subnav a{ display:inline-flex; align-items:center; justify-content:center; padding: 9px 14px; border-radius: 999px; font-weight: 800; font-size: 13px; letter-spacing: .03em; border:1px solid rgba(33,42,53,.90); background: rgba(15,19,24,.75); color: rgba(231,237,245,.92); transition: transform .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease; } .subnav a:hover{ text-decoration:none; transform: translateY(-2px); background: linear-gradient(135deg, rgba(47,143,91,.30), rgba(201,178,107,.25)); border-color: rgba(201,178,107,.75); box-shadow: 0 6px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(201,178,107,.45), 0 0 10px rgba(201,178,107,.35); color:#ffffff; } .subnav a.active{ background: rgba(201,178,107,.12); border-color: rgba(201,178,107,.45); box-shadow: none; color:#ffffff; } /* ======================= FOOTER ======================= */ .site-footer{ margin-top: 26px; border-top: 1px solid rgba(33,42,53,.75); background: rgba(11,13,16,.65); } .footer-inner{ display:flex; justify-content: space-between; gap: 16px; padding: 18px 0; flex-wrap:wrap; } .footer-inner .small{ color: rgba(169,180,194,.92); font-size: 13px; } .footer-links{ display:flex; gap: 14px; flex-wrap:wrap; } .footer-links a{ color: rgba(169,180,194,.92); } .footer-links a:hover{ color: var(--text); text-decoration:none; } /* ======================= MOBILE NAV (CSS ONLY) ======================= */ #nav-toggle{ display:none; } .hamburger{ display:none; width:44px; height:44px; border-radius: 14px; border: 1px solid rgba(33,42,53,.90); background: rgba(17,21,27,.85); cursor:pointer; align-items:center; justify-content:center; } .hamburger span{ display:block; width:18px; height:2px; background: rgba(231,237,245,.85); position: relative; } .hamburger span::before, .hamburger span::after{ content:""; position:absolute; left:0; width:18px; height:2px; background: rgba(231,237,245,.85); } .hamburger span::before{ top:-6px; } .hamburger span::after{ top:6px; } @media (max-width: 980px){ .nav{ position: absolute; left: 0; right: 0; top: 72px; display:none; flex-direction:column; align-items: stretch; gap: 6px; padding: 12px 20px 16px; background: rgba(11,13,16,.92); border-bottom: 1px solid rgba(33,42,53,.75); } .nav a{ justify-content: space-between; } .hamburger{ display:flex; } #nav-toggle:checked ~ .nav{ display:flex; } .subnav a{ flex: 1 1 calc(50% - 8px); text-align:center; } } @media (prefers-reduced-motion: reduce){ .nav a, .subnav a, .btn{ transition: none !important; } }