/* Polish layer for /, / and //pricing. Loaded last. Every rule is namespaced to .landing_v2 (set on ) so the other 15 templates sharing landing.css / lang_landing.css are untouched. */ html#languages.landing_v2 { --ink: #0B0B0B; --ink_soft: #3A3A3A; --ink_muted: #6B6B6B; --paper: #FFFFFF; --paper_warm: #F7F6F2; --highlight: #FCDF03; --highlight_deep: #E8C900; --rule: rgba(11, 11, 11, 0.12); --radius: 14px; --shadow_card: 0 1px 2px rgba(11, 11, 11, 0.06), 0 8px 24px rgba(11, 11, 11, 0.08); --shadow_lift: 0 2px 4px rgba(11, 11, 11, 0.08), 0 16px 40px rgba(11, 11, 11, 0.14); /* one family across the page; system faces are fallbacks only */ --display_font: 'chakrapetch', 'Comfortaa', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --body_font: var(--display_font); } /* The page background, the #parent_content_div height cap and the fixed-height footer are now fixed globally in landing.css / lang_landing.css. */ html#languages.landing_v2 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .landing_v2 body { font-family: var(--body_font); color: var(--ink); } .landing_v2 p { font-size: 1.0625rem; line-height: 1.7; margin-bottom: 1.1em; color: var(--ink_soft); font-family: var(--body_font); } .landing_v2 h1, .landing_v2 h2, .landing_v2 h3, .landing_v2 h4 { font-family: var(--display_font); color: var(--ink); line-height: 1.12; letter-spacing: -0.01em; } .landing_v2 :focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; border-radius: 4px; } /* --- Top bar --------------------------------------------------------- */ .landing_v2 #top_bar_language { background: var(--ink); height: auto; margin-bottom: 0; padding-top: 14px; padding-bottom: 14px; } .landing_v2 #webbu_header { font-size: 1.75rem; letter-spacing: -0.02em; } .landing_v2 .top_bar_link { font-size: 0.9375rem; } /* --- Shared section rhythm ------------------------------------------- */ .landing_v2 .landing_section { padding-top: 72px; padding-bottom: 72px; } .landing_v2 .landing_shell { width: min(1120px, 92vw); margin-left: auto; margin-right: auto; } .landing_v2 .section_heading { font-size: clamp(1.5rem, 2.6vw, 2rem); text-align: center; margin-top: 0; margin-bottom: 12px; } .landing_v2 .section_intro { text-align: center; max-width: 56ch; margin-left: auto; margin-right: auto; margin-bottom: 40px; } /* --- Primary button -------------------------------------------------- */ .landing_v2 .btn_primary { display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 28px; background: var(--highlight); color: var(--ink); font-family: var(--display_font); font-size: 1.0625rem; font-weight: 700; border: 0; border-radius: 10px; text-decoration: none; cursor: pointer; box-shadow: 0 2px 0 var(--highlight_deep); transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; } .landing_v2 .btn_primary:hover { background: var(--highlight_deep); transform: translateY(-1px); box-shadow: 0 3px 0 #C9AE00; } .landing_v2 .btn_primary:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--highlight_deep); } .landing_v2 .btn_secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px; background: transparent; color: var(--ink); font-family: var(--display_font); font-size: 1rem; border: 1.5px solid var(--ink); border-radius: 10px; text-decoration: none; cursor: pointer; transition: background-color 0.12s ease, color 0.12s ease; } .landing_v2 .btn_secondary:hover { background: var(--ink); color: var(--paper); } /* --- Trust row ------------------------------------------------------- */ .landing_v2 .trust_row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 20px; font-size: 0.9375rem; color: var(--ink_muted); font-family: var(--body_font); } .landing_v2 .trust_stars { color: #E8B400; letter-spacing: 2px; font-size: 1rem; } /* --- Testimonials ---------------------------------------------------- */ /* The component styles itself in testimonials.css; only the section rhythm differs here, because the .landing_section wrapper already pads the block. */ .landing_v2 #testimonials_section { margin-top: 0; margin-bottom: 0; } /* --- Footer ---------------------------------------------------------- */ .landing_v2 #footer_bar { background-color: var(--ink); padding-top: 56px; padding-bottom: 56px; } .landing_v2 #footer_bar_inner { width: min(1120px, 92vw); } .landing_v2 .footer_bar_link { margin-top: 0; padding: 7px 0; color: rgba(255, 255, 255, 0.72); font-family: var(--body_font); } .landing_v2 .footer_bar_link:hover { color: var(--paper); } .landing_v2 .footer_stories_by_level { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0 24px; margin: 20px 0; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, 0.16); border-bottom: 1px solid rgba(255, 255, 255, 0.16); } /* --- / : hero ---------------------------------------------- */ .lang_landing_page #content_div_1 { width: min(1120px, 92vw); margin-left: auto; margin-right: auto; padding-left: 0; padding-right: 0; margin-bottom: 0; } .lang_landing_page #hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: start; padding-top: 56px; padding-bottom: 72px; } /* sticky on the wrapper, not on the card: otherwise the card slides down over the "Show me a story" link that sits below it */ .lang_landing_page #hero_form { position: sticky; top: 24px; align-self: start; } .lang_landing_page #hero_title { font-size: clamp(2.125rem, 4.4vw, 3.25rem); margin: 0 0 18px; } .lang_landing_page #hero_sub { font-size: 1.1875rem; line-height: 1.55; max-width: 46ch; margin-bottom: 28px; } /* Signature element: a static mock of the core tap-a-word interaction. */ .lang_landing_page #word_demo { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); padding: 26px 26px 22px; box-shadow: var(--shadow_card); } .lang_landing_page #word_demo_sentence { font-family: var(--display_font); font-size: clamp(1.125rem, 1.9vw, 1.4375rem); line-height: 1.75; color: var(--ink); margin: 0; } .lang_landing_page #word_demo_word { background: var(--highlight); color: var(--ink); padding: 2px 7px; border-radius: 5px; -webkit-box-decoration-break: clone; box-decoration-break: clone; } /* The chip repeats the source word rather than pointing at it with a caret: the word's position shifts with language and wrapping, a caret cannot track it. */ .lang_landing_page #word_demo_chip { margin-top: 18px; background: var(--ink); color: var(--paper); border-radius: 10px; border-left: 4px solid var(--highlight); padding: 14px 16px; } .lang_landing_page #word_demo_chip_head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .lang_landing_page #word_demo_source { font-family: var(--display_font); font-size: 1.1875rem; font-weight: 700; color: var(--highlight); } .lang_landing_page #word_demo_arrow { color: rgba(255, 255, 255, 0.4); } .lang_landing_page #word_demo_translation { font-family: var(--display_font); font-size: 1.1875rem; font-weight: 700; } .lang_landing_page #word_demo_audio { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--highlight); color: var(--ink); font-size: 0.6875rem; flex-shrink: 0; } .lang_landing_page #word_demo_note { margin: 6px 0 0; font-size: 0.875rem; color: rgba(255, 255, 255, 0.7); line-height: 1.4; } .lang_landing_page #word_demo_caption { margin: 14px 0 0; font-size: 0.875rem; color: var(--ink_muted); } /* --- / : sign-up card -------------------------------------- */ /* Inverted to ink so the yellow CTA is the brightest element on the page. */ .lang_landing_page #language_sign_up_form { width: auto; margin: 0; padding: 28px 26px 24px; background-color: var(--ink); background-image: none; border-radius: var(--radius); box-shadow: var(--shadow_lift); text-align: left; } .lang_landing_page #sign_up_title { font-family: var(--display_font); font-size: 1.375rem; line-height: 1.25; font-weight: 700; color: var(--paper); margin: 0 0 6px; } .lang_landing_page .signup_lede { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.66); margin: 0 0 20px; } .lang_landing_page .signup_label { display: block; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.66); margin-bottom: 6px; font-family: var(--body_font); } .lang_landing_page .signup_field { margin-bottom: 16px; } .lang_landing_page #email_login_input, .lang_landing_page #user_select_level { width: 100%; height: 52px; margin: 0; padding: 0 14px; border: 1.5px solid rgba(255, 255, 255, 0.22); border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--paper); font-size: 1rem; font-family: var(--body_font); } .lang_landing_page #email_login_input::placeholder { color: rgba(255, 255, 255, 0.42); } .lang_landing_page #email_login_input:focus, .lang_landing_page #user_select_level:focus { border-color: var(--highlight); background: rgba(255, 255, 255, 0.1); } .lang_landing_page #user_select_level option { background: var(--ink); color: var(--paper); } .lang_landing_page #sign_up_button { width: 100%; height: 54px; margin-top: 4px; background-color: var(--highlight); color: var(--ink); font-family: var(--display_font); font-size: 1.0625rem; font-weight: 700; border: 0; border-radius: 10px; cursor: pointer; transition: background-color 0.12s ease; } .lang_landing_page #sign_up_button:hover { opacity: 1; background-color: var(--highlight_deep); } .lang_landing_page .signup_reassurance { margin: 14px 0 0; font-size: 0.8125rem; line-height: 1.5; color: rgba(255, 255, 255, 0.55); text-align: center; } .lang_landing_page #by_email_status_div { margin: 0; } .lang_landing_page #by_email_status_text { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.45; } .lang_landing_page #by_email_status_text:not(:empty) { padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); } /* --- / : secondary links and story card -------------------- */ .lang_landing_page #show_me_div { width: auto; margin-top: 18px; text-align: center; } .lang_landing_page .show_me_link { display: inline-block; margin: 0 10px 6px; font-size: 0.9375rem; color: var(--ink_soft); } .lang_landing_page #how_it_works { background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } /* grid so the button gets its own row instead of flowing inline with the image and the bullets; the centred tracks keep it centred on the card */ .lang_landing_page #language_image_div { display: grid; grid-template-columns: auto auto; justify-content: center; align-items: center; column-gap: 28px; row-gap: 18px; width: auto; max-width: 620px; height: auto; padding: 28px 24px 24px; margin: 0 auto 28px; background: var(--highlight); border-radius: var(--radius); box-shadow: none; } .lang_landing_page #left_div, .lang_landing_page #right_div { height: auto; margin-left: 0; } .lang_landing_page #right_div_text p { color: var(--ink); font-size: 1.0625rem; margin-bottom: 0.6em; } .lang_landing_page #stories_link { display: inline-flex; align-items: center; justify-content: center; grid-column: 1 / -1; justify-self: center; width: auto; min-height: 50px; padding: 0 26px; margin: 0; border: 0; border-radius: 10px; background: var(--ink); color: var(--paper); font-family: var(--display_font); font-size: 1rem; font-weight: 700; } .lang_landing_page #stories_link:hover { opacity: 1; background: #262626; } /* --- / : root language picker ---------------------------------------- */ .landing_root_page #parent_content_div .content_div_wide { margin-bottom: 0; } .landing_root_page #first_div_landing { margin-top: 0; padding: 76px 20px; max-height: none; } .landing_root_page .app_div_link_container_2, .landing_root_page #last_div_landing .app_div_link_container_2 { max-width: 660px; margin-left: auto; margin-right: auto; } .landing_root_page #landing_main_question { font-size: clamp(2.125rem, 4.6vw, 3.25rem); font-family: var(--display_font); font-weight: 700; max-width: 18ch; margin: 0 auto 16px; line-height: 1.12; letter-spacing: -0.01em; color: var(--ink); } .landing_root_page #landing_main_question_subtitle { font-size: 1.1875rem; line-height: 1.55; color: var(--ink_soft); max-width: 50ch; margin: 0 auto; } /* Was margin-bottom:140px, which left a large gap under the primary CTAs. */ .landing_root_page .app_div_link_container_2 { margin-top: 36px; margin-bottom: 0; gap: 16px; } .landing_root_page .app_div_link { display: inline-flex; align-items: center; justify-content: center; gap: 10px; box-sizing: border-box; min-width: 190px; min-height: 64px; padding: 0 26px; font-family: var(--display_font); font-size: 1.25rem; font-weight: 700; background: var(--highlight); border: 0; border-radius: 12px; box-shadow: 0 2px 0 var(--highlight_deep); transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease; } .landing_root_page .app_div_link:hover { background: var(--highlight_deep); transform: translateY(-2px); box-shadow: 0 4px 0 #C9AE00; } .landing_root_page .app_div_link:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--highlight_deep); } .landing_root_page .hero_proof { justify-content: center; margin-top: 28px; } .landing_root_page .app_div_centered { background: var(--paper); background-image: none; border-top: 1px solid var(--rule); padding: 72px 20px; } .landing_root_page .app_div_centered_white { background: transparent; border-top: 1px solid var(--rule); } .landing_root_page .app_div_centered h4 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 12px; } .landing_root_page .app_div_desc { font-size: 1.0625rem; max-width: 54ch; margin-left: auto; margin-right: auto; } .landing_root_page .app_div_centered_image_div { margin-top: 28px; margin-bottom: 0; } /* the dropdown predates this layer: match the page's borders and radius */ .landing_root_page .language_dropdown { margin-top: 28px; font-family: var(--display_font); font-size: 1rem; background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; box-shadow: none; color: var(--ink); cursor: pointer; max-width: 92vw; } /* Feature list: was a 30% wide bordered box with an ordered list. Padding must clear the card shadow blur so no card is clipped by the panel. */ .landing_root_page #list_div { box-sizing: border-box; width: min(1040px, 92vw); margin: 40px auto 0; padding: 30px; background: var(--paper_warm); border: 1px solid var(--rule); border-radius: calc(var(--radius) + 6px); box-shadow: none; } .landing_root_page #list_div ol { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; text-align: left; } /* margin: 0 drops the shared `li` rule's 24px top margin, which fought the grid gap */ .landing_root_page #list_div li { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); margin: 0; padding: 24px; box-shadow: var(--shadow_card); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } .landing_root_page #list_div li:hover { transform: translateY(-3px); box-shadow: var(--shadow_lift); border-color: rgba(11, 11, 11, 0.2); } /* the shared `#list_div p` rule insets the body copy 16px more than the title */ .landing_root_page #list_div li p { margin: 0 0 10px; } .landing_root_page .list_subtitle { font-family: var(--display_font); font-size: 1.125rem; font-weight: 700; color: var(--ink); margin: 0 0 8px; } .landing_root_page #list_div li p:last-child { margin-bottom: 0; font-size: 1rem; } .landing_root_page #last_div_landing { padding-top: 72px; padding-bottom: 80px; text-align: center; border-top: 1px solid var(--rule); } .landing_root_page #landing_main_question_last { font-family: var(--display_font); font-size: clamp(1.5rem, 2.8vw, 2.125rem); font-weight: 700; color: var(--ink); margin: 0; } /* --- Mobile ---------------------------------------------------------- */ @media screen and (max-width: 900px) { .landing_v2 .landing_section { padding-top: 48px; padding-bottom: 48px; } .lang_landing_page #content_div_1 { width: 92vw; padding-top: 0; } .lang_landing_page #hero { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; padding-bottom: 48px; } /* Form column must not be sticky on mobile: it would cover the page. */ .lang_landing_page #hero_form { position: static; } .lang_landing_page #word_demo { padding: 20px; } .lang_landing_page #word_demo_chip { max-width: none; } .lang_landing_page #language_image_div { column-gap: 16px; row-gap: 14px; padding: 22px 18px 20px; } /* the base rule pins this to 200px, which stretches the whole row */ .lang_landing_page #right_div { height: auto; } .landing_root_page #first_div_landing { padding: 44px 20px 48px; } .landing_root_page #last_div_landing { padding-left: 20px; padding-right: 20px; } /* three compact cards across rather than three full-width blocks */ .landing_root_page .app_div_link_container_2 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 420px; } /* column-reverse keeps the desktop "German " source order while stacking the flag above the name on mobile */ .landing_root_page .app_div_link { flex-direction: column-reverse; gap: 6px; min-width: 0; min-height: 86px; padding: 12px 6px; font-size: 0.9375rem; border-radius: 14px; } .landing_root_page .app_div_link .lang_flag { font-size: 1.75rem; line-height: 1; } .landing_root_page .app_div_centered, .landing_root_page #last_div_landing { padding-top: 48px; padding-bottom: 48px; } .landing_root_page #list_div { margin-top: 28px; padding: 18px; } .landing_v2 #footer_bar { padding-top: 40px; padding-bottom: 40px; } .landing_v2 .footer_stories_by_level { grid-template-columns: 1fr 1fr; } } @media (prefers-reduced-motion: reduce) { .landing_v2 *, .landing_v2 *::before, .landing_v2 *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }