/* ============== Global Styles (shared across all pages) ============== */ /* == having inside == */ /* Root */ :root { --bg: #f7f9ff; --card: #fff; --muted: #6b7280; --accent-1: #ffd6e0; --accent-2: #e8f3ff; --accent-3: #fff6e6; --shadow: 0 8px 24px rgba(16, 24, 40, 0.08), 0 2px 6px rgba(16, 24, 40, 0.04); --radius: 14px; } /* Header */ header { text-align: center; margin-top: 10px; } /* Website title */ .site-title { font-family: 'National Park', sans-serif; font-weight: 200; letter-spacing: 0.6px; line-height: 1; font-size: 36px; margin: 0; } .site-title .bang { font-family: 'National Park', sans-serif; font-weight: 800; letter-spacing: 0.6px; line-height: 1; font-size: 40px; } .site-title .scissors { font-family: 'National Park', sans-serif; font-weight: 800; letter-spacing: 0.6px; line-height: 1; font-size: 48px; color: #5e4bff; margin: 0; gap: 8px; } .subtitle { font-family: 'National Park', sans-serif; font-size: 16px; color: var(--muted); margin-top: 6px; } /* Typography */ body { margin: 0; font-family: 'National Park', sans-serif; font-size: 14px; background: linear-gradient(135deg, var(--accent-2), var(--accent-1)); color: #0f172a; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; display: flex; text-align: justify; justify-content: center; padding: 40px; } /* Layout containers */ .container { max-width: 960px; width: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.95)); border-radius: 20px; box-shadow: var(--shadow); padding: 40px; display: flex; flex-direction: column; gap: 18px; } .card { background: var(--card); border-radius: var(--radius); padding: 10px 40px 20px; box-shadow: 0 5px 10px rgba(16, 24, 40, 0.06); } /* Utility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; } /* Headings */ h1 { font-size: 28px; font-weight: 700; color: #1f2937; } h2 { font-size: 20px; font-weight: 700; margin-top: 40px; color: #1f2937; } /* Horizontal line */ hr { background-color: var(--muted); height: 1px; border: none; } /* Body paragraph text */ p { font-size: 16px; line-height: 1.6; } /* List text */ ul { font-size: 16px; line-height: 1.6; } /* Link style with soft underline animation*/ a { position: relative; color: var(--muted); text-decoration: none; transition: color 0.25s ease-in-out; } a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background-color: #5e4bff; transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease-in-out; } a:hover { color: #5e4bff; } a:hover::after { transform: scaleX(1); } /* Footer */ footer { margin-top: 20px; font-size: 14px; display: flex; justify-content: space-between; flex-wrap: wrap; } /* Responsive adjustments for small screens */ @media (max-width:600px) { body { padding: 10px; } .container { padding: 12px; border-radius: 20px; } .site-title { font-size: 36px; } .site-title .bang { font-size: 40px; } .site-title .scissors { font-size: 48px; } .subtitle { font-size: 16px; } .card { padding: 0px 12px 0px; } h1 { font-size: 24px; } h2 { font-size: 18px; } p { font-size: 14px; } ul { font-size: 14px; } footer { flex-direction: column; align-items: center; text-align: center; } } /* Blog list cards */ .blog-list { display: grid; gap: 20px; } .blog-card { background: #fff; border-radius: 12px; padding: 20px 30px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); transition: transform 0.2s ease; } .blog-card:hover { background: #f7f9ff; border-left: 10px solid #5e4bff; padding: 20px 30px 20px 20px; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.25); } .blog-card:hover a { color: #5e4bff; } .blog-card h2 { margin-top: 0; font-size: 1.4em; } .blog-card p { font-size: 1em; line-height: 1.5; } .read-more { display: inline-block; margin-top: 10px; font-weight: 700; position: relative; } .blog-end-box { background: #f7f9ff; border-left: 5px solid #5e4bff; padding: 10px 20px; margin: 20px 0; border-radius: 12px; } .cta-box { background: #f7f9ff; padding: 10px 20px; margin: 20px 0; border-radius: 12px; }