/* ============================================================ HARUMONG — SHARED STYLES Hand-written replacement for the Tailwind CDN build, shared by all HaruMong pages (EN + KO: landing, privacy, terms, support). Warm, soft "habit companion" aesthetic. Fonts (Quicksand, Material Symbols) are still loaded from Google Fonts via in each page's . Breakpoint: md = 768px. Corner radii follow the original Tailwind config overrides: rounded-lg = 1.5rem (24px), rounded-xl = 2.5rem (40px), rounded-2xl = 1rem (16px, Tailwind default), rounded-full = 9999px. ============================================================ */ :root { --hm-bg: #fff9f0; --hm-scl: #ffffff; /* surface-container-lowest */ --hm-sc-low: #f9f3ea; --hm-sc: #f3ede4; --hm-sc-high: #ede7df; --hm-surface-variant: #e7e2d9; --hm-on-surface: #1d1b16; --hm-on-surface-variant: #424848; --hm-outline: #727878; --hm-outline-variant: #c2c8c7; --hm-primary: #516161; --hm-primary-container: #e0f2f1; --hm-primary-fixed: #d4e6e5; --hm-primary-fixed-dim: #b8cac9; --hm-on-primary: #ffffff; --hm-on-primary-fixed: #0e1e1e; --hm-secondary: #9e4039; --hm-secondary-fixed: #ffdad6; --hm-on-secondary: #ffffff; --hm-tertiary: #7e570f; --hm-tertiary-container: #ffebd3; --hm-tertiary-fixed-dim: #f2be6e; --hm-error: #ba1a1a; --hm-font: 'Quicksand', -apple-system, BlinkMacSystemFont, sans-serif; --hm-soft-shadow: 0 15px 30px -5px rgba(139, 94, 60, 0.08); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } .hm-body { margin: 0; background: var(--hm-bg); color: var(--hm-on-surface); font-family: var(--hm-font); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* :where() keeps these element resets at zero specificity, the way Tailwind's Preflight did. Written plainly (.hm-body a { … }) they score (0,1,1) and silently outrank every single-class rule below. */ :where(.hm-body) :where(img) { display: block; max-width: 100%; } :where(.hm-body) :where(a) { color: inherit; text-decoration: none; } :where(.hm-body) :where(h1, h2, h3, h4, p) { margin: 0; } :where(.hm-body) :where(ul, ol) { margin: 0; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } /* ---------- Helpers ---------- */ .hm-squishy:active { transform: scale(0.95); transition: transform 0.15s ease-in-out; } .hm-soft-shadow { box-shadow: var(--hm-soft-shadow); } .hm-noscroll { -ms-overflow-style: none; scrollbar-width: none; } .hm-noscroll::-webkit-scrollbar { display: none; } .hm-ico-15 { font-size: 15px; } .hm-ico-16 { font-size: 16px; } .hm-ico-18 { font-size: 18px; } .hm-t-primary { color: var(--hm-primary); } .hm-t-secondary { color: var(--hm-secondary); } .hm-t-error { color: var(--hm-error); } .hm-t-tertiary { color: var(--hm-tertiary); } .hm-t-tertiary-dim { color: var(--hm-tertiary-fixed-dim); } .hm-t-outline { color: var(--hm-outline); } /* ============================================================ NAVIGATION (shared) ============================================================ */ .hm-nav { position: fixed; top: 0; width: 100%; z-index: 50; background: rgba(255, 249, 240, 0.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .hm-nav-inner { display: flex; justify-content: space-between; align-items: center; padding: 0 2rem; height: 5rem; max-width: 1440px; margin: 0 auto; } .hm-nav-left { display: flex; align-items: center; gap: 1.25rem; } .hm-back { display: none; align-items: center; gap: 0.375rem; color: var(--hm-on-surface-variant); font-size: 0.875rem; font-weight: 600; transition: color 0.2s; } .hm-back:hover { color: var(--hm-primary); } .hm-vdivider { width: 1px; height: 1.25rem; background: var(--hm-outline-variant); display: none; } .hm-brand { display: flex; align-items: center; gap: 0.625rem; } .hm-brand-icon { width: 2rem; height: 2rem; border-radius: 22%; } .hm-brand-name { font-weight: 700; font-size: 1.25rem; color: var(--hm-primary); } a.hm-brand-name { transition: color 0.2s; } a.hm-brand-name:hover { color: rgba(81, 97, 97, 0.8); } .hm-nav-links { display: none; gap: 2rem; align-items: center; } .hm-nav-link { color: var(--hm-on-surface-variant); font-weight: 600; font-size: 0.875rem; transition: color 0.2s; } .hm-nav-link:hover { color: var(--hm-primary); } .hm-nav-right { display: flex; align-items: center; gap: 1rem; } .hm-lang { display: none; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; } .hm-lang-active { color: var(--hm-primary); font-weight: 700; } .hm-lang-sep { color: var(--hm-outline-variant); user-select: none; } .hm-lang a { color: var(--hm-on-surface-variant); transition: color 0.2s; } .hm-lang a:hover { color: var(--hm-primary); } .hm-download-btn { padding: 0.625rem 1.5rem; background: var(--hm-secondary); color: var(--hm-on-secondary); border-radius: 9999px; font-weight: 700; font-size: 0.875rem; transition: background-color 0.2s; } .hm-download-btn:hover { background: rgba(158, 64, 57, 0.9); } @media (min-width: 768px) { .hm-nav-inner { padding-left: 4rem; padding-right: 4rem; } .hm-back { display: inline-flex; } .hm-vdivider { display: block; } .hm-nav-links { display: flex; } .hm-lang { display: flex; } } /* ============================================================ HERO (landing) ============================================================ */ .hm-hero { padding: 9rem 2rem 3rem; max-width: 1440px; margin: 0 auto; } .hm-hero-inner { max-width: 640px; } .hm-hero-inner > * + * { margin-top: 2rem; } .hm-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; background: var(--hm-primary-container); border-radius: 9999px; color: var(--hm-on-primary-fixed); font-weight: 600; font-size: 0.875rem; } .hm-badge .material-symbols-outlined { font-size: 18px; color: var(--hm-primary); } .hm-hero-title { font-weight: 700; font-size: 56px; line-height: 1.25; color: var(--hm-on-surface); } .hm-hero-title .hm-accent { color: var(--hm-secondary); } .hm-hero-lead { font-size: 1.125rem; color: var(--hm-on-surface-variant); line-height: 1.625; font-weight: 500; } .hm-hero-actions { display: flex; flex-wrap: wrap; gap: 1rem; } .hm-cta-lg { display: inline-flex; align-items: center; gap: 0.75rem; padding: 1rem 2rem; background: var(--hm-secondary); color: var(--hm-on-secondary); border-radius: 9999px; font-weight: 700; font-size: 1.125rem; transition: background-color 0.2s; } .hm-cta-lg:hover { background: rgba(158, 64, 57, 0.9); } @media (min-width: 768px) { .hm-hero { padding-left: 4rem; padding-right: 4rem; } .hm-hero-title { font-size: 64px; } } /* ============================================================ SECTIONS (landing) ============================================================ */ .hm-container { max-width: 1440px; margin: 0 auto; padding: 0 2rem; } .hm-section-head { text-align: center; margin-bottom: 4rem; } .hm-section-head h2 { font-weight: 700; font-size: 36px; color: var(--hm-on-surface); } .hm-section-head p { font-size: 1.125rem; color: var(--hm-on-surface-variant); font-weight: 500; margin-top: 0.5rem; } .hm-how { padding: 5rem 0; background: var(--hm-sc-low); } .hm-how-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .hm-how-card { background: #fff; padding: 2rem; border-radius: 40px; border: 1px solid rgba(194, 200, 199, 0.2); box-shadow: var(--hm-soft-shadow); display: flex; flex-direction: column; align-items: center; text-align: center; transition: transform 0.3s; } .hm-how-card:hover { transform: scale(1.02); } .hm-how-icon { width: 4rem; height: 4rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.5rem; } .hm-how-icon .material-symbols-outlined { font-size: 32px; } .hm-how-icon--primary { background: var(--hm-primary-container); color: var(--hm-primary); } .hm-how-icon--secondary { background: var(--hm-secondary-fixed); color: var(--hm-secondary); } .hm-how-icon--tertiary { background: var(--hm-tertiary-container); color: var(--hm-tertiary); } .hm-how-card h3 { font-weight: 700; font-size: 22px; margin-bottom: 0.75rem; } .hm-how-card p { color: var(--hm-on-surface-variant); font-weight: 500; } .hm-pers { padding: 5rem 2rem; max-width: 1440px; margin: 0 auto; } .hm-pers-head { margin-bottom: 3rem; } .hm-pers-head h2 { font-weight: 700; font-size: 36px; color: var(--hm-on-surface); } .hm-pers-head p { font-size: 1.125rem; color: var(--hm-on-surface-variant); font-weight: 500; margin-top: 0.5rem; } .hm-pers-track { display: flex; gap: 1.25rem; overflow-x: auto; padding-bottom: 1rem; } .hm-pers-card { min-width: 270px; background: #fff; padding: 2rem; border-radius: 40px; border: 1px solid rgba(194, 200, 199, 0.3); box-shadow: var(--hm-soft-shadow); display: flex; flex-direction: column; align-items: center; text-align: center; transition: border-color 0.3s; } .hm-pers-card:not(.hm-pers-card--featured):hover { border-color: var(--hm-primary-fixed-dim); } .hm-pers-card--featured { border: 2px solid var(--hm-primary-container); } .hm-pers-icon { font-size: 48px; margin-bottom: 1rem; } .hm-pers-card h4 { font-weight: 700; font-size: 20px; margin-bottom: 0.5rem; } .hm-pers-card > p { color: var(--hm-on-surface-variant); font-weight: 500; font-size: 0.875rem; margin-bottom: 1rem; } .hm-pers-freq { padding: 0.375rem 1rem; background: var(--hm-sc); color: var(--hm-on-surface-variant); border-radius: 9999px; font-weight: 600; font-size: 0.875rem; transition: background-color 0.3s, color 0.3s; } .hm-pers-card:hover .hm-pers-freq { background: var(--hm-primary-container); color: var(--hm-on-primary-fixed); } .hm-shots { padding: 3rem 0; background: rgba(224, 242, 241, 0.2); } .hm-shots-head { padding: 0 2rem; margin-bottom: 1rem; } .hm-shots-head h2 { font-weight: 700; font-size: 28px; color: var(--hm-on-surface); } .hm-shots-track { display: flex; gap: 1rem; overflow-x: auto; padding: 0 2rem 1.5rem; } .hm-shot { width: 200px; border-radius: 24px; flex-shrink: 0; box-shadow: var(--hm-soft-shadow); } .hm-cta-section { padding: 4rem 2rem; } .hm-cta-card { max-width: 740px; margin: 0 auto; border-radius: 16px; overflow: hidden; position: relative; background: linear-gradient(135deg, #3d5252 0%, #516161 55%, #6b7a6e 100%); box-shadow: var(--hm-soft-shadow); } .hm-cta-blob-1 { position: absolute; top: -2rem; right: -2rem; width: 12rem; height: 12rem; background: rgba(255, 255, 255, 0.05); border-radius: 9999px; pointer-events: none; } .hm-cta-blob-2 { position: absolute; bottom: -2.5rem; left: -1.5rem; width: 10rem; height: 10rem; background: rgba(0, 0, 0, 0.1); border-radius: 9999px; pointer-events: none; } .hm-cta-inner { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 2.25rem 2.5rem; } .hm-cta-text { color: #fff; text-align: center; } .hm-cta-text h2 { font-weight: 700; font-size: 26px; line-height: 1.375; margin-bottom: 0.375rem; } .hm-cta-text p { color: rgba(255, 255, 255, 0.7); font-weight: 500; font-size: 15px; } .hm-cta-white-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.5rem; background: #fff; color: var(--hm-primary); border-radius: 9999px; font-weight: 700; font-size: 0.875rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); transition: background-color 0.2s; } .hm-cta-white-btn:hover { background: var(--hm-sc-low); } .hm-cta-white-btn .material-symbols-outlined { font-size: 18px; } @media (min-width: 768px) { .hm-container { padding-left: 4rem; padding-right: 4rem; } .hm-how-grid { grid-template-columns: repeat(3, 1fr); } .hm-pers { padding-left: 4rem; padding-right: 4rem; } .hm-shots-head { padding-left: 4rem; padding-right: 4rem; } .hm-shots-track { padding-left: 4rem; padding-right: 4rem; } .hm-cta-inner { flex-direction: row; } .hm-cta-text { text-align: left; } } /* ============================================================ FOOTER (shared) ============================================================ */ .hm-footer { background: var(--hm-sc); border-top: 1px solid rgba(194, 200, 199, 0.3); padding: 3rem 0; } .hm-footer-inner { display: flex; flex-direction: column; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 0 2rem; max-width: 1440px; margin: 0 auto; } .hm-footer-brand { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .hm-footer-brand-row { display: flex; align-items: center; gap: 0.5rem; } .hm-footer-brand-row img { width: 1.5rem; height: 1.5rem; border-radius: 22%; } .hm-footer-brand-row span { font-weight: 700; font-size: 1.25rem; color: var(--hm-primary); } .hm-footer-icon { width: 1.5rem; height: 1.5rem; border-radius: 22%; } .hm-footer-brandname { font-weight: 700; font-size: 1.25rem; color: var(--hm-primary); } .hm-footer-by { color: var(--hm-on-surface-variant); font-size: 0.875rem; font-weight: 500; } .hm-footer-by a { transition: color 0.2s; } .hm-footer-by a:hover { color: var(--hm-primary); } .hm-footer-copy { color: var(--hm-on-surface-variant); font-size: 0.875rem; font-weight: 500; margin-top: 0.25rem; } .hm-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; } .hm-footer-links a { color: var(--hm-on-surface-variant); font-weight: 600; font-size: 0.875rem; transition: color 0.2s; } .hm-footer-links a:hover { color: var(--hm-secondary); } .hm-footer-links a.is-active { color: var(--hm-primary); font-weight: 700; } @media (min-width: 768px) { .hm-footer-inner { flex-direction: row; padding-left: 4rem; padding-right: 4rem; } .hm-footer-brand { align-items: flex-start; } } /* ============================================================ PAGE HEADER (legal / support) ============================================================ */ .hm-pagehead { background: rgba(224, 242, 241, 0.25); border-bottom: 1px solid rgba(194, 200, 199, 0.2); } .hm-pagehead-inner { max-width: 860px; margin: 0 auto; padding: 8rem 2rem 2.5rem; } .hm-back-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; color: var(--hm-on-surface-variant); font-weight: 600; transition: color 0.2s; margin-bottom: 1.25rem; } .hm-back-link:hover { color: var(--hm-primary); } .hm-back-link .material-symbols-outlined { font-size: 15px; } .hm-pagehead h1 { font-weight: 700; font-size: 38px; color: var(--hm-on-surface); line-height: 1.25; } .hm-pagehead-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 0.75rem; } .hm-pagehead-meta { font-size: 0.875rem; color: var(--hm-on-surface-variant); font-weight: 500; } .hm-pagehead-sep { color: var(--hm-outline-variant); } .hm-lang-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.75rem; background: #fff; border-radius: 9999px; font-size: 0.875rem; font-weight: 700; color: var(--hm-primary); border: 1px solid rgba(194, 200, 199, 0.4); transition: border-color 0.2s; box-shadow: var(--hm-soft-shadow); } .hm-lang-pill:hover { border-color: var(--hm-primary); } .hm-pagehead-sub { color: var(--hm-on-surface-variant); font-weight: 500; margin-top: 0.75rem; font-size: 1rem; line-height: 1.625; } .hm-pagehead-sub a { color: var(--hm-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(158, 64, 57, 0.4); transition: text-decoration-color 0.15s; } .hm-pagehead-sub a:hover { text-decoration-color: var(--hm-secondary); } .hm-pagehead-sub-link { color: var(--hm-secondary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(158, 64, 57, 0.4); transition: text-decoration-color 0.15s; } .hm-pagehead-sub-link:hover { text-decoration-color: var(--hm-secondary); } @media (min-width: 768px) { .hm-pagehead-inner { padding-left: 4rem; padding-right: 4rem; } .hm-pagehead h1 { font-size: 44px; } } /* ============================================================ CONTENT + PROSE (legal / support) ============================================================ */ .hm-content { max-width: 860px; margin: 0 auto; padding: 3.5rem 2rem; } .hm-legal h2 { font-size: 1.25rem; font-weight: 700; color: var(--hm-primary); margin-top: 2.75rem; margin-bottom: 0.875rem; padding-top: 1.75rem; border-top: 1px solid rgba(194, 200, 199, 0.45); } .hm-legal h2:first-child { border-top: none; padding-top: 0; margin-top: 0; } .hm-legal h3 { font-size: 1.0625rem; font-weight: 700; color: var(--hm-on-surface); margin-top: 1.75rem; margin-bottom: 0.5rem; } .hm-legal h4 { font-size: 0.9375rem; font-weight: 600; color: var(--hm-on-surface-variant); margin-top: 1.25rem; margin-bottom: 0.375rem; } .hm-legal p { color: var(--hm-on-surface-variant); font-weight: 500; line-height: 1.8; margin-bottom: 0.875rem; } .hm-legal ul, .hm-legal ol { padding-left: 1.375rem; margin-bottom: 0.875rem; color: var(--hm-on-surface-variant); font-weight: 500; line-height: 1.8; } .hm-legal ul { list-style-type: disc; } .hm-legal ol { list-style-type: decimal; } .hm-legal li { margin-bottom: 0.2rem; } .hm-legal a { color: var(--hm-secondary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(158, 64, 57, 0.4); transition: text-decoration-color 0.15s; } .hm-legal a:hover { text-decoration-color: var(--hm-secondary); } .hm-legal strong { font-weight: 700; color: var(--hm-on-surface); } .hm-faq h3 { display: inline-block; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--hm-primary); background: var(--hm-primary-container); padding: 0.25rem 0.75rem; border-radius: 9999px; margin-top: 3rem; margin-bottom: 1.25rem; } .hm-faq h4 { font-size: 1rem; font-weight: 700; color: var(--hm-on-surface); margin-top: 1.5rem; margin-bottom: 0.375rem; } .hm-faq p { color: var(--hm-on-surface-variant); font-weight: 500; line-height: 1.8; margin-bottom: 0.625rem; } .hm-faq ul, .hm-faq ol { padding-left: 1.375rem; margin-bottom: 0.75rem; color: var(--hm-on-surface-variant); font-weight: 500; line-height: 1.8; } .hm-faq ul { list-style-type: disc; } .hm-faq ol { list-style-type: decimal; } .hm-faq li { margin-bottom: 0.2rem; } .hm-faq strong { font-weight: 700; color: var(--hm-on-surface); } .hm-faq a { color: var(--hm-secondary); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(158, 64, 57, 0.4); transition: text-decoration-color 0.15s; } .hm-faq a:hover { text-decoration-color: var(--hm-secondary); } /* Support contact blocks */ .hm-support-contact { margin-top: 4rem; border-radius: 40px; background: var(--hm-sc-low); border: 1px solid rgba(194, 200, 199, 0.3); box-shadow: var(--hm-soft-shadow); padding: 2rem; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; justify-content: space-between; } .hm-support-contact-title { font-weight: 700; font-size: 18px; color: var(--hm-on-surface); margin-bottom: 0.25rem; } .hm-support-contact-desc { color: var(--hm-on-surface-variant); font-weight: 500; font-size: 0.875rem; line-height: 1.625; } .hm-email-btn { flex-shrink: 0; display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--hm-secondary); color: var(--hm-on-secondary); border-radius: 9999px; font-weight: 700; font-size: 0.875rem; transition: background-color 0.2s; } .hm-email-btn:hover { background: rgba(158, 64, 57, 0.9); } .hm-email-btn .material-symbols-outlined { font-size: 18px; } .hm-feedback { margin-top: 1.5rem; border-radius: 40px; background: rgba(255, 235, 211, 0.4); border: 1px solid rgba(194, 200, 199, 0.2); padding: 1.5rem 2rem; } .hm-feedback p { color: var(--hm-on-surface-variant); font-weight: 500; font-size: 0.875rem; line-height: 1.625; } /* scoped so it outranks the .hm-feedback p default above */ .hm-feedback .hm-feedback-title { font-weight: 700; font-size: 15px; color: var(--hm-on-surface); margin-bottom: 0.25rem; } @media (min-width: 768px) { .hm-content { padding-left: 4rem; padding-right: 4rem; } .hm-support-contact { flex-direction: row; align-items: center; } }