From e7d02211a36f070c9cef18107daaf4077f60ccbb Mon Sep 17 00:00:00 2001 From: Nathan Schneider Date: Sat, 19 Jul 2025 21:46:51 -0600 Subject: [PATCH] Moved CSS from baseof --- layouts/_default/baseof.html | 871 +---------------------------------- static/css/main.css | 868 ++++++++++++++++++++++++++++++++++ 2 files changed, 869 insertions(+), 870 deletions(-) create mode 100644 static/css/main.css diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 072cdb1..41bf648 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -8,876 +8,7 @@ - +
diff --git a/static/css/main.css b/static/css/main.css new file mode 100644 index 0000000..5179b8c --- /dev/null +++ b/static/css/main.css @@ -0,0 +1,868 @@ +@import url('/fonts/space-grotesk-local.css'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +:root { + --e2c-yellow: #F4D03F; + --e2c-dark-yellow: #E8C547; + --text-primary: #2C3E50; + --text-secondary: #7F8C8D; + --background: #FEFEFE; + --card-background: #FFFFFF; + --border: #E5E8E8; + --shadow: rgba(0, 0, 0, 0.08); +} + +body { + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + line-height: 1.6; + color: var(--text-primary); + background: var(--background); + font-weight: 400; +} + +.container { + max-width: 1200px; + margin: 0 auto; + padding: 0 24px; +} + +.site-header { + background-image: url('/img/notion_bg-1.png'); + background-size: cover; + background-position: center top; + background-repeat: no-repeat; + border-bottom: 1px solid var(--border); + padding: 16px 0; + position: sticky; + top: 0; + z-index: 1001; + min-height: 80px; +} + +nav { + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + display: flex; + align-items: center; + text-decoration: none; + color: var(--text-primary); + font-weight: 600; + font-size: 1.2rem; + background: rgba(255, 255, 255, 0.9); + padding: 8px 16px; + border-radius: 24px; + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.3); +} + +.logo img { + height: 48px; + margin-right: 10px; +} + +.nav-links { + display: flex; + list-style: none; + gap: 16px; + margin: 0; +} + +.nav-links a { + text-decoration: none; + color: var(--text-primary); + font-weight: 500; + font-size: 14px; + padding: 8px 16px; + border-radius: 20px; + transition: all 0.2s ease; + background: rgba(255, 255, 255, 0.9); + backdrop-filter: blur(8px); + border: 1px solid rgba(255, 255, 255, 0.3); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); +} + +.nav-links a:hover { + background: var(--e2c-yellow); + border-color: var(--e2c-yellow); + transform: translateY(-2px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +.mobile-menu-toggle { + display: none; + flex-direction: column; + background: rgba(255, 255, 255, 0.9); + border: 1px solid rgba(255, 255, 255, 0.3); + border-radius: 8px; + padding: 8px; + cursor: pointer; + transition: all 0.2s ease; + backdrop-filter: blur(8px); + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + gap: 4px; +} + +.mobile-menu-toggle:hover { + background: var(--e2c-yellow); + border-color: var(--e2c-yellow); +} + +.hamburger-line { + width: 20px; + height: 2px; + background: var(--text-primary); + transition: all 0.3s ease; + border-radius: 1px; +} + +.mobile-menu-toggle.active .hamburger-line:nth-child(1) { + transform: rotate(45deg) translate(5px, 5px); +} + +.mobile-menu-toggle.active .hamburger-line:nth-child(2) { + opacity: 0; +} + +.mobile-menu-toggle.active .hamburger-line:nth-child(3) { + transform: rotate(-45deg) translate(7px, -6px); +} + +.mobile-menu-overlay { + display: none; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.3); + z-index: 99; + transition: opacity 0.3s ease; +} + +.mobile-menu-overlay.active { + display: block; + opacity: 1; +} + +body.menu-open { + overflow: hidden; +} + +main { + padding: 48px 0; + min-height: calc(100vh - 200px); +} + +footer { + background: var(--card-background); + border-top: 1px solid var(--border); + padding: 48px 0 32px 0; + color: var(--text-secondary); + font-size: 14px; +} + +.footer-content { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 48px; + align-items: start; +} + +.footer-section h3 { + color: var(--text-primary); + font-size: 1.25rem; + margin-bottom: 16px; + font-weight: 600; +} + +.footer-section p { + margin-bottom: 16px; + line-height: 1.6; +} + +.newsletter-signup { + margin-top: 24px; +} + +.custom-newsletter-form .form-group { + display: flex; + gap: 8px; + margin-bottom: 12px; +} + +.email-input { + flex: 1; + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-weight: 400; + font-size: 14px; + padding: 10px 16px; + border: 1px solid var(--border); + border-radius: 24px; + background: rgba(255, 255, 255, 0.9); + color: var(--text-primary); + transition: all 0.2s ease; +} + +.email-input:focus { + outline: none; + border-color: var(--e2c-yellow); + box-shadow: 0 0 0 2px rgba(244, 208, 63, 0.2); +} + +.email-input::placeholder { + color: var(--text-secondary); +} + +.subscribe-btn { + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-weight: 500; + font-size: 14px; + padding: 10px 20px; + background: var(--e2c-yellow); + color: var(--text-primary); + border: 2px solid var(--e2c-yellow); + border-radius: 24px; + cursor: pointer; + transition: all 0.2s ease; + white-space: nowrap; +} + +.subscribe-btn:hover { + background: var(--e2c-dark-yellow); + border-color: var(--e2c-dark-yellow); + transform: translateY(-1px); +} + +.form-note { + font-size: 12px; + color: var(--text-secondary); + margin: 0; + font-style: italic; +} + +.footer-links { + text-align: right; +} + +.footer-links p { + margin-bottom: 8px; +} + +h1, h2, h3, h4, h5, h6 { + margin-bottom: 16px; + color: var(--text-primary); + font-weight: 600; + line-height: 1.3; +} + +h1 { + font-size: 2.5rem; + font-weight: 700; +} + +h2 { + font-size: 2rem; +} + +h3 { + font-size: 1.5rem; +} + +p { + margin-bottom: 16px; + color: var(--text-secondary); + line-height: 1.7; +} + +a { + color: var(--text-primary); + text-decoration: underline; + text-decoration-color: var(--e2c-yellow); + text-underline-offset: 3px; + transition: all 0.2s ease; +} + +a:hover { + color: var(--text-primary); + text-decoration-color: var(--e2c-dark-yellow); +} + +.btn { + display: inline-block; + padding: 12px 24px; + background: var(--e2c-yellow); + color: var(--text-primary); + text-decoration: none; + border-radius: 24px; + margin: 8px 0; + font-weight: 500; + font-size: 15px; + transition: all 0.2s ease; + border: 2px solid var(--e2c-yellow); +} + +.btn:hover { + background: var(--e2c-dark-yellow); + border-color: var(--e2c-dark-yellow); + color: var(--text-primary); + transform: translateY(-1px); +} + +.card { + background: var(--card-background); + border: 1px solid var(--border); + border-radius: 16px; + padding: 24px; + margin-bottom: 24px; + box-shadow: 0 4px 12px var(--shadow); + transition: all 0.2s ease; +} + +.card:hover { + transform: translateY(-2px); + box-shadow: 0 8px 24px var(--shadow); +} + +.grid { + display: grid; + gap: 24px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); +} + +.hero { + text-align: center; + padding: 64px 0; + background: linear-gradient(135deg, var(--background) 0%, #F8F9FA 100%); + border-radius: 24px; + margin-bottom: 48px; +} + +.hero h1 { + font-size: 3.5rem; + margin-bottom: 24px; + background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%); + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + background-clip: text; +} + +.hero p { + font-size: 1.25rem; + max-width: 600px; + margin: 0 auto 32px; +} + +.hero-section { + background: var(--e2c-yellow); + padding: 4rem 2rem; + margin: 0 0 3rem 0; + border-radius: 24px; +} + +.hero-content { + display: flex; + align-items: center; + gap: 3rem; + max-width: 1200px; + margin: 0 auto; +} + +.hero-image { + width: 300px; + height: auto; + border-radius: 16px; +} + +.hero-text h1 { + font-size: 3rem; + margin: 0 0 1rem 0; + color: var(--text-primary); +} + +.hero-text p { + font-size: 1.25rem; + margin: 0; + color: var(--text-primary); +} + +.intro-section { + margin: 3rem 0; + text-align: center; +} + +.intro-section h2 { + color: var(--text-primary); + margin-bottom: 1rem; +} + +.intro-section ul { + list-style: none; + padding: 0; + margin: 2rem 0; + display: grid; + gap: 12px; + grid-template-columns: repeat(3, 1fr); + max-width: 800px; + margin-left: auto; + margin-right: auto; +} + +@media (max-width: 900px) { + .intro-section ul { + grid-template-columns: 1fr; + } +} + +.intro-section ul li { + background: var(--e2c-yellow); + color: var(--text-primary); + padding: 16px 20px; + border-radius: 12px; + font-weight: 500; + text-align: center; + line-height: 1.4; + box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); + transition: all 0.2s ease; +} + +.intro-section ul li:hover { + transform: translateY(-2px); + box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); +} + +.cards-grid { + display: grid; + gap: 24px; + grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); + margin: 3rem 0; +} + +.card .button { + display: inline-block; + padding: 12px 24px; + background: var(--e2c-yellow); + color: var(--text-primary); + text-decoration: none; + border-radius: 24px; + margin-top: 16px; + font-weight: 500; + font-size: 15px; + transition: all 0.2s ease; + border: 2px solid var(--e2c-yellow); +} + +.card .button:hover { + background: var(--e2c-dark-yellow); + border-color: var(--e2c-dark-yellow); + transform: translateY(-1px); +} + +.partnership-section { + text-align: center; + margin: 4rem 0; + padding: 2rem; + background: #F8F9FA; + border-radius: 16px; +} + +.partnership-image { + width: 200px; + height: auto; + border-radius: 16px; + margin-bottom: 1rem; +} + +.main-sections { + margin: 4rem 0; +} + +.main-sections h2 { + text-align: center; + color: var(--text-primary); + margin-bottom: 2rem; + font-size: 2.5rem; +} + +.primary-cards { + display: grid; + gap: 32px; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + margin-bottom: 2rem; +} + +.primary-card { + background: var(--card-background); + border: 2px solid var(--e2c-yellow); + border-radius: 20px; + padding: 32px; + text-align: center; + box-shadow: 0 8px 24px var(--shadow); + transition: all 0.3s ease; +} + +.primary-card:hover { + transform: translateY(-4px); + box-shadow: 0 16px 40px var(--shadow); + border-color: var(--e2c-dark-yellow); +} + +.primary-card h3 { + font-size: 1.5rem; + color: var(--text-primary); + margin-bottom: 1rem; +} + +.primary-card p { + color: var(--text-secondary); + margin-bottom: 1.5rem; +} + +.secondary-actions { + margin: 3rem 0; + padding: 2rem; + background: #F8F9FA; + border-radius: 16px; +} + +.secondary-actions h3 { + text-align: center; + color: var(--text-primary); + margin-bottom: 1.5rem; + font-size: 1.5rem; +} + +.secondary-cards { + display: grid; + gap: 24px; + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + +.secondary-card { + background: var(--card-background); + border: 1px solid var(--border); + border-radius: 12px; + padding: 24px; + text-align: center; + transition: all 0.2s ease; +} + +.secondary-card:hover { + transform: translateY(-2px); + box-shadow: 0 4px 12px var(--shadow); +} + +.secondary-card h4 { + font-size: 1.1rem; + color: var(--text-primary); + margin-bottom: 0.5rem; +} + +.secondary-card p { + color: var(--text-secondary); + margin-bottom: 1rem; + font-size: 0.9rem; +} + +.secondary-button { + display: inline-block; + padding: 8px 16px; + background: transparent; + color: var(--text-primary); + text-decoration: none; + border: 1px solid var(--border); + border-radius: 16px; + font-weight: 500; + font-size: 14px; + transition: all 0.2s ease; +} + +.secondary-button:hover { + background: var(--e2c-yellow); + border-color: var(--e2c-yellow); + transform: translateY(-1px); +} + +/* Hide auto-generated cards on homepage only */ +.home .grid { + display: none !important; +} + +/* Case study logo styling */ +.case-logo { + width: 72px; + height: 72px; + object-fit: contain; + border-radius: 8px; + margin-bottom: 16px; + background: rgba(255, 255, 255, 0.9); + padding: 8px; + border: 1px solid var(--border); +} + +/* Case study detail page logo */ +.case-detail-logo { + width: 120px; + height: 120px; + object-fit: contain; + border-radius: 16px; + margin-bottom: 24px; + background: rgba(255, 255, 255, 0.9); + padding: 16px; + border: 1px solid var(--border); + box-shadow: 0 4px 12px var(--shadow); +} + +@media (max-width: 768px) { + .mobile-menu-toggle { + display: flex; + } + + .nav-links { + position: fixed; + top: 80px; + right: -100%; + width: 280px; + height: calc(100vh - 80px); + background: rgba(255, 255, 255, 0.98); + backdrop-filter: blur(12px); + border-left: 1px solid var(--border); + flex-direction: column; + gap: 0; + padding: 24px; + transition: right 0.3s ease; + z-index: 1002; + box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1); + } + + .nav-links.active { + right: 0; + } + + .nav-links li { + width: 100%; + margin-bottom: 16px; + } + + .nav-links a { + display: block; + width: 100%; + padding: 16px 20px; + font-size: 16px; + border-radius: 12px; + text-align: center; + margin: 0; + } + + .logo { + font-size: 0.9rem; + padding: 5px 10px; + } + + .logo img { + height: 32px; + margin-right: 5px; + } + + .site-header { + padding: 8px 0; + min-height: 64px; + } + + nav { + position: relative; + } + + .hero h1 { + font-size: 2.5rem; + } + + .hero p { + font-size: 1.1rem; + } + + .container { + padding: 0 16px; + } + + .hero-content { + flex-direction: column; + text-align: center; + } + + .hero-image { + width: 200px; + } + + .hero-text h1 { + font-size: 2rem; + } + + .hero-section { + margin: 0 0.5rem 2rem 0.5rem; + padding: 2rem 1rem; + } + + .primary-cards { + grid-template-columns: 1fr; + } + + .footer-content { + grid-template-columns: 1fr; + gap: 32px; + text-align: center; + } + + .footer-links { + text-align: center; + } + + .custom-newsletter-form .form-group { + flex-direction: column; + gap: 12px; + } + + .subscribe-btn { + align-self: center; + min-width: 120px; + } +} + +@media (min-width: 769px) and (max-width: 1024px) { + .primary-cards { + grid-template-columns: 1fr; + } +} + +/* Contact Form Styling */ +.contact-form-container { + max-width: 700px; + margin: 2rem auto; + padding: 2rem; + background: var(--card-background); + border-radius: 16px; + box-shadow: 0 4px 12px var(--shadow); + border: 1px solid var(--border); +} + +.e2c-contact-form .form-group { + margin-bottom: 1.5rem; +} + +.e2c-contact-form label { + display: block; + margin-bottom: 0.5rem; + font-weight: 500; + color: var(--text-primary); + font-size: 14px; +} + +.e2c-contact-form input[type="text"], +.e2c-contact-form input[type="email"], +.e2c-contact-form input[type="url"], +.e2c-contact-form select, +.e2c-contact-form textarea { + width: 100%; + padding: 12px 16px; + border: 1px solid var(--border); + border-radius: 8px; + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-size: 14px; + background: var(--background); + color: var(--text-primary); + transition: all 0.2s ease; +} + +.e2c-contact-form input:focus, +.e2c-contact-form select:focus, +.e2c-contact-form textarea:focus { + outline: none; + border-color: var(--e2c-yellow); + box-shadow: 0 0 0 2px rgba(244, 208, 63, 0.2); +} + +.e2c-contact-form textarea { + resize: vertical; + min-height: 100px; +} + +.checkbox-group { + display: flex; + flex-direction: column; + gap: 0.5rem; +} + +.checkbox-label { + display: flex !important; + align-items: center; + gap: 0.5rem; + font-weight: 400 !important; + margin-bottom: 0 !important; + cursor: pointer; +} + +.e2c-contact-form input[type="checkbox"], +.e2c-contact-form input[type="radio"] { + width: auto; + margin: 0; + accent-color: var(--e2c-yellow); +} + +.submit-btn { + width: 100%; + padding: 14px 24px; + background: var(--e2c-yellow); + color: var(--text-primary); + border: 2px solid var(--e2c-yellow); + border-radius: 24px; + font-family: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; + font-weight: 600; + font-size: 16px; + cursor: pointer; + transition: all 0.2s ease; +} + +.submit-btn:hover { + background: var(--e2c-dark-yellow); + border-color: var(--e2c-dark-yellow); + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); +} + +@media (max-width: 768px) { + .contact-form-container { + margin: 1rem; + padding: 1.5rem; + } +} + +/* Protect h2 elements from external script interference */ +h2 { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +.intro-section h2, +.main-sections h2, +.featured-cases-section h2 { + display: block !important; + visibility: visible !important; + opacity: 1 !important; +} + +/* Hide Action Network form titles */ +#can-form-area-e2c-website-newsletter-form h2, +#can-form-area-e2c-website-join-form h2, +#can-form-area-e2c-website-story-form h2, +[id*="can-form-area"] h2 { + display: none !important; +} \ No newline at end of file