/* benefice.css Supplementary styles for The United Benefice website. Place this file in assets/css/ and link it AFTER main.css. Design rationale: - Cormorant Garamond (headings): elegant, historical, appropriate for CoE - Lato (body): clean, modern, excellent legibility at all sizes - Palette drawn from the church photos: warm limestone gold, deep sky, and soft cream — replacing the cold white-on-black default - The Dimension template's animations and layout are preserved intact; this file only overrides typography, colour, and component styling. */ /* ─── Google Fonts are loaded in the HTML ─── */ /* ─── CSS Custom Properties ─── */ :root { --gold: #c9a96e; --gold-light: #e8d5b0; --gold-dark: #9a7545; --cream: rgba(255, 248, 235, 0.92); --cream-faint: rgba(255, 248, 235, 0.12); --navy: rgba(15, 25, 45, 0.88); --white: #f5f0e8; --white-mid: rgba(245, 240, 232, 0.6); --white-dim: rgba(245, 240, 232, 0.25); --safe-amber: rgba(195, 140, 50, 0.18); --safe-border: rgba(195, 140, 50, 0.55); } /* ─── Typography overrides ─── */ body, input, select, textarea { font-family: 'Lato', sans-serif; font-weight: 300; color: var(--white); letter-spacing: 0.01em; } h1, h2, h3, h4, h5, h6 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 400; color: var(--white); text-transform: none; letter-spacing: 0.04em; } /* The main title */ #header h1 { font-size: 2.8rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); } /* Article headings */ #main article h2.major { font-size: 1.6rem; font-weight: 400; letter-spacing: 0.06em; border-bottom-color: var(--gold); color: var(--gold-light); margin-bottom: 1.5rem; } #main article h3 { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin: 1.75rem 0 0.75rem 0; } /* Body text in articles */ #main article p { font-size: 0.92rem; line-height: 1.8; color: var(--white); margin: 0 0 1.2rem 0; } /* Links */ a { color: var(--gold-light); border-bottom-color: var(--gold-dark); transition: color 0.2s ease, border-bottom-color 0.2s ease; } a:hover { color: var(--gold); border-bottom-color: transparent; } /* ─── Header subtitle and intro ─── */ .subtitle { font-family: 'Lato', sans-serif; font-size: 0.72rem; font-weight: 300; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem !important; line-height: 2 !important; } .intro-text { font-size: 0.8rem !important; line-height: 1.9 !important; color: var(--white) !important; letter-spacing: 0.02em !important; text-transform: none !important; max-width: 36rem; margin: 0 auto 1rem auto; } /* ─── Logo (cross SVG) ─── */ #header .logo { display: flex; align-items: center; justify-content: center; border-color: var(--gold); color: var(--gold-light); background: rgba(0,0,0,0.15); transition: background 0.3s ease, border-color 0.3s ease; } #header .logo:hover { background: rgba(201, 169, 110, 0.1); } #header .logo svg { width: 2.2rem; height: 2.2rem; } /* ─── Header border accents ─── */ #header .content { border-color: var(--gold-dark); } #header > *:before { background: var(--gold-dark); } #header nav.use-middle:after { background: var(--gold-dark); } /* ─── Navigation tabs ─── */ #header nav ul { border-color: var(--gold-dark); } #header nav ul li { border-left-color: var(--gold-dark); } #header nav ul li a { font-family: 'Lato', sans-serif; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--white); transition: background 0.2s ease, color 0.2s ease; } #header nav ul li a:hover { background-color: var(--cream-faint); color: var(--gold-light); } #header nav ul li a:active { background-color: rgba(201, 169, 110, 0.2); } @media screen and (max-width: 480px) { #header nav ul li { border-top-color: var(--gold-dark); } } /* ─── Safeguarding banner ─── */ .safeguarding-banner { display: flex; align-items: flex-start; gap: 0.85rem; background: var(--safe-amber); border: 1px solid var(--safe-border); border-radius: 4px; padding: 0.9rem 1.1rem; margin-top: 1.5rem; text-align: left; max-width: 36rem; margin-left: auto; margin-right: auto; } .safeguarding-icon { flex-shrink: 0; color: var(--gold); margin-top: 0.1rem; } .safeguarding-icon svg { width: 1.25rem; height: 1.25rem; } .safeguarding-text { font-size: 0.7rem; line-height: 1.75; color: var(--white); letter-spacing: 0.01em; } .safeguarding-text strong { color: var(--gold-light); font-weight: 400; } .safeguarding-text a { color: var(--gold-light); } /* ─── Article panel ─── */ #main article { background-color: rgba(12, 18, 30, 0.88); border-top: 1px solid var(--gold-dark); border-radius: 2px; width: 44rem; } #main article .close:before { border-radius: 50%; } #main article .close:hover:before { background-color: var(--cream-faint); } /* ─── Church images ─── */ .image.main { margin: 0 0 2rem 0; border-radius: 2px; overflow: hidden; } .image.main img { border-radius: 2px; width: 100%; height: 220px; object-fit: cover; object-position: center 40%; display: block; } /* ─── Document links ─── */ .doc-links { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--white-dim); } .doc-link { display: inline-block; font-family: 'Lato', sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white) !important; border: 1px solid var(--white-dim); border-bottom: 1px solid var(--white-dim) !important; border-radius: 2px; padding: 0.35rem 0.75rem; text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .doc-link:hover { background: var(--cream-faint); border-color: var(--gold-dark) !important; color: var(--gold-light) !important; border-bottom-color: var(--gold-dark) !important; } /* ─── Services list (Green Hammerton) ─── */ ul.services-list { list-style: none; padding-left: 0; margin: 0 0 1.5rem 0; } ul.services-list li { font-size: 0.88rem; line-height: 1.7; padding: 0.55rem 0; border-top: 1px solid var(--white-dim); color: var(--white); } ul.services-list li:first-child { border-top: none; } ul.services-list li strong { color: var(--gold-light); font-weight: 400; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1rem; } /* ─── Contact blocks (Ministry Team) ─── */ .contact-block { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--white-dim); } .contact-block:last-child { border-bottom: none; margin-bottom: 0; } .contact-block h3 { margin-top: 0; margin-bottom: 0.75rem; } .contact-block p { margin-bottom: 0.5rem; } .contact-block strong { color: var(--gold-light); font-weight: 300; } /* ─── Buttons ─── */ .button { font-family: 'Lato', sans-serif; font-size: 0.72rem; letter-spacing: 0.15em; text-transform: uppercase; box-shadow: inset 0 0 0 1px var(--gold-dark); color: var(--white) !important; transition: background 0.2s ease, box-shadow 0.2s ease; } .button:hover { background-color: var(--cream-faint); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-light) !important; } /* ─── Footer ─── */ #footer { text-align: center; } .footer-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem 1.2rem; margin-bottom: 1.2rem; } .footer-nav a { font-family: 'Lato', sans-serif; font-size: 0.68rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--white-mid); border-bottom: 1px solid transparent; text-decoration: none; transition: color 0.2s ease; } .footer-nav a:hover { color: var(--gold-light); border-bottom-color: transparent; } .copyright { font-family: 'Lato', sans-serif; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white-mid); opacity: 0.65; margin-bottom: 0 !important; } /* ─── Background overlay warm tint ─── */ #bg:before { background-image: linear-gradient( to top, rgba(10, 14, 22, 0.65), rgba(10, 14, 22, 0.45) ), url("../../images/overlay.png"); } /* ─── Responsive tweaks ─── */ @media screen and (max-width: 736px) { #header h1 { font-size: 2rem; } .safeguarding-banner { flex-direction: column; gap: 0.5rem; } .doc-links { flex-direction: column; } .doc-link { text-align: center; } .footer-nav { gap: 0.6rem 1rem; } } @media screen and (max-width: 480px) { #header h1 { font-size: 1.6rem; letter-spacing: 0.08em; } .subtitle { font-size: 0.65rem; letter-spacing: 0.12em; } #main article { width: 100%; } }