/* Theme Name: Jin Design System Template: kadence Author: Jin Author URI: https://liveinkojpau.com/ Description: Custom Kadence child theme powering liveinkojpau.com's design system. Version: 0.9 License: GNU General Public License v3.0 (or later) License URI: https://www.gnu.org/licenses/gpl-3.0.html */ /* ========================================================================== Deliberate divergence from liveinkojpau's copy of this theme (2026-07-23) Both installs share this design system's tokens, layout, and component CSS verbatim (marked blocks are ported as-is, see DESIGN.md). Typography is the one intentional exception: liveinkojpau uses Inter/Pretendard/ Noto Sans JP (EN/KO/JA, one font per language). This site (EN/JA only, no Korean) uses Fraunces for headings + Zen Kaku Gothic New for body text and JA headings — see DESIGN-service.md. Implemented by redefining --font-inter/--font-pretendard/--font-noto-jp below to Zen Kaku Gothic New (covers body text everywhere those tokens are already used across the ported CSS) plus a dedicated h1-h4 override further down that splits headings to Fraunces (EN) / Zen Kaku (JA) — see "Service fonts: heading override" further down this file. ========================================================================== */ /* ========================================================================== Phase 1: Design tokens (liveinkojpau redesign) CSS custom properties from variables.css + Kadence global-palette mapping. Light mode = :root, dark overrides = .dark-mode. No component styling here. ========================================================================== */ :root { /* Colors */ --color-carbon: #181925; --color-paper-white: #ffffff; --color-linen: #fafafa; --color-mist: #f5f5f5; --color-fog: #e8e8e8; --color-ash: #999999; --color-graphite: #666666; --color-lavender: #918df6; --color-iris: #9580ff; --color-mint: #33c758; --color-mint-wash: #def6e4; --color-amber: #ffa600; --color-sky: #2c78fc; --color-magenta: #d6409f; --color-ember: #ff3e00; /* Typography — Font Families */ --font-openrunde: 'OpenRunde', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; /* Typography — Loaded webfont stacks (Phase 1) Service divergence: these three tokens all resolve to Zen Kaku Gothic New here (not Inter/Pretendard/Noto Sans JP) — every existing rule in this ported file that reads one of these tokens (body text, buttons, inputs, nav links, and the base h1-h6 rule) gets Zen Kaku by default. --font-pretendard has no real matching content on this EN/JA-only site (no :lang(ko) elements exist) — kept defined, pointed at the same font, purely so nothing breaks if Korean is ever added later. Headings are then pulled back to Fraunces (EN) via a dedicated override below — see "Service fonts: heading override". */ --font-inter: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-pretendard: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; --font-noto-jp: 'Zen Kaku Gothic New', ui-sans-serif, system-ui, 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; --font-fraunces: 'Fraunces', ui-serif, Georgia, serif; /* Typography — Scale */ --text-caption: 12px; --leading-caption: 1.33; --tracking-caption: -0.32px; --text-body: 16px; --leading-body: 1.5; --tracking-body: -0.32px; --text-subheading: 18px; --leading-subheading: 1.33; --tracking-subheading: -0.32px; --text-heading-sm: 24px; --leading-heading-sm: 1.17; --tracking-heading-sm: -0.31px; --text-heading: 36px; --leading-heading: 1.22; --tracking-heading: -0.61px; --text-heading-lg: 48px; --leading-heading-lg: 1; --tracking-heading-lg: -0.34px; --text-display: 60px; --leading-display: 1.13; --tracking-display: -3px; /* Typography — Weights */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* Spacing */ --spacing-unit: 4px; --spacing-4: 4px; --spacing-8: 8px; --spacing-12: 12px; --spacing-16: 16px; --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-48: 48px; --spacing-64: 64px; /* Layout */ --page-max-width: 1200px; --section-gap: 64px; --card-padding: 32px; --element-gap: 16px; /* Border Radius */ --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-3xl: 24px; --radius-3xl-2: 32px; /* Named Radii */ --radius-tags: 9999px; --radius-cards: 16px; --radius-images: 8px; --radius-inputs: 8px; --radius-tables: 24px; --radius-buttons: 9999px; /* Shadows */ --shadow-subtle: rgba(0, 0, 0, 0.08) 0px 1px 1px 1px, rgba(0, 0, 0, 0.06) 0px 0px 0px 0.5px; --shadow-subtle-2: rgba(0, 0, 0, 0.08) 0px 1px 1px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px; --shadow-subtle-3: rgba(0, 0, 0, 0.06) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 8px 16px 0px, rgba(0, 0, 0, 0.02) 0px 0px 0px 1px; /* Surfaces */ --surface-canvas: #ffffff; --surface-linen-band: #fafafa; --surface-mist-fill: #f5f5f5; --surface-mint-wash: #def6e4; /* Kadence global palette mapping — existing Kadence blocks inherit brand colors. 1 accent · 2 accent-deep · 3-4 primary text · 5 secondary · 6 muted · 7 subtle bg · 8 lighter bg · 9 base/white */ --global-palette1: #918df6; /* Lavender — accent / links / primary action */ --global-palette2: #9580ff; /* Iris — deeper accent / hover */ --global-palette3: #181925; /* Carbon — headings / strongest text */ --global-palette4: #181925; /* Carbon — body text */ --global-palette5: #666666; /* Graphite — secondary text */ --global-palette6: #999999; /* Ash — muted / meta / placeholders */ --global-palette7: #f5f5f5; /* Mist — subtle background */ --global-palette8: #fafafa; /* Linen — lighter background band */ --global-palette9: #ffffff; /* Paper White — base canvas */ } /* Dark mode — override only surfaces, borders, text and the mint wash. Lavender (palette1) and the Sky→Lavender gradient stay unchanged. */ .dark-mode { /* Surfaces */ --surface-canvas: #0f1016; /* canvas */ --surface-linen-band: #15161f; /* bands */ --surface-mist-fill: #181925; /* card fill */ --surface-mint-wash: rgba(51, 199, 88, 0.12); --color-mint-wash: rgba(51, 199, 88, 0.12); /* mint wash */ /* Borders */ --color-fog: #2a2b38; /* Kadence global palette — dark */ --global-palette3: #f2f2f5; /* primary text */ --global-palette4: #f2f2f5; /* primary text */ --global-palette5: #a8a8b3; /* secondary text */ --global-palette6: #7c7c88; /* captions */ --global-palette7: #181925; /* card fill */ --global-palette8: #15161f; /* bands */ --global-palette9: #0f1016; /* canvas */ } /* Base font stacks — Inter for Latin. Polylang sets the lang attribute on : :lang(ko) → Pretendard Variable, :lang(ja) → Noto Sans JP. */ body, button, input, select, optgroup, textarea, h1, h2, h3, h4, h5, h6 { font-family: var(--font-inter); } body:lang(ko), button:lang(ko), input:lang(ko), select:lang(ko), optgroup:lang(ko), textarea:lang(ko), h1:lang(ko), h2:lang(ko), h3:lang(ko), h4:lang(ko), h5:lang(ko), h6:lang(ko) { font-family: var(--font-pretendard); } body:lang(ja), button:lang(ja), input:lang(ja), select:lang(ja), optgroup:lang(ja), textarea:lang(ja), h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja), h5:lang(ja), h6:lang(ja) { font-family: var(--font-noto-jp); } /* Service fonts: heading override (DESIGN-service.md) — the block above already put every h1-h6 on Zen Kaku Gothic New by default (via the redefined --font-inter/--font-noto-jp tokens); this pulls h1-h4 specifically back to Fraunces for EN, keeping JA h1-h4 on Zen Kaku. Same specificity as the block above (single type + :lang selectors), later in source order, so no !important needed. h5/h6 and body copy are deliberately left on Zen Kaku via the tokens above — only h1-h4 are "headings" for this rule, per spec. */ h1, h2, h3, h4 { font-family: var(--font-fraunces); } h1:lang(ja), h2:lang(ja), h3:lang(ja), h4:lang(ja) { font-family: var(--font-noto-jp); } /* Letter-spacing — DESIGN.md tracking for Latin (inherited from body); CJK (ja/ko) reset to normal to avoid cramped kana/hangul. */ body { letter-spacing: -0.02em; } body:lang(ja), body:lang(ko) { letter-spacing: normal; } /* ========================================================================== Phase 2: Global elements (buttons, links, forms, cards, focus, motion, header/footer). Selectors verified against the live site's rendered DOM: Kadence Blocks buttons (.kb-button/.kt-button/.wp-block-button__link), archive cards (article.loop-entry), header (.site-header/#primary-menu), footer (#colophon/#footer-menu). No page/section content — that's Phase 3. ========================================================================== */ :root { /* Elevated-surface fill for cards/inputs/nav pill: white in light, dark card-fill in dark (reuses Phase 1's dark --surface-mist-fill, which is already repurposed as "#181925 card fill" for .dark-mode). */ --surface-elevated: var(--color-paper-white); } .dark-mode { --surface-elevated: var(--surface-mist-fill); } /* -------------------------------------------------------------------------- Motion — all transitions gated behind reduced-motion opt-in. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .wp-block-button__link, .kb-button, .kt-button, .entry-content a, .entry-summary a, .entry-title a, input, textarea, select, article.loop-entry, #primary-menu.menu > .menu-item > a, #footer-menu.menu a, .footer-html-inner a { transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, text-decoration-color 0.15s ease, transform 0.1s ease, filter 0.15s ease; } } /* -------------------------------------------------------------------------- Buttons — Gutenberg core + Kadence Blocks (both classes always co-occur on this theme's button blocks). Carbon text on Lavender fill — never white, per DESIGN.md's WCAG note. !important guards against Kadence's own per-block dynamic CSS (confirmed live: buttons currently render white text, weight 700, 16px/32px padding — all fought here on purpose). -------------------------------------------------------------------------- */ .wp-block-button__link, .kb-button, .kt-button { background-color: var(--color-lavender) !important; color: var(--color-carbon) !important; border: none !important; border-radius: var(--radius-buttons) !important; box-shadow: var(--shadow-subtle) !important; font-weight: var(--font-weight-medium) !important; padding: 10px 20px !important; } .wp-block-button__link:hover, .kb-button:hover, .kt-button:hover { filter: brightness(0.92); /* ~8% darken */ } .wp-block-button__link:active, .kb-button:active, .kt-button:active { filter: brightness(0.85); transform: scale(0.98); } .wp-block-button__link[disabled], .wp-block-button__link.disabled, .kb-button[disabled], .kt-button[disabled], .kb-button.disabled, .kt-button.disabled { background-color: var(--color-mist) !important; color: var(--color-ash) !important; box-shadow: none !important; filter: none; cursor: not-allowed; } /* Ghost/secondary variant. Two ways to trigger it: 1. Core button's own built-in "Outline" style (Styles panel in the editor) — adds "is-style-outline" to the OUTER .wp-block-button div. 2. A custom "button-ghost" class in Additional CSS Class(es) — same outer-div placement, kept for Kadence buttons / manual use. Core buttons need the descendant combinator below (the class lands on the outer div, .wp-block-button__link is the nested — a compound selector here would never match). Kadence's own button block puts every class directly on the , so the compound form is kept for that case. */ .button-ghost .wp-block-button__link, .is-style-outline .wp-block-button__link, .button-ghost.kb-button, .button-ghost.kt-button, .is-style-outline.kb-button, .is-style-outline.kt-button { background-color: transparent !important; color: var(--color-graphite) !important; box-shadow: none !important; } .button-ghost .wp-block-button__link:hover, .is-style-outline .wp-block-button__link:hover, .button-ghost.kb-button:hover, .button-ghost.kt-button:hover, .is-style-outline.kb-button:hover, .is-style-outline.kt-button:hover { background-color: var(--color-mist) !important; filter: none; } /* -------------------------------------------------------------------------- Links — body copy stays Carbon; Lavender is reserved for CTAs (DESIGN.md). Post-title links (archive cards + single post) shift to Lavender underline on hover. -------------------------------------------------------------------------- */ .entry-content a, .entry-summary a, .comment-content a { color: var(--color-carbon); text-decoration: underline; text-decoration-color: transparent; } .entry-content a:hover, .entry-summary a:hover, .comment-content a:hover { text-decoration-color: currentColor; } .entry-title a { color: var(--color-carbon); text-decoration: none; } .entry-title a:hover { color: var(--color-lavender); text-decoration: underline; text-decoration-color: var(--color-lavender); } /* -------------------------------------------------------------------------- Focus states — Kadence's "hide-focus-outline" body class strips the plain :focus ring theme-wide with no replacement (confirmed live); :focus-visible restores one using the brand color, and only for keyboard interaction. -------------------------------------------------------------------------- */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, .wp-block-button__link:focus-visible, .kb-button:focus-visible, .kt-button:focus-visible, #primary-menu.menu > .menu-item > a:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 2px; } /* -------------------------------------------------------------------------- Form inputs — search, comments, MailerLite. Generic element/type selectors only; the MailerLite shortcode/embed markup itself is untouched. -------------------------------------------------------------------------- */ input[type="text"], input[type="email"], input[type="url"], input[type="tel"], input[type="search"], input[type="password"], input[type="number"], textarea, select, .wp-block-search__input { background-color: var(--surface-elevated); border: 1px solid var(--color-fog); border-radius: var(--radius-inputs); color: var(--color-carbon); padding: 10px 12px; } input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="tel"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="number"]:focus, textarea:focus, select:focus, .wp-block-search__input:focus { border-color: var(--color-lavender); outline: none; } /* -------------------------------------------------------------------------- Cards baseline — post archive cards (article.loop-entry, confirmed live selector) + a reusable ".card" utility for Phase 3 panels. -------------------------------------------------------------------------- */ article.loop-entry, .card { background-color: var(--surface-elevated); border: 1px solid var(--color-fog); border-radius: var(--radius-cards); } article.loop-entry:hover, .card:hover { box-shadow: var(--shadow-subtle-3); } /* -------------------------------------------------------------------------- Header — pill nav bar look. Structural placement (wordmark, menu, language switcher, dark-mode toggle, Ask Jin button) is set in the Kadence Header Builder — see manual checklist. This is only the CSS the Builder can't provide (pill container fill/radius, active-item underline). -------------------------------------------------------------------------- */ .primary-menu-container { background-color: var(--surface-elevated); border-radius: var(--radius-buttons); padding: 8px; } /* font-family/background added post-launch: confirmed live that Kadence's own "Primary Navigation Typography" customizer setting outputs a dynamic --global-primary-nav-font-family variable — found set to literally "Courier, monospace" here, a pre-existing/unrelated value — and its own per-item "button style" background (var(--global-palette9)), which only renders as a visible dark box now because palette9 was remapped for dark mode. This selector's #id gives it higher specificity than Kadence's own class-based rules, so no !important is needed to win. */ #primary-menu.menu > .menu-item > a { color: var(--color-carbon); font-family: var(--font-inter); background: none; } #primary-menu.menu > .menu-item > a:lang(ko) { font-family: var(--font-pretendard); } #primary-menu.menu > .menu-item > a:lang(ja) { font-family: var(--font-noto-jp); } #primary-menu.menu > .current-menu-item > a, #primary-menu.menu > .current_page_item > a, #primary-menu.menu > .current_page_parent > a { color: var(--color-carbon); border-bottom: 2px solid var(--color-lavender); } /* Dropdown submenu card (Blog/Service > .sub-menu). Confirmed live this was entirely unstyled by the design system: its navy background (rgb(26,77,122)) is a literal hardcoded Kadence color, not a --global-palette reference (see chat for the Customizer path to clear it at the source); its text uses --global-palette8 (a slot this redesign repurposes for surfaces, not Kadence's original per-component use), and it has the same stray Courier font as the top-level nav. #primary-menu's ID gives this higher specificity than Kadence's own 3-class dropdown rule, so no !important needed for the base styles, though key properties keep it anyway for the same defensive certainty used throughout this stylesheet. display is left untouched — Kadence's own hover/click toggle script controls that. */ #primary-menu .sub-menu { position: absolute; top: calc(100% + 8px); left: 0; margin: 0; min-width: 200px; background-color: var(--surface-elevated) !important; border: 1px solid var(--color-fog) !important; border-radius: var(--radius-cards) !important; box-shadow: var(--shadow-subtle-3) !important; padding: var(--spacing-8) 0; } #primary-menu .sub-menu li.menu-item > a { display: block; padding: var(--spacing-8) var(--spacing-16); color: var(--color-carbon) !important; font-family: var(--font-inter) !important; background: none !important; } #primary-menu .sub-menu li.menu-item > a:lang(ko) { font-family: var(--font-pretendard) !important; } #primary-menu .sub-menu li.menu-item > a:lang(ja) { font-family: var(--font-noto-jp) !important; } #primary-menu .sub-menu li.menu-item > a:hover { color: var(--color-lavender) !important; } /* Language switcher (Polylang's nav-menu integration: .pll-parent-menu-item is the current-language trigger, .lang-item are the dropdown options). Flag images are still hidden — Polylang now renders its own native language-name text alongside them (a Polylang/Kadence display-setting change made outside this stylesheet), so text no longer needs to be CSS-generated. The earlier ::before content-injection workaround (removed 2026-07-23) was left in place after that change and produced doubled labels like "ENEnglish" — confirmed live, both desktop and mobile. Polylang's native output is now the only label source. */ .pll-parent-menu-item img, .lang-item img { display: none; } .pll-parent-menu-item a, .lang-item a { color: var(--color-carbon) !important; font-family: var(--font-inter) !important; background: none !important; } /* Polylang's menu-item switcher (Appearance > Menus > Languages) has no "hide the current language" checkbox in this install — confirmed live, only "Displays as a dropdown / language names / flags", "Forces link to front page", and "Hides languages with no translation" are offered. Polylang still tags the active language's own item with .current-lang itself, so hiding it needs no hardcoded language name/code — it already shows as the closed-dropdown trigger label, so hiding it from the open dropdown's option list just removes the redundant repeat. */ .lang-item.current-lang { display: none; } /* "Ask Jin" nav CTA — add as a regular Primary Menu item (not a Header Builder HTML element, to avoid the same paste-sanitization risk found with the toggle button's SVG) linking to https://justaskjin.liveinkojpau.com, with the menu editor's "CSS Classes (optional)" field set to "ask-jin-nav-btn". Per DESIGN.md this is the "Register Button" treatment (Iris fill + white text), the documented secondary-emphasis nav CTA — distinct from the main Lavender CTA on purpose, and like Lavender, Iris stays the same in dark mode. */ #primary-menu.menu > .ask-jin-nav-btn > a { background-color: var(--color-iris) !important; color: var(--color-paper-white) !important; font-family: var(--font-inter) !important; border-radius: var(--radius-buttons) !important; padding: 6px 10px !important; font-weight: var(--font-weight-medium) !important; } #primary-menu.menu > .ask-jin-nav-btn > a:hover { filter: brightness(0.92); } /* -------------------------------------------------------------------------- Footer — minimal, top Fog hairline, Carbon links that shift Lavender on hover. Column layout itself is set in the Kadence Footer Builder. -------------------------------------------------------------------------- */ #colophon.site-footer { border-top: 1px solid var(--color-fog); } #footer-menu.menu a, .footer-html-inner a { color: var(--color-carbon); } #footer-menu.menu a:hover, .footer-html-inner a:hover { color: var(--color-lavender); } /* ========================================================================== Phase 3: Homepage sections (hero, gradient band, posts grid, JustAskJin, Korean Lessons, email capture). Class names below are the custom "Additional CSS Class(es)" applied to blocks in homepage-en.html — this is homepage-only styling, not general component styling. ========================================================================== */ /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero-section { text-align: center; max-width: 720px !important; margin-left: auto !important; margin-right: auto !important; padding: var(--spacing-64) var(--spacing-24) var(--spacing-48); } .announcement-chip { display: inline-flex; align-items: center; gap: var(--spacing-8); background-color: var(--surface-elevated); border: 1px solid var(--color-fog); border-radius: var(--radius-tags); padding: 6px 16px; font-size: var(--text-caption); font-weight: var(--font-weight-medium); color: var(--color-carbon); margin: 0 auto var(--spacing-24); } .chip-new { color: var(--color-sky); font-weight: var(--font-weight-semibold); } .hero-headline { font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-weight: var(--font-weight-semibold); color: var(--color-carbon); margin: 0 0 var(--spacing-16); } /* Display-size tracking is Latin-only per DESIGN.md; JA/KO cap at -0.5px (this overrides the -3px above, which would otherwise bypass body's lang-based letter-spacing reset since it's set directly on this class). */ .hero-headline:lang(ja), .hero-headline:lang(ko) { letter-spacing: -0.5px; } .hero-subtext { font-size: var(--text-subheading); line-height: var(--leading-subheading); color: var(--color-graphite); max-width: 560px; margin: 0 auto var(--spacing-32); } .hero-cta-group { justify-content: center; margin-bottom: var(--spacing-24); } .hero-trust-line { font-size: var(--text-caption); color: var(--color-ash); } /* -------------------------------------------------------------------------- Gradient band + hero image card — the gradient and the card both stay the same in dark mode on purpose (DESIGN.md: Lavender/gradient unchanged; the card is a deliberate always-white "floating window" over it). -------------------------------------------------------------------------- */ .hero-gradient-band { background: linear-gradient(to right in oklab, var(--color-sky) 0%, var(--color-lavender) 100%); padding: var(--spacing-64) 0; width: 100%; } /* Card width is self-contained (doesn't rely on the band's padding or on Kadence's .alignwide/.alignfull behavior, which has proven unreliable on this site) — width:min() caps at --page-max-width on large screens and guarantees a side inset on small ones, whichever is smaller. */ .hero-image-card { width: min(100% - 48px, var(--page-max-width)) !important; margin-inline: auto !important; background-color: var(--color-paper-white); border-radius: var(--radius-3xl); padding: var(--spacing-16); box-shadow: var(--shadow-subtle-3); } .hero-image { margin: 0; } /* !important guards against WordPress writing width/height HTML attributes (or an inline style) onto the when a real image replaces the placeholder via the media library — those attributes previously beat this rule's specificity and squashed the image to its native pixel size. */ .hero-image img { width: 100% !important; height: auto !important; aspect-ratio: 2 / 1 !important; object-fit: cover !important; display: block !important; border-radius: var(--radius-2xl); } @media (max-width: 480px) { .hero-image-card { width: min(100% - 32px, var(--page-max-width)) !important; } } /* -------------------------------------------------------------------------- Latest posts -------------------------------------------------------------------------- */ .section-latest-posts { /* !important: something outside this stylesheet (likely a Kadence page/content-background setting) is winning over this without it — forcing the intended Linen band regardless. Uses --surface-linen-band (dark-aware), not --color-linen (a fixed raw swatch that never changes) — the latter was a mistake introduced in an earlier fix that left this band stuck at light Linen in dark mode, confirmed live via localStorage light/dark comparison. */ background-color: var(--surface-linen-band) !important; max-width: var(--page-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding: var(--section-gap) var(--spacing-24); } .section-heading-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--spacing-32); } .section-heading-link a { color: var(--color-carbon); font-weight: var(--font-weight-medium); text-decoration: none; } .section-heading-link a:hover { color: var(--color-lavender); } .posts-grid.wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: var(--spacing-32); list-style: none; margin: 0; padding: 0; } .posts-grid > li.wp-block-post { background-color: var(--surface-elevated) !important; border: 1px solid var(--color-fog); border-radius: var(--radius-cards); overflow: hidden; padding: 0; } /* Scoped, !important overrides for the card's own text — guards against whatever is overriding the un-guarded Phase 2 .entry-title a / Phase 3 .post-card-excerpt / .post-card-date rules on this page specifically. */ .posts-grid .entry-title a { color: var(--color-carbon) !important; } .posts-grid .post-card-excerpt { color: var(--color-graphite) !important; } .posts-grid .post-card-date { color: var(--color-ash) !important; } .posts-grid > li.wp-block-post:hover { box-shadow: var(--shadow-subtle-3); } .post-card-image { margin: 0; } .post-card-image img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; display: block; } .post-category-pill, .post-card-excerpt, .post-card-date { margin: 0; padding-left: var(--spacing-16); padding-right: var(--spacing-16); } .entry-title { padding-left: var(--spacing-16); padding-right: var(--spacing-16); } .post-category-pill { margin-top: var(--spacing-16); } .post-category-pill a { display: inline-block; font-size: var(--text-caption); font-weight: var(--font-weight-medium); text-decoration: none; padding: 2px 10px; border: 1px solid currentColor; border-radius: var(--radius-tags); } /* Category color mapping — round-robin by post count (documented in strings-for-translation.md). Edit the href fragments if slugs change. */ .post-category-pill a[href*="/category/living-tips/"], .post-category-pill a[href*="/category/culture-society/"] { color: var(--color-sky); } .post-category-pill a[href*="/category/family-parenting/"], .post-category-pill a[href*="/category/gourmet/"] { color: var(--color-magenta); } .post-category-pill a[href*="/category/driving-in-korea/"], .post-category-pill a[href*="/category/visa-admin/"] { color: var(--color-amber); } .post-category-pill a[href*="/category/travel/"], .post-category-pill a[href*="/category/sports-events/"] { color: var(--color-mint); } .entry-title { font-size: var(--text-subheading); font-weight: var(--font-weight-medium); margin-top: var(--spacing-12); } .post-card-excerpt { color: var(--color-graphite); font-size: var(--text-body); margin-top: var(--spacing-8); } .post-card-date { color: var(--color-ash); font-size: var(--text-caption); margin-top: var(--spacing-12); padding-bottom: var(--spacing-16); } /* -------------------------------------------------------------------------- JustAskJin band -------------------------------------------------------------------------- */ .section-justaskjin { /* !important: see .section-latest-posts above — same external override was winning here without it. */ background-color: var(--surface-linen-band) !important; padding: var(--section-gap) 0; } .section-justaskjin-inner { max-width: var(--page-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding: 0 var(--spacing-24); text-align: center; } /* These had no color rule at all before (relied on inherited/cascade color) — made explicit so the band's text can't go dark-on-dark again. */ .section-justaskjin-inner .section-heading-centered, .section-justaskjin-inner .feature-card h3 { color: var(--color-carbon) !important; } .section-justaskjin-inner .section-subtext-centered, .section-justaskjin-inner .feature-card p { color: var(--color-graphite) !important; } .feature-card-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; margin-top: var(--spacing-48); gap: var(--spacing-32); } .feature-card { text-align: center; padding: var(--spacing-16); } .feature-icon { width: 40px; height: 40px; background-color: var(--color-lavender); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto var(--spacing-16); } /* -------------------------------------------------------------------------- Korean Lessons -------------------------------------------------------------------------- */ /* Rebuilt as an explicit grid (like .posts-grid/.feature-card-grid) rather than relying on core/columns' own flex-basis behavior, which is what was failing to constrain width here — same fix pattern already confirmed working elsewhere on this site. */ .section-korean-lessons { display: grid !important; grid-template-columns: 1fr 1fr !important; max-width: var(--page-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding: var(--section-gap) var(--spacing-24) !important; align-items: center; gap: var(--spacing-48); } .eyebrow-tag { display: inline-block; background-color: var(--color-mint-wash); color: var(--color-mint); font-size: var(--text-caption); font-weight: var(--font-weight-semibold); letter-spacing: 0.02em; padding: 4px 12px; border-radius: var(--radius-tags); margin-bottom: var(--spacing-16); } /* !important for the same reason as .hero-image img: WordPress writes width/height HTML attributes onto the when a real photo replaces the placeholder, which otherwise beat this rule and lock in a fixed, non-responsive pixel size (the "doesn't scale with zoom" symptom). */ .lessons-photo img { width: 100% !important; height: auto !important; aspect-ratio: 4 / 3 !important; object-fit: cover !important; display: block !important; border-radius: var(--radius-images); } /* -------------------------------------------------------------------------- Email capture -------------------------------------------------------------------------- */ .section-email-capture { background-color: var(--color-mint-wash); padding: var(--section-gap) 0; } .section-email-capture-inner { text-align: center; max-width: 560px !important; margin-left: auto !important; margin-right: auto !important; padding: 0 var(--spacing-24); } /* -------------------------------------------------------------------------- Responsive — 3→2→1 grid, stacking, full-width mobile CTAs, hero scale-down. -------------------------------------------------------------------------- */ @media (max-width: 1024px) { .posts-grid.wp-block-post-template, .feature-card-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 480px) { .hero-section, .section-latest-posts, .section-justaskjin-inner, .section-korean-lessons, .section-email-capture-inner { padding-left: var(--spacing-16); padding-right: var(--spacing-16); } /* Subtle "engineering blueprint" grid, mobile hero only — background layer sits behind all hero content (text/CTAs render in normal flow above a parent's own background-image, no stacking-context needed), so opacity this low can't meaningfully affect text contrast. */ .hero-section { background-image: linear-gradient(rgba(24, 25, 37, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(24, 25, 37, 0.06) 1px, transparent 1px); background-size: 24px 24px; } .dark-mode .hero-section { background-image: linear-gradient(rgba(242, 242, 245, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(242, 242, 245, 0.08) 1px, transparent 1px); } } @media (max-width: 782px) { .hero-headline { font-size: 38px; letter-spacing: -0.01em; line-height: 1.15; } .hero-subtext { font-size: var(--text-body); } .posts-grid.wp-block-post-template, .feature-card-grid { grid-template-columns: 1fr !important; } .section-korean-lessons { grid-template-columns: 1fr !important; } .korean-lessons-image { order: -1; } .hero-cta-group { flex-direction: column; gap: var(--spacing-12); } .hero-cta-group .wp-block-button, .hero-cta-group .wp-block-button__link { width: 100%; } } /* ========================================================================== Phase 4: Dark mode toggle + fixes .dark-mode goes on (see functions.php's FOUC-prevention script), so every var()-based rule already written in Phases 1–3 flips automatically, including the !important rules in the posts grid and JustAskJin band. This block adds: color-scheme, the toggle button, a restrained transition, and fixes for the dark-mode gaps found in the audit (see chat for the full audit — items not fixable here are listed there as manual follow-ups: JustAskJin widget bubble, the logo, and the MailerLite embed's own styling). ========================================================================== */ /* Tells the browser to render native form-control chrome and scrollbars in the matching scheme, on top of our own var()-based styling. */ :root { color-scheme: light; } .dark-mode { color-scheme: dark; } /* Page canvas background. Confirmed live: Kadence has its own pre-existing "Page Background" customizer setting on body/.site — a translucent blue wash, set per-breakpoint (white on desktop, pale blue on tablet, a more visible blue on mobile), entirely unrelated to this redesign. Nothing in Phases 1–3 ever gave body its own background, so that Kadence wash was always showing through any section without an explicit background of its own (hero-section, Korean Lessons) — invisible-ish in light mode against mostly-white content, but clashing badly once dark mode is active. !important to beat Kadence's own same-selector "body" rules. */ body { background-color: var(--surface-canvas) !important; } /* Header background. Confirmed live: Kadence has its own separate "Header Background" setting on .site-header, fixed opaque white, also unrelated to this redesign. Phase 2 only styled the nav pill inside the header (.primary-menu-container), assuming the header bar itself was neutral — it isn't. The site title text is already correctly dark-aware (Kadence's own branding color is palette-linked, so it already renders light in dark mode), which is exactly why this was invisible rather than merely wrong: light text was rendering on a header that never stopped being white. !important to beat Kadence's own rule. */ .site-header { background-color: var(--surface-canvas) !important; } /* -------------------------------------------------------------------------- Dark-mode text-color gaps. These Phase 2/3 rules color text with the fixed raw tokens (--color-carbon/graphite/ash), which never change in .dark-mode by design (they're literal swatches, not surface-aware) — but every one of these sits on a background that DOES switch dark (--surface-elevated, --surface-linen-band, or the page canvas), so without this the text goes dark-on-dark once .dark-mode is active. Scoped as .dark-mode overrides here rather than editing Phase 2/3 rules directly. --global-palette4/5/6 are already the correct dark-aware primary/secondary/muted-text tokens from Phase 1's dark table. -------------------------------------------------------------------------- */ .dark-mode .entry-content a, .dark-mode .entry-summary a, .dark-mode .comment-content a, .dark-mode .entry-title a, .dark-mode #primary-menu.menu > .menu-item > a, .dark-mode #primary-menu.menu > .current-menu-item > a, .dark-mode #primary-menu.menu > .current_page_item > a, .dark-mode #primary-menu.menu > .current_page_parent > a, .dark-mode #footer-menu.menu a, .dark-mode .footer-html-inner a, .dark-mode input[type="text"], .dark-mode input[type="email"], .dark-mode input[type="url"], .dark-mode input[type="tel"], .dark-mode input[type="search"], .dark-mode input[type="password"], .dark-mode input[type="number"], .dark-mode textarea, .dark-mode select, .dark-mode .wp-block-search__input, .dark-mode .button-ghost .wp-block-button__link, .dark-mode .is-style-outline .wp-block-button__link, .dark-mode .button-ghost.kb-button, .dark-mode .button-ghost.kt-button, .dark-mode .is-style-outline.kb-button, .dark-mode .is-style-outline.kt-button, .dark-mode .hero-headline, .dark-mode .announcement-chip, .dark-mode .section-heading-link a, .dark-mode .posts-grid .entry-title a, .dark-mode .section-justaskjin-inner .section-heading-centered, .dark-mode .section-justaskjin-inner .feature-card h3, .dark-mode .pll-parent-menu-item a, .dark-mode .lang-item a, .dark-mode #primary-menu .sub-menu li.menu-item > a { color: var(--global-palette4) !important; } .dark-mode .hero-subtext, .dark-mode .hero-trust-line, .dark-mode .posts-grid .post-card-excerpt, .dark-mode .posts-grid .post-card-date, .dark-mode .section-justaskjin-inner .section-subtext-centered, .dark-mode .section-justaskjin-inner .feature-card p { color: var(--global-palette5) !important; } /* Ghost/outline and disabled buttons also use fixed Mist/Ash for their hover and disabled states — same gap, same fix. */ .dark-mode .button-ghost .wp-block-button__link:hover, .dark-mode .is-style-outline .wp-block-button__link:hover, .dark-mode .button-ghost.kb-button:hover, .dark-mode .button-ghost.kt-button:hover, .dark-mode .is-style-outline.kb-button:hover, .dark-mode .is-style-outline.kt-button:hover { background-color: var(--color-fog) !important; } .dark-mode .wp-block-button__link[disabled], .dark-mode .wp-block-button__link.disabled, .dark-mode .kb-button[disabled], .dark-mode .kt-button[disabled], .dark-mode .kb-button.disabled, .dark-mode .kt-button.disabled { background-color: var(--color-fog) !important; color: var(--global-palette6) !important; } /* -------------------------------------------------------------------------- Toggle button — 40px pill icon button, paste target is the Header Builder HTML element (see chat for the snippet + placement steps). Background/border already use dark-aware tokens (--surface-elevated, --color-fog) so only the icon and hover state need a .dark-mode override. Icons are CSS background-images (data-URI SVGs), not inline / markup — confirmed live that WordPress's HTML-element sanitizer strips raw content on paste (the button rendered with nothing inside but an  ). Putting the icon entirely in this stylesheet means there's nothing left in the pasted HTML that sanitization can strip. Colors are hardcoded hex (data-URIs can't reference CSS custom properties) matching --global-palette4's light/dark resolved values. Both icons are permanent ::before/::after pseudo-elements, never swapped — only their display is toggled by .dark-mode. Confirmed live (2026-07-23): swapping a single background-image on class-toggle left the icon invisible on mobile until the next touch (a WebKit compositing/repaint quirk where a background-image change on an element with active CSS transitions doesn't reliably repaint from a JS class toggle alone). display:none/block on two always-present pseudo-elements forces a real box-tree change every engine repaints immediately, and neither pseudo carries a transition, so there's nothing hover-gated or animated to cause a stale frame. */ .theme-toggle-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--color-fog); border-radius: var(--radius-buttons); background-color: var(--surface-elevated); color: var(--global-palette4); cursor: pointer; } .theme-toggle-btn::before, .theme-toggle-btn::after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } .theme-toggle-btn::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Ccircle cx='12' cy='12' r='5' fill='%23181925'/%3E%3Cpath d='M12 1v3M12 20v3M4.22 4.22l2.12 2.12M17.66 17.66l2.12 2.12M1 12h3M20 12h3M4.22 19.78l2.12-2.12M17.66 6.34l2.12-2.12' stroke='%23181925' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); display: block; } .theme-toggle-btn::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20'%3E%3Cpath fill='%23f2f2f5' d='M20.742 13.045a8.088 8.088 0 0 1-2.077.273c-4.492 0-8.131-3.639-8.131-8.131 0-1.383.363-2.68.976-3.815a.75.75 0 0 0-.976-1.056A10.5 10.5 0 1 0 21.798 14.02a.75.75 0 0 0-1.056-.975z'/%3E%3C/svg%3E"); display: none; } .dark-mode .theme-toggle-btn::before { display: none; } .dark-mode .theme-toggle-btn::after { display: block; } .theme-toggle-btn:hover { background-color: var(--color-mist); } .dark-mode .theme-toggle-btn:hover { background-color: var(--color-fog); } .theme-toggle-btn:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 2px; } /* The Header Builder's HTML element wraps pasted content in

(wpautop), whose default browser margin was pushing the button out of vertical line with its header-row siblings. Scoped to only the

that directly wraps this specific button, so the language switcher's own HTML block (if it has its own

) is untouched. */ p:has(> #theme-toggle) { margin: 0; display: flex; align-items: center; } /* -------------------------------------------------------------------------- Motion — restrained cross-fade on toggle, not a sitewide "transition: all". Scoped to the major surfaces/text containers that actually change color between modes, and only the color-ish properties on them. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { body, .site-header, .site-footer, .primary-menu-container, article.loop-entry, .card, .posts-grid > li.wp-block-post, .section-latest-posts, .section-justaskjin, input, textarea, select, .theme-toggle-btn { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } } /* ========================================================================== Footer: SNS icon buttons 40px circular ghost buttons, paste target is a Footer Builder HTML element (see chat for the snippet + placement steps). Icons are CSS mask-image (data-URI SVGs), not inline — confirmed earlier in this project that WordPress's HTML-element sanitizer strips raw content on paste (the header dark-mode toggle button rendered empty until its icons were moved into this stylesheet). A mask only defines the icon's SHAPE; the actual color comes from a normal background-color: currentColor, driven by real CSS variables — so this is dynamic across light/dark/hover with a single icon definition each, more robust than even true inline SVG would have been here, and there's nothing left in the pasted HTML for a sanitizer to strip. ========================================================================== */ .footer-social-nav { display: flex; flex-wrap: wrap; gap: 12px; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--color-fog); color: var(--color-graphite); text-decoration: none; } .dark-mode .footer-social-link { color: var(--global-palette5); } .footer-social-link:hover { border-color: var(--color-lavender); color: var(--color-lavender); } .footer-social-link:focus-visible { outline: 2px solid var(--color-lavender); outline-offset: 2px; } @media (prefers-reduced-motion: no-preference) { .footer-social-link { transition: border-color 0.15s ease, color 0.15s ease; } } .footer-social-icon { display: inline-block; width: 20px; height: 20px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .footer-social-icon--telegram { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.01 21L23 12 2.01 3 2 10l15 2-15 2z'/%3E%3C/svg%3E"); } .footer-social-icon--instagram { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2.5' y='2.5' width='19' height='19' rx='5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='12' cy='12' r='4.5' fill='none' stroke='black' stroke-width='2'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black'/%3E%3C/svg%3E"); } .footer-social-icon--whatsapp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='16' rx='8' fill='black'/%3E%3Cpath fill='black' d='M7 17l-1.5 4 4-1.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='3' width='18' height='16' rx='8' fill='black'/%3E%3Cpath fill='black' d='M7 17l-1.5 4 4-1.5z'/%3E%3C/svg%3E"); } .footer-social-icon--kakaotalk { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='14' rx='7' fill='black'/%3E%3Cpath fill='black' d='M8 18l-1 4 4.5-2.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='14' rx='7' fill='black'/%3E%3Cpath fill='black' d='M8 18l-1 4 4.5-2.5z'/%3E%3C/svg%3E"); } .footer-social-icon--line { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='14' rx='4' fill='black'/%3E%3Cpath fill='black' d='M17 18l2 4-4.5-2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='14' rx='4' fill='black'/%3E%3Cpath fill='black' d='M17 18l2 4-4.5-2z'/%3E%3C/svg%3E"); } /* ========================================================================== Homepage: intro section ("Hi, I'm Jin") Sits directly on the plain canvas — no band background of its own, on purpose (a visual breather between the Linen posts band and the dark JustAskJin band). Relies on the Phase 4 body-canvas fix for correct light/dark inheritance, and on Kadence's own palette-linked defaults for the heading/body text color (confirmed working this way for every other plain h2/p on this page — no explicit color rule needed for those here). Mirrors .section-korean-lessons' grid pattern but flipped (image column first) — the markup is already DOM-ordered image-then-text, so unlike Korean Lessons this needs no order:-1 trick to stack image-first on mobile; it falls out of source order for free. Identity line: plain styled text (Graphite/muted, sized between caption and subheading) rather than the announcement-chip treatment — a pill reads as a promotional/"NEW"-style callout (that's its job in the hero), which doesn't fit a personal tagline. Simpler and cleaner here. Image: 1fr/2fr column split (not even halves) so a 100%-width image in the narrower column lands close to the ~360px desktop target on a 1200px-max container, without hardcoding a pixel width that wouldn't adapt to the container. Border + radius reuse the card-baseline treatment (1px Fog border, dark-aware; --radius-cards) rather than floating borderless like the hero/lessons photos. ========================================================================== */ .section-intro-jin { display: grid; grid-template-columns: 1fr 2fr; align-items: center; gap: var(--spacing-48); max-width: var(--page-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding: var(--section-gap) var(--spacing-24) !important; } .intro-jin-photo { margin: 0; } .intro-jin-photo img { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; object-fit: cover !important; display: block !important; border-radius: var(--radius-cards); border: 1px solid var(--color-fog); } .intro-jin-identity { color: var(--color-graphite); font-size: var(--text-subheading); margin-top: var(--spacing-8); margin-bottom: var(--spacing-16); } .dark-mode .intro-jin-identity { color: var(--global-palette5); } .intro-jin-text a { color: var(--color-lavender); text-decoration: underline; } .intro-jin-text a:hover { text-decoration: none; } @media (prefers-reduced-motion: no-preference) { .intro-jin-text a { transition: text-decoration-color 0.15s ease; } } @media (max-width: 782px) { .section-intro-jin { grid-template-columns: 1fr; } } @media (max-width: 480px) { .section-intro-jin { padding-left: var(--spacing-16); padding-right: var(--spacing-16); } } /* ========================================================================== Booking page: how it works New section at the top of /en/korean-lesson-booking-test/, above the page's existing content and its booking widget (Kadence column id="assessmentbook" wrapping an iframe — confirmed live, untouched). Sits on the plain canvas like the homepage's intro section; the policy block is the one part that needs its own elevated-surface + dark-mode text override, same reasoning as every other card-on-canvas pattern already established on the homepage. ========================================================================== */ .section-how-it-works { max-width: var(--page-max-width) !important; margin-left: auto !important; margin-right: auto !important; padding: var(--section-gap) var(--spacing-24) !important; } /* Gutenberg wraps every Group block's content in its own auto-inserted .wp-block-group__inner-container div — confirmed live: .how-it-works-steps (the Group block itself) has exactly ONE direct child, that wrapper, with the four .how-it-works-step divs one level deeper as grandchildren. CSS Grid only ever treats an element's own direct children as grid items, so display:grid on .how-it-works-steps itself was gridding a single item (the wrapper) — one column filled, the second dead. Grid has to go on the wrapper, which is what's actually the steps' direct parent. */ .how-it-works-steps { margin: var(--spacing-32) 0; } .how-it-works-steps > .wp-block-group__inner-container { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: var(--spacing-32); } .how-it-works-step-number { display: block; color: var(--color-lavender); font-size: var(--text-heading-sm); font-weight: var(--font-weight-semibold); line-height: 1; margin: 0 0 var(--spacing-8); } .how-it-works-step h3 { margin: 0 0 var(--spacing-8); } .how-it-works-step p:not(.how-it-works-step-number) { color: var(--color-graphite); margin: 0; } .dark-mode .how-it-works-step p:not(.how-it-works-step-number) { color: var(--global-palette5); } /* Policy card — quiet/informational, card-baseline treatment (elevated surface, dark-aware) rather than a plain-canvas paragraph, so it reads as a distinct, calm callout instead of alarming fine print. */ .how-it-works-policy { background-color: var(--surface-elevated); border: 1px solid var(--color-fog); border-radius: var(--radius-cards); padding: var(--spacing-24); margin-top: var(--spacing-32); } .how-it-works-policy p { color: var(--color-graphite); margin: 0; } .dark-mode .how-it-works-policy p { color: var(--global-palette5); } /* Confirmed live: loses a specificity fight to Kadence core's ".single-content .wp-block-buttons" (2 classes vs. this rule's 1) without !important, landing at margin-top:0 regardless of this declaration. */ .how-it-works-cta { margin-top: var(--spacing-32) !important; } @media (max-width: 782px) { .how-it-works-steps > .wp-block-group__inner-container { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { .section-how-it-works { padding-left: var(--spacing-16); padding-right: var(--spacing-16); } } /* ========================================================================== Mobile + dark fixes Diagnosed live against the actual site (not just source) at ~390px in both modes. Four unrelated root causes, all confirmed: 1. Horizontal overflow — Kadence's OWN core theme CSS resets .alignwide/.alignfull to padding-left/right:0 (this is correct, intentional support for true full-bleed sections — it's not a stray Customizer color like the earlier Page Background bug, so there's no setting to clear here). Every homepage section carries "alignwide" for Gutenberg's own alignment system, so EVERY section's own padding was losing this fight at equal specificity — confirmed live via computed padding-left/right = 0px on every section except .section-korean-lessons, which only survived because an earlier, unrelated fix happened to add !important to its padding already. Fix: add !important to every other section's padding to match. 2. Category pills + the intro section's JustAskJin link going dark-on-dark (or wrong-colored) in dark mode — NOT a missing override, a collision: .entry-content turns out to be the wrapper for the ENTIRE page body (confirmed live — it contains the hero section), not just blog-post content as the selector name implies. The earlier dark-mode text-color-gap fix's ".dark-mode .entry-content a { color: var(--global-palette4) !important; }" therefore matches EVERY link on the homepage, including ones that are supposed to be a different color. Confirmed via isolated .matches() checks, and confirmed viewport-independent (same bug on desktop, just never re-verified after these components shipped). Fixed here with higher-specificity + later-source overrides for the specific links that need a different color. 3. Mobile drawer menu (#mobile-drawer / #mobile-menu) — uses Kadence's SEPARATE "mobile" menu location (confirmed via functions.php's own starter-template registration: 'primary' and 'mobile' are two distinct menu locations), so none of the earlier #primary-menu-scoped fixes ever reached it. Its stray colors are literal hardcoded values from two sources: WordPress's native Customize → Additional CSS panel (a "Cloud-Style Language Switcher" snippet targeting selectors this site doesn't actually use, confirmed by inspecting the live , which also contains a caption-overlay fix and the dead language-switcher snippet from item 3 — several unrelated ad-hoc fixes bundled together over time, not part of any theme file). Overridden here via normal cascade + !important; the panel itself is left untouched. ========================================================================== */ /* --- 1. Horizontal overflow: match Korean Lessons' already-!important padding on every other alignwide/alignfull section. --------------------- */ .hero-section { padding-left: var(--spacing-24) !important; padding-right: var(--spacing-24) !important; } .hero-image-card { padding-left: var(--spacing-16) !important; padding-right: var(--spacing-16) !important; } .section-latest-posts, .section-intro-jin, .section-justaskjin-inner, .section-email-capture-inner, .section-how-it-works { padding-left: var(--spacing-24) !important; padding-right: var(--spacing-24) !important; } @media (max-width: 480px) { .hero-section, .section-latest-posts, .section-intro-jin, .section-justaskjin-inner, .section-korean-lessons, .section-email-capture-inner, .section-how-it-works { padding-left: var(--spacing-16) !important; padding-right: var(--spacing-16) !important; } } /* --- 2. .entry-content dark-mode collision: give the links that need a different color a higher-specificity, later-source override. ---------- */ .dark-mode .post-category-pill a[href*="/category/living-tips/"], .dark-mode .post-category-pill a[href*="/category/culture-society/"] { color: var(--color-sky) !important; } .dark-mode .post-category-pill a[href*="/category/family-parenting/"], .dark-mode .post-category-pill a[href*="/category/gourmet/"] { color: var(--color-magenta) !important; } .dark-mode .post-category-pill a[href*="/category/driving-in-korea/"], .dark-mode .post-category-pill a[href*="/category/visa-admin/"] { color: var(--color-amber) !important; } .dark-mode .post-category-pill a[href*="/category/travel/"], .dark-mode .post-category-pill a[href*="/category/sports-events/"] { color: var(--color-mint) !important; } .dark-mode .intro-jin-text a { color: var(--color-lavender) !important; } /* --- 3. Mobile drawer menu — restyled to the design system. ------------ */ #mobile-drawer .drawer-inner { background-color: var(--surface-elevated) !important; } .mobile-navigation ul li > a, .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap { color: var(--color-carbon) !important; font-family: var(--font-inter) !important; background: none !important; /* Confirmed live: 26px/10px padding at 20px font-size/32px line-height — each item was ~84px tall. Trimmed to the body type scale. */ padding: var(--spacing-12) var(--spacing-20) !important; font-size: var(--text-subheading) !important; line-height: var(--leading-subheading) !important; } .mobile-navigation ul li > a:lang(ko) { font-family: var(--font-pretendard) !important; } .mobile-navigation ul li > a:lang(ja) { font-family: var(--font-noto-jp) !important; } .dark-mode .mobile-navigation ul li > a, .dark-mode .mobile-navigation ul li.menu-item-has-children > .drawer-nav-drop-wrap { color: var(--global-palette4) !important; } .mobile-navigation .drawer-nav-drop-wrap { background-color: var(--surface-elevated) !important; border-color: var(--color-fog) !important; } /* Mobile language switcher — flag images stay hidden; Polylang now renders its own native language-name text in the drawer too (same upstream display-setting change as desktop), so the earlier ::before content-injection rules (including the 2026-07-23 direct-child-selector fix that made them start matching the trigger) are removed entirely — they were producing doubled labels like "ENEnglish" once Polylang's own text appeared alongside them. */ .mobile-navigation .pll-parent-menu-item img, .mobile-navigation .lang-item img { display: none !important; } /* --- 4. JustAskJin widget: shrink and tuck tighter at mobile so it can't overlap the JustAskJin band's CTA or the footer's Privacy Policy link. Full restyle deferred; this only fixes the overlap. ------------------- */ @media (max-width: 480px) { .jaj-bubble { display: none !important; } .jaj-face { width: 44px !important; height: 44px !important; } .jaj-wrap { bottom: 12px !important; right: 12px !important; } } /* ========================================================================== Service components (2026-07-23) Per DESIGN-service.md + the approved OrderBuilder.dc.html prototype (variant 1a / stacked radio cards only — the segmented-control variant in that file is NOT built here). Justaskjin-only block; not part of the liveinkojpau design system. Reuses existing tokens/rules rather than duplicating them: text inputs already have Fog borders, Lavender-on-focus, and a global focus-visible ring (see "Form inputs" above) — form-field classes below only add label/error/success styling, not input styling itself. CTA buttons reuse .wp-block-button__link (Carbon-on-Lavender, not white-on-Lavender — the prototype's CTA uses white text, but this theme's Carbon-on- Lavender choice is a documented WCAG contrast decision, kept here on purpose rather than matched to the prototype). Two colors below (status chip OPEN/PRE-ORDER states) are NOT design tokens — they're the prototype's own contrast-safe derivatives of Mint/ Amber, needed because the raw tokens don't clear text/background contrast at chip size. Flagged here since DESIGN-service.md says no new colors outside the tokens; treated as an approved exception because the prototype is named the authoritative visual spec for this exact component and accessibility is non-negotiable. ========================================================================== */ /* --- Radio card group (1a stacked) -------------------------------------- */ .radio-card-group { display: flex; flex-direction: column; gap: var(--spacing-12); } .radio-card { display: flex; align-items: center; gap: var(--spacing-16); min-height: 44px; border: 1px solid var(--color-fog); border-radius: var(--radius-cards); background-color: transparent; padding: var(--spacing-16); cursor: pointer; box-sizing: border-box; } .radio-card.is-selected { border: 1.5px solid var(--color-lavender); background-color: rgba(145, 141, 246, 0.08); } .dark-mode .radio-card.is-selected { background-color: rgba(145, 141, 246, 0.16); } .radio-card input[type="radio"] { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--color-fog); margin: 0; flex: none; cursor: pointer; background-color: transparent; box-sizing: border-box; } .radio-card input[type="radio"]:checked { border: 7px solid var(--color-lavender); } .radio-card input[type="radio"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(145, 141, 246, 0.35); } .radio-card-body { flex: 1; min-width: 0; } .radio-card-name { display: block; font-size: var(--text-subheading); font-weight: var(--font-weight-bold); color: var(--color-carbon); } .dark-mode .radio-card-name { color: var(--global-palette4); } .radio-card-desc { display: block; font-size: 12.5px; color: var(--color-graphite); margin-top: 2px; } .dark-mode .radio-card-desc { color: var(--global-palette5); } .radio-card-price { flex: none; font-size: var(--text-subheading); font-weight: var(--font-weight-bold); color: var(--color-carbon); } .dark-mode .radio-card-price { color: var(--global-palette4); } /* --- Form fields --------------------------------------------------------- Input/textarea box styling, Fog border, Lavender focus, is all already covered by the generic input[type=...] rules earlier in this file. This section only adds what's new: labels above fields, inline validation, success state. */ .form-field { margin-top: var(--spacing-16); } .form-field label { display: block; font-size: 13px; font-weight: var(--font-weight-medium); color: var(--color-graphite); margin-bottom: var(--spacing-8); } .dark-mode .form-field label { color: var(--global-palette5); } .form-field textarea { min-height: 76px; resize: vertical; } .form-field-error { font-size: 12px; color: var(--color-magenta); margin-top: var(--spacing-8); } .form-success { border: 1px solid var(--color-fog); border-radius: var(--radius-cards); padding: var(--spacing-24); background-color: var(--color-mint-wash); } .dark-mode .form-success { background-color: rgba(51, 199, 88, 0.12); } .form-success-title { font-family: var(--font-fraunces); font-weight: var(--font-weight-semibold); font-size: 21px; color: var(--color-carbon); } .dark-mode .form-success-title { color: var(--global-palette4); } .form-success-body { font-size: var(--text-body); line-height: 1.6; color: var(--color-graphite); margin-top: var(--spacing-8); } .dark-mode .form-success-body { color: var(--global-palette5); } /* --- Ruled pricing table ------------------------------------------------- Never a card grid — Fog hairline rows, right-aligned prices. */ .ruled-table { border: 1px solid var(--color-fog); border-radius: var(--radius-tables); overflow: hidden; } .ruled-table-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--spacing-16); padding: var(--spacing-16) var(--spacing-24); border-bottom: 1px solid var(--color-fog); } .ruled-table-row:last-child { border-bottom: none; } .ruled-table-label { font-size: var(--text-body); color: var(--color-graphite); } .dark-mode .ruled-table-label { color: var(--global-palette5); } .ruled-table-value { font-size: var(--text-body); font-weight: var(--font-weight-medium); color: var(--color-carbon); text-align: right; } .dark-mode .ruled-table-value { color: var(--global-palette4); } .ruled-table-row.is-total .ruled-table-label, .ruled-table-row.is-total .ruled-table-value { font-weight: var(--font-weight-bold); } .ruled-table-row.is-total .ruled-table-value { font-family: var(--font-fraunces); font-size: var(--text-heading-sm); } /* --- Trust strip ---------------------------------------------------------- Quiet muted text, no icons, no cards. Claims separated by literal " · " in the markup itself (matches the prototype's plain-text approach) — e.g.

Jin confirms first · PayPal after confirmation · EN / JA

. */ .trust-strip { margin: 0; font-size: 12px; color: var(--color-ash); } .dark-mode .trust-strip { color: var(--global-palette6); } /* --- Status chip (3 states) ---------------------------------------------- State comes from markup/JS (a class), never hardcoded in CSS — this only styles whichever of is-open/is-preorder/is-closed is present. */ .status-chip { display: inline-flex; align-items: center; gap: var(--spacing-8); border-radius: var(--radius-tags); padding: 6px 14px; font-size: 12px; font-weight: var(--font-weight-bold); letter-spacing: 0.02em; } .status-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background-color: currentColor; } .status-chip.is-open { background-color: var(--color-mint-wash); color: #1b7d3a; } .dark-mode .status-chip.is-open { background-color: rgba(51, 199, 88, 0.16); color: #7ce39c; } .status-chip.is-preorder { background-color: rgba(255, 166, 0, 0.14); color: #8a5b00; } .dark-mode .status-chip.is-preorder { background-color: rgba(255, 166, 0, 0.16); color: #ffc35c; } .status-chip.is-closed { background-color: var(--color-mist); color: var(--color-graphite); } .dark-mode .status-chip.is-closed { background-color: var(--surface-elevated); color: var(--global-palette5); } /* --- Sticky action bar --------------------------------------------------- Mobile-sticky total + breakdown, never a single opaque number. CTA button reuses .wp-block-button__link — pair this class with a real core button block, don't restyle a bare