/* * TeachMe brand layer — loaded last on every front-end page. * One source for colour, type scale, buttons, links and icons, so theme templates, * homepage sections and TeachMe Essentials forms look the same everywhere. * Colours come from theme.json; change them there and here together. */ /* ---------- 1. Tokens ---------- */ :root { /* Colour */ --tm-navy: #071147; /* headings, primary buttons */ --tm-navy-hover: #1B2873; /* Teal family consolidated 2026-10-20 on the logo colour (was #0AAA98, #0990A1, #088C7D, #1A8C84, #2BBFB3). */ --tm-logo: #389C94; /* logo teal: fills, illustrations, icons on navy */ --tm-mint: #389C94; /* accent fills = logo teal */ --tm-mint-dark: #2E8780; --tm-teal: #389C94; --tm-mint-light: #62DECD; /* small accents on navy only */ --tm-mint-soft: #E6F6F4; /* icon tiles, soft buttons */ --tm-mint-text: #07796C; /* links and icons on white (AA) */ --tm-teal-text: #07796C; /* one text teal (was #067C8B) */ --tm-text: #363636; --tm-muted: #5F5F5F; --tm-line: #E9E9E9; --tm-bg-alt: #F7F7F7; --tm-white: #FFFFFF; --tm-danger: #D81814; /* Type */ --tm-font: Manrope, Arial, sans-serif; --tm-display: Manrope, Arial, sans-serif; /* Type scale: single source is theme.json (settings.typography.fontSizes). Do not hard-code sizes elsewhere. */ --tm-fs-h1: var(--wp--preset--font-size--tm-title, clamp(28px, 1.4vw + 22px, 40px)); --tm-fs-h2: var(--wp--preset--font-size--tm-heading, clamp(24px, 0.9vw + 19px, 32px)); --tm-fs-h3: var(--wp--preset--font-size--tm-subheading, 20px); --tm-fs-h4: 17px; --tm-fs-lead: var(--wp--preset--font-size--tm-lead, 18px); --tm-fs-body: var(--wp--preset--font-size--tm-body, 16px); --tm-fs-small: var(--wp--preset--font-size--tm-caption, 14px); --tm-fs-xs: var(--wp--preset--font-size--tm-small, 12px); /* smallest size used anywhere */ /* Shape */ --tm-radius-btn: 8px; --tm-radius-card: 12px; --tm-radius-panel: 16px; --tm-btn-height: 44px; --tm-icon: 24px; --tm-focus: 0 0 0 3px color-mix(in srgb, var(--tm-mint) 45%, transparent); } /* ---------- 2. Typography ---------- */ body { font-family: var(--tm-font); color: var(--tm-text); } /* Content pasted from the old site carries inline Arial/Helvetica. */ main [style*="font-family"] { font-family: inherit !important; } main [style*="color: rgb(31, 42, 68)"], main [style*="color:#1f2a44"] { color: var(--tm-navy) !important; } main h1, main h2, main h3, main h4, main h5, main h6 { font-family: var(--tm-display); font-weight: 700; letter-spacing: -0.01em; } /* Navy headings, except inside the Wellbeing landing (page 15365), whose headings inherit white from its dark sections. */ main :where(h1, h2, h3, h4, h5, h6):not(:where(.tm-page-15365 *)) { color: var(--tm-navy); font-weight: 700; letter-spacing: -0.01em; } /* H1 — page titles share one size; the homepage hero keeps its larger display size. */ main h1, .tm-page-title, h1.wp-block-post-title, .title-border-bottom { font-size: var(--tm-fs-h1); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; } /* H2 — section headings (content pages and homepage sections). */ .entry-content h2, .wp-block-post-content h2, .tm-content h2, .s2-header h2, .s4-header h2, #subjects .tm-home-heading h2, .tm-home-heading h2, .tm-profile-layout h2 { font-size: var(--tm-fs-h2); line-height: 1.25; font-weight: 700; letter-spacing: -0.02em; color: var(--tm-navy); } .s2-header h2 em { font-style: normal; color: var(--tm-mint-text); } /* H3 / H4 — card and sub-section titles. */ .entry-content h3, .wp-block-post-content h3, .s2-card h3, .s4-step-content h3, .tm-step-title { font-size: var(--tm-fs-h3); line-height: 1.35; font-weight: 700; color: var(--tm-navy); } .s2-card h3, .s4-step-content h3, .tm-step-title { font-size: 18px; } .entry-content h4, .wp-block-post-content h4 { font-size: var(--tm-fs-h4); line-height: 1.4; } /* Body copy in long-form content. */ .entry-content p, .entry-content li, .wp-block-post-content p, .wp-block-post-content li { font-size: var(--tm-fs-body); line-height: 1.65; color: var(--tm-text); } /* Eyebrows / small labels: one style, never below 12px. */ .s2-eyebrow, .s4-eyebrow, .s4-step-tag, .tm-hero-tagline, .tm-eyebrow { font-family: var(--tm-font); font-size: var(--tm-fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-mint-text); } .tm-bubble-subject { font-size: var(--tm-fs-xs); } .s2-stats .num { font-family: var(--tm-display); font-weight: 700; color: var(--tm-navy); } .s2-stats .num span { color: var(--tm-mint-text); } /* ---------- 3. Links ---------- */ .entry-content a:not([class]), .wp-block-post-content a:not([class]), .tme-panel a:not([class]), .tm-term-description a:not([class]) { color: var(--tm-mint-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .entry-content a:not([class]):hover, .wp-block-post-content a:not([class]):hover, .tme-panel a:not([class]):hover { color: var(--tm-navy); } /* ---------- 4. Buttons: exactly two templates ---------- * DARK = navy fill, white text. The main action of a block (submit, request a tutor, continue). * LIGHT = white fill, navy text, thin navy border. Every other action, and any button placed * on a dark (navy) background, where it reads as a white button. * Rule: whenever a button sits on a blue/teal/navy fill (including hover), its text is white. * Both share one geometry: Manrope 15px/700, radius 8px, min-height 44px, 1.5px border. * Only exception: icon-only floating buttons (contact bubble) stay circular. * New markup should use .tm-btn-dark / .tm-btn-light; legacy classes are mapped below. */ html body :is( .tm-btn-dark, .tm-btn-light, .tm-hero-cta, .tme-button, .button-primary, .wpcf7-submit, .tm-btn-primary, .tm-profile-cta, .tme-form button:not(.tme-summary-edit), .tme-panel button[type=submit], .tme-filters button, .wp-block-search__button, .wp-block-button__link, .s4-btn, .tm-btn-request, .header-nav-primary > li.become > a, .btn-primary, .btn-secondary, .tme-subject-more, .tm-bubbles-pause, .tme-copy-link, .tme-password-toggle, .tm-footer-button, .tm-footer-social-link, .tme-quote-controls button, .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers, .nav-links .page-numbers ):not([hidden]) { display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; min-height: var(--tm-btn-height) !important; padding: 10px 20px !important; border-width: 1.5px !important; border-style: solid !important; border-radius: var(--tm-radius-btn) !important; font-family: var(--tm-font) !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; box-shadow: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } /* Numbers and compact toggles keep the geometry but may be square. */ html body :is(.wp-block-query-pagination .page-numbers, .nav-links .page-numbers:not(.prev):not(.next), .tme-quote-controls button) { min-width: var(--tm-btn-height) !important; padding: 0 12px !important; } html body :is(.wp-block-query-pagination-previous, .wp-block-query-pagination-next, .nav-links .prev, .nav-links .next) { padding: 0 18px !important; min-width: auto !important; } /* DARK template */ html body :is( .tm-btn-dark, .tm-hero-cta, .tme-button, .button-primary, .wpcf7-submit, .tm-btn-primary, .tm-profile-cta, .tme-form button[type=submit], .tme-form button[data-next], .tme-form button[data-send], .tme-panel button[type=submit], .tme-filters button, .wp-block-search__button, .wp-block-button__link, .s4-btn, .tm-btn-request, .header-nav-primary > li.become > a, .btn-primary, .wp-block-query-pagination .page-numbers.current, .nav-links .page-numbers.current, .tme-quote-controls button:is([aria-current=true], [aria-pressed=true], .is-active) ) { background: var(--tm-navy) !important; border-color: var(--tm-navy) !important; color: var(--tm-white) !important; } html body :is( .tm-btn-dark, .tm-hero-cta, .tme-button, .button-primary, .wpcf7-submit, .tm-btn-primary, .tm-profile-cta, .tme-form button[type=submit], .tme-form button[data-next], .tme-form button[data-send], .tme-panel button[type=submit], .tme-filters button, .wp-block-search__button, .wp-block-button__link, .s4-btn, .tm-btn-request, .header-nav-primary > li.become > a, .btn-primary ):hover { background: var(--tm-navy-hover) !important; border-color: var(--tm-navy-hover) !important; color: var(--tm-white) !important; transform: none; } /* LIGHT template (listed after DARK so secondary uses of .tme-button win) */ html body :is( .tm-btn-light, .btn-secondary, .tme-subject-more, .tm-bubbles-pause, .tme-copy-link, .tme-password-toggle, .tme-form button[data-back], .tme-member-card .tme-form button, .tm-listing-card .tme-form button, .tm-card-content > .tme-button, .tm-listing-card .tme-button, .tm-listing-body > .tme-button, .tme-profile-tools > .tme-button, .tm-footer-button, .tm-footer-social-link, .tme-quote-controls button:not([aria-current=true]):not([aria-pressed=true]):not(.is-active), .wp-block-query-pagination a, .wp-block-query-pagination .page-numbers:not(.current), .nav-links .page-numbers:not(.current) ) { background: var(--tm-white) !important; border-color: color-mix(in srgb, var(--tm-navy) 25%, transparent) !important; color: var(--tm-navy) !important; } html body :is( .tm-btn-light, .btn-secondary, .tme-subject-more, .tm-bubbles-pause, .tme-copy-link, .tme-password-toggle, .tme-form button[data-back], .tme-member-card .tme-form button, .tm-card-content > .tme-button, .tm-listing-card .tme-button, .tm-listing-body > .tme-button, .tme-profile-tools > .tme-button, .tm-footer-button, .tm-footer-social-link, .tme-quote-controls button, .wp-block-query-pagination a, .nav-links a.page-numbers ):hover { background: var(--tm-navy) !important; border-color: var(--tm-navy) !important; color: var(--tm-white) !important; transform: none; } /* Light buttons on a navy background: hover to teal (still white text) so they stay visible. */ html body .tm-footer :is(.tm-footer-button, .tm-footer-social-link):hover, html body main :is(.btn-secondary.btn-secondary):hover { background: var(--tm-mint-text) !important; border-color: var(--tm-mint-text) !important; color: var(--tm-white) !important; } html body :is(.tm-footer-button, .tm-footer-social-link) svg { color: currentColor; fill: currentColor; } html body :is(button, .tme-button, [class*=btn]):disabled { opacity: .5; cursor: not-allowed; } /* Floating contact (footer v2, 2026-10-20): logo teal #389C94 with white details and a white ring, so it stands out on white pages and on the navy footer alike. Channel logos (WhatsApp, Facebook, Zalo) keep their colours. */ html body .tme-contact-widget { --tm-fab: #389C94; --tm-fab-hover: #2E8780; } html body .tme-contact-widget .tme-contact-toggle, html body .tme-contact-widget .tme-contact-link--phone { background: var(--tm-fab) !important; color: var(--tm-white) !important; box-shadow: 0 0 0 3px var(--tm-white), 0 10px 26px rgb(7 17 71 / 35%), 0 0 0 9px rgb(56 156 148 / 22%) !important; } html body .tme-contact-widget .tme-contact-link { box-shadow: 0 0 0 2px var(--tm-white), 0 8px 20px rgb(7 17 71 / 30%); } html body .tme-contact-widget .tme-contact-toggle:hover, html body .tme-contact-widget .tme-contact-link--phone:hover { background: var(--tm-fab-hover) !important; } html body .tme-contact-widget .tme-contact-toggle { position: relative; } /* Compact size (60% of the original 74px toggle); channel circles stay at the 44px touch minimum. */ html body .tme-contact-widget { --tme-toggle-size: 44px; --tme-contact-size: 44px; --tme-contact-gap: 10px; } html body .tme-contact-widget .tme-contact-toggle svg { width: 20px; height: 20px; } html body .tme-contact-widget .tme-contact-link svg { width: 24px; height: 24px; } html body .tme-contact-widget .tme-contact-toggle, html body .tme-contact-widget .tme-contact-link--phone { box-shadow: 0 0 0 2px var(--tm-white), 0 6px 16px rgb(7 17 71 / 32%) !important; } /* Ringing phone: the icon shakes in short bursts while two ripple rings spread out and fade (never in calm mode). */ html:not(.tm-motion-calm) .tme-contact-menu:not([open]) .tme-contact-toggle::before, html:not(.tm-motion-calm) .tme-contact-menu:not([open]) .tme-contact-toggle::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--tm-fab); pointer-events: none; z-index: -1; animation: tm-fab-wave 2s cubic-bezier(.2,.6,.3,1) infinite; } html:not(.tm-motion-calm) .tme-contact-menu:not([open]) .tme-contact-toggle::after { animation-delay: 1s; } @keyframes tm-fab-wave { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(2.1); opacity: 0; } } html:not(.tm-motion-calm) body .tme-contact-widget .tme-contact-menu:not([open]) .tme-contact-open-icon { animation: tm-fab-ring 2s ease-in-out infinite; transform-origin: 50% 50%; } @keyframes tm-fab-ring { 0%, 50%, 100% { transform: rotate(0); } 5% { transform: rotate(-18deg); } 10% { transform: rotate(16deg); } 15% { transform: rotate(-14deg); } 20% { transform: rotate(12deg); } 25% { transform: rotate(-8deg); } 30% { transform: rotate(6deg); } 35% { transform: rotate(0); } } /* Channels pop in one after another when the menu opens. */ html:not(.tm-motion-calm) .tme-contact-menu[open] .tme-contact-list li { animation: tm-fab-pop .32s cubic-bezier(.34,1.45,.64,1) both; } html:not(.tm-motion-calm) .tme-contact-menu[open] .tme-contact-list li:nth-last-child(2) { animation-delay: .05s; } html:not(.tm-motion-calm) .tme-contact-menu[open] .tme-contact-list li:nth-last-child(3) { animation-delay: .1s; } html:not(.tm-motion-calm) .tme-contact-menu[open] .tme-contact-list li:nth-last-child(4) { animation-delay: .15s; } @keyframes tm-fab-pop { from { opacity: 0; transform: translateY(10px) scale(.85); } to { opacity: 1; transform: none; } } html:not(.tm-motion-calm) .tme-contact-menu[open] .tme-contact-close-icon svg { animation: tm-fab-turn .25s cubic-bezier(.2,.8,.2,1); } @keyframes tm-fab-turn { from { transform: rotate(-90deg); } to { transform: none; } } /* One focus ring for every interactive control. */ :where(a, button, input, select, textarea, summary, [role=button]):focus-visible { outline: 2px solid var(--tm-navy); outline-offset: 2px; box-shadow: var(--tm-focus); } /* ---------- 5. Icons ---------- */ .tm-icon, .tm-hero-icon { width: var(--tm-icon); height: var(--tm-icon); flex: none; } .s2-icon, .s2-icon.navy, .s2-icon.amber, .s2-icon.green { width: 48px; height: 48px; border-radius: var(--tm-radius-card); background: var(--tm-mint-soft); color: var(--tm-mint-text); } /* ---------- 6. Layout fixes from the 2026-10-20 audit ---------- */ /* Text links used as card/notice actions were 19px tall on phones. */ .tm-home-link, .tm-listing-link, .tme-panel > a, .tme-filter-actions > a { display: inline-flex; align-items: center; min-height: 44px; } /* Partner logos rendered at 1×1px (images carry width/height="1"). */ .tm-partner-logo { width: auto; height: auto; max-width: 140px; max-height: 60px; } .tm-partner-card > a { display: flex; align-items: center; justify-content: center; min-height: 52px; } /* Request form radio cards and register consent checkbox: larger hit area. */ .tme-choice input[type=radio], .tme-choice input[type=checkbox], .tme-form label > input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--tm-navy); } /* Login/register: centre the intro under the centred title. */ .title-border-bottom + p, .title-border-bottom ~ .tme-login-intro { text-align: center; } /* Without Facebook login there is nothing to separate: hide the "— Hoặc / Or —" divider. */ .tme-social-off + hr, .tme-social-off + hr + p { display: none; } .tme-social-off { text-align: center; color: var(--tm-muted); } /* Old-content teal (#2FA4A9) is below AA contrast on white: use the brand text teal. */ main [style*="color:rgb(47, 164, 169)"], main [style*="color: rgb(47, 164, 169)"], main [style*="color:#2fa4a9"], main [style*="color: #2fa4a9"] { color: var(--tm-mint-text) !important; } .tm-partner-card > a { min-width: 120px; } /* Card actions ("Xem hồ sơ" + save button) wrap with spacing instead of touching. */ .tm-card-content > .tm-home-link { margin: 8px 16px 0 0; } .tm-card-content > .tme-button, .tm-card-content > .tme-favorite { margin-top: 8px; } .wp-block-post-title a, .tm-listing-body h2 a { color: var(--tm-navy); text-decoration: none; } .wp-block-post-title a:hover, .tm-listing-body h2 a:hover { color: var(--tm-mint-text); } .tm-home-link, .tm-listing-link { color: var(--tm-mint-text); font-weight: 700; text-decoration: none; } .tm-home-link:hover, .tm-listing-link:hover { color: var(--tm-navy); text-decoration: underline; text-underline-offset: 3px; } /* Text on blue/teal/navy/dark-green fills is white. Mark such blocks in new content with .tm-on-dark. */ html body :is(.tm-on-dark, .tm-page-15365 .hero, .tm-page-15365 .journey, .tm-page-15365 .cta) :is(h1, h2, h3, h4, h5, h6) { color: var(--tm-white) !important; } html body .tm-on-dark { color: var(--tm-white); } /* Footer (navy): wordmark and link hovers stay white instead of mint. */ html body .tm-footer .tm-footer-site-name span { color: var(--tm-white) !important; } /* Footer v2 draws its own animated underline (footer.css). */ html body .tm-footer .tm-footer-list a:hover { color: var(--tm-white) !important; } /* Owl mark outside the header (footer, log-in panel): same colours as the header logo. */ .tm-owl-mark .st0 { fill: #389C94; } .tm-owl-mark .st1 { fill: #FFFFFF; } .tm-owl-mark .st2 { fill: #080808; } .tm-owl-mark .catchlight { fill: #FFFFFF; } .tm-owl-mark .cheek { fill: #FF7B89; opacity: 0; } /* ---------- 7. Font & colour consolidation (2026-10-20, research/font-color-audit-2026-10-20/) ---------- * Audit of 37 pages: 97% Manrope; off-brand fonts only in pasted content (blog post DM Sans + Playfair, * Wellbeing landing Be Vietnam Pro) and the hero IB badge (Georgia). 9 extra greys and 6 teals mapped to tokens: * navy #071147 · text #363636 · muted #5F5F5F · teal text #07796C · logo teal #389C94 · mint light #62DECD (on navy). */ /* Header: brand text and menu use the same navy/muted as the page, sentence case like the buttons (BR-11). */ .tm-brand-text strong { color: var(--tm-navy); } .tm-brand-text span { color: var(--tm-muted); } .header-nav-primary > li > a, .tm-lang-toggle { color: var(--tm-navy); } .tm-header .tm-menu a, .header-nav-primary > li > a { text-transform: none; font-size: 14px; letter-spacing: 0; } .header-nav-primary > li > a:hover { color: var(--tm-mint-text); } /* Secondary text: one muted grey (was #5B6478, #676767, #526D80, #4A6580, #3F636C, #365663, #294C56, #444444). */ .s2-stats .lbl, .s4-cta-note, .tm-bubble-subject, .tme-profile-meta li, .tme-profile-nav > a:not(.tme-button) { color: var(--tm-muted); } /* Light weight 300 on homepage copy read thin next to 400 elsewhere. */ .tm-builder-home :is(p, li) { font-weight: 400; } .tm-hero-me { color: var(--tm-logo); } /* About page: inline #1F2A44 / Arial 34px headings → H1/H2 scale and navy. */ .tm-page-10335 h1, .tm-page-10335 h2 { color: var(--tm-navy) !important; } .tm-page-10335 h1 { font-size: var(--tm-fs-h1) !important; } .tm-page-10335 h2 { font-size: var(--tm-fs-h2) !important; } /* Blog posts pasted with their own