/* ============================================================ Huguenot Lodge No. 377 — Brand Stylesheet Built on the Pennsylvania Masons brand guidelines (https://pagrandlodge.org/brand-center/) Color + type tokens are pulled directly from the official PA Masons Style Guide (Midnight / Tide / Brick / Parchment, Lora + Proxima Nova). Proxima Nova is an Adobe Fonts license, so this file substitutes Nunito Sans, a free metric-friendly humanist sans, as the fallback body/utility face. If your lodge has Adobe Fonts (Typekit) access, add your kit's in and swap NUNITO references below for "proxima-nova". ============================================================ */ :root { /* --- Primary brand colors (PA Masons Style Guide, p.12) --- */ --midnight: #12233e; --midnight-tint: #b8c3d5; --tide: #789e9c; --tide-shade: #09312f; --brick: #a02f21; --brick-shade: #5e1b14; --parchment: #f7e8e0; --parchment-shade: #ded5cd; /* --- Supporting colors (p.13) --- */ --flame: #e47143; --harbor: #2c4a59; --barrel: #a28e4c; --moss: #5e7393; /* --- Neutrals --- */ --white: #ffffff; --ink: #171a20; /* --- Type --- */ --font-display: "Lora", "Georgia", serif; --font-body: "Nunito Sans", "Segoe UI", sans-serif; /* --- Layout --- */ --radius: 2px; --shadow-soft: 0 12px 30px -12px rgba(18, 35, 63, 0.35); } /* ============================================================ Base ============================================================ */ html { scroll-behavior: smooth; } body { font-family: var(--font-body); color: var(--ink); background-color: var(--white); font-size: 1.0625rem; line-height: 1.65; } h1, h2, h3, h4, .font-display { font-family: var(--font-display); font-weight: 700; color: var(--midnight); letter-spacing: 0; } .eyebrow { font-family: var(--font-body); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brick); } .eyebrow--on-dark { color: var(--tide); } a { color: var(--brick); } a:hover { color: var(--brick-shade); } ::selection { background: var(--tide); color: var(--white); } /* Skip link for accessibility */ .skip-link { position: absolute; left: -999px; top: 0; background: var(--brick); color: var(--white); padding: 0.6rem 1rem; z-index: 2000; } .skip-link:focus { left: 0.5rem; top: 0.5rem; } :focus-visible { outline: 3px solid var(--flame); outline-offset: 2px; } /* ============================================================ Buttons ============================================================ */ .btn-brick { background-color: var(--brick); border-color: var(--brick); color: var(--white); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; padding: 0.75rem 1.6rem; border-radius: var(--radius); transition: background-color .2s ease, transform .2s ease; } .btn-brick:hover, .btn-brick:focus { background-color: var(--brick-shade); border-color: var(--brick-shade); color: var(--white); transform: translateY(-1px); } .btn-outline-parchment { background-color: transparent; border: 2px solid var(--parchment); color: var(--parchment); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; padding: 0.7rem 1.6rem; border-radius: var(--radius); transition: all .2s ease; } .btn-outline-parchment:hover, .btn-outline-parchment:focus { background-color: var(--parchment); color: var(--midnight); } .btn-outline-midnight { background-color: transparent; border: 2px solid var(--midnight); color: var(--midnight); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.85rem; padding: 0.7rem 1.6rem; border-radius: var(--radius); transition: all .2s ease; } .btn-outline-midnight:hover, .btn-outline-midnight:focus { background-color: var(--midnight); color: var(--white); } /* ============================================================ Navbar ============================================================ */ .site-header { background-color: var(--white); border-top: 4px solid var(--brick); border-bottom: 1px solid var(--parchment-shade); } .navbar-brand-wrap { display: flex; align-items: center; gap: 0.75rem; } .navbar-brand-wrap img { height: 46px; width: auto; } .brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--midnight); line-height: 1.1; } .brand-sub { font-family: var(--font-body); font-weight: 700; font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--tide-shade); } .site-header .nav-link { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--midnight); padding: 0.5rem 0.9rem !important; position: relative; } .site-header .nav-link:hover, .site-header .nav-link:focus, .site-header .nav-link.active { color: var(--brick); } .site-header .dropdown-menu { border-radius: var(--radius); border-color: var(--parchment-shade); } .site-header .dropdown-item { font-size: 0.9rem; padding: 0.5rem 1.1rem; } .site-header .dropdown-item:active, .site-header .dropdown-item.active { background-color: var(--brick); } /* ============================================================ Hero ============================================================ */ .hero { position: relative; min-height: 78vh; display: flex; align-items: center; background-size: cover; background-position: center; isolation: isolate; } .hero::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,35,63,.55) 0%, rgba(18,35,63,.72) 55%, rgba(9,17,31,.92) 100%); z-index: -1; } .hero .container { color: var(--white); } .hero h1 { color: var(--white); font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1.08; } .hero .lede { font-family: var(--font-body); font-size: 1.15rem; color: var(--parchment); max-width: 42rem; } /* Square & compasses motif (original linework, not the official logo) */ .motif-mark { width: 34px; height: 34px; display: inline-block; } /* ============================================================ Stat / fact strip ============================================================ */ .fact-strip { background-color: var(--harbor); color: var(--parchment); } .fact-strip .fact { text-align: center; padding: 1.75rem 1rem; border-left: 1px solid rgba(247, 232, 224, 0.18); } .fact-strip .col:first-child .fact { border-left: none; } .fact .num { font-family: var(--font-display); font-weight: 700; font-size: 2rem; color: var(--white); display: block; } .fact .label { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; color: var(--tide); } /* ============================================================ Trestleboard cards (signature element) ============================================================ */ .trestleboard { background-color: var(--parchment); } .plaque { background-color: var(--white); border: 1px solid var(--parchment-shade); border-top: 3px solid var(--brick); border-radius: var(--radius); padding: 2.25rem 1.85rem; height: 100%; box-shadow: var(--shadow-soft); transition: transform .25s ease; } .plaque:hover { transform: translateY(-4px); } .plaque .plaque-icon { width: 42px; height: 42px; margin-bottom: 1.1rem; color: var(--brick); } .plaque h3 { font-size: 1.3rem; margin-bottom: 0.6rem; } .plaque .plaque-meta { font-weight: 700; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tide-shade); margin-bottom: 0.85rem; } .plaque a.stretched-link-text { font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--brick); text-decoration: none; } .plaque a.stretched-link-text:hover { text-decoration: underline; } /* ============================================================ History / About teaser ============================================================ */ .history-media { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-soft); } .history-media img { width: 100%; height: 100%; object-fit: cover; } /* ============================================================ CTA band ============================================================ */ .cta-band { background-color: var(--midnight); color: var(--parchment); position: relative; overflow: hidden; } .cta-band h2 { color: var(--white); } /* ============================================================ Footer ============================================================ */ .site-footer { background-color: var(--midnight); color: var(--parchment-shade); } .site-footer a { color: var(--parchment); text-decoration: none; } .site-footer a:hover { color: var(--tide); text-decoration: underline; } .site-footer h5 { color: var(--white); font-family: var(--font-body); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.1rem; } .site-footer .footer-divider { border-color: rgba(247, 232, 224, 0.15); } .site-footer small { color: rgba(247, 232, 224, 0.55); } .footer-logo { height: 54px; width: auto; } /* ============================================================ Interior page header (used on About, etc.) ============================================================ */ .page-banner { background-color: var(--midnight); color: var(--white); padding: 3.5rem 0 2.75rem; border-bottom: 4px solid var(--brick); } .page-banner h1 { color: var(--white); font-size: clamp(2rem, 4vw, 2.75rem); } .breadcrumb-plain a { color: var(--tide); text-decoration: none; font-weight: 700; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; } .breadcrumb-plain span { color: var(--parchment); opacity: .6; } section.section { padding: 5rem 0; } @media (max-width: 767.98px) { section.section { padding: 3.25rem 0; } .fact-strip .fact { border-left: none; border-top: 1px solid rgba(247,232,224,.18); } .fact-strip .col:first-child .fact { border-top: none; } } .bg-parchment { background-color: var(--parchment); } .text-brick { color: var(--brick); } .text-midnight { color: var(--midnight); } .text-tide { color: var(--tide); }