/* language-v2.css
* AnngooLink language landing page (homepage mockup port — 20260529).
*
* Source mockup: design/20260529-homepage-html-mockup/shared/{tokens,base,layout,components}.css
* Everything is scoped under `.alp-lang-v2` so the Kadence theme's global CSS
* cannot bleed in, and so these styles never leak to the rest of the site.
*
* Wrapper markup (PHP-owned):
* …
*
* STRIPPED (theme/plugin owns these — not part of the body):
* .site-header / .brand* / .main-nav / .header-login / .nav-toggle
* .site-footer / .footer-nav / .footer-bottom / .footer-copy / .footer-social
*
* Per-variant difference is COLOR ONLY (tokens remapped at the bottom):
* JP = pink/coral (mockup default) · KR = green · EN = blue.
*
* Hero background image uses the mockup mechanism: `.hero::before` paints
* `var(--hero-image)`. A sensible default is set here; JS overrides per slide.
*/
/* ============================================================
Design tokens (was :root) — scoped to the wrapper
============================================================ */
.alp-lang-v2 {
/* Brand pinks — JP default palette */
--pink-primary: #E7668C;
--pink-strong: #DE547D;
--pink-deep: #D7497A;
--pink-soft: #FCE3E9;
--pink-softer: #FCEFF1;
--pink-wash: #FDF2F5;
/* Language-card header tints */
--tint-jp: #FDEEF1;
--tint-kr: #F5ECFD;
--tint-en: #E8F0FD;
--tint-st: #E5F8EF;
--tint-jp-ink: #E0589A;
--tint-kr-ink: #8A6FD0;
--tint-en-ink: #4F8FD6;
--tint-st-ink: #3FA98C;
/* Text */
--ink: #303744;
--ink-soft: #4B5158;
--body: #6B7280;
--muted: #9AA1AA;
--on-pink: #FFFFFF;
/* Surfaces / lines */
--surface: #FFFFFF;
--line: #F2DCE7;
--line-soft: #F4E9EF;
--field-bg: #FFFFFF;
--field-border: #E9D6E0;
--star: #F6B73C;
/* Layout */
--container: 1200px;
--gutter: 24px;
--section-y: 12px;
/* Shape */
--r-sm: 10px;
--r-md: 16px;
--r-lg: 22px;
--pill: 9999px;
/* Elevation (soft, pink-tinted) */
--shadow-card: 0 12px 30px rgba(216, 74, 138, .10);
--shadow-soft: 0 6px 18px rgba(53, 58, 64, .06);
--shadow-btn: 0 8px 18px rgba(216, 74, 138, .28);
/* Type families */
--font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Hiragino Sans", "Yu Gothic", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
--font-display: "PingFang TC", "Noto Serif TC", "Hiragino Mincho ProN", "Yu Mincho", "Microsoft JhengHei", serif;
--font-tc: var(--font-sans);
--font-jp: "Noto Sans JP", var(--font-sans);
/* Motion */
--ease: cubic-bezier(.4, 0, .2, 1);
/* Hero default image (JS overrides per slide). Plugin assets path. */
--hero-image: none; /* set inline per-slide by PHP/JS from ACF/media */
}
/* ============================================================
Reset / typography baseline (was *, body, base elements)
Defensive: explicitly reset elements Kadence styles globally.
============================================================ */
.alp-lang-v2 *,
.alp-lang-v2 *::before,
.alp-lang-v2 *::after { box-sizing: border-box; }
.alp-lang-v2 * { margin: 0; }
.alp-lang-v2 {
font-family: var(--font-tc);
color: var(--ink);
background: var(--surface);
line-height: 1.5;
font-size: 14.5px;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-webkit-text-size-adjust: 100%;
}
/* Defensive element resets so theme heading/paragraph/list styles don't win */
.alp-lang-v2 h1,
.alp-lang-v2 h2,
.alp-lang-v2 h3,
.alp-lang-v2 h4 {
margin: 0;
padding: 0;
font-family: var(--font-display);
font-weight: 700;
line-height: 1.2;
color: var(--ink);
}
.alp-lang-v2 p {
margin: 0;
padding: 0;
font-family: var(--font-tc);
line-height: 1.5;
color: inherit;
}
.alp-lang-v2 ul {
list-style: none;
margin: 0;
padding: 0;
}
.alp-lang-v2 li {
margin: 0;
padding: 0;
line-height: 1.5;
}
.single-content .alp-lang-v2 h1,
.single-content .alp-lang-v2 h2,
.single-content .alp-lang-v2 h3,
.single-content .alp-lang-v2 h4,
.single-content .alp-lang-v2 h5,
.single-content .alp-lang-v2 h6,
.single-content .alp-lang-v2 p,
.single-content .alp-lang-v2 ul,
.single-content .alp-lang-v2 ol,
.single-content .alp-lang-v2 li,
.entry-content .alp-lang-v2 h1,
.entry-content .alp-lang-v2 h2,
.entry-content .alp-lang-v2 h3,
.entry-content .alp-lang-v2 h4,
.entry-content .alp-lang-v2 h5,
.entry-content .alp-lang-v2 h6,
.entry-content .alp-lang-v2 p,
.entry-content .alp-lang-v2 ul,
.entry-content .alp-lang-v2 ol,
.entry-content .alp-lang-v2 li {
margin-bottom: 0;
}
.alp-lang-v2 img,
.alp-lang-v2 svg { display: block; max-width: 100%; }
.alp-lang-v2 img { height: auto; }
.alp-lang-v2 a {
color: inherit;
text-decoration: none;
font-family: var(--font-tc);
}
.alp-lang-v2 button {
font: inherit;
color: inherit;
cursor: pointer;
border: 0;
background: none;
margin: 0;
padding: 0;
font-family: var(--font-tc);
}
.alp-lang-v2 input,
.alp-lang-v2 select,
.alp-lang-v2 textarea { font: inherit; color: inherit; }
/* Container */
.alp-lang-v2 .container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
/* Section rhythm */
.alp-lang-v2 .section { padding-block: var(--section-y); }
.alp-lang-v2 .section--soft { background: var(--surface); }
.alp-lang-v2 .section--band { background: var(--pink-soft); }
.alp-lang-v2 .section--white { background: var(--surface); }
/* Centered section heading with sakura flourish */
.alp-lang-v2 .section-head { text-align: center; margin-bottom: 10px; }
.alp-lang-v2 .section-head h2 {
font-size: clamp(21px, 2.05vw, 26px);
font-weight: 800;
letter-spacing: .01em;
color: var(--ink);
display: inline-flex;
align-items: center;
gap: 16px;
}
.alp-lang-v2 .section-head h2::before,
.alp-lang-v2 .section-head h2::after {
content: "";
width: 54px;
height: 14px;
opacity: .8;
background-image: radial-gradient(circle, var(--pink-primary) 38%, transparent 42%);
background-size: 14px 14px;
background-repeat: repeat-x;
background-position: center;
}
.alp-lang-v2 .section-head h2::before { mask-image: linear-gradient(90deg, transparent, #000); }
.alp-lang-v2 .section-head h2::after { mask-image: linear-gradient(270deg, transparent, #000); }
.alp-lang-v2 .section-head p { margin-top: 10px; color: var(--body); font-size: 15px; }
/* Icon system (inline sprite) */
.alp-lang-v2 .ico { width: 1em; height: 1em; vertical-align: middle; }
/* JP kana line */
.alp-lang-v2 .jp { font-family: var(--font-jp); }
/* Utilities */
.alp-lang-v2 .eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--pink-primary); }
.alp-lang-v2 .sr-only {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.alp-lang-v2 .visually-hidden { display: none; }
/* ============================================================
Hero
============================================================ */
.alp-lang-v2 .hero {
position: relative;
overflow: hidden;
min-height: 356px;
background: var(--pink-wash);
}
.alp-lang-v2 .hero::before,
.alp-lang-v2 .hero::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.alp-lang-v2 .hero::before {
left: 30%;
background-image: var(--hero-image);
background-position: center top;
background-size: cover;
background-repeat: no-repeat;
z-index: 0;
transition: opacity .28s var(--ease), filter .28s var(--ease);
}
.alp-lang-v2 .hero::after {
background:
linear-gradient(90deg,
rgba(255, 255, 255, .98) 0%,
rgba(255, 248, 251, .98) 28%,
rgba(255, 246, 250, .9) 35%,
rgba(255, 246, 250, .35) 43%,
rgba(255, 246, 250, .06) 54%,
rgba(255, 246, 250, 0) 66%),
linear-gradient(180deg, rgba(255, 255, 255, .06) 0%, rgba(253, 242, 245, .08) 100%);
z-index: 1;
}
.alp-lang-v2 .hero .container {
position: relative;
z-index: 2;
display: block;
min-height: 356px;
padding-block: 54px 48px;
}
.alp-lang-v2 .hero__text { max-width: 520px; }
.alp-lang-v2 .hero__title { font-family: var(--font-display); font-size: clamp(34px, 3vw, 46px); font-weight: 700; letter-spacing: 0; line-height: 1.08; color: var(--ink); }
.alp-lang-v2 .hero__lead { margin-top: 12px; font-size: clamp(19px, 1.9vw, 26px); font-weight: 700; line-height: 1.34; color: var(--pink-primary); }
.alp-lang-v2 .hero__sub { margin-top: 10px; font-size: 15px; color: var(--body); }
.alp-lang-v2 .hero__dots { display: flex; gap: 8px; margin-top: 17px; }
.alp-lang-v2 .hero__dots button {
width: 9px; height: 9px;
border-radius: var(--pill);
background: #F2C7DA;
box-shadow: none;
transition: width .2s var(--ease), background .2s var(--ease), transform .2s var(--ease);
}
.alp-lang-v2 .hero__dots button:hover { transform: translateY(-1px); background: #EFA6C1; }
.alp-lang-v2 .hero__dots button.is-active { width: 22px; background: var(--pink-primary); }
.alp-lang-v2 .hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 19px; }
.alp-lang-v2 .hero__cta .btn { min-width: 144px; padding: 13px 24px; font-size: 15px; }
.alp-lang-v2 .hero::selection { background: rgba(216, 74, 138, .18); }
.alp-lang-v2 .hero > .petal { display: none; }
.alp-lang-v2 .hero .container::after {
content: "";
position: absolute;
left: calc(var(--gutter) * -1);
bottom: -74px;
width: min(58vw, 690px);
height: 136px;
background: rgba(248, 201, 218, .5);
border-radius: 0 100% 0 0;
transform: skewX(-15deg);
z-index: -1;
}
/* sakura petals */
.alp-lang-v2 .petal { position: absolute; color: var(--pink-primary); opacity: .18; pointer-events: none; }
.alp-lang-v2 .petal--1 { top: 12%; left: 44%; width: 26px; transform: rotate(12deg); }
.alp-lang-v2 .petal--2 { top: 30%; left: 38%; width: 18px; opacity: .12; }
.alp-lang-v2 .petal--3 { bottom: 16%; left: 47%; width: 22px; opacity: .14; transform: rotate(-18deg); }
/* ============================================================
Offerings grid
============================================================ */
.alp-lang-v2 .offerings-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* ============================================================
Origin (微笑日語的開始)
============================================================ */
.alp-lang-v2 .origin {
position: relative;
overflow: hidden;
background:
linear-gradient(90deg, rgba(253, 235, 242, .97), rgba(255, 248, 251, .93)),
var(--origin-bg) center right / 48% auto no-repeat;
}
.alp-lang-v2 .origin::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle at 84% 18%, rgba(216, 74, 138, .12), transparent 24%),
linear-gradient(90deg, rgba(253, 235, 242, .8), rgba(255, 255, 255, .42));
pointer-events: none;
}
.alp-lang-v2 .origin .container { display: grid; grid-template-columns: 0.78fr 1.22fr; gap: 36px; align-items: center; }
.alp-lang-v2 .origin__sakura { position: absolute; top: 8%; right: 4%; width: 110px; color: var(--pink-primary); opacity: .35; }
.alp-lang-v2 .origin__copy {
position: relative;
padding: 26px 30px;
border-radius: 8px;
background:
linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(255, 247, 250, .72)),
var(--origin-copy-bg) right center / auto 100% no-repeat;
box-shadow: 0 18px 42px rgba(216, 74, 138, .11);
overflow: hidden;
}
.alp-lang-v2 .origin__copy::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(255, 250, 252, .9) 60%, rgba(255, 250, 252, .64) 100%);
pointer-events: none;
}
.alp-lang-v2 .origin__copy > * { position: relative; z-index: 1; }
.alp-lang-v2 .origin__copy h2 { font-family: var(--font-display); font-size: clamp(23px, 2.2vw, 29px); font-weight: 700; color: var(--pink-primary); }
.alp-lang-v2 .origin__copy p { margin-top: 9px; color: var(--ink-soft); font-size: 14px; line-height: 1.68; max-width: 42ch; }
.alp-lang-v2 .origin__concepts { display: flex; gap: 22px; margin-top: 14px; }
/* ============================================================
Teachers grid
============================================================ */
.alp-lang-v2 .teachers-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; align-items: stretch; }
/* Horizontal scroll variant (PHP adds `teachers-grid--scroll` when > 4 cards) */
.alp-lang-v2 .teachers-grid--scroll {
display: flex;
flex-wrap: nowrap;
grid-template-columns: none;
gap: 26px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
padding-bottom: 8px;
scrollbar-width: thin;
scrollbar-color: var(--pink-primary) var(--pink-softer);
}
.alp-lang-v2 .teachers-grid--scroll > .teacher-card {
flex: 0 0 clamp(260px, 80%, 300px);
scroll-snap-align: start;
}
.alp-lang-v2 .teachers-grid--scroll::-webkit-scrollbar { height: 8px; }
.alp-lang-v2 .teachers-grid--scroll::-webkit-scrollbar-track { background: var(--pink-softer); border-radius: var(--pill); }
.alp-lang-v2 .teachers-grid--scroll::-webkit-scrollbar-thumb { background: var(--pink-primary); border-radius: var(--pill); }
.alp-lang-v2 .teachers-grid--scroll::-webkit-scrollbar-thumb:hover { background: var(--pink-strong); }
/* ============================================================
Articles
============================================================ */
.alp-lang-v2 .articles-layout { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: 22px; align-items: stretch; }
.alp-lang-v2 .articles-mini { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 14px; }
/* ============================================================
Resources
============================================================ */
.alp-lang-v2 .resources-wrap {
background: #FEF7F9;
border-radius: 8px;
padding: 30px clamp(22px, 3.2vw, 44px) 34px;
box-shadow: inset 0 0 0 1px rgba(216, 74, 138, .04);
}
.alp-lang-v2 .resources-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
/* ============================================================
Contact
============================================================ */
.alp-lang-v2 .contact-layout { display: grid; grid-template-columns: 0.8fr 1.35fr 0.85fr; gap: 24px; align-items: stretch; }
/* ============================================================
Buttons
============================================================ */
.alp-lang-v2 .btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
font-weight: 700;
font-size: 16px;
line-height: 1;
padding: 14px 28px;
border-radius: var(--pill);
transition: transform .18s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
white-space: nowrap;
}
.alp-lang-v2 .btn .ico { width: 18px; height: 18px; }
.alp-lang-v2 .btn-primary { background: var(--pink-primary); color: #fff; box-shadow: var(--shadow-btn); }
.alp-lang-v2 .btn-primary:hover { background: var(--pink-strong); transform: translateY(-2px); }
.alp-lang-v2 .btn-outline { background: #fff; color: var(--pink-primary); border: 1.6px solid var(--pink-primary); }
.alp-lang-v2 .btn-outline:hover { background: var(--pink-softer); }
.alp-lang-v2 .btn-sm { padding: 10px 20px; font-size: 14px; }
.alp-lang-v2 .btn-block { width: 100%; }
/* on-pink variants (CTA card) */
.alp-lang-v2 .btn-white { background: #fff; color: var(--pink-primary); }
.alp-lang-v2 .btn-white:hover { background: rgba(255, 255, 255, .9); transform: translateY(-2px); }
.alp-lang-v2 .btn-ghost-white { background: rgba(255, 255, 255, .12); color: #fff; border: 1.6px solid rgba(255, 255, 255, .85); }
.alp-lang-v2 .btn-ghost-white:hover { background: rgba(255, 255, 255, .22); }
/* text link "了解更多 →" */
.alp-lang-v2 .text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pink-primary); font-weight: 700; font-size: 14.5px; }
.alp-lang-v2 .text-link .ico { width: 16px; height: 16px; transition: transform .2s var(--ease); }
.alp-lang-v2 .text-link:hover .ico { transform: translateX(3px); }
/* ============================================================
Flag chip
============================================================ */
.alp-lang-v2 .flag { font-size: 20px; line-height: 1; }
.alp-lang-v2 .chip {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 12.5px;
font-weight: 700;
padding: 5px 12px;
border-radius: var(--pill);
background: #fff;
color: var(--ink);
box-shadow: var(--shadow-soft);
}
/* ============================================================
Aspect-ratio media fix (absolutely-position cover images)
============================================================ */
.alp-lang-v2 .offer-card__photo,
.alp-lang-v2 .article-feature__photo,
.alp-lang-v2 .origin-carousel__main,
.alp-lang-v2 .origin-carousel__thumb { position: relative; }
.alp-lang-v2 .offer-card__photo > img,
.alp-lang-v2 .teacher-card__media > img,
.alp-lang-v2 .article-feature__photo > img,
.alp-lang-v2 .origin-carousel__main > img,
.alp-lang-v2 .origin-carousel__thumb > img,
.alp-lang-v2 .hero__media > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* ============================================================
Offering card
============================================================ */
.alp-lang-v2 .offer-card {
background: var(--surface);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
transition: transform .22s var(--ease), box-shadow .22s var(--ease);
}
.alp-lang-v2 .offer-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(216, 74, 138, .16); }
.alp-lang-v2 .offer-card:focus-visible {
outline: 3px solid color-mix(in srgb, var(--pink-primary) 72%, #fff);
outline-offset: 5px;
}
.alp-lang-v2 .offer-card:hover .text-link,
.alp-lang-v2 .offer-card:focus-visible .text-link {
gap: 9px;
}
.alp-lang-v2 .offer-card__head { padding: 12px 16px 10px; text-align: center; }
.alp-lang-v2 .offer-card__head .flag { font-size: 24px; }
.alp-lang-v2 .offer-card__title { display: flex; align-items: center; justify-content: center; gap: 9px; font-size: 22px; font-weight: 800; }
.alp-lang-v2 .offer-card__desc { margin-top: 6px; font-size: 13px; color: var(--body); line-height: 1.5; }
.alp-lang-v2 .offer-card__photo { aspect-ratio: 7 / 6; background: var(--pink-soft); }
.alp-lang-v2 .offer-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.alp-lang-v2 .offer-card__foot { padding: 10px 16px 14px; }
.alp-lang-v2 .offer-card--jp .offer-card__head { background: var(--tint-jp); }
.alp-lang-v2 .offer-card--jp .offer-card__title { color: var(--tint-jp-ink); }
.alp-lang-v2 .offer-card--kr .offer-card__head { background: var(--tint-kr); }
.alp-lang-v2 .offer-card--kr .offer-card__title { color: var(--tint-kr-ink); }
.alp-lang-v2 .offer-card--en .offer-card__head { background: var(--tint-en); }
.alp-lang-v2 .offer-card--en .offer-card__title { color: var(--tint-en-ink); }
.alp-lang-v2 .offer-card--st .offer-card__head { background: var(--tint-st); }
.alp-lang-v2 .offer-card--st .offer-card__title { color: var(--tint-st-ink); }
.alp-lang-v2 .offer-card--st .offer-card__head .ico { width: 26px; height: 26px; color: var(--tint-st-ink); }
/* ============================================================
Origin carousel + concepts
============================================================ */
.alp-lang-v2 .origin-carousel { position: relative; display: grid; grid-template-columns: 1.5fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; }
.alp-lang-v2 .origin-carousel__main { grid-row: 1 / 3; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: var(--shadow-card); aspect-ratio: 5 / 7; }
.alp-lang-v2 .origin-carousel__main img { width: 100%; height: 100%; object-fit: cover; }
.alp-lang-v2 .origin-carousel__thumb { border-radius: 8px; overflow: hidden; background: var(--pink-soft); box-shadow: var(--shadow-soft); }
.alp-lang-v2 .origin-carousel__thumb img { width: 100%; height: 100%; object-fit: cover; }
.alp-lang-v2 .origin-carousel__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 38px; height: 38px;
border-radius: var(--pill);
background: var(--pink-primary);
color: #fff;
display: grid;
place-items: center;
box-shadow: var(--shadow-btn);
z-index: 2;
}
.alp-lang-v2 .origin-carousel__nav .ico { width: 20px; height: 20px; }
.alp-lang-v2 .origin-carousel__nav--prev { left: -14px; }
.alp-lang-v2 .origin-carousel__nav--next { right: -14px; }
.alp-lang-v2 .origin-carousel img { transition: opacity .2s var(--ease); }
.alp-lang-v2 .concept { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: center; text-align: left; }
.alp-lang-v2 .concept__icon {
width: 44px; height: 44px;
margin: 0;
grid-column: 1;
grid-row: 1 / 3;
border-radius: var(--pill);
border: 2px solid var(--pink-primary);
color: var(--pink-primary);
display: grid;
place-items: center;
}
.alp-lang-v2 .concept__icon .ico { width: 24px; height: 24px; }
.alp-lang-v2 .concept__jp { font-size: 13px; color: var(--pink-primary); font-weight: 600; }
.alp-lang-v2 .concept__zh { font-size: 14px; color: var(--ink); font-weight: 600; margin-top: 2px; }
/* ============================================================
Teacher card
============================================================ */
.alp-lang-v2 .teacher-card {
display: grid;
grid-template-columns: minmax(132px, 43%) minmax(0, 1fr);
min-height: 224px;
background: var(--surface);
border: 1px solid rgba(216, 74, 138, .14);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 16px 34px rgba(216, 74, 138, .10);
}
.alp-lang-v2 .teacher-card__media { position: relative; min-height: 224px; background: var(--pink-soft); }
.alp-lang-v2 .teacher-card__media > img { object-position: center center; }
.alp-lang-v2 .teacher-card:first-child .teacher-card__media > img { object-position: center top; }
.alp-lang-v2 .teacher-card__flag {
position: relative;
width: fit-content;
margin-bottom: 10px;
padding: 6px 13px;
border-radius: 6px;
box-shadow: 0 8px 18px rgba(216, 74, 138, .10);
}
.alp-lang-v2 .teacher-card__flag::after {
content: "";
position: absolute;
right: -12px;
top: 50%;
width: 6px; height: 6px;
border-radius: var(--pill);
background: rgba(232, 85, 140, .22);
transform: translateY(-50%);
}
.alp-lang-v2 .teacher-card__inset {
position: absolute;
right: 14px; bottom: 14px;
width: 92px; height: 92px;
border-radius: var(--pill);
border: 5px solid #fff;
overflow: hidden;
box-shadow: 0 14px 26px rgba(20, 31, 49, .18);
background: #fff;
}
.alp-lang-v2 .teacher-card__inset img { width: 100%; height: 100%; object-fit: cover; }
.alp-lang-v2 .teacher-card__avatar-empty {
position: absolute;
right: 14px; bottom: 14px;
transform: none;
width: 98px; height: 98px;
border-radius: var(--pill);
background: #E9EBEE;
display: grid;
place-items: center;
color: #B9BEC6;
border: 5px solid #fff;
box-shadow: 0 14px 26px rgba(20, 31, 49, .14);
}
.alp-lang-v2 .teacher-card__avatar-empty .ico { width: 46px; height: 46px; }
.alp-lang-v2 .teacher-card__body { padding: 22px 20px 18px; display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.alp-lang-v2 .teacher-card__name { font-family: var(--font-sans); font-size: 22px; font-weight: 800; line-height: 1.15; }
.alp-lang-v2 .teacher-card__list { margin: 10px 0 14px; display: grid; gap: 6px; }
.alp-lang-v2 .teacher-card__list li { position: relative; padding-left: 15px; font-size: 13.5px; line-height: 1.43; color: var(--body); }
.alp-lang-v2 .teacher-card__list li::before { content: ""; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; border-radius: var(--pill); background: var(--ink); }
.alp-lang-v2 .teacher-card .btn { align-self: flex-start; min-width: 132px; padding-inline: 22px; }
.alp-lang-v2 .teacher-card--recruit .teacher-card__name { color: var(--pink-primary); }
/* ============================================================
Article cards
============================================================ */
.alp-lang-v2 .article-feature {
background: var(--surface);
border-radius: var(--r-md);
overflow: hidden;
box-shadow: var(--shadow-card);
display: flex;
flex-direction: column;
height: 100%;
}
.alp-lang-v2 .article-feature__photo { aspect-ratio: 16 / 6; background: var(--pink-soft); }
.alp-lang-v2 .article-feature__photo img { width: 100%; height: 100%; object-fit: cover; }
.alp-lang-v2 .article-feature__body { padding: 14px 18px 16px; }
.alp-lang-v2 .article-feature__title { font-size: 20px; font-weight: 800; margin: 3px 0; }
.alp-lang-v2 .article-feature__excerpt { color: var(--body); font-size: 14px; margin-bottom: 7px; }
.alp-lang-v2 .article-mini {
display: flex;
gap: 13px;
background: var(--surface);
border-radius: 8px;
padding: 12px;
box-shadow: var(--shadow-soft);
align-items: center;
transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.alp-lang-v2 .article-mini:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.alp-lang-v2 .article-mini__thumb { flex: 0 0 72px; width: 72px; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: var(--pink-soft); }
.alp-lang-v2 .article-mini__thumb img { width: 100%; height: 100%; object-fit: cover; }
.alp-lang-v2 .article-mini__body { min-width: 0; flex: 1; }
.alp-lang-v2 .article-mini__title { font-size: 15px; font-weight: 700; margin: 3px 0; }
.alp-lang-v2 .article-mini__excerpt { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.alp-lang-v2 .article-mini__arrow { color: var(--pink-primary); }
.alp-lang-v2 .article-mini__arrow .ico { width: 18px; height: 18px; }
.alp-lang-v2 .tag { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.alp-lang-v2 .tag--jp { color: var(--tint-jp-ink); }
.alp-lang-v2 .tag--kr { color: var(--tint-kr-ink); }
.alp-lang-v2 .tag--en { color: var(--tint-en-ink); }
.alp-lang-v2 .tag--method { color: var(--tint-st-ink); }
/* ============================================================
Resource item
============================================================ */
.alp-lang-v2 .resource {
display: grid;
grid-template-columns: auto 1fr;
column-gap: 16px;
align-items: center;
text-align: left;
min-height: 104px;
padding: 18px 20px;
border-radius: 8px;
background: #fff;
box-shadow: 0 12px 28px rgba(216, 74, 138, .08);
}
.alp-lang-v2 .resource__icon {
width: 58px; height: 58px;
margin: 0;
grid-column: 1;
grid-row: 1 / 3;
border-radius: var(--pill);
background: var(--pink-primary);
color: #fff;
display: grid;
place-items: center;
box-shadow: var(--shadow-btn);
}
.alp-lang-v2 .resource__icon .ico { width: 28px; height: 28px; }
.alp-lang-v2 .resource__title { font-size: 18px; font-weight: 800; color: var(--pink-strong); }
.alp-lang-v2 .resource__desc { margin-top: 5px; font-size: 14px; color: var(--body); line-height: 1.55; }
/* ============================================================
Contact info + form
============================================================ */
.alp-lang-v2 .contact-info { display: flex; flex-direction: column; gap: 10px; }
.alp-lang-v2 .contact-info__brand { font-size: 20px; font-weight: 800; }
.alp-lang-v2 .contact-info__brand small { display: block; font-size: 13px; font-weight: 500; color: var(--muted); margin-top: 2px; }
.alp-lang-v2 .contact-row { display: flex; align-items: center; gap: 14px; }
.alp-lang-v2 .contact-row__icon {
width: 44px; height: 44px;
flex: none;
border-radius: var(--pill);
background: var(--pink-softer);
color: var(--pink-primary);
display: grid;
place-items: center;
}
.alp-lang-v2 .contact-row__icon .ico { width: 20px; height: 20px; }
.alp-lang-v2 .contact-row__icon--line { background: #EAF7EC; color: #06C755; }
.alp-lang-v2 .contact-row__icon--msg { background: #E9F1FF; color: #0A7CFF; }
.alp-lang-v2 .contact-row__label { font-size: 12px; color: var(--muted); }
.alp-lang-v2 .contact-row__value { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.alp-lang-v2 .contact-form { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-card); padding: 11px; }
.alp-lang-v2 .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.alp-lang-v2 .field { display: flex; flex-direction: column; gap: 3px; }
.alp-lang-v2 .field--full { grid-column: 1 / -1; }
.alp-lang-v2 .field label { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.alp-lang-v2 .field input,
.alp-lang-v2 .field select,
.alp-lang-v2 .field textarea {
background: var(--field-bg);
border: 1.4px solid var(--field-border);
border-radius: 10px;
padding: 6px 11px;
font-size: 13.5px;
color: var(--ink);
transition: border-color .2s var(--ease);
}
.alp-lang-v2 .field input::placeholder,
.alp-lang-v2 .field textarea::placeholder { color: var(--muted); }
.alp-lang-v2 .field input:focus,
.alp-lang-v2 .field select:focus,
.alp-lang-v2 .field textarea:focus { outline: none; border-color: var(--pink-primary); }
.alp-lang-v2 .field textarea { resize: vertical; min-height: 30px; }
/* ============================================================
CTA card
============================================================ */
.alp-lang-v2 .cta-card {
position: relative;
align-self: start;
overflow: hidden;
border-radius: var(--r-md);
background:
radial-gradient(circle at 82% 74%, rgba(230, 90, 143, .14), transparent 34%),
#FEFAFC;
color: var(--ink);
min-height: 264px;
padding: 18px 20px 22px;
display: flex;
flex-direction: column;
box-shadow: var(--shadow-card);
isolation: isolate;
}
.alp-lang-v2 .cta-card::after {
content: "";
position: absolute;
right: -18px;
bottom: -18px;
z-index: -1;
width: 164px;
height: 132px;
border-radius: 48% 52% 0 0;
background: linear-gradient(150deg, rgba(255, 255, 255, .92), rgba(246, 205, 223, .7));
}
.alp-lang-v2 .cta-card h3 { font-size: 21px; font-weight: 800; color: var(--pink-strong); }
.alp-lang-v2 .cta-card p { margin-top: 6px; font-size: 14px; color: var(--body); }
.alp-lang-v2 .cta-card__btns { display: flex; flex-direction: column; gap: 9px; margin-top: 22px; margin-bottom: 0; align-items: flex-start; max-width: 58%; }
.alp-lang-v2 .cta-card__photo {
position: absolute;
right: 24px;
bottom: 18px;
width: clamp(92px, 33%, 108px);
overflow: hidden;
border-radius: 18px 18px 10px 10px;
background: #fff;
box-shadow: 0 14px 28px rgba(112, 73, 91, .16);
}
.alp-lang-v2 .cta-card__photo img { width: 100%; height: auto; display: block; }
/* ============================================================
Responsive (was @media in layout.css; selectors scoped,
:root var override → .alp-lang-v2 var override)
============================================================ */
@media (min-width: 761px) {
.alp-lang-v2 .origin { padding-block: calc(var(--section-y) + 40px); }
}
@media (max-width: 1080px) {
.alp-lang-v2 .hero { min-height: 392px; }
.alp-lang-v2 .hero::before { left: 24%; }
.alp-lang-v2 .hero::after {
background:
linear-gradient(90deg,
rgba(255, 255, 255, .98) 0%,
rgba(255, 248, 251, .98) 36%,
rgba(255, 246, 250, .82) 52%,
rgba(255, 246, 250, .18) 74%,
rgba(255, 246, 250, 0) 100%);
}
.alp-lang-v2 .hero .container { min-height: 392px; padding-block: 60px 54px; }
.alp-lang-v2 .origin .container { grid-template-columns: 1fr; gap: 32px; }
.alp-lang-v2 .origin__copy { background-size: cover; }
.alp-lang-v2 .articles-layout { grid-template-columns: minmax(0, 1fr); }
.alp-lang-v2 .contact-layout { grid-template-columns: 1fr; }
.alp-lang-v2 .cta-card { min-height: 242px; }
.alp-lang-v2 .cta-card__photo { width: 118px; }
.alp-lang-v2 .offerings-grid { grid-template-columns: repeat(2, 1fr); }
.alp-lang-v2 .resources-grid { grid-template-columns: repeat(2, 1fr); }
.alp-lang-v2 .teachers-grid { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; }
}
@media (max-width: 760px) {
.alp-lang-v2 { --section-y: 38px; --gutter: 22px; font-size: 14px; }
.alp-lang-v2 .hero { min-height: 334px; }
.alp-lang-v2 .hero::before { left: 0; background-position: 47% top; }
.alp-lang-v2 .hero::after {
background:
linear-gradient(180deg,
rgba(255, 255, 255, .78) 0%,
rgba(255, 248, 251, .62) 40%,
rgba(255, 246, 250, .34) 68%,
rgba(255, 246, 250, .08) 100%),
linear-gradient(90deg, rgba(255, 255, 255, .72) 0%, rgba(255, 248, 251, .48) 54%, rgba(255, 248, 251, .12) 100%);
}
.alp-lang-v2 .hero .container { min-height: 334px; padding-block: 34px 22px; }
.alp-lang-v2 .hero .container::after { bottom: -34px; height: 72px; width: min(68vw, 380px); opacity: .72; }
.alp-lang-v2 .hero__text { max-width: 100%; }
.alp-lang-v2 .hero__title { font-size: clamp(30px, 8vw, 34px); line-height: 1.06; }
.alp-lang-v2 .hero__lead { margin-top: 9px; font-size: clamp(18px, 5.7vw, 22px); line-height: 1.34; }
.alp-lang-v2 .hero__sub { margin-top: 9px; font-size: 13px; line-height: 1.5; }
.alp-lang-v2 .hero__dots { margin-top: 14px; }
.alp-lang-v2 .hero__cta { gap: 10px; margin-top: 16px; }
.alp-lang-v2 .hero__cta .btn { min-width: 0; }
.alp-lang-v2 .offerings-grid,
.alp-lang-v2 .teachers-grid {
display: flex;
grid-template-columns: none;
gap: 16px;
max-width: none;
margin-inline: calc(var(--gutter) * -1);
padding: 0 var(--gutter) 14px;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
scroll-padding-inline: var(--gutter);
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
.alp-lang-v2 .offerings-grid::-webkit-scrollbar,
.alp-lang-v2 .teachers-grid::-webkit-scrollbar { display: none; }
.alp-lang-v2 .offerings-grid .offer-card { flex: 0 0 min(84vw, 390px); scroll-snap-align: center; }
.alp-lang-v2 .teachers-grid .teacher-card {
flex: 0 0 min(78vw, 330px);
scroll-snap-align: start;
grid-template-columns: minmax(112px, 42%) minmax(0, 1fr);
min-height: 0;
}
.alp-lang-v2 .teacher-card__media { min-height: 194px; }
.alp-lang-v2 .teacher-card__body { padding: 16px 15px 15px; }
.alp-lang-v2 .teacher-card__flag { padding: 4px 10px; margin-bottom: 8px; }
.alp-lang-v2 .flag { font-size: 18px; }
.alp-lang-v2 .teacher-card__name { font-size: 20px; line-height: 1.12; }
.alp-lang-v2 .teacher-card__list { gap: 5px; margin: 8px 0 12px; }
.alp-lang-v2 .teacher-card__list li { padding-left: 13px; font-size: 12.5px; line-height: 1.4; }
.alp-lang-v2 .teacher-card__list li::before { top: 7px; }
.alp-lang-v2 .teacher-card .btn { min-width: 112px; padding: 9px 16px; font-size: 13px; margin-top: 4px; }
.alp-lang-v2 .teacher-card__inset,
.alp-lang-v2 .teacher-card__avatar-empty {
right: 10px;
bottom: 10px;
width: 74px;
height: 74px;
border-width: 4px;
}
.alp-lang-v2 .teacher-card__avatar-empty .ico { width: 34px; height: 34px; }
.alp-lang-v2 .articles-mini { grid-template-columns: minmax(0, 1fr); }
.alp-lang-v2 .resources-grid { grid-template-columns: 1fr; gap: 14px; }
.alp-lang-v2 .resources-wrap { padding: 26px 20px; }
.alp-lang-v2 .origin { padding-block: 34px 36px; }
.alp-lang-v2 .origin .container { gap: 18px; }
.alp-lang-v2 .origin-carousel {
width: min(84vw, 318px);
margin-inline: auto;
grid-template-columns: 1.08fr .72fr;
gap: 8px;
}
.alp-lang-v2 .origin-carousel__main { aspect-ratio: 4 / 5; }
.alp-lang-v2 .origin-carousel__thumb { aspect-ratio: 1 / 1; }
.alp-lang-v2 .origin-carousel__nav { width: 34px; height: 34px; }
.alp-lang-v2 .origin-carousel__nav--prev { left: -10px; }
.alp-lang-v2 .origin-carousel__nav--next { right: -10px; }
.alp-lang-v2 .origin__copy { padding: 18px 18px; }
.alp-lang-v2 .origin__copy h2 { font-size: 22px; line-height: 1.16; }
.alp-lang-v2 .origin__copy p { font-size: 13px; line-height: 1.62; }
.alp-lang-v2 .origin__concepts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.alp-lang-v2 .concept { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.alp-lang-v2 .concept__icon { width: 36px; height: 36px; }
.alp-lang-v2 .concept__icon .ico { width: 21px; height: 21px; }
.alp-lang-v2 .concept__jp { font-size: 11.5px; line-height: 1.3; }
.alp-lang-v2 .concept__zh { font-size: 12.5px; line-height: 1.35; }
.alp-lang-v2 .cta-card { min-height: 0; padding: 22px 20px 0; }
.alp-lang-v2 .cta-card::after { width: 140px; height: 108px; }
.alp-lang-v2 .cta-card__btns { max-width: none; margin-top: 16px; }
.alp-lang-v2 .cta-card__photo { position: relative; right: auto; bottom: auto; width: min(36vw, 126px); margin: 16px 24px 0 auto; }
}
/* ============================================================
PER-LANGUAGE VARIANT COLORS (the ONLY difference jp/kr/en)
Layout/spacing/typography are NOT changed per variant.
Each variant remaps the brand palette + pink-tinted shadows
+ the JP-ink heading accents so nothing reads pink.
============================================================ */
/* ---------- KR : GREEN ---------- */
.alp-lang-v2.alp-variant-kr {
--pink-primary: #2F9C6D;
--pink-strong: #26835A;
--pink-deep: #1F6E4B;
--pink-soft: #DCF0E4;
--pink-softer: #E8F5EC;
--pink-wash: #F1FAF4;
/* heading/accent ink that read pink in the JP set */
--tint-jp-ink: #2F9C6D;
/* pink-tinted elevation → green-tinted */
--shadow-card: 0 12px 30px rgba(31, 110, 75, .12);
--shadow-btn: 0 8px 18px rgba(31, 110, 75, .30);
}
.alp-lang-v2.alp-variant-kr .offer-card:hover { box-shadow: 0 18px 40px rgba(31, 110, 75, .18); }
.alp-lang-v2.alp-variant-kr .origin {
background:
linear-gradient(90deg, rgba(220, 240, 228, .97), rgba(241, 250, 244, .93)),
var(--origin-bg) center right / 48% auto no-repeat;
}
.alp-lang-v2.alp-variant-kr .origin::before {
background:
radial-gradient(circle at 84% 18%, rgba(47, 156, 109, .14), transparent 24%),
linear-gradient(90deg, rgba(220, 240, 228, .8), rgba(255, 255, 255, .42));
}
.alp-lang-v2.alp-variant-kr .origin__copy {
background:
linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(244, 251, 247, .72)),
var(--origin-copy-bg) right center / auto 100% no-repeat;
box-shadow: 0 18px 42px rgba(31, 110, 75, .12);
}
.alp-lang-v2.alp-variant-kr .origin__copy::before {
background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(245, 251, 248, .9) 60%, rgba(245, 251, 248, .64) 100%);
}
.alp-lang-v2.alp-variant-kr .resources-wrap {
background: #F2FAF5;
box-shadow: inset 0 0 0 1px rgba(31, 110, 75, .05);
}
.alp-lang-v2.alp-variant-kr .resource { box-shadow: 0 12px 28px rgba(31, 110, 75, .10); }
.alp-lang-v2.alp-variant-kr .teacher-card { border-color: rgba(31, 110, 75, .16); box-shadow: 0 16px 34px rgba(31, 110, 75, .12); }
.alp-lang-v2.alp-variant-kr .teacher-card__flag { box-shadow: 0 8px 18px rgba(31, 110, 75, .12); }
.alp-lang-v2.alp-variant-kr .teacher-card__flag::after { background: rgba(47, 156, 109, .26); }
.alp-lang-v2.alp-variant-kr .hero::selection { background: rgba(47, 156, 109, .18); }
.alp-lang-v2.alp-variant-kr .hero__dots button { background: #B8DEC9; }
.alp-lang-v2.alp-variant-kr .hero__dots button:hover { background: #8FCBAC; }
.alp-lang-v2.alp-variant-kr .hero .container::after { background: rgba(184, 222, 201, .55); }
.alp-lang-v2.alp-variant-kr .cta-card { background: #F4FBF7; }
/* ---------- EN : BLUE ---------- */
.alp-lang-v2.alp-variant-en {
--pink-primary: #2E6CFF;
--pink-strong: #1F4FD0;
--pink-deep: #1A43B0;
--pink-soft: #DCE7FF;
--pink-softer: #ECF1FF;
--pink-wash: #F4F7FF;
/* heading/accent ink that read pink in the JP set */
--tint-jp-ink: #2E6CFF;
/* pink-tinted elevation → blue-tinted */
--shadow-card: 0 12px 30px rgba(26, 67, 176, .12);
--shadow-btn: 0 8px 18px rgba(26, 67, 176, .30);
}
.alp-lang-v2.alp-variant-en .offer-card:hover { box-shadow: 0 18px 40px rgba(26, 67, 176, .18); }
.alp-lang-v2.alp-variant-en .origin {
background:
linear-gradient(90deg, rgba(220, 231, 255, .97), rgba(244, 247, 255, .93)),
var(--origin-bg) center right / 48% auto no-repeat;
}
.alp-lang-v2.alp-variant-en .origin::before {
background:
radial-gradient(circle at 84% 18%, rgba(46, 108, 255, .14), transparent 24%),
linear-gradient(90deg, rgba(220, 231, 255, .8), rgba(255, 255, 255, .42));
}
.alp-lang-v2.alp-variant-en .origin__copy {
background:
linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(244, 247, 255, .72)),
var(--origin-copy-bg) right center / auto 100% no-repeat;
box-shadow: 0 18px 42px rgba(26, 67, 176, .12);
}
.alp-lang-v2.alp-variant-en .origin__copy::before {
background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(245, 248, 255, .9) 60%, rgba(245, 248, 255, .64) 100%);
}
.alp-lang-v2.alp-variant-en .resources-wrap {
background: #F3F7FF;
box-shadow: inset 0 0 0 1px rgba(26, 67, 176, .05);
}
.alp-lang-v2.alp-variant-en .resource { box-shadow: 0 12px 28px rgba(26, 67, 176, .10); }
.alp-lang-v2.alp-variant-en .teacher-card { border-color: rgba(26, 67, 176, .16); box-shadow: 0 16px 34px rgba(26, 67, 176, .12); }
.alp-lang-v2.alp-variant-en .teacher-card__flag { box-shadow: 0 8px 18px rgba(26, 67, 176, .12); }
.alp-lang-v2.alp-variant-en .teacher-card__flag::after { background: rgba(46, 108, 255, .26); }
.alp-lang-v2.alp-variant-en .hero::selection { background: rgba(46, 108, 255, .18); }
.alp-lang-v2.alp-variant-en .hero__dots button { background: #B9CCFF; }
.alp-lang-v2.alp-variant-en .hero__dots button:hover { background: #93B2FF; }
.alp-lang-v2.alp-variant-en .hero .container::after { background: rgba(185, 204, 255, .55); }
.alp-lang-v2.alp-variant-en .cta-card { background: #F5F8FF; }
/* ---------- STUDENT-TEACHER : PURPLE ---------- */
.alp-lang-v2.alp-variant-student-teacher {
--pink-primary: #7C5CD0;
--pink-strong: #6B4BC4;
--pink-deep: #5E3DB3;
--pink-soft: #ECE3FB;
--pink-softer: #F3ECFC;
--pink-wash: #F5EDFD;
/* heading/accent ink that read pink in the JP set */
--tint-jp-ink: #7C5CD0;
/* pink-tinted elevation → purple-tinted */
--shadow-card: 0 12px 30px rgba(124, 92, 208, .12);
--shadow-btn: 0 8px 18px rgba(124, 92, 208, .30);
}
.alp-lang-v2.alp-variant-student-teacher .offer-card:hover { box-shadow: 0 18px 40px rgba(124, 92, 208, .18); }
.alp-lang-v2.alp-variant-student-teacher .origin {
background:
linear-gradient(90deg, rgba(236, 227, 251, .97), rgba(245, 237, 253, .93)),
var(--origin-bg) center right / 48% auto no-repeat;
}
.alp-lang-v2.alp-variant-student-teacher .origin::before {
background:
radial-gradient(circle at 84% 18%, rgba(124, 92, 208, .14), transparent 24%),
linear-gradient(90deg, rgba(236, 227, 251, .8), rgba(255, 255, 255, .42));
}
.alp-lang-v2.alp-variant-student-teacher .origin__copy {
background:
linear-gradient(90deg, rgba(255, 255, 255, .92), rgba(247, 242, 253, .72)),
var(--origin-copy-bg) right center / auto 100% no-repeat;
box-shadow: 0 18px 42px rgba(124, 92, 208, .12);
}
.alp-lang-v2.alp-variant-student-teacher .origin__copy::before {
background: linear-gradient(90deg, rgba(255, 255, 255, .98) 0%, rgba(248, 244, 254, .9) 60%, rgba(248, 244, 254, .64) 100%);
}
.alp-lang-v2.alp-variant-student-teacher .resources-wrap {
background: #F7F3FE;
box-shadow: inset 0 0 0 1px rgba(124, 92, 208, .05);
}
.alp-lang-v2.alp-variant-student-teacher .resource { box-shadow: 0 12px 28px rgba(124, 92, 208, .10); }
.alp-lang-v2.alp-variant-student-teacher .teacher-card { border-color: rgba(124, 92, 208, .16); box-shadow: 0 16px 34px rgba(124, 92, 208, .12); }
.alp-lang-v2.alp-variant-student-teacher .teacher-card__flag { box-shadow: 0 8px 18px rgba(124, 92, 208, .12); }
.alp-lang-v2.alp-variant-student-teacher .teacher-card__flag::after { background: rgba(124, 92, 208, .26); }
.alp-lang-v2.alp-variant-student-teacher .hero::selection { background: rgba(124, 92, 208, .18); }
.alp-lang-v2.alp-variant-student-teacher .hero__dots button { background: #D5C8F1; }
.alp-lang-v2.alp-variant-student-teacher .hero__dots button:hover { background: #BBA6E8; }
.alp-lang-v2.alp-variant-student-teacher .hero .container::after { background: rgba(214, 196, 247, .55); }
.alp-lang-v2.alp-variant-student-teacher .cta-card { background: #F7F3FE; }
/* ============================================================
Contact — restyle embedded Fluent Form (id=1) to match mockup
Uses var(--pink-*) so KR/EN variants recolor automatically.
============================================================ */
.alp-lang-v2 .contact-form .frm-fluent-form fieldset { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; border: 0; margin: 0; padding: 0; }
.alp-lang-v2 .contact-form .frm-fluent-form > fieldset > .ff-el-group { grid-column: 1 / -1; margin: 0 0 2px; }
.alp-lang-v2 .contact-form .frm-fluent-form > fieldset > .ff-el-group:has(input[name="contact_name"]),
.alp-lang-v2 .contact-form .frm-fluent-form > fieldset > .ff-el-group:has(input[name="email"]) { grid-column: span 1; }
.alp-lang-v2 .contact-form .frm-fluent-form > fieldset > input[type="hidden"] { display: none; }
.alp-lang-v2 .contact-form .ff-el-input--label label { font-size: 13px; font-weight: 600; color: var(--ink-soft); margin: 0 0 3px; padding: 0; }
.alp-lang-v2 .contact-form .ff-el-form-control { width: 100%; border: 1px solid var(--field-border); border-radius: var(--r-sm); background: var(--field-bg); padding: 9px 12px; font-size: 14px; line-height: 1.4; color: var(--ink); font-family: inherit; box-shadow: none; }
.alp-lang-v2 .contact-form .ff-el-form-control:focus { outline: none; border-color: var(--pink-primary); }
.alp-lang-v2 .contact-form textarea.ff-el-form-control { resize: vertical; min-height: 96px; }
.alp-lang-v2 .contact-form .ff_submit_btn_wrapper { grid-column: 1 / -1; margin-top: 4px; text-align: left; }
.alp-lang-v2 .contact-form .ff-btn-submit { background: var(--pink-primary) !important; background-image: none !important; border: 0; color: #fff; width: 100%; display: block; padding: 12px 20px; border-radius: var(--pill); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-btn); cursor: pointer; transition: background .2s var(--ease), transform .2s var(--ease); }
.alp-lang-v2 .contact-form .ff-btn-submit:hover { background: var(--pink-strong) !important; transform: translateY(-2px); }
@media (max-width: 760px) {
.alp-lang-v2 .contact-form .frm-fluent-form > fieldset > .ff-el-group:has(input[name="contact_name"]),
.alp-lang-v2 .contact-form .frm-fluent-form > fieldset > .ff-el-group:has(input[name="email"]) { grid-column: 1 / -1; }
}
/* Contact: hide Fluent Form required asterisks to match the mockup (fields remain required + validated) */
.alp-lang-v2 .contact-form .ff-el-is-required.asterisk-right > label:after,
.alp-lang-v2 .contact-form .ff-el-is-required.asterisk-left > label:before,
.alp-lang-v2 .contact-form .ff-el-input--label.ff-el-is-required label:after,
.alp-lang-v2 .contact-form .ff-el-input--label.ff-el-is-required label:before { content: "" !important; margin: 0 !important; }
/* Kadence .single-content overrides: teacher name top margin + list left padding */
.alp-lang-v2 .teacher-card__name { margin: 0; }
.alp-lang-v2 .teacher-card__list { padding-left: 0; }
/* Origin copy — kill only the Kadence .single-content bottom-margin leak; keep the mockup's clamp h2 + p sizes */
.alp-lang-v2 .origin__copy p { margin-bottom: 0 !important; }
.alp-lang-v2 .origin__copy > p.eyebrow { margin-top: 14px !important; }
/* CTA card mobile: lay content (left) + photo (right) side-by-side instead of stacking */
@media (max-width: 760px) {
.alp-lang-v2 .cta-card {
display: grid;
grid-template-columns: 1fr auto;
grid-template-areas:
"title photo"
"desc photo"
"btns photo";
column-gap: 14px;
align-items: start;
}
.alp-lang-v2 .cta-card > h3 { grid-area: title; }
.alp-lang-v2 .cta-card > p { grid-area: desc; }
.alp-lang-v2 .cta-card__btns { grid-area: btns; max-width: none; }
.alp-lang-v2 .cta-card__photo { grid-area: photo; position: static; width: 108px; max-width: 108px; align-self: end; justify-self: end; }
}