/* =================================== Malayalam Font Generator - Styles =================================== */ /* === GOOGLE FONTS === */ /* Google Fonts — loaded via tags in HTML for better performance */ /* === CSS VARIABLES === */ :root { --primary-green: #00753C; --pastel-orange: #ffa770; --off-white: #F9F9F9; --section-grey: #f0f2f5; --header-bg: #00753C; --hover-blue: #499dd0; --dark-grey: #3A3A3A; --darker-grey: #2C2C2C; --medium-grey: #666666; --light-grey: #CCCCCC; --border-grey: #999999; --black: #333333; --pure-black: #000000; --white: #FFFFFF; --font-noto-serif: 'Noto Serif', serif; --font-open-sans: 'Open Sans', sans-serif; --font-inclusive-sans: 'Inclusive Sans', sans-serif; --font-poppins: 'Poppins', sans-serif; --font-roboto-mono: 'Roboto Mono', monospace; --font-roboto-slab: 'Roboto Slab', serif; --font-inder: 'Inder', sans-serif; --spacing-xs: 0.5rem; --spacing-sm: 1rem; --spacing-md: 1.5rem; --spacing-lg: 2rem; --spacing-xl: 3rem; --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; } /* === RESET & BASE === */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: var(--font-open-sans); color: var(--black); line-height: 1.6; background-color: var(--off-white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } a { text-decoration: none; color: inherit; } button { border: none; background: none; cursor: pointer; font-family: inherit; } ul { list-style: none; } /* === HEADER === */ .header { background-color: var(--header-bg); padding: 0.5rem 1rem; position: relative; z-index: 100; } .header-container { max-width: 98%; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } .logo-section { display: flex; align-items: center; } .logo-section a { display: inline-flex; align-items: center; line-height: 0; } .logo { height: 80px; width: auto; display: block; } .nav-desktop { display: none; } /* === HAMBURGER MENU === */ .hamburger { display: flex; flex-direction: column; gap: 6px; cursor: pointer; padding: 0; z-index: 1001; } .hamburger span { width: 35px; height: 3px; background-color: var(--off-white); border-radius: 0; transition: var(--transition-fast); } /* === SLIDE-IN NAVIGATION === */ .nav-mobile { position: fixed; top: 0; left: -100%; width: 320px; height: 100vh; background-color: #f0f0f0; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.1); transition: left 0.3s ease; z-index: 1000; overflow-y: auto; padding: 6rem 2rem 2rem; } .nav-mobile.active { left: 0; } .nav-mobile .close-menu { position: absolute; top: 1.5rem; right: 1.5rem; font-size: 2.5rem; color: #222222; cursor: pointer; font-weight: 500; line-height: 1; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; transition: none; } .nav-mobile .close-menu:hover { color: #007DCD; } .nav-mobile a { display: block; padding: 1.2rem 0; font-family: var(--font-open-sans); font-weight: 400; text-transform: none; color: #222222; font-size: 21px; border-bottom: none; transition: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .nav-mobile a:hover { color: #007DCD; } .menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 999; } .menu-overlay.active { opacity: 1; visibility: visible; } /* === LAYOUT === */ .main-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); } /* === HERO SECTION === */ .hero { background-color: transparent; color: var(--black); padding: 2rem var(--spacing-lg) 2rem; text-align: center; } .translation-page .hero { padding-top: 2rem; } .translation-page h1 { font-family: var(--font-noto-serif); font-size: 35px; font-weight: 700; color: #222222; margin-bottom: 1rem; } .translation-page .hero-tagline { font-family: var(--font-open-sans); font-size: 1.2rem; color: var(--medium-grey); } .hero-tool-section { background-color: transparent; } .hero-container { max-width: 900px; margin: 0 auto; } .hero h1 { font-family: var(--font-noto-serif); font-weight: 700; font-size: 35px; color: #222222; margin-bottom: 1.25rem; line-height: 1.2; } .hero-tagline { font-family: var(--font-open-sans); font-size: 1.2rem; color: var(--medium-grey); margin-bottom: var(--spacing-lg); } /* === INPUT BOX === */ .input-box { width: 100%; max-width: 800px; margin: 0 auto var(--spacing-lg); min-height: 100px; padding: 1.5rem 2rem; font-family: var(--font-open-sans); font-size: 24px; line-height: 33px; border: 2px solid #d0d0d0; border-radius: 12px; outline: none; transition: border-color var(--transition-fast); display: block; resize: vertical; color: #333333; } .input-box:focus { border-color: #333333; } .input-box::placeholder { font-family: var(--font-open-sans); font-weight: 400; font-size: 24px; line-height: 33px; color: #999999; } .input-container { position: relative; max-width: 800px; margin: 0 auto var(--spacing-lg); } .clear-btn-container { max-width: 800px; margin: -1rem auto 2rem; display: flex; justify-content: flex-end; } .font-styles-page .input-box { min-height: 150px; padding-right: 4rem; } .font-styles-page .clear-reset { width: 44px; height: 44px; font-size: 2.2rem; right: 1rem; top: 1rem; } .font-styles-page .clear-btn-container .canva-btn { min-width: 80px; padding: 0.4rem 1rem; } /* === FONT DISPLAY SECTION === */ .font-display-section { background-color: transparent; padding: 3rem 0; margin: 2rem 0; border: none; } .font-display-section h2 { font-family: var(--font-noto-serif); font-size: 30px; color: #222222; text-align: center; margin-bottom: 3rem; } .font-cards-container { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 3rem; padding: 0; } /* === FONT CARD === */ .font-card { width: 100%; min-height: 250px; background-color: #ffffff; border: 2px solid #d0d0d0; border-radius: 0; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; } .font-card-title { padding: 0.75rem 1.5rem; display: flex; justify-content: space-between; align-items: center; background-color: #ffffff; border-bottom: 2px solid #d0d0d0; } .font-name { font-family: var(--font-inder); font-weight: 400; font-size: 24px; line-height: 33px; color: #222222; } .font-icons { display: flex; gap: 1rem; } .icon-btn { position: relative; background: transparent; border: none; padding: 0.6rem; cursor: pointer; color: #222222; transition: color var(--transition-fast), background-color var(--transition-fast); display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 44px; height: 44px; } .icon-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; } .icon-btn:hover { color: var(--primary-green); background-color: rgba(0, 150, 78, 0.05); } /* === FONT CARD DISPLAY === */ .font-card-display { flex: 1; padding: 2rem 1.5rem; background-color: #ffffff; min-height: 120px; display: flex; align-items: center; justify-content: center; font-size: 35px; line-height: 1.5; color: #333333; text-align: center; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* === FONT CARD DOWNLOAD === */ .font-card-download { padding: 1.5rem; margin-top: auto; background-color: #ffffff; display: flex; justify-content: center; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .canva-btn { font-family: var(--font-inder); font-weight: 400; font-size: 1.2rem; letter-spacing: 0.05em; color: #ffffff; background-color: #545454; border: 3px solid #f5f5f5; border-radius: 4px; padding: 0.5rem 0.75rem; cursor: pointer; min-width: 0; text-align: center; transition: background-color var(--transition-fast); box-shadow: 0 0 0 1px #f5f5f5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .canva-btn:hover { background-color: #333333; } .btn-format-short { min-width: 80px; padding: 0.5rem 0.5rem; } .btn-format-wide { min-width: 120px; padding: 0.5rem 1rem; } .tooltip { display: none !important; } /* === STICKY FONT CONTROL PANEL === */ .font-control-bar { position: sticky; top: 0; z-index: 90; background-color: #ffffff; border-bottom: 2px solid #e0e0e0; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07); padding: 0.75rem 1.5rem; margin-bottom: 2rem; } .font-control-inner { max-width: 900px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 2rem; flex-wrap: wrap; } .font-control-group { display: flex; align-items: center; gap: 0.6rem; } .font-control-group label { font-family: var(--font-inder); font-size: 15px; color: #444444; white-space: nowrap; user-select: none; } .font-control-swatch { width: 32px; height: 32px; border-radius: 4px; border: 2px solid #d0d0d0; cursor: pointer; padding: 0; overflow: hidden; background: none; transition: border-color var(--transition-fast); position: relative; } .font-control-swatch:hover { border-color: #333333; } .font-control-swatch input[type="color"] { position: absolute; top: -4px; left: -4px; width: calc(100% + 8px); height: calc(100% + 8px); border: none; padding: 0; cursor: pointer; opacity: 1; } .font-control-size { display: flex; align-items: center; gap: 0.5rem; } .font-size-btn { width: 28px; height: 28px; border-radius: 4px; border: 2px solid #d0d0d0; background-color: #f5f5f5; color: #333333; font-size: 18px; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color var(--transition-fast), background-color var(--transition-fast); user-select: none; flex-shrink: 0; } .font-size-btn:hover { border-color: #333333; background-color: #e8e8e8; } .font-size-display { font-family: var(--font-inder); font-size: 15px; color: #333333; min-width: 38px; text-align: center; user-select: none; } .font-control-reset { font-family: var(--font-inder); font-size: 14px; color: #888888; background: none; border: 2px solid #d0d0d0; border-radius: 4px; padding: 0.3rem 0.8rem; cursor: pointer; transition: border-color var(--transition-fast), color var(--transition-fast); white-space: nowrap; } .font-control-reset:hover { border-color: #333333; color: #333333; } /* === VIEW ALL BUTTON === */ .view-all-container { text-align: center; padding: 2rem 0; background-color: transparent; } .view-all-btn { display: inline-flex; align-items: center; gap: 1rem; padding: 0.75rem 1.5rem; border: 3px solid #f5f5f5; border-radius: 8px; font-family: var(--font-poppins); text-transform: uppercase; font-weight: 500; font-size: 1.1rem; color: #ffffff; background-color: #00753c; transition: var(--transition-slow); } .view-all-btn:hover { background-color: #005a2e; transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 117, 60, 0.4); } .arrow-icon { width: 28px; height: 28px; stroke: #ffffff; stroke-width: 3; fill: none; } /* === LOAD MORE BUTTON === */ .load-more-btn { display: inline-block; padding: 0.75rem 2rem; border: 3px solid #f5f5f5; border-radius: 8px; font-family: var(--font-poppins); text-transform: uppercase; font-weight: 500; font-size: 1.1rem; color: #ffffff; background-color: #00753c; transition: var(--transition-slow); } .load-more-btn:hover { background-color: #005a2e; transform: translateY(-5px); box-shadow: 0 8px 24px rgba(0, 117, 60, 0.4); } /* === FOOTER === */ .footer { background-color: #222222; color: #ffffff; } .footer-top { padding: var(--spacing-xl) var(--spacing-lg); background-color: #333333; } .footer-container { max-width: 1400px; margin: 0 auto; padding: 0 var(--spacing-lg); display: grid; grid-template-columns: repeat(4, 1fr); gap: 4rem; } .footer-column h3 { font-family: var(--font-inder); font-size: 21px; font-weight: 400; color: #ffffff; margin-bottom: 1.2rem; position: relative; display: block; white-space: nowrap; text-overflow: ellipsis; padding-bottom: 0.8rem; overflow: visible; border-bottom: 3px solid #F46A55; } .footer-column h3::after { display: none; } .footer-column h3 a { color: inherit; text-decoration: none; } .footer-column p { font-family: var(--font-open-sans); font-size: 18px; font-weight: 400; color: #ffffff; margin-top: var(--spacing-md); line-height: 1.6; } .footer-column ul { margin-top: var(--spacing-md); display: flex; flex-direction: column; gap: 0.75rem; } .footer-column ul li a { font-family: var(--font-open-sans); font-size: 18px; font-weight: 400; color: #ffffff; transition: var(--transition-fast); word-break: break-word; } .footer-column ul li a:hover { color: var(--white); } .social-icons { display: flex; gap: 1rem; margin-top: var(--spacing-md); } .social-icons a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; transition: var(--transition-fast); } .social-icons img { width: 100%; height: 100%; object-fit: contain; } .footer-bottom { padding: 1.5rem var(--spacing-lg); background-color: #222222; text-align: center; color: #ffffff; } /* === SECTIONS & CONTAINERS === */ .main-container { width: 85%; max-width: 1000px; margin: 2rem auto; background-color: #ffffff; padding: 3rem; border-radius: 20px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.08); border: none; } .blog-container, .faq-container { margin-top: 2rem; padding: 4rem 3rem; } .blog-container h2, .faq-container h2 { font-family: var(--font-noto-serif); font-weight: 700; font-size: 30px; color: #222222; margin-bottom: 2rem; text-align: left; } .blog-container p, .faq-container p { font-family: var(--font-inclusive-sans); font-size: 21px; color: #000000; line-height: 1.8; margin-bottom: 2rem; text-align: left; max-width: 95%; } /* Blog internal links */ .blog-link { color: #007DCD; text-decoration: underline; text-underline-offset: 3px; transition: color var(--transition-fast); } .blog-link:hover { color: #005fa3; } /* Blog ordered/unordered lists */ .blog-list { list-style-type: disc; padding-left: 1.75em; margin-bottom: 2rem; } .blog-list > li { font-family: var(--font-inclusive-sans); font-size: 21px; color: #000000; line-height: 1.8; margin-bottom: 1.4em; } .blog-sublist { list-style-type: circle; padding-left: 1.5em; margin-top: 1em; margin-bottom: 0.5em; } .blog-sublist > li { font-family: var(--font-inclusive-sans); font-size: 21px; color: #000000; line-height: 1.8; margin-bottom: 1em; } /* === FAQ SECTION === */ .faq-section { padding: 0; background-color: transparent; } .faq-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; margin-top: 3rem; } .faq-list { display: flex; flex-direction: column; gap: 2.5rem; } .faq-item { display: flex; gap: 1.5rem; align-items: stretch; } .faq-bracket { width: 10px; border-left: 5px solid #222222; border-top: 1px solid #222222; border-bottom: 1px solid #222222; border-radius: 6px 0 0 6px; opacity: 0.8; } .faq-content { flex: 1; } .faq-item h3 { font-family: var(--font-open-sans); font-weight: 600; font-size: 25px; color: #222222; margin-bottom: 0.75rem; } .faq-item p { margin-bottom: 0; } .static-container { max-width: 900px; margin: 0 auto; } .loading-placeholder { text-align: center; padding: 3rem; font-family: var(--font-poppins); color: var(--medium-grey); } /* === STATIC PAGES === */ .static-page { background-color: var(--off-white); min-height: calc(100vh - 400px); } .static-container h1 { font-family: var(--font-noto-serif); font-size: 35px; color: #222222; margin-bottom: 2rem; text-align: left; } .static-container h1::after { content: ''; display: block; width: 60px; height: 4px; background-color: var(--primary-green); margin-top: 10px; } .static-container p { font-family: var(--font-inclusive-sans); font-size: 21px; line-height: 1.8; margin-bottom: 1.5rem; color: #000000; } .static-container h2 { font-family: var(--font-noto-serif); font-size: 30px; margin: 2rem 0 1rem; color: #222222; } /* === ABOUT US PAGE === */ .about-reasons { display: flex; flex-direction: column; gap: 1.5rem; margin: 2rem 0 2.5rem; } .about-reason-card { background: #f7fdf9; border: 2px solid #d8efe1; border-radius: 12px; padding: 1.5rem; } .about-reason-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; } .about-reason-icon { flex-shrink: 0; width: 48px; height: 48px; background-color: #00753c; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .about-reason-icon svg { width: 22px; height: 22px; stroke: #ffffff; } .about-reason-text h3 { font-family: var(--font-noto-serif); font-size: 20px; font-weight: 700; color: #222222; margin: 0; line-height: 1.2; } .about-reason-text p { font-family: var(--font-inclusive-sans); font-size: 21px; color: #000000; line-height: 1.8; margin: 0; } .about-reason-card > p { font-family: var(--font-inclusive-sans); font-size: 21px; color: #000000; line-height: 1.8; margin: 0; } @media (max-width: 480px) { .about-reason-icon { width: 40px; height: 40px; } .about-reason-icon svg { width: 18px; height: 18px; } .about-reason-text h3 { font-size: 18px; } } /* === LEGAL PAGES (Privacy Policy, Terms of Use) === */ .legal-list { font-family: var(--font-inclusive-sans); font-size: 21px; color: #000000; line-height: 1.8; list-style: disc; margin: 0 0 2rem 2rem; padding: 0; } .legal-list li { margin-bottom: 0.4rem; padding-left: 0.25rem; } .legal-last-updated { font-family: var(--font-open-sans); font-size: 15px; color: #888888; margin-top: 2.5rem; margin-bottom: 0; } /* === CONTACT PAGE === */ .contact-email-card { display: flex; align-items: center; gap: 1.25rem; background: #f7fdf9; border: 2px solid #d8efe1; border-radius: 12px; padding: 1.25rem 1.75rem; margin: 1.5rem 0 2rem; width: fit-content; } .contact-email-icon { flex-shrink: 0; width: 44px; height: 44px; background-color: #00753c; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .contact-email-icon svg { width: 20px; height: 20px; stroke: #ffffff; } .contact-email-address { font-family: var(--font-open-sans); font-size: 19px; font-weight: 600; color: #007DCD; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; } .contact-email-address:hover { color: #005fa3; } @media (max-width: 480px) { .contact-email-card { width: 100%; padding: 1rem 1.25rem; } .contact-email-address { font-size: 16px; } } /* === TRANSLATOR SECTION === */ .translator-hero-box { padding: 3rem 2rem; } .translator-section { background-color: transparent; padding: 0 0 2rem; } .translator-container { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 1.5rem; background: transparent; padding: 1rem 2rem; align-items: stretch; width: 100%; box-sizing: border-box; } .translator-panel { display: flex; flex-direction: column; gap: 1rem; min-width: 0; width: 100%; box-sizing: border-box; } .panel-header-minimal { display: flex; justify-content: flex-end; height: 10px; margin-bottom: 0.5rem; } .char-count { position: absolute; bottom: 0.8rem; right: 1.2rem; font-size: 0.85rem; color: #333333; z-index: 10; pointer-events: none; } .textarea-wrapper { position: relative; width: 100%; } .clear-reset { position: absolute; right: 1.2rem; top: 1.2rem; font-size: 2.2rem; color: #333333; cursor: pointer; opacity: 0; visibility: hidden; transition: all var(--transition-fast); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; z-index: 5; } .clear-reset:hover { color: var(--primary-green); background-color: rgba(0, 150, 78, 0.05); } .clear-reset.visible { opacity: 1; visibility: visible; } .translator-textarea { width: 100%; height: 220px; padding: 1.8rem 4rem 1.8rem 1.8rem; border: 2px solid #d0d0d0; border-radius: 8px; font-family: var(--font-open-sans); font-size: 24px; font-weight: 400; line-height: 33px; color: #333333; resize: none; transition: border-color var(--transition-fast); background: #ffffff; overflow-y: auto; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .translator-textarea::placeholder { font-family: var(--font-open-sans); font-size: 24px; color: #999999; font-weight: 400; } .translator-output { width: 100%; height: 220px; padding: 1.8rem 3rem 3.5rem 1.8rem; border: 2px solid #d0d0d0; border-radius: 8px; background-color: #e8f5ed; font-family: 'Noto Sans Malayalam'; font-size: 24px; font-weight: 400; line-height: 33px; color: #333333; overflow: auto; overflow-y: auto; overflow-x: hidden; word-break: break-all; hyphens: auto; display: block; box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; resize: none; } .translator-interchange { display: flex; align-items: center; justify-content: center; color: var(--light-grey); padding: 0 0.5rem; } .translator-interchange svg { width: 28px; height: 28px; stroke: #333333; stroke-width: 2; fill: none; } .output-container-relative { position: relative; width: 100%; min-width: 0; box-sizing: border-box; } .output-actions-minimal { position: absolute; right: 1.2rem; bottom: 0.8rem; display: flex; gap: 0.8rem; opacity: 0; visibility: hidden; transition: all var(--transition-fast); z-index: 10; } .output-actions-minimal.visible { opacity: 1; visibility: visible; } .icon-action-btn { background: transparent; border: none; padding: 0.6rem; cursor: pointer; color: #333333; transition: all var(--transition-fast); display: flex; align-items: center; justify-content: center; border-radius: 50%; width: 44px; height: 44px; } .icon-action-btn:hover { color: var(--primary-green); background-color: rgba(0, 150, 78, 0.05); } .icon-action-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; } .panel-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 0.5rem; } .action-btn { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 1.2rem; background-color: var(--white); border: 2px solid var(--medium-grey); border-radius: 6px; font-family: var(--font-poppins); font-size: 0.85rem; font-weight: 600; color: var(--medium-grey); cursor: pointer; transition: all var(--transition-fast); } .action-btn:hover { border-color: var(--primary-green); color: var(--primary-green); } .action-btn.primary { background-color: var(--primary-green); border-color: var(--primary-green); color: white; } .action-btn.primary:hover { background-color: #008f4a; transform: translateY(-2px); } .action-btn svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2; fill: none; } /* === ALPHABET GUIDE === */ .letter-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin: 2rem 0; } .letter-card { background-color: #e8f5ed; border: 2px solid #eef2f5; border-radius: 12px; padding: 1.2rem; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); transition: none; min-width: 0; overflow: hidden; width: 100%; } .letter-card:hover { transform: none; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02); border-color: #eef2f5; } .letter-main { font-family: var(--font-noto-serif); font-size: 2.2rem; color: var(--black); margin-bottom: 0.25rem; font-weight: 700; max-width: 100%; word-break: break-all; } .letter-sub { font-family: var(--font-inclusive-sans); font-style: normal; font-size: 0.95rem; color: var(--medium-grey); } .vowel-sign-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-top: 2rem; } .vowel-sign-card { padding: 1rem; border: 1px dashed var(--light-grey); border-radius: 8px; text-align: center; background: #fdfdfd; display: flex; flex-direction: column; align-items: center; } .vowel-sign-main { font-size: 1.8rem; color: var(--primary-green); margin-bottom: 0.25rem; } .use-case-box { background-color: #f8fbf9; border-left: 4px solid var(--primary-green); padding: 1rem 1.5rem; margin: 1.5rem 0; border-radius: 0 8px 8px 0; display: inline-block; width: 100%; box-sizing: border-box; } .use-case-label { display: block; font-family: var(--font-open-sans); font-style: italic; font-size: 21px; font-weight: 600; margin-bottom: 0.75rem; color: var(--primary-green); } /* === INFO / BLOG / FAQ SECTIONS === */ .info-section { background-color: transparent; padding: 0; } .info-container { max-width: 900px; margin: 0 auto; } .info-container h2 { font-family: var(--font-noto-serif); font-size: 30px; margin-bottom: 3rem; color: #222222; position: relative; display: inline-block; } .info-container h2::after { content: ''; position: absolute; bottom: -10px; left: 0; width: 60px; height: 4px; background-color: var(--primary-green); } .info-content { margin-top: 1rem; line-height: 1.8; color: #444; } .info-content p, .info-content ul li { margin-bottom: 1.5rem; font-size: 21px; font-family: var(--font-inclusive-sans); } .translation-page h2, .blog-container h2, .info-section h2, .faq-section h2 { font-family: var(--font-noto-serif); font-size: 30px; font-weight: 700; color: #222222; margin-top: 0; margin-bottom: 2rem; text-align: left; } /* General H3 for all info/blog sections — letters page overrides below */ .info-section h3, .blog-container h3 { font-family: var(--font-open-sans); font-size: 25px; font-weight: 600; color: #222222; margin-top: 2rem; margin-bottom: 1.5rem; } .letters-page h1 { font-family: var(--font-noto-serif); font-size: 35px; } .letters-page .info-section h3 { font-family: var(--font-open-sans); font-style: italic; font-size: 25px; font-weight: 600; color: #00753c; margin-bottom: 2rem; } .faq-section h3 { font-family: var(--font-open-sans); font-style: normal; font-size: 25px; color: var(--black); } /* === COPY NOTIFICATION === */ .copy-notification { position: fixed; bottom: 40px; right: 60px; background-color: #545454; color: #ffffff; padding: 0.8rem 1.5rem; border-radius: 6px; font-family: var(--font-open-sans); font-size: 18px; font-weight: 500; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1000; animation: slideInUp 0.3s ease-out, slideOutDown 0.3s ease-in 1.7s forwards; } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideOutDown { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(20px); } } /* =========================================== RESPONSIVE — Tablet / Large Phone (≤ 768px) =========================================== */ @media (max-width: 850px) { .translator-container { grid-template-columns: 1fr; padding: 0; } .translator-textarea, .translator-output { height: 200px; } } /* =========================================== RESPONSIVE — Tablet landscape / small laptop (≤ 1024px) =========================================== */ @media (max-width: 1024px) { /* 4-column footer collapses to 2×2 grid */ .footer-container { grid-template-columns: 1fr 1fr; gap: 2.5rem; } .footer-top { padding: 3rem 2rem; } /* Letter grid: 5 columns is too wide on 768–820px tablets — switch to 4 */ .letter-grid { grid-template-columns: repeat(4, 1fr); } /* Ensure letter page containers sit centred with equal margins */ .letters-page .main-container { width: 90%; margin: 2rem auto; } } @media (max-width: 768px) { /* --- Header & Nav --- */ .nav-desktop { display: none; } .hamburger { display: flex; padding: 8px; /* larger tap target */ margin-left: auto; } .hamburger span { width: 30px; height: 3px; } .logo { height: 60px; /* smaller logo to keep header compact */ } .nav-mobile { width: 280px; /* narrower so it fits on 320px phones */ max-width: 85vw; /* never wider than 85% of any screen */ } /* --- Hero --- */ .hero { padding: 1.5rem 1rem; } .hero h1, .translation-page h1, .letters-page h1, .static-container h1 { font-size: 1.55rem; line-height: 1.3; } .hero-tagline, .translation-page .hero-tagline { font-size: 0.90rem; } /* --- Input box --- */ .input-box, .input-box::placeholder { font-size: 18px; line-height: 1.5; padding: 1rem 1.25rem; } /* --- Sections & containers --- */ .main-container { width: 96%; padding: 1.75rem 1.25rem; } .blog-container, .faq-container { padding: 2rem 1.25rem; } /* --- Headings --- */ .hero h1, .blog-container h2, .faq-container h2, .translation-page h2, .info-section h2, .faq-section h2, .static-container h2, .info-container h2, .font-display-section h2 { font-size: 1.45rem; } .faq-item h3, .faq-section h3, .info-section h3, .blog-container h3, .letters-page .info-section h3 { font-size: 1.05rem; } /* --- Blog text --- */ .blog-container p, .faq-container p, .info-content p, .static-container p, .blog-list > li, .blog-sublist > li, .legal-list li { font-size: 18px; } .blog-list { padding-left: 1.25em; } /* --- Font control bar --- */ .font-control-bar { padding: 0.6rem 1rem; } .font-control-inner { gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .font-control-group label { font-size: 13px; } /* --- Font card --- */ .font-card { min-height: 200px; } .font-name { font-size: 18px; } .font-card-display { font-size: 21px; padding: 1.25rem 1rem; min-height: 90px; } .font-card-download { padding: 1rem 0.75rem; gap: 0.75rem; } .canva-btn { font-size: 0.85rem; padding: 0.4rem 0.6rem; min-width: 0; } .btn-format-short, .btn-format-wide { min-width: 0; padding: 0.4rem 0.6rem; } .icon-btn { width: 38px; height: 38px; } .icon-btn svg { width: 20px; height: 20px; } /* --- Load more / View all buttons --- */ .load-more-btn, .view-all-btn { font-size: 0.9rem; padding: 0.65rem 1.25rem; } /* --- Font display section --- */ .font-cards-container { gap: 2rem; } /* --- Letter grids (letters page) --- */ .letter-grid, .vowel-sign-grid { grid-template-columns: repeat(3, 1fr); } .letter-main { font-size: 1.6rem; } .use-case-box { padding: 1rem; } /* --- Footer --- */ .footer-container { grid-template-columns: 1fr; gap: 2rem; } .footer-top { padding: 2rem 1.25rem; } } /* =========================================== RESPONSIVE — Small Phone (≤ 480px) =========================================== */ @media (max-width: 480px) { /* --- Header --- */ .logo { height: 50px; } .hamburger span { width: 26px; height: 2.5px; } .nav-mobile { width: 100vw; /* full-width drawer on tiny phones */ max-width: 100vw; padding: 5rem 1.5rem 2rem; } /* --- Hero --- */ .hero h1, .translation-page h1, .letters-page h1, .static-container h1 { font-size: 1.35rem; } .hero-tagline, .translation-page .hero-tagline { font-size: 0.85rem; } /* --- Containers --- */ .main-container { width: 100%; padding: 1.25rem 1rem; border-radius: 12px; } .blog-container, .faq-container { padding: 1.5rem 1rem; } /* --- Headings --- */ .blog-container h2, .faq-container h2, .translation-page h2, .info-section h2, .faq-section h2, .static-container h2, .info-container h2, .font-display-section h2 { font-size: 1.2rem; } .faq-item h3, .faq-section h3, .info-section h3, .blog-container h3, .letters-page .info-section h3 { font-size: 1rem; } /* --- Blog text --- */ .blog-container p, .faq-container p, .info-content p, .static-container p, .blog-list > li, .blog-sublist > li, .legal-list li { font-size: 17px; } /* --- Font card --- */ .font-card { min-height: 180px; } .font-name { font-size: 16px; } .font-card-title { padding: 0.6rem 1rem; } .font-card-display { font-size: 18px; padding: 1rem 0.75rem; min-height: 80px; } .font-card-download { padding: 0.75rem 0.75rem; gap: 0.5rem; flex-wrap: wrap; } .canva-btn { font-size: 0.8rem; padding: 0.35rem 0.5rem; } /* --- Font control bar --- */ .font-control-inner { gap: 0.6rem; } .font-control-group label { font-size: 12px; } .font-control-swatch { width: 26px; height: 26px; } /* --- Letter grids --- */ .letter-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .vowel-sign-grid { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; } .letter-main { font-size: 1.4rem; } /* --- Footer --- */ .footer-container { grid-template-columns: 1fr; gap: 1.5rem; } .footer-top { padding: 1.5rem 1rem; } .footer-column h3 { font-size: 18px; } .footer-column ul li a, .footer-column p { font-size: 15px; } /* --- Load more / View all --- */ .load-more-btn, .view-all-btn { font-size: 0.85rem; padding: 0.6rem 1rem; } /* --- Letters page info text --- */ .letters-page .info-content p, .letters-page .info-content ul li { font-size: 17px; } /* --- Copy notification --- */ .copy-notification { bottom: 20px; right: 16px; font-size: 15px; padding: 0.65rem 1rem; } }