/* ===== Theme tokens (light + dark) ===== Every color that has to change between light and dark mode is a variable here. - Light values: :root. Dark values: :root[data-theme="dark"]. - data-theme is set on before first paint by the inline script in base.html, and switched by the header toggle (theme-v1.js). - New CSS: use these tokens for page/card backgrounds, body text and borders, never raw colors. Colors that look the same in both modes (red header, heading bars, buttons) stay literal. To retune dark mode, edit only the dark block below. */ :root { color-scheme: light; /* page & surfaces */ --bg: #ffffff; /* page background */ --surface: #ffffff; /* cards, quiz options, tables */ --surface-2: #fdfdfd; /* example / dialogue blocks */ --field: rgb(244, 243, 243); /* form inputs */ --border: #e5e7eb; /* card borders, progress tracks */ /* text */ --text: #000000; --text-2: rgb(45, 45, 45); /* soft black: h4, messages, quiz text */ --text-3: rgb(70, 70, 70); --text-muted: rgb(93, 93, 93); /* fine print */ --text-faint: #6b7280; --placeholder: rgb(31, 31, 31); /* colored text */ --blue: rgb(23, 82, 131); /* strong, footer, table headers */ --blue-2: rgb(30, 92, 143); /* links, blog titles */ --green-mark: green; /* check marks, left borders */ --green-deep: rgb(0, 119, 0); --green-strong: rgb(20, 133, 20); /* quiz score */ --error: rgb(192, 16, 16); --yes: rgb(37, 132, 80); /* comparison table */ --some: #a07714; --no: #b0483f; /* tinted surfaces */ --mint: rgb(227, 241, 227); /* nav pills, settings menu */ --mint-hover: rgb(209, 235, 209); --mint-2: rgb(237, 246, 235); /* overview rows, notes, quiz hover */ --sky: rgb(231, 242, 249); /* alternating rows, notes */ --video-bg: #d5f0d8; /* controls */ --btn-gray-bg: rgb(239, 237, 237); --btn-gray-text: rgb(86, 86, 86); --toggle-off: #c4c4c4; --scroll-track: #f1f1f1; --scroll-thumb: #d3d3d3; --scroll-thumb-hover: #cccbcb; } /* Dark palette: warm "ink at night" — dark blue-gray paper, soft paper-white text */ :root[data-theme="dark"] { color-scheme: dark; /* page & surfaces */ --bg: #14151c; --surface: #1e2029; --surface-2: #191b24; --field: #2a2d3a; --border: #353846; /* text */ --text: #ece7dd; --text-2: #e0dbd0; --text-3: #c8c2b7; --text-muted: #aaa59c; --text-faint: #9299a6; --placeholder: #b5afa5; /* colored text */ --blue: #8cc4f3; --blue-2: #9ccdf5; --green-mark: #43c46f; --green-deep: #5fd583; --green-strong: #4fce74; --error: #ff7b72; --yes: #5fd39a; --some: #e6bd55; --no: #f28b80; /* tinted surfaces */ --mint: #1f3528; --mint-hover: #2a4835; --mint-2: #1a2c21; --sky: #1a2a3c; --video-bg: #1a2c21; /* controls */ --btn-gray-bg: #2e313e; --btn-gray-text: #d2ccc1; --toggle-off: #4c4f5e; --scroll-track: #1a1c25; --scroll-thumb: #3a3d4b; --scroll-thumb-hover: #4c4f5e; /* flashcard tokens defined in lesson css */ --ink: #f1ece2; --stone: #aaa59c; --warm-white: #1e2029; } /* * { outline: 1px solid red !important; } */ * { -webkit-tap-highlight-color: transparent; } html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } body { font-family: system-ui, -apple-system, 'Noto Sans SC', 'PingFang SC'; scroll-behavior: smooth; margin: 0; background-color: var(--bg); color: var(--text); } h1, h2, h3 { font-family: system-ui, -apple-system, 'Noto Sans SC', 'PingFang SC'; } a { color: inherit; text-decoration: none; } strong { color: var(--blue); font-weight: bold; } .lesson-cont strong { color: var(--blue); font-weight: 550; } .lesson-cont .bold { font-weight: 550; } .green-link { color: rgb(37, 155, 90); font-weight: 650; } .blue-link { color: var(--blue-2); font-weight: 650; } /* play button */ .logosvg { height: 1.75rem; vertical-align: -0.25em; margin: 0 1px 0 0; } .svg { height: 1.4rem; vertical-align: -0.2em; /* nudge down like emoji */ margin: 0 1px 0 0; } .homesvg { height: 1.5rem; vertical-align: -0.2em; /* nudge down like emoji */ margin: 0 1px 0 0; } .homebubblesvg { height: 1.6rem; vertical-align: -0.2em; /* nudge down like emoji */ margin: 0 1px 0 0; } .productsvg { height: 2.1rem; vertical-align: -0.1em; /* nudge down like emoji */ margin: 0 1px 0 0; } .buttonsvg { height: 1.8rem; vertical-align: -0.1em; /* nudge down like emoji */ margin: 0 1px 0 0; } .productsvgtiger { height: 2.5rem; vertical-align: -0.5em; /* nudge down like emoji */ margin: 0 1px 0 0; } .productbubblesvg { height: 2.2rem; vertical-align: -0.2em; margin: 0; } .lessonsvg { height: 2.3rem; vertical-align: -0.3em; margin: 0 1px 0 0; } .titlesvg { height: 2.25rem; vertical-align: -0.3em; margin: 0 1px 0 0; } .tigersvg { height: 2.6rem; vertical-align: -0.5em; margin: 0 1px 0 0; } .paymentsvg { height: 2.5rem; vertical-align: -0.2em; /* nudge down like emoji */ margin: 0 1px 0 0; } .menusvg { height: 1.7rem; vertical-align: -0.4em; /* nudge down like emoji */ margin: 0 3px 0 0; } .menusvg.mright { transform: translateX(0.1em); } .menusvg.mleft { transform: translateX(-0.05em); } /* Header */ header { display: flex; align-items: center; justify-content: space-between; background-image: linear-gradient(rgb(196, 23, 23), rgb(212, 52, 52)); border-bottom-left-radius: 0em; border-bottom-right-radius: 0em; padding: 0; position: relative; width: 100%; margin: 0; /* position: fixed; */ top: 0; left: 0; z-index: 10; } .header-content { display: flex; width: 80%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; } @media (max-width: 768px) { .header-content { width: 100%; } } .logo { font-size: 1.25rem; text-align: left; margin-left: 1rem; color: white; cursor: pointer; /* font-family: 'Montserrat'; */ display: inline-block; align-items: center; } /* .latin-logo { font-family: 'ZCOOL XiaoWei'; font-size: 1.3rem; letter-spacing: 1px; } */ .logo:hover { color: rgb(255, 231, 92); } .char-logo { font-size: 1.5rem; font-weight: normal; align-items: center; } .logo a { text-decoration: none; } /* Hamburger */ .hamburger-container { position: relative; display: inline-block; align-items: center; } .hamburger { display: inline-block; cursor: pointer; position: relative; z-index: 1; margin-right: 1rem; margin-left: 0.6rem; align-items: center; } .line { width: 2.5rem; height: 0.33rem; background-color: white; border-radius: 2px; margin: 0.25rem 0; transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; } .menu { position: absolute; top: 100%; /* Directly below the navbar */ right: 2rem; width: auto; min-width: 13rem; border-radius: 0.7em; background-image: linear-gradient(rgb(212, 52, 52), rgb(200, 29, 29)); color: white; font-weight: 600; /* Hidden state */ transform: translateY(-20px); opacity: 0; visibility: hidden; z-index: 10; pointer-events: none; /* Disabled when hidden */ /* Transition settings */ transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0s linear 0.3s; /* Delay visibility */ } /* .course { } */ @media (max-width: 768px) { .menu { right:0rem; } } .menu-toggle { display: none; } .menu-toggle:checked ~ .menu { /* Active state */ transform: translateY(0); opacity: 1; visibility: visible; pointer-events: auto; /* Enable interactions */ transition-delay: 0s; } .menu-toggle:checked ~ .hamburger-container .hamburger .line { /* background-color: white; */ background-image: linear-gradient(90deg, white, rgb(247, 211, 9)); /* background-image: linear-gradient(90deg, white, rgb(220, 220, 220)); */ } .menu-toggle:hover ~ .hamburger-container .hamburger .line { /* background-color: white; */ background-image: linear-gradient(90deg, white, rgb(247, 211, 9)); /* background-image: linear-gradient(90deg, white, rgb(220, 220, 220)); */ } .menu ul { list-style: none; padding: 0.3rem; margin: 0.5rem; } .menu li { font-size: 1.05rem; /* font-family: 'ZCOOL XiaoWei'; letter-spacing: 1px; */ padding: 0.275rem; /* margin-top: 0.25rem; */ margin-left: 0rem; color: white; transition: background-color 0.3s ease-in-out; /* border-bottom: 1px solid rgb(249, 227, 227); */ } /* .menu li:last-child { border-bottom: none; } */ @media (max-width: 768px) { .menu li { font-size: 1.10rem; /* text-align: right; */ } } .menu li:hover { color: rgb(255, 226, 62); /* font-weight: bold; */ } .menu a { text-decoration: none; } /* Containers */ .narrow-container { max-width: 90%; margin: 0 auto; } @media (min-width: 768px) { .narrow-container { max-width: 65%; } } main { width: 100%; margin: 0; padding: 0; display: block; } /* Bottom button */ .button-wrap { text-align: center; /* This centers the inline/inline-block/inline-flex button */ margin-bottom: 1.75rem; } .button { display: inline-flex; color: rgb(253, 218, 20); background-image: linear-gradient(rgb(192, 16, 16), rgb(223, 50, 50)); border-width: 0; padding: 0.4rem 1.5rem; border-radius: 1.5em; margin: 0.5rem auto 0; cursor: pointer; text-decoration: none; align-items: center; /* horizontally */ /* color: white; background-image: linear-gradient(rgb(21, 153, 21), green); */ } .char-button { font-size: 1.7rem; margin-right: 0.75rem; } .text-button { font-weight: bold; font-size: 1.1rem; } #vars { display: none; } footer { color: var(--blue); /* font-weight: 550; */ font-size: 0.75rem; display: flex; justify-content: center; align-items: center; padding: 1rem; } footer a { cursor: pointer; margin-left: 0rem; } /* Navigation */ .navigation-wrapper { display: grid; justify-items: center; align-items: center; margin: 1rem 0rem; } .navigation { display: flex; justify-content: center; align-items: center; gap: 0.8rem; } .nav-link { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; background-color: var(--mint); padding: 0rem 0rem; min-width: 8rem; border-radius: 1.5rem; font-weight: 600; letter-spacing: 0.5px; cursor: pointer; /* transition: transform 120ms ease, opacity 120ms ease, filter 120ms ease, background-color 160ms ease; <-- add this */ } .nav-link.prev { justify-content: flex-start; }.nav-link.next { justify-content: flex-end; } .nav-link:hover { background-color: var(--mint-hover); transform: translateX(0px) translateY(-1px); } /* .nav-link:active { transform: translateX(1px) translateY(-1px); transform: scale(0.98); opacity: 0.96; } */ .navsvg { height: 2.5rem; } .bottom-nav { margin-bottom: 2rem !important; } /* Home page */ .info-text { line-height: 1.75; text-align: center; } .terms-text { /* line-height: 1.75; */ text-align: left; } .slogan { font-size: 1.15rem; } .slogan-minor { font-size: 1.1rem; } .green-slogan { font-size: 1.15rem; color: rgb(43, 160, 96); } .mascot-container { display: block; margin: 0.8rem auto; text-align: center; } .mascot-image { max-width: 14rem; height: auto; display: block; margin: 0 auto; border-radius: 0.85em; /* border-color: gold; border-color: rgb(170, 7, 7); border-width: 0.22rem; border-style: solid; */ } .comeback { margin-top: 1rem; } /* Lesson overview */ .o-item { font-size: 1rem; padding: 0.3rem 1rem !important; cursor: pointer; /* color: rgb(34, 147, 85); */ /* color: rgb(23, 82, 131); */ font-weight: 550; margin: 0rem !important; border-radius: 1em; } .o-item:hover { font-weight: 550; /* color:#333; */ background-color: var(--mint-2); /* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); */ } .free-lesson { background-color: var(--mint-2); cursor: auto; } .thumbnail { height: 6.5rem; border-radius: 0.5rem; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15); margin: 0; padding: 0; } a:has(.thumbnail) { display: flex; justify-content: flex-start; align-items: center; gap: 0.75rem; border-radius: 0.7rem; padding: 0rem 0rem; margin: 0.25rem 0; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1); transition: transform 0.15s ease, box-shadow 0.2s ease; background-color: var(--mint-2); font-weight: 500; font-size: 1.1rem; } a:has(.thumbnail):hover { /* background-color: rgb(237, 246, 235); */ transform: translateY(-1.5px); /* color: rgb(23, 82, 131); */ /* font-weight: 600; */ } .free { font-size: 1rem; margin-left: 1.5rem !important; color: var(--green-deep) !important; font-weight: 550 !important; align-items: center; } .check2 { text-indent: 0rem; /* Indents the paragraph to the right */ position: relative; /* Allows positioning of the pseudo-element */ padding-left: 1.5rem; /* Makes space for the checkmark */ /* font-size: 1.05rem; */ } .check2::before { content: '✓'; /* Adds the checkmark symbol */ position: absolute; /* Positions the checkmark relative to the paragraph */ left: 0; /* Aligns the checkmark to the left */ top: 50%; /* Positions the checkmark at 50% from the top */ transform: translateY(-50%); /* Shifts the checkmark up by half its height to center it */ color: var(--green-mark); font-weight: bold; font-size: 1.2rem; } /* Scroll bar */ @media (min-device-width: 768px) { ::-webkit-scrollbar { width: 0.6rem; height: 0.6rem; -webkit-border-radius: 0.6em; border-radius: 0.6em; } ::-webkit-scrollbar-track { background: var(--scroll-track); -webkit-border-radius: 0.6em; border-radius: 0.6em; } ::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: 0.6em; height: 0.6rem; } ::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); } ::-webkit-scrollbar-corner { display: none; height: 0; width: 0; } /* ::-webkit-scrollbar { height: 0.4rem; -webkit-box-shadow: inset 0 0 0.4rem rgba(0,0,0,0); } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 0px rgba(0,0,0,0); } */ } /* Spinner */ .spinner { --bordersize: 1rem; position: fixed; top: 40%; left: 50%; width: 3rem; height: 3rem; margin: 0 0 0 -2.25rem; border: var(--bordersize) solid var(--bg); border-radius: 50%; border-top: var(--bordersize) solid rgb(255, 154, 71); border-right: var(--bordersize) solid rgb(255, 154, 71); border-bottom: var(--bordersize) solid rgb(255, 154, 71); z-index: 1; -webkit-animation: spin 2s linear infinite; animation: spin 2s linear infinite; } @-webkit-keyframes spin { /* Safari */ 0% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Modal */ .modal { position: fixed; top: 0%; left: 0%; height: 100vh; width: 100%; opacity: 0.7; background-color: var(--bg); z-index: 1; } .modal-title { position: fixed; top: 25%; left: 50%; transform: translateX(-50%); font-size: 3rem; font-weight: bold; color: rgb(255, 154, 71); background-color: var(--bg); padding: 1rem 2rem; border-radius: 0.6em; opacity: 1; z-index: 2; } /* hero image */ :root { --hero-height: 95vh; } .hero { position: relative; width: 100%; min-height: var(--hero-height); background-color: #f0f0f0; background: url('/static/img/hero-v1.webp') center/cover no-repeat; display: flex; justify-content: center; align-items: center; text-align: center; overflow: hidden; } .hero-content { position: relative; z-index: 2; /* sit above overlay */ color: white; padding: 0.5 1.5rem; margin-bottom: 10vh; } /* headline slides FROM TOP */ .hero-title { font-size: clamp(2rem, 4vw + 1rem, 3rem); font-weight: 700; line-height: 1.15; /* letter-spacing: 1px; */ margin: 0 0.5rem 1.8rem; opacity: 0; animation: slideDown .9s .25s forwards; /* font-family: 'ZCOOL XiaoWei'; */ /* font-family: Roboto; */ } /* subtitle slides FROM BOTTOM */ .hero-subtitle { margin: 1.75rem 0.5rem 0rem; font-size: clamp(1.4rem, 2vw + .5rem, 2.4rem); line-height: 1.4; font-weight: 500; opacity: 0; animation: slideUp .8s 1.6s forwards; /* font-family: 'ZCOOL XiaoWei'; */ /* color: rgb(23, 82, 131); */ } /* subtitle slides FROM BOTTOM */ .stars-subtitle { margin: 1.75rem 0.5rem 0rem; font-size: clamp(1.1rem, 2vw + .5rem, 1.25rem); line-height: 1.5; font-weight: 500; opacity: 0; animation: slideUp .8s 1.6s forwards; /* font-family: 'ZCOOL XiaoWei'; */ /* color: rgb(23, 82, 131); */ } /* make text more visible */ .hero::before { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.025); /* Adjust opacity as needed */ z-index: 1; /* Below .hero-content */ } .hero-title, .hero-subtitle, .stars-subtitle { text-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); } /* buttons fade IN */ .hero-buttons { display: flex; flex-wrap: wrap; justify-content: center; /* align-items: center; */ column-gap: 1rem; /* horizontal space */ row-gap: 0.8rem; /* vertical space */ opacity: 0; animation: fadeIn 0.8s 1s forwards; } .hero-button { font-size: 1.05rem; display: inline-block; font-weight: 650; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); color: white; background-image: linear-gradient(mediumaquamarine, mediumseagreen); border-width: 0; padding: 0.7rem 1.5rem; border-radius: 1.5em; margin: 0.5rem auto 0; cursor: pointer; text-decoration: none; align-items: center; /* horizontally */ transition: background .3s, transform .3s; /* font-family: 'ZCOOL XiaoWei'; */ /* letter-spacing: 1px; */ /* color: white; background-image: linear-gradient(rgb(21, 153, 21), green); */ } .hero-button:hover { transform: translateY(-2px); } /* ---------- ANIMATIONS ---------- */ @keyframes slideDown { from { transform: translateY(-100%); opacity:0; } to { transform: translateY(0); opacity:1; } } @keyframes slideUp { from { transform: translateY(100%); opacity:0; } to { transform: translateY(0); opacity:1; } } @keyframes fadeIn { from { opacity:0; transform: scale(.95); } to { opacity:1; transform: scale(1); } } /* New lessons every week */ .newlessons-container { width: 100%; overflow: hidden; margin: 0 auto; } .newlessons { display: flex; flex-direction: column; justify-content: center; /* Vertically centers the text */ align-items: center; /* Horizontally centers the text */ padding: 2rem; border-radius: 1.25rem; background: url('/static/img/hero2-v1.webp') center/cover no-repeat; max-width: 100%; overflow: hidden; margin: 1rem auto; min-height: 50vh; /* Takes up significant vertical space on all screens */ text-align: center; /* Optional: center the paragraph text */ } .newlessons-item { font-size: 1.5rem; /* text-shadow: 0px 2px 4px rgba(0,0,0,0.8), 0px 0px 2px rgba(0,0,0,1); */ text-shadow: 0 4px 6px rgba(0, 0, 0, 0.6); margin: 0.8rem auto; /* text-align: left; */ max-width: fit-content; color: white; font-weight: 600; opacity: 1; /* animation: slideDownSubscribe 1s .2s forwards; */ } .newlessons-item a { text-decoration: underline; } @media (max-width: 600px) { .newlessons-container { width: 100%; } .newlessons-item { font-size: 1.2rem; } } /* video blog */ .video-container { position: relative; padding-bottom: 56.25%; /* 16:9 aspect ratio */ height: 0; overflow: hidden; border-radius: 0.75rem; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); /* soft shadow */ margin: 1.75rem auto 5rem; } .video-container iframe, .video-container video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--video-bg); border: none; outline: none; border-radius: inherit; } .videohero { width: 100%; min-height: var(--hero-height); background-color: #f0f0f0; background: url('/static/img/hero-v1.webp') center/cover no-repeat; } /* ===== Theme toggle (moon / sun icon in the header, left of the hamburger) ===== */ /* transparent icon button: outline moon in light mode, outline sun in dark mode */ .theme-toggle { margin-left: auto; /* pushes the icon + hamburger to the right edge of the header */ padding: 0.3rem; border: 0; background: none; color: white; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.5rem; flex-shrink: 0; opacity: 0.9; transition: color 0.2s ease, opacity 0.2s ease; } .theme-toggle:hover { color: rgb(255, 226, 62); /* same yellow as the logo + menu hover */ opacity: 1; } .theme-toggle:focus-visible { outline: 2px solid rgb(255, 226, 62); outline-offset: 2px; } .theme-icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* show the icon of the mode you switch TO: moon while light, sun while dark */ .theme-icon-sun, :root[data-theme="dark"] .theme-icon-moon { display: none; } :root[data-theme="dark"] .theme-icon-sun { display: block; } /* small screens: the logo needs the full row width, so the icon sits above the hamburger instead of beside it (beside it, the logo wraps to an extra line and the header grows) */ @media (max-width: 680px) { .header-content { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; } .logo { grid-column: 1; grid-row: 1 / span 2; } .hamburger-container { grid-column: 2; grid-row: 2; align-self: start; justify-self: end; } .theme-toggle { grid-column: 2; grid-row: 1; align-self: end; justify-self: end; padding: 0.2rem; margin: 0.3rem calc(1rem + 0.35rem) 0 0; /* centered above the 2.5rem hamburger */ } .theme-icon { width: 1.4rem; height: 1.4rem; } } /* soft cross-fade of page colors while switching (class set briefly by theme-v1.js); :where() keeps specificity at 0 so elements with their own transition keep it */ :where(html.theme-anim) :where(body, body *) { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* calm mode: no fading for users who prefer reduced motion */ @media (prefers-reduced-motion: reduce) { .theme-toggle { transition: none; } :where(html.theme-anim) :where(body, body *) { transition: none; } } /* ===== Dark-only adjustments (things tokens alone can't express) ===== */ /* mid-green titles and labels read dim on the dark page => one brighter green for all of them */ :root[data-theme="dark"] .signup-title, :root[data-theme="dark"] .subscribe-title, :root[data-theme="dark"] .price, :root[data-theme="dark"] .field, :root[data-theme="dark"] .green-link, :root[data-theme="dark"] .green-slogan { color: #5fd39a; } /* typed text in form fields follows the page text color */ :root[data-theme="dark"] .email, :root[data-theme="dark"] .password { color: var(--text); } /* payment logos are drawn for a white page (Apple Pay is pure black) => sit them on a white chip */ :root[data-theme="dark"] .paymentsvg { background-color: #ffffff; border-radius: 0.4rem; padding: 0.15rem 0.3rem; }