*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { width: 100%; margin: 0; padding: 0; overflow-x: clip; /* kill horizontal scrollbar mobile */ position: relative; } /* ============================================================ LITURGICAL THEME VARIABLES JS sets a class on to override --lit-primary / --lit-dark. Default = Ordinary Time (green). ============================================================ */ :root { --navy: #1a2744; --navy-dk: #111b33; --navy-md: #243159; --gold: #c9a84c; --gold-lt: #e0c47a; --cream: #f5f0e8; --off-white: #faf8f4; --gray: #e8e4dc; --text: #2c2c2c; --text-lt: #5a5a5a; --white: #ffffff; --lit-primary: #2e7d32; --lit-dark: #1b5e20; } body.theme-advent, body.theme-lent { --lit-primary: #6a1b9a; --lit-dark: #4a148c; } body.theme-christmas, body.theme-white, body.theme-gold { --lit-primary: #c9a84c; --lit-dark: #8b6b00; } body.theme-holyweek, body.theme-red, body.theme-pentecost { --lit-primary: #b71c1c; --lit-dark: #7f0000; } body.theme-rose { --lit-primary: #c2185b; --lit-dark: #880e4f; } /* ============================================================ GLOBAL ============================================================ */ body { font-family: 'Lato', sans-serif; color: var(--text); background: var(--off-white); transition: background-color 0.8s ease; } a { text-decoration: none; color: inherit; } /* ============================================================ UTILITY BAR ============================================================ */ .utility-bar { background: var(--navy-dk); color: #b0bcd4; font-size: 0.78rem; letter-spacing: 0.04em; border-bottom: 1px solid rgba(201,168,76,0.25); position: sticky; top: 0; z-index: 101; } .utility-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 6px 24px; } .utility-links { display: flex; gap: 20px; align-items: center; } .utility-links a { color: #b0bcd4; transition: color 0.2s; } .utility-links a:hover { color: var(--gold-lt); } .utility-contact { display: flex; gap: 20px; } .utility-contact span { display: flex; align-items: center; gap: 5px; } .lit-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--lit-dark); color: #fff; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 10px 3px 7px; transition: background 0.8s ease; } .lit-badge .swatch { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.6); flex-shrink: 0; } /* ============================================================ MAIN NAV ============================================================ */ .main-nav { background: var(--navy); border-bottom: 3px solid var(--lit-primary); position: -webkit-sticky; /* Add Safari support */ position: sticky; top: 0px; /* Ensure this matches your utility bar height exactly */ z-index: 100; /* ... keep your other styles ... */ } .main-nav.scrolled { background-color: var(--lit-dark); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 30px, transparent 30px, transparent 60px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 30px, transparent 30px, transparent 60px), repeating-linear-gradient(45deg, transparent 0px, transparent 15px, rgba(255,255,255,0.12) 15px, rgba(255,255,255,0.12) 16px, transparent 16px, transparent 60px), repeating-linear-gradient(-45deg, transparent 0px, transparent 15px, rgba(255,255,255,0.12) 15px, rgba(255,255,255,0.12) 16px, transparent 16px, transparent 60px); box-shadow: 0 4px 20px rgba(0,0,0,0.5); border-bottom: 1px solid rgba(255,255,255,0.1); padding-top: 2px; padding-bottom: 2px; } .nav-inner { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .logo-wrap { display: flex; align-items: center; gap: 14px; padding: 12px 0; transition: padding 0.4s ease; } .logo-wrap img { height: 58px; transition: height 0.4s ease; } .main-nav.scrolled .logo-wrap img { height: 44px; } .main-nav.scrolled .logo-wrap { padding: 6px 0; } .logo-text .title { font-family: 'Macondo Swash Caps', cursive; font-size: 1.05rem; color: var(--gold); letter-spacing: 0.06em; display: block; } .logo-text .sub { font-size: 0.72rem; color: #ffffff; letter-spacing: 0.08em; text-transform: uppercase; display: block; margin-top: 2px; } .nav-links { display: flex; } .nav-links a { display: block; padding: 20px 16px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #ccd6f0; transition: color 0.2s, background 0.2s, border-color 0.8s; border-bottom: 3px solid transparent; margin-bottom: -3px; } .nav-links a:hover, .nav-links a.active { color: var(--gold); border-bottom-color: var(--gold); background: rgba(255,255,255,0.04); } .sticky-header { position: fixed; /* or sticky */ top: 0; width: 100%; z-index: 1000; } /* ============================================================ HERO BANNER ============================================================ */ .hero { position: relative; height: 500px; overflow: hidden; background: var(--navy-dk); } .hero-images::after { content: ''; position: absolute; inset: 0; background-color: var(--navy); opacity: 0.75; z-index: 3; pointer-events: auto; mix-blend-mode: multiply; user-select: none; -webkit-user-select: none; } .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(30%); pointer-events: none; -webkit-user-drag: none; user-select: none; z-index: 1; } #heroWipe { z-index: 2; clip-path: inset(0 100% 0 0); transition: clip-path 1.4s cubic-bezier(0.77, 0, 0.18, 1); } .hero-content { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 24px 32px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; } .breadcrumb { font-size: 0.78rem; color: #8a9bbf; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 10px; } .breadcrumb a { color: var(--gold-lt); } .breadcrumb span { margin: 0 8px; } .hero-title { font-family: 'Cinzel', serif; font-size: 2.4rem; color: var(--white); font-weight: 700; letter-spacing: 0.04em; text-shadow: 0 2px 16px rgba(0,0,0,0.6); } .hero-rule { width: 60px; height: 3px; background: var(--lit-primary); margin-top: 14px; transition: background 0.8s ease; } /* ============================================================ QUICK ACTIONS ============================================================ */ .quick-actions { background: var(--lit-dark); border-bottom: 2px solid rgba(201,168,76,0.3); transition: background 0.8s ease; } .qa-inner { max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; } .qa-btn { display: flex; align-items: center; gap: 10px; padding: 13px 22px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #f0d9a0; transition: background 0.2s, color 0.2s; border-right: 1px solid rgba(255,255,255,0.1); } .qa-btn:hover { background: rgba(0,0,0,0.2); color: var(--white); } /* ============================================================ BODY LAYOUT ============================================================ */ .body-wrap { max-width: 1200px; margin: 0 auto; padding: 40px 24px; display: flex; gap: 36px; align-items: flex-start; } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { flex: 0 0 230px; position: sticky; top: 117px; align-self: flex-start; } .sidebar-nav { background: var(--white); border: 1px solid var(--gray); border-top: 4px solid var(--lit-primary); transition: border-color 0.8s ease; } .sidebar-nav h3 { background: var(--navy); color: var(--gold); font-family: 'Cinzel', serif; font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 14px 18px; } .sidebar-nav ul { list-style: none; } .sidebar-nav li { border-bottom: 1px solid var(--gray); } .sidebar-nav li a { display: block; padding: 11px 18px; font-size: 0.87rem; color: var(--navy); transition: background 0.15s, color 0.15s, padding-left 0.15s, border-color 0.8s; border-left: 3px solid transparent; } .sidebar-nav li a:hover, .sidebar-nav li a.active { background: var(--cream); color: var(--lit-dark); border-left-color: var(--lit-primary); padding-left: 22px; } .sidebar-nav li a.active { font-weight: 700; } .season-indicator { margin-top: 16px; padding: 14px 18px; background: var(--lit-primary); transition: background 0.8s ease; } .season-indicator .s-label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); display: block; margin-bottom: 3px; } .season-indicator .s-name { font-family: 'Cinzel', serif; font-size: 0.9rem; color: #fff; font-weight: 600; display: block; margin-bottom: 5px; } .season-indicator .s-desc { font-size: 0.75rem; color: rgba(255,255,255,0.85); line-height: 1.4; display: block; } .sidebar-cta { margin-top: 16px; background: var(--navy); padding: 22px 18px; } .sidebar-cta strong { display: block; font-family: 'Cinzel', serif; font-size: 0.88rem; color: var(--gold); margin-bottom: 8px; } .sidebar-cta p { font-size: 0.82rem; color: #8a9bbf; margin-bottom: 12px; line-height: 1.5; } .sidebar-cta a { display: block; background: var(--lit-primary); color: var(--white); text-align: center; padding: 9px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: filter 0.2s, background 0.8s; } .sidebar-cta a:hover { filter: brightness(1.2); } /* ============================================================ MAIN CONTENT ============================================================ */ .main-content { flex: 1; min-width: 0; } .intro-text { font-family: 'EB Garamond', serif; font-size: 1.2rem; line-height: 1.75; color: var(--text); margin-bottom: 24px; font-weight: normal; } .pullquote { border-left: 4px solid var(--lit-primary); margin: 28px 0; padding: 16px 24px; background: var(--cream); transition: border-color 0.8s ease; } .pullquote p { font-family: 'EB Garamond', serif; font-size: 1.3rem; font-style: italic; color: var(--navy); line-height: 1.5; } .download-link { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: var(--gold-lt); padding: 10px 20px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s; margin-bottom: 40px; } .download-link:hover { background: var(--navy-md); } .section-heading { font-family: 'Cinzel', serif; font-size: 1.35rem; color: var(--navy); padding-bottom: 10px; margin-bottom: 28px; border-bottom: 2px solid var(--lit-primary); letter-spacing: 0.04em; transition: border-color 0.8s ease; } /* ============================================================ CARD GRID ============================================================ */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 40px; } .card { background: var(--white); border: 1px solid var(--gray); transition: box-shadow 0.2s, transform 0.2s; overflow: hidden; } .card:hover { box-shadow: 0 6px 24px rgba(26,39,68,0.15); transform: translateY(-2px); } .card-img { width: 100%; height: 140px; object-fit: cover; display: block; } .card-img-placeholder { width: 100%; height: 140px; background: linear-gradient(135deg, var(--navy) 0%, var(--lit-dark) 100%); display: flex; align-items: center; justify-content: center; transition: background 0.8s ease; } .card-img-placeholder span { font-size: 2.5rem; opacity: 0.45; } .card-body { padding: 16px; } .card-body h3 { font-family: 'Cinzel', serif; font-size: 0.92rem; color: var(--navy); margin-bottom: 8px; } .card-body p { font-size: 0.83rem; color: var(--text-lt); line-height: 1.55; margin-bottom: 12px; } .card-link { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lit-dark); border-bottom: 1px solid var(--lit-primary); padding-bottom: 2px; transition: color 0.2s, border-color 0.8s; } .card:hover .card-link { color: var(--navy); } /* ============================================================ CTA STRIP ============================================================ */ .cta-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 40px; } .cta-block { background: var(--lit-dark); padding: 24px 22px; display: flex; flex-direction: column; gap: 8px; transition: background 0.8s ease; } .cta-block h4 { font-family: 'Cinzel', serif; font-size: 0.82rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; } .cta-block p { font-size: 0.88rem; color: rgba(255,255,255,0.75); line-height: 1.5; } .cta-block a { display: inline-block; align-self: flex-start; background: var(--gold); color: var(--navy-dk); padding: 8px 18px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 6px; transition: background 0.2s; } .cta-block a:hover { background: var(--gold-lt); } /* ============================================================ NEWSLETTER ============================================================ */ .newsletter { padding: 28px 24px; margin-top: 0px; } .newsletter h4 { font-family: 'Cinzel', serif; font-size: 1rem; margin-bottom: 6px; color: var(--gold); } .newsletter p { font-size: 0.85rem; color: rgba(255,255,255,0.75); margin-bottom: 14px; } .nl-form { display: flex; } .nl-form input { flex: 1; padding: 10px 14px; border: 1px solid #c8c0b0; border-right: none; font-family: 'Lato', sans-serif; font-size: 0.87rem; background: var(--white); } .nl-form input:focus { outline: 2px solid var(--lit-primary); } .nl-form button { background: var(--lit-primary); color: var(--white); border: none; padding: 10px 20px; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; transition: filter 0.2s, background 0.8s; } .nl-form button:hover { filter: brightness(1.15); } /* ============================================================ TARTAN DIVIDER ============================================================ */ .tartan-divider { height: 80px; width: 100%; background-color: var(--lit-dark); background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 30px, transparent 30px, transparent 60px), repeating-linear-gradient(-45deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 30px, transparent 30px, transparent 60px), repeating-linear-gradient(45deg, transparent 0px, transparent 15px, rgba(255,255,255,0.12) 15px, rgba(255,255,255,0.12) 16px, transparent 16px, transparent 60px), repeating-linear-gradient(-45deg, transparent 0px, transparent 15px, rgba(255,255,255,0.12) 15px, rgba(255,255,255,0.12) 16px, transparent 16px, transparent 60px); box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.5), inset 0 -10px 10px -10px rgba(0,0,0,0.5); border-top: 1px solid rgba(255,255,255,0.1); border-bottom: 1px solid rgba(0,0,0,0.3); transition: background-color 0.8s ease; } /* ============================================================ FOOTER ============================================================ */ footer.footer { background: #1a1a1a; color: #ccc; margin-top: 0; } .footer-top { max-width: 1200px; margin: 0 auto; padding: 48px 24px 36px; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; } .footer-brand .logo-wrap { padding: 0 0 18px; display: flex; align-items: center; gap: 14px; } .footer-brand .logo-wrap img { height: 50px; } .footer-brand p { font-size: 0.85rem; color: #6a7d9e; line-height: 1.65; margin-bottom: 18px; } .footer-contact { display: flex; flex-direction: column; gap: 6px; } .footer-contact span { font-size: 0.83rem; color: #8a9bbf; } .footer-contact strong { color: var(--gold-lt); } .footer-col h5 { font-family: 'Cinzel', serif; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; } .footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 7px; } .footer-col ul li a { font-size: 0.83rem; color: #6a7d9e; transition: color 0.2s; } .footer-col ul li a:hover { color: var(--gold-lt); } .footer-bottom { background: rgba(0,0,0,0.35); border-top: 1px solid rgba(255,255,255,0.06); } .footer-bottom-inner { max-width: 1200px; margin: 0 auto; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; } .footer-bottom p { font-size: 0.78rem; color: #4a5c78; font-family: 'Georgia', serif; } .footer-bottom img { height: 36px; opacity: 0.7; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .sticky-header { position: sticky; top: 0; z-index: 1000; background: var(--navy-dk); } #header-part { padding-top: 0 !important; } .nav-links { position: absolute; top: 100%; left: 0; width: 100%; background: var(--navy-dk); display: flex !important; flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; z-index: 1001; } .nav-links.mobile-open { max-height: 600px; border-bottom: 3px solid var(--gold); } .hero { height: auto !important; min-height: 0 !important; display: none !important; } .body-wrap { flex-direction: column; padding-top: 100px !important; margin-top: 0 !important; display: flex !important; gap: 10px; } .sidebar { position: static !important; width: 100% !important; margin-bottom: 20px; margin-top: 0 !important; padding-top: 0 !important; z-index: 1; display: block !important; } .sidebar-nav { display: block !important; border-top: 4px solid var(--lit-primary); } .sidebar-list { max-height: none !important; display: block !important; opacity: 1 !important; } .sidebar-header .chevron { display: none; } .sidebar-cta { margin-top: 10px; background: var(--navy); } .main-content { width: 100%; position: static; } } @media (max-width: 600px) { .card-grid { grid-template-columns: 1fr; } .cta-strip { grid-template-columns: 1fr; } .footer-top { grid-template-columns: 1fr; } .utility-contact { display: none; } .hero-title { font-size: 1.6rem; } .nav-links a { padding: 18px 10px; font-size: 0.72rem; } .logo-wrap img { height: 35px !important; } } /* ============================================================ LECTIONARY WIDGET ============================================================ */ #date-info { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-lt); margin-bottom: 14px; display: block; } .reading { font-size: 0.87rem; color: #b0bcd4; line-height: 1.6; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.08); } .reading:last-child { border-bottom: none; } .reading strong { display: block; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin-bottom: 3px; } /* ============================================================ COLLECT ============================================================ */ .collect-inner-content { margin-bottom: 14px; padding: 10px 12px 14px; border-bottom: 1px solid rgba(255,255,255,0.15); background: rgba(0,0,0,0.25); border-radius: 4px; } .collect-title { font-family: 'Cinzel', serif; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-bottom: 8px; } #collect-text { font-family: 'EB Garamond', serif; font-size: 0.95rem; color: rgba(255,255,255,0.88); line-height: 1.7; text-align: justify; font-style: italic; } .season-indicator { margin-top: 16px; padding: 14px 18px; position: relative; overflow: hidden; background: var(--lit-primary); transition: background 0.8s ease; } .season-indicator::before { content: ''; position: absolute; top: -50%; left: -150%; width: 60%; height: 200%; background: linear-gradient( 105deg, transparent 0%, rgba(255,255,255,0.08) 20%, rgba(255,255,255,0.35) 40%, rgba(255,255,255,0.08) 60%, transparent 80% ); animation: metalSheen 8s ease-in-out infinite; pointer-events: none; } @keyframes metalSheen { 0% { left: -150%; } 100% { left: 200%; } } /* ============================================================ FULL WIDTH CTA FOOTER BAND ============================================================ */ .cta-footer { background: var(--navy-dk); border-top: 3px solid var(--lit-primary); transition: border-color 0.8s ease; } .cta-footer-inner { padding: 0; display: flex; flex-direction: column; gap: 0; } .cta-footer .cta-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 0; width: 100%; } .cta-footer .newsletter { background: rgba(255,255,255,0.04); border: none; border-top: 1px solid rgba(255,255,255,0.08); margin: 0; padding: 32px 40px; border-radius: 0; width: 100%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .cta-footer .newsletter h4 { color: var(--gold); } .cta-footer .newsletter p { color: #8a9bbf; margin-bottom: 8px; } .cta-footer .nl-form { width: 100%; max-width: 480px; } .cta-block { position: relative; padding: 0; gap: 0; border-right: none; background-color: var(--navy-dk); background-size: cover; background-position: center; overflow: hidden; } .cta-block:last-child { border-right: none; } .cta-block::before { content: ''; position: absolute; inset: -1px; background: rgba(17, 27, 68, 0.72); z-index: 1; } .cta-block-content { position: relative; z-index: 2; padding: 40px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; height: 100%; } .cta-block a { align-self: center; } .cta-block h4 { font-family: 'Cinzel', serif; font-size: 1.2rem; color: var(--gold); letter-spacing: 0.08em; text-transform: uppercase; } .cta-block p { font-size: 1rem; color: rgba(255,255,255,0.75); line-height: 1.5; font-weight: bold; } .cta-block a:hover { background: var(--gold-lt); } /* TIGHT NEWS FEED (Single Column, Narrow Width) */ .substack-feed-embed { display: flex; flex-direction: column; max-width: 700px; /* Limits the width to keep it from spreading out */ margin: 20px 0; /* Keeps it aligned to the left like your headings */ gap: 0; } /* THE CARD */ .substack-card { display: flex; flex-direction: row; align-items: flex-start; padding: 30px 0; border-bottom: 1px solid var(--gray); text-decoration: none; transition: background 0.2s ease; } .substack-card:hover { background: rgba(0,0,0,0.01); } /* TEXT AREA */ .substack-post { flex: 1; padding-right: 25px; display: flex; flex-direction: column; } .substack-source { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lit-primary); margin-bottom: 5px; } .substack-title { font-family: 'Cinzel', serif; font-size: 1.3rem; /* Slightly larger for a "News Portal" feel */ line-height: 1.2; color: var(--navy); margin: 5px 0; font-weight: 700; } .substack-date { font-size: 0.85rem; color: #888; margin-bottom: 15px; } /* LONGER DESCRIPTION */ .substack-desc { font-family: 'Lato', sans-serif; font-size: 0.95rem; line-height: 1.6; color: #444; margin-bottom: 15px; /* Shows up to 6 lines of text now */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-align: justify; /* Optional: makes it look like a newspaper */ } .substack-continue { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--gold); letter-spacing: 0.05em; } /* ============================================================ SUBSTACK THUMBNAIL SIZING (Desktop) ============================================================ */ .substack-img-link { flex-shrink: 0; /* CRITICAL: Stops the browser from squishing the image */ margin-top: 5px; } .substack-thumbnail { /* ADJUST THESE TWO NUMBERS TO CHANGE SIZE */ width: 220px; height: 200px; object-fit: cover; /* Keeps image from looking stretched */ border-radius: 2px; border: 1px solid rgba(0,0,0,0.05); display: block; } /* ============================================================ SUBSTACK THUMBNAIL SIZING (Mobile / Phones) ============================================================ */ @media (max-width: 768px) { .substack-card { flex-direction: column-reverse; /* Puts image on top of text */ } .substack-img-link { width: 100%; margin-bottom: 20px; } .substack-thumbnail { width: 100%; /* Image takes full width of phone */ height: 220px; /* Makes it a bit taller on mobile */ } .substack-post { padding-right: 0; /* Removes the side gap on mobile */ } } /* CATEGORY LABEL */ .substack-category { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--lit-primary); margin-bottom: 8px; } /* TITLE LINK */ .substack-title-link { text-decoration: none; display: block; } /* META ROW (Avatar + Name/Date) */ .substack-meta { display: flex; align-items: center; gap: 12px; margin: 12px 0 18px 0; } .substack-author-avatar { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; border: 1px solid var(--gray); } .substack-meta-text { display: flex; flex-direction: column; line-height: 1.3; } .substack-author-name { font-family: 'Lato', sans-serif; font-size: 0.85rem; font-weight: 700; color: var(--navy); } .substack-date { font-size: 0.78rem; color: #888; } /* ACTION BUTTONS */ .substack-actions { display: flex; gap: 20px; margin-top: auto; } .substack-continue, .substack-vst-link { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; text-decoration: none; } .substack-continue { color: var(--gold); } .substack-vst-link { color: var(--navy); opacity: 0.7; } .substack-vst-link:hover { opacity: 1; text-decoration: underline; } /* Image link adjustment */ .substack-img-link { flex-shrink: 0; } /* Blog Archive Styles */ .archive-grid { display: grid; gap: 25px; margin-top: 20px; } .post-card { background: white; border-radius: 8px; overflow: hidden; display: flex; flex-direction: row; box-shadow: 0 4px 15px rgba(0,0,0,0.05); transition: 0.3s; text-decoration: none; color: inherit; border: 1px solid #e0e0e0; } .post-card:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0,0,0,0.1); } .card-image { width: 30%; min-width: 180px; background-size: cover; background-position: center; } .card-content { padding: 20px; flex: 1; display: flex; flex-direction: column; } .category-tag { background: #a48b4c; /* Gold color to match your theme */ color: white; font-size: 10px; padding: 2px 8px; border-radius: 3px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; } .date-display { font-size: 12px; color: #888; margin-left: 10px; font-family: 'Lato', sans-serif; } .post-card h2 { margin: 10px 0; font-size: 22px; color: #1a2a44; /* Dark blue from your theme */ font-family: 'Cinzel', serif; } .snippet { color: #555; font-size: 15px; line-height: 1.5; margin-bottom: 15px; font-family: 'EB Garamond', serif; } .meta-info { display: flex; align-items: center; gap: 10px; margin-top: auto; } .avatar { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; } .author-name { font-weight: bold; font-size: 13px; color: #444; font-family: 'Lato', sans-serif; } /* Mobile view */ @media (max-width: 768px) { .post-card { flex-direction: column; } .card-image { width: 100%; height: 200px; } } /* ============================================================ QUICK ACTIONS (BREADCRUMB STYLE) ============================================================ */ .quick-actions { background: var(--lit-dark); /* Matches liturgical season */ border-bottom: 1px solid rgba(201,168,76,0.2); transition: background 0.8s ease; } .qa-inner { max-width: 1200px; margin: 0 auto; padding: 10px 24px; /* Slimmer than the previous buttons */ display: flex; align-items: center; gap: 8px; } /* Base style for all items */ .qa-link, .qa-current { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } /* The clickable links */ .qa-link { color: var(--gold-lt); transition: color 0.2s; display: flex; align-items: center; } .qa-link:hover { color: var(--white); } /* The separator (the ">" symbol) */ .qa-link::after { content: 'â€º'; /* Using a cleaner chevron-style character */ margin-left: 8px; color: rgba(255, 255, 255, 0.4); font-size: 1rem; font-weight: 400; line-height: 0; } /* The current page indicator */ .qa-current { color: var(--white); opacity: 0.9; } /* Mobile Tweak: Allow horizontal scroll if the path is very long */ @media (max-width: 600px) { .qa-inner { overflow-x: auto; white-space: nowrap; padding: 8px 16px; } } /* --- HAMBURGER MENU STYLES --- */ .menu-toggle { display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 21px; background: transparent; border: none; cursor: pointer; z-index: 110; } .hamburger-bar { width: 100%; height: 3px; background-color: var(--gold); border-radius: 2px; transition: all 0.3s ease; } @media (max-width: 900px) { .menu-toggle { display: flex; } .nav-links { position: absolute; top: 100%; /* Sits right under the nav bar */ left: 0; width: 100%; background: var(--navy-dk); flex-direction: column; max-height: 0; overflow: hidden; transition: max-height 0.4s ease-out; border-bottom: 0px solid var(--gold); } .nav-links.mobile-open { max-height: 500px; /* High enough to contain all links */ border-bottom: 3px solid var(--gold); } .nav-links a { padding: 15px 24px; border-bottom: 1px solid rgba(255,255,255,0.05); width: 100%; box-sizing: border-box; } /* --- SIDEBAR DROPDOWN STYLES --- */ .sidebar-header { display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .sidebar-header .chevron { width: 10px; height: 10px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(45deg); transition: transform 0.3s ease; margin-right: 5px; } .sidebar-nav.open .chevron { transform: rotate(-135deg); } .sidebar-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-in-out; } .sidebar-nav.open .sidebar-list { max-height: 1000px; /* Large enough for the list */ } } /* The Gold Box Container */ .translator-gold-box { display: inline-block; background-color: #a67c00; padding: 4px 10px; border: 1px solid #c5a059; border-radius: 4px; margin-left: 15px; vertical-align: middle; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } /* Ensuring the Elfsight widget fits inside the box properly */ .translator-gold-box div { margin: 0 !important; } /* Responsive adjustment for small screens */ @media (max-width: 768px) { .translator-gold-box { margin-left: 0; margin-top: 10px; display: block; /* Stack it on mobile */ } } /* 1. Use Fixed instead of Sticky for a global header */ .sticky-header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; } /* 2. Ensure the elements inside are relative to the header */ .utility-bar, .main-nav { position: relative; width: 100%; } /* 3. IMPORTANT: Offset the content so it doesn't hide under the fixed header */ /* Since your header is fixed, it no longer "takes up space" at the top. */ #header-part { padding-top: 150px; /* Adjust this number to match the height of your header */ } }