/* ============================================================ BLOGVITALS — SHARED STYLES Used across all pages: nav, footer, CTA band, design tokens ============================================================ */ /* ===== GOOGLE FONTS ===== Import handled in each HTML to avoid render-blocking. Fonts: Titan One (display), DM Sans (body) ============================= */ /* ===== DESIGN TOKENS ===== */ :root { --teal: #00B49B; --teal-dark: #008f7c; --teal-light: #E6F8F5; --orange: #F15A30; --orange-light: #FEF0EB; --dark: #111314; --grey: #B6BFC1; --light: #F4F2ED; --white: #ffffff; --pass: #00B49B; --fail: #F15A30; --pass-bg: #E6F8F5; --fail-bg: #FEF0EB; --warn: #f5a623; --warn-bg: #FFF8E6; --card-border: #E8E4DC; } /* ===== RESET ===== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'DM Sans', sans-serif; background: var(--light); color: var(--dark); overflow-x: hidden; } /* ===== NAV (homepage variant — 68px, full nav links) ===== */ nav { position: sticky; top: 0; z-index: 100; background: var(--dark); padding: 0 5%; display: flex; align-items: center; justify-content: space-between; height: 68px; border-bottom: 3px solid var(--teal); } .logo { display: flex; align-items: center; gap: 10px; text-decoration: none; } .logo-mark { width: 36px; height: 36px; background: var(--teal); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--dark); font-weight: 900; } .logo-text { font-family: 'Titan One', cursive; font-size: 20px; color: var(--white); letter-spacing: 0; } .logo-text span { color: var(--teal); } nav ul { list-style: none; display: flex; gap: 36px; align-items: center; } nav ul li a { text-decoration: none; color: var(--grey); font-size: 15px; font-weight: 500; transition: color 0.2s; position: relative; } nav ul li a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--teal); transition: width 0.25s ease; } nav ul li a:hover { color: var(--white); } nav ul li a:hover::after { width: 100%; } nav ul li a.active { color: var(--white); } nav ul li a.active::after { width: 100%; } /* ===== REPORT / CONTENT TOPBAR (60px, minimal) ===== */ .topbar { background: var(--dark); border-bottom: 3px solid var(--teal); padding: 0 5%; height: 60px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-logo { font-family: 'Titan One', cursive; font-size: 20px; color: var(--white); display: flex; align-items: center; gap: 8px; text-decoration: none; } .topbar-logo .heart { width: 30px; height: 30px; background: var(--teal); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 15px; } .topbar-logo span { color: var(--teal); } .topbar-actions { display: flex; gap: 12px; align-items: center; } /* ===== NAV — content pages variant ===== */ .nav-logo { font-family: 'Titan One', cursive; font-size: 20px; color: var(--white); display: flex; align-items: center; gap: 9px; text-decoration: none; } .nav-logo .heart { width: 30px; height: 30px; background: var(--teal); border-radius: 7px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .nav-logo span { color: var(--teal); } .nav-cta { padding: 7px 18px; background: var(--orange); color: var(--white); font-family: 'Titan One', cursive; font-size: 13px; border: none; border-radius: 8px; cursor: pointer; text-decoration: none; transition: background 0.2s; } .nav-cta:hover { background: #d94d25; } /* ===== BUTTONS ===== */ .btn-outline { padding: 7px 18px; border: 2px solid #2a3038; border-radius: 8px; background: transparent; color: var(--grey); font-family: 'DM Sans', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; transition: all 0.2s; } .btn-outline:hover { border-color: var(--teal); color: var(--teal); } .btn-primary { padding: 7px 18px; border: none; border-radius: 8px; background: var(--orange); color: var(--white); font-family: 'Titan One', cursive; font-size: 13px; cursor: pointer; transition: background 0.2s; } .btn-primary:hover { background: #d94d25; } /* ===== CTA BAND ===== */ .cta-band { background: var(--orange); padding: 70px 5%; text-align: center; position: relative; overflow: hidden; } .cta-band::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, #ffffff15 1px, transparent 1px); background-size: 22px 22px; } .cta-band h2 { font-family: 'Titan One', cursive; font-size: clamp(26px, 3.5vw, 44px); color: var(--white); letter-spacing: -0.5px; margin-bottom: 14px; position: relative; z-index: 1; } .cta-band p { color: #ffe0d8; font-size: 17px; margin-bottom: 32px; position: relative; z-index: 1; } .cta-btn { display: inline-block; padding: 16px 36px; background: var(--dark); color: var(--white); font-family: 'Titan One', cursive; font-size: 15px; border-radius: 10px; text-decoration: none; letter-spacing: 0.3px; transition: background 0.2s, transform 0.1s; position: relative; z-index: 1; cursor: pointer; border: none; } .cta-btn:hover { background: #1e2428; } .cta-btn:active { transform: scale(0.98); } /* ===== FOOTER ===== */ footer { background: var(--dark); padding: 32px 5%; border-top: 2px solid #1e2428; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } .footer-copy { font-size: 13px; color: #4a5260; } .footer-copy a { color: var(--grey); text-decoration: none; margin-left: 16px; transition: color 0.2s; } .footer-copy a:hover { color: var(--teal); } .footer-logo { font-family: 'Titan One', cursive; font-size: 16px; color: #2a3038; } .footer-logo span { color: var(--teal); } /* ===== SECTION SHARED ===== */ .section-tag { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; } .section-header-center { text-align: center; margin-bottom: 56px; } .section-title { font-family: 'Titan One', cursive; font-size: clamp(28px, 3.5vw, 46px); line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 0; } /* ===== SHARED ANIMATIONS ===== */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }